* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.body_main {
    font-family: "Montserrat", sans-serif;
    background-color: #ede9e1;
}

/*------- header------------- */

/* ============header new====== */
 
header {
    background:transparent;
    padding: 1rem 2rem;
    position: relative;
}

.newheader {
    margin-top: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo img{
    width: 8em;
    vertical-align: middle;
    margin-top: 10px;
}

nav {
    display: flex;
    gap: 5rem;
}

/* Your custom nav styles */
nav a {
    font-weight: 500;
    display: inline-block;
    position: relative;
    text-decoration: none;
    color: white;
    font-size: 1rem;  
}
nav a::after {
    content: '';
    position: absolute;
    bottom: -3px; /* Adjust this value as needed */
    left: 0;
    width: 0%;
    height: 2px; /* Line thickness */
    background-color: bisque; /* Line color */
    transition: width 0.3s ease;
}
nav a:hover {
    color: bisque;
}
nav a:hover::after {
    width: 100%; /* Expand the line to full width on hover */
}
.cta-button {
    background-color: #f5f5f5;
    color: black;
    padding: 0.5rem 1rem;
    border: none;
    border-radius: 30px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.cta-button:hover {
    background-color: #006e5e;
    color: #f5f5f5;
}

.menu-button {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    color: #f5f5f5;
    padding: 0.5rem;
    font-size: 1.5rem;
}

.mobile-menu {
    display: none;
}

@media (max-width: 768px) {
    .desktop-nav, 
    .desktop-cta {
        display: none;
    }

    .menu-button {
        display: block;
    }

    .mobile-menu {
        display: none;
        position: absolute;
        z-index: +8;
        top: 100%;
        left: 0;
        right: 0;
        background: white;
        padding: 1rem;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }

    .mobile-menu.active {
        display: block;
    }

    .mobile-menu a {
        display: block;
        padding: 0.75rem 1rem;
        text-decoration: none;
        color: #000000;
        border-bottom: 1px solid #e5e7eb;
        font-weight: 500;
    }

    .mobile-menu a:last-child {
        border-bottom: none;
    }

    .mobile-menu .cta-button {
        display: block;
        margin-top: 1rem;
        text-align: center;
        background-color: #006e5e;
        color: #f5f5f5;
    }
}

/* ================== */

/* section */

.banner {
    
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    height: 100vh;
}

.banner_text {
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 70vh;
    color: white;
    text-align: center;
}

.banner_text p {
    width: 40%
}

.main_check_sec {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.check_sec {
    width: 75%;
    display: flex;
    justify-content: space-between;
    background-color: rgba(255, 255, 255, 0.2);
    /* -webkit-backdrop-filter: blur(10px); */
    backdrop-filter: blur(2px);
    border: solid 1px #928d8d;
    border-radius: 40px;
    align-items: center;
    padding: 5px 0px 5px 40px;
}

.check_sec h2 {
    font-size: 18px;
    color: white;
    font-weight: 400;
    margin: 0;
}

.check_sec span {
    font-size: 16px;
    color: white;
    font-weight: 100;
}
.nav-divider {
    background-color: #ffff;
    opacity: 60%;
    width: 1px;
    height: 40px;
}
.calender{
    background-color: rgba(255, 255, 255, 0.4);
    color: black;
    border: 1px solid #928d8d;
    border-radius: 20px;
    padding: 2px 10px;
    font-size: 12px;
    margin-top: 5px;
    font-weight: 500;
    transition: background-color 0.3s, color 0.3s, transform 0.3s;
}
.calender:hover {
    background-color: rgba(255, 255, 255, 0.8); /* Lighten background */
    color: #000000; /* Darken text */
    transform: scale(1.05); /* Slightly enlarge */
    border-color: #666; /* Darken border */
}
.guest{
    background-color: rgba(255, 255, 255, 0.4);
    color: rgb(0, 0, 0);
    border: 1px solid #928d8d;
    border-radius: 20px;
    padding: 2px 10px;
    font-size: 12px;
    margin-top: 5px;
    font-weight: 500;
    transition: background-color 0.3s, color 0.3s, transform 0.3s;
}
.guest:hover {
    background-color: rgba(255, 255, 255, 0.8); /* Lighten background */
    color: #000000; /* Darken text */
    transform: scale(1.05); /* Slightly enlarge */
    border-color: #666; /* Darken border */
}
.guest_btn{
    width: 18%;
    position: relative;
}
.guest1{
    background-color: rgba(255, 255, 255, 0.4);
    color: rgb(0, 0, 0);
    border: 1px solid #928d8d;
    border-radius: 20px;
    padding: 2px 10px;
    font-size: 14px;
    margin-top: 15px;
    font-weight: 500;
}

 /* Guest button styling */
.guest_btn {
    position: relative; /* Positioning relative to the button for dropdown alignment */
}
.searchicon img:hover{
    transform: scale(1.05); /* Slightly enlarge */
}
/* Guest selector dropdown styling */
#guestSelector {
    display: none; /* Hidden by default */
    background-color: #ffffff;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 10px;
    box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2);
    margin-top: 5px;
    position: absolute; /* Positioned relative to the parent guest_btn */
    z-index: 10;
}

/* Show dropdown when active */
#guestSelector.show {
    display: block;
}

/* Adjust input group styles */
.input-group {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 10px 0;
}

#guestSelector label {
    font-size: 14px;
    font-weight: 500;
}

input[type="text"] {
    width: 30px;
    text-align: center;
    border: none;
    font-size: 18px;
    background-color: #fff;
}

.btn-small {
    border: none;
    background-color: transparent;
}

.btn-small img {
    width: 18px;
    height: 18px;
}
.searchbutton{
    display: none;
}

/* ----------------------------------------------------- */
/* .dropdown1 {
    display: none; Hidden by default
    padding: 10px; */
    /* background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    width: 250px;
    margin-top: 10px;
    position: absolute;
    top: 93%;
    right: 22%;
    padding: 0px 20px 20px 20px;
    box-shadow: 5px 8px 13px #00000033;
}

.input-group {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 10px 0;
    padding-top: 20px;
}

input[type="text"] {
    width: 25px;
    text-align: center;
    border: none;
    font-size: 18px;
    background-color: #fff;
}
.btn-small{
    border: none;
    background-color: transparent;
}
.btn-small img{
    width: 20px;
    height: 20px;
}

.selected-info {
    margin-left: 10px;
    font-size: 16px;
} */

/* --------------------------------------------------------- */



.search {
    margin-right: 5px;
}

/* =================================== */
   /* Style the dropdown button */

.dropbtn {
    background-color: rgba(255, 255, 255, 0.4);
    color: black;
    border: 1px solid #928d8d;
    border-radius: 20px;
    padding: 2px 10px;
    font-size: 12px;
    margin-top: 5px;
    font-weight: 500;
    transition: background-color 0.3s, color 0.3s, transform 0.3s;
}
.dropbtn:hover {
    background-color: rgba(255, 255, 255, 0.8); /* Lighten background */
    color: #000000; /* Darken text */
    transform: scale(1.05); /* Slightly enlarge */
    border-color: #666; /* Darken border */
}
/* The container for the dropdown */
.dropdown {
    position: relative;
    display: inline-block;
}

/* Dropdown content (hidden by default) */
.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f1f1f1;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
    overflow: hidden;
}

/* Links inside the dropdown */
.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {
    background-color: #ddd;
}

/* Show the dropdown content when the button is clicked */
.show {
    display: block;
}

/* Style the search box inside the dropdown */
#searchInput {
    width: 100%;
    padding: 10px;
    margin-bottom: 10px;
    box-sizing: border-box;
    border: none;
    outline: none;
}

/* ================================= */

/* ====================================== */




.search {
    margin-right: 5px;
}

/* =================================== */
   /* Style the dropdown button */

/* .dropbtn {
    background-color: rgba(255, 255, 255, 0.4);
    color: black;
    border: 1px solid #928d8d;
    border-radius: 20px;
    padding: 2px 10px;
    font-size: 14px;
    margin-top: 5px;
    font-weight: 500;
} */

/* The container for the dropdown */
/* .dropdown {
    position: relative;
    display: inline-block;
} */

/* Dropdown content (hidden by default) */
/* .dropdown-content {
    display: none;
    position: absolute;
    background-color: #f1f1f1;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
    overflow: hidden;
} */

/* Links inside the dropdown */
/* .dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
} */

/* Change color of dropdown links on hover */
/* .dropdown-content a:hover {
    background-color: #ddd;
} */

/* Show the dropdown content when the button is clicked */
/* .show {
    display: block;
} */

/* Style the search box inside the dropdown */
/* #searchInput {
    width: 100%;
    padding: 10px;
    margin-bottom: 10px;
    box-sizing: border-box;
    border: none;
    outline: none;
} */


/* ==================================== */

/* section1 */

.sec1 {
    margin: 120px 0 90px 0;
}

.cards1 p {
    font-size: 16px;
    width: 70%
}

.cards {
    display: flex;
    justify-content: space-between;
}

.bttn {
    display: flex;
    justify-content: end;
    align-items: end;
    padding-bottom: 20px;
}

.bttn button {
    border: 0.4px solid #333333;
    background-color: #333333;
    color: #ffff;
    padding: 5px 20px;
    border-radius: 50px;
    transition: background-color 0.3s, color 0.3s, transform 0.3s;
}
.bttn button:hover {
    background: transparent; /* Lighten the background color */
    color: #000000; /* Keep text white */
    border: 1px solid #333333;
    transform: scale(1.05); /* Slightly enlarge button */
    cursor: pointer;
}

.resorts {
    display: flex;
    gap: 20px;
    height: 80vh;
}

.resort1 {
    background-image:linear-gradient(to top, rgba(0, 0, 0, 93%), rgba(0, 0, 0, 0.0)), url(../images/resort11.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    /* background: linear-gradient(to right, #ffffff, rgb(245, 245, 245, 0.2 ));; */
    border-radius: 16px;
    width: 54%;
    display: flex;
    flex-direction: column;
    justify-content: end;
    padding: 0 25px 25px 25px;
    transition: transform 0.3s ease; /* Smooth transition */
}
.resort1:hover{
    transform: scale(1.03); /* Slightly enlarge */
}
.resort1 h2 {
    color: #ffff;
    font-size: 28px;
    width: 60%;
}

.resort1 h3 {
    color: #ffff;
    font-size: 16px;
}

.resort2 {
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.resort2_img {
    background-image:linear-gradient(to top, rgba(0, 0, 0, 93%), rgba(0, 0, 0, 0.0)), url(../images/resort33.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 16px;
    height: 40vh; 
    display: flex;
    flex-direction: column;
    justify-content: end; 
    padding: 0 15px 15px 15px; 
    overflow: hidden; 
    transition: transform 0.3s ease; /* Smooth transition */
}
.resort2_img:hover{
    transform: scale(1.03); /* Slightly enlarge */
}
.resort2 h2 {
    color: #ffff;
    font-size: 28px;
    width: 60%;
}
.resort2 h3 {
    color: #ffff;
    font-size: 16px;
}

.resort2_img2 {
    background-image:linear-gradient(to top, rgba(0, 0, 0, 93%), rgba(0, 0, 0, 0.0)), url(../images/resort22.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 16px;
    height: 40vh;
    display: flex;
    flex-direction: column;
    justify-content: end; 
    padding: 0 15px 15px 15px; 
    overflow: hidden; 
    transition: transform 0.3s ease; /* Smooth transition */
}
.resort2_img2:hover{
    transform: scale(1.03); /* Slightly enlarge */
}
.resort_review{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.resort_review span img{
    width: 60px;
    vertical-align: unset;
    margin: 0 10px 0 10px;
}


/* --------------------------------- */

/* section2 */

.sec2 {
    margin: 120px 0 90px 0;
}

.rooms {
    display: flex;
    justify-content: space-between;
}

.rooms1 {
    width: 70%;
}

.rooms2 {
    width: 52%;
}

.roomcard {
    margin-top: 20px;
}

.room_card_one {
    margin-top: 40px;
}

.roombox {
    padding: 10px 0 10px 0;
    border: 0.4px solid #333333;
    border-radius: 0px 0px 15px 15px;

}

.roomimg {
    /* width: 26rem; */
    border-radius: 15px 15px 0 0;
}

.roombox h4,
h5 {
    padding-left: 10px;
}
.roombox h4{
    font-size: 20px;
    font-weight: 600;
}
.roombox h5{
    font-size: 16px;
    font-weight: 500;
}
.roooom {
    transition: transform 0.3s ease; /* Smooth transition */
}
.roooom:hover{
    transform: scale(1.05); /* Slightly enlarge */
}

.guest_book {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
}

/* .guest_book button {
    border: 0.4px solid #333333;
    padding: 5px 20px;
    border-radius: 30px;
    background-color: #EDE9E1;
} */

.guest_book span {
    font-weight: 600;
}
.butn{
    display: flex;
    align-items: center;
    justify-content: center;
}
.butn button {
    margin-top: 40px;
    border: 0.4px solid #333333;
    background-color: #333333;
    color: #ffff;
    padding: 5px 20px;
    border-radius: 50px;
    transition: background-color 0.3s, color 0.3s, transform 0.3s;
}
.butn button:hover{
    background: transparent; /* Lighten the background color */
    color: #000000; /* Keep text white */
    border: 1px solid #333333;
    transform: scale(1.05); /* Slightly enlarge button */
    cursor: pointer;
}


/* ---------------------------------------------------------------- */

/*----- section3------ */

.sec3 {
    margin: 90px 0 90px 0;
}

.destination {
    display: flex;
    justify-content: space-between;
}

.destination p {
    width: 40%;
    color: black;
}

.destin {
    margin: 50px 0 30px 0;
}

.destin1 {
    background-image: url(../images/destin1.png);
    background-size: cover;
    background-repeat: no-repeat;
    /* width: 400px; */
    height: 570px;
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: end;
    padding-bottom: 18px;
    border-radius: 10px;
    padding: 20px;
    transition: transform 0.3s ease; /* Smooth transition */
}
.destin1:hover{
    transform: scale(1.03); /* Slightly enlarge */
}
.destin2 {
    background-image: url(../images/destin2.png);
    background-size: cover;
    background-repeat: no-repeat;
    /* width: 400px; */
    height: 570px;
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: end;
    padding-bottom: 18px;
    border-radius: 10px;
    padding: 20px;
    transition: transform 0.3s ease; /* Smooth transition */
}
.destin2:hover{
    transform: scale(1.03); /* Slightly enlarge */
}

.destin3 {
    background-image: url(../images/destin3.png);
    background-size: cover;
    background-repeat: no-repeat;
    /* width: 400px; */
    height: 570px;
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: end;
    padding-bottom: 18px;
    border-radius: 10px;
    padding: 20px;
    transition: transform 0.3s ease; /* Smooth transition */
}
.destin3:hover{
    transform: scale(1.03); /* Slightly enlarge */
}
.destin h3,
.destin p {
    color: white;
    text-align: left;
}
.destin button {
    background-color: white;
    color: black;
    padding: 05px 20px;
    font-weight: 600;
    border-radius: 20px;
    border: none;
    transition: background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease; /* Smooth transition */
}
.destin button:hover {
    background:transparent; /* Light gray background */
    color: #ffffff; /* Darker text */
    border: 1px solid white;
}

/* --------------------------------------------------------------- */

/* HERO */

.hero {
    margin-bottom: 50px;
    object-fit: cover;
    background-repeat: no-repeat;
    height: 525px;
}

.hero_content {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        height: 60vh;
}

.hero_content h2 {
    color: white;
}

.hero_content span {
    font-size: 52px;
    color: #ffff;
    font-weight: 700;

}

.hero_content p {
    color: #ffff;
    font-weight: 100;
    width: 40%;
    line-height: 20px;
    padding-top: 30px;
}

.hero_content h2,
.hero_content span {
    line-height: 37px;
}

.hero_content button {
    margin-top: 10px;
    padding: 7px 20px;
    border: 1px solid white;
    background-color: transparent;
    color: white;
    border-radius: 20px;
    transition: background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease; /* Smooth transition */
}
.hero_content button:hover{
    background-color: white;
    color: black;
    transform: scale(1.05); /* Slight enlargement */
}
/* ------------------------------------------------------------------------------- */

/* CTA */

.cta {
    margin: 100px 0 100px 0;
    height: 360px;
    background-color: #333333;
    border-radius: 35px;
    padding: 50px;
}

.cta_content h2 {
    color: #ffff;
    width: 30%;
}

.cta_content p {
    color: #ffff;
    width: 45%;
    font-weight: 100;
}

.cta_links {
    margin-top: 60px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.cta_links button {
    padding: 7px 25px;
    background-color: transparent;
    color: #ffff;
    border: 1px solid #ffff;
    border-radius: 30px;
    transition: background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease; /* Smooth transition */
}
.cta_links button:hover{
    background-color: white;
    color: #000000;
}
.social-icons {
    display: flex;
    gap: 30px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.social-icons li {
    display: inline-block;
}

.social-icons img {
    width: 24px;
    height: auto;
    transition: transform 0.3s;
}

.social-icons .fb {
    width: 28px
}

.social-icons img:hover {
    transform: scale(1.05);
}

/* ------------------------------------------------------------------------ */

/* footer */

.footer {
    background-color: #333333;
    padding-bottom: 10px;
}

.footer_sec {
    padding: 40px 0 10px 0;
}

.footer_content h2 {
    color: #ffff;
    font-size: 16px;
    padding-top: 15px;
    font-weight: 100;
}

.footer_nav {
    display: flex;
    justify-content: center;
}

.footer_nav ul {
    color: white;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.footer_nav ul li:hover{
    color: bisque
}
.footer_contact {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.footer_contact h3,
.footer_contact p {
    color: white;
    font-size: 16px;
    font-weight: 100;
}

.footer_contact h2 {
    color: white;
}

.foooter_nav {
    display: flex;
    justify-content: center;
}

.footer_contact p {
    width: 70%;
    font-weight: 100;
}

.social-icons_ft {
    display: flex;
    gap: 30px;
    list-style: none;
    padding: 0;
}

.social-icons_ft li {
    display: inline-block;
}

.social-icons_ft img {
    width: 24px;
    height: auto;
    transition: transform 0.3s;
}

.social-icons_ft .fb {
    width: 28px
}

.social-icons_ft img:hover {
    transform: scale(1.1);
}

.line {
    height: 1px;
    width: auto;
    background-color: white;
    opacity: 40%;
}

.footer_copywrite h2 {
    font-size: 16px;
    color: #ffff;
    text-align: center;
    margin-top: 15px;
    font-weight: 200;
}

/* responsive section home page */

/* desktop */
@media (min-width: 1540px) {

    .banner_text {
         height: 60vh;
    }
    .dropdown1{
        top: 86%;
        right: 20%;
    }
    
    .sec1 {
        margin: 70px 0 40px 0;
    }
    .resort1 h2{
        width: 75%;
    }
    .resort2 h2{
        width: 70%;
    }

    .sec2 {
        margin: 70px 0 0px 0;
    }
    .sec3 {
        margin: 60px 0 60px 0;
    }
    .destin1{
        width: 360px;
        height: 535px;
    }
    .destin2{
        width: 360px;
        height: 535px; 
    }
    .destin3 {
        width: 360px;
        height: 535px;
    }
    .hero_content{
        height: 66vh;
    }
    .cta_content h2{
        width: 46%;
    }
    .cta_links {
        margin-top: 55px;
    }
    .cta{
        margin: 70px 0 70px 0;
        height: 345px;
    }
}


/*-------- tab----------  */

@media only screen and (max-width: 992px){

    .check_sec {
        width: 90%; /* Make the container a bit wider */
        padding: 10px 20px; /* Reduce padding */
        flex-wrap: wrap; /* Allow items to wrap onto the next line if necessary */
    }
    
    .mbcenter {
        flex: 1; /* Make each section take equal width */
        text-align: center; /* Center-align for better spacing */
        margin-bottom: 10px; /* Add spacing below each item */
    }

    .nav-divider {
        display: none; /* Hide dividers on smaller screens */
    }

    .dropdown1 {
        right: 5%; /* Adjust guest dropdown to fit within smaller screens */
    }

    
/* .main_check_sec{
    /* display: none; */
/* } */
.banner {
        height: 100vh;
}
.banner_text {  
        height: 50vh;       
}
.banner_text p {
        width: 75%
}
.check_sec {
    width: 100%;
    gap: 10px;
}
.sec1 {
    margin: 40px 0 40px 0;
}
.cards1{
    width: 80%;
}
.resort1{
    width: 85%;
}
.resort1 h2{
    font-size: 24px;
    width: 100%;
    margin: 0;
}
.resort_review {
    margin-top: 10px;
}
.resort2 h2 {
    color: #ffff;
    font-size: 24px;
    margin: 0;
    width: 100%; 
}
.dropdown1{
    width: 230px;
    top: 74%;
    right: 13%;
    padding: 0 10px 10px 10px;
}

/* ---------------------- */
.sec2{
    margin: 40px 0 40px 0;
}
.room{
    margin: 20px 0 20px 0;
}
.room_card_one{
    margin-top: 0;
}
.butn button {
    margin-top: 0;
}
/* ----------------------------- */

.sec3{
    margin: 40px 0 10px 0;
}
.destin1,.destin2,.destin3{
    width: 100%;
    height: 70vh;
    margin-bottom: 30px;
}
.destin1 h3{
    font-size: 24px;
}
.destin {
    margin: 10px 0 10px 0;
}
/* ---------------------------------- */


.hero_content{
    height: 36vh;
}
/* -------------------------------- */

.cta {
    margin: 70px 0 70px 0;
}
.cta{
    height: 320px;
}
.cta_content h2{
    width: 60%;
}
.cta_content p {
    width: 70%;
}
.cta_links {
    margin-top: 42px;
}
/* ---------------------------- */

.footer_content h2{
    padding-top: 116px;
}
.footer_nav h2,.footer_contact h2{
    font-size: 22px;
}
.footer_contact p{
    width: 100%;
}
}

/* -------------------------------------------------------------- */

/*--------mobile-------- */

@media only screen and (max-width: 768px){

    .banner {
        height: 110vh;
    }
    .check_sec {
        margin-top: 15px;
        width: 100%; /* Full width */
        flex-direction: column; /* Stack items vertically */
        align-items: flex-start; /* Align items to the start for better mobile view */
        padding: 10px; /* Reduce padding further */
    }
    
    .mbcenter {
        width: 100%; /* Full width for each item */
        margin-bottom: 15px; /* More spacing between each section */
        text-align: left; /* Align text to the left */
    }

    .guest_btn,
    .search {
        width: 100%; /* Full width for guest button and search icon */
        text-align: center; /* Center them */
        margin-top: 10px;
    }

    .dropdown-content {
        position: relative; /* Make dropdown position relative to the flow */
        min-width: 100%; /* Full width for dropdown content */
        box-shadow: none; /* Remove shadow on mobile */
    }

    .dropdown1 {
        width: 100%; /* Full width for guest selector dropdown */
        right: 0;
        top: auto; /* Allow it to sit naturally below */
        position: relative;
    }
    /* ============= */
    #guestSelector {
        position: relative; /* Make dropdown flow naturally on smaller screens */
        width: 100%; /* Full width on mobile */
        box-shadow: none; /* Remove shadow for a cleaner look */
    }

    .input-group {
        flex-direction: column;
        align-items: flex-start;
    }

    .btn-small img {
        width: 16px;
        height: 16px;
    }

    .guest1 {
        width: 100%; /* Full width for confirm button */
        padding: 10px;
        color: black;
    }
/* ======================================== */
    .btn-small img {
        width: 16px; /* Scale down the plus/minus icons */
        height: 16px;
    }

    /* Adjust the button sizes */
    .dropbtn, .guest{
        width: 100%; /* Full width for all buttons */
        padding: 10px; /* More padding for larger touch area */
        color: white;
    }

    .calender {
        width: 100%; /* Full width for date inputs */
        padding: 8px; /* Increase padding for accessibility */
        color: white;
    }
    .searchicon{
        display: none;
    }
    .searchbutton{
        display: block;
        width: 100%;
        display: flex;
        justify-content: center;
    }
    .searchbutton button{    
        padding: 5px 25px; 
        border-radius: 20px;
        border: none;
        background-color: #006e5e;
        color: white;
        margin-bottom: 20px;
}
    
/* .popup {
    display: none;
        position: fixed;
        z-index: 1;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
}     */
/* .check_sec{
    display: none;
    flex-direction: column;
    padding: 10px 0 0 0;
    gap: 13px;
    align-items: center;
    background-color: white;
} */
/* .nav-divider {
    width: 280px;
    height: 1px;
} */
.mbcenter{
    display: flex;
    flex-direction: column;
    align-items: center;
}
.guest_btn {
    white-space: nowrap;
}
.check_sec h2{
    color: #f5f5f5;
}
.dropdown1 {
    top: 59%;
    right: 10%;
}
.banner_text p {
    width: 100%;
}
.banner_text {
    height: 30vh;
}
.cards {
    display: flex;
    flex-direction: column;
}
.cards1 p {
    width: 120%;
}
.bttn {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-bottom: 20px;
}
.resorts {
    display: flex;
    flex-direction: column;
    gap: 20px;
    height: 185vh;
}
.resort2_img{
    height: 60vh;
}
.resort2_img2 {
    height: 60vh;
}
.resort1 {
    width: 100%;
    height: 100vh;
}
.resort1 h2 {
    font-size: 22px;
}
.resort2_img h2,.resort2_img2 h2{
    font-size: 22px;
}
.rooms {
    display: flex;
    flex-direction: column;
}
.rooms1 {
    width: 100%;
}
.rooms2 {
    width: 100%;
}
.destination {
    display: flex;
    flex-direction: column;
}
.destination p {
    width: 100%;
}
.hero_content {
    height: 50vh;
}
.hero_content span {
    font-size: 40px;
}
.hero_content p{
    width: 100%;
    font-weight: 400;
}
.cta{
    height: 285px;
    padding: 30px;
}
.cta_links {
    margin-top: 35px;
}
.cta_content h2 {
    width: 100%;
}
.cta_content p {
    width: 100%;
}
.cta_links button {
    padding: 7px 10px;
}
.social-icons {
    gap: 20px;
}


.footer_content h2 {
    padding-top: 0;
    margin-bottom: 15px;
}
.footer_sec {
    display: flex;
    flex-direction: column;
    padding: 10px 0 10px 0;
}
.footer_nav{
    display: flex;
    justify-content: start;
    margin: 10px 0 10px 0;
}
.footer_nav ul{
    padding: 0;
    gap: 10px;
}
.footer_contact{
    gap: 0;
    margin-bottom: 20px;
}
.social-icons_ft {
    justify-content: space-evenly;
    gap: 0;
}
.footer_copywrite h2 {
    line-height: 22px;
}
}


/* ===================================================================== */
/* ==================================================================== */
/* ================================================================= */

/* ==============resorts-page css====================== */

/*------------ section --------------------*/
.resortnav a{
    font-weight: 500;
    display: inline-block;
    position: relative;
    text-decoration: none;
    color: black;
    font-size: 1rem;
}
.resortnav a::after {
    content: '';
    position: absolute;
    bottom: -3px; /* Adjust this value as needed */
    left: 0;
    width: 0%;
    height: 2px; /* Line thickness */
    background-color: #006e5e; /* Line color */
    transition: width 0.3s ease;
}
.resortnav a:hover {
    color: #006e5e;
}
.resortnav a:hover::after {
    width: 100%; /* Expand the line to full width on hover */
}

.banner1{
    /* background-image: url(/assets/images/banner/rooms\ banner.png);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat; */
    height: 40vh;
    
}
.resort_text{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 80vh;
    color: white;
    text-align: center;
}


/*========== guest section====================== */

.resortpage .main_check_sec {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    margin-top: 55px;
}

.resortpage .check_sec {
    width: 80%;
    display: flex;
    justify-content: space-between;
    background-color: rgba(255, 255, 255, 0.2);
    /* -webkit-backdrop-filter: blur(10px); */
    backdrop-filter: blur(2px);
    border: solid 1px #928d8d;
    border-radius: 40px;
    align-items: center;
    padding: 5px 0px 5px 40px;
    position: relative;
    z-index: +5;
}

.resortpage .check_sec h2 {
    font-size: 18px;
    color: rgb(0, 0, 0);
    font-weight: 400;
    margin: 0;
}

.resortpage .check_sec span {
    font-size: 16px;
    color: white;
    font-weight: 100;
}
.resortpage .nav-divider {
    background-color: #ffff;
    opacity: 60%;
    width: 1px;
    height: 40px;
}
.resortpage .calender{
    background-color: rgba(255, 255, 255, 0.4);
    color: black;
    border: 1px solid #928d8d;
    border-radius: 20px;
    padding: 2px 10px;
    font-size: 12px;
    margin-top: 5px;
    font-weight: 500;
}
.resortpage .guest{
    background-color: rgba(255, 255, 255, 0.4);
    color: rgb(0, 0, 0);
    border: 1px solid #928d8d;
    border-radius: 20px;
    padding: 2px 10px;
    font-size: 12px;
    margin-top: 5px;
    font-weight: 500;
}
.resortpage .guest_btn{
    width: 18%;
    position: relative;
}
.resortpage .guest1{
    background-color: rgba(255, 255, 255, 0.4);
    color: rgb(0, 0, 0);
    border: 1px solid #928d8d;
    border-radius: 20px;
    padding: 2px 10px;
    font-size: 14px;
    margin-top: 15px;
    font-weight: 500;
}
 /* Guest button styling */
 .resortpage .guest_btn {
    position: relative; /* Positioning relative to the button for dropdown alignment */
}

/* Guest selector dropdown styling */
.resortpage #guestSelector {
    display: none; /* Hidden by default */
    background-color: #ffffff;
    border: 1px solid #ddd;
    border-radius: 8px;
    width: 120%;
    padding: 10px;
    box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2);
    margin-top: 5px;
    position: absolute; /* Positioned relative to the parent guest_btn */
    z-index: 10;
}

/* Show dropdown when active */
.resortpage #guestSelector.show {
    display: block;
}

/* Adjust input group styles */
.resortpage .input-group {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 10px 0;
}

.resortpage #guestSelector label {
    font-size: 14px;
    font-weight: 500;
}

.resortpage input[type="text"] {
    width: 30px;
    text-align: center;
    border: none;
    font-size: 18px;
    background-color: #fff;
}

.resortpage .btn-small {
    border: none;
    background-color: transparent;
}

.resortpage .btn-small img {
    width: 18px;
    height: 18px;
}
.resortpage .searchbutton{
    display: none;
}


/* =================================== */
   /* Style the dropdown button */

.resortpage .dropbtn {
    background-color: rgba(255, 255, 255, 0.4);
    color: black;
    border: 1px solid #928d8d;
    border-radius: 20px;
    padding: 2px 10px;
    font-size: 12px;
    margin-top: 5px;
    font-weight: 500;
}

/* The container for the dropdown */
.resortpage .dropdown {
    position: relative;
    display: inline-block;
}

/* Dropdown content (hidden by default) */
.resortpage .dropdown-content {
    display: none;
    position: absolute;
    background-color: #f1f1f1;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
    overflow: hidden;
}

/* Links inside the dropdown */
.resortpage .dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

/* Change color of dropdown links on hover */
.resortpage .dropdown-content a:hover {
    background-color: #ddd;
}

/* Show the dropdown content when the button is clicked */
.resortpage .show {
    display: block;
}

/* Style the search box inside the dropdown */
.resortpage #searchInput {
    width: 100%;
    padding: 10px;
    margin-bottom: 10px;
    box-sizing: border-box;
    border: none;
    outline: none;
}

/* ================================= */


/* -------------------------------------------- */
.filter-sort{
  display: flex;
  justify-content: end;
  align-items: center;
  margin: 10px 0 10px 0;
  gap: 20px;
}

/* .filter{
  justify-content: end;
  align-items: end;
  margin: 10px 70px;
} */

.filter img{
  width: 20px;
  height: 20px;
}

.sort-section select{
  position: relative;
  z-index: 2;
  padding: 5px 10px;
  border-radius: 30px;
}
/* -------------------------------------- */


/* input------------------ */

.styled_chekbox input[type="checkbox"] {
    display: none;
}

/* Style the label for the custom checkbox */
.styled_chekbox label {
    position: relative;
    padding-left: 30px;
    cursor: pointer;
    user-select: none;
}

/* Create the box using ::before pseudo-element */
.styled_chekbox label::before {
    content: "";
    position: absolute;
    left: -1px;
    top: 2px;
    width: 20px;
    height: 20px;
    background-color: #fff;
    border: 2px solid #ccc;
    border-radius: 4px;
    transition: background-color 0.3s, border-color 0.3s;
}

/* Checkmark style when the checkbox is checked */
.styled_chekbox label::after {
    content: "";
    position: absolute;
    display: none;
    left: 6px;
    top: 4px;
    width: 6px;
    height: 10px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

/* When the checkbox is checked, change the box's color and show the checkmark */
.styled_chekbox input[type="checkbox"]:checked + label::before {
    background-color: #002f4d;
    border-color: #002f4d;
}

.styled_chekbox input[type="checkbox"]:checked + label::after {
    display: block;
}

/* ==================================== */

/*------filter-box--------  */

.filter-sec{
    width: 20%;
}
.filter_box{
    display: flex;
    justify-content: space-evenly;
}
.filter_chechbox{
    background-color: #fff;
    padding: 15px;   
    border-radius: 15px;
}
.filter-text-icon{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 5px;
}
.filter-text-icon img{
    width: 20px;
    height: 20px;
}
/* .budget{
    border: 1px solid black;
    padding: 10px;
} */
.budget h3{
    font-size: 20px;
    padding-bottom: 5px;
}
.price-filter{
    display: flex;
}
.price-filter label{
    font-size:18px;
}
.price-range {
    display: flex;
    gap: 10px;
    margin-bottom: 5px;
    position: relative;
}
.slider-container {
    position: relative;
    width: 100%;
    height: 40px;
}
.slider-track {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
    height: 4px;
    background-color: #ddd;
}
.slider-range {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    height: 4px;
    background-color: #002f4d;
}
.slider-container input[type="range"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 100%;
    outline: none;
    position: absolute;
    margin: auto;
    top: 0;
    bottom: 0;
    background-color: transparent;
    pointer-events: none;
}
.slider-container input[type="range"]::-webkit-slider-runnable-track {
    -webkit-appearance: none;
    height: 5px;
}
.slider-container input[type="range"]::-moz-range-track {
    -moz-appearance: none;
    height: 5px;
}
.slider-container input[type="range"]::-ms-track {
    appearance: none;
    height: 5px;
}
.slider-container input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    height: 1.7em;
    width: 1.7em;
    background-color: #002f4d;
    cursor: pointer;
    margin-top: -9px;
    pointer-events: auto;
    border-radius: 50%;
}
.slider-container input[type="range"]::-moz-range-thumb {
    -moz-appearance: none;
    height: 1.7em;
    width: 1.7em;
    cursor: pointer;
    border-radius: 50%;
    background-color: #002f4d;
    pointer-events: auto;
}
.slider-container input[type="range"]::-ms-thumb {
    appearance: none;
    height: 1.7em;
    width: 1.7em;
    cursor: pointer;
    border-radius: 50%;
    background-color: #002f4d;
    pointer-events: auto;
}
.slider-container input[type="range"]:active::-webkit-slider-thumb {
    background-color: #ffffff;
    border: 3px solid #002f4d;
}
.divider-filter-line{
    height: 2px;
    background-color: rgba(0, 0, 0, 0.215);
    margin: 15px 0;
}
.divider-filtter-line{
    height: 2px;
    background-color: rgba(0, 0, 0, 0.215);
    margin-bottom: 10px;
}
.filter_box h5{
    padding: 0;
}
/* .filter-by{
    margin: 25px 0 15px ;
} */

/*---------- premium-resorts --------------- */

.premium{
  background-color: #002F4D;
  padding: 30px 30px;
}
.premium h2{
  color: white;
}

.resortcard{
    margin: 50px 0 50px 0;
}

.resortbox {
    padding: 16px;
    border: 0.4px solid #333333;
    border-radius: 0px 0px 15px 15px;
    background-color: #ede9e1;
}
.resortbox h4{
  font-weight: 600;
  font-size: 20px;
}
.resortbox h5{
    font-size: 16px;
    font-weight: 500;
    padding: 0;
}
.rsrt{
    margin: 20px 0 20px 0;
}

.resorting {
    width: 33rem;
    border-radius: 15px 15px 0 0;
}
.rating{
    display: flex;
    flex-direction: column;
    padding-bottom: 24px;
}
.rating img{
  width: 70px;
}

.resortbox .guest_book {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0;
}

.guest_book button {
    border: 0.4px solid #333333;
    padding: 5px 20px;
    border-radius: 30px;
    color: #000000;
    background-color: #fec048;
    transition: background-color 0.3s, color 0.3s, transform 0.3s;
}
.guest_book button:hover {
    background: transparent; /* Lighten the background color */
    color: #000000;
    /* transform: scale(1); Slightly enlarge button */
    cursor: pointer;
}
.guest_book button a{
    color: inherit;
    text-decoration: none;
}

.guest_book span {
    font-size: 24px;
    font-weight: 600;
}

/* ------responsive resort page */

/* desktop */
@media (min-width: 1281px){
    .dropdown-resort{
        z-index: 3;
        top: 33%;
        right: 19%;
    }
}

/*-------- tab----------  */

@media only screen and (max-width: 992px){
     
    .resortpage .check_sec {
        width: 100%; /* Make the container a bit wider */
        padding: 10px 20px; /* Reduce padding */
        flex-wrap: wrap; /* Allow items to wrap onto the next line if necessary */
    }
    
    .resortpage .mbcenter {
        flex: 1; /* Make each section take equal width */
        text-align: center; /* Center-align for better spacing */
        margin-bottom: 10px; /* Add spacing below each item */
    }

    .resortpage .nav-divider {
        display: none; /* Hide dividers on smaller screens */
    }

    .resortpage .dropdown1 {
        right: 5%; /* Adjust guest dropdown to fit within smaller screens */
    }
    .resortpage .dropbtn {
        white-space: nowrap;
    }

    .banner1 {
        height: 50vh;
    }
    .filter-sec {
        width: 40%;
    }
    .resort-check_sec{
        display: none;
    }
    .premium{
        padding: 15px 10px;
    }
    .premium h2 {
        font-size: 24px;
    }
    .guest_book button {
        font-size: 14px;
        padding: 3px 12px;
    }
    .guest_book span{
        font-size: 20px;
    }
}


/*--------mobile-------- */

@media only screen and (max-width: 768px){
    
    .resortpage .check_sec {
        margin-top: 15px;
        width: 100%; /* Full width */
        flex-direction: column; /* Stack items vertically */
        align-items: flex-start; /* Align items to the start for better mobile view */
        padding: 10px; /* Reduce padding further */
    }
    .resortpage .main_check_sec {
        margin-top: 25px;
    }
    .resortpage .mbcenter {
        width: 100%; /* Full width for each item */
        margin-bottom: 15px; /* More spacing between each section */
        text-align: left; /* Align text to the left */
    }

    .resortpage .guest_btn,
    .search {
        width: 100%; /* Full width for guest button and search icon */
        text-align: center; /* Center them */
        margin-top: 10px;
    }

    .resortpage .dropdown-content {
        position: relative; /* Make dropdown position relative to the flow */
        min-width: 100%; /* Full width for dropdown content */
        box-shadow: none; /* Remove shadow on mobile */
    }

    .resortpage .dropdown1 {
        width: 100%; /* Full width for guest selector dropdown */
        right: 0;
        top: auto; /* Allow it to sit naturally below */
        position: relative;
    }
    /* ============= */
    .resortpage #guestSelector {
        position: relative; /* Make dropdown flow naturally on smaller screens */
        width: 100%; /* Full width on mobile */
        box-shadow: none; /* Remove shadow for a cleaner look */
    }

    .resortpage .input-group {
        flex-direction: column;
        align-items: flex-start;
    }

    .resortpage .btn-small img {
        width: 16px;
        height: 16px;
    }

    .resortpage .guest1 {
        width: 100%; /* Full width for confirm button */
        padding: 10px;
        color: black;
    }
/* ======================================== */
    .resortpage .btn-small img {
        width: 16px; /* Scale down the plus/minus icons */
        height: 16px;
    }

    /* Adjust the button sizes */
    .resortpage .dropbtn,.resortpage .guest{
        width: 100%; /* Full width for all buttons */
        padding: 10px; /* More padding for larger touch area */
        color: rgb(0, 0, 0);
    }

    .resortpage .calender {
        width: 100%; /* Full width for date inputs */
        padding: 8px; /* Increase padding for accessibility */
        color: rgb(0, 0, 0);
    }
    .resortpage .searchicon{
        display: none;
    }
    .resortpage .searchbutton{
        display: block;
        width: 100%;
        display: flex;
        justify-content: center;
    }
    .resortpage .searchbutton button{    
        padding: 5px 25px; 
        border-radius: 20px;
        border: none;
        background-color: #006e5e;
        color: white;
        margin-bottom: 20px;
}
    
   
    .banner1 {
        height: 80vh;
    }
    .filter_box{
        flex-direction: column;
    }
    .filter-sec {
        width: 100%;
    }
}
/* ----------------------------------------------------- */


/* ============================================================== */
/* ============================================================== */
/* ============================================================== */

/*==================== single-resort-====================== */
/* header */

.nav-single-resort a{
    font-weight: 500;
    display: inline-block;
    position: relative;
    text-decoration: none;
    color: black;
    font-size: 1rem;
}
.nav-single-resort a::after {
    content: '';
    position: absolute;
    bottom: -3px; /* Adjust this value as needed */
    left: 0;
    width: 0%;
    height: 2px; /* Line thickness */
    background-color: #006e5e; /* Line color */
    transition: width 0.3s ease;
}
.nav-single-resort a:hover {
    color: #006e5e;
}
.nav-single-resort a:hover::after {
    width: 100%; /* Expand the line to full width on hover */
}
/* === */

/* ----------------photo gallery----------------------------- */

.photo-gallery {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 15px;
    align-items: stretch;
    height: 500px;
    margin-top: 90px;
}
.big-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Ensure the image covers the entire area */
  border-radius: 15px;
}
.thumbnail-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  height: 100%;
}
.thumbnail {
  cursor: pointer;
  transition: transform 0.2s;
  border: 2px solid transparent;
  border-radius: 5px;
}
.thumbnail:hover {
  transform: scale(1.05);
  border-color: #ddd;
}
.thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Ensure thumbnails cover their area */
  border-radius: 15px;
}
/* ----------------------------------------------------------------- */

/*----------- section1------------ */
.sin-rst{
  margin-top: 50px;
  display: flex;
  justify-content: space-between;
  /* align-items: center; */
}
.sin-rst p{
  width: 70%;
}
.about-resort{
  margin-top: 50px;
}

.single-about-resort{
    display: flex;
    justify-content: space-between;
    margin-top: 50px;
 }
 .single-about-resort p{
   width: 70%;
 }
 .single-about-resort ul{
   width: 70%;
 }
 .amenities ul{
   display: flex;
   flex-direction: column;
   gap: 30px;
   margin-top: 25px;
   list-style: none;
   padding: 0;
 }
 .amenities ul li{
     white-space: nowrap;
 }
 .amenities ul li img{
     padding-right: 20px;
 }

/* -------------------------------------- */

/* ===resort-guest==== */
/* 
.guest-room{
  width: 52%;
}
.guest-room .res-guest{
  display:flex;
  justify-content: space-between;
  margin-bottom: 15px;
}
.guest-room .res-guest span{
  font-size: 24px;
  font-weight: 600;
}
.guest-room .res-guest button{
  padding: 1px 20px;
  background-color: #002f4d;
  color: #ffffff;
  font-weight: 600;
  border-radius: 30px;
}
.guest-room .room-guest{
  background-color: #ffffff;
  padding: 20px;
  border-radius: 20px;
  box-shadow: 5px 8px 13px #00000033
}
.guest-room .checkins{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}
.guest-room .checkins h2{
  font-size: 16px;
}
.guest-room .checkins input{
  padding: 5px 10px;
  border-radius: 10px;
}
.guest-room .guest_btnn{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
}
.guest-room .guest_btn h2{
  font-size: 24px;
  margin: 0;
}
.guest-room .guest{
  padding: 5px 20px;
  font-weight: 600;
  border-radius: 30px;
  position: relative;
}
.guest-room .price-calculator{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}
.guest-room .price-calculator h5{
  font-size: 16px;

}

.guest-room .divider{
  height: 1px;
  background-color: #ddd;
  
}
.guest-room .total{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;
}
.guest-room .total span{
  font-size: 24px;
  font-weight: 600;
} */

/* =================================== */

/*=======dropdown===== */

/* .dropdown-single-resort {
  display: none; Hidden by default */
  /* padding: 10px; */
  /* background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 8px;
  width: 250px;
  margin-top: 10px;
  position: absolute;
  top: 122%;
  right: 8%;
  padding: 0px 20px 20px 20px;
  box-shadow: 5px 8px 13px #00000033;
}

.dropdown-single-resort .input-group {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 10px 0;
  padding-top: 20px;
}

.dropdown-single-resort input[type="text"] {
  width: 25px;
  text-align: center;
  border: none;
  font-size: 18px;
  background-color: #fff;
}
.dropdown-single-resort .btn-small{
  border: none;
  background-color: transparent;
}
.dropdown-single-resort .btn-small img{
  width: 20px;
  height: 20px;
}

.dropdown-single-resort .guest1{
  padding: 1px 20px;
  margin-top: 15px;
  border-radius: 30px;
} */



/*------------------ section2 --------------*/
.single-resortcard{
    margin: 30px 0 30px 0;
}
.single-resortcard h2{
    margin-bottom: 20px;
}

.single-resortbox {
    padding: 16px;
    border: 0.4px solid #333333;
    border-radius: 0px 0px 15px 15px;
    background-color: #ede9e1;
}
.single-resortbox h4{
  font-weight: 600;
  font-size: 20px;
}
.single-resortbox h5{
    font-size: 16px;
    font-weight: 500;
    padding: 0;
}
.single-rsrt{
    margin: 20px 0 20px 0;
}

.single-resorting {
    width: 26rem;
    border-radius: 15px 15px 0 0;
    object-fit: cover;
    height: 15rem;
}
.single-resort-rating{
    display: flex;
    flex-direction: column;
    padding-bottom: 24px;
}
.single-resort-rating img{
  width: 70px;
}

.single-resortbox .single-guest_book {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0;
}

.single-guest_book button {
    border: 0.4px solid #333333;
    padding: 5px 20px;
    border-radius: 30px;
    background-color: #fec048;
}
.single-guest_book button a{
    color: #000000;
    text-decoration: none;
}

.single-guest_book span {
    font-size: 24px;
    font-weight: 600;
}

/* ============================================= */

/* section3  */

/* .available{
  margin-top: 30px;
}
.price-table{
  margin-top:15px;
  width: 100%;
  background-color:transparent;
  /* box-shadow: 5px 8px 13px #00000033; */
/* }
table {
  border-collapse: collapse;
  width: 100%;
  border-width: 1px;
}
th, td {
  border: 1px solid black;
  padding: 8px;
  text-align: left;  
}
th{
  font-size: 20px;
}
tbody, td, tfoot, th, thead, tr {
  border-color: black !important;
  border-style: solid !important;
  border-width: 1px !important;
} */ 


/*------- section4----- */

.Review{
    margin-top: 50px;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
}
.Review p{
    text-align: center;
    width: 35%;
}

/*=== ==swiper css ========*/

.swiper-container {
  position:relative;
  overflow: hidden;

  height: 300px;
  margin: 40px 0 120px 0;
}

.swiper-container > .swiper-slide__content {
position:absolute;
top:0;
}

.swiper-slide {
height: 300px;
display:flex;
background: #eee;
border-radius: 15px;
align-items: center;
justify-content:center;
transition:all 200ms linear;
transform: scale(0.8);

&.swiper-slide-active{
  transform: scale(1);
  background: #333333
}
}
.swiper-wrapper{
  margin: 10px 0 20px 0;
}
/* .swiper-slide {
height: 300px;
border-radius: 15px;
display: flex;
background: #eee;
align-items: center;
justify-content: center;
transition: all 200ms linear;   


&.swiper-slide-active {
  background: #fc0;
}
} */

.review1{
  margin: 0 20px 0 20px ;
  font-family: "Poppins";
  color: #ffffff;
}

.review1 h4{
  margin-top: 20px;
}
.review1 h5{
  color: #A6A6A6;
  font-weight: 200;
}

.review1 p{
  padding-top: 20px;
  color: #A6A6A6;
  font-weight: 200;
}
.swiper-dott{
  margin-top: 50px;
}

/* ---------------- */
/* responsive single resort */

    
/*-------- tab----------  */

@media only screen and (max-width: 992px){
    .photo-gallery{
        grid-template-columns: 1fr;
        margin-top: 30px;
        gap: 0;
    }
    .big-photo{
        height: 350px;
    }
    .thumbnail-container{
        grid-template-columns: 1fr 1fr 1fr 1fr;
    }
    .sin-rst {
        margin-top: 35px;
        align-items: normal;
    }
    .single-resortcard h2{
        margin-bottom: 10px;
    }
    .Review{
        margin-top: 30px;
        align-items: start;
    }
    .Review p {
        text-align: start;
        width: 70%;
    }
    .swiper-container {
        margin: 15px 0 45px 0;
    }
}
/*--------mobile-------- */

@media only screen and (max-width: 768px){

    .dropdown {
    position: relative;
    display: inline-block;
    width: 100%;
}
    .photo-gallery {
        height: 440px;
    }
    .thumbnail img{
        border-radius: 5px;
    }
    .sin-rst {
        flex-direction: column;
    }
    .sin-rst p {
        width: 100%;
    }
    .about-resort {
        margin-top: 20px;
    }
    .single-resortcard{
        margin: 0;
    }
    .single-about-resort {
        margin-top: 10px;
    }
    .single-about-resort ul{
        width: 100%;
        padding-left: 20px;
    }
    .Review {
        margin-top: 10px;
        align-items: start;
    }
    .review1 {
        margin: 0;
        padding: 9px;
    }
    .single-resortcard h2 {
        margin: 20px 0 0 0;
    }       
}
/* ============================================================= */   
/* ============================================================= */   
/* ============================================================= */   


/*============ single-room============================ */

/* header */
.nav-single-rooms a{
    font-weight: 500;
    display: inline-block;
    position: relative;
    text-decoration: none;
    color: black;
    font-size: 1rem;
}
.nav-single-rooms a::after {
    content: '';
    position: absolute;
    bottom: -3px; /* Adjust this value as needed */
    left: 0;
    width: 0%;
    height: 2px; /* Line thickness */
    background-color: #006e5e; /* Line color */
    transition: width 0.3s ease;
}
.nav-single-rooms a:hover {
    color: #006e5e;
}
.nav-single-rooms a:hover::after {
    width: 100%; /* Expand the line to full width on hover */
}

/* ----------------photo gallery----------------------------- */

.room-photo-gallery {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 15px;
    align-items: stretch;
    height: 500px;
    margin-top: 90px;
}
.room-big-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Ensure the image covers the entire area */
  border-radius: 15px;
}
.room-thumbnail-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  height: 100%;
}
.room-thumbnail {
  cursor: pointer;
  transition: transform 0.2s;
  border: 2px solid transparent;
  border-radius: 5px;
}
.room-thumbnail:hover {
  transform: scale(1.05);
  border-color: #ddd;
}
.room-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Ensure thumbnails cover their area */
  border-radius: 15px;
}

/* ----------------------------------------------------------------- */


/*----------- section1------------ */
.room-sin-rst{
    margin-top: 50px;
    display: flex;
    justify-content: space-between;
    /* align-items: center; */
  }
.room-sin-rst p{
    width: 70%;
  }
.room-rating{
    display: flex;
    align-items: baseline;
    gap: 6px;
}
.room-rating span{
    font-size: 24px;
    font-weight: 600;
}
.room-rating img{
    width: 10%;
    height: auto;
}
.room-review{
    display: flex;
    align-items: baseline;
    gap: 8px;
}
.room-review span{
    font-size: 24px;
    font-weight: 600;
}
.room-review h4{
    font-size: 16px;
}
.about-rooms{
    margin-top: 20px;
  }
.checkinn ul li{
    width: 70%;
}  
.chechoutt ul li{
    width: 70%;
}
  
  /* -------------------------------------- */
  
  /* ===resort-guest==== */
  
  .single-guest-room{
    width: 70%;
  }
  .single-res-guest{
    /* display:flex;
    justify-content: space-between; */
    margin-bottom: 15px;
  }
  .single-res-guest span{
    font-size: 24px;
    font-weight: 600;
  }
  .single-res-button{
    display: flex;
    justify-content: center;
    margin-top: 20px;
  }
  .single-res-button button{
    padding: 5px 30px;
    background-color: #002f4d;
    color: #ffffff;
    font-weight: 600;
    border-radius: 30px;
    transition: transform 0.3s ease; /* Smooth transition */
  }
  .single-res-button button:hover{
    background-color: transparent;
    color: black;
  }
  .single-room-guest{
    background-color: #ffffff;
    padding: 20px;
    border-radius: 20px;
    box-shadow: 5px 8px 13px #00000033
  }
  .room-checkins{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
  }
  .room-checkins h2{
    font-size: 16px;
  }
  .room-checkins input{
    padding: 5px 10px;
    border-radius: 10px;
  }
  .room-guest_btn{
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
  }
  .room-guest_btn h2{
    font-size: 24px;
    margin: 0;
  }
  .room-beds-selector{
    display: flex;
    flex-direction: column;
    margin-bottom: 10px;
    gap: 10px;
  }
  .room-beds-selector .single-beds{
    display: flex;
    justify-content: space-between;
  }
  .room-beds-selector .single-beds img{
    width: 50px;  
  }
  .room-beds-selector .double-bed{
    display: flex;
    justify-content: space-between;
  }
  .room-beds-selector .double-bed img{
    width: 35px;
  }
  .room-beds-selector .single-bed{
    display: flex;
    justify-content: space-between;
  }
  .room-beds-selector .single-bed img{
    width: 35px;
  }
  .room-beds-selector h5{
    font-size: 16px;
  }
  .single-rooom #guestSelector {
    display: none; /* Hidden by default */
    background-color: #ffffff;
    border: 1px solid #ddd;
    border-radius: 8px;
    width:100%;
    padding: 10px;
    box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2);
    position: relative; /* Positioned relative to the parent guest_btn */
    max-width: 300px;
    z-index: 10;
    top: -16px;
    left: 16px;
}
  .guests{
    padding: 5px 20px;
    font-weight: 600;
    border-radius: 30px;
    transition: transform 0.3s ease; /* Smooth transition */
  }
  .guests:hover{
    background-color: #002f4d;
    color: #ffffff;
    
  }
  .room-price-calculator{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 15px 0 15px 0;
  }
  .room-price-calculator h5{
    font-size: 16px;
  
  }
  
  .divider-line{
    height: 1px;
    background-color: #ddd;
    
  }
  .total-price{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 10px;
  }
  .total-price span{
    font-size: 24px;
    font-weight: 600;
  }
  
  /* =================================== */
  
  /*=======dropdown===== */
  
  .single-rooms-dropdown {
    display: none; /* Hidden by default */
    /* padding: 10px; */
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    width: 250px;
    margin-top: 10px;
    position: absolute;
    top: 125%;
    right: 8%;
    padding: 0px 20px 20px 20px;
    box-shadow: 5px 8px 13px #00000033;
  }
  
  .single-rooms-dropdown .input-group {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 10px 0;
    padding-top: 20px;
  }
  
  .single-rooms-dropdown input[type="text"] {
    width: 25px;
    text-align: center;
    border: none;
    font-size: 18px;
    background-color: #fff;
  }
  .single-rooms-dropdown .btn-small{
    border: none;
    background-color: transparent;
  }

  .single-rooms-dropdown .btn-small img{
    width: 20px;
    height: 20px;
  }
  
  .single-rooms-dropdown .guest1{
    padding: 1px 20px;
    margin-top: 15px;
    border-radius: 30px;
  }

  /* -------------------------------------------------------------- */

  /*------------------ section2 --------------*/

.single-about-rooms{
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
 }
 .single-about-rooms p{
   width: 70%;
 }
 .single-about-rooms ul{
   width: 70%;
 }
 .private-bathroom ul{
    list-style:none;
    padding: 0 10px;
 }
 .private-bathroom ul li img{
    width: auto;
    height: 20px;
    padding-right: 10px;
 }
 .Facilities ul{
   display: flex;
   flex-direction: column;
   gap: 30px;
   margin-top: 25px;
   list-style: none;
   padding: 0;
 }
 .Facilities ul li{
     white-space: nowrap;
 }
 .Facilities ul li img{
     padding-right: 20px;
     width: auto;
     height: 40px;
 }
/* --------------------- */
/* responsive single room */


/* desktop */
@media (min-width: 1540px){
    .single-guest-room {
        width: 50%;
    }
    .single-rooms-dropdown{
        top: 137%;
        right: 8%;
    }
    .room-sin-rst p {
        width: 95%;
    }
    .checkinn ul li {
        width: 95%;
    }
    .chechoutt ul li {
        width: 95%;
    }
    .single-about-rooms ul {
        width: 80%;
    }
    .single-about-rooms {
        margin: 30px 0 30px 0;
    }
}

/*-------- tab----------  */

@media only screen and (max-width: 992px){
    .room-photo-gallery{
        grid-template-columns: 1fr;
        margin-top: 30px;
        gap: 0;
    }
    .room-big-photo{
        height: 350px;
    }
    .room-thumbnail-container{
        grid-template-columns: 1fr 1fr 1fr 1fr;
    }
    .single-rooms-dropdown {
        top: 134%;
        right: 5%;
    }
    .room-sin-rst{
        flex-direction: column;
    }
    .room-sin-rst p {
        width: 100%;
    }
    .checkinn ul li {
        width: 100%;
    }
    .chechoutt ul li {
        width: 100%;
    }
    .single-rooms-dropdown {
        top: 223%;
        right: 51%;
    }
    .single-about-rooms {
        margin: 30px 0 30px 0;
    }
}

/*--------mobile-------- */

@media only screen and (max-width: 768px){
    .room-photo-gallery {
        height: 440px;
    }
    .room-thumbnail img{
        border-radius: 5px;
    }
    .room-rating img {
        width: 25%;
    }
    .single-res-guest span {
        font-size: 20px;
    }
    .single-guest-room {
        width: 100%;
    }
    .single-room-guest {
        padding: 10px;
    }
    .guests{
        padding: 2px 10px;
    }
    .single-rooom .calender {
        color: black;
    }
    .room-price-calculator {
        margin: 10px 0 10px 0;
    }
    .room-guest_btn{
        margin-bottom: 20px;
    }
    .room-guest_btn h2 {
        font-size: 24px;
    }
    .single-rooms-dropdown .guest1 {
        padding: 10px;
    }
    .single-res-button{
        margin-top: 10px;
    }
    .single-about-rooms{
        flex-direction: column;
    }
    .single-about-rooms ul {
        width: 100%;
    }
    .single-rooms-dropdown {
        top: 257%;
        right: 4%;
    }
    .Facilities ul{
        gap: 15px;
        margin-top: 15px;
    }
}

 /* ============================================= */


 /* ============================================= */
 /* ============================================= */
 /* ============================================= */


 /*================== about page ==================== */
 /* header */
 .nav-about a{
    font-weight: 500;
    display: inline-block;
    position: relative;
    text-decoration: none;
    color: black;
    font-size: 1rem;
}
.nav-about a::after {
    content: '';
    position: absolute;
    bottom: -3px; /* Adjust this value as needed */
    left: 0;
    width: 0%;
    height: 2px; /* Line thickness */
    background-color: #006e5e; /* Line color */
    transition: width 0.3s ease;
}
.nav-about a:hover {
    color: #006e5e;
}
.nav-about a:hover::after {
    width: 100%; /* Expand the line to full width on hover */
}

/* banner */

.about-banner{
    height: 30vh;
}
/* ===================================== */
 
/*---- section -----*/

.about-description{
    background-color: #333333;
    color: #ffffff;
    padding: 30px;
    border-radius: 20px;
    margin-bottom: 40px;   
}
.about-description h2{
    text-align: center;
}

/* ==================================== */

/* section2 */

.travel{
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 30px;
    margin: 30px 0 30px 0;
}
.travel-img{
    width: 450px;
    height: auto;
    border-radius: 15px;
}
.about-travel{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.about-travel h2{
    width: 40%;
    text-align: center;
    font-weight: 600;
}

/* ===================== */
/* ----section3 */

.counter-box{
    width: 30px;
    height: 150px;
    margin: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.counter-box span{
    font-size: 55px;
}

/*==============================  */
/* section4 */

.policy{
    margin: 30px 0 30px 0;
}

/* ------------------------------------------------------------------------ */

/* ======section5===== */

.host {
    
    object-fit: cover; background-position:18% 60%;
    background-repeat: no-repeat;
    height: 525px;
}
.host_content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    height: 60vh;
}
.host_content h2{
    font-size: 42px;
    font-weight: 600;
    color: #ffffff;
}
.host_content p{
    color: #ffffff;
    width: 50%;
}
.host_content span{
    font-size: 65px;
    font-weight: 700;
    color: white;
}
.host_content button{
    margin-top: 10px;
    padding: 7px 20px;
    border: 1px solid white;
    background-color: transparent;
    color: white;
    border-radius: 20px;
}

/* ================================================= */
/* --------responsive about page */
@media only screen and (max-width: 992px){
    .about-banner {
        height: 25vh;
    }
    .travel-img {
        width: 230px;
    }
    .about-travel h2 {
        width: 55%
    }
    .travel{
        margin: 15px 010px 0;
    }
    .counter-box span {
        font-size: 30px;
    }
    .counter-box h3{
        font-size: 20px;
    }
    .policy {
        margin: 00 0 30px 0;
    }
    .host {
        height: 375px;
    }
    .host_content h2 {
        font-size: 24px;
    }
    .host_content span {
        font-size: 40px;
    }
    .host_content{
        height: 52vh;
    }
    .host_content button {
        padding: 5px 14px;
    }
}

@media only screen and (max-width: 768px){
    .about-banner {
        height: 20vh;
    }
    .about-description {
        padding: 15px;
    }
    .about-travel h2 {
        width: 100%;
    }
    .travel {
        flex-direction: column;
    }
    .travel-img {
        width: 320px;
    }
    .host_content p{
        width: 100%;
    }
    .host_content h2 {
        font-size: 22px;
    }
    .host_content span {
        font-size: 35px;
    }
}

/* ====================================================== */
/* ====================================================== */
/* ====================================================== */

/* ======contact-page=========== */

/* header */

.nav-contact a{
    font-weight: 500;
    display: inline-block;
    position: relative;
    text-decoration: none;
    color: black;
    font-size: 1rem;
}
.nav-contact a::after {
    content: '';
    position: absolute;
    bottom: -3px; /* Adjust this value as needed */
    left: 0;
    width: 0%;
    height: 2px; /* Line thickness */
    background-color: #006e5e; /* Line color */
    transition: width 0.3s ease;
}
.nav-contact a:hover {
    color: #006e5e;
}
.nav-contact a:hover::after {
    width: 100%; /* Expand the line to full width on hover */
}


/*========= section1======= */

.contact-text{
    margin: 40px 0 30px 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;  
}
.contact-text p{
  width: 72%;
}
/* =========== */

/* ====================contact-form============== */

.contact-container {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    gap: 20px;
}

.form-section {
    background-color: #002F4D; /* Adjust the color as per your design */
    color: #fff;
    padding: 30px;
    border-radius: 10px;
    flex: 1;
    max-width: 600px;
}

.form-section h2 {
    margin: 0;
}

.form-section p {
    margin: 10px 0 20px;
}

.form-row {
    display: flex;
    gap: 20px;
}

.contact-form-group {
    flex: 1;
    display: flex;
    flex-direction: column;
    margin-bottom: 15px;
}

.contact-form-group label {
    margin-bottom: 5px;
    font-size: 14px;
}

.contact-form-group input,
.contact-form-group textarea {
    padding: 10px;
    border: none;
    border-radius: 5px;
    background-color: #e0e0e0;
    width: 100%;
    text-align: start;
    font-size: 16px;
}

textarea {
    resize: vertical;
}

.contact-button {
    padding: 5px 20px;
    border: none;
    border-radius: 15px;
    background-color: #fff;
    color: black;
    cursor: pointer;
    transition: background-color 0.3s;
}
.contact-button:hover{
    background-color: transparent;
    color: white;
    border: 1px solid white;
}


.info-section {
    /* flex: 1;
    max-width: 300px; */
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.map img {
    width: 100%;
    border-radius: 10px;
    margin-bottom: 20px;
}

.contact-info {
    background-color: #fff;
    padding: 20px;
    border-radius: 10px;
    color: #333;
}

.contact-info h3 {
    margin-top: 0;
}


/* -----responsive contact page */
@media only screen and (max-width: 768px){

    .contact-text p {
        width: 100%;
    }
    .contact-container {
        flex-direction: column;
        padding: 0px;
    }
    .form-section{
        padding: 12px;
    }
    .contact-info{
        padding: 10px;
    }
    .info-section{
        padding-bottom: 25px;
    }
}
/* ======================================= */

/* ========================================================= */
/* ========================================================= */
/* ========================================================= */

/* =============host page=============== */

/* header */

.nav-host a{
    font-weight: 500;
    display: inline-block;
    position: relative;
    text-decoration: none;
    color: black;
    font-size: 1rem;
}
.nav-host a::after {
    content: '';
    position: absolute;
    bottom: -3px; /* Adjust this value as needed */
    left: 0;
    width: 0%;
    height: 2px; /* Line thickness */
    background-color: #006e5e; /* Line color */
    transition: width 0.3s ease;
}
.nav-host a:hover {
    color: #006e5e;
}
.nav-host a:hover::after {
    width: 100%; /* Expand the line to full width on hover */
}

/*========= section1======= */

.host-text{
    margin: 40px 0 30px 0;
}
/* =========== */

/*========== section-form ======== */

.host-form{
    background-image: url(../images/formresort.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    height: 90vh;
    margin-bottom: 50px;
    border-radius: 10px;
    position: relative;
}

.form-container {
    background-color: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    position: absolute;
    top: 8px;
    left: 10px;
    max-width: 500px;
    width: 100%;
}

.form-group {
    margin-bottom: 15px;
}

.form-group label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
    color: #555;
}

.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="tel"] {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    font-size: 16px;
}

.form-group input[type="submit"] {
    width: 100%;
    padding: 10px;
    background-color: #007BFF;
    border: none;
    border-radius: 4px;
    color: #fff;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.form-group input[type="submit"]:hover {
    background-color: #0056b3;
}

.form-group input[type="text"]:focus,
.form-group input[type="email"]:focus,
.form-group input[type="tel"]:focus {
    border-color: #007BFF;
    outline: none;
}

/* ============================================================== */

/* ===================================================== */
/* ===================================================== */
/* ===================================================== */

/* ===============privacy-policy page======================= */

/* header */
.nav-privacypolicy a{
    font-weight: 500;
    display: inline-block;
    position: relative;
    text-decoration: none;
    color: black;
    font-size: 1rem;
}
.nav-privacypolicy a::after {
    content: '';
    position: absolute;
    bottom: -3px; /* Adjust this value as needed */
    left: 0;
    width: 0%;
    height: 2px; /* Line thickness */
    background-color: #006e5e; /* Line color */
    transition: width 0.3s ease;
}
.nav-privacypolicy a:hover {
    color: #006e5e;
}
.nav-privacypolicy a:hover::after {
    width: 100%; /* Expand the line to full width on hover */
}
/*================== section ===========*/
 
.privacy{
    margin: 50px 0 30px 0;
}

/* ======================================= */