* {
    box-sizing: border-box;
    padding: 0px;
    margin: 0px;
}
.advantages {
    display: flex;
    padding: 240px;
    flex-direction: column;
    align-items: center;
    gap: 80px;
    border-bottom: 1px solid rgba(226, 226, 226, 0.64);
    background: rgba(30, 30, 30, 0.02);
}
.advantage-heading-bx {
    display: flex;
    max-width: 720px;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}
.advantage-heading {
    max-width: 480px;
    width: 100%;
}
.advantage-heading h2 {
    color: rgba(30, 30, 30, 0.40);
    text-align: center;
    font-family: "DM Sans";
    font-size: 12px;
    font-style: normal;
    font-weight: 600;
    line-height: 16px; /* 133.333% */
    letter-spacing: 1.92px;
    text-transform: uppercase;
}
.advantage-sub-heading {
    max-width: 560px;
    width: 100%;
}
.advantage-sub-heading p {
    color: #1E1E1E;
    text-align: center;
    
    /* heading 2 */
    font-family: "Instrument Serif";
    font-size: 40px;
    font-style: normal;
    font-weight: 400;
    line-height: 48px; /* 120% */
}
.advantage-text {
    max-width: 480px;
    width: 100%;
}
.advantage-text p {
    color: #1E1E1E;
    text-align: center;
    
    /* body/paragraph */
    font-family: "DM Sans";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px; /* 150% */
}
.advantage-illustration-bx {
    display: grid;
    grid-template-columns: repeat(2, 50%);
    grid-auto-rows: 1fr;
    position: relative;
    max-width: 1012px;
}
.advantage-card {
    display: flex;
    padding: 40px;
    flex-direction: column;
    align-items: flex-start;
    gap: 32px;
    flex: 1 0 0;
    align-self: stretch;
    border: 1px solid #FFF;
    background: #FFF;
    border-width: 1px;
    border-style: solid;
    position: relative;
    border-image: linear-gradient(135deg, rgba(255, 255, 255, 0.8) 0%, rgba(0, 0, 0, 0.2) 100%) 1;
    border-image-slice: 1;
}
.advantage-card-content-bx {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    align-self: stretch;
}
.advantage-card-content-heading {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    flex-shrink: 0;
    align-self: stretch;
}
.advantage-card-content-heading h2 {
    overflow: hidden;
    color: #000;
    font-family: "Instrument Serif";
    font-size: 32px;
    font-style: normal;
    font-weight: 400;
    line-height: 40px; /* 125% */
}
.advantage-card-content-para {
    flex: 1 0 0;
    align-self: stretch;
}
.advantage-card-content-para p {
    color: #1E1E1E;

    /* body/paragraph */
    font-family: "DM Sans";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px; /* 150% */
    opacity: 0.64;
}
.advantage-card-illustration-bx {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    align-self: stretch;
    position: relative;
    height: 400px;
}
.lighthouse-illustration-bx {
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 1 0 0;
    z-index: 4;
    width: 100%;
}
.lighthouse-illustration {
    display: flex;
    width: 92px;
    height: 120px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 8px;
}
.lighthouse-illustration-rating-bx {
    width: 60px;
    height: 60px;
    flex-shrink: 0;
    opacity: 0.64;
}
.lighthouse-illustration-rating {
    display: flex;
    width: 60px;
    height: 60px;
    padding: 4px 5px 5px 6px;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    border-radius: 1000px;
    border: 8px solid  #36A862;
    background: rgba(13, 153, 47, 0.08);
}
.lighthouse-illustration-rating p {
    color: #1E1E1E;
    font-family: "Instrument Serif";
    font-size: 24px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}
.lighthouse-illustration-content p {
    color:  rgba(0, 0, 0, 0.64);
    font-family: "DM Sans";
    font-size: 8px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px; /* 300% */
}
.illustration-img-bx {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 4;
}
.illustration-img-bx img {
    width: 100%;
    height: 100%;
}
.advantage-card-barchart {
    display: flex;
    height: 200px;
    align-items: flex-end;
    gap: 16px;
    align-self: center;
}
.smallest-bx {
    width: 64px;
    height: 120px;
    border-radius: 16px;
    background: rgba(232, 90, 41, 0.24);
    box-shadow: 8px 9px 4px 0px rgba(222, 222, 222, 0.20);
}
.medium-bx {
    width: 64px;
    height: 160px;
    border-radius: 16px;
    background: rgba(232, 90, 41, 0.24);
    box-shadow: 8px 9px 4px 0px rgba(222, 222, 222, 0.20);
}
.biggest-bx {
    width: 64px;
    align-self: stretch;
    border-radius: 16px;
    background: rgba(232, 90, 41, 0.24);
    box-shadow: 8px 9px 4px 0px rgba(222, 222, 222, 0.20);
}
.illustration-first-ellipse, .illustration-second-ellipse, .illustration-tenth-ellipse, .illustration-third-ellipse, .illustration-fourth-ellipse, .illustration-fifth-ellipse, .illustration-sixth-ellipse, .illustration-seventh-ellipse, .illustration-eight-ellipse, .illustration-ninth-ellipse {
    display: flex;
    width: 8px;
    height: 8px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: 8px;
    position: absolute;
    background: linear-gradient(0deg, rgba(30, 30, 30, 0.16) 0%, rgba(30, 30, 30, 0.16) 100%), #FFF;
}
.illustration-first-ellipse {
    top: -4px;
    left: -8px;
}
.illustration-second-ellipse {
    top: -4px;
    left: 50%;
    transform: translateX(-50%);
}
.illustration-tenth-ellipse {
    display: none;
}
.illustration-third-ellipse {
    right: -8px;
    top: -4px;
}
.illustration-fourth-ellipse {
    left: -8px;
    top: 50%;
    transform: translateY(-50%);
}
.illustration-fifth-ellipse {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.illustration-sixth-ellipse {
    right: -8px;
    top: 50%;
    transform: translateY(-50%);
}
.illustration-seventh-ellipse {
    bottom: -4px;
    left: -8px;
}
.illustration-eight-ellipse {
    bottom: -4px;
    left: 50%;
    transform: translateX(-50%);
}
.illustration-ninth-ellipse {
    right: -8px;
    bottom: -4px;
}
.lighthouse-illustration-grid {
    display: flex;
    width: 100%;
    height: 100%;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: absolute;
    left: 0;
    top: 0;
}
.lighthouse-illustration-mask {
    background: radial-gradient(50% 50% at 50% 50%, transparent 0%, #fff 100%);    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    position: absolute;
    z-index: 3;
}
.lighthouse-illustration-hr{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.lighthouse-illustration-vr {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    display: flex;
    justify-content: space-between;
}
.lighthouse-illustration-hr .line {
    height: 1px;
    width: 100%;
    background: rgba(30, 30, 30, 0.08);
}
.lighthouse-illustration-vr .line {
    width: 0.788px;
    background: rgba(30, 30, 30, 0.08);
} 
.processes {
    display: flex;
    padding: 240px;
    flex-direction: column;
    align-items: center;
    gap: 80px;
    background: #1E1E1E;
    min-height: 100vh;
}
.processes-heading-bx {
    display: flex;
    max-width: 720px;
    width: 100%;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}
.processes-heading {
    max-width: 480px;
}
.processes-heading h2 {
    color: rgba(255, 255, 255, 0.40);
    text-align: center;
    font-family: "DM Sans";
    font-size: 12px;
    font-style: normal;
    font-weight: 600;
    line-height: 16px; /* 133.333% */
    letter-spacing: 1.92px;
    text-transform: uppercase;
}
.processes-heading-para {
    max-width: 560px;
}
.processes-heading-para p {
    color: #FFF;
    text-align: center;
    
    /* heading 2 */
    font-family: "Instrument Serif";
    font-size: 40px;
    font-style: normal;
    font-weight: 400;
    line-height: 48px; /* 120% */
}
.processes-progress-bx {
    display: flex;
    justify-content: center;
    align-items: center;
}
.processes-progress-para {
    display: flex;
    width: 40px;
    height: 40px;
    padding: 8px 0px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: 100px;
    background: #1E1E1E; /* Black background by default */
}

.processes-progress-para p {
    color: #FFF; /* White text by default */
    font-family: "Instrument Serif";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}
.processes-progress-para.in-view {
    animation: background-animation 3s forwards;
}

.processes-progress-para.in-view p {
    animation: text-animation 3s forwards;
}

/* Keyframes for background */
@keyframes background-animation {
    0%, 25% {
        background: #1E1E1E; /* Black */
    }
    33%, 100% {
        background: #FFF; /* White */
    }
}

/* Keyframes for text */
@keyframes text-animation {
    0%, 25% {
        color: #FFF; /* White text */
    }
    33%, 100% {
        color: #1E1E1E; /* Black text */
    }
}

/* Staggered animation delays for cumulative effect */
.progress-1.in-view, .progress-1.in-view p {
    animation-delay: 0s; /* First starts immediately */
}

.progress-2.in-view, .progress-2.in-view p {
    animation-delay: 1.5s; /* Second starts after 4 seconds */
}

.progress-3.in-view, .progress-3.in-view p {
    animation-delay: 3s; /* Third starts after 8 seconds */
}


.processes-line {
    width: 64px;
    height: 1px;
    background: #FFF;
}
.processes-content-bx {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 40px;
}
.processes-content-card {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 16px;
    flex: 1 0 0;
}
.processes-content-card-heading h2 {
    color: #FFF;
    text-align: center;
    font-family: "Instrument Serif";
    font-size: 32px;
    font-style: normal;
    font-weight: 400;
    line-height: 40px; /* 125% */
    text-decoration-style: solid;
    text-decoration-skip-ink: none;
    text-decoration-thickness: auto;
    text-underline-offset: auto;
    text-underline-position: from-font;
}
.processes-content-card-para {
    max-width: 480px;
}
.processes-content-card-para p {
    color: rgba(255, 255, 255, 0.64);
    text-align: center;
    
    /* body/paragraph */
    font-family: "DM Sans";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px; /* 150% */
}
.processes-cta {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
}
.processes-cta a {
    color: #E85A29;
    font-family: Manrope;
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 24px; /* 150% */
    letter-spacing: 0.32px;
    background: transparent;
    border: none;
    text-decoration: none;
}
.pricing {
    display: flex;
    padding: 240px;
    flex-direction: column;
    align-items: center;
    gap: 80px;
    align-self: stretch;
    background-color: #f6f6f6;
}
.pricing-heading-bx {
    display: flex;
    max-width: 720px;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    width: 100%;
}
.pricing-heading {
    max-width: 480px;
}
.pricing-heading h2 {
    color: rgba(30, 30, 30, 0.40);
    text-align: center;
    font-family: "DM Sans";
    font-size: 12px;
    font-style: normal;
    font-weight: 600;
    line-height: 16px; /* 133.333% */
    letter-spacing: 1.92px;
    text-transform: uppercase;
}
.pricing-subheading {
    max-width: 560px;
}
.pricing-subheading p {
    color: #1E1E1E;
    text-align: center;
    
    /* heading 2 */
    font-family: "Instrument Serif";
    font-size: 40px;
    font-style: normal;
    font-weight: 400;
    line-height: 48px; /* 120% */
}
.pricing-list {
    display: flex;
    align-items: center;
    max-width: 960px;
    width: 100%;
    position: relative;
}
.starter-pack {
    display: flex;
    padding: 40px;
    flex-direction: column;
    align-items: flex-start;
    gap: 40px;
    flex: 1 0 0;
    width: 33.33%;
    border: 1px solid #FFF;
    background: #FFF;
    align-self: stretch;
    position: relative;
}
.medium-pack {
    border: 2px solid rgba(255, 255, 255, 0.00);
    background: #1E1E1E;
    display: flex;
    padding: 40px;
    flex-direction: column;
    align-items: flex-start;
    gap: 40px;
    flex: 1 0 0;
    box-shadow: 0px 8px 16px 0px rgba(255, 255, 255, 0.16) inset;
    align-self: stretch;
    position: relative;
    overflow: hidden;
}
.medium-deco {
    width: 100%;
    height: 240px;
    position: absolute;
    top: -120px;
    border-radius: 320px;
    background: #FFF;
    mix-blend-mode: overlay;
    filter: blur(60px);
    left: 0;
}
.pricing-list-bx, .dark-pricing-list-bx {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    align-self: stretch;
}
.pricing-list-heading h3 {
    color: #1E1E1E;

    /* body/paragraph */
    font-family: "DM Sans";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px; /* 150% */
}
.dark-pricing-list-heading h3 {
    color: #FFF;

    /* body/paragraph */
    font-family: "DM Sans";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px; /* 150% */
}
.pricing-list-price, .dark-pricing-list-price {
    position: relative;
    width: max-content;
}
.dark-pricing-list-price :nth-child(1) {
    overflow: hidden;
    color: #FFF;
    text-overflow: ellipsis;
    
    /* heading 1 */
    font-family: "Instrument Serif";
    font-size: 56px;
    font-style: normal;
    font-weight: 400;
    line-height: 64px; /* 114.286% */
}
.pricing-list-price p:nth-child(1) {
    overflow: hidden;
    color: #1E1E1E;
    text-overflow: ellipsis;
    
    /* heading 1 */
    font-family: "Instrument Serif";
    font-size: 56px;
    font-style: normal;
    font-weight: 400;
    line-height: 64px; /* 114.286% */
}
.pricing-list-discount {
    position: absolute;
    right: -20px;
    top: 0px;
    color: rgba(0, 0, 0, 0.64);
    font-family: "Instrument Serif";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}
.dark-pricing-list-middle-discount {
    position: absolute;
    right: -20px;
    top: 0px;
    color: rgba(255, 255, 255, 0.64);
    font-family: "Instrument Serif";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}
.pricing-list-last-discount {
    position: absolute;
    right: -20px;
    top: 0px;
    color: rgba(0, 0, 0, 0.64);
    font-family: "Instrument Serif";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}
.pricing-list-offer {
    overflow: hidden;
    color: rgba(0, 0, 0, 0.64);
    text-overflow: ellipsis;
    
    /* body/paragraph */
    font-family: "DM Sans";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px; /* 150% */
}
.dark-pricing-list-offer {
    overflow: hidden;
    color:  rgba(255, 255, 255, 0.64);
    text-overflow: ellipsis;
    
    /* body/paragraph */
    font-family: "DM Sans";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px; /* 150% */
}
.pricelist-bx, .dark-pricelist-bx {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex: 1 0 0;
    align-self: stretch;
    list-style-type: none;
    gap: 16px;
}
.pricelist, .dark-pricelist {
    display: flex;
    align-items: center;
    gap: 8px;
    align-self: stretch;
}
.pricelist-content {
    flex: 1 0 0;
}
.pricelist-content p {
    color: rgba(0, 0, 0, 0.64);

    /* body/paragraph */
    font-family: "DM Sans";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px; /* 150% */
}
.dark-pricelist-content p  {
    color: rgba(255, 255, 255, 0.64);

    /* body/paragraph */
    font-family: "DM Sans";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px; /* 150% */
}
.pricing-btn-bx, .dark-pricing-btn-bx {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
    width: 100%;
}
.pricing-btn-bx a {
    display: flex;
    min-width: 160px;
    padding: 16px 24px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    border-radius: 56px;
    border: 1px solid #1E1E1E;
    background: transparent;
    width: 100%;
    color: #1E1E1E;
    font-family: Manrope;
    font-size: 12px;
    text-align: center;
    font-style: normal;
    font-weight: 700;
    line-height: 24px; /* 150% */
    letter-spacing: 0.32px;
    text-decoration: none;
}
.dark-pricing-btn-bx a {
    display: flex;
    min-width: 160px;
    padding: 16px 24px;
    justify-content: center;
    align-items: center;
    text-align: center;
    gap: 8px;
    border-radius: 56px;
    border: 2px solid rgba(255, 255, 255, 0.00);
    background: #E85A29;
    box-shadow: 0px 4px 2px 0px rgba(30, 30, 30, 0.16), 0px 0px 0px 2px #E85A29, 0px 8px 16px 0px rgba(255, 255, 255, 0.16) inset;
    color: #FFF;
    font-family: Manrope;
    font-style: normal;
    font-size: 14px;
    line-height: 24px; /* 150% */
    letter-spacing: 0.32px;
    width: 100%;
    text-decoration: none;
}
.pricing-ellipse1, .pricing-ellipse2, .pricing-ellipse3, .pricing-ellipse4, .pricing-ellipse5, .pricing-ellipse6, .pricing-ellipse7, .pricing-ellipse8 {
    border-radius: 8px;
    background: linear-gradient(0deg, rgba(30, 30, 30, 0.16) 0%, rgba(30, 30, 30, 0.16) 100%), #FFF;
    display: flex;
    width: 8px;
    height: 8px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: absolute;
}
.pricing-ellipse1 {
    left: -4px;
    top: -4px;
}
.pricing-ellipse2 {
    left: -4px;
    bottom: -4px;
}
.pricing-ellipse3 {
    right: -4px;
    top: -4px;
}
.pricing-ellipse4 {
    right: -4px;
    bottom: -4px;
}
.pricing-ellipse5 {
    left: -4px;
    top: -4px;
}
.pricing-ellipse6 {
    left: -4px;
    bottom: -4px;
}
.pricing-ellipse7 {
    right: -4px;
    top: -4px;
}
.pricing-ellipse8 {
    right: -4px;
    bottom: -4px;
}
.faqs {
    display: flex;
    padding: 240px;
    flex-direction: column;
    align-items: center;
    gap: 80px;
    background: #FFF;
}
.faqs-heading-bx {
    display: flex;
    max-width: 720px;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    width: 100%;
}
.faq-heading {
    max-width: 480px;
}
.faq-heading h2 {
    color: rgba(30, 30, 30, 0.40);
    text-align: center;
    font-family: "DM Sans";
    font-size: 12px;
    font-style: normal;
    font-weight: 600;
    line-height: 16px; /* 133.333% */
    letter-spacing: 1.92px;
    text-transform: uppercase;
}
.faq-subheading {
    max-width: 560px;
}
.faq-subheading p {
    color: #1E1E1E;
    text-align: center;
    
    /* heading 2 */
    font-family: "Instrument Serif";
    font-size: 40px;
    font-style: normal;
    font-weight: 400;
    line-height: 48px; /* 120% */
}
.faq-content-bx {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}
.faq-card {
    display: flex;
    padding: 24px;
    align-items: flex-start;
    gap: 216px;
    cursor: pointer;
}
.faq-card-icon {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}
.faq-card-icon .plus {
    display: flex;
}
.faq-card-icon .minus {
    display: none;
}
.faq-card-icon.active .plus {
    display: none;
}
.faq-card-icon.active .minus {
    display: flex;
}
.faq-card-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}
.faq-card-heading {
    width: 100%;
    max-width: 696px;
}
.faq-card-heading h3 {
    color:  #1E1E1E;
    
    /* subheading */
    font-family: "DM Sans";
    font-size: 24px;
    font-style: normal;
    font-weight: 400;
    line-height: 32px; /* 133.333% */
}
.faq-card-subheading {
    width: 100%;
    max-width: 696px;
}
.faq-card-subheading p {
    color:  rgba(0, 0, 0, 0.64);

    /* body/paragraph */
    font-family: "DM Sans";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px; /* 150% */
    max-height: 0;
    visibility: hidden;
    opacity: 0;
    transition: all 0.3s ease;
}
.faq-card-subheading.active p {
    color:  rgba(0, 0, 0, 0.64);

    /* body/paragraph */
    font-family: "DM Sans";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px; /* 150% */
    max-height: 2000px;
    visibility: visible;
    opacity: 1;
    transition: all 0.3s ease;
}
.case-studies {
    display: flex;
    padding: 240px;
    flex-direction: column;
    align-items: center;
    gap: 80px;
    align-self: stretch;
    background: rgb(250, 250, 250);
}
.case-studies-heading-bx {
    display: flex;
    max-width: 720px;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}
.case-studies-heading {
    max-width: 480px;
    width: 100%;
}
.case-studies-heading h2 {
    color: rgba(30, 30, 30, 0.40);
    text-align: center;
    font-family: "DM Sans";
    font-size: 12px;
    font-style: normal;
    font-weight: 600;
    line-height: 16px; /* 133.333% */
    letter-spacing: 1.92px;
    text-transform: uppercase;
}
.case-studies-subheading {
    max-width: 560px;
    width: 100%;
}
.case-studies-subheading p {
    color: #1E1E1E;
    text-align: center;
    
    /* heading 2 */
    font-family: "Instrument Serif";
    font-size: 40px;
    font-style: normal;
    font-weight: 400;
    line-height: 48px; /* 120% */
}
.case-studies-subheading .real-client {
    color: #E85A29;

    /* heading 2 */
    font-family: "Instrument Serif";
    font-size: 40px;
    font-style: italic;
    font-weight: 400;
    line-height: 48px;
}
.case-studies-content-bx {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 960px;
} 
.carousel-content {
    width: 100%;
}
.carousel-content {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    position: relative;
    z-index: 4;
}
.carousel-stats-bx {
    display: flex;
    max-width: 25%;
    align-items: flex-start;
    flex: 1 0 0;
    width: 100%;
    overflow: hidden;
    height: 560px;
    position: relative;
    z-index: 4;
}
.carousel-images {
    display: flex;
    width: 100%;
    max-width: 720px;
    min-height: 560px;
    height: 560px;
    flex-direction: row;
    align-items: flex-start;
    flex: 1 0 0;
    overflow: hidden;
    position: relative;
}
.carousel-image {
    min-width: 100%;
    min-height: 100%;
    height: 100%;
    display: flex;
    position: relative;
    padding: 40px;
    transition: transform 0.3s ease;
}
.carousel-image:nth-child(1)::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.24) 0%, rgba(0, 0, 0, 0.24) 100%), linear-gradient(0deg, rgba(30, 30, 30, 0.40) 0%, rgba(30, 30, 30, 0.40) 100%);
}
.carousel-image:nth-child(1)::before {
    background: linear-gradient(180deg, rgba(30, 30, 30, 0.00) 0%, rgba(30, 30, 30, 0.00) 50%, rgba(30, 30, 30, 0.40) 75%, #1E1E1E 100%);
    content: "";
    position: absolute;
    inset: 0;
    z-index: 3;
}
.carousel-image:nth-child(2)::before {
    background: linear-gradient(180deg, rgba(30, 30, 30, 0.00) 0%, rgba(30, 30, 30, 0.00) 50%, rgba(30, 30, 30, 0.40) 75%, #1E1E1E 100%);
    content: "";
    position: absolute;
    inset: 0;
    z-index: 3;
}
.carousel-image:nth-child(3)::before {
    background: linear-gradient(180deg, rgba(30, 30, 30, 0.00) 0%, rgba(30, 30, 30, 0.00) 50%, rgba(30, 30, 30, 0.40) 75%, #1E1E1E 100%);
    content: "";
    position: absolute;
    inset: 0;
    z-index: 3 ;
}
.carousel-image:nth-child(2)::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    background: linear-gradient(0deg, rgba(103, 26, 0, 0.40) 0%, rgba(103, 26, 0, 0.40) 100%)
}
.carousel-image:nth-child(3)::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    background: linear-gradient(0deg, rgba(53, 103, 0, 0.40) 0%, rgba(53, 103, 0, 0.40) 100%);
}
.carousel-image img {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}
.carousel-case-study-content-bx {
    width: 100%;
    justify-content: end;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    position: relative;
    z-index: 5;
}
.carousel-case-study-para {
    max-width: 560px;
}
.carousel-case-study-para p {
    color: #FFF;

    /* heading 2 */
    font-family: "Instrument Serif";
    font-size: 40px;
    font-style: normal;
    font-weight: 400;
    line-height: 48px; /* 120% */
}
.carousel-case-study-btn a {
    display: flex;
    height: 16px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    color: #FFF;
    font-family: Manrope;
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 24px; /* 150% */
    letter-spacing: 0.32px;
    text-decoration: none;
}
.carousel-stats {
    min-width: 100%;
    min-height: 100%;
    height: 100%;
    transition: transform 0.3s ease;
}
.stat {
    height: calc(100% / 3);
    display: flex;
    max-width: 240px;
    padding: 40px;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 8px;
    flex: 1 0 0;
    border-width: 1px;
    border-style: solid;
    border-image: linear-gradient(135deg, rgba(255, 255, 255, 0.8) 0%, rgba(0, 0, 0, 0.2) 100%) 1;
    border-image-slice: 1;
    background: #FFF;
}
.stats-number {
    color: #1E1E1E;

    /* heading 2 */
    font-family: "Instrument Serif";
    font-size: 40px;
    font-style: normal;
    font-weight: 400;
    line-height: 48px; /* 120% */
}
.stats-description {
    color:  rgba(0, 0, 0, 0.64);

    /* body/paragraph */
    font-family: "DM Sans";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px; /* 150% */
}
.carousel-indicator {
    display: flex;
    align-items: flex-start;
    width: 100%;
    position: relative;
}
.carousel-indicator-img {
    width: calc(100% / 4);
    display: flex;
    height: 186.667px;
    padding: 40px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 8px;
    flex: 1 0 0;
    border-width: 1px;
    border-style: solid;
    border-image: linear-gradient(135deg, rgba(255, 255, 255, 0.8) 0%, rgba(0, 0, 0, 0.2) 100%) 1;
    border-image-slice: 1;
    background: #FFF;
    position: relative;
    overflow: hidden;
}
.carousel-images-ellipse1, .carousel-images-ellipse2, .carousel-images-ellipse3, .carousel-images-ellipse4, .carousel-stat-ellipse1, .carousel-stat-ellipse2, .carousel-stat-ellipse3, .carousel-stat-ellipse4, .carousel-indicator-ellipse1, .carousel-indicator-ellipse2, .carousel-indicator-ellipse3, .carousel-indicator-ellipse4, .carousel-indicator-ellipse5  {
    display: flex;
    width: 8px;
    height: 8px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: absolute;
    border-radius: 8px;
    z-index: 5;
    background: linear-gradient(0deg, rgba(30, 30, 30, 0.16) 0%, rgba(30, 30, 30, 0.16) 100%), #FFF;
}
.carousel-images-ellipse1 {
    top: -4px;
    left: calc(25% - 4px);
}
.carousel-images-ellipse2 {
    top: -4px;
    right: -4px;
}
.carousel-images-ellipse3 {
    bottom: -4px;
    left: calc(25% - 4px);
}
.carousel-images-ellipse4 {
    bottom: -4px;
    right: -4px;
}
.carousel-stat-ellipse1 {
    top: -4px;
    left: -4px;
}
.carousel-stat-ellipse2 {
    top: 33%;
    transform: translateY(-33%);
    left: -4px;
}
.carousel-stat-ellipse3 {
    top: 66%;
    left: -4px;
}
.carousel-stat-ellipse4 {
    bottom: -4px;
    left: -4px;
}
.carousel-indicator-ellipse1 {
    bottom: -4px;
    left: -4px;
}
.carousel-indicator-ellipse2 {
    bottom: -4px;
    left: 24.9%;
    transform: translateX(-25%);
}
.carousel-indicator-ellipse3 {
    bottom: -4px;
    left: 49.99%;
    transform: translateX(-50%);
}
.carousel-indicator-ellipse4 {
    bottom: -4px;
    left: 74.9%;
    transform: translateX(-25%);
}
.carousel-indicator-ellipse5 {
    bottom: -4px;
    right: -4px;
}
.carousel-indicator-line {
    width: 171px;
    height: 2px;
    background: linear-gradient(to right, rgba(232, 90, 41, 0) 0%, rgba(232, 90, 41, 1) 100%);
    border-radius: 1px;
    position: absolute;
    left: -171px;
    bottom: 0;
}
.carousel-indicator-img img {
    filter: grayscale(100%);
    transition: all 0.3s ease;
}
.carousel-indicator-img.active .carousel-indicator-line {
    animation: carouselline 10s ease;
}
@keyframes carouselline {
    from {
        left: -171px;
    }
    to {
        left: 300px;
    }
}
.carousel-indicator-img.active img {
    filter: grayscale(0%);
}
.case-study-detail {
    display: flex;
    padding: 240px;
    flex-direction: column;
    align-items: center;
    gap: 80px;
    background-color: #FAFAFA;
}
.detail-heading-bx {
    display: flex;
    max-width: 720px;
    width: 100%;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}
.detail-heading h1 {
    color: rgba(30, 30, 30, 0.40);
    text-align: center;
    font-family: "DM Sans";
    font-size: 12px;
    font-style: normal;
    font-weight: 600;
    line-height: 16px; /* 133.333% */
    letter-spacing: 1.92px;
    text-transform: uppercase;
}
.detail-heading {
    max-width: 480px;
    width: 100%;
}
.detail-sub-heading {
    max-width: 560px;
    width: 100%;
}
.detail-sub-heading p {
    color: #1E1E1E;
    text-align: center;
    
    /* heading 2 */
    font-family: "Instrument Serif";
    font-size: 40px;
    font-style: normal;
    font-weight: 400;
    line-height: 48px; /* 120% */
}
.case-study-author span, .case-study-author {
    color:  rgba(0, 0, 0, 0.64);
    text-align: center;
    
    /* body/paragraph */
    font-family: "DM Sans";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px; /* 150% */
}
.detail-image {
    display: flex;
    max-width: 960px;
    width: 100%;
    height: 440px;
    padding: 0px 40px;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    gap: 10px;
    position: relative;
}
.detail-image-container {
    position: absolute;
    inset: 0;
}
.detail-image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.detail-intro-bx {
    display: flex;
    max-width: 720px;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
}
.detail-intro1 p, .detail-intro2 p {
    color:  rgba(0, 0, 0, 0.64);

    /* body/paragraph */
    font-family: "DM Sans";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px; /* 150% */
}
.the-challenge-bx {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    align-self: stretch;
}
.the-challenge-heading {
    max-width: 480px;
}
.the-challenge-heading h2 {
    color:  #1E1E1E;
    text-align: center;
    
    /* heading 2 */
    font-family: "Instrument Serif";
    font-size: 40px;
    font-style: normal;
    font-weight: 400;
    line-height: 48px; /* 120% */
}
.the-challenge-subheading {
    max-width: 720px;
}
.the-challenge-subheading p {
    color:  rgba(0, 0, 0, 0.64);

    /* body/paragraph */
    font-family: "DM Sans";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px; /* 150% */
}
.challenge-list-bx {
    max-width: 720px;
}
.challenge-list-heading h3 {
    color:  rgba(0, 0, 0, 0.64);

    /* body/paragraph */
    font-family: "DM Sans";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px; /* 150% */
}
.challenge-list {
    padding-left: 16px;
}
.challenge-list li {
    color:  rgba(0, 0, 0, 0.64);

    /* body/paragraph */
    font-family: "DM Sans";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px; /* 150% */
} 
.detail-image-bx {
    display: flex;
    align-items: center;
    gap: 32px;
    width: 100%;
    height: 300px;
    max-width: 960px;
}
.detail-image-one, .detail-image-two {
    width: 50%;
    height: 100%;
    position: relative;
}
.detail-image-one img, .detail-image-two img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.our-approach-bx {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
}
.our-approach-heading {
    max-width: 480px;
}
.our-approach-heading h2 {
    color:  #1E1E1E;
    text-align: center;
    
    /* heading 2 */
    font-family: "Instrument Serif";
    font-size: 40px;
    font-style: normal;
    font-weight: 400;
    line-height: 48px; /* 120% */
}
.our-approach-subheading {
    max-width: 720px;
}
.our-approach-subheading p {
    color:  rgba(0, 0, 0, 0.64);

    /* body/paragraph */
    font-family: "DM Sans";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px; /* 150% */
}
.our-first-approach-bx, .our-second-approach-bx, .our-third-approach-bx {
    max-width: 720px;
}
.our-first-approach-heading h3, .our-second-approach-heading h3, .our-third-approach-heading h3 {
    color: rgba(0, 0, 0, 0.64);

    /* body/paragraph */
    font-family: "DM Sans";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px; /* 150% */
}
.our-first-approach-list, .our-second-approach-list, .our-third-approach-list {
    padding-left: 16px;
}
.our-first-approach-list li, .our-second-approach-list li, .our-third-approach-list li {
    color: rgba(0, 0, 0, 0.64);

    /* body/paragraph */
    font-family: "DM Sans";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px; /* 150% */
}
.our-approach-img-bx {
    display: flex;
    align-items: center;
    gap: 32px;
    width: 100%;
    max-width: 960px;
    height: 530px;
}
.our-approach-img-one, .our-approach-img-two {
    width: 50%;
    height: 100%;
    position: relative;
}
.our-approach-img-one img, .our-approach-img-two img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.next-case-study-bx {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
}
.next-case-study-img-bx {
    display: flex;
    max-width: 960px;
    width: 100%;
    height: 440px;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    gap: 10px;
    position: relative;
}
.next-case-study-img {
    width: 100%;
    height: 100%;
    position: absolute;
}
.next-case-study-img img {
    width: 100%;
    height: 100%;
}
.next-case-study-content {
    margin: 24px 40px;
}
.next-case-study-heading {
    width: 100%;
    max-width: 560px;
}
.next-case-study-heading h2 {
    color: #FFF;

    /* heading 2 */
    font-family: "Instrument Serif";
    font-size: 40px;
    font-style: normal;
    font-weight: 400;
    line-height: 48px; /* 120% */
}
.next-case-study-content a {
    display: flex;
    max-width: 116px;
    align-items: center;
    gap: 8px;
    text-decoration: none;
}
.next-case-study-content a span {
    color: #FFF;

    /* body/paragraph */
    font-family: "DM Sans";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px; /* 150% */
}
.case-study-ellipse4, .case-study-ellipse3, .case-study-ellipse2, .case-study-ellipse1 {
    display: flex;
    width: 8px;
    height: 8px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: 8px;
    background: linear-gradient(0deg, rgba(30, 30, 30, 0.16) 0%, rgba(30, 30, 30, 0.16) 100%), #FFF;
    position: absolute;
}
.case-study-ellipse1 {
    position: absolute;
    left: -4px;
    top: -4px;
}
.case-study-ellipse2 {
    position: absolute;
    right: -4px;
    top: -4px;
}
.case-study-ellipse3 {
    position: absolute;
    left: -4px;
    bottom: -4px;
}
.case-study-ellipse4 {
    position: absolute;
    right: -4px;
    bottom: -4px;
}
.next-case-study-link a {
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: #1E1E1E;
    font-family: Manrope;
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 24px; /* 150% */
    letter-spacing: 0.32px;
}
.illustration-img1-bx, .illustration-img2-bx, .illustration-img3-bx, .illustration-img4-bx {
    position: relative;
    width: 100%;
    height: 100%;
    cursor: pointer;
    background: white;
}
.illustration-img1-bx, .illustration-img2-bx, .illustration-img3-bx, .illustration-img4-bx {
    position: relative;
    width: 100%;
    height: 100%;
    cursor: pointer;
    background: white;
}
.illustration-img1-bx:hover, .illustration-img2-bx:hover, .illustration-img3-bx:hover, .illustration-img4-bx:hover {
    position: relative;
    width: 100%;
    height: 100%;
    cursor: pointer;
    background: linear-gradient(180deg, rgba(30, 30, 30, 0.00) 0%, rgba(30, 30, 30, 0.04) 100%);

}
.illustration-img1-bx img, .illustration-img2-bx img, .illustration-img3-bx img, .illustration-img4-bx img {
    width: 100%;
    height: 100%;
}
.hero-sub-heading-bxx.serv {
    max-width: 480px;
    min-height: 75px;
    height: 100%;
}
.dark-pricelist-check svg {
    fill: white;
}





































@media (max-width: 1200px) {
    .advantages {
        display: flex;
        padding: 80px;
        flex-direction: column;
        align-items: center;
        gap: 80px;
        align-self: stretch;
    }  
    .processes {
        display: flex;
        padding: 80px;
        flex-direction: column;
        align-items: center;
        gap: 80px;
        align-self: stretch;
    }  
    .processes-content-bx {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 40px;
        align-self: stretch;
    }
    .pricing {
        display: flex;
        padding: 80px;
        flex-direction: column;
        align-items: center;
        gap: 80px;
        align-self: stretch;
    }
    .pricing-list {
        display: flex;
        height: 100%;
        align-items: center;
        flex-direction: column ;
    }
    .medium-pack {
        border: 2px solid rgba(255, 255, 255, 0.00);
        background: #1E1E1E;
        display: flex;
        padding: 40px;
        flex-direction: column;
        align-items: flex-start;
        gap: 40px;
        flex: unset;
        box-shadow: 0px 8px 16px 0px rgba(255, 255, 255, 0.16) inset;
        align-self: stretch;
        position: relative;
        overflow: hidden;
    }
    .faqs {
        display: flex;
        padding: 80px;
        flex-direction: column;
        align-items: center;
        gap: 80px;
    }
    .faq-card {
        display: flex;
        padding: 24px;
        align-items: flex-start;
        gap: 8px;
    }
    .case-studies {
        display: flex;
        padding: 80px;
        flex-direction: column;
        align-items: center;
        gap: 80px;
        align-self: stretch;
    }
    .carousel-content {
        flex-direction: column;
    }
    .carousel-images {
        max-width: 100%;
    }
    .carousel-stats-bx {
        flex: none;
        max-width: 100%;
        height: 184px;
    }
    .carousel-stats {
        display: flex;
    }
    .stat {
        max-width: 100%;
        height: 100%;
    }
    .carousel-indicator-img:nth-child(1) {
        display: none;
    }
    .carousel-indicator-img {
        width: calc(100% / 4);
    }
    .carousel-indicator-ellipse2 {
        bottom: -4px;
        left: 33%;
        transform: translateX(0%);
    }
    .carousel-indicator-ellipse4 {
        bottom: -4px;
        left: 66%;
        transform: translateX(25%);
    }
    .carousel-indicator-ellipse3 {
        display: none;
    }
    .carousel-images-ellipse1 {
        top: -4px;
        left: calc(33%);
    }
    .carousel-images-ellipse3 {
        top: -4px;
        left: calc(66%);
    }
    .carousel-stat-ellipse2 {
        top: 184px;
        transform: translateY(-33%);
        left: -4px;
    }
    .carousel-stat-ellipse3 {
        top: 184px;
        right: -4px;
        left: unset;
        transform: translateY(-33%);
    }
    .carousel-indicator-img.active .carousel-indicator-line {
        animation: carouselline 8.5s ease;
    }
    .case-study-detail {
        display: flex;
        padding: 80px;
        flex-direction: column;
        align-items: center;
        gap: 80px;
        width: 100%;
    }
    .detail-heading-bx {
        display: flex;
        max-width: 720px;
        padding-top: 80px;
        flex-direction: column;
        align-items: center;
        gap: 16px;
        width: 100%;
    }
    .detail-image {
        border-radius: 24px;
    }
    .detail-image-container img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 24px;
    }
    .case-study-ellipse4, .case-study-ellipse3, .case-study-ellipse2, .case-study-ellipse1 {
        display: none; 
    }
    .detail-image-one img, .detail-image-two img {
        border-radius: 16px;
    }
    .starter-pack {
        width: 100%;
    }
} 









































@media (max-width: 960px) {
    .advantages {
        display: flex;
        padding: 40px 24px;
        flex-direction: column;
        align-items: center;
        gap: 24px;
        align-self: stretch;
    }  
    .advantage-illustration-bx {
        display: grid;
        grid-template-columns: repeat(1, 100%);
        position: relative;
        width: 100%;
    } 
    .illustration-second-ellipse {
        left: -8px;
        top: 25%;
        transform: translateY(-25%);
    }
    .illustration-fifth-ellipse {
        right: -8px;
        top: 25%;
        left: unset;
        transform: translateY(-25%);
    }
    .illustration-eight-ellipse {
        right: -8px;
        top: 75%;
        left: unset;
        transform: translateY(-75%);
    }
    .illustration-tenth-ellipse {
        display: flex;
        left: -8px;
        top: 75%;
        transform: translateY(-75%);
    }
    .processes {
        display: flex;
        padding: 40px 24px;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 24px;
    }
    .processes-progress-bx {
        margin-bottom: 16px;
    }
    .pricing {
        display: flex;
        padding: 40px 24px;
        flex-direction: column;
        align-items: center;
        gap: 24px;
        align-self: stretch;
    }
    .pricing-list {
        display: flex;
        height: 100%;
        align-items: center;
        flex-direction: column;
    }
    .faqs {
        display: flex;
        padding: 40px 24px;
        flex-direction: column;
        align-items: center;
        gap: 24px;
    }
    
    .case-studies {
        display: flex;
        padding: 40px 24px;
        flex-direction: column;
        align-items: center;
        gap: 40px;
    }
    .case-studies-content-bx {
        display: flex;
        width: 100%;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        gap: 40px;
    }
    .case-study-list {
        list-style: none;
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        gap: 40px;
    }
    .case-study-item {
        display: flex;
        flex-direction: column;
        gap: 40px;
        width: 100%;
    }
    .case-study-item-bx {
        display: flex;
        height: 440px;
        padding: 24px 40px;
        flex-direction: column;
        justify-content: flex-end;
        align-items: flex-start;
        gap: 10px;
        position: relative;
    }



    .case-study-item-bx:nth-child(1)::after {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 2;
        background: linear-gradient(0deg, rgba(0, 0, 0, 0.24) 0%, rgba(0, 0, 0, 0.24) 100%), linear-gradient(0deg, rgba(30, 30, 30, 0.40) 0%, rgba(30, 30, 30, 0.40) 100%);
    }
    .case-study-item-bx:nth-child(1)::before {
        background: linear-gradient(180deg, rgba(30, 30, 30, 0.00) 0%, rgba(30, 30, 30, 0.00) 50%, rgba(30, 30, 30, 0.40) 75%, #1E1E1E 100%);
        content: "";
        position: absolute;
        inset: 0;
        z-index: 3;
    }
    .case-study-item-bx:nth-child(2)::before {
        background: linear-gradient(180deg, rgba(30, 30, 30, 0.00) 0%, rgba(30, 30, 30, 0.00) 50%, rgba(30, 30, 30, 0.40) 75%, #1E1E1E 100%);
        content: "";
        position: absolute;
        inset: 0;
        z-index: 3;
    }
    .case-study-item-bx:nth-child(3)::before {
        background: linear-gradient(180deg, rgba(30, 30, 30, 0.00) 0%, rgba(30, 30, 30, 0.00) 50%, rgba(30, 30, 30, 0.40) 75%, #1E1E1E 100%);
        content: "";
        position: absolute;
        inset: 0;
        z-index: 3 ;
    }
    .case-study-item-bx:nth-child(2)::after {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 2;
        background: linear-gradient(0deg, rgba(103, 26, 0, 0.40) 0%, rgba(103, 26, 0, 0.40) 100%)
    }
    .case-study-item-bx:nth-child(3)::after {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 2;
        background: linear-gradient(0deg, rgba(53, 103, 0, 0.40) 0%, rgba(53, 103, 0, 0.40) 100%);
    }
    .case-study-item-bx img {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        object-fit: cover;
    }
    .stat-list {
        list-style: none;
        display: flex;
        flex-direction: column;
        gap: 40px;
    }
    .case-study-para {
        color: #FFF;

        /* heading 2 */
        font-family: "Instrument Serif";
        font-size: 40px;
        font-style: normal;
        font-weight: 400;
        line-height: 48px; /* 120% */
    }
    .case-study-btn a{
        background: transparent;
        border: none;
        color: #FFF;
        text-decoration: none;

        /* body/paragraph */
        font-family: "DM Sans";
        font-size: 16px;
        font-style: normal;
        font-weight: 400;
        line-height: 24px; /* 150% */
        display: flex;
        align-items: center;
        gap: 8px;
    }
    .stat-number {
        color: #1E1E1E;
        font-family: "Instrument Serif";
        font-size: 32px;
        font-style: normal;
        font-weight: 400;
        line-height: 48px; /* 150% */
    }
    .stat-description {
        color:  rgba(0, 0, 0, 0.64);

        /* body/paragraph */
        font-family: "DM Sans";
        font-size: 16px;
        font-style: normal;
        font-weight: 400;
        line-height: 24px; /* 150% */
    }
    .case-study-content-bx {
        display: flex;
        flex-direction: column;
        gap: 8px;
        z-index: 6;
    }
    .case-top-left, .case-top-right, .case-bottom-left, .case-bottom-right {
        display: flex;
        position: absolute;
        width: 8px;
        height: 8px;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        border-radius: 8px;
        background: linear-gradient(0deg, rgba(30, 30, 30, 0.16) 0%, rgba(30, 30, 30, 0.16) 100%), #FFF;
    }
    .case-top-left {
        top: -4px;
        left: -8px;
    }
    .case-top-right {
        top: -4px;
        right: -8px;
    }
    .case-bottom-left {
        bottom: -4px;
        left: -8px;
    }
    .case-bottom-right {
        bottom: -4px;
        right: -8px;
    }
    .case-study-detail {
        display: flex;
        padding: 40px 24px;
        flex-direction: column;
        align-items: center;
        gap: 40px;
    }
    .detail-image-bx {
        flex-direction: column;
        height: 100%;
    }
    .detail-image-one, .detail-image-two {
        width: 100%;
    }
    .our-approach-img-bx {
        flex-direction: column;
        height: 100%;
    }
    .our-approach-img-one, .our-approach-img-two {
        width: 100%;
        border-radius: 16px;
    }
    .our-approach-img-one img, .our-approach-img-two img {
        border-radius: 16px;
    }
    .study-ellipse1, .study-ellipse2, .study-ellipse3, .study-ellipse4 {
        display: flex;
        width: 8px;
        height: 8px;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        border-radius: 8px;
        background: linear-gradient(0deg, rgba(30, 30, 30, 0.16) 0%, rgba(30, 30, 30, 0.16) 100%), #FFF;
    }
    .study-ellipse1 {
        position: absolute;
        left: -4px;
        top: -4px;
    }
    .study-ellipse2 {
        position: absolute;
        right: -4px;
        top: -4px;
    }
    .study-ellipse3 {
        position: absolute;
        left: -4px;
        bottom: -4px;
    }
    .study-ellipse4 {
        position: absolute;
        right: -4px;
        bottom: -4px;
    }
    .illustration-img1-bx img, .illustration-img2-bx img, .illustration-img3-bx img, .illustration-img4-bx img {
        width: 100%;
        object-fit: cover;
        height: 100%;
    }
}