/* Benefits Section - Desktop Styles */
.benefits-section {
    padding-top: 0;
    min-height: 300vh; /* Space for animation */
    padding-bottom: 0;
    position: relative;
    background-image: url('../../../../assets/img/product/what-is-syfu/ellipse-324.svg');
    background-repeat: no-repeat;
    background-position: center top -1085px;
    background-size: 2377px 1628px;
}

.benefits-container {
    background-image: url('../../../../assets/img/product/why/why-bg.png');
    background-repeat: no-repeat;
    background-position: left -729px;
    background-size: 1560px 1560px;
    align-items: flex-start; /* Align content to top instead of center */
    padding-top: 2.5625rem; /* 41px top spacing */
}

.benefits-content {
    flex-direction: row;
    width: 1286px;
    max-width: 1286px;
    justify-content: space-between;
    align-items: center;
    gap: 0; /* Remove gap, use space-between */
    margin-left: -2px; /* Offset to left by 2px */
}


/* Section A - Image Desktop */
.benefits-image-section {
     width: 32.5625rem; /* 521px */
    height: 39.96rem; /* 639.36px */
}
.benefits-image {
    width: 32.5625rem; /* 521px */
    height: 39.96rem; /* 639.36px */
    flex-shrink: 0;
    background: url('../../../../assets/img/product/benefits/d-app-f.png')  0px -0.003px / 100% 100.001% no-repeat;
}

/* Section B - Title and Carousel Desktop */
.benefits-text-section {
    width: 42.0625rem; /* 673px desktop */
    margin-top: 0;
    /* Height removed - handled by parent container */
}

/* Number Badge Desktop */
.slide-number {
    width: 5rem; /* 80px */
    height: 5rem; /* 80px */
    top: -2.5rem; /* Half of 80px */
}

/* Carousel Desktop */
.benefits-carousel {
    /* Inherit positioning from mobile */
    height: 620px; /* Fixed height to show full slide including borders */
    padding-top: 3rem; /* More padding on desktop */
    overflow: hidden; /* Hide slides that are translateY(100%) */
    position: relative; /* Ensure proper positioning context */
}

.carousel-slide {
    width: 42.0625rem; /* 673px */
    max-width: 42.0625rem;
    /*height: auto; !* Let content determine height *!*/
    height: 28rem;
    padding: 4rem 3rem 3rem 3rem; /* 64px 48px 48px 48px */
    gap: 1.5rem; /* 24px */
    border: 2px solid #9AF9FF;
    backdrop-filter: blur(0.9375rem); /* 15px */
}

/* Slide Content Desktop */
.slide-content {
    gap: 1.5rem; /* 24px desktop */
}

.slide-title {
    font-size: 2.25rem; /* 55px */
    line-height: 1.3; /* 60px - 109.091% */
}

.slide-description {
    font-size: 1.25rem; /* 24px */
    letter-spacing: -0.031rem; /* -0.5px */
}

/* Transform Section Desktop - Now outside benefits section */  
.transform-section {
    position: relative;
    margin-top: 0; /* No negative margin needed since it's outside */
    padding-top: 10rem; /* Fixed spacing from benefits section */
    padding-bottom: 5rem;
    z-index: 10; /* Above benefits container */
}

.transform-titles {
    margin-bottom: 2.5rem; /* 40px */
    position: relative;
    z-index: 101;
}

.transform-main-title {
    width: 36.125rem; /* 578px */
    font-size: 1.75rem; /* 28px */
    font-weight: 700;
}

.transform-sub-title {
    width: 51.313rem; /* 821px */
    margin-top: 1.375rem; /* 22px gap */
    font-size: 3rem; /* 48px */
    line-height: 3.25rem; /* 52px - 108.333% */
    leading-trim: both;
    text-edge: cap;
}

.transform-slider {
    max-width: none;
    width: 100%;
    display: grid;
    grid-template-columns: 3rem 15rem 30.3rem 3rem; /* left-arrow, phone, description, right-arrow */
    grid-template-areas: "left-arrow phone description right-arrow";
    gap: 3rem; /* 48px gap between content areas */
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 101;
}

.slider-arrow-left {
    grid-area: left-arrow;
}

.phone-image-area {
    grid-area: phone;
    margin: 0;
}

.slider-description {
    grid-area: description;
    width: 30.3rem; /* 484.8px */
    margin-top: 0;
    text-align: left;
    display: flex;
    align-items: center;
}

.slider-arrow-right {
    grid-area: right-arrow;
}

.description-content {
    max-width: none;
    width: 100%;
    margin: 0;
}

.title-border {
    margin: 0 0 0.75rem 0; /* Remove auto centering for left alignment */
}

.description-title {
    text-align: left;
    margin: 0 0 0.75rem 0;
}

.description-text {
    font-size: 1.5rem; /* 24px */
    letter-spacing: -0.031rem; /* -0.5px */
    text-align: left;
}

/* Remove absolute positioning for desktop - using grid instead */