/* What is SyFu Section - Desktop Styles */
@media (min-width: 1280px) {
    .what-is-syfu {
        background-image: url('../../../../assets/img/product/what-is-syfu/ellipse-324.svg');
        background-repeat: no-repeat;
        background-position: center top;
        background-size: 2377px 1628px;
        background-clip: padding-box;
    }
}

.syfu-top-bg {
    width: 1028px;
    height: 772.5px;
    top: -116px;
    left:0;
    border-radius: 636px;
    opacity: 0.7;
    background: var(--SyFu-purple-main, #6B46C1);
    filter: blur(225px);
    z-index: 10; /* Above video and mask but below content */
}
/* Header Container Desktop */
.syfu-header-container {
    position: relative;
    padding-top: 5.5625rem; /* 89px top padding desktop */
    z-index: 11; /* Above purple bg */
}

.syfu-title {
    gap: 10px; /* No gap on desktop */
}

/* First text "What is" - Desktop */
.syfu-title-text1 {
    font-size: 3.375rem; /* 54px */
    line-height: 3.375rem; /* 54px - 100% */
    align-self: unset; /* Reset mobile top alignment */
}

/* Logo in the middle - Desktop */
.syfu-title-logo {
    width: 9.375rem; /* 150px */
    height: 3.640rem; /* 58.241px - original spec */
    padding-top: 0.688rem; /* 11px - original spec */
    align-self: unset; /* Reset mobile centering */
}

.syfu-title-logo img {
            height: 110%;
        margin-top: 4px;
}

/* Second text "?" - Desktop */
.syfu-title-text2 {
    font-size: 3.375rem; /* 54px */
    line-height: 3.375rem; /* 54px - 100% */
    align-self: unset; /* Reset mobile top alignment */
}

/* Content Container Desktop */
.syfu-container {
    margin-top: -2.18rem; 
    padding-bottom: 6.188rem; /* 99px bottom padding desktop */
}

.syfu-inner-container {
    width: 82.5625rem; /* 1321px width */
    margin: 0 auto; /* Centered */
    display: flex;
    justify-content: center;
}

.syfu-content {
    flex-direction: row; /* Desktop: two column layout */
    gap: 2.5rem; /*  gap between video and content desktop */
    align-items: stretch; /* Allow vertical centering */
}

/* NFT Illustration Desktop */
.nft-illustration {
    width: 46.3125rem; /* 741px width */
    height: 43.125rem; /* 690px height */
    margin-left: -6.25rem; /* -100px margin left */
    margin-top: 0;
    z-index: 1; /* Below purple bg */
}

/* Video Container Desktop */
.video-container {
    width: 43.125rem; /* 690px desktop */
    height: 43.125rem; /* 690px desktop */
}

.background-video {
    width: 42.114rem; /* 673.828px desktop */
    height: 42.114rem; /* 673.828px desktop */
}

/* Left Image - Desktop */
.left-image {
    width: 11.256rem; /* 180.088px */
    height: 13.577rem; /* 217.231px */
    border-radius: 0.75rem; /* 12px */
    border: 1px solid #E49221;
    box-shadow: 0 0 1.25rem 0 rgba(250, 168, 126, 0.30), 0 0.25rem 2.25rem 0 #FFAE00;
}

/* Top Image - Desktop */
.top-image {
    width: 10rem; /* 160px */
    height: 12.0625rem; /* 193px */
    border-radius: 1rem; /* 16px */
    border: 1px solid #FFF;
    box-shadow: 0 0 1.25rem 0 rgba(242, 81, 188, 0.30), 0 0.25rem 2.25rem 0 #C71F8F;
}

.top-image .nft-card {
    border-radius: 1rem;
}

/* Bottom Image - Desktop */
.bottom-image {
    width: 10rem; /* 160px */
    height: 12.0625rem; /* 193px */
    border-radius: 0.75rem; /* 12px */
    border: 1px solid #58B2D4;
    box-shadow: 0 0 1.25rem 0 rgba(123, 219, 255, 0.30), 0 0.25rem 2.25rem 0 #58B2D4;
}

.left-image .nft-card,
.bottom-image .nft-card {
    border-radius: 0.75rem;
}

/* Feature Cards Desktop */
.feature-cards {
    flex-direction: column; /* Vertical cards on desktop */
    padding: 1.75rem 0; /* 28px top and bottom padding desktop */
    display: flex;
    align-items: center;
    justify-content: center; /* Center vertically */
    align-self: center; /* Center in parent container */
    gap: 1.5rem; /* Gap between cards */
    margin-top: 5.125rem;
    width: auto; /* Reset width */
}

.card-description {    
    width: 22.5rem; /* 360px width desktop */
}

.card-content {
    flex-direction: row; /* Title and desc aligned horizontally on desktop */
    gap: 2.4375rem; /* 39px gap between title and desc */
    align-items: center; /* Center description vertically with title */
    padding: 1.75rem 0; /* 28px top bottom padding */
}

.card-title-section {
    width: 16.9375rem; /* 271px width */
    height: 3.75rem; /* 60px height desktop */
}

.card-title {
    font-size: 3.75rem; /* 60px desktop */
}

.card-description {
    font-size: 1.25rem; /* 20px desktop */
    flex: 1; /* Take remaining space */
}