/* ===========================
   RESPONSIVE CSS - Mobile & Tablet
=========================== */

/* ===========================
TABLETS (MAX-WIDTH: 1024px)
=========================== */

@media(max-width:1024px){
    .container{
        width:95%;
    }

    nav ul{
        gap:20px;
    }

    nav a{
        font-size:16px;
    }

    .hero h1{
        font-size:40px;
    }

    .hero p{
        font-size:19px;
    }

    .button{
        padding:14px 28px;
        font-size:15px;
    }

    .contact-grid{
        grid-template-columns:1fr 1fr;
    }

    .map-card{
        grid-column:1/-1;
    }
}

/* ===========================
TABLETS (MAX-WIDTH: 900px)
=========================== */

@media(max-width:900px){
    .container{
        flex-direction:column;
        gap:15px;
    }

    header{
        height:65px;
    }

    .hero{
        margin-top:65px;
        min-height:calc(100vh - 65px);
    }

    nav ul{
        flex-wrap:wrap;
        justify-content:center;
        gap:15px;
    }

    nav li{
        margin:0;
    }

    nav a{
        font-size:15px;
    }

    .logo img{
        height:45px;
    }

    .hero h1{
        font-size:36px;
    }

    .hero p{
        font-size:18px;
    }

    .button{
        padding:14px 28px;
        font-size:15px;
    }

    .services h2,
    .gallery h2,
    .about h2,
    .contact h2,
    .testimonials h2{
        font-size:36px;
        margin-bottom:40px;
    }

    .grid,
    .gallery-grid,
    .about-box{
        grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
        gap:20px;
    }

    .card{
        padding:30px 20px;
    }

    .card h1{
        font-size:48px;
    }

    .card h3{
        font-size:22px;
    }

    .card p{
        font-size:15px;
    }

    .gallery-card img{
        height:220px;
    }

    .gallery-card h3{
        font-size:19px;
        padding:15px 15px 8px;
    }

    .gallery-card p{
        font-size:14px;
        padding:0 15px 15px;
    }

    .stat h2{
        font-size:48px;
    }

    .stat p{
        font-size:17px;
    }

    .contact-grid{
        grid-template-columns:1fr;
        gap:20px;
    }

    .contact-card,
    .map-card{
        margin-bottom:0;
    }

    .map-card{
        grid-column:auto;
    }

    .map-card iframe{
        height:350px;
    }
}

/* ===========================
MOBILE (MAX-WIDTH: 768px)
=========================== */

@media (max-width:768px){
    header{
        height:60px;
        padding:5px 0;
    }

    .hero{
        margin-top:60px;
        min-height:calc(100vh - 60px);
        padding:30px 15px;
    }

    .hero h1{
        font-size:32px;
        margin-bottom:15px;
        line-height:1.3;
    }

    .hero p{
        font-size:17px;
        margin-bottom:20px;
    }

    .button{
        width:100%;
        text-align:center;
        padding:14px 24px;
        font-size:15px;
        border-radius:8px;
    }

    .services,
    .gallery,
    .about,
    .contact,
    .stats,
    .testimonials{
        padding:60px 5%;
    }

    .services h2,
    .gallery h2,
    .about h2,
    .contact h2,
    .testimonials h2{
        font-size:28px;
        margin-bottom:35px;
    }

    .logo img{
        height:42px;
    }

    nav a{
        font-size:14px;
        font-weight:600;
    }

    nav ul{
        gap:12px;
    }

    .card h1{
        font-size:40px;
    }

    .card h3{
        font-size:19px;
    }

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

    .card{
        padding:25px 15px;
    }

    .gallery-card img{
        height:200px;
    }

    .gallery-card h3{
        font-size:17px;
        padding:12px 10px 6px;
    }

    .gallery-card p{
        font-size:13px;
        padding:0 10px 15px;
    }

    .stat h2{
        font-size:38px;
    }

    .stat p{
        font-size:15px;
    }

    .stats{
        gap:20px;
    }

    .about-box div{
        padding:25px 15px;
        font-size:14px;
    }

    .contact-card,
    .map-card{
        min-height:auto;
    }

    .contact-card{
        padding:20px;
    }

    .contact-card h3{
        font-size:18px;
    }

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

    .contact-card input,
    .contact-card textarea{
        padding:12px 14px;
        font-size:15px;
    }

    .map-card iframe{
        height:300px;
    }

    .whatsapp{
        width:55px;
        height:55px;
        right:12px;
        bottom:12px;
    }

    .whatsapp img{
        width:28px;
        height:28px;
    }

    .contact-subtitle{
        font-size:16px;
    }
}

/* ===========================
SMALL MOBILE (MAX-WIDTH: 480px)
=========================== */

@media (max-width:480px){
    .container{
        width:95%;
    }

    header{
        height:55px;
        padding:5px 0;
    }

    .logo img{
        height:38px;
    }

    nav ul{
        gap:8px;
    }

    nav a{
        font-size:12px;
        font-weight:600;
        padding:5px 8px;
    }

    .hero{
        margin-top:55px;
        min-height:calc(100vh - 55px);
        padding:20px 10px;
    }

    .hero h1{
        font-size:24px;
        margin-bottom:12px;
        line-height:1.2;
    }

    .hero p{
        font-size:15px;
        margin-bottom:18px;
    }

    .button{
        padding:12px 20px;
        font-size:14px;
        border-radius:8px;
    }

    .services{
        padding:50px 5%;
    }

    .services h2{
        font-size:22px;
        margin-bottom:25px;
    }

    .gallery h2,
    .about h2,
    .contact h2,
    .testimonials h2{
        font-size:22px;
        margin-bottom:25px;
    }

    .gallery{
        padding:50px 5%;
    }

    .gallery-grid{
        gap:15px;
    }

    .gallery-card img{
        height:180px;
    }

    .gallery-card h3{
        font-size:16px;
        padding:12px 8px 6px;
    }

    .gallery-card p{
        font-size:12px;
        padding:0 12px 12px;
    }

    .card{
        padding:20px 12px;
    }

    .card h1{
        font-size:32px;
    }

    .card h3{
        font-size:17px;
    }

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

    .about{
        padding:50px 5%;
    }

    .about h2{
        font-size:22px;
        margin-bottom:25px;
    }

    .about-box{
        gap:12px;
    }

    .about-box div{
        padding:18px 12px;
        font-size:13px;
    }

    .stats{
        padding:50px 5%;
        gap:15px;
    }

    .stat{
        padding:12px;
    }

    .stat h2{
        font-size:28px;
        margin-bottom:5px;
    }

    .stat p{
        font-size:12px;
    }

    .contact{
        padding:50px 5%;
    }

    .contact h2{
        font-size:22px;
    }

    .contact-subtitle{
        font-size:14px;
        margin-bottom:25px;
    }

    .contact-grid{
        gap:15px;
    }

    .contact-card{
        padding:18px;
    }

    .contact-card h3{
        font-size:15px;
    }

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

    .contact-card input,
    .contact-card textarea{
        padding:12px 12px;
        font-size:14px;
    }

    .map-card iframe{
        height:250px;
    }

    footer{
        padding:20px 15px;
        font-size:13px;
    }

    footer p{
        font-size:12px;
        margin-bottom:8px;
    }

    .whatsapp{
        width:50px;
        height:50px;
        right:10px;
        bottom:10px;
    }

    .whatsapp img{
        width:26px;
        height:26px;
    }

    .grid,
    .gallery-grid,
    .about-box{
        grid-template-columns:1fr;
    }
}

/* ===========================
EXTRA SMALL PHONES (MAX-WIDTH: 360px)
=========================== */

@media (max-width:360px){
    nav a{
        font-size:11px;
    }

    .logo img{
        height:35px;
    }

    .hero h1{
        font-size:20px;
    }

    .hero p{
        font-size:13px;
    }

    .button{
        padding:10px 16px;
        font-size:13px;
    }

    .card h1{
        font-size:28px;
    }

    .card h3{
        font-size:15px;
    }

    .stat h2{
        font-size:24px;
    }

    .stat p{
        font-size:11px;
    }

    .contact-card h3{
        font-size:14px;
    }
}