.purple-font {
    color: #9D54F5;
}

.turquoise-font {
    color: #78DBE0
}

.dot-span {
    font-family: 'DM Sans', serif !important;
    font-size: 14px;
}

.about-us-section-title {
    margin-top: 20px;
    margin-bottom: 20px;
}

.space-remover {
    padding-top: 0px !important;
    padding-bottom: 0px !important;
    margin-top: 0px !important;
    margin-bottom: 0px !important;
}

@media screen and (max-width: 767px) {
    .about-us-section-title {
        margin-top: 5px;
        margin-bottom: 20px;
    }
}


/* ==========================================================================
   HOME PAGE CSS 
   ========================================================================== */

/* 1. Target the WordPress Container */
/* You may need to find the specific ID/Class WordPress gives that top Container */
.hero-container {
    position: relative !important;
    overflow: hidden !important;
    min-height: 500px !important;
    border-radius: 0 0 200px 0 !important;
}

.custom-hero-wrapper {
    position: static !important;
}

.custom-hero-wrapper .content-div {
    position: relative;
    z-index: 2;
    /* Higher than the video */
    padding: 60px 20px;
    display: flex !important;
}

.custom-hero-wrapper .text-div {
    margin-top: 120px !important;
    flex: 1 !important;
}

.custom-hero-wrapper .img-div {
    flex: 1 !important;
    align-items: end !important;
    position: relative !important;
    top: 150px !important;
    right: -50px !important;
}

.video-bg {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    min-width: 100% !important;
    min-height: 560px !important;
    width: auto !important;
    height: auto !important;
    z-index: 0;
    object-fit: cover;
    pointer-events: none;
}


.link-div .dsp-button {
    margin-right: 30px;
}

.text-div {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 27px;
}

.text-div h1 {
    margin: 0;
    letter-spacing: -2.4px;
}

.text-div p {
    letter-spacing: -0.44px;
}

.section-two-mainbox {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    height: 100%;
    gap: 100px;
}

.section-two-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-wrap: nowrap;
    flex: 1;
    padding: 0;
}

.section-two-box img {
    height: 72px !important;
    width: auto;
}

.dsp-container {
    display: flex;
    flex-direction: column;
    align-items: start;
    gap: 5%;
    max-width: 800px;
}

.dsp-left {
    flex: 1.3;
}

.dsp-badge,
.elementor-icon-list-text {
    color: #0D3B70;
    font-size: 14px;
    display: flex;
    align-items: center;
    margin-bottom: 16px;
}

.dsp-badge span {
    margin-right: 4px;
}

.dsp-main-title {
    color: #0D3B70;
    text-wrap: balance;
}

.dsp-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin-top: 24px;
    margin-bottom: 24px;
}

.dsp-card {
    padding: 20px;
    border-radius: 12px;
    display: flex;
    flex-direction: column;

    min-height: 220px;
}

.dsp-card h3 {
    color: #2E62FD !important;
    margin: 0 0 16px 0;
}

.dsp-card p {
    color: black;
    font-size: 19px;
    font-weight: 400;
    line-height: 1.6;
    margin: 0;
}

.dsp-button {
    background: #a855f7;
    color: white;
    padding: 12px 28px;
    border-radius: 6px;
    text-decoration: none;
}

.dsp-button-alt {
    background: transparent;
    color: white;
    padding: 12px 28px;
    border-radius: 6px;
    border: 1px solid #FFF;
    text-decoration: none;
}

.third-section {
	background-image: url('https://www.dspsolution.com.my/wp-content/uploads/2026/09/third-wide-section-bg-v3.png');
    background-repeat: no-repeat;
    background-position: right;
    background-size: 500px auto;
}


.third-wide-section {
    background-image: url('https://www.dspsolution.com.my/wp-content/uploads/2026/09/third-wide-section-bg-v3.png');
    background-repeat: no-repeat;
    background-position: right;
    background-size: 500px auto;

}

@media (min-width: 1921px) {
    .third-section {
        background-image: none;
    }
}

@media (max-width: 1920px) {
    .third-wide-section {
        background-image: none;
    }
}


.home-page-row {
    display: flex;
    gap: 16px;
}

.home-page-box {
    width: 402px !important;
    background-color: #ffffff;
    border-radius: 16px;
    padding: 30px;
    box-shadow: 6px 6px 20px 0 rgba(92, 137, 192, 0.60);
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.home-page-news-row {
    display: flex;
    gap: 30px;
    height: 100%;
    align-items: stretch;
}

.news-item-card {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.home-page-news-content {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 24px;
}

/* homepage bottom banner style */
.banner-wrapper {
    position: relative;
    padding-top: 40px;
    overflow-x: clip;
}

.banner-paragraph {
    margin-top: 20px !important;
    margin-bottom: 32px !important;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    position: relative;
    height: 100%;
}

.shape-square {
    position: absolute;
    top: -30px;
    left: 20px;
    width: 82px;
    z-index: 1;
}

.banner-overflow-box {
    position: relative;
    background-size: cover;
    background-position: left center;
    border-radius: 80px 0 0 0;
    margin-left: calc(5%);
    margin-right: -100vw;
    padding-right: 100vw;
    padding-top: 80px;
    padding-bottom: 80px;
    display: flex;
    align-items: center;
    min-height: 400px;
    overflow: hidden;
}

.banner-content {
    padding-left: 100px;
    gap: 20px !important;
    z-index: 3;
    position: relative;
}

.banner-icon {
    position: absolute;
    left: 18%;
    bottom: -250px;
    height: 100%;
    z-index: 0;
    pointer-events: none;
}

@media (min-width: 768px) {
    .hero-banner-description {
        margin-top: 80px !important;
    }
}

@media (min-width: 1441px) {
    .banner-icon {
        left: 21%;
        right: none !important;
    }

    .banner-content {
        padding-left: 0px;
    }
}

@media (max-width: 1439px) {
    .mobile-padding {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
}

@media (max-width: 1024px) {
    .shape-square {
        left: 35px;
        top: 0px;
        width: 40px;
    }

    .banner-icon {
        right: 600px;
    }
}

@media (max-width: 767px) {
    .text-div {
        text-align: center;
        align-items: center;
        gap: 0px;
    }

    .text-div h1 {
        margin-top: 8px;
        margin-bottom: 28px;
    }

    .link-div {
        display: flex;
        flex-direction: column;
    }

    .link-div .dsp-button {
        margin-bottom: 16px;
    }

    .dsp-badge {
        justify-content: center;
    }

    .dsp-container {
        align-items: center;
    }

    .dsp-main-title {
        text-align: center;
    }

    .dsp-left {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

    }

    .dsp-grid {
        grid-template-columns: repeat(1, 1fr);
        width: 100% !important;
    }

    .dsp-left h2 {
        margin-bottom: 24px;
    }

    .dsp-card {
        min-height: initial;
        height: auto;
        width: 335px;
    }

    .dsp-card p {
        font-size: 14px !important;
    }

    .section-two-box {
        text-align: center;
    }

    .dsp-button-position .dsp-button {
        margin-top: 14px;
        width: auto;
    }

    .dsp-button {
        display: flex;
        justify-content: center;
        width: 100%;
    }

    .slick-dots li.slick-active button {
        background-color: #9D54F5 !important;
        /* Change this to your purple color */
    }

    .third-section {
        background-image: none !important;
    }

    .home-page-row {
        display: block;
    }

    .page-box-slide .slick-track {
        display: flex !important;
        align-items: stretch !important;
    }

    .page-box-slide .slick-slide {
        height: auto !important;
        display: flex !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }

    .page-box-slide .slick-slide>div {
        width: 100%;
        display: flex;
    }

    .slide-wrapper {
        padding: 20px 15px 40px 15px;
        box-sizing: border-box;
        width: 100%;
        display: flex;
    }

    .home-page-box {
        background-color: #ffffff;
        border-radius: 16px;
        box-shadow: none;
        padding: 20px;
        display: flex;
        flex-direction: column;
        gap: 8px;
        width: 100%;
        flex: 1;
        margin: 0;
    }



    .banner-overflow-box {
        /* Remove desktop margin hacks and set mobile spacing */
        margin-left: 15px;
        margin-right: 0;
        padding-right: 0;

        /* Adjust padding to make room for the bottom graphic */
        padding-top: 80px;
        padding-bottom: 300px;
        border-radius: 60px 0 0 0;
        min-height: auto;
    }

    .banner-content {
        padding-left: 30px;
        padding-right: 30px;
    }

    .banner-paragraph {
        margin-top: 20px !important;
        margin-bottom: 20px !important;
    }

    /* Hide desktop line breaks so text flows naturally on small screens */
    .banner-paragraph br {
        display: none;
    }

    .banner-content p {
        font-size: 14px !important;
        line-height: 160% !important;
    }

    .banner-content h2 {
        line-height: 130% !important;
    }

    .banner-overflow-box img {
        max-width: none !important;
    }

    .banner-button-position .dsp-button {
        width: max-content;
    }

    .banner-icon {
        right: 0;
        left: -150px;
        bottom: -80px;
        width: 710px;
    }

    .custom-hero-wrapper .text-div {
        margin-top: 0 !important;
    }

    .custom-hero-wrapper .text-div h1 {
        letter-spacing: -1.9px;
    }

    .custom-hero-wrapper .text-div p {
        letter-spacing: -0.32px;
        line-height: 1.5;
    }

    .custom-hero-wrapper .content-div {
        flex-direction: column;
        padding: 0px 20px;
    }

    .custom-hero-wrapper .text-div {
        padding-top: 60px;
        flex: 0 !important;
    }

    .video-bg {
        min-height: 750px !important;
    }

    .custom-hero-wrapper .img-div {
        flex: 0 !important;
        top: 0px !important;
        right: 0px !important;
    }

    .section-two-mainbox {
        gap: 0;
    }

    .shape-square {
        display: none;
    }

    .banner-wrapper {
        padding-top: 0;
    }
}

/* ==========================================================================
   ABOUT US PAGE CSS 
   ========================================================================== */

/* about us */
.breadcrumb {
    margin-bottom: 0px !important;
    margin-top: 0px !important;
}

.breadcrumb a {
    text-decoration: none;
    color: black;
}

.breadcrumb a:hover {
    text-decoration: none;
    color: #2E62FD;
}

.breadcrumb small {
    font-size: 10px;
}

.about-big {
    margin-top: 30px;
    width: 1041px;
}

.about-small {
    width: 155px;
}

.vision {
    flex: 0.2 !important;
}

.mission {
    flex: 1.8 !important;
}

.value-card {
    background-color: #0D3B70;
    color: white;
    padding: 30px;
    border-radius: 16px;
    box-shadow: 10px 0 0 #2E62FD;
    position: relative;
    z-index: 1;
    margin-right: 10px;
}

.map-section {
    padding-bottom: 64px !important;
}

@media (max-width: 767px) {
    .about-banner {
        overflow: hidden !important;
    }

    .content-div.about-icon {
        position: relative;
        overflow: visible;
        padding-bottom: 150px;
    }

    .img-div.about-icon {
        position: absolute;
        bottom: -100px;
        right: 60px;
        left: 0;
        display: flex;
        justify-content: center;
        z-index: 1;
    }

    .img-div.about-icon img {
        width: 600px !important;
        max-width: none;
        height: auto;
        transform: translateY(25%);
    }

    .about-image-container {
        position: relative;
        width: 100%;
        max-width: 600px;
        margin: 80px auto;
    }

    .about-big {
        width: 80%;
        height: auto;
        display: block;
        border-radius: 24px;
        object-fit: cover;
    }

    .about-small {
        position: absolute;
        width: 50px;
        height: 55px;
        top: -50px;
        right: 15px;

        border-radius: 16px;
        object-fit: cover;
        border: 4px solid #fff;
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
        z-index: 2;
    }

    .vision-mission-section {
        flex-direction: column;
    }

    .vision {
        flex: 0;
    }

    .vision h1 {
        font-size: 26px;
        font-style: normal;
        font-weight: 700;
        line-height: 130%
    }

    .mission {
        flex: 0;
    }

    .mission p {
        font-size: 14px !important;
        font-style: normal;
        font-weight: 400;
        line-height: 160%;
    }

    .about-slick {
        margin-top: 32px;
    }

}

/* ==========================================================================
   SERVICE PAGE CSS 
   ========================================================================== */

.service-page {
    display: flex;
    gap: 30px;
    flex-wrap: wrap;
    /* Allows stacking on smaller screens */
    justify-content: center;
}

.service-page-box {
    background-color: #FFF;
    box-shadow: 0 10px 50px 0 rgba(147, 147, 147, 0.15);
    border-radius: 20px;
    padding: 40px 30px;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 20px;
    flex: 0 0 calc(33.333% - 20px);
    max-width: calc(33.333% - 20px);
    
}

@media screen and (max-width: 1020px) {
    .service-page-box {
        flex: 0 0 calc(50% - 20px);
        max-width: calc(50% - 20px);
    }
}

@media screen and (max-width: 767px) {
    .service-page-box {
        flex: 0 0 calc(100% - 20px);
        max-width: calc(100% - 20px);
    }
}

.service-page-box .img-div {
    display: flex;
    justify-content: center;
}

.service-page-box .img-div img {
    border: none;
    border-radius: 0;
    box-shadow: none;
    height: 154px;
    width: auto;
}

.service-page-box h3 {
    margin-bottom: 0;
    color: #0D3B70;
}

.btn-learn-more {
    background-color: #2E62FD;
    color: #ffffff;
    text-decoration: none;
    padding: 12px 20px;
    border-radius: 6px;
    display: inline-block;
}

.cta-banner-bg {
    background-image: url('https://www.dspsolution.com.my/wp-content/uploads/2026/03/footer-banner-scaled.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 60px 0;
    width: 100%;
}

.cta-heading {
    color: #0D3B70;
    font-size: 34px;
    font-weight: 700;
    margin-bottom: 0px;
}

.footer-banner-btn {
    background-color: #a855f7;
    color: #ffffff;
    text-decoration: none;
    padding: 12px 28px;
    border-radius: 6px;
    white-space: nowrap;
}

.service-company-list h2 {
    margin-bottom: 30px;
}

@media (max-width: 767px) {
    .service-company-list h2 {
        margin-bottom: 24px;
    }

    .cta-banner-bg {
        text-align: center;
        padding: 40px;
    }

    .cta-heading {
        font-style: normal;
        line-height: 130%;
        margin-bottom: 32px !important;
    }
}

/* ==========================================================================
   SERVICE TEMPLATE PAGE CSS 
   ========================================================================== */

.service-tabs.desktop-only.is-sticky {
    position: fixed;
    top: 80px;
    left: 0 !important;
    right: 0 !important;
    width: 100vw !important;
    margin: 0 !important;
    background: white;
    z-index: 190;
    height: 60px;
    display: flex;
    align-items: end;
    max-width: none;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

.admin-bar .service-tabs.desktop-only.is-sticky {
    top: 112px;
}

.service-tabs.desktop-only.is-sticky .container {
    padding-left: 20px;
}

.service-tabs.desktop-only.is-sticky ul {
    display: flex;
    gap: 40px;
    list-style: none;
    margin: 0 auto !important;
    width: 100%;
}

@media (max-width:1200px) and (min-width:768px) {
    .service-tabs.desktop-only.is-sticky {
        top: 60px;
    }

    .admin-bar .service-tabs.desktop-only.is-sticky {
        top: 90px;
    }

    .service-hero {
        padding: 0px !important;
    }
}

.service-hero {
    display: flex;
    padding: 50px 100px;
    justify-content: center;
    align-items: flex-start;
    flex-direction: column;
    background: #E9F3FF;
    padding: 80px 0 0px;
    border-radius: 0 0 200px 0;

    /*for full width*/
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    margin-bottom: -1px;
}

.service-hero .container {
    gap: 120px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.breadcrumb-section {
    padding-top: 16px;
}

.hero-content {
    padding-top: 30px;
    max-width: 500px;
}

.hero-content h1 {
    color: #0D3B70;
    margin-bottom: 0;
}

.hero-content .description {
    font-size: 24px;
    color: #0D3B70;
    margin-bottom: 0;
}

.hero-box {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 50px 0px;
}

.btn-primary {
    background: #9D54F5;
    color: #fff;
    padding: 12px 20px;
    border-radius: 6px;
    text-decoration: none;
    width: fit-content;
}

.hero-icon img {
    width: 375px;
    height: auto;
}

@media screen and (max-width:767px) {
    .hero-icon img {
        width: 90px;
        height: auto;
    }

    .hero-icon {
        text-align: center;
    }

    .hero-box {
        text-align: center;
        align-items: center;
        padding: 0px;
        margin-bottom: 80px !important;
    }

    .service-tabs.mobile-only {
        width: 100%;
        padding: 0px;
        overflow-x: auto;
        white-space: nowrap;
        background-color: #ffffff;
        border-bottom: 1px solid #ddd;
        -webkit-overflow-scrolling: touch;
        /* Smooth scrolling for iOS */
    }

    .service-hero {
        padding: 0px !important;
    }

    .service-tabs ul {
        display: flex;
        padding: 0;
        margin: 0;
        list-style: none;
        gap: 0px !important;
    }

    .service-tabs li {
        padding: 0px !important;
    }

    .service-tabs li a {
        display: block;
        padding: 12px 20px;
        text-decoration: none;
        font-size: 16px !important;
        font-weight: 500;
        transition: all 0.3s ease;
    }

    .service-tabs::-webkit-scrollbar {
        display: none;
    }

    .service-content {
        flex: 0;
    }

    .success-slider-wrapper {
        overflow: hidden;
    }

    .success-stories-slider {
        margin: 0 -40px;
        /* Counteracts the side margins of the cards */
    }

    /* Slick uses these classes; we must ensure they don't add extra padding */
    .success-stories-slider .slick-list {
        padding: 0 !important;
        overflow: hidden;
        /* Allows the margin-spacing to work */
    }

    .success-stories-slider ul.slick-dots {
        bottom: -30px;
    }

    .slick-item-wrapper {
        padding: 0 10px;
        /* This creates the 20px gap between cards (10px + 10px) */
        display: flex !important;
        height: auto;
    }

    .slider-box {
        background-color: #E9F3FF;
        padding: 30px 40px !important;
        border-radius: 20px;
        width: 100%;
        display: flex;
        flex-direction: column;
        box-sizing: border-box;
    }

    .service-tabs.mobile-only.is-sticky {
        position: fixed;
        top: 60px;
        left: 0 !important;
        right: 0 !important;
        width: 100vw !important;
        margin: 0 !important;
        background: white;
        z-index: 9999;
        height: 60px;
        display: flex;
        align-items: end;
        max-width: none;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
    }
}



.service-tabs .container {
    padding-left: 0px;
}

.service-tabs ul {
    display: flex;
    align-items: center;
    gap: 40px;
    padding: 0;
    margin: 0;
    list-style: none;
}

.service-tabs li {
    cursor: pointer;
    padding-bottom: 12px;
    border-bottom: 3px solid transparent;
    transition: all 0.2s ease-in-out;
    margin: 0;
}

.service-tabs li a {
    text-decoration: none;
    color: #0D3B70;
    font-weight: 400;
    display: block;
    font-size: 18px;
}

.service-tabs li.active {
    border-bottom: 3px solid #9D54F5;
}

.service-tabs li.active a {
    font-weight: 700;
    color: #0D3B70;
}

.service-content {
    display: flex;
    flex-direction: column;
    gap: 40px;
    padding: 50px 0px;
    flex: 1.4
}

.service-content-2 {
    flex: 0.6;
}

.service-content h2 {
    color: #0D3B70;
    margin-bottom: 20px;
}

.service-content p {
    color: black;
    margin-bottom: 20px;
}

.service-content ol {
    padding-left: 0px;
}

.success-content {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding-bottom: 48px;
}

.success-content h2 {
    color: #0D3B70;
    margin-bottom: 20px;
}

.success-content p {
    color: black;
    margin-bottom: 20px;
}

.success-content h3 {
    color: #0D3B70;
    padding-bottom: 16px;
}

.success-content p {
    color: black;
}

.success-stories-slider {
    padding: 0 40px !important;
    position: relative;
    box-sizing: border-box;
}

.success-stories-slider .slick-prev,
.success-stories-slider .slick-next {
    top: 50% !important;
    transform: translateY(-50%) !important;
}

.success-stories-slider .slick-track {
    display: flex !important;
}

.success-stories-slider .slick-slide {
    height: inherit !important;
    display: flex !important;
}

.success-stories-slider .slick-slide>div {
    display: flex !important;
    flex-direction: column !important;
    width: 100%;
}

.slider-box {
    background-color: #E9F3FF;
    padding: 30px 40px !important;
    border-radius: 20px;
    margin: 0 10px;
    box-sizing: border-box;
    flex-grow: 1 !important;

    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column !important;
}

.slider-box h3 {
    color: #0D3B70;
    padding-bottom: 16px;
    margin: 0;
}

.slider-box p {
    color: #4a5568;
    line-height: 1.6;
    margin: 0;
}

.slick-prev.slick-arrow {
    width: 30px;
    height: 30px;
    background-image: url('https://www.dspsolution.com.my/wp-content/uploads/2026/03/arrow-left.png') !important;
    background-color: transparent !important;
    border: none !important;
    z-index: 10;
}

.slick-next.slick-arrow {
    width: 30px;
    height: 30px;
    background-image: url('https://www.dspsolution.com.my/wp-content/uploads/2026/03/arrow-right.png') !important;
    background-color: transparent !important;
    border: none !important;
    z-index: 10;
}

/* Service Template - FAQs CSS */
.full-width-banner {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    margin-bottom: -1px;
}

/* ==========================================================================
   ### FAQ ACCORDION {
   ========================================================================== */

.faq-category-title-col {
    flex: 0 0 30%;
}

/* --- Individual FAQ Items --- */
.faq-item {
    background-color: #E9F3FF;
    margin-bottom: 15px;
    overflow: hidden;
    /* Crucial for the slide down animation */
    /* By default we hide items beyond the first 4 (JS will control this) */
    display: none;
}

/* Initially show the first 4 items */
.faq-item:nth-child(-n+4) {
    display: block;
}

@media screen and (max-width:767px) {
    .faq-search-wrapper {
        flex-direction: row !important;
        flex-wrap: wrap !important;
        gap: 15px;
        padding: 0 20px;
    }

    .faq-search-input-container {
        width: 100%;
        max-width: 100%;
        order: 1;
        /* Forces the input to stay on top */
    }

    .faq-item {
        border-radius: 10px;
    }

    .faq-title h3 {
        font-size: 18px !important;
    }

    .faq-answer-inner {
        font-size: 14px !important;
    }
}

/* --- The Question Button --- */
.faq-head {
    margin-top: 50px;
    margin-bottom: 30px;
}

.faq-section {
    width: 100%;
    display: flex;
    flex-direction: column;
    margin-bottom: 80px !important;
}

.faq-question {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px;
    background: #E9F3FF;
    border: none;
    cursor: pointer;
    text-align: left;
    color: #0D3B70;
    transition: background-color 0.3s ease;
}

.faq-question:focus {
    outline: none;
}

.faq-title {
    padding-right: 20px;
    line-height: 1.4;
}

.faq-title h3 {
    color: #0D3B70;
}

/* --- Icons --- */
.faq-icon {
    flex-shrink: 0;
    width: 14px;
    height: 14px;
    color: #17385B;
}

.faq-icon svg {
    width: 100%;
    height: 100%;
    vertical-align: super;
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease;
}

.faq-answer-inner {
    padding: 0 25px 25px 25px;
    color: black;
    font-size: 16px;
    line-height: 1.6;
}

.faq-answer-inner p {
    background: transparent;
}

/* --- View More Button --- */
.faq-view-more-container {
    text-align: center;
    margin-top: 30px;
}

.faq-view-more-btn {
    background: transparent;
    border: none;
    color: #ffffff;
    font-family: "Antic Didone", serif;
    font-size: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 0 auto;
}

.faq-view-more-btn:hover {
    opacity: 0.8;
}

.faq-view-more-btn:focus {
    outline: none;
}

.faq-view-more-container.hidden {
    display: none;
}


/* ==========================================================================
   CAREER PAGE CSS 
   ========================================================================== */

.career-title-content h1 {
    margin-bottom: 20px;
}

.career-title-content p {
    font-size: 24px;
    margin-bottom: 50px;
}

.career-top-content {
    margin-bottom: 0 !important;
}

.career-box {
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: start;
    text-align: start;
}

.career-box h3 {
    color: white;
    margin-bottom: 10px;
}

.career-box p {
    color: white;
    font-size: 19px;
}

.job-grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px 30px;
    padding: 20px 0;
}

.job-card {
    display: flex;
    flex-direction: column;
}

.job-card h3 {
    color: #0D3B70;
    margin-bottom: 16px;
}

.job-card p {
    color: black;
    margin-bottom: 16px;
    flex-grow: 1;
}

.job-card .learn-more {
    color: #2E62FD;
    text-decoration: none;
    font-family: 'DM Sans';
    font-size: 20px;
}

.main-title {
    text-align: center;
    color: #0D3B70;
    margin-bottom: -10px;
}

.benefits-grid {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

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

.benefit-card {
    background-color: #E9F3FF;
    padding: 30px 30px;
    border-radius: 20px;
    text-align: center;
}

.benefit-card h3 {
    color: #0D3B70;
    margin: 0 0 17px 0;
}

.benefit-card p {
    color: black;
    font-size: 14px;
    margin: 0;
}

.center-circle {
    position: relative;
    width: 600px;
    height: 600px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
}

.image-wrapper {
    width: 520px;
    height: 520px;
    border-radius: 50%;
    overflow: hidden;
    background-color: transparent;
}

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

.career-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 50px;
    padding-bottom: 50px;
    font-family: sans-serif;
    gap: 60px;
}

.content-left {
    flex: 1;
}

.content-left h1 {
    color: #0D3B70;
    margin-bottom: 16px;
}

.content-left p {
    color: black;
    margin-bottom: 16px;
}

.content-left .dsp-button {
    border: 0;
}

.visual-right {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 20px;
    justify-content: end;
}

.career-banner-wrapper {
    position: relative;
    width: 460px;
    height: 350px;
    overflow: hidden;
    border-radius: 24px 24px 24px 24px;
}

.career-banner-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: transparent;

}

.decorative-bar {
    width: 60px;
    height: 350px;
    background-color: #0D3B70;
    border-radius: 24px;
}

@media (max-width: 768px) {
    .gallery-container { 
        gap: 20px;
    }

    .job-grid-container {
        grid-template-columns: 1fr;
    }

    .career-title-content p {
        margin-bottom: 40px;
    }

    .career-box-row {
        gap: 32px;
    }

    .career-box {
        display: flex;
        text-align: center;
        flex-direction: column;
        align-items: center;
    }

    .career-box h3 {
        font-size: 18px !important;
    }

    .career-box p {
        font-size: 14px !important;
    }

    .center-circle {
        width: 100%;
        height: max-content;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-bottom: 24px;
    }

    .image-wrapper {
        width: 220px;
        height: 220px;
        overflow: hidden;
    }

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

    .main-title {
        margin-bottom: 24px;
    }

    .benefits-grid {
        display: block;
    }

    .career-banner {
        flex-direction: column;
        gap: 48px;
    }

    .content-left {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .content-left h2 {
        margin-bottom: 20px;
    }

    .content-left p {
        text-align: center;
        margin-bottom: 20px;
    }

    .content-left .dsp-button {
        width: max-content;
    }

    .visual-right {}

    .career-banner-wrapper {
        position: relative;
        width: 270px;
        height: 207px;
    }

    .career-banner-wrapper img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        background: transparent;
    }

    .decorative-bar {
        width: 60px;
        height: 207px;
        background-color: #0D3B70;
        border-radius: 24px;
    }
}

/* ==========================================================================
   Single Job Page
   ========================================================================== */

.job-header {
    margin-top: 50px;
    margin-bottom: 40px;
}

.job-header h1 {
    color: #0D3B70;
    margin-bottom: 20px;
}

.job-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.job-title .dsp-button {
    border: none;
}

.job-meta {
    display: flex;
    align-items: center;
    gap: 16px;
}

.job-meta p {
    display: flex;
    align-items: center;
    margin-bottom: 0px;
    gap: 10px;
}

.job-icon {
    width: 25px;
    height: auto;
}

.job-description {
    padding: 40px;
    border-radius: 30px;
    background-color: #E9F3FF;
    margin-bottom: 80px !important;
}

.job-description * {
    color: #0D3B70 !important;
}

@media (max-width: 768px) {
    .job-header {
        margin-top: 36px;
        margin-bottom: 0px;
    }

    .job-header .dsp-button {
        border: none;
        width: max-content;
        margin-top: 32px;
        margin-bottom: 32px;
    }

    .job-meta p {
        font-size: 12px !important;
    }

    .job-icon {
        width: 12px;
        height: auto;
    }

    .job-title h1 {
        letter-spacing: -1.9px;
        margin-bottom: 8px;
        margin-top: 8px;
    }

    .job-description {
        margin-bottom: 40px !important;
    }

}

/* ==========================================================================
    Job Pop Up
   ========================================================================== */

/* Container Styling */
.application-form-container {
    background: #fff;
    padding: 30px;
    border-radius: 20px;
    max-width: 1000px;
    position: relative;
}

.application-form-container * {
    font-family: 'DM Sans', serif !important;
    font-size: 17px;
}

.form-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
}

.form-header h2 {
    color: #0D3B70;
    font-size: 34px;
}

.close-icon {
    font-size: 24px;
    cursor: pointer;
    color: #0D3B70;
}

/* Grid Layout */
.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0px 27px;
}

.form-group {
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
}

.full-width {
    grid-column: span 2;
}

/* Inputs and Labels */
.application-form-container label {
    display: block;
    margin-bottom: 10px;
    color: #0D3B70;
}

.application-form-container input:not([type="submit"]),
.application-form-container select,
.application-form-container textarea {
    width: 100%;
    padding: 8px 15px;
    border-radius: 8px;
}

.input-style {
    border: 1px solid #CBCBCB !important;
    border-radius: 8px;
}

/* Container for the whole input */
.phone-input-group {
    display: flex;
    align-items: stretch;
    border: 1px solid #CBCBCB;
    border-radius: 8px;
    overflow: hidden;
    background-color: #fff;
}

/* The left side wrapper */
.country-selector {
    background: transparent;
    border-right: 1px solid #CBCBCB;
    display: flex;
    align-items: center;
}

.country-selector select {
    border: none !important;
    background: transparent !important;
    padding: 0 10px 0 15px !important;
    height: 100% !important;
    color: #333;
    cursor: pointer;
    outline: none;

    appearance: none;
    -webkit-appearance: none;
    padding-right: 25px !important;
    background-image: url('data:image/svg+xml;charset=US-ASCII,<svg width="10" height="6" viewBox="0 0 10 6" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1 1L5 5L9 1" stroke="%23666" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>') !important;
    background-repeat: no-repeat !important;
    background-position: right 10px center !important;
}

/* The Phone Input field */
.phone-input-group input[type="tel"] {
    border: none !important;
    flex-grow: 1;
    padding: 8px 15px !important;
    outline: none;
}

.file-upload-wrapper {
    position: relative;
    overflow: hidden;
    display: inline-block;
    width: 100%;
}

.file-upload-wrapper input[type="file"] {
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0;
    cursor: pointer;
    height: 100%;
}

.upload-button {
    border: 2px solid #0D3B70;
    padding: 10px 20px;
    border-radius: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: max-content;
    pointer-events: none;
}

.upload-button p {
    color: #0D3B70 !important;
    font-weight: 700;
}

.form-footer {
    text-align: right;
    margin-top: 20px;
}

.wpcf7 input.wpcf7-submit[type="submit"] {
    background: #9D54F5 !important;
    color: white !important;
    border-radius: 6px !important;
    border: none !important;
    padding: 10px !important;
    width: max-content !important;
    font-size: 17px !important;
    font-weight: 400;
}

.wpcf7 input.wpcf7-submit[type="submit"]:hover {
    background-color: #7e3bbe !important;
}

.job-modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    z-index: 9999;
    overflow-y: auto;
    padding: 20px;
}

.job-modal-content {
    background: #fff;
    max-width: 1000px;
    margin: 50px auto;
    padding: 20px;
    border-radius: 15px;
    position: relative;
    box-shadow: 0 5px 30px rgba(0, 0, 0, 0.3);
}

.modal-close-btn {
    position: absolute;
    right: 20px;
    top: 15px;
    font-size: 30px;
    cursor: pointer;
    color: #0D3B70;
    z-index: 10;
    line-height: 1;
}

body.modal-open {
    overflow: hidden;
}

.job-modal-content .application-form-container {
    box-shadow: none;
    /* Remove shadow since modal has one */
    padding: 10px;
}

.job-breadcrumb {
    margin-top: 96px;
}

.job-breadcrumb a {
    text-decoration: none;
    color: black;
}

.job-breadcrumb a:hover {
    text-decoration: none;
    color: #2E62FD;
}

@media (max-width: 767px) {
    .form-grid {
        grid-template-columns: 1fr;
        margin-bottom: 20px;
    }

    .full-width {
        grid-column: span 1;
    }

    .job-breadcrumb {
        margin-top: 16px;
    }

    .form-header h2 {
        font-size: 18px !important;
    }

    .modal-close-btn {
        top: 18px;
    }

    .form-group label {
        font-size: 14px !important;
    }

    .application-form-container * {
        font-family: 'DM Sans', serif !important;
        font-size: 14px !important;
    }

    .wpcf7 input.wpcf7-submit[type="submit"] {
        font-size: 14px !important;
    }
}

/* ==========================================================================
    Contact Us Page
   ========================================================================== */
.contact-section {
    text-align: center;
}

.contact-section h1 {
    color: #0D3B70;
    margin-bottom: 50px;
}

.contact-section p {
    color: #0D3B70;
    font-size: 22px;
    margin-bottom: 45px;
    font-family: 'DM Sans', serif !important;
}

.contact-info {
    display: flex;
    justify-content: space-around;
    align-items: center;
    gap: 15px;
    align-self: stretch;
    font-family: 'DM Sans', sans-serif !important;
    font-size: 13px;
    /* was 20px */
    font-weight: 400;
    color: #0D3B70;
}

.contact-info .info-item {
    display: flex;
    align-items: center;
    text-align: left;
    gap: 8px;
}

.contact-info .info-item strong {
    font-weight: 700;
    white-space: nowrap;
}

/* Constrain address width so it wraps to ~2 lines */
.contact-info .info-item:first-child span {
    max-width: 400px;
}

/* Keep Phone and Email on a single line */
.contact-info .info-item:not(:first-child) span {
    white-space: nowrap;
}

/* hide the mobile line-break on desktop */
.contact-info .mobile-only {
    display: none;
}

/* Container & Background */
.contact-form-container {
    background-color: #e8f2ff;
    padding: 60px;
    border-radius: 20px;
}

.contact-form-container * {
    font-family: 'DM Sans', serif !important;
    font-size: 17px;
}

.contact-form-inner {
    display: flex;
    gap: 40px;
}

.contact-info-section {
    flex: 0.7;
}

.contact-form-title {
    color: #0D3B70;
    font-size: 32px;
    margin-bottom: 10px;
}

.contact-form-subtitle {
    color: #0D3B70;
}

/* Right Section */
.contact-fields-section {
    flex: 2.3;
    display: flex;
    flex-direction: column;
}

.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 27px;
}

.contact-form-group {
    margin-bottom: 20px;
}

.contact-full-width {
    grid-column: span 2;
}

/* Labels & Inputs */
.contact-form-container label {
    display: flex;
    margin-bottom: 10px;
    color: #1a3a5f;
}

.contact-form-group textarea {
    height: 200px !important;
}

.contact-form-container input:not([type="submit"]),
.contact-form-container textarea,
.contact-form-container select {
    width: 100%;
    padding: 15px 20px !important;
    border: 1px solid #CBCBCB !important;
    border-radius: 8px;
    background: #fff;
}

/* Phone Input Customization */
.contact-phone-group {
    display: flex;
    border: 1px solid #CBCBCB !important;
    border-radius: 8px;
    background: #fff;
    overflow: hidden;
}

.contact-country-selector {
    background: transparent;
    border-right: 1px solid #CBCBCB !important;
    display: flex;
    align-items: center;
}

.contact-country-selector select {
    border: none !important;
    color: #707070 !important;
    width: auto !important;
    padding: 0 10px !important;
    height: 100% !important;
    background: transparent !important;
}

.contact-phone-group input[type="tel"] {
    border: none !important;
}

.contact-form-footer {
    text-align: right;
    margin-top: 10px;
}

.contact-form-container .wpcf7 input.wpcf7-submit[type="submit"] {
    background-color: #9D54F5 !important;
    color: white !important;
    padding: 15px 40px !important;
    border-radius: 8px !important;
    border: none !important;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.3s ease;
}

@media (max-width: 768px) {
    .contact-form-inner {
        flex-direction: column;
    }

    .contact-grid {
        grid-template-columns: 1fr;
        gap: 0px;
        margin-bottom: 27px;
    }

    .contact-form-container {
        padding: 30px;
    }

    .contact-form-footer {
        width: 100% !important;
    }

    .wpcf7 input.wpcf7-submit[type="submit"] {
        width: 100% !important;
    }

    .contact-section p {
        margin-bottom: 24px;
    }

    .contact-section {
        text-align: start;
    }

    .contact-info {
        display: flex;
        flex-direction: column;
        font-family: 'DM Sans', sans-serif !important;
        font-size: 16px;
        color: #0D3B70;
        gap: 16px !important;
    }

    .contact-info .info-item {
        flex-direction: column;
        gap: 0;
		margin-bottom:20px;
    }

    .contact-info .info-item strong {
        font-size: 13px;
    }
	
	.contact-info .info-item strong:first-child{
		margin-bottom:-8px;
	}
	
	.contact-info .info-item br.mobile-only{
		display:none;
	}

    .contact-info .mobile-only {
        display: inline;
    }

    .info-item span {
        line-height: 160%;
        font-size: 14px;
    }
}

.dsp-pillars {
    --dsp-navy: #0D3B70;
    --dsp-blue: #2E62FD;
    position: relative;
    max-width: 1240px;
    margin: 0 auto;
    padding: 48px 28px;
    background: var(--dsp-bg);
    border-radius: 28px;
    overflow: hidden;
}
.dsp-pillars-stage {
    position: relative;
    width: 100%;
    min-height: clamp(440px, 40vw, 560px);
}
.dsp-pillars-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    z-index: 3;
    pointer-events: none;
}
.dsp-pillars-center .dsp-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.dsp-pillars-title {
    margin: 12px 0 0;
    font-size: clamp(26px, 3.4vw, 46px);
    font-weight: 700;
    line-height: 1.12;
    color: var(--dsp-navy);
}
.dsp-pillars-title span { color: var(--dsp-blue); }

.dsp-pillar {
    position: absolute;
    width: 132px;
    transform: translate(-50%, -50%);
    text-decoration: none;
    z-index: 1;
}
.dsp-pillar-inner {
    display: block;             
    opacity: 0;
    will-change: transform, opacity;
}
.dsp-pillar-tilt {          
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    transform: rotate(var(--dsp-tilt, 0deg));
    transform-origin: center center;
}
.dsp-pillar-icon {
    width: 90px;
    height: 90px;
    display: grid;
    place-items: center;
}
.dsp-pillar-icon img {
    max-width: 100%;
    height: auto;
    display: block;
}
.dsp-pillar-label {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.3;
    text-align: center;
    color: var(--dsp-navy);
    max-width: 132px;
}

.dsp-pos-1 { left: 25%; top: 12%; } /* top-left     */
.dsp-pos-2 { left: 73%; top: 11%; } /* top-right    */
.dsp-pos-3 { left: 10%; top: 49%; } /* mid-left     */
.dsp-pos-4 { left: 90%; top: 49%; } /* mid-right    */
.dsp-pos-5 { left: 29%; top: 85%; } /* bottom-left  */
.dsp-pos-6 { left: 69%; top: 84%; } /* bottom-right */

.dsp-pos-1 { --dsp-tilt: 7deg; }   /* top-left    (direction flipped) */
.dsp-pos-2 { --dsp-tilt: -10deg; } /* top-right   (direction flipped) */
.dsp-pos-3 { --dsp-tilt: -5deg; }  /* mid-left    */
.dsp-pos-4 { --dsp-tilt: 8deg; }   /* mid-right   */
.dsp-pos-5 { --dsp-tilt: -9deg; }  /* bottom-left */
.dsp-pos-6 { --dsp-tilt: 6deg; }   /* bottom-right */

@media (max-width: 767px) {
    .dsp-pillars { padding: 40px 16px; border-radius: 20px; }
    .dsp-pillars-stage {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 28px 12px;
        min-height: 0;
    }
    .dsp-pillars-center {
        position: static;
        transform: none;
        grid-column: 1 / -1;
        margin-bottom: 4px;
    }
    .dsp-pillar {
        position: static;
        transform: none;
        width: auto;
        margin: 0 auto;
    }
    .dsp-pillar-tilt {         
        transform: unset;

    }
}


@media (max-width: 425px) {
    .dsp-pos-1 { --dsp-tilt: 0deg; }   
    .dsp-pos-2 { --dsp-tilt: 0deg; } 
    .dsp-pos-3 { --dsp-tilt: 0deg; }  
    .dsp-pos-4 { --dsp-tilt: 0deg; }
    .dsp-pos-5 { --dsp-tilt: 0deg; }  
    .dsp-pos-6 { --dsp-tilt: 0deg; }  

}

.dsp-values {
    --dsp-navy:  #0D3B70;
    --dsp-muted: #5B6B82;
    --dsp-line:  #E2E8F0;
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 28px;
}

/* Shared text styling (grid + cards) */
.dsp-value-title {
    margin: 0 0 12px;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.25;
    color: var(--dsp-navy);
}
.dsp-value-desc {
    color: var(--dsp-muted);
    font-size: 14px;
    line-height: 1.6;
}
.dsp-value-desc p { margin: 0; }

/* ---- Desktop grid ---- */
.dsp-values-desktop {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: 60px;
    row-gap: 72px;
}
.dsp-values-desktop .dsp-value {
    position: relative;
}
/* Divider: a short line centered in the gutter (equal gap left & right),
    vertically centered on the block. Skipped on the first column of each row. */
.dsp-values-desktop .dsp-value:not(:nth-child(3n+1))::before {
    content: "";
    position: absolute;
    left: -30px;              /* = negative HALF of column-gap → dead-center of the gutter */
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 72px;             /* fixed & short — no longer the full block height */
    background: var(--dsp-line);
}

/* ---- Mobile carousel (hidden on desktop) ---- */
.dsp-values-carousel { display: none; }

@media (max-width: 767px) {
    .dsp-values { padding: 28px 16px; }
    .dsp-values-desktop { display: none; }
    .dsp-values-carousel { display: block; }

    .dsp-values-viewport { overflow: hidden; width: 100%; }
    .dsp-values-track {
        display: flex;
        transition: transform .35s ease;
        will-change: transform;
    }
    .dsp-value-slide {
        flex: 0 0 100%;
        min-width: 0;          /* stops flex overflow / scroll drift */
        box-sizing: border-box;
        padding: 4px;
        display: flex;         /* lets the card stretch to equal height */
    }
    .dsp-value--card {
        flex: 1;
        background: #fff;
        border: 1px solid var(--dsp-line);
        border-radius: 16px;
        padding: 24px;
        box-shadow: 0 8px 24px rgba(13, 59, 112, .06);
    }
    .dsp-value--card .dsp-value-title { font-size: 19px; }

    .dsp-values-nav {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 16px;
        margin-top: 20px;
    }
    .dsp-values-arrow {
        width: 44px;
        height: 44px;
        border-radius: 50%;
        border: 1px solid var(--dsp-line);
        background: #fff;
        color: var(--dsp-navy);
        font-size: 22px;
        line-height: 1;
        display: grid;
        place-items: center;
        cursor: pointer;
        transition: background .2s ease, color .2s ease;
        -webkit-tap-highlight-color: transparent;
    }
    .dsp-values-arrow:active { background: var(--dsp-navy); color: #fff; }

    .dsp-values-dots { display: flex; gap: 8px; }
    .dsp-values-dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: var(--dsp-line);
        border: none;
        padding: 0;
        cursor: pointer;
        transition: width .2s ease, background .2s ease;
    }
    .dsp-values-dot.is-active {
        width: 22px;
        border-radius: 5px;
        background: var(--dsp-navy);
    }
}



.dsp-timeline{
  --tl-accent:#2E62FD;   /* dot, fill, badges */
  --tl-track:#D9E1F2;    /* un-filled line    */
  --tl-card-bg:#EEF2FB;  /* card background   */
  --tl-navy:#0D3B70;     /* card title        */
  --tl-muted:#5B6B82;    /* card paragraph    */
  position:relative;
  max-width:800px;       /* timeline column width — tune to your Elementor column */
  margin:0 auto;
  padding:24px 0;
}
.dsp-timeline *{box-sizing:border-box;}

/* the vertical line + its animated parts */
.dsp-timeline-line{
  position:absolute;top:0;bottom:0;left:50%;
  width:2px;transform:translateX(-50%);
  background:var(--tl-track);border-radius:2px;
}
.dsp-timeline-fill{
  position:absolute;top:0;left:0;width:100%;height:0;
  background:var(--tl-accent);border-radius:2px;
}
.dsp-timeline-dot{
  position:absolute;top:0;left:50%;
  width:14px;height:14px;border-radius:50%;
  background:var(--tl-accent);transform:translate(-50%,-50%);
  box-shadow:0 0 0 4px rgba(46,98,253,.15);
}

/* stages */
.dsp-timeline-item{
  position:relative;display:flex;margin-bottom:56px;
  opacity:0;transform:translateY(20px);
  transition:opacity .5s ease,transform .5s ease;
}
.dsp-timeline-item:last-child{margin-bottom:0;}
.dsp-timeline-item.is-visible{opacity:1;transform:none;}
.dsp-timeline-item.is-left{justify-content:flex-start;}
.dsp-timeline-item.is-right{justify-content:flex-end;}

.dsp-timeline-badge{
  position:absolute;left:50%;top:16px;transform:translateX(-50%);
  width:34px;height:34px;border-radius:50%;
  background:var(--tl-accent);color:#fff;
  font-size:14px;font-weight:700;
  display:grid;place-items:center;z-index:2;
}

.dsp-timeline-card{
  width:calc(50% - 42px);
  background:var(--tl-card-bg);
  border-radius:14px;padding:18px 20px;
}
.dsp-timeline-card h3{margin:0 0 8px;font-size:17px;font-weight:700;color:var(--tl-navy);}
.dsp-timeline-card p{margin:0;font-size:17px;line-height:1.6;color:var(--tl-muted);}

/* mobile: line to the left, all cards stacked to its right */
@media (max-width:767px){
  .dsp-timeline{padding:8px 0;}
  .dsp-timeline-line{left:19px;transform:none;}
  .dsp-timeline-badge{left:19px;top:0;}
  .dsp-timeline-item{margin-bottom:34px;}
  .dsp-timeline-item.is-left,
  .dsp-timeline-item.is-right{justify-content:flex-start;}
  .dsp-timeline-card{width:100%;margin-left:52px;}
  .dsp-timeline-card p{margin:0;font-size:13px;line-height:1.6;color:var(--tl-muted);}
}

@media (prefers-reduced-motion:reduce){
  .dsp-timeline-item{opacity:1;transform:none;transition:none;}
}

/*chester css*/

.div-models {
  	flex: 1;
  	width: 100%;
  	position: relative;
  	border-radius: 20px;
  	border: 1px solid #e9e9e9;
  	box-sizing: border-box;
  	display: flex;
  	flex-direction: column;
  	align-items: flex-start;
  	padding: 30px;
  	text-align: left;
  	color: #0d3b70;
  	font-family: Manrope;
    height: 100%;
    min-height: 225px;
}
.div-models .title-parent {
  	align-self: stretch;
  	display: flex;
  	flex-direction: column;
  	align-items: flex-start;
  	gap: 16px;
}
.div-models .title {
  	align-self: stretch;
  	position: relative;
  	display: inline-block;
  	flex-shrink: 0;
}
.div-models .desc {
  	align-self: stretch;
  	position: relative;
  	font-size: 19px;
  	line-height: 160%;
  	font-family: 'Plus Jakarta Sans';
  	color: #4d4d4d;
}

.engagement-html-wrapper {
    height: 100%;
}

/*client marquee*/

.client-marquee .swiper-wrapper {
    -webkit-transition-timing-function: linear !important;
    transition-timing-function: linear !important; 
}

/* Create the fade effect on the left and right edges */
.client-marquee {
    -webkit-mask-image: linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 15%, rgba(0,0,0,1) 85%, rgba(0,0,0,0) 100%);
    mask-image: linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 15%, rgba(0,0,0,1) 85%, rgba(0,0,0,0) 100%);
}

.elementor-element-978d678.marquee-2 {
    padding: 90px 0 !important;
}

/* Layout container */
.nav-div {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

/* 1. Left side - keep logo to its natural size */
.site-branding {
    flex: 0 0 auto;
}

/* 2. Center side - tells the menu to occupy the middle space and center its contents */
.menu-div {
    flex: 1 1 auto;
    display: flex;
    justify-content: center;
}

/* 3. Right side - groups the button and mobile toggle */
.header-right-actions {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
}

/* Button styling based on your image_eb7023.png */
.desktop-contact-btn {
    background-color: #ffffff !important;
    color: #0D3B70 !important;
    font-size: 14px;
    font-weight: 500;
    padding: 12px 28px !important;
    border-radius: 50px !important;
    height: auto !important;
    line-height: normal !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s ease;
}

.desktop-contact-btn:hover {
    background-color: #a855f7 !important;
    color: #FFF !important;
    transition: background-color 0.3s ease;
}

.desktop-contact-btn:hover {
    background-color: #f0f0f0;
    color: #0b2559;
    text-decoration: none;
}

/* Mobile responsive rules */
@media (min-width: 992px) {
    .mobile-only {
        display: none !important;
    }
}

@media (max-width: 991px) {
    .desktop-only {
        display: none !important;
    }
    /* Hide the center menu on mobile if your sidebar menu takes over */
    .menu-div { 
        display: none !important; 
    }
}