/* =====================================================================
   RESPONSIVE.CSS — Nooke Homes
   Loaded LAST (after all page CSS) so these rules can safely override.
   Breakpoints used across the whole site:
     1440px  -> large desktop / big monitors
     1200px  -> small desktop / laptop
     1024px  -> tablet landscape
      900px  -> tablet portrait  (matches existing JS breakpoint for reviews)
      768px  -> large mobile / small tablet
      600px  -> mobile          (matches existing JS breakpoint for reviews)
      480px  -> small mobile
      380px  -> very small mobile
   Nothing below changes colors, fonts, shadows or animation logic —
   only sizes, spacing and layout direction, so the design stays visually
   identical, just scaled to fit the viewport.
   ===================================================================== */


/* =========================================================
   0. GLOBAL / SAFETY NET
   ========================================================= */
html, body {
    max-width: 100%;
    overflow-x: hidden;
}

img { max-width: 100%; }

@media (max-width: 1024px) {
    .hero-content h1,
    .about-content h1,
    .contact-left h1,
    .review-content h1,
    .projects-wrapper h1,
    .gallery-content h1,
    .why-text h2,
    .why-bottom-cta h3 {
        word-break: break-word;
    }
}


/* =========================================================
   1. HEADER / LOGO / NAV
   ========================================================= */
@media (max-width: 1200px) {
    .logo{ left:40px; }
    .logo img{ width:120px; }
}

@media (max-width: 1024px) {
    .logo{ left:30px; top:-14px; }
    .logo img{ width:105px; }

    .menu-wrap{ padding:6px; }
    .tab{ min-width:64px; height:38px; padding:0 14px; font-size:13px; }
    .liquid-pill{ height:38px; top:6px; }
}

@media (max-width: 768px) {
    .desktop-text{display:none;}
    .mobile-text{
        display:block;
        max-width:320px;
        margin:0 auto;
        text-align:center;
        line-height:1.7;
    }
    .main-header{ padding:20px 0 0; }

    .logo{ left:18px; top:-10px; }
    .logo img{ width:90px; }

    .menu-wrap{ padding:4px; }
    .tab{ min-width:48px; height:32px; padding:0 8px; font-size:11px; }
    .liquid-pill{ height:32px; top:4px; left:4px; }
}

@media (max-width: 480px) {
    .logo{ left:12px; top:-6px; }
    .logo img{ width:70px; }

    .tab{ min-width:40px; height:30px; padding:0 7px; font-size:10px; }
    .liquid-pill{ height:30px; }
}

@media (max-width: 380px) {
    .logo img{ width:58px; }
    .tab{ min-width:38px; padding:0 6px; font-size:10px; }
}

/* Loader logo mirrors the main logo positioning */
@media (max-width: 1024px) {
    #loaderHeaderLogo{ left:143px; }
    #loaderHeaderLogo img{ width:105px; }
}
@media (max-width: 768px) {
    #loaderHeaderLogo{ left:80px; }
    #loaderHeaderLogo img{ width:90px; }
}
@media (max-width: 480px) {
    #loaderHeaderLogo{ left:50px; }
    #loaderHeaderLogo img{ width:70px; }
}


/* =========================================================
   2. HERO SECTION
   ========================================================= */
@media (max-width: 1200px) {
    .hero-content{ left:60px; top:120px; }
    .hero-content h1{ font-size:46px; }
}

@media (max-width: 1024px) {
    .hero-content{ left:40px; top:110px; right:40px; }
    .hero-content h1{ font-size:40px; }
    .hero-content p{ max-width:380px !important; font-size:18px !important; }
}

@media (max-width: 768px) {
    .hero{ height:100vh; }
    .hero-content{ left:24px; right:24px; top:140px; }
    .hero-content h1{ font-size:38px; top:20px; }
    .hero-content .line{ width:150px; margin:24px 0; top:10px; }
    .hero-content p{ max-width:320px !important; font-size:18px !important; top:6px; }
    .hero-content button{ padding:13px 28px; font-size:15px; margin-top:26px; }
}

@media (max-width: 480px) {
    .hero-content{ left:18px; right:18px; top:130px; }
    .hero-content h1{ font-size:29px; line-height:1.25; top:10px; }
    .hero-content .line{ width:120px; margin:18px 0; }
    .hero-content p{ max-width:270px !important; font-size:15.5px !important; }
    .hero-content button{ padding:11px 24px; font-size:13px; margin-top:20px; }
}

@media (max-width: 380px) {
    .hero-content h1{ font-size:22px; }
    .hero-content p{ max-width:230px !important; }
}


/* =========================================================
   3. ABOUT SECTION
   ========================================================= */
@media (max-width: 1200px) {
    .about-left{ padding:40px 60px; }
    .about-content{ margin-top:90px; }
    .about-content .tag{ font-size:30px; }
    .about-content h1{ font-size:46px; }
    .stats-box{ max-width:100%; }
}

@media (max-width: 1024px) {
    .about-content .tag{ font-size:26px; top:10px; }
    .about-content h1{ font-size:38px; top:30px; }
    .about-content p{ font-size:15.5px; max-width:100%; }
    .stats-box{ padding:24px 20px; gap:16px; }
    .stat-item h2{ font-size:24px; }
    .stat-item p{ font-size:13px; }
    .stat-icon{ width:46px; height:46px; margin-bottom:16px; }
}

@media (max-width:900px){

    .about-page{
        display:flex;
        flex-direction:column;
        min-height:100vh;
        background:#3a2417; /* About background */
        overflow:hidden;
    }

    .about-left{
        width:100%;
        min-height:100vh;
        display:flex;
        align-items:flex-start;
        justify-content:center;
        padding:40px 24px 30px;
        background:#3a2417;
    }

    .about-right{
        display:none;
    }

    .about-content{
        width:100%;
        margin:0;
         margin-top:40px;  
    }

}
@media (max-width:768px){

    .about-page{
        min-height:100vh;
        height:100vh;
        padding:100px 0 50px;
    }

    .about-left{
        padding:0 24px;
    }

    .about-content{
        margin-top:70px;
    }

    .stats-box{
        margin-top:35px;
    }

}

@media (max-width:480px){

      .about-left{
        padding:30px 16px 25px;
    }

    .about-content{
        margin-top:30px;
    }
    .about-content h1{
        font-size:26px;
    }

    .about-content p{
        margin-top:20px;
    }

    .stats-box{
        margin-top:30px;
    }

}


/* =========================================================
   4. WHY CHOOSE US (why.css already has a full ≤900 override —
      we add a laptop/tablet-landscape tier above that, and refine
      the very-small-mobile tier below it)
   ========================================================= */
@media (max-width: 1200px) {
    .why-page{ padding:0 50px 120px; }
    .why-text h2{ font-size:46px; }
    .why-text p{ font-size:18px; }
    .why-image{ width:520px; height:300px; }
    .number{ font-size:76px; }
}

@media (max-width: 1024px) {
    .why-page{ padding:0 30px 110px; }
    .why-heading{ width:calc(100% + 60px); margin-left:-30px; margin-right:-30px; }
    .why-text h2{ font-size:38px; }
    .why-text p{ font-size:16.5px; }
    .why-image{ width:440px; height:270px; }
    .number{ font-size:64px; }
    .why-bottom-cta h3{ font-size:32px; }
}

@media (max-width:900px){

    .why-item,
    .why-item.reverse{
    height:auto !important;
    min-height:auto !important;
    justify-content:flex-start !important;
    align-items:flex-start !important;
    display:flex;
    flex-direction:column;
}

    .why-text,
    .why-item.reverse .why-text{
        width:100%;
        position:static !important;
        transform:none !important;
        order:1;
        text-align:left;
    }

    .why-image,
    .why-item.reverse .why-image{
        width:100%;
        max-width:320px;
        margin-inline:auto;
        transform:none !important;
        margin-top:0 !important;
        order:2;
    }

    .number{
        position:static !important;
        display:block;
        margin-bottom:10px;
    }
   

    .why-text h2{
        margin:8px 0 8px;
    }

   .why-text p{
    margin:0 0 4px !important;
    line-height:1.7;
}

}

@media (max-width: 480px) {
    .why-heading span{ letter-spacing:4px; font-size:16px; }
    .why-text h2{ font-size:26px !important; }
    .number{ font-size:44px !important; }
    .why-text p{ font-size:15px !important; max-width:300px !important; }
    .why-image{ max-width:320px !important; height:210px !important; }
    .why-bottom-cta h3{ font-size:24px !important; }
    .why-btn{ padding:14px 30px; font-size:16px; }
}


/* =========================================================
   5. SERVICES / PROJECTS SLIDER
   ========================================================= */
@media (max-width: 1200px) {
    .projects-wrapper{ padding-top:130px; padding-left:60px; padding-right:60px; }
    .projects-wrapper h1{ font-size:56px; }
}

@media (max-width: 1024px) {
    .projects-wrapper{ padding-top:110px; padding-left:40px; padding-right:40px; padding-bottom:60px; }
    .projects-wrapper h1{ font-size:46px; }
    .projects-wrapper p{ font-size:14px; }
    .project-card{ width:240px; height:360px; }
    .project-overlay h3{ font-size:24px; }
}

@media (max-width: 900px) {
    .projects-wrapper{ padding-bottom:36px; }
    .projects-slider{ padding:40px 0; }
}

@media (max-width:768px){

    .projects-wrapper{
        padding:100px 20px 40px;
        display:flex;
        flex-direction:column;
        align-items:center;
        justify-content:center;
        text-align:center;
    }

    .projects-wrapper h1{
        font-size:36px;
        width:100%;
        text-align:center;
    }

    .projects-wrapper .line{
        margin:18px auto;
        width:90px;
    }

    .projects-wrapper p{
        width:100%;
        max-width:320px;
        margin:0 auto 35px;
        text-align:center;
        line-height:1.6;
        font-size:14px;
    }

    .projects-slider{
        width:100%;
        display:flex;
        justify-content:center;
        align-items:center;
        overflow:hidden;
    }

    .project-card{
        width:200px;
        height:300px;
    }

}
@media (max-width:480px){

    .projects-wrapper{
        padding:90px 16px 35px;
    }

    .projects-wrapper h1{
        font-size:28px;
    }

    .projects-wrapper p{
        max-width:290px;
        font-size:13px;
    }

    .project-card{
        width:170px;
        height:255px;
        border-radius:18px;
    }

    .projects-slider{
        justify-content:center;
    }

}


/* =========================================================
   6. GALLERY (COVERFLOW CAROUSEL)
   ========================================================= */
@media (max-width: 1200px) {
    .gallery-page{ padding:110px 50px 90px; }
    .gallery-carousel{ height:640px; }
    .gallery-card{ width:380px; height:540px; }
    .gallery-info{
    position:relative;
    margin-top:30px;
    text-align:center;
}

#galleryName{
    font-size:28px;
    margin-bottom:4px;
}

#galleryLocation{
    font-size:18px;
    opacity:.7;
}
}

@media (max-width: 1024px) {
    .gallery-page{ padding:100px 30px 80px; }
    .gallery-content h1{ font-size:34px; }
    .gallery-carousel{ height:560px; }
    .gallery-card{ width:320px; height:460px; border-radius:22px; }
    .gallery-caption{ bottom:60px; }
    .gallery-caption h2{ font-size:24px; }
    .gallery-caption p{ font-size:16px; }
    .viewer-arrow{ width:50px; height:50px; font-size:22px; }
    .viewer-arrow.left{ left:30px; }
    .viewer-arrow.right{ right:30px; }
    .gallery-info{
    position:relative;
    margin-top:30px;
    text-align:center;
}

#galleryName{
    font-size:28px;
    margin-bottom:4px;
}

#galleryLocation{
    font-size:18px;
    opacity:.7;
}
}

/* NOTE: gallery.css already defines a ≤900px tier
   (.gallery-card 220x330, .gallery-carousel 420px).
   We refine spacing/text around that existing tier here. */
@media (max-width: 900px) {
    .gallery-page{ padding:50px 20px 30px; }
    .gallery-content h1{ font-size:28px; }
    .gallery-content p{ font-size:13px; }
    .gallery-carousel{ margin-left:auto; margin-right:auto; }
    .gallery-caption{ bottom:34px; }
    .gallery-caption h2{ font-size:20px; }
    .gallery-caption p{ font-size:14px; }
    .card-view-btn{ top:14px; right:14px; }
    .card-view-btn button{ padding:9px 18px; font-size:12px; }
    .close-gallery{ top:18px; right:18px; width:42px; height:42px; font-size:18px; }
    .viewer-close{ top:18px; right:18px; width:40px; height:40px; font-size:18px; }
    .viewer-arrow{ width:42px; height:42px; font-size:18px; }
    .viewer-arrow.left{ left:14px; }
    .viewer-arrow.right{ right:14px; }
    /* Popup is only "safe" as position:absolute when its section is exactly
       one viewport tall — on mobile the section can run taller than the
       screen, so fixed keeps the popup centered on whatever is on screen,
       matching how it always looks correct on desktop. */
    .gallery-popup{ position:fixed; padding:20px; }
    .gallery-info{
    position:relative;
    margin-top:30px;
    text-align:center;
}

#galleryName{
    font-size:28px;
    margin-bottom:4px;
}

#galleryLocation{
    font-size:18px;
    opacity:.7;
}
}

@media (max-width: 600px) {
    .gallery-page{ padding:40px 14px 24px; }
    .gallery-carousel{ height:340px; margin-top:-20px; }
    .gallery-card{ width:180px; height:270px; border-radius:18px; }
    .gallery-content h1{ font-size:22px; }
    .gallery-caption{ bottom:20px; }
    .gallery-caption h2{ font-size:17px; }
    .gallery-caption p{ font-size:12.5px; }
    #viewerImage{ max-width:92%; max-height:70vh; border-radius:14px; }
    .viewer-arrow{ width:36px; height:36px; font-size:16px; }
    .gallery-popup{ padding:14px; }
    .gallery-info{
    position:relative;
    margin-top:30px;
    text-align:center;
}

#galleryName{
    font-size:28px;
    margin-bottom:4px;
}

#galleryLocation{
    font-size:18px;
    opacity:.7;
}
}

@media (max-width:768px){

    .gallery-page{
        padding-top:140px !important;
    }

    .gallery-content{
        margin-top:20px;
        text-align:center;
    }

    .gallery-content h1{
        font-size:34px;
        line-height:1.1;
        margin-bottom:10px;
    }

    .gallery-content p{
        font-size:15px;
        max-width:320px;
        margin:0 auto 25px;
    }
    .gallery-info{
    position:relative;
    margin-top:30px;
    text-align:center;
}

#galleryName{
    font-size:28px;
    margin-bottom:4px;
}

#galleryLocation{
    font-size:18px;
    opacity:.7;
}
.viewer-arrow{
        position:fixed !important;
        top:50%;
        transform:translateY(-50%);
        z-index:99999 !important;
    }

    .viewer-arrow.left{
        left:12px !important;
    }

    .viewer-arrow.right{
        right:12px !important;
    }

    #viewerImage{
        position:relative;
        z-index:1;
    }

    .viewer-close{
    top:60px !important;
    right:18px !important;
}

}

@media (max-width:480px){

    .gallery-page{

    display:flex;
    flex-direction:column;
    justify-content:flex-start;
    align-items:center;

}

    .gallery-content h1{
        font-size:28px;
    }

    .gallery-content p{
        font-size:13px;
        line-height:1.5;
        width:90%;
        margin:auto;
    }
    .gallery-info{
        position:absolute;
        left:50%;
        transform:translateX(-50%);
        top:470px;
        bottom:auto;
        width:100%;
        text-align:center;
        z-index:100;
    }
#galleryName{
    font-size:28px;
    margin-bottom:10px;
}

#galleryLocation{
    font-size:18px;
    opacity:.7;
    margin-bottom:220px;
}
.gallery-carousel{
    position:relative;
    margin:40px auto 0;
}

}

@media (max-width: 380px) {
    .gallery-card{ width:150px; height:225px; }
    .gallery-carousel{ height:290px; }
    .gallery-popup{ padding:10px; }
    .viewer-arrow{ width:32px; height:32px; font-size:14px; }
    .gallery-info{
    position:relative;
    margin-top:30px;
    text-align:center;
}

#galleryName{
    font-size:28px;
    margin-bottom:4px;
}

#galleryLocation{
    font-size:18px;
    opacity:.7;
}
}


/* =========================================================
   7. CLIENT REVIEWS
   ========================================================= */
@media (max-width: 1200px) {
    .review-content{ padding:90px 60px; }
    .review-content h1{ font-size:58px; }
    .review-wrapper{ width:900px; }
}

@media (max-width: 1024px) {
    .review-content{ padding:80px 40px; }
    .review-content h1{ font-size:48px; }
    .review-content p{ font-size:17px; }
    .review-wrapper{ width:100%; max-width:760px; }
    .review-card{ min-width:300px; padding:28px; }
    .review-arrow{ width:50px; height:50px; font-size:20px; }
}

/* JS switches to 2-cards-per-view at <=900px, 1-card-per-view at <=600px.
   Card widths below are tuned to match those breakpoints exactly. */
@media (max-width: 900px) {
    .review-page{ padding:20px 0 100px; }
    .review-content{ padding:30px 24px 70px; }
    .review-content h1{ font-size:38px; }
    .review-content p{ font-size:15px; }
    .review-slider{ gap:14px; margin-top:50px; }
    .review-wrapper{ max-width:calc(100% - 130px); }
    .review-card{ min-width:calc(50% - 12px); padding:24px; }
    .review-track{ gap:24px; }
    .quote{ font-size:44px; }
    .review-card p{ font-size:15px; margin:14px 0; }
    .stars{ font-size:18px; margin-bottom:20px; }
    .review-user h4{ font-size:18px; }
    .review-arrow{ width:42px; height:42px; font-size:17px; }
    .review-dots{ bottom:-45px; }
}

@media (max-width: 600px) {
    .review-content{ padding:20px 14px 60px; }
    .review-content h1{ font-size:28px; }
    .review-content p{ font-size:13.5px; }
    .review-slider{ gap:8px; margin-top:40px; }
    .review-wrapper{ max-width:calc(100% - 84px); }
    .review-card{ min-width:100%; padding:22px; }
    .review-track{ gap:16px; }
    .review-arrow{ width:36px; height:36px; font-size:15px; }
}

@media (max-width: 380px) {
    .review-content h1{ font-size:24px; }
    .review-wrapper{ max-width:calc(100% - 70px); }
    .review-arrow{ width:32px; height:32px; font-size:13px; }
}


/* =========================================================
   8. CONTACT
   ========================================================= */
@media (max-width: 1200px) {
    .contact-container{ transform:translateX(0); padding:150px 60px 20px; gap:60px; }
    .contact-form-box{ width:480px; }
}

@media (max-width: 1024px) {
    .contact-container{ padding:140px 40px 20px; gap:40px; }
    .contact-left h1{ font-size:42px; }
    .contact-form-box{ width:420px; top:0; }
    .contact-form-box h2{ font-size:34px; }
}

@media (max-width: 900px) {
    .contact-container{ flex-direction:column; padding:120px 40px 40px; gap:40px; }
    .contact-left{ width:100%; margin-top:0; }
    .contact-form-box{ width:100%; max-width:550px; top:0; margin:0 auto; }
}

@media (max-width: 768px) {
    .contact-container{ padding:100px 24px 40px; }
    .contact-left h1{ font-size:34px; }
    .contact-left > p{ font-size:16px; margin-top:-10px; }
    .contact-form-box{ padding:20px; border-radius:24px; }
    .contact-form-box h2{ font-size:28px; }
    .input-row{ flex-direction:column; gap:0; }
}

@media (max-width: 480px) {
    .contact-container{ padding:90px 16px 30px; }
    .contact-left h1{ font-size:26px; }
    .tag{ font-size:14px; }
    .contact-left .line{ width:80px; margin:20px 0; }
    .contact-left > p{ font-size:14px; }
    .info-item{ gap:14px; }
    .icon{ width:44px; height:44px; min-width:44px; min-height:44px; font-size:17px; }
    .icon svg{ width:22px; height:22px; }
    .contact-form-box{ padding:16px; border-radius:20px; }
    .contact-form-box h2{ font-size:22px; }
    .contact-form-box p{ font-size:13.5px; margin:10px 0 20px; }
    input, textarea{ padding:14px; margin-bottom:14px; border-radius:14px; }
    textarea{ height:130px; }
    .contact-form-box button{ padding:16px; }
}

/* Footer */
@media (max-width: 768px) {
    .site-footer{ padding:8px 16px 12px; }
    .social-icons{ gap:10px; flex-wrap:wrap; }
    .social-icons a{ width:42px; height:42px; }
    .social-icons a svg{ width:16px; height:16px; }
    .site-footer p{ font-size:8px; letter-spacing:1px; }
}
@media (max-width: 480px) {
    .social-icons a{ width:38px; height:38px; }
}


/* =========================================================
   9. CHATBOT / WHATSAPP WIDGET
   ========================================================= */
@media (max-width: 480px) {
    .chat-widget{ right:16px; bottom:16px; }

    .chat-toggle{ width:54px; height:54px; font-size:24px; }
    .chat-toggle svg{ width:28px; height:28px; }

    .whatsapp-toggle{ width:54px; height:54px; bottom:70px; }
    .whatsapp-toggle svg{ width:28px; height:28px; }

    .chat-box{
        width:calc(100vw - 32px);
        min-width:auto;
        max-width:340px;
        height:70vh;
        max-height:560px;
        right:0;
        bottom:64px;
    }

    .chat-header{ padding:18px; }
    .chat-header h3{ font-size:20px; }
    .chat-body{ padding:14px; }
    .bot-msg, .user-msg{ font-size:14px; padding:12px 14px; }
}

@media (max-width: 380px) {
    .chat-box{ width:calc(100vw - 20px); max-width:none; }
}
responsive.css
Displaying responsive.css.