@import url("https://fonts.googleapis.com/css?family=Montserrat:500,600,700,800,900");

:root {
    --monts: "Montserrat", sans-serif;
    --theme-color: #0e76bc;
    --theme-color-dark: #08162e;
    --theme-color-2: #ff9c00;
    --text-color: #55656e;
    --blue: #0e76bc;
    --green: #1DA851;
    --orange: #ff9c00;
    --dark-blue: #08162e;
    --dark-grey: #212529;
    --white: #fff;
    --black: #000;
    --black-font: #2c2c2c;
    --nav-height: 80px;
    --grey: rgba(197, 197, 197, 1);
    --background-grey: #f5f5ff;
    --text-grey: #727272;
    --faded-text: #434343;
    --background-overlay: rgba(7, 0, 50, 0.6);
    --header-height: 125px;
    --stack-top-gap: 90px;
    --collapsed-height: 60px; 
}

.theme-color {
    color: var(--theme-color) !important;
}

.theme-color2 {
    color: var(--theme-color-2) !important;
}
h1,
h2,
h3,
h4,
p,
a,
li,
img,
input,
span,
ul,
h5 {
    padding: 0;
    margin: 0;
    outline: 0;
}

a,
span,
label {
    display: inline-block;
}

a:hover {
    text-decoration: none;
}

body {
    font-family: var(--monts) !important;
    overflow-x: hidden !important;
    min-width: 360px;
}
.font-monts{
    font-family: var(--monts) !important;
}
.font-monts>p>span{
    font-family: var(--monts) !important;
}

* {
    margin: 0;
    padding: 0;
}

p {
    line-height: 24px;
}

.img-container img {
    width: 100%;
}

.img-container>a {
    display: inline;
}

.btn-bg-primary {
    background-color: var(--blue) !important;
    color: #fff;
}

.bg-primary-light {
    background-color: #f5f5ff;
}

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

.btn-bg-secondary {
    background-color: var(--blue) !important;
    color: #fff;
}

.img-container {
    overflow: hidden;
    position: relative;
}

.img-fitted {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mobile {
    display: none;
}

.content-centered {
    display: flex;
    justify-content: center;
    align-items: center;
}

a {
    text-decoration: none;
}

/* input number no arrow  */

input.no-arrow {
    -moz-appearance: textfield;
}

input.no-arrow::-webkit-inner-spin-button,
input.no-arrow::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input.no-arrow::-webkit-inner-spin-button:hover,
input.no-arrow::-webkit-outer-spin-button:hover {
    background-color: #e6e6e6;
    cursor: default;
}

*[class*="heading-"] {
    font-weight: 800;
    color: var(--theme-color-dark);
}

*[class*="wt-"] {
    color: #fff !important;
}

.heading-ultra {
    font-size: 48px;
    font-weight: 800;
}

.heading-large {
    font-size: 40px;
}

.heading-mid {
    font-size: 28px;
}

.text-lg {
    font-size: 1.125rem;
}

.heading-sm {
    font-size: 22px;
    font-weight: 800;
}

.pad-top {
    padding-top: 90px;
}

.pad-bot {
    padding-bottom: 90px;
}

.flexer {
    display: -ms-flexbox;
    display: flex;
}

.play-now {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    width: 55px;
    height: 55px;
    display: inline-flex !important;
    justify-content: center;
    align-items: center;
    background-color: var(--blue);
    color: #fff;
    border-radius: 50%;
    transition: all 300ms ease;
}

.play-now:hover {
    background-color: var(--orange);

}

.play-now .icon {
    font-size: 24px;
}

.play-now:hover .icon {
    color: #fff;
}

.yout-video-model {
    position: fixed;
    background-color: rgba(0, 0, 0, 0.5);
    width: 100%;
    height: 100%;
    z-index: 99999;
    top: 0;
    left: 0;
    display: none;
    padding: 20px;
    padding-top: 50px;
}

.video-close-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    background-color: #f4f4ff;
    border: 1px solid #444;
    color: #444;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    top: -20px;
    right: -10px;
    z-index: 1;
    cursor: pointer;
    opacity: 0;
    transition: all 600ms ease-in-out;
    animation: showElement 0s 3s forwards;
    animation-duration: 1s;
}


@keyframes showElement {
    0% {}

    100% {
        opacity: 1;

    }
}

.video-container {
    aspect-ratio: 5/4;
}

.video-container .thumbnail {
    border-radius: 10px;
}

.video-container iframe {
    width: 100%;
    height: 100%;
    border-radius: 10px;
}

.common-btn {
    background-color: var(--theme-color-2);
    color: #fff;
    letter-spacing: 0.02em;
    padding: 5px;
    border-radius: 6px;
    border: none;
}

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

.common-btn:focus {
    outline: none;
}

.common-btn-2 {
    background-color: var(--theme-color);
    color: #fff;
    letter-spacing: 0.02em;
    padding: 16px 5px;
    border-radius: 6px;
}

.btn-text {
    font-size: 14px;
    font-weight: 700;
    vertical-align: middle;
    line-height: 14px;
    padding: 0 30px;
}

.btn-icon {
    height: 50px;
    width: 50px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.3);
    color: var(--theme-color-dark);
    vertical-align: middle;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.common-btn:hover .btn-icon {
    background-color: #fff;
}

.btn-icon i {
    font-size: 22px;
}

.naked-btn {
    color: var(--theme-color-dark);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.naked-btn .btn-icon {
    background-color: var(--theme-color-2);
    height: 40px;
    width: 40px;
    margin-left: 15px;
}

.naked-btn:hover {
    color: var(--theme-color-2) !important;
}

.gutter-top-lg {
    margin-top: 60px;
}

.gutter-bot-lg {
    margin-bottom: 60px;
}

.gutter-top-md {
    margin-top: 40px;
}

.gutter-bot-md {
    margin-bottom: 40px;
}

.gutter-top-30 {
    margin-top: 30px;
}

.gutter-bot-30 {
    margin-bottom: 30px;
}

.gutter-top-sm {
    margin-top: 15px;
}

.gutter-bot-sm {
    margin-bottom: 15px;
}

.sub-heading {
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--theme-color);
    letter-spacing: 0.02em;
    margin-bottom: 10px;
}

.extra-heading,
.col-title,
.col-title-md {
    color: var(--theme-color-dark);
    font-weight: 700;
    font-size: 18px;
    display: block;
    line-height: 22px;
}

.col-title-md {
    font-size: 20px;
    line-height: 26px;
}

.indust-icon {
    vertical-align: middle;
    width: 100px;
}

.indexer {
    font-size: 60px;
    font-weight: 700;
    color: rgba(85, 101, 110, 0.1);
    vertical-align: middle;
    margin-left: 15px;
}

.title-link {
    color: inherit;
}

.title-link:hover {
    color: var(--theme-color-2);
    text-decoration: none;
}

.common-input {
    background-color: #f3f3f6;
    font-size: 14px;
    padding: 15px;
    border-radius: 6px;
    width: 100%;
    border: none;
    font-weight: 500;
}

.client-review {
    position: relative;
}

#owl-review {
    position: absolute;
    width: 100%;
    bottom: 40px;
    left: 0;
}

/* New  */
.bold {
    font-weight: 600;
}

.font-color {
    color: var(--black-font);
}

.white {
    color: white;
}

.blue {
    color: var(--blue);
}

.faded-text {
    color: var(--faded-text);
    line-height: 32px;
}

.justify {
    text-align: justify;
}

.mt-70 {
    margin-top: 70px;
}

.ratio-4_5 {
    aspect-ratio: 4/5;
}

.ratio-3_4 {
    aspect-ratio: 4/5;
}


/* home steps  */
.home-steps {
    background-image: url("../images/bg-pattern.png");
    background-size: cover;
    background-repeat: no-repeat;
}

.steps-header {
    padding-bottom: 20px;
}

.steps-header .heading-large {
    font-weight: 600;
    width: 420px;
    flex-shrink: 0;
}

.steps-header p {
    flex: 1;
    padding-top: 10px;
    font-weight: 500;
}

.step-in {
    -ms-flex: 0 0 20%;
    flex: 0 0 20%;
    max-width: 20%;
    padding: 0 15px;
}

.step-in:hover .step-info .indexer {
    background-color: var(--theme-color);
    color: #fff;
}

.step-in:hover .col-title {
    color: var(--theme-color-2);
}

.step-info {
    position: relative;
    height: 140px;
    width: 140px;
    border-radius: 50%;
    box-shadow: 0 0 10px #ddd;
    border: 1px dashed rgb(14, 118, 188) !important;
    text-align: center;
    margin: 0 auto;
    background-color: #fff;
}

.active-step {
    background-color: var(--theme-color-2);
}

.active-step .indexer {
    color: rgba(85, 101, 110, 0.15);
}


.step-info .indexer {
    position: absolute;
    right: 0;
    top: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 35px;
    height: 35px;
    border: 1px solid var(--theme-color);
    background-color: #fff;
    border-radius: 50%;
    color: var(--theme-color);
    font-weight: 600;
    margin-left: 0;
    font-size: 16px;
    transition: all 100ms ease-in-out;
}

.step-ic-wrap {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 1;
}

.step-ic-wrap img {
    width: 50px;
    max-width: 50px;
}

.step-overview p {
    font-size: 14px;
    line-height: 20px;
    margin-top: 10px;
}

/* *********************Button*********************** */
.btn-color {
    background-color: var(--blue);
    color: var(--white) !important;
    box-shadow: inset 0 0 0 0 var(--orange);
    transition: ease-out 0.6s;
    border: transparent;
    padding: 14px 30px;
}

.btn-color:hover {
    background-color: var(--orange);
    color: var(--white);
    box-shadow: inset 300px 0 0 0 var(--orange);
}

.btn-color:first-child:active {
    color: var(--white);
    background-color: var(--blue);
    border-color: transparent;
}

.btn-color:first-child:active {
    color: var(--white);
    background-color: var(--blue);
    border-color: transparent;
}

.btn-color:focus {
    color: var(--white);
}

.btn-color.disabled {
    background-color: var(--orange) !important;
    color: var(--white) !important;
    opacity: 0.9;
    cursor: not-allowed;
}

/* *********************Whatsapp Button*********************** */
.whatsapp-btn-color {
    background-color: var(--green);
    color: var(--white) !important;
    box-shadow: inset 0 0 0 0 var(--blue);
    transition: ease-out 0.6s;
    border: transparent;
    padding: 14px 30px;
}

.whatsapp-btn-color:hover {
    background-color: var(--blue);
    color: var(--white);
    box-shadow: inset 300px 0 0 0 var(--blue);
}

.whatsapp-btn-color:first-child:active {
    color: var(--white);
    background-color: var(--blue);
    border-color: transparent;
}

.whatsapp-btn-color:first-child:active {
    color: var(--white);
    background-color: var(--blue);
    border-color: transparent;
}

.whatsapp-btn-color:focus {
    color: var(--white);
}

.whatsapp-btn-color.disabled {
    background-color: var(--blue) !important;
    color: var(--white) !important;
    opacity: 0.9;
    cursor: not-allowed;
}





.heading-first {
    color: var(--blue);
    text-transform: uppercase;
    display: flex;
    align-items: center;
}

.heading-second,
h2 {
    font-size: clamp(1.875rem, 1.6667rem + 0.9259vw, 2.5rem)
}

.heading-font-family {
    font-weight: 800;
}

/* blog intro index  */
.blog-intro-container {
    background-color: #f1f1ff;
}

.blog-intro-banner {
    position: relative;
    height: calc(100vh - var(--header-height));
}

.blog-intro .common-desc:first-child::first-letter {
    font-size: 36px;
    font-weight: 700;
    color: var(--dark-blue);
}

.blog-intro-container p {
    font-size: 17px;
    line-height: 30px;
    color: var(--dark-blue);
}

.blog-intro-container h2 {
    font-weight: 600;
    font-size: 24px;
}

.blog-intro-container .blog-topics li {
    margin-left: 0.5rem;
    display: flex;
    align-items: center;
    margin-bottom: 0.6rem;
    font-size: 1.05rem;
    color: var(--dark-blue);
}

.blog-intro-container .blog-topics li:not(:last-child):before {
    content: "";
    font-size: 25px;
    line-height: 0;
    margin: 0 0.65rem 0 -0.25rem;
    position: relative;
    background-color: var(--dark-blue);
    border-radius: 50%;
    width: 10px;
    height: 10px;
    flex-shrink: 0;
}

/* end blog index css  */

/* blogs */
.content-banner .banner-contents {
    max-width: 700px;
}

.content-banner .banner-contents .heading-large {
    line-height: 52px;
}

.simple-date {
    font-size: 14px;
    display: block;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.big-date {
    color: var(--text-color);
    font-size: 40px;
    font-weight: 800;
    line-height: 50px;
}

.date-year .big-date {
    position: sticky;
    top: 30px;
}

.blogs-row {
    flex: 1;
    padding-left: 40px;
}

.blog-col .img-container {
    height: 250px;
    border-radius: 15px;
}

.blog-overview {
    /* padding: 0 30px; */
}

.blog-overview-text {
    font-size: 14px;
    line-height: 20px;
    margin-top: 10px;
}

.normal-link {
    font-size: 15px;
    font-weight: 700;
    color: var(--theme-color-2);
    margin-top: 10px;
}

.blog-col-top {
    position: relative;
    padding-left: 80px;
    padding-bottom: 10px;
    padding-top: 15px;
}

.stylish-date {
    background-color: var(--theme-color);
    width: 60px;
    border-radius: 5px;
    color: #fff;
    text-align: center;
    padding: 15px 10px;
}

.stylish-date * {
    display: block;
}

.stylish-date .day-info {
    font-size: 16px;
    font-weight: 800;
}

.stylish-date .month-info {
    font-size: 12px;
    font-weight: 600;
}

.blog-col-top .stylish-date {
    position: absolute;
    bottom: 5px;
    left: 0;
}

.author-title {
    font-size: 14px;
    color: var(--theme-color);
    font-weight: 600;
}

.blog-overview .col-title-md {
    margin-top: 15px;
}

.blog-archive .date-year {
    width: 110px;
}

.blogs-row .row>div:first-child,
.blogs-row .row>div:nth-child(2) {
    margin-top: 0;
}

.blog-banner {
    position: relative;
    height: 576px;
}

.blog-banner .banner-contents {
    max-width: 700px;
}

.banner-overlay {
    height: 100%;
    width: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background-color: rgba(8, 22, 46, 0.7);
    z-index: 9;
}

.blog-intro-overlay {
    height: 100%;
    width: 100%;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background-color: rgba(8, 22, 46, 0.3);
    z-index: 9;
}

.author-sec {
    /* 1px top and bottom, 0 left and right */
    border-top: 1px solid #c7c7c7;
    border-bottom: 1px solid #c7c7c7;
    padding: 14px 0;

}

.author-sec b {
    font-size: 16px;
    color: var(--theme-color-dark);
    font-weight: 700;
}

.author-img {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    outline: 1px solid #d7d7d7 !important;
    outline-offset: 1px;
}

.author-data {
    flex: 1;
    padding: 15px;
    background-color: #f3f3f3;
    border-radius: 6px;
}

.author-data small {
    display: block;
    font-size: 12px;
    font-weight: 500;
}

.inner-banner .basic-overlay {
    background-color: rgba(8, 22, 46, 0.7);
    height: 100%;
}

.inner-banner .banner-contents {
    max-width: 960px;
    margin: 0 auto;
}

.intro-page-image {
    max-width: 960px;
    margin: 0 auto;
    border-radius: 15px;
    margin-top: -200px;
}

.inner-banner .type-text {
    margin-top: 15px;
}

.bold-des {
    max-width: 960px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 20px;
}

.bold-des p {
    font-weight: 500;
}

/* .compact-layout {
    max-width: 960px;
    margin-left: auto;
    margin-right: auto;
} */

.sm-des p {
    font-size: 15px;
    line-height: 22px;
    text-align: justify;
}

.about-intro-container {
    padding-left: 0;
}

/* services */
.type-text .naked-btn {
    vertical-align: middle;
}

.inner-banner {
    position: relative;
    height: calc(100vh - var(--header-height));
}

.archive-info {
    text-align: right;
    width: 100px;
}

.archive-info .indexer {
    display: block;
    margin: 0;
}

.service-page-icon {
    -webkit-filter: invert(100%);
    filter: invert(100%);
    max-width: 60px;
}

.inverted-icon {
    -webkit-filter: invert(100%);
    filter: invert(1);
}

.line-clamp {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
}


.clamp-1 {
    -webkit-line-clamp: 1;
}

.clamp-2 {
    -webkit-line-clamp: 2;
}

.clamp-3 {
    -webkit-line-clamp: 3;
}

.archive-contents {
    padding-left: 40px;
}

.archive-info-in {
    position: sticky;
    top: 72px;
}

.service-main-image {
    /* height: 350px; */
    aspect-ratio: 5/3;

    border-radius: 15px;
}

.icon-only {
    position: relative;
    top: auto;
}

.icon-only .service-page-icon {
    filter: none;
    max-width: 40px;
}

.services-actions .common-btn-2 {
    margin-left: 20px;
}

.service-main-details .archive-contents {
    padding-left: 20px;
}

.other-service {
    margin-top: 20px;
}

.other-service h4 {
    font-size: 16px;
    font-weight: 700;
    color: var(--theme-color-dark);
    padding-left: 15px;
    flex: 1;
}

.other-service .select-service-ic {
    height: 60px;
    width: 60px;
}

.other-service .select-service-ic img {
    height: 30px;
}
/* ---------------------Statistics--------------------- */

.stats-section {
    background: #2d6cb5;
    background-image:
    repeating-linear-gradient(
        45deg,
        rgba(255,255,255,0.03) 0px,
        rgba(255,255,255,0.03) 1px,
        transparent 1px,
        transparent 20px
    ),
    repeating-linear-gradient(
        -45deg,
        rgba(255,255,255,0.03) 0px,
        rgba(255,255,255,0.03) 1px,
        transparent 1px,
        transparent 20px
    );
    padding: 60px 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 260px;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    width: 100%;
    max-width: 1100px;
}

.stat-card {
    background: rgba(255, 255, 255, 0.13);
    backdrop-filter: blur(4px);
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 16px;
    padding: 40px 24px 32px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    transition: transform 0.3s ease, background 0.3s ease;
}

.stat-card:hover {
    transform: translateY(-4px);
    background: rgba(255,255,255,0.18);
}

.stat-number {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: clamp(2.4rem, 5vw, 3.8rem);
    font-weight: 700;
    color: #ffffff;
    line-height: 1;
    letter-spacing: -1px;
}

.stat-label {
    font-size: clamp(0.78rem, 1.3vw, 0.95rem);
    font-weight: 600;
    color: rgba(255, 255, 255, 0.85);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    line-height: 1.3;
}

@media (max-width: 700px) {
    .stats-grid { grid-template-columns: repeat(2, 1fr); }
    .stats-section { padding: 40px 20px; }
}

@media (max-width: 400px) {
    .stats-grid { grid-template-columns: 1fr; }
}

/* ------------------------Services------------------------ */

 .ae1-services-section {
    background: #f5f4f0;
    overflow: hidden;
}

.services-heading-wrap {
    text-align: center;
    padding: 0 2rem;
}

.services-heading-first {
    color: var(--blue);
    font-size: 16px;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    justify-content: center;
}

.services-tagline {
    font-weight: 600;
    font-size: 32px;
    text-align: center;
    color: #111;
    margin-bottom: 1rem;
    line-height: 1.4;
}

.services-layout {
    display: block;       
    width: 100%;
    padding: 30px 0 0;    
    overflow: visible;
}

.services-desc {
    font-size: 0.9rem;
    color: #666;
    line-height: 1.6;
}

.services-scroll-wrapper {
    display: block;
    width: 100%;
    overflow: visible;
}

.services-right {
    display: flex;
    flex-direction: column;
    width: 100%;          
    overflow: visible;
}

.services-cards-track {
    display: flex;
    flex-direction: row;
    gap: 50px;
    overflow-x: auto;
    overflow-y: visible;
    scroll-snap-type: x mandatory;
    padding: 40px 0;      
    width: 100%;          
    scroll-behavior: smooth;
}

.services-cards-track::-webkit-scrollbar {
    display: none;
}

/* Each card */
.services-card-wrap {
    flex: 0 0 320px;
    scroll-snap-align: center;
    position: relative;
    transition: transform 0.4s ease;
}

.services-card-wrap:hover {
    transform: translateY(0) scale(1.05);
}

/* Card size */
.services-card-inner {
    height: 500px;
    border-radius: 20px;
    overflow: hidden;
}

.services-card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}

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

/* Dark gradient overlay */
.services-card-inner::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.65) 0%, transparent 55%);
    border-radius: 1.25rem;
    pointer-events: none;
}

/* Title label */
.services-card-label {
    position: absolute;
    bottom: 1.5rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    display: flex;
    align-items: flex-start;
    gap: 0.2rem;
    color: #fff;
    white-space: nowrap;
}

.services-card-name {
    font-size: 0.9rem;
    font-weight: 400;
    letter-spacing: 0.01em;
}

.services-card-sup {
    font-size: 0.6rem;
    font-weight: 600;
    margin-top: 0.35rem;
    opacity: 0.85;
}

/* Dots */
.ae1-scroll-dots {
    display: flex;
    justify-content: center;
    gap: 0.6rem;
    align-items: center;
}

.ae1-scroll-dots span {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: #ccc;
    transition: all 0.3s ease;
    cursor: pointer;
}

.ae1-scroll-dots span.active {
    width: 20px;
    border-radius: 3px;
    background-color: var(--blue);
}

/* Nav */
.ae1-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-top: 3.5rem;
}

.ae1-arrow {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    background: var(--blue);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

.ae1-arrow:hover {
    background: #000;
    transform: scale(1.1);
}

/* Also override Bootstrap container inside this section */
#services-section .container {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    overflow: visible;
}

#services-section .ae1-section {
    overflow: visible;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

#services-section {
    overflow-x: hidden;
    overflow-y: visible;
}

/* Mobile */
@media (max-width: 992px) {
    #services-section.bg-light.pad-top {
        padding-top: 1rem !important;
    }

    .services-heading-wrap {
        padding: 1.5rem 1.25rem 0;
        margin-bottom: 1rem;
    }

    .services-layout {
        padding: 0;
    }

    .services-cards-track {
        gap: 30px;
        width: 100%;
        padding: 20px 0;
    }

    .services-card-wrap {
        flex: 0 0 260px;
    }

    .services-card-inner {
        height: 400px;
    }

    .services-card-label {
        font-size: 0.8rem;
    }

    .services-card-name {
        font-size: 0.8rem;
    }

    .ae1-nav {
        gap: 3rem;
        margin-top: 2.5rem;
        margin-left: 0;
    }

    .ae1-nav {
        gap: 10px;
    }
}

/* contact */
.contact-main {
    box-shadow: 0 0 10px #ddd;
}

.contact-form {
    padding: 30px 45px;
    padding-right: 30px;
}

.common-label {
    color: var(--theme-color-dark);
    font-weight: 600;
    font-size: 14px;
    margin-bottom: 5px;
}

.attachment-group p {
    font-size: 14px;
    margin-bottom: 8px;
}

.attachment-group span {
    color: var(--theme-color-dark);
    font-size: 14px;
    margin-top: 10px;
    font-weight: 500;
}

.long-form {
    background-color: #fff;
    border-radius: 16px;
    margin-top: 30px;
}

.contact-data small {
    display: block;
    font-size: 12px;
    font-weight: 700;
    color: var(--theme-color);
}

.contact-data a {
    font-size: 20px;
    font-weight: 700;
    color: var(--theme-color-dark);
}

.contact-icon {
    height: 60px;
    width: 60px;
    background-color: #f3f3f3;
    border-radius: 6px;
}

.new-contact-info {
    margin-top: 20px;
}

.contact-data {
    padding-left: 15px;
    padding-top: 5px;
}

.contact-map iframe {
    width: 100%;
    height: 250px;
}

.long-numbers .contact-icon {
    margin-right: 10px;
    margin-bottom: 10px;
}

.long-numbers {
    flex-wrap: wrap;
}

.service-details .img-container::after {
    content: unset;
}

/* our clients section  */
.sect-clients {
    padding: 70px 0;
}

.sect-clients:nth-child(even) {
    background-color: #e7f1f8;
}

.sect-clients .client-img {
    aspect-ratio: 4/3;
}

.sticky-wrapper {
    position: sticky;
    position: -webkit-sticky;
    top: 15px;
}

.sect-clients .client-img img {
    height: 100%;
    width: 100%;
    object-fit: contain;
    border-radius: 6px;
}

.sect-clients .client-desc .client-category {
    font-weight: 700;
    font-size: 14px;
    color: #0e76bc;
}

.sect-clients .client-desc .client-name {
    font-weight: 800;
    font-size: 32px;
    margin-top: 0.5rem;
}

.sect-clients .client-desc p {
    font-weight: 400;
    color: #55656e;
    margin: 1rem auto;
}

.sect-clients .client-desc a {
    font-weight: 700;
    color: #ff9c00;
}

.sect-clients .client-desc svg {
    transition: all 600ms ease;
}

.sect-clients .client-desc a:hover svg {
    margin-left: 0.5rem !important;
}


/* new service ribbon homepage */
@media(min-width: 1200px) {
    .service-ribboned {
        min-width: 400px;
    }
}

.service-ribboned {
    position: relative;
    height: 80px;
    overflow: hidden;
    border-radius: 100px;
    background-color: #495F84;
    color: #fff;
    display: flex;
    align-items: center;
}

.service-ribboned .s-title {
    font-weight: 600;
    font-size: clamp(0.95rem, 1rem + 0.5vw, 1rem);
    text-transform: uppercase;
    line-height: 1.4;
    width: 100%;
    padding-right: 5rem;
    padding-left: 1.5rem;
}

.service-col a {
    display: inline;
}

.service-counter {
    position: absolute;
    right: 0;
    top: 0;
    font-size: 22px;
    width: 80px;
    height: 80px;
    border: 8px solid #3FC7EE;
    border-radius: 50%;
    background-color: #fff;
    color: #000;
    font-weight: 600;
    display: inline-flex;
    margin-left: auto;
    justify-content: center;
    align-items: center;
}


.ribbon-index-left .service-counter {
    right: unset;
    left: 0 !important;
}

.ribbon-index-left .s-title {
    padding-right: 1rem;
    padding-left: 6rem;
    left: 0 !important;

}


@media(max-width: 992px) {

    /* mobile view  */
    .service-col-mobile a:nth-of-type(even) .service-counter {
        right: unset;
        left: 0 !important;
    }


    .service-col-mobile a:nth-of-type(even) .service-counter {
        right: unset;
        left: 0 !important;
    }

    .service-col-mobile a:nth-of-type(even) .s-title {
        padding-right: 1rem;
        padding-left: 6rem;
        left: 0 !important;
    }
}


/* client firm homepage tooltips */
.firm-logo-btn {
    position: relative;
    width: 146px;
    height: 64px;
    border-radius: 60px;
    overflow: hidden;
    padding: 15px;
    border: 1px solid #D2D2D2;
}

.firm-logo-btn:hover {
    border: 1px solid var(--blue);
}

.firm-logo-btn img {
    object-fit: contain;
    width: 100%;
    height: 100%;
    opacity: 0.8;
    filter: grayscale(1)
}

.firm-logo-btn img {
    object-fit: contain;
    width: 100%;
    height: 100%;
    opacity: 0.8;
    filter: grayscale(1)
}

.firm-logo-btn:hover img {
    opacity: 1;
    filter: grayscale(0)
}

.tooltip-inner {
    background-color: #fff !important;
    border: 1px solid #c7c7c7 !important;
    color: #333;
    border-radius: 4px;
    min-width: 200px;
    padding: 0.85rem;
    text-align: left;
}

.tooltip-arrow::before {
    border-top-color: #c7c7c7 !important;
}

.firm-flag {
    width: 100%;
    min-width: 20px;
    max-width: 30px;
}


@media (min-width: 992px) {

    /*even-numbered section img and desc */
    .sect-clients:nth-child(even) .orderImg {
        order: 2;
    }


    .sect-clients:nth-child(even) .orderDesc {
        order: 1;
    }


    /* .sect-clients:nth-child(odd) .orderImg {
        order: 1;
    }

    .sect-clients:nth-child(even) .orderDesc {
        order: 1;
    } */

    .why-us .icon {
        position: absolute;
        left: 50%;
        top: 0;
        transform: translate(-50%, -50%);
        background-color: var(--blue);
        border: 1px solid #c7c7c7;
        padding: 14px;
        border-radius: 50%;
    }
}

/* //reviews section  */
.sect-reviews .reviews {
    position: relative;
    text-align: center;
    border: 1px solid #dddddd;
    border-radius: 8px;
    padding: 0 22px 20px 22px;
}

.sect-reviews .review-avatar {
    position: absolute;
    left: 50%;
    top: -50px;
    transform: translateX(-50%);
    width: 85px;
    height: 85px;
}

.sect-reviews .review-avatar::after {
    position: absolute;
    bottom: -6px;
    left: 50%;
    transform: translate(-50%);
    content: "";
    width: 100%;
    min-width: 91px;
    height: 100%;
    min-height: 91px;
    border-radius: 50%;
    background-color: #0e76bc;
    z-index: -1;
}

.sect-reviews .review-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    position: relative;
    z-index: 111;
}

.sect-reviews .review-content {
    padding-top: 3.7rem;
}

.sect-reviews .review-content h6 {
    font-size: 18px;
    font-weight: 700;
}

.sect-reviews .review-icons i {
    color: #ff9c00;
}

.sect-reviews .reviews-text {
    margin-top: 21px;
    font-family: "Montserrat";
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    text-align: center;
    color: #55656e;
}

.sect-reviews .reviews-text span {
    color: #1877f2;
    font-weight: 500;
    cursor: pointer;
}

.sect-reviews .modal-header .close {
    font-size: 20px;
    cursor: pointer;
}

.sect-reviews .reviewsIn {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 1rem;
}

.sect-reviews .reviewsIn i {
    color: #1877f2;
    font-size: 22px;
}

.sect-reviews .reviewsIn span {
    color: #969696;
    font-size: 14px;
    font-weight: 500;
}

.sect-reviews .see-all-reviews a {
    padding: 12px 28px;
    font-family: "Montserrat";
    font-weight: 700;
    font-size: 14px;
    text-decoration: none;
    text-align: center;
    background: #ffffff;
    text-transform: uppercase;
    color: #ff9c00;
    border: 1px solid #ff9c00;
    border-radius: 40px;
    transition: all 600ms ease;
}

.sect-reviews .see-all-reviews a:hover {
    background-color: #ff9c00;
    color: #fff;
}

body.modal-open {
    overflow: hidden !important;
}

/* end google reviews */

.home-tes-ic i {
    font-size: 110px;
    color: #fff;
    opacity: 0.2;
}

.quote-request-form-intro {
    background-color: var(--);
}

.quote-request-form-intro h2 {
    font-size: 1.2rem;
}

.quote-request-form-intro p {
    color: var(--blue);
    font-size: 1rem;
}

.action-form-in {
    box-shadow: rgba(0, 0, 0, 0.15) 0px 5px 15px 0px;
}

.action-close {
    position: absolute;
    font-size: 50px;
    color: #fff;
    right: 15px;
    top: 3px;
}

.budget-input-col {
    background-color: #f3f3f6;
    border-radius: 6px !important;
}

@media (min-width: 1024px) {
    .budget-input-col .w-20 {
        width: 20%;
        flex-shrink: 0;
    }
}

@media (max-width: 600px) {
    .budget-input-col .w-20 {
        width: 30%;
        flex-shrink: 0;
    }
}

.action-form-div {
    padding: 30px 15px;
}

.stylish-radios {
    margin-bottom: 30px;
}

.stylish-radios {
    scrollbar-width: 10px;
    scrollbar-color: #888 #f1f1f1;
}

.stylish-radios::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.stylish-radios::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 5px;
}

.stylish-radios::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* Firefox */
.stylish-radios {
    scrollbar-width: thin;
    scrollbar-color: #888 #f1f1f1;
}

.select-service {
    padding: 0 15px;
    /* flex: 1; */
    text-align: center;
}

.select-service:hover .select-service-ic {
    cursor: pointer;
    background-color: #ff9d00a9;
}

.select-service-ic {
    position: relative;
    overflow: hidden;
    width: 100px;
    height: 100px;
    border-radius: 8px;
    background-color: #f3f3f6;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.select-service-ic img {
    height: 50px;
    -webkit-filter: invert(0.8);
    filter: invert(0.8);
}

.custom-radio:checked+.select-service-ic {
    background-color: #ff9d00a9
}

.custom-radio {
    display: none;
}

.custom-modal-close {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 35px;
    height: 35px;
    top: -15px;
    right: -15px;
    background: #fff;
    border: none;
    color: red;
    border-radius: 50%;
    font-weight: 600;
    z-index: 111;
    font-size: 16px;
    transition: all 600ms ease-in-out;
}

.custom-modal-close:hover {
    background-color: #000;
    color: #fff;
}

.modal-close-timer {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 35px;
    height: 35px;
    top: -15px;
    right: -15px;
    background: #fff;
    border: none;
    color: red;
    border-radius: 50%;
    font-weight: 600;
    z-index: 111;
    font-size: 16px;
    transition: all 600ms ease-in-out;

}

.modal-close-timer:hover {
    color: rgb(196, 7, 7);
}

.select-service h4 {
    font-size: 14px;
    font-weight: 700;
    color: var(--theme-color-dark);
    margin-top: 10px;
    line-height: 18px;
}

.action-actions {
    padding-top: 10px;
}

.action-success {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #fff;
    z-index: 1;
}

.list-group-image {
    width: 60px;
    height: 60px;
}

.image-frame {
    height: 100%;
}

@media screen and (max-width: 1200px) {
    .heading-ultra {
        font-size: 32px;
    }

    .heading-large {
        font-size: 38px;
    }

    .home-intro-contents {
        padding-right: 7%;
    }

    .services-home-wrap {
        background-position-y: 20px;
        background-color: var(--theme-color-dark);
    }
}

@media only screen and (max-width: 992px) and (min-width: 400px) {
    .landing-bg .caption {
        justify-content: start !important;
        padding: 3rem 1rem;
        max-width: 500px;
    }

    .landing-bg .caption .heading {
        font-size: 28px !important;
    }
}

@media screen and (max-width: 400px) {
    .landing-bg .caption .heading {
        font-size: 28px !important;
    }
}

/* ROJESH */
@media screen and (max-width: 576px){
    .inner-banner{
        height: 60vh;
    }
}

@media screen and (max-width: 992px) {
    .landing-bg {
        height: 70vh !important;
        background-size: contain !important;
        background-position: bottom !important;
    }

    .inner-banner {
        height: 70vh;
    }

    .inner-banner .caption {
        justify-content: end !important;
        padding-bottom: 2rem !important;
    }

    .blog-intro-banner .caption {
        align-items: end !important;
        padding-bottom: 2rem !important;
    }

    .step-in {
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
        padding: 0 15px;
    }

    .heading-ultra {
        font-size: 36px;
    }

    .pad-top {
        padding-top: 60px;
    }

    .pad-bot {
        padding-bottom: 60px;
    }

    .gutter-bot-md {
        margin-bottom: 30px;
    }

    .gutter-top-md {
        margin-top: 30px;
    }

    .why-section {
        margin-top: 1.5rem !important;
    }

    .why-us .icon {
        position: relative;
    }

    .m-flex {
        display: flex;
        justify-content: start;
        align-items: center;
    }

    .m-flex .icon {
        flex-shrink: 0;
        background-color: var(--blue);
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
    }

    .services-intro {
        order: 0;
        margin-bottom: 30px;
    }

    .services-left {
        order: 1;
        padding-right: 15px;
    }

    .intro-top {
        max-width: 720px;
        margin: 0 auto;
        padding: 0 15px;
    }

    .home-intro-image .img-container {
        max-height: 400px;
        border-radius: 6px;
    }

    .home-intro-image .img-container img {
        object-position: bottom;
    }

    .home-intro-contents {
        padding-right: 15px;
    }

    .home-intro-image {
        padding-right: 15px;
    }

    .services-home-wrap {
        background-color: var(--theme-color-dark);
    }

    .services-right {
        padding-left: 15px;
    }

    .steps-header {
        flex-direction: column;
    }

    .steps-header .heading-large {
        width: 100%;
    }

    .footer-bottom .row>div:first-child {
        margin-bottom: 40px;
    }

    .about-intro-image {
        object-position: top !important;
    }
}

@media screen and (max-width: 768px) {
    .heading-ultra {
        font-size: 40px;
    }

    .home-intro-image {
        padding-right: 0;
    }

    .home-intro-contents {
        padding-left: 30px;
        padding-right: 30px;
    }

    .services-intro {
        order: 0;
        padding: 0 15px;
        margin-bottom: 0;
    }

    .services-left {
        order: 1;
        padding-right: 15px;
    }

    .home-service .indexer {
        display: none;
    }

    .services-left,
    .services-right {
        text-align: center;
    }

    .services-left .home-service-icon,
    .services-right .home-service-icon {
        justify-content: center;
        margin-bottom: 20px;
    }

    .services-right {
        padding-left: 15px;
    }

    .home-service {
        margin-bottom: 40px !important;
    }

    .service-titles {
        margin-bottom: 40px;
    }

    .home-tes-ic {
        position: relative;
        top: auto;
        left: auto;
        margin-bottom: 30px;
        padding-left: 10px;
    }

    .home-tes-ic i {
        font-size: 100px;
    }

    .tes-row {
        flex-direction: column;
    }

    #owl-tes {
        padding-left: 0;
    }

    .tes-img-wrap {
        margin-top: 40px;
        margin-left: 15px;
    }

    .step-in {
        -ms-flex: 0 0 100%;
        flex: 0 0 100 !important;
        max-width: 100%;
    }

    .step-overview p {
        font-size: 16px;
        line-height: 22px;
    }

    .stylish-radios {
        overflow-x: scroll;
        padding-bottom: 10px;
    }

    .service-main-image {
        /* height: 280px; */
    }

    .services-actions .common-btn-2 {
        margin-top: 15px;
        margin-left: 0;
    }

    .blog-col .img-container {
        height: 300px;
    }

    .logo-img {
        max-width: 175px;
    }

    .step-info {
        width: 90px;
        height: 90px;
    }

    .step-info .step-ic-wrap img {
        max-width: 30px;
        width: 30px;
    }

    .why-us .icon {
        width: 40px !important;
        height: 40px !important;
    }

    .why-us .icon img {
        padding: 4px;

    }

    .step-info .indexer {
        top: -10px;
    }

}

@media screen and (max-width: 575px) {
    .heading-ultra {
        font-size: 38px;
    }

    .heading-large {
        font-size: 34px;
    }

    .content-banner .banner-contents .heading-large {
        line-height: 44px;
    }

    .col-title-md {
        line-height: 22px;
    }

    .logo-img {
        max-width: 150px;
    }

    .header-socials {
        padding: 6px 0;
    }

    .header-navs {
        margin-top: 0;
        margin-bottom: -8px;
    }

    .quick-call,
    .link-btn {
        display: none;
    }

    .mobile-menu-btn svg {
        width: 30px;
    }

    .home-banner {
        height: 500px;
    }

    .home-banner .banner-overlay {
        padding-bottom: 70px;
    }

    .banner-text {
        padding-left: 0;
        font-size: 15px;
    }

    .home-banner .heading-ultra {
        font-size: 30px;
    }

    .co-mis-navs {
        width: 75px;
    }

    .co-mis-navs a {
        font-size: 18px;
    }

    .co-mis-tabs {
        padding-left: 20px;
    }

    .co-mis-navs::after {
        width: 6px;
        right: -20px;
    }

    .co-mis-navs .active {
        color: var(--theme-color-2);
    }

    .co-mis-navs .active::before {
        content: unset;
    }

    .co-mis-navs .nav {
        position: sticky;
        top: 30px;
    }

    .aff-actions {
        text-align: center;
    }

    .aff-actions-in {
        height: 300px;
        margin-top: 30px;
    }

    .footer-top-contents {
        flex-direction: column;
    }

    .footer-contents {
        padding-left: 0;
        margin-top: 30px;
    }

    .footer-form {
        margin-top: 40px;
    }

    .social-titles {
        padding-right: 10px;
    }

    .extra-section {
        height: 420px;
    }

    .footer-bottom .row>div {
        margin-bottom: 40px;
    }

    .footer-bottom .row>div:last-child {
        margin: 0;
    }

    .why-contents {
        background-color: #fff;
        padding: 10px 15px;
    }

    .why-extra-in {
        margin-top: 40px;
        padding: 0 15px;
    }

    .why-home-sec {
        margin-top: -254px;
    }

    .services-home-wrap {
        background-position-y: 0;
    }

    .extra-section .heading-large {
        font-size: 26px;
        line-height: 34px;
    }

    .why-col {
        padding-right: 15px;
    }

    .why-contents {
        background-color: #fff;
        padding: 10px 15px;
        border-top-left-radius: 30px;
        border-top-right-radius: 30px;
    }

    .footer-socials {
        display: block !important;
    }

    .social-titles {
        padding-right: 0;
        padding-bottom: 15px;
        margin-bottom: 20px;
    }

    .social-titles::after {
        left: 0;
        top: auto;
        bottom: 0;
        height: 5px;
        width: 80px;
    }

    .social-links {
        padding-left: 0;
    }

    .heading-footer {
        font-size: 22px;
    }

    .intro-page-image {
        height: auto;
        margin-top: -100px;
    }

    .archive-info,
    .blog-archive .date-year {
        width: 50px;
    }

    .archive-info .indexer {
        font-size: 40px;
    }

    .service-page-icon {
        height: 40px;
    }

    .archive-contents {
        padding-left: 15px;
        flex: 1;
    }

    /* .service-main-image {
        /* height: 220px; */
    } */

    .action-form-div {
        padding: 30px 5px;
    }

    .service-main-details .archive-info {
        display: none;
    }

    .service-main-details .archive-contents {
        padding-left: 0;
    }

    .service-banner {
        height: 350px;
    }

    .other-services {
        padding-left: 0;
        margin-top: 0;
    }

    .extra-heading,
    .col-title,
    .col-title-md {
        font-size: 16px;
    }

    .blog-col .img-container {
        height: 250px;
        border-radius: 10px;
    }

    .big-date {
        font-size: 18px;
        line-height: 26px;
    }

    .blogs-row {
        padding-left: 15px;
    }

    .blogs-row .row>div:nth-child(2) {
        margin-top: 30px;
    }

    .blog-overview {
        padding: 0 10px;
    }

    .blog-col-top {
        padding-left: 75px;
    }

    .contact-map {
        margin-top: 50px;
    }

    .long-form {
        background-color: #fff;
        padding: 30px 15px;
        border-radius: 16px;
        margin-top: 30px;
    }



@media screen and (max-width: 360px) {
    body {
        overflow-x: scroll !important;
        min-width: 360px;
    }
}

/* New Integration  */

/* **********************************Navbar******************************* */

/* HOME PAGE */

/* navbar */
.navbar {
    background-color: var(--white);
}

.navbar .navbar-toggler {
    border: 0;
    background-color: var(--blue);
    padding: 0.81rem 1rem;
    box-shadow: none;
}

.navbar .navbar-toggler i {
    font-size: 1.3rem;
    color: #fff;
}

.navbar .container-fluid {
    align-items: start;
}

.top-nav {
    background-color: var(--blue);
    padding-left: 300px;
}

.top-nav .nav-link {
    color: var(--white);
    font-size: 13.2px;
}

.top-nav .socials .nav-link {
    font-size: 16px;
}

.top-nav .socials {
    background-color: var(--orange);
    width: 0;
    height: 0;
    border-top: 25px solid transparent;
    border-left: 50px solid var(--blue);
    border-bottom: 25px solid transparent;
    border-right: 190px solid transparent;
}

.top-nav .socials .nav-link:hover {
    color: var(--dark-blue);
}

.fixed-header {
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 99;
}

.logo-wrapper {
    text-align: center;
    /* width: 300px; */
    width: fit-content;
}

.logo-position {
    background-color: var(--white);
}

.fixed-header .logo-position {
    background-color: transparent;
    position: relative;
    top: auto;
    padding-top: 10px;
}

.blog-intro-container .blog-topic-custom li {
    color: var(--dark-blue);
}

.blog-intro-container .blog-topic-custom li:not(:last-child):before {
    background-color: var(--dark-blue);
}

.logo-img {
    max-width: 150px;
    object-fit: contain;
}

.foot-logo-img {
    max-width: 200px
}

.fixed-header .logo-img {
    max-width: 160px;
}

.bottom-nav {
    padding-left: 300px;
}

.fixed-header .bottom-nav {
    position: absolute;
    top: 0;
    background-color: var(--white);
    width: 100%;
    border-bottom: 2px solid var(--background-grey);
    transition: 0.5s;
}

.bottom-nav .nav-link {
    text-transform: uppercase;
    font-weight: 600;
    color: var(--black-font);
    transition: none;
    position: relative;
    white-space: nowrap;
}

.bottom-nav .nav-item.active a,
.bottom-nav .nav-link:hover {
    color: var(--orange);
}

.bottom-nav .nav-link-ltr:after {
    content: "";
    height: 4px;
    width: 0px;
    background: var(--orange);
    box-shadow: 0px 0px 0px var(--orange);
    position: absolute;
    bottom: -17px;
    /* bottom: -22px; */
    right: 0%;
    transition: 0.5s;
}
.bottom-nav .nav-link-ltr:hover:after {
    width: 100%;
    left: 0%;
}
.bottom-nav>.nav-item>.nav-link-ltr:after {
    content: "";
    height: 2px;
    width: 0px;
    background: var(--orange);
    box-shadow: 0px 0px 0px var(--orange);
    position: absolute;
    /* bottom: -17px; */
    bottom: 0px;
    right: 0%;
    transition: 0.5s;
}

.bottom-nav>.nav-item>.nav-link-ltr:hover:after {
    width: 100%;
    left: 0%;
}
/* ROJESH */
@media (min-width: 992px){
    .bottom-nav>.nav-item>.nav-link-ltr:after{
        bottom: -17px !important;
        height: 4px;
    }
}
.bottom-nav .btn {
    box-shadow: inset 0 0 0 0 var(--blue);
    transition: ease-out 0.5s;
    background-color: var(--blue);
    color: var(--white);
}

.bottom-nav .nav-link.btn:hover {
    box-shadow: inset 300px 0 0 0 var(--blue);
    color: var(--white);
}

/* *******************************Banner ***************************** */
.landing-bg {
    background-color: #050e1f;
    overflow: hidden;
    /* height: calc(100vh - calc(var(--header-height) - 22px)); */
    height: 70vh;
    position: relative;
}

.section-bg-img {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center right
}

.bg-image {
    width: 573px;
    height: 573px;
    border-radius: 50%;
}

.landing-bg .caption {
    position: absolute;
    top: 0;
    color: var(--white);
    z-index: 1;
    width: 730px;

    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
}

.landing-bg .caption .heading {
    font-size: 48px;
    font-weight: 800;
}

.heading-inner-page {
    font-size: clamp(1.5rem, 1.5rem + 0.7407vw, 2rem);
    font-weight: 800;
}

/* ****************************Why Us**********************8 */
.why-section {
    position: relative;
    margin-top: -23px;
    z-index: 1;
}

.attraction {
    transition: all 0.3s ease;
    border-radius: 12px;
}

.attraction:hover {
    transform: translateY(-8px);
    box-shadow: rgba(0, 0, 0, 0.15) 0px 10px 25px;
}

.why-section .why-us-col {
    position: relative;
}

.why-us .box {
    display: flex;
    justify-content: start;
    align-items: start;
    padding: 40px 16px 16px !important;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
    border-radius: 8px;
    background-color: var(--white);
}

.attraction {
    display: flex;
    justify-content: start;
    align-items: start
}

.why-us .icon img {
    width: 35px;
    max-width: 35px;
    height: 35px;
}

.why-us .why-us-col:hover .icon {
    background-color: var(--orange);
}

.why-us .text p {
    margin-bottom: 0;
}

.why-us .text .heading {
    font-size: 15px;
}

.why-us .text .main-why {
    font-size: 14px;
}

/* about us section */

.about-us-section {
    overflow: hidden;
}

.about-us-section .img-container {
    aspect-ratio: 5/4;
    position: relative;
    overflow: hidden;
    border-radius: 8px;
}

.about-us-section .body .justify {
    text-align: justify;
    line-height: 28px;
}

/* services section */

.services-section .box {
    /* border: 1px solid var(--grey); */
    border-radius: 8px;
    box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px,
        rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;
    transition: 600ms;
}

.services-section .box:hover {
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px 0px;
}

.services-section .img-container {
    aspect-ratio: 1;
    overflow: hidden;
    position: relative;
    border-radius: 8px;
}

.services-section .img-container .img-fitted {
    transition: 0.5s ease-in-out;
}

.services-section .link {
    text-decoration: none;
}

.services-section .item:hover .read-more {
    color: var(--orange);
    transition: 0.2s;
}

.services-section .item:hover img {
    transform: scale(1.05);
}

.services-section .ribbon {
    position: relative;
}

.services-section .ribbon .ribbon1 {
    position: absolute;
    width: 80px;
    height: 80px;
    background: var(--blue);
    bottom: -19px;
    left: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 4px 4px 0 0;
}

.services-section .ribbon .ribbon1 svg {
    fill: var(--white);
}

.services-section .ribbon .ribbon1:before {
    content: "";
    position: absolute;
    bottom: 0;
    left: -9px;
    border-left: 5px solid transparent;
    border-right: 5px solid var(--blue);
    border-top: 10px solid var(--blue);
    border-bottom: 10px solid transparent;
}

.services-section .ribbon .ribbon1:after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 80px;
    border-left: 5px solid var(--blue);
    border-right: 5px solid transparent;
    border-top: 10px solid var(--blue);
    border-bottom: 10px solid transparent;
}

.services-section .item :hover .ribbon1 {
    background: var(--orange);
    transition: 0.2s;
}

.services-section .item :hover .ribbon1:before {
    border-right: 5px solid var(--orange);
    border-top: 10px solid var(--orange);
    transition: 0.2s;
}

.services-section .item :hover .ribbon1:after {
    border-left: 5px solid var(--orange);
    border-top: 10px solid var(--orange);
    transition: 0.2s;
}

.services-section svg {
    width: 60px;
}

.services-section .text .body {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

@media (max-width: 992px){
    .body .btn {
    display: inline-flex;
    width: auto;
    font-size: 15px;
}
}

/*------------------About us page ------------------*/

.wcu-section { 
    padding: 4rem 0 6rem; 
    background: #f7f7f7b7;
}

.wcu-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25rem;
}
@media (max-width: 991px) { .wcu-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575px)  { .wcu-grid { grid-template-columns: 1fr; } }

.wcu-card {
    background: #fff;
    border-radius: 16px;
    padding: 1.75rem 1.5rem;
    border: 1px solid rgba(0,0,0,0.07);
    cursor: pointer;
    transition: box-shadow 0.35s ease, transform 0.35s ease;
    position: relative;
}
.wcu-card:hover {
    box-shadow: 0 20px 50px rgba(0,0,0,0.10);
    transform: translateY(-4px);
}

/* Number badge */
.wcu-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: #e8f0fe;
    color: #0d6efd;
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 1.25rem;
    transition: background 0.3s, color 0.3s;
}
.wcu-card:hover .wcu-number,
.wcu-card.active .wcu-number {
    background: #0d6efd;
    color: #fff;
}

/* Icon circle */
.wcu-icon-circle {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: #e8f0fe;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.25rem;
    transition: background 0.3s;
}
.wcu-icon-circle img {
    width: 38px;
    height: 38px;
    object-fit: contain;
    transition: filter 0.3s;
}
.wcu-card:hover .wcu-icon-circle,
.wcu-card.active .wcu-icon-circle { 
    background: #0d6efd; 
}
.wcu-card:hover .wcu-icon-circle img,
.wcu-card.active .wcu-icon-circle img { 
    filter: brightness(0) invert(1); 
}

/* Title — always visible */
.wcu-name {
    font-size: 16px;
    font-weight: 700;
    color: #1a1a2e;
    margin: 0 0 0.5rem 0;
}

/* ── Description drop-down ── */
.wcu-desc-wrap {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.4s ease, opacity 0.4s ease, padding 0.4s ease;
}

.wcu-card:hover .wcu-desc-wrap,
.wcu-card.active .wcu-desc-wrap {
    max-height: 200px;
    opacity: 1;
    padding-top: 0.5rem;
}

.wcu-desc {
    font-size: 13px;
    color: #666;
    line-height: 1.7;
    margin: 0;
    padding: 0.5rem 0 0 0;
    border-top: 1px solid rgba(0,0,0,0.05);
}

/* Click indicator for mobile */
@media (max-width: 768px) {
    .wcu-card::after {
        content: '▼';
        position: absolute;
        top: 1.75rem;
        right: 1.5rem;
        font-size: 10px;
        color: #0d6efd;
        transition: transform 0.3s ease;
    }
    .wcu-card.active::after {
        transform: rotate(180deg);
    }
}
/* *****************about us inner page ********************* */
/* ################################################################ */

.inner-banner {
    background-position: right;
    background-attachment: scroll;
    background-size: cover;
    background-repeat: no-repeat;
}

.inner-banner #overlay,
.blog-intro-banner #overlay {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 11;
}

.inner-banner .caption {
    height: 100%;
    max-width: 1000px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}

.blog-intro-banner .caption {
    height: 100%;
    max-width: 1000px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.inner-banner .caption .naked-btn {
    text-decoration: none;
    color: var(--white);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.02em;
    transition: 0.3s;
}

.inner-banner .caption .naked-btn:hover {
    color: var(--orange);
}

.inner-banner .caption .naked-btn .btn-icon {
    background-color: var(--orange);
    height: 40px;
    width: 40px;
    border-radius: 50%;
    margin-left: 15px;
    vertical-align: middle;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--black-font);
}

/* who we are */

.who-we-are .img-container {
    aspect-ratio: 16/10;
    overflow: hidden;
    position: relative;
    border-radius: 8px;
}

/* vision, mission and values */

.vmv .box {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 32px 24px;
    background-color: var(--dark-blue);
    border-radius: 8px;
    overflow: hidden;
}

.vmv .box .circle-top {
    background-image: linear-gradient(rgba(27, 51, 133, 1), rgba(0, 0, 0, 0));
    transform: rotate(-98deg);
    filter: blur(10px);
    opacity: 0.8;
    width: 163px;
    height: 163px;
    border-radius: 50%;
    position: absolute;
    top: -51px;
    left: -69px;
}

.vmv .box .circle-bottom {
    background-image: linear-gradient(rgba(37, 60, 140, 1), rgba(0, 0, 0, 0));
    filter: blur(10px);
    opacity: 0.5;
    width: 163px;
    height: 163px;
    border-radius: 50%;
    position: absolute;
    bottom: -25px;
    right: -27px;
}

.vmv .box .img-container {
    width: 156px;
    height: 131px;
    overflow: hidden;
}

.vmv .img-container img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.vmv .text {
    line-height: 32px;
    z-index: 1;
}

.img-contained {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* why choose us */

.why-choose-us {
    background-image: url("../images/bg-pattern.png");
    background-size: cover;
}

.why-choose-us .img-container {
    aspect-ratio: 5/4;
}

.why-choose-us .box .svg-icon {
    background-color: var(--blue);
    border-radius: 0 8px 8px 0;
    padding: 10px;
    position: absolute;
    left: -5px;
    box-shadow: -5px 0 4px rgba(0, 0, 0, 0.189);
}

.why-choose-us .text p {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ── Section wrapper ── */
.ceo-section {
    position: relative;
    padding: 5rem 0;
    overflow: hidden;
    /* vertical gradient top-to-bottom */
    background: linear-gradient(to bottom, #e8f4fd 0%, #acc2d1 50%, #5d91c2 100%);
}

/* decorative blob bottom-right */
.ceo-bg-right {
    position: absolute;
    bottom: -40px;
    right: -40px;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    background: rgba(13, 110, 253, 0.15);
    z-index: 0;
}

/* ── White card ── */
.ceo-card {
    position: relative;
    z-index: 1;
    background: #fff;
    border-radius: 20px;
    display: flex;
    align-items: stretch;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0,0,0,0.10);
}

/* ── Left: image col ── */
.ceo-image-col {
    flex: 0 0 42%;
    max-width: 42%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1.5rem;
    min-height: 420px;
}

.ceo-img {
    width: 100%;
    height: 100%;
    max-height: 400px;
    object-fit: cover;
    object-position: center center;
    display: block;
    border-radius: 12px;
}

/* ── Right: content col ── */
.ceo-content-col {
    flex: 1;
    padding: 3rem 3rem 3rem 2.5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.ceo-label {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1px;
    color: #0d6efd;
    text-transform: uppercase;
    margin-bottom: 0.5rem;
}

.ceo-title {
    font-size: 2rem;
    font-weight: 800;
    color: #1a1a2e;
    line-height: 1.2;
    margin-bottom: 1.25rem;
    text-transform: uppercase;
}

.ceo-title span {
    color: #0d6efd;
}

.ceo-divider {
    width: 50px;
    height: 3px;
    background: #0d6efd;
    border-radius: 2px;
    margin-bottom: 1.25rem;
}

.ceo-text {
    font-size: 14px;
    color: #555;
    line-height: 1.8;
    text-align: justify;
}

/* ── Responsive ── */
@media (max-width: 768px) {
    .ceo-card {
        flex-direction: column;
    }
    .ceo-image-col {
        flex: none;
        max-width: 100%;
        height: 280px;
    }
    .ceo-content-col {
        padding: 2rem 1.5rem;
    }
    .ceo-title {
        font-size: 1.5rem;
    }
}

/* expert talk  */
.expert-talk {
    background-size: cover;
    background-attachment: fixed;
}

.expert-talk #overlay {
    display: block;
    width: 100%;
    height: 40%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    /* opacity: 0.2; */
    z-index: 0;
}

.expert-talk .caption {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;

    color: var(--white);
}

/* blog section */
.blog-section .link {
    text-decoration: none;
    color: var(--white);
}

.blog-section .img-container {
    aspect-ratio: 5/4;
    position: relative;
    border-radius: 6px;
}

@media (max-width: 1300px) {
    .landing-bg .caption .heading {
        font-size: 32px;
    }
}

@media (max-width: 600px) {
    .landing-bg .caption .heading {
        font-size: 32px;
    }

    .blog-section .img-container,
    .blog-section .blog-img {
        aspect-ratio: 5/4;
    }

    .blog-intro-banner {
        position: relative;
        height: 70vh;
    }

    .blog-intro-container h1 {
        font-size: 22px;
    }

    .inner-banner .caption h1,
    .blog-intro-banner .caption h1 {
        font-size: 24px;
    }

    .portfolio-carousel.owl-theme .owl-dots {
        max-width: 100%;
        white-space: nowrap;
        overflow: hidden;
        overflow-x: scroll;
        padding-bottom: 3px;
    }

    .select-service-ic {
        width: 60px;
        height: 60px;
    }

    .select-service-ic img {
        height: 30px;
        -webkit-filter: invert(0.8);
        filter: invert(0.8);
    }
}

.blog-section .img-container .text-block {
    position: absolute;
    bottom: 0;
    left: 0;
    background-color: var(--background-overlay);
    color: white;
    width: 100%;
    padding: 18px;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
}

.blog-section .blog-img {
    /* width: 265px;
    height: 190px; */
    aspect-ratio: 5/4;
    border-radius: 8px;
    position: relative;
    overflow: hidden;
}

.blog-section .multiple-blogs .date {
    color: var(--text-grey);
}

.blog-section .multiple-blogs .blog-text {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.blog-section .multiple-blogs .read-more:hover {
    color: var(--orange);
    transition: 0.2s;
}

/* //end of blogs  */


/* google reviews  */
.reviews .review-avatar {
    width: 50px;
    height: 50px;
    background-color: #f0f0ff;
}

.reviews .reviewer {
    font-weight: 600;
    font-size: 17px;
    text-transform: capitalize;
    color: #333;
}

.reviews .review-link,
.reviews .review-link:hover {
    color: var(--text-color);
}

.reviews .descriptions {
    text-align: justify;
}

.owl-stage-centered .owl-stage {
    display: flex
}

    .google-reviews {
        background: #fff;
    }

    .reviews-summary-bar {
        border: 1px solid #eaeaea;
        border-radius: 16px;
        padding: 20px 24px;
        box-shadow: 0 2px 10px rgba(0,0,0,0.03);
    }

    .reviews-carousel-wrapper {
        position: static;
        padding: 0 40px;
        overflow: visible;
        /* max-height: 500px; */
    }

    .owl-carousel .item {
        padding: 8px;
        /* max-height: 260px;
        height: 100%; */
    }

    .review-card {
        background: #fff;
        border: 1px solid #ececec;
        border-radius: 16px;
        padding: 20px;
        max-height: 260px;           /* fixed height so all cards match */
        display: flex;           /* flex column layout */
        flex-direction: column;
        transition: all 0.25s ease;
        box-shadow: 0 2px 8px rgba(0,0,0,0.04);
        overflow: hidden;
    }

    .review-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 6px 18px rgba(0,0,0,0.08);
    }

    .review-card p {
        margin-bottom: 8px;
        font-size: 15px;
        line-height: 1.6;
        color: #3c4043;
        /* clamp to ~4 lines */
        display: -webkit-box;
        -webkit-line-clamp: 4;
        -webkit-box-orient: vertical;
        overflow: hidden;
        flex-grow: 1;       /* take up remaining space */
    }

    .owl-theme .owl-dots {
        position: relative;
        margin-top: 15px;
        z-index: 10;             /* ✅ ensure dots are above everything */
        display: block !important;
    }

    .owl-theme .owl-dots .owl-dot {
        display: inline-block !important;
    }

    .owl-theme .owl-dots .owl-dot span {
        width: 10px;
        height: 10px;
        background: #d6d6d6;
        margin: 5px;
        display: block;
        transition: all 0.3s ease;
        border-radius: 50%;
    }

    .owl-theme .owl-dots .owl-dot.active span {
        background: #1a73e8;
        width: 24px;
        border-radius: 10px;
    }

    #gReviews {
        position: relative;
        padding-bottom: 40px; /* ← space for dots below cards */
    }

    #gReviews .owl-nav {
        display: block !important;
    }

    #gReviews .owl-nav button.owl-prev,
    #gReviews .owl-nav button.owl-next {
        position: absolute;
        top: 42%;
        transform: translateY(-50%);
        width: 42px;
        height: 42px;
        border-radius: 50% !important;
        background: white !important;
        border: 1px solid #ddd !important;
        box-shadow: 0 2px 8px rgba(0,0,0,0.08);
        z-index: 99;
        margin: 0;
    }

    #gReviews .owl-nav button.owl-prev { left: -50px; }
    #gReviews .owl-nav button.owl-next { right: -50px; }

    #gReviews .owl-nav button span {
        font-size: 28px;
        line-height: 1;
        color: #444;
    }

    .owl-prev,
    .owl-next {
        position: absolute;
        top: 45%;
        width: 42px;
        height: 42px;
        border-radius: 50%;
        background: #fff !important;
        border: 1px solid #ddd !important;
        box-shadow: 0 2px 10px rgba(0,0,0,0.08);
        display: flex !important;
        align-items: center;
        justify-content: center;
        transition: all 0.3s ease;
        z-index: 2;
    }

    .owl-prev {
        left: -10px;
    }

    .owl-next {
        right: -10px;
    }

    .owl-prev:hover,
    .owl-next:hover {
        background: #f8f9fa !important;
    }

    .owl-prev i,
    .owl-next i {
        color: #5f6368;
        font-size: 14px;
    }

    
    /* Dots */
    #gReviews .owl-dots {
        position: relative;  /* ← in normal flow, below the stage */
        text-align: center;
        margin-top: 16px;
        display: block !important;
        z-index: 10;
    }

    #gReviews .owl-dots .owl-dot {
        display: inline-block !important;
    }

    #gReviews .owl-dots .owl-dot span {
        width: 10px;
        height: 10px;
        background: #d6d6d6;
        border-radius: 50%;
        display: block;
        margin: 5px;
        transition: all 0.3s ease;
    }

    #gReviews .owl-dots .owl-dot.active span {
        background: #1a73e8;
        width: 24px;
        border-radius: 10px;
}

    /* MOBILE RESPONSIVE */
@media (max-width: 768px) {
    .google-reviews {
        padding: 30px 0;
    }

    .reviews-summary-bar {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 10px;
        padding: 16px;
        margin-bottom: 24px !important; /* reduce the mb-5 gap */
    }

    /* Google logo + Reviews label: keep horizontal */
    .reviews-summary-bar .d-flex.align-items-center.gap-2:first-child {
        flex-direction: row !important;
        align-items: center !important;
    }

    /* Rating row: number + stars + count all inline */
    .reviews-summary-bar .d-flex.align-items-center.gap-2:last-of-type {
        flex-direction: row !important;
        align-items: center !important;
        flex-wrap: wrap;
        gap: 8px !important;
    }

    .reviews-summary-bar .btn {
        width: 100%;
        text-align: center;
    }

    .reviews-carousel-wrapper {
        padding: 0 44px;
    }

    /* KEY FIX: remove fixed height on mobile so card shrinks to content */
    .review-card {
        max-height: none !important;
        height: auto !important;
        padding: 16px;
        border-radius: 14px;
    }

    .review-card p {
        font-size: 14px;
        -webkit-line-clamp: 6;
        flex-grow: 0; /* don't stretch p to fill empty space */
    }

    #gReviews .owl-nav button.owl-prev,
    #gReviews .owl-nav button.owl-next {
        display: flex !important;
        width: 34px;
        height: 34px;
    }

    #gReviews .owl-nav button.owl-prev { left: -40px; }
    #gReviews .owl-nav button.owl-next { right: -40px; }
    }

    .reviews-summary-bar > .d-flex.align-items-center.gap-3:first-child {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 8px !important;
    }

@media (max-width: 576px) {
    h2 {
        font-size: 1.4rem !important;
    }

    .reviews-summary-bar {
        padding: 14px;
        margin-bottom: 20px !important;
    }

    .reviews-carousel-wrapper {
        padding: 0 40px; 
    }

    .review-card {
        padding: 14px;
        max-height: none !important;
        height: auto !important;
    }

    #gReviews .owl-dots .owl-dot span {
        width: 10px;
        height: 10px;
        margin: 5px 3px;
    }
}

.portfolio-logo-section {
    padding-bottom: 5rem;
}

.portfolio-logo-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1.5rem 3rem;
    min-height: 180px;
    align-items: center;
    justify-items: center;
    padding: 0 2rem;
}
/* ─────────────────────────────────────────
   PREMIUM MOBILE LOGO SCROLLER
───────────────────────────────────────── */
.portfolio-logo-grid-mobile {
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    padding: 1rem 1.25rem 1.5rem;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.portfolio-logo-grid-mobile::-webkit-scrollbar {
    display: none;
}


/* LOGO ITEM */
.portfolio-logo-item {
    flex: 0 0 auto;
    width: 150px;
    height: 100px;
    scroll-snap-align: center;

    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    box-shadow: none;

    transition: transform 0.25s ease;
}
/* IMAGE */
.portfolio-logo-item img {
    width: 150px;
    height: 100px;
    object-fit: contain;
    filter: grayscale(40%);
    /* transition: filter 0.3s ease, transform 0.25s ease; */
}

.portfolio-logo-item:active img {
    filter: grayscale(0%);
    transform: scale(1.05);
}

/* HOVER (for touch laptops) */
@media (hover: hover) {
    .portfolio-logo-item:hover {
    transform: translateY(-3px); /* subtle lift */
    }   

    .portfolio-logo-item:hover img {
        filter: grayscale(0%);
    }
}

/* SMALL DEVICES */
@media (max-width: 400px) {
    .portfolio-logo-item {
        width: 100px;
        height: 70px;
        -webkit-tap-highlight-color: transparent;

    }

    .portfolio-logo-item img {
        width: 100px;
        height: 70px;
    }

    .portfolio-logo-item:hover {
    transform: translateY(-3px); /* subtle lift */
    } 
}

.portfolio-logo-section {
    padding-bottom: 3rem;
}

.portfolio-logo-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1.5rem 3rem;
    min-height: 180px;
    align-items: center;
    justify-items: center;
    padding: 0 2rem;
}
/* ─────────────────────────────────────────
   PREMIUM MOBILE LOGO SCROLLER
───────────────────────────────────────── */
.portfolio-logo-grid-mobile {
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    padding: 1rem 1.25rem 1.5rem;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.portfolio-logo-grid-mobile::-webkit-scrollbar {
    display: none;
}


/* LOGO ITEM */
.portfolio-logo-item {
    flex: 0 0 auto;
    width: 150px;
    height: 100px;
    scroll-snap-align: center;

    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    box-shadow: none;

    transition: transform 0.25s ease;
}
/* IMAGE */
.portfolio-logo-item img {
    width: 150px;
    height: 100px;
    object-fit: contain;
    filter: grayscale(40%);
    /* transition: filter 0.3s ease, transform 0.25s ease; */
}

.portfolio-logo-item:active img {
    filter: grayscale(0%);
    transform: scale(1.05);
}

/* HOVER (for touch laptops) */
@media (hover: hover) {
    .portfolio-logo-item:hover {
    transform: translateY(-3px); /* subtle lift */
    }   

    .portfolio-logo-item:hover img {
        filter: grayscale(0%);
    }
}

/* SMALL DEVICES */
@media (max-width: 400px) {
    .portfolio-logo-item {
        width: 100px;
        height: 70px;
        -webkit-tap-highlight-color: transparent;

    }

    .portfolio-logo-item img {
        width: 100px;
        height: 70px;
    }

    .portfolio-logo-item:hover {
    transform: translateY(-3px); /* subtle lift */
    } 
}

/* ─────────────────────────────────────────
   PROCEDURE STEP SECTION 
───────────────────────────────────────── */

.step-wrapper{
    margin-top: 3rem;
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    align-items: stretch;
    justify-content: center;
}

.vision-box {
    flex: 0 0 calc(25% - 15px); /* exactly 4 per row */
    max-width: calc(25% - 15px);
    display: flex;
}

/* CARD */
.step-card {
    background: #ffffff;
    border-radius: 16px;
    padding: 1.5rem 1.5rem;
    text-align: left;
    position: relative;
    margin-top: 2rem;
    box-shadow: 0 10px 30px rgba(0,0,0,0.06);
    border: 1px solid rgba(0,0,0,0.05);
    min-width: 0;
    overflow: hidden;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    transition: all 0.35s ease;
}

/* HOVER EFFECT */
.step-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 50px rgba(0,0,0,0.12);
}

/* STEP TOP */
.step-top {
    position: relative;
    margin-bottom: 1.5rem;
}

/* STEP NUMBER */
.step-number {
    position: absolute;
    top: -10px;
    left: -10px;
    background: #0d6efd;
    color: #fff;
    font-size: 14px;
    font-weight: bold;
    padding: 6px 10px;
    border-radius: 8px;
    z-index: 1;
}

/* ICON */
.step-icon {
    width: 90px;
    height: 90px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(13, 110, 253, 0.08);
    border-radius: 50%;
    transition: all 0.3s ease;
}

.step-icon img {
    max-width: 50px;
    animation: floatIcon 3s ease-in-out infinite;
}

/* ICON HOVER */
.step-card:hover .step-icon {
    background: #0d6efd;
}

.step-card:hover .step-icon img {
    filter: brightness(0) invert(1);
}

/* TEXT */
.step-content h4 {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 8px;
    white-space: normal;     /* KEEP THIS */
}

.step-content p {
    font-size: 13px;
    color: #666;
    line-height: 1.6;
    white-space: normal;     /* KEEP THIS */
    word-break: keep-all;    /* CHANGED - prevents letter splitting */
    overflow-wrap: normal;   /* CHANGED */
    hyphens: none;           /* ADD THIS */
}

/* FLOAT ICON ANIMATION */
@keyframes floatIcon {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(-6px); }
}

/* REVEAL ANIMATION */
.reveal {
    opacity: 0;
    transform: translateY(40px);
    transition: all 0.8s ease;
}

.reveal.active {
    opacity: 1;
    transform: translateY(0);
}
    
/* ─────────────────────────────────────────
   CONNECTING LINE (DESKTOP)
───────────────────────────────────────── */
@media (min-width: 992px) {
    .step-in {
        position: relative;
    }

    /* .step-in:not(:nth-child(5n))::after {
        content: '';
        position: absolute;
        top: 50%;
        right: -25px;
        width: 50px;
        height: 2px;
        background: rgba(0,0,0,0.1);
    } */
}

/* REVEAL */
.reveal {
    opacity: 0;
    transform: translateY(40px);
    transition: all 0.8s ease;
}

.reveal.active {
    opacity: 1;
    transform: translateY(0);
}

/* FLOAT ICON */
.step-icon img {
    animation: floatIcon 3s ease-in-out infinite;
}

@keyframes floatIcon {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}

@media (max-width: 1199px) {
    .step-in {
        flex: 0 0 calc(33.333% - 14px); /* 3 per row */
        max-width: calc(33.333% - 14px);
    }
}

@media (max-width: 767px) {
    .step-in {
        flex: 0 0 calc(50% - 10px); /* 2 per row */
        max-width: calc(50% - 10px);
    }
}

@media (max-width: 480px) {
    .step-in {
        flex: 0 0 100%; /* 1 per row */
        max-width: 100%;
    }
}

.vision-card {
    background: #ffffff;
    border: 0.5px solid rgba(0,0,0,0.08);
    border-radius: 16px;
    padding: 2rem 1.5rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.vision-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 16px 40px rgba(0,0,0,0.10);
}

.vision-icon-wrap {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: rgba(13,110,253,0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.3s ease;
}

.vision-card:hover .vision-icon-wrap {
    background: #2676bc;
}

.vision-img {
    width: 50px;
    height: 50px;
    object-fit: contain;
    border-radius: 50%;
    animation: floatIcon 3s ease-in-out infinite;
    transition: filter 0.3s ease;
}

.vision-card:hover .vision-img {
    filter: brightness(0) invert(1);
}

.vision-title {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 10px;
    color: #1a1a1a;
}

.vision-desc {
    font-size: 14px;
    color: #666;
    line-height: 1.7;
    margin: 0;
}

@keyframes floatIcon {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(-6px); }
}

@media (max-width: 576px) {
    .vision-card { padding: 1.5rem 1rem; }
}

:root {
    --stack-section-padding-top: 10px;
    --stack-section-padding-bottom: 160px;
    --stack-top-gap: 100px;

    /* visible portion of previous row */
    --stack-offset: 90px;
}

/* SECTION */
.services-stack-section {
    padding-top: var(--stack-section-padding-top);
    padding-bottom: var(--stack-section-padding-bottom);
}

/* GRID: 2 PER ROW */
.services-stack-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
    padding-top: var(--stack-top-gap);
}

@media (max-width: 767px) {
    .services-stack-grid {
        grid-template-columns: 1fr;
    }
}

/* STACK CARD */
.stack-card {
    position: sticky;
    top: calc(var(--i) * var(--stack-offset));

    /* ✅ IMPORTANT: lower rows come on top */
    z-index: calc(var(--i)+1);

    background: #fff;
    border-radius: 20px;
    border: 1px solid rgba(0,0,0,0.07);

    box-shadow: 0 10px 40px rgba(0,0,0,0.08);
    overflow: hidden;

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

/* HOVER */
.stack-card:hover {
    transform: translateY(-6px) scale(1.01);
    box-shadow: 0 20px 60px rgba(0,0,0,0.12);
}

/* INNER */
.stack-card-inner {
    display: flex;
    gap: 20px;
    padding: 2rem 1.75rem;
    align-items: flex-start;
}

/* LEFT SIDE */
.stack-left {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

/* INDEX */
.stack-index {
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    background: #0d6efd;
    width: 34px;
    height: 34px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ICON */
.stack-icon {
    width: 75px;
    height: 75px;
    border-radius: 50%;
    border: 2px dashed #ccc;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color 0.3s, background 0.3s;
}

.stack-card:hover .stack-icon {
    border-color: #0d6efd;
    background: #e8f0fe;
}

.stack-icon img {
    width: 40px;
    height: 40px;
    object-fit: contain;
}

/* CONTENT */
.stack-content {
    flex: 1;
}

/* TITLE */
.stack-title {
    font-size: 18px;
    font-weight: 700;
    color: #1a1a2e;
    margin-bottom: 0.6rem;
}

/* DESCRIPTION */
.stack-desc {
    font-size: 13px;
    color: #666;
    line-height: 1.75;
    margin-bottom: 1.25rem;
}

/* ACTIONS */
.stack-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

/* SUBTLE OVERLAY (helps layering feel) */
.stack-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(255,255,255,0) 60%,
        rgba(255,255,255,0.6)
    );
    pointer-events: none;
}

.new-contact-infos {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.contact-box {
    display: flex;
    gap: 15px;
    padding: 15px;
    border-radius: 12px;
    text-decoration: none;
    background: #fff;
    transition: all 0.3s ease;
    border: 1px solid #eee;
}

.contact-box:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.08);
    border-color: #0d6efd;
}

.contact-icon {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: #f1f5ff;
    color: #0d6efd;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    transition: 0.3s;
}

.contact-box:hover .contact-icon {
    background: #0d6efd;
    color: #fff;
}

.contact-data small {
    display: block;
    font-size: 12px;
    color: #888;
}

.contact-data span {
    font-weight: 600;
    color: #222;
}

.long-numbers {
    display: flex;
    padding-left: 20px;
    gap: 10px;
    margin-top: 10px;
}

.long-numbers .contact-icon {
    background: #fff;
    border: 1px solid #eee;
}

.long-numbers .contact-icon:hover {
    transform: scale(1.1);
}

.contact-map iframe {
    width: 100%;
    height: 250px;
    border-radius: 12px;
}

.contact-infos {
    background: linear-gradient(135deg, #f8f9ff, #ffffff);
    padding: 20px;
    border-radius: 15px;
}
/* RIGHT SIDE CONTAINER */
.contact-infos {
    background: #f8f9fc;
    padding: 18px;
    border-radius: 14px;
}

/* CARD */
.contact-box {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 14px 16px;
    border-radius: 12px;
    background: #fff;
    border: 1px solid #eee;
    transition: 0.3s;
    margin-bottom: 12px;
}

.contact-box:hover {
    box-shadow: 0 8px 20px rgba(0,0,0,0.06);
    border-color: #0d6efd;
}

/* ICON */
.contact-icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: #eef3ff;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #0d6efd;
    flex-shrink: 0;
}

/* TEXT */
.contact-data small {
    padding-left: 10px;
    font-size: 11px;
    color: #888;
    letter-spacing: 0.5px;
}

.contact-data span {
    padding-left: 10px;
    font-size: 15px;
    font-weight: 600;
}

/* CHAT SECTION FIX */
.chat-icons {
    display: flex;
    gap: 12px;
    margin-top: 5px;
}

.chat-icon {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: #f1f1f1;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.3s;
}

/* BRAND COLORS */
.chat-icon.whatsapp {
    background: #e9fbe5;
    color: #25D366;
}

.chat-icon.viber {
    background: #f3efff;
    color: #7360F2;
}

/* HOVER */
.chat-icon:hover {
    transform: scale(1.1);
}

.viber-icon {
    background: #ede9fe; /* soft purple bg */
    border: 1px solid #d6ccff;
    color: #7360F2;
}

.viber-icon svg {
    width: 30px;
    height: 30px;
}

/* HOVER EFFECT */
.viber-icon:hover {
    background: #7360F2;
    color: #fff;
    transform: scale(1.1);
}

/* MAP FIX */
.contact-map iframe {
    width: 100%;
    height: 220px;
    border-radius: 12px;
    margin-bottom: 12px;
}

/* LEFT TEXT FIX */
.contact-des h2 {
    font-size: 38px;
    line-height: 1.3;
}

.contact-des p {
    color: #555;
    font-size: 15px;
}

@media (max-width: 768px) {

    .contact-des-col {
        margin-bottom: 20px;
    }

    .contact-map iframe {
        height: 180px;
    }

    .contact-infos {
        padding: 15px;
    }

    .contact-box {
        flex-direction: row;
        align-items: center;
        padding: 12px;
    }

    .contact-icon {
        width: 45px;
        height: 45px;
    }

    .contact-data span {
        font-size: 14px;
    }

    .contact-data small {
        font-size: 11px;
    }

    /* Mobile social icons row */
    .long-numbers {
        justify-content: space-between;
        width: 100%;
        gap: 2px;
        margin-top: 10px;
    }

    .long-numbers .contact-icon {
        width: 42px;
        height: 42px;
    }

    /* Make cards feel like buttons */
    .contact-box:active {
        transform: scale(0.98);
    }

    /* Sticky off for mobile (better UX) */
    .contact-infos-col > div {
        position: relative !important;
        top: 0 !important;
    }
}

@media (max-width: 576px) {
    .contact-des-col {
        margin-bottom: 20px;
    }

    .contact-map iframe {
        height: 180px;
    }

    .contact-infos {
        padding: 15px;
    }

    .contact-box {
        flex-direction: row;
        align-items: center;
        padding: 12px;
    }

    .contact-icon {
        width: 45px;
        height: 45px;
    }

    .contact-data span {
        font-size: 14px;
    }

    .contact-data small {
        font-size: 11px;
    }

    /* Mobile social icons row */
    .long-numbers {
        justify-content: flex-start;

        width: 100%;
        gap: 8px;
        margin-top: 10px;
    }

    .long-numbers .contact-icon {
        width: 42px;
        height: 42px;
    }

    /* Make cards feel like buttons */
    .contact-box:active {
        transform: scale(0.98);
    }

    /* Sticky off for mobile (better UX) */
    .contact-infos-col > div {
        position: relative !important;
        top: 0 !important;
    }
}

/* newsletter */
.newsletter {
    position: relative;
    background-size: cover;
    background-attachment: fixed;
    height: 300px;
}

.newsletter .custom-toast {
    position: absolute;
    right: 4px;
    top: 4px;
    z-index: 99999;
}

.newsletter #overlay {
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--background-overlay);
}

.newsletter .caption {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding: 15px;
}

.newsletter .caption .input-group {
    max-width: 550px;
}

.newsletter .form-control {
    padding: 14px;
}

/* footer */
.footer {
    background-color: var(--dark-blue);
    border-bottom: 1px solid #434343;
}

.footer .title {
    position: relative;
    z-index: 1;
    padding-bottom: 8px;
    margin-bottom: 1rem;
}

.footer .title:before {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 30%;
    /* or 100px */
    border-bottom: 3px solid var(--blue);
}

.footer .socials {
    margin-top: 1rem;
    display: flex;
    align-items: center;
}

.footer .socials .socials-icon {
    border-radius: 50%;
    width: 40px;
    height: 40px;
    background-color: var(--blue);
    padding: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.footer .socials .socials-icon .footer-link {
    text-decoration: none;
    white-space: nowrap;
    color: var(--white);
    font-size: 24px;
}

.footer .socials .socials-icon:hover {
    background-color: var(--orange);
}

.footer ul {
    padding-left: 1rem;
}

.footer ul li::marker {
    content: "\f0a9";
    /* FontAwesome Unicode */
    font-family: FontAwesome;
}

.footer .footer-link {
    text-decoration: none;
    color: var(--white);
}

.footer .footer-link:hover {
    color: var(--orange);
}

.footer ul li:hover .footer-link {
    color: var(--orange);
}

.footer ul li:hover::marker {
    color: var(--orange);
}

.footer .footer-contact {
    display: flex;
    align-items: center;
}

.footer .map-container {
    aspect-ratio: 4/3;
}

.footer .map-container .map {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border: 3px solid var(--orange);
}

.bottom-footer {
    background-color: #0c2049;
}

/* ************************ */
.vision-box {
    padding: 40px 16px 16px !important;
    box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    background-color: #f6f6f8;
}

.vision-icon {
    width: 100px;
    height: 100px;
    position: absolute;
    left: calc(50% - 50px);
    top: -50px;
    background-color: var(--blue);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.img-contain {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.vision-box-wrapper {
    margin-top: 80px
}

.vision-icon {
    padding: 16px;
}

@media screen and (max-width: 1299px) {

    /* HOMEPAGE */
    .logo-img {
        width: 200px;
    }
}

@media screen and (max-width: 1199px) {
    .logo-wrapper {
        /* width: 180px; */
        width: fit-content;
    }

    /* .logo-position {
        top: -55px;
        padding-top: 40px;
    } */

    .logo-img {
        width: 130px;
    }

    .foot-logo-img {
        width: 180px;
    }


    .top-nav,
    .bottom-nav {
        padding-left: 180px;
    }

    .bottom-nav .nav-link {
        font-size: 13.2px;
    }

    /* why us */
    .why-us .box {
        padding: 10px;
    }

    .why-us .text .body {
        width: 180px;
    }

    /* about us section */
    .about-us-section .heading .second {
        font-size: 25px;
    }

    .about-us-section .heading .first {
        font-size: 13px;
    }

    .about-us-section .body p {
        font-size: 13px;
    }

    .blog-section .multiple-blogs .blog-text {
        -webkit-line-clamp: 9;
    }
}

@media screen and (max-width: 991px) {
    /* HOME PAGE */

    /* navbar */
    .navbar .container-fluid {
        padding: 10px 0 5px;
    }

    .top-nav,
    .bottom-nav {
        padding-left: 0;
    }

    .top-nav .socials .navbar-nav {
        flex-direction: row !important;
    }

    .bottom-nav .nav-link {
        font-size: 14px;
    }

    .bottom-nav .btn {
        width: 205px;
        margin: 15px 0 0 1rem;
        margin-right: auto;
    }

    .bottom-nav .nav-link-ltr:after {
        height: 2px;
        bottom: 0;
    }

    .top-nav .socials {
        width: auto;
        height: auto;
        border-top: 0;
        border-left: 0;
        border-bottom: 0;
        border-right: 0;
    }

    /* about us section */

    /* .about-us-section {
        margin-top: 0 !important;
    } */

    .about-us-section .first-col {
        padding: 0 25px;
    }

    .about-us-section .heading .second {
        font-size: 40px;
    }

    .about-us-section .heading .first {
        font-size: 16px;
    }

    .about-us-section .body .justify {
        font-size: 16px;
    }

    /* blog section */

    .blog-section .multiple-blogs .blog-text {
        -webkit-line-clamp: 5;
    }
}

@media screen and (max-width: 767px) {
    .landing-bg .caption {
        width: auto;
    }

    .landing-bg .caption .body {
        font-size: 16px;
    }

    .landing-bg .caption .btn {
        padding: 10px 25px;
    }

    .services-section .img-container {
        aspect-ratio: 4/3;
    }

    .expert-talk .caption h3 {
        font-size: 1.1rem;
    }

    .expert-talk .caption h1 {
        font-size: 1.55rem;
    }

    .testimonial-carousel .client-review {
        align-items: center;
    }

    .blog-section .multiple-blogs .blog-row {
        flex-direction: column;
    }

    .blog-section .multiple-blogs .blog-text {
        -webkit-line-clamp: 5;
    }
}

@media screen and (max-width: 360px) {
    body {
        overflow-x: scroll;
        min-width: 360px;
    }
}


/* ROJESH CSS */
.pl-0{
    padding-left: 0 !important;
}
.secondary-btn{
    background-color: var(--blue) !important;
    color: var(--white);
    border: 1px solid transparent;
    border-radius: 6px;
    height: 52px;
    padding-inline: 30px;
    box-shadow: inset 0 0 0 0 var(--orange);
    transition: ease-out 0.6s;
}
.secondary-btn:hover{
    background-color: var(--white) !important;
    color: var(--orange) !important;
    border: 1px solid var(--orange) !important;
    box-shadow: inset 300 0 0 0 var(--orange);
}
.truncate-4 {
    display: -webkit-box;
    -webkit-line-clamp: 4; /* Limits to 4 lines */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

/*-----------------------------Client Section-----------------------------*/
.custom-pad-top{padding-top: 50px;}

.custom-client-card{
    border-radius: 16px;
    padding: 10px 10px;
    /* box-shadow: 2px 2px 16px 4px rgba(5, 22, 80, 0.08); */
    transition: all 0.3s ease-in-out;

}
.custom-client-card:hover{
    box-shadow: 2px 2px 16px 4px rgba(5, 22, 80, 0.08);
    transition: all 0.3s ease-in-out;
}
.form-select-style:focus{box-shadow: none !important; outline: none !important;}
.custom-client-card>a>figure>img{
    transition: transform 0.5s;
}
.custom-client-card:hover>a>figure>img{
    transform: scale(1.1);
}
.custom-client-card>a>figure{
    border-radius: 16px;
    overflow: hidden;
    aspect-ratio: 1;
    background-color: #E7F1F8;
}
.custom-client-card>a>figure>img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.custom-client-title{
    font-weight: 700;
    font-size: 1.25rem;
    line-height: 26px;
    color: var(--theme-color-dark);
}
.custom-client-title:hover{color: var(--orange)}

/*/////////////////////////////////////////////////////////////////*/

.overflow-hidden{overflow: hidden;}
.object-fit-cover{object-fit: cover;}
.aspect-ratio-3_2{aspect-ratio: 3/2;}
.object-fit-contain
{
    object-fit: contain;
}
.position-relative{position: relative;}
.position-absolute{position: absolute;}
.overlay-case-study{
    background-color: rgba(206, 206, 206, 0.6);
}
.case-before-div{
    margin-right: -45px;
}
.case-after-div{
    margin-top: 90px;
    margin-left: -45px;
    z-index: 10;
    position: relative;
}
.expert-div{
    border-radius: 16px;
    box-shadow: 2px 2px 16px 4px rgba(5, 22, 80, 0.08);
}
@media screen and (max-width: 992px) {
    .no-padding{padding: 0 !important;}
}
header{position: sticky; z-index: 99; top: 0; box-shadow: 0 0 10px rgba(0, 0, 0, 0.3019607843); height: 72px;}
.h-70h{height: 70vh;}
.service-detail-card{
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease-in-out;
}
.whitespace-nowrap{white-space: nowrap;}
.service-card{
    box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.2);
    transition: all 0.4s ease-in-out;
    border-radius: 8px;
    background-color: #f6f6f8;
    cursor: default;
}
.service-card:hover{
    box-shadow: 2px 2px 12px rgba(0, 0, 0, 0.2);
    transform: scale(1.01);
}

@media screen and (max-width: 575px) {
    .footer .footer-link{
        font-size: 14px !important;
    }
}
.text-dark-grey{color: var(--dark-grey) !important;}
.cursor-pointer{cursor: pointer !important;}
/* .service-mains-details :is(p){
    margin-top: 16px;
} */
.service-mains-details :is(h2){
    font-weight: 600;
    font-size: 32px;
}
/* .talk-to-expert-btn{
    margin-top: 0.5rem !important;
    background-color: var(--blue) !important;
} */
@media screen and (min-width: 499px) {
    .talk-to-expert-btn{margin-top: 0;}
}
@media screen and (min-width: 499px) and (max-width: 768px){
    .learn-more-btn{margin-right: 0.75rem;}
}
@media screen and (min-width: 576px){.talk-to-expert-btn{margin-top: 0.5rem;}}
@media screen and (min-width: 1200px){.learn-more-btn{margin-right: 0.5rem;}}
@media screen and (min-width: 1400px) {
    .talk-to-expert-btn{margin-top: 0;}
}
.vertical-align-bottom{vertical-align: bottom;}
.text-base{ font-size: 1rem;}
.text-sm{ font-size: 0.875rem;}
.specific-height{height: 50px;}
@media screen and (min-width: 992px) {
    .specific-height{height: 44px;}
}
.aspect-ratio-25_9{aspect-ratio: 25/9;}
.aspect-ratio-2{aspect-ratio: 2;}
.span-block>ul>li :is(p>span){
    display: block !important;
}
/* .span-block>ul>li :is(p){color: red;} */
.h-fit-content{height: fit-content;}





.whatsapp-icon-wrapper {
    position: fixed;
    bottom: 16px;
    right: 16px;
    z-index: 9;
    color: #fff !important;
    height: 44px;
    width: 44px;
    border-radius: 50%;
    background-color: var( --theme-color);
    box-shadow: 0 0 5px rgba(255, 255, 255, 1);
    font-size: 25px;
}

.h-70vh{height: 70vh !important;}
.fixed-whatsapp-btn{
    background-color: #25d366;
    color: white;
    border-radius: 100%;
    height: 50px;
    aspect-ratio: 1;
}
.whatspp-fixed-btn-div{
    position: fixed;
    bottom: 12px;
    right: 12px;
    z-index: 999;
}
.fixed-whatsapp-btn:hover{
    color: white !important;
}