/* ===========================
GOOGLE FONTS & RESET
=========================== */

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

*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:'Poppins',sans-serif;
}
/* ===========================
   FIXED NAVBAR
   =========================== */

.site-header{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 85px;
    background: #ffffff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 8%;
    z-index: 9999;
    box-shadow: 0 5px 20px rgba(0,0,0,0.08);
    transition: all .3s ease;
}

.site-header.sticky{
    height: 75px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.12);
}

.logo a{
    font-size: 30px;
    font-weight: 700;
    color: #0f172a;
}

.logo span{
    color: #2563eb;
}

#nav ul{
    display: flex;
    gap: 35px;
}

#nav ul li{
    list-style: none;
}

#nav ul li a{
    color: #0f172a;
    font-weight: 500;
    transition: .3s;
}

#nav ul li a:hover{
    color: #2563eb;
}

.menu-btn{
    display: none;
    font-size: 28px;
    cursor: pointer;
}


html{
scroll-behavior:smooth;
}


.quote-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:14px 30px;
    background:rgba(255,255,255,.15);
    backdrop-filter:blur(10px);
    color:#0f172a;
    border:1px solid rgba(0,0,0,.15);
    border-radius:50px;
    font-weight:600;
    transition:.35s ease;
}

.quote-btn:hover{
    background:#2563eb;
    color:#fff;
    transform:translateY(-3px);
} 

#nav ul li a.active{
    color: #d4af37;
    font-weight: 600;
}

nav ul li a{
    position: relative;
    display: inline-block;
    padding-bottom: 8px;
}





#nav ul li a.active::after{
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: -2px;
    width: 30px;
    height: 3px;
    background: #d4af37;
    border-radius: 50px;
} 

/*------------------------------------------------------------------------*/

body{
    
padding-top: 55px;
background:#f8fafc;
color:#0f172a;
overflow-x:hidden;
line-height:1.7;
}

img{
max-width:100%;
display:block;
}

a{
text-decoration:none;
}

ul{
list-style:none;
}

.container{
width:90%;
max-width:1200px;
margin:auto;
}

.section-padding{
padding:100px 8%;
}


/* ===========================
COLORS
=========================== */

:root{
--primary:  #2563eb;
--secondary:#3b82f6;
--light:#f8fafc;
--dark:#0f172a;
--text:#64748b;
--white:#ffffff;
--shadow:0 10px 30px rgba(0,0,0,0.08);
--radius:20px;
} 

/* ===========================
PROGRESS BAR
=========================== */

#progress-bar{
position:fixed;
top:0;
left:0;
width:0%;
height:5px;
background:var(--primary);
z-index:9999;
}

/* ===========================
HEADER
=========================== */
/* 
header{
position:fixed;
top:0;
left:0;
width:100%;
padding:25px 8%;
display:flex;
justify-content:space-between;
align-items:center;
z-index:999;
transition:.4s;
}

header.sticky{
background:#fff;
box-shadow:var(--shadow);
padding:18px 8%;
}

.logo{
font-size:30px;
font-weight:700;
color:#fff;
}

header.sticky .logo{
color:var(--dark);
}

.logo span{
color:var(--primary);
}

nav ul{
display:flex;
gap:35px;
}

nav ul li a{
color:#fff;
font-weight:500;
transition:.3s;
}

header.sticky nav ul li a{
color:var(--dark);
}

nav ul li a:hover,
nav ul li a.active{
color:var(--primary);
}

.menu-btn{
display:none;
font-size:30px;
cursor:pointer;
} */

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

.btn{
display:inline-block;
padding:15px 35px;
background:var(--primary);
color:#fff;
border-radius:50px;
transition:.4s;
font-weight:500;
box-shadow:0 10px 20px rgba(37,99,235,.2);
}

.btn:hover{
transform:translateY(-5px);
background:var(--secondary);
}

.btn-outline{
background:transparent;
border:2px solid #fff;
}

.btn-outline:hover{
background:#fff;
color:var(--primary);
}

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

.hero{
height:100vh;

position:relative;
overflow:hidden;
}

.slide{
position:absolute;
width:100%;
height:100%;
top:0;
left:0;
background-size:cover;
background-position:center;
opacity:0;
transition:1.2s;
}

.slide.active{
opacity:1;
}

.slide::before{
content:"";
position:absolute;
width:100%;
height:100%;
background:rgba(0,0,0,.50);
}

.hero-content{
position:absolute;
top:50%;
left:10%;
transform:translateY(-50%);
color:#fff;
z-index:2;
max-width:700px;
}

.hero-content span{

color:#60a5fa;
font-size:20px;
font-weight:500;
}

.hero-content h1{
font-size:65px;
line-height:1.2;
margin:20px 0;
}

.hero-content p{
font-size:20px;
margin-bottom:40px;
color:#e2e8f0;
}

.hero-buttons{
display:flex;
gap:20px;
}

/* ===========================
SECTION TITLE
=========================== */

.section-title{
text-align:center;
margin-bottom:70px;
}

.section-title span{
color:var(--primary);
font-size:18px;
font-weight:600;
}

.section-title h2{
font-size:45px;
margin-top:15px;
}

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

.services{
background:#fff;
position: relative;
    padding: 100px 8%;
    overflow: hidden;

background:
        /* linear-gradient(
            rgba(15,23,42,.88),
            rgba(15,23,42,.88)
        ), */
        url("../images/services-bg.webp");

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}
/* Service Section Subtitle */

.section-title h4{

    max-width:760px;

    margin:20px auto 0;

    font-size:18px;

    font-weight:400;

    line-height:1.8;

    color:#64748b;

    text-align:center;

    letter-spacing:.3px;

}

.service-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:30px;
}

.service-card{
background:#fff;
padding:45px 30px;
text-align:center;
border-radius:25px;
box-shadow:var(--shadow);
transition:.5s;
}

.service-card:hover{
transform:translateY(-15px);
}

.service-card i{
width:90px;
height:90px;
background:#eff6ff;
color:var(--primary);
line-height:90px;
border-radius:50%;
font-size:40px;
margin-bottom:25px;
}

.service-card h3{
margin-bottom:15px;
font-size:24px;
}

.service-card p{
color:var(--text);
}



/* ---------------------------------------*/

/* two added service */

.service-card p{
    color: var(--text);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: all .3s ease;
}

.service-card.active p{
    display: block;
}
.read-more{
    display:inline-block;
    margin-top:15px;
    color:var(--primary);
    font-weight:600;
    cursor:pointer;
    transition:.3s;
}

.read-more:hover{
    color:#d4af37;
}
/* ===========================
WHY CHOOSE US
=========================== */

.why-us{
padding:100px 8%;
background:#f8fafc;
}

.why-us .container{
display:grid;
grid-template-columns:1fr 1fr;
gap:70px;
align-items:center;
}

.why-image img{
border-radius:30px;
box-shadow:var(--shadow);
display: block;
transform: translateY(-80px);
}

.why-content span{
color:var(--primary);
font-weight:600;
}

.why-content h2{
font-size:45px;
margin:20px 0;
}

.why-content p{
color:var(--text);
margin-bottom:30px;
}

.why-content ul li{
margin-bottom:20px;
font-size:18px;
}

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

.counter-section{
background:linear-gradient(
135deg,
#2563eb,
#3b82f6
);
color:#fff;
padding:100px 8%;
display:grid;
grid-template-columns:repeat(4,1fr);
gap:30px;
text-align:center;
}

.counter-box{
background:rgba(255,255,255,.12);
backdrop-filter:blur(10px);
border-radius:20px;
padding:40px;
}

.counter-box h2{
font-size:55px;
margin-bottom:10px;
}

/* ===========================
PORTFOLIO SECTION
=========================== */

/*=====================================
PORTFOLIO SECTION
=====================================*/

.portfolio{
    padding:100px 8%;
    background:#f8fafc;
}

/*------------------------------
Portfolio Filter
------------------------------*/

.portfolio-filter{
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    gap:15px;
    margin:50px 0;
}

.filter-btn{

    padding:12px 28px;

    border:none;

    border-radius:50px;

    background:#fff;

    color:#334155;

    font-size:15px;

    font-weight:600;

    cursor:pointer;

    transition:.35s cubic-bezier(.22,.61,.36,1);

    box-shadow:0 8px 25px rgba(0,0,0,.06);
}

.filter-btn:hover,
.filter-btn.active{

    background:var(--primary);

    color:#fff;

    transform:translateY(-2px);
}

/*------------------------------
Portfolio Grid
------------------------------*/

.portfolio-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:28px;
    margin: 0 -15px;

}

/*------------------------------
Portfolio Card
------------------------------*/

.portfolio-card{

    position:relative;
    margin: 15px;

    overflow:hidden;

    border-radius:22px;

    background:#fff;
    border:1px solid rgba(255,255,255,.18);

    box-shadow:0 15px 40px rgba(15,23,42,.08);

    cursor:pointer;

    transition:
        transform .45s cubic-bezier(.22,.61,.36,1),
        box-shadow .45s cubic-bezier(.22,.61,.36,1);

    will-change:transform;
}

.portfolio-card:hover{

    transform:translateY(-8px);

    box-shadow:0 25px 55px rgba(15,23,42,.18);
}

/*------------------------------
Image
------------------------------*/

.portfolio-card img{

    width:100%;

    height:280px;
     border-radius:22px;

    object-fit:cover;

    display:block;

    transition:
        transform .8s cubic-bezier(.22,.61,.36,1),
        filter .8s ease;
}

.portfolio-card:hover img{

    transform:scale(1.12);

    filter:brightness(.75);
}

/*------------------------------
Overlay
------------------------------*/

.portfolio-overlay{

    position:absolute;

    inset:0;

    background:
    linear-gradient(
        to top,
        rgba(15,23,42,.88),
        rgba(15,23,42,.15)
    );

    display:flex;

    align-items:flex-end;

    padding:30px;

    opacity:0;

    transition:
        opacity .45s cubic-bezier(.22,.61,.36,1);
}

.portfolio-card:hover .portfolio-overlay{

    opacity:1;
}

/*------------------------------
Content
------------------------------*/

.portfolio-content{

    width:100%;

    transform:translateY(25px);

    transition:
        transform .45s cubic-bezier(.22,.61,.36,1);
}

.portfolio-card:hover .portfolio-content{

    transform:translateY(0);
}

.portfolio-content span{

    display:block;

    color:rgba(255,255,255,.75);

    font-size:12px;

    letter-spacing:2px;

    text-transform:uppercase;

    margin-bottom:10px;
}

.portfolio-content h3{

    color:#fff;

    font-size:24px;

    line-height:1.35;

    margin-bottom:22px;
}

/*------------------------------
Icon
------------------------------*/

.portfolio-icon{

    width:56px;

    height:56px;

    border-radius:50%;

    background:#fff;

    color:var(--primary);

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:18px;

    text-decoration:none;

    transition:
        transform .35s ease,
        background .35s ease,
        color .35s ease;
}

.portfolio-icon:hover{

    transform:rotate(15deg) scale(1.12);

    background:var(--primary);

    color:#fff;
}

/*------------------------------
Responsive
------------------------------*/

@media(max-width:992px){

.portfolio-grid{

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

}

}

@media(max-width:768px){

.portfolio-grid{

grid-template-columns:1fr;

}

.portfolio-filter{

justify-content:flex-start;

overflow-x:auto;

padding-bottom:10px;

}

}

/* LIGHTBOX
==========================*/

.lightbox{

    position:fixed;

    inset:0;

    background:rgba(0,0,0,.92);

    display:flex;

    justify-content:center;

    align-items:center;

    opacity:0;

    visibility:hidden;

    transition:.4s ease;

    z-index:99999;

}

.lightbox.active{

    opacity:1;

    visibility:visible;

}

.lightbox-image{

    max-width:90%;

    max-height:85vh;

    border-radius:12px;

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

    animation:zoomIn .35s ease;

}

@keyframes zoomIn{

from{

transform:scale(.8);

opacity:0;

}

to{

transform:scale(1);

opacity:1;

}

}

.lightbox-close{

    position:absolute;

    top:25px;

    right:35px;

    color:#fff;

    font-size:45px;

    cursor:pointer;

}

.lightbox-prev,
.lightbox-next{

    position:absolute;

    top:50%;

    transform:translateY(-50%);

    width:60px;

    height:60px;

    border:none;

    border-radius:50%;

    background:#ffffff20;

    color:#fff;

    cursor:pointer;

    font-size:22px;

    backdrop-filter:blur(8px);

    transition:.3s;

}

.lightbox-prev:hover,
.lightbox-next:hover{

    background:var(--primary);

}

.lightbox-prev{

    left:40px;

}

.lightbox-next{

    right:40px;

}

/* .portfolio-overlay{

    pointer-events:none;

}

.portfolio-icon{

    pointer-events:auto;

} */

.portfolio-card{
    cursor:pointer;
}

.lightbox-counter{

position:absolute;

bottom:35px;

left:50%;

transform:translateX(-50%);

color:#fff;

font-size:18px;

font-weight:600;

letter-spacing:1px;

}

body.no-scroll{
    overflow: hidden;
   
}


/* ===========================
BEFORE AFTER SECTION
=========================== */

.before-after{
padding:100px 8%;
background:#f8fafc;
}

.before-grid{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:40px;
}

.image-box{
overflow:hidden;
border-radius:25px;
box-shadow:var(--shadow);
position:relative;
}

.image-box img{
width:100%;
height:500px;
object-fit:cover;
}

.image-box h3{
position:absolute;
left:30px;
bottom:30px;
background:var(--primary);
color:#fff;
padding:10px 25px;
border-radius:50px;
}




/* ==========================================
TESTIMONIAL SECTION
========================================== */
.testimonial-section{
    overflow: hidden;
}

.testimonials{
padding:100px 8%;
background:#ffffff;
}

.testimonial-slider{
max-width:900px;
margin:auto;
position:relative;
}

.testimonial{
background:#ffffff;
box-shadow:0 15px 40px rgba(0,0,0,0.08);
border-radius:25px;
padding:50px;
text-align:center;
display:none;
transition:0.5s;
}

.testimonial.active{
display:block;
animation:fadeIn 1s ease;
}

.testimonial p{
font-size:22px;
line-height:1.8;
color:#475569;
margin-bottom:30px;
font-style:italic;
}

.testimonial h4{
color:#2563eb;
font-size:20px;
}

/* ==========================================
CTA SECTION
========================================== */

.cta{
padding:100px 8%;
text-align:center;
background:linear-gradient(
135deg,
#2563eb,
#3b82f6
);
color:#ffffff;
}

.cta h2{
font-size:50px;
margin-bottom:30px;
line-height:1.3;
}

.cta .btn{
background:#ffffff;
color:#2563eb;
}

.cta .btn:hover{
    background: #f1f5f9;
}

/* ==========================================
BLOG SECTION
========================================== */

.blog{
background:#f8fafc;
}

.blog-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:35px;
}

.blog-card{
background:#ffffff;
border-radius:25px;
overflow:hidden;
box-shadow:0 15px 40px rgba(0,0,0,0.08);
transition:0.5s;
}

.blog-card:hover{
transform:translateY(-15px);
}

.blog-card img{
width:100%;
height:260px;
object-fit:cover;
}

.blog-card h3{
padding:30px;
font-size:24px;
line-height:1.5;
}

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

footer{
background:#0f172a;
color:#ffffff;
padding-top:90px;
}

.footer-content{
width:90%;
max-width:1200px;
margin:auto;
display:grid;
grid-template-columns:2fr 1fr 1fr;
gap:60px;
padding-bottom:60px;
}

.footer-content h3{
font-size:32px;
margin-bottom:20px;
}

.footer-content h4{
margin-bottom:25px;
font-size:22px;
}

.footer-content p{
color:#cbd5e1;
margin-bottom:15px;
}

.footer-content a{
display:block;
color:#cbd5e1;
margin-bottom:15px;
transition:0.4s;
}

.footer-content a:hover{
color:#60a5fa;
padding-left:8px;
}

.copyright{
text-align:center;
padding:25px;
border-top:1px solid rgba(255,255,255,0.1);
color:#94a3b8;
}


/* ===========================
FLOATING SOCIAL ICONS
=========================== */
.social-floating{

    position: fixed;

    left: 20px;

    top: 50%;

    transform: translateY(-50%);

    display: flex;

    flex-direction: column;

    gap: 15px;

    z-index: 9999;

}

.social-floating a{

    width: 52px;

    height: 52px;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    color: #fff;

    text-decoration: none;

    font-size: 22px;

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

    transition: .35s ease;

}

.social-floating a:hover{

    transform: scale(1.15) translateX(6px);

}

.facebook{

    background:#1877F2;

}

.instagram{

    background:linear-gradient(
        45deg,
        #f58529,
        #dd2a7b,
        #8134af,
        #515bd4
    );

}

.youtube{

    background:#FF0000;

} 

/* ==========================================
APPOINTMENT POPUP
========================================== */

.popup{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.75);
display:none;
justify-content:center;
align-items:center;
z-index:9999;
}

.popup.active{
display:flex;
}

.popup-content{
background:#ffffff;
width:90%;
max-width:500px;
padding:50px;
border-radius:30px;
position:relative;
animation:popupScale .4s ease;
}

.popup-content h2{
text-align:center;
margin-bottom:30px;
}

.popup-content form{
display:flex;
flex-direction:column;
gap:20px;
}

.popup-content input,
.popup-content textarea{
width:100%;
padding:16px;
border:1px solid #dbe4ee;
border-radius:12px;
outline:none;
font-size:16px;
}

.popup-content button{
padding:16px;
border:none;
background:#2563eb;
color:#ffffff;
border-radius:50px;
cursor:pointer;
font-size:17px;
}

#close-popup{
position:absolute;
top:20px;
right:25px;
font-size:35px;
cursor:pointer;
color:#0f172a;
}

/* ==========================================
WHATSAPP BUTTON
========================================== */

.whatsapp-float{
position:fixed;
right:30px;
bottom:30px;
width:65px;
height:65px;
background:#25d366;
color:#ffffff;
border-radius:50%;
display:flex;
justify-content:center;
align-items:center;
font-size:30px;
box-shadow:0 10px 30px rgba(0,0,0,0.25);
z-index:999;
animation:pulse 2s infinite;
transition: transform 0.3s ease, box-shadow 0.3s ease;
animation: glowPulse 3s ease-in-out infinite;

    box-shadow:
        0 0 5px rgba(37,211,102,0.4),
        0 0 10px rgba(37,211,102,0.2);
}

.whatsapp-float:hover{
    transform: scale(1.12);
}

/* ==========================================
BACK TO TOP BUTTON
========================================== */

#topBtn{
position:fixed;
right:30px;
bottom:110px;
width:55px;
height:55px;
border:none;
border-radius:50%;
background:#2563eb;
color:#ffffff;
font-size:20px;
cursor:pointer;
display:none;
box-shadow:0 10px 30px rgba(0,0,0,0.25);
z-index:999;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}

#topBtn.show{
display:block;
}

#topBtn:hover{
    transform: scale(1.12);
}

/* ==========================================
DARK MODE
========================================== */

body.dark{
background:#0f172a;
color:#ffffff;
}

body.dark section{
background:#111827;
}

body.dark .service-card,
body.dark .blog-card,
body.dark .testimonial,
body.dark .popup-content{
background:#1e293b;
color:#ffffff;
}

body.dark p{
color:#cbd5e1;
}

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

.contact-section{

    padding:100px 8%;
    background:#f8fbff;
    /* background:#fdf2f8; */

}

.contact-container{

    max-width:1200px;

    margin:auto;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:60px;

}

.contact-form{

    flex:1;

}

.contact-form h2{

    font-size:48px;

    font-weight:700;
    color:#2563eb;
    /* color:#7c3aed; */

    margin-bottom:10px;

}

.heading-line{

    width:80px;

    height:4px;
    background:#2563eb;

    /* background:#a855f7; */

    border-radius:50px;

    margin-bottom:30px;

}

.contact-form form{

    display:flex;

    flex-direction:column;

    gap:15px;

}

.contact-form input,
.contact-form textarea{

    width:100%;

    border:none;

    outline:none;

    background:#fff;

    padding:18px 22px;

    border-radius:20px;

    font-size:16px;

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

}

.contact-form textarea{

    resize:none;
    height: 100px;
    resize: vertical;

}




/*
.contact-form button{
    background:
    linear-gradient(
        90deg,
        #2563eb,
        #3b82f6
    );
}
*/
 .contact-form button{

    width:180px;

    border:none;

    cursor:pointer;

    padding:16px 25px;

    border-radius:50px;

    color:#fff;

    font-size:16px;

    font-weight:600;

     background:
    linear-gradient(
        90deg,
        #2563eb,
        #3b82f6
    );

    transition:.4s;

}

.contact-form button:hover{

    transform:
    translateY(-3px);

    box-shadow:
    0 10px 25px
    rgba(255,107,129,.3);

}

.contact-image{

    flex:1;

    text-align:center;

}

.contact-image img{

    max-width:100%;

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

}
/* blue contact */
.contact-section{
    background:#f8fbff;
}

.contact-form h2{
    color:#2563eb;
}

.heading-line{
    background:#2563eb;
}

.contact-form button{
    background:
    linear-gradient(
        90deg,
        #2563eb,
        #3b82f6
    );
}

@keyframes floatImage{

    0%{
        transform:translateY(0);
    }

    50%{
        transform:translateY(-15px);
    }

    100%{
        transform:translateY(0);
    }

}


/* Phone & Service in one row */

.form-row{
    display:flex;
    gap:20px;
    margin-bottom:0px;
}

.form-group{
    flex:1;
}

.form-group input,
.form-group select{
    width:100%;
    margin-bottom:0;
}

/* Mobile */

@media (max-width:768px){

    .form-row{
        flex-direction:column;
        gap:15px;
    }

}


.contact-form input,
.contact-form select,
.contact-form textarea{

    width:100%;

    border:none;

    outline:none;

    background:#fff;

    padding:8px 14px;

    border-radius:20px;

    font-size:16px;

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

}

.contact-form select{

    appearance:none;
    -webkit-appearance:none;
    -moz-appearance:none;

    background:#fff
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23666' viewBox='0 0 16 16'%3E%3Cpath d='M1.5 5.5l6.5 6 6.5-6' stroke='%23666' stroke-width='2' fill='none'/%3E%3C/svg%3E")
    no-repeat right 20px center;
    color:#666; 
    padding-right:55px;

    cursor:pointer;

}

/* ==========================================
UTILITY CLASSES
========================================== */

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

.mt-50{
margin-top:50px;
}

.mb-50{
margin-bottom:50px;
}

.hidden{
display:none;
}

/* ==========================================
ANIMATIONS
========================================== */

@keyframes fadeIn{
from{
opacity:0;
transform:translateY(30px);
}
to{
opacity:1;
transform:translateY(0);
}
}

@keyframes slideUp{
from{
opacity:0;
transform:translateY(80px);
}
to{
opacity:1;
transform:translateY(0);
}
}

@keyframes slideLeft{
from{
opacity:0;
transform:translateX(80px);
}
to{
opacity:1;
transform:translateX(0);
}
}

@keyframes slideRight{
from{
opacity:0;
transform:translateX(-80px);
}
to{
opacity:1;
transform:translateX(0);
}
}

@keyframes popupScale{
from{
opacity:0;
transform:scale(0.8);
}
to{
opacity:1;
transform:scale(1);
}
}

@keyframes pulse{
0%{
transform:scale(1);
box-shadow:0 0 0 0 rgba(37,211,102,0.7);
}

```
70%{
    transform:scale(1.08);
    box-shadow:0 0 0 20px rgba(37,211,102,0);
}

100%{
    transform:scale(1);
    box-shadow:0 0 0 0 rgba(37,211,102,0);
}
```

}

.fade-up{
animation:slideUp 1s ease forwards;
}

.fade-left{
animation:slideLeft 1s ease forwards;
}

.fade-right{
animation:slideRight 1s ease forwards;
}

.fade-in{
animation:fadeIn 1s ease forwards;
}

/* ==========================================
GLASSMORPHISM CARDS
========================================== */

.glass-card{
background:rgba(255,255,255,0.25);
backdrop-filter:blur(20px);
border:1px solid rgba(255,255,255,0.2);
border-radius:25px;
box-shadow:0 15px 35px rgba(0,0,0,0.08);
}

/* ==========================================
CUSTOM SCROLLBAR
========================================== */

::-webkit-scrollbar{
width:10px;
}

::-webkit-scrollbar-track{
background:#f1f5f9;
}

::-webkit-scrollbar-thumb{
background:#2563eb;
border-radius:10px;
}

::-webkit-scrollbar-thumb:hover{
    background:#1d4ed8;
}
/*  Floating phone number */ 
.floating-phone {
    position: fixed;
    top: 130px;
    right: 55px;
    transform: rotate(-90deg);
    transform-origin: right top; 
    background: #0d6efd;
    color: #fff;
    padding: 12px 22px;
    border-radius: 10px 10px 0 0;
    text-decoration: none;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
    z-index: 9999;
    transition: 0.3s;
}

.floating-phone:hover {
    right: 55px;
} 
/* ===========================
   THANK YOU SECTION
=========================== */

#quoteThankYouSection{
    display:none;
    text-align:center;
    padding:20px 10px;
}

.thank-you-icon{
    width:80px;
    height:80px;
    margin:0 auto 20px;
    border-radius:50%;
    background:#28a745;
    color:#fff;
    font-size:40px;
    font-weight:bold;
    display:flex;
    justify-content:center;
    align-items:center;
    animation:pop .5s ease;
}

#quoteThankYouSection h2{
    font-size:30px;
    margin-bottom:15px;
    color:#222;
}

#quoteThankYouSection p{
    font-size:16px;
    color:#666;
    line-height:1.6;
    margin-bottom:12px;
}

#quoteThankYouSection .btn{
    margin-top:20px;
}

/* Animation */

@keyframes pop{

    0%{
        transform:scale(0);
        opacity:0;
    }

    80%{
        transform:scale(1.1);
    }

    100%{
        transform:scale(1);
        opacity:1;
    }

}

/* ===========================
   CONTACT THANK YOU PAGE
=========================== */

.thankyou-box{
    max-width:650px;
    margin:00px auto;
    padding:50px 35px;
    background:#fff;
    border-radius:15px;
    text-align:center;
    box-shadow:0 15px 40px rgba(0,0,0,.12);
    animation:fadeIn .6s ease;
}

.thankyou-icon{
    width:90px;
    height:90px;
    margin:0 auto 25px;
    border-radius:50%;
    background:#28a745;
    color:#fff;
    font-size:45px;
    display:flex;
    justify-content:center;
    align-items:center;
    box-shadow:0 10px 25px rgba(40,167,69,.25);
}

.thankyou-box h2{
    font-size:34px;
    color:#222;
    margin-bottom:15px;
}

.thankyou-box p{
    font-size:17px;
    color:#666;
    line-height:1.8;
    margin-bottom:12px;
}

.countdown{
    margin-top:20px;
    font-size:16px;
    font-weight:600;
    color:#333;
}

#countdown{
    color:#28a745;
    font-size:20px;
    font-weight:bold;
}

.thankyou-box .btn{
    display:inline-block;
    margin-top:30px;
}

@keyframes fadeIn{
    from{
        opacity:0;
        transform:translateY(25px);
    }
    to{
        opacity:1;
        transform:translateY(0);
    }
}

/*==========================
        PROCESS
===========================*/

/* .process{

    padding:100px 0;

    background:#fff;

}

.process-wrapper{

    display:flex;

    justify-content:center;

    align-items:flex-start;

    gap:35px;

}

.process-card{

    flex:0 0 220px;

    text-align:center;

}

.process-card:hover{

    transform:translateY(-8px);

}

.process-icon{

    width:95px;

    height:95px;

    margin:auto;

    border:1px solid #d6d6d6;

    border-radius:20px;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:38px;

    color:#b88e2f;

    transition:.35s;

}

.process-card:hover .process-icon{

    background:#b88e2f;

    color:#fff;

    border-color:#b88e2f;

}

.process-number{

    display:block;

    margin:28px 0 12px;

    font-size:18px;

    font-weight:700;

    color:#8b8b8b;

}



.process-card h3{

    font-size:20px;

    white-space:nowrap;

}

.process-card p{

    color:#777;

    line-height:1.8;

    font-size:15px;

}

.process-line{

    width:70px;

    height:1px;

    background:#d7d7d7;

    margin-top:48px;

}

.process .heading-line{

    text-align:center;

    max-width:700px;

    margin:0 auto 60px;

}

.process-heading{

    text-align:center;

    max-width:750px;

    margin:0 auto 60px;

}

.process-heading span{

    display:block;

    color:#c69c3f;

    font-size:14px;

    font-weight:600;

    letter-spacing:2px;

    text-transform:uppercase;

    margin-bottom:10px;

}

.process-heading h2{

    font-size:48px;

    color:#111;

    margin-bottom:20px;

    line-height:1.2;

}

.process-heading p{

    font-size:17px;

    color:#666;

    line-height:1.8;

}



@media(max-width:991px){

.process-wrapper{

    flex-direction:column;

    align-items:center;

}

.process-line{

    width:1px;

    height:50px;

    margin:10px 0;

}

.process-card{

    max-width:400px;

}

} */

/*==========================
PROCESS
===========================*/

.process{

padding:120px 8%;

background:#fff;

}

.process-heading{

max-width:720px;

margin:auto;

text-align:center;

margin-bottom:90px;

}

.process-heading span{

display:inline-block;

letter-spacing:-0.7px;

font-size:14px;

font-weight:600;

/* color:#c8a45d; */
color:#2563eb;
margin-bottom:15px;

}

.process-heading h2{

font-size:48px;

margin-bottom:20px;

color:#1b1b1b;

}

.process-heading p{

color:#777;

font-size:17px;

line-height:1.8;

}

.process-timeline{

position:relative;

display:flex;

justify-content:space-between;

gap:35px;

}

.timeline-line{

position:absolute;

top:45px;

left:8%;

right:8%;

height:2px;

background:#ececec;

z-index:0;

}

.timeline-step{

position:relative;

flex:1;

text-align:center;

z-index:2;

transition:.4s;

}

.timeline-step:hover{

transform:translateY(-12px);

}

.step-number{

font-size:60px;

font-weight:800;

color:#f3f3f3;

margin-bottom:-20px;

}

.step-icon{

width:90px;

height:90px;

margin:auto;

background:#fff;

border:2px solid #ececec;

border-radius:50%;

display:flex;

justify-content:center;

align-items:center;

font-size:34px;

color:#c8a45d;

box-shadow:0 15px 40px rgba(0,0,0,.08);

transition:.4s;

}

.timeline-step:hover .step-icon{

background:#c8a45d;

color:#fff;

border-color:#c8a45d;

transform:rotate(8deg);

}

.timeline-step h3{

margin:30px 0 15px;

font-size:24px;

color:#1b1b1b;

white-space:nowrap;

}

.timeline-step p{

color:#777;

line-height:1.8;

font-size:15px;

max-width:240px;

margin:auto;

}

@media(max-width:991px){

.process-timeline{

flex-direction:column;

}

.timeline-line{

display:none;

}

.timeline-step{

margin-bottom:60px;

}

.process-heading h2{

font-size:36px;

}

}

/*=====================================
TRUSTED BRANDS
=====================================*/

.brands{

    padding:90px 8%;

    background:#fff;

    overflow:hidden;
}

.brands-slider{

    position:relative;

    margin-top:30px;

    overflow:hidden;

    mask-image:linear-gradient(
        to right,
        transparent,
        black 10%,
        black 90%,
        transparent
    );
}

.brands-track{

    display:flex;

    align-items:center;

    width:max-content;

    animation:brandScroll 35s linear infinite;
}

.brands-slider:hover .brands-track{

    animation-play-state:paused;
}

.brands-track img{

    width:160px;

    height:70px;

    object-fit:contain;

    margin:0 45px;

    filter:grayscale(100%);

    opacity:.65;

    transition:.4s;
}

.brands-track img:hover{

    filter:none;

    opacity:1;

    transform:scale(1.08);
}

@keyframes brandScroll{

    from{

        transform:translateX(0);

    }

    to{

        transform:translateX(-50%);

    }

}

@media(max-width:768px){

.brands-track img{

width:110px;

margin:0 25px;

}

}


/* ===========================
   TABLET (1024px and below)
=========================== */
@media (max-width:1024px){

    /* Header */

.header{
    padding: 16px 0;
}

.logo img{
    max-height: 52px;
}

.nav-links{
    gap: 24px;
}

.nav-links a{
    font-size: 15px;
}

.header-buttons .btn{
    padding: 12px 22px;
    font-size: 14px;
}

.container{
    width:90%;
    max-width:1000px;
}

section{
    padding:90px 0;
}

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

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

.section-title{
    font-size:40px;
}

.site-header{
    padding:0 5%;
}

#nav ul{
    gap:25px;
}

.logo a{
    font-size:28px;
}

.quote-btn{
    padding:12px 24px;
    font-size:15px;
}

}


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

.site-header{
    height:75px;
    padding:0 20px;
}

.site-header.sticky{
    height:70px;
}

.logo a{
    font-size:26px;
}

.menu-btn{
    display:block;
    font-size:30px;
    color:#0f172a;
    cursor:pointer;
    z-index:10001;
}

.quote-btn{
    display:none;
}

#nav{
    display:flex;
    flex-direction:column;
    justify-content:flex-start;
    position:fixed;
    top:75px;
    right:-100%;
    width:280px;
    height:calc(100vh - 75px);
    background:#fff;
    transition:right .35s ease;
    box-shadow:-10px 0 30px rgba(0,0,0,.012);
    z-index: 999;
}

#nav.active{
    right:0;
}

#nav ul{
    display:flex;
    flex-direction:column;
    gap:0;
}

#nav ul li{
    width:100%;
    border-bottom:1px solid #eee;
}

#nav ul li a{
    display:block;
    padding:18px 25px;
}

}



/*  ****************SMALL PHONES 480 **************** */
@media (max-width:480px){

.site-header{
    padding:0 15px;
}

.logo a{
    font-size:22px;
}

#nav{
    width:100%;
}

}

/* mobile smaller */
@media (max-width: 768px) {
  .footer-content h3 { font-size: 18px; }
  .footer-content h4 { font-size: 12px; }
  .footer-content p,
  .footer-content a { font-size: 10px; }
  .copyright { font-size: 9px; }
}