@import url("variables.css");
@import url("base.css");
@import url("navbar.css");
@import url("hero.css");
@import url("buttons.css");
@import url("cards.css");
@import url("footer.css");
@import url("services.css");
@import url("service-page.css");
@import url("animations.css");
@import url("darkmode.css");
@import url("responsive.css");

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


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

:root{

    --primary:#081B33;
    --secondary:#0A2647;
    --accent:#144272;
    --highlight:#2C74B3;

    --white:#ffffff;
    --light:#f8fafc;
    --gray:#64748b;
    --border:#e2e8f0;

    --heading-font:'Poppins',sans-serif;
    --body-font:'Inter',sans-serif;

    --shadow:
    0 10px 30px rgba(0,0,0,0.08);

    --radius:20px;

}


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

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{

    background:var(--light);

    font-family:var(--body-font);

    color:#1e293b;

    line-height:1.7;
}


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

a{
    text-decoration:none;
}

ul{
    list-style:none;
}


.container{

    width:90%;
    max-width:1300px;

    margin:auto;

}


/* =========================
   HEADINGS
========================= */

h1,h2,h3,h4{

    font-family:var(--heading-font);
    color:var(--primary);

}

h1{

    font-size:70px;
    font-weight:800;

}

h2{

    font-size:48px;
    font-weight:700;

}

h3{

    font-size:28px;

}


p{

    color:var(--gray);

}



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

.btn{

    display:inline-block;

    padding:18px 36px;

    border-radius:50px;

    font-weight:600;

    transition:.4s;

}


.btn-primary{

    background:var(--primary);
    color:white;

}


.btn-primary:hover{

    transform:translateY(-5px);

}


.btn-secondary{

    background:white;

    color:var(--primary);

    box-shadow:var(--shadow);

}


.btn-secondary:hover{

    transform:translateY(-5px);

}



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

section{

    padding:120px 0;

}
/* =========================
TOP BAR
========================= */

.top-bar{

    background:var(--primary);

    color:white;

    text-align:center;

    padding:12px;

    font-size:14px;

}



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

header{

background:

rgba(255,255,255,.7);

backdrop-filter:

blur(20px);

position:sticky;

top:0;

z-index:999;

box-shadow:

0 10px 30px rgba(0,0,0,.05);

}



.navbar{

    display:flex;

    justify-content:space-between;

    align-items:center;

    height:90px;

}


.logo{

    font-size:32px;

    font-weight:800;

    color:var(--primary);

}


nav ul{

    display:flex;

    gap:40px;

}


nav a{

    color:var(--primary);

    font-weight:600;

    transition:.3s;

}


nav a:hover{

    color:var(--highlight);

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

.hero{

    background:linear-gradient(
        135deg,
        #f8fafc,
        #ffffff
    );

}


.hero-container{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:80px;

}


.hero-content{

    flex:1;

}


.hero-content p{

    margin:30px 0;

    max-width:650px;

    font-size:18px;

}


.badge{

    display:inline-block;

    background:#e0f2fe;

    color:var(--highlight);

    padding:12px 20px;

    border-radius:50px;

    margin-bottom:25px;

    font-weight:600;

}


.hero-buttons{

    display:flex;

    gap:20px;

    margin-top:40px;

}


.hero-image{

    flex:1;

}

/* =========================
STATISTICS
========================= */

.stats{

    padding-top:40px;

}


.stats-container{

    display:grid;

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

    gap:30px;

}


.stat-card{

    background:white;

    padding:40px;

    text-align:center;

    border-radius:25px;

    box-shadow:var(--shadow);

    transition:.4s;

}


.stat-card:hover{

    transform:translateY(-10px);

}


.stat-card h2{

    color:var(--highlight);

}


.stat-card p{

    margin-top:15px;


}

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

.section-title{

    text-align:center;

    margin-bottom:80px;

}

.section-title p{

    margin-top:20px;

}


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

.services{

    background:white;

}


.services-grid{

    display:grid;

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

    gap:30px;

}


.service-card{

    background:var(--light);

    padding:40px;

    border-radius:25px;

    text-align:center;

    transition:.4s;

}


.service-card:hover{

    transform:translateY(-10px);

    box-shadow:var(--shadow);

}


.service-icon{

    font-size:50px;

    margin-bottom:25px;

}
/* =========================
WHY FIXKRO
========================= */

.why-fixkro{

    background:var(--light);

}


.why-grid{

    display:grid;

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

    gap:30px;

}


.why-card{

    background:white;

    padding:50px 35px;

    border-radius:25px;

    text-align:center;

    transition:.4s;

}


.why-card:hover{

    transform:translateY(-10px);

    box-shadow:var(--shadow);

}


.why-icon{

    font-size:55px;

    margin-bottom:25px;

}
/* =========================
HOW IT WORKS
========================= */

.work-grid{

    display:grid;

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

    gap:40px;

}


.work-card{

    background:white;

    padding:50px;

    border-radius:30px;

    box-shadow:var(--shadow);

    transition:.4s;

}


.work-card:hover{

    transform:translateY(-10px);

}


.step-number{

    width:80px;

    height:80px;

    background:var(--primary);

    color:white;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:28px;

    font-weight:700;

    margin-bottom:30px;

}
/* =========================
PARTNER SECTION
========================= */

.partner-section{

    background:linear-gradient(
    135deg,
    var(--primary),
    var(--accent));

    color:white;

}


.partner-section h2{

    color:white;

}


.partner-section p{

    color:#dbeafe;

    margin:30px 0;

}


.partner-container{

    max-width:900px;

}
/* =========================
TESTIMONIALS
========================= */

.testimonials{

    background:white;

}


.testimonial-grid{

    display:grid;

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

    gap:30px;

}


.testimonial-card{

    background:var(--light);

    padding:40px;

    border-radius:25px;

    box-shadow:var(--shadow);

    transition:.4s;

}


.testimonial-card:hover{

    transform:translateY(-10px);

}


.testimonial-card p{

    margin-bottom:25px;

}
/* =========================
FAQ
========================= */

.faq{

    background:var(--light);

}


.faq-box{

    background:white;

    padding:35px;

    margin-bottom:25px;

    border-radius:20px;

    box-shadow:var(--shadow);

}


.faq-box h3{

    margin-bottom:15px;

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

footer{

    background:var(--primary);

    color:white;

    padding:100px 0;

}


.footer-grid{

    display:grid;

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

    gap:40px;

}


footer h3{

    color:white;

    margin-bottom:25px;

}


footer p{

    color:#cbd5e1;

}


footer li{

    margin-bottom:15px;

    color:#cbd5e1;

}

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

.whatsapp-btn{

position:fixed;

bottom:30px;

right:30px;

width:70px;

height:70px;

background:#25D366;

border-radius:50%;

display:flex;

justify-content:center;

align-items:center;

font-size:35px;

color:white;

box-shadow:

0 10px 30px rgba(0,0,0,.2);

z-index:9999;

transition:.4s;

}


.whatsapp-btn:hover{

transform:scale(1.1);

}

/* =======================
LOADER
======================= */

.loader{

position:fixed;

top:0;

left:0;

width:100%;

height:100vh;

background:white;

display:flex;

justify-content:center;

align-items:center;

z-index:99999;

}


.spinner{

width:70px;

height:70px;

border:

7px solid #ddd;

border-top:

7px solid var(--primary);

border-radius:50%;

animation:

spin 1s linear infinite;

}


@keyframes spin{

100%{

transform:rotate(360deg);

}

}

/* PROGRESS BAR */

#progress-bar{

position:fixed;

top:0;

left:0;

width:0;

height:5px;

background:var(--highlight);

z-index:999999;

}

.faq-question{

width:100%;

background:none;

border:none;

text-align:left;

font-size:22px;

font-weight:600;

cursor:pointer;

}


.faq-answer{

display:none;

padding-top:20px;

}
body{

cursor:

url('https://cur.cursors-4u.net/cursors/cur-2/cur116.cur'),

auto;

}

/* =========================
THEME BUTTON
========================= */

#theme-toggle{

    width:55px;

    height:55px;

    border:none;

    background:white;

    border-radius:50%;

    cursor:pointer;

    font-size:22px;

    box-shadow:var(--shadow);

    transition:.3s;

}


#theme-toggle:hover{

    transform:rotate(180deg);

}



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

.cta-section{

padding:120px 0;

background:

linear-gradient(
135deg,
#081B33,
#144272);

text-align:center;

}


.cta-section h2{

color:white;

margin-bottom:25px;

}


.cta-section p{

color:#dbeafe;

margin-bottom:40px;

}


.cta-buttons{

display:flex;

justify-content:center;

gap:25px;

flex-wrap:wrap;

}

footer a{

color:#cbd5e1;

transition:.3s;

}


footer a:hover{

color:white;

}


.contact-form {

    max-width: 700px;

    margin: auto;

    display: flex;

    flex-direction: column;

    gap: 25px;

}

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

    width: 100%;

    padding: 18px 20px;

    font-size: 16px;

    border: 1px solid #dbeafe;

    border-radius: 15px;

    outline: none;

    background: #fff;

    transition: 0.3s;

}

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

    border-color: #144272;

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

}

.contact-form textarea {

    min-height: 180px;

    resize: vertical;

}

.contact-form button {

    width: 250px;

    align-self: center;

}

.service-icon img{
    width:100px;
    height:100px;
    object-fit:contain;
    margin:0 auto 25px;
}


/* ======================
   CORE VALUES
====================== */

.core-values{
    background: #f5f7fb;
}

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

.value-card{
    background: #fff;
    padding: 40px;
    border-radius: 25px;
    box-shadow: 0 10px 30px rgba(0,0,0,.08);
    transition: .3s;
}

.value-card:hover{
    transform: translateY(-8px);
}

.value-card h3{
    font-size: 36px;
    color: #081B33;
    margin-bottom: 20px;
}

.value-card p{
    color: #64748b;
    font-size: 22px;
    line-height: 1.8;
}


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

.section-title h2{
    font-size:60px;
    color:#081B33;
    font-weight:800;
}

.section-title p{
    color:#64748b;
    font-size:20px;
    margin-top:15px;
}


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

.mission-card{
    background:white;
    padding:50px;
    border-radius:25px;
    box-shadow:0 10px 30px rgba(0,0,0,.08);
}

.mission-card h2{
    color:#081B33;
    margin-bottom:20px;
}

.mission-card p{
    color:#64748b;
    line-height:1.8;
}

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

.stat-card{
    background:white;
    padding:50px 30px;
    text-align:center;
    border-radius:25px;
    box-shadow:0 10px 30px rgba(0,0,0,.08);
}

.stat-card h2{
    color:#0f62fe;
    font-size:55px;
    margin-bottom:15px;
}

.stat-card p{
    color:#64748b;
}

footer{
    background:#081B33;
    color:white;
    padding:60px 0 30px;
}

.footer-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
    gap:40px;
}

footer h3{
    margin-bottom:20px;
}

footer p,
footer a{
    color:#dbeafe;
}

footer ul li{
    margin-bottom:12px;
}
.our-story{
    background: #f5f7fb;
    padding: 100px 0;
}

.our-story .container{
    background: white;
    padding: 70px;
    border-radius: 30px;
    box-shadow: 0 10px 40px rgba(0,0,0,.08);
}

.our-story p{
    font-size: 22px;
    line-height: 2;
    color: #64748b;
}



.whatsapp-btn{

position:fixed;

bottom:30px;

right:30px;

z-index:999;

}

.whatsapp-btn img{

width:70px;

height:70px;

border-radius:50%;

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

transition:.3s;

}

.whatsapp-btn img:hover{

transform:scale(1.1);

}

.faq-box{
    background:white;
    margin-bottom:20px;
    border-radius:20px;
    box-shadow:0 10px 30px rgba(0,0,0,.08);
    overflow:hidden;
}

.faq-question{
    width:100%;
    padding:25px;
    border:none;
    background:white;
    text-align:left;
    font-size:20px;
    font-weight:600;
    cursor:pointer;
}

.faq-answer{
    display:none;
    padding:0 25px 25px;
    color:#64748b;
}

.loader{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:white;
    z-index:9999;
    transition:.5s;
}

.loader.hidden{
    opacity:0;
    visibility:hidden;
}

.logo a{
font-size:52px;
font-weight:800;
color:#031B3C;
}

.logo span{
color:#16A34A;
}

.logo sup{
font-size:18px;
vertical-align:top;
}

.whatsapp-btn img{
width:65px;
height:65px;
border-radius:50%;
box-shadow:0 10px 25px rgba(0,0,0,.15);
}

.footer-bottom{
    text-align:center;
    padding:20px 0;
    background:#031B3C;
    border-top:1px solid rgba(255,255,255,0.1);
    color:#94A3B8;
    font-size:15px;
}
.footer-bottom{
    text-align:center;
    padding:15px 0;
    background:#02152E;
    color:#94A3B8;
    font-size:14px;
    border-top:1px solid rgba(255,255,255,.08);
}


.footer-bottom{
    text-align:center;
    padding:20px;
}

.social-icons{
    margin-bottom:15px;
}

.social-icons a{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:42px;
    height:42px;
    margin:0 6px;
    border-radius:50%;
    background:#ffffff;
    color:#0a1a2b;
    text-decoration:none;
    font-size:18px;
    transition:0.3s;
}

.social-icons a:hover{
    transform:translateY(-3px);
}

.social-icons .fa-facebook-f{
    color:#1877F2;
}

.social-icons .fa-instagram{
    color:#E4405F;
}

.social-icons .fa-youtube{
    color:#FF0000;
}

.social-icons .fa-linkedin-in{
    color:#0A66C2;
}

.footer-bottom{
    text-align:center;
    padding:20px;
    border-top:1px solid rgba(255,255,255,0.1);
}

.social-icons{
    display:flex;
    justify-content:center;
    gap:15px;
    margin-bottom:15px;
}

.social-icons a{
    width:42px;
    height:42px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:#ffffff;
    text-decoration:none;
    font-size:18px;
    transition:0.3s;
}

.social-icons a:hover{
    transform:translateY(-3px);
}

.social-icons .fa-facebook-f{
    color:#1877F2;
}

.social-icons .fa-instagram{
    color:#E4405F;
}

.social-icons .fa-youtube{
    color:#FF0000;
}

.social-icons .fa-linkedin-in{
    color:#0A66C2;
}
footer{
    background:#0f172a;
    color:#fff;
    padding:50px 0 0;
}

.footer-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    gap:30px;
}

.footer-grid h3{
    margin-bottom:15px;
}

.footer-grid ul{
    list-style:none;
    padding:0;
}

.footer-grid ul li{
    margin-bottom:10px;
}

.footer-grid a{
    color:#fff;
    text-decoration:none;
}

.footer-bottom{
    margin-top:30px;
    padding:20px;
    text-align:center;
    border-top:1px solid rgba(255,255,255,.15);
}

.social-icons{
    display:flex;
    justify-content:center;
    gap:12px;
    margin-bottom:15px;
}

.social-icons a{
    width:42px;
    height:42px;
    border-radius:50%;
    background:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    text-decoration:none;
}

.social-icons .fa-facebook-f{
    color:#1877f2;
}

.social-icons .fa-instagram{
    color:#e4405f;
}

.social-icons .fa-youtube{
    color:#ff0000;
}

.social-icons .fa-linkedin-in{
    color:#0a66c2;
}

@media (max-width:768px){

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

    .container{
        width:100%;
        max-width:100%;
        padding:0 15px;
    }

    .hero-container,
    .partner-container{
        display:flex;
        flex-direction:column;
        width:100%;
        gap:20px;
    }

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

    .hero-image img{
        width:100%;
        height:auto;
    }

    .stats-container{
        display:grid;
        grid-template-columns:1fr 1fr;
        gap:15px;
    }

    .services-grid,
    .why-grid,
    .testimonial-grid,
    .work-grid,
    .mission-grid,
    .values-grid{
        grid-template-columns:1fr;
    }

    nav ul{
        flex-wrap:wrap;
        gap:10px;
    }

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

    section{
        padding:60px 0;
    }
}