/*=====================================
   GLOBAL RESPONSIVE POLISH
======================================*/
html{scroll-behavior:smooth}
img{max-width:100%;height:auto}
button,a{ -webkit-tap-highlight-color:transparent }

@media(max-width:992px){
    .header-container{padding:12px 20px}
    .nav-links{gap:16px}
    .footer-grid{grid-template-columns:repeat(2,1fr)}
}

@media(max-width:768px){
    .header-container{min-height:70px}
    .logo-circle{width:48px;height:48px}
    .logo-text h2{font-size:18px}
    .top-container{padding:8px 15px}
    .top-social{gap:8px}
    .footer-grid{grid-template-columns:1fr}
    .footer-bottom{flex-direction:column;gap:12px;text-align:center}
    .floating-whatsapp span{display:none}
    .floating-whatsapp{width:52px;height:52px;border-radius:50%;padding:0;justify-content:center}
}

@media(max-width:480px){
    .section-title h2{font-size:28px}
    .container{width:min(100% - 28px,1200px)}
    .footer{padding-top:45px}
}

/*==================================================
   FINAL MOBILE POLISH - ALL PAGES
   Tested design target: 320px - 768px
==================================================*/

html, body{
    max-width:100%;
    overflow-x:hidden;
}

body.menu-open{
    overflow:hidden;
}

@media (max-width: 768px){
    section{
        padding:58px 0;
    }

    .container{
        width:min(100% - 28px, 1200px);
    }

    .section-title{
        margin-bottom:35px;
    }

    .section-title h2{
        font-size:30px;
        line-height:1.4;
    }

    .section-title p{
        font-size:14px;
        line-height:1.9;
    }

    /* Header */
    #main-header{
        padding:8px 0;
    }

    .header-container{
        width:calc(100% - 20px);
        min-height:64px;
        height:64px;
        padding:0 12px;
        border-radius:18px;
    }

    .logo-section{gap:8px;}
    .logo-circle{width:44px;height:44px;}

    .header-tools{
        gap:7px;
    }

    .tool-link,
    .mode-btn,
    .mobile-menu-btn{
        width:38px;
        height:38px;
        font-size:14px;
    }

    .nav-links{
        width:min(320px,86vw);
        padding:105px 18px 30px;
        gap:10px;
        border-radius:0 0 0 22px;
    }

    .nav-links a{
        display:block;
        width:100%;
        padding:14px 16px;
        border-radius:12px;
        font-size:17px;
    }

    .nav-links a:hover,
    .nav-links a.active{
        background:rgba(212,160,23,.10);
    }

    .nav-links a::after{
        display:none;
    }

    body.menu-open::before{
        content:"";
        position:fixed;
        inset:0;
        background:rgba(8,18,42,.48);
        backdrop-filter:blur(2px);
        z-index:998;
    }

    /* Home hero */
    .hero{
        min-height:auto;
        padding:95px 0 55px;
        background-position:center;
    }

    .hero-container{
        width:min(100% - 28px,1200px);
        display:flex;
        flex-direction:column;
        gap:30px;
        padding-top:0;
    }

    .hero-content h4{
        font-size:14px;
        margin-bottom:10px;
    }

    .hero-content h1{
        font-size:36px;
        line-height:1.35;
        margin-bottom:16px;
    }

    .hero-content p{
        font-size:15px;
        line-height:1.9;
        margin-bottom:25px;
    }

    .hero-buttons{
        flex-direction:row;
        justify-content:center;
        gap:10px;
    }

    .hero-buttons .btn{
        min-width:0;
        width:auto;
        flex:1;
        padding:13px 14px;
        font-size:14px;
    }

    .hero-image{margin-top:0;}
    .hero-image img{
        max-width:100%;
        border-radius:20px;
        animation:none;
    }

    /* Home sections */
    .about-grid,
    .services-grid,
    .projects-grid,
    .features-grid,
    .stats-grid{
        gap:18px;
    }

    .about-image img{
        height:330px;
        border-radius:18px;
    }

    .about-content h2{
        font-size:30px;
        line-height:1.45;
    }

    .about-content p{
        font-size:15px;
    }

    .about-features{
        gap:12px;
        margin:25px 0;
    }

    .about-features li{
        padding:14px;
    }

    .service-card{
        padding:28px 20px;
        border-radius:18px;
    }

    .service-icon{
        width:70px;
        height:70px;
        font-size:28px;
        margin-bottom:18px;
    }

    .service-card h3{
        font-size:21px;
    }

    .service-card p{
        font-size:14px;
    }

    .features-grid{
        grid-template-columns:repeat(2,1fr) !important;
    }

    .feature-box{
        padding:22px 12px;
        border-radius:16px;
    }

    .feature-box i{
        width:58px;
        height:58px;
        font-size:23px;
        margin-bottom:13px;
    }

    .feature-box h3{
        font-size:17px;
        margin-bottom:8px;
    }

    .feature-box p{
        font-size:12px;
        line-height:1.8;
    }

    .stats-grid{
        grid-template-columns:repeat(2,1fr) !important;
    }

    .stat-card{
        padding:25px 10px;
        border-radius:18px;
    }

    .stat-icon{
        width:58px;
        height:58px;
        font-size:27px;
        margin-bottom:13px;
    }

    .stat-card h2{
        font-size:32px;
    }

    .stat-card span{
        font-size:13px;
    }

    .projects-filter,
    .filter-wrapper{
        gap:8px;
        margin-bottom:30px;
    }

    .projects-filter button,
    .filter-btn{
        width:auto !important;
        flex:1 1 calc(50% - 8px);
        min-width:0;
        padding:10px 12px;
        font-size:13px;
    }

    .projects .project-card img{
        height:250px;
    }

    .projects .project-overlay{
        opacity:1;
        padding:20px;
        background:linear-gradient(transparent 20%,rgba(0,0,0,.88));
    }

    .projects .project-info h3{
        font-size:20px;
    }

    .projects .project-info span{
        font-size:13px;
    }

    .projects-btn{
        margin-top:35px;
    }

    .cta{
        padding:75px 0;
        background-attachment:scroll;
    }

    .cta h2{
        font-size:32px;
    }

    .cta p{
        font-size:15px;
        line-height:1.9;
        margin-bottom:28px;
    }

    .cta .btn{
        width:100%;
        margin:0;
    }

    /* Services page */
    .services-hero{
        min-height:auto;
        padding:105px 0 55px;
    }

    .hero-grid{
        grid-template-columns:1fr;
        gap:28px;
        text-align:center;
    }

    .hero-content h1{
        font-size:34px;
    }

    .hero-content p{
        font-size:15px;
    }

    .hero-buttons{
        justify-content:center;
    }

    .hero-image{order:-1;}
    .hero-image img{max-width:330px;}

    .featured-service,
    .featured-grid{
        grid-template-columns:1fr;
        gap:0;
    }

    .featured-image img{
        height:260px;
    }

    .featured-content{
        padding:28px 20px;
        text-align:center;
    }

    .featured-content h2{
        font-size:29px;
    }

    .featured-content p{
        font-size:14px;
    }

    .services-wrapper{
        gap:30px;
    }

    /* Projects page */
    .projects-hero,
    .project-hero{
        min-height:auto;
        padding:110px 0 60px;
    }

    .projects-hero h1,
    .project-hero h1{
        font-size:34px;
        line-height:1.35;
    }

    .projects-hero p,
    .project-hero p{
        font-size:14px;
        line-height:1.9;
    }

    .featured-content ul li{
        justify-content:flex-start;
        text-align:right;
    }

    .projects-gallery,
    .projects-more{
        padding:60px 0;
    }

    .projects-grid{
        grid-template-columns:1fr !important;
    }

    .project-image{
        height:230px;
    }

    .project-overlay{
        opacity:1;
    }

    .project-content{
        padding:20px;
    }

    .project-content h3{
        font-size:20px;
    }

    .gallery-grid{
        grid-template-columns:repeat(2,1fr);
        gap:12px;
        margin-top:30px;
    }

    .gallery-item{
        border-radius:14px;
    }

    .gallery-item img{
        height:160px;
    }

    /* Project details */
    .project-info-section{
        margin-top:-25px;
    }

    .project-info-grid{
        grid-template-columns:repeat(2,1fr) !important;
        gap:12px;
    }

    .info-card{
        padding:20px 10px;
        border-radius:16px;
    }

    .info-card i{
        width:52px;
        height:52px;
        font-size:21px;
    }

    .info-card h4{
        font-size:16px;
    }

    .info-card p{
        font-size:13px;
    }

    .main-image{
        border-radius:16px;
    }

    .main-image img{
        height:280px;
    }

    .thumbnail-gallery{
        grid-template-columns:repeat(3,1fr);
        gap:8px;
    }

    .thumbnail{
        height:72px;
        border-radius:10px;
        border-width:3px;
    }

    /* Contact */
    .contact-hero{
        padding:110px 0 60px;
    }

    .contact-hero h1{
        font-size:34px;
    }

    .contact-hero p{
        font-size:15px;
    }

    .contact-grid{
        gap:25px;
    }

    .contact-info h2,
    .contact-form-box h2{
        font-size:28px;
    }

    .contact-form-box{
        padding:24px 18px;
        border-radius:18px;
    }

    .form-row{
        grid-template-columns:1fr;
        gap:0;
    }

    .contact-info-card{
        padding:15px;
        gap:12px;
    }

    .contact-icon{
        width:46px;
        height:46px;
        min-width:46px;
    }

    /* Footer */
    .footer{
        padding:55px 0 22px;
    }

    .footer-grid{
        grid-template-columns:1fr !important;
        gap:32px;
        text-align:center;
    }

    .footer-logo{
        justify-content:center;
    }

    .footer-logo img{
        width:62px;
        height:62px;
    }

    .footer-logo-text h2{
        font-size:22px;
    }

    .footer p,
    .footer-links a,
    .footer-contact li{
        font-size:13px;
    }

    .footer-links{
        gap:10px;
    }

    .footer-contact li{
        justify-content:center;
    }

    .footer-social{
        justify-content:center;
        gap:8px;
    }

    .footer-social a{
        width:38px;
        height:38px;
        font-size:15px;
    }

    .footer-bottom{
        padding-top:20px;
        margin-top:30px;
        gap:8px;
        font-size:12px;
    }

    #backToTop{
        left:12px;
        bottom:12px;
        width:44px;
        height:44px;
        font-size:17px;
    }

    .floating-whatsapp{
        right:12px !important;
        bottom:12px !important;
        width:46px !important;
        height:46px !important;
    }
}

@media (max-width:380px){
    .header-container{width:calc(100% - 14px);}
    .tool-link,.mode-btn,.mobile-menu-btn{width:35px;height:35px;}
    .hero-content h1,.hero-content h1{font-size:30px;}
    .features-grid,.stats-grid{grid-template-columns:1fr !important;}
    .projects-filter button,.filter-btn{flex-basis:100%;}
    .gallery-grid{grid-template-columns:1fr;}
}