/*----------------SCROLL ANIMATION------------------*/
.animate-on-scroll { opacity: 0; transform: translateY(30px);transition: all 0.8s ease-out;}
.animate-on-scroll.active { opacity: 1; transform: translateY(0);}

/*----------------ROOT VARIABLES------------------*/
:root {
    --bg-dark: white;
    --cyan-glow: #00f2ff;
    --orange-glow: #ff4d00;
    --glass: rgba(255, 255, 255, 0.05);
    --bg-midnight: #040d16;
    --text-cyan: #00f2ff;
    --dev-cyan: #00d2ff;
    --pf-primary: #10243f;
    --pf-secondary: #1b4f8c;
    --pf-accent: #f47c20;
    --pf-accent-soft: #fff3e8;
    --pf-bg: #f6f9fc;
    --pf-border: #dfe8f2;
    --pf-text: #24364b;
    --pf-muted: #66788f;
    --pf-shadow: 0 14px 35px rgba(16, 36, 63, 0.08);
    --node-green: #539e43;
    --node-dark: #1e1e1e;
    --text-dark: #2c3e50;
    --text-gray: #6c757d;
    --primary-green: #539e43;
    --light-green-bg: #e8f5e9;
    --text-dark: #2c3e50;
    --industries-green: #1a3a1a;
    --industries-light-green: #e8f5e9;
    --industries-text-dark: #1f2937;
    --industries-accent: #539e43;
    --tech-green: #539e43;
    --tech-dark-green: #021702;
    --tech-light-bg: #f8f9fa;
}

/* =========================================
   CONSULT TOGGLE BUTTON
========================================= */
.consult-toggle {
    position: fixed;
    right: -78px;
    top: 50%;
    transform: translateY(-50%) rotate(-90deg);
    background: #f68b32;
    color: #fff;
    padding: 14px 22px;
    font-weight: 700;
    font-size: 15px;
    cursor: pointer;
    z-index: 9999;
    border-radius: 8px 8px 0 0;
    box-shadow: 0 10px 25px rgba(0,0,0,0.25);
    font-family: 'Poppins', sans-serif;
}

.consult-box {
    position: fixed;
    right: -760px;
    top: 50%;
    transform: translateY(-50%);
    max-width: calc(100vw - 24px);
    background: rgba(33,33,33,0.97);
    backdrop-filter: blur(10px);
    z-index: 10000;
    transition: 0.4s ease;
    padding: 16px 18px;
    border-radius: 12px;
    box-shadow: 0 15px 40px rgba(0,0,0,0.35);
    font-family: 'Poppins', sans-serif;
    max-height: 88vh;
    overflow-y: auto;
}

    .consult-box.active {
        right: 12px;
    }

.consult-content h3 {
    color: #fff;
    font-size: 21px;
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 14px;
    text-align: center;
    padding-right: 30px;
}

.consult-close {
    position: absolute;
    top: 10px;
    right: 14px;
    background: transparent;
    border: none;
    color: #fff;
    font-size: 28px;
    cursor: pointer;
    z-index: 2;
}

.consult-row {
    display: flex;
    gap: 12px;
}

.consult-col {
    width: 50%;
}

.consult-box input,
.consult-box select,
.consult-box textarea {
    width: 100%;
    background: #3a3a3a !important;
    border: 1px solid #565656 !important;
    border-radius: 8px !important;
    padding: 10px 13px !important;
    color: #fff !important;
    margin-bottom: 10px !important;
    outline: none !important;
    font-size: 14px !important;
    box-shadow: none !important;
    box-sizing: border-box;
}

.consult-box input,
.consult-box select {
    height: 42px;
}

.consult-box textarea {
    height: 70px;
    min-height: 70px;
    resize: none;
}

    .consult-box input::placeholder,
    .consult-box textarea::placeholder {
        color: #d4d4d4;
    }

    .consult-box input:focus,
    .consult-box select:focus,
    .consult-box textarea:focus {
        border-color: #f68b32 !important;
        background: #404040 !important;
    }

.phone-box {
    display: flex;
    align-items: center;
    height: 42px;
    background: #3a3a3a;
    border: 1px solid #565656;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 10px;
}

.country-code {
    height: 100%;
    padding: 0 14px;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    border-right: 1px solid #565656;
    background: #343434;
    display: flex;
    align-items: center;
    white-space: nowrap;
}

.phone-box input {
    border: none !important;
    background: transparent !important;
    margin-bottom: 0 !important;
    height: 100% !important;
}

.hire-captcha {
    background: #fff;
    padding: 10px;
    border-radius: 10px;
    margin-bottom: 10px;
}

    .hire-captcha img {
        max-width: 100%;
        height: 50px !important;
        object-fit: contain;
        display: block;
        margin-bottom: 4px;
    }

    .hire-captcha a {
        font-size: 13px;
        color: var(--bs-orange);
        text-decoration: none;
    }

    .hire-captcha input {
        height: 40px !important;
        margin: 6px 0 0 !important;
        background: var(--bs-dark-bg-subtle) !important;
        color: var(--bs-black) !important;
    }

.consult-btn {
    width: 100%;
    height: 43px;
    border: none;
    border-radius: 8px;
    background: linear-gradient(135deg, #f68b32, #ff6a00);
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
}

.consult-box::-webkit-scrollbar {
    width: 6px;
}

.consult-box::-webkit-scrollbar-thumb {
    background: #f68b32;
    border-radius: 10px;
}

@media (max-width: 768px) {
    .consult-box {
        width: calc(100% - 24px);
        right: -110%;
        padding: 16px;
    }

        .consult-box.active {
            right: 12px;
        }

    .consult-row {
        flex-direction: column;
        gap: 0;
    }

    .consult-col {
        width: 100%;
    }

    .consult-content h3 {
        font-size: 17px;
    }
}
/*----------------Active Nav Links------------------*/
/* Active Navbar */
.active-nav > .nav-link,
.nav-link.active-nav {
    color: #00d4ff !important;
    font-weight: 600;
    position: relative;
}

    /* Underline effect */
    .active-nav > .nav-link::after,
    .nav-link.active-nav::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: -6px;
        width: 100%;
        height: 4px;
        background: #ffffffad;
        border-radius: 20px;
        top: 50px;
    }

/* Active dropdown item */
.active-dropdown {
    color: #00d4ff !important;
    font-weight: 600;
    background: rgba(0, 212, 255, 0.08);
}

/* Before Scroll */

.header-transparent .navbar-nav .nav-link.hire-developer-link {
    background: #ffffff;
    color: #111827 !important;
    border-radius: 8px;
    padding: 10px 18px !important;
    margin-left: 10px;
    font-weight: 600;
}

    /* Remove underline */

    .header-transparent .navbar-nav .nav-link.hire-developer-link::after {
        display: none !important;
    }

/* After Scroll */

.header-transparent.header-scrolled .navbar-nav .nav-link.hire-developer-link {
    background: #111827;
    color: #ffffff !important;
}

/* Hover */

.header-transparent .navbar-nav .nav-link.hire-developer-link:hover {
    color: #111827 !important;
}

.header-transparent.header-scrolled .navbar-nav .nav-link.hire-developer-link:hover {
    color: #ffffff !important;
}

/*----------------BASE HTML STYLES------------------*/
html {
    font-size: 14px;
    position: relative;
    min-height: 100%;
}

/*@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}*/

.btn:focus,
.btn:active:focus,
.btn-link.nav-link:focus,
.form-control:focus,
.form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.form-floating > .form-control-plaintext::placeholder,
.form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder,
.form-floating > .form-control:focus::placeholder {
    text-align: start;
}

/*----------------SCROLLBAR STYLES------------------*/
::-webkit-scrollbar {
    width: 6px;
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 10px;
}

    ::-webkit-scrollbar-thumb:hover {
        background: rgba(255, 255, 255, 0.4);
    }

::-webkit-scrollbar-track {
    background: transparent;
}

* {
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
}

/*----------------NAVBAR STYLES------------------*/
.header-transparent {
    transition: all 0.4s ease-in-out;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    position: fixed;
    width: 100%;
    z-index: 9999;
}

    /* When scrolled -> white background */
    .header-transparent.header-scrolled {
        background: rgb(255 255 255 / 95%);
        backdrop-filter: blur(12px);
    }

        /* Logo resize on scroll */
        .header-transparent.header-scrolled .navbar-brand img {
            height: 50px !important;
            transition: height 0.3s ease;
        }

        .header-transparent.header-scrolled .navbar-nav .nav-link {
            padding: 0.5rem 1rem !important;
        }

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

.top-bar{

    background:#0d1830;
    color:#fff;
    font-size:13px;
    overflow:hidden;
    border-bottom:1px solid rgba(255,255,255,.08);
}

.topbar-wrapper{

    display:flex;
    align-items:center;
    justify-content:space-between;
    min-height:42px;
}

/* LEFT */

.topbar-left{

    display:flex;
    align-items:center;
    gap:30px;
    flex-shrink:0;
}

.topbar-item{

    display:flex;
    align-items:center;
    gap:10px;
    color:#fff;
    position:relative;
}

.topbar-item:not(:last-child)::after{

    content:"";
    position:absolute;
    right:-15px;
    top:50%;
    transform:translateY(-50%);
    width:1px;
    height:18px;
    background:rgba(255,255,255,.2);
}

.topbar-item img{

    width:18px;
}

.topbar-item i{

    color:#fff;
}

.topbar-item a{

    color:#fff;
    text-decoration:none;
    transition:.3s;
}

.topbar-item a:hover{

    color:#ff7a1a;
}


/* CENTER */

.topbar-center{

    flex:1;
    overflow:hidden;
    padding:0 40px;
}

.marquee{

    overflow:hidden;
    white-space:nowrap;
}

.marquee-content{

    display:inline-flex;
    align-items:center;
    gap:28px;
    animation:scrollText 28s linear infinite;
}

.marquee-content span{

    color:#d7dde7;
    font-size:13px;
}

.marquee:hover .marquee-content{

    animation-play-state:paused;
}

@keyframes scrollText {

    from {
        transform: translateX(calc(100% - 120px));
    }

    to {
        transform: translateX(-100%);
    }
}


/* RIGHT */

.topbar-right{

    display:flex;
    align-items:center;
    gap:8px;
    flex-shrink:0;
}

.social-icon{

    width:28px;
    height:28px;
    border-radius:50%;
    background:rgba(255,255,255,.08);

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

    color:#fff;
    transition:.3s;
}

.social-icon:hover{

    background:#ff7a1a;
    color:#fff;
    transform:translateY(-2px);
}


/* MOBILE */

@media(max-width:992px){

    .topbar-wrapper{

        flex-wrap:wrap;
        padding:8px 0;
        gap:10px;
    }

    .topbar-left{

        width:100%;
        justify-content:center;
        gap:15px;
        flex-wrap:wrap;
    }

    .topbar-center{

        width:100%;
        padding:0;
        order:3;
    }

    .topbar-right{

        width:100%;
        justify-content:center;
    }

}
/* =====================================================
   NAVBAR MAIN
===================================================== */

.custom-navbar {
    padding-top: 0.25rem !important;
    padding-bottom: 0.25rem !important;
    z-index: 9999;
}

    .custom-navbar .navbar-brand img {
        height: 60px;
    }

    .custom-navbar .navbar-nav .nav-link {
        color: #ffffff !important;
        font-size: 15px;
        font-weight: 500;
        padding: 22px 15px !important;
        transition: all 0.25s ease;
    }

        .custom-navbar .navbar-nav .nav-link:hover,
        .custom-navbar .custom-dropdown:hover > .nav-link {
            color: #ff7a1a !important;
        }

.header-transparent.header-scrolled .custom-navbar .nav-link {
    color: #000000 !important;
}

    .header-transparent.header-scrolled .custom-navbar .nav-link:hover {
        color: #ff7a1a !important;
    }


/* =====================================================
   COMMON DROPDOWN BASE
===================================================== */

.custom-dropdown {
    position: relative;
}

.custom-dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    background: #292929;
    border-radius: 0 0 14px 14px;
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.35);
    z-index: 99999;
}

.custom-dropdown:hover > .custom-dropdown-menu {
    display: flex;
}

.custom-dropdown-menu a {
    display: block;
    color: #ffffff;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.35;
    text-decoration: none;
    padding: 9px 0;
    transition: all 0.25s ease;
    white-space: nowrap;
}

    .custom-dropdown-menu a:hover {
        color: #ff7a1a;
        transform: translateX(4px);
    }


/* =====================================================
   COMPANY DROPDOWN
===================================================== */

.company-dropdown .small-dropdown {
    left: 0;
    width: 230px;
    padding: 15px 22px;
    flex-direction: column;
}


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

.services-dropdown .services-menu {
    left: -210px;
    width: 560px;
    padding: 22px 30px 25px;
    gap: 45px;
}

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

.industries-dropdown {
    position: relative;
}

.industries-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: -580px;
    width: 820px;
    min-height: 352px;
    padding: 22px 20px 28px;
    background: rgb(35 35 35);
    border-radius: 0 0 14px 14px;
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.45);
    z-index: 99999;
    gap: 24px;
}

.industries-dropdown:hover .industries-menu {
    display: flex;
}

.industries-col {
    min-width: 0;
}

.fintech-col {
    width: 270px;
}

.other-col {
    flex: 1;
}

.industries-col h4 {
    display: flex;
    align-items: center;
    gap: 9px;
    color: #e97820;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    margin: 0 0 15px;
    padding-bottom: 13px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.45);
}

    .industries-col h4 i {
        color: #e97820;
        font-size: 16px;
    }

.industries-col a {
    display: block;
    color: rgba(255, 255, 255, 0.78);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.25;
    text-decoration: none;
    padding: 10px 0 14px 35px;
    transition: all 0.25s ease;
    white-space: nowrap;
}

.fintech-col a {
    padding-left: 36px;
}

.industries-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 72px;
}

    .industries-grid a {
        padding-left: 16px;
    }

.industries-col a:hover {
    color: #e97820;
    transform: translateX(4px);
}

.industries-dropdown:hover > .nav-link {
    color: #e97820 !important;
}
/* =====================================================
   TECHNOLOGY DROPDOWN - EXACT STYLE
===================================================== */

.technology-dropdown {
    position: relative;
}

.technology-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: -540px;
    width: 820px;
    min-height: 388px;
    padding: 20px 20px 25px;
    background: rgb(35 35 35);
    border-radius: 0;
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.45);
    z-index: 99999;
    gap: 30px;
}

.technology-dropdown:hover .technology-menu {
    display: flex;
}

.technology-col {
    flex: 1;
    min-width: 0;
}

    .technology-col h4 {
        display: flex;
        align-items: center;
        gap: 9px;
        color: #ff7a1a;
        font-size: 14px;
        font-weight: 800;
        letter-spacing: 0.4px;
        text-transform: uppercase;
        margin: 0 0 15px;
        padding-bottom: 12px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.55);
    }

        .technology-col h4 i {
            color: #ff7a1a;
            font-size: 15px;
        }

    .technology-col a {
        display: block;
        color: rgba(255, 255, 255, 0.82);
        font-size: 16px;
        font-weight: 700;
        line-height: 1.25;
        text-decoration: none;
        padding: 10px 0 14px 16px;
        transition: all 0.25s ease;
        white-space: nowrap;
    }

        .technology-col a:hover {
            color: #ff7a1a;
            transform: translateX(4px);
        }

.second-tech-heading {
    margin-top: 20px !important;
}
/* =====================================================
   SOLUTIONS DROPDOWN
===================================================== */

.solutions-dropdown .solutions-menu {
    left: -480px;
    width: 820px;
    padding: 24px 34px 28px;
    gap: 45px;
}


/* =====================================================
   MEGA DROPDOWN COLUMN
===================================================== */

.mega-dropdown {
    display: none;
}

.mega-column {
    flex: 1;
    min-width: 0;
}


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

@media (max-width: 991.98px) {

    .custom-navbar .navbar-nav {
        align-items: flex-start !important;
        width: 100%;
    }

        .custom-navbar .navbar-nav .nav-link {
            padding: 10px 15px !important;
            color: #ffffff !important;
            width: 100%;
        }

    .custom-dropdown {
        width: 100%;
    }

    .custom-dropdown-menu,
    .services-dropdown .services-menu,
    .solutions-dropdown .solutions-menu,
    .company-dropdown .small-dropdown,
    .industries-menu,
    .technology-menu {
        position: static !important;
        display: none;
        width: 100% !important;
        min-width: 100% !important;
        min-height: auto !important;
        left: auto !important;
        top: auto !important;
        padding: 14px 18px !important;
        margin: 0 0 12px 0 !important;
        background: #292929 !important;
        box-shadow: none !important;
        border-radius: 8px !important;
        flex-direction: column !important;
        gap: 0 !important;
        overflow: visible !important;
    }

    .custom-dropdown:hover > .custom-dropdown-menu,
    .industries-dropdown:hover .industries-menu,
    .technology-dropdown:hover .technology-menu {
        display: flex !important;
    }

    .mega-dropdown,
    .mega-column,
    .industries-col,
    .technology-col,
    .fintech-col,
    .other-col {
        width: 100% !important;
        flex: none !important;
    }

    .industries-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        column-gap: 0 !important;
    }

    .custom-dropdown-menu a,
    .industries-col a,
    .technology-col a {
        font-size: 13px !important;
        padding: 8px 0 8px 10px !important;
        white-space: normal !important;
        transform: none !important;
    }

    .industries-col h4,
    .technology-col h4 {
        font-size: 12px !important;
        margin: 12px 0 8px !important;
        padding-bottom: 8px !important;
    }

    .second-tech-heading {
        margin-top: 16px !important;
    }
}
/*----------------HERO SECTION------------------*/
.hero-section {
    position: relative;
    height: 100vh;
    overflow: hidden;
    background: #000;
}

.hero-section {
    position: relative;
    overflow: hidden;
    min-height: 100vh;
}

.video-container {
    position: absolute;
    inset: 0;
    overflow: hidden;
    z-index: 0;
}

.video-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 1.2s ease;
    filter: grayscale(1);
    pointer-events: none;
}

    .video-slide.active {
        opacity: 1;
    }

.video-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.60);
    z-index: 2;
}

.hero-section .container {
    position: relative;
    z-index: 5;
}

/* CONTENT */
.hero-title {
    font-size: clamp(2.5rem, 5vw, 4rem);
    font-weight: 900;
    margin-bottom: 15px;
}

.hero-subtitle {
    font-size: clamp(1.3rem, 2.5vw, 2rem);
    font-weight: 600;
    margin-bottom: 10px;
}

.hero-highlight {
    font-size: 1rem;
    opacity: 0.85;
    margin-bottom: 25px;
}

/* TAGS */
.hero-tags {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 18px;
    font-size: 14px;
    margin-bottom: 30px;
}

    .hero-tags span {
        display: flex;
        align-items: center;
        gap: 6px;
        opacity: 0.9;
    }

/* BUTTON */
.hero-btn {
    background: linear-gradient(135deg, #ff7a1a, #ff4d00);
    color: #fff;
    padding: 14px 30px;
    font-weight: 700;
    border-radius: 6px;
    text-decoration: none;
    transition: 0.3s;
}

    .hero-btn:hover {
        background: linear-gradient(135deg, #ff5a00, #ff2e00);
        transform: translateY(-2px);
    }

/* COLORS */
.text-orange {
    color: #ff7a1a;
}

/*----------------TECH SECTION------------------*/
.tech-section {
    background: linear-gradient(135deg, #f9f9f9 0%, #e9ecef 100%);
    display: flex;
    align-items: center;
    position: relative;
    padding: 80px 0;
}

.tech-card {
    background: white;
    border-radius: 12px;
    padding: 15px 20px;
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 3px 10px rgba(0,0,0,0.05);
    transition: 0.3s;
    cursor: pointer;
    text-decoration: none;
}

    .tech-card img {
        width: 28px;
        height: 28px;
        object-fit: contain;
    }

    .tech-card span {
        font-weight: 600;
        color: #333;
    }

    .tech-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 8px 20px rgba(0,0,0,0.1);
    }

.card-icon {
    font-size: 3.5rem;
    margin: 0 auto 20px auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: linear-gradient(135deg, #0d6efd, #00f2ff);
    color: #fff;
    transition: transform 0.3s ease, background 0.3s ease;
}

.label-red {
    color: #dc3545;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.title-cyan {
    background: linear-gradient(90deg, #0d6efd, #00f2ff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 800;
    font-size: 1.8rem;
    letter-spacing: 0.5px;
    margin: 15px 0;
}

.description-dark {
    color: #495057;
    font-size: 1.1rem;
    font-weight: 400;
    opacity: 0.9;
}

.glow-line-red {
    width: 60px;
    height: 4px;
    background: linear-gradient(90deg, #dc3545, #ff6b6b);
    margin: 0 auto;
    box-shadow: 0 0 12px rgba(220, 53, 69, 0.6);
    border-radius: 10px;
}

.glow-line-cyan {
    width: 80px;
    height: 4px;
    background: linear-gradient(90deg, #0d6efd, #00f2ff);
    margin: 0 auto;
    box-shadow: 0 0 15px rgba(13, 110, 253, 0.6);
    border-radius: 10px;
}

.tech-section::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: radial-gradient(#d1d5db 1px, transparent 1px);
    background-size: 40px 40px;
    opacity: 0.05;
    pointer-events: none;
}

/*GOV_PROJECT*/
/*======================================================
    GOV PROJECTS SECTION
======================================================*/

.gov-projects-section {
    position: relative;
    padding: 90px 0;
    background: #ffffff;
    overflow: hidden;
}

    .gov-projects-section::before {
        content: '';
        position: absolute;
        width: 700px;
        height: 700px;
        background: radial-gradient(circle,#eef8ff 0%,transparent 70%);
        left: -220px;
        top: -250px;
        z-index: 0;
    }

    .gov-projects-section::after {
        content: '';
        position: absolute;
        width: 650px;
        height: 650px;
        background: radial-gradient(circle,#fff5ef 0%,transparent 70%);
        right: -180px;
        bottom: -250px;
        z-index: 0;
    }

    .gov-projects-section .container {
        position: relative;
        z-index: 2;
    }

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

.gov-projects-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 22px;
    border-radius: 50px;
    background: #eafaf3;
    color: #0d8b5b;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
}

    .gov-projects-badge i {
        width: 28px;
        height: 28px;
        border-radius: 50%;
        background: #18b26b;
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 13px;
    }

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

.gov-projects-title {
    font-size: 54px;
    font-weight: 800;
    color: #15213d;
    line-height: 1.12;
    margin: 28px 0 20px;
}

    .gov-projects-title span {
        color: #118d5a;
        display: block;
    }

.gov-projects-subtitle {
    font-size: 18px;
    color: #64748b;
    line-height: 1.8;
    max-width: 520px;
}

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

.gov-projects-logo-strip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #fff;
    border: 1px solid #edf2f7;
    border-radius: 22px;
    padding: 22px 10px;
    box-shadow: 0 15px 45px rgba(16,24,40,.06);
    overflow: hidden;
}


/*=====================================*/

.gov-projects-logo-item {
    flex: 1;
    position: relative;
    text-align: center;
    padding: 0 12px;
    transition: .35s;
}


    /* vertical separator */

    .gov-projects-logo-item:not(:last-child)::after {
        content: "";
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 1px;
        height: 95px;
        background: #edf0f5;
    }


/*=====================================*/

.logo-box {
    width: 82px;
    height: 82px;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 18px;
    background: #ffffff;
    transition: .35s;
}


    /*=====================================*/

    .logo-box img {
        max-width: 65px;
        max-height: 65px;
        object-fit: contain;
    }


/*=====================================*/

.gov-projects-logo-item h6 {
    margin-top: 14px;
    margin-bottom: 4px;
    font-size: 17px;
    font-weight: 700;
    color: #1f2937;
}


/*=====================================*/

.gov-projects-logo-item small {
    display: block;
    color: #6b7280;
    font-size: 13px;
    font-weight: 500;
}


/*=====================================*/

.gov-projects-logo-item:hover {
    transform: translateY(-6px);
}

    .gov-projects-logo-item:hover .logo-box {
        background: #f8fbff;
        box-shadow: 0 15px 30px rgba(0,0,0,.08);
    }


/*=====================================*/
/* Individual Logo Sizes */
/*=====================================*/

.gov-projects-logo-item:nth-child(1) img {
    max-width: 78px;
}

.gov-projects-logo-item:nth-child(2) img {
    max-width: 72px;
}

.gov-projects-logo-item:nth-child(3) img {
    max-width: 60px;
}

.gov-projects-logo-item:nth-child(4) img {
    max-width: 58px;
}


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

@media(max-width:991px) {

    .gov-projects-logo-strip {
        flex-wrap: wrap;
        gap: 25px;
        padding: 25px;
    }

    .gov-projects-logo-item {
        flex: 0 0 calc(50% - 15px);
    }

        .gov-projects-logo-item::after {
            display: none;
        }
}

@media(max-width:576px) {

    .gov-projects-logo-item {
        flex: 0 0 100%;
    }
}
/*==================================================
PROJECT CARD
==================================================*/

.gov-project-card {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: stretch;
    background: #fff;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 15px 45px rgba(15,23,42,.08);
    transition: .35s;
}

    .gov-project-card:hover {
        transform: translateY(-8px);
        box-shadow: 0 25px 60px rgba(15,23,42,.14);
    }

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

.gov-project-image {
    flex: 0 0 42%;
    background: #f8fafc;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    border-right: 1px solid rgba(0,0,0,.05);
}

    .gov-project-image img {
        width: 100%;
        height: 100%;
        max-height: 420px;
        object-fit: contain;
        transition: .4s;
    }

.gov-project-card:hover img {
    transform: scale(1.04);
}

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

.gov-project-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 22px;
}

/*==================================================
TAG
==================================================*/

.project-tag {
    display: inline-flex;
    align-items: center;
    width: max-content;
    padding: 8px 16px;
    border-radius: 40px;
    font-size: 12px;
    font-weight: 700;
    margin-bottom: 15px;
}

.blue-tag {
    background: #e8f0ff;
    color: #2563eb;
}

.orange-tag {
    background: #fff3e7;
    color: #f97316;
}

.purple-tag {
    background: #f4e8ff;
    color: #7c3aed;
}

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

.gov-project-content h3 {
    font-size: 24px;
    font-weight: 800;
    color: #1e293b;
    line-height: 1.2;
    margin-bottom: 10px;
}

/*==================================================
DESCRIPTION
==================================================*/

.gov-project-content p {
    font-size: 15px;
    color: #64748b;
    line-height: 1.5;
    margin-bottom: 18px;
}

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

.gov-project-content ul {
    list-style: none;
    padding: 0;
    margin: 0;
    flex: 1;
}

    .gov-project-content ul li {
        display: flex;
        align-items: flex-start;
        gap: 10px;
        margin-bottom: 11px;
        font-size: 14px;
        color: #334155;
        line-height: 1.5;
    }

        .gov-project-content ul li:last-child {
            margin-bottom: 0;
        }

        .gov-project-content ul li i {
            margin-top: 3px;
            flex-shrink: 0;
        }

.blue li i {
    color: #2563eb;
}

.orange li i {
    color: #f97316;
}

.purple li i {
    color: #7c3aed;
}

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

.project-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    margin-top: 22px;
    padding: 14px;
    border-radius: 14px;
    text-decoration: none;
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    transition: .35s;
}

    .project-btn:hover {
        color: #fff;
    }

        .project-btn:hover i {
            transform: translateX(5px);
        }

    .project-btn i {
        transition: .35s;
    }

.blue-btn {
    background: #2563eb;
}

.orange-btn {
    background: #f97316;
}

.purple-btn {
    background: #7c3aed;
}

/*==================================================
CARD COLORS
==================================================*/

.gov-project-card.blue {
    border: 1px solid rgba(37,99,235,.18);
}

.gov-project-card.orange {
    border: 1px solid rgba(249,115,22,.18);
}

.gov-project-card.purple {
    border: 1px solid rgba(124,58,237,.18);
}

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

@media(max-width:991px) {

    .gov-project-card {
        flex-direction: column;
    }

    .gov-project-image {
        flex: none;
        height: 260px;
        border-right: none;
        border-bottom: 1px solid rgba(0,0,0,.05);
    }
}

@media(max-width:767px) {

    .gov-project-content {
        padding: 20px;
    }

        .gov-project-content h3 {
            font-size: 22px;
        }

        .gov-project-content p {
            font-size: 14px;
        }

        .gov-project-content ul li {
            font-size: 13px;
        }
}



/*----------------ACHIEVEMENT SECTION------------------*/
.achievement-pro-section {
    position: relative;
    overflow: hidden;
    background: radial-gradient(circle at 50% 42%, rgba(106, 220, 255, 0.22), transparent 24%), radial-gradient(circle at 50% 52%, rgba(183, 148, 255, 0.14), transparent 22%), linear-gradient(180deg, #f8fbff 0%, #f4f8ff 100%);
    color: #233b70;
    padding: 90px 0 70px;
}

.achievement-top-wave {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    line-height: 0;
    z-index: 0;
}

    .achievement-top-wave svg {
        display: block;
        width: 100%;
        height: 150px;
    }

.achievement-spark {
    position: absolute;
    width: 540px;
    height: 540px;
    border-radius: 50%;
    filter: blur(30px);
    opacity: 0.45;
    pointer-events: none;
}

.achievement-spark-left {
    left: -120px;
    top: 120px;
    background: radial-gradient(circle, rgba(132, 212, 255, 0.28) 0%, transparent 70%);
}

.achievement-spark-right {
    right: -120px;
    top: 140px;
    background: radial-gradient(circle, rgba(195, 170, 255, 0.22) 0%, transparent 70%);
}

.achievement-top,
.achievement-center-layout,
.achievement-bottom-grid,
.achievement-footer-strip {
    position: relative;
    z-index: 2;
}

.achievement-top {
    margin-bottom: 42px;
}

.achievement-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: 10px 26px;
    border-radius: 40px;
    border: 1px solid #b8d8ff;
    background: rgba(255, 255, 255, 0.78);
    color: #5a8dc9;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.3px;
    box-shadow: 0 8px 22px rgba(126, 174, 255, 0.16);
    margin-bottom: 18px;
}

.achievement-main-title {
    font-size: clamp(2.2rem, 4.5vw, 3.9rem);
    line-height: 1.12;
    font-weight: 700;
    color: #24498c;
    margin-bottom: 10px;
}

    .achievement-main-title span {
        color: #66bff3;
    }

.achievement-main-subtitle {
    font-size: 25px;
    color: #7e87a5;
    margin-bottom: 0;
}

.achievement-center-layout {
    display: grid;
    grid-template-columns: 1fr 460px 1fr;
    align-items: center;
    gap: 26px;
}

.achievement-side {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.achievement-bottom-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    max-width: 1200px;
    margin: 18px auto 22px;
}

.achievement-info-card {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 16px;
    min-height: 158px;
    padding: 24px 20px;
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.52);
    border: 1px solid rgba(255, 255, 255, 0.95);
    box-shadow: 0 12px 30px rgba(122, 157, 214, 0.14);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition: transform .3s ease, box-shadow .3s ease;
}

    .achievement-info-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 16px 34px rgba(122, 157, 214, 0.20);
    }

.blue-card {
    background: linear-gradient(180deg, rgba(236, 246, 255, 0.86), rgba(255,255,255,0.74));
}

.cyan-card {
    background: linear-gradient(180deg, rgba(240, 250, 255, 0.88), rgba(255,255,255,0.75));
}

.purple-card {
    background: linear-gradient(180deg, rgba(246, 240, 255, 0.88), rgba(255,255,255,0.75));
}

.orange-card {
    background: linear-gradient(180deg, rgba(255, 244, 236, 0.88), rgba(255,255,255,0.75));
}

.blue-soft-card {
    background: linear-gradient(180deg, rgba(240, 247, 255, 0.88), rgba(255,255,255,0.76));
}

.purple-soft-card {
    background: linear-gradient(180deg, rgba(250, 240, 255, 0.88), rgba(255,255,255,0.76));
}

.green-soft-card {
    background: linear-gradient(180deg, rgba(240, 255, 249, 0.88), rgba(255,255,255,0.76));
}

.achievement-icon {
    width: 62px;
    height: 62px;
    min-width: 62px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.55rem;
    background: rgba(255,255,255,0.58);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.72);
}

.blue-card .achievement-icon,
.blue-card h3,
.blue-soft-card .achievement-icon,
.blue-soft-card h3 {
    color: #4d8fe4;
}

.cyan-card .achievement-icon,
.cyan-card h3 {
    color: #4cb8e7;
}

.purple-card .achievement-icon,
.purple-card h3,
.purple-soft-card .achievement-icon,
.purple-soft-card h3 {
    color: #9a73b5;
}

.orange-card .achievement-icon,
.orange-card h3 {
    color: #ef944d;
}

.green-soft-card .achievement-icon,
.green-soft-card h3 {
    color: #4cb7a6;
}

.achievement-card-text h3 {
    font-size: clamp(2rem, 3vw, 2.8rem);
    line-height: 1;
    font-weight: 700;
    margin-bottom: 8px;
}

.achievement-card-text h4 {
    font-size: 1.05rem;
    color: #2d497f;
    font-weight: 700;
    margin-bottom: 8px;
    line-height: 1.15;
}

.achievement-card-text p {
    margin: 0;
    color: #7d88a6;
    font-size: 0.9rem;
    line-height: 1.45;
}

.achievement-radial-zone {
    position: relative;
    width: 460px;
    height: 460px;
    margin: 0 auto;
}

.achievement-radial-glow {
    position: absolute;
    inset: 40px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(118, 221, 255, 0.35) 0%, rgba(118, 221, 255, 0.12) 38%, transparent 68%), radial-gradient(circle at 60% 40%, rgba(205, 180, 255, 0.25), transparent 42%);
    filter: blur(4px);
}

.achievement-radial-svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
    filter: drop-shadow(0 0 8px rgba(111, 188, 255, 0.22));
    position: relative;
    z-index: 2;
}

.ring-track {
    fill: none;
    stroke: rgba(215, 232, 252, 0.95);
}

.track-1 {
    stroke-width: 18;
}

.track-2 {
    stroke-width: 15;
}

.track-3 {
    stroke-width: 11;
}

.ring-progress {
    fill: none;
    stroke-linecap: round;
}

.ring-progress-1 {
    stroke: #62daf0;
    stroke-width: 18;
    stroke-dasharray: 600 830;
    filter: drop-shadow(0 0 8px rgba(98, 218, 240, 0.35));
}

.ring-progress-2 {
    stroke: #93c6f7;
    stroke-width: 15;
    stroke-dasharray: 460 680;
}

.ring-progress-3 {
    stroke: #703ca9;
    stroke-width: 11;
    stroke-dasharray: 260 528;
}

.achievement-core {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 182px;
    height: 182px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(circle at center, rgba(255,255,255,0.96), rgba(243,248,255,0.98));
    box-shadow: 0 0 0 10px rgba(255,255,255,0.55), 0 0 30px rgba(129, 185, 255, 0.18), inset 0 0 18px rgba(112, 175, 255, 0.08);
    border: 1px solid rgba(180, 214, 255, 0.75);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3;
}

.achievement-core-inner {
    text-align: center;
}

.achievement-logo-img {
    width: 118px;
    margin-bottom: 8px;
}

.achievement-core-inner span {
    display: block;
    color: #7b88a7;
    font-size: 0.95rem;
    margin-bottom: 6px;
}

.achievement-core-inner strong {
    color: #4d8fe4;
    font-size: 1.15rem;
    font-weight: 700;
}

.achievement-footer-strip {
    max-width: 760px;
    margin: 8px auto 0;
    min-height: 56px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    background: rgba(255,255,255,0.6);
    border: 1px solid rgba(215, 229, 255, 0.95);
    box-shadow: 0 10px 26px rgba(145, 173, 222, 0.14);
    color: #4069a8;
    font-size: 1rem;
    font-weight: 600;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

    .achievement-footer-strip i {
        color: #5b9cff;
        font-size: 1.15rem;
    }

/* REPLACE ONLY YOUR RESPONSIVE MEDIA QUERY SECTION WITH THIS */

@media (max-width: 1199.98px) {
    .achievement-center-layout {
        display: grid;
        grid-template-columns: 1fr 380px 1fr; /* keep same desktop structure */
        align-items: center;
        gap: 18px;
    }

    .achievement-side {
        display: flex;
        flex-direction: column; /* keep cards on left & right */
        gap: 18px;
    }

    .achievement-radial-zone {
        width: 380px;
        height: 380px;
        order: 0; /* remove top shifting */
    }

    .achievement-bottom-grid {
        grid-template-columns: repeat(2, 1fr);
        max-width: 900px;
    }
}

@media (max-width: 767.98px) {
    .achievement-pro-section {
        padding: 60px 0 40px;
    }

    .achievement-top-wave svg {
        height: 90px;
    }

    .achievement-center-layout {
        display: grid;
        grid-template-columns: 1fr 260px 1fr; /* still same structure */
        align-items: center;
        gap: 10px;
    }

    .achievement-side {
        display: flex;
        flex-direction: column; /* do NOT move below */
        gap: 12px;
    }

    .achievement-radial-zone {
        width: 260px;
        height: 260px;
        margin: 0 auto;
        order: 0; /* important */
    }

    .achievement-core {
        width: 110px;
        height: 110px;
    }

    .achievement-logo-img {
        width: 75px;
        margin-bottom: 4px;
    }

    .achievement-core-inner span {
        font-size: 0.65rem;
    }

    .achievement-core-inner strong {
        font-size: 0.85rem;
    }

    .achievement-info-card {
        min-height: 110px;
        padding: 14px 6px;
        border-radius: 14px;
        gap: 10px;
    }

    .achievement-icon {
        width: 42px;
        height: 42px;
        min-width: 42px;
        font-size: 1rem;
    }

    .achievement-card-text h3 {
        margin-bottom: 4px;
    }

    .achievement-card-text h4 {
        font-size: 20px;
        margin-bottom: 4px;
    }

    .achievement-card-text p {
        font-size: 20px;
        line-height: 1.35;
    }

    .achievement-bottom-grid {
/*        grid-template-columns: 1fr;*/
        max-width: 100%;
    }

    .achievement-footer-strip {
        font-size: 20px;
        text-align: center;
        padding: 12px;
        min-height: auto;
    }
}


.orange-soft-card {
    background: linear-gradient( 180deg, rgba(255, 245, 236, 0.88), rgba(255,255,255,0.76) );
}

    .orange-soft-card .achievement-icon,
    .orange-soft-card h3 {
        color: #ef944d;
    }
/* Hide center circle on smaller screens */

@media (max-width: 991.98px) {

    .achievement-radial-zone {
        display: none !important;
    }

    .achievement-center-layout {
        grid-template-columns: 1fr 1fr !important;
        gap: 20px;
        align-items: stretch;
    }

    .achievement-side {
        gap: 16px;
    }
}

@media (max-width: 767.98px) {

/*    .achievement-center-layout {
        grid-template-columns: 1fr !important;
    }
*/
    .achievement-side {
        width: 100%;
    }
}
/*----------------SUCCESS SECTION------------------*/
body {
    background-color: var(--bg-dark);
    color: white;
}

.core-pillars-section {
    position: relative;
    padding: 90px 0;
    background: radial-gradient(circle at top center, rgba(56, 189, 248, 0.10), transparent 22%), linear-gradient(180deg, #f4f8ff 0%, #28569045 100%);
    overflow: hidden;
}

.core-pillars-header {
    position: relative;
    z-index: 2;
    max-width: 860px;
    margin: 0 auto 48px;
}

.core-pillars-eyebrow {
    display: inline-block;
    margin-bottom: 14px;
    padding: 8px 16px;
    border-radius: 999px;
    color: #093b3f;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    background: rgb(0 238 255 / 15%);
    border: 1px solid rgb(23 106 112 / 89%);
}

.core-pillars-subtitle {
    margin: 0 auto;
    max-width: 760px;
    font-size: 16px;
    line-height: 1.8;
    color: #0000009c;
}

.core-pillars-grid {
    display: flex;
    flex-wrap: wrap;
    position: relative;
    z-index: 2;
    margin-left: -12px;
    margin-right: -12px;
}

.custom-five-col {
    width: 20%;
    padding: 12px;
}

.core-pillars-card {
    height: 100%;
    padding: 24px 18px;
    border-radius: 24px;
    background: rgba(255,255,255,0.92);
    border: 1px solid #dbe7f3;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.28);
    transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
    position: relative;
    overflow: hidden;
}

    .core-pillars-card:hover {
        transform: translateY(-8px);
        border-color: rgba(0, 238, 255, 0.32);
        box-shadow: 0 18px 46px rgba(0, 0, 0, 0.36);
    }

.core-pillars-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}

.core-pillars-icon-box {
    width: 54px;
    height: 54px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(180deg, rgba(0, 238, 255, 0.14), rgba(0, 238, 255, 0.06));
    border: 1px solid rgba(0, 238, 255, 0.16);
    color: #126c74;
    font-size: 24px;
}

.core-pillars-card-number {
    font-size: 12px;
    font-weight: 700;
    color: rgba(146, 169, 196, 0.78);
    letter-spacing: 2px;
}

.core-pillars-card-title {
    margin: 0 0 14px;
    color: #2C3947;
    font-size: 18px;
    font-weight: 700;
    min-height: 48px;
}

.core-pillars-card-text {
    margin: 0 0 18px;
    color: #2C3947;
    font-size: 14px;
    line-height: 1.7;
    min-height: 120px;
}

.core-pillars-list {
    list-style: none;
    padding: 0;
    margin: 0 0 22px;
}

    .core-pillars-list li {
        position: relative;
        padding-left: 18px;
        margin-bottom: 10px;
        color: #080616;
        font-size: 14px;
        line-height: 1.5;
    }

        .core-pillars-list li::before {
            content: "";
            position: absolute;
            left: 0;
            top: 8px;
            width: 7px;
            height: 7px;
            border-radius: 50%;
            background: #126c74;
        }

.core-pillars-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #126c74;
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
}

    .core-pillars-link:hover {
        color: #126c74;
        gap: 12px;
    }

@media (max-width: 1199px) {
    .custom-five-col {
        width: 33.3333%;
    }
}

@media (max-width: 991px) {
    .custom-five-col {
        width: 50%;
    }

    .core-pillars-section {
        padding: 70px 0;
    }
}

@media (max-width: 575px) {
    .custom-five-col {
        width: 100%;
    }

    .core-pillars-card-title {
        min-height: auto;
    }

    .core-pillars-card-text {
        min-height: auto;
    }
}

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

.about-process-section {
    padding: 100px 0;
    background: #fff;
    position: relative;
}

/* Heading */

.about-process-heading {
    margin-bottom: 70px;
}

.about-process-subtitle {
    display: inline-block;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 3px;
    color: #1bc9b5;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.about-process-heading h2 {
    font-size: 42px;
    font-weight: 800;
    color: #16233d;
}

/* Row */

.about-process-row {
    position: relative;
}

    /* Horizontal Line */

    .about-process-row::before {
        content: "";
        position: absolute;
        top: 40px;
        left: 8%;
        right: 8%;
        height: 2px;
        background: #d8edf2;
        z-index: 0;
    }

/* Item */

.about-process-item {
    text-align: center;
    position: relative;
    z-index: 2;
}

/* Circle */

.about-process-icon {
    width: 82px;
    height: 82px;
    margin: auto;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 30px;
    box-shadow: 0 15px 35px rgba(0,0,0,.12);
    transition: .35s;
}

.about-process-item:hover .about-process-icon {
    transform: translateY(-8px) scale(1.05);
}

/* Small Dot */

.about-process-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: block;
    margin: 16px auto;
}

/* Heading */

.about-process-item h5 {
    font-size: 22px;
    font-weight: 700;
    color: #1b2238;
    margin-bottom: 12px;
}

/* Description */

.about-process-item p {
    font-size: 15px;
    line-height: 1.8;
    color: #6c7486;
    margin: 0;
}

/* Colors */

.process-green {
    background: linear-gradient(135deg,#12d2be,#08a897);
}

.process-lime {
    background: linear-gradient(135deg,#8ae34d,#54c233);
}

.process-blue {
    background: linear-gradient(135deg,#2b90ff,#1762ff);
}

.process-purple {
    background: linear-gradient(135deg,#b17dff,#8d5bff);
}

.process-orange {
    background: linear-gradient(135deg,#ffb344,#ff8324);
}

.process-navy {
    background: linear-gradient(135deg,#334ccf,#162d9c);
}

.green {
    background: #18c8b5;
}

.lime {
    background: #75d73f;
}

.blue {
    background: #2577ff;
}

.purple {
    background: #9b6eff;
}

.orange {
    background: #ff8d24;
}

.navy {
    background: #2b45c7;
}

/* Responsive */

@media(max-width:991px) {

    .about-process-row::before {
        display: none;
    }

    .about-process-item {
        margin-bottom: 45px;
    }

    .about-process-heading h2 {
        font-size: 34px;
    }
}

@media(max-width:767px) {

    .about-process-section {
        padding: 70px 0;
    }

    .about-process-icon {
        width: 72px;
        height: 72px;
        font-size: 24px;
    }

    .about-process-item h5 {
        font-size: 18px;
    }

    .about-process-item p {
        font-size: 14px;
    }

    .about-process-heading h2 {
        font-size: 28px;
    }
}

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

.about-journey {
    position: relative;
    overflow: hidden;
    padding: 100px 0;
    background: radial-gradient(circle at top left,#eefdf8 0%,transparent 45%), radial-gradient(circle at bottom right,#eef6ff 0%,transparent 40%), #fff;
}

    /* Background Glow */

    .about-journey::before {
        content: "";
        position: absolute;
        width: 450px;
        height: 450px;
        border-radius: 50%;
        background: #dffaf5;
        filter: blur(80px);
        left: -180px;
        top: -180px;
        opacity: .6;
    }

    .about-journey::after {
        content: "";
        position: absolute;
        width: 450px;
        height: 450px;
        border-radius: 50%;
        background: #e7f2ff;
        filter: blur(80px);
        right: -180px;
        bottom: -180px;
        opacity: .6;
    }

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

.line-deco {
    width: 45px;
    height: 2px;
    background: #17b89f;
}

.small-heading {
    font-size: 14px;
    letter-spacing: 4px;
    color: #17b89f;
    font-weight: 700;
}

.text-teal {
    color: #17b89f;
}

.display-6 {
    font-size: 52px;
    color: #172b63;
    font-weight: 800;
}

.dots-deco {
    display: flex;
    justify-content: center;
    gap: 8px;
}

    .dots-deco span {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: #17b89f;
    }

        .dots-deco span:nth-child(3) {
            width: 9px;
            height: 9px;
        }

/*==================================================
Timeline
==================================================*/

.journey-timeline {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    gap: 20px;
    position: relative;
    margin-top: 70px;
}

/* dashed line */

.timeline-line {
    position: absolute;
    left: 5%;
    right: 5%;
    top: 45px;
    border-top: 2px dashed #d8dee7;
    z-index: 0;
}

/*==================================================
Journey Item
==================================================*/

.journey-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 2;
}

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

.icon-circle {
    width: 82px;
    height: 82px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    font-size: 30px;
    color: #fff;
    flex-shrink: 0;
    z-index: 3;
    box-shadow: 0 15px 35px rgba(0,0,0,.12);
}

    .icon-circle i {
        color: #172b63 !important ;
        z-index: 5;
    }

    .icon-circle::before {
        content: "";
        position: absolute;
        width: 98px;
        height: 98px;
        border-radius: 50%;
        background: #fff;
        z-index: -1;
        box-shadow: 0 10px 30px rgba(0,0,0,.08);
    }

/*==================================================
Connector
==================================================*/

.connector {
    width: 2px;
    height: 18px;
    background: #d9dee8;
}

/*==================================================
Ribbon
==================================================*/

.ribbon {
    z-index: 3;
    width: 118px;
    height: 36px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    font-size: 18px;
    font-weight: 700;
    margin-top: 0;
    clip-path: polygon( 0 50%, 8px 0, calc(100% - 8px) 0, 100% 50%, calc(100% - 8px) 100%, 8px 100% );
}

    .ribbon span {
        color: #fff;
    }

.ribbon-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin: 12px auto 16px;
}

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

.journey-card {
    background: #fff;
    border-radius: 18px;
    width: 100%;
    min-height: 250px;
    height: 100%;
    padding: 28px 22px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    text-align: center;
    box-shadow: 0 15px 40px rgba(17,34,68,.08);
    transition: .35s;
}

    .journey-card:hover {
        transform: translateY(-8px);
        box-shadow: 0 25px 55px rgba(17,34,68,.15);
    }

    .journey-card h5 {
        color: #172b63;
        font-size: 22px;
        font-weight: 700;
        margin-bottom: 18px;
        line-height: 1.3;
    }

    .journey-card p {
        color: #667085;
        line-height: 1.8;
        font-size: 15px;
        margin-bottom: 25px;
        flex-grow: 1;
    }

.bottom-line {
    width: 36px;
    height: 4px;
    border-radius: 4px;
    margin-top: auto;
}

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

.journey-footer {
    margin: 70px auto 0;
    max-width: 760px;
    background: #fff;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    padding: 18px 30px;
    box-shadow: 0 10px 35px rgba(0,0,0,.08);
}

    .journey-footer span {
        color: #6b7280;
        font-size: 15px;
    }

.trophy-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #8dd241;
    color: #fff;
    flex-shrink: 0;
}

    .trophy-icon i {
        color: #fff;
    }

/*==================================================
Colors
==================================================*/

.bg-teal {
    background: #18b9a5;
}

.bg-lightgreen {
    background: #8dd241;
}

.bg-blue {
    background: #2e80ff;
}

.bg-purple {
    background: #7b4dff;
}

.bg-orange {
    background: #ff8126;
}

.bg-navy {
    background: #132c80;
}

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

@media(max-width:1200px) {

    .journey-card {
        min-height: 280px;
    }
}

@media(max-width:992px) {

    .journey-timeline {
        display: grid;
        grid-template-columns: repeat(2,1fr);
        gap: 40px;
    }

    .timeline-line {
        display: none;
    }
}

@media(max-width:768px) {

    .journey-timeline {
        grid-template-columns: 1fr;
    }

    .display-6 {
        font-size: 36px;
    }

    .journey-card {
        min-height: auto;
    }

    .journey-footer {
        flex-direction: column;
        text-align: center;
    }
}

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

.about-faq {
    padding: 100px 0;
    background: #f8fbff;
    position: relative;
    overflow: visible;
}

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

    .about-faq .section-title {
        max-width: 760px;
        margin: 0 auto 60px;
        text-align: center;
    }

    .about-faq .sub-title {
        display: inline-block;
        padding: 8px 18px;
        background: #fff3eb;
        color: #ff6b00;
        border-radius: 40px;
        font-size: 13px;
        font-weight: 700;
        letter-spacing: 2px;
        text-transform: uppercase;
        margin-bottom: 18px;
    }

    .about-faq .section-title h2 {
        font-size: 38px;
        font-weight: 700;
        color: #172b4d;
        line-height: 1.3;
        margin-bottom: 18px;
    }

    .about-faq .section-title p {

        letter-spacing: 2px;
        color: #667085;
        font-size: 17px;
        line-height: 1.9;
        margin: 0 auto;
        max-width: 700px;
    }

    /*==================================================
LAYOUT
==================================================*/

    .about-faq .row {
        align-items: flex-start;
    }

    .about-faq .col-lg-5 {
        position: sticky;
        top: 100px;
        align-self: flex-start;
    }

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

    .about-faq .accordion-item {
        border: none;
        border-radius: 18px;
        overflow: hidden;
        margin-bottom: 18px;
        background: #fff;
        box-shadow: 0 10px 35px rgba(0,0,0,.06);
        transition: .3s;
    }

        .about-faq .accordion-item:hover {
            transform: translateY(-3px);
            box-shadow: 0 18px 45px rgba(0,0,0,.08);
        }

    .about-faq .accordion-button {
        background: #fff;
        color: #16233b;
        font-size: 17px;
        font-weight: 600;
        padding: 22px 25px;
        line-height: 1.6;
        box-shadow: none;
    }

        .about-faq .accordion-button:focus {
            box-shadow: none;
        }

        .about-faq .accordion-button:not(.collapsed) {
            background: #ff6b00;
            color: #fff;
        }

        .about-faq .accordion-button::after {
            transition: .3s;
        }

    .about-faq .accordion-body {
        padding: 24px 25px;
        color: #667085;
        line-height: 1.9;
        font-size: 16px;
    }

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

.about-testimonials {
    position: relative;
    width: 100%;
    background: #102033;
    color: #fff;
    border-radius: 22px;
    padding: 40px;
    overflow: hidden;
    box-shadow: 0 25px 60px rgba(0,0,0,.18);
}

    .about-testimonials::before {
        content: "";
        position: absolute;
        width: 240px;
        height: 240px;
        border-radius: 50%;
        background: rgba(255,255,255,.05);
        right: -80px;
        top: -80px;
    }

    .about-testimonials::after {
        content: "";
        position: absolute;
        width: 120px;
        height: 120px;
        border-radius: 50%;
        background: rgba(255,255,255,.03);
        left: -45px;
        bottom: -45px;
    }

    /*==================================================
QUOTE
==================================================*/

    .about-testimonials .quote-icon {
        width: 68px;
        height: 68px;
        border-radius: 50%;
        background: #ff6b00;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 25px;
        margin-bottom: 22px;
        position: relative;
        z-index: 2;
    }

    .about-testimonials .rating {
        display: block;
        color: #ffc107;
        font-size: 18px;
        letter-spacing: 3px;
        margin-bottom: 22px;
        position: relative;
        z-index: 2;
    }

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

    .about-testimonials .testimonial-text {
        color: #edf2f7;
        font-size: 16px;
        line-height: 2;
        margin-bottom: 35px;
        position: relative;
        z-index: 2;
    }

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

    .about-testimonials .client-info {
        display: flex;
        align-items: center;
        gap: 15px;
        margin-bottom: 28px;
        position: relative;
        z-index: 2;
    }

    .about-testimonials img {
        width: 65px;
        height: 65px;
        object-fit: cover;
        border-radius: 50%;
        border: 3px solid rgba(255,255,255,.18);
    }

    .about-testimonials h5 {
        font-size: 18px;
        font-weight: 700;
        margin-bottom: 5px;
        color: #fff;
    }

    .about-testimonials span {
        color: #d7dfeb;
        font-size: 14px;
    }

    .about-testimonials hr {
        border-color: rgba(255,255,255,.12);
        margin: 28px 0;
        position: relative;
        z-index: 2;
    }

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

    .about-testimonials .stats {
        display: flex;
        justify-content: space-between;
        gap: 10px;
        text-align: center;
        position: relative;
        z-index: 2;
    }

        .about-testimonials .stats div {
            flex: 1;
        }

        .about-testimonials .stats h3 {
            font-size: 30px;
            color: #ff7b22;
            font-weight: 700;
            margin-bottom: 6px;
        }

        .about-testimonials .stats span {
            color: #d7dfeb;
            font-size: 13px;
        }

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

@media (max-width:991px) {

    .about-faq {
        padding: 80px 0;
    }

        .about-faq .section-title {
            margin-bottom: 45px;
        }

            .about-faq .section-title h2 {
                font-size: 30px;
            }

            .about-faq .section-title p {
                font-size: 16px;
            }

        .about-faq .col-lg-5 {
            position: relative;
            top: 0;
            margin-top: 35px;
        }

    .about-testimonials {
        padding: 35px;
    }
}

@media (max-width:767px) {

    .about-faq {
        padding: 70px 0;
    }

        .about-faq .section-title h2 {
            font-size: 26px;
        }

        .about-faq .section-title p {
            font-size: 15px;
        }

        .about-faq .accordion-button {
            padding: 18px;
            font-size: 16px;
        }

        .about-faq .accordion-body {
            padding: 18px;
            font-size: 15px;
        }

    .about-testimonials {
        padding: 28px 22px;
    }

        .about-testimonials .stats {
/*            flex-direction: column;*/
            gap: 22px;
        }

        .about-testimonials .quote-icon {
            width: 58px;
            height: 58px;
            font-size: 22px;
        }

        .about-testimonials img {
            width: 58px;
            height: 58px;
        }
}

/*----------------WHY US SECTION------------------*/
/*==================================================
WHY DEVLOK
==================================================*/

/*=========================
WHY DEVLOK
=========================*/

.why-devlok-modern {
    background: #fff;
    overflow: hidden;
    position: relative;
}

.why-small-title {
    display: inline-block;
    color: #ff6b00;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 2px;
    margin-bottom: 15px;
    text-transform: uppercase;
}

.why-main-title {
    font-size: 48px;
    font-weight: 800;
    line-height: 1.18;
    color: #111827;
    margin-bottom: 22px;
}

    .why-main-title span {
        display: block;
        color: #ff6b00;
    }

.why-desc {
    font-size: 17px;
    color: #6b7280;
    line-height: 1.8;
    margin-bottom: 30px;
}

.why-orange-line {
    width: 70px;
    height: 4px;
    background: #ff6b00;
    border-radius: 50px;
    margin-bottom: 35px;
}

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

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

.why-feature-card {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    padding: 18px;
    border-radius: 18px;
    background: #fff;
    border: 1px solid #edf2f7;
    transition: .35s;
}

    .why-feature-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 18px 45px rgba(0,0,0,.08);
    }

.why-feature-icon {
    width: 60px;
    height: 60px;
    border-radius: 16px;
    background: #fff4ed;
    color: #ff6b00;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    flex-shrink: 0;
}

.why-feature-card h5 {
    font-size: 20px;
    font-weight: 700;
    color: #111827;
    margin-bottom: 8px;
}

.why-feature-card p {
    margin: 0;
    color: #6b7280;
    line-height: 1.7;
}

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

.why-bottom-row {
    display: flex;
    align-items: center;
    gap: 30px;
    margin-top: 40px;
    flex-wrap: wrap;
}

.why-main-btn {
    background: #ff6b00;
    color: #fff;
    border: none;
    border-radius: 50px;
    padding: 15px 34px;
    font-size: 16px;
    font-weight: 600;
    transition: .35s;
}

    .why-main-btn:hover {
        background: #111827;
        transform: translateY(-3px);
    }

.why-client-box {
    display: flex;
    align-items: center;
    gap: 15px;
}

.why-client-avatars {
    display: flex;
}

    .why-client-avatars span {
        width: 42px;
        height: 42px;
        border-radius: 50%;
        background: #ff6b00;
        border: 3px solid #fff;
        margin-left: -10px;
    }

        .why-client-avatars span:first-child {
            margin-left: 0;
        }

.why-client-box h6 {
    margin: 0;
    font-weight: 700;
}

.why-client-box p {
    margin: 0;
    color: #6b7280;
    font-size: 14px;
}

/*=========================
RIGHT IMAGES
=========================*/

.why-image-area {
    position: relative;
    min-height: 650px;
}

.why-main-img {
    width: 82%;
    border-radius: 28px;
    object-fit: cover;
    box-shadow: 0 30px 70px rgba(0,0,0,.15);
}

.why-code-img {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 60%;
    border-radius: 24px;
    border: 10px solid #fff;
    box-shadow: 0 25px 60px rgba(0,0,0,.18);
}

.why-blue-card {
    position: absolute;
    left: -20px;
    top: 55%;
    transform: translateY(-50%);
    background: #0f3d8c;
    color: #fff;
    padding: 28px;
    border-radius: 22px;
    width: 250px;
    z-index: 5;
    box-shadow: 0 25px 60px rgba(15,61,140,.35);
}

    .why-blue-card h4 {
        margin: 15px 0 0;
        line-height: 1.45;
        font-size: 22px;
        font-weight: 700;
    }

.why-rocket {
    width: 62px;
    height: 62px;
    border-radius: 18px;
    background: #ffffff22;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
}

.why-dot {
    position: absolute;
    width: 120px;
    height: 120px;
    background-image: radial-gradient(#ff6b00 2px, transparent 2px);
    background-size: 16px 16px;
    opacity: .35;
}

.dot-top {
    right: -35px;
    top: -20px;
}

.dot-bottom {
    left: 20px;
    bottom: -30px;
}

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

@media(max-width:1200px) {

    .why-main-title {
        font-size: 40px;
    }

    .why-image-area {
        min-height: 560px;
    }

    .why-blue-card {
        width: 220px;
    }
}

@media(max-width:992px) {

    .why-main-title {
        font-size: 34px;
    }

    .why-image-area {
        margin-top: 60px;
        min-height: 520px;
    }

    .why-main-img {
        width: 100%;
    }

    .why-code-img {
        width: 70%;
    }

    .why-blue-card {
        left: 20px;
        top: 45%;
    }
}

@media(max-width:768px) {

    .why-main-title {
        font-size: 30px;
    }

    .why-desc {
        font-size: 16px;
    }

    .why-image-area {
        min-height: auto;
    }

    .why-main-img {
        width: 100%;
    }

    .why-code-img {
        position: relative;
        width: 85%;
        margin-top: -60px;
        margin-left: auto;
        display: block;
    }

    .why-blue-card {
        position: relative;
        left: auto;
        top: auto;
        transform: none;
        margin: 25px 0;
        width: 100%;
    }

    .why-bottom-row {
        flex-direction: column;
        align-items: flex-start;
    }
}

/*----------------visit-portfolio SECTION------------------*/
.portfolio-hero-section {
    padding: 70px 0;
    background: #f7f8fa;
}

.portfolio-hero-card {
    position: relative;
    overflow: hidden;
    min-height: 560px;
    padding: 70px 70px 0;
    background: #ffffff;
    border-radius: 28px;
    box-shadow: 0 18px 45px rgba(17, 24, 39, 0.12);
}

.portfolio-hero-content {
    position: relative;
    z-index: 3;
    max-width: 640px;
    padding-bottom: 70px;
}

.portfolio-small-title {
    display: inline-block;
    margin-bottom: 24px;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: 1px;
    color: #ff6b1a;
    text-transform: uppercase;
}

.portfolio-hero-content h2 {
    margin-bottom: 24px;
    font-size: clamp(2.4rem, 4.8vw, 4.8rem);
    font-weight: 900;
    line-height: 1.08;
    color: #050505;
}

    .portfolio-hero-content h2 span {
        display: block;
        color: #173666;
    }

.portfolio-line {
    width: 110px;
    height: 4px;
    margin-bottom: 34px;
    background: #ff6b1a;
    border-radius: 10px;
}

.portfolio-hero-content p {
    max-width: 610px;
    margin-bottom: 44px;
    font-size: 1.16rem;
    line-height: 1.9;
    color: #293241;
}

.portfolio-visit-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 58px;
    padding: 0 32px;
    font-size: 1.05rem;
    font-weight: 800;
    color: #ffffff;
    text-decoration: none;
    background: linear-gradient(135deg, #0d6efd, #1498d5);
    border-radius: 14px;
    box-shadow: 0 14px 30px rgba(255, 107, 26, 0.32);
    transition: 0.3s ease;
}

    .portfolio-visit-btn:hover {
        color: #ffffff;
        transform: translateY(-4px);
        box-shadow: 0 18px 38px rgba(255, 107, 26, 0.42);
    }

.portfolio-hero-visual {
    position: relative;
    min-height: 520px;
}

.portfolio-orange-shape {
    position: absolute;
    right: -140px;
    bottom: -250px;
    width: 590px;
    height: 640px;
    background: linear-gradient(135deg, #11345e, #3c9ff5);
    border-radius: 50%;
    z-index: 1;
}

.portfolio-person-img {
    position: absolute;
    right: -20px;
    bottom: 0;
    z-index: 2;
    max-width: 650px;
    width: 100%;
    height: auto;
    object-fit: contain;
}

/* Tablet */
@media (max-width: 991.98px) {
    .portfolio-hero-card {
        padding: 50px 35px 0;
        min-height: auto;
    }

    .portfolio-hero-content {
        max-width: 100%;
        padding-bottom: 30px;
        text-align: center;
    }

    .portfolio-line {
        margin-left: auto;
        margin-right: auto;
    }

    .portfolio-hero-visual {
        min-height: 430px;
    }

    .portfolio-orange-shape {
        left: 50%;
        right: auto;
        bottom: -300px;
        width: 650px;
        height: 650px;
        transform: translateX(-50%);
    }

    .portfolio-person-img {
        left: 50%;
        right: auto;
        max-width: 460px;
        transform: translateX(-50%);
    }
}

/* Mobile */
@media (max-width: 767.98px) {
    .portfolio-hero-section {
        padding: 40px 0;
    }

    .portfolio-hero-card {
        padding: 36px 22px 0;
        border-radius: 20px;
    }

    .portfolio-small-title {
        margin-bottom: 14px;
        font-size: 12px;
    }

    .portfolio-hero-content h2 {
        font-size: 2rem;
    }

    .portfolio-hero-content p {
        margin-bottom: 28px;
        font-size: 20px;
        line-height: 1.75;
    }

    .portfolio-visit-btn {
        width: 100%;
        min-height: 52px;
        font-size: 20px;
    }

    .portfolio-hero-visual {
        min-height: 330px;
    }

    .portfolio-orange-shape {
        bottom: -230px;
        width: 460px;
        height: 460px;
    }

    .portfolio-person-img {
        max-width: 330px;
    }
}
/*-------------FAQ-Home------------------*/
/*=========================================
HOME FAQ
=========================================*/

.home-faq-section {
    padding: 40px 0;
    background: #f7faff;
}

.home-faq-wrapper {
    background: #fff;
    border-radius: 28px;
    padding: 60px;
    box-shadow: 0 20px 60px rgba(16,36,63,.08);
}

.home-faq-heading {
    text-align: center;
    margin-bottom: 55px;
}

    .home-faq-heading span {
        display: inline-block;
        padding: 8px 22px;
        border-radius: 50px;
        background: #e8f3ff;
        color: #0b63ce;
        font-weight: 600;
        letter-spacing: 1px;
        font-size: 13px;
        margin-bottom: 18px;
    }

    .home-faq-heading h2 {
        font-size: 42px;
        font-weight: 700;
        color: #10243f;
        margin-bottom: 15px;
    }

    .home-faq-heading p {
        max-width: 760px;
        margin: auto;
        color: #6b7280;
        line-height: 1.9;
    }

.home-faq-item {
    border: none;
    border-radius: 18px !important;
    margin-bottom: 18px;
    overflow: hidden;
    box-shadow: 0 8px 25px rgba(0,0,0,.05);
}

.home-faq-btn {
    font-size: 18px;
    font-weight: 600;
    padding: 24px;
    background: #fff;
}

    .home-faq-btn:not(.collapsed) {
        background: #0b63ce;
        color: #fff;
    }

.home-faq-body {
    padding: 25px;
    color: #64748b;
    line-height: 1.9;
    font-size: 16px;
}

/* Trust */

.home-trust-card {
    position: sticky;
    top: 110px;
    border-radius: 24px;
    overflow: hidden;
    background: linear-gradient(160deg,#0b63ce,#10243f);
    color: #fff;
    padding: 40px;
    box-shadow: 0 25px 70px rgba(11,99,206,.25);
}

.home-trust-tag {
    display: inline-block;
    background: rgba(255,255,255,.15);
    color: #fff;
    padding: 8px 20px;
    border-radius: 40px;
    font-size: 13px;
    margin-bottom: 20px;
}

.home-trust-title {
    font-size: 30px;
    margin-bottom: 18px;
    font-weight: 700;
}

.home-trust-text {
    color: #d9e8ff;
    margin-bottom: 35px;
    line-height: 1.9;
}

.home-trust-item {
    display: flex;
    gap: 18px;
    margin-bottom: 22px;
}

    .home-trust-item i {
        width: 55px;
        height: 55px;
        border-radius: 16px;
        background: rgba(255,255,255,.15);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 22px;
    }

    .home-trust-item strong {
        display: block;
        color: #fff;
    }

    .home-trust-item span {
        color: #d6e5ff;
    }

.home-trust-btn {
    margin-top: 30px;
    display: block;
    text-align: center;
    padding: 16px;
    border-radius: 14px;
    background: #fff;
    color: #0b63ce;
    font-weight: 700;
    text-decoration: none;
    transition: .35s;
}

    .home-trust-btn:hover {
        background: #0dcaf0;
        color: #10243f;
    }

.home-trust-stats {
    margin-top: 35px;
    padding-top: 25px;
    border-top: 1px solid rgba(255,255,255,.15);
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 20px;
}

.home-trust-stat h4 {
    font-size: 28px;
    margin-bottom: 4px;
    font-weight: 700;
}

.home-trust-stat span {
    color: #dce8ff;
    font-size: 14px;
}

@media(max-width:991px) {

    .home-faq-wrapper {
        padding: 30px;
    }

    .home-trust-card {
        position: relative;
        top: auto;
        margin-top: 40px;
    }

    .home-faq-heading h2 {
        font-size: 32px;
    }
}

/*==================================================
PROJECT OVERVIEW
==================================================*/

.project-overview-section {
    position: relative;
    padding: 100px 0 40px;
    overflow: hidden;
    background: linear-gradient(180deg,#fbfdff 0%,#f8fbfd 100%);
}

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

.project-overview-bg-circle {
    position: absolute;
    width: 320px;
    height: 320px;
    border-radius: 50%;
    filter: blur(25px);
    opacity: .18;
    z-index: 0;
}

    .project-overview-bg-circle.left {
        background: #62d6c8;
        left: -170px;
        top: -80px;
    }

    .project-overview-bg-circle.right {
        background: #d6f3d7;
        right: -160px;
        top: -70px;
    }

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

.project-overview-section .container {
    position: relative;
    z-index: 2;
}

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

.project-overview-heading {
    max-width: 760px;
    margin: auto;
    margin-bottom: 70px;
}

.project-overview-subtitle {
    display: inline-block;
    position: relative;
    font-size: 12px;
    font-weight: 700;
    color: #18b67b;
    letter-spacing: 3px;
    text-transform: uppercase;
    margin-bottom: 18px;
}

    .project-overview-subtitle::before,
    .project-overview-subtitle::after {
        content: "";
        position: absolute;
        top: 50%;
        width: 45px;
        height: 2px;
        background: #43cb97;
    }

    .project-overview-subtitle::before {
        right: 110%;
    }

    .project-overview-subtitle::after {
        left: 110%;
    }

.project-overview-heading h2 {
    font-size: 46px;
    font-weight: 800;
    color: #16233d;
    line-height: 1.15;
    margin-bottom: 15px;
}

    .project-overview-heading h2 span {
        display: block;
        color: #22b66f;
    }

.project-overview-heading p {
    font-size: 17px;
    line-height: 1.9;
    color: #6c7b8f;
    max-width: 680px;
    margin: auto;
}

/*======================================
Equal Height Columns
======================================*/

.project-overview-section .row {
    align-items: stretch;
}

.project-overview-section .col-lg-4,
.project-overview-section .col-md-6 {
    display: flex;
}

/*======================================
Cards
======================================*/

.project-overview-card {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 22px;
    padding: 80px 35px 35px;
    box-shadow: 0 20px 45px rgba(17,37,74,.08);
    transition: .35s ease;
    overflow: visible;
}

    .project-overview-card:hover {
        transform: translateY(-10px);
        box-shadow: 0 35px 65px rgba(17,37,74,.14);
    }

    /* Bottom Borders */

    .project-overview-card.technology {
        border-bottom: 4px solid #17b9b3;
    }

    .project-overview-card.countries {
        border-bottom: 4px solid #7bcf3d;
    }

    .project-overview-card.duration {
        border-bottom: 4px solid #ff8d27;
    }

/*======================================
Floating Icon
======================================*/

.project-overview-icon {
    position: absolute;
    left: 50%;
    top: -37px;
    transform: translateX(-50%);
    width: 74px;
    height: 74px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 28px;
    box-shadow: 0 18px 35px rgba(0,0,0,.18);
}

.bg-teal {
    background: linear-gradient(135deg,#19d2cb,#0a9d96);
}

.bg-green {
    background: linear-gradient(135deg,#a6df46,#6ebc34);
}

.bg-orange {
    background: linear-gradient(135deg,#ffb24f,#ff8420);
}

/*======================================
Ribbon
======================================*/

.project-overview-ribbon {
    position: relative;
    width: 220px;
    height: 42px;
    margin: 0 auto 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 15px;
    font-weight: 700;
}

    .project-overview-ribbon::before,
    .project-overview-ribbon::after {
        content: "";
        position: absolute;
        top: 0;
        border-top: 21px solid transparent;
        border-bottom: 21px solid transparent;
    }

    .project-overview-ribbon::before {
        left: -15px;
    }

    .project-overview-ribbon::after {
        right: -15px;
    }

/*    .project-overview-ribbon.teal {
        background: #17a9a3;
    }*/

        .project-overview-ribbon.teal::before {
            border-right: 15px solid #17a9a3;
        }

        .project-overview-ribbon.teal::after {
            border-left: 15px solid #17a9a3;
        }

/*    .project-overview-ribbon.green {
        background: #7fca3e;
    }*/

        .project-overview-ribbon.green::before {
            border-right: 15px solid #7fca3e;
        }

        .project-overview-ribbon.green::after {
            border-left: 15px solid #7fca3e;
        }

/*    .project-overview-ribbon.orange {
        background: #ff942d;
    }*/

        .project-overview-ribbon.orange::before {
            border-right: 15px solid #ff942d;
        }

        .project-overview-ribbon.orange::after {
            border-left: 15px solid #ff942d;
        }

/*======================================
Lists
======================================*/

.project-overview-card ul {
    list-style: none;
    padding: 0;
    margin: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.project-overview-card li {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 44px;
    padding: 9px 0;
    border-bottom: 1px dashed rgba(0,0,0,.08);
    color: #445164;
    font-size: 15px;
}

    .project-overview-card li:last-child {
        border-bottom: none;
    }

    .project-overview-card li::before {
        content: "•";
        color: #18b6a8;
        font-size: 22px;
        line-height: 1;
    }

/* Countries */

.countries li::before {
    display: none;
}

/*======================================
Duration Card
======================================*/

.duration-list li {
    justify-content: space-between;
    gap: 20px;
}

.duration-list span {
    flex: 1;
}

.duration-list strong {
    white-space: nowrap;
    color: #ff8120;
    font-size: 14px;
    font-weight: 700;
}

.duration-list li::before {
    color: #ff8a22;
}

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

@media (max-width:991px) {

    .project-overview-heading h2 {
        font-size: 36px;
    }

    .project-overview-card {
        height: auto;
        margin-bottom: 35px;
    }
}

@media (max-width:767px) {

    .project-overview-section {
        padding: 70px 0;
    }

    .project-overview-heading {
        margin-bottom: 50px;
    }

        .project-overview-heading h2 {
            font-size: 30px;
        }

        .project-overview-heading p {
            font-size: 15px;
        }

    .project-overview-ribbon {
        width: 200px;
    }

    .project-overview-card {
        padding: 75px 25px 30px;
    }
}
/*----------------OUR CLIENTS SECTION------------------*/
.clients-tech-section {
    position: relative;
    overflow: hidden;
    padding: 90px 0;
    background: linear-gradient(180deg, #eef3ff 0%, #f7f9ff 100%);
}

    .clients-tech-section::before {
        content: "";
        position: absolute;
        top: -80px;
        right: -60px;
        width: 320px;
        height: 320px;
        background: radial-gradient(circle, rgba(40, 86, 144, 0.10) 0%, transparent 70%);
        pointer-events: none;
    }

    .clients-tech-section::after {
        content: "";
        position: absolute;
        bottom: -100px;
        right: -40px;
        width: 360px;
        height: 360px;
        background: linear-gradient(135deg, rgba(40, 86, 144, 0.08) 1px, transparent 1px), linear-gradient(45deg, rgba(40, 86, 144, 0.08) 1px, transparent 1px);
        background-size: 32px 32px;
        transform: rotate(0deg);
        opacity: 0.45;
        pointer-events: none;
    }

.clients-tech-wrapper {
    position: relative;
    z-index: 2;
}

.clients-tech-head {
    max-width: 760px;
    margin-bottom: 42px;
    padding-left: 6px;
}

.clients-tech-badge {
    display: inline-block;
    padding: 8px 16px;
    border-radius: 999px;
    background: rgba(72, 117, 255, 0.10);
    color: #4f74ff;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 18px;
}

.clients-tech-title {
    margin: 0 0 16px;
    font-size: clamp(2rem, 4vw, 3.2rem);
    font-weight: 800;
    line-height: 1.15;
    color: #0b132b;
}

    .clients-tech-title span {
        color: #f58220;
    }

.clients-tech-subtitle {
    margin: 0;
    max-width: 700px;
    color: #5f6b85;
    font-size: 1.02rem;
    line-height: 1.8;
}

.clients-tech-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}

.client-tech-card {
    height: 96px;
    background: #ffffff;
    border: 1px solid #e8ebf5;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px 18px;
    box-shadow: 0 8px 24px rgba(22, 34, 66, 0.06);
    transition: all 0.3s ease;
}

    .client-tech-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 16px 32px rgba(22, 34, 66, 0.12);
        border-color: rgba(40, 86, 144, 0.22);
    }

.client-tech-logo {
    max-width: 78%;
    max-height: 48px;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
    transition: transform 0.3s ease;
}

.client-tech-card:hover .client-tech-logo {
    transform: scale(1.04);
}

@media (max-width: 1199.98px) {
    .clients-tech-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 16px;
    }

    .client-tech-card {
        height: 90px;
        padding: 14px;
    }

    .client-tech-logo {
        max-height: 44px;
    }
}

@media (max-width: 991.98px) {
    .clients-tech-section {
        padding: 75px 0;
    }

    .clients-tech-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .clients-tech-head {
        margin-bottom: 32px;
    }
}

@media (max-width: 767.98px) {
    .clients-tech-section {
        padding: 65px 0;
    }

    .clients-tech-title {
        font-size: 2rem;
    }

    .clients-tech-subtitle {
        font-size: 20px;
        line-height: 1.7;
    }

    .clients-tech-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 14px;
    }

    .client-tech-card {
        height: 84px;
        border-radius: 12px;
        padding: 12px;
    }

    .client-tech-logo {
        max-width: 80%;
        max-height: 40px;
    }
}

@media (max-width: 575.98px) {
    .clients-tech-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .clients-tech-title {
        font-size: 1.8rem;
    }

    .client-tech-card {
        height: 78px;
        padding: 10px;
    }

    .client-tech-logo {
        max-width: 82%;
        max-height: 36px;
    }
}
/*----------------EXPERIENCE SECTION------------------*/

.devlok-feature-section {
    background: #d0e8ff;
    padding: 100px 0;
    color: #ffffff;
    overflow: hidden;
}

.dev-badge {
    color: var(--dev-cyan);
    font-size: 0.9rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2px;
    display: block;
    margin-bottom: 15px;
}

.dev-title {
    color: #10243f;
    font-size: 3.5rem;
    font-weight: 800;
}

    .dev-title span {
        background: linear-gradient(to right, #00d2ff, #334052);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }

.dev-text {
    color: #10243f;
    font-size: 1.1rem;
    margin: 25px 0;
    line-height: 1.8;
}

.dev-grid-container {
    position: relative;
    padding: 20px;
}

.dev-hub-logo {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
    background: #ffffff;
    padding: 15px;
    border-radius: 50%;
    box-shadow: 0 0 40px rgba(0, 210, 255, 0.4);
}

    .dev-hub-logo img {
        height: 50px;
        width: auto;
    }

.dev-card {
    padding: 40px 25px;
    border-radius: 20px;
    transition: all 0.4s ease;
    height: 100%;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.dev-card-cyan {
    background: linear-gradient(135deg, #00d2ff 0%, #3a7bd5 100%);
}

.dev-card-dark {
    background: rgb(255 255 255 / 59%);
    backdrop-filter: blur(10px);
    color: #10243f
}

.dev-card h3 {
    font-size: 1.25rem;
    margin: 15px 0;
    font-weight: 700;
}

.dev-card p {
    font-size: 0.9rem;
    opacity: 0.8;
    margin: 0;
}

.dev-card dev-card-dark p {
    color: #10243f;
    font-size: 0.9rem;
    opacity: 0.8;
    margin: 0;
}

.dev-card-icon {
    font-size: 2rem;
    margin-bottom: 10px;
}

.dev-card .dev-card-icon-dark i {
    color: #1d3557 !important; /* dark blue / dark color */
    font-size: 2rem;
    margin-bottom: 10px;
}

.dev-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.5);
    border-color: var(--dev-cyan);
}

.dev-btn-primary {
    background: var(--dev-cyan);
    color: #000;
    font-weight: 600;
    padding: 12px 30px;
    border-radius: 50px;
    margin-right: 15px;
}

.dev-btn-outline {
    border: 1px solid var(--dev-cyan);
    color: var(--dev-cyan);
    padding: 12px 30px;
    border-radius: 50px;
}

    .dev-btn-outline:hover {
        background: var(--dev-cyan);
        color: #000;
    }

/* Tablet */
@media (max-width: 992px) {
    .dev-title {
        font-size: 2.2rem;
    }
}

/* Mobile */
@media (max-width: 768px) {
    .dev-title {
        font-size: 1.8rem;
        line-height: 1.3;
    }
}

/* Small mobile */
@media (max-width: 480px) {
    .dev-title {
        font-size: 1.5rem;
        line-height: 1.4;
    }
}
/*----------------INDUSTRIES & TECHNOLOGY MEGA MENU------------------*/
.industries-dropdown {
    position: relative;
}

.industries-mega-menu {
    display: none;
    background-color: #11181f;
    padding: 2rem 2.5rem;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    min-width: 750px;
    z-index: 9999;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
    gap: 2.5rem;
}

.industries-dropdown:hover .industries-mega-menu {
    display: flex;
}

.industries-mega-column {
    flex: 1;
    min-width: 180px;
}

.industries-mega-heading {
    color: #ff4d4d;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 6px;
}

    .industries-mega-heading i {
        font-size: 0.8rem;
    }

.industries-mega-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

    .industries-mega-list li {
        margin-bottom: 0.5rem;
    }

        .industries-mega-list li a {
            color: #c0c0c0;
            text-decoration: none;
            font-size: 0.85rem;
            display: block;
            padding: 0.3rem 0;
            transition: all 0.2s ease;
            border-left: 2px solid transparent;
            padding-left: 0.8rem;
        }

            .industries-mega-list li a:hover {
                border-left: 4px solid #ff4d4d;
                color: #ff4d4d;
                background-color: #222;
            }

    .industries-mega-list.no-heading {
        margin-top: 1.6rem;
    }

/* Technology Dropdown */
.technology-dropdown {
    position: relative;
}

.technology-mega-menu {
    display: none;
    background-color: #11181f;
    padding: 2rem 2rem 1.5rem 2rem;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-70%);
    min-width: 800px;
    z-index: 9999;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
    gap: 2rem;
}

.technology-dropdown:hover .technology-mega-menu {
    display: flex;
}

.technology-mega-column {
    flex: 1;
    min-width: 140px;
}

.technology-mega-heading {
    color: #ff4d4d;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 0.8rem;
}

.technology-mega-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

    .technology-mega-list li {
        margin-bottom: 0.45rem;
    }

        .technology-mega-list li a {
            color: #c0c0c0;
            text-decoration: none;
            font-size: 0.85rem;
            display: block;
            padding: 0.25rem 0;
            transition: all 0.2s ease;
            border-left: 2px solid transparent;
            padding-left: 0.8rem;
        }

            .technology-mega-list li a:hover {
                border-left: 4px solid #ff4d4d;
                color: #ff4d4d;
                background-color: #222;
            }

.technology-bottom-text {
    display: none;
}

.technology-dropdown:hover .technology-bottom-text {
    display: block;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    background-color: #11181f;
    color: #ff4d4d;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2px;
    padding: 0.8rem 2rem;
    margin-top: 0;
    text-align: center;
    white-space: nowrap;
    z-index: 9998;
    border-top: 1px solid #2a343d;
}

@media (max-width: 992px) {
    .industries-mega-menu {
        min-width: 600px;
        left: 0;
        transform: translateX(-20%);
        padding: 1.5rem;
    }

    .technology-mega-menu {
        min-width: 650px;
        left: 0;
        transform: translateX(-20%);
        flex-wrap: wrap;
    }
}

@media (max-width: 768px) {
    .industries-mega-menu,
    .technology-mega-menu {
        min-width: 280px;
        left: auto;
        right: 0;
        transform: translateX(0);
        flex-direction: column;
        gap: 1.5rem;
    }

    .industries-mega-list.no-heading {
        margin-top: 0;
    }

    .technology-bottom-text {
        display: none !important;
    }
}

.nav-item.industries-dropdown .industries-mega-menu,
.nav-item.technology-dropdown .technology-mega-menu {
    margin-top: 0;
}

.industries-mega-list li a,
.technology-mega-list li a {
    background: transparent;
}

.industries-mega-menu hr,
.technology-mega-menu hr {
    display: none;
}

/*----------------OUR SERVICES SECTION------------------*/
.services-section {
    background: #ffffff;
    padding: 80px 0 60px;
}

/* 🔴 REMOVE HERO IMAGE COMPLETELY */
.service-hero-card {
    display: none;
}

/* ✅ NEW CENTER HEADING */
.service-heading {
    text-align: center;
    margin-bottom: 40px;
}

    .service-heading .small-tag {
        display: inline-block;
        color: #ff7418;
        font-size: 25px;
        font-weight: 800;
        letter-spacing: 2px;
        margin-bottom: 10px;
    }

    .service-heading h2 {
        font-size: clamp(2rem, 4vw, 2.8rem);
        font-weight: 900;
        color: #121820;
        margin-bottom: 10px;
    }

    .service-heading p {
        max-width: 700px;
        margin: 0 auto;
        font-size: 16px;
        color: #5f6875;
        line-height: 1.6;
    }

/* GRID */
.service-card-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
}

/* CARD */
.service-modern-card {
    min-height: 245px;
    padding: 28px 28px 24px;
    border-radius: 12px;
    border: 1px solid rgba(218, 224, 232, 0.95);
    box-shadow: 0 14px 30px rgba(20, 35, 60, 0.07);
    transition: all 0.35s ease;
    position: relative;
    overflow: hidden;
}

    /* HOVER EFFECT UPGRADE */
    .service-modern-card:hover {
        transform: translateY(-8px);
        box-shadow: 0 22px 45px rgba(20, 35, 60, 0.15);
    }

/* BACKGROUND VARIANTS */
.service-card-blue {
    background: linear-gradient(135deg, #eef8ff 0%, #fafdff 100%);
}

.service-card-light {
    background: linear-gradient(135deg, #fbfaf7 0%, #ffffff 100%);
}

.service-card-cream {
    background: linear-gradient(135deg, #fffaf0 0%, #fffdf8 100%);
}

.service-card-peach {
    background: linear-gradient(135deg, #fff0e4 0%, #fff8f2 100%);
}

/* ICON */
.service-modern-icon {
    color: #ff7418;
    font-size: 36px;
    margin-bottom: 20px;
}

/* TITLE */
.service-modern-card h5 {
    font-size: 20px;
    font-weight: 800;
    color: #121820;
    margin-bottom: 10px;
}

/* TEXT */
.service-modern-card p {
    font-size: 15px;
    line-height: 1.6;
    color: #5f6875;
}

/* CONSULTING CARD */
.service-call-card {
    background: linear-gradient(135deg, #fff1e6 0%, #ffe7d4 100%);
}

    .service-call-card .service-call-link {
        display: inline-flex;
        align-items: center;
        color: #ff7418;
        font-size: 15px;
        font-weight: 800;
        text-decoration: none;
        margin-top: 10px;
    }

        .service-call-card .service-call-link:hover {
            color: #f26405;
        }

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

@media (max-width: 767.98px) {
    .service-card-grid {
        grid-template-columns: 1fr;
    }

    .service-modern-card {
        padding: 22px 18px;
    }
}
/*----------------Hire SECTION------------------*/
.hire-white-section {
    position: relative;
    overflow: hidden;
    background: #f8fbff;
    font-family: 'Poppins', sans-serif;
}

    .hire-white-section::before {
        content: "";
        position: absolute;
        top: 0;
        right: -80px;
        width: 480px;
        height: 220px;
        background: radial-gradient(circle, rgba(46, 143, 255, 0.08) 1px, transparent 1px);
        background-size: 10px 10px;
        opacity: 0.55;
        pointer-events: none;
    }

    .hire-white-section::after {
        content: "";
        position: absolute;
        right: -120px;
        bottom: -40px;
        width: 420px;
        height: 420px;
        border-radius: 50%;
        background: radial-gradient(circle at center, rgba(67, 168, 255, 0.07), transparent 68%);
        pointer-events: none;
    }

.hire-white-content {
    position: relative;
    z-index: 2;
}

.hire-badge {
    display: inline-block;
    padding: 10px 18px;
    border-radius: 999px;
    background: #eaf3ff;
    color: #204f8e;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 1px;
}

.hire-title {
    font-size: clamp(2.2rem, 5vw, 4rem);
    line-height: 1.12;
    font-weight: 700;
    color: #173666;
    margin: 0;
}

    .hire-title span {
        color: #3ea2f7;
    }

.hire-desc {
    max-width: 720px;
    font-size: 1.05rem;
    line-height: 1.85;
    color: #314766;
    margin-bottom: 0;
}

.hire-points li {
    position: relative;
    padding-left: 18px;
    font-size: 1.05rem;
    line-height: 1.8;
    color: #314766;
    margin-bottom: 4px;
}

    .hire-points li::before {
        content: "•";
        position: absolute;
        left: 0;
        top: 0;
        color: #4bb58e;
        font-size: 1.3rem;
        line-height: 1.5;
    }

.hire-btn-primary,
.hire-btn-secondary {
    min-width: 230px;
    height: 56px;
    border-radius: 999px;
    font-size: 1.05rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 24px;
}

.hire-btn-primary {
    background: linear-gradient(90deg, #1f73d8, #3ea2f7);
    color: #fff;
    border: none;
    box-shadow: 0 10px 26px rgba(49, 128, 230, 0.22);
}

    .hire-btn-primary:hover {
        color: #fff;
        transform: translateY(-2px);
    }

.hire-btn-secondary {
    background: #fff;
    color: #20324f;
    border: 1px solid #cfdcf0;
    box-shadow: 0 6px 18px rgba(16, 58, 120, 0.05);
}

    .hire-btn-secondary:hover {
        color: #20324f;
        background: #f7fbff;
    }

.hire-bottom-strip {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    border: 1px solid #d8e4f3;
    border-radius: 14px;
    background: #ffffff;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(34, 78, 140, 0.06);
}

.hire-strip-item {
    flex: 1;
    min-width: 200px;
    padding: 16px 20px;
    display: flex;
    align-items: center;
    gap: 10px;
    color: #2b4264;
    font-size: 1rem;
    border-right: 1px solid #e4edf8;
}

    .hire-strip-item:last-child {
        border-right: none;
    }

.check-icon {
    color: #57bb95;
    font-weight: 700;
    font-size: 1.1rem;
}

.hire-card-panel {
    position: relative;
    z-index: 2;
}

.hire-main-card {
    background: linear-gradient(180deg, #eef6ff 0%, #edf3fb 100%);
    border: 1px solid #d9e6f5;
    border-radius: 22px;
    padding: 28px 18px 18px;
    box-shadow: 0 18px 40px rgba(49, 90, 150, 0.08);
}

.hire-main-icon {
    width: 78px;
    height: 78px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #5ca8ff;
    font-size: 2.6rem;
    background: transparent;
}

.hire-main-card h3 {
    margin: 0;
    font-size: 2rem;
    line-height: 1.15;
    font-weight: 700;
    color: #1f3b67;
}

.hire-main-card > p {
    font-size: 20px;
    line-height: 1.8;
    color: #3d5271;
    margin-bottom: 18px;
}

.hire-mini-card {
    height: 100%;
    background: #ffffff;
    border: 1px solid #dce6f2;
    border-radius: 18px;
    padding: 22px 18px;
    box-shadow: 0 8px 24px rgba(39, 76, 133, 0.05);
    transition: all 0.3s ease;
}

    .hire-mini-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 14px 28px rgba(39, 76, 133, 0.1);
    }

.mini-icon {
    font-size: 2.5rem;
    line-height: 1;
    margin-bottom: 14px;
}

.hire-mini-card h4 {
    font-size: 1.2rem;
    line-height: 1.2;
    font-weight: 700;
    color: #1d3761;
    margin-bottom: 12px;
}

.hire-mini-card p {
    font-size: 0.98rem;
    line-height: 1.7;
    color: #475a76;
    margin: 0;
}

@media (max-width: 1199.98px) {
    .hire-title {
        font-size: 3.2rem;
    }

    .hire-main-card h3 {
        font-size: 1.7rem;
    }
}

@media (max-width: 991.98px) {
    .hire-white-section {
        padding: 40px 0;
    }

    .hire-title {
        font-size: 2.7rem;
    }

    .hire-bottom-strip {
        margin-top: 32px;
    }
}

@media (max-width: 767.98px) {
    .hire-title {
        font-size: 30px;
    }

    .hire-desc,
    .hire-points li {
        font-size: 20px;
    }

    .hire-btn-primary,
    .hire-btn-secondary {
        min-width: 100%;
        font-size:20px
    }

    .hire-strip-item {
        font-size: 20px;
        min-width: 100%;
        border-right: none;
        border-bottom: 1px solid #e4edf8;
    }

        .hire-strip-item:last-child {
            border-bottom: none;
        }

    .hire-main-card {
        padding: 22px 14px 14px;
    }

        .hire-main-card h3 {
            font-size: 1.45rem;
        }

    .mini-icon {
        font-size: 2rem;
    }

    .hire-mini-card h4 {
        font-size: 18px;
    }
}

/*----------------PARTNERS SECTION------------------*/
.partner-section {
    background-color: rgb(245 249 255);
    color: white;
    font-family: 'Inter', sans-serif;
    position: relative;
    overflow: hidden;
}

.section-title {
    color: #ff4d4d;
    letter-spacing: 4px;
    font-weight: 700;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
}

.title-accent-line {
    width: 60px;
    height: 3px;
    background: var(--cyan-glow);
    margin: 0 auto;
    box-shadow: 0 0 10px var(--cyan-glow);
}

.hud-nav {
    background: rgb(255 255 255);
    border: 1px solid rgb(195 195 195);
    border-radius: 50px;
    padding: 5px;
    backdrop-filter: blur(10px);
}

.hud-btn {
    background: transparent;
    border: none;
    color: #666;
    padding: 8px 25px;
    border-radius: 50px;
    font-weight: 600;
    font-size: 0.8rem;
    text-transform: uppercase;
    transition: 0.3s ease;
}

    .hud-btn.active,
    .hud-btn:hover {
        color: #695c5c;
        background: rgb(145 136 136 / 18%);
    }

.glow-ring {
    width: 160px;
    height: 160px;
    margin: 0 auto;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    background: var(--glass);
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: 0.5s ease;
}

    .glow-ring.cyan {
        box-shadow: 0 0 25px rgba(0, 242, 255, 0.2);
        border-color: var(--cyan-glow);
    }

    .glow-ring.orange {
        box-shadow: 0 0 25px rgba(255, 77, 0, 0.2);
        border-color: var(--orange-glow);
    }

    .glow-ring.white {
        box-shadow: 0 0 25px rgba(255, 77, 0, 0.2);
        border-color: var(--orange-glow);
    }

    .glow-ring:hover {
        transform: scale(1.05);
        box-shadow: 0 0 40px currentColor;
    }

.badge-content img {
    filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.5));
}

.badge-label {
    margin-top: 20px;
    font-weight: 600;
    line-height: 1.2;
}

.text-cyan {
    color: var(--cyan-glow);
}

.text-orange {
    color: var(--orange-glow);
}

.badge-container {
    position: relative;
}

    .badge-container::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 10%;
        right: 10%;
        height: 1px;
        background: linear-gradient(90deg, transparent, rgba(0, 242, 255, 0.2), transparent);
        z-index: 0;
    }
/* Add this */

@media (max-width: 767.98px) {
    .badge-container {
        gap: 20px 0;
    }

    .glow-ring {
        width: 95px;
        height: 95px;
        margin: 0 auto 12px;
    }

    .badge-content {
        width: 70px;
        height: 70px;
    }

        .badge-content img {
            max-height: 90%;
            object-fit: contain;
        }

    .badge-label p.mb-0 {
        font-size: 20px;
        line-height: 1.2;
        font-weight: 600;
    }

    .badge-label .small {
        font-size: 16px;
        line-height: 1.2;
    }
}
/* ===================================== */
/* TESTIMONIAL SECTION */
/* ===================================== */


.testimonial-rating {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-top: 18px;
}

.testimonial-stars {
    display: flex;
    align-items: center;
    gap: 10px;
}

    .testimonial-stars i {
        font-size: 28px;
        color: #f7c63d;
        text-shadow: 0 4px 10px rgba(247, 198, 61, 0.25);
    }

.rating-divider {
    width: 2px;
    height: 38px;
    background: rgba(255,255,255,0.35);
    border-radius: 20px;
}

.rating-number {
    font-size: 38px;
    font-weight: 800;
    color: #ffffff;
    line-height: 1;
}

.testimonial-section {
    position: relative;
    background: linear-gradient(180deg, #f5f8ff 0%, #f8fbff 100%);
    overflow: hidden;
    padding-top: 100px;
    padding-bottom: 90px;
}

/* ===================================== */
/* PREMIUM WAVY TOP BACKGROUND */
/* ===================================== */

.testimonial-top-wave {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    line-height: 0;
    z-index: 1;
}

    .testimonial-top-wave svg {
        display: block;
        width: 100%;
        height: 150px;
    }

/* ===================================== */
/* CONTAINER */
/* ===================================== */

.testimonial-container {
    position: relative;
    z-index: 2;
}

/* ===================================== */
/* BACKGROUND BLOBS */
/* ===================================== */

.testimonial-blob {
    position: absolute;
    border-radius: 50%;
    opacity: 0.35;
    pointer-events: none;
}

.testimonial-blob-left {
    width: 340px;
    height: 340px;
    left: -120px;
    top: 180px;
    background: radial-gradient(circle, #d9e5ff 0%, transparent 70%);
}

.testimonial-blob-right {
    width: 400px;
    height: 400px;
    right: -150px;
    bottom: 0;
    background: radial-gradient(circle, #d7e6ff 0%, transparent 70%);
}

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

.testimonial-subtitle {
    font-size: 35px;
    color: #808a9f;
    font-weight: 400;
    letter-spacing: 0.3px;
}

.testimonial-title {
    font-size: clamp(2rem, 4vw, 4rem);
    font-weight: 800;
    color: #1f7cc7;
    line-height: 1.1;
}

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

.testimonial-card {
    background: rgb(16 36 62);
    border: 1px solid rgba(255, 255, 255, 0.95);
    box-shadow: 0 20px 45px rgba(39, 67, 129, 0.10);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-radius: 30px;
    padding: 2.3rem;
    min-height: 340px;
}

.testimonial-avatar {
    width: 78px;
    height: 78px;
    min-width: 78px;
    border-radius: 50%;
    background: linear-gradient(135deg, #e7f0ff, #b6d0ff);
    color: #163b78;
    font-weight: 800;
    font-size: 1.7rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 3px solid #fff;
    box-shadow: 0 10px 24px rgba(48, 79, 148, 0.12);
}

.testimonial-client-name {
    font-size: 1.8rem;
    font-weight: 800;
    color: #ffffff;
}

.testimonial-client-role {
    font-size: 1rem;
    color: #bebebe;
    font-weight: 500;
}

.testimonial-text {
    font-size: 18px;
    line-height: 1.9;
    color: #ffffffcf;
    margin: 0;
}

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

.carousel-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 58px;
    height: 58px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 10px 25px rgba(39, 67, 129, 0.14);
    color: #1d2433;
    z-index: 5;
    transition: all 0.3s ease;
}

    .carousel-nav:hover {
        color: #0d6efd;
        background: #ffffff;
        transform: translateY(-50%) scale(1.05);
    }

.carousel-nav-prev {
    left: -26px;
}

.carousel-nav-next {
    right: -26px;
}

.carousel-nav i {
    font-size: 1.5rem;
    line-height: 1;
}

/* ===================================== */
/* INDICATORS */
/* ===================================== */

.testimonial-indicators {
    display: flex;
    justify-content: center;
    gap: 12px;
}

    .testimonial-indicators button {
        width: 13px;
        height: 13px;
        border: none;
        border-radius: 50%;
        background: #ccd6ea;
        transition: all 0.3s ease;
    }

        .testimonial-indicators button.active {
            background: #4e8fff;
            transform: scale(1.15);
        }

/* ===================================== */
/* RIGHT SIDE IMAGE */
/* ===================================== */

.testimonial-image-wrap {
    position: relative;
    min-height: 540px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.image-bg-shape {
    position: absolute;
    width: 88%;
    height: 88%;
    background: linear-gradient(135deg, #d7e5ff, #edf4ff);
    border-radius: 32px;
    transform: rotate(-8deg);
    z-index: 1;
}

.testimonial-image-card {
    position: relative;
    width: 80%;
    max-width: 500px;
    aspect-ratio: 1 / 1.05;
    overflow: hidden;
    border-radius: 32px;
    box-shadow: 0 25px 60px rgba(35, 61, 120, 0.16);
    z-index: 2;
    background: #fff;
}

    .testimonial-image-card img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

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

@media (max-width: 991px) {
    .testimonial-section {
        padding-top: 140px;
        padding-bottom: 70px;
    }

    .testimonial-top-wave svg {
        height: 90px;
    }

    .testimonial-card {
        min-height: auto;
        padding: 1.6rem;
    }

    .carousel-nav {
        width: 48px;
        height: 48px;
        top: auto;
        bottom: -65px;
        transform: none;
    }

    .carousel-nav-prev {
        left: 12px;
    }

    .carousel-nav-next {
        right: 12px;
    }

    .carousel-nav:hover {
        transform: scale(1.05);
    }

    .testimonial-image-wrap {
        min-height: auto;
        margin-top: 1.5rem;
    }
}

@media (max-width: 575px) {
    .testimonial-title {
        font-size: 2rem;
    }

    .testimonial-client-name {
        font-size: 1.3rem;
    }

    .testimonial-text {
        font-size: 1rem;
        line-height: 1.75;
    }

    .testimonial-avatar {
        width: 64px;
        height: 64px;
        min-width: 64px;
        font-size: 1.35rem;
    }

    .testimonial-card {
        border-radius: 24px;
        padding: 1.3rem;
    }

    .testimonial-image-card {
        border-radius: 24px;
    }
}
/*----------------FOOTER SECTION------------------*/
.devlok-footer {
    background-color: var(--bg-midnight);
    color: #ffffff;
    position: relative;
    overflow: hidden;
    width: 100%;
    border-top: 1px solid rgba(0, 242, 255, 0.15);
    padding-top: 1.5rem !important;
    padding-bottom: 0.75rem !important;
}

.footer-title {
    color: var(--text-cyan);
    font-weight: 800;
    margin-bottom: 0.75rem;
    letter-spacing: -0.3px;
    font-size: 1.1rem;
}

.text-cyan {
    color: var(--text-cyan) !important;
}

.line-height-lg {
    line-height: 1.4;
    font-size: 15px !important;
    margin-bottom: 0.5rem;
}

.social-icon {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: white;
    text-decoration: none;
    transition: transform 0.3s ease, background-color 0.2s;
    font-size: 0.85rem;
}

    .social-icon:hover {
        transform: translateY(-3px);
        filter: brightness(1.05);
    }

.bg-linkedin {
    background-color: #0077b5;
}

.bg-twitter {
    background-color: #000000;
}

.bg-facebook {
    background-color: #1877f2;
}

.bg-skype {
    background-color: #00aff0;
}

.bg-instagram {
    background-color: #e4405f;
}

.bg-whatsapp {
    background-color: #25d366;
}

.btn-partnership {
    background: linear-gradient(90deg, #004e5a, #008191);
    color: white;
    border: 1px solid var(--text-cyan);
    border-radius: 40px;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 1px;
    padding: 6px 12px;
    transition: 0.3s;
    text-transform: uppercase;
    display: inline-block;
    text-align: center;
    width: 100%;
}

    .btn-partnership:hover {
        background: var(--text-cyan);
        color: #000;
        box-shadow: 0 0 18px var(--text-cyan);
        border-color: var(--text-cyan);
    }

.links-card {
    background: rgba(10, 18, 32, 0.65);
    backdrop-filter: blur(8px);
    border-radius: 16px;
    border: 1px solid rgba(0, 242, 255, 0.15);
    transition: all 0.3s ease;
    height: 100%;
    padding: 0.75rem !important;
}

    .links-card:hover {
        border-color: rgba(0, 242, 255, 0.4);
        box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
    }

    .links-card h4 {
        font-size: 0.95rem;
        font-weight: 700;
        letter-spacing: -0.2px;
        border-left: 3px solid var(--text-cyan);
        padding-left: 10px;
        margin-bottom: 0.6rem;
        color: #ffffff;
    }

.link-list {
    list-style: none;
    padding-left: 0;
    margin-bottom: 0;
}

    .link-list li {
        margin-bottom: 6px;
    }

    .link-list a {
        color: #cbd5e6;
        text-decoration: none;
        transition: all 0.2s;
        display: inline-flex;
        align-items: center;
        gap: 6px;
    }

        .link-list a i {
            font-size: 0.65rem;
            color: var(--text-cyan);
            opacity: 0.8;
        }

        .link-list a:hover {
            color: var(--text-cyan);
            transform: translateX(3px);
        }

.special-link {
    color: var(--text-cyan) !important;
    font-weight: 600;
}

/* Find Us Section */
.devlok-footer h4.text-white {
    font-size: 1.1rem !important;
    margin-bottom: 1rem !important;
    font-weight: 600;
}

.contact-item {
    margin-bottom: 0.75rem !important;
}

    .contact-item i {
        font-size: 0.9rem;
    }

    .contact-item h6 {
        font-size: 0.7rem !important;
        margin-bottom: 0.3rem;
        letter-spacing: 0.5px;
    }

    .contact-item p {
        font-size: 15px !important;
        margin-bottom: 0;
        line-height: 1.4;
    }

.devlok-footer .small.d-flex.flex-column.gap-2 a {
    font-size: 18px !important;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    position: relative;
}

    .devlok-footer .small.d-flex.flex-column.gap-2 a:hover {
        color: var(--text-cyan) !important;
        transform: translateX(5px);
    }

        .devlok-footer .small.d-flex.flex-column.gap-2 a:hover i {
            transform: scale(1.1);
            color: var(--text-cyan);
            filter: drop-shadow(0 0 6px var(--text-cyan));
        }

    .devlok-footer .small.d-flex.flex-column.gap-2 a i {
        transition: transform 0.3s ease, color 0.3s ease, filter 0.3s ease;
    }

hr {
    opacity: 0.2;
    margin: 0.75rem 0;
}

.text-secondary-custom {
    color: #9aa3b9 !important;
}

.devlok-footer .row.g-4 {
    --bs-gutter-y: 0.75rem;
    margin-bottom: 0.5rem !important;
}

.devlok-footer .text-center.pt-4 {
    padding-top: 0.75rem !important;
}

.devlok-footer .small.text-secondary.mb-0 {
    font-size: 15px !important;
    font-weight: 400;
}

.social-links {
    margin-top: 0.5rem !important;
}

.mt-4 {
    margin-top: 0.5rem !important;
}

.col-lg-3 {
    padding-bottom: 0;
}

@media (max-width: 991px) {
    .ps-lg-5 {
        padding-left: 0 !important;
    }

    .devlok-footer {
        padding-top: 1rem !important;
    }

        .devlok-footer h4.text-white {
            font-size: 1rem !important;
        }


        .devlok-footer .small.text-secondary.mb-0 {
            font-size: 0.65rem !important;
        }
}

/*----------------ABOUT SECTION------------------*/
.section-space {
    padding: 30px 0;
    position: relative;
    z-index: 2;
}

.about-main-section {
    padding-top: 200px;
    background: linear-gradient(135deg, #071120 0%, #0d1b2a 45%, #132238 100%);
}

.about-main-title {
    font-size: ;
    font-weight: 700;
    line-height: 1.05;
    margin-bottom: 12px;
    letter-spacing: -1px;
    color: #f2f8ff;
}

.about-main-subtitle {
    font-size: 30px;
    font-weight: 500;
    color: #abd5ff;
    margin-bottom: 24px;
}

.about-main-text,
.about-block-text {
    color: white;
    font-size: 1rem;
    line-height: 1.9;
    max-width: 560px;
}

.about-main-image-wrap {
    position: relative;
    text-align: center;
}

    .about-main-image-wrap::before {
        content: "";
        position: absolute;
        inset: 8% 12% 10% 12%;
        background: radial-gradient( circle, rgba(76, 180, 255, 0.18), rgba(76, 180, 255, 0) 70% );
        filter: blur(25px);
        z-index: 0;
    }

.about-main-image {
    position: relative;
    z-index: 1;
    max-width: 100%;
    filter: drop-shadow(0 15px 35px rgba(80, 140, 255, 0.18));
}

.about-block-title {
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 700;
    text-align: center;
    margin-bottom: 0;
    color: #1f3550;
}
/*ABOUT COMPANY*/
/* =========================================
   ABOUT COMPANY SECTION CSS - LIGHT THEME
========================================= */

.about-company-content {
    position: relative;
}

.about-company-image-card {
    background: #ffffff;
    border: 1px solid rgba(190, 210, 230, 0.45);
    border-radius: 28px;
    padding: 14px;
    box-shadow: 0 12px 30px rgba(40, 70, 100, 0.08);
    backdrop-filter: blur(10px);
    transition: 0.35s ease;
}

    .about-company-image-card:hover {
        transform: translateY(-6px);
        box-shadow: 0 18px 40px rgba(70, 150, 255, 0.12);
    }

.about-feature-list {
    max-width: 430px;
}

.about-feature-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 0;
    border-bottom: 1px solid rgba(190, 210, 230, 0.35);
    color: #33485f;
    font-size: 1.05rem;
    font-weight: 500;
}

    .about-feature-item strong {
        color: #1f3550;
    }

.about-check-icon {
    width: 38px;
    height: 38px;
    min-width: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(20, 152, 213, 0.18);
    border-radius: 50%;
    background: linear-gradient(135deg, #edf7ff, #dff1ff);
    color: #1498d5;
    box-shadow: 0 6px 16px rgba(20, 152, 213, 0.08);
}
/* =========================================
   WHY CHOOSE US - LIGHT THEME
========================================= */

.about-why-section {
    background: linear-gradient(135deg, #f8fbff 0%, #edf5fc 100%);
    padding: 80px 0;
}

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

.section-heading{
    max-width:900px;
    margin:0 auto 70px;
    text-align:center;
    display:flex;
    flex-direction:column;
    align-items:center;
}

/* Accent Line */

.heading-line{
    width:90px;
    height:4px;
    border-radius:50px;
    margin-bottom:25px;
    background:linear-gradient(90deg,#4db6ff,#7fd3ff,#4db6ff);
    box-shadow:0 0 18px rgba(77,182,255,.45);
}

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

.about-block-title{
    margin:0;
    font-size:clamp(2.4rem,5vw,4rem);
    font-weight:800;
    line-height:1.15;
    letter-spacing:-1px;

    color:#fff;

    text-shadow:
        0 4px 20px rgba(0,0,0,.18);

    max-width:850px;
}

/*=========================================
PARAGRAPH
=========================================*/

.blog-intro{
    margin-top:22px;
    max-width:760px;

    font-size:18px;
    line-height:1.9;

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

    font-weight:400;
    letter-spacing:.25px;
}

.about-choose-card {
    background: #ffffff;
    border: 1px solid rgba(190, 210, 230, 0.35);
    border-radius: 24px;
    padding: 32px 24px;
    transition: all 0.35s ease;
    min-height: 250px;
    box-shadow: 0 12px 30px rgba(40, 70, 100, 0.06);
}

    .about-choose-card:hover {
        transform: translateY(-8px);
        box-shadow: 0 20px 40px rgba(70, 150, 255, 0.12);
    }

.about-choose-icon {
    width: 74px;
    height: 74px;
    margin: 0 auto 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #55d8ff, #5a8cff);
    color: #ffffff;
    font-size: 2rem;
    box-shadow: 0 10px 22px rgba(90, 140, 255, 0.16);
}

.about-choose-card h4 {
    font-size: 1.4rem;
    font-weight: 700;
    color: #24384d;
    margin-bottom: 12px;
}

.about-choose-card p {
    color: #6a7b8f;
    line-height: 1.8;
    margin-bottom: 0;
    font-size: 15px;
}

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

@media (max-width: 991px) {
    .about-block-title {
        font-size: 34px;
    }
}

@media (max-width: 767px) {
    .about-blockTitle {
        font-size: 28px;
    }

    .section-heading {
        gap: 12px;
    }

    .heading-line {
        width: 14%;
    }

    .about-choose-card {
        min-height: auto;
        padding: 28px 20px;
    }

        .about-choose-card h4 {
            font-size: 1.2rem;
        }
}

/*=========================================
BLOG CTA
=========================================*/

.blog-cta {
    padding: 40px 0;
    background: #f8fbff;
    position: relative;
    overflow: hidden;
}

    /* Decorative Glow */

    .blog-cta::before {
        content: "";
        position: absolute;
        width: 420px;
        height: 420px;
        border-radius: 50%;
        background: rgba(58,134,255,.10);
        top: -180px;
        left: -120px;
        filter: blur(60px);
    }

    .blog-cta::after {
        content: "";
        position: absolute;
        width: 350px;
        height: 350px;
        border-radius: 50%;
        background: rgba(0,200,255,.08);
        right: -120px;
        bottom: -150px;
        filter: blur(70px);
    }

.blog-cta-box {
    position: relative;
    z-index: 2;
    padding: 60px;
    border-radius: 28px;
    background: linear-gradient(135deg,#0b1d38 0%,#173d73 100%);
    box-shadow: 0 30px 70px rgba(10,35,80,.18);
    overflow: hidden;
}

    /* Shine */

    .blog-cta-box::before {
        content: "";
        position: absolute;
        width: 240px;
        height: 240px;
        background: rgba(255,255,255,.05);
        border-radius: 50%;
        top: -80px;
        right: -70px;
    }

.blog-cta-tag {
    display: inline-block;
    padding: 8px 18px;
    background: rgba(255,255,255,.12);
    color: #8fd0ff;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 30px;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 18px;
}

.blog-cta-title {
    color: #fff;
    font-size: 44px;
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 18px;
}

.blog-cta-text {
    color: rgba(255,255,255,.80);
    font-size: 18px;
    line-height: 1.9;
    max-width: 700px;
    margin: 0;
}

/* Button */

.blog-cta-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 18px 36px;
    background: #4aa8ff;
    color: #fff;
    border-radius: 60px;
    font-size: 17px;
    font-weight: 700;
    text-decoration: none;
    transition: .35s;
    box-shadow: 0 15px 35px rgba(74,168,255,.35);
}

    .blog-cta-btn:hover {
        background: #ffffff;
        color: #173d73;
        transform: translateY(-5px);
        box-shadow: 0 20px 45px rgba(255,255,255,.20);
    }

/* Responsive */

@media(max-width:991px) {

    .blog-cta-box {
        padding: 45px 35px;
        text-align: center;
    }

    .blog-cta-title {
        font-size: 36px;
    }

    .blog-cta-text {
        margin: auto;
    }
}

@media(max-width:767px) {

    .blog-cta {
        padding: 70px 0;
    }

    .blog-cta-box {
        padding: 35px 25px;
        border-radius: 20px;
    }

    .blog-cta-title {
        font-size: 30px;
    }

    .blog-cta-text {
        font-size: 16px;
        line-height: 1.8;
    }

    .blog-cta-btn {
        width: 100%;
        padding: 16px 24px;
    }
}
/* =========================================
   OTHER ELEMENTS SECTION CSS - LIGHT THEME
========================================= */

.glass-card {
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(190, 210, 230, 0.35);
    border-radius: 22px;
    box-shadow: 0 12px 28px rgba(40, 70, 100, 0.08);
    backdrop-filter: blur(14px);
    position: relative;
    overflow: hidden;
}

    .glass-card::before {
        content: "";
        position: absolute;
        width: 180px;
        height: 180px;
        top: -70px;
        left: -60px;
        background: radial-gradient(circle, rgba(100, 180, 255, 0.10), transparent 70%);
        pointer-events: none;
    }

.about-info-card {
    padding: 38px 28px 28px;
    min-height: 190px;
}

.about-info-title-badge {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background: linear-gradient(90deg, #edf7ff, #f8fcff);
    border: 1px solid rgba(120, 180, 255, 0.18);
    border-radius: 50px;
    padding: 8px 22px;
    margin-bottom: 22px;
}

    .about-info-title-badge h3 {
        font-size: 2rem;
        font-weight: 600;
        margin: 0;
        color: #1f3550;
    }

.about-mini-icon {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: linear-gradient(135deg, #4cc9ff, #4d8dff);
    color: #fff;
    box-shadow: 0 8px 18px rgba(76, 201, 255, 0.18);
}

.about-info-card p {
    color: #5f7085;
    font-size: 20px;
    line-height: 1.9;
    margin: 0;
}

.section-heading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    margin-bottom: 10px;
}

.heading-line {
    width: 18%;
    max-width: 170px;
    height: 2px;
    background: linear-gradient( 90deg, transparent, rgba(90, 170, 255, 0.7), transparent );
    display: inline-block;
}

.about-choose-card {
    padding: 32px 24px;
    transition: all 0.35s ease;
    min-height: 250px;
}

    .about-choose-card:hover,
    .about-stat-card:hover,
    .about-info-card:hover,
    .about-company-image-card:hover {
        transform: translateY(-6px);
        box-shadow: 0 15px 35px rgba(70, 150, 255, 0.12);
    }

.about-choose-icon {
    width: 74px;
    height: 74px;
    margin: 0 auto 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #55d8ff, #5a8cff);
    color: white;
    font-size: 2rem;
    box-shadow: 0 10px 22px rgba(90, 140, 255, 0.16);
}

.about-choose-card h4 {
    font-size: 1.6rem;
    font-weight: 600;
    color: #24384d;
    margin-bottom: 12px;
}

.about-choose-card p {
    font-size: 20px;
    color: #6a7b8f;
    line-height: 1.8;
    margin-bottom: 0;
}

.about-stat-card {
    padding: 34px 20px;
    min-height: 190px;
    transition: all 0.35s ease;
}

    .about-stat-card h3 {
        font-size: clamp(2.6rem, 5vw, 4rem);
        font-weight: 700;
        margin-bottom: 10px;
        color: #1498d5;
        text-shadow: none;
    }

    .about-stat-card p {
        font-size: 1.5rem;
        line-height: 1.5;
        color: #33485f;
        margin: 0;
        font-weight: 500;
    }

.page-glow,
.glow-1,
.glow-2,
.glow-3 {
    display: none;
}


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

@media (max-width: 991.98px) {
    .about-main-section {
        text-align: center;
    }

    .about-main-text,
    .about-block-text {
        font-size: 20px;
        margin-left: auto;
        margin-right: auto;
    }

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

    .about-feature-list {
        margin: 0 auto;
        text-align: left;
    }

    .section-heading {
        gap: 12px;
    }

    .heading-line {
        width: 14%;
    }
}

@media (max-width: 767.98px) {
    .about-main-title {
        font-size: 3.2rem;
    }

    .about-main-subtitle {
        font-size: 1.4rem;
    }

    .about-info-title-badge h3 {
        font-size: 1.5rem;
    }

    .about-choose-card {
        min-height: auto;
    }

    .about-stat-card p {
        font-size: 1.2rem;
    }
}

.mission-vision-wrapper {
    display: flex;
    gap: 24px;
    margin: 0;
    padding: 0;
}

.mission-card {
    flex: 1;
}

@media (max-width: 768px) {
    .mission-vision-wrapper {
        flex-direction: column;
        gap: 20px;
    }
}
/* =========================================
   OUR BRAND VALUES - LIGHT THEME
========================================= */

.about-values-section {
    background: linear-gradient(135deg, #f8fbff 0%, #edf5fc 100%);
    padding: 80px 0;
}

.section-heading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    margin-bottom: 20px;
}

.heading-line {
    width: 18%;
    max-width: 170px;
    height: 2px;
    background: linear-gradient( 90deg, transparent, rgba(90, 170, 255, 0.7), transparent );
    display: inline-block;
}

.about-block-title {
    font-size: 42px;
    font-weight: 700;
    color: #ffffff;
    margin: 0;
}

.about-stat-card {
    background: #ffffff;
    border: 1px solid rgba(190, 210, 230, 0.35);
    border-radius: 24px;
    padding: 36px 20px;
    min-height: 220px;
    transition: all 0.35s ease;
    box-shadow: 0 12px 30px rgba(40, 70, 100, 0.06);
}

    .about-stat-card:hover {
        transform: translateY(-8px);
        box-shadow: 0 20px 40px rgba(70, 150, 255, 0.12);
    }

    .about-stat-card h3 {
        font-size: clamp(2.8rem, 5vw, 4rem);
        font-weight: 700;
        color: #1498d5;
        margin-bottom: 14px;
        text-shadow: none;
    }

    .about-stat-card p {
        font-size: 1.15rem;
        line-height: 1.7;
        color: #33485f;
        margin: 0;
        font-weight: 500;
    }

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

@media (max-width: 991px) {
    .about-block-title {
        font-size: 34px;
    }
}

@media (max-width: 767px) {

    .section-heading {
        gap: 12px;
    }

    .heading-line {
        width: 14%;
    }

    .about-stat-card {
        min-height: auto;
        padding: 30px 18px;
    }

        .about-stat-card p {
            font-size: 20px;
        }
}
/*----------------GET A QUOTE SECTION------------------*/
.quote-contact-section {
    padding: 70px 20px;
    background: linear-gradient(135deg, #eef6ff 0%, #fff7ef 100%);
    font-family: 'Poppins', sans-serif;
}

.quote-contact-container {
    max-width: 1180px;
    margin: auto;
    border-radius: 28px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 30px 80px rgba(22, 55, 90, 0.14);
}

.quote-left-panel {
    height: 100%;
    padding: 60px 48px;
    background: linear-gradient(145deg, #0f3b63 0%, #116fae 55%, #ff8a32 100%);
    color: #fff;
    position: relative;
}

.quote-badge {
    display: inline-block;
    padding: 8px 18px;
    border-radius: 50px;
    background: rgba(255,255,255,0.16);
    border: 1px solid rgba(255,255,255,0.25);
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 20px;
}

.quote-title {
    font-size: 50px;
    font-weight: 800;
    margin-bottom: 16px;
    color: #fff;
}

.quote-subtitle {
    font-size: 17px;
    line-height: 1.8;
    color: rgba(255,255,255,0.86);
    margin-bottom: 36px;
}

.quote-contact-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.quote-contact-item {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 20px;
    border-radius: 18px;
    background: rgba(255,255,255,0.14);
    border: 1px solid rgba(255,255,255,0.22);
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
}

    .quote-contact-item:hover {
        transform: translateY(-4px);
        background: rgba(255,255,255,0.18);
    }

/* ICON CIRCLE */
.quote-contact-icon {
    width: 54px;
    height: 54px;
    min-width: 54px;
    border-radius: 50%;
    background: linear-gradient(135deg, #ffffff, #dbeeff);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 22px rgba(0,0,0,0.12);
    position: relative;
}

    /* ICON */
    .quote-contact-icon i {
        font-size: 22px;
        line-height: 1;
        display: flex;
        align-items: center;
        justify-content: center;
    }

/* INDIVIDUAL COLORS */
.quote-contact-item:nth-child(1) .quote-contact-icon i {
    margin-top: 15px;
    color: #ff7b22;
}

.quote-contact-item:nth-child(2) .quote-contact-icon i {
    margin-top: 15px;
    color: #1f8cff;
}

.quote-contact-item:nth-child(3) .quote-contact-icon i {
    margin-top: 15px;
    color: #10b981;
}

/* TEXT */
.quote-contact-item strong {
    display: block;
    color: #ffffff;
    font-size: 15px;
    margin-bottom: 5px;
    font-weight: 700;
}

.quote-contact-item a,
.quote-contact-item span {
    display: block;
    color: rgba(255,255,255,0.88);
    text-decoration: none;
    line-height: 1.7;
    font-size: 14px;
}

    .quote-contact-item a:hover {
        color: #ffffff;
    }

.quote-socials {
    display: flex;
    gap: 12px;
    margin-top: 36px;
}

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

    .quote-social-link:hover {
        background: #ff8a32;
        color: #fff;
    }

.quote-right-panel {
    height: 100%;
    padding: 55px 45px;
    background: #f8fbff;
    display: flex;
    align-items: center;
}

.quote-form-box {
    width: 100%;
    background: #fff;
    padding: 38px;
    border-radius: 24px;
    border: 1px solid #dce9f6;
    box-shadow: 0 20px 55px rgba(20, 60, 100, 0.10);
}

.quote-form-title {
    font-size: 26px;
    font-weight: 800;
    color: #12395c;
    margin-bottom: 24px;
}

.quote-form-group label {
    font-size: 14px;
    font-weight: 700;
    color: #183b5d;
    margin-bottom: 8px;
    display: block;
}

.quote-input-wrap {
    position: relative;
}

.quote-input-icon {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: #1f8cff;
    font-size: 16px;
    pointer-events: none;
}

.quote-input-wrap input,
.quote-input-wrap select,
.quote-select {
    width: 100%;
    height: 52px;
    padding: 0 15px 0 46px;
    border: 1.5px solid #d7e4f2;
    border-radius: 13px;
    background: #f9fcff;
    color: #17395c;
    font-size: 14px;
    outline: none;
}

.quote-textarea-wrap textarea {
    width: 100%;
    min-height: 125px;
    padding: 15px;
    border: 1.5px solid #d7e4f2;
    border-radius: 13px;
    background: #f9fcff;
    resize: none;
    outline: none;
}

    .quote-input-wrap input:focus,
    .quote-select:focus,
    .quote-textarea-wrap textarea:focus {
        border-color: #1f8cff;
        background: #fff;
        box-shadow: 0 0 0 4px rgba(31,140,255,0.12);
    }

.quote-captcha {
    padding: 14px;
    border-radius: 14px;
    background: #f4f9ff;
    border: 1px dashed #bad5f2;
}

    .quote-captcha input {
        width: 100%;
        height: 42px;
        border: 1.5px solid #d7e4f2;
        border-radius: 10px;
        padding: 0 12px;
        margin-top: 8px;
    }

.quote-submit-btn {
    width: 100%;
    height: 54px;
    border: none;
    border-radius: 14px;
    background: linear-gradient(135deg, #ff8a32, #ff6b1a);
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    box-shadow: 0 14px 28px rgba(255,112,32,0.25);
}

    .quote-submit-btn:hover {
        background: linear-gradient(135deg, #1f8cff, #006ee6);
    }

.quote-alert {
    border-radius: 12px;
    font-size: 14px;
}

.text-danger {
    font-size: 12px;
    margin-top: 5px;
    display: block;
}

@media (max-width: 991px) {
    .quote-left-panel,
    .quote-right-panel {
        padding: 40px 25px;
    }

    .quote-title {
        font-size: 38px;
    }

    .quote-form-box {
        padding: 28px 22px;
    }
}

/*=====================================
BLOG PAGE
=====================================*/

.blog-page-section {
    background: #081b32;
    padding: 60px 0 80px;
}

.blog-page-section .container {
    max-width: 1600px;
}

.blog-list-wrap {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

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

.custom-blog-card {
    display: flex;
    align-items: center;
    gap: 35px;
    background: #ffffff;
    border-radius: 30px;
    padding: 30px 35px;
    min-height: 220px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 12px 40px rgba(62, 96, 177, 0.08);
    transition: all .35s ease;
}

.custom-blog-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 50px rgba(62, 96, 177, 0.15);
}

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

.custom-blog-image {
    width: 260px;
    min-width: 260px;
    height: 160px;
    border-radius: 18px;
    overflow: hidden;
    margin-bottom: 0;
}

.custom-blog-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: .4s ease;
}

.custom-blog-card:hover .custom-blog-image img {
    transform: scale(1.06);
}

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

.custom-blog-content {
    flex: 1;
    padding: 0;
}

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

.custom-blog-title {
    margin: 0 0 14px;
    font-size: 38px;
    font-weight: 700;
    line-height: 1.3;
}

.custom-blog-title a {
    color: #1b2b57 !important;
    text-decoration: none !important;
}

.custom-blog-title a:hover {
    color: #2d7eff !important;
}

/*=====================================
META
=====================================*/

.custom-blog-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 18px;
    font-size: 15px;
    font-weight: 600;
    text-transform: uppercase;
}

.custom-blog-meta span {
    color: #3b82f6;
}

/*=====================================
DESCRIPTION
=====================================*/

.custom-blog-desc {
    color: #6c7a92;
    font-size: 17px;
    line-height: 1.8;
    margin-bottom: 18px;
}

/* Hide Read More */

.custom-read-more {
    display: none;
}

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

.custom-blog-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 15px;
}

.custom-blog-views {
    font-size: 18px;
    color: #6c7a92;
    display: flex;
    align-items: center;
    gap: 8px;
}

.custom-blog-views i {
    color: #3b82f6;
}

.custom-blog-share {
    display: flex;
    align-items: center;
    gap: 18px;
}

.custom-blog-share a {
    color: #7c8aa5;
    background: transparent !important;
    width: auto;
    height: auto;
    font-size: 18px;
    transition: .3s;
}

.custom-blog-share a:hover {
    color: #2d7eff;
    transform: translateY(-2px);
}

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

.custom-blog-card::after {
    content: "\f061";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    width: 78px;
    height: 78px;
    border-radius: 50%;
    background: #ffffff;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    flex-shrink: 0;
    margin-left: 20px;
    /* box-shadow: 0 12px 25px rgba(59, 130, 246, .25); */
    transition: all .3s ease;
}

.custom-blog-card:hover::after {
    transform: scale(1.08);
    background: white;
}

/*=====================================
LARGE DESKTOP
=====================================*/

@media (min-width: 1400px) {

    .custom-blog-card {
        min-height: 250px;
    }

    .custom-blog-image {
        width: 300px;
        min-width: 300px;
        height: 180px;
    }

    .custom-blog-title {
        font-size: 42px;
    }
}

/*=====================================
TABLET
=====================================*/

@media (max-width: 991px) {

    .custom-blog-card {
        flex-wrap: wrap;
        padding: 25px;
        gap: 20px;
    }

    .custom-blog-image {
        width: 100%;
        min-width: 100%;
        height: 260px;
    }

    .custom-blog-title {
        font-size: 28px;
    }

    .custom-blog-desc {
        font-size: 15px;
    }

    .custom-blog-card::after {
        width: 65px;
        height: 65px;
        font-size: 20px;
        margin-left: auto;
    }
}

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

@media (max-width: 767px) {

    .blog-page-section {
        padding: 30px 0 50px;
    }

    .custom-blog-card {
        padding: 18px;
        border-radius: 20px;
    }

    .custom-blog-image {
        height: 200px;
    }

    .custom-blog-title {
        font-size: 22px;
        line-height: 1.4;
    }

    .custom-blog-meta {
        font-size: 12px;
    }

    .custom-blog-desc {
        font-size: 14px;
    }

    .custom-blog-bottom {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .custom-blog-views {
        font-size: 14px;
    }

    .custom-blog-share a {
        font-size: 16px;
    }

    .custom-blog-card::after {
        width: 55px;
        height: 55px;
        font-size: 18px;
    }
}

/*==========================================
BLOG DETAILS HERO
==========================================*/

.blogdetails-hero {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg,#0b0d2b 0%,#13164c 45%,#0a0b22 100%);
    padding: 130px 0 130px;
    color: #fff;
}

    /* Glow */

    .blogdetails-hero::before {
        content: "";
        position: absolute;
        width: 450px;
        height: 450px;
        right: -150px;
        top: -120px;
        border-radius: 50%;
        background: rgba(79,110,255,.18);
        filter: blur(80px);
    }

/* Layout */

.blogdetails-hero-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 70px;
    position: relative;
    z-index: 2;
}

.blogdetails-hero-left {
    width: 52%;
}

.blogdetails-hero-right {
    width: 48%;
    text-align: right;
}

/* Badge */

.blogdetails-hero-badge {
    display: inline-block;
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.12);
    padding: 8px 18px;
    border-radius: 50px;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 1px;
    margin-bottom: 25px;
}

/* Heading */

.blogdetails-hero-title {
    font-size: 54px;
    line-height: 1.15;
    font-weight: 700;
    margin-bottom: 28px;
    color: #fff;
}

/* Paragraph */

.blogdetails-hero-description {
    color: #cfd5f4;
    font-size: 18px;
    line-height: 1.9;
    max-width: 620px;
}

/* Image */

.blogdetails-hero-right img {
    width: 100%;
    max-width: 520px;
    animation: heroFloat 5s ease-in-out infinite;
}

@keyframes heroFloat {

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

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

/* Bottom Curve */

.blogdetails-hero-wave {
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    height: 80px;
    background: #fff;
    border-top-left-radius: 100% 100%;
    border-top-right-radius: 100% 100%;
}

/* Tablet */

@media (max-width:991px) {

    .blogdetails-hero {
        padding: 70px 0 100px;
    }

    .blogdetails-hero-content {
        flex-direction: column-reverse;
        text-align: center;
    }

    .blogdetails-hero-left,
    .blogdetails-hero-right {
        width: 100%;
    }

    .blogdetails-hero-right {
        text-align: center;
    }

    .blogdetails-hero-title {
        font-size: 40px;
    }

    .blogdetails-hero-description {
        max-width: 100%;
        margin: auto;
    }
}

/* Mobile */

@media (max-width:576px) {

    .blogdetails-hero {
        padding: 60px 0 80px;
    }

    .blogdetails-hero-title {
        font-size: 30px;
    }

    .blogdetails-hero-description {
        font-size: 16px;
    }

    .blogdetails-hero-right img {
        max-width: 280px;
    }

    .blogdetails-hero-wave {
        height: 70px;
    }
}
/*=========================================
BLOG DETAILS SECTION
=========================================*/

.blog-details-section {
    padding: 0 0 80px;
    background: #fff;
}

.blog-details-content {
    width: 100%;
}

.blog-feature-image {
    width: 100%;
    border-radius: 18px;
    margin-bottom: 40px;
    display: block;
}

.blog-content {
    color: #4f5665;
    font-size: 18px;
    line-height: 2;
}

    .blog-content p {
        margin-bottom: 24px;
    }

    .blog-content h2,
    .blog-content h3,
    .blog-content h4 {
        margin: 40px 0 20px;
        color: #1b1b1b;
        font-weight: 700;
    }

    .blog-content img {
        width: 100%;
        border-radius: 15px;
        margin: 30px 0;
    }

.blog-author {
    margin-top: 50px;
    padding-top: 25px;
    border-top: 1px solid #ececec;
    font-size: 18px;
}

    .blog-author strong {
        color: #222;
    }

    .blog-author span {
        color: #5B46F5;
        margin-left: 10px;
    }

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

.blog-sidebar {
    position: sticky;
    top: 120px;
}

.sidebar-title {
    font-size: 30px;
    font-weight: 700;
    margin-bottom: 30px;
    color: #222;
}

/*=========================================
BLOG CARD
=========================================*/

.blog-side-card {
    display: flex;
    gap: 15px;
    align-items: center;
    text-decoration: none;
    padding: 12px;
    margin-bottom: 18px;
    border-radius: 14px;
    background: #fff;
    border: 1px solid #ececec;
    transition: .3s;
}

    .blog-side-card:hover {
        text-decoration: none;
        background: #f8f9ff;
        transform: translateY(-4px);
        box-shadow: 0 15px 35px rgba(0,0,0,.08);
    }

    .blog-side-card img {
        width: 95px;
        height: 85px;
        object-fit: cover;
        border-radius: 10px;
        flex-shrink: 0;
    }

.blog-side-card-content {
    flex: 1;
}

.blog-side-card h6 {
    margin: 0;
    color: #222;
    line-height: 1.5;
    font-size: 16px;
    font-weight: 600;
}



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

@media(max-width:991px) {

    .blog-details-section {
        padding: 60px 0;
    }

    .blog-sidebar {
        position: relative;
        top: 0;
        margin-top: 50px;
    }

    .sidebar-title {
        font-size: 26px;
    }

    .blog-content {
        font-size: 16px;
    }
}
/*----------------------------CONTACT----------------------------*/
.contact-map-box {
    width: 100%;
    height: 260px;
    border-radius: 18px;
    overflow: hidden;
    border: 1px solid #dce7f2;
    box-shadow: 0 15px 35px rgba(0,0,0,0.08);
    background: #fff;
}

.mapouter,
.gmap_canvas {
    width: 100%;
    height: 100%;
}

    .gmap_canvas iframe {
        width: 100%;
        height: 100%;
        border: 0;
    }

.contact-section {
    min-height: 100vh;
    padding: 140px 0;
    background: radial-gradient(circle at top left, rgba(0,140,255,0.18), transparent 30%), radial-gradient(circle at bottom right, rgba(255,136,0,0.14), transparent 30%), linear-gradient(135deg, #071120 0%, #0d1b2a 45%, #091524 100%);
    font-family: 'Poppins', sans-serif;
}

.contact-wrapper {
    max-width: 1180px;
    background: transparent;
    border: none;
    padding: 0;
    box-shadow: none;
}

.contact-info-panel {
    position: relative;
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 35px 30px;
}

.contact-count-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 8px;
    background: linear-gradient(135deg, #ff8a32, #ff6b1a);
    color: #fff;
    font-weight: 800;
    font-size: 15px;
    margin-bottom: 25px;
}

.contact-small-title {
    display: block;
    color: #ff8a32;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .8px;
    margin-bottom: 12px;
}

.contact-main-title {
    font-size: 44px;
    font-weight: 900;
    color: #ffffff;
    line-height: 1.12;
    margin-bottom: 18px;
}

    .contact-main-title span {
        color: #ff8a32;
    }

.contact-main-text {
    font-size: 15px;
    color: rgba(255,255,255,0.72);
    line-height: 1.8;
    max-width: 430px;
    margin-bottom: 35px;
}

.contact-detail-list {
    margin-top: 10px;
}

.contact-detail-item {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 24px;
}

.contact-detail-icon {
    width: 44px;
    height: 44px;
    min-width: 44px;
    border-radius: 50%;
    background: rgba(255,255,255,0.08);
    color: #ff8a32;
    border: 1px solid rgba(255,255,255,0.08);
    backdrop-filter: blur(12px);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
}

.contact-detail-content h6 {
    margin: 0 0 5px;
    font-size: 15px;
    font-weight: 800;
    color: #ffffff;
}

.contact-detail-content p {
    margin: 0;
    font-size: 14px;
    color: rgba(255,255,255,0.72);
    line-height: 1.7;
}

.contact-card-box,
.contact-card-title,
.contact-mini-box {
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
    margin: 0;
}

.contact-social-area {
    margin-top: 35px;
}

    .contact-social-area h6 {
        font-size: 14px;
        font-weight: 700;
        color: rgba(255,255,255,0.72);
        margin-bottom: 14px;
    }

.contact-socials {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
}

    .contact-socials a {
        width: 42px;
        height: 42px;
        border-radius: 50%;
        background: rgba(255,255,255,0.06);
        color: #ffffff;
        border: 1px solid rgba(255,255,255,0.08);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 18px;
        text-decoration: none;
        box-shadow: 0 10px 24px rgba(20, 60, 100, 0.10);
        transition: .3s ease;
    }

        .contact-socials a:hover {
            background: linear-gradient(135deg, #ff8a32, #ff6b1a);
            color: #ffffff;
            transform: translateY(-3px);
        }

.contact-form-panel {
    background: rgba(255,255,255,0.96);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 24px;
    padding: 36px;
    box-shadow: 0 30px 80px rgba(0,0,0,0.35);
}

.contact-form-title,
.contact-form-subtitle {
    display: none;
}

.contact-form-control {
    width: 100%;
    min-height: 52px;
    border: 1.5px solid #dce7f2;
    border-radius: 12px;
    background: #ffffff;
    padding: 13px 16px;
    font-size: 14px;
    color: #111827;
    box-shadow: none;
}

    .contact-form-control::placeholder {
        color: #8796a8;
    }

    .contact-form-control:focus {
        border-color: #ff8a32;
        box-shadow: 0 0 0 4px rgba(255,138,50,0.12);
    }

.contact-textarea {
    min-height: 130px;
    resize: none;
}

.contact-form-label {
    font-size: 14px;
    color: #5f7085;
    font-weight: 600;
    margin-bottom: 8px;
}

.custom-captcha {
    width: 100%;
    display: grid !important;
    grid-template-columns: 1fr 58px;
    gap: 10px;
    color: #191b1e;
}

    .custom-captcha img {
        width: 100% !important;
        max-width: 100% !important;
        height: 80px !important;
        object-fit: fill !important;
        border: 1.5px solid #dce7f2;
        border-radius: 12px;
        background: #fff;
        padding: 6px;
        margin: 0 !important;
    }

    .custom-captcha a {
        width: 58px !important;
        height: 80px !important;
        border-radius: 12px;
        background: linear-gradient(135deg, #ff8a32, #ff6b1a);
        display: flex !important;
        align-items: center;
        justify-content: center;
        margin: 0 !important;
        text-decoration: none !important;
        font-size: 0 !important;
    }

        .custom-captcha a::before {
            content: "\F116";
            font-family: "bootstrap-icons";
            font-size: 24px;
            color: #fff;
        }

    .custom-captcha input[type="text"],
    .custom-captcha input[type="number"] {
        grid-column: 1 / -1;
        width: 100% !important;
        height: 50px;
        border: 1.5px solid #dce7f2;
        border-radius: 12px;
        padding: 0 15px;
        margin: 0 !important;
        font-size: 14px;
    }

    .custom-captcha br,
    .custom-captcha label {
        display: none !important;
    }

.contact-submit-btn {
    height: 54px;
    border: none;
    border-radius: 12px;
    background: linear-gradient(135deg, #ff8a32, #ff6b1a);
    color: #ffffff;
    font-size: 15px;
    font-weight: 800;
    box-shadow: 0 14px 28px rgba(255,138,50,0.25);
}

    .contact-submit-btn:hover {
        background: linear-gradient(135deg, #008cff, #ff6b1a);
    }

.contact-map-box {
    height: 220px;
    border-radius: 18px;
    overflow: hidden;
    border: 1px solid #e3edf7;
    box-shadow: 0 16px 35px rgba(20, 60, 100, 0.10);
}

    .contact-map-box iframe {
        width: 100%;
        height: 100%;
        border: 0;
    }

.alert {
    border-radius: 12px;
    font-size: 14px;
}

.text-danger {
    font-size: 12px;
    margin-top: 5px;
    display: block;
}

@media (max-width: 991px) {
    .contact-section {
        padding: 50px 0;
    }

    .contact-info-panel {
        padding: 85px 5px 25px;
    }

    .contact-form-panel {
        padding: 26px 20px;
    }

    .contact-main-title {
        font-size: 34px;
    }
}

@media (max-width: 575px) {
    .custom-captcha {
        grid-template-columns: 1fr 50px;
    }

        .custom-captcha img,
        .custom-captcha a {
            height: 68px !important;
        }

    .contact-map-box {
        height: 230px;
    }
}

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

.portfolio-page {
    background: radial-gradient(circle at top left, #eef7ff 0, transparent 30%), radial-gradient(circle at bottom right, #fff1e7 0, transparent 28%), var(--pf-bg);
    color: var(--pf-text);
    overflow-x: hidden;
}

.portfolio-hero {
    background-color: var(--bs-black);
    padding: 120px 0 60px;
}

.portfolio-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 18px;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--pf-accent);
}

.portfolio-title {
    margin-bottom: 18px;
    font-size: clamp(2.3rem, 5vw, 4.3rem);
    font-weight: 800;
    line-height: 1.08;
    color: var(--pf-primary);
}

    .portfolio-title .accent {
        color: var(--pf-accent);
    }

.portfolio-subtitle {
    max-width: 620px;
    margin-bottom: 28px;
    font-size: 1.06rem;
    line-height: 1.9;
    color: var(--bs-gray-500)
}

.portfolio-btn-group {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-bottom: 28px;
}

.portfolio-btn-primary,
.portfolio-btn-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 180px;
    height: 52px;
    padding: 0 22px;
    border-radius: 14px;
    font-weight: 700;
    text-decoration: none;
    transition: 0.3s ease;
}

.portfolio-btn-primary {
    color: #fff;
    background: linear-gradient(135deg, var(--pf-primary), var(--pf-secondary));
    box-shadow: 0 12px 28px rgba(16, 36, 63, 0.18);
}

    .portfolio-btn-primary:hover {
        color: #fff;
        transform: translateY(-2px);
    }

.portfolio-btn-outline {
    color: var(--pf-primary);
    background: #fff;
    border: 1px solid #b8c9da;
}

    .portfolio-btn-outline:hover {
        color: var(--pf-primary);
        border-color: var(--pf-primary);
        transform: translateY(-2px);
    }

/*.portfolio-hero-visual {
    position: relative;
    padding: 18px;
    background: #fff;
    border: 1px solid var(--pf-border);
    border-radius: 28px;
    box-shadow: var(--pf-shadow);
}*/

.portfolio-hero-screen {
    display: block;
    width: 100%;
    border-radius: 20px;
}

.portfolio-phone-mock {
    position: absolute;
    left: 5%;
    bottom: -6%;
    width: 26%;
    max-width: 160px;
    background: #fff;
    border: 5px solid #111;
    border-radius: 24px;
    box-shadow: 0 18px 30px rgba(0, 0, 0, 0.16);
}

.portfolio-stats {
    margin-top: 36px;
    padding: 14px 10px;
    background: #fff;
    border: 1px solid var(--pf-border);
    border-radius: 24px;
    box-shadow: var(--pf-shadow);
}

.portfolio-stat-item {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    height: 100%;
    padding: 18px 10px;
}

.portfolio-stat-icon {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 58px;
    font-size: 1.4rem;
    color: #fff;
    background: linear-gradient(135deg, #4a90ff, #3568e6);
    border-radius: 50%;
}

.portfolio-stat-item h3 {
    margin: 0;
    font-size: 2rem;
    font-weight: 800;
    color: var(--pf-primary);
}

.portfolio-stat-item p {
    margin: 0;
    font-size: 0.94rem;
    color: var(--pf-muted);
}

.portfolio-section {
    padding: 70px 0;
}

.portfolio-light-section {
    background: linear-gradient(180deg, #f9fbfe 0, #f2f7fc 100%);
}

.portfolio-small-title {
    display: block;
    margin-bottom: 10px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1px;
    color: var(--pf-accent);
}

.portfolio-section-title {
    margin-bottom: 12px;
    font-size: clamp(1.9rem, 3vw, 2.8rem);
    font-weight: 800;
    text-align: center;
    color: var(--pf-primary);
}

.portfolio-section-subtitle {
    max-width: 760px;
    margin: 0 auto 26px;
    line-height: 1.8;
    text-align: center;
    color: var(--pf-muted);
}

.portfolio-underline {
    width: 90px;
    height: 4px;
    margin: 0 auto 24px;
    background: linear-gradient(135deg, var(--pf-accent), #ffb066);
    border-radius: 10px;
}

.portfolio-filter-wrap {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-bottom: 30px;
}

.portfolio-filter-btn {
    padding: 10px 18px;
    font-weight: 600;
    color: var(--pf-primary);
    background: #fff;
    border: 1px solid var(--pf-border);
    border-radius: 12px;
    transition: 0.25s ease;
}

    .portfolio-filter-btn.active,
    .portfolio-filter-btn:hover {
        color: #fff;
        background: var(--pf-primary);
        border-color: var(--pf-primary);
    }

.portfolio-project-grid {
    row-gap: 24px;
}

.portfolio-project-card,
.portfolio-industry-card,
.portfolio-point-card,
.portfolio-tech-card,
.portfolio-step-card,
.portfolio-review-card,
.industry-box,
.tech-box,
.why-devlok-card {
    height: 100%;
    background: #fff;
    border: 1px solid var(--pf-border);
    box-shadow: var(--pf-shadow);
}

.portfolio-project-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 22px;
    transition: 0.3s ease;
}

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

.portfolio-project-thumb {
    display: block;
    width: 100%;
    height: 240px;
    object-fit: cover;
}

.portfolio-project-body {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: 20px;
}

.portfolio-chip {
    display: inline-block;
    align-self: flex-start;
    margin-bottom: 12px;
    padding: 6px 12px;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--pf-accent);
    background: var(--pf-accent-soft);
    border-radius: 30px;
}

.portfolio-project-title {
    margin-bottom: 10px;
    font-size: 1.3rem;
    font-weight: 800;
    color: var(--pf-primary);
}

.portfolio-project-desc {
    min-height: 84px;
    font-size: 0.95rem;
    line-height: 1.8;
    color: var(--pf-muted);
}

.portfolio-project-link {
    margin-top: auto;
    font-weight: 700;
    color: var(--pf-secondary);
    text-decoration: none;
}

    .portfolio-project-link:hover {
        color: var(--pf-accent);
    }

.portfolio-grid-cta {
    margin-top: 28px;
    text-align: center;
}

.portfolio-industry-card {
    padding: 24px 14px;
    text-align: center;
    border-radius: 20px;
    transition: 0.25s ease;
}

    .portfolio-industry-card:hover {
        transform: translateY(-6px);
    }

.portfolio-industry-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    margin: 0 auto 14px;
    font-size: 1.5rem;
    color: var(--pf-secondary);
    background: #eef6ff;
    border-radius: 18px;
}

.portfolio-industry-card h5 {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: var(--pf-primary);
}

.portfolio-point-card {
    padding: 26px 20px;
    text-align: center;
    border-radius: 20px;
}

.portfolio-point-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 70px;
    height: 70px;
    margin: 0 auto 18px;
    font-size: 1.65rem;
    color: #fff;
    background: linear-gradient(135deg, #55d8ff, #5a8cff);
    border-radius: 50%;
}

.portfolio-point-card h4 {
    margin-bottom: 10px;
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--pf-primary);
}

.portfolio-point-card p {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.8;
    color: var(--pf-muted);
}

.portfolio-review-card {
    position: relative;
    padding: 24px 22px;
    border-radius: 20px;
}

    .portfolio-review-card::after {
        content: "\201D";
        position: absolute;
        top: 8px;
        right: 18px;
        font-family: Georgia, serif;
        font-size: 5rem;
        line-height: 1;
        color: #e7edf5;
    }

.portfolio-review-text {
    position: relative;
    z-index: 1;
    min-height: 146px;
    margin-bottom: 18px;
    line-height: 1.9;
    color: #4d6178;
}

.portfolio-review-user {
    display: flex;
    align-items: center;
    gap: 12px;
}

.portfolio-review-avatar {
    width: 52px;
    height: 52px;
    object-fit: cover;
    border: 3px solid #eef4fb;
    border-radius: 50%;
}

.portfolio-review-user h6 {
    margin: 0;
    font-weight: 800;
    color: var(--pf-primary);
}

.portfolio-review-user p {
    margin: 0;
    font-size: 0.88rem;
    color: var(--pf-muted);
}

.portfolio-stars {
    margin-top: 4px;
    font-size: 0.85rem;
    letter-spacing: 0.08em;
    color: var(--pf-accent);
}

.portfolio-tech-card {
    padding: 18px 10px;
    text-align: center;
    border-radius: 20px;
}

    .portfolio-tech-card i {
        display: block;
        margin-bottom: 10px;
        font-size: 2rem;
        color: var(--pf-secondary);
    }

    .portfolio-tech-card h6 {
        margin: 0;
        font-size: 0.95rem;
        font-weight: 800;
        color: var(--pf-primary);
    }

.portfolio-step-row {
    row-gap: 22px;
}

.portfolio-step-card {
    padding: 24px 20px;
    border-radius: 20px;
}

.portfolio-step-number {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    margin-bottom: 14px;
    font-weight: 800;
    color: #fff;
    background: linear-gradient(135deg, #4a90ff, #3568e6);
    border-radius: 50%;
}

.portfolio-step-card h5 {
    margin-bottom: 8px;
    font-weight: 800;
    color: var(--pf-primary);
}

.portfolio-step-card p {
    margin: 0;
    line-height: 1.8;
    color: var(--pf-muted);
}

.portfolio-cta {
    position: relative;
    overflow: hidden;
    color: #fff;
    background: linear-gradient(135deg, #0f2c57, #153f77);
    border-radius: 28px;
    box-shadow: 0 22px 50px rgba(16, 36, 63, 0.18);
}

    .portfolio-cta::before {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        background: radial-gradient(circle at 15% 25%, rgba(255, 255, 255, 0.1), transparent 24%), radial-gradient(circle at 85% 65%, rgba(244, 124, 32, 0.2), transparent 18%);
    }

.portfolio-cta-inner {
    position: relative;
    z-index: 1;
    padding: 46px 40px;
}

.portfolio-cta h2 {
    margin-bottom: 10px;
    font-size: clamp(2rem, 4vw, 3.3rem);
    font-weight: 800;
}

    .portfolio-cta h2 span {
        color: #ff9d4f;
    }

.portfolio-cta p {
    max-width: 700px;
    margin-bottom: 22px;
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.82);
}

.industry-box,
.tech-box {
    padding: 24px 16px;
    text-align: center;
    border-radius: 16px;
    transition: 0.3s;
}

    .industry-box:hover,
    .tech-box:hover,
    .why-devlok-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 16px 32px rgba(16, 36, 63, 0.08);
    }

    .industry-box i {
        display: block;
        margin-bottom: 12px;
        font-size: 28px;
        color: var(--pf-primary);
    }

    .industry-box h6,
    .tech-box h6 {
        margin: 0;
        font-size: 15px;
        font-weight: 700;
        line-height: 1.5;
        color: var(--pf-primary);
    }

.tech-box {
    padding: 20px 12px;
    border-radius: 16px;
}

.why-devlok-card {
    padding: 28px 18px;
    text-align: center;
    border-radius: 18px;
    transition: 0.3s;
}

.why-devlok-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 62px;
    height: 62px;
    margin: 0 auto 18px;
    border-radius: 16px;
}

    .why-devlok-icon i {
        font-size: 28px;
    }

    .why-devlok-icon.blue {
        color: #3d73ff;
        background: #edf4ff;
    }

    .why-devlok-icon.purple {
        color: #8b5cf6;
        background: #f2ebff;
    }

    .why-devlok-icon.orange {
        color: #f47c20;
        background: #fff2e8;
    }

    .why-devlok-icon.green {
        color: #1fa463;
        background: #eafbf0;
    }

    .why-devlok-icon.red {
        color: #ef4444;
        background: #fff0ed;
    }

    .why-devlok-icon.sky {
        color: #2196f3;
        background: #edf8ff;
    }

.why-devlok-card h5 {
    margin-bottom: 12px;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.5;
    color: var(--pf-primary);
}

.why-devlok-card p {
    margin: 0;
    font-size: 14px;
    line-height: 1.8;
    color: #6b7a90;
}

.portfolio-testimonial-carousel {
    position: relative;
    padding: 10px 48px 54px;
}

    .portfolio-testimonial-carousel .carousel-item {
        transition: transform 0.8s ease-in-out, opacity 0.45s ease-in-out;
    }

.animated-review {
    opacity: 0;
    transform: translateY(24px);
    animation: testimonialFadeUp 0.7s ease forwards;
}

.carousel-item.active .animated-review:nth-child(1),
.carousel-item.active .col-lg-4:nth-child(1) .animated-review {
    animation-delay: 0.05s;
}

.carousel-item.active .col-lg-4:nth-child(2) .animated-review {
    animation-delay: 0.18s;
}

.carousel-item.active .col-lg-4:nth-child(3) .animated-review {
    animation-delay: 0.31s;
}

@keyframes testimonialFadeUp {
    from {
        opacity: 0;
        transform: translateY(24px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.portfolio-review-card {
    min-height: 100%;
    transition: 0.35s ease;
}

    .portfolio-review-card:hover {
        transform: translateY(-8px);
        box-shadow: 0 20px 45px rgba(16, 36, 63, 0.13);
    }

.portfolio-testimonial-indicators {
    bottom: 0;
    margin-bottom: 0;
}

    .portfolio-testimonial-indicators [data-bs-target] {
        width: 12px;
        height: 12px;
        margin: 0 6px;
        background-color: var(--pf-primary);
        border: 0;
        border-radius: 50%;
        opacity: 0.28;
    }

    .portfolio-testimonial-indicators .active {
        width: 32px;
        border-radius: 20px;
        background: linear-gradient(135deg, var(--pf-accent), #ffb066);
        opacity: 1;
    }

.portfolio-testimonial-control {
    width: 42px;
    height: 42px;
    top: 42%;
    opacity: 1;
}

    .portfolio-testimonial-control span {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 42px;
        height: 42px;
        color: #fff;
        background: linear-gradient(135deg, var(--pf-primary), var(--pf-secondary));
        border-radius: 50%;
        box-shadow: 0 10px 22px rgba(16, 36, 63, 0.18);
    }

    .portfolio-testimonial-control:hover span {
        background: linear-gradient(135deg, var(--pf-accent), #ff9d4f);
    }

.carousel-control-prev.portfolio-testimonial-control {
    left: 0;
}

.carousel-control-next.portfolio-testimonial-control {
    right: 0;
}

@media (max-width: 991.98px) {
    .portfolio-testimonial-carousel {
        padding: 10px 0 54px;
    }

    .portfolio-testimonial-control {
        display: none;
    }
}

@media (max-width: 767.98px) {
    .portfolio-testimonial-carousel .col-md-6:not(:first-child) {
        margin-top: 16px;
    }

    .portfolio-review-text {
        min-height: auto;
    }
}

@media (max-width: 1199.98px) {
    .portfolio-project-thumb {
        height: 220px;
    }
}

@media (max-width: 991.98px) {
    .portfolio-hero {
        padding: 105px 0 50px;
    }

    .portfolio-hero-visual {
        padding: 14px;
    }

    .portfolio-phone-mock {
        position: relative;
        left: auto;
        bottom: auto;
        display: block;
        width: 42%;
        max-width: 180px;
        margin: -40px auto 0;
    }

    .portfolio-section {
        padding: 60px 0;
    }

    .portfolio-review-text {
        min-height: auto;
    }

    .portfolio-stat-item {
        justify-content: flex-start;
    }

    .why-devlok-card {
        padding: 24px 16px;
    }
}

@media (max-width: 767.98px) {
    .portfolio-hero {
        padding: 90px 0 40px;
        text-align: center;
    }

    .portfolio-subtitle {
        max-width: 100%;
        font-size: 0.98rem;
        line-height: 1.8;
    }

    .portfolio-btn-group {
        justify-content: center;
    }

    .portfolio-btn-primary,
    .portfolio-btn-outline {
        width: 100%;
        min-width: 100%;
    }

    .portfolio-stats {
        padding: 8px;
    }

    .portfolio-stat-item {
        padding: 16px 10px;
        border-bottom: 1px solid #eef2f7;
    }

        .portfolio-stat-item h3 {
            font-size: 1.5rem;
        }

    .portfolio-title {
        font-size: 2.2rem;
    }

    .portfolio-section {
        padding: 56px 0;
    }

    .portfolio-project-thumb {
        height: 205px;
    }

    .portfolio-project-body {
        padding: 16px;
    }

    .portfolio-project-title {
        font-size: 1.1rem;
    }

    .portfolio-project-desc {
        min-height: auto;
        font-size: 0.92rem;
    }

    .portfolio-section-title {
        font-size: 1.8rem;
    }

    .portfolio-filter-wrap {
        gap: 10px;
    }

/*    .portfolio-filter-btn {
        width: 100%;
    }*/

    .portfolio-review-card,
    .portfolio-point-card,
    .portfolio-step-card,
    .why-devlok-card {
        padding: 20px 16px;
    }

    .industry-box,
    .tech-box {
        padding: 18px 12px;
    }

        .industry-box h6,
        .tech-box h6,
        .why-devlok-card h5 {
            font-size: 14px;
        }

    .why-devlok-card p {
        font-size: 13px;
    }

    .portfolio-cta-inner {
        padding: 34px 22px;
        text-align: center;
    }

    .portfolio-cta p {
        font-size: 0.95rem;
    }
}

@media (max-width: 575.98px) {
    .portfolio-title {
        font-size: 1.9rem;
    }

    .portfolio-section-title {
        font-size: 1.55rem;
    }

    .portfolio-badge,
    .portfolio-small-title {
        font-size: 0.75rem;
    }

    .portfolio-stat-icon {
        width: 50px;
        height: 50px;
        font-size: 1.2rem;
    }

    .portfolio-stat-item p {
        font-size: 0.85rem;
    }

    .portfolio-project-thumb {
        height: 185px;
    }

    .portfolio-hero-screen {
        border-radius: 16px;
    }

    .portfolio-hero-visual,
    .portfolio-project-card,
    .portfolio-cta {
        border-radius: 20px;
    }

    .portfolio-industry-card,
    .portfolio-point-card,
    .portfolio-tech-card,
    .portfolio-step-card,
    .portfolio-review-card,
    .industry-box,
    .tech-box,
    .why-devlok-card {
        border-radius: 16px;
    }

    .portfolio-point-icon {
        width: 60px;
        height: 60px;
        font-size: 1.35rem;
    }

    .why-devlok-icon {
        width: 56px;
        height: 56px;
    }

        .why-devlok-icon i {
            font-size: 24px;
        }

    .portfolio-review-user {
        align-items: flex-start;
    }
}


/*=========================
       AWARDS PAGE
========================= */

.dt-award-hero-section {
    position: relative;
    min-height: 430px;
    padding: 95px 0 115px;
    background-size: cover;
    background-position: center right;
    background-repeat: no-repeat;
    overflow: hidden;
}

.dt-award-hero-overlay {
    position: absolute;
    inset: 0;
    background: rgba(2, 17, 40, 0.45);
    pointer-events: none;
}

.dt-award-hero-content {
    position: relative;
    z-index: 2;
    max-width: 620px;
    padding-top: 100px;
}

    .dt-award-hero-content h1 {
        color: #ffffff;
        font-size: clamp(38px, 4.2vw, 58px);
        font-weight: 800;
        line-height: 1.12;
        margin-bottom: 16px;
        letter-spacing: -0.6px;
    }

    .dt-award-hero-content h5 {
        color: #ff7a1a;
        font-size: 20px;
        font-weight: 800;
        margin-bottom: 24px;
    }

    .dt-award-hero-content p {
        color: rgba(255, 255, 255, 0.92);
        font-size: 16px;
        line-height: 1.72;
        font-weight: 500;
        margin-bottom: 20px;
    }

.dt-award-hero-line {
    width: 44px;
    height: 2px;
    background: #ffffff;
    opacity: 0.9;
    margin: 18px 0 22px;
}

.dt-award-hero-btn {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    min-height: 48px;
    padding: 0 24px;
    border-radius: 4px;
    background: #ff7417;
    color: #ffffff;
    text-decoration: none;
    font-size: 15px;
    font-weight: 800;
    box-shadow: 0 12px 26px rgba(255, 116, 23, 0.28);
    transition: all 0.3s ease;
}

    .dt-award-hero-btn:hover {
        color: #ffffff;
        background: #ff5f00;
        transform: translateY(-2px);
    }

    .dt-award-hero-btn i {
        font-size: 18px;
    }

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

.dt-award-stats-section {
    position: relative;
    z-index: 5;
    margin-top: -54px;
    padding-bottom: 45px;
    background: #ffffff;
}

.dt-award-stats-card {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    align-items: center;
    min-height: 105px;
    background: rgba(255, 255, 255, 0.98);
    border-radius: 0 0 10px 10px;
    box-shadow: 0 15px 35px rgba(16, 36, 63, 0.12);
    border: 1px solid rgba(226, 236, 247, 0.95);
    overflow: hidden;
}

.dt-award-stat-item {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 13px;
    min-height: 90px;
    padding: 14px 12px;
    position: relative;
}

    .dt-award-stat-item:not(:last-child)::after {
        content: "";
        position: absolute;
        right: 0;
        top: 25px;
        width: 1px;
        height: 48px;
        background: #d9e3ef;
    }

    .dt-award-stat-item i {
        color: #0b5bac;
        font-size: 34px;
        line-height: 1;
    }

    .dt-award-stat-item h3 {
        margin: 0;
        color: #0d4f99;
        font-size: 29px;
        line-height: 1;
        font-weight: 900;
    }

    .dt-award-stat-item p {
        margin: 6px 0 0;
        color: #25364d;
        font-size: 12px;
        font-weight: 500;
        white-space: nowrap;
    }
/* ================================
   RECOGNITION SECTION
================================ */

.dt-recognition-section {
    position: relative;
    padding: 55px 0 65px;
    background: #ffffff;
}

.dt-recognition-heading {
    margin-bottom: 28px;
}

    .dt-recognition-heading span {
        display: block;
        color: #ff7417;
        font-size: 16px;
        font-weight: 900;
        letter-spacing: 0.7px;
        margin-bottom: 8px;
    }

    .dt-recognition-heading h2 {
        margin: 0;
        color: #071938;
        font-size: clamp(28px, 3vw, 38px);
        font-weight: 800;
        line-height: 1.25;
    }

        .dt-recognition-heading h2 b {
            color: #ff7417;
            font-weight: 800;
        }

.dt-recognition-card {
    height: 100%;
    min-height: 238px;
    padding: 28px 26px 24px;
    text-align: center;
    background: #ffffff;
    border: 1px solid #dce7f2;
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(16, 36, 63, 0.08);
    transition: all 0.3s ease;
}

    .dt-recognition-card:hover {
        transform: translateY(-6px);
        box-shadow: 0 16px 38px rgba(16, 36, 63, 0.13);
    }

.dt-recognition-icon {
    width: 74px;
    height: 74px;
    margin: 0 auto 18px;
    border-radius: 50%;
    background: #ffffff;
    border: 1px solid #f0d5bf;
    box-shadow: 0 7px 18px rgba(255, 116, 23, 0.18);
    display: flex;
    align-items: center;
    justify-content: center;
}

    .dt-recognition-icon i {
        color: #1668b7;
        font-size: 34px;
        line-height: 1;
    }

.dt-recognition-card h4 {
    min-height: 48px;
    margin: 0;
    color: #071938;
    font-size: 22px;
    font-weight: 800;
    line-height: 1.25;
}

.dt-recognition-line {
    width: 34px;
    height: 2px;
    background: #ff7417;
    margin: 12px auto 13px;
}

.dt-recognition-card p {
    margin: 0;
    color: #37455f;
    font-size: 20px;
    font-weight: 500;
    line-height: 1.62;
}
/*========================================
    FEATURED + TRUST SECTION
========================================*/

.dt-featured-trust-section {
    position: relative;
    padding: 60px 0 80px;
    background: #f8fbff;
}

/*========================================
    FEATURED ON BOX
========================================*/

.dt-featured-on-box {
    background: #ffffff;
    border: 1px solid #dfe8f3;
    border-radius: 14px;
    padding: 18px 28px 22px;
    box-shadow: 0 8px 24px rgba(16, 36, 63, 0.06);
    margin-bottom: 28px;
}

.dt-featured-title {
    text-align: center;
    color: #ff7417;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0.6px;
    margin-bottom: 18px;
    text-transform: uppercase;
}

.dt-featured-logo-row {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 38px;
    padding: 10px 0;
}

    .dt-featured-logo-row img {
        max-height: 88px;
        width: auto;
        max-width: 170px;
        object-fit: contain;
        display: block;
        transition: all 0.3s ease;
        filter: grayscale(0%);
    }

        .dt-featured-logo-row img:hover {
            transform: translateY(-3px);
        }
        .dt-featured-logo-row img[alt="GoodFirms"] {
            max-height: 94px;
        }

        .dt-featured-logo-row img[alt="Clutch"] {
            max-height: 58px;
        }

                .dt-featured-logo-row img[alt="Trusted Vendor"] {
            max-height: 88px;
        }

        .dt-featured-logo-row img[alt="12+ Years of Expertise"] {
            max-height: 86px;
        }

        .dt-featured-logo-row img[alt="Quality Software"] {
            max-height: 88px;
        }

        .dt-featured-logo-row img[alt="Justdial"] {
            max-height: 32px;
        }

        .dt-featured-logo-row img[alt="IndiaMart"] {
            max-height: 82px;
        }

        .dt-featured-logo-row img[alt="Google Reviews"] {
            max-height: 72px;
        }

/*========================================
    TRUST PROOF BOX - REFERENCE MATCH
========================================*/

.dt-trust-proof-box {
    background: #ffffff;
    border: 1px solid #dfe8f3;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 10px 28px rgba(16, 36, 63, 0.08);
}

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

.dt-trust-content {
    height: 100%;
    padding: 34px 38px 28px;
    background: linear-gradient(90deg, #ffffff 0%, #f4f9ff 68%, rgba(244, 249, 255, 0.75) 100%);
    position: relative;
    z-index: 2;
}

.dt-trust-small-title {
    display: inline-block;
    color: #ff7417;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.4px;
    margin-bottom: 8px;
    text-transform: uppercase;
}

.dt-trust-content h2 {
    max-width: 560px;
    color: #071938;
    font-size: clamp(26px, 2.5vw, 36px);
    font-weight: 850;
    line-height: 1.17;
    margin: 0 0 16px;
    letter-spacing: -0.5px;
}

    .dt-trust-content h2 span {
        color: #ff7417;
    }

.dt-trust-content p {
    max-width: 560px;
    color: #334864;
    font-size: 14.5px;
    line-height: 1.7;
    font-weight: 500;
    margin: 0 0 26px;
}

/*========================================
    ICONS ROW
========================================*/

.dt-trust-icons-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    max-width: 520px;
}

.dt-trust-icon-card {
    text-align: center;
}

    .dt-trust-icon-card i {
        display: block;
        color: #075fbd;
        font-size: 30px;
        line-height: 1;
        margin-bottom: 8px;
    }

    .dt-trust-icon-card h5 {
        color: #074b96;
        font-size: 13px;
        font-weight: 800;
        line-height: 1.2;
        margin: 0;
    }

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

.dt-trust-image-box {
    height: 100%;
    min-height: 310px;
    position: relative;
    overflow: hidden;
}

    .dt-trust-image-box::before {
        content: "";
        position: absolute;
        inset: 0 auto 0 0;
        width: 38%;
        z-index: 2;
        background: linear-gradient(90deg, #f4f9ff 0%, rgba(244, 249, 255, 0.75) 35%, rgba(244, 249, 255, 0) 100%);
        pointer-events: none;
    }

    .dt-trust-image-box img {
        width: 100%;
        height: 100%;
        min-height: 310px;
        object-fit: cover;
        object-position: center right;
        display: block;
    }
/*========================================
   Built Something
========================================*/
.dt-awards-cta-section {
    background: #ffffff;
    padding: 0;
}

.dt-awards-cta-box {
    position: relative;
    min-height: 150px;
    padding: 32px 42px 30px 280px;
    background: radial-gradient(circle at 88% 45%, rgba(0, 174, 255, 0.18), transparent 28%), linear-gradient(90deg, #031936 0%, #06356d 55%, #052c5f 100%);
    border-radius: 0;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
}

    .dt-awards-cta-box::before {
        content: "";
        position: absolute;
        inset: 0;
        background-image: radial-gradient(circle, rgba(0, 190, 255, 0.65) 1.4px, transparent 2px), linear-gradient(120deg, rgba(0, 174, 255, 0.18) 1px, transparent 1px);
        background-size: 190px 100px, 140px 90px;
        opacity: 0.35;
        pointer-events: none;
    }

.dt-awards-cta-rocket {
    position: absolute;
    left: 58px;
    bottom: -10px;
    width: 145px;
    z-index: 2;
}

    .dt-awards-cta-rocket img {
        width: 100%;
        display: block;
    }

.dt-awards-cta-content {
    position: relative;
    z-index: 2;
    color: #ffffff;
}

    .dt-awards-cta-content h2 {
        color: #ffffff;
        font-size: 30px;
        font-weight: 800;
        line-height: 1.2;
        margin: 0 0 8px;
    }

    .dt-awards-cta-content p {
        color: rgba(255, 255, 255, 0.9);
        font-size: 17px;
        line-height: 1.5;
        font-weight: 500;
        margin: 0;
    }

.dt-awards-cta-action {
    position: relative;
    z-index: 2;
    flex: 0 0 auto;
}

.dt-awards-cta-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: 48px;
    padding: 0 28px;
    background: #ff7417;
    color: #ffffff;
    border-radius: 5px;
    text-decoration: none;
    font-size: 16px;
    font-weight: 800;
    box-shadow: 0 12px 26px rgba(255, 116, 23, 0.25);
    transition: all 0.3s ease;
}

    .dt-awards-cta-btn:hover {
        background: #ff5f00;
        color: #ffffff;
        transform: translateY(-2px);
    }

    .dt-awards-cta-btn i {
        font-size: 18px;
    }

/* Responsive */
@media (max-width: 991.98px) {
    .dt-awards-cta-box {
        padding: 34px 28px 34px 170px;
        flex-direction: column;
        align-items: flex-start;
        gap: 22px;
    }

    .dt-awards-cta-rocket {
        left: 32px;
        width: 110px;
    }

    .dt-awards-cta-content h2 {
        font-size: 26px;
    }

    .dt-awards-cta-content p {
        font-size: 15px;
    }
}

@media (max-width: 575.98px) {
    .dt-awards-cta-box {
        padding: 110px 20px 28px;
        text-align: center;
        align-items: center;
    }

    .dt-awards-cta-rocket {
        left: 50%;
        transform: translateX(-50%);
        top: 8px;
        bottom: auto;
        width: 88px;
    }

    .dt-awards-cta-content h2 {
        font-size: 22px;
    }

    .dt-awards-cta-content p {
        font-size: 14px;
    }

    .dt-awards-cta-btn {
        width: 100%;
        padding: 0 20px;
    }
}

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

@media (max-width: 1199px) {
    .dt-trust-content {
        padding: 32px 30px 26px;
    }

        .dt-trust-content h2 {
            font-size: 30px;
        }

        .dt-trust-content p {
            font-size: 14px;
        }

    .dt-trust-icons-row {
        gap: 10px;
    }

    .dt-trust-icon-card h5 {
        font-size: 20px;
    }

    .dt-trust-image-box,
    .dt-trust-image-box img {
        min-height: 300px;
    }
}

@media (max-width: 991px) {
    .dt-trust-proof-box {
        border-radius: 14px;
    }

    .dt-trust-content {
        text-align: center;
        padding: 34px 26px 28px;
        background: #ffffff;
    }

        .dt-trust-content h2,
        .dt-trust-content p,
        .dt-trust-icons-row {
            margin-left: auto;
            margin-right: auto;
        }

    .dt-trust-icons-row {
        grid-template-columns: repeat(4, 1fr);
        max-width: 560px;
    }

    .dt-trust-image-box::before {
        display: none;
    }

    .dt-trust-image-box,
    .dt-trust-image-box img {
        min-height: 280px;
    }
}

@media (max-width: 767px) {
    .dt-trust-content h2 {
        font-size: 28px;
    }

    .dt-trust-content p {
        font-size: 20px;
        line-height: 1.65;
    }

    .dt-trust-icons-row {
        grid-template-columns: repeat(2, 1fr);
        gap: 18px;
    }

    .dt-trust-icon-card i {
        font-size: 28px;
    }

    .dt-trust-image-box,
    .dt-trust-image-box img {
        min-height: 250px;
    }
}

@media (max-width: 575px) {
    .dt-trust-content {
        padding: 28px 18px 24px;
    }

        .dt-trust-content h2 {
            font-size: 24px;
        }

    .dt-trust-icons-row {
        grid-template-columns: 1fr 1fr;
    }

    .dt-trust-image-box,
    .dt-trust-image-box img {
        min-height: 220px;
    }
}
/* ================================
   RESPONSIVE
================================ */

@media (max-width: 991.98px) {
    .dt-recognition-section {
        padding: 45px 0 55px;
    }

    .dt-recognition-card {
        min-height: 230px;
    }
}

@media (max-width: 575.98px) {
    .dt-recognition-section {
        padding: 38px 0 45px;
    }

    .dt-recognition-heading {
        margin-bottom: 22px;
    }

    .dt-recognition-card {
        min-height: auto;
        padding: 26px 20px 22px;
    }

        .dt-recognition-card h4 {
            min-height: auto;
            font-size: 16px;
        }

        .dt-recognition-card p {
            font-size: 13.5px;
        }
}
/* ================================
   RESPONSIVE
================================ */

@media (max-width: 1199.98px) {
    .dt-award-hero-section {
        min-height: 400px;
        padding: 85px 0 110px;
        background-position: center right;
    }

    .dt-award-stats-card {
        grid-template-columns: repeat(3, 1fr);
        border-radius: 10px;
    }

    .dt-award-stat-item:not(:last-child)::after {
        display: none;
    }

    .dt-award-stat-item {
        border-bottom: 1px solid #e2eaf4;
    }
}

@media (max-width: 991.98px) {
    .dt-award-hero-section {
        text-align: center;
        padding: 80px 0 105px;
        background-position: center;
    }

    .dt-award-hero-overlay {
        background: rgba(2, 17, 40, 0.68);
    }

    .dt-award-hero-content {
        margin: 0 auto;
        padding-top: 80px;
    }

    .dt-award-hero-line {
        margin-left: auto;
        margin-right: auto;
    }

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

@media (max-width: 575.98px) {
    .dt-award-hero-section {
        min-height: auto;
        padding: 130px 0 95px;
        background-position: 70% center;
    }

    .dt-award-hero-content {
        padding-top: 55px;
    }

        .dt-award-hero-content h1 {
            font-size: 34px;
        }

        .dt-award-hero-content h5 {
            font-size: 17px;
        }

        .dt-award-hero-content p {
            font-size: 14px;
            line-height: 1.65;
        }

    .dt-award-stats-section {
        margin-top: -35px;
    }

    .dt-award-stats-card {
        grid-template-columns: 1fr;
        border-radius: 10px;
    }

    .dt-award-stat-item {
        justify-content: flex-start;
        padding-left: 34px;
    }
}



/* ================================
         CAREER-PAGE
================================ */

.career-hero-section {
    width: 100%;
    background: #010e18;
    overflow: hidden;
}

.career-hero-row {
    min-height: 470px;
}

.career-hero-content {
    padding: 160px 50px 60px 70px;
    max-width: 660px;
}

.career-small-title {
    display: inline-block;
    color: var(--pf-accent);
    font-size: 13px;
    font-weight: 800;
    margin-bottom: 18px;
}

.career-hero-content h1 {
    font-size: 42px;
    line-height: 1.2;
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 22px;
}

    .career-hero-content h1 span {
        color: #004fb6;
    }

.career-hero-content p {
    font-size: 15px;
    line-height: 1.65;
    color: #bfbfbf;
    margin-bottom: 14px;
}

.career-hero-buttons {
    display: flex;
    gap: 22px;
    margin-top: 30px;
    flex-wrap: wrap;
}

.career-btn-primary,
.career-btn-outline {
    min-width: 210px;
    padding: 14px 24px;
    border-radius: 4px;
    text-align: center;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    transition: 0.3s ease;
}

.career-btn-primary {
    background: #004fb6;
    color: #fff;
    border: 2px solid #004fb6;
}

    .career-btn-primary:hover {
        background: #003f92;
        color: #fff;
    }

.career-btn-outline {
    background: #fff;
    color: #004fb6;
    border: 2px solid #004fb6;
}

    .career-btn-outline:hover {
        background: #004fb6;
        color: #fff;
    }

.career-hero-image-box {
    position: relative;
    width: 100%;
    height: 470px;
    overflow: hidden;
    background: #f5faff;
}

    .career-hero-image-box img {
        width: 100%;
/*        height: 100%;*/
        object-fit: cover;
        object-position: center;
    }

    .career-hero-image-box::before {
        content: "";
        position: absolute;
        left: -2px;
        top: 0;
        width: 145px;
        height: 100%;
        background: #010e1896;
        clip-path: polygon(0 0, 58% 0, 100% 100%, 0% 100%);
        z-index: 2;
    }
/* blue slant line under circle */
.career-blue-cut {
    position: absolute;
    left: 108px;
    bottom: -8px;
    width: 18px;
    height: 125px;
    background: #0057c8;
    transform: skewX(-22deg);
    z-index: 3;
}
.career-round-badge {
    position: absolute;
    left: 0px;
    top: 235px;
    width: 180px;
    height: 180px;
    background: #004fb6;
    color: #fff;
    border-radius: 50%;
    border: 6px solid #fff;
    z-index: 4;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    font-weight: 800;
    line-height: 1.25;
    text-align: center;
    box-shadow: 0 8px 20px rgba(0, 55, 140, 0.35);
}

    .career-round-badge i {
        font-size: 25px;
        margin-bottom: 7px;
    }

/* Responsive */
@media (max-width: 991px) {
    .career-hero-content {
        padding: 130px 25px;
        max-width: 100%;
    }

        .career-hero-content h1 {
            font-size: 34px;
        }

    .career-hero-image-box {
        height: 380px;
    }

    .career-round-badge {
        left: 35px;
        top: 190px;
    }
}

@media (max-width: 576px) {
    .career-hero-content h1 {
        font-size: 29px;
    }

    .career-btn-primary,
    .career-btn-outline {
        width: 100%;
    }

    .career-hero-image-box::before {
        display: none;
    }

    .career-blue-cut {
        display: none;
    }

    .career-round-badge {
        width: 125px;
        height: 125px;
        font-size: 12px;
        left: 20px;
        top: 210px;
    }
}

/*------------WHY WITH DEVLOK--------------*/
.career-why-section {
    padding: 38px 0 48px;
    background: #ffffff;
}

.career-why-title {
    text-align: center;
    margin-bottom: 24px;
}

.career-why-title h2 {
    font-size: 30px;
    font-weight: 800;
    color: #111827;
    margin: 0;
}

.career-why-title h2 span {
    color: #0057c8;
}

.career-why-card {
    height: 100%;
    min-height: 220px;
    padding: 28px 22px 24px;
    background: #ffffff;
    border: 1px solid #dfe5ee;
    border-radius: 6px;
    text-align: center;
    transition: all 0.3s ease;
}

.career-why-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 28px rgba(0, 87, 200, 0.10);
    border-color: rgba(0, 87, 200, 0.25);
}

.career-why-icon {
    width: 70px;
    height: 70px;
    margin: 0 auto 18px;
    border-radius: 50%;
    background: #eaf3ff;
    color: #0057c8;
    display: flex;
    align-items: center;
    justify-content: center;
}

.career-why-icon i {
    font-size: 34px;
    line-height: 1;
}

.career-why-card h4 {
    font-size: 16px;
    font-weight: 800;
    color: #111827;
    margin-bottom: 12px;
}

.career-why-card p {
    font-size: 14px;
    line-height: 1.65;
    color: #222b3a;
    margin: 0;
}

/* Responsive */
@media (max-width: 991px) {
    .career-why-title h2 {
        font-size: 26px;
    }

    .career-why-card {
        min-height: 210px;
    }
}

@media (max-width: 576px) {
    .career-why-section {
        padding: 32px 0 38px;
    }

    .career-why-title h2 {
        font-size: 24px;
    }
}


/*------------LIFE AT DEVLOK--------------*/
.career-life-section {
/*    padding: 50px 0 45px;*/
    background: #ffffff;
}

.career-life-img {
    width: 100%;
    border-radius: 8px;
    overflow: hidden;
}

    .career-life-img img {
        width: 100%;
        height: 340px;
        object-fit: cover;
        border-radius: 8px;
        display: block;
    }

.career-life-content {
    padding-left: 18px;
}

    .career-life-content span {
        display: inline-block;
        color: #0057c8;
        font-size: 13px;
        font-weight: 800;
        margin-bottom: 12px;
    }

    .career-life-content h2 {
        font-size: 34px;
        line-height: 1.15;
        font-weight: 800;
        color: #111827;
        margin-bottom: 18px;
    }

        .career-life-content h2 strong {
            color: #0057c8;
            font-weight: 800;
        }

    .career-life-content p {
        font-size: 15px;
        line-height: 1.75;
        color: #222b3a;
        margin-bottom: 13px;
        max-width: 610px;
    }

    .career-life-content h5 {
        font-size: 15px;
        line-height: 1.65;
        font-weight: 800;
        color: #111827;
        margin-top: 8px;
        max-width: 610px;
    }

/* Responsive */
@media (max-width: 576px) {
    .career-life-section {
        padding: 35px 0;
    }

    /* Heading */
    .career-life-content h2 {
        font-size: 20px;
        line-height: 1.4;
    }

    /* Paragraph */
    .career-life-content p {
        font-size: 20px;
        line-height: 1.6;
    }

    /* Sub heading */
    .career-life-content h5 {
        font-size: 20px;
        line-height: 1.5;
    }

    /* Small label text */
    .career-life-content span {
        font-size: 20px;
    }

    /* Image */
    .career-life-img img {
        height: 260px;
    }
}

/*------------DEDICATE TEAM------------7599

*/
.career-culture-section {
    padding: 35px 0 45px;
    background: #ffffff;
}

.career-culture-box {
    background: #f2f8ff;
    border-radius: 6px;
    padding: 34px 40px;
}

.career-culture-content span {
    display: inline-block;
    color: #0057c8;
    font-size: 16px;
    font-weight: 800;
    margin-bottom: 10px;
}

.career-culture-content h2 {
    font-size: 32px;
    line-height: 1.12;
    font-weight: 800;
    color: #111827;
    margin-bottom: 16px;
}

    .career-culture-content h2 strong {
        color: #0057c8;
        font-weight: 800;
    }

.career-culture-content p {
    font-size: 14px;
    line-height: 1.6;
    color: #111827;
    margin: 0;
    max-width: 390px;
}

.career-culture-icons-row {
    height: 100%;
}

.career-culture-item {
    min-height: 150px;
    padding: 10px 14px;
    text-align: center;
    border-left: 1px solid #d9e2ef;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

    .career-culture-item i {
        font-size: 44px;
        color: #0057c8;
        line-height: 1;
        margin-bottom: 18px;
    }

    .career-culture-item h5 {
        font-size: 15px;
        line-height: 1.35;
        font-weight: 800;
        color: #111827;
        margin: 0;
    }

/* Responsive */
@media (max-width: 991px) {
    .career-culture-box {
        padding: 30px 25px;
    }

    .career-culture-content p {
        font-size: 20px;
        max-width: 100%;
        margin-bottom: 20px;
    }

    .career-culture-item {
        border: 1px solid #d9e2ef;
        background: #ffffff;
        border-radius: 6px;
        min-height: 145px;
        margin: 6px;
    }

    .career-culture-icons-row {
        row-gap: 12px;
    }
}

@media (max-width: 576px) {
    .career-culture-content h2 {
        font-size: 37px;
    }

    .career-culture-icons-row {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }

        .career-culture-icons-row .col {
            width: 100%;
        }

    .career-culture-item i {
        font-size: 36px;
    }

    .career-culture-item h5 {
        font-size: 18px;
    }
}

/*====================OPENING-POSITIONS=================*/
.career-openings-section {
    padding: 40px 0 45px;
    background: #ffffff;
}

.career-openings-title {
    text-align: center;
    margin-bottom: 22px;
}

    .career-openings-title h2 {
        font-size: 30px;
        font-weight: 800;
        color: #111827;
        margin: 0;
    }

        .career-openings-title h2 span {
            color: #0057c8;
        }

.career-job-card {
    height: 100%;
    min-height: 265px;
    background: #ffffff;
    border: 1px solid #dfe5ee;
    border-radius: 7px;
    padding: 24px 24px 18px;
    text-align: center;
    transition: all 0.3s ease;
}

    .career-job-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 12px 28px rgba(0, 87, 200, 0.10);
        border-color: rgba(0, 87, 200, 0.25);
    }

.career-job-icon {
    width: 70px;
    height: 70px;
    margin: 0 auto 18px;
    border-radius: 50%;
    background: #eaf3ff;
    color: #0057c8;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .career-job-icon i {
        font-size: 33px;
        line-height: 1;
    }

.career-job-card h4 {
    font-size: 15px;
    line-height: 1.35;
    font-weight: 800;
    color: #111827;
    min-height: 42px;
    margin-bottom: 14px;
}

.career-job-card ul {
    list-style: none;
    padding: 0;
    margin: 0 0 18px;
    text-align: left;
}

    .career-job-card ul li {
        font-size: 15px;
        font-weight: 500;
        color: #374151;
        margin-bottom: 9px;
        display: flex;
        align-items: center;
        gap: 10px;
    }

        .career-job-card ul li i {
            color: #8a96a8;
            font-size: 14px;
        }

.career-job-btn {
    display: block;
    width: 100%;
    background: #0057c8;
    color: #ffffff;
    text-decoration: none;
    padding: 10px 16px;
    border-radius: 4px;
    font-size: 15px;
    font-weight: 800;
    transition: 0.3s ease;
}

    .career-job-btn:hover {
        background: #003f92;
        color: #ffffff;
    }

.career-view-all-btn {
    color: #0057c8;
    font-size: 15px;
    font-weight: 800;
    text-decoration: none;
}

    .career-view-all-btn i {
        margin-left: 6px;
    }

    .career-view-all-btn:hover {
        color: #003f92;
    }

/* Responsive */
@media (max-width: 991px) {
    .career-openings-title h2 {
        font-size: 27px;
    }

    .career-job-card {
        min-height: 255px;
    }
}

@media (max-width: 576px) {
    .career-openings-section {
        padding: 32px 0 38px;
    }

    .career-openings-title h2 {
        font-size: 24px;
    }
    .career-job-card ul li {
        font-size: 20px
    }
}


/*====================Hiring nd BENIFITS=====================*/
.career-extra-section {
    padding: 15px 0 45px;
    background: #ffffff;
}

/* Hiring Process */
.career-process-box {
    background: linear-gradient(90deg, #f0f7ff 0%, #ffffff 100%);
    border-radius: 6px;
    padding: 18px 35px 22px;
    margin-bottom: 0;
}

    .career-process-box h2,
    .career-benefits-box h2 {
        text-align: center;
        font-size: 26px;
        font-weight: 800;
        color: #111827;
        margin: 0 0 12px;
    }

        .career-process-box h2 span,
        .career-benefits-box h2 span,
        .career-solution-content h2 span {
            color: #0057c8;
        }

.career-process-row {
    position: relative;
}

    .career-process-row::before {
        content: "";
        position: absolute;
        top: 36px;
        left: 14%;
        right: 14%;
        border-top: 1px dashed #9bbce8;
        z-index: 1;
    }

.career-process-step {
    position: relative;
    z-index: 2;
    padding: 0 10px;
}

.career-process-icon {
    width: 64px;
    height: 64px;
    background: #0057c8;
    color: #ffffff;
    border-radius: 50%;
    margin: 0 auto 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 6px solid #eaf3ff;
}

    .career-process-icon i {
        font-size: 26px;
    }

.career-process-step h6 {
    font-size: 13px;
    font-weight: 700;
    color: #222b3a;
    margin: 0 0 2px;
}

.career-process-step h4 {
    font-size: 14px;
    font-weight: 800;
    color: #0057c8;
    margin: 0 0 6px;
}

.career-process-step p {
    font-size: 13px;
    line-height: 1.35;
    color: #222b3a;
    margin: 0;
}

/* Benefits */
.career-benefits-box {
    padding-top: 30px;
    margin-top: 6px;
}

.career-benefits-grid {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
}

.career-benefit-item {
    min-height: 92px;
    padding: 10px 8px;
    text-align: center;
    border-right: 1px solid #dfe5ee;
}

    .career-benefit-item:last-child {
        border-right: none;
    }

    .career-benefit-item i {
        display: block;
        font-size: 33px;
        color: #0057c8;
        margin-bottom: 8px;
    }

    .career-benefit-item h5 {
        font-size: 13px;
        line-height: 1.25;
        font-weight: 800;
        color: #111827;
        margin: 0;
    }

/* Solutions */
.career-solutions-box {
    background: linear-gradient(90deg, #f0f7ff 0%, #ffffff 100%);
    border-radius: 6px;
    padding: 20px 24px;
    margin-top: 38px;
}

.career-solution-content h2 {
    font-size: 25px;
    line-height: 1.1;
    font-weight: 800;
    color: #111827;
    margin-bottom: 10px;
}

.career-solution-content p {
    font-size: 13px;
    line-height: 1.4;
    color: #111827;
    margin: 0;
}

.career-solution-card {
    min-height: 118px;
    padding: 18px 8px 14px;
    background: #ffffff;
    border-radius: 8px;
    text-align: center;
    border: 1px solid #edf2f8;
}

    .career-solution-card i {
        display: block;
        font-size: 34px;
        color: #0057c8;
        margin-bottom: 12px;
    }

    .career-solution-card h5 {
        font-size: 13px;
        line-height: 1.25;
        font-weight: 800;
        color: #111827;
        margin: 0;
    }

/* Responsive */
@media (max-width: 991px) {
    .career-process-row::before {
        display: none;
    }

    .career-process-step {
        margin-bottom: 20px;
    }

    .career-benefits-grid {
        grid-template-columns: repeat(4, 1fr);
    }

    .career-benefit-item:nth-child(4) {
        border-right: none;
    }

    .career-solution-content {
        text-align: center;
        margin-bottom: 15px;
    }
}

@media (max-width: 576px) {
    .career-process-box {
        padding: 18px 15px;
    }

        .career-process-box h2,
        .career-benefits-box h2 {
            font-size: 22px;
        }

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

    .career-benefit-item:nth-child(even) {
        border-right: none;
    }

    .career-solution-content h2 {
        font-size: 23px;
    }
}
@media (max-width: 576px) {
    .career-process-box {
        padding: 18px 15px;
    }

        /* Main Heading */
        .career-process-box h2 {
            font-size: 20px;
        }

    /* Step small label (01, 02...) */
    .career-process-step h6 {
        font-size: 20px;
    }

    /* Step title */
    .career-process-step h4 {
        font-size: 20px;
    }

    /* Step description */
    .career-process-step p {
        font-size: 20px;
        line-height: 1.5;
    }
}
@media (max-width: 576px) {

    /* Benefits Heading */
    .career-benefits-box h2 {
        font-size: 20px;
    }

    /* Benefit Icon */
    .career-benefit-item i {
        font-size: 20px;
    }

    /* Benefit Text */
    .career-benefit-item h5 {
        font-size: 20px;
        line-height: 1.4;
    }

    /* Optional spacing fix */
    .career-benefit-item {
        padding: 12px 8px;
    }
}

/*=========================================
CAREER FAQ
=========================================*/

.career-faq {
    padding: 90px 0;
    background: #f8fbff;
}

.career-faq-heading {
    margin-bottom: 55px;
}

.career-faq-subtitle {
    display: inline-block;
    padding: 8px 18px;
    background: #e8f3ff;
    color: #0d6efd;
    border-radius: 30px;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 18px;
}

.career-faq-title {
    font-size: 42px;
    font-weight: 800;
    color: #132238;
    margin-bottom: 15px;
}

.career-faq-description {
    max-width: 700px;
    margin: 0 auto;
    font-size: 17px;
    color: #667085;
    line-height: 1.8;
}

.career-faq-accordion {
    border-radius: 20px;
}

.career-faq-item {
    border: none;
    border-radius: 18px !important;
    overflow: hidden;
    margin-bottom: 18px;
    background: #fff;
    box-shadow: 0 15px 35px rgba(0,0,0,.06);
}

.career-faq-button {
    padding: 24px 30px;
    font-size: 18px;
    font-weight: 700;
    color: #132238;
    background: #fff;
    box-shadow: none !important;
}

    .career-faq-button:not(.collapsed) {
        background: #0d6efd;
        color: #fff;
    }

    .career-faq-button:focus {
        box-shadow: none;
    }

.career-faq-number {
    width: 42px;
    height: 42px;
    min-width: 42px;
    border-radius: 50%;
    background: #edf5ff;
    color: #0d6efd;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 18px;
    font-size: 14px;
    font-weight: 700;
}

.career-faq-button:not(.collapsed) .career-faq-number {
    background: #fff;
    color: #0d6efd;
}

.career-faq-body {
    padding: 25px 30px 30px;
    font-size: 16px;
    line-height: 1.9;
    color: #667085;
    background: #fff;
}

.career-faq-button::after {
    width: 18px;
    height: 18px;
    background-size: 18px;
}

@media(max-width:991px) {

    .career-faq {
        padding: 70px 0;
    }

    .career-faq-title {
        font-size: 34px;
    }
}

@media(max-width:768px) {

    .career-faq {
        padding: 60px 0;
    }

    .career-faq-title {
        font-size: 28px;
    }

    .career-faq-button {
        font-size: 16px;
        padding: 20px;
    }

    .career-faq-number {
        width: 36px;
        height: 36px;
        min-width: 36px;
        margin-right: 12px;
    }

    .career-faq-body {
        padding: 20px;
    }
}

/*=================READY stop GROW=================*/
.career-ready-section {
    background: #ffffff;
}

.career-ready-box {
    position: relative;
    min-height: 150px;
    border-radius: 6px;
    overflow: hidden;
    padding: 28px 45px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: linear-gradient( 90deg, rgba(0, 55, 150, 0.95) 0%, rgba(0, 55, 150, 0.88) 45%, rgba(0, 55, 150, 0.72) 100% );
}

/* Background Image */
.career-ready-bg-image {
    position: absolute;
    inset: 0;
    z-index: 1;
}

    .career-ready-bg-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        opacity: 0.25;
    }

/* Content */
.career-ready-content {
    position: relative;
    z-index: 3;
}

    .career-ready-content h2 {
        font-size: 34px;
        line-height: 1.1;
        font-weight: 800;
        color: #ffffff;
        margin-bottom: 12px;
    }

    .career-ready-content p {
        font-size: 15px;
        line-height: 1.65;
        color: #ffffff;
        margin: 0;
    }

/* Button */
.career-ready-action {
    position: relative;
    z-index: 3;
    margin-right: 220px;
}

.career-ready-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 50px;
    min-width: 260px;
    height: 64px;
    background: #ffffff;
    color: #0057c8;
    border-radius: 4px;
    text-decoration: none;
    font-size: 18px;
    font-weight: 800;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.18);
}

    .career-ready-btn:hover {
        background: #eef6ff;
        color: #003f92;
    }

/* Plane */
.career-paper-plane {
    position: absolute;
    right: 35px;
    top: 35px;
    z-index: 3;
    color: #ffffff;
}

    .career-paper-plane i {
        font-size: 58px;
        opacity: 0.9;
    }

@media (max-width: 991px) {

    .career-ready-box {
        flex-direction: column;
        align-items: flex-start;
        padding: 25px;
    }

    .career-ready-content h2 {
        font-size: 28px;
    }

    .career-ready-content p {
        font-size: 15px;
    }

    .career-ready-action {
        margin-right: 0;
        margin-top: 20px;
    }

    .career-paper-plane {
        right: 20px;
        top: 20px;
    }

        .career-paper-plane i {
            font-size: 45px;
        }
}

@media (max-width: 576px) {

    .career-ready-box {
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: 20px 15px;
    }

    .career-ready-content h2 {
        font-size: 20px;
        line-height: 1.4;
    }

    .career-ready-content p {
        font-size: 14px;
    }

    .career-ready-action {
        margin: 15px 0 0;
        width: 100%;
    }

    .career-ready-btn {
        width: 100%;
        min-width: auto;
        height: 50px;
        font-size: 16px;
        gap: 15px;
    }

    .career-paper-plane {
        position: static;
        margin-top: 15px;
    }

        .career-paper-plane i {
            font-size: 40px;
        }
}


@media (max-width: 576px) {

    /* Section Heading */
    .career-solution-content h2 {
        font-size: 20px;
        line-height: 1.4;
    }

    /* Description text */
    .career-solution-content p {
        font-size: 20px;
        line-height: 1.5;
    }

    /* Card icon */
    .career-solution-card i {
        font-size: 20px;
    }

    /* Card title */
    .career-solution-card h5 {
        font-size: 20px;
        line-height: 1.4;
    }

    /* Optional spacing adjustment */
    .career-solution-card {
        padding: 15px 10px;
    }
}


/*    ============SOFTWARE_DEVELOPMENT===============*/

.software-hero {
    padding: 75px 10px 20px;
    position: relative;
    min-height: 520px;
    color: #fff;
    overflow: hidden;
    background: radial-gradient(circle at 78% 42%, rgba(16, 104, 255, .38) 0%, rgba(5, 34, 85, .55) 30%, rgba(2, 10, 31, .95) 72%), linear-gradient(120deg, #020b20 0%, #031533 48%, #061c48 100%);
}

.software-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(22,132,255,.13) 1px, transparent 1px),
        linear-gradient(90deg, rgba(22,132,255,.13) 1px, transparent 1px);
    background-size: 72px 72px;
    opacity: .25;
}

.software-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 88% 20%, rgba(22,132,255,.35), transparent 22%),
        radial-gradient(circle at 58% 68%, rgba(22,132,255,.18), transparent 25%);
    pointer-events: none;
}

.software-hero .container {
    position: relative;
    z-index: 2;
}

.software-hero-row {
    min-height: 520px;
}

.software-hero-content {
    padding: 92px 0 55px;
}

.hero-subtitle {
    display: inline-block;
    margin-bottom: 20px;
    color: white;
    font-size: 18px;
    font-weight: 800;
    letter-spacing: 1.4px;
}

.software-hero h1 {
    margin-bottom: 22px;
    color: #fff;
    font-size: 42px;
    line-height: 1.14;
    font-weight: 800;
}

.software-hero h1 span {
    color: #00aaff;
}

.software-hero p {
    max-width: 465px;
    margin-bottom: 30px;
    color: #d7e6ff;
    font-size: 15px;
    line-height: 1.8;
}

.hero-buttons {
    display: flex;
    align-items: center;
    gap: 24px;
    margin-bottom: 48px;
}

.btn-primary-custom,
.btn-outline-custom {
    height: 52px;
    padding: 0 29px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    border-radius: 7px;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    transition: .3s ease;
}

.btn-primary-custom {
    background: #087bff;
    color: #fff;
    box-shadow: 0 0 25px rgba(8, 123, 255, .45);
}

.btn-primary-custom:hover {
    background: #006ee8;
    color: #fff;
}

.btn-outline-custom {
    color: #fff;
    border: 1px solid rgba(255,255,255,.65);
    background: rgba(255,255,255,.03);
}

.btn-outline-custom:hover {
    background: #fff;
    color: #06152d;
}

.hero-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    max-width: 600px;
}

.stat-box {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-right: 22px;
    margin-right: 20px;
    border-right: 1px solid rgba(255,255,255,.14);
}

.stat-box:last-child {
    border-right: 0;
    margin-right: 0;
}

.stat-box i {
    color: #00aaff;
    font-size: 24px;
}

.stat-box h4 {
    margin: 0;
    color: #fff;
    font-size: 23px;
    font-weight: 800;
}

.stat-box p {
    margin: 2px 0 0;
    font-size: 11px;
    line-height: 1.3;
    color: #d7e6ff;
}

.software-hero-visual {
    position: relative;
    height: 520px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.software-hero-visual img {
    position: relative;
    z-index: 2;
    width: 570px;
    max-width: 100%;
    filter: drop-shadow(0 35px 45px rgba(0,0,0,.55));
}

.dashboard-card {
    position: absolute;
    z-index: 4;
    background: rgba(9, 28, 65, .78);
    border: 1px solid rgba(89, 157, 255, .35);
    border-radius: 14px;
    box-shadow: 0 20px 45px rgba(0,0,0,.35);
    backdrop-filter: blur(14px);
}

.system-card {
    top: 65px;
    right: 0;
    width: 285px;
    padding: 18px;
}

.card-title {
    margin-bottom: 14px;
    color: #dceaff;
    font-size: 12px;
    font-weight: 700;
}

.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 16px;
}

.dashboard-grid div {
    background: rgba(255,255,255,.05);
    border-radius: 8px;
    padding: 10px 8px;
}

.dashboard-grid span {
    display: block;
    color: #9fb7d9;
    font-size: 10px;
}

.dashboard-grid strong {
    color: #23b7ff;
    font-size: 15px;
}

.mini-chart {
    display: flex;
    align-items: end;
    gap: 8px;
    height: 65px;
}

.mini-chart span {
    width: 18px;
    border-radius: 4px 4px 0 0;
    background: linear-gradient(180deg, #21c3ff, #087bff);
}

.mini-chart span:nth-child(1) { height: 28px; }
.mini-chart span:nth-child(2) { height: 45px; }
.mini-chart span:nth-child(3) { height: 35px; }
.mini-chart span:nth-child(4) { height: 58px; }
.mini-chart span:nth-child(5) { height: 50px; }

.performance-card {
    left: 25px;
    top: 210px;
    width: 150px;
    padding: 18px;
}

.security-card {
    left: 90px;
    bottom: 105px;
    width: 160px;
    padding: 18px;
}

.performance-card small,
.security-card small {
    display: block;
    color: #dceaff;
    font-size: 12px;
    font-weight: 700;
    margin-bottom: 10px;
}

.performance-card strong,
.security-card strong {
    width: 58px;
    height: 58px;
    border: 5px solid #13baff;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 17px;
    margin-right: 8px;
}

.performance-card span,
.security-card span {
    color: #a9c3e8;
    font-size: 11px;
}

.floating-icon {
    position: absolute;
    z-index: 5;
    width: 76px;
    height: 76px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 800;
    font-size: 22px;
    box-shadow: 0 20px 35px rgba(0,0,0,.32);
}

.icon-dotnet {
    top: 48px;
    left: 255px;
    background: linear-gradient(135deg, #7c3cff, #4a1fb8);
}

.icon-csharp {
    right: 28px;
    top: 205px;
    background: rgba(255,255,255,.92);
    color: #6935d3;
}

.icon-azure {
    right: 25px;
    bottom: 92px;
    background: #fff;
    color: #1684ff;
}

.icon-sql {
    right: 135px;
    bottom: 42px;
    background: #fff;
    color: #d32f2f;
    font-size: 17px;
}

@media (max-width: 991px) {
    .software-hero,
    .software-hero-row {
        min-height: auto;
    }

    .software-hero-content {
        padding: 80px 0 35px;
        text-align: center;
    }

    .software-hero p {
        margin-left: auto;
        margin-right: auto;
    }

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

    .hero-stats {
        margin: auto;
        grid-template-columns: repeat(2, 1fr);
        row-gap: 25px;
    }

    .stat-box {
        border-right: 0;
        justify-content: center;
        margin-right: 0;
        padding-right: 0;
    }

    .software-hero-visual {
        height: 450px;
    }

    .system-card,
    .performance-card,
    .security-card,
    .floating-icon {
        transform: scale(.85);
    }
}

@media (max-width: 575px) {
    .software-hero h1 {
        font-size: 32px;
    }

    .hero-buttons {
        flex-direction: column;
        gap: 15px;
    }

    .btn-primary-custom,
    .btn-outline-custom {
        width: 100%;
    }

    .hero-stats {
        grid-template-columns: 1fr;
    }

    .software-hero-visual {
        height: auto;
        padding: 30px 0 70px;
    }

    .dashboard-card,
    .floating-icon {
        display: none;
    }
}
/*============SuccessStory=============*/
.case-details-hero {
    padding: 130px 0 50px;
    background: radial-gradient(circle at top right, rgba(255, 153, 0, 0.22), transparent 35%), linear-gradient(135deg, #07111f 0%, #10213a 50%, #06101d 100%);
    position: relative;
    overflow: hidden;
}

.case-hero-card {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 28px;
    padding: 38px;
    backdrop-filter: blur(14px);
    box-shadow: 0 25px 70px rgba(0, 0, 0, 0.25);
}

.case-breadcrumb {
    display: inline-block;
    padding: 8px 18px;
    border-radius: 50px;
    background: rgba(255, 171, 64, 0.14);
    color: #ffbd63;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 18px;
}

.case-hero-card h1 {
    max-width: 900px;
    color: #ffffff;
    font-size: 44px;
    line-height: 1.2;
    font-weight: 800;
    margin-bottom: 22px;
}

.case-meta-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    flex-wrap: wrap;
    margin-bottom: 30px;
}

.case-title-badge,
.case-date {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.1);
    padding: 12px 18px;
    border-radius: 14px;
    font-size: 15px;
    font-weight: 600;
}

    .case-date i {
        margin-right: 8px;
        color: #ffb347;
    }

.case-hero-img {
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 22px 55px rgba(0, 0, 0, 0.35);
}

    .case-hero-img img {
        width: 100%;
        height: 460px;
        object-fit: cover;
        display: block;
        transition: transform 0.5s ease;
    }

    .case-hero-img:hover img {
        transform: scale(1.04);
    }

.case-read-section {
    padding: 70px 0;
    background: #f5f7fb;
}

.case-content-card {
    background: #ffffff;
    border-radius: 26px;
    padding: 42px;
    box-shadow: 0 18px 50px rgba(15, 23, 42, 0.08);
    border: 1px solid #eef1f6;
}

.case-author h4 {
    font-size: 22px;
    font-weight: 700;
    color: #111827;
    margin-bottom: 18px;
}

.case-tags {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 35px;
}

    .case-tags span {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 10px 18px;
        border-radius: 50px;
        background: #fff4e6;
        color: #c76b00;
        font-weight: 600;
        font-size: 14px;
    }

.read_content h4 {
    font-size: 28px;
    font-weight: 800;
    color: #111827;
    margin-bottom: 18px;
    position: relative;
}

    .read_content h4::after {
        content: "";
        width: 65px;
        height: 4px;
        background: linear-gradient(90deg, #ff8a00, #ffc107);
        display: block;
        border-radius: 20px;
        margin-top: 12px;
    }

.story-description {
    color: #4b5563;
    font-size: 16px;
    line-height: 1.85;
}

    .story-description p {
        margin-bottom: 18px;
    }

.related-story-section {
    padding: 70px 0;
    background: #ffffff;
}

.section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 35px;
    flex-wrap: wrap;
}

.section-subtitle {
    color: #ff8a00;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 13px;
    letter-spacing: 1px;
}

.section-head h3 {
    font-size: 34px;
    font-weight: 800;
    color: #111827;
    margin: 6px 0 0;
}

.view-all-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 24px;
    border-radius: 50px;
    background: linear-gradient(135deg, #ff8a00, #ffb703);
    color: #ffffff;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 10px 24px rgba(255, 138, 0, 0.28);
    transition: all 0.3s ease;
}

    .view-all-btn:hover {
        color: #ffffff;
        transform: translateY(-3px);
        box-shadow: 0 14px 34px rgba(255, 138, 0, 0.38);
        text-decoration: none;
    }

.related-story-card {
    display: block;
    background: #ffffff;
    border-radius: 22px;
    overflow: hidden;
    text-decoration: none;
    border: 1px solid #eef1f6;
    box-shadow: 0 16px 45px rgba(15, 23, 42, 0.08);
    transition: all 0.35s ease;
    height: 100%;
}

    .related-story-card:hover {
        transform: translateY(-8px);
        box-shadow: 0 24px 60px rgba(15, 23, 42, 0.15);
        text-decoration: none;
    }

.related-img-box {
    height: 285px;
    overflow: hidden;
}

    .related-img-box img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        transition: transform 0.45s ease;
    }

.related-story-card:hover img {
    transform: scale(1.07);
}

.related-card-body {
    padding: 24px;
}

    .related-card-body span {
        display: inline-block;
        color: #ff8a00;
        font-weight: 700;
        font-size: 13px;
        margin-bottom: 10px;
        text-transform: uppercase;
    }

    .related-card-body h3 {
        font-size: 22px;
        font-weight: 800;
        color: #111827;
        line-height: 1.35;
        margin-bottom: 10px;
    }

    .related-card-body p {
        color: #6b7280;
        font-size: 15px;
        margin: 0;
    }

@media (max-width: 768px) {
    .case-details-hero {
        padding: 45px 0 35px;
    }

    .case-hero-card {
        margin-top: 80px;
        padding: 24px;
        border-radius: 22px;
    }

        .case-hero-card h1 {
            font-size: 30px;
        }

    .case-hero-img img {
        height: 280px;
    }

    .case-content-card {
        padding: 26px;
    }

    .section-head h3 {
        font-size: 28px;
    }

    .related-img-box {
        height: 230px;
    }
}

@media (max-width: 576px) {
    .case-hero-card h1 {
        font-size: 26px;
    }

    .case-meta-row {
        align-items: stretch;
    }

    .case-title-badge,
    .case-date {
        width: 100%;
    }

    .read_content h4 {
        font-size: 24px;
    }
}


/*====================Solution=================*/
.solutions-section {
    padding: 58px 0 64px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
}

.section-title {
    margin-bottom: 38px;
}

    .section-title span {
        display: block;
        color: #087bff;
        font-size: 12px;
        font-weight: 800;
        letter-spacing: .9px;
        text-transform: uppercase;
        margin-bottom: 10px;
    }

    .section-title h2 {
        color: #061b45;
        font-size: 32px;
        line-height: 1.25;
        font-weight: 800;
        margin: 0;
    }

.title-line {
    position: relative;
    width: 58px;
    height: 2px;
    background: #d7e7ff;
    margin: 14px auto 0;
}

    .title-line::before {
        content: "";
        position: absolute;
        width: 14px;
        height: 4px;
        background: #087bff;
        border-radius: 20px;
        top: -1px;
        left: 50%;
        transform: translateX(-50%);
    }

.solution-card {
    min-height: 170px;
    height: 100%;
    background: #ffffff;
    border: 1px solid #e5edf7;
    border-radius: 8px;
    padding: 34px 18px;
    display: flex;
    align-items: flex-start;
    gap: 22px;
    box-shadow: 0 10px 28px rgba(6, 27, 69, .06);
    transition: .3s ease;
}

    .solution-card:hover {
        transform: translateY(-6px);
        box-shadow: 0 18px 42px rgba(6, 27, 69, .11);
    }

.solution-icon {
    width: 58px;
    height: 58px;
    min-width: 58px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .solution-icon i {
        font-size: 27px;
    }

    .solution-icon.blue {
        background: #edf4ff;
        color: #0b63d8;
    }

    .solution-icon.green {
        background: #ecfaed;
        color: #48b84d;
    }

    .solution-icon.orange {
        background: #fff3e8;
        color: #ff8a1d;
    }

    .solution-icon.purple {
        background: #f3edff;
        color: #7139d8;
    }

    .solution-icon.cloud {
        background: #edf4ff;
        color: #276bdc;
    }

    .solution-icon.monitor {
        background: #edf4ff;
        color: #0b63d8;
    }

    .solution-icon.sky {
        background: #eaf9ff;
        color: #16a7dc;
    }

    .solution-icon.pink {
        background: #fff0f5;
        color: #e91e63;
    }

.solution-card h5 {
    color: #061b45;
    font-size: 16px;
    line-height: 1.35;
    font-weight: 800;
    margin: 2px 0 14px;
}

.solution-card p {
    color: #41516a;
    font-size: 13px;
    line-height: 1.8;
    margin: 0;
}

@media (max-width: 991px) {
    .section-title h2 {
        font-size: 28px;
    }

    .solution-card {
        min-height: 160px;
    }
}

@media (max-width: 575px) {
    .solutions-section {
        padding: 45px 0;
    }

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

    .solution-card {
        padding: 26px 22px;
        gap: 16px;
    }
}


/*============OUR-DEVELOPMENT-PROCESS==============*/
.dev-process-section {
    background: #f8fbff;
    padding: 55px 0 60px;
}

.process-title span {
    color: #0057e7;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .7px;
}

.process-title h2 {
    margin-top: 10px;
    font-size: 38px;
    font-weight: 800;
    color: #11131c;
}

.process-wrapper {
    position: relative;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 28px;
    margin-top: 42px;
}

.process-line {
    position: absolute;
    top: 34px;
    left: 25px;
    right: 25px;
    border-top: 2px dotted #9db7e8;
    z-index: 0;
}

.process-item {
    position: relative;
    z-index: 1;
    text-align: center;
}

.process-icon {
    width: 68px;
    height: 68px;
    margin: 0 auto 20px;
    background: #0057d9;
    color: #fff;
    border-radius: 50%;
    border: 4px solid #e9f1ff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    box-shadow: 0 8px 20px rgba(0, 87, 217, .25);
}

.process-item h6 {
    color: #0057d9;
    font-size: 15px;
    font-weight: 800;
    margin-bottom: 13px;
}

.process-item h4 {
    color: #0057d9;
    font-size: 18px;
    line-height: 1.25;
    font-weight: 800;
    margin-bottom: 18px;
}

.process-item p {
    color: #111827;
    font-size: 13px;
    line-height: 1.8;
    max-width: 150px;
    margin: 0 auto;
}

@media (max-width: 991px) {
    .process-wrapper {
        grid-template-columns: repeat(3, 1fr);
        row-gap: 45px;
    }

    .process-line {
        display: none;
    }
}

@media (max-width: 575px) {
    .process-title h2 {
        font-size: 30px;
    }


    .process-item p {
        max-width: 280px;
    }
}

.success-stories-section {
    padding: 50px 0 65px;
    background: linear-gradient(180deg, #f8fbff 0%, #ffffff 100%);
    overflow: hidden;
}

.Su-title {
    margin-bottom: 32px;
}

    .success-title span {
        color: #087bff;
        font-size: 12px;
        font-weight: 800;
        letter-spacing: .8px;
        text-transform: uppercase;
    }

    .success-title h2 {
        color: #061b45;
        font-size: 32px;
        font-weight: 800;
        margin: 8px 0 0;
    }

.success-title-line {
    position: relative;
    width: 58px;
    height: 2px;
    background: #d7e7ff;
    margin: 12px auto 0;
}

    .success-title-line::before {
        content: "";
        position: absolute;
        width: 14px;
        height: 4px;
        background: #087bff;
        border-radius: 20px;
        top: -1px;
        left: 50%;
        transform: translateX(-50%);
    }

.success-carousel {
    position: relative;
    padding-bottom: 42px;
}

.success-card {
    height: 100%;
    background: #fff;
    border: 1px solid #e3ebf6;
    border-radius: 7px;
    overflow: hidden;
    box-shadow: 0 10px 28px rgba(6, 27, 69, .08);
    transition: .3s ease;
}

    .success-card:hover {
        transform: translateY(-6px);
        box-shadow: 0 18px 42px rgba(6, 27, 69, .13);
    }

.success-img {
    position: relative;
    height: 175px;
    overflow: hidden;
}

    .success-img img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.success-tag {
    position: absolute;
    left: 17px;
    bottom: 12px;
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    padding: 5px 12px;
    border-radius: 5px;
}

.tag-orange {
    background: #ff7a00;
}

.tag-green {
    background: #37b34a;
}

.tag-blue {
    background: #1d7fff;
}

.tag-purple {
    background: #6d39d8;
}

.success-body {
    padding: 22px 20px 20px;
}

    .success-body h5 {
        color: #061b45;
        font-size: 17px;
        line-height: 1.35;
        font-weight: 800;
        margin-bottom: 13px;
    }

    .success-body p {
        color: #41516a;
        font-size: 13px;
        line-height: 1.8;
        margin-bottom: 19px;
    }

    .success-body a {
        height: 38px;
        padding: 0 16px;
        display: inline-flex;
        align-items: center;
        gap: 12px;
        border: 1px solid #a8c5ee;
        border-radius: 5px;
        color: #087bff;
        background: #fff;
        font-size: 13px;
        font-weight: 800;
        text-decoration: none;
    }

        .success-body a:hover {
            background: #087bff;
            color: #fff;
        }

.success-arrow {
    position: absolute;
    top: 42%;
    width: 38px;
    height: 38px;
    opacity: 1;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 8px 22px rgba(6, 27, 69, .14);
}

.success-prev {
    left: -48px;
}

.success-next {
    right: -48px;
}

.success-arrow i {
    color: #087bff;
    font-size: 18px;
}

.success-dots {
    position: absolute;
    bottom: 0;
    margin: 0;
}

    .success-dots button {
        width: 7px !important;
        height: 7px !important;
        border-radius: 50%;
        background: #c8d6ea !important;
        border: 0 !important;
        opacity: 1 !important;
    }

        .success-dots button.active {
            width: 18px !important;
            border-radius: 20px;
            background: #087bff !important;
        }

@media (max-width: 1199px) {
    .success-prev {
        left: -18px;
    }

    .success-next {
        right: -18px;
    }
}

@media (max-width: 991px) {
    .success-arrow {
        display: none;
    }

    .success-title h2 {
        font-size: 27px;
    }
}

@media (max-width: 575px) {
    .success-title h2 {
        font-size: 24px;
    }

    .success-img {
        height: 190px;
    }
}

.tech-stack-section {
    position: relative;
    padding: 70px 0 75px;
    background: linear-gradient(180deg, #f8fbff 0%, #ffffff 55%, #f1f7ff 100%);
    overflow: hidden;
}

    .tech-stack-section::before {
        content: "";
        position: absolute;
        left: 35px;
        top: 150px;
        width: 90px;
        height: 90px;
        background-image: radial-gradient(#c8dcff 3px, transparent 3px);
        background-size: 18px 18px;
        opacity: 0.8;
    }

    .tech-stack-section::after {
        content: "";
        position: absolute;
        right: 35px;
        bottom: 170px;
        width: 90px;
        height: 90px;
        background-image: radial-gradient(#c8dcff 3px, transparent 3px);
        background-size: 18px 18px;
        opacity: 0.8;
    }

.tech-stack-heading {
    text-align: center;
    margin-bottom: 45px;
    position: relative;
    z-index: 2;
}

    .tech-stack-heading span {
        display: inline-block;
        color: #0057c8;
        font-size: 15px;
        letter-spacing: 4px;
        font-weight: 800;
        margin-bottom: 18px;
        position: relative;
    }

        .tech-stack-heading span::before,
        .tech-stack-heading span::after {
            content: "";
            position: absolute;
            top: 50%;
            width: 48px;
            height: 1px;
            background: #b8cff5;
        }

        .tech-stack-heading span::before {
            right: 100%;
            margin-right: 22px;
        }

        .tech-stack-heading span::after {
            left: 100%;
            margin-left: 22px;
        }

    .tech-stack-heading h2 {
        font-size: 48px;
        line-height: 1.15;
        font-weight: 900;
        color: #071b3a;
        margin-bottom: 18px;
    }

        .tech-stack-heading h2::after {
            content: "";
            display: block;
            width: 78px;
            height: 4px;
            background: #0057c8;
            border-radius: 50px;
            margin: 18px auto 0;
        }

    .tech-stack-heading p {
        max-width: 720px;
        margin: 0 auto;
        font-size: 18px;
        line-height: 1.7;
        color: #3d4656;
    }

.tech-stack-card {
    position: relative;
    z-index: 2;
    height: 100%;
    min-height: 275px;
    background: #ffffff;
    border: 1px solid #d8e5f7;
    border-radius: 14px;
    padding: 32px 22px 26px;
    text-align: center;
    box-shadow: 0 12px 30px rgba(0, 55, 140, 0.04);
    transition: 0.3s ease;
}

    .tech-stack-card:hover {
        transform: translateY(-8px);
        box-shadow: 0 18px 40px rgba(0, 87, 200, 0.12);
        border-color: rgba(0, 87, 200, 0.35);
    }

.tech-stack-icon {
    width: 90px;
    height: 90px;
    margin: 0 auto 22px;
    border-radius: 50%;
    background: #f1f5ff;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .tech-stack-icon img {
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
    }

.tech-stack-card h4 {
    font-size: 22px;
    font-weight: 850;
    color: #071b3a;
    margin-bottom: 10px;
}

.tech-stack-card > span {
    display: block;
    width: 34px;
    height: 4px;
    background: #0057c8;
    border-radius: 50px;
    margin: 0 auto 16px;
}

.tech-stack-card p {
    font-size: 15px;
    line-height: 1.6;
    color: #3d4656;
    margin: 0;
}

.tech-stack-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 22px;
    min-width: 340px;
    height: 62px;
    background: #0057c8;
    color: #ffffff;
    border-radius: 10px;
    text-decoration: none;
    font-size: 18px;
    font-weight: 800;
    box-shadow: 0 12px 28px rgba(0, 87, 200, 0.28);
    transition: 0.3s ease;
}

    .tech-stack-btn:hover {
        background: #003f92;
        color: #ffffff;
        transform: translateY(-3px);
    }

    .tech-stack-btn i {
        font-size: 22px;
    }

/* Responsive */
@media (max-width: 1199px) {
    .tech-stack-heading h2 {
        font-size: 40px;
    }

    .tech-stack-card {
        min-height: 255px;
    }
}

@media (max-width: 767px) {
    .tech-stack-section {
        padding: 50px 0 55px;
    }

    .tech-stack-heading h2 {
        font-size: 32px;
    }

    .tech-stack-heading p {
        font-size: 15px;
    }

    .tech-stack-heading span {
        font-size: 13px;
        letter-spacing: 2px;
    }

        .tech-stack-heading span::before,
        .tech-stack-heading span::after {
            display: none;
        }

    .tech-stack-btn {
        min-width: 100%;
        height: 58px;
        font-size: 16px;
    }
}



.service-cta-box {
    position: relative;
    min-height: 190px;
    overflow: hidden;
    background: #003c9e;
}

.service-cta-bg {
    position: absolute;
    inset: 0;
    z-index: 1;
}

    .service-cta-bg img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.service-cta-box::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    background: linear-gradient( 90deg, rgba(0, 27, 90, 0.98) 0%, rgba(0, 47, 140, 0.88) 45%, rgba(0, 47, 140, 0.28) 100% );
}

.service-cta-content {
    position: relative;
    z-index: 3;
    padding: 38px 0 32px 60px;
}

    .service-cta-content h2 {
        font-size: 34px;
        font-weight: 800;
        color: #ffffff;
        margin: 0;
        line-height: 1.15;
    }

    .service-cta-content span {
        display: block;
        width: 45px;
        height: 3px;
        background: #ffffff;
        margin: 10px 0 10px;
    }

    .service-cta-content p {
        font-size: 16px;
        line-height: 1.5;
        color: #ffffff;
        margin-bottom: 20px;
    }

.service-cta-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    min-width: 180px;
    height: 48px;
    background: #ffffff;
    color: #0057c8;
    border-radius: 4px;
    text-decoration: none;
    font-size: 15px;
    font-weight: 800;
    transition: 0.3s ease;
}

    .service-cta-btn:hover {
        background: #eef6ff;
        color: #003f92;
    }

@media (max-width: 767px) {
    .service-cta-box {
        min-height: 250px;
    }

    .service-cta-content {
        padding: 32px 25px;
    }

        .service-cta-content h2 {
            font-size: 26px;
        }

        .service-cta-content p {
            font-size: 14px;
        }
}



/*=====================CUSTOM WEBDEVELOPMENT====================*/
.custom-web-hero {
    padding: 130px 0 45px;
    background: radial-gradient(circle at 78% 42%, rgba(16, 104, 255, .38) 0%, rgba(5, 34, 85, .55) 30%, rgba(2, 10, 31, .95) 72%), linear-gradient(120deg, #020b20 0%, #031533 48%, #061c48 100%);
    overflow: hidden;
}

.hero-small-title {
    display: inline-block;
    color: #ff6500;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: .5px;
    margin-bottom: 18px;
}

.custom-web-hero h1 {
    font-size: 47px;
    line-height: 1.18;
    font-weight: 900;
    color: white;
    margin-bottom: 20px;
}

    .custom-web-hero h1 span {
        color: #ff6500;
    }

.custom-web-hero p {
    font-size: 17px;
    line-height: 1.7;
    color: #d7e6ff;
    max-width: 520px;
    margin-bottom: 28px;
}

.hero-btns {
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
    margin-bottom: 42px;
}

.hero-primary-btn {
    background: #ff6500;
    color: #fff;
    padding: 15px 26px;
    border-radius: 5px;
    font-weight: 800;
    border: 1px solid #ff6500;
    box-shadow: 0 10px 22px rgba(255, 101, 0, 0.22);
}

    .hero-primary-btn:hover {
        background: #e95b00;
        color: #fff;
    }

.hero-outline-btn {
    background: #fff;
    color: #071b3a;
    padding: 15px 28px;
    border-radius: 5px;
    font-weight: 800;
    border: 1px solid #ff8b45;
}

    .hero-outline-btn:hover {
        background: #ff6500;
        color: #fff;
    }

.hero-btns i {
    margin-left: 10px;
}

.hero-stats {
/*    display: flex;*/
    align-items: center;
    gap: 28px;
/*    flex-wrap: wrap;*/
}

.hero-stat-item {
    display: flex;
    align-items: center;
    gap: 10px;
}

    .hero-stat-item > i {
        width: 34px;
        height: 34px;
        border: 2px solid #ff6500;
        color: #ff6500;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .hero-stat-item h5 {
        margin: 0;
        font-size: 20px;
        font-weight: 900;
        color: white;
    }

    .hero-stat-item p {
        margin: 0;
        font-size: 12px;
        color: #5f6570;
        line-height: 1.3;
    }

/* Right Image Area */
.hero-device-area {
    position: relative;
    min-height: 420px;
}

.device-mockup {
    position: relative;
    z-index: 2;
    max-width: 620px;
    margin-left: 155px;
    padding-top: 8px;
}

    .device-mockup img {
        width: 85%;
        display: block;
    }

.feature-box {
    position: absolute;
    z-index: 3;
    width: 92px;
    height: 92px;
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 14px 35px rgba(13, 31, 58, 0.12);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #071b3a;
    font-weight: 700;
    font-size: 13px;
    text-align: center;
}

    .feature-box i {
        font-size: 30px;
        margin-bottom: 8px;
        color: #071b3a;
    }

.feature-left-top {
    left: 8%;
    top: 35px;
}

.feature-left-bottom {
    left: 1%;
    top: 178px;
}

.feature-right-top {
    right: 1%;
    top: 42px;
}

.feature-right-bottom {
    right: -4%;
    top: 178px;
}

/* dotted orange connector */
.feature-box::after {
    content: "";
    position: absolute;
    width: 68px;
    border-top: 2px dotted #ff8b45;
    top: 50%;
}

.feature-left-top::after,
.feature-left-bottom::after {
    left: 100%;
}

.feature-right-top::after,
.feature-right-bottom::after {
    right: 100%;
}

.feature-box::before {
    content: "";
    position: absolute;
    width: 8px;
    height: 8px;
    background: #ff6500;
    border-radius: 50%;
    top: calc(50% - 4px);
}

.feature-left-top::before,
.feature-left-bottom::before {
    right: -72px;
}

.feature-right-top::before,
.feature-right-bottom::before {
    left: -72px;
}

/* Responsive */
/* Responsive */
@media (max-width: 1199px) {
    .custom-web-hero {
        padding: 110px 0 50px;
    }

        .custom-web-hero h1 {
            font-size: 42px;
        }

    .device-mockup {
        margin-left: 80px;
        max-width: 560px;
    }

        .device-mockup img {
            width: 88%;
        }

    .feature-left-top {
        left: 0;
    }

    .feature-left-bottom {
        left: -2%;
    }

    .feature-right-bottom {
        right: -1%;
    }
}

@media (max-width: 991px) {
    .custom-web-hero {
        padding: 95px 0 60px;
        text-align: center;
    }

    .hero-small-title {
        margin-bottom: 14px;
    }

    .custom-web-hero h1 {
        font-size: 38px;
    }

    .custom-web-hero p {
        margin-left: auto;
        margin-right: auto;
    }

    .hero-btns {
        justify-content: center;
        margin-bottom: 32px;
    }

    .hero-stats {
        justify-content: center;
        gap: 22px;
    }

    .hero-stat-item {
        min-width: 145px;
        justify-content: center;
    }

        .hero-stat-item p {
            color: #d7e6ff;
        }

    .hero-device-area {
        margin-top: 45px;
        min-height: auto;
        padding-bottom: 20px;
    }

    .device-mockup {
        margin: 0 auto;
        max-width: 620px;
        padding-top: 0;
    }

        .device-mockup img {
            width: 100%;
            margin: 0 auto;
        }

    .feature-box {
        width: 82px;
        height: 82px;
        font-size: 12px;
        border-radius: 14px;
    }

        .feature-box i {
            font-size: 24px;
            margin-bottom: 6px;
        }

    .feature-left-top {
        left: 0;
        top: 15px;
    }

    .feature-left-bottom {
        left: 0;
        top: 125px;
    }

    .feature-right-top {
        right: 0;
        top: 15px;
    }

    .feature-right-bottom {
        right: 0;
        top: 125px;
    }

    .feature-box::after,
    .feature-box::before {
        display: none;
    }
}

@media (max-width: 767px) {
    .custom-web-hero {
        padding: 135px 0 50px;
    }

        .custom-web-hero h1 {
            font-size: 34px;
        }

        .custom-web-hero p {
            font-size: 16px;
        }

    .hero-stats {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 18px;
        max-width: 420px;
        margin-left: auto;
        margin-right: auto;
    }

    .hero-stat-item {
        background: rgba(255, 255, 255, 0.08);
        padding: 12px;
        border-radius: 12px;
        justify-content: flex-start;
    }

    .hero-device-area {
        margin-top: 35px;
    }

    .feature-box {
        position: static;
        display: inline-flex;
        margin: 6px;
        width: 78px;
        height: 78px;
    }

    .device-mockup {
        margin-top: 18px;
    }

        .device-mockup img {
            width: 100%;
        }
}

@media (max-width: 575px) {
    .custom-web-hero {
        padding: 135px 0 45px;
    }

        .custom-web-hero h1 {
            font-size: 30px;
            line-height: 1.25;
        }

        .custom-web-hero p {
            font-size: 15px;
        }

    .hero-btns {
        gap: 12px;
    }

    .hero-primary-btn,
    .hero-outline-btn {
        width: 100%;
        text-align: center;
        padding: 13px 20px;
    }

    .hero-stats {
        gap: 12px;
    }

    .hero-stat-item {
        justify-content: flex-start;
    }

    .hero-device-area {
        margin-top: 28px;
    }

    .feature-box {
        width: 46%;
        height: 76px;
        margin: 5px;
    }

    .device-mockup img {
        width: 100%;
    }
}

/*=============WEB SERVICE=============*/
.custom-web-services {
    padding: 35px 0 45px;
    background: #ffffff;
}

.service-heading {
    margin-bottom: 25px;
}

    .service-heading span {
        display: block;
        color: #ff6500;
        font-size: 12px;
        font-weight: 800;
        letter-spacing: .5px;
        text-transform: uppercase;
        margin-bottom: 6px;
    }

    .service-heading h2 {
        color: #071b3a;
        font-size: 28px;
        font-weight: 900;
        margin: 0;
    }

.col-lg-2-4 {
    flex: 0 0 auto;
    width: 20%;
}

.web-service-box {
    height: 100%;
    min-height: 198px;
    background: #ffffff;
    border: 1px solid #e4e9f1;
    border-radius: 6px;
    padding: 22px 22px 20px;
    text-align: center;
    transition: all .3s ease;
}

    .web-service-box:hover {
        transform: translateY(-6px);
        box-shadow: 0 16px 35px rgba(7, 27, 58, 0.10);
        border-color: #ff6500;
    }

.service-icon {
    width: 58px;
    height: 58px;
    margin: 0 auto 14px;
    border-radius: 50%;
    background: #fff1e8;
    color: #ff6500;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .service-icon i {
        font-size: 28px;
        line-height: 1;
    }

.web-service-box h4 {
    font-size: 16px;
    font-weight: 900;
    color: #071b3a;
    margin-bottom: 9px;
}

.web-service-box p {
    color: #303846;
    font-size: 14px;
    line-height: 1.55;
    margin: 0;
}

/* Responsive */
@media (max-width: 1199px) {
    .col-lg-2-4 {
        width: 25%;
    }
}

@media (max-width: 991px) {
    .col-lg-2-4 {
        width: 33.333%;
    }
}

@media (max-width: 767px) {
    .col-lg-2-4 {
        width: 50%;
    }

    .service-heading h2 {
        font-size: 24px;
    }
}

@media (max-width: 480px) {
    .col-lg-2-4 {
        width: 100%;
    }
}

/*==========CUSTOM WHY CHOOSE use=========*/
.why-choose-web {
    padding: 48px 0;
    background: radial-gradient(circle at 80% 20%, rgba(255, 106, 0, 0.10), transparent 35%), radial-gradient(circle at 20% 80%, rgba(40, 86, 144, 0.08), transparent 40%), linear-gradient(135deg, #f8fbff 0%, #ffffff 45%, #fff8f2 100%);
}

.why-left-content span {
    display: block;
    color: #ff6500;
    font-size: 16px;
    font-weight: 900;
    margin-bottom: 12px;
}

.why-left-content h2 {
    color: #111827;
    font-size: 34px;
    line-height: 1.22;
    font-weight: 900;
    margin-bottom: 18px;
}

.why-left-content p {
    color: #343a40;
    font-size: 15px;
    line-height: 1.65;
    max-width: 360px;
    margin-bottom: 22px;
}

.why-btn {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    background: #ff6500;
    color: #ffffff;
    text-decoration: none;
    padding: 14px 22px;
    border-radius: 5px;
    font-weight: 800;
    font-size: 15px;
    box-shadow: 0 10px 24px rgba(255, 101, 0, 0.25);
}

    .why-btn:hover {
        background: #e95b00;
        color: #ffffff;
    }

.why-feature-card {
    min-height: 112px;
    height: 100%;
    background: rgba(255, 255, 255, 0.075);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 7px;
    padding: 23px 22px;
    display: flex;
    align-items: flex-start;
    gap: 22px;
    color: #ffffff;
    transition: all 0.3s ease;
}

    .why-feature-card:hover {
        transform: translateY(-5px);
        background: rgba(255, 255, 255, 0.12);
    }

    .why-feature-card i {
        font-size: 42px;
        line-height: 1;
        color: #ff650f;
        min-width: 44px;
    }

    .why-feature-card h4 {
        color: #000000;
        font-size: 17px;
        font-weight: 900;
        margin-bottom: 8px;
    }

    .why-feature-card p {
        color: #343a40;
        font-size: 18px;
        line-height: 1.55;
        margin: 0;
    }

@media (max-width: 991px) {
    .why-choose-web {
        padding: 55px 0;
    }

    .why-left-content h2 {
        font-size: 30px;
    }

    .why-left-content p {
        max-width: 100%;
    }
}

@media (max-width: 575px) {
    .why-feature-card {
        flex-direction: column;
        gap: 14px;
    }

        .why-feature-card i {
            font-size: 36px;
        }
}

/*============CUSTOM PORTFOLIO============*/
.portfolio-showcase-section {
    padding: 60px 0;
    background: #ffffff;
}

.portfolio-title {
    color: #e5eefd;
    margin-bottom: 35px;
}

    .portfolio-title span {
        color: #ff6500;
        font-size: 14px;
        font-weight: 800;
        letter-spacing: .5px;
    }

    .portfolio-title h2 {
        font-size: 38px;
        font-weight: 900;
        color: #071b3a;
        margin: 10px 0;
    }

    .portfolio-title p {
        color: #5f6570;
        font-size: 16px;
        margin: 0;
    }

.portfolio-card {
    background: #fff;
    border: 1px solid #e3e8ef;
    border-radius: 8px;
    overflow: hidden;
    height: 100%;
    transition: 0.3s;
}

    .portfolio-card:hover {
        transform: translateY(-6px);
        box-shadow: 0 18px 35px rgba(0,0,0,0.08);
    }

    .portfolio-card img {
        width: 100%;
        height: 220px;
        object-fit: contain;
    }

.portfolio-body {
    padding: 22px;
}

    .portfolio-body span {
        display: block;
        color: #7a8595;
        font-size: 14px;
        margin-bottom: 6px;
    }

    .portfolio-body h4 {
        font-size: 22px;
        font-weight: 800;
        color: #071b3a;
        margin-bottom: 12px;
    }

    .portfolio-body p {
        color: #5f6570;
        font-size: 15px;
        line-height: 1.7;
        margin-bottom: 18px;
    }

    .portfolio-body a {
        color: #ff6500;
        font-weight: 700;
        text-decoration: none;
    }

        .portfolio-body a i {
            margin-left: 6px;
        }

/* Arrows */
.custom-arrow {
    width: auto;
    opacity: 1;
}

.arrow-circle {
    width: 52px;
    height: 52px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 10px 25px rgba(0,0,0,0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ff6500;
    font-size: 22px;
    transition: 0.3s;
}

    .arrow-circle:hover {
        background: #ff6500;
        color: #fff;
    }

.carousel-control-prev {
    left: -70px;
}

.carousel-control-next {
    right: -70px;
}

@media (max-width: 991px) {
    .carousel-control-prev {
        left: 0;
    }

    .carousel-control-next {
        right: 0;
    }

    .portfolio-title h2 {
        font-size: 30px;
    }
}

@media (max-width: 576px) {
    .portfolio-title h2 {
        font-size: 26px;
    }

    .portfolio-card img {
        height: 200px;
    }

    .arrow-circle {
        width: 42px;
        height: 42px;
        font-size: 18px;
    }
}






/*===================================WEB DESIGN COMPANY====================================*/
.web-design-hero {
    padding: 145px 0 70px;
    background: radial-gradient(circle at 72% 40%, rgba(124, 58, 237, 0.28), transparent 34%), linear-gradient(135deg, #050816 0%, #0b1026 45%, #121938 100%);
    overflow: hidden;
}

.web-design-badge {
    display: inline-block;
    color: #7c3aed;
    font-size: 16px;
    font-weight: 900;
    letter-spacing: .4px;
    margin-bottom: 18px;
}

.web-design-hero h1 {
    color: #ffffff;
    font-size: 48px;
    line-height: 1.18;
    font-weight: 900;
    margin-bottom: 24px;
}

    .web-design-hero h1 span {
        color: #7c3aed;
    }

.web-design-hero p {
    color: #ece1ff;
    font-size: 18px;
    line-height: 1.75;
    max-width: 610px;
    margin-bottom: 34px;
}

.web-design-buttons {
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
    margin-bottom: 44px;
}

.web-design-primary {
    background: #7c3aed;
    color: #ffffff;
    padding: 15px 28px;
    border-radius: 7px;
    font-weight: 800;
    border: 1px solid #7c3aed;
    box-shadow: 0 14px 30px rgba(124, 58, 237, 0.25);
}

    .web-design-primary:hover {
        background: #5b21b6;
        color: #ffffff;
    }

.web-design-outline {
    background: #ffffff;
    color: #7c3aed;
    padding: 15px 31px;
    border-radius: 7px;
    font-weight: 800;
    border: 2px solid rgba(124, 58, 237, 0.35);
}

    .web-design-outline:hover {
        background: #7c3aed;
        color: #ffffff;
    }

.web-design-buttons i {
    margin-left: 10px;
}

.web-design-features {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: nowrap;
    margin-top: 10px;
}

.feature-mini {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}

    .feature-mini i {
        color: #7c3aed;
        font-size: 28px;
        min-width: 30px;
    }

    .feature-mini h6 {
        color: #ffffff;
        font-size: 16px;
        font-weight: 800;
        margin: 0 0 4px;
        white-space: nowrap;
    }

    .feature-mini p {
        color: #d9caf3;
        font-size: 13px;
        line-height: 1.3;
        margin: 0;
    }

.design-visual-area {
    position: relative;
    min-height: 460px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 55px 70px 35px;
}

    .design-visual-area > img {
        width: 100%;
        max-width: 520px;
        display: block;
        margin: 0 auto;
        position: relative;
        z-index: 2;
    }

.design-floating-card {
    position: absolute;
    z-index: 4;
    width: 128px;
    min-height: 118px;
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 18px 38px rgba(0, 0, 0, 0.22);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    text-align: center;
    font-size: 14px;
    font-weight: 900;
    color: #07142f;
}

    .design-floating-card i {
        font-size: 38px;
        color: purple;
    }

.design-card-top {
    top: 18px;
    left: 35px;
}

.design-card-left {
    left: 55px;
    bottom: 55px;
}

.design-card-right {
    top: 120px;
    right: 30px;
}
    .design-card-left i {
        color: #22a447;
    }

.design-card-right {
    top: 126px;
    right: -5px;
}

    .design-card-right i {
        color: #ff6500;
    }

/* Responsive */
/* Responsive */
@media (max-width: 1199px) {
    .web-design-hero h1 {
        font-size: 42px;
    }

    .design-visual-area {
        padding: 45px 45px 30px;
    }

        .design-visual-area > img {
            max-width: 470px;
        }

    .design-floating-card {
        width: 112px;
        min-height: 104px;
        font-size: 12px;
    }

    .design-card-top {
        top: 20px;
        left: 10px;
    }

    .design-card-left {
        left: 20px;
        bottom: 45px;
    }

    .design-card-right {
        top: 130px;
        right: 0;
    }
}

@media (max-width: 991px) {
    .web-design-hero {
        padding: 80px 0 55px;
        text-align: center;
    }

        .web-design-hero h1 {
            font-size: 38px;
        }

        .web-design-hero p {
            margin-left: auto;
            margin-right: auto;
            max-width: 620px;
        }

    .web-design-buttons,
    .web-design-features {
        justify-content: center;
    }

    .design-visual-area {
        min-height: 430px;
        margin-top: 35px;
        padding: 45px 60px 25px;
    }

        .design-visual-area > img {
            max-width: 520px;
            margin: 0 auto;
        }

    .design-floating-card {
        position: absolute;
        width: 110px;
        min-height: 98px;
        font-size: 12px;
        border-radius: 14px;
    }

        .design-floating-card i {
            font-size: 30px;
        }

    .design-card-top {
        top: 8px;
        left: 35px;
    }

    .design-card-left {
        left: 45px;
        bottom: 35px;
    }

    .design-card-right {
        top: 110px;
        right: 35px;
    }
}

@media (max-width: 767px) {
    .web-design-hero {
        padding: 135px 0 45px;
    }

        .web-design-hero h1 {
            font-size: 34px;
        }

        .web-design-hero p {
            font-size: 16px;
        }

    .web-design-features {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 16px;
        margin-top: 5px;
    }

    .feature-mini {
        flex-direction: column;
        text-align: center;
        gap: 8px;
    }

        .feature-mini i {
            font-size: 26px;
        }

    .design-visual-area {
        min-height: auto;
        padding: 25px 0 0;
        display: block;
    }

        .design-visual-area > img {
            width: 100%;
            max-width: 460px;
            margin: 0 auto;
        }

    .design-floating-card {
        position: static;
        display: inline-flex;
        vertical-align: top;
        width: 31%;
        min-width: unset;
        min-height: 82px;
        margin: 12px 3px 0;
        font-size: 11px;
        border-radius: 12px;
        padding: 8px;
    }

        .design-floating-card i {
            font-size: 25px;
        }
}

@media (max-width: 575px) {
    .web-design-hero {
        padding: 120px 0 40px;
    }

        .web-design-hero h1 {
            font-size: 29px;
            line-height: 1.28;
        }

        .web-design-hero p {
            font-size: 15px;
            line-height: 1.65;
        }

    .web-design-buttons {
        gap: 12px;
        margin-bottom: 30px;
    }

    .web-design-primary,
    .web-design-outline {
        width: 100%;
        padding: 13px 18px;
    }

    .web-design-features {
        grid-template-columns: 1fr;
        gap: 14px;
        text-align: left;
    }

    .feature-mini {
        flex-direction: row;
        justify-content: flex-start;
        text-align: left;
        background: rgba(255, 255, 255, 0.06);
        padding: 12px;
        border-radius: 12px;
    }

    .design-visual-area {
        margin-top: 20px;
    }

    .design-floating-card {
        width: 100%;
        min-height: 72px;
        margin: 8px 0 0;
        flex-direction: row;
        gap: 10px;
    }

        .design-floating-card i {
            font-size: 24px;
        }

    .design-visual-area > img {
        max-width: 100%;
    }
}

/*==================WEB-DESIGN-SERVICE==================*/
.creative-design-services {
    padding: 60px 0 70px;
    background: radial-gradient(circle at 50% 0%, rgba(124, 58, 237, 0.08), transparent 28%), #ffffff;
}

.design-service-title {
    margin-bottom: 38px;
}

    .design-service-title span {
        display: block;
        color: #7c3aed;
        font-size: 13px;
        font-weight: 900;
        letter-spacing: .5px;
        margin-bottom: 8px;
    }

    .design-service-title h2 {
        color: #07142f;
        font-size: 34px;
        font-weight: 900;
        margin-bottom: 10px;
    }

    .design-service-title p {
        color: #667085;
        font-size: 16px;
        margin: 0;
    }

.creative-service-card {
    height: 100%;
    min-height: 150px;
    background: #ffffff;
    border: 1px solid #edf0f5;
    border-radius: 13px;
    padding: 30px 28px;
    display: flex;
    align-items: flex-start;
    gap: 24px;
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.08);
    transition: all .3s ease;
}

    .creative-service-card:hover {
        transform: translateY(-6px);
        box-shadow: 0 20px 45px rgba(124, 58, 237, 0.14);
    }

.creative-icon {
    width: 70px;
    height: 70px;
    min-width: 70px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .creative-icon i {
        font-size: 34px;
    }

    .creative-icon.purple {
        background: #f0e7ff;
        color: #7c3aed;
    }

    .creative-icon.blue {
        background: #e8f0ff;
        color: #3976ff;
    }

    .creative-icon.orange {
        background: #ffe9dc;
        color: #ff6500;
    }

    .creative-icon.green {
        background: #e5f6e9;
        color: #38a169;
    }

    .creative-icon.yellow {
        background: #fff1c9;
        color: #f5a400;
    }

    .creative-icon.pink {
        background: #ffe3ef;
        color: #ff3d8b;
    }

.creative-service-card h4 {
    color: #07142f;
    font-size: 19px;
    font-weight: 900;
    margin-bottom: 10px;
}

.creative-service-card p {
    color: #5d6676;
    font-size: 15px;
    line-height: 1.65;
    margin: 0;
}




/*=============== WEB_DEVLOPMENT PROCESS==================*/
.design-process-section {
    padding: 70px 0;
    background: radial-gradient(circle at top center, rgba(124, 58, 237, 0.08), transparent 30%), #ffffff;
    overflow: hidden;
}

.process-title {
    margin-bottom: 55px;
}

    .process-title span {
        display: block;
        color: #7c3aed;
        font-size: 13px;
        font-weight: 900;
        letter-spacing: .5px;
        margin-bottom: 10px;
    }

    .process-title h2 {
        color: #07142f;
        font-size: 38px;
        font-weight: 900;
        margin: 0;
    }

.process-bars {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
    flex-wrap: wrap;
}

.process-line {
    position: absolute;
    top: 36px;
    left: 8%;
    right: 8%;
    height: 2px;
    background: linear-gradient(to right, #c9b6ff, #e8dcff);
    z-index: 1;
}

.process-step-box {
    position: relative;
    z-index: 2;
    text-align: center;
    min-width: 0;
}

.process-icon {
    width: 72px;
    height: 72px;
    margin: 0 auto 18px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--bs-blue), var(--pf-secondary));
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 18px 35px rgba(124, 58, 237, 0.22);
}

    .process-icon i {
        color: #ffffff;
        font-size: 30px;
    }

.step-number {
    display: block;
    color: #7c3aed;
    font-size: 20px;
    font-weight: 900;
    margin-bottom: 8px;
}

.process-step-box h4 {
    color: #07142f;
    font-size: 17px;
    font-weight: 900;
    margin-bottom: 9px;
}

.process-step-box p {
    color: #5d6676;
    font-size: 14px;
    line-height: 1.55;
    margin: 0 auto;
    max-width: 150px;
}

/* IMPORTANT: Fix Bootstrap column overlap */
.design-process-section .row {
    align-items: flex-start;
}

.design-process-section .col-lg-2 {
    flex: 0 0 16.666667%;
    max-width: 16.666667%;
}




/*============WEB-DESIGN-WORK=============*/
.before-after-section {
    padding: 70px 0;
    background: radial-gradient(circle at top center, rgba(124, 58, 237, 0.08), transparent 32%), #ffffff;
    overflow: hidden;
}

.before-after-title {
    margin-bottom: 28px;
}

    .before-after-title span {
        display: block;
        color: #7c3aed;
        font-size: 13px;
        font-weight: 900;
        letter-spacing: .5px;
        margin-bottom: 8px;
    }

    .before-after-title h2 {
        color: #07142f;
        font-size: 36px;
        font-weight: 900;
        margin-bottom: 8px;
    }

    .before-after-title p {
        color: #667085;
        font-size: 16px;
        margin: 0;
    }

.before-after-wrapper {
    position: relative;
    max-width: 1120px;
    margin: 0 auto;
}

.before-after-card {
    position: relative;
    height: 100%;
    background: #ffffff;
    border: 1px solid #edf0f5;
    border-radius: 14px;
    padding: 14px 14px 24px;
    box-shadow: 0 15px 35px rgba(15, 23, 42, 0.10);
}

    .before-after-card img {
        width: 100%;
        height: 255px;
        object-fit: cover;
        border-radius: 8px;
        background: #f4f4f6;
    }

.design-label {
    position: absolute;
    top: 22px;
    left: 22px;
    z-index: 2;
    color: #ffffff;
    font-size: 15px;
    font-weight: 900;
    padding: 9px 16px;
    border-radius: 7px;
}

.before-label {
    background: #5f6368;
}

.after-label {
    background: #7c3aed;
}

.before-after-content {
    padding: 20px 8px 0;
}

    .before-after-content h4 {
        color: #07142f;
        font-size: 21px;
        font-weight: 900;
        margin-bottom: 10px;
    }

    .before-after-content p {
        color: #667085;
        font-size: 16px;
        line-height: 1.6;
        margin: 0;
    }

.middle-arrow {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 5;
    width: 44px;
    height: 44px;
    background: linear-gradient(135deg, #7c3aed, #5b21b6);
    color: #ffffff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 15px 30px rgba(124, 58, 237, 0.30);
    font-size: 22px;
}

.design-stats-box {
    max-width: 1120px;
    margin: 45px auto 0;
    padding: 34px 38px;
    border-radius: 18px;
    background: #eadcff4f;
}

.design-stat-item {
    display: flex;
    align-items: center;
    gap: 18px;
}

.stat-icon {
    width: 66px;
    height: 66px;
    min-width: 66px;
    border-radius: 50%;
    background: #eadcff;
    color: #7c3aed;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
}

.design-stat-item h3 {
    color: #7c3aed;
    font-size: 36px;
    font-weight: 900;
    margin: 0;
    text-align: left;
}

.design-stat-item p {
    color: #667085;
    font-size: 15px;
    margin: 0;
    text-align: left;
}



/*===============WEB-DESIGN-CTA==============*/

.design-cta-box {
    position: relative;
    overflow: hidden;
    padding: 55px 70px;
    background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.14), transparent 34%), linear-gradient(135deg, #090d21 0%, #261c58 45%, #111835 100%);
}

    .design-cta-box::before,
    .design-cta-box::after {
        content: "";
        position: absolute;
        width: 130px;
        height: 130px;
        background-image: radial-gradient(rgba(255,255,255,0.22) 1.5px, transparent 1.5px);
        background-size: 10px 10px;
    }

    .design-cta-box::before {
        left: 28px;
        top: 25px;
    }

    .design-cta-box::after {
        right: 28px;
        top: 25px;
    }

    .design-cta-box span {
        color: #ede9fe;
        font-size: 14px;
        font-weight: 900;
        letter-spacing: .5px;
    }

    .design-cta-box h2 {
        color: #ffffff;
        font-size: 36px;
        line-height: 1.25;
        font-weight: 900;
        margin: 14px 0 18px;
    }

    .design-cta-box p {
        color: #f3e8ff;
        font-size: 17px;
        line-height: 1.7;
        max-width: 540px;
        margin: 0;
    }

.design-cta-buttons {
    display: flex;
    justify-content: center;
    gap: 22px;
    flex-wrap: wrap;
}

.cta-white-btn,
.cta-outline-btn {
    padding: 16px 36px;
    border-radius: 8px;
    font-weight: 900;
}

.cta-white-btn {
    background: #ffffff;
    color: #7c3aed;
    border: 2px solid #ffffff;
}

    .cta-white-btn:hover {
        background: #ff6500;
        border-color: #ff6500;
        color: #ffffff;
    }

.cta-outline-btn {
    background: transparent;
    color: #ffffff;
    border: 2px solid rgba(255,255,255,0.55);
}

    .cta-outline-btn:hover {
        background: #ffffff;
        color: #7c3aed;
    }

.design-cta-buttons i {
    margin-left: 10px;
}

/* Before After Responsive */
@media (max-width: 991px) {
    .before-after-section {
        padding: 55px 0;
    }

    .before-after-title h2 {
        font-size: 30px;
    }

    .before-after-card {
        margin-bottom: 18px;
    }

        .before-after-card img {
            height: 220px;
        }

    .middle-arrow {
        position: relative;
        left: auto;
        top: auto;
        transform: rotate(90deg);
        margin: -5px auto 15px;
    }

    .design-stats-box {
        margin-top: 28px;
        padding: 26px 22px;
    }

    .design-stat-item {
        justify-content: flex-start;
        background: #ffffff;
        padding: 16px;
        border-radius: 14px;
    }
}

@media (max-width: 575px) {
    .before-after-title h2 {
        font-size: 25px;
    }

    .before-after-card {
        padding: 10px 10px 20px;
    }

        .before-after-card img {
            height: 175px;
        }

    .design-label {
        top: 16px;
        left: 16px;
        font-size: 12px;
        padding: 7px 12px;
    }

    .before-after-content {
        padding: 16px 5px 0;
    }

        .before-after-content h4 {
            font-size: 17px;
        }

        .before-after-content p {
            font-size: 14px;
        }

    .design-stats-box {
        padding: 18px;
    }

    .design-stat-item {
        gap: 12px;
    }

    .stat-icon {
        width: 50px;
        height: 50px;
        min-width: 50px;
        font-size: 22px;
    }

    .design-stat-item h3 {
        font-size: 25px;
    }

    .design-stat-item p {
        font-size: 13px;
    }
}

/* CTA Responsive */
@media (max-width: 991px) {
    .design-cta-box {
        padding: 42px 32px;
        text-align: center;
    }

        .design-cta-box p {
            margin: 0 auto;
        }

    .design-cta-buttons {
        justify-content: center;
    }
}

@media (max-width: 575px) {
    .design-cta-box {
        padding: 32px 20px;
    }

        .design-cta-box h2 {
            font-size: 26px;
            line-height: 1.35;
        }

        .design-cta-box p {
            font-size: 15px;
        }

    .design-cta-buttons {
        gap: 12px;
    }

    .cta-white-btn,
    .cta-outline-btn {
        width: 100%;
        padding: 13px 20px;
    }
}
/* Large Tablet */
@media (max-width: 991px) {
    .process-bars {
        justify-content: center;
        gap: 30px 20px;
    }

    .process-step-box {
        width: 30%;
        max-width: 30%;
    }
}

/* Small Tablet */
@media (max-width: 767px) {
    .process-step-box {
        width: 30%;
        max-width: 30%;
    }
}

/* Mobile */
@media (max-width: 575px) {
    .process-bars {
        justify-content: center;
        gap: 25px 15px;
    }

    .process-step-box {
        width: 30%;
        max-width: 30%;
        text-align: center;
    }

    .process-icon {
        width: 58px;
        height: 58px;
        margin: 0 auto 14px;
    }

        .process-icon i {
            font-size: 22px;
        }

    .step-number {
        font-size: 16px;
    }

    .process-step-box h4 {
        font-size: 15px;
    }

    .process-step-box p {
        font-size: 13px;
        line-height: 1.5;
    }
}


/*=====================GRAPHIC-DESIGN=====================*/
:root {
    --brand-primary: #22c55e;
    --brand-dark: #07142f;
    --brand-orange: #ff6500;
    --brand-text: #c7d2c9;
    --brand-light: #f1fff6fc;
    --brand-border: rgba(255,255,255,0.08);
    --brand-bg-dark: #06110b;
    --brand-bg-mid: #0b1a12;
    --brand-card: rgba(255,255,255,0.04);
}

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

.branding-hero {
    padding: 120px 0 80px;
    background: radial-gradient(circle at 75% 35%, rgba(34, 197, 94, 0.18), transparent 34%), radial-gradient(circle at 20% 20%, rgba(34, 197, 94, 0.10), transparent 30%), linear-gradient(135deg, #06110b 0%, #0b1a12 45%, #102318 100%);
    overflow: hidden;
}

.brand-badge {
    color: var(--brand-primary);
    font-size: 14px;
    font-weight: 900;
    letter-spacing: 1px;
    margin-bottom: 16px;
    display: inline-block;
}

.branding-hero h1 {
    font-size: 52px;
    line-height: 1.14;
    font-weight: 900;
    color: #ffffff;
    margin-bottom: 22px;
}

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

.branding-hero p {
    font-size: 17px;
    line-height: 1.8;
    color: var(--brand-text);
    max-width: 590px;
    margin-bottom: 30px;
}

.brand-hero-btns {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 38px;
}

.brand-primary-btn {
    background: var(--brand-primary);
    color: #ffffff;
    padding: 14px 26px;
    border-radius: 7px;
    font-weight: 900;
    border: none;
}

    .brand-primary-btn:hover {
        background: #16a34a;
        color: #ffffff;
    }

.brand-outline-btn {
    background: transparent;
    color: var(--brand-primary);
    padding: 14px 26px;
    border-radius: 7px;
    font-weight: 900;
    border: 1px solid var(--brand-primary);
}

    .brand-outline-btn:hover {
        background: var(--brand-primary);
        color: #ffffff;
    }

.brand-features {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
    color: #ffffff;
    font-weight: 800;
}

    .brand-features i {
        color: var(--brand-primary);
        margin-right: 7px;
    }

.brand-hero-visual {
    position: relative;
}

    .brand-hero-visual img {
        border-radius: 24px;
        box-shadow: 0 25px 55px rgba(0, 0, 0, 0.35);
    }

.brand-float-card {
    position: absolute;
    background: rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(14px);
    color: #ffffff;
    padding: 14px 18px;
    border-radius: 14px;
    font-weight: 900;
    border: 1px solid rgba(255,255,255,0.08);
    box-shadow: 0 18px 38px rgba(0, 0, 0, 0.25);
}

    .brand-float-card i {
        color: var(--brand-primary);
        margin-right: 8px;
    }

.card-a {
    top: 10%;
    left: -2%;
}

.card-b {
    right: -2%;
    top: -15%;
}

.card-c {
    left: 8%;
    bottom: 6%;
}

/* ================= COMMON TITLE ================= */

.brand-section-title {
    max-width: 760px;
    margin: 0 auto 45px;
}

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

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

.branding-services {
    padding: 55px 0;
    background: #ffffff;
}

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

    .branding-services .brand-section-title {
        margin-bottom: 45px;
    }

        .branding-services .brand-section-title span {
            display: inline-block;
            padding: 8px 20px;
            border-radius: 30px;
            background: rgba(34, 197, 94, .1);
            color: var(--brand-primary);
            font-size: 14px;
            font-weight: 700;
            letter-spacing: .5px;
            text-transform: uppercase;
        }

        .branding-services .brand-section-title h2 {
            font-size: 38px;
            font-weight: 900;
            color: #07142f;
            margin: 12px 0;
        }

        .branding-services .brand-section-title p {
            color: #5d6676;
            font-size: 16px;
            max-width: 760px;
            margin: auto;
            line-height: 1.8;
        }

/*=========================================================
CUSTOM 5 COLUMN GRID
=========================================================*/

@media (min-width:992px) {

    .col-lg-2-4 {
        flex: 0 0 20%;
        max-width: 20%;
    }
}

@media (max-width:991px) {

    .col-lg-2-4 {
        flex: 0 0 50%;
        max-width: 50%;
    }
}

@media (max-width:767px) {

    .col-lg-2-4 {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

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

.branding-service-card {
    height: 100%;
    background: #ffffff;
    border: 1px solid #edf0f5;
    border-radius: 18px;
    padding: 24px 18px;
    transition: all .35s ease;
    box-shadow: 0 10px 28px rgba(15,23,42,.04);
}

    .branding-service-card:hover {
        transform: translateY(-8px);
        border-color: var(--brand-primary);
        box-shadow: 0 20px 45px rgba(34,197,94,.14);
    }

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

    .branding-service-card i {
        width: 56px;
        height: 56px;
        border-radius: 16px;
        background: rgba(34,197,94,.10);
        color: var(--brand-primary);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 24px;
        margin-bottom: 18px;
    }

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

    .branding-service-card h4 {
        color: #07142f;
        font-size: 18px;
        font-weight: 800;
        line-height: 1.4;
        margin-bottom: 10px;
        min-height: 52px;
    }

    /*=========================================================
DESCRIPTION
=========================================================*/

    .branding-service-card p {
        color: #5d6676;
        font-size: 14px;
        line-height: 1.65;
        margin: 0;
    }

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

@media (max-width:1200px) {

    .branding-services .brand-section-title h2 {
        font-size: 34px;
    }

    .branding-service-card {
        padding: 22px 16px;
    }

        .branding-service-card h4 {
            font-size: 17px;
            min-height: 48px;
        }

        .branding-service-card p {
            font-size: 13px;
        }

        .branding-service-card i {
            width: 52px;
            height: 52px;
            font-size: 22px;
        }
}

@media (max-width:991px) {

    .branding-services {
        padding: 50px 0;
    }

        .branding-services .brand-section-title {
            margin-bottom: 40px;
        }

            .branding-services .brand-section-title h2 {
                font-size: 32px;
            }

    .branding-service-card {
        padding: 28px 22px;
    }

        .branding-service-card h4 {
            font-size: 20px;
            min-height: auto;
        }

        .branding-service-card p {
            font-size: 15px;
        }

        .branding-service-card i {
            width: 58px;
            height: 58px;
            font-size: 25px;
        }
}

@media (max-width:767px) {

    .branding-services {
        padding: 45px 0;
    }

        .branding-services .brand-section-title h2 {
            font-size: 28px;
        }

        .branding-services .brand-section-title p {
            font-size: 15px;
        }

    .branding-service-card {
        padding: 24px 20px;
    }

        .branding-service-card h4 {
            font-size: 19px;
        }

        .branding-service-card p {
            font-size: 14px;
        }

        .branding-service-card i {
            width: 54px;
            height: 54px;
            font-size: 22px;
        }
}

/*    ====================Logo-Graphics-WHYUS=====================*/
/* Logo & Graphic Design - Why Choose Us */
.lgd-why-section {
    padding: 60px 0;
    background: #fff;
}

.lgd-why-box {
    background: linear-gradient(90deg, #f3fff8 0%, #ffffff 50%, #f2fff7 100%);
    border-radius: 14px;
    padding: 34px 45px 38px;
    border: 1px solid #e3f4ea;
}

.lgd-section-title span {
    color: #22c55e;
    font-size: 13px;
    font-weight: 900;
    letter-spacing: .8px;
}

.lgd-section-title h2 {
    margin-top: 8px;
    margin-bottom: 34px;
    color: #07142f;
    font-size: 32px;
    font-weight: 900;
}

.lgd-why-card {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    padding-right: 28px;
    border-right: 1px solid #d8e6df;
    height: 100%;
}

.lgd-why-card-last {
    border-right: none;
}

.lgd-why-icon {
    min-width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #dffbea;
    color: #22c55e;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

.lgd-why-card h4 {
    color: #07142f;
    font-size: 16px;
    font-weight: 900;
    margin-bottom: 8px;
}

.lgd-why-card p {
    color: #5d6676;
    font-size: 14px;
    line-height: 1.7;
    margin: 0;
}

@media (max-width: 991px) {
    .lgd-why-box {
        padding: 30px 22px;
    }

    .lgd-why-card {
        border-right: none;
        padding-right: 0;
    }
}
/* ================= PROCESS ================= */

.branding-process {
    padding: 85px 0;
    background: var(--brand-light);
}

    .branding-process .brand-section-title h2 {
        font-size: 38px;
        font-weight: 900;
        color: #24384d;
        margin: 10px 0;
    }

    .branding-process .brand-section-title p {
        color: #c7d2c9;
        font-size: 16px;
    }

.brand-process-bars {
    position: relative;
    display: flex;
    justify-content: space-between;
    gap: 20px;
    max-width: 1050px;
    margin: 0 auto;
}

    .brand-process-bars::before {
        content: "";
        position: absolute;
        top: 35px;
        left: 8%;
        right: 8%;
        height: 2px;
        background: linear-gradient(to right, #a7f3d0, #dcfce7);
        z-index: 1;
    }

.brand-process-step {
    width: 20%;
    text-align: center;
    position: relative;
    z-index: 2;
}

.process-circle {
    width: 72px;
    height: 72px;
    margin: 0 auto 18px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--brand-primary), #16a34a);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
}

.brand-process-step span {
    color: var(--brand-primary);
    font-size: 20px;
    font-weight: 900;
}

.brand-processStep h4,
.brand-process-step h4 {
    color: #18aa4e;
    font-size: 18px;
    font-weight: 900;
    margin: 8px 0;
}

.brand-process-step p {
    color: #212529;
    font-size: 14px;
    line-height: 1.55;
    margin: 0 auto;
    max-width: 160px;
}

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

.branding-portfolio {
    padding: 55px 0;
    background: #ffffff;
}

    .branding-portfolio .brand-section-title h2 {
        font-size: 38px;
        font-weight: 900;
        color: #07142f;
        margin: 10px 0;
    }

    .branding-portfolio .brand-section-title p {
        color: #5d6676;
        font-size: 16px;
    }

.brand-gallery-card {
    background: #ffffff;
    border: 1px solid #edf0f5;
    border-radius: 18px;
    overflow: hidden;
    transition: .3s ease;
    box-shadow: 0 12px 32px rgba(15, 23, 42, .06);
}

    .brand-gallery-card:hover {
        transform: translateY(-7px);
        box-shadow: 0 20px 45px rgba(15, 23, 42, .12);
    }

    .brand-gallery-card img {
        padding: 10px;
        width: 100%;
        height: 240px;
        object-fit: contain;
    }

    .brand-gallery-card div {
        padding: 22px;
    }

    .brand-gallery-card span {
        color: var(--brand-primary);
        font-weight: 900;
        font-size: 13px;
    }

    .brand-gallery-card h4 {
        color: #07142f;
        font-size: 21px;
        font-weight: 900;
        margin: 8px 0 0;
    }

/*=========================================================
BRANDING TOOLS SECTION
GREEN THEME
=========================================================*/

.branding-tools-section {
    position: relative;
    padding: 80px 0;
    background: linear-gradient(180deg, #ffffff 0%, #f6fcf8 100%);
    overflow: hidden;
}

    .branding-tools-section::before {
        content: "";
        position: absolute;
        width: 280px;
        height: 280px;
        background: radial-gradient(circle, rgba(10,147,100,.15), transparent 72%);
        top: -90px;
        right: -90px;
        border-radius: 50%;
    }

    .branding-tools-section::after {
        content: "";
        position: absolute;
        width: 220px;
        height: 220px;
        background: radial-gradient(circle, rgba(34,197,94,.12), transparent 72%);
        left: -80px;
        bottom: -80px;
        border-radius: 50%;
    }

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

.branding-tools-heading {
    margin-bottom: 60px;
    position: relative;
    z-index: 2;
}

.branding-tools-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 24px;
    border-radius: 50px;
    background: rgba(10,147,100,.10);
    color: #0a9364;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .6px;
    text-transform: uppercase;
    border: 1px solid rgba(10,147,100,.15);
}

    .branding-tools-badge i {
        font-size: 15px;
    }

.branding-tools-heading h2 {
    margin-top: 18px;
    font-size: 56px;
    font-weight: 900;
    color: #0f172a;
    line-height: 1.15;
}

    .branding-tools-heading h2 span {
        background: linear-gradient(90deg, #0a9364 0%, #22c55e 45%, #4ade80 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }

.branding-tools-divider {
    margin: 20px auto;
}

    .branding-tools-divider span {
        display: inline-block;
        width: 90px;
        height: 5px;
        border-radius: 30px;
        background: linear-gradient(90deg, #0a9364, #22c55e);
        position: relative;
    }

        .branding-tools-divider span::after {
            content: "";
            position: absolute;
            width: 12px;
            height: 12px;
            right: -14px;
            top: -4px;
            border-radius: 50%;
            background: #22c55e;
        }

.branding-tools-heading p {
    max-width: 720px;
    margin: auto;
    color: #64748b;
    font-size: 17px;
    line-height: 1.8;
}

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

.branding-tools-card {
    position: relative;
    background: #ffffff;
    border-radius: 24px;
    padding: 35px 22px 30px;
    text-align: center;
    transition: all .35s ease;
    height: 100%;
    overflow: hidden;
    border: 1px solid rgba(10,147,100,.10);
    box-shadow: 0 10px 35px rgba(10,147,100,.08);
}

    .branding-tools-card::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 5px;
    }

    .branding-tools-card:hover {
        transform: translateY(-10px);
        border-color: rgba(10,147,100,.20);
        box-shadow: 0 22px 55px rgba(10,147,100,.16);
    }

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

.branding-tools-icon {
    width: 95px;
    height: 95px;
    margin: auto;
    margin-bottom: 22px;
    border-radius: 24px;
    background: linear-gradient(135deg, #f4fff8, #e7f9ef);
    border: 1px solid rgba(10,147,100,.10);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .35s ease;
}

    .branding-tools-icon img {
        width: 60px;
        height: 60px;
        object-fit: contain;
        transition: .35s;
    }

.branding-tools-card:hover .branding-tools-icon {
    transform: scale(1.08) rotate(-3deg);
    background: linear-gradient(135deg, #0a9364, #22c55e);
    box-shadow: 0 15px 35px rgba(10,147,100,.25);
}

    .branding-tools-card:hover .branding-tools-icon img {
        transform: scale(1.05);
    }

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

.branding-tools-card h4 {
    font-size: 23px;
    font-weight: 800;
    color: #0f172a;
    margin-bottom: 12px;
}

.branding-tools-card p {
    color: #64748b;
    font-size: 15px;
    line-height: 1.75;
    margin: 0;
}

/*=========================================================
TOP BORDER COLORS
GREEN SHADES
=========================================================*/

.branding-tools-blue::before {
    background: #0a9364;
}

.branding-tools-orange::before {
    background: #16a34a;
}

.branding-tools-pink::before {
    background: #22c55e;
}

.branding-tools-purple::before {
    background: #15803d;
}

.branding-tools-cyan::before {
    background: #34d399;
}

.branding-tools-sky::before {
    background: #4ade80;
}

.branding-tools-green::before {
    background: #0f9d58;
}

.branding-tools-indigo::before {
    background: #166534;
}

/*=========================================================
BOTTOM ACCENT
=========================================================*/

.branding-tools-card::after {
    content: "";
    width: 55px;
    height: 4px;
    border-radius: 20px;
    position: absolute;
    bottom: 18px;
    left: 50%;
    transform: translateX(-50%);
}

.branding-tools-blue::after {
    background: #0a9364;
}

.branding-tools-orange::after {
    background: #16a34a;
}

.branding-tools-pink::after {
    background: #22c55e;
}

.branding-tools-purple::after {
    background: #15803d;
}

.branding-tools-cyan::after {
    background: #34d399;
}

.branding-tools-sky::after {
    background: #4ade80;
}

.branding-tools-green::after {
    background: #0f9d58;
}

.branding-tools-indigo::after {
    background: #166534;
}

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

@media (max-width:1200px) {

    .branding-tools-heading h2 {
        font-size: 48px;
    }
}

@media (max-width:991px) {

    .branding-tools-section {
        padding: 70px 0;
    }

    .branding-tools-heading {
        margin-bottom: 50px;
    }

        .branding-tools-heading h2 {
            font-size: 40px;
        }

    .branding-tools-card {
        padding: 30px 20px;
    }

    .branding-tools-icon {
        width: 85px;
        height: 85px;
    }

        .branding-tools-icon img {
            width: 54px;
            height: 54px;
        }
}

@media (max-width:767px) {

    .branding-tools-section {
        padding: 55px 0;
    }

    .branding-tools-heading {
        margin-bottom: 40px;
    }

        .branding-tools-heading h2 {
            font-size: 32px;
        }

        .branding-tools-heading p {
            font-size: 15px;
        }

    .branding-tools-card {
        padding: 28px 18px;
    }

        .branding-tools-card h4 {
            font-size: 20px;
        }

        .branding-tools-card p {
            font-size: 14px;
        }

    .branding-tools-icon {
        width: 78px;
        height: 78px;
        border-radius: 20px;
    }

        .branding-tools-icon img {
            width: 48px;
            height: 48px;
        }
}

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

.lgd-industries-section {
    padding: 100px 0;
    background: linear-gradient(180deg,#f7fffc 0%,#ffffff 100%);
    position: relative;
    overflow: hidden;
}

    .lgd-industries-section::before {
        content: "";
        position: absolute;
        width: 420px;
        height: 420px;
        background: #0A936420;
        border-radius: 50%;
        left: -180px;
        top: -180px;
        filter: blur(80px);
    }

    .lgd-industries-section::after {
        content: "";
        position: absolute;
        width: 380px;
        height: 380px;
        background: #16b67f20;
        border-radius: 50%;
        right: -150px;
        bottom: -150px;
        filter: blur(90px);
    }

.lgd-industries-tag {
    display: inline-block;
    padding: 10px 22px;
    border-radius: 50px;
    background: #e9fbf5;
    color: #0A9364;
    font-weight: 700;
    letter-spacing: .5px;
    margin-bottom: 18px;
}

.lgd-industries-title {
    font-size: 44px;
    font-weight: 800;
    color: #1c1c1c;
    margin-bottom: 18px;
}

.lgd-industries-desc {
    max-width: 720px;
    margin: auto;
    color: #666;
    font-size: 17px;
    line-height: 1.8;
}

.lgd-industries-card {
    position: relative;
    background: rgba(255,255,255,.75);
    backdrop-filter: blur(16px);
    border: 1px solid rgba(10,147,100,.08);
    border-radius: 24px;
    padding: 40px 20px;
    text-align: center;
    overflow: hidden;
    transition: .45s;
    height: 100%;
    box-shadow: 0 18px 45px rgba(0,0,0,.05);
}

    .lgd-industries-card::before {
        content: "";
        position: absolute;
        width: 140px;
        height: 140px;
        background: linear-gradient(135deg,#0A9364,#21C58B);
        border-radius: 50%;
        top: -75px;
        right: -75px;
        opacity: .12;
        transition: .5s;
    }

    .lgd-industries-card::after {
        content: "";
        position: absolute;
        width: 90px;
        height: 90px;
        border: 2px dashed rgba(10,147,100,.15);
        border-radius: 50%;
        left: -45px;
        bottom: -45px;
        transition: .5s;
    }

.lgd-industries-icon {
    width: 82px;
    height: 82px;
    margin: auto;
    border-radius: 24px;
    background: linear-gradient(135deg,#0A9364,#22c98f);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 32px;
    box-shadow: 0 18px 40px rgba(10,147,100,.28);
    transition: .45s;
}

.lgd-industries-card h4 {
    margin-top: 25px;
    margin-bottom: 0;
    font-size: 22px;
    font-weight: 700;
    color: #222;
}

.lgd-industries-card:hover {
    transform: translateY(-12px);
    border-color: #0A9364;
    box-shadow: 0 30px 60px rgba(10,147,100,.18);
}

    .lgd-industries-card:hover .lgd-industries-icon {
        transform: rotate(12deg) scale(1.12);
    }

    .lgd-industries-card:hover::before {
        transform: scale(1.35);
        opacity: .22;
    }

    .lgd-industries-card:hover::after {
        transform: rotate(180deg);
    }

@media(max-width:991px) {

    .lgd-industries-title {
        font-size: 36px;
    }
}

@media(max-width:767px) {

    .lgd-industries-section {
        padding: 70px 0;
    }

    .lgd-industries-title {
        font-size: 30px;
    }

    .lgd-industries-desc {
        font-size: 15px;
    }

    .lgd-industries-card {
        padding: 35px 15px;
    }

    .lgd-industries-icon {
        width: 72px;
        height: 72px;
        font-size: 28px;
    }

    .lgd-industries-card h4 {
        font-size: 20px;
    }
}


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

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

/* FINAL CTA - Logo & Graphic Design */
.lgd-final-cta {
    background: #fff;
}

.lgd-final-cta-box {
    position: relative;
    min-height: 112px;
    background: radial-gradient(circle at 85% 50%, rgba(34, 197, 94, .32), transparent 34%), linear-gradient(120deg, #020b20 0%, #062515 48%, #06401f 100%);
    padding: 26px 42px 26px 260px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 25px;
    overflow: visible;
    box-shadow: 0 18px 42px rgba(0, 0, 0, .18);
}

.lgd-cta-art {
    position: absolute;
    left: 35px;
    bottom: 0;
    width: 185px;
    z-index: 2;
}

    .lgd-cta-art img {
        width: 100%;
        display: block;
    }

.lgd-cta-content {
    color: #fff;
}

    .lgd-cta-content h2 {
        font-size: 24px;
        font-weight: 900;
        margin: 0 0 8px;
        color: #fff;
    }

    .lgd-cta-content p {
        font-size: 15px;
        color: rgba(255,255,255,.82);
        margin: 0;
    }

.lgd-cta-btn {
    background: #22c55e;
    color: #fff;
    padding: 14px 28px;
    border-radius: 8px;
    font-weight: 900;
    text-decoration: none;
    white-space: nowrap;
    box-shadow: 0 10px 25px rgba(34, 197, 94, .25);
}

    .lgd-cta-btn:hover {
        background: #16a34a;
        color: #fff;
    }

    .lgd-cta-btn i {
        margin-left: 8px;
    }

@media (max-width: 991px) {
    .lgd-final-cta-box {
        padding: 120px 25px 30px;
        flex-direction: column;
        text-align: center;
    }

    .lgd-cta-art {
        left: 50%;
        top: -25px;
        bottom: auto;
        transform: translateX(-50%);
        width: 150px;
    }
}

@media (max-width: 575px) {
    .lgd-final-cta-box {
        padding: 105px 18px 24px;
        border-radius: 8px;
    }

    .lgd-cta-content h2 {
        font-size: 22px;
    }

    .lgd-cta-btn {
        width: 100%;
        text-align: center;
    }
}


/*==============================================
           DIGITAL-MARKETING
==============================================*/
/* DIGITAL MARKETING HERO - DARK */
.dm-hero {
    padding: 120px 0 80px;
    background: radial-gradient(circle at 78% 35%, rgba(37, 99, 235, 0.35), transparent 36%), linear-gradient(135deg, #020b20 0%, #031533 52%, #061c48 100%);
    overflow: hidden;
}

/* Badge */
.dm-hero-badge {
    color: #60a5fa;
    font-size: 14px;
    font-weight: 900;
    letter-spacing: .8px;
    margin-bottom: 16px;
    display: inline-block;
}

/* Heading */
.dm-hero h1 {
    color: #ffffff;
    font-size: 54px;
    line-height: 1.15;
    font-weight: 900;
    margin-bottom: 22px;
}

    .dm-hero h1 span {
        color: #3b82f6;
    }

/* Paragraph */
.dm-hero p {
    color: rgba(255,255,255,0.75);
    font-size: 17px;
    line-height: 1.8;
    max-width: 560px;
    margin-bottom: 30px;
}

/* Buttons */
.dm-hero-btns {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 40px;
}

.dm-primary-btn {
    background: #3b82f6;
    color: #fff;
    padding: 14px 26px;
    border-radius: 7px;
    font-weight: 900;
    border: 1px solid #3b82f6;
    box-shadow: 0 10px 30px rgba(59, 130, 246, 0.25);
}

    .dm-primary-btn:hover {
        background: #2563eb;
        color: #fff;
    }

.dm-outline-btn {
    background: transparent;
    color: #3b82f6;
    padding: 14px 26px;
    border-radius: 7px;
    font-weight: 900;
    border: 1px solid rgba(59, 130, 246, 0.4);
}

    .dm-outline-btn:hover {
        background: #3b82f6;
        color: #fff;
    }

/* Features */
.dm-hero-features {
/*    display: flex;*/
    gap: 28px;
    flex-wrap: wrap;
}

    .dm-hero-features span {
        color: #ffffff;
        font-size: 14px;
        font-weight: 800;
    }

    .dm-hero-features i {
        color: #3b82f6;
        margin-right: 7px;
    }

/* Visual */
.dm-hero-visual {
    position: relative;
    min-height: 430px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dm-main-img {
    max-width: 100%;
    position: relative;
    z-index: 2;
}

/* Floating Icons */
.dm-floating-icons {
    position: absolute;
    top: 20px;
    left: 70px;
    display: flex;
    gap: 24px;
    z-index: 4;
}

.dm-social-icon {
    width: 62px;
    height: 62px;
    border-radius: 13px;
    background: rgba(255,255,255,0.06);
    backdrop-filter: blur(10px);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 16px 35px rgba(0,0,0,0.35);
}

    .dm-social-icon img {
        max-width: 36px;
        max-height: 36px;
    }

/*==========SERVICE section=============*/
/* DIGITAL MARKETING SERVICES */
.dm-services-section {
    padding: 75px 0;
    background: #ffffff;
}

.dm-section-title {
    max-width: 760px;
    margin: 0 auto 42px;
}

    .dm-section-title span {
        color: #1268ff;
        font-size: 13px;
        font-weight: 900;
        letter-spacing: .8px;
    }

    .dm-section-title h2 {
        color: #07142f;
        font-size: 36px;
        font-weight: 900;
        margin: 10px 0 10px;
    }

    .dm-section-title p {
        color: #5d6676;
        font-size: 16px;
        margin: 0;
    }

.dm-service-card {
    height: 100%;
    background: #ffffff;
    border: 1px solid #e5edf8;
    border-radius: 14px;
    padding: 36px 28px 32px;
    box-shadow: 0 14px 35px rgba(15, 23, 42, 0.04);
    transition: all .3s ease;
}

    .dm-service-card:hover {
        transform: translateY(-8px);
        border-color: #b9d6ff;
        box-shadow: 0 22px 45px rgba(18, 104, 255, 0.12);
    }

.dm-service-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: #eef6ff;
    color: #1268ff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    margin-bottom: 26px;
}

    .dm-service-icon img {
        max-width: 36px;
        max-height: 36px;
    }

.dm-social-logos {
    width: auto;
    height: 64px;
    background: transparent;
    justify-content: flex-start;
    gap: 0;
}

    .dm-social-logos i {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        background: #eef6ff;
        color: #1268ff;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 22px;
        margin-left: -4px;
    }

        .dm-social-logos i:first-child {
            margin-left: 0;
        }

.dm-service-card h4 {
    color: #07142f;
    font-size: 18px;
    font-weight: 900;
    margin-bottom: 14px;
}

.dm-service-card p {
    color: #5d6676;
    font-size: 15px;
    line-height: 1.8;
    margin: 0;
}

.dm-platform-section {
    padding: 90px 0;
    background: #fff;
}

.dm-platform-heading {
    max-width: 760px;
    margin: auto auto 70px;
}

    .dm-platform-heading span {
        display: inline-block;
        color: #6c63ff;
        font-weight: 700;
        font-size: 13px;
        letter-spacing: 2px;
        text-transform: uppercase;
        margin-bottom: 12px;
    }

    .dm-platform-heading h2 {
        font-size: 46px;
        font-weight: 700;
        color: #111827;
        margin-bottom: 20px;
    }

        .dm-platform-heading h2 span {
            color: #6c63ff;
            letter-spacing: 0;
            text-transform: none;
            font-size: inherit;
        }

    .dm-platform-heading p {
        color: #6b7280;
        font-size: 17px;
        line-height: 1.8;
    }

.dm-platform-wrapper {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 45px;
}

.dm-platform-item {
    position: relative;
    text-align: center;
    width: 110px;
}

.dm-platform-circle {
    width: 82px;
    height: 82px;
    margin: auto;
    background: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 12px 35px rgba(111,95,255,.12), 0 0 0 8px rgba(111,95,255,.03);
    position: relative;
    transition: .35s;
}

    .dm-platform-circle img {
        width: 42px;
        height: 42px;
        object-fit: contain;
    }

.dm-platform-item:hover .dm-platform-circle {
    transform: translateY(-8px);
    box-shadow: 0 18px 45px rgba(111,95,255,.18), 0 0 0 10px rgba(111,95,255,.05);
}

.dm-platform-circle::after {
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: -32px;
    width: 2px;
    height: 24px;
    background: #e4e7ef;
}

.dm-platform-dot {
    display: block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin: 28px auto 14px;
}

.dm-platform-item h5 {
    font-size: 15px;
    font-weight: 600;
    color: #222;
    margin: 0;
}

/* Colors */

.google {
    background: #fbbc05;
}

.facebook {
    background: #1877f2;
}

.instagram {
    background: #e1306c;
}

.linkedin {
    background: #0a66c2;
}

.youtube {
    background: #ff0000;
}

.twitter {
    background: #111;
}

.pinterest {
    background: #bd081c;
}

.tiktok {
    background: #25f4ee;
}

@media(max-width:991px) {

    .dm-platform-heading h2 {
        font-size: 34px;
    }

    .dm-platform-wrapper {
        gap: 30px;
    }

    .dm-platform-item {
        width: 95px;
    }

    .dm-platform-circle {
        width: 72px;
        height: 72px;
    }

        .dm-platform-circle img {
            width: 36px;
            height: 36px;
        }
}

@media(max-width:576px) {

    .dm-platform-wrapper {
        gap: 22px;
    }

    .dm-platform-item {
        width: 80px;
    }

    .dm-platform-heading h2 {
        font-size: 28px;
    }

    .dm-platform-heading p {
        font-size: 15px;
    }
}
.dm-location {
    padding: 40px 0;
    background: linear-gradient(135deg, #f8fbff 0%, #eef5ff 100%);
}

    .dm-location .container {
        max-width: 1100px;
        margin: 0 auto;
        text-align: center;
        background: #fff;
        padding: 60px 50px;
        border-radius: 24px;
        box-shadow: 0 20px 50px rgba(15, 23, 42, 0.08);
        position: relative;
        overflow: hidden;
    }

        .dm-location .container::before {
            content: "";
            position: absolute;
            width: 220px;
            height: 220px;
            background: rgba(37, 99, 235, 0.08);
            border-radius: 50%;
            top: -110px;
            left: -80px;
        }

        .dm-location .container::after {
            content: "";
            position: absolute;
            width: 180px;
            height: 180px;
            background: rgba(124, 58, 237, 0.08);
            border-radius: 50%;
            bottom: -90px;
            right: -70px;
        }

    .dm-location h2 {
        position: relative;
        z-index: 2;
        font-size: 42px;
        font-weight: 700;
        color: #0f172a;
        line-height: 1.3;
        margin-bottom: 24px;
    }

        .dm-location h2::after {
            content: "";
            display: block;
            width: 90px;
            height: 4px;
            background: linear-gradient(90deg, #2563eb, #7c3aed);
            border-radius: 30px;
            margin: 18px auto 0;
        }

    .dm-location p {
        position: relative;
        z-index: 2;
        font-size: 17px;
        line-height: 1.9;
        color: #64748b;
        max-width: 900px;
        margin: 0 auto;
    }

/* Responsive */

@media (max-width: 991px) {

    .dm-location {
        padding: 70px 0;
    }

        .dm-location .container {
            padding: 45px 35px;
        }

        .dm-location h2 {
            font-size: 34px;
        }

        .dm-location p {
            font-size: 16px;
        }
}

@media (max-width: 767px) {

    .dm-location .container {
        padding: 35px 25px;
        border-radius: 18px;
    }

    .dm-location h2 {
        font-size: 28px;
    }

    .dm-location p {
        font-size: 15px;
        line-height: 1.8;
    }
}
/*==========================================
  IDEAL FOR SECTION
==========================================*/

.dm-location h3 {
    position: relative;
    z-index: 2;
    font-size: 30px;
    font-weight: 700;
    color: #0f172a;
    margin: 50px 0 15px;
    text-align: center;
}

    .dm-location h3::after {
        content: "";
        display: block;
        width: 70px;
        height: 3px;
        background: linear-gradient(90deg, #2563eb, #7c3aed);
        border-radius: 30px;
        margin: 12px auto 0;
    }

/* List */

.dm-location ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

    .dm-location ul li {
        display: flex;
        align-items: center;
        gap: 12px;
        background: #f8fbff;
        border: 1px solid #e5e7eb;
        border-radius: 12px;
        padding: 14px 18px;
        margin-bottom: 15px;
        color: #334155;
        font-size: 16px;
        font-weight: 600;
        transition: all .3s ease;
        text-align: left;
    }

        .dm-location ul li::before {
            content: "\f058";
            font-weight: 900;
            color: #16a34a;
            font-size: 18px;
            flex-shrink: 0;
        }

        .dm-location ul li:hover {
            background: #ffffff;
            border-color: #2563eb;
            color: #2563eb;
            transform: translateY(-3px);
            box-shadow: 0 10px 25px rgba(37,99,235,.08);
        }

/* Responsive */

@media (max-width: 767px) {

    .dm-location h3 {
        font-size: 24px;
    }

    .dm-location ul li {
        font-size: 15px;
        padding: 12px 15px;
    }
}
/*=========================================
    Business Benefits Cards
=========================================*/

.dm-benefit-card {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 18px;
    padding: 30px 24px;
    text-align: center;
    height: 100%;
    transition: all .35s ease;
    box-shadow: 0 8px 25px rgba(0,0,0,.04);
    position: relative;
    overflow: hidden;
}

    .dm-benefit-card::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 4px;
        background: linear-gradient(90deg,#2563eb,#0ea5e9);
        transform: scaleX(0);
        transition: .35s;
    }

    .dm-benefit-card:hover {
        transform: translateY(-8px);
        box-shadow: 0 20px 40px rgba(37,99,235,.12);
        border-color: #dbeafe;
    }

        .dm-benefit-card:hover::before {
            transform: scaleX(1);
        }

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

.dm-benefit-icon {
    width: 70px;
    height: 70px;
    margin: 0 auto 22px;
    border-radius: 50%;
    background: linear-gradient(135deg,#2563eb,#0ea5e9);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    transition: .35s;
}

.dm-benefit-card:hover .dm-benefit-icon {
    transform: rotate(10deg) scale(1.08);
}

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

.dm-location h3 {
    font-size: 2rem;
    font-weight: 700;
    color: #111827;
    margin-bottom: 35px;
    text-align: center;
}

/*=========================================
    Card Title
=========================================*/

.dm-benefit-card h5 {
    font-size: 1.15rem;
    font-weight: 700;
    color: #111827;
    margin-bottom: 15px;
    line-height: 1.4;
}

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

.dm-benefit-card p {
    margin: 0;
    color: #6b7280;
    font-size: .95rem;
    line-height: 1.8;
}

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

@media(max-width:991px) {

    .dm-benefit-card {
        padding: 25px 20px;
    }

    .dm-location h3 {
        font-size: 1.8rem;
    }
}

@media(max-width:767px) {

    .dm-location h3 {
        font-size: 1.6rem;
    }

    .dm-benefit-icon {
        width: 60px;
        height: 60px;
        font-size: 24px;
    }

    .dm-benefit-card h5 {
        font-size: 1rem;
    }

    .dm-benefit-card p {
        font-size: .9rem;
    }
}

/*========PROCESS===========*/
.dm-process-section {
    padding: 75px 0;
    background: #ffffff;
}

.dm-process-title {
    max-width: 780px;
    margin: 0 auto 55px;
}

    .dm-process-title span {
        color: #1268ff;
        font-size: 13px;
        font-weight: 900;
        letter-spacing: .8px;
    }

    .dm-process-title h2 {
        color: #07142f;
        font-size: 34px;
        font-weight: 900;
        margin: 8px 0 10px;
    }

    .dm-process-title p {
        color: #5d6676;
        font-size: 16px;
        margin: 0;
    }

.dm-process-wrapper {
    position: relative;
    display: flex;
    justify-content: space-between;
    gap: 25px;
}

.dm-process-line {
    position: absolute;
    top: 44px;
    left: 10%;
    right: 10%;
    border-top: 4px dotted #93c5fd;
    z-index: 0;
}

.dm-process-step {
    position: relative;
    z-index: 2;
    width: 20%;
    text-align: center;
}

.dm-process-icon {
    width: 88px;
    height: 88px;
    margin: 0 auto 22px;
    border: 3px solid #1268ff;
    border-radius: 50%;
    background: #ffffff;
    color: #1268ff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 34px;
}

.dm-process-step span {
    color: #1268ff;
    font-size: 14px;
    font-weight: 900;
    display: block;
    margin-bottom: 6px;
}

.dm-process-step h4 {
    color: #07142f;
    font-size: 17px;
    font-weight: 900;
    margin-bottom: 10px;
}

.dm-process-step p {
    color: #5d6676;
    font-size: 14px;
    line-height: 1.7;
    max-width: 190px;
    margin: 0 auto;
}

/*================ CAMPAIGNS ================*/

.dm-campaign-section {
    padding: 90px 0;
    background: linear-gradient(180deg,#f8fbff 0%,#ffffff 100%);
}

.dm-campaign-title {
    margin-bottom: 60px;
}

    .dm-campaign-title span {
        display: inline-block;
        font-size: 13px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 2px;
        color: #2563eb;
        background: #eaf2ff;
        padding: 8px 18px;
        border-radius: 30px;
    }

    .dm-campaign-title h2 {
        font-size: 44px;
        font-weight: 800;
        color: #0f172a;
        margin-top: 18px;
    }

.dm-campaign-card {
    position: relative;
    background: #fff;
    border-radius: 22px;
    padding: 35px 20px 28px;
    text-align: center;
    border: 1px solid #edf2f7;
    overflow: hidden;
    transition: .35s;
    height: 100%;
}

    .dm-campaign-card::before {
        content: "";
        position: absolute;
        top: -60px;
        left: 50%;
        transform: translateX(-50%);
        width: 140px;
        height: 140px;
        border-radius: 50%;
        background: linear-gradient(135deg,#2563eb,#7c3aed);
        opacity: .08;
    }

    .dm-campaign-card:hover {
        transform: translateY(-10px);
        box-shadow: 0 25px 55px rgba(37,99,235,.15);
        border-color: #dbeafe;
    }

    .dm-campaign-card img,
    .dm-campaign-card i {
        position: relative;
        z-index: 2;
    }

    .dm-campaign-card img {
        width: 64px;
        height: 64px;
        object-fit: contain;
        margin-bottom: 20px;
    }

    .dm-campaign-card i {
        width: 64px;
        height: 64px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 34px;
        color: #2563eb;
        background: #f4f8ff;
        border-radius: 50%;
        margin-bottom: 20px;
    }
    .dm-campaign-card p {
        margin: 0;
        margin-top: 12px;
        font-size: 14px;
        line-height: 1.7;
        color: #64748b;
    }
    .dm-campaign-card h4 {
        font-size: 18px;
        font-weight: 700;
        color: #111827;
        margin-bottom: 12px;
    }

        .dm-campaign-card h4::after {
            content: "Campaign";
            display: block;
            width: max-content;
            margin: 12px auto 0;
            padding: 5px 14px;
            font-size: 11px;
            font-weight: 600;
            color: #2563eb;
            background: #eef4ff;
            border-radius: 30px;
            letter-spacing: .5px;
        }

    .dm-campaign-card:hover img,
    .dm-campaign-card:hover i {
        transform: scale(1.08);
        transition: .35s;
    }

@media(max-width:991px) {

    .dm-campaign-title h2 {
        font-size: 36px;
    }
}

@media(max-width:576px) {

    .dm-campaign-section {
        padding: 70px 0;
    }

    .dm-campaign-title h2 {
        font-size: 30px;
    }
}

/*=======STATS==========*/
.dm-stats-section {
    padding: 35px 0;
    background: #ffffff;
}

.dm-stats-box {
    background: linear-gradient(120deg, #020d24 0%, #0c275c 55%, #051b45 100%);
    border-radius: 12px;
    padding: 24px 34px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    box-shadow: 0 18px 42px rgba(18, 104, 255, 0.22);
}

.dm-stat-item {
    display: flex;
    align-items: center;
    gap: 16px;
    min-width: 0;
}

.dm-stat-icon {
    width: 62px;
    height: 62px;
    min-width: 62px;
    border-radius: 50%;
    background: #ffffff;
    color: #1268ff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
}

.dm-stat-item h3 {
    color: #ffffff;
    font-size: 34px;
    font-weight: 900;
    line-height: 1;
    margin: 0;
}

.dm-stat-item p {
    color: #ffffff;
    font-size: 13px;
    font-weight: 700;
    margin: 6px 0 0;
    white-space: nowrap;
}

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

/* Tablet */
@media (max-width: 991px) {

    .dm-hero {
        padding: 135px 0 55px;
        text-align: center;
    }

        .dm-hero h1 {
            font-size: 42px;
        }

        .dm-hero p {
            margin-left: auto;
            margin-right: auto;
        }

    .dm-hero-btns,
    .dm-hero-features {
        justify-content: center;
    }

    .dm-hero-visual {
        margin-top: 40px;
        min-height: auto;
    }

    .dm-main-img {
        max-width: 85%;
    }

    .dm-floating-icons {
        position: static;
        justify-content: center;
        margin-bottom: 20px;
    }

    .dm-services-section,
    .dm-process-section,
    .dm-campaign-section {
        padding: 60px 0;
    }

    .dm-section-title h2,
    .dm-process-title h2,
    .dm-campaign-title h2 {
        font-size: 30px;
    }

    .dm-why-box {
        padding: 30px 24px;
    }

    .dm-why-card {
        border-right: none;
        padding-right: 0;
    }

    .dm-process-wrapper {
        flex-wrap: wrap;
        justify-content: center;
        gap: 35px 25px;
    }

    .dm-process-line {
        display: none;
    }

    .dm-process-step {
        width: 30%;
    }

    .dm-stats-box {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
        padding: 28px;
    }

    .dm-stat-item {
        justify-content: flex-start;
    }
}

/* Mobile */
@media (max-width: 575px) {

    .dm-hero {
        padding: 135px 0 45px;
    }

        .dm-hero h1 {
            font-size: 31px;
            line-height: 1.25;
        }

        .dm-hero p {
            font-size: 15px;
            line-height: 1.7;
        }

    .dm-primary-btn,
    .dm-outline-btn {
        width: 100%;
        padding: 13px 20px;
    }

    .dm-hero-btns {
        gap: 12px;
        margin-bottom: 28px;
    }

    .dm-hero-features {
        align-items: center;
    }

        .dm-hero-features span {
            width: auto;
            font-size: 13px;
        }

    .dm-main-img {
        max-width: 70%;
    }

    .dm-social-icon {
        width: 52px;
        height: 52px;
    }

        .dm-social-icon img {
            max-width: 30px;
            max-height: 30px;
        }

    .dm-services-section,
    .dm-process-section,
    .dm-campaign-section {
        padding: 45px 0;
    }

    .dm-section-title,
    .dm-process-title {
        margin-bottom: 30px;
        padding: 0 8px;
    }

        .dm-section-title h2,
        .dm-process-title h2,
        .dm-campaign-title h2,
        .dm-why-title h2 {
            font-size: 25px;
            line-height: 1.25;
        }

        .dm-section-title p,
        .dm-process-title p {
            font-size: 14px;
        }

    .dm-service-card {
        padding: 26px 22px;
        text-align: center;
    }

    .dm-service-icon {
        margin-left: auto;
        margin-right: auto;
    }

    .dm-social-logos {
        justify-content: center;
        margin-left: auto;
        margin-right: auto;
    }

    .dm-why-box {
        padding: 26px 18px;
        border-radius: 14px;
    }



    .dm-process-icon {
        width: 74px;
        height: 74px;
        font-size: 28px;
        margin-bottom: 16px;
    }

    .dm-process-step p {
        max-width: 280px;
    }

    .dm-campaign-card {
        height: 135px;
    }

        .dm-campaign-card img {
            width: 48px;
            height: 48px;
            margin-bottom: 16px;
        }

        .dm-campaign-card i {
            font-size: 48px;
            margin-bottom: 16px;
        }

    .dm-stats-box {
        padding: 24px 20px;
        gap: 22px;
    }

    .dm-stat-item {
        justify-content: flex-start;
        gap: 15px;
    }

    .dm-stat-icon {
        width: 54px;
        height: 54px;
        min-width: 54px;
        font-size: 22px;
    }

    .dm-stat-item h3 {
        font-size: 30px;
    }

    .dm-stat-item p {
        font-size: 13px;
        white-space: normal;
    }
}
/*==============CTA================*/
.dm-final-cta {
    background: #ffffff;
}

.dm-final-cta-box {
    background: linear-gradient(120deg, #061c3a 0%, #03142a 52%, #07284d 100%);
    border: 1px solid #dcecff;
    padding: 42px 70px;
    display: flex;
    align-items: center;
    gap: 70px;
}

.dm-final-cta-img {
    flex: 0 0 360px;
}

    .dm-final-cta-img img {
        width: 100%;
        display: block;
    }

.dm-final-cta-content h2 {
    color: rgb(255 255 255);
    font-size: 34px;
    font-weight: 900;
    margin-bottom: 16px;
}

.dm-final-cta-content p {
    color: #e9f1ff;
    font-size: 18px;
    line-height: 1.7;
    max-width: 560px;
    margin-bottom: 24px;
}

.dm-final-cta-btn {
    background: #1268ff;
    color: #ffffff;
    padding: 14px 28px;
    border-radius: 7px;
    font-weight: 900;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

    .dm-final-cta-btn:hover {
        background: #0756de;
        color: #ffffff;
    }

@media (max-width: 991px) {
    .dm-final-cta-box {
        flex-direction: column;
        text-align: center;
        padding: 36px 28px;
        gap: 30px;
    }

    .dm-final-cta-img {
        flex: 0 0 auto;
        max-width: 320px;
    }
}

@media (max-width: 575px) {
    .dm-final-cta-box {
        padding: 28px 20px;
    }

    .dm-final-cta-content h2 {
        font-size: 26px;
    }

    .dm-final-cta-content p {
        font-size: 15px;
    }

    .dm-final-cta-btn {
        width: 100%;
        justify-content: center;
    }
}


/*====================================================
           Mobile App Development
====================================================*/
/* Mobile App Hero */
.mad-hero-section {
    background: radial-gradient(circle at 75% 40%, rgba(255, 61, 126, 0.4), transparent 45%), linear-gradient(120deg, #1a0610 0%, #0f0310 52%, #260a1a 100%);
        padding: 135px 0 0;
}


.mad-hero-badge {
    color: #ff3d7e;
    font-size: 13px;
    font-weight: 900;
    letter-spacing: .8px;
    margin-bottom: 18px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.mad-hero-content h1 {
    color: #ffffff;
    font-size: 48px;
    line-height: 1.18;
    font-weight: 900;
    margin-bottom: 24px;
}

    .mad-hero-content h1 span {
        color: #ff3d7e;
    }

.mad-hero-content p {
    color: #dfdfdf;
    font-size: 17px;
    line-height: 1.8;
    max-width: 560px;
    margin-bottom: 32px;
}

.mad-hero-btns {
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
}

.mad-btn-primary,
.mad-btn-outline {
    padding: 14px 28px;
    border-radius: 5px;
    font-size: 15px;
    font-weight: 900;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.mad-btn-primary {
    background: #ff3d7e;
    color: #ffffff;
    border: 1px solid #ff3d7e;
}

    .mad-btn-primary:hover {
        background: #e92d6d;
        color: #ffffff;
    }

.mad-btn-outline {
    background: #ffffff;
    color: #07142f;
    border: 2px solid #ffb6ce;
}

    .mad-btn-outline:hover {
        background: #ff3d7e;
        color: #ffffff;
        border-color: #ff3d7e;
    }

.mad-hero-img {
    text-align: center;
    position: relative;
}

    .mad-hero-img img {
        max-width: 130%;
        display: inline-block;
        filter: drop-shadow(0 24px 36px rgba(15, 23, 42, 0.16));
    }

/* Bottom Strip */
.mad-services-strip {
    margin-top: 30px;
    background: #ffffff;
    border: 1px solid #f2dbe4;
    box-shadow: 0 16px 35px rgba(15, 23, 42, 0.05);
}

.mad-strip-item {
    min-height: 92px;
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 24px 30px;
    border-right: 1px solid #f0dfe6;
}

.mad-strip-last {
    border-right: none;
}

.mad-strip-icon {
    width: 52px;
    height: 52px;
    min-width: 52px;
    border-radius: 50%;
    background: #fff0f6;
    color: #ff3d7e;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
}

.mad-strip-item h4 {
    color: #07142f;
    font-size: 18px;
    font-weight: 900;
    line-height: 1.35;
    margin: 0;
}

/* Responsive */
@media (max-width: 991px) {
/*    .mad-hero-section {
        padding: 75px 0 40px;
    }*/

    .mad-hero-box {
        padding: 135px 28px 38px;
        text-align: center;
    }

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

    .mad-hero-content p {
        margin-left: auto;
        margin-right: auto;
    }

    .mad-hero-btns {
        justify-content: center;
    }

    .mad-hero-img {
        margin-top: 38px;
    }

        .mad-hero-img img {
            max-width: 78%;
        }

    .mad-strip-item {
        border-right: none;
        border-bottom: 1px solid #f0dfe6;
    }
}

@media (max-width: 575px) {
    .mad-hero-box {
        padding: 13px 5px 20px 32px;
    }

    .mad-hero-content h1 {
        font-size: 31px;
    }

    .mad-hero-content p {
        font-size: 15px;
    }

    .mad-btn-primary,
    .mad-btn-outline {
        width: 100%;
    }

    .mad-hero-img img {
        max-width: 100%;
    }

    .mad-strip-item {
        padding: 20px;
    }

        .mad-strip-item h4 {
            font-size: 16px;
        }
}

/*===========Services===========*/
.mad-app-services {
    padding: 80px 0;
    background: #ffffff;
}

/* Title */
.mad-section-title span {
    color: #ff3d7e;
    font-size: 13px;
    font-weight: 900;
    letter-spacing: 1px;
}

.mad-section-title h2 {
    font-size: 34px;
    font-weight: 900;
    color: #07142f;
    margin: 10px 0;
}

.mad-section-title p {
    color: #5d6676;
    font-size: 16px;
}

/* Cards */
.mad-app-card {
    height: 100%;
    background: #fff0f640;
    border: 1px solid #f2dbe4;
    border-radius: 14px;
    padding: 30px 24px;
    text-align: left;
    transition: all 0.3s ease;
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.04);
}

    .mad-app-card:hover {
        transform: translateY(-8px);
        box-shadow: 0 20px 40px rgba(255, 61, 126, 0.15);
        border-color: #ffb6ce;
    }

/* Icon */
.mad-app-icon {
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: #fff0f6;
    color: #ff3d7e;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    margin-bottom: 18px;
}

/* Text */
.mad-app-card h4 {
    font-size: 18px;
    font-weight: 900;
    color: #07142f;
    margin-bottom: 10px;
}

.mad-app-card p {
    font-size: 14px;
    color: #5d6676;
    line-height: 1.7;
}

/* Responsive */
@media (max-width: 991px) {
    .mad-section-title h2 {
        font-size: 28px;
    }
}

@media (max-width: 575px) {
    .mad-app-card {
        text-align: center;
    }

    .mad-app-icon {
        margin-left: auto;
        margin-right: auto;
    }
}

/*==========PROCESS==========*/
.mad-process-section {
    background: #ffffff;
}

/* Title */
.mad-process-title span {
    color: #ff3d7e;
    font-size: 13px;
    font-weight: 900;
    letter-spacing: 1px;
}

.mad-process-title h2 {
    font-size: 34px;
    font-weight: 900;
    color: #07142f;
    margin-top: 10px;
}

/* Wrapper */
.mad-process-wrapper {
    position: relative;
    display: flex;
    justify-content: space-between;
    margin-top: 60px;
}

/* Dotted line */
.mad-process-line {
    position: absolute;
    top: 42px;
    left: 0;
    width: 100%;
    height: 2px;
    border-top: 2px dashed #ffc1d6;
    z-index: 1;
}

/* Step */
.mad-process-step {
    width: 16%;
    text-align: center;
    position: relative;
    z-index: 2;
}

/* Icon */
.mad-process-icon {
    width: 84px;
    height: 84px;
    border-radius: 50%;
    background: #fff0f6;
    border: 2px solid #ffd3e3;
    color: #ff3d7e;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    margin: 0 auto 18px;
    transition: all 0.3s ease;
}

.mad-process-step:hover .mad-process-icon {
    background: #ff3d7e;
    color: #fff;
    transform: translateY(-6px);
}

/* Text */
.mad-process-step h5 {
    font-size: 16px;
    font-weight: 900;
    color: #07142f;
    margin-bottom: 8px;
}

.mad-process-step p {
    font-size: 13px;
    color: #5d6676;
    line-height: 1.6;
}

/* Responsive */
@media (max-width: 991px) {
    .mad-process-wrapper {
        flex-wrap: wrap;
        justify-content: center;
        gap: 30px;
    }

    .mad-process-line {
        display: none;
    }

    .mad-process-step {
        width: 30%;
    }
}

@media (max-width: 575px) {


    .mad-process-title h2 {
        font-size: 26px;
    }
}

/*============SHOW_CASE===========*/
.mad-showcase-section {
    padding: 75px 0;
    background: #ffffff;
}

.mad-showcase-title {
    margin-bottom: 35px;
}

    .mad-showcase-title span {
        color: #ff3d7e;
        font-size: 13px;
        font-weight: 900;
        letter-spacing: 1px;
    }

    .mad-showcase-title h2 {
        color: #07142f;
        font-size: 30px;
        font-weight: 900;
        margin-top: 8px;
    }

.mad-showcase-row {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: 36px;
    flex-wrap: nowrap;
}

.mad-showcase-phone {
    width: 140px;
    height: 285px;
    border: 3px solid #ff9fbd;
    border-radius: 22px;
    background: #fff;
    padding: 6px;
    box-shadow: 0 18px 36px rgba(255, 61, 126, 0.12);
    overflow: hidden;
    transition: all .3s ease;
}

    .mad-showcase-phone:hover {
        transform: translateY(-10px);
        box-shadow: 0 24px 45px rgba(255, 61, 126, 0.2);
    }

    .mad-showcase-phone img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 17px;
        display: block;
    }

@media (max-width: 991px) {
    .mad-showcase-row {
        flex-wrap: wrap;
        gap: 24px;
    }

    .mad-showcase-phone {
        width: 130px;
        height: 265px;
    }
}

@media (max-width: 575px) {
    .mad-showcase-section {
        padding: 55px 0;
    }

    .mad-showcase-title h2 {
        font-size: 24px;
    }

    .mad-showcase-row {
        gap: 18px;
    }

    .mad-showcase-phone {
        width: 125px;
        height: 255px;
    }
}

/*==================================================
        WHY CHOOSE US + FAQ SECTION
==================================================*/
.mad-faq {
    position: relative;
    overflow: hidden;
    background: radial-gradient(circle at top left,#ffeef5 0%,transparent 35%), radial-gradient(circle at bottom right,#ffe8f2 0%,transparent 35%), #fff;
}

    .mad-faq::before {
        content: '';
        position: absolute;
        width: 280px;
        height: 280px;
        border-radius: 50%;
        background: #ffd9e8;
        filter: blur(120px);
        top: -120px;
        left: -120px;
        opacity: .45;
    }

    .mad-faq::after {
        content: '';
        position: absolute;
        width: 300px;
        height: 300px;
        border-radius: 50%;
        background: #ffd9ec;
        filter: blur(120px);
        bottom: -120px;
        right: -120px;
        opacity: .45;
    }

.mad-faq-title span,
.mad-whyus span {
    color: #ff5ca8;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.mad-faq-title h2,
.mad-whyus h2 {
    font-size: 42px;
    font-weight: 700;
    margin-top: 10px;
    margin-bottom: 35px;
    color: #1d2330;
    line-height: 1.25;
}

/* Accordion */

.mad-faq-accordion .accordion-item {
    border: none;
    margin-bottom: 18px;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 10px 35px rgba(0,0,0,.05);
}

.mad-faq-accordion .accordion-button {
    background: #fff;
    font-weight: 600;
    padding: 22px 25px;
    color: #222;
    box-shadow: none;
}

    .mad-faq-accordion .accordion-button:not(.collapsed) {
        background: #fff;
        color: #ff5ca8;
    }

    .mad-faq-accordion .accordion-button::after {
        background-image: none;
        content: "+";
        font-size: 26px;
        width: auto;
        height: auto;
        color: #ff5ca8;
        font-weight: 300;
    }

    .mad-faq-accordion .accordion-button:not(.collapsed)::after {
        transform: none;
        content: "−";
    }

.mad-faq-accordion .accordion-body {
    padding: 0 25px 22px;
    color: #666;
    line-height: 28px;
}

/* WHY */

.mad-whyus {
    padding-left: 40px;
}

.mad-whyus-item {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    transition: .35s;
}

    .mad-whyus-item:hover {
        transform: translateY(-5px);
    }

.mad-whyus-icon {
    width: 65px;
    height: 65px;
    min-width: 65px;
    border-radius: 50%;
    background: linear-gradient(135deg,#ff5ca8,#ff8fc4);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 26px;
    box-shadow: 0 15px 30px rgba(255,92,168,.25);
}

.mad-whyus-item h5 {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 8px;
    color: #222;
}

.mad-whyus-item p {
    color: #666;
    line-height: 28px;
    margin: 0;
}

/* Responsive */

@media(max-width:991px) {

    .mad-whyus {
        padding-left: 0;
        margin-top: 40px;
    }

        .mad-faq-title h2,
        .mad-whyus h2 {
            font-size: 32px;
        }
}

@media(max-width:576px) {

    .mad-faq-title h2,
    .mad-whyus h2 {
        font-size: 28px;
    }

    .mad-whyus-item {
        flex-direction: column;
        text-align: center;
        align-items: center;
    }
}

/*====================CTA=================*/
.mad-final-cta {
    padding: 0 0 20px;
    background: #ffffff;
}

/* MAIN BOX */
.mad-final-cta-box {
    background: linear-gradient(120deg, #ff3d7e 0%, #ff4f8b 50%, #ff2f6f 100%);
    padding: 40px 50px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    position: relative;
    overflow: visible; /* IMPORTANT */
}
.mad-cta-img {
    position: relative;
}
/* LEFT IMAGE */
    /* 🔥 BIGGER IMAGE + FLOATING STYLE */
    .mad-cta-img img {
        width: 170px; /* increased from 110px */
        transform: scale(1.3); /* zoom effect */
        margin-top: -20px; /* lift up */
        filter: drop-shadow(0 15px 25px rgba(0,0,0,0.25)); /* shadow */
        transition: transform 0.3s ease;
    }
        .mad-cta-img img:hover {
            transform: scale(1.4) rotate(-5deg);
        }


/* CONTENT */
.mad-cta-content h2 {
    color: #ffffff;
    font-size: 28px;
    font-weight: 900;
    margin-bottom: 8px;
}

.mad-cta-content p {
    color: rgba(255,255,255,0.9);
    font-size: 15px;
}

/* BUTTONS */
.mad-cta-buttons {
    display: flex;
    gap: 14px;
}

.mad-cta-btn {
    padding: 12px 22px;
    border-radius: 6px;
    font-weight: 900;
    text-decoration: none;
    font-size: 14px;
    display: inline-block;
}

.mad-cta-btn.light {
    background: #ffffff;
    color: #ff3d7e;
}

.mad-cta-btn.light:hover {
    background: #f3f3f3;
}

.mad-cta-btn.outline {
    border: 2px solid #ffffff;
    color: #ffffff;
    background: transparent;
}

.mad-cta-btn.outline:hover {
    background: #ffffff;
    color: #ff3d7e;
}

/* FEATURES */
.mad-cta-features {
    display: flex;
    justify-content: center;
    gap: 40px;
    margin-top: 18px;
    color: #5d6676;
    font-size: 14px;
    font-weight: 700;
}

.mad-cta-features i {
    color: #ff3d7e;
    margin-right: 6px;
}

/* RESPONSIVE */
@media (max-width: 991px) {

    .mad-final-cta-box {
        flex-direction: column;
        text-align: center;
        padding: 35px 25px;
    }

    .mad-cta-buttons {
        justify-content: center;
        flex-wrap: wrap;
    }

    .mad-cta-img img {
        width: 140px;
        transform: scale(1.1);
        margin-top: 0;
    }

    .mad-cta-features {
        flex-wrap: wrap;
        gap: 20px;
    }
}

@media (max-width: 575px) {

    .mad-cta-content h2 {
        font-size: 22px;
    }

    .mad-cta-buttons {
        width: 100%;
    }

    .mad-cta-btn {
        width: 100%;
        text-align: center;
    }
    .mad-cta-img img {
        width: 120px;
        transform: none;
    }
}


/*=======================================
         Android App Development
=======================================*/
.android-hero {
    background: linear-gradient(120deg, #02110a 0%, #0a3a22 55%, #146c43 100%);
    padding: 130px 0 0;
    overflow: hidden;
}

.android-hero-content {
    padding-left: 10px;
}

.android-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #16a34a;
    font-size: 13px;
    font-weight: 900;
    letter-spacing: .6px;
    margin-bottom: 22px;
    text-transform: uppercase;
}

.android-hero-content h1 {
    color: #ffffff;
    font-size: 52px;
    line-height: 1.15;
    font-weight: 900;
    margin-bottom: 24px;
}

    .android-hero-content h1 span {
        color: #169b45;
    }

.android-hero-content p {
    color: #e9fff2;
    font-size: 17px;
    line-height: 1.75;
    max-width: 590px;
    margin-bottom: 30px;
}

.android-hero-buttons {
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
}

.android-btn {
    padding: 14px 28px;
    border-radius: 6px;
    font-size: 15px;
    font-weight: 900;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

    .android-btn.primary {
        background: #159447;
        color: #ffffff;
        border: 2px solid #159447;
        box-shadow: 0 12px 25px rgba(21, 148, 71, 0.25);
    }

    .android-btn.outline {
        background: #ffffff;
        color: #159447;
        border: 2px solid #b8e8ca;
    }

    .android-btn:hover {
        transform: translateY(-2px);
    }

/* Right Side */
.android-phone-wrap {
    position: relative;
    min-height: 430px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.android-bg-circle {
    position: absolute;
    width: 390px;
    height: 390px;
    border-radius: 50%;
    background: rgba(34, 197, 94, 0.14);
    z-index: 1;
}

.android-phone-img {
    max-width: 300px;
    position: relative;
    z-index: 3;
    filter: drop-shadow(0 25px 35px rgba(0,0,0,0.18));
}

.android-float-card {
    position: absolute;
    z-index: 4;
    background: #ffffff;
    border-radius: 14px;
    padding: 15px 18px;
    min-width: 120px;
    text-align: center;
    box-shadow: 0 18px 35px rgba(15, 23, 42, 0.10);
    border: 1px solid #e1f5e8;
}

    .android-float-card i {
        width: 42px;
        height: 42px;
        border-radius: 10px;
        background: #ecfdf3;
        color: #159447;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 24px;
        margin-bottom: 8px;
    }

    .android-float-card span {
        color: #07142f;
        font-size: 13px;
        font-weight: 900;
        line-height: 1.35;
    }

.card-left {
    left: 42px;
    top: 205px;
}

.card-top {
    right: 5px;
    top: 82px;
}

.card-bottom {
    right: 8px;
    bottom: 105px;
}

/* Bottom Strip */
.android-feature-strip {
    background: #ffffff;
    border-top: 1px solid #e8f2ec;
    border-bottom: 1px solid #e8f2ec;
    box-shadow: 0 -4px 22px rgba(15,23,42,0.04);
}

.android-feature-item {
    min-height: 95px;
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 24px 32px;
    border-right: 1px solid #e8f2ec;
}

    .android-feature-item i {
        width: 54px;
        height: 54px;
        min-width: 54px;
        border-radius: 50%;
        background: #ecfdf3;
        color: #159447;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 26px;
    }

    .android-feature-item h4 {
        margin: 0;
        color: #07142f;
        font-size: 16px;
        font-weight: 900;
        line-height: 1.35;
    }

/* Responsive */
@media (max-width: 991px) {
    .android-hero {
        text-align: center;
    }

    .android-hero-content {
        padding-left: 0;
    }

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

        .android-hero-content p {
            margin-left: auto;
            margin-right: auto;
        }

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

    .android-phone-wrap {
        margin-top: 35px;
        min-height: 390px;
    }

    .android-feature-item {
        border-right: 0;
        border-bottom: 1px solid #e8f2ec;
    }
}

@media (max-width: 575px) {
    .android-hero-content h1 {
        font-size: 31px;
    }

    .android-hero-content p {
        font-size: 15px;
    }

    .android-btn {
        width: 100%;
    }

    .android-phone-img {
        max-width: 230px;
    }

    .android-bg-circle {
        width: 280px;
        height: 280px;
    }

    .android-float-card {
        display: none;
    }

    .android-phone-wrap {
        min-height: 300px;
    }
}

/*=============Services=============*/
.android-services-section {
    padding: 70px 0;
    background: #ffffff;
}

.android-section-title {
    margin-bottom: 38px;
}

    .android-section-title span {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 7px;
        color: #16a34a;
        font-size: 13px;
        font-weight: 900;
        letter-spacing: .7px;
        text-transform: uppercase;
        margin-bottom: 8px;
    }

    .android-section-title h2 {
        color: #07142f;
        font-size: 30px;
        font-weight: 900;
        margin-bottom: 10px;
    }

    .android-section-title p {
        color: #5d6676;
        font-size: 15px;
        margin: 0;
    }

.android-service-card {
    height: 100%;
    min-height: 180px;
    background: #ffffff;
    border: 1px solid #e6eee9;
    border-radius: 12px;
    padding: 26px 24px;
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.04);
    transition: all .3s ease;
}

    .android-service-card:hover {
        transform: translateY(-6px);
        border-color: #bdeccd;
        box-shadow: 0 18px 40px rgba(22, 163, 74, 0.12);
    }

.android-service-head {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    margin-bottom: 22px;
}

.android-service-icon {
    width: 48px;
    height: 48px;
    min-width: 48px;
    border-radius: 50%;
    background: #ecfdf3;
    color: #159447;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
}

.android-service-card h4 {
    color: #07142f;
    font-size: 16px;
    font-weight: 900;
    line-height: 1.35;
    margin: 0;
}

.android-service-card p {
    color: #5d6676;
    font-size: 15px;
    line-height: 1.7;
    margin: 0;
}

@media (max-width: 767px) {
    .android-services-section {
        padding: 55px 0;
    }

    .android-section-title h2 {
        font-size: 24px;
    }

    .android-service-card {
        min-height: auto;
    }
}

/*================Processs===============*/
.android-process-section {
    padding: 65px 0;
    background: #ffffff;
}

.android-process-title {
    margin-bottom: 42px;
}

    .android-process-title span {
        color: #16a34a;
        font-size: 13px;
        font-weight: 900;
        letter-spacing: .7px;
        text-transform: uppercase;
        display: block;
        margin-bottom: 8px;
    }

    .android-process-title h2 {
        color: #07142f;
        font-size: 30px;
        font-weight: 900;
        margin: 0;
    }

.android-process-wrap {
    display: flex;
    justify-content: space-between;
    position: relative;
    gap: 25px;
}

    .android-process-wrap::before {
        content: "";
        position: absolute;
        top: 37px;
        left: 85px;
        right: 85px;
        border-top: 2px dashed #bfe8ce;
        z-index: 1;
    }

.android-process-item {
    width: 16.66%;
    text-align: center;
    position: relative;
    z-index: 2;
}

    .android-process-item::after {
        content: "";
        position: absolute;
        top: 32px;
        right: -18px;
        width: 0;
        height: 0;
        border-left: 7px solid #16a34a;
        border-top: 5px solid transparent;
        border-bottom: 5px solid transparent;
    }

    .android-process-item:last-child::after {
        display: none;
    }

.android-process-icon {
    width: 76px;
    height: 76px;
    margin: 0 auto 18px;
    border-radius: 50%;
    background: #ecfdf3;
    border: 2px solid #bfe8ce;
    color: #159447;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 34px;
}

.android-process-item h4 {
    color: #07142f;
    font-size: 15px;
    font-weight: 900;
    margin-bottom: 10px;
}

.android-process-item p {
    color: #5d6676;
    font-size: 14px;
    line-height: 1.6;
    max-width: 145px;
    margin: 0 auto;
}

/* Responsive */
@media (max-width: 991px) {
    .android-process-wrap {
        flex-wrap: wrap;
        gap: 30px 0;
    }

        .android-process-wrap::before {
            display: none;
        }

    .android-process-item {
        width: 33.33%;
    }

        .android-process-item::after {
            display: none;
        }
}

@media (max-width: 575px) {
    .android-process-title h2 {
        font-size: 24px;
    }

    .android-process-item {
        width: 50%;
    }

    .android-process-icon {
        width: 66px;
        height: 66px;
        font-size: 28px;
    }
}

/*==================================================
            ANDROID BENEFITS
==================================================*/

.android-benefits-section {
    position: relative;
    overflow: hidden;
    padding: 100px 0;
    background: linear-gradient(180deg,#fbfefc 0%,#eefaf3 100%);
}

    .android-benefits-section::before {
        content: "";
        position: absolute;
        width: 260px;
        height: 260px;
        border-radius: 50%;
        background: #2ecc7120;
        top: -80px;
        left: -80px;
    }

    .android-benefits-section::after {
        content: "";
        position: absolute;
        width: 320px;
        height: 320px;
        border-radius: 50%;
        background: #2ecc7115;
        right: -120px;
        bottom: -120px;
    }

.android-benefits-header {
    max-width: 820px;
    margin: auto;
    margin-bottom: 70px;
    position: relative;
    z-index: 2;
}

.android-benefits-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 22px;
    border-radius: 50px;
    background: #ffffff;
    border: 1px solid #d8f5e4;
    color: #0b9444;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .8px;
    text-transform: uppercase;
    box-shadow: 0 10px 30px rgba(0,0,0,.04);
}

    .android-benefits-badge i {
        font-size: 18px;
    }

.android-benefits-header h2 {
    margin: 30px 0 18px;
    font-size: 54px;
    font-weight: 800;
    color: #101828;
    line-height: 1.2;
}

    .android-benefits-header h2 span {
        color: #10b14b;
    }

.android-benefits-divider {
    width: 120px;
    height: 4px;
    border-radius: 20px;
    background: #10b14b;
    margin: 0 auto 25px;
}

.android-benefits-header p {
    max-width: 700px;
    margin: auto;
    font-size: 18px;
    line-height: 1.9;
    color: #6b7280;
}

/*==================================================*/

.android-benefits-card {
    position: relative;
    background: #fff;
    border-radius: 22px;
    text-align: center;
    padding: 5px 15px;
    height: 100%;
    transition: .35s;
    border: 1px solid #e5f7eb;
    box-shadow: 0 15px 35px rgba(0, 0, 0, .05);
}

    .android-benefits-card:hover {
        transform: translateY(-10px);
        border-color: #10b14b;
        box-shadow: 0 25px 45px rgba(16,177,75,.18);
    }

.android-benefits-number {
    position: absolute;
    top: 0;
    left: 0;
    background: #10b14b;
    color: #fff;
    width: 52px;
    height: 52px;
    border-radius: 22px 0 22px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    font-weight: 700;
}

.android-benefits-icon {
    width: 90px;
    height: 90px;
    margin: 10px auto 30px;
    border-radius: 50%;
    background: #eefbf2;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .android-benefits-icon i {
        color: #10b14b;
        font-size: 44px;
    }

.android-benefits-card h4 {
    font-size: 20px;
    font-weight: 700;
    color: #111827;
    line-height: 1.45;
    min-height: 90px;
}

.android-benefits-line {
    display: block;
    width: 65px;
    height: 4px;
    border-radius: 10px;
    background: #10b14b;
    margin: 28px auto 0;
}

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

@media(max-width:991px) {

    .android-benefits-header h2 {
        font-size: 42px;
    }
}

@media(max-width:767px) {

    .android-benefits-section {
        padding: 70px 0;
    }

    .android-benefits-header {
        margin-bottom: 45px;
    }

        .android-benefits-header h2 {
            font-size: 34px;
        }

        .android-benefits-header p {
            font-size: 16px;
        }

    .android-benefits-card {
        padding: 35px 20px;
    }

    .android-benefits-icon {
        width: 75px;
        height: 75px;
    }

        .android-benefits-icon i {
            font-size: 34px;
        }

    .android-benefits-card h4 {
        font-size: 20px;
        min-height: auto;
    }

    .android-benefits-number {
        width: 45px;
        height: 45px;
        font-size: 20px;
    }
}

/*===============ShowCase==============*/
.android-showcase-section {
    padding: 40px 0;
    background: #ffffff;
    overflow: hidden;
}

.android-showcase-title {
    margin-bottom: 32px;
}

    .android-showcase-title span {
        display: block;
        color: #16a34a;
        font-size: 13px;
        font-weight: 900;
        letter-spacing: .7px;
        text-transform: uppercase;
        margin-bottom: 6px;
    }

    .android-showcase-title h2 {
        color: #07142f;
        font-size: 30px;
        font-weight: 900;
        margin: 0;
    }

.android-showcase-row {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 34px;
    flex-wrap: nowrap;
}

.android-showcase-item {
    width: 150px;
    height: 310px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    overflow: hidden;
}

    .android-showcase-item img {
        width: 100%;
        max-height: 310px;
        object-fit: contain;
        object-position: bottom;
        filter: drop-shadow(0 12px 20px rgba(15, 23, 42, 0.16));
        transition: transform .3s ease;
    }

    .android-showcase-item:hover img {
        transform: translateY(-8px);
    }

/* Tablet and small devices: 3 x 2 grid */
@media (max-width: 991px) {
    .android-showcase-row {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 22px 18px;
        justify-items: center;
        align-items: start;
        overflow: visible;
        padding: 0 12px;
    }

    .android-showcase-item {
        width: 100%;
        max-width: 115px;
        height: auto;
        overflow: visible;
        flex: unset;
    }

        .android-showcase-item img {
            width: 100%;
            height: auto;
            max-height: none;
            object-fit: contain;
        }
}

/* Mobile: keep 3 columns like your screenshot */
@media (max-width: 575px) {
    .android-showcase-section {
        padding: 45px 0 55px;
        overflow: visible;
    }

    .android-showcase-title {
        margin-bottom: 25px;
    }

        .android-showcase-title span {
            font-size: 11px;
        }

        .android-showcase-title h2 {
            font-size: 22px;
            line-height: 1.3;
        }

    .android-showcase-row {
        grid-template-columns: repeat(3, 1fr);
        gap: 18px 12px;
        padding: 0 10px;
    }

    .android-showcase-item {
        max-width: 92px;
    }
}

/* Extra small mobile */
@media (max-width: 390px) {
    .android-showcase-row {
        gap: 16px 10px;
    }

    .android-showcase-item {
        max-width: 84px;
    }
}

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

.android-why-section {
    padding: 90px 0;
    background: linear-gradient(120deg,#ecfff3 0%,#e7faef 55%,#dff7e8 100%);
}


/* Equal height */

.android-why-content,
.android-faq-card {
    height: 100%;
}

/* Left */

.android-why-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.android-why-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #059447;
    font-size: 18px;
    font-weight: 800;
    letter-spacing: .8px;
    text-transform: uppercase;
    margin-bottom: 35px;
}

.android-why-point {
    display: flex;
    gap: 18px;
    margin-bottom: 28px;
}

    .android-why-point:last-child {
        margin-bottom: 0;
    }

    .android-why-point > i {
        font-size: 24px;
        color: #059447;
        margin-top: 2px;
    }

    .android-why-point h4 {
        font-size: 18px;
        font-weight: 700;
        color: #07142f;
        margin-bottom: 6px;
    }

    .android-why-point p {
        font-size: 15px;
        color: #5b6575;
        line-height: 1.7;
        margin: 0;
    }

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

.android-faq-card {
    background: #fff;
    border-radius: 16px;
    border: 1px solid #d9efdf;
    padding: 30px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-shadow: 0 15px 40px rgba(5,148,71,.08);
}

    .android-faq-card h3 {
        font-size: 22px;
        font-weight: 800;
        color: #07142f;
        margin-bottom: 25px;
        display: flex;
        align-items: center;
        gap: 10px;
    }

        .android-faq-card h3 i {
            color: #059447;
        }

    .android-faq-card .accordion-item {
        border: none;
        margin-bottom: 14px;
    }

    .android-faq-card .accordion-button {
        background: #fff;
        border: 1px solid #dceee4;
        border-radius: 10px !important;
        box-shadow: none;
        padding: 18px 20px;
        font-size: 15px;
        font-weight: 700;
        color: #07142f;
    }

        .android-faq-card .accordion-button:focus {
            box-shadow: none;
            border-color: #059447;
        }

        .android-faq-card .accordion-button:not(.collapsed) {
            background: #059447;
            color: #fff;
            border-color: #059447;
        }

        .android-faq-card .accordion-button::after {
            filter: brightness(.45);
        }

        .android-faq-card .accordion-button:not(.collapsed)::after {
            filter: brightness(0) invert(1);
        }

    .android-faq-card .accordion-body {
        border: 1px solid #dceee4;
        border-top: none;
        border-radius: 0 0 10px 10px;
        background: #fff;
        color: #5b6575;
        font-size: 14px;
        line-height: 1.8;
        padding: 18px 20px;
    }

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

@media(max-width:1199px) {

    .android-why-box {
        padding: 45px;
    }
}

@media(max-width:991px) {

    .android-why-section {
        padding: 70px 0;
    }

    .android-why-box {
        padding: 35px;
    }

    .android-faq-card {
        margin-top: 10px;
    }
}

@media(max-width:767px) {

    .android-why-box {
        padding: 25px;
    }

    .android-why-badge {
        font-size: 16px;
        margin-bottom: 25px;
    }

    .android-why-point {
        gap: 14px;
        margin-bottom: 22px;
    }

        .android-why-point h4 {
            font-size: 16px;
        }

        .android-why-point p {
            font-size: 14px;
        }

    .android-faq-card {
        padding: 22px;
    }

        .android-faq-card h3 {
            font-size: 20px;
        }

        .android-faq-card .accordion-button {
            font-size: 14px;
            padding: 15px;
        }

        .android-faq-card .accordion-body {
            font-size: 13px;
            padding: 15px;
        }
}

/*================CTA===============*/
.android-final-cta {
    padding: 0 0 20px;
    background: #ffffff;
}

.android-final-box {
    background: linear-gradient(120deg, #059447 0%, #079f4e 55%, #05883f 100%);
    border-radius: 0;
    padding: 34px 45px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    position: relative;
    overflow: hidden;
}

    .android-final-box::after {
        content: "";
        position: absolute;
        right: -40px;
        top: -40px;
        width: 230px;
        height: 230px;
        background-image: radial-gradient(rgba(255,255,255,0.18) 2px, transparent 2px);
        background-size: 13px 13px;
        opacity: .7;
    }

.android-final-img {
    width: 120px;
    min-width: 120px;
    position: relative;
    z-index: 2;
}

    .android-final-img img {
        width: 130px;
        filter: drop-shadow(0 14px 22px rgba(0,0,0,.25));
    }

.android-final-content {
    flex: 1;
    position: relative;
    z-index: 2;
}

    .android-final-content h2 {
        color: #ffffff;
        font-size: 30px;
        font-weight: 900;
        margin-bottom: 8px;
    }

    .android-final-content p {
        color: rgba(255,255,255,.92);
        font-size: 16px;
        margin: 0;
    }

.android-final-buttons {
    display: flex;
    gap: 16px;
    position: relative;
    z-index: 2;
}

.android-final-btn {
    padding: 13px 26px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 900;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
}

    .android-final-btn.light {
        background: #ffffff;
        color: #059447;
        border: 2px solid #ffffff;
    }

    .android-final-btn.outline {
        background: transparent;
        color: #ffffff;
        border: 2px solid rgba(255,255,255,.85);
    }

    .android-final-btn.light:hover {
        background: #f3fff7;
        color: #059447;
    }

    .android-final-btn.outline:hover {
        background: #ffffff;
        color: #059447;
    }

.android-final-features {
    display: flex;
    justify-content: center;
    gap: 55px;
    padding-top: 24px;
    color: #5d6676;
    font-size: 14px;
    font-weight: 800;
    flex-wrap: wrap;
}

    .android-final-features span {
        display: inline-flex;
        align-items: center;
        gap: 8px;
    }

    .android-final-features i {
        color: #5d6676;
        font-size: 17px;
    }

@media (max-width: 991px) {
    .android-final-box {
        flex-direction: column;
        text-align: center;
        padding: 35px 25px;
    }

    .android-final-img {
        width: auto;
        min-width: auto;
    }

        .android-final-img img {
            width: 115px;
        }

    .android-final-buttons {
        justify-content: center;
        flex-wrap: wrap;
    }

    .android-final-features {
        gap: 22px;
    }
}

@media (max-width: 575px) {
    .android-final-content h2 {
        font-size: 23px;
    }

    .android-final-content p {
        font-size: 14px;
    }

    .android-final-buttons {
        width: 100%;
    }

    .android-final-btn {
        width: 100%;
    }

    .android-final-features {
        justify-content: flex-start;
        padding-left: 10px;
        gap: 15px;
    }
}

/*=========================================
           ISO_Devlopment
=========================================*/
.ios-hero-section {
    background: linear-gradient(120deg, #020b20 0%, #0b2a4a 55%, #143d6b 100%);
    padding: 130px 0 0;
    overflow: hidden;
}

.ios-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #edf5ff;
    font-size: 13px;
    font-weight: 900;
    letter-spacing: .7px;
    text-transform: uppercase;
    margin-bottom: 22px;
}

.ios-hero-content h1 {
    color: #ffffff;
    font-size: 50px;
    line-height: 1.15;
    font-weight: 900;
    margin-bottom: 24px;
}

    .ios-hero-content h1 span {
        color: #0b63f6;
    }

.ios-hero-content p {
    color: #edf5ff;
    font-size: 17px;
    line-height: 1.75;
    max-width: 590px;
    margin-bottom: 30px;
}

.ios-hero-btns {
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
}

.ios-btn-primary,
.ios-btn-outline {
    padding: 14px 28px;
    border-radius: 6px;
    font-size: 15px;
    font-weight: 900;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.ios-btn-primary {
    background: #0b63f6;
    color: #ffffff;
    border: 2px solid #0b63f6;
    box-shadow: 0 12px 25px rgba(11, 99, 246, 0.22);
}

.ios-btn-outline {
    background: #ffffff;
    color: #0b63f6;
    border: 2px solid #bdd5ff;
}

.ios-btn-primary:hover {
    color: #ffffff;
    background: #084fc4;
    border-color: #084fc4;
}

.ios-btn-outline:hover {
    color: #ffffff;
    background: #0b63f6;
    border-color: #0b63f6;
}

/* Right Image */
.ios-hero-img-wrap {
    position: relative;
    min-height: 430px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ios-circle-bg {
    position: absolute;
    width: 390px;
    height: 390px;
    border-radius: 50%;
    background: rgba(11, 99, 246, 0.08);
    z-index: 1;
}

.ios-hero-img {
    max-width: 390px;
    position: relative;
    z-index: 3;
    filter: drop-shadow(0 25px 35px rgba(15, 23, 42, 0.16));
}

.ios-float-card {
    position: absolute;
    z-index: 4;
    background: #ffffff;
    border-radius: 14px;
    padding: 15px 16px;
    min-width: 115px;
    text-align: center;
    box-shadow: 0 18px 35px rgba(15, 23, 42, 0.10);
    border: 1px solid #e1ecff;
}

    .ios-float-card i {
        width: 42px;
        height: 42px;
        border-radius: 10px;
        background: #edf5ff;
        color: #0b63f6;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 24px;
        margin-bottom: 8px;
    }

    .ios-float-card span {
        color: #07142f;
        font-size: 13px;
        font-weight: 900;
        line-height: 1.35;
    }

.ios-card-left-top {
    left: -40px;
    top: 110px;
}

.ios-card-right-top {
    right: -25px;
    top: 105px;
}

.ios-card-right-bottom {
    right: -25px;
    bottom: 110px;
}

/* Bottom Feature Strip */
.ios-feature-strip {
    background: #ffffff;
    border-top: 1px solid #e7efff;
    border-bottom: 1px solid #e7efff;
    box-shadow: 0 -4px 22px rgba(15,23,42,0.04);
}

.ios-feature-item {
    min-height: 95px;
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 24px 32px;
    border-right: 1px solid #e7efff;
}

.ios-feature-icon {
    width: 54px;
    height: 54px;
    min-width: 54px;
    border-radius: 50%;
    background: #edf5ff;
    color: #0b63f6;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
}

.ios-feature-item h4 {
    margin: 0;
    color: #07142f;
    font-size: 16px;
    font-weight: 900;
    line-height: 1.35;
}

/* Responsive */
@media (max-width: 991px) {
    .ios-hero-section {
        text-align: center;
    }

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

    .ios-hero-content p {
        margin-left: auto;
        margin-right: auto;
    }

    .ios-hero-btns {
        justify-content: center;
    }

    .ios-hero-img-wrap {
        margin-top: 35px;
        min-height: 380px;
    }

    .ios-hero-img {
        max-width: 330px;
    }

    .ios-float-card {
        display: none;
    }

    .ios-feature-item {
        border-right: 0;
        border-bottom: 1px solid #e7efff;
    }
}

@media (max-width: 575px) {
    .ios-hero-content h1 {
        font-size: 31px;
    }

    .ios-hero-content p {
        font-size: 15px;
    }

    .ios-btn-primary,
    .ios-btn-outline {
        width: 100%;
    }

    .ios-hero-img {
        max-width: 250px;
    }

    .ios-circle-bg {
        width: 280px;
        height: 280px;
    }

    .ios-hero-img-wrap {
        min-height: 300px;
    }
}


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

.ios-services-section {
    padding: 90px 0;
    background: #fff;
}

.ios-section-title {
    max-width: 760px;
    margin: auto;
    margin-bottom: 55px;
}

    .ios-section-title span {
        display: inline-block;
        color: #2c74ff;
        font-size: 15px;
        font-weight: 700;
        letter-spacing: 1px;
        text-transform: uppercase;
        margin-bottom: 12px;
        position: relative;
        padding-bottom: 12px;
    }

        .ios-section-title span:after {
            content: "";
            position: absolute;
            left: 50%;
            bottom: 0;
            transform: translateX(-50%);
            width: 40px;
            height: 3px;
            background: #2c74ff;
            border-radius: 30px;
        }

    .ios-section-title h2 {
        font-size: 46px;
        font-weight: 700;
        color: #111827;
        margin-bottom: 18px;
    }

    .ios-section-title p {
        color: #6b7280;
        font-size: 18px;
        line-height: 1.8;
    }


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

.ios-service-grid {
    display: grid;
    grid-template-columns: repeat(5,1fr);
    gap: 18px;
}


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

.ios-service-card {
    background: #fff;
    border: 1px solid #edf2fb;
    border-radius: 14px;
    padding: 22px;
    min-height: 205px;
    transition: .35s;
    box-shadow: 0 8px 20px rgba(0,0,0,.03);
    display: flex;
    flex-direction: column;
}

    .ios-service-card:hover {
        transform: translateY(-8px);
        border-color: #d6e6ff;
        box-shadow: 0 20px 40px rgba(44,116,255,.12);
    }


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

.ios-service-icon {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: #edf4ff;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
    color: #2c74ff;
    font-size: 20px;
    transition: .35s;
}

.ios-service-card:hover .ios-service-icon {
    background: #2c74ff;
    color: #fff;
    transform: rotate(8deg);
}


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

.ios-service-card h4 {
    font-size: 18px;
    font-weight: 700;
    color: #111827;
    line-height: 1.35;
    margin-bottom: 14px;
    min-height: 50px;
}

.ios-service-card p {
    font-size: 14px;
    color: #6b7280;
    line-height: 1.7;
    margin: 0;
}


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

@media(max-width:1200px) {

    .ios-service-grid {
        grid-template-columns: repeat(4,1fr);
    }
}

@media(max-width:992px) {

    .ios-service-grid {
        grid-template-columns: repeat(3,1fr);
    }

    .ios-section-title h2 {
        font-size: 38px;
    }
}

@media(max-width:768px) {

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

    .ios-section-title h2 {
        font-size: 30px;
    }

    .ios-section-title p {
        font-size: 16px;
    }
}

@media(max-width:576px) {

    .ios-service-grid {
        grid-template-columns: 1fr;
    }

    .ios-service-card {
        min-height: auto;
    }
}

/*===========Process============*/
.ios-process-section {
    background: #ffffff;
}

.ios-process-title {
    margin-bottom: 50px;
}

    .ios-process-title span {
        color: #0b63f6;
        font-size: 13px;
        font-weight: 900;
        letter-spacing: .7px;
        text-transform: uppercase;
        display: block;
        margin-bottom: 8px;
    }

    .ios-process-title h2 {
        color: #07142f;
        font-size: 30px;
        font-weight: 900;
        margin: 0;
    }

/* PROCESS WRAP */
.ios-process-wrap {
    display: flex;
    justify-content: space-between;
    position: relative;
    gap: 20px;
}

    /* DOTTED LINE */
    .ios-process-wrap::before {
        content: "";
        position: absolute;
        top: 42px;
        left: 60px;
        right: 60px;
        border-top: 2px dashed #cfe0ff;
        z-index: 1;
    }

/* EACH STEP */
.ios-process-item {
    width: 16.66%;
    text-align: center;
    position: relative;
    z-index: 2;
}

/* ICON */
.ios-process-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 18px;
    border-radius: 50%;
    background: #edf5ff;
    border: 2px solid #cfe0ff;
    color: #0b63f6;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 34px;
}

/* TEXT */
.ios-process-item h4 {
    color: #07142f;
    font-size: 15px;
    font-weight: 900;
    margin-bottom: 10px;
}

.ios-process-item p {
    color: #5d6676;
    font-size: 14px;
    line-height: 1.6;
    max-width: 150px;
    margin: 0 auto;
}

/* ARROW BETWEEN ITEMS */
.ios-process-item::after {
    content: "";
    position: absolute;
    top: 38px;
    right: -12px;
    width: 0;
    height: 0;
    border-left: 7px solid #0b63f6;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
}

.ios-process-item:last-child::after {
    display: none;
}

/*===============WHYUS===============*/
/*=========================================================
WHY CHOOSE US + FAQ SECTION
=========================================================*/

.ios-why-section {
    padding: 40px 0;
    background: #f6f9ff;
    overflow: hidden;
}

.ios-why-box {
    background: linear-gradient(135deg,#eaf4ff 0%,#ffffff 55%,#eef6ff 100%);
    border-radius: 30px;
    padding: 50px;
    border: 1px solid #d9e9ff;
    box-shadow: 0 20px 60px rgba(0,74,173,.08);
}

/*=========================================================
ROW
=========================================================*/

.ios-why-section .row {
    align-items: stretch;
}

.ios-why-section .col-lg-6 {
    display: flex;
}

/*=========================================================
LEFT CARD
=========================================================*/

.ios-why-card {
    background: #fff;
    width: 100%;
    border-radius: 22px;
    padding: 40px;
    box-shadow: 0 18px 45px rgba(0,0,0,.06);
    border: 1px solid #edf2fb;
    display: flex;
    flex-direction: column;
    justify-content: center;
    transition: .35s;
}

    .ios-why-card:hover {
        transform: translateY(-6px);
        box-shadow: 0 30px 60px rgba(0,0,0,.09);
    }

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

.ios-why-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 22px;
    background: #eef5ff;
    color: #0b63f6;
    border-radius: 50px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .6px;
    text-transform: uppercase;
    margin-bottom: 35px;
    width: max-content;
}

/*=========================================================
FEATURE ITEMS
=========================================================*/

.ios-why-point {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    padding: 18px;
    border-radius: 18px;
    transition: .35s;
    margin-bottom: 18px;
    border: 1px solid transparent;
}

    .ios-why-point:last-child {
        margin-bottom: 0;
    }

    .ios-why-point:hover {
        background: #f7fbff;
        border-color: #dce9ff;
        transform: translateX(8px);
    }

    .ios-why-point i {
        width: 52px;
        height: 52px;
        min-width: 52px;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        background: #eef5ff;
        color: #0b63f6;
        font-size: 22px;
        transition: .35s;
    }

    .ios-why-point:hover i {
        background: #0b63f6;
        color: #fff;
        transform: rotate(10deg);
    }

    .ios-why-point h4 {
        margin-bottom: 8px;
        font-size: 18px;
        font-weight: 700;
        color: #07142f;
    }

    .ios-why-point p {
        margin: 0;
        color: #667085;
        font-size: 15px;
        line-height: 1.7;
    }

/*=========================================================
FAQ CARD
=========================================================*/

.ios-faq-card {
    width: 100%;
    background: #fff;
    border-radius: 22px;
    padding: 40px;
    border: 1px solid #edf2fb;
    box-shadow: 0 18px 45px rgba(0,0,0,.06);
    transition: .35s;
}

    .ios-faq-card:hover {
        transform: translateY(-6px);
        box-shadow: 0 30px 60px rgba(0,0,0,.09);
    }

/*=========================================================
FAQ HEADER
=========================================================*/

.ios-faq-header {
    margin-bottom: 30px;
}

.ios-faq-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #eef5ff;
    color: #0b63f6;
    padding: 10px 20px;
    border-radius: 40px;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 18px;
}

.ios-faq-header h3 {
    font-size: 34px;
    font-weight: 700;
    color: #07142f;
    margin-bottom: 12px;
}

.ios-faq-header p {
    color: #667085;
    font-size: 16px;
    line-height: 1.8;
    margin-bottom: 0;
}

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

.ios-faq-accordion .accordion-item {
    border: none;
    border-radius: 16px;
    overflow: hidden;
    margin-bottom: 16px;
    background: #f8fbff;
    box-shadow: none;
}

.ios-faq-accordion .accordion-button {
    background: #f8fbff;
    color: #07142f;
    font-weight: 600;
    font-size: 16px;
    padding: 18px 20px;
    box-shadow: none;
    transition: .3s;
}

    .ios-faq-accordion .accordion-button:hover {
        background: #eef5ff;
    }

    .ios-faq-accordion .accordion-button:not(.collapsed) {
        background: #0b63f6;
        color: #fff;
    }

    .ios-faq-accordion .accordion-button::after {
        transition: .3s;
    }

    .ios-faq-accordion .accordion-button:not(.collapsed)::after {
        filter: brightness(0) invert(1);
    }

.ios-faq-accordion .accordion-body {
    background: #fff;
    padding: 22px;
    font-size: 15px;
    color: #667085;
    line-height: 1.8;
}

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

@media(max-width:1199px) {

    .ios-why-box {
        padding: 40px;
    }

    .ios-faq-header h3 {
        font-size: 30px;
    }
}

@media(max-width:991px) {

    .ios-why-section {
        padding: 70px 0;
    }

    .ios-why-box {
        padding: 30px;
    }

    .ios-why-card,
    .ios-faq-card {
        padding: 30px;
    }

    .ios-why-card {
        margin-bottom: 25px;
    }
}

@media(max-width:768px) {

    .ios-why-box {
        padding: 22px;
    }

    .ios-why-card,
    .ios-faq-card {
        padding: 24px;
    }

    .ios-faq-header h3 {
        font-size: 28px;
    }

    .ios-why-point {
        padding: 15px;
    }

        .ios-why-point h4 {
            font-size: 17px;
        }
}

@media(max-width:576px) {

    .ios-why-section {
        padding: 60px 0;
    }

    .ios-why-box {
        padding: 16px;
        border-radius: 20px;
    }

    .ios-why-card,
    .ios-faq-card {
        padding: 20px;
        border-radius: 18px;
    }

    .ios-why-point {
        gap: 14px;
        padding: 14px;
    }

        .ios-why-point i {
            width: 42px;
            height: 42px;
            min-width: 42px;
            font-size: 18px;
        }

    .ios-faq-header h3 {
        font-size: 24px;
    }

    .ios-faq-header p {
        font-size: 15px;
    }

    .ios-faq-accordion .accordion-button {
        font-size: 15px;
        padding: 16px;
    }

    .ios-faq-accordion .accordion-body {
        padding: 18px;
    }
}


/*====================================================
iOS Technology Section
====================================================*/

.ios-tech-section {
    padding: 90px 0;
    background: linear-gradient(180deg,#ffffff 0%,#f5f9ff 100%);
}

/* Heading */

.ios-tech-heading {
    max-width: 760px;
    margin: 0 auto 60px;
}

.ios-tech-tag {
    display: inline-block;
    color: #2d7cff;
    font-size: 15px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    position: relative;
    padding-bottom: 12px;
}

    .ios-tech-tag::after {
        content: "";
        width: 45px;
        height: 3px;
        background: #2d7cff;
        border-radius: 50px;
        position: absolute;
        left: 50%;
        bottom: 0;
        transform: translateX(-50%);
    }

.ios-tech-heading h2 {
    font-size: 48px;
    font-weight: 700;
    color: #111827;
    margin: 18px 0;
}

.ios-tech-heading p {
    font-size: 18px;
    color: #6b7280;
    line-height: 1.8;
}

/*====================================================
Technology Grid
====================================================*/

.ios-tech-grid {
    display: grid;
    grid-template-columns: repeat(5,1fr);
    gap: 25px;
}

/*====================================================
Technology Card
====================================================*/

.ios-tech-card {
    background: #fff;
    border: 1px solid #edf2fb;
    border-radius: 20px;
    height: 190px;
    padding: 25px 15px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    transition: .35s ease;
    box-shadow: 0 10px 30px rgba(24,49,83,.06);
    position: relative;
    overflow: hidden;
}

    .ios-tech-card::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 4px;
        background: linear-gradient(90deg,#2b74ff,#6bb8ff);
        transform: scaleX(0);
        transition: .35s;
    }

    .ios-tech-card:hover {
        transform: translateY(-10px);
        box-shadow: 0 20px 45px rgba(37,99,235,.18);
        border-color: #d8e8ff;
    }

        .ios-tech-card:hover::before {
            transform: scaleX(1);
        }

    .ios-tech-card img {
        width: 58px;
        height: 58px;
        object-fit: contain;
        margin-bottom: 20px;
        transition: .35s;
    }

    .ios-tech-card:hover img {
        transform: scale(1.08);
    }

    .ios-tech-card h6 {
        font-size: 17px;
        font-weight: 600;
        color: #1f2937;
        margin-bottom: 15px;
    }

    .ios-tech-card span {
        width: 26px;
        height: 3px;
        border-radius: 50px;
        background: #2d7cff;
        display: block;
    }

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

@media(max-width:1200px) {

    .ios-tech-grid {
        grid-template-columns: repeat(4,1fr);
    }

    .ios-tech-heading h2 {
        font-size: 42px;
    }
}

@media(max-width:991px) {

    .ios-tech-grid {
        grid-template-columns: repeat(3,1fr);
    }

    .ios-tech-heading h2 {
        font-size: 36px;
    }
}

@media(max-width:768px) {

    .ios-tech-grid {
        grid-template-columns: repeat(2,1fr);
        gap: 18px;
    }

    .ios-tech-heading h2 {
        font-size: 30px;
    }

    .ios-tech-heading p {
        font-size: 16px;
    }

    .ios-tech-card {
        height: 170px;
    }
}

@media(max-width:480px) {

    .ios-tech-grid {
        grid-template-columns: 1fr;
    }

    .ios-tech-card {
        height: 165px;
    }
}

/*==================CTA=================*/
.ios-final-cta {
    padding: 0 0 20px;
    background: #ffffff;
}

.ios-final-box {
    background: linear-gradient(120deg, #0057ff 0%, #0b63f6 55%, #004fe0 100%);
    padding: 32px 45px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    position: relative;
    overflow: hidden;
}

    .ios-final-box::after {
        content: "";
        position: absolute;
        right: -35px;
        top: -35px;
        width: 230px;
        height: 230px;
        background-image: radial-gradient(rgba(255,255,255,0.18) 2px, transparent 2px);
        background-size: 13px 13px;
        opacity: .7;
    }

.ios-final-img {
    width: 120px;
    min-width: 120px;
    position: relative;
    z-index: 2;
}

    .ios-final-img img {
        width: 130px;
        filter: drop-shadow(0 14px 22px rgba(0,0,0,.25));
    }

.ios-final-content {
    flex: 1;
    position: relative;
    z-index: 2;
}

    .ios-final-content h2 {
        color: #ffffff;
        font-size: 30px;
        font-weight: 900;
        margin-bottom: 8px;
    }

    .ios-final-content p {
        color: rgba(255,255,255,.92);
        font-size: 16px;
        margin: 0;
    }

.ios-final-buttons {
    display: flex;
    gap: 16px;
    position: relative;
    z-index: 2;
}

.ios-final-btn {
    padding: 13px 26px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 900;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
}

    .ios-final-btn.light {
        background: #ffffff;
        color: #0b63f6;
        border: 2px solid #ffffff;
    }

    .ios-final-btn.outline {
        background: transparent;
        color: #ffffff;
        border: 2px solid rgba(255,255,255,.85);
    }

    .ios-final-btn.light:hover {
        background: #edf5ff;
        color: #0b63f6;
    }

    .ios-final-btn.outline:hover {
        background: #ffffff;
        color: #0b63f6;
    }

.ios-final-features {
    display: flex;
    justify-content: center;
    gap: 55px;
    padding-top: 24px;
    color: #5d6676;
    font-size: 14px;
    font-weight: 800;
    flex-wrap: wrap;
}

    .ios-final-features span {
        display: inline-flex;
        align-items: center;
        gap: 8px;
    }

    .ios-final-features i {
        color: #5d6676;
        font-size: 17px;
    }

@media (max-width: 991px) {
    .ios-final-box {
        flex-direction: column;
        text-align: center;
        padding: 35px 25px;
    }

    .ios-final-img {
        width: auto;
        min-width: auto;
    }

        .ios-final-img img {
            width: 115px;
        }

    .ios-final-buttons {
        justify-content: center;
        flex-wrap: wrap;
    }

    .ios-final-features {
        gap: 22px;
    }
}

@media (max-width: 575px) {
    .ios-final-content h2 {
        font-size: 23px;
    }

    .ios-final-content p {
        font-size: 14px;
    }

    .ios-final-buttons {
        width: 100%;
    }

    .ios-final-btn {
        width: 100%;
    }

    .ios-final-features {
        justify-content: flex-start;
        padding-left: 10px;
        gap: 15px;
    }
}


/*=========================================
          ON_DEMAND
=========================================*/
.od-hero-section {
    position: relative;
    padding: 130px 0 65px;
    background: linear-gradient(120deg, #020b20 0%, #0b2a4a 55%, #143d6b 100%);
    overflow: hidden;
}

    .od-hero-section::after {
        content: "";
        position: absolute;
        right: 0;
        bottom: 70px;
        width: 58%;
        height: 210px;
        background: radial-gradient(circle, rgba(0, 87, 200, 0.12) 1px, transparent 1px);
        background-size: 8px 8px;
        opacity: 0.55;
        z-index: 0;
    }

.od-hero-content,
.od-hero-image-wrap {
    position: relative;
    z-index: 2;
}

.od-badge {
    display: inline-block;
    padding: 7px 18px;
    border-radius: 30px;
    background: #edf3ff;
    color: #0057ff;
    font-size: 13px;
    font-weight: 800;
    margin-bottom: 22px;
}

.od-hero-content h1 {
    font-size: 54px;
    line-height: 1.12;
    font-weight: 800;
    color: white;
    margin-bottom: 22px;
}

    .od-hero-content h1 strong {
        color: #075cff;
        font-weight: 800;
    }

.od-hero-content p {
    max-width: 560px;
    font-size: 16px;
    line-height: 1.8;
    color: #c5d2fa;
    margin-bottom: 28px;
}

.od-hero-buttons {
    display: flex;
    gap: 18px;
    align-items: center;
}

.od-primary-btn {
    min-width: 145px;
    padding: 13px 24px;
    border-radius: 7px;
    background: #075cff;
    color: #ffffff;
    font-size: 15px;
    font-weight: 700;
    border: 1px solid #075cff;
}

    .od-primary-btn:hover {
        background: #004bd6;
        color: #ffffff;
    }

.od-outline-btn {
    min-width: 170px;
    padding: 13px 24px;
    border-radius: 7px;
    background: #ffffff;
    color: #111827;
    font-size: 15px;
    font-weight: 700;
    border: 1px solid #111827;
}

    .od-outline-btn:hover {
        background: #111827;
        color: #ffffff;
    }

.od-hero-image-wrap {
    min-height: 500px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.od-phone-img {
    max-width: 470px;
    width: 100%;
    height: auto;
    display: block;
}

.od-feature-card {
    position: absolute;
    width: 125px;
    min-height: 135px;
    background: #ffffff;
    border-radius: 14px;
    box-shadow: 0 12px 35px rgba(0, 40, 120, 0.12);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.od-card-icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #eef4ff;
    color: #075cff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
}

.od-feature-card h5 {
    font-size: 15px;
    line-height: 1.35;
    font-weight: 800;
    color: #111827;
    text-align: center;
    margin: 0;
}

.od-card-1 {
    right: 10px;
    top: 95px;
}

.od-card-2 {
    right: 5px;
    bottom: 85px;
}

/* Tablet */
@media (max-width: 991px) {
    .od-hero-section {
        padding: 135px 0 15px;
    }

    .od-hero-content {
        text-align: center;
        margin-bottom: 35px;
    }

        .od-hero-content h1 {
            font-size: 42px;
        }

        .od-hero-content p {
            margin-left: auto;
            margin-right: auto;
        }

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

    .od-hero-image-wrap {
        min-height: 440px;
    }

    .od-phone-img {
        max-width: 390px;
    }

    .od-card-1 {
        right: 45px;
        top: 50px;
    }

    .od-card-2 {
        right: 40px;
        bottom: 45px;
    }
}

/* Mobile */
@media (max-width: 576px) {
    .od-hero-section {
        padding-top: 140px;
    }

    .od-badge {
        font-size: 11px;
        padding: 6px 14px;
    }

    .od-hero-content h1 {
        font-size: 32px;
    }

    .od-hero-content p {
        font-size: 15px;
        line-height: 1.7;
    }

    .od-hero-buttons {
        flex-direction: column;
        gap: 12px;
    }

    .od-primary-btn,
    .od-outline-btn {
        width: 100%;
        max-width: 260px;
    }

    .od-hero-image-wrap {
        min-height: auto;
        padding-top: 20px;
    }

    .od-phone-img {
        max-width: 300px;
    }

    .od-feature-card {
        width: 105px;
        min-height: 110px;
    }

        .od-feature-card h5 {
            font-size: 12px;
        }

    .od-card-icon {
        width: 36px;
        height: 36px;
        font-size: 18px;
    }

    .od-card-1 {
        right: 0;
        top: 10px;
    }

    .od-card-2 {
        right: 0;
        bottom: 15px;
    }
}

/*====================================================
ON DEMAND SERVICES
====================================================*/

.od-services-section {
    padding: 40px 0;
    background: #fff;
}

.od-services-container {
    max-width: 1650px;
}

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

.od-services-title {
    max-width: 900px;
    margin: 0 auto 45px;
}

    .od-services-title h2 {
        margin: 0;
        font-size: 32px;
        font-weight: 800;
        color: #111827;
        text-transform: uppercase;
        letter-spacing: .4px;
    }

.od-services-line {
    display: block;
    width: 55px;
    height: 3px;
    background: #2962ff;
    border-radius: 30px;
    margin: 15px auto 18px;
}

.od-services-title p {
    margin: 0 auto;
    max-width: 850px;
    color: #6b7280;
    line-height: 1.8;
    font-size: 16px;
}

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

.od-services-grid {
    display: grid;
    grid-template-columns: repeat(5,minmax(0,1fr));
    gap: 18px;
    align-items: stretch;
}

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

.od-services-card {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 18px;
    background: #fff;
    border: 1px solid #edf2f7;
    border-radius: 18px;
    height: 100%;
    transition: .35s;
    box-shadow: 0 5px 20px rgba(26,45,90,.05);
}

    .od-services-card:hover {
        transform: translateY(-6px);
        border-color: #2962ff;
        box-shadow: 0 15px 35px rgba(0,0,0,.12);
    }

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

.od-services-icon {
    width: 56px;
    height: 56px;
    min-width: 56px;
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    transition: .35s;
}

.od-services-card:hover .od-services-icon {
    transform: scale(1.08);
}

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

.od-yellow {
    background: #FFF8E7;
    color: #F4B000;
}

.od-red {
    background: #FFF1F1;
    color: #EF4444;
}

.od-green {
    background: #ECFFF1;
    color: #22C55E;
}

.od-blue {
    background: #EDF4FF;
    color: #2563EB;
}

.od-purple {
    background: #F5ECFF;
    color: #9C4DFF;
}

.od-violet {
    background: #F2EAFF;
    color: #8B5CF6;
}

.od-cyan {
    background: #EDFCFF;
    color: #06B6D4;
}

.od-pink {
    background: #FFF1F6;
    color: #EC4899;
}

.od-sky {
    background: #EEF7FF;
    color: #3B82F6;
}

.od-orange {
    background: #FFF5EB;
    color: #FB923C;
}

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

.od-services-content {
    flex: 1;
    min-width: 0;
}

    .od-services-content h4 {
        margin: 0 0 8px;
        font-size: 17px;
        font-weight: 700;
        line-height: 1.4;
        color: #111827;
    }

    .od-services-content p {
        margin: 0;
        font-size: 13px;
        color: #6b7280;
        line-height: 1.65;
    }

/*=========================
LARGE LAPTOP
=========================*/

@media (max-width:1400px) {

    .od-services-grid {
        grid-template-columns: repeat(5,1fr);
        gap: 16px;
    }

    .od-services-card {
        padding: 16px;
    }

    .od-services-icon {
        width: 52px;
        height: 52px;
        min-width: 52px;
        font-size: 24px;
    }

    .od-services-content h4 {
        font-size: 15px;
    }

    .od-services-content p {
        font-size: 12px;
    }
}

/*=========================
LAPTOP
=========================*/

@media (max-width:1200px) {

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

/*=========================
TABLET
=========================*/

@media (max-width:991px) {

    .od-services-section {
        padding: 60px 0;
    }

    .od-services-title {
        margin-bottom: 35px;
    }

        .od-services-title h2 {
            font-size: 26px;
        }

    .od-services-grid {
        grid-template-columns: repeat(2,1fr);
        gap: 18px;
    }
}

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

@media (max-width:576px) {

    .od-services-section {
        padding: 45px 0;
    }

    .od-services-title h2 {
        font-size: 22px;
    }

    .od-services-title p {
        font-size: 14px;
    }

    .od-services-grid {
        grid-template-columns: 1fr;
    }

    .od-services-card {
        padding: 16px;
    }

    .od-services-icon {
        width: 50px;
        height: 50px;
        min-width: 50px;
        font-size: 22px;
    }

    .od-services-content h4 {
        font-size: 16px;
    }

    .od-services-content p {
        font-size: 13px;
    }
}

/*=========================================================
OD FEATURES SECTION
=========================================================*/

.od-features-section {
    padding: 80px 0;
    background: #fff;
}

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

.od-features-title {
    max-width: 800px;
    margin: 0 auto 50px;
}

    .od-features-title h2 {
        margin: 0;
        font-size: 30px;
        font-weight: 800;
        color: #111827;
        text-transform: uppercase;
        letter-spacing: .5px;
    }

.od-features-line {
    display: block;
    width: 50px;
    height: 3px;
    background: #2962ff;
    border-radius: 30px;
    margin: 15px auto 0;
}

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

.od-features-card {
    height: 100%;
    background: #fff;
    border: 1px solid #edf2f7;
    border-radius: 18px;
    padding: 30px 24px;
    transition: .35s;
    box-shadow: 0 5px 20px rgba(15,23,42,.05);
}

    .od-features-card:hover {
        transform: translateY(-8px);
        border-color: #2962ff;
        box-shadow: 0 18px 40px rgba(0,0,0,.10);
    }

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

.od-features-icon {
    width: 64px;
    height: 64px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    margin-bottom: 22px;
    transition: .35s;
}

.od-features-card:hover .od-features-icon {
    transform: scale(1.08) rotate(6deg);
}

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

.od-green {
    background: #EEFFF4;
    color: #22C55E;
}

.od-purple {
    background: #F5F0FF;
    color: #8B5CF6;
}

.od-yellow {
    background: #FFF8E7;
    color: #F4B000;
}

.od-blue {
    background: #EDF5FF;
    color: #2563EB;
}

.od-pink {
    background: #FFF1F6;
    color: #EC4899;
}

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

.od-features-content h4 {
    margin: 0 0 14px;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.35;
    color: #111827;
}

.od-features-content p {
    margin: 0;
    font-size: 15px;
    line-height: 1.8;
    color: #6B7280;
}

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

@media (max-width:1200px) {

    .od-features-content h4 {
        font-size: 20px;
    }
}

@media (max-width:991px) {

    .od-features-section {
        padding: 65px 0;
    }

    .od-features-title {
        margin-bottom: 40px;
    }

        .od-features-title h2 {
            font-size: 26px;
        }

    .od-features-card {
        padding: 25px 20px;
    }

    .od-features-icon {
        width: 58px;
        height: 58px;
        font-size: 25px;
        margin-bottom: 18px;
    }

    .od-features-content h4 {
        font-size: 20px;
    }

    .od-features-content p {
        font-size: 14px;
    }
}

@media (max-width:767px) {

    .od-features-section {
        padding: 55px 0;
    }

    .od-features-title h2 {
        font-size: 22px;
    }

    .od-features-card {
        text-align: center;
    }

    .od-features-icon {
        margin: 0 auto 18px;
    }
}

@media (max-width:576px) {

    .od-features-title {
        margin-bottom: 30px;
    }

        .od-features-title h2 {
            font-size: 20px;
        }

    .od-features-card {
        padding: 22px 18px;
        border-radius: 16px;
    }

    .od-features-icon {
        width: 54px;
        height: 54px;
        font-size: 22px;
    }

    .od-features-content h4 {
        font-size: 18px;
    }

    .od-features-content p {
        font-size: 13px;
        line-height: 1.7;
    }
}

/*=========================================================
INDUSTRIES WE SERVE
=========================================================*/

.od-industries-section {
    padding: 40px 0;
    background: #ffffff;
    overflow: hidden;
}

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

.od-industries-title {
    max-width: 900px;
    margin: 0 auto 60px;
}

.od-industries-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 22px;
    background: linear-gradient(90deg,#edf4ff,#f5f7ff);
    border: 1px solid #e5ebff;
    border-radius: 40px;
    color: #2962ff;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .5px;
    margin-bottom: 22px;
}

    .od-industries-badge i {
        font-size: 16px;
    }

.od-industries-title h2 {
    margin: 0;
    font-size: 54px;
    font-weight: 800;
    line-height: 1.15;
    color: #111827;
}

.od-industries-line {
    display: block;
    width: 85px;
    height: 5px;
    margin: 24px auto;
    border-radius: 30px;
    background: #2962ff;
    position: relative;
}

    .od-industries-line::before {
        content: "";
        position: absolute;
        right: -18px;
        top: 50%;
        transform: translateY(-50%);
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: #2962ff;
    }

    .od-industries-line::after {
        content: "";
        position: absolute;
        right: -34px;
        top: 50%;
        transform: translateY(-50%);
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: #2962ff;
    }

.od-industries-title p {
    max-width: 760px;
    margin: 0 auto;
    font-size: 18px;
    line-height: 1.9;
    color: #6b7280;
}

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

.od-industries-card {
    background: #fff;
    border: 1px solid #eef2f8;
    border-radius: 22px;
    text-align: center;
    padding: 32px 20px;
    height: 100%;
    transition: .35s;
    box-shadow: 0 8px 28px rgba(15,23,42,.05);
    position: relative;
    overflow: hidden;
}

    .od-industries-card::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(180deg,rgba(41,98,255,.03),transparent);
        opacity: 0;
        transition: .35s;
    }

    .od-industries-card:hover {
        transform: translateY(-8px);
        border-color: #2962ff;
        box-shadow: 0 18px 45px rgba(0,0,0,.12);
    }

        .od-industries-card:hover::before {
            opacity: 1;
        }

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

.od-industries-icon {
    width: 95px;
    height: 95px;
    margin: 0 auto 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 42px;
    transition: .35s;
}

.od-industries-card:hover .od-industries-icon {
    transform: scale(1.08) rotate(6deg);
}

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

.od-industries-card h5 {
    margin: 0;
    font-size: 22px;
    font-weight: 700;
    color: #111827;
    line-height: 1.35;
}

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

.od-yellow {
    background: #FFF8E5;
    color: #F4B400;
}

.od-red {
    background: #FFF1F2;
    color: #EF4444;
}

.od-blue {
    background: #EDF5FF;
    color: #2563EB;
}

.od-green {
    background: #EEFFF4;
    color: #16A34A;
}

.od-purple {
    background: #F5F0FF;
    color: #8B5CF6;
}

.od-orange {
    background: #FFF4E9;
    color: #F97316;
}

.od-pink {
    background: #FFF1F7;
    color: #EC4899;
}

.od-sky {
    background: #EDF8FF;
    color: #3B82F6;
}

.od-cyan {
    background: #ECFEFF;
    color: #06B6D4;
}

.od-indigo {
    background: #EEF2FF;
    color: #6366F1;
}

.od-teal {
    background: #ECFDF5;
    color: #10B981;
}

.od-gray {
    background: #F3F4F6;
    color: #4B5563;
}

.od-gold {
    background: #FFF7E7;
    color: #F59E0B;
}

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

@media (max-width:1400px) {

    .od-industries-title h2 {
        font-size: 48px;
    }

    .od-industries-card {
        padding: 28px 18px;
    }

    .od-industries-icon {
        width: 85px;
        height: 85px;
        font-size: 36px;
    }

    .od-industries-card h5 {
        font-size: 20px;
    }
}

@media (max-width:1200px) {

    .od-industries-title h2 {
        font-size: 42px;
    }
}

@media (max-width:991px) {

    .od-industries-section {
        padding: 65px 0;
    }

    .od-industries-title {
        margin-bottom: 45px;
    }

        .od-industries-title h2 {
            font-size: 36px;
        }

        .od-industries-title p {
            font-size: 16px;
        }

    .od-industries-card {
        padding: 24px 15px;
    }

    .od-industries-icon {
        width: 75px;
        height: 75px;
        font-size: 32px;
        margin-bottom: 20px;
    }

    .od-industries-card h5 {
        font-size: 18px;
    }
}

@media (max-width:767px) {

    .od-industries-title h2 {
        font-size: 30px;
    }

    .od-industries-title p {
        font-size: 15px;
    }

    .od-industries-line {
        width: 60px;
    }

    .od-industries-icon {
        width: 70px;
        height: 70px;
        font-size: 30px;
    }
}

@media (max-width:576px) {

    .od-industries-section {
        padding: 50px 0;
    }

    .od-industries-title {
        margin-bottom: 35px;
    }

    .od-industries-badge {
        font-size: 13px;
        padding: 8px 18px;
    }

    .od-industries-title h2 {
        font-size: 26px;
    }

    .od-industries-title p {
        font-size: 14px;
        line-height: 1.8;
    }

    .od-industries-card {
        border-radius: 18px;
    }

        .od-industries-card h5 {
            font-size: 17px;
        }
}

/*==========================================
TECHNOLOGY
==========================================*/

.od-technology-section {
    padding: 40px 0;
    background: #ffffff;
}

/*============================*/

.od-technology-title {
    max-width: 900px;
    margin: 0 auto 50px;
}

    .od-technology-title h2 {
        margin: 0;
        font-size: 32px;
        font-weight: 800;
        color: #111827;
        text-transform: uppercase;
        letter-spacing: .5px;
    }

.od-technology-line {
    display: block;
    width: 55px;
    height: 3px;
    background: #2962ff;
    border-radius: 30px;
    margin: 15px auto 20px;
}

.od-technology-description {
    max-width: 960px;
    margin: 0 auto;
    font-size: 16px;
    line-height: 1.9;
    font-weight: 400;
    color: #6B7280;
    text-align: center;
}

/*============================*/

.od-technology-card {
    height: 118px;
    background: #fff;
    border: 1px solid #edf2f7;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 28px;
    transition: .35s;
    box-shadow: 0 6px 22px rgba(0,0,0,.04);
}

    .od-technology-card:hover {
        transform: translateY(-6px);
        box-shadow: 0 18px 45px rgba(0,0,0,.10);
        border-color: #2563eb;
    }

    .od-technology-card img {
        color: black;
        max-width: 120px;
        max-height: 48px;
        width: auto;
        height: auto;
        transition: .35s;
    }

    .od-technology-card:hover img {
        transform: scale(1.08);
    }

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

@media(max-width:1200px) {

    .od-technology-title h2 {
        font-size: 30px;
    }
}

@media(max-width:991px) {

    .od-technology-section {
        padding: 70px 0;
    }

    .od-technology-card {
        height: 110px;
    }
}

@media(max-width:767px) {

    .od-technology-section {
        padding: 55px 0;
    }

    .od-technology-title {
        margin-bottom: 30px;
    }

        .od-technology-title h2 {
            font-size: 24px;
        }

    .od-technology-card {
        height: 95px;
        padding: 20px;
    }

        .od-technology-card img {
            max-width: 95px;
            max-height: 38px;
        }
}

@media(max-width:575px) {

    .od-technology-card {
        height: 90px;
        border-radius: 14px;
    }
}

/*================ WHY DEVLOK =================*/

.why-devlok-section {
    padding: 80px 0;
    background: #f8fbff;
    overflow: hidden;
}

.why-devlok-wrapper {
    width: 100%;
}

.why-devlok-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 60px;
}

/* Left Side */

.why-devlok-heading {
    flex: 0 0 34%;
}

    .why-devlok-heading h2 {
        font-size: 46px;
        font-weight: 800;
        line-height: 1.2;
        color: #111827;
        margin: 0;
        text-transform: uppercase;
    }

        .why-devlok-heading h2 span {
            color: #0d6efd;
            display: block;
        }

/* Right Side */

.why-devlok-features {
    flex: 0 0 60%;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 25px;
}

/* Card */

.why-devlok-item {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    background: #fff;
    padding: 25px;
    border-radius: 18px;
    border: 1px solid #edf1f7;
    box-shadow: 0 12px 35px rgba(15, 23, 42, .06);
    transition: all .35s ease;
}

    .why-devlok-item:hover {
        transform: translateY(-8px);
        box-shadow: 0 18px 45px rgba(13, 110, 253, .15);
    }

/* Icon */

.why-devlok-icon {
    width: 62px;
    height: 62px;
    min-width: 62px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .why-devlok-icon i {
        font-size: 28px;
    }

/* Icon Colors */

.why-blue {
    background: rgba(13,110,253,.12);
    color: #0d6efd;
}

.why-red {
    background: rgba(220,53,69,.12);
    color: #dc3545;
}

.why-green {
    background: rgba(25,135,84,.12);
    color: #198754;
}

.why-purple {
    background: rgba(111,66,193,.12);
    color: #6f42c1;
}

.why-orange {
    background: rgba(253,126,20,.12);
    color: #fd7e14;
}

/* Content */

.why-devlok-content h5 {
    font-size: 22px;
    font-weight: 700;
    color: #111827;
    margin-bottom: 10px;
}

.why-devlok-content p {
    font-size: 16px;
    line-height: 1.7;
    color: #6b7280;
    margin: 0;
}

/*================ Tablet =================*/

@media (max-width:991px) {

    .why-devlok-inner {
        flex-direction: column;
        gap: 40px;
    }

    .why-devlok-heading {
        text-align: center;
        flex: 100%;
    }

        .why-devlok-heading h2 {
            font-size: 38px;
        }

    .why-devlok-features {
        width: 100%;
        grid-template-columns: repeat(2,1fr);
    }
}

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

@media (max-width:767px) {

    .why-devlok-section {
        padding: 60px 0;
    }

    .why-devlok-heading h2 {
        font-size: 30px;
    }

    .why-devlok-features {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .why-devlok-item {
        padding: 20px;
    }

    .why-devlok-icon {
        width: 55px;
        height: 55px;
        min-width: 55px;
    }

        .why-devlok-icon i {
            font-size: 24px;
        }

    .why-devlok-content h5 {
        font-size: 18px;
    }

    .why-devlok-content p {
        font-size: 15px;
    }
}
/*==============WHYUS================*/
.why-devlok-section {
    padding: 55px 0 65px;
    background: #ffffff;
}

.why-devlok-title h2 {
    font-size: 24px;
    line-height: 1.3;
    font-weight: 800;
    color: #111827;
    margin-bottom: 34px;
    text-transform: uppercase;
}

    .why-devlok-title h2 span {
        color: #075cff;
    }

.why-devlok-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 22px;
}

.why-devlok-card {
    min-height: 250px;
    padding: 32px 20px 25px;
    background: #ffffff;
    border: 1px solid #edf2fa;
    border-radius: 16px;
    text-align: center;
    box-shadow: 0 10px 35px rgba(0, 40, 120, 0.05);
}

.why-devlok-icon {
    width: 58px;
    height: 58px;
    margin: 0 auto 24px;
    border-radius: 50%;
    background: #f0f4ff;
    color: #075cff;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .why-devlok-icon i {
        font-size: 28px;
    }

.why-devlok-card h5 {
    font-size: 15px;
    line-height: 1.3;
    font-weight: 800;
    color: #111827;
    margin-bottom: 18px;
}

.why-devlok-card p {
    font-size: 15px;
    line-height: 1.75;
    color: #3f4654;
    margin: 0;
}

/* Tablet */
@media (max-width: 991px) {
    .why-devlok-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Mobile */
@media (max-width: 576px) {
    .why-devlok-section {
        padding: 40px 0;
    }

    .why-devlok-title h2 {
        font-size: 20px;
        margin-bottom: 25px;
    }

    .why-devlok-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .why-devlok-card {
        min-height: auto;
        padding: 25px 18px;
    }

        .why-devlok-card p {
            font-size: 14px;
        }
}


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

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

.od-process-title {
    margin-bottom: 38px;
}

    .od-process-title h2 {
        font-size: 18px;
        font-weight: 800;
        color: #111827;
        text-transform: uppercase;
        letter-spacing: .3px;
        margin: 0;
    }

/*==========================================
WRAP
==========================================*/

.od-process-wrap {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}

/*==========================================
ITEM
==========================================*/

.od-process-item {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    flex: 1;
    min-width: 0;
}

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

.od-process-icon {
    width: 56px;
    height: 56px;
    min-width: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #edf1f8;
    background: #fff;
    box-shadow: 0 5px 18px rgba(0,0,0,.05);
}

    .od-process-icon i {
        font-size: 24px;
    }

.purple {
    color: #8b5cf6;
    background: #f6f0ff;
}

.yellow {
    color: #f59e0b;
    background: #fff8eb;
}

.blue {
    color: #2563eb;
    background: #edf5ff;
}

.green {
    color: #16a34a;
    background: #eefcf3;
}

.orange {
    color: #f97316;
    background: #fff5ec;
}

.pink {
    color: #e11d48;
    background: #fff1f4;
}

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

.od-process-content {
    flex: 1;
}

.od-process-no {
    display: block;
    margin-bottom: 4px;
    font-size: 12px;
    font-weight: 800;
    color: #7c3aed;
}

.od-process-item:nth-child(4) .od-process-no {
    color: #ef4444;
}

.od-process-item:nth-child(6) .od-process-no {
    color: #2563eb;
}

.od-process-item:nth-child(8) .od-process-no {
    color: #16a34a;
}

.od-process-item:nth-child(10) .od-process-no {
    color: #f97316;
}

.od-process-item:nth-child(12) .od-process-no {
    color: #ec4899;
}

.od-process-content h5 {
    margin: 0 0 8px;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.35;
    color: #111827;
}

.od-process-content p {
    margin: 0;
    font-size: 12px;
    line-height: 1.7;
    color: #667085;
}

/*==========================================
ARROW
==========================================*/

.process-arrow {
    width: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 18px;
    color: #2563eb;
    font-size: 24px;
    flex-shrink: 0;
}

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

@media(max-width:1200px) {

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

    .process-arrow {
        display: none;
    }
}

@media(max-width:768px) {

    .od-process-wrap {
        grid-template-columns: 1fr;
    }

    .od-process-item {
        align-items: center;
    }
}
/*=====================================================
BUSINESS BENEFITS
=====================================================*/

.od-benfits-section {
    padding: 20px 0;
    background: #ffffff;
}

/*=============================*/

.od-benfits-box {
    background: linear-gradient(135deg,#182A9A 0%,#272FBC 45%,#2E1B90 100%);
    border-radius: 24px;
    overflow: hidden;
    padding: 55px 60px;
    position: relative;
    box-shadow: 0 20px 45px rgba(0,0,0,.18);
}

    /* Decorative Glow */

    .od-benfits-box::before {
        content: "";
        position: absolute;
        width: 320px;
        height: 320px;
        right: -120px;
        top: -120px;
        background: rgba(255,255,255,.08);
        border-radius: 50%;
        filter: blur(25px);
    }

    .od-benfits-box::after {
        content: "";
        position: absolute;
        width: 180px;
        height: 180px;
        left: -70px;
        bottom: -70px;
        background: rgba(255,255,255,.05);
        border-radius: 50%;
    }

/*=============================*/

.od-benfits-content {
    position: relative;
    z-index: 2;
}

    .od-benfits-content h2 {
        color: #fff;
        font-size: 34px;
        font-weight: 800;
        margin-bottom: 28px;
        text-transform: uppercase;
    }

/*=============================*/

.od-benfits-list {
    padding: 0;
    margin: 0;
    list-style: none;
}

    .od-benfits-list li {
        display: flex;
        align-items: center;
        gap: 14px;
        color: #ffffff;
        font-size: 18px;
        font-weight: 500;
        margin-bottom: 18px;
        line-height: 1.5;
        transition: .3s;
    }

        .od-benfits-list li:last-child {
            margin-bottom: 0;
        }

        .od-benfits-list li i {
            color: #ffffff;
            font-size: 20px;
            width: 22px;
        }

        .od-benfits-list li:hover {
            transform: translateX(8px);
        }

/*=============================*/

.od-benfits-image {
    position: relative;
    text-align: center;
    z-index: 2;
}

    .od-benfits-image img {
        max-width: 100%;
        transition: .4s;
    }

    .od-benfits-image:hover img {
        transform: scale(1.03);
    }

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

@media(max-width:991px) {

    .od-benfits-box {
        padding: 40px 30px;
        text-align: center;
    }

    .od-benfits-content {
        margin-bottom: 40px;
    }

    .od-benfits-list li {
        justify-content: center;
    }
}

@media(max-width:576px) {

    .od-benfits-section {
        padding: 50px 0;
    }

    .od-benfits-box {
        border-radius: 18px;
        padding: 30px 20px;
    }

    .od-benfits-content h2 {
        font-size: 26px;
    }

    .od-benfits-list li {
        font-size: 15px;
    }
}
/*============IDEA================*/
.od-quote-section {
    padding: 65px 0;
    background: #ffffff;
}

.od-quote-content h2 {
    font-size: 30px;
    line-height: 1.35;
    font-weight: 800;
    color: #111827;
    margin-bottom: 18px;
}

    .od-quote-content h2 span {
        color: #075cff;
    }

.od-quote-content p {
    max-width: 430px;
    font-size: 16px;
    line-height: 1.7;
    color: #3f4654;
    margin-bottom: 35px;
}

.od-contact-item {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    margin-bottom: 24px;
}

    .od-contact-item i {
        font-size: 24px;
        color: #075cff;
        margin-top: 4px;
    }

    .od-contact-item h5 {
        font-size: 15px;
        font-weight: 600;
        color: #6b7280;
        margin: 0 0 4px;
    }

    .od-contact-item a {
        font-size: 16px;
        font-weight: 600;
        color: #111827;
        text-decoration: none;
    }

.od-quote-form-box {
    background: #ffffff;
    border: 1px solid #edf2fa;
    border-radius: 14px;
    padding: 28px 34px 30px;
    box-shadow: 0 12px 35px rgba(0, 40, 120, 0.10);
}

    .od-quote-form-box label {
        font-size: 13px;
        font-weight: 600;
        color: #4b5563;
        margin-bottom: 6px;
    }

    .od-quote-form-box .form-control {
        height: 44px;
        border-radius: 7px;
        border: 1px solid #e1e7f0;
        font-size: 13px;
        color: #111827;
        box-shadow: none;
    }

    .od-quote-form-box textarea.form-control {
        height: 105px;
        resize: none;
    }

    .od-quote-form-box .form-control::placeholder {
        color: #9ca3af;
    }

.od-quote-btn {
    width: 100%;
    height: 48px;
    border: none;
    border-radius: 7px;
    background: #075cff;
    color: #ffffff;
    font-size: 16px;
    font-weight: 700;
    box-shadow: 0 8px 20px rgba(7, 92, 255, 0.28);
}

    .od-quote-btn:hover {
        background: #004bd6;
    }

/* Tablet */
@media (max-width: 991px) {
    .od-quote-content {
        text-align: center;
        margin-bottom: 35px;
    }

        .od-quote-content p {
            margin-left: auto;
            margin-right: auto;
        }

    .od-contact-item {
/*        justify-content: center;*/
        text-align: left;
    }
}

/* Mobile */
@media (max-width: 576px) {
    .od-quote-section {
        padding: 40px 0;
    }

    .od-quote-content h2 {
        font-size: 22px;
    }

    .od-quote-content p {
        font-size: 14px;
    }

    .od-quote-form-box {
        padding: 22px 16px;
    }

    .od-contact-item a {
        font-size: 14px;
    }
}



/*==================================================
               AI-DEVELOPMENT
==================================================*/
.ai-hero-section {
    position: relative;
    min-height: 640px;
    padding: 130px 0 130px;
    background: linear-gradient(120deg, #0057d8 0%, #003b93 45%, #00245f 100%);
    overflow: hidden;
}

    .ai-hero-section::before {
        content: "";
        position: absolute;
        inset: 0;
        background: radial-gradient(circle at 75% 20%, rgba(0, 204, 255, 0.22), transparent 30%), radial-gradient(circle at 18% 45%, rgba(255, 255, 255, 0.08), transparent 32%);
        z-index: 0;
    }

    .ai-hero-section::after {
        content: "";
        position: absolute;
        inset: 0;
        background-image: linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
        background-size: 42px 42px;
        opacity: 0.35;
        z-index: 0;
    }

.ai-hero-content,
.ai-hero-image {
    position: relative;
    z-index: 2;
}

    .ai-hero-content h1 {
        font-size: 36px;
        line-height: 1.15;
        font-weight: 800;
        color: #ffffff;
        margin-bottom: 22px;
        letter-spacing: 0.5px;
    }

        .ai-hero-content h1 span {
            color: #4fb4ff;
        }

    .ai-hero-content h4 {
        font-size: 31px;
        line-height: 1.3;
        font-weight: 600;
        color: #ffffff;
        margin-bottom: 34px;
    }

    .ai-hero-content p {
        font-size: 22px;
        line-height: 1.55;
        color: #ffffff;
        margin-bottom: 36px;
        opacity: 0.95;
    }

.ai-hero-buttons {
    display: flex;
    gap: 28px;
    align-items: center;
}

.ai-primary-btn,
.ai-outline-btn {
    min-width: 180px;
    height: 58px;
    border-radius: 7px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-size: 17px;
    font-weight: 800;
    transition: 0.3s ease;
}

.ai-primary-btn {
    background: #075cff;
    color: #ffffff;
    border: 1px solid #075cff;
    box-shadow: 0 10px 25px rgba(7, 92, 255, 0.35);
}

    .ai-primary-btn:hover {
        background: #ffffff;
        color: #075cff;
    }

.ai-outline-btn {
    background: transparent;
    color: #ffffff;
    border: 2px solid rgba(255,255,255,0.75);
}

    .ai-outline-btn:hover {
        background: #ffffff;
        color: #075cff;
    }

.ai-hero-image {
    text-align: center;
}

    .ai-hero-image img {
        max-width: 560px;
        height: auto;
        display: block;
        margin-left: auto;
    }

.ai-wave-shape {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 95px;
    z-index: 3;
}

    .ai-wave-shape svg {
        width: 100%;
        height: 100%;
        display: block;
    }

    .ai-wave-shape path {
        fill: #ffffff;
    }

/* Tablet */
@media (max-width: 991px) {
    .ai-hero-section {
        padding: 90px 0 120px;
        text-align: center;
    }

    .ai-hero-content h1 {
        font-size: 42px;
    }

    .ai-hero-content h4 {
        font-size: 24px;
    }

    .ai-hero-content p {
        font-size: 18px;
    }

    .ai-hero-buttons {
        justify-content: center;
        margin-bottom: 35px;
    }

    .ai-hero-image img {
        max-width: 430px;
        margin: 0 auto;
    }
}

/* Mobile */
@media (max-width: 576px) {
    .ai-hero-section {
        min-height: auto;
        padding: 130px 0 100px;
    }

    .ai-hero-content h1 {
        font-size: 32px;
    }

    .ai-hero-content h4 {
        font-size: 18px;
    }

    .ai-hero-content p {
        font-size: 15px;
    }

    .ai-hero-buttons {
        flex-direction: column;
        gap: 14px;
    }

    .ai-primary-btn,
    .ai-outline-btn {
        width: 100%;
        max-width: 260px;
        height: 50px;
        font-size: 15px;
    }

    .ai-wave-shape {
        height: 60px;
    }
}

/*==============SERVICE================*/
/*=========================================
AI SERVICES
=========================================*/

.aiml-services-section {
    padding: 100px 0;
    background: #f7faff;
}

.aiml-services-tag {
    display: inline-block;
    padding: 8px 22px;
    background: #eaf2ff;
    color: #0d6efd;
    border-radius: 50px;
    font-weight: 600;
    margin-bottom: 18px;
}

.aiml-services-title {
    font-size: 44px;
    font-weight: 800;
    color: #101828;
    margin-bottom: 18px;
}

.aiml-services-subtitle {
    max-width: 760px;
    margin: auto;
    color: #667085;
    line-height: 1.9;
    font-size: 17px;
}

.aiml-services-card {
    background: #fff;
    border-radius: 22px;
    padding: 35px 30px;
    height: 100%;
    position: relative;
    overflow: hidden;
    transition: .4s;
    border: 1px solid #edf1f7;
    box-shadow: 0 12px 40px rgba(15,23,42,.06);
}

    .aiml-services-card::before {
        content: "";
        position: absolute;
        left: -100%;
        top: 0;
        width: 100%;
        height: 5px;
        background: linear-gradient(90deg,#0d6efd,#6f42c1);
        transition: .4s;
    }

    .aiml-services-card:hover {
        transform: translateY(-12px);
        box-shadow: 0 25px 60px rgba(13,110,253,.18);
    }

        .aiml-services-card:hover::before {
            left: 0;
        }

.aiml-services-icon {
    width: 72px;
    height: 72px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 25px;
    background: linear-gradient(135deg,#0d6efd,#6f42c1);
    color: #fff;
    font-size: 30px;
    transition: .35s;
}

.aiml-services-card:hover .aiml-services-icon {
    transform: rotate(-8deg) scale(1.08);
}

.aiml-services-card h4 {
    font-size: 22px;
    font-weight: 700;
    color: #101828;
    margin-bottom: 15px;
}

.aiml-services-card p {
    color: #667085;
    line-height: 1.8;
    margin: 0;
}

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

@media(max-width:991px) {

    .aiml-services-section {
        padding: 80px 0;
    }

    .aiml-services-title {
        font-size: 36px;
    }
}

@media(max-width:767px) {

    .aiml-services-section {
        padding: 60px 0;
    }

    .aiml-services-title {
        font-size: 30px;
    }

    .aiml-services-card {
        padding: 28px;
    }
}


/*=========================================
RECENT PROJECTS
=========================================*/

.aiml-projects-section {
    padding: 100px 0;
    background: #f8fbff;
}

.aiml-projects-tag {
    display: inline-block;
    padding: 8px 20px;
    background: #eaf3ff;
    color: #0d6efd;
    border-radius: 50px;
    font-weight: 600;
    margin-bottom: 18px;
}

.aiml-projects-title {
    font-size: 46px;
    font-weight: 800;
    color: #101828;
    margin-bottom: 20px;
}

.aiml-projects-subtitle {
    max-width: 760px;
    margin: auto;
    color: #667085;
    line-height: 1.9;
}

.aiml-projects-card {
    background: #fff;
    border-radius: 22px;
    overflow: hidden;
    transition: .4s;
    height: 100%;
    box-shadow: 0 15px 45px rgba(0,0,0,.06);
}

    .aiml-projects-card:hover {
        transform: translateY(-10px);
        box-shadow: 0 30px 70px rgba(13,110,253,.15);
    }

.aiml-projects-image {
    position: relative;
    overflow: hidden;
}

    .aiml-projects-image img {
        width: 100%;
        height: 260px;
        object-fit: cover;
        transition: .5s;
    }

.aiml-projects-card:hover img {
    transform: scale(1.08);
}

.aiml-projects-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(rgba(13,110,253,.15),rgba(13,110,253,.75));
    opacity: 0;
    transition: .35s;
}

.aiml-projects-card:hover .aiml-projects-overlay {
    opacity: 1;
}

.aiml-projects-content {
    padding: 30px;
}

.aiml-projects-category {
    display: inline-block;
    color: #0d6efd;
    background: #eef5ff;
    padding: 6px 16px;
    border-radius: 30px;
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 18px;
}

.aiml-projects-content h4 {
    color: var(--bs-gray-900);
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 15px;
}

.aiml-projects-content p {
    color: #667085;
    line-height: 1.8;
}

.aiml-projects-tech {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 25px;
}

    .aiml-projects-tech span {
        padding: 7px 14px;
        background: #0f2e5a;
        border-radius: 30px;
        font-size: 13px;
        font-weight: 600;
        transition: .3s;
    }

.aiml-projects-card:hover .aiml-projects-tech span {
    background: #0d6efd;
    color: #fff;
}

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

@media(max-width:991px) {

    .aiml-projects-title {
        font-size: 38px;
    }
}

@media(max-width:767px) {

    .aiml-projects-section {
        padding: 70px 0;
    }

    .aiml-projects-title {
        font-size: 30px;
    }
}

/*======================================================
AI PROJECT SHOWCASE
======================================================*/

.ai-projects-section {
    padding: 90px 0;
    background: #f7f9fc;
}

.ai-project-heading {
    max-width: 720px;
    margin: auto;
    margin-bottom: 55px;
}

    .ai-project-heading span {
        display: inline-block;
        padding: 7px 18px;
        border-radius: 30px;
        background: #eef4ff;
        color: #2563eb;
        font-weight: 700;
        font-size: 13px;
        letter-spacing: .4px;
        margin-bottom: 15px;
    }

    .ai-project-heading h2 {
        font-size: 40px;
        font-weight: 800;
        color: #101828;
        margin-bottom: 16px;
        line-height: 1.2;
    }

    .ai-project-heading p {
        color: #667085;
        line-height: 1.7;
        font-size: 16px;
    }


/* Card */

.ai-project-card {
    background: #fff;
    border-radius: 22px;
    overflow: hidden;
    height: 100%;
    transition: .35s;
    border: 1px solid #edf2f7;
    box-shadow: 0 15px 40px rgba(0,0,0,.05);
}

    .ai-project-card:hover {
        transform: translateY(-8px);
        border-color: #3b82f6;
        box-shadow: 0 20px 50px rgba(59,130,246,.12);
    }


/* Image */

.ai-project-image {
    position: relative;
    overflow: hidden;
    height: 190px;
}

    .ai-project-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: .45s;
    }

.ai-project-card:hover img {
    transform: scale(1.06);
}


/* Badge */

.ai-project-badge {
    position: absolute;
    top: 16px;
    left: 16px;
    background: #2563eb;
    color: #fff;
    padding: 6px 15px;
    border-radius: 30px;
    font-size: 12px;
    font-weight: 700;
}


/* Body */

.ai-project-body {
    padding: 24px;
}

    .ai-project-body h3 {
        font-size: 22px;
        font-weight: 800;
        color: #111827;
        margin-bottom: 12px;
        line-height: 1.3;
    }

    .ai-project-body p {
        color: #667085;
        line-height: 1.7;
        font-size: 15px;
        margin-bottom: 18px;
    }


/* Tech */

.ai-tech-stack {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 22px;
}

    .ai-tech-stack span {
        background: #f4f7fb;
        color: #344054;
        padding: 6px 14px;
        border-radius: 25px;
        font-size: 12px;
        font-weight: 600;
    }


/* Stats */

.ai-project-stats {
    display: flex;
    justify-content: space-between;
    margin-bottom: 22px;
    border-top: 1px solid #edf2f7;
    border-bottom: 1px solid #edf2f7;
    padding: 16px 0;
}

.ai-project-stat {
    flex: 1;
    text-align: center;
}

    .ai-project-stat h4 {
        font-size: 22px;
        color: #2563eb;
        font-weight: 800;
        margin-bottom: 4px;
    }

    .ai-project-stat span {
        color: #667085;
        font-size: 12px;
    }


/* Button */

.ai-project-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #2563eb;
    text-decoration: none;
    font-size: 14px;
    font-weight: 700;
    transition: .3s;
}

    .ai-project-btn:hover {
        gap: 14px;
        color: #0d47c9;
    }


/* Responsive */

@media(max-width:991px) {

    .ai-project-heading h2 {
        font-size: 34px;
    }
}

@media(max-width:767px) {

    .ai-projects-section {
        padding: 65px 0;
    }

    .ai-project-heading h2 {
        font-size: 28px;
    }

    .ai-project-image {
        height: 180px;
    }

    .ai-project-body {
        padding: 20px;
    }

        .ai-project-body h3 {
            font-size: 20px;
        }
}

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

.ai-services-section {
    padding: 50px 0;
    position: relative;
    overflow: hidden;
}

    .ai-services-section::before {
        content: "";
        position: absolute;
        width: 420px;
        height: 420px;
        border-radius: 50%;
        top: -180px;
        left: -180px;
        filter: blur(30px);
    }

    .ai-services-section::after {
        content: "";
        position: absolute;
        width: 350px;
        height: 350px;
        background: rgba(111,66,193,.08);
        border-radius: 50%;
        right: -150px;
        bottom: -150px;
        filter: blur(30px);
    }

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

.ai-services-title {
    position: relative;
    z-index: 2;
    margin-bottom: 70px;
}

    .ai-services-title span {
        display: inline-block;
        padding: 8px 22px;
        background: #E8F1FF;
        color: #0d6efd;
        border-radius: 50px;
        font-size: 14px;
        font-weight: 700;
        letter-spacing: .5px;
        margin-bottom: 18px;
        text-transform: uppercase;
    }

    .ai-services-title h2 {
        font-size: 46px;
        font-weight: 800;
        color: #111827;
        margin-bottom: 18px;
        line-height: 1.25;
    }

    .ai-services-title p {
        max-width: 760px;
        margin: auto;
        color: #667085;
        font-size: 17px;
        line-height: 1.9;
    }

.ai-title-line {
    width: 85px;
    height: 4px;
    border-radius: 30px;
    background: linear-gradient(90deg,#0d6efd,#6f42c1);
    margin: 22px auto;
}

/*=========================================================
ROW
=========================================================*/

.ai-services-section .row {
    position: relative;
    z-index: 2;
}

/*=========================================================
5 COLUMN GRID
=========================================================*/

@media (min-width:992px) {

    .col-lg-2-4 {
        flex: 0 0 20%;
        max-width: 20%;
    }
}

@media (max-width:991px) {

    .col-lg-2-4 {
        flex: 0 0 50%;
        max-width: 50%;
    }
}

@media (max-width:767px) {

    .col-lg-2-4 {
        flex: 0 0 100%;
        max-width: 50%;
    }
}

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

.ai-service-card {
    position: relative;
    background: rgba(255,255,255,.82);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255,255,255,.55);
    border-radius: 22px;
    padding: 28px 20px;
    height: 100%;
    overflow: hidden;
    transition: .45s;
    box-shadow: 0 18px 45px rgba(15,23,42,.07);
    animation: fadeUp .7s ease both;
}

    .ai-service-card::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        width: 5px;
        height: 0;
        background: linear-gradient(#0d6efd,#6f42c1);
        transition: .45s;
    }

    .ai-service-card::after {
        content: "";
        position: absolute;
        width: 220px;
        height: 220px;
        border-radius: 50%;
        background: rgba(13,110,253,.05);
        top: -120px;
        right: -120px;
        transition: .45s;
    }

    .ai-service-card:hover {
        transform: translateY(-12px);
        box-shadow: 0 28px 60px rgba(13,110,253,.15);
        background: linear-gradient(135deg,#ffffff,#f7fbff);
    }

        .ai-service-card:hover::before {
            height: 100%;
        }

        .ai-service-card:hover::after {
            transform: scale(1.3);
        }

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

.ai-service-icon {
    width: 68px;
    height: 68px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg,#0d6efd,#6f42c1);
    color: #fff;
    font-size: 28px;
    margin-bottom: 22px;
    position: relative;
    transition: .4s;
}

    .ai-service-icon::before {
        content: "";
        position: absolute;
        inset: -4px;
        border: 2px dashed rgba(13,110,253,.18);
        border-radius: 24px;
    }

.ai-service-card:hover .ai-service-icon {
    transform: rotate(-8deg) scale(1.1);
}

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

.ai-service-card h5 {
    font-size: 20px;
    font-weight: 700;
    color: #111827;
    margin-bottom: 14px;
    line-height: 1.4;
    min-height: 58px;
}

.ai-service-card p {
    color: #667085;
    font-size: 14px;
    line-height: 1.75;
    margin-bottom: 0;
}

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

@keyframes fadeUp {

    from {
        opacity: 0;
        transform: translateY(35px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

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

@media (max-width:1200px) {

    .ai-services-title h2 {
        font-size: 40px;
    }

    .ai-service-card {
        padding: 26px 18px;
    }

        .ai-service-card h5 {
            font-size: 18px;
            min-height: 54px;
        }

        .ai-service-card p {
            font-size: 13px;
        }

    .ai-service-icon {
        width: 62px;
        height: 62px;
        font-size: 24px;
    }
}

@media (max-width:991px) {

    .ai-services-section {
        padding: 80px 0;
    }

    .ai-services-title {
        margin-bottom: 50px;
    }

        .ai-services-title h2 {
            font-size: 34px;
        }

    .ai-service-card {
        padding: 30px 24px;
    }

        .ai-service-card h5 {
            font-size: 21px;
            min-height: auto;
        }

        .ai-service-card p {
            font-size: 15px;
        }

    .ai-service-icon {
        width: 70px;
        height: 70px;
        font-size: 28px;
    }
}

@media (max-width:767px) {

    .ai-services-section {
        padding: 60px 0;
    }

    .ai-services-title h2 {
        font-size: 28px;
    }

    .ai-services-title p {
        font-size: 15px;
    }

    .ai-service-card {
        border-radius: 18px;
        padding: 28px 22px;
    }

    .ai-service-icon {
        width: 62px;
        height: 62px;
        font-size: 24px;
    }

    .ai-service-card h5 {
        font-size: 20px;
    }

    .ai-service-card p {
        font-size: 14px;
    }
}
/*===========PROCESS=============*/
.ai-workflow-section {
    padding: 50px 0 60px;
    background: #f7fbff;
}

.ai-workflow-title span {
    display: block;
    font-size: 13px;
    font-weight: 800;
    color: #075cff;
    margin-bottom: 8px;
}

.ai-workflow-title h2 {
    font-size: 32px;
    font-weight: 800;
    color: #111827;
    margin-bottom: 8px;
}

.ai-workflow-line {
    width: 54px;
    height: 3px;
    background: #075cff;
    border-radius: 30px;
    margin: 0 auto 14px;
}

.ai-workflow-title p {
    font-size: 15px;
    color: #3f4654;
    margin-bottom: 38px;
}

.ai-workflow-wrap {
    position: relative;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 35px;
}

.ai-workflow-wrap::before {
    content: "";
    position: absolute;
    top: 40px;
    left: 11%;
    right: 11%;
    border-top: 2px dashed #b9cff5;
    z-index: 1;
}

.ai-workflow-item {
    position: relative;
    z-index: 2;
    text-align: center;
}

.ai-workflow-icon {
    width: 82px;
    height: 82px;
    margin: 0 auto 18px;
    background: #ffffff;
    border-radius: 50%;
    color: #075cff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 28px rgba(0, 40, 120, 0.06);
}

.ai-workflow-icon i {
    font-size: 34px;
}

.ai-step-no {
    width: 32px;
    height: 32px;
    margin: 0 auto 18px;
    border-radius: 50%;
    background: #075cff;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 800;
}

.ai-workflow-item h5 {
    font-size: 15px;
    font-weight: 800;
    color: #111827;
    margin-bottom: 12px;
}

.ai-workflow-item p {
    max-width: 150px;
    margin: 0 auto;
    font-size: 14px;
    line-height: 1.7;
    color: #3f4654;
}

/* Mobile */
@media (max-width: 576px) {
    .ai-workflow-section {
        padding: 35px 0;
    }

    /* Title */
    .ai-workflow-title span {
        font-size: 11px;
    }

    .ai-workflow-title h2 {
        font-size: 20px;
        margin-bottom: 5px;
    }

    .ai-workflow-title p {
        font-size: 12px;
        margin-bottom: 25px;
    }

    /* 🔥 3 column layout */
    .ai-workflow-wrap {
        grid-template-columns: repeat(3, 1fr);
        gap: 25px 10px;
        justify-items: center;
    }

        /* Remove dashed line */
        .ai-workflow-wrap::before {
            display: none;
        }

    /* ICON */
    .ai-workflow-icon {
        width: 55px;
        height: 55px;
        margin-bottom: 10px;
    }

        .ai-workflow-icon i {
            font-size: 22px;
        }

    /* STEP NUMBER */
    .ai-step-no {
        width: 24px;
        height: 24px;
        font-size: 10px;
        margin-bottom: 8px;
    }

    /* TITLE */
    .ai-workflow-item h5 {
        font-size: 12px;
        line-height: 1.3;
        margin-bottom: 6px;
    }

    /* DESCRIPTION */
    .ai-workflow-item p {
        font-size: 11px;
        line-height: 1.4;
        max-width: 100%;
    }
}


/*==============BENIFIT===============*/
.ai-benefits-section {
    padding: 45px 0 55px;
    background: #ffffff;
}

.ai-benefits-title span {
    display: block;
    font-size: 13px;
    font-weight: 800;
    color: #075cff;
    margin-bottom: 7px;
}

.ai-benefits-title h2 {
    font-size: 32px;
    font-weight: 800;
    color: #111827;
    margin-bottom: 8px;
}

.ai-benefits-line {
    width: 54px;
    height: 3px;
    background: #075cff;
    border-radius: 20px;
    margin: 0 auto 13px;
}

.ai-benefits-title p {
    font-size: 15px;
    color: #3f4654;
    margin-bottom: 38px;
}

.ai-benefits-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 24px;
}

.ai-benefit-card {
    min-height: 170px;
    padding: 26px 18px 20px;
    background: #ffffff;
    border: 1px solid #edf2fa;
    border-radius: 8px;
    text-align: center;
    box-shadow: 0 8px 26px rgba(0, 40, 120, 0.05);
}

    .ai-benefit-card i {
        display: block;
        font-size: 40px;
        color: #075cff;
        margin-bottom: 18px;
    }

    .ai-benefit-card h5 {
        font-size: 14px;
        font-weight: 800;
        color: #111827;
        margin-bottom: 12px;
    }

    .ai-benefit-card p {
        font-size: 13px;
        line-height: 1.65;
        color: #3f4654;
        margin: 0;
    }

/* Tablet */
@media (max-width: 991px) {
    .ai-benefits-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Mobile */
@media (max-width: 576px) {
    .ai-benefits-section {
        padding: 35px 0;
    }

    .ai-benefits-title h2 {
        font-size: 22px;
    }

    .ai-benefits-title p {
        font-size: 13px;
        margin-bottom: 25px;
    }

    .ai-benefits-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }

    .ai-benefit-card {
        min-height: auto;
        padding: 22px 12px;
    }

        .ai-benefit-card i {
            font-size: 30px;
            margin-bottom: 12px;
        }

        .ai-benefit-card h5 {
            font-size: 13px;
        }

        .ai-benefit-card p {
            font-size: 12px;
        }
}

/*=================CTA===============*/
.ai-cta-section {
    position: relative;
    padding: 25px 0;
    background: linear-gradient(120deg, #075cff 0%, #0047c8 55%, #00328f 100%);
    overflow: hidden;
}

    .ai-cta-section::after {
        content: "";
        position: absolute;
        left: 360px;
        bottom: -40px;
        width: 230px;
        height: 230px;
        background: radial-gradient(circle, rgba(255,255,255,0.25) 1px, transparent 2px);
        background-size: 12px 12px;
        opacity: 0.7;
    }

.ai-cta-content {
    position: relative;
    z-index: 2;
    color: #ffffff;
}

    .ai-cta-content h2 {
        font-size: 34px;
        line-height: 1.35;
        font-weight: 800;
        margin-bottom: 22px;
    }

    .ai-cta-content p {
        font-size: 18px;
        line-height: 1.7;
        margin-bottom: 36px;
    }

.ai-cta-contact {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    margin-bottom: 24px;
}

    .ai-cta-contact i {
        font-size: 30px;
        color: #ffffff;
        margin-top: 4px;
    }

    .ai-cta-contact h5 {
        font-size: 16px;
        font-weight: 800;
        margin: 0 0 4px;
        color: #ffffff;
    }

    .ai-cta-contact a {
        font-size: 17px;
        font-weight: 600;
        color: #ffffff;
        text-decoration: none;
    }

.ai-cta-form-box {
    position: relative;
    z-index: 2;
    background: #ffffff;
    border-radius: 12px;
    padding: 28px 38px 30px;
    box-shadow: 0 12px 35px rgba(0, 20, 80, 0.18);
}

    .ai-cta-form-box label {
        font-size: 13px;
        font-weight: 600;
        color: #4b5563;
        margin-bottom: 6px;
    }

    .ai-cta-form-box .form-control {
        height: 46px;
        border-radius: 7px;
        border: 1px solid #dfe6f0;
        font-size: 14px;
        box-shadow: none;
    }

    .ai-cta-form-box textarea.form-control {
        height: 98px;
        resize: none;
    }

.ai-cta-btn {
    width: 100%;
    height: 48px;
    border: none;
    border-radius: 7px;
    background: #075cff;
    color: #ffffff;
    font-size: 17px;
    font-weight: 800;
}

    .ai-cta-btn:hover {
        background: #004bd6;
    }

/* Mobile */
@media (max-width: 576px) {
    .ai-cta-section {
        padding: 35px 0;
    }

    .ai-cta-content {
        text-align: center;
        margin-bottom: 25px;
    }

        .ai-cta-content h2 {
            font-size: 24px;
        }

        .ai-cta-content p {
            font-size: 15px;
        }

    .ai-cta-contact {
        text-align: left;
    }

    .ai-cta-form-box {
        padding: 22px 16px;
    }
}



/*=========================================
          SAAS_DEVELOPMENT
=========================================*/
.saas-hero-section {
    position: relative;
    padding: 120px 0 85px;
    background: linear-gradient(120deg, #0b132b 0%, #1c2541 50%, #3a86ff 100%);
    overflow: hidden;
}

    .saas-hero-section::after {
        content: "";
        position: absolute;
        right: 0;
        bottom: 90px;
        width: 58%;
        height: 200px;
        background: #73b4fa3d;
        border-radius: 160px 0 0 160px;
        z-index: 0;
    }

.saas-hero-content,
.saas-hero-image {
    position: relative;
    z-index: 2;
}

.saas-badge {
    display: inline-block;
    color: #5f93f6;
    font-size: 14px;
    font-weight: 800;
    margin-bottom: 18px;
    text-transform: uppercase;
}

.saas-hero-content h1 {
    font-size: 52px;
    line-height: 1.12;
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 25px;
}

    .saas-hero-content h1 strong {
        color: #5f93f6;
        font-weight: 800;
    }

.saas-hero-content p {
    max-width: 560px;
    font-size: 17px;
    line-height: 1.8;
    color: #e2edff;
    margin-bottom: 28px;
}

.saas-hero-buttons {
    display: flex;
    gap: 22px;
    align-items: center;
    margin-bottom: 58px;
}

.saas-primary-btn,
.saas-outline-btn {
    min-width: 210px;
    height: 58px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    text-decoration: none;
    font-size: 17px;
    font-weight: 800;
    transition: 0.3s ease;
}

.saas-primary-btn {
    background: #075cff;
    color: #ffffff;
    border: 1px solid #075cff;
    box-shadow: 0 10px 25px rgba(7, 92, 255, 0.22);
}

    .saas-primary-btn:hover {
        background: #004bd6;
        color: #ffffff;
    }

.saas-outline-btn {
    background: #ffffff;
    color: #075cff;
    border: 1px solid #9fbaff;
}

    .saas-outline-btn:hover {
        background: #075cff;
        color: #ffffff;
    }

.saas-feature-row {
    display: flex;
    align-items: center;
    gap: 42px;
}

.saas-feature-item {
    display: flex;
    align-items: center;
    gap: 14px;
}

    .saas-feature-item i {
        width: 34px;
        height: 34px;
        color: #dbe7ff;
        font-size: 30px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .saas-feature-item h5 {
        font-size: 21px;
        font-weight: 800;
        color: #ffffff;
        margin: 0 0 3px;
    }

    .saas-feature-item p {
        font-size: 13px;
        line-height: 1.3;
        color: #d5e6ff;
        margin: 0;
    }

.saas-hero-image {
    text-align: right;
}

    .saas-hero-image img {
        width: 100%;
        max-width: 760px;
        height: auto;
        display: block;
        margin-left: auto;
    }

/* Tablet */
@media (max-width: 991px) {
    .saas-hero-section {
        padding: 90px 0 70px;
        text-align: center;
    }

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

    .saas-hero-content p {
        margin-left: auto;
        margin-right: auto;
    }

    .saas-hero-buttons,
    .saas-feature-row {
        justify-content: center;
    }

    .saas-feature-row {
        flex-wrap: wrap;
        gap: 25px;
        margin-bottom: 40px;
    }

    .saas-hero-image {
        text-align: center;
    }

        .saas-hero-image img {
            max-width: 620px;
            margin: 0 auto;
        }
}

/* Mobile */
/* Mobile */
@media (max-width: 576px) {
    .saas-hero-section {
        padding: 135px 0 45px;
        text-align: center;
    }

        .saas-hero-section::after {
            width: 100%;
            height: 180px;
            right: -35%;
            bottom: 40px;
            border-radius: 120px 0 0 120px;
            opacity: 0.7;
        }

    .saas-badge {
        font-size: 11px;
        margin-bottom: 12px;
    }

    .saas-hero-content h1 {
        font-size: 30px;
        line-height: 1.22;
        margin-bottom: 18px;
    }

    .saas-hero-content p {
        font-size: 14px;
        line-height: 1.7;
        max-width: 100%;
        margin-bottom: 22px;
    }

    .saas-hero-buttons {
        flex-direction: column;
        gap: 12px;
        margin-bottom: 28px;
    }

    .saas-primary-btn,
    .saas-outline-btn {
        width: 100%;
        max-width: 260px;
        height: 48px;
        font-size: 14px;
        gap: 10px;
        margin: 0 auto;
    }

    .saas-feature-row {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 12px;
        margin-bottom: 28px;
    }

    .saas-feature-item {
        flex-direction: column;
        gap: 7px;
        text-align: center;
    }

        .saas-feature-item i {
            font-size: 24px;
            width: 28px;
            height: 28px;
        }

        .saas-feature-item h5 {
            font-size: 14px;
            margin: 0;
        }

        .saas-feature-item p {
            font-size: 10px;
            line-height: 1.3;
            margin: 0;
        }

    .saas-hero-image {
        margin-top: 10px;
        text-align: center;
    }

        .saas-hero-image img {
            width: 100%;
            max-width: 340px;
            margin: 0 auto;
        }
}

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

.saas-services-section {
    padding: 70px 0;
    background: #ffffff;
}

.saas-services-title {
    margin-bottom: 45px;
}

    .saas-services-title span {
        display: inline-block;
        font-size: 13px;
        font-weight: 700;
        color: #2563eb;
        letter-spacing: .8px;
        text-transform: uppercase;
        margin-bottom: 10px;
    }

    .saas-services-title h2 {
        font-size: 36px;
        font-weight: 800;
        color: #111827;
        line-height: 1.3;
        margin-bottom: 15px;
    }

.saas-title-line {
    width: 70px;
    height: 4px;
    background: linear-gradient(90deg,#2563eb,#5b49f8);
    border-radius: 50px;
    margin: auto;
}

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

.saas-services-grid {
    display: grid;
    grid-template-columns: repeat(5,1fr);
    gap: 24px;
}

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

.saas-service-card {
    background: #fff;
    border: 1px solid #edf2fa;
    border-radius: 14px;
    padding: 28px 18px;
    text-align: center;
    height: 100%;
    min-height: 270px;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: .35s ease;
    box-shadow: 0 10px 30px rgba(20,40,120,.06);
}

    .saas-service-card:hover {
        transform: translateY(-8px);
        border-color: #4f6df5;
        box-shadow: 0 18px 45px rgba(37,99,235,.15);
    }

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

.saas-service-icon {
    width: 72px;
    height: 72px;
    margin: 0 auto 22px;
    border-radius: 50%;
    background: #f4f7ff;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #2563eb;
    transition: .35s;
}

.saas-service-card:hover .saas-service-icon {
    background: #2563eb;
    color: #fff;
}

.saas-service-icon i {
    font-size: 34px;
}

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

.saas-service-card h5 {
    font-size: 18px;
    font-weight: 700;
    line-height: 1.45;
    color: #111827;
    margin-bottom: 16px;
    min-height: 58px;
}

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

.saas-service-card p {
    margin: 0;
    color: #667085;
    font-size: 14px;
    line-height: 1.75;
}

/*==========================
LARGE DESKTOP
==========================*/

@media(min-width:1400px) {

    .saas-service-card {
        min-height: 285px;
    }
}

/*==========================
TABLET
==========================*/

@media(max-width:1199px) {

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

@media(max-width:991px) {

    .saas-services-section {
        padding: 60px 0;
    }

    .saas-services-title h2 {
        font-size: 30px;
    }

    .saas-services-grid {
        grid-template-columns: repeat(3,1fr);
        gap: 20px;
    }

    .saas-service-card {
        min-height: 255px;
    }
}

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

@media(max-width:767px) {

    .saas-services-title h2 {
        font-size: 26px;
    }

    .saas-services-grid {
        grid-template-columns: repeat(2,1fr);
        gap: 18px;
    }

    .saas-service-card {
        min-height: 240px;
        padding: 22px 14px;
    }

    .saas-service-icon {
        width: 60px;
        height: 60px;
        margin-bottom: 18px;
    }

        .saas-service-icon i {
            font-size: 28px;
        }

    .saas-service-card h5 {
        font-size: 15px;
        min-height: 50px;
        margin-bottom: 12px;
    }

    .saas-service-card p {
        font-size: 12px;
        line-height: 1.6;
    }
}

@media(max-width:480px) {

    .saas-services-grid {
        grid-template-columns: 1fr;
    }
}
/*=========================================================
SAAS SOLUTIONS
=========================================================*/

.saas-industry-section {
    position: relative;
    padding: 80px 0;
    background: linear-gradient(180deg,#f8fbff 0%,#ffffff 100%);
    overflow: hidden;
}

    .saas-industry-section::before {
        content: "";
        position: absolute;
        width: 280px;
        height: 280px;
        border-radius: 50%;
        background: rgba(37,99,235,.06);
        top: -120px;
        left: -120px;
    }

    .saas-industry-section::after {
        content: "";
        position: absolute;
        width: 340px;
        height: 340px;
        border-radius: 50%;
        background: rgba(91,73,248,.05);
        bottom: -160px;
        right: -160px;
    }

    .saas-industry-section .container {
        position: relative;
        z-index: 2;
    }

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

.saas-industry-title {
    margin-bottom: 55px;
}

    .saas-industry-title span {
        display: inline-block;
        padding: 8px 18px;
        border-radius: 30px;
        background: #eef4ff;
        color: #2563eb;
        font-size: 13px;
        font-weight: 700;
        letter-spacing: .8px;
        text-transform: uppercase;
        margin-bottom: 15px;
    }

    .saas-industry-title h2 {
        font-size: 40px;
        font-weight: 800;
        color: #111827;
        line-height: 1.3;
        margin-bottom: 18px;
    }

.saas-industry-line {
    width: 80px;
    height: 4px;
    margin: auto;
    border-radius: 20px;
    background: linear-gradient(90deg,#2563eb,#5b49f8);
}

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

.saas-industry-grid {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 28px;
}

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

.saas-industry-card {
    position: relative;
    background: #ffffff;
    border: 1px solid #edf2fa;
    border-radius: 20px;
    padding: 35px 24px;
    text-align: center;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    min-height: 285px;
    transition: .35s ease;
    box-shadow: 0 10px 35px rgba(15,23,42,.06);
}

    .saas-industry-card::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 5px;
        background: linear-gradient(90deg,#2563eb,#5b49f8);
        transform: scaleX(0);
        transition: .35s;
    }

    .saas-industry-card:hover {
        transform: translateY(-10px);
        border-color: #d8e5ff;
        box-shadow: 0 22px 55px rgba(37,99,235,.16);
    }

        .saas-industry-card:hover::before {
            transform: scaleX(1);
        }

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

.saas-industry-icon {
    width: 78px;
    height: 78px;
    margin-bottom: 24px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(135deg,#eef4ff,#dbeafe);
    color: #2563eb;
    transition: .35s;
}

.saas-industry-card:hover .saas-industry-icon {
    background: linear-gradient(135deg,#2563eb,#5b49f8);
    color: #ffffff;
    transform: rotate(-8deg) scale(1.08);
}

.saas-industry-icon i {
    font-size: 34px;
}

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

.saas-industry-card h5 {
    font-size: 20px;
    font-weight: 700;
    color: #111827;
    line-height: 1.35;
    margin-bottom: 16px;
}

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

.saas-industry-card p {
    margin: 0;
    color: #667085;
    font-size: 14px;
    line-height: 1.75;
}

/*==============================
LARGE DESKTOP
==============================*/

@media(min-width:1400px) {

    .saas-industry-grid {
        gap: 30px;
    }
}

/*==============================
LAPTOP
==============================*/

@media(max-width:1199px) {

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

/*==============================
TABLET
==============================*/

@media(max-width:991px) {

    .saas-industry-section {
        padding: 70px 0;
    }

    .saas-industry-title {
        margin-bottom: 45px;
    }

        .saas-industry-title h2 {
            font-size: 32px;
        }

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

    .saas-industry-card {
        min-height: 260px;
    }
}

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

@media(max-width:576px) {

    .saas-industry-section {
        padding: 55px 0;
    }

    .saas-industry-title span {
        font-size: 11px;
    }

    .saas-industry-title h2 {
        font-size: 26px;
    }

    .saas-industry-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .saas-industry-card {
        min-height: auto;
        padding: 28px 22px;
    }

    .saas-industry-icon {
        width: 64px;
        height: 64px;
        margin-bottom: 20px;
    }

        .saas-industry-icon i {
            font-size: 28px;
        }

    .saas-industry-card h5 {
        font-size: 18px;
        margin-bottom: 12px;
    }

    .saas-industry-card p {
        font-size: 13px;
        line-height: 1.7;
    }
}

/*==============PROCESS==============*/
.saas-process-section {
    padding: 55px;
    background: #ffffff;
}

.saas-process-title span {
    display: block;
    font-size: 13px;
    font-weight: 800;
    color: #075cff;
    margin-bottom: 8px;
}

.saas-process-title h2 {
    font-size: 32px;
    line-height: 1.25;
    font-weight: 800;
    color: #111827;
    margin-bottom: 10px;
}

.saas-process-line {
    width: 54px;
    height: 3px;
    background: #075cff;
    border-radius: 20px;
    margin: 0 auto 36px;
}

.saas-process-wrap {
    position: relative;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 24px;
}

    .saas-process-wrap::before {
        content: "";
        position: absolute;
        top: 42px;
        left: 8%;
        right: 8%;
        border-top: 2px dashed #d3def1;
        z-index: 1;
    }

.saas-process-item {
    position: relative;
    z-index: 2;
    text-align: center;
}

.saas-process-icon {
    width: 78px;
    height: 78px;
    margin: 0 auto 14px;
    border-radius: 50%;
    background: #ffffff;
    border: 1px solid #edf2fa;
    box-shadow: 0 8px 28px rgba(0, 40, 120, 0.06);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #075cff;
}

    .saas-process-icon i {
        font-size: 32px;
    }

.saas-process-no {
    width: 30px;
    height: 30px;
    margin: 0 auto 14px;
    border-radius: 50%;
    background: #075cff;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 800;
}

.saas-process-item h5 {
    font-size: 15px;
    line-height: 1.3;
    font-weight: 800;
    color: #111827;
    margin-bottom: 10px;
}

.saas-process-item p {
    max-width: 150px;
    margin: 0 auto;
    font-size: 13px;
    line-height: 1.65;
    color: #3f4654;
}

/* Tablet */
@media (max-width: 991px) {
    .saas-process-wrap {
        grid-template-columns: repeat(3, 1fr);
        gap: 32px 20px;
    }

        .saas-process-wrap::before {
            display: none;
        }
}

/* Mobile */
@media (max-width: 576px) {
    .saas-process-section {
        padding: 40px 0;
    }

    .saas-process-title span {
        font-size: 11px;
    }

    .saas-process-title h2 {
        font-size: 22px;
    }

    .saas-process-line {
        margin-bottom: 26px;
    }

    .saas-process-wrap {
        grid-template-columns: repeat(3, 1fr);
        gap: 25px 10px;
    }

    .saas-process-icon {
        width: 55px;
        height: 55px;
        margin-bottom: 10px;
    }

        .saas-process-icon i {
            font-size: 22px;
        }

    .saas-process-no {
        width: 24px;
        height: 24px;
        font-size: 10px;
        margin-bottom: 8px;
    }

    .saas-process-item h5 {
        font-size: 12px;
        margin-bottom: 6px;
    }

    .saas-process-item p {
        max-width: 100%;
        font-size: 11px;
        line-height: 1.45;
    }
}

/*================BENIFITS=============*/
.saas-benefits-section {
    padding: 55px 0 65px;
    background: #f8fbff;
}

.saas-benefits-title span {
    display: block;
    font-size: 13px;
    font-weight: 800;
    color: #075cff;
    margin-bottom: 8px;
}

.saas-benefits-title h2 {
    font-size: 32px;
    line-height: 1.25;
    font-weight: 800;
    color: #111827;
    margin-bottom: 10px;
}

.saas-benefits-line {
    width: 54px;
    height: 3px;
    background: #075cff;
    border-radius: 20px;
    margin: 0 auto 32px;
}

.saas-benefit-card {
    height: 100%;
    min-height: 215px;
    padding: 28px 14px 22px;
    background: #ffffff;
    border: 1px solid #edf2fa;
    border-radius: 12px;
    text-align: center;
    box-shadow: 0 8px 28px rgba(0, 40, 120, 0.06);
}

.saas-benefit-icon {
    width: 58px;
    height: 58px;
    margin: 0 auto 20px;
    border-radius: 50%;
    background: #f1f5ff;
    color: #075cff;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .saas-benefit-icon i {
        font-size: 28px;
    }

.saas-benefit-card h5 {
    font-size: 15px;
    line-height: 1.35;
    font-weight: 800;
    color: #111827;
    margin-bottom: 14px;
}

.saas-benefit-card p {
    font-size: 13.5px;
    line-height: 1.7;
    color: #5b6472;
    margin: 0 auto;
    max-width: 180px;
}

/* Tablet */
@media (max-width: 991px) {
    .saas-benefits-title h2 {
        font-size: 28px;
    }
}

/* Mobile */
@media (max-width: 576px) {
    .saas-benefits-section {
        padding: 40px 0;
    }

    .saas-benefits-title span {
        font-size: 11px;
    }

    .saas-benefits-title h2 {
        font-size: 22px;
    }

    .saas-benefits-line {
        margin-bottom: 24px;
    }

    .saas-benefit-card {
        min-height: 195px;
        padding: 24px 10px 18px;
    }

    .saas-benefit-icon {
        width: 50px;
        height: 50px;
        margin-bottom: 15px;
    }

        .saas-benefit-icon i {
            font-size: 23px;
        }

    .saas-benefit-card h5 {
        font-size: 13px;
        margin-bottom: 10px;
    }

    .saas-benefit-card p {
        font-size: 11px;
        line-height: 1.55;
        max-width: 130px;
    }
}

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

.saas-tech-section {
    position: relative;
    padding: 90px 0;
    background: linear-gradient(180deg,#F8FBFF 0%,#FFFFFF 100%);
    overflow: hidden;
}

    .saas-tech-section::before {
        content: "";
        position: absolute;
        top: -180px;
        left: -120px;
        width: 380px;
        height: 380px;
        border-radius: 50%;
        background: radial-gradient(circle,#2563eb12 0%,transparent 70%);
    }

    .saas-tech-section::after {
        content: "";
        position: absolute;
        right: -150px;
        bottom: -150px;
        width: 420px;
        height: 420px;
        border-radius: 50%;
        background: radial-gradient(circle,#5b49f810 0%,transparent 70%);
    }

    .saas-tech-section .container {
        position: relative;
        z-index: 2;
    }

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

.saas-tech-title {
    margin-bottom: 55px;
}

    .saas-tech-title span {
        display: inline-block;
        padding: 8px 18px;
        background: #EEF4FF;
        color: #2563EB;
        border-radius: 30px;
        font-size: 13px;
        font-weight: 700;
        letter-spacing: 1px;
        text-transform: uppercase;
        margin-bottom: 16px;
    }

    .saas-tech-title h2 {
        font-size: 42px;
        font-weight: 800;
        color: #101828;
        line-height: 1.3;
        margin-bottom: 18px;
    }

.saas-tech-line {
    width: 90px;
    height: 4px;
    margin: auto;
    border-radius: 20px;
    background: linear-gradient(90deg,#2563EB,#5B49F8);
}

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

.saas-tech-grid {
    display: grid;
    grid-template-columns: repeat(5,1fr);
    gap: 28px;
}

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

.saas-tech-card {
    position: relative;
    background: #fff;
    border-radius: 22px;
    padding: 34px 24px;
    border: 1px solid #ECF2FF;
    text-align: center;
    transition: .35s;
    overflow: hidden;
    min-height: 260px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    box-shadow: 0 15px 35px rgba(15,23,42,.06);
}

    .saas-tech-card::before {
        content: "";
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 5px;
        background: linear-gradient(90deg,#2563EB,#5B49F8);
        transform: scaleX(0);
        transition: .35s;
    }

    .saas-tech-card:hover {
        transform: translateY(-10px);
        box-shadow: 0 25px 50px rgba(37,99,235,.15);
        border-color: #D9E7FF;
    }

        .saas-tech-card:hover::before {
            transform: scaleX(1);
        }

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

.saas-tech-icon {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 22px;
    background: linear-gradient(135deg,#F3F7FF,#E4EDFF);
    transition: .35s;
}

.saas-tech-card:hover .saas-tech-icon {
    transform: scale(1.08);
    background: linear-gradient(135deg,#EEF4FF,#D7E6FF);
}

.saas-tech-icon img {
    width: 58px;
    height: 58px;
    object-fit: contain;
}

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

.saas-tech-card h5 {
    font-size: 22px;
    font-weight: 700;
    color: #111827;
    margin-bottom: 12px;
}

/*=========================================================
DESCRIPTION
=========================================================*/

.saas-tech-card p {
    margin: 0;
    color: #667085;
    font-size: 14px;
    line-height: 1.7;
}

/*=========================================================
HOVER COLORS
=========================================================*/

.saas-tech-card:nth-child(1):hover::before {
    background: #0078D4;
}

.saas-tech-card:nth-child(2):hover::before {
    background: #FF9900;
}

.saas-tech-card:nth-child(3):hover::before {
    background: #2496ED;
}

.saas-tech-card:nth-child(4):hover::before {
    background: #326CE5;
}

.saas-tech-card:nth-child(5):hover::before {
    background: #DC382D;
}

.saas-tech-card:nth-child(6):hover::before {
    background: #FF6600;
}

.saas-tech-card:nth-child(7):hover::before {
    background: #00B7C3;
}

.saas-tech-card:nth-child(8):hover::before {
    background: #0078D4;
}

.saas-tech-card:nth-child(9):hover::before {
    background: #D33833;
}

.saas-tech-card:nth-child(10):hover::before {
    background: #7C3AED;
}

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

@media(max-width:1200px) {

    .saas-tech-grid {
        grid-template-columns: repeat(4,1fr);
    }
}

@media(max-width:991px) {

    .saas-tech-section {
        padding: 70px 0;
    }

    .saas-tech-title h2 {
        font-size: 34px;
    }

    .saas-tech-grid {
        grid-template-columns: repeat(3,1fr);
        gap: 22px;
    }

    .saas-tech-card {
        min-height: 240px;
    }
}

@media(max-width:767px) {

    .saas-tech-title h2 {
        font-size: 28px;
    }

    .saas-tech-grid {
        grid-template-columns: repeat(2,1fr);
        gap: 18px;
    }

    .saas-tech-card {
        min-height: 220px;
        padding: 26px 18px;
    }

    .saas-tech-icon {
        width: 80px;
        height: 80px;
    }

        .saas-tech-icon img {
            width: 46px;
            height: 46px;
        }

    .saas-tech-card h5 {
        font-size: 18px;
    }

    .saas-tech-card p {
        font-size: 13px;
    }
}

@media(max-width:480px) {

    .saas-tech-section {
        padding: 55px 0;
    }

    .saas-tech-grid {
        grid-template-columns: 1fr;
    }

    .saas-tech-title h2 {
        font-size: 24px;
    }

    .saas-tech-card {
        min-height: auto;
    }
}
/*============Saas-Faq============*/
/*=========================================================
SAAS WHY CHOOSE US + FAQ
=========================================================*/

.saas-whyus-faq-section {
    position: relative;
    padding: 90px 0;
    background: linear-gradient(180deg,#F8FBFF 0%,#FFFFFF 100%);
    overflow: visible;
}

.saas-whyus-faq-section::before {
    content: "";
    position: absolute;
    width: 420px;
    height: 420px;
    left: -180px;
    top: -180px;
    border-radius: 50%;
    background: radial-gradient(circle,#2563EB10 0%,transparent 70%);
}

.saas-whyus-faq-section::after {
    content: "";
    position: absolute;
    width: 450px;
    height: 450px;
    right: -220px;
    bottom: -220px;
    border-radius: 50%;
    background: radial-gradient(circle,#5B49F810 0%,transparent 70%);
}

.saas-whyus-faq-section .container {
    position: relative;
    z-index: 2;
}

.saas-whyus-faq-section .row {
    align-items: flex-start;
}

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

.saas-whyus-tag {
    display: inline-block;
    padding: 8px 20px;
    background: #EEF4FF;
    color: #2563EB;
    border-radius: 40px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 15px;
}

.saas-whyus-heading {
    font-size: 42px;
    font-weight: 800;
    color: #111827;
    margin-bottom: 18px;
}

.saas-whyus-line {
    width: 90px;
    height: 4px;
    margin: auto;
    border-radius: 20px;
    background: linear-gradient(90deg,#2563EB,#5B49F8);
}

/*=========================================================
Why Us Cards
=========================================================*/

.saas-whyus-card {
    position: relative;
    background: #fff;
    border-radius: 20px;
    border: 1px solid #E8EEF9;
    padding: 28px;
    display: flex;
    gap: 18px;
    align-items: flex-start;
    transition: .35s;
    overflow: hidden;
    box-shadow: 0 12px 30px rgba(15,23,42,.05);
    height: 100%;
}

.saas-whyus-card::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 5px;
    height: 100%;
    background: linear-gradient(180deg,#2563EB,#5B49F8);
    transform: scaleY(0);
    transition: .35s;
}

.saas-whyus-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 22px 45px rgba(37,99,235,.15);
    border-color: #DCE7FF;
}

.saas-whyus-card:hover::before {
    transform: scaleY(1);
}

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

.saas-whyus-icon {
    width: 70px;
    height: 70px;
    flex-shrink: 0;
    border-radius: 18px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(135deg,#EEF4FF,#DCE8FF);
    color: #2563EB;
    transition: .35s;
}

.saas-whyus-icon i {
    font-size: 28px;
}

.saas-whyus-card:hover .saas-whyus-icon {
    background: linear-gradient(135deg,#2563EB,#5B49F8);
    color: #fff;
    transform: rotate(-8deg);
}

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

.saas-whyus-content {
    flex: 1;
}

.saas-whyus-content h5 {
    font-size: 20px;
    font-weight: 700;
    color: #111827;
    margin-bottom: 10px;
}

.saas-whyus-content p {
    margin: 0;
    color: #667085;
    font-size: 14px;
    line-height: 1.75;
}

/*=========================================================
Check Badge
=========================================================*/

.saas-whyus-check {
    position: absolute;
    top: 18px;
    right: 18px;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #EEF4FF;
    color: #2563EB;
    transition: .35s;
}

.saas-whyus-card:hover .saas-whyus-check {
    background: #2563EB;
    color: #fff;
}

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

.saas-faq {
    position: sticky;
    position: -webkit-sticky;
    top: 110px;
    z-index: 20;
    align-self: flex-start;

    background: #fff;
    padding: 32px;
    border-radius: 24px;
    border: 1px solid #E8EEF9;
    box-shadow: 0 15px 35px rgba(15,23,42,.06);
}

.saas-faq .accordion-item {
    border: none;
    margin-bottom: 18px;
    background: transparent;
}

.saas-faq .accordion-button {
    background: #F8FAFF;
    border: 1px solid #E6ECF8;
    border-radius: 16px !important;
    box-shadow: none;
    padding: 20px 22px;
    font-size: 17px;
    font-weight: 600;
    color: #111827;
    transition: .35s;
}

.saas-faq .accordion-button:not(.collapsed) {
    background: linear-gradient(90deg,#2563EB,#5B49F8);
    color: #fff;
    border-color: transparent;
}

.saas-faq .accordion-button:focus {
    box-shadow: none;
}

.saas-faq .accordion-button::after {
    background-size: 16px;
}

.saas-faq .accordion-button:not(.collapsed)::after {
    filter: brightness(0) invert(1);
}

.saas-faq .accordion-body {
    background: #fff;
    border: 1px solid #E6ECF8;
    border-top: none;
    border-radius: 0 0 16px 16px;
    padding: 22px;
    color: #667085;
    font-size: 15px;
    line-height: 1.8;
}

.saas-faq .accordion-button:hover {
    border-color: #2563EB;
}

.saas-faq .accordion-item:last-child {
    margin-bottom: 0;
}

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

@media (max-width:1199px) {

    .saas-whyus-heading {
        font-size: 36px;
    }

}

@media (max-width:991px) {

    .saas-whyus-faq-section {
        padding: 70px 0;
    }

    .saas-whyus-heading {
        font-size: 32px;
    }

    .saas-faq {
        position: static;
        margin-top: 40px;
        padding: 28px;
    }

    .saas-whyus-card {
        padding: 24px;
    }

    .saas-whyus-icon {
        width: 64px;
        height: 64px;
    }

    .saas-whyus-icon i {
        font-size: 24px;
    }

}

@media (max-width:767px) {

    .saas-whyus-heading {
        font-size: 28px;
    }

    .saas-whyus-card {
        flex-direction: column;
        text-align: center;
        padding: 24px 20px;
    }

    .saas-whyus-icon {
        margin: auto;
    }

    .saas-whyus-check {
        top: 14px;
        right: 14px;
    }

    .saas-whyus-content h5 {
        font-size: 18px;
    }

    .saas-whyus-content p {
        font-size: 13px;
    }

    .saas-faq {
        padding: 22px;
    }

    .saas-faq .accordion-button {
        padding: 18px;
        font-size: 15px;
    }

    .saas-faq .accordion-body {
        padding: 18px;
        font-size: 14px;
    }

}

@media (max-width:576px) {

    .saas-whyus-faq-section {
        padding: 55px 0;
    }

    .saas-whyus-tag {
        font-size: 11px;
        padding: 7px 16px;
    }

    .saas-whyus-heading {
        font-size: 24px;
    }

    .saas-whyus-line {
        width: 70px;
    }

    .saas-whyus-card {
        border-radius: 18px;
    }

    .saas-faq {
        border-radius: 20px;
    }

}
/*=============CTA=============*/
.saas-cta-section {
    position: relative;
    padding: 35px 0;
    background: linear-gradient(120deg, #075cff 0%, #0047c8 55%, #00328f 100%);
    overflow: hidden;
}

.saas-cta-section::after {
    content: "";
    position: absolute;
    left: 360px;
    bottom: -55px;
    width: 260px;
    height: 260px;
    background: radial-gradient(circle, rgba(255,255,255,0.28) 1px, transparent 2px);
    background-size: 12px 12px;
    opacity: 0.7;
    z-index: 1;
}

.saas-cta-content,
.saas-cta-form-box {
    position: relative;
    z-index: 2;
}

.saas-cta-content {
    color: #ffffff;
}

.saas-cta-content h2 {
    font-size: 34px;
    line-height: 1.25;
    font-weight: 800;
    margin-bottom: 18px;
}

.saas-cta-content p {
    max-width: 470px;
    font-size: 16px;
    line-height: 1.65;
    margin-bottom: 28px;
}

.saas-cta-contact {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    margin-bottom: 22px;
}

.saas-cta-contact i {
    font-size: 28px;
    color: #ffffff;
    margin-top: 4px;
}

.saas-cta-contact h5 {
    font-size: 15px;
    font-weight: 800;
    margin: 0 0 4px;
    color: #ffffff;
}

.saas-cta-contact a {
    font-size: 15px;
    font-weight: 600;
    color: #ffffff;
    text-decoration: none;
}

.saas-cta-form-box {
    background: #ffffff;
    border-radius: 10px;
    padding: 25px 35px 28px;
    box-shadow: 0 12px 35px rgba(0, 20, 80, 0.18);
}

.saas-cta-form-box label {
    font-size: 12px;
    font-weight: 600;
    color: #4b5563;
    margin-bottom: 6px;
}

.saas-cta-form-box .form-control {
    height: 42px;
    border-radius: 6px;
    border: 1px solid #dfe6f0;
    font-size: 13px;
    box-shadow: none;
}

.saas-cta-form-box textarea.form-control {
    height: 78px;
    resize: none;
}

.saas-cta-btn {
    width: 100%;
    height: 44px;
    border: none;
    border-radius: 6px;
    background: #075cff;
    color: #ffffff;
    font-size: 15px;
    font-weight: 800;
}

.saas-cta-btn:hover {
    background: #004bd6;
}

/* Tablet */
@media (max-width: 991px) {
    .saas-cta-content {
        text-align: center;
        margin-bottom: 30px;
    }

    .saas-cta-content p {
        margin-left: auto;
        margin-right: auto;
    }

    .saas-cta-contact {
/*        justify-content: center;*/
        text-align: left;
    }
}

/* Mobile */
@media (max-width: 576px) {
    .saas-cta-section {
        padding: 35px 0;
    }

    .saas-cta-section::after {
        left: auto;
        right: -70px;
        bottom: 25px;
        width: 180px;
        height: 180px;
    }

    .saas-cta-content h2 {
        font-size: 25px;
    }

    .saas-cta-content p {
        font-size: 14px;
    }

    .saas-cta-form-box {
        padding: 22px 16px;
    }

    .saas-cta-contact a {
        font-size: 14px;
    }
}


/*===========================================
            AI/Ml Development
===========================================*/
.ai-hero-section {
    position: relative;
    padding: 130px 0 80px;
    background: linear-gradient(120deg, #0b132b 0%, #1c2541 50%, #3a86ff 100%);
    overflow: hidden;
}

    /* Soft glow effect */
    .ai-hero-section::after {
        content: "";
        position: absolute;
        right: -100px;
        bottom: -100px;
        width: 350px;
        height: 350px;
        background: radial-gradient(circle, rgba(58,134,255,0.4) 0%, transparent 70%);
        z-index: 0;
    }

/* Content */
.ai-hero-content,
.ai-hero-image {
    position: relative;
    z-index: 2;
}

/* Badge */
.ai-badge {
    display: inline-block;
    padding: 6px 16px;
    border-radius: 30px;
    background: rgba(255,255,255,0.12);
    color: #ffffff;
    font-size: 12px;
    font-weight: 700;
    margin-bottom: 20px;
}

/* Heading */
.ai-hero-content h1 {
    font-size: 48px;
    line-height: 1.2;
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 20px;
}

    .ai-hero-content h1 strong {
        color: #4cc9f0;
    }

/* Text */
.ai-hero-content p {
    font-size: 16px;
    line-height: 1.8;
    color: #e0e7ff;
    margin-bottom: 28px;
}

/* Buttons */
.ai-hero-buttons {
    display: flex;
    gap: 18px;
}

.ai-primary-btn,
.ai-outline-btn {
    height: 50px;
    padding: 0 24px;
    border-radius: 6px;
    font-size: 15px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
}

/* Primary */
.ai-primary-btn {
    background: #3a86ff;
    color: #ffffff;
}

    .ai-primary-btn:hover {
        background: #2563eb;
    }

/* Outline */
.ai-outline-btn {
    border: 1px solid #ffffff;
    color: #ffffff;
}

    .ai-outline-btn:hover {
        background: #ffffff;
        color: #3a86ff;
    }

/* Image */
.ai-hero-image img {
    width: 100%;
    max-width: 520px;
    display: block;
    margin-left: auto;
}

/* Tablet */
@media (max-width: 991px) {
    .ai-hero-section {
        text-align: center;
        padding: 140px 0 60px;
    }

    .ai-hero-content h1 {
        font-size: 36px;
    }

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

    .ai-hero-image img {
        margin: 30px auto 0;
        max-width: 420px;
    }
}

/* Mobile */
@media (max-width: 576px) {
    .ai-hero-section {
        padding: 130px 0 50px;
    }

    .ai-hero-content h1 {
        font-size: 28px;
    }

    .ai-hero-content p {
        font-size: 14px;
    }

    .ai-hero-buttons {
        flex-direction: column;
        align-items: center;
    }

    .ai-primary-btn,
    .ai-outline-btn {
        width: 100%;
        max-width: 260px;
        justify-content: center;
    }

    .ai-hero-image img {
        max-width: 300px;
    }
}


/*=========================================
AI FAQ
=========================================*/

.aiml-section {
    padding: 100px 0;
    background: #f8fbff;
}

.aiml-faq-tag,
.aiml-whyus-tag {
    display: inline-block;
    padding: 8px 18px;
    background: #eaf3ff;
    color: #0d6efd;
    border-radius: 30px;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 20px;
}

.aiml-faq-title,
.aiml-whyus-title {
    font-size: 40px;
    font-weight: 800;
    color: #132238;
    margin-bottom: 30px;
}

.aiml-faq-item {
    border: none;
    border-radius: 18px !important;
    overflow: hidden;
    margin-bottom: 18px;
    box-shadow: 0 10px 30px rgba(0,0,0,.05);
}

.aiml-faq-btn {
    font-size: 18px;
    font-weight: 600;
    padding: 22px 25px;
    background: #fff;
    box-shadow: none !important;
}

    .aiml-faq-btn:not(.collapsed) {
        background: #0d6efd;
        color: #fff;
    }

    .aiml-faq-btn:focus {
        box-shadow: none;
    }

.accordion-body {
    padding: 22px 25px;
    line-height: 1.8;
    color: #667085;
}

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

.aiml-section {
    padding: 100px 0;
    background: #f8fbff;
}

    .aiml-section .row {
        align-items: stretch;
    }

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

.aiml-faq-sticky {
    position: sticky;
    top: 100px;
    width: 100%;
    display: flex;
}

.aiml-faq {
    width: 100%;
    height: 100%;
    background: #fff;
    border-radius: 24px;
    padding: 45px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 50px rgba(0,0,0,.06);
}

.aiml-faq-tag,
.aiml-whyus-tag {
    display: inline-block;
    padding: 8px 18px;
    background: #e9f2ff;
    color: #0d6efd;
    border-radius: 30px;
    font-weight: 600;
    font-size: 14px;
    margin-bottom: 20px;
}

.aiml-faq-title,
.aiml-whyus-title {
    font-size: 42px;
    font-weight: 800;
    line-height: 1.25;
    color: #111827;
    margin-bottom: 30px;
}

.aiml-faq .accordion {
    flex: 1;
}

.aiml-faq-item {
    border: none;
    border-radius: 18px !important;
    margin-bottom: 18px;
    overflow: hidden;
    box-shadow: 0 8px 20px rgba(0,0,0,.05);
}

.aiml-faq-btn {
    font-size: 18px;
    font-weight: 700;
    padding: 24px;
    background: #fff;
    color: #111827;
    box-shadow: none !important;
}

    .aiml-faq-btn:not(.collapsed) {
        background: #0d6efd;
        color: #fff;
    }

.accordion-button:focus {
    box-shadow: none;
}

.accordion-body {
    padding: 24px;
    font-size: 16px;
    line-height: 1.8;
    color: #667085;
}

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

.aiml-whyus {
    position: sticky;
    top: 100px;
    width: 100%;
    height: 100%;
    background: #fff;
    border-radius: 24px;
    padding: 45px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 50px rgba(0,0,0,.06);
}

.aiml-whyus-text {
    color: #667085;
    font-size: 17px;
    line-height: 1.8;
    margin-bottom: 35px;
}

.aiml-whyus-list {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 20px;
}

.aiml-whyus-card {
    display: flex;
    align-items: center;
    gap: 20px;
    min-height: 95px;
    padding: 22px 24px;
    border-radius: 18px;
    background: #f4f8ff;
    transition: all .35s ease;
    cursor: pointer;
}

    .aiml-whyus-card:hover {
        transform: translateX(8px);
        background: #0d6efd;
    }

    .aiml-whyus-card i {
        width: 60px;
        height: 60px;
        border-radius: 16px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #0d6efd;
        color: #fff;
        font-size: 24px;
        transition: .35s;
    }

    .aiml-whyus-card:hover i {
        background: #fff;
        color: #0d6efd;
    }

    .aiml-whyus-card span {
        font-size: 18px;
        font-weight: 700;
        color: #111827;
        transition: .35s;
    }

    .aiml-whyus-card:hover span {
        color: #fff;
    }

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

@media (max-width: 991px) {

    .aiml-section {
        padding: 80px 0;
    }

    .aiml-faq-title,
    .aiml-whyus-title {
        font-size: 34px;
    }

    .aiml-faq-sticky,
    .aiml-whyus {
        position: relative;
        top: 0;
    }

    .aiml-whyus {
        margin-top: 40px;
    }

    .aiml-whyus-list {
        justify-content: flex-start;
    }

    .aiml-whyus-card {
        min-height: auto;
    }
}

@media (max-width: 767px) {

    .aiml-section {
        padding: 60px 0;
    }

    .aiml-faq,
    .aiml-whyus {
        padding: 28px;
    }

    .aiml-faq-title,
    .aiml-whyus-title {
        font-size: 28px;
    }

    .aiml-faq-btn {
        font-size: 16px;
        padding: 18px;
    }

    .accordion-body {
        padding: 18px;
        font-size: 15px;
    }

    .aiml-whyus-card {
        padding: 18px;
    }

        .aiml-whyus-card i {
            width: 50px;
            height: 50px;
            font-size: 20px;
        }

        .aiml-whyus-card span {
            font-size: 16px;
        }
}
/*=========================================
AI/ML INDUSTRIES
=========================================*/

.aiml-industries {
    padding: 30px 0;
    background: linear-gradient(180deg,#ffffff 0%,#f8fbff 100%);
}

.aiml-industries-heading {
    max-width: 800px;
    margin: 0 auto 60px;
}

.aiml-industries-tag {
    display: inline-block;
    padding: 8px 20px;
    background: #eef5ff;
    color: #0d6efd;
    border-radius: 30px;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 20px;
}

.aiml-industries-title {
    font-size: 46px;
    font-weight: 800;
    color: #14213d;
    margin-bottom: 20px;
    line-height: 1.2;
}

    .aiml-industries-title span {
        color: #0d6efd;
    }

.aiml-industries-description {
    font-size: 18px;
    color: #667085;
    line-height: 1.8;
}

.aiml-industries-card {
    background: #fff;
    border: 1px solid #edf2f7;
    border-radius: 22px;
    padding: 35px 25px;
    text-align: center;
    height: 100%;
    transition: .35s;
    box-shadow: 0 10px 30px rgba(15,23,42,.05);
}

    .aiml-industries-card:hover {
        transform: translateY(-10px);
        border-color: #0d6efd;
        box-shadow: 0 25px 50px rgba(13,110,253,.18);
    }

.aiml-industries-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 22px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg,#0d6efd,#4da3ff);
    color: #fff;
    font-size: 32px;
    transition: .35s;
}

.aiml-industries-card:hover .aiml-industries-icon {
    transform: rotate(-8deg) scale(1.08);
}

.aiml-industries-card h5 {
    margin: 0;
    font-size: 22px;
    font-weight: 700;
    color: #14213d;
}

@media(max-width:991px) {

    .aiml-industries {
        padding: 80px 0;
    }

    .aiml-industries-title {
        font-size: 38px;
    }
}

@media(max-width:767px) {

    .aiml-industries {
        padding: 60px 0;
    }

    .aiml-industries-title {
        font-size: 30px;
    }

    .aiml-industries-description {
        font-size: 16px;
    }

    .aiml-industries-card {
        padding: 30px 20px;
    }

    .aiml-industries-icon {
        width: 70px;
        height: 70px;
        font-size: 28px;
    }

    .aiml-industries-card h5 {
        font-size: 20px;
    }
}

/*============PROCESS===============*/
.aiml-process-section {
    padding: 55px 0 65px;
    background: #f7fbff;
}

.aiml-process-title span {
    display: block;
    font-size: 13px;
    font-weight: 800;
    color: #075cff;
    margin-bottom: 8px;
    text-transform: uppercase;
}

.aiml-process-title h2 {
    font-size: 32px;
    line-height: 1.25;
    font-weight: 800;
    color: #111827;
    margin-bottom: 10px;
}

.aiml-process-line {
    width: 54px;
    height: 3px;
    background: #075cff;
    border-radius: 20px;
    margin: 0 auto 18px;
}

.aiml-process-title p {
    max-width: 760px;
    margin: 0 auto 42px;
    font-size: 15px;
    line-height: 1.7;
    color: #5b6472;
}

.aiml-process-wrap {
    position: relative;
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 20px;
}

    .aiml-process-wrap::before {
        content: "";
        position: absolute;
        top: 40px;
        left: 6%;
        right: 6%;
        border-top: 2px dashed #b9cff5;
        z-index: 1;
    }

.aiml-process-item {
    position: relative;
    z-index: 2;
    text-align: center;
}

.aiml-process-icon {
    width: 78px;
    height: 78px;
    margin: 0 auto 14px;
    border-radius: 50%;
    background: #ffffff;
    border: 1px solid #edf2fa;
    color: #075cff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 28px rgba(0, 40, 120, 0.06);
}

    .aiml-process-icon i {
        font-size: 30px;
    }

.aiml-process-no {
    width: 30px;
    height: 30px;
    margin: 0 auto 14px;
    border-radius: 50%;
    background: #075cff;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 800;
}

.aiml-process-item h5 {
    min-height: 40px;
    font-size: 14px;
    line-height: 1.35;
    font-weight: 800;
    color: #111827;
    margin-bottom: 9px;
}

.aiml-process-item p {
    max-width: 140px;
    margin: 0 auto;
    font-size: 12.5px;
    line-height: 1.6;
    color: #5b6472;
}

/* Tablet */
@media (max-width: 991px) {
    .aiml-process-wrap {
        grid-template-columns: repeat(3, 1fr);
        gap: 32px 20px;
    }

        .aiml-process-wrap::before {
            display: none;
        }

    .aiml-process-item h5 {
        min-height: auto;
    }
}

/* Mobile */
@media (max-width: 576px) {
    .aiml-process-section {
        padding: 40px 0;
    }

    .aiml-process-title span {
        font-size: 11px;
    }

    .aiml-process-title h2 {
        font-size: 22px;
    }

    .aiml-process-title p {
        font-size: 13px;
        margin-bottom: 26px;
    }

    .aiml-process-wrap {
        grid-template-columns: repeat(2, 1fr);
        gap: 22px 12px;
    }

    .aiml-process-icon {
        width: 56px;
        height: 56px;
        margin-bottom: 10px;
    }

        .aiml-process-icon i {
            font-size: 22px;
        }

    .aiml-process-no {
        width: 24px;
        height: 24px;
        font-size: 10px;
        margin-bottom: 8px;
    }

    .aiml-process-item h5 {
        font-size: 12px;
        margin-bottom: 6px;
    }

    .aiml-process-item p {
        max-width: 140px;
        font-size: 11px;
        line-height: 1.45;
    }
}


/*============BENIFITS=============*/
.aiml-benefits-section {
    padding: 55px 0 65px;
    background: #ffffff;
}

.aiml-benefits-title span {
    display: block;
    font-size: 13px;
    font-weight: 800;
    color: #075cff;
    margin-bottom: 8px;
    text-transform: uppercase;
}

.aiml-benefits-title h2 {
    font-size: 32px;
    line-height: 1.25;
    font-weight: 800;
    color: #111827;
    margin-bottom: 10px;
}

.aiml-benefits-line {
    width: 54px;
    height: 3px;
    background: #075cff;
    border-radius: 20px;
    margin: 0 auto 32px;
}

/* Card */
.aiml-benefit-card {
    height: 100%;
    padding: 28px 15px 22px;
    background: #ffffff;
    border: 1px solid #edf2fa;
    border-radius: 12px;
    text-align: center;
    box-shadow: 0 8px 28px rgba(0, 40, 120, 0.05);
    transition: 0.3s ease;
}

    .aiml-benefit-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 14px 40px rgba(0, 40, 120, 0.12);
    }

    /* Icon */
    .aiml-benefit-card i {
        display: block;
        font-size: 34px;
        color: #075cff;
        margin-bottom: 14px;
    }

    /* Text */
    .aiml-benefit-card h5 {
        font-size: 15px;
        font-weight: 800;
        color: #111827;
        margin: 0;
    }

/* Tablet */
@media (max-width: 991px) {
    .aiml-benefits-title h2 {
        font-size: 28px;
    }
}

/* Mobile */
@media (max-width: 576px) {
    .aiml-benefits-section {
        padding: 40px 0;
    }

    .aiml-benefits-title span {
        font-size: 11px;
    }

    .aiml-benefits-title h2 {
        font-size: 22px;
    }

    .aiml-benefits-line {
        margin-bottom: 24px;
    }

    .aiml-benefit-card {
        padding: 22px 10px;
    }

        .aiml-benefit-card i {
            font-size: 26px;
            margin-bottom: 10px;
        }

        .aiml-benefit-card h5 {
            font-size: 13px;
        }
}

/*=====================================
      Hire Developers
======================================*/

.hiring-developers-section {
    position: relative;
    overflow: hidden;
    padding: 110px 0;
    background: linear-gradient(180deg,#f8fbff,#eef5ff);
}

    .hiring-developers-section .container {
        position: relative;
        z-index: 5;
    }

/* Background Shapes */

.hiring-developers-shape {
    position: absolute;
    border-radius: 50%;
    filter: blur(40px);
    opacity: .18;
    z-index: 1;
}

.hiring-developers-shape1 {
    width: 340px;
    height: 340px;
    background: #4f46e5;
    top: -120px;
    right: -100px;
}

.hiring-developers-shape2 {
    width: 300px;
    height: 300px;
    background: #00c6ff;
    bottom: -100px;
    left: -80px;
}

/* Heading */

.hiring-developers-header {
    max-width: 760px;
    margin: auto;
    margin-bottom: 70px;
}

.hiring-developers-tag {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: #ffffff;
    color: #4f46e5;
    padding: 10px 20px;
    border-radius: 40px;
    font-weight: 600;
    box-shadow: 0 10px 25px rgba(0,0,0,.08);
    margin-bottom: 25px;
}

.hiring-developers-header h2 {
    font-size: 48px;
    font-weight: 800;
    color: #111827;
    margin-bottom: 20px;
}

.hiring-developers-header p {
    font-size: 18px;
    color: #6b7280;
    line-height: 32px;
}

/* Card */

.hiring-developers-card {
    background: #fff;
    border-radius: 24px;
    padding: 35px;
    position: relative;
    overflow: hidden;
    height: 100%;
    transition: .4s;
    border: 1px solid #e9eef7;
    box-shadow: 0 15px 40px rgba(15,23,42,.06);
}

.hiring-developers-card-top {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 5px;
    background: linear-gradient(90deg,#4f46e5,#06b6d4);
}

.hiring-developers-card:hover {
    transform: translateY(-12px);
    box-shadow: 0 25px 60px rgba(79,70,229,.18);
}

.hiring-developers-icon {
    width: 78px;
    height: 78px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 20px;
    font-size: 34px;
    color: #fff;
    background: linear-gradient(135deg,#4f46e5,#06b6d4);
    margin-bottom: 25px;
    box-shadow: 0 15px 30px rgba(79,70,229,.25);
}

.hiring-developers-card h4 {
    font-size: 22px;
    font-weight: 700;
    color: #111827;
    margin-bottom: 15px;
}

.hiring-developers-card p {
    color: #6b7280;
    line-height: 28px;
    margin-bottom: 25px;
}

.hiring-developers-card a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: #4f46e5;
    font-weight: 700;
    transition: .3s;
}

.hiring-developers-card:hover a {
    color: #06b6d4;
}

.hiring-developers-card a i {
    transition: .3s;
}

.hiring-developers-card:hover a i {
    transform: translateX(6px);
}

/* Responsive */

@media(max-width:991px) {

    .hiring-developers-header h2 {
        font-size: 38px;
    }
}

@media(max-width:767px) {

    .hiring-developers-section {
        padding: 80px 0;
    }

    .hiring-developers-header h2 {
        font-size: 30px;
    }

    .hiring-developers-header p {
        font-size: 16px;
        line-height: 28px;
    }

    .hiring-developers-card {
        padding: 28px;
    }
}
/*===================HIRE DEVELOPER=================*/
.hiring-developers-hero-section {
    position: relative;
    overflow: hidden;
    background: #050b12;
    padding: 130px 0 60px;
}

    .hiring-developers-hero-section::before {
        content: "";
        position: absolute;
        inset: 0;
        background: radial-gradient(circle at 50% 0%, rgba(0, 188, 212, 0.14), transparent 35%), linear-gradient(180deg, #06142d 0%, #000000 100%);
    }

.hiring-developers-hero-content {
    position: relative;
    z-index: 2;
}

.hiring-developers-hero-tag {
    display: inline-block;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 2px;
    color: var(--bs-gray-400);
    margin-bottom: 18px;
}

.hiring-developers-hero-title {
    font-size: 58px;
    line-height: 1.1;
    font-weight: 700;
    color: #fff;
    margin-bottom: 22px;
}

    .hiring-developers-hero-title span {
        color: #6fb1ff;
        display: block;
    }

.hiring-developers-hero-description {
    font-size: 17px;
    line-height: 1.8;
    color: rgba(255,255,255,.75);
    max-width: 520px;
    margin-bottom: 35px;
}

.hiring-developers-hero-buttons {
    display: flex;
    gap: 15px;
    margin-bottom: 45px;
}

.hiring-developers-btn-primary {
    background: #ffffff;
    color: #010409;
    border-radius: 12px;
    padding: 14px 28px;
    font-weight: 600;
    transition: .3s;
}

    .hiring-developers-btn-primary:hover {
        background: #00b977;
        color: #fff;
        transform: translateY(-2px);
    }

.hiring-developers-btn-secondary {
    border: 1px solid rgba(255,255,255,.12);
    color: #fff;
    border-radius: 12px;
    padding: 14px 28px;
    backdrop-filter: blur(10px);
}

    .hiring-developers-btn-secondary:hover {
        background: rgba(255,255,255,.05);
        color: #fff;
    }

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

.hiring-developers-stat-card {
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 18px;
    padding: 24px 18px;
    text-align: center;
    backdrop-filter: blur(15px);
    transition: .35s ease;
}

    .hiring-developers-stat-card:hover {
        transform: translateY(-6px);
        border-color: rgba(0,208,132,.4);
        box-shadow: 0 15px 40px rgba(0,208,132,.12);
    }

    .hiring-developers-stat-card h3 {
        font-size: 34px;
        font-weight: 700;
        color: #97cce0;
        margin-bottom: 6px;
    }

    .hiring-developers-stat-card p {
        margin: 0;
        font-size: 13px;
        color: rgba(255,255,255,.7);
        line-height: 1.5;
    }

.hiring-developers-hero-image-wrapper {
    position: relative;
    text-align: center;
}

.hiring-developers-glow-circle {
    width: 600px;
    height: 600px;
    background: #00d084;
    opacity: .15;
    filter: blur(140px);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.hiring-developers-hero-image {
    position: relative;
    z-index: 2;
    max-width: 100%;
    animation: floatImage 5s ease-in-out infinite;
}

@keyframes floatImage {
    0% {
        transform: translateY(0px);
    }

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

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

@media(max-width:991px) {

    .hiring-developers-hero-section {
        padding: 130px 0 80px;
    }

    .hiring-developers-hero-title {
        font-size: 42px;
    }

    .hiring-developers-hero-stats {
        grid-template-columns: repeat(2,1fr);
    }

    .hiring-developers-hero-image-wrapper {
        margin-top: 50px;
    }
}

@media(max-width:576px) {

    .hiring-developers-hero-title {
        font-size: 34px;
    }

    .hiring-developers-hero-buttons {
        flex-direction: column;
    }

    .hiring-developers-hero-stats {
        grid-template-columns: 1fr;
    }
}
/*----------What we do------------*/
.hiring-developers-whatwedo-section{
    padding:120px 0;
    background:#fff;
}

.hiring-developers-whatwedo-row{
    align-items:stretch;
}

/* LEFT */

.hiring-developers-whatwedo-tag{
    color:#10b981;
    font-size:13px;
    font-weight:700;
    letter-spacing:2px;
    text-transform:uppercase;
    display:block;
    margin-bottom:15px;
}

.hiring-developers-whatwedo-title{
    font-size:64px;
    line-height:1;
    font-weight:800;
    letter-spacing:-2px;
    color:#0f172a;
    margin-bottom:20px;
    max-width:600px;
}

    .hiring-developers-whatwedo-title span {
        background: linear-gradient(90deg, #4165a3, #06b6d4);
        -webkit-background-clip:text;
        -webkit-text-fill-color: transparent;
    }

.hiring-developers-whatwedo-description{
    font-size:17px;
    line-height:1.8;
    color:#64748b;
    max-width:520px;
    margin-bottom:35px;
}

/* GRID */

.hiring-developers-whatwedo-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:18px;
}

.hiring-developers-whatwedo-card{

    background:#fff;

    border:1px solid #edf2f7;

    border-radius:22px;

    min-height:170px;

    padding:25px 15px;

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

    text-align:center;

    transition:.35s ease;

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

    position:relative;
    overflow:hidden;
}

.hiring-developers-whatwedo-card:hover{

    transform:translateY(-8px);

    border-color:#10b981;

    box-shadow:
        0 25px 50px rgba(16,185,129,.15);
}

.hiring-developers-whatwedo-icon{

    width:70px;
    height:70px;

    margin-bottom:18px;

    border-radius:20px;

    background:
    linear-gradient(
        135deg,
        rgba(16,185,129,.15),
        rgba(16,185,129,.05)
    );

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

    .hiring-developers-whatwedo-icon i {
        font-size: 28px;
        color: #094876;
    }

.hiring-developers-whatwedo-card h4{
    font-size:15px;
    line-height:1.5;
    font-weight:700;
    color:#0f172a;
    margin:0;
}

/* RIGHT SIDE */

.hiring-developers-whatwedo-trust-box {
    background: radial-gradient(circle at 50% 0%, rgba(0, 188, 212, 0.14), transparent 35%), linear-gradient(180deg, #06142d 0%, #06152f 100%); border-radius:32px;
    padding: 55px;
    height: 100%;
    border: 1px solid rgba(255,255,255,.08);
    box-shadow: 0 30px 80px rgba(0,0,0,.18);
    position: relative;
    overflow: hidden;
}

.hiring-developers-whatwedo-trust-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:20px;
}

.hiring-developers-whatwedo-trust-item{
    text-align:center;
}

.hiring-developers-whatwedo-trust-icon{

    width:72px;
    height:72px;

    margin:0 auto 15px;

    border-radius:22px;

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

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

    backdrop-filter:blur(20px);

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

    transition:.3s;
}

.hiring-developers-whatwedo-trust-item:hover
.hiring-developers-whatwedo-trust-icon{

    transform:translateY(-5px);

    background:
        rgba(16,185,129,.15);
}

.hiring-developers-whatwedo-trust-icon i{
/*    color:#10b981;*/
    font-size:24px;
}

.hiring-developers-whatwedo-trust-item h5{
    color:#fff;
    font-size:18px;
    font-weight:700;
    margin-bottom:5px;
}

.hiring-developers-whatwedo-trust-item span{
    color:rgba(255,255,255,.70);
    font-size:14px;
}

.hiring-developers-whatwedo-rating{

    text-align:center;

    margin-top:50px;

    color:#ffc107;

    font-size:30px;

    letter-spacing:5px;
}

.hiring-developers-whatwedo-bottom{

    text-align:center;

    margin-top:25px;

    padding-top:25px;

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

.hiring-developers-whatwedo-bottom h4{

    color:#fff;

    font-size:26px;

    font-weight:700;

    margin-bottom:10px;
}

.hiring-developers-whatwedo-bottom span{

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

    font-size:15px;
}

/* RESPONSIVE */

@media(max-width:991px){

    .hiring-developers-whatwedo-title{
        font-size:48px;
    }

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

    .hiring-developers-whatwedo-trust-grid{
        grid-template-columns:repeat(2,1fr);
    }

    .hiring-developers-whatwedo-trust-box{
        margin-top:40px;
        height:auto;
    }
}

@media(max-width:576px){

    .hiring-developers-whatwedo-title{
        font-size:36px;
    }

    .hiring-developers-whatwedo-grid{
        grid-template-columns:1fr;
    }

    .hiring-developers-whatwedo-trust-grid{
        grid-template-columns:1fr 1fr;
    }

    .hiring-developers-whatwedo-trust-box{
        padding:35px 20px;
    }

    .hiring-developers-whatwedo-bottom h4{
        font-size:20px;
    }
}

/* =========================================
   GLOBAL SECTION STYLES
   ========================================= */
.HD-section-wrapper {
    font-family: 'Inter', sans-serif;
    background-color: #ffffff;
    padding: 80px 0;
}

.HD-label {
    display: block;
    font-size: 0.85rem;
    font-weight: 700;
    color: #059669; /* Green Label */
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}

.HD-title {
    font-size: 1.8rem;
    font-weight: 700;
    color: #111827;
    margin-bottom: 24px;
}


/* =========================================
   LEFT COLUMN: HD-CLIENT-WORK
   ========================================= */
.HD-client-work-card {
    background: #ffffff;
    border: 1px solid #f3f4f6;
    border-radius: 16px;
    padding: 16px;
    height: 100%;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
}

    .HD-client-work-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 12px 28px rgba(0, 0, 0, 0.06);
    }

.HD-client-work-img-wrap {
    width: 100%;
    background-color: #f8fafc;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 16px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #f1f5f9;
}

    .HD-client-work-img-wrap img {
        width: 100%;
        height: auto;
        display: block;
    }

.HD-client-work-body {
    padding: 4px 8px 8px 8px;
}

.HD-client-work-title {
    font-size: 1rem;
    font-weight: 700;
    color: #1f2937;
    margin-bottom: 8px;
}

.HD-client-work-desc {
    font-size: 0.85rem;
    color: #6b7280;
    line-height: 1.5;
    margin-bottom: 16px;
}

.HD-client-work-location {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    font-weight: 500;
    color: #374151;
}


/* =========================================
   RIGHT COLUMN: HD-TESTIMONIAL
   ========================================= */
.HD-testimonial-slider {
    position: relative;
    padding: 10px 0 40px 0;
}

.HD-testimonial-card {
    color: var(--bs-gray-dark);
    background: #ffffff;
    border: 1px solid #f3f4f6;
    border-radius: 16px;
    padding: 32px;
    position: relative;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
}

/* Quote Icon */
.HD-testimonial-quote {
    position: absolute;
    top: 24px;
    right: 24px;
    color: #059669;
    font-size: 1.8rem;
    opacity: 0.8;
}

.HD-testimonial-stars {
    color: #fbbf24; /* Yellow stars */
    font-size: 0.9rem;
    margin-bottom: 16px;
    letter-spacing: 2px;
}

.HD-testimonial-text {
    font-size: 0.95rem;
    color: #4b5563;
    line-height: 1.6;
    margin-bottom: 24px;
    padding-right: 30px; /* Space for the quote icon */
}

.HD-testimonial-author {
    display: flex;
    align-items: center;
    gap: 14px;
}

.HD-testimonial-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
}

.HD-testimonial-author div {
    display: flex;
    flex-direction: column;
}

.HD-testimonial-name {
    font-weight: 700;
    font-size: 0.95rem;
    color: #1f2937;
}

.HD-testimonial-location {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
    color: #6b7280;
    margin-top: 2px;
}

/* --- Slider Dots --- */
.HD-testimonial-dots {
    position: absolute;
    bottom: 0;
    left: 0;
    display: flex;
    gap: 8px;
}

.HD-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    background-color: #e5e7eb;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s ease;
}

    .HD-dot.HD-dot-active {
        background-color: #059669;
        width: 24px;
        border-radius: 10px;
    }


/* =========================================
   RESPONSIVE ADJUSTMENTS
   ========================================= */
@media (max-width: 991px) {
    .HD-section-wrapper {
        padding: 60px 0;
    }

    .HD-testimonial-slider {
        margin-top: 20px;
    }

    .HD-client-work-card {
        margin-bottom: 12px;
    }
}

@media (max-width: 576px) {
    .HD-title {
        font-size: 1.5rem;
    }

    .HD-testimonial-text {
        padding-right: 0;
        font-size: 0.9rem;
    }

    .HD-testimonial-card {
        padding: 24px;
    }

    .HD-testimonial-quote {
        position: relative;
        top: 0;
        right: 0;
        margin-bottom: 10px;
        display: inline-block;
    }
}

.HD-Process-section {
    padding: 120px 0;
    background: linear-gradient( 180deg, #ffffff, #f8fafc );
}

/* LEFT */

.HD-Process-left {
    position: sticky;
    top: 120px;
}

.HD-Process-subtitle {
    display: block;
    color: #10b981;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 15px;
}

.HD-Process-title {
    font-size: 54px;
    line-height: 1.05;
    font-weight: 800;
    color: #0f172a;
    margin-bottom: 20px;
}

    .HD-Process-title span {
        color: #3177b0;
    }

.HD-Process-description {
    font-size: 17px;
    line-height: 1.9;
    color: #64748b;
    max-width: 430px;
}

/* RIGHT */

.HD-Process-timeline {
    position: relative;
    padding-left: 50px;
}

    /* Vertical Line */

    .HD-Process-timeline::before {
        content: "";
        position: absolute;
        left: 25px;
        top: 0;
        bottom: 0;
        width: 2px;
        background: linear-gradient( 180deg, #10b981, #d1fae5 );
    }

/* CARD */

.HD-Process-item {
    position: relative;
    display: flex;
    gap: 25px;
    padding: 35px;
    background: #fff;
    border: 1px solid #edf2f7;
    border-radius: 24px;
    margin-bottom: 30px;
    transition: .35s ease;
    box-shadow: 0 10px 30px rgba(15,23,42,.05);
}

    .HD-Process-item:hover {
        transform: translateX(10px);
        border-color: #10b981;
        box-shadow: 0 20px 50px rgba(16,185,129,.12);
    }

/* Number */

.HD-Process-count {
    position: relative;
    width: 70px;
    height: 70px;
    min-width: 70px;
    border-radius: 22px;
    background: rgb(6 33 58 / 17%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    font-weight: 800;
    color: #05253e;
}

    /* Timeline Dot */

    .HD-Process-count::before {
        content: "";
        position: absolute;
        left: -61px;
        top: 50%;
        transform: translateY(-50%);
        width: 16px;
        height: 16px;
        border-radius: 50%;
        background: #10b981;
        border: 4px solid #fff;
        box-shadow: 0 0 0 5px rgba(16,185,129,.15);
    }

.HD-Process-content h4 {
    font-size: 24px;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 10px;
}

.HD-Process-content p {
    margin: 0;
    color: #64748b;
    font-size: 15px;
    line-height: 1.8;
}

/* RESPONSIVE */

@media(max-width:991px) {

    .HD-Process-left {
        position: relative;
        top: auto;
        margin-bottom: 30px;
    }

    .HD-Process-title {
        font-size: 42px;
    }

    .HD-Process-timeline {
        padding-left: 0;
    }

        .HD-Process-timeline::before {
            display: none;
        }

    .HD-Process-count::before {
        display: none;
    }
}

@media(max-width:576px) {

    .HD-Process-section {
        padding: 80px 0;
    }

    .HD-Process-title {
        font-size: 34px;
    }

    .HD-Process-item {
        flex-direction: column;
        gap: 20px;
        padding: 25px;
    }

    .HD-Process-content h4 {
        font-size: 20px;
    }
}

/* =========================================
   CTA BANNER STYLES
   ========================================= */

.cta-banner-wrapper {
    background-color: #ffffff;
    padding: 30px 0; /* Allows the section to blend into your existing page */
}

.cta-banner {
    /* Deep Green Gradient Background */
    background: radial-gradient(circle at 50% 0%, rgba(0, 188, 212, 0.14), transparent 35%), linear-gradient(180deg, #06142d 0%, #06152f 100%); border-radius: 24px;
    padding: 30px 40px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 8px 30px rgba(4, 120, 87, 0.2);
}

/* --- Optional: Add abstract glowing swirls to the background --- */
.cta-banner::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -20%;
    width: 80%;
    height: 200%;
    background: radial-gradient(circle at 30% 50%, rgba(255, 255, 255, 0.05) 0%, transparent 60%);
    pointer-events: none;
}
.cta-banner::after {
    content: '';
    position: absolute;
    bottom: -50%;
    right: -20%;
    width: 60%;
    height: 200%;
    background: radial-gradient(circle at 70% 50%, rgba(255, 255, 255, 0.03) 0%, transparent 50%);
    pointer-events: none;
}

/* --- Icon Box --- */
.cta-icon-box {
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    background-color: #ffffff;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #059669;
    font-size: 1.5rem;
    position: relative;
    z-index: 2;
}

/* --- Typography --- */
.cta-title {
    color: #ffffff;
    font-weight: 700;
    font-size: 1.4rem;
    margin-bottom: 2px;
    position: relative;
    z-index: 2;
}

.cta-subtitle {
    color: rgba(255, 255, 255, 0.75); /* Slightly translucent white */
    font-size: 0.95rem;
    font-weight: 500;
    margin: 0;
    position: relative;
    z-index: 2;
}

/* --- Action Button --- */
.cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background-color: #ffffff;
    color: #047857;
    font-weight: 600;
    padding: 12px 28px;
    border-radius: 8px;
    text-decoration: none;
    font-size: 0.95rem;
    transition: all 0.3s ease;
    position: relative;
    z-index: 2;
    white-space: nowrap;
}

.cta-btn:hover {
    background-color: #f0fdf4; /* Very light green */
    color: #065f46;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}

.cta-btn i {
    font-size: 0.85rem;
    transition: transform 0.3s ease;
}

.cta-btn:hover i {
    transform: translate(4px, -4px); /* Paper plane flight effect */
}

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

@media (max-width: 768px) {
    .cta-banner {
        padding: 24px;
        text-align: center;
    }
    
    .cta-banner .row {
        flex-direction: column;
        align-items: center;
    }

    .cta-title {
        font-size: 1.2rem;
    }
    
    .cta-btn {
        width: 100%;
        justify-content: center;
    }
}

/* ===================================
   GET IN TOUCH SECTION
=================================== */

.HD-getintouch-section {
    background: #f8fafc;
    padding: 40px 0;
}

.HD-getintouch-wrapper {
    background: linear-gradient( 135deg, #ffffff, #f8fafc );
    border-radius: 32px;
    padding: 60px;
    box-shadow: 0 20px 60px rgba(15,23,42,.06);
    overflow: hidden;
    position: relative;
}

    /* Accent Glow */

    .HD-getintouch-wrapper::before {
        content: "";
        position: absolute;
        width: 500px;
        height: 500px;
        right: -250px;
        top: -250px;
        background: radial-gradient( circle, rgba(59,130,246,.08), transparent 70% );
        pointer-events: none;
    }

/* Left Content */

.HD-getintouch-label {
    display: inline-block;
    color: #2563eb;
    font-weight: 700;
    letter-spacing: 1px;
    margin-bottom: 16px;
}

.HD-getintouch-title {
    font-size: 3rem;
    font-weight: 700;
    line-height: 1.15;
    color: #0f172a;
    margin-bottom: 20px;
}

.HD-getintouch-description {
    color: #64748b;
    line-height: 1.8;
    margin-bottom: 35px;
}

/* Feature Cards */

.HD-getintouch-features {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 15px;
}

.HD-feature-card {
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 18px;
    display: flex;
    align-items: center;
    gap: 15px;
    transition: .3s;
}

    .HD-feature-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 10px 25px rgba(15,23,42,.06);
    }

    .HD-feature-card i {
        width: 50px;
        height: 50px;
        border-radius: 14px;
        background: #eff6ff;
        color: #2563eb;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .HD-feature-card h6 {
        margin: 0;
        font-weight: 600;
        color: #0f172a;
    }

    .HD-feature-card span {
        color: #64748b;
        font-size: .85rem;
    }

/* Form Card */

.HD-getintouch-form-card {
    background: white;
    border-radius: 24px;
    padding: 35px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 15px 40px rgba(15,23,42,.05);
}

.form-title {
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 25px;
}

/* Inputs */

.HD-input {
    width: 100%;
    height: 54px;
    border: 1px solid #dbe4ea;
    border-radius: 12px;
    padding: 0 18px;
    background: #fff;
    transition: .3s;
}

    .HD-input:focus {
        outline: none;
        border-color: #2563eb;
        box-shadow: 0 0 0 4px rgba(37,99,235,.12);
    }

.HD-textarea {
    height: 140px;
    padding-top: 15px;
    resize: none;
}

/* Button */

.HD-submit-btn {
    width: 100%;
    border: none;
    background: linear-gradient( 135deg, #2563eb, #4f46e5 );
    color: white;
    height: 56px;
    border-radius: 14px;
    font-weight: 600;
    transition: .3s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

    .HD-submit-btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 10px 25px rgba(37,99,235,.25);
    }

/* Mobile */

@media(max-width:991px) {

    .HD-getintouch-wrapper {
        padding: 35px;
    }

    .HD-getintouch-title {
        font-size: 2.2rem;
    }

    .HD-getintouch-features {
        grid-template-columns: 1fr;
    }
}

@media(max-width:576px) {

    .HD-getintouch-wrapper {
        padding: 20px;
    }

    .HD-getintouch-title {
        font-size: 1.8rem;
    }

    .HD-getintouch-form-card {
        padding: 20px;
    }
}
/*----------HireingModule-----------*/
.hire-module-section {
    padding: 45px 0 55px;
    background: linear-gradient(135deg, #f8fbff 0%, #eef6ff 45%, #ffffff 100%);
/*    font-family: 'Poppins', sans-serif;*/
}

.hire-module-heading {
    max-width: 650px;
    margin: 0 auto 35px;
}

.hire-module-badge {
    display: inline-block;
    padding: 5px 15px;
    margin-bottom: 12px;
    border-radius: 30px;
    color: #4b7dff;
    background: rgba(75, 125, 255, 0.08);
    border: 1px solid rgba(75, 125, 255, 0.22);
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
}

.hire-module-heading h2 {
    margin-bottom: 12px;
    color: #071633;
    font-size: 34px;
    font-weight: 800;
}

    .hire-module-heading h2 span {
        color: #2477ff;
    }

.hire-module-heading p {
    margin: 0 auto;
    max-width: 560px;
    color: #5d6678;
    font-size: 13px;
    line-height: 1.7;
}

.hire-module-card {
    position: relative;
    min-height: 300px;
    padding: 30px 18px 55px;
    text-align: center;
    border-radius: 12px;
    background: #ffffff;
    border: 2px solid transparent;
    box-shadow: 0 14px 30px rgba(20, 40, 80, 0.08);
    transition: all 0.3s ease;
}

    .hire-module-card:hover {
        transform: translateY(-7px);
        box-shadow: 0 22px 42px rgba(20, 40, 80, 0.14);
    }

.hire-border-cyan {
    border-color: rgba(20, 205, 195, 0.45);
}

.hire-border-purple {
    border-color: rgba(105, 80, 255, 0.42);
}

.hire-border-orange {
    border-color: rgba(255, 170, 58, 0.45);
}

.hire-border-blue {
    border-color: rgba(37, 160, 255, 0.45);
}

.hire-border-pink {
    border-color: rgba(255, 94, 146, 0.42);
}

.hire-module-icon {
    width: 76px;
    height: 76px;
    margin: 0 auto 22px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    font-size: 30px;
}

    .hire-module-icon::before {
        content: "";
        position: absolute;
        inset: 10px;
        border-radius: 50%;
        background: rgba(255,255,255,0.55);
    }

    .hire-module-icon i {
        position: relative;
        z-index: 2;
    }

.hire-icon-cyan {
    color: #17cfc5;
    background: rgba(23, 207, 197, 0.14);
}

.hire-icon-purple {
    color: #6650e8;
    background: rgba(102, 80, 232, 0.14);
}

.hire-icon-orange {
    color: #ffad24;
    background: rgba(255, 173, 36, 0.16);
}

.hire-icon-blue {
    color: #229eea;
    background: rgba(34, 158, 234, 0.14);
}

.hire-icon-pink {
    color: #f65385;
    background: rgba(246, 83, 133, 0.14);
}

.hire-module-card h4 {
    margin-bottom: 14px;
    color: #071633;
    font-size: 16px;
    font-weight: 800;
}

.hire-module-card p {
    margin: 0;
    color: #536078;
    font-size: 12px;
    line-height: 1.8;
    font-weight: 500;
}

.hire-module-plus {
    position: absolute;
    left: 50%;
    bottom: 18px;
    transform: translateX(-50%);
    width: 34px;
    height: 34px;
    border: none;
    border-radius: 50%;
    color: #ffffff;
    font-size: 17px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hire-plus-cyan {
    background: linear-gradient(135deg, #16d1c4, #06aaa0);
}

.hire-plus-purple {
    background: linear-gradient(135deg, #6c55f4, #4f39d8);
}

.hire-plus-orange {
    background: linear-gradient(135deg, #ffb23a, #ff8e2a);
}

.hire-plus-blue {
    background: linear-gradient(135deg, #27a8f5, #0879d8);
}

.hire-plus-pink {
    background: linear-gradient(135deg, #ff6b9d, #f53f78);
}

@media (max-width: 991px) {
    .hire-module-card {
        min-height: 280px;
    }
}

@media (max-width: 575px) {
    .hire-module-heading h2 {
        font-size: 28px;
    }

    .hire-module-card {
        min-height: auto;
    }
}
/*----------HireingToggle-----------*/
.hire-toggle-section {
    padding: 70px 0;
    background: linear-gradient(135deg, #f8fbff 0%, #eef6ff 45%, #ffffff 100%);
}

.hire-toggle-wrap {
    max-width: 1180px;
    margin: 0 auto;
}

.hire-toggle-item {
    margin-bottom: 14px;
    border-radius: 18px;
    background: #ffffff;
    border: 1px solid #dfe8f6;
    box-shadow: 0 14px 35px rgba(20, 45, 90, 0.08);
    overflow: hidden;
    transition: all 0.35s ease;
}

.hire-toggle-item.active {
    box-shadow: 0 22px 55px rgba(20, 45, 90, 0.13);
}

.hire-toggle-header {
    min-height: 96px;
    padding: 18px 28px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    cursor: pointer;
}

.hire-toggle-left {
    display: flex;
    align-items: center;
    gap: 22px;
}

.hire-toggle-icon {
    width: 76px;
    height: 76px;
    flex: 0 0 76px;
    border-radius: 14px;
    color: #ffffff;
    font-size: 31px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 15px 30px rgba(15, 35, 75, 0.18);
}

.hire-toggle-left h3 {
    margin: 0 0 8px;
    color: #071633;
    font-size: 22px;
    font-weight: 800;
    line-height: 1.25;
}

.hire-toggle-left p {
    margin: 0;
    color: #506078;
    font-size: 14px;
    line-height: 1.6;
    font-weight: 500;
}

.hire-toggle-btn {
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    border-radius: 50%;
    border: 2px solid #7f91b4;
    background: #ffffff;
    color: #23395f;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    transition: all 0.3s ease;
}

.hire-toggle-item.active .hire-toggle-btn {
    border-color: #15c6bd;
    background: #15c6bd;
    color: #ffffff;
}

.hire-toggle-item.active .hire-toggle-btn i {
    transform: rotate(45deg);
}

.hire-toggle-btn i {
    transition: all 0.3s ease;
}

.hire-toggle-body {
    display: none;
    padding: 0 28px 28px;
}

.hire-toggle-detail-row {
    align-items: stretch;
}

.hire-toggle-sticky {
    position: sticky;
    top: 25px;
    height: 100%;
}

.hire-toggle-imgbox {
    position: relative;
    height: 520px;
    border-radius: 16px;
    overflow: hidden;
    background: #071633;
}

.hire-toggle-imgbox img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.86;
    transition: all 0.4s ease;
}

.hire-toggle-item.active:hover .hire-toggle-imgbox img {
    transform: scale(1.04);
}

.hire-toggle-floating-icon {
    position: absolute;
    top: 42px;
    left: 0;
    width: 78px;
    height: 78px;
    border-radius: 0 14px 14px 0;
    color: #ffffff;
    font-size: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hire-toggle-scroll-content {
    max-height: 520px;
    overflow-y: auto;
    padding: 5px 12px 5px 20px;
}

.hire-toggle-scroll-content::-webkit-scrollbar {
    width: 8px;
}

.hire-toggle-scroll-content::-webkit-scrollbar-track {
    background: #edf3ff;
    border-radius: 20px;
}

.hire-toggle-scroll-content::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #0ea5ff, #635bff);
    border-radius: 20px;
}

.hire-toggle-content h4 {
    margin-bottom: 18px;
    color: #071633;
    font-size: 26px;
    line-height: 1.35;
    font-weight: 800;
}

.hire-toggle-content p {
    margin-bottom: 16px;
    color: #44536d;
    font-size: 15px;
    line-height: 1.9;
    font-weight: 500;
    text-align: justify;
}

.hire-toggle-content ul {
    margin: 22px 0 26px;
    padding: 0;
    list-style: none;
}

.hire-toggle-content ul li {
    position: relative;
    margin-bottom: 13px;
    padding-left: 34px;
    color: #263953;
    font-size: 15px;
    line-height: 1.65;
    font-weight: 600;
}

.hire-toggle-content ul li::before {
    content: "\F26A";
    position: absolute;
    left: 0;
    top: 2px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #20c4bd;
    color: #ffffff;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hire-toggle-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 0 20px;
    border-radius: 50px;
    background: linear-gradient(135deg, #0b8cff, #0fc6c6);
    color: #ffffff;
    font-size: 13px;
    font-weight: 800;
    text-decoration: none;
    box-shadow: 0 12px 28px rgba(11, 140, 255, 0.25);
    transition: all 0.3s ease;
}

.hire-toggle-cta:hover {
    color: #ffffff;
    transform: translateY(-3px);
    box-shadow: 0 16px 36px rgba(11, 140, 255, 0.35);
}

.hire-bg-cyan {
    background: linear-gradient(135deg, #16d1c4, #029e96);
}

.hire-bg-purple {
    background: linear-gradient(135deg, #7957ff, #4b2fd2);
}

.hire-bg-orange {
    background: linear-gradient(135deg, #ffb13b, #ff8324);
}

.hire-bg-blue {
    background: linear-gradient(135deg, #1da7ff, #0075d8);
}

.hire-bg-pink {
    background: linear-gradient(135deg, #ff6c9d, #ef3d75);
}

@media (max-width: 991px) {
    .hire-toggle-sticky {
        position: relative;
        top: 0;
        margin-bottom: 24px;
    }

    .hire-toggle-imgbox {
        height: 280px;
    }

    .hire-toggle-scroll-content {
        max-height: none;
        overflow: visible;
        padding: 0;
    }
}

@media (max-width: 575px) {
    .hire-toggle-section {
        padding: 45px 0;
    }

    .hire-toggle-header {
        padding: 18px;
        align-items: flex-start;
    }

    .hire-toggle-left {
        gap: 14px;
    }

    .hire-toggle-icon {
        width: 58px;
        height: 58px;
        flex-basis: 58px;
        font-size: 24px;
    }

    .hire-toggle-left h3 {
        font-size: 18px;
    }

    .hire-toggle-left p {
        font-size: 12px;
    }

    .hire-toggle-body {
        padding: 0 18px 22px;
    }

    .hire-toggle-imgbox {
        height: 240px;
    }

    .hire-toggle-content h4 {
        font-size: 21px;
    }

    .hire-toggle-content p,
    .hire-toggle-content ul li {
        font-size: 14px;
    }
}
/*-----------Hire-Cta-------------*/
.hire-benefits-section {
    padding: 55px 0 65px;
    background: radial-gradient( circle at 50% 0%, rgba(0, 188, 212, 0.14), transparent 35% ), linear-gradient( 180deg, #06142d 0%, #061b3a 100% );
    color: #ffffff;
    overflow: hidden;
}

.hire-benefits-heading {
    margin-bottom: 35px;
}

    .hire-benefits-heading span {
        display: inline-block;
        padding: 6px 18px;
        margin-bottom: 14px;
        border-radius: 50px;
        border: 1px solid rgba(255, 153, 51, 0.55);
        color: #f5b36b;
        font-size: 12px;
        font-weight: 800;
        letter-spacing: 1px;
        text-transform: uppercase;
    }

    .hire-benefits-heading h2 {
        margin: 0;
        font-size: 32px;
        font-weight: 800;
        color: #ffffff;
    }

        .hire-benefits-heading h2 strong {
            color: #00aaff;
        }

.hire-benefits-row {
    align-items: stretch;
}

    .hire-benefits-row > div {
        position: relative;
    }

        /* Creates exactly 3 divider lines */

        .hire-benefits-row > div:not(:last-child)::after {
            content: "";
            position: absolute;
            top: 15%;
            right: 0;
            width: 1px;
            height: 70%;
            background: rgba(255,255,255,0.35);
        }

.hire-benefit-card {
    position: relative;
    height: 100%;
    padding: 0 28px;
    text-align: center;
}

.hire-benefit-icon {
    width: 62px;
    height: 62px;
    margin: 0 auto 18px;
    border-radius: 50%;
    background: rgba(0, 188, 212, 0.16);
    color: #00d7ff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
}

    .hire-benefit-icon.green {
        color: #00e0b8;
    }

    .hire-benefit-icon.orange {
        color: #ff9b2f;
        background: rgba(255, 155, 47, 0.16);
    }

    .hire-benefit-icon.teal {
        color: #00d8c8;
    }

    .hire-benefit-icon.blue {
        color: #20c7ff;
    }

.hire-benefit-card h4 {
    margin-bottom: 10px;
    color: #ffffff;
    font-size: 16px;
    font-weight: 800;
}

.hire-benefit-card p {
    max-width: 190px;
    margin: 0 auto;
    color: rgba(255,255,255,0.82);
    font-size: 13px;
    line-height: 1.6;
}

@media (max-width: 991px) {

    .hire-benefits-row > div::after {
        display: none;
    }

    .hire-benefit-card {
        padding: 24px 18px;
        border-bottom: 1px solid rgba(255,255,255,0.18);
    }

    .hire-benefits-heading h2 {
        font-size: 27px;
    }
}

@media (max-width: 575px) {

    .hire-benefits-section {
        padding: 45px 0;
    }

    .hire-benefits-heading h2 {
        font-size: 24px;
    }
}

/* ================= MODAL ================= */

.hire-modal .modal-content {
    border: none;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 28px 80px rgba(0,0,0,0.25);
    margin-top: 100px;
}

.hire-modal .modal-header {
    background: linear-gradient(135deg, #10243f, #1769e0);
    color: #fff;
    padding: 20px 28px;
    border-bottom: none;
}

.hire-modal .modal-title {
    font-size: 22px;
    font-weight: 800;
}

.hire-modal .modal-body {
    padding: 30px;
    background: #f8fbff;
}

/* ================= FORM ================= */

.hire-contact-form label {
    font-weight: 700;
    color: #243449;
    margin-bottom: 7px;
}

.hire-contact-form .form-control {
    min-height: 48px;
    border-radius: 12px;
    border: 1px solid #d8e4f2;
    box-shadow: none;
    font-size: 15px;
}

    .hire-contact-form .form-control:focus {
        border-color: #00bcd4;
        box-shadow: 0 0 0 3px rgba(0,188,212,0.12);
    }

.hire-contact-form textarea.form-control {
    min-height: 120px;
}

/* ================= CAPTCHA ================= */

.hire-captcha {
    color: white;
    background: #3a3a3a;
    border: 1px solid #565656;
    border-radius: 14px;
    padding: 16px;
}

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

.hire-submit-btn {
    border: none;
    padding: 13px 42px;
    border-radius: 50px;
    background: linear-gradient(135deg, #00bcd4, #1769e0);
    color: #fff;
    font-weight: 800;
    box-shadow: 0 12px 28px rgba(23, 105, 224, 0.25);
    transition: all 0.3s ease;
}

    .hire-submit-btn:hover {
        transform: translateY(-3px);
        box-shadow: 0 18px 35px rgba(23, 105, 224, 0.36);
    }


/*=====================================================
        CLOUD SHOWCASE SECTION
=====================================================*/

.cloud-showcase-section {
    padding: 100px 0;
    background: #f7f9ff;
    position: relative;
    overflow: hidden;
}

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

.cloud-showcase-heading {
    margin-bottom: 55px;
}

.cloud-showcase-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 18px;
    background: #eef2ff;
    color: #5d63ff;
    border-radius: 50px;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 18px;
}

.cloud-showcase-heading h2 {
    font-size: 52px;
    font-weight: 800;
    color: #16204d;
    margin-bottom: 0;
}

    .cloud-showcase-heading h2 span {
        color: #6d63ff;
    }

.cloud-showcase-line {
    width: 75px;
    height: 4px;
    margin: 18px auto 22px;
    border-radius: 50px;
    background: linear-gradient(90deg,#5b6cff,#8b5cff);
}

.cloud-showcase-heading p {
    max-width: 620px;
    margin: auto;
    color: #727b97;
    line-height: 1.8;
    font-size: 15px;
}

/*===========================
        Equal Height Grid
===========================*/

.cloud-showcase-section .row > div {
    display: flex;
}

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

.cloud-showcase-card {
    width: 100%;
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 10px 35px rgba(24,34,77,.08);
    transition: .35s;
}

    .cloud-showcase-card:hover {
        transform: translateY(-8px);
        box-shadow: 0 25px 55px rgba(90,110,255,.18);
    }

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

.cloud-showcase-img {
    position: relative;
    padding: 14px;
    height: 235px;
    overflow: hidden;
}

    .cloud-showcase-img img {
        width: 100%;
        height: 100%;
        object-fit: contain; /* Change to cover if you want cropping */
        background: #f7f8fc;
        border-radius: 12px;
        display: block;
    }

/*===========================
        Floating Icon
===========================*/

.cloud-showcase-icon {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    position: absolute;
    top: 24px;
    left: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 17px;
    box-shadow: 0 10px 20px rgba(0,0,0,.15);
    z-index: 2;
}

.purple {
    background: #7b61ff;
}

.blue {
    background: #4b8cff;
}

.violet {
    background: #9b5cff;
}

.green {
    background: #22c985;
}

.orange {
    background: #ff9738;
}

.cyan {
    background: #26c6da;
}

/*===========================
        Category Badge
===========================*/

.cloud-showcase-category {
    position: absolute;
    top: 24px;
    right: 24px;
    background: linear-gradient(90deg,#7865ff,#ab67ff);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    padding: 6px 14px;
    border-radius: 30px;
    z-index: 2;
}

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

.cloud-showcase-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 0 22px 22px;
}

    .cloud-showcase-content h5 {
        font-size: 20px;
        font-weight: 700;
        color: #17214b;
        min-height: 52px;
        margin-bottom: 12px;
    }

    .cloud-showcase-content p {
        flex: 1;
        color: #6d7794;
        line-height: 1.7;
        font-size: 14px;
        margin-bottom: 18px;
    }

/*===========================
        Tech Tags
===========================*/

.cloud-showcase-tech {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: auto;
}

    .cloud-showcase-tech span {
        background: #eef2ff;
        color: #5a6fff;
        font-size: 11px;
        font-weight: 600;
        padding: 6px 12px;
        border-radius: 30px;
        white-space: nowrap;
    }

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

.cloud-showcase-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 34px;
    border-radius: 50px;
    text-decoration: none;
    color: #fff;
    font-weight: 600;
    background: linear-gradient(90deg,#5d6bff,#9867ff);
    transition: .35s;
}

    .cloud-showcase-btn:hover {
        color: #fff;
        transform: translateY(-4px);
        box-shadow: 0 18px 35px rgba(92,105,255,.35);
    }

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

@media (max-width:1199px) {

    .cloud-showcase-img {
        height: 210px;
    }

    .cloud-showcase-heading h2 {
        font-size: 44px;
    }
}

@media (max-width:991px) {

    .cloud-showcase-section {
        padding: 80px 0;
    }

    .cloud-showcase-img {
        height: 230px;
    }

    .cloud-showcase-heading h2 {
        font-size: 38px;
    }
}

@media (max-width:767px) {

    .cloud-showcase-heading h2 {
        font-size: 32px;
    }

    .cloud-showcase-img {
        height: 220px;
    }

    .cloud-showcase-content h5 {
        min-height: auto;
    }
}

@media (max-width:575px) {

    .cloud-showcase-img {
        height: 210px;
    }

    .cloud-showcase-section {
        padding: 70px 0;
    }
}

/*=========================================================
Combined Process + Benefits
=========================================================*/

.cloud-process-benefits-section {
    padding: 90px 0;
    background: linear-gradient(180deg,#F8FBFF 0%,#FFFFFF 100%);
    overflow: visible;
}

    .cloud-process-benefits-section .container {
        overflow: visible;
    }

    .cloud-process-benefits-section .row {
        align-items: flex-start;
    }

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

.cloud-process-heading {
    margin-bottom: 35px;
}

.cloud-process-tag {
    display: inline-block;
    padding: 8px 20px;
    background: #EEF4FF;
    color: #2563EB;
    font-size: 14px;
    font-weight: 700;
    border-radius: 30px;
    margin-bottom: 15px;
}

.cloud-process-heading h2 {
    font-size: 42px;
    font-weight: 800;
    color: #101828;
    line-height: 1.3;
}

    .cloud-process-heading h2 span {
        color: #5B49F8;
    }

.cloud-process-list {
    position: relative;
}

.cloud-process-item {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
}

.cloud-process-number {
    width: 60px;
    height: 60px;
    border-radius: 16px;
    background: linear-gradient(180deg,#4C7BFF,#4256F6);
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 22px;
    font-weight: 700;
    flex-shrink: 0;
    box-shadow: 0 10px 25px rgba(76,123,255,.25);
}

.cloud-process-icon {
    width: 60px;
    height: 60px;
    border-radius: 16px;
    background: linear-gradient(180deg,#8A6BFF,#7A3EF3);
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    flex-shrink: 0;
    box-shadow: 0 10px 25px rgba(122,62,243,.22);
}

    .cloud-process-icon i {
        font-size: 20px;
    }

.cloud-process-content {
    flex: 1;
    background: #fff;
    border: 1px solid #EDF1F7;
    border-radius: 18px;
    padding: 22px;
    box-shadow: 0 8px 24px rgba(18,38,63,.06);
    transition: .35s;
}

    .cloud-process-content:hover {
        transform: translateY(-5px);
        box-shadow: 0 18px 35px rgba(18,38,63,.10);
    }

.cloud-process-step {
    display: block;
    color: #7C8595;
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 5px;
    text-transform: uppercase;
    letter-spacing: .5px;
}

.cloud-process-content h4 {
    font-size: 21px;
    margin-bottom: 8px;
    font-weight: 700;
    color: #101828;
}

.cloud-process-content p {
    margin: 0;
    color: #667085;
    line-height: 1.7;
}

/*=====================================================
RIGHT COLUMN STICKY
=====================================================*/

.cloud-benefits-sticky {
    position: -webkit-sticky;
    position: sticky;
    top: 120px;
    align-self: flex-start;
    z-index: 20;
}

/*======================
BENEFITS CARD
======================*/

.cloud-benefits-card {
    position: relative;
    background: #fff;
    border-radius: 24px;
    padding: 38px;
    border: 1px solid #E9EEF7;
    box-shadow: 0 22px 60px rgba(22,34,72,.08), 0 8px 18px rgba(22,34,72,.05);
}

    .cloud-benefits-card::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 6px;
        background: linear-gradient(90deg,#5B49F8,#4C7BFF);
    }

.cloud-benefits-tag {
    display: inline-block;
    padding: 8px 20px;
    background: #EEF4FF;
    color: #2563EB;
    font-size: 14px;
    font-weight: 700;
    border-radius: 30px;
    margin-bottom: 16px;
}

.cloud-benefits-header {
    margin-bottom: 30px;
}

    .cloud-benefits-header h3 {
        font-size: 32px;
        font-weight: 800;
        color: #101828;
        margin-bottom: 12px;
    }

    .cloud-benefits-header p {
        color: #667085;
        line-height: 1.8;
        margin: 0;
    }

/*======================
BENEFITS ITEMS
======================*/

.cloud-benefits-item {
    display: flex;
    align-items: center;
    gap: 14px;
    background: #F8FBFF;
    border: 1px solid #EDF1F7;
    border-radius: 16px;
    padding: 18px;
    height: 100%;
    transition: .35s;
}

    .cloud-benefits-item:hover {
        transform: translateY(-6px);
        background: #fff;
        border-color: #5B49F8;
        box-shadow: 0 14px 30px rgba(91,73,248,.12);
    }

    .cloud-benefits-item i {
        width: 42px;
        height: 42px;
        border-radius: 50%;
        background: #EEF4FF;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #5B49F8;
        font-size: 18px;
        transition: .35s;
        flex-shrink: 0;
    }

    .cloud-benefits-item:hover i {
        background: #5B49F8;
        color: #fff;
        transform: rotate(-8deg);
    }

    .cloud-benefits-item span {
        font-size: 15px;
        font-weight: 600;
        color: #101828;
        line-height: 1.5;
    }

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

@media (max-width:991px) {

    .cloud-process-benefits-section {
        padding: 70px 0;
    }

    .cloud-process-heading h2 {
        font-size: 34px;
    }

    .cloud-benefits-header h3 {
        font-size: 28px;
    }

    .cloud-benefits-sticky {
        position: static;
        top: auto;
        margin-top: 40px;
    }

    .cloud-benefits-card {
        padding: 30px;
    }
}

@media (max-width:767px) {

    .cloud-process-heading h2 {
        font-size: 28px;
    }

    .cloud-process-item {
        flex-wrap: wrap;
    }

    .cloud-process-number,
    .cloud-process-icon {
        width: 55px;
        height: 55px;
    }

    .cloud-process-content {
        width: 100%;
    }

    .cloud-benefits-card {
        padding: 24px;
    }

    .cloud-benefits-header h3 {
        font-size: 24px;
    }

    .cloud-benefits-item {
        padding: 16px;
    }
}

/*=========================================================
 CLOUD FAQ + INDUSTRIES SECTION
=========================================================*/

.cloud-faq-industries-section {
    padding: 90px 0;
    background: linear-gradient(180deg,#FCFCFF 0%,#F7F8FD 100%);
    position: relative;
    overflow: hidden;
}

    .cloud-faq-industries-section::before {
        content: "";
        position: absolute;
        top: -150px;
        right: -150px;
        width: 350px;
        height: 350px;
        background: radial-gradient(circle,#5A48F815 0%,transparent 70%);
        border-radius: 50%;
    }

    .cloud-faq-industries-section::after {
        content: "";
        position: absolute;
        left: -120px;
        bottom: -120px;
        width: 300px;
        height: 300px;
        background: radial-gradient(circle,#5A48F810 0%,transparent 70%);
        border-radius: 50%;
    }

    .cloud-faq-industries-section .container {
        position: relative;
        z-index: 2;
    }

/*==========================================
FAQ Heading
==========================================*/

.cloud-faq-heading {
    margin-bottom: 40px;
}

.cloud-faq-subtitle {
    display: inline-block;
    color: #5A48F8;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 12px;
}

.cloud-faq-heading h2 {
    font-size: 42px;
    font-weight: 800;
    color: #111827;
    margin-bottom: 18px;
}

.cloud-faq-heading p {
    color: #667085;
    font-size: 16px;
    line-height: 1.8;
}

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

.cloud-faq-item {
    border: none;
    margin-bottom: 18px;
    background: transparent;
}

.cloud-faq-button {
    border-radius: 18px !important;
    background: #fff;
    border: 1px solid #ECEBFF;
    padding: 18px 20px;
    font-weight: 600;
    color: #111827;
    box-shadow: 0 10px 25px rgba(0,0,0,.05);
}

    .cloud-faq-button:not(.collapsed) {
        background: #fff;
        color: #5A48F8;
        border-color: #5A48F8;
    }

    .cloud-faq-button:focus {
        box-shadow: none;
    }

    .cloud-faq-button::after {
        background-size: 15px;
    }

.cloud-faq-body {
    background: #fff;
    border: 1px solid #ECEBFF;
    border-top: none;
    border-radius: 0 0 18px 18px;
    padding: 22px;
    color: #667085;
    line-height: 1.8;
}

.cloud-faq-icon {
    width: 36px;
    height: 36px;
    background: #F4F2FF;
    color: #5A48F8;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 14px;
    flex-shrink: 0;
}

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

.cloud-industries-wrapper {
    height: 100%;
    background: #fff;
    padding: 40px;
    border-radius: 24px;
    border: 1px solid #ECEBFF;
    box-shadow: 0 15px 40px rgba(0,0,0,.05);
}

.cloud-industries-heading {
    text-align: center;
    margin-bottom: 40px;
}

.cloud-industries-subtitle {
    display: inline-block;
    color: #5A48F8;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 12px;
}

.cloud-industries-heading h2 {
    font-size: 38px;
    font-weight: 800;
    color: #111827;
}

.cloud-industries-card {
    background: #fff;
    border: 1px solid #ECEBFF;
    border-radius: 18px;
    padding: 25px 15px;
    text-align: center;
    transition: .35s;
    height: 100%;
    box-shadow: 0 8px 20px rgba(0,0,0,.04);
}

    .cloud-industries-card:hover {
        transform: translateY(-8px);
        border-color: #5A48F8;
        box-shadow: 0 20px 40px rgba(90,72,248,.15);
    }

.cloud-industries-icon {
    width: 72px;
    height: 72px;
    margin: 0 auto 18px;
    background: #F4F2FF;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #5A48F8;
    font-size: 28px;
    transition: .35s;
}

.cloud-industries-card:hover .cloud-industries-icon {
    background: #5A48F8;
    color: #fff;
}

.cloud-industries-card h6 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: #1F2937;
}

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

@media(max-width:991px) {

    .cloud-faq-industries-section {
        padding: 70px 0;
    }

    .cloud-industries-wrapper {
        margin-top: 30px;
    }

    .cloud-faq-heading h2,
    .cloud-industries-heading h2 {
        font-size: 34px;
    }
}

@media(max-width:767px) {

    .cloud-faq-heading {
        text-align: center;
    }

        .cloud-faq-heading h2,
        .cloud-industries-heading h2 {
            font-size: 28px;
        }

    .cloud-industries-wrapper {
        padding: 30px 20px;
    }

    .cloud-industries-icon {
        width: 60px;
        height: 60px;
        font-size: 24px;
    }

    .cloud-industries-card {
        padding: 20px 10px;
    }
}

/*==============================
Diagram
==============================*/

.cloud-soln-diagram {
    position: relative;
    display: flex;
/*    justify-content: center;*/
    align-items: center;
    min-height: 560px;
}

/* Outer Ring */

.cloud-soln-circle {
    width: 360px;
    height: 360px;
    border-radius: 50%;
    border: 2px dashed rgba(37,99,235,.18);
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

    .cloud-soln-circle::before {
        content: "";
        position: absolute;
        width: 280px;
        height: 280px;
        border-radius: 50%;
        border: 2px dashed rgba(37,99,235,.12);
    }

    .cloud-soln-circle::after {
        content: "";
        position: absolute;
        width: 450px;
        height: 450px;
        border-radius: 50%;
        background: radial-gradient(circle, rgba(37,99,235,.08), transparent 72%);
        z-index: -1;
    }

/*==============================
Center Cloud
==============================*/

.cloud-soln-center {
    width: 180px;
    height: 180px;
    background: #fff;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 20px 60px rgba(37,99,235,.12), inset 0 0 35px rgba(37,99,235,.05);
    animation: cloudFloat 4s ease-in-out infinite;
}

    .cloud-soln-center i {
        font-size: 72px;
        background: linear-gradient(180deg,#3B82F6,#2563EB);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }

/*==============================
Feature List
==============================*/

.cloud-soln-list {
    position: absolute;
    right: -90px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 22px;
    z-index: 5;
}

.cloud-soln-item {
    position: relative;
    display: flex;
    align-items: center;
    width: 290px;
    height: 72px;
    background: #fff;
    border-radius: 50px;
    border: 1px solid #EDF3FF;
    box-shadow: 0 15px 40px rgba(15,23,42,.06);
    transition: .35s;
    padding-left: 70px;
}

    .cloud-soln-item:hover {
        transform: translateX(-8px);
        border-color: #3B82F6;
        box-shadow: 0 18px 45px rgba(37,99,235,.18);
    }

    /* Connector */

    .cloud-soln-item::before {
        content: "";
        position: absolute;
        left: -65px;
        width: 65px;
        height: 2px;
        background: #BFD5FF;
        top: 50%;
    }

/* Icon */

.cloud-soln-icon {
    position: absolute;
    left: -6px;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(180deg,#60A5FA,#2563EB);
    color: #fff;
    font-size: 22px;
    box-shadow: 0 12px 25px rgba(37,99,235,.35);
}

.cloud-soln-item span {
    font-size: 17px;
    font-weight: 700;
    color: #111827;
}

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

@keyframes cloudFloat {

    0% {
        transform: translateY(0);
    }

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

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

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

@media(max-width:991px) {

    .cloud-soln-title {
        font-size: 44px;
    }

    .cloud-soln-diagram {
        margin-top: 60px;
        min-height: auto;
    }

    .cloud-soln-list {
        position: relative;
        right: auto;
        top: auto;
        transform: none;
        margin-top: 40px;
    }

    .cloud-soln-item {
        width: 100%;
    }

        .cloud-soln-item::before {
            display: none;
        }

    .cloud-soln-icon {
        left: 10px;
    }
}

@media(max-width:767px) {

    .cloud-soln-section {
        padding: 70px 0;
    }

    .cloud-soln-title {
        font-size: 34px;
    }

    .cloud-soln-circle {
        width: 270px;
        height: 270px;
    }

        .cloud-soln-circle::before {
            width: 200px;
            height: 200px;
        }

    .cloud-soln-center {
        width: 130px;
        height: 130px;
    }

        .cloud-soln-center i {
            font-size: 54px;
        }
}

.cloud-hero-section {
    position: relative;
    overflow: hidden;
    padding: 130px 0 65px;
    background: radial-gradient(circle at 82% 35%, rgba(59, 130, 246, 0.22), transparent 34%), linear-gradient(135deg, #071120 0%, #0b1730 35%, #102348 70%, #162f63 100%);
}

    .cloud-hero-section::before {
        content: "";
        position: absolute;
        inset: 0;
        background-image: linear-gradient(rgba(96, 165, 250, 0.08) 1px, transparent 1px), linear-gradient(90deg, rgba(96, 165, 250, 0.08) 1px, transparent 1px);
        background-size: 42px 42px;
        pointer-events: none;
    }

.cloud-hero-row {
    position: relative;
    z-index: 2;
}

.cloud-hero-content {
    max-width: 650px;
}

.cloud-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px;
    margin-bottom: 20px;
    border-radius: 50px;
    background: #e8f1ff;
    color: #0b63f6;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

    .cloud-badge i {
        font-size: 14px;
    }

.cloud-hero-title {
    margin-bottom: 18px;
    color: var(--bs-white);
    font-size: 52px;
    line-height: 1.12;
    font-weight: 800;
    letter-spacing: -1.4px;
}

    .cloud-hero-title span {
        color: #0b63f6;
    }

.cloud-hero-text {
    max-width: 620px;
    margin-bottom: 35px;
    color: #c3c6ce;
    font-size: 16px;
    line-height: 1.8;
    font-weight: 400;
}

.cloud-feature-list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
    margin-bottom: 35px;
}

.cloud-feature-box {
    min-height: 130px;
}

.cloud-feature-icon {
    width: 54px;
    height: 54px;
    margin-bottom: 14px;
    border-radius: 13px;
    background: #e8f1ff;
    color: #0b63f6;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    box-shadow: 0 12px 30px rgba(11, 99, 246, 0.12);
}

.cloud-feature-box h6 {
    margin-bottom: 6px;
    color: #ffffff;
    font-size: 14px;
    font-weight: 800;
}

.cloud-feature-box p {
    margin: 0;
    color: #b2c1dd;
    font-size: 12px;
    line-height: 1.5;
}

.cloud-hero-buttons {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.cloud-btn-primary,
.cloud-btn-outline {
    min-height: 48px;
    padding: 0 24px;
    border-radius: 50px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.3s ease;
}

.cloud-btn-primary {
    color: #ffffff;
    background: linear-gradient(135deg, #0b63f6, #0047d9);
    box-shadow: 0 14px 28px rgba(11, 99, 246, 0.28);
}

    .cloud-btn-primary:hover {
        color: #ffffff;
        transform: translateY(-3px);
        box-shadow: 0 18px 36px rgba(11, 99, 246, 0.36);
    }

.cloud-btn-outline {
    color: #0b63f6;
    background: #ffffff;
    border: 2px solid #0b63f6;
}

    .cloud-btn-outline:hover {
        color: #ffffff;
        background: #0b63f6;
        transform: translateY(-3px);
    }

.cloud-hero-image-wrap {
    position: relative;
    text-align: right;
}

.cloud-hero-image {
    width: 100%;
    max-width: 700px;
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 30px 45px rgba(8, 52, 130, 0.25));
    animation: cloudFloat 4s ease-in-out infinite;
}

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

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

@media (max-width: 1199px) {
    .cloud-hero-title {
        font-size: 44px;
    }

    .cloud-feature-list {
        gap: 16px;
    }
}

@media (max-width: 991px) {
    .cloud-hero-section {
        padding: 145px 0 50px;
        text-align: center;
    }

    .cloud-hero-content {
        margin: 0 auto;
    }

    .cloud-hero-text {
        margin-left: auto;
        margin-right: auto;
    }

    .cloud-feature-list {
        grid-template-columns: repeat(2, 1fr);
        max-width: 520px;
        margin-left: auto;
        margin-right: auto;
    }

    .cloud-feature-box {
        text-align: center;
    }

    .cloud-feature-icon {
        margin-left: auto;
        margin-right: auto;
    }

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

    .cloud-hero-image-wrap {
        margin-top: 45px;
        text-align: center;
    }
}

@media (max-width: 575px) {
    .cloud-hero-section {
        padding: 130px 0 40px;
    }

    .cloud-hero-title {
        font-size: 34px;
    }

    .cloud-hero-text {
        font-size: 14px;
    }

    .cloud-feature-list {
/*        grid-template-columns: 1fr;*/
        gap: 18px;
    }

    .cloud-feature-box {
        padding: 18px;
        border-radius: 18px;
        background: rgb(226 236 253 / 16%);
        box-shadow: 0 12px 30px rgba(15, 55, 120, 0.08);
    }

    .cloud-btn-primary,
    .cloud-btn-outline {
        width: 100%;
    }
}
/*----------Trusted------------*/
.cloud-trusted-section {
    padding: 70px 0;
    background: #ffffff;
/*    font-family: 'Poppins', sans-serif;*/
}

.cloud-trusted-heading {
    max-width: 720px;
    margin: 0 auto 38px;
}

    .cloud-trusted-heading span {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        color: #0b63f6;
        font-size: 12px;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        margin-bottom: 10px;
    }

        .cloud-trusted-heading span::after {
            content: "";
            width: 34px;
            height: 2px;
            background: #0b63f6;
            border-radius: 20px;
        }

    .cloud-trusted-heading h2 {
        margin-bottom: 12px;
        color: #071633;
        font-size: 38px;
        line-height: 1.25;
        font-weight: 800;
        letter-spacing: -0.8px;
    }

        .cloud-trusted-heading h2 strong {
            color: #0b63f6;
            font-weight: 800;
        }

    .cloud-trusted-heading p {
        margin: 0 auto;
        max-width: 650px;
        color: #44536d;
        font-size: 14px;
        line-height: 1.8;
        font-weight: 500;
    }

.cloud-trusted-card {
    height: 100%;
    min-height: 185px;
    padding: 32px 22px 28px;
    text-align: center;
    border-radius: 10px;
    background: #ffffff;
    border: 1px solid #d9e3f2;
    box-shadow: 0 10px 26px rgba(15, 35, 75, 0.04);
    transition: all 0.3s ease;
}

    .cloud-trusted-card:hover {
        transform: translateY(-7px);
        border-color: rgba(11, 99, 246, 0.35);
        box-shadow: 0 18px 38px rgba(15, 35, 75, 0.11);
    }

.cloud-trusted-icon {
    width: 54px;
    height: 54px;
    margin: 0 auto 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 24px;
}

.cloud-icon-blue {
    background: linear-gradient(135deg, #1d6df2, #0b4fd8);
}

.cloud-icon-cyan {
    background: linear-gradient(135deg, #06b6d4, #0891b2);
}

.cloud-icon-purple {
    background: linear-gradient(135deg, #7c3aed, #5b21b6);
}

.cloud-icon-orange {
    background: linear-gradient(135deg, #ff8a1f, #f97316);
}

.cloud-icon-green {
    background: linear-gradient(135deg, #10b981, #059669);
}

.cloud-trusted-card h5 {
    margin-bottom: 12px;
    color: #061633;
    font-size: 14px;
    font-weight: 800;
}

.cloud-trusted-card p {
    margin: 0 auto;
    max-width: 170px;
    color: #43536d;
    font-size: 12px;
    line-height: 1.65;
    font-weight: 500;
}

@media (max-width: 991px) {
    .cloud-trusted-section {
        padding: 60px 0;
    }

    .cloud-trusted-heading h2 {
        font-size: 32px;
    }
}

@media (max-width: 575px) {
    .cloud-trusted-section {
        padding: 50px 0;
    }

    .cloud-trusted-heading h2 {
        font-size: 28px;
    }

    .cloud-trusted-card {
        min-height: auto;
    }
}
/*----------CLOUD SERVICES-------------*/
.cloud-services-section {
    padding: 75px 0;
    background: radial-gradient(circle at 18% 20%, rgba(11, 99, 246, 0.08), transparent 30%), linear-gradient(135deg, #f8fbff 0%, #eef6ff 48%, #f9fcff 100%);
/*    font-family: 'Poppins', sans-serif;*/
}

.cloud-services-heading {
    max-width: 730px;
    margin: 0 auto 42px;
}

    .cloud-services-heading span {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        color: #0b63f6;
        font-size: 12px;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        margin-bottom: 10px;
    }

        .cloud-services-heading span::after {
            content: "";
            width: 34px;
            height: 2px;
            background: #0b63f6;
            border-radius: 20px;
        }

    .cloud-services-heading h2 {
        margin-bottom: 12px;
        color: #071633;
        font-size: 40px;
        line-height: 1.25;
        font-weight: 800;
        letter-spacing: -0.8px;
    }

        .cloud-services-heading h2 strong {
            color: #0b63f6;
            font-weight: 800;
        }

    .cloud-services-heading p {
        max-width: 650px;
        margin: 0 auto;
        color: #44536d;
        font-size: 15px;
        line-height: 1.75;
        font-weight: 500;
    }

.cloud-service-card {
    height: 100%;
    min-height: 190px;
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 24px;
    border-radius: 16px;
    background: #ffffff;
    border: 1px solid #e2eaf5;
    box-shadow: 0 14px 32px rgba(15, 35, 75, 0.06);
    transition: all 0.3s ease;
}

    .cloud-service-card:hover {
        transform: translateY(-7px);
        border-color: rgba(11, 99, 246, 0.35);
        box-shadow: 0 22px 45px rgba(15, 35, 75, 0.12);
    }

.cloud-service-img {
    width: 145px;
    height: 145px;
    flex: 0 0 145px;
    object-fit: cover;
    border-radius: 12px;
    box-shadow: 0 12px 28px rgba(11, 99, 246, 0.15);
}

.cloud-service-content h5 {
    margin-bottom: 12px;
    color: #061633;
    font-size: 20px;
    font-weight: 800;
    line-height: 1.25;
}

.cloud-service-content p {
    margin-bottom: 14px;
    color: #40506a;
    font-size: 14px;
    line-height: 1.65;
    font-weight: 500;
}

.cloud-service-content a {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #0b63f6;
    font-size: 14px;
    font-weight: 800;
    text-decoration: none;
    transition: all 0.3s ease;
}

    .cloud-service-content a:hover {
        color: #0047d9;
        gap: 11px;
    }

@media (max-width: 1199px) {
    .cloud-service-card {
        gap: 18px;
    }

    .cloud-service-img {
        width: 125px;
        height: 125px;
        flex-basis: 125px;
    }

    .cloud-service-content h5 {
        font-size: 18px;
    }
}

@media (max-width: 575px) {
    .cloud-services-section {
        padding: 55px 0;
    }

    .cloud-services-heading h2 {
        font-size: 30px;
    }

    .cloud-service-card {
        flex-direction: column;
        text-align: center;
        padding: 22px;
    }

    .cloud-service-img {
        width: 100%;
        max-width: 210px;
        height: 170px;
        flex: unset;
    }

    .cloud-service-content a {
        justify-content: center;
    }
}

/*----------TECH_SECTION------------*/
.cloud-tech-section {
    padding: 70px 0;
    background: radial-gradient(circle at top right, rgba(11, 99, 246, 0.05), transparent 28%), linear-gradient(135deg, #f8fbff 0%, #eef5ff 48%, #f9fcff 100%);
/*    font-family: 'Poppins', sans-serif;*/
}

.cloud-tech-wrapper {
    padding: 45px 40px;
    border-radius: 22px;
    background: #ffffff;
    border: 1px solid #e4ebf5;
    box-shadow: 0 15px 40px rgba(15, 35, 75, 0.06);
}

.cloud-tech-heading {
    margin-bottom: 35px;
}

    .cloud-tech-heading h2 {
        margin: 0;
        color: #071633;
        font-size: 38px;
        line-height: 1.3;
        font-weight: 800;
        letter-spacing: -0.8px;
    }

.cloud-tech-row {
    row-gap: 28px;
}

.cloud-tech-logo-box {
    height: 90px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

    .cloud-tech-logo-box:hover {
        transform: translateY(-6px);
    }

.cloud-tech-logo {
    max-width: 170px;
    width: 100%;
    height: auto;
    object-fit: contain;
    filter: grayscale(0%);
    opacity: 0.95;
    transition: all 0.3s ease;
}

.cloud-tech-logo-box:hover .cloud-tech-logo {
    transform: scale(1.05);
    opacity: 1;
}

@media (max-width: 991px) {

    .cloud-tech-section {
        padding: 60px 0;
    }

    .cloud-tech-wrapper {
        padding: 40px 25px;
    }

    .cloud-tech-heading h2 {
        font-size: 30px;
    }

    .cloud-tech-logo {
        max-width: 140px;
    }
}

@media (max-width: 575px) {

    .cloud-tech-section {
        padding: 50px 0;
    }

    .cloud-tech-wrapper {
        padding: 30px 18px;
        border-radius: 18px;
    }

    .cloud-tech-heading {
        margin-bottom: 25px;
    }

        .cloud-tech-heading h2 {
            font-size: 24px;
        }

    .cloud-tech-logo-box {
        height: 70px;
    }

    .cloud-tech-logo {
        max-width: 120px;
    }
}
/*-------------CTA------------*/
.cloud-cta-section {
/*    padding: 55px 0;*/
    background: #ffffff;
}

.cloud-cta-box {
    position: relative;
    overflow: hidden;
/*    border-radius: 18px;*/
    padding: 48px 60px;
    background: linear-gradient(90deg, #061735 0%, #071d44 48%, rgba(7, 29, 68, 0.72) 100%), url("../../wresources/images/cloud-cta-bg.jpg") center right / cover no-repeat;
    box-shadow: 0 22px 55px rgba(3, 17, 38, 0.18);
}

.cloud-cta-heading span {
    display: inline-block;
    color: rgba(255,255,255,0.78);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 1.4px;
    margin-bottom: 18px;
}

    .cloud-cta-heading span::after {
        content: "";
        display: inline-block;
        width: 34px;
        height: 1px;
        background: rgba(255,255,255,0.45);
        margin-left: 10px;
        vertical-align: middle;
    }

.cloud-cta-heading h2 {
    color: #ffffff;
    font-size: 36px;
    line-height: 1.25;
    font-weight: 800;
    margin: 0;
}

    .cloud-cta-heading h2 strong {
        color: #1478ff;
    }

.cloud-cta-content p {
    color: rgba(255,255,255,0.88);
    font-size: 15px;
    line-height: 1.8;
    max-width: 330px;
    margin-bottom: 24px;
}

.cloud-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 13px 26px;
    border-radius: 12px;
    background: #ffffff;
    color: #075eea;
    font-size: 15px;
    font-weight: 800;
    text-decoration: none;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.22);
    transition: all 0.3s ease;
}

    .cloud-cta-btn:hover {
        color: #075eea;
        transform: translateY(-3px);
        text-decoration: none;
    }

.cloud-cta-image {
    height: 210px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

    .cloud-cta-image img {
        max-width: 100%;
        height: 100%;
        object-fit: contain;
        display: block;
    }

@media (max-width: 991px) {
    .cloud-cta-box {
        padding: 38px 30px;
        text-align: center;
    }

    .cloud-cta-content p {
        margin: 22px auto;
    }

    .cloud-cta-image {
        justify-content: center;
        margin-top: 25px;
    }
}

@media (max-width: 575px) {
    .cloud-cta-box {
        padding: 30px 20px;
        border-radius: 14px;
    }

    .cloud-cta-heading h2 {
        font-size: 27px;
    }

    .cloud-cta-image {
        height: 160px;
    }
}



/*==============================
        Press&Media
==============================*/
/*=========================================
MEDIA STORY
=========================================*/

.media-story {
    padding: 40px 0;
    background: #fff;
    position: relative;
    overflow: hidden;
}

    /* Decorative Background */

    .media-story::before {
        content: "";
        position: absolute;
        width: 320px;
        height: 320px;
        background: rgba(13,110,253,.05);
        border-radius: 50%;
        top: -120px;
        left: -100px;
        filter: blur(30px);
    }

    .media-story::after {
        content: "";
        position: absolute;
        width: 260px;
        height: 260px;
        background: rgba(87,181,255,.05);
        border-radius: 50%;
        bottom: -120px;
        right: -80px;
        filter: blur(40px);
    }

    .media-story .container {
        position: relative;
        z-index: 2;
    }

/* Badge */

.media-story-tag {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 18px;
    border-radius: 50px;
    background: #eef6ff;
    color: #0d6efd;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .5px;
    margin-bottom: 22px;
}

    .media-story-tag::before {
        content: "";
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: #0d6efd;
    }

/* Heading */

.media-story-title {
    margin: 0;
    font-size: clamp(2.5rem,5vw,4rem);
    line-height: 1.15;
    font-weight: 800;
    color: #14213d;
    letter-spacing: -1px;
}

    .media-story-title span {
        color: #0d6efd;
        display: inline-block;
        position: relative;
    }

        .media-story-title span::after {
            content: "";
            position: absolute;
            left: 0;
            bottom: -6px;
            width: 100%;
            height: 4px;
            border-radius: 20px;
            background: linear-gradient(90deg,#0d6efd,#58b5ff);
        }

/* Paragraph */

.media-story-description {
    margin: 0;
    font-size: 18px;
    line-height: 2;
    color: #667085;
    padding-left: 45px;
    border-left: 4px solid #0d6efd;
    position: relative;
}

    .media-story-description::before {
        content: "";
        position: absolute;
        left: -9px;
        top: 0;
        width: 14px;
        height: 14px;
        border-radius: 50%;
        background: #0d6efd;
    }

/* Responsive */

@media(max-width:991px) {

    .media-story {
        padding: 80px 0;
        text-align: center;
    }

    .media-story-title {
        margin-bottom: 20px;
    }

    .media-story-description {
        padding-left: 0;
        padding-top: 25px;
        border-left: none;
        border-top: 3px solid #0d6efd;
    }

        .media-story-description::before {
            left: 50%;
            top: -8px;
            transform: translateX(-50%);
        }
}

@media(max-width:767px) {

    .media-story {
        padding: 60px 0;
    }

    .media-story-title {
        font-size: 2.3rem;
        line-height: 1.25;
    }

    .media-story-description {
        font-size: 16px;
        line-height: 1.9;
    }
}
.media-hero-section {
    position: relative;
    overflow: hidden;
    padding: 150px 0 70px;
    background: linear-gradient( rgba(5, 15, 40, 0.85), rgba(5, 15, 40, 0.90) ), url('/Images/media/media-gallery-banner.jpg');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

.media-hero-overlay {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at top left, rgba(13,110,253,.25), transparent 35%), radial-gradient(circle at bottom right, rgba(13,110,253,.20), transparent 35%);
}

.media-hero-content {
    position: relative;
    z-index: 2;
}

.media-hero-subtitle {
    display: inline-block;
    color: #4da3ff;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 4px;
    margin-bottom: 15px;
}

.media-hero-title {
    font-size: 4.5rem;
    font-weight: 800;
    color: #fff;
    margin-bottom: 15px;
    line-height: 1.1;
}

    .media-hero-title span {
        color: #0d6efd;
    }

.media-hero-description {
    max-width: 750px;
    margin: 0 auto;
    color: rgba(255,255,255,.85);
    font-size: 17px;
    line-height: 1.8;
}

.media-hero-highlights {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 18px;
    margin-top: 35px;
}

.media-highlight-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.10);
    backdrop-filter: blur(10px);
    border-radius: 12px;
    min-width: 220px;
}

    .media-highlight-item i {
        font-size: 22px;
        color: #ced4da;
    }

    .media-highlight-item h6 {
        margin: 0;
        color: #fff;
        font-size: 15px;
        font-weight: 600;
    }

    .media-highlight-item span {
        color: rgba(255,255,255,.65);
        font-size: 12px;
    }

@media (max-width: 991px) {

    .media-hero-section {
        padding: 100px 0 50px;
    }

    .media-hero-title {
        font-size: 3rem;
    }
}

@media (max-width: 576px) {

    .media-hero-section {
        padding: 80px 0 40px;
    }

    .media-hero-title {
        font-size: 2.2rem;
    }

    .media-hero-description {
        font-size: 15px;
    }

    .media-highlight-item {
        width: 100%;
        min-width: auto;
    }
}

/*========OUR CELEBRATIONS=========*/
.media-celebration-section {
    background: #f8fafc;
}

.media-section-tag {
    color: #0d6efd;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-size: 13px;
}

.media-section-title1 {
    font-size: 42px;
    font-weight: 700;
    color: #111827;
    margin-top: 10px;
}

.media-title-divider {
    width: 80px;
    height: 4px;
    background: #0d6efd;
    border-radius: 30px;
    margin: 15px auto 0;
}

/* Card */

.media-category-card {
    position: relative;
    overflow: hidden;
    border-radius: 20px;
    cursor: pointer;
    height: 420px;
    transition: .4s;
    box-shadow: 0 15px 35px rgba(0,0,0,.08);
}

    .media-category-card img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: .7s;
    }

    .media-category-card:hover img {
        transform: scale(1.1);
    }

.media-category-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient( to top, rgba(0,0,0,.9), rgba(0,0,0,.3), transparent );
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 25px;
}

.media-category-icon {
    width: 60px;
    height: 60px;
    background: #0e3369;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
}

    .media-category-icon i {
        color: #fff;
        font-size: 24px;
    }

.media-category-content h4 {
    color: #fff;
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 6px;
}

.media-category-content span {
    color: rgba(255,255,255,.8);
    font-size: 14px;
}

.media-category-arrow {
    position: absolute;
    bottom: 25px;
    right: 25px;
    width: 42px;
    height: 42px;
    border: 1px solid rgba(255,255,255,.3);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: .4s;
}

    .media-category-arrow i {
        color: #fff;
    }

.media-category-card:hover .media-category-arrow {
    background: #0d6efd;
    border-color: #0d6efd;
    transform: translateX(5px);
}

.media-category-card:hover {
    transform: translateY(-10px);
}
/*=========POPUP=======*/
#mediaGalleryOverlay {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    max-width: 1400px;
    height: 85vh;
    background: #09111fd9;
    border-radius: 24px;
    z-index: 99999;
    overflow-y: auto;
    display: none;
    padding: 40px;
    box-shadow: 0 25px 80px rgba(0,0,0,.45);
}

.media-gallery-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:30px;
}

.media-gallery-header h2{
    color:#fff;
    font-size:42px;
    margin:0;
}

.media-gallery-header span{
    color:#8ca3c7;
}

#closeGallery{
    width:50px;
    height:50px;
    border:none;
    border-radius:50%;
    background:#ffffff15;
    color:#fff;
    font-size:22px;
}

.media-gallery-card {
    overflow: hidden;
    border-radius: 18px;
    height: 380px; /* reduced height for 3-grid balance */
    position: relative;
}

    .media-gallery-card img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: .5s ease;
    }

    .media-gallery-card:hover img {
        transform: scale(1.08);
    }

.media-gallery-footer{
    display:flex;
    justify-content:center;
    gap:15px;
    margin-top:50px;
}

.media-gallery-navigation {
    position: fixed;
    left: 0;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    z-index: 999999;
}

.media-nav-btn {
    width: 60px;
    height: 60px;
    border: none;
    border-radius: 50%;
    background: #ffffff;
    color: #09111f;
    font-size: 20px;
    box-shadow: 0 10px 30px rgba(0,0,0,.15);
    transition: .3s;
    pointer-events: auto;
    position: absolute;
}

    .media-nav-btn:hover {
        transform: scale(1.1);
        background: #165bff;
        color: #fff;
    }

#prevPageBtn {
    left: 30px;
}

#nextPageBtn {
    right: 30px;
}

.media-nav-btn:disabled {
    opacity: .35;
    cursor: not-allowed;
    transform: none;
}



/*TECHNOLOGY*/
.technology-banner {
    position: relative;
    overflow: hidden;
    /* Navbar ke liye extra top space */
    padding: 180px 0 100px;
    /* Dark Professional Gradient */
    background: linear-gradient( 135deg, #020617 0%, #0f172a 30%, #1e293b 60%, #0f172a 100% );
}

    /* Decorative Circle 1 */
    .technology-banner::before {
        content: '';
        position: absolute;
        width: 500px;
        height: 500px;
        border-radius: 50%;
        background: rgba(59,130,246,.08);
        top: -200px;
        right: -150px;
    }

    /* Decorative Circle 2 */
    .technology-banner::after {
        content: '';
        position: absolute;
        width: 350px;
        height: 350px;
        border-radius: 50%;
        background: rgba(59,130,246,.05);
        bottom: -150px;
        left: -100px;
    }

.min-vh-75 {
    min-height: 75vh;
}

.banner-tag {
    display: inline-block;
    padding: 10px 20px;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.15);
    border-radius: 50px;
    color: #cbd5e1;
    font-weight: 600;
    font-size: 14px;
    margin-bottom: 20px;
    backdrop-filter: blur(10px);
}

/* Heading Smaller */
.banner-title {
    font-size: 48px;
    font-weight: 700;
    line-height: 1.2;
    color: #fff;
    margin-bottom: 25px;
    letter-spacing: -1px;
}

    .banner-title span {
        color: #38bdf8;
    }

.banner-text {
    color: rgba(255,255,255,.75);
    font-size: 17px;
    line-height: 1.9;
    margin-bottom: 35px;
    max-width: 600px;
}

.banner-btns {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}

    .banner-btns .btn-primary {
        background: #2563eb;
        border: none;
        padding: 14px 28px;
        font-weight: 600;
        box-shadow: 0 10px 25px rgba(37,99,235,.35);
    }

        .banner-btns .btn-primary:hover {
            background: #1d4ed8;
        }

    .banner-btns .btn-outline-primary {
        border: 2px solid rgba(255,255,255,.25);
        color: #fff;
        padding: 14px 28px;
    }

        .banner-btns .btn-outline-primary:hover {
            background: #fff;
            color: #111827;
        }

/* Right Side Image */
.banner-image-wrapper {
    position: relative;
    text-align: center;
}

    .banner-image-wrapper img {
        max-width: 100%;
        animation: float 5s ease-in-out infinite;
        filter: drop-shadow(0 25px 40px rgba(0,0,0,.35));
    }

/* Floating Technology Tags */
/*.tech-badge {
    position: absolute;
    background: rgba(255,255,255,.95);
    padding: 10px 18px;
    border-radius: 30px;
    font-weight: 600;
    color: #0f172a;
    box-shadow: 0 10px 25px rgba(0,0,0,.2);
}

.badge-1 {
    top: 20px;
    left: 20px;
}

.badge-2 {
    top: 100px;
    right: 10px;
}

.badge-3 {
    bottom: 80px;
    left: 10px;
}

.badge-4 {
    bottom: 20px;
    right: 30px;
}*/

@keyframes float {
    0% {
        transform: translateY(0);
    }

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

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

/* Tablet */
@media (max-width: 991px) {

    .technology-banner {
        padding: 140px 0 80px;
        text-align: center;
    }

    .banner-title {
        font-size: 40px;
    }

    .banner-text {
        margin-left: auto;
        margin-right: auto;
    }

    .banner-btns {
        justify-content: center;
    }

    .banner-image-wrapper {
        margin-top: 50px;
    }
}

/* Mobile */
@media (max-width: 576px) {

    .technology-banner {
        padding: 120px 0 70px;
    }

    .banner-title {
        font-size: 32px;
        line-height: 1.3;
    }

    .banner-text {
        font-size: 15px;
    }

    .tech-badge {
        display: none;
    }
}

.technology-services {
    background: linear-gradient(180deg, #f8fbff 0%, #ffffff 100%);
    padding: 80px 0;
}

.tech-service-card {
    position: relative;
    overflow: hidden;
    background: #fff;
    border-radius: 24px;
    padding: 40px;
    border: 1px solid #eef3ff;
    box-shadow: 0 10px 35px rgba(0, 0, 0, .06);
    transition: all .4s ease;
    z-index: 1;
}

    /* Top Gradient Border */
    .tech-service-card::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 5px;
        background: linear-gradient( 90deg, #0d6efd, #00c6ff );
    }

    /* Background Shape */
    .tech-service-card::after {
        content: "";
        position: absolute;
        right: -80px;
        top: -80px;
        width: 220px;
        height: 220px;
        border-radius: 50%;
        background: rgba(13,110,253,.04);
        z-index: -1;
    }

    .tech-service-card:hover {
        transform: translateY(-10px);
        box-shadow: 0 25px 50px rgba(13,110,253,.15);
    }

/* Icon Circle */
.tech-icon-circle {
    width: 130px;
    height: 130px;
    border-radius: 50%;
    background: linear-gradient(135deg, #00c6ff, #0d6efd);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: auto;
    position: relative;
    transition: all .4s ease;
    box-shadow: 0 15px 30px rgba(13,110,253,.25);
}

    /* Outer Ring */
    .tech-icon-circle::before {
        content: "";
        position: absolute;
        inset: -10px;
        border: 2px dashed rgba(13,110,253,.25);
        border-radius: 50%;
    }

.tech-service-card:hover .tech-icon-circle {
    transform: rotate(8deg) scale(1.08);
}

.tech-icon-circle img {
    width: 65px;
    height: 65px;
    object-fit: contain;
/*    filter: brightness(0) invert(1);*/
}

/* Heading */
.service-content h2 {
    font-size: 34px;
    font-weight: 700;
    margin-bottom: 18px;
    color: #0f172a;
    position: relative;
}

    .service-content h2::after {
        content: "";
        display: block;
        width: 70px;
        height: 4px;
        margin-top: 10px;
        border-radius: 10px;
        background: linear-gradient( 90deg, #0d6efd, #00c6ff );
    }

/* Description */
.service-content p {
    color: #64748b;
    line-height: 1.9;
    font-size: 15px;
    margin-bottom: 25px;
}

/* Feature List */
.feature-list {
    list-style: none;
    padding: 0;
    margin: 0;
    column-count: 2;
    column-gap: 40px;
}

    .feature-list li {
        position: relative;
        padding-left: 32px;
        margin-bottom: 14px;
        color: #334155;
        font-size: 15px;
        transition: .3s;
    }

        /* Custom Bullet */
        .feature-list li::before {
            content: "✓";
            position: absolute;
            left: 0;
            top: -1px;
            width: 22px;
            height: 22px;
            border-radius: 50%;
            background: #eaf2ff;
            color: #0d6efd;
            font-size: 12px;
            font-weight: bold;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .feature-list li:hover {
            color: #0d6efd;
            padding-left: 38px;
        }

/* Responsive */
@media (max-width: 991px) {

    .tech-service-card {
        padding: 30px;
    }

    .service-content {
        text-align: center;
        margin-top: 25px;
    }

        .service-content h2::after {
            margin-left: auto;
            margin-right: auto;
        }

    .feature-list {
        column-count: 1;
    }

    .tech-icon-circle {
        width: 110px;
        height: 110px;
    }

        .tech-icon-circle img {
            width: 55px;
            height: 55px;
        }
}












/* =========================
   TECH WHEEL SECTION
========================= */

.tech-wheel-section {
    background: linear-gradient(180deg, #f8fbff 0%, #eef5ff 100%);
    position: relative;
    overflow: hidden;
}

/* background circles */
.tech-wheel-section::before {
    content: '';
    position: absolute;
    width: 500px;
    height: 500px;
    background: rgba(13,110,253,.05);
    border-radius: 50%;
    top: -250px;
    right: -150px;
}

.tech-wheel-section::after {
    content: '';
    position: absolute;
    width: 400px;
    height: 400px;
    background: rgba(0,200,255,.05);
    border-radius: 50%;
    bottom: -200px;
    left: -150px;
}

/* =========================
   WHEEL CONTAINER (DESKTOP ONLY)
========================= */

.tech-wheel {
    position: relative;
    width: min(700px, 100%);
    height: min(700px, 100vw);
    margin: auto;
/*    animation: wheelRotate 25s linear infinite;*/
    transform-origin: center;
}

/* outer ring */
.tech-wheel::before {
    content: '';
    position: absolute;
    width: 75%;
    height: 75%;
    border: 2px dashed #bfd8ff;
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* inner ring */
.tech-wheel::after {
    content: '';
    position: absolute;
    width: 45%;
    height: 45%;
    border: 2px dashed #e3efff;
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

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

.center-logo {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: clamp(90px, 15vw, 140px);
    height: clamp(90px, 15vw, 140px);
    border-radius: 50%;
    background: linear-gradient(135deg, #0d6efd, #00c6ff);
    color: white;
    font-size: clamp(28px, 5vw, 55px);
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 20px 40px rgba(13,110,253,.25), 0 0 0 12px rgba(13,110,253,.08);
    z-index: 10;
}

/* =========================
   WHEEL ITEMS
========================= */

.wheel-item {
    position: absolute;
    width: clamp(70px, 10vw, 110px);
    height: clamp(70px, 10vw, 110px);
    border-radius: 50%;
    background: #0891fe;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-weight: 600;
    font-size: clamp(10px, 1.8vw, 14px);
    cursor: pointer;
    user-select: none;
    transition: left 0.8s ease, top 0.8s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

.wheel-item:hover {
    background: linear-gradient(135deg, #0d6efd, #00c6ff);
    color: white;
    transform: scale(1.1);
    z-index: 20;
}

.wheel-item.active {
    background: linear-gradient(135deg, #0d6efd, #00c6ff);
    color: white;
    transform: scale(1.2);
    box-shadow: 0 25px 50px rgba(13,110,253,.35);
}

.wheel-item.pulse {
    animation: pulse 0.6s ease;
}

/* =========================
   DETAIL PANEL
========================= */

.detail-panel {
    background: white;
    border-radius: 25px;
    padding: 35px;
    border: 1px solid #e7eefc;
    box-shadow: 0 15px 40px rgba(0,0,0,.08);
    position: sticky;
    top: 100px;
}

.detail-panel h3 {
    color: #0d6efd;
    font-weight: 700;
    margin-bottom: 20px;
}

.detail-panel p {
    color: #64748b;
    line-height: 1.8;
    margin-bottom: 25px;
}

.detail-panel .btn {
    border-radius: 50px;
    padding: 12px 28px;
    font-weight: 600;
    background: linear-gradient(135deg, #0d6efd, #00c6ff);
    border: none;
}

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

.tech-wheel-section h2 {
    font-size: clamp(24px, 3vw, 42px);
    font-weight: 800;
    color: #0f172a;
}

.tech-wheel-section p {
    color: #64748b;
}

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

@keyframes wheelRotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.25); }
    100% { transform: scale(1); }
}

/* =========================
   MOBILE GRID (2 COLUMN FIX)
========================= */

.tech-mobile-list {
    display: none;
}

/* show ONLY on mobile */
@media (max-width: 992px) {

    .tech-wheel {
        display: none; /* 🚨 important fix */
    }

    .tech-mobile-list {
        display: grid;
        grid-template-columns: repeat(4, 1fr); /* ✔ 2 per row */
        gap: 12px;
    }

    .tech-card {
        background: white;
        border-radius: 14px;
        padding: 14px;
        text-align: center;
        font-weight: 600;
        color: #0d6efd;
        border: 1px solid #e7eefc;
        box-shadow: 0 6px 18px rgba(0,0,0,0.05);
        cursor: pointer;
        transition: 0.3s ease;
    }

    .tech-card:hover {
        transform: translateY(-3px);
        background: linear-gradient(135deg, #0d6efd, #00c6ff);
        color: white;
    }

    .detail-panel {
        margin-top: 30px;
    }
}

/* small mobile fine tuning */
@media (max-width: 576px) {

    .tech-mobile-list {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
}

.devlok-aspnet-hero {
    padding: 25px;
    position: relative;
    min-height: 90vh;
    display: flex;
    align-items: center;
    background: linear-gradient(135deg, #0b1220, #0d6efd);
    overflow: hidden;
    color: #fff;
}

    /* dark overlay pattern */
    .devlok-aspnet-hero .overlay {
        position: absolute;
        inset: 0;
        background: radial-gradient(circle at 20% 30%, rgba(0,198,255,0.15), transparent 40%), radial-gradient(circle at 80% 70%, rgba(13,110,253,0.25), transparent 45%);
    }

/* container */
.hero-content {
    position: relative;
    z-index: 2;
}

/* badge */
.hero-badge {
    display: inline-block;
    padding: 8px 18px;
    border-radius: 50px;
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.2);
    font-size: 13px;
    letter-spacing: 1px;
    margin-bottom: 20px;
}

/* title */
.hero-title {
    font-size: 48px;
    font-weight: 800;
    line-height: 1.2;
}

    .hero-title span {
        color: #00c6ff;
    }

/* subtitle */
.hero-subtitle {
    margin-top: 15px;
    font-size: 16px;
    opacity: 0.85;
    max-width: 600px;
}

/* buttons */
.hero-actions {
    margin-top: 25px;
}

.btn-primary-aspnet {
    background: #00c6ff;
    border: none;
    padding: 12px 25px;
    border-radius: 30px;
    color: #fff;
    font-weight: 600;
    margin-right: 10px;
}

.btn-outline-aspnet {
    background: transparent;
    border: 1px solid #fff;
    padding: 12px 25px;
    border-radius: 30px;
    color: #fff;
}

/* stats */
.hero-stats {
    display: flex;
    gap: 40px;
    margin-top: 40px;
}

    .hero-stats h3 {
        font-size: 28px;
        font-weight: 700;
    }

    .hero-stats p {
        font-size: 13px;
        opacity: 0.8;
    }

/* right visual */
.hero-visual {
    position: relative;
    width: 100%;
    height: 420px;
}

/* floating tech cards */
.floating-card {
    position: absolute;
    padding: 12px 18px;
    border-radius: 12px;
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.2);
    backdrop-filter: blur(10px);
    font-weight: 600;
    animation: float 4s ease-in-out infinite;
}

.net {
    top: 20px;
    left: 20px;
}

.api {
    top: 120px;
    right: 20px;
}

.azure {
    bottom: 120px;
    left: 40px;
}

.mvc {
    bottom: 30px;
    right: 50px;
}

/* center glow */
.center-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 160px;
    height: 160px;
    border-radius: 50%;
    background: radial-gradient(circle, #00c6ff, #0d6efd);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    box-shadow: 0 0 60px rgba(0,198,255,0.5);
}

/* animation */
@keyframes float {
    0%, 100% {
        transform: translateY(0);
    }

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

/* responsive */
@media (max-width: 768px) {
    .hero-title {
        font-size: 32px;
    }

/*    .hero-stats {
        flex-direction: column;
        gap: 15px;
    }
*/
    .hero-visual {
        margin-top: 40px;
        height: 300px;
    }
}





/* Section background */
.tech-section-bg {
    padding: 30px;
    background: rgb(211 233 248);
}

/* Capsule container */
.tech-pill {
    width: 100%;
    border-radius: 50px;
    overflow: hidden;
    box-shadow: 0 8px 25px rgba(0,0,0,0.08);
    border: 1px solid #e9ecef;
    background: #fff;
    font-family: sans-serif;
}

/* Left 30% colored section */
.pill-left {
    flex: 0 0 30%;
    max-width: 30%;
    background: linear-gradient(135deg, #0d6efd, var(--bs-cyan));
    color: #fff;
    padding: 18px 20px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

/* Right 70% content */
.pill-right {
    flex: 0 0 70%;
    max-width: 70%;
    background: #fff;
    color: #2b2b2b;
    padding: 18px 25px;
    font-size: 14px;
    line-height: 1.6;
    display: flex;
    align-items: center;
}

/* Responsive behavior */
@media (max-width: 768px) {
    .pill-left,
    .pill-right {
        flex: 0 0 100%;
        max-width: 100%;
        text-align: center;
    }

    .pill-left {
        border-radius: 50px 50px 0 0;
    }

    .pill-right {
        border-radius: 0 0 50px 50px;
    }
}



.dotnet-services-section {
    padding: 90px 0;
    background: radial-gradient(circle at top, #eef3ff, #f7f9fc);
    overflow: hidden;
}

/* HEADER */
.title {
    font-weight: 800;
    color: #0b1f3a;
}

.subtitle {
    color: #6c7a89;
    max-width: 650px;
    margin: 0 auto;
}

/* DIAGRAM WRAPPER */
.network-diagram {
    position: relative;
    width: 100%;
    height: clamp(500px, 70vh, 750px);
    margin: 0 auto;
}

/* CENTER */
.center-circle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 170px;
    height: 170px;
    background: linear-gradient(145deg, #0b1f3a, #123a6a);
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #fff;
    z-index: 10;
    box-shadow: 0 25px 60px rgba(0,0,0,0.2);
}

    .center-circle img {
        width: 55px;
        margin-bottom: 8px;
    }

/* SERVICE CARD BASE */
.service-card {
    position: absolute;
    width: clamp(160px, 18vw, 220px);
    background: #133d71;
    padding: 14px 16px;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
    border: 1px solid rgba(13,110,253,0.1);
    transition: 0.3s ease;
    cursor: pointer;
    /* IMPORTANT FIX */
    transform: translate(-50%, -50%);
}

    .service-card:hover {
        transform: translate(-50%, -55%) scale(1.05);
        background: #0b1f3a;
        color: white;
    }

/* ICON */
.icon {
    font-size: 20px;
    margin-bottom: 6px;
}

/* -----------------------------
   RESPONSIVE ORBIT POSITIONS
   USING PERCENTAGES (FIXED)
------------------------------*/

/* TOP ROW */
.c1 {
    top: 10%;
    left: 25%;
}

.c2 {
    top: 10%;
    left: 75%;
}

/* MID LEFT / RIGHT */
.c3 {
    top: 40%;
    left: 10%;
}

.c4 {
    top: 40%;
    left: 90%;
}

/* BOTTOM MID */
.c5 {
    top: 75%;
    left: 10%;
}

.c6 {
    top: 75%;
    left: 90%;
}

/* BOTTOM ROW */
.c7 {
    top: 82%;
    left: 30%;
}

.c8 {
    top: 82%;
    left: 70%;
}

/* SVG LINES */
.lines {
    position: absolute;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

    .lines line {
        stroke: rgba(13,110,253,0.18);
        stroke-width: 2;
        stroke-dasharray: 6;
        animation: flow 5s linear infinite;
    }

@keyframes flow {
    to {
        stroke-dashoffset: -100;
    }
}

/* -----------------------------
   MOBILE FIX (IMPORTANT)
------------------------------*/
@media (max-width: 768px) {

    .network-diagram {
        height: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 16px;
        padding: 30px 10px;
    }

    .center-circle {
        position: relative;
        top: auto;
        left: auto;
        transform: none;
        margin-bottom: 20px;
    }

    .service-card {
        position: relative;
        top: auto !important;
        left: auto !important;
        transform: none;
        width: 100%;
    }

        .service-card:hover {
            transform: scale(1.02);
        }

    .lines {
        display: none;
    }
}



.process-section {
/*    padding: 100px 0;*/
    background: #fff;
}

.section-title {
    text-align: center;
    font-size: 30px;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 15px;
}

.section-subtitle {
    max-width: 900px;
    margin: 0 auto 80px;
    text-align: center;
    color: #64748b;
    font-size: 18px;
    line-height: 1.8;
}

.process-card {
    text-align: center;
    position: relative;
}

/* ==========================
   Circle Design
========================== */

.circle-wrap {
    width: 180px;
    height: 180px;
    margin: auto;
/*    border-radius: 50%;*/
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 15px 35px rgba(0,0,0,.08), inset 0 3px 8px rgba(255,255,255,.5);
    transition: .35s ease;
}

    .circle-wrap:hover {
        transform: translateY(-10px);
    }

.circle-inner {
    width: 135px;
    height: 135px;
    border-radius: 50%;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: inset 0 6px 15px rgba(0,0,0,.06);
}

    /* ==========================
   Icons
========================== */

    .circle-inner i {
        font-size: 54px;
    }

/* ==========================
   Arrow Connectors
========================== */

.circle-wrap::after {
    content: "";
    position: absolute;
    right: -28px;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-top: 16px solid transparent;
    border-bottom: 16px solid transparent;
}

.green::after {
    border-left: 22px solid #53d635;
}

.teal::after {
    border-left: 22px solid #14b8a6;
}

.cyan::after {
    border-left: 22px solid #00c8ff;
}

.blue::after {
    border-left: 22px solid #3467ff;
}

.purple::after {
    border-left: 22px solid #7c3aed;
}

.no-arrow::after {
    display: none;
}

/* ==========================
   Gradient Rings
========================== */

.green {
    background: linear-gradient(145deg,#cfff65,#52d635);
}

.teal {
    background: linear-gradient(145deg,#34e2c6,#0fae9c);
}

.cyan {
    background: linear-gradient(145deg,#52e6ff,#00c8ff);
}

.blue {
    background: linear-gradient(145deg,#5ea8ff,#3467ff);
}

.purple {
    background: linear-gradient(145deg,#b388ff,#7c3aed);
}

.indigo {
    background: linear-gradient(145deg,#7aa2ff,#4f46e5);
}

/* ==========================
   Icon Colors
========================== */

.green i {
    color: #59cf38;
}

.teal i {
    color: #13b8a5;
}

.cyan i {
    color: #00c8ff;
}

.blue i {
    color: #3b6dff;
}

.purple i {
    color: #7c3aed;
}

.indigo i {
    color: #4f46e5;
}

/* ==========================
   Titles
========================== */

.process-card h3 {
    margin-top: 28px;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: .5px;
    color: #111827;
}

.label {
    display: block;
    margin-top: 8px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.green-text {
    color: #59cf38;
}

.teal-text {
    color: #13b8a5;
}

.cyan-text {
    color: #00c8ff;
}

.blue-text {
    color: #3b6dff;
}

.purple-text {
    color: #7c3aed;
}

.indigo-text {
    color: #4f46e5;
}

.process-card p {
    margin-top: 12px;
    color: #7b8794;
    font-size: 13px;
    line-height: 1.7;
    max-width: 220px;
    margin-left: auto;
    margin-right: auto;
}

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

.footer-brand {
    margin-top: 100px;
    text-align: center;
}

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

.bar {
    width: 28px;
    height: 8px;
    border-radius: 20px;
}

    .bar.green {
        background: #53d635;
    }

    .bar.teal {
        background: #14b8a6;
    }

    .bar.cyan {
        background: #00c8ff;
    }

    .bar.blue {
        background: #3467ff;
    }

    .bar.purple {
        background: #7c3aed;
    }

    .bar.indigo {
        background: #4f46e5;
    }

.footer-brand h4 {
    color: #0f172a;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 2px;
}

.footer-brand p {
    color: #64748b;
    margin-top: 8px;
    letter-spacing: 2px;
    font-size: 13px;
}

/* ==========================
   Tablet
========================== */

@media(max-width:1199px) {

    .circle-wrap {
        width: 170px;
        height: 170px;
    }

    .circle-inner {
        width: 128px;
        height: 128px;
    }

        .circle-inner i {
            font-size: 48px;
        }

    .circle-wrap::after {
        display: none;
    }
}

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

@media(max-width:991px) {

    .section-title {
        font-size: 36px;
    }

    .section-subtitle {
        font-size: 16px;
        margin-bottom: 60px;
    }

    .circle-wrap {
        width: 160px;
        height: 160px;
    }

    .circle-inner {
        width: 120px;
        height: 120px;
    }

        .circle-inner i {
            font-size: 42px;
        }

    .process-card {
        margin-bottom: 40px;
    }

    .circle-wrap::after {
        display: none;
    }
}



.hire-net-section {
        padding:80px 0;
    background: #e2f3ff;
}

.section-badge{
    display:inline-block;
    padding:10px 20px;
    border-radius:50px;
    background:#fff5eb;
    color:#ff7a00;
    font-weight:600;
    margin-bottom:20px;
}

.main-title{
    font-size:52px;
    font-weight:700;
    line-height:1.2;
    color:#0f172a;
}

    .main-title span {
        color: #117ec4;
    }

.main-desc{
    margin-top:20px;
    color:#64748b;
    font-size:18px;
    line-height:1.8;
}

.action-buttons{
    margin-top:35px;
    display:flex;
    gap:15px;
}

.btn-orange {
    background: #117ec4;
    color: white;
    padding: 14px 30px;
    border-radius: 10px;
    text-decoration: none;
    font-weight: 600;
}

.btn-orange:hover{
    background:#ea6f00;
    color:white;
}

.btn-outline-custom {
    border: 2px solid #117ec4;
    color: #117ec4;
    padding: 14px 30px;
    border-radius: 10px;
    text-decoration: none;
    font-weight: 600;
}

.benefits-card {
    background: #117ec4;
    color: white;
    padding: 40px;
    border-radius: 24px;
    box-shadow: 0 20px 50px rgba(255,122,0,.25);
}

.benefits-card h4{
    margin-bottom:25px;
    font-weight:700;
}

.benefits-card ul{
    padding:0;
    margin:0;
    list-style:none;
}

.benefits-card li{
    margin-bottom:15px;
    position:relative;
    padding-left:30px;
}

.benefits-card li::before{
    content:"✓";
    position:absolute;
    left:0;
}




/*NODE JS*/
/* --- SECTION 1: HERO --- */
.nodejs-hero-section {
    background-color: #0d1f0d;
    background-image: radial-gradient(circle at 10% 20%, rgba(83, 158, 67, 0.15) 0%, transparent 40%);
    color: white;
    padding: 150px 0 80px 0;
    position: relative;
}

.nodejs-hero-title {
    font-size: 3rem;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 20px;
    color: #ffffff; /* Ensure white */
}

    .nodejs-hero-title span {
        color: #c0e0b0;
    }

.nodejs-hero-btn {
    background-color: #539e43;
    border: none;
    color: white;
    padding: 10px 25px;
    border-radius: 5px;
    font-weight: 600;
    margin-right: 10px;
    transition: all 0.3s;
}

    .nodejs-hero-btn:hover {
        background-color: #3f7f33;
        transform: translateY(-2px);
        box-shadow: 0 5px 15px rgba(83, 158, 67, 0.3);
    }

.nodejs-hero-btn-outline {
    background: transparent;
    border: 1px solid #539e43;
    color: white;
    padding: 10px 25px;
    border-radius: 5px;
    font-weight: 600;
    transition: all 0.3s;
}

    .nodejs-hero-btn-outline:hover {
        background-color: #539e43;
        color: white;
    }

.nodejs-stats-box {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    padding: 10px 15px;
    border-radius: 5px;
    display: inline-block;
    margin-right: 10px;
    margin-bottom: 10px;
}

    .nodejs-stats-box strong {
        color: #539e43;
    }

/* --- SECTION 2: TECH STACK --- */
.nodejs-tech-section {
    background: white;
    padding: 40px 0;
}

.nodejs-tech-icon {
    font-size: 2rem;
    margin: 0 15px;
    color: #333;
    transition: 0.3s;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

    .nodejs-tech-icon i {
        color: #539e43;
    }

    .nodejs-tech-icon:hover {
        transform: scale(1.1);
        color: #539e43;
    }

/* --- SECTION 3: EXPERTISE (GRID) - FIXED EQUAL HEIGHT --- */
.nodejs-expertise-section {
    background-color: #f8f9fa;
    padding: 80px 0;
}

/* FIX: Make the row use flex and stretch */
.nodejs-expertise-row {
    display: flex;
    flex-wrap: wrap;
}

.nodejs-card-grid {
    background: white;
    border-radius: 10px;
    padding: 25px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    transition: all 0.3s ease;
    height: 100%; /* Stretch to match siblings */
    border-bottom: 3px solid transparent;
    text-align: left;
}

    /* FIX: Heading Visibility */
    .nodejs-card-grid h5 {
        font-size: 1rem;
        font-weight: 700;
        margin-bottom: 10px;
        color: #1a202c !important;
    }

    .nodejs-card-grid p {
        font-size: 0.85rem;
        color: #4a5568 !important;
    }

    .nodejs-card-grid i {
        font-size: 2rem;
        color: #539e43;
        margin-bottom: 15px;
    }

    .nodejs-card-grid:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 30px rgba(0,0,0,0.1);
        border-bottom: 3px solid #539e43;
    }

/* --- SECTION 4: SERVICES --- */
.nodejs-services-section {
    padding: 80px 0;
    background: white;
}

.nodejs-service-item {
    padding: 20px;
    margin-bottom: 15px;
    border-left: 3px solid #539e43;
    transition: all 0.3s;
    border-radius: 4px;
    background-color: #f8f9fa;
}

    .nodejs-service-item:hover {
        background-color: #539e4329;
        border-left: 3px solid #539e43;
        transform: translateX(5px);
    }

    .nodejs-service-item h6 {
        font-weight: 700;
        font-size: 0.9rem;
        color: #1a202c !important;
    }

    .nodejs-service-item p {
        font-size: 0.8rem;
        color: #4a5568 !important;
        margin: 0;
    }

/* --- SECTION 5: BACKEND COMPANY --- */
.nodejs-backend-section {
    background-color: #f8f9fa;
    padding: 80px 0;
}

    .nodejs-backend-section h4 {
        color: #1a202c !important;
    }

    .nodejs-backend-section p {
        color: #4a5568 !important;
    }

.nodejs-feature-list li {
    margin-bottom: 10px;
    font-size: 0.9rem;
    color: #2d3748 !important;
}

.nodejs-feature-list i {
    color: #539e43;
    margin-right: 10px;
}

/* --- SECTION 6: LIFECYCLE - FIXED SINGLE LINE --- */
.nodejs-lifecycle-section {
    padding: 80px 0;
    background: white;
}

/* ============================
 LIFECYCLE ROW (FLEX FLOW)
============================ */

 .process-section {
            background-color: #f9fafb;
/*            padding: 80px 0;*/
        }

        /* --- TIMELINE CONNECTOR LINE --- */
        .timeline-connector {
            position: relative;
            margin-bottom: 40px;
        }
        
        /* The dashed line between items */
        .timeline-connector::after {
            content: '';
            position: absolute;
            top: 30px;
            left: 50%;
            width: 80%;
            height: 2px;
            border-top: 2px dashed #d1d5db;
            transform: translateX(-50%);
            z-index: 1;
        }

        /* --- STEP CIRCLES (Top Row) --- */
        .step-circle-container {
            display: flex;
            justify-content: space-between;
            position: relative;
            z-index: 2;
            margin-bottom: 60px;
        }

        .step-circle {
            background: white;
            padding: 10px;
            border-radius: 50px;
            box-shadow: 0 4px 6px rgba(0,0,0,0.05);
            text-align: center;
            width: 90px;
            transition: all 0.3s ease;
        }
        
        .step-circle-inner {
            background-color: var(--light-green-bg);
            color: var(--primary-green);
            width: 60px;
            height: 60px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.5rem;
            margin: 0 auto;
            transition: 0.3s;
        }

        .step-circle:hover .step-circle-inner {
            background-color: var(--primary-green);
            color: white;
            transform: scale(1.1);
        }
        
        .step-circle p {
            font-size: 0.8rem;
            font-weight: 600;
            margin-top: 8px;
            color: var(--text-dark);
        }

        /* --- DETAILED CARDS (Bottom Content) --- */
        .process-detail-card {
            background: white;
            border-radius: 12px;
            margin-bottom: 25px;
            overflow: hidden;
            display: flex;
            box-shadow: 0 4px 15px rgba(0,0,0,0.05);
            border: 1px solid #e5e7eb;
            transition: 0.3s;
            opacity: 0;
            transform: translateY(20px);
            animation: fadeInUp 0.5s forwards;
        }

        .process-detail-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
        }

        /* Left Icon Sidebar */
        .detail-sidebar {
            background-color: var(--primary-green);
            color: white;
            width: 80px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 2rem;
            flex-shrink: 0;
        }

        /* Content Area */
        .detail-content {
            padding: 25px;
            flex-grow: 1;
        }
        
        .detail-content h4 {
            color: var(--primary-green);
            font-weight: 700;
            margin-bottom: 10px;
            font-size: 1.2rem;
        }
        
        .detail-content p {
            color: #4b5563;
            font-size: 0.95rem;
            margin: 0;
            line-height: 1.6;
        }

        /* Animation */
        @keyframes fadeInUp {
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        /* Delay animations for each card */
        .card-1 { animation-delay: 0.1s; }
        .card-2 { animation-delay: 0.2s; }
        .card-3 { animation-delay: 0.3s; }
        .card-4 { animation-delay: 0.4s; }
        .card-5 { animation-delay: 0.5s; }
        .card-6 { animation-delay: 0.6s; }

        @media (max-width: 768px) {
            .detail-sidebar { width: 60px; font-size: 1.2rem; }
            .step-circle-container { flex-wrap: wrap; justify-content: center; gap: 10px; }
        }


/* ============================
 MAIN CTA WRAPPER
============================ */

.hire-cta-section {
    padding: 90px 5%;
    background: #f6f8fc;
}

/* container */
.hire-cta-container {
    display: flex;
    gap: 30px;
    align-items: stretch;
}

/* ============================
 LEFT GREEN CARD (PREMIUM)
============================ */

.hire-cta-left-card {
    flex: 1;
    background: linear-gradient(135deg, #0b2d16, #0f3a20);
    padding: 40px;
    border-radius: 20px;
    color: #fff;
    position: relative;
    overflow: hidden;
    box-shadow: 0 25px 60px rgba(0,0,0,0.18);
}

    /* glow effect */
    .hire-cta-left-card::before {
        content: "";
        position: absolute;
        top: -80px;
        left: -80px;
        width: 200px;
        height: 200px;
        background: rgba(83, 158, 67, 0.35);
        filter: blur(100px);
    }

/* small text */
.cta-small-text {
    font-size: 12px;
    letter-spacing: 2px;
    opacity: 0.8;
}

/* heading */
.cta-heading {
    font-size: 30px;
    font-weight: 800;
    margin: 15px 0;
    line-height: 1.3;
}

/* paragraph */
.cta-desc {
    font-size: 14px;
    opacity: 0.85;
    line-height: 1.6;
}

/* button */
.cta-btn {
    margin-top: 25px;
    background: #ffffff;
    color: #0b2d16;
    border: none;
    padding: 14px 22px;
    border-radius: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: 0.3s;
}

    .cta-btn:hover {
        transform: translateY(-4px);
        background: #eaffea;
    }

/* ============================
 RIGHT SIDE FEATURES
============================ */

.hire-cta-right {
    flex: 1.2;
    background: #ffffff;
    padding: 35px;
    border-radius: 20px;
    box-shadow: 0 15px 40px rgba(0,0,0,0.08);
}

.right-title {
    font-size: 20px;
    font-weight: 800;
    margin-bottom: 20px;
    color: #111827;
}

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

/* feature card */
.feature-card {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 12px;
    border-radius: 12px;
    transition: 0.3s;
}

    /* hover */
    .feature-card:hover {
        background: #f3fff6;
        transform: translateY(-3px);
    }

    /* icon */
    .feature-card i {
        font-size: 18px;
        color: black;
        margin-top: 3px;
    }

    /* text */
    .feature-card h4 {
        font-size: 14px;
        margin: 0;
        color: #111827;
    }

    .feature-card p {
        font-size: 12px;
        margin: 2px 0 0;
        color: #6b7280;
    }

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

@media (max-width: 992px) {
    .hire-cta-container {
        flex-direction: column;
    }

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

/*====================================
            INDUSTRY
====================================*/
/* ============================
           SECTION 1: HERO
           ============================ */
.industries-hero-section {
    background-color: #0a1a0a;
    background-image: radial-gradient(circle at 80% 50%, rgba(83, 158, 67, 0.15) 0%, transparent 60%);
    color: white;
    padding: 130px 0 80px 0;
    position: relative;
    overflow: hidden;
}

.industries-hero-title {
    font-size: 3.5rem;
    font-weight: 700;
    line-height: 1.1;
    margin-bottom: 20px;
}

    .industries-hero-title span {
        color: #c0e0b0;
    }

.industries-hero-desc {
    font-size: 1.1rem;
    color: #b0c4b0;
    max-width: 600px;
    margin-bottom: 30px;
}

.industries-btn-primary {
    background-color: #539e43;
    border: none;
    color: white;
    padding: 12px 30px;
    border-radius: 5px;
    font-weight: 600;
    transition: 0.3s;
}

    .industries-btn-primary:hover {
        background-color: #3f7f33;
        transform: translateY(-2px);
    }

.industries-btn-outline {
    background: transparent;
    border: 1px solid rgba(255,255,255,0.3);
    color: white;
    padding: 12px 30px;
    border-radius: 5px;
    font-weight: 600;
    transition: 0.3s;
}

    .industries-btn-outline:hover {
        border-color: white;
        background: rgba(255,255,255,0.1);
    }

/* Floating Icons in Hero */
.industries-float-icon {
    position: absolute;
    opacity: 0.1;
    font-size: 4rem;
    color: white;
    pointer-events: none;
}

.float-1 {
    top: 20%;
    right: 15%;
}

.float-2 {
    top: 40%;
    right: 30%;
}

.float-3 {
    bottom: 20%;
    right: 20%;
}

/* ============================
           SECTION 2: INDUSTRIES GRID
           ============================ */
.industries-grid-section {
    padding: 80px 0;
    background: #f8f9fa;
}

.industries-card {
    background: white;
    border-radius: 12px;
    padding: 30px 20px;
    text-align: center;
    transition: all 0.3s ease;
    border: 1px solid #e5e7eb;
    height: 100%;
    position: relative;
    overflow: hidden;
}

    .industries-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 30px rgba(0,0,0,0.08);
        border-color: #539e43;
    }

.industries-icon-circle {
    width: 60px;
    height: 60px;
    background: #e8f5e9;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 15px;
    color: #539e43;
    font-size: 1.5rem;
}

.industries-card h5 {
    font-weight: 700;
    color: var(--industries-text-dark);
    font-size: 1rem;
}

.industries-card p {
    color: #6b7280;
    font-size: 0.85rem;
    margin: 0;
}

.industries-arrow-link {
    display: inline-block;
    margin-top: 10px;
    color: #ffffff;
    /* font-size: 0.8rem; */
    text-decoration: none;
    transition: 0.3s;
    background-color: #539e43;
    border-radius: 50%;
    width: 20px;
    height: 20px;
}

.industries-card:hover .industries-arrow-link {
    transform: translateX(5px);
}

/* ============================
   SECTION 3: DETAIL SIDEBAR & CONTENT
============================ */

.industries-detail-section {
    padding: 40px 0;
    background: #fff;
}

    /* ============================
   LAYOUT
============================ */

    .industries-detail-section .row {
        align-items: flex-start;
    }

/* ============================
   LEFT SIDEBAR
============================ */

.industries-sidebar {
    background: #1a3a1a;
    border-radius: 12px;
    padding: 20px;
    color: #fff;
    height: 520px;
    overflow-y: auto;
    position: sticky;
    top: 100px;
}

    .industries-sidebar::-webkit-scrollbar {
        width: 5px;
    }

    .industries-sidebar::-webkit-scrollbar-thumb {
        background: rgba(255,255,255,0.35);
        border-radius: 10px;
    }

.industries-sidebar-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 15px;
    margin-bottom: 6px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
}

    .industries-sidebar-item:hover {
        background: rgba(255,255,255,0.1);
    }

    .industries-sidebar-item.active {
        background: #539e43;
        font-weight: 600;
    }

    .industries-sidebar-item span {
        color: #fff;
        font-size: 14px;
    }

    .industries-sidebar-item i {
        font-size: 12px;
        opacity: .8;
    }

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

.industries-detail-content-wrapper {
    height: 520px;
    border-radius: 12px;
}

.industries-detail-content {
    height: 100%;
    overflow-y: auto;
    padding-right: 15px;
}

    .industries-detail-content::-webkit-scrollbar {
        width: 6px;
    }

    .industries-detail-content::-webkit-scrollbar-track {
        background: #f3f4f6;
        border-radius: 10px;
    }

    .industries-detail-content::-webkit-scrollbar-thumb {
        background: #539e43;
        border-radius: 10px;
    }

    .industries-detail-content h2 {
        font-weight: 700;
        margin-bottom: 15px;
        color: #111827;
    }

    .industries-detail-content p {
        color: #6b7280;
        line-height: 1.8;
    }

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

.industries-solution-item {
    display: flex;
    align-items: flex-start;
    margin-bottom: 14px;
}

    .industries-solution-item i {
        color: #539e43;
        margin-right: 12px;
        margin-top: 4px;
        flex-shrink: 0;
    }

    .industries-solution-item span {
        color: #4b5563;
        line-height: 1.6;
    }

/* ============================
   RIGHT PROJECTS
============================ */

#featuredProjects {
    height: 520px;
    overflow-y: auto;
    padding-right: 5px;
}

    #featuredProjects::-webkit-scrollbar {
        width: 6px;
    }

    #featuredProjects::-webkit-scrollbar-thumb {
        background: #539e43;
        border-radius: 10px;
    }

.industries-featured-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 15px;
    transition: all .3s ease;
}

    .industries-featured-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 10px 20px rgba(0,0,0,.08);
    }

    .industries-featured-card h6 {
        font-weight: 700;
        color: #111827;
        margin-bottom: 10px;
    }

    .industries-featured-card p {
        color: #6b7280;
        line-height: 1.6;
        font-size: 14px;
        margin-bottom: 0;
    }

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

.industries-btn-green-outline {
    border: 1px solid #539e43;
    color: #539e43;
    background: transparent;
    padding: 8px 20px;
    border-radius: 6px;
    text-decoration: none;
    display: inline-block;
    transition: .3s;
}

    .industries-btn-green-outline:hover {
        background: #539e43;
        color: #fff;
    }

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

@media (max-width: 991px) {

    .industries-sidebar,
    .industries-detail-content-wrapper,
    #featuredProjects {
        height: auto;
        max-height: none;
        overflow: visible;
    }

    .industries-sidebar {
        position: static;
        margin-bottom: 25px;
    }

    .industries-detail-content {
        overflow: visible;
        height: auto;
        padding-right: 0;
    }
}
/* ============================
           SECTION 4: TECHNOLOGIES
           ============================ */
.tech-section-wrapper {
    background-color: #ffffff;
    padding: 60px 0 40px 0;
    border-bottom: 1px solid #e5e7eb;
}

.tech-header {
    text-align: center;
    margin-bottom: 40px;
}

    .tech-header h6 {
        color: var(--tech-green);
        font-weight: 700;
        text-transform: uppercase;
        font-size: 0.85rem;
        letter-spacing: 1px;
        margin-bottom: 5px;
    }

    .tech-header h2 {
        font-weight: 700;
        color: #1a202c;
        font-size: 1.8rem;
    }

/* --- Technology Cards --- */
.tech-card-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
}

.tech-card {
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    width: 120px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    box-shadow: 0 2px 5px rgba(0,0,0,0.03);
    text-decoration: none;
    color: #1a202c;
    font-weight: 600;
    font-size: 0.9rem;
}

    .tech-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 8px 20px rgba(0,0,0,0.08);
        border-color: var(--tech-green);
    }

/* Individual Technology Classes */
.tech-net {
    color: #5C2D91;
}

.tech-angular {
    color: #DD0031;
}

.tech-react {
    color: #61DAFB;
}

.tech-node {
    color: #539e43;
}

.tech-sql {
    color: #CC2927;
}

.tech-aws {
    color: #FF9900;
}

.tech-azure {
    color: #0078D4;
}

.tech-docker {
    color: #2496ED;
}

.tech-card i, .tech-card svg {
    font-size: 1.8rem;
    margin-right: 5px;
}

/* =========================================
           SECTION 2: CTA (DARK GREEN)
           ========================================= */
.cta-section-wrapper {
    background-color: var(--tech-dark-green);
    padding: 50px 0;
}

.cta-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 20px;
}

/* Left Side */
.cta-left {
    display: flex;
    align-items: center;
    gap: 20px;
}

.cta-icon-circle {
    background-color: var(--tech-green);
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.5rem;
    flex-shrink: 0;
}

.cta-text h3 {
    color: white;
    font-weight: 700;
    font-size: 1.5rem;
    margin-bottom: 2px;
}

.cta-text p {
    color: #b0c4b0;
    margin: 0;
    font-size: 0.95rem;
}

/* Right Side */
.cta-btn {
    background-color: var(--tech-green);
    color: white;
    border: none;
    padding: 12px 30px;
    border-radius: 5px;
    font-weight: 600;
    font-size: 1rem;
    transition: all 0.3s ease;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

    .cta-btn:hover {
        background-color: #3f7f33;
        color: white;
        transform: translateY(-2px);
        box-shadow: 0 5px 15px rgba(83, 158, 67, 0.3);
    }

/* =========================================
           RESPONSIVE
           ========================================= */
@media (max-width: 768px) {
    .cta-container {
        flex-direction: column;
        text-align: center;
    }

    .cta-left {
        flex-direction: column;
        text-align: center;
    }

    .cta-btn {
        width: 100%;
        justify-content: center;
    }

    .tech-card {
        width: 100px;
        height: 70px;
        font-size: 0.8rem;
    }
}

/*===========salse force============*/
/* ==========================================
   SALESFORCE HERO - PREMIUM ENTERPRISE STYLE
========================================== */

.salesforce-hero {
    position: relative;
    min-height: 100vh;
    overflow: hidden;
    display: flex;
    align-items: center;
    color: #fff;
    padding: 120px 0;
    background: radial-gradient(circle at 85% 15%, rgba(0,161,224,.15), transparent 25%), radial-gradient(circle at 15% 85%, rgba(0,118,211,.12), transparent 30%), linear-gradient( 135deg, #020817 0%, #07101f 25%, #0b1730 55%, #102447 100% );
}

    .salesforce-hero::before {
        content: "";
        position: absolute;
        width: 750px;
        height: 750px;
        top: -350px;
        right: -250px;
        border-radius: 50%;
        background: rgba(0,161,224,.12);
        filter: blur(120px);
    }

    .salesforce-hero::after {
        content: "";
        position: absolute;
        width: 600px;
        height: 600px;
        left: -250px;
        bottom: -250px;
        border-radius: 50%;
        background: rgba(1,118,211,.10);
        filter: blur(120px);
    }

.container {
    width: 90%;
    max-width: 1350px;
    margin: auto;
    position: relative;
    z-index: 5;
}

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

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

.salesforce-hero-left {
    flex: 1;
}

.salesforce-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 24px;
    border-radius: 100px;
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.12);
    backdrop-filter: blur(18px);
    color: #8fd3ff;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 32px;
}

.salesforce-hero-left h1 {
    font-size: 78px;
    line-height: 1.02;
    font-weight: 800;
    letter-spacing: -3px;
    margin-bottom: 28px;
}

    .salesforce-hero-left h1 span {
        display: block;
        background: linear-gradient( 90deg, #4fc3ff, #8be1ff, #ffffff );
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }

.salesforce-hero-left p {
    max-width: 650px;
    font-size: 19px;
    line-height: 1.9;
    color: rgba(255,255,255,.72);
    margin-bottom: 10px;
}

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

.salesforce-hero-buttons {
    display: flex;
    gap: 18px;
    margin-top: 40px;
}

.salesforce-btn-primary,
.salesforce-btn-secondary {
    padding: 16px 34px;
    border-radius: 60px;
    text-decoration: none;
    font-weight: 600;
    transition: all .35s ease;
}

.salesforce-btn-primary {
    color: white;
    background: linear-gradient( 135deg, #0184ff, #00b4ff );
    box-shadow: 0 10px 35px rgba(0,161,224,.30);
}

    .salesforce-btn-primary:hover {
        transform: translateY(-5px);
        box-shadow: 0 20px 45px rgba(0,161,224,.40);
    }

.salesforce-btn-secondary {
    color: white;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.14);
    backdrop-filter: blur(12px);
}

    .salesforce-btn-secondary:hover {
        transform: translateY(-5px);
        background: rgba(255,255,255,.08);
    }

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

.salesforce-stats {
    display: flex;
    gap: 20px;
    margin-top: 60px;
    flex-wrap: wrap;
}

.stat-box {
    min-width: 170px;
    padding: 24px;
    border-radius: 24px;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.08);
    backdrop-filter: blur(20px);
    transition: .3s ease;
}

    .stat-box:hover {
        transform: translateY(-6px);
        background: rgba(255,255,255,.07);
    }

    .stat-box h3 {
        font-size: 36px;
        margin-bottom: 8px;
        color: #63cbff;
    }

    .stat-box span {
        color: rgba(255,255,255,.70);
        font-size: 14px;
    }

/* ==========================================
   RIGHT SIDE
========================================== */

.salesforce-hero-right {
    flex: 1;
    display: flex;
    justify-content: center;
    position: relative;
}

.crm-card {
    width: 500px;
    padding: 35px;
    border-radius: 32px;
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.08);
    backdrop-filter: blur(25px);
    box-shadow: 0 40px 100px rgba(0,0,0,.45);
    position: relative;
    animation: floatCard 6s ease-in-out infinite;
}

@keyframes floatCard {
    0%,100% {
        transform: translateY(0px);
    }

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

.crm-card::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 32px;
    padding: 1px;
    background: linear-gradient( 135deg, rgba(255,255,255,.18), transparent );
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
}

.crm-header {
    display: flex;
    gap: 10px;
    margin-bottom: 30px;
}

.dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
}

    .dot:nth-child(1) {
        background: #ff5f57;
    }

    .dot:nth-child(2) {
        background: #febc2e;
    }

    .dot:nth-child(3) {
        background: #28c840;
    }

.crm-card h3 {
    font-size: 28px;
    margin-bottom: 30px;
    color: white;
}

.crm-progress {
    margin-bottom: 25px;
}

    .crm-progress span {
        display: block;
        margin-bottom: 10px;
        color: rgba(255,255,255,.82);
    }

.progress-bar {
    height: 12px;
    background: rgba(255,255,255,.08);
    border-radius: 50px;
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    border-radius: 50px;
}

.fill1 {
    width: 85%;
    background: linear-gradient(90deg,#00b4ff,#63cbff);
}

.fill2 {
    width: 75%;
    background: linear-gradient(90deg,#39ef8f,#0abf53);
}

.fill3 {
    width: 92%;
    background: linear-gradient(90deg,#ff9966,#ff5e62);
}

/* ==========================================
   REVENUE CIRCLE
========================================== */

.sales-circle {
    width: 180px;
    height: 180px;
    margin: 45px auto 0;
    border-radius: 50%;
    background: linear-gradient( 135deg, #0184ff, #00b4ff );
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    box-shadow: 0 20px 50px rgba(0,161,224,.35);
}

    .sales-circle h2 {
        font-size: 52px;
        margin-bottom: 5px;
    }

    .sales-circle span {
        font-size: 14px;
        opacity: .95;
    }

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

@media(max-width:991px) {

    .salesforce-hero {
        min-height: auto;
        padding: 135px 0;
    }

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

    .salesforce-hero-left h1 {
        font-size: 58px;
    }

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

    .salesforce-stats {
        justify-content: center;
    }
}

@media(max-width:576px) {

    .salesforce-hero-left h1 {
        font-size: 42px;
        letter-spacing: -1px;
    }

    .salesforce-hero-left p {
        font-size: 16px;
    }

    .crm-card {
        width: 100%;
        padding: 25px;
    }

    .sales-circle {
        width: 140px;
        height: 140px;
    }

        .sales-circle h2 {
            font-size: 40px;
        }
}

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

.salesforce-why-section {
    padding: 80px 0;
    background: linear-gradient( 180deg, #ffffff, #f7fbff );
}

.why-wrapper {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 70px;
    align-items: center;
}
/* ==========================
   SECTION TAG
========================== */

.section-tag {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 20px;
    background: rgba(1, 118, 211, 0.08);
    border: 1px solid rgba(1, 118, 211, 0.15);
    border-radius: 50px;
    color: #0176d3;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 24px;
}

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

.section-title {
    font-size: 52px;
    line-height: 1.15;
    font-weight: 800;
    color: #081427;
    margin-bottom: 24px;
    letter-spacing: -1.5px;
/*    max-width: 700px;*/
}

    /* Optional Gradient Highlight */

    .section-title span {
        background: linear-gradient( 90deg, #0176d3, #00a1e0 );
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }

/* ==========================
   DESCRIPTION
========================== */

.section-description {
    font-size: 18px;
    line-height: 1.9;
    color: #667085;
    max-width: 650px;
    margin-bottom: 35px;
}

/* =====================
   LEFT SIDE
===================== */

.section-tag {
    display: inline-block;
    padding: 10px 18px;
    border-radius: 50px;
    background: rgba(1,118,211,.08);
    color: #0176d3;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1px;
    margin-bottom: 25px;
}

.why-content h2 {
    font-size: 52px;
    line-height: 1.15;
    color: #081427;
    margin-bottom: 25px;
    font-weight: 800;
}

.why-content p {
    font-size: 18px;
    line-height: 1.9;
    color: #667085;
    margin-bottom: 35px;
}

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

.why-point {
    display: flex;
    align-items: center;
    gap: 12px;
}

    .why-point i {
        color: #0176d3;
        font-size: 18px;
    }

    .why-point span {
        font-weight: 600;
        color: #0b1e3d;
    }

/* =====================
   RIGHT SIDE
===================== */

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

.benefit-card {
    background: #fff;
    border-radius: 28px;
    padding: 35px;
    border: 1px solid #edf2f7;
    min-height: 260px;
    transition: .4s ease;
    position: relative;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,.04);
}

    .benefit-card::before {
        content: "";
        position: absolute;
        width: 220px;
        height: 220px;
        right: -120px;
        top: -120px;
        border-radius: 50%;
        background: rgba(1,118,211,.05);
        transition: .4s;
    }

    .benefit-card:hover {
        transform: translateY(-10px);
        box-shadow: 0 25px 60px rgba(1,118,211,.12);
    }

        .benefit-card:hover::before {
            transform: scale(1.2);
        }

.icon-box {
    width: 70px;
    height: 70px;
    border-radius: 20px;
    background: linear-gradient( 135deg, #0176d3, #00a1e0 );
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 25px;
}

    .icon-box i {
        color: white;
        font-size: 28px;
    }

.benefit-card h3 {
    font-size: 24px;
    margin-bottom: 15px;
    color: #081427;
    font-weight: 700;
}

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

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

@media(max-width:1100px) {

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

@media(max-width:768px) {

    .salesforce-why-section {
        padding: 80px 0;
    }

    .why-content h2 {
        font-size: 36px;
    }

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

    .why-points {
        grid-template-columns: 1fr;
    }
}

@media(max-width:576px) {

    .why-content h2 {
        font-size: 30px;
    }

    .why-content p {
        font-size: 16px;
    }

    .benefit-card {
        padding: 28px;
        min-height: auto;
    }
}
/* ==========================
   SALESFORCE SERVICES
========================== */
/* =====================================
   SALESFORCE SERVICES SECTION
===================================== */

.salesforce-services {
    padding: 100px 0;
    background: linear-gradient(180deg, #f5f9ff, #ffffff);
}

/* HEADER */
.services-header {
    text-align: center;
    max-width: 750px;
    margin: 0 auto 60px;
}

    .services-header .badge {
        display: inline-block;
        padding: 8px 18px;
        border-radius: 30px;
        background: rgba(0, 112, 210, 0.1);
        color: #0070d2;
        font-size: 12px;
        font-weight: 700;
        letter-spacing: 1px;
        margin-bottom: 15px;
    }

    .services-header h2 {
        font-size: 42px;
        font-weight: 800;
        color: #0b1f33;
        margin-bottom: 15px;
    }

        .services-header h2 span {
            background: linear-gradient(90deg, #0070d2, #00bcd4);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

    .services-header p {
        color: #6b7a90;
        font-size: 17px;
        line-height: 1.7;
    }

/* GRID */
.services-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
}

/* CARD */
.service-box {
    background: #ffffff;
    border-radius: 18px;
    padding: 30px;
    border: 1px solid #eef2f7;
    box-shadow: 0 10px 25px rgba(0,0,0,0.04);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

    /* Hover glow effect */
    .service-box::before {
        content: "";
        position: absolute;
        width: 180px;
        height: 180px;
        background: radial-gradient(circle, rgba(0,112,210,0.12), transparent 70%);
        top: -60px;
        right: -60px;
        transition: 0.4s;
    }

    .service-box:hover {
        transform: translateY(-8px);
        box-shadow: 0 20px 45px rgba(0,112,210,0.15);
    }

        .service-box:hover::before {
            transform: scale(1.3);
        }

/* ICON */
.icon {
    width: 55px;
    height: 55px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: linear-gradient(135deg, #0070d2, #00bcd4);
    color: white;
    font-size: 22px;
    margin-bottom: 18px;
}

/* TEXT */
.service-box h3 {
    font-size: 20px;
    font-weight: 700;
    color: #0b1f33;
    margin-bottom: 10px;
}

.service-box p {
    font-size: 15px;
    color: #6b7a90;
    line-height: 1.6;
}

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

    .services-header h2 {
        font-size: 34px;
    }
}

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

    .services-header h2 {
        font-size: 28px;
    }
}
/* ==========================
   SALESFORCE CLOUDS SECTION
========================== */

.salesforce-clouds-section {
    padding: 110px 0;
    background: linear-gradient(135deg, #f6f9ff, #ffffff);
}

/* =========================
   HEADER (MODERN SPLIT)
========================= */

.clouds-header {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 40px;
    align-items: center;
    margin-bottom: 70px;
}

/* BADGE */
.header-left .badge {
    display: inline-block;
    padding: 8px 18px;
    border-radius: 50px;
    background: rgba(255, 140, 0, 0.08);
    color: #ff6a00;
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 1px;
    margin-bottom: 18px;
}

/* MAIN HEADING */
.header-left h2 {
    font-size: 46px;
    font-weight: 900;
    color: #0b1e3d;
    line-height: 1.2;
    margin-bottom: 15px;
}

/* MANUAL COLOR ACCENT (IMPORTANT) */
.header-left h2 span {
    background: linear-gradient(90deg, #ff6a00, #ffb300);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* DESCRIPTION */
.header-left p {
    font-size: 17px;
    color: #6b7a90;
    line-height: 1.8;
    max-width: 520px;
}

/* RIGHT INFO CARD */
.header-right .info-card {
    background: linear-gradient(135deg, #0072ff, #00c6ff);
    padding: 28px;
    border-radius: 18px;
    color: #fff;
    position: relative;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(0,114,255,0.25);
}

/* FLOAT EFFECT */
.header-right .info-card::before {
    content: "";
    position: absolute;
    width: 180px;
    height: 180px;
    background: rgba(255,255,255,0.15);
    border-radius: 50%;
    top: -60px;
    right: -60px;
}

.header-right h4 {
    font-size: 18px;
    margin-bottom: 10px;
}

.header-right p {
    font-size: 14px;
    opacity: 0.9;
    line-height: 1.6;
}

/* STATS */
.mini-stats {
    display: flex;
    justify-content: space-between;
    margin-top: 18px;
    font-size: 13px;
}

.mini-stats span {
    display: block;
    font-size: 20px;
    font-weight: 800;
}

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

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

/* =========================
   CARDS (GLASS STYLE)
========================= */

.cloud-card {
    position: relative;
    padding: 28px;
    border-radius: 18px;
    background: rgba(255,255,255,0.75);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(0,0,0,0.06);
    transition: all 0.35s ease;
    overflow: hidden;
}

/* LEFT BAR */
.cloud-card .accent {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
}

/* ICON */
.cloud-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    margin-bottom: 14px;
    color: #fff;
}

/* TITLE (MANUAL COLORS PER CARD TYPE) */
.cloud-card h3 {
    font-size: 20px;
    font-weight: 800;
    margin-bottom: 8px;
    color: #0b1e3d;
}

/* DESCRIPTION */
.cloud-card p {
    font-size: 14px;
    color: #6b7a90;
    line-height: 1.6;
}

/* HOVER */
.cloud-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 25px 60px rgba(0,0,0,0.12);
}

/* =========================
   MANUAL COLOR THEMES
========================= */

.cloud-card.sales .accent,
.cloud-card.sales .cloud-icon {
    background: #0072ff;
}

.cloud-card.service .accent,
.cloud-card.service .cloud-icon {
    background: #00c6ff;
}

.cloud-card.marketing .accent,
.cloud-card.marketing .cloud-icon {
    background: #ff4d6d;
}

.cloud-card.experience .accent,
.cloud-card.experience .cloud-icon {
    background: #7c4dff;
}

.cloud-card.commerce .accent,
.cloud-card.commerce .cloud-icon {
    background: #ffb300;
}

.cloud-card.field .accent,
.cloud-card.field .cloud-icon {
    background: #2ed573;
}

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

@media (max-width: 992px) {
    .clouds-header {
        grid-template-columns: 1fr;
    }

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

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

    .header-left h2 {
        font-size: 30px;
    }
}
/* ==========================
   SALESFORCE TECHNOLOGIES
========================== */


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

.salesforce-process-section {
    padding: 110px 0;
    background: linear-gradient(180deg, #f8fbff, #eef6ff);
    color: #0b1e3d; /* FIX: ensures heading visibility */
}

/* ===== SECTION HEADING FIX ===== */
.section-heading span {
    color: #0176d3;
    font-weight: 700;
    letter-spacing: 1px;
}

.section-heading h2 {
    color: #0b1e3d;
    font-size: 38px;
    font-weight: 800;
    margin-top: 10px;
}

.section-heading p {
    color: #4a5a70;
    max-width: 750px;
    margin: auto;
}

/* ===== TIMELINE ===== */
.process-timeline {
    max-width: 950px;
    margin: 70px auto 0;
    position: relative;
}

    /* Animated line */
    .process-timeline::before {
        content: "";
        position: absolute;
        left: 35px;
        top: 0;
        width: 4px;
        height: 100%;
        background: linear-gradient(#0176d3, #00a1e0);
        animation: lineGrow 1.5s ease-out forwards;
        transform-origin: top;
    }

/* LINE ANIMATION */
@keyframes lineGrow {
    from {
        transform: scaleY(0);
    }

    to {
        transform: scaleY(1);
    }
}

/* ===== STEP ===== */
.process-step {
    display: flex;
    gap: 30px;
    margin-bottom: 45px;
    position: relative;
    opacity: 0;
    transform: translateY(40px);
    animation: fadeUp 0.8s ease forwards;
}

    /* stagger animation */
    .process-step:nth-child(1) {
        animation-delay: 0.1s;
    }

    .process-step:nth-child(2) {
        animation-delay: 0.2s;
    }

    .process-step:nth-child(3) {
        animation-delay: 0.3s;
    }

    .process-step:nth-child(4) {
        animation-delay: 0.4s;
    }

    .process-step:nth-child(5) {
        animation-delay: 0.5s;
    }

    .process-step:nth-child(6) {
        animation-delay: 0.6s;
    }

    .process-step:nth-child(7) {
        animation-delay: 0.7s;
    }

@keyframes fadeUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ===== NUMBER ===== */
.process-number {
    min-width: 70px;
    height: 70px;
    border-radius: 50%;
    background: linear-gradient(135deg, #0176d3, #00a1e0);
    color: #fff;
    font-size: 24px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    box-shadow: 0 10px 25px rgba(1,118,211,.25);
    transition: 0.3s ease;
}

/* pulse effect */
.process-step:hover .process-number {
    transform: scale(1.1);
    box-shadow: 0 15px 35px rgba(1,118,211,.35);
}

/* ===== CONTENT ===== */
.process-content {
    background: #fff;
    padding: 30px;
    border-radius: 20px;
    flex: 1;
    border: 1px solid #e8eef7;
    box-shadow: 0 10px 30px rgba(0,0,0,.04);
    transition: 0.3s ease;
    position: relative;
    overflow: hidden;
}

    /* subtle shine effect */
    .process-content::before {
        content: "";
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient( 120deg, transparent, rgba(1,118,211,0.08), transparent );
        transition: 0.6s;
    }

    .process-content:hover::before {
        left: 100%;
    }

    .process-content:hover {
        transform: translateY(-6px);
        box-shadow: 0 25px 50px rgba(1,118,211,.12);
    }

    .process-content h3 {
        font-size: 24px;
        color: #0b1e3d;
        margin-bottom: 12px;
        font-weight: 700;
    }

    .process-content p {
        color: #4a5a70;
        line-height: 1.8;
        font-size: 15px;
    }

/* ===== RESPONSIVE ===== */
@media(max-width:768px) {

    .salesforce-process-section {
        padding: 80px 0;
    }

    .process-timeline::before {
        left: 25px;
    }

    .process-number {
        min-width: 50px;
        height: 50px;
        font-size: 18px;
    }

    .process-content {
        padding: 20px;
    }

        .process-content h3 {
            font-size: 20px;
        }
}
/* ==========================
   INDUSTRIES SECTION
========================== */

.salesforce-industries-section {
    padding: 110px 0;
    background: #ffffff;
}

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

.modern-heading {
    max-width: 1100px;
    margin: 0 auto 70px;
}

/* TOP BADGE */
.heading-top {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
}

.modern-heading .badge {
    padding: 8px 16px;
    font-size: 12px;
    letter-spacing: 2px;
    text-transform: uppercase;
    background: rgba(1,118,211,0.08);
    color: #0176d3;
    border-radius: 50px;
    font-weight: 600;
}

/* MAIN LAYOUT */
.heading-main {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 60px;
}

/* LEFT TITLE */
.heading-left {
    flex: 1;
}

    .heading-left h2 {
        font-size: 44px;
        font-weight: 800;
        color: #0b1e3d;
        line-height: 1.2;
        margin: 0;
    }

        .heading-left h2 span {
            background: linear-gradient(135deg, #0176d3, #00a1e0);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

/* RIGHT TEXT */
.heading-right {
    flex: 1;
}

    .heading-right p {
        font-size: 16px;
        color: #6b7280;
        line-height: 1.8;
        margin: 0;
        max-width: 520px;
    }

/* BOTTOM LINE */
.heading-line {
    width: 100px;
    height: 4px;
    margin: 30px auto 0;
    border-radius: 50px;
    background: linear-gradient(90deg, #0176d3, #00a1e0);
}

/* RESPONSIVE */
@media (max-width: 991px) {
    .heading-main {
        flex-direction: column;
        text-align: center;
        gap: 20px;
    }

    .heading-right p {
        max-width: 100%;
    }

    .heading-left h2 {
        font-size: 34px;
    }
}
.industry-solns {
    padding: 40px 0;
    background: #fff;
}

.industry-solns-header {
    max-width: 750px;
    margin: auto;
    margin-bottom: 50px;
}

.industry-solns-subtitle {
    color: #16a34a;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 13px;
}

.industry-solns-title {
    font-size: 40px;
    font-weight: 700;
    color: #0f172a;
    margin-top: 10px;
}

.industry-solns-desc {
    color: #64748b;
    font-size: 16px;
}

.industry-process-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex-wrap: nowrap;
}

.industry-solns-card {
    flex: 1;
    min-width: 210px;
    max-width: 240px;
    background: #fff;
    border: 1px solid #d1fae5;
    border-radius: 18px;
    padding: 30px 20px;
    text-align: center;
    transition: all .3s ease;
}

    .industry-solns-card:hover {
        transform: translateY(-6px);
        border-color: #22c55e;
        box-shadow: 0 15px 35px rgba(34,197,94,.12);
    }

.industry-solns-icon {
    width: 65px;
    height: 65px;
    border-radius: 50%;
    background: #ecfdf5;
    color: #16a34a;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: auto;
    margin-bottom: 18px;
    font-size: 24px;
}

.industry-solns-card h5 {
    font-size: 22px;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 12px;
}

.industry-solns-card p {
    color: #64748b;
    font-size: 15px;
    line-height: 1.6;
}

.process-arrow {
    color: #22c55e;
    font-size: 22px;
    font-weight: 700;
}

@media(max-width:992px) {

    .industry-process-wrapper {
        flex-wrap: wrap;
    }

    .process-arrow {
        display: none;
    }

    .industry-solns-card {
        max-width: 100%;
    }
}

/* ==================================
   INDUSTRY PROCESS - MODERN VERSION
================================== */

.industry-process {
    padding: 40px 0;
    background: linear-gradient( 180deg, #ffffff 0%, #f8fffa 100% );
    position: relative;
    overflow: hidden;
}

    /* Background Effect */

    .industry-process::before {
        content: "";
        position: absolute;
        width: 500px;
        height: 500px;
        background: radial-gradient( rgba(34,197,94,0.08), transparent 70% );
        top: -150px;
        left: -150px;
        border-radius: 50%;
    }

    .industry-process::after {
        content: "";
        position: absolute;
        width: 450px;
        height: 450px;
        background: radial-gradient( rgba(16,185,129,0.06), transparent 70% );
        bottom: -150px;
        right: -150px;
        border-radius: 50%;
    }

/* Header */

.industry-process-subtitle {
    display: inline-block;
    font-size: 13px;
    font-weight: 700;
    color: #16a34a;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.industry-process-title {
    font-size: 48px;
    font-weight: 800;
    color: #0f172a;
    margin-bottom: 12px;
    line-height: 1.2;
}

.industry-process-desc {
    max-width: 650px;
    margin: auto;
    font-size: 16px;
    color: #64748b;
    line-height: 1.8;
}

/* Process Row */

.industry-process-wrapper {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    margin-top: 70px;
    position: relative;
    z-index: 2;
}

/* Step */

.industry-process-step {
    width: 170px;
    text-align: center;
    position: relative;
    transition: all .35s ease;
}

    .industry-process-step:hover {
        transform: translateY(-8px);
    }

/* Circle */

.industry-process-icon {
    width: 82px;
    height: 82px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: auto;
    font-size: 28px;
    position: relative;
    z-index: 5;
    transition: all .35s ease;
}

    .industry-process-icon::before {
        content: "";
        position: absolute;
        inset: -6px;
        border-radius: 50%;
        opacity: 0;
        transition: .3s;
    }

.industry-process-step:hover .industry-process-icon::before {
    opacity: 1;
}

.industry-process-step:hover .industry-process-icon {
    transform: scale(1.08);
}

/* Icons */

.industry-process-icon i {
    font-size: 26px;
}

/* Headings */

.industry-process-step h5 {
    margin-top: 22px;
    font-size: 20px;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 10px;
}

.industry-process-step p {
    font-size: 14px;
    line-height: 1.7;
    color: #64748b;
    margin-bottom: 0;
    padding: 0 8px;
}

/* Connector */

.industry-process-line {
    width: 100px;
    height: 2px;
    margin-top: 40px;
    border-top: 2px dashed;
    position: relative;
    opacity: .8;
}

    .industry-process-line::before {
        content: "";
        position: absolute;
        top: -2px;
        left: 0;
        width: 30%;
        height: 2px;
        background: currentColor;
        animation: processMove 2s linear infinite;
    }

@keyframes processMove {
    from {
        left: 0;
    }

    to {
        left: 70%;
    }
}

/* ==================================
   COLORS
================================== */

.industry-process-icon.blue {
    background: #eefbf3;
    color: #16a34a;
    box-shadow: 0 15px 35px rgba(34,197,94,.15);
}

    .industry-process-icon.blue::before {
        border: 2px solid rgba(34,197,94,.2);
    }

.industry-process-line.blue {
    border-color: #86efac;
    color: #22c55e;
}

/* Light Green */

.industry-process-icon.green {
    background: #ecfdf5;
    color: #10b981;
    box-shadow: 0 15px 35px rgba(16,185,129,.15);
}

    .industry-process-icon.green::before {
        border: 2px solid rgba(16,185,129,.2);
    }

.industry-process-line.green {
    border-color: #6ee7b7;
    color: #10b981;
}

/* Lime */

.industry-process-icon.yellow {
    background: #f7fee7;
    color: #65a30d;
    box-shadow: 0 15px 35px rgba(132,204,22,.15);
}

    .industry-process-icon.yellow::before {
        border: 2px solid rgba(132,204,22,.2);
    }

.industry-process-line.yellow {
    border-color: #bef264;
    color: #84cc16;
}

/* Emerald */

.industry-process-icon.red {
    background: #dcfce7;
    color: #15803d;
    box-shadow: 0 15px 35px rgba(22,163,74,.18);
}

    .industry-process-icon.red::before {
        border: 2px solid rgba(22,163,74,.2);
    }

.industry-process-line.red {
    border-color: #86efac;
    color: #16a34a;
}

/* Teal */

.industry-process-icon.purple {
    background: #ccfbf1;
    color: #0f766e;
    box-shadow: 0 15px 35px rgba(13,148,136,.15);
}

    .industry-process-icon.purple::before {
        border: 2px solid rgba(13,148,136,.2);
    }

.industry-process-line.purple {
    border-color: #5eead4;
    color: #14b8a6;
}

/* Forest */

.industry-process-icon.indigo {
    background: #d9f99d;
    color: #3f6212;
    box-shadow: 0 15px 35px rgba(101,163,13,.15);
}

    .industry-process-icon.indigo::before {
        border: 2px solid rgba(101,163,13,.2);
    }

.industry-process-line.indigo {
    border-color: #a3e635;
    color: #65a30d;
}

/* Mint */

.industry-process-icon.cyan {
    background: #ecfdf5;
    color: #047857;
    box-shadow: 0 15px 35px rgba(5,150,105,.15);
}

    .industry-process-icon.cyan::before {
        border: 2px solid rgba(5,150,105,.2);
    }

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

@media (max-width:1200px) {

    .industry-process-wrapper {
        flex-wrap: wrap;
        gap: 40px;
    }

    .industry-process-line {
        display: none;
    }

    .industry-process-step {
        width: calc(25% - 30px);
    }
}

@media (max-width:768px) {

    .industry-process {
        padding: 70px 0;
    }

    .industry-process-title {
        font-size: 34px;
    }

    .industry-process-step {
        width: calc(50% - 20px);
    }
}

@media (max-width:576px) {

    .industry-process-step {
        width: 100%;
    }

    .industry-process-icon {
        width: 72px;
        height: 72px;
    }
}

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

.salesforce-choose-section {
    padding: 110px 0;
    background: #f5f9ff;
}

/* MAIN WRAPPER */
.choose-wrapper {
    display: grid;
    grid-template-columns: 1.1fr 1.3fr;
    gap: 60px;
    align-items: start;
}

/* =========================
   LEFT SIDE (Heading)
========================= */

.choose-left {
    position: sticky;
    top: 100px;
}

.services-header .badge {
    display: inline-block;
    background: rgba(1,118,211,0.1);
    color: #0176d3;
    padding: 8px 14px;
    border-radius: 30px;
    font-weight: 600;
    font-size: 13px;
    margin-bottom: 15px;
}

.services-header h2 {
    font-size: 38px;
    line-height: 1.2;
    color: #0b1e3d;
    margin-bottom: 15px;
}

.services-header p {
    color: #5b6b7a;
    line-height: 1.8;
    font-size: 16px;
    max-width: 500px;
}

/* =========================
   RIGHT SIDE (Colored Panel)
========================= */

.choose-right {
    background: linear-gradient(135deg, #0176d3, #00a1e0);
    padding: 35px;
    border-radius: 28px;
    display: flex;
    flex-direction: column;
    gap: 18px;
    box-shadow: 0 20px 60px rgba(1,118,211,0.25);
    position: relative;
    overflow: hidden;
}

    /* subtle glow effect */
    .choose-right::before {
        content: "";
        position: absolute;
        width: 300px;
        height: 300px;
        background: rgba(255,255,255,0.15);
        border-radius: 50%;
        top: -80px;
        right: -80px;
        filter: blur(30px);
    }

/* =========================
   WHITE CARDS INSIDE RIGHT
========================= */

.choose-item {
    display: flex;
    gap: 18px;
    background: #ffffff;
    padding: 22px 20px;
    border-radius: 18px;
    transition: 0.3s ease;
    position: relative;
    z-index: 1;
}

    .choose-item:hover {
        transform: translateY(-6px);
        box-shadow: 0 15px 35px rgba(0,0,0,0.15);
    }

    /* ICON */
    .choose-item i {
        width: 55px;
        height: 55px;
        min-width: 55px;
        border-radius: 14px;
        background: linear-gradient(135deg, #0176d3, #00a1e0);
        color: white;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 20px;
    }

    /* TEXT */
    .choose-item h3 {
        font-size: 18px;
        margin-bottom: 6px;
        color: #0b1e3d;
    }

    .choose-item p {
        color: #6b7a8c;
        line-height: 1.6;
        font-size: 14px;
    }

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

@media(max-width: 991px) {

    .choose-wrapper {
        grid-template-columns: 1fr;
    }

    .choose-left {
        position: relative;
        top: auto;
        text-align: center;
    }

    .services-header p {
        margin: 0 auto;
    }
}

@media(max-width: 768px) {

    .salesforce-choose-section {
        padding: 80px 0;
    }

    .choose-right {
        padding: 25px;
    }

    .choose-item {
        flex-direction: column;
        text-align: center;
    }

        .choose-item i {
            margin: auto;
        }
}
/* ==========================
   FAQ SECTION
========================== */

.salesforce-faq-section {
    padding: 120px 0;
    background: #eef6ff;
}

/* HEADER */
.faq-header {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 70px;
}

    .faq-header span {
        font-size: 13px;
        font-weight: 800;
        letter-spacing: 2.5px;
        text-transform: uppercase;
        color: #0176d3;
        display: inline-block;
        margin-bottom: 10px;
    }

    .faq-header h2 {
        font-size: 44px;
        font-weight: 900;
        color: #0b1e3d;
        margin: 10px 0;
        line-height: 1.2;
    }

    .faq-header p {
        font-size: 18px;
        color: #5b6472;
        line-height: 1.8;
        max-width: 700px;
        margin: 0 auto;
    }

.faq-line {
    width: 80px;
    height: 4px;
    background: linear-gradient(90deg, #0176d3, #00c6ff);
    margin: 25px auto 0;
    border-radius: 50px;
}

/* WRAPPER */
.faq-wrapper {
/*    max-width: 900px;*/
    margin: auto;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

/* FAQ CARD */
.faq-item {
    background: #fff;
    border-radius: 18px;
    border: 1px solid rgba(1, 118, 211, 0.08);
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    overflow: hidden;
    position: relative;
    transition: all 0.3s ease;
}

    .faq-item::before {
        content: "";
        position: absolute;
        inset: 0;
        padding: 1px;
        border-radius: 18px;
        background: linear-gradient(135deg, #0176d3, transparent, #00c6ff);
        -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
        -webkit-mask-composite: xor;
        mask-composite: exclude;
        opacity: 0.25;
        pointer-events: none;
    }

/* QUESTION */
.faq-question {
    width: 100%;
    padding: 26px 28px;
    border: none;
    background: transparent;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-align: left;
    font-size: 20px;
    font-weight: 800;
    color: #0b1e3d;
    position: relative;
    z-index: 2;
    transition: all 0.3s ease;
}

.faq-item:hover .faq-question {
    color: #0176d3;
}

/* ICON */
.icon {
    width: 36px;
    height: 36px;
    min-width: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: linear-gradient(135deg, #0176d3, #00c6ff);
    color: #fff;
    font-size: 22px;
    font-weight: 700;
    transition: all 0.3s ease;
}

/* ANSWER */
.faq-answer {
    max-height: 0;
    overflow: hidden;
    padding: 0 28px;
    font-size: 17px;
    color: #5b6472;
    line-height: 1.8;
    transition: max-height 0.4s ease, padding 0.4s ease;
}

    .faq-answer p {
        margin: 0;
    }

/* ACTIVE */
.faq-item.active {
    border-color: rgba(1, 118, 211, 0.25);
    box-shadow: 0 18px 50px rgba(1, 118, 211, 0.12);
}

    .faq-item.active .faq-answer {
        max-height: 300px;
        padding-bottom: 24px;
    }

    .faq-item.active .icon {
        transform: rotate(45deg);
        background: linear-gradient(135deg, #00c6ff, #0176d3);
    }

/* HOVER */
.faq-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 20px 55px rgba(0,0,0,0.08);
}

/* RESPONSIVE */
@media (max-width: 768px) {

    .faq-header h2 {
        font-size: 32px;
    }

    .faq-question {
        font-size: 17px;
        padding: 20px;
    }

    .faq-answer {
        padding-left: 20px;
        padding-right: 20px;
    }
}
/* ==========================
   CTA SECTION
========================== */

.salesforce-cta-section {
/*    padding: 0 0 110px;*/
    background: #ffffff;
}

.cta-box {
    background: linear-gradient( 135deg, #0176d3, #00a1e0 );
/*    border-radius: 30px;*/
    padding: 80px;
    text-align: center;
    color: white;
    position: relative;
    overflow: hidden;
}

    .cta-box::before {
        content: "";
        position: absolute;
        width: 350px;
        height: 350px;
        background: rgba(255,255,255,.08);
        border-radius: 50%;
        top: -150px;
        right: -120px;
    }

.cta-content {
    position: relative;
    z-index: 2;
}

    .cta-content span {
        display: inline-block;
        letter-spacing: 2px;
        font-weight: 600;
        margin-bottom: 15px;
    }

    .cta-content h2 {
        font-size: 48px;
        margin-bottom: 20px;
        font-weight: 800;
    }

    .cta-content p {
        max-width: 800px;
        margin: auto;
        line-height: 1.8;
        font-size: 18px;
        opacity: .95;
    }

.cta-features {
    display: flex;
    justify-content: center;
    gap: 30px;
    margin-top: 35px;
    flex-wrap: wrap;
}

    .cta-features div {
        font-weight: 600;
    }

    .cta-features i {
        margin-right: 8px;
    }

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

.cta-btn-primary,
.cta-btn-outline {
    padding: 16px 34px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 600;
    transition: .3s;
}

.cta-btn-primary {
    background: white;
    color: #0176d3;
}

.cta-btn-outline {
    border: 2px solid white;
    color: white;
}

    .cta-btn-primary:hover,
    .cta-btn-outline:hover {
        transform: translateY(-4px);
    }

/* Responsive */

@media(max-width:768px) {

    .salesforce-faq-section {
        padding: 80px 0;
    }

    .cta-box {
        padding: 50px 25px;
    }

    .cta-content h2 {
        font-size: 32px;
    }

    .cta-content p {
        font-size: 16px;
    }

/*    .salesforce-cta-section {
        padding-bottom: 80px;
    }*/
}

/*==============BLAZEr===============*/
/* HERO BACKGROUND */
.blazor-hero-section {
    min-height: 100vh;
    background: linear-gradient(135deg, #0f172a, #1e1b4b, #312e81);
    color: #fff;
    padding: 130px 0 60px 0;
    position: relative;
    overflow: hidden;
}

/* LEFT CONTENT */
.blazor-hero-content {
    z-index: 2;
}

.blazor-badge {
    display: inline-block;
    padding: 6px 14px;
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 30px;
    font-size: 13px;
    margin-bottom: 20px;
}

/* TITLE */
.blazor-hero-title {
    font-size: 48px;
    font-weight: 700;
    line-height: 1.2;
}

    .blazor-hero-title span {
        color: #8b5cf6;
    }

/* SUBTITLE */
.blazor-hero-subtitle {
    font-size: 16px;
    opacity: 0.8;
    margin-top: 15px;
    margin-bottom: 25px;
}

/* BUTTONS */
.blazor-hero-buttons {
    display: flex;
    gap: 15px;
    margin-bottom: 25px;
}

.blazor-btn-primary {
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    border: none;
    padding: 12px 20px;
    border-radius: 10px;
    font-weight: 500;
}

.blazor-btn-secondary {
    border: 1px solid rgba(255,255,255,0.3);
    padding: 12px 20px;
    border-radius: 10px;
}

/* FEATURE LIST */
.blazor-hero-features {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 20px;
    opacity: 0.9;
}

.feature-item {
    font-size: 14px;
}

/* DASHBOARD CARD */
.blazor-dashboard-card {
    margin-top: 20px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 20px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.4);
}

/* HEADER DOTS */
.dashboard-header {
    display: flex;
    gap: 6px;
    margin-bottom: 15px;
}

    .dashboard-header span {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: #fff;
        opacity: 0.3;
    }
.dashboard-body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    box-sizing: border-box;
    padding: 10px;
}
/* STATS */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 12px;
    margin-top: 15px;
}

.stat-box {
    background: rgba(255,255,255,0.06);
    padding: 15px;
    border-radius: 12px;
    text-align: center;
    /* IMPORTANT FIX */
    min-width: 0;
    overflow: hidden;
    box-sizing: border-box;
}

    .stat-box h4 {
        margin: 0;
        font-size: 18px;
    }

    .stat-box p {
        margin: 5px 0 0;
        font-size: 12px;
        opacity: 0.7;
    }

/* CHART PLACEHOLDER */
.chart-placeholder {
    height: 180px;
    border-radius: 12px;
    background: rgba(255,255,255,0.06);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 15px;
    font-size: 14px;
    opacity: 0.7;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    box-sizing: border-box;
}
/*========Whatisblazor=========*/
.blazor-about-section {
    background: #f8fafc;
}

/* Badge */
.blazor-badge {
    display: inline-block;
    padding: 6px 14px;
    font-size: 12px;
    font-weight: 600;
    border-radius: 20px;
    background: linear-gradient(90deg, #ffffff36, #ffffff29);
    color: #fff;
    letter-spacing: 1px;
}

/* Title */
.blazor-title {
    font-size: 34px;
    font-weight: 700;
    color: #0f172a;
}

.blazor-subtitle {
    color: #64748b;
    max-width: 600px;
}

/* Card base */
.blazor-card {
    background: #1a1a42;
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.06);
}

/* Diagram */
.blazor-node {
    color: #1a1a42;
    padding: 12px;
    border-radius: 10px;
    background: linear-gradient(90deg, var(--bs-primary-bg-subtle), #ede9fe);
    font-weight: 700;
}

.blazor-arrow {
    text-align: center;
    color: #94a3b8;
    margin: 6px 0;
}

/* FEATURE CARD (NEW MODERN STYLE) */
.blazor-feature-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 8px 20px rgba(0,0,0,0.05);
    transition: 0.3s ease;
}

    .blazor-feature-card:hover {
        transform: translateY(-4px);
    }

/* Icon circle */
.icon-circle {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: linear-gradient(135deg, #e0f2fe, #ede9fe);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

/* Text */
.blazor-feature-card h6 {
    margin: 0;
    font-weight: 600;
    color: #0f172a;
}

.blazor-feature-card p {
    margin: 0;
    font-size: 13px;
    color: #64748b;
}

/*======Blazor Features======*/
.blazor-features-section {
    background: linear-gradient(180deg, #f8fafc, #eef2ff);
}

/* Heading */
.blazor-subtitle {
    font-size: 18px;
    font-weight: 800;
    letter-spacing: 2px;
    color: #6366f1;
}

.blazor-title {
    font-size: 40px;
    font-weight: 800;
    color: #0f172a;
    margin-top: 10px;
}

.blazor-desc {
    color: #64748b;
    max-width: 650px;
    margin: 10px auto 0;
}

/* CARD (WHITE ONLY) */
.blazor-feature-card {
    background: #ffffff;
    border-radius: 18px;
    padding: 28px;
    height: 100%;
    border: 1px solid #e2e8f0;
    transition: all 0.3s ease;
}

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

/* ICON BOX → PERFECT SQUARE */
.icon-box {
    padding: 10px;
    width: 54px;
    height: 54px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
    font-size: 22px;
    color: #fff;
    border-radius: 10px; /* slight modern radius (NOT circle) */
}

/* TEXT */
.blazor-feature-card h5 {
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 8px;
}

.blazor-feature-card p {
    color: #64748b;
    font-size: 14px;
    margin: 0;
}

/* ========================= */
/* PASTEL ICON COLORS ONLY */
/* ========================= */

.blazor-feature-card.purple .icon-box {
    background: #a855f7;
}

.blazor-feature-card.green .icon-box {
    background: #22c55e;
}

.blazor-feature-card.orange .icon-box {
    background: #fb923c;
}

.blazor-feature-card.yellow .icon-box {
    background: #facc15;
    color: #111827;
}

.blazor-feature-card.red .icon-box {
    background: #ef4444;
}

.blazor-feature-card.blue .icon-box {
    background: #3b82f6;
}

.blazor-architecture-section {
    padding: 120px 0;
    background: linear-gradient(180deg,#f8fbff 0%,#ffffff 100%);
    overflow: hidden;
}

/* HEADER */

.architecture-header {
    text-align: center;
    max-width: 850px;
    margin: auto;
    margin-bottom: 60px;
}

.architecture-tag {
    display: inline-block;
    color: #6366f1;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 2px;
    margin-bottom: 15px;
}

.architecture-header h2 {
    font-size: 48px;
    font-weight: 800;
    color: #0f172a;
    line-height: 1.2;
    margin-bottom: 20px;
}

    .architecture-header h2 span {
        color: #6366f1;
    }

.architecture-header p {
    font-size: 18px;
    line-height: 1.8;
    color: #64748b;
}

/* TOGGLE */

.architecture-toggle {
    display: flex;
    justify-content: center;
    gap: 12px;
    width: fit-content;
    margin: 0 auto 70px;
    background: #fff;
    padding: 8px;
    border-radius: 16px;
    box-shadow: 0 15px 40px rgba(15,23,42,.08);
}

.architecture-btn {
    border: none;
    min-width: 220px;
    padding: 14px 25px;
    border-radius: 12px;
    background: transparent;
    font-weight: 600;
    transition: .3s;
    color: #334155;
}

    .architecture-btn.active {
        background: linear-gradient(135deg,#6366f1,#8b5cf6);
        color: #fff;
        box-shadow: 0 15px 30px rgba(99,102,241,.25);
    }

/* FLOW */

.architecture-flow {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 22px;
    align-items: stretch;
}

/* CARD */

.architecture-card {
    position: relative;
    background: #fff;
    border-radius: 24px;
    padding: 35px 25px;
    min-height: 260px;
    text-align: center;
    border: 1px solid rgba(99,102,241,.08);
    box-shadow: 0 10px 30px rgba(15,23,42,.05), 0 1px 2px rgba(15,23,42,.04);
    transition: all .35s ease;
    overflow: hidden;
}

    .architecture-card::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        height: 4px;
        width: 100%;
        background: linear-gradient(90deg,#6366f1,#8b5cf6);
    }

    .architecture-card:hover {
        transform: translateY(-8px);
        box-shadow: 0 25px 50px rgba(99,102,241,.15);
    }

.architecture-active {
    border: 2px solid #6366f1;
    background: linear-gradient(180deg,#ffffff,#f8f8ff);
    box-shadow: 0 25px 60px rgba(99,102,241,.18);
    transform: scale(1.03);
}

/* NUMBER */

.architecture-number {
    position: absolute;
    top: 18px;
    right: 18px;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #f1f5f9;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    color: #64748b;
}

/* ICON */

.architecture-icon {
    width: 75px;
    height: 75px;
    margin: 0 auto 20px;
    border-radius: 22px;
    background: linear-gradient( 135deg, rgba(99,102,241,.12), rgba(139,92,246,.15) );
    border: 1px solid rgba(99,102,241,.15);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 34px;
}

/* TEXT */

.architecture-card h5 {
    font-size: 20px;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 12px;
}

.architecture-card p {
    font-size: 15px;
    line-height: 1.7;
    color: #64748b;
    margin-bottom: 0;
}

.architecture-description {
    max-width: 900px;
    margin: 60px auto 0;
    text-align: center;
    font-size: 18px;
    line-height: 1.8;
    color: #475569;
}

/* RESPONSIVE */

@media (max-width:1200px) {

    .architecture-flow {
        grid-template-columns: repeat(3,1fr);
    }
}

@media (max-width:992px) {

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

    .architecture-header h2 {
        font-size: 38px;
    }
}

@media (max-width:768px) {

    .architecture-flow {
        grid-template-columns: 1fr;
    }

    .architecture-toggle {
        flex-direction: column;
        width: 100%;
        max-width: 340px;
    }

    .architecture-btn {
        min-width: auto;
        width: 100%;
    }

    .architecture-header h2 {
        font-size: 32px;
    }
}

/*================USECASES================*/
/* SECTION */
.blazor-usecases-section {
    background: linear-gradient(180deg, #f8fafc, #eef2ff);
}

/* HEADER CENTER */
.blazor-usecases-header {
    text-align: center;
}

.blazor-title {
    font-size: 36px;
    font-weight: 800;
    color: #0f172a;
    margin-bottom: 8px;
}

.blazor-subtitle {
    color: #475569;
    font-size: 18px;
    max-width: 700px;
    margin: 0 auto;
}

/* ROW → SINGLE LINE SCROLL FLEX */
.usecase-row {
    display: flex;
    gap: 18px;
    overflow-x: auto;
    padding: 10px 0 10px 0;
    scroll-snap-type: x mandatory;
}

/* CARD */
.blazor-usecase-card {
    flex: 0 0 220px; /* forces single row */
    background: #ffffff;
    border-radius: 16px;
    padding: 20px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 8px 25px rgba(0,0,0,0.05);
    transition: all 0.3s ease;
    scroll-snap-align: start;
}

    .blazor-usecase-card:hover {
        transform: translateY(-6px);
        box-shadow: 0 18px 45px rgba(99, 102, 241, 0.15);
        border-color: #6366f1;
    }

/* ICON BASE (SQUARE) */
.blazor-icon {
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    font-size: 20px;
    margin-bottom: 14px;
    color: #fff;
}

    /* ICON COLORS (PASTEL DARK SHADE FEEL) */
    .blazor-icon.blue {
        background: #2563eb5c;
    }

    .blazor-icon.green {
        background: #16a34a52;
    }

    .blazor-icon.purple {
        background: #7c3aed66;
    }

    .blazor-icon.orange {
        background: #ea580c91;
    }

    .blazor-icon.red {
        background: #dc262666;
    }

/* TEXT FIX (IMPORTANT for readability) */
.blazor-usecase-card h5 {
    font-size: 15px;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 6px;
}

.blazor-usecase-card p {
    font-size: 13px;
    color: #475569;
    margin: 0;
    line-height: 1.4;
}

/* Hide scrollbar (optional clean UI) */
.usecase-row::-webkit-scrollbar {
    display: none;
}

.usecase-row {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/*============BLAZOR ONCE===========*/
/* SECTION BACKGROUND */
.blazor-cta-section {
    background: radial-gradient(circle at top, #1e1b4b 0%, #0b1020 60%, #050816 100%);
    position: relative;
    padding: 80px 0;
}

/* CTA CARD */
.blazor-cta-card {
    position: relative;
    overflow: hidden;
    background: linear-gradient( 135deg, rgba(99,102,241,0.15), rgba(124,58,237,0.10) );
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 18px;
    padding: 70px 40px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 20px 60px rgba(0,0,0,0.4);
}

    /* GLOW EFFECT */
    .blazor-cta-card::before {
        content: "";
        position: absolute;
        top: -50%;
        left: -50%;
        width: 200%;
        height: 200%;
        background: radial-gradient( circle, rgba(99,102,241,0.25), transparent 60% );
        animation: glowMove 6s linear infinite;
        /* IMPORTANT */
        z-index: 0;
        pointer-events: none;
    }

    /* KEEP ALL CONTENT ABOVE GLOW */
    .blazor-cta-card > * {
        position: relative;
        z-index: 2;
    }

@keyframes glowMove {
    0% {
        transform: rotate(0deg);
    }

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

/* ICON */
.blazor-cta-icon {
    font-size: 40px;
    color: #7c3aed;
    margin-bottom: 20px;
}

/* TITLE */
.blazor-cta-title {
    font-size: 32px;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 12px;
    line-height: 1.3;
}

/* SUBTITLE */
.blazor-cta-subtitle {
    font-size: 16px;
    color: rgba(255,255,255,0.75);
    max-width: 650px;
    margin: 0 auto;
    line-height: 1.7;
}

/* BUTTON WRAPPER */
.blazor-cta-buttons {
    margin-top: 30px;
}

    /* BUTTONS */
    .blazor-cta-buttons .btn {
        padding: 12px 28px;
        border-radius: 10px;
        font-weight: 600;
        margin: 5px;
        transition: all 0.3s ease;
        position: relative;
        z-index: 5;
        text-decoration: none;
        cursor: pointer;
    }

/* PRIMARY BUTTON */
.blazor-btn-primary {
    background: linear-gradient(135deg, #6366f1, #7c3aed);
    border: none;
    color: #fff;
    box-shadow: 0 10px 25px rgba(99,102,241,0.35);
}

    .blazor-btn-primary:hover {
        transform: translateY(-3px);
        box-shadow: 0 15px 35px rgba(99,102,241,0.45);
        color: #fff;
    }

/* OUTLINE BUTTON */
.blazor-btn-outline {
    border: 1px solid rgba(255,255,255,0.3);
    color: #fff;
    background: transparent;
}

    .blazor-btn-outline:hover {
        background: rgba(255,255,255,0.1);
        color: #fff;
        transform: translateY(-3px);
    }

/* RESPONSIVE */
@media (max-width: 768px) {

    .blazor-cta-card {
        padding: 50px 25px;
    }

    .blazor-cta-title {
        font-size: 26px;
    }

    .blazor-cta-subtitle {
        font-size: 15px;
    }

    .blazor-cta-buttons .btn {
        width: 100%;
        margin: 8px 0;
    }
}


/*=============restaurant===========*/
/* ===========================
   HERO SECTION
=========================== */

.restaurant-hero-section {
    position: relative;
    overflow: hidden;
    background: #050816;
    padding: 120px 0 80px;
}

.restaurant-hero-section::before {
    content: "";
    position: absolute;
    width: 800px;
    height: 800px;
    top: -250px;
    right: -200px;
    background: radial-gradient(circle, rgba(124,58,237,.25), transparent 70%);
}

.restaurant-hero-badge {
    display: inline-flex;
    align-items: center;
    padding: 10px 20px;
    border-radius: 50px;
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.08);
    color: #c7d2fe;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 1px;
    margin-bottom: 25px;
}

.restaurant-hero-title {
    font-size: 4.5rem;
    font-weight: 800;
    line-height: 1.05;
    color: #fff;
    margin-bottom: 25px;
}

.restaurant-hero-title span {
    display: block;
    background: linear-gradient(90deg,#7c3aed,#ec4899);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.restaurant-hero-description {
    color: rgba(255,255,255,.70);
    font-size: 18px;
    line-height: 1.8;
    max-width: 550px;
}

.restaurant-hero-buttons {
    display: flex;
    gap: 15px;
    margin-top: 35px;
}

.restaurant-btn-primary {
    padding: 15px 32px;
    border-radius: 14px;
    border: none;
    background: linear-gradient(135deg,#7c3aed,#9333ea);
    color: #fff;
    font-weight: 600;
    transition: .3s;
}

.restaurant-btn-primary:hover {
    transform: translateY(-3px);
    color: #fff;
}

.restaurant-btn-outline {
    padding: 15px 32px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,.15);
    color: #fff;
    transition: .3s;
}

.restaurant-btn-outline:hover {
    background: rgba(255,255,255,.05);
    color: #fff;
}

.restaurant-rating-area {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-top: 40px;
    color: white;
}

.restaurant-rating-area p {
    color: rgba(255,255,255,.65);
    font-size: 14px;
}

.restaurant-users {
    display: flex;
}

.restaurant-users img {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: 3px solid #050816;
    margin-left: -12px;
}

.restaurant-users img:first-child {
    margin-left: 0;
}

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

.restaurant-dashboard-wrapper {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.restaurant-glow {
    position: absolute;
    width: 500px;
    height: 500px;
    background: linear-gradient(
        135deg,
        rgba(124,58,237,.8),
        rgba(236,72,153,.6)
    );
    filter: blur(220px);
    opacity: .35;
}

.restaurant-dashboard-image {
    position: relative;
    z-index: 2;
}

.restaurant-dashboard-image img {
    width: 100%;
    max-width: 850px;
    border-radius: 24px;
    transition: .4s ease;
}

.restaurant-dashboard-image img:hover {
    transform: translateY(-8px);
}


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

@media (max-width: 991px) {

    .restaurant-hero-section {
        padding: 100px 0 60px;
    }

    .restaurant-hero-title {
        font-size: 3rem;
    }

    .restaurant-dashboard-wrapper {
        margin-top: 60px;
    }

    .restaurant-trust-wrapper {
        flex-direction: column;
        gap: 35px;
    }
}

@media (max-width: 767px) {

    .restaurant-hero-title {
        font-size: 2.5rem;
    }

    .restaurant-hero-buttons {
        flex-direction: column;
    }

    .restaurant-btn-primary,
    .restaurant-btn-outline {
        width: 100%;
        text-align: center;
    }
}

/*=======rms section=========*/
.rms-modern-section {
    padding: 50px 0;
    background: #f8fafc;
    font-family: 'Inter', sans-serif;
}

.rms-heading {
    text-align: center;
    margin-bottom: 60px;
    animation: rmsFadeUp 0.8s ease forwards;
}

    .rms-heading h2 {
        font-size: clamp(2.2rem, 4vw, 3.5rem);
        font-weight: 700;
        line-height: 1.2;
        color: #0f172a;
        letter-spacing: -0.5px;
    }

        .rms-heading h2 span {
            background: linear-gradient(90deg, #6d5df6, #22c55e);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

    .rms-heading p {
        margin-top: 12px;
        font-size: 1.05rem;
        color: #64748b;
        max-width: 600px;
        margin-left: auto;
        margin-right: auto;
    }

/* subtle animation */
@keyframes rmsFadeUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* GRID = 4 / auto / 8 */
.rms-grid {
    display: grid;
    grid-template-columns: 4fr 1fr 8fr;
    gap: 30px;
    align-items: center;
}

/* BOX STYLE */
.rms-box {
    border-radius: 28px;
    padding: 40px;
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(10px);
}

/* LEFT */
.challenges {
    background: linear-gradient(180deg,#fff1f1,#ffffff);
    border: 1px solid rgba(255,0,0,0.08);
}

    .challenges h3 {
        color: #b42318;
        font-size: 28px;
        margin-bottom: 5px;
    }

    .challenges p {
        color: #7a2e2e;
        margin-bottom: 25px;
    }

    .challenges .item {
        padding: 10px 0;
        font-size: 15px;
        color: #5a1f1f;
        display: flex;
        gap: 10px;
    }

/* MIDDLE ARROW */
.rms-arrow {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

    /* connecting line */
    .rms-arrow::before {
        content: '';
        position: absolute;
        width: 2px;
        height: 100%;
        background: linear-gradient(to bottom,#ff3d77,#6c63ff);
        opacity: 0.3;
    }

.arrow-circle {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--bs-red), var(--bs-warning));
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    font-size: 20px;
    z-index: 2;
    box-shadow: 0 10px 30px rgba(255,61,119,0.25);
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.08);
    }

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

/* RIGHT */
.solution {
    background: linear-gradient(180deg,#f3fff7,#ffffff);
    border: 1px solid rgba(0,200,100,0.12);
    display: flex;
    gap: 30px;
}

/* TEXT */
.solution-content {
    flex: 1;
}

    .solution-content h3 {
        font-size: 34px;
        color: #1b7f4b;
        margin-bottom: 5px;
    }

    .solution-content p {
        color: #2d6a4f;
        margin-bottom: 20px;
    }

.solution .item {
    padding: 8px 0;
    font-size: 15px;
    color: #2f4f3f;
    display: flex;
    gap: 10px;
}

/* IMAGE */
.image-wrap {
    width: 45%;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
}

    .image-wrap img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

/* RESPONSIVE */
@media(max-width: 992px) {
    .rms-grid {
        grid-template-columns: 1fr;
    }

    .rms-arrow::before {
        display: none;
    }

    .solution {
        flex-direction: column;
    }

    .image-wrap {
        width: 100%;
    }
}
.rms-soln-section {
    padding: 60px 0;
    background: radial-gradient(circle at top, #f7f8ff, #eef1ff);
    color: #1f2937;
    position: relative;
    overflow: hidden;
    font-family: Inter, sans-serif;
}

    /* soft pastel glow background */
    .rms-soln-section::before {
        content: "";
        position: absolute;
        width: 600px;
        height: 600px;
        background: #a78bfa;
        filter: blur(180px);
        opacity: 0.18;
        top: -200px;
        left: -200px;
    }

/* TABLET */
.rms-soln-tablet-wrapper {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* lighter glass device */
.rms-soln-tablet {
    width: 100%;
    max-width: 650px;
    border-radius: 28px;
    transform: perspective(1000px) rotateY(-6deg);
    transition: 0.6s ease;
    box-shadow: 0 30px 80px rgba(17,24,39,0.12);
    border: 1px solid rgba(255,255,255,0.6);
    background: #ffffff;
}

    .rms-soln-tablet:hover {
        transform: perspective(1000px) rotateY(0deg) scale(1.02);
        box-shadow: 0 40px 100px rgba(17,24,39,0.18);
    }

/* glow ring - softer */
.rms-glow {
    position: absolute;
    width: 420px;
    height: 420px;
    background: radial-gradient(circle, #c4b5fd, #a78bfa);
    filter: blur(140px);
    opacity: 0.22;
}

/* floating badges - light glass */
.rms-float-badge {
    position: absolute;
    background: rgba(255,255,255,0.7);
    backdrop-filter: blur(14px);
    padding: 10px 14px;
    border-radius: 50px;
    font-size: 12px;
    border: 1px solid rgba(17,24,39,0.08);
    color: #374151;
    animation: float 4s ease-in-out infinite;
    box-shadow: 0 10px 30px rgba(0,0,0,0.06);
}

.b1 {
    top: 20%;
    left: 10%;
}

.b2 {
    bottom: 15%;
    right: 10%;
    animation-delay: 2s;
}

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

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

/* TEXT */
.rms-soln-tag {
    color: #7c3aed;
    font-weight: 600;
    letter-spacing: 2px;
    font-size: 13px;
}

.rms-soln-title {
    font-size: 42px;
    font-weight: 800;
    margin: 15px 0;
    line-height: 1.1;
    color: #111827;
}

    .rms-soln-title span {
        background: linear-gradient(90deg,#7c3aed,#a78bfa);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }

.rms-soln-desc {
    opacity: 0.75;
    margin-bottom: 25px;
    color: #4b5563;
}

/* FEATURE GRID */
.rms-feature-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.rms-feature-card {
    background: rgba(255,255,255,0.8);
    border: 1px solid rgba(17,24,39,0.06);
    padding: 16px 18px;
    border-radius: 16px;
    font-size: 14px;
    transition: 0.3s ease;
    cursor: pointer;
    color: #374151;
    box-shadow: 0 10px 25px rgba(0,0,0,0.04);
}

    .rms-feature-card:hover {
        transform: translateY(-6px);
        background: rgba(124,58,237,0.08);
        border-color: #a78bfa;
        box-shadow: 0 15px 35px rgba(124,58,237,0.15);
    }

/* MOBILE */
@media(max-width:991px) {
    .rms-feature-grid {
        grid-template-columns: 1fr;
    }

    .rms-soln-title {
        font-size: 32px;
    }
}

/* ==========================
           RSM FEATURES STYLES
           ========================== */

.rsm-features-section {
    padding: 70px 0;
    background-color: #ffffff;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* Header Styling */
.rsm-features-header {
    text-align: center;
    margin-bottom: 50px;
}

.rsm-features-tag {
    display: block;
    color: #6b46c1;
    font-weight: 800;
    font-size: 20px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 10px;
}

.rsm-features-title {
    font-weight: 700;
    font-size: 2.2rem;
    color: #111827;
    margin: 0;
}

/* Card Styling */
.rsm-features-card {
    background: #ffffff;
    border: 1px solid #f0f0f0;
    border-radius: 16px;
    padding: 30px 25px;
    height: 100%;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0,0,0,0.03);
    display: flex;
    flex-direction: column;
}

    .rsm-features-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 10px 25px rgba(0,0,0,0.08);
        border-color: #e5e7eb;
    }

/* Icon Wrapper */
.rsm-features-icon-wrapper {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    margin-bottom: 18px;
    flex-shrink: 0;
}

/* Icon Colors - Backgrounds */
.rsm-features-icon-purple {
    background-color: #f3e8ff;
    color: #6b46c1;
}

.rsm-features-icon-green {
    background-color: #dcfce7;
    color: #16a34a;
}

.rsm-features-icon-orange {
    background-color: #ffedd5;
    color: #ea580c;
}

.rsm-features-icon-pink {
    background-color: #fce7f3;
    color: #db2777;
}

/* Card Text */
.rsm-features-card-title {
    font-weight: 700;
    font-size: 20px;
    color: #1f2937;
    margin-bottom: 8px;
}

.rsm-features-card-desc {
    font-size: 0.95rem;
    color: #6b7280;
    line-height: 1.5;
    margin: 0;
}

/* Grid Spacing */
.rsm-features-col {
    margin-bottom: 24px;
}

/* Responsive */
@media (max-width: 768px) {
    .rsm-features-title {
        font-size: 1.8rem;
    }

    .rsm-features-card {
        padding: 20px;
    }
}
/* ==============================
           HOW IT WORKS - LIGHT THEME
           ============================== */

.hiw-section {
    padding: 50px 0;
    background-color: #f8faff; /* Very light blue-white background */
    font-family: 'Inter', 'Segoe UI', Roboto, sans-serif;
}

/* Header Area */
.hiw-header {
    margin-bottom: 50px;
}

.hiw-tag {
    color: #6d5ae6; /* Soft Purple Tag */
    font-weight: 800;
    font-size: 20px;
    letter-spacing: 1px;
    display: block;
    margin-bottom: 8px;
}

.hiw-title {
    font-weight: 700;
    font-size: 2.5rem;
    color: #1a1a2e; /* Dark Navy text */
    line-height: 1.2;
}

/* Timeline Container */
.hiw-timeline {
    position: relative;
    padding-top: 20px;
}

/* The Dashed Line (Background) */
.hiw-line {
    position: absolute;
    top: 50px; /* Center of circles */
    left: 10%;
    right: 10%;
    height: 2px;
    border-top: 2px dashed #d1d5db; /* Light grey dashed line */
    z-index: 0;
}

/* Step Item */
.hiw-step {
    position: relative;
    z-index: 1;
    text-align: center;
    padding: 0 10px;
}

/* Circle Wrapper with Glow Effect */
.hiw-circle-wrapper {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    margin: 0 auto 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    transition: transform 0.3s ease;
}

    .hiw-circle-wrapper:hover {
        transform: scale(1.05);
    }

/* Inner Circle with Icon */
.hiw-circle {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    color: #ffffff;
    position: relative;
    z-index: 2;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

/* Step Colors - Lighter Versions */
/* Purple Step */
.hiw-step-purple .hiw-circle-wrapper {
    background-color: rgba(109, 90, 230, 0.15); /* Light purple glow bg */
}

.hiw-step-purple .hiw-circle {
    background-color: #6d5ae6; /* Solid purple */
}

/* Blue Step */
.hiw-step-blue .hiw-circle-wrapper {
    background-color: rgba(59, 130, 246, 0.15);
}

.hiw-step-blue .hiw-circle {
    background-color: #3b82f6;
}

/* Green Step */
.hiw-step-green .hiw-circle-wrapper {
    background-color: rgba(16, 185, 129, 0.15);
}

.hiw-step-green .hiw-circle {
    background-color: #10b981;
}

/* Orange Step */
.hiw-step-orange .hiw-circle-wrapper {
    background-color: rgba(245, 158, 11, 0.15);
}

.hiw-step-orange .hiw-circle {
    background-color: #f59e0b;
}

/* Pink Step */
.hiw-step-pink .hiw-circle-wrapper {
    background-color: rgba(236, 72, 153, 0.15);
}

.hiw-step-pink .hiw-circle {
    background-color: #ec4899;
}

/* Step Text */
.hiw-step-title {
    font-weight: 700;
    font-size: 1.1rem;
    color: #1a1a2e;
    margin-bottom: 6px;
}

.hiw-step-desc {
    font-size: 0.9rem;
    color: #6b7280; /* Lighter grey text */
    line-height: 1.5;
    margin: 0;
    max-width: 200px;
    margin: 0 auto;
}

/* Responsive */
@media (max-width: 768px) {
    .hiw-title {
        font-size: 2rem;
    }

    .hiw-line {
        display: none; /* Hide line on mobile */
    }

    .hiw-step {
        margin-bottom: 30px;
    }
}


/* ===============================
   Restaurant Types Section
================================== */

.rms-types {
    position: relative;
    background: #fff;
    padding: 80px 0;
    overflow: hidden;
}

    .rms-types::before {
        content: "";
        position: absolute;
        inset: 0;
        background: radial-gradient(circle at top,#f7f4ff 0%,transparent 70%);
        pointer-events: none;
        z-index: 0;
    }

    .rms-types .container {
        position: relative;
        z-index: 2;
    }

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

.rms-types-heading {
    margin-bottom: 60px;
}

    .rms-types-heading h2 {
        font-size: 52px;
        font-weight: 800;
        color: #16214a;
        line-height: 1.2;
        margin-bottom: 12px;
    }

        .rms-types-heading h2 span {
            color: #7b4dff;
        }

    .rms-types-heading p {
        max-width: 650px;
        margin: auto;
        color: #71758b;
        font-size: 16px;
        line-height: 28px;
    }

/*======================
      Dots
=======================*/

    .rms-types-dots span {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: #d8cfff;
    }

        .rms-types-dots span.active {
            width: 11px;
            height: 11px;
            background: #7b4dff;
        }

/*======================
      Cards
=======================*/

.rms-types .row {
    row-gap: 24px;
}

.rms-types-card {
    position: relative;
    background: #fff;
    border: 1px solid #ebe7ff;
    border-radius: 18px;
    text-align: center;
    padding: 25px 18px;
    height: 100%;
    transition: all .35s ease;
    overflow: hidden;
}

    .rms-types-card::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(180deg,#faf8ff,#ffffff);
        opacity: 0;
        transition: .35s;
    }

    .rms-types-card > * {
        position: relative;
        z-index: 2;
    }

    .rms-types-card:hover {
        transform: translateY(-8px);
        border-color: #8b63ff;
        box-shadow: 0 18px 45px rgba(124,77,255,.14);
    }

        .rms-types-card:hover::before {
            opacity: 1;
        }

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

.rms-types-icon {
    width: 86px;
    height: 86px;
    margin: 0 auto 18px;
    border-radius: 50%;
    background: #f4efff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 24px rgba(124,77,255,.12);
}

    .rms-types-icon img {
        width: 56px;
        height: 56px;
        object-fit: contain;
    }

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

.rms-types-card h6 {
    font-size: 17px;
    font-weight: 700;
    color: #16214a;
    margin-bottom: 10px;
}

.rms-types-card p {
    margin: 0;
    color: #6f7488;
    font-size: 13px;
    line-height: 1.65;
}

/*===================================
 Desktop (6 Cards Per Row)
====================================*/

@media (min-width:992px) {

    .rms-types .col-lg-2 {
        flex: 0 0 16.666667%;
        max-width: 16.666667%;
    }
}

/*===================================
 Tablet
====================================*/

@media (max-width:991px) {

    .rms-types {
        padding: 60px 0;
    }

    .rms-types-heading {
        margin-bottom: 45px;
    }

        .rms-types-heading h2 {
            font-size: 40px;
        }

        .rms-types-heading p {
            font-size: 15px;
        }

    .rms-types .col-md-4 {
        flex: 0 0 33.333333%;
        max-width: 33.333333%;
    }
}

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

@media (max-width:767px) {

    .rms-types {
        padding: 50px 0;
    }

    .rms-types-heading {
        margin-bottom: 35px;
    }

        .rms-types-heading h2 {
            font-size: 30px;
        }

        .rms-types-heading p {
            font-size: 14px;
            line-height: 24px;
        }

    .rms-types-card {
        padding: 18px 12px;
    }

    .rms-types-icon {
        width: 72px;
        height: 72px;
    }

        .rms-types-icon img {
            width: 44px;
            height: 44px;
        }

    .rms-types-card h6 {
        font-size: 15px;
    }

    .rms-types-card p {
        font-size: 12px;
        line-height: 1.5;
    }
}

/*===================================
 Small Mobile
====================================*/

@media (max-width:575px) {

    .rms-types .col-6 {
        flex: 0 0 50%;
        max-width: 50%;
    }
}

/* ================================
           RMS INDUSTRIES - LIGHT THEME
================================ */

.rms-industries-section {
    padding: 90px 0;
    background: #edf0ff;
}

/* MAIN FLEX WRAPPER */
.rms-industries-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
/*    gap: 60px;*/
}

/* LEFT SIDE */
.rms-industries-left {
    flex: 0 0 35%;
}

.rms-industries-tag {
    color: #6d5ae6;
    font-weight: 600;
    letter-spacing: 1px;
    font-size: 20px;
}

.rms-industries-title {
    font-size: 2.6rem;
    font-weight: 700;
    color: #1a1a2e;
    margin-top: 10px;
    line-height: 1.1;
}

.rms-industries-desc {
    margin-top: 15px;
    color: #555;
    font-size: 1rem;
    line-height: 1.6;
}

.rms-industries-btn {
    margin-top: 20px;
    padding: 12px 22px;
    border-radius: 12px;
    border: none;
    background: #6d5ae6;
    color: white;
    font-weight: 600;
    cursor: pointer;
    transition: 0.3s;
}

    .rms-industries-btn:hover {
        transform: translateY(-2px);
        background: #5846d8;
    }

/* RIGHT SIDE - SINGLE LINE GRID */
.rms-industries-right {
    flex: 1;
    display: flex;
    gap: 18px;
    align-items: stretch;
    overflow: hidden;
}

/* CARD */
.rms-industries-card {
    flex: 1;
    min-width: 140px;
    height: 220px;
    border-radius: 18px 0;
    overflow: hidden;
    position: relative;
    cursor: pointer;
    transition: 0.4s ease;
    box-shadow: 0 10px 25px rgba(0,0,0,0.08);
}

    .rms-industries-card img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: 0.5s;
    }

    /* HOVER EFFECT */
    .rms-industries-card:hover {
        flex: 1.3;
        transform: translateY(-8px);
    }

        .rms-industries-card:hover img {
            transform: scale(1.1);
        }

    /* LABEL */
    .rms-industries-card span {
        position: absolute;
        bottom: 12px;
        left: 12px;
        color: #fff;
        font-weight: 600;
        font-size: 0.95rem;
        background: rgba(0,0,0,0.35);
        padding: 6px 10px;
        border-radius: 8px;
    }

/* COLORS ACCENTS (optional glow border) */
.rms-industries-purple {
    border: 2px solid #6d5ae6;
}

.rms-industries-blue {
    border: 2px solid #3b82f6;
}

.rms-industries-green {
    border: 2px solid #10b981;
}

.rms-industries-orange {
    border: 2px solid #f59e0b;
}

.rms-industries-pink {
    border: 2px solid #ec4899;
}

/* RESPONSIVE */
@media (max-width: 992px) {
    .rms-industries-wrapper {
        flex-direction: column;
    }

    .rms-industries-right {
        flex-wrap: wrap;
    }

    .rms-industries-card {
        flex: 1 1 45%;
        height: 180px;
    }
}

/* ================================
           RMS CTA & CLIENT - LIGHT THEME
           ================================ */

.rms-cta-section {
    padding: 80px 0;
    background-color: #f8faff; /* Very light blue-white background */
    font-family: 'Inter', 'Segoe UI', Roboto, sans-serif;
}

/* ===== TESTIMONIALS PART ===== */
.rms-client-header {
    margin-bottom: 40px;
}

.rms-client-tag {
    color: #6d5ae6; /* Soft Purple Tag */
    font-weight: 600;
    font-size: 20px;
    letter-spacing: 1px;
    display: block;
    margin-bottom: 8px;
}

.rms-client-title {
    font-weight: 700;
    font-size: 2.8rem;
    color: #1a1a2e; /* Dark Navy text */
    line-height: 1.2;
}

/* Testimonial Card */
.rms-client-card {
    color: var(--bs-gray-800);
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    padding: 30px 25px;
    height: 100%;
    transition: all 0.3s ease;
    box-shadow: 0 2px 10px rgba(0,0,0,0.04);
}

    .rms-client-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 8px 25px rgba(0,0,0,0.08);
    }

/* Quote Icon */
.rms-client-quote {
    color: #6d5ae6;
    font-size: 2rem;
    font-weight: 700;
    font-family: serif;
    line-height: 1;
    margin-bottom: 10px;
    display: block;
}

.rms-client-text {
    font-size: 0.95rem;
    color: #4b5563;
    line-height: 1.6;
    margin-bottom: 20px;
}

/* User Profile */
.rms-client-profile {
    display: flex;
    align-items: center;
    gap: 12px;
}

.rms-client-avatar {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    object-fit: cover;
}

.rms-client-name {
    font-weight: 700;
    font-size: 0.95rem;
    color: #1f2937;
    margin: 0;
}

.rms-client-role {
    font-size: 0.85rem;
    color: #6b7280;
    margin: 0;
}

/* Dots */
.rms-client-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 30px;
}

.rms-client-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #d1d5db;
}

    .rms-client-dot.active {
        background-color: #6d5ae6;
        width: 25px;
        border-radius: 4px;
    }

/* ===== CTA BANNER PART ===== */
.rms-cta-banner {
    margin-top: 60px;
    background: linear-gradient(135deg, #eef2ff 0%, #f3e8ff 100%);
    border-radius: 24px;
    padding: 50px 40px;
    position: relative;
    overflow: hidden;
    border: 1px solid #e5e7eb;
}

/* Decorative dot pattern */
.rms-cta-pattern {
    position: absolute;
    right: -50px;
    top: -50px;
    width: 300px;
    height: 300px;
    background-image: radial-gradient(#6d5ae6 1px, transparent 1px);
    background-size: 20px 20px;
    opacity: 0.08;
    pointer-events: none;
    z-index: 0;
}

.rms-cta-content {
    position: relative;
    z-index: 1;
}

.rms-cta-title {
    font-weight: 700;
    font-size: 2rem;
    color: #1a1a2e;
    margin-bottom: 10px;
}

.rms-cta-desc {
    color: #4b5563;
    font-size: 1rem;
    margin-bottom: 0;
}

/* CTA Buttons */
.rms-cta-btn-primary {
    background-color: #6d5ae6;
    color: #ffffff;
    border: none;
    padding: 12px 30px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.95rem;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    justify-content: center;
}

    .rms-cta-btn-primary:hover {
        background-color: #5b4bd1;
        color: #ffffff;
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(109, 90, 230, 0.3);
    }

.rms-cta-btn-secondary {
    background-color: transparent;
    color: #1a1a2e;
    border: 1px solid #d1d5db;
    padding: 12px 30px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.95rem;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    justify-content: center;
}

    .rms-cta-btn-secondary:hover {
        background-color: #f3f4f6;
        border-color: #9ca3af;
    }

/* POS Device Mockup */
.rms-cta-device-wrapper {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: center;
}

.rms-cta-device {
    max-width: 100%;
    height: auto;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    border: 4px solid #1a1a2e;
}

/* Responsive */
@media (max-width: 768px) {
    .rms-client-title {
        font-size: 2rem;
    }

    .rms-cta-title {
        font-size: 1.5rem;
    }

    .rms-cta-banner {
        padding: 30px 20px;
    }
}



/* ================================
        GROCERY HERO SECTION
================================ */

.grocery-hero {
    padding: 135px 0 80px;
    background: radial-gradient(circle at top left, rgba(16, 185, 129, 0.15), transparent 35%), radial-gradient(circle at bottom right, rgba(249, 115, 22, 0.15), transparent 35%), linear-gradient(135deg, #081c15 0%, #0f2d24 45%, #1b4332 100%);
    position: relative;
    overflow: hidden;
}

    /* Background subtle gradient overlay */
    .grocery-hero::before {
        content: '';
        position: absolute;
        top: -50%;
        right: -20%;
        width: 60%;
        height: 150%;
        background: radial-gradient(ellipse, rgba(34, 197, 94, 0.08) 0%, transparent 70%);
        pointer-events: none;
    }

/* ===== LEFT CONTENT ===== */
.grocery-content {
    position: relative;
    z-index: 2;
    padding-right: 30px;
}

.grocery-title {
    font-weight: 800;
    font-size: 3.2rem;
    line-height: 1.1;
    color: #ffffff;
    margin-bottom: 20px;
}

.grocery-title-highlight {
    color: #22c55e; /* Bright Green */
}

.grocery-desc {
    font-size: 1.1rem;
    color: #94a3b8;
    line-height: 1.7;
    margin-bottom: 30px;
    max-width: 500px;
}

/* Buttons */
.grocery-btn-primary {
    background: #22c55e;
    color: #ffffff;
    border: none;
    padding: 14px 28px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 1rem;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

    .grocery-btn-primary:hover {
        background: #16a34a;
        color: #ffffff;
        transform: translateY(-2px);
        box-shadow: 0 8px 25px rgba(34, 197, 94, 0.3);
    }

.grocery-btn-secondary {
    background: transparent;
    color: #ffffff;
    border: 1px solid #334155;
    padding: 14px 28px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 1rem;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

    .grocery-btn-secondary:hover {
        background: rgba(255,255,255,0.05);
        border-color: #64748b;
        color: #ffffff;
    }

/* Trust Badges */
.grocery-trust {
    display: flex;
    gap: 25px;
    margin-top: 40px;
/*    flex-wrap: wrap;*/
}

.grocery-trust-item {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #94a3b8;
    font-size: 0.9rem;
}

    .grocery-trust-item i {
        color: #22c55e;
        font-size: 1.2rem;
    }

/* ===== RIGHT SIDE: DASHBOARD MOCKUP ===== */
.grocery-dashboard-wrapper {
    position: relative;
    z-index: 1;
    perspective: 1000px;
}

.grocery-dashboard {
    background: #ffffff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0,0,0,0.5);
    width: 100%;
    max-width: 750px;
    margin: 0 auto;
    position: relative;
}

/* Dashboard Header */
.grocery-dash-header {
    padding: 15px 20px;
    border-bottom: 1px solid #f1f5f9;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.grocery-dash-logo {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    color: #0a0f1a;
}

    .grocery-dash-logo i {
        color: #22c55e;
    }

.grocery-dash-user {
    font-size: 0.85rem;
    color: #64748b;
}

/* Dashboard Body */
.grocery-dash-body {
    padding: 20px;
}

/* Stats Row */
.grocery-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
    margin-bottom: 20px;
}

.grocery-stat-card {
    background: #f8fafc;
    padding: 15px;
    border-radius: 10px;
    border: 1px solid #f1f5f9;
}

.grocery-stat-label {
    font-size: 0.75rem;
    color: #64748b;
    font-weight: 500;
    margin-bottom: 4px;
}

.grocery-stat-value {
    font-weight: 700;
    color: #0a0f1a;
    font-size: 1.1rem;
}

.grocery-stat-change {
    font-size: 0.7rem;
    font-weight: 600;
}

    .grocery-stat-change.up {
        color: #22c55e;
    }

    .grocery-stat-change.down {
        color: #ef4444;
    }

/* Chart Area Mockup */
.grocery-chart-area {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 20px;
}

.grocery-chart-box {
    background: #f8fafc;
    border-radius: 10px;
    padding: 15px;
    border: 1px solid #f1f5f9;
    height: 180px;
    position: relative;
}

.grocery-chart-title {
    font-size: 0.85rem;
    font-weight: 600;
    color: #0a0f1a;
    margin-bottom: 10px;
}

/* SVG Chart Lines */
.grocery-svg-line {
    stroke: #22c55e;
    stroke-width: 2;
    fill: none;
}

.grocery-svg-area {
    fill: rgba(34, 197, 94, 0.1);
}

/* Donut Chart Mockup */
.grocery-donut {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

.grocery-donut-ring {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: conic-gradient(#22c55e 0% 40%, #3b82f6 40% 70%, #f59e0b 70% 85%, #ef4444 85% 100%);
    position: relative;
}

.grocery-donut-hole {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 55px;
    height: 55px;
    background: #f8fafc;
    border-radius: 50%;
}

/* ===== FLOATING CARDS ===== */
.grocery-float-cards {
    position: absolute;
    bottom: -40px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 20px;
    width: 90%;
    z-index: 3;
}

.grocery-float-card {
    background: #ffffff;
    padding: 15px 20px;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
    flex: 1;
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.grocery-float-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
}

    .grocery-float-icon.green {
        background: #dcfce7;
        color: #22c55e;
    }

    .grocery-float-icon.orange {
        background: #ffedd5;
        color: #f59e0b;
    }

    .grocery-float-icon.purple {
        background: #f3e8ff;
        color: #8b5cf6;
    }

.grocery-float-info h6 {
    font-size: 0.75rem;
    font-weight: 600;
    color: #64748b;
    margin: 0;
}

.grocery-float-info span {
    font-size: 1rem;
    font-weight: 700;
    color: #0a0f1a;
}
/* ==========================================
   RIGHT SIDE IMAGE
========================================== */

.grocery-image-wrapper {
    position: relative;
    width: 100%;
    max-width: 650px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
}

.grocery-hero-image {
    width: 100%;
    max-width: 600px;
    height: auto;
    display: block;
    object-fit: contain;
    filter: drop-shadow(0 20px 40px rgba(0,0,0,0.25));
    animation: groceryFloat 5s ease-in-out infinite;
}

/* Floating Animation */
@keyframes groceryFloat {
    0%,100% {
        transform: translateY(0);
    }

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

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

@media (max-width: 1200px) {

    .grocery-hero-image {
        max-width: 550px;
    }
}

@media (max-width: 992px) {

    .grocery-content {
        text-align: center;
        padding-right: 0;
        margin-bottom: 40px;
    }

    .grocery-desc {
        margin: 0 auto 30px;
    }

    .grocery-trust {
        justify-content: center;
        flex-wrap: wrap;
    }

    .grocery-image-wrapper {
        max-width: 550px;
    }

    .grocery-hero-image {
        max-width: 100%;
    }
}

@media (max-width: 768px) {

    .grocery-title {
        font-size: 2rem;
    }

    .grocery-trust {
        flex-direction: column;
        align-items: center;
        gap: 15px;
    }

    .grocery-image-wrapper {
        max-width: 420px;
    }
}

@media (max-width: 576px) {

    .grocery-hero {
        padding: 110px 0 60px;
    }

    .grocery-image-wrapper {
        max-width: 300px;
    }

    .grocery-hero-image {
        width: 100%;
        max-width: 100%;
    }
}
/* ===== RESPONSIVE ===== */
@media (max-width: 992px) {
    .grocery-title {
        font-size: 2.5rem;
    }

    .grocery-content {
        padding-right: 0;
        margin-bottom: 60px;
        text-align: center;
    }

    .grocery-desc {
        margin: 0 auto 30px;
    }

    .grocery-trust {
        justify-content: center;
    }

    .grocery-float-cards {
        position: relative;
        bottom: 0;
        left: 0;
        transform: none;
        margin-top: -30px;
        flex-wrap: wrap;
    }

    .grocery-float-card {
        flex: 1 1 30%;
        min-width: 120px;
    }
}

@media (max-width: 768px) {
    .grocery-stats {
        grid-template-columns: repeat(2, 1fr);
    }

    .grocery-chart-area {
        grid-template-columns: 1fr;
    }

    .grocery-float-card {
        flex: 1 1 100%;
    }

    .grocery-title {
        font-size: 2rem;
    }
}

/* ================================
           GROCERY SOLN SECTION
           ================================ */

.grocery-soln-section {
    padding: 80px 0;
    background-color: #f8faff;
    font-family: 'Inter', sans-serif;
}

/* ===== HEADER ===== */
.grocery-soln-header {
    text-align: center;
    margin-bottom: 50px;
}

.grocery-soln-title {
    font-weight: 700;
    font-size: 2.5rem;
    color: #1a1a2e;
    margin-bottom: 12px;
}

.grocery-soln-subtitle {
    font-size: 1.1rem;
    color: #64748b;
    max-width: 700px;
    margin: 0 auto;
    line-height: 1.6;
}

/* ===== CARDS ===== */
.grocery-soln-card {
    border-radius: 16px;
    padding: 30px 25px;
    height: 100%;
    transition: all 0.3s ease;
}

    .grocery-soln-card:hover {
        transform: translateY(-3px);
    }

/* Challenge Card (Red) */
.grocery-soln-challenge {
    background-color: #fef2f2; /* Light red bg */
    border: 1px solid #fecaca;
}

.grocery-soln-challenge-title {
    color: #dc2626; /* Red */
    font-weight: 700;
    font-size: 1.2rem;
    margin-bottom: 20px;
}

.grocery-soln-challenge-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 14px;
    color: #4b5563;
    font-size: 0.95rem;
}

    .grocery-soln-challenge-item i {
        color: #dc2626;
        font-size: 1.1rem;
        margin-top: 3px;
        flex-shrink: 0;
    }

/* Solution Card (Green) */
.grocery-soln-solution {
    background-color: #f0fdf4; /* Light green bg */
    border: 1px solid #bbf7d0;
}

.grocery-soln-solution-title {
    color: #16a34a; /* Green */
    font-weight: 700;
    font-size: 1.2rem;
    margin-bottom: 20px;
}

.grocery-soln-solution-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 14px;
    color: #4b5563;
    font-size: 0.95rem;
}

    .grocery-soln-solution-item i {
        color: #16a34a;
        font-size: 1.1rem;
        margin-top: 3px;
        flex-shrink: 0;
    }

/* ===== ARROW BUTTON ===== */
.grocery-soln-arrow-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

.grocery-soln-arrow-btn {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background-color: #dcfce7;
    color: #16a34a;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(22, 163, 74, 0.15);
}

    .grocery-soln-arrow-btn:hover {
        transform: scale(1.1) rotate(15deg);
        background-color: #16a34a;
        color: #ffffff;
    }

/* ===== IMAGE SECTION ===== */
.grocery-soln-image-wrapper {
    position: relative;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.grocery-soln-image-bg {
    position: absolute;
    width: 380px;
    height: 380px;
    border-radius: 50%;
    background: radial-gradient(circle, #dcfce7 0%, #f0fdf4 70%);
    z-index: 1;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.grocery-soln-image {
    position: relative;
    z-index: 2;
    max-width: 100%;
    height: auto;
    max-height: 400px;
    object-fit: contain;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 991px) {
    .grocery-soln-title {
        font-size: 2rem;
    }

    .grocery-soln-arrow-wrapper {
        padding: 20px 0;
    }

    .grocery-soln-arrow-btn {
        transform: rotate(90deg);
    }

        .grocery-soln-arrow-btn:hover {
            transform: rotate(90deg) scale(1.1);
        }

    .grocery-soln-image-wrapper {
        margin-top: 40px;
    }

    .grocery-soln-image-bg {
        width: 280px;
        height: 280px;
    }
}

@media (max-width: 576px) {
    .grocery-soln-title {
        font-size: 1.6rem;
    }

    .grocery-soln-card {
        padding: 20px;
    }
}


/*=========================================
        GROCERY SOFTWARE SECTION
=========================================*/

.grocery-software-section {
    position: relative;
    padding: 100px 0;
    background: #ffffff;
    overflow: hidden;
}

    /* Background Decorative Shapes */

    .grocery-software-section::before {
        content: "";
        position: absolute;
        width: 420px;
        height: 420px;
        background: rgba(99, 201, 76, 0.08);
        border-radius: 50%;
        left: -180px;
        bottom: -180px;
    }

    .grocery-software-section::after {
        content: "";
        position: absolute;
        width: 280px;
        height: 280px;
        background: rgba(99, 201, 76, 0.05);
        border-radius: 50%;
        top: -120px;
        right: -120px;
    }

/*=========================
        LEFT SIDE
==========================*/

.grocery-software-left {
    position: sticky;
    top: 120px;
}

.grocery-software-tag {
    display: inline-block;
    padding: 8px 18px;
    border-radius: 50px;
    background: rgba(92, 184, 92, .12);
    color: #67b745;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 22px;
}

.grocery-software-heading {
    font-size: 52px;
    line-height: 1.08;
    font-weight: 800;
    color: #111827;
    margin-bottom: 28px;
}

    .grocery-software-heading span {
        color: #5CB85C;
    }

.grocery-software-description {
    font-size: 16px;
    line-height: 1.9;
    color: #6b7280;
    margin-bottom: 28px;
}

.grocery-software-line {
    width: 65px;
    height: 4px;
    background: #5CB85C;
    border-radius: 50px;
    margin-bottom: 40px;
}

.grocery-software-image {
    margin-top: 15px;
}

    .grocery-software-image img {
        height: 150px;
        width: 520px;
        transition: .4s;
    }

        .grocery-software-image img:hover {
            transform: translateY(-8px);
        }

/*=========================
        RIGHT GRID
==========================*/

.grocery-software-card {
    position: relative;
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 24px 24px;
    background: #fff;
    border-radius: 18px;
    border: 1px solid #edf2f7;
    box-shadow: 0 10px 35px rgba(0,0,0,.05);
    transition: .35s;
    overflow: hidden;
    min-height: 100px;
}

    .grocery-software-card::before {
        content: "";
        position: absolute;
        left: -120px;
        top: 0;
        width: 120px;
        height: 100%;
        background: linear-gradient(90deg, rgba(92,184,92,.18), transparent);
        transition: .45s;
    }

    .grocery-software-card:hover::before {
        left: 0;
    }

    .grocery-software-card:hover {
        transform: translateY(-8px);
        border-color: #5CB85C;
        box-shadow: 0 18px 45px rgba(92,184,92,.18);
    }

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

.grocery-software-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: rgba(92,184,92,.12);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: .35s;
}

    .grocery-software-icon i {
        font-size: 22px;
        color: #5CB85C;
        transition: .35s;
    }

.grocery-software-card:hover .grocery-software-icon {
    background: #5CB85C;
    transform: rotate(8deg) scale(1.08);
}

    .grocery-software-card:hover .grocery-software-icon i {
        color: #fff;
    }

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

.grocery-software-content {
    flex: 1;
}

.grocery-software-number {
    display: block;
    font-size: 12px;
    color: #5CB85C;
    font-weight: 700;
    margin-bottom: 7px;
    letter-spacing: 1px;
}

.grocery-software-content h5 {
    font-size: 17px;
    font-weight: 700;
    color: #111827;
    margin: 0;
    line-height: 1.5;
    transition: .3s;
}

.grocery-software-card:hover h5 {
    color: #5CB85C;
}

/*=========================
        SPACING
==========================*/

.grocery-software-section .row.g-4 {
    --bs-gutter-x: 22px;
    --bs-gutter-y: 22px;
}

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

@media(max-width:1399px) {

    .grocery-software-heading {
        font-size: 46px;
    }
}

@media(max-width:1199px) {

    .grocery-software-heading {
        font-size: 42px;
    }

    .grocery-software-left {
        position: relative;
        top: 0;
        margin-bottom: 50px;
    }
}

@media(max-width:991px) {

    .grocery-software-section {
        padding: 80px 0;
    }

    .grocery-software-left {
        text-align: center;
    }

    .grocery-software-line {
        margin-left: auto;
        margin-right: auto;
    }

    .grocery-software-image {
        text-align: center;
    }

    .grocery-software-heading {
        font-size: 38px;
    }
}

@media(max-width:767px) {

    .grocery-software-section {
        padding: 70px 0;
    }

    .grocery-software-heading {
        font-size: 34px;
    }

    .grocery-software-description {
        font-size: 15px;
    }

    .grocery-software-card {
        padding: 20px;
        min-height: 90px;
    }

    .grocery-software-icon {
        width: 50px;
        height: 50px;
    }

        .grocery-software-icon i {
            font-size: 20px;
        }

    .grocery-software-content h5 {
        font-size: 16px;
    }
}

@media(max-width:575px) {

    .grocery-software-section {
        padding: 60px 0;
    }

    .grocery-software-heading {
        font-size: 30px;
    }

    .grocery-software-card {
        gap: 15px;
        border-radius: 16px;
    }

    .grocery-software-image img {
        width: 170px;
    }
}

/* ================================
           GROCERY FEATURES SECTION
           ================================ */

.grocery-features-section {
    padding: 80px 0;
    background-color: #ffffff;
    font-family: 'Inter', sans-serif;
}

/* ===== HEADER ===== */
.grocery-features-header {
    text-align: center;
    margin-bottom: 50px;
}

.grocery-features-title {
    font-weight: 700;
    font-size: 2.2rem;
    color: #1a1a2e;
    margin-bottom: 10px;
}

.grocery-features-subtitle {
    font-size: 1rem;
    color: #64748b;
    margin: 0;
}

/* ===== CARDS ===== */
.grocery-features-card {
    background: #ffffff;
    border: 1px solid #f1f5f9;
    border-radius: 16px;
    padding: 30px 20px 25px;
    height: 100%;
    text-align: center;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0,0,0,0.03);
}

    .grocery-features-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 12px 30px rgba(0,0,0,0.08);
        border-color: #e2e8f0;
    }

/* ===== ICON STYLES ===== */
.grocery-features-icon {
    width: 60px;
    height: 60px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    margin: 0 auto 18px;
    transition: all 0.3s ease;
}

.grocery-features-card:hover .grocery-features-icon {
    transform: scale(1.05);
}

/* Icon Colors */
.grocery-features-icon-green {
    background-color: #dcfce7;
    color: #16a34a;
}

.grocery-features-icon-blue {
    background-color: #dbeafe;
    color: #2563eb;
}

.grocery-features-icon-purple {
    background-color: #f3e8ff;
    color: #7c3aed;
}

.grocery-features-icon-indigo {
    background-color: #e0e7ff;
    color: #4f46e5;
}

.grocery-features-icon-orange {
    background-color: #ffedd5;
    color: #ea580c;
}

.grocery-features-icon-peach {
    background-color: #fef3c7;
    color: #d97706;
}

.grocery-features-icon-pink {
    background-color: #fce7f3;
    color: #db2777;
}

.grocery-features-icon-rose {
    background-color: #ffe4e6;
    color: #e11d48;
}

/* ===== CARD TEXT ===== */
.grocery-features-card-title {
    font-weight: 700;
    font-size: 1rem;
    color: #1a1a2e;
    margin-bottom: 8px;
}

.grocery-features-card-desc {
    font-size: 0.9rem;
    color: #64748b;
    line-height: 1.5;
    margin: 0;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 991px) {
    .grocery-features-title {
        font-size: 1.8rem;
    }
}

@media (max-width: 768px) {
    .grocery-features-card {
        padding: 20px 15px;
    }

    .grocery-features-icon {
        width: 50px;
        height: 50px;
        font-size: 1.2rem;
    }
}

/* ================================
           GROCERY DASHBOARD SECTION
           ================================ */

.grocery-dashboard-section {
    padding: 80px 0;
    background-color: #f8faff;
    font-family: 'Inter', sans-serif;
}

/* ===== LEFT CONTENT ===== */
.grocery-dashboard-content {
    padding-right: 40px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.grocery-dashboard-tag {
    color: #16a34a;
    font-weight: 700;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    display: block;
    margin-bottom: 10px;
}

.grocery-dashboard-title {
    font-weight: 700;
    font-size: 2.5rem;
    color: #1a1a2e;
    line-height: 1.2;
    margin-bottom: 20px;
}

.grocery-dashboard-desc {
    font-size: 1.05rem;
    color: #64748b;
    line-height: 1.7;
    margin-bottom: 30px;
}

/* Feature List with Checkmarks */
.grocery-dashboard-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.grocery-dashboard-list-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 16px;
    font-size: 1rem;
    color: #1f2937;
}

    .grocery-dashboard-list-item i {
        color: #16a34a;
        font-size: 1.2rem;
        margin-top: 2px;
        flex-shrink: 0;
    }

/* ===== RIGHT SIDE: DASHBOARD MOCKUP ===== */
.grocery-dashboard-mockup {
    background: #ffffff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0,0,0,0.1);
    border: 1px solid #e2e8f0;
    width: 100%;
    max-width: 750px;
    margin: 0 auto;
}

/* Dashboard Header */
.grocery-dashboard-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    border-bottom: 1px solid #f1f5f9;
}

.grocery-dashboard-logo {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    font-size: 1.1rem;
    color: #1a1a2e;
}

    .grocery-dashboard-logo i {
        color: #16a34a;
    }

.grocery-dashboard-user {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 0.85rem;
    color: #64748b;
}

    .grocery-dashboard-user i {
        color: #94a3b8;
        cursor: pointer;
    }

/* Dashboard Body */
.grocery-dashboard-body {
    padding: 20px;
}

/* Stats Row */
.grocery-dashboard-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
    margin-bottom: 20px;
}

.grocery-dashboard-stat {
    background: #f8fafc;
    border-radius: 10px;
    padding: 15px;
    border: 1px solid #f1f5f9;
}

.grocery-dashboard-stat-label {
    font-size: 0.75rem;
    color: #64748b;
    font-weight: 500;
    margin-bottom: 4px;
}

.grocery-dashboard-stat-value {
    font-weight: 700;
    font-size: 1.1rem;
    color: #1a1a2e;
}

.grocery-dashboard-stat-change {
    font-size: 0.7rem;
    font-weight: 600;
}

    .grocery-dashboard-stat-change.up {
        color: #16a34a;
    }

    .grocery-dashboard-stat-change.down {
        color: #ef4444;
    }

/* Content Grid */
.grocery-dashboard-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 20px;
}

/* Chart Box */
.grocery-dashboard-chart-box {
    background: #f8fafc;
    border-radius: 10px;
    padding: 15px;
    border: 1px solid #f1f5f9;
}

.grocery-dashboard-chart-title {
    font-size: 0.85rem;
    font-weight: 600;
    color: #1a1a2e;
    margin-bottom: 15px;
}

.grocery-dashboard-chart {
    height: 120px;
    position: relative;
}

    .grocery-dashboard-chart svg {
        width: 100%;
        height: 100%;
    }

/* Recent Orders */
.grocery-dashboard-orders {
    background: #f8fafc;
    border-radius: 10px;
    padding: 15px;
    border: 1px solid #f1f5f9;
}

.grocery-dashboard-orders-title {
    font-size: 0.85rem;
    font-weight: 600;
    color: #1a1a2e;
    margin-bottom: 12px;
}

.grocery-dashboard-order-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid #f1f5f9;
}

    .grocery-dashboard-order-item:last-child {
        border-bottom: none;
    }

.grocery-dashboard-order-info {
    font-size: 0.8rem;
}

.grocery-dashboard-order-id {
    font-weight: 600;
    color: #1a1a2e;
}

.grocery-dashboard-order-amount {
    font-weight: 600;
    color: #1a1a2e;
}

.grocery-dashboard-order-status {
    font-size: 0.7rem;
    padding: 2px 10px;
    border-radius: 20px;
    font-weight: 500;
}

    .grocery-dashboard-order-status.pending {
        background: #fef3c7;
        color: #d97706;
    }

    .grocery-dashboard-order-status.confirmed {
        background: #dbeafe;
        color: #2563eb;
    }

    .grocery-dashboard-order-status.delivered {
        background: #dcfce7;
        color: #16a34a;
    }

/* Bottom Row */
.grocery-dashboard-bottom {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-top: 20px;
}

/* Stock Summary */
.grocery-dashboard-stock {
    background: #f8fafc;
    border-radius: 10px;
    padding: 15px;
    border: 1px solid #f1f5f9;
}

.grocery-dashboard-stock-title {
    font-size: 0.85rem;
    font-weight: 600;
    color: #1a1a2e;
    margin-bottom: 12px;
}

.grocery-dashboard-donut {
    display: flex;
    align-items: center;
    gap: 20px;
}

.grocery-dashboard-donut-ring {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: conic-gradient(#16a34a 0% 60%, #f59e0b 60% 80%, #ef4444 80% 100%);
    position: relative;
    flex-shrink: 0;
}

.grocery-dashboard-donut-hole {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 55px;
    height: 55px;
    background: #f8fafc;
    border-radius: 50%;
}

.grocery-dashboard-legend {
    font-size: 0.75rem;
}

.grocery-dashboard-legend-item {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}

.grocery-dashboard-legend-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

    .grocery-dashboard-legend-dot.green {
        background: #16a34a;
    }

    .grocery-dashboard-legend-dot.orange {
        background: #f59e0b;
    }

    .grocery-dashboard-legend-dot.red {
        background: #ef4444;
    }

/* Top Selling */
.grocery-dashboard-top {
    background: #f8fafc;
    border-radius: 10px;
    padding: 15px;
    border: 1px solid #f1f5f9;
}

.grocery-dashboard-top-title {
    font-size: 0.85rem;
    font-weight: 600;
    color: #1a1a2e;
    margin-bottom: 12px;
}

.grocery-dashboard-top-item {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

    .grocery-dashboard-top-item:last-child {
        margin-bottom: 0;
    }

.grocery-dashboard-top-name {
    font-size: 0.75rem;
    font-weight: 500;
    color: #1a1a2e;
    min-width: 80px;
}

.grocery-dashboard-top-bar {
    flex: 1;
    height: 6px;
    background: #e2e8f0;
    border-radius: 10px;
    overflow: hidden;
}

.grocery-dashboard-top-bar-fill {
    height: 100%;
    border-radius: 10px;
}

    .grocery-dashboard-top-bar-fill.green {
        background: #16a34a;
    }

    .grocery-dashboard-top-bar-fill.orange {
        background: #f59e0b;
    }

    .grocery-dashboard-top-bar-fill.blue {
        background: #3b82f6;
    }

.grocery-dashboard-top-qty {
    font-size: 0.7rem;
    color: #64748b;
    min-width: 40px;
    text-align: right;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 991px) {
    .grocery-dashboard-content {
        padding-right: 0;
        margin-bottom: 50px;
        text-align: center;
    }

    .grocery-dashboard-list-item {
        justify-content: center;
    }

    .grocery-dashboard-title {
        font-size: 2rem;
    }
}

@media (max-width: 768px) {
    .grocery-dashboard-stats {
        grid-template-columns: repeat(2, 1fr);
    }

    .grocery-dashboard-grid {
        grid-template-columns: 1fr;
    }

    .grocery-dashboard-bottom {
        grid-template-columns: 1fr;
    }

    .grocery-dashboard-title {
        font-size: 1.6rem;
    }
}


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

.grocery-industries-section {
    position: relative;
    padding: 100px 0;
    background: #f8fbf8;
    overflow: hidden;
}

    .grocery-industries-section::before {
        content: "";
        position: absolute;
        width: 380px;
        height: 380px;
        border-radius: 50%;
        background: rgba(34, 197, 94, 0.08);
        top: -180px;
        left: -180px;
    }

    .grocery-industries-section::after {
        content: "";
        position: absolute;
        width: 320px;
        height: 320px;
        border-radius: 50%;
        background: rgba(16, 185, 129, 0.06);
        right: -150px;
        bottom: -150px;
    }

/*=========================
        HEADER
==========================*/

.grocery-industries-badge {
    display: inline-block;
    padding: 8px 20px;
    background: rgba(34, 197, 94, .12);
    color: #16a34a;
    border-radius: 30px;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 18px;
}

.grocery-industries-title {
    font-size: 46px;
    font-weight: 800;
    color: #111827;
    margin-bottom: 18px;
    line-height: 1.2;
}

    .grocery-industries-title span {
        color: #16a34a;
    }

.grocery-industries-subtitle {
    max-width: 760px;
    margin: auto;
    font-size: 17px;
    color: #64748b;
    line-height: 1.8;
}

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

.grocery-industries-card {
    position: relative;
    height: 100%;
    background: #ffffff;
    border-radius: 22px;
    padding: 40px 30px;
    text-align: center;
    border: 1px solid #edf2f7;
    transition: all .35s ease;
    overflow: hidden;
    box-shadow: 0 10px 35px rgba(0,0,0,.04);
}

    .grocery-industries-card::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 5px;
        background: linear-gradient(90deg,#22c55e,#16a34a);
        transform: scaleX(0);
        transform-origin: left;
        transition: .4s;
    }

    .grocery-industries-card:hover::before {
        transform: scaleX(1);
    }

    .grocery-industries-card:hover {
        transform: translateY(-10px);
        border-color: #22c55e;
        box-shadow: 0 22px 50px rgba(22,163,74,.15);
    }

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

.grocery-industries-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 25px;
    border-radius: 50%;
    background: linear-gradient(135deg,#22c55e,#16a34a);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: .4s;
    box-shadow: 0 10px 25px rgba(34,197,94,.25);
}

    .grocery-industries-icon i {
        font-size: 32px;
        color: #ffffff;
    }

.grocery-industries-card:hover .grocery-industries-icon {
    transform: rotate(10deg) scale(1.08);
}

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

.grocery-industries-card h5 {
    font-size: 22px;
    font-weight: 700;
    color: #111827;
    margin-bottom: 15px;
    transition: .3s;
}

.grocery-industries-card p {
    margin: 0;
    color: #6b7280;
    line-height: 1.8;
    font-size: 15px;
}

.grocery-industries-card:hover h5 {
    color: #16a34a;
}

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

@media (max-width:1199px) {

    .grocery-industries-title {
        font-size: 40px;
    }
}

@media (max-width:991px) {

    .grocery-industries-section {
        padding: 80px 0;
    }

    .grocery-industries-title {
        font-size: 36px;
    }

    .grocery-industries-card {
        padding: 35px 25px;
    }
}

@media (max-width:767px) {

    .grocery-industries-section {
        padding: 70px 0;
    }

    .grocery-industries-title {
        font-size: 30px;
    }

    .grocery-industries-subtitle {
        font-size: 15px;
    }

    .grocery-industries-icon {
        width: 70px;
        height: 70px;
    }

        .grocery-industries-icon i {
            font-size: 28px;
        }

    .grocery-industries-card h5 {
        font-size: 20px;
    }
}

@media (max-width:575px) {

    .grocery-industries-section {
        padding: 60px 0;
    }

    .grocery-industries-title {
        font-size: 26px;
    }

    .grocery-industries-card {
        padding: 30px 20px;
    }

    .grocery-industries-icon {
        width: 65px;
        height: 65px;
    }

        .grocery-industries-icon i {
            font-size: 24px;
        }
}

/*==================================================
        GROCERY AI FEATURES SECTION
==================================================*/

.Grocery-aifeatures-section {
    position: relative;
    padding: 100px 0;
    background: #ffffff;
    overflow: hidden;
}

    .Grocery-aifeatures-section::before {
        content: "";
        position: absolute;
        width: 420px;
        height: 420px;
        background: rgba(34,197,94,.05);
        border-radius: 50%;
        left: -180px;
        top: -180px;
    }

    .Grocery-aifeatures-section::after {
        content: "";
        position: absolute;
        width: 350px;
        height: 350px;
        background: rgba(34,197,94,.04);
        border-radius: 50%;
        right: -150px;
        bottom: -150px;
    }

/*==========================
        HEADER
===========================*/

.Grocery-aifeatures-badge {
    display: inline-block;
    padding: 8px 20px;
    background: #e8f9ee;
    color: #16a34a;
    border-radius: 50px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1px;
    margin-bottom: 18px;
    text-transform: uppercase;
}

.Grocery-aifeatures-title {
    font-size: 46px;
    font-weight: 800;
    color: #111827;
    margin-bottom: 20px;
    line-height: 1.2;
}

    .Grocery-aifeatures-title span {
        color: #16a34a;
    }

.Grocery-aifeatures-subtitle {
    max-width: 760px;
    margin: auto;
    font-size: 17px;
    color: #64748b;
    line-height: 1.8;
}

/*==========================
        FEATURE LIST
===========================*/

.Grocery-aifeatures-list {
    display: flex;
    flex-direction: column;
    gap: 28px;
}

.Grocery-aifeatures-item {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    position: relative;
}

    .Grocery-aifeatures-item::after {
        content: "";
        position: absolute;
        top: 34px;
        width: 70px;
        height: 2px;
        border-top: 2px dashed #cbd5e1;
    }

.col-lg-4:first-child .Grocery-aifeatures-item::after {
    right: -70px;
}

.col-lg-4:last-child .Grocery-aifeatures-item::after {
    left: -70px;
}

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

.Grocery-aifeatures-icon {
    width: 62px;
    height: 62px;
    min-width: 62px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 25px rgba(0,0,0,.08);
    transition: .35s;
}

    .Grocery-aifeatures-icon i {
        font-size: 24px;
        color: #fff;
    }

.Grocery-aifeatures-item:hover .Grocery-aifeatures-icon {
    transform: rotate(12deg) scale(1.08);
}

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

.Grocery-aifeatures-green {
    background: linear-gradient(135deg,#22c55e,#16a34a);
}

.Grocery-aifeatures-blue {
    background: linear-gradient(135deg,#3b82f6,#2563eb);
}

.Grocery-aifeatures-purple {
    background: linear-gradient(135deg,#8b5cf6,#7c3aed);
}

.Grocery-aifeatures-red {
    background: linear-gradient(135deg,#ef4444,#dc2626);
}

.Grocery-aifeatures-orange {
    background: linear-gradient(135deg,#fb923c,#f97316);
}

.Grocery-aifeatures-cyan {
    background: linear-gradient(135deg,#06b6d4,#0891b2);
}

.Grocery-aifeatures-yellow {
    background: linear-gradient(135deg,#facc15,#eab308);
}

.Grocery-aifeatures-lime {
    background: linear-gradient(135deg,#84cc16,#65a30d);
}

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

.Grocery-aifeatures-content h5 {
    font-size: 20px;
    font-weight: 700;
    color: #111827;
    margin-bottom: 8px;
    transition: .3s;
}

.Grocery-aifeatures-content p {
    margin: 0;
    color: #64748b;
    line-height: 1.7;
    font-size: 15px;
}

.Grocery-aifeatures-item:hover h5 {
    color: #16a34a;
}

/*==========================
        CENTER
===========================*/

.Grocery-aifeatures-center {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 520px;
}

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

.Grocery-aifeatures-glow {
    position: absolute;
    width: 340px;
    height: 340px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(34,197,94,.25), rgba(34,197,94,.08), transparent 75%);
    animation: GlowPulse 4s infinite;
}

/*==========================
        ROBOT CIRCLE
===========================*/

.Grocery-aifeatures-circle {
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    border: 2px solid rgba(34,197,94,.15);
    box-shadow: 0 0 0 25px rgba(34,197,94,.05), 0 30px 70px rgba(34,197,94,.15);
}

    .Grocery-aifeatures-circle::before {
        content: "";
        position: absolute;
        width: 340px;
        height: 340px;
        border-radius: 50%;
        border: 2px dashed rgba(34,197,94,.15);
        animation: RotateCircle 25s linear infinite;
    }

    .Grocery-aifeatures-circle::after {
        content: "";
        position: absolute;
        width: 250px;
        height: 250px;
        border-radius: 50%;
        border: 2px dashed rgba(59,130,246,.12);
        animation: RotateReverse 20s linear infinite;
    }

/*==========================
        ROBOT
===========================*/

.Grocery-aifeatures-robot {
    width: 220px;
    position: relative;
    z-index: 5;
    animation: FloatRobot 4s ease-in-out infinite;
}

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

@keyframes FloatRobot {

    0% {
        transform: translateY(0px);
    }

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

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

@keyframes GlowPulse {

    0% {
        transform: scale(1);
        opacity: .5;
    }

    50% {
        transform: scale(1.08);
        opacity: 1;
    }

    100% {
        transform: scale(1);
        opacity: .5;
    }
}

@keyframes RotateCircle {

    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes RotateReverse {

    from {
        transform: rotate(360deg);
    }

    to {
        transform: rotate(0deg);
    }
}

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

@media(max-width:1199px) {

    .Grocery-aifeatures-title {
        font-size: 40px;
    }

    .Grocery-aifeatures-circle {
        width: 260px;
        height: 260px;
    }

    .Grocery-aifeatures-robot {
        width: 190px;
    }
}

@media(max-width:991px) {

    .Grocery-aifeatures-section {
        padding: 80px 0;
    }

    .Grocery-aifeatures-title {
        font-size: 36px;
    }

    .Grocery-aifeatures-center {
        min-height: 360px;
        margin: 50px 0;
    }

    .Grocery-aifeatures-item::after {
        display: none;
    }
}

@media(max-width:767px) {

    .Grocery-aifeatures-section {
        padding: 70px 0;
    }

    .Grocery-aifeatures-title {
        font-size: 30px;
    }

    .Grocery-aifeatures-subtitle {
        font-size: 15px;
    }

    .Grocery-aifeatures-item {
        gap: 15px;
    }

    .Grocery-aifeatures-icon {
        width: 55px;
        height: 55px;
        min-width: 55px;
    }

        .Grocery-aifeatures-icon i {
            font-size: 20px;
        }

    .Grocery-aifeatures-content h5 {
        font-size: 18px;
    }

    .Grocery-aifeatures-circle {
        width: 220px;
        height: 220px;
    }

    .Grocery-aifeatures-robot {
        width: 160px;
    }
}

@media(max-width:575px) {

    .Grocery-aifeatures-section {
        padding: 60px 0;
    }

    .Grocery-aifeatures-title {
        font-size: 26px;
    }

    .Grocery-aifeatures-center {
        min-height: 280px;
    }

    .Grocery-aifeatures-circle {
        width: 190px;
        height: 190px;
    }

    .Grocery-aifeatures-robot {
        width: 135px;
    }

    .Grocery-aifeatures-content p {
        font-size: 14px;
    }
}

/*=========================
  Grocery how cite works
=========================*/
.grocery-how-it-works {
    background-color: #ffffff;
    padding: 50px 20px;
    display: flex;
    justify-content: center;
    align-items: center;
/*    min-height: 100vh;*/
}

.grocery-container {
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
}

/* Header Styling */
.grocery-header {
    text-align: center;
    margin-bottom: 50px;
}

.grocery-title {
    font-size: 32px;
    font-weight: 700;
    color: var(--bs-gray-300);
    margin-bottom: 10px;
}

.grocery-subtitle {
    font-size: 16px;
    color: #6b7280;
    font-weight: 400;
}

/* Steps Wrapper */
.grocery-steps-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 10px;
    padding: 30px;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    background-color: #f9fafb; /* Very light grey background for the strip */
}

/* Individual Step Card */
.grocery-step-card {
    flex: 1 1 120px; /* Flex grow/shrink to fit layout */
    min-width: 100px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Icon Box Styling */
.grocery-icon-box {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 24px;
    margin-bottom: 15px;
    background-color: #f0fdf4; /* Default fallback */
}

/* Icon Colors & Backgrounds matching image */
.icon-green {
    background-color: #e6f9ed;
    color: #3bb77e;
}

.icon-blue {
    background-color: #e0f2fe;
    color: #3b82f6;
}

.icon-purple {
    background-color: #f3e8ff;
    color: #9333ea;
}

.icon-orange {
    background-color: #fff7ed;
    color: #f97316;
}

/* Step Text Styling */
.grocery-step-title {
    font-size: 14px;
    font-weight: 700;
    color: #111827;
    margin-bottom: 6px;
}

.grocery-step-desc {
    font-size: 12px;
    color: #6b7280;
    line-height: 1.4;
    max-width: 140px;
}

/* Arrow Styling */
.grocery-arrow {
    color: #3bb77e; /* Green arrow */
    font-size: 14px;
    margin-top: 25px; /* Align with icons */
    display: flex;
    align-items: center;
}

/* Responsive Design for Mobile */
@media (max-width: 768px) {
    .grocery-steps-wrapper {
/*        flex-direction: column;*/
        align-items: center;
        gap: 30px;
    }

    .grocery-arrow {
        transform: rotate(90deg);
        margin: 0;
    }

    .grocery-step-card {
        width: 100%;
        max-width: 300px;
    }
}

/*=========================
    grocery-client
=========================*/
/* Main Section - Dark Teal Background */
.grocery-clients {
    background: linear-gradient(135deg, #020617 0%, #0f172a 50%, #1e293b 100%);
    padding: 60px 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 50vh;
}

.grocery-clients-container {
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
}

/* Header Styling */
.grocery-clients-header {
    text-align: center;
    margin-bottom: 40px;
}

.grocery-clients-title {
    font-size: 32px;
    font-weight: 700;
    color: #ffffff;
    letter-spacing: 0.5px;
}

/* Testimonial Grid */
.grocery-clients-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
    margin-bottom: 30px;
}

/* Individual Card Styling */
.grocery-clients-card {
    background-color: #ffffff0f; /* Dark card background */
    border-radius: 12px;
    padding: 25px 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: transform 0.2s ease;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

    .grocery-clients-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
    }

/* Content area (Avatar + Text) */
.grocery-clients-content {
    display: flex;
    gap: 15px;
    margin-bottom: 20px;
    align-items: flex-start;
}

/* Avatar Styling */
.grocery-clients-avatar {
    flex-shrink: 0;
}

    .grocery-clients-avatar img {
        width: 45px;
        height: 45px;
        border-radius: 50%;
        object-fit: cover;
        border: 2px solid #ffd700; /* Gold border around avatar */
    }

/* Testimonial Text */
.grocery-clients-text {
    font-size: 14px;
    color: #e0e0e0;
    line-height: 1.6;
    font-weight: 400;
}

/* Client Info (Name + Role) */
.grocery-clients-info {
    margin-top: auto;
}

.grocery-clients-name {
    font-size: 15px;
    font-weight: 600;
    color: #ffffff;
    margin-bottom: 4px;
}

.grocery-clients-role {
    font-size: 13px;
    color: #b0b0b0;
    font-weight: 400;
}

/* Pagination Dots */
.grocery-clients-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 10px;
}

.grocery-clients-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.2);
    cursor: pointer;
    transition: all 0.3s ease;
}

    .grocery-clients-dot.active {
        background-color: #ffffff;
        width: 10px;
        height: 10px;
    }

    .grocery-clients-dot:hover {
        background-color: rgba(255, 255, 255, 0.5);
    }

/* Responsive Design */
@media (max-width: 992px) {
    .grocery-clients-grid {
        grid-template-columns: repeat(1, 1fr);
    }
}

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

    .grocery-clients-title {
        font-size: 26px;
    }
}

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

.grocerycta-section {
    background: #ffffff;
    padding: 80px 20px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.grocerycta-container {
    max-width: 1300px;
    width: 100%;
    display: flex;
    gap: 40px;
    align-items: stretch;
}

/*=======================
 FAQ COLUMN
=======================*/

.grocerycta-faq-title {
    font-size: 32px;
    font-weight: 700;
    color: #111827;
    margin-bottom: 24px;
}

.grocerycta-faq-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.grocerycta-faq-item {
    background: #fff;
    border: 1px solid #edf2f7;
    border-radius: 12px;
    padding: 14px 18px;
    cursor: pointer;
    transition: .3s;
    box-shadow: 0 2px 10px rgba(0,0,0,.04);
}

    .grocerycta-faq-item:hover {
        border-color: #10b981;
        transform: translateY(-2px);
        box-shadow: 0 8px 20px rgba(16,185,129,.08);
    }

.grocerycta-faq-question {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
}

    .grocerycta-faq-question span {
        font-size: 15px;
        font-weight: 600;
        color: #111827;
        line-height: 1.5;
    }

    .grocerycta-faq-question i {
        width: 28px;
        height: 28px;
        min-width: 28px;
        border-radius: 50%;
        background: #ecfdf5;
        color: #10b981;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 12px;
        transition: .3s;
    }

.grocerycta-faq-answer {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    margin-top: 0;
    color: #6b7280;
    font-size: 14px;
    line-height: 1.7;
    transition: .35s ease;
}

.grocerycta-faq-item.active {
    border-color: #10b981;
    box-shadow: 0 10px 25px rgba(16,185,129,.12);
}

    .grocerycta-faq-item.active .grocerycta-faq-answer {
        max-height: 180px;
        opacity: 1;
        margin-top: 12px;
    }

    .grocerycta-faq-item.active .grocerycta-faq-question i {
        background: #10b981;
        color: #fff;
        transform: rotate(45deg);
    }

@media(max-width:768px) {

    .grocerycta-faq-title {
        font-size: 28px;
    }

    .grocerycta-faq-item {
        padding: 14px 16px;
    }

    .grocerycta-faq-question span {
        font-size: 14px;
    }

    .grocerycta-faq-answer {
        font-size: 13px;
    }
}

/*=======================
 CTA BANNER
=======================*/

.grocerycta-banner-column {
    margin-top: 40px;
    flex: 1.2;
    background: linear-gradient( 135deg, #0c8a4b 0%, #08914d 50%, #047857 100% );
    border-radius: 28px;
    padding: 50px;
    position: relative;
    overflow: hidden;
    min-height: 450px;
    display: flex;
    align-items: center;
}

    /* Decorative Shapes */

    .grocerycta-banner-column::before {
        content: "";
        position: absolute;
        width: 300px;
        height: 300px;
        top: -120px;
        right: -120px;
        background: rgba(255,255,255,.08);
        border-radius: 50%;
    }

    .grocerycta-banner-column::after {
        content: "";
        position: absolute;
        width: 180px;
        height: 180px;
        bottom: -60px;
        left: -60px;
        background: rgba(255,255,255,.06);
        border-radius: 50%;
    }

.grocerycta-banner-content {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 30px;
    position: relative;
    z-index: 2;
}

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

.grocerycta-text-content {
    flex: 1;
    max-width: 55%;
}

.grocerycta-banner-title {
    font-size: 42px;
    font-weight: 800;
    color: #ffffff;
    line-height: 1.15;
    margin-bottom: 18px;
}

.grocerycta-banner-desc {
    color: rgba(255,255,255,.85);
    font-size: 16px;
    line-height: 1.8;
    margin-bottom: 30px;
}

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

.grocerycta-buttons {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}

.grocerycta-btn-white {
    background: #ffffff;
    color: #047857;
    border: none;
    padding: 14px 28px;
    border-radius: 50px;
    font-weight: 700;
    font-size: 15px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: .3s;
}

    .grocerycta-btn-white:hover {
        transform: translateY(-3px);
        box-shadow: 0 15px 25px rgba(0,0,0,.18);
    }

.grocerycta-btn-outline {
    background: transparent;
    color: #ffffff;
    border: 1.5px solid rgba(255,255,255,.4);
    padding: 14px 28px;
    border-radius: 50px;
    font-weight: 700;
    font-size: 15px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: .3s;
}

    .grocerycta-btn-outline:hover {
        background: rgba(255,255,255,.12);
        border-color: #ffffff;
    }

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

.grocerycta-image-wrapper {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    min-height: 350px;
}

/* Glass Background Panel */

.grocerycta-image-bg {
    position: absolute;
    width: 85%;
    height: 80%;
    background: rgba(255,255,255,0.08);
    backdrop-filter: blur(14px);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 24px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.25);
    z-index: 1;
}

/* Main Image */

.grocerycta-banner-image {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 550px;
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 25px 45px rgba(0,0,0,0.25));
    animation: groceryFloat 5s ease-in-out infinite;
}

/* Floating Animation */

@keyframes groceryFloat {

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

    50% {
        transform: translateY(-12px);
    }
}
/*=======================
 RESPONSIVE
=======================*/

@media (max-width: 992px) {

    .grocerycta-container {
        flex-direction: column;
    }

    .grocerycta-banner-content {
        flex-direction: column;
        text-align: center;
    }

    .grocerycta-text-content {
        max-width: 100%;
    }

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

    .grocerycta-image-wrapper {
        margin-top: 30px;
    }

    .grocerycta-banner-title {
        font-size: 34px;
    }
}

@media (max-width: 768px) {

    .grocerycta-section {
        padding: 60px 15px;
    }

    .grocerycta-banner-column {
        padding: 35px 25px;
    }

    .grocerycta-faq-title {
        font-size: 28px;
    }

    .grocerycta-banner-title {
        font-size: 30px;
    }

    .grocerycta-laptop-mockup {
        width: 220px;
        height: 150px;
    }
}

@media (max-width: 576px) {

    .grocerycta-buttons {
        flex-direction: column;
    }

    .grocerycta-btn-white,
    .grocerycta-btn-outline {
        width: 100%;
        justify-content: center;
    }

    .grocerycta-banner-title {
        font-size: 26px;
    }

    .grocerycta-faq-title {
        font-size: 24px;
    }
}


/*===============================
       School management system
/* ==========================================
   SCHOOL MANAGEMENT HERO SECTION
========================================== */

.school-management-hero {
    position: relative;
    overflow: hidden;
    padding: 130px 0 60px;
    background: linear-gradient( 135deg, #0f172a 0%, #16213e 30%, #1e293b 70%, #0f172a 100% );
}

    /* MAIN LAYOUT */

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

/* LEFT SIDE */

.school-management-content {
    flex: 0 0 45%;
    max-width: 45%;
}

.school-management-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 22px;
    border-radius: 50px;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.15);
    backdrop-filter: blur(10px);
    color: #6ea8ff;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 25px;
}

    .school-management-badge i {
        font-size: 14px;
    }

.school-management-title {
    font-size: 44px;
    line-height: 1.08;
    font-weight: 800;
    color: #ffffff;
    margin: 0 0 25px;
}

    .school-management-title span {
        color: #4f8cff;
        position: relative;
    }

        .school-management-title span::after {
            content: "";
            position: absolute;
            left: 0;
            bottom: -12px;
            width: 100%;
            height: 12px;
            background: linear-gradient(90deg, #3461ff, #6ea8ff);
            border-radius: 30px;
            opacity: .4;
        }

.school-management-description {
    font-size: 18px;
    line-height: 1.8;
    color: rgba(255,255,255,.75);
    margin-bottom: 35px;
    max-width: 550px;
}

/* BUTTONS */

.school-management-buttons {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-bottom: 45px;
}

.school-btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 16px 34px;
    border-radius: 50px;
    background: linear-gradient(135deg, #3461ff, #1e49f2);
    color: #fff;
    text-decoration: none;
    font-size: 15px;
    font-weight: 600;
    transition: .35s ease;
}

    .school-btn-primary:hover {
        transform: translateY(-3px);
    }

.school-btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 16px 34px;
    border-radius: 50px;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.15);
    color: #fff;
    text-decoration: none;
    font-size: 15px;
    font-weight: 600;
    transition: .35s ease;
}

    .school-btn-secondary:hover {
        background: rgba(255,255,255,.15);
    }

/* STATS */

.school-management-stats {
    display: flex;
    flex-wrap: nowrap;
    gap: 12px;
    width: 100%;
}

.school-stat-card {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px;
    border-radius: 18px;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.08);
    backdrop-filter: blur(10px);
    transition: .3s ease;
}

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

.school-stat-icon {
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(52,97,255,.15);
    color: #4f8cff;
    font-size: 16px;
}

.school-stat-card h4 {
    margin: 0;
    color: #ffffff;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.2;
}

.school-stat-card p {
    margin: 0;
    color: rgba(255,255,255,.70);
    font-size: 11px;
    line-height: 1.3;
}

/* RIGHT SIDE */

.school-management-image-wrapper {
    flex: 0 0 55%;
    max-width: 55%;
    position: relative;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.school-management-dashboard-image {
    width: 100%;
    max-width: 760px;
    display: block;
    border-radius: 24px;
    filter: drop-shadow( 0 25px 60px rgba(52,97,255,.20) );
    position: relative;
    z-index: 1;
}

/* GLOW EFFECT */

.school-management-image-wrapper::before {
    content: "";
    position: absolute;
    width: 450px;
    height: 450px;
    right: 80px;
    top: 50%;
    transform: translateY(-50%);
    background: radial-gradient( circle, rgba(52,97,255,.25) 0%, rgba(52,97,255,0) 70% );
    pointer-events: none;
    z-index: 0;
}

/* RESPONSIVE */

@media (max-width:1200px) {

    .school-management-title {
        font-size: 56px;
    }

    .school-stat-card p {
        display: none;
    }
}

@media (max-width:991px) {

    .school-management-hero .container {
        flex-direction: column;
    }

    .school-management-content,
    .school-management-image-wrapper {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .school-management-content {
        text-align: center;
    }

    .school-management-title {
        font-size: 50px;
    }

    .school-management-description {
        margin-left: auto;
        margin-right: auto;
    }

    .school-management-buttons,
    .school-management-stats {
        justify-content: center;
    }

    .school-management-stats {
        flex-wrap: wrap;
    }

    .school-management-image-wrapper {
        justify-content: center;
        margin-top: 40px;
    }
}

@media (max-width:767px) {

    .school-management-hero {
        padding: 130px 0;
    }

    .school-management-title {
        font-size: 40px;
    }

    .school-management-description {
        font-size: 16px;
    }

    .school-management-buttons {
        flex-direction: column;
    }

    .school-btn-primary,
    .school-btn-secondary {
        width: 100%;
        justify-content: center;
    }

/*    .school-management-stats {
        flex-direction: column;
    }*/

    .school-stat-card {
        width: 100%;
    }
}

@media (max-width:575px) {

    .school-management-title {
        font-size: 34px;
    }

    .school-management-badge {
        font-size: 13px;
        padding: 8px 18px;
    }
}

/*============================
school Features
============================*/
.school-management-software-system-features {
    padding: 100px 0;
    background: linear-gradient(135deg,#f8fbff,#eef4ff);
    overflow: hidden;
}

.school-management-software-system-features-container{
    max-width:1400px;
    margin:auto;
    display:flex;
    gap:70px;
    align-items:center;
}

/* LEFT */

.school-management-software-system-features-left{
    flex:1;
}

.features-badge{
    color:#2563eb;
    font-weight:700;
    font-size:13px;
    margin-bottom:20px;
}

.features-title{
    font-size:52px;
    line-height:1.15;
    font-weight:800;
    color:#0f172a;
    margin-bottom:20px;
}

.features-title span{
    color:#2563eb;
}

.features-desc{
    color:#64748b;
    font-size:17px;
    line-height:1.8;
    max-width:550px;
    margin-bottom:35px;
}
.features-grid {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 18px;
    width: 100%;
}

.feature-card {
    display: flex;
    align-items: center;
    gap: 16px;
    background: #fff;
    border: 1px solid #edf2ff;
    border-radius: 18px;
    padding: 18px 22px;
    min-height: 88px;
    box-shadow: 0 8px 24px rgba(15,23,42,.05);
    transition: .3s ease;
}

    .feature-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 15px 35px rgba(15,23,42,.08);
    }

.feature-icon {
    width: 46px;
    height: 46px;
    min-width: 46px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

.feature-card h4 {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: #111827;
    line-height: 1.4;
}

/* Icon Colors */

.blue {
    background: #dbeafe;
    color: #2563eb;
}

.green {
    background: #dcfce7;
    color: #16a34a;
}

.orange {
    background: #ffedd5;
    color: #f97316;
}

.purple {
    background: #ede9fe;
    color: #7c3aed;
}

.cyan {
    background: #cffafe;
    color: #0891b2;
}

/* Tablet */

@media (max-width:992px) {

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

    .feature-card {
        min-height: 80px;
        padding: 16px 18px;
    }
}

/* Mobile */

@media (max-width:576px) {

    .feature-card {
        gap: 14px;
        padding: 14px 16px;
        border-radius: 16px;
    }

    .feature-icon {
        width: 42px;
        height: 42px;
        min-width: 42px;
        font-size: 16px;
    }

    .feature-card h4 {
        font-size: 15px;
    }
}

/*===============================
 school management how it works
===============================*/
.school-management-how-it-works {
    background: linear-gradient(135deg, #f0f7ff 0%, #e8f4ff 100%);
    padding: 60px 20px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.school-management-how-it-works-container {
    max-width: 1200px;
    width: 100%;
    padding: 20px;
}

/* =============================================
   HEADER
   ============================================= */
.school-management-how-it-works-header {
    text-align: center;
    margin-bottom: 50px;
}

.school-management-how-it-works-badge {
    display: inline-block;
    font-size: 13px;
    font-weight: 700;
    color: #2563eb;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.school-management-how-it-works-title {
    font-size: 36px;
    font-weight: 800;
    color: #0f172a;
    margin-top: 5px;
}

/* =============================================
   STEPS ROW
   ============================================= */
.school-management-how-it-works-steps {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

/* Individual Step Card */
.school-management-how-it-works-step {
    flex: 1;
    min-width: 200px;
    max-width: 260px;
    background: #ffffff;
    border-radius: 50px;
    padding: 20px 25px;
    box-shadow: 0 4px 20px rgba(37, 99, 235, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.8);
    transition: all 0.3s ease;
}

    .school-management-how-it-works-step:hover {
        transform: translateY(-5px);
        box-shadow: 0 8px 30px rgba(37, 99, 235, 0.15);
    }

.school-management-how-it-works-step-content {
    display: flex;
    align-items: center;
    gap: 16px;
}

/* Icon Wrapper */
.school-management-how-it-works-icon-wrapper {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #eff6ff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: #2563eb;
    flex-shrink: 0;
}

    /* Icon Variations */
    .school-management-how-it-works-icon-wrapper.purple {
        background: #f3e8ff;
        color: #7c3aed;
    }

    .school-management-how-it-works-icon-wrapper.blue {
        background: #dbeafe;
        color: #2563eb;
    }

    .school-management-how-it-works-icon-wrapper.purple-light {
        background: #ede9fe;
        color: #6d28d9;
    }

/* Text Content */
.school-management-how-it-works-text h4 {
    font-size: 15px;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 2px;
}

.school-management-how-it-works-text p {
    font-size: 12px;
    color: #64748b;
    line-height: 1.4;
}

/* Arrows */
.school-management-how-it-works-arrow {
    color: #93c5fd;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* =============================================
   RESPONSIVE
   ============================================= */
@media (max-width: 992px) {
    .school-management-how-it-works-title {
        font-size: 30px;
    }

    .school-management-how-it-works-steps {
        gap: 20px;
    }

    .school-management-how-it-works-step {
        min-width: 160px;
        max-width: 220px;
        padding: 16px 20px;
    }

    .school-management-how-it-works-arrow {
        display: none;
    }
}

@media (max-width: 768px) {
    .school-management-how-it-works-steps {
        flex-direction: column;
        align-items: center;
    }

    .school-management-how-it-works-step {
        max-width: 320px;
        width: 100%;
        border-radius: 30px;
    }

    .school-management-how-it-works-title {
        font-size: 26px;
    }

    .school-management-how-it-works-arrow {
        transform: rotate(90deg);
        padding: 5px 0;
        display: flex;
    }
}

/* ===================================
   SCHOOL MANAGEMENT FAQ
=================================== */

.school-management-faq-section {
    padding: 100px 20px;
    background: linear-gradient( 180deg, #ffffff 0%, #f8fbff 100% );
}

.school-management-faq-container {
    max-width: 1100px;
    margin: auto;
}

.school-management-faq-header {
    text-align: center;
    margin-bottom: 60px;
}

.school-management-faq-badge {
    display: inline-block;
    padding: 10px 22px;
    border-radius: 50px;
    background: rgba(37,99,235,.08);
    color: #2563eb;
    font-size: 14px;
    font-weight: 700;
}

.school-management-faq-title {
    margin-top: 20px;
    font-size: 46px;
    font-weight: 800;
    line-height: 1.2;
    color: #0f172a;
}

    .school-management-faq-title span {
        color: #2563eb;
    }

.school-management-faq-description {
    max-width: 700px;
    margin: 20px auto 0;
    font-size: 17px;
    color: #64748b;
    line-height: 1.8;
}

.school-management-faq-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.school-management-faq-item {
    background: #fff;
    border-radius: 18px;
    overflow: hidden;
    border: 1px solid #edf2f7;
    transition: all .3s ease;
    box-shadow: 0 5px 25px rgba(15,23,42,.04);
}

    .school-management-faq-item.active {
        border-color: #2563eb;
    }

.school-management-faq-question {
    width: 100%;
    border: none;
    outline: none;
    background: transparent;
    padding: 24px 28px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    font-size: 18px;
    font-weight: 700;
    color: #0f172a;
}

.school-management-faq-icon {
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #eff6ff;
    color: #2563eb;
    font-size: 22px;
    font-weight: 600;
    flex-shrink: 0;
}

.school-management-faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: all .35s ease;
}

    .school-management-faq-answer p {
        padding: 0 28px 28px;
        color: #64748b;
        line-height: 1.8;
        font-size: 15px;
    }

.school-management-faq-item.active .school-management-faq-answer {
    max-height: 250px;
}

.school-management-faq-item.active .school-management-faq-icon {
    background: #2563eb;
    color: #fff;
}

/* Responsive */

@media(max-width:768px) {

    .school-management-faq-title {
        font-size: 32px;
    }

    .school-management-faq-question {
        font-size: 16px;
        padding: 20px;
    }

    .school-management-faq-answer p {
        padding: 0 20px 20px;
    }
}

/*============================
   school testimonial
============================*/
.school-clients-section {
    background: linear-gradient(135deg, #f0f7ff 0%, #e8f4ff 50%, #ffffff 100%);
    padding: 60px 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 60vh;
    position: relative;
    overflow: hidden;
}

.school-clients-container {
    max-width: 1200px;
    width: 100%;
    padding: 20px;
}

/* =============================================
   HEADER
   ============================================= */
.school-clients-header {
    text-align: center;
    margin-bottom: 40px;
}

.school-clients-badge {
    display: inline-block;
    font-size: 13px;
    font-weight: 700;
    color: #2563eb;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 8px;
}

.school-clients-title {
    font-size: 34px;
    font-weight: 800;
    color: #0f172a;
    margin-top: 5px;
}

    .school-clients-title .highlight-blue {
        color: #2563eb;
    }

/* =============================================
   SLIDER WRAPPER
   ============================================= */
.school-clients-slider-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    position: relative;
}

/* Navigation Buttons */
.school-clients-nav-btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid #e5e7eb;
    background: #ffffff;
    color: #2563eb;
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    flex-shrink: 0;
}

    .school-clients-nav-btn:hover {
        background: #2563eb;
        color: #ffffff;
        border-color: #2563eb;
        box-shadow: 0 4px 15px rgba(37, 99, 235, 0.3);
    }

/* =============================================
   TESTIMONIALS GRID
   ============================================= */
.school-clients-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
    flex: 1;
}

/* Individual Testimonial Card */
.school-clients-card {
    color: var(--bs-gray-800);
    background: #ffffff;
    border-radius: 24px;
    padding: 30px 25px;
    box-shadow: 0 4px 20px rgba(37, 99, 235, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.8);
    transition: all 0.3s ease;
}

    .school-clients-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 8px 35px rgba(37, 99, 235, 0.12);
    }

.school-clients-card-content {
    display: flex;
    gap: 20px;
    align-items: flex-start;
}

/* Avatar */
.school-clients-avatar {
    flex-shrink: 0;
}

    .school-clients-avatar img {
        width: 72px;
        height: 72px;
        border-radius: 50%;
        object-fit: cover;
        border: 3px solid #e0e7ff;
    }

/* Review Content */
.school-clients-review {
    flex: 1;
}

/* Stars */
.school-clients-stars {
    color: #fbbf24;
    font-size: 14px;
    margin-bottom: 8px;
    letter-spacing: 2px;
}

/* Quote */
.school-clients-quote {
    font-size: 14px;
    color: #1f2937;
    line-height: 1.6;
    margin-bottom: 16px;
    font-weight: 400;
}

/* Author Information */
.school-clients-author {
    display: flex;
    flex-direction: column;
}

.school-clients-role {
    font-size: 12px;
    font-weight: 600;
    color: #0f172a;
}

.school-clients-name {
    font-size: 13px;
    color: #64748b;
    margin-top: 2px;
}

/* =============================================
   RESPONSIVE
   ============================================= */
@media (max-width: 1024px) {
    .school-clients-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .school-clients-title {
        font-size: 30px;
    }
}

@media (max-width: 768px) {
    .school-clients-grid {
        grid-template-columns: 1fr;
        max-width: 400px;
        margin: 0 auto;
    }

    .school-clients-nav-btn {
        display: none;
    }

    .school-clients-title {
        font-size: 26px;
    }

    .school-clients-card {
        padding: 24px 20px;
    }

    .school-clients-card-content {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .school-clients-avatar img {
        width: 80px;
        height: 80px;
    }
}

/*===========================
   school cta 
===========================*/
/* =========================
   SCHOOL CTA SECTION
========================= */

.school-cta-section {
    position: relative;
    padding: 100px 0;
    overflow: hidden;
    background: linear-gradient(135deg, #0f172a, #1e293b);
}

/* Floating Shapes */

.school-cta-shape {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
}

.school-cta-shape-1 {
    width: 350px;
    height: 350px;
    background: rgba(59,130,246,.25);
    top: -100px;
    left: -100px;
}

.school-cta-shape-2 {
    width: 350px;
    height: 350px;
    background: rgba(14,165,233,.25);
    bottom: -100px;
    right: -100px;
}

/* Main Wrapper */

.school-cta-wrapper {
    position: relative;
    z-index: 2;
    background: rgba(255,255,255,0.06);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 30px;
    padding: 70px;
}

/* Badge */

.school-cta-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255,255,255,.1);
    color: #60a5fa;
    padding: 10px 20px;
    border-radius: 50px;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 25px;
}

/* Heading */

.school-cta-title {
    color: #fff;
    font-size: 3rem;
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 25px;
}

    .school-cta-title span {
        background: linear-gradient(90deg,#38bdf8,#60a5fa);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }

/* Description */

.school-cta-description {
    color: rgba(255,255,255,.8);
    font-size: 18px;
    line-height: 1.8;
    margin-bottom: 30px;
}

/* Features */

.school-cta-features {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 15px;
    margin-bottom: 40px;
}

.school-cta-feature {
    color: #fff;
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 500;
}

    .school-cta-feature i {
        color: #22c55e;
        font-size: 18px;
    }

/* Buttons */

.school-cta-buttons {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}

.school-cta-btn-primary {
    background: linear-gradient(135deg,#2563eb,#06b6d4);
    color: #fff;
    border: none;
    padding: 14px 34px;
    border-radius: 60px;
    font-weight: 600;
    transition: .4s;
}

    .school-cta-btn-primary:hover {
        transform: translateY(-4px);
        color: #fff;
    }

.school-cta-btn-secondary {
    background: transparent;
    color: #fff;
    border: 1px solid rgba(255,255,255,.2);
    padding: 14px 34px;
    border-radius: 60px;
    transition: .4s;
}

    .school-cta-btn-secondary:hover {
        background: rgba(255,255,255,.1);
        color: #fff;
    }

/* Right Card */

.school-cta-card {
    background: #ffffff;
    border-radius: 25px;
    padding: 40px;
    text-align: center;
    box-shadow: 0 25px 60px rgba(0,0,0,.2);
}

.school-cta-card-icon {
    width: 90px;
    height: 90px;
    margin: auto;
    margin-bottom: 20px;
    border-radius: 50%;
    background: linear-gradient(135deg,#2563eb,#06b6d4);
    display: flex;
    align-items: center;
    justify-content: center;
}

    .school-cta-card-icon i {
        color: #fff;
        font-size: 36px;
    }

.school-cta-card h3 {
    font-size: 28px;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 15px;
}

.school-cta-card p {
    color: #64748b;
    line-height: 1.7;
}

/* Stats */

.school-cta-stats {
    display: flex;
    justify-content: space-between;
    gap: 15px;
    margin: 35px 0;
}

.school-cta-stat-box {
    flex: 1;
    background: #f8fafc;
    border-radius: 16px;
    padding: 15px;
}

    .school-cta-stat-box h4 {
        color: #2563eb;
        font-size: 24px;
        font-weight: 800;
        margin-bottom: 5px;
    }

    .school-cta-stat-box span {
        color: #64748b;
        font-size: 14px;
    }

/* CTA Button */

.school-cta-card-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    background: linear-gradient(135deg,#2563eb,#06b6d4);
    color: #fff;
    text-decoration: none;
    padding: 15px;
    border-radius: 15px;
    font-weight: 600;
    transition: .4s;
}

    .school-cta-card-btn:hover {
        color: #fff;
        transform: translateY(-3px);
    }

/* Responsive */

@media (max-width: 991px) {

    .school-cta-wrapper {
        padding: 40px;
    }

    .school-cta-title {
        font-size: 2.2rem;
    }

    .school-cta-card {
        margin-top: 40px;
    }

    .school-cta-features {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 576px) {

    .school-cta-section {
        padding: 70px 0;
    }

    .school-cta-wrapper {
        padding: 30px;
    }

    .school-cta-title {
        font-size: 1.8rem;
    }

    .school-cta-stats {
        flex-direction: column;
    }

    .school-cta-buttons {
        flex-direction: column;
    }

    .school-cta-btn-primary,
    .school-cta-btn-secondary {
        width: 100%;
    }
}

/*=========================
     HRM Software
=========================*/
/* ==========================================
   HRMS SECTION
========================================== */

.hrms-section {
    position: relative;
    overflow: hidden;
    padding: 130px 0 60px;
    background: linear-gradient( 135deg, #020617 0%, #0f172a 40%, #111827 70%, #1e293b 100% );
}

.hrms-bg-dots {
    position: absolute;
    inset: 0;
    background-image: radial-gradient( rgba(255,255,255,.12) 1px, transparent 1px );
    background-size: 30px 30px;
    opacity: .25;
}

/* Layout */

.hrms-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 70px;
    position: relative;
    z-index: 2;
}

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

.hrms-content {
    flex: 1;
}

.hrms-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.12);
    color: #60a5fa;
    padding: 10px 18px;
    border-radius: 50px;
    font-size: 12px;
    font-weight: 700;
    margin-bottom: 25px;
}

.hrms-title {
    font-size: 50px;
    line-height: 1.1;
    font-weight: 800;
    color: #fff;
    margin-bottom: 25px;
}

.hrms-highlight-purple {
    background: linear-gradient( 90deg, #60a5fa, #8b5cf6 );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.hrms-desc {
    color: rgba(255,255,255,.75);
    font-size: 18px;
    line-height: 1.8;
    max-width: 580px;
    margin-bottom: 35px;
}

/* Buttons */

.hrms-buttons {
    display: flex;
    gap: 15px;
    margin-bottom: 35px;
}

.hrms-btn-primary {
    border: none;
    background: linear-gradient( 135deg, #2563eb, #8b5cf6 );
    color: white;
    padding: 15px 34px;
    border-radius: 50px;
    font-weight: 600;
    transition: .3s;
}

    .hrms-btn-primary:hover {
        transform: translateY(-3px);
    }

.hrms-btn-secondary {
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.15);
    color: white;
    padding: 15px 34px;
    border-radius: 50px;
    font-weight: 600;
}

    .hrms-btn-secondary i {
        color: #60a5fa;
        margin-right: 8px;
    }

/* Trust */

.hrms-trust-badges {
    display: flex;
/*    flex-wrap: wrap;*/
    gap: 20px;
}

.hrms-trust-item {
    display: flex;
    align-items: center;
    gap: 12px;
}

.hrms-trust-icon {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: rgba(255,255,255,.08);
    color: #60a5fa;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hrms-trust-text strong {
    display: block;
    color: white;
    font-size: 14px;
}

.hrms-trust-text span {
    color: rgba(255,255,255,.6);
    font-size: 12px;
}

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

.hrms-visual {
    flex: 1;
    text-align: center;
}

.hrms-main-image {
    width: 100%;
    max-width: 650px;
    height: auto;
    display: block;
    margin: auto;
}

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

@media(max-width:991px) {

    .hrms-wrapper {
        flex-direction: column;
        text-align: center;
    }

    .hrms-title {
        font-size: 42px;
    }

    .hrms-buttons {
        justify-content: center;
        flex-wrap: wrap;
    }

    .hrms-trust-badges {
        justify-content: center;
    }

    .hrms-desc {
        margin-left: auto;
        margin-right: auto;
    }
}

@media(max-width:576px) {

    .hrms-title {
        font-size: 32px;
    }

    .hrms-buttons {
        flex-direction: column;
    }

    .hrms-btn-primary,
    .hrms-btn-secondary {
        width: 100%;
    }
}
/*============================
     HRMS-solns
============================*/
.hrms-solution {
    position: relative;
    overflow: hidden;
    padding: 40px 0;
/*    background: linear-gradient( 135deg, #020617 0%, #0f172a 40%, #111827 70%, #1e293b 100% );*/
}
.hrms-card {
    border-radius: 12px;
    padding: 30px;
    height: 100%;
    border: 1px solid transparent;
}

/* Left Card Styles */
.hrms-challenges-card {
    background-color: #fffbfb; /* Very light pinkish background */
    border: 1px solid #fde8e8;
    box-shadow: 0 4px 15px rgba(255, 0, 0, 0.03);
}

.hrms-challenge-title {
    color: #d9534f;
    font-weight: 700;
    font-size: 1.5rem;
    margin-bottom: 25px;
}

.hrms-item {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    font-size: 0.95rem;
    color: #444;
    font-weight: 500;
}

.hrms-icon-cross {
    color: #dc3545;
    margin-right: 15px;
    font-size: 1.1rem;
    width: 20px;
    text-align: center;
}

/* Right Card Styles */
.hrms-solutions-card {
    background-color: #f8fdf9; /* Very light green background */
    border: 1px solid #e2f3e4;
    box-shadow: 0 4px 15px rgba(0, 128, 0, 0.03);
}

.hrms-solution-title {
    color: #28a745;
    font-weight: 700;
    font-size: 1.5rem;
    margin-bottom: 25px;
}

.hrms-icon-check {
    color: #28a745;
    margin-right: 15px;
    font-size: 1.1rem;
    width: 20px;
    text-align: center;
}

/* Arrow Container */
.hrms-arrow-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}

.hrms-arrow-circle {
    background-color: #007bff;
    color: white;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    box-shadow: 0 4px 10px rgba(0, 123, 255, 0.3);
    transition: transform 0.2s ease;
}

    .hrms-arrow-circle:hover {
        transform: scale(1.1);
    }

/* 3D Character Image Styling */
.hrms-character-img {
    max-width: 100%;
    height: auto;
    object-fit: contain;
    /* This makes the character float slightly (optional) */
    filter: drop-shadow(0 10px 15px rgba(0,0,0,0.1));
}

/* Responsive Tweaks */
@media (max-width: 768px) {
    .hrms-arrow-container {
        padding: 20px 0;
    }

    .hrms-arrow-circle {
        transform: rotate(90deg);
    }

    .hrms-card {
        padding: 20px;
    }
}
/*============================
       HRMS-FEATURES
============================*/
.hrms-features-section {
    background-color: #f8faff; /* Very light blue/purple background */
    padding: 60px 20px;
    border-radius: 30px;
}

.hrms-features-title {
    color: #1a2b4b; /* Dark Navy Blue */
    font-weight: 700;
    font-size: 2rem;
    text-align: center;
    margin-bottom: 40px;
}

/* Feature Card Styling */
.hrms-features-card {
    background-color: #ffffff;
    border: 1px solid #eef2f6;
    border-radius: 12px;
    padding: 20px;
    height: 100%;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    display: flex;
    align-items: flex-start;
    gap: 15px;
}

    .hrms-features-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
    }

/* Icon Box Styling */
.hrms-features-icon-box {
    width: 50px;
    height: 50px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 1.2rem;
}

/* Specific Icon Colors */
.hrms-features-icon-purple {
    background-color: #f3f0ff;
    color: #6f4ef2;
}

.hrms-features-icon-orange {
    background-color: #fff4eb;
    color: #ff8c42;
}

.hrms-features-icon-green {
    background-color: #edf7ed;
    color: #4caf50;
}

.hrms-features-icon-blue {
    background-color: #ebf4ff;
    color: #3b82f6;
}

.hrms-features-icon-teal {
    background-color: #e6fffa;
    color: #14b8a6;
}

.hrms-features-icon-lightblue {
    background-color: #f0f9ff;
    color: #0ea5e9;
}

/* Text Content Styling */
.hrms-features-card-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: #1a2b4b;
    margin-bottom: 5px;
}

.hrms-features-card-desc {
    font-size: 0.85rem;
    color: #64748b;
    line-height: 1.4;
    margin-bottom: 0;
}

/* HRMS Why Devlok Specific Styles */
.hrms-why-devlok-section {
    background-color: #ffffff;
    padding: 50px 20px;
    border-radius: 30px;
    margin: 20px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.hrms-why-devlok-title {
    color: #0f1a3a;
    font-weight: 700;
    font-size: 2rem;
    text-align: center;
    margin-bottom: 40px;
}

/* Card Styling */
.hrms-why-devlok-card {
    background-color: #ffffff;
    border: 1px solid #eef2f6;
    border-radius: 16px;
    padding: 25px 15px;
    height: 100%;
    text-align: center;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

    .hrms-why-devlok-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.06);
    }

/* Icon Box Container */
.hrms-why-devlok-icon-box {
    width: 60px;
    height: 60px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 15px auto;
    font-size: 1.4rem;
}

/* Specific Icon Backgrounds & Colors */
.hrms-why-devlok-icon-teal {
    background-color: #e6f7f7;
    color: #2dd4bf;
}

.hrms-why-devlok-icon-blue {
    background-color: #eff6ff;
    color: #3b82f6;
}

.hrms-why-devlok-icon-darkblue {
    background-color: #eef2ff;
    color: #4f46e5;
}

.hrms-why-devlok-icon-purple {
    background-color: #f5f3ff;
    color: #8b5cf6;
}

.hrms-why-devlok-icon-green {
    background-color: #f0fdf4;
    color: #22c55e;
}

.hrms-why-devlok-icon-red {
    background-color: #fef2f2;
    color: #ef4444;
}

/* Text Content */
.hrms-why-devlok-card-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: #0f1a3a;
    margin-bottom: 8px;
}

.hrms-why-devlok-card-desc {
    font-size: 0.85rem;
    color: #64748b;
    line-height: 1.5;
    margin-bottom: 0;
    padding: 0 5px;
}

/* Responsive spacing adjustment */
@media (max-width: 768px) {
    .hrms-why-devlok-section {
        margin: 10px;
        padding: 30px 15px;
    }
}

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

.hrms-faq-section {
    padding: 100px 0;
    background: linear-gradient(180deg, #f8fbff 0%, #ffffff 100%);
}

.hrms-faq-header {
    text-align: center;
    margin-bottom: 60px;
}

.hrms-faq-badge {
    display: inline-block;
    padding: 10px 22px;
    border-radius: 100px;
    background: rgba(37,99,235,.1);
    color: #2563eb;
    font-weight: 700;
    margin-bottom: 20px;
}

.hrms-faq-header h2 {
    font-size: 48px;
    font-weight: 800;
    color: #0f172a;
    margin-bottom: 15px;
}

.hrms-faq-header p {
    color: #64748b;
    font-size: 18px;
    max-width: 700px;
    margin: auto;
}

.hrms-faq-list {
    max-width: 1100px;
    margin: auto;
}

.hrms-faq-item {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 22px;
    margin-bottom: 20px;
    overflow: hidden;
    transition: all .35s ease;
    cursor: pointer;
    box-shadow: 0 8px 25px rgba(15,23,42,.05);
}

    .hrms-faq-item:hover {
        transform: translateY(-4px);
        box-shadow: 0 20px 50px rgba(37,99,235,.12);
    }

.hrms-faq-question {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 28px 35px;
}

    .hrms-faq-question span {
        font-size: 20px;
        font-weight: 700;
        color: #0f172a;
    }

    .hrms-faq-question i {
        width: 48px;
        height: 48px;
        border-radius: 50%;
        background: rgba(37,99,235,.1);
        color: #2563eb;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all .4s ease;
        flex-shrink: 0;
    }

.hrms-faq-answer {
    max-height: 0;
    overflow: hidden;
    padding: 0 35px;
    color: #64748b;
    line-height: 1.9;
    font-size: 16px;
    transition: all .4s ease;
}

/* Active Item */

.hrms-faq-item.active {
    border-color: transparent;
    background: linear-gradient(135deg, #0c2953, #1756a8)
}

    .hrms-faq-item.active .hrms-faq-question span {
        color: #fff;
    }

    .hrms-faq-item.active .hrms-faq-answer {
        max-height: 300px;
        padding: 0 35px 30px;
        color: rgba(255,255,255,.92);
    }

    .hrms-faq-item.active .hrms-faq-question i {
        background: rgba(255,255,255,.2);
        color: #fff;
        transform: rotate(45deg);
    }

@media(max-width:768px) {

    .hrms-faq-header h2 {
        font-size: 32px;
    }

    .hrms-faq-question {
        padding: 22px;
    }

        .hrms-faq-question span {
            font-size: 17px;
            padding-right: 15px;
        }

    .hrms-faq-answer {
        padding: 0 22px;
    }

    .hrms-faq-item.active .hrms-faq-answer {
        padding: 0 22px 25px;
    }
}

/* HRMS Clients Specific Styles */
.hrms-clients-section {
    background-color: #f8faff;
    padding: 50px 20px;
    border-radius: 30px;
}

.hrms-clients-title {
    color: #0f1a3a;
    font-weight: 700;
    font-size: 2rem;
    text-align: center;
    margin-bottom: 40px;
}

/* Testimonial Card Styling */
.hrms-clients-card {
    color: var(--bs-gray-800);
    background-color: #ffffff;
    border: 1px solid #eef2f6;
    border-radius: 16px;
    padding: 25px;
    height: 100%;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    display: flex;
    flex-direction: column;
}

    .hrms-clients-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.06);
    }

/* Stars Styling */
.hrms-clients-stars {
    color: #fbbf24; /* Gold color */
    font-size: 0.9rem;
    margin-bottom: 10px;
}

    .hrms-clients-stars i {
        margin-right: 2px;
    }

/* Testimonial Content Layout */
.hrms-clients-content {
    display: flex;
    gap: 15px;
    margin-bottom: 20px;
}

/* Profile Image */
.hrms-clients-img-wrapper {
    flex-shrink: 0;
}

.hrms-clients-img {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid #f0f4ff;
}

/* Testimonial Text */
.hrms-clients-text {
    font-size: 0.9rem;
    color: #475569;
    line-height: 1.6;
    margin-bottom: 0;
}

/* User Info */
.hrms-clients-user-info {
    margin-top: auto;
}

.hrms-clients-name {
    font-weight: 700;
    font-size: 0.95rem;
    color: #0f1a3a;
    margin-bottom: 2px;
}

.hrms-clients-role {
    font-size: 0.8rem;
    color: #94a3b8;
    margin-bottom: 0;
}

/* Carousel Indicators (Dots) */
.hrms-clients-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 30px;
}

.hrms-clients-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #d1d5db;
    transition: background-color 0.3s ease;
    cursor: pointer;
}

    .hrms-clients-dot.active {
        background-color: #3b82f6; /* Blue active dot */
    }

    .hrms-clients-dot:hover {
        background-color: #9ca3af;
    }

/* Responsive adjustments */
@media (max-width: 768px) {
    .hrms-clients-section {
        margin: 10px;
        padding: 30px 15px;
    }

    .hrms-clients-content {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
}

/* HRMS CTA Specific Styles */
.hrms-cta-section {
    background: rgb(25 34 51);
    padding: 20px;
}

.hrms-cta-container {
    background: linear-gradient(135deg, #2b5cf542 0%, #7c3aed26 100%);
    border-radius: 20px;
    padding: 40px 30px;
    position: relative;
    overflow: hidden;
    min-height: 300px;
}

/* Left Character Image */
.hrms-cta-character {
    position: absolute;
    bottom: 0;
    left: 20px;
    height: 90%;
    object-fit: contain;
    z-index: 1;
}

/* Center Content */
.hrms-cta-content {
    text-align: center;
    color: #ffffff;
    padding: 20px 0;
    max-width: 700px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
    margin-left: 260px;
}

.hrms-cta-title {
    font-weight: 700;
    font-size: 2.2rem;
    margin-bottom: 12px;
}

.hrms-cta-subtitle {
    font-size: 1rem;
    opacity: 0.9;
    margin-bottom: 25px;
    font-weight: 400;
}

/* Buttons */
.hrms-cta-buttons {
    display: flex;
    gap: 15px;
    justify-content: center;
    flex-wrap: wrap;
}

.hrms-cta-btn-primary {
    background-color: #ffffff;
    color: #3b82f6;
    border: none;
    padding: 12px 30px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.95rem;
    transition: all 0.3s ease;
    text-decoration: none;
    display: inline-block;
}

    .hrms-cta-btn-primary:hover {
        background-color: #f0f4ff;
        transform: translateY(-2px);
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
        color: #2563eb;
    }

.hrms-cta-btn-outline {
    background-color: transparent;
    color: #ffffff;
    border: 1.5px solid rgba(255, 255, 255, 0.5);
    padding: 12px 30px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.95rem;
    transition: all 0.3s ease;
    text-decoration: none;
    display: inline-block;
}

    .hrms-cta-btn-outline:hover {
        background-color: rgba(255, 255, 255, 0.1);
        border-color: #ffffff;
        transform: translateY(-2px);
        color: #ffffff;
    }

/* Right Card Mockup */
.hrms-cta-card-mockup {
    position: absolute;
    right: 30px;
    top: 50%;
    transform: translateY(-50%);
    background-color: #ffffff;
    border-radius: 16px;
    padding: 15px;
    width: 180px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.hrms-cta-mockup-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    width: 100%;
}

.hrms-cta-mockup-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    object-fit: cover;
}

.hrms-cta-mockup-lines {
    flex: 1;
}

.hrms-cta-mockup-line {
    height: 4px;
    background-color: #e5e7eb;
    border-radius: 4px;
    margin-bottom: 3px;
}

    .hrms-cta-mockup-line:nth-child(1) {
        width: 80%;
    }

    .hrms-cta-mockup-line:nth-child(2) {
        width: 50%;
    }

.hrms-cta-mockup-avatars {
    display: flex;
    gap: -5px;
    margin-top: 8px;
}

.hrms-cta-mockup-avatar-small {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #ffffff;
    margin-left: -8px;
}

    .hrms-cta-mockup-avatar-small:first-child {
        margin-left: 0;
    }

.hrms-cta-check-badge {
    position: absolute;
    right: -10px;
    bottom: -10px;
    background-color: #22c55e;
    color: white;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    box-shadow: 0 4px 10px rgba(34, 197, 94, 0.3);
}

/* ===========================
   TABLET
=========================== */

@media (max-width: 992px) {

    .hrms-cta-container {
        min-height: auto;
        padding: 50px 30px;
    }

    .hrms-cta-character {
        height: 220px;
        left: 10px;
    }

    .hrms-cta-content {
        margin-left: 180px;
        max-width: 100%;
    }

    .hrms-cta-title {
        font-size: 1.9rem;
    }

    .hrms-cta-card-mockup {
        display: none;
    }
}


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

@media (max-width: 768px) {

    .hrms-cta-section {
        padding: 15px;
    }

    .hrms-cta-container {
        padding: 35px 20px;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        min-height: auto;
    }

    /* Show image on mobile */
    .hrms-cta-character {
        position: relative;
        left: auto;
        bottom: auto;
        height: 220px;
        width: auto;
        max-width: 100%;
        margin-bottom: 20px;
        display: block;
    }

    .hrms-cta-content {
        margin-left: 0;
        max-width: 100%;
        padding: 0;
    }

    .hrms-cta-title {
        font-size: 1.7rem;
        line-height: 1.3;
        margin-bottom: 15px;
    }

    .hrms-cta-subtitle {
        font-size: 15px;
        line-height: 1.7;
        margin-bottom: 20px;
    }

    .hrms-cta-buttons {
        flex-direction: column;
        width: 100%;
        gap: 12px;
    }

    .hrms-cta-btn-primary,
    .hrms-cta-btn-outline {
        width: 100%;
        max-width: 280px;
        margin: 0 auto;
        text-align: center;
    }

    .hrms-cta-card-mockup {
        display: none;
    }
}


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

@media (max-width: 480px) {

    .hrms-cta-container {
        padding: 30px 15px;
        border-radius: 16px;
    }

    .hrms-cta-character {
        height: 180px;
    }

    .hrms-cta-title {
        font-size: 1.4rem;
    }

    .hrms-cta-subtitle {
        font-size: 14px;
    }

    .hrms-cta-btn-primary,
    .hrms-cta-btn-outline {
        padding: 12px 20px;
        font-size: 14px;
    }
}



/*=========================
   EMPLOYEEE-TRACKING
=========================*/
/* ===========================
   HERO SECTION
=========================== */

.ets-hero {
    position: relative;
    background: #0f1117;
    overflow: hidden;
    padding: 130px 0 60px;
}

    /* Gradient Glow */

    .ets-hero::before {
        content: "";
        position: absolute;
        width: 700px;
        height: 700px;
        background: radial-gradient( circle, rgba(0,255,180,.15), transparent 70% );
        right: -200px;
        top: -100px;
    }

.ets-badge {
    display: inline-block;
    background: rgba(255,255,255,.08);
    color: #5eead4;
    padding: 10px 18px;
    border-radius: 50px;
    font-size: 14px;
    margin-bottom: 25px;
    border: 1px solid rgba(255,255,255,.1);
}

.ets-title {
    font-size: 48px;
    line-height: 1.1;
    font-weight: 800;
    color: #fff;
    margin-bottom: 25px;
}

.ets-desc {
    color: #9ca3af;
    font-size: 18px;
    line-height: 1.8;
    max-width: 550px;
}

/* BUTTONS */

.ets-btn-primary {
    background: #14b8a6;
    color: #fff;
    text-decoration: none;
    padding: 15px 30px;
    border-radius: 50px;
    font-weight: 600;
    transition: .3s;
}

    .ets-btn-primary:hover {
        background: #0d9488;
        color: #fff;
    }

.ets-btn-outline {
    border: 1px solid rgba(255,255,255,.15);
    color: #fff;
    text-decoration: none;
    padding: 15px 30px;
    border-radius: 50px;
    transition: .3s;
}

    .ets-btn-outline:hover {
        background: #fff;
        color: #000;
    }

/* FEATURES */

.ets-features {
    display: flex;
    gap: 25px;
    margin-top: 30px;
    flex-wrap: wrap;
}

    .ets-features span {
        color: #d1d5db;
        font-size: 15px;
    }

    .ets-features i {
        color: #10b981;
        margin-right: 6px;
    }

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

.ets-dashboard-wrap {
    position: relative;
    height: 700px;
}

.ets-dashboard {
    background: #0d0f14;
    border-radius: 25px;
    overflow: hidden;
    box-shadow: 0 30px 80px rgba(0,0,0,.35);
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
}

    .ets-dashboard img {
        width: 100%;
        display: block;
    }

/* FLOATING CARDS */

.ets-card {
    position: absolute;
    background: rgba(255,255,255,.95);
    backdrop-filter: blur(20px);
    border-radius: 20px;
    padding: 20px;
    box-shadow: 0 20px 50px rgba(0,0,0,.15);
}

    .ets-card h2 {
        color: #14b8a6;
        font-size: 34px;
        font-weight: 800;
        margin: 10px 0;
    }

    .ets-card h6 {
        color: #666;
    }

    .ets-card p {
        color: #888;
        margin: 0;
    }

/* positions */

.attendance-card {
    top: 30px;
    right: -30px;
    width: 220px;
}

.task-card {
    right: -20px;
    bottom: 70px;
    width: 220px;
}

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

.ets-stats {
    margin-top: -80px;
    position: relative;
    z-index: 10;
}

.stats-box {
    background: #fff;
    border-radius: 20px;
    padding: 25px;
    display: flex;
    align-items: center;
    gap: 18px;
    height: 100%;
    box-shadow: 0 15px 50px rgba(0,0,0,.08);
    transition: all .3s ease;
}

    .stats-box:hover {
        transform: translateY(-6px);
    }

.stats-icon {
    min-width: 65px;
    width: 65px;
    height: 65px;
    border-radius: 50%;
    background: linear-gradient(135deg, #14b8a6, #0ea5e9);
    display: flex;
    align-items: center;
    justify-content: center;
}

    .stats-icon i {
        color: #fff;
        font-size: 24px;
    }

.stats-content h3 {
    margin: 0;
    font-size: 32px;
    font-weight: 800;
    color: #111827;
    line-height: 1;
}

.stats-content p {
    margin: 6px 0 0;
    color: #6b7280;
    font-size: 15px;
}


/* ==========================================
   ETC FEATURES SECTION
========================================== */

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

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

.ETC-features-label,
.ETC-features-right-label {
    display: inline-block;
    color: #2563eb;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 12px;
}

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

.ETC-features-main-title,
.ETC-features-right-title {
    color: #0f172a;
    font-size: 42px;
    font-weight: 800;
    line-height: 1.2;
}

.ETC-features-main-title {
    margin-bottom: 35px;
}

.ETC-features-right-title {
    margin-bottom: 20px;
    max-width: 520px;
}

.ETC-features-right-desc {
    color: #64748b;
    font-size: 17px;
    line-height: 1.9;
    margin-bottom: 35px;
    max-width: 550px;
}

/* ==========================================
   FEATURE CARDS
========================================== */

.ETC-features-card {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 20px;
    padding: 24px;
    height: 100%;
    transition: all 0.35s ease;
    position: relative;
    overflow: hidden;
}

.ETC-features-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(
        90deg,
        #2563eb,
        #06b6d4
    );
    transform: scaleX(0);
    transition: all .35s ease;
}

.ETC-features-card:hover {
    transform: translateY(-8px);
    border-color: #dbeafe;
    box-shadow: 0 20px 40px rgba(0,0,0,.08);
}

.ETC-features-card:hover::before {
    transform: scaleX(1);
}

/* ==========================================
   ICONS
========================================== */

.ETC-features-icon-box {
    width: 58px;
    height: 58px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
    font-size: 22px;
}

.ETC-features-icon-blue {
    background: #eff6ff;
    color: #2563eb;
}

.ETC-features-icon-green {
    background: #ecfdf5;
    color: #10b981;
}

.ETC-features-icon-purple {
    background: #f5f3ff;
    color: #8b5cf6;
}

.ETC-features-icon-orange {
    background: #fff7ed;
    color: #f97316;
}

.ETC-features-icon-cyan {
    background: #ecfeff;
    color: #06b6d4;
}

.ETC-features-icon-pink {
    background: #fdf2f8;
    color: #ec4899;
}

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

.ETC-features-card-title {
    color: #0f172a;
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 10px;
}

.ETC-features-card-desc {
    color: #64748b;
    font-size: 14px;
    line-height: 1.7;
    margin-bottom: 0;
}

/* ==========================================
   RIGHT COLUMN
========================================== */

.ETC-features-right-content {
    height: 100%;
    padding-left: 50px;

    display: flex;
    flex-direction: column;
    justify-content: center;
}

.ETC-features-check-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.ETC-features-check-item {
    display: flex;
    align-items: center;
    padding: 14px 0;
    border-bottom: 1px solid #f1f5f9;

    color: #334155;
    font-size: 15px;
    font-weight: 500;
}

.ETC-features-check-item:last-child {
    border-bottom: none;
}

.ETC-features-check-icon {
    color: #22c55e;
    font-size: 18px;
    margin-right: 12px;
    flex-shrink: 0;
}

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

@media (max-width: 1199px) {

    .ETC-features-main-title,
    .ETC-features-right-title {
        font-size: 36px;
    }

    .ETC-features-right-content {
        padding-left: 30px;
    }
}

@media (max-width: 991px) {

    .ETC-features-section {
        padding: 80px 0;
    }

    .ETC-features-right-content {
        padding-left: 0;
        margin-top: 50px;
        height: auto;
    }

    .ETC-features-main-title,
    .ETC-features-right-title {
        font-size: 32px;
    }
}

@media (max-width: 767px) {

    .ETC-features-main-title,
    .ETC-features-right-title {
        font-size: 28px;
    }

    .ETC-features-card {
        padding: 20px;
    }

    .ETC-features-right-desc {
        font-size: 16px;
    }

    .ETC-features-check-item {
        font-size: 14px;
    }
}

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

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

.ets-process-label {
    text-align: center;
    color: #2563eb;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.ets-process-title {
    text-align: center;
    font-size: 42px;
    font-weight: 800;
    color: #0f172a;
    margin-bottom: 70px;
}

/* =====================================
   FLOW
===================================== */

.ets-process-flow {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
}

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

.ets-process-card {
    width: 230px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 20px;
    padding: 24px 18px;
    text-align: center;
    transition: .4s ease;
    position: relative;
}

    .ets-process-card:hover {
        transform: translateY(-8px);
        box-shadow: 0 20px 40px rgba(0,0,0,.08);
        border-color: #dbeafe;
    }

.ets-process-card-title {
    font-size: 17px;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 10px;
}

.ets-process-card-desc {
    font-size: 14px;
    color: #64748b;
    line-height: 1.6;
    margin-bottom: 0;
}

/* =====================================
   ICONS
===================================== */

.ets-process-icon-circle {
    width: 58px;
    height: 58px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 18px;
    font-size: 22px;
}

.ets-process-icon-blue {
    background: #eff6ff;
    color: #2563eb;
}

.ets-process-icon-green {
    background: #ecfdf5;
    color: #10b981;
}

.ets-process-icon-orange {
    background: #fff7ed;
    color: #f97316;
}

.ets-process-icon-sky {
    background: #f0f9ff;
    color: #0ea5e9;
}

/* =====================================
   CONNECTOR
===================================== */

.ets-process-line {
    width: 90px;
    height: 2px;
    border-top: 2px dashed #cbd5e1;
    position: relative;
    margin: 0 10px;
}

    .ets-process-line .dot {
        position: absolute;
        width: 10px;
        height: 10px;
        border-radius: 50%;
        top: -6px;
    }

        .ets-process-line .dot:first-child {
            left: 25%;
        }

        .ets-process-line .dot:last-child {
            right: 25%;
        }

.dot.blue {
    background: #2563eb;
}

.dot.green {
    background: #10b981;
}

.dot.purple {
    background: #8b5cf6;
}

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

@media(max-width:1200px) {

    .ets-process-card {
        width: 500px;
    }

    .ets-process-line {
        width: 70px;
    }
}

@media(max-width:991px) {

    .ets-process-flow {
        flex-direction: column;
        gap: 25px;
    }

    .ets-process-line {
        width: 2px;
        height: 50px;
        border-top: none;
        border-left: 2px dashed #cbd5e1;
    }

        .ets-process-line .dot {
            left: -4px !important;
        }

            .ets-process-line .dot:first-child {
                top: 20%;
            }

            .ets-process-line .dot:last-child {
                top: 70%;
            }

    .ets-process-title {
        font-size: 32px;
    }
}

/* ETS Tracking Specific Styles */
.ets-tracking-section {
    padding: 60px 20px;
    background-color: #fafbff;
}

.ets-tracking-label {
    color: #3b82f6;
    font-weight: 700;
    font-size: 0.75rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    text-align: center;
    margin-bottom: 10px;
}

.ets-tracking-main-title {
    color: #0f1a3a;
    font-weight: 700;
    font-size: 2rem;
    text-align: center;
    margin-bottom: 40px;
}

/* Module Card Styling */
.ets-tracking-card {
    background-color: #ffffff;
    border: 1px solid #eef2f6;
    border-radius: 16px;
    padding: 30px 20px;
    height: 100%;
    text-align: center;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

    .ets-tracking-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.06);
    }

/* Icon Circle Styling */
.ets-tracking-icon-circle {
    width: 55px;
    height: 55px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 15px auto;
    font-size: 1.3rem;
}

/* Specific Icon Colors */
.ets-tracking-icon-purple {
    background-color: #f5f3ff;
    color: #8b5cf6;
}

.ets-tracking-icon-green {
    background-color: #ecfdf5;
    color: #10b981;
}

.ets-tracking-icon-orange {
    background-color: #fff7ed;
    color: #f97316;
}

.ets-tracking-icon-blue {
    background-color: #eff6ff;
    color: #3b82f6;
}

.ets-tracking-icon-lightblue {
    background-color: #f0f9ff;
    color: #0ea5e9;
}

.ets-tracking-icon-emerald {
    background-color: #ecfdf5;
    color: #059669;
}

.ets-tracking-card-title {
    font-weight: 700;
    font-size: 0.95rem;
    color: #0f1a3a;
    margin-bottom: 8px;
}

.ets-tracking-card-desc {
    font-size: 0.85rem;
    color: #64748b;
    line-height: 1.5;
    margin-bottom: 0;
    padding: 0 5px;
}

/* Responsive */
@media (max-width: 992px) {
    .ets-tracking-main-title {
        font-size: 1.6rem;
    }
}




/*==================================================
  ETS SHOWCASE SECTION
==================================================*/

.ets-showcase-section {
    padding: 90px 0;
    background: linear-gradient(180deg,#ffffff,#f8fbff);
    position: relative;
    overflow: hidden;
}

    /* Background Glow */

    .ets-showcase-section::before {
        content: "";
        position: absolute;
        width: 500px;
        height: 500px;
        left: -250px;
        top: -250px;
        border-radius: 50%;
        background: radial-gradient(circle,rgba(37,99,235,.08),transparent 70%);
    }

    .ets-showcase-section::after {
        content: "";
        position: absolute;
        width: 500px;
        height: 500px;
        right: -250px;
        bottom: -250px;
        border-radius: 50%;
        background: radial-gradient(circle,rgba(6,182,212,.08),transparent 70%);
    }

/*==================================================
  LABEL
==================================================*/

.ets-showcase-label {
    display: inline-block;
    padding: 8px 18px;
    background: #eaf2ff;
    color: #2563eb;
    border-radius: 50px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 20px;
}

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

.ets-showcase-title {
    font-size: 46px;
    font-weight: 800;
    color: #0f172a;
    line-height: 1.2;
    max-width: 850px;
    margin: 0 auto 20px;
}

/*==================================================
  DESCRIPTION
==================================================*/

.ets-showcase-description {
    max-width: 850px;
    margin: 0 auto 60px;
    font-size: 18px;
    line-height: 1.8;
    color: #64748b;
}

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

.ets-showcase-image {
    position: relative;
    max-width: 1200px;
    margin: auto;
    padding: 20px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 28px;
    box-shadow: 0 25px 80px rgba(15,23,42,.10);
    transition: .4s;
}

    .ets-showcase-image:hover {
        transform: translateY(-8px);
        box-shadow: 0 35px 90px rgba(37,99,235,.18);
    }

    .ets-showcase-image img {
        width: 100%;
        border-radius: 20px;
        display: block;
    }

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

@media(max-width:991px) {

    .ets-showcase-section {
        padding: 70px 0;
    }

    .ets-showcase-title {
        font-size: 36px;
    }

    .ets-showcase-description {
        font-size: 16px;
        margin-bottom: 40px;
    }
}

@media(max-width:767px) {

    .ets-showcase-title {
        font-size: 30px;
    }

    .ets-showcase-description {
        font-size: 15px;
    }

    .ets-showcase-image {
        padding: 12px;
        border-radius: 20px;
    }

        .ets-showcase-image img {
            border-radius: 12px;
        }
}

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

.ets-industries-section {
    position: relative;
    padding: 90px 0 0;
    background: #ffffff;
    overflow: hidden;
    z-index: 1;
}

    /* Background Shapes */

    .ets-industries-section::before {
        content: "";
        position: absolute;
        width: 520px;
        height: 520px;
        top: -260px;
        left: -260px;
        border-radius: 50%;
        background: radial-gradient(circle, rgba(37,99,235,.08), transparent 70%);
        z-index: -1;
    }

    .ets-industries-section::after {
        content: "";
        position: absolute;
        width: 520px;
        height: 520px;
        bottom: -260px;
        right: -260px;
        border-radius: 50%;
        background: radial-gradient(circle, rgba(6,182,212,.08), transparent 70%);
        z-index: -1;
    }

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

.ets-industries-label {
    display: inline-block;
    color: #2563eb;
    background: rgba(37,99,235,.08);
    border-radius: 50px;
    padding: 8px 18px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 18px;
}

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

.ets-industries-title {
    font-size: 46px;
    font-weight: 800;
    color: #0f172a;
    line-height: 1.15;
    margin-bottom: 55px;
}

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

.ets-industries-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 24px;
    margin-bottom: 80px;
}

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

.ets-industry-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: 185px;
    padding: 28px 20px;
    background: #fff;
    border: 1px solid #edf2f7;
    border-radius: 22px;
    transition: .35s ease;
    cursor: pointer;
}

    .ets-industry-item:hover {
        transform: translateY(-8px);
        border-color: #bfdbfe;
        box-shadow: 0 20px 50px rgba(37,99,235,.12);
        background: linear-gradient(135deg,#ffffff,#f8fbff);
    }

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

.ets-industry-icon-box {
    width: 72px;
    height: 72px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
    background: linear-gradient(135deg,#eff6ff,#dbeafe);
    color: #2563eb;
    font-size: 28px;
    transition: .35s;
}

.ets-industry-item:hover .ets-industry-icon-box {
    background: linear-gradient(135deg,#2563eb,#3b82f6);
    color: #fff;
    transform: rotate(8deg) scale(1.08);
}

/*==================================================
  INDUSTRY NAME
==================================================*/

.ets-industry-name {
    color: #1e293b;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.5;
}


.ets-industries-testimonial-card {
    color: var(--bs-gray-800);
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 22px;
    padding: 35px;
    height: 100%;
    transition: .35s;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-shadow: 0 8px 30px rgba(0,0,0,.05);
}

    .ets-industries-testimonial-card:hover {
        transform: translateY(-8px);
        box-shadow: 0 20px 60px rgba(37,99,235,.12);
    }

.ets-industries-stars {
    margin-bottom: 20px;
}

    .ets-industries-stars i {
        color: #fbbf24;
        margin-right: 4px;
        font-size: 18px;
    }

.ets-industries-quote {
    font-size: 17px;
    color: #475569;
    line-height: 1.8;
    margin-bottom: 35px;
    flex: 1;
}

.ets-industries-user {
    display: flex;
    align-items: center;
}

    .ets-industries-user img {
        width: 65px;
        height: 65px;
        border-radius: 50%;
        object-fit: cover;
        margin-right: 18px;
    }

.ets-industries-user-info h5 {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    color: #0f172a;
}

.ets-industries-user-info span {
    color: #64748b;
    font-size: 15px;
}
/*==================================================
  STARS
==================================================*/

.ets-industries-stars {
    margin-bottom: 18px;
}

    .ets-industries-stars i {
        color: #fbbf24;
        margin-right: 3px;
    }

/*==================================================
  QUOTE
==================================================*/

.ets-industries-quote {
    font-size: 15px;
    line-height: 1.8;
    color: #475569;
    margin-bottom: 28px;
}

/*==================================================
  USER
==================================================*/

.ets-industries-user {
    display: flex;
    align-items: center;
}

.ets-industries-user-avatar {
    width: 58px;
    height: 58px;
    border-radius: 50%;
    object-fit: cover;
    margin-right: 15px;
}

.ets-industries-user-info {
    display: flex;
    flex-direction: column;
}

.ets-industries-user-name {
    font-size: 16px;
    font-weight: 700;
    color: #0f172a;
}

.ets-industries-user-role {
    font-size: 14px;
    color: #64748b;
}

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

@media (max-width:1400px) {

    .ets-industries-grid {
        grid-template-columns: repeat(4,1fr);
    }
}

@media (max-width:991px) {

    .ets-industries-section {
        padding: 70px 0;
    }

    .ets-industries-grid {
        grid-template-columns: repeat(3,1fr);
    }

    .ets-industries-title {
        font-size: 38px;
    }
}

@media (max-width:767px) {

    .ets-industries-grid {
        grid-template-columns: repeat(2,1fr);
        gap: 18px;
    }

    .ets-industry-item {
        min-height: 160px;
        padding: 22px 15px;
    }

    .ets-industry-icon-box {
        width: 62px;
        height: 62px;
        font-size: 24px;
    }

    .ets-industries-title {
        font-size: 32px;
        margin-bottom: 40px;
    }

    .ets-testimonials-wrapper {
        padding-top: 50px;
    }
}

@media (max-width:480px) {

    .ets-industries-grid {
        grid-template-columns: repeat(2,1fr);
        gap: 15px;
    }

    .ets-industry-item {
        min-height: 145px;
        border-radius: 18px;
    }

    .ets-industry-name {
        font-size: 14px;
    }

    .ets-industries-title {
        font-size: 28px;
    }

    .ets-industries-testimonial-card {
        padding: 22px;
    }
}
/* ==========================================
   QUOTE ICON
========================================== */

.ets-quote-icon {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: #eff6ff;
    color: #2563eb;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 15px;
    font-size: 16px;
}

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

.ets-industries-stars {
    color: #fbbf24;
    font-size: 14px;
    margin-bottom: 14px;
}

    .ets-industries-stars i {
        margin-right: 2px;
    }

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

.ets-industries-quote {
    color: #475569;
    font-size: 14px;
    line-height: 1.8;
    margin-bottom: 20px;
    font-style: italic;
}

/* ==========================================
   USER INFO
========================================== */

.ets-industries-user {
    display: flex;
    align-items: center;
    gap: 12px;
}

.ets-industries-user-avatar {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #dbeafe;
}

.ets-industries-user-info {
    display: flex;
    flex-direction: column;
}

.ets-industries-user-name {
    font-size: 14px;
    font-weight: 700;
    color: #0f172a;
}

.ets-industries-user-role {
    font-size: 12px;
    color: #94a3b8;
}

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

@media (max-width: 1199px) {

    .ets-industries-title {
        font-size: 36px;
    }
}

@media (max-width: 991px) {

    .ets-industries-section {
        padding: 80px 15px;
    }

    .ets-industries-title {
        font-size: 32px;
    }

    .ets-industries-grid {
        margin-bottom: 40px;
    }
}

@media (max-width: 767px) {

    .ets-industries-title {
        font-size: 28px;
    }

    .ets-industry-item {
        padding: 16px;
    }

    .ets-industries-testimonial-card {
        padding: 20px;
    }
}

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

.ets-faq-section {
    padding: 90px 0;
    background: #f8fbff;
    position: relative;
}

.ets-faq-label {
    display: inline-block;
    padding: 8px 18px;
    background: rgba(37,99,235,.08);
    color: #2563eb;
    border-radius: 50px;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 18px;
}

.ets-faq-title {
    font-size: 46px;
    font-weight: 800;
    color: #0f172a;
    margin-bottom: 60px;
}

/*==================================================
 FAQ CARD
==================================================*/

.ets-faq-item {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 18px;
    overflow: hidden;
    transition: .35s ease;
    height: fit-content;
    box-shadow: 0 8px 30px rgba(15,23,42,.05);
}

    .ets-faq-item:hover {
        transform: translateY(-5px);
        box-shadow: 0 20px 45px rgba(37,99,235,.10);
    }

/*==================================================
 HEADER
==================================================*/

.ets-faq-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    padding: 24px 26px;
}

.ets-faq-question {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    color: #0f172a;
    width: calc(100% - 55px);
    line-height: 1.5;
}

/*==================================================
 TOGGLE
==================================================*/

.ets-faq-toggle {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: #eff6ff;
    color: #2563eb;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    transition: .35s;
}

.ets-faq-item.active .ets-faq-toggle {
    background: #2563eb;
    color: #fff;
    transform: rotate(180deg);
}

/*==================================================
 ANSWER
==================================================*/

.ets-faq-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height .45s ease;
}

    .ets-faq-body.active {
        max-height: 500px;
    }

.ets-faq-answer {
    padding: 0 26px 26px;
    margin: 0;
    color: #64748b;
    font-size: 15px;
    line-height: 1.9;
}

/*==================================================
 ACTIVE CARD
==================================================*/

.ets-faq-item.active {
    border-color: #2563eb;
}

    .ets-faq-item.active .ets-faq-header {
        border-bottom: 1px solid #eef2f7;
    }

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

@media(max-width:991px) {

    .ets-faq-section {
        padding: 70px 0;
    }

    .ets-faq-title {
        font-size: 38px;
    }
}

@media(max-width:767px) {

    .ets-faq-title {
        font-size: 30px;
    }

    .ets-faq-question {
        font-size: 16px;
    }

    .ets-faq-header {
        padding: 20px;
    }

    .ets-faq-answer {
        padding: 0 20px 20px;
    }
}
/* ETS CTA Specific Styles */
.ets-cta-section {
    padding: 20px;
}

.ets-cta-container {
    background: linear-gradient(135deg, #0b1a33 0%, #1a2a4a 100%);
    border-radius: 16px;
    padding: 40px 50px;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 140px;
}

    /* Dotted pattern background overlay */
    .ets-cta-container::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-image: radial-gradient(circle at 20px 20px, rgba(255,255,255,0.05) 1px, transparent 1px);
        background-size: 30px 30px;
        pointer-events: none;
        z-index: 0;
    }

/* Left Icon Circle */
.ets-cta-icon-wrapper {
    flex-shrink: 0;
    margin-right: 25px;
    z-index: 1;
}

.ets-cta-icon-circle {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.1), rgba(255,255,255,0.05));
    border: 1px solid rgba(255,255,255,0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 1.8rem;
    box-shadow: 0 4px 20px rgba(0,0,0,0.2);
    position: relative;
}

    .ets-cta-icon-circle i {
        color: #60a5fa;
        filter: drop-shadow(0 0 10px rgba(96, 165, 250, 0.3));
    }

/* Center Content */
.ets-cta-content {
    flex: 1;
    z-index: 1;
    padding: 0 15px;
}

.ets-cta-title {
    color: #ffffff;
    font-weight: 700;
    font-size: 1.6rem;
    margin-bottom: 8px;
}

.ets-cta-subtitle {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.95rem;
    margin-bottom: 0;
    line-height: 1.5;
}

/* Right Buttons */
.ets-cta-buttons {
    display: flex;
    gap: 15px;
    flex-shrink: 0;
    z-index: 1;
}

.ets-cta-btn-primary {
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    color: #ffffff;
    border: none;
    padding: 12px 28px;
    border-radius: 25px;
    font-weight: 600;
    font-size: 0.9rem;
    transition: all 0.3s ease;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3);
}

    .ets-cta-btn-primary:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 25px rgba(59, 130, 246, 0.4);
        color: #ffffff;
    }

.ets-cta-btn-outline {
    background: transparent;
    color: #ffffff;
    border: 1.5px solid rgba(255, 255, 255, 0.3);
    padding: 12px 28px;
    border-radius: 25px;
    font-weight: 600;
    font-size: 0.9rem;
    transition: all 0.3s ease;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

    .ets-cta-btn-outline:hover {
        background: rgba(255, 255, 255, 0.1);
        border-color: #ffffff;
        transform: translateY(-2px);
        color: #ffffff;
    }

/* Responsive */
@media (max-width: 992px) {
    .ets-cta-container {
        flex-direction: column;
        text-align: center;
        padding: 30px 20px;
        gap: 20px;
    }

    .ets-cta-icon-wrapper {
        margin-right: 0;
        margin-bottom: 10px;
    }

    .ets-cta-buttons {
        margin-top: 10px;
    }

    .ets-cta-title {
        font-size: 1.3rem;
    }
}

@media (max-width: 576px) {
    .ets-cta-buttons {
        flex-direction: column;
        width: 100%;
    }

    .ets-cta-btn-primary, .ets-cta-btn-outline {
        justify-content: center;
        width: 100%;
    }
}

/*====================================
    online-teaching-software
====================================*/
/* =========================================
   OTS HERO SECTION
========================================= */

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

.ots-hero-section {
    padding: 130px 20px 80px;
    overflow: hidden;
    position: relative;
    background: radial-gradient(circle at top left, rgba(139,92,246,0.20), transparent 35%), radial-gradient(circle at bottom right, rgba(236,72,153,0.18), transparent 35%), linear-gradient( 135deg, #0f172a 0%, #1e1b4b 25%, #4c1d95 60%, #1e3a8a 100% );
}

    /* Decorative Glow */

    .ots-hero-section::before {
        content: "";
        position: absolute;
        width: 500px;
        height: 500px;
        background: rgba(139,92,246,0.12);
        border-radius: 50%;
        top: -250px;
        left: -150px;
        filter: blur(90px);
        z-index: 0;
    }

    .ots-hero-section::after {
        content: "";
        position: absolute;
        width: 450px;
        height: 450px;
        background: rgba(236,72,153,0.12);
        border-radius: 50%;
        right: -120px;
        bottom: -150px;
        filter: blur(90px);
        z-index: 0;
    }

    .ots-hero-section .row {
        position: relative;
        z-index: 2;
    }

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

.ots-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255,255,255,0.08);
    backdrop-filter: blur(10px);
    color: #c084fc;
    padding: 8px 18px;
    border-radius: 30px;
    font-size: 0.8rem;
    font-weight: 600;
    margin-bottom: 20px;
    border: 1px solid rgba(255,255,255,0.08);
}

    .ots-hero-badge i {
        font-size: 0.8rem;
    }

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

.ots-hero-title {
    color: #ffffff;
    font-weight: 800;
    font-size: 3rem;
    line-height: 1.15;
    margin-bottom: 24px;
}

.ots-hero-title-highlight {
    background: linear-gradient( 90deg, #8b5cf6, #ec4899, #60a5fa );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* =========================================
   DESCRIPTION
========================================= */

.ots-hero-desc {
    color: rgba(255,255,255,0.75);
    font-size: 1.05rem;
    line-height: 1.8;
    margin-bottom: 35px;
    max-width: 550px;
}

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

.ots-hero-buttons {
    display: flex;
    gap: 15px;
    margin-bottom: 40px;
    flex-wrap: wrap;
}

.ots-hero-btn-primary {
    background: linear-gradient( 135deg, #8b5cf6, #ec4899 );
    color: #fff;
    border: none;
    padding: 15px 34px;
    border-radius: 12px;
    font-weight: 600;
    text-decoration: none;
    transition: all .3s ease;
    box-shadow: 0 10px 30px rgba(139,92,246,.35);
}

    .ots-hero-btn-primary:hover {
        transform: translateY(-3px);
        color: #fff;
        box-shadow: 0 15px 40px rgba(236,72,153,.45);
    }

.ots-hero-btn-outline {
    background: rgba(255,255,255,0.08);
    backdrop-filter: blur(12px);
    color: #fff;
    border: 1px solid rgba(255,255,255,0.12);
    padding: 15px 34px;
    border-radius: 12px;
    font-weight: 600;
    text-decoration: none;
    transition: all .3s ease;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

    .ots-hero-btn-outline:hover {
        background: rgba(255,255,255,0.12);
        color: #fff;
        transform: translateY(-3px);
    }

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

.ots-hero-stats {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

.ots-hero-stat-box {
    background: rgba(255,255,255,0.06);
    backdrop-filter: blur(15px);
    border: 1px solid rgba(255,255,255,0.08);
    padding: 18px 24px;
    border-radius: 18px;
    min-width: 180px;
    transition: all .3s ease;
}

    .ots-hero-stat-box:hover {
        transform: translateY(-5px);
        background: rgba(255,255,255,0.08);
    }

    .ots-hero-stat-box h3 {
        margin: 0;
        font-size: 1.8rem;
        font-weight: 700;
        background: linear-gradient( 90deg, #8b5cf6, #ec4899, #60a5fa );
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }

    .ots-hero-stat-box span {
        color: rgba(255,255,255,0.65);
        font-size: .9rem;
    }

.ots-hero-features {
    display: flex;
    align-items: center;
    gap: 25px;
    flex-wrap: nowrap;
    margin-top: 25px;
}

.ots-feature-item {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #ffffff;
    font-size: 0.95rem;
    font-weight: 500;
    white-space: nowrap;
}

    .ots-feature-item i {
        color: #c084fc;
        font-size: 1rem;
    }

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

.ots-hero-image-wrapper {
    position: relative;
    padding: 20px;
}

.ots-hero-main-image {
    width: 100%;
    max-width: 550px;
    border-radius: 25px;
    display: block;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

/* =========================================
   FLOATING CARDS
========================================= */

.ots-hero-float-card {
    position: absolute;
    background: rgba(255,255,255,0.97);
    backdrop-filter: blur(15px);
    border-radius: 18px;
    padding: 16px 20px;
    min-width: 180px;
    box-shadow: 0 20px 60px rgba(0,0,0,.18);
    z-index: 2;
}

.ots-hero-float-card-top-left {
    top: 10%;
    left: 0;
}

.ots-hero-float-card-top-right {
    top: 5%;
    right: 0;
}

.ots-hero-float-card-bottom-left {
    bottom: 15%;
    left: -10%;
}

.ots-hero-float-card-bottom-right {
    bottom: 5%;
    right: -5%;
}

.ots-hero-card-title {
    font-size: .95rem;
    font-weight: 700;
    color: #1e1b4b;
    margin-bottom: 3px;
}

.ots-hero-card-subtitle {
    font-size: .75rem;
    color: #64748b;
    margin-bottom: 4px;
}

.ots-hero-card-badge {
    background: linear-gradient( 135deg, #8b5cf6, #ec4899 );
    color: #fff;
    font-size: .7rem;
    padding: 5px 10px;
    border-radius: 30px;
    display: inline-block;
    text-decoration: none;
}

    .ots-hero-card-badge.green {
        background: linear-gradient( 135deg, #60a5fa, #8b5cf6 );
    }

.ots-hero-card-result {
    font-size: 1.3rem;
    font-weight: 800;
    color: #8b5cf6;
}

.ots-hero-card-result-label {
    font-size: .75rem;
    color: #64748b;
}

/* =========================================
   FLOATING ICONS
========================================= */

.ots-hero-float-icon {
    position: absolute;
    width: 55px;
    height: 55px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.3rem;
    z-index: 2;
    box-shadow: 0 10px 30px rgba(0,0,0,.2);
}

    .ots-hero-float-icon.blue {
        background: #60a5fa;
        top: -5%;
        left: 40%;
    }

    .ots-hero-float-icon.purple {
        background: #8b5cf6;
        bottom: 30%;
        right: 0;
    }

    .ots-hero-float-icon.cyan {
        background: #ec4899;
        top: 40%;
        left: -5%;
    }

/* =========================================
   BACKGROUND DECORATIONS
========================================= */

.ots-hero-blob {
    position: absolute;
    right: -100px;
    top: 50%;
    transform: translateY(-50%);
    width: 600px;
    height: 600px;
    background: radial-gradient( circle, rgba(139,92,246,0.15), rgba(236,72,153,0.10), rgba(96,165,250,0.08) );
    border-radius: 50%;
    z-index: 0;
}

.ots-hero-dots {
    position: absolute;
    bottom: 20%;
    left: 45%;
    display: grid;
    grid-template-columns: repeat(4, 6px);
    gap: 8px;
    z-index: 0;
}

    .ots-hero-dots span {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: #c084fc;
        opacity: .3;
    }

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

@media (max-width: 992px) {

    .ots-hero-title {
        font-size: 2.3rem;
    }

    .ots-hero-float-card,
    .ots-hero-float-icon,
    .ots-hero-blob,
    .ots-hero-dots {
        display: none;
    }

    .ots-hero-image-wrapper {
        margin-top: 40px;
    }

    .ots-hero-stat-box {
        width: 100%;
    }
}

@media (max-width: 576px) {

    .ots-hero-section {
        padding: 60px 15px;
    }

    .ots-hero-title {
        font-size: 1.9rem;
    }

    .ots-hero-desc {
        font-size: .95rem;
    }

    .ots-hero-buttons {
        flex-direction: column;
    }

    .ots-hero-btn-primary,
    .ots-hero-btn-outline {
        width: 100%;
        justify-content: center;
    }
}
/* ===========================
   SOLUTIONS SECTION
=========================== */

.ots-solutions-section {
    padding: 80px 0;
    background: #fff;
}

    /* EQUAL HEIGHT COLUMNS */

    .ots-solutions-section .row > div {
        display: flex;
    }

/* CARD */

.ots-solutions-card {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 500px;
    background: linear-gradient( 135deg, #fbfaff 0%, #f4f1ff 100% );
    border: 1px solid #ebe7ff;
    border-radius: 20px;
    padding: 25px;
    overflow: hidden;
    transition: all .35s ease;
}

    .ots-solutions-card:hover {
        transform: translateY(-8px);
        box-shadow: 0 20px 40px rgba(99, 102, 241, .12);
    }

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

.ots-solutions-title {
    width: 100%;
    font-size: 28px;
    font-weight: 700;
    line-height: 1.25;
    color: #4338ca;
    margin-bottom: 22px;
}

/* ===========================
   BODY
=========================== */

.ots-solutions-body {
    position: relative;
    min-height: 320px;
}

/* LEFT CONTENT */

.ots-solutions-content {
    padding-right: 170px;
}

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

.ots-solutions-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

    .ots-solutions-list li {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-bottom: 12px;
        color: #475569;
        font-size: 14px;
        font-weight: 500;
    }

    .ots-solutions-list i {
        color: #7c3aed;
        font-size: 13px;
        flex-shrink: 0;
    }

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

.ots-solutions-image-wrapper {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 220px;
    height: 260px;
}

/* DEFAULT IMAGE */

.ots-solutions-person-img {
    position: absolute;
    bottom: 0;
    right: 0;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* STUDENT IMAGE */

.student-img {
    width: 190px;
    height: auto;
    right: 0;
    bottom: 0;
}

/* TEACHER IMAGE */

.teacher-img {
    width: 185px;
    height: auto;
    right: 10px;
    bottom: 0;
}

/* MOBILE IMAGE */

.parent-img {
    width: 130px;
    height: auto;
    right: 25px;
    bottom: 0;
}

/* ===========================
   PHONE MOCKUP
=========================== */

.ots-phone {
    position: absolute;
    right: 15px;
    bottom: 0;
    width: 135px;
    height: 260px;
    background: #fff;
    border: 5px solid #111827;
    border-radius: 28px;
    padding: 12px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, .12);
}

.ots-phone-top {
    font-size: 10px;
    color: #94a3b8;
}

.ots-phone-title {
    font-size: 14px;
    font-weight: 700;
    margin: 10px 0 15px;
}

.ots-phone-item {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid #f1f5f9;
    font-size: 11px;
}

    .ots-phone-item:last-child {
        border-bottom: none;
    }

.parent-icon {
    top: 90px;
    left: -20px;
}
.ots-phone {
    display: none;
}

.ots-phone-top {
    display: none;
}

.ots-phone-title {
    display: none;
}

.ots-phone-item {
    display: none;
}

.parent-icon {
    display: none;
}

/* ===========================
   TABLET
=========================== */

@media (max-width: 991px) {

    .ots-solutions-card {
        min-height: 470px;
    }

    .ots-solutions-title {
        font-size: 24px;
    }

    .ots-solutions-content {
        padding-right: 150px;
    }

    .ots-solutions-image-wrapper {
        width: 160px;
        height: 220px;
    }

    .ots-solutions-person-img {
        width: 160px;
        height: 220px;
    }
}

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

@media (max-width: 767px) {

    .ots-solutions-section {
        padding: 60px 0;
    }

    .ots-solutions-card {
        min-height: auto;
        padding: 22px;
    }

    .ots-solutions-title {
        font-size: 22px;
    }

    .ots-solutions-body {
        min-height: auto;
    }

    .ots-solutions-content {
        padding-right: 0;
    }

    .ots-solutions-image-wrapper {
        position: relative;
        width: 100%;
        height: auto;
        margin-top: 25px;
        text-align: center;
    }

    .ots-solutions-person-img {
        position: relative;
        width: 180px;
        height: 220px;
    }

    .ots-phone {
        position: relative;
        right: auto;
        bottom: auto;
        margin: auto;
    }

    .ots-float-icon {
        display: none;
    }
}

/* ==========================
   AI FEATURES SECTION
========================== */

.ots-features-section {
    position: relative;
    padding: 80px 0;
    background: linear-gradient( 180deg, #f8faff 0%, #ffffff 100% );
    overflow: hidden;
}

.ots-features-title {
    text-align: center;
    font-size: 2.5rem;
    font-weight: 800;
    color: #0f172a;
    margin-bottom: 50px;
    line-height: 1.2;
}

    .ots-features-title span {
        background: linear-gradient( 90deg, #7c3aed, #2563eb );
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }

/* Equal Height Cards */

.ots-features-section .col {
    display: flex;
}

.ots-features-card {
    width: 100%;
    height: 100%;
    background: #fff;
    border: 1px solid #eef2f7;
    border-radius: 20px;
    padding: 22px 18px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    transition: all .35s ease;
    box-shadow: 0 10px 30px rgba(15,23,42,.04);
}

    .ots-features-card:hover {
        transform: translateY(-8px);
        box-shadow: 0 20px 40px rgba(124,58,237,.12);
        border-color: rgba(124,58,237,.15);
    }

/* Icon */

.ots-features-icon-circle {
    width: 60px;
    height: 60px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    margin-bottom: 15px;
}

/* Colors */

.ots-features-icon-green {
    background: #dcfce7;
    color: #16a34a;
}

.ots-features-icon-purple {
    background: #ede9fe;
    color: #7c3aed;
}

.ots-features-icon-orange {
    background: #ffedd5;
    color: #ea580c;
}

.ots-features-icon-red {
    background: #fee2e2;
    color: #dc2626;
}

.ots-features-icon-blue {
    background: #dbeafe;
    color: #2563eb;
}

/* Text */

.ots-features-card-title {
    font-size: 1rem;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 10px;
}

.ots-features-card-desc {
    font-size: .85rem;
    line-height: 1.6;
    color: #64748b;
    margin: 0;
}

/* Tablet */

@media(max-width:992px) {

    .ots-features-title {
        font-size: 2rem;
    }

    .ots-features-card {
        padding: 20px;
    }
}

/* Mobile */

@media(max-width:768px) {

    .ots-features-section {
        padding: 60px 0;
    }

    .ots-features-title {
        font-size: 1.7rem;
    }

    .ots-features-card {
        padding: 18px;
    }
}

/* ==========================
   EDUCATION MANAGEMENT SUITE
========================== */

.ots-management-section {
    padding: 80px 0;
    background: #fafaff;
}

/* Header */

.ots-management-header {
    text-align: center;
    margin-bottom: 50px;
}

.ots-management-title {
    font-size: 2.4rem;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 12px;
}

.ots-management-subtitle {
    font-size: 1rem;
    color: #64748b;
    margin-bottom: 0;
}

/* Custom Desktop 5 Columns */

@media (min-width: 992px) {
    .col-lg-custom {
        flex: 0 0 20%;
        max-width: 20%;
    }
}

/* Card */

.ots-management-card {
    background: #ffffff;
    border: 1px solid #edf2f7;
    border-radius: 16px;
    padding: 20px;
    height: 100%;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    transition: all .3s ease;
}

    .ots-management-card:hover {
        transform: translateY(-6px);
        box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08);
    }

/* Icon */

.ots-management-icon-box {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 20px;
}

/* Colors */

.ots-management-icon-blue {
    background: #eef2ff;
    color: #4f46e5;
}

.ots-management-icon-purple {
    background: #f5f3ff;
    color: #8b5cf6;
}

.ots-management-icon-cyan {
    background: #ecfeff;
    color: #06b6d4;
}

.ots-management-icon-orange {
    background: #fff7ed;
    color: #f97316;
}

.ots-management-icon-green {
    background: #f0fdf4;
    color: #22c55e;
}

.ots-management-icon-pink {
    background: #fdf2f8;
    color: #ec4899;
}

.ots-management-icon-sky {
    background: #f0f9ff;
    color: #0ea5e9;
}

/* Content */

.ots-management-card-title {
    font-size: 15px;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 6px;
    line-height: 1.4;
}

.ots-management-card-desc {
    font-size: 13px;
    color: #64748b;
    line-height: 1.5;
}

/* Tablet */

@media (max-width: 991px) {
    .ots-management-title {
        font-size: 2rem;
    }

    .ots-management-card {
        padding: 18px;
    }
}

/* Mobile */

@media (max-width: 576px) {

    .ots-management-section {
        padding: 60px 0;
    }

    .ots-management-title {
        font-size: 1.8rem;
    }

    .ots-management-card {
        flex-direction: column;
        gap: 12px;
        padding: 16px;
    }

    .ots-management-icon-box {
        width: 46px;
        height: 46px;
        font-size: 18px;
    }

    .ots-management-card-title {
        font-size: 14px;
    }

    .ots-management-card-desc {
        font-size: 12px;
    }
}

/* ===================================
   ONLINE EXAM + VIRTUAL CLASSROOM
=================================== */

.ots-section {
    padding: 80px 0;
    background: #ffffff;
}

.ots-card {
    background: #f8faff;
    border: 1px solid #edf2f7;
    border-radius: 18px;
    padding: 28px;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.ots-title {
    color: #3f3dbe;
    font-size: 32px;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 25px;
}

.ots-card-body {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex: 1;
    gap: 30px;
}

.ots-content {
    flex: 0 0 42%;
}

.ots-image {
    flex: 0 0 58%;
    display: flex;
    justify-content: center;
    align-items: center;
}

    .ots-image img {
        width: 100%;
        max-width: 420px;
        height: auto;
        display: block;
    }

/* List */

.ots-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

    .ots-list li {
        display: flex;
        align-items: center;
        gap: 12px;
        margin-bottom: 18px;
        color: #334155;
        font-size: 15px;
        font-weight: 500;
    }

    .ots-list i {
        color: #4f7cff;
        font-size: 13px;
    }

/* Hover */

.ots-card {
    transition: all .35s ease;
}

    .ots-card:hover {
        transform: translateY(-6px);
        box-shadow: 0 20px 40px rgba(79,124,255,.10);
    }

/* Equal Heights */

.row.align-items-stretch > [class*='col-'] {
    display: flex;
}

.row.align-items-stretch .ots-card {
    width: 100%;
}

/* Tablet */

@media (max-width: 991px) {

    .ots-title {
        font-size: 26px;
    }

        .ots-card-body {
/*            flex-direction: column;*/
        text-align: left;
    }

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

    .ots-image {
        margin-top: 20px;
    }

        .ots-image img {
            max-width: 350px;
        }
}

/* Mobile */

@media (max-width: 767px) {

    .ots-section {
        padding: 60px 0;
    }

    .ots-card {
        padding: 20px;
    }

    .ots-title {
        font-size: 22px;
    }

    .ots-list li {
        font-size: 14px;
        margin-bottom: 12px;
    }

    .ots-image img {
        max-width: 280px;
    }
}

/* ==========================
   MOBILE APPS SECTION
========================== */

.ots-mobile-apps-section {
    padding: 40px 0;
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    position: relative;
}

.ots-mobile-apps-header {
    text-align: center;
    margin-bottom: 60px;
}

.ots-mobile-apps-title {
    font-size: 42px;
    font-weight: 800;
    color: #111827;
    margin-bottom: 10px;
    line-height: 1.2;
}

.ots-mobile-apps-subtitle {
    font-size: 16px;
    color: #64748b;
    margin-bottom: 0;
}

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

.ots-mobile-apps-card {
    position: relative;
    overflow: hidden;
    background: #ffffff;
    border: 1px solid #eef2f7;
    border-radius: 24px;
    padding: 28px;
    display: flex;
    align-items: center;
    gap: 28px;
    height: 100%;
    transition: all .35s ease;
    box-shadow: 0 10px 30px rgba(15, 23, 42, .05);
}

    /* Decorative Background Glow */

    .ots-mobile-apps-card::before {
        content: "";
        position: absolute;
        top: -70px;
        right: -70px;
        width: 180px;
        height: 180px;
        border-radius: 50%;
        background: radial-gradient( circle, rgba(37, 99, 235, 0.10) 0%, rgba(37, 99, 235, 0) 70% );
        pointer-events: none;
    }

    .ots-mobile-apps-card:hover {
        transform: translateY(-8px);
        box-shadow: 0 20px 50px rgba(15, 23, 42, .12);
    }

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

.ots-mobile-apps-phone-wrapper {
    flex: 0 0 130px;
    text-align: center;
    position: relative;
    z-index: 2;
}

.ots-mobile-apps-phone-img {
    width: 120px;
    max-width: 100%;
    display: block;
    margin: auto;
    transition: all .4s ease;
    filter: drop-shadow(0 18px 30px rgba(0, 0, 0, .18));
}

.ots-mobile-apps-card:hover .ots-mobile-apps-phone-img {
    transform: translateY(-8px) scale(1.03);
}

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

.ots-mobile-apps-content {
    flex: 1;
    position: relative;
    z-index: 2;
}

.ots-mobile-apps-app-title {
    color: #2563eb;
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 18px;
    line-height: 1.2;
}

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

.ots-mobile-apps-list {
    list-style: none;
    padding: 0;
    margin: 0 0 24px;
}

    .ots-mobile-apps-list li {
        display: flex;
        align-items: center;
        gap: 12px;
        margin-bottom: 12px;
        color: #475569;
        font-size: 15px;
        font-weight: 500;
        line-height: 1.4;
    }

        .ots-mobile-apps-list li:last-child {
            margin-bottom: 0;
        }

    .ots-mobile-apps-list i {
        width: 20px;
        height: 20px;
        min-width: 20px;
        border-radius: 50%;
        background: #eff6ff;
        color: #2563eb;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 10px;
    }

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

.ots-mobile-apps-store-buttons {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.ots-store-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 11px 18px;
    text-decoration: none;
    color: #111827;
    font-size: 13px;
    font-weight: 600;
    transition: all .3s ease;
}

    .ots-store-btn i {
        font-size: 16px;
    }

    .ots-store-btn:hover {
        background: #2563eb;
        color: #ffffff;
        border-color: #2563eb;
        transform: translateY(-2px);
    }

/* ==========================
   EXTRA PREMIUM EFFECT
========================== */

.ots-mobile-apps-card::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 4px;
    height: 100%;
    background: linear-gradient( 180deg, #2563eb, #60a5fa );
    opacity: 0;
    transition: .3s ease;
}

.ots-mobile-apps-card:hover::after {
    opacity: 1;
}

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

@media (max-width: 991px) {

    .ots-mobile-apps-section {
        padding: 80px 0;
    }

    .ots-mobile-apps-card {
        text-align: center;
        padding: 30px 24px;
    }

    .ots-mobile-apps-phone-wrapper {
        flex: initial;
    }

    .ots-mobile-apps-phone-img {
        width: 140px;
    }

    .ots-mobile-apps-list li {
        justify-content: center;
    }

    .ots-mobile-apps-store-buttons {
        justify-content: center;
    }

    .ots-mobile-apps-title {
        font-size: 34px;
    }

    .ots-mobile-apps-app-title {
        font-size: 26px;
    }
}

@media (max-width: 576px) {

    .ots-mobile-apps-section {
        padding: 60px 0;
    }

    .ots-mobile-apps-title {
        font-size: 28px;
    }

    .ots-mobile-apps-subtitle {
        font-size: 14px;
    }

    .ots-mobile-apps-card {
        padding: 24px 20px;
    }

    .ots-mobile-apps-phone-img {
        width: 120px;
    }

    .ots-store-btn {
        width: 100%;
        justify-content: center;
    }
}

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

.oes-why-testimonial-section {
    padding: 80px 0;
    background: #fafafa;
}

/* ==========================
   WHY CHOOSE CARD
========================== */

.oes-why-card {
    background: #fff;
    border: 1px solid #edf0f5;
    border-radius: 14px;
    height: 100%;
    padding: 25px;
}

.oes-why-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 25px;
    height: 100%;
}

.oes-why-text-wrap {
    flex: 1;
}

.oes-why-title {
    font-size: 28px;
    font-weight: 700;
    color: #1f2937;
    margin-bottom: 20px;
    line-height: 1.3;
}

.oes-why-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

    .oes-why-list li {
        display: flex;
        align-items: flex-start;
        gap: 10px;
        margin-bottom: 12px;
        font-size: 14px;
        color: #475569;
        line-height: 1.6;
    }

    .oes-why-list i {
        color: #2563eb;
        font-size: 14px;
        margin-top: 4px;
    }

.oes-why-image {
    flex: 0 0 180px;
    text-align: center;
}

    .oes-why-image img {
        width: 100%;
        max-width: 180px;
        height: auto;
    }

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

.oes-testimonial-wrapper {
    padding-top: 40px;
    height: 100%;
}

.oes-testimonial-heading {
    font-size: 28px;
    font-weight: 700;
    color: #1f2937;
    margin-bottom: 20px;
    line-height: 1.3;
}

/* ==========================
   TESTIMONIAL GRID
========================== */

.oes-testimonial-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
}

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

.oes-testimonial-card {
    background: #fff;
    border: 1px solid #edf0f5;
    border-radius: 14px;
    padding: 20px;
    min-height: 250px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: all .3s ease;
    box-shadow: 0 2px 8px rgba(15,23,42,.03);
}

    .oes-testimonial-card:hover {
        transform: translateY(-5px);
        border-color: #dbeafe;
        box-shadow: 0 12px 25px rgba(37,99,235,.08);
    }

/* Quote Icon */

.oes-quote {
    color: #3b82f6;
    font-size: 22px;
    margin-bottom: 12px;
}

/* Review Text */

.oes-testimonial-card p {
    flex-grow: 1;
    color: #475569;
    font-size: 14px;
    line-height: 1.8;
    margin: 10px 0 20px;
}

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

.oes-client-info {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: auto;
}

    .oes-client-info img {
        width: 45px;
        height: 45px;
        border-radius: 50%;
        object-fit: cover;
        flex-shrink: 0;
    }

    .oes-client-info h6 {
        margin: 0;
        font-size: 14px;
        font-weight: 700;
        color: #111827;
        line-height: 1.3;
    }

    .oes-client-info span {
        font-size: 12px;
        color: #6b7280;
    }

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

@media (max-width: 991px) {

    .oes-why-content {
        flex-direction: column;
        text-align: center;
    }

    .oes-why-list li {
        justify-content: center;
        text-align: left;
    }

    .oes-why-image {
        flex: auto;
    }

    .oes-testimonial-heading {
        text-align: center;
        margin-top: 20px;
    }

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

@media (max-width: 767px) {

    .oes-why-title {
        font-size: 24px;
    }

    .oes-testimonial-heading {
        font-size: 24px;
    }

    .oes-testimonial-grid {
        grid-template-columns: 1fr;
    }

    .oes-testimonial-card {
        min-height: auto;
    }
}

@media (max-width: 576px) {

    .oes-why-card {
        padding: 20px;
    }

    .oes-testimonial-card {
        padding: 18px;
    }

    .oes-client-info img {
        width: 40px;
        height: 40px;
    }
}

.oes-cta {
    /* The Gradient background - Adjust hex codes to match your exact brand blue */
    background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
    padding: 30px 20px;
    border-radius: 12px;
    width: 100%;
    max-width: 1200px;
    margin: 40px auto;
    color: #ffffff;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}

/* Flex container to handle layout */
.oes-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 20px;
}

/* --- Left: Image Placeholder --- */
.oes-image-wrapper {
    flex: 0 0 180px;
    display: flex;
    justify-content: center;
}

/* Optional: Styling for the placeholder graphic (remove if using real image) */
.oes-placeholder-art {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #ffffff;
    opacity: 0.9;
    text-shadow: 0 2px 4px rgba(0,0,0,0.3);
    line-height: 1.2;
}

    .oes-placeholder-art i {
        margin: 5px;
    }

/* --- Center: Text Content --- */
.oes-content {
    flex: 1;
    min-width: 250px;
    padding: 0 10px;
}

.oes-heading {
    font-size: 24px;
    font-weight: 700;
    margin: 0 0 10px 0;
    letter-spacing: 0.5px;
}

.oes-subtext {
    font-size: 15px;
    opacity: 0.9;
    margin: 0;
    line-height: 1.5;
    max-width: 500px;
}

/* --- Right: Buttons --- */
.oes-actions {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
    align-items: center;
}

/* Button Base Styles */
.oes-btn {
    text-decoration: none;
    padding: 10px 24px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    transition: all 0.2s ease;
    white-space: nowrap;
    cursor: pointer;
}

/* Outline Button (Book a Demo) */
.oes-btn-outline {
    background: transparent;
    border: 1px solid #ffffff;
    color: #ffffff;
}

    .oes-btn-outline:hover {
        background: rgba(255, 255, 255, 0.1);
        transform: translateY(-1px);
    }

/* Solid Button (Talk to Expert) */
.oes-btn-solid {
    background: #ffffff;
    border: 1px solid #ffffff;
    color: #1e3c72; /* Dark blue text */
}

    .oes-btn-solid:hover {
        background: #f0f0f0;
        transform: translateY(-1px);
    }

/* --- Responsive Design for Mobile --- */
@media (max-width: 768px) {
    .oes-container {
        flex-direction: column;
        text-align: center;
        justify-content: center;
    }

    .oes-image-wrapper {
        margin-bottom: 15px;
    }

    .oes-content {
        padding: 0;
    }

    .oes-subtext {
        margin: 0 auto 20px auto;
    }

    .oes-actions {
        justify-content: center;
        width: 100%;
    }
}


/*=================================
     RESELLER-SOFTWARE
=================================*/
/* ====================================
   HERO SECTION
==================================== */

.rs-hero-section {
    background: #08111f;
    background-image:
        radial-gradient(circle at 20% 20%, rgba(37,99,235,.20), transparent 40%),
        radial-gradient(circle at 80% 30%, rgba(59,130,246,.15), transparent 40%);
    position: relative;
    overflow: hidden;
    padding: 120px 0 80px;
}

.rs-hero-badge {
    display: inline-block;
    padding: 8px 18px;
    background: rgba(37,99,235,.15);
    color: #60a5fa;
    border-radius: 50px;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 25px;
}

.rs-hero-title {
    color: #fff;
    font-size: 48px;
    font-weight: 800;
    line-height: 1.15;
    margin-bottom: 25px;
}

.rs-hero-title span {
    color: #3b82f6;
}

.rs-hero-description {
    color: #94a3b8;
    font-size: 18px;
    line-height: 1.8;
    max-width: 550px;
    margin-bottom: 35px;
}

.rs-hero-buttons {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
    margin-bottom: 40px;
}

.rs-btn-primary {
    background: #2563eb;
    color: #fff;
    padding: 15px 32px;
    border-radius: 12px;
    font-weight: 600;
    transition: all .3s ease;
}

.rs-btn-primary:hover {
    background: #1d4ed8;
    color: #fff;
    transform: translateY(-2px);
}

.rs-btn-outline {
    border: 1px solid #3b82f6;
    color: #fff;
    padding: 15px 32px;
    border-radius: 12px;
    font-weight: 600;
    transition: all .3s ease;
}

.rs-btn-outline:hover {
    background: #2563eb;
    color: #fff;
}

.rs-hero-features {
    display: flex;
    gap: 30px;
    flex-wrap: wrap;
}

.rs-feature-item {
    color: #cbd5e1;
    font-size: 15px;
}

.rs-feature-item i {
    color: #3b82f6;
    margin-right: 8px;
}

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

.rs-hero-image-wrapper {
    position: relative;
    text-align: center;
}

.rs-dashboard-image {
    max-width: 100%;
    filter: drop-shadow(0 25px 60px rgba(37,99,235,.30));
}


/* ====================================
   FLOATING STATS SECTION
==================================== */

.reseller-software-stats {
    margin-top: -90px;
    position: relative;
    z-index: 20;
}

.rs-stats-box {
    background: #ffffff;
    border-radius: 24px;
    padding: 35px 25px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    box-shadow: 0 20px 60px rgba(0,0,0,.12);
}

/* Stat Item */

.rs-stat-item {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 15px;
    text-align: left;
    position: relative;
}

.rs-stat-item:not(:last-child) {
    border-right: 1px solid #e5e7eb;
    padding-right: 20px;
}

.rs-icon {
    width: 60px;
    min-width: 60px;
    height: 60px;
    border-radius: 50%;
    background: #eff6ff;
    display: flex;
    align-items: center;
    justify-content: center;
}

.rs-icon i {
    font-size: 24px;
    color: #2563eb;
}

.rs-stat-content h4 {
    margin: 0;
    font-size: 26px;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.1;
}

.rs-stat-content p {
    margin: 4px 0 0;
    font-size: 14px;
    color: #64748b;
}

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

@media (max-width: 1199px) {

    .rs-hero-title {
        font-size: 48px;
    }

}

@media (max-width: 991px) {

    .rs-hero-section {
        padding: 10px 0 30px;
        text-align: center;
    }

    .rs-hero-title {
        font-size: 42px;
    }

    .rs-hero-description {
        margin-left: auto;
        margin-right: auto;
    }

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

    .rs-hero-features {
        justify-content: center;
    }

    .rs-floating-card {
        display: none;
    }

    .reseller-software-stats {
        margin-top: -40px;
    }

    .rs-stats-box {
        flex-direction: column;
        gap: 25px;
    }

    .rs-stat-item {
        width: 100%;
        justify-content: center;
        text-align: left;
        border-right: none !important;
        padding-right: 0 !important;
        padding-bottom: 20px;
        border-bottom: 1px solid #e5e7eb;
    }

    .rs-stat-item:last-child {
        border-bottom: none;
        padding-bottom: 0;
    }
}

@media (max-width: 576px) {

    .rs-hero-title {
        font-size: 34px;
    }

    .rs-hero-description {
        font-size: 16px;
    }

    .rs-btn-primary,
    .rs-btn-outline {
        width: 100%;
        text-align: center;
    }

    .rs-stat-content h4 {
        font-size: 22px;
    }
}

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

.rs-solutions {
    padding: 90px 0;
    background: #fafcff;
}

.rs-solutions-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
}

/* Header */

.rs-header {
    text-align: center;
    margin-bottom: 60px;
}

.rs-label {
    color: #2563eb;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.rs-title {
    font-size: 42px;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 12px;
}

.rs-subtitle {
    font-size: 17px;
    color: #64748b;
    margin: 0;
}

/* Grid */

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

/* Card */

.rs-card {
    background: #fff;
    padding: 35px 25px;
    border-radius: 18px;
    border: 1px solid #e2e8f0;
    transition: all .3s ease;
    height: 100%;
}

    .rs-card:hover {
        transform: translateY(-8px);
        box-shadow: 0 15px 40px rgba(0,0,0,.08);
        border-color: #dbeafe;
    }

.rs-icon-wrapper {
    width: 65px;
    height: 65px;
    background: #eff6ff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}

    .rs-icon-wrapper i {
        font-size: 26px;
        color: #2563eb;
    }

.rs-card-title {
    font-size: 20px;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 12px;
}

.rs-card-desc {
    font-size: 15px;
    color: #64748b;
    line-height: 1.7;
    margin: 0;
}

/* Responsive */

@media (max-width: 991px) {

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

    .rs-title {
        font-size: 34px;
    }
}

@media (max-width: 576px) {

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

    .rs-title {
        font-size: 28px;
    }

    .rs-card {
        text-align: center;
    }

    .rs-icon-wrapper {
        margin: 0 auto 20px;
    }
}
/*=========================
    RS FEATURES SECTION
=========================*/

.rs-features {
    background: #f8fcff;
    padding: 100px 0;
    overflow: hidden;
}

/* Left Content */

.rs-content-col {
    padding-right: 20px;
}

.rs-label {
    color: #2563eb;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 15px;
}

.rs-heading {
    font-size: 42px;
    font-weight: 700;
    line-height: 1.2;
    color: #0f172a;
    margin-bottom: 35px;
}

/* Features Grid */

.rs-feature-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 40px;
}

.rs-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

    .rs-list li {
        display: flex;
        align-items: center;
        margin-bottom: 18px;
        color: #334155;
        font-size: 15px;
        font-weight: 500;
        line-height: 1.5;
    }

        .rs-list li i {
            width: 22px;
            height: 22px;
            min-width: 22px;
            border-radius: 50%;
            background: #dbeafe;
            color: #2563eb;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 12px;
            font-size: 11px;
        }

/* Image Side */

.rs-image-col {
    display: flex;
    justify-content: center;
    align-items: center;
}

.rs-mockup-img {
    width: 100%;
    max-width: 750px;
    border-radius: 20px;
    box-shadow: 0 25px 60px rgba(15, 23, 42, 0.12);
    transition: all .4s ease;
}

    .rs-mockup-img:hover {
        transform: translateY(-5px);
    }

/* Tablet */

@media (max-width: 991px) {

    .rs-features {
        padding: 80px 0;
    }

    .rs-content-col {
        text-align: center;
        margin-bottom: 50px;
        padding-right: 0;
    }

    .rs-heading {
        font-size: 34px;
    }

    .rs-feature-grid {
        max-width: 700px;
        margin: 0 auto;
        text-align: left;
    }
}

/* Mobile */

@media (max-width: 767px) {

    .rs-features {
        padding: 60px 0;
    }

    .rs-heading {
        font-size: 28px;
    }

    .rs-feature-grid {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .rs-list li {
        font-size: 14px;
    }

    .rs-mockup-img {
        border-radius: 14px;
    }
}

/*===================
 rs-process
===================*/
/*=================================
      PROCESS SECTION
=================================*/

.rs-process {
    padding: 100px 0;
    background: #ffffff;
    position: relative;
}

/* Header */

.rs-process-header {
    text-align: center;
    margin-bottom: 70px;
}

.rs-process-label {
    display: inline-block;
    color: #2563eb;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.rs-process-title {
    font-size: 42px;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 15px;
}

.rs-process-subtitle {
    color: #64748b;
    font-size: 17px;
    max-width: 650px;
    margin: auto;
}

/* Timeline Line */

.rs-process-wrapper {
    position: relative;
}

    .rs-process-wrapper::before {
        content: "";
        position: absolute;
        top: 60px;
        left: 12%;
        width: 76%;
        border-top: 2px dashed #dbeafe;
        z-index: 0;
    }

/* Cards */

.rs-process-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 20px;
    padding: 30px 20px;
    position: relative;
    height: 100%;
    z-index: 2;
    transition: all 0.3s ease;
}

    .rs-process-card:hover {
        transform: translateY(-8px);
        box-shadow: 0 20px 40px rgba(37,99,235,0.12);
    }

/* Number Badge */

.rs-step-badge {
    position: absolute;
    top: -15px;
    right: 20px;
    width: 40px;
    height: 40px;
    background: #2563eb;
    color: #ffffff;
    border-radius: 50%;
    font-size: 12px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 20px rgba(37,99,235,0.25);
}

/* Icon + Text Layout */

.rs-process-content {
    display: flex;
    align-items: flex-start;
    gap: 15px;
}

/* Icon */

.rs-process-icon {
    width: 65px;
    min-width: 65px;
    height: 65px;
    background: #eff6ff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .rs-process-icon i {
        font-size: 24px;
        color: #2563eb;
    }

/* Text */

.rs-process-text {
    flex: 1;
}

    .rs-process-text h4 {
        font-size: 18px;
        font-weight: 700;
        color: #0f172a;
        margin-bottom: 10px;
    }

    .rs-process-text p {
        font-size: 14px;
        line-height: 1.7;
        color: #64748b;
        margin: 0;
    }

/* Tablet */

@media (max-width: 991px) {

    .rs-process-wrapper::before {
        display: none;
    }

    .rs-process-title {
        font-size: 34px;
    }
}

/* Mobile */

@media (max-width: 767px) {

    .rs-process {
        padding: 70px 0;
    }

    .rs-process-title {
        font-size: 28px;
    }

    .rs-process-subtitle {
        font-size: 15px;
    }

    .rs-process-content {
        align-items: center;
    }

    .rs-process-icon {
        width: 55px;
        min-width: 55px;
        height: 55px;
    }

        .rs-process-icon i {
            font-size: 20px;
        }

    .rs-process-text h4 {
        font-size: 16px;
    }

    .rs-process-text p {
        font-size: 13px;
    }
}

/* --- Main Section Container --- */
.rs-why {
    background-color: #f8fcff; /* Very light blue background */
    padding: 80px 20px;
    color: #0f172a;
}

.rs-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 60px;
    flex-wrap: wrap;
}

/* --- Left Column: Image --- */
.rs-image-col {
    flex: 1;
    min-width: 300px;
    display: flex;
    justify-content: center;
}

.rs-mockup {
    width: 100%;
    max-width: 650px;
    height: auto;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
    object-fit: cover;
}

/* --- Right Column: Content --- */
.rs-content-col {
    flex: 1.1;
    min-width: 320px;
}

.rs-label {
    color: #2563eb;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 10px;
}

.rs-heading {
    font-size: 36px;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 30px;
    line-height: 1.2;
}

/* --- Feature Grid Layout --- */
.rs-feature-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px 40px;
}

/* --- Individual Feature Item --- */
.rs-feature-item {
    display: flex;
    align-items: flex-start;
    gap: 15px;
}

/* Icon Circle Badge */
.rs-icon-box {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    background-color: #eff6ff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .rs-icon-box i {
        font-size: 18px;
        color: #2563eb;
    }

/* Text content */
.rs-text-box h4 {
    font-size: 16px;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 4px;
}

.rs-text-box p {
    font-size: 14px;
    line-height: 1.5;
    color: #64748b;
}

/* --- Responsive Design --- */
@media (max-width: 992px) {
    .rs-container {
        flex-direction: column-reverse; /* Stack content on top of image */
        text-align: center;
    }

    .rs-feature-item {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .rs-heading {
        font-size: 30px;
    }
}

@media (max-width: 600px) {
    .rs-feature-grid {
        grid-template-columns: 1fr; /* Single column for very small screens */
        gap: 20px;
    }

    .rs-heading {
        font-size: 26px;
    }
}
/* ==========================
   FAQ SECTION
========================== */

.rs-faq-section {
    padding: 40px 0;
    background: linear-gradient( 180deg, #f8fbff 0%, #ffffff 100% );
    position: relative;
}

.rs-faq-container {
    max-width: 1280px;
    margin: auto;
}

/* ==========================
   HEADER
========================== */

.rs-faq-header {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 60px;
}

.rs-faq-tag {
    display: inline-block;
    padding: 8px 18px;
    border-radius: 50px;
    background: rgba(37, 99, 235, 0.08);
    color: #2563eb;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 16px;
}

.rs-faq-header h2 {
    font-size: 42px;
    font-weight: 800;
    color: #0f172a;
    margin-bottom: 16px;
}

.rs-faq-header p {
    font-size: 16px;
    line-height: 1.8;
    color: #64748b;
}

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

.rs-faq-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}

.rs-faq-column {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* ==========================
   FAQ CARD
========================== */

.rs-faq-item {
    width: 100%;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 18px;
    overflow: hidden;
    transition: all 0.35s ease;
    box-shadow: 0 8px 30px rgba(15, 23, 42, 0.04);
}

    .rs-faq-item:hover {
        transform: translateY(-3px);
        border-color: #bfdbfe;
        box-shadow: 0 15px 35px rgba(37, 99, 235, 0.08);
    }

/* ==========================
   QUESTION
========================== */

.rs-faq-question {
    width: 100%;
    min-height: 75px;
    padding: 22px 25px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
}

    .rs-faq-question span {
        width: calc(100% - 40px);
        font-size: 17px;
        font-weight: 600;
        color: #0f172a;
        line-height: 1.5;
    }

    .rs-faq-question i {
        width: 34px;
        height: 34px;
        border-radius: 50%;
        background: #eff6ff;
        color: #2563eb;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all .3s ease;
    }

/* ==========================
   ANSWER
========================== */

.rs-faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: all 0.4s ease;
}

    .rs-faq-answer p {
        padding: 0 25px 25px;
        color: #64748b;
        font-size: 15px;
        line-height: 1.8;
    }

/* ==========================
   ACTIVE
========================== */

.rs-faq-item.active {
    border-color: #2563eb;
}

    .rs-faq-item.active .rs-faq-question i {
        background: #2563eb;
        color: #fff;
        transform: rotate(180deg);
    }

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

@media (max-width: 991px) {

    .rs-faq-grid {
        grid-template-columns: 1fr;
    }

    .rs-faq-header h2 {
        font-size: 34px;
    }
}

@media (max-width: 768px) {

    .rs-faq-section {
        padding: 70px 15px;
    }

    .rs-faq-header h2 {
        font-size: 28px;
    }

    .rs-faq-question {
        padding: 18px;
    }

        .rs-faq-question span {
            font-size: 15px;
        }
}

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

.rs-cta-section {
    padding: 40px 0;
    background: #ffffff;
}

.rs-cta-wrapper {
    background: linear-gradient( 90deg, #051139 0%, #071b5c 50%, #051139 100% );
    border-radius: 24px;
    padding: 40px 50px;
    overflow: hidden;
    position: relative;
}

    .rs-cta-wrapper::before {
        content: "";
        position: absolute;
        right: -100px;
        top: -80px;
        width: 250px;
        height: 250px;
        background: #1d7cff;
        border-radius: 50%;
        filter: blur(100px);
        opacity: .18;
    }

    .rs-cta-wrapper::after {
        content: "";
        position: absolute;
        left: -80px;
        bottom: -80px;
        width: 220px;
        height: 220px;
        background: #6d5dfc;
        border-radius: 50%;
        filter: blur(90px);
        opacity: .15;
    }

.rs-cta-content {
    position: relative;
    z-index: 2;
}

/* Badge */

.rs-cta-badge {
    display: inline-flex;
    align-items: center;
    padding: 8px 14px;
    border-radius: 30px;
    background: rgba(255,255,255,.08);
    color: #bcd3ff;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 15px;
}

/* Title */

.rs-cta-title {
    color: #fff;
    font-size: 38px;
    line-height: 1.2;
    font-weight: 700;
    margin-bottom: 15px;
}

    .rs-cta-title span {
        color: #6da9ff;
    }

.rs-cta-text {
    color: rgba(255,255,255,.75);
    font-size: 16px;
    line-height: 1.7;
    max-width: 520px;
    margin-bottom: 25px;
}

/* Buttons */

.rs-cta-buttons {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}

.rs-btn-primary,
.rs-btn-outline {
    height: 50px;
    padding: 0 26px;
    border-radius: 12px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    transition: .3s;
}

.rs-btn-primary {
    background: #1d7cff;
    color: #fff;
    box-shadow: 0 10px 25px rgba(29,124,255,.35);
}

    .rs-btn-primary:hover {
        transform: translateY(-2px);
        color: #fff;
    }

.rs-btn-outline {
    border: 1px solid rgba(255,255,255,.15);
    color: #fff;
    background: rgba(255,255,255,.05);
}

    .rs-btn-outline:hover {
        background: rgba(255,255,255,.1);
        color: #fff;
    }

/* Right Image */

.rs-cta-image {
    position: relative;
    z-index: 2;
    text-align: center;
}

    .rs-cta-image img {
        max-width: 260px;
        width: 100%;
        height: auto;
        filter: drop-shadow( 0 15px 40px rgba(29,124,255,.35) );
        animation: floatImage 4s ease-in-out infinite;
    }

@keyframes floatImage {

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

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

/* Responsive */

@media(max-width:991px) {

    .rs-cta-wrapper {
        padding: 35px 25px;
    }

    .rs-cta-title {
        font-size: 30px;
    }

    .rs-cta-image {
        margin-top: 30px;
    }

        .rs-cta-image img {
            max-width: 220px;
        }
}

@media(max-width:576px) {

    .rs-cta-title {
        font-size: 26px;
    }

    .rs-btn-primary,
    .rs-btn-outline {
        width: 100%;
    }

    .rs-cta-image img {
        max-width: 180px;
    }
}




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

.lms-comparision-section {
    background: #f8fbff;
    overflow: hidden;
}

.lms-comparision-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 22px;
    border-radius: 50px;
    background: linear-gradient(90deg,#1d4ed8,#2563eb);
    color: #fff;
    font-weight: 600;
    font-size: 14px;
    letter-spacing: .5px;
}

.lms-comparision-title {
    font-size: 52px;
    font-weight: 800;
    color: #0f172a;
    line-height: 1.2;
}

    .lms-comparision-title span {
        display: inline-flex;
        justify-content: center;
        align-items: center;
        width: 75px;
        height: 75px;
        border-radius: 50%;
        background: linear-gradient(135deg,#2563eb,#06b6d4);
        color: #fff;
        font-size: 28px;
        margin: 0 12px;
        box-shadow: 0 15px 35px rgba(37,99,235,.25);
    }

.lms-comparision-subtitle {
    color: #64748b;
    font-size: 18px;
    max-width: 700px;
    margin: auto;
}

.lms-comparision-wrapper {
    display: grid;
    grid-template-columns: 1fr 120px 1fr;
    gap: 25px;
    align-items: start;
}

.lms-comparision-column {
    background: #fff;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(15,23,42,.08);
}

.lms-comparision-header {
    padding: 22px;
    color: #fff;
    text-align: center;
    font-size: 24px;
    font-weight: 700;
}

    .lms-comparision-header.traditional {
        background: linear-gradient(135deg,#0ea5e9,#0284c7);
    }

    .lms-comparision-header.ai {
        background: linear-gradient(135deg,#2563eb,#1d4ed8);
    }

    .lms-comparision-header i {
        margin-right: 8px;
    }

.lms-comparision-item {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 24px 28px;
    border-bottom: 1px solid #eef3fa;
    transition: .3s;
    min-height: 120px;
}

    .lms-comparision-item:hover {
        background: #f9fbff;
    }

    .lms-comparision-item:last-child {
        border: none;
    }

    .lms-comparision-item i {
        width: 70px;
        height: 70px;
        min-width: 70px;
        border-radius: 18px;
        background: #eff6ff;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 28px;
        color: #2563eb;
    }

    .lms-comparision-item.success i {
        background: #dbeafe;
        color: #1d4ed8;
    }

    .lms-comparision-item h5 {
        font-size: 20px;
        font-weight: 700;
        color: #0f172a;
        margin-bottom: 8px;
    }

    .lms-comparision-item p {
        color: #64748b;
        margin: 0;
        line-height: 1.6;
    }

.lms-comparision-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 45px;
    padding-top: 20px;
}

.lms-comparision-vs {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 28px;
    font-weight: 800;
    color: #fff;
    background: linear-gradient(135deg,#2563eb,#06b6d4);
    box-shadow: 0 15px 35px rgba(37,99,235,.35);
}

.lms-comparision-check {
    width: 62px;
    height: 62px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #fff;
    color: #2563eb;
    font-size: 24px;
    box-shadow: 0 10px 30px rgba(0,0,0,.08);
}

.lms-comparision-footer {
    margin-top: 45px;
    background: #fff;
    border-radius: 60px;
    padding: 22px;
    text-align: center;
    font-size: 22px;
    font-weight: 700;
    color: #2563eb;
    box-shadow: 0 15px 40px rgba(0,0,0,.07);
}

    .lms-comparision-footer i {
        margin-right: 10px;
    }

/* ===========================
        TABLET
=========================== */

@media (max-width:991px) {

    .lms-comparision-wrapper {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    /* Remove arrows completely */

    .lms-comparision-center {
        display: none;
    }

    .lms-comparision-column {
        border-radius: 20px;
    }

    .lms-comparision-title {
        font-size: 42px;
    }

        .lms-comparision-title span {
            width: 60px;
            height: 60px;
            font-size: 22px;
            margin: 0 8px;
        }

    .lms-comparision-subtitle {
        font-size: 16px;
        padding: 0 20px;
    }

    .lms-comparision-header {
        font-size: 22px;
        padding: 18px;
    }

    .lms-comparision-item {
        padding: 20px;
        min-height: auto;
    }

        .lms-comparision-item i {
            width: 60px;
            height: 60px;
            min-width: 60px;
            font-size: 24px;
        }

        .lms-comparision-item h5 {
            font-size: 18px;
        }

        .lms-comparision-item p {
            font-size: 15px;
        }

    .lms-comparision-footer {
        font-size: 18px;
        border-radius: 18px;
        padding: 18px;
    }
}

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

@media (max-width:767px) {

    .lms-comparision-section {
        padding: 60px 0;
    }

    .lms-comparision-title {
        font-size: 32px;
        line-height: 1.3;
    }

        .lms-comparision-title span {
            width: 52px;
            height: 52px;
            font-size: 18px;
            margin: 8px auto;
            display: flex;
        }

    .lms-comparision-badge {
        font-size: 13px;
        padding: 8px 18px;
    }

    .lms-comparision-subtitle {
        font-size: 15px;
        line-height: 1.7;
    }

    .lms-comparision-column {
        border-radius: 18px;
    }

    .lms-comparision-header {
        font-size: 20px;
        padding: 16px;
    }

    .lms-comparision-item {
        flex-direction: column;
        text-align: center;
        gap: 15px;
        padding: 22px 18px;
    }

        .lms-comparision-item i {
            width: 56px;
            height: 56px;
            min-width: 56px;
            font-size: 22px;
            border-radius: 14px;
        }

        .lms-comparision-item h5 {
            font-size: 18px;
            margin-bottom: 6px;
        }

        .lms-comparision-item p {
            font-size: 14px;
            line-height: 1.6;
        }

    .lms-comparision-footer {
        font-size: 16px;
        border-radius: 16px;
        padding: 18px 15px;
        line-height: 1.6;
    }
}

/* ===========================
      SMALL DEVICES
=========================== */

@media (max-width:480px) {

    .lms-comparision-title {
        font-size: 28px;
    }

    .lms-comparision-header {
        font-size: 18px;
    }

    .lms-comparision-item {
        padding: 18px 15px;
    }

        .lms-comparision-item h5 {
            font-size: 17px;
        }

        .lms-comparision-item p {
            font-size: 13px;
        }

    .lms-comparision-footer {
        font-size: 15px;
    }
}

/* ===================================
   LMS HERO SECTION
=================================== */

.lms-hero {
    position: relative;
    overflow: hidden;
    padding: 130px 0 40px;
    background: radial-gradient( circle at top right, rgba(61,116,255,.18), transparent 35% ), linear-gradient( 135deg, #050816 0%, #08112d 45%, #0d1d4f 100% );
}

    /* Glow Effect */

    .lms-hero::before {
        content: "";
        position: absolute;
        top: -250px;
        right: -200px;
        width: 550px;
        height: 550px;
        border-radius: 50%;
        background: #2d63ff;
        opacity: .18;
        filter: blur(150px);
    }

/* Container */

.lms-container {
    max-width: 1280px;
    margin: auto;
    padding: 0 20px;
    position: relative;
    z-index: 2;
}

/* Layout */

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

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

.lms-hero-content {
    flex: 0 0 46%;
}

/* Tag */

.lms-hero-tag {
    display: block;
    color: #4f80ff;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 18px;
}

/* Badge */

.lms-hero-badge {
    display: inline-flex;
    align-items: center;
    padding: 10px 18px;
    border-radius: 50px;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.08);
    color: #dce5ff;
    font-size: 14px;
    margin-bottom: 28px;
}

/* Title */

.lms-hero-title {
    color: #fff;
    font-size: 55px;
    line-height: 1.05;
    font-weight: 800;
    letter-spacing: -2px;
    margin-bottom: 24px;
}

/* Description */

.lms-hero-description {
    color: #b8c5df;
    font-size: 19px;
    line-height: 1.8;
    max-width: 560px;
    margin-bottom: 40px;
}

/* Buttons */

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

/* Primary Button */

.lms-btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 16px 34px;
    border-radius: 14px;
    text-decoration: none;
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    background: linear-gradient( 135deg, #3d74ff, #2453ff );
    box-shadow: 0 15px 35px rgba(45,99,255,.35);
    transition: .3s ease;
}

    .lms-btn-primary:hover {
        transform: translateY(-4px);
    }

/* Secondary Button */

.lms-btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 16px 34px;
    border-radius: 14px;
    text-decoration: none;
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.10);
    backdrop-filter: blur(10px);
    transition: .3s ease;
}

    .lms-btn-secondary:hover {
        background: rgba(255,255,255,.08);
    }


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

.lms-hero-image {
    flex: 0 0 54%;
    position: relative;
    display: flex;
    justify-content: flex-end;
}

    .lms-hero-image::before {
        content: "";
        position: absolute;
        inset: 15%;
        background: #2d63ff;
        opacity: .18;
        filter: blur(120px);
        z-index: 1;
    }

    .lms-hero-image img {
        width: 100%;
        max-width: 720px;
        position: relative;
        z-index: 2;
        border-radius: 24px;
        box-shadow: 0 40px 100px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.08);
        transition: .4s ease;
    }

        .lms-hero-image img:hover {
            transform: translateY(-8px);
        }

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

@media (max-width:991px) {

    .lms-hero {
        padding: 130px 0 40px;
    }

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

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

    .lms-hero-buttons,
    .lms-hero-stats {
        justify-content: center;
    }

    .lms-hero-description {
        max-width: 100%;
    }

    .lms-hero-image {
        justify-content: center;
    }
}

@media (max-width:767px) {

    .lms-hero-title {
        font-size: 38px;
    }

    .lms-hero-description {
        font-size: 16px;
    }

    .lms-hero-buttons {
        flex-direction: column;
    }

    .lms-btn-primary,
    .lms-btn-secondary {
        width: 100%;
    }

    .lms-stat-item {
        width: calc(50% - 8px);
        min-width: auto;
    }
}

/* ==================================
   LMS DETAILS SECTION
================================== */

.lms-details {
    padding: 60px 0;
    background: #ffffff;
    overflow: hidden;
}

/* Image */

.lms-details-image {
    text-align: center;
}

    .lms-details-image img {
        max-width: 100%;
        height: auto;
        transition: .4s ease;
    }

        .lms-details-image img:hover {
            transform: translateY(-8px);
        }

/* Content */

.lms-details-content {
    max-width: 560px;
}

.lms-details-tag {
    display: inline-block;
    color: #2d63ff;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 15px;
}

.lms-details-title {
    font-size: 48px;
    font-weight: 800;
    line-height: 1.15;
    color: #0d1b4d;
    margin-bottom: 20px;
}

.lms-details-description {
    font-size: 17px;
    line-height: 1.8;
    color: #667085;
    margin-bottom: 30px;
}

/* List */

.lms-details-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

    .lms-details-list li {
        display: flex;
        align-items: flex-start;
        gap: 14px;
        font-size: 16px;
        color: #344054;
        margin-bottom: 18px;
        line-height: 1.6;
    }

        .lms-details-list li i {
            color: #2d63ff;
            font-size: 18px;
            margin-top: 3px;
            flex-shrink: 0;
        }

/* Responsive */

@media(max-width:991px) {

    .lms-details {
        padding: 70px 0;
    }

    .lms-details-content {
        max-width: 100%;
        text-align: center;
    }

    .lms-details-list li {
        justify-content: center;
        text-align: left;
    }

    .lms-details-title {
        font-size: 38px;
    }
}

@media(max-width:767px) {

    .lms-details-title {
        font-size: 32px;
    }

    .lms-details-description {
        font-size: 16px;
    }
}

/* =====================================
   LMS MODULES SECTION
===================================== */

.lsm-modules {
    padding: 30px 0;
    background: linear-gradient( 180deg, #f8fbff 0%, #f1f6ff 50%, #ffffff 100% );
}

/* Heading */

.lsm-modules-heading {
    max-width: 820px;
    margin: 0 auto 70px;
    text-align: center;
}

.lsm-modules-tag {
    display: inline-block;
    padding: 8px 18px;
    border-radius: 50px;
    background: #e8efff;
    color: #2563eb;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1px;
    margin-bottom: 20px;
}

.lsm-modules-title {
    font-size: clamp(38px,4vw,56px);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -1.5px;
    color: #0f172a;
    margin-bottom: 20px;
}

.lsm-modules-subtitle {
    max-width: 720px;
    margin: auto;
    font-size: 18px;
    line-height: 1.8;
    color: #64748b;
}

/* Grid */

.lsm-modules-grid {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 24px;
}

/* Card */

.lsm-modules-card {
    background: #ffffff;
    border: 1px solid #e7edf8;
    border-radius: 24px;
    padding: 28px;
    position: relative;
    overflow: hidden;
    transition: .35s ease;
    height: 100%;
    box-shadow: 0 8px 30px rgba(15,23,42,.05);
}

    .lsm-modules-card::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 4px;
        background: linear-gradient( 90deg, #2563eb, #7c3aed );
        transform: scaleX(0);
        transform-origin: left;
        transition: .35s;
    }

    .lsm-modules-card:hover::before {
        transform: scaleX(1);
    }

    .lsm-modules-card:hover {
        transform: translateY(-8px);
        box-shadow: 0 20px 50px rgba(37,99,235,.12);
    }

/* Header */

.lsm-modules-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 22px;
}

/* Icon */

.lsm-modules-icon-wrapper {
    width: 64px;
    height: 64px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 26px;
    box-shadow: 0 8px 20px rgba(0,0,0,.05);
}

/* Title */

.lsm-modules-card-title {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.3;
    color: #0f172a;
}

/* List */

.lsm-modules-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

    .lsm-modules-list li {
        position: relative;
        padding-left: 26px;
        margin-bottom: 12px;
        font-size: 15px;
        color: #475569;
        line-height: 1.7;
    }

        .lsm-modules-list li::before {
            content: "✓";
            position: absolute;
            left: 0;
            top: 0;
            color: #2563eb;
            font-weight: 700;
        }

/* Icon Colors */

.icon-blue {
    background: #e8f0ff;
    color: #2563eb;
}

.icon-green {
    background: #eafbf0;
    color: #16a34a;
}

.icon-purple {
    background: #f3e8ff;
    color: #9333ea;
}

.icon-orange {
    background: #fff2e8;
    color: #ea580c;
}

.icon-purple-light {
    background: #f6ebff;
    color: #7c3aed;
}

.icon-pink {
    background: #fde7f3;
    color: #db2777;
}

.icon-blue-dark {
    background: #e0f2fe;
    color: #0284c7;
}

.icon-blue-light {
    background: #eff6ff;
    color: #3b82f6;
}

/* Responsive */

@media (max-width:1199px) {
    .lsm-modules-grid {
        grid-template-columns: repeat(3,1fr);
    }
}

@media (max-width:991px) {
    .lsm-modules-grid {
        grid-template-columns: repeat(2,1fr);
    }
}

@media (max-width:767px) {

    .lsm-modules {
        padding: 70px 0;
    }

    .lsm-modules-grid {
        grid-template-columns: 1fr;
    }

    .lsm-modules-title {
        font-size: 34px;
    }

    .lsm-modules-subtitle {
        font-size: 16px;
    }
}


/* =====================================
   LMS FEATURES SECTION
===================================== */

.lms-features {
    padding: 30px 0;
    background: #ffffff;
}

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

.lms-features-heading {
    max-width: 700px;
    margin: 0 auto 50px;
    text-align: center;
}

.lms-features-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 7px 16px;
    border-radius: 50px;
    background: #eef4ff;
    color: #2563eb;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 14px;
}

.lms-features-title {
    font-size: clamp(30px,3vw,42px);
    font-weight: 800;
    line-height: 1.2;
    color: #0f172a;
    margin-bottom: 14px;
    letter-spacing: -1px;
}

.lms-features-subtitle {
    max-width: 620px;
    margin: auto;
    font-size: 16px;
    line-height: 1.7;
    color: #64748b;
}

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

.lms-features-grid {
    display: grid;
    grid-template-columns: repeat(6,1fr);
    gap: 18px;
}

/* ==========================
   Cards
========================== */

.lms-features-card {
    position: relative;
    overflow: hidden;
    background: #ffffff;
    border: 1px solid #e7edf8;
    border-radius: 20px;
    padding: 24px 16px;
    text-align: center;
    transition: .35s ease;
    box-shadow: 0 5px 20px rgba(15,23,42,.04);
    height: 100%;
}

    .lms-features-card::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 3px;
        background: linear-gradient( 90deg, #2563eb, #7c3aed );
        transform: scaleX(0);
        transform-origin: left;
        transition: .35s ease;
    }

    .lms-features-card:hover::before {
        transform: scaleX(1);
    }

    .lms-features-card:hover {
        transform: translateY(-8px);
        border-color: #d9e5ff;
        box-shadow: 0 20px 45px rgba(37,99,235,.10);
    }

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

.lms-features-icon-wrapper {
    width: 60px;
    height: 60px;
    margin: 0 auto 16px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #eef4ff;
    color: #2563eb;
    font-size: 24px;
}

/* ==========================
   Title
========================== */

.lms-features-card-title {
    font-size: 18px;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 10px;
}

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

.lms-features-card-desc {
    font-size: 14px;
    line-height: 1.6;
    color: #64748b;
    margin: 0;
}

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

@media(max-width:1199px) {

    .lms-features-grid {
        grid-template-columns: repeat(3,1fr);
    }
}

@media(max-width:768px) {

    .lms-features {
        padding: 30px 0;
    }

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

    .lms-features-title {
        font-size: 32px;
    }

    .lms-features-subtitle {
        font-size: 15px;
    }
}

@media(max-width:576px) {

    .lms-features-grid {
        grid-template-columns: 1fr;
    }
}

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

.lms-industries {
    padding: 40px 0;
    background: #ffffff;
}

.lms-industries-wrapper {
    display: grid;
    grid-template-columns: 420px 1fr;
    gap: 60px;
    align-items: center;
}

/* LEFT SIDE */

.lms-industries-tag {
    display: inline-block;
    padding: 8px 16px;
    background: #eef4ff;
    color: #2563eb;
    border-radius: 50px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
    margin-bottom: 18px;
}

.lms-industries-title {
    font-size: 38px;
    font-weight: 800;
    line-height: 1.15;
    color: #0f172a;
    margin-bottom: 20px;
}

.lms-industries-subtitle {
    font-size: 17px;
    line-height: 1.8;
    color: #64748b;
    margin-bottom: 30px;
}



/* RIGHT SIDE */

.lms-industries-grid {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 16px;
}

.lms-industries-card {
    background: #fff;
    border: 1px solid #e8eef9;
    border-radius: 18px;
    padding: 24px 12px;
    text-align: center;
    transition: .3s;
    min-height: 120px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    box-shadow: 0 5px 20px rgba(15,23,42,.04);
}

    .lms-industries-card:hover {
        transform: translateY(-6px);
        border-color: #cfe0ff;
        box-shadow: 0 15px 35px rgba(37,99,235,.10);
    }

    .lms-industries-card i {
        font-size: 28px;
        color: #2563eb;
        margin-bottom: 12px;
    }

    .lms-industries-card span {
        font-size: 15px;
        font-weight: 600;
        color: #0f172a;
        line-height: 1.4;
    }

/* Responsive */

@media(max-width:1199px) {

    .lms-industries-wrapper {
        grid-template-columns: 1fr;
    }

    .lms-industries-content {
        text-align: center;
    }
}

@media(max-width:768px) {

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

    .lms-industries-title {
        font-size: 36px;
    }
}

@media(max-width:576px) {

    .lms-industries-grid {
        grid-template-columns: 1fr;
    }

    .lms-industries {
        padding: 70px 0;
    }
}

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

.lms-process {
    padding: 30px 20px;
    background: #ffffff;
    overflow: hidden;
}

.lms-process-container {
    max-width: 1280px;
    margin: 0 auto;
}

/* Header */

.lms-process-header {
    text-align: center;
    max-width: 750px;
    margin: 0 auto 70px;
}

.lms-process-badge {
    display: inline-block;
    padding: 8px 18px;
    background: rgba(37, 99, 235, 0.08);
    color: #2563eb;
    border-radius: 30px;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 18px;
}

.lms-process-title {
    font-size: 42px;
    font-weight: 800;
    line-height: 1.2;
    color: #0f172a;
    margin-bottom: 18px;
}

.lms-process-description {
    font-size: 17px;
    line-height: 1.8;
    color: #64748b;
    margin: 0;
}

/* Steps */

.lms-process-steps {
    display: flex;
    justify-content: space-between;
    position: relative;
    gap: 20px;
    flex-wrap: wrap;
}

    /* Connecting Line */

    .lms-process-steps::before {
        content: "";
        position: absolute;
        top: 42px;
        left: 8%;
        right: 8%;
        height: 3px;
        background: linear-gradient( 90deg, #2563eb, #60a5fa, #2563eb );
        z-index: 0;
        opacity: .15;
    }

/* Step Card */

.lms-process-step {
    flex: 1;
    min-width: 160px;
    background: #fff;
    border-radius: 20px;
    padding: 30px 20px;
    text-align: center;
    position: relative;
    z-index: 2;
    border: 1px solid #e2e8f0;
    transition: all .35s ease;
}

    .lms-process-step:hover {
        transform: translateY(-8px);
        box-shadow: 0 20px 45px rgba(15, 23, 42, 0.08);
        border-color: #dbeafe;
    }

/* Icon */

.lms-process-icon-wrapper {
    width: 84px;
    height: 84px;
    margin: 0 auto 18px;
    border-radius: 50%;
    background: linear-gradient( 135deg, #2563eb, #3b82f6 );
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 30px;
    box-shadow: 0 15px 30px rgba(37, 99, 235, .25);
}

.lms-process-step:hover .lms-process-icon-wrapper {
    transform: scale(1.08);
}

/* Number */

.lms-process-number {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: #2563eb;
    letter-spacing: 2px;
    margin-bottom: 8px;
}

/* Title */

.lms-process-step-title {
    font-size: 17px;
    font-weight: 700;
    line-height: 1.5;
    color: #0f172a;
    margin: 0;
}

.lms-process-step-desc {
    font-size: 12px;
    font-weight: 400;
    line-height: 1.5;
    color: rgb(107, 114, 128);
    margin-top: 10px;
}
/* Tablet */
@media (max-width: 992px) {

    .lms-process-title {
        font-size: 34px;
    }

    .lms-process-description {
        font-size: 16px;
    }

    .lms-process-steps::before {
        display: none;
    }

    .lms-process-step {
        flex: 0 0 calc(50% - 10px);
    }
}

/* Mobile */

@media (max-width: 576px) {

    .lms-process {
        padding: 70px 15px;
    }

    .lms-process-title {
        font-size: 28px;
    }

    .lms-process-description {
        font-size: 15px;
        line-height: 1.7;
    }

    .lms-process-step {
        flex: 0 0 100%;
    }

    .lms-process-icon-wrapper {
        width: 72px;
        height: 72px;
        font-size: 26px;
    }

    .lms-process-step-title {
        font-size: 16px;
    }
}

/* ===================================
   WHY CHOOSE DEVLOK TECHNOLOGIES
=================================== */

.lms-whyus {
    position: relative;
    padding: 50px 0;
    background: #dee2e63d;
    overflow: hidden;
}

    /* Decorative Background Effects */

    .lms-whyus::before {
        content: "";
        position: absolute;
        width: 420px;
        height: 420px;
        border-radius: 50%;
        background: rgba(37, 99, 235, 0.06);
        top: -180px;
        right: -180px;
        filter: blur(90px);
    }

    .lms-whyus::after {
        content: "";
        position: absolute;
        width: 320px;
        height: 320px;
        border-radius: 50%;
        background: rgba(59, 130, 246, 0.05);
        bottom: -120px;
        left: -120px;
        filter: blur(80px);
    }

/* Header */

.lms-whyus-header {
    max-width: 760px;
    margin: 0 auto 60px;
    text-align: center;
    position: relative;
    z-index: 2;
}

.lms-whyus-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 18px;
    background: #eff6ff;
    color: #2563eb;
    border-radius: 50px;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 18px;
}

.lms-whyus-title {
    font-size: 36px;
    font-weight: 800;
    color: #0f172a;
    line-height: 1.2;
    margin-bottom: 18px;
}

.lms-whyus-description {
    font-size: 16px;
    line-height: 1.8;
    color: #64748b;
    margin: 0;
}

/* Grid */

.lms-whyus-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    position: relative;
    z-index: 2;
}

/* Cards */

.lms-whyus-card {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 20px;
    padding: 28px;
    transition: all 0.35s ease;
}

    .lms-whyus-card:hover {
        transform: translateY(-8px);
        border-color: #bfdbfe;
        box-shadow: 0 20px 40px rgba(15, 23, 42, 0.08);
    }

/* Icon */

.lms-whyus-icon {
    flex-shrink: 0;
    width: 64px;
    height: 64px;
    border-radius: 18px;
    background: linear-gradient( 135deg, #2563eb, #60a5fa );
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 24px;
    box-shadow: 0 12px 25px rgba(37, 99, 235, 0.2);
}

/* Content */

.lms-whyus-content {
    flex: 1;
}

    .lms-whyus-content h3 {
        font-size: 20px;
        font-weight: 700;
        color: #0f172a;
        margin-bottom: 10px;
        line-height: 1.4;
    }

    .lms-whyus-content p {
        font-size: 15px;
        line-height: 1.7;
        color: #64748b;
        margin: 0;
    }

/* Tablet */

@media (max-width: 991px) {

    .lms-whyus {
        padding: 80px 0;
    }

    .lms-whyus-grid {
        grid-template-columns: 1fr;
    }

    .lms-whyus-title {
        font-size: 30px;
    }
}

/* Mobile */

@media (max-width: 576px) {

    .lms-whyus {
        padding: 70px 0;
    }

    .lms-whyus-header {
        margin-bottom: 40px;
    }

    .lms-whyus-title {
        font-size: 26px;
    }

    .lms-whyus-description {
        font-size: 15px;
        line-height: 1.7;
    }

    .lms-whyus-card {
        padding: 22px;
        gap: 15px;
    }

    .lms-whyus-icon {
        width: 54px;
        height: 54px;
        font-size: 20px;
    }

    .lms-whyus-content h3 {
        font-size: 17px;
    }

    .lms-whyus-content p {
        font-size: 14px;
    }
}

/* --- LMS FAQ & CTA WRAPPER START --- */

.lms-faq-cta-wrapper {
    padding: 60px 0;
    background-color: #f8faff;
    width: 100%;
}

.lms-faq-cta-container {
    display: flex;
    gap: 40px;
    align-items: stretch;
    flex-wrap: wrap;
}

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

.lms-faq {
    flex: 1;
    min-width: 350px;
}

.lms-faq-title {
    font-size: 28px;
    font-weight: 800;
    color: #0f172a;
    margin-bottom: 25px;
}

.lms-faq-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.lms-faq-item {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    overflow: hidden;
    transition: all .3s ease;
}

    .lms-faq-item:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 24px rgba(15,23,42,.06);
    }

.lms-faq-question {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    cursor: pointer;
    transition: .3s;
}

    .lms-faq-question:hover {
        background: #f8fafc;
    }

    .lms-faq-question span {
        font-size: 15px;
        font-weight: 600;
        color: #0f172a;
    }

    .lms-faq-question i {
        font-size: 16px;
        color: #0f172a;
        transition: .3s;
    }

.lms-faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height .35s ease;
}

    .lms-faq-answer p {
        margin: 0;
        padding: 0 20px 20px;
        font-size: 14px;
        line-height: 1.7;
        color: #64748b;
    }

/* Active FAQ */

.lms-faq-item.active {
    border-color: #2563eb;
    box-shadow: 0 12px 30px rgba(37,99,235,.08);
}

    .lms-faq-item.active .lms-faq-question {
        background: #f8fbff;
    }

    .lms-faq-item.active .lms-faq-answer {
        max-height: 200px;
    }

    .lms-faq-item.active .lms-faq-question i {
        color: #2563eb;
        transform: rotate(45deg);
    }

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

.lms-cta {
    flex: 1;
    min-width: 350px;
    background: #020b2e;
    border-radius: 20px;
    padding: 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    overflow: hidden;
    min-height: 350px;
}

.lms-cta-content {
    flex: 1;
    max-width: 60%;
    position: relative;
    z-index: 2;
}

.lms-cta-title {
    font-size: 32px;
    font-weight: 700;
    color: #fff;
    line-height: 1.2;
    margin-bottom: 15px;
}

.lms-cta-desc {
    font-size: 15px;
    line-height: 1.6;
    color: #cbd5e1;
    margin-bottom: 25px;
}

.lms-cta-buttons {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}

.lms-cta-btn {
    padding: 12px 24px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: .3s;
}

.lms-cta-btn-primary {
    background: #2563eb;
    color: #fff;
    border: 2px solid #2563eb;
}

    .lms-cta-btn-primary:hover {
        background: #1d4ed8;
        border-color: #1d4ed8;
        color: #fff;
    }

.lms-cta-btn-outline {
    background: #fff;
    color: #0f172a;
    border: 2px solid #fff;
}

    .lms-cta-btn-outline:hover {
        background: #f1f5f9;
        color: #0f172a;
    }

/* CTA IMAGE */

.lms-cta-image-wrapper {
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    z-index: 2;
    margin-right: -20px;
    margin-bottom: -40px;
}

.lms-cta-img {
    max-width: 220px;
    width: 100%;
    height: auto;
    object-fit: contain;
}

/* Decorative Circles */

.lms-cta::before {
    content: "";
    position: absolute;
    top: -50px;
    right: -50px;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: rgba(37,99,235,.10);
}

.lms-cta::after {
    content: "";
    position: absolute;
    bottom: -30px;
    left: 30%;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    background: rgba(37,99,235,.08);
}

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

@media (max-width: 992px) {

    .lms-faq-cta-container {
        flex-direction: column;
    }

    .lms-faq,
    .lms-cta {
        min-width: 100%;
    }

    .lms-cta {
        text-align: center;
        flex-direction: column;
        padding: 30px 20px;
    }

    .lms-cta-content {
        max-width: 100%;
        margin-bottom: 20px;
    }

    .lms-cta-buttons {
        justify-content: center;
    }

    .lms-cta-image-wrapper {
        margin: 0;
        justify-content: center;
    }

    .lms-cta-img {
        max-width: 180px;
    }
}

@media (max-width: 576px) {

    .lms-faq-title {
        font-size: 24px;
    }

    .lms-cta-title {
        font-size: 26px;
    }

    .lms-cta-buttons {
        flex-direction: column;
        width: 100%;
    }

    .lms-cta-btn {
        width: 100%;
        text-align: center;
    }
}

/* ==========================================
   INVENTORY MANAGEMENT HERO SECTION
========================================== */

.ims-hero-wrapper {
    position: relative;
    overflow: hidden;
    padding: 130px 0 60px;
    background: radial-gradient(circle at top right, rgba(37, 99, 235, 0.20) 0%, transparent 35%), radial-gradient(circle at bottom left, rgba(79, 70, 229, 0.15) 0%, transparent 40%), linear-gradient( 135deg, #020617 0%, #081327 40%, #0f172a 100% );
}

    /* Blue Glow */

    .ims-hero-wrapper::before {
        content: "";
        position: absolute;
        top: -200px;
        right: -150px;
        width: 600px;
        height: 600px;
        border-radius: 50%;
        background: rgba(37, 99, 235, 0.12);
        filter: blur(120px);
        pointer-events: none;
    }

    .ims-hero-wrapper::after {
        content: "";
        position: absolute;
        bottom: -250px;
        left: -150px;
        width: 500px;
        height: 500px;
        border-radius: 50%;
        background: rgba(99, 102, 241, 0.10);
        filter: blur(120px);
        pointer-events: none;
    }

/* Left Content */

.ims-hero-badge {
    display: inline-block;
    padding: 8px 18px;
    border-radius: 50px;
    border: 1px solid rgba(59, 130, 246, 0.30);
    background: rgba(59, 130, 246, 0.08);
    color: #60a5fa;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 25px;
}

.ims-hero-title {
    font-size: 4rem;
    font-weight: 800;
    line-height: 1.1;
    color: #ffffff;
    margin-bottom: 25px;
}

    .ims-hero-title span {
        display: block;
        background: linear-gradient( 90deg, #3b82f6, #60a5fa, #818cf8 );
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }

.ims-hero-desc {
    color: #94a3b8;
    font-size: 1.1rem;
    line-height: 1.8;
    margin-bottom: 35px;
    max-width: 95%;
}

/* Buttons */

.ims-hero-btns {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
}

.ims-hero-btn-primary {
    background: #2563eb;
    border: none;
    color: #ffffff;
    padding: 14px 30px;
    border-radius: 10px;
    font-weight: 600;
    transition: all .3s ease;
}

    .ims-hero-btn-primary:hover {
        background: #1d4ed8;
        color: #ffffff;
        transform: translateY(-3px);
    }

.ims-hero-btn-outline {
    border: 1px solid rgba(255,255,255,0.15);
    background: rgba(255,255,255,0.04);
    backdrop-filter: blur(12px);
    color: #ffffff;
    padding: 14px 30px;
    border-radius: 10px;
    font-weight: 600;
    transition: all .3s ease;
}

    .ims-hero-btn-outline:hover {
        background: rgba(255,255,255,0.08);
        color: #ffffff;
        transform: translateY(-3px);
    }

/* Dashboard Section */

.ims-hero-dashboard-area {
    position: relative;
}

    /* Dashboard Glow */

    .ims-hero-dashboard-area::before {
        content: "";
        position: absolute;
        width: 80%;
        height: 80%;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background: rgba(37, 99, 235, 0.20);
        filter: blur(120px);
        z-index: 0;
    }

.ims-hero-dashboard-img {
    position: relative;
    z-index: 2;
    width: 100%;
    border-radius: 20px;
    border: 1px solid rgba(255,255,255,0.08);
    box-shadow: 0 30px 80px rgba(0,0,0,0.50), 0 0 60px rgba(37,99,235,0.12);
    background: #0f172a;
}

/* Responsive */

@media (max-width: 1199px) {

    .ims-hero-title {
        font-size: 3.2rem;
    }
}

@media (max-width: 991px) {

    .ims-hero-wrapper {
        padding: 130px 0 30px;
        text-align: center;
    }

    .ims-hero-title {
        font-size: 2.8rem;
    }

    .ims-hero-desc {
        max-width: 100%;
    }

    .ims-hero-btns {
        justify-content: center;
    }

    .ims-hero-dashboard-img {
        margin-top: 50px;
    }
}

@media (max-width: 576px) {

    .ims-hero-title {
        font-size: 2.2rem;
    }

    .ims-hero-btn-primary,
    .ims-hero-btn-outline {
        width: 100%;
    }
}

/* =====================================
   INVENTORY SOLUTION SECTION
===================================== */

.ims-solution-wrapper {
    padding: 40px 0;
    background: #f8fafc;
}

/* Header */

.ims-section-header {
    max-width: 750px;
    margin: 0 auto 50px;
    text-align: center;
}

.ims-solution-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 18px;
    border-radius: 50px;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    color: #2563eb;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.5px;
    margin-bottom: 18px;
}

.ims-solution-title {
    font-size: 2.4rem;
    line-height: 1.2;
    font-weight: 800;
    color: #0f172a;
    margin-bottom: 15px;
}

    .ims-solution-title span {
        display: block;
        background: linear-gradient( 90deg, #2563eb, #22c55e );
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }

.ims-solution-desc {
    max-width: 620px;
    margin: auto;
    color: #64748b;
    font-size: 1rem;
    line-height: 1.7;
}

/* Main Layout */

.ims-solution-main {
    display: grid;
    grid-template-columns: 1fr 120px 1fr;
    gap: 30px;
    align-items: center;
}

/* Boxes */

.ims-box {
    padding: 35px;
    border-radius: 24px;
    transition: .3s ease;
    box-shadow: 0 10px 40px rgba(15,23,42,.04);
}

    .ims-box:hover {
        transform: translateY(-5px);
    }

.ims-box-red {
    background: #fff5f5;
    border: 1px solid #fecaca;
}

.ims-box-green {
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
}

.ims-box-title {
    font-size: 1.7rem;
    font-weight: 700;
    margin-bottom: 25px;
}

.ims-title-red {
    color: #dc2626;
}

.ims-title-green {
    color: #16a34a;
}

/* List */

.ims-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

    .ims-list li {
        display: flex;
        align-items: center;
        gap: 14px;
        padding: 12px 0;
        color: #475569;
        font-size: 16px;
        font-weight: 500;
    }

/* Icons */

.ims-icon-red,
.ims-icon-green {
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    flex-shrink: 0;
    color: #fff;
    font-size: 10px;
}

.ims-icon-red {
    background: #ef4444;
}

.ims-icon-green {
    background: #16a34a;
}

/* Arrow */

.ims-center-arrow {
    display: flex;
    justify-content: center;
}

.ims-arrow-circle {
    width: 90px;
    height: 90px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #dcfce7;
    color: #16a34a;
    font-size: 32px;
    box-shadow: 0 15px 40px rgba(34,197,94,.25);
}

/* Responsive */

@media(max-width:991px) {

    .ims-solution-wrapper {
        padding: 60px 0;
    }

    .ims-solution-main {
        grid-template-columns: 1fr;
        gap: 25px;
    }

    .ims-arrow-circle {
        width: 70px;
        height: 70px;
        font-size: 24px;
        transform: rotate(90deg);
    }

    .ims-solution-title {
        font-size: 1.9rem;
    }

    .ims-box {
        padding: 25px;
    }

    .ims-box-title {
        font-size: 1.4rem;
    }
}

/* --- LMS Features Specific Styles --- */
.lms-features-wrapper {
    padding: 40px 0;
    background-color: #ffffff;
}

/* Header Section */
.lms-features-label {
    display: block;
    text-align: center;
    text-transform: uppercase;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 1px;
    color: #3b82f6; /* Blue color for label */
    margin-bottom: 10px;
}

.lms-features-title {
    text-align: center;
    font-size: 28px;
    font-weight: 700;
    color: #111827;
    margin-bottom: 40px;
}

/* Grid Layout */
.lms-features-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 20px;
}

/* Responsive Grid Adjustments */
@media (max-width: 1200px) {
    .lms-features-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .lms-features-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .lms-features-grid {
        grid-template-columns: 1fr;
    }
}

/* Individual Card Styles */
.lms-features-card {
    background: #ffffff;
    border: 1px solid #f3f4f6;
    border-radius: 16px;
    padding: 25px 20px;
    text-align: center;
    transition: all 0.3s ease;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.02), 0 2px 4px -1px rgba(0, 0, 0, 0.02);
}

    .lms-features-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 25px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -2px rgba(0, 0, 0, 0.02);
        border-color: #e5e7eb;
    }

/* Icon Styling (Squircle Background) */
.lms-features-icon-wrapper {
    width: 56px;
    height: 56px;
    border-radius: 14px; /* Gives the soft squircle shape */
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 15px auto;
    font-size: 1.4rem;
}

/* Card Typography */
.lms-features-card-title {
    font-size: 1rem;
    font-weight: 700;
    color: #111827;
    margin-bottom: 8px;
}

.lms-features-card-text {
    font-size: 0.85rem;
    color: #6b7280;
    line-height: 1.5;
    margin: 0;
}

/* --- Specific Colors for Each Card --- */

/* 1. Inventory Tracking (Blue) */
.lms-features-icon-blue {
    background-color: #eff6ff;
    color: #3b82f6;
}

/* 2. Multi-Warehouse (Purple) */
.lms-features-icon-purple {
    background-color: #f5f3ff;
    color: #8b5cf6;
}

/* 3. Barcode & QR (Green) */
.lms-features-icon-green {
    background-color: #f0fdf4;
    color: #22c55e;
}

/* 4. Purchase Management (Yellow/Orange) */
.lms-features-icon-yellow {
    background-color: #fefce8;
    color: #eab308;
}

/* 5. Sales Tracking (Red/Pink) */
.lms-features-icon-red {
    background-color: #fef2f2;
    color: #ef4444;
}

/* 6. Reports & Analytics (Light Blue) */
.lms-features-icon-sky {
    background-color: #f0f9ff;
    color: #0ea5e9;
}

/*=====================================================
    Inventory Process Section
======================================================*/

.ims-process-wrapper {
    padding: 90px 0;
    background: #f8fafc;
}

.ims-process-label {
    display: inline-block;
    padding: 8px 20px;
    border-radius: 30px;
    background: #e8f0fe;
    color: #2563eb;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 15px;
}

.ims-process-title {
    font-size: 42px;
    font-weight: 700;
    color: #111827;
    margin-bottom: 15px;
}

.ims-process-subtitle {
    max-width: 700px;
    margin: auto;
    color: #6b7280;
    font-size: 16px;
    line-height: 1.8;
}

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

.ims-process-card {
    position: relative;
    height: 100%;
    background: #fff;
    border-radius: 18px;
    padding: 70px 22px 25px;
    border: 1px solid #edf2f7;
    text-align: center;
    transition: .35s ease;
    overflow: hidden;
    box-shadow: 0 8px 25px rgba(0,0,0,.05);
}

    .ims-process-card:hover {
        transform: translateY(-10px);
        box-shadow: 0 20px 45px rgba(37,99,235,.15);
        border-color: #2563eb;
    }

    /*==========================
      Top Border Effect
===========================*/

    .ims-process-card::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 4px;
        background: linear-gradient(90deg,#2563eb,#06b6d4);
        transform: scaleX(0);
        transition: .35s;
    }

    .ims-process-card:hover::before {
        transform: scaleX(1);
    }

/*==========================
        Circle
===========================*/

.ims-process-circle {
    width: 78px;
    height: 78px;
    border-radius: 50%;
    position: absolute;
    top: -38px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border: 6px solid #f8fafc;
    box-shadow: 0 10px 25px rgba(0,0,0,.08);
    transition: .35s;
}

.ims-process-card:hover .ims-process-circle {
    transform: translateX(-50%) scale(1.08);
}

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

.ims-process-icon {
    font-size: 22px;
    margin-bottom: 4px;
}

.ims-process-number {
    font-size: 11px;
    font-weight: 700;
}

/*==========================
       Colors
===========================*/

.ims-process-circle-blue {
    background: #eff6ff;
    color: #2563eb;
}

.ims-process-circle-purple {
    background: #f5f3ff;
    color: #7c3aed;
}

.ims-process-circle-green {
    background: #ecfdf5;
    color: #16a34a;
}

.ims-process-circle-orange {
    background: #fff7ed;
    color: #ea580c;
}

.ims-process-circle-red {
    background: #fef2f2;
    color: #dc2626;
}

.ims-process-circle-sky {
    background: #f0f9ff;
    color: #0284c7;
}

/*==========================
        Typography
===========================*/

.ims-process-step-title {
    font-size: 18px;
    font-weight: 700;
    color: #111827;
    margin-bottom: 15px;
    line-height: 1.35;
    min-height: 48px;
}

.ims-process-step-desc {
    font-size: 14px;
    color: #6b7280;
    line-height: 1.8;
    margin: 0;
}

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

@media(max-width:1199px) {

    .ims-process-title {
        font-size: 36px;
    }
}

@media(max-width:991px) {

    .ims-process-wrapper {
        padding: 70px 0;
    }

    .ims-process-title {
        font-size: 32px;
    }

    .ims-process-card {
        margin-top: 35px;
    }
}

@media(max-width:767px) {

    .ims-process-title {
        font-size: 28px;
    }

    .ims-process-subtitle {
        font-size: 15px;
    }

    .ims-process-step-title {
        font-size: 17px;
        min-height: auto;
    }
}

@media(max-width:575px) {

    .ims-process-card {
        padding: 65px 18px 22px;
    }

    .ims-process-circle {
        width: 70px;
        height: 70px;
    }

    .ims-process-title {
        font-size: 26px;
    }
}

/* --- LMS Management Specific Styles --- */
/* ==========================================
   MANAGEMENT MODULES SECTION
========================================== */

.lms-management-wrapper {
    padding: 40px 0;
    background: #f8fafc;
}

.lms-management-card {
    height: 100%;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 22px;
    padding: 24px;
    position: relative;
    overflow: hidden;
    transition: .35s ease;
}

    /* Top Gradient Line */

    .lms-management-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 4px;
        background: linear-gradient( 90deg, #2563eb, #8b5cf6 );
        transform: scaleX(0);
        transform-origin: left;
        transition: .4s ease;
    }

    /* Glow */

    .lms-management-card::after {
        content: '';
        position: absolute;
        width: 180px;
        height: 180px;
        border-radius: 50%;
        background: rgba(37,99,235,.04);
        top: -90px;
        right: -90px;
        transition: .4s;
    }

    .lms-management-card:hover {
        transform: translateY(-10px);
        border-color: #d7e2f0;
        box-shadow: 0 20px 45px rgba(15,23,42,.08);
    }

        .lms-management-card:hover::before {
            transform: scaleX(1);
        }

        .lms-management-card:hover::after {
            transform: scale(1.3);
        }

/* Header */

.lms-management-header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 24px;
}

/* Icon */

.lms-management-icon-wrapper {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    flex-shrink: 0;
    transition: .35s;
}

.lms-management-card:hover .lms-management-icon-wrapper {
    transform: rotate(-8deg) scale(1.08);
}

/* Title */

.lms-management-title {
    font-size: 18px;
    font-weight: 700;
    color: #0f172a;
    margin: 0;
    line-height: 1.4;
}

/* List */

.lms-management-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.lms-management-item {
    display: flex;
    gap: 10px;
    margin-bottom: 14px;
    color: #64748b;
    font-size: 14px;
    line-height: 1.7;
}

    .lms-management-item:last-child {
        margin-bottom: 0;
    }

.lms-management-check {
    margin-top: 5px;
    font-size: 11px;
    flex-shrink: 0;
}

/* Card Colors */

.lms-management-card-1 .lms-management-icon-wrapper {
    background: #edf4ff;
    color: #2563eb;
}

.lms-management-card-2 .lms-management-icon-wrapper {
    background: #f3efff;
    color: #8b5cf6;
}

.lms-management-card-3 .lms-management-icon-wrapper {
    background: #ecfdf3;
    color: #22c55e;
}

.lms-management-card-4 .lms-management-icon-wrapper {
    background: #fff8e6;
    color: #eab308;
}

.lms-management-card-5 .lms-management-icon-wrapper {
    background: #feeef1;
    color: #ef476f;
}

.lms-management-card-6 .lms-management-icon-wrapper {
    background: #e8fbf9;
    color: #14b8a6;
}

.lms-management-card-1 .lms-management-check {
    color: #2563eb;
}

.lms-management-card-2 .lms-management-check {
    color: #8b5cf6;
}

.lms-management-card-3 .lms-management-check {
    color: #22c55e;
}

.lms-management-card-4 .lms-management-check {
    color: #eab308;
}

.lms-management-card-5 .lms-management-check {
    color: #ef476f;
}

.lms-management-card-6 .lms-management-check {
    color: #14b8a6;
}

/* Responsive */

@media(max-width:991px) {

    .lms-management-wrapper {
        padding: 60px 0;
    }
}

@media(max-width:767px) {

    .lms-management-card {
        padding: 20px;
    }

    .lms-management-title {
        font-size: 16px;
    }

    .lms-management-item {
        font-size: 13px;
    }

    .lms-management-icon-wrapper {
        width: 50px;
        height: 50px;
        font-size: 18px;
    }
}
/* ==========================
   INDUSTRY SECTION
========================== */

.ims-industry-wrapper {
    padding: 40px 0;
    background: #f8fafc;
}

/* Main Layout */

.ims-industry-layout {
    display: flex;
    align-items: center;
    gap: 50px;
}

/* Left Side */

.ims-industry-content {
    flex: 0 0 35%;
}

.ims-industry-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 18px;
    background: #eff6ff;
    color: #2563eb;
    border-radius: 50px;
    font-size: 12px;
    font-weight: 700;
    margin-bottom: 18px;
}

.ims-industry-title {
    font-size: 2.5rem;
    font-weight: 800;
    line-height: 1.2;
    color: #0f172a;
    margin-bottom: 18px;
}

.ims-industry-subtitle {
    font-size: 16px;
    line-height: 1.8;
    color: #64748b;
    margin-bottom: 28px;
}

/* Right Side Grid */

.ims-industry-grid {
    flex: 0 0 65%;
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 18px;
}

/* Cards */

.ims-industry-card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 18px;
    padding: 24px 15px;
    text-align: center;
    transition: .35s;
    cursor: pointer;
}

    .ims-industry-card:hover {
        transform: translateY(-6px);
        box-shadow: 0 15px 35px rgba(15,23,42,.08);
    }

.ims-icon {
    width: 58px;
    height: 58px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 12px;
    font-size: 22px;
}

.ims-industry-card h3 {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    color: #0f172a;
}

/* Colors */

.retail .ims-icon {
    background: #eff6ff;
    color: #2563eb;
}

.pharmacy .ims-icon {
    background: #ecfdf5;
    color: #10b981;
}

.manufacturing .ims-icon {
    background: #f5f3ff;
    color: #8b5cf6;
}

.automobile .ims-icon {
    background: #eef2ff;
    color: #6366f1;
}

.electronics .ims-icon {
    background: #ecfeff;
    color: #06b6d4;
}

.fmcg .ims-icon {
    background: #fef9c3;
    color: #eab308;
}

.ecommerce .ims-icon {
    background: #fff1f2;
    color: #f43f5e;
}

.healthcare .ims-icon {
    background: #f0fdfa;
    color: #14b8a6;
}

/* Tablet */

@media(max-width:991px) {

    .ims-industry-layout {
        flex-direction: column;
    }

    .ims-industry-content,
    .ims-industry-grid {
        flex: 100%;
        width: 100%;
    }

    .ims-industry-content {
        text-align: center;
        margin-bottom: 20px;
    }

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

/* Mobile */

@media(max-width:576px) {

    .ims-industry-title {
        font-size: 2rem;
    }

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

    .ims-industry-card {
        padding: 18px 10px;
    }

    .ims-icon {
        width: 50px;
        height: 50px;
        font-size: 18px;
    }
}

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

.ims-combined-wrapper {
    padding: 40px 0;
    background: #f8fafc;
}

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

.ims-benefits-card {
    height: 100%;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 24px;
    padding: 35px;
    box-shadow: 0 10px 30px rgba(15,23,42,.04);
}

.ims-benefits-label,
.ims-faq-label {
    display: inline-block;
    padding: 8px 16px;
    border-radius: 50px;
    background: #eff6ff;
    color: #2563eb;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 18px;
}

.ims-benefits-title,
.ims-faq-title {
    font-size: 2rem;
    font-weight: 800;
    color: #0f172a;
    margin-bottom: 15px;
}

.ims-benefits-subtitle {
    color: #64748b;
    line-height: 1.8;
    margin-bottom: 28px;
}

.ims-benefits-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.ims-benefits-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 0;
    border-bottom: 1px solid #f1f5f9;
    color: var(--bs-gray-dark);
}

.ims-benefits-check {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #22c55e;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
}

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

.ims-faq-wrapper {
    height: 100%;
}

.ims-faq-container {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ims-faq-item {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 18px;
    overflow: hidden;
    transition: .3s ease;
}

    .ims-faq-item:hover {
        transform: translateY(-3px);
        border-color: #cbd5e1;
        box-shadow: 0 10px 25px rgba(15,23,42,.05);
    }

.ims-faq-header {
    width: 100%;
    background: none;
    border: none;
    padding: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    font-size: 15px;
    font-weight: 600;
    color: #0f172a;
}

.ims-faq-icon {
    transition: .3s;
    color: #2563eb;
}

.ims-faq-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height .35s ease;
    padding: 0 20px;
    color: #64748b;
    line-height: 1.7;
}

.ims-faq-item.active .ims-faq-body {
    max-height: 200px;
    padding: 0 20px 20px;
}

.ims-faq-item.active .ims-faq-icon {
    transform: rotate(45deg);
}

/* Responsive */

@media(max-width:991px) {

    .ims-benefits-card {
        margin-bottom: 25px;
    }

    .ims-benefits-title,
    .ims-faq-title {
        font-size: 1.8rem;
    }
}

@media(max-width:576px) {

    .ims-combined-wrapper {
        padding: 60px 0;
    }

    .ims-benefits-card {
        padding: 25px;
    }

    .ims-benefits-title,
    .ims-faq-title {
        font-size: 1.6rem;
    }
}

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

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

.ims-cta-wrapper {
    padding: 40px 0;
    background: #f8fafc;
}

/* ==========================
   CTA CARD
========================== */

.ims-cta-card {
    position: relative;
    overflow: hidden;
    background: linear-gradient( 135deg, #1e40af 0%, #2563eb 100% );
    border-radius: 24px;
    padding: 45px 55px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 50px;
    min-height: 320px;
}

    /* Glow Effects */

    .ims-cta-card::before {
        content: "";
        position: absolute;
        width: 320px;
        height: 320px;
        border-radius: 50%;
        background: rgba(255,255,255,.08);
        top: -160px;
        right: -120px;
    }

    .ims-cta-card::after {
        content: "";
        position: absolute;
        width: 250px;
        height: 250px;
        border-radius: 50%;
        background: rgba(255,255,255,.05);
        bottom: -120px;
        left: -100px;
    }

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

.ims-cta-content {
    flex: 1;
    max-width: 600px;
    position: relative;
    z-index: 2;
}

.ims-cta-label {
    display: inline-block;
    padding: 8px 16px;
    border-radius: 50px;
    background: rgba(255,255,255,.15);
    color: #dbeafe;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
    margin-bottom: 18px;
}

.ims-cta-title {
    color: #ffffff;
    font-size: 2.5rem;
    font-weight: 800;
    line-height: 1.15;
    margin-bottom: 18px;
}

.ims-cta-desc {
    color: #dbeafe;
    font-size: 15px;
    line-height: 1.8;
    max-width: 500px;
    margin-bottom: 28px;
}

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

.ims-cta-buttons {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.ims-cta-btn-primary,
.ims-cta-btn-secondary {
    text-decoration: none;
    transition: all .3s ease;
}

/* Primary */

.ims-cta-btn-primary {
    background: #ffffff;
    color: #1e40af;
    padding: 14px 26px;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

    .ims-cta-btn-primary:hover {
        transform: translateY(-3px);
        background: #f8fafc;
        color: #1e40af;
    }

/* Secondary */

.ims-cta-btn-secondary {
    padding: 14px 26px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,.35);
    color: #ffffff;
    font-size: 15px;
    font-weight: 600;
}

    .ims-cta-btn-secondary:hover {
        background: rgba(255,255,255,.1);
        border-color: rgba(255,255,255,.6);
        color: #ffffff;
        transform: translateY(-3px);
    }

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

.ims-cta-image-wrapper {
    flex-shrink: 0;
    width: 280px;
    position: relative;
    z-index: 2;
}

.ims-cta-image {
    width: 100%;
    height: auto;
    object-fit: contain;
    filter: drop-shadow( 0 20px 30px rgba(0,0,0,.2) );
}

/* ==========================
   TABLET
========================== */

@media (max-width: 991px) {

    .ims-cta-card {
        flex-direction: column;
        text-align: center;
        padding: 40px 30px;
        min-height: auto;
    }

    .ims-cta-content {
        max-width: 100%;
    }

    .ims-cta-desc {
        max-width: 100%;
        margin-left: auto;
        margin-right: auto;
    }

    .ims-cta-buttons {
        justify-content: center;
    }

    .ims-cta-image-wrapper {
        width: 220px;
    }

    .ims-cta-title {
        font-size: 2rem;
    }
}

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

@media (max-width: 576px) {

    .ims-cta-wrapper {
        padding: 60px 0;
    }

    .ims-cta-card {
        padding: 30px 22px;
        border-radius: 20px;
    }

    .ims-cta-title {
        font-size: 1.7rem;
    }

    .ims-cta-desc {
        font-size: 14px;
    }

    .ims-cta-buttons {
        flex-direction: column;
        width: 100%;
    }

    .ims-cta-btn-primary,
    .ims-cta-btn-secondary {
        width: 100%;
        justify-content: center;
        text-align: center;
    }

    .ims-cta-image-wrapper {
        width: 180px;
    }
}


/*==============================
   Food Delivery Software
==============================*/
/* ===================================
   FOOD DELIVERY HERO - DARK GRADIENT
=================================== */

.FDS-hero-wrapper {
    position: relative;
    padding: 130px 0 40px;
    overflow: hidden;
    background: linear-gradient(135deg,#020617 0%,#0f172a 35%,#1e293b 100%);
}

    /* Decorative Gradient Glow */

    .FDS-hero-wrapper::before {
        content: "";
        position: absolute;
        width: 500px;
        height: 500px;
        background: rgba(249,115,22,.15);
        border-radius: 50%;
        top: -200px;
        left: -100px;
        filter: blur(120px);
    }

    .FDS-hero-wrapper::after {
        content: "";
        position: absolute;
        width: 400px;
        height: 400px;
        background: rgba(59,130,246,.12);
        border-radius: 50%;
        bottom: -150px;
        right: -100px;
        filter: blur(120px);
    }

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

.FDS-hero-content {
    position: relative;
    z-index: 2;
    padding-right: 40px;
}

.FDS-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 18px;
    border-radius: 50px;
    background: rgba(249,115,22,.15);
    border: 1px solid rgba(249,115,22,.25);
    color: #fb923c;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 25px;
}

.FDS-hero-title {
    font-size: 4rem;
    line-height: 1.1;
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 25px;
}

    .FDS-hero-title span {
        display: block;
        color: #f97316;
    }

.FDS-hero-desc {
    color: #cbd5e1;
    font-size: 1.1rem;
    line-height: 1.8;
    margin-bottom: 35px;
    max-width: 95%;
}

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

.FDS-hero-features {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 18px 25px;
    margin-bottom: 40px;
}

.FDS-hero-feature-item {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #ffffff;
    font-size: 15px;
    font-weight: 500;
}

    .FDS-hero-feature-item i {
        color: #f97316;
        font-size: 16px;
    }

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

.FDS-hero-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
}

.FDS-hero-btn-primary {
    background: #f97316;
    color: #fff;
    padding: 15px 32px;
    border-radius: 10px;
    text-decoration: none;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    transition: all .3s ease;
    box-shadow: 0 10px 30px rgba(249,115,22,.25);
}

    .FDS-hero-btn-primary:hover {
        background: #ea580c;
        color: #fff;
        transform: translateY(-3px);
        box-shadow: 0 15px 35px rgba(249,115,22,.35);
    }

.FDS-hero-btn-outline {
    background: rgba(255,255,255,.05);
    backdrop-filter: blur(10px);
    color: #fff;
    border: 1px solid rgba(255,255,255,.15);
    padding: 15px 32px;
    border-radius: 10px;
    text-decoration: none;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    transition: .3s;
}

    .FDS-hero-btn-outline:hover {
        background: rgba(255,255,255,.12);
        color: #fff;
    }

/* ==========================
   SINGLE HERO IMAGE
========================== */

.FDS-hero-image-wrapper {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 500px;
    z-index: 2;
}

    .FDS-hero-image-wrapper::before {
        content: "";
        position: absolute;
        width: 450px;
        height: 450px;
        background: rgba(249,115,22,.18);
        border-radius: 50%;
        filter: blur(100px);
        z-index: -1;
    }

.FDS-hero-main-image {
    width: 100%;
    max-width: 650px;
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 25px 60px rgba(0,0,0,.35));
    transition: all .4s ease;
}

    .FDS-hero-main-image:hover {
        transform: translateY(-8px);
    }

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

@media (max-width: 1200px) {

    .FDS-hero-title {
        font-size: 3.5rem;
    }

    .FDS-hero-main-image {
        max-width: 580px;
    }
}

@media (max-width: 992px) {

    .FDS-hero-content {
        padding-right: 0;
/*        text-align: center;*/
    }

    .FDS-hero-desc {
        max-width: 100%;
    }

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

    .FDS-hero-features {
        justify-items: center;
    }

    .FDS-hero-image-wrapper {
        margin-top: 50px;
        min-height: auto;
    }

    .FDS-hero-main-image {
        max-width: 500px;
    }
}

@media (max-width: 768px) {

    .FDS-hero-title {
        font-size: 2.8rem;
    }

    .FDS-hero-features {
/*        grid-template-columns: 1fr;*/
        text-align: left;
    }

    .FDS-hero-main-image {
        max-width: 420px;
    }
}

@media (max-width: 576px) {

    .FDS-hero-wrapper {
        padding: 70px 0;
    }

    .FDS-hero-title {
        font-size: 2.2rem;
    }

    .FDS-hero-desc {
        font-size: 1rem;
    }

    .FDS-hero-buttons {
        flex-direction: column;
        align-items: center;
    }

    .FDS-hero-btn-primary,
    .FDS-hero-btn-outline {
        width: 100%;
        max-width: 300px;
        justify-content: center;
    }

    .FDS-hero-main-image {
        max-width: 100%;
    }

    .FDS-hero-image-wrapper::before {
        width: 280px;
        height: 280px;
    }
}

/* --- FDS Solutions Specific Styles --- */
.FDS-solutions-wrapper {
    padding: 60px 0 40px 0;
    background-color: #ffffff;
}

.FDS-solutions-title {
    text-align: center;
    font-size: 2.5rem;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 50px;
}

    .FDS-solutions-title span {
        color: #ea580c; /* Orange highlight */
    }

/* Grid Container */
.FDS-solutions-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
}

/* Responsive Grid */
@media (max-width: 992px) {
    .FDS-solutions-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 576px) {
    .FDS-solutions-grid {
        grid-template-columns: 1fr;
    }
}

/* --- Individual Card Styles --- */
.FDS-solutions-card {
    border-radius: 24px;
    padding: 30px 20px 25px 20px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: 1px solid transparent;
}

    .FDS-solutions-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 25px rgba(0,0,0,0.05);
    }

/* Card Titles */
.FDS-solutions-card-title {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 20px;
}

/* Card Image Wrapper (Simulating the cutout look) */
.FDS-solutions-img-wrapper {
    width: 100%;
    max-width: 180px;
    height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 25px;
    position: relative;
}

    .FDS-solutions-img-wrapper img {
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
        border-radius: 12px;
        box-shadow: 0 10px 20px rgba(0,0,0,0.05);
    }

/* --- Feature List --- */
.FDS-solutions-list {
    list-style: none;
    padding: 0;
    margin: 0;
    width: 100%;
    text-align: left;
}

.FDS-solutions-item {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
    font-size: 0.9rem;
    font-weight: 500;
    color: #1e293b;
}

    .FDS-solutions-item:last-child {
        margin-bottom: 0;
    }

.FDS-solutions-check {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    flex-shrink: 0;
    color: #ffffff;
}

/* --- Specific Color Themes --- */

/* 1. Customer App (Orange) */
.FDS-solutions-card-customer {
    background-color: #fff7ed;
}

    .FDS-solutions-card-customer .FDS-solutions-card-title {
        color: #ea580c;
    }

    .FDS-solutions-card-customer .FDS-solutions-check {
        background-color: #ea580c;
    }

/* 2. Restaurant Panel (Green) */
.FDS-solutions-card-restaurant {
    background-color: #f0fdf4;
}

    .FDS-solutions-card-restaurant .FDS-solutions-card-title {
        color: #16a34a;
    }

    .FDS-solutions-card-restaurant .FDS-solutions-check {
        background-color: #22c55e;
    }

/* 3. Delivery App (Blue) */
.FDS-solutions-card-delivery {
    background-color: #eff6ff;
}

    .FDS-solutions-card-delivery .FDS-solutions-card-title {
        color: #2563eb;
    }

    .FDS-solutions-card-delivery .FDS-solutions-check {
        background-color: #3b82f6;
    }

/* 4. Admin Dashboard (Purple) */
.FDS-solutions-card-admin {
    background-color: #faf5ff;
}

    .FDS-solutions-card-admin .FDS-solutions-card-title {
        color: #9333ea;
    }

    .FDS-solutions-card-admin .FDS-solutions-check {
        background-color: #a855f7;
    }


/* --- FDS Features Specific Styles --- */
.FDS-features-wrapper {
    padding: 60px 0;
    background-color: #ffffff;
}

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

/* Header Style */
.FDS-features-title-wrapper {
    text-align: center;
    margin-bottom: 40px;
}

.FDS-features-title {
    font-size: 2rem;
    font-weight: 700;
    color: #1e1e2f;
    display: inline-flex;
    align-items: center;
    gap: 15px;
}

/* The orange dots around the title */
.FDS-features-title-dots {
    color: #ea580c; /* Orange */
    font-size: 0.5rem;
    letter-spacing: 4px;
}

/* Grid Layout */
.FDS-features-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 20px;
}

/* Responsive Grid Adjustments */
@media (max-width: 992px) {
    .FDS-features-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 576px) {
    .FDS-features-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Individual Card Styles */
.FDS-features-card {
    background: #ffffff;
    border: 1px solid #f3f4f6;
    border-radius: 16px;
    padding: 30px 15px;
    text-align: center;
    transition: all 0.3s ease;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.02);
}

    .FDS-features-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
        border-color: #fee2e2;
    }

/* Icon Wrapper (The light orange/peach box) */
.FDS-features-icon-wrapper {
    width: 52px;
    height: 52px;
    border-radius: 12px;
    background-color: #fff7ed; /* Very light orange */
    color: #ea580c; /* Solid orange */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    margin: 0 auto 15px auto;
}

/* Card Text */
.FDS-features-card-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: #111827;
    margin-bottom: 8px;
}

.FDS-features-card-desc {
    font-size: 0.8rem;
    color: #6b7280;
    line-height: 1.5;
    margin: 0;
    max-width: 140px;
    margin: 0 auto;
}



/* ===================================
   MODERN HOW IT WORKS SECTION
=================================== */

.hiw-wrapper {
    padding: 30px 0;
    background: linear-gradient(180deg, #ffffff 0%, #fffaf5 100%);
    overflow: hidden;
}

    .hiw-wrapper .container {
        max-width: 1320px;
    }

/* ==========================
   HEADER
========================== */

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

.hiw-title {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-size: 2rem;
    font-weight: 800;
    color: #111827;
    margin: 0;
    line-height: 1.2;
}

.hiw-title-dots {
    display: flex;
    gap: 4px;
    color: #f97316;
    font-size: 8px;
}

/* ==========================
   STEPS ROW
========================== */

.hiw-steps-row {
    position: relative;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 18px;
}

    /* Connecting Line */

    .hiw-steps-row::before {
        content: "";
        position: absolute;
        top: 72px;
        left: 10%;
        width: 80%;
        height: 3px;
        background: linear-gradient( 90deg, #fb923c, #f97316 );
        border-radius: 50px;
        z-index: 0;
    }

/* ==========================
   STEP CARD
========================== */

.hiw-step-card {
    position: relative;
    z-index: 2;
    background: #ffffff;
    border-radius: 18px;
    padding: 24px 16px;
    text-align: center;
    border: 1px solid #f1f5f9;
    min-height: 220px;
    transition: all 0.35s ease;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.04);
}

    .hiw-step-card:hover {
        transform: translateY(-8px);
        border-color: #fb923c;
        box-shadow: 0 15px 35px rgba(249, 115, 22, 0.12);
    }

/* ==========================
   STEP NUMBER
========================== */

.hiw-step-count {
    display: inline-block;
    margin-bottom: 14px;
    font-size: 12px;
    font-weight: 700;
    color: #f97316;
    letter-spacing: 1px;
}

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

.hiw-icon-wrapper {
    width: 65px;
    height: 65px;
    margin: 0 auto 16px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient( 135deg, #fb923c, #f97316 );
    color: #ffffff;
    font-size: 22px;
    box-shadow: 0 10px 25px rgba(249, 115, 22, 0.20);
    transition: all 0.35s ease;
}

.hiw-step-card:hover .hiw-icon-wrapper {
    transform: scale(1.08);
}

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

.hiw-step-title {
    font-size: 17px;
    font-weight: 700;
    color: #111827;
    margin-bottom: 8px;
}

.hiw-step-card p {
    font-size: 13px;
    line-height: 1.6;
    color: #64748b;
    margin: 0;
}

/* ==========================
   REMOVE OLD STYLES
========================== */

.hiw-arrow {
    display: none !important;
}

.hiw-step-number {
    display: none;
}

.hiw-step-desc {
    display: none;
}

/* ==========================
   LARGE TABLET
========================== */

@media (max-width: 1200px) {

    .hiw-steps-row {
        grid-template-columns: repeat(3, 1fr);
    }

        .hiw-steps-row::before {
            display: none;
        }
}

/* ==========================
   TABLET
========================== */

@media (max-width: 992px) {

    .hiw-wrapper {
        padding: 60px 0;
    }

    .hiw-title {
        font-size: 30px;
    }

    .hiw-steps-row {
        grid-template-columns: repeat(1, 1fr);
        gap: 16px;
    }

    .hiw-step-card {
        min-height: 210px;
    }
}

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

@media (max-width: 576px) {

    .hiw-wrapper {
        padding: 50px 0;
    }

    .hiw-title {
        font-size: 26px;
        gap: 8px;
    }

    .hiw-steps-row {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .hiw-step-card {
        min-height: auto;
        padding: 22px 16px;
    }

    .hiw-icon-wrapper {
        width: 60px;
        height: 60px;
        font-size: 20px;
    }

    .hiw-step-title {
        font-size: 16px;
    }

    .hiw-step-card p {
        font-size: 13px;
    }
}

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

.fd-process-section {
    padding: 100px 0;
    background: linear-gradient(180deg,#fffaf5 0%,#ffffff 100%);
    overflow: hidden;
}

.fd-process-heading {
    max-width: 760px;
    margin: 0 auto 70px;
}

.fd-process-badge {
    display: inline-block;
    padding: 10px 22px;
    border-radius: 50px;
    background: #fff1e6;
    color: #f97316;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.fd-process-heading h2 {
    font-size: 46px;
    font-weight: 700;
    margin: 20px 0;
    color: #111827;
}

.fd-process-heading p {
    font-size: 18px;
    line-height: 32px;
    color: #6b7280;
}

/*=========================================
TIMELINE
=========================================*/

.fd-process-timeline {
    position: relative;
    max-width: 1180px;
    margin: auto;
}

    .fd-process-timeline::before {
        content: "";
        position: absolute;
        left: 50%;
        top: 0;
        transform: translateX(-50%);
        width: 4px;
        height: 100%;
        background: linear-gradient(to bottom,#fb923c,#f97316,#ea580c);
        border-radius: 50px;
    }

/*=========================================
ITEM
=========================================*/

.fd-process-item {
    width: 50%;
    position: relative;
    padding: 0 35px;
    margin-bottom: -20px;
}

    .fd-process-item.left {
        left: 0;
        transform: translateY(-20px);
    }

    .fd-process-item.right {
        left: 50%;
        transform: translateY(20px);
    }

    /*=========================================
DOT
=========================================*/

    .fd-process-item::before {
        content: "";
        position: absolute;
        top: 55px;
        width: 22px;
        height: 22px;
        background: #fff;
        border: 5px solid #f97316;
        border-radius: 50%;
        z-index: 5;
        box-shadow: 0 0 15px rgba(249,115,22,.3);
    }

    .fd-process-item.left::before {
        right: -11px;
    }

    .fd-process-item.right::before {
        left: -11px;
    }

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

.fd-process-content {
    position: relative;
    background: #fff;
    border-radius: 22px;
    padding: 35px;
    border: 1px solid #ffe2cf;
    box-shadow: 0 12px 35px rgba(0,0,0,.06);
    transition: .35s;
}

    .fd-process-content:hover {
        transform: translateY(-8px);
        box-shadow: 0 30px 60px rgba(249,115,22,.15);
        border-color: #fb923c;
    }

/*=========================================
STEP
=========================================*/

.fd-step {
    position: absolute;
    top: 18px;
    right: 25px;
    font-size: 42px;
    font-weight: 800;
    color: #fff1e7;
}

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

.fd-process-icon {
    width: 70px;
    height: 70px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg,#fb923c,#f97316);
    color: #fff;
    font-size: 28px;
    margin-bottom: 20px;
    transition: .35s;
}

.fd-process-content:hover .fd-process-icon {
    transform: rotate(-8deg) scale(1.08);
}

.fd-process-content h3 {
    font-size: 26px;
    font-weight: 700;
    color: #111827;
    margin-bottom: 15px;
}

.fd-process-content p {
    color: #6b7280;
    line-height: 29px;
    margin: 0;
}

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

.fd-process-item.left .fd-process-content::after {
    content: "";
    position: absolute;
    top: 48px;
    right: -10px;
    width: 20px;
    height: 20px;
    background: #fff;
    transform: rotate(45deg);
    border-top: 1px solid #ffe2cf;
    border-right: 1px solid #ffe2cf;
}

.fd-process-item.right .fd-process-content::after {
    content: "";
    position: absolute;
    top: 48px;
    left: -10px;
    width: 20px;
    height: 20px;
    background: #fff;
    transform: rotate(45deg);
    border-left: 1px solid #ffe2cf;
    border-bottom: 1px solid #ffe2cf;
}

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

@media(max-width:991px) {

    .fd-process-timeline::before {
        left: 22px;
    }

    .fd-process-item {
        width: 100%;
        left: 0 !important;
        transform: none !important;
        padding-left: 65px;
        padding-right: 0;
        margin-bottom: 30px;
    }

        .fd-process-item::before {
            left: 11px !important;
            right: auto;
        }

        .fd-process-item.left .fd-process-content::after,
        .fd-process-item.right .fd-process-content::after {
            left: -10px;
            right: auto;
            border-top: none;
            border-right: none;
            border-left: 1px solid #ffe2cf;
            border-bottom: 1px solid #ffe2cf;
        }
}

@media(max-width:768px) {

    .fd-process-section {
        padding: 70px 0;
    }

    .fd-process-heading h2 {
        font-size: 34px;
    }

    .fd-process-heading p {
        font-size: 16px;
        line-height: 28px;
    }

    .fd-process-content {
        padding: 28px;
    }

        .fd-process-content h3 {
            font-size: 22px;
        }

    .fd-process-icon {
        width: 60px;
        height: 60px;
        font-size: 24px;
    }

    .fd-step {
        font-size: 34px;
    }
}

/* --- Global Section Wrapper --- */
.FDS-combined-wrapper {
    padding: 60px 0;
    background-color: #ffffff;
}

/* Dots styling for headers */
.FDS-title-dots {
    color: #ea580c;
    font-size: 0.4rem;
    letter-spacing: 4px;
    display: inline-flex;
    margin-left: 8px;
    vertical-align: middle;
}

/* ========================================
   FDS-WHYUS SECTION STYLES (Left Column)
======================================== */

.FDS-whyus-wrapper {
    padding-right: 30px;
}

.FDS-whyus-title {
    font-size: 2rem;
    font-weight: 700;
    color: #1e1e2f;
    margin-bottom: 30px;
    display: flex;
    align-items: center;
}

.FDS-whyus-content {
    display: flex;
    gap: 25px;
    flex-wrap: wrap;
}

/* Left: List of text items */

.FDS-whyus-list {
    flex: 1;
    min-width: 250px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.FDS-whyus-item {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    background: #ffffff;
    padding: 15px;
    border-radius: 12px;
    border: 1px solid #f1f5f9;
    box-shadow: 0 2px 8px rgba(0,0,0,0.02);
}

.FDS-whyus-icon-wrapper {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background-color: #fff7ed;
    color: #ea580c;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    flex-shrink: 0;
}

.FDS-whyus-item-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: #111827;
    margin-bottom: 2px;
}

.FDS-whyus-item-desc {
    font-size: 0.8rem;
    color: #64748b;
    line-height: 1.4;
    margin: 0;
}

/* Right Image */

.FDS-whyus-image-wrapper {
    flex: 1;
    min-width: 220px;
    max-width: 320px;
    position: relative;
}

.FDS-whyus-image {
    width: 100%;
    height: 400px;
    border-radius: 16px;
    object-fit: cover;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

/* Floating Card */

.FDS-whyus-float-card {
    position: absolute;
    bottom: 20px;
    left: 20px;
    background: #ffffff;
    padding: 12px 18px;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    display: flex;
    align-items: center;
    gap: 12px;
    max-width: 160px;
}

.FDS-whyus-float-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background-color: #ea580c;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
}

.FDS-whyus-float-text {
    font-size: 0.7rem;
    color: #64748b;
    line-height: 1.2;
    margin: 0;
}

    .FDS-whyus-float-text strong {
        display: block;
        font-size: 1.1rem;
        color: #111827;
    }

/* ========================================
   TECH STACK
======================================== */

.FDS-techstack-wrapper {
    padding-left: 10px;
}

.FDS-techstack-title {
    font-size: 2rem;
    font-weight: 700;
    color: #1e1e2f;
    margin-bottom: 30px;
    display: flex;
    align-items: center;
}

.FDS-techstack-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
}

.FDS-techstack-item {
    background: #ffffff;
    border: 1px solid #f1f5f9;
    border-radius: 12px;
    padding: 20px 10px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    transition: all .2s ease;
}

    .FDS-techstack-item:hover {
        transform: translateY(-3px);
        box-shadow: 0 8px 20px rgba(0,0,0,0.04);
        border-color: #e2e8f0;
    }

.FDS-techstack-icon-wrapper {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    margin-bottom: 8px;
}

.FDS-techstack-name {
    font-size: 0.8rem;
    font-weight: 600;
    color: #1e293b;
    margin: 0;
}

/* Tech Colors */

.FDS-tech-purple {
    background: #f3e8ff;
    color: #9333ea;
}

.FDS-tech-green {
    background: #dcfce7;
    color: #16a34a;
}

.FDS-tech-blue {
    background: #dbeafe;
    color: #2563eb;
}

.FDS-tech-lightblue {
    background: #e0f2fe;
    color: #0284c7;
}

.FDS-tech-sky {
    background: #e0f2fe;
    color: #0ea5e9;
}

.FDS-tech-orange {
    background: #fff7ed;
    color: #ea580c;
}

.FDS-tech-red {
    background: #fee2e2;
    color: #dc2626;
}

.FDS-tech-yellow {
    background: #fefce8;
    color: #ca8a04;
}

.FDS-techstack-arrow {
    position: absolute;
    right: -9px;
    top: 50%;
    transform: translateY(-50%);
    color: #fde68a;
    font-size: 0.9rem;
    z-index: 2;
}

.FDS-techstack-item:nth-child(4) .FDS-techstack-arrow,
.FDS-techstack-item:nth-child(8) .FDS-techstack-arrow {
    display: none;
}

/* Responsive */

@media (max-width: 991px) {

    .FDS-whyus-wrapper {
        padding-right: 0;
        margin-bottom: 50px;
    }

    .FDS-techstack-wrapper {
        padding-left: 0;
    }

    .FDS-whyus-image-wrapper {
        max-width: 100%;
        display: flex;
        justify-content: center;
    }
}

@media (max-width: 576px) {

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

    .FDS-whyus-title,
    .FDS-techstack-title {
        font-size: 1.6rem;
    }
}

/* ==========================================
   FDS CLIENT TESTIMONIALS SECTION
========================================== */

.FDS-clients-wrapper {
    padding: 60px 0 0px;
    background-color: #ffffff;
}

/* ==========================================
   CLIENTS HEADER
========================================== */

.FDS-clients-title-wrapper {
    text-align: center;
    margin-bottom: 40px;
}

.FDS-clients-title {
    font-size: 2.2rem;
    font-weight: 700;
    color: #0f172a;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 0;
}

.FDS-clients-title-dots {
    color: #ea580c;
    font-size: 0.4rem;
    letter-spacing: 4px;
    display: inline-flex;
    margin-left: 5px;
}

/* ==========================================
   TESTIMONIAL GRID
========================================== */

.FDS-clients-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

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

.FDS-clients-card {
    color: var(--bs-gray-700);
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 30px 25px;
    transition: all 0.3s ease;
    height: 100%;
}

    .FDS-clients-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 8px 25px rgba(0,0,0,0.04);
        border-color: #d1d5db;
    }

/* ==========================================
   QUOTE
========================================== */

.FDS-clients-quote {
    display: block;
    font-family: serif;
    font-size: 2rem;
    line-height: 1;
    color: #ea580c;
    margin-bottom: 12px;
}

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

.FDS-clients-text {
    font-size: 0.95rem;
    line-height: 1.6;
    color: #475569;
    margin-bottom: 25px;
}

/* ==========================================
   AUTHOR
========================================== */

.FDS-clients-author {
    display: flex;
    align-items: center;
    gap: 12px;
}

.FDS-clients-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
    background-color: #f1f5f9;
    flex-shrink: 0;
}

.FDS-clients-name {
    font-size: 0.95rem;
    font-weight: 700;
    color: #0f172a;
    margin: 0 0 2px;
    line-height: 1.2;
}

.FDS-clients-role {
    font-size: 0.8rem;
    color: #94a3b8;
    margin: 0;
    line-height: 1.2;
}

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

.FDS-faq-wrapper {
    padding: 60px 0 80px;
    background-color: #ffffff;
}

/* ==========================================
   FAQ HEADER
========================================== */

.FDS-faq-title-wrapper {
    text-align: center;
    margin-bottom: 40px;
}

.FDS-faq-title {
    font-size: 2.2rem;
    font-weight: 700;
    color: #0f172a;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 0;
}

.FDS-faq-title-dots {
    color: #ea580c;
    font-size: 0.4rem;
    letter-spacing: 4px;
    display: inline-flex;
    margin-left: 5px;
}

/* ==========================================
   FAQ ROW
========================================== */

.FDS-faq-row {
    align-items: stretch;
}

/* ==========================================
   FAQ COLUMNS
========================================== */

.FDS-faq-col-left,
.FDS-faq-col-right {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* ==========================================
   FAQ ITEM
========================================== */

.FDS-faq-item {
    background: #f8fafc;
    border: 1px solid #f1f5f9;
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.3s ease;
}

    .FDS-faq-item:hover {
        border-color: #e2e8f0;
    }

    .FDS-faq-item.active {
        background: #ffffff;
        border-color: #d1d5db;
        box-shadow: 0 4px 15px rgba(0,0,0,0.04);
    }

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

.FDS-faq-header {
    width: 100%;
    background: transparent;
    border: none;
    padding: 18px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-align: left;
    cursor: pointer;
    color: #1e293b;
    font-size: 15px;
    font-weight: 600;
    transition: color 0.3s ease;
}

    .FDS-faq-header:hover {
        color: #0f172a;
    }

    .FDS-faq-header:focus {
        outline: none;
    }

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

.FDS-faq-icon {
    color: #64748b;
    font-size: 15px;
    margin-left: 15px;
    flex-shrink: 0;
    transition: all 0.3s ease;
}

.FDS-faq-item.active .FDS-faq-icon {
    color: #ea580c;
    transform: rotate(45deg);
}

/* ==========================================
   FAQ BODY
========================================== */

.FDS-faq-body {
    max-height: 0;
    overflow: hidden;
    padding: 0 20px;
    color: #475569;
    font-size: 14px;
    line-height: 1.7;
    transition: all 0.35s ease;
}

.FDS-faq-item.active .FDS-faq-body {
    max-height: 250px;
    padding-bottom: 18px;
}

/* ==========================================
   DESKTOP SPACING
========================================== */

@media (min-width: 768px) {

    .FDS-faq-col-left {
        padding-right: 12px;
    }

    .FDS-faq-col-right {
        padding-left: 12px;
    }
}

/* ==========================================
   LARGE TABLETS
========================================== */

@media (max-width: 991.98px) {

    .FDS-clients-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    .FDS-clients-title,
    .FDS-faq-title {
        font-size: 2rem;
    }
}

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

@media (max-width: 767.98px) {

    .FDS-clients-wrapper,
    .FDS-faq-wrapper {
        padding: 50px 0 60px;
    }

    .FDS-clients-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .FDS-clients-card {
        padding: 24px 20px;
    }

    .FDS-clients-title,
    .FDS-faq-title {
        font-size: 1.8rem;
    }

    .FDS-clients-text {
        font-size: 0.9rem;
    }

    .FDS-faq-col-left,
    .FDS-faq-col-right {
        gap: 10px;
    }

    .FDS-faq-col-left {
        margin-bottom: 10px;
    }

    .FDS-faq-header {
        padding: 16px;
        font-size: 14px;
    }

    .FDS-faq-body {
        padding-left: 16px;
        padding-right: 16px;
        font-size: 13px;
    }
}

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

@media (max-width: 480px) {

    .FDS-clients-title,
    .FDS-faq-title {
        font-size: 1.6rem;
    }

    .FDS-clients-card {
        padding: 20px 16px;
    }

    .FDS-clients-avatar {
        width: 40px;
        height: 40px;
    }

    .FDS-clients-name {
        font-size: 0.9rem;
    }

    .FDS-clients-role {
        font-size: 0.75rem;
    }

    .FDS-faq-header {
        font-size: 13px;
    }

    .FDS-faq-body {
        font-size: 12.5px;
    }
}

/* --- FDS-CTA Specific Styles --- */
.FDS-cta-wrapper {
    padding: 60px 0;
    background: linear-gradient( 135deg, #1e1e2f 0%, #2d1b0e 50%, #ea580c 100% );
    position: relative;
    overflow: hidden; /* Ensures images don't cause scrollbars */
}

.FDS-cta-container {
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 20px;
    position: relative;
    z-index: 2; /* Keeps text above decorative images */
}

/* --- Text Content --- */
.FDS-cta-content {
    text-align: center;
    max-width: 600px;
    margin: 0 auto;
}

.FDS-cta-title {
    font-size: 2.8rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 15px;
    line-height: 1.2;
}

    .FDS-cta-title span {
        color: #ea580c; /* Orange highlight */
    }

.FDS-cta-desc {
    font-size: 1.05rem;
    color: #cbd5e1; /* Light grey text */
    margin-bottom: 30px;
    line-height: 1.6;
}

/* --- Button --- */
.FDS-cta-btn-wrapper {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.FDS-cta-btn-primary {
    background-color: #ea580c;
    color: #ffffff;
    padding: 14px 32px;
    border-radius: 8px;
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    transition: all 0.3s ease;
    border: none;
}

    .FDS-cta-btn-primary:hover {
        background-color: #c2410c;
        color: #ffffff;
        transform: translateY(-2px);
        box-shadow: 0 4px 15px rgba(234, 88, 12, 0.3);
    }

/* Squiggle Arrow Next to Button (CSS Drawn) */
.FDS-cta-squiggle {
    display: inline-block;
    color: #ea580c;
    font-size: 2.5rem;
    font-weight: 300;
    line-height: 1;
    transform: rotate(10deg);
    margin-left: 5px;
    /* Using a text character to simulate the squiggle */
    font-family: cursive;
}

/* --- Decorative Images (Left & Right) --- */
.FDS-cta-decoration {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
    pointer-events: none; /* Prevents images from blocking clicks */
}

/* Left Images (Pizza & Tomatoes) */
.FDS-cta-decoration-left {
    left: 0;
    display: flex;
    align-items: center;
    width: 300px; /* Adjust based on your actual image size */
}

.FDS-cta-img-left {
    width: 100%;
    height: auto;
    max-height: 350px;
    object-fit: contain;
    /* Remove margin to keep it flush with edge */
}

/* Right Images (Burger & Fries) */
.FDS-cta-decoration-right {
    right: 0;
    width: 350px; /* Adjust based on your actual image size */
}

.FDS-cta-img-right {
    width: 100%;
    height: auto;
    max-height: 320px;
    object-fit: contain;
}

/* --- Responsive Adjustments --- */
@media (max-width: 992px) {
    .FDS-cta-title {
        font-size: 2.2rem;
    }

    .FDS-cta-decoration-left {
        width: 180px;
    }

    .FDS-cta-decoration-right {
        width: 200px;
    }
}

@media (max-width: 768px) {
    .FDS-cta-decoration {
        display: none;
    }
    /* Hide side images on tablets/mobile for a clean look */
    .FDS-cta-title {
        font-size: 1.8rem;
    }

    .FDS-cta-desc {
        font-size: 0.95rem;
    }

    .FDS-cta-squiggle {
        display: none;
    }
    /* Hide squiggle on small screens */
}



/*===============================
   Cab Booking Software
===============================*/
/*====================================================
TRUST SECTION
====================================================*/

.trustx-section {
    position: relative;
    padding: 90px 0;
    background: linear-gradient(180deg,#ffffff,#f8fbff);
    overflow: hidden;
}

    .trustx-section::before {
        content: "";
        position: absolute;
        width: 380px;
        height: 380px;
        border-radius: 50%;
        background: #edf5ff;
        left: -180px;
        top: -180px;
    }

    .trustx-section::after {
        content: "";
        position: absolute;
        width: 420px;
        height: 420px;
        border-radius: 50%;
        background: #edf5ff;
        right: -220px;
        bottom: -220px;
    }

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

.trustx-heading {
    text-align: center;
    max-width: 850px;
    margin: 0 auto 60px;
    position: relative;
    z-index: 2;
}

.trustx-badge {
    display: inline-block;
    background: linear-gradient(90deg,#2b7cff,#0d5fff);
    color: #fff;
    padding: 10px 26px;
    border-radius: 50px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1px;
    margin-bottom: 25px;
}

.trustx-title {
    font-size: 46px;
    font-weight: 800;
    color: #112042;
    line-height: 1.2;
    margin-bottom: 20px;
}

    .trustx-title span {
        display: block;
        color: #2563eb;
    }

.trustx-desc {
    font-size: 18px;
    color: #6b7280;
    max-width: 760px;
    margin: auto;
    line-height: 1.8;
}

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

.trustx-section .row > div {
    display: flex;
}

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

.trustx-card {
    position: relative;
    width: 100%;
    height: 145px;
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 24px;
    background: #fff;
    border-radius: 22px;
    overflow: hidden;
    transition: .35s;
    box-shadow: 0 10px 25px rgba(18,38,63,.08);
}

    .trustx-card:hover {
        transform: translateY(-8px);
        box-shadow: 0 18px 45px rgba(18,38,63,.15);
    }

    .trustx-card::after {
        content: "";
        position: absolute;
        right: 0;
        top: 0;
        width: 6px;
        height: 100%;
    }

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

.trustx-icon {
    width: 68px;
    height: 68px;
    min-width: 68px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
}

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

.trustx-content {
    flex: 1;
}

    .trustx-content h3 {
        margin: 0;
        font-size: 32px;
        font-weight: 800;
        line-height: 1;
    }

    .trustx-content h5 {
        margin-top: 8px;
        margin-bottom: 0;
        font-size: 19px;
        color: #16203b;
        font-weight: 700;
    }

    .trustx-content p {
        display: none;
    }

/*====================================================
BLUE
====================================================*/

.trustx-blue::after {
    background: #2563eb;
}

.trustx-blue .trustx-icon {
    background: #edf4ff;
    color: #2563eb;
}

.trustx-blue h3 {
    color: #2563eb;
}

/*====================================================
GREEN
====================================================*/

.trustx-green::after {
    background: #16a34a;
}

.trustx-green .trustx-icon {
    background: #ecfff3;
    color: #16a34a;
}

.trustx-green h3 {
    color: #16a34a;
}

/*====================================================
ORANGE
====================================================*/

.trustx-orange::after {
    background: #ff7b00;
}

.trustx-orange .trustx-icon {
    background: #fff4e9;
    color: #ff7b00;
}

.trustx-orange h3 {
    color: #ff7b00;
}

/*====================================================
PURPLE
====================================================*/

.trustx-purple::after {
    background: #7c3aed;
}

.trustx-purple .trustx-icon {
    background: #f4eeff;
    color: #7c3aed;
}

.trustx-purple h3 {
    color: #7c3aed;
}

/*====================================================
INDIGO
====================================================*/

.trustx-indigo::after {
    background: #1d4ed8;
}

.trustx-indigo .trustx-icon {
    background: #edf4ff;
    color: #1d4ed8;
}

.trustx-indigo h3 {
    color: #1d4ed8;
}

/*====================================================
RED
====================================================*/

.trustx-red::after {
    background: #ef4444;
}

.trustx-red .trustx-icon {
    background: #fff2f2;
    color: #ef4444;
}

.trustx-red h3 {
    color: #ef4444;
}

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

@media(max-width:1200px) {

    .trustx-title {
        font-size: 40px;
    }
}

@media(max-width:991px) {

    .trustx-section {
        padding: 70px 0;
    }

    .trustx-title {
        font-size: 34px;
    }

    .trustx-desc {
        font-size: 16px;
    }
}

@media(max-width:767px) {

    .trustx-card {
        height: 130px;
        padding: 20px;
    }

    .trustx-icon {
        width: 60px;
        height: 60px;
        min-width: 60px;
        font-size: 22px;
    }

    .trustx-content h3 {
        font-size: 28px;
    }

    .trustx-content h5 {
        font-size: 17px;
    }
}

@media(max-width:576px) {

    .trustx-title {
        font-size: 28px;
    }

    .trustx-badge {
        font-size: 12px;
        padding: 8px 20px;
    }

    .trustx-card {
        height: auto;
        min-height: 115px;
    }
}
/* ========================================
   HERO SECTION
======================================== */

.TBS-hero {
    position: relative;
    overflow: hidden;
    padding: 130px 0 40px;
    background: radial-gradient(circle at top right, rgba(253,185,19,.15), transparent 35%), radial-gradient(circle at bottom left, rgba(255,152,0,.08), transparent 40%), linear-gradient( 135deg, #020617 0%, #0f172a 35%, #111827 70%, #020617 100%);
}

    .TBS-hero::before {
        content: "";
        position: absolute;
        width: 500px;
        height: 500px;
        right: -200px;
        top: -200px;
        background: rgba(253,185,19,.12);
        border-radius: 50%;
        filter: blur(120px);
    }

    .TBS-hero::after {
        content: "";
        position: absolute;
        width: 400px;
        height: 400px;
        left: -150px;
        bottom: -150px;
        background: rgba(59,130,246,.08);
        border-radius: 50%;
        filter: blur(120px);
    }

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

.TBS-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    margin-bottom: 20px;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 50px;
    backdrop-filter: blur(12px);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
}

    .TBS-badge i {
        color: #FDB913;
    }

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

.TBS-title {
    font-size: 48px;
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -1px;
    color: #fff;
    margin-bottom: 18px;
}

    .TBS-title span {
        display: block;
        background: linear-gradient( 90deg, #FDB913, #ff9800 );
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }

/* ========================================
   DESCRIPTION
======================================== */

.TBS-description {
    max-width: 550px;
    margin-bottom: 28px;
    color: rgba(255,255,255,.75);
    font-size: 17px;
    line-height: 1.7;
}

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

.TBS-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-bottom: 28px;
}

.TBS-btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 28px;
    border-radius: 14px;
    text-decoration: none;
    color: #111827;
    font-size: 15px;
    font-weight: 700;
    background: linear-gradient( 135deg, #FDB913, #ff9800 );
    box-shadow: 0 15px 35px rgba(253,185,19,.35);
    transition: all .35s ease;
}

    .TBS-btn-primary:hover {
        color: #111827;
        transform: translateY(-4px);
        box-shadow: 0 20px 40px rgba(253,185,19,.45);
    }

.TBS-btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 28px;
    border-radius: 14px;
    text-decoration: none;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.15);
    backdrop-filter: blur(12px);
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    transition: all .35s ease;
}

    .TBS-btn-secondary:hover {
        background: rgba(255,255,255,.15);
        border-color: rgba(255,255,255,.25);
        color: #fff;
        transform: translateY(-4px);
    }

/* ========================================
   FEATURE PILLS
======================================== */

.TBS-feature-pills {
    display: flex;
    gap: 12px;
}

    .TBS-feature-pills span {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 10px 16px;
        background: rgba(255,255,255,.08);
        border: 1px solid rgba(255,255,255,.10);
        border-radius: 50px;
        color: #fff;
        font-size: 13px;
        font-weight: 500;
        backdrop-filter: blur(12px);
    }

    .TBS-feature-pills i {
        color: #FDB913;
    }

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

.TBS-image-wrapper {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.TBS-showcase-image {
    width: 100%;
    max-width: 600px;
    position: relative;
    z-index: 2;
    animation: TBS-float 5s ease-in-out infinite;
    filter: drop-shadow( 0 30px 60px rgba(0,0,0,.35) );
}

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

@keyframes TBS-float {

    0% {
        transform: translateY(0);
    }

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

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

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

@media (max-width: 991px) {

    .TBS-hero {
        padding: 60px 0;
        text-align: center;
    }

    .TBS-title {
        font-size: 38px;
    }

    .TBS-description {
        margin-left: auto;
        margin-right: auto;
    }

    .TBS-buttons,
    .TBS-feature-pills {
        justify-content: center;
    }

    .TBS-image-wrapper {
        margin-top: 50px;
    }

    .TBS-showcase-image {
        max-width: 500px;
    }

    .TBS-revenue-card {
        right: 0;
    }

    .TBS-driver-card {
        left: 0;
    }
}

@media (max-width: 767px) {

    .TBS-hero {
        padding: 135px 0 40px;
    }

    .TBS-title {
        font-size: 30px;
        line-height: 1.25;
    }

    .TBS-description {
        font-size: 15px;
    }

    .TBS-buttons {
        flex-direction: column;
    }

    .TBS-btn-primary,
    .TBS-btn-secondary {
        width: 100%;
    }

    .TBS-feature-pills {
        justify-content: center;
    }

    .TBS-stat-card {
        transform: scale(.85);
    }

    .TBS-showcase-image {
        max-width: 100%;
    }

    .TBS-revenue-card {
        top: 0;
        right: 0;
    }

    .TBS-driver-card {
        bottom: 0;
        left: 0;
    }
}

/*=================
   tBS-solutions
=================*/
.TBS-section {
    background: #fff;
}

/* ===========================
   COMMON BOX
=========================== */

.TBS-echosystem,
.TBS-solutions {
    background: #fff;
    border: 1px solid #edf2f7;
    border-radius: 24px;
    padding: 35px;
    height: 100%;
    box-shadow: 0 10px 40px rgba(15,23,42,.04);
}

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

.TBS-section-heading {
    text-align: center;
    margin-bottom: 35px;
}

    .TBS-section-heading h2,
    .TBS-solutions h2 {
        font-size: 34px;
        font-weight: 800;
        color: #111827;
        margin-bottom: 10px;
    }

    .TBS-section-heading span,
    .TBS-solutions span {
        color: #f59e0b;
    }

    .TBS-section-heading p {
        max-width: 500px;
        margin: auto;
        color: #6b7280;
        line-height: 1.7;
    }

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

.TBS-eco-wrapper {
    position: relative;
    min-height: 420px;
}

.TBS-center-node {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

.TBS-ring {
    position: absolute;
    width: 230px;
    height: 230px;
    border: 2px solid #f3f4f6;
    border-radius: 50%;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}

.TBS-center-circle {
    width: 130px;
    height: 130px;
    border-radius: 50%;
    background: linear-gradient(135deg,#ffc107,#ff9800);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 2;
    box-shadow: 0 15px 35px rgba(255,193,7,.30);
}

    .TBS-center-circle img {
        width: 95px;
    }

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

.TBS-card {
    position: absolute;
    width: 220px;
    background: #fff;
    border: 1px solid #edf2f7;
    border-radius: 18px;
    padding: 15px;
    display: flex;
    gap: 12px;
    align-items: flex-start;
    box-shadow: 0 8px 20px rgba(15,23,42,.04);
    transition: .3s;
}

    .TBS-card:hover {
        transform: translateY(-6px);
        box-shadow: 0 15px 35px rgba(15,23,42,.10);
    }

    .TBS-card h6 {
        margin-bottom: 5px;
        font-size: 15px;
        font-weight: 700;
        color: #111827;
    }

    .TBS-card p {
        margin: 0;
        color: #6b7280;
        font-size: 12px;
        line-height: 1.5;
    }

/* ===========================
   ICONS
=========================== */

.TBS-icon {
    width: 48px;
    height: 48px;
    min-width: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

.blue {
    background: #eef4ff;
    color: #2563eb;
}

.green {
    background: #ecfdf5;
    color: #16a34a;
}

.purple {
    background: #f5f3ff;
    color: #7c3aed;
}

.orange {
    background: #fff7ed;
    color: #ea580c;
}

.pink {
    background: #fdf2f8;
    color: #db2777;
}

/* ===========================
   POSITION
=========================== */

.passenger {
    left: 0;
    top: 0;
}

.driver {
    left: 0;
    top: 145px;
}

.dispatch {
    left: 0;
    bottom: 0;
}

.dashboard {
    right: 0;
    top: 0;
}

.payment {
    right: 0;
    top: 145px;
}

.analytics {
    right: 0;
    bottom: 0;
}

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

.TBS-solutions {
    background: #fffdf8;
}

    .TBS-solutions h2 {
        text-align: center;
        margin-bottom: 35px;
    }

.TBS-solution-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px;
    margin-bottom: 18px;
    border-radius: 18px;
    background: #fff;
    border: 1px solid #f1f5f9;
    transition: .35s;
}

    .TBS-solution-card:hover {
        transform: translateX(8px);
        box-shadow: 0 15px 30px rgba(15,23,42,.08);
    }

.TBS-sol-icon {
    width: 55px;
    height: 55px;
    min-width: 55px;
    border-radius: 15px;
    background: #fff7e6;
    color: #f59e0b;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}

.TBS-solution-card h5 {
    font-size: 17px;
    font-weight: 700;
    color: #111827;
    margin-bottom: 4px;
}

.TBS-solution-card p {
    margin: 0;
    color: #6b7280;
    font-size: 13px;
}

.TBS-arrow {
    margin-left: auto;
    color: #94a3b8;
    font-size: 18px;
}

/* ===========================
   TABLET
=========================== */

@media(max-width:991px) {

    .TBS-eco-wrapper {
        display: flex;
        flex-direction: column;
        gap: 15px;
        min-height: auto;
    }

    .TBS-card {
        position: relative;
        width: 100%;
        left: auto;
        right: auto;
        top: auto;
        bottom: auto;
    }

    .TBS-center-node {
        position: relative;
        transform: none;
        top: auto;
        left: auto;
        margin: auto;
        order: -1;
    }

    .TBS-ring {
        display: none;
    }
}

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

@media(max-width:576px) {

    .TBS-echosystem,
    .TBS-solutions {
        padding: 25px;
    }

        .TBS-section-heading h2,
        .TBS-solutions h2 {
            font-size: 28px;
        }

    .TBS-center-circle {
        width: 110px;
        height: 110px;
    }

        .TBS-center-circle img {
            width: 80px;
        }

    .TBS-solution-card {
        flex-wrap: wrap;
    }
}

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

.TBS-features {
    padding: 70px 0;
    background: #fff;
}

    .TBS-features .container {
        max-width: 1320px;
    }

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

.TBS-features-heading {
    text-align: center;
    margin-bottom: 35px;
}

    .TBS-features-heading h2 {
        font-size: 42px;
        font-weight: 800;
        color: #111827;
        line-height: 1.15;
        margin: 0;
    }

    .TBS-features-heading span {
        color: #f5b400;
    }

/* ===============================
   ROW
================================ */

.TBS-features-row {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 14px;
}

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

.TBS-feature-card {
    background: #fff;
    border: 1px solid #eceff3;
    border-radius: 16px;
    padding: 16px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    min-height: 88px;
    transition: all .3s ease;
}

    .TBS-feature-card:hover {
        transform: translateY(-4px);
        border-color: #f5b400;
        box-shadow: 0 10px 25px rgba(0,0,0,.06);
    }

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

.TBS-feature-icon {
    width: 42px;
    height: 42px;
    min-width: 42px;
    border-radius: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 16px;
}

/* Colors */

.TBS-green {
    background: #ecfdf5;
    color: #22c55e;
}

.TBS-blue {
    background: #eff6ff;
    color: #2563eb;
}

.TBS-orange {
    background: #fff7ed;
    color: #f97316;
}

.TBS-lightblue {
    background: #f0f9ff;
    color: #0ea5e9;
}

.TBS-yellow {
    background: #fefce8;
    color: #eab308;
}

.TBS-darkblue {
    background: #eef2ff;
    color: #4f46e5;
}

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

.TBS-feature-content h6 {
    margin: 0 0 5px;
    font-size: 14px;
    font-weight: 700;
    color: #111827;
    line-height: 1.3;
}

.TBS-feature-content p {
    margin: 0;
    font-size: 12px;
    line-height: 1.45;
    color: #6b7280;
}

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

@media(max-width:1200px) {

    .TBS-features-row {
        grid-template-columns: repeat(3,1fr);
    }
}

@media(max-width:768px) {

    .TBS-features-heading h2 {
        font-size: 32px;
    }

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

@media(max-width:576px) {

    .TBS-features {
        padding: 50px 0;
    }

    .TBS-features-heading h2 {
        font-size: 28px;
    }

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

/*==================
    TBS-App
==================*/
/* ========================================
   SECTION
======================================== */

.TBS-App-Section {
    padding: 40px 0;
    background: #ffffff;
}

/* ========================================
   WRAPPER
======================================== */

.TBS-App-Wrapper {
    background: linear-gradient( 90deg, #001224 0%, #173865 50%, #001224 100% );
    border-radius: 28px;
    overflow: hidden;
    box-shadow: 0 25px 60px rgba(0,0,0,.15);
}

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

.TBS-App-Box {
    min-height: 480px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    padding: 60px 40px;
}

.TBS-App-Right {
    border-left: 1px solid rgba(255,255,255,.08);
}

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

.TBS-App-Content {
    width: 38%;
    flex-shrink: 0;
}

.TBS-App-Heading {
    font-size: 29px;
    font-weight: 700;
    line-height: 1.2;
    color: #ffc107;
    margin-bottom: 18px;
}

.TBS-App-Text {
    color: rgba(255,255,255,.85);
    font-size: 15px;
    line-height: 1.9;
    margin-bottom: 30px;
}

/* ========================================
   FEATURE LIST
======================================== */

.TBS-App-List {
    list-style: none;
    margin: 0;
    padding: 0;
}

    .TBS-App-List li {
        position: relative;
        padding-left: 30px;
        margin-bottom: 16px;
        color: #ffffff;
        font-size: 16px;
        font-weight: 500;
    }

        .TBS-App-List li:last-child {
            margin-bottom: 0;
        }

        .TBS-App-List li::before {
            content: "\f058";
            font-family: "Font Awesome 6 Free";
            font-weight: 900;
            position: absolute;
            left: 0;
            top: 1px;
            color: #ffc107;
            font-size: 17px;
        }

/* ========================================
   PHONE AREA
======================================== */

.TBS-App-Phones {
    width: 62%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.TBS-App-Phone {
    width: 280px;
    max-width: 100%;
    border-radius: 32px;
    box-shadow: 0 25px 60px rgba(0,0,0,.45);
    transition: all .4s ease;
}

    .TBS-App-Phone:hover {
        transform: translateY(-8px);
    }

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

@media (max-width: 1199px) {

    .TBS-App-Phone {
        width: 230px;
    }

    .TBS-App-Heading {
        font-size: 30px;
    }
}

@media (max-width: 991px) {

    .TBS-App-Box {
        flex-direction: column;
        text-align: center;
        min-height: auto;
        padding: 50px 30px;
    }

    .TBS-App-Content,
    .TBS-App-Phones {
        width: 100%;
    }

    .TBS-App-Phones {
        margin-top: 30px;
    }

    .TBS-App-Right {
        border-left: none;
        border-top: 1px solid rgba(255,255,255,.08);
    }

    .TBS-App-List {
        display: inline-block;
        text-align: left;
    }
}

@media (max-width: 767px) {

    .TBS-App-Section {
        padding: 70px 0;
    }

    .TBS-App-Heading {
        font-size: 26px;
    }

    .TBS-App-Phone {
        width: 190px;
    }
}

@media (max-width: 575px) {

    .TBS-App-Box {
        padding: 40px 20px;
    }

    .TBS-App-Heading {
        font-size: 24px;
    }

    .TBS-App-Text {
        font-size: 14px;
    }

    .TBS-App-Phone {
        width: 160px;
        border-radius: 24px;
    }
}
            font-weight: 900;
            position: absolute;
            left: 0;
            top: 1px;
            color: #f8b400;
            font-size: 16px;
        }

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

.TBS-App-Stores {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

    .TBS-App-Stores img {
        height: 42px;
        width: auto;
        transition: .3s;
    }

        .TBS-App-Stores img:hover {
            transform: translateY(-3px);
        }

/* ========================================
   PHONES
======================================== */

.TBS-App-Phones {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: 18px;
}

.TBS-App-Phone {
    width: 220px;
    max-width: 100%;
    border-radius: 32px;
    box-shadow: 0 25px 50px rgba(0,0,0,.45);
    transition: .4s;
}

.TBS-App-Phone-One {
    transform: rotate(-5deg);
    z-index: 2;
}

.TBS-App-Phone-Two {
    transform: rotate(5deg);
    margin-top: -15px;
    z-index: 1;
}

.TBS-App-Phone:hover {
    transform: translateY(-8px);
}

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

.TBS-App-Phone-One {
    animation: floatOne 5s ease-in-out infinite;
}

.TBS-App-Phone-Two {
    animation: floatTwo 5s ease-in-out infinite;
}

@keyframes floatOne {
    0%,100% {
        transform: rotate(-5deg) translateY(0);
    }

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

@keyframes floatTwo {
    0%,100% {
        transform: rotate(5deg) translateY(0);
    }

    50% {
        transform: rotate(5deg) translateY(-14px);
    }
}

/* ========================================
   TABLET
======================================== */

@media (max-width: 1199px) {

    .TBS-App-Phone {
        width: 190px;
    }

    .TBS-App-Heading {
        font-size: 26px;
    }
}

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

@media (max-width: 991px) {

    .TBS-App-Right {
        border-left: none;
        border-top: 1px solid rgba(255,255,255,.08);
    }

    .TBS-App-Box {
        min-height: auto;
        padding: 50px 25px;
    }

    .TBS-App-Content {
        text-align: center;
        margin-bottom: 35px;
    }

    .TBS-App-List {
        display: inline-block;
        text-align: left;
    }

    .TBS-App-Stores {
        justify-content: center;
    }

    .TBS-App-Phone {
        width: 180px;
    }
}

@media (max-width: 767px) {

    .TBS-App-Phone {
        width: 145px;
    }

    .TBS-App-Heading {
        font-size: 24px;
    }

    .TBS-App-Text {
        font-size: 14px;
    }
}

@media (max-width: 575px) {

    .TBS-App-Box {
        padding: 40px 20px;
    }

    .TBS-App-Phones {
        gap: 10px;
    }

    .TBS-App-Phone {
        width: 120px;
        border-radius: 22px;
    }
}

/*=======================
   TBS- Modules
=======================*/
/* ========================================
   MODULES SECTION
======================================== */

.TBS-modules {
    padding: 40px 0;
    background: #ffffff;
}

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

.modules-heading {
    text-align: center;
    margin-bottom: 50px;
}

    .modules-heading h2 {
        font-size: 2.5rem;
        font-weight: 700;
        color: #111827;
        margin: 0;
    }

        .modules-heading h2 span {
            color: #fdb913;
        }

    .modules-heading p {
        font-size: 20px;
        font-weight: 400;
        color: #64748b;
        margin: 0;
    }
/* ========================================
   GRID
======================================== */

.modules-grid {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 16px;
}

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

.module-card {
    background: #ffffff;
    border: 1px solid #edf0f5;
    border-radius: 18px;
    padding: 24px 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    transition: all .3s ease;
}

    .module-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 12px 30px rgba(0,0,0,.06);
        border-color: #e5e7eb;
    }

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

.module-icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
    font-size: 22px;
}

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

.module-card p {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    color: #111827;
}

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

.icon-green {
    background: #ecfdf5;
    color: #10b981;
}

.icon-blue {
    background: #eff6ff;
    color: #3b82f6;
}

.icon-orange {
    background: #fffbeb;
    color: #f59e0b;
}

.icon-purple {
    background: #f5f3ff;
    color: #8b5cf6;
}

.icon-light-blue {
    background: #eff6ff;
    color: #0ea5e9;
}

.icon-red {
    background: #fef2f2;
    color: #ef4444;
}

.icon-dark-blue {
    background: #dbeafe;
    color: #2563eb;
}

.icon-violet {
    background: #f3e8ff;
    color: #a855f7;
}

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

@media (max-width: 1199px) {

    .modules-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 767px) {

    .TBS-modules {
        padding: 60px 0;
    }

    .modules-heading {
        margin-bottom: 35px;
    }

        .modules-heading h2 {
            font-size: 2rem;
        }

    .modules-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 14px;
    }

    .module-card {
        padding: 20px 12px;
    }

    .module-icon {
        width: 52px;
        height: 52px;
        font-size: 20px;
    }

    .module-card p {
        font-size: 13px;
    }
}

@media (max-width: 480px) {

    .modules-heading h2 {
        font-size: 1.7rem;
    }

    .modules-grid {
        gap: 12px;
    }

    .module-card {
        border-radius: 14px;
    }
}
/*=====================
   TBS-Process
=====================*/
/* ====================================
   SECTION
==================================== */

.TBS-process-section {
    padding: 40px 0;
    background: #f8fafc;
    overflow: hidden;
}

/* ====================================
   HEADER
==================================== */

.TBS-process-header {
    text-align: center;
    max-width: 720px;
    margin: 0 auto 55px;
}

.TBS-process-badge {
    display: inline-block;
    padding: 8px 18px;
    border-radius: 50px;
    background: rgba(99,102,241,.1);
    color: #6366f1;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 18px;
}

.TBS-process-title {
    font-size: 42px;
    font-weight: 800;
    color: #111827;
    margin-bottom: 12px;
}

.TBS-process-subtitle {
    font-size: 16px;
    color: #6b7280;
    line-height: 1.8;
    margin: 0;
}

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

.TBS-process-card {
    position: relative;
    background: #fff;
    border-radius: 20px;
    padding: 28px 15px 20px;
    text-align: center;
    height: 100%;
    min-height: 220px;
    border: 1px solid #edf2f7;
    transition: all .35s ease;
    overflow: visible;
}

    /* connector line */

    .TBS-process-card::after {
        content: "";
        position: absolute;
        top: 48px;
        right: -35px;
        width: 70px;
        height: 2px;
        background: linear-gradient( 90deg, #6366f1, #8b5cf6 );
    }

.col-lg-2:last-child .TBS-process-card::after {
    display: none;
}

.TBS-process-card:hover {
    transform: translateY(-8px);
    border-color: #6366f1;
    box-shadow: 0 20px 40px rgba(99,102,241,.12);
}

/* ====================================
   STEP NUMBER
==================================== */

.TBS-step-number {
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: #111827;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    box-shadow: 0 10px 25px rgba(0,0,0,.15);
}

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

.TBS-step-icon {
    width: 58px;
    height: 58px;
    margin: 12px auto 16px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    position: relative;
}

    .TBS-step-icon::before {
        content: "";
        position: absolute;
        inset: -6px;
        border-radius: inherit;
        background: inherit;
        opacity: .15;
        filter: blur(10px);
    }

.purple {
    background: rgba(139,92,246,.12);
    color: #8b5cf6;
}

.orange {
    background: rgba(249,115,22,.12);
    color: #f97316;
}

.blue {
    background: rgba(59,130,246,.12);
    color: #3b82f6;
}

.green {
    background: rgba(34,197,94,.12);
    color: #22c55e;
}

.yellow {
    background: rgba(234,179,8,.12);
    color: #eab308;
}

.teal {
    background: rgba(20,184,166,.12);
    color: #14b8a6;
}

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

.TBS-process-card h3 {
    font-size: 16px;
    font-weight: 700;
    color: #111827;
    margin-bottom: 10px;
    line-height: 1.4;
}

.TBS-process-card p {
    font-size: 13px;
    color: #6b7280;
    line-height: 1.6;
    margin: 0;
}

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

@media (max-width: 1199px) {

    .TBS-process-card::after {
        display: none;
    }
}

@media (max-width: 991px) {

    .TBS-process-title {
        font-size: 34px;
    }

    .TBS-process-card {
        min-height: 210px;
    }
}

@media (max-width: 767px) {

    .TBS-process-section {
        padding: 70px 0;
    }

    .TBS-process-title {
        font-size: 28px;
    }

    .TBS-process-subtitle {
        font-size: 15px;
    }

    .TBS-process-card {
        min-height: 190px;
        padding: 25px 12px 18px;
    }

    .TBS-step-icon {
        width: 52px;
        height: 52px;
        font-size: 20px;
    }

    .TBS-step-number {
        width: 38px;
        height: 38px;
    }
}


/*==========================
    TBS-Industry
==========================*/
/* ===================================
   SECTION
=================================== */

.TBS-industries-faq-section {
    padding: 40px 0;
    background: white;
}

    .TBS-industries-faq-section .container {
        max-width: 1320px;
    }

/* ===================================
   WRAPPER
=================================== */

.TBS-industries-wrapper {
    /* background: #ffffff; */
    border-radius: 28px;
/*    padding: 45px;*/
    /* border: 1px solid #e5e7eb; */
    /* box-shadow: 0 20px 60px rgba(0, 0, 0, .06);
}

/* ===================================
   HEADER
=================================== */

    .TBS-section-header {
        margin-bottom: 28px;
    }

    .TBS-section-badge {
        display: inline-block;
        padding: 8px 16px;
        border-radius: 50px;
        background: #eef2ff;
        color: #4f46e5;
        font-size: 12px;
        font-weight: 700;
        letter-spacing: .5px;
        text-transform: uppercase;
        margin-bottom: 12px;
    }

    .TBS-section-title {
        font-size: 32px;
        font-weight: 800;
        color: #111827;
        margin: 0;
        line-height: 1.2;
    }
    /* ===================================
   FAQ DIVIDER
=================================== */

    .TBS-FAQ-column {
        border-left: 1px solid #edf2f7;
        padding-left: 40px;
    }
    /* ===================================
   INDUSTRIES
=================================== */

    .TBS-industries-item {
        background: #f8fafc;
        border: 1px solid #edf2f7;
        border-radius: 18px;
        padding: 20px 10px;
        text-align: center;
        height: 100%;
        transition: .35s;
    }

        .TBS-industries-item:hover {
            transform: translateY(-5px);
            border-color: #4f46e5;
            box-shadow: 0 15px 30px rgba(79,70,229,.12);
        }

    .TBS-industries-icon {
        width: 54px;
        height: 54px;
        margin: 0 auto 12px;
        border-radius: 14px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 22px;
    }
    /* Icon Colors */

    .airport {
        background: #eff6ff;
        color: #2563eb;
    }

    .corporate {
        background: #eef2ff;
        color: #4f46e5;
    }

    .ride {
        background: #fdf2f8;
        color: #ec4899;
    }

    .rental {
        background: #fff7ed;
        color: #f97316;
    }

    .fleet {
        background: #ecfeff;
        color: #0891b2;
    }

    .hotel {
        background: #ecfdf5;
        color: #10b981;
    }

    .TBS-industries-item h6 {
        margin: 0;
        font-size: 14px;
        font-weight: 700;
        color: #111827;
        line-height: 1.4;
    }
    /* ===================================
   FAQ
=================================== */

    .TBS-FAQ .accordion-item {
        border: none;
        background: transparent;
        margin-bottom: 12px;
    }

    .TBS-FAQ .accordion-button {
        background: #f8fafc;
        border: 1px solid #edf2f7;
        border-radius: 14px !important;
        box-shadow: none;
        padding: 18px 22px;
        font-size: 15px;
        font-weight: 600;
        color: #111827;
    }

        .TBS-FAQ .accordion-button:hover {
            border-color: #4f46e5;
        }

        .TBS-FAQ .accordion-button:not(.collapsed) {
            background: #4f46e5;
            color: #ffffff;
            border-color: #4f46e5;
        }

    .TBS-FAQ .accordion-body {
        padding: 18px 22px;
        color: #64748b;
        line-height: 1.8;
        background: #fff;
    }

    .TBS-FAQ .accordion-button:focus {
        box-shadow: none;
    }

    .TBS-FAQ .accordion-button::after {
        transform: scale(.8);
    }
    /* ===================================
   RESPONSIVE
=================================== */

    @media (max-width: 991px) {

        .TBS-industries-faq-section {
            padding: 70px 0;
        }

        .TBS-industries-wrapper {
            padding: 30px;
        }

        .TBS-FAQ-column {
            border-left: none;
            padding-left: 12px;
            margin-top: 10px;
        }

        .TBS-section-title {
            font-size: 28px;
        }
    }

    @media (max-width: 767px) {

        .TBS-industries-wrapper {
            padding: 20px;
        }

        .TBS-section-title {
            font-size: 24px;
        }

        .TBS-industries-item {
            padding: 16px 8px;
        }

        .TBS-industries-icon {
            width: 48px;
            height: 48px;
            font-size: 18px;
        }

        .TBS-industries-item h6 {
            font-size: 12px;
        }

        .TBS-FAQ .accordion-button {
            font-size: 14px;
            padding: 16px;
        }
    }
}

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

.TBS-cta-section {
    padding: 50px 0;
    background: #ffffff;
}
.TBS-faq-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin: 30px 0;
}

.TBS-faq-stat {
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 14px;
    padding: 18px 12px;
    text-align: center;
    transition: all .3s ease;
}

    .TBS-faq-stat:hover {
        transform: translateY(-4px);
        background: rgba(255,255,255,0.12);
    }

    .TBS-faq-stat h4 {
        margin: 0;
        font-size: 28px;
        font-weight: 700;
        color: #fff;
        line-height: 1;
    }

    .TBS-faq-stat span {
        display: block;
        margin-top: 8px;
        font-size: 14px;
        color: rgba(255,255,255,.85);
        line-height: 1.4;
    }

@media (max-width:576px) {
    .TBS-faq-stats {
        grid-template-columns: 1fr;
    }
}

/*=================================
    CTA CARD
=================================*/

.TBS-cta {
    position: relative;
    overflow: hidden;
    background: linear-gradient( 135deg, #0f172a 0%, #111827 50%, #1e293b 100% );
    border-radius: 22px;
    padding: 45px;
    color: #fff;
    box-shadow: 0 20px 50px rgba(15,23,42,.15);
}

    /* Glow Effects */

    .TBS-cta::before {
        content: "";
        position: absolute;
        width: 300px;
        height: 300px;
        top: -120px;
        right: -120px;
        border-radius: 50%;
        background: radial-gradient( rgba(253,185,19,.12), transparent 70% );
    }

    .TBS-cta::after {
        content: "";
        position: absolute;
        width: 220px;
        height: 220px;
        bottom: -100px;
        left: -100px;
        border-radius: 50%;
        background: radial-gradient( rgba(253,185,19,.08), transparent 70% );
    }

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

.cta-badge {
    display: inline-block;
    padding: 7px 14px;
    border-radius: 50px;
    background: rgba(253,185,19,.12);
    color: #fdb913;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .5px;
    margin-bottom: 14px;
}

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

.cta-title {
    font-size: 40px;
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 12px;
    color: #ffffff;
}

    .cta-title span {
        color: #fdb913;
    }

/*=================================
    DESCRIPTION
=================================*/

.cta-desc {
    max-width: 500px;
    color: rgba(255,255,255,.75);
    font-size: 15px;
    line-height: 1.7;
    margin-bottom: 22px;
}

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

.cta-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.btn-schedule {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 170px;
    padding: 12px 22px;
    border-radius: 10px;
    background: #fdb913;
    color: #000;
    text-decoration: none;
    font-weight: 700;
    font-size: 14px;
    transition: .3s ease;
    box-shadow: 0 8px 20px rgba(253,185,19,.20);
}

    .btn-schedule:hover {
        background: #ffca2c;
        color: #000;
        transform: translateY(-2px);
        box-shadow: 0 12px 25px rgba(253,185,19,.30);
    }

.btn-call {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-width: 170px;
    padding: 12px 22px;
    border-radius: 10px;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.1);
    color: #fff;
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    transition: .3s ease;
}

    .btn-call:hover {
        background: rgba(255,255,255,.12);
        color: #fff;
        transform: translateY(-2px);
    }

    .btn-call i {
        width: 30px;
        height: 30px;
        border-radius: 50%;
        background: rgba(253,185,19,.15);
        color: #fdb913;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 12px;
    }

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

.cta-image-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 220px;
}

.cta-car-img {
    max-width: 100%;
    max-height: 240px;
    object-fit: contain;
    position: relative;
    z-index: 2;
    filter: drop-shadow(0 15px 25px rgba(0,0,0,.35));
}

/* Decorative Rings */

.cta-image-wrapper::before {
    content: "";
    position: absolute;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    border: 1px dashed rgba(253,185,19,.18);
    right: 10%;
    top: 50%;
    transform: translateY(-50%);
}

.cta-image-wrapper::after {
    content: "";
    position: absolute;
    width: 140px;
    height: 140px;
    border-radius: 50%;
    border: 1px dashed rgba(253,185,19,.12);
    right: 18%;
    top: 50%;
    transform: translateY(-50%);
}

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

@media (max-width: 1199px) {

    .cta-title {
        font-size: 36px;
    }
}

@media (max-width: 991px) {

    .TBS-cta-section {
        padding: 60px 0;
    }

    .TBS-cta {
        padding: 35px 25px;
        text-align: center;
    }

    .cta-title {
        font-size: 32px;
    }

    .cta-desc {
        margin-left: auto;
        margin-right: auto;
    }

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

    .cta-image-wrapper {
        margin-top: 25px;
        min-height: auto;
    }

        .cta-image-wrapper::before,
        .cta-image-wrapper::after {
            display: none;
        }
}

@media (max-width: 767px) {

    .cta-title {
        font-size: 28px;
    }

    .cta-desc {
        font-size: 14px;
    }

    .cta-car-img {
        max-height: 180px;
    }
}

@media (max-width: 575px) {

    .TBS-cta-section {
        padding: 50px 0;
    }

    .TBS-cta {
        padding: 30px 18px;
        border-radius: 18px;
    }

    .cta-title {
        font-size: 24px;
    }

    .cta-buttons {
        flex-direction: column;
    }

    .btn-schedule,
    .btn-call {
        width: 100%;
    }
}

/* =========================================
           PROPERTY_SERVICE_SECTION
========================================= */
/* ==========================================
   HERO SECTION
========================================== */

.PSS-hero-section {
    position: relative;
    overflow: hidden;
    padding: 120px 0 80px;
    background: radial-gradient(circle at top right, rgba(124,58,237,.25), transparent 35%), radial-gradient(circle at bottom left, rgba(59,130,246,.15), transparent 30%), linear-gradient( 135deg, #050816 0%, #0b1120 25%, #111827 60%, #1e1b4b 100% );
}

    /* Grid Glow */

    .PSS-hero-section::before {
        content: "";
        position: absolute;
        inset: 0;
        background-image: linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
        background-size: 60px 60px;
        pointer-events: none;
    }

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

.PSS-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: 100px;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.12);
    backdrop-filter: blur(10px);
    color: #fff;
    margin-bottom: 25px;
}

    .PSS-hero-badge i {
        color: #8b5cf6;
    }

.PSS-hero-title {
    font-size: 4rem;
    line-height: 1.05;
    font-weight: 800;
    color: #fff;
    margin-bottom: 25px;
}

.PSS-hero-title-highlight {
    background: linear-gradient( 90deg, #8b5cf6, #6366f1, #3b82f6 );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.PSS-hero-desc {
    color: rgba(255,255,255,.75);
    font-size: 1.1rem;
    line-height: 1.8;
    max-width: 550px;
    margin-bottom: 40px;
}

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

.PSS-hero-btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 15px 35px;
    border-radius: 14px;
    text-decoration: none;
    color: #fff;
    font-weight: 600;
    background: linear-gradient( 135deg, #7c3aed, #4f46e5 );
    box-shadow: 0 15px 40px rgba(124,58,237,.35);
    transition: .3s;
}

    .PSS-hero-btn-primary:hover {
        transform: translateY(-3px);
        color: #fff;
    }

.PSS-hero-btn-outline {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 15px 35px;
    border-radius: 14px;
    text-decoration: none;
    color: #fff;
    font-weight: 600;
    border: 1px solid rgba(255,255,255,.15);
    background: rgba(255,255,255,.05);
    backdrop-filter: blur(10px);
    transition: .3s;
}

    .PSS-hero-btn-outline:hover {
        background: rgba(255,255,255,.12);
        color: #fff;
    }

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

.PSS-hero-image-wrapper {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

    /* Glow behind building */

    .PSS-hero-image-wrapper::before {
        content: "";
        position: absolute;
        width: 700px;
        height: 700px;
        border-radius: 50%;
        background: radial-gradient( circle, rgba(124,58,237,.35), transparent 70% );
        filter: blur(80px);
        z-index: 1;
    }

/* Building */

.PSS-hero-building-img {
    position: relative;
    z-index: 3;
    width: 100%;
    max-width: 700px;
    object-fit: contain;
    mix-blend-mode: lighten;
    opacity: .95;
    filter: drop-shadow(0 40px 100px rgba(0,0,0,.45)) brightness(1.05);
    animation: heroFloat 6s ease-in-out infinite;
}

/* Glass overlay */

.PSS-hero-image-wrapper::after {
    content: "";
    position: absolute;
    inset: 10%;
    border-radius: 40px;
    background: linear-gradient( 135deg, rgba(255,255,255,.08), rgba(255,255,255,.02) );
    border: 1px solid rgba(255,255,255,.08);
    backdrop-filter: blur(20px);
    z-index: 2;
}

@keyframes heroFloat {
    0% {
        transform: translateY(0);
    }

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

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

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

@media(max-width:992px) {

    .PSS-hero-section {
        padding: 130px 0 40px;
        text-align: center;
    }

    .PSS-hero-title {
        font-size: 2.8rem;
    }

    .PSS-hero-desc {
        margin-left: auto;
        margin-right: auto;
    }

    .PSS-hero-image-wrapper {
        margin-top: 60px;
    }
}

@media(max-width:768px) {

    .PSS-hero-title {
        font-size: 2.2rem;
    }

    .PSS-hero-btn-primary,
    .PSS-hero-btn-outline {
        width: 100%;
        justify-content: center;
    }

    .PSS-hero-building-img {
        max-width: 100%;
    }
}

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

.PSS-solutions-section {
    padding: 40px 0;
    position: relative;
    overflow: hidden;
    background: radial-gradient(circle at top center, rgba(109, 93, 252, 0.08), transparent 35%), linear-gradient( 180deg, #ffffff 0%, #f8fafc 100% );
}

/*==================================
    HEADER
==================================*/

.PSS-solutions-header {
    text-align: center;
    margin-bottom: 70px;
}

.PSS-solutions-title {
    font-size: 3.2rem;
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -1px;
    color: #111827;
    margin-bottom: 0;
}

.PSS-solutions-title span {
    color: #6d5dfc;
}

/*==================================
    MAIN BOX
==================================*/

.PSS-solutions-box {
    background: #ffffff;
    border: 1px solid #eef2ff;
    border-radius: 32px;
    padding: 60px;
    position: relative;
    overflow: hidden;
    box-shadow:
        0 25px 60px rgba(15, 23, 42, 0.06);
}

.PSS-solutions-box::before {
    content: "";
    position: absolute;
    width: 500px;
    height: 500px;
    top: -250px;
    right: -250px;
    border-radius: 50%;
    background:
        radial-gradient(circle,
            rgba(109,93,252,.08),
            transparent 70%);
}

.PSS-solutions-box::after {
    content: "";
    position: absolute;
    width: 400px;
    height: 400px;
    bottom: -200px;
    left: -200px;
    border-radius: 50%;
    background:
        radial-gradient(circle,
            rgba(34,197,94,.06),
            transparent 70%);
}

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

.PSS-solutions-heading {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 30px;
    position: relative;
    padding-left: 18px;
}

.PSS-solutions-heading::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    position: absolute;
    left: 0;
    top: 10px;
}

.PSS-solutions-heading.problem {
    color: #ef4444;
}

.PSS-solutions-heading.problem::before {
    background: #ef4444;
}

    .PSS-solutions-heading.rsolution {
        color: #22c55e;
    }

        .PSS-solutions-heading.rsolution::before {
            background: #22c55e;
        }

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

.PSS-item {
    display: flex;
    gap: 16px;
    align-items: flex-start;

    padding: 22px;

    border-radius: 22px;

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

    border: 1px solid #edf0ff;

    margin-bottom: 18px;

    transition: all .35s ease;

    position: relative;
    z-index: 2;
}

.PSS-item:last-child {
    margin-bottom: 0;
}

.PSS-item:hover {
    transform: translateY(-8px);

    border-color: #d9ddff;

    box-shadow:
        0 25px 50px rgba(15,23,42,.10);
}

/*==================================
    ICONS
==================================*/

.PSS-icon {
    width: 54px;
    height: 54px;
    border-radius: 18px;

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

    flex-shrink: 0;

    font-size: 15px;
}

.PSS-icon.problem {
    background:
        linear-gradient(
            135deg,
            #fff1f2,
            #fee2e2
        );

    color: #ef4444;
}

.PSS-icon.solution {
    background:
        linear-gradient(
            135deg,
            #ecfdf5,
            #dcfce7
        );

    color: #22c55e;
}

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

.PSS-step {
    font-size: 12px;
    font-weight: 700;
    color: #6d5dfc;
    margin-bottom: 6px;
}

.PSS-item-title {
    font-size: 1rem;
    font-weight: 700;
    color: #111827;
    margin-bottom: 6px;
}

.PSS-item-desc {
    font-size: .9rem;
    line-height: 1.6;
    color: #6b7280;
    margin-bottom: 0;
}

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

.PSS-center {
    position: relative;
    text-align: center;
    min-height: 420px;

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

/* Glow */

.PSS-center::before {
    content: "";

    position: absolute;

    width: 380px;
    height: 380px;

    left: 50%;
    top: 50%;

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

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(109,93,252,.18),
            transparent 70%
        );

    z-index: 1;
}

/* Dotted Connectors */

.PSS-center::after {
    content: "";

    position: absolute;

    left: -100px;
    right: -100px;
    top: 50%;

    height: 2px;

    transform: translateY(-50%);

    z-index: 1;

    background:
        repeating-linear-gradient(
            90deg,
            rgba(109,93,252,.20) 0px,
            rgba(109,93,252,.20) 8px,
            transparent 8px,
            transparent 16px
        );
}

/* Image */

.PSS-center img {
    width: 320px;
    max-width: 100%;
    position: relative;
    z-index: 3;

    animation: floatY 5s ease-in-out infinite;
}

/*==================================
    FLOATING ICONS
==================================*/

.PSS-floating-badge {
    position: absolute;

    width: 58px;
    height: 58px;

    background: #ffffff;

    border-radius: 18px;

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

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

    color: #6d5dfc;

    z-index: 4;
}

.badge-1 {
    top: 20px;
    left: 40px;
}

.badge-2 {
    top: 50px;
    right: 30px;
}

.badge-3 {
    bottom: 70px;
    left: 30px;
}

.badge-4 {
    bottom: 30px;
    right: 40px;
}

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

@keyframes floatY {

    0% {
        transform: translateY(0);
    }

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

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

/*==================================
    TABLET
==================================*/

@media (max-width: 991px) {

    .PSS-solutions-section {
        padding: 80px 0;
    }

    .PSS-solutions-box {
        padding: 35px;
    }

    .PSS-solutions-title {
        font-size: 2.4rem;
    }

    .PSS-center {
        margin: 50px 0;
        min-height: 320px;
    }

    .PSS-center::after {
        display: none;
    }

    .PSS-center img {
        width: 260px;
    }

    .PSS-floating-badge {
        width: 48px;
        height: 48px;
    }
}

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

@media (max-width: 767px) {

    .PSS-solutions-section {
        padding: 60px 0;
    }

    .PSS-solutions-header {
        margin-bottom: 40px;
    }

    .PSS-solutions-title {
        font-size: 2rem;
    }

    .PSS-solutions-box {
        padding: 25px;
        border-radius: 24px;
    }

    .PSS-solutions-heading {
        margin-bottom: 20px;
    }

    .PSS-item {
        padding: 18px;
    }

    .PSS-icon {
        width: 48px;
        height: 48px;
        border-radius: 14px;
    }

    .PSS-center {
        min-height: 260px;
        margin: 35px 0;
    }

    .PSS-center img {
        width: 220px;
    }

    .PSS-floating-badge {
        display: none;
    }
}

/* =========================================
           PSS Properties Section Custom CSS
           ========================================= */

.PSS-properties-section {
    background-color: #f8fafc; /* Very light grayish-blue background */
    padding: 40px 0;
}

/* --- Section Header --- */
.PSS-properties-header {
    text-align: center;
    margin-bottom: 50px;
}

.PSS-properties-title {
    font-size: 2.5rem;
    font-weight: 700;
    color: #111827;
}

    .PSS-properties-title span {
        color: #5d4def; /* Primary Purple Highlight */
    }

/* --- Feature Cards --- */
.PSS-properties-card {
    background: #ffffff;
    border: none;
    border-radius: 16px;
    padding: 30px 24px;
    height: 100%;
    box-shadow: 0 4px 20px rgba(0,0,0,0.03);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

    /* Hover Effect */
    .PSS-properties-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 12px 40px rgba(0,0,0,0.06);
    }

/* --- Icon Boxes with Pastel Backgrounds --- */
.PSS-properties-icon-box {
    width: 50px;
    height: 50px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    flex-shrink: 0;
}

    /* Individual Icon Colors matching the image */
    .PSS-properties-icon-box.purple {
        background-color: #ede9fe;
        color: #7c3aed;
    }

    .PSS-properties-icon-box.green {
        background-color: #dcfce7;
        color: #16a34a;
    }

    .PSS-properties-icon-box.orange {
        background-color: #ffedd5;
        color: #ea580c;
    }

    .PSS-properties-icon-box.blue {
        background-color: #dbeafe;
        color: #2563eb;
    }

    .PSS-properties-icon-box.rose {
        background-color: #ffe4e6;
        color: #e11d48;
    }

    .PSS-properties-icon-box.teal {
        background-color: #ccfbf1;
        color: #0d9488;
    }

    .PSS-properties-icon-box.violet {
        background-color: #f3e8ff;
        color: #9333ea;
    }

    .PSS-properties-icon-box.yellow {
        background-color: #fef3c7;
        color: #d97706;
    }

/* --- Card Typography --- */
.PSS-properties-card-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: #1f2937;
    margin-bottom: 4px;
}

.PSS-properties-card-desc {
    font-size: 0.9rem;
    color: #6b7280;
    line-height: 1.6;
    margin-bottom: 0;
}

/* --- Responsive Adjustments --- */
@media (max-width: 992px) {
    .PSS-properties-title {
        font-size: 2rem;
    }
}

@media (max-width: 768px) {
    .PSS-properties-title {
        font-size: 1.8rem;
    }

    .PSS-properties-section {
        padding: 50px 0;
    }
}

/* ==========================================
   PROPERTY SHOWCASE SECTION
========================================== */

.PSS-showcase-section {
    padding: 30px 0;
    background: #ffffff;
    overflow: hidden;
}

/* LEFT SIDE */

.PSS-showcase-subtitle {
    display: inline-block;
    font-size: .85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #6366f1;
    margin-bottom: 15px;
}

.PSS-showcase-title {
    font-size: 3rem;
    font-weight: 800;
    line-height: 1.15;
    color: #111827;
    margin-bottom: 20px;
}

.PSS-showcase-desc {
    color: #6b7280;
    line-height: 1.8;
    margin-bottom: 35px;
}

/* STATS */

.PSS-showcase-stats-grid {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 20px;
    margin-bottom: 35px;
}

.PSS-showcase-stat-item {
    background: #f8fafc;
    border-radius: 18px;
    padding: 20px;
    border: 1px solid #edf2f7;
}

.PSS-showcase-stat-number {
    display: block;
    font-size: 1.8rem;
    font-weight: 700;
    color: #5d4def;
}

.PSS-showcase-stat-label {
    display: block;
    margin-top: 5px;
    color: #6b7280;
    font-size: .9rem;
}

/* BUTTON */

.PSS-showcase-btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: linear-gradient( 135deg, #6d5dfc, #4f46e5 );
    color: #fff;
    padding: 15px 30px;
    border-radius: 14px;
    text-decoration: none;
    font-weight: 600;
    transition: .3s;
}

    .PSS-showcase-btn-primary:hover {
        color: #fff;
        transform: translateY(-3px);
    }

/* CARDS */

.PSS-showcase-card {
    position: relative;
    height: 500px;
    border-radius: 28px;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(0,0,0,.08);
    transition: .4s ease;
}

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

.PSS-showcase-card-img {
    width: 100%;
    height: 100%;
/*    object-fit: cover;*/
    transition: .8s ease;
}

.PSS-showcase-card:hover .PSS-showcase-card-img {
    transform: scale(1.08);
}

.PSS-showcase-card-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    justify-content: flex-end;
    flex-direction: column;
    padding: 35px;
    background: linear-gradient( to top, rgba(0,0,0,.92), rgba(0,0,0,.5), transparent );
}

.PSS-showcase-project-tag {
    align-self: flex-start;
    background: rgba(255,255,255,.15);
    backdrop-filter: blur(12px);
    color: #fff;
    padding: 8px 18px;
    border-radius: 100px;
    font-size: .8rem;
    margin-bottom: 20px;
}

.PSS-showcase-card-title {
    color: #fff;
    font-size: 1.8rem;
    font-weight: 700;
    margin-bottom: 10px;
}

.PSS-showcase-card-location {
    color: rgba(255,255,255,.8);
    margin-bottom: 20px;
    line-height: 1.6;
}

.PSS-showcase-card-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

    .PSS-showcase-card-stats span {
        background: rgba(255,255,255,.12);
        backdrop-filter: blur(10px);
        color: #fff;
        padding: 8px 16px;
        border-radius: 100px;
        font-size: .85rem;
    }

    .PSS-showcase-card-stats i {
        margin-right: 6px;
    }

/* RESPONSIVE */

@media(max-width:991px) {

    .PSS-showcase-title {
        font-size: 2.3rem;
    }

    .PSS-showcase-card {
        height: 420px;
    }
}

@media(max-width:768px) {

    .PSS-showcase-section {
        padding: 70px 0;
    }

    .PSS-showcase-title {
        font-size: 2rem;
    }

/*    .PSS-showcase-stats-grid {
        grid-template-columns: 1fr;
    }*/

    .PSS-showcase-card {
        height: 380px;
    }
}
/*==================================
    PROCESS SECTION
==================================*/

.PSS-process-section {
    padding: 40px 0;
    background: #ffffff;
}

/* Main Container */

.PSS-process-box {
    background:
        linear-gradient(
            180deg,
            #ffffff,
            #fafbff
        );

    border: 1px solid #eef2ff;

    border-radius: 32px;

    padding: 60px;

    position: relative;

    overflow: hidden;

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

/* Background Glow */

.PSS-process-box::before {
    content: "";

    position: absolute;

    width: 500px;
    height: 500px;

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

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(109,93,252,.10),
            transparent 70%
        );
}

/*==================================
    HEADER
==================================*/

.PSS-process-header {
    text-align: center;
    margin-bottom: 60px;
}

.PSS-process-title {
    font-size: 3rem;
    font-weight: 800;
    color: #111827;
    margin-bottom: 15px;
}

.PSS-process-title span {
    color: #6d5dfc;
}

.PSS-process-subtitle {
    color: #6b7280;
    font-size: 1rem;
    max-width: 700px;
    margin: 0 auto;
}

/*==================================
    WRAPPER
==================================*/

.PSS-process-wrapper {
    position: relative;
}

.PSS-process-line {
    position: absolute;

    top: 70px;
    left: 8%;
    right: 8%;

    height: 3px;

    background:
        repeating-linear-gradient(
            90deg,
            #d8dffc 0,
            #d8dffc 10px,
            transparent 10px,
            transparent 20px
        );

    z-index: 1;
}

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

.PSS-process-card {
    position: relative;
    z-index: 2;

    text-align: center;

    background: #ffffff;

    border: 1px solid #edf0ff;

    border-radius: 24px;

    padding: 30px 18px;

    height: 100%;

    transition: .35s ease;

    box-shadow:
        0 10px 30px rgba(15,23,42,.04);
}

.PSS-process-card:hover {
    transform: translateY(-10px);

    border-color: #d9ddff;

    box-shadow:
        0 25px 50px rgba(15,23,42,.10);
}

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

.PSS-process-icon {
    width: 75px;
    height: 75px;

    margin: 0 auto 20px;

    border-radius: 22px;

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

    font-size: 26px;

    color: #6d5dfc;

    background:
        linear-gradient(
            135deg,
            #f3f0ff,
            #eef2ff
        );
}

/*==================================
    NUMBER
==================================*/

.PSS-process-number {
    display: inline-block;

    margin-bottom: 10px;

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

    color: #6d5dfc;

    background: #f3f0ff;

    padding: 6px 12px;

    border-radius: 30px;
}

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

.PSS-process-card h6 {
    font-size: 1rem;
    font-weight: 700;
    color: #111827;
    margin-bottom: 10px;
}

.PSS-process-card p {
    font-size: .9rem;
    color: #6b7280;
    line-height: 1.6;
    margin-bottom: 0;
}

/*==================================
    TABLET
==================================*/

@media(max-width:991px){

    .PSS-process-box{
        padding:40px 30px;
    }

    .PSS-process-line{
        display:none;
    }

    .PSS-process-title{
        font-size:2.3rem;
    }
}

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

@media(max-width:767px){

    .PSS-process-section{
        padding:60px 0;
    }

    .PSS-process-box{
        padding:25px;
        border-radius:24px;
    }

    .PSS-process-title{
        font-size:2rem;
    }

    .PSS-process-card{
        padding:20px 15px;
    }

    .PSS-process-icon{
        width:60px;
        height:60px;
        font-size:20px;
    }
}


/* ==========================================
   AI MANAGEMENT SECTION
========================================== */

.PSS-aimanagement-section {
    position: relative;
    overflow: hidden;
    padding: 40px 0;
    background: radial-gradient(circle at top left, rgba(99,102,241,.08), transparent 35%), radial-gradient(circle at bottom right, rgba(59,130,246,.08), transparent 35%), linear-gradient( 180deg, #ffffff 0%, #f8fafc 100% );
}

    /* Background Glow */

    .PSS-aimanagement-section::before {
        content: "";
        position: absolute;
        width: 700px;
        height: 700px;
        top: 50%;
        right: -200px;
        transform: translateY(-50%);
        background: radial-gradient( circle, rgba(93,77,239,.12), transparent 70% );
        filter: blur(80px);
        pointer-events: none;
    }

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

.PSS-aimanagement-content-col {
    position: relative;
    z-index: 2;
}

.PSS-aimanagement-subtitle {
    display: inline-block;
    color: #6366f1;
    font-size: .85rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 20px;
}

.PSS-aimanagement-title {
    font-size: 3rem;
    font-weight: 800;
    line-height: 1.15;
    color: #111827;
    margin-bottom: 25px;
}

.PSS-aimanagement-desc {
    color: #64748b;
    line-height: 1.8;
    margin-bottom: 35px;
    max-width: 420px;
}

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

.PSS-aimanagement-btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 15px 30px;
    border-radius: 14px;
    text-decoration: none;
    color: #fff;
    font-weight: 600;
    background: linear-gradient( 135deg, #6d5dfc, #4f46e5 );
    box-shadow: 0 15px 35px rgba(93,77,239,.25);
    transition: all .35s ease;
}

    .PSS-aimanagement-btn-primary:hover {
        color: #fff;
        transform: translateY(-4px);
        box-shadow: 0 20px 45px rgba(93,77,239,.35);
    }

/* ==========================================
   RIGHT SIDE
========================================== */

.PSS-aimanagement-cards-col {
    position: relative;
    z-index: 2;
}

/* FULL WIDTH GRID */

.PSS-ai-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 20px;
    width: 100%;
}

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

.PSS-aimanagement-card {
    position: relative;
    background: rgba(255,255,255,.9);
    backdrop-filter: blur(20px);
    border: 1px solid #eef2ff;
    border-radius: 24px;
    padding: 35px 22px;
    min-height: 280px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    box-shadow: 0 10px 30px rgba(15,23,42,.05);
    transition: all .4s ease;
}

    .PSS-aimanagement-card:hover {
        transform: translateY(-10px);
        box-shadow: 0 25px 60px rgba(93,77,239,.15);
    }

    /* Glow Line */

    .PSS-aimanagement-card::before {
        content: "";
        position: absolute;
        top: 0;
        left: 20%;
        width: 60%;
        height: 3px;
        background: linear-gradient( 90deg, transparent, #6366f1, transparent );
    }

/* ==========================================
   ICONS
========================================== */

.PSS-aimanagement-icon-wrapper {
    width: 90px;
    height: 90px;
    border-radius: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    margin-bottom: 25px;
    position: relative;
    transition: .4s;
}

    .PSS-aimanagement-icon-wrapper::before {
        content: "";
        position: absolute;
        inset: -10px;
        border-radius: 28px;
        opacity: .4;
        filter: blur(20px);
    }

/* Purple */

.PSS-aimanagement-icon-purple {
    background: #ede9fe;
    color: #7c3aed;
}

    .PSS-aimanagement-icon-purple::before {
        background: #a78bfa;
    }

/* Blue */

.PSS-aimanagement-icon-blue {
    background: #dbeafe;
    color: #2563eb;
}

    .PSS-aimanagement-icon-blue::before {
        background: #60a5fa;
    }

/* Indigo */

.PSS-aimanagement-icon-dark-blue {
    background: #e0e7ff;
    color: #4338ca;
}

    .PSS-aimanagement-icon-dark-blue::before {
        background: #818cf8;
    }

/* Light Blue */

.PSS-aimanagement-icon-light-blue {
    background: #eff6ff;
    color: #3b82f6;
}

    .PSS-aimanagement-icon-light-blue::before {
        background: #93c5fd;
    }

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

.PSS-aimanagement-dual-icon {
    display: flex;
    align-items: center;
    justify-content: center;
}

    .PSS-aimanagement-dual-icon i:first-child {
        margin-right: -8px;
        color: #7c3aed;
    }

    .PSS-aimanagement-dual-icon i:last-child {
        color: #f97316;
    }

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

.PSS-aimanagement-card-title {
    font-size: 1rem;
    font-weight: 700;
    color: #111827;
    margin-bottom: 10px;
    line-height: 1.4;
}

.PSS-aimanagement-card-desc {
    font-size: .9rem;
    color: #64748b;
    line-height: 1.7;
    max-width: 180px;
    margin: 0 auto;
}

/* ==========================================
   FLOAT EFFECT
========================================== */

.PSS-aimanagement-card:nth-child(1),
.PSS-aimanagement-card:nth-child(3),
.PSS-aimanagement-card:nth-child(5) {
    animation: floatCard 6s ease-in-out infinite;
}

.PSS-aimanagement-card:nth-child(2),
.PSS-aimanagement-card:nth-child(4) {
    animation: floatCard 8s ease-in-out infinite;
}

@keyframes floatCard {

    0% {
        transform: translateY(0);
    }

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

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

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

@media (max-width: 1400px) {

    .PSS-ai-grid {
        grid-template-columns: repeat(5, 1fr);
        gap: 15px;
    }

    .PSS-aimanagement-card {
        padding: 30px 18px;
    }
}

@media (max-width: 1200px) {

    .PSS-ai-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 991px) {

    .PSS-aimanagement-section {
        padding: 90px 0;
    }

    .PSS-aimanagement-title {
        font-size: 2.3rem;
    }

    .PSS-ai-grid {
        grid-template-columns: repeat(3, 1fr);
        margin-top: 40px;
    }

    .PSS-aimanagement-card {
        min-height: 240px;
    }
}

@media (max-width: 768px) {

    .PSS-aimanagement-title {
        font-size: 2rem;
    }

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

    .PSS-aimanagement-card {
        min-height: auto;
        padding: 25px 15px;
    }

    .PSS-aimanagement-card-desc {
        max-width: 100%;
    }
}

@media (max-width: 576px) {

    .PSS-ai-grid {
        grid-template-columns: 1fr;
    }

    .PSS-aimanagement-section {
        padding: 70px 0;
    }
}

/* ==========================================
   MOBILE APP SECTION
========================================== */

.PSS-apps-section {
    padding: 40px 0;
    background: #ffffff;
}

/* Main Container */

    /* Background Glow */

    .PSS-apps-container::before {
        content: "";
        position: absolute;
        width: 400px;
        height: 400px;
        right: -150px;
        top: -150px;
        border-radius: 50%;
        background: radial-gradient( circle, rgba(124,58,237,.15), transparent 70% );
    }

/* Badge */

.PSS-app-badge {
    display: inline-block;
    background: rgba(124,58,237,.1);
    color: #5d4def;
    padding: 10px 18px;
    border-radius: 100px;
    font-size: .85rem;
    font-weight: 600;
    margin-bottom: 20px;
}

/* Title */

.PSS-app-title {
    font-size: 3rem;
    font-weight: 800;
    line-height: 1.1;
    color: #111827;
    margin-bottom: 25px;
}

    .PSS-app-title span {
        color: #5d4def;
    }

/* Description */

.PSS-app-desc {
    color: #6b7280;
    font-size: 1rem;
    line-height: 1.8;
    margin-bottom: 35px;
    max-width: 540px;
}

/* Features */

.PSS-app-features {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}

.PSS-app-feature {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 1rem;
    color: #374151;
    font-weight: 500;
}

    .PSS-app-feature i {
        width: 30px;
        height: 30px;
        border-radius: 50%;
        background: #ede9fe;
        color: #5d4def;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: .75rem;
        flex-shrink: 0;
    }

/* IMAGE */

.PSS-app-image-wrapper {
    padding-top: 100px;
    position: relative;
    text-align: center;
}

.PSS-app-image-glow {
    position: absolute;
    width: 500px;
    height: 500px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background: radial-gradient( circle, rgba(124,58,237,.18), transparent 70% );
    filter: blur(40px);
}

.PSS-app-main-image {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 520px;
    animation: floatPhone 6s ease-in-out infinite;
}

@keyframes floatPhone {

    0% {
        transform: translateY(0);
    }

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

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

/* Responsive */

@media (max-width: 991px) {

    .PSS-apps-container {
        padding: 40px;
    }

    .PSS-app-content {
        text-align: center;
    }

    .PSS-app-title {
        font-size: 2.3rem;
    }

    .PSS-app-desc {
        margin-left: auto;
        margin-right: auto;
    }

    .PSS-app-image-wrapper {
        margin-top: 30px;
    }
}

@media (max-width: 768px) {

    .PSS-apps-section {
        padding: 70px 0;
    }

    .PSS-apps-container {
        padding: 30px;
        border-radius: 24px;
    }

    .PSS-app-title {
        font-size: 2rem;
    }

    .PSS-app-main-image {
        max-width: 100%;
    }
}


/*==============================
  PSS--Faq, PSS-TESTIMONIAL
==============================*/
.PSS-faq-testimonials-section {
    padding: 30px 0;
    background: #ffffff;
}

.PSS-faq-box,
.PSS-testimonials-box {
    height: 100%;
    background: #fff;
    border-radius: 28px;
    padding: 40px;
    border: 1px solid #eef2ff;
    box-shadow: 0 15px 40px rgba(0,0,0,.05);
}

.PSS-section-badge {
    display: inline-block;
    padding: 8px 16px;
    border-radius: 50px;
    background: rgba(93,77,239,.1);
    color: #5d4def;
    font-weight: 600;
    margin-bottom: 15px;
}

.PSS-section-title {
    font-size: 2rem;
    font-weight: 800;
    margin-bottom: 30px;
    color: #111827;
}

    .PSS-section-title span {
        color: #5d4def;
    }

/*=========================================
    PROPERTY INTEGRATIONS
=========================================*/

.PSS-integrations-section {
    padding: 90px 0;
    background: #fafbff;
    position: relative;
    overflow: hidden;
}

.PSS-integrations-desc {
    max-width: 760px;
    margin: 20px auto 0;
    color: #6b7280;
    line-height: 1.9;
    font-size: 17px;
}

.PSS-integration-text {
    color: #6B7280;
    font-size: 14px;
    line-height: 1.7;
    font-weight: 400;
    margin-bottom: 0;
}

.PSS-integration-card {
    background: #fff;
    border: 1px solid #edf1ff;
    border-radius: 22px;
    padding: 35px 20px;
    text-align: center;
    transition: .35s;
    height: 100%;
    position: relative;
    overflow: hidden;
}

    .PSS-integration-card::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(135deg,#5d4def,#8b5cf6);
        opacity: 0;
        transition: .35s;
    }

    .PSS-integration-card:hover {
        transform: translateY(-8px);
        box-shadow: 0 20px 50px rgba(93,77,239,.15);
        border-color: #5d4def;
    }

        .PSS-integration-card:hover::before {
            opacity: .04;
        }

    .PSS-integration-card img {
        width: 56px;
        height: 56px;
        object-fit: contain;
        margin-bottom: 18px;
        position: relative;
        z-index: 2;
    }

    .PSS-integration-card h6 {
        font-size: 18px;
        font-weight: 700;
        color: #111827;
        margin: 0;
        position: relative;
        z-index: 2;
    }

@media(max-width:991px) {

    .PSS-integrations-section {
        padding: 70px 0;
    }

    .PSS-integration-card {
        padding: 25px 15px;
    }

        .PSS-integration-card img {
            width: 46px;
            height: 46px;
        }

        .PSS-integration-card h6 {
            font-size: 16px;
        }
}

/* FAQ */

.PSS-faq-item {
    border-bottom: 1px solid #eef2ff;
}

.PSS-faq-question {
    width: 100%;
    border: none;
    background: none;
    padding: 20px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 600;
    color: #111827;
    cursor: pointer;
}

.PSS-faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: .4s;
    color: #6b7280;
    line-height: 1.8;
}

.PSS-faq-item.active .PSS-faq-answer {
    max-height: 200px;
    padding-bottom: 20px;
}

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

.PSS-testimonials-list {
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.PSS-testimonial-card {
    color: var(--bs-gray-700);
    background: #fff;
    border: 1px solid #eef2ff;
    border-radius: 22px;
    padding: 28px;
    transition: .35s ease;
    position: relative;
    overflow: hidden;
}

    .PSS-testimonial-card::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        width: 5px;
        height: 100%;
        background: linear-gradient(180deg,#5d4def,#8b5cf6);
    }

    .PSS-testimonial-card:hover {
        transform: translateY(-6px);
        border-color: #d9d8ff;
        box-shadow: 0 20px 45px rgba(93,77,239,.12);
    }

.PSS-testimonial-stars {
    color: #FFC107;
    font-size: 18px;
    letter-spacing: 2px;
    margin-bottom: 18px;
}

.PSS-testimonial-text {
    color: #4b5563;
    line-height: 1.9;
    font-size: 15px;
    margin-bottom: 24px;
}

.PSS-testimonial-user {
    display: flex;
    align-items: center;
    gap: 15px;
}

    .PSS-testimonial-user img {
        width: 60px;
        height: 60px;
        border-radius: 50%;
        object-fit: cover;
        border: 3px solid #f2f3ff;
    }

    .PSS-testimonial-user h5 {
        margin: 0;
        font-size: 17px;
        font-weight: 700;
        color: #111827;
    }

    .PSS-testimonial-user span {
        color: #6b7280;
        font-size: 14px;
    }

/* Remove old slider styles */

.PSS-testimonials-slider,
.PSS-testimonial,
.PSS-testimonials-dots {
    display: none !important;
}

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

.PSS-cta-section {
    position: relative;
    overflow: hidden;
    padding: 60px 0;
    background: radial-gradient(circle at 20% 50%, rgba(139,92,246,.15), transparent 35%), radial-gradient(circle at 90% 20%, rgba(59,130,246,.12), transparent 30%), linear-gradient( 135deg, #0f172a 0%, #111827 50%, #1e293b 100% );
}

/* Building Overlay */

.PSS-cta-building-wrapper {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 30%;
    height: 100%;
    opacity: .12;
    pointer-events: none;
}

.PSS-cta-building-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    mask-image: linear-gradient( to right, rgba(0,0,0,1), rgba(0,0,0,0) );
    -webkit-mask-image: linear-gradient( to right, rgba(0,0,0,1), rgba(0,0,0,0) );
}

/* Main Container */

.PSS-cta-container {
    position: relative;
    z-index: 2;
    background: rgba(255,255,255,.04);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 28px;
    padding: 45px;
    text-align: center;
}

/* Badge */

.PSS-cta-badge {
    display: inline-block;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.10);
    color: #ffffff;
    padding: 8px 16px;
    border-radius: 50px;
    font-size: .8rem;
    font-weight: 600;
    margin-bottom: 15px;
}

/* Title */

.PSS-cta-title {
    font-size: 2.2rem;
    font-weight: 800;
    line-height: 1.2;
    color: #ffffff;
    margin-bottom: 15px;
}

    .PSS-cta-title span {
        color: #8b5cf6;
    }

/* Description */

.PSS-cta-desc {
    max-width: 750px;
    margin: 0 auto 25px;
    color: rgba(255,255,255,.75);
    line-height: 1.8;
    font-size: .95rem;
}

/* Features */

.PSS-cta-features {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px 25px;
    margin-bottom: 30px;
}

.PSS-cta-feature-item {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #ffffff;
    font-size: .9rem;
}

    .PSS-cta-feature-item i {
        color: #8b5cf6;
    }

/* Buttons */

.PSS-cta-buttons {
    display: flex;
    justify-content: center;
    gap: 12px;
}

.PSS-cta-btn-primary,
.PSS-cta-btn-secondary {
    min-width: 180px;
    padding: 13px 24px;
    border-radius: 12px;
    text-decoration: none;
    font-weight: 600;
    transition: .3s;
}

.PSS-cta-btn-primary {
    background: linear-gradient( 135deg, #8b5cf6, #6d28d9 );
    color: #fff;
}

    .PSS-cta-btn-primary:hover {
        transform: translateY(-2px);
        color: #fff;
    }

.PSS-cta-btn-secondary {
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.15);
    color: #fff;
}

    .PSS-cta-btn-secondary:hover {
        background: rgba(255,255,255,.10);
        color: #fff;
    }

/* Responsive */

@media(max-width:768px) {

    .PSS-cta-section {
        padding: 50px 0;
    }

    .PSS-cta-container {
        padding: 30px 25px;
    }

    .PSS-cta-title {
        font-size: 1.8rem;
    }

    .PSS-cta-features {
        flex-direction: column;
        align-items: center;
    }

    .PSS-cta-buttons {
        flex-direction: column;
    }

    .PSS-cta-btn-primary,
    .PSS-cta-btn-secondary {
        width: 100%;
    }

    .PSS-cta-building-wrapper {
        display: none;
    }
}


/*=========================================
    CRM HERO SECTION
=========================================*/

.CRMS-hero-section {
    position: relative;
    overflow: hidden;
    padding: 130px 0 80px;
    background: radial-gradient(circle at top left, rgba(99,102,241,.18), transparent 35%), radial-gradient(circle at bottom right, rgba(168,85,247,.15), transparent 35%), linear-gradient( 135deg, #0f172a 0%, #111827 45%, #1e1b4b 100% );
}

    .CRMS-hero-section::before {
        content: "";
        position: absolute;
        width: 500px;
        height: 500px;
        top: -200px;
        right: -150px;
        background: #6366f1;
        filter: blur(180px);
        opacity: .12;
    }

    .CRMS-hero-section::after {
        content: "";
        position: absolute;
        width: 450px;
        height: 450px;
        bottom: -180px;
        left: -120px;
        background: #8b5cf6;
        filter: blur(160px);
        opacity: .12;
    }

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

.CRMS-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.1);
    backdrop-filter: blur(20px);
    color: #c4b5fd;
    padding: 10px 18px;
    border-radius: 50px;
    margin-bottom: 25px;
}

    .CRMS-hero-badge i {
        color: #818cf8;
    }

.CRMS-hero-title {
    font-size: 4rem;
    font-weight: 800;
    line-height: 1.1;
    color: #ffffff;
    margin-bottom: 25px;
}

    .CRMS-hero-title span {
        background: linear-gradient( 90deg, #818cf8, #c084fc );
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }

.CRMS-hero-desc {
    color: rgba(255,255,255,.70);
    font-size: 1.1rem;
    line-height: 1.8;
    max-width: 520px;
    margin-bottom: 35px;
}

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

.CRMS-hero-btn-primary {
    background: linear-gradient( 135deg, #6366f1, #8b5cf6 );
    color: #fff;
    text-decoration: none;
    padding: 15px 34px;
    border-radius: 14px;
    font-weight: 600;
    transition: .3s;
}

    .CRMS-hero-btn-primary:hover {
        color: #fff;
        transform: translateY(-3px);
    }

.CRMS-hero-btn-outline {
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.12);
    color: #fff;
    text-decoration: none;
    padding: 15px 30px;
    border-radius: 14px;
    transition: .3s;
}

    .CRMS-hero-btn-outline:hover {
        background: rgba(255,255,255,.12);
        color: #fff;
    }

    .CRMS-hero-btn-outline i {
        color: #cbd5e1;
    }

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

.crms-services-section {
    padding: 100px 0;
    background: linear-gradient(180deg,#fcfaff 0%,#f6f1ff 100%);
    position: relative;
    overflow: hidden;
}

    .crms-services-section::before {
        content: "";
        position: absolute;
        width: 280px;
        height: 280px;
        background: rgba(124,58,237,.08);
        border-radius: 50%;
        top: -120px;
        left: -120px;
    }

    .crms-services-section::after {
        content: "";
        position: absolute;
        width: 340px;
        height: 340px;
        background: rgba(139,92,246,.08);
        border-radius: 50%;
        bottom: -140px;
        right: -140px;
    }

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

.crms-services-title {
    max-width: 820px;
    margin: 0 auto 70px;
    position: relative;
    z-index: 2;
}

.crms-services-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border-radius: 50px;
    background: #f3e8ff;
    color: #7c3aed;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .7px;
    text-transform: uppercase;
}

    .crms-services-badge i {
        font-size: 16px;
    }

.crms-services-title h2 {
    margin: 22px 0 18px;
    font-size: 46px;
    font-weight: 800;
    color: #1f2937;
    line-height: 1.2;
}

.crms-services-title p {
    color: #6b7280;
    font-size: 17px;
    line-height: 1.8;
}

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

.crms-services-card {
    background: #ffffff;
    border: 1px solid #eadcff;
    border-radius: 22px;
    padding: 35px 30px;
    height: 100%;
    transition: .35s;
    position: relative;
    overflow: hidden;
    box-shadow: 0 18px 40px rgba(124,58,237,.06);
}

    .crms-services-card::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        width: 5px;
        height: 100%;
        background: linear-gradient(#7c3aed,#a855f7);
        transform: scaleY(0);
        transition: .35s;
    }

    .crms-services-card:hover {
        transform: translateY(-10px);
        border-color: #c084fc;
        box-shadow: 0 22px 45px rgba(124,58,237,.18);
    }

        .crms-services-card:hover::before {
            transform: scaleY(1);
        }

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

.crms-services-icon {
    width: 72px;
    height: 72px;
    border-radius: 20px;
    background: linear-gradient(135deg,#7c3aed,#a855f7);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 30px;
    margin-bottom: 22px;
    transition: .35s;
    box-shadow: 0 14px 28px rgba(124,58,237,.25);
}

.crms-services-card:hover .crms-services-icon {
    transform: rotate(-8deg) scale(1.08);
}

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

.crms-services-card h4 {
    font-size: 21px;
    font-weight: 700;
    color: #1f2937;
    margin-bottom: 15px;
    line-height: 1.4;
}

.crms-services-card p {
    margin: 0;
    color: #6b7280;
    font-size: 15px;
    line-height: 1.8;
}

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

@media (max-width:1199px) {

    .crms-services-title h2 {
        font-size: 40px;
    }
}

@media (max-width:991px) {

    .crms-services-section {
        padding: 80px 0;
    }

    .crms-services-title {
        margin-bottom: 50px;
    }

        .crms-services-title h2 {
            font-size: 34px;
        }

    .crms-services-card {
        padding: 30px 25px;
    }
}

@media (max-width:767px) {

    .crms-services-section {
        padding: 70px 0;
    }

    .crms-services-title h2 {
        font-size: 28px;
    }

    .crms-services-title p {
        font-size: 15px;
    }

    .crms-services-card {
        padding: 25px 20px;
    }

    .crms-services-icon {
        width: 60px;
        height: 60px;
        font-size: 24px;
        border-radius: 16px;
        margin-bottom: 18px;
    }

    .crms-services-card h4 {
        font-size: 18px;
    }

    .crms-services-card p {
        font-size: 14px;
    }
}

/*==================================
        CRM BENEFITS
===================================*/

.crms-benefits {
    position: relative;
    overflow: hidden;
    background: linear-gradient(180deg,#f8fbff 0%,#ffffff 100%);
    padding: 90px 0;
}

    .crms-benefits::before {
        content: "";
        position: absolute;
        width: 320px;
        height: 320px;
        background: #4f8cff;
        opacity: .08;
        border-radius: 50%;
        top: -120px;
        left: -120px;
        filter: blur(40px);
    }

    .crms-benefits::after {
        content: "";
        position: absolute;
        width: 350px;
        height: 350px;
        background: #7b61ff;
        opacity: .08;
        border-radius: 50%;
        bottom: -150px;
        right: -120px;
        filter: blur(45px);
    }

/* Custom 5-column Bootstrap */

@media (min-width:992px) {

    .col-lg-20 {
        flex: 0 0 20%;
        max-width: 20%;
    }
}

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

.crms-benefits-heading {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 18px;
    margin-bottom: 12px;
}

    .crms-benefits-heading span {
        width: 75px;
        height: 3px;
        border-radius: 20px;
        background: linear-gradient(90deg,#0d6efd,#20c997);
    }

    .crms-benefits-heading h6 {
        margin: 0;
        font-size: 30px;
        font-weight: 600;
        color: #0d6efd;
    }

.crms-benefits h2 {
    font-size: 64px;
    font-weight: 800;
    color: #1d2433;
    margin-bottom: 18px;
}

.crms-benefits p {
    max-width: 680px;
    margin: auto;
    font-size: 18px;
    color: #6b7280;
    line-height: 1.8;
}

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

.crms-benefits-card {
    position: relative;
    background: #fff;
    border-radius: 22px;
    border: 1px solid #edf2f7;
    aspect-ratio: 1/1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 24px;
    transition: .35s;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,.05);
}

    .crms-benefits-card::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 5px;
        background: linear-gradient(90deg,#0d6efd,#20c997,#ff9800,#7b61ff);
        transform: scaleX(0);
        transition: .35s;
    }

    .crms-benefits-card:hover::before {
        transform: scaleX(1);
    }

    .crms-benefits-card:hover {
        transform: translateY(-10px);
        box-shadow: 0 20px 45px rgba(13,110,253,.12);
    }


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

.crms-benefits-icon {
    width: 78px;
    height: 78px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 18px;
    transition: .35s;
}

    .crms-benefits-icon i {
        font-size: 36px;
        transition: .35s;
    }

/* Individual Colors */

.col-lg-20:nth-child(1) .crms-benefits-icon {
    background: #e8f2ff;
}

.col-lg-20:nth-child(1) i {
    color: #0d6efd;
}

.col-lg-20:nth-child(2) .crms-benefits-icon {
    background: #fff1df;
}

.col-lg-20:nth-child(2) i {
    color: #ff9800;
}

.col-lg-20:nth-child(3) .crms-benefits-icon {
    background: #e8fbf2;
}

.col-lg-20:nth-child(3) i {
    color: #20c997;
}

.col-lg-20:nth-child(4) .crms-benefits-icon {
    background: #efe9ff;
}

.col-lg-20:nth-child(4) i {
    color: #7b61ff;
}

.col-lg-20:nth-child(5) .crms-benefits-icon {
    background: #e7f3ff;
}

.col-lg-20:nth-child(5) i {
    color: #1e88e5;
}

.col-lg-20:nth-child(6) .crms-benefits-icon {
    background: #fff4e8;
}

.col-lg-20:nth-child(6) i {
    color: #ff7043;
}

.col-lg-20:nth-child(7) .crms-benefits-icon {
    background: #ebfff3;
}

.col-lg-20:nth-child(7) i {
    color: #2ecc71;
}

.col-lg-20:nth-child(8) .crms-benefits-icon {
    background: #f2ecff;
}

.col-lg-20:nth-child(8) i {
    color: #8e44ad;
}

.col-lg-20:nth-child(9) .crms-benefits-icon {
    background: #eaf4ff;
}

.col-lg-20:nth-child(9) i {
    color: #2196f3;
}

.col-lg-20:nth-child(10) .crms-benefits-icon {
    background: #fff3e6;
}

.col-lg-20:nth-child(10) i {
    color: #fb8c00;
}

/* Hover */

.crms-benefits-card:hover .crms-benefits-icon {
    transform: scale(1.08) rotate(8deg);
}

/*======================*/

.crms-benefits-card h5 {
    font-size: 18px;
    font-weight: 700;
    color: #202939;
    text-align: center;
    line-height: 1.4;
    margin: 0;
}

    .crms-benefits-card h5::after {
        content: "";
        display: block;
        width: 45px;
        height: 3px;
        border-radius: 30px;
        margin: 14px auto 0;
        background: linear-gradient(90deg,#0d6efd,#20c997,#ff9800);
    }

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

@media(max-width:1200px) {

    .crms-benefits h2 {
        font-size: 54px;
    }
}

@media(max-width:991px) {

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

        .crms-benefits h2 {
            font-size: 46px;
        }

    .crms-benefits-heading h6 {
        font-size: 26px;
    }

    .crms-benefits-card {
        min-height: 220px;
        aspect-ratio: auto;
    }
}

@media(max-width:767px) {

    .crms-benefits {
        padding: 60px 0;
    }

        .crms-benefits h2 {
            font-size: 36px;
        }

    .crms-benefits-heading h6 {
        font-size: 22px;
    }

    .crms-benefits-heading span {
        width: 40px;
    }

    .crms-benefits p {
        font-size: 16px;
    }

    .crms-benefits-card {
        min-height: 180px;
    }

    .crms-benefits-icon {
        width: 65px;
        height: 65px;
    }

        .crms-benefits-icon i {
            font-size: 30px;
        }

    .crms-benefits-card h5 {
        font-size: 16px;
    }
}
/*=========================================
    FEATURES
=========================================*/

.CRMS-hero-features {
    display: flex;
/*    flex-wrap: wrap;*/
    gap: 24px;
    margin-top: 40px;
}

.CRMS-hero-feature-item {
    display: flex;
    align-items: center;
    gap: 8px;
    color: rgba(255,255,255,.75);
    font-size: .95rem;
}

    .CRMS-hero-feature-item i {
        color: #818cf8;
    }

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

.CRMS-hero-showcase {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.CRMS-hero-showcase-glow {
    position: absolute;
    width: 80%;
    height: 80%;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background: linear-gradient( 135deg, #6366f1, #8b5cf6 );
    filter: blur(120px);
    opacity: .30;
    z-index: 1;
}

.CRMS-hero-showcase-img {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 850px;
    border-radius: 24px;
    border: 1px solid rgba(255,255,255,.08);
    box-shadow: 0 30px 80px rgba(0,0,0,.45);
    animation: CRMFloat 6s ease-in-out infinite;
}

@keyframes CRMFloat {

    0% {
        transform: translateY(0);
    }

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

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

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

@media(max-width:1199px) {

    .CRMS-hero-title {
        font-size: 3.2rem;
    }
}

@media(max-width:991px) {

    .CRMS-hero-section {
        padding: 80px 0;
        text-align: center;
    }

    .CRMS-hero-title {
        font-size: 2.8rem;
    }

    .CRMS-hero-desc {
        margin-left: auto;
        margin-right: auto;
    }

    .CRMS-hero-features {
        justify-content: center;
    }

    .CRMS-hero-showcase {
        margin-top: 50px;
    }
}

@media(max-width:767px) {

    .CRMS-hero-section {
        padding: 130px 0 40px;
    }

    .CRMS-hero-title {
        font-size: 2.2rem;
    }

    .CRMS-hero-desc {
        font-size: 1rem;
    }

    .CRMS-hero-btn-primary,
    .CRMS-hero-btn-outline {
        width: 100%;
        justify-content: center;
    }

    .CRMS-hero-features {
        align-items: center;
        gap: 15px;
    }
}

/*=========================================
    CRM SOLUTIONS SECTION
=========================================*/

.CRMS-soln-section {
    padding: 50px 0;
    background: #ffffff;
}

/* Wrapper */

.CRMS-soln-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 50px;
    padding: 80px 60px;
    border-radius: 32px;
    background: linear-gradient( 135deg, #f8faff 0%, #ffffff 45%, #f5f3ff 100% );
    border: 1px solid #edf0ff;
    box-shadow: 0 25px 60px rgba(99,102,241,.08);
    overflow: hidden;
}

    /* Decorative Background */

    .CRMS-soln-wrapper::before {
        content: "";
        position: absolute;
        width: 400px;
        height: 400px;
        right: -150px;
        top: -150px;
        background: #6366f1;
        opacity: .05;
        border-radius: 50%;
        filter: blur(80px);
    }

    .CRMS-soln-wrapper::after {
        content: "";
        position: absolute;
        width: 350px;
        height: 350px;
        left: -120px;
        bottom: -120px;
        background: #8b5cf6;
        opacity: .05;
        border-radius: 50%;
        filter: blur(80px);
    }

/* Columns */

.CRMS-soln-column {
    flex: 1;
    position: relative;
    z-index: 2;
}

/* Title */

.CRMS-soln-title {
    font-size: 38px;
    font-weight: 800;
    line-height: 1.2;
    color: #111827;
    margin-bottom: 35px;
}

/* Lists */

.CRMS-soln-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

    .CRMS-soln-list li {
        display: flex;
        align-items: center;
        gap: 14px;
        padding: 14px 0;
        font-size: 16px;
        font-weight: 500;
        color: #4b5563;
        border-bottom: 1px solid #eef2ff;
    }

/* Icons */

.CRMS-soln-icon {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 12px;
}

    .CRMS-soln-icon.danger {
        background: #fee2e2;
        color: #ef4444;
    }

    .CRMS-soln-icon.success {
        background: #dcfce7;
        color: #22c55e;
    }

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

.CRMS-soln-center {
    position: relative;
    width: 420px;
    min-width: 420px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
}

/* Glow */

.CRMS-soln-glow {
    position: absolute;
    width: 280px;
    height: 280px;
    background: linear-gradient( 135deg, #6366f1, #8b5cf6 );
    border-radius: 50%;
    filter: blur(110px);
    opacity: .25;
    z-index: 1;
}

/* Image */

.CRMS-soln-center-image {
    position: relative;
    z-index: 2;
}

    .CRMS-soln-center-image img {
        width: 100%;
        max-width: 320px;
        animation: CRMSFloat 5s ease-in-out infinite;
    }

/* Animation */

@keyframes CRMSFloat {

    0% {
        transform: translateY(0);
    }

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

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

/*=========================================
    TABLET
=========================================*/

@media(max-width:991px) {

    .CRMS-soln-wrapper {
        flex-direction: column;
        padding: 60px 35px;
        text-align: center;
    }

    .CRMS-soln-column {
        width: 100%;
    }

    .CRMS-soln-center {
        width: 100%;
        min-width: 100%;
        margin: 20px 0;
    }

    .CRMS-soln-title {
        font-size: 30px;
    }

    .CRMS-soln-list li {
        justify-content: flex-start;
        text-align: left;
    }

    .CRMS-soln-center-image img {
        max-width: 260px;
    }
}

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

@media(max-width:576px) {

    .CRMS-soln-section {
        padding: 70px 0;
    }

    .CRMS-soln-wrapper {
        padding: 40px 20px;
        border-radius: 24px;
    }

    .CRMS-soln-title {
        font-size: 26px;
    }

    .CRMS-soln-list li {
        font-size: 15px;
        align-items: flex-start;
    }

    .CRMS-soln-center-image img {
        max-width: 220px;
    }
}

/*===========================
       CRMS-Features
===========================*/
.CRMS-features-section {
    padding: 40px 0;
    background: #fff;
}

.CRMS-features-header {
    text-align: center;
    margin-bottom: 50px;
}

.CRMS-features-title {
    font-size: 42px;
    font-weight: 700;
    color: #111827;
}

    .CRMS-features-title span {
        color: #5d4def;
    }

/* Custom Bootstrap 5 Column */

@media(min-width:1200px) {
    .col-xl-2-4 {
        flex: 0 0 20%;
        max-width: 20%;
    }
}

/* Card */

.CRMS-features-card {
    height: 100%;
    background: #fff;
    border: 1px solid #eef2f7;
    border-radius: 16px;
    padding: 24px;
    transition: .3s;
}

    .CRMS-features-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 12px 30px rgba(0,0,0,.06);
    }

.CRMS-features-icon {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    margin-bottom: 18px;
}

.CRMS-features-card-title {
    font-size: 16px;
    font-weight: 700;
    color: #111827;
    margin-bottom: 10px;
}

.CRMS-features-card-desc {
    font-size: 14px;
    line-height: 1.7;
    color: #6b7280;
    margin: 0;
}

/* Colors */

.CRMS-blue {
    background: #e8f0ff;
    color: #2563eb;
}

.CRMS-green {
    background: #e8f8ec;
    color: #16a34a;
}

.CRMS-orange {
    background: #fff1e7;
    color: #ea580c;
}

.CRMS-pink {
    background: #ffe9ef;
    color: #e11d48;
}

.CRMS-whatsapp {
    background: #e7faef;
    color: #22c55e;
}

.CRMS-red {
    background: #ffe8ec;
    color: #dc2626;
}

.CRMS-purple {
    background: #f3e8ff;
    color: #9333ea;
}

.CRMS-indigo {
    background: #e9edff;
    color: #4338ca;
}

.CRMS-light-purple {
    background: #ede9fe;
    color: #7c3aed;
}

/* Mobile */

@media(max-width:991px) {

    .CRMS-features-title {
        font-size: 32px;
    }
}

@media(max-width:576px) {

    .CRMS-features-section {
        padding: 70px 0;
    }

    .CRMS-features-title {
        font-size: 26px;
    }

    .CRMS-features-card {
        padding: 20px;
    }
}

/*========================
     CRMS-Showcase
========================*/
/*=========================================
    CRM SHOWCASE SECTION
=========================================*/

.CRMS-showcase-section {
    padding: 40px 0;
    background: #ffffff;
}

/* Header */

.CRMS-showcase-header {
    text-align: center;
    margin-bottom: 50px;
}

.CRMS-showcase-title {
    font-size: 40px;
    font-weight: 800;
    color: #111827;
}

    .CRMS-showcase-title span {
        color: #5d4def;
    }

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

.CRMS-showcase-card {
    position: relative;
    height: 420px;
    overflow: hidden;
    border-radius: 20px;
    cursor: pointer;
}

    /* Image */

    .CRMS-showcase-card img {
        width: 100%;
        height: 100%;
/*        object-fit: cover;*/
        transition: .6s;
    }

/* Overlay */

.CRMS-showcase-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient( to top, rgba(5,10,25,.95) 0%, rgba(5,10,25,.60) 40%, rgba(5,10,25,.10) 100% );
}

/* Content */

.CRMS-showcase-content {
    position: absolute;
    left: 30px;
    right: 30px;
    bottom: 28px;
    z-index: 3;
}

.CRMS-showcase-tag {
    display: inline-block;
    padding: 6px 12px;
    background: rgba(255,255,255,.92);
    color: #5d4def;
    font-size: 12px;
    font-weight: 700;
    border-radius: 50px;
    margin-bottom: 16px;
}

.CRMS-showcase-content h3 {
    font-size: 34px;
    font-weight: 700;
    line-height: 1.2;
    color: #fff;
    margin-bottom: 12px;
}

.CRMS-showcase-content p {
    color: rgba(255,255,255,.85);
    font-size: 15px;
    line-height: 1.7;
    margin-bottom: 18px;
}

.CRMS-showcase-content a {
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
}

    .CRMS-showcase-content a i {
        margin-left: 6px;
    }

/* Hover */

.CRMS-showcase-card:hover img {
    transform: scale(1.08);
}

.CRMS-showcase-card:hover .CRMS-showcase-overlay {
    background: linear-gradient( to top, rgba(10,15,40,.98) 0%, rgba(10,15,40,.75) 45%, rgba(10,15,40,.20) 100% );
}

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

@media(max-width:991px) {

    .CRMS-showcase-title {
        font-size: 32px;
    }

    .CRMS-showcase-card {
        height: 380px;
    }

    .CRMS-showcase-content h3 {
        font-size: 28px;
    }
}

@media(max-width:576px) {

    .CRMS-showcase-section {
        padding: 70px 0;
    }

    .CRMS-showcase-title {
        font-size: 26px;
    }

    .CRMS-showcase-card {
        height: 340px;
    }

    .CRMS-showcase-content {
        left: 20px;
        right: 20px;
        bottom: 20px;
    }

        .CRMS-showcase-content h3 {
            font-size: 22px;
        }

        .CRMS-showcase-content p {
            font-size: 14px;
        }
}

/*=====================
   CRMS-Processs
=====================*/
/*=========================================
    CRM PROCESS SECTION
=========================================*/

.CRMS-process-section {
    padding: 40px 0;
    background: #ffffff;
}

/*=========================================
    WRAPPER
=========================================*/

.CRMS-process-wrapper {
    position: relative;
    padding: 80px 50px;
    border-radius: 32px;
    background: linear-gradient( 135deg, #fafbff 0%, #ffffff 50%, #f5f3ff 100% );
    border: 1px solid #edf0ff;
    box-shadow: 0 20px 60px rgba(99,102,241,.08);
    overflow: hidden;
}

    .CRMS-process-wrapper::before {
        content: "";
        position: absolute;
        width: 400px;
        height: 400px;
        top: -180px;
        right: -180px;
        background: #6366f1;
        opacity: .05;
        border-radius: 50%;
        filter: blur(90px);
    }

    .CRMS-process-wrapper::after {
        content: "";
        position: absolute;
        width: 350px;
        height: 350px;
        left: -150px;
        bottom: -150px;
        background: #8b5cf6;
        opacity: .05;
        border-radius: 50%;
        filter: blur(90px);
    }

/*=========================================
    HEADER
=========================================*/

.CRMS-process-header {
    text-align: center;
    margin-bottom: 80px;
    position: relative;
    z-index: 2;
}

.CRMS-process-badge {
    display: inline-flex;
    padding: 10px 18px;
    border-radius: 50px;
    background: rgba(99,102,241,.08);
    color: #6366f1;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1px;
    margin-bottom: 18px;
}

.CRMS-process-title {
    font-size: 46px;
    font-weight: 800;
    color: #111827;
    margin-bottom: 15px;
}

    .CRMS-process-title span {
        background: linear-gradient( 135deg, #6366f1, #8b5cf6 );
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }

.CRMS-process-subtitle {
    max-width: 700px;
    margin: auto;
    color: #6b7280;
    font-size: 17px;
    line-height: 1.8;
}

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

.CRMS-process-row {
    position: relative;
    z-index: 2;
}

    .CRMS-process-row::before {
        content: "";
        position: absolute;
        left: 9%;
        right: 9%;
        top: 42px;
        border-top: 2px dashed #d9dff3;
        z-index: 1;
    }

/*=========================================
    ITEM
=========================================*/

.CRMS-process-item {
    position: relative;
    text-align: center;
    max-width: 220px;
    margin: auto;
    z-index: 2;
}

.CRMS-process-number {
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    color: #6366f1;
    font-size: 12px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
}

/*=========================================
    ICONS
=========================================*/

.CRMS-process-icon {
    width: 84px;
    height: 84px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 24px;
    font-size: 30px;
    transition: .35s ease;
}

.CRMS-process-item:hover .CRMS-process-icon {
    transform: translateY(-8px);
    box-shadow: 0 15px 35px rgba(99,102,241,.15);
}

.CRMS-process-blue {
    background: #eef2ff;
    color: #6366f1;
}

.CRMS-process-green {
    background: #ecfdf3;
    color: #22c55e;
}

.CRMS-process-orange {
    background: #fff2e8;
    color: #f97316;
}

.CRMS-process-purple {
    background: #f5f3ff;
    color: #8b5cf6;
}

.CRMS-process-pink {
    background: #fff1f2;
    color: #ec4899;
}

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

.CRMS-process-item h3 {
    font-size: 18px;
    font-weight: 700;
    color: #111827;
    margin-bottom: 12px;
}

.CRMS-process-item p {
    font-size: 14px;
    line-height: 1.8;
    color: #6b7280;
    margin: 0;
}

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

@media(max-width:991px) {

    .CRMS-process-wrapper {
        padding: 60px 30px;
    }

    .CRMS-process-row::before {
        display: none;
    }

    .CRMS-process-item {
        margin-bottom: 50px;
    }

    .CRMS-process-title {
        font-size: 34px;
    }
}

@media(max-width:576px) {

    .CRMS-process-section {
        padding: 70px 0;
    }

    .CRMS-process-wrapper {
        padding: 40px 20px;
        border-radius: 24px;
    }

    .CRMS-process-title {
        font-size: 28px;
    }

    .CRMS-process-subtitle {
        font-size: 15px;
    }

    .CRMS-process-icon {
        width: 70px;
        height: 70px;
        font-size: 24px;
    }

    .CRMS-process-item h3 {
        font-size: 16px;
    }

    .CRMS-process-item p {
        font-size: 13px;
    }
}

/* ==========================================
   AI POWER SECTION
========================================== */

.CRMS-aipower-section {
    position: relative;
    overflow: hidden;
    padding: 40px 0;
    background: #081129;
}

/* Purple Glow */

.CRMS-aipower-section::before {
    content: '';
    position: absolute;
    width: 500px;
    height: 500px;
    top: 50%;
    left: 70%;
    transform: translate(-50%, -50%);
    background:
        radial-gradient(circle,
            rgba(124,58,237,.35),
            transparent 70%);
    filter: blur(50px);
    pointer-events: none;
}

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

.CRMS-aipower-content-col {
    position: relative;
    z-index: 2;
}

.CRMS-aipower-badge {
    display: inline-block;
    padding: 6px 14px;
    border-radius: 30px;
    border: 1px solid rgba(139,92,246,.25);
    background: rgba(139,92,246,.08);
    color: #a78bfa;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    margin-bottom: 18px;
}

.CRMS-aipower-title {
    color: #ffffff;
    font-size: 2.2rem;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 18px;
}

.CRMS-aipower-desc {
    color: #94a3b8;
    font-size: 15px;
    line-height: 1.8;
    max-width: 300px;
    margin-bottom: 25px;
}

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

.CRMS-aipower-btn-primary {
    display: inline-flex;
    align-items: center;
    padding: 12px 24px;
    border-radius: 8px;
    text-decoration: none;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    background: linear-gradient(
        135deg,
        #7c3aed,
        #5b4df0
    );
    transition: all .3s ease;
}

.CRMS-aipower-btn-primary:hover {
    color: #fff;
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(124,58,237,.4);
}

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

.CRMS-aipower-card {
    height: 100%;
    padding: 24px 18px;
    text-align: center;

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

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

    border-radius: 16px;

    backdrop-filter: blur(10px);

    transition: all .3s ease;
}

.CRMS-aipower-card:hover {
    transform: translateY(-6px);

    border-color: rgba(139,92,246,.4);

    box-shadow:
        0 20px 40px rgba(0,0,0,.25);
}

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

.CRMS-aipower-icon-wrapper {
    width: 60px;
    height: 60px;

    margin: 0 auto 18px;

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

    border-radius: 14px;

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

    font-size: 26px;
}

.CRMS-aipower-icon-purple {
    color: #b26cff;
}

.CRMS-aipower-icon-teal {
    color: #22d3ee;
}

.CRMS-aipower-icon-yellow {
    color: #facc15;
}

.CRMS-aipower-icon-pink {
    color: #ec4899;
}

.CRMS-aipower-icon-indigo {
    color: #60a5fa;
}

/* ==========================================
   CARD TYPOGRAPHY
========================================== */

.CRMS-aipower-card-title {
    color: #ffffff;
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 10px;
}

.CRMS-aipower-card-desc {
    color: #94a3b8;
    font-size: 13px;
    line-height: 1.6;
    margin-bottom: 0;
}

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

@media (max-width: 991px) {

    .CRMS-aipower-section {
        padding: 50px 0;
    }

    .CRMS-aipower-content-col {
        text-align: center;
    }

    .CRMS-aipower-desc {
        max-width: 100%;
    }

    .CRMS-aipower-title {
        font-size: 1.9rem;
    }
}

@media (max-width: 767px) {

    .CRMS-aipower-title {
        font-size: 1.6rem;
    }

    .CRMS-aipower-card {
        padding: 20px 15px;
    }
}

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

.CRMS-section-wrapper {
    position: relative;
    padding: 70px 0;
    background: #fff;
    overflow: visible;
}

    .CRMS-section-wrapper::before {
        content: "";
        position: absolute;
        width: 550px;
        height: 550px;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        background: radial-gradient(circle, rgba(124,58,237,.10), transparent 70%);
        filter: blur(70px);
        pointer-events: none;
    }

/*===========================
        STICKY PANEL
===========================*/

.CRMS-sticky-content {
    position: sticky;
    top: 100px;
    background: #fff;
    padding: 40px;
    border-radius: 24px;
    border: 1px solid #edf2f7;
    box-shadow: 0 25px 70px rgba(15,23,42,.08);
    transition: .3s;
}

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

.CRMS-section-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 18px;
    background: #f3e8ff;
    color: #7c3aed;
    font-size: 12px;
    font-weight: 700;
    border-radius: 50px;
    letter-spacing: .8px;
    text-transform: uppercase;
    margin-bottom: 22px;
}

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

.CRMS-on-title {
    color: #0f172a;
    font-size: 3rem;
    font-weight: 800;
    line-height: 1.15;
    margin-bottom: 18px;
}

.CRMS-on-subtitle {
    color: #64748b;
    font-size: 17px;
    line-height: 1.8;
    margin-bottom: 35px;
}

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

.CRMS-on-list {
    list-style: none;
    padding: 0;
    margin: 0 0 35px;
}

.CRMS-on-list-item {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 18px;
    color: #334155;
    font-size: 16px;
    font-weight: 500;
}

.CRMS-on-check-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg,#7c3aed,#4f46e5);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    flex-shrink: 0;
    font-size: 15px;
    box-shadow: 0 10px 25px rgba(124,58,237,.25);
}

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

.CRMS-on-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
}

.CRMS-on-badge-btn {
    display: flex;
    align-items: center;
    gap: 14px;
    text-decoration: none;
    background: #0f172a;
    color: #fff;
    padding: 14px 22px;
    border-radius: 16px;
    transition: all .35s ease;
    box-shadow: 0 15px 35px rgba(15,23,42,.18);
}

    .CRMS-on-badge-btn:hover {
        color: #fff;
        transform: translateY(-6px);
        background: #7c3aed;
    }

    .CRMS-on-badge-btn i {
        font-size: 30px;
    }

.CRMS-on-badge-text {
    display: flex;
    flex-direction: column;
}

    .CRMS-on-badge-text span:first-child {
        font-size: 10px;
        opacity: .75;
        letter-spacing: .6px;
    }

    .CRMS-on-badge-text span:last-child {
        font-size: 15px;
        font-weight: 700;
    }
    /*===========================
            FAQ
===========================*/

.CRMS-faq-wrapper {
    padding-left: 20px;
}

.CRMS-faq-title {
    color: #0f172a;
    font-size: 3rem;
    font-weight: 800;
    line-height: 1.15;
    margin-bottom: 35px;
}

.CRMS-faq-title span {
    color: #7c3aed;
}

.CRMS-faq-accordion {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

/* FAQ Card */

.CRMS-faq-item {
    background: #fff;
    border: 1px solid #edf2f7;
    border-radius: 18px;
    padding: 22px 24px;
    transition: all .35s ease;
    cursor: pointer;
    overflow: hidden;
}

.CRMS-faq-item:hover {
    border-color: #7c3aed;
    box-shadow: 0 15px 35px rgba(124,58,237,.10);
}

.CRMS-faq-item.active {
    border-color: #7c3aed;
    box-shadow: 0 20px 40px rgba(124,58,237,.12);
}

/* Header */

.CRMS-faq-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
}

.CRMS-faq-header h6 {
    margin: 0;
    color: #0f172a;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.6;
    flex: 1;
}

.CRMS-faq-header span {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #f3e8ff;
    color: #7c3aed;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    font-weight: 600;
    transition: .35s;
}

.CRMS-faq-item.active .CRMS-faq-header span {
    background: #7c3aed;
    color: #fff;
    transform: rotate(45deg);
}

/* Answer */

.CRMS-faq-answer {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    margin-top: 0;
    color: #64748b;
    line-height: 1.9;
    font-size: 15px;
    transition:
        max-height .45s ease,
        opacity .35s ease,
        margin-top .35s ease;
}

.CRMS-faq-item.active .CRMS-faq-answer {
    max-height: 500px;
    opacity: 1;
    margin-top: 18px;
}

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

@media (max-width:1199px){

    .CRMS-on-title,
    .CRMS-faq-title{
        font-size:2.6rem;
    }

}

@media (max-width:991px){

    .CRMS-section-wrapper{
        padding:60px 0;
    }

    .CRMS-sticky-content{
        position:static;
        top:auto;
        padding:0;
        background:transparent;
        border:none;
        border-radius:0;
        box-shadow:none;
        margin-bottom:40px;
    }

    .CRMS-on-content{
        text-align:center;
    }

    .CRMS-section-badge{
        margin-left:auto;
        margin-right:auto;
    }

    .CRMS-on-title,
    .CRMS-faq-title{
        font-size:2.2rem;
        text-align:center;
    }

    .CRMS-on-subtitle{
        text-align:center;
    }

    .CRMS-on-list-item{
        justify-content:flex-start;
        text-align:left;
    }

    .CRMS-on-badges{
        justify-content:center;
    }

    .CRMS-faq-wrapper{
        padding-left:0;
    }

}

@media (max-width:767px){

    .CRMS-section-wrapper{
        padding:50px 0;
    }

    .CRMS-on-title,
    .CRMS-faq-title{
        font-size:1.9rem;
    }

    .CRMS-on-subtitle{
        font-size:15px;
    }

    .CRMS-faq-item{
        padding:18px;
    }

    .CRMS-faq-header h6{
        font-size:15px;
    }

    .CRMS-faq-header span{
        width:34px;
        height:34px;
        font-size:20px;
    }

    .CRMS-on-badge-btn{
        width:100%;
        justify-content:center;
    }

}

@media (max-width:575px){

    .CRMS-on-list-item{
        align-items:flex-start;
    }

    .CRMS-on-check-icon{
        width:36px;
        height:36px;
        font-size:14px;
    }

    .CRMS-faq-title,
    .CRMS-on-title{
        font-size:1.7rem;
    }

}

/* =========================================
           SMS CTA Section Custom CSS
           ========================================= */

.SMS-cta-section {
    font-family: 'Inter', sans-serif;
    /* Deep dark blue to purple gradient */
    background: linear-gradient(90deg, #0b0f19 0%, #1b1b3a 50%, #2d1b69 100%);
    position: relative;
    overflow: hidden;
    padding: 60px 0;
}

/* --- Left Image Overlay --- */
.SMS-cta-image-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 35%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}

.SMS-cta-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center right;
    /* Masking to fade image smoothly into the dark background */
    mask-image: linear-gradient(to right, rgba(0,0,0,1) 60%, rgba(0,0,0,0) 100%);
    -webkit-mask-image: linear-gradient(to right, rgba(0,0,0,1) 60%, rgba(0,0,0,0) 100%);
}

/* --- Content Container --- */
.SMS-cta-container {
    position: relative;
    z-index: 2; /* Sits above the image */
}

/* --- Typography --- */
.SMS-cta-title {
    color: #ffffff;
    font-size: 2.2rem;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 15px;
}

.SMS-cta-title-highlight {
    color: #8b5cf6; /* Brighter purple highlight */
}

.SMS-cta-desc {
    color: rgba(255, 255, 255, 0.85);
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 25px;
    max-width: 550px;
}

/* --- Feature Icon List --- */
.SMS-cta-features {
    display: flex;
    flex-wrap: wrap;
    gap: 25px;
    margin-bottom: 0;
}

.SMS-cta-feature-item {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #e5e7eb; /* Off-white text for features */
    font-size: 0.9rem;
    font-weight: 500;
}

    .SMS-cta-feature-item i {
        color: #d1d5db;
        font-size: 1rem;
        width: 20px;
        text-align: center;
    }

/* --- Buttons Wrapper --- */
.SMS-cta-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    gap: 15px;
    height: 100%;
}

/* Primary Purple Button */
.SMS-cta-btn-primary {
    background-color: #6d28d9;
    color: #ffffff;
    border: none;
    padding: 14px 32px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 1rem;
    box-shadow: 0 4px 14px rgba(109, 40, 217, 0.4);
    transition: all 0.3s ease;
    text-decoration: none;
    display: inline-block;
    min-width: 150px;
    text-align: center;
}

    .SMS-cta-btn-primary:hover {
        background-color: #7c3aed;
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(109, 40, 217, 0.5);
        color: #ffffff;
    }

/* Transparent Outline Button */
.SMS-cta-btn-outline {
    background-color: transparent;
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.4);
    padding: 14px 32px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 1rem;
    transition: all 0.3s ease;
    text-decoration: none;
    display: inline-block;
    min-width: 150px;
    text-align: center;
}

    .SMS-cta-btn-outline:hover {
        background-color: rgba(255, 255, 255, 0.1);
        border-color: #ffffff;
        transform: translateY(-2px);
        color: #ffffff;
    }

/* =========================================
           Responsive Adjustments
           ========================================= */
@media (max-width: 1200px) {
    .SMS-cta-image-wrapper {
        width: 30%;
    }
}

@media (max-width: 992px) {
    .SMS-cta-image-wrapper {
        width: 25%;
    }

    .SMS-cta-title {
        font-size: 1.8rem;
    }

    .SMS-cta-actions {
        justify-content: flex-start;
        margin-top: 25px;
    }
}

@media (max-width: 768px) {
    .SMS-cta-image-wrapper {
        width: 100%;
        height: 50%;
        top: 0;
        opacity: 0.2; /* Fade image heavily on mobile so text stays readable */
        mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%);
        -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%);
    }

    .SMS-cta-section {
        padding: 40px 0;
    }

    .SMS-cta-title {
        font-size: 1.6rem;
    }

    .SMS-cta-features {
        flex-direction: column;
        gap: 12px;
    }

    .SMS-cta-actions {
        justify-content: stretch;
    }

    .SMS-cta-btn-primary, .SMS-cta-btn-outline {
        flex: 1;
        min-width: 0;
        width: 100%;
    }
}



/* =========================================
   HELPDESK HERO SECTION
========================================= */

.HDS-hero-section {
    position: relative;
    overflow: hidden;
    min-height: 850px;
    display: flex;
    align-items: center;
    padding: 130px 0 0;
    background: radial-gradient(circle at top left, rgba(109, 40, 217, .25), transparent 40%), radial-gradient(circle at bottom right, rgba(139, 92, 246, .18), transparent 40%), linear-gradient(135deg, #070714 0%, #0c1023 50%, #120f2d 100%);
}

    .HDS-hero-section::before {
        content: '';
        position: absolute;
        width: 650px;
        height: 650px;
        top: -250px;
        left: -250px;
        background: radial-gradient(circle, rgba(139, 92, 246, .15), transparent 70%);
    }

    .HDS-hero-section::after {
        content: '';
        position: absolute;
        width: 650px;
        height: 650px;
        bottom: -250px;
        right: -250px;
        background: radial-gradient(circle, rgba(79, 70, 229, .15), transparent 70%);
    }

.HDS-hero-container {
    position: relative;
    z-index: 2;
    max-width: 1500px;
}

.HDS-hero-row {
    min-height: 700px;
}

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

.HDS-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: 50px;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.10);
    color: #c4b5fd;
    font-size: .82rem;
    font-weight: 600;
    letter-spacing: .5px;
    margin-bottom: 24px;
    backdrop-filter: blur(10px);
}

    .HDS-hero-badge i {
        color: #a78bfa;
    }

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

.HDS-hero-title {
    color: #fff;
    font-size: clamp(2.5rem, 4vw, 3.3rem);
    line-height: 1.12;
    font-weight: 800;
    letter-spacing: -1px;
    max-width: 650px;
    margin-bottom: 22px;
}

.HDS-hero-title-highlight {
    background: linear-gradient( 90deg, #c084fc, #8b5cf6, #6366f1 );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.HDS-hero-desc {
    color: #cbd5e1;
    font-size: 1.05rem;
    line-height: 1.8;
    max-width: 560px;
    margin-bottom: 35px;
}

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

.HDS-hero-actions {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
    margin-bottom: 40px;
}

.HDS-hero-btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 15px 32px;
    border-radius: 50px;
    background: linear-gradient(135deg,#8b5cf6,#6d28d9);
    color: #fff;
    font-weight: 600;
    text-decoration: none;
    transition: .3s ease;
}

    .HDS-hero-btn-primary:hover {
        transform: translateY(-4px);
        color: #fff;
        box-shadow: 0 15px 40px rgba(139,92,246,.35);
    }

.HDS-hero-btn-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 15px 32px;
    border-radius: 50px;
    border: 1px solid rgba(255,255,255,.18);
    color: #fff;
    text-decoration: none;
    transition: .3s ease;
}

    .HDS-hero-btn-outline:hover {
        background: rgba(255,255,255,.06);
        color: #fff;
    }

/* =========================================
   FEATURE BOXES
========================================= */

.HDS-hero-features-row {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
}

.HDS-hero-feature-box {
    padding: 18px 10px;
    border-radius: 18px;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.08);
    backdrop-filter: blur(10px);
    text-align: center;
    transition: .3s ease;
}

    .HDS-hero-feature-box:hover {
        transform: translateY(-5px);
        background: rgba(255,255,255,.08);
        border-color: rgba(139,92,246,.35);
    }

.HDS-hero-feature-icon {
    font-size: 1.4rem;
    color: #a78bfa;
    margin-bottom: 10px;
}

.HDS-hero-feature-text {
    color: #e5e7eb;
    font-size: .78rem;
    line-height: 1.4;
    font-weight: 500;
}

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

.HDS-hero-image-col {
    display: flex;
    justify-content: center;
    align-items: center;
}

.HDS-dashboard-wrapper {
    position: relative;
}

.HDS-dashboard-glow {
    position: absolute;
    width: 500px;
    height: 500px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle, rgba(139,92,246,.30), transparent 70%);
    filter: blur(45px);
}

.HDS-hero-image {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 850px;
    border-radius: 24px;
    box-shadow: 0 35px 90px rgba(0,0,0,.45);
    transition: .4s ease;
    transform: perspective(1800px) rotateY(-5deg);
}

    .HDS-hero-image:hover {
        transform: perspective(1800px) rotateY(0deg) translateY(-8px);
    }

/* =========================================
   TABLET
========================================= */

@media (max-width:991px) {

    .HDS-hero-section {
        min-height: auto;
        padding: 130px 0 40px;
    }

    .HDS-hero-title {
        font-size: 2.8rem;
    }

    .HDS-hero-image-col {
        margin-top: 50px;
    }

    .HDS-hero-features-row {
        grid-template-columns: repeat(3,1fr);
    }
}

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

@media (max-width:767px) {

    .HDS-hero-title {
        font-size: 2rem;
        line-height: 1.2;
    }

    .HDS-hero-desc {
        font-size: .95rem;
    }

    .HDS-hero-actions {
        flex-direction: column;
    }

    .HDS-hero-btn-primary,
    .HDS-hero-btn-outline {
        width: 100%;
        justify-content: center;
    }

    .HDS-hero-features-row {
        grid-template-columns: repeat(2,1fr);
    }
}

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

.HDS-solutions-section {
    position: relative;
    padding: 100px 0;
    background: #f8fafc;
}

    .HDS-solutions-section::after {
        content: '';
        position: absolute;
        right: 40px;
        bottom: 30px;
        width: 120px;
        height: 80px;
        background-image: radial-gradient(#cbd5e1 1px, transparent 1px);
        background-size: 12px 12px;
        opacity: .45;
    }

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

.HDS-solutions-content {
    max-width: 360px;
}

.HDS-solutions-badge {
    display: inline-block;
    padding: 6px 12px;
    background: #ede9fe;
    color: #7c3aed;
    font-size: 11px;
    font-weight: 700;
    border-radius: 50px;
    margin-bottom: 20px;
}

.HDS-solutions-title {
    font-size: 3rem;
    line-height: 1.15;
    font-weight: 800;
    color: #111827;
    margin-bottom: 20px;
}

.HDS-solutions-desc {
    color: #64748b;
    font-size: 16px;
    line-height: 1.7;
}

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

.HDS-comparison-card {
    position: relative;
    background: #fff;
    border: 1px solid #edf2f7;
    border-radius: 16px;
    display: flex;
    overflow: hidden;
    box-shadow: 0 10px 25px rgba(15,23,42,.04);
}

.HDS-side {
    width: 50%;
    padding: 28px 40px;
}

.HDS-side-left {
    border-right: 1px solid #edf2f7;
}

/* =========================================
   VS
========================================= */

.HDS-vs-circle {
    position: absolute;
    width: 62px;
    height: 62px;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    border-radius: 50%;
    background: #fff;
    border: 1px solid #edf2f7;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: #111827;
    z-index: 2;
    box-shadow: 0 4px 12px rgba(0,0,0,.05);
}

/* =========================================
   HEADERS
========================================= */

.HDS-side-heading {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 24px;
    font-size: 15px;
    font-weight: 700;
}

    .HDS-side-heading.danger {
        color: #ef4444;
    }

    .HDS-side-heading.success {
        color: #22c55e;
    }

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

.HDS-side ul {
    padding: 0;
    margin: 0;
    list-style: none;
}

    .HDS-side ul li {
        display: flex;
        align-items: center;
        gap: 12px;
        margin-bottom: 18px;
        color: #374151;
        font-size: 15px;
        font-weight: 500;
    }

        .HDS-side ul li:last-child {
            margin-bottom: 0;
        }

.HDS-side-left li i {
    color: #ef4444;
}

.HDS-side-right li i {
    color: #22c55e;
}

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

@media(max-width:991px) {

    .HDS-solutions-content {
        max-width: 100%;
        margin-bottom: 40px;
    }

    .HDS-solutions-title {
        font-size: 2.2rem;
    }

    .HDS-comparison-card {
        flex-direction: column;
    }

    .HDS-side {
        width: 100%;
    }

    .HDS-side-left {
        border-right: none;
        border-bottom: 1px solid #edf2f7;
    }

    .HDS-vs-circle {
        display: none;
    }
}

@media(max-width:767px) {

    .HDS-solutions-section {
        padding: 70px 0;
    }

    .HDS-solutions-title {
        font-size: 1.8rem;
    }

    .HDS-side {
        padding: 25px;
    }

        .HDS-side ul li {
            font-size: 14px;
        }
}

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

.HDS-features-section {
    position: relative;
    padding: 80px 0;
    background: linear-gradient( 180deg, #ffffff 0%, #faf8ff 100%);
    overflow: hidden;
}

/* =========================================
   HEADER
========================================= */

.HDS-features-header {
    text-align: center;
    max-width: 720px;
    margin: 0 auto 50px;
}

.HDS-features-badge {
    display: inline-block;
    padding: 6px 14px;
    border-radius: 50px;
    background: #f3e8ff;
    color: #7c3aed;
    font-size: .70rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 14px;
}

.HDS-features-title {
    font-size: clamp(1.8rem,3vw,2.5rem);
    line-height: 1.2;
    font-weight: 800;
    color: #111827;
    margin-bottom: 14px;
}

    .HDS-features-title span {
        background: linear-gradient( 90deg, #7c3aed, #4f46e5);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }

.HDS-features-subtitle {
    max-width: 600px;
    margin: auto;
    color: #64748b;
    font-size: .95rem;
    line-height: 1.7;
}

/* =========================================
   FEATURE CARDS
========================================= */

.HDS-features-card {
    position: relative;
    height: 100%;
    padding: 24px 20px;
    border-radius: 18px;
    background: #ffffff;
    border: 1px solid rgba(124,58,237,.08);
    transition: .3s ease;
    overflow: hidden;
}

    .HDS-features-card::before {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient( 135deg, rgba(124,58,237,.03), transparent);
        opacity: 0;
        transition: .3s;
    }

    .HDS-features-card:hover {
        transform: translateY(-6px);
        border-color: rgba(124,58,237,.15);
        box-shadow: 0 15px 35px rgba(124,58,237,.08);
    }

        .HDS-features-card:hover::before {
            opacity: 1;
        }

/* =========================================
   ICONS
========================================= */

.HDS-features-icon-box {
    width: 58px;
    height: 58px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    margin-bottom: 18px;
}

.HDS-icon-purple {
    background: #f3e8ff;
    color: #7c3aed;
}

.HDS-icon-blue {
    background: #dbeafe;
    color: #2563eb;
}

.HDS-icon-green {
    background: #dcfce7;
    color: #16a34a;
}

.HDS-icon-violet {
    background: #ede9fe;
    color: #6d28d9;
}

.HDS-icon-yellow {
    background: #fef3c7;
    color: #d97706;
}

.HDS-icon-rose {
    background: #ffe4e6;
    color: #e11d48;
}

.HDS-icon-orange {
    background: #ffedd5;
    color: #ea580c;
}

.HDS-icon-indigo {
    background: #e0e7ff;
    color: #4338ca;
}

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

.HDS-features-card-title {
    font-size: 1rem;
    font-weight: 700;
    color: #111827;
    margin-bottom: 8px;
}

.HDS-features-card-desc {
    color: #64748b;
    line-height: 1.6;
    font-size: .88rem;
    margin: 0;
}

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

@media(max-width:991px) {

    .HDS-features-section {
        padding: 70px 0;
    }

    .HDS-features-header {
        margin-bottom: 40px;
    }
}

@media(max-width:767px) {

    .HDS-features-section {
        padding: 60px 0;
    }

    .HDS-features-title {
        font-size: 1.8rem;
    }

    .HDS-features-card {
        padding: 20px 18px;
    }

    .HDS-features-icon-box {
        width: 52px;
        height: 52px;
        font-size: 1.2rem;
    }

    .HDS-features-card-title {
        font-size: .95rem;
    }

    .HDS-features-card-desc {
        font-size: .82rem;
    }
}


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

.HDS-process-section {
    padding: 80px 0;
    background: #fff;
    overflow: hidden;
}

/*========================================*/

.HDS-process-header {
    text-align: center;
    margin-bottom: 70px;
}

.HDS-process-title {
    font-size: 44px;
    font-weight: 700;
    color: #111827;
    margin: 18px 0;
}

.HDS-process-description {
    max-width: 900px;
    margin: auto;
    color: #6b7280;
    line-height: 1.8;
    font-size: 16px;
}

/*========================================
        WRAPPER
========================================*/

.HDS-process-wrapper {
    position: relative;
    padding: 20px 0 40px;
}

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

.HDS-process-line {
    position: absolute;
    left: 8%;
    right: 8%;
    top: 44px;
    height: 4px;
    z-index: 0;
    background: repeating-linear-gradient( to right, #8b5cf6 0, #8b5cf6 14px, transparent 14px, transparent 24px );
}

    .HDS-process-line::before,
    .HDS-process-line::after {
        content: "";
        position: absolute;
        width: 16px;
        height: 16px;
        background: #8b5cf6;
        border-radius: 50%;
        top: 50%;
        transform: translateY(-50%);
    }

    .HDS-process-line::before {
        left: -8px;
    }

    .HDS-process-line::after {
        right: -8px;
    }

/*========================================
        STEP
========================================*/

.HDS-process-step {
    position: relative;
    z-index: 5;
    text-align: center;
}

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

.HDS-process-icon-wrapper {
    width: 88px;
    height: 88px;
    margin: auto;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 34px;
    color: #fff;
    position: relative;
    transition: .35s;
    border: 8px solid #fff;
    box-shadow: 0 18px 45px rgba(0,0,0,.12);
}

/* Hover */

.HDS-process-step:hover .HDS-process-icon-wrapper {
    transform: translateY(-8px) scale(1.06);
}

/* Glow */

.HDS-process-icon-wrapper::before {
    content: "";
    position: absolute;
    inset: -12px;
    border-radius: 50%;
    z-index: -1;
    opacity: .18;
}

/* Connector Dot */

.HDS-process-icon-wrapper::after {
    content: "";
    position: absolute;
    bottom: -23px;
    left: 50%;
    transform: translateX(-50%);
    width: 18px;
    height: 18px;
    background: #fff;
    border-radius: 50%;
    border: 4px solid #8b5cf6;
}

/*========================================
        COLORS
========================================*/

.HDS-process-step-blue .HDS-process-icon-wrapper {
    background: linear-gradient(135deg,#2563eb,#60a5fa);
}

    .HDS-process-step-blue .HDS-process-icon-wrapper::before {
        background: #2563eb;
    }

.HDS-process-step-purple .HDS-process-icon-wrapper {
    background: linear-gradient(135deg,#7c3aed,#a855f7);
}

    .HDS-process-step-purple .HDS-process-icon-wrapper::before {
        background: #7c3aed;
    }

.HDS-process-step-orange .HDS-process-icon-wrapper {
    background: linear-gradient(135deg,#f97316,#fb923c);
}

    .HDS-process-step-orange .HDS-process-icon-wrapper::before {
        background: #f97316;
    }

.HDS-process-step-green .HDS-process-icon-wrapper {
    background: linear-gradient(135deg,#16a34a,#4ade80);
}

    .HDS-process-step-green .HDS-process-icon-wrapper::before {
        background: #16a34a;
    }

.HDS-process-step-pink .HDS-process-icon-wrapper {
    background: linear-gradient(135deg,#ec4899,#f472b6);
}

    .HDS-process-step-pink .HDS-process-icon-wrapper::before {
        background: #ec4899;
    }

/*========================================
        NUMBER
========================================*/

.HDS-process-number {
    display: inline-block;
    margin-top: 28px;
    margin-bottom: 10px;
    font-size: 14px;
    font-weight: 700;
    color: #8b5cf6;
    letter-spacing: 1px;
}

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

.HDS-process-step-title {
    font-size: 18px;
    font-weight: 700;
    color: #111827;
    margin-bottom: 12px;
}

/*========================================
        DESCRIPTION
========================================*/

.HDS-process-step-desc {
    font-size: 14px;
    color: #6b7280;
    line-height: 1.7;
    max-width: 180px;
    margin: auto;
}

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

@media(max-width:992px) {

    .HDS-process-line {
        display: none;
    }

    .HDS-process-icon-wrapper::after {
        display: none;
    }

    .HDS-process-title {
        font-size: 36px;
    }

    .HDS-process-step {
        margin-bottom: 45px;
    }
}

@media(max-width:768px) {

    .HDS-process-title {
        font-size: 30px;
    }

    .HDS-process-description {
        font-size: 15px;
    }

    .HDS-process-icon-wrapper {
        width: 72px;
        height: 72px;
        font-size: 28px;
    }

    .HDS-process-step-title {
        font-size: 17px;
    }
}
/*========================
  HDS-WHY Choose use
========================*/
.HDS-whyus-section {
    background-color: #f8fafc
}

.HDS-whyus-label {
    color: #6a4bff; /* Purple label color */
    font-weight: 600;
    font-size: 0.85rem;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.HDS-whyus-heading {
    color: #1a1a1a;
    font-weight: 700;
    font-size: 2.2rem;
    line-height: 1.2;
}

/* List styling */
.HDS-whyus-list {
    color: #333;
    font-weight: 500;
    font-size: 1rem;
}

.HDS-whyus-list li {
    display: flex;
    align-items: center;
}

.HDS-whyus-check {
    color: #00c853; /* Bright green checkmark */
    font-size: 1.2rem;
    margin-right: 12px;
}

/* --- Card Container Styling --- */

.HDS-whyus-cards-row {
    justify-content: center; /* Centers cards if screen is small */
}

.HDS-whyus-col {
    min-width: 150px; /* Prevents cards from becoming too squished */
}

.HDS-whyus-card {
    padding: 24px 15px;
    border-radius: 16px;
    height: 100%;
    min-height: 190px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    transition: transform 0.2s ease;
}

.HDS-whyus-card:hover {
    transform: translateY(-3px);
}

.HDS-whyus-stat {
    font-size: 2.2rem;
    font-weight: 700;
    margin-bottom: 12px;
}

.HDS-whyus-arrow {
    font-size: 1.8rem;
    vertical-align: middle;
    margin-left: 2px;
}

.HDS-whyus-desc {
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.4;
    color: #1a1a1a;
}

/* --- Individual Card Colors --- */

/* Purple Card */
.HDS-whyus-purple {
    background-color: #f4f0ff;
}
.HDS-whyus-purple .HDS-whyus-stat {
    color: #6a4bff;
}

/* Green Card */
.HDS-whyus-green {
    background-color: #e8f7ef;
}
.HDS-whyus-green .HDS-whyus-stat {
    color: #00c853;
}

/* Orange Card */
.HDS-whyus-orange {
    background-color: #fff5ea;
}
.HDS-whyus-orange .HDS-whyus-stat {
    color: #ff9100;
}

/* Blue Card */
.HDS-whyus-blue {
    background-color: #ebf4ff;
}
.HDS-whyus-blue .HDS-whyus-stat {
    color: #2979ff;
}

/* --- Responsive Tweaks --- */
@media (max-width: 991px) {
    .HDS-whyus-heading {
        font-size: 1.8rem;
    }
    .HDS-whyus-col {
        flex: 0 0 auto;
        width: 50%; /* 2 cards per row on tablets */
    }
}

@media (max-width: 576px) {
    .HDS-whyus-col {
        width: 100%; /* 1 card per row on mobile */
    }
}

.HDS-faq-cta-section {
    position: relative;
    padding: 120px 0;
    background: #f8f9ff;
    overflow: hidden;
}

    .HDS-faq-cta-section::before {
        content: "";
        position: absolute;
        width: 500px;
        height: 500px;
        background: rgba(110, 67, 255, .08);
        border-radius: 50%;
        filter: blur(120px);
        top: -150px;
        left: -100px;
    }

    .HDS-faq-cta-section .container {
        max-width: 1400px;
        margin: auto;
        padding: 0 20px;
        display: grid;
        grid-template-columns: 1.15fr .85fr;
        gap: 40px;
        align-items: stretch;
    }

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

.HDS-faq-wrapper {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.HDS-faq-header {
    margin-bottom: 35px;
}

    .HDS-faq-header span {
        display: inline-block;
        color: #6c3cff;
        font-weight: 700;
        letter-spacing: 1px;
        margin-bottom: 10px;
    }

    .HDS-faq-header h2 {
        font-size: 48px;
        line-height: 1.1;
        margin-bottom: 15px;
        font-weight: 800;
        color: #101828;
    }

    .HDS-faq-header p {
        color: #667085;
        max-width: 600px;
    }

.HDS-faq-list {
    display: flex;
    flex-direction: column;
    gap: 18px;
    flex: 1;
}

.HDS-faq-item {
    background: rgba(255,255,255,.8);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255,255,255,.8);
    border-radius: 22px;
    transition: .35s;
    overflow: hidden;
}

    .HDS-faq-item:hover {
        transform: translateY(-4px);
        box-shadow: 0 20px 40px rgba(0,0,0,.06);
    }

    .HDS-faq-item.active {
        border-color: rgba(108,60,255,.2);
        box-shadow: 0 25px 50px rgba(108,60,255,.10);
    }

.HDS-faq-question {
    width: 100%;
    border: none;
    background: transparent;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 26px 28px;
    font-size: 18px;
    font-weight: 600;
    color: #111827;
}

    .HDS-faq-question i {
        width: 38px;
        height: 38px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #f3f0ff;
        color: #6c3cff;
        border-radius: 50%;
        font-style: normal;
        transition: .35s;
    }

.HDS-faq-item.active .HDS-faq-question i {
    transform: rotate(45deg);
    background: #6c3cff;
    color: white;
}

.HDS-faq-answer {
    height: 0;
    overflow: hidden;
    transition: height .4s ease;
}

    .HDS-faq-answer p {
        padding: 0 28px 28px;
        margin: 0;
        color: #667085;
        line-height: 1.8;
    }

/* =======================
   CTA
======================= */
.HDS-cta-business {
    margin-top: 30px;
    padding-top: 25px;
    border-top: 1px solid rgba(255,255,255,.15);
}

    .HDS-cta-business h4 {
        color: #fff;
        font-size: 24px;
        font-weight: 700;
        margin-bottom: 15px;
    }

    .HDS-cta-business p {
        color: rgba(255,255,255,.9);
        font-size: 16px;
        line-height: 1.8;
        margin-bottom: 0;
    }
.HDS-cta-wrapper {
    position: relative;
    background: linear-gradient( 135deg, #5b2eff, #7c3dff, #a855f7 );
    border-radius: 32px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 100%;
    height: 100%;
}

    .HDS-cta-wrapper::before {
        content: "";
        position: absolute;
        width: 350px;
        height: 350px;
        background: rgba(255,255,255,.12);
        border-radius: 50%;
        top: -120px;
        right: -120px;
        filter: blur(20px);
    }

    .HDS-cta-wrapper::after {
        content: "";
        position: absolute;
        width: 250px;
        height: 250px;
        background: rgba(255,255,255,.08);
        border-radius: 50%;
        bottom: -100px;
        left: -80px;
    }

.HDS-cta-content {
    position: relative;
    z-index: 2;
    padding: 55px;
}

.HDS-cta-badge {
    display: inline-block;
    padding: 10px 18px;
    background: rgba(255,255,255,.15);
    border: 1px solid rgba(255,255,255,.25);
    border-radius: 999px;
    color: white;
    font-size: 14px;
    margin-bottom: 25px;
}

.HDS-cta-content h2 {
    font-size: 38px;
    line-height: 1.1;
    color: white;
    margin-bottom: 20px;
    font-weight: 800;
}

.HDS-cta-content p {
    color: rgba(255,255,255,.85);
    line-height: 1.8;
    margin-bottom: 15px;
}

.HDS-cta-buttons {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
    margin-bottom: 30px;
}

.HDS-cta-primary,
.HDS-cta-secondary {
    text-decoration: none;
    padding: 16px 28px;
    border-radius: 14px;
    font-weight: 600;
    transition: .3s;
}

.HDS-cta-primary {
    background: white;
    color: #6c3cff;
}

    .HDS-cta-primary:hover {
        transform: translateY(-4px);
    }

.HDS-cta-secondary {
    border: 1px solid rgba(255,255,255,.25);
    color: white;
}

    .HDS-cta-secondary:hover {
        background: rgba(255,255,255,.12);
    }

.HDS-cta-features {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    color: rgba(255,255,255,.9);
}

.HDS-cta-bot {
    text-align: center;
    padding: 0 20px 20px;
    position: relative;
    z-index: 2;
}

    .HDS-cta-bot img {
        width: 220px;
        animation: HDSFloat 4s ease-in-out infinite;
    }

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

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

@media(max-width:991px) {

    .HDS-faq-cta-section .container {
        grid-template-columns: 1fr;
    }

    .HDS-faq-header h2,
    .HDS-cta-content h2 {
        font-size: 36px;
    }

    .HDS-cta-content {
        padding: 40px;
    }
}


/*===============================
     E-Commerce Software
===============================*/
/* ===================================
   HERO SECTION
=================================== */

.Ecommerce-software-hero {
    position: relative;
    overflow: hidden;
    padding: 130px 0 80px;
    background: radial-gradient(circle at 20% 20%, rgba(108, 92, 231, .18), transparent 30%), radial-gradient(circle at 80% 30%, rgba(167, 139, 250, .15), transparent 35%), linear-gradient( 135deg, #060816 0%, #0d1224 50%, #141b34 100%);
}

/* ===================================
   GLOW EFFECTS
=================================== */

.hero-glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(100px);
    pointer-events: none;
}

.hero-glow-1 {
    width: 300px;
    height: 300px;
    background: #7c3aed;
    top: -100px;
    left: -100px;
    opacity: .20;
}

.hero-glow-2 {
    width: 350px;
    height: 350px;
    background: #5b7fff;
    bottom: -120px;
    right: -120px;
    opacity: .15;
}

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

.ecommerce-hero-content {
    position: relative;
    z-index: 5;
    max-width: 650px;
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    padding: 8px 18px;
    border-radius: 50px;
    margin-bottom: 20px;
    background: rgba(255, 255, 255, .08);
    backdrop-filter: blur(20px);
    color: #b8bdfd;
    font-size: 13px;
    font-weight: 600;
    border: 1px solid rgba(255, 255, 255, .08);
}

.ecommerce-hero-title {
    font-size: clamp(2.5rem, 4vw, 3.6rem);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -1px;
    color: #fff;
    margin-bottom: 18px;
}

.text-highlight {
    background: linear-gradient( 135deg, #7c3aed, #a855f7, #c084fc );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.ecommerce-hero-desc {
    color: rgba(255, 255, 255, .75);
    font-size: 16px;
    line-height: 1.7;
    max-width: 540px;
    margin-bottom: 30px;
}

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

.ecommerce-hero-buttons {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.ecommerce-btn-primary {
    background: linear-gradient( 135deg, #7c3aed, #a855f7 );
    border: none;
    color: #fff;
    padding: 13px 28px;
    border-radius: 14px;
    font-size: 15px;
    font-weight: 600;
    transition: .4s ease;
}

    .ecommerce-btn-primary:hover {
        transform: translateY(-4px);
        color: #fff;
    }

.ecommerce-btn-outline {
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .10);
    color: #fff;
    padding: 13px 28px;
    border-radius: 14px;
    font-size: 15px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 10px;
    backdrop-filter: blur(20px);
    transition: .4s ease;
}

    .ecommerce-btn-outline:hover {
        background: rgba(255, 255, 255, .12);
        color: #fff;
    }

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

.ecommerce-hero-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-top: 35px;
}

.ecommerce-stat-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px;
    border-radius: 16px;
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(255, 255, 255, .08);
    backdrop-filter: blur(20px);
    transition: .4s ease;
}

    .ecommerce-stat-item:hover {
        transform: translateY(-4px);
        border-color: rgba(168, 85, 247, .35);
    }

.ecommerce-stat-icon {
    width: 42px;
    height: 42px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: linear-gradient( 135deg, #7c3aed, #a855f7 );
    color: #fff;
    font-size: 15px;
}

.ecommerce-stat-number {
    display: block;
    color: #fff;
    font-size: 18px;
    font-weight: 700;
    line-height: 1;
}

.ecommerce-stat-label {
    display: block;
    color: rgba(255, 255, 255, .65);
    font-size: 12px;
    margin-top: 3px;
}

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

.ecommerce-hero-image-wrapper {
    position: relative;
    text-align: center;
}

.ecommerce-hero-img {
    max-width: 92%;
    height: auto;
    animation: floatImage 6s ease-in-out infinite;
}

@keyframes floatImage {

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

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

/* ===================================
   TABLET
=================================== */

@media (max-width: 991px) {

    .Ecommerce-software-hero {
        padding: 70px 0;
    }

    .ecommerce-hero-content {
        text-align: center;
        max-width: 100%;
    }

    .ecommerce-hero-desc {
        margin-left: auto;
        margin-right: auto;
    }

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

    .ecommerce-hero-stats {
        grid-template-columns: repeat(2, 1fr);
        margin-top: 30px;
    }

    .ecommerce-hero-image-wrapper {
        margin-top: 50px;
    }
}

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

@media (max-width: 576px) {

    .Ecommerce-software-hero {
        padding: 60px 0;
    }

    .hero-badge {
        font-size: 12px;
    }

    .ecommerce-hero-title {
        font-size: 2rem;
        line-height: 1.2;
    }

    .ecommerce-hero-desc {
        font-size: 14px;
        line-height: 1.6;
    }

    .ecommerce-hero-buttons {
        flex-direction: column;
    }

    .ecommerce-btn-primary,
    .ecommerce-btn-outline {
        width: 100%;
        justify-content: center;
    }

    .ecommerce-hero-stats {
        grid-template-columns: 1fr;
        gap: 10px;
        margin-top: 25px;
    }

    .ecommerce-stat-item {
        padding: 12px;
    }

    .ecommerce-stat-number {
        font-size: 17px;
    }
}

/* =====================================
   ECOMMERCE SOLUTIONS
===================================== */

.ecommerce-solutions {
    position: relative;
    padding: 50px 0;
    background: #f8fafc;
    overflow: hidden;
}

    /* =====================================
   CONTAINER
===================================== */

    .ecommerce-solutions .container {
        max-width: 1320px;
    }

/* =====================================
   HEADER
===================================== */

.ecommerce-solutions-header {
    max-width: 760px;
    margin: 0 auto 60px;
    text-align: center;
}

.ecommerce-solutions-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 18px;
    border-radius: 50px;
    background: #ede9fe;
    color: #6d28d9;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 18px;
}

.ecommerce-solutions-header h2 {
    font-size: 42px;
    font-weight: 800;
    line-height: 1.15;
    color: #111827;
    margin-bottom: 18px;
}

    .ecommerce-solutions-header h2 span {
        display: block;
        background: linear-gradient( 135deg, #7c3aed, #8b5cf6 );
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }

.ecommerce-solutions-header p {
    max-width: 650px;
    margin: auto;
    font-size: 16px;
    line-height: 1.8;
    color: #64748b;
}

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

.ecommerce-solutions-grid {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 24px;
}

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

.ecommerce-solutions-card {
    position: relative;
    background: #fff;
    border: 1px solid #edf2f7;
    border-radius: 22px;
    padding: 28px;
    min-height: 220px;
    transition: all .35s ease;
    overflow: hidden;
}

    .ecommerce-solutions-card::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 4px;
        background: linear-gradient( 90deg, #7c3aed, #8b5cf6 );
    }

    .ecommerce-solutions-card:hover {
        transform: translateY(-8px);
        border-color: #ddd6fe;
        box-shadow: 0 20px 40px rgba(124,58,237,.10);
    }

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

.solution-icon {
    width: 58px;
    height: 58px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    margin-bottom: 18px;
}

/* Individual Colors */

.ecommerce-solutions-card:nth-child(1) .solution-icon {
    background: #ede9fe;
    color: #7c3aed;
}

.ecommerce-solutions-card:nth-child(2) .solution-icon {
    background: #dbeafe;
    color: #2563eb;
}

.ecommerce-solutions-card:nth-child(3) .solution-icon {
    background: #dcfce7;
    color: #16a34a;
}

.ecommerce-solutions-card:nth-child(4) .solution-icon {
    background: #fef3c7;
    color: #d97706;
}

.ecommerce-solutions-card:nth-child(5) .solution-icon {
    background: #ffe4e6;
    color: #e11d48;
}

.ecommerce-solutions-card:nth-child(6) .solution-icon {
    background: #cffafe;
    color: #0891b2;
}

.ecommerce-solutions-card:nth-child(7) .solution-icon {
    background: #fae8ff;
    color: #c026d3;
}

.ecommerce-solutions-card:nth-child(8) .solution-icon {
    background: #e0f2fe;
    color: #0284c7;
}

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

.ecommerce-solutions-card h3 {
    font-size: 21px;
    font-weight: 700;
    color: #111827;
    margin-bottom: 12px;
    line-height: 1.3;
}

.ecommerce-solutions-card p {
    font-size: 15px;
    line-height: 1.7;
    color: #64748b;
    margin: 0;
}

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

.ecommerce-solutions-card:hover .solution-icon {
    transform: scale(1.08);
    transition: .3s ease;
}

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

@media (max-width:1200px) {

    .ecommerce-solutions-grid {
        grid-template-columns: repeat(3,1fr);
    }
}

@media (max-width:992px) {

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

    .ecommerce-solutions-header h2 {
        font-size: 36px;
    }
}

@media (max-width:768px) {

    .ecommerce-solutions {
        padding: 70px 0;
    }

    .ecommerce-solutions-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .ecommerce-solutions-header h2 {
        font-size: 30px;
    }

    .ecommerce-solutions-card {
        min-height: auto;
    }
}


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

.ecom-benefits-section {
    position: relative;
    padding: 110px 0;
    background: linear-gradient(180deg,#ffffff 0%,#f8f9ff 100%);
    overflow: hidden;
}

    .ecom-benefits-section::before {
        content: "";
        position: absolute;
        width: 500px;
        height: 500px;
        left: -180px;
        top: -180px;
        border-radius: 50%;
        background: radial-gradient(circle,rgba(124,58,237,.12),transparent 70%);
        filter: blur(70px);
    }

    .ecom-benefits-section::after {
        content: "";
        position: absolute;
        width: 550px;
        height: 550px;
        right: -220px;
        bottom: -220px;
        border-radius: 50%;
        background: radial-gradient(circle,rgba(59,130,246,.10),transparent 70%);
        filter: blur(80px);
    }

    .ecom-benefits-section .container {
        position: relative;
        z-index: 2;
    }

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

.ecom-benefits-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 24px;
    background: #ede9fe;
    color: #6d28d9;
    border-radius: 40px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 20px;
}

.ecom-benefits-title {
    font-size: 3rem;
    font-weight: 800;
    color: #111827;
    line-height: 1.2;
    margin-bottom: 18px;
}

    .ecom-benefits-title span {
        color: #6d28d9;
    }

.ecom-benefits-subtitle {
    max-width: 760px;
    margin: auto;
    color: #64748b;
    font-size: 17px;
    line-height: 1.9;
}

/*=========================================
            BENEFIT CARD
=========================================*/

.ecom-benefits-card {
    display: flex;
    align-items: center;
    gap: 22px;
    padding: 24px;
    background: #ffffff;
    border-radius: 22px;
    margin-bottom: 22px;
    border: 1px solid #eef2ff;
    box-shadow: 0 15px 45px rgba(15,23,42,.07);
    transition: .35s;
    position: relative;
    overflow: hidden;
}

    .ecom-benefits-card::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(135deg,rgba(124,58,237,.05),transparent);
        opacity: 0;
        transition: .35s;
    }

    .ecom-benefits-card > * {
        position: relative;
        z-index: 2;
    }

    .ecom-benefits-card:hover {
        transform: translateY(-8px);
        box-shadow: 0 28px 60px rgba(124,58,237,.16);
        border-color: #d8b4fe;
    }

        .ecom-benefits-card:hover::before {
            opacity: 1;
        }

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

.ecom-benefits-icon {
    width: 72px;
    height: 72px;
    min-width: 72px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 28px;
    transition: .35s;
}

.ecom-benefits-card:hover .ecom-benefits-icon {
    transform: scale(1.08) rotate(-5deg);
}

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

.ecom-benefits-content {
    flex: 1;
}

    .ecom-benefits-content h5 {
        font-size: 20px;
        font-weight: 700;
        color: #111827;
        margin-bottom: 8px;
    }

    .ecom-benefits-content p {
        margin: 0;
        color: #64748b;
        line-height: 1.8;
        font-size: 15px;
    }

.ecom-benefits-card:hover h5 {
    color: #6d28d9;
}
/*=========================================
        BENEFIT ICON COLORS
=========================================*/

.ecom-benefits-icon {
    color: #fff;
}

    /* Purple */

    .ecom-benefits-icon.ecom-benefits-purple {
        background: linear-gradient(135deg,#8b5cf6,#6d28d9);
    }

    /* Green */

    .ecom-benefits-icon.ecom-benefits-green {
        background: linear-gradient(135deg,#34d399,#10b981);
    }

    /* Blue */

    .ecom-benefits-icon.ecom-benefits-blue {
        background: linear-gradient(135deg,#60a5fa,#2563eb);
    }

    /* Pink */

    .ecom-benefits-icon.ecom-benefits-pink {
        background: linear-gradient(135deg,#ec4899,#d946ef);
    }

    /* Orange */

    .ecom-benefits-icon.ecom-benefits-orange {
        background: linear-gradient(135deg,#fb923c,#f97316);
    }

    /* Rose */

    .ecom-benefits-icon.ecom-benefits-rose {
        background: linear-gradient(135deg,#fb7185,#ec4899);
    }

    /* Amber */

    .ecom-benefits-icon.ecom-benefits-amber {
        background: linear-gradient(135deg,#fbbf24,#f59e0b);
    }

    /* Cyan */

    .ecom-benefits-icon.ecom-benefits-cyan {
        background: linear-gradient(135deg,#22d3ee,#06b6d4);
    }

    /* Violet */

    .ecom-benefits-icon.ecom-benefits-violet {
        background: linear-gradient(135deg,#a855f7,#7c3aed);
    }

    /* Emerald */

    .ecom-benefits-icon.ecom-benefits-emerald {
        background: linear-gradient(135deg,#4ade80,#16a34a);
    }

    .ecom-benefits-icon i {
        color: #fff !important;
    }
/*=========================================
        ICON SHADOWS
=========================================*/

.ecom-benefits-card:hover .ecom-benefits-purple {
    box-shadow: 0 15px 35px rgba(124,58,237,.35);
}

.ecom-benefits-card:hover .ecom-benefits-green {
    box-shadow: 0 15px 35px rgba(16,185,129,.35);
}

.ecom-benefits-card:hover .ecom-benefits-blue {
    box-shadow: 0 15px 35px rgba(37,99,235,.35);
}

.ecom-benefits-card:hover .ecom-benefits-pink {
    box-shadow: 0 15px 35px rgba(236,72,153,.35);
}

.ecom-benefits-card:hover .ecom-benefits-orange {
    box-shadow: 0 15px 35px rgba(249,115,22,.35);
}

.ecom-benefits-card:hover .ecom-benefits-rose {
    box-shadow: 0 15px 35px rgba(244,63,94,.35);
}

.ecom-benefits-card:hover .ecom-benefits-amber {
    box-shadow: 0 15px 35px rgba(245,158,11,.35);
}

.ecom-benefits-card:hover .ecom-benefits-cyan {
    box-shadow: 0 15px 35px rgba(6,182,212,.35);
}

.ecom-benefits-card:hover .ecom-benefits-violet {
    box-shadow: 0 15px 35px rgba(139,92,246,.35);
}

.ecom-benefits-card:hover .ecom-benefits-emerald {
    box-shadow: 0 15px 35px rgba(22,163,74,.35);
}

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

.ecom-benefits-card{
    animation:ecomBenefitsFade .8s ease both;
}

@keyframes ecomBenefitsFade{

    from{
        opacity:0;
        transform:translateY(30px);
    }

    to{
        opacity:1;
        transform:translateY(0);
    }

}

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

@media(max-width:1199px){

    .ecom-benefits-title{
        font-size:2.6rem;
    }

}

@media(max-width:991px){

    .ecom-benefits-section{
        padding:80px 0;
    }

    .ecom-benefits-title{
        font-size:2.2rem;
    }

    .ecom-benefits-subtitle{
        font-size:16px;
    }

    .ecom-benefits-card{
        padding:20px;
        gap:18px;
    }

    .ecom-benefits-icon{
        width:65px;
        height:65px;
        min-width:65px;
        font-size:24px;
    }

    .ecom-benefits-content h5{
        font-size:18px;
    }

}

@media(max-width:767px){

    .ecom-benefits-section{
        padding:65px 0;
    }

    .ecom-benefits-title{
        font-size:1.9rem;
    }

    .ecom-benefits-card{
        padding:18px;
        border-radius:18px;
    }

    .ecom-benefits-icon{
        width:58px;
        height:58px;
        min-width:58px;
        font-size:22px;
        border-radius:16px;
    }

    .ecom-benefits-content h5{
        font-size:17px;
    }

    .ecom-benefits-content p{
        font-size:14px;
        line-height:1.7;
    }

}

@media(max-width:575px){

    .ecom-benefits-title{
        font-size:1.6rem;
    }

    .ecom-benefits-badge{
        font-size:11px;
        padding:8px 18px;
    }

    .ecom-benefits-card{
        gap:15px;
        padding:16px;
        margin-bottom:16px;
    }

    .ecom-benefits-icon{
        width:52px;
        height:52px;
        min-width:52px;
        font-size:20px;
    }

    .ecom-benefits-content h5{
        font-size:16px;
    }

    .ecom-benefits-content p{
        font-size:13.5px;
    }

}


/*=============================
    E-Commerce shocase
=============================*/
/* ===============================
   ECOMMERCE SHOWCASE SECTION
================================= */

.ecom-showcase-section {
    padding: 40px 0;
    background: #ffffff;
}

/* HEADER */

.showcase-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
}

.showcase-header h2 {
    font-size: 48px;
    font-weight: 800;
    color: #111827;
    margin-bottom: 8px;
    line-height: 1.1;
}

.showcase-header p {
    color: #6b7280;
    font-size: 16px;
    margin: 0;
}

.view-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    padding: 14px 24px;
    border-radius: 12px;
    background: #ffffff;
    border: 2px solid #d8ccff;
    color: #6e58ff;
    font-weight: 600;
    transition: all .3s ease;
}

.view-btn:hover {
    background: #6e58ff;
    border-color: #6e58ff;
    color: #fff;
    transform: translateY(-2px);
}

/* WRAPPER */

.showcase-wrapper {
    background: #f7f4ff;
    border-radius: 28px;
    padding: 35px;
    position: relative;
}

/* SLIDER BUTTONS */

/*.slider-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 46px;
    height: 46px;
    border: none;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 8px 20px rgba(0,0,0,.08);
    z-index: 2;
    transition: all .3s ease;
}

.slider-btn:hover {
    background: #6e58ff;
    color: #fff;
}

.slider-btn.left {
    left: -22px;
}

.slider-btn.right {
    right: -22px;
}*/

/* PROJECT ROW */

.projects-row {
    display: flex;
    gap: 20px;
}

/* CARD */

.project-card {
    flex: 1;
    background: #fff;
    border-radius: 18px;
    overflow: hidden;
    transition: all .35s ease;
    box-shadow: 0 5px 20px rgba(0,0,0,.05);
}

.project-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 40px rgba(0,0,0,.08);
}

/* IMAGE */

.project-image {
    padding: 15px;
    height: 200px;
    background: #f8f8f8;
    overflow: hidden;
}

.project-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: .5s;
}

.project-card:hover img {
    transform: scale(1.05);
}

/* CONTENT */

.project-content {
    padding: 18px;
}

.project-content h4 {
    font-size: 18px;
    font-weight: 700;
    color: #111827;
    margin: 12px 0 8px;
    line-height: 1.4;
}

.project-content p {
    font-size: 14px;
    color: #6b7280;
    margin-bottom: 18px;
}

/* TAGS */

.tag {
    display: inline-flex;
    align-items: center;
    padding: 5px 12px;
    border-radius: 30px;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .5px;
}

.purple {
    background: #8b5cf6;
}

.blue {
    background: #0ea5e9;
}

.orange {
    background: #f97316;
}

.violet {
    background: #a855f7;
}

/* STATS */

.stats {
    display: flex;
    justify-content: space-between;
    border-top: 1px solid #eeeeee;
    padding-top: 15px;
}

.stats strong {
    display: block;
    font-size: 24px;
    font-weight: 800;
    color: #111827;
    line-height: 1;
}

.stats span {
    display: block;
    font-size: 12px;
    color: #6b7280;
    margin-top: 6px;
}

/* TABLET */

@media (max-width: 991px) {

    .showcase-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
    }

    .showcase-header h2 {
        font-size: 38px;
    }

    .projects-row {
        flex-wrap: wrap;
    }

    .project-card {
        flex: 0 0 calc(50% - 10px);
    }

    .slider-btn {
        display: none;
    }
}

/* MOBILE */

@media (max-width: 767px) {

    .ecom-showcase-section {
        padding: 70px 0;
    }

    .showcase-wrapper {
        padding: 20px;
    }

    .showcase-header h2 {
        font-size: 30px;
    }

    .project-card {
        flex: 0 0 100%;
    }

    .project-image {
        height: 180px;
    }

    .stats strong {
        font-size: 20px;
    }
}

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

.ecommerce-services-section {
    background-color: #ffffff;
    padding: 80px 0;
}

/* --- Section Header --- */
.ecommerce-services-header {
    margin-bottom: 50px;
}

/* Services Pill */
.ecommerce-services-pill {
    display: inline-block;
    background-color: #f0f0ff;
    color: #5d3bfd;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    padding: 6px 20px;
    border-radius: 50px;
    border: 1px solid #e0daff;
    text-transform: uppercase;
    margin-bottom: 15px;
}

.ecommerce-services-title {
    font-size: 2.5rem;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 10px;
}

.ecommerce-services-subtitle {
    font-size: 1rem;
    color: #6b7280;
    max-width: 600px;
    margin: 0 auto;
}

/* --- Service Cards --- */
.ecommerce-services-card {
    background-color: #ffffff;
    border: 1px solid #f3f4f6;
    border-radius: 16px;
    padding: 30px 20px;
    text-align: center;
    height: 100%;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
}

    .ecommerce-services-card:hover {
        border-color: #e5e7eb;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
        transform: translateY(-4px);
    }

/* --- Icon Wrappers --- */
.ecommerce-services-icon-wrap {
    width: 55px;
    height: 55px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    margin-bottom: 18px;
}

/* Color Variations */
.color-purple {
    background-color: #f3f0ff;
    color: #8b5cf6;
}

.color-red {
    background-color: #fff0ee;
    color: #ef4444;
}

.color-green {
    background-color: #ecfdf5;
    color: #10b981;
}

.color-orange {
    background-color: #fff7ed;
    color: #f97316;
}

.color-purple-light {
    background-color: #f5f3ff;
    color: #a78bfa;
}

.color-blue {
    background-color: #eff6ff;
    color: #3b82f6;
}

.color-green-light {
    background-color: #f0fdf4;
    color: #22c55e;
}

.color-orange-light {
    background-color: #fff7ed;
    color: #f97316;
}

/* --- Card Typography --- */
.ecommerce-services-card-title {
    font-size: 1rem;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 8px;
    line-height: 1.3;
}

.ecommerce-services-card-desc {
    font-size: 0.85rem;
    color: #6b7280;
    line-height: 1.5;
    margin: 0;
}

/* =========================================
   RESPONSIVE ADJUSTMENTS
   ========================================= */
@media (max-width: 992px) {
    .ecommerce-services-section {
        padding: 60px 0;
    }

    .ecommerce-services-title {
        font-size: 2rem;
    }
}

@media (max-width: 576px) {
    .ecommerce-services-title {
        font-size: 1.7rem;
    }

    .ecommerce-services-card {
        padding: 24px 15px;
    }
}

/*==========================================
        ECOM EXPERTISE SECTION
==========================================*/

.ecom-expertise {
    position: relative;
    padding: 100px 0;
    background: linear-gradient(180deg, #fbfbff 0%, #ffffff 100%);
    overflow: hidden;
}

    .ecom-expertise::before {
        content: "";
        position: absolute;
        top: -120px;
        left: -120px;
        width: 320px;
        height: 320px;
        border-radius: 50%;
        background: radial-gradient(rgba(123, 63, 242, .08), transparent 70%);
    }

    .ecom-expertise::after {
        content: "";
        position: absolute;
        bottom: -150px;
        right: -150px;
        width: 350px;
        height: 350px;
        border-radius: 50%;
        background: radial-gradient(rgba(0, 180, 120, .08), transparent 70%);
    }

/*==========================================
        HEADER
==========================================*/

.ecom-expertise-header {
    max-width: 760px;
    margin: auto;
    text-align: center;
    margin-bottom: 60px;
}

.ecom-expertise-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 18px;
    border-radius: 50px;
    background: #f2ecff;
    color: #7c3aed;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .8px;
    margin-bottom: 18px;
}

    .ecom-expertise-badge i {
        font-size: 11px;
    }

.ecom-expertise-title {
    font-size: 52px;
    font-weight: 800;
    line-height: 1.12;
    color: #14213d;
    margin-bottom: 18px;
}

    .ecom-expertise-title span {
        color: #5b3df5;
    }

.ecom-expertise-subtitle {
    max-width: 650px;
    margin: auto;
    font-size: 16px;
    line-height: 30px;
    color: #64748b;
}

/*==========================================
        CUSTOM 5 COLUMN
==========================================*/

@media (min-width:992px) {

    .col-lg-2-4 {
        flex: 0 0 20%;
        max-width: 20%;
    }
}

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

.ecom-expertise-card {
    position: relative;
    background: #fff;
    border-radius: 20px;
    padding: 28px 24px 22px;
    height: 100%;
    border: 1px solid #edf1f7;
    box-shadow: 0 15px 35px rgba(15, 23, 42, .05);
    transition: .35s;
    overflow: hidden;
}

    .ecom-expertise-card:hover {
        transform: translateY(-10px);
        box-shadow: 0 25px 50px rgba(15, 23, 42, .12);
    }

    .ecom-expertise-card::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        width: 5px;
        height: 0;
        background: #7c3aed;
        transition: .4s;
    }

    .ecom-expertise-card:hover::before {
        height: 100%;
    }

/*==========================================
        NUMBER
==========================================*/

.ecom-expertise-number {
    position: absolute;
    right: 22px;
    top: 20px;
    font-size: 22px;
    font-weight: 800;
    opacity: .22;
}

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

.ecom-expertise-icon {
    width: 62px;
    height: 62px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    margin-bottom: 24px;
    transition: .35s;
}

.ecom-expertise-card:hover .ecom-expertise-icon {
    transform: rotate(-8deg) scale(1.08);
}

.ecom-expertise-card h4 {
    font-size: 21px;
    font-weight: 700;
    color: #16213e;
    line-height: 1.4;
    margin-bottom: 14px;
}

.ecom-expertise-card p {
    color: #6b7280;
    font-size: 14px;
    line-height: 26px;
    margin-bottom: 22px;
}

/*==========================================
        BOTTOM LINE
==========================================*/

.ecom-line {
    display: inline-block;
    width: 55px;
    height: 4px;
    border-radius: 50px;
}

/*==========================================
        PURPLE
==========================================*/

.purple {
    color: #7c3aed;
}

.ecom-expertise-icon.purple {
    background: #f3ebff;
    color: #7c3aed;
}

.ecom-line.purple {
    background: #7c3aed;
}

/*==========================================
        BLUE
==========================================*/

.blue {
    color: #2563eb;
}

.ecom-expertise-icon.blue {
    background: #eaf3ff;
    color: #2563eb;
}

.ecom-line.blue {
    background: #2563eb;
}

/*==========================================
        PINK
==========================================*/

.pink {
    color: #ec4899;
}

.ecom-expertise-icon.pink {
    background: #ffe8f4;
    color: #ec4899;
}

.ecom-line.pink {
    background: #ec4899;
}

/*==========================================
        GREEN
==========================================*/

.green {
    color: #22c55e;
}

.ecom-expertise-icon.green {
    background: #eafcf1;
    color: #22c55e;
}

.ecom-line.green {
    background: #22c55e;
}

/*==========================================
        ORANGE
==========================================*/

.orange {
    color: #f97316;
}

.ecom-expertise-icon.orange {
    background: #fff2e7;
    color: #f97316;
}

.ecom-line.orange {
    background: #f97316;
}

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

@media (max-width:1199px) {

    .ecom-expertise-title {
        font-size: 42px;
    }
}

@media (max-width:991px) {

    .ecom-expertise {
        padding: 80px 0;
    }

    .ecom-expertise-title {
        font-size: 38px;
    }

    .ecom-expertise-card {
        padding: 24px 20px;
    }
}

@media (max-width:767px) {

    .ecom-expertise-title {
        font-size: 32px;
    }

    .ecom-expertise-subtitle {
        font-size: 15px;
        line-height: 28px;
    }

    .ecom-expertise-card {
        text-align: center;
    }

    .ecom-expertise-number {
        right: 18px;
        top: 15px;
        font-size: 18px;
    }

    .ecom-expertise-icon {
        margin: 0 auto 20px;
    }

    .ecom-line {
        margin: auto;
    }
}

/*=========================================
        ECOM BUSINESS SECTION
=========================================*/

.ecom-business-section {
    position: relative;
    padding: 110px 0;
    background: linear-gradient(180deg, #ffffff 0%, #f8f6ff 100%);
    overflow: visible;
}

    .ecom-business-section::before {
        content: "";
        position: absolute;
        width: 650px;
        height: 650px;
        left: -180px;
        top: -120px;
        border-radius: 50%;
        background: radial-gradient(circle, rgba(124,58,237,.12), transparent 70%);
        filter: blur(70px);
        pointer-events: none;
    }

    .ecom-business-section::after {
        content: "";
        position: absolute;
        width: 600px;
        height: 600px;
        right: -180px;
        bottom: -200px;
        border-radius: 50%;
        background: radial-gradient(circle, rgba(79,70,229,.10), transparent 70%);
        filter: blur(80px);
        pointer-events: none;
    }

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

.ecom-business-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 22px;
    background: #ede9fe;
    color: #6d28d9;
    border-radius: 40px;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    font-size: 12px;
    font-weight: 700;
    margin-bottom: 25px;
}

.ecom-business-title {
    font-size: 3.4rem;
    font-weight: 800;
    line-height: 1.12;
    color: #0f172a;
    margin-bottom: 25px;
}

    .ecom-business-title span {
        color: #6d28d9;
    }

.ecom-business-subtitle {
    max-width: 900px;
    margin: auto;
    color: #64748b;
    font-size: 17px;
    line-height: 1.9;
}

/*==========================
    STICKY
==========================*/

.ecom-business-sticky {
    position: sticky;
    top: 90px;
}

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

.ecom-business-images {
    display: flex;
    flex-direction: column;
    gap: 35px;
}

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

.ecom-business-image {
    position: relative;
    text-align: center;
}

    .ecom-business-image img {
        width: 100%;
        max-width: 470px;
        border-radius: 18px;
        filter: drop-shadow(0 25px 55px rgba(124,58,237,.18));
        animation: ecomFloat 5s ease-in-out infinite;
    }

    /* Delay second image animation */

    .ecom-business-image:nth-child(2) img {
        animation-delay: 1.2s;
    }

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

@keyframes ecomFloat {

    0% {
        transform: translateY(0px);
    }

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

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

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

@media (max-width:991px) {

    .ecom-business-sticky {
        position: relative;
        top: 0;
        margin-bottom: 40px;
    }

    .ecom-business-images {
        gap: 20px;
    }

    .ecom-business-image img {
        max-width: 100%;
    }
}

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

.ecom-business-card {
    position: relative;
    display: flex;
    gap: 20px;
    align-items: flex-start;
    background: rgba(255,255,255,.92);
    backdrop-filter: blur(18px);
    border: 1px solid rgba(124,58,237,.10);
    border-radius: 24px;
    padding: 26px;
    height: 100%;
    transition: .35s ease;
    overflow: hidden;
    box-shadow: 0 12px 35px rgba(15,23,42,.06);
}

    .ecom-business-card::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(135deg, rgba(124,58,237,.05), transparent 60%);
        opacity: 0;
        transition: .35s;
    }

    .ecom-business-card:hover {
        transform: translateY(-8px);
        border-color: #7c3aed;
        box-shadow: 0 25px 60px rgba(124,58,237,.15);
    }

        .ecom-business-card:hover::before {
            opacity: 1;
        }

    .ecom-business-card > * {
        position: relative;
        z-index: 2;
    }

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

.ecom-business-icon {
    width: 72px;
    height: 72px;
    border-radius: 22px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    color: #6d28d9;
    background: linear-gradient(135deg,#f3e8ff,#ede9fe);
    box-shadow: 0 15px 35px rgba(124,58,237,.18);
    transition: .35s;
}

.ecom-business-card:hover .ecom-business-icon {
    background: linear-gradient(135deg,#7c3aed,#4f46e5);
    color: #fff;
    transform: rotate(-8deg) scale(1.05);
}

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

.ecom-business-card h5 {
    color: #0f172a;
    font-size: 21px;
    font-weight: 700;
    margin-bottom: 10px;
}

.ecom-business-card p {
    color: #64748b;
    font-size: 15px;
    line-height: 1.8;
    margin: 0;
}
/*=========================================
        BOTTOM CTA
=========================================*/

.ecom-business-bottom {
    position: relative;
    overflow: hidden;
    margin-top: 40px;
    padding: 45px 50px;
    border-radius: 30px;
    background: linear-gradient(135deg,#7c3aed,#4f46e5);
    color: #fff;
    box-shadow: 0 25px 70px rgba(124,58,237,.30);
}

    .ecom-business-bottom::before {
        content: "";
        position: absolute;
        width: 320px;
        height: 320px;
        border-radius: 50%;
        right: -100px;
        top: -120px;
        background: rgba(255,255,255,.08);
    }

    .ecom-business-bottom::after {
        content: "";
        position: absolute;
        width: 220px;
        height: 220px;
        border-radius: 50%;
        left: -70px;
        bottom: -70px;
        background: rgba(255,255,255,.06);
    }

    .ecom-business-bottom > * {
        position: relative;
        z-index: 2;
    }

    .ecom-business-bottom h3 {
        font-size: 2rem;
        font-weight: 800;
        margin-bottom: 18px;
        color: #fff;
    }

    .ecom-business-bottom p {
        margin: 0;
        font-size: 16px;
        line-height: 1.9;
        color: rgba(255,255,255,.92);
    }

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

.ecom-business-mini {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 22px 15px;
    border-radius: 22px;
    background: rgba(255,255,255,.12);
    backdrop-filter: blur(15px);
    transition: .35s;
    height: 100%;
    border: 1px solid rgba(255,255,255,.18);
}

    .ecom-business-mini:hover {
        transform: translateY(-8px);
        background: rgba(255,255,255,.22);
    }

    .ecom-business-mini i {
        width: 60px;
        height: 60px;
        border-radius: 18px;
        background: #fff;
        color: #6d28d9;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 24px;
        box-shadow: 0 12px 30px rgba(0,0,0,.18);
    }

    .ecom-business-mini span {
        color: #fff;
        font-size: 14px;
        font-weight: 700;
        letter-spacing: .4px;
    }

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

.ecom-business-card:hover h5 {
    color: #6d28d9;
}

.ecom-business-card:hover p {
    color: #475569;
}

.ecom-business-card {
    will-change: transform;
}

.ecom-business-image {
    transition: .4s;
}

    .ecom-business-image:hover {
        transform: scale(1.02);
    }

/*==================================
        LEFT STICKY IMAGE
==================================*/

.ecom-business-sticky {
    position: sticky;
    top: 100px;
    align-self: flex-start;
    z-index: 10;
}

.ecom-business-image {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

    .ecom-business-image img {
        width: 100%;
        max-width: 520px;
        height: auto;
        display: block;
        animation: ecomFloat 5s ease-in-out infinite;
        filter: drop-shadow(0 35px 70px rgba(124,58,237,.20));
    }

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

@media (max-width:1199px) {

    .ecom-business-title {
        font-size: 2.9rem;
    }

    .ecom-business-bottom {
        padding: 40px;
    }
}

@media (max-width:991px) {

    .ecom-business-section {
        padding: 80px 0;
    }

    .ecom-business-title {
        font-size: 2.4rem;
    }

    .ecom-business-subtitle {
        font-size: 16px;
    }

    .ecom-business-bottom {
        text-align: center;
        padding: 35px;
    }

        .ecom-business-bottom h3 {
            font-size: 1.8rem;
        }

    .ecom-business-mini {
        margin-top: 20px;
    }

    .ecom-business-sticky {
        position: relative;
        top: auto;
    }

    .ecom-business-image {
        margin-bottom: 50px;
    }

        .ecom-business-image img {
            max-width: 420px;
        }
}
@media (max-width:767px) {

    .ecom-business-section {
        padding: 65px 0;
    }

    .ecom-business-title {
        font-size: 2rem;
    }

    .ecom-business-subtitle {
        font-size: 15px;
    }

    .ecom-business-card {
        padding: 22px;
    }

    .ecom-business-icon {
        width: 60px;
        height: 60px;
        font-size: 24px;
        border-radius: 18px;
    }

    .ecom-business-card h5 {
        font-size: 18px;
    }

    .ecom-business-card p {
        font-size: 14px;
    }

    .ecom-business-bottom {
        padding: 30px;
    }

        .ecom-business-bottom h3 {
            font-size: 1.55rem;
        }

    .ecom-business-mini {
        padding: 18px 10px;
    }
}

@media (max-width:575px) {

    .ecom-business-title {
        font-size: 1.7rem;
    }

    .ecom-business-badge {
        font-size: 11px;
        padding: 9px 18px;
    }

    .ecom-business-card {
        flex-direction: column;
        text-align: center;
        align-items: center;
    }

    .ecom-business-icon {
        margin-bottom: 8px;
    }

    .ecom-business-bottom {
        border-radius: 22px;
    }

        .ecom-business-bottom h3 {
            font-size: 1.35rem;
        }
}
@media (max-width:991px) {

    .ecom-business-sticky {
        position: relative;
        top: auto;
    }

    .ecom-business-image {
        min-height: auto;
        margin-bottom: 50px;
    }

        .ecom-business-image img {
            max-width: 420px;
        }
}

@media (max-width:767px) {

    .ecom-business-image img {
        max-width: 340px;
    }
}

/* =========================================
   ECOM-WHY-US SECTION
   ========================================= */

.ecom-why-us-section {
    background-color: #ffffff;
    padding: 40px 0;
}

/* =========================================
   LEFT COLUMN: TEXT CONTENT
   ========================================= */

.ecom-why-us-pill {
    display: inline-block;
    background-color: #f0f0ff;
    color: #5d3bfd;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    padding: 6px 16px;
    border-radius: 50px;
    border: 1px solid #e0daff;
    text-transform: uppercase;
    margin-bottom: 18px;
}

.ecom-why-us-heading {
    font-size: 2.5rem;
    font-weight: 700;
    color: #111827;
    margin-bottom: 24px;
    line-height: 1.2;
}

    .ecom-why-us-heading .text-highlight {
        color: #5d3bfd; /* Exact purple accent */
    }

.ecom-why-us-list {
    margin-top: 10px;
}

    .ecom-why-us-list li {
        display: flex;
        align-items: center;
        font-weight: 500;
        color: #1f2937;
        font-size: 1rem;
        margin-bottom: 12px;
    }

.ecom-why-us-check {
    color: #5d3bfd; /* Purple checkmark */
    font-size: 1.1rem;
    margin-right: 12px;
    background-color: #f0edff;
    padding: 4px;
    border-radius: 50%;
}

/* =========================================
   RIGHT COLUMN: RADIAL DIAGRAM
   ========================================= */

.ecom-why-us-right {
    position: relative;
    width: 100%;
    max-width: 500px;
    aspect-ratio: 1 / 1; /* Keeps it perfectly circular */
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* --- Background Dotted Rings --- */
.ecom-why-us-circle-outer,
.ecom-why-us-circle-mid {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

.ecom-why-us-circle-outer {
    width: 100%;
    height: 100%;
    border: 2px dashed #e5e7eb; /* Light gray dashed outer */
}

.ecom-why-us-circle-mid {
    width: 65%;
    height: 65%;
    border: 1px solid #f3f4f6; /* Solid light ring */
    background: transparent;
}

/* --- Center Hub (Purple Gradient) --- */
.ecom-why-us-hub {
    position: relative;
    z-index: 2;
    width: 130px;
    height: 130px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, #8b5cf6, #5d3bfd);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 3.5rem;
    box-shadow: 0 0 30px rgba(93, 59, 253, 0.15);
}

/* --- Orbit Items --- */
.ecom-why-us-orbit-item {
    position: absolute;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background: #ffffff;
    padding: 8px;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.03);
}

    .ecom-why-us-orbit-item span {
        font-size: 0.7rem;
        font-weight: 600;
        color: #1f2937;
        margin-top: 4px;
        line-height: 1.2;
    }

    /* --- Circle Icons --- */
    .ecom-why-us-orbit-item .icon-wrap {
        width: 38px;
        height: 38px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.9rem;
    }

/* --- Item Positioning on Circle --- */
/* We use absolute percentages to form the ring */
.item-top-left {
    top: 3%;
    left: 20%;
}

.item-top-right {
    top: 3%;
    right: 20%;
}

.item-right-mid {
    top: 35%;
    right: 0%;
}

.item-right-bottom {
    bottom: 15%;
    right: 12%;
}

.item-bottom-left {
    bottom: 15%;
    left: 12%;
}

.item-left-mid {
    top: 35%;
    left: 0%;
}

/* --- Icon Background Colors --- */
.color-teal {
    background-color: #e6fffa;
    color: #0d9488;
}

.color-orange {
    background-color: #fff7ed;
    color: #f97316;
}

.color-orange-light {
    background-color: #fff7ed;
    color: #f59e0b;
}

.color-purple {
    background-color: #f3f0ff;
    color: #8b5cf6;
}

.color-red {
    background-color: #fef2f2;
    color: #ef4444;
}

.color-purple-light {
    background-color: #f5f3ff;
    color: #a78bfa;
}


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

@media (max-width: 991px) {
    .ecom-why-us-section {
        padding: 60px 0;
    }

    .ecom-why-us-heading {
        font-size: 2.2rem;
    }

    /* Scale down the graphic slightly on smaller screens */
    .ecom-why-us-right {
        max-width: 400px;
    }

    .ecom-why-us-hub {
        width: 100px;
        height: 100px;
        font-size: 2.5rem;
    }

    .ecom-why-us-orbit-item .icon-wrap {
        width: 32px;
        height: 32px;
        font-size: 0.8rem;
    }

    .ecom-why-us-orbit-item span {
        font-size: 0.6rem;
    }
}

@media (max-width: 576px) {
    .ecom-why-us-heading {
        font-size: 1.8rem;
    }

    .ecom-why-us-right {
        max-width: 300px;
    }

    .ecom-why-us-hub {
        width: 80px;
        height: 80px;
        font-size: 2rem;
    }

    .ecom-why-us-orbit-item span {
        display: none;
    }
    /* Hide text on very small screens to keep it clean */
    .ecom-why-us-orbit-item {
        padding: 4px;
    }
}

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

.ecom-process-section {
    padding: 40px 0;
    background: #fafaff;
    overflow: hidden;
}

/* Header */

.ecom-process-header {
    margin-bottom: 70px;
}

.ecom-process-pill {
    display: inline-flex;
    align-items: center;
    padding: 8px 18px;
    border-radius: 50px;
    background: #f3f0ff;
    color: #6d5dfc;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 15px;
}

.ecom-process-title {
    font-size: 42px;
    font-weight: 800;
    color: #111827;
    margin: 0;
}

.ecom-process-para {
    font-size: 18px;
    font-weight: 400;
    color: #64748b;
    margin: 0;
}
/* Timeline */
.ecom-process-wrapper {
    position: relative;
}

/* Dashed Line */

.ecom-process-connector {
    position: absolute;
    top: 35px;
    left: 7%;
    right: 7%;
    border-top: 2px dashed #d6d8e1;
    z-index: 1;
}

/* Grid */

.ecom-process-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 10px;
    position: relative;
    z-index: 2;
}

/* Step */

.ecom-process-step {
    text-align: center;
}

/* Circle */

.ecom-process-badge {
    width: 72px;
    height: 72px;
    background: #fff;
    border-radius: 50%;
    margin: 0 auto 20px;
    border: 1px solid #ececf5;
    box-shadow: 0 10px 25px rgba(0,0,0,.05);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: .35s;
    position: relative;
}

.ecom-process-step:hover .ecom-process-badge {
    transform: translateY(-6px);
    box-shadow: 0 18px 35px rgba(109,93,252,.15);
}

/* Number */

.badge-number {
    font-size: 11px;
    font-weight: 700;
    color: #6d5dfc;
    background: rgba(109,93,252,.12);
    padding: 2px 8px;
    border-radius: 20px;
    margin-bottom: 3px;
}

/* Icon */

.badge-icon {
    font-size: 18px;
    color: #6d5dfc;
}

/* Text */

.ecom-process-step-title {
    font-size: 16px;
    font-weight: 700;
    color: #111827;
    margin-bottom: 8px;
}

.ecom-process-step-desc {
    font-size: 13px;
    color: #6b7280;
    line-height: 1.5;
    max-width: 120px;
    margin: 0 auto;
}

/* Hover */

.ecom-process-step:hover .ecom-process-step-title {
    color: #6d5dfc;
}

/* Responsive */

@media (max-width: 1199px) {

    .ecom-process-title {
        font-size: 34px;
    }

    .ecom-process-grid {
        gap: 5px;
    }

    .ecom-process-step-desc {
        font-size: 12px;
        max-width: 100px;
    }
}

@media (max-width: 991px) {

    .ecom-process-section {
        padding: 80px 0;
    }

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

    .ecom-process-connector {
        display: none;
    }

    .ecom-process-title {
        font-size: 30px;
    }

    .ecom-process-step-desc {
        max-width: 100%;
    }
}

@media (max-width: 576px) {

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

    .ecom-process-title {
        font-size: 26px;
    }

    .ecom-process-badge {
        width: 60px;
        height: 60px;
    }

    .badge-icon {
        font-size: 16px;
    }

    .ecom-process-step-title {
        font-size: 14px;
    }

    .ecom-process-step-desc {
        font-size: 12px;
    }
}

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

.ecom-industries-section {
    position: relative;
    padding: 110px 0;
    background: linear-gradient(180deg,#ffffff 0%,#f8f9ff 100%);
    overflow: hidden;
}

    .ecom-industries-section::before {
        content: "";
        position: absolute;
        width: 520px;
        height: 520px;
        left: -220px;
        top: -180px;
        border-radius: 50%;
        background: radial-gradient(circle, rgba(124,58,237,.12), transparent 70%);
        filter: blur(70px);
        pointer-events: none;
    }

    .ecom-industries-section::after {
        content: "";
        position: absolute;
        width: 520px;
        height: 520px;
        right: -220px;
        bottom: -220px;
        border-radius: 50%;
        background: radial-gradient(circle, rgba(59,130,246,.10), transparent 70%);
        filter: blur(80px);
        pointer-events: none;
    }

    .ecom-industries-section .container {
        position: relative;
        z-index: 2;
    }


/*=========================================================
                    HEADER
=========================================================*/

.ecom-industries-header {
    max-width: 900px;
    margin: 0 auto 70px;
    text-align: center;
}

.ecom-industries-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 22px;
    border-radius: 50px;
    background: #f3f0ff;
    color: #6d28d9;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 24px;
}

    .ecom-industries-pill::before {
        content: "";
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: #8b5cf6;
    }

.ecom-industries-title {
    font-size: 3.2rem;
    font-weight: 800;
    line-height: 1.15;
    color: #111827;
    margin-bottom: 22px;
}

    .ecom-industries-title span {
        color: #6d28d9;
    }

.ecom-industries-subtitle {
    max-width: 850px;
    margin: 0 auto 38px;
    color: #64748b;
    font-size: 17px;
    line-height: 1.9;
}


/*=========================================================
                GRID SPACING
=========================================================*/

.ecom-industries-section .row.g-4 {
    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 1.5rem;
}
/*=========================================================
                    INDUSTRY CARDS
=========================================================*/

.ecom-industries-card {
    position: relative;
    overflow: hidden;
    background: #fff;
    border: 1px solid #eef2ff;
    border-radius: 22px;
    min-height: 165px;
    padding: 30px 18px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    transition: all .35s ease;
    box-shadow: 0 12px 30px rgba(15,23,42,.05);
}

    .ecom-industries-card::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(135deg, rgba(124,58,237,.06), transparent 70%);
        opacity: 0;
        transition: .35s;
    }

    .ecom-industries-card > * {
        position: relative;
        z-index: 2;
    }

    .ecom-industries-card:hover {
        transform: translateY(-10px);
        border-color: #d8c8ff;
        box-shadow: 0 28px 60px rgba(124,58,237,.14);
    }

        .ecom-industries-card:hover::before {
            opacity: 1;
        }

    .ecom-industries-card h6 {
        margin: 18px 0 0;
        font-size: 16px;
        font-weight: 700;
        color: #111827;
        transition: .35s;
    }

    .ecom-industries-card:hover h6 {
        color: #6d28d9;
    }


/*=========================================================
                        ICONS
=========================================================*/

.ecom-industries-icon {
    width: 72px;
    height: 72px;
    border-radius: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    transition: .35s ease;
}

    .ecom-industries-icon i {
        transition: .35s ease;
    }

.ecom-industries-card:hover .ecom-industries-icon {
    transform: translateY(-5px) scale(1.08);
}

    .ecom-industries-card:hover .ecom-industries-icon i {
        transform: rotate(10deg);
    }


/*=========================================================
                    INDUSTRY COLORS
=========================================================*/

.healthcare {
    background: #fef2f2;
    color: #ef4444;
}

.grocery {
    background: #ecfdf5;
    color: #10b981;
}

.pharmacy {
    background: #eff6ff;
    color: #3b82f6;
}

.fashion {
    background: #eef2ff;
    color: #6366f1;
}

.electronics {
    background: #ecfeff;
    color: #06b6d4;
}

.automotive {
    background: #f5f3ff;
    color: #8b5cf6;
}

.furniture {
    background: #fff7ed;
    color: #f97316;
}

.beauty {
    background: #fdf2f8;
    color: #ec4899;
}

.manufacturing {
    background: #ecfdf5;
    color: #059669;
}

.wholesale {
    background: #f8fafc;
    color: #475569;
}

.food {
    background: #f0fdf4;
    color: #22c55e;
}

.agriculture {
    background: #ecfccb;
    color: #65a30d;
}

.jewelry {
    background: #faf5ff;
    color: #c026d3;
}

.sports {
    background: #eff6ff;
    color: #2563eb;
}

.books {
    background: #fff7ed;
    color: #ea580c;
}


/*=========================================================
                ICON HOVER SHADOWS
=========================================================*/

.ecom-industries-card:hover .healthcare {
    box-shadow: 0 15px 35px rgba(239,68,68,.25);
}

.ecom-industries-card:hover .grocery {
    box-shadow: 0 15px 35px rgba(16,185,129,.25);
}

.ecom-industries-card:hover .pharmacy {
    box-shadow: 0 15px 35px rgba(59,130,246,.25);
}

.ecom-industries-card:hover .fashion {
    box-shadow: 0 15px 35px rgba(99,102,241,.25);
}

.ecom-industries-card:hover .electronics {
    box-shadow: 0 15px 35px rgba(6,182,212,.25);
}

.ecom-industries-card:hover .automotive {
    box-shadow: 0 15px 35px rgba(139,92,246,.25);
}

.ecom-industries-card:hover .furniture {
    box-shadow: 0 15px 35px rgba(249,115,22,.25);
}

.ecom-industries-card:hover .beauty {
    box-shadow: 0 15px 35px rgba(236,72,153,.25);
}

.ecom-industries-card:hover .manufacturing {
    box-shadow: 0 15px 35px rgba(5,150,105,.25);
}

.ecom-industries-card:hover .wholesale {
    box-shadow: 0 15px 35px rgba(71,85,105,.22);
}

.ecom-industries-card:hover .food {
    box-shadow: 0 15px 35px rgba(34,197,94,.25);
}

.ecom-industries-card:hover .agriculture {
    box-shadow: 0 15px 35px rgba(101,163,13,.25);
}

.ecom-industries-card:hover .jewelry {
    box-shadow: 0 15px 35px rgba(192,38,211,.25);
}

.ecom-industries-card:hover .sports {
    box-shadow: 0 15px 35px rgba(37,99,235,.25);
}

.ecom-industries-card:hover .books {
    box-shadow: 0 15px 35px rgba(234,88,12,.25);
}


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

.ecom-industries-card {
    animation: ecomIndustryFade .7s ease both;
}

@keyframes ecomIndustryFade {

    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/*=================================
    E-Comm FAQ, Testimonials
=================================*/
.testimonial-faq-section {
    padding: 50px 0;
    background: linear-gradient(
        180deg,
        #ffffff,
        #f8f7ff
    );
}

.glass-card {
    height: 100%;
    background: rgba(255,255,255,.85);
    backdrop-filter: blur(15px);
    border-radius: 28px;
    padding: 40px;
    border: 1px solid rgba(110,88,255,.1);
    box-shadow:
        0 20px 50px rgba(0,0,0,.06);
    transition: .4s;
}

.glass-card:hover {
    transform: translateY(-6px);
}

.section-badge {
    display: inline-block;
    padding: 8px 18px;
    border-radius: 50px;
    background: rgba(110,88,255,.1);
    color: #6e58ff;
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 25px;
}

/* TESTIMONIAL */

.quote-icon {
    font-size: 60px;
    color: rgba(110,88,255,.12);
    margin-bottom: 15px;
}

.testimonial-item p {
    font-size: 18px;
    line-height: 1.9;
    color: #4b5563;
    min-height: 170px;
}

.client-info {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-top: 25px;
}

.client-info img {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    object-fit: cover;
}

.client-info h6 {
    margin: 0;
    font-weight: 700;
}

.client-info span {
    color: #6b7280;
    font-size: 14px;
}

.rating {
    color: #fbbf24;
    margin-top: 6px;
}

.testimonial-nav {
    display: flex;
    gap: 10px;
    margin-top: 25px;
}

.testimonial-nav button {
    width: 42px;
    height: 42px;
    border: none;
    border-radius: 50%;
    background: #f4f1ff;
    color: #6e58ff;
    transition: .3s;
}

.testimonial-nav button:hover {
    background: #6e58ff;
    color: #fff;
}

/* FAQ */

.faq-card h3 {
    color: #6e58ff;
    font-size: 34px;
    font-weight: 800;
    margin-bottom: 30px;
}

.custom-faq .accordion-item {
    border: none;
    border-bottom: 1px solid #eee;
    background: transparent;
}

.custom-faq .accordion-button {
    background: transparent;
    box-shadow: none;
    font-weight: 600;
    padding: 20px 0;
}

.custom-faq .accordion-button:not(.collapsed) {
    color: #6e58ff;
}

.custom-faq .accordion-body {
    padding: 0 0 20px;
    color: #6b7280;
}

.faq-btn {
    margin-top: 30px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: linear-gradient(
        135deg,
        #6e58ff,
        #a855f7
    );
    color: #fff;
    text-decoration: none;
    padding: 14px 28px;
    border-radius: 14px;
    font-weight: 600;
}

.faq-btn:hover {
    color: #fff;
}

.testimonial-item {
    display: none;
}

.testimonial-item.active {
    display: block;
}

@media(max-width:991px){

    .testimonial-faq-section{
        padding:80px 0;
    }

    .faq-card h3{
        font-size:28px;
    }

}
/*=========================
      TRUST SECTION
==========================*/

.trust-title {
    font-size: 34px;
    font-weight: 800;
    color: #111827;
    margin-bottom: 18px;
    line-height: 1.3;
}

    .trust-title span {
        color: #6e58ff;
    }

.trust-text {
    color: #6b7280;
    line-height: 30px;
    margin-bottom: 35px;
}

.trust-grid {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 18px;
    margin-bottom: 35px;
}

.trust-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    background: #fff;
    border: 1px solid rgba(110,88,255,.10);
    border-radius: 14px;
    transition: .35s;
}

    .trust-item:hover {
        transform: translateY(-5px);
        box-shadow: 0 12px 30px rgba(110,88,255,.12);
        border-color: #6e58ff;
    }

.trust-icon {
    width: 42px;
    height: 42px;
    min-width: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: linear-gradient(135deg,#6e58ff,#8b5cf6);
    color: #fff;
    font-size: 15px;
}

.trust-item span {
    font-size: 15px;
    font-weight: 600;
    color: #374151;
}

.trust-btn {
    display: inline-flex;
    align-items: center;
    padding: 15px 30px;
    background: linear-gradient(135deg,#6e58ff,#8b5cf6);
    color: #fff;
    text-decoration: none;
    border-radius: 14px;
    font-weight: 700;
    transition: .35s;
}

    .trust-btn:hover {
        color: #fff;
        transform: translateY(-3px);
        box-shadow: 0 18px 40px rgba(110,88,255,.25);
    }

@media(max-width:767px) {

    .trust-title {
        font-size: 28px;
    }
}

/*==================================================
        ECOM PLATFORMS COMPARISON
==================================================*/

.ecom-platforms {
    position: relative;
    padding: 100px 0;
    background: linear-gradient(180deg,#fbfbff 0%,#f4f7ff 100%);
    overflow: hidden;
}

    .ecom-platforms::before {
        content: "";
        position: absolute;
        width: 320px;
        height: 320px;
        top: -120px;
        left: -120px;
        border-radius: 50%;
        background: radial-gradient(rgba(123,63,242,.08),transparent 70%);
    }

    .ecom-platforms::after {
        content: "";
        position: absolute;
        width: 350px;
        height: 350px;
        bottom: -140px;
        right: -140px;
        border-radius: 50%;
        background: radial-gradient(rgba(37,99,235,.08),transparent 70%);
    }

/*=========================
        HEADER
=========================*/

.ecom-platforms-header {
    max-width: 820px;
    margin: auto;
    text-align: center;
    margin-bottom: 60px;
}

.ecom-platforms-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 9px 20px;
    border-radius: 50px;
    background: #ede9fe;
    color: #6d28d9;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .6px;
    margin-bottom: 18px;
}

.ecom-platforms-title {
    font-size: 58px;
    font-weight: 800;
    color: #172554;
    line-height: 1.15;
    margin-bottom: 18px;
}

    .ecom-platforms-title span {
        display: block;
        background: linear-gradient(135deg,#7c3aed,#2563eb);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }

.ecom-platforms-subtitle {
    font-size: 18px;
    color: #64748b;
    line-height: 30px;
    max-width: 700px;
    margin: auto;
}

/*=========================
      WRAPPER
=========================*/

.ecom-platforms-wrapper {
    background: #fff;
    border-radius: 28px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(15,23,42,.08);
    position: relative;
}

/*=========================
      HEADER BOXES
=========================*/

.ecom-platforms-side {
    width: 50%;
    float: left;
    color: #fff;
    padding: 35px;
    min-height: 160px;
}

.custom-side {
    background: linear-gradient(135deg,#8b5cf6,#6d28d9);
}

.saas-side {
    background: linear-gradient(135deg,#3b82f6,#2563eb);
}

.ecom-platforms-side-header {
    display: flex;
    align-items: center;
    gap: 22px;
}

.ecom-platforms-icon {
    width: 78px;
    height: 78px;
    border-radius: 50%;
    background: #fff;
    color: #6d28d9;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    flex-shrink: 0;
}

.saas-side .ecom-platforms-icon {
    color: #2563eb;
}

.ecom-platforms-side h3 {
    font-size: 34px;
    font-weight: 700;
    margin-bottom: 8px;
}

.ecom-platforms-side p {
    margin: 0;
    font-size: 16px;
    opacity: .95;
    line-height: 28px;
}

/*=========================
          VS
=========================*/

.ecom-platforms-vs {
    position: absolute;
    left: 50%;
    top: 80px;
    transform: translateX(-50%);
    width: 76px;
    height: 76px;
    border-radius: 50%;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    font-weight: 800;
    color: #6d28d9;
    box-shadow: 0 12px 35px rgba(0,0,0,.12);
    z-index: 10;
}

/*=========================
        TABLE
=========================*/

.ecom-platforms-table {
    clear: both;
}

.ecom-platforms-row {
    display: grid;
    grid-template-columns: 1fr 220px 1fr;
    align-items: center;
    border-top: 1px solid #edf2f7;
    transition: .3s;
}

    .ecom-platforms-row:hover {
        background: #fafbff;
    }

.ecom-platforms-left,
.ecom-platforms-right {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    padding: 28px;
}

.ecom-platforms-middle {
    text-align: center;
    border-left: 1px solid #edf2f7;
    border-right: 1px solid #edf2f7;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.middle-icon {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: #f3f0ff;
    color: #6d28d9;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    margin-bottom: 12px;
}

.ecom-platforms-middle span {
    font-weight: 700;
    color: #374151;
}

.tick,
.cross {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.tick {
    background: #ede9fe;
    color: #7c3aed;
}

.cross {
    background: #dbeafe;
    color: #2563eb;
}

.ecom-platforms-left h5,
.ecom-platforms-right h5 {
    font-size: 22px;
    font-weight: 700;
    color: #111827;
    margin-bottom: 8px;
}

.ecom-platforms-left p,
.ecom-platforms-right p {
    margin: 0;
    font-size: 15px;
    color: #6b7280;
    line-height: 28px;
}

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

.ecom-platforms-row:hover .tick {
    background: #7c3aed;
    color: #fff;
}

.ecom-platforms-row:hover .cross {
    background: #2563eb;
    color: #fff;
}

.ecom-platforms-row:hover .middle-icon {
    transform: rotate(12deg) scale(1.08);
}

.middle-icon,
.tick,
.cross {
    transition: .35s;
}

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

@media(max-width:1199px) {

    .ecom-platforms-title {
        font-size: 48px;
    }

    .ecom-platforms-row {
        grid-template-columns: 1fr 180px 1fr;
    }
}

/*==========================================
        TABLET
==========================================*/

@media (max-width:991px){

    .ecom-platforms{
        padding:70px 0;
    }

    .ecom-platforms-title{
        font-size:40px;
    }

    .ecom-platforms-subtitle{
        font-size:16px;
        line-height:28px;
    }

    /* Header */

    .ecom-platforms-side{
        width:100%;
        float:none;
        min-height:auto;
        padding:30px;
    }

    .custom-side{
        border-radius:24px 24px 0 0;
    }

    .saas-side{
        border-radius:0;
    }

    .ecom-platforms-side-header{
        align-items:center;
    }

    .ecom-platforms-side h3{
        font-size:28px;
    }

    .ecom-platforms-vs{
        position:relative;
        left:auto;
        top:auto;
        transform:none;
        margin:-28px auto;
        z-index:20;
    }

    /* Comparison */

    .ecom-platforms-row{
        display:block;
        border-top:1px solid #edf2f7;
        padding:20px;
    }

    .ecom-platforms-left,
    .ecom-platforms-right{
        padding:0;
    }

    .ecom-platforms-middle{
        border:none;
        padding:20px 0;
    }

}

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

@media (max-width:767px){

    .ecom-platforms{
        padding:60px 0;
    }

    .ecom-platforms-title{
        font-size:32px;
        line-height:1.25;
    }

    .ecom-platforms-subtitle{
        font-size:15px;
        line-height:26px;
    }

    .ecom-platforms-wrapper{
        border-radius:20px;
        overflow:hidden;
    }

    /* Header */

    .ecom-platforms-side{
        padding:25px 20px;
        text-align:center;
    }

    .ecom-platforms-side-header{
        flex-direction:column;
        gap:18px;
        text-align:center;
    }

    .ecom-platforms-icon{
        width:65px;
        height:65px;
        font-size:24px;
        margin:auto;
    }

    .ecom-platforms-side h3{
        font-size:24px;
    }

    .ecom-platforms-side p{
        font-size:15px;
        line-height:26px;
    }

    .ecom-platforms-vs{
        width:54px;
        height:54px;
        font-size:18px;
        margin:-24px auto;
    }

    /* Comparison Card */

    .ecom-platforms-row{
        padding:20px 18px;
        background:#fff;
    }

    .ecom-platforms-left,
    .ecom-platforms-right{
        display:flex;
        flex-direction:row;
        align-items:flex-start;
        gap:15px;
        text-align:left;
    }

    .ecom-platforms-left{
        margin-bottom:18px;
    }

    .ecom-platforms-middle{

        display:flex;
        flex-direction:row;
        justify-content:center;
        align-items:center;
        gap:12px;

        padding:15px 0;
        margin-bottom:18px;

        border-top:1px dashed #dbe3f0;
        border-bottom:1px dashed #dbe3f0;
    }

    .middle-icon{
        margin:0;
        width:42px;
        height:42px;
        font-size:16px;
    }

    .tick,
    .cross{
        width:38px;
        height:38px;
        min-width:38px;
        font-size:14px;
    }

    .ecom-platforms-left h5,
    .ecom-platforms-right h5{
        font-size:18px;
        margin-bottom:5px;
    }

    .ecom-platforms-left p,
    .ecom-platforms-right p{
        font-size:14px;
        line-height:24px;
    }

}

/*==========================================
        EXTRA SMALL
==========================================*/

@media (max-width:480px){

    .ecom-platforms-title{
        font-size:28px;
    }

    .ecom-platforms-badge{
        font-size:11px;
        padding:8px 15px;
    }

    .ecom-platforms-side{
        padding:22px 16px;
    }

    .ecom-platforms-row{
        padding:18px 15px;
    }

    .ecom-platforms-left h5,
    .ecom-platforms-right h5{
        font-size:16px;
    }

    .ecom-platforms-middle span{
        font-size:14px;
    }

}

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

.ecomm-cta-section {
    padding: 40px 0;
    background: #ffffff;
}

/* Main CTA Box */

.ecomm-cta-wrapper {
    position: relative;
    overflow: hidden;
    border-radius: 24px;
    padding: 40px 50px;
    background: linear-gradient( 135deg, #5b2cff 0%, #7c3aed 50%, #a855f7 100% );
    box-shadow: 0 20px 40px rgba(91,44,255,.15);
}

/* Content */

.ecomm-cta-content {
    position: relative;
    z-index: 2;
}

.ecomm-cta-badge {
    display: inline-flex;
    align-items: center;
    padding: 7px 16px;
    border-radius: 50px;
    background: rgba(255,255,255,.15);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .5px;
    margin-bottom: 15px;
    text-transform: uppercase;
}

.ecomm-cta-title {
    color: #fff;
    font-size: 34px;
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 12px;
    max-width: 520px;
}

    .ecomm-cta-title span {
        display: block;
    }

.ecomm-cta-text {
    color: rgba(255,255,255,.85);
    font-size: 15px;
    line-height: 1.7;
    max-width: 520px;
    margin-bottom: 22px;
}

/* Buttons */

.ecomm-cta-buttons {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.ecomm-cta-btn {
    text-decoration: none;
    padding: 12px 22px;
    border-radius: 12px;
    font-weight: 600;
    font-size: 14px;
    transition: all .3s ease;
}

.ecomm-cta-primary {
    background: #ffffff;
    color: #5b2cff;
    box-shadow: 0 10px 25px rgba(255,255,255,.18);
}

    .ecomm-cta-primary:hover {
        color: #5b2cff;
        transform: translateY(-3px);
    }

.ecomm-cta-outline {
    border: 1px solid rgba(255,255,255,.35);
    color: #fff;
    background: rgba(255,255,255,.08);
    backdrop-filter: blur(10px);
}

    .ecomm-cta-outline:hover {
        color: #fff;
        background: rgba(255,255,255,.15);
        transform: translateY(-3px);
    }

/* Layout Height */

.ecomm-cta-section .row {
    min-height: 220px;
    align-items: center;
}

/* Right Visual */

.ecomm-cta-visual {
    position: relative;
    min-height: 180px;
    display: flex;
    justify-content: center;
    align-items: center;
}

    .ecomm-cta-visual img {
/*        max-height: 180px;*/
        width: auto;
        position: relative;
        z-index: 3;
        animation: ecommFloat 5s ease-in-out infinite;
    }

/* Floating Elements */

.ecomm-floating-ball {
    position: absolute;
    border-radius: 50%;
    background: rgba(255,255,255,.15);
    backdrop-filter: blur(8px);
    animation: ecommFloatBall 6s ease-in-out infinite;
}

.ball-1 {
    width: 18px;
    height: 18px;
    top: 15%;
    left: 8%;
}

.ball-2 {
    width: 30px;
    height: 30px;
    top: 20%;
    right: 18%;
}

.ball-3 {
    width: 22px;
    height: 22px;
    bottom: 20%;
    left: 25%;
}

.ball-4 {
    width: 14px;
    height: 14px;
    right: 8%;
    top: 55%;
}

/* Decorative Glow */

.ecomm-cta-wrapper::before {
    content: '';
    position: absolute;
    width: 280px;
    height: 280px;
    background: rgba(255,255,255,.08);
    border-radius: 50%;
    top: -120px;
    right: -80px;
}

.ecomm-cta-wrapper::after {
    content: '';
    position: absolute;
    width: 220px;
    height: 220px;
    background: rgba(255,255,255,.05);
    border-radius: 50%;
    bottom: -120px;
    left: -80px;
}

/* Animations */

@keyframes ecommFloat {

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

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

@keyframes ecommFloatBall {

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

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

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

@media (max-width: 1199px) {

    .ecomm-cta-title {
        font-size: 30px;
    }

    .ecomm-cta-wrapper {
        padding: 35px 40px;
    }
}

@media (max-width: 991px) {

    .ecomm-cta-section {
        padding: 70px 0;
    }

    .ecomm-cta-wrapper {
        padding: 35px 25px;
        text-align: center;
    }

    .ecomm-cta-title {
        font-size: 28px;
        max-width: 100%;
    }

    .ecomm-cta-text {
        max-width: 100%;
        margin-left: auto;
        margin-right: auto;
    }

    .ecomm-cta-buttons {
        justify-content: center;
    }

    .ecomm-cta-visual {
        margin-top: 20px;
        min-height: 120px;
    }

        .ecomm-cta-visual img {
            max-height: 120px;
        }
}

@media (max-width: 576px) {

    .ecomm-cta-wrapper {
        padding: 30px 20px;
    }

    .ecomm-cta-title {
        font-size: 24px;
    }

    .ecomm-cta-text {
        font-size: 14px;
    }

    .ecomm-cta-btn {
        width: 100%;
        justify-content: center;
        text-align: center;
    }

    .ecomm-cta-buttons {
        flex-direction: column;
    }
}


/* =====================================================
   LOAN_MODULE HERO SECTION
===================================================== */

.Loan-module-hero-section {
    position: relative;
    overflow: hidden;
    padding: 130px 0 60px;
    color: #fff;
    background: radial-gradient(circle at 70% 35%, rgba(37,99,235,.35) 0%, rgba(37,99,235,.12) 25%, transparent 50%), radial-gradient(circle at 100% 0%, rgba(59,130,246,.15) 0%, transparent 35%), linear-gradient( 90deg, #020817 0%, #07122e 35%, #03153e 70%, #07122e 100% );
}

    /* Blue glow behind dashboard */

    .Loan-module-hero-section::before {
        content: "";
        position: absolute;
        right: -180px;
        top: -100px;
        width: 850px;
        height: 850px;
        border-radius: 50%;
        background: radial-gradient( circle, rgba(37,99,235,.28) 0%, rgba(37,99,235,.12) 35%, transparent 70% );
        pointer-events: none;
    }

.Loan-module-hero-content {
    max-width: 620px;
    position: relative;
    z-index: 2;
}

/* =====================================================
   TAG
===================================================== */

.Loan-module-hero-tag {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 18px;
    border-radius: 50px;
    margin-bottom: 28px;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.08);
    color: #cbd5e1;
    font-size: .85rem;
    font-weight: 600;
}

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

.Loan-module-hero-title {
    font-size: 4rem;
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: 24px;
    letter-spacing: -1.5px;
    color: #fff;
}

    .Loan-module-hero-title span {
        color: #a5b4fc;
    }

/* =====================================================
   DESCRIPTION
===================================================== */

.Loan-module-hero-desc {
    color: #cbd5e1;
    font-size: 1.08rem;
    line-height: 1.8;
    margin-bottom: 35px;
    max-width: 560px;
}

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

.Loan-module-btn-primary {
    background: #2563eb;
    border: none;
    color: #fff;
    padding: 14px 28px;
    border-radius: 12px;
    font-weight: 600;
    transition: .3s;
}

    .Loan-module-btn-primary:hover {
        background: #1d4ed8;
        transform: translateY(-2px);
        color: #fff;
    }

.Loan-module-btn-outline {
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.15);
    color: #fff;
    padding: 14px 28px;
    border-radius: 12px;
    font-weight: 600;
}

    .Loan-module-btn-outline:hover {
        background: rgba(255,255,255,.08);
        color: #fff;
    }

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

.Loan-module-hero-stats {
    margin-top: 50px;
    display: flex;
/*    flex-wrap: wrap;*/
    gap: 35px;
}

.Loan-module-stat-item {
    display: flex;
    align-items: center;
    gap: 12px;
}

    .Loan-module-stat-item i {
        width: 42px;
        height: 42px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(255,255,255,.06);
        border-radius: 12px;
        color: #60a5fa;
    }

    .Loan-module-stat-item div {
        display: flex;
        flex-direction: column;
    }

.Loan-module-stat-number {
    font-size: 1.15rem;
    font-weight: 700;
    color: #fff;
}

.Loan-module-stat-label {
    font-size: .78rem;
    color: #94a3b8;
}

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

.Loan-module-hero-image-wrapper {
    position: relative;
    z-index: 2;
    text-align: center;
}

.Loan-module-hero-img {
    width: 100%;
    max-width: 920px;
    height: auto;
    display: block;
    margin-left: auto;
    filter: drop-shadow(0 30px 60px rgba(0,0,0,.55));
}

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

@media(max-width:1200px) {

    .Loan-module-hero-title {
        font-size: 3.3rem;
    }

    .Loan-module-hero-img {
        max-width: 760px;
    }
}

@media(max-width:991px) {

    .Loan-module-hero-section {
        padding: 130px 0;
        text-align: center;
    }

    .Loan-module-hero-content {
        margin: auto;
    }

    .Loan-module-hero-title {
        font-size: 2.7rem;
    }

    .Loan-module-hero-stats {
        justify-content: center;
    }

    .Loan-module-hero-image-wrapper {
        margin-top: 50px;
    }
}

@media(max-width:576px) {

    .Loan-module-hero-title {
        font-size: 2.1rem;
    }

    .Loan-module-hero-buttons {
        flex-direction: column;
    }

    .Loan-module-btn-primary,
    .Loan-module-btn-outline {
        width: 100%;
    }

    .Loan-module-hero-stats {
        gap: 20px;
    }
}

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

.Loan-module-ecosystem-section {
    padding: 40px 0;
    background: radial-gradient(circle at center, rgba(37,99,235,.05), transparent 60%), #ffffff;
    overflow-x: hidden;
}

/* =========================================
   HEADER
========================================= */

.Loan-module-ecosystem-header {
    margin-bottom: 70px;
}

.Loan-module-ecosystem-title {
    font-size: 3rem;
    font-weight: 800;
    color: #111827;
    margin-bottom: 15px;
}

.text-highlight {
    color: #2563eb;
}

.Loan-module-ecosystem-subtitle {
    max-width: 700px;
    margin: 0 auto;
    color: #6b7280;
    line-height: 1.8;
    font-size: 1.05rem;
}

/* =========================================
   MAIN GRID
========================================= */

.Loan-module-ecosystem-grid {
    display: grid;
    grid-template-columns: 1fr 360px 1fr;
    gap: 35px;
    align-items: center;
}

.ecosystem-column {
    display: flex;
    flex-direction: column;
    gap: 20px;
    min-width: 0;
}

/* =========================================
   CENTER HUB
========================================= */

.Loan-module-ecosystem-center {
    display: flex;
    justify-content: center;
}

.Loan-module-ecosystem-hub {
    width: 340px;
    height: 340px;
    border-radius: 50%;
    background: #ffffff;
    border: 10px solid rgba(37,99,235,.08);
    box-shadow: 0 20px 50px rgba(37,99,235,.12);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    text-align: center;
}

    .Loan-module-ecosystem-hub::before {
        content: "";
        position: absolute;
        inset: -25px;
        border-radius: 50%;
        border: 2px dashed rgba(37,99,235,.18);
    }

.hub-icon-wrap {
    width: 80px;
    height: 80px;
    border-radius: 18px;
    background: #eff6ff;
    color: #2563eb;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 2rem;
    margin-bottom: 18px;
}

.Loan-module-ecosystem-hub h3 {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 10px;
    color: #111827;
}

.Loan-module-ecosystem-hub p {
    font-size: .95rem;
    color: #6b7280;
    max-width: 220px;
    line-height: 1.6;
}

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

.Loan-module-ecosystem-card {
    background: #ffffff;
    border: 1px solid #edf2f7;
    border-radius: 18px;
    padding: 22px;
    display: flex;
    align-items: center;
    gap: 16px;
    width: 100%;
    transition: all .3s ease;
    box-shadow: 0 6px 20px rgba(0,0,0,.04);
}

    .Loan-module-ecosystem-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 15px 35px rgba(37,99,235,.10);
    }

.card-icon-wrap {
    width: 58px;
    height: 58px;
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    flex-shrink: 0;
}

.Loan-module-ecosystem-card h4 {
    margin: 0 0 5px;
    font-size: 1rem;
    font-weight: 700;
    color: #111827;
}

.Loan-module-ecosystem-card p {
    margin: 0;
    color: #6b7280;
    font-size: .85rem;
    line-height: 1.5;
}

/* =========================================
   ANALYTICS CARD
========================================= */

.analytics-wrapper {
    margin-top: 40px;
    display: flex;
    justify-content: center;
}

.analytics-card {
    max-width: 500px;
}

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

.icon-blue {
    background: #eff6ff;
    color: #2563eb;
}

.icon-green {
    background: #ecfdf5;
    color: #10b981;
}

.icon-purple {
    background: #f5f3ff;
    color: #8b5cf6;
}

.icon-green-light {
    background: #f0fdf4;
    color: #22c55e;
}

.icon-blue-light {
    background: #f0f9ff;
    color: #0ea5e9;
}

.icon-orange {
    background: #fff7ed;
    color: #f97316;
}

.icon-orange-light {
    background: #fffbeb;
    color: #f59e0b;
}

/* =========================================
   TABLET
========================================= */

@media (max-width: 991px) {

    .Loan-module-ecosystem-grid {
        grid-template-columns: 1fr;
    }

    .Loan-module-ecosystem-center {
        order: -1;
        margin-bottom: 20px;
    }

    .Loan-module-ecosystem-hub {
        width: 280px;
        height: 280px;
    }

    .ecosystem-column {
        width: 100%;
    }

    .analytics-card {
        max-width: 100%;
    }
}

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

@media (max-width: 576px) {

    .Loan-module-ecosystem-section {
        padding: 70px 0;
    }

    .Loan-module-ecosystem-header {
        margin-bottom: 40px;
    }

    .Loan-module-ecosystem-title {
        font-size: 2rem;
    }

    .Loan-module-ecosystem-subtitle {
        font-size: .95rem;
    }

    .Loan-module-ecosystem-hub {
        width: 220px;
        height: 220px;
        border-width: 6px;
    }

        .Loan-module-ecosystem-hub::before {
            inset: -15px;
        }

    .hub-icon-wrap {
        width: 55px;
        height: 55px;
        font-size: 1.4rem;
    }

    .Loan-module-ecosystem-hub h3 {
        font-size: 1rem;
    }

    .Loan-module-ecosystem-hub p {
        font-size: .75rem;
        max-width: 150px;
    }

    .Loan-module-ecosystem-card {
        padding: 16px;
        gap: 12px;
    }

    .card-icon-wrap {
        width: 45px;
        height: 45px;
        font-size: 1rem;
    }

    .Loan-module-ecosystem-card h4 {
        font-size: .9rem;
    }

    .Loan-module-ecosystem-card p {
        font-size: .75rem;
    }
}

/* =========================================
   LOAN-MODULE-SERVICE SECTION
   ========================================= */

.Loan-module-service-section {
    background-color: #f8fafc; /* Very light gray/blue background */
    padding: 40px 0;
}

/* --- Section Header --- */
.Loan-module-service-header {
    margin-bottom: 50px;
}

.Loan-module-service-title {
    font-size: 2.2rem;
    font-weight: 700;
    color: #111827;
}

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

.Loan-module-service-card {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    background-color: #ffffff;
    padding: 24px 28px;
    border-radius: 12px;
    border: 1px solid #f1f5f9;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
    height: 100%;
}

    .Loan-module-service-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
        border-color: #e2e8f0;
    }

/* --- Icon Wrappers --- */
.Loan-module-service-icon {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
}

/* Color Variations */
.color-blue {
    background-color: #eff6ff;
    color: #2563eb;
}

.color-green {
    background-color: #ecfdf5;
    color: #10b981;
}

.color-orange {
    background-color: #fff7ed;
    color: #f97316;
}

.color-purple {
    background-color: #f5f3ff;
    color: #8b5cf6;
}

.color-indigo {
    background-color: #eef2ff;
    color: #6366f1;
}

.color-pink {
    background-color: #fdf2f8;
    color: #ec4899;
}

/* --- Content Text --- */
.Loan-module-service-content {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.Loan-module-service-name {
    font-size: 1rem;
    font-weight: 700;
    color: #1e293b;
    margin: 0;
}

.Loan-module-service-desc {
    font-size: 0.9rem;
    color: #64748b;
    line-height: 1.5;
    margin: 0;
}

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

@media (max-width: 992px) {
    .Loan-module-service-section {
        padding: 60px 0;
    }

    .Loan-module-service-title {
        font-size: 2rem;
    }

    .Loan-module-service-card {
        padding: 20px;
    }
}

@media (max-width: 576px) {
    .Loan-module-service-title {
        font-size: 1.6rem;
    }

    .Loan-module-service-card {
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: 24px 16px;
    }
}

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

.Loan-module-features-section {
    padding: 40px 0;
    background:
        radial-gradient(circle at top center,
        rgba(37,99,235,.05),
        transparent 50%),
        #ffffff;
}

/* =========================================
   HEADER
========================================= */

.Loan-module-features-header {
    text-align: center;
    margin-bottom: 70px;
}

.Loan-module-features-tag {
    display: inline-block;
    padding: 8px 18px;
    border-radius: 50px;
    background: #eff6ff;
    color: #2563eb;
    font-size: .85rem;
    font-weight: 600;
    margin-bottom: 20px;
}

.Loan-module-features-title {
    font-size: 3rem;
    font-weight: 800;
    color: #0f172a;
    margin-bottom: 15px;
    line-height: 1.2;
}

.Loan-module-features-title span {
    color: #2563eb;
}

.Loan-module-features-subtitle {
    max-width: 700px;
    margin: auto;
    color: #64748b;
    font-size: 1.05rem;
    line-height: 1.8;
}

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

.Loan-module-features-card {
    background: #ffffff;
    border-radius: 20px;
    padding: 30px;
    height: 100%;
    border: 1px solid #eef2f7;
    transition: .35s ease;
    position: relative;
    overflow: hidden;

    box-shadow:
        0 8px 25px rgba(0,0,0,.04);
}

.Loan-module-features-card::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(
        90deg,
        #2563eb,
        #60a5fa
    );
    transform: scaleX(0);
    transition: .35s ease;
}

.Loan-module-features-card:hover::before {
    transform: scaleX(1);
}

.Loan-module-features-card:hover {
    transform: translateY(-8px);
    box-shadow:
        0 20px 45px rgba(37,99,235,.12);
}

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

.Loan-module-features-icon {
    width: 70px;
    height: 70px;
    border-radius: 18px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 22px;
    font-size: 1.5rem;
}

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

.Loan-module-features-card h4 {
    font-size: 1.15rem;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 12px;
}

.Loan-module-features-card p {
    color: #64748b;
    font-size: .95rem;
    line-height: 1.7;
    margin: 0;
}

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

.color-blue {
    background: #eff6ff;
    color: #2563eb;
}

.color-green {
    background: #ecfdf5;
    color: #10b981;
}

.color-cyan {
    background: #ecfeff;
    color: #06b6d4;
}

.color-teal {
    background: #f0fdfa;
    color: #14b8a6;
}

.color-purple {
    background: #f5f3ff;
    color: #8b5cf6;
}

.color-indigo {
    background: #eef2ff;
    color: #6366f1;
}

.color-pink {
    background: #fdf2f8;
    color: #ec4899;
}

.color-rose {
    background: #fff1f2;
    color: #f43f5e;
}

/* =========================================
   TABLET
========================================= */

@media (max-width: 991px) {

    .Loan-module-features-section {
        padding: 80px 0;
    }

    .Loan-module-features-title {
        font-size: 2.4rem;
    }
}

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

@media (max-width: 576px) {

    .Loan-module-features-section {
        padding: 70px 0;
    }

    .Loan-module-features-header {
        margin-bottom: 40px;
    }

    .Loan-module-features-title {
        font-size: 2rem;
    }

    .Loan-module-features-subtitle {
        font-size: .95rem;
    }

    .Loan-module-features-card {
        padding: 24px;
    }

    .Loan-module-features-icon {
        width: 60px;
        height: 60px;
        font-size: 1.3rem;
    }

    .Loan-module-features-card h4 {
        font-size: 1rem;
    }

    .Loan-module-features-card p {
        font-size: .85rem;
    }
}

/* =========================================
   LOAN-MODULE-MODULE SECTION
   ========================================= */

.Loan-module-module-section {
    background-color: #ffffff;
    padding: 30px 0;
}

/* --- Section Header --- */
.Loan-module-module-header {
    margin-bottom: 40px;
}

.Loan-module-module-title {
    font-size: 2.2rem;
    font-weight: 700;
    color: #0f172a;
}

/* =========================================
   MODULE CARDS
   ========================================= */

.Loan-module-module-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #ffffff;
    padding: 28px 16px 24px;
    border-radius: 16px;
    border: 1px solid #f1f5f9;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    height: 100%;
    text-align: center;
}

    .Loan-module-module-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.04);
        border-color: #e2e8f0;
    }

/* --- Circular Icon Wrappers --- */
.Loan-module-module-icon {
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    border-radius: 50%; /* Makes it a perfect circle */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    margin-bottom: 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
}

/* --- Title --- */
.Loan-module-module-name {
    font-size: 0.95rem;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 12px;
}

/* --- Feature List --- */
.Loan-module-module-list {
    width: 100%;
    padding: 0 4px;
}

    .Loan-module-module-list li {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        font-size: 0.75rem;
        color: #475569;
        font-weight: 500;
        padding: 5px 0;
        line-height: 1.2;
    }

        .Loan-module-module-list li i {
            font-size: 0.4rem;
            color: #94a3b8;
        }

/* =========================================
   ICON COLOR VARIATIONS
   ========================================= */

.color-purple {
    background-color: #f3e8ff;
    color: #9333ea;
}

.color-blue {
    background-color: #eff6ff;
    color: #2563eb;
}

.color-cyan {
    background-color: #ecfeff;
    color: #06b6d4;
}

.color-orange {
    background-color: #fff7ed;
    color: #ea580c;
}

.color-green {
    background-color: #ecfdf5;
    color: #16a34a;
}

.color-indigo {
    background-color: #eef2ff;
    color: #6366f1;
}


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

@media (max-width: 1400px) {
    /* Slightly adjust font sizes for very large screens to keep 6 columns happy */
    .Loan-module-module-name {
        font-size: 0.9rem;
    }

    .Loan-module-module-list li {
        font-size: 0.7rem;
    }
}

@media (max-width: 992px) {
    .Loan-module-module-section {
        padding: 60px 0;
    }

    .Loan-module-module-title {
        font-size: 2rem;
    }

    .Loan-module-module-card {
        padding: 24px 12px 20px;
    }

    .Loan-module-module-list li {
        font-size: 0.8rem;
    }
}

@media (max-width: 576px) {
    .Loan-module-module-title {
        font-size: 1.6rem;
    }

    .Loan-module-module-icon {
        width: 48px;
        height: 48px;
        font-size: 1.1rem;
    }
}

.loan-industries-section {
    padding: 40px 0;
    background: #ffffff;
}

/* =========================
   LAYOUT
========================= */

.industries-layout {
    display: grid;
    grid-template-columns: 450px 1fr;
    gap: 80px;
    align-items: start;
}

/* =========================
   LEFT STICKY
========================= */

.industries-left {
    position: sticky;
    top: 120px;
}

.industry-badge {
    display: inline-flex;
    align-items: center;
    padding: 10px 18px;
    border-radius: 50px;
    background: #eef4ff;
    color: #2563eb;
    font-size: .85rem;
    font-weight: 700;
    margin-bottom: 25px;
}

.industry-title {
    font-size: 3.8rem;
    line-height: 1.1;
    font-weight: 800;
    color: #0f172a;
    margin-bottom: 25px;
}

    .industry-title span {
        background: linear-gradient( 90deg, #2563eb, #7c3aed );
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }

.industry-subtitle {
    color: #64748b;
    font-size: 1.05rem;
    line-height: 1.9;
}

/* =========================
   RIGHT SIDE
========================= */

.industries-right {
    display: flex;
    flex-direction: column;
    gap: 28px;
}

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

.industry-card {
    color: black;
    display: flex;
    align-items: center;
    gap: 25px;
    padding: 35px;
    background: #fff;
    border: 1px solid #edf2f7;
    border-radius: 28px;
    transition: .35s ease;
    box-shadow: 0 10px 30px rgba(15,23,42,.04);
}

    .industry-card:hover {
        transform: translateX(12px);
        box-shadow: 0 25px 60px rgba(37,99,235,.12);
    }

.industry-icon {
    width: 80px;
    height: 80px;
    min-width: 80px;
    border-radius: 22px;
    background: linear-gradient( 135deg, #2563eb, #60a5fa );
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.8rem;
}

.industry-card h4 {
    font-size: 1.35rem;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 8px;
}

.industry-card p {
    margin: 0;
    color: #64748b;
    line-height: 1.8;
}

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

@media(max-width:991px) {

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

    .industries-left {
        position: relative;
        top: 0;
    }

    .industry-title {
        font-size: 2.6rem;
    }
}

@media(max-width:576px) {

    .industry-title {
        font-size: 2rem;
    }

    .industry-card {
        padding: 25px;
        gap: 18px;
    }

    .industry-icon {
        width: 65px;
        height: 65px;
        min-width: 65px;
    }
}
/* =========================================
   PROCESS SECTION
========================================= */

.loan-module-process-section {
    padding: 40px 0;
    background: #f7f7fb;
}

.loan-module-process-header {
    text-align: center;
    margin-bottom: 80px;
}

.process-tag {
    display: inline-block;
    padding: 10px 22px;
    border-radius: 50px;
    background: rgba(99,102,241,.08);
    color: #6366f1;
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: 1px;
    margin-bottom: 20px;
}

.loan-module-process-title {
    font-size: 3.6rem;
    font-weight: 800;
    color: #0f172a;
    line-height: 1.15;
    max-width: 950px;
    margin: auto;
}

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

.loan-module-process-grid {
    position: relative;
    display: grid;
    grid-template-columns: repeat(7,1fr);
    gap: 20px;
}

/* DOTTED LINE */

.loan-module-process-line {
    position: absolute;
    left: 8%;
    right: 8%;
    top: 35px;
    border-top: 2px dashed #d1d5db;
    z-index: 0;
}

/* =========================================
   STEP
========================================= */

.loan-module-process-step {
    text-align: center;
    position: relative;
    z-index: 2;
}

.loan-module-process-circle {
    width: 74px;
    height: 74px;
    border-radius: 50%;
    background: #fff;
    margin: 0 auto 25px;
    border: 1px solid #e5e7eb;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: .3s ease;
}

    .loan-module-process-circle i {
        font-size: 24px;
        color: #6366f1;
    }

.loan-module-process-step:hover .loan-module-process-circle {
    transform: translateY(-8px);
    box-shadow: 0 15px 35px rgba(99,102,241,.12);
}

/* STEP NUMBER */

.step-number {
    position: absolute;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    font-size: .75rem;
    font-weight: 700;
    color: #6366f1;
}

/* TITLES */

.loan-module-process-step h4 {
    font-size: 1.25rem;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 10px;
}

.loan-module-process-step p {
    color: #64748b;
    font-size: .95rem;
    line-height: 1.7;
    max-width: 160px;
    margin: auto;
}

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

@media(max-width:1200px) {

    .loan-module-process-grid {
        grid-template-columns: repeat(4,1fr);
        row-gap: 40px;
    }

    .loan-module-process-line {
        display: none;
    }
}

@media(max-width:768px) {

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

    .loan-module-process-title {
        font-size: 2.4rem;
    }
}

@media(max-width:576px) {

    .loan-module-process-grid {
        grid-template-columns: 1fr;
    }

    .loan-module-process-title {
        font-size: 2rem;
    }
}

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

.Loan-module-faq-section {
    padding: 40px 0;
    background: radial-gradient(circle at top left, rgba(37,99,235,.08), transparent 35%), #f8fbff;
}

/* =========================================
   EQUAL HEIGHT CARDS
========================================= */

.Loan-module-faq-left-card,
.Loan-module-faq-right-card {
    background: rgba(255,255,255,.95);
    backdrop-filter: blur(20px);
    border: 1px solid #edf2f7;
    border-radius: 32px;
    padding: 40px;
    position: relative;
    overflow: hidden;
    height: 100%;
    box-shadow: 0 20px 60px rgba(15,23,42,.06);
    transition: .35s ease;
}

    .Loan-module-faq-left-card:hover,
    .Loan-module-faq-right-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 30px 80px rgba(37,99,235,.08);
    }

.Loan-module-faq-left-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

    /* Top Gradient Line */

    .Loan-module-faq-left-card::before,
    .Loan-module-faq-right-card::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 4px;
        background: linear-gradient( 90deg, #2563eb, #6366f1 );
    }

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

.Loan-module-faq-tag {
    display: inline-block;
    padding: 10px 20px;
    border-radius: 50px;
    background: #eef4ff;
    color: #2563eb;
    font-size: .85rem;
    font-weight: 700;
    margin-bottom: 20px;
}

.Loan-module-faq-title {
    font-size: 3rem;
    line-height: 1.15;
    font-weight: 800;
    color: #0f172a;
    margin-bottom: 20px;
}

    .Loan-module-faq-title span {
        background: linear-gradient( 90deg, #2563eb, #6366f1 );
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }

.Loan-module-faq-desc {
    color: #64748b;
    line-height: 1.9;
    margin-bottom: 40px;
}

/* =========================================
   SUPPORT BOX
========================================= */

.Loan-module-faq-support-box {
    display: flex;
    gap: 20px;
    padding: 25px;
    background: #f8fbff;
    border: 1px solid #e5edf8;
    border-radius: 24px;
}

.Loan-module-faq-support-icon {
    width: 65px;
    height: 65px;
    min-width: 65px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient( 135deg, #2563eb, #6366f1 );
    color: white;
    font-size: 1.4rem;
}

.Loan-module-faq-support-box h6 {
    font-weight: 700;
    margin-bottom: 8px;
    color: #0f172a;
}

.Loan-module-faq-support-box p {
    color: #64748b;
    margin-bottom: 15px;
}

.Loan-module-faq-contact-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #2563eb;
    font-weight: 700;
    text-decoration: none;
}

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

.Loan-module-faq-item {
    border: none !important;
    background: transparent;
    margin-bottom: 16px;
}

.Loan-module-faq-btn {
    background: #fff !important;
    border: 1px solid #e5edf8 !important;
    border-radius: 18px !important;
    padding: 24px !important;
    font-size: 1rem;
    font-weight: 700;
    color: #0f172a !important;
    box-shadow: 0 10px 25px rgba(15,23,42,.03);
}

    .Loan-module-faq-btn:focus {
        box-shadow: none !important;
    }

    .Loan-module-faq-btn:not(.collapsed) {
        color: #2563eb !important;
        background: linear-gradient( 90deg, rgba(37,99,235,.03), rgba(99,102,241,.03) ) !important;
    }

.Loan-module-faq-body {
    background: white;
    border-left: 1px solid #e5edf8;
    border-right: 1px solid #e5edf8;
    border-bottom: 1px solid #e5edf8;
    border-radius: 0 0 18px 18px;
    padding: 25px;
    color: #64748b;
    line-height: 1.8;
}

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

@media(max-width:991px) {

    .Loan-module-faq-title {
        font-size: 2.4rem;
    }

    .Loan-module-faq-left-card,
    .Loan-module-faq-right-card {
        padding: 30px;
    }
}

@media(max-width:576px) {

    .Loan-module-faq-section {
        padding: 80px 0;
    }

    .Loan-module-faq-title {
        font-size: 2rem;
    }

    .Loan-module-faq-support-box {
        flex-direction: column;
    }
}

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

.Loan-module-cta-section {
    padding: 40px 0;
    background: #ffffff;
}

/* CTA CARD */

.Loan-module-cta-wrapper {
    position: relative;
    overflow: hidden;
    border-radius: 24px;
    padding: 45px 50px;
    background: radial-gradient(circle at top right, rgba(59,130,246,.10), transparent 35%), linear-gradient( 135deg, #0f172a, #1e293b );
    box-shadow: 0 15px 40px rgba(15,23,42,.12);
}

    /* Glow */

    .Loan-module-cta-wrapper::before {
        content: "";
        position: absolute;
        width: 250px;
        height: 250px;
        top: -120px;
        right: -100px;
        border-radius: 50%;
        background: radial-gradient( circle, rgba(37,99,235,.22), transparent 70% );
    }

.Loan-module-cta-content {
    position: relative;
    z-index: 2;
}

/* TAG */

.Loan-module-cta-tag {
    display: inline-block;
    padding: 8px 16px;
    border-radius: 50px;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.12);
    color: #93c5fd;
    font-size: .8rem;
    font-weight: 700;
    margin-bottom: 15px;
}

/* TITLE */

.Loan-module-cta-title {
    font-size: 2.2rem;
    font-weight: 800;
    line-height: 1.2;
    color: #ffffff;
    margin-bottom: 12px;
    max-width: 700px;
}

/* DESCRIPTION */

.Loan-module-cta-description {
    color: rgba(255,255,255,.75);
    font-size: .95rem;
    line-height: 1.7;
    margin: 0;
    max-width: 650px;
}

/* BUTTONS */

.Loan-module-cta-buttons {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: flex-end;
}

/* PRIMARY BUTTON */

.Loan-module-cta-primary-btn {
    min-width: 220px;
    padding: 14px 24px;
    border-radius: 12px;
    background: #2563eb;
    color: white;
    text-decoration: none;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: .3s ease;
}

    .Loan-module-cta-primary-btn:hover {
        background: #1d4ed8;
        color: white;
        transform: translateY(-2px);
    }

/* SECONDARY BUTTON */

.Loan-module-cta-secondary-btn {
    min-width: 220px;
    padding: 14px 24px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,.15);
    background: rgba(255,255,255,.05);
    color: white;
    text-decoration: none;
    font-weight: 700;
    text-align: center;
    transition: .3s ease;
}

    .Loan-module-cta-secondary-btn:hover {
        background: rgba(255,255,255,.12);
        color: white;
    }

/* RESPONSIVE */

@media(max-width:991px) {

    .Loan-module-cta-wrapper {
        padding: 35px 25px;
        text-align: center;
    }

    .Loan-module-cta-title {
        font-size: 1.9rem;
    }

    .Loan-module-cta-buttons {
        margin-top: 25px;
        align-items: center;
    }
}

@media(max-width:576px) {

    .Loan-module-cta-section {
        padding: 60px 0;
    }

    .Loan-module-cta-title {
        font-size: 1.6rem;
    }

    .Loan-module-cta-primary-btn,
    .Loan-module-cta-secondary-btn {
        width: 100%;
        min-width: 100%;
    }
}

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

.TBS-hero-section {
    position: relative;
    overflow: hidden;
    padding: 120px 0 60px;
    background: radial-gradient(circle at top left, rgba(139,92,246,.18), transparent 35%), radial-gradient(circle at bottom right, rgba(59,130,246,.15), transparent 35%), linear-gradient( 135deg, #050816 0%, #091122 35%, #111936 70%, #0b1020 100% );
}

/* Glow Orbs */

.TBS-gradient-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(120px);
    pointer-events: none;
}

.orb-1 {
    width: 500px;
    height: 500px;
    background: rgba(168,85,247,.25);
    top: -200px;
    left: -200px;
}

.orb-2 {
    width: 450px;
    height: 450px;
    background: rgba(59,130,246,.18);
    bottom: -150px;
    right: -150px;
}

/* Content */

.TBS-hero-tag {
    display: inline-flex;
    align-items: center;
    padding: 8px 18px;
    border-radius: 100px;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.08);
    color: #b794f6;
    font-size: .85rem;
    font-weight: 600;
    margin-bottom: 24px;
}

.TBS-hero-title {
    color: #fff;
    font-size: 4.2rem;
    line-height: 1.05;
    font-weight: 800;
    margin-bottom: 24px;
}

    .TBS-hero-title span {
        display: block;
        background: linear-gradient( 90deg, #a855f7, #8b5cf6, #3b82f6 );
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }

.TBS-hero-desc {
    color: rgba(255,255,255,.72);
    font-size: 1.1rem;
    line-height: 1.8;
    max-width: 560px;
    margin-bottom: 35px;
}

/* Buttons */

.TBS-hero-buttons {
    display: flex;
    gap: 16px;
    margin-bottom: 35px;
}

.TBS-btn-primary {
    padding: 16px 32px;
    border-radius: 14px;
    text-decoration: none;
    font-weight: 600;
    color: #fff;
    background: linear-gradient( 135deg, #7c3aed, #a855f7 );
    box-shadow: 0 15px 35px rgba(168,85,247,.35);
    transition: .3s;
}

    .TBS-btn-primary:hover {
        transform: translateY(-3px);
        color: #fff;
    }

.TBS-btn-secondary {
    padding: 16px 32px;
    border-radius: 14px;
    text-decoration: none;
    color: #fff;
    border: 1px solid rgba(255,255,255,.1);
    background: rgba(255,255,255,.05);
    backdrop-filter: blur(15px);
}

    .TBS-btn-secondary i {
        margin-right: 8px;
    }

/* Trust Points */

.TBS-trust-points {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    list-style: none;
    padding: 0;
    margin: 0;
}

    .TBS-trust-points li {
        color: rgba(255,255,255,.85);
        font-size: .95rem;
    }

    .TBS-trust-points i {
        color: #8b5cf6;
        margin-right: 8px;
    }

/* Dashboard */

.TBS-dashboard-wrapper {
    position: relative;
    padding: 20px;
    border-radius: 30px;
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.08);
    backdrop-filter: blur(18px);
}

    .TBS-dashboard-wrapper::before {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: 30px;
        padding: 1px;
        background: linear-gradient( 135deg, rgba(168,85,247,.5), rgba(59,130,246,.3) );
        -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
        -webkit-mask-composite: xor;
        mask-composite: exclude;
    }

.TBS-dashboard-image {
    width: 100%;
    border-radius: 20px;
    position: relative;
    z-index: 2;
}

/* Responsive */

@media(max-width:991px) {

    .TBS-hero-section {
        padding: 130px 0 60px;
    }

    .TBS-hero-title {
        font-size: 3rem;
    }

    .TBS-dashboard-wrapper {
        margin-top: 20px;
    }
}

@media(max-width:576px) {

    .TBS-hero-title {
        font-size: 2.3rem;
    }

    .TBS-hero-buttons {
        flex-direction: column;
    }

    .TBS-btn-primary,
    .TBS-btn-secondary {
        text-align: center;
    }

    .TBS-trust-points {
        flex-direction: column;
        gap: 12px;
    }
}

/* =========================================
   TRAVEL SOFTWARE SOLUTIONS
========================================= */

.TBS-solutions-section {
    padding: 60px 0;
    background: radial-gradient(circle at top left, rgba(124,58,237,.06), transparent 35%), #fff;
}

    .TBS-solutions-section .container {
        max-width: 1600px;
    }

/* =========================================
   HEADER
========================================= */

.TBS-solutions-header {
    max-width: 760px;
    margin: 0 auto 65px;
}

.TBS-section-badge {
    display: inline-flex;
    align-items: center;
    padding: 10px 18px;
    border-radius: 999px;
    background: rgba(124,58,237,.08);
    color: #7c3aed;
    font-size: .9rem;
    font-weight: 600;
    margin-bottom: 20px;
}

.TBS-solutions-title {
    font-size: 3rem;
    font-weight: 800;
    line-height: 1.15;
    color: #0f172a;
    margin-bottom: 16px;
}

    .TBS-solutions-title span {
        display: block;
        background: linear-gradient( 90deg, #7c3aed, #3b82f6 );
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }

.TBS-solutions-subtitle {
    color: #64748b;
    font-size: 1rem;
    line-height: 1.8;
}

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

.TBS-feature-row {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 20px;
}

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

.TBS-feature-card {
    position: relative;
    height: 235px;
    padding: 28px 20px;
    border-radius: 22px;
    background: linear-gradient( 180deg, #ffffff 0%, #fafbff 100% );
    border: 1px solid #e8edf5;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    transition: all .35s ease;
    overflow: hidden;
}

    .TBS-feature-card::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 4px;
        background: linear-gradient( 90deg, #7c3aed, #3b82f6 );
        opacity: 0;
        transition: .3s ease;
    }

    .TBS-feature-card:hover {
        transform: translateY(-8px);
        border-color: rgba(124,58,237,.15);
        box-shadow: 0 20px 40px rgba(15,23,42,.08), 0 8px 20px rgba(124,58,237,.06);
    }

        .TBS-feature-card:hover::before {
            opacity: 1;
        }

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

.TBS-feature-icon {
    width: 58px;
    height: 58px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
    font-size: 1.5rem;
}

/* ICON COLORS */

.blue {
    background: rgba(59,130,246,.12);
    color: #2563eb;
}

.green {
    background: rgba(16,185,129,.12);
    color: #10b981;
}

.purple {
    background: rgba(139,92,246,.12);
    color: #8b5cf6;
}

.orange {
    background: rgba(249,115,22,.12);
    color: #f97316;
}

.pink {
    background: rgba(236,72,153,.12);
    color: #ec4899;
}

.cyan {
    background: rgba(6,182,212,.12);
    color: #06b6d4;
}

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

.TBS-feature-title {
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.45;
    color: #0f172a;
    margin-bottom: 12px;
    min-height: 52px;
}

/* =========================================
   DESCRIPTION
========================================= */

.TBS-feature-desc {
    color: #64748b;
    font-size: .85rem;
    line-height: 1.75;
    margin: 0;
}

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

@media (max-width: 1400px) {

    .TBS-feature-row {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 991px) {

    .TBS-solutions-title {
        font-size: 2.3rem;
    }

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

    .TBS-feature-card {
        height: auto;
        min-height: 220px;
    }
}

@media (max-width: 576px) {

    .TBS-solutions-section {
        padding: 70px 0;
    }

    .TBS-solutions-title {
        font-size: 1.9rem;
    }

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


/* =========================================
   PROJECTS SECTION
========================================= */
.TBS-projects-section {
    position: relative;
    padding: 40px 0;
    background: radial-gradient(circle at top right, rgba(124,58,237,.08), transparent 30%), linear-gradient( 180deg, #ffffff 0%, #fafbff 100% );
}

.TBS-projects-section .container {
    max-width: 1450px;
}

/* =========================================
   HEADER
========================================= */

.TBS-projects-header {
    max-width: 800px;
    margin: 0 auto 70px;
}

.TBS-projects-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: 999px;
    background: rgba(124,58,237,.08);
    color: #7c3aed;
    font-size: .9rem;
    font-weight: 600;
    margin-bottom: 20px;
}

.TBS-projects-title {
    font-size: 3.2rem;
    font-weight: 800;
    line-height: 1.1;
    color: #0f172a;
    margin-bottom: 18px;
}

    .TBS-projects-title span {
        display: block;
        background: linear-gradient( 90deg, #7c3aed, #3b82f6 );
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }

.TBS-projects-subtitle {
    font-size: 1.05rem;
    line-height: 1.8;
    color: #64748b;
}

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

.TBS-projects-card {
    position: relative;
    background: rgba(255,255,255,.85);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(226,232,240,.9);
    border-radius: 24px;
    padding: 24px;
    height: 100%;
    overflow: hidden;
    transition: all .35s ease;
    box-shadow: 0 10px 25px rgba(15,23,42,.04);
}

    .TBS-projects-card::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 4px;
        background: linear-gradient( 90deg, #7c3aed, #3b82f6 );
        opacity: 0;
        transition: .3s ease;
    }

    .TBS-projects-card:hover {
        transform: translateY(-10px);
        box-shadow: 0 25px 50px rgba(15,23,42,.08);
        border-color: rgba(124,58,237,.15);
    }

        .TBS-projects-card:hover::before {
            opacity: 1;
        }

/* =========================================
   HEADER
========================================= */

.TBS-projects-card-header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 16px;
}

.TBS-projects-logo-wrap {
    width: 54px;
    height: 54px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
}

.logo-blue {
    background: rgba(37,99,235,.12);
    color: #2563eb;
}

.logo-red {
    background: rgba(239,68,68,.12);
    color: #ef4444;
}

.logo-orange {
    background: rgba(249,115,22,.12);
    color: #f97316;
}

.TBS-projects-name {
    margin: 0;
    font-size: 1.35rem;
    font-weight: 700;
    color: #0f172a;
}

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

.TBS-projects-badge {
    display: inline-flex;
    padding: 8px 14px;
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 600;
    margin-bottom: 20px;
}

.badge-purple {
    background: rgba(147,51,234,.10);
    color: #9333ea;
}

.badge-blue {
    background: rgba(37,99,235,.10);
    color: #2563eb;
}

.badge-red {
    background: rgba(239,68,68,.10);
    color: #ef4444;
}

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

.TBS-projects-img-wrap {
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid #eef2f7;
    margin-bottom: 22px;
}

    .TBS-projects-img-wrap img {
        width: 100%;
        display: block;
        transition: transform .4s ease;
    }

.TBS-projects-card:hover .TBS-projects-img-wrap img {
    transform: scale(1.05);
}

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

.TBS-projects-list {
    margin-bottom: 24px;
}

    .TBS-projects-list li {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 6px 0;
        font-size: .95rem;
        color: #334155;
    }

        .TBS-projects-list li i {
            color: #10b981;
        }

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

.TBS-projects-stats {
    display: flex;
    justify-content: space-between;
    padding: 18px 0;
    margin-bottom: 10px;
    border-top: 1px solid #eef2f7;
}

.TBS-projects-stat-number {
    display: block;
    font-size: 1.5rem;
    font-weight: 800;
    color: #4f46e5;
}

.TBS-projects-stat-label {
    font-size: .8rem;
    color: #64748b;
}

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

.TBS-projects-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: #4f46e5;
    font-weight: 600;
    transition: .3s ease;
}

    .TBS-projects-link:hover {
        gap: 14px;
        color: #4338ca;
    }

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

@media(max-width:991px) {

    .TBS-projects-title {
        font-size: 2.5rem;
    }
}

@media(max-width:576px) {

    .TBS-projects-section {
        padding: 70px 0;
    }

    .TBS-projects-title {
        font-size: 2rem;
    }

    .TBS-projects-card {
        padding: 20px;
    }
}


/* ==========================================
   BOOKING JOURNEY SECTION
========================================== */

.TBS-journey-section {
    padding: 40px 0;
    background: linear-gradient(180deg, #ffffff 0%, #fafbff 100%);
    overflow: hidden;
}

/* ==========================================
   HEADER
========================================== */

.TBS-journey-header {
    text-align: center;
    max-width: 720px;
    margin: 0 auto 60px;
}

.TBS-journey-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 18px;
    background: #eef2ff;
    color: #4f46e5;
    border-radius: 50px;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 18px;
    letter-spacing: .3px;
}

.TBS-journey-title {
    font-size: 42px;
    font-weight: 800;
    line-height: 1.2;
    color: #0f172a;
    margin-bottom: 16px;
    letter-spacing: -0.5px;
}

.TBS-journey-subtitle {
    font-size: 17px;
    line-height: 1.7;
    color: #64748b;
    margin: 0;
}

/* ==========================================
   WRAPPER
========================================== */

.TBS-journey-wrapper {
    position: relative;
}

/* ==========================================
   STEP ITEM
========================================== */

.TBS-journey-step {
    position: relative;
    text-align: center;
    transition: all .3s ease;
}

.TBS-journey-icon-wrapper {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 20px;
}

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

.TBS-journey-icon-circle {
    width: 84px;
    height: 84px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .35s ease;
    box-shadow: 0 10px 25px rgba(15, 23, 42, 0.06);
}

    .TBS-journey-icon-circle svg {
        width: 34px;
        height: 34px;
        stroke-width: 2;
    }

.TBS-journey-step:hover .TBS-journey-icon-circle {
    transform: translateY(-6px);
    box-shadow: 0 20px 40px rgba(15, 23, 42, 0.12);
}

/* ==========================================
   ARROW
========================================== */

.TBS-journey-arrow {
    position: absolute;
    top: 50%;
    right: -22px;
    transform: translateY(-50%);
    color: #d1d5db;
    font-size: 28px;
    font-weight: 300;
    transition: all .3s ease;
}

.TBS-journey-step:hover .TBS-journey-arrow {
    color: #94a3b8;
}

/* ==========================================
   STEP TITLE
========================================== */

.TBS-journey-step-title {
    font-size: 18px;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 8px;
}

.TBS-journey-step-desc {
    font-size: 14px;
    line-height: 1.6;
    color: #64748b;
    max-width: 140px;
    margin: 0 auto;
}

/* ==========================================
   COLORS
========================================== */

.color-blue {
    background: #eef2ff;
    color: #4f46e5;
}

.color-green {
    background: #ecfdf5;
    color: #10b981;
}

.color-orange {
    background: #fff7ed;
    color: #f97316;
}

.color-teal {
    background: #ecfeff;
    color: #14b8a6;
}

.color-red {
    background: #fef2f2;
    color: #ef4444;
}

.color-purple {
    background: #f5f3ff;
    color: #8b5cf6;
}

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

.TBS-journey-step:hover .TBS-journey-step-title {
    color: #4f46e5;
}

/* ==========================================
   TABLET
========================================== */

@media (max-width: 991px) {

    .TBS-journey-section {
        padding: 80px 0;
    }

    .TBS-journey-title {
        font-size: 34px;
    }

    .TBS-journey-subtitle {
        font-size: 16px;
    }

    .TBS-journey-step {
        margin-bottom: 35px;
    }

    .TBS-journey-icon-circle {
        width: 72px;
        height: 72px;
    }

        .TBS-journey-icon-circle svg {
            width: 30px;
            height: 30px;
        }

    .TBS-journey-arrow {
        display: none !important;
    }
}

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

@media (max-width: 576px) {

    .TBS-journey-section {
        padding: 70px 0;
    }

    .TBS-journey-header {
        margin-bottom: 45px;
    }

    .TBS-journey-badge {
        font-size: 13px;
        padding: 7px 16px;
    }

    .TBS-journey-title {
        font-size: 28px;
    }

    .TBS-journey-subtitle {
        font-size: 15px;
    }

    .TBS-journey-icon-circle {
        width: 64px;
        height: 64px;
    }

        .TBS-journey-icon-circle svg {
            width: 26px;
            height: 26px;
        }

    .TBS-journey-step-title {
        font-size: 16px;
    }

    .TBS-journey-step-desc {
        font-size: 13px;
        max-width: 120px;
    }
}

/* ============================
   SOFTWARE FEATURES SECTION
============================ */

.TBS-software-section {
    padding: 40px 0;
    background: linear-gradient(180deg,#f8fafc 0%,#ffffff 100%);
}

/* Main Container */

.TBS-software-wrapper {
    background: #fff;
    border-radius: 32px;
    padding: 60px;
    box-shadow: 0 20px 60px rgba(15,23,42,.08);
}

/* Left Content */

.TBS-software-content {
    max-width: 500px;
}

.TBS-software-badge {
    display: inline-block;
    padding: 8px 18px;
    background: #eef2ff;
    color: #4f46e5;
    border-radius: 50px;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 20px;
}

.TBS-software-title {
    font-size: 44px;
    font-weight: 800;
    line-height: 1.2;
    color: #0f172a;
    margin-bottom: 20px;
}

.TBS-software-subtitle {
    font-size: 17px;
    line-height: 1.8;
    color: #64748b;
    margin-bottom: 30px;
}

.TBS-software-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 28px;
    background: #4f46e5;
    color: #fff;
    border-radius: 12px;
    text-decoration: none;
    font-weight: 600;
    transition: .3s;
}

    .TBS-software-btn:hover {
        background: #4338ca;
        color: #fff;
    }

/* Feature Cards */

.TBS-software-feature-card {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    padding: 22px;
    height: 100%;
    background: #fff;
    border: 1px solid #eef2f7;
    border-radius: 18px;
    transition: .3s ease;
}

    .TBS-software-feature-card:hover {
        transform: translateY(-6px);
        box-shadow: 0 15px 35px rgba(15,23,42,.08);
    }

    .TBS-software-feature-card h5 {
        font-size: 17px;
        font-weight: 700;
        margin-bottom: 6px;
        color: #0f172a;
    }

    .TBS-software-feature-card p {
        margin: 0;
        color: #64748b;
        font-size: 14px;
        line-height: 1.6;
    }

/* Icons */

.TBS-software-icon {
    width: 54px;
    height: 54px;
    border-radius: 14px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}

.blue {
    background: #eef2ff;
    color: #4f46e5;
}

.green {
    background: #ecfdf5;
    color: #10b981;
}

.orange {
    background: #fff7ed;
    color: #f97316;
}

.pink {
    background: #fdf2f8;
    color: #ec4899;
}

.purple {
    background: #f5f3ff;
    color: #8b5cf6;
}

.cyan {
    background: #ecfeff;
    color: #06b6d4;
}

.violet {
    background: #faf5ff;
    color: #a855f7;
}

/* Responsive */

@media(max-width:991px) {

    .TBS-software-wrapper {
        padding: 40px 30px;
    }

    .TBS-software-title {
        font-size: 36px;
    }

    .TBS-software-content {
        text-align: center;
        max-width: 100%;
    }
}

@media(max-width:576px) {

    .TBS-software-section {
        padding: 70px 0;
    }

    .TBS-software-wrapper {
        padding: 25px;
        border-radius: 24px;
    }

    .TBS-software-title {
        font-size: 30px;
    }

    .TBS-software-subtitle {
        font-size: 15px;
    }

    .TBS-software-feature-card {
        padding: 18px;
    }
}

/* ==========================================
   WHY CHOOSE DEVLOK
========================================== */

.TBS-whyus-section {
    position: relative;
    padding: 80px 0;
    background: linear-gradient( 135deg, #07144f 0%, #0a1d68 50%, #08174d 100% );
    overflow: hidden;
}

    /* Background Pattern */

    .TBS-whyus-section::before {
        content: "";
        position: absolute;
        inset: 0;
        background: radial-gradient(circle at top center, rgba(255,255,255,.08), transparent 40%);
        pointer-events: none;
    }

/* Header */

.TBS-whyus-header {
    margin-bottom: 50px;
    position: relative;
    z-index: 2;
}

.TBS-whyus-title {
    color: #fff;
    font-size: 38px;
    font-weight: 800;
    margin-bottom: 10px;
}

.TBS-whyus-subtitle {
    color: rgba(255,255,255,.75);
    font-size: 16px;
    margin: 0;
}

/* Cards */

.TBS-whyus-card {
    position: relative;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 16px;
    padding: 24px 20px;
    text-align: center;
    height: 100%;
    transition: all .35s ease;
    backdrop-filter: blur(10px);
}

    .TBS-whyus-card:hover {
        transform: translateY(-6px);
        background: rgba(255,255,255,.1);
        border-color: rgba(255,255,255,.18);
    }

/* Icon */

.TBS-whyus-icon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    margin: 0 auto 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
}

    .TBS-whyus-icon i {
        color: inherit;
    }

/* Colors */

.purple {
    background: rgba(139,92,246,.15);
    color: #a78bfa;
}

.green {
    background: rgba(16,185,129,.15);
    color: #34d399;
}

.blue {
    background: rgba(59,130,246,.15);
    color: #60a5fa;
}

.cyan {
    background: rgba(6,182,212,.15);
    color: #22d3ee;
}

.violet {
    background: rgba(168,85,247,.15);
    color: #c084fc;
}

.mint {
    background: rgba(16,185,129,.15);
    color: #6ee7b7;
}

/* Text */

.TBS-whyus-card h4 {
    color: #fff;
    font-size: 17px;
    font-weight: 700;
    margin-bottom: 6px;
}

.TBS-whyus-card p {
    color: rgba(255,255,255,.75);
    font-size: 14px;
    margin: 0;
    line-height: 1.6;
}

/* Arrow */

.TBS-whyus-arrow {
    position: absolute;
    right: -18px;
    top: 50%;
    transform: translateY(-50%);
    color: #34d399;
    font-size: 20px;
    z-index: 5;
}

.col-lg-2:last-child .TBS-whyus-arrow {
    display: none;
}

/* Responsive */

@media(max-width:991px) {

    .TBS-whyus-arrow {
        display: none;
    }

    .TBS-whyus-title {
        font-size: 32px;
    }

    .TBS-whyus-card {
        padding: 20px;
    }
}

@media(max-width:576px) {

    .TBS-whyus-section {
        padding: 60px 0;
    }

    .TBS-whyus-title {
        font-size: 28px;
    }

    .TBS-whyus-subtitle {
        font-size: 14px;
    }

    .TBS-whyus-card h4 {
        font-size: 15px;
    }

    .TBS-whyus-card p {
        font-size: 13px;
    }
}

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

.TBS-faq-section {
    padding: 40px 0;
    background: #f8fafc;
}

.TBS-faq-header {
    max-width: 750px;
    margin: 0 auto 60px;
}

.TBS-faq-badge {
    display: inline-block;
    padding: 8px 18px;
    background: #eef2ff;
    color: #4f46e5;
    border-radius: 50px;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 18px;
}

.TBS-faq-title {
    font-size: 42px;
    font-weight: 800;
    color: #0f172a;
    margin-bottom: 15px;
}

.TBS-faq-subtitle {
    color: #64748b;
    font-size: 17px;
}

/* FAQ BOX */

.TBS-faq-box,
.TBS-faq-cta {
    height: 100%;
}

.TBS-faq-box {
    background: #fff;
    padding: 30px;
    border-radius: 24px;
    box-shadow: 0 15px 40px rgba(15,23,42,.06);
}

/* FAQ ITEMS */

.TBS-faq-item {
    border-bottom: 1px solid #edf2f7;
}

    .TBS-faq-item:last-child {
        border-bottom: 0;
    }

.TBS-faq-question {
    width: 100%;
    border: 0;
    background: none;
    text-align: left;
    padding: 22px 0;
    font-size: 18px;
    font-weight: 600;
    color: #0f172a;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
}

    .TBS-faq-question span {
        font-size: 24px;
        color: #4f46e5;
        transition: .3s;
    }

.TBS-faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: all .35s ease;
}

.TBS-faq-item.active .TBS-faq-answer {
    max-height: 200px;
    padding-bottom: 20px;
}

.TBS-faq-answer p {
    color: #64748b;
    line-height: 1.8;
    margin: 0;
}

.TBS-faq-item.active .TBS-faq-question span {
    transform: rotate(45deg);
}

/* CTA */

.TBS-faq-cta {
    background: linear-gradient( 135deg, #4f46e5, #6366f1 );
    border-radius: 24px;
    padding: 40px;
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.TBS-faq-cta-icon {
    width: 70px;
    height: 70px;
    border-radius: 18px;
    background: rgba(255,255,255,.15);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 25px;
    font-size: 28px;
}

.TBS-faq-cta h3 {
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 15px;
}

.TBS-faq-cta p {
    color: rgba(255,255,255,.85);
    margin-bottom: 25px;
}

.TBS-faq-cta-list {
    padding: 0;
    margin: 0 0 30px;
    list-style: none;
}

    .TBS-faq-cta-list li {
        margin-bottom: 12px;
        position: relative;
        padding-left: 24px;
    }

        .TBS-faq-cta-list li:before {
            content: "✓";
            position: absolute;
            left: 0;
        }

.TBS-faq-btn {
    display: inline-block;
    background: #fff;
    color: #4f46e5;
    text-decoration: none;
    padding: 14px 28px;
    border-radius: 12px;
    font-weight: 600;
    text-align: center;
}

    .TBS-faq-btn:hover {
        color: #4f46e5;
    }

/* Responsive */

@media(max-width:991px) {

    .TBS-faq-title {
        font-size: 34px;
    }

    .TBS-faq-cta {
        margin-top: 10px;
    }
}

@media(max-width:576px) {

    .TBS-faq-section {
        padding: 70px 0;
    }

    .TBS-faq-title {
        font-size: 28px;
    }

    .TBS-faq-box,
    .TBS-faq-cta {
        padding: 25px;
    }

    .TBS-faq-question {
        font-size: 16px;
    }
}


/* ==================================
   FINTECH HERO SECTION
================================== */

.Fintech-hero {
    background: #060B18;
    padding: 120px 0 60px;
    overflow: hidden;
    position: relative;
}

    /* ==================================
   BACKGROUND GLOW EFFECTS
================================== */

    .Fintech-hero::before {
        content: "";
        position: absolute;
        width: 650px;
        height: 650px;
        top: -180px;
        right: -180px;
        background: radial-gradient( circle, rgba(59, 130, 246, 0.25), transparent 70% );
        pointer-events: none;
    }

    .Fintech-hero::after {
        content: "";
        position: absolute;
        width: 550px;
        height: 550px;
        left: -180px;
        bottom: -180px;
        background: radial-gradient( circle, rgba(139, 92, 246, 0.20), transparent 70% );
        pointer-events: none;
    }

    .Fintech-hero .container {
        position: relative;
        z-index: 2;
    }

/* ==================================
   TYPOGRAPHY
================================== */

.Fintech-hero-title {
    font-size: 64px;
    font-weight: 800;
    line-height: 1.1;
    color: #ffffff;
    margin-bottom: 25px;
}

    .Fintech-hero-title span {
        display: block;
        background: linear-gradient( 90deg, #22d3ee, #7c3aed );
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

.Fintech-hero-desc {
    font-size: 22px;
    line-height: 1.7;
    color: #b8c0d0;
    margin-bottom: 35px;
    max-width: 550px;
}

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

.Fintech-feature-row {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    margin-bottom: 40px;
}

.feature-item {
    color: #ffffff;
    font-size: 16px;
    font-weight: 500;
    display: flex;
    align-items: center;
}

    .feature-item i {
        color: #22d3ee;
        margin-right: 8px;
        font-size: 18px;
    }

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

.hero-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
}

.btn-fintech-primary {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 15px 32px;
    border-radius: 12px;
    text-decoration: none;
    font-weight: 600;
    color: #ffffff;
    background: linear-gradient( 90deg, #3b82f6, #7c3aed );
    transition: all 0.3s ease;
}

    .btn-fintech-primary:hover {
        color: #ffffff;
        transform: translateY(-3px);
        box-shadow: 0 15px 35px rgba(59, 130, 246, 0.35);
    }

.btn-fintech-outline {
    display: inline-flex;
    align-items: center;
    padding: 15px 32px;
    border-radius: 12px;
    text-decoration: none;
    color: #ffffff;
    border: 1px solid rgba(255,255,255,0.2);
    transition: all 0.3s ease;
}

    .btn-fintech-outline:hover {
        background: rgba(255,255,255,0.08);
        border-color: rgba(255,255,255,0.4);
        color: #ffffff;
    }

/* ==================================
   DASHBOARD AREA
================================== */

.dashboard-wrapper {
    position: relative;
    padding: 20px;
}

/* Main Dashboard Card */

.dashboard-card {
    position: relative;
    background: rgba(17, 24, 39, 0.9);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 24px;
    overflow: hidden;
    backdrop-filter: blur(20px);
    box-shadow: 0 25px 70px rgba(0,0,0,0.45);
    transform: rotate(-3deg);
    transition: all 0.4s ease;
}

    .dashboard-card:hover {
        transform: rotate(0deg) translateY(-8px);
        box-shadow: 0 35px 90px rgba(0,0,0,0.55);
    }

    .dashboard-card img {
        width: 100%;
        display: block;
        border-radius: 24px;
    }

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

@media (max-width: 1199px) {

    .Fintech-hero-title {
        font-size: 54px;
    }

    .Fintech-hero-desc {
        font-size: 20px;
    }
}

@media (max-width: 991px) {

    .Fintech-hero {
        padding: 120px 0 60px;
        text-align: center;
    }

    .Fintech-hero-title {
        font-size: 42px;
    }

    .Fintech-hero-desc {
        font-size: 18px;
        max-width: 100%;
        margin-left: auto;
        margin-right: auto;
    }

    .Fintech-feature-row {
        justify-content: center;
    }

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

    .dashboard-card {
        margin-top: 50px;
        transform: none;
    }

        .dashboard-card:hover {
            transform: translateY(-5px);
        }
}

@media (max-width: 576px) {

    .Fintech-hero-title {
        font-size: 34px;
    }

    .Fintech-hero-desc {
        font-size: 16px;
    }

    .btn-fintech-primary,
    .btn-fintech-outline {
        width: 100%;
        justify-content: center;
    }

    .hero-buttons {
        flex-direction: column;
    }
}


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

.fintech-services {
    padding: 40px 0;
    background: #f8fafc;
}

/* LEFT CONTENT */

.fintech-services-subtitle {
    display: inline-block;
    font-size: 13px;
    font-weight: 700;
    color: #4f46e5;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 15px;
}

.fintech-services-title {
    font-size: 48px;
    font-weight: 800;
    color: #0f172a;
    line-height: 1.15;
    margin-bottom: 20px;
}

.fintech-services-desc {
    color: #64748b;
    font-size: 18px;
    line-height: 1.8;
    margin-bottom: 30px;
    max-width: 280px;
}

/* BUTTON */

.fintech-services-btn {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    padding: 14px 24px;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    color: #0f172a;
    font-weight: 600;
    transition: .3s;
}

    .fintech-services-btn:hover {
        background: #4f46e5;
        border-color: #4f46e5;
        color: #fff;
    }

/* CARD */

.fintech-services-card {
    background: #fff;
    border-radius: 16px;
    padding: 18px;
    height: 100%;
    border: 1px solid #eef2f7;
    transition: all .35s ease;
    box-shadow: 0 6px 20px rgba(15,23,42,.04);
}

    .fintech-services-card:hover {
        transform: translateY(-6px);
        box-shadow: 0 15px 35px rgba(15,23,42,.10);
    }

/* Header Row */

.fintech-card-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.fintech-services-card h4 {
    font-size: 18px;
    font-weight: 700;
    color: #0f172a;
    margin: 0;
    line-height: 1.4;
}

.fintech-services-card p {
    color: #64748b;
    font-size: 14px;
    line-height: 1.7;
    margin: 0;
}

/* SMALL ICONS */

.fintech-services-icon {
    width: 50px;
    height: 50px;
    min-width: 50px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .fintech-services-icon i {
        font-size: 20px;
    }

/* COLORS */

.fintech-blue {
    background: #e0e7ff;
}

    .fintech-blue i {
        color: #2563eb;
    }

.fintech-green {
    background: #dcfce7;
}

    .fintech-green i {
        color: #16a34a;
    }

.fintech-purple {
    background: #f3e8ff;
}

    .fintech-purple i {
        color: #9333ea;
    }

.fintech-orange {
    background: #ffedd5;
}

    .fintech-orange i {
        color: #ea580c;
    }

.fintech-cyan {
    background: #cffafe;
}

    .fintech-cyan i {
        color: #0891b2;
    }

.fintech-red {
    background: #fee2e2;
}

    .fintech-red i {
        color: #dc2626;
    }

.fintech-lime {
    background: #ecfccb;
}

    .fintech-lime i {
        color: #65a30d;
    }

/* RESPONSIVE */

@media (max-width: 991px) {

    .fintech-services-title {
        font-size: 38px;
    }

    .fintech-services-desc {
        max-width: 100%;
    }

    .fintech-services-content {
        margin-bottom: 30px;
    }
}

@media (max-width: 576px) {

    .fintech-services {
        padding: 60px 0;
    }

    .fintech-services-title {
        font-size: 32px;
    }

    .fintech-services-card {
        padding: 16px;
    }

    .fintech-services-icon {
        width: 45px;
        height: 45px;
        min-width: 45px;
    }

        .fintech-services-icon i {
            font-size: 18px;
        }

    .fintech-services-card h4 {
        font-size: 16px;
    }
}


/* --- Intech Industries Section (Light Theme) --- */
.intech-industries {
    background-color: #f8fafc; /* Very light grey/blue background */
    padding: 40px 0;
}

/* Heading Styling */
.intech-industries-heading {
    font-size: 2.2rem;
    font-weight: 700;
    color: #1e293b;
    line-height: 1.2;
    margin: 0;
}

/* Individual Item Card */
.intech-industry-item {
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 20px 10px;
    text-align: center;
    height: 100%;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
}

.intech-industry-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
    border-color: #cbd5e1;
}

/* Icon Styling */
.intech-industry-icon {
    font-size: 1.8rem;
    margin-bottom: 12px;
    line-height: 1;
}

/* Specific Icon Colors */
.icon-purple { color: #8b5cf6; }
.icon-dark { color: #334155; }
.icon-blue { color: #3b82f6; }
.icon-green { color: #10b981; }
.icon-red { color: #ef4444; }
.icon-pink { color: #ec4899; }
.icon-yellow { color: #f59e0b; }

/* Title Text */
.intech-industry-title {
    font-size: 0.9rem;
    font-weight: 600;
    color: #475569;
    line-height: 1.3;
}

/* Mobile Responsiveness */
@media (max-width: 991px) {
    .intech-industries {
        padding: 40px 0;
    }
    .intech-industries-heading {
        text-align: center;
        margin-bottom: 20px;
        font-size: 1.8rem;
    }
    .intech-industry-item {
        padding: 15px 8px;
    }
    .intech-industry-icon {
        font-size: 1.5rem;
    }
}

/* --- Fintech Process Section (Light Theme) --- */
.fintech-process {
    background-color: #f8fafc;
    padding: 40px 0;
}

.fintech-process-heading {
    font-size: 2.2rem;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 3rem !important;
}

/* Step Container */
.fintech-process-step {
    position: relative;
    text-align: center;
    padding: 0 10px;
    height: 100%;
}

/* The connecting horizontal line */
.fintech-process-step::after {
    content: '';
    position: absolute;
    top: 28px; /* Aligns with center of number circle */
    left: 50%;
    width: 100%; /* Spans to the next element */
    height: 2px;
    background-color: #cbd5e1;
    z-index: 0;
}

/* Hide the line on the very last step */
.fintech-process-step:last-child::after {
    display: none;
}

/* Number Circles */
.fintech-process-number {
    position: relative;
    z-index: 1;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px auto;
    font-weight: 700;
    font-size: 1.1rem;
    background-color: #ffffff;
    border: 2px solid #e2e8f0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.fintech-process-step:hover .fintech-process-number {
    transform: scale(1.1);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
    border-color: transparent;
}

/* Text Styling */
.fintech-process-title {
    font-size: 1rem;
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 6px;
}

.fintech-process-desc {
    font-size: 0.85rem;
    color: #64748b;
    line-height: 1.4;
    margin-bottom: 0;
}

/* --- Gradient Colors for Each Step --- */
.color-01 { color: #3b82f6; border-color: #bfdbfe; }
.fintech-process-step:hover .color-01 { background-color: #3b82f6; color: #ffffff; box-shadow: 0 8px 20px rgba(59, 130, 246, 0.3); }

.color-02 { color: #0ea5e9; border-color: #bae6fd; }
.fintech-process-step:hover .color-02 { background-color: #0ea5e9; color: #ffffff; box-shadow: 0 8px 20px rgba(14, 165, 233, 0.3); }

.color-03 { color: #14b8a6; border-color: #99f6e4; }
.fintech-process-step:hover .color-03 { background-color: #14b8a6; color: #ffffff; box-shadow: 0 8px 20px rgba(20, 184, 166, 0.3); }

.color-04 { color: #10b981; border-color: #a7f3d0; }
.fintech-process-step:hover .color-04 { background-color: #10b981; color: #ffffff; box-shadow: 0 8px 20px rgba(16, 185, 129, 0.3); }

.color-05 { color: #eab308; border-color: #fef08a; }
.fintech-process-step:hover .color-05 { background-color: #eab308; color: #ffffff; box-shadow: 0 8px 20px rgba(234, 179, 8, 0.3); }

.color-06 { color: #f97316; border-color: #fed7aa; }
.fintech-process-step:hover .color-06 { background-color: #f97316; color: #ffffff; box-shadow: 0 8px 20px rgba(249, 115, 22, 0.3); }

.color-07 { color: #ef4444; border-color: #fecaca; }
.fintech-process-step:hover .color-07 { background-color: #ef4444; color: #ffffff; box-shadow: 0 8px 20px rgba(239, 68, 68, 0.3); }

/* --- Mobile Adjustments --- */
@media (max-width: 991px) {
    .fintech-process-heading {
        font-size: 1.8rem;
    }
    /* Hide the connecting line on mobile since it breaks into rows */
    .fintech-process-step::after {
        display: none;
    }
    .fintech-process-number {
        width: 48px;
        height: 48px;
        font-size: 0.9rem;
    }
}

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

.fintech-security {
    background: #070b14;
    padding: 40px 0;
    position: relative;
    overflow: hidden;
}

/* Background Glow */
.fintech-security::before {
    content: "";
    position: absolute;
    width: 500px;
    height: 500px;
    top: -200px;
    right: -150px;
    background: radial-gradient(
        circle,
        rgba(59,130,246,.15),
        transparent 70%
    );
    pointer-events: none;
}

/* Small Tag */

.security-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 18px;
    border-radius: 50px;
    background: rgba(59,130,246,.12);
    border: 1px solid rgba(59,130,246,.25);
    color: #60a5fa;
    font-size: 14px;
    margin-bottom: 20px;
}

/* Heading */

.fintech-security-title {
    font-size: 3rem;
    font-weight: 800;
    color: #fff;
    line-height: 1.1;
    margin-bottom: 20px;
}

.fintech-security-desc {
    color: #94a3b8;
    line-height: 1.8;
    margin-bottom: 35px;
    max-width: 520px;
}

/* Main Shield Card */

.security-main-card {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 10px;
    border-radius: 24px;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.08);
    backdrop-filter: blur(20px);
}

.security-shield {
    width: 90px;
    height: 90px;
    flex-shrink: 0;
    border-radius: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(
        135deg,
        #2563eb,
        #06b6d4
    );
    box-shadow: 0 15px 40px rgba(37,99,235,.4);
}

.security-shield i {
    font-size: 40px;
    color: white;
}

.security-main-card h4 {
    color: white;
    margin-bottom: 8px;
    font-size: 1.2rem;
}

.security-main-card p {
    margin: 0;
    color: #94a3b8;
}

/* Grid */

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

/* Cards */

.security-card {
    padding: 28px 20px;
    text-align: center;
    border-radius: 20px;

    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.08);

    backdrop-filter: blur(15px);

    transition: .35s ease;
}

.security-card:hover {
    transform: translateY(-8px);
    border-color: rgba(59,130,246,.5);

    box-shadow:
        0 15px 40px rgba(37,99,235,.18);
}

.security-card i {
    font-size: 2rem;
    margin-bottom: 15px;

    background: linear-gradient(
        135deg,
        #3b82f6,
        #22d3ee
    );

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.security-card h5 {
    color: white;
    font-size: 1rem;
    margin-bottom: 6px;
}

.security-card span {
    color: #94a3b8;
    font-size: .85rem;
}

/* Responsive */

@media(max-width:991px){

    .fintech-security{
        text-align:center;
        padding:70px 0;
    }

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

    .security-main-card{
        flex-direction:column;
        text-align:center;
    }

    .fintech-security-title{
        font-size:2.3rem;
    }
}

@media(max-width:576px){

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

    .fintech-security-title{
        font-size:2rem;
    }
}

/* =========================
   Success Stories Section
========================= */

.success-stories {
    background: #f8fafc;
    padding: 40px 0;
}

.success-header {
    text-align: center;
    margin-bottom: 60px;
}

.success-subtitle {
    color: #2563eb;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 10px;
}

.success-title {
    font-size: 2.8rem;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 15px;
}

.success-desc {
    max-width: 700px;
    margin: auto;
    color: #64748b;
}

/* Card */

.story-card {
    background: #fff;
    border-radius: 18px;
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
    border: 1px solid #e2e8f0;
    transition: all .3s ease;
}

    .story-card:hover {
        transform: translateY(-8px);
        box-shadow: 0 20px 40px rgba(15, 23, 42, .08);
    }

.story-image {
    width: 100%;
    height: 200px;
/*    object-fit: cover;*/
}

.story-body {
    padding: 22px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.story-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 12px;
}

.story-text {
    color: #64748b;
    line-height: 1.6;
    flex-grow: 1;
    margin-bottom: 20px;
}

/* Stat Box */

.story-stat {
    background: #eff6ff;
    border-radius: 12px;
    padding: 14px;
    text-align: center;
}

.story-stat-value {
    display: block;
    font-size: 1.4rem;
    font-weight: 700;
    color: #2563eb;
}

.story-stat-label {
    color: #475569;
    font-size: .9rem;
}

.success-btn {
    margin-top: 50px;
    text-align: center;
}

    .success-btn .btn {
        padding: 12px 28px;
        border-radius: 50px;
        font-weight: 600;
    }


/* ====================================
   Engagement Models - Light Theme
==================================== */

.fintech-models {
    background: #f8fafc;
    padding: 40px 0;
}

    /* Remove Outer Border */
    .fintech-models .container {
        padding: 0;
    }

/* Left Side */

.fintech-models-left {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-right: 15px;
}

.fintech-models-heading {
    font-size: 2rem;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.1;
    margin-bottom: 12px;
}

.fintech-models-desc {
    font-size: 14px;
    color: #64748b;
    line-height: 1.7;
    margin: 0;
    max-width: 220px;
}

/* ====================================
   Cards
==================================== */

.fintech-models-card {
    background: #ffffff;
    border: 1px solid #edf2f7;
    border-radius: 14px;
    padding: 22px;
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    transition: all .3s ease;
    box-shadow: 0 2px 10px rgba(15, 23, 42, 0.04);
    min-height: 240px;
}

    .fintech-models-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 12px 24px rgba(15, 23, 42, 0.08);
        border-color: #dbe4ee;
    }

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

.fintech-models-header {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 18px;
}

.fintech-models-icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 14px;
}

/* ====================================
   Icon Colors
==================================== */

.icon-purple {
    background: #f3e8ff;
    color: #7c3aed;
}

.icon-green {
    background: #dcfce7;
    color: #16a34a;
}

.icon-yellow {
    background: #fef3c7;
    color: #d97706;
}

/* ====================================
   Title & Subtitle
==================================== */

.fintech-models-title {
    font-size: 15px;
    font-weight: 600;
    color: #0f172a;
    margin-bottom: 2px;
}

.fintech-models-sub {
    margin: 0;
    padding: 0;
    font-size: 13px;
    color: #64748b;
    line-height: 1.4;
}

/* ====================================
   Features List
==================================== */

.fintech-models-list {
    list-style: none;
    padding: 0;
    margin: 0;
    flex-grow: 1;
}

    .fintech-models-list li {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-bottom: 12px;
        font-size: 14px;
        color: #475569;
        line-height: 1.4;
    }

        .fintech-models-list li i {
            color: #22c55e;
            font-size: 11px;
            flex-shrink: 0;
        }

/* ====================================
   Learn More Link
==================================== */

.fintech-models-link {
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
    color: #2563eb;
    font-size: 14px;
    font-weight: 600;
    transition: all .3s ease;
}

    .fintech-models-link:hover {
        color: #1d4ed8;
        gap: 10px;
    }

/* ====================================
   Equal Height Cards
==================================== */

/*.col-md-4 {
    display: flex;
}*/

    .col-md-4 .fintech-models-card {
        width: 100%;
    }

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

@media (max-width: 991px) {

    .fintech-models {
        padding: 50px 0;
    }

    .fintech-models-left {
        text-align: center;
        margin-bottom: 25px;
        padding-right: 0;
    }

    .fintech-models-heading {
        font-size: 1.8rem;
    }

    .fintech-models-desc {
        max-width: 100%;
        margin: auto;
    }
}

@media (max-width: 767px) {

    .fintech-models-card {
        min-height: auto;
    }

    .fintech-models-heading {
        font-size: 1.6rem;
    }
}


/* =====================================
   FAQ + CTA SECTION
===================================== */

.Fintech-faq-cta-section {
    background: #f8fafc;
    padding: 40px 0;
}

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

.Fintech-faq-wrapper {
    height: 100%;
}

.Fintech-faq-heading {
    font-size: 2.5rem;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 30px;
}

.Fintech-faq-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.Fintech-faq-item {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    overflow: hidden;
    transition: all .3s ease;
}

    .Fintech-faq-item:hover {
        border-color: #cbd5e1;
        box-shadow: 0 10px 25px rgba(15,23,42,.05);
    }

    .Fintech-faq-item.active {
        border-color: #2563eb;
    }

.Fintech-faq-question {
    padding: 22px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    font-size: 16px;
    font-weight: 600;
    color: #0f172a;
}

.Fintech-faq-icon {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #eff6ff;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #2563eb;
    transition: .3s;
}

.Fintech-faq-item.active .Fintech-faq-icon {
    transform: rotate(180deg);
}

.Fintech-faq-answer {
    max-height: 0;
    overflow: hidden;
    padding: 0 22px;
    transition: all .4s ease;
}

.Fintech-faq-item.active .Fintech-faq-answer {
    max-height: 180px;
    padding: 0 22px 22px;
}

.Fintech-faq-answer p {
    margin: 0;
    color: #64748b;
    line-height: 1.7;
}


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

@media (max-width: 991px) {

    .Fintech-faq-cta-section {
        padding: 60px 0;
    }

    .Fintech-faq-heading {
        text-align: center;
        font-size: 2rem;
    }

    .fintech-cta-banner {
        padding: 35px;
        text-align: center;
    }

    .fintech-cta-content {
        max-width: 100%;
    }

    .fintech-cta-title {
        font-size: 2rem;
    }

    .fintech-cta-actions {
        justify-content: center;
    }

    .fintech-cta-image-wrapper {
        display: none;
    }
}