.slides-container {font-family: var(--font-body);color: var(--color-dark);background-color: #eae8e4;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;}

/* Slides Container (Absolute Stacked) */
.slides-container {position: relative;width: 100%;height: 100vh;overflow: hidden;}

/* Slides - Absolute overlay stack layout */
.slide {position: absolute;top: 0;left: 0;width: 100%;height: 100%;display: flex;overflow: hidden;will-change: transform;}
.slide-left {width: 50%;height: 100%;background-color: #fff;display: flex;flex-direction: column;justify-content: center;padding: 6% 0 0 0;will-change: transform;}
.slide-right {width: 50%;height: 100%;overflow: hidden;position: relative;will-change: transform;background-color: #fff;}

/* Image reveal wrapper */
.image-reveal-wrapper {width: 100%;height: 100%;overflow: hidden;position: relative;}
.parallax-img {width: 75%;height: 75%;object-fit: cover;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -45%);}

/* Slide Text Content */
.slide-content {max-width: 500px;will-change: transform, opacity;}
.category {font-size: 0.95rem;font-weight: 500;font-style: italic;color: rgba(26, 26, 26, 0.6);margin-bottom: 1.2rem;display: block;letter-spacing: 0.05em;text-transform: capitalize;}
.slide-content h2 {font-family: var(--font-title);font-size: 2.6rem;font-weight: 800;line-height: 1.15;color: var(--color-dark);margin-bottom: 1.2rem;letter-spacing: -0.02em;}
.slide-desc {font-size: 0.9rem;line-height: 1.6;color: rgba(26, 26, 26, 0.65);margin-bottom: 2rem;will-change: transform, opacity;}

/* Premium Button styling */
.btn-learn {display: inline-flex;align-items: center;justify-content: space-between;gap: 1.5rem;font-family: var(--font-body);font-size: 0.85rem;font-weight: 600;text-transform: uppercase;letter-spacing: 0.1em;text-decoration: none;color: var(--color-dark);border: 1px solid rgba(26, 26, 26, 0.2);padding: 1rem 2rem;border-radius: 50px;background-color: transparent;transition: var(--transition-smooth);cursor: pointer;}
.btn-learn span {position: relative;z-index: 2;}
.btn-learn svg {width: 1.1rem;height: 1.1rem;stroke: var(--color-dark);transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1);position: relative;z-index: 2;}
.btn-learn:hover {border-color: var(--color-dark);background-color: var(--color-dark);color: var(--color-light);}
.btn-learn:hover svg {stroke: var(--color-light);transform: translateX(6px);}

/* Normal Scrollable Section style */
.next-section {min-height: 100vh;background-color: #f7f6f3;padding: 8rem 10% 8rem 12%;display: flex;align-items: center;}
.section-container {width: 100%;max-width: 1200px;margin: 0 auto;}
.section-tag {font-family: var(--font-body);font-size: 0.9rem;font-weight: 600;text-transform: uppercase;letter-spacing: 0.15em;color: rgba(26, 26, 26, 0.5);display: block;margin-bottom: 1.5rem;}
.section-title {font-family: var(--font-title);font-size: 3.5rem;font-weight: 800;line-height: 1.1;color: var(--color-dark);max-width: 800px;margin-bottom: 5rem;letter-spacing: -0.03em;}
.projects-grid {display: grid;grid-template-columns: repeat(3, 1fr);gap: 2.5rem;}
.project-card {display: flex;flex-direction: column;cursor: pointer;}
.project-image-wrapper {aspect-ratio: 4/5;width: 100%;overflow: hidden;border-radius: 4px;background-color: #e2e2e2;margin-bottom: 1.5rem;}
.project-image-wrapper img {width: 100%;height: 100%;object-fit: cover;transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);}
.project-card:hover .project-image-wrapper img {transform: scale(1.05);}
.project-info h3 {font-family: var(--font-title);font-size: 1.4rem;font-weight: 700;margin-bottom: 0.4rem;}
.project-info p {font-size: 0.9rem;color: rgba(26, 26, 26, 0.6);}


/* Responsive Media Queries */
@media (max-width: 1024px) {
.slide-content h2 {font-size: 2.2rem;}
.section-title {font-size: 2.8rem;margin-bottom: 3.5rem;}
.projects-grid {gap: 1.5rem;}
}

@media (max-width: 991.98px) {
.scroll-container{display: none !important;}
.slide {flex-direction: column;position: relative;}
.slide-left {position: relative;width: 100%;height: auto;padding: 3rem 2.5rem 1rem 2.5rem;justify-content: flex-end;}
.slide-right {position: relative;width: 100%;height:auto;}
.slide-content h2 {font-size: 1.8rem;margin-bottom: 1rem;}
.category {margin-bottom: 0.6rem;}
.slide-desc {font-size: 0.85rem;margin-bottom: 1.2rem;}
.btn-learn {padding: 0.8rem 1.6rem;}
.next-section {padding: 5rem 2.5rem;}
.section-title {font-size: 2.2rem;margin-bottom: 2.5rem;}
.projects-grid {grid-template-columns: 1fr;gap: 3rem;}
}