/*==================================================
Google Fonts
==================================================*/

:root {

    --primary-color: #0B5ED7;
    --secondary-color: #18202e;
    --accent-color: #16A34A;

    --white-color: #FFFFFF;
    --black-color: #111827;

    --text-color: #64748B;
    --border-color: #E5E7EB;
    --light-bg: #F8FAFC;

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

    --transition: all .35s ease;

    --shadow-sm:0 12px 28px rgba(15,23,42,.10);

    --shadow-md:0 22px 55px rgba(15,23,42,.16);

    --shadow-lg:0 35px 80px rgba(15,23,42,.22);

    --radius: 10px;

}


/*==================================================
Reset
==================================================*/

* {

    margin: 0;
    padding: 0;
    box-sizing: border-box;

}

html {

    scroll-behavior: smooth;

}

body {

    font-family: var(--body-font);
    color: var(--text-color);
    background: var(--white-color);
    overflow-x: hidden;

}

img {

    max-width: 100%;
    display: block;

}

ul {

    list-style: none;
    margin: 0;
    padding: 0;

}

a {

    text-decoration: none;
    transition: var(--transition);

}


/*==================================================
Top Bar
==================================================*/

.top-bar {

    background: var(--secondary-color);
    color: var(--white-color);
    font-size: 14px;

}

.top-bar-wrapper {

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

    min-height: 46px;

}

.top-bar-left,
.top-bar-right {

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

}

.top-bar-left a,
.top-bar-right a {

    color: var(--white-color);

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

}

.top-bar-left a:hover,
.top-bar-right a:hover {

    color: var(--accent-color);

}


/*==================================================
Header
==================================================*/

.header {

    position: relative;
    width: 100%;
    z-index: 999;

}


/*==================================================
Navbar
==================================================*/

.main-navbar {

    background: var(--white-color);

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

    transition: var(--transition);

    position:relative;

    z-index:10000;

}

.navbar-wrapper {

    display: flex;

    align-items: center;

    justify-content: space-between;

    min-height: 95px;

}

.site-logo img {

    height:72px;

    width:auto;


}


/*==================================================
Desktop Menu
==================================================*/

.desktop-menu{

    display:flex;

    align-items:center;

    gap:40px;

}



.desktop-menu>li {

    position: relative;

}

.desktop-menu>li>a {

    color: var(--secondary-color);

    font-weight: 600;

    font-size: 15px;

    display: flex;

    align-items: center;

    gap: 8px;

    padding:38px 0;

    transition: var(--transition);

}

.desktop-menu>li>a:hover,
.desktop-menu>li>a.active {

    color: var(--primary-color);

}


/*==================================================
Dropdown
==================================================*/

.dropdown-menu-custom {

    position: absolute;

    top: 120%;

    left: 0;

    min-width: 280px;

    background: #fff;

    border-radius: var(--radius);

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

    opacity: 0;

    visibility: hidden;

    transform: translateY(15px);

    transition: var(--transition);

    overflow: hidden;

}

.has-dropdown:hover .dropdown-menu-custom {

    opacity: 1;

    visibility: visible;

    transform: translateY(0);

}

.dropdown-menu-custom li {

    border-bottom: 1px solid #F1F5F9;

}

.dropdown-menu-custom li:last-child {

    border-bottom: none;

}

.dropdown-menu-custom a {

    display: block;

    padding: 15px 22px;

    color: var(--secondary-color);

    font-size: 14px;

    transition: var(--transition);

}

.dropdown-menu-custom a:hover {

    background: var(--light-bg);

    color: var(--primary-color);

    padding-left: 28px;

}

.dropdown-view-all {

    color: var(--primary-color) !important;

    font-weight: 600;

}


/*==================================================
CTA Button
==================================================*/

.btn-primary-custom {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    height: 54px;

    padding: 0 34px;

    border-radius: 999px;

    background: var(--primary-color);

    color: #fff;

    font-size:16px;

    font-weight:600;

    transition: var(--transition);

}

.btn-primary-custom:hover {

    background: var(--secondary-color);

    color: #fff;

    transform: translateY(-2px);

}


/*==================================================
Mobile Toggle
==================================================*/

.mobile-toggle {

    display: none;

    width: 48px;

    height: 48px;

    border: none;

    background: transparent;

    cursor: pointer;

}

.mobile-toggle span {

    display: block;

    width: 28px;

    height: 3px;

    margin: 6px auto;

    border-radius: 20px;

    background: var(--secondary-color);

    transition: var(--transition);

}


/*==================================================
Sticky Navbar
==================================================*/

.main-navbar.sticky {

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    z-index: 9999;

    background: #fff;

    animation: navbarFade .35s ease;

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

}


@keyframes navbarFade {

    from {

        opacity: 0;
        transform: translateY(-25px);

    }

    to {

        opacity: 1;
        transform: translateY(0);

    }

}


/*==================================================
Mobile Menu (Base)
==================================================*/

.mobile-overlay,
.mobile-menu {

    display: none;

}

/*==================================================
Hero Section
==================================================*/
/*==================================================
Hero Section
==================================================*/

.hero-section{

     position:relative;

    overflow:hidden;

    min-height:720px;

    display:flex;

    align-items:center;

    padding:140px 0 120px;




}

/*==================================================
Hero Background Slider
==================================================*/

.hero-slider{

    position:absolute;

    inset:0;

    z-index:1;

    overflow:hidden;

}

.hero-slide{

    position:absolute;

    inset:0;

    opacity:0;

    background-repeat:no-repeat;

    background-size:cover;

    background-position:center center;

    transform:scale(1);

    animation:
        heroFade 18s infinite,
        heroZoom 18s infinite;

}

.hero-slide:nth-child(1){

    animation-delay:0s,0s;

}

.hero-slide:nth-child(2){

    animation-delay:6s,6s;

}

.hero-slide:nth-child(3){

    animation-delay:12s,12s;

}

/*==================================================
Slider Animation
==================================================*/

@keyframes heroFade{

    0%{

        opacity:0;

    }

    6%{

        opacity:1;

    }

    30%{

        opacity:1;

    }

    36%{

        opacity:0;

    }

    100%{

        opacity:0;

    }

}

@keyframes heroZoom{

    0%{

        transform:scale(1);

    }

    100%{

        transform:scale(1.08);

    }

}

/*==================================================
Hero Overlay
==================================================*/

.hero-overlay{

    position:absolute;

    inset:0;

    z-index:2;

    background:linear-gradient(

        90deg,

        rgba(255, 255, 255, 0.61) 0%,

        rgba(255, 255, 255, 0.603) 32%,

        rgba(255, 255, 255, 0.295) 60%,

        rgba(255, 255, 255, 0.027) 100%

    );

}

/*==================================================
Background Shapes
==================================================*/

.hero-section::before{

    content:"";

    position:absolute;

    width:420px;

    height:420px;

    left:-180px;

    bottom:-180px;

    border-radius:50%;

    background:rgba(11,94,215,.06);

    filter:blur(70px);

    z-index:2;

}

.hero-section::after{

    content:"";

    position:absolute;

    width:320px;

    height:320px;

    right:-140px;

    top:-140px;

    border-radius:50%;

    background:rgba(11,94,215,.05);

    filter:blur(60px);

    z-index:2;

}

/*==================================================
Hero Container
==================================================*/

.hero-section .container{

    position:relative;

    z-index:5;

}

/*==================================================
Hero Content
==================================================*/

.hero-content{

    max-width:620px;

}

/*==================================================
Hero Badge
==================================================*/

.hero-badge{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:10px 22px;

    margin-bottom:26px;

    border-radius:50px;

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

    backdrop-filter:blur(14px);

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

    color:var(--primary-color);

    font-size:14px;

    font-weight:600;

}

.hero-badge i{

    font-size:15px;

}

/*==================================================
Hero Heading
==================================================*/

.hero-content h1{

    margin-bottom:28px;

    color:var(--secondary-color);

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

    font-size:64px;

    font-weight:800;

    line-height:1.08;

    letter-spacing:-1px;

}

/*==================================================
Hero Paragraph
==================================================*/

.hero-content p{

    max-width:560px;

    margin-bottom:42px;

    color:#141c27;

    font-size:18px;

    line-height:1.9;

}

/*==================================================
Hero Buttons
==================================================*/

.hero-buttons{

    display:flex;

    align-items:center;

    gap:18px;

    flex-wrap:wrap;

}

.btn-outline-custom{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    height:50px;

    padding:0 30px;

    border:2px solid var(--primary-color);

    border-radius:999px;

    background:transparent;

    color:var(--primary-color);

    font-weight:600;

    transition:all .35s ease;

}

.btn-outline-custom:hover{

    background:var(--primary-color);

    color:#fff;

}

/*==================================================
Hero Cards Wrapper
==================================================*/

.hero-cards{

    position:relative;

    width:100%;

    height:560px;

}

/*==================================================
Hero Card
==================================================*/

.hero-card{

    position:absolute;

    display:inline-flex;

    align-items:center;

    gap:16px;

    width:auto;

    min-width:240px;

    height:88px;

    padding:0 22px;

    border-radius:18px;

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

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

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

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

    transition:all .35s ease;

    white-space:nowrap;

}

/*==================================================
Hero Card Hover
==================================================*/

.hero-card:hover{

    transform:translateY(-8px);

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

}

/*==================================================
Hero Card Icon
==================================================*/

.hero-card i{

    width:52px;

    height:52px;

    flex-shrink:0;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:rgba(11,94,215,.08);

    color:var(--primary-color);

    font-size:20px;

}

/*==================================================
Hero Card Content
==================================================*/

.hero-card h6{

    margin:0 0 4px;

    color:var(--secondary-color);

    font-size:16px;

    font-weight:700;

    line-height:1.2;

}

.hero-card span{

    display:block;

    color:#64748B;

    font-size:14px;

    line-height:1.3;

}

/*==================================================
Card Position
==================================================*/

/* Top Left */

.hero-card-one{

    top:8%;

    left:8%;

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

}

/* Right Center */

.hero-card-two{

    top:42%;

    right:-10px;

    animation:floatTwo 7s ease-in-out infinite;

}

/* Bottom Left */

.hero-card-three{

    bottom:10%;

    left:22%;

    animation:floatThree 6.5s ease-in-out infinite;

}

/*==================================================
Floating Animation
==================================================*/

@keyframes floatOne{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-12px);

    }

}

@keyframes floatTwo{

    0%,100%{

        transform:translateY(-4px);

    }

    50%{

        transform:translateY(10px);

    }

}

@keyframes floatThree{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-8px);

    }

}

/*==================================================
Responsive
==================================================*/

@media (max-width:991px){

    .hero-section{

        min-height:auto;

        padding:120px 0 80px;

    }

    .hero-content{

        text-align:center;

        margin-bottom:60px;

        max-width:100%;

    }

    .hero-content h1{

        font-size:48px;

    }

    .hero-content p{

        margin-left:auto;

        margin-right:auto;

    }

    .hero-buttons{

        justify-content:center;

    }

    .hero-cards{

        height:360px;

    }

    .hero-card{

        min-width:220px;

        height:82px;

    }

    .hero-card-one{

        top:0;

        left:5%;

    }

    .hero-card-two{

        top:120px;

        right:5%;

    }

    .hero-card-three{

        bottom:0;

        left:18%;

    }

}

@media (max-width:767px){

    .hero-content h1{

        font-size:40px;

    }

    .hero-content p{

        font-size:16px;

    }

}

@media (max-width:576px){

    .hero-section{

        padding:100px 0 70px;

    }

    .hero-content h1{

        font-size:34px;

    }

    .hero-content p{

        font-size:15px;

    }

    .hero-buttons{

        flex-direction:column;

        align-items:stretch;

    }

    .hero-buttons .btn-primary-custom,

    .hero-buttons .btn-outline-custom{

        width:100%;

    }

    /* Hide floating cards on mobile */

    .hero-cards{

        display:none;

    }

}
/*==================================================
Partner Section
==================================================*/

.partner-section {

    padding: 100px 0;

    background: var(--white-color);

}


/*==================================================
Section Heading
==================================================*/

.section-heading {

    max-width: 760px;

    margin: 0 auto 60px;

}

.section-subtitle {

    display: inline-block;

    margin-bottom: 15px;

    color: var(--primary-color);

    font-size: 15px;

    font-weight: 600;

    letter-spacing: .5px;

    text-transform: uppercase;

}

.section-title {

    margin-bottom: 20px;

    color: var(--secondary-color);

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

    font-size: 40px;

    font-weight: 700;

    line-height: 1.3;

}

.section-description {

    color: var(--text-color);

    font-size: 16px;

    line-height: 1.8;

}


/*==================================================
Partner Grid
==================================================*/

.partner-grid {

    display: grid;

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

    gap: 30px;

}


/*==================================================
Partner Item
==================================================*/

/*==================================================
Partner Item
==================================================*/

.partner-item{

    display:flex;

    align-items:center;

    justify-content:center;

    min-height:130px;

    padding:25px;
    background:lab(95.84% 0.01 -0.01 / 0.021);

    border:1px solid rgba(11,94,215,.08);

    border-radius:16px;

    /* Soft Blue Shadow (Always Visible) */
    box-shadow:
        0 8px 20px rgba(11,94,215,.08),
        0 18px 40px rgba(11,94,215,.08);

    transition:all .35s ease;


    border-radius:16px;

    box-shadow:
        0 10px 30px rgba(11,94,215,.06);

    transition:all .35s ease;

}

.partner-item:hover{

    border-color:rgba(11,94,215,.22);

    transform:translateY(-8px);

    box-shadow:
        0 20px 45px rgba(11,94,215,.14),
        0 8px 20px rgba(11,94,215,.08);

}

.partner-item img{

    max-width:auto;

    max-height:auto;

    width:auto;

    height:auto;

    object-fit:contain;

    transition:all .35s ease;

}

.partner-item:hover img{

    transform:scale(1.06);

}

/*==================================================
About Section
==================================================*/

.about-section {

    padding: 100px 0;

    background: #F8FBFF;

}


/*==================================================
About Image
==================================================*/

.about-image {

    position: relative;

}

.about-image img {

    width: 100%;

    border-radius: 16px;

    display: block;

}


/*==================================================
Experience Badge
==================================================*/

.about-experience {

    position: absolute;

    right: -20px;

    bottom: 40px;

    padding: 25px;

    min-width: 180px;

    text-align: center;

    background: var(--primary-color);

    border-radius: 14px;

    color: var(--white-color);

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

}

.about-experience h3 {

    margin-bottom: 8px;

    font-size: 42px;

    font-weight: 700;

    line-height: 1;

    color: var(--white-color);

}

.about-experience span {

    display: block;

    font-size: 15px;

    line-height: 1.6;

}


/*==================================================
About Content
==================================================*/

.about-content {

    padding-left: 20px;

}

.about-content .section-title {

    margin-bottom: 25px;

}

.about-content .section-description {

    margin-bottom: 35px;

}


/*==================================================
About Features
==================================================*/

.about-features {

    display: grid;

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

    gap: 18px 25px;

    margin-bottom: 40px;

}

.about-feature {

    display: flex;

    align-items: flex-start;

    gap: 12px;

}

.about-feature i {

    margin-top: 3px;

    color: var(--primary-color);

    font-size: 18px;

    flex-shrink: 0;

}

.about-feature span {

    color: var(--text-color);

    font-size: 16px;

    font-weight: 500;

    line-height: 1.7;

}


/*==================================================
About Button
==================================================*/

.about-btn {

    display: flex;

    align-items: center;

}

.about-experience h3::after {

    content: "";

    display: block;

    width: 50px;

    height: 2px;

    margin: 12px auto 0;

    background: rgba(255, 255, 255, 0.35);

}

/*==================================================
Solutions Section
==================================================*/

.solutions-section {

    padding: 100px 0;

    background: var(--white-color);

}


/*==================================================
Solution Card
==================================================*/

.solution-card {

    display: flex;

    flex-direction: column;

    height: 100%;

    padding: 35px 30px;

    background: var(--white-color);

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

    border-radius: 16px;

    transition: var(--transition);

}

.solution-card:hover {

    border-color: var(--primary-color);

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

    transform: translateY(-6px);

}


/*==================================================
Solution Icon
==================================================*/

.solution-icon {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 70px;

    height: 70px;

    margin-bottom: 25px;

    border-radius: 16px;

    background: rgba(11, 94, 215, 0.08);

}

.solution-icon i {

    color: var(--primary-color);

    font-size: 30px;

}


/*==================================================
Solution Content
==================================================*/

.solution-card h3 {

    margin-bottom: 18px;

    color: var(--secondary-color);

    font-size: 24px;

    font-weight: 700;

    line-height: 1.3;

}

.solution-card p {

    margin-bottom: 25px;

    color: var(--text-color);

    font-size: 16px;

    line-height: 1.8;

}


/*==================================================
Solution Button
==================================================*/

.solution-btn {

    margin-top: auto;

    display: inline-flex;

    align-items: center;

    gap: 10px;

    color: var(--primary-color);

    font-size: 15px;

    font-weight: 600;

    text-decoration: none;

    transition: var(--transition);

}

.solution-btn i {

    font-size: 14px;

    transition: var(--transition);

}

.solution-btn:hover {

    color: var(--secondary-color);

}

.solution-btn:hover i {

    transform: translateX(5px);

}

.solution-card {

    display: flex;

    flex-direction: column;

    height: 100%;

    padding: 35px 30px;

    background: var(--white-color);

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

    border-radius: 16px;

    transition: var(--transition);

}

/*==================================================
Why Choose Us Section
==================================================*/

.why-choose-section {

    padding: 100px 0;

    background: #F8FBFF;

}


/*==================================================
Why Choose Content
==================================================*/

.why-choose-content {

    max-width: 480px;

}

.why-choose-content .section-title {

    margin-bottom: 25px;

}

.why-choose-content .section-description {

    margin-bottom: 35px;

}


/*==================================================
Choose Card
==================================================*/

.choose-card {

    display: flex;

    flex-direction: column;

    height: 100%;

    padding: 30px;

    background: var(--white-color);

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

    border-radius: 16px;

    transition: var(--transition);

}

.choose-card:hover {

    border-color: var(--primary-color);

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

    transform: translateY(-6px);

}


/*==================================================
Choose Icon
==================================================*/

.choose-icon {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 70px;

    height: 70px;

    margin-bottom: 25px;

    border-radius: 16px;

    background: rgba(11, 94, 215, 0.08);

}

.choose-icon i {

    color: var(--primary-color);

    font-size: 28px;

}


/*==================================================
Choose Content
==================================================*/

.choose-card h3 {

    margin-bottom: 15px;

    color: var(--secondary-color);

    font-size: 22px;

    font-weight: 700;

    line-height: 1.3;

}

.choose-card p {

    margin: 0;

    color: var(--text-color);

    font-size: 15px;

    line-height: 1.8;

}
.choose-card h3 {

    min-height: 58px;

}
.choose-card p {

    flex-grow: 1;

}
/*==================================================
Process Section
==================================================*/

.process-section {

    padding: 100px 0;

    background: var(--white-color);

}


/*==================================================
Process Card
==================================================*/

.process-card {

    position: relative;

    display: flex;

    flex-direction: column;

    align-items: center;

    height: 100%;

    padding: 40px 30px;

    text-align: center;

    background: var(--white-color);

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

    border-radius: 16px;

    transition: var(--transition);

}

.process-card:hover {

    border-color: var(--primary-color);

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

    transform: translateY(-6px);

}


/*==================================================
Process Number
==================================================*/

.process-number {

    position: absolute;

    top: 20px;

    right: 20px;

    color: rgba(11, 94, 215, 0.12);

    font-size: 42px;

    font-weight: 700;

    line-height: 1;

}


/*==================================================
Process Icon
==================================================*/

.process-icon {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 80px;

    height: 80px;

    margin-bottom: 25px;

    border-radius: 50%;

    background: rgba(11, 94, 215, 0.08);

}

.process-icon i {

    color: var(--primary-color);

    font-size: 32px;

}


/*==================================================
Process Content
==================================================*/

.process-card h3 {

    min-height: 60px;

    margin-bottom: 18px;

    color: var(--secondary-color);

    font-size: 22px;

    font-weight: 700;

    line-height: 1.4;

}

.process-card p {

    flex-grow: 1;

    margin: 0;

    color: var(--text-color);

    font-size: 15px;

    line-height: 1.8;

}
.process-card::after {

    content: "";

    position: absolute;

    top: 80px;

    right: -30px;

    width: 60px;

    height: 2px;

    background: var(--border-color);

}

.process-card:last-child::after {

    display: none;

}

/*==================================================
Industries Section
==================================================*/

.industries-section {

    padding: 100px 0;

    background: #F8FBFF;

}


/*==================================================
Industry Card
==================================================*/

.industry-card {

    display: flex;

    flex-direction: column;

    align-items: center;

    height: 100%;

    padding: 35px 30px;

    text-align: center;

    background: var(--white-color);

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

    border-radius: 16px;

    transition: var(--transition);

}

.industry-card:hover {

    border-color: var(--primary-color);

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

    transform: translateY(-6px);

}


/*==================================================
Industry Icon
==================================================*/

.industry-icon {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 75px;

    height: 75px;

    margin-bottom: 25px;

    border-radius: 50%;

    background: rgba(11, 94, 215, 0.08);

}

.industry-icon i {

    color: var(--primary-color);

    font-size: 30px;

}


/*==================================================
Industry Content
==================================================*/

.industry-card h3 {

    min-height: 58px;

    margin-bottom: 15px;

    color: var(--secondary-color);

    font-size: 22px;

    font-weight: 700;

    line-height: 1.4;

}

.industry-card p {

    flex-grow: 1;

    margin: 0;

    color: var(--text-color);

    font-size: 15px;

    line-height: 1.8;

}

.industry-icon::after {

    content: "";

    position: absolute;

    bottom: -12px;

    left: 50%;

    transform: translateX(-50%);

    width: 40px;

    height: 2px;

    background: rgba(11, 94, 215, 0.15);

}

.industry-icon {

    position: relative;

    display: flex;

    align-items: center;

    justify-content: center;

    width: 75px;

    height: 75px;

    margin-bottom: 25px;

    border-radius: 50%;

    background: rgba(11, 94, 215, 0.08);

}

/*==================================================
Testimonials Section
==================================================*/

.testimonials-section {

    padding: 100px 0;

    background: var(--white-color);

}


/*==================================================
Testimonial Card
==================================================*/

.testimonial-card {

    position: relative;

    display: flex;

    flex-direction: column;

    height: 100%;

    padding: 35px 30px;

    background: var(--white-color);

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

    border-radius: 16px;

    transition: var(--transition);

}

.testimonial-card::before {

    content: "\f10d";

    font-family: "Font Awesome 6 Free";

    font-weight: 900;

    position: absolute;

    top: 25px;

    right: 25px;

    font-size: 28px;

    color: rgba(11, 94, 215, 0.08);

}

.testimonial-card:hover {

    border-color: var(--primary-color);

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

    transform: translateY(-6px);

}


/*==================================================
Rating
==================================================*/

.testimonial-rating {

    display: flex;

    gap: 5px;

    margin-bottom: 20px;

}

.testimonial-rating i {

    color: #F4B400;

    font-size: 16px;

}


/*==================================================
Testimonial Text
==================================================*/

.testimonial-text {

    flex-grow: 1;

    margin-bottom: 30px;

    color: var(--text-color);

    font-size: 16px;

    line-height: 1.9;

    font-style: italic;

}


/*==================================================
Author
==================================================*/

.testimonial-author {

    display: flex;

    align-items: center;

    gap: 15px;

    padding-top: 20px;

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

}


/*==================================================
Author Image
==================================================*/

.testimonial-avatar {

    flex-shrink: 0;

}

.testimonial-avatar img {

    width: 65px;

    height: 65px;

    border-radius: 50%;

    object-fit: cover;

}


/*==================================================
Author Info
==================================================*/

.testimonial-info h4 {

    margin-bottom: 5px;

    color: var(--secondary-color);

    font-size: 18px;

    font-weight: 700;

}

.testimonial-info span {

    color: var(--text-color);

    font-size: 14px;

}

/*==================================================
FAQ Section
==================================================*/

.faq-section {

    padding: 100px 0;

    background: #F8FBFF;

}


/*==================================================
FAQ Accordion
==================================================*/

.faq-accordion .accordion-item {

    margin-bottom: 20px;

    background: var(--white-color);

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

    border-radius: 12px;

    overflow: hidden;

}

.faq-accordion .accordion-item:last-child {

    margin-bottom: 0;

}


/*==================================================
Accordion Header
==================================================*/

.faq-accordion .accordion-button {

    padding: 22px 25px;

    background: var(--white-color);

    color: var(--secondary-color);

    font-size: 18px;

    font-weight: 600;

    line-height: 1.5;

    box-shadow: none;

}

.faq-accordion .accordion-button:focus {

    box-shadow: none;

    border-color: transparent;

}


/*==================================================
Accordion Active
==================================================*/

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

    color: var(--primary-color);

    background: rgba(11, 94, 215, 0.04);

}


/*==================================================
Accordion Icon
==================================================*/

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

    transition: var(--transition);

}


/*==================================================
Accordion Body
==================================================*/

.faq-accordion .accordion-body {

    padding: 0 25px 25px;

    color: var(--text-color);

    font-size: 16px;

    line-height: 1.8;

}


/*==================================================
Accordion Hover
==================================================*/

.faq-accordion .accordion-item:hover {

    border-color: var(--primary-color);

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

}

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

    border-color: var(--primary-color);

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

}

/*==================================================
Call To Action Section
==================================================*/

.cta-section {

    padding: 100px 0;

    background: #F8FBFF;

}


/*==================================================
CTA Wrapper
==================================================*/

.cta-wrapper {

    padding: 70px 60px;

    background: linear-gradient(135deg, #0B5ED7 0%, #084298 100%);

    border-radius: 20px;

    overflow: hidden;

    position: relative;

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

}

.cta-wrapper::before {

    content: "";

    position: absolute;

    top: -120px;

    right: -120px;

    width: 280px;

    height: 280px;

    background: rgba(255, 255, 255, 0.08);

    border-radius: 50%;

}

.cta-wrapper::after {

    content: "";

    position: absolute;

    bottom: -80px;

    left: -80px;

    width: 180px;

    height: 180px;

    background: rgba(255, 255, 255, 0.05);

    border-radius: 50%;

}


/*==================================================
CTA Content
==================================================*/

.cta-content {

    position: relative;

    z-index: 2;

}

.cta-content .section-subtitle {

    color: rgba(255, 255, 255, 0.85);

}

.cta-content h2 {

    margin: 15px 0 20px;

    color: var(--white-color);

    font-size: 42px;

    font-weight: 700;

    line-height: 1.3;

}

.cta-content p {

    margin-bottom: 0;

    color: rgba(255, 255, 255, 0.90);

    font-size: 17px;

    line-height: 1.8;

}


/*==================================================
CTA Buttons
==================================================*/

.cta-buttons {

    position: relative;

    z-index: 2;

    display: flex;

    justify-content: flex-end;

    align-items: center;

    gap: 15px;

    flex-wrap: wrap;

}


/*==================================================
Primary Button
==================================================*/

.cta-buttons .btn-primary-custom {

    background: var(--white-color);

    color: var(--primary-color);

    border: 2px solid var(--white-color);

}

.cta-buttons .btn-primary-custom:hover {

    background: transparent;

    color: var(--white-color);

}


/*==================================================
Outline Button
==================================================*/

.cta-buttons .btn-outline-custom {

    background: transparent;

    color: var(--white-color);

    border: 2px solid rgba(255, 255, 255, 0.5);

}

.cta-buttons .btn-outline-custom:hover {

    background: var(--white-color);

    color: var(--primary-color);

    border-color: var(--white-color);

}
/*==================================================
Footer Section
==================================================*/

.footer-section {

    background: #0F172A;

    color: rgba(255, 255, 255, 0.75);

    padding-top: 80px;

}


/*==================================================
Footer Widget
==================================================*/

.footer-widget {

    height: 100%;

}

.footer-widget h4 {

    margin-bottom: 25px;

    color: var(--white-color);

    font-size: 22px;

    font-weight: 600;

}


/*==================================================
Footer Logo
==================================================*/

.footer-logo {

    display: inline-block;

    margin-bottom: 25px;

}

.footer-logo img {

    max-height: 55px;

}


/*==================================================
Footer Description
==================================================*/

.footer-description {

    margin-bottom: 30px;

    line-height: 1.8;

    color: rgba(255, 255, 255, 0.75);

}


/*==================================================
Footer Links
==================================================*/

.footer-widget ul {

    margin: 0;

    padding: 0;

    list-style: none;

}

.footer-widget ul li {

    margin-bottom: 14px;

}

.footer-widget ul li:last-child {

    margin-bottom: 0;

}

.footer-widget ul li a {

    position: relative;

    display: inline-block;

    transition: var(--transition);

}

.footer-widget ul li a::before {

    content: "";

    position: absolute;

    left: -12px;

    top: 50%;

    width: 0;

    height: 2px;

    background: var(--primary-color);

    transform: translateY(-50%);

    transition: var(--transition);

}

.footer-widget ul li a:hover {

    padding-left: 12px;

}

.footer-widget ul li a:hover::before {

    width: 8px;

}


/*==================================================
Footer Contact
==================================================*/

.footer-contact li {

    display: flex;

    align-items: flex-start;

    gap: 12px;

}

.footer-contact li i {

    margin-top: 4px;

    min-width: 18px;

    color: var(--primary-color);

}

.footer-contact span,
.footer-contact a {

    color: rgba(255, 255, 255, 0.75);

    text-decoration: none;

    line-height: 1.7;

}

.footer-contact a:hover {

    color: var(--primary-color);

}


/*==================================================
Footer Social
==================================================*/

.footer-social {

    display: flex;

    align-items: center;

    gap: 12px;

}

.footer-social a {

    width: 42px;

    height: 42px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background: rgba(255, 255, 255, 0.08);

    color: var(--white-color);

    text-decoration: none;

    transition: var(--transition);

}

.footer-social a:hover {

    background: var(--primary-color);

    transform: translateY(-4px);

}


/*==================================================
Footer Bottom
==================================================*/

.footer-bottom {

    margin-top: 70px;

    padding: 25px 0;

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

}

.footer-bottom p {

    margin: 0;

    color: rgba(255, 255, 255, 0.70);

}


/*==================================================
Footer Bottom Links
==================================================*/

.footer-bottom-links {

    display: flex;

    justify-content: flex-end;

    align-items: center;

    flex-wrap: wrap;

    gap: 20px;

}

.footer-bottom-links a {

    color: rgba(255, 255, 255, 0.70);

    text-decoration: none;

    transition: var(--transition);

}

.footer-bottom-links a:hover {

    color: var(--primary-color);

}