*{margin:0;padding:0;box-sizing:border-box}html{scroll-behavior:smooth}body{font-family:Poppins,sans-serif;color:#26344d;line-height:1.7;overflow-x:hidden}img{display:block;max-width:100%}a{font-family:inherit}.container{width:min(92%,1240px);margin:auto}:root{--primary:#1769e0;--dark:#101a33;--muted:#64748b;--bg:#f5f8fd;--border:#e4eaf3;--shadow:0 15px 45px rgba(25,55,95,.1)}.site-header{position:fixed;top:0;width:100%;z-index:1000;background:rgba(255,255,255,.97);border-bottom:1px solid var(--border);box-shadow:0 4px 20px rgba(20,40,80,.05)}.nav-container{height:86px;display:flex;align-items:center;justify-content:space-between}.brand img{width:72px;height:62px;object-fit:contain}.main-nav{display:flex;align-items:center;gap:34px}.nav-link,.dropdown-toggle{position:relative;border:0;background:none;text-decoration:none;color:#202b3d;font-size:15px;font-weight:500;cursor:pointer}.nav-link:hover,.dropdown-toggle:hover,.nav-link.active{color:var(--primary)}.nav-link:after{content:"";position:absolute;left:0;bottom:-8px;width:0;height:2px;background:var(--primary);transition:.25s}.nav-link:hover:after,.nav-link.active:after{width:100%}.nav-dropdown{position:relative}.dropdown-menu{position:absolute;top:calc(100% + 24px);right:-20px;width:235px;padding:10px;background:#fff;border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow);opacity:0;visibility:hidden;transform:translateY(10px);transition:.25s}.nav-dropdown:hover .dropdown-menu,.nav-dropdown.open .dropdown-menu{opacity:1;visibility:visible;transform:none}.dropdown-menu a{display:block;padding:11px 14px;text-decoration:none;color:#26344d;border-radius:9px;font-size:14px}.dropdown-menu a:hover{background:#edf5ff;color:var(--primary)}.nav-quote{background:var(--primary);color:white;text-decoration:none;padding:12px 25px;border-radius:50px;font-size:14px;font-weight:600}.nav-quote:hover{background:#0d4fae}.menu-toggle{display:none;border:0;background:none}.menu-toggle span{display:block;width:25px;height:2px;margin:5px;background:#101a33}.hero-section{min-height:760px;padding:160px 0 100px;background:radial-gradient(circle at 90% 20%,rgba(23,105,224,.1),transparent 28%),linear-gradient(135deg,#f7faff,#edf5ff)}.hero-grid{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:70px}.eyebrow,.section-label{display:inline-block;color:var(--primary);font-size:13px;font-weight:700;letter-spacing:1.6px;margin-bottom:12px}.hero-content h1{color:var(--dark);font-size:clamp(44px,5vw,68px);line-height:1.1;margin-bottom:22px}.hero-content h1 span{color:var(--primary)}.hero-tagline{font-size:20px;font-weight:600;color:var(--dark);margin-bottom:13px}.hero-description{max-width:650px;color:var(--muted);font-size:16px;margin-bottom:32px}.hero-buttons{display:flex;gap:14px;flex-wrap:wrap}.btn{display:inline-flex;align-items:center;justify-content:center;text-decoration:none;min-height:50px;padding:12px 26px;border-radius:10px;font-size:14px;font-weight:600;transition:.3s}.btn-primary{background:var(--primary);color:white;box-shadow:0 10px 24px rgba(23,105,224,.22)}.btn-primary:hover,.btn-outline:hover{transform:translateY(-3px)}.btn-outline{border:1px solid #cdd8e8;color:var(--dark);background:white}.btn-light{background:white;color:var(--primary)}.hero-points{display:flex;gap:28px;margin-top:38px}.hero-points div{max-width:230px;padding-left:15px;border-left:3px solid #a9cdfd}.hero-points strong,.hero-points span{display:block}.hero-points strong{font-size:14px;color:var(--dark)}.hero-points span{font-size:12px;color:var(--muted)}.hero-visual{position:relative;min-height:520px;display:flex;align-items:center;justify-content:center}.hero-image-wrap{position:relative;width:100%;max-width:600px}.hero-glow{position:absolute;width:330px;height:330px;right:8%;top:10%;background:rgba(23,105,224,.18);filter:blur(65px);border-radius:50%}.hero-image{position:relative;width:100%;border-radius:22px;box-shadow:0 25px 60px rgba(25,65,120,.2);object-fit:cover}.floating-card{position:absolute;z-index:4;display:flex;align-items:center;gap:10px;padding:12px 16px;background:#fff;border:1px solid #e5edf8;border-radius:12px;box-shadow:var(--shadow);animation:floating 4s ease-in-out infinite}.floating-card strong,.floating-card small{display:block}.floating-card strong{font-size:12px;color:var(--dark)}.floating-card small{font-size:10px;color:var(--muted)}.floating-card b{width:32px;height:32px;display:grid;place-items:center;background:#eaf3ff;color:var(--primary);border-radius:9px}.floating-card-one{left:-20px;bottom:65px}.floating-card-two{right:-20px;top:65px;animation-delay:1s}@keyframes floating{50%{transform:translateY(-9px)}}.section-space{padding:100px 0}.section-heading{max-width:780px;margin:0 auto 55px;text-align:center}.section-heading-left{text-align:left;margin-left:0}.section-heading h2{font-size:clamp(32px,4vw,46px);line-height:1.2;color:var(--dark);margin-bottom:17px}.section-heading p{color:var(--muted);font-size:16px}.service-grid,.work-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}.service-card,.work-card{background:#fff;border:1px solid var(--border);border-radius:18px;box-shadow:0 8px 25px rgba(25,55,95,.05);transition:.35s;overflow:hidden}.service-card{padding:38px 34px}.service-card:hover,.work-card:hover{transform:translateY(-8px);box-shadow:var(--shadow)}.service-icon{width:62px;height:62px;display:grid;place-items:center;margin-bottom:24px;border-radius:50%;background:#eaf3ff;color:var(--primary);font-size:30px}.service-card h3{font-size:21px;line-height:1.35;color:var(--dark);margin-bottom:14px}.service-card p,.work-content p{color:var(--muted);font-size:14px;margin-bottom:20px}.card-link,.work-link{color:var(--primary);text-decoration:none;font-size:14px;font-weight:600}.recent-section{background:var(--bg)}.work-image{height:220px;overflow:hidden;background:#edf4fc}.work-image img{width:100%;height:100%;object-fit:cover;transition:.45s}.work-card:hover .work-image img{transform:scale(1.06)}.work-content{padding:25px}.work-category{color:var(--primary);font-size:11px;font-weight:700;letter-spacing:1.4px}.work-content h3{color:var(--dark);font-size:20px;line-height:1.35;margin:7px 0 10px}.cta-section{padding:85px 0}.cta-box{padding:55px 65px;display:flex;align-items:center;justify-content:space-between;gap:30px;border-radius:24px;background:linear-gradient(120deg,#1162d2,#2080ef);box-shadow:0 20px 50px rgba(23,105,224,.2)}.cta-box .section-label{color:#cfe3ff}.cta-box h2{color:#fff;font-size:40px}.cta-box p{color:#e5f0ff}.site-footer{background:#0d172c;color:#cbd5e1;padding-top:65px}.footer-grid{display:grid;grid-template-columns:1.4fr .7fr 1fr;gap:70px;padding-bottom:45px}.footer-logo img{width:70px;height:60px;object-fit:contain;background:white;border-radius:8px;padding:4px;margin-bottom:18px}.footer-about p,.footer-contact p{color:#aebbd0;font-size:13px;line-height:1.8}.site-footer h3{color:#fff;font-size:17px;margin-bottom:18px}.footer-links a{display:block;width:max-content;margin-bottom:9px;color:#aebbd0;text-decoration:none;font-size:13px}.footer-contact a{color:#aebbd0;text-decoration:none}.footer-bottom{min-height:65px;padding:18px 0;border-top:1px solid rgba(255,255,255,.1);display:flex;justify-content:space-between;gap:20px}.footer-bottom p{color:#8f9db3;font-size:12px}.reveal{opacity:0;transform:translateY(25px);transition:.7s}.reveal.show{opacity:1;transform:none}@media(max-width:900px){.menu-toggle{display:block}.main-nav{position:absolute;left:4%;right:4%;top:80px;display:none;flex-direction:column;align-items:stretch;gap:0;padding:12px;background:#fff;border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow)}.main-nav.open{display:flex}.nav-link,.dropdown-toggle{padding:12px;width:100%;text-align:left}.nav-link:after{display:none}.nav-quote{text-align:center;margin:8px 0}.dropdown-menu{position:static;width:100%;display:none;opacity:1;visibility:visible;transform:none;box-shadow:none;border:0}.nav-dropdown.open .dropdown-menu{display:block}.hero-grid{grid-template-columns:1fr}.hero-content{text-align:center}.hero-description{margin:auto auto 32px}.hero-buttons,.hero-points{justify-content:center}.service-grid,.work-grid{grid-template-columns:repeat(2,1fr)}.footer-grid{grid-template-columns:1fr 1fr}.footer-about{grid-column:1/-1}}@media(max-width:620px){.hero-section{padding-top:125px}.hero-content h1{font-size:40px}.hero-points{flex-direction:column;align-items:center}.floating-card{display:none}.section-space{padding:70px 0}.service-grid,.work-grid,.footer-grid{grid-template-columns:1fr}.section-heading-left{text-align:center;margin:auto}.cta-box{padding:35px 25px;flex-direction:column;text-align:center}.cta-box h2{font-size:30px}.footer-bottom{flex-direction:column;text-align:center}}
/* =========================================================
   PRODUCTS DROPDOWN
========================================================= */

.nav-dropdown {
    position: relative;
    display: flex;
    align-items: center;
}


/* Products button */

.dropdown-toggle {
    border: none;
    outline: none;
    background: transparent;

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

    font-size: 15px;
    font-weight: 500;

    color: #172033;

    cursor: pointer;

    padding: 10px 8px;

    display: flex;
    align-items: center;
    gap: 6px;

    transition: all 0.3s ease;
}


/* Hover */

.dropdown-toggle:hover {
    color: #1769e0;
}


/* Arrow */

.dropdown-arrow {
    font-size: 14px;

    transition: transform 0.3s ease;
}


/* Rotate arrow */

.nav-dropdown.open .dropdown-arrow {
    transform: rotate(180deg);
}


/* =========================================================
   DROPDOWN MENU
========================================================= */

.dropdown-menu {
    position: absolute;

    top: calc(100% + 12px);

    right: 0;

    width: 245px;

    background: #ffffff;

    border-radius: 12px;

    padding: 8px;

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

    border: 1px solid #e7edf5;

    opacity: 0;

    visibility: hidden;

    transform: translateY(10px);

    transition:
        opacity 0.25s ease,
        transform 0.25s ease,
        visibility 0.25s ease;

    z-index: 9999;
}


/* Show dropdown */

.nav-dropdown.open .dropdown-menu {

    opacity: 1;

    visibility: visible;

    transform: translateY(0);

}


/* Dropdown links */

.dropdown-menu a {

    display: flex;

    align-items: center;

    gap: 10px;

    width: 100%;

    padding: 12px 14px;

    border-radius: 8px;

    text-decoration: none;

    color: #263247;

    font-size: 14px;

    font-weight: 500;

    transition: all 0.2s ease;

}


/* Dropdown hover */

.dropdown-menu a:hover {

    background: #eef5ff;

    color: #1769e0;

    padding-left: 18px;

}


/* Small blue dot */

.product-dot {

    width: 7px;

    height: 7px;

    background: #1769e0;

    border-radius: 50%;

    flex-shrink: 0;

}


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

@media (max-width: 768px) {

    .nav-dropdown {

        width: 100%;

        display: block;

    }


    .dropdown-toggle {

        width: 100%;

        justify-content: center;

        padding: 12px;

    }


    .dropdown-menu {

        position: static;

        width: 100%;

        margin-top: 5px;

        box-shadow: none;

        border: 1px solid #e5eaf2;

        transform: none;

        display: none;

    }


    .nav-dropdown.open .dropdown-menu {

        display: block;

        opacity: 1;

        visibility: visible;

    }

}

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

.about-hero {
    padding: 150px 0 90px;
    background: linear-gradient(135deg, #f7faff 0%, #edf5ff 100%);
}

.about-hero-grid {
    width: min(92%, 1240px);
    margin: auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 70px;
}

.about-hero-content h1 {
    color: var(--dark);
    font-size: clamp(42px, 5vw, 60px);
    line-height: 1.12;
    margin: 12px 0 24px;
}

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

.about-hero-text {
    font-size: 19px;
    color: #40516d;
    line-height: 1.7;
    margin-bottom: 15px;
}

.about-hero-content > p:not(.about-hero-text) {
    color: var(--muted);
    font-size: 15px;
    line-height: 1.8;
}

.about-hero-visual {
    display: flex;
    justify-content: center;
}

.about-image-wrap {
    position: relative;
    width: 100%;
    max-width: 580px;
}

.about-image-glow {
    position: absolute;
    width: 330px;
    height: 330px;
    right: 5%;
    top: 10%;
    background: rgba(23,105,224,.18);
    filter: blur(65px);
    border-radius: 50%;
}

.about-main-image {
    position: relative;
    z-index: 1;
    width: 100%;
    height: auto;
    border-radius: 22px;
    box-shadow: 0 25px 60px rgba(25,65,120,.18);
}


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

.about-company {
    background: #ffffff;
}

.about-company-grid {
    width: min(92%, 1240px);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: start;
}

.about-company-content h3 {
    color: var(--dark);
    font-size: 27px;
    margin-bottom: 15px;
}

.about-company-content p {
    color: var(--muted);
    font-size: 15px;
    line-height: 1.8;
    margin-bottom: 18px;
}

.about-highlights {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}

.about-highlight {
    display: flex;
    gap: 14px;
    padding: 22px;
    background: #f7faff;
    border: 1px solid var(--border);
    border-radius: 15px;
    transition: .3s;
}

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

.highlight-icon {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #eaf3ff;
    color: var(--primary);
    font-weight: 700;
}

.about-highlight h4 {
    color: var(--dark);
    font-size: 16px;
    margin-bottom: 5px;
}

.about-highlight p {
    color: var(--muted);
    font-size: 13px;
    line-height: 1.6;
    margin: 0;
}


/* =========================================================
   MISSION VISION VALUES
========================================================= */

.mission-section {
    background: var(--bg);
}

.mission-grid {
    width: min(92%, 1240px);
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
}

.mission-card {
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 38px 30px;
    text-align: center;
    box-shadow: 0 8px 25px rgba(25,55,95,.05);
    transition: .35s;
}

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

.mission-icon {
    width: 68px;
    height: 68px;
    margin: 0 auto 20px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #eaf3ff;
    font-size: 29px;
}

.mission-card h3 {
    color: var(--dark);
    font-size: 22px;
    margin-bottom: 13px;
}

.mission-card p {
    color: var(--muted);
    font-size: 14px;
    line-height: 1.8;
}


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

.why-section {
    background: #ffffff;
}

.why-grid {
    width: min(92%, 1240px);
    margin: auto;
    display: grid;
    grid-template-columns: .9fr 1.1fr;
    gap: 70px;
    align-items: center;
}

.why-content h2 {
    color: var(--dark);
    font-size: clamp(32px, 4vw, 46px);
    line-height: 1.2;
    margin: 15px 0;
}

.why-content p {
    color: var(--muted);
    font-size: 15px;
    line-height: 1.8;
}

.why-list {
    display: flex;
    flex-direction: column;
    gap: 17px;
}

.why-item {
    display: flex;
    gap: 20px;
    padding: 22px;
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: 15px;
    transition: .3s;
}

.why-item:hover {
    transform: translateX(6px);
    box-shadow: var(--shadow);
}

.why-number {
    color: var(--primary);
    font-size: 17px;
    font-weight: 800;
}

.why-item h3 {
    color: var(--dark);
    font-size: 17px;
    margin-bottom: 5px;
}

.why-item p {
    color: var(--muted);
    font-size: 13px;
    line-height: 1.6;
}


/* =========================================================
   EXPERTISE
========================================================= */

.expertise-section {
    background: var(--bg);
}

.expertise-grid {
    width: min(92%, 1240px);
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
}

.expertise-card {
    background: #ffffff;
    padding: 30px;
    border: 1px solid var(--border);
    border-radius: 18px;
    transition: .35s;
}

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

.expertise-icon {
    width: 55px;
    height: 55px;
    display: grid;
    place-items: center;
    margin-bottom: 18px;
    border-radius: 14px;
    background: #eaf3ff;
    font-size: 25px;
}

.expertise-card h3 {
    color: var(--dark);
    font-size: 19px;
    margin-bottom: 8px;
}

.expertise-card p {
    color: var(--muted);
    font-size: 14px;
    line-height: 1.7;
}


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

@media (max-width: 900px) {

    .about-hero-grid,
    .about-company-grid,
    .why-grid {
        grid-template-columns: 1fr;
    }

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

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

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

    .about-hero-content .hero-buttons {
        justify-content: center;
    }

}


@media (max-width: 620px) {

    .about-hero {
        padding-top: 125px;
    }

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

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

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

}

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

.services-hero {
    padding: 145px 0 90px;
    background: linear-gradient(135deg, #f7faff 0%, #edf5ff 100%);
}

.services-hero-grid {
    width: min(92%, 1240px);
    margin: auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 70px;
}

.services-hero-content h1 {
    color: var(--dark);
    font-size: clamp(42px, 5vw, 60px);
    line-height: 1.12;
    margin: 15px 0 25px;
}

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

.services-hero-content > p {
    color: var(--muted);
    font-size: 15px;
    line-height: 1.8;
    max-width: 620px;
}

.services-hero-text {
    color: #40516d !important;
    font-size: 19px !important;
    line-height: 1.7 !important;
    margin-bottom: 15px;
}

.services-hero-visual {
    display: flex;
    justify-content: center;
}

.services-image-wrap {
    position: relative;
    width: 100%;
    max-width: 570px;
}

.services-image-glow {
    position: absolute;
    width: 340px;
    height: 340px;
    top: 10%;
    right: 5%;
    border-radius: 50%;
    background: rgba(23, 105, 224, .18);
    filter: blur(65px);
}

.services-main-image {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    height: auto;
    border-radius: 22px;
    box-shadow: 0 25px 60px rgba(25, 65, 120, .18);
}


/* =========================================================
   SERVICE CARDS
========================================================= */

.services-overview {
    background: #ffffff;
}

.services-card-grid {
    width: min(92%, 1240px);
    margin: auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
}

.services-detail-card {
    position: relative;
    background: #ffffff;
    padding: 32px 28px;
    border: 1px solid var(--border);
    border-radius: 18px;
    box-shadow: 0 8px 25px rgba(25, 55, 95, .05);
    overflow: hidden;
    transition: .35s;
}

.services-detail-card::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 4px;
    background: var(--primary);
    transform: scaleX(0);
    transform-origin: left;
    transition: .35s;
}

.services-detail-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow);
}

.services-detail-card:hover::before {
    transform: scaleX(1);
}

.services-card-icon {
    width: 58px;
    height: 58px;
    display: grid;
    place-items: center;
    border-radius: 15px;
    background: #eaf3ff;
    font-size: 27px;
    margin-bottom: 20px;
}

.services-number {
    position: absolute;
    top: 25px;
    right: 25px;
    color: #d9e8fb;
    font-size: 32px;
    font-weight: 800;
}

.services-detail-card h3 {
    color: var(--dark);
    font-size: 20px;
    line-height: 1.35;
    margin-bottom: 12px;
    padding-right: 35px;
}

.services-detail-card > p {
    color: var(--muted);
    font-size: 14px;
    line-height: 1.7;
    margin-bottom: 18px;
}

.services-detail-card ul {
    list-style: none;
    padding: 0;
    margin: 0 0 22px;
}

.services-detail-card ul li {
    position: relative;
    color: #52627a;
    font-size: 13px;
    padding: 5px 0 5px 20px;
}

.services-detail-card ul li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--primary);
    font-weight: 700;
}

.service-read-more {
    color: var(--primary);
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
}

.service-read-more:hover {
    color: #0b56bd;
}


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

.service-process {
    background: var(--bg);
}

.process-grid {
    width: min(92%, 1240px);
    margin: auto;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 25px;
}

.process-item {
    position: relative;
    background: #ffffff;
    padding: 30px 25px;
    border: 1px solid var(--border);
    border-radius: 18px;
    transition: .3s;
}

.process-item:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow);
}

.process-number {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    margin-bottom: 18px;
    border-radius: 50%;
    background: #eaf3ff;
    color: var(--primary);
    font-size: 14px;
    font-weight: 800;
}

.process-item h3 {
    color: var(--dark);
    font-size: 19px;
    margin-bottom: 10px;
}

.process-item p {
    color: var(--muted);
    font-size: 13px;
    line-height: 1.7;
}


/* =========================================================
   INDUSTRIES
========================================================= */

.industries-section {
    background: #ffffff;
}

.industry-grid {
    width: min(92%, 1240px);
    margin: auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}

.industry-card {
    padding: 28px;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: #ffffff;
    transition: .3s;
}

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

.industry-card > div {
    width: 50px;
    height: 50px;
    display: grid;
    place-items: center;
    margin-bottom: 15px;
    border-radius: 13px;
    background: #eaf3ff;
    font-size: 23px;
}

.industry-card h3 {
    color: var(--dark);
    font-size: 18px;
    margin-bottom: 7px;
}

.industry-card p {
    color: var(--muted);
    font-size: 13px;
    line-height: 1.7;
}


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

@media (max-width: 1000px) {

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

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

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

}


@media (max-width: 900px) {

    .services-hero-grid {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .services-hero-content {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .services-hero-content > p {
        max-width: 700px;
    }

    .services-hero-visual {
        margin-top: 20px;
    }

}


@media (max-width: 650px) {

    .services-hero {
        padding-top: 125px;
    }

    .services-card-grid,
    .process-grid,
    .industry-grid {
        grid-template-columns: 1fr;
    }

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

    .services-main-image {
        border-radius: 15px;
    }

}

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

.contact-hero {
    padding: 145px 0 90px;
    background: linear-gradient(135deg, #f7faff 0%, #edf5ff 100%);
}

.contact-hero-grid {
    width: min(92%, 1240px);
    margin: auto;

    display: grid;
    grid-template-columns: 1fr 1fr;

    align-items: center;

    gap: 70px;
}

.contact-hero-content h1 {
    color: var(--dark);

    font-size: clamp(42px, 5vw, 60px);

    line-height: 1.12;

    margin: 15px 0 25px;
}

.contact-hero-content h1 span {
    display: block;

    color: var(--primary);
}

.contact-hero-content > p {
    color: var(--muted);

    font-size: 15px;

    line-height: 1.8;

    max-width: 620px;
}

.contact-hero-text {
    color: #40516d !important;

    font-size: 19px !important;

    line-height: 1.7 !important;

    margin-bottom: 12px;
}

.contact-hero-visual {
    display: flex;

    justify-content: center;
}

.contact-image-wrap {
    position: relative;

    width: 100%;

    max-width: 570px;
}

.contact-image-glow {
    position: absolute;

    width: 340px;
    height: 340px;

    top: 10%;
    right: 5%;

    border-radius: 50%;

    background: rgba(23, 105, 224, .18);

    filter: blur(65px);
}

.contact-main-image {
    position: relative;

    z-index: 1;

    display: block;

    width: 100%;

    height: auto;

    border-radius: 22px;

    box-shadow:
        0 25px 60px rgba(25, 65, 120, .18);
}


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

.contact-information {
    background: #ffffff;
}

.contact-info-grid {
    width: min(92%, 1100px);

    margin: auto;

    display: grid;

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

    gap: 25px;
}

.contact-info-card {
    padding: 32px 28px;

    background: #ffffff;

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

    border-radius: 18px;

    text-align: center;

    box-shadow:
        0 8px 25px rgba(25, 55, 95, .05);

    transition: .3s;
}

.contact-info-card:hover {
    transform: translateY(-7px);

    box-shadow: var(--shadow);
}

.contact-info-icon {
    width: 65px;
    height: 65px;

    margin: 0 auto 20px;

    display: grid;

    place-items: center;

    border-radius: 18px;

    background: #eaf3ff;

    font-size: 28px;
}

.contact-info-card h3 {
    color: var(--dark);

    font-size: 20px;

    margin-bottom: 12px;
}

.contact-info-card p {
    color: var(--muted);

    font-size: 13px;

    line-height: 1.8;

    margin-bottom: 15px;
}

.contact-info-card a {
    display: inline-block;

    color: var(--primary);

    font-size: 14px;

    font-weight: 700;

    text-decoration: none;
}

.contact-info-card a:hover {
    color: #0b56bd;
}

.contact-info-card small {
    display: block;

    margin-top: 8px;

    color: #8995a8;

    font-size: 11px;
}


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

.contact-form-section {
    background: var(--bg);
}

.contact-form-grid {
    width: min(92%, 1100px);

    margin: auto;

    display: grid;

    grid-template-columns: 1.15fr .85fr;

    gap: 35px;

    align-items: start;
}


/* FORM */

.contact-form-box {
    background: #ffffff;

    padding: 40px;

    border-radius: 20px;

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

    box-shadow:
        0 10px 35px rgba(25, 55, 95, .06);
}

.contact-form-box h2 {
    color: var(--dark);

    font-size: 32px;

    line-height: 1.25;

    margin: 12px 0;
}

.contact-form-box > p {
    color: var(--muted);

    font-size: 14px;

    line-height: 1.7;

    margin-bottom: 28px;
}

.form-row {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 18px;
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;

    margin-bottom: 8px;

    color: var(--dark);

    font-size: 13px;

    font-weight: 600;
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;

    box-sizing: border-box;

    padding: 13px 15px;

    border: 1px solid #dce4ef;

    border-radius: 10px;

    background: #fbfdff;

    color: #1b2942;

    font-family: inherit;

    font-size: 13px;

    outline: none;

    transition: .25s;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    border-color: var(--primary);

    background: #ffffff;

    box-shadow:
        0 0 0 3px rgba(23, 105, 224, .08);
}

.form-group textarea {
    resize: vertical;

    min-height: 140px;
}

.contact-submit {
    border: none;

    cursor: pointer;
}

.form-message {
    display: none;

    margin-top: 15px;

    font-size: 13px;

    font-weight: 600;
}

.form-message.success {
    display: block;

    color: #16834a;
}


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

.contact-side-card {
    padding: 40px;

    border-radius: 20px;

    background:
        linear-gradient(
            145deg,
            #0d1b35,
            #123c75
        );

    color: #ffffff;

    box-shadow:
        0 20px 45px rgba(15, 43, 82, .18);
}

.contact-side-card .section-label {
    color: #83b9ff;
}

.contact-side-card h2 {
    color: #ffffff;

    font-size: 31px;

    line-height: 1.3;

    margin: 15px 0;
}

.contact-side-card > p {
    color: #c7d7ec;

    font-size: 14px;

    line-height: 1.8;

    margin-bottom: 28px;
}

.contact-benefit {
    display: flex;

    gap: 15px;

    margin-bottom: 23px;
}

.benefit-icon {
    flex: 0 0 38px;

    width: 38px;
    height: 38px;

    display: grid;

    place-items: center;

    border-radius: 50%;

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

    color: #83b9ff;

    font-weight: 700;
}

.contact-benefit strong {
    display: block;

    color: #ffffff;

    font-size: 14px;

    margin-bottom: 4px;
}

.contact-benefit span {
    display: block;

    color: #b9cce4;

    font-size: 12px;

    line-height: 1.6;
}


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

@media (max-width: 1000px) {

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

}


@media (max-width: 900px) {

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

        text-align: center;
    }

    .contact-hero-content {
        display: flex;

        flex-direction: column;

        align-items: center;
    }

    .contact-hero-content > p {
        max-width: 700px;
    }

    .contact-hero-visual {
        margin-top: 20px;
    }

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

}


@media (max-width: 650px) {

    .contact-hero {
        padding-top: 125px;
    }

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

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

    .form-row {
        grid-template-columns: 1fr;
    }

    .contact-form-box,
    .contact-side-card {
        padding: 28px 22px;
    }

    .contact-main-image {
        border-radius: 15px;
    }

}

/* =========================================================
   PRODUCT DETAIL PAGE
   ========================================================= */

.product-detail-hero {
    padding: 100px 0;
    background: linear-gradient(135deg, #f5f9ff 0%, #eaf3ff 100%);
    overflow: hidden;
}

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

.product-detail-content {
    max-width: 650px;
}

.product-detail-content h1 {
    margin: 18px 0 20px;
    font-size: clamp(44px, 5vw, 70px);
    line-height: 1.08;
    font-weight: 800;
    color: #111a33;
}

.product-detail-content h1 span {
    color: #1769e8;
}

.product-intro {
    max-width: 600px;
    margin-bottom: 30px;
    font-size: 18px;
    line-height: 1.8;
    color: #60708b;
}

.product-buttons {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 35px;
}

.product-highlights {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
}

.product-highlight {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 15px;
    border-left: 3px solid #2d83f7;
    background: rgba(255, 255, 255, 0.7);
}

.highlight-icon {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #e8f2ff;
    color: #1769e8;
    font-weight: 700;
}

.product-highlight strong {
    display: block;
    color: #111a33;
    font-size: 14px;
}

.product-highlight span {
    display: block;
    margin-top: 3px;
    color: #70809a;
    font-size: 12px;
}

.product-detail-image {
    display: flex;
    justify-content: center;
}

.product-image-frame {
    position: relative;
    width: 100%;
    max-width: 620px;
    padding: 18px;
    border-radius: 28px;
    background: #ffffff;
    box-shadow: 0 25px 60px rgba(30, 80, 140, 0.18);
}

.product-image-frame::before {
    content: "";
    position: absolute;
    width: 180px;
    height: 180px;
    right: -50px;
    top: -50px;
    border-radius: 50%;
    background: rgba(39, 125, 255, 0.12);
    z-index: 0;
}

.product-image-frame img {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    height: 390px;
    object-fit: cover;
    border-radius: 18px;
}


/* =========================================================
   PRODUCT OVERVIEW
   ========================================================= */

.product-overview {
    background: #ffffff;
}

.product-feature-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
    margin-top: 50px;
}

.product-feature-card {
    position: relative;
    padding: 32px 26px;
    background: #ffffff;
    border: 1px solid #e7edf5;
    border-radius: 18px;
    box-shadow: 0 12px 35px rgba(20, 40, 80, 0.07);
    transition: transform 0.3s ease,
                box-shadow 0.3s ease,
                border-color 0.3s ease;
}

.product-feature-card:hover {
    transform: translateY(-8px);
    border-color: #cfe1ff;
    box-shadow: 0 20px 45px rgba(20, 80, 150, 0.12);
}

.feature-number {
    margin-bottom: 22px;
    color: #1769e8;
    font-size: 14px;
    font-weight: 700;
}

.product-feature-card h3 {
    margin-bottom: 12px;
    color: #111a33;
    font-size: 19px;
}

.product-feature-card p {
    margin: 0;
    color: #6c7a91;
    font-size: 14px;
    line-height: 1.7;
}


/* =========================================================
   PRODUCT BENEFITS
   ========================================================= */

.product-benefits {
    padding: 100px 0;
    background: #f5f8fc;
}

.benefits-grid {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    align-items: center;
    gap: 80px;
}

.benefits-content h2 {
    max-width: 650px;
    margin: 15px 0;
    color: #111a33;
    font-size: clamp(32px, 4vw, 48px);
    line-height: 1.15;
}

.benefits-content > p {
    max-width: 650px;
    color: #687791;
    line-height: 1.8;
}

.benefits-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
    margin: 30px 0 0;
    padding: 0;
    list-style: none;
}

.benefits-list li {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #263550;
    font-size: 14px;
    font-weight: 500;
}

.benefits-list li span {
    width: 25px;
    height: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 50%;
    background: #e4f0ff;
    color: #1769e8;
    font-size: 12px;
    font-weight: 700;
}

.benefits-box {
    padding: 45px 35px;
    text-align: center;
    background: #ffffff;
    border-radius: 24px;
    box-shadow: 0 20px 50px rgba(25, 60, 110, 0.10);
}

.benefits-box-icon {
    width: 65px;
    height: 65px;
    margin: 0 auto 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #e8f2ff;
    color: #1769e8;
    font-size: 26px;
    font-weight: 700;
}

.benefits-box h3 {
    margin-bottom: 12px;
    color: #111a33;
    font-size: 25px;
}

.benefits-box p {
    margin-bottom: 25px;
    color: #6c7a91;
    line-height: 1.7;
}


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

@media (max-width: 1000px) {

    .product-detail-grid {
        grid-template-columns: 1fr;
        gap: 50px;
    }

    .product-detail-content {
        max-width: 100%;
        text-align: center;
    }

    .product-intro {
        margin-left: auto;
        margin-right: auto;
    }

    .product-buttons {
        justify-content: center;
    }

    .product-highlights {
        max-width: 650px;
        margin: auto;
    }

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

    .benefits-grid {
        grid-template-columns: 1fr;
        gap: 45px;
    }

}


@media (max-width: 650px) {

    .product-detail-hero {
        padding: 70px 0;
    }

    .product-detail-content h1 {
        font-size: 42px;
    }

    .product-intro {
        font-size: 16px;
    }

    .product-highlights {
        grid-template-columns: 1fr;
    }

    .product-image-frame {
        padding: 10px;
        border-radius: 18px;
    }

    .product-image-frame img {
        height: 270px;
    }

    .product-feature-grid {
        grid-template-columns: 1fr;
    }

    .benefits-list {
        grid-template-columns: 1fr;
    }

    .product-benefits {
        padding: 70px 0;
    }

}
/* =========================================================
   PRODUCT DETAIL PAGES
   GST BILLING / SAMARTHAC / INVESTORAC / MEDICAL SHOP
   ========================================================= */

.product-detail-hero {
    padding: 90px 0;
    background: linear-gradient(135deg, #f5f9ff 0%, #eaf3ff 100%);
    overflow: hidden;
}

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

.product-detail-content {
    max-width: 650px;
}

.product-detail-content h1 {
    margin: 18px 0 22px;
    font-size: clamp(45px, 5vw, 70px);
    line-height: 1.08;
    font-weight: 800;
    color: #111a33;
}

.product-detail-content h1 span {
    display: block;
    color: #1769e8;
}

.product-intro {
    max-width: 600px;
    margin-bottom: 30px;
    font-size: 18px;
    line-height: 1.8;
    color: #60708b;
}

.product-buttons {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 35px;
}

.product-highlights {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
}

.product-highlight {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    background: rgba(255, 255, 255, 0.75);
    border-left: 3px solid #2d83f7;
}

.highlight-icon {
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #e8f2ff;
    color: #1769e8;
    font-weight: 700;
}

.product-highlight strong {
    display: block;
    color: #111a33;
    font-size: 14px;
}

.product-highlight span {
    display: block;
    margin-top: 3px;
    color: #70809a;
    font-size: 12px;
    line-height: 1.5;
}


/* =========================================================
   PRODUCT IMAGE
   ========================================================= */

.product-detail-image {
    display: flex;
    justify-content: center;
    align-items: center;
}

.product-image-frame {
    position: relative;
    width: 100%;
    max-width: 620px;
    padding: 18px;
    background: #ffffff;
    border-radius: 28px;
    box-shadow: 0 25px 60px rgba(30, 80, 140, 0.18);
}

.product-image-frame::before {
    content: "";
    position: absolute;
    width: 180px;
    height: 180px;
    right: -45px;
    top: -45px;
    border-radius: 50%;
    background: rgba(39, 125, 255, 0.12);
    z-index: 0;
}

.product-image-frame::after {
    content: "";
    position: absolute;
    width: 110px;
    height: 110px;
    left: -35px;
    bottom: -30px;
    border-radius: 50%;
    background: rgba(39, 125, 255, 0.08);
    z-index: 0;
}

.product-image-frame img {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    height: 390px;
    object-fit: cover;
    border-radius: 18px;
}


/* =========================================================
   PRODUCT OVERVIEW
   ========================================================= */

.product-overview {
    background: #ffffff;
}

.product-feature-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
    margin-top: 50px;
}

.product-feature-card {
    position: relative;
    padding: 32px 26px;
    background: #ffffff;
    border: 1px solid #e7edf5;
    border-radius: 18px;
    box-shadow: 0 12px 35px rgba(20, 40, 80, 0.07);
    transition: all 0.3s ease;
}

.product-feature-card:hover {
    transform: translateY(-8px);
    border-color: #cfe1ff;
    box-shadow: 0 20px 45px rgba(20, 80, 150, 0.12);
}

.feature-number {
    margin-bottom: 20px;
    color: #1769e8;
    font-size: 14px;
    font-weight: 700;
}

.product-feature-card h3 {
    margin: 0 0 12px;
    color: #111a33;
    font-size: 19px;
    line-height: 1.4;
}

.product-feature-card p {
    margin: 0;
    color: #6c7a91;
    font-size: 14px;
    line-height: 1.7;
}


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

.product-benefits {
    padding: 100px 0;
    background: #f5f8fc;
}

.benefits-grid {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    align-items: center;
    gap: 80px;
}

.benefits-content h2 {
    max-width: 650px;
    margin: 15px 0;
    color: #111a33;
    font-size: clamp(32px, 4vw, 48px);
    line-height: 1.15;
}

.benefits-content > p {
    max-width: 650px;
    color: #687791;
    line-height: 1.8;
}

.benefits-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
    margin: 30px 0 0;
    padding: 0;
    list-style: none;
}

.benefits-list li {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #263550;
    font-size: 14px;
    font-weight: 500;
}

.benefits-list li span {
    width: 26px;
    height: 26px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #e4f0ff;
    color: #1769e8;
    font-size: 12px;
    font-weight: 700;
}

.benefits-box {
    padding: 45px 35px;
    text-align: center;
    background: #ffffff;
    border-radius: 24px;
    box-shadow: 0 20px 50px rgba(25, 60, 110, 0.10);
}

.benefits-box-icon {
    width: 65px;
    height: 65px;
    margin: 0 auto 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #e8f2ff;
    color: #1769e8;
    font-size: 26px;
    font-weight: 700;
}

.benefits-box h3 {
    margin: 0 0 12px;
    color: #111a33;
    font-size: 25px;
    line-height: 1.4;
}

.benefits-box p {
    margin-bottom: 25px;
    color: #6c7a91;
    line-height: 1.7;
}


/* =========================================================
   PRODUCT PAGE ANIMATION
   ========================================================= */

.product-detail-content.reveal,
.product-detail-image.reveal,
.product-feature-card.reveal,
.benefits-content.reveal,
.benefits-box.reveal,
.cta-box.reveal {
    opacity: 0;
    transform: translateY(25px);
    transition: opacity 0.7s ease,
                transform 0.7s ease;
}

.product-detail-content.reveal.show,
.product-detail-image.reveal.show,
.product-feature-card.reveal.show,
.benefits-content.reveal.show,
.benefits-box.reveal.show,
.cta-box.reveal.show {
    opacity: 1;
    transform: translateY(0);
}


/* =========================================================
   RESPONSIVE - TABLET
   ========================================================= */

@media (max-width: 1000px) {

    .product-detail-grid {
        grid-template-columns: 1fr;
        gap: 55px;
    }

    .product-detail-content {
        max-width: 100%;
        text-align: center;
    }

    .product-intro {
        margin-left: auto;
        margin-right: auto;
    }

    .product-buttons {
        justify-content: center;
    }

    .product-highlights {
        max-width: 650px;
        margin: 0 auto;
    }

    .product-detail-image {
        max-width: 700px;
        margin: 0 auto;
        width: 100%;
    }

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

    .benefits-grid {
        grid-template-columns: 1fr;
        gap: 50px;
    }

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

    .benefits-content > p {
        margin-left: auto;
        margin-right: auto;
    }

}


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

@media (max-width: 650px) {

    .product-detail-hero {
        padding: 70px 0;
    }

    .product-detail-content h1 {
        font-size: 42px;
    }

    .product-intro {
        font-size: 16px;
        line-height: 1.7;
    }

    .product-highlights {
        grid-template-columns: 1fr;
    }

    .product-image-frame {
        padding: 10px;
        border-radius: 18px;
    }

    .product-image-frame img {
        height: 270px;
    }

    .product-feature-grid {
        grid-template-columns: 1fr;
    }

    .benefits-list {
        grid-template-columns: 1fr;
        text-align: left;
    }

    .product-benefits {
        padding: 70px 0;
    }

    .benefits-box {
        padding: 35px 22px;
    }

    .product-image-frame::before {
        width: 100px;
        height: 100px;
        right: -20px;
        top: -20px;
    }

}