/*--------------------- Responsive (Start) ---------------------*/
@media (max-width: 1440px){

    html{
        font-size: 75%;
    }
   
    .header .navbar{   
        display: none; 
    }
 
    .header #menu-btn{  
        display: initial; 
    }

    .header .icon-container .btn{
        display: none;
    }

    .mobile-menu { 
        display: block;
        position: absolute;
        top: 100%;
        right: 0;
        left: 0;
        z-index: 10000;
        max-height: 80vh;
        overflow-y: auto; 
        background: var(--black);
        -webkit-transition: all 0.5s ease-in-out;
        -moz-transition: all 0.5s ease-in-out;
        -o-transition: all 0.5s ease-in-out;
        transition: all 0.5s ease-in-out;
        -webkit-box-shadow: var(--box-shadow);
                box-shadow: var(--box-shadow);
        border-top: 0.2rem solid var(--main-color);
        border-bottom: 0.2rem solid var(--main-color);
        padding: 2rem;
        -webkit-clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
                clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
    } 
    
    .mobile-menu.active {
        -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
                clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    }

    .mobile-navbar{
        display: -webkit-box; 
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        gap: 1rem;
    }

    .mobile-navbar .nav-link{
        background: var(--main-color);
        overflow: hidden;
    }

    .mobile-navbar .main-nav-link{
        color: var(--white);
        font-size: 2rem;
        font-weight: bold;
        cursor: pointer; 
        width: 100%;
        padding: 1.5rem;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify; 
        justify-content: space-between; 
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
    }

    .mobile-navbar .main-nav-link a{
        color: var(--white);
    }
    
    .mobile-navbar .sub-nav-link {
        background-color: var(--white);
        padding: 1rem 0;
        padding-left: 4rem;
        display: none;
        -webkit-transition: all 0s;
        -moz-transition: all 0s;
        -o-transition: all 0s;
        transition: all 0s;
    }
    
    .mobile-navbar .sub-nav-link a{
        color: var(--grey);
        border-bottom: 0.1rem solid rgba(0,0,0,0.2);
        display: block;
        padding: 1rem 0rem;
        font-size: 1.8rem;
        font-weight: 500;
    }
    
    .mobile-navbar .sub-nav-link a:hover{
        color: var(--main-color);
    }
    
    .mobile-menu::-webkit-scrollbar{
        width: 0.8rem; 
    }
    
    .mobile-menu::-webkit-scrollbar-thumb{
        border-radius: 1rem;
        background-color: var(--main-color);
    }
    
    .mobile-menu::-webkit-scrollbar-track{
        background: transparent;
    }

    .header .header-1 {
        -webkit-box-pack: end;
            -ms-flex-pack: end;
            justify-content: flex-end;
    }

    .header .header-contacts .mbl {
        display: none;
    }

    .home-slider .swiper-button-next,
    .home-slider .swiper-button-prev {
        display: none;
    }

    .blog.grid, .blog.list{
        -ms-flex-wrap: wrap-reverse;
            flex-wrap: wrap-reverse;
    }

    .shop{
        -ms-flex-wrap: wrap-reverse;
            flex-wrap: wrap-reverse;
    }
    
    .footer .box-container{
        -ms-grid-columns: (minmax(33rem, 1fr))[auto-fit];
        grid-template-columns: repeat(auto-fit, minmax(33rem, 1fr));
    }

    .features .box-container{
        -ms-grid-columns: (minmax(28rem, 1fr))[auto-fit];
        grid-template-columns: repeat(auto-fit, minmax(28rem, 1fr));
    }

    .team .box-container{
        -ms-grid-columns: (minmax(28rem, 1fr))[auto-fit];
            grid-template-columns: repeat(auto-fit, minmax(28rem, 1fr));
    }

    .categories .box-container {
        -ms-grid-columns: (minmax(28rem, 1fr))[auto-fit];
        grid-template-columns: repeat(auto-fit, minmax(28rem, 1fr));
    }

    .process .box-container {
        -ms-grid-columns: (minmax(28rem, 1fr))[auto-fit];
        grid-template-columns: repeat(auto-fit, minmax(28rem, 1fr));
    }

    .page-single{
        gap: 3rem;
    }

    .shop,
    .blog.grid,
    .blog.list{
        gap: 3rem;
    }

    .custom-form .content {
        max-width: none;
    }

    .whyUs .box-container {
        gap: 2.5rem;
    }

    .whyUs .image {
        display: none;
    }

    .whyUs .box.last .whyUs-point {
        -webkit-box-orient: horizontal;
            -webkit-box-direction: normal;
            -ms-flex-direction: row;
            flex-direction: row;
            text-align: left;
    }

    .whyUs .box.first .whyUs-point:nth-child(odd),
    .whyUs .box.last .whyUs-point:nth-child(even) {
        margin-left: 0;
    }

    .whyUs .box.last .whyUs-point:nth-child(odd),
    .whyUs .box.first .whyUs-point:nth-child(even) {
        margin-right: 0;
    }

    .destinations .box-container {
        -ms-grid-columns: 1fr 1fr 1fr;
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-areas:
            'destination-1 destination-2 destination-3'
            'destination-4 destination-5 destination-6'
            'destination-7 destination-8 destination-9';
    }

    .gallery .box-container {
        grid-template-areas:
            'gallery-1 gallery-2 gallery-3 gallery-4'
            'gallery-5 gallery-6 gallery-7 gallery-7'
            'gallery-8 gallery-9 gallery-9 gallery-10';
    }

    .gallery-item {
        height: 20rem !important;
    }

}

@media (min-width: 769px){
   .logogrokmob {
		 display: none;
		 }
}


@media (max-width: 768px){
   .logogrokdesc {
		 display: none;
		 }

    section{
        padding: 3rem 2rem;
    }

    .contact {
        padding: 2rem;
    }

    .header .header-1{
        padding-left: 2rem;
    }

    .header .header-2{
        padding: 0rem 2rem;
    }

    .header .social-contacts{
        width: 30%;
        padding: 0.5rem 2rem;
    }

    .footer .box-container{
        padding: 2rem;
    }

    .search-container{
        right: 1rem;
    }

    .home-item{
        height: 70rem;
    }

    .home-item .content{ 
        padding: 10rem 2rem;
    }

    .portfolio-item{
        width: 50%;
    }

    .team-item {
        height: 45rem;
    }

    .gallery .box-container{
        -ms-grid-columns: 1fr 1fr;
        grid-template-columns: 1fr 1fr;
        gap: 1.5rem;
        grid-template-areas: 
        'gallery-1 gallery-2'
        'gallery-3 gallery-4'
        'gallery-5 gallery-6'
        'gallery-7 gallery-8'
        'gallery-9 gallery-10';
    }

    .gallery-item {
        height: 30rem !important;
    }

    .whyUs .box-container,
    .offer .box-container {
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    }

    .destinations .box-container {
        -ms-grid-columns: 1fr 1fr;
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            'destination-1 destination-2'
            'destination-3 destination-3'
            'destination-4 destination-5'
            'destination-6 destination-6'
            'destination-7 destination-8'
            'destination-9 destination-9';
    }

    .home-booking.Main {
        padding: 3rem;
        margin: 12rem 2rem 0rem 2rem;
				
    }

}

@media (max-width: 450px){
    
    html{
      font-size: 50%;
    }

    section{
        padding: 3rem 1rem;
    }

    .contact {
        padding: 2rem 1rem;
    }

    .career .career-intro,
    .career-positions,
    .career-benefits{
        padding: 3rem 1rem;
    }

    .header .header-1{
        padding-left: 1rem;
    }

    .header .header-2{
        padding: 0rem 1rem;
    }

    .header .social-contacts{
        width: 50%;
        padding: 0.5rem 1rem;
    }

    .footer .box-container{
        padding: 2rem 1rem;
    }

    .home-item{
        height: 100vh;
    }

    .features{
        padding-bottom: 1rem;
    }

    .form .input-box,
    .dark-form .input-box{
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
    }

    .dark-form .input-box .input-field,
    .dark-form .select{
        -webkit-box-flex: 1;
            -ms-flex: 1 1 25rem;
                flex: 1 1 25rem;
    }

    .team-single .image{
        width: 100%;
    }

    .team-item .team-image{
        height: 40rem;
    }

    .gallery .box-container{
        -ms-grid-columns: 1fr;
            grid-template-columns: 1fr;
        grid-template-areas: 
        'gallery-1'
        'gallery-2'
        'gallery-3'
        'gallery-4'
        'gallery-5'
        'gallery-6'
        'gallery-7'
        'gallery-8'
        'gallery-9'
        'gallery-10';
    }

    .account-form{
        max-width: 100%;
    }

    .portfolio-item{
        width: 100%;
    }

    .shop .product-container.list .product-item {
        gap: 0rem;
    }

    .shop .product-container.list .product-item .image {
        width: 30rem;
    }

    .shop .product-container.list .product-item .content {
        padding: 1rem;
        width: 100%;
    }

    .shop .product-container.list .product-item .content p {
        line-height: 1.5;
    }

    .product-info .leave-reply{
        width: 100%;
    }

    .cart .cart-summary{
        width: 100%; 
    }
    
    .custom-form .content{
        padding: 4rem 5%;
    }

}

/*--------------------- Responsive (End) ---------------------*//* Hotel Search Responsive Overrides */

@media (max-width: 1200px) {

    /* Ensure sidebar stacks on top */
    .hotel-search-wrapper {
        flex-direction: column;
    }

    .search-sidebar {
        width: 100%;
        order: -1;
        margin-bottom: 30px;
    }
}

@media (max-width: 991px) {

    /* Switch to 1 column for results on tablets and mobile */
    #hotelResults {
        grid-template-columns: 1fr;
    }

    /* Ensure card remains vertical */
    .hotel-card {
        flex-direction: column;
    }

    /* Center the image wrapper if needed */
    .hotel-card-image-wrapper {
        justify-content: center;
    }
}

@media (max-width: 576px) {
    .hotel-card-image {
        /* On very small screens, 287px might be too wide if there's padding.
           But 287px is usually safe for 320px+ screens. */
        max-width: 100%;
        height: auto;
    }
}
/* Hotel Info Carousel Responsive */

@media (max-width: 768px) {
    .carousel-nav-btn {
        width: 40px;
        height: 40px;
        font-size: 16px;
    }

    .carousel-prev {
        left: 5px;
    }

    .carousel-next {
        right: 5px;
    }

    .carousel-track {
        padding: 0 10px;
        gap: 15px;
    }

    .carousel-image-wrapper {
        width: 287px;
        height: 192px;
    }

    .modal-close {
        top: 15px;
        right: 20px;
        font-size: 40px;
    }

    .modal-content {
        max-width: 95%;
        max-height: 85%;
    }
}

@media (max-width: 480px) {
    .carousel-track-wrapper {
        padding: 10px 0;
    }

    .carousel-nav-btn {
        width: 35px;
        height: 35px;
        font-size: 14px;
    }

    .zoom-icon {
        width: 40px;
        height: 40px;
        font-size: 16px;
    }
}

/* Hotel Info Responsive */

@media (max-width: 992px) {
    .hotel-main-title {
        font-size: 28px;
    }
}

@media (max-width: 768px) {
    .hotel-details-container {
        padding: 20px 0;
    }
    
    .hotel-hero {
        padding: 20px;
        border-radius: 12px;
    }
    
    .hotel-main-title {
        font-size: 24px;
    }
    
    .hotel-subtitle {
        font-size: 16px;
    }
    
    .hotel-meta-badges {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .hotel-info-section {
        padding: 20px;
        border-radius: 12px;
    }
    
    .section-title {
        font-size: 22px;
    }
    
    .amenities-grid {
        grid-template-columns: 1fr;
    }
    
    .reviews-breakdown-grid {
        grid-template-columns: 1fr;
    }
    
    .nearby-places {
        grid-template-columns: 1fr;
    }
    
    /* Mobile table styles */
    .pricing-table-wrapper {
        border-radius: 0;
    }
    
    .pricing-table thead {
        display: none;
    }
    
    .pricing-table tbody tr {
        display: block;
        margin-bottom: 20px;
        border-radius: 12px;
        border: 2px solid #e8ecf4;
        padding: 20px;
        box-shadow: 0 4px 12px rgba(0,0,0,0.06);
    }
    
    .pricing-table tbody td {
        display: block;
        text-align: left !important;
        padding: 12px 0 !important;
        border: none !important;
    }
    
    .pricing-table tbody td::before {
        content: attr(data-label);
        font-weight: 700;
        display: block;
        margin-bottom: 6px;
        color: #335bfd;
        font-size: 12px;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }
    
    .book-btn-table {
        width: 100%;
        padding: 14px;
        font-size: 16px;
    }
}