/*==================================================
 YOUR DENTAL CLINIC
 Premium Dental Website
 style.css - Part 1
 Theme: Neon Yellow / Black / White
==================================================*/


/*=========================
 GOOGLE FONT
=========================*/

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');



/*=========================
 ROOT VARIABLES
=========================*/

:root{

    --primary:#FACC15;
    --secondary:#050505;
    --dark:#0A0A0A;
    --white:#FFFFFF;
    --light:#F8FAFC;

    --text:#1E293B;

    --gray:#64748B;

    --border:rgba(255,255,255,0.12);

    --shadow:
    0 20px 50px rgba(0,0,0,0.15);

    --glow:
    0 0 30px rgba(250,204,21,0.45);

    --transition:
    all .4s ease;

}





/*=========================
 RESET
=========================*/


*{

    margin:0;
    padding:0;
    box-sizing:border-box;

}


html{

    scroll-behavior:smooth;

}



body{

    font-family:'Poppins',sans-serif;

    background:
    var(--white);

    color:var(--text);

    overflow-x:hidden;

}



img{

    width:100%;

    display:block;

}



a{

    text-decoration:none;

    color:inherit;

}



ul{

    list-style:none;

}



button,
input,
textarea{

    font-family:inherit;

}





/*=========================
 COMMON
=========================*/


.container{

    width:90%;

    max-width:1200px;

    margin:auto;

}



.section{

    padding:100px 0;

}



.dark-section{

    background:
    var(--dark);

    color:white;

}



.section-header{

    text-align:center;

    max-width:700px;

    margin:auto;

    margin-bottom:60px;

}



.section-tag{

    display:inline-block;

    padding:8px 18px;

    background:rgba(250,204,21,.15);

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

    color:#000;

    border-radius:50px;

    font-size:14px;

    font-weight:600;

    margin-bottom:20px;

}



.dark-section .section-tag{

    color:var(--primary);

}



.section-header h2{

    font-size:42px;

    line-height:1.2;

    margin-bottom:15px;

    font-weight:700;

}



.section-header p{

    color:var(--gray);

    font-size:16px;

}








/*=========================
 BUTTONS
=========================*/


.btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:15px 32px;

    background:var(--primary);

    color:#000;

    border-radius:50px;

    font-weight:600;

    transition:var(--transition);

    box-shadow:var(--glow);

}



.btn:hover{

    transform:translateY(-5px);

    background:#fde047;

}



.btn-outline{

    display:inline-flex;

    padding:14px 30px;

    border-radius:50px;

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

    color:white;

    font-weight:600;

    transition:.4s;

}



.btn-outline:hover{

    background:var(--primary);

    color:black;

}







/*=========================
 HEADER
=========================*/


.header{

    position:fixed;

    top:0;

    left:0;

    width:100%;

    z-index:999;

    transition:.4s;

    background:rgb(255, 255, 255);

    backdrop-filter:blur(15px);

}



.header.scrolled{

    background:#000;

    box-shadow:0 10px 30px rgba(0,0,0,.3);

}





.navbar{

    height:90px;

    display:flex;

    align-items:center;

    justify-content:space-between;

}



.logo img{

    width:190px;

}





.mobile-call{
    display:none;
}

/* Mobile */
@media (max-width:768px){

.mobile-call{
    display:flex;
    width:42px;
    height:42px;
    border-radius:50%;
    background:#ffcc00;
    color:#000;
    align-items:center;
    justify-content:center;
    text-decoration:none;
    font-size:18px;
    margin-right:12px;
    transition:.3s;
    box-shadow:0 8px 20px rgba(255,204,0,.35);
}

.mobile-call:hover{
    transform:scale(1.05);
}

}



.nav-menu{

    display:flex;

    align-items:center;

    gap:35px;

}



.nav-menu a{

    color:white;

    font-size:15px;

    font-weight:500;

    position:relative;

}



.nav-menu a::after{

    content:"";

    position:absolute;

    bottom:-8px;

    left:0;

    width:0;

    height:2px;

    background:var(--primary);

    transition:.3s;

}



.nav-menu a:hover::after,
.nav-menu a.active::after{

    width:100%;

}





.appointment-btn{

    padding:12px 25px;

}






/* MOBILE MENU */


.hamburger{

    display:none;

    cursor:pointer;

}



.hamburger span{

    display:block;

    width:28px;

    height:3px;

    margin:5px;

    background:white;

}

@media (max-width:768px){

    .header .btn{
        display:none;
    }

}





@media (max-width:600px){

.hero-buttons{
    display: flex;
    flex-direction: column;
    align-items: center;   /* center */
    gap: 12px;
}

.hero-buttons .btn{
    width: 220px;
    max-width: 220px;
    padding: 14px 20px;
    font-size: 15px;
}

.hero-buttons .btn-outline{
    width: 190px;
    max-width: 190px;
    padding: 12px 20px;
    font-size: 15px;
}




}
/*=========================
 HERO
=========================*/


.hero{

    min-height:100vh;

    background:

    radial-gradient(circle at top right,
    rgba(250,204,21,.35),
    transparent 35%),

    linear-gradient(
    120deg,
    #000,
    #111
    );

    position:relative;

    display:flex;

    align-items:center;

    overflow:hidden;

}




.hero-container{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:60px;

    align-items:center;

    padding-top:100px;

}



.hero-content{

    color:white;

}



.hero-badge{

    display:inline-block;

    padding:10px 20px;

    background:rgba(250,204,21,.15);

    color:var(--primary);

    border-radius:50px;

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

    margin-bottom:25px;

}



.hero-content h1{

    font-size:70px;

    line-height:1.1;

    font-weight:800;

}



.hero-content h1 span{

    color:var(--primary);

}



.hero-content p{

    margin:25px 0;

    max-width:520px;

    color:#ddd;

    font-size:18px;

    line-height:1.8;

}



.hero-buttons{

    display:flex;

    gap:20px;

}



.patients{

    margin-top:40px;

    display:flex;

    align-items:center;

    gap:20px;

}



.avatars{

    display:flex;

}



.avatars img{

    width:45px;

    height:45px;

    border-radius:50%;

    border:3px solid black;

    margin-left:-12px;

}



.patients strong{

    color:var(--primary);

    font-size:22px;

}


/*=========================
 HERO IMAGE AREA
=========================*/


.hero-image{

    position:relative;

    animation:floatImage 5s ease-in-out infinite;

}



.hero-image img{

    width:100%;

    max-width:520px;

    height:620px;

    object-fit:cover;

    border-radius:40px;

    border:2px solid rgba(250,204,21,.4);

    box-shadow:

    0 30px 80px rgba(0,0,0,.6);

    position:relative;

    z-index:2;

}




.image-glow{

    position:absolute;

    width:350px;

    height:350px;

    background:var(--primary);

    filter:blur(120px);

    opacity:.35;

    right:0;

    top:100px;

}





.floating-card{

    position:absolute;

    bottom:50px;

    left:-40px;

    z-index:5;

    display:flex;

    align-items:center;

    gap:15px;

    padding:20px 25px;

    background:

    rgba(255,255,255,.12);

    backdrop-filter:blur(20px);

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

    border-radius:25px;

    color:white;

}



.floating-card .icon{

    width:55px;

    height:55px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:var(--primary);

    color:black;

    font-size:25px;

}



.floating-card h3{

    font-size:30px;

    color:var(--primary);

}



.floating-card p{

    font-size:14px;

    color:white;

}



@keyframes floatImage{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-20px);

    }

}








.patient-info{
    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:2px;          /* gap control */
}

.patient-info strong{
    margin:0;
    padding:0;
    line-height:1;
}

.patient-info p{
    margin:0;
    padding:0;
    line-height:1.2;
}








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


.about-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:70px;

    align-items:center;

}



.about-image{

    position:relative;

}



.about-image img{

    height:520px;

    object-fit:cover;

    border-radius:35px;

    box-shadow:var(--shadow);

}



.about-image::after{

    content:"";

    position:absolute;

    width:100px;

    height:100px;

    background:var(--primary);

    right:-30px;

    bottom:-30px;

    border-radius:30px;

    z-index:-1;

}





.about-content h2{

    font-size:45px;

    line-height:1.2;

    margin-bottom:20px;

}



.about-content p{

    color:var(--gray);

    line-height:1.8;

    margin-bottom:30px;

}




.about-box{

    display:grid;

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

    gap:20px;

    margin-bottom:35px;

}



.about-box div{

    padding:25px;

    background:white;

    border-radius:20px;

    box-shadow:0 10px 30px rgba(0,0,0,.08);

    text-align:center;

    border-bottom:4px solid var(--primary);

}



.about-box h3{

    font-size:32px;

    color:black;

}



.about-box p{

    margin:0;

    font-size:14px;

}








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


.services{

    position:relative;

}



.service-grid{

    display:grid;

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

    gap:25px;

}




.service-card{

    background:#111;

    border:1px solid rgba(250,204,21,.15);

    border-radius:30px;

    overflow:hidden;

    transition:.4s;

}



.service-card:hover{

    transform:translateY(-12px);

    border-color:var(--primary);

    box-shadow:var(--glow);

}



.service-card img{

    height:230px;

    object-fit:cover;

}



.service-card h3{

    padding:20px 20px 10px;

    color:white;

    font-size:22px;

}



.service-card p{

    padding:0 20px;

    color:#aaa;

    line-height:1.7;

}



.service-card a{

    display:inline-block;

    margin:20px;

    color:var(--primary);

    font-weight:600;

}




/*=====================================
WHY CHOOSE US
=====================================*/

.why{
    background:#fff;
    padding:100px 0;
}

.section-header.center{
    max-width:800px;
    margin:0 auto 60px;
    text-align:center;
}

.section-header.center h2{
    margin:18px 0;
}

.section-header.center p{
    color:#64748B;
    line-height:1.8;
    max-width:700px;
    margin:auto;
}


/*=========================
FEATURES
=========================*/

.why-features{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:25px;
    margin-bottom:80px;
}
.feature-box{

    background:#fff;

    padding:22px 18px;

    border-radius:22px;

    text-align:center;

    border:1px solid rgba(250,204,21,.25);

    box-shadow:0 10px 25px rgba(0,0,0,.08);

    transition:.35s;

}

.feature-box:hover{
    transform:translateY(-8px);
    box-shadow:0 20px 45px rgba(250,204,21,.18);
    border-color:#FACC15;
}
.feature-icon{
    width:45px;
    height:45px;

    margin:0 auto 18px;

    display:flex;
    align-items:center;
    justify-content:center;

    background:#FACC15;

    border-radius:14px;

    font-size:30px;

    line-height:1;


}


.section-header h2 span{

    color:#FACC15;

    position:relative;

}


.feature-box h3{
    font-size:21px;
    margin-bottom:12px;
    color:#111827;
}

.feature-box p{
    font-size:15px;
    color:#64748B;
    line-height:1.7;
}


/*=========================
RESULT HEADING
=========================*/

.result-heading{
    text-align:center;
    margin-bottom:45px;
}

.result-heading h2{
    margin:15px 0;
}

.result-heading p{
    max-width:650px;
    margin:auto;
    color:#64748B;
    line-height:1.8;
}


/*=========================
RESULT GRID
=========================*/

.result-slider-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:22px;
}

.comparison{
    position:relative;
    overflow:hidden;
    border-radius:22px;
    height:260px;
    box-shadow:0 15px 35px rgba(0,0,0,.10);
}

.comparison img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

.after-image{
    position:absolute;
    inset:0;
}

.before-wrapper{
    position:absolute;
    inset:0;
    width:50%;
    overflow:hidden;
}

.compare-range{
    position:absolute;
    left:50%;
    bottom:18px;
    transform:translateX(-50%);
    width:85%;
    accent-color:#FACC15;
    cursor:pointer;
}

.label{
    position:absolute;
    top:15px;
    padding:7px 15px;
    background:#FACC15;
    color:#111;
    border-radius:30px;
    font-size:13px;
    font-weight:600;
}

.label.before{
    left:15px;
}

.label.after{
    right:15px;
}


/*=========================
TABLET
=========================*/

@media(max-width:992px){

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

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

}


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

@media(max-width:768px){

.why{
    padding:80px 0;
}

.why-features{
    grid-template-columns:1fr;
    gap:20px;
    margin-bottom:60px;
}

.result-slider-grid{
    grid-template-columns:1fr;
}

.comparison{
    height:240px;
}

.feature-box{
    text-align:left;
}

.feature-icon{
    margin:0 0 18px;
}

}
/*=========================
 DOCTOR SECTION
=========================*/


.doctor-grid{

    display:grid;

    grid-template-columns:450px 1fr;

    gap:70px;

    align-items:center;

}



.doctor-image img{

    height:520px;

    object-fit:cover;

    border-radius:40px;

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

}



.doctor-content h2{

    font-size:50px;

    margin:15px 0 5px;

}



.doctor-content h4{

    color:var(--primary);

    font-size:20px;

    margin-bottom:20px;

}



.doctor-content p{

    color:#ccc;

    line-height:1.8;

    margin-bottom:35px;

}




.doctor-stats{

    display:flex;

    gap:20px;

}



.doctor-stats div{

    background:#111;

    padding:25px;

    border-radius:25px;

    border:1px solid rgba(250,204,21,.2);

}



.doctor-stats strong{

    display:block;

    color:var(--primary);

    font-size:32px;

}



.doctor-stats p{

    margin:0;

    font-size:14px;

}









/*=========================
 COUNTER SECTION
=========================*/


.counter-section{

    background:

    linear-gradient(
    135deg,
    #000,
    #161616
    );

    padding:80px 0;

}



.counter-grid{

    display:grid;

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

    gap:30px;

}



.counter-box{

    text-align:center;

    padding:35px 20px;

    background:

    rgba(255,255,255,.05);

    backdrop-filter:blur(15px);

    border-radius:30px;

    border:1px solid rgba(250,204,21,.2);

}



.counter-box h2{

    color:var(--primary);

    font-size:55px;

}



.counter-box p{

    color:white;

    margin-top:10px;

}

















/*=========================
 MOBILE WIDTH FIX
=========================*/


html,
body{

    width:100%;

    max-width:100%;

    overflow-x:hidden;

}



*{

    max-width:100%;

}





@media(max-width:600px){


.container{

    width:100%;

    padding-left:20px;

    padding-right:20px;

}












.floating-card{

    left:10px;

}



.about-image::after{

    right:0;

}



.cta-box{

    margin-left:0;

    margin-right:0;

}



}





/*=====================================
TESTIMONIAL SECTION
======================================*/

.testimonials{
    padding:100px 0;
    background:#fff;
    overflow:hidden;
}

.testimonial-wrapper{
    width:100%;
    overflow:hidden;
    position:relative;
}

.testimonial-track{
    display:flex;
    gap:30px;
    transition:transform .7s ease;
    will-change:transform;
}

.testimonial-card{

    flex:0 0 calc((100% - 60px)/3);

    background:#fff;

    border-radius:28px;

    padding:32px;

    border:1px solid rgba(250,204,21,.25);

    box-shadow:0 20px 50px rgba(0,0,0,.08);

    position:relative;

    transition:.35s;

    overflow:hidden;

    box-sizing:border-box;

}

/* Yellow Top Border */

.testimonial-card::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:5px;

    background:#FACC15;

}

.testimonial-card:hover{

    transform:translateY(-10px);

    box-shadow:0 25px 60px rgba(250,204,21,.18);

}

/*=========================
RATING
=========================*/

.rating{

    color:#FACC15;

    font-size:24px;

    letter-spacing:3px;

    margin-bottom:18px;

}

/*=========================
TEXT
=========================*/

.testimonial-card p{

    font-size:15px;

    line-height:1.9;

    color:#475569;

    margin-bottom:28px;

}

/*=========================
PATIENT
=========================*/

.patient{

    display:flex;

    align-items:center;

    gap:15px;

}

.patient img{

    width:60px;

    height:60px;

    min-width:60px;

    border-radius:50%;

    object-fit:cover;

    border:3px solid #FACC15;

}

.patient h4{

    font-size:17px;

    color:#111827;

    margin-bottom:5px;

}

.patient span{

    color:#64748B;

    font-size:13px;

}

/*=========================
DOTS
=========================*/

.testimonial-dots{

    display:flex;

    justify-content:center;

    gap:10px;

    margin-top:40px;

}

.dot{

    width:12px;

    height:12px;

    border-radius:50%;

    background:#ddd;

    cursor:pointer;

    transition:.3s;

}

.dot.active{

    width:35px;

    border-radius:50px;

    background:#FACC15;

}

/*=========================
TABLET
=========================*/

@media(max-width:992px){

.testimonial-track{

    gap:20px;

}

.testimonial-card{

    flex:0 0 calc((100% - 20px)/2);

    padding:28px;

}

}

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

@media(max-width:768px){

.testimonials{

    padding:80px 0;

}

.testimonial-track{

    gap:0;

}

.testimonial-card{

    flex:0 0 100%;

    min-width:100%;

    margin:0;

    padding:25px;

}

.rating{

    font-size:20px;

}

.testimonial-card p{

    font-size:14px;

}

.patient img{

    width:52px;

    height:52px;

    min-width:52px;

}

}

/*=========================
EXTRA FIX
=========================*/

*{
    box-sizing:border-box;
}

html,
body{
    overflow-x:hidden;
}




/*=========================
 GALLERY
=========================*/


.gallery-grid{

    display:grid;

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

    gap:25px;

}



.gallery-item{

    overflow:hidden;

    border-radius:30px;

    cursor:pointer;

    position:relative;

}



.gallery-item::after{

    content:"View";

    position:absolute;

    inset:0;

    background:rgba(250,204,21,.8);

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:22px;

    font-weight:700;

    opacity:0;

    transition:.4s;

}



.gallery-item:hover::after{

    opacity:1;

}



.gallery-item img{

    height:300px;

    object-fit:cover;

    transition:.5s;

}



.gallery-item:hover img{

    transform:scale(1.1);

}

































/*==================================================
 RESPONSIVE DESIGN
 DESKTOP / TABLET / MOBILE
==================================================*/



/*=========================
 LARGE TABLET
=========================*/

@media(max-width:1100px){



.container{

    width:92%;

}



/* Navbar */


.nav-menu{

    gap:20px;

}



.logo img{

    width:110px;
    

}




.hero-container{

    gap:40px;

}



.hero-content h1{

    font-size:55px;

}



.hero-image img{

    height:520px;

}




.service-grid{

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

}



.why-grid{

    grid-template-columns:1fr;

}



.before-after-area{

    display:grid;

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

    gap:20px;

}



.comparison{

    height:300px;

}




.doctor-grid{

    grid-template-columns:350px 1fr;

}



.doctor-content h2{

    font-size:40px;

}



.counter-grid{

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

}







}









/*=========================
 TABLET
=========================*/


@media(max-width:850px){



.section{

    padding:70px 0;

}




/* HEADER */


.header{

    background:#000;

}



.navbar{

    height:80px;

}



.hamburger{

    display:block;

}



.nav-menu{

    position:absolute;

    top:80px;

    left:0;

    width:100%;

    background:#000;

    flex-direction:column;

    padding:30px;

    gap:25px;

    transform:translateY(-150%);

    transition:.4s;

}



.nav-menu.active{

    transform:translateY(0);

}



.appointment-btn{

    display:none;

}





/* HERO */


.hero{

    padding-bottom:60px;

}



.hero-container{

    grid-template-columns:1fr;

    text-align:center;

}



.hero-content p{

    margin-left:auto;

    margin-right:auto;

}



.hero-buttons{

    justify-content:center;

}






.patient-info{
    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:2px;          /* gap control */
}

.patient-info strong{
    margin:0;
    padding:0;
    line-height:1;
}

.patient-info p{
    margin:0;
    padding:0;
    line-height:1.2;
}






.hero-image{

    margin-top:40px;

}



.hero-image img{

    height:500px;

}



.floating-card{

    left:20px;

}





/* ABOUT */


.about-grid{

    grid-template-columns:1fr;

}



.about-image img{

    height:450px;

}



.about-content{

    text-align:center;

}



.about-box{

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

}





/* SERVICES */


.service-grid{

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

}






/* DOCTOR */


.doctor-grid{

    grid-template-columns:1fr;

    text-align:center;

}



.doctor-image img{

    height:450px;

}



.doctor-stats{

    justify-content:center;

}





/* CTA */


.cta-box{

    flex-direction:column;

    text-align:center;

}



.cta-box h2{

    font-size:35px;

}



}









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


@media(max-width:600px){



.container{

    width:92%;

}



.section-header h2{

    font-size:30px;

}





/* HERO */


.hero-container{

    padding-top:120px;

}



.hero-content h1{

    font-size:40px;

}



.hero-content p{

    font-size:15px;

}



.hero-buttons{

    flex-direction:column;

}



.btn,
.btn-outline{

    width:100%;

}



.hero-image img{

    height:400px;

    border-radius:30px;

}



.floating-card{

    bottom:20px;

    padding:15px;

}



.floating-card h3{

    font-size:22px;

}





/* ABOUT */


.about-image img{

    height:350px;

}



.about-content h2{

    font-size:32px;

}



.about-box{

    grid-template-columns:1fr;

}




/* SERVICES */


.service-grid{

    grid-template-columns:1fr;

}



.service-card img{

    height:220px;

}






/* BEFORE AFTER */


.before-after-area{

    grid-template-columns:1fr;

}



.comparison{

    height:260px;

}






/* DOCTOR */


.doctor-image img{

    height:380px;

}



.doctor-content h2{

    font-size:32px;

}



.doctor-stats{

    flex-direction:column;

}



.doctor-stats div{

    width:100%;

}






/* COUNTER */


.counter-grid{

    grid-template-columns:1fr;

}



.counter-box h2{

    font-size:40px;

}










/* GALLERY */


.gallery-grid{

    grid-template-columns:1fr;

}



.gallery-item img{

    height:250px;

}

}




.lightbox{
    display:none;
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.9);
    justify-content:center;
    align-items:center;
    z-index:9999;
}

.lightbox.active{
    display:flex;
}
/*=====================================
CONTACT SECTION
======================================*/

.contact{

    padding:110px 0;

    background:#fff;

    position:relative;

    overflow:hidden;

}

.contact::before{

    content:"";

    position:absolute;

    width:420px;

    height:420px;

    background:rgba(250,204,21,.12);

    border-radius:50%;

    top:-180px;

    right:-180px;

    filter:blur(80px);

}

.contact-wrapper{

    display:grid;

    grid-template-columns:480px 1fr;

    gap:50px;

    align-items:stretch;

    margin-top:60px;

}



/*=========================
FORM
=========================*/

.contact-form-box{

    background:#fff;

    border-radius:30px;

    padding:35px;

    border:1px solid rgba(250,204,21,.25);

    box-shadow:0 25px 60px rgba(0,0,0,.08);

}



.contact-form-box form{

    display:flex;

    flex-direction:column;

    gap:18px;

}



.input-group{

    width:100%;

}



.contact-form-box input,

.contact-form-box select,

.contact-form-box textarea{

    width:100%;

    padding:17px 18px;

    border:2px solid #ECECEC;

    border-radius:16px;

    background:#fff;

    font-size:15px;

    font-family:inherit;

    outline:none;

    transition:.35s;

}



.contact-form-box textarea{

    resize:none;

}



.contact-form-box input:focus,

.contact-form-box select:focus,

.contact-form-box textarea:focus{

    border-color:#FACC15;

    box-shadow:0 0 0 4px rgba(250,204,21,.15);

}



.contact-form-box button{

    width:100%;

    border:none;

    cursor:pointer;

    margin-top:8px;

}



/*=========================
MAP
=========================*/

.contact-map{

    overflow:hidden;

    border-radius:30px;

    border:4px solid #FACC15;

    box-shadow:0 25px 60px rgba(0,0,0,.12);

    min-height:100%;

}



.contact-map iframe{

    width:100%;

    height:100%;

    min-height:620px;

    border:none;

    display:block;

}



/*=========================
RESPONSIVE
=========================*/

@media(max-width:1100px){

.contact-wrapper{

    grid-template-columns:1fr;

}

.contact-map iframe{

    min-height:450px;

}

}



@media(max-width:768px){

.contact{

    padding:80px 0;

}

.contact-form-box{

    padding:25px;

    border-radius:22px;

}

.contact-map{

    border-radius:22px;

}

.contact-map iframe{

    min-height:320px;

}

}



@media(max-width:480px){

.contact-form-box{

    padding:20px;

}

.contact-form-box input,

.contact-form-box select,

.contact-form-box textarea{

    padding:15px;

    font-size:14px;

}

.contact-map iframe{

    min-height:280px;

}

}







/*=====================================
FOOTER
======================================*/

.footer{

    background:#050505;

    color:#fff;

    padding:90px 0 0;

    position:relative;

    overflow:hidden;

}

.footer::before{

    content:"";

    position:absolute;

    width:420px;
    height:420px;

    background:rgba(250,204,21,.08);

    border-radius:50%;

    top:-180px;
    right:-150px;

    filter:blur(80px);

}

/*=========================
GRID
=========================*/

.footer-grid{

    display:grid;

    grid-template-columns:2fr 1fr 1fr 1.3fr;

    gap:60px;

    align-items:flex-start;

}

/*=========================
LOGO
=========================*/

.footer-brand img{

    width:170px;

    margin-bottom:25px;

}

.footer-brand p{

    color:#B8B8B8;

    line-height:1.9;

    margin-bottom:30px;

    max-width:330px;

}

/*=========================
SOCIAL
=========================*/

.social{

    display:flex;

    gap:14px;

    flex-wrap:wrap;

}

.social a{

    width:48px;

    height:48px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    background:#111;

    border:1px solid #222;

    color:#fff;

    text-decoration:none;

    transition:.35s;

    font-size:14px;

}

.social a:hover{

    background:#FACC15;

    color:#000;

    transform:translateY(-6px);

    box-shadow:0 10px 30px rgba(250,204,21,.35);

}

/*=========================
HEADING
=========================*/

.footer h3{

    color:#FACC15;

    font-size:24px;

    margin-bottom:28px;

}

/*=========================
LINKS
=========================*/

.footer-links{

    display:flex;

    flex-direction:column;

}

.footer-links a{

    color:#D9D9D9;

    text-decoration:none;

    margin-bottom:16px;

    transition:.3s;

}

.footer-links a:hover{

    color:#FACC15;

    transform:translateX(8px);

}

/*=========================
CONTACT
=========================*/

.footer-contact p{

    color:#D9D9D9;

    margin-bottom:18px;

    line-height:1.8;

}


/*=========================
BOTTOM
=========================*/

.footer-bottom{

    margin-top:70px;

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

    padding:25px 0;

    text-align:center;

}

.footer-bottom p{

    color:#AFAFAF;

    font-size:15px;

}

/*=========================
TABLET
=========================*/

@media(max-width:992px){

.footer-grid{

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

    gap:45px;

}

}

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

@media(max-width:768px){

.footer{

    padding-top:70px;

}

.footer-grid{

    grid-template-columns:1fr;

    text-align:center;

    gap:45px;

}

.footer-brand{

    display:flex;

    flex-direction:column;

    align-items:center;

}

.footer-brand p{

    max-width:100%;

}

.social{

    justify-content:center;

}

.footer-links{

    align-items:center;

}

.footer-contact{

    text-align:center;

}

}

@media(max-width:480px){

.footer h3{

    font-size:21px;

}

.footer-brand img{

    width:140px;

}

.footer-bottom p{

    font-size:14px;

}

}



/* WhatsApp Floating Button */

.whatsapp-btn{
    position:fixed;
    right:20px;
    bottom:20px;
    width:60px;
    height:60px;
    background:#25D366;
    color:#fff;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:34px;
    text-decoration:none;
    box-shadow:0 10px 25px rgba(37,211,102,.4);
    z-index:9999;
    animation:whatsappPulse 2s infinite;
    transition:.3s;
}

.whatsapp-btn:hover{
    transform:scale(1.1);
    background:#1ebe5d;
}

@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);}
}

@media(max-width:600px){
    .whatsapp-btn{
        width:55px;
        height:55px;
        font-size:30px;
        right:15px;
        bottom:15px;
    }
}