/* font-family: "Inter", sans-serif; */

/* font-family: "Plus Jakarta Sans", sans-serif; */



:root {

    --color-dark: #1E1E1E;

    --body-color: #05010C;

    --head-color: #212529;

    --color-black: #000000;

    --color-white: #FFFFFF;

    --color-primary: #64D676;

    --color-pricing-bg: #F2F9FD;



    /* Header & Navigation Variables */

    --color-header-bg-start: #EBF7FF;

    --color-header-bg-end: #F4FAFF;

    --color-header-sticky-bg: var(--color-white);

    --color-header-sticky-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);

    --color-menu-text: #1E1E1E;

    --color-menu-hover: #3CD495;

    --color-menu-arrow: #1E1E1E;

    --color-submenu-bg: #FFFFFF;

    --color-submenu-shadow: rgba(0, 0, 0, 0.08);

    --color-submenu-border: #EAEAEA;

    --color-submenu-hover-bg: #F8FCFF;

    --color-btn-dark-bg: #1F242B;

    --color-btn-text: #FFFFFF;

    --color-btn-green-solid: #3CD495;

    --color-btn-icon-dark: #1E1E1E;

    --color-btn-hover-bg: #0091D9;

    --color-gradient-blue: #0091D9;

    --color-gradient-green: #6ED87E;

    --color-navy-dark: #081122;

    --color504E4E: #504E4E;



    /* Banner About Glassmorphism Section Variables */

    --banner-about-bg: rgba(255, 255, 255, 0.1);

    --border-grad-start: rgba(100, 214, 118, 0.2);

    --border-grad-end: rgba(0, 145, 217, 0.05);

    --color-separator: #C8C8C8;

    --color-title-dark: #212529;

    --color-body-dark: #05010C;

    --color-step-num: rgba(42, 40, 44, 0.07);

}



body {

    font-family: "Plus Jakarta Sans", sans-serif;

    color: var(--body-color);

    font-size: 16px;

    line-height: 1.7;

    margin: 0;

    padding: 0;

    -webkit-font-smoothing: antialiased;

    -moz-osx-font-smoothing: grayscale;

    overflow-x: hidden;
}


main {
    overflow: hidden;
}


h1,

h2,

h3,

h4,

h5,

h1,

.h1,

.h2,

.h3,

.h4,

.h5,

.h6 {

    color: var(--head-color);

    margin-top: 0;

    font-family: "Inter", sans-serif;

    line-height: 1.2;

}



h1,

.h1 {

    font-weight: 800;

    font-size: 102px;

    margin-bottom: 25px;

}



h2,

.h2 {

    font-size: 48px;

    font-weight: 800;

    margin-bottom: 20px;

}



h3,

.h3 {

    font-size: 26px;

    font-weight: 700;

    margin-bottom: 20px;

}



h4,

.h4 {

    font-size: 22px;

    font-weight: 700;

    margin-bottom: 15px;

}



h5,

.h5 {

    font-size: 18px;

    font-weight: 500;

    margin-bottom: 12px;

}



h6,

.h6 {

    font-size: 16px;

    font-weight: 500;

    margin-bottom: 12px;

}



a {

    display: inline-block;

    text-decoration: none;

    color: var(--color-dark);

}



a:hover {

    text-decoration: none;

    color: var(--color-menu-hover);

}



p,

ul,

ol {

    margin-top: 0;

    margin-bottom: 15px;

}



p:last-child,

h1:last-child,

h2:last-child,

h3:last-child,

h4:last-child,

h5:last-child,

h6:last-child,

ul:last-child,

ol:last-child,

li:last-child {

    margin-bottom: 0;

}



ul,

ol {

    padding-left: 0;

}



li {

    margin-bottom: 0;

}



img {

    max-width: 100%;

    height: auto;

}



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

   Header & Navigation Styles

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

.site-header {

    padding: 15px 0;

    position: fixed !important;

    top: 0;

    left: 0;

    right: 0;

    width: 100%;

    z-index: 1000;

    transition: background-color 0.3s ease, box-shadow 0.3s ease, padding 0.3s ease;

}



.site-header.scrolled,

.site-header.is-sticky,

.site-header.sticky-header,

.site-header.header-scrolled {

    background-color: var(--color-header-sticky-bg);

    box-shadow: var(--color-header-sticky-shadow);

    padding: 10px 0;

}





.site-header .site-logo {

    max-width: 179px;

    display: block;

}



/* WordPress Navigation Menu */

.site-header .menu {

    display: flex;

    align-items: center;

    gap: 49px;

    margin: 0;

    padding: 0;

    list-style: none;

}



.site-header .menu>li {

    margin: 0;

    padding: 0;

    position: relative;

    list-style: none;

}



.site-header .menu>li>a {

    font-family: 'Plus Jakarta Sans', sans-serif;

    font-weight: 600;

    font-size: 16px;

    line-height: 1.875;

    color: var(--color-menu-text);

    text-decoration: none;

    display: inline-flex;

    align-items: center;

    position: relative;

    padding: 5px 0;

    transition: color 0.3s ease;

}



/* Hover & Active / Current Menu Item Styles (WordPress Compatible) */

.site-header .menu>li>a:hover,

.site-header .menu>li.current-menu-item>a,

.site-header .menu>li.current-menu-ancestor>a,

.site-header .menu>li.current-menu-parent>a,

.site-header .menu>li.active>a {

    color: var(--color-primary);

}



.site-header .menu>li>a::after {

    content: "";

    position: absolute;

    bottom: 0;

    left: 0;

    width: 0;

    height: 2px;

    background: var(--color-primary);

    border-radius: 2px;

    transition: width 0.3s ease;

}



.site-header .menu>li>a:hover::after,

.site-header .menu>li.current-menu-item>a::after,

.site-header .menu>li.current-menu-ancestor>a::after,

.site-header .menu>li.current-menu-parent>a::after,

.site-header .menu>li.active>a::after {

    width: 100%;

}



.site-header .menu>li.menu-item-has-children>a {

    padding-right: 25px;

}



.site-header .menu>li.menu-item-has-children>a::before {

    position: absolute;

    right: 0;

    top: 18px;

    content: "";

    display: inline-block;

    width: 13px;

    height: 10px;

    background: url("images/downarrow.svg") no-repeat center center / 12px;

    transition: transform 0.3s ease;

}



.navbar-brand {

    margin-right: 0 !important;

}



.site-header .menu>li.menu-item-has-children:hover>a::before {

    transform: rotate(180deg);

}



/* Navbar Toggler & Backdrop Overlay */

.navbar-toggler {

    padding: 0;

    width: 50px;

    height: 48px;

    border-radius: 6px;

    background: var(--color-white);

    border: 1px solid rgba(0, 0, 0, 0.15);

    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.08);

    display: none;

    align-items: center;

    justify-content: center;

    cursor: pointer;

    transition: all 0.3s ease;

    position: relative;

    z-index: 10;

}



.navbar-toggler:hover,

.navbar-toggler:focus {

    background: var(--color-primary);

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

    box-shadow: 0 6px 22px rgba(100, 214, 118, 0.45);

    outline: none;

}



.navbar-toggler .toggler-icon-img {

    width: 10px;

    height: 16px;

    transition: transform 0.3s ease, filter 0.3s ease;

}



.navbar-toggler:hover .toggler-icon-img,

.navbar-toggler:focus .toggler-icon-img {

    filter: brightness(0) invert(1);

}



/* Body Blur Overlay */

body.menu-open {

    overflow: hidden !important;

}



.menu-overlay {

    position: fixed;

    top: 0;

    left: 0;

    width: 100vw;


    height: 100dvh;

    background: rgba(0, 0, 0, 0.5);

    backdrop-filter: blur(4px);

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

    z-index: 9990;

    opacity: 0;

    visibility: hidden;

    transition: all 0.35s ease;

}



body.menu-open .menu-overlay {

    opacity: 1;

    visibility: visible;

}



/* Submenu / Dropdown Structure */

.site-header .menu>li.menu-item-has-children {

    position: relative;

}







.site-header .menu .sub-menu {

    position: absolute;

    top: 100%;

    left: 0;

    min-width: 220px;

    background-color: var(--color-submenu-bg);

    box-shadow: 0 10px 30px var(--color-submenu-shadow);

    border-radius: 12px;

    padding: 12px 0;

    list-style: none;

    opacity: 0;

    visibility: hidden;

    transform: translateY(10px);

    transition: all 0.3s ease;

    z-index: 1000;

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

}



.site-header .menu .sub-menu>li {

    margin: 0;

    padding: 0;

    list-style: none;

}



.site-header .menu .sub-menu>li>a {

    display: block;

    padding: 8px 20px;

    font-size: 15px;

    line-height: 1.5;

    color: var(--color-menu-text);

    font-weight: 500;

    text-decoration: none;

    transition: all 0.2s ease;

}



.site-header .menu .sub-menu>li>a:hover {

    color: var(--color-menu-hover);

    background-color: var(--color-submenu-hover-bg);

    padding-left: 24px;

}



.navbar {

    gap: 30px;

}



.cmnbtn {

    display: inline-flex;

    text-transform: uppercase;

}



.cmnbtn .btn-text {

    font-family: "Plus Jakarta Sans", sans-serif;

    font-weight: 500;

    font-size: 16px;

    line-height: 1.2;

    background: var(--head-color);

    color: var(--color-white);

    padding: 15px 20px 15px 30px;

    min-height: 56px;

    display: flex;

    align-items: center;

    justify-content: center;

    position: relative;

    z-index: 1;

    border-radius: 10px 0 0 10px;

    min-width: 171px;

    /* transition: background-color 0.3s ease, color 0.3s ease; */

    margin-right: 23px;

}



.cmnbtn .btn-text::before {

    content: "";

    position: absolute;

    top: 0;

    right: -18px;

    width: 30px;

    height: 100%;

    background: var(--head-color);

    border-radius: 0 8px 15px 0;

    transform: skewX(17deg);

    transform-origin: left center;

    z-index: -1;

    /* transition: background-color 0.3s ease; */

}



.cmnbtn:hover .btn-text {

    background: linear-gradient(54.02deg, var(--color-gradient-blue) -102.69%, var(--color-gradient-green) 86.72%);

}

.cmnbtn:hover .btn-text::before {
    background: linear-gradient(14.02deg, var(--color-gradient-blue) -102.69%, var(--color-gradient-green) 6.72%);
}







.cta-arrow {

    background: linear-gradient(334.02deg, var(--color-gradient-blue) -142.69%, var(--color-gradient-green) 56.72%);

    position: relative;

    min-width: 40px;

    min-height: 56px;

    display: flex;

    align-items: center;

    justify-content: center;

    z-index: 1;

    margin-left: 17px;

    border-radius: 0 10px 10px 0;

    /* transition: 0.3s ease-in-out; */

}



/* LEFT diagonal */

.cta-arrow::before {

    content: "";

    position: absolute;

    top: 0;

    left: -14px;

    width: 27px;

    height: 100%;

    background: linear-gradient(54.02deg, var(--color-gradient-blue) -102.69%, var(--color-gradient-green) 86.72%);

    transform: skewX(17deg);

    transform-origin: right center;

    border-radius: 15px 0 0 8px;

    z-index: -1;

}



.cta-arrow span {

    margin-left: -20%;

}

.headingsplitter>* {
    overflow: hidden;
}

.word {
    display: inline-block;
}

.headingsplitter>*::before {
    opacity: var(--before-opacity, 1);
}


.cmnbtn:hover .cta-arrow,
.cmnbtn:hover .cta-arrow:before {

    background: var(--head-color);
}

.cmnbtn:hover .cta-arrow span img {
    filter: brightness(0) invert(1);
}

.bannersc {

    padding-top: 103px;

    overflow: hidden;

    position: relative;

    z-index: 1;

}

.iconsd,
.iconsd img {

    -webkit-backface-visibility: hidden;

    backface-visibility: hidden;

    transform-style: preserve-3d;

    will-change: transform;

}



.bannersc .icon1 {

    left: 11%;

    top: 18%;

}



.bannersc .icon2 {

    right: 20%;

    top: 10%;

}



.bannersc .icon3 {

    right: 16%;

    top: 36%;

}



.bannersc .icon4 {

    left: 13%;

    bottom: 45%;

}



.bannersc .icon5 {

    left: 11%;

    bottom: 27%;

}



.bannersc .icon6 {

    right: 5%;

    bottom: 38%;

}



.bannersc .icon7 {

    position: absolute;

    bottom: -10%;

    left: -10%;

}



.mnicon1 {
    right: -17%;
    top: -30%;
}


.mnicon2 {

    left: -40%;
    top: -60%;
    text-align: left;

}

.mnicon2 img {
    object-position: left;
}



.mnicon3 {

    left: 10%;

    top: 0;

}





.hero-content {

    max-width: 945px;

    position: relative;

    z-index: 1;

    margin: 0 auto;

    text-align: center;

}



.hero-content .hero-subtitle {

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

    color: var(--head-color);

    font-weight: 900;

    font-size: 42px;

    line-height: 1.3;

    text-transform: capitalize;

}



.hero-content .hero-subtitle em {

    font-weight: 800;

}



.hero-content h1 {

    font-weight: 700;

    line-height: 1;

    text-transform: capitalize;

    position: relative;

    display: inline-block;

    background: linear-gradient(274.02deg, var(--color-gradient-blue) -92.69%, var(--color-gradient-green) 96.72%);

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

    background-clip: text;

    text-fill-color: transparent;

}



.hero-content h1::before {

    content: attr(data-text);

    position: absolute;

    left: 0;

    top: 0;

    width: 100%;

    height: 100%;

    z-index: -1;

    background: linear-gradient(90deg, var(--color-navy-dark) 0%, var(--color-primary) 100%);

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

    background-clip: text;

    text-fill-color: transparent;

    -webkit-text-stroke: 2px transparent;

}



.hero-content .cmnbtn {

    margin-top: 15px;

}



.handsOnImg {

    display: table;

    margin: 0 auto;

    position: relative;

    margin-top: -153px;

    pointer-events: none;

}



.handsOnImg img {

    margin-left: 17%;

    max-height: 674px;

    object-fit: contain;

}



.handsOnImg img.handfloattop {

    position: absolute;

    top: 0;

    left: 0;

    z-index: 1;

}



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

   Banner About Glassmorphism Section

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

.bannerabout {

    padding-left: 35px;

    padding-right: 35px;

    max-width: 1920px;

    position: relative;

    z-index: 2;

    margin: 0 auto;

    margin-top: -133px;

}



.bannerabout-box {

    position: relative;

    background: var(--banner-about-bg);

    border-radius: 30px;

    backdrop-filter: blur(10px);

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

    padding: 53px 55px 53px 45px;

    display: flex;

    align-items: flex-start;

}



.bannerabout-box::before {

    content: "";

    position: absolute;

    inset: 0;

    border-radius: 30px;

    padding: 1px;

    background: linear-gradient(108.08deg, var(--border-grad-start) 19.83%, var(--border-grad-end) 54.39%);

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

    -webkit-mask-composite: xor;

    mask-composite: exclude;

    pointer-events: none;

}



.bannerabout-item {

    flex: 1;

    padding-left: 20px;

    padding-right: 20px;

    position: relative;

}



.bannerabout-item:first-child {

    padding-left: 0;

}



.bannerabout-item:last-child {

    padding-right: 0;

}



.bannerabout-item:not(:first-child)::before {

    content: "";

    position: absolute;

    left: 0;

    top: 0;

    width: 1px;

    height: 100%;

    background: linear-gradient(180deg,

            rgba(200, 200, 200, 0.5) 0%,

            var(--color-separator) 50%,

            rgba(200, 200, 200, 0.5) 100%);

}



.bannerabout-item-head {

    display: flex;

    align-items: flex-start;

    justify-content: space-between;

    gap: 12px;

    margin-bottom: 14px;

}



.bannerabout-item-head h3 {

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

    font-weight: 700;

    font-size: 22px;

    line-height: 1.455;

    color: var(--color-title-dark);

    margin: 0;

    max-width: 175px;

    align-self: center;

}



.bannerabout-item-head i.icon-wrap {

    flex-shrink: 0;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    font-style: normal;

    width: 50px;

    height: 50px;

    position: relative;

}



.bannerabout-item-text {

    max-width: 80%;

}



.bannerabout-item p {

    font-family: 'Plus Jakarta Sans', sans-serif;

    font-weight: 400;

    font-size: 14px;

    line-height: 1.714;

    color: var(--color-body-dark);

    margin: 0;

}



.digitalsolutionsec {

    padding: 150px 0 106px 0;

    position: relative;

    z-index: 1;

}



.digitalsolutionsec .icon1 {

    right: -15%;

    bottom: -25%;

}



.sechdCont h2 {

    padding-bottom: 27px;

}



.sechdCont.small p {

    font-size: 14px;

}



.sechdCont h2:last-child {

    margin-bottom: 0;

}



.sechdCont h2 span {

    color: transparent;

    -webkit-text-fill-color: transparent;

    -webkit-text-stroke: 1px var(--head-color);

    position: relative;

    display: inline-block;

}



.sechdCont h2 span:after {

    position: absolute;

    content: "";

    /* background: url(images/subheadpreviewImg.webp) no-repeat center;

    background-size: 100% 100%; */

    width: 100%;

    height: 31px;

    bottom: -25px;

    left: 0;

    right: 0;

    z-index: -1;

}

.sechdCont h2 span svg {
    position: absolute;
    width: 100%;
    height: 31px;
    line-height: 0;
    left: 0;
    top: 100%;
    margin-top: 5px;
    pointer-events: none;
}



.sechdCont {

    text-align: center;

    margin-bottom: 35px;

}



.sechdCont:last-child {

    margin-bottom: 0;

}



.growth-card {

    height: 100%;

    width: 100%;

    padding: 81px 17px 43px 18px;

    border-radius: 30px;

    position: relative;

    z-index: 1;

    transition: 0.3s ease-in-out;

}



.growth-card:after {

    position: absolute;

    content: "";

    background: url(images/backgrowthImg.webp) no-repeat;

    background-size: 118% 118%;

    width: calc(100% - 14px);

    height: calc(100% - 14px);

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);

    border-radius: 30px;

    opacity: 0;

    z-index: -1;

    transition: opacity 0.4s ease-in-out;

    -webkit-backface-visibility: hidden;

    backface-visibility: hidden;

    will-change: background-position, opacity;

}

.growth-card:hover:after {

    opacity: 1;

    filter: drop-shadow(0 10px 30px rgba(0, 145, 217, 0.28)) drop-shadow(0 4px 15px rgba(110, 216, 126, 0.22));

    animation: growthInnerMove 5s infinite alternate ease-in-out;

}

.growth-card .growth-icon {

    display: flex;

    align-items: center;

    min-height: 80px;

    margin-bottom: 30px;

    width: fit-content;

}

.growth-card .growth-icon img,
.growth-card .growth-icon svg {

    max-height: 80px;

    max-width: 46px;

    width: auto;

    height: auto;

    transform-origin: left;

    object-fit: contain;

    transition: 0.3s ease-in-out;

}

.growth-card h3 {

    line-height: 1.3;

}

.growth-card h3 span {

    display: block;

    color: transparent;

    -webkit-text-fill-color: transparent;

    -webkit-text-stroke: 1px var(--head-color);

}

.growth-card p {

    font-size: 14px;

    color: var(--body-color);

}

.growth-card:hover {

    background: var(--color-white);

    box-shadow: 0px 15px 50px rgba(0, 145, 217, 0.22), 0px 6px 25px rgba(110, 216, 126, 0.18);

}

.growth-card:hover .growth-icon img {
    transform: scale(1.3);
}


.growth-card:hover h3 span {

    color: transparent;

    -webkit-text-fill-color: transparent;

    -webkit-text-stroke: 1px var(--head-color);

}

@keyframes growthInnerMove {

    0% {

        background-position: 0% 0%;

    }

    50% {

        background-position: 50% 100%;

    }

    100% {

        background-position: 100% 0%;

    }

}



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

   Project Counters Section

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

.projectcounters {

    padding: 0;

}



.projectcounters-wrap {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 59px;

}



.counter-box {

    display: flex;

    align-items: center;

}



.counter-box i.counter-icon {

    font-style: normal;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    flex-shrink: 0;

}



.counter-box i.counter-icon img {

    max-width: 100%;

    width: auto;

    object-fit: contain;

}



.counter-content {

    padding-left: 30px;

}



.counter-content h2 {

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

    font-style: italic;

    font-weight: 800;

    font-size: 51px;

    line-height: 1.176;

    letter-spacing: -1.28px;

    color: transparent;

    -webkit-text-fill-color: transparent;

    -webkit-text-stroke: 1px var(--head-color);

    margin: 0 0 10px 0;

    display: flex;

    align-items: baseline;

}



.counter-content h2 sub {

    font-style: italic;

    font-weight: 800;

    font-size: 20px;

    line-height: 1;

    letter-spacing: -1.28px;

    color: transparent;

    -webkit-text-fill-color: transparent;

    -webkit-text-stroke: 1px var(--head-color);

    bottom: 0;

    margin-left: 2px;

}



.counter-content p {

    font-family: 'Plus Jakarta Sans', sans-serif;

    font-style: normal;

    font-weight: 600;

    font-size: 14px;

    line-height: 1.714;

    text-transform: uppercase;

    color: var(--head-color);

    margin: 0;

}



.agerncysc {

    padding: 150px 0 170px 0;

}



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

   Business Approach Section

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

.businessaprachsc .row {

    --bs-gutter-x: 31px;

}



.approach-card {

    background: var(--color-white);

    border: 1px solid rgba(100, 214, 118, 0.2);

    border-radius: 30px;

    padding: 30px 22px 17px 22px;

    display: flex;

    flex-direction: column;

    height: 100%;

    transition: border-color 0.3s ease, background 0.3s ease, box-shadow 0.3s ease;

}



.approach-card-head {

    margin-bottom: 33px;

}



.approach-card-head h3 {

    font-weight: 700;

    font-size: 26px;

    line-height: 1.385;

    color: var(--head-color);

    margin-bottom: 20px;

}



.approach-card-head p {

    font-size: 14px;

    line-height: 1.714;

    color: var(--body-color);

    margin: 0;

}



.approach-card-img {

    margin-top: auto;

    display: flex;

    align-items: flex-end;

    justify-content: center;

}



.approach-card-img img {

    max-width: 100%;

    height: auto;

    object-fit: contain;

}



.approach-card:hover {

    border-color: transparent;

    background: var(--color-white);

    box-shadow: 0px 12px 60px rgba(0, 145, 217, 0.15);

}



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

   Our Process Section

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





.process-top-row {

    margin-bottom: 23px;

}



.sechdCont.left {

    text-align: left;

}



.process-top-right p {

    margin-bottom: 40px;

}



.process-top-right {

    max-width: 430px;

    margin-left: auto;

}



.process-top-right .cmnbtn .btn-text {

    box-shadow: 0px 12px 40px rgba(100, 214, 118, 0.4);

}



/* Process Cards Down Row */

.process-cards-row {

    display: flex;

    gap: 20px;

    align-items: stretch;

}



.process-card-col {

    flex: 0 0 calc(20% - 16px);

    max-width: calc(20% - 16px);

    width: calc(20% - 16px);

    display: flex;

}



.process-card {

    width: 100%;

    border: 1px solid rgba(200, 200, 200, 0.2);

    border-radius: 30px;

    background: var(--color-white);

    display: flex;

    flex-direction: column;

    height: 100%;

    transition: background 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;

}



.process-card-num {

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

    font-style: italic;

    font-weight: 800;

    font-size: 64px;

    line-height: 1.203;

    color: var(--color-step-num);

    padding: 5px 13px 0 0;

    text-align: right;

}



.process-card-body {

    padding: 0 40px 58px 40px;

    display: flex;

    flex-direction: column;

    flex-grow: 1;

}



.process-card i.process-icon {

    font-style: normal;

    min-height: 42px;

    display: inline-flex;

    align-items: center;

    justify-content: flex-start;

    margin-bottom: 14px;

    filter: brightness(0) saturate(100%) invert(42%) sepia(56%) saturate(3588%) hue-rotate(174deg) brightness(94%) contrast(101%) opacity(0.4);

    transition: filter 0.35s ease, opacity 0.35s ease;

}



.process-card i.process-icon img,
.process-card i.process-icon svg {

    max-height: 42px;

    max-width: 100%;

    width: auto !important;


    object-fit: contain;

    transition: filter 0.3s ease, opacity 0.3s ease;

}



.process-card h3 {

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

    font-weight: 700;

    font-size: 24px;

    line-height: 1.5;

    margin-bottom: 14px;

    color: transparent;

    -webkit-text-fill-color: transparent;

    -webkit-text-stroke: 1px var(--head-color);

    transition: color 0.3s ease, -webkit-text-fill-color 0.3s ease, -webkit-text-stroke 0.3s ease;

}



.process-card p {

    font-size: 14px;

    line-height: 1.714;

    color: var(--body-color);

    margin: 0;

}



/* Card Hover State */

.process-card:hover {

    background: var(--color-white);

    border-color: transparent;

    border-radius: 30px;

    box-shadow: 0px 12px 60px rgba(33, 37, 41, 0.1);

}



.process-card:hover i.process-icon {

    filter: none;

    opacity: 1;

}

.process-card:hover i.process-icon img,
.process-card:hover i.process-icon svg {

    filter: inherit;

}



.process-card:hover h3 {

    color: var(--head-color);

    -webkit-text-fill-color: var(--head-color);

    -webkit-text-stroke: 0;

}



.web-design-row {

    margin-bottom: 140px;

}



.web-design-row:last-child {

    margin-bottom: 0;

}



.service-image {

    position: relative;

}



.service-image .main_img {

    margin-bottom: 0;

}



.service-image .layerimgs {

    position: absolute;

    right: -13%;

    bottom: -28%;

    pointer-events: none;

}



.web-design-row:nth-child(even) .service-content-col {

    order: -1;

}



.web-design-row:nth-child(even) .service-image-col {

    text-align: right;

}



.web-design-row:nth-child(even) .layerimgs {

    left: -13%;

    bottom: -38%;

}



.service-content-col .service-content .sechdCont h2 {

    margin-bottom: 31px;

}



.service-content-col .service-content .sechdCont h2 span::after {

    bottom: -34px;

}



.service-content-col .service-content .sechdCont p {

    color: var(--color504E4E);

}



.service-content-col .cmnbtn {

    margin-top: 25px;

}



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

   Projects That Drive Digital Success Section

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





.projectdrive-grid .row {

    --bs-gutter-x: 30px;

    --bs-gutter-y: 30px;

}



.projectdrive-card {

    border-radius: 20px;

    overflow: hidden;

    box-shadow: 0px 6px 30px rgba(33, 37, 41, 0.1);

    transition: box-shadow 0.35s ease;

    will-change: transform;

}



.projectdrive-card:hover {

    box-shadow: 0px 20px 50px rgba(8, 17, 34, 0.4);

}



.projectdrive-card .img-box {

    position: relative;

    width: 100%;

    padding-bottom: 108%;

    overflow: hidden;

    border-radius: 20px;

}



.projectdrive-card .img-box img {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    object-fit: cover;

    border-radius: 20px;

    transition: transform 0.4s ease;

}



.projectdrive-card:hover .img-box img {

    transform: scale(1.03);

}



/* Project Drive Hover Layer & Content */

.projectdrive-hover-layer {

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

    width: 100%;

    height: 100%;

    background: linear-gradient(351.66deg, #64D676 6.75%, rgba(110, 216, 126, 0) 84.07%);

    border-radius: 20px;

    opacity: 0;

    visibility: hidden;

    transition: opacity 0.4s ease, visibility 0.4s ease;

    z-index: 2;

    pointer-events: none;

}



.projectdrive-hover-content {

    position: absolute;

    bottom: 0;

    left: 0;

    right: 0;

    padding: 39px 30px;

    text-align: center;

    transform: translateY(15px);

    transition: transform 0.4s ease;

    width: 100%;

    box-sizing: border-box;

}



.projectdrive-card:hover .projectdrive-hover-layer {

    opacity: 1;

    visibility: visible;

}



.projectdrive-card:hover .projectdrive-hover-content {

    transform: translateY(0);

}



.projectdrive-title {

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

    font-weight: 700;

    font-size: 26px;

    line-height: 1.3;

    color: #05010C;

    padding-bottom: 13px;

    margin: 0;

}



.projectdrive-divider {

    display: flex;

    justify-content: center;

    align-items: center;

    margin: 0 auto;

    line-height: 0;

}



.projectdrive-divider svg {

    max-width: 100%;

    width: 206px;

    height: auto;

    display: block;

}



.projectdrive-category {

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

    font-weight: 400;

    font-size: 22px;

    line-height: 1.545;

    color: #05010C;

    padding-top: 13px;

    margin: 0;

}



.projectdrive-col.offset-col {

    padding-top: 35px;

}



.projectdrive-col .projectdrive-card {

    margin-bottom: 30px;

}



.projectdrive-col .projectdrive-card:last-child {

    margin-bottom: 0;

}



.projectdrive-btn {

    margin-top: 60px;

}



.digital-services-section {

    padding: 131px 0 141px 0;

}



.seopackagesc {

    padding: 130px 0;

    position: relative;

}



.seopackagesc .icon1 {

    left: -15%;

    top: 13%;

}



.seopackagesc .icon2 {

    right: -15%;

    top: 26%;

}



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

   SEO Packages / Pricing Section Styles

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

.pricing-content {

    display: flex;

    flex-wrap: wrap;

    gap: 30px;

    align-items: stretch;

}



.pricing-card {

    flex: 0 0 calc(25% - 22.5px);

    max-width: calc(25% - 22.5px);

    width: calc(25% - 22.5px);

    background: var(--color-pricing-bg);

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

    box-shadow: 0px 6px 30px rgba(33, 37, 41, 0.1);

    border-radius: 30px;

    display: flex;

    flex-direction: column;

    padding: 0;

    transition: all 0.3s ease;

    position: relative;

    box-sizing: border-box;

    z-index: 1;
    padding: 7px;

    overflow: hidden;

}



.pricing-card::before {

    content: "";

    position: absolute;

    inset: 0;

    border-radius: 27px;

    background: linear-gradient(274.02deg, var(--color-gradient-blue) -92.69%, var(--color-gradient-green) 96.72%);

    opacity: 0;

    z-index: -1;

    transition: opacity 0.3s ease;

}



.pricing-card-header {

    background: var(--color-white);

    border-radius: 30px;

    padding: 48px 15px 36px 24px;

    transition: all 0.3s ease;

}



.pricing-card-header h3 {

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

    font-weight: 800;

    font-size: 22px;

    line-height: 1.227;

    color: var(--head-color);

    margin-bottom: 30px;

}



.pricing-card-header h3 em {

    font-style: italic;

    font-weight: 800;

}



.pricing-price {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 10px;

}



.pricing-arrow {

    background: linear-gradient(274.02deg, var(--color-gradient-blue) -92.69%, var(--color-gradient-green) 96.72%);

    box-shadow: 0px 12px 40px rgba(80, 78, 78, 0.2);

    border-radius: 60px;

    min-width: 55px;

    width: 55px;

    height: 46px;

    min-height: 46px;

    display: flex;

    align-items: center;

    justify-content: center;

    transition: transform 0.3s ease, box-shadow 0.3s ease;

}



.pricing-arrow:hover {

    transform: scale(1.05);

}



.pricing-price .price {

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

    font-weight: 700;

    font-size: 38px;

    line-height: 1.21;

    color: var(--head-color);

    display: inline-flex;

    align-items: baseline;

}



.pricing-price .price sub {

    bottom: 0;

    font-style: normal;

    color: var(--head-color);

}



.pricing-price .price sub:first-child {

    font-size: 16px;

    font-weight: 700;

    line-height: 1;

    margin-right: 2px;

}



.pricing-price .price sub:last-child {

    font-size: 14px;

    font-weight: 800;

    line-height: 1;

    margin-left: 2px;

}



.pricing-card-body {

    padding: 13px 24px 22px 24px;

    flex-grow: 1;

}



.pricing-card-body ul {

    list-style: none;

    padding: 0;

    margin: 0;

}



.pricing-card-body ul li {

    font-family: 'Plus Jakarta Sans', sans-serif;

    font-weight: 400;

    font-size: 14px;

    line-height: 1.8;

    color: var(--head-color);

    position: relative;

    padding-left: 20px;

    margin-bottom: 5px;

    transition: color 0.3s ease;

}



.pricing-card-body ul li:last-child {

    margin-bottom: 0;

}



.pricing-card-body ul li::before {

    content: "";

    position: absolute;

    left: 0;

    top: 8px;

    width: 10px;

    height: 10px;

    background: var(--color-primary);

    border-radius: 5px;

    transition: background 0.3s ease;

}



/* Hover & Featured State for Entire Box */

.pricing-card:hover,

.pricing-card.pricing-card-featured {

    box-shadow: 0px 6px 30px rgba(33, 37, 41, 0.1);

    /* padding: 7px; */

    border-color: transparent;

}



.pricing-card:hover::before,

.pricing-card.pricing-card-featured::before {

    opacity: 1;

}



.pricing-card:hover .pricing-card-body ul li,

.pricing-card.pricing-card-featured .pricing-card-body ul li {

    color: var(--color-white);

}



.pricing-card:hover .pricing-card-body ul li::before,

.pricing-card.pricing-card-featured .pricing-card-body ul li::before {

    background: var(--color-white);

}



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

   The Latest News Section Styles

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





.latest-news-slider-wrap {

    position: relative;

    overflow: hidden;

    padding: 12px 18px 25px 12px;

    margin: -12px -18px -25px -12px;

}



.latest-news-slider {

    overflow: visible;

}



.latest-news-slider .swiper-wrapper {

    align-items: stretch;

}



.latest-news-slider .swiper-slide {

    height: auto;

    display: flex;

}



.news-item {

    display: flex;

    flex-direction: column;

    width: 100%;

    height: 100%;

}



.news-image {

    display: block;

    width: 100%;

    position: relative;

    padding-bottom: 74%;

    border-radius: 20px;

    overflow: hidden;

    margin-bottom: 30px;

}



.news-image img {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    object-fit: cover;

    border-radius: 20px;

    transition: transform 0.4s ease;

}



.news-item:hover .news-image img {

    transform: scale(1.05);

}



.news-meta {

    display: flex;

    align-items: center;

    gap: 0;

    margin-bottom: 14px;

}



.news-date {

    font-family: 'Plus Jakarta Sans', sans-serif;

    font-weight: 700;

    font-size: 14px;

    line-height: 1.2;

    text-transform: uppercase;

    color: var(--head-color);

    padding: 8px 14px;

    position: relative;

    display: inline-block;

    flex-shrink: 0;

}



.news-date::before {

    content: "";

    position: absolute;

    left: 0;

    top: 0;

    bottom: 0;

    width: 10px;

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

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

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

    border-radius: 4px 0 0 4px;

    pointer-events: none;

}



.news-date::after {

    content: "";

    position: absolute;

    right: 0;

    top: 0;

    bottom: 0;

    width: 10px;

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

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

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

    border-radius: 0 4px 4px 0;

    pointer-events: none;

}



.news-meta-line {

    flex: 1;

    display: flex;

    align-items: center;

    min-width: 0;

}



.news-meta-line svg {

    width: 100%;

    display: block;

}



.news-title {

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

    font-weight: 700;

    font-size: 24px;

    line-height: 1.333;

    color: var(--head-color);

    margin-bottom: 14px;

}



.news-title a {

    color: var(--head-color);

    transition: color 0.3s ease;

}



.news-title a:hover {

    color: var(--color-menu-hover);

}



.news-bottom {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 0;

    margin-top: auto;

    padding-right: 4px;

}



.news-bottom-line {

    flex: 1;

    display: flex;

    align-items: center;

    min-width: 0;

}



.news-bottom-line svg {

    width: 100%;

    display: block;

}



.news-arrow {

    background: var(--head-color);

    box-shadow: -2px 3px 10px rgba(80, 78, 78, 0.2);

    border-radius: 60px;

    min-width: 55px;

    width: 55px;

    height: 46px;

    min-height: 46px;

    display: flex;

    align-items: center;

    justify-content: center;

    transition: transform 0.3s ease;

    flex-shrink: 0;

    animation: newsArrowColorShift 4s infinite alternate ease-in-out;

}

@keyframes newsArrowColorShift {

    0% {

        background: var(--head-color);

        box-shadow: -2px 3px 12px rgba(10, 22, 40, 0.3);

    }

    50% {

        background: #0091D9;

        box-shadow: 0px 4px 15px rgba(0, 145, 217, 0.45);

    }

    100% {

        background: #64D676;

        box-shadow: 0px 4px 15px rgba(100, 214, 118, 0.45);

    }

}



.news-item:hover .news-arrow {

    background: linear-gradient(274.02deg, var(--color-gradient-blue) -92.69%, var(--color-gradient-green) 96.72%);

}



.news-arrow:hover {

    transform: scale(1.05);

}



/* Swiper Controls Navigation Styling (Centered Below Slider) */

.latest-news-nav {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 15px;

    margin-top: 40px;

}



.news-swiper-prev,

.news-swiper-next {

    position: static;

    width: 48px;

    height: 48px;

    border-radius: 50%;

    background: var(--color-white);

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

    box-shadow: 0px 6px 20px rgba(33, 37, 41, 0.08);

    display: flex;

    align-items: center;

    justify-content: center;

    z-index: 10;

    cursor: pointer;

    transition: all 0.3s ease;

    margin-top: 0;

}



.news-swiper-prev::after,

.news-swiper-next::after {

    display: none;

}



.news-swiper-prev:hover,

.news-swiper-next:hover {

    background: var(--head-color);

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

}



.news-swiper-prev:hover img,

.news-swiper-next:hover img {

    filter: brightness(0) invert(1);

}



.swiper-button-lock {

    display: none !important;

}



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

   Happy Customers / Testimonial Section Styles

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

.happycustomersc {

    padding: 130px 0;

}



.cusotmerscliersc {

    position: relative;

    padding: 20px 0;

    overflow: hidden;

}



/* Left & Right Faded Shadow Layers */

.testimonial-shadow-layer {

    position: absolute;

    top: 0;

    bottom: 0;

    width: 12%;

    max-width: 140px;

    z-index: 10;

    pointer-events: none;

}



.testimonial-shadow-layer.left-shadow {

    left: 0;

    background: linear-gradient(90deg, #FFFFFF 0%, rgba(255, 255, 255, 0.5) 40%, rgba(255, 255, 255, 0) 100%);

}



.testimonial-shadow-layer.right-shadow {

    right: 0;

    width: 8%;

    max-width: 100px;

    background: linear-gradient(270deg, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0.3) 50%, rgba(255, 255, 255, 0) 100%);

}



.customer-swiper {

    padding: 20px 0 50px 0;

    margin-bottom: -20px;

}



.customer-swiper .swiper-wrapper {

    align-items: stretch;

}



.customer-swiper .swiper-slide {

    height: auto;

    display: flex;

}



.customer-card {

    padding: 30px 25px 38px 25px;

    background: transparent;

    border-radius: 30px;

    transition: all 0.4s ease;

    height: 100%;

    width: 100%;

    display: flex;

    flex-direction: column;

    position: relative;

    z-index: 1;

    overflow: hidden;

}

.customer-card::before {

    content: "";

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

    width: 100%;

    height: 100%;

    background: url('images/customerHoivberBAck.webp') no-repeat center center;

    background-size: 135% 135%;

    border-radius: 30px;

    opacity: 0;

    z-index: -1;

    transition: opacity 0.5s ease-in-out;

    -webkit-backface-visibility: hidden;

    backface-visibility: hidden;

    will-change: background-position, filter, opacity;

}



/* Active Slide Styling & Eye-Catching Movement Animation */

.swiper-slide-active .customer-card::before,

.customer-card:hover::before {

    opacity: 1;

    animation: customerCardMove 5s infinite alternate ease-in-out;

}

.swiper-slide-active .customer-card {

    background: transparent;

    border-radius: 30px;

}

@keyframes customerCardMove {

    0% {

        background-position: 0% 0%;

        filter: drop-shadow(0 8px 25px rgba(0, 145, 217, 0.3));

    }

    50% {

        background-position: 100% 100%;

        filter: drop-shadow(0 15px 45px rgba(0, 145, 217, 0.5)) drop-shadow(0 6px 22px rgba(110, 216, 126, 0.45));

    }

    100% {

        background-position: 0% 100%;

        filter: drop-shadow(0 8px 25px rgba(0, 145, 217, 0.3));

    }

}



/* Quote Icon Switching */

.customer-card .quote-icon {

    display: block;

    margin-bottom: 15px;

    min-height: 40px;

}



.customer-card .quote-icon img.quote-default {

    display: block;

}



.customer-card .quote-icon img.quote-active {

    display: none;

}



.customer-swiper .swiper-slide-active .customer-card .quote-icon img.quote-default {

    display: none;

}



.customer-swiper .swiper-slide-active .customer-card .quote-icon img.quote-active {

    display: block;

}



.customer-heading {

    font-family: 'Plus Jakarta Sans', sans-serif;

    font-weight: 600;

    font-size: 14px;

    line-height: 1.3;

    text-transform: uppercase;

    color: var(--head-color);

    margin-bottom: 8px;

}



.customer-review-text {

    margin-bottom: 30px;

}



.customer-review-text p {

    font-family: 'Plus Jakarta Sans', sans-serif;

    font-weight: 400;

    font-size: 14px;

    line-height: 1.714;

    color: #1E1E1E;

    margin: 0;

}



.customer-author-wrap {

    display: flex;

    align-items: center;

    margin-top: auto;

}



.customer-author-wrap .author-img {

    width: 60px;

    height: 60px;

    border-radius: 50%;

    overflow: hidden;

    flex-shrink: 0;

}



.customer-author-wrap .author-img img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    border-radius: 50%;

}



.customer-author-wrap .author-info {

    padding-left: 19px;

    width: calc(100% - 60px);

}



.customer-author-wrap .author-info h4 {

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

    font-weight: 500;

    font-size: 14px;

    line-height: 24px;

    color: #1E1E1E;

    margin: 0;

}



.customer-author-wrap .author-info p {

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

    font-weight: 400;

    font-size: 14px;

    line-height: 24px;

    color: #1E1E1E;

    margin: 0;

}



/* Slider Bottom Controls & Green Progress Line Indicator */

.customer-slider-controls {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 2px;

    margin-top: 35px;

    position: relative;

    z-index: 12;

}



.customer-prev,

.customer-next {

    position: static;

    width: 24px;

    height: 24px;

    display: flex;

    align-items: center;

    justify-content: center;

    cursor: pointer;

    background: transparent;

    border: none;

    margin: 0;

    padding: 0;

    transition: transform 0.2s ease;

}



.customer-prev img,

.customer-next img {

    width: 8px;

    height: 14px;

    display: block;

}



.customer-prev::after,

.customer-next::after {

    display: none;

}



.customer-prev:hover,

.customer-next:hover {

    transform: scale(1.2);

}



.customer-progress-bar {

    position: relative;

    width: 130px;

    height: 2px;

    background: #C8C8C8;

    border-radius: 2px;

    overflow: visible;

}



.customer-progress-bar .progress-line-fill {

    position: absolute;

    left: 0;

    top: 50%;

    transform: translateY(-50%);

    height: 4px;

    width: 33.333%;

    background: #64D676;

    border-radius: 4px;

    transition: left 0.3s ease, width 0.3s ease;

}



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

   Footer Section Styles

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

.footer-wrapper {

    padding: 0 20px 28px 14px;

}



.footer-inner-box {

    background: var(--color-white);

    box-shadow: 0px 12px 60px rgba(0, 145, 217, 0.15);

    border-radius: 30px;

    padding: 11px 8px 30px 16px;

}



/* Top Contact Banner */

.footer-top-banner {

    position: relative;

    border-radius: 25px;

    background: transparent;

    padding: 76px 0 75px 0;

    overflow: hidden;

    z-index: 1;

}

.footer-top-banner::before {

    content: "";

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

    width: 100%;

    height: 100%;

    background: url('images/footertoplayout.webp') no-repeat center center;

    background-size: 135% 135%;

    border-radius: 25px;

    z-index: -1;

    -webkit-backface-visibility: hidden;

    backface-visibility: hidden;

    will-change: background-position, filter;

    animation: footerBannerGlowMove 7s infinite alternate ease-in-out;

}

@keyframes footerBannerGlowMove {

    0% {

        background-position: 0% 20%;

        filter: drop-shadow(0 8px 30px rgba(0, 145, 217, 0.25)) brightness(1);

    }

    50% {

        background-position: 100% 80%;

        filter: drop-shadow(0 15px 45px rgba(0, 145, 217, 0.45)) drop-shadow(0 5px 22px rgba(110, 216, 126, 0.35)) brightness(1.1);

    }

    100% {

        background-position: 20% 0%;

        filter: drop-shadow(0 8px 30px rgba(0, 145, 217, 0.25)) brightness(1);

    }

}



.footer-contact-row {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 32px;

}



.footer-contact-item {

    display: flex;

    align-items: center;

    flex: 1;

}



.footer-contact-item:last-child {

    flex-grow: 2;

}



.contact-icon-box {

    width: 51px;

    height: 51px;

    background: linear-gradient(69.12deg, #FFFFFF 2.67%, #F5F5F5 97.53%);

    border: 1px solid #C8C8C8;

    border-radius: 20px;

    display: flex;

    align-items: center;

    justify-content: center;

    flex-shrink: 0;

}



.contact-info-box {

    width: calc(100% - 51px);

    padding-left: 20px;

}



.contact-label {

    display: block;

    font-family: 'Plus Jakarta Sans', sans-serif;

    font-weight: 700;

    font-size: 16px;

    line-height: 1.75;

    color: var(--head-color);

}



.contact-val {

    margin-bottom: 0;

}



.contact-val a {

    white-space: nowrap;

}



.contact-val a,

.contact-val p {

    font-family: 'Plus Jakarta Sans', sans-serif;

    font-weight: 400;

    font-size: 22px;

    line-height: 1.27;

    color: var(--head-color);

    margin: 0;

    text-decoration: none;

    transition: color 0.3s ease;

}



.contact-val a:hover {

    color: var(--head-color);

    text-decoration: underline;

}



/* Middle Columns Section */

.footer-middle-sec {

    padding: 60px 0 70px 0;

}



.footer-col-logo {

    display: flex;

    flex-direction: column;

    justify-content: space-between;

}



.footer-logo-wrap {

    margin-bottom: 30px;

}



.footer-logo-wrap img {

    height: auto;

}



.footer-social-sec {

    margin-top: auto;

}



.footer-social-list {

    list-style: none;

    padding: 0;

    margin: 0;

    display: flex;

    align-items: center;

    gap: 10px;

}



.footer-social-list li a {

    width: 44px;

    height: 44px;

    border: 1px solid #C8C8C8;

    border-radius: 16px;

    display: flex;

    align-items: center;

    justify-content: center;

    transition: transform 0.4s ease, background 0.3s ease, border-color 0.3s ease;

}



.footer-social-list li a:hover {

    transform: rotate(360deg) scale(1.1);

    background: var(--head-color);

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

}



.footer-social-list li a:hover img {

    filter: brightness(0) invert(1);

}



.footer-col .footer-title {

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

    font-weight: 500;

    font-size: 16px;

    line-height: 1.5;

    color: var(--head-color);

    margin-bottom: 15px;

}



.footer-col ul {

    list-style: none;

    padding: 0;

    margin: 0;

}



.footer-col ul li a {

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

    font-weight: 400;

    font-size: 14px;

    line-height: 2.285;

    color: var(--head-color);

    text-decoration: none;

    transition: color 0.3s ease, padding-left 0.3s ease;

}



.footer-col ul li a:hover {

    color: var(--color-primary);

}



/* Copyright Section */

.footer-copyright-sec {

    padding-top: 15px;

}



.footer-copyright-sec p {

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

    font-weight: 400;

    font-size: 14px;

    line-height: 1.857;

    color: var(--head-color);

    margin: 0;

}



.ascentwebportal {

    padding-bottom: 130px;

    position: relative;

    z-index: 1;

}



.ascentwebportal .icon1 {

    left: -20%;
    top: -80%;

}



.sechdCont.noarr h2 {

    padding-bottom: 0;

}



.sechdCont.noarr h2 span:after {

    display: none;

}



.sprtrpara p {

    font-size: 14px;

}



.sprtrpara {

    border-left: 1px solid var(--color-btn-hover-bg);

    padding: 18px 0 18px 50px;

    margin-left: 20px;

    margin-bottom: 20px;

}



.ascentwebportal .sechdCont {

    max-width: 777px;

    position: relative;

    z-index: 1;

}



.chartgrid {

    padding: 17px 14px;

    background: rgba(249, 249, 249, 0.8);

    border: 1px solid rgba(107, 214, 129, 0.5);

    box-shadow: -6px 6px 60px rgba(0, 0, 0, 0.08);

    border-radius: 20px;

    display: flex;

    flex-wrap: wrap;

    gap: 9px;

}



.chartgridpsn {

    width: calc(50% - 4.5px);

    flex-basis: calc(50% - 4.5px);

    font-weight: 600;

    font-size: 14px;

    line-height: 1.3;

    color: var(--body-color);

    padding: 9px 9px 10px;

    background: var(--color-white);

    border: 1px solid #E0E0E0;

    border-radius: 10px;

    font-family: "Plus Jakarta Sans", sans-serif;

    display: flex;

    align-items: center;

    justify-content: center;

    text-align: center;

}



.ourprocess {

    position: relative;

    z-index: 1;

}



.ourprocess .icon1 {

    position: absolute;

    left: -16%;

    top: -15%;

}



.datainsightchart {

    display: flex;

    flex-direction: column;

    align-items: flex-end;

    position: relative;

    margin-left: auto;

    margin-right: -10%;

    margin-top: -19%;

}



.datainsightchartinnn.box1 {

    width: 400px;

    max-width: 400px;

    margin-right: 20px;

}



.sepatorLine.line1 {

    display: flex;

    justify-content: flex-start;

    margin-right: 185px;

    margin-top: -2px;

    margin-bottom: -2px;

}



.box2wrapper {

    display: block;

    margin-right: 30px;

    position: relative;

    z-index: 1;

}



.sepatorLine.line2 {

    display: flex;

    justify-content: center;

    margin-right: 120px;

    margin-top: -2px;

    margin-bottom: -2px;

}



.strategybox {

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

    border: 1px solid rgba(107, 214, 129, 0.5);

    box-shadow: -6px 6px 60px rgba(0, 0, 0, 0.08);

    border-radius: 20px;

    padding: 10px 16px;

    width: 181px;

    min-height: 84px;

    display: inline-flex;

    align-items: center;

    flex-shrink: 0;

    position: relative;

    z-index: 1;

}



.strategybox .bulletgrid {

    width: 18px;

    height: 18px;

    min-width: 18px;

    background: var(--color-primary);

    border-radius: 50%;

    position: relative;

}



.strategybox .bulletgrid::before {

    content: "";

    position: absolute;

    width: 30px;

    height: 30px;

    min-width: 30px;

    background: rgba(107, 214, 129, 0.35);

    border: 1px solid rgba(107, 214, 129, 0.5);

    border-radius: 50%;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);

    z-index: -1;

    animation: bulletRipple 2.2s infinite ease-out;

    pointer-events: none;

}

.strategybox .bulletgrid::after {

    content: "";

    position: absolute;

    width: 30px;

    height: 30px;

    min-width: 30px;

    background: rgba(107, 214, 129, 0.2);

    border-radius: 50%;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);

    z-index: -2;

    animation: bulletRipple 2.2s infinite ease-out 0.8s;

    pointer-events: none;

}

@keyframes bulletRipple {

    0% {

        transform: translate(-50%, -50%) scale(0.6);

        opacity: 0.85;

    }

    100% {

        transform: translate(-50%, -50%) scale(1.4);

        opacity: 0;

    }

}



.strategybox .focusHd {

    padding-left: 18px;

    font-style: italic;

    font-weight: 800;

    font-size: 18px;

    line-height: 1.3;

    color: var(--head-color);

    margin: 0;

}



.verticalchartinner {

    display: flex;

    align-items: center;

    position: relative;

    width: 100%;

    justify-content: flex-end;

}



.box4wrapper {

    flex-shrink: 0;

}



.growthimpact {

    padding: 40px 20px;

    background: var(--color-white);

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

    border-radius: 30px;

    min-width: 269px;

    max-width: 269px;

    text-align: center;

}



.projectdrivesec {

    position: relative;

}



.projectdrivesec .container {

    position: relative;

    z-index: 2;

}



.projectdrivesec .icon1 {

    position: absolute;

    left: 0;

    right: 0;

    top: -10%;

    margin: 0 auto;

    z-index: 0;

    pointer-events: none;

    will-change: transform, opacity, filter;

    animation: matrixGridPulse 8s infinite alternate ease-in-out;

}

@keyframes matrixGridPulse {

    0% {

        transform: translateY(0px) scale(1);

        opacity: 0.7;

        filter: brightness(1) drop-shadow(0 0 0px rgba(0, 145, 217, 0));

    }

    50% {

        transform: translateY(-12px) scale(1.025);

        opacity: 0.92;

        filter: brightness(1.15) drop-shadow(0 10px 30px rgba(0, 145, 217, 0.35)) drop-shadow(0 0 15px rgba(110, 216, 126, 0.25));

    }

    100% {

        transform: translateY(6px) scale(0.995);

        opacity: 0.75;

        filter: brightness(1.05) drop-shadow(0 5px 15px rgba(0, 145, 217, 0.2));

    }

}



.projectdrivesec .icon1 img {

    width: 100%;

    max-height: 1360px;

}



.growthimpact .growthmainhd {

    font-family: "Inter", sans-serif;

    font-style: italic;

    font-weight: 800;

    font-size: 26px;

    line-height: 1.2;

    color: var(--head-color);

    margin-bottom: 7px;

}



.growthimpact .growthsubhd {

    font-family: "Inter", sans-serif;

    font-style: italic;

    font-weight: 800;

    font-size: 26px;

    line-height: 1.2;

    color: transparent;

    -webkit-text-fill-color: transparent;

    -webkit-text-stroke: 1px var(--head-color);

    margin: 0;

}



.strgylinewrapper {

    display: flex;

    align-items: center;

    position: relative;

}



.sepatorLine.line3 {

    display: flex;

    align-items: center;

    margin-left: -2px;

    margin-right: -2px;

    flex-shrink: 0;

}



.growth-branches-col {

    display: flex;

    flex-direction: column;

    gap: 36px;

    align-items: flex-end;

}



.growthtop,

.growthbtm-row {

    display: flex;

    align-items: center;

}



.growthtop {

    margin-bottom: -22px;

}



.sepatorLine.line4,

.sepatorLine.line5 {

    display: flex;

    align-items: center;

    margin-left: -2px;

    margin-right: -2px;

    flex-shrink: 0;

}



.targetadncbox.chartgrid {

    padding: 22px 18px;

    max-width: 460px;

    flex-wrap: wrap;

    flex-shrink: 0;

}



.targetadncbox.chartgrid .chartgridpsn {

    width: auto;

    flex: 1 0 calc(50% - 4.5px);

}



.iconsd {

    position: absolute;

    z-index: -1;

    pointer-events: none;

}



/* Lock scrolling completely while preloader is active */
html.preloader-active,
body.preloader-active {
    overflow: hidden !important;
    height: 100vh !important;
    touch-action: none !important;
}

.site-preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: #0B0E14;
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    overflow: hidden;
    pointer-events: all;
}

.preloader-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 2;
}

.preloader-logo-wrap {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 32px;
}

.preloader-logo {
    max-width: 220px;
    height: auto;
    object-fit: contain;
    position: relative;
    z-index: 2;
    filter: drop-shadow(0 10px 30px rgba(0, 145, 217, 0.45));
    animation: preloaderLogoPulse 2s ease-in-out infinite alternate;
}

.logo-pulse-glow {
    position: absolute;
    width: 260px;
    height: 260px;
    background: radial-gradient(circle, rgba(100, 214, 118, 0.35) 0%, rgba(0, 145, 217, 0.25) 45%, rgba(11, 14, 20, 0) 70%);
    border-radius: 50%;
    z-index: 1;
    animation: glowPulse 2.2s ease-in-out infinite alternate;
}

@keyframes preloaderLogoPulse {
    0% {
        transform: scale(0.97);
    }

    100% {
        transform: scale(1.03);
    }
}

@keyframes glowPulse {
    0% {
        transform: scale(0.85);
        opacity: 0.5;
    }

    100% {
        transform: scale(1.25);
        opacity: 1;
    }
}

.preloader-progress-bar {
    width: 260px;
    height: 6px;
    background: rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    overflow: hidden;
    position: relative;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);
    margin-bottom: 14px;
}

.preloader-progress-fill {
    width: 0%;
    height: 100%;
    background: linear-gradient(90deg, #64D676 0%, #0091D9 100%);
    border-radius: 10px;
    box-shadow: 0 0 15px rgba(100, 214, 118, 0.8);
    transition: width 0.12s ease-out;
}

.preloader-counter {
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 15px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.9);
    letter-spacing: 1.5px;
}

/* Hardware Acceleration for Lag-Free Animations */
.gsap-fade-up,
.gsap-fade-left,
.gsap-fade-right,
.gsap-fade,
.gsap-fade-in,
.gsap-zoom-in,
.hero-content,
.handsOnImg img,
.bannerabout-item,
.growth-card,
.approach-card,
.process-card,
.projectdrive-card,
.pricing-card,
.news-item,
.customer-card {
    will-change: transform, opacity;
}

/* ==========================================================================
   Smooth & Meaningful Animation Enhancements Suite
   ========================================================================== */

/* 1. Global Top Scroll Progress Bar */
.scroll-progress-bar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    z-index: 10001;
    background: rgba(0, 0, 0, 0.04);
    pointer-events: none;
}

.scroll-progress-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #0091D9 0%, #3CD495 50%, #64D676 100%);
    box-shadow: 0 0 12px rgba(100, 214, 118, 0.75), 0 0 6px rgba(0, 145, 217, 0.6);
    border-radius: 0 4px 4px 0;
    transition: width 0.08s ease-out;
}

/* 2. Floating Back to Top Button with SVG Circular Progress */
.back-to-top {
    position: fixed;
    bottom: 35px;
    right: 35px;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: #FFFFFF;
    border: none;
    cursor: pointer;
    z-index: 999;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12), 0 2px 10px rgba(0, 145, 217, 0.15);
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px) scale(0.85);
    transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1),
        visibility 0.4s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
        box-shadow 0.3s ease,
        background-color 0.3s ease;
}

.back-to-top.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

.back-to-top:hover {
    transform: translateY(-5px) scale(1.08);
    background: var(--head-color);
    box-shadow: 0 14px 35px rgba(0, 145, 217, 0.35), 0 6px 18px rgba(100, 214, 118, 0.3);
}

.back-to-top-circle {
    position: absolute;
    top: 1px;
    left: 1px;
    width: 50px;
    height: 50px;
    transform: rotate(-90deg);
    pointer-events: none;
}

.back-to-top-circle-bg {
    fill: none;
    stroke: rgba(0, 0, 0, 0.06);
    stroke-width: 3;
}

.back-to-top-circle-progress {
    fill: none;
    stroke: #3CD495;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-dasharray: 138.23;
    stroke-dashoffset: 138.23;
    transition: stroke-dashoffset 0.1s ease-out;
}

.back-to-top-arrow {
    position: relative;
    z-index: 2;
    font-size: 20px;
    font-weight: 700;
    color: var(--head-color);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.3s ease, transform 0.3s ease;
}

.back-to-top:hover .back-to-top-arrow {
    color: #FFFFFF;
    transform: translateY(-2px);
}

/* 4. Banner About 3D Tilt & Micro-Interactions */
.bannerabout-item {
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease;
    border-radius: 20px;
    will-change: transform;
}

.bannerabout-item:hover {
    transform: translateY(-6px);
}

.bannerabout-item .icon-wrap img,
.bannerabout-item .icon-wrap svg {
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.bannerabout-item:hover .icon-wrap img,
.bannerabout-item:hover .icon-wrap svg {
    transform: scale(1.15) rotate(6deg);
}

/* 5. Growth Cards 3D Lift & Kinetic Pulse */
.growth-card {
    will-change: transform, box-shadow;
    transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.45s ease, background-color 0.3s ease;
}

.growth-card:hover {
    transform: translateY(-10px);
}

.growth-card .growth-icon {
    perspective: 500px;
}

.growth-card .growth-icon img,
.growth-card .growth-icon svg {
    transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.growth-card:hover .growth-icon img,
.growth-card:hover .growth-icon svg {
    transform: scale(1.22) rotate(4deg);
}


/* 7. Project Counters Icon Hover Interaction */
.counter-box i.counter-icon img,
.counter-box i.counter-icon svg {
    transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.counter-box:hover i.counter-icon img,
.counter-box:hover i.counter-icon svg {
    transform: scale(1.18) rotate(-5deg);
}

/* 8. Agency Approach Cards 3D Hover & Shimmer */
.approach-card {
    will-change: transform, box-shadow;
    transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.45s ease, border-color 0.35s ease;
}

.approach-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 50px rgba(0, 145, 217, 0.16), 0 8px 25px rgba(100, 214, 118, 0.12);
}

.approach-card-img img {
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.approach-card:hover .approach-card-img img {
    transform: scale(1.06) translateY(-4px);
}

/* 9. Process Step Cards Interactive Hover */
.process-card {
    will-change: transform, box-shadow;
    transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.45s ease, border-color 0.35s ease;
}

.process-card:hover {
    transform: translateY(-12px);
    box-shadow: 0 22px 55px rgba(33, 37, 41, 0.12), 0 6px 20px rgba(0, 145, 217, 0.1);
}

.process-card-num {
    transition: transform 0.4s ease;
}

.process-card:hover .process-card-num {
    transform: scale(1.08) translateY(-2px);
}

.process-card i.process-icon img {
    transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.3s ease;
}

.process-card:hover i.process-icon img {
    transform: scale(1.22) rotate(6deg);
}

/* 10. Digital Services Showcase Multi-Layer 3D Depth */
.service-image .main_img img {
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.service-row:hover .service-image .main_img img {
    transform: scale(1.03);
}

/* 11. Projects That Drive Success 3D Magnetic Cards */
.projectdrive-card {
    will-change: transform, box-shadow;
    transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.45s ease;
}

.projectdrive-card:hover {
    transform: translateY(-10px) scale(1.01);
    box-shadow: 0 25px 60px rgba(8, 17, 34, 0.28), 0 10px 25px rgba(100, 214, 118, 0.2);
}

.projectdrive-card .img-box img {
    transition: transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
}

.projectdrive-card:hover .img-box img {
    transform: scale(1.08);
}

.projectdrive-divider svg {
    transition: transform 0.4s ease;
}

.projectdrive-card:hover .projectdrive-divider svg {
    transform: scaleX(1.08);
}




/* 15. Pricing Arrow Smooth Kinetic Rotate */
.pricing-arrow {
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease;
}

.pricing-card:hover .pricing-arrow,
.pricing-arrow:hover {
    transform: rotate(45deg) scale(1.08);
    box-shadow: 0px 8px 25px rgba(0, 145, 217, 0.4);
}



/* 23. Animated SVG Icons Engine */
.animated-icon {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.animated-icon svg {
    display: block;
    max-width: 100%;
    max-height: 100%;
    overflow: visible;
    pointer-events: none;
}

/* 22. Reduced Motion Accessibility */
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}