/*===================================================
    Table of Contets
=====================================================

    01 Navigation
    02 Hero Section
    03 App Hero
    04 SaaS Hero
    05 Tech Hero Section
    06 Sponsor Section
    07 Promo Section
    08 App Promo Section
    09 Content Section
    10 Project Section
    11 Project Details
    12 WorkFlow Section
    13 Short Feature Section
    14 Features Tab Section
    15 Service Section
    16 Service Details
    17 Step Section
    18 Testimonial Section
    19 Counter Section
    20 Team Section
    21 Team Details
    22 Pricing Section
    23 Pricing Table Section
    24 FAQ Section
    25 CTA Section
    26 Contact Section
    27 Footer Section


=====================================================
    @ThemeEaster
====================================================*/

/*===================================================
    01 Navigation
====================================================*/
header.main-header.transparent {
    background-color: transparent;
    position: fixed;
    width: 100%;
    left: 0;
    top: 0;
    border: none;
    transition: all 0.3s ease-in-out;
    z-index: 99;
}

body.viewport-lg {
    cursor: none;
}

body:not(.viewport-lg) header.main-header.transparent {
    position: absolute;
    cursor: none;
}

.navigation-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Sticky Header */
header.main-header.transparent.sticky-fixed-top {
    -webkit-backdrop-filter: blur(15px);
    backdrop-filter: blur(15px);
    background-color: rgba(255, 255, 255, 0.8);
    border-bottom: 1px solid #eee;
}

.saas-home header.main-header.transparent.sticky-fixed-top {
    background-color: #191fb3;
    box-shadow: 0px 1px 3px rgba(3, 4, 28, 0.10);
    border: none;
}

.main-menu {
    display: none;
    column-gap: 30px;
}

.navigation-inner .site-logo {
    max-width: 170px;
}

.header-right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    column-gap: 14px;
}

@media (max-width: 1200px) {
    .navigation-inner {
        grid-template-columns: 130px 1fr 130px;
        grid-column-gap: 30px;
    }

    .navigation-menu {
        padding: 0 35px;
        column-gap: 20px;
    }

    .main-menu {
        column-gap: 40px;
    }
}

@media (min-width: 992px) {
    .navigation-wrapper {
        background-color: transparent;
    }

    .sticky-header {
        background-color: #fff;
        width: 100%;
        position: fixed;
        left: 0;
        top: 0;
        transform: translateY(-100%);
        z-index: 99;
    }

    .sticky-header header.main-header {
        background-color: #fff;
        border-bottom: 1px solid #eee;
    }

    .sticky-header .navigation-menu {
        box-shadow: none;
    }

    .sticky-header.sticky-fixed-top {
        transition: transform 1s ease;
        will-change: transform;
        transform: translateY(0);
    }

    header.main-header.transparent.sticky-fixed-top .navigation-menu {
        height: 80px;
    }

    .navigation-menu {
        height: 90px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        transition: all 0.3s ease-in-out;
    }

    .main-menu {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        height: 100%;
    }

    .main-menu li {
        position: relative;
        height: 100%;
        display: flex;
        align-items: center;
    }

    .main-menu li i.fa-solid {
        position: absolute;
        right: 0;
        top: 0;
        height: 100%;
        display: flex;
        align-items: center;
    }

    .main-menu li.dropdown_menu {
        padding-right: 14px;
    }

    .main-menu li.dropdown_menu i {
        transition: all 200ms linear;
        font-size: 14px;
    }

    .main-menu li.dropdown_menu:hover i {
        transform: rotateZ(-180deg);
    }

    .main-menu li a {
        font-family: var(--primary-font);
        color: var(--heading-color);
        font-size: 15px;
        line-height: 1;
        font-weight: 700;
        position: relative;
    }

    .saas-home .main-menu li a {
        color: #fff;
    }

    .saas-home .main-menu li li a {
        color: var(--grey-color);
    }

    .saas-home .trigger-opener {
        fill: #fff;
    }

    .main-menu li a:before {
        background-image: var(--primary-gradient);
        content: "";
        position: absolute;
        left: 0;
        bottom: -3px;
        display: inline-block;
        width: 100%;
        height: 2px;
        -webkit-transform-origin: left;
        -ms-transform-origin: left;
        transform-origin: left;
        -webkit-transform: scaleX(0);
        -ms-transform: scaleX(0);
        transform: scaleX(0);
        -webkit-transition: 0.3s cubic-bezier(0.45, 0.1, 0, 0.95);
        -o-transition: 0.3s cubic-bezier(0.45, 0.1, 0, 0.95);
        transition: 0.3s cubic-bezier(0.45, 0.1, 0, 0.95);
    }

    .main-menu li a:hover:before {
        -webkit-transform: scaleX(1);
        -ms-transform: scaleX(1);
        transform: scaleX(1);
    }

    .main-menu li ul {
        background-color: #fff;
        border: 1px solid #eee;
        padding: 16px 0;
        width: 250px;
        position: absolute;
        top: 100%;
        left: -28px;
        border-radius: 10px;
        visibility: hidden;
        opacity: 0;
        z-index: 1;
        -webkit-transform: rotate3d(1, 0, 0, -90deg);
        transform: rotate3d(1, 0, 0, -90deg);
        -webkit-transform-origin: 0 0;
        transform-origin: 0 0;
        transition: all .6s ease;
    }

    .main-menu li:hover ul {
        visibility: visible;
        transition: all .6s ease;
        opacity: 1;
        transform: none;
    }

    .main-menu li li {
        margin: 0 10px;
        padding: 10px 18px;
    }

    .main-menu li li a {
        font-weight: 600;
        display: block;
        color: var(--gray-color);
        position: relative;
    }

    .main-menu li li a:before {
        background-color: var(--primary-color);
        content: "";
        width: 0;
        height: 2px;
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        transition: all .5s ease-in-out;
    }

    .main-menu li:hover li.dropdown_menu > i {
        position: absolute;
        right: 0;
        top: 10px;
        transform: rotateZ(-90deg);
    }

    .main-menu li:hover li a:hover {
        color: var(--primary-color);
        padding-left: 15px;
    }

    .main-menu li:hover li a:hover:before {
        width: 10px;
    }

    .main-menu li:hover li ul {
        left: 100%;
        top: 10%;
        visibility: hidden;
        opacity: 0;
        transition: all 200ms linear;
    }

    .main-menu li:hover li:hover ul {
        top: 0;
        visibility: visible;
        transition: all 200ms linear;
        opacity: 1;
    }
}

.mobile-menu-icon,
.mobile-navigation-menu {
    display: none;
}

@media (max-width: 992px) {
    .navigation-inner {
        grid-template-columns: 1fr 1fr;
    }

    .navigation-inner .site-logo {
        padding: 15px 0;
    }

    /* Mobile Menu */
    .navigation-menu {
        display: none;
    }

    .mobile-menu-icon {
        display: block;
        margin-left: auto;
    }

    .burger-menu {
        width: 20px;
        height: 18px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        cursor: pointer;
        -webkit-transition: transform 330ms ease-out;
        -moz-transition: transform 330ms ease-out;
        -o-transition: transform 330ms ease-out;
        transition: transform 330ms ease-out;
    }

    .menu-open .burger-menu {
        -webkit-transform: rotate(-45deg);
        -moz-transform: rotate(-45deg);
        -o-transform: rotate(-45deg);
        transform: rotate(-45deg);
    }

    .line-menu {
        background-color: #666;
        border-radius: 0;
        width: 100%;
        height: 2px;
    }

    .saas-home .line-menu {
        background-color: var(--white-color);
    }

    .line-menu.line-half {
        width: 50%;
    }

    .line-menu.first-line {
        transition: transform 330ms cubic-bezier(0.54, -0.81, 0.57, 0.57);
        transform-origin: right;
    }

    .menu-open .line-menu.first-line {
        -webkit-transform: rotate(-90deg) translateX(3px);
        -moz-transform: rotate(-90deg) translateX(3px);
        -o-transform: rotate(-90deg) translateX(3px);
        transform: rotate(-90deg) translateX(3px);
    }

    .line-menu.last-line {
        align-self: flex-end;
        transition: transform 330ms cubic-bezier(0.54, -0.81, 0.57, 0.57);
        transform-origin: left;
    }

    .menu-open .line-menu.last-line {
        -webkit-transform: rotate(-90deg) translateX(-3px);
        -moz-transform: rotate(-90deg) translateX(-3px);
        -o-transform: rotate(-90deg) translateX(-3px);
        transform: rotate(-90deg) translateX(-3px);
    }

    #mobile-menu-close {
        position: absolute;
        right: 18px;
        top: 20px;
        width: 60px;
        height: 60px;
        font-size: 40px;
        color: var(--dark-color);
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
    }

    #mobile-menu-close:hover {
        color: var(--primary-color);
    }

    .mobile-navigation-menu {
        -webkit-backdrop-filter: blur(15px);
        backdrop-filter: blur(15px);
        background-color: rgba(255, 255, 255, 0.8);
        border-right: 1px solid #eee;
        position: fixed;
        left: -100%;
        top: 0;
        width: 400px;
        height: 100vh;
        padding: 100px 0 50px;
        box-shadow: var(--shadow-sm);
        display: block;
        visibility: hidden;
        opacity: 0;
        transition: all .3s linear;
        overflow-y: scroll;
        z-index: 1000;
    }

    .open-mobile-menu.mobile-navigation-menu {
        left: 0;
        visibility: visible;
        opacity: 1;
        transition: all .3s linear;
    }

    .mobile-navigation-menu .main-menu {
        display: block;
    }

    .mobile-navigation-menu .dropdown-plus {
        width: 100px;
        height: 49px;
        line-height: 49px;
        position: absolute;
        top: 2px;
        right: 32px;
        cursor: pointer;
        z-index: 1;
    }

    .mobile-navigation-menu .dropdown-plus:before,
    .mobile-navigation-menu .dropdown-plus:after {
        position: absolute;
        content: "";
        top: 21px;
        right: 10px;
        width: 10px;
        height: 2px;
        background-color: var(--bg-dark);
    }

    .mobile-navigation-menu .dropdown-plus:after {
        -webkit-transform: rotate(90deg);
        -moz-transform: rotate(90deg);
        -o-transform: rotate(90deg);
        transform: rotate(90deg);
    }

    .mobile-navigation-menu .dropdown-plus.dropdown-open:after {
        display: none;
    }

    .mobile-navigation-menu ul {
        padding-left: 0;
    }

    .mobile-navigation-menu ul li {
        position: relative;
        margin: 0;
        display: block;
        padding: 0;
    }

    .mobile-navigation-menu ul li > a {
        display: block;
        padding: 15px 40px;
        font-family: var(--primary-font);
        color: var(--dark-color);
        font-size: 18px;
        line-height: 1;
        font-weight: 700;
    }

    .mobile-navigation-menu ul li:hover > a,
    .mobile-navigation-menu li li:hover > a {
        color: var(--primary-color);
    }

    .mobile-navigation-menu ul li ul li ul,
    .mobile-navigation-menu ul li ul {
        background-color: transparent;
        width: 100%;
        opacity: 1;
        padding: 0;
        visibility: visible;
        position: inherit;
        display: none;
        top: inherit;
        left: inherit;
        box-shadow: none;
    }

    .mobile-navigation-menu li li {
        padding: 0 20px;
    }

    .mobile-navigation-menu li li {
        padding-left: 10px;
    }

    .mobile-navigation-menu li li:last-child {
        border-bottom: none;
    }

    .mobile-navigation-menu li li > a {
        color: var(--grey-color);
        font-weight: 600;
        font-size: 18px;
        padding: 14px 20px 14px 40px;
    }
}

@media (max-width: 600px) {
    .mobile-navigation-menu {
        width: 100%;
    }
}

/* Side Area */
.sidebar-trigger.open .trigger-opener rect {
    display: block;
    transform: scaleX(1);
    transform-origin: right;
    transition: transform .31s cubic-bezier(.25, .1, .11, .99)
}

.sidebar-trigger.close svg rect {
    clip-path: inset(0 0 0 0);
    -webkit-clip-path: inset(0 0 0 0)
}

.sidebar-trigger.open:hover .trigger-opener rect:first-child {
    transform: scaleX(1.5)
}

.sidebar-trigger.open:hover .trigger-opener rect:last-child,
.sidebar-trigger.open:hover .trigger-opener rect:nth-child(2) {
    transform: scaleX(.68)
}

.sidebar-trigger.close:hover .sidebar-close rect {
    animation: sidebar-close-anim .62s forwards cubic-bezier(.25, .1, .11, .99)
}

.sidebar-trigger.close:hover .sidebar-close rect:last-child {
    animation: sidebar-close-anim .62s forwards cubic-bezier(.25, .1, .11, .99) .16s
}

@keyframes sidebar-close-anim {
    0% {
        clip-path: inset(0 0 0 0);
        -webkit-clip-path: inset(0 0 0 0);
    }

    50% {
        clip-path: inset(0 0 0 100%);
        -webkit-clip-path: inset(0 0 0 100%);
    }

    51% {
        clip-path: inset(0 100% 0 0);
        -webkit-clip-path: inset(0 100% 0 0);
    }

    100% {
        clip-path: inset(0 0 0 0);
        -webkit-clip-path: inset(0 0 0 0);
    }
}

/* Popup Sidebox */
#sidebar-overlay,
.sidebar-trigger,
.sidebar-area {
    display: none;
}

@media (min-width: 992px) {
    .sidebar-trigger {
        display: block;
    }

    .sidebar-area {
        -webkit-backdrop-filter: blur(15px);
        backdrop-filter: blur(15px);
        background-color: rgba(255, 255, 255, 0.8);
        border-left: 1px solid #eee;
        padding: 70px 55px;
        position: fixed;
        right: -380px;
        top: 0;
        width: 350px;
        height: 100%;
        z-index: 9999;
        display: flex;
        align-items: flex-start;
        justify-content: flex-start;
        visibility: hidden;
        transition: all .6s cubic-bezier(.75, 0, .175, 1);
    }

    .open-sidebar .sidebar-area {
        right: 0;
        visibility: visible;
    }

    .sidebar-trigger.close {
        position: absolute;
        right: 30px;
        top: 30px;
        color: var(--grey-color);
    }

    .sidebar-trigger.close svg {
        fill: currentColor;
        stroke: none;
        width: 20px;
        height: 20px;
    }

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

    .sidebar-content .site-logo {
        margin-bottom: 40px;
    }

    .sidebar-content .site-logo img {
        max-width: 200px;
    }

    .sidebar-content .sidebar-info li {
        font-size: 18px;
    }

    .sidebar-content .sidebar-social li {
        display: inline-block;
        margin: 0 3px;
        padding-top: 30px;
    }

    .sidebar-content .sidebar-social li a {
        display: inline-block;
        border: 1px solid #ddd;
        font-size: 16px;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        position: relative;
    }

    .sidebar-content .sidebar-social li a:after {
        background-image: var(--primary-gradient);
        width: 40px;
        height: 40px;
        border-radius: 59%;
        content: "";
        position: absolute;
        left: 50%;
        top: 50%;
        opacity: 1;
        transform: translate(-50%, -50%) scale(0);
        z-index: -1;
        visibility: hidden;
        opacity: 0;
        transition: 0.4s;
    }

    .sidebar-content .sidebar-social li a:hover {
        border: 1px solid var(--primary-color);
        color: #fff;
    }

    .sidebar-content .sidebar-social li:hover a:after {
        visibility: visible;
        opacity: 1;
        transition: 0.4s;
        transform: translate(-50%, -50%) scale(1);
    }

    #sidebar-overlay {
        display: block;
        height: 100%;
        left: 0;
        opacity: 0;
        overflow: hidden;
        position: fixed;
        top: 0;
        transition: all 0s ease-in-out;
        width: calc(100% - 400px);
        z-index: -1;
    }

    .open-sidebar #sidebar-overlay {
        opacity: 1;
        z-index: 1002;
        transition: all 0.6s ease-in-out;
        transition-delay: 0.3s;
    }
}

.sidebar-content .sidebar-info li span,
.sidebar-content .sidebar-info li a {
    color: var(--grey-color); /* Ensure span and link inside <li> are also grey */
    text-decoration: none; /* Optional: remove underline */
}

.sidebar-content .sidebar-info li a:hover {
    color: var(--primary-color); /* Optional: color shift on hover */
}

/*===================================================
    02 Hero Section
====================================================*/
.hero-section {
    background-image: url(../img/gradiant-bg-001.jpg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
    position: relative;
    z-index: 1;
}

.hero-wrap {
    display: flex;
    align-items: center;
    position: relative;
}

.hero-content h3 {
    background-color: #ffe484;
    display: inline-flex;
    align-items: center;
    column-gap: 5px;
    border-radius: 3px;
    padding: 5px 15px;
    font-size: 16px;
    line-height: 1;
    margin-bottom: 30px;
}

.hero-content .hand-waving {
    width: 20px;
}

.hero-content h1 {
    font-weight: 700;
    letter-spacing: -1.5px;
    margin-bottom: 20px;
}

.hero-content p {
    margin-bottom: 20px;
}

.hero-img-holder {
    width: 100%;
    height: auto;
    max-height: 500px;
    position: relative;
    z-index: 1;
    padding-top: 20px;
}

.hero-img-holder .animated-shape {
    background: #eceeff99;
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
    width: 700px;
    height: 700px;
    max-width: inherit;
    position: absolute;
    right: -60%;
    top: -25%;
    opacity: 0.3;
}

.hero-img-holder .js-atropos {
    transform: translateY(90px);
}

.hero-img-holder img {
    object-fit: contain;
    object-position: right;
    width: 60%;
    height: auto;
    max-height: 450px;
    margin: 0 auto;
    display: block;
}

.hero-img-holder .atropos-inner {
    position: relative;
}

.hero-elements {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
}

.hero-elements > div {
    background-repeat: no-repeat;
    background-size: contain;
    position: absolute;
}

.hero-elements > div:nth-child(1) {
    background-image: url(../img/hero-element01.png);
    background-position: left top;
    width: 50px;
    height: 55px;
    left: 42%;
    top: -20%;
    animation: ProgStream_left_right 4s forwards infinite alternate;
}

.hero-elements > div:nth-child(2) {
    background-image: url(../img/hero-element02.png);
    background-position: right top;
    width: 80px;
    height: 55px;
    right: 0;
    top: 1%;
    animation: ProgStream_up_down 4s forwards infinite alternate;
}

.hero-elements > div:nth-child(3) {
    background-image: url(../img/hero-element03.png);
    background-position: right top;
    width: 70px;
    height: 45px;
    right: 10%;
    top: 30%;
    animation: ProgStream_left_right 4s forwards infinite alternate;
}

.hero-elements > div:nth-child(4) {
    background-image: url(../img/hero-element04.png);
    background-position: right bottom;
    width: 40px;
    height: 37px;
    right: 5%;
    top: 50%;
    animation: ProgStream_from_bottom_corner 4s forwards infinite alternate;
}

.hero-elements > div:nth-child(5) {
    background-image: url(../img/hero-element05.png);
    background-position: left top;
    width: 60px;
    height: 55px;
    left: 20%;
    top: 30%;
    animation: ProgStream_scale_up_down 3s forwards infinite alternate;
}

@media (max-width: 992px) {
    p br {
        display: none;
    }

    .hero-section {
        height: auto;
        padding: 120px 0 0;
        overflow: hidden;
    }

    .hero-content {
        margin-bottom: 50px;
        text-align: center;
    }

    .hero-content .btn-group {
        justify-content: center;
    }

    .hero-content h1 {
        font-size: 40px;
        line-height: 48px;
        margin-bottom: 20px;
    }

    .hero-img-holder {
        margin-left: -50px;
    }

    .hero-img-holder .js-atropos {
        transform: translateY(0);
    }

    .hero-elements > div:nth-child(2) {
        right: 12%;
    }

    .hero-elements > div:nth-child(3) {
        right: 10%;
    }

    .hero-elements > div:nth-child(4) {
        right: 20%;
    }

    .hero-img-holder .animated-shape {
        right: -10%;
        top: 5%;
    }
}

@media (max-width: 767px) {
    .hero-section {
        overflow: hidden;
    }

    .hero-content h1 {
        font-size: 28px;
        line-height: 36px;
        margin-bottom: 20px;
    }

    .hero-img-holder {
        display: none;
    }

    .hexagon-pattern.left {
        width: 70%;
    }
}

/*===================================================
    Index (Home Page) Hero Section
====================================================*/
/* === Home hero bubble (scoped) === */
#homeHero {
  position: relative;
  overflow: hidden; /* ensures rings don’t spill on tiny screens */
}

/* place the big circular unit in the bottom-right “corner feel” */
/* container with rings */
#homeHero .hero-bubble {
  --bubble-size: min(58vw, 640px);
  --ring: 20px;
  --ring-soft: 60px;

  position: absolute;
  right: -10vw;
  bottom: -26.5vw;               /* your adjusted position */
  width: var(--bubble-size);
  aspect-ratio: 1/1;
  border-radius: 50%;
  display: grid;
  place-items: center;
  z-index: 1;
  filter: drop-shadow(0 30px 60px rgba(0,0,0,.12));
  opacity: 0;
  transform: translate3d(0, 40px, 0) scale(.98);
}

/* BACK glow ring (behind everything) */
#homeHero .hero-bubble::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  z-index: 0;

  /* White soft glow in the middle (optional, can remove if you only want rings) */
  background: radial-gradient(
    closest-side,
    rgba(255,255,255,.65),
    rgba(255,255,255,0) 65%
  );
}

/* Gradient rings */
#homeHero .hero-bubble::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--primary-gradient); /* 🌈 gradient */
  
  /* Two ring masks: one thin (inner), one larger (outer) */
  -webkit-mask: 
    radial-gradient(closest-side, transparent calc(100% - var(--ring)), #000 calc(100% - var(--ring))) , 
    radial-gradient(closest-side, transparent calc(100% - (var(--ring) + var(--ring-soft))), #000 calc(100% - (var(--ring) + var(--ring-soft))));
  -webkit-mask-composite: destination-out, source-over;
  
  mask: 
    radial-gradient(closest-side, transparent calc(100% - var(--ring)), #000 calc(100% - var(--ring))) , 
    radial-gradient(closest-side, transparent calc(100% - (var(--ring) + var(--ring-soft))), #000 calc(100% - (var(--ring) + var(--ring-soft))));
  mask-composite: intersect;

  opacity: 0.55; /* adjust glow intensity */
  pointer-events: none;
}

/* FRONT crisp ring (on top) */
#homeHero .hero-bubble::after {
  content: "";
  position: absolute;
  inset: calc(var(--ring) + 18px);
  border-radius: 50%;
  box-shadow: inset 0 0 0 2px rgba(0,0,0,.06);
  pointer-events: none;
  z-index: 2;                  /* 🔑 above photo */
}

/* HARD circular mask wrapper */
#homeHero .hero-bubble__mask {
  width: 72%;
  aspect-ratio: 1/1;
  border-radius: 50%;
  overflow: hidden;            /* 🔑 keeps image inside circle */
  box-shadow: 0 10px 24px rgba(0,0,0,.18);
  z-index: 1;                  /* between ::before and ::after */
}

/* photo fully fills the mask */
#homeHero .hero-bubble__img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;           /* fill without stretching */
}

/* little “+” chip */
#homeHero .hero-bubble__pin {
  position: absolute;
  right: 16%; bottom: 16%;
  width: 34px; height: 34px; border-radius: 50%;
  background: linear-gradient(135deg, #4caf50, #2e7d32);
  color: #fff; font-weight: 700;
  display: grid; place-items: center;
  box-shadow: 0 6px 14px rgba(46,125,50,.35);
  pointer-events: none;
  z-index: 3;                  /* above all */
}

/* Home page hero background only */
#homeHero {
  background: url("../img/main-page-header-bg1.jpg") no-repeat center center / cover;
  position: relative;
  z-index: 0;
}

/* Hero content text fix */
#homeHero .hero-content p {
  color: #f5f7fa;           /* light text */
  text-shadow: 0 2px 6px rgba(0,0,0,0.4); /* subtle shadow for readability */
}

/* animations (unchanged) */
@keyframes heroBubbleIn {
  0% { opacity:0; transform: translate3d(0,50px,0) scale(.96) rotate(-2deg); }
  60%{ opacity:1; transform: translate3d(0,-6px,0) scale(1.02) rotate(.5deg); }
  100%{opacity:1; transform: translate3d(0,0,0) scale(1) rotate(0); }
}
@keyframes heroFloat {
  0%{ transform: translateY(0); }
  50%{ transform: translateY(-8px); }
  100%{ transform: translateY(0); }
}
#homeHero.is-inview .hero-bubble { animation: heroBubbleIn .9s cubic-bezier(.2,.7,.2,1) .05s both; }
#homeHero.is-inview .hero-bubble__mask { animation: heroFloat 6.5s ease-in-out 1.2s infinite; }

/* responsive tweaks (keep yours; example) */
@media (max-width: 1199.98px) { #homeHero .hero-bubble { right:-18vw; bottom:-8vw; } }
@media (max-width: 991.98px)  { #homeHero .hero-bubble { --bubble-size:min(90vw,520px); right:-30vw; bottom:-14vw; } }
@media (max-width: 575.98px)  { #homeHero .hero-bubble { --bubble-size:120vw; right:-50vw; bottom:-24vw; } }

/*===================================================
    03 App Hero Section
====================================================*/
.app-hero {
    background-image: url(../img/gradiant-bg-001.jpg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.app-hero .hero-content h3 {
    font-family: var(--primary-font);
    letter-spacing: 0;
    background: linear-gradient(90deg, #501E9C 0%, #8069F1 40%, #A45CEE 75%, #FF857F 100%);
    color: #fff;
    padding: 8px 20px;
}

.app-hero .hero-content h1 {
    font-size: 52px;
    font-weight: 700;
    line-height: 48px;
}

.app-hero .hero-content h1 span b {
    background: linear-gradient(90deg, #501E9C 0%, #8069F1 40%, #A45CEE 75%, #FF857F 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.app-illustration {
    position: relative;
    height: 100vh;
}

.hand-illustration {
    width: auto;
    height: 500px;
    position: absolute;
    right: 20%;
    bottom: 0;
}

.app-illustration .app-ui {
    width: 200px;
    position: absolute;
    left: 0;
    top: 28%;
}

.app-illustration .bell {
    width: 100px;
    position: absolute;
    right: 30%;
    top: 30%;
}

.app-illustration .notification {
    width: 50px;
    position: absolute;
    right: 25%;
    top: 28%;
}

.app-illustration .animated-shape {
    background: linear-gradient(45deg, #501E9C 0%, #8069F1 40%, #A45CEE 75%, #FF857F 100%);
    position: absolute;
    left: -15px;
    top: 90px;
}

.app-illustration .coins img {
    width: 50px;
    height: auto;
    position: absolute;
}

.app-illustration .coins img:nth-child(1) {
    width: 40px;
    right: 55%;
    bottom: 30%;
}

.app-illustration .coins img:nth-child(2) {
    width: 45px;
    right: 45%;
    bottom: 24%;
}

.app-illustration .coins img:nth-child(3) {
    width: 55px;
    right: 50%;
    bottom: 13%;
}

.app-illustration .coins img:nth-child(4) {
    width: 60px;
    right: 40%;
    bottom: 9%;
}

.app-illustration .coins img:nth-child(5) {
    width: 65px;
    right: 55%;
    bottom: 0%;
}

@media (max-width: 992px) {
    .app-hero {
        padding-top: 120px;
        height: auto;
    }

    .app-illustration {
        height: 500px;
    }

    .app-illustration .animated-shape {
        left: 50%;
        top: 40px;
        transform: translateX(-50%);
    }

    .app-illustration .app-ui {
        left: 25%;
        top: 10%;
    }
}

@media (max-width: 767px) {
    .app-hero .hero-content h1 br {
        display: none;
    }

    .app-hero .hero-content h1 {
        font-size: 32px;
        line-height: 36px;
    }

    .animated-shape {
        width: 300px;
        height: 300px;
    }

    .app-illustration .app-ui {
        width: 120px;
        left: 5%;
        text-outline: 25%;
    }
}

/*===================================================
    04 SaaS Hero Section
====================================================*/
.saas-hero {
    height: 100vh;
    display: flex;
    align-items: center;
    position: relative;
}

.saas-hero .hero-content {}

.saas-hero .hero-content h1 {
    color: #fff;
}

.saas-hero .hero-content h1 span {
    display: inline-block;
    position: relative;
    z-index: 1;
}

.saas-hero .hero-content h1 span:before {
    background-color: #ffe484;
    content: "";
    width: 100%;
    height: 8px;
    position: absolute;
    left: 0;
    bottom: 5px;
    z-index: -1;
}

.saas-hero .hero-content p {
    color: #ddd;
}

.saas-illustration {
    position: relative;
    padding-top: 80px;
}

.saas-illustration img {
    width: 400px;
}

.saas-illustration img:nth-child(2) {
    width: 200px;
    position: absolute;
    left: -15%;
    top: 30%;
}

.saas-illustration img:nth-child(3) {
    width: 200px;
    position: absolute;
    right: 5%;
    bottom: 5%;
}

@media(max-width: 982px) {
    .saas-illustration {
        text-align: center;
        padding-top: 40px;
    }

    .saas-illustration img:nth-child(2) {
        left: 0;
    }
}

@media(max-width: 767px) {
    .saas-hero {
        height: auto;
        padding: 120px 0;
    }
}

/*===================================================
    05 Tech Hero Section
====================================================*/
.tech-hero {
    background-image: url(../img/gradiant-bg-001.jpg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.tech-hero .hero-content h1 {
    font-size: 52px;
}

.tech-hero .hero-content h1 span {
    -webkit-text-stroke: 2px var(--heading-color);
    -webkit-text-fill-color: transparent;
}

.tech-hero .hero-content P {
    font-size: 18px;
    color: var(--heading-color);
}

.tech-hero .default-btn {
    background: #00c16e;
}

.tech-img-holder {
    position: relative;
    width: 100%;
    height: 100vh;
}

.tech-img-holder img {
    position: absolute;
    right: 0;
    bottom: 0;
}

.tech-img-holder:before {
    background-color: #ffe484;
    width: 400px;
    height: 400px;
    border-radius: 50%;
    content: "";
    position: absolute;
    left: 5%;
    top: 20%;
}

@media (max-width: 992px) {
    .tech-hero {
        height: auto;
    }

    .tech-hero .hero-content {
        padding-top: 150px;
    }

    .tech-img-holder {
        height: 770px;
        margin-top: 40px;
    }

    .it-content-img {
        margin: 0 auto;
    }
}


@media (max-width: 767px) {
    .tech-hero .hero-content h1 {
        font-size: 42px;
        line-height: 48px;
    }

    .tech-hero .hero-content h1 br {
        display: none;
    }

    .tech-hero .hero-content h1 span {
        -webkit-text-stroke: 1px var(--heading-color);
    }

    .tech-img-holder {
        height: 350px;
    }
}

/*===================================================
    06 Sponsor Section
====================================================*/
.sponsor-section {}

.sponsor-carousel {
    overflow: hidden;
}

.sponsor-carousel .swiper-slide {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5px 0;
}

.sponsor-carousel .swiper-slide img {
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.sponsor-carousel .swiper-slide:hover img {
    cursor: pointer;
    transform: translateY(-2px);
}

.saas-home .sponsor-carousel {
    background-color: #191fb3;
    border-radius: 5px;
    padding: 50px 0;
    box-shadow: 0px 30px 50px 0px rgba(0, 9, 40, 0.1);
}

.success-stories-title {
  text-align: center;
  margin-top: -60px !important;     /* override any inherited spacing */
  margin-bottom: 90px;
}

.success-stories-title h2 {
  display: inline-block;
  font-size: 60px;
  font-weight: 700;
  color: #4b83ff; /* or #fff based on background */
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
  margin: 0;
}

.tagline-animate {
  font-size: 18px;
  font-weight: 500;
  text-align: center;
  color: #333;
  opacity: 0;
  transform: translateY(20px);
  animation: fadeInUp 1s ease-out 0.5s forwards;
}

@keyframes fadeInUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Tagline styling */
.success-tagline {
  font-size: 10px;
  font-weight: 500;
  color: #333;
  margin-top: 15px;
  font-family: 'Segoe UI', sans-serif;
}

.tagline-typewriter {
  font-family: 'Courier New', monospace;
  font-size: 18px;
  font-weight: 500;
  text-align: center;
  color: #333;
  white-space: nowrap;
  overflow: hidden;
  border-right: 2px solid #4b83ff;
  width: 0;
  margin: 0 auto;
  animation: typing 3s steps(44, end) forwards, blink-caret 0.75s step-end 3s 1 forwards;
}

.fade-up-heading {
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.8s ease-out;
}

.fade-up-heading.animate {
  opacity: 1;
  transform: translateY(0);
}

@keyframes typing {
  from { width: 0 }
  to { width: 44ch }
}

@keyframes blink-caret {
  0%, 50% {
    border-color: #4b83ff;
  }
  100% {
    border-color: transparent;
  }
}

/* Underline Animation Style */
.underline-animate {
  position: relative;
  display: inline-block;
  color: #4b83ff;
}

/* Yellow line underneath */
.underline-animate::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -8px; /* Adjust to fine-tune vertical position */
  width: 100%;
  height: 10px;
  background-color: #ffe27a;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.6s ease-in-out;
  z-index: -1;
  border-radius: 3px;
}

/* Trigger animation */
.fade-up-heading.animate .underline-animate::after {
  transform: scaleX(1);
}


@media (max-width: 768px) {
  .success-stories-title h2 {
    font-size: 48px;
  }

  .success-stories-title {
    margin-top: -20px !important;
  }
}

/*===================================================
    Index (Home Page) Sponsor Section
====================================================*/

/* ===== Our Partners ===== */
.partners-sub{
  max-width: 760px;
  margin: 0 auto;
  color: var(--text-color, #667085);
}

.partners-swiper-wrap{
  position: relative;
  padding-bottom: 40px; /* room for dots */
}

.partners-swiper{
  overflow: hidden;
  padding: 10px 8px;
}

.partners-swiper .swiper-slide{
  width: 220px;                 /* fixed slide width for consistent layout */
  display: flex; justify-content: center;
}

.partner-card{
  width: 100%;
  height: 92px;
  display: grid; place-items: center;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border-radius: 12px;
  padding: 14px 18px;
  border: 1px solid rgba(255,255,255,.5);
  box-shadow: 0 10px 24px rgba(16,24,40,.08);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.partner-card img{
  max-width: 100%;
  max-height: 50px;             /* uniform logo height */
  object-fit: contain;
  filter: grayscale(1) contrast(1.05) brightness(.92);
  opacity: .8;
  transition: filter .25s ease, opacity .25s ease, transform .25s ease;
}

.partner-card:hover,
.partner-card:focus-visible{
  transform: translateY(-2px);
  border-color: transparent;
  box-shadow: 0 16px 36px rgba(16,24,40,.14);
}

.partner-card:hover img,
.partner-card:focus-visible img{
  filter: none;
  opacity: 1;
  transform: scale(1.02);
}

/* Pagination (centered) */
.partners-pagination{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 6px;
  display: flex; gap: 8px;
}

.partners-pagination .swiper-pagination-bullet{
  width: 8px; height: 8px; border-radius: 999px;
  background: #cbd5e1; opacity: 1; margin: 0 !important;
}

.partners-pagination .swiper-pagination-bullet-active{
  width: 28px;
  background: var(--primary-gradient);
}

/* Responsive */
@media (max-width: 992px){
  .partners-swiper .swiper-slide{ width: 200px; }
}
@media (max-width: 640px){
  .partners-swiper .swiper-slide{ width: 170px; }
  .partner-card{ height: 80px; }
  .partner-card img{ max-height: 42px; }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .partner-card,
  .partner-card img{ transition: none; }
}

/* Section heading fade-in */
@keyframes fadeUp {
    0% {
        opacity: 0;
        transform: translateY(40px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Slide-in logos */
@keyframes slideInRight {
    0% {
        opacity: 0;
        transform: translateX(60px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

.partners-section .section-heading {
    opacity: 0;
    animation: fadeUp 1.2s ease forwards;
    animation-delay: 0.2s;
}

/* Animate the heading only when section is in view */
.partners-section.animate .section-heading {
    animation: fadeUp 1s ease forwards;
}

.partners-swiper .swiper-slide {
    opacity: 0;
    transform: translateX(40px);
    transition: all 0.8s ease;
}

/* Animate each logo when visible */
.partners-section.animate .swiper-slide {
    opacity: 1;
    transform: translateX(0);
}

/*===================================================
    07 Promo Section
====================================================*/
.promo-section {
    background-image: url(../img/geometric-bg01.png);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover; /* Change from 60% to full cover */
    background-attachment: fixed; /* Optional for subtle parallax effect */
    width: 100%;
    padding: 80px 0; /* Add vertical padding for spacing */
    position: relative;
}

.promo-items.zigzag > div:nth-child(4),
.promo-items.zigzag > div:nth-child(2) {
    margin-top: 30px;
}

.promo-item {
    position: relative;
    background-color: #c3c8ff99;
    backdrop-filter: blur(5px);
    padding: 30px;
    border-radius: 5px;
    transition: all 0.4s ease;
    z-index: 1;
    overflow: hidden;
}

/* Gradient bottom line on hover */
.promo-item::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 4px;
    background: var(--primary-gradient); /* Ensure this is defined in :root */
    transition: width 0.4s ease;
    border-radius: 2px;
}

.promo-item:hover::after {
    width: 100%;
}

.promo-item:hover {
    transform: translateY(-3px);
    cursor: pointer;
}

.promo-item .promo-icon {
    width: 100px;
    margin-bottom: 20px;
}

.promo-item .promo-icon img {
    width: 100%;
    height: 80px;
    object-fit: contain;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

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

.promo-item h3 {
    font-size: 20px;
    font-weight: 600;
}

.promo-item .read-more {
    background: transparent;
    font-size: 25px;
    color: var(--grey-color);
    border: 1px solid #acacb5;
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.promo-item .read-more:hover {
    background: var(--primary-gradient);  /* Use gradient background */
    color: #fff;
    border: 1px solid transparent;       /* Remove border to let gradient edge shine */
}

/* IT Promo */
.it-promo .promo-item {
    background-color: #fff;
    text-align: center;
    box-shadow: 0 0 40px 0 rgba(40.000000000000156, 20.000000000000014, 130, .10);
    position: relative;
}

.it-promo .promo-item:before {
    background: var(--bg-gradient);
    content: "";
    width: 0;
    height: 3px;
    left: auto;
    bottom: 0;
    position: absolute;
    right: 0;
    -webkit-transition: width .5s cubic-bezier(.25, .10, .25, 1) 0s;
    transition: width .5s cubic-bezier(.25, .10, .25, 1) 0s;
}

.it-promo .promo-item:hover:before {
    width: 100%;
    left: 0;
    right: auto;
    margin: 0;
}

.it-promo .promo-icon {
    margin: 0 auto;
    margin-bottom: 15px;
}

@media (max-width: 992px) {
    .promo-section {
        background-size: cover;
    }

    .promo-section .section-heading-wrap {
        align-items: flex-start;
        flex-direction: column;
        margin-bottom: 40px;
    }

    .promo-section .section-heading {
        margin-bottom: 20px;
    }

    .promo-items > div:nth-child(4),
    .promo-items > div:nth-child(2) {
        margin-top: 0;
    }

    .promo-section.animate .promo-item {
    /* Reset transitions if needed */
    animation: fadeInScale 0.6s ease forwards;
    transform: none;
    opacity: 1;
  }
}

/* Heading fade-scale entrance */
@keyframes fadeInScale {
    0% {
        opacity: 0;
        transform: scale(0.95) translateY(20px);
    }
    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* Card flip-in effect */
@keyframes flipInCard {
    0% {
        transform: rotateY(90deg) scale(0.9);
        opacity: 0;
    }
    100% {
        transform: rotateY(0) scale(1);
        opacity: 1;
    }
}

/* Animate when in view */
.promo-section .section-heading {
    opacity: 0;
    transform: scale(0.95);
    transition: all 0.5s ease;
}

.promo-section.animate .section-heading {
    animation: fadeInScale 1s ease forwards;
}

/* Promo cards */
.promo-item {
    opacity: 0.001;
    transform: rotateY(90deg);
    transform-origin: center;
    backface-visibility: hidden;
    perspective: 1000px;
}

/* Trigger flip animation */
.promo-section.animate .promo-item {
    animation: flipInCard 0.8s ease forwards;
}

.promo-section:not(.animate) .promo-item {
    opacity: 1;
    transform: none;
}

.promo-section.animate .promo-item:nth-child(1) { animation-delay: 0.2s; }
.promo-section.animate .promo-item:nth-child(2) { animation-delay: 0.4s; }
.promo-section.animate .promo-item:nth-child(3) { animation-delay: 0.6s; }
.promo-section.animate .promo-item:nth-child(4) { animation-delay: 0.8s; }

@media (max-width: 768px) {
  .promo-item h3 {
    font-size: 18px;
  }

  .promo-item p {
    font-size: 14px;
    line-height: 1.5;
  }

  .promo-item {
    padding: 20px;
  }

  /* ✅ Disable animations for smoother mobile experience */
  .promo-section .promo-item {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  /* ✅ Optional: Prevent flicker if animation class is toggled */
  .promo-section.animate .promo-item {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  /* ✅ Optional: Ensure gradient underline appears */
  .promo-item::after {
    width: 100% !important;
  }
}

/*===================================================
    08 App Promo Section
====================================================*/
.app-promo .section-heading h2 {
    margin-bottom: 20px;
}

.app-users {
    display: flex;
    align-items: center;
    column-gap: 20px;
    margin-top: 30px;
}

.app-users img {
    width: 180px;
}

.app-users h3 {
    margin: 0;
    font-size: 18px;
    line-height: 22px;
}

.app-users h3 span {
    color: #000;
    font-family: var(--body-font);

}

.app-promo-item {
    background: #fff;
    display: grid;
    grid-template-columns: 60px 1fr;
    align-items: center;
    column-gap: 30px;
    padding: 30px;
    border-radius: 3px;
    box-shadow: 0px 30px 50px 0px rgba(0, 9, 40, 0.1);
}

.app-promo-item:nth-child(2) {
    margin-left: 50px;
}

.app-promo-item:not(:last-of-type) {
    margin-bottom: 20px;
}

.app-promo-content h3 {
    font-weight: 600;
    margin-bottom: 10px;
    line-height: 1;
}

.app-promo-content p {
    margin: 0;
}

@media (max-width:992px) {
    .app-promo-item:nth-child(2) {
        margin-left: 0;
    }
}

@media (max-width:600px) {
    .app-users h3 br {
        display: none;
    }
}

/* Base state (before entering viewport) */
.anim-about {
  --dur: .9s;
  --ease: cubic-bezier(.2,.75,.25,1);
  position: relative;
}

.anim-about .about-headline{
  font-weight: 800;
  line-height: 1.15;
  margin-bottom: 16px;
  opacity: 0;
  transform: translateY(22px);
  transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
  position: relative;
}

/* Gradient underline on the brand word */
.anim-about .about-brand{
  position: relative;
  display: inline-block;
}
.anim-about .about-brand::after{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 6px;
  bottom: -8px;
  background: var(--primary-gradient);
  transform: scaleX(0);
  transform-origin: left center;
  border-radius: 3px;
  transition: transform .7s var(--ease) .15s;
}

/* Paragraph */
.anim-about .about-copy{
  max-width: 980px;
  margin: 0 auto;
  opacity: 0;
  transform: translateY(16px);
  filter: blur(6px);
  transition: transform .8s var(--ease) .15s, opacity .8s var(--ease) .15s, filter .8s var(--ease) .15s;
}

/* Entered state */
.anim-about.in-view .about-headline{
  opacity: 1;
  transform: translateY(0);
}
.anim-about.in-view .about-brand::after{
  transform: scaleX(1);
}
.anim-about.in-view .about-copy{
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

/* Optional subtle shine sweep across the headline */
.anim-about .about-headline::before{
  content:"";
  position:absolute;
  left:-10%;
  top:0;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.55) 40%, rgba(255,255,255,0) 80%);
  transform: skewX(-20deg);
  opacity: 0;
}
.anim-about.in-view .about-headline::before{
  animation: headlineShine 1.2s .1s ease forwards;
}
@keyframes headlineShine{
  0%   { left:-10%; width:0; opacity:0; }
  15%  { width:10%; opacity:.9; }
  100% { left:110%; width:10%; opacity:0; }
}

/* Small screen spacing tweaks */
@media (max-width: 768px){
  .anim-about .about-headline{ font-size: clamp(28px, 6vw, 40px); }
  .anim-about .about-brand::after{ height: 5px; bottom: -6px; }
}

/* ===== Base ribbons ===== */
.promo-ribbons{
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  row-gap: 20px;
}

.ribbon{
  --bar-h: 50px;
  --bar-radius: 10px;
  --bar-w: min(100%, 500px);
  --c1: #4b83ff; --c2: #56ab2f;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ribbon__bar{
  position: relative;
  height: var(--bar-h);
  width: var(--bar-w);
  border-radius: var(--bar-radius);
  background: linear-gradient(90deg, var(--c1), var(--c2));
  box-shadow: 0 10px 20px rgba(0,0,0,.08);
  display: flex;
  align-items: center;
  padding-left: 62px;
  padding-right: 28px;
  color: #fff;
}

/* Right arrow tip (default ribbons) */
.ribbon__bar::after{
  content: "";
  position: absolute;
  top: 0;
  right: -22px;
  border-left: 22px solid var(--arrow-color, var(--c1));
  border-top: calc(var(--bar-h)/2) solid transparent;
  border-bottom: calc(var(--bar-h)/2) solid transparent;
}

/* Left arrow tip (flipped ribbons) */
.ribbon--flip .ribbon__bar::before{
  content: "";
  position: absolute;
  top: 0;
  left: -22px;
  border-right: 22px solid var(--arrow-color, var(--c2));
  border-top: calc(var(--bar-h)/2) solid transparent;
  border-bottom: calc(var(--bar-h)/2) solid transparent;
}

/* badge */
.ribbon__badge{
  position: absolute;
  top: 50%; left: 12px;
  transform: translateY(-50%);
  width: 38px; height: 38px;
  line-height: 38px;
  text-align: center;
  font-weight: 700;
  font-size: 14px;
  color: #fff;
  background: #2e3a44;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,.9);
  box-shadow: 0 2px rgba(43, 255, 0, 0.9), inset 0 2px 0 rgba(0,25,255,.9);
}

/* title inside ribbon */
.ribbon__title{
  font-weight: 600;
  letter-spacing: .2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* description outside ribbon */
.ribbon__desc{
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
  color: #2a2f36;
}

/* ---- Flip version ---- */
.ribbon--flip{
  align-items: flex-end;
}
.ribbon--flip .ribbon__bar{
  background: linear-gradient(270deg, var(--c1), var(--c2));
  padding-left: 28px;
  padding-right: 62px;
  justify-content: flex-end;
}
.ribbon--flip .ribbon__bar::after{ content: none; }
.ribbon--flip .ribbon__bar::before{
  content: "";
  position: absolute;
  top: 0; left: -22px;
  border-right: 22px solid var(--c1);
  border-top: calc(var(--bar-h)/2) solid transparent;
  border-bottom: calc(var(--bar-h)/2) solid transparent;
}
.ribbon--flip .ribbon__badge{
  left: auto; right: 12px;
}

/* color themes */
.r--blue  { --c1:#4b83ff; --c2:#56ab2f; }
.r--yellow{ --c1:#3f7925; --c2:#a1e482; }
.r--purple{ --c1:#769cf0; --c2:#092a77; }
.r--green { --c1:#56ab2f; --c2:#4b83ff; }

/* responsive */
@media (max-width: 520px){
  .ribbon__bar, .ribbon--flip .ribbon__bar{
    width: 100%;
    padding-left: 56px;
    padding-right: 28px;
    justify-content: flex-start;
  }
  .ribbon--flip .ribbon__bar{ padding-left: 56px; padding-right: 28px; }
  .ribbon__desc{ font-size: 14px; }
}

/* ========== Why Businesses Choose — Ribbons ========== */
.promo-ribbons{
  display:grid;
  gap:0px 50px;
  grid-template-columns: 1fr;
}

/* base ribbon */
.ribbon{
  --r-grad: linear-gradient(90deg,#4b83ff 0%,#20b15a 100%);
  --r-shadow: 0 12px 22px rgba(0,0,0,.10);
  --r-inset: inset 0 1px 0 rgba(255,255,255,.35);
  opacity:0; transform: translateY(18px);
  transition: transform .6s cubic-bezier(.2,.7,.2,1), opacity .6s ease;
}

/* bar with gradient, rounded cap + chevron */
.ribbon__bar{
  position:relative;
  display:flex; align-items:center; gap:14px;
  min-height:64px; padding:10px 18px 10px 74px;
  color:#fff; font-weight:800; letter-spacing:.2px;
  border-radius:16px;
  background: var(--r-grad);
  box-shadow: var(--r-shadow), var(--r-inset);
  overflow:hidden;
}

/* glossy sweep */
.ribbon__bar::before{
  content:"";
  position:absolute; inset:0;
  background:
    linear-gradient(110deg, transparent 0% 35%,
    rgba(255,255,255,.22) 45%,
    rgba(255,255,255,0) 60%);
  transform: translateX(-120%);
  opacity:0;
}

/* chevron tail */
.ribbon__bar::after{
  content:"";
  position:absolute; right:-18px; top:0; bottom:0;
  width:36px;
  background: var(--r-grad);
  transform: skewX(-35deg) scaleX(.85);
  filter: drop-shadow(6px 10px 12px rgba(0,0,0,.08));
  border-radius: 8px;
  opacity:.9;
}

/* badge */
.ribbon__badge{
  position:absolute; left:12px; top:50%; transform: translateY(-50%) scale(.8);
  width:46px; height:46px; border-radius:999px;
  display:grid; place-items:center;
  color:#0f1a3a; background:#fff;
  border:3px solid #3b7bff;
  font: 800 16px/1 var(--primary-font, ui-sans-serif);
  box-shadow: 0 8px 16px rgba(0,0,0,.12);
  transition: transform .4s cubic-bezier(.2,.8,.2,1);
}

/* title/desc */
.ribbon__title{ font-weight:800; }
.ribbon__desc{ margin:10px 0 0; color:#222; opacity:.85; }

/* Direction-flipped ribbons (right aligned) */
.ribbon--flip .ribbon__bar{
  padding:10px 74px 10px 18px;
  justify-content:flex-end;
}
.ribbon--flip .ribbon__badge{
  left:auto; right:12px;
}
.ribbon--flip .ribbon__bar::after{
  right:auto; left:-18px; transform: skewX(35deg) scaleX(.85);
}

/* Color variants if you want subtle hue differences (optional) */
.r--blue  { --r-grad: linear-gradient(90deg,#4167e8 0%,#56ab2f 100%); }
.r--yellow{ --r-grad: linear-gradient(90deg,#7fd14c 0%,#56ab2f 100%); }
.r--purple{ --r-grad: linear-gradient(90deg,#1d2b64 0%,#0f4c81 60%, #173b9a 100%); }
.r--green { --r-grad: linear-gradient(90deg,#3a86ff 0%,#2bb673 100%); }

/* ==== REVEAL STATES (added by JS) ==== */
.ribbon.is-in{
  opacity:1; transform: none;
}
.ribbon.is-in .ribbon__badge{
  transform: translateY(-50%) scale(1);
}

/* play the gloss sweep once visible */
@keyframes shine {
  from { transform: translateX(-120%); opacity:0; }
  10%  { opacity:.7; }
  to   { transform: translateX(120%); opacity:0; }
}
.ribbon.is-in .ribbon__bar::before{
  animation: shine 1.2s .25s cubic-bezier(.2,.8,.2,1) 1 both;
}

/* hover polish */
@media (hover:hover){
  .ribbon .ribbon__bar:hover{ filter: brightness(1.03); }
  .ribbon .ribbon__bar:hover .ribbon__badge{ transform: translateY(-50%) scale(1.06); }
}

/* Reduced motion = no animation, instant on */
@media (prefers-reduced-motion: reduce){
  .ribbon{ transition:none; opacity:1; transform:none; }
  .ribbon__badge{ transition:none; transform: translateY(-50%) scale(1); }
  .ribbon__bar::before{ animation:none; transform:none; opacity:0; }
}

/*===================================================
    Mission Values Vision Section
====================================================*/

/* ===== Mission · Vision · Values cards ===== */
.mv-grid{
  display:grid;
  grid-template-columns: repeat(3,1fr);
  gap:24px;
}

.mv-card{
  --g1:#ff8a00;         /* default gradient start */
  --g2:#ffd36a;         /* default gradient end   */
  --accent:#ff8a00;     /* default accent color   */
  position:relative;
  background:#fff;
  border-radius:18px;
  padding:28px 22px 48px;
  box-shadow: 0 10px 30px rgba(0,0,0,.08);
  overflow:hidden;
  isolation:isolate;
}

/* Angled gradient corner banner (top-left -> diagonal) */
.mv-card__banner{
  position:absolute;
  inset:0 auto auto 0;
  width: 75%;
  height: 110px;
  background: linear-gradient(135deg,var(--g1),var(--g2));
  clip-path: polygon(0 0, 100% 0, 72% 60%, 0 100%);
  border-top-left-radius:18px;
  z-index:-1;
  filter: drop-shadow(0 12px 18px rgba(0,0,0,.12));
}

/* tiny fold accent at the corner */
.mv-card::before{
  content:"";
  position:absolute;
  top:0; left:0;
  border-right: 14px solid rgba(255,255,255,.55);
  border-bottom: 14px solid transparent;
  border-top-left-radius:18px;
}

/* Title sits below the banner edge */
.mv-card__head{ margin-top:54px; }
.mv-card__title{
  font-weight:700;
  font-size:20px;
  color:#000000;
  text-shadow:0 1px 0 rgba(0,0,0,.25);
}

/* Text body */
.mv-card__text{
  margin:10px 0 0;
  color:#5b6b7a;
  line-height:1.65;
  min-height:72px;
}

/* Number at bottom center */
.mv-card__num {
  position: absolute;
  left: 80%;
  bottom: 18px;
  transform: translateX(-50%);
  font-weight: 700;
  font-size: 22px;
  background: var(--primary-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Themes */
.mv--orange{ --g1:#56ab2f; --g2:#a8e063; --accent:#56ab2f; }
.mv--green { --g1:#4b83ff; --g2:#50c44c; --accent:#56ab2f; }
.mv--teal  { --g1:#09129b; --g2:#4b83ff; --accent:#4b83ff; }

/* Hover micro interaction */
.mv-card{ transition: transform .18s ease, box-shadow .18s ease; }
.mv-card:hover{ transform: translateY(-4px); box-shadow:0 16px 38px rgba(0,0,0,.12); }

/* Responsive */
@media (max-width: 991px){
  .mv-grid{ grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 575px){
  .mv-grid{ grid-template-columns: 1fr; }
  .mv-card__text{ min-height:auto; }
}

/* ===== Mission / Vision / Values — Animations ===== */

.mv-grid{
  display:grid;
  gap:28px;
}

.mv-card{
  position:relative;
  border-radius:18px;
  background:#fff;
  box-shadow: 0 14px 40px rgba(0,0,0,.08);
  padding:22px 22px 26px;
  overflow:hidden;

  /* initial (hidden) */
  opacity:0;
  transform: translateY(22px) scale(.98);
  filter: saturate(.9);
  transition:
    opacity .65s ease,
    transform .65s cubic-bezier(.2,.8,.2,1),
    filter .65s ease;
}

/* color accents you already set — keep using them */
.mv--orange .mv-card__banner{ --grad: linear-gradient(135deg,#58c07b 0%, #2f9f6e 100%);}
.mv--green  .mv-card__banner{ --grad: linear-gradient(135deg,#4b83ff 0%, #56ab2f 100%); }
.mv--teal   .mv-card__banner{ --grad: linear-gradient(135deg,#2a49c9 0%, #0a6ddf 100%); }

/* angled banner slab */
.mv-card__banner{
  --grad: linear-gradient(135deg,#4b83ff 0%, #56ab2f 100%);
  position:absolute; inset:0 0 auto 0; height:120px;
  background: var(--grad);
  /* the slanted cut */
  clip-path: polygon(0 0, 100% 0, 75% 55%, 0 80%);
  /* start slightly above and narrower */
  transform: translateY(-24px) scaleX(.92);
  transform-origin: left;
}

/* shiny sweep */
.mv-card__banner::after{
  content:"";
  position:absolute; inset:0;
  background:
    linear-gradient(100deg, transparent 0% 45%,
      rgba(255,255,255,.4) 50%,
      rgba(255,255,255,0) 65%);
  transform: translateX(-110%);
  opacity:0;
}

/* title / text / num base */
.mv-card__head{ position:relative; margin-top:84px; }
.mv-card__title{ margin:0 0 8px; font-weight:800; }
.mv-card__text{ color:#2a2a2a; opacity:.9; }

/* When card animates in, number becomes visible */
.mv-card.is-in .mv-card__num {
  opacity: 1;
}

/* ===== When revealed ===== */
.mv-card.is-in{
  opacity:1;
  transform: none;
  filter: none;
}

.mv-card.is-in .mv-card__banner{
  animation:
    mvBannerIn .7s cubic-bezier(.2,.8,.2,1) .05s both,
    mvBannerFloat 6s ease-in-out 1.1s infinite;
}
.mv-card.is-in .mv-card__banner::after{
  animation: mvShine 1s .45s cubic-bezier(.2,.8,.2,1) 1 both;
}
.mv-card.is-in .mv-card__num{
  animation: mvPop .45s .35s cubic-bezier(.3,1.3,.4,1) both;
}

/* hover polish */
@media (hover:hover){
  .mv-card:hover{
    transform: translateY(-2px);
    box-shadow: 0 18px 46px rgba(0,0,0,.12);
  }
}

/* keyframes */
@keyframes mvBannerIn{
  from{ transform: translateY(-28px) scaleX(.86); opacity:.95; }
  to  { transform: translateY(0)     scaleX(1);    opacity:1; }
}
@keyframes mvShine{
  from{ transform: translateX(-110%); opacity:0; }
  10% { opacity:.8; }
  to  { transform: translateX(120%);  opacity:0; }
}
@keyframes mvPop{
  0%  { transform: scale(.7); opacity:0; filter:blur(2px); }
  60% { transform: scale(1.08); opacity:1; filter:none; }
  100%{ transform: scale(1); }
}
@keyframes mvBannerFloat{
  0%,100%{ transform: translateY(0)     scaleX(1); }
  50%    { transform: translateY(-4px)  scaleX(1.01); }
}

/* reduced motion: show instantly */
@media (prefers-reduced-motion: reduce){
  .mv-card,
  .mv-card *{ transition:none !important; animation:none !important; }
  .mv-card{ opacity:1; transform:none; filter:none; }
  .mv-card .mv-card__num{ opacity:1; transform:none; }
}

/*===================================================
    09 Content Section
====================================================*/
.content-section {
    position: relative;
}

.content-area {
    background-image: url('../img/home-page-abt-sec-bg.jpg'); /* Replace with actual path if different */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    
    background-color: rgba(195, 200, 255, 0.56); /* Fallback color */
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);

    padding-left: 30px;
    padding-right: 30px;
    align-items: center;
    border-radius: 10px;
}

.content-img-holder {
    display: flex;
    align-items: center;
    column-gap: 20px;
    position: relative;
    padding-right: 40px;
}

.content-img-holder > div:nth-child(2) {
    margin-top: 50px;
}

.content-img-holder .element {
    position: absolute;
    right: 20px;
    top: 30%;
}

.content-img-holder .element img {
    width: 140px;
}

.anim-illustration {
    width: 140px;
    height: auto;
    position: absolute;
    left: 20%;
    top: 0;
}

.anim-illustration.bottom {
    width: 80px;
    left: auto;
    right: 5%;
    top: auto;
    bottom: 15%;
}

/* Saas Content Section */
.saas-home .hexagon-pattern:not(.left) {
    width: 30%;
    top: 25%;
}

@media (max-width: 767px) {
    .saas-home .content-section {
        overflow: hidden;
    }

    .saas-home .hexagon-pattern:not(.left) {
        width: 60%;
    }
}

.content-list {
    margin: 30px 0 20px 0;
}

.content-list li {
    display: grid;
    grid-template-columns: 20px 1fr;
    align-items: flex-start;
    column-gap: 20px;
    font-family: var(--primary-font);
    font-size: 18px;
    line-height: 24px;
    font-weight: 500;
    color: #fff;
}

.content-list li:not(:last-of-type) {
    margin-bottom: 20px;
}

.content-list li i {
    background-color: rgba(255, 255, 255, 0.2);
    font-size: 14px;
    width: 25px;
    height: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #fff;
    margin-top: 5px;
}

/* IT Solution Content Section */
.it-content-img {
    background-image: url(../img/bg-shape01.svg);
    background-repeat: no-repeat;
    background-position: center center;
    width: 500px;
    height: auto;
}

.it-content-img.shape-2 {
    background-image: url(../img/bg-shape02.svg);
    background-size: 600px;
}

.it-content-img img {
    width: 450px;
    margin-top: 100px;
}

.content-area *:not(h1):not(h2):not(h3):not(.section-heading h2):not(.border-animation) {
  color: #ffffff !important;
}


/* Restore heading color */
.content-area h2,
.content-area .border-animation,
.content-area .section-heading h2 {
  color: #1a1a1a !important; /* or your original heading color */
}

@media (max-width: 992px) {
    .content-img-holder {
        padding: 0;
        margin-bottom: 40px;
    }
}

@media (max-width: 767px) {
    .content-area {
        padding-left: 15px;
        padding-right: 15px;
    }

    .anim-illustration {
        width: 100px;
    }

    .it-content-img {
        width: 80%;
    }

    .it-content-img.shape-2 {
        background-size: 100%;
    }
}

/* Left image slide-in with tilt */
@keyframes slideInTiltLeft {
    0% {
        opacity: 0;
        transform: translateX(-60px) rotateY(8deg);
    }
    100% {
        opacity: 1;
        transform: translateX(0) rotateY(0deg);
    }
}

/* Right content fade-slide in */
@keyframes fadeSlideUp {
    0% {
        opacity: 0;
        transform: translateY(40px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Default state before animation */
#capabilitiesSection .content-img-holder,
#capabilitiesSection .content-info > * {
    opacity: 0;
}

/* Animate left visuals */
#capabilitiesSection.animate .content-img-holder {
    animation: slideInTiltLeft 1.2s ease forwards;
}

/* Animate each block of right content individually */
#capabilitiesSection.animate .section-heading {
    animation: fadeSlideUp 0.8s ease forwards;
    animation-delay: 0.2s;
}
#capabilitiesSection.animate .check-list {
    animation: fadeSlideUp 0.8s ease forwards;
    animation-delay: 0.5s;
}
#capabilitiesSection.animate .btn-group {
    animation: fadeSlideUp 0.8s ease forwards;
    animation-delay: 0.8s;
}

@media (min-width: 768px) {
    #capabilitiesSection .content-img-holder {
        transform-style: preserve-3d;
        will-change: transform;
    }
}

/*===================================================
    10 Project Section
====================================================*/
.project-carousel {
    overflow: hidden;
}

.project-item {
    position: relative;
    border-radius: 5px;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.project-item .project-thumb img {
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

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

.project-item .project-content {
    background-color: #eceeff99;
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
    border-top-right-radius: 2px;
    padding: 20px 30px;
    width: 90%;
    position: absolute;
    left: -1px;
    bottom: -15px;
    padding-bottom: 30px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.project-item:hover .project-content {
    padding-bottom: 75px;
}

.project-item .project-content h4 {
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 10px;
    line-height: 1.3;
    position: relative;
    padding-left: 20px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.project-item .project-content h4:before {
    background-color: var(--grey-color);
    content: "";
    width: 15px;
    height: 1.5px;
    border-radius: 2px;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
}

.project-item .project-content h3 {
    font-size: 22px;
    font-weight: 700;
    line-height: 1.5;
    margin: 0;
}

.project-thumb img {
    height: 300px;        /* Increase as needed */
    object-fit: cover;    /* Maintain aspect ratio & crop if needed */
    width: 100%;
}

.project-item .project-content .read-more {
    font-size: 20px;
    border: 1px solid var(--grey-color);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    visibility: hidden;
    opacity: 0;
    position: absolute;
    left: 30px;
    bottom: -20px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.project-item .project-content .read-more:hover {
    background: 
        var(--primary-gradient) padding-box, /* button background */
        var(--primary-gradient) border-box;  /* border layer */
    color: var(--primary-color);
    border: 1px solid transparent;
    background-origin: border-box;
    background-clip: padding-box, border-box;
}

.project-item:hover .project-content .read-more {
    bottom: 20px;
    visibility: visible;
    opacity: 1;
    transition-delay: .1s;
}

.underline-animation {
    position: relative;
    display: inline-block;
    z-index: 1;
}

.underline-animation::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 2px; /* Adjust based on your font size */
    width: 100%;
    height: 10px;
    background: var(--primary-gradient);
    z-index: -1;
    transition: 0.4s ease;
    border-radius: 2px;
}

@media (max-width: 992px) {
    .project-section .section-heading-wrap {
        align-items: flex-start;
        flex-direction: column;
        margin-bottom: 40px;
    }

    .project-section .section-heading {
        margin-bottom: 20px;
    }
}

.project-carousel .swiper-slide {
  width: 300px;
  margin: auto; /* ensures it's centered inside the Swiper container */
  box-sizing: border-box;
}

.project-carousel-wraper {
  padding: 0 20px;
}

@media (max-width: 768px) {
  .project-carousel .swiper-slide {
    width: 80%;
  }
}

/*===================================================
Index (Home Page)Project Section Styles (Swiper 4-card layout)
====================================================*/

/* ================== Coverflow Projects ================== */
.coverflow-wrap {
  position: relative;
  max-width: 1100px;
  margin: 0 auto;
  padding: 36px 80px 46px; /* ← ensures space inside for arrows */
  overflow: hidden; /* ← hides overflowing side cards */
}
/* dark stage like your screenshot (optional) */
/* .coverflow-wrap{ background:#303030; border-radius:16px; } */

.coverflow-swiper{ overflow: visible; }

/* Each slide card */
.coverflow-swiper .swiper-slide{
  width: 320px;                         /* base width; Swiper uses this for 'auto' */
  will-change: transform;
}

/* --- Coverflow card with bottom info panel --- */
.cf-card{
  position: relative;
  display: block;
  border-radius: 14px;
  overflow: hidden;
  transform-origin: center bottom;
  box-shadow: 0 8px 24px rgba(0,0,0,.25);
  background:#e9ecf2; /* fallback */
}
.cf-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 14px;
  padding: 4px; /* Border thickness */
  background: var(--primary-gradient); /* Your gradient */

  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;

  pointer-events: none;
}

.cf-card img{
  display:block;
  width:100%;
  height: 360px;                             /* adjust if you want */
  object-fit: cover;
}

/* Frosted meta panel (like your screenshot) */
.cf-meta{
  position:absolute;
  left: 12px;
  right: 12px;
  bottom: 12px;
  padding: 14px 16px 16px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.85);
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
  box-shadow: 0 6px 16px rgba(17,24,39,.08);
}

.cf-cat{
  font-size: 13px;
  color:#656d7a;
  display:flex; align-items:center; gap:8px;
  margin-bottom: 6px;
}
.cf-cat::before{
  content:"—";
  color:#9aa3af;
}

.cf-title{
  font-size: 20px;
  font-weight: 800;
  color:#111827;
  line-height: 1.25;
  letter-spacing: .2px;
  /* clamp to 2 lines just in case */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* (optional) lift on hover for active slide only */
.coverflow-swiper .swiper-slide-active .cf-card{
  box-shadow: 0 18px 40px rgba(0,0,0,.35);
}

/* arrows */
.cf-nav {
  z-index: 2;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: var(--primary-gradient);
  color: #fff;
  font-size: 26px;
  line-height: 1;
  font-weight: 700;
  display: grid;
  place-items: center;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.18);
  transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
  opacity: 0.95;
  pointer-events: auto;
}
.cf-prev {
  left: 0;
}
.cf-next {
  right: 0;
}

.cf-nav:hover{ transform:translateY(calc(-50% - 1px)) scale(1.05); box-shadow:0 14px 28px rgba(0,0,0,.22); }
.cf-prev{ left: 18px; }
.cf-next{ right: 18px; }

/* dots */
.cf-pagination-wrap {
  position: absolute;
  left: 50%;
  bottom: -40px;  /* adjust spacing below slides */
  transform: translateX(-50%);
  pointer-events: none;  /* let clicks go through */
  width: auto;
  z-index: 10;
}

/* The actual dots container */
.cf-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  pointer-events: auto; /* enable dot clicks */
   margin-top: 30px;
}

/* Your existing bullet styles */
.cf-pagination .swiper-pagination-bullet {
  width: 8px;
  height: 8px;
  background: #cbd5e1;
  opacity: 1;
  margin: 0 6px !important;
}

.cf-pagination .swiper-pagination-bullet-active {
  width: 28px;
  border-radius: 999px;
  background: var(--primary-gradient);
}

/* Responsive tweaks */
@media (max-width: 991px){
  .coverflow-wrap{ padding: 28px 64px 38px; }
  .coverflow-swiper .swiper-slide{ width: 280px; }
  .cf-card img{ height: 320px; }
}
@media (max-width: 640px){
  .coverflow-wrap{ padding: 24px 56px 34px; }
  .coverflow-swiper .swiper-slide{ width: 240px; }
  .cf-card img{ height: 280px; }
}

/* === Project Section Entrance === */

/* Heading fade-slide */
@keyframes fadeSlideUp {
    0% {
        opacity: 0;
        transform: translateY(40px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Zoom/flip cards in */
@keyframes zoomInCard {
    0% {
        transform: scale(0.85) rotateY(5deg);
        opacity: 0;
    }
    100% {
        transform: scale(1) rotateY(0);
        opacity: 1;
    }
}

/* Arrows and dots fade/slide */
@keyframes fadeInCenter {
    0% {
        opacity: 0;
        transform: translateY(30px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Initial hidden state */
#projectSection .section-heading,
#projectSection .coverflow-swiper,
#projectSection .cf-pagination,
#projectSection .cf-nav {
    opacity: 0;
}

/* Animate when in view */
#projectSection.animate .section-heading {
    animation: fadeSlideUp 1s ease forwards;
}

#projectSection.animate .coverflow-swiper {
    animation: zoomInCard 1s ease forwards;
    animation-delay: 0.3s;
}

#projectSection.animate .cf-pagination {
    animation: fadeInCenter 0.8s ease forwards;
    animation-delay: 0.6s;
}

#projectSection.animate .cf-nav {
    animation: fadeInCenter 0.8s ease forwards;
    animation-delay: 0.8s;
}

/* =========================
   Projects: enter animation
========================= */
#projects-grid .project-item{
  opacity: 0;
  transform: translateY(28px) scale(.98);
  filter: blur(2px) saturate(.9);
}

#projects-grid .project-item.proj-enter{
  animation: projFadeUp .75s ease forwards;
}

@keyframes projFadeUp{
  0%{
    opacity:0;
    transform: translateY(28px) scale(.98);
    filter: blur(2px) saturate(.9);
  }
  60%{
    opacity:1;
    transform: translateY(-6px) scale(1.02);
    filter: blur(.3px);
  }
  100%{
    opacity:1;
    transform: translateY(0) scale(1);
    filter: none;
  }
}
/*===================================================
    11 Project Details
====================================================*/
.project-info {}

.project-info {
    padding-bottom: 50px; /* creates space below white box */
}

.project-info::before {
    content: "";
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.05); /* light overlay */
    z-index: -1;
}

.project-details.padding {
    padding-bottom: 40px;
}

.project-details-content p:last-of-type {
    margin-bottom: 0;
}

.project-info-list {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    margin-top: -80px;
    box-shadow: 0px 30px 50px 0px rgba(0, 9, 40, 0.1);
    padding: 40px;
    border-radius: 10px;
    background-color: #ffffff;
    overflow: hidden;
}

.project-info-list::before {
    content: "";
    position: absolute;
    inset: 0;
    background: url('../img/project-info-bg.jpg') no-repeat center center;
    background-size: cover;
    opacity: 0.45;
    z-index: 0;
    border-radius: 10px;
}

.project-info-list > * {
    position: relative;
    z-index: 1;
}

@media (max-width: 768px) {
    .project-info-list {
        grid-template-columns: 1fr;
        padding: 20px;
    }
}

.project-info-item {
    padding: 30px;
}

.project-info-item:not(:last-of-type) {
    border-right: 1px solid #ccc;
}

.project-info-item h3 {
    font-weight: 900;
    margin-bottom: 10px;
    line-height: 1;
}

.project-info-item p {
    font-weight: 500;
    margin: 0;
}

.project-info-item .default-btn {
    margin-top: 10px;
}

.overview-wrap {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 20px;
}

.overview-wrap h3 {
    font-weight: 700;
    font-size: 22px;
}

.overview-wrap ul {
    list-style: inside;
}

.overview-wrap .overview-list li:not(:last-of-type) {
    margin-bottom: 8px;
}

.project-social {
    margin-top: 20px;
}

.project-social li {
    display: inline-block;
}

.project-social li:first-child {
    font-size: 18px;
    font-weight: 600;
    font-family: var(--primary-font);
    color: var(--heading-color);
    display: block;
    margin-bottom: 10px;
    margin-right: 10px;
}

.project-social li a {
    border: 1px solid #ddd;
    width: 40px;
    height: 40px;
    color: var(--grey-color);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.project-social li a:before {
    background-color: var(--primary-color);
    width: 40px;
    height: 40px;
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    opacity: 1;
    transform: translate(-50%, -50%) scale(0);
    z-index: -1;
    visibility: hidden;
    opacity: 0;
    transition: 0.4s ease;
}

.project-social li:hover a {
    border: 1px solid transparent;
    color: #fff;
}

.project-social li:hover a:before {
    visibility: visible;
    opacity: 1;
    transition: 0.4s;
    transform: translate(-50%, -50%) scale(1);
}

@media(max-width:992px) {
    .project-info-list {
        grid-template-columns: repeat(2, 1fr);
        margin-top: -80px;
    }

    .project-info-list li:nth-child(2),
    .project-info-list li:nth-child(1) {
        border-bottom: 1px solid #ccc;
    }
}

@media(max-width:667px) {
    .project-info-list {
        grid-template-columns: 1fr;
        margin-top: -50px;
    }

    .project-info-list li:not(:last-of-type) {
        border-right: none;
        border-bottom: 1px solid #ccc;
    }

    .overview-wrap {
        grid-template-columns: 1fr;
        grid-row-gap: 20px;
    }
}

.project-details-content ul.solution-list {
    list-style: inside;
    margin-top: 15px;
    margin-bottom: 30px;
}

.project-details-content ul.solution-list li:not(:last-of-type) {
    margin-bottom: 8px;
}

#particles-js {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: #003680; /* Or transparent */
  z-index: -1; /* Ensure it's behind all your content */
}

/* =========================
   Project Details – Info box reveal
   effect: drop-in + light sweep + divider draw
========================= */
.project-info { position: relative; }

.project-info-list{
  /* initial hidden state */
  opacity: 0;
  transform: perspective(1100px) translateY(44px) rotateX(7deg) scale(.985);
  filter: blur(2px) saturate(.95);
  will-change: transform, opacity, filter;
  overflow: hidden; /* for the sheen */
}

/* Light sheen sweep across the card */
.project-info-list::after{
  content:"";
  position:absolute; inset:-25%;
  pointer-events:none;
  background: linear-gradient(115deg,
    rgba(255,255,255,0) 40%,
    rgba(255,255,255,.28) 50%,
    rgba(255,255,255,0) 60%);
  transform: translateX(-120%) rotate(6deg);
  filter: blur(6px);
  opacity: 0;
}

/* vertical dividers become animated lines */
.project-info-item{
  position: relative;
}
.project-info-item:not(:last-of-type)::after{
  content:"";
  position:absolute; top:20px; right:0;
  width:1px; height:0;
  background: linear-gradient(to bottom, rgba(0,0,0,.1), rgba(0,0,0,.2));
  transition: height .8s ease .3s;
}

/* when in view – play the sequence */
.project-info-list.pd-in-view{
  animation: pdCardFloatIn .9s cubic-bezier(.2,.8,.2,1) forwards;
}
.project-info-list.pd-in-view::after{
  animation: pdSheen 1s ease .25s forwards;
}
.project-info-list.pd-in-view .project-info-item{
  opacity: 0;
  transform: translateY(18px);
  animation: pdItemUp .55s ease forwards;
}
.project-info-list.pd-in-view .project-info-item:nth-child(1){ animation-delay: .18s; }
.project-info-list.pd-in-view .project-info-item:nth-child(2){ animation-delay: .30s; }
.project-info-list.pd-in-view .project-info-item:nth-child(3){ animation-delay: .42s; }

/* grow the dividers after items settle */
.project-info-list.pd-in-view .project-info-item:not(:last-of-type)::after{
  height: calc(100% - 40px); /* matches item padding top/bottom (30px) */
  transition-delay: .55s;
}

/* keyframes */
@keyframes pdCardFloatIn{
  0%   { opacity:0; transform: perspective(1100px) translateY(44px) rotateX(7deg) scale(.985); filter: blur(2px) saturate(.95); }
  60%  { opacity:1; transform: perspective(1100px) translateY(-6px) rotateX(0)    scale(1.01); filter: blur(.3px); }
  100% { opacity:1; transform: perspective(1100px) translateY(0)    rotateX(0)    scale(1);    filter: none; }
}
@keyframes pdSheen{
  0%   { opacity:0; transform: translateX(-120%) rotate(6deg); }
  10%  { opacity:1; }
  100% { opacity:0; transform: translateX(120%)  rotate(6deg); }
}
@keyframes pdItemUp{
  to { opacity:1; transform: translateY(0); }
}

/* accessibility: reduce motion */
@media (prefers-reduced-motion: reduce){
  .project-info-list,
  .project-info-list::after,
  .project-info-list .project-info-item,
  .project-info-item::after{
    animation: none !important;
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
    filter: none !important;
    height: auto !important;
  }
}

/* =========================
   Project Details – Content reveal
========================= */

/* generic helpers */
.pd-anim { opacity:0; }
.pd-anim.pd-play { animation-fill-mode: both; animation-timing-function: ease; }

/* keyframes */
@keyframes pdFadeUp {
  0% { opacity:0; transform: translateY(18px); filter: blur(2px); }
  60%{ opacity:1; transform: translateY(-4px); filter: blur(.3px); }
  100%{ opacity:1; transform: translateY(0); filter:none; }
}
@keyframes pdSlideL {
  0% { opacity:0; transform: translateX(-28px); filter: blur(2px); }
  100%{ opacity:1; transform: translateX(0);     filter:none; }
}
@keyframes pdSlideR {
  0% { opacity:0; transform: translateX(28px); filter: blur(2px); }
  100%{ opacity:1; transform: translateX(0);    filter:none; }
}
@keyframes pdHeroZoom {
  0%   { opacity:0; transform: scale(1.06) translateY(16px); filter: blur(2px) saturate(.95); }
  60%  { opacity:1; transform: scale(1.005) translateY(-2px); filter: blur(.3px); }
  100% { opacity:1; transform: scale(1) translateY(0); filter:none; }
}
/* “wipe” reveal using clip-path */
@keyframes pdWipeIn {
  0%   { opacity:0; clip-path: inset(0 100% 0 0 round 8px); transform: translateY(10px); }
  60%  { opacity:1; }
  100% { opacity:1; clip-path: inset(0 0 0 0 round 8px); transform: translateY(0); }
}

/* use CSS var for delay/duration */
.pd-play{ animation-delay: var(--pd-d, 0s); animation-duration: var(--pd-t, .7s); }

/* specific targets (initial states) */
.project-details .project-thumb img.pd-anim      { will-change: transform, opacity, filter; }
.project-details .project-thumb img.pd-play      { animation-name: pdHeroZoom; --pd-t: 1s; }

.project-details .project-details-content h2.pd-play { animation-name: pdFadeUp; }
.project-details .project-details-content p.pd-play  { animation-name: pdFadeUp; }

.project-details .overview-wrap > div:nth-child(1) .pd-play { animation-name: pdSlideL; }
.project-details .overview-wrap > div:nth-child(2) .pd-play { animation-name: pdSlideR; }

.project-details .post-details-gallery li img.pd-play { animation-name: pdWipeIn; --pd-t:.8s; }

.project-details .solution-list li.pd-play { animation-name: pdFadeUp; --pd-t:.55s; }

/* reduce motion accessibility */
@media (prefers-reduced-motion: reduce){
  .pd-anim, .pd-play { opacity:1 !important; animation:none !important; transform:none !important; filter:none !important; clip-path:none !important; }
}

/*===================================================
    12 WorkFlow Section
====================================================*/
.workflow-section {
    position: relative;
}

.workflow-section .anim-illustration {
    position: absolute;
    left: auto;
    right: 25%;
    top: -5%;
}

.workflow-section .anim-illustration.bottom {
    position: absolute;
    width: 100px;
    left: auto;
    right: 40%;
    top: auto;
    bottom: -7%;
}

.workflow-wrap {
    background-image: url('../img/about-what-we-do-bg.jpg');
    background-size: cover;
    background-position: center;
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
    padding-left: 30px;
    padding-right: 30px;
    align-items: flex-end;
    border-radius: 10px;
}

.saas-home .workflow-wrap {
    padding: 0;
    background-color: transparent;
}

.workflow-items {
    position: relative;
    max-width: 370px;
}

.workflow-item {
    position: relative;
    padding-left: 70px;
    padding-bottom: 25px;
    display: flex;
}

.workflow-items .workflow-item:last-child {
    padding-bottom: 0;
}

.workfow-count {
    background: #fff;
    color: var(--secondary-color);
    font-family: var(--secondary-font);
    font-size: 20px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    position: absolute;
    left: 0;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background-size: 150% 150%;
    background-repeat: no-repeat;
    background-position: center;
    box-shadow: 0px 0px 0px 5px rgba(255, 255, 255, 0.3);
    transition-duration: 0.4s;
}

.workflow-line {
    background-image: repeating-linear-gradient(to right, #bbb 0, #bbb 4px, transparent 0, transparent 100%), repeating-linear-gradient(to right, #bbb 0, #bbb 4px, transparent 0, transparent 100%), repeating-linear-gradient(to bottom, #bbb 0, #bbb 4px, transparent 0, transparent 100%), repeating-linear-gradient(to bottom, #bbb 0, #bbb 4px, transparent 0, transparent 100%);
    background-position: left top, left bottom, left top, right top;
    background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
    background-size: 8px 1px, 8px 1px, 1px 8px, 1px 8px;
    width: 2px;
    height: 100%;
    margin-left: 0;
    position: absolute;
    left: 15px;
    z-index: -1;
}

.wf-line-progress {
    background-color: var(--primary-color);
    height: 0%;
    width: 2px;
    position: absolute;
    left: 15px;
    top: 0;
    transition-duration: 0.4s;
}

.workflow-info h3 {
    font-weight: 700;
    line-height: 1;
    margin-bottom: 10px;
}

.workflow-items .workflow-item:last-child p {
    margin: 0;
}

.workflow-img {
    position: relative;
}

.workflow-img .music {
    width: 50px;
    height: auto;
    position: absolute;
    left: 25%;
    top: -10%;
}

.workflow-img .music:nth-child(3) {
    width: 15px;
    left: auto;
    right: 25%;
    top: -10%;
    animation-delay: 300ms;
}

.workflow-img .music:nth-child(4) {
    width: 60px;
    left: auto;
    right: 12%;
    top: 18%;
    animation-delay: 500ms;
}

.workflow-img .mockup {
    position: absolute;
    left: -10%;
    top: 25%;
}

/* Home Saas Workflow*/
.saas-home .workflow-info h3 {
    color: #fff;
}

.saas-home .workflow-info p {
    color: #ddd;
}

@media (max-width: 992px) {

    .workflow-img {
        margin-top: 50px;
    }

    .workflow-img .music:nth-child(3),
    .workflow-img .music {
        top: 0;
    }

    .workflow-img .mockup {
        left: 0;
        top: 10%;
    }
}

@media (max-width: 767px) {
    .workflow-wrap {
        padding-left: 15px;
        padding-right: 15px;
    }
}

/* ===== What We Do – Scroll Animations ===== */

/* Defaults/fallbacks */
:root{
  --brand: var(--primary-color, #4b83ff);
  --brand2: #56ab2f;
}

/* Initial (before in-view) */
.workflow-section .section-heading,
.workflow-section .workflow-item .workflow-info,
.workflow-section .workfow-count {
  will-change: transform, opacity;
}

.workflow-section .section-heading{
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .6s ease, transform .6s ease;
}

.workflow-section .workflow-item{
  --delay: 0s;
  opacity: 0;
  transform: translateX(-14px);
  transition: opacity .55s ease var(--delay), transform .55s ease var(--delay);
}

.workflow-section .workflow-item .workflow-info h3,
.workflow-section .workflow-item .workflow-info p{
  transition: color .25s ease;
}

/* Badge starts smaller */
.workflow-section .workfow-count{
  transform: scale(.7);
  opacity: 0;
  transition: transform .45s cubic-bezier(.2,.75,.25,1) calc(var(--delay) + .1s),
              opacity  .45s cubic-bezier(.2,.75,.25,1) calc(var(--delay) + .1s),
              box-shadow .45s ease;
}

/* Progress line collapsed */
.workflow-section .wf-line-progress{
  height: 0%;
  background: linear-gradient(180deg, var(--brand), var(--brand2));
}

/* In-view state */
.workflow-section.in-view .section-heading{
  opacity: 1; transform: translateY(0);
}

.workflow-section.in-view .workflow-item{
  opacity: 1; transform: translateX(0);
}

.workflow-section.in-view .workfow-count{
  opacity: 1; transform: scale(1);
  box-shadow: 0 0 0 6px rgba(75,131,255,.12), 0 10px 18px rgba(0,0,0,.12);
}

/* Grow the progress for each step */
@keyframes wfGrow {
  from { height: 0%; }
  to   { height: 100%; }
}
.workflow-section.in-view .wf-line-progress{
  animation: wfGrow .8s ease forwards var(--delay);
}

/* Nice hover: emphasize a step */
.workflow-section .workflow-item:hover .workflow-info h3{ color: var(--brand); }
.workflow-section .workflow-item:hover .workfow-count{
  transform: scale(1.06);
  box-shadow: 0 0 0 8px rgba(75,131,255,.12), 0 14px 22px rgba(0,0,0,.14);
}

/* Stagger per row */
.workflow-section .workflow-items .workflow-item:nth-child(1){ --delay:.00s; }
.workflow-section .workflow-items .workflow-item:nth-child(2){ --delay:.10s; }
.workflow-section .workflow-items .workflow-item:nth-child(3){ --delay:.20s; }
.workflow-section .workflow-items .workflow-item:nth-child(4){ --delay:.30s; }
.workflow-section .workflow-items .workflow-item:nth-child(5){ --delay:.40s; }
.workflow-section .workflow-items .workflow-item:nth-child(6){ --delay:.50s; }

/* Optional: rounded caps for dashed border line look crisper */
.workflow-section .workflow-line{ border-radius: 2px; }

/*===================================================
    13 Short Feature Section
====================================================*/
.feature-section {
    overflow: hidden;
}

.feature-img {
    position: relative;
    text-align: center;
}

.feature-img img:not(:first-of-type) {
    position: absolute;
    right: 0;
    top: 0;
}

.feature-img img:nth-child(1) {
    max-width: 400px;
}

.feature-img img:nth-child(2) {
    width: 230px;
    top: 30%;
    right: 10%;
}

.feature-img img:nth-child(3) {
    width: 250px;
    left: 0;
    right: auto;
    top: auto;
    bottom: 5%;
}

.feature-lists {
    max-width: 380px;
}

.feature-item {
    display: grid;
    grid-template-columns: 80px 1fr;
    grid-column-gap: 30px;
}

.feature-lists .feature-item:not(:last-of-type) {
    margin-bottom: 20px;
}

.feature-icon {}

.feature-content h3 {
    font-weight: 700;
    font-size: 18px;
    line-height: 1;
    margin-bottom: 10px;
}

@media(max-width: 992px) {
    .feature-img {
        margin-bottom: 50px;
    }
}

@media(max-width: 767px) {
    .feature-img img:nth-child(1) {
        max-width: 100%;
    }

    .feature-img img:nth-child(2) {
        top: 20%;
        right: -5%;
    }
}

/* Center the heading vertically with the steps */
.feature-section .row.align-items-center {
    display: flex;
    align-items: center; /* vertical centering */
}

.feature-section .section-heading {
  max-width: 800px;
  margin: 0 auto 40px;
}

.approach-steps {
  position: relative;
  width: 100%;
  padding: 0;
}

@media (max-width: 991px) {
    /* On mobile, revert to normal stacking */
    .feature-section .row.align-items-center {
        flex-direction: column;
        align-items: flex-start;
    }
    .feature-section .section-heading {
        text-align: left;
    }
}

/* ---------- Approach Wavy Steps (left column) ---------- */
.approach-steps{
  position: relative;
  width: 100%;
  min-height: 320px;
  padding: 10px 0 0;
}

.steps-ribbon{
  position: absolute;
  inset: 10px 0 auto 0;
  width: 100%;
  height: 220px;
  pointer-events: none;
}

.steps-list{
  list-style: none;
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 10px;
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  column-gap: 18px;
  align-items: start;
}

.step{
  position: relative;
  text-align: center;
  padding-top: 80px;     /* space above badge */
  padding-bottom: 20px;
}

.step-badge{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 6px 16px rgba(0,0,0,.15), inset 0 2px 0 rgba(255,255,255,.9);
  display: grid;
  place-items: center;
  z-index: 2;
}

.step-num{
  font: 700 26px/1 var(--secondary-font, "Inter", system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans");
  color: #4b83ff;
  letter-spacing: 1px;
}

.step-pin{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 3px;
  height: 44px;
  background: var(--primary-gradient);
  border-radius: 3px;
  top: calc(80px + 88px - 10px); /* under badge */
  z-index: 1;
}

.step-title{
  font-weight: 700;
  margin: 64px 0 8px;   /* clears the pin */
  font-size: 18px;
}

.step-text{
  color: #566;
  font-size: 14px;
  line-height: 1.6;
  max-width: 240px;
  margin: 0 auto;
}

/* Make badges follow the wave */
.steps-list .step:nth-child(1) .step-badge{ top: 24px; }
.steps-list .step:nth-child(2) .step-badge{ top: 92px; }
.steps-list .step:nth-child(3) .step-badge{ top: 24px; }
.steps-list .step:nth-child(4) .step-badge{ top: 92px; }

.steps-list .step:nth-child(1) .step-pin{ top: calc(24px + 88px - 10px); }
.steps-list .step:nth-child(2) .step-pin{ top: calc(92px + 88px - 10px); }
.steps-list .step:nth-child(3) .step-pin{ top: calc(24px + 88px - 10px); }
.steps-list .step:nth-child(4) .step-pin{ top: calc(92px + 88px - 10px); }

.step-badge:hover{
  transform: translateX(-50%) scale(1.04);
  transition: transform .2s ease, box-shadow .2s ease;
  box-shadow: 0 10px 22px rgba(0,0,0,.18), inset 0 2px 0 rgba(255,255,255,.95);
}

/* ---------- Responsive ---------- */
@media (max-width: 991px){
  .approach-steps{ min-height: 360px; }
}

/* Mobile: vertical timeline for readability */
@media (max-width: 767px){
  .steps-ribbon{ display: none; }
  .steps-list{
    grid-template-columns: 1fr;
    row-gap: 26px;
    padding-left: 22px; /* room for vertical line */
  }
  .steps-list::before{
    content: "";
    position: absolute;
    left: 12px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: repeating-linear-gradient(
      to bottom,
      #d8dde7 0, #d8dde7 6px,
      transparent 6px, transparent 14px
    );
  }
  .step{
    text-align: left;
    padding-top: 0;
  }
  .step-badge{
    position: static;
    transform: none;
    width: 62px; height: 62px;
    display: inline-grid;
    margin-left: -10px;
  }
  .step-pin{ display: none; }
  .step-title{ margin: 10px 0 6px; }
  .step-text{ margin: 0; }
}

/* --- Alignment fix for wavy steps --- */
.approach-steps { position: relative; }
.steps-ribbon { z-index: 0; }
.steps-list { position: relative; z-index: 1; }

/* Use CSS variables so spacing follows badge position */
.steps-list .step{
  --badge-size: 88px;     /* circle diameter */
  --badge-top: 24px;      /* default (high crest) top position */
  --title-gap: 24px;      /* gap from circle bottom to title */
  position: relative;
  text-align: center;
  padding-top: calc(var(--badge-top) + var(--badge-size) + var(--title-gap));
  padding-bottom: 20px;
}

/* Low trough steps get a bigger top value so text sits lower */
.steps-list .step:nth-child(2),
.steps-list .step:nth-child(4){ --badge-top: 96px; }

/* Circle badge */
.step-badge{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: var(--badge-top);
  width: var(--badge-size);
  height: var(--badge-size);
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px rgba(43, 255, 0, 0.9), inset 0 2px 0 rgba(0,25,255,.9);
  display: grid;
  place-items: center;
  z-index: 2;
}

/* Pin under circle (shorter so it doesn't hit text) */
.step-pin{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 3px;
  height: 32px;
  background: linear-gradient(#7cc17a, #56ab2f);
  border-radius: 3px;
  top: calc(var(--badge-top) + var(--badge-size) - 10px);
  z-index: 1;
}

/* Title/Text */
.step-title{ margin: 0 0 8px; font-weight: 700; font-size: 18px; }
.step-text{ margin: 0 auto; max-width: 240px; font-size: 14px; line-height: 1.6; color: #566; }

/* Responsiveness: stack cleanly */
@media (max-width: 767px){
  .steps-ribbon{ display: none; }
  .steps-list{ grid-template-columns: 1fr; row-gap: 26px; }
  .steps-list .step{ --badge-top: 0px; padding-top: calc(var(--badge-size) + 16px); text-align: left; }
  .steps-list .step:nth-child(2),
  .steps-list .step:nth-child(4){ --badge-top: 0px; } /* no alternation on mobile */
  .step-badge{ position: static; transform: none; width: 62px; height: 62px; display: inline-grid; }
  .step-pin{ display: none; }
  .step-title{ margin: 10px 0 6px; }
}

/* ===== Our Approach — Reveal Timeline ===== */
.approach-steps{
  position:relative;
  isolation:isolate;
}

/* Ribbon: we’ll animate the stroke-dash via a CSS var set in JS */
.steps-ribbon { width:100%; height:220px; display:block; }
.steps-ribbon path{
  stroke-dasharray: var(--ribbon-len, 1600);
  stroke-dashoffset: var(--ribbon-len, 1600);
  transition: stroke-dashoffset 1.4s cubic-bezier(.2,.8,.2,1);
  will-change: stroke-dashoffset;
}

/* Steps initial state */
.steps-list{
  list-style:none; padding:0; margin:0;
  display:grid; grid-template-columns: repeat(4, minmax(220px,1fr));
  gap: 22px; position:relative; margin-top:-34px;
}
.step{
  text-align:center;
  opacity:0; transform: translateY(22px);
  transition: transform .6s cubic-bezier(.2,.7,.2,1), opacity .6s ease;
  will-change: transform, opacity;
}

/* Badge + pin base styles (adjust to your current CSS if needed) */
.step-badge{
  width:78px; height:78px; border-radius:999px;
  margin:0 auto 10px; background:#fff; border:3px solid #4b83ff;
  display:grid; place-items:center;
  transform: scale(.85); filter: drop-shadow(0 6px 12px rgba(0,0,0,.12));
  transition: transform .45s cubic-bezier(.2,.8,.2,1), border-color .35s;
}
.step-num{ font: 700 22px/1 var(--primary-font, ui-sans-serif); color:#1d2a5b; }

.step-pin{
  width:4px; height:0; margin:0 auto 12px; background:#20b15a;
  border-radius:2px;
  transition: height .45s cubic-bezier(.2,.8,.2,1);
}

/* Title/text */
.step-title{ margin: 6px 0 8px; font-weight:800; }
.step-text{ margin:0; opacity:.9; }

/* When section enters view */
.approach-in .steps-ribbon path{ stroke-dashoffset: 0; }

/* Staggered reveal class we add from JS */
.step.is-on{
  opacity:1; transform:none;
}
.step.is-on .step-badge{ transform: scale(1); }
.step.is-on .step-pin{ height:28px; }

/* Hover polish */
@media (hover:hover){
  .step:hover .step-badge{ border-color:#20b15a; transform: scale(1.04); }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .steps-ribbon path{ transition:none; stroke-dashoffset:0; }
  .step{ transition:none; opacity:1; transform:none; }
  .step-pin{ height:28px; }
}

/*===================================================
    Features Phone Carsoul Tab Section
====================================================*/
/* ===== Smartphone Interface Carousel ===== */

.smartphone-section {
  position: relative;
  overflow: hidden;
  background: #fff;
}

.yellow-band {
  --band-max: 1100px;
  background: url('../img/services-tools-tech-bg.jpg') center center / cover no-repeat;
  max-width: var(--band-max);
  margin: 0 auto;
  border-radius: 22px;
  position: relative;
  padding: 70px 18px 110px;
  overflow: visible;
}

.device-stage {
  position: relative;
  width: min(100%, 940px);
  margin: 0 auto;
  padding: 70px 0 100px;
}

.ghost-card {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 300px;
  height: 500px;
  background-size: contain; 
  background-position: center center;
  background-repeat: no-repeat;
  border-radius: 24px;
  opacity: 0.8;
  filter: blur(1.5px);
  z-index: 1;
  transition: background-image 0.4s ease-in-out, transform 0.4s ease;
  transform: translateY(20px) scale(0.9);
  box-shadow: 0 25px 60px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.25);
  backdrop-filter: blur(2.5px) saturate(110%);
}

.ghost-left {
  left: calc(50% - 360px);
  transform: translateY(-50%) scale(0.94);
}

.ghost-right {
  right: calc(50% - 360px);
  transform: translateY(-50%) scale(0.94);
}

.ghost-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.2);
  border-radius: inherit;
}

.ghost-card::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(to bottom, rgba(255,255,255,.08), rgba(255,255,255,0));
  border-radius: inherit; pointer-events:none;
}

/* When AOS triggers */
[data-aos].aos-animate .ghost-card {
  opacity: 0.35;
  transform: translateY(0) scale(0.94);
}

/* Bonus: ghost-left and right can shift horizontally a bit */
[data-aos].aos-animate .ghost-left {
  transform: translate(-10px, 0) scale(0.94);
}

[data-aos].aos-animate .ghost-right {
  transform: translate(10px, 0) scale(0.94);
}

.device {
  margin: 0 auto;
  width: 330px;
  height: 660px;
  background: var(--primary-gradient);
  border-radius: 42px;
  border: 10px solid #111;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .35);
  position: relative;
  z-index: 5;
}

.device:after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 8px;
  transform: translateX(-50%);
  width: 36%;
  height: 4px;
  border-radius: 4px;
  background: var(--primary-gradient);
}

.device-notch {
  position: absolute;
  top: -2px;
  left: 50%;
  transform: translateX(-50%);
  width: 160px;
  height: 24px;
  background: #111;
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
  z-index: 9;
}

.device-screen {
  position: absolute;
  inset: 8px;
  background: #f7f7f7;
  border-radius: 32px;
  overflow: hidden;
}

.phone-swiper {
  height: 100%;
}

.phone-swiper .swiper-wrapper {
  align-items: stretch;
}

.swiper-pagination-bullets .swiper-pagination-bullet {
  background: var(--primary-gradient);
  opacity: .9;
}

.swiper-pagination-bullet-active {
  opacity: 1;
}

.swiper-button-prev,
.swiper-button-next {
  color: #151515;
  --size: 34px;
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  background: var(--primary-gradient);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .18);
}

.swiper-button-prev:after,
.swiper-button-next:after {
  font-size: 16px;
  font-weight: 700;
}

/* === MODIFIED === */
/* Mini post card (slide) */
.post-card-mini {
  display: grid;
  grid-template-rows: auto auto 1fr;
  height: 100%;
  background: #fff;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .12);
}

.mini-header {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 14px 16px;
  border-bottom: 1px solid #eee;
  flex: 0 0 auto;
}

.avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ddd, #f4f4f4);
}

.meta {
  flex: 1;
}

.line {
  height: 8px;
  background: #ececec;
  border-radius: 6px;
  margin: 5px 0;
}

.line-strong {
  width: 70%;
  background: #e3e3e3;
}

.mini-media {
  aspect-ratio: 9 / 10;
  background: #fafafa;
}

.mini-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* === MINI BODY STRETCH + CLAMP === */
.mini-body {
  position: relative;
  padding: 16px;
  overflow: hidden;
  background: #fff;
}

.mini-body.is-clamped p {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: var(--clamp, 6);
  overflow: hidden;
}

.mini-body.is-clamped::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 32px;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
}

/* === END MINI BODY MODS === */

.pill {
  display: inline-block;
  padding: 8px 14px;
  background: #111;
  color: #fff;
  border-radius: 999px;
  font-size: 12px;
  letter-spacing: .2px;
  box-shadow: 0 10px 22px rgba(0, 0, 0, .18);
}

.mini-header.heading-only {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 16px 10px;
  border-bottom: 1px solid #eee;
}

.mini-title {
  margin: 0;
  font-size: 16px;
  font-weight: 800;
  color: #0f0f0f;
}

.mini-sub {
  color: #4b83ff;
  line-height: 1.3;
}

.smartphone-section .lead {
  color: #fff;
}

.hl {
  background: linear-gradient(#166b32, #190b5a) bottom left / 0% .35em no-repeat;
  padding-bottom: .05em;
  transition: background-size .7s cubic-bezier(.2, .8, .2, 1);
}

.hl.is-in {
  background-size: 100% .35em;
}

.tech-stack {
  color: #0f0f0f;
  font-weight: 900;
}

.mini-body {
  padding: 14px 16px 16px;
}

.tech-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
  font-size: 12.5px;
  color: #333;
}

.tech-list li strong {
  font-weight: 800;
  color: #111;
}

.post-card-mini .pill {
  display: none !important;
}

/* Responsive tweaks */
@media (max-width: 992px) {
  .ghost-card:nth-child(1) {
    display: none;
  }

  .ghost-card:nth-child(4) {
    display: none;
  }
}

@media (max-width: 576px) {
  .device {
    width: 300px;
    height: 610px;
  }

  .ghost-card {
    --w: 220px;
    --h: 420px;
  }

  .swiper-button-prev,
  .swiper-button-next {
    display: none;
  }

  .yellow-band {
    --band-max: 92vw;
    border-radius: 18px;
  }
}


/*===================================================
    14 Features Tab Section
====================================================*/
.features-tab-section {
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
    position: relative;
    z-index: 1;
}

.features-tab-section .anim-illustration:nth-child(1) {
    left: 10%;
}

.features-tab-section .animated-dots {
    position: absolute;
    z-index: -1;
}

.features-tab .tab-menu {
    justify-content: center;
    border-bottom: 1px solid #ddd;
    margin-bottom: 40px;
}

.features-tab .nav-item .nav-link {
    font-family: var(--primary-font);
    font-weight: 600;
    color: var(--heading-color);
    font-size: 18px;
    position: relative;
    padding: 0 0 10px 0;
    margin: 0 15px;
}

.features-tab .nav-item .nav-link:before {
    background-color: var(--primary-color);
    content: "";
    width: 0%;
    height: 2px;
    position: absolute;
    left: 0;
    bottom: -1px;
    transition: all .6s cubic-bezier(.75, 0, .175, 1);
}

.features-tab .nav-item .nav-link.active:before,
.features-tab .nav-item .nav-link:hover:before {
    width: 100%;
    transition: all .6s cubic-bezier(.75, 0, .175, 1);
}

.features-tab .nav-item .nav-link:hover,
.features-tab .nav-item .nav-link.active {
    color: var(--primary-color);
}

.features-tab .tab-content .section-heading h2 {
    font-size: 36px;
    line-height: 42px;
}

.features-tab .tab-thumb {
    position: relative;
}

.features-tab .tab-thumb .animated-shape {
    background: linear-gradient(45deg, #501E9C 0%, #8069F1 40%, #A45CEE 75%, #FF857F 100%);
    width: 400px;
    height: 400px;
}

.features-tab .tab-thumb .js-atropos {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
}

.features-tab-section .animated-dots span:nth-child(1) {
    left: 25%;
    top: 10%;
}

.features-tab-section .animated-dots span:nth-child(3) {
    top: 95%;
}

.features-tab-section .animated-dots span:nth-child(6) {
    background-color: #8e43e7;
    left: 7%;
    bottom: 75%;
}

.tab-pane.active.show .row > div {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-name: fade-in-bottom;
    animation-name: fade-in-bottom;
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    animation-fill-mode: both;
    transition: all 0.8s ease-in-out;
    transition-duration: 2000ms;
    animation-delay: 0.1s;
}

.tab-pane.active.show .row > div:nth-child(2) {
    animation-delay: 0.2s;
}

@media (max-width: 992px) {
    .features-tab .tab-thumb .js-atropos {
        text-align: center
    }

    .features-tab .tab-thumb .animated-shape {
        margin: 0 auto;
    }

    .features-tab .tab-thumb {
        margin-bottom: 60px;
    }
}

@media (max-width: 767px) {
    .features-tab .tab-menu {
        flex-wrap: wrap;
        row-gap: 15px;
    }

    .features-tab .nav-item .nav-link {
        font-size: 14px;
    }

    .features-tab .tab-thumb .animated-shape {
        width: 320px;
        height: 320px;
    }

    .features-tab .tab-thumb {
        margin-bottom: 10px;
    }
}

/* On mobile: stacked */
@media (max-width: 767px) {
  .steps-list {
    grid-template-columns: 1fr;
  }
}

/*===================================================
    15 Service Section
====================================================*/
.service-section {
    position: relative;
}

.saas-home .hexagon-pattern.left {
    background-size: 70%;
}

.service-item {
    background-color: rgba(255, 255, 255, 0.1);
    -webkit-backdrop-filter: blur(15px);
    backdrop-filter: blur(15px);
    box-shadow: 0px 1px 3px rgba(3, 4, 28, 0.10);
    padding: 50px 20px;
    border-radius: 0;
    text-align: center;
    position: relative;
    cursor: pointer;
}

.service-item .service-icon {
    position: relative;
}

.service-item .service-icon img {
    width: auto;
    height: 60px;
    margin: 0 auto;
    margin-bottom: 25px;
}

.service-item .service-icon:before {
    background: linear-gradient(145.27deg, rgba(255, 255, 255, 0.1) 15.55%, rgba(255, 255, 255, 0) 86.81%);
    width: 120px;
    height: 120px;
    border-radius: 50%;
    content: "";
    position: absolute;
    left: 50%;
    top: 30%;
    transform: translate(-50%, -50%);
}

.service-item h3 {
    font-size: 20px;
    line-height: 26px;
    font-weight: 600;
    color: #fff;
    margin-bottom: 20px;
}

.service-item p {
    margin-bottom: 10px;
    color: #ddd;
}

.service-item .read-more {
    background: var(--bg-gradient);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    position: absolute;
    left: 50%;
    bottom: -20px;
    transform: translateX(-50%);
    box-shadow: 0 20px 40px 0 rgba(21, 126, 251, 0.8);
}

.service-item .read-more:hover {
    box-shadow: none;
}


/*===================================================
    16 Service Details
====================================================*/
.service-details {}

.service-details .company-info li:not(:last-of-type) {
    margin-bottom: 15px;
}

.service-details .company-info li a {
    background-color: #f3f7fe;
    padding: 15px;
    border-radius: 2px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.service-details .company-info li a div {
    display: flex;
    align-items: center;
}

.service-details .company-info li a div > i {
    font-size: 25px;
    color: var(--primary-color);
    padding-right: 10px;
    margin-right: 10px;
    border-right: 1px solid #ddd;
}

.service-details .company-info li a h3 {
    font-size: 16px;
    font-weight: 600;
    line-height: 1;
    margin: 0;
    transition: all 0.3s ease;
}

.service-details .company-info li a:hover h3 {
    color: var(--primary-color);
}

.service-details .company-info li a > i {
    background-color: var(--primary-color);
    color: #fff;
    width: 30px;
    height: 30px;
    border-radius: 2px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

#sd-solution.overview-list {
    list-style-type: disc; /* normal bullets */
    padding-left: 20px; /* space so bullets don't touch text */
}
#sd-solution.overview-list li {
    background: none; /* remove custom icons */
    padding-left: 0;
}
/*===================================================
    ==== Service Details – Reveal Animations ====
====================================================*/
/* generic reveal baseline */
.reveal-init{
  opacity:0;
  transform: translateY(22px) scale(.98);
  filter: blur(6px);
  transition: transform .7s cubic-bezier(.2,.7,.2,1),
             opacity .7s ease,
             filter .7s ease;
}
.reveal-in{
  opacity:1;
  transform: none;
  filter: blur(0);
}

/* hero thumb: subtle pop + sheen sweep */
.project-thumb{
  position:relative;
  overflow:hidden;
  border-radius:14px;
  box-shadow: 0 24px 60px rgba(0,0,0,.18);
}
.project-thumb::after{
  content:"";
  position:absolute; inset:-10%;
  background: linear-gradient(110deg,
             rgba(255,255,255,0) 0%,
             rgba(255,255,255,.35) 45%,
             rgba(255,255,255,0) 60%);
  transform: translateX(-120%) skewX(-18deg);
  opacity:0;
  pointer-events:none;
}
.project-thumb.sheen::after{
  animation: sdSheen 1.2s .2s ease both;
}
@keyframes sdSheen{
  0%   { transform: translateX(-120%) skewX(-18deg); opacity:0;}
  20%  { opacity:1;}
  100% { transform: translateX(120%)  skewX(-18deg); opacity:0;}
}

/* glass cards for Overview/Benefits */
.overview-wrap > div{
  background: rgba(255,255,255,.65);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.55);
  border-radius: 12px;
  padding: 18px 18px 14px;
  box-shadow: 0 18px 40px rgba(0,0,0,.08);
}
.overview-wrap > div h3{ margin-top: 4px; }

/* gallery tiles */
.post-details-gallery{
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 14px;
}
.post-details-gallery li{
  overflow:hidden; border-radius:12px;
  box-shadow: 0 16px 36px rgba(0,0,0,.12);
}
.post-details-gallery img{
  display:block; width:100%; height:100%; object-fit:cover;
  transform: scale(1.02);
  transition: transform .6s ease;
}
.post-details-gallery li:hover img{ transform: scale(1.06); }

/* solution list — slide in from left */
#sd-solution.overview-list li{
  transform: translateX(-14px);
  opacity:0;
  transition: transform .6s cubic-bezier(.2,.7,.2,1), opacity .6s;
}
#sd-solution.overview-list li.in{ transform:none; opacity:1; }

/* tiny hover parallax on main image */
.project-thumb:hover img{ transform: scale(1.015); transition: transform .6s ease; }

/* performance hint */
.project-thumb, .post-details-gallery li, .overview-wrap > div { will-change: transform, opacity; }

/*===================================================
    17 Step Section
====================================================*/
.step-section {
    position: relative;
}

.step-section .anim-illustration:nth-child(1) {
    left: 15%;
}

.step-img {
    display: flex;
    align-items: center;
}

.step-img img:nth-child(1) {
    width: 250px;
    margin-right: -80px;
    margin-top: 50px;
    z-index: 1;
}

.step-img img:nth-child(2) {
    width: 300px;
}

.step-item {
    background-color: #fff;
    background: linear-gradient(45deg, #501E9C 0%, #8069F1 40%, #A45CEE 75%, #FF857F 100%);
    border-radius: 3px;
    display: grid;
    grid-template-columns: 70px 1fr;
    cursor: pointer;
    padding: 30px;
    box-shadow: 0px 5px 40px 0px rgba(0, 9, 40, 0.1);
    overflow: hidden;
    transition: all .5s cubic-bezier(.165, .84, .44, 1);
}

.step-item:hover {
    transform: translateY(-3px);
    transition: all .5s cubic-bezier(.165, .84, .44, 1);
}

.step-item h2 {
    font-family: var(--body-font);
    font-size: 80px;
    line-height: 1;
    -webkit-text-stroke: 1px rgba(255, 255, 255, 0.5);
    -webkit-text-fill-color: transparent;
    transition: all .5s cubic-bezier(.165, .84, .44, 1);
}

.step-item:hover h2 {
    -webkit-text-stroke: 1px rgba(255, 255, 255, 1);
    -webkit-text-fill-color: #fff;
    transition: all .5s cubic-bezier(.165, .84, .44, 1);
}

.step-item .step-content h3 {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 5px;
    color: #fff;
}

.step-item .step-content P {
    color: #ddd;
    margin: 0;
}

@media(max-width:992px) {
    .step-img img:nth-child(1) {
        margin-right: 0;
        margin-top: 0;
    }

    .step-item {
        grid-template-columns: 1fr;
    }

    .step-item h2 {
        font-size: 50px;
    }
}

@media(max-width:767px) {
    .step-section {
        overflow: hidden;
    }

    .step-img {
        flex-direction: column;
    }
}

/*===================================================
    18 Testimonial Section
====================================================*/
.testimonial-section {
    position: relative;
    overflow: hidden;
}

.testi-people {
    width: 30%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
}

.testi-people.right {
    left: auto;
    right: 0;
}

.testi-people img {
    width: 80px;
    height: auto;
    border-radius: 50%;
    position: absolute;
    left: 20%;
    top: 20%;
    box-shadow: 0px 30px 50px 0px rgba(0, 9, 40, 0.2);
    animation: ProgStream_scale_up_down 2.5s infinite alternate;
}

.testi-people img:nth-child(2) {
    width: 70px;
    left: 55%;
    top: 30%;
    animation-delay: 200ms;
}

.testi-people img:nth-child(3) {
    width: 75px;
    left: 3%;
    top: 40%;
    animation-delay: 100ms;
}

.testi-people img:nth-child(4) {
    width: 75px;
    left: 50%;
    top: 50%;
    animation-delay: 400ms;
}

.testi-people img:nth-child(5) {
    width: 78px;
    left: 60%;
    top: 70%;
    animation-delay: 200ms;
}

.testi-people img:nth-child(6) {
    width: 65px;
    left: 15%;
    top: 62%;
    animation-delay: 500ms;
}

.testi-people.right img {
    left: auto;
    right: 20%;
}

.testi-people.right img:nth-child(2) {
    width: 70px;
    left: auto;
    right: 55%;
    animation-delay: 200ms;
}

.testi-people.right img:nth-child(3) {
    width: 75px;
    left: auto;
    right: 3%;
    animation-delay: 100ms;
}

.testi-people.right img:nth-child(4) {
    width: 75px;
    left: auto;
    right: 50%;
    animation-delay: 400ms;
}

.testi-people.right img:nth-child(5) {
    width: 78px;
    left: auto;
    right: 60%;
    animation-delay: 200ms;
}

.testi-people.right img:nth-child(6) {
    width: 65px;
    left: auto;
    right: 15%;
    animation-delay: 500ms;
}

.carousel-pagination {
    text-align: center;
    padding-top: 20px;
}

.testimonial-carousel {
    overflow: hidden;
}

.testimonial-item {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    text-align: left;
}

.testimonial-item:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}

.testimonial-item .rattings {
    margin-bottom: 20px;
}

.testimonial-item .rattings li {
    font-size: 20px;
}

.rating-wrapper {
  display: flex;
  align-items: center;
  margin-top: 20px;
}

.rating-stars {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}

.rating-stars .star {
  width: 18px;
  height: 18px;
  margin-right: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.rating-stars .star.full i {
  color: #FFA300; /* Gold star */
  font-size: 18px;
}

.rating-stars .star.dot span {
  display: block;
  width: 6px;
  height: 6px;
  background: #ffffff80;
  border-radius: 50%;
}

.rating-score {
  background: #FFA300;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  margin-left: 10px;
  line-height: 1;
  padding: 4px 8px;
  border-radius: 12px;
}

.testimonial-quote {
  position: relative;
  font-style: italic;
  padding: 20px;
  font-size: 16px;
  line-height: 1.7;
  color: #333;
  text-align: left;
}

.testimonial-quote::before,
.testimonial-quote::after {
  font-family: Georgia, serif;
  font-size: 32px;
  color: #4b83ff;
  position: absolute;
}

.testimonial-quote::before {
  content: open-quote;
  left: -10px;
  top: -10px;
}

.testimonial-quote::after {
  content: close-quote;
  right: -10px;
  bottom: -10px;
}

.testimonial-item p {
    font-size: 22px;
    margin-bottom: 30px;
}

.review-author h3 {
    line-height: 1;
    margin-bottom: 10px;
    text-align: left;
}

.review-author h4 {
    font-size: 14px;
    color: var(--grey-color);
    text-transform: uppercase;
    letter-spacing: 2px;
    margin: 0;
    text-align: left;
}

.testimonial-carousel .review-author h4,
.testimonial-carousel .review-author h3 {
    transform: translateY(20%);
    visibility: hidden;
    opacity: 0;
    transition: all 0.3s ease-in-out;
}

.testimonial-carousel .swiper-slide-active .review-author h4,
.testimonial-carousel .swiper-slide-active .review-author h3 {
    transform: translateY(0);
    visibility: visible;
    opacity: 1;
    transition: all 0.3s ease-in-out;
    transition-duration: 0.4s;
    transition-delay: 0.2s;
}

.testimonial-carousel .swiper-slide-active .review-author h4 {
    transition-delay: 0.4s;
}

/* Testimonial Carousel 2 */
.testimonial-section-2 {
    overflow: hidden;
}

.testimonial-carousel-2 {
    overflow: hidden;
    position: relative;
}

.testimonial-carousel-2 .testimonial-item {
    display: flex;
    flex-direction: column;
    background-color: #c3c8ff99;
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
    border-radius: 5px;
    padding: 40px 30px;
    text-align: left;
    height: 100%;
    min-height: 430px; /* Ensures uniform card height */
    box-sizing: border-box;
}

.testimonial-carousel-2 .review-author {
    display: grid;
    grid-template-columns: 80px 1fr;
    column-gap: 20px;
    align-items: center;
}

.testimonial-carousel-2 .review-author img {
    border-radius: 50%;
}

.testimonial-carousel-2 .review-info {
    text-align: left;
}

.testimonial-carousel-2 .testimonial-item p {
    font-size: 18px;
    margin-top: 25px;
}

.testimonial-carousel-2 .testimonial-item .rattings {
    margin: 0;
}

/* Saas Testimonial */
.saas-home .review-author h3,
.saas-home .testimonial-item p {
    color: #fff;
}

.saas-home .review-author h4 {
    color: #ddd;
}

@media (max-width: 992px) {
    .testimonial-section .section-heading {
        padding: 0 100px;
    }

    .testimonial-section .testimonial-carousel-wraper {
        width: 50%;
        margin: 0 auto;
    }

    .testi-people {
        left: -40px;
    }

    .testi-people.right {
        right: -40px;
    }


    /* Testimonial 2 */
    .testimonial-section .carousel-wraper {
        width: 100%;
    }
}

@media (max-width: 767px) {
    .testimonial-section .section-heading {
        padding: 0;
    }

    .testi-people {
        display: none;
    }

    .testimonial-section .testimonial-carousel-wraper {
        width: 100%;
    }
}

@media (max-width: 576px) {
  .testimonial-stacked-card {
    margin: 40px 20px;
  }

  .testimonial-card-front {
    padding: 20px;
    text-align: left;
  }

  .testimonial-text {
    font-size: 15px;
    text-align: left;
  }
}

.review-location {
    display: flex;
    align-items: center;
    font-size: 14px;
    margin-top: 5px;
    color: #444;
    font-weight: 500;
}

.review-location img {
    margin-right: 8px;
    width: 20px;
    height: 15px;
    object-fit: cover;
    border-radius: 2px;
}

.testimonial-stacked-card {
  position: relative;
  max-width: 450px;
  margin: 60px auto;
  margin-left: 20px;
  text-align: left;
}

.testimonial-card-back {
  position: absolute;
  top: 5px;
  left: 2px;
  width: 100%;
  height: 100%;
  background: #4b83ff;
  border-radius: 12px;
  transform: rotate(-13deg);
  z-index: 1;
  box-shadow:
    0 25px 45px rgba(0, 0, 0, 0.15),
    0 5px 10px rgba(0, 0, 0, 0.1);
}

.testimonial-card-front {
  position: relative;
  background: #d1fcbd;
  padding: 30px;
  border-radius: 12px;
  z-index: 2;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.06);
}

.testimonial-header {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 20px;
}

.testimonial-avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.testimonial-stars {
  margin-top: 15px;
  color: #FFA300;
  font-size: 18px;
}

.testimonial-stars i {
  margin-right: 3px;
}

.testimonial-stack-section {
  text-align: center;
  padding: 60px 15px;
  position: relative;
}

.testimonial-stack-container {
  position: relative;
  max-width: 600px;
  margin: 0 auto;
  height: 480px;
  overflow: hidden;
  touch-action: pan-y;
}

.testimonial-stacked-card {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  opacity: 0;
  transform: scale(0.95) translateY(20px);
  transition: transform 0.5s ease, opacity 0.5s ease;
  z-index: 0;
}

.testimonial-stacked-card.active {
  opacity: 1;
  transform: scale(1) translateY(0);
  z-index: 2;
}

.testimonial-stacked-card.swiping {
  transition: none;
  z-index: 3;
}

.testimonial-dots {
  margin-top: 30px;
}

.testimonial-dots .dot {
  display: inline-block;
  width: 12px;
  height: 12px;
  margin: 0 5px;
  background: #bbb;
  border-radius: 50%;
  cursor: pointer;
  transition: background 0.3s;
}

.testimonial-dots .dot.active {
  background: #4b83ff;
}

.testimonial-stack-section {
  position: relative;
  overflow: hidden;
  padding: 80px 0;
  z-index: 1;
}

.testimonial-background-text {
  position: absolute;
  top: 50%;
  left: 100%;
  width: 100%;
  font-size: 14vw;
  font-weight: 900;
  color: rgba(255, 255, 255, 0.08);
  line-height: 1;
  white-space: nowrap;
  z-index: 0;
  pointer-events: none;
  user-select: none;
  animation: slideText 15s linear infinite;
  transform: translateY(-50%);
  letter-spacing: 0.5vw;
}

@keyframes slideText {
  0% {
    left: 100%;
  }
  100% {
    left: -100%;
  }
}

@media (max-width: 767px) {
  .testimonial-background-text {
    font-size: 24vw;
    letter-spacing: 1vw;
  }
}

.quote-mark {
  font-family: Georgia, serif;
  font-size: 28px;
  color: #4b83ff;
  font-weight: bold;
  position: relative;
}

.quote-mark.left {
  float: left;
  margin-right: 8px;
}

.quote-mark.right {
  float: right;
  margin-left: 8px;
}

.testimonial-meta {
  font-size: 14px;
  color: #444;
}

.author-name {
  font-weight: bold;
  display: block;
  margin-bottom: 3px;
}

.author-role {
  color: #666;
  margin-bottom: 8px;
}

.author-location img {
  width: 20px;
  height: 15px;
  vertical-align: middle;
  margin-right: 5px;
  border-radius: 2px;
}

.animated-counter-section {
  background: url('../img/testimonials-count-bg.jpg') center center / cover no-repeat;
  color: #fff;
  padding: 60px 0;
  border-radius: 30px;
  margin: 60px 30px;
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
}

.animated-counter-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 30px;
  z-index: -1;
}

.counter-box {
  margin-bottom: 30px;
}

.counter-wrapper {
  display: inline-flex;
  align-items: flex-end;
  justify-content: center;
  gap: 4px;
}

.counter-box .counter {
  font-size: 48px;
  font-weight: bold;
  line-height: 1;
  color: #fff;
  white-space: nowrap;
}

.unit {
  font-size: 48px;
  font-weight: bold;
  color: #fff;
  line-height: 1;
  margin-left: -2px;
  display: inline-block;
  position: relative;
  top: -4px; /* 👈 adjust this value as needed */
}

.counter-box p {
  font-size: 18px;
  font-weight: 200;
  color: #fff;
  margin-top: 15px;
  text-transform: capitalize;
  letter-spacing: 0.5px;
}


/*===================================================
    Index (Home Page) Testimonial Section
====================================================*/

/* ===== Testimonial carousel ===== */
:root{
  --t-accent: linear-gradient(135deg, #4b83ff, #56ab2f);                 /* border/quote color like screenshot */
  --t-ink-1:#222; --t-ink-2:#5b6573;
  --t-card-bg:#fff; --t-shadow: 0 10px 28px rgba(16,24,40,.12);
}

.t-carousel{
  position: relative;
  max-width: 980px;
  margin: 0 auto;
  overflow: visible;
  padding: 14px 48px 34px;
}

.t-track{
  display: flex;
  gap: 36px;
  will-change: transform;
  transition: transform .55s cubic-bezier(.2,.7,.2,1);
}

.t-slide{
  flex: 0 0 720px;                       /* visible card width */
  max-width: 720px;
  opacity: .45;
  transform: scale(.96);
  transition: opacity .35s ease, transform .35s ease, filter .35s ease;
  filter: blur(.2px);
}
.t-slide.is-active{
  opacity: 1;
  transform: scale(1);
  filter: none;
}

/* ----- Card layout & gradient border that doesn't collide with avatar ----- */
.t-card{
    width: 100%;
  position: relative;
  /* reserve space at the left for the overlapping avatar */
  padding: 26px 28px 26px 108px;   /* ⬅️ increased left padding */
  border-radius: 16px;
  background:#fff;
  box-shadow: 0 10px 28px rgba(16,24,40,.12);
  z-index: 0;                      /* place card below avatar */

  /* gradient border with mask (looks crisp on all browsers) */
  overflow: visible;
}
.t-card::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:16px;
  padding:2px;                     /* border thickness */
  background: var(--primary-gradient);
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  z-index:-1;
}
/* ----- Avatar stays outside the border, not over content ----- */
.t-avatar{
  position: absolute;
  left: -26px;                     /* keeps it outside the card edge */
  top: 24px;
  width: 56px; height: 56px;
  border-radius: 50%;
  object-fit: cover;
  z-index: 2;                      /* above the card/border */
  border: 3px solid #fff;          /* white ring */
  box-shadow: 0 8px 22px rgba(16,24,40,.18);
}

/* Tighten text spacing so first line does not collide */
.t-head{ margin-bottom: 6px; }
.t-name{ margin: 0; }
.t-role{ font-size: 13px; color: var(--t-ink-2); }
.t-quote{
  color: var(--t-ink-2);
  line-height: 1.7;
  margin: 8px 0 0;
}

/* Nav buttons */
/* Arrows: make sure the icon color is visible */
.t-nav{
  position: absolute;
  top: 50%; transform: translateY(-50%);
  width: 40px; height: 40px; border-radius: 10px;
  border: 0; cursor: pointer;
  background: var(--primary-gradient);
  box-shadow: 0 10px 24px rgba(16,24,40,.16);
  color: #fff;                    /* <-- fixed */
  font-size: 22px; font-weight: 700;
  display: grid; place-items: center;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}

.t-nav:hover{ transform: translateY(calc(-50% - 1px)); box-shadow: 0 14px 28px rgba(16,24,40,.2); }
.t-prev{ left: 0; }
.t-next{ right: 0; }

/* Dots */
.t-dots{
  display: flex; justify-content: center; gap: 8px;
  margin-top: 18px;
}
.t-dots button{
  width: 8px; height: 8px; border-radius: 8px; border: 0;
  background: #4b83ff; cursor: pointer; padding: 0;
  transition: width .25s ease, background .25s ease;
}
.t-dots button[aria-selected="true"]{
  width: 28px;
  background: var(--t-accent);
}

/* Entrance animation */
.t-slide .t-card{ opacity: 0; transform: translateY(12px); transition: opacity .4s ease, transform .4s ease; }
.t-slide.is-active .t-card{ opacity: 1; transform: translateY(0); }

.t-carousel::before{ left:0; }

.t-card::after {
  content: "\201C"; /* left double quote */
  position: absolute;
  top: 10px;
  right: 16px;
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 700;
  font-size: 48px;
  line-height: 1;
  /* gradient text */
  background: var(--primary-gradient);
  -webkit-background-clip: text;
  background-clip: text;             /* FF */
  color: transparent;                 /* FF */
  -webkit-text-fill-color: transparent; /* WebKit */
  opacity: .65;
  pointer-events: none;
  z-index: 1;
}

/* ----- Carousel arrows ----- */
.t-carousel .nav-btn {
  background: var(--primary-gradient);
  border: none;
  color: #fff;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.t-carousel .nav-btn:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 16px rgba(0,0,0,0.15);
}

/* Ensure icons inside arrows are white */
.t-carousel .nav-btn i {
  color: #fff;
}

/* stars */
.t-stars {
  display: flex;
  gap: 6px;
  margin-top: 10px;  /* spacing above stars */
}
.t-stars svg {
  width: 16px;
  height: 16px;
  fill: #f5b50a;
  filter: drop-shadow(0 1px 0 rgba(0,0,0,.08));
}
/* Responsive */
@media (max-width: 992px){
  .t-slide{ flex-basis: 85%; }
}
@media (max-width: 640px){
  .t-carousel{ padding: 10px 34px 24px; }
  .t-slide{ flex-basis: 92%; }
  .t-card{ padding: 22px 20px 22px 92px; }
  .t-avatar{ left: -18px; top: 20px; width: 50px; height: 50px; }
  .t-card::after{ font-size: 64px; right: 10px; }
}

/*===================================================
    19 Counter Section
====================================================*/
.counter-item {
    display: flex;
    align-items: center;
    column-gap: 30px;
}

.counter-item h3 {
    -webkit-text-stroke: 1px rgba(255, 255, 255, 0.5);
    -webkit-text-fill-color: transparent;
    font-size: 62px;
    font-weight: 600;
    color: #fff;
    position: relative;
    margin: 0;
}

.counter-item h3:before {
    background: linear-gradient(145.27deg, rgba(255, 255, 255, 0.1) 15.55%, rgba(255, 255, 255, 0) 86.81%);
    border-radius: 50%;
    width: 100px;
    height: 100px;
    content: "";
    position: absolute;
    left: -15px;
    top: 0;
}

.counter-item h4 {
    font-size: 18px;
    line-height: 24px;
    font-weight: 500;
    color: #fff;
    margin: 0;
}

/*===================================================
    20 Team Section
====================================================*/
.team-item {}

.team-item .team-thumb {
    position: relative;
    text-align: center;
}

.team-item .team-thumb img:nth-child(1) {
    width: 250px;
    animation: rotate-half 1500ms forwards infinite alternate;
}

.team-item .team-thumb img:nth-child(2) {
    width: 146px;
    border-radius: 50%;
    position: absolute;
    left: 49%;
    top: 51%;
    transform: translate(-50%, -50%);
    box-shadow: 0px 30px 50px 0px rgba(0, 9, 40, 0.2);
}

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

.team-content h3 a {
    font-size: 22px;
    font-weight: 600;
    margin-bottom: 5px;
}

.team-content h4 {
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin: 0;
}

.saas-home .team-content h3 a {
    color: #fff;
}

.saas-home .team-content h4 {
    color: #ddd;
}

.team-social {
    text-align: center;
}

.team-social li {
    display: inline-block;
    margin: 0 5px;
}

.team-social li a {
    font-size: 16px;
    line-height: 1;
    text-transform: uppercase;
    font-weight: 500;
    color: var(--heading-color);
    position: relative;
    z-index: 1;
}

.team-social li a:hover {
    color: #fff;
}

.saas-home .team-social li a {
    color: #ddd;
}

.team-social li a:before {
    background-color: #fff;
    width: 100%;
    height: 1px;
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    opacity: 0.5;
    transition: 0.4s;
}

.team-social li:hover a:before {
    display: none;
}

.team-social li a:after {
    background-color: var(--primary-color);
    width: 40px;
    height: 40px;
    border-radius: 59%;
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    opacity: 1;
    transform: translate(-50%, -50%) scale(0);
    z-index: -1;
    visibility: hidden;
    opacity: 0;
    transition: 0.4s;
}

.team-social li:hover a:after {
    visibility: visible;
    opacity: 1;
    transition: 0.4s;
    transform: translate(-50%, -50%) scale(1);
}

@keyframes rotate-half {
    0% {
        -webkit-transform: rotate(0);
        transform: rotate(0);
    }

    100% {
        -webkit-transform: rotate(-30deg);
        transform: rotate(-30deg);
    }
}

/* =========================
   GLASS TEAM CARDS
========================= */
:root{
  --g-card-bg: rgba(30,30,35,.22);
  --g-card-border: rgba(255,255,255,.18);
  --g-muted:#cbd3e1;
  --g-accent:#22c1c3;
}

.gteam-grid{
  display:grid;
  gap:34px;
  grid-template-columns: repeat(auto-fill, minmax(240px,1fr));
}

.gteam-card{ perspective:1200px; }

.gstack{
  position:relative;
  transform-style:preserve-3d;
  transition:transform .35s ease;
}

.gphoto{
  width:100%; aspect-ratio:1/1; object-fit:cover; display:block;
  border-radius:24px;
  box-shadow:0 12px 30px rgba(0,0,0,.28);
  transform:translateZ(0);
  transition:transform .35s ease, filter .35s ease, box-shadow .35s ease;
}

/* BACK offset card (paper look) */
.gshadow{
  position:absolute; inset:0; border-radius:24px;
  background:linear-gradient(145deg, rgba(255,255,255,.1), rgba(0,0,0,.15));
  transform:translateZ(25px) translate(16px,-12px) rotateZ(-8deg);
  opacity:0; transition:opacity .28s ease;
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 14px 30px rgba(0,0,0,.35);
}

/* FRONT glass card */
.gglass{
  position:absolute; inset:0; border-radius:24px;
  padding:28px 18px 18px;
  display:flex; flex-direction:column; justify-content:flex-end; align-items:center; gap:12px;

  background:var(--g-card-bg);
  border:1px solid var(--g-card-border);
  backdrop-filter: blur(18px) saturate(120%);
  -webkit-backdrop-filter: blur(18px) saturate(120%);
  box-shadow:0 18px 45px rgba(0,0,0,.35);
  transform:translateZ(70px) scale(.98);
  opacity:0; pointer-events:none;
  transition:opacity .25s ease .05s, transform .25s ease;
}

/* soft inner sheen on glass */
.gglass::before{
  content:""; position:absolute; inset:0; border-radius:24px; pointer-events:none;
  background:
    radial-gradient(120% 100% at 20% -10%, rgb(64, 189, 33), transparent 60%),
    linear-gradient(180deg, rgb(43, 113, 243), transparent 30%);
  mix-blend-mode:screen;
}

.grole{
  font-size:.85rem; letter-spacing:.22em; text-transform:uppercase; color:var(--g-muted);
}
.gname{
  margin:0; font-size:1.20rem; font-weight:800; text-align:center; color:#fff;
  letter-spacing:.02em;
}

.gsocial{ display:flex; gap:12px; padding-top:8px; }
.gsocial a{
  width:38px; height:38px; display:grid; place-items:center;
  color:#fff; text-decoration:none; font-size:16px;
  border-radius:12px;
  background:linear-gradient(145deg, rgba(255,255,255,.22), rgba(255,255,255,.06));
  border:1px solid #4b83ff(255,255,255,.25);
  transition:transform .18s ease, background .2s ease, box-shadow .2s ease;
}

.gsocial a:hover {
    transform: translateY(-2px);
    background: var(--primary-gradient); /* Brand gradient */
    color: #fff; /* Make sure icon is visible */
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.25);
}

/* ----- HOVER EFFECT TO MATCH THE IMAGE ----- */
.gteam-card:hover .gphoto{
  filter: blur(10px) brightness(.82) saturate(.9);
  transform:translateZ(-25px) scale(.965) rotateZ(-4deg);
  box-shadow:0 26px 55px rgba(0,0,0,.5);
}
.gteam-card:hover .gglass{
  opacity:1;
  /* slight offset + tilt like screenshot */
  transform:translateZ(80px) translate(6px,-4px) rotateZ(-6deg) scale(1);
}
.gteam-card:hover .gshadow{ opacity:1; }

/* Base tilt so it looks alive even without moving the mouse */
.gteam-card:hover .gstack{
  transform:rotateX(10deg) rotateY(-12deg);
}

/* Mobile spacing */
@media (max-width:520px){
  .gteam-grid{ gap:22px; }
}

/* make the glass layer actually interactable when shown */
.gteam-card:hover .gglass {
  opacity: 1;
  pointer-events: auto;   /* ← this fixes click + hover */
  z-index: 2;             /* sit above the image */
}

/* ensure the photo sits below the glass */
.gphoto {
  z-index: 1;
  position: relative;
}

/* brand hover for social buttons */
.gsocial a:hover {
  transform: translateY(-2px);
  background: var(--primary-gradient);
  color: #fff;
  box-shadow: 0 8px 18px rgba(0,0,0,.25);
}

.gteam-card {
  opacity: 0;
  transform: translateY(40px);
}

.gteam-card.animate-in {
  animation: gcardFadeUp 0.8s ease forwards;
}

@keyframes gcardFadeUp {
  0% {
    opacity: 0;
    transform: translateY(40px) scale(0.96);
  }
  60% {
    opacity: 1;
    transform: translateY(-6px) scale(1.02);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
/*===================================================
    21 Team Details
====================================================*/
.team-details-thumb {
    padding-right: 20px;
}

.team-details-thumb img {
    width: 100%;
}

.team-details-wrap .occupation {
    background: var(--bg-gradient);
    height: 20px;
    line-height: 20px;
    text-align: center;
    font-family: var(--primary-font);
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #fff;
    padding: 0 15px;
    display: inline-block;
}

.team-details-wrap h4 {
    font-size: 20px;
    line-height: 26px;
    font-weight: 600;
    color: var(--primary-color);
}

.skill-items .skill-item:not(:last-of-type) {
    margin-bottom: 20px;
}

.skill-item .progress {
    border-radius: 0;
    height: 10px;
}

.skill-item .progress-bar {
    background-color: var(--primary-color);
    border-radius: 0;
}

.skill-item h3 {
    font-size: 18px;
    font-weight: 600;
    line-height: 1;
}

.social-share {
    margin-top: 30px;
}

.social-share li {
    display: inline-block;
    margin-right: 5px;
}

.social-share li a {
    border: 1px solid #ddd;
    width: 40px;
    height: 40px;
    color: var(--grey-color);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.social-share li a:before {
    background-color: var(--primary-color);
    width: 40px;
    height: 40px;
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    opacity: 1;
    transform: translate(-50%, -50%) scale(0);
    z-index: -1;
    visibility: hidden;
    opacity: 0;
    transition: 0.4s ease;
}

.social-share li:hover a {
    border: 1px solid transparent;
    color: #fff;
}

.social-share li:hover a:before {
    visibility: visible;
    opacity: 1;
    transition: 0.4s;
    transform: translate(-50%, -50%) scale(1);
}

.team-contact {
    position: relative;
    z-index: 1;
}

.service-form .form-field .form-control,
.team-form .form-field .form-control {
    height: 50px;
    border-radius: 0;
    outline: none;
    box-shadow: none;
}

.service-form .form-field.message .form-control,
.team-form .form-field.message .form-control {
    height: 140px;
}

.service-form .form-field.submit-btn,
.team-form .form-field.submit-btn {
    grid-column-end: span 2;
    text-align: center;
}

.service-form .form-field.submit-btn {
    text-align: left;
}

.service-form-heading h3 {
    font-size: 20px;
    line-height: 1;
    font-weight: 600;
    color: var(--heading-color);
    margin-bottom: 10px;
}

@media (max-width: 992px) {
    .team-details-thumb {
        padding-right: 0;
    }
}

/*===================================================
    22 Pricing Section
====================================================*/
.pricing-switch-toggler {
    display: flex;
    align-items: center;
    justify-content: center;
    column-gap: 20px;
    margin-bottom: 40px;
}

.pricing-switch-toggler li {
    font-size: 15px;
    font-weight: 600;
    color: var(--grey-color);
    line-height: 1;
    display: flex;
    align-items: center;
    height: 35px;
    cursor: pointer;
}

.pricing-switch-toggler li.active {
    color: var(--heading-color);
}

.pricing-switch {
    display: inline-block;
}

.pricing-switch .slider {
    display: inline-block;
    background-color: #fff;
    border-radius: 30px;
    width: 80px;
    height: 35px;
    position: relative;
    cursor: pointer;
    border: 1px solid #ddd;

}

.pricing-switch .slider:before {
    background: var(--bg-gradient);
    content: '';
    width: 25px;
    height: 25px;
    border-radius: 50%;
    position: absolute;
    left: 5px;
    top: 50%;
    transform: translateY(-50%);
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.pricing-switch.off .slider:before {
    left: calc(100% - 31px);
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.pricing-item {
    background-color: #fff;
    padding: 40px;
    border-radius: 3px;
    position: relative;
    box-shadow: 0px 5px 40px 0px rgba(0, 9, 40, 0.1);
}

.price-badge {
    background: var(--bg-gradient);
    box-shadow: 0 10px 15px 0 rgba(21, 126, 251, 0.4);
    padding: 10px 15px;
    border-radius: 0;
    font-size: 12px;
    line-height: 1;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #fff;
    position: absolute;
    right: -10px;
    top: 30px;
}

.price-badge:before {
    background: var(--bg-gradient);
    clip-path: polygon(0 0, 0% 100%, 100% 100%);
    width: 10px;
    height: 10px;
    content: "";
    position: absolute;
    right: 0;
    top: -10px;
}

.pricing-head {
    padding-bottom: 20px;
    border-bottom: 1px solid #e1e4ea;
}

.pricing-head h4 {
    font-family: var(--body-font);
    color: var(--grey-color);
    text-transform: uppercase;
    font-size: 14px;
    letter-spacing: 1px;
    font-weight: 700;
}

.pricing-head h2 {
    font-size: 20px;
    font-weight: 500;
    line-height: 1;
}

.pricing-head h2 span {
    font-size: 48px;
    font-weight: 600;
    font-family: var(--body-font);
    position: relative;
    padding-right: 10px;
}

.pricing-head h2:not(.free) span {
    padding-left: 15px;
}

.pricing-head h2 span b {
    font-size: 28px;
    font-weight: 400;
    font-family: var(--primary-font);
    color: var(--grey-color);
    position: absolute;
    left: 0;
    top: 10px;
}

.pricing-head P {
    font-size: 15px;
    margin: 0;
}

.pricing-list {
    padding: 30px 0;
}

.pricing-list li {
    font-size: 16px;
    font-weight: 500;
}

.pricing-list li:not(:last-of-type) {
    margin-bottom: 10px;
}

.pricing-list li i {
    color: #12ce32;
    font-size: 15px;
    margin-right: 10px;
}

.pricing-btn {
    display: inline-block;
    background-color: transparent;
    border: 2px solid #e1e4ea;
    padding: 20px 29px;
    border-radius: 3px;
    font-family: var(--body-font);
    font-size: 15px;
    color: var(--grey-color);
    font-weight: 600;
    letter-spacing: 0;
    line-height: 1px;
}

.pricing-btn.active {
    background-color: var(--primary-color);
    border: 2px solid var(--primary-color);
    color: #fff;
}

.pricing-btn.active:hover,
.pricing-btn:hover {
    background-color: var(--primary-color);
    border: 2px solid var(--primary-color);
    color: #fff;
    transform: translateY(-3px);
    box-shadow: 0 10px 15px 0 rgba(21, 126, 251, 0.4);
}

/*===================================================
    23 Pricing Table Section
====================================================*/
.pricing-table-area {
    display: grid;
    grid-template-columns: 40% 1fr;
}

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

.pricing-plan ul li,
.pricing-features ul li {
    height: 50px;
    line-height: 50px;
    color: #ddd;
}

.pricing-plan ul li:not(:last-of-type),
.pricing-features ul li:not(:last-of-type) {
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.pricing-plan ul li {
    text-align: center;
}

.pricing-table-head,
.pricing-table-left {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    min-height: 190px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.pricing-table-left h3,
.pricing-table-left p {
    width: 100%;
}

.pricing-table-left h3 {
    font-size: 20px;
    font-weight: 600;
    color: #fff;
}

.pricing-table-head {
    padding: 15px;
}

.pricing-table-head h4 {
    font-family: var(--body-font);
    line-height: 1;
    font-size: 14px;
    text-transform: uppercase;
    font-weight: 600;
    color: #ddd;
    margin: 0;
}

.pricing-table-head h2 {
    font-family: var(--body-font);
    font-size: 42px;
    font-weight: 600;
    color: #fff;
    line-height: 1;
    margin: 15px 0;
}

.pricing-table-head h2 em {
    font-size: 20px;
    line-height: 1px;
    font-style: normal;
    color: #fff;
    margin-right: 5px;
    transform: translateY(-15px);
    display: inline-block;
}

.pricing-table-head h2 span {
    font-size: 16px;
    letter-spacing: 0.5px;
}

.pricing-table-left p,
.pricing-table-head p {
    font-size: 14px;
    line-height: 20px;
    font-weight: 500;
    color: #ddd;
    margin: 0;
}

.pricing-plan {
    text-align: center;
    padding-bottom: 40px;
}

.pricing-plan.mid {
    background-color: #191fb3;
}

.pricing-table-footer {
    display: block;
}

.pricing-table-footer a {
    font-family: var(--primary-font);
    font-size: 14px;
    color: #ddd;
    text-transform: capitalize;
    font-weight: 600;
    letter-spacing: 0;
    line-height: 1px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 22px 20px;
    border-radius: 30px;
    display: inline-block;
}

.pricing-plan.mid .pricing-table-footer a,
.pricing-table-footer a:hover {
    background-color: var(--primary-color);
    border: 1px solid var(--primary-color);
}

.pricing-table-footer a:hover {
    transform: translateY(-3px);
}

/* Pricing Table Light */
.pricing-table-area.light {}

.pricing-table-area.light .pricing-plan.mid {
    background-color: #c3c8ff99;
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
}

.pricing-table-area.light .pricing-plan ul li,
.pricing-table-area.light .pricing-features ul li,
.pricing-table-area.light .pricing-table-left p,
.pricing-table-area.light .pricing-table-head p,
.pricing-table-area.light .pricing-table-left h3,
.pricing-table-area.light .pricing-table-head h4 {
    color: var(--grey-color);
}

.pricing-table-area.light .pricing-table-head h2 em,
.pricing-table-area.light .pricing-table-head h2 {
    color: var(--heading-color);
}

.pricing-table-area.light .pricing-table-head,
.pricing-table-area.light .pricing-table-left,
.pricing-table-area.light .pricing-plan ul li:not(:last-of-type),
.pricing-table-area.light .pricing-features ul li:not(:last-of-type) {
    border-bottom: 1px solid #ccc;
}

.pricing-table-area.light .pricing-table-footer a {
    color: var(--grey-color);
    border: 1px solid #ccc;
}

.pricing-table-area.light .pricing-plan.mid .pricing-table-footer a,
.pricing-table-area.light .pricing-table-footer a:hover {
    color: #fff;
}


@media (max-width: 992px) {
    .pricing-table-area {
        grid-template-columns: 1fr;
    }

    .pricing-features ul {
        display: none;
    }

    .pricing-table-left {
        min-height: auto;
        margin-bottom: 30px;
        padding-bottom: 20px;
        text-align: center;
    }

    .pricing-plan ul li {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        line-height: 1.5;
        height: 70px;
        font-size: 14px;
    }

    .pricing-plan ul li:before {
        content: attr(data-cell);
        display: block;
    }

    .pricing-plan ul li i {
        font-size: 16px;
    }
}

@media (max-width: 767px) {
    .pricing-plans {
        grid-template-columns: 1fr;
    }
}

/*===================================================
    24 FAQ Section
====================================================*/
.faq-accordion {
    z-index: 1;
}

.faq-page .faq-accordion {
    padding-left: 0;
}

.accordion-item:first-of-type .accordion-button {
    outline: none;
    box-shadow: none;
}

.accordion-button {
    background-color: #ffffff90;
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
    color: var(--heading-color);
    font-size: 20px;
    line-height: 28px;
    letter-spacing: -0.5px;
    font-weight: 600;
    padding: 20px 30px;
    border-radius: 10px;
    box-shadow: 0 0 11px 0 rgba(255, 255, 255, .28);
}

.faq-accordion .accordion-button:not(.collapsed) {
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border-bottom: 1px solid #eee;
}

.accordion-button:focus {
    border-color: #eee;
    outline: none;
    box-shadow: none;
}

.accordion-button:not(.collapsed) {
    background-color: #ffffff90;
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
}

.accordion-button:not(.collapsed):after {
    background-image: inherit;
    content: "\f106";
    color: var(--heading-color);
    transform: inherit;
}

.accordion-button:after {
    background-image: inherit;
    content: "\f107";
    font-family: "Line Awesome Free";
    font-size: 20px;
    position: absolute;
    right: 20px;
    top: 50%;
    color: var(--grey-color);
    font-weight: 600;
    transform: translateY(-50%) !important;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.faq-accordion .accordion-item {
    margin-bottom: 20px;
    transition: all 0.3s ease-in-out;
}

.faq-accordion .accordion-item.active {
    box-shadow: 0px 30px 50px 0px rgba(0, 9, 40, 0.1);
    transition: all 0.3s ease-in-out;
}

.accordion-item .accordion-body {
    background-color: #ffffff90;
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
    padding: 30px;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}

.accordion-item .accordion-body p {
    margin: 0;
}

/* App Accordion */
.app-accordion .faq-accordion .accordion-button {
    border: 1px solid #ddd;
    border-radius: 5px;
}

.app-accordion .faq-accordion .accordion-item.active {}

@media (max-width: 767px) {

    .faq-accordion {
        padding: 0;
    }

    .accordion-button {
        padding-right: 40px;
        font-size: 16px;
        line-height: 24px;
    }
}

/*===================================================
    25 CTA Section
====================================================*/
.cta-section {
    position: relative;
}

.cta-wrap {
    background-color: #c3c8ff90;
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
    padding: 100px 30px;
    border-radius: 10px;
    position: relative;
}

.cta-section .anim-illustration {
    position: absolute;
    left: 15%;
}

.cta-section .anim-illustration.bottom {
    position: absolute;
    left: auto;
    right: 6%;
    bottom: 40%;
}

.cta-content .btn-group {
    justify-content: center;
}

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

.cta-content h2 {
    font-size: 48px;
    font-weight: 700;
    margin-bottom: 20px;
    line-height: 56px;
}

.cta-content p {
    margin-bottom: 30px;
}

.cta-wrap .animated-dots span:nth-child(1) {
    left: 55%;
    top: 10%;
}

.cta-wrap .animated-dots span:nth-child(3) {
    left: 15%;
    top: 45%;
}

.cta-wrap .animated-dots span:nth-child(6) {
    bottom: 10%;
}

/* App CTA */
.app-cta .cta-wrap {
    background: linear-gradient(45deg, #501E9C 0%, #8069F1 40%, #A45CEE 75%, #FF857F 100%);
    position: relative;
    padding: 0 50px;
    overflow: hidden;
}

.app-cta .cta-content {
    text-align: left;
    padding: 120px 0;
}

.app-cta .cta-content h2 {
    color: #fff;
}

.app-cta .cta-content p {
    color: #ddd;
}

.app-cta .cta-content .btn-group {
    justify-content: flex-start;
    column-gap: 20px;
}

.app-cta .cta-content .btn-group img {
    width: 160px;
}

.app-cta .cta-content .btn-group a:hover {
    transform: translateY(-3px);
}

.app-img-holder {
    position: relative;
    width: 100%;
    height: 100%;
}

.app-img-holder .download-moc {
    width: 350px;
    height: auto;
    position: absolute;
    right: 0;
    bottom: 0;
}

.app-img-holder .clouds img {
    position: absolute;
    left: 15%;
    top: 35%;
    z-index: -1;
}

.app-img-holder .clouds img:nth-child(2) {
    left: auto;
    top: 50%;
    right: 5%;
}

.mockup-elements img {
    width: 80px;
    position: absolute;
    left: 0;
    top: 0;
}

.mockup-elements img:nth-child(1) {
    position: absolute;
    left: 15%;
    top: 12%;
}

.mockup-elements img:nth-child(2) {
    width: 60px;
    position: absolute;
    left: auto;
    right: 18%;
    top: 15%;
}

.mockup-elements img:nth-child(3) {
    position: absolute;
    left: auto;
    right: 25%;
    top: 35%;
}

.mockup-elements img:nth-child(4) {
    position: absolute;
    left: 25%;
    top: auto;
    bottom: 25%;
}

.mockup-elements img:nth-child(5) {
    width: 50px;
    position: absolute;
    left: 9%;
    top: auto;
    bottom: 45%;
}

/* SaaS CTA */
.saas-cta {
    position: relative;
}

.saas-home .saas-cta .hexagon-pattern.left {
    top: -30%;
}

.saas-cta-inner {
    background-color: #191fb3;
    padding: 80px 0;
    position: relative;
    z-index: 1;
}

.saas-cta .cta-content {}

.saas-cta .cta-content h4 {
    font-size: 22px;
    font-weight: 500;
    color: #ffe484;
}

.saas-cta .cta-content h2 {
    color: #fff;
}

.saas-cta .cta-content p {
    color: #ddd;
}

.saas-cta .cta-content .cta-list {
    margin-top: 30px;
}

.saas-cta .cta-list li {
    color: #ddd;
}

/* IT Cta */
.it-cta-wrap {
    background-image: url(../img/project-cta-bg.jpeg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    width: 100%;
    padding: 80px 40px;
    position: relative;
    border-radius: 5px;
    z-index: 1;
}

.it-cta-wrap .cta-info h3 {
    background-color: #ffe484;
    display: inline-flex;
    align-items: center;
    column-gap: 5px;
    border-radius: 3px;
    padding: 5px 15px;
    font-size: 16px;
    line-height: 1;
    margin-bottom: 20px;
}

.it-cta-wrap .cta-info h2 {
    font-size: 38px;
    font-weight: 700;
    color: #fff;
}

.it-cta-wrap .cta-info h2 span {
    -webkit-text-stroke: 2px #fff;
    -webkit-text-fill-color: transparent;
}

.it-cta-wrap .cta-info p {
    color: #ddd;
}

.it-cta-wrap .it-cta-img {
    width: 400px;
    position: absolute;
    right: 60px;
    bottom: 0;
}

@media(max-width:992px) {
    .app-cta {
        overflow: hidden;
    }

    .mockup-elements {
        display: none;
    }

    .app-cta .cta-wrap {
        padding: 0 25px;
    }

    .app-cta .cta-content h2 {
        font-size: 28px;
    }

    .app-cta .cta-content h2 br {
        display: none;
    }

    .app-img-holder .download-moc {
        right: -50px;
    }
}

@media (max-width: 767px) {
    .cta-content h2 br {
        display: none;
    }

    .cta-content h2 {
        font-size: 28px;
    }

    .it-cta-wrap .cta-info h2 span {
        -webkit-text-stroke: 1px var(--white-color);
    }

    .app-img-holder {
        display: none;
    }

    .app-cta .cta-content {
        padding: 60px 0;
    }

    .cta-list {
        display: inline-block;
    }

    .cta-list li:not(:last-of-type) {
        margin-right: 10px;
    }
}

/* =========================
   IT-CTA reveal animation (distinct style)
========================= */

/* Start hidden & slightly tilted */
.it-cta-wrap {
  transform-origin: center 80%;
  opacity: 0;
  transform: perspective(1200px) translateY(40px) rotateX(6deg) scale(.985);
  filter: blur(2px);
  /* background drift (paused until revealed) */
  animation: ctaBgDrift 18s ease-in-out infinite alternate both;
  animation-play-state: paused;
  overflow: hidden; /* needed for light sweep */
}

/* Light sweep overlay (only visible during reveal) */
.it-cta-wrap::after{
  content: "";
  position: absolute; inset: -30%;
  background: linear-gradient(115deg,
      rgba(255,255,255,0) 35%,
      rgba(255,255,255,.25) 50%,
      rgba(255,255,255,0) 65%);
  transform: translateX(-120%) rotate(8deg);
  filter: blur(6px);
  pointer-events: none;
  opacity: 0;
}

/* Child elements: prepare individual animations */
.it-cta .cta-info > *{
  opacity: 0;
  transform: translateY(24px);
}

/* When in view, play the sequence */
.it-cta-wrap.cta-in{
  animation-play-state: running;                /* start bg drift */
  animation-delay: 1.2s;                        /* drift starts after main reveal */
  animation-name: ctaBgDrift;
}

.it-cta-wrap.cta-in{
  animation: ctaBgDrift 18s ease-in-out infinite alternate both;
}

.it-cta-wrap.cta-reveal{
  animation: ctaLiftIn 0.9s cubic-bezier(.2,.7,.2,1) forwards;
}

.it-cta-wrap.cta-reveal::after{
  animation: ctaSweep 1s ease .3s forwards;
}

/* Staggered children (title, heading, text, btn) */
.it-cta .cta-info.cta-contents-in > h3{ animation: ctaFadeSlide .6s ease .15s forwards; }
.it-cta .cta-info.cta-contents-in > h2{ animation: ctaFadeSlide .6s ease .3s  forwards; }
.it-cta .cta-info.cta-contents-in > p { animation: ctaFadeSlide .6s ease .45s forwards; }
.it-cta .cta-info.cta-contents-in > a { animation: ctaBtnPop    .55s ease .6s  forwards; }

/* Keyframes */
@keyframes ctaLiftIn{
  0%   { opacity:0; transform: perspective(1200px) translateY(40px) rotateX(6deg) scale(.985); filter: blur(2px); }
  60%  { opacity:1; transform: perspective(1200px) translateY(-6px) rotateX(0deg)  scale(1.01); filter: blur(.3px); }
  100% { opacity:1; transform: perspective(1200px) translateY(0)    rotateX(0deg)  scale(1);    filter: none; }
}

@keyframes ctaFadeSlide{
  to { opacity:1; transform: translateY(0); }
}

@keyframes ctaBtnPop{
  0%   { opacity:0; transform: translateY(18px) scale(.96); box-shadow:none; }
  100% { opacity:1; transform: translateY(0)   scale(1.02); box-shadow:0 10px 24px rgba(0,0,0,.22); }
}

@keyframes ctaSweep{
  0%   { opacity:0; transform: translateX(-120%) rotate(8deg); }
  15%  { opacity:1; }
  100% { opacity:0; transform: translateX(120%) rotate(8deg); }
}

/* slow, subtle background motion after reveal */
@keyframes ctaBgDrift{
  0%   { background-position: center 0;        transform: translateZ(0) rotateZ(0deg); }
  100% { background-position: center -14px;    transform: translateZ(0) rotateZ(-.4deg); }
}

/*===================================================
    Why-heading Section
====================================================*/

.why-subtitle {
  font-size: 18px;
  font-weight: 400;
  color: #ccc;
  max-width: 700px;
  margin: 15px auto 0;
}

/*===================================================
    Animated Number Counters Section
====================================================*/

/* Projects page counters style — matching previous section */
.projects-counters.animated-counter-section {
  background: url('../img/project-count-bgg.jpg') no-repeat center center / cover;
  color: #fff;
  padding: 60px 0;
  border-radius: 30px;
  margin: 60px 30px;
  position: relative;
  z-index: 1;
}

.projects-counters.animated-counter-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: -1;
  border-radius: 30px;
}

.projects-counters .row.text-center {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 15px;
}

.projects-counters .counter-box {
  flex: 1 1 200px;
  text-align: center;
}

.projects-counters .counter-wrapper {
  display: inline-flex;
  align-items: flex-end;
  justify-content: center;
  gap: 4px;
}

.projects-counters .counter {
  font-size: 48px;
  font-weight: bold;
  color: #fff;
  white-space: nowrap;
}

.projects-counters .unit {
  font-size: 48px;
  font-weight: bold;
  color: #fff;
  line-height: 1;
  margin-left: -2px;
  vertical-align: baseline;
  position: relative;
  top: -4px;
}

.projects-counters .counter-box p {
  font-size: 18px;
  font-weight: 600;
  color: #fff;
  margin-top: 10px;
}

/*===================================================
    26 Contact Section
====================================================*/
.map-wrapper.two-maps {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
}

.map-wrapper.two-maps .map-block {
    flex: 1 1 50%;
    padding: 15px;
    box-sizing: border-box;
}

.map-wrapper.two-maps iframe {
    width: 100%;
    height: 400px;
    border: 0;
    border-radius: 6px;
}

.map-wrapper.two-maps .map-title {
    margin-bottom: 10px;
    font-size: 16px;
    font-weight: 600;
    color: var(--heading-color);
}

.contact-section {
    background-image: url(../img/gradiant-bg-001.jpg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    width: 100%;
    padding-top: 160px;
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.contact-heading {
    margin-bottom: 40px;
}

.contact-section .contact-details li {
    display: flex;
    align-items: center;
    margin-bottom: 30px;
    color: var(--heading-color);
    font-weight: 500;
}
.contact-section .contact-details li .la-map-marked-alt {
    width: 65px; /* or 65px for more balance */
    height: 50px;
}
.contact-section .contact-details li i {
    background: var(--bg-gradient);
    color: #fff;
    font-size: 25px;
    margin-right: 15px;
    width: 50px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    border-radius: 1px;
}

.contact-form-wrap {}

.contact-form-group {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 15px;
}

/* Make form fields prominent */
.contact-form .form-field .form-control {
  background-color: #fff;           
  border: 2px solid #444;           /* Default border */
  color: #000;                      
  font-weight: 500;
  padding: 0 12px;
  height: 52px;
}

/* Textarea specifically */
.contact-form .form-field.message .form-control {
  min-height: 120px;
  resize: vertical;
}

/* Placeholder text black */
.contact-form .form-field .form-control::placeholder {
  color: #000;
  opacity: 0.7;
}

/* Focus state: gradient border */
.contact-form .form-field .form-control:focus {
  border: 2px solid transparent; /* remove solid border */
  background-color: #fff;
  outline: none;

  /* apply gradient border */
  border-image: var(--primary-gradient) 1;
  border-image-slice: 1;
  box-shadow: 0 0 6px rgba(0,0,0,0.1);
}

.contact-form-group .form-field.message {
    grid-column-end: span 2;
}

/* Loader message text (inside form-loader) */
#form-loader .loading-text {
  color: #000;        /* pure black */
  font-weight: 500;   /* slightly bolder so it stands out */
  opacity: 1;         /* make sure it’s not faded */
}

@media(max-width:992px) {

    .contact-section {
        background-position: center right;
        padding-top: 100px;
    }

    .contact-form .form-field.submit-btn {
        grid-column-end: span 2;
    }

    .contact-section .globe {
        display: none;
    }
}

@media(max-width:767px) {

    .contact-section {
        padding-top: 80px;
    }

}

/* Double Address Row Style */
.address-row {
    display: flex;
    gap: 30px;
    flex-wrap: wrap;
}

.address-block {
    display: flex;
    align-items: center;
    flex: 1 1 45%; /* allow wrapping and responsiveness */
    min-width: 250px;
}

.address-block i {
    background: var(--bg-gradient);
    color: #fff;
    font-size: 25px;
    margin-right: 15px;
    width: 50px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    border-radius: 1px;
}

.contact-info h3 {
    margin-bottom: 25px;
    font-weight: 600;
    color: var(--heading-color);
}

.flag-icon {
    width: 20px;
    height: auto;
    margin-right: 8px;
    vertical-align: middle;
}

.contact-section .contact-details a:hover {
    color: var(--primary-color); /* Solid color version */
}

/*===================================================
    27 Footer Section
====================================================*/
.footer-section {
    background-image: url(../img/gradiant-bg-001.jpg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    width: 100%;
    padding-top: 10px;
    position: relative;
    z-index: 1;
}

.footer-widget i {
    margin-right: 6px;
    background: var(--primary-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.footer-section .container {
    padding-left: 2px;
    padding-right: 2px;
    max-width: 1200px;
    margin: 0 auto;
}

.footer-area {
    padding-bottom: 10px;
}

.footer-widget .row > div {
    padding-right: 10px;
    padding-left: 10px;
}

@media (max-width: 768px) {
    .footer-widget .row > div {
        width: 100%;
        margin-bottom: 15px;
    }
}

.footer-widget .footer-logo {
    margin-bottom: 20px;
    display: block;
}

.footer-logo img {
    max-width: 190px;
}

.footer-area .col-lg-3:nth-child(2) {
    padding-left: 70px;
}

.footer-widget h3 {
    font-weight: 700;
}

.footer-widget li a,
.footer-widget p {
    color: var(--grey-color);
}

.footer-widget li:not(:last-of-type) {
    margin-bottom: 10px;
}

.footer-social {
    margin-top: 15px;
}

.footer-social li {
    display: inline-block;
}

.footer-social li:not(:last-of-type) {
    margin-right: 5px; /* slight spacing between icons */
}

.footer-social li a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;           /* Increased size */
    height: 30px;
    background: #fff;
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
    color: var(--grey-color);
    font-size: 20px;       /* Larger icon */
    border-radius: 10px;    /* Slightly more rounded */
    position: relative;
    transition: 0.3s ease;
    z-index: 1; 
}

.footer-social li a:after {
    background: var(--primary-gradient); /* gradient background on hover */
    width: 30px;
    height: 30px;
    border-radius: 10px;
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) scale(0);
    z-index: -1;
    visibility: hidden;
    opacity: 0;
    transition: 0.4s ease;
}

.footer-social li a:hover {
    color: #fff;
}

.footer-social li:hover a:after {
    visibility: visible;
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

.footer-widget.subscribe {
    position: relative;
    padding-top: 50px;
}

.subscribe-img {}

.subscribe-img {
    width: 180px;
    position: absolute;
    left: -5px;
    top: -160px;
}

.subscribe-form .form-control {
    height: 44px; /* Reduced height */
    font-size: 15px;
    border-radius: 8px;
    outline: none;
    border: none;
    box-shadow: none;
    padding: 10px 90px 10px 15px; /* right side space for button */
    width: 100%; /* Fill available width */
}

.subscribe-form .mc-fields {
    margin-bottom: 20px;
    position: relative;
    overflow: hidden;
    max-width: 300px;
}

.subscribe-form .submit {
    background-image: url(../img/submit-button.png);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 50px; /* Smaller icon */
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
    width: 50px;
    height: 50px; /* Match slightly reduced input height */
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    text-indent: 9999px;
    border: none;
    cursor: pointer;
}

#subscribe-result {
    display: none;
}

#subscribe-result.subs-result {
    display: block;
    border: 1px solid #ddd;
    border-radius: 3px;
    color: var(--grey-color);
    padding: 10px;
    margin-top: 15px;
}

.subscription-success {
    color: green;
}

.subscription-error {
    color: #ff0000;
}

.copyright-text {
    border-top: 1px solid rgba(34, 34, 34, 0.1);
    padding: 15px 0;
    text-align: center;
    color: var(--grey-color);
}

.copyright-text a {
    color: var(--grey-color);
}


/* Saas Footer */
.saas-home .footer-section {
    background-image: none;
}

.saas-home .footer-widget h3 {
    font-weight: 700;
    color: #fff;
}

.saas-home .footer-widget li a,
.saas-home .footer-widget p {
    color: #ddd;
}

.saas-home .footer-social li a {
    background-color: #191fb3;
}

.saas-home .copyright-text a {
    color: #ddd;
}

.saas-home .copyright-text {
    color: #ddd;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
}

@media (max-width: 992px) {
    .footer-widget.subscribe {
        padding-top: 0;
    }

    .subscribe-img {
        display: none;
    }

    .footer-area .col-lg-3:nth-child(2) {
        padding-left: 15px;
    }
}
.animate-fade-scale {
  opacity: 0;
  transform: scale(0.9);
  /* Remove transition, GSAP handles it */
}

.footer-widget .row > div {
    margin-bottom: 10px; /* space between the two location columns on smaller screens */
}

.footer-widget strong {
    display: flex;
    align-items: center;
    gap: 5px; /* space between flag and city/country name */
    margin-bottom: -15px;
}

.footer-widget .flag-icon {
    width: 20px;
    height: auto;
}

.footer-widget a {
    text-decoration: none;
    color: inherit;
}

.footer-widget .col-6 {
    margin-bottom: 16px;
    line-height: 1.6;
}

.business-id {
    margin-top: 1px; /* pulls it up */
    margin-bottom: 5px; /* optional: gives it a bit of room before phone number */
}

.phone-number {
    margin-top: 3px; /* pulls phone closer to Business ID */
}

.footer-widget a:hover {
    color: var(--primary-color); /* or you can use a gradient trick below */
}