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

.hero-dashboard {

    position: relative;

    display: flex;

    justify-content: center;

    align-items: center;

    min-height: 720px;

    padding: 50px 20px;

}

/* Background Glow */

.hero-dashboard::before {

    content: "";

    position: absolute;

    width: 520px;

    height: 520px;

    background: radial-gradient(circle,
            rgba(37, 99, 235, .15) 0%,
            rgba(37, 99, 235, .05) 45%,
            transparent 75%);

    border-radius: 50%;

    z-index: 0;

}

.hero-dashboard::after {

    content: "";

    position: absolute;

    width: 420px;

    height: 420px;

    background: radial-gradient(circle,
            rgba(255, 122, 26, .12) 0%,
            transparent 70%);

    right: 20px;
    bottom: 30px;

    border-radius: 50%;

    z-index: 0;

}

/*==========================================
            MAIN DASHBOARD IMAGE
==========================================*/

.dashboard-main {

    width: 100%;

    max-width: 620px;

    position: relative;

    z-index: 2;

    border-radius: 28px;

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

    animation: dashboardFloat 6s ease-in-out infinite;

}

@keyframes dashboardFloat {

    0% {

        transform: translateY(0);

    }

    50% {

        transform: translateY(-12px);

    }

    100% {

        transform: translateY(0);

    }

}

/*==========================================
            FLOATING CARD
==========================================*/

.floating-card {

    position: absolute;

    display: flex;

    align-items: center;

    gap: 15px;

    min-width: 220px;

    padding: 18px 22px;

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

    backdrop-filter: blur(18px);

    -webkit-backdrop-filter: blur(18px);

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

    border-radius: 18px;

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

    z-index: 5;

    transition: .35s;

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

}

.floating-card:hover {

    transform: translateY(-8px) scale(1.03);

    box-shadow:
        0 35px 70px rgba(37, 99, 235, .18);

}

@keyframes floatCard {

    0% {

        transform: translateY(0);

    }

    50% {

        transform: translateY(-8px);

    }

    100% {

        transform: translateY(0);

    }

}

/*==========================================
            ICON
==========================================*/

.floating-card i {

    width: 55px;

    height: 55px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 16px;

    color: #fff;

    font-size: 22px;

    flex-shrink: 0;

}

/* SEO */

.seo-card i {

    background: linear-gradient(135deg, #2563EB, #3B82F6);

}

/* Google Ads */

.ads-card i {

    background: linear-gradient(135deg, #EA4335, #FBBC05);

}

/* CRM */

.crm-card i {

    background: linear-gradient(135deg, #10B981, #34D399);

}

/* Website */

.website-card i {

    background: linear-gradient(135deg, #FF7A1A, #F59E0B);

}

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

.floating-card small {

    display: block;

    color: #64748B;

    font-size: 13px;

    margin-bottom: 4px;

}

.floating-card h5 {

    margin: 0;

    font-size: 20px;

    font-weight: 700;

    color: #0F172A;

}

/*==========================================
        CARD POSITIONS
==========================================*/

.seo-card {

    top: 70px;

    left: -20px;

    animation-delay: .2s;

}

.ads-card {

    top: 140px;

    right: -25px;

    animation-delay: .6s;

}

.crm-card {

    bottom: 150px;

    left: 0;

    animation-delay: 1s;

}

.website-card {

    bottom: 60px;

    right: -10px;

    animation-delay: 1.4s;

}

/*==========================================
        HERO DASHBOARD RESPONSIVE
==========================================*/

@media(max-width:1199px) {

    .hero-dashboard {

        margin-top: 60px;

        min-height: 650px;

    }

    .dashboard-main {

        max-width: 520px;

    }

    .floating-card {

        min-width: 190px;

        padding: 15px 18px;

    }

}

@media(max-width:991px) {

    .hero-dashboard {

        min-height: auto;

        margin-top: 60px;

        padding: 40px 0 100px;

    }

    .dashboard-main {

        max-width: 100%;

    }

    .floating-card {

        min-width: 170px;

        padding: 12px 15px;

    }

    .floating-card i {

        width: 48px;

        height: 48px;

        font-size: 18px;

    }

    .floating-card h5 {

        font-size: 17px;

    }

    .seo-card {

        top: 10px;

        left: 10px;

    }

    .ads-card {

        top: 40px;

        right: 10px;

    }

    .crm-card {

        left: 10px;

        bottom: 90px;

    }

    .website-card {

        right: 10px;

        bottom: 20px;

    }

}

@media(max-width:575px) {

    .hero-dashboard {

        padding-bottom: 120px;

    }

    .floating-card {

        min-width: 150px;

        padding: 10px 12px;

        gap: 10px;

    }

    .floating-card i {

        width: 42px;

        height: 42px;

        font-size: 16px;

        border-radius: 12px;

    }

    .floating-card small {

        font-size: 11px;

    }

    .floating-card h5 {

        font-size: 15px;

    }

    .dashboard-main {

        border-radius: 18px;

    }

}

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

.trusted-section {

    position: relative;

    padding: 120px 0;

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

    overflow: hidden;

}

/* Background Shape */

.trusted-section::before {

    content: "";

    position: absolute;

    width: 600px;

    height: 600px;

    left: -250px;

    top: -250px;

    background:
        radial-gradient(rgba(37, 99, 235, .06),
            transparent 70%);

    border-radius: 50%;

}

.trusted-section::after {

    content: "";

    position: absolute;

    width: 500px;

    height: 500px;

    right: -200px;

    bottom: -250px;

    background:
        radial-gradient(rgba(255, 122, 26, .08),
            transparent 70%);

    border-radius: 50%;

}

/*==================================================
            CLIENT LOGOS
==================================================*/

.trusted-slider {

    position: relative;

    overflow: hidden;

    margin-bottom: 60px;

}

.trusted-track {

    display: flex;

    align-items: center;

    width: max-content;

    animation: logoScroll 40s linear infinite;

}

.trusted-slider:hover .trusted-track {

    animation-play-state: paused;

}

@keyframes logoScroll {

    from {

        transform: translateX(0);

    }

    to {

        transform: translateX(-50%);

    }

}

.trusted-logo {

    width: 220px;

    height: 120px;

    margin: 0 15px;

    background: #fff;

    border-radius: 24px;

    display: flex;

    align-items: center;

    justify-content: center;

    border: 1px solid #edf2f7;

    transition: .35s;

    box-shadow:
        0 12px 35px rgba(15, 23, 42, .05);

}

.trusted-logo:hover {

    transform:

        translateY(-10px) scale(1.05);

    box-shadow:
        0 30px 60px rgba(37, 99, 235, .15);

}

.trusted-logo img {

    max-width: 100%;

    max-height: 100%;

    /* filter:grayscale(100%); */


    transition: .35s;

}

.trusted-logo:hover img {

    filter: none;

    opacity: 1;

}

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

.industry-tags {

    display: flex;

    flex-wrap: wrap;

    justify-content: center;

    gap: 15px;

    margin-bottom: 70px;

}

.industry-tags span {

    padding: 14px 24px;

    background: #fff;

    border-radius: 50px;

    border: 1px solid #E2E8F0;

    font-weight: 600;

    color: #334155;

    transition: .35s;

}

.industry-tags span:hover {

    background:

        linear-gradient(135deg,
            #2563EB,
            #1D4ED8);

    color: #fff;

    transform: translateY(-5px);

}

/*==================================================
            TRUST CARDS
==================================================*/

.trust-card {

    background:

        rgba(255, 255, 255, .72);

    backdrop-filter: blur(20px);

    border-radius: 25px;

    padding: 45px 30px;

    text-align: center;

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

    transition: .45s;

    position: relative;

    overflow: hidden;

    height: 100%;

}

.trust-card::before {

    content: "";

    position: absolute;

    width: 120px;

    height: 120px;

    border-radius: 50%;

    background:

        rgba(37, 99, 235, .06);

    top: -40px;

    right: -40px;

}

.trust-card:hover {

    transform:

        translateY(-12px);

    box-shadow:

        0 30px 70px rgba(37, 99, 235, .15);

}

.trust-card i {

    width: 80px;

    height: 80px;

    margin: auto;

    border-radius: 22px;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 32px;

    color: #fff;

    background:

        linear-gradient(135deg,
            #2563EB,
            #06B6D4);

    margin-bottom: 25px;

}

.trust-card h3 {

    font-size: 42px;

    font-weight: 800;

    color: #081C3A;

    margin-bottom: 10px;

}

.trust-card p {

    color: #64748B;

    line-height: 1.8;

    margin: 0;

}

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

@media(max-width:991px) {

    .trusted-section {

        padding: 80px 0;

    }


    .trusted-logo {

        width: 180px;

        height: 100px;

    }

    .trust-card {

        padding: 35px 25px;

    }

}

@media(max-width:767px) {



    .section-badge {

        font-size: 13px;

        padding: 10px 18px;

    }

    .trusted-logo {

        width: 150px;

        height: 85px;

        margin: 0 10px;

    }

    .trusted-logo img {

        max-width: 100px;

    }

    .industry-tags {

        gap: 10px;

    }

    .industry-tags span {

        padding: 10px 16px;

        font-size: 13px;

    }

    .trust-card {

        margin-bottom: 20px;

    }

    .trust-card i {

        width: 65px;

        height: 65px;

        font-size: 24px;

    }

    .trust-card h3 {

        font-size: 34px;

    }

}

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

.trusted-heading {

    max-width: 1000px;

    margin: auto;

    text-align: center;

    margin-bottom: 80px;

    position: relative;

}

.trusted-mini-title {

    display: inline-flex;

    align-items: center;

    gap: 15px;

    color: #2563EB;

    font-size: 14px;

    font-weight: 700;

    letter-spacing: 3px;

    text-transform: uppercase;

    margin-bottom: 25px;

}

.trusted-mini-title span {

    width: 55px;

    height: 3px;

    border-radius: 20px;

    background:

        linear-gradient(90deg,
            #2563EB,
            #FF7A1A);

}

.trusted-heading h2 {

    font-size: 58px;

    line-height: 1.15;

    font-weight: 800;

    color: #081C3A;

    margin-bottom: 25px;

}

.trusted-heading h2 span {

    display: block;

    margin-top: 8px;

    background:

        linear-gradient(90deg,
            #2563EB,
            #1D4ED8,
            #FF7A1A);

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

}

.trusted-heading p {

    max-width: 850px;

    margin: auto;

    font-size: 19px;

    color: #64748B;

    line-height: 1.9;

}

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

.trusted-achievements {

    display: flex;

    justify-content: center;

    gap: 20px;

    margin-top: 50px;

    flex-wrap: wrap;

}

.trusted-achievements div {

    width: 180px;

    padding: 28px 20px;

    background: #ffffff;

    border-radius: 22px;

    box-shadow:

        0 20px 50px rgba(15, 23, 42, .06);

    transition: .35s;

}

.trusted-achievements div:hover {

    transform: translateY(-8px);

    box-shadow:

        0 30px 70px rgba(37, 99, 235, .15);

}

.trusted-achievements h3 {

    font-size: 40px;

    font-weight: 800;

    color: #2563EB;

    margin-bottom: 8px;

}

.trusted-achievements small {

    font-size: 15px;

    color: #64748B;

    font-weight: 600;

}

@media(max-width:991px) {

    .trusted-heading h2 {

        font-size: 42px;

    }

}

@media(max-width:767px) {

    .trusted-heading {

        margin-bottom: 60px;

    }

    .trusted-heading h2 {

        font-size: 32px;

    }

    .trusted-heading p {

        font-size: 16px;

    }

    .trusted-achievements {

        gap: 15px;

    }

    .trusted-achievements div {

        width: 160px;

        padding: 22px 15px;

    }

    .trusted-achievements h3 {

        font-size: 32px;

    }

}

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

.services-section {

    position: relative;

    padding: 130px 0;

    overflow: hidden;

    background:
        linear-gradient(180deg,
            #ffffff 0%,
            #f7fbff 40%,
            #ffffff 100%);

    z-index: 1;

}

/* Decorative Background */

.services-section::before {

    content: "";

    position: absolute;

    width: 700px;

    height: 700px;

    top: -320px;

    right: -250px;

    border-radius: 50%;

    background:
        radial-gradient(circle,
            rgba(37, 99, 235, .08),
            transparent 70%);

}

.services-section::after {

    content: "";

    position: absolute;

    width: 500px;

    height: 500px;

    left: -200px;

    bottom: -200px;

    border-radius: 50%;

    background:
        radial-gradient(circle,
            rgba(255, 122, 26, .08),
            transparent 70%);

}

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

.services-heading {

    max-width: 900px;

    margin: auto;

    text-align: center;

    margin-bottom: 90px;

    position: relative;

    z-index: 2;

}

.services-heading .section-tag {

    display: inline-flex;

    align-items: center;

    gap: 12px;

    padding: 12px 24px;

    background: #EFF6FF;

    border-radius: 100px;

    color: #2563EB;

    font-size: 14px;

    font-weight: 700;

    letter-spacing: 2px;

    text-transform: uppercase;

    box-shadow:

        0 20px 45px rgba(37, 99, 235, .08);

}

.services-heading h2 {

    margin: 30px 0;

    font-size: 58px;

    font-weight: 800;

    line-height: 1.15;

    color: #081C3A;

}

.services-heading h2 span {

    display: block;

    margin-top: 10px;

    background:

        linear-gradient(90deg,
            #2563EB,
            #1D4ED8,
            #FF7A1A);

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

}

.services-heading p {

    max-width: 760px;

    margin: auto;

    font-size: 18px;

    line-height: 1.9;

    color: #64748B;

}

/*==================================================
            FEATURED SERVICE
==================================================*/

.featured-service {

    position: relative;

    overflow: hidden;

    border-radius: 35px;

    background:

        linear-gradient(135deg,
            #081C3A,
            #0F4C81);

    padding: 70px;

    margin-bottom: 80px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 70px;

    box-shadow:

        0 40px 90px rgba(15, 23, 42, .18);

}

/* Decorative Circles */

.featured-service::before {

    content: "";

    position: absolute;

    width: 420px;

    height: 420px;

    top: -180px;

    right: -180px;

    border-radius: 50%;

    background:

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

}

.featured-service::after {

    content: "";

    position: absolute;

    width: 260px;

    height: 260px;

    left: -120px;

    bottom: -120px;

    border-radius: 50%;

    background:

        rgba(255, 255, 255, .04);

}

.featured-left {

    flex: 1;

    position: relative;

    z-index: 2;

}

.featured-label {

    display: inline-block;

    padding: 10px 20px;

    background:

        linear-gradient(135deg,
            #FF7A1A,
            #FFB347);

    border-radius: 50px;

    color: #fff;

    font-size: 13px;

    font-weight: 700;

    letter-spacing: 1px;

    margin-bottom: 25px;

}

.featured-left h3 {

    color: #fff;

    font-size: 46px;

    font-weight: 800;

    line-height: 1.2;

    margin-bottom: 20px;

}

.featured-left p {

    color: #CBD5E1;

    line-height: 1.9;

    font-size: 17px;

    margin-bottom: 30px;

}

.featured-left ul {

    list-style: none;

    padding: 0;

    margin: 0 0 40px;

}

.featured-left ul li {

    color: #fff;

    margin-bottom: 16px;

    font-size: 17px;

    display: flex;

    align-items: center;

}

.featured-left ul li::before {

    content: "✓";

    width: 34px;

    height: 34px;

    margin-right: 15px;

    border-radius: 50%;

    background:

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

    display: flex;

    align-items: center;

    justify-content: center;

    color: #7DD3FC;

    font-weight: 700;

}

.featured-right {

    flex: 1;

    position: relative;

    z-index: 2;

    text-align: center;

}

.featured-right img {

    max-width: 100%;

    border-radius: 25px;

    animation: dashboardFloat 6s ease-in-out infinite;

    box-shadow:

        0 35px 80px rgba(0, 0, 0, .25);

}

.service-btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 12px;

    padding: 18px 36px;

    border-radius: 60px;

    background:

        linear-gradient(135deg,
            #FF7A1A,
            #FF9838);

    color: #fff;

    font-weight: 700;

    transition: .35s;

    box-shadow:

        0 20px 45px rgba(255, 122, 26, .25);

}

.service-btn:hover {

    color: #fff;

    transform:

        translateY(-5px);

    box-shadow:

        0 30px 60px rgba(255, 122, 26, .35);

}

/*==================================================
            DECORATION
==================================================*/

.featured-service .shape-1 {

    position: absolute;

    width: 16px;

    height: 16px;

    background: #FF7A1A;

    border-radius: 50%;

    top: 80px;

    right: 120px;

}

.featured-service .shape-2 {

    position: absolute;

    width: 12px;

    height: 12px;

    background: #3B82F6;

    bottom: 120px;

    left: 100px;

    border-radius: 50%;

}

.featured-service .shape-3 {

    position: absolute;

    width: 22px;

    height: 22px;

    border: 3px solid #fff;

    border-radius: 50%;

    top: 120px;

    left: 45%;

    opacity: .25;

}

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

@media(max-width:1199px) {

    .featured-service {

        padding: 50px;

        gap: 40px;

    }

    .services-heading h2 {

        font-size: 48px;

    }

}

@media(max-width:991px) {

    .featured-service {

        flex-direction: column;

        text-align: center;

    }

    .featured-left ul li {

        justify-content: center;

    }

    .featured-left h3 {

        font-size: 38px;

    }

}

@media(max-width:767px) {

    .services-section {

        padding: 90px 0;

    }

    .services-heading h2 {

        font-size: 34px;

    }

    .services-heading p {

        font-size: 16px;

    }

    .featured-service {

        padding: 35px 25px;

        border-radius: 25px;

    }

    .featured-left h3 {

        font-size: 30px;

    }

    .featured-left ul li {

        font-size: 15px;

    }

}

/*==================================================
                SERVICE CARD
==================================================*/

.service-card {

    position: relative;

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

    backdrop-filter: blur(18px);

    -webkit-backdrop-filter: blur(18px);

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

    border-radius: 28px;

    padding: 40px 35px;

    overflow: hidden;

    transition: .45s cubic-bezier(.175, .885, .32, 1.2);

    height: 100%;

    z-index: 1;

    box-shadow:
        0 15px 45px rgba(15, 23, 42, .05);

}

/* Top Gradient Line */

.service-card::before {

    content: "";

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 5px;

    background:

        linear-gradient(90deg,
            #2563EB,
            #06B6D4,
            #FF7A1A);

}

/* Floating Glow */

.service-card::after {

    content: "";

    position: absolute;

    width: 220px;

    height: 220px;

    border-radius: 50%;

    background:

        radial-gradient(rgba(37, 99, 235, .08),

            transparent 70%);

    top: -100px;

    right: -100px;

    transition: .45s;

}

/* Hover */

.service-card:hover {

    transform:

        translateY(-14px);

    box-shadow:

        0 35px 80px rgba(37, 99, 235, .15);

}

.service-card:hover::after {

    transform: scale(1.2);

}

/*==================================================
                ICON
==================================================*/

.service-icon {

    width: 82px;

    height: 82px;

    border-radius: 24px;

    display: flex;

    align-items: center;

    justify-content: center;

    margin-bottom: 30px;

    background:

        linear-gradient(135deg,

            #2563EB,

            #3B82F6);

    color: #ffffff;

    font-size: 34px;

    position: relative;

    transition: .45s;

    box-shadow:

        0 18px 45px rgba(37, 99, 235, .25);

}

.service-icon::before {

    content: "";

    position: absolute;

    inset: 6px;

    border-radius: 18px;

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

}

.service-card:hover .service-icon {

    transform:

        rotate(-10deg) scale(1.08);

}

/* Different Colors */

.service-card:nth-child(2) .service-icon {

    background:
        linear-gradient(135deg,
            #EA4335,
            #FBBC05);

}

.service-card:nth-child(3) .service-icon {

    background:
        linear-gradient(135deg,
            #0EA5E9,
            #06B6D4);

}

.service-card:nth-child(4) .service-icon {

    background:
        linear-gradient(135deg,
            #FF7A1A,
            #F59E0B);

}

.service-card:nth-child(5) .service-icon {

    background:
        linear-gradient(135deg,
            #10B981,
            #34D399);

}

.service-card:nth-child(6) .service-icon {

    background:
        linear-gradient(135deg,
            #8B5CF6,
            #6366F1);

}

.service-card:nth-child(7) .service-icon {

    background:
        linear-gradient(135deg,
            #EC4899,
            #F43F5E);

}

.service-card:nth-child(8) .service-icon {

    background:
        linear-gradient(135deg,
            #334155,
            #0F172A);

}

/*==================================================
                CONTENT
==================================================*/

.service-card h4 {

    font-size: 25px;

    font-weight: 800;

    color: #081C3A;

    margin-bottom: 18px;

    transition: .35s;
    text-align: center !important;

}

.service-card:hover h4 {

    color: #2563EB;

}

.service-card p {

    color: #64748B;

    line-height: 1.9;

    margin-bottom: 30px;

    font-size: 16px;
    text-align: justify !important;

}

/*==================================================
            LEARN MORE
==================================================*/

.service-card a {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    color: #2563EB;

    font-weight: 700;

    position: relative;

    transition: .35s;

}

.service-card a::after {

    content: "\f061";

    font-family: "Font Awesome 6 Free";

    font-weight: 900;

    transition: .35s;

}

.service-card:hover a {

    gap: 16px;

    color: #FF7A1A;

}

.service-card:hover a::after {

    transform: translateX(6px);

}

/*==================================================
            HOVER EFFECTS
==================================================*/

.service-card:hover {

    background:

        linear-gradient(180deg,

            #ffffff,

            #fbfdff);

}

.service-card:hover p {

    color: #475569;

}

.service-card:hover .service-icon {

    box-shadow:

        0 25px 60px rgba(37, 99, 235, .30);

}

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

@media(max-width:991px) {

    .service-card {

        padding: 35px 28px;

    }

    .service-icon {

        width: 72px;

        height: 72px;

        font-size: 30px;

    }

    .service-card h4 {

        font-size: 22px;

    }

}

@media(max-width:767px) {

    .service-card {

        padding: 28px 22px;

        border-radius: 22px;

    }

    .service-icon {

        width: 64px;

        height: 64px;

        font-size: 24px;

        margin-bottom: 22px;

    }

    .service-card h4 {

        font-size: 20px;


    }

    .service-card p {

        font-size: 15px;

    }

}

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

.services-cta {

    position: relative;

    overflow: hidden;

    margin-top: 90px;

    border-radius: 34px;

    padding: 70px;

    background:

        linear-gradient(135deg,
            #081C3A,
            #0F4C81,
            #2563EB);

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

}

.services-cta-bg {

    position: absolute;

    inset: 0;

    overflow: hidden;

}

.services-cta-bg::before {

    content: "";

    position: absolute;

    width: 420px;

    height: 420px;

    right: -120px;

    top: -120px;

    border-radius: 50%;

    background:

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

}

.services-cta-bg::after {

    content: "";

    position: absolute;

    width: 260px;

    height: 260px;

    left: -80px;

    bottom: -80px;

    border-radius: 50%;

    background:

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

}

.services-cta-content {

    position: relative;

    z-index: 2;

}

.services-cta-content span {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    padding: 10px 18px;

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

    border-radius: 50px;

    color: #fff;

    font-size: 13px;

    font-weight: 700;

    letter-spacing: 2px;

    margin-bottom: 22px;

}

.services-cta-content h3 {

    color: #fff;

    font-size: 46px;

    font-weight: 800;

    line-height: 1.2;

    margin-bottom: 22px;

}

.services-cta-content p {

    color: #D6E4F0;

    font-size: 17px;

    line-height: 1.9;

    max-width: 720px;

}

.services-cta-buttons {

    display: flex;

    flex-direction: column;

    gap: 18px;

    position: relative;

    z-index: 2;

}

.services-primary-btn,

.services-whatsapp-btn {

    height: 62px;

    border-radius: 60px;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 12px;

    font-weight: 700;

    transition: .35s;

}

.services-primary-btn {

    background: #ffffff;

    color: #081C3A;

}

.services-primary-btn:hover {

    transform: translateY(-4px);

    color: #081C3A;

}

.services-whatsapp-btn {

    background: #25D366;

    color: #ffffff;

}

.services-whatsapp-btn:hover {

    color: #fff;

    transform: translateY(-4px);

}

.services-cta::before {

    content: "";

    position: absolute;

    width: 120px;

    height: 120px;

    border-radius: 50%;

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

    right: 150px;

    bottom: 40px;

    animation: pulseCircle 6s infinite;

}

@keyframes pulseCircle {

    0% {

        transform: scale(1);

        opacity: .4;

    }

    50% {

        transform: scale(1.25);

        opacity: .1;

    }

    100% {

        transform: scale(1);

        opacity: .4;

    }

}

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

@media(max-width:991px) {

    .services-cta {

        padding: 50px 35px;

        text-align: center;

    }

    .services-cta-content h3 {

        font-size: 34px;

    }

    .services-cta-buttons {

        margin-top: 40px;

    }

}

@media(max-width:767px) {

    .services-cta {

        padding: 35px 22px;

        border-radius: 24px;

    }

    .services-cta-content h3 {

        font-size: 28px;

    }

    .services-cta-content p {

        font-size: 15px;

    }

    .services-primary-btn,

    .services-whatsapp-btn {

        height: 56px;

        font-size: 15px;

    }

}

/*==================================================
            DIGITAL GROWTH ECOSYSTEM
==================================================*/

.ecosystem-section {

    position: relative;

    padding: 140px 0;

    overflow: hidden;

    background:
        linear-gradient(180deg,
            #ffffff 0%,
            #f6faff 35%,
            #eef6ff 100%);

    z-index: 1;

}

/*==================================================
        BACKGROUND SHAPES
==================================================*/

.ecosystem-section::before {

    content: "";

    position: absolute;

    width: 700px;

    height: 700px;

    top: -320px;

    right: -250px;

    border-radius: 50%;

    background:

        radial-gradient(rgba(37, 99, 235, .08),

            transparent 72%);

}

.ecosystem-section::after {

    content: "";

    position: absolute;

    width: 520px;

    height: 520px;

    left: -180px;

    bottom: -180px;

    border-radius: 50%;

    background:

        radial-gradient(rgba(255, 122, 26, .08),

            transparent 70%);

}

.ecosystem-section .container {

    position: relative;

    z-index: 2;

}

.ecosystem-section .container::before {

    content: "";

    position: absolute;

    inset: 0;

    opacity: .04;

    pointer-events: none;

    background-image:

        linear-gradient(rgba(37, 99, 235, .25) 1px,

            transparent 1px),

        linear-gradient(90deg,

            rgba(37, 99, 235, .25) 1px,

            transparent 1px);

    background-size: 60px 60px;

}

/*==================================================
            CONTENT
==================================================*/

.ecosystem-content {

    position: relative;

    z-index: 3;

}

.ecosystem-content h2 {

    font-size: 60px;

    font-weight: 800;

    line-height: 1.12;

    color: #081C3A;

    margin: 28px 0;

}

.ecosystem-content h2 span {



    background:

        linear-gradient(90deg,

            #2563EB,

            #1D4ED8,

            #FF7A1A);

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

}

.ecosystem-content p {

    font-size: 18px;

    line-height: 1.95;

    color: #64748B;

    margin-bottom: 45px;

}

/*==================================================
            BADGE
==================================================*/

.ecosystem-badge {

    display: inline-flex;

    align-items: center;

    gap: 14px;

    padding: 14px 24px;

    border-radius: 60px;

    background:

        rgba(37, 99, 235, .08);

    color: #2563EB;

    font-size: 14px;

    font-weight: 700;

    letter-spacing: 1.8px;

    text-transform: uppercase;

    box-shadow:

        0 20px 45px rgba(37, 99, 235, .08);

}

.ecosystem-badge i {

    width: 42px;

    height: 42px;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    color: #fff;

    background:

        linear-gradient(135deg,

            #2563EB,

            #06B6D4);

}

/*==================================================
        FEATURE BLOCKS
==================================================*/

.ecosystem-features {

    margin-top: 45px;

    margin-bottom: 45px;

}

.eco-feature {

    display: flex;

    align-items: flex-start;

    gap: 20px;

    margin-bottom: 28px;

}

.eco-feature:last-child {

    margin-bottom: 0;

}

.eco-feature .eco-icon {

    width: 68px;

    height: 68px;

    border-radius: 20px;

    background:

        linear-gradient(135deg,

            #2563EB,

            #3B82F6);

    display: flex;

    align-items: center;

    justify-content: center;

    color: #fff;

    font-size: 26px;

    flex-shrink: 0;

    box-shadow:

        0 18px 45px rgba(37, 99, 235, .18);

}

.eco-feature h5 {

    font-size: 22px;

    font-weight: 700;

    color: #081C3A;

    margin-bottom: 8px;

}

.eco-feature p {

    margin: 0;

    font-size: 16px;

    line-height: 1.8;

    color: #64748B;

}

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

.ecosystem-buttons {

    display: flex;

    gap: 20px;

    flex-wrap: wrap;

}

.eco-primary-btn {

    padding: 18px 36px;

    border-radius: 60px;

    background:

        linear-gradient(135deg,

            #2563EB,

            #1D4ED8);

    color: #fff;

    font-weight: 700;

    transition: .35s;

    box-shadow:

        0 25px 50px rgba(37, 99, 235, .25);

}

.eco-primary-btn:hover {

    color: #fff;

    transform:

        translateY(-5px);

}

.eco-secondary-btn {

    padding: 18px 36px;

    border-radius: 60px;

    border: 2px solid #2563EB;

    color: #2563EB;

    font-weight: 700;

    transition: .35s;

    background: #fff;

}

.eco-secondary-btn:hover {

    background: #2563EB;

    color: #fff;

    transform:

        translateY(-5px);

}

/*==================================================
        FLOATING DECORATION
==================================================*/

.ecosystem-content::before {

    content: "";

    position: absolute;

    width: 16px;

    height: 16px;

    border-radius: 50%;

    background: #FF7A1A;

    top: 120px;

    right: 20px;

    animation: floatingDot 4s infinite;

}

.ecosystem-content::after {

    content: "";

    position: absolute;

    width: 12px;

    height: 12px;

    border-radius: 50%;

    background: #2563EB;

    bottom: 30px;

    left: 30px;

    animation: floatingDot 5s infinite;

}

@keyframes floatingDot {

    0% {

        transform: translateY(0);

        opacity: .5;

    }

    50% {

        transform: translateY(-18px);

        opacity: 1;

    }

    100% {

        transform: translateY(0);

        opacity: .5;

    }

}

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

@media(max-width:1199px) {

    .ecosystem-content h2 {

        font-size: 50px;

    }

}

@media(max-width:991px) {

    .ecosystem-section {

        padding: 90px 0;

    }

    .ecosystem-content {

        text-align: center;

    }

    .ecosystem-content h2 {

        font-size: 42px;

    }

    .ecosystem-buttons {

        justify-content: center;

    }

    .eco-feature {

        text-align: left;

    }

}

@media(max-width:767px) {

    .ecosystem-content h2 {

        font-size: 32px;

    }

    .ecosystem-content p {

        font-size: 16px;

    }

    .ecosystem-badge {

        font-size: 12px;

        padding: 10px 16px;

    }

    .eco-feature {

        gap: 15px;

    }

    .eco-feature .eco-icon {

        width: 56px;

        height: 56px;

        font-size: 22px;

    }

    .eco-feature h5 {

        font-size: 18px;

    }

    .eco-primary-btn,

    .eco-secondary-btn {

        width: 100%;

        text-align: center;

        justify-content: center;

    }

}

/*==================================================
            ECOSYSTEM IMAGE
==================================================*/

.ecosystem-image {

    position: relative;

    display: flex;

    justify-content: center;

    align-items: center;

    min-height: 720px;

    z-index: 2;

}

.ecosystem-image::before {

    content: "";

    position: absolute;

    width: 580px;

    height: 580px;

    border-radius: 50%;

    background:

        radial-gradient(rgba(37, 99, 235, .18),

            rgba(37, 99, 235, .05),

            transparent 75%);

    animation: glowRotate 12s linear infinite;

}

.ecosystem-image::after {

    content: "";

    position: absolute;

    width: 420px;

    height: 420px;

    border-radius: 50%;

    background:

        radial-gradient(rgba(255, 122, 26, .18),

            transparent 70%);

    bottom: 20px;

    right: 20px;

}

.ecosystem-image img {

    width: 100%;

    max-width: 720px;

    position: relative;

    z-index: 5;

    border-radius: 28px;

    animation: floatingImage 6s ease-in-out infinite;

    transition: .5s;

    filter:

        drop-shadow(0 40px 80px rgba(15, 23, 42, .18));

}

.ecosystem-image:hover img {

    transform: scale(1.03);

}

.ecosystem-image .image-frame {

    position: absolute;

    inset: 20px;

    border-radius: 32px;

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

    pointer-events: none;

}

/*==================================================
            FLOATING INFO BOX
==================================================*/

.eco-floating {

    position: absolute;

    display: flex;

    align-items: center;

    gap: 14px;

    padding: 18px 22px;

    border-radius: 20px;

    background:

        rgba(255, 255, 255, .82);

    backdrop-filter: blur(18px);

    -webkit-backdrop-filter: blur(18px);

    box-shadow:

        0 25px 60px rgba(15, 23, 42, .12);

    z-index: 10;

    transition: .4s;

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

}

.eco-floating:hover {

    transform:

        translateY(-8px) scale(1.04);

}

.eco-floating i {

    width: 54px;

    height: 54px;

    border-radius: 18px;

    display: flex;

    align-items: center;

    justify-content: center;

    color: #fff;

    font-size: 22px;

}

.seo-box i {

    background: linear-gradient(135deg, #2563EB, #3B82F6);

}

.lead-box i {

    background: linear-gradient(135deg, #10B981, #34D399);

}

.crm-box i {

    background: linear-gradient(135deg, #FF7A1A, #F59E0B);

}

.ai-box i {

    background: linear-gradient(135deg, #8B5CF6, #6366F1);

}

.seo-box {

    top: 60px;

    left: -30px;

}

.lead-box {

    top: 180px;

    right: -20px;

}

.crm-box {

    bottom: 150px;

    left: -10px;

}

.ai-box {

    bottom: 40px;

    right: 0;

}

.eco-floating small {

    display: block;

    color: #64748B;

    font-size: 13px;

}

.eco-floating strong {

    display: block;

    font-size: 20px;

    color: #081C3A;

}

@keyframes floatingImage {

    0% {

        transform: translateY(0);

    }

    50% {

        transform: translateY(-14px);

    }

    100% {

        transform: translateY(0);

    }

}

@keyframes cardFloat {

    0% {

        transform: translateY(0);

    }

    50% {

        transform: translateY(-8px);

    }

    100% {

        transform: translateY(0);

    }

}

@keyframes glowRotate {

    from {

        transform: rotate(0deg);

    }

    to {

        transform: rotate(360deg);

    }

}

@media(max-width:991px) {

    .ecosystem-image {

        margin-top: 70px;

        min-height: auto;

    }

    .ecosystem-image img {

        max-width: 100%;

    }

    .eco-floating {

        padding: 12px 15px;

    }

    .eco-floating i {

        width: 44px;

        height: 44px;

        font-size: 18px;

    }

    .seo-box {

        left: 10px;

        top: 20px;

    }

    .lead-box {

        right: 10px;

        top: 50px;

    }

    .crm-box {

        left: 10px;

        bottom: 80px;

    }

    .ai-box {

        right: 10px;

        bottom: 20px;

    }

}

@media(max-width:576px) {

    .eco-floating {

        display: none;

    }

    .ecosystem-image {

        min-height: auto;

    }

}

/*==================================================
            GROWTH JOURNEY
==================================================*/

.ecosystem-trust {

    position: relative;

    margin-top: 110px;

    padding: 55px 40px;

    border-radius: 32px;

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 18px;

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

    border: 1px solid rgba(37, 99, 235, .08);

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

    overflow: hidden;

}

.ecosystem-trust::before {

    content: "";

    position: absolute;

    inset: 0;

    background:

        linear-gradient(90deg,
            transparent,
            rgba(37, 99, 235, .04),
            transparent);

    animation: journeyLight 8s linear infinite;

}

@keyframes journeyLight {

    0% {

        transform: translateX(-100%);

    }

    100% {

        transform: translateX(100%);

    }

}

/*==================================================
            JOURNEY BOX
==================================================*/

.trust-box {

    position: relative;

    flex: 1;

    text-align: center;

    padding: 30px 18px;

    border-radius: 22px;

    background: #ffffff;

    transition: .4s;

    z-index: 2;

    min-height: 170px;

    display: flex;

    flex-direction: column;

    justify-content: center;

}

.trust-box:hover {

    transform:

        translateY(-10px);

    box-shadow:

        0 30px 60px rgba(37, 99, 235, .15);

}

.trust-box::before {

    content: "";

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 5px;

    border-radius: 20px 20px 0 0;

    background:

        linear-gradient(90deg,

            #2563EB,

            #06B6D4,

            #FF7A1A);

}

.trust-box h3 {

    font-size: 26px;

    font-weight: 800;

    color: #081C3A;

    margin-bottom: 10px;

}

.trust-box small {

    display: block;

    font-size: 14px;

    color: #64748B;

    line-height: 1.7;

}

.growth {

    background:

        linear-gradient(135deg,

            #2563EB,

            #1D4ED8);

    color: #fff;

}

.growth h3 {

    color: #fff;

}

.growth small {

    color: #E8F0FF;

}

.growth::before {

    background:

        linear-gradient(90deg,

            #FFD700,

            #FFB347);

}

/*==================================================
            ARROWS
==================================================*/

.trust-arrow {

    position: relative;

    z-index: 2;

    color: #2563EB;

    font-size: 24px;

    animation: moveArrow 2s infinite;

}

@keyframes moveArrow {

    0% {

        transform: translateX(0);

        opacity: .6;

    }

    50% {

        transform: translateX(8px);

        opacity: 1;

    }

    100% {

        transform: translateX(0);

        opacity: .6;

    }

}

.trust-box:hover h3 {

    color: #2563EB;

}

.growth:hover h3 {

    color: #ffffff;

}

.ecosystem-trust::after {

    content: "";

    position: absolute;

    width: 260px;

    height: 260px;

    right: -120px;

    top: -120px;

    border-radius: 50%;

    background:

        radial-gradient(rgba(37, 99, 235, .10),

            transparent 70%);

}

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

@media(max-width:1199px) {

    .ecosystem-trust {

        flex-wrap: wrap;

    }

    .trust-arrow {

        display: none;

    }

    .trust-box {

        flex: 0 0 calc(50% - 15px);

    }

}

@media(max-width:767px) {

    .ecosystem-trust {

        padding: 30px 20px;

    }

    .trust-box {

        flex: 100%;

        min-height: auto;

        padding: 25px;

    }

    .trust-box h3 {

        font-size: 22px;

    }

    .trust-box small {

        font-size: 14px;

    }

}

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

.why-section {

    position: relative;

    padding: 140px 0;

    overflow: hidden;

    background:
        linear-gradient(180deg,
            #ffffff 0%,
            #f7fbff 45%,
            #eef6ff 100%);

    z-index: 1;

}

/* Decorative Background */

.why-section::before {

    content: "";

    position: absolute;

    width: 700px;

    height: 700px;

    top: -320px;

    left: -250px;

    border-radius: 50%;

    background:
        radial-gradient(rgba(37, 99, 235, .08),
            transparent 72%);

}

.why-section::after {

    content: "";

    position: absolute;

    width: 520px;

    height: 520px;

    bottom: -180px;

    right: -180px;

    border-radius: 50%;

    background:
        radial-gradient(rgba(255, 122, 26, .08),
            transparent 72%);

}

.why-section .container {

    position: relative;

    z-index: 5;

}

.why-section .container::before {

    content: "";

    position: absolute;

    inset: 0;

    opacity: .04;

    pointer-events: none;

    background-image:

        linear-gradient(rgba(37, 99, 235, .20) 1px,
            transparent 1px),

        linear-gradient(90deg,
            rgba(37, 99, 235, .20) 1px,
            transparent 1px);

    background-size: 70px 70px;

}

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

.why-image {

    position: relative;

    display: flex;

    justify-content: center;

    align-items: center;

    min-height: 720px;

}

.why-image::before {

    content: "";

    position: absolute;

    width: 560px;

    height: 560px;

    border-radius: 50%;

    background:

        radial-gradient(rgba(37, 99, 235, .16),

            transparent 70%);

    animation: whyGlow 10s linear infinite;

}

.why-image img {

    width: 100%;

    max-width: 640px;

    position: relative;

    z-index: 2;

    border-radius: 28px;

    animation: whyFloat 6s ease-in-out infinite;

    box-shadow:

        0 40px 90px rgba(15, 23, 42, .16);

}

/*==========================================
        EXPERIENCE CARD
==========================================*/

.experience-card {

    position: absolute;

    left: -60px;

    bottom: -160px;

    z-index: 5;

    width: 240px;

    padding: 28px;

    border-radius: 24px;

    background:

        rgba(255, 255, 255, .82);

    backdrop-filter: blur(20px);

    -webkit-backdrop-filter: blur(20px);

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

    box-shadow:

        0 30px 70px rgba(15, 23, 42, .10);

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

}

.experience-card h2 {

    font-size: 60px;

    margin: 0;

    font-weight: 800;

    color: #2563EB;

}

.experience-card p {

    margin-top: 10px;

    color: #475569;

    line-height: 1.7;

    font-weight: 600;

}

/*==========================================
        CONTENT
==========================================*/

.why-content {

    position: relative;

    z-index: 5;

}

.why-content h2 {

    font-size: 58px;

    font-weight: 800;

    line-height: 1.12;

    color: #081C3A;

    margin: 28px 0;

}

.why-content h2 span {

    display: block;

    margin-top: 10px;

    background:

        linear-gradient(90deg,

            #2563EB,

            #1D4ED8,

            #FF7A1A);

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

}

.why-content p {

    font-size: 18px;

    color: #64748B;

    line-height: 1.95;

    margin-bottom: 45px;

}

/*==========================================
            BADGE
==========================================*/

.why-content .section-badge {

    display: inline-flex;

    align-items: center;

    gap: 14px;

    padding: 14px 26px;

    border-radius: 60px;

    background:

        rgba(37, 99, 235, .08);

    color: #2563EB;

    font-weight: 700;

    font-size: 14px;

    letter-spacing: 2px;

    text-transform: uppercase;

    box-shadow:

        0 18px 40px rgba(37, 99, 235, .08);

}

.why-content .section-badge::before {

    content: "";

    width: 12px;

    height: 12px;

    border-radius: 50%;

    background:

        linear-gradient(135deg,

            #2563EB,

            #FF7A1A);

}

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

@keyframes whyFloat {

    0% {

        transform: translateY(0);

    }

    50% {

        transform: translateY(-12px);

    }

    100% {

        transform: translateY(0);

    }

}

@keyframes whyGlow {

    from {

        transform: rotate(0deg);

    }

    to {

        transform: rotate(360deg);

    }

}

@keyframes cardFloat {

    0% {

        transform: translateY(0);

    }

    50% {

        transform: translateY(-10px);

    }

    100% {

        transform: translateY(0);

    }

}

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

@media(max-width:1199px) {

    .why-content h2 {

        font-size: 48px;

    }

}

@media(max-width:991px) {

    .why-section {

        padding: 90px 0;

    }

    .why-image {

        min-height: auto;

        margin-bottom: 70px;

    }

    .why-content {

        text-align: center;

    }

    .why-content h2 {

        font-size: 40px;

    }

    .experience-card {

        left: 20px;

        bottom: 20px;

        width: 200px;

        padding: 22px;

    }

    .experience-card h2 {

        font-size: 48px;

    }

}

@media(max-width:767px) {

    .why-content h2 {

        font-size: 32px;

    }

    .why-content p {

        font-size: 16px;

    }

    .why-content .section-badge {

        font-size: 12px;

        padding: 10px 18px;

    }

    .why-image img {

        border-radius: 20px;

    }

    .experience-card {

        position: relative;

        left: auto;

        bottom: auto;

        margin-top: 20px;

        width: 100%;

        max-width: 280px;

    }

}

/*==========================================
        WHY FEATURE GRID
==========================================*/

.why-grid {

    display: grid;

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

    gap: 24px;

    margin: 55px 0;

}

/*==========================================
        FEATURE CARD
==========================================*/

.why-item {

    position: relative;

    display: flex;

    align-items: flex-start;

    gap: 18px;

    padding: 28px;

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

    backdrop-filter: blur(18px);

    -webkit-backdrop-filter: blur(18px);

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

    border-radius: 22px;

    overflow: hidden;

    transition: .45s cubic-bezier(.175, .885, .32, 1.15);

    box-shadow:

        0 15px 45px rgba(15, 23, 42, .06);

}

.why-item:hover {

    transform:

        translateY(-10px);

    box-shadow:

        0 30px 70px rgba(37, 99, 235, .15);

}

.why-item::before {

    content: "";

    position: absolute;

    left: 0;

    top: 0;

    width: 5px;

    height: 100%;

    background:

        linear-gradient(180deg,

            #2563EB,

            #06B6D4,

            #FF7A1A);

}

.why-item::after {

    content: "";

    position: absolute;

    width: 180px;

    height: 180px;

    border-radius: 50%;

    background:

        radial-gradient(rgba(37, 99, 235, .08),

            transparent 72%);

    top: -80px;

    right: -80px;

    transition: .45s;

}

.why-item:hover::after {

    transform: scale(1.3);

}

/*==========================================
        FEATURE ICON
==========================================*/

.why-item i {

    width: 72px;

    height: 72px;

    border-radius: 20px;

    display: flex;

    align-items: center;

    justify-content: center;

    flex-shrink: 0;

    font-size: 28px;

    color: #fff;

    background:

        linear-gradient(135deg,

            #2563EB,

            #3B82F6);

    transition: .4s;

    box-shadow:

        0 20px 45px rgba(37, 99, 235, .25);

}

.why-item:nth-child(2) i {

    background:
        linear-gradient(135deg,
            #10B981,
            #34D399);

}

.why-item:nth-child(3) i {

    background:
        linear-gradient(135deg,
            #FF7A1A,
            #F59E0B);

}

.why-item:nth-child(4) i {

    background:
        linear-gradient(135deg,
            #8B5CF6,
            #6366F1);

}

.why-item:nth-child(5) i {

    background:
        linear-gradient(135deg,
            #0EA5E9,
            #06B6D4);

}

.why-item:nth-child(6) i {

    background:
        linear-gradient(135deg,
            #EC4899,
            #F43F5E);

}

.why-item:hover i {

    transform:

        rotate(-10deg) scale(1.08);

}

/*==========================================
        CONTENT
==========================================*/

.why-item h5 {

    font-size: 21px;

    font-weight: 700;

    color: #081C3A;

    margin-bottom: 8px;

    transition: .3s;

}

.why-item:hover h5 {

    color: #2563EB;

}

.why-item p {

    margin: 0;

    color: #64748B;

    font-size: 15px;

    line-height: 1.8;

}

.why-item:hover {

    background:

        linear-gradient(180deg,

            #ffffff,

            #fbfdff);

}

.why-item:hover p {

    color: #475569;

}

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

@media(max-width:991px) {

    .why-grid {

        grid-template-columns: 1fr;

    }

    .why-item {

        padding: 24px;

    }

}

@media(max-width:767px) {

    .why-item {

        padding: 20px;

        gap: 15px;

    }

    .why-item i {

        width: 58px;

        height: 58px;

        font-size: 22px;

        border-radius: 16px;

    }

    .why-item h5 {

        font-size: 18px;

    }

    .why-item p {

        font-size: 14px;

    }

}

/*==========================================
        WHY CTA BUTTON
==========================================*/

.why-btn {

    position: relative;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 15px;

    padding: 20px 38px;

    margin-top: 15px;

    overflow: hidden;

    border-radius: 60px;

    background: linear-gradient(135deg,
            #2563EB,
            #1D4ED8,
            #0EA5E9);

    color: #fff;

    font-size: 16px;

    font-weight: 700;

    letter-spacing: .3px;

    text-decoration: none;

    box-shadow:
        0 20px 45px rgba(37, 99, 235, .30);

    transition: .4s cubic-bezier(.175, .885, .32, 1.2);

}

/* Shine Effect */

.why-btn::before {

    content: "";

    position: absolute;

    top: 0;

    left: -120%;

    width: 70%;

    height: 100%;

    background:

        linear-gradient(120deg,

            transparent,

            rgba(255, 255, 255, .45),

            transparent);

    transform: skewX(-25deg);

    transition: .8s;

}

.why-btn:hover::before {

    left: 150%;

}

/* Glow Ring */

.why-btn::after {

    content: "";

    position: absolute;

    inset: 2px;

    border-radius: 60px;

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

    pointer-events: none;

}

/* Text */

.why-btn span {

    position: relative;

    z-index: 2;

}

/* Icon */

.why-btn i {

    position: relative;

    z-index: 2;

    font-size: 18px;

    transition: .35s;

}

/* Hover */

.why-btn:hover {

    color: #fff;

    transform:

        translateY(-6px);

    box-shadow:

        0 30px 70px rgba(37, 99, 235, .38);

}

.why-btn:hover i {

    transform: translateX(8px);

}

/* Click */

.why-btn:active {

    transform: scale(.97);

}

/* Focus */

.why-btn:focus {

    color: #fff;

}

/* Floating Animation */

@keyframes buttonFloat {

    0% {

        transform: translateY(0);

    }

    50% {

        transform: translateY(-3px);

    }

    100% {

        transform: translateY(0);

    }

}

.why-btn {

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

}

@media(max-width:767px) {

    .why-btn {

        width: 100%;

        justify-content: center;

        padding: 18px 22px;

        font-size: 15px;

    }

}

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

.industries-section {

    position: relative;

    padding: 140px 0;

    overflow: hidden;

    background:
        linear-gradient(180deg,
            #ffffff 0%,
            #f7fbff 45%,
            #eef6ff 100%);

    z-index: 1;

}

.industries-section::before {

    content: "";

    position: absolute;

    width: 700px;

    height: 700px;

    left: -250px;

    top: -320px;

    border-radius: 50%;

    background:
        radial-gradient(rgba(37, 99, 235, .08),
            transparent 72%);

}

.industries-section::after {

    content: "";

    position: absolute;

    width: 520px;

    height: 520px;

    right: -180px;

    bottom: -180px;

    border-radius: 50%;

    background:
        radial-gradient(rgba(255, 122, 26, .08),
            transparent 72%);

}

.industries-section .container {

    position: relative;

    z-index: 5;

}

.industries-section .container::before {

    content: "";

    position: absolute;

    inset: 0;

    opacity: .04;

    pointer-events: none;

    background-image:

        linear-gradient(rgba(37, 99, 235, .18) 1px,
            transparent 1px),

        linear-gradient(90deg,
            rgba(37, 99, 235, .18) 1px,
            transparent 1px);

    background-size: 70px 70px;

}

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

.industry-heading {

    text-align: center;

    max-width: 900px;

    margin: auto;

    margin-bottom: 80px;

    position: relative;

    z-index: 3;

}

.industry-heading .section-badge {

    display: inline-flex;

    align-items: center;

    gap: 12px;

    padding: 14px 24px;

    border-radius: 60px;

    background: rgba(37, 99, 235, .08);

    color: #2563EB;

    font-size: 14px;

    font-weight: 700;

    letter-spacing: 2px;

    text-transform: uppercase;

    box-shadow:

        0 20px 40px rgba(37, 99, 235, .08);

}

.industry-heading h2 {

    font-size: 58px;

    font-weight: 800;

    color: #081C3A;

    line-height: 1.15;

    margin: 28px 0;

}

.industry-heading h2 span {

    display: block;

    margin-top: 10px;

    background:

        linear-gradient(90deg,

            #2563EB,

            #1D4ED8,

            #FF7A1A);

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

}

.industry-heading p {

    font-size: 18px;

    line-height: 1.9;

    color: #64748B;

}

/*==================================================
            INDUSTRY CARD
==================================================*/

.industry-card {

    position: relative;

    overflow: hidden;

    border-radius: 26px;

    background: #ffffff;

    transition: .45s;

    box-shadow:

        0 18px 45px rgba(15, 23, 42, .08);

}

.industry-card:hover {

    transform:

        translateY(-12px);

    box-shadow:

        0 35px 80px rgba(37, 99, 235, .14);

}

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

.industry-image {

    position: relative;

    overflow: hidden;

    height: max-content;

}

.industry-image img {

    width: 100%;

    border-radius: 15px;

    object-fit: fill;

    transition: 1s;

}

.industry-card:hover img {

    transform: scale(1.12);

}

.industry-image::before {

    content: "";

    position: absolute;

    inset: 0;

    background:

        linear-gradient(transparent,

            rgba(8, 28, 58, .65));

    z-index: 1;

}

.industry-image::after {

    content: "";

    position: absolute;

    inset: 0;

    background:

        linear-gradient(135deg,

            rgba(37, 99, 235, .18),

            rgba(255, 122, 26, .10));

    opacity: 0;

    transition: .45s;

}

.industry-card:hover .industry-image::after {

    opacity: 1;

}

/*==================================================
            INDUSTRY BADGE
==================================================*/

.industry-image span {

    position: absolute;

    left: 24px;

    bottom: 24px;

    z-index: 3;

    display: inline-flex;

    align-items: center;

    padding: 12px 20px;

    border-radius: 40px;

    background:

        rgba(255, 255, 255, .88);

    backdrop-filter: blur(18px);

    -webkit-backdrop-filter: blur(18px);

    color: #081C3A;

    font-weight: 700;

    font-size: 15px;

    transition: .35s;

}

.industry-card:hover .industry-image span {

    background: #2563EB;

    color: #fff;

}

.industry-card::before {

    content: "";

    position: absolute;

    left: 0;

    top: 0;

    width: 100%;

    height: 5px;

    background:

        linear-gradient(90deg,

            #2563EB,

            #06B6D4,

            #FF7A1A);

    z-index: 5;

}

.industry-card::after {

    content: "";

    position: absolute;

    width: 220px;

    height: 220px;

    border-radius: 50%;

    background:

        radial-gradient(rgba(37, 99, 235, .08),

            transparent 72%);

    top: -100px;

    right: -100px;

    transition: .45s;

}

.industry-card:hover::after {

    transform: scale(1.35);

}

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

@media(max-width:1199px) {

    .industry-heading h2 {

        font-size: 48px;

    }

}

@media(max-width:991px) {

    .industries-section {

        padding: 90px 0;

    }

    .industry-heading h2 {

        font-size: 40px;

    }

}

@media(max-width:767px) {

    .industry-heading h2 {

        font-size: 32px;

    }

    .industry-heading p {

        font-size: 16px;

    }

    .industry-image {

        height: 220px;

    }

    .industry-image span {

        left: 18px;

        bottom: 18px;

        font-size: 14px;

        padding: 10px 18px;

    }

}

/*==================================================
            INDUSTRY CONTENT
==================================================*/

.industry-content {

    position: relative;

    padding: 30px;

    background: #ffffff;

    z-index: 2;

}

.industry-content ul {

    margin: 0;

    padding: 0;

    list-style: none;

}

.industry-content ul li {

    position: relative;

    display: flex;

    align-items: center;

    gap: 12px;

    padding: 12px 0;

    font-size: 15px;

    color: #475569;

    font-weight: 500;

    border-bottom: 1px solid rgba(15, 23, 42, .06);

    transition: .35s;

}

.industry-content ul li:last-child {

    border: none;

}

.industry-content ul li::before {

    content: "";

    width: 11px;

    height: 11px;

    border-radius: 50%;

    flex-shrink: 0;

    background:

        linear-gradient(135deg,

            #2563EB,

            #FF7A1A);

    box-shadow:

        0 0 12px rgba(37, 99, 235, .35);

}

.industry-card:hover ul li {

    transform: translateX(6px);

    color: #081C3A;

}

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

.industry-content a {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    margin-top: 28px;

    color: #2563EB;

    font-weight: 700;

    font-size: 16px;

    text-decoration: none;

    transition: .35s;

    position: relative;

}

.industry-content a::after {

    content: "\f061";

    font-family: "Font Awesome 6 Free";

    font-weight: 900;

    transition: .35s;

}

.industry-content a:hover {

    color: #FF7A1A;

    gap: 18px;

}

.industry-content a:hover::after {

    transform: translateX(6px);

}

/*==================================================
            HOVER EFFECT
==================================================*/

.industry-card:hover {

    background:

        linear-gradient(180deg,

            #ffffff,

            #fbfdff);

}

.industry-card:hover .industry-content {

    background: transparent;

}

/*==================================================
        DECORATIVE GLOW
==================================================*/

.industry-card .floating-dot {

    position: absolute;

    width: 14px;

    height: 14px;

    border-radius: 50%;

    background: #FF7A1A;

    top: 22px;

    right: 22px;

    z-index: 6;

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

}

@keyframes industryFloat {

    0% {

        transform: translateY(0);

        opacity: .55;

    }

    50% {

        transform: translateY(-12px);

        opacity: 1;

    }

    100% {

        transform: translateY(0);

        opacity: .55;

    }

}

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

.industry-bottom {

    margin-top: 90px;

    text-align: center;

    padding: 70px;

    border-radius: 30px;

    overflow: hidden;

    position: relative;

    background:

        linear-gradient(135deg,

            #081C3A,

            #0F4C81,

            #2563EB);

    box-shadow:

        0 35px 80px rgba(15, 23, 42, .18);

}

.industry-bottom::before {

    content: "";

    position: absolute;

    width: 420px;

    height: 420px;

    border-radius: 50%;

    background:

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

    top: -180px;

    right: -120px;

}

.industry-bottom::after {

    content: "";

    position: absolute;

    width: 260px;

    height: 260px;

    border-radius: 50%;

    background:

        rgba(255, 255, 255, .04);

    left: -80px;

    bottom: -80px;

}

.industry-bottom h3 {

    position: relative;

    color: #ffffff;

    font-size: 42px;

    font-weight: 800;

    margin-bottom: 18px;

    z-index: 2;

}

.industry-bottom p {

    position: relative;

    max-width: 700px;

    margin: 0 auto 35px;

    color: #D6E4F0;

    font-size: 17px;

    line-height: 1.9;

    z-index: 2;

}

.industry-bottom a {

    position: relative;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 18px 40px;

    border-radius: 60px;

    background: #ffffff;

    color: #081C3A;

    font-weight: 700;

    text-decoration: none;

    transition: .35s;

    z-index: 2;

}

.industry-bottom a:hover {

    transform: translateY(-5px);

    color: #081C3A;

    box-shadow:

        0 25px 60px rgba(255, 255, 255, .20);

}

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

@media(max-width:991px) {

    .industry-content {

        padding: 24px;

    }

    .industry-bottom {

        padding: 50px 30px;

    }

    .industry-bottom h3 {

        font-size: 34px;

    }

}

@media(max-width:767px) {

    .industry-content {

        padding: 22px;

    }

    .industry-content ul li {

        font-size: 14px;

        padding: 10px 0;

    }

    .industry-content a {

        font-size: 15px;

    }

    .industry-bottom {

        padding: 40px 20px;

        border-radius: 22px;

    }

    .industry-bottom h3 {

        font-size: 28px;

    }

    .industry-bottom p {

        font-size: 15px;

    }

    .industry-bottom a {

        width: 100%;

    }

}

/*==================================================
            BUSINESS SOLUTIONS
==================================================*/

.solutions-section {

    position: relative;

    padding: 140px 0;

    overflow: hidden;

    background:
        linear-gradient(180deg,
            #ffffff 0%,
            #f7fbff 45%,
            #eef6ff 100%);

    z-index: 1;

}

.solutions-section::before {

    content: "";

    position: absolute;

    width: 700px;

    height: 700px;

    top: -320px;

    right: -250px;

    border-radius: 50%;

    background:
        radial-gradient(rgba(37, 99, 235, .08),
            transparent 72%);

}

.solutions-section::after {

    content: "";

    position: absolute;

    width: 520px;

    height: 520px;

    left: -180px;

    bottom: -180px;

    border-radius: 50%;

    background:
        radial-gradient(rgba(255, 122, 26, .08),
            transparent 72%);

}

.solutions-section .container {

    position: relative;

    z-index: 5;

}

.solutions-section .container::before {

    content: "";

    position: absolute;

    inset: 0;

    opacity: .04;

    pointer-events: none;

    background-image:

        linear-gradient(rgba(37, 99, 235, .18) 1px,
            transparent 1px),

        linear-gradient(90deg,
            rgba(37, 99, 235, .18) 1px,
            transparent 1px);

    background-size: 70px 70px;

}

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

.solutions-heading {

    max-width: 900px;

    margin: auto;

    text-align: center;

    margin-bottom: 85px;

    position: relative;

    z-index: 3;

}

.solutions-heading .section-badge {

    display: inline-flex;

    align-items: center;

    gap: 12px;

    padding: 14px 24px;

    border-radius: 60px;

    background: rgba(37, 99, 235, .08);

    color: #2563EB;

    font-size: 14px;

    font-weight: 700;

    letter-spacing: 2px;

    text-transform: uppercase;

    box-shadow:
        0 18px 45px rgba(37, 99, 235, .08);

}

.solutions-heading h2 {

    font-size: 58px;

    font-weight: 800;

    color: #081C3A;

    line-height: 1.15;

    margin: 28px 0;

}

.solutions-heading h2 span {

    display: block;

    margin-top: 10px;

    background:

        linear-gradient(90deg,
            #2563EB,
            #1D4ED8,
            #FF7A1A);

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

}

.solutions-heading p {

    font-size: 18px;

    line-height: 1.9;

    color: #64748B;

}

/*==================================================
            SOLUTION CARD
==================================================*/

.solution-card {

    position: relative;

    padding: 40px 35px;

    border-radius: 28px;

    overflow: hidden;

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

    backdrop-filter: blur(20px);

    -webkit-backdrop-filter: blur(20px);

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

    transition: .45s cubic-bezier(.175, .885, .32, 1.15);

    height: 100%;

    box-shadow:

        0 20px 50px rgba(15, 23, 42, .06);

}

.solution-card::before {

    content: "";

    position: absolute;

    left: 0;

    top: 0;

    width: 100%;

    height: 5px;

    background:

        linear-gradient(90deg,

            #2563EB,

            #06B6D4,

            #FF7A1A);

}

.solution-card::after {

    content: "";

    position: absolute;

    width: 240px;

    height: 240px;

    top: -120px;

    right: -120px;

    border-radius: 50%;

    background:

        radial-gradient(rgba(37, 99, 235, .08),

            transparent 72%);

    transition: .45s;

}

.solution-card:hover::after {

    transform: scale(1.35);

}

/*==================================================
            ICON
==================================================*/

.solution-icon {

    width: 82px;

    height: 82px;

    border-radius: 22px;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 34px;

    color: #ffffff;

    background:

        linear-gradient(135deg,

            #2563EB,

            #3B82F6);

    margin-bottom: 30px;

    transition: .4s;

    box-shadow:

        0 20px 50px rgba(37, 99, 235, .25);

}

.solution-card:nth-child(2) .solution-icon {

    background:
        linear-gradient(135deg,
            #10B981,
            #34D399);

}

.solution-card:nth-child(3) .solution-icon {

    background:
        linear-gradient(135deg,
            #FF7A1A,
            #F59E0B);

}

.solution-card:nth-child(4) .solution-icon {

    background:
        linear-gradient(135deg,
            #EC4899,
            #F43F5E);

}

.solution-card:nth-child(5) .solution-icon {

    background:
        linear-gradient(135deg,
            #8B5CF6,
            #6366F1);

}

.solution-card:nth-child(6) .solution-icon {

    background:
        linear-gradient(135deg,
            #0EA5E9,
            #06B6D4);

}

.solution-card h4 {

    font-size: 26px;

    font-weight: 800;

    color: #081C3A;

    margin-bottom: 16px;

    transition: .35s;

}

.solution-card p {

    color: #64748B;

    line-height: 1.9;

    font-size: 16px;

}

.solution-card:hover {

    transform:

        translateY(-12px);

    box-shadow:

        0 35px 80px rgba(37, 99, 235, .14);

}

.solution-card:hover h4 {

    color: #2563EB;

}

.solution-card:hover .solution-icon {

    transform:

        rotate(-10deg) scale(1.08);

}

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

@media(max-width:1199px) {

    .solutions-heading h2 {

        font-size: 48px;

    }

}

@media(max-width:991px) {

    .solutions-section {

        padding: 90px 0;

    }

    .solutions-heading h2 {

        font-size: 40px;

    }

    .solution-card {

        padding: 32px 28px;

    }

}

@media(max-width:767px) {

    .solutions-heading h2 {

        font-size: 32px;

    }

    .solutions-heading p {

        font-size: 16px;

    }

    .solution-card {

        padding: 28px 22px;

        border-radius: 22px;

    }

    .solution-icon {

        width: 66px;

        height: 66px;

        font-size: 26px;

        margin-bottom: 22px;

    }

    .solution-card h4 {

        font-size: 22px;

    }

    .solution-card p {

        font-size: 15px;

    }

}

/*==================================================
            SOLUTION SHOWCASE
==================================================*/

.solution-showcase {

    position: relative;

    margin-top: 110px;

    padding: 70px;

    border-radius: 35px;

    overflow: hidden;

    background: linear-gradient(135deg,
            #081C3A,
            #0F4C81,
            #2563EB);

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

}

.solution-showcase::before {

    content: "";

    position: absolute;

    width: 520px;

    height: 520px;

    top: -220px;

    right: -180px;

    border-radius: 50%;

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

}

.solution-showcase::after {

    content: "";

    position: absolute;

    width: 280px;

    height: 280px;

    left: -100px;

    bottom: -100px;

    border-radius: 50%;

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

}

/*==================================================
            SHOWCASE IMAGE
==================================================*/

.solution-showcase img {

    width: 100%;

    border-radius: 25px;

    position: relative;

    z-index: 2;

    box-shadow:
        0 35px 80px rgba(0, 0, 0, .25);

    transition: .5s;

}

.solution-showcase:hover img {

    transform:
        translateY(-10px) scale(1.02);

}

/*==================================================
            SHOWCASE CONTENT
==================================================*/

.solution-showcase h3 {

    position: relative;

    z-index: 2;

    font-size: 46px;

    font-weight: 800;

    color: #ffffff;

    margin-bottom: 25px;

    line-height: 1.2;

}

.solution-showcase p {

    position: relative;

    z-index: 2;

    color: #D6E4F0;

    font-size: 17px;

    line-height: 1.9;

    margin-bottom: 35px;

}

/*==================================================
            SOLUTION TAGS
==================================================*/

.solution-tags {

    display: flex;

    flex-wrap: wrap;

    gap: 14px;

    margin-bottom: 40px;

}

.solution-tags span {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 12px 22px;

    border-radius: 50px;

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

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

    backdrop-filter: blur(12px);

    color: #ffffff;

    font-size: 14px;

    font-weight: 600;

    transition: .35s;

}

.solution-tags span:hover {

    background: #ffffff;

    color: #2563EB;

    transform:
        translateY(-4px);

}

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

.solution-btn {

    position: relative;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 12px;

    padding: 20px 38px;

    border-radius: 60px;

    overflow: hidden;

    background: #ffffff;

    color: #081C3A;

    font-size: 16px;

    font-weight: 700;

    text-decoration: none;

    transition: .4s;

    box-shadow:
        0 20px 45px rgba(255, 255, 255, .18);

}

.solution-btn::before {

    content: "";

    position: absolute;

    top: 0;

    left: -120%;

    width: 60%;

    height: 100%;

    background:

        linear-gradient(120deg,

            transparent,

            rgba(255, 255, 255, .6),

            transparent);

    transform: skewX(-25deg);

    transition: .8s;

}

.solution-btn:hover::before {

    left: 150%;

}

.solution-btn:hover {

    color: #081C3A;

    transform:

        translateY(-6px);

    box-shadow:

        0 35px 80px rgba(255, 255, 255, .25);

}

/*==================================================
            CARD LINK
==================================================*/

.solution-card a {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    margin-top: 22px;

    font-weight: 700;

    color: #2563EB;

    text-decoration: none;

    transition: .35s;

}

.solution-card a::after {

    content: "\f061";

    font-family: "Font Awesome 6 Free";

    font-weight: 900;

    transition: .35s;

}

.solution-card:hover a {

    gap: 18px;

    color: #FF7A1A;

}

.solution-card:hover a::after {

    transform: translateX(6px);

}

/*==================================================
            CARD HOVER
==================================================*/

.solution-card:hover {

    background:

        linear-gradient(180deg,
            #ffffff,
            #fbfdff);

}

.solution-card:hover p {

    color: #475569;

}

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

@media(max-width:991px) {

    .solution-showcase {

        padding: 45px;

        margin-top: 80px;

    }

    .solution-showcase h3 {

        font-size: 34px;

        margin-top: 35px;

    }

}

@media(max-width:767px) {

    .solution-showcase {

        padding: 30px 22px;

        border-radius: 24px;

    }

    .solution-showcase h3 {

        font-size: 28px;

    }

    .solution-showcase p {

        font-size: 15px;

    }

    .solution-tags {

        gap: 10px;

    }

    .solution-tags span {

        padding: 10px 16px;

        font-size: 13px;

    }

    .solution-btn {

        width: 100%;

    }

}

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

.testimonials-section {

    position: relative;

    padding: 140px 0;

    overflow: hidden;

    background:
        linear-gradient(180deg,
            #ffffff 0%,
            #f7fbff 45%,
            #eef6ff 100%);

    z-index: 1;

}

.testimonials-section::before {

    content: "";

    position: absolute;

    width: 700px;

    height: 700px;

    left: -250px;

    top: -300px;

    border-radius: 50%;

    background:
        radial-gradient(rgba(37, 99, 235, .08),
            transparent 72%);

}

.testimonials-section::after {

    content: "";

    position: absolute;

    width: 550px;

    height: 550px;

    right: -180px;

    bottom: -180px;

    border-radius: 50%;

    background:
        radial-gradient(rgba(255, 122, 26, .08),
            transparent 72%);

}

.testimonials-section .container {

    position: relative;

    z-index: 5;

}

.testimonials-section .container::before {

    content: "";

    position: absolute;

    inset: 0;

    opacity: .04;

    pointer-events: none;

    background-image:

        linear-gradient(rgba(37, 99, 235, .18) 1px,
            transparent 1px),

        linear-gradient(90deg,
            rgba(37, 99, 235, .18) 1px,
            transparent 1px);

    background-size: 70px 70px;

}

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

.testimonial-heading {

    max-width: 900px;

    margin: auto;

    text-align: center;

    margin-bottom: 80px;

}

.testimonial-heading .section-badge {

    display: inline-flex;

    align-items: center;

    gap: 12px;

    padding: 14px 26px;

    border-radius: 60px;

    background: rgba(37, 99, 235, .08);

    color: #2563EB;

    font-size: 14px;

    font-weight: 700;

    letter-spacing: 2px;

    text-transform: uppercase;

    box-shadow:

        0 20px 45px rgba(37, 99, 235, .08);

}

.testimonial-heading h2 {

    font-size: 58px;

    font-weight: 800;

    color: #081C3A;

    line-height: 1.15;

    margin: 28px 0;

}

.testimonial-heading h2 span {

    display: block;

    margin-top: 10px;

    background:

        linear-gradient(90deg,

            #2563EB,

            #1D4ED8,

            #FF7A1A);

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

}

.testimonial-heading p {

    font-size: 18px;

    color: #64748B;

    line-height: 1.9;

}

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

.testimonial-stats {

    display: grid;

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

    gap: 25px;

    margin-bottom: 70px;

}

.testimonial-stat {

    position: relative;

    text-align: center;

    padding: 35px 25px;

    border-radius: 25px;

    overflow: hidden;

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

    backdrop-filter: blur(20px);

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

    transition: .45s;

    box-shadow:

        0 18px 45px rgba(15, 23, 42, .06);

}

.testimonial-stat::before {

    content: "";

    position: absolute;

    left: 0;

    top: 0;

    width: 100%;

    height: 5px;

    background:

        linear-gradient(90deg,

            #2563EB,

            #06B6D4,

            #FF7A1A);

}

.testimonial-stat:hover {

    transform: translateY(-10px);

    box-shadow:

        0 30px 70px rgba(37, 99, 235, .15);

}

.testimonial-stat h3 {

    font-size: 42px;

    font-weight: 800;

    margin-bottom: 8px;

    color: #2563EB;

}

.testimonial-stat span {

    color: #64748B;

    font-size: 15px;

    font-weight: 600;

}

/*==================================================
            TESTIMONIAL CARD
==================================================*/

.testimonial-card {

    position: relative;

    height: 100%;

    padding: 35px;

    overflow: hidden;

    border-radius: 28px;

    background: #ffffff;

    transition: .45s;

    box-shadow:

        0 20px 50px rgba(15, 23, 42, .07);

}

.testimonial-card:hover {

    transform:

        translateY(-12px);

    box-shadow:

        0 35px 80px rgba(37, 99, 235, .15);

}

.testimonial-card::before {

    content: "";

    position: absolute;

    left: 0;

    top: 0;

    width: 100%;

    height: 5px;

    background:

        linear-gradient(90deg,

            #2563EB,

            #06B6D4,

            #FF7A1A);

}

.testimonial-card::after {

    content: "";

    position: absolute;

    width: 220px;

    height: 220px;

    border-radius: 50%;

    background:

        radial-gradient(rgba(37, 99, 235, .08),

            transparent 72%);

    top: -110px;

    right: -110px;

}

/*==================================================
            STARS
==================================================*/

.stars {

    font-size: 22px;

    letter-spacing: 3px;

    color: #FFC107;

    margin-bottom: 20px;

}

.testimonial-card p {

    color: #64748B;

    font-size: 16px;

    line-height: 1.9;

    margin-bottom: 35px;

}

/*==================================================
            CLIENT
==================================================*/

.testimonial-user {

    display: flex;

    align-items: center;

    gap: 16px;

}

.testimonial-user img {

    width: 72px;

    height: 72px;

    border-radius: 50%;

    object-fit: cover;

    border: 4px solid rgba(37, 99, 235, .10);

}

.testimonial-user h5 {

    font-size: 20px;

    font-weight: 700;

    margin-bottom: 4px;

    color: #081C3A;

}

.testimonial-user small {

    color: #64748B;

    font-size: 14px;

}

.testimonial-card:hover .testimonial-user img {

    transform: scale(1.08);

    transition: .4s;

}

.testimonial-card:hover h5 {

    color: #2563EB;

}

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

@media(max-width:1199px) {

    .testimonial-heading h2 {

        font-size: 48px;

    }

}

@media(max-width:991px) {

    .testimonials-section {

        padding: 90px 0;

    }

    .testimonial-heading h2 {

        font-size: 40px;

    }

    .testimonial-stats {

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

    }

}

@media(max-width:767px) {

    .testimonial-heading h2 {

        font-size: 32px;

    }

    .testimonial-heading p {

        font-size: 16px;

    }

    .testimonial-stats {

        grid-template-columns: 1fr;

    }

    .testimonial-stat {

        padding: 28px;

    }

    .testimonial-stat h3 {

        font-size: 34px;

    }

    .testimonial-card {

        padding: 28px 22px;

    }

    .testimonial-user img {

        width: 60px;

        height: 60px;

    }

    .testimonial-user h5 {

        font-size: 18px;

    }

}

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

@media(max-width:1199px) {

    .testimonial-heading h2 {

        font-size: 48px;

    }

}

@media(max-width:991px) {

    .testimonials-section {

        padding: 90px 0;

    }

    .testimonial-heading h2 {

        font-size: 40px;

    }

    .testimonial-stats {

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

    }

}

@media(max-width:767px) {

    .testimonial-heading h2 {

        font-size: 32px;

    }

    .testimonial-heading p {

        font-size: 16px;

    }

    .testimonial-stats {

        grid-template-columns: 1fr;

    }

    .testimonial-stat {

        padding: 28px;

    }

    .testimonial-stat h3 {

        font-size: 34px;

    }

    .testimonial-card {

        padding: 28px 22px;

    }

    .testimonial-user img {

        width: 60px;

        height: 60px;

    }

    .testimonial-user h5 {

        font-size: 18px;

    }

}

/*==================================================
            GOOGLE REVIEW BOX
==================================================*/

.google-review-box {

    position: relative;

    margin-top: 100px;

    padding: 70px;

    overflow: hidden;

    border-radius: 35px;

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 50px;

    background:
        linear-gradient(135deg,
            #081C3A,
            #0F4C81,
            #2563EB);

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

}

.google-review-box::before {

    content: "";

    position: absolute;

    width: 520px;

    height: 520px;

    border-radius: 50%;

    top: -220px;

    right: -180px;

    background:

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

}

.google-review-box::after {

    content: "";

    position: absolute;

    width: 260px;

    height: 260px;

    border-radius: 50%;

    left: -80px;

    bottom: -80px;

    background:

        rgba(255, 255, 255, .04);

}

.google-review-box>div {

    position: relative;

    z-index: 2;

    flex: 1;

}

.google-review-box img {

    height: 42px;

    margin-bottom: 25px;

}

.google-review-box h3 {

    color: #ffffff;

    font-size: 40px;

    font-weight: 800;

    line-height: 1.2;

    margin-bottom: 20px;

}

.google-review-box p {

    color: #D6E4F0;

    font-size: 17px;

    line-height: 1.9;

    margin: 0;

}

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

.google-review-btn {

    position: relative;

    z-index: 2;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 12px;

    padding: 20px 42px;

    overflow: hidden;

    border-radius: 60px;

    background: #ffffff;

    color: #081C3A;

    font-size: 16px;

    font-weight: 700;

    text-decoration: none;

    transition: .4s;

    box-shadow:

        0 25px 60px rgba(255, 255, 255, .18);

}

.google-review-btn::before {

    content: "";

    position: absolute;

    top: 0;

    left: -120%;

    width: 70%;

    height: 100%;

    background:

        linear-gradient(120deg,

            transparent,

            rgba(255, 255, 255, .6),

            transparent);

    transform: skewX(-25deg);

    transition: .8s;

}

.google-review-btn:hover::before {

    left: 150%;

}

.google-review-btn:hover {

    color: #081C3A;

    transform:

        translateY(-6px);

    box-shadow:

        0 35px 80px rgba(255, 255, 255, .25);

}

@keyframes reviewFloat {

    0% {

        transform: translateY(0);

    }

    50% {

        transform: translateY(-6px);

    }

    100% {

        transform: translateY(0);

    }

}

.google-review-btn {

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

}

.google-review-box .star {

    position: absolute;

    color: #FFD54A;

    opacity: .25;

    animation: starMove 8s infinite linear;

}

.star.star1 {

    top: 30px;

    right: 140px;

    font-size: 24px;

}

.star.star2 {

    bottom: 60px;

    left: 100px;

    font-size: 18px;

}

.star.star3 {

    top: 140px;

    right: 60px;

    font-size: 16px;

}

@keyframes starMove {

    0% {

        transform: translateY(0);

    }

    50% {

        transform: translateY(-12px);

    }

    100% {

        transform: translateY(0);

    }

}

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

@media(max-width:991px) {

    .google-review-box {

        padding: 45px;

        flex-direction: column;

        text-align: center;

    }

    .google-review-box h3 {

        font-size: 32px;

    }

}

@media(max-width:767px) {

    .google-review-box {

        padding: 35px 22px;

        border-radius: 24px;

    }

    .google-review-box img {

        height: 34px;

    }

    .google-review-box h3 {

        font-size: 26px;

    }

    .google-review-box p {

        font-size: 15px;

    }

    .google-review-btn {

        width: 100%;

        padding: 18px 24px;

    }

    .star {

        display: none;

    }

}

/*==================================================
            KNOWLEDGE HUB
==================================================*/

.blogs-section {

    position: relative;

    padding: 140px 0;

    overflow: hidden;

    background:
        linear-gradient(180deg,
            #ffffff 0%,
            #f8fbff 45%,
            #eef6ff 100%);

    z-index: 1;

}

.blogs-section::before {

    content: "";

    position: absolute;

    width: 700px;

    height: 700px;

    top: -320px;

    left: -250px;

    border-radius: 50%;

    background:
        radial-gradient(rgba(37, 99, 235, .08),
            transparent 72%);

}

.blogs-section::after {

    content: "";

    position: absolute;

    width: 520px;

    height: 520px;

    right: -180px;

    bottom: -180px;

    border-radius: 50%;

    background:
        radial-gradient(rgba(255, 122, 26, .08),
            transparent 72%);

}

.blogs-section .container {

    position: relative;

    z-index: 5;

}

.blogs-section .container::before {

    content: "";

    position: absolute;

    inset: 0;

    opacity: .04;

    pointer-events: none;

    background-image:

        linear-gradient(rgba(37, 99, 235, .18) 1px,
            transparent 1px),

        linear-gradient(90deg,
            rgba(37, 99, 235, .18) 1px,
            transparent 1px);

    background-size: 70px 70px;

}

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

.blogs-heading {

    max-width: 900px;

    margin: auto;

    text-align: center;

    margin-bottom: 90px;

}

.blogs-heading .section-badge {

    display: inline-flex;

    align-items: center;

    gap: 12px;

    padding: 14px 26px;

    border-radius: 60px;

    background: rgba(37, 99, 235, .08);

    color: #2563EB;

    font-size: 14px;

    font-weight: 700;

    letter-spacing: 2px;

    text-transform: uppercase;

    box-shadow:
        0 20px 45px rgba(37, 99, 235, .08);

}

.blogs-heading h2 {

    font-size: 58px;

    font-weight: 800;

    color: #081C3A;

    line-height: 1.15;

    margin: 28px 0;

}

.blogs-heading h2 span {

    display: block;

    margin-top: 10px;

    background:
        linear-gradient(90deg,
            #2563EB,
            #1D4ED8,
            #FF7A1A);

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

}

.blogs-heading p {

    font-size: 18px;

    color: #64748B;

    line-height: 1.9;

}

/*==================================================
            FEATURED BLOG
==================================================*/

.featured-blog {

    position: relative;

    overflow: hidden;

    border-radius: 32px;

    background: #ffffff;

    transition: .45s;

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

}

.featured-blog:hover {

    transform: translateY(-12px);

    box-shadow:
        0 40px 90px rgba(37, 99, 235, .16);

}

.featured-image {

    position: relative;

    overflow: hidden;

    height: 420px;

}

.featured-image img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition: 1s;

}

.featured-blog:hover img {

    transform: scale(1.08);

}

.featured-image::before {

    content: "";

    position: absolute;

    inset: 0;

    z-index: 1;

    background:

        linear-gradient(transparent,

            rgba(8, 28, 58, .55));

}

.featured-image::after {

    content: "";

    position: absolute;

    inset: 0;

    background:

        linear-gradient(135deg,

            rgba(37, 99, 235, .12),

            rgba(255, 122, 26, .08));

    opacity: 0;

    transition: .45s;

}

.featured-blog:hover .featured-image::after {

    opacity: 1;

}

.featured-image span {

    position: absolute;

    top: 25px;

    left: 25px;

    z-index: 3;

    padding: 12px 22px;

    border-radius: 40px;

    background:

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

    backdrop-filter: blur(20px);

    color: #081C3A;

    font-weight: 700;

    font-size: 14px;

    transition: .35s;

}

.featured-blog:hover .featured-image span {

    background: #2563EB;

    color: #ffffff;

}

/*==================================================
            CONTENT
==================================================*/

.featured-content {

    padding: 40px;

}

.featured-content h3 {

    font-size: 34px;

    font-weight: 800;

    line-height: 1.3;

    color: #081C3A;

    margin: 22px 0;

    transition: .35s;

}

.featured-blog:hover h3 {

    color: #2563EB;

}

.featured-content p {

    color: #64748B;

    font-size: 16px;

    line-height: 1.9;

}

.blog-meta {

    display: flex;

    align-items: center;

    gap: 15px;

}

.blog-meta span {

    padding: 10px 18px;

    border-radius: 30px;

    background: #EFF6FF;

    color: #2563EB;

    font-size: 13px;

    font-weight: 700;

}

.featured-content a {

    display: inline-flex;

    align-items: center;

    gap: 12px;

    margin-top: 28px;

    color: #2563EB;

    font-weight: 700;

    text-decoration: none;

    transition: .35s;

}

.featured-content a::after {

    content: "\f061";

    font-family: "Font Awesome 6 Free";

    font-weight: 900;

    transition: .35s;

}

.featured-content a:hover {

    gap: 20px;

    color: #FF7A1A;

}

.featured-content a:hover::after {

    transform: translateX(6px);

}

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

@media(max-width:1199px) {

    .blogs-heading h2 {

        font-size: 48px;

    }

}

@media(max-width:991px) {

    .blogs-section {

        padding: 90px 0;

    }

    .blogs-heading h2 {

        font-size: 40px;

    }

    .featured-image {

        height: 360px;

    }

}

@media(max-width:767px) {

    .blogs-heading h2 {

        font-size: 32px;

    }

    .blogs-heading p {

        font-size: 16px;

    }

    .featured-image {

        height: 240px;

    }

    .featured-content {

        padding: 28px 22px;

    }

    .featured-content h3 {

        font-size: 24px;

    }

    .blog-meta {

        flex-wrap: wrap;

    }

}

/*==================================================
            BLOG SIDEBAR
==================================================*/

.blog-sidebar {

    display: flex;

    flex-direction: column;

    gap: 25px;

    height: 100%;

}

/*==================================================
            MINI BLOG
==================================================*/

.mini-blog {

    position: relative;

    display: flex;

    align-items: center;

    gap: 22px;

    padding: 22px;

    overflow: hidden;

    border-radius: 24px;

    background:

        rgba(255, 255, 255, .88);

    backdrop-filter: blur(20px);

    -webkit-backdrop-filter: blur(20px);

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

    transition: .45s cubic-bezier(.175, .885, .32, 1.2);

    box-shadow:

        0 20px 50px rgba(15, 23, 42, .06);

}

.mini-blog::before {

    content: "";

    position: absolute;

    left: 0;

    top: 0;

    width: 5px;

    height: 100%;

    background:

        linear-gradient(180deg,

            #2563EB,

            #06B6D4,

            #FF7A1A);

}

.mini-blog::after {

    content: "";

    position: absolute;

    width: 180px;

    height: 180px;

    border-radius: 50%;

    background:

        radial-gradient(rgba(37, 99, 235, .08),

            transparent 72%);

    top: -80px;

    right: -80px;

    transition: .45s;

}

.mini-blog:hover::after {

    transform: scale(1.4);

}

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

.mini-blog img {

    width: 125px;

    height: 110px;

    border-radius: 18px;

    object-fit: cover;

    transition: .5s;

    flex-shrink: 0;

}

.mini-blog:hover img {

    transform:

        scale(1.08) rotate(-2deg);

}

/*==================================================
            CONTENT
==================================================*/

.mini-blog span {

    display: inline-block;

    padding: 8px 14px;

    border-radius: 30px;

    background: #EFF6FF;

    color: #2563EB;

    font-size: 12px;

    font-weight: 700;

    margin-bottom: 14px;

}

.mini-blog h4 {

    font-size: 20px;

    font-weight: 700;

    line-height: 1.45;

    color: #081C3A;

    margin: 0;

    transition: .35s;

}

.mini-blog:hover {

    transform:

        translateX(10px);

    box-shadow:

        0 30px 70px rgba(37, 99, 235, .15);

}

.mini-blog:hover h4 {

    color: #2563EB;

}

/*==================================================
            TOPICS
==================================================*/

.blog-topics {

    margin-top: 110px;

    text-align: center;

}

.blog-topics h3 {

    font-size: 40px;

    font-weight: 800;

    color: #081C3A;

    margin-bottom: 40px;

}

.topic-list {

    display: flex;

    justify-content: center;

    flex-wrap: wrap;

    gap: 18px;

}

.topic-list a {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 15px 26px;

    border-radius: 60px;

    background: #ffffff;

    color: #081C3A;

    text-decoration: none;

    font-weight: 700;

    transition: .35s;

    box-shadow:

        0 15px 40px rgba(15, 23, 42, .06);

}

.topic-list a:hover {

    background:

        linear-gradient(135deg,

            #2563EB,

            #1D4ED8);

    color: #ffffff;

    transform:

        translateY(-6px);

    box-shadow:

        0 30px 70px rgba(37, 99, 235, .22);

}

@keyframes topicFloat {

    0% {

        transform: translateY(0);

    }

    50% {

        transform: translateY(-5px);

    }

    100% {

        transform: translateY(0);

    }

}

.topic-list a {

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

}

.topic-list a:nth-child(2) {

    animation-delay: .2s;

}

.topic-list a:nth-child(3) {

    animation-delay: .4s;

}

.topic-list a:nth-child(4) {

    animation-delay: .6s;

}

.topic-list a:nth-child(5) {

    animation-delay: .8s;

}

.topic-list a:nth-child(6) {

    animation-delay: 1s;

}

.topic-list a:nth-child(7) {

    animation-delay: 1.2s;

}

.topic-list a:nth-child(8) {

    animation-delay: 1.4s;

}

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

@media(max-width:991px) {

    .blog-sidebar {

        margin-top: 45px;

    }

    .blog-topics {

        margin-top: 80px;

    }

    .blog-topics h3 {

        font-size: 32px;

    }

}

@media(max-width:767px) {

    .mini-blog {

        flex-direction: column;

        align-items: flex-start;

        padding: 20px;

    }

    .mini-blog img {

        width: 100%;

        height: 220px;

    }

    .mini-blog h4 {

        font-size: 18px;

    }

    .blog-topics {

        margin-top: 60px;

    }

    .blog-topics h3 {

        font-size: 28px;

    }

    .topic-list {

        gap: 12px;

    }

    .topic-list a {

        padding: 12px 18px;

        font-size: 14px;

    }

}

/*==================================================
            KNOWLEDGE CTA
==================================================*/

.knowledge-cta {

    position: relative;

    margin-top: 110px;

    padding: 70px;

    border-radius: 35px;

    overflow: hidden;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 50px;

    background:

        linear-gradient(135deg,

            #081C3A,

            #0F4C81,

            #2563EB);

    box-shadow:

        0 40px 100px rgba(15, 23, 42, .18);

}

/* Decorative Shapes */

.knowledge-cta::before {

    content: "";

    position: absolute;

    width: 520px;

    height: 520px;

    border-radius: 50%;

    top: -220px;

    right: -180px;

    background:

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

}

.knowledge-cta::after {

    content: "";

    position: absolute;

    width: 280px;

    height: 280px;

    border-radius: 50%;

    left: -80px;

    bottom: -80px;

    background:

        rgba(255, 255, 255, .04);

}

/*==========================================
            CONTENT
==========================================*/

.knowledge-content {

    position: relative;

    z-index: 2;

    flex: 1;

}

.knowledge-content span {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    padding: 12px 22px;

    margin-bottom: 22px;

    border-radius: 50px;

    background:

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

    backdrop-filter: blur(12px);

    color: #ffffff;

    font-size: 14px;

    font-weight: 600;

}

.knowledge-content h3 {

    color: #ffffff;

    font-size: 42px;

    font-weight: 800;

    line-height: 1.25;

    margin-bottom: 20px;

}

.knowledge-content p {

    max-width: 700px;

    color: #D6E4F0;

    font-size: 17px;

    line-height: 1.9;

    margin: 0;

}

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

.knowledge-btn {

    position: relative;

    z-index: 2;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 14px;

    padding: 20px 40px;

    border-radius: 60px;

    overflow: hidden;

    background: #ffffff;

    color: #081C3A;

    text-decoration: none;

    font-size: 16px;

    font-weight: 700;

    transition: .4s cubic-bezier(.175, .885, .32, 1.15);

    box-shadow:

        0 20px 45px rgba(255, 255, 255, .20);

}

/* Shine Effect */

.knowledge-btn::before {

    content: "";

    position: absolute;

    top: 0;

    left: -120%;

    width: 60%;

    height: 100%;

    background:

        linear-gradient(120deg,

            transparent,

            rgba(255, 255, 255, .55),

            transparent);

    transform: skewX(-25deg);

    transition: .8s;

}

.knowledge-btn:hover::before {

    left: 150%;

}

.knowledge-btn i {

    transition: .35s;

}

.knowledge-btn:hover {

    color: #081C3A;

    transform:

        translateY(-6px);

    box-shadow:

        0 35px 80px rgba(255, 255, 255, .28);

}

.knowledge-btn:hover i {

    transform: translateX(8px);

}

/*==========================================
        FLOATING PARTICLES
==========================================*/

.knowledge-dot {

    position: absolute;

    width: 12px;

    height: 12px;

    border-radius: 50%;

    background: #FFD54A;

    opacity: .4;

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

}

.dot1 {

    top: 40px;

    right: 160px;

}

.dot2 {

    bottom: 80px;

    left: 120px;

}

.dot3 {

    top: 180px;

    right: 80px;

}

@keyframes knowledgeFloat {

    0% {

        transform: translateY(0);

    }

    50% {

        transform: translateY(-12px);

    }

    100% {

        transform: translateY(0);

    }

}

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

.faq-section {

    position: relative;

    padding: 140px 0;

    overflow: hidden;

    background:
        linear-gradient(180deg,
            #ffffff 0%,
            #f8fbff 45%,
            #eef6ff 100%);

    z-index: 1;

}

.faq-section::before {

    content: "";

    position: absolute;

    width: 700px;

    height: 700px;

    left: -250px;

    top: -320px;

    border-radius: 50%;

    background:
        radial-gradient(rgba(37, 99, 235, .08),
            transparent 72%);

}

.faq-section::after {

    content: "";

    position: absolute;

    width: 520px;

    height: 520px;

    right: -180px;

    bottom: -180px;

    border-radius: 50%;

    background:
        radial-gradient(rgba(255, 122, 26, .08),
            transparent 72%);

}

.faq-section .container {

    position: relative;

    z-index: 5;

}

.faq-section .container::before {

    content: "";

    position: absolute;

    inset: 0;

    opacity: .04;

    pointer-events: none;

    background-image:

        linear-gradient(rgba(37, 99, 235, .18) 1px,
            transparent 1px),

        linear-gradient(90deg,
            rgba(37, 99, 235, .18) 1px,
            transparent 1px);

    background-size: 70px 70px;

}

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

.faq-heading {

    max-width: 920px;

    margin: auto;

    text-align: center;

    margin-bottom: 90px;

}

.faq-heading .section-badge {

    display: inline-flex;

    align-items: center;

    gap: 12px;

    padding: 14px 24px;

    border-radius: 60px;

    background: rgba(37, 99, 235, .08);

    color: #2563EB;

    font-size: 14px;

    font-weight: 700;

    letter-spacing: 2px;

    text-transform: uppercase;

    box-shadow:

        0 18px 45px rgba(37, 99, 235, .08);

}

.faq-heading h2 {

    font-size: 58px;

    font-weight: 800;

    line-height: 1.15;

    color: #081C3A;

    margin: 28px 0;

}

.faq-heading h2 span {

    display: block;

    margin-top: 10px;

    background:

        linear-gradient(90deg,

            #2563EB,

            #1D4ED8,

            #FF7A1A);

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

}

.faq-heading p {

    font-size: 18px;

    color: #64748B;

    line-height: 1.9;

}

/*==================================================
                FAQ IMAGE
==================================================*/

.faq-image {

    position: relative;

    display: flex;

    justify-content: center;

    align-items: center;

    min-height: 650px;

}

.faq-image::before {

    content: "";

    position: absolute;

    width: 520px;

    height: 520px;

    border-radius: 50%;

    background:

        radial-gradient(rgba(37, 99, 235, .16),

            transparent 72%);

    animation: faqGlow 12s linear infinite;

}

.faq-image img {

    width: 100%;

    max-width: 580px;

    position: relative;

    z-index: 2;

    border-radius: 28px;

    animation: faqFloat 6s ease-in-out infinite;

    box-shadow:

        0 40px 90px rgba(15, 23, 42, .15);

}

/*==================================================
            SUPPORT CARD
==================================================*/

.faq-floating-card {

    position: absolute;

    left: -20px;

    bottom: 60px;

    z-index: 5;

    display: flex;

    align-items: center;

    gap: 18px;

    width: 290px;

    padding: 26px;

    border-radius: 24px;

    background:

        rgba(255, 255, 255, .88);

    backdrop-filter: blur(20px);

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

    box-shadow:

        0 25px 60px rgba(15, 23, 42, .10);

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

}

.faq-floating-card i {

    width: 70px;

    height: 70px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 18px;

    font-size: 28px;

    color: #fff;

    background:

        linear-gradient(135deg,

            #2563EB,

            #3B82F6);

    box-shadow:

        0 18px 40px rgba(37, 99, 235, .25);

}

.faq-floating-card h4 {

    font-size: 22px;

    font-weight: 700;

    margin-bottom: 8px;

    color: #081C3A;

}

.faq-floating-card p {

    margin: 0;

    font-size: 14px;

    line-height: 1.7;

    color: #64748B;

}

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

@keyframes faqFloat {

    0% {

        transform: translateY(0);

    }

    50% {

        transform: translateY(-10px);

    }

    100% {

        transform: translateY(0);

    }

}

@keyframes faqGlow {

    from {

        transform: rotate(0deg);

    }

    to {

        transform: rotate(360deg);

    }

}

@keyframes faqCardFloat {

    0% {

        transform: translateY(0);

    }

    50% {

        transform: translateY(-8px);

    }

    100% {

        transform: translateY(0);

    }

}

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

@media(max-width:991px) {

    .faq-section {

        padding: 90px 0;

    }

    .faq-heading h2 {

        font-size: 42px;

    }

    .faq-image {

        min-height: auto;

        margin-bottom: 70px;

    }

    .faq-floating-card {

        left: 20px;

        bottom: 20px;

        width: 250px;

        padding: 22px;

    }

}

@media(max-width:767px) {
    .experience-card {
        display: none;
    }
    .knowledge-cta {
        flex-direction: column;
       
    }
    .knowledge-btn {
        width: max-content;
       
    }

    .faq-heading h2 {

        font-size: 32px;

    }

    .faq-heading p {

        font-size: 16px;

    }

    .faq-image img {

        border-radius: 20px;

    }

    .faq-floating-card {
display: none;

        left: auto;

        bottom: auto;

        margin-top: 25px;

        width: 100%;

    }

    .faq-floating-card i {

        width: 60px;

        height: 60px;

        font-size: 24px;

    }

}

/*==================================================
                PREMIUM ACCORDION
==================================================*/

.custom-faq {

    position: relative;

}

.custom-faq .accordion-item {

    border: none;

    overflow: hidden;

    margin-bottom: 22px;

    border-radius: 22px;

    background: #ffffff;

    box-shadow:

        0 18px 45px rgba(15, 23, 42, .06);

    transition: .35s;

}

.custom-faq .accordion-item:hover {

    transform: translateY(-4px);

    box-shadow:

        0 30px 70px rgba(37, 99, 235, .12);

}

.custom-faq .accordion-button {

    position: relative;

    padding: 28px 80px 28px 30px;

    background: #ffffff;

    color: #081C3A;

    font-size: 19px;

    font-weight: 700;

    border: none;

    box-shadow: none;

    transition: .35s;

}

.custom-faq .accordion-button:focus {

    box-shadow: none;

}

.custom-faq .accordion-button:not(.collapsed) {

    background:

        linear-gradient(90deg,

            #EFF6FF,

            #ffffff);

    color: #2563EB;

}

.custom-faq .accordion-button::after {

    width: 48px;

    height: 48px;

    border-radius: 50%;

    background: none;

    content: "+";

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 28px;

    font-weight: 300;

    color: #2563EB;

    border: 2px solid rgba(37, 99, 235, .15);

    transition: .35s;

}

.custom-faq .accordion-button:not(.collapsed)::after {

    content: "−";

    background: #2563EB;

    color: #ffffff;

    transform: none;

}

.custom-faq .accordion-body {

    padding:

        0 30px 28px;

    color: #64748B;

    font-size: 16px;

    line-height: 1.9;

}

.custom-faq .accordion-item {

    position: relative;

}

.custom-faq .accordion-item::before {

    content: "";

    position: absolute;

    left: 0;

    top: 0;

    width: 5px;

    height: 100%;

    background:

        linear-gradient(180deg,

            #2563EB,

            #06B6D4,

            #FF7A1A);

    opacity: 0;

    transition: .35s;

}

.custom-faq .accordion-item:has(.accordion-button:not(.collapsed))::before {

    opacity: 1;

}

/*==================================================
                FAQ CTA
==================================================*/

.faq-bottom {

    position: relative;

    margin-top: 100px;

    padding: 70px;

    overflow: hidden;

    border-radius: 32px;

    text-align: center;

    background:

        linear-gradient(135deg,

            #081C3A,

            #0F4C81,

            #2563EB);

    box-shadow:

        0 40px 90px rgba(15, 23, 42, .18);

}

.faq-bottom::before {

    content: "";

    position: absolute;

    width: 420px;

    height: 420px;

    border-radius: 50%;

    top: -180px;

    right: -120px;

    background:

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

}

.faq-bottom::after {

    content: "";

    position: absolute;

    width: 240px;

    height: 240px;

    border-radius: 50%;

    left: -60px;

    bottom: -60px;

    background:

        rgba(255, 255, 255, .04);

}

.faq-bottom h3 {

    position: relative;

    z-index: 2;

    color: #ffffff;

    font-size: 44px;

    font-weight: 800;

    margin-bottom: 18px;

}

.faq-bottom p {

    position: relative;

    z-index: 2;

    max-width: 700px;

    margin: 0 auto 40px;

    color: #D6E4F0;

    font-size: 17px;

    line-height: 1.9;

}

.faq-buttons {

    position: relative;

    z-index: 2;

    display: flex;

    justify-content: center;

    gap: 20px;

    flex-wrap: wrap;

}

.faq-buttons a {

    display: inline-flex;

    align-items: center;

    gap: 12px;

    padding: 18px 34px;

    border-radius: 60px;

    text-decoration: none;

    font-weight: 700;

    transition: .35s;

}

.faq-call {

    background: #ffffff;

    color: #081C3A;

}

.faq-whatsapp {

    background: #25D366;

    color: #ffffff;

}

.faq-consult {

    background:

        linear-gradient(135deg,

            #FF7A1A,

            #F59E0B);

    color: #ffffff;

}

.faq-buttons a:hover {

    transform:

        translateY(-6px);

    box-shadow:

        0 25px 60px rgba(255, 255, 255, .15);

}

.faq-particle {

    position: absolute;

    width: 12px;

    height: 12px;

    border-radius: 50%;

    background: #FFD54A;

    opacity: .35;

    animation: faqParticle 6s ease-in-out infinite;

}

.particle1 {

    top: 40px;

    right: 160px;

}

.particle2 {

    bottom: 80px;

    left: 140px;

}

.particle3 {

    top: 180px;

    right: 70px;

}

@keyframes faqParticle {

    0% {

        transform: translateY(0);

    }

    50% {

        transform: translateY(-12px);

    }

    100% {

        transform: translateY(0);

    }

}

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

@media(max-width:991px) {

    .faq-bottom {

        padding: 50px 35px;

    }

    .faq-bottom h3 {

        font-size: 34px;

    }

}

@media(max-width:767px) {

    .custom-faq .accordion-button {

        padding: 22px 65px 22px 20px;

        font-size: 16px;

    }

    .custom-faq .accordion-button::after {

        width: 40px;

        height: 40px;

        font-size: 24px;

    }

    .custom-faq .accordion-body {

        padding: 0 20px 22px;

        font-size: 15px;

    }

    .faq-bottom {

        padding: 40px 22px;

        border-radius: 24px;

    }

    .faq-bottom h3 {

        font-size: 28px;

    }

    .faq-bottom p {

        font-size: 15px;

    }

    .faq-buttons {

        flex-direction: column;

    }

    .faq-buttons a {

        width: 100%;

        justify-content: center;

    }

    .faq-particle {

        display: none;

    }

}