/* ============================================
   MOBILE RESPONSIVENESS FIX FOR CASA NATURE HOMES
   ============================================ */

/* --- Base Display Rules --- */
.mobile_topbar {
    display: none;
}

/* --- Global Mobile Fixes --- */
@media screen and (max-width: 639px) {
    html { overflow-x: hidden; -webkit-text-size-adjust: 100%; }
    body { overflow-x: hidden; max-width: 100vw; }
    .container { max-width: 100% !important; padding-left: 10px !important; padding-right: 10px !important; }
    .grid-x { flex-wrap: wrap; }
    .cell { min-width: 0; flex-basis: auto; }
    .small-12,.small-6,.small-4,.small-3,.small-2,.medium-12,.medium-6,.medium-4,.medium-3,.medium-2,.large-12,.large-6,.large-4,.large-3,.large-2,.large-7,.large-5,.large-9,.large-8 { width: 100% !important; }
    .grid-padding-x { margin-left: -5px !important; margin-right: -5px !important; }
    .grid-padding-x > .cell { padding-left: 5px !important; padding-right: 5px !important; }
    section,.subsection { overflow-x: hidden; max-width: 100vw; }
    img { max-width: 100%; height: auto !important; }
    .fixed_register,.register_fixed_row { display: none !important; }
    .video_hero_holder { display: block !important; position: relative !important; height: 250px !important; overflow: hidden !important; margin-top: 60px !important; }
    #video_holder,#video_holder2 { position: relative !important; width: 100% !important; height: 250px !important; }
    #video_holder video,#video_holder2 video { position: absolute !important; top: 50% !important; left: 50% !important; min-width: 100vw !important; min-height: auto !important; width: 100% !important; height: auto !important; transform: translate(-50%,-50%) !important; object-fit: cover !important; }
    .desktop_home_wrap,.desktop_hero_logo_wrap,.desktop_strap_wrap,.desktop_hero_col { display: none !important; }
    .mobile_topbar { display: flex !important; position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; z-index: 9999 !important; height: 60px !important; padding: 0 15px !important; }
    .top_nav_wrap,.show-for-medium { display: none !important; }
    .hide-for-medium { display: block !important; }
    .mobile_logo { width: 120px !important; margin: 0 !important; opacity: 1 !important; }
    .mobile_nav_icon { width: 38px !important; height: 38px !important; }
    .mobile_nav_icon span { width: 22px !important; height: 2px !important; }
    #homepage .circle_row { display: none !important; }
    html,body,.container,.grid-x,.grid-y,section,.subsection,header,footer,.reveal,.overlay,.container { max-width: 100vw; overflow-x: hidden; }
}

/* --- Small Mobile (max-width: 480px) --- */
@media screen and (max-width: 480px) {
    h1 { font-size: 24px !important; }
    h2 { font-size: 28px !important; }
    .about-content-wrap h1 { font-size: 32px !important; }
    .welcome_text_wrap h2 { font-size: 28px !important; }
    .projects-header h2 { font-size: 28px !important; }
    .lifestyle-content h2 { font-size: 28px !important; }
    .why-title h2 { font-size: 28px !important; }
    .journey-content h2 { font-size: 28px !important; }
    .contact-card h2 { font-size: 28px !important; }
    .form-header h2 { font-size: 28px !important; }
    .amenities_header h2 { font-size: 28px !important; }
    .testimonialSwiper .swiper-slide { transform: scale(1) !important; opacity: 1 !important; filter: none !important; }
    .testimonial-card { padding: 20px !important; min-height: auto !important; }
    .footer_logo,.footer_qr { width: 100% !important; text-align: center !important; border-right: none !important; padding-bottom: 15px !important; border-bottom: 1px solid rgba(255,255,255,.2) !important; }
    .amenities_grid { grid-template-columns: 1fr !important; }
}

/* --- Tablet fixes (481px-1024px) --- */
@media screen and (min-width: 481px) and (max-width: 1024px) {
    .container { max-width: 95% !important; }
    .welcome_text_wrap h2 { font-size: 36px !important; }
    .projects-header h2 { font-size: 40px !important; }
    .lifestyle-content h2 { font-size: 40px !important; }
    .why-title h2 { font-size: 44px !important; }
    .journey-content h2 { font-size: 40px !important; }
    .video_hero_holder,.show-for-medium { display: none !important; }
}

/* --- Foundation grid fix --- */
@media screen and (max-width: 640px) {
    .grid-x { display: flex !important; flex-wrap: wrap !important; }
    .cell { flex: 0 0 100% !important; max-width: 100% !important; }
    .top_nav_wrap { display: none !important; }
    .mobile_topbar { display: flex !important; position: fixed !important; top: 0; left: 0; right: 0; z-index: 9999 !important; }
}

/* --- Header & Navigation --- */
@media screen and (max-width: 639px) {
    .top_nav_wrap { display: none !important; }
    .mobile_topbar { display: flex !important; position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; z-index: 9999 !important; height: 60px !important; padding: 0 15px !important; }
    .show-for-medium { display: none !important; }
    .hide-for-medium { display: block !important; }
    .desktop_home_wrap,.desktop_hero_logo_wrap,.desktop_strap_wrap { display: none !important; }
    .video_hero_holder { display: block !important; position: relative !important; height: 250px !important; overflow: hidden !important; margin-top: 60px !important; }
    #video_holder,#video_holder2 { position: relative !important; width: 100% !important; height: 250px !important; }
    #video_holder video,#video_holder2 video { position: absolute !important; top: 50% !important; left: 50% !important; min-width: 100vw !important; min-height: auto !important; width: 100% !important; height: auto !important; transform: translate(-50%,-50%) !important; object-fit: cover !important; }
    .fixed_register,.register_fixed_row { display: none !important; }
    #homepage .circle_row { display: none !important; }
    .grid-y { display: flex !important; flex-direction: column !important; }
    .desktop_hero_col { text-align: center !important; }
}

/* --- Font sizes --- */
@media screen and (max-width: 639px) {
    h1 { font-size: 28px !important; }
    h2 { font-size: 32px !important; }
    h3 { font-size: 24px !important; }
    h4 { font-size: 20px !important; }
    p { font-size: 16px !important; line-height: 1.6 !important; }
    section { padding-left: 15px !important; padding-right: 15px !important; }
    .welcome_text_wrap h2 { font-size: 32px !important; }
    .welcome_text_wrap p { font-size: 16px !important; }
    .icon_box { margin-bottom: 20px !important; }
    .icon_box i { font-size: 28px !important; }
    .icon_box span { font-size: 14px !important; }
    .welcome_row { padding: 40px 15px !important; }
    .our-projects-section { padding: 50px 15px !important; }
    .projects-header h2 { font-size: 36px !important; }
    .projects-header p { font-size: 16px !important; }
    .lifestyle-section { padding: 50px 15px !important; }
    .lifestyle-content { padding-right: 0 !important; margin-bottom: 30px !important; }
    .lifestyle-content h2 { font-size: 36px !important; }
    .lifestyleSwiper img { height: 250px !important; }
    .why-us-strip { padding: 40px 15px !important; }
    .why-title h2 { font-size: 36px !important; }
    .why-icons { grid-template-columns: repeat(2,1fr) !important; gap: 15px !important; }
    .why-box { padding: 20px 10px !important; }
    .why-box i { font-size: 36px !important; }
    .why-box span { font-size: 14px !important; }
    .testimonial-section { padding: 50px 15px !important; }
    .section-title { font-size: 28px !important; }
    .testimonial-card p { font-size: 14px !important; }
    .testimonial-card h4 { font-size: 18px !important; }
    .footer-container { grid-template-columns: 1fr !important; gap: 30px !important; padding: 30px 15px !important; }
    .footer-col h4 { font-size: 18px !important; }
    .footer-col p,.footer-col ul li a { font-size: 14px !important; }
    .footer-bottom { flex-direction: column !important; gap: 8px !important; text-align: center !important; }
    .footer-bottom,.footer_copyright,.footer_links { text-align: center !important; }
    .footer_bottom { flex-wrap: wrap !important; }
    .footer_logo { width: 50% !important; min-height: auto !important; }
    .footer_qr { width: 50% !important; min-height: auto !important; border-right: none !important; }
    .footer_links { width: 100% !important; border-right: none !important; border-top: 1px solid rgba(255,255,255,.2) !important; padding: 15px 10px !important; text-align: center !important; }
    .footer_copyright { width: 100% !important; border-top: 1px solid rgba(255,255,255,.2) !important; padding: 10px !important; text-align: center !important; font-size: 11px !important; }
    .journey-section { min-height: auto !important; padding: 40px 15px !important; }
    .journey-content h2 { font-size: 32px !important; }
    .journey-buttons { flex-direction: column !important; align-items: center !important; gap: 15px !important; }
    .journey-buttons a { width: 100% !important; max-width: 100% !important; font-size: 16px !important; padding: 15px !important; }
}

/* --- About page --- */
@media screen and (max-width: 639px) {
    .about-hero { min-height: auto !important; padding: 60px 15px !important; background-attachment: scroll !important; }
    .about-content-wrap h1 { font-size: 40px !important; }
    .about-content-wrap p { font-size: 18px !important; }
    .about-content-section { flex-direction: column !important; }
    .about-image,.about-content { width: 100% !important; }
    .about-content { padding: 30px 20px !important; }
    .about-content h2 { font-size: 32px !important; }
    .about-content p { font-size: 16px !important; }
}

/* --- Story section --- */
@media screen and (max-width: 639px) {
    .story-row { flex-direction: column !important; }
    .story-image,.story-content { width: 100% !important; }
    .story-content { padding: 30px 20px !important; }
    .story-content h2 { font-size: 32px !important; }
    .story-content p { font-size: 16px !important; }
}

/* --- Vision/Mission --- */
@media screen and (max-width: 639px) {
    .vm-container { flex-direction: column !important; }
    .vm-box { padding: 30px 20px !important; text-align: center !important; }
    .vm-box:first-child { border-right: none !important; border-bottom: 1px solid rgba(255,255,255,.2) !important; }
    .vm-title { font-size: 36px !important; }
    .vm-text { font-size: 16px !important; }
}

/* --- Philosophy --- */
@media screen and (max-width: 639px) {
    .philosophy { flex-direction: column !important; }
    .philosophy-left,.philosophy-right { width: 100% !important; }
    .philosophy-left { padding: 30px 20px !important; }
    .philosophy-right { height: auto !important; min-height: 250px !important; }
    .heading { font-size: 40px !important; }
    .subheading { font-size: 20px !important; margin-bottom: 30px !important; }
    .pillars { flex-direction: column !important; gap: 25px !important; }
    .pillar { padding: 0 !important; border: none !important; text-align: center !important; }
    .title { font-size: 28px !important; }
    .desc { font-size: 16px !important; }
}

/* --- Luxury --- */
@media screen and (max-width: 639px) {
    .luxury-section { grid-template-columns: 1fr !important; }
    .luxury-content { padding: 40px 25px !important; }
    .luxury-title { font-size: 36px !important; }
    .luxury-text { font-size: 16px !important; }
    .luxury-image { height: auto !important; min-height: 250px !important; }
}

/* --- Sustainability --- */
@media screen and (max-width: 639px) {
    .sustainability { padding: 30px 15px !important; }
    .sustainability-grid { grid-template-columns: 1fr !important; gap: 25px !important; }
    .sustainability-title { font-size: 28px !important; }
}

/* --- Projects --- */
@media screen and (max-width: 639px) {
    .projects-section { padding: 50px 15px !important; }
    .projects-grid { grid-template-columns: 1fr !important; gap: 20px !important; }
    .projects-title h2 { font-size: 32px !important; }
    .project-card img { height: auto !important; min-height: 200px !important; }
    .project-card h3 { font-size: 28px !important; }
    .projects-header { flex-direction: column !important; gap: 15px !important; }
    .project-filters { flex-wrap: wrap !important; gap: 10px !important; }
}

/* --- Masterpieces --- */
@media screen and (max-width: 639px) {
    .living_masterpieces { padding: 40px 15px !important; }
    .living_masterpieces .masterpieces_header h2 { font-size: 36px !important; }
    .masterpiece_card { flex-direction: column !important; min-height: auto !important; }
    .masterpiece_content { width: 100% !important; padding: 30px 20px !important; }
    .masterpiece_image { width: 100% !important; min-height: 250px !important; }
    .masterpiece_image img { min-height: 250px !important; }
    .masterpiece_features { grid-template-columns: 1fr !important; gap: 12px !important; }
}

/* --- CDF --- */
@media screen and (max-width: 639px) {
    .cdf_card { flex-direction: column !important; min-height: auto !important; border-radius: 12px !important; overflow: hidden !important; }
    .cdf_image { width: 100% !important; min-height: 250px !important; }
    .cdf_image img { width: 100% !important; height: 250px !important; min-height: 250px !important; }
    .cdf_content { width: 100% !important; padding: 30px 20px !important; }
    .cdf_features { grid-template-columns: 1fr !important; gap: 12px !important; }
}

/* --- Amenities --- */
@media screen and (max-width: 639px) {
    .amenities_grid { grid-template-columns: repeat(2,1fr) !important; gap: 15px !important; }
    .amenities_header h2 { font-size: 32px !important; }
}
@media screen and (max-width: 600px) {
    .amenities_grid { grid-template-columns: 1fr !important; gap: 20px !important; }
    .amenities_section { padding: 40px 15px !important; }
}

/* --- Contact --- */
@media screen and (max-width: 639px) {
    .contact-section { padding: 50px 15px !important; }
    .contact-wrapper { grid-template-columns: 1fr !important; gap: 20px !important; }
    .contact-card { padding: 25px !important; }
    .contact-card h2 { font-size: 32px !important; }
    .form-header h2 { font-size: 32px !important; }
    .form-header p { font-size: 16px !important; }
    .row { grid-template-columns: 1fr !important; gap: 12px !important; }
    input,textarea { font-size: 16px !important; padding: 12px !important; }
    .submit-btn { font-size: 28px !important; }
    .submit-btn span { width: 55px !important; height: 55px !important; font-size: 20px !important; }
    .info-box { flex-direction: column !important; gap: 12px !important; padding: 18px !important; }
    .info-icon { width: 50px !important; height: 50px !important; font-size: 22px !important; }
}

/* --- Overlay menu --- */
@media screen and (max-width: 639px) {
    .overlay { z-index: 9999 !important; }
    .overlay nav { top: 55% !important; transform: translateY(-50%) !important; }
    .overlay ul li { height: 8% !important; min-height: 45px !important; }
    .overlay ul li a { font-size: 1.4em !important; }
}

/* --- Modal --- */
@media screen and (max-width: 639px) {
    .reveal { max-width: 95vw !important; width: calc(100% - 30px) !important; margin-left: auto !important; margin-right: auto !important; position: fixed !important; top: 50% !important; left: 50% !important; transform: translate(-50%,-50%) !important; }
    #Form_Modal { padding: 15px !important; margin: 0 !important; border-radius: 0 !important; }
    .register_text_col h4 { font-size: 28px !important; }
}

/* --- Video hero --- */
@media screen and (max-width: 639px) {
    .video_hero_holder { display: block !important; position: relative !important; height: 250px !important; overflow: hidden !important; margin-top: 60px !important; }
    #video_holder,#video_holder2 { position: relative !important; width: 100% !important; height: 250px !important; }
    #video_holder video,#video_holder2 video { position: absolute !important; top: 50% !important; left: 50% !important; min-width: 100vw !important; min-height: auto !important; width: 100% !important; height: auto !important; transform: translate(-50%,-50%) !important; object-fit: cover !important; }
}

/* --- General --- */
@media screen and (max-width: 639px) {
    .pimg { height: auto !important; object-fit: cover !important; }
    .fade_gallery,.fade_gallery img { height: auto !important; }
    .slick-slider { overflow: hidden; }
    .vegas-slider { height: 300px !important; }
    .image-map-pro { display: none !important; }
    .flex-container { flex-wrap: wrap !important; justify-content: center !important; }
    .flex-child-shrink { flex: 0 0 auto !important; margin-bottom: 5px; }
    .feature-icons { justify-content: center !important; gap: 20px !important; }
    .feature { width: auto !important; flex: 0 0 auto !important; }
    .feature span { font-size: 14px !important; }
    .testimonialSwiper { padding: 40px 15px 60px !important; }
    .testimonialSwiper .swiper-slide { transform: scale(1) !important; opacity: 1 !important; filter: none !important; }
    .testimonialSwiper .swiper-slide-active { transform: scale(1) !important; }
    .testimonial-card { padding: 20px !important; min-height: auto !important; }
    .why-box { border-right: none !important; border-bottom: 1px solid rgba(255,255,255,.15) !important; margin-bottom: 10px; }
    .why-box:last-child { border-bottom: none !important; }
    .grid-y { display: flex !important; flex-direction: column !important; }
    .desktop_hero_col { text-align: center !important; }
    .down_arrow { max-width: 30px !important; }
    #design,#gallery { padding-top: 80px !important; }
    .homepage_logo,.preload_logo { max-width: 80% !important; margin-bottom: 60px !important; }
    .smooth-scroll { scroll-behavior: smooth; }
    section[id] { scroll-margin-top: 70px; }
    a,button,input[type="submit"] { min-height: 44px; min-width: 44px; }
    .project-card:hover { transform: none !important; }
    * { -webkit-tap-highlight-color: transparent; box-sizing: border-box; }
    html,body { overflow-x: hidden; max-width: 100vw; }
    .container,.grid-x,.grid-y,section,.subsection,header,footer,.reveal,.overlay { max-width: 100vw; overflow-x: hidden; }
    .video_hero_holder.show-for-medium { display: none !important; }
    .video_hero_holder.show-for-small { display: block !important; }
}

/* --- Foundation Reveal Modal Fix --- */
@media screen and (max-width: 639px) {
    .reveal {
        max-width: 95vw !important;
        width: calc(100% - 30px) !important;
        margin-left: auto !important;
        margin-right: auto !important;
        position: fixed !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
    }
    .is-reveal-open { overflow-y: hidden !important; }
    .is-reveal-open .top_nav_wrap { opacity: 0 !important; }
    .is-reveal-open .mobile_topbar { z-index: 9999 !important; }
}

/* --- Smooth Scroll Offset Fix --- */
@media screen and (max-width: 639px) {
    section[id] { scroll-margin-top: 70px; }
    .smooth-scroll { scroll-behavior: smooth; }
}

/* --- Video Hero Fix for index.php --- */
@media screen and (max-width: 639px) {
    .video_hero_holder.show-for-medium { display: none !important; }
    .video_hero_holder.show-for-small { display: block !important; }
    #video_holder { position: relative !important; width: 100% !important; height: 250px !important; overflow: hidden !important; }
    #video_holder video { position: absolute !important; top: 50% !important; left: 50% !important; min-width: 100vw !important; min-height: auto !important; width: 100% !important; height: auto !important; transform: translate(-50%,-50%) !important; object-fit: cover !important; }
}

/* --- Mobile Topbar Display Fix --- */
@media screen and (max-width: 639px) {
    .mobile_topbar {
        display: flex !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 9999 !important;
        height: 60px !important;
        background: #ffffff !important;
        padding: 0 15px !important;
        align-items: center !important;
        justify-content: space-between !important;
    }
    .show-for-medium { display: none !important; }
    .hide-for-medium { display: block !important; }
    .top_nav_wrap { display: none !important; }
}

/* --- Overlay Menu Display Fix --- */
@media screen and (max-width: 639px) {
    .overlay {
        display: block !important;
        visibility: visible !important;
        opacity: 0;
        z-index: 9999 !important;
    }
    .overlay.open {
        opacity: 1;
        visibility: visible;
    }
    .overlay-hugeinc {
        display: block !important;
        visibility: visible !important;
        opacity: 0;
    }
    .overlay-hugeinc.open {
        opacity: 1;
        visibility: visible;
    }
    .overlay nav {
        display: block !important;
        visibility: visible !important;
    }
    .overlay ul li {
        display: block !important;
        visibility: visible !important;
    }
    /* Ensure mobile_topbar is visible on small screens */
    .mobile_topbar {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    .mobile-logo-link {
        display: flex !important;
    }
    .mobile_logo {
        display: block !important;
        opacity: 1 !important;
    }
}