:root{

--primary:#4aad9f;
--secondary:#406763;
--accent:#14B8A6;
--background:#F8FAFC;
--white:#fff;
--dark:#12394d;

}



body{

margin:0;

font-family:
Tahoma,Arial,sans-serif;

background:var(--background);

}

/* =====================
      NAVBAR
===================== */


.navbar{


height:85px;
width:100%;
background:#12394d;

display:flex;

align-items:center;

justify-content:space-between;

padding:0 60px;


position:fixed;

top:0;
left:0;
z-index:9999;


box-shadow:0 5px 20px rgba(0,0,0,.15);


}




/* Logo */


.nav-logo img{


height:70px;

width:auto;


}





/* Links */


.nav-links{


position:absolute;

left:50%;

transform:translateX(-50%);


display:flex;

gap:35px;

align-items:center;


}



.nav-links a{


color:white;

text-decoration:none;

font-size:17px;

font-weight:600;

transition:.3s;


}



.nav-links a:hover{


color:#4aad9f;


}



/* Language */


.nav-language a{


color:white;

border:1px solid #4aad9f;

padding:10px 22px;

border-radius:25px;

text-decoration:none;

font-weight:bold;


}



.nav-language a:hover{


background:#4aad9f;


}





/* Hamburger */


.menu-toggle{


display:none;

cursor:pointer;

width:35px;


}



.menu-toggle span{


display:block;

height:3px;

background:white;

margin:7px 0;

border-radius:10px;


}



/* RTL */


html[dir="rtl"] .nav-links{


direction:rtl;


}



html[dir="ltr"] .nav-links{


direction:ltr;


}






/* =====================
      MOBILE
===================== */


@media(max-width:900px){



.navbar{


padding:0 20px;


}



.nav-logo img{


height:60px;


}



.menu-toggle{


display:block;


}



/* Hide desktop menu */


.nav-links{


position:absolute;


top:85px;


left:0;


transform:none;


width:100%;


background:#12394d;


display:none;


flex-direction:column;


gap:0;


padding:20px 0;


}



.nav-links.active{


display:flex;


}



.nav-links a{


width:100%;


text-align:center;


padding:15px;


border-bottom:1px solid rgba(255,255,255,.1);


}



.nav-language{


display:none;


}


}

/* Hero */

/* ======================
   HERO SECTION
====================== */


.hero{


height:90vh;

background-image:
url("../images/clinic-bg.png");

background-size:cover;

background-position:center;

position:relative;


}



.hero-overlay{
padding-top: 80px;

position:absolute;

inset:0;


background:

linear-gradient(
90deg,
rgba(18, 57, 77, 0.877),
rgba(248,250,252,.75)
);


display:flex;

align-items:center;


}




.hero-container{

width:90%;

max-width:1300px;

margin:auto;

display:flex;

align-items:center;

justify-content:space-between;

}

.hero-image{

width:40%;

display:flex;

justify-content:center;

}


.doctor-frame{

position:relative;

width:420px;

height:600px;

border-radius:40px;

overflow:visible;

}



.doctor-frame img{

width:100%;

height:100%;

object-fit:cover;

border-radius:40px;

border:2px solid rgba(255,255,255,.2);

}


.hero-image{


width:45%;


}



.hero-image img{


width:100%;

max-width:500px;


filter:drop-shadow(
0 20px 30px #0004
);


}




.hero-content{


width:55%;

text-align:right;


}




.hero-content h1{


font-size:42px;

color:var(--dark);

margin-bottom:15px;


}



.hero-content h2{


font-size:28px;

color:var(--primary);


}




.hero-content p{


font-size:20px;

line-height:2;

color:var(--secondary);


}




.hero-buttons{


display:flex;

gap:15px;

margin-top:35px;


}



.hero-buttons .btn{


padding:15px 30px;

border-radius:30px;

font-weight:bold;

text-decoration:none;


}


.hero-certificates {
    margin-top: 25px;
    display: grid;
    grid-template-columns: repeat(2, auto);
    gap: 15px 50px;
    justify-content: center;
    font-size: 15px;
    color: #555;
}


.hero-certificates div {
    display: flex;
    align-items: center;
    gap: 8px;
}


.hero-certificates span {
    color: #35a83b;
    font-size: 18px;
    font-weight: bold;
}

.whatsapp{


background:#25D366;

color:white;


}



.call{


background:var(--dark);

color:white;


}



.instagram{


border:1px solid var(--dark);

color:var(--dark);

background:white;


}



/* Mobile */


@media(max-width:900px){


.hero{

height:auto;

padding:80px 0;

}


.hero-container{


flex-direction:column-reverse;


}



.hero-image,
.hero-content{


width:100%;

text-align:center;


}



.hero-content h1{


font-size:35px;

}



}



.whatsapp{

background:#25D366;

}



.call{

background:var(--primary);

}



.insta{

background:#c13584;

}


/* =====================
   ABOUT SECTION
===================== */


.about-section{

padding:100px 60px;

background:#fff;

}



.about-container{

max-width:1200px;

margin:auto;

display:grid;

grid-template-columns:
1fr 1fr;

gap:70px;

align-items:center;

}



.about-image img{

width:100%;

height:650px;

object-fit:cover;

border-radius:25px;

box-shadow:
0 20px 40px rgba(18,57,77,.15);

}



.about-content{

text-align:right;

}



.about-label{

color:var(--primary);

font-weight:bold;

font-size:18px;

}



.about-content h2{

font-size:48px;

color:var(--dark);

margin:15px 0;

}



.about-content h3{

color:var(--primary);

font-size:24px;

margin-bottom:30px;

}



.about-content p{

font-size:18px;

line-height:2;

color:var(--secondary);

margin-bottom:20px;

}



.about-tags{

display:flex;

gap:12px;

flex-wrap:wrap;

margin-top:30px;

}



.about-tags span{

background:#e5f8f2;

color:var(--secondary);

padding:10px 20px;

border-radius:30px;

font-size:14px;

font-weight:bold;

}



@media(max-width:900px){


.about-container{

grid-template-columns:1fr;

}


.about-image img{

height:450px;

}


.about-content{

text-align:center;

}


.about-content h2{

font-size:36px;

}

}

/* Certificates */


.certificates{

padding:60px;

text-align:center;

}



.certificate-grid{

display:grid;

grid-template-columns:
repeat(auto-fit,minmax(250px,1fr));

gap:25px;

}



.certificate-grid div{

background:white;

padding:25px;

border-radius:20px;

box-shadow:
0 5px 20px #0001;

color:var(--dark);

}

/* =========================
 FIXED CENTER GALLERY
========================= */


.gallery-section{

padding:25px 0;

background:#F8FAFC;

overflow:hidden;

}



.fixed-gallery{


height:360px;


display:flex;

align-items:center;

justify-content:center;


gap:40px;


}

/* Gallery Arrows */

.gallery-arrow{


width:50px;

height:50px;


border-radius:50%;


border:none;


background:#FFFFFF;


color:#12394d;


font-size:35px;


display:flex;

align-items:center;

justify-content:center;


cursor:pointer;


box-shadow:

0 10px 25px rgba(18,57,77,.15);


transition:.3s;


z-index:10;


}



.gallery-arrow:hover{


background:#4aad9f;

color:white;


}



html[dir="rtl"] .prev-case{

transform:rotate(180deg);

}



/* CENTER IMAGE */


.gallery-main{


width:280px;

height:280px;

flex-shrink:0;


}



.gallery-main img{


width:100%;

height:100%;

object-fit:cover;


border-radius:25px;


box-shadow:

0 25px 60px rgba(18,57,77,.25);


border:5px solid white;


}





/* SIDES */


.gallery-side{


width:320px;

overflow:hidden;


}



.gallery-track{


display:flex;

gap:25px;


transition:

transform .8s cubic-bezier(.4,0,.2,1);


}




.gallery-side img{


width:140px;

height:140px;

flex-shrink:0;


object-fit:cover;


border-radius:20px;


opacity:.7;


box-shadow:

0 10px 25px rgba(18,57,77,.15);


transition:.4s;


}



.gallery-side img:hover{


opacity:1;

transform:scale(1.05);


}

.gallery-side img{

animation:
fadeSlide .8s ease;

}



@keyframes fadeSlide{


from{

opacity:0;

transform:translateX(40px);

}


to{

opacity:.7;

transform:translateX(0);

}


}


/* =========================
 LOCATION SECTION
========================= */

.location-title{

text-align:center;

margin-bottom:40px;

}


.location-title span{

color:#4aad9f;

font-weight:bold;

font-size:18px;

}

.location-section{
    padding-bottom: 50px;
}


.location-title h2{

color:#12394d;

font-size:40px;

margin:15px 0;

}



.address{

font-size:18px;

color:#406763;

line-height:2;

}



.working-hours{

font-size:20px;

font-weight:600;

color:#12394d;

margin-top:20px;

}





.location-content{

display:flex;

align-items:center;

justify-content:center;

gap:60px;

}




.map iframe{


width:600px;

height:420px;


border:0;

border-radius:25px;


box-shadow:

0 15px 35px rgba(18,57,77,.15);

}




.contact-buttons{


display:flex;

gap:20px;

align-items:center;

}



.contact-btn{


width:170px;

height:60px;


border-radius:40px;


display:flex;

align-items:center;

justify-content:center;


gap:10px;


text-decoration:none;


font-size:18px;

font-weight:bold;


transition:.3s;

}





.contact-btn.phone{


background:#12394d;

color:white;

}



.contact-btn.whatsapp{


background:#4aad9f;

color:white;

}



.contact-btn.instagram{


background:white;

color:#12394d;

border:2px solid #4aad9f;

}



.contact-btn:hover{


transform:translateY(-5px);

}




@media(max-width:900px){


.location-content{

flex-direction:column;

}



.contact-buttons{

flex-direction:column;

}



.map iframe{

width:100%;

}

}

.copyright{

grid-column:1/-1;

text-align:center;

border-top:1px solid #ffffff33;

padding-top:20px;

}

/* ======================
      Footer
====================== */


.footer{

background:#12394d;

color:white;

padding:60px 40px 20px;

direction:inherit;

}



.footer-container{


max-width:1200px;

margin:auto;

display:grid;

grid-template-columns:repeat(3,1fr);

gap:50px;

align-items:start;


}



.footer-column{


display:flex;

flex-direction:column;

gap:15px;


}



.footer-brand{


align-items:flex-start;


}



.footer-brand img{


width:90px;

margin-bottom:10px;


}



.footer h3{


font-size:22px;

margin:0;


}



.footer h4{


font-size:18px;

margin-bottom:15px;

color:#4aad9f;


}



.footer a{


color:white;

text-decoration:none;

transition:.3s;


}



.footer a:hover{


color:#4aad9f;


}



.footer p{


line-height:1.8;

opacity:.9;


}




.footer-bottom{


border-top:1px solid rgba(255,255,255,.2);
margin-top:15px;
text-align:center;

}



.footer-bottom a{


color:#4aad9f;

font-weight:bold;


}

/* Mobile */


@media(max-width:768px){


.footer{


padding:30px 20px;

}



.footer-container{


grid-template-columns:1fr;

text-align:center;


}



.footer-brand{


align-items:center;


}



}

.reviews-section{

padding:80px 50px;

background:white;

}



.reviews-grid{

display:grid;

grid-template-columns:
repeat(auto-fit,minmax(280px,1fr));

gap:25px;

}



.review-card{

background:#F8FAFC;

padding:30px;

border-radius:20px;

box-shadow:
0 5px 20px #0001;

}



.stars{

color:#14B8A6;

font-size:25px;

margin-bottom:15px;

}

.cases-section{

padding:80px 50px;

text-align:center;

background:#F8FAFC;

}



.cases-slider{

overflow:hidden;

width:100%;

}



.cases-track{

display:flex;

gap:30px;

width:max-content;

animation:
casesMove 30s linear infinite;

}



.case-card{

position:relative;

width:320px;

height:420px;

border-radius:25px;

overflow:hidden;

background:white;

box-shadow:
0 10px 30px #12394d20;

}



.case-card img{

width:100%;

height:100%;

object-fit:cover;

}



.case-label{


position:absolute;

bottom:20px;

left:20px;

background:#4aad9f;

color:white;

padding:10px 25px;

border-radius:20px;

}



@keyframes casesMove{


from{

transform:translateX(0);

}


to{

transform:translateX(-50%);

}


}



/* =========================
   Cases Before After Slider
========================= */


.cases-section{

    padding:80px 50px;

    background:var(--background);

    text-align:center;

}



.cases-section h1{

    color:var(--dark);

    font-size:40px;

    margin-bottom:50px;

}



/* Cases Grid */

.cases-container{

    display:grid;

    grid-template-columns:repeat(2, 1fr);

    gap:35px;

    max-width:1200px;

    margin:auto;

}


/* Main Slider Box */

.before-after{

    position:relative;

    width:100%;

    aspect-ratio:16 / 10;

    overflow:hidden;

    border-radius:25px;

    background:#fff;

    box-shadow:
    0 15px 35px rgba(18,57,77,.15);

    direction:ltr;

}



/* Images */

.before-image,
.after-image{

    object-fit:cover;

}





/* Tablet */

@media(max-width:900px){


.cases-container{

    grid-template-columns:repeat(2,1fr);

    gap:25px;

}


}


/* Mobile */

@media(max-width:600px){


.cases-container{

    grid-template-columns:1fr;

    padding:0 15px;

}



.before-after{

    aspect-ratio:4 / 3;

}


}

/* Before Image */


.before-image{


    position:absolute;


    top:0;

    left:0;


    width:100%;


    height:100%;


    object-fit:cover;


}



/* After Image Container */


.after-container{


    position:absolute;


    top:0;


    left:0;


    height:100%;


    width:50%;


    overflow:hidden;


    z-index:2;


}



/* After Image */


.after-image{


    position:absolute;


    top:0;


    left:0;


    width:580px;


    height:365px;


    max-width:none;


    object-fit:cover;


}



/* Slider Vertical Line */


.slider-line{


    position:absolute;


    top:0;


    bottom:0;


    left:50%;


    width:3px;


    background:white;


    transform:translateX(-50%);


    z-index:4;


}



/* Circle Button */


.slider-button{


    position:absolute;


    top:50%;


    left:50%;


    transform:translate(-50%,-50%);


    width:45px;


    height:45px;


    border-radius:50%;


    background:white;


    color:var(--primary);


    display:flex;


    justify-content:center;


    align-items:center;


    font-size:22px;


    font-weight:bold;


    box-shadow:

    0 5px 15px rgba(0,0,0,.25);


    z-index:5;


    pointer-events:none;


}



.slider-button span{


    direction:ltr;


    display:block;


}



/* Invisible Range */


.slider-control{


    position:absolute;


    inset:0;


    width:100%;


    height:100%;


    opacity:0;


    cursor:ew-resize;


    z-index:10;


    direction:ltr;


}



/* Labels */


/* Before label */

.before-after::before{


    position:absolute;

    top:20px;

    left:20px;

    background:#12394d;

    color:white;

    padding:8px 22px;

    border-radius:25px;

    font-size:15px;

    font-weight:600;

    z-index:6;

}



/* After container */

.after-container{

    position:absolute;

    top:0;

    left:0;

    height:100%;

    width:50%;

    overflow:hidden;

    z-index:2;

}

.before-container{

position:absolute;

top:0;

left:0;

width:100%;

height:100%;

z-index:1;

}



.before-label{

position:absolute;

top:20px;

right:20px;

background:#12394d;

color:white;

padding:8px 22px;

border-radius:25px;

font-size:15px;

font-weight:600;

}



.after-label{

position:absolute;

top:20px;

right:20px;

background:#4aad9f;

color:white;

padding:8px 22px;

border-radius:25px;

font-size:15px;

font-weight:600;

}

/* After label inside after image */

.after-container::after{

    content:"After";

    position:absolute;

    top:20px;

    right:20px;

    background:#4aad9f;

    color:white;

    padding:8px 22px;

    border-radius:25px;

    font-size:15px;

    font-weight:600;

    z-index:10;

}





/* Mobile */


@media(max-width:768px){


.before-after{


    height:350px;


}



.after-image{


    width:600px;


    height:350px;


}


.cases-section{


    padding:50px 20px;


}


}



/* ======================
 SERVICES
====================== */


.services-section{

padding:50px 15px;

background:#F8FAFC;

direction:inherit;

}



.section-title{

text-align:center;

margin-bottom:50px;

}



.section-title h2{

font-size:42px;

color:var(--dark);

}



.section-title p{

color:var(--secondary);

font-size:18px;

}



.services-grid{

direction:ltr;

max-width:1200px;

margin:auto;

display:grid;

grid-template-columns:
repeat(4,1fr);

gap:25px;


}



.service-card{

direction:rtl;

background:white;

padding:35px 25px;

border-radius:25px;

text-align:center;

box-shadow:

0 10px 30px rgba(18,57,77,.08);

transition:.3s;


}



.service-card:hover{


transform:translateY(-10px);


}



.service-icon{


width:70px;

height:70px;

margin:auto;

background:#E5F8F2;

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

font-size:35px;


}



.service-card h3{


color:var(--dark);

margin:20px 0;


}



.service-card p{


color:var(--secondary);

line-height:1.8;


}




@media(max-width:900px){


.services-grid{

grid-template-columns:1fr;

}


}


/* Floating WhatsApp */


.floating-whatsapp{


position:fixed;


bottom:25px;


right:25px;


width:65px;


height:65px;


background:#25D366;


border-radius:50%;


display:flex;


align-items:center;


justify-content:center;


text-decoration:none;


color:white;


font-size:32px;


z-index:9999;


box-shadow:

0 10px 25px rgba(0,0,0,.25);


animation:

whatsappPulse 2s infinite;


transition:.3s;


}




.floating-whatsapp:hover{


transform:scale(1.1);


}


.floating-whatsapp span{

font-size:34px;

display:flex;

align-items:center;

justify-content:center;

}



@keyframes whatsappPulse{


0%{


box-shadow:

0 0 0 0 rgba(37,211,102,.6);

}



70%{


box-shadow:

0 0 0 18px rgba(37,211,102,0);

}



100%{


box-shadow:

0 0 0 0 rgba(37,211,102,0);

}



}




/* RTL */

html[dir="rtl"] .floating-whatsapp{


right:25px;

left:auto;

}




html[dir="ltr"] .floating-whatsapp{


left:auto;

right:25px;

}

/* =====================================================
   FINAL MOBILE & TABLET RESPONSIVE PATCH
   Only layout changes - no PHP/JS logic modified
===================================================== */


/* prevent horizontal overflow */

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


/* Tablet */

@media (max-width:1024px){

    .navbar{
        padding:0 25px;
    }


    .nav-links{
        gap:18px;
    }


    .hero-container{
        width:92%;
    }


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


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


    .about-container{
        gap:35px;
    }


    .location-content{
        gap:30px;
    }

}


/* Mobile */

@media(max-width:900px){


    .navbar{
        height:75px;
        padding:0 18px;
        position:sticky;
    }


    .nav-logo img{
        height:55px;
    }


    .menu-toggle{
        display:block;
        order:3;
    }


    .nav-links{

        display:none;
        position:absolute;

        top:75px;
        left:0;

        width:100%;

        transform:none;

        background:#12394d;

        flex-direction:column;

        gap:0;

        padding:15px 0;

    }


    .nav-links.active{
        display:flex;
    }


    .nav-links a{

        width:100%;
        text-align:center;

        padding:15px;

        border-bottom:1px solid rgba(255,255,255,.15);

    }


    .nav-language{
        display:none;
    }



    /* HERO */

    .hero{
        min-height:auto;
        padding:45px 0;
    }


    .hero-container{

        width:100%;

        padding:0 20px;

        flex-direction:column-reverse;

    }


    .hero-content,
    .hero-image{

        width:100%;

        text-align:center;

    }


    .doctor-frame{

        width:100%;

        max-width:360px;

        margin:auto;

    }


    .doctor-frame img{

        width:100%;

        height:auto;

        object-fit:contain;

    }


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


    .hero-content h2{
        font-size:23px;
    }


    .hero-buttons{

        justify-content:center;

    }



    /* ABOUT */


    .about-container{

        flex-direction:column;

        padding:0 20px;

    }


    .about-image,
    .about-content{

        width:100%;

        text-align:center;

    }



    /* SERVICES */


    .services-grid{

        grid-template-columns:1fr;

        padding:0 15px;

    }


    .service-card{

        padding:25px 18px;

    }



    /* GALLERY CASE CAROUSEL */


    .fixed-gallery{

        height:330px;

        gap:10px;

        padding:0 10px;

    }


    .gallery-side{

        display:none;

    }


    .gallery-main{

        width:90%;

        height:280px;

    }




    /* LOCATION */


    .location-content{

        flex-direction:column;

        padding:0 20px;

    }


    .map,
    .contact-area{

        width:100%;

    }


    .map iframe{

        height:320px;

    }



    .contact-buttons{

        flex-direction:column;

    }


    .contact-btn{

        width:100%;

    }



    /* CASES */


    .cases-container{

        grid-template-columns:1fr;

        padding:0 15px;

    }


    .before-after{

        aspect-ratio:16/11;

    }



    /* FOOTER */


    .footer-container{

        grid-template-columns:1fr;

        text-align:center;

    }



}



/* Small phones */

@media(max-width:480px){


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


    .hero-content h2{
        font-size:20px;
    }


    .btn{

        width:100%;

    }


    .doctor-frame{

        max-width:300px;

    }


    .section-title h2{

        font-size:30px;

    }


    .floating-whatsapp{

        width:55px;

        height:55px;

        font-size:25px;

        bottom:15px;

        right:15px;

    }


}


/* ===============================
 FINAL RESPONSIVE FIX
 No HTML/PHP changes
=============================== */

*{
 box-sizing:border-box;
}

img{
 max-width:100%;
}


/* HERO FIX */

.hero{
 position:relative;
 overflow:hidden;
    min-height: calc(120vh - 140px);
}

.hero-container{
 min-height:inherit;
}

.about-section{
 position:relative;
 z-index:2;
 background:#fff;
}


/* TABLET */

@media(max-width:1024px){

.hero{
 min-height:auto;
 padding:70px 0;
}

.hero-container{
 width:90%;
 display:flex;
 flex-direction:column;
}

.hero-image,
.hero-content{
 width:100%;
}

.doctor-frame{
 margin:auto;
 max-width:370px;
}

.about-container{
 display:grid;
 grid-template-columns:1fr;
 gap:40px;
}

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

}


/* MOBILE */

@media(max-width:900px){

.navbar{
 height:75px;
 padding:0 20px;
 position:sticky;
 top:0;
}

.nav-logo img{
 height:55px;
}

.nav-links{
 display:none;
 position:absolute;
 top:75px;
 right:0;
 width:100%;
 background:#12394d;
 flex-direction:column;
 padding:25px;
 gap:20px;
}

.nav-links.active{
 display:flex;
}

.nav-language{
 margin-right:auto;
 margin-left: 15px;
}

.hero{
 padding:1235px 0 115px;
}

.hero-container{
 width:100%;
 padding:0 20px;
 flex-direction:column;
}

.hero-content{
 text-align:center;
 order:2;
}

.hero-image{
 order:1;
}

.hero-content h1{
 font-size:28px;
 line-height:1.5;
}

.hero-content h2{
 font-size:22px;
}

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

.about-section{
 padding:50px 20px;
}

.about-image img{
 height:auto;
 max-height:500px;
}

.about-content{
 text-align:center;
}

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

.fixed-gallery{
 width:100%;
 overflow:hidden;
}

.location-container{
 padding:0 20px;
}

.location-content{
 flex-direction:column;
}

.contact-buttons{
 flex-direction:column;
 width:100%;
}

.contact-btn{
 width:100%;
}

.footer-container{
 grid-template-columns:1fr;
 text-align:center;
}

}


/* SMALL PHONES */

@media(max-width:480px){

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

.hero-content h2{
 font-size:19px;
}

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

.doctor-frame{
 max-width:370px;
}

.nav-language a{
 padding:7px 12px;
 font-size:13px;
}

}
/* =================================
   SERVICES MOBILE 2 COLUMNS
================================= */


@media(max-width:768px){


.services-grid{

    display:grid;

    grid-template-columns:repeat(2, 1fr);

    gap:15px;

    padding:0 15px;

}



.service-card{

    padding:20px 12px;

    min-height:220px;

    text-align:center;

}



.service-card h3{

    font-size:16px;

    line-height:1.5;

}



.service-card p{

    font-size:13px;

    line-height:1.8;

}



}



/* Small phones */

@media(max-width:380px){


.services-grid{

    gap:10px;

    padding:0 10px;

}



.service-card{

    padding:15px 8px;

}



.service-card h3{

    font-size:14px;

}



.service-card p{

    font-size:12px;

}


}


/* ==========================
 MOBILE NAV ACTIONS
========================== */


.mobile-actions{

display:flex;

align-items:center;

gap:15px;

}



/* Language Button */

.nav-language a{


color:white;

border:1px solid var(--primary);

padding:8px 15px;

border-radius:25px;

font-size:14px;

font-weight:bold;

text-decoration:none;

}



.nav-language a:hover{

background:var(--primary);

}





/* Hamburger */


.menu-toggle{

cursor:pointer;

}



.menu-toggle span{

display:block;

width:28px;

height:3px;

background:white;

margin:5px 0;

border-radius:10px;

}




/* Desktop */

@media(min-width:901px){


.mobile-actions{

display:none;

}


}



/* Mobile */

@media(max-width:900px){


.navbar{

padding:0 15px;

}



.nav-language{

display:block;

}



.mobile-actions{

display:flex;

}



.nav-links{

display:none;

}


.nav-links.active{

display:flex;

}


}