/* =====================================================
   HUNAIN DIGITAL STUDIO (HDS)
   STYLE.CSS - MAIN STYLESHEET
   Version: 1.0
===================================================== */

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

:root{

    --primary:#0f62fe;
    --dark:#0b1220;
    --text:#1f2937;
    --muted:#6b7280;
    --primary:#0f62fe;
    --secondary:#1e88e5;
    --accent: #06b6d4;

    --dark: #0f172a;
    --dark-light: #1e293b;

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

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

    --shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    --shadow-hover: 0 15px 40px rgba(0, 0, 0, 0.25);

    --radius: 12px;

    --transition: all 0.3s ease;
}

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

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Inter", sans-serif;
}

html {
    scroll-behavior: smooth;
}

body {
    background: var(--light);
    color: var(--dark);
    line-height: 1.6;
}

/* =========================
   GLOBAL ELEMENTS
========================= */

h1, h2, h3, h4 {
    font-family: "Poppins", sans-serif;
    font-weight: 600;
    color: var(--dark);
}

p {
    color: var(--gray);
}

a {
    text-decoration: none;
    color: inherit;
}

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

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

.section {
    padding: 80px 0;
}

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

.section-title span {
    color: var(--primary);
    font-weight: 600;
    letter-spacing: 1px;
    font-size: 14px;
}

.section-title h2 {
    font-size: 32px;
    margin-top: 10px;
}

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

.btn-primary {
    display: inline-block;
    padding: 12px 25px;
    background: var(--primary);
    color: var(--white);
    border-radius: var(--radius);
    transition: var(--transition);
    font-weight: 500;
}

.btn-primary:hover {
    background: var(--primary-dark);
    transform: translateY(-2px);
    box-shadow: var(--shadow-hover);
}

.btn-secondary {
    display: inline-block;
    padding: 12px 25px;
    border: 1px solid var(--primary);
    color: var(--primary);
    border-radius: var(--radius);
    transition: var(--transition);
    font-weight: 500;
}

.btn-secondary:hover {
    background: var(--primary);
    color: var(--white);
}

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

.loader-wrapper {
    position: fixed;
    inset: 0;
    background: var(--dark);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.loader-content {
    text-align: center;
    color: var(--white);
}

.loader-content img {
    width: 80px;
    margin: auto;
    margin-bottom: 15px;
}

.loader-content h2 {
    font-size: 20px;
    color: var(--white);
}

.loader-content span {
    display: block;
    margin-top: 5px;
    color: var(--accent);
    font-size: 14px;
}

.loader-line {
    width: 200px;
    height: 2px;
    background: rgba(255,255,255,0.2);
    margin: 20px auto;
    position: relative;
    overflow: hidden;
}

.loader-line::after {
    content: "";
    position: absolute;
    width: 50%;
    height: 100%;
    background: var(--primary);
    animation: loading 1.2s infinite;
}

@keyframes loading {
    0% { left: -50%; }
    100% { left: 100%; }
}



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

.hero {
    padding: 100px 0;
    background: linear-gradient(135deg, #f8fafc, #eef2ff);
}

.hero-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
}

.hero-content {
    flex: 1;
}

.hero-content h1 {
    font-size: 48px;
    line-height: 1.2;
}

.hero-content h1 span {
    color: var(--primary);
}

.hero-content p {
    margin: 20px 0;
    font-size: 16px;
}

.hero-buttons {
    display: flex;
    gap: 15px;
    margin-bottom: 30px;
}

.hero-stats {
    display: flex;
    gap: 30px;
}

.hero-stats h3 {
    color: var(--primary);
}

.hero-image {
    flex: 1;
}

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

.about-grid {
    display: grid;
    grid-template-columns: 1fr;
}

.about-content p {
    margin-bottom: 15px;
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-top: 20px;
}

.feature-item {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #fff;
    padding: 10px;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

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

.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
}

.service-card {
    background: var(--white);
    padding: 25px;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    transition: var(--transition);
}

.service-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-hover);
}

.service-card i {
    font-size: 30px;
    color: var(--primary);
    margin-bottom: 15px;
}

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

.portfolio-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 15px;
}

.portfolio-item {
    overflow: hidden;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.portfolio-item img {
    transition: var(--transition);
}

.portfolio-item:hover img {
    transform: scale(1.05);
}

/* =========================
   STATS
========================= */

.stats {
    background: var(--dark);
    color: var(--white);
    padding: 60px 0;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    text-align: center;
}

.stat-box h2 {
    color: var(--accent);
    font-size: 32px;
}

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

.process-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 20px;
}

.process-card {
    background: var(--white);
    padding: 20px;
    border-radius: var(--radius);
    text-align: center;
    box-shadow: var(--shadow);
}

.process-card span {
    font-size: 20px;
    color: var(--primary);
    font-weight: bold;
}

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

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

.contact-card {
    display: flex;
    gap: 15px;
    background: var(--white);
    padding: 15px;
    margin-bottom: 15px;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

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

.contact-form input,
.contact-form textarea {
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: var(--radius);
    outline: none;
}

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

.footer {
    background: #111827; /* Navy */
    color: white;
    padding: 0.1px 0;
    text-align: center;
}

.footer h2,
.footer p,
.footer a {
    color: grey;
}

/* =========================
   SCROLL TOP BUTTON
========================= */

#scrollTopBtn {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: var(--primary);
    color: var(--white);
    border: none;
    padding: 10px 12px;
    border-radius: 50%;
    cursor: pointer;
    display: none;
}

/* =========================
   RESPONSIVE BASIC (SAFE)
========================= */

@media (max-width: 992px) {

    .hero-container {
        flex-direction: column;
        text-align: center;
    }

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

    .navbar ul {
        display: none;
    }

    .mobile-menu-btn {
        display: block;
    }
}

/* ==========================================
   PRICING SECTION - HUNAIN DIGITAL STUDIO
========================================== */

.pricing-section {
    padding: 100px 0;
    background: #f8fafc;
}

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

.pricing-section .section-title span {
    color: #0f62fe;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.pricing-section .section-title h2 {
    margin-top: 12px;
    font-size: 42px;
    font-weight: 700;
    color: #111827;
}

/* ==========================================
   SERVICE TABS
========================================== */

.pricing-tabs {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-bottom: 50px;
}

.pricing-tab {
    background: #ffffff;
    border: 2px solid #0f62fe;
    color: #0f62fe;
    padding: 12px 20px;
    border-radius: 10px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    transition: all .3s ease;
}

.pricing-tab:hover {
    background: #0f62fe;
    color: #ffffff;
    transform: translateY(-3px);
}

.pricing-tab.active {
    background: #0f62fe;
    color: #ffffff;
    box-shadow: 0 10px 25px rgba(15,98,254,.25);
}

/* ==========================================
   PRICING CARDS
========================================== */

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

.pricing-card {
    background: #ffffff;
    border-radius: 18px;
    padding: 35px;
    position: relative;
    overflow: hidden;
    transition: all .35s ease;
    border: 1px solid #e5e7eb;
}

.pricing-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 50px rgba(0,0,0,.10);
}

.pricing-card h3 {
    font-size: 28px;
    margin-bottom: 10px;
    color: #111827;
}

.pricing-card p {
    color: #6b7280;
    margin-bottom: 25px;
}

.price {
    font-size: 56px;
    font-weight: 800;
    color: #111827;
    margin-bottom: 25px;
}

.price span {
    font-size: 16px;
    color: #6b7280;
}

/* ==========================================
   FEATURED CARD
========================================== */

.pricing-card.featured {

    background: linear-gradient(
        135deg,
        #0f62fe,
        #1e88e5
    );

    color: white;

    transform: scale(1.08);

    border: none;

    box-shadow:
        0 20px 50px rgba(15,98,254,.35);
}

.pricing-card.featured:hover {
    transform: scale(1.12);
}

.pricing-card.featured h3,
.pricing-card.featured p,
.pricing-card.featured li,
.pricing-card.featured .price {
    color: white;
}

.popular-badge {
    position: absolute;
    top: 20px;
    right: 20px;

    background: #ffd700;
    color: #111827;

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

    padding: 6px 12px;

    border-radius: 30px;
}

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

.pricing-features {
    list-style: none;
    margin: 25px 0;
    padding: 0;
}

.pricing-features li {
    padding: 10px 0;
    border-bottom: 1px solid #f1f5f9;
    color: #374151;
}

.pricing-card.featured .pricing-features li {
    border-bottom: 1px solid rgba(255,255,255,.15);
}

.pricing-features li i {
    color: #0f62fe;
    margin-right: 10px;
}

.pricing-card.featured .pricing-features li i {
    color: #ffffff;
}

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

.pricing-btn {
    display: block;
    width: 100%;
    text-align: center;

    background: #0f62fe;
    color: white;

    padding: 14px;
    border-radius: 10px;

    font-weight: 600;
    text-decoration: none;

    transition: .3s;
}

.pricing-btn:hover {
    background: #0b57e3;
}

.pricing-card.featured .pricing-btn {
    background: white;
    color: #0f62fe;
}

.pricing-card.featured .pricing-btn:hover {
    background: #f8fafc;
}

/* ==========================================
   ANIMATION
========================================== */

@keyframes featuredPulse {

    0% {
        transform: scale(1.08);
    }

    50% {
        transform: scale(1.10);
    }

    100% {
        transform: scale(1.08);
    }
}

.pricing-card.featured {
    animation: featuredPulse 3s infinite;
}

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

@media (max-width: 992px) {

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

    .pricing-card.featured {
        transform: none;
    }

    .pricing-card.featured:hover {
        transform: translateY(-10px);
    }
}

@media (max-width: 768px) {

    .pricing-section .section-title h2 {
        font-size: 32px;
    }

    .price {
        font-size: 44px;
    }

    .pricing-tab {
        width: 100%;
        text-align: center;
    }
}


.hero-container{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:50px;
}

.hero-image img{
    width:100%;
    max-width:600px;
    border-radius:20px;
    animation: float 4s ease-in-out infinite;
}

#loader{
    position:fixed;
    width:100%;
    height:100vh;
    background:#0f172a;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    z-index:9999;
    color:white;
}

.spinner{
    width:50px;
    height:50px;
    border:4px solid rgba(255,255,255,0.2);
    border-top:4px solid #0f62fe;
    border-radius:50%;
    animation:spin 1s linear infinite;
}

@keyframes spin{
    100%{ transform:rotate(360deg); }
}

.reveal{
    opacity:0;
    transform:translateY(60px);
    transition:all 0.8s ease;
}

.reveal.active{
    opacity:1;
    transform:translateY(0);
}

.glass{
    background: rgba(255,255,255,0.1);
    backdrop-filter: blur(10px);
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.2);
}

/* ===================================
   HDS HERO IMAGE ANIMATION FINAL
=================================== */


.hero-image-box{

    width:100%;
    max-width:520px;

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

    transition:0.5s ease;

}



.hero-image-box img{

    width:100%;

    display:block;

    border-radius:22px;

    cursor:pointer;

    transition:0.5s ease;

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

}



/* Floating */

@keyframes heroFloat{


    0%{

        transform:translateY(0);

    }


    50%{

        transform:translateY(-15px);

    }


    100%{

        transform:translateY(0);

    }


}



/* Hover POP */

.hero-image-box:hover img{


    transform:

    scale(1.08)

    translateY(-10px);


    box-shadow:

    0 30px 80px

    rgba(15,98,254,0.45);


}



/* Smooth glow */

.hero-image-box:hover{


    filter:

    brightness(1.05);


}


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


.whatsapp-float{

position:fixed;

right:25px;

bottom:25px;

z-index:9999;

display:flex;

align-items:center;

gap:12px;

}


/* TEXT POPUP */


.whatsapp-text{

background:#ffffff;

padding:12px 18px;

border-radius:12px;

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

display:flex;

flex-direction:column;

opacity:0;

transform:translateX(30px);

pointer-events:none;

transition:0.4s ease;

font-size:14px;

}


.whatsapp-text strong{

color:#0b0f1a;

}


.whatsapp-text span{

color:#555;

font-size:13px;

}



/* SHOW TEXT ON HOVER */


.whatsapp-float:hover .whatsapp-text{

opacity:1;

transform:translateX(0);

}




/* BUTTON */


.whatsapp-btn{


width:60px;

height:60px;

border-radius:50%;

background:#25D366;

color:white;

display:flex;

align-items:center;

justify-content:center;

font-size:32px;

text-decoration:none;

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

animation:whatsappPulse 2s infinite;

transition:0.3s;

}



.whatsapp-btn:hover{

transform:scale(1.1);

background:#128C7E;

}





/* FLOAT ANIMATION */


@keyframes whatsappPulse{


0%{

transform:scale(1);

}


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

.pricing-section{
    padding:100px 0;
    background:#ffffff;
}

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

.section-title span{
    display:inline-block;
    background:rgba(15,98,254,.08);
    color:#0f62fe;
    padding:10px 20px;
    border-radius:50px;
    font-weight:700;
    margin-bottom:15px;
}

.section-title h2{
    font-size:2.8rem;
    color:#0b0f1a;
    line-height:1.2;
    max-width:750px;
    margin:auto;
}

/* ==========================================
PRICING TABS
========================================== */

.pricing-tabs{
    display:flex;
    gap:12px;
    flex-wrap:wrap;
    justify-content:center;
    margin-bottom:50px;
}

.pricing-tab{
    border:none;
    cursor:pointer;
    padding:14px 22px;
    border-radius:14px;
    background:#f5f7fb;
    color:#1c1c1c;
    font-weight:600;
    transition:.35s;
}

.pricing-tab:hover{
    transform:translateY(-3px);
    background:#eaf1ff;
}

.pricing-tab.active{
    background:#0f62fe;
    color:#fff;
}

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

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

/* ==========================================
PRICING CARD
========================================== */

.pricing-card{
    background:#fff;
    padding:40px;
    border-radius:28px;
    position:relative;
    overflow:hidden;
    box-shadow:0 15px 40px rgba(0,0,0,.06);
    transition:.4s ease;
}

.pricing-card:hover{
    transform:translateY(-12px);
    box-shadow:0 25px 60px rgba(15,98,254,.15);
}

.pricing-card h3{
    font-size:1.6rem;
    margin-bottom:10px;
    color:#0b0f1a;
}

.pricing-card p{
    color:#667085;
    margin-bottom:25px;
}

.price{
    font-size:3rem;
    font-weight:900;
    color:#0f62fe;
    margin-bottom:30px;
}

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

.pricing-features{
    list-style:none;
    margin-bottom:30px;
}

.pricing-features li{
    display:flex;
    align-items:center;
    gap:12px;
    margin-bottom:14px;
    color:#444;
}

.pricing-features i{
    color:#0f62fe;
}

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

.pricing-btn{
    display:block;
    text-align:center;
    text-decoration:none;
    background:#0f62fe;
    color:#fff;
    padding:15px;
    border-radius:14px;
    font-weight:700;
    transition:.35s;
}

.pricing-btn:hover{
    transform:translateY(-3px);
    background:#0043ce;
}

/* ==========================================
FEATURED CARD
========================================== */

.featured{
    border:2px solid #0f62fe;
    transform:scale(1.04);
}

.featured:hover{
    transform:scale(1.04) translateY(-12px);
}

.popular-badge{
    position:absolute;
    top:20px;
    right:-35px;
    background:#0f62fe;
    color:#fff;
    padding:10px 45px;
    font-size:12px;
    font-weight:700;
    transform:rotate(45deg);
}

/* ==========================================
VIEW ALL BUTTON
========================================== */

.btn-primary{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    text-decoration:none;
    background:#0f62fe;
    color:#fff;
    padding:16px 30px;
    border-radius:16px;
    font-weight:700;
    transition:.35s;
}

.btn-primary:hover{
    transform:translateY(-5px);
    background:#0043ce;
}

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

@media(max-width:992px){

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

    .featured{
        transform:none;
    }

    .featured:hover{
        transform:translateY(-12px);
    }

}

@media(max-width:768px){

    .section-title h2{
        font-size:2rem;
    }

    .pricing-card{
        padding:30px;
    }

    .price{
        font-size:2.4rem;
    }

}


50%{

transform:scale(1.08);

}


100%{

transform:scale(1);

}


}

.about-image-card{
    height:500px;
    border-radius:35px;
    background:linear-gradient(135deg,#0f62fe,#2f7cff);
    position:relative;
    overflow:visible; 
}

/* DOTTED PATTERN */

.pattern-dots{

    position:absolute;

    inset:0;

    background-image:
    radial-gradient(
        rgba(255,255,255,.18) 1.5px,
        transparent 1.5px
    );

    background-size:
    30px 30px;

    opacity:.9;

}

/* BLUE GLOW */

.about-image::before{

    content:"";

    position:absolute;

    width:300px;
    height:300px;

    background:
    rgba(255,255,255,.10);

    border-radius:50%;

    top:50%;
    left:50%;

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

    filter:blur(80px);

}

/* BADGE */

.about-badge{
    position:absolute;
    bottom:30px;
    left:30px;
    z-index:3;
}

.about-badge i{

    color:#0f62fe;

}

.pattern-dots{

    position:absolute;

    inset:0;

    background-image:
    radial-gradient(
        rgba(255,255,255,.18) 1.5px,
        transparent 1.5px
    );

    background-size:
    30px 30px;

    animation:
    dotsMove 12s linear infinite;

}

@keyframes dotsMove{

    0%{

        transform:
        translate(0,0);

    }

    100%{

        transform:
        translate(-30px,-30px);

    }

}

.pattern-dots{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;

    background-image:
    radial-gradient(
        rgba(255,255,255,.25) 2px,
        transparent 2px
    );

    background-size:30px 30px;

    z-index:1;
}

.about-center{
    max-width:900px;
    margin:0 auto;
    text-align:center;
}

.about-center h2{
    font-size:4rem;
    margin:20px 0;
    color:#0b0f1a;
}

.about-center p{
    color:#667085;
    line-height:1.8;
    margin-bottom:20px;
}

.about-features{
    list-style:none;
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    gap:25px;
    margin:35px 0;
}

.about-features li{
    font-weight:600;
}

.about-features i{
    color:#0f62fe;
    margin-right:8px;
}


/* ==========================================
ABOUT HERO
========================================== */

.about-hero{
    padding:140px 0 100px;
    text-align:center;
    background:#f5f7fb;
}

.hero-badge{
    display:inline-flex;
    align-items:center;
    gap:10px;
    background:rgba(15,98,254,.1);
    color:#0f62fe;
    padding:12px 22px;
    border-radius:50px;
    font-weight:600;
    margin-bottom:25px;
}

.about-hero h1{
    font-size:4rem;
    font-weight:800;
    line-height:1.15;
    color:#0b0f1a;
    max-width:900px;
    margin:auto;
}

.about-hero h1 span{
    color:#0f62fe;
}

.about-hero p{
    max-width:850px;
    margin:30px auto;
    color:#667085;
    font-size:1.1rem;
    line-height:1.8;
}

.hero-buttons{
    display:flex;
    justify-content:center;
    gap:20px;
    margin-top:40px;
}

/* ==========================================
WHO WE ARE
========================================== */

.who-we-are{
    padding:100px 0;
}

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

.about-card{
    background:#fff;
    padding:40px;
    border-radius:24px;
    text-align:center;
    box-shadow:0 15px 40px rgba(0,0,0,.06);
    transition:.4s;
}

.about-card:hover{
    transform:translateY(-10px);
}

.about-icon{
    width:80px;
    height:80px;
    margin:auto;
    margin-bottom:20px;
    border-radius:20px;
    background:#0f62fe;
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:28px;
}

/* ==========================================
STATS
========================================== */

.about-stats{
    padding:100px 0;
    background:#0b0f1a;
}

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

.stat-card{
    text-align:center;
    background:rgba(255,255,255,.05);
    padding:40px;
    border-radius:24px;
    transition:.4s;
}

.stat-card:hover{
    transform:translateY(-10px);
}

.stat-card h2{
    color:#0f62fe;
    font-size:3rem;
    margin-bottom:10px;
}

.stat-card p{
    color:#fff;
}

/* ==========================================
MISSION & VISION
========================================== */

.mission-vision{
    padding:120px 0;
    background:#fff;
}

.mv-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:35px;
    margin-top:60px;
}

.mv-card{
    background:#fff;
    padding:50px;
    border-radius:30px;
    text-align:center;
    box-shadow:0 15px 40px rgba(0,0,0,.06);
    transition:.4s;
}

.mv-card:hover{
    transform:translateY(-12px);
}

.mv-icon{
    width:90px;
    height:90px;
    background:#0f62fe;
    color:#fff;
    font-size:32px;
    border-radius:25px;
    margin:0 auto 25px;
    display:flex;
    align-items:center;
    justify-content:center;
}

/* ==========================================
WHY HDS
========================================== */

.why-hds{
    padding:120px 0;
    background:#f5f7fb;
}

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

.section-badge{
    display:inline-block;
    background:rgba(15,98,254,.1);
    color:#0f62fe;
    padding:10px 20px;
    border-radius:50px;
    font-weight:600;
    margin-bottom:20px;
}

.why-content h2{
    font-size:3rem;
    margin-bottom:20px;
}

.why-content p{
    color:#667085;
    line-height:1.9;
}

.why-list{
    margin-top:35px;
}

.why-item{
    display:flex;
    align-items:center;
    gap:12px;
    margin-bottom:18px;
    font-weight:600;
}

.why-item i{
    color:#0f62fe;
}

.why-box{
    position:relative;
    min-height:500px;
    border-radius:40px;
    background:linear-gradient(135deg,#0f62fe,#3d86ff);
    overflow:hidden;
}

.floating-card{
    position:absolute;
    background:#fff;
    padding:20px 25px;
    border-radius:18px;
    font-weight:700;
    box-shadow:0 20px 40px rgba(0,0,0,.15);
    animation:floatCard 4s ease-in-out infinite;
}

.floating-card i{
    color:#0f62fe;
    margin-right:10px;
}

.card-1{
    top:60px;
    left:50px;
}

.card-2{
    top:180px;
    right:50px;
}

.card-3{
    bottom:140px;
    left:70px;
}

.card-4{
    bottom:60px;
    right:60px;
}

@keyframes floatCard{

    0%{
        transform:translateY(0);
    }

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

    100%{
        transform:translateY(0);
    }

}

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

.process-section{
    padding:120px 0;
    background:#fff;
}

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

.process-card{
    background:#fff;
    border-radius:24px;
    padding:40px;
    text-align:center;
    box-shadow:0 15px 40px rgba(0,0,0,.06);
    transition:.4s;
}

.process-card:hover{
    transform:translateY(-12px);
}

.process-number{
    width:80px;
    height:80px;
    background:#0f62fe;
    color:#fff;
    border-radius:50%;
    margin:0 auto 25px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:24px;
    font-weight:800;
}

.process-card h3{
    margin-bottom:15px;
}

.process-card p{
    color:#667085;
    line-height:1.8;
}

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

.team-preview{
    padding:120px 0;
    background:#f5f7fb;
}

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

.team-card{
    background:#fff;
    padding:40px;
    border-radius:25px;
    text-align:center;
    transition:.4s;
    box-shadow:0 15px 40px rgba(0,0,0,.06);
}

.team-card:hover{
    transform:translateY(-10px);
}

.team-img{
    width:110px;
    height:110px;
    background:#0f62fe;
    color:#fff;
    border-radius:50%;
    margin:0 auto 20px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:38px;
}

/* ==========================================
ACHIEVEMENTS
========================================== */

.achievements{
    padding:120px 0;
    background:#ffffff;
}

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

.achievement-card{
    text-align:center;
    padding:40px;
    border-radius:25px;
    background:#fff;
    box-shadow:0 15px 40px rgba(0,0,0,.06);
    transition:.4s;
}

.achievement-card:hover{
    transform:translateY(-10px);
}

.achievement-card h2{
    font-size:3rem;
    color:#0f62fe;
    margin-bottom:10px;
}

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

.about-cta{
    padding:120px 0;
    background:#f5f7fb;
}

.cta-box{

    background:
    linear-gradient(
        135deg,
        #0f62fe,
        #2f7cff
    );

    padding:80px;

    border-radius:35px;

    text-align:center;

    color:#fff;

    box-shadow:
    0 25px 60px rgba(15,98,254,.25);

}

.cta-box h2{
    font-size:3rem;
    margin-bottom:20px;
}

.cta-box p{
    max-width:700px;
    margin:auto;
    opacity:.95;
    line-height:1.8;
}

.cta-buttons{
    margin-top:35px;
    display:flex;
    justify-content:center;
    gap:20px;
}

.cta-buttons .btn-secondary{
    background:#fff;
    color:#0f62fe;
}

@media(max-width:991px){

    .about-grid,
    .mv-grid,
    .why-grid,
    .process-grid,
    .team-grid,
    .achievement-grid{

        grid-template-columns:1fr;

    }

    .about-hero h1{

        font-size:2.7rem;

    }

    .why-content h2{

        font-size:2.2rem;

    }

    .cta-box{

        padding:50px 30px;

    }

    .cta-box h2{

        font-size:2rem;

    }

    .cta-buttons{

        flex-direction:column;

    }

}

.team-hierarchy{

    padding:100px 0;

    background:#f5f7fb;
}

.team-row{

    display:flex;

    justify-content:center;

    gap:40px;

    margin-top:35px;

    flex-wrap:wrap;
}

.member-box{

    width:500px;

    min-height:280px;

    background:#fff;

    border-radius:25px;

    padding:25px;

    text-align:center;

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

    transition:.4s;
}

.member-box:hover{

    transform:
    translateY(-8px);

    box-shadow:
    0 25px 60px rgba(15,98,254,.15);
}

.member-box img{

    width:110px;

    height:110px;

    border-radius:20px;

    object-fit:cover;

    margin-bottom:15px;
}

.member-box h3{

    font-size:24px;

    margin-bottom:8px;
}

.role{

    color:#0f62fe;

    font-weight:700;

    margin-bottom:15px;
}

.mini-bio{

    color:#666;

    line-height:1.7;

    margin-bottom:20px;

    min-height:60px;
}

.member-btn{

    border:none;

    background:#0f62fe;

    color:#fff;

    padding:12px 24px;

    border-radius:50px;

    cursor:pointer;

    transition:.3s;
}

.member-btn:hover{

    transform:scale(1.05);
}

@media(max-width:768px){

    .member-box{

        width:100%;
    }

}


.team-modal{

    display:none;

    position:fixed;

    inset:0;

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

    z-index:9999;
}

.modal-content{

    background:#fff;

    max-width:700px;

    width:90%;

    margin:60px auto;

    padding:40px;

    border-radius:25px;

    text-align:center;

    animation:popup .3s ease;
}

.modal-content img{

    width:180px;

    height:180px;

    border-radius:20px;

    object-fit:cover;

    margin-bottom:20px;
}

.close-modal{

    float:right;

    font-size:35px;

    cursor:pointer;
}

@keyframes popup{

    from{
        transform:scale(.8);
        opacity:0;
    }

    to{
        transform:scale(1);
        opacity:1;
    }

}

/* ==========================================
COMPANY ACHIEVEMENTS
========================================== */

.company-achievements{

    padding:120px 0;

    background:#f5f7fb;

}

.achievement-showcase{

    display:grid;

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

    gap:30px;

    margin-top:60px;

}

.achievement-box{

    background:#fff;

    padding:40px;

    border-radius:25px;

    text-align:center;

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

    transition:.4s;
}

.achievement-box:hover{

    transform:
    translateY(-10px);

    box-shadow:
    0 25px 60px rgba(15,98,254,.15);

}

.achievement-box i{

    font-size:45px;

    color:#0f62fe;

    margin-bottom:20px;

}

.achievement-box h3{

    font-size:42px;

    color:#0f62fe;

    margin-bottom:10px;

}

.achievement-box p{

    color:#666;

    line-height:1.7;

}

/* Mobile */

@media(max-width:768px){

    .achievement-showcase{

        grid-template-columns:1fr;

    }

}

.journey-section{

    padding:120px 0;

    background:#f5f7fb;

}

.journey-grid{

    display:grid;

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

    gap:30px;

    margin-top:60px;

}

.journey-card{

    background:#fff;

    padding:40px;

    border-radius:25px;

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

    transition:.4s;

}

.journey-card:hover{

    transform:translateY(-10px);

    box-shadow:0 25px 60px rgba(15,98,254,.15);

}

.journey-card i{

    font-size:42px;

    color:#0f62fe;

    margin-bottom:20px;

}

.journey-card h3{

    margin-bottom:15px;

}

.journey-card p{

    color:#667085;

    line-height:1.8;

}

@media(max-width:991px){

    .journey-grid{

        grid-template-columns:1fr;

    }

}

/* WHATSAPP FLOATING BUTTON */

.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:#fff;

    font-size:30px;

    z-index:9999;

    box-shadow:
    0 10px 30px rgba(37,211,102,.35);

    animation:whatsappFloat 3s ease-in-out infinite;

}

.floating-whatsapp:hover{

    transform:scale(1.1);

}

@keyframes whatsappFloat{

    0%{
        transform:translateY(0);
    }

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

    100%{
        transform:translateY(0);
    }

}

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

.footer{

    background:#0b0f1a;

    color:#fff;

    padding-top:90px;

}

.footer-grid{

    display:grid;

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

    gap:50px;

    padding-bottom:60px;

}

.footer-logo{

    display:flex;

    align-items:center;

    gap:15px;

    margin-bottom:20px;

}

.footer-logo-icon{

    width:60px;

    height:60px;

    background:#0f62fe;

    border-radius:18px;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:24px;

    font-weight:800;

}

.footer-description{

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

    line-height:1.8;

    margin-bottom:25px;

}

.footer-column h4{

    margin-bottom:20px;

    font-size:18px;

}

.footer-column ul{

    list-style:none;

    padding:0;

}

.footer-column li{

    margin-bottom:12px;

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

}

.footer-column a{

    text-decoration:none;

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

    transition:.3s;

}

.footer-column a:hover{

    color:#0f62fe;

    padding-left:6px;

}

.footer-social{

    display:flex;

    gap:12px;

}

.footer-social a{

    width:48px;

    height:48px;

    border-radius:14px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:
    rgba(255,255,255,.08);

    color:#fff;

    text-decoration:none;

    transition:.35s;

}

.footer-social a:hover{

    background:#0f62fe;

    transform:
    translateY(-5px);

}

.footer-bottom{

    padding:25px 0;

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

    text-align:center;

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

}

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

@media(max-width:992px){

    .footer-grid{

        grid-template-columns:
        1fr 1fr;

    }

}

@media(max-width:768px){

    .footer{

        text-align:center;

    }

    .footer-grid{

        grid-template-columns:
        1fr;

    }

    .footer-logo{

        justify-content:center;

    }

    .footer-social{

        justify-content:center;

    }

}

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

.navbar{

    position:sticky;

    top:0;

    z-index:9999;

    background:rgba(255,255,255,.95);

    backdrop-filter:blur(15px);

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

}

.nav-wrapper{

    width:min(1250px,94%);

    margin:auto;

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:18px 0;

}

.logo{

    display:flex;

    align-items:center;

    gap:12px;

    text-decoration:none;

}

.logo-icon{

    width:50px;

    height:50px;

    border-radius:14px;

    background:linear-gradient(
    135deg,
    #0f62fe,
    #2f7cff
    );

    display:flex;

    align-items:center;

    justify-content:center;

    color:#fff;

    font-weight:800;

    font-size:22px;

}

.logo-text{

    display:flex;

    flex-direction:column;

}

.logo-text span:first-child{

    font-weight:800;

    color:#111827;

    font-size:18px;

}

.logo-text span:last-child{

    color:#6b7280;

    font-size:12px;

}

.nav-links{

    display:flex;

    gap:28px;

}

.nav-links a{

    text-decoration:none;

    color:#374151;

    font-weight:600;

    transition:.3s;

}

.nav-links a:hover,
.nav-links a.active{

    color:#0f62fe;

}

.nav-btn{

    background:#0f62fe;

    color:#fff;

    text-decoration:none;

    padding:14px 28px;

    border-radius:14px;

    font-weight:700;

    transition:.3s;

}

.nav-btn:hover{

    transform:translateY(-3px);

}

.menu-toggle{

    display:none;

    border:none;

    background:none;

    font-size:24px;

    cursor:pointer;

}

/* MOBILE */

@media(max-width:992px){

    .nav-links{

        display:none;

    }

    .nav-btn{

        display:none;

    }

    .menu-toggle{

        display:block;

    }

}

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

.navbar{

    position:sticky;

    top:0;

    z-index:9999;

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

    backdrop-filter:
    blur(15px);

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

    transition:.35s;

}

.navbar.scrolled{

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

}

.nav-wrapper{

    width:min(1280px,94%);

    margin:auto;

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:18px 0;

}

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

.logo{

    display:flex;

    align-items:center;

    gap:12px;

    text-decoration:none;

}

.logo-icon{

    width:52px;

    height:52px;

    border-radius:16px;

    background:
    linear-gradient(
    135deg,
    #0f62fe,
    #3f86ff
    );

    display:flex;

    align-items:center;

    justify-content:center;

    color:#fff;

    font-size:22px;

    font-weight:800;

    box-shadow:
    0 10px 25px rgba(15,98,254,.25);

    transition:.35s;

}

.logo:hover .logo-icon{

    transform:
    rotate(-8deg)
    scale(1.08);

}

.logo-text{

    display:flex;

    flex-direction:column;

}

.logo-text span:first-child{

    font-size:18px;

    font-weight:800;

    color:#111827;

}

.logo-text span:last-child{

    font-size:12px;

    color:#6b7280;

}

/* ==========================================
NAVIGATION
========================================== */

.nav-links{

    display:flex;

    align-items:center;

    gap:30px;

}

.nav-links a{

    text-decoration:none;

    color:#374151;

    font-weight:600;

    position:relative;

    transition:.35s;

}

.nav-links a:hover,
.nav-links a.active{

    color:#0f62fe;

}

.nav-links a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-8px;

    width:0;

    height:2px;

    background:#0f62fe;

    transition:.35s;

}

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

    width:100%;

}

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

.nav-btn{

    background:
    linear-gradient(
    135deg,
    #0f62fe,
    #3f86ff
    );

    color:#fff;

    text-decoration:none;

    padding:14px 28px;

    border-radius:14px;

    font-weight:700;

    transition:.35s;

    box-shadow:
    0 10px 25px rgba(15,98,254,.2);

}

.nav-btn:hover{

    transform:
    translateY(-4px)
    scale(1.04);

}

/* ==========================================
MOBILE MENU BUTTON
========================================== */

.menu-toggle{

    display:none;

    border:none;

    background:none;

    font-size:26px;

    cursor:pointer;

    color:#0f62fe;

}

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

@media(max-width:1100px){

    .nav-links{

        display:none;

    }

    .nav-btn{

        display:none;

    }

    .menu-toggle{

        display:block;

    }

}

@media(max-width:768px){

    .logo-text span:first-child{

        font-size:15px;

    }

    .logo-text span:last-child{

        font-size:10px;

    }

    .logo-icon{

        width:46px;

        height:46px;

    }

}

/* MOBILE MENU */

.mobile-overlay{

    position:fixed;
    inset:0;

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

    opacity:0;
    visibility:hidden;

    transition:.3s;

    z-index:9998;
}

.mobile-overlay.active{

    opacity:1;
    visibility:visible;
}

.mobile-menu{

    position:fixed;

    top:0;
    right:-100%;

    width:320px;
    height:100%;

    background:#fff;

    z-index:9999;

    padding:30px;

    transition:.4s ease;
}

.mobile-menu.active{

    right:0;
}

.mobile-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:30px;
}

.close-menu{

    border:none;

    background:#f3f4f6;

    width:45px;
    height:45px;

    border-radius:12px;

    cursor:pointer;
}

.mobile-menu nav{

    display:flex;

    flex-direction:column;

    gap:15px;
}

.mobile-menu nav a{

    text-decoration:none;

    color:#111827;

    padding:14px;

    border-radius:12px;

    font-weight:600;
}

.mobile-menu nav a:hover{

    background:#0f62fe;

    color:#fff;
}

/* ==========================================
WHO WE ARE
========================================== */

.who-we-are{

    padding:120px 0;

    background:#fff;

}

.section-subtitle{

    max-width:700px;

    margin:20px auto 0;

    color:#6b7280;

    line-height:1.8;

    font-size:17px;

}

.about-grid{

    display:grid;

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

    gap:30px;

    margin-top:60px;

}

.about-card{

    background:#fff;

    border-radius:24px;

    padding:40px 30px;

    text-align:center;

    border:1px solid rgba(15,98,254,.08);

    transition:.4s;

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

}

.about-card:hover{

    transform:
    translateY(-10px);

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

}

.about-icon{

    width:85px;

    height:85px;

    margin:auto auto 25px;

    border-radius:22px;

    background:
    linear-gradient(
    135deg,
    #0f62fe,
    #3f86ff
    );

    display:flex;

    align-items:center;

    justify-content:center;

    color:#fff;

    font-size:32px;

}

.about-card h3{

    margin-bottom:15px;

    font-size:24px;

}

.about-card p{

    color:#6b7280;

    line-height:1.8;

}

@media(max-width:992px){

    .about-grid{

        grid-template-columns:1fr;

    }

}

/* ==========================================
COMPANY STATS
========================================== */

.about-stats{

    padding:100px 0;

    background:#f8fbff;

}

.stats-grid{

    display:grid;

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

    gap:25px;

    margin-top:50px;

}

.stat-card{

    background:#ffffff;

    padding:40px 20px;

    text-align:center;

    border-radius:20px;

    transition:.35s;

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

    border:1px solid rgba(15,98,254,.08);

}

.stat-card:hover{

    transform:translateY(-8px);

    box-shadow:0 20px 50px rgba(15,98,254,.12);

}

.stat-card h2{

    font-size:42px;

    font-weight:800;

    color:#0f62fe;

    margin-bottom:10px;

}

.stat-card p{

    color:#6b7280;

    font-weight:600;

}

@media(max-width:992px){

    .stats-grid{

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

    }

}

@media(max-width:600px){

    .stats-grid{

        grid-template-columns:1fr;

    }

}

/* ==========================================
MISSION & VISION
========================================== */

.mission-vision{

    padding:120px 0;

    background:#ffffff;

}

.mv-grid{

    display:grid;

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

    gap:30px;

    margin-top:60px;

}

.mv-card{

    background:#fff;

    padding:45px 35px;

    border-radius:24px;

    text-align:center;

    border:1px solid rgba(15,98,254,.08);

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

    transition:.35s;

}

.mv-card:hover{

    transform:translateY(-10px);

    box-shadow:0 20px 50px rgba(15,98,254,.12);

}

.mv-icon{

    width:90px;

    height:90px;

    margin:0 auto 25px;

    border-radius:22px;

    background:linear-gradient(
        135deg,
        #0f62fe,
        #3f86ff
    );

    display:flex;

    align-items:center;

    justify-content:center;

    color:#fff;

    font-size:34px;

}

.mv-card h3{

    margin-bottom:15px;

    font-size:26px;

    color:#111827;

}

.mv-card p{

    line-height:1.8;

    color:#6b7280;

}

@media(max-width:768px){

    .mv-grid{

        grid-template-columns:1fr;

    }

}

/* ACHIEVEMENT HOVER */

.achievement-box{

    transition:.35s ease;

}

.achievement-box:hover{

    transform:
    translateY(-10px);

}

.floating-whatsapp{

    position:fixed;

    right:25px;
    bottom:25px;

    width:65px;
    height:65px;

    background:#25d366;

    color:#fff;

    border-radius:50%;

    display:flex;

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

    font-size:30px;

    text-decoration:none;

    z-index:9999;

    box-shadow:
    0 15px 35px rgba(37,211,102,.3);

    animation:
    whatsappFloat 3s ease infinite;

}

@keyframes whatsappFloat{

    50%{

        transform:
        translateY(-10px);

    }

}


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

.services-hero{

    padding:140px 0 110px;

    background:
    linear-gradient(
    180deg,
    #f8fbff,
    #ffffff
    );

    text-align:center;

    position:relative;

    overflow:hidden;

}

.services-hero::before{

    content:"";

    position:absolute;

    width:500px;
    height:500px;

    background:
    rgba(15,98,254,.05);

    border-radius:50%;

    top:-250px;
    right:-150px;

}

.services-hero::after{

    content:"";

    position:absolute;

    width:400px;
    height:400px;

    background:
    rgba(15,98,254,.04);

    border-radius:50%;

    bottom:-220px;
    left:-120px;

}

.services-hero-content{

    max-width:850px;

    margin:auto;

    position:relative;

    z-index:2;

}

.services-hero h1{

    font-size:58px;

    line-height:1.15;

    margin:20px 0;

    color:#111827;

}

.services-hero p{

    font-size:18px;

    line-height:1.9;

    color:#6b7280;

    max-width:720px;

    margin:auto;

}

.hero-buttons{

    display:flex;

    justify-content:center;

    gap:20px;

    margin-top:40px;

    flex-wrap:wrap;

}

.hero-btn-primary{

    background:
    linear-gradient(
    135deg,
    #0f62fe,
    #2f7cff
    );

    color:#fff;

    text-decoration:none;

    padding:16px 32px;

    border-radius:16px;

    font-weight:700;

    transition:.35s;

    box-shadow:
    0 15px 35px rgba(15,98,254,.25);

}

.hero-btn-primary:hover{

    transform:
    translateY(-5px);

}

.hero-btn-secondary{

    border:2px solid #0f62fe;

    color:#0f62fe;

    text-decoration:none;

    padding:16px 32px;

    border-radius:16px;

    font-weight:700;

    transition:.35s;

}

.hero-btn-secondary:hover{

    background:#0f62fe;

    color:#fff;

}

@media(max-width:768px){

    .services-hero{

        padding:120px 0 90px;

    }

    .services-hero h1{

        font-size:38px;

    }

}

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

.services-section{

    padding:110px 0;

    background:#ffffff;

}

.services-grid{

    display:grid;

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

    gap:30px;

    margin-top:70px;

}

.service-card{

    background:#fff;

    padding:40px 30px;

    border-radius:24px;

    text-align:center;

    transition:.4s;

    border:1px solid #eef2ff;

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

}

.service-card:hover{

    transform:
    translateY(-10px);

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

}

.service-card i{

    width:85px;
    height:85px;

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

    margin:auto auto 25px;

    border-radius:22px;

    background:
    linear-gradient(
    135deg,
    #0f62fe,
    #2f7cff
    );

    color:#fff;

    font-size:32px;

}

.service-card h3{

    font-size:24px;

    margin-bottom:15px;

    color:#111827;

}

.service-card p{

    color:#6b7280;

    line-height:1.8;

}

/* RESPONSIVE */

@media(max-width:992px){

    .services-grid{

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

    }

}

@media(max-width:768px){

    .services-grid{

        grid-template-columns:1fr;

    }

}

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

.services-cta{

    padding:120px 0;

    background:#f8fbff;

}

.cta-box{

    max-width:1000px;

    margin:auto;

    text-align:center;

    padding:80px 60px;

    border-radius:35px;

    background:
    linear-gradient(
    135deg,
    #0f62fe,
    #2f7cff
    );

    color:#fff;

    position:relative;

    overflow:hidden;

    box-shadow:
    0 30px 80px rgba(15,98,254,.25);

}

.cta-box::before{

    content:"";

    position:absolute;

    width:350px;
    height:350px;

    border-radius:50%;

    background:
    rgba(255,255,255,.08);

    top:-150px;
    right:-100px;

}

.cta-box::after{

    content:"";

    position:absolute;

    width:250px;
    height:250px;

    border-radius:50%;

    background:
    rgba(255,255,255,.06);

    bottom:-120px;
    left:-80px;

}

.cta-badge{

    display:inline-block;

    padding:10px 18px;

    border-radius:999px;

    background:
    rgba(255,255,255,.15);

    font-size:13px;

    font-weight:700;

    letter-spacing:1px;

    margin-bottom:20px;

}

.cta-box h2{

    font-size:52px;

    margin-bottom:20px;

}

.cta-box p{

    max-width:700px;

    margin:auto;

    line-height:1.9;

    font-size:18px;

    opacity:.95;

}

.cta-buttons{

    margin-top:40px;

    display:flex;

    justify-content:center;

    gap:20px;

    flex-wrap:wrap;

}

.cta-btn-primary{

    background:#fff;

    color:#0f62fe;

    text-decoration:none;

    padding:16px 34px;

    border-radius:16px;

    font-weight:700;

    transition:.35s;

}

.cta-btn-primary:hover{

    transform:
    translateY(-5px);

}

.cta-btn-secondary{

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

    color:#fff;

    text-decoration:none;

    padding:16px 34px;

    border-radius:16px;

    font-weight:700;

    display:flex;

    align-items:center;

    gap:10px;

    transition:.35s;

}

.cta-btn-secondary:hover{

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

    transform:
    translateY(-5px);

}

@media(max-width:768px){

    .cta-box{

        padding:50px 25px;

    }

    .cta-box h2{

        font-size:34px;

    }

}

.footer h3,
.footer h4{
    color:#ffffff !important;
}

.footer-logo p{
    color:#d1d5db !important;
}

.footer-column ul li{
    color:#d1d5db !important;
}

.footer-column ul li a{
    color:#d1d5db !important;
}

.footer-column ul li a:hover{
    color:#ffffff !important;
}

@media(max-width:992px){

    .services-grid{

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

    }

}

@media(max-width:768px){

    .services-grid{

        grid-template-columns:1fr;

    }

}

/* ==========================================
FOOTER FIX (IMPORTANT)
========================================== */

.footer{
    background:#0b1220;
    color:#fff;
    padding:80px 0 20px;
}

.footer-container{
    width:min(1200px,92%);
    margin:auto;
}

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

.footer-logo{
    display:flex;
    align-items:center;
    gap:12px;
    margin-bottom:15px;
}

.footer-logo-icon{
    width:45px;
    height:45px;
    border-radius:12px;
    background:linear-gradient(135deg,#0f62fe,#2f7cff);
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:800;
    color:#fff;
}

.footer-logo-text h3{
    font-size:18px;
    margin:0;
}

.footer-logo-text p{
    font-size:12px;
    color:#aaa;
}

.footer-description{
    color:#bbb;
    font-size:14px;
    line-height:1.6;
    margin-top:10px;
}

.footer-column h4{
    margin-bottom:15px;
    color:#fff;
}

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

.footer-column ul li{
    margin-bottom:10px;
    color:#bbb;
}

.footer-column ul li a{
    color:#bbb;
    text-decoration:none;
    transition:.3s;
}

.footer-column ul li a:hover{
    color:#0f62fe;
}

.footer-social{
    display:flex;
    gap:12px;
    margin-top:15px;
}

.footer-social a{
    width:40px;
    height:40px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:#111a2e;
    color:#fff;
    transition:.3s;
}

.footer-social a:hover{
    background:#0f62fe;
    transform:translateY(-3px);
}

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

/* RESPONSIVE FIX */
@media(max-width:900px){
    .footer-grid{
        grid-template-columns:repeat(2,1fr);
    }
}

@media(max-width:600px){
    .footer-grid{
        grid-template-columns:1fr;
    }
}

/* ==========================================
FOOTER (FIXED + PREMIUM)
========================================== */

.footer {
    background: #0b0f1a;
    color: #fff;
    padding-top: 90px;
    margin-top: 80px;
}

.footer .container {
    max-width: 1200px;
    margin: auto;
    padding: 0 20px;
}

.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1.2fr;
    gap: 50px;
    padding-bottom: 60px;
}

/* LOGO */
.footer-logo {
    display: flex;
    gap: 15px;
    align-items: center;
    margin-bottom: 20px;
}

.footer-logo-icon {
    width: 60px;
    height: 60px;
    background: #0f62fe;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 18px;
    font-size: 24px;
    font-weight: 800;
}

.footer-description {
    color: rgba(255,255,255,0.65);
    line-height: 1.8;
    margin-bottom: 25px;
}

/* HEADINGS */
.footer-column h4 {
    margin-bottom: 20px;
    font-size: 18px;
}

/* LISTS */
.footer-column ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-column li {
    margin-bottom: 12px;
    color: rgba(255,255,255,0.7);
}

/* LINKS */
.footer-column a {
    text-decoration: none;
    color: rgba(255,255,255,0.7);
    transition: 0.3s;
}

.footer-column a:hover {
    color: #fff;
    padding-left: 6px;
}

/* SOCIAL */
.footer-social {
    display: flex;
    gap: 12px;
}

.footer-social a {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.08);
    color: #fff;
    text-decoration: none;
    transition: 0.35s;
}

.footer-social a:hover {
    background: #0f62fe;
    transform: translateY(-5px);
}

/* BOTTOM */
.footer-bottom {
    padding: 25px 0;
    border-top: 1px solid rgba(255,255,255,0.08);
    text-align: center;
    color: rgba(255,255,255,0.65);
}

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

.floating-whatsapp {
    position: fixed;
    bottom: 25px;
    right: 25px;
    width: 65px;
    height: 65px;
    border-radius: 50%;
    background: #25d366;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    color: #fff;
    text-decoration: none;
    z-index: 999;
    box-shadow: 0 15px 35px rgba(37,211,102,0.3);
    animation: floatWhatsapp 3s infinite ease;
}

@keyframes floatWhatsapp {
    50% {
        transform: translateY(-10px);
    }
}

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

#backToTop {
    position: fixed;
    bottom: 100px;
    right: 25px;
    width: 55px;
    height: 55px;
    border: none;
    background: #0f62fe;
    color: #fff;
    border-radius: 16px;
    cursor: pointer;
    display: none;
    z-index: 999;
    font-size: 18px;
    transition: 0.35s;
}

#backToTop:hover {
    transform: translateY(-5px);
}

.navbar {
  animation: navDrop .8s ease;
}

@keyframes navDrop {
  from {
    transform: translateY(-20px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.about-floating{

position:absolute;

background:#fff;

padding:15px 20px;

border-radius:18px;

font-weight:700;

display:flex;

align-items:center;

gap:12px;

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

z-index:2;

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

}

.about-floating i{

color:#0f62fe;

font-size:20px;

}

.about-floating strong{

display:block;

color:#0b0f1a;

font-size:15px;

}

.about-floating span{

font-size:13px;

color:#667085;

}

.floating-1{
bottom:30px;
left:30px;
}

.floating-2{
top:35px;
left:30px;
animation-delay:.5s;
}

.floating-3{
top:120px;
right:30px;
animation-delay:1s;
}

.floating-4{
bottom:120px;
right:30px;
animation-delay:1.5s;
}

@keyframes floatBox{

0%,100%{
transform:translateY(0);
}

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

}

.floating-1{
    bottom:30px;
    left:30px;
}

.floating-2{
    top:30px;
    left:30px;
}

.floating-3{
    top:120px;
    right:30px;
}

.floating-4{
    bottom:120px;
    right:30px;
}