@import url('https://fonts.googleapis.com/css2?family=Mulish:wght@400;700;800&display=swap');
/* common shared styles start here */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    font-family: 'Mulish', sans-serif;
}
button {
    color: white;
    background: rgb(255, 84, 0);
    border: 0;
    outline: 0;
    height: 52px;
    border-radius: 8px;
}
/* common shared styles end here */

/* styles for navbar start here */
.header-section {
    margin-top: 20px;
}
.nav-container {
    /* border: 1px solid red; */
    /* min-height: 50px; */
    width: 80%;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.logo-container {
    /* border: 1px solid green; */
    width: 50%;
    display: flex;
    align-items: center;
}
.logo-text {
    margin-left: 16px;
    font-size: 2.25rem;
    font-weight: 800;
}
.go-text {
    color: #FF5400;
}
.nav-items-container {
    /* border: 1px solid blue; */
    width: 50%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.nav-items-container a {
    text-decoration: none;
    font-size: 1.125rem;
}
.home {
    font-weight: 700;
    color: #FF5400;
}
.hamburger {
    display: none;
}
/* styles for navbar end here */

/* styles for banner start here */
.banner-section {
    margin-top: 50px;
}
.banner-container {
    /* border: 1px solid red; */
    width: 80%;
    height: 500px;
    margin: 0 auto;
    background-image: linear-gradient(180.00deg, rgba(19, 19, 24, 0.8),rgba(19, 19, 24, 0) 100%), url('../images/banner.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    border-radius: 16px;

    display: flex;
    justify-content: center;
    align-items: center;
}
.banner {
    /* border: 1px solid green; */
    max-width: 99%;
    color: white;
    text-align: center;
}
.banner h1 {
    font-size: 4rem;
    font-weight: 800;
}
.banner-desc {
    /* border: 1px solid blue; */
    margin: 24px auto 48px;
    /* max-width: 85%; */
    max-width: 80%;
}
.banner-desc p {
    font-size: 1rem;
}
.banner-form {
    padding: 16px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.3);
}
.search {
    display: flex;
    justify-content: space-between;
    gap: 24px;
}
.search input, .search select, .search button {
    border: 0;
    outline: 0;
    height: 52px;
    border-radius: 8px;
    max-width: 174px;
    flex-grow: 1;

}
.search input, .search select {
    color: #13131880;
    padding-left: 16px;
}
.search button {
    font-weight: 700;
}

/* styling tours section starts */
.tours-section {
    margin-top: 100px;
}
.tours-container {
    /* border: 1px solid red; */
    /* min-height: 500px; */
    width: 80%;
    margin: 0 auto;
}
.tours {
    display: flex;
    justify-content: space-between;
}
.tours-desc {
    width: 50%;
    color: #5A5A5D;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    /* gap: 24px; */
}
.tours-desc h1 {
    font-size: 2.5rem;
    font-weight: 800;
    color: black;
}
.tours-desc ul {
    /* border: 1px solid green; */
    padding-left: 20px;
    margin: 24px auto;
}
.tours-desc ul li {
    margin-bottom: 16px;
}
.tours-desc button {
    max-width: 174px;
    font-size: 1.25rem;
    font-weight: 800;
}
.mountain {
    /* border: 1px solid blue; */
    width: 45%;
}
.mountain img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 16px;
}
/* styling tours section ends */

/* styling destination section starts */
.dest-section {
    margin-top: 100px;
}
.dest-container {
    /* border: 1px solid red; */
    /* min-height: 1500px; */
    width: 80%;
    margin: 0 auto;    
}
.destination {
    text-align: center;
}

.destination h1 {
    /* border: 1px solid green; */
    font-size: 2.5rem;
    font-weight: 800;
}
.dest-desc {
    /* border: 1px solid blue; */
    color: #5A5A5D;
    margin: 24px auto 48px;
    max-width: 55%;
}
.dest-collage {
    /* border: 1px solid yellow; */
    /* min-height: 1000px; */
}
.row {
    /* border: 1px solid purple; */
    display: flex;
    /* gap: 2.05128205%; */
    justify-content: space-between;
}
.row.row1, .row.row2 {
    margin-bottom: 24px;
}
.row > div {
    /* border: 1px solid skyblue; */
    position: relative;
}
.row1 > div {
    /* flex: 1; */
    width: 48.974359%;
}
.row2 div:nth-of-type(1) {
    width: 31.965812%;
}
.row2 div:nth-of-type(2) {
    width: 40.5128205%;
}
.row2 div:nth-of-type(3) {
    width: 23.4188034%;
}
.row3 div:first-child {
    width: 40.4273504%;
}
.row3 div:last-child {
    width: 57.5213675%;
}
.row div img {
    width: 100%;
    height: 100%;
    border-radius: 16px;
    display: block;
}
.centered-element {
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 1.25rem;
    font-weight: 800;
}
/* styling destination section ends */

/* styling feature section starts */
.feat-section {
    margin-top: 100px;
}
.feat-container {
    /* border: 1px solid red; */
    /* min-height: 1000px; */
    width: 80%;
    margin: 0 auto;
}
.features > h1, .feat-desc {
    text-align: center;
}
.features h1 {
    /* border: 1px solid green; */
    font-size: 2.5rem;
    font-weight: 800;
}
.feat-desc {
    /* border: 1px solid blue; */
    color: #5A5A5D;
    margin: 24px auto 48px;
    /* max-width: 55%; */
    max-width: 60%;
}
.feat-collage {
    /* border: 1px solid yellow; */
    /* min-height: 700px; */
}
.feat-row1 {
    display: flex;
    justify-content: space-between;
}
.feat-row2 {
    margin: 24px auto 0;
}
.good-hotel, .world-class, .best-price {
    /* border: 1px solid purple; */
    /* min-height: 300px; */
    width: 48.974359%;
    padding: 32px 55px 32px 32px;
    border-radius: 16px;
}
.best-price {
    margin: 0 auto;
}
.feat-card-title {
    font-size: 1.5rem;
    font-weight: 800;
    margin: 32px 0 16px;
}
.feat-card-desc {
    color: #13131880;
}
.good-hotel, .best-price {
    border: 1px solid rgba(251, 181, 99, 0.2);
    background: rgba(251, 181, 99, 0.05);
}
.world-class {
    border: 1px solid rgba(41, 206, 246, 0.2);
    background: rgba(41, 206, 246, 0.05);
}
/* styling feature section ends */

 /* guides section starts */
.guides-container {
    margin-top: 100px;
    padding-top: 150px;
    padding-bottom: 150px;
    background-image: linear-gradient(180.00deg, rgba(19, 19, 24, 0.8),rgba(19, 19, 24, 0) 100%), url('../images/banner.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    color: white;
    text-align: center;
}
.guides-container h1 {
    font-size: 2rem;
    font-weight: 800;
}
.guides-container h3 {
    font-size: 1.25rem;
    font-weight: 400;
    margin-top: 20px;
}
.guides-container button {
    margin-top: 15px;
    width: 12%;
    font-weight: 700;
}
 /* guides section ends */

/* styling nl section starts */
.nl-section {
    margin-top: 100px;
}
.nl-container {
    /* border: 1px solid red; */
    /* min-height: 500px; */
    width: 80%;
    margin: 0 auto;
}
.nl {
    display: flex;
    justify-content: space-between;
}
.newsletter {
    border: 1px solid rgb(255, 84, 0);
    border-radius: 16px;
    width: 40.5128205%;
    padding: 40px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.newsletter h2 {
    font-size: 1.5rem;
    font-weight: 800;
    margin-bottom: 16px;
}
.newsletter p {
    /* border: 1px solid green; */
    max-width: 85%;
    margin-bottom: 24px;
    color: #13131880;
}
.newsletter form {
    margin-top: 24px;
    display: flex;
    flex-direction: column;
}
.newsletter form input {
    border: 0;
    outline: 0;
    height: 52px;
    border-radius: 8px;
    width: 100%;
}
.newsletter form input[type="text"], .newsletter form input[type="email"] {
    background: rgba(19, 19, 24, 0.05);
    padding-left: 20px;
    margin-bottom: 16px;    
}
.newsletter form input[type="text"]::placeholder, .newsletter form input[type="email"]::placeholder {
    color: rgba(19, 19, 24, 0.3);
}
.newsletter form input[type="button"] {
    background: rgb(255, 84, 0);
    color: white;
    font-size: 1.25rem;
    font-weight: 800;
}
.traveldotcom {
    /* border: 1px solid blue; */
    width: 57.4358974%;
    position: relative;
}
.traveldotcom img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 16px;
}
.savings {
    position: absolute;
    /* width: 324px; */
    width: 48.2142857%;
    height: 120px;
    /* left: 960px; */
    right: -16px;
    /* top: 6224.84px; */
    bottom: 0;
    transform: rotate(-19.63deg);
    transform-origin: bottom left;

    border-radius: 16px;
    background: rgb(255, 84, 0);
    color: white;
    /* padding: 36px auto; */
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
}
.savings > div h2 {
    font-size: 1.5rem;
    font-weight: 400;
}
.savings > div h1 {
    font-size: 2rem;
    font-weight: 800;
}
/* styling nl section ends */

/* styling footer starts */
.footer-container {
    /* border: 1px solid red; */
    /* min-height: 500px; */
    margin-top: 100px;
    padding-top: 110px;
    padding-bottom: 110px;
    background: rgba(19, 19, 24, 0.05);
}
.footer-logo-container {
    /* border: 1px solid green; */
    /* width: 16.25%; */
    width: 25%;
    margin: 0 auto 0;
    display: flex;
    justify-content: center;
    align-items: center;
}
.footer-logo-text {
    margin-left: 16px;
    font-size: 2rem;
    font-weight: 800;
}
.footer-go-text {
    color: #FF5400;
}
.footer-desc {
    /* border: 1px solid blue; */
    width: 50%;
    margin: 16px auto 0;
    text-align: center;
    color: #13131880;
}
.socials {
    /* border: 1px solid yellow; */
    width: 12%;
    margin: 32px auto 0;
    display: flex;
    justify-content: space-between;
    font-size: 1.5rem;
}
.rule {
    width: 60%;
    margin: 50px auto 0;
}
.rights {
    /* border: 1px solid purple; */
    /* width: 15%; */
    width: 25%;
    text-align: center;
    margin: 50px auto 0;
    color: #5A5A5D;
}
/* styling footer ends */