.adi-section {
    position: relative !important;
    height: 492px !important;
    overflow: hidden !important;
    color: white !important;
}

.adi-background-video {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    z-index: -1 !important;
}

.adi-video-overlay {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(102deg, rgba(151, 71, 255, 0.00) 24.33%, rgba(151, 71, 255, 0.24) 60.68%),
                linear-gradient(82deg, rgba(0, 0, 0, 0.63) 18.22%, rgba(0, 0, 0, 0.00) 61.29%),
                linear-gradient(0deg, rgba(0, 0, 0, 0.20) 0%, rgba(0, 0, 0, 0.20) 100%) !important;
    background-blend-mode: color, normal, normal !important;
    z-index: -1 !important;
}

.adi-title {
    color: #FFF !important;
    font-family: Manrope !important;
    font-size: 47.78px !important;
    font-style: normal !important;
    font-weight: 700 !important;
    line-height: 120% !important;
    letter-spacing: -2.389px !important;
    padding-left: 102px !important;
    padding-top: 150px !important;
    width: fit-content !important;
}

.adi-subtitle {
    display: block !important;
    width: 100% !important;
}

.adi-subheading {
    color: #FFF !important;
    font-family: Manrope !important;
    font-size: 23.04px !important;
    font-style: normal !important;
    font-weight: 700 !important;
    line-height: normal !important;
    letter-spacing: -0.461px !important;
    padding-left: 102px !important;
    padding-top: 26px !important;
}

.adi-description {
    color: #FFF !important;
    font-family: Manrope !important;
    font-size: 17px !important;
    font-style: normal !important;
    font-weight: 500 !important;
    line-height: normal !important;
    letter-spacing: -0.34px !important;
    padding-left: 102px !important;
}

.adi-button {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    border-radius: 4px !important;
    background: rgba(255, 255, 255, 0.08) !important;
    backdrop-filter: blur(10px) !important;
    padding: 8px 12px !important;
    margin-left: 102px !important;
    margin-top: 16px !important;
    max-width: fit-content !important;
    cursor: pointer !important;
}

.adi-button-text {
    color: #1CD488 !important; /* Blended color */
    font-family: Manrope !important;
    font-size: 19.2px !important;
    font-style: normal !important;
    font-weight: 700 !important;
    line-height: normal !important;
    letter-spacing: -0.384px !important;
}


/* Responsive Styles */
@media (max-width: 1800px) {
    .adi-section {
        height: auto !important; 
        padding: 20px 20px 70px 50px !important; 
    }
    
    .adi-title {
        font-size: 36px !important; 
        padding-left: 20px !important; 
        padding-top: 60px !important; 
    }
    
    .adi-subheading {
        font-size: 20px !important; 
        padding-left: 20px !important; 
        padding-top: 20px !important;
    }
    
    .adi-description {
        font-size: 16px !important; 
        padding-left: 20px !important;
        padding-top: 10px !important; 
    }
    
    .adi-button {
        padding: 8px 12px !important; 
        margin-left: 20px !important; 
        margin-top: 12px !important; 
        max-width: fit-content !important; 
    }
    
    .adi-button-text {
        font-size: 18px !important; 
    }
}


@media (max-width: 800px) {
    .adi-section {
        height: auto !important; 
        padding: 20px 20px 70px 20px !important; 
    }

}

@media (max-width: 500px) {
    .adi-section {
        height: auto !important; 
        padding: 20px 20px 60px 10px !important; 
    }

}

/* next section */

.smd-services {
    background-image: url('../images/smd-background.jpg') !important;
    height: auto;
    padding: 20px 20px 40px 20px;
}

.smd-header {
    padding-top: 28px;
    width: 561px !important;
    color: #FFF !important;
    text-align: center !important;
    font-family: Manrope !important;
    font-size: 27.65px !important;
    font-style: normal !important;
    font-weight: 700 !important;
    line-height: normal !important;
    letter-spacing: -0.691px !important;
    margin: 0 auto !important;
}

.smd-content {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 40px;
    margin-top: 45px;
    align-items: center;
}

.smd-video-container {
    width: 384px;
    height: auto;
    overflow: hidden;
    position: relative;
    border-radius: 8px;
}

.smd-video {
    width: 100%;
    height: 100%;
    border-radius: 8px;
}

.smd-video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.20) 0%, rgba(0, 0, 0, 0.20) 100%);
    border-radius: 8px;
}

.smd-text-container {
    width: 500px;
}

.smd-text {
    font-size: 16px !important;
    font-family: Manrope !important;
    font-style: normal !important;
    font-weight: 400 !important;
    line-height: normal !important;
}

.smd-image-container {
    display: flex;
    justify-content: center;
    margin-top: 45px;
}

.smd-image {
    background-image: url('../images/ai-automation.jpg') !important;
    width: 443px;
    height: 205px;
    border-radius: 8px;
}

.smd-text-section {
    display: flex;
    justify-content: center;
    margin-top: 20px;
}

.smd-text-section p {
    color: #FFF !important;
    text-align: center !important;
    font-family: Manrope !important;
    font-size: 16px !important;
    font-style: normal !important;
    font-weight: 400 !important;
    line-height: normal !important;
    width: 500px !important;
}



@media screen and (max-width: 1800px) {
    .smd-services {
        padding: 20px 15px 40px 15px;
        width: 100%;
        box-sizing: border-box;
    }

}

@media screen and (max-width: 1024px) {
    .smd-content {
        flex-direction: column;
        gap: 30px;
        margin-top: 30px;
    }

    .smd-video-container {
        width: 100%;
        max-width: 384px;
    }

    .smd-text-container {
        width: 100%;
        max-width: 500px;
        padding: 0 15px;
    }

    .smd-image {
        width: 100%;
        max-width: 443px;
        background-size: cover;
        background-position: center;
    }

    .smd-header {
        width: 100% !important;
        max-width: 561px;
        font-size: calc(20px + 1vw);
        padding: 20px 15px;
        box-sizing: border-box;
    }
}

@media screen and (max-width: 768px) {
    .smd-services {
        padding: 15px 15px 30px 15px;
    }

    .smd-header {
        font-size: 22px !important;
        letter-spacing: -0.5px !important;
        padding: 15px 10px;
    }

    .smd-content {
        margin-top: 20px;
        gap: 20px;
    }

    .smd-text {
        font-size: 14px !important;
    }

    .smd-image-container {
        margin-top: 30px;
    }

    .smd-image {
        height: 180px;
    }

    .smd-text-section {
        margin-top: 15px;
    }

    .smd-text-section p {
        font-size: 14px !important;
        width: 100% !important;
        max-width: 500px !important;
        padding: 0 15px;
    }
}

@media screen and (max-width: 480px) {
    .smd-services {
        padding: 10px 10px 25px 10px;
    }

    .smd-header {
        font-size: 20px !important;
        padding: 10px 8px;
    }

    .smd-content {
        margin-top: 15px;
        gap: 15px;
    }

    .smd-text {
        font-size: 13px !important;
    }

    .smd-image {
        height: 150px;
    }

    .smd-text-section p {
        font-size: 13px !important;
        padding: 0 10px;
    }
}


/* next section */

.fai-section {
    height: 124px;
    background: linear-gradient(90deg, #2BA88A 0.66%, rgba(43, 168, 138, 0.00) 87.19%), 
                linear-gradient(90deg, rgba(0, 0, 0, 0.10) -14.81%, rgba(0, 0, 0, 0.00) 83.36%), 
                linear-gradient(90deg, rgba(151, 71, 255, 0.00) 18.16%, #9747FF 100%), 
                #5F5F5F;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    overflow: hidden !important;
    position: relative !important;
}

.fai-text {
    flex-grow: 1;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: var(--Light-Gray, #F5F5F5) !important;
    font-family: Manrope !important;
    font-size: 19.2px !important;
    font-style: normal !important;
    font-weight: 700 !important;
    line-height: normal !important;
    letter-spacing: -0.384px !important;
}

.fai-image {
    margin: 0 !important;
}

.fai-button {
    border: none !important;
    display: inline-flex !important;
    padding: 8px 16px !important;
    justify-content: center !important;
    align-items: center !important;
    border-radius: 5px !important;
    background: linear-gradient(0deg, #FFF 0%, #FFF 100%) !important;
    box-shadow: 0px 3px 10px 0px rgba(0, 0, 0, 0.40) !important;
    position: absolute !important;
    right: 250px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    transition: all 250ms ease-out !important;
}

.fai-button:hover {
    background: #2BA88A !important; /* Change button background on hover */
    transition: all 250ms ease-out !important;
}

.fai-button:hover .fai-button-text,
.fai-button:hover .fai-icon {
    color: #FFF !important; /* Change text and icon color to white on hover */
}

.fai-button:hover .fai-icon {
    transform: translateX(5px); /* Move icon slightly to the right */
    transition: transform 250ms ease-out !important; /* Ensure smooth transition for the icon movement */
}

.fai-button-text {
    color: #2BA88A !important; /* Default text color */
    font-family: Manrope !important;
    font-size: 17px !important;
    font-style: normal !important;
    font-weight: 700 !important;
    line-height: normal !important;
    letter-spacing: -0.34px !important;
}

.fai-icon {
    color: #2BA88A !important; /* Default icon color */
    transition: color 250ms ease-out !important; /* Smooth color transition */
}



/* Media Queries */
@media screen and (max-width: 1800px) {
    .fai-text {
        font-size: 18px !important;
    }
}

@media screen and (max-width: 1200px) {
    .fai-text {
        font-size: 16px !important;
    }
    
    .fai-button-text {
        font-size: 15px !important;
    }
}

@media screen and (max-width: 768px) {
    .fai-section {
        flex-direction: column;
        height: auto;
        padding: 20px 15px;
        text-align: center;
        align-items: center !important; /* Ensure center alignment */
    }
    
    .fai-text {
        width: 100% !important;
        justify-content: center !important;
        text-align: center;
        padding-right: 0;
        padding-bottom: 15px;
    }

    .fai-text span {
        text-align: center !important;
        display: block !important;
    }
    
    .fai-image {
        display: none !important;
    }
    
    .fai-button {
        margin: 15px auto 0 !important; /* Center button with auto margins */
        position: relative !important;
        left: 0 !important;
        transform: none !important;
    }
}

@media screen and (max-width: 480px) {
    .fai-section {
        padding: 15px 10px;
    }

    .fai-text {
        font-size: 14px !important;
    }
    
    .fai-button-text {
        font-size: 14px !important;
    }
    
    .fai-button {
        padding: 6px 12px !important;
        width: auto !important;
        max-width: 90% !important; /* Prevent button from touching edges */
    }
}




/* next section */

.ads-services {
    background-image: url('../images/adi-background.jpg') !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    padding-bottom: 50px;
}

.ads-services__subtitle {
    text-align: center !important;
    padding-top: 47px !important;
    color: #2BA88A !important;
    font-family: Manrope !important;
    font-size: 23.04px !important;
    font-weight: 700 !important;
    margin: 0 !important;
}

.ads-services__title {
    text-align: center !important;
    color: #FFF !important;
    font-family: Manrope !important;
    font-size: 33.18px !important;
    font-weight: 700 !important;
    margin: 0 !important;
}

.ads-services__title-italic {
    text-align: center !important;
    color: #FFF !important;
    font-size: 33.18px !important;
    font-style: italic !important;
    font-weight: 600 !important;
    margin: 0 !important;
}

.ads-services__card {
    border-radius: 6px !important;
    border: 1px solid rgba(141, 141, 141, 0.45) !important;
    display: flex !important;
    padding: 24px 32px !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 20px !important;
    background: linear-gradient(339deg, rgba(43, 168, 138, 0.00) 70.02%, rgba(43, 168, 138, 0.06) 125.86%), rgba(22, 26, 27, 0.30) !important;
    cursor: pointer;
    transition: opacity 0.3s ease-in-out !important;
}

.ads-services__card2{
    border-radius: 6px !important;
    border: 1px solid rgba(141, 141, 141, 0.45) !important;
    display: flex !important;
    padding: 24px 32px !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 20px !important;
    background: linear-gradient(339deg, rgba(43, 168, 138, 0.00) 70.02%, rgba(43, 168, 138, 0.06) 125.86%), linear-gradient(174deg, rgba(31, 36, 37, 0.00) 88.62%, #1F2425 115.43%), linear-gradient(180deg, #1F2425 36.94%, rgba(31, 36, 37, 0.02) 99.86%), rgba(22, 26, 27, 0.30) !important;
    cursor: pointer;
    transition: all 0.3s ease-in-out !important;
}

.ads-services__icon-wrapper {
    border-radius: 23px !important;
    background: linear-gradient(149deg, rgba(38, 122, 184, 0.04) 13.38%, rgba(63, 241, 254, 0.20) 92.16%), 
                linear-gradient(0deg, rgba(240, 74, 255, 0.11) 0%, rgba(240, 74, 255, 0.11) 100%), 
                #1F2425 !important;
    width: 46px !important;
    height: 46px !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    transition: all 0.3s ease-in-out !important;
}

.ads-services__icon {
    width: 24px !important;
    height: 24px !important;
    object-fit: contain !important;
}

.ads-services__card-title {
    color: #EDEDED !important;
    font-family: Manrope !important;
    font-size: 20px !important;
    margin: 0 !important;
    letter-spacing: -0.4px !important;
}

.ads-services__card-description {
    color: rgba(237, 237, 237, 0.70) !important;
    font-size: 14px !important;
    margin: 0 !important;
    transition: color 0.3s ease-in-out !important;

}

.ads-services__read-more {
    color: #2BA88A !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    margin-top: auto !important;
    align-self: flex-end !important;
    opacity: 0.5 !important;
    transition: opacity 0.3s ease-in-out !important;
}

.ads-services__icon-wrapper {
    position: relative !important;
    width: 46px !important;
    height: 46px !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    background: #1F2425 !important;
    overflow: hidden !important;
}

.ads-services__icon-wrapper::before,
.ads-services__icon-wrapper::after {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    transition: opacity 0.5s ease-in-out !important;  /* Increased duration and changed timing function */
}

.ads-services__icon-wrapper::before {
    background: linear-gradient(149deg, rgba(38, 122, 184, 0.04) 13.38%, rgba(63, 241, 254, 0.20) 92.16%),
                linear-gradient(0deg, rgba(240, 74, 255, 0.11) 0%, rgba(240, 74, 255, 0.11) 100%) !important;
    opacity: 1 !important;
}

.ads-services__icon-wrapper::after {
    background: linear-gradient(149deg, rgba(38, 122, 184, 0.04) 13.38%, rgba(63, 241, 254, 0.40) 92.16%),
                linear-gradient(0deg, rgba(240, 74, 255, 0.22) 0%, rgba(240, 74, 255, 0.22) 100%) !important;
    opacity: 0 !important;
}

.ads-services__card:hover .ads-services__icon-wrapper::before {
    opacity: 0 !important;
}

.ads-services__card:hover .ads-services__icon-wrapper::after {
    opacity: 1 !important;
}

.ads-services__card2:hover .ads-services__icon-wrapper::before {
    opacity: 0 !important;
}

.ads-services__card2:hover .ads-services__icon-wrapper::after {
    opacity: 1 !important;
}

/* .ads-services__card:hover .ads-services__icon-wrapper {
    background: linear-gradient(149deg, rgba(38, 122, 184, 0.04) 13.38%, rgba(63, 241, 254, 0.40) 92.16%),
                linear-gradient(0deg, rgba(240, 74, 255, 0.22) 0%, rgba(240, 74, 255, 0.22) 100%),
                #1F2425 !important;
}

.ads-services__card2:hover .ads-services__icon-wrapper {
    background: linear-gradient(149deg, rgba(38, 122, 184, 0.04) 13.38%, rgba(63, 241, 254, 0.40) 92.16%),
                linear-gradient(0deg, rgba(240, 74, 255, 0.22) 0%, rgba(240, 74, 255, 0.22) 100%),
                #1F2425 !important;
} */

.ads-services__card:hover .ads-services__card-description {
    color: #EDEDED !important;
}

.ads-services__card2:hover .ads-services__card-description {
    color: #EDEDED !important;
}

.ads-services__card:hover .ads-services__read-more {
    opacity: 1 !important;
}

.ads-services__card2:hover .ads-services__read-more {
    opacity: 1 !important;
}

.ads-services__card {
    position: relative;
    border-radius: 6px; /* Adjust as needed */
    overflow: hidden;
    z-index: 1;
}

/* Hover effect with gradient border */
.ads-services__card::before {
    content: "";
    position: absolute;
    inset: 0; /* Fills the parent element */
    padding: 1px; /* Border thickness */
    border-radius: 8px;
    background: conic-gradient(
        from 180deg, 
        rgba(81, 186, 231, 0.7) 14%,   /* #51BAE7 */
        rgba(193, 81, 231, 0.9) 31%,   /* #C151E7 */
        rgba(220, 220, 220, 0.5) 54%,    /* Light Grey replacing White */
        rgba(81, 186, 231, 0.44) 63%,  /* #51BAE7 */
        rgba(200, 200, 200, 0.45) 87%, /* Grey with Opacity */
        rgba(180, 180, 180, 0.5) 90%     /* Solid Grey */
      );
    opacity: 0; /* Default state with no visibility */
    transition: opacity 0.3s ease-in-out; /* Smooth transition */
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: destination-out;
    mask-composite: exclude;
    pointer-events: none; /* Ensure this pseudo-element doesn't block interactions */
    z-index: -1; /* Send it behind the card content */
}

/* On hover, the gradient border appears */
.ads-services__card:hover::before {
    opacity: 1; /* Make the gradient visible on hover */
}



.ads-services__card2 {
    position: relative;
    border-radius: 6px; /* Adjust as needed */
    overflow: hidden;
    z-index: 1;
}

/* Hover effect with gradient border */
.ads-services__card2::before {
    content: "";
    position: absolute;
    inset: 0; /* Fills the parent element */
    padding: 1px; /* Border thickness */
    border-radius: 8px;
    background: conic-gradient(
        from 180deg, 
        rgba(81, 186, 231, 0.7) 14%,   /* #51BAE7 */
        rgba(193, 81, 231, 0.9) 31%,   /* #C151E7 */
        rgba(220, 220, 220, 0.5) 54%,    /* Light Grey replacing White */
        rgba(81, 186, 231, 0.44) 63%,  /* #51BAE7 */
        rgba(200, 200, 200, 0.45) 87%, /* Grey with Opacity */
        rgba(180, 180, 180, 0.5) 90%     /* Solid Grey */
      );
    opacity: 0; /* Default state with no visibility */
    transition: opacity 0.3s ease-in-out; /* Smooth transition */
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: destination-out;
    mask-composite: exclude;
    pointer-events: none; /* Ensure this pseudo-element doesn't block interactions */
    z-index: -1; /* Send it behind the card content */
}

/* On hover, the gradient border appears */
.ads-services__card2:hover::before {
    opacity: 1; /* Make the gradient visible on hover */
}


@media (min-width: 768px) and (max-width: 992px) {
    .ads-services {
        padding: 20px !important; 
    }

    .ads-services__subtitle {
        font-size: 20px !important; 
        padding-top: 30px !important; 
    }

    .ads-services__title {
        font-size: 28px !important; 
    }

    .ads-services__title-italic {
        font-size: 28px !important; 
    }

    .ads-services__card {
        padding: 16px 24px !important; 
        gap: 15px !important; 
    }

    .ads-services__card2 {
        padding: 16px 24px !important; 
        gap: 15px !important; 
    }

    .ads-services__card-title {
        font-size: 18px !important; 
    }

    .ads-services__card-description {
        font-size: 13px !important; 
    }

    .ads-services__read-more {
        font-size: 13px !important; 
    }

    .ads-services__icon-wrapper {
        width: 40px !important; 
        height: 40px !important; 
    }

    .ads-services__icon {
        width: 20px !important; 
        height: 20px !important; 
    }
}

@media (min-width: 1200px) and (max-width: 1400px) {
 

    .ads-services__card {
        padding: 20px 28px !important; 
        gap: 18px !important; 
    }

    .ads-services__card2 {
        padding: 20px 28px !important; 
        gap: 18px !important; 
    }

    .ads-services__card-title {
        font-size: 19px !important; 
    }

}

@media (max-width: 1800px) {
    .ads-services__card-description {
        font-size: 14px !important;
    }
}

@media (max-width: 1400px) {
    .ads-services__card-description {
        font-size: 15px !important;
    }
}

@media (max-width: 768px) {
    .ads-services {
        padding: 15px !important; 
    }

    .ads-services__subtitle {
        font-size: 18px !important; 
        padding-top: 20px !important; 
    }

    .ads-services__title {
        font-size: 24px !important; 
    }

    .ads-services__title-italic {
        font-size: 24px !important; 
    }

    .ads-services__grid {
        flex-direction: column !important; 
        align-items: center !important; 
    }

    .ads-services__card,
    .ads-services__card2 {
        width: 100% !important; 
        padding: 16px 20px !important; 
        margin-bottom: 20px !important; 
    }

    .ads-services__card-title {
        font-size: 16px !important; 
    }

    .ads-services__card-description {
        font-size: 12px !important; 
    }

    .ads-services__read-more {
        font-size: 12px !important; 
        opacity: 0.7 !important; 
    }

    .ads-services__icon-wrapper {
        width: 40px !important;
        height: 40px !important; 
    }

    .ads-services__icon {
        width: 20px !important; 
        height: 20px !important; 
    }
}

/* next section */

.bic-section {
    display: flex !important;
    justify-content: center !important;
    gap: 80px !important;
    padding-top: 50px !important;
    padding-bottom: 50px !important;
    background-image: url('../images/bic-background.jpg') !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    height: auto !important;
}

.bic-image-container {
    width: 255px !important;
    height: 332px !important;
    flex-shrink: 0 !important;
    border-radius: 20px !important;
    background: url('/images/acufore-collaborators.png') lightgray 50% / cover no-repeat !important;
}

.bic-text-section {
    max-width: 459px !important;
}

.bic-heading-small {
    color: #2BA88A !important;
    font-family: 'Manrope', sans-serif !important;
    font-size: 16px !important;
    font-style: normal !important;
    font-weight: 400 !important;
    line-height: normal !important;
    margin: 0 !important;
}

.bic-heading-large {
    color: #FFF !important;
    font-family: 'Manrope', sans-serif !important;
    font-size: 33.18px !important;
    font-style: normal !important;
    font-weight: 700 !important;
    line-height: normal !important;
    letter-spacing: -0.995px !important;
    margin: 0 !important;
}

.bic-paragraph {
    color: #FFF !important;
    font-family: 'Manrope', sans-serif !important;
    font-size: 16px !important;
    font-style: normal !important;
    font-weight: 400 !important;
    line-height: normal !important;
}





@media (max-width: 768px) { /* Specific styles for mobile devices */
    .bic-section {
        flex-direction: column !important; /* Stack items vertically on mobile */
        align-items: center !important; /* Center align the items */
        padding: 20px !important; /* Adjust padding for mobile */
        gap: 0px !important; /* Set gap to 0 */
    }

    .bic-image-container {
        width: 80% !important; /* Make image container responsive */
        max-width: 255px !important; /* Limit max width */
        margin-bottom: 20px !important; /* Add spacing below the image */
    }

    .bic-text-section {
        max-width: 90% !important; /* Make text section responsive */
        text-align: center !important; /* Center text on mobile */
    }

    .bic-heading-large {
        font-size: 22px !important; /* Adjust font size for large heading */
        margin-bottom: 10px !important;
    }

    .bic-paragraph {
        font-size: 14px !important; /* Adjust paragraph font size for mobile */
    }
}


/* next section */

.yws-section {
    padding-top: 50px !important;
    padding-bottom: 50px !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}

.yws-section-container {
    display: inline-flex;
    padding: 32px 67px 64px 67px;
    flex-direction: column;
    align-items: center;
    border-radius: 8px;
    background: 
        linear-gradient(0deg, rgba(0, 0, 0, 0.20) 0%, rgba(0, 0, 0, 0.20) 100%), 
        radial-gradient(75.97% 57.91% at 62.6% 4.12%, rgba(255, 255, 255, 0.20) 0%, rgba(255, 255, 255, 0.00) 100%), 
        linear-gradient(305deg, rgba(62, 208, 173, 0.00) 77.21%, rgba(62, 208, 173, 0.10) 92%), 
        linear-gradient(305deg, rgba(43, 168, 138, 0.00) 29.75%, rgba(43, 168, 138, 0.06) 72.8%), 
        #36414D;
    box-shadow: 0px 8px 25px 0px rgba(0, 0, 0, 0.25);
}

.yws-section-container {
    position: relative;
    border-radius: 8px; /* Adjust as needed */
    overflow: hidden;
    z-index: 1;
}

/* Hover effect with gradient border */
.yws-section-container::before {
    content: "";
    position: absolute;
    inset: 0; /* Fills the parent element */
    padding: 1px; /* Border thickness */
    border-radius: 8px;
    background: conic-gradient(
        from 180deg, 
        rgba(81, 186, 231, 0.7) 14%,   /* #51BAE7 */
        rgba(193, 81, 231, 0.9) 31%,   /* #C151E7 */
        rgba(220, 220, 220, 0.5) 54%,    /* Light Grey replacing White */
        rgba(81, 186, 231, 0.44) 63%,  /* #51BAE7 */
        rgba(200, 200, 200, 0.45) 87%, /* Grey with Opacity */
        rgba(180, 180, 180, 0.5) 90%     /* Solid Grey */
      );
    -webkit-mask: linear-gradient(#fff 0 0) content-box, 
                  linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, 
          linear-gradient(#fff 0 0);
    -webkit-mask-composite: destination-out;
    mask-composite: exclude;
    pointer-events: none; /* Ensure this pseudo-element doesn’t block interactions */
    z-index: -1; /* Send it behind the card content */
}

/* On hover, the gradient border appears */
.yws-section-container:hover::before {
    opacity: 1;
    transition: opacity 0.3s ease-in-out;
}


.yws-section-title {
    color: rgba(255, 255, 255, 0.50) !important;
    text-align: center !important;
    font-family: 'Manrope', sans-serif !important;
    font-size: 16px !important;
    font-style: normal !important;
    font-weight: 500 !important;
    line-height: normal !important;
    letter-spacing: -0.32px !important;
}

.yws-section-subtitle {
    color: #FFF !important;
    text-align: center !important;
    font-family: 'Manrope', sans-serif !important;
    font-size: 33.18px !important;
    font-style: normal !important;
    font-weight: 700 !important;
    line-height: normal !important;
    letter-spacing: -0.995px !important;
    margin: 0 !important; /* Removes default margin */
}

.yws-section-header {
    color: #FFF !important;
    text-align: center !important;
    font-family: 'Manrope', sans-serif !important;
    font-size: 19.2px !important;
    font-style: normal !important;
    font-weight: 700 !important;
    line-height: normal !important;
    letter-spacing: -0.384px !important;
    margin: 0 !important; /* Removes default margin */
}

.yws-section-boxes {
    display: flex !important;
    justify-content: center !important;
    gap: 20px !important;
    margin-top: 20px !important;
}

.yws-section-box {
    display: flex;
    width: 327px;
    height: 178px;
    padding: 25px 31px 0px 29px;
    flex-direction: column;
    gap: 7px;
    border-radius: 6px;
    background: linear-gradient(148deg, rgba(0, 0, 0, 0.00) 37.78%, rgba(0, 0, 0, 0.04) 102.22%), #F5F5F5;
}

.yws-section-box-title {
    color: #2BA88A !important;
    font-family: 'Manrope', sans-serif !important;
    font-size: 19.2px !important;
    font-style: normal !important;
    font-weight: 800 !important;
    line-height: normal !important;
    letter-spacing: -0.384px !important;
    margin: 0 !important; /* Removes default margin */
}

.yws-section-box-text {
    color: #686868 !important;
    font-family: 'Manrope', sans-serif !important;
    font-size: 16px !important;
    font-style: normal !important;
    font-weight: 500 !important;
    line-height: normal !important;
    margin: 0 !important; /* Removes default margin */
}

.yws-section {
    background-image: url('../images/blank-background.jpg') !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    height: auto !important;
}


/* Media Queries for Responsiveness */
@media (max-width: 1200px) {
    .yws-section-container {
        padding: 32px 40px !important; /* Adjust padding for smaller screens */
    }

    .yws-section-box{
        padding: 25px 31px 25px 29px;
    }

    .yws-section-title {
        font-size: 14px !important; /* Decrease font size */
    }

    .yws-section-subtitle {
        font-size: 28px !important; /* Decrease font size */
    }

    .yws-section-header {
        font-size: 17px !important; /* Decrease font size */
    }
    
    .yws-section-box {
        width: 250px; /* Smaller width for boxes */
        height: auto; /* Allow height to adjust */
    }
}

@media (max-width: 992px) {
    .yws-section-boxes {
        flex-direction: column; /* Stack boxes vertically */
        align-items: center; /* Center the boxes */
        gap: 15px; /* Reduce gap */
    }

    .yws-section-box {
        width: 90%; /* Full width for smaller screens */
        max-width: 300px; /* Limit maximum width */
    }
}

@media (max-width: 768px) {
    .yws-section-container {
        padding: 32px 20px !important; /* Further adjust padding */
    }


    .yws-section-box {
        width: 100%; /* Full width for boxes */
        padding: 20px; /* Adjust padding */
    }
}

@media (max-width: 576px) {
    .yws-section-title,
    .yws-section-subtitle,
    .yws-section-header {
        font-size: 18px !important; /* Adjust font sizes for mobile */
    }

    .yws-section-box {
        padding: 15px; /* Smaller padding */
    }

    .yws-section-box-title {
        font-size: 16.2px !important;
    }

    .yws-section-box-text {
        font-size: 14px !important;
    }

}

/*  next section */

.wtp-section {
    background: linear-gradient(0deg, rgba(141, 159, 178, 0.56) 0%, rgba(141, 159, 178, 0.56) 100%), #1F2425 !important;
    min-height: 435px !important;
    padding: 40px 32px !important;
    display: flex !important;
    justify-content: center !important;
}

.wtp-section-container {
    max-width: 1000px !important;
    width: 100% !important;
}

.wtp-section-title {
    color: rgba(255, 255, 255, 0.33) !important;
    font-family: Manrope, sans-serif !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    margin: 0 0 10px 0 !important;
}

.wtp-section-heading {
    color: #F5F5F5 !important;
    font-family: Manrope, sans-serif !important;
    font-size: 27.65px !important;
    font-weight: 700 !important;
    letter-spacing: -0.691px !important;
    max-width: 541px !important;
    margin: 0 0 30px 0 !important;
}

.wtp-section-box-container {
    display: flex !important;
    gap: 20px !important;
    overflow-x: auto !important;
    padding-bottom: 10px !important;
}

.wtp-section-box {
    width: 304px !important;
    height: 207px !important;
    flex-shrink: 0 !important;
    border-radius: 4px !important;
    background: #F5F5F5 !important;
    box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.25) !important;
    display: flex;
    align-items: flex-start;
    flex-direction: column;
}

.wtp-section-image {
    width: 304px !important;
    height: 166px !important;
    border-radius: 4px 4px 0 0 !important;
}

.wtp-section-description {
    color: #5F5F5F !important;
    text-align: right !important;
    font-family: Manrope, sans-serif !important;
    font-size: 16px !important;
    font-style: normal !important;
    font-weight: 600 !important;
    line-height: normal !important;
    margin: 10px !important;
}


/* For very small screens (mobile devices) */
@media (max-width: 768px) {
    .wtp-section-heading {
        font-size: 20px !important;
    }
}

/* next section */

.afi-section-container {
    background: #161A1B !important;
    height: auto !important;
    display: flex !important;
    padding-top: 35px !important;
    flex-direction: column !important;
    align-items: center !important;
  }
  
  .afi-section-title {
    color: rgba(255, 255, 255, 0.80) !important;
    font-family: 'Manrope', sans-serif !important;
    font-size: 19.2px !important;
    font-style: normal !important;
    font-weight: 700 !important;
    line-height: normal !important;
    letter-spacing: -0.384px !important;
    margin: 0 !important;
  }
  
  .afi-section-subtitle {
    color: #FFF !important;
    text-align: center !important;
    font-family: 'Manrope', sans-serif !important;
    font-size: 33.18px !important;
    font-style: normal !important;
    font-weight: 700 !important;
    line-height: normal !important;
    letter-spacing: -0.995px !important;
    margin-top: 10px !important;
  }
  
  .afi-section-row {
    display: flex !important;
    justify-content: center !important;
    gap: 48px !important;
    margin-top: 30px !important;
  }
  
  .afi-section-row:last-child {
    margin-bottom: 30px !important;
  }
  
  .afi-section-card {
    width: 329px !important;
    padding: 26px 24px !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px !important;
    border-radius: 8px !important;
    background: linear-gradient(
      116deg,
      rgba(151, 71, 255, 0.08) 7.63%,
      rgba(38, 122, 184, 0.07) 19.82%,
      rgba(151, 71, 255, 0.00) 38.83%
    ) !important;
  }
  
  .afi-section-card-title {
    letter-spacing: 0 !important;
    color: #FFF !important;
    font-family: 'Manrope', sans-serif !important;
    font-size: 18.2px !important;
    font-weight: 700 !important;
  }
  
  .afi-section-card-text {
    color: rgba(255, 255, 255, 0.62) !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    cursor: pointer;
    transition: color 0.3s ease-in-out !important;  /* Added smooth transition */
}

.afi-section-card-text:hover {
    color: #FFF !important;
    font-size: 14px !important;
    font-weight: 400 !important;
}


/* Screens between 1200px to 1800px */
@media (max-width: 1800px) {
    .afi-section-row {
      gap: 30px !important;
    }
    .afi-section-card {
      width: 300px !important;
    }
    .afi-section-subtitle {
      font-size: 30px !important;
    }
  }
  
  /* Tablets (between 768px and 1199px) */
  @media (max-width: 1199px) {
    .afi-section-row {
      flex-direction: column !important;
      align-items: center !important;
      gap: 24px !important;
    }
    .afi-section-card {
      width: 80% !important;
    }
    .afi-section-subtitle {
      font-size: 28px !important;
    }
    .afi-section-title {
      font-size: 17px !important;
    }
  }
  
  /* Mobile (below 768px) */
  @media (max-width: 768px) {
    .afi-section-card {
      width: 90% !important;
      padding: 20px !important;
    }
    .afi-section-subtitle {
      font-size: 24px !important;
    }
    .afi-section-title {
      font-size: 16px !important;
      text-align: center !important;
    }
    .afi-section-row {
      margin-top: 20px !important;
      margin-bottom: 20px !important;
    }
  }
  
  /* Small Mobile (below 480px) */
  @media (max-width: 480px) {
    .afi-section-card {
      width: 95% !important;
    }
    .afi-section-title {
      font-size: 14px !important;
    }
    .afi-section-subtitle {
      font-size: 20px !important;
    }
    .afi-section-card-text {
      font-size: 12px !important;
    }
  }

  /* Tablets (between 769px and 1199px) */
@media (min-width: 769px) and (max-width: 1199px) {
    .afi-section-row {
      flex-direction: row !important; /* Keep in row layout */
      justify-content: center !important; /* Center align items */
      gap: 24px !important; /* Gap between cards */
      margin-top: 20px !important; /* Margin for top of row */
      flex-wrap: wrap !important; /* Allow wrapping to prevent overflow */
    }
  
    .afi-section-card {
      width: 280px !important; /* Width of cards */
      padding: 20px 18px !important; /* Padding for cards */
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2) !important; /* Shadow for depth */
    }
  
    .afi-section-title {
      font-size: 20px !important; /* Title font size */
    }
  
    .afi-section-subtitle {
      font-size: 28px !important; /* Subtitle font size */
    }
  
    .afi-section-card-title {
      font-size: 16px !important; /* Card title font size */
    }
  
    .afi-section-card-text {
      font-size: 13px !important; /* Card text size */
    }
  }



/* Page - Data Strategy And Consulting */
.dsc-section-container {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
    height: 320px !important;
    background: 
        linear-gradient(0deg, rgba(15, 59, 74, 0.67) 0%, rgba(15, 59, 74, 0.67) 100%),
        linear-gradient(0deg, rgba(0, 0, 0, 0.20) 0%, rgba(0, 0, 0, 0.20) 100%), 
        url('../images/data-strategy-and-consulting.jpg') lightgray center center / cover no-repeat !important;
    background-blend-mode: multiply, normal, normal !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
}

.dsc-section-content {
    text-align: center !important;
    color: #FFF !important;
}

.dsc-section-title {
    font-family: 'Manrope', sans-serif !important;
    font-size: 39.81px !important;
    font-weight: 700 !important;
    letter-spacing: -1.791px !important;
    margin: 0 !important;
}

.dsc-section-subtitle {
    font-family: 'Manrope', sans-serif !important;
    font-size: 23.04px !important;
    font-weight: 700 !important;
    letter-spacing: -0.461px !important;
    margin: 5px 0 0 !important;
}

/* Responsive Adjustments */
@media (max-width: 1800px) {
    .dsc-section-container {
        height: 300px !important;
    }
    .dsc-section-title {
        font-size: 35px !important;
    }
    .dsc-section-subtitle {
        font-size: 20px !important;
    }
}

@media (max-width: 1200px) {
    .dsc-section-container {
        height: 280px !important;
    }
    .dsc-section-title {
        font-size: 32px !important;
    }
    .dsc-section-subtitle {
        font-size: 18px !important;
    }
}

@media (max-width: 992px) {
    .dsc-section-container {
        height: 250px !important;
        padding: 10px !important;
    }
    .dsc-section-title {
        font-size: 28px !important;
    }
    .dsc-section-subtitle {
        font-size: 16px !important;
    }
}

@media (max-width: 768px) {
    .dsc-section-container {
        height: 220px !important;
        padding: 10px !important;
    }
    .dsc-section-title {
        font-size: 24px !important;
    }
    .dsc-section-subtitle {
        font-size: 14px !important;
    }
}

@media (max-width: 576px) {
    .dsc-section-container {
        height: 200px !important;
        padding: 8px !important;
    }
    .dsc-section-title {
        font-size: 20px !important;
    }
    .dsc-section-subtitle {
        font-size: 12px !important;
    }
}


/* Page - Data Strategy And Consulting */
/* next section */


.dsb-section-container {
    background-image: url('../images/data-strategy-background.jpg');
    height: 320px !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
    display: flex !important; 
    justify-content: center !important; 
    align-items: center !important; 
    position: relative !important; 
}

@media (max-width: 1800px) {
    .dsb-section-container {
        background-image: url('../images/data-strategy-backgroundv1.jpg') !important;
    }
}

.dsb-section-image-container {
    position: relative !important; 
    width: 197px !important; 
    height: 223px !important;
}

.dsb-section-border-image {
    width: 149px !important; 
    height: 223px !important; 
    object-fit: contain !important; 
    position: absolute !important; 
    left: 50% !important; 
    transform: translateX(-50%) !important; 
}

.dsb-section-overlay-image {
    z-index: 999 !important; 
    position: absolute !important; 
    width: 197px !important; 
    height: 192px !important; 
    object-fit: contain !important; 
    border-radius: 8px !important; 
    left: 62% !important; 
    top: 14% !important; 
    transform: translateX(-50%) !important; 
}

.dsb-section-text-container {
    display: flex !important; 
    flex-direction: column !important; 
    gap: 30px !important; 
    margin-left: 30px !important; 
}

.dsb-section-box-1,
.dsb-section-box-2,
.dsb-section-box-3 {
    border-radius: 2px !important; 
    background: 
        linear-gradient(92deg, rgba(38, 122, 184, 0.00) 55.13%, rgba(43, 168, 138, 0.10) 108.6%), 
        linear-gradient(197deg, rgba(38, 122, 184, 0.00) 6.72%, rgba(151, 71, 255, 0.29) 140.13%), 
        #FFF !important; 
    display: inline-flex !important; 
    padding: 6px 8px !important; 
    justify-content: center !important; 
    align-items: center !important; 
    gap: 10px !important; 
}

.dsb-section-box-1 {
    /* Any specific styles for box 1 can be added here */
}

.dsb-section-box-2 {
    position: relative !important; 
    left: -25px !important; 
}

.dsb-section-box-3 {
    position: relative !important; 
    left: 20px !important; 
}

.dsb-section-text {
    color: #1F2425 !important; 
    font-family: 'Manrope', sans-serif !important; 
    font-size: 15px !important; 
    font-style: normal !important; 
    font-weight: 700 !important; 
    line-height: normal !important; 
    letter-spacing: -0.3px !important; 
}


@media screen and (max-width: 540px) {
    .dsb-section-container {
        flex-direction: column !important;
        height: auto !important;
        padding: 40px 20px !important;
    }
    
    .dsb-section-image-container {
        margin-bottom: 30px !important;
        width: 100% !important;
        height: 180px !important;
        display: flex !important;
        justify-content: center !important;
        position: relative !important;
    }
    
    .dsb-section-border-image {
        width: 120px !important;
        height: 180px !important;
    }
    
    .dsb-section-overlay-image {
        width: 160px !important;
        height: 155px !important;
        top: 13% !important;
        left: 55% !important;
    }
    
    .dsb-section-text-container {
        margin-left: 0 !important;
        align-items: center !important;
        gap: 20px !important;
        width: 100% !important;
    }
    
    .dsb-section-box-1,
    .dsb-section-box-2,
    .dsb-section-box-3 {
        width: 90% !important;
        max-width: 280px !important;
    }
    
    .dsb-section-box-2,
    .dsb-section-box-3 {
        left: 0 !important;
    }
}

/* next section */

.grw-section {
    background-image: url('../images/grow-business-background.jpg');
    /* background: var(--Dark-Gray, #161A1B); */
    height: auto !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
    padding-top: 20px !important;
    padding-bottom: 20px !important;
    display: flex !important; /* Use flexbox for centering */
    justify-content: center !important; /* Center horizontally */
    flex-direction: column !important; /* Stack items vertically */
}

@media (max-width: 1800px) {
    .grw-section {
        background-image: url('../images/grow-business-backgroundv1.jpg') !important;
    }
}

.grw-section-text {
    color: #FFF !important; /* Text color */
    text-align: center !important; /* Center the text */
    font-family: 'Manrope', sans-serif !important; /* Font family */
    font-size: 27.65px !important; /* Font size */
    font-style: normal !important; /* Font style */
    font-weight: 700 !important; /* Font weight */
    line-height: normal !important; /* Line height */
    letter-spacing: -0.691px !important; /* Letter spacing */
    margin-bottom: 20px !important; /* Space below the main title */
}

.grw-section-content {
    display: flex !important; /* Align image and text side by side */
    align-items: center !important; /* Vertically center the items */
    justify-content: center !important; /* Center horizontally */
    gap: 35px !important; /* Space between image and text */
    margin-top: 30px;
    margin-bottom: 50px;
}

.grw-section-image {
    width: 439px !important; /* Set image width */
    height: 290px !important; /* Set image height */
}

.grw-section-description {
    color: #FFF !important; /* Text color */
    font-family: 'Manrope', sans-serif !important; /* Font family */
    font-size: 16px !important; /* Font size */
    font-style: normal !important; /* Font style */
    font-weight: 400 !important; /* Font weight */
    line-height: normal !important; /* Line height */
    width: 500px !important; /* Width for the text block */
}

/* Tablet breakpoint */
@media screen and (max-width: 1200px) {
    .grw-section-content {
        padding: 0 20px !important;
    }
}

@media screen and (max-width: 992px) {
    .grw-section-text {
        font-size: 24px !important;
        padding: 0 20px !important;
    }
    
    .grw-section-content {
        gap: 25px !important;
    }
    
    .grw-section-image {
        width: 380px !important;
        height: 250px !important;
    }
    
    .grw-section-description {
        width: 400px !important;
        font-size: 15px !important;
    }
}

/* Mobile breakpoint */
@media screen and (max-width: 768px) {
    .grw-section-text {
        font-size: 22px !important;
        padding: 0 15px !important;
    }
    
    .grw-section-content {
        flex-direction: column !important;
        gap: 20px !important;
    }
    
    .grw-section-image {
        width: 100% !important;
        max-width: 350px !important;
        height: auto !important;
    }
    
    .grw-section-description {
        width: 100% !important;
        max-width: 500px !important;
        padding: 0 15px !important;
    }
}

/* Small mobile breakpoint */
@media screen and (max-width: 480px) {
    .grw-section-text {
        font-size: 20px !important;
    }
    
    .grw-section-image {
        max-width: 300px !important;
    }
    
    .grw-section-description {
        font-size: 14px !important;
    }
}

/* next section */


  .af-wb-section {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.20) -5.36%, rgba(0, 0, 0, 0.00) 14.96%), #161A1B;
}

.af-wb-container {
    padding-top: 10px;
    padding-bottom:70px;
    max-width: 960px;
    margin: 0 auto;
}

.af-wb-title {
    margin-top: 30px;
    margin-bottom: 20px;
    font-size: 33.18px !important;
    font-style: normal;
    font-weight: 700 !important;
    line-height: normal;
    letter-spacing: -0.995px !important;
    text-align: center;
}

.af-wb-flex-container {
    display: flex;
    flex-wrap: wrap;
}

.af-wb-left-box {
    min-width: 300px;
    padding: 50px 20px 20px 30px;    
    border-radius: 6px 0px 0px 6px;
    align-items: flex-start;
    gap: 8px;
}

.af-wb-step {
    padding: 8px 8px;
    display: flex;
    align-items: flex-start;
    cursor: pointer;
}

.af-wb-step:hover .af-wb-step-title {
    color: #fff !important;
}

.af-wb-step-title {
    font-size: 16px !important;
    margin-bottom: 0px !important;
    font-weight: 600 !important;
    letter-spacing: 0px !important;
    color: rgba(245, 245, 245, 0.70) !important;
    transition: color 0.3s;
}

.af-wb-right-box {
    flex: 2;
    min-width: 330px;
    padding: 67px 72px 0 72px;
    background: linear-gradient(134deg, rgba(0, 0, 0, 0.00) 30.38%, rgba(0, 0, 0, 0.20) 93.28%), #383B3D;
    border-radius: 0px 6px 6px 0px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    position: relative;
}

.af-wb-bottom-image {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 165px;
    overflow: hidden;
}

.af-wb-bottom-image img {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 0.3s ease-in-out;
}

.af-wb-bottom-image .current-image {
    opacity: 1;
    z-index: 2;
}

.af-wb-bottom-image .next-image {
    opacity: 0;
    z-index: 1;
}

/* Add fade-out and fade-in classes for transitions */
.fade-out {
    opacity: 0 !important;
}

.fade-in {
    opacity: 1 !important;
}

.af-wb-content-wrapper {
    position: relative;
    z-index: 2; /* Added z-index to ensure content stays above image */
    margin-bottom: 20px;
}

.af-wb-text {
    color: #F5F5F5;
    font-family: 'Manrope' !important;
    font-size: 16px !important;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.af-wb-link {
    color: #F5F5F5 !important;
    font-family: 'Manrope' !important;
    font-size: 16px !important;
    font-style: normal;
    font-weight: 400;
}

.af-wb-text-bold{
    color: #F5F5F5;
    font-family: 'Manrope' !important;
    font-size: 16px !important;
    font-style: normal;
    font-weight: 700 !important;
    line-height: normal;
}


.af-wb-step.active {
    border-left: 3px solid var(--Acufore-Green, #2BA88A);
}

.af-wb-step.active .af-wb-step-title {
    color: #fff !important;
}

.image-overlay-text {
    position: absolute;
    bottom: 30px; /* Adjust as needed */
    left: 26%;
    transform: translateX(-50%);
    color: var(--Light-Gray, #F5F5F5);
    font-family: 'Manrope' !important;
    font-size: 16px !important;
    font-style: normal;
    font-weight: 200 !important;
    z-index: 3; /* Ensure the text stays above the images */
    letter-spacing: 0 !important;   
    cursor: pointer;
}

.image-overlay-text-bold{
    font-size: 16px !important;
    font-weight: 700 !important;
}

#dynamic-link{
    text-decoration: none !important;
}

.image-overlay-text:hover .fai-icon{
    transform: translateX(3px); /* Move icon slightly to the right */
    transition: transform 250ms ease-out !important; /* Ensure smooth transition for the icon movement */
}


/* Responsive breakpoints */
@media screen and (max-width: 1200px) {
    .af-wb-container {
        max-width: 960px;
    }
    
    .af-wb-right-box {
        padding: 67px 40px 0;
    }
}

@media screen and (max-width: 992px) {
    .af-wb-container {
        max-width: 720px;
    }
    
    .af-wb-title {
        font-size: 1.8rem !important;
    }
    
    .af-wb-left-box {
        flex: 0 0 250px;
    }
}

@media screen and (max-width: 768px) {
    .af-wb-flex-container {
        flex-direction: column;
    }
    
    .af-wb-left-box {
        width: 100%;
        border-radius: 6px 6px 0 0;
        padding: 30px 20px;
    }
    
    .af-wb-right-box {
        width: 100%;
        border-radius: 0 0 6px 6px;
        padding: 40px 30px 0;
    }
    
    .af-wb-content-wrapper {
        margin-bottom: 160px;
    }
    
    .image-overlay-text {
        left: 50%;
        transform: translateX(-50%);
        text-align: center;
        width: 100%;
    }
}

@media screen and (max-width: 576px) {
    .af-wb-container {
        padding: 10px 15px 80px;
    }
    
    .af-wb-title {
        font-size: 1.5rem !important;
    }
    
    .af-wb-step-title {
        font-size: 14px !important;
    }
    
    .af-wb-text, .af-wb-link, .af-wb-text-bold {
        font-size: 14px !important;
    }
    
    .af-wb-right-box {
        padding: 30px 20px 0;
    }
    
    .af-wb-content-wrapper {
        margin-bottom: 140px;
    }
    
    .af-wb-bottom-image {
        height: 140px;
    }
}


@media screen and (min-width: 769px) and (max-width: 992px) {
    .image-overlay-text {
        left: 40% !important;
    }
}

@media screen and (max-width: 400px) {
    .af-wb-section {
        overflow-x: hidden;
        width: 100%;
    }

    .af-wb-container {
        padding: 10px 8px 40px;
        width: 100%;
    }

    .af-wb-flex-container {
        width: 100%;
    }

    .af-wb-title {
        font-size: 20px !important;
        padding: 0 5px;
        margin: 15px 0;
    }

    .af-wb-left-box {
        width: 100%;
        padding: 15px 10px;
        border-radius: 6px 6px 0 0;
    }

    .af-wb-right-box {
        width: 100%;
        min-width: unset;
        padding: 20px 12px 0;
        border-radius: 0 0 6px 6px;
    }

    .af-wb-step {
        padding: 6px 5px;
        margin-bottom: 4px;
        display: flex;
        align-items: center;
    }

    .af-wb-step-title {
        font-size: 13px !important;
        line-height: 1.2;
        flex: 1;
    }

    /* Handle the NEW tag better */
    .af-wb-step span {
        font-size: 8px;
        padding: 1px 2px;
        margin-left: 4px;
        white-space: nowrap;
        position: static;
        display: inline-block;
    }

    .af-wb-content-wrapper {
        margin-bottom: 110px;
        padding: 0 5px;
    }

    .af-wb-text, 
    .af-wb-link, 
    .af-wb-text-bold {
        font-size: 13px !important;
        line-height: 1.4;
        margin-bottom: 8px;
    }

    .af-wb-bottom-image {
        height: 110px;
    }

    .image-overlay-text {
        bottom: 15px;
        font-size: 13px !important;
        width: 90%;
        left: 50%;
        transform: translateX(-50%);
        text-align: center;
    }
}

/* Specific fixes for 320px */
@media screen and (max-width: 320px) {
    .af-wb-container {
        padding: 5px 5px 30px;
    }

    .af-wb-title {
        font-size: 18px !important;
    }

    .af-wb-left-box {
        padding: 12px 8px;
    }

    .af-wb-step-title {
        font-size: 12px !important;
    }

    .af-wb-right-box {
        padding: 15px 10px 0;
    }

    .af-wb-text, 
    .af-wb-link, 
    .af-wb-text-bold {
        font-size: 12px !important;
        line-height: 1.3;
        margin-bottom: 6px;
    }

    .af-wb-content-wrapper {
        margin-bottom: 100px;
        padding: 0 3px;
    }

    .af-wb-bottom-image {
        height: 100px;
    }

    .image-overlay-text {
        bottom: 12px;
        font-size: 12px !important;
        width: 85%;
    }

    /* Make NEW tag smaller */
    .af-wb-step span {
        font-size: 7px;
        padding: 0 1px;
        margin-left: 3px;
    }

    /* Ensure content doesn't overflow */
    .af-wb-step {
        padding: 5px 3px;
        margin-bottom: 3px;
    }
}

/* Critical overflow fixes */
.af-wb-flex-container,
.af-wb-left-box,
.af-wb-right-box,
.af-wb-content-wrapper,
.af-wb-bottom-image {
    max-width: 100%;
    box-sizing: border-box;
}

.af-wb-bottom-image img {
    max-width: 100%;
    height: 100%;
    object-fit: cover;
}

/* next section */

.distinct-adv-sec {
    background: var(--Dark-Gray, #161A1B);
    padding: 20px;
    display: flex;
    justify-content: center;
  }

  .distinct-ab{
    padding-top:50px;
    padding-bottom:50px;
  }

  .distinct-ac {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 5px; /* Gap between cards */
    max-width: 1017px; /* Ensures three cards per row */
    width: 100%; /* Ensures responsiveness */
  }

  .distinct-ad {
    background: #1D2324;
    width: calc(33.33% - 10px); /* Adjusted width to fit 3 cards in a row with gap */
    height: auto;
    padding: 5px; /* Adjusted padding to create a 5px gap around the card */
    align-items: flex-start;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin-bottom: 0px;
    color: #F5F5F5;
    text-align: left;
    box-sizing: border-box; /* Ensures padding is included in width calculation */
    transition: background-color 0.3s ease; /* Smooth transition for hover effect */
  }

  .distinct-ae {
    display: flex;
    padding: 32px 31px 53px 39px;
    background-image: url('../images/backlight.png') !important;
    background-size: cover; /* Ensures the image covers the entire area */
    background-position: center; /* Centers the image */
    background-repeat: no-repeat; /* Prevents the image from repeating */
}


  .distinct-af{
    margin-bottom:15px !important;
  }

  .distinct-ag{
    padding: 32.494px 38px 48.722px 32px;
  }

  .distinct-ai{
    margin-bottom:30px;
  }



  .distinct-ad:not(:first-child):hover {
    background-color: #2C3334; /* New color for hover effect */
  }

  .distinct-ad svg {
    width: 34px;
  }

  .distinct-ad h1 {
    font-size: 39.81px !important; /* Font size for the first card */
    letter-spacing: -1.791px !important;
    margin-bottom: 0 !important; /* Remove margin bottom for consistency */
  }

  .distinct-ad h2 {
    font-size: 20px !important;
    letter-spacing: -0.4px !important;
    margin-bottom: 5px ;
  }

  .distinct-ad p { 
    font-size: 16px !important;
    margin-bottom: 0;
  }


  .distinct-ad img {
    max-width: 100%; /* Ensure images are responsive */
    height: auto; /* Maintain aspect ratio */
  }


  
/* For screens smaller than 768px (tablets and smartphones) */
@media (max-width: 768px) {
    .distinct-ad {
        width: calc(50% - 10px); /* Adjusted width for two cards per row */
        padding: 5% 3% !important; /* Adjusted padding for smaller screens */
      }

      .distinct-ah{
        margin-bottom: 10px !important;
      }
    

      .distinct-ad img {
        max-width: 10% !important; /* Adjusted max-width for smaller devices */
        height: auto; /* Maintain aspect ratio */
      }
    
  
    .distinct-ad h1 {
      font-size: 5vw !important; /* Font size relative to viewport width */
      letter-spacing: -0.5vw !important; /* Adjusted letter-spacing */
    }
  
    .distinct-ad h2 {
      font-size: 3vw !important; /* Font size relative to viewport width */
      letter-spacing: -0.1vw !important; /* Adjusted letter-spacing */
    }
  
    .distinct-ad p { 
      font-size: 2.5vw !important; /* Font size relative to viewport width */
    }

    .distinct-ab{
      padding-top:30px;
      padding-bottom:30px;
    }
  }
  
  /* For screens smaller than 480px (smartphones) */
  @media (max-width: 480px) {
    .distinct-ad {
      width: calc(50% - 10px); /* Adjusted width for two cards per row */
      padding: 5% 3% !important; /* Adjusted padding for smaller screens */
    }

      .distinct-ah{
        margin-bottom: 10px !important;
      }

      .distinct-ab{
        padding-top:20px;
        padding-bottom:20px;
      }
    

      .distinct-ad img {
        max-width: 10% !important; /* Adjusted max-width for smaller devices */
        height: auto; /* Maintain aspect ratio */
      }
  
    .distinct-ad h1 {
      font-size: 6vw !important; /* Font size relative to viewport width */
      letter-spacing: -0.6vw !important; /* Adjusted letter-spacing */
    }
  
    .distinct-ad h2 {
      font-size: 4vw !important; /* Font size relative to viewport width */
      letter-spacing: -0.2vw !important; /* Adjusted letter-spacing */
    }
  
    .distinct-ad p { 
      font-size: 3vw !important; /* Font size relative to viewport width */
    }
  }
  

/* For screens between 768px and 1800px */
@media (min-width: 768px) and (max-width: 1800px) {
  .distinct-ad {
      width: calc(33.33% - 20px) !important;
  }

  .distinct-ad h1 {
      font-size: calc(24px + 0.5vw) !important;
      letter-spacing: -1px;
  }
  
  .distinct-ad h2 {
      font-size: calc(16px + 0.2vw) !important;
      letter-spacing: -0.2px;
  }
  
  .distinct-ad p { 
      font-size: calc(14px + 0.1vw) !important;
  }
}

/* next section */

.hlf-section {
    background-image: url('../images/help-further.jpg') !important;
    height: 276px !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
}

.hlf-heading {
    color: #FFF !important;
    text-align: center !important;
    font-family: Manrope !important;
    font-size: 39.81px !important;
    font-weight: 700 !important;
    line-height: normal !important;
    letter-spacing: -1.791px !important;
    margin: 10px !important;
}

.hlf-subheading {
    color: var(--Light-Gray, #F5F5F5) !important;
    text-align: center !important;
    font-family: Manrope !important;
    font-size: 19.2px !important;
    font-weight: 700 !important;
    line-height: normal !important;
    letter-spacing: -0.384px !important;
    margin: 10px !important;
}

.hlf-button-container {
    margin-top: 16px !important;
    text-align: center !important;
}

.hlf-button {
    border: none !important;
    border-radius: 5px !important;
    background: linear-gradient(0deg, #FFF 0%, #FFF 100%), #2BA88A !important;
    box-shadow: 0px 3px 10px 0px rgba(0, 0, 0, 0.40) !important;
    display: inline-flex !important;
    padding: 8px 16px !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 8px !important;
    color: #2BA88A !important;
    font-family: Manrope !important;
    font-size: 23.04px !important;
    font-weight: 700 !important;
    line-height: normal !important;
    letter-spacing: -0.461px !important;
}

.hlf-button:hover .fai-icon {
    transform: translateX(5px); /* Move icon slightly to the right */
    transition: transform 250ms ease-out !important; /* Ensure smooth transition for the icon movement */
}

.hlf-button:hover {
    background: #2BA88A !important; /* Change button background on hover */
    transition: all 250ms ease-out !important;
}

.hlf-button:hover,
.hlf-button:hover .fai-icon {
    color: #FFF !important; /* Change text and icon color to white on hover */
}

.hlf-section {
    background-image: url('../images/help-further.jpg') !important;
    height: 276px !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 20px !important;
}

.hlf-heading {
    color: #FFF !important;
    text-align: center !important;
    font-family: Manrope !important;
    font-size: 39.81px !important;
    font-weight: 700 !important;
    line-height: normal !important;
    letter-spacing: -1.791px !important;
    margin: 10px !important;
}

.hlf-subheading {
    color: var(--Light-Gray, #F5F5F5) !important;
    text-align: center !important;
    font-family: Manrope !important;
    font-size: 19.2px !important;
    font-weight: 700 !important;
    line-height: normal !important;
    letter-spacing: -0.384px !important;
    margin: 10px !important;
    padding: 0 15px !important;
}

.hlf-button-container {
    margin-top: 16px !important;
    text-align: center !important;
}

.hlf-button {
    border: none !important;
    border-radius: 5px !important;
    background: linear-gradient(0deg, #FFF 0%, #FFF 100%), #2BA88A !important;
    box-shadow: 0px 3px 10px 0px rgba(0, 0, 0, 0.40) !important;
    display: inline-flex !important;
    padding: 8px 16px !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 8px !important;
    color: #2BA88A !important;
    font-family: Manrope !important;
    font-size: 23.04px !important;
    font-weight: 700 !important;
    line-height: normal !important;
    letter-spacing: -0.461px !important;
}

.hlf-button:hover .fai-icon {
    transform: translateX(5px) !important;
    transition: transform 250ms ease-out !important;
}

.hlf-button:hover {
    background: #2BA88A !important;
    transition: all 250ms ease-out !important;
}

.hlf-button:hover,
.hlf-button:hover .fai-icon {
    color: #FFF !important;
}

/* Large screens (1366px - 1799px) */
@media screen and (max-width: 1799px) {
    .hlf-heading {
        font-size: 36px !important;
        letter-spacing: -1.5px !important;
    }
    
    .hlf-subheading {
        font-size: 18px !important;
        letter-spacing: -0.3px !important;
    }
    
    .hlf-button {
        font-size: 20px !important;
        letter-spacing: -0.4px !important;
    }
}

/* Medium screens (1024px - 1365px) */
@media screen and (max-width: 1365px) {
    .hlf-section {
        height: 250px !important;
    }
    
    .hlf-heading {
        font-size: 32px !important;
        letter-spacing: -1.2px !important;
    }
    
    .hlf-subheading {
        font-size: 16px !important;
        letter-spacing: -0.25px !important;
        max-width: 80% !important;
        margin: 10px auto !important;
    }
    
    .hlf-button {
        font-size: 18px !important;
        padding: 8px 14px !important;
    }
}

/* Tablet screens (768px - 1023px) */
@media screen and (max-width: 1023px) {
    .hlf-section {
        height: 220px !important;
    }
    
    .hlf-heading {
        font-size: 28px !important;
        letter-spacing: -1px !important;
    }
    
    .hlf-subheading {
        font-size: 15px !important;
        max-width: 90% !important;
    }
    
    .hlf-button {
        font-size: 16px !important;
        padding: 7px 12px !important;
    }
}

/* Mobile screens (320px - 767px) */
@media screen and (max-width: 767px) {
    .hlf-section {
        height: 240px !important;
        padding: 15px !important;
    }
    
    .hlf-heading {
        font-size: 24px !important;
        letter-spacing: -0.8px !important;
        margin: 8px !important;
    }
    
    .hlf-subheading {
        font-size: 14px !important;
        letter-spacing: -0.2px !important;
        max-width: 95% !important;
        margin: 8px auto !important;
    }
    
    .hlf-button {
        font-size: 14px !important;
        padding: 6px 10px !important;
        gap: 6px !important;
    }
    
    .hlf-button-container {
        margin-top: 12px !important;
    }
}

/* next section */


.wtp-section2 {
    background: var(--Medium-Gray, #292C2F) !important;    
    min-height: 550px !important;
    padding: 40px 32px !important;
    display: flex !important;
    justify-content: center !important;
}

.wtp-section-container2 {
    max-width: 1000px !important;
    width: 100% !important;
}

.wtp-section-title2 {
    color: rgba(255, 255, 255, 0.33) !important;
    font-family: Manrope, sans-serif !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    margin: 0 0 10px 0 !important;
}

.wtp-section-heading2 {
    color: #F5F5F5 !important;
    font-family: Manrope, sans-serif !important;
    font-size: 27.65px !important;
    font-weight: 700 !important;
    letter-spacing: -0.691px !important;
    max-width: 541px !important;
    margin: 0 0 30px 0 !important;
}

.wtp-section-box-container2 {
    display: flex !important;
    gap: 20px !important;
    padding-bottom: 10px !important;
    flex-wrap: wrap; /* Allow the boxes to wrap into a new line if they exceed the width */
}


.wtp-section-box2 {
    width: 304px !important;
    height: 207px !important;
    flex-shrink: 0 !important;
    border-radius: 4px;
    background: var(--Dark-Gray, #161A1B);
    box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.25);
    display: flex;
    align-items: flex-start;
    flex-direction: column;
}

.wtp-section-image2 {
    width: 304px !important;
    height: 166px !important;
    border-radius: 4px 4px 0 0 !important;
}

.wtp-section-description2 {
    color: var(--Light-cool-grey, #D9DFE4) !important;
    text-align: right !important;
    font-family: Manrope, sans-serif !important;
    font-size: 16px !important;
    font-style: normal !important;
    font-weight: 600 !important;
    line-height: normal !important;
    margin: 10px !important;
}

/* New label style */
.wtp-whitepaper-label2 {
    color: var(--Light-cool-grey, #D9DFE4) !important;
    font-family: 'Manrope', sans-serif !important;
    font-size: 13px !important;
    font-style: normal !important;
    font-weight: 600 !important;
    line-height: normal !important;
    margin: 10px !important; /* Adjusted margin to reduce space */
    margin-bottom: 0 !important; /* Remove bottom margin */
}

.wtp-whitepaper-description2 {
    color: var(--Light-cool-grey, #D9DFE4) !important;
    font-family: Manrope, sans-serif !important;
    font-size: 16px !important;
    font-style: normal !important;
    font-weight: 600 !important;
    line-height: normal !important;
    width: 292px; /* Set width as specified */
    margin: 10px !important; /* Adjusted margin to reduce space */
    margin-bottom: 0 !important; /* Remove bottom margin to avoid extra space */
}



/* For very small screens (mobile devices) */
@media (max-width: 768px) {
    .wtp-section-heading2 {
        font-size: 20px !important;
    }
}

/* Add these media queries to your existing CSS */

/* 1800px to 1400px */
@media screen and (max-width: 1800px) and (min-width: 1401px) {
    .wtp-section-box-container2 {
        max-width: 1000px !important;
        justify-content: flex-start !important;
    }
    
    .wtp-section-box2 {
        width: calc(33.33% - 14px) !important;
        max-width: 304px !important;
        height: auto !important;
        min-height: 207px !important;
    }
}

/* 1400px to 1100px */
@media screen and (max-width: 1400px) and (min-width: 1101px) {
    .wtp-section-box-container2 {
        max-width: 950px !important;
        /*justify-content: center !important;*/
    }
    
    .wtp-section-box2 {
        width: calc(33.33% - 14px) !important;
        max-width: 290px !important;
        height: auto !important;
        min-height: 207px !important;
    }

    .wtp-whitepaper-description2 {
        width: 100% !important;
        box-sizing: border-box !important;
    }
}

/* 1100px to 800px */
@media screen and (max-width: 1100px) and (min-width: 801px) {
    .wtp-section-box-container2 {
        justify-content: center !important;
        max-width: 700px !important;
    }
    
    .wtp-section-box2 {
        width: calc(50% - 10px) !important;
        max-width: 304px !important;
        height: auto !important;
        min-height: 207px !important;
    }

    .wtp-section-heading2 {
        max-width: 100% !important;
    }
}

/* 800px and below */
@media screen and (max-width: 800px) {
    .wtp-section-box-container2 {
        justify-content: center !important;
    }
    
    .wtp-section-box2 {
        width: 100% !important;
        max-width: 304px !important;
        height: auto !important;
        min-height: 207px !important;
    }

    .wtp-section-heading2 {
        max-width: 100% !important;
        font-size: 24px !important;
    }

    .wtp-whitepaper-description2 {
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .wtp-section-image2 {
        width: 100% !important;
    }
}


/*temp*/

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

    .wtp-section-box2 {
        background: none !important;
        box-shadow: none !important;
    }
}

/* Learn More Button for IDP Section */
.af-wb-learn-more-btn {
    border: none !important;
    border-radius: 5px !important;
    background: linear-gradient(0deg, #FFF 0%, #FFF 100%), #2BA88A !important;
    color: #2BA88A !important;
    font-family: Manrope !important;
    font-size: 16px !important;
    font-style: normal !important;
    font-weight: 700 !important;
    line-height: normal !important;
    letter-spacing: -0.32px !important;
    padding: 8px 16px !important;
    margin-top: 16px !important;
    cursor: pointer !important;
    transition: all 250ms ease-out !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.af-wb-learn-more-btn:hover {
    background: #2BA88A !important;
    color: #FFF !important;
    transition: all 250ms ease-out !important;
}

@media (max-width: 768px) {
    .af-wb-learn-more-btn {
        font-size: 14px !important;
        padding: 6px 12px !important;
        margin-top: 12px !important;
    }
}

@media (max-width: 480px) {
    .af-wb-learn-more-btn {
        font-size: 13px !important;
        padding: 5px 10px !important;
        margin-top: 10px !important;
    }
}