/* Custom fonts */
@font-face {
    font-family: 'Jost';
    src: url('./attached_assets/static/Jost-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Jost';
    src: url('./attached_assets/static/Jost-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'Jost';
    src: url('./attached_assets/static/Jost-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: 'Jost';
    src: url('./attached_assets/static/Jost-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
}

/* CSS Variables */
:root {
    --furniture-primary: hsl(28, 42%, 32%);
    --furniture-accent: hsl(20, 100%, 50%);
    --furniture-accent-hover: hsl(18, 100%, 45%);
    --font-family: 'Jost', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* Reset and base styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    overflow-x: hidden;
    /* Prevent horizontal scroll */
}

body {
    font-family: var(--font-family);
    font-weight: 400;
    color: #000;
    line-height: 1.6;
    background: linear-gradient(135deg, #f8f4f0 0%, #efe8e0 100%);
    background-attachment: fixed;
    overflow-x: hidden;
    /* Prevent horizontal scroll */
    width: 100%;
}

/* Utility classes */
.container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 1rem;
}

@media (min-width: 768px) {
    .container {
        padding: 0 2rem;
    }
}

/* Hero Section */
.hero-section {
    min-height: 100vh;
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #5c463a 0%, #4a3b30 100%);
}

#heroCanvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
}

.background-image {
    position: absolute;
    inset: 0;
    overflow: hidden;
}



.hero-image {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 0;
    height: 95vh;
    width: auto;
    object-fit: cover;
    z-index: 2;
}

@media (min-width: 1024px) {
    .hero-image {
        height: 95vh;
        max-width: 70%;
        left: auto;
        transform: none;
        right: calc((100vw - 1400px) / 2 + 2rem);
    }
}

.logo-section {
    position: relative;
    z-index: 10;
    padding-top: 1rem;
    padding-right: 1rem;
}

@media (min-width: 768px) {
    .logo-section {
        padding: 50px 2rem 0;
    }
}

@media (min-width: 1024px) {
    .logo-section {
        padding: 120px 0 0;
    }
}

.logo-container {
    display: flex;
    justify-content: flex-end;
    align-items: flex-start;
}

@media (min-width: 1024px) {
    .logo-container {
        justify-content: flex-start;
    }
}

.main-logo {
    height: 3.5rem;
    width: auto;
    /* Layered shadows for 3D volumetric effect */
    filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.3)) drop-shadow(0 8px 12px rgba(0, 0, 0, 0.3));
    transition: filter 0.3s ease;
}

@media (min-width: 768px) {
    .main-logo {
        height: 5rem;
    }
}

.hero-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 20;
    padding-bottom: 50px !important;
}

@media (min-width: 1024px) {
    .hero-content {
        padding-bottom: 100px !important;
    }
}

/* Hero Stats */
.hero-stats-container {
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 10px;
    margin-top: 1.5rem;
    width: 100%;
    position: relative;
    z-index: 25;

    /* Glassmorphism effect */
    background: rgba(92, 70, 58, 0.25);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 24px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 1.25rem 0.5rem;
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.2),
        0 2px 8px 0 rgba(0, 0, 0, 0.1),
        inset 0 1px 0 0 rgba(255, 255, 255, 0.3);
}

.hero-stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.hero-stat-value {
    font-family: var(--font-family);
    font-weight: 700;
    font-size: 1.75rem;
    color: var(--furniture-accent);
    line-height: 1;
    margin-bottom: 0.25rem;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5), 1px 1px 2px rgba(0, 0, 0, 0.3);
}

.hero-stat-text {
    font-family: var(--font-family);
    font-size: 0.65rem;
    font-weight: 400;
    color: #fff;
    line-height: 1.2;
    text-align: center;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5), 1px 1px 2px rgba(0, 0, 0, 0.3);
}

@media (min-width: 1024px) {
    .hero-stats-container {
        position: absolute;
        width: auto;
        margin-top: 0;
        right: max(2rem, calc((100vw - 1400px) / 2 + 2rem));
        bottom: 100px;
        gap: 2.5rem;
        align-items: flex-start;
        padding: 2rem 2.5rem;
        border-radius: 32px;
    }

    .hero-stat-item {
        align-items: flex-start;
        text-align: left;
        max-width: 200px;
    }

    .hero-stat-value {
        font-size: 3rem;
        margin-bottom: 0.5rem;
    }

    .hero-stat-text {
        font-size: 1rem;
        line-height: 1.3;
        text-align: left;
    }
}

.content-wrapper {
    max-width: 42rem;
    width: 100%;
    text-align: center;
    margin: 0 auto;
}

@media (min-width: 768px) {
    .content-wrapper {
        text-align: left;
        margin: 0;
    }
}

.heading-container {
    margin-bottom: 2rem;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

@media (min-width: 768px) {
    .heading-container {
        margin-bottom: 3rem;
    }
}

.heading-content {
    position: relative;
    z-index: 10;

    /* Стеклянный фон для заголовка на мобильном */
    background: rgba(92, 70, 58, 0.25);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 1rem 1rem;
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.2),
        0 2px 8px 0 rgba(0, 0, 0, 0.1),
        inset 0 1px 0 0 rgba(255, 255, 255, 0.3);
}

@media (min-width: 768px) {
    .heading-content {
        background: none;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        border-radius: 0;
        border: none;
        padding: 0;
        box-shadow: none;
    }
}

.main-heading {
    color: white;
    font-weight: 700;
    font-size: 1.85rem;
    line-height: 1.1;
    margin-bottom: 0.75rem;
    text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.4), 1px 1px 0px rgba(0, 0, 0, 0.2);
}

@media (min-width: 768px) {
    .main-heading {
        font-size: 3rem;
        margin-bottom: 0.75rem;
    }
}

@media (min-width: 1024px) {
    .main-heading {
        font-size: 3.75rem;
    }
}

@media (min-width: 1280px) {
    .main-heading {
        font-size: 4.5rem;
    }
}

.heading-line {
    display: block;
}

@media (min-width: 768px) {
    .heading-line.accent {
        display: inline;
    }
}

.heading-line.accent {
    color: var(--furniture-accent);
}

.hero-description {
    color: rgba(255, 255, 255, 0.9);
    font-size: 1.25rem;
    font-weight: 300;
    line-height: 1.625;
    margin-bottom: 0;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5), 1px 1px 2px rgba(0, 0, 0, 0.3);
}

@media (min-width: 768px) {
    .hero-description {
        font-size: 1.5rem;
        margin-bottom: 2.5rem;
    }
}



.accent-text {
    font-weight: 600;
    color: var(--furniture-accent);
}


.cta-section {
    display: flex;
    flex-direction: column;
    align-items: center;
}

@media (min-width: 1024px) {
    .cta-section {
        align-items: center;
        width: fit-content;
    }
}

.cta-button {
    position: relative;
    width: 100%;
    background-color: var(--furniture-accent);
    color: white;
    font-weight: 600;
    font-size: 1.25rem;
    padding: 1rem 2.5rem;
    border: 2px solid var(--furniture-accent);
    border-radius: 9999px;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    cursor: pointer;
    transition: all 0.3s ease-out;
    margin-bottom: 0;

    /* Пульсирующая анимация с оранжевыми волнами */
    animation: pulse-waves 2s ease-in-out infinite;
}

/* Keyframes для вылетающих оранжевых волн */
@keyframes pulse-waves {
    0% {
        box-shadow:
            0 0 0 0 rgba(255, 85, 0, 0.25),
            0 0 0 0 rgba(255, 85, 0, 0.18),
            0 0 0 0 rgba(255, 85, 0, 0.12),
            0 10px 15px -3px rgba(0, 0, 0, 0.1),
            0 4px 6px -2px rgba(0, 0, 0, 0.05);
    }

    100% {
        box-shadow:
            0 0 0 15px rgba(255, 85, 0, 0),
            0 0 0 30px rgba(255, 85, 0, 0),
            0 0 0 45px rgba(255, 85, 0, 0),
            0 10px 15px -3px rgba(0, 0, 0, 0.1),
            0 4px 6px -2px rgba(0, 0, 0, 0.05);
    }
}

@media (min-width: 768px) {
    .cta-button {
        width: auto;
        padding: 1.5rem 3.5rem;
    }
}

.cta-button:hover {
    background-color: var(--furniture-accent-hover);
    border-color: var(--furniture-accent-hover);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    transform: scale(1.05);
    /* Анимация продолжается при наведении */
}

.button-content {
    position: relative;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
}

.arrow {
    margin-left: 0.75rem;
    transition: all 0.3s ease;
}

.cta-button:hover .arrow {
    transform: translateX(0.25rem) scale(1.1);
}

.next-course {
    color: white;
    font-size: 1rem;
    text-align: center;
    margin-bottom: 0;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5), 1px 1px 2px rgba(0, 0, 0, 0.3);
}



/* Mobile Menu Overlay */
.mobile-menu-overlay {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.4);
    z-index: 40;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease-in-out;
}

.mobile-menu-overlay.active {
    opacity: 1;
    visibility: visible;
}

/* Mobile Menu Container */
.mobile-menu-container {
    position: fixed;
    top: 5rem;
    left: 1rem;
    right: 1rem;
    bottom: 1rem;
    /* Constrain height */
    z-index: 50;

    /* Animation Start State: Slight slide up and scale down */
    transform-origin: top center;
    transform: translateY(-20px) scale(0.95);
    opacity: 0;

    /* Unified transition for smooth pop-in */
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);

    /* Visual Styles (Moved from content to fix backdrop-filter) */
    background: rgba(92, 70, 58, 0.25);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 24px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.2),
        0 2px 8px 0 rgba(0, 0, 0, 0.1),
        inset 0 1px 0 0 rgba(255, 255, 255, 0.3);
    padding: 1rem;
    overflow: hidden;

    /* Force hardware acceleration for filters */
    will-change: transform, opacity;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;

    pointer-events: none;
    display: flex;
    flex-direction: column;
}

.mobile-menu-container.active {
    transform: translateY(0) scale(1);
    opacity: 1;
    pointer-events: auto;
}

.mobile-menu-content {
    /* Styles moved to container to fix blur */
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
    width: 100%;

    height: 100%;
    display: flex;
    flex-direction: column;
}

.mobile-nav {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex: 1;
    gap: 0;
    padding-bottom: 1vh;
}

.mobile-nav .nav-link {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: rgba(255, 255, 255, 0.9);
    font-weight: 500;
    font-size: clamp(1rem, 2.2vh, 1.25rem);
    padding: 0.5vh 1rem;
    text-decoration: none;
    transition: all 0.2s ease;
    border-radius: 16px;
}

.mobile-nav .nav-link:hover,
.mobile-nav .nav-link:active {
    background: rgba(255, 255, 255, 0.1);
    color: var(--furniture-accent);
}

.nav-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: clamp(2.5rem, 6vh, 3.5rem);
    height: clamp(2.5rem, 6vh, 3.5rem);
    background: transparent;
    border-radius: 12px;
    color: white;
    transition: color 0.2s ease;
    flex-shrink: 0;
}

.nav-icon svg {
    width: 60%;
    height: 60%;
}

.mobile-nav .nav-link:hover .nav-icon {
    background: transparent;
    color: var(--furniture-accent);
}

.nav-text {
    flex: 1;
}

.mobile-cta-button {
    width: 100%;
    margin-top: auto;
    background-color: var(--furniture-accent);
    color: white;
    font-weight: 600;
    font-size: clamp(1rem, 2.2vh, 1.25rem);
    padding: clamp(0.75rem, 2vh, 1rem) 2.5rem;
    border: 2px solid var(--furniture-accent);
    border-radius: 9999px;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    cursor: pointer;
    transition: all 0.3s ease-out;
    display: flex;
    align-items: center;
    justify-content: center;

    /* Animation consistent with hero button */
    animation: pulse-waves 2s ease-in-out infinite;
}

.mobile-cta-button:hover {
    background-color: var(--furniture-accent-hover);
    border-color: var(--furniture-accent-hover);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    transform: scale(1.05);
}

.mobile-cta-button .arrow {
    margin-left: 0.75rem;
    transition: all 0.3s ease;
    display: inline-block;
}

.mobile-cta-button:hover .arrow {
    transform: translateX(0.25rem) scale(1.1);
}

/* Hide updated menu on desktop */
@media (min-width: 1024px) {

    .mobile-menu-container,
    .mobile-menu-overlay {
        display: none;
    }
}


/* Hamburger Menu */
.hamburger-menu {
    position: fixed;
    top: 1rem;
    left: 1rem;
    padding: 0.5rem;
    z-index: 100;
    border-radius: 50%;
    border: none;
    background-color: transparent;
    cursor: pointer;
    transition: all 0.3s ease;
}

@media (min-width: 1024px) {
    .hamburger-menu {
        display: none;
    }
}

.hamburger-menu.active {
    background-color: transparent;
    box-shadow: none;
}

.hamburger-lines {
    width: 1.5rem;
    height: 1.5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.line {
    width: 1.5rem;
    height: 0.125rem;
    margin-bottom: 0.25rem;
    transition: all 0.3s ease;
    background-color: #f97316;
}

.hamburger-menu.active .line {
    background-color: #f97316;
}

.hamburger-menu.active .line-1 {
    transform: rotate(45deg) translateY(0.5rem);
}

.hamburger-menu.active .line-2 {
    opacity: 0;
}

.hamburger-menu.active .line-3 {
    transform: rotate(-45deg) translateY(-0.5rem);
}

/* Sticky Navigation (Floating Bottom Menu) */
.sticky-nav {
    position: fixed;
    bottom: 2rem;
    top: auto;
    left: 50%;
    transform: translateX(-50%) translateY(150%);
    z-index: 100;
    width: auto;
    max-width: 95vw;

    /* Glassmorphism effect */
    background: rgba(92, 70, 58, 0.5);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);

    padding: 0.5rem 0.5rem;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    display: none;
    /* Hidden by default on mobile/tablet */
}

.sticky-nav.visible {
    transform: translateX(-50%) translateY(0);
}

@media (min-width: 1024px) {
    .sticky-nav {
        display: block;
    }
}

.nav-container {
    width: auto;
    margin: 0;
    padding: 0;
}

.nav-content {
    display: flex;
    align-items: center;
    justify-content: center;
    height: auto;
    padding: 0;
}

.desktop-nav {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    position: relative;
    z-index: 10;

    /* Enable horizontal scrolling */
    white-space: nowrap;
    overflow-x: auto;
    overflow-y: hidden;

    /* Smooth scrolling */
    scroll-behavior: smooth;

    /* Hide scrollbar */
    -ms-overflow-style: none;
    /* IE and Edge */
    scrollbar-width: none;
    /* Firefox */
}

/* Hide scrollbar for Chrome, Safari and Opera */
.desktop-nav::-webkit-scrollbar {
    display: none;
}


.desktop-nav .nav-link {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: rgba(255, 255, 255, 0.9);
    font-weight: 500;
    font-size: 1.1rem;
    padding: 0.75rem 1.25rem;
    text-decoration: none;
    transition: all 0.3s ease;
    border-radius: 50px;
    white-space: nowrap;
}

.desktop-nav .nav-link:hover,
.desktop-nav .nav-link.active {
    background: rgba(92, 70, 58, 0.85);
    color: white;
    box-shadow: none;
}

.desktop-nav .nav-link:hover .nav-icon,
.desktop-nav .nav-link.active .nav-icon {
    color: white;
}

.desktop-nav .nav-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    color: rgba(255, 255, 255, 0.7);
    transition: color 0.3s ease;
}

.desktop-nav .nav-icon svg {
    width: 100%;
    height: 100%;
}

.desktop-nav .nav-text {
    display: block;
}




/* Content Sections */
.content-sections {
    scroll-margin-top: 90px;
}




/* General Sections */
.section,
.speakers-section,
.why-us-section,
.students-section,
.program-section,
.results-section,
.prices-section {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    /* justify-content: center; Removed to avoid clipping on mobile */
}

/* Center content vertically if space permits, otherwise scroll */
.section>.container,
.speakers-section>.container,
.why-us-section>.container,
.students-section>.container,
.program-section>.container,
.results-section>.container,
.prices-section>.container {
    margin-top: 0;
    margin-bottom: 50px;
    width: 100%;
    /* Ensure container takes full width */
}



/* Unified Section Padding */
.speakers-section,
.why-us-section,
.students-section,
.program-section,
.results-section,
.prices-section,
.section {
    padding: 50px 0;
    margin-top: 0;
}

@media (min-width: 1024px) {

    .speakers-section,
    .why-us-section,
    .students-section,
    .program-section,
    .video-lessons-section,
    .results-section,
    .prices-section,
    .section {
        padding: 50px 0;
    }
}

@media (min-width: 768px) {
    .section-text {
        font-size: 1.25rem;
    }
}

/* ============================================== */
/* Achievements Section */
/* ============================================== */

.achievements-section {
    padding: 50px 0;
    background: transparent;
}

@media (min-width: 1024px) {
    .achievements-section {
        display: none;
    }
}

.achievements-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    max-width: 1100px;
    margin: 0 auto;
}

@media (min-width: 768px) {
    .achievements-grid {
        grid-template-columns: repeat(5, 1fr);
        gap: 1.5rem;
    }
}

.achievement-card {
    background: rgba(255, 255, 255, 0.7);
    border-radius: 16px;
    padding: 2rem 1.5rem;
    text-align: center;
    transition: all 0.4s ease;
    border: 1px solid rgba(92, 70, 58, 0.1);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    position: relative;
    overflow: hidden;
    cursor: pointer;
}

.achievement-card::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: radial-gradient(circle, rgba(255, 120, 50, 0.2) 0%, transparent 70%);
    transform: translate(-50%, -50%);
    transition: width 0.4s ease, height 0.4s ease;
    border-radius: 50%;
    z-index: 0;
}

.achievement-card:hover::before {
    width: 300%;
    height: 300%;
}

.achievement-card:hover {
    border-color: rgba(255, 120, 50, 0.3);
    box-shadow: 0 6px 20px rgba(255, 120, 50, 0.15);
}

.achievement-card .achievement-value,
.achievement-card .achievement-label {
    position: relative;
    z-index: 1;
}

.achievement-card.accent {
    background: linear-gradient(135deg, hsl(20, 100%, 50%) 0%, hsl(28, 100%, 45%) 100%);
    border: none;
}

.achievement-card.accent .achievement-value,
.achievement-card.accent .achievement-label {
    color: white;
}

.achievement-card.accent::before {
    background: radial-gradient(circle, rgba(255, 255, 255, 0.25) 0%, transparent 70%);
}

.achievement-card.accent:hover {
    box-shadow: 0 6px 25px rgba(255, 100, 50, 0.35);
}

.achievement-value {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--furniture-primary);
    line-height: 1;
    margin-bottom: 0.75rem;
}

@media (min-width: 768px) {
    .achievement-value {
        font-size: 3rem;
    }
}

.achievement-label {
    font-size: 0.9rem;
    color: #666;
    line-height: 1.4;
}

@media (min-width: 768px) {
    .achievement-label {
        font-size: 1rem;
    }
}

/* ============================================== */
/* About Section - Dynamic Gallery Background */
/* ============================================== */

.about-section-dynamic {
    position: relative;
    height: 100vh;
    width: 100%;
    overflow: hidden;
    padding-top: 50px !important;
    background: transparentbox;
    /* explicit removal */
    background: transparent;
}

.about-gallery {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* Initial Layout: Top (Empty), Middle (Gallery), Bottom (Empty) */
.gallery-section-row {
    width: 100%;
    position: relative;
    /* Default flex behavior */
    display: flex;
}

/* Top Row - Spacer */
.gallery-section-row:nth-child(1) {
    flex: 50;
    /* 50% */
}

/* Middle Row - Contains the 3 moving rows */
.gallery-section-row:nth-child(2) {
    flex: 45;
    /* 45% */
    display: flex;
    flex-direction: column;
    /* Strong 3D shadow on top and bottom edges */
    box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.3), 0 10px 30px rgba(0, 0, 0, 0.3);
    z-index: 5;
    background: transparent;
    overflow: hidden;
}

/* Bottom Row - Spacer */
.gallery-section-row:nth-child(3) {
    flex: 5;
    /* 5% */
}

/* Inner Moving Rows inside Middle Section */
.inner-moving-row {
    flex: 1;
    /* Divide middle section into 3 equal rows */
    width: 100%;
    position: relative;
    overflow: hidden;
    white-space: nowrap;
    display: flex;
    align-items: center;
}

.gallery-track {
    display: flex;
    height: 100%;
    position: relative;
    left: 0;
    top: 0;
    width: max-content;
    will-change: transform;
}

.gallery-track img {
    height: 100%;
    width: auto;
    object-fit: cover;
    display: block;
    margin: 0;
    padding: 0;
}

/* Animation Settings */
/* JavaScript handles the movement now */

.gallery-track {
    cursor: grab;
    touch-action: pan-y;
    /* Allow vertical scroll, handle horizontal in JS */
}

.gallery-track:active {
    cursor: grabbing;
}

/* Speeds - These classes tracking specific speeds are now handled by JS, 
   but we might keep them for initial identification if needed, 
   or just rely on the JS initialization. 
   For now, we remove the CSS animations. */

.speed-fast .gallery-track,
.speed-medium .gallery-track,
.speed-slow .gallery-track {
    animation: none;
}

/* Glass Text Overlay for About Section */
.about-text-overlay-row1 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    /* Only cover the first row (50%) */
    height: 50vh;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 50px;
    pointer-events: none;
    /* Let clicks pass through if needed */
    z-index: 10;
}

.glass-text-box {
    background: transparent;
    padding: 0;
    max-width: 90%;
    width: auto;
    text-align: center;
    pointer-events: auto;
    margin-top: 0;
}

.overlay-text {
    color: #000;
    font-size: 1.25rem;
    font-weight: 500;
    line-height: 1.5;
    margin: 0;
    text-shadow: none;
}

.desktop-br {
    display: none;
}

@media (min-width: 1024px) {
    .desktop-br {
        display: unset;
    }
}

@media (min-width: 768px) {

    .glass-text-box {
        max-width: 42rem;
        /* Restricted width for 3 lines of text */
        padding: 0 3rem;
        /* Removed top/bottom padding to fix alignment */
    }

    .overlay-text {
        font-size: 1.5rem;
    }
}

.about-content-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 1.5rem;
    width: 100%;
    margin-top: 0;
}

.about-stats-grid {
    display: none;
    /* Hidden on mobile */
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
    max-width: 1200px;
    padding: 0 1rem;
    pointer-events: auto;
}

/* Specific adjustments for Achievement Cards inside About section */
.about-stats-grid .achievement-card {
    /* Mobile: 2 col layout (2+2+1) */
    flex: 1 1 calc(50% - 0.5rem);
    min-width: 0;
    /* Allow shrinking */
    padding: 0.5rem 0.5rem;
    background: rgba(255, 255, 255, 0.85);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    text-align: left;
    gap: 0.5rem;

    /* Shadows from main achievement cards */
    border: 1px solid rgba(92, 70, 58, 0.3);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    transition: all 0.4s ease;
    cursor: pointer;
}

.about-stats-grid .achievement-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.2), 0 10px 20px -10px rgba(0, 0, 0, 0.15);
    border-color: rgba(92, 70, 58, 0.5);
    z-index: 5;
}

.about-stats-grid .achievement-card:not(.accent):hover {
    background: rgba(255, 255, 255, 0.95);
}

.about-stats-grid .achievement-card:last-child {
    flex-basis: 100%;
    /* 1 wide on last row */
    justify-content: center;
}

.about-stats-grid .achievement-card .achievement-value {
    margin-bottom: 0;
    font-size: 1.75rem;
    /* Smaller for mobile */
    flex-shrink: 0;
    font-weight: 700;
}

.about-stats-grid .achievement-card .achievement-label {
    font-size: 0.75rem;
    line-height: 1.1;
}

.about-stats-grid .achievement-card.accent {
    background: linear-gradient(135deg, hsl(20, 100%, 50%) 0%, hsl(28, 100%, 45%) 100%);
}

@media (min-width: 1024px) {
    .about-stats-grid {
        display: flex;
        flex-wrap: nowrap;
        /* Single row on PC */
        gap: 1rem;
    }

    .about-stats-grid .achievement-card {
        flex: 1 1 auto;
        padding: 0.75rem 1rem;
        gap: 1rem;
        justify-content: flex-start;
    }

    .about-stats-grid .achievement-card:last-child {
        flex-basis: auto;
        justify-content: flex-start;
    }

    .about-stats-grid .achievement-card .achievement-value {
        font-size: 2.5rem;
    }

    .about-stats-grid .achievement-card .achievement-label {
        font-size: 0.9rem;
    }
}

/* Section Header with Badge */
.section-header {
    text-align: center;
    margin-bottom: 3rem;
}

.section-badge {
    display: inline-block;
    padding: 12px 32px;
    background: rgba(255, 85, 0, 0.08);
    border: 1px solid rgba(255, 85, 0, 0.2);
    border-radius: 50px;
    color: var(--furniture-accent);
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
}

@media (min-width: 768px) {
    .section-badge {
        font-size: 1.1rem;
        padding: 14px 40px;
    }
}

@media (min-width: 1024px) {
    .section-badge {
        font-size: 1.2rem;
        padding: 16px 48px;
    }
}

/* Founder Name Styles matching section-badge but smaller */
.founder-name {
    display: inline-block;
    padding: 8px 24px;
    background: rgba(255, 85, 0, 0.08);
    border: 1px solid rgba(255, 85, 0, 0.2);
    border-radius: 50px;
    color: var(--furniture-accent);
    font-size: 1.3rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    margin-bottom: 1rem;
    text-transform: none;
    /* Keep names case-sensitive */
}

.speakers-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    max-width: 96rem;
    margin: 0 auto;
}

@media (min-width: 1024px) {
    .speakers-grid {
        grid-template-columns: 1fr 1fr;
        gap: 4rem;
    }
}

.founder-card {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.founder-photo {
    position: relative;
    width: 20rem;
    max-width: 80vw;
    /* Prevent overflow on small screens */
    aspect-ratio: 1 / 1;
    margin: 0 auto 1.5rem auto;
}

/* Ensure the image inside is always square and fills the container */
/* Ensure the image inside is always square and fills the container */
.founder-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    /* Stronger, deeper shadow for depth */
    box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.3),
        0 10px 20px -10px rgba(0, 0, 0, 0.2);
    display: block;
    position: relative;
    z-index: 1;
    border: 2px solid rgba(92, 70, 58, 0.15);
    /* Light brown framing */
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.founder-photo:hover .founder-image {
    transform: translateY(-5px);
    box-shadow: 0 30px 60px -12px rgba(0, 0, 0, 0.4),
        0 15px 30px -12px rgba(0, 0, 0, 0.3);
    border-color: rgba(92, 70, 58, 0.3);
}

.founder-social {
    position: absolute;
    inset: 0;
    /* Cover the whole photo container */
    pointer-events: none;
    /* Let clicks pass through empty areas */
    z-index: 10;
}

.founder-social-link {
    position: absolute;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    text-decoration: none;
    pointer-events: auto;
    /* Re-enable clicks on icons */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    /* Center the anchor point of the icon */
    transform: translate(-50%, 50%);
    transition: transform 0.3s ease;
}

/* Lift icons when photo is hovered */
.founder-photo:hover .founder-social-link {
    transform: translate(-50%, calc(50% - 5px));
}

/* Position Instagram (Higher Left) */
.founder-social-link:nth-child(1) {
    left: 8.5%;
    bottom: 23%;
}

/* Position WhatsApp (Lower Right) */
.founder-social-link:nth-child(2) {
    left: 23%;
    bottom: 8.5%;
}

.founder-social-link svg {
    width: 24px;
    height: 24px;
    fill: currentColor;
}

.founder-social-link:hover {
    /* Lift AND Scale when hovering the icon specifically */
    transform: translate(-50%, calc(50% - 5px)) scale(1.1) !important;
}

/* Animations... */
.founder-social-link.instagram {
    background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
    animation: pulse-instagram 2s infinite;
}

.founder-social-link.whatsapp {
    background: #25D366;
    animation: pulse-whatsapp 2s infinite;
}

/* Sequential Pulse Delays */
.founder-card:nth-of-type(1) .founder-social-link:nth-child(1) {
    animation-delay: 0s;
}

.founder-card:nth-of-type(1) .founder-social-link:nth-child(2) {
    animation-delay: 0.5s;
}

.founder-card:nth-of-type(2) .founder-social-link:nth-child(1) {
    animation-delay: 1s;
}

.founder-card:nth-of-type(2) .founder-social-link:nth-child(2) {
    animation-delay: 1.5s;
}

@keyframes pulse-instagram {
    0% {
        box-shadow: 0 0 0 0 rgba(188, 24, 136, 0.4);
    }

    70% {
        box-shadow: 0 0 0 15px rgba(188, 24, 136, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(188, 24, 136, 0);
    }
}

@keyframes pulse-whatsapp {
    0% {
        box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.4);
    }

    70% {
        box-shadow: 0 0 0 15px rgba(37, 211, 102, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(37, 211, 102, 0);
    }
}

/* Founder Name removed from here as it is redefined above */

.founder-description {
    font-size: 1.15rem;
    /* Increased font size */
    color: black;
    margin-bottom: 0.5rem;
    line-height: 1.3;
    /* Adjusted line height */
    max-width: 400px;
    /* Slightly wider than photo (approx 16rem = 256px) */
    margin-left: auto;
    margin-right: auto;
    font-weight: 400;
}

.founder-credentials {
    font-size: 1.15rem;
    /* Increased font size */
    color: black;
    line-height: 1.3;
    /* Adjusted line height */
    font-weight: 400;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 0.5rem;
}



/* Main heading styling */




/* Unified Section Padding */
.speakers-section,
.why-us-section,
.students-section,
.program-section,
.results-section,
.prices-section,
.section {
    padding: 50px 0;
    margin-top: 0;
}

@media (min-width: 1024px) {

    .speakers-section,
    .why-us-section,
    .students-section,
    .program-section,
    .results-section,
    .prices-section,
    .section {
        padding: 50px 0;
    }
}

.section-content {
    max-width: 64rem;
    margin: 0 auto;
    text-align: center;
}



.program-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
}



/* Results Section Spacing */


.results-section .section-text {
    margin-bottom: 2rem;
}

/* Results Tabs Container */
.results-tabs-container {
    border: 1px solid rgba(107, 74, 50, 0.2);
    border-radius: 0;
    background: white;
    margin: 2rem 0;
    overflow: hidden;
}

/* Results Content */
.results-content-wrapper {
    margin-top: 0;
    border: none;
    border-radius: 0;
    overflow: hidden;
    background: white;
    position: relative;
}

.results-content-track {
    display: flex;
    width: 300%;
    /* 3 tabs = 300% */
    height: 100%;
    transition: transform 0.4s ease-in-out;
    transform: translateX(0%);
}

.results-content {
    flex: 0 0 33.333333%;
    /* Each tab takes 1/3 of track width */
    width: 33.333333%;
    height: 100%;
    position: relative;
    padding: 0;
}



/* Photo Slider */
.photo-slider {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
    background: white;
}

.photo-slider-container {
    width: 100%;
    height: 600px;
    position: relative;
}

.photo-slides-track {
    display: flex;
    width: 100%;
    height: auto;
    transition: transform 0.5s ease-in-out;
}

.photo-slide {
    flex: 0 0 100%;
    width: 100%;
    height: 600px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.photo-slide img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}

/* Slider Navigation Buttons */
.photo-slider-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    color: var(--furniture-primary);
    border: none;
    width: 50px;
    height: 50px;
    font-size: 2.5rem;
    font-weight: bold;
    cursor: pointer;
    z-index: 10;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.photo-slider-btn:hover {
    color: rgba(107, 74, 50, 0.8);
    transform: translateY(-50%) scale(1.2);
}

.photo-prev {
    left: 20px;
}

.photo-next {
    right: 20px;
}

@media (max-width: 767px) {
    .photo-slider-container {
        height: 300px;
    }

    .photo-slide {
        height: 300px;
    }

    .photo-slider-btn {
        width: 40px;
        height: 40px;
        font-size: 1.2rem;
    }

    .photo-prev {
        left: 10px;
    }

    .photo-next {
        right: 10px;
    }
}

/* Slider Dots */
.photo-slider-dots {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;
    z-index: 10;
}

.photo-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(107, 74, 50, 0.3);
    cursor: pointer;
    transition: all 0.3s ease;
}

.photo-dot:hover,
.photo-dot.active {
    background: var(--furniture-primary);
    transform: scale(1.2);
}




/* Mobile responsiveness for slider */
@media (max-width: 767px) {
    .students-slider-container {
        padding: 0;
        margin: 0;
        max-width: none;
    }

    .student-slide {
        padding: 0;
    }

    .student-photo {
        margin: 0;
        padding: 0;
        height: 230px;
        min-height: 230px;
    }

    .student-image {
        border-radius: 0;
        min-height: 230px;
    }

    .student-content {
        padding: 1rem;
        min-height: auto;
    }

    .student-quote::before {
        left: 35px;
        top: -11px;
        border-left: 12px solid transparent;
        border-right: 12px solid transparent;
        border-bottom: 12px solid var(--furniture-primary);
        border-top: none;
    }

    .student-quote {
        padding: 1rem;
    }

    .slider-navigation {
        gap: 0.5rem;
        margin-top: 1rem;
    }

    .slider-btn {
        width: 2.5rem;
        height: 2.5rem;
        font-size: 1.25rem;
    }

    .slider-dots {
        margin: 0 0.5rem;
    }

    .dot {
        width: 10px;
        height: 10px;
    }
}




/* Students Slider Section - REMOVED */

/* Slider Navigation Styles - REMOVED */

/* Scroll margin for anchor links */
section[id],
[id="about"],
[id="speakers"],
[id="why-us"],
[id="students"],
[id="program"],
[id="results"],
[id="prices"] {
    scroll-margin-top: 90px;
}

/* Responsive adjustments */
@media (max-width: 767px) {
    .container {
        padding: 0 1rem;
    }

    .hero-content {
        padding: 0 1rem 150px;
    }

    .about-section,
    .speakers-section,
    .section {
        padding: 80px 1rem;
    }

    /* Override for program and students section to match slider padding */
    .program-section,
    .students-section,
    .video-lessons-section {
        padding: 80px 0;
    }

    .program-section .container {
        padding: 0;
    }
}

/* Additional mobile program section adjustments to match slider */
@media (max-width: 1023px) {
    .program-section .container {
        padding: 0 1rem;
    }
}

/* Program Section Styles */
/* Program Section Styles */
.program-section .container,
.students-section .container,
.video-lessons-section .container {
    padding: 0 !important;
    /* Allow edge-to-edge feel */
    max-width: 100%;
    margin: 0;
}

.program-slider-container,
.students-slider-container-full {
    padding: 0 0 2rem 0;
    position: relative;
    width: 100%;
    /* Spans full width */
    overflow: hidden;
    /* Prevent container-level scroll if any */
}

.program-slider {
    display: flex;
    gap: 24px;
    overflow-x: auto;
    padding: 30px 1rem 60px 1rem;
    /* Synchronized with container's 1rem mobile padding */
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* Hide scrollbar Firefox */
    cursor: grab;
}

.students-section .program-slider {
    padding-top: 20px;
}

.program-slider.grabbing {
    cursor: grabbing;
    scroll-snap-type: none;
    /* Secondary fallback via CSS */
    user-select: none;
}

/* New header row for Program Section */
.program-title-row {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 0;
    padding: 0 1rem;
    position: relative;
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
}

.program-title-row .section-header {
    margin-bottom: 4.5rem;
    width: 100%;
    text-align: center;
}

.students-section .program-title-row .section-header,
.video-lessons-section .program-title-row .section-header,
.program-section .program-title-row .section-header {
    margin-bottom: 1.5rem;
}

/* Slider Navigation Arrows - Below header, aligned right */
.program-slider-nav {
    display: flex;
    gap: 16px;
    margin: 0;
    padding: 0;
    align-self: flex-end;
    flex-shrink: 0;
}

.students-navigation-row {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    width: 100%;
    margin-top: 1.5rem;
    margin-bottom: 0;
    gap: 20px;
}

.students-navigation-row .glass-text-box {
    grid-column: 2;
    text-align: center;
    margin: 0;
    max-width: 600px;
}

.students-slider-nav,
.students-navigation-row .program-slider-nav {
    grid-column: 3;
    display: flex;
    justify-content: flex-end;
    gap: 16px;
    margin: 0;
    padding: 0;
    flex-shrink: 0;
}

@media (max-width: 1023px) {
    .students-navigation-row {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        margin-bottom: 1rem;
        gap: 1.5rem;
    }

    .students-navigation-row .glass-text-box {
        max-width: 100%;
        padding: 0 1rem;
    }

    .students-slider-nav {
        align-self: center;
    }
}

@media (max-width: 767px) {

    .program-slider-nav,
    .students-slider-nav {
        align-self: center;
    }

    .program-title-row .section-header {
        margin-bottom: 2.5rem;
        /* Немного меньше отступ на мобильных */
    }

    .students-section .program-title-row .section-header {
        margin-bottom: 1rem;
    }
}

.program-slider::-webkit-scrollbar {
    display: none;
    /* Hide scrollbar Chrome/Safari */
}

.program-slide {
    flex: 0 0 320px;
    /* Fixed width cards */
    min-height: 420px;
    background: #ffffff;
    border-radius: 24px;
    position: relative;
    border: 1px solid rgba(92, 70, 58, 0.3);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
    transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94),
        box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.students-section .program-slide {
    flex: 0 0 337px;
    height: 600px;
}

@media (max-width: 480px) {
    #studentsSlider {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .students-section .program-slide {
        flex: 0 0 281px;
        height: 500px;
    }
}

.program-slide:hover {
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
    z-index: 10;
}

/* Card Content */
.slide-content {
    padding: 32px;
    flex: 1;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.slide-header {
    margin-bottom: 24px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.week-label,
.lesson-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 16px;
    border-radius: 50px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    line-height: 1;
}

.week-label {
    background: rgba(255, 85, 0, 0.08);
    border: 1px solid rgba(255, 85, 0, 0.2);
    color: var(--furniture-accent);
}

.lesson-badge {
    background: hsla(28, 42%, 32%, 0.1);
    border: 1px solid hsla(28, 42%, 32%, 0.2);
    color: var(--furniture-primary);
    align-self: center;
}

.lesson-description {
    font-size: 1.05rem;
    color: #494949;
    margin-top: 12px;
    line-height: 1.2;
    font-weight: 500;
}

.slide-title {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--furniture-primary);
    line-height: 1.1;
    margin: 16px 0 0 0;
    width: 100%;
}

.slide-description {
    font-size: 1.1rem;
    line-height: 1.2;
    color: #494949;
    margin-bottom: 0;
}

/* Video Lessons Card Overrides */
.video-lessons-section .program-slide {
    flex: 0 0 280px;
    min-height: 0;
    height: auto;
}

.video-lessons-section .slide-content {
    padding: 24px;
}

.video-lessons-section .slide-header {
    margin-bottom: 16px;
}

.video-lessons-section .slide-title {
    font-size: 1.25rem;
    margin: 8px 0 0 0;
}

.video-lessons-section .slide-description {
    font-size: 1rem;
}

/* GetCourse brand styling */
.getcourse-brand {
    color: #ff6b35;
    font-weight: 700;
}

.video-cta-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: -15px;
    width: 100%;
    gap: 25px;
}

.video-cta-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--furniture-primary);
    text-align: center;
    margin-bottom: 5px;
}

.video-cta-buttons {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 30px;
    width: 100%;
    max-width: 1200px;
    padding-bottom: 20px;
}

.video-card-btn {
    position: relative;
    flex: 1 1 350px;
    max-width: 400px;
    height: 180px;
    border-radius: 24px;
    overflow: hidden;
    cursor: pointer;
    border: none;
    padding: 0;
    background-size: cover;
    background-position: center;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
    -webkit-tap-highlight-color: transparent;
}

.video-card-btn:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
}

.video-card-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom,
            rgba(0, 0, 0, 0.7) 0%,
            rgba(0, 0, 0, 0.2) 30%,
            rgba(0, 0, 0, 0.2) 70%,
            rgba(0, 0, 0, 0.7) 100%);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    padding: 24px;
    transition: background 0.3s ease;
}

.video-card-btn:hover .video-card-overlay {
    background: linear-gradient(to bottom,
            rgba(0, 0, 0, 0.8) 0%,
            rgba(0, 0, 0, 0.3) 30%,
            rgba(0, 0, 0, 0.3) 70%,
            rgba(0, 0, 0, 0.8) 100%);
}

.video-card-play-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 64px;
    height: 64px;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    transition: all 0.3s ease;
    z-index: 2;
}

.video-card-btn:hover .video-card-play-center {
    background: var(--furniture-accent);
    border-color: var(--furniture-accent);
    transform: translate(-50%, -50%);
    box-shadow: 0 0 20px rgba(255, 85, 0, 0.4);
}

.video-card-play-center svg {
    width: 24px;
    height: 24px;
    fill: currentColor;
    margin-left: 2px;
}

.video-card-content {
    width: 100%;
    z-index: 2;
}

.video-card-title {
    font-size: 0.9rem;
    font-weight: 700;
    color: white;
    margin-bottom: 4px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.video-card-title svg {
    width: 20px;
    height: 20px;
}

.video-card-subtitle {
    font-size: 1.2rem;
    color: white;
    font-weight: 700;
}

@media (max-width: 768px) {
    .video-card-btn {
        flex: 1 1 100%;
        max-width: 100%;
        height: 160px;
    }

    .video-cta-buttons {
        padding: 0 20px;
        gap: 20px;
    }

    .video-card-title {
        font-size: 1.15rem;
    }
}

/* Video Modal Styles */
.video-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10000;
    display: none;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.video-modal.active {
    display: flex;
    opacity: 1;
}

.video-modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
    backdrop-filter: blur(10px);
}

.video-modal-content {
    position: relative;
    width: 90%;
    max-width: 1100px;
    z-index: 10001;
    transform: scale(0.9);
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.video-modal.active .video-modal-content {
    transform: scale(1);
}

.video-modal-close {
    position: absolute;
    top: -50px;
    right: 0;
    background: none;
    border: none;
    color: white;
    font-size: 3rem;
    cursor: pointer;
    line-height: 1;
    transition: transform 0.3s ease;
}

.video-modal-close:hover {
    transform: rotate(90deg);
    color: var(--furniture-accent);
}

.video-responsive-container {
    position: relative;
    padding-bottom: 56.25%;
    /* 16:9 aspect ratio */
    height: 0;
    overflow: hidden;
    border-radius: 16px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}

.video-responsive-container iframe,
.video-responsive-container div#youtubePlayer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}

@media (max-width: 768px) {
    .sketchup-review-btn {
        width: 100%;
        max-width: 320px;
        padding: 16px 24px;
        font-size: 1rem;
        justify-content: center;
    }
}

/* Video Review Card Styles */
.video-review-card .slide-content {
    padding: 0;
    position: relative;
    overflow: hidden;
}

.video-review-card .slide-header {
    position: absolute;
    top: 20px;
    left: 20px;
    z-index: 10;
    margin-bottom: 0;
}

.student-name-label {
    background: rgba(255, 255, 255, 0.45);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    padding: 6px 16px;
    border-radius: 50px;
    border: 1px solid rgba(92, 70, 58, 0.4);
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--furniture-primary);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.2),
        inset 0 1px 0 0 rgba(255, 255, 255, 0.2);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.student-group-label {
    background: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 6px 14px;
    border-radius: 50px;
    border: 1px solid rgba(255, 85, 0, 0.2);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--furniture-accent);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.student-instagram-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 50%;
    border: 1px solid rgba(255, 85, 0, 0.3);
    color: var(--furniture-accent);
    transition: all 0.3s ease;
    text-decoration: none;
}

.student-instagram-link:hover {
    background: rgba(255, 85, 0, 0.2);
    transform: scale(1.1);
    color: var(--furniture-accent);
    border-color: var(--furniture-accent);
}

.student-instagram-link svg {
    width: 16px;
    height: 16px;
}

.video-container {
    width: 100%;
    height: 100%;
    position: relative;
    background: #000;
    cursor: pointer;
}

.student-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    z-index: 5;
}

.video-review-card:hover .video-overlay {
    background: rgba(0, 0, 0, 0.1);
}

.play-button {
    width: 70px;
    height: 70px;
    background: rgba(255, 255, 255, 0.45);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--furniture-primary);
    border: 1px solid rgba(92, 70, 58, 0.4);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.2),
        inset 0 1px 0 0 rgba(255, 255, 255, 0.2);
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.play-button svg {
    width: 30px;
    height: 30px;
    margin-left: 4px;
}

.video-review-card:hover .play-button {
    transform: scale(1.1);
    background: rgba(255, 255, 255, 0.6);
    border-color: rgba(92, 70, 58, 0.6);
}

.video-review-card.playing .video-overlay {
    opacity: 0;
    pointer-events: none;
}

.video-review-card.playing .student-name-label {
    opacity: 0.5;
    transition: opacity 0.3s ease;
}

.video-review-card.playing:hover .student-name-label {
    opacity: 1;
}





.slider-arrow {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: hsla(28, 42%, 32%, 0.1);
    border: 1px solid hsla(28, 42%, 32%, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--furniture-primary);
    transition: all 0.2s ease;
}

.slider-arrow:hover {
    background: hsla(28, 42%, 32%, 0.2);
    border-color: hsla(28, 42%, 32%, 0.4);
    transform: translateY(-2px);
}

.slider-arrow svg {
    width: 24px;
    height: 24px;
}


/* Responsive Adjustments */
@media (min-width: 768px) {
    .program-slide {
        flex: 0 0 360px;
        /* Wider cards on desktop */
    }

    .program-slider {
        /* Desktop alignment: Cards match 1400px container bounds */
        padding-left: calc((100vw - 1400px) / 2 + 2rem);
        padding-right: calc((100vw - 1400px) / 2 + 2rem);
    }

    /* If screen < 1464px, use 2rem alignment to match .container */
    @media (max-width: 1464px) {
        .program-slider {
            padding-left: 2rem;
            padding-right: 2rem;
        }
    }
}

@media (max-width: 767px) {
    .program-slider {
        padding: 30px 2rem 60px;
        /* Adjusted for alignment and shadow visibility */
        gap: 16px;
    }

    .program-slide {
        flex: 0 0 85vw;
        /* Almost full width mobile */
        min-height: 380px;
    }

    .slide-title {
        font-size: 1.5rem;
    }
}

/* Pricing Section */


.prices-header-container {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 3rem;
    min-height: 100px;
}

.prices-header-text {
    text-align: center;
}



.prices-subtitle {
    text-align: center;
    font-size: 1.125rem;
    color: var(--furniture-secondary);
    margin: 0;
    font-weight: 400;
}

.prices-header-image {
    position: absolute;
    right: 10%;
    top: 50%;
    transform: translateY(-50%);
}

.installment-image {
    max-width: 150px;
    height: auto;
    border-radius: 36px;
}

@media (max-width: 768px) {
    .prices-header-container {
        flex-direction: column;
        text-align: center;
        gap: 1.5rem;
        position: static;
    }



    .prices-subtitle {
        text-align: center;
    }

    .prices-header-image {
        position: static;
        transform: none;
        order: 1;
    }

    .prices-header-text {
        order: 0;
    }

    .installment-image {
        max-width: 125px;
    }
}

.pricing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 0.5rem;
    max-width: 1200px;
    margin: 0 auto;
}

@media (min-width: 768px) {
    .pricing-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .pricing-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

.pricing-card {
    background: white;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    padding: 1.5rem;
    position: relative;
    transition: all 0.3s ease;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    min-height: 600px;
}

.pricing-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 25px -3px rgba(0, 0, 0, 0.1);
}

.pricing-card.popular {
    border: 2px solid var(--furniture-accent);
    background: linear-gradient(145deg, #f0fdf4 0%, #ffffff 100%);
}

.popular-badge {
    position: absolute;
    top: -10px;
    right: 1rem;
    background: var(--furniture-accent);
    color: white;
    padding: 0.25rem 0.75rem;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.pricing-header {
    text-align: center;
    margin-bottom: 1.5rem;
}

.plan-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--furniture-primary);
    margin: 0 0 0.125rem 0;
}

.plan-type {
    color: var(--furniture-accent);
}

.plan-subtitle {
    font-size: 0.875rem;
    color: var(--furniture-secondary);
    margin: 0;
    font-weight: 400;
}

.pricing-features {
    flex-grow: 1;
    margin-bottom: 0.5rem;
}

.pricing-features .feature-item {
    display: flex;
    align-items: flex-start;
    margin-bottom: 0.25rem;
    font-size: 0.875rem;
    line-height: 1.4;
}

.feature-icon {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    margin-right: 0.75rem;
    margin-top: 0.1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
}

.feature-item.included .feature-icon {
    color: #16a34a;
}

.feature-item.excluded .feature-icon {
    color: #9ca3af;
}

.feature-item.included .feature-text {
    color: var(--furniture-primary);
}

.feature-item.excluded .feature-text {
    color: var(--furniture-secondary);
    opacity: 0.7;
}

.pricing-features .feature-text {
    flex: 1;
    font-size: 0.875rem !important;
    line-height: 1.4;
}

.pricing-access {
    text-align: center;
    margin: 0.5rem 0;
    padding: 0.5rem;
    background: #f8f9fa;
    border-radius: 8px;
}

.access-text {
    margin: 0;
    font-size: 0.875rem;
    color: var(--furniture-secondary);
    line-height: 1.4;
}

.access-text strong {
    color: var(--furniture-primary);
    font-weight: 600;
    font-size: 1rem;
}

.pricing-footer {
    text-align: center;
    margin-top: auto;
}

.price-block {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.current-price {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--furniture-accent);
    margin-bottom: 0.25rem;
}

.old-price {
    font-size: 1rem;
    color: var(--furniture-secondary);
    text-decoration: line-through;
    opacity: 0.7;
    font-weight: 700;
}

.countdown-timer {
    margin-top: 0;
    margin-bottom: 0.25rem;
    text-align: center;
}

.timer-label {
    font-size: 0.75rem;
    color: var(--furniture-secondary);
    margin-bottom: 0.25rem;
    text-align: center;
}

.countdown-display {
    font-family: 'Courier New', monospace;
    font-size: 1rem;
    font-weight: 700;
    color: var(--furniture-accent);
    background: rgba(255, 85, 0, 0.1);
    padding: 0.5rem;
    border-radius: 6px;
    border: 1px solid rgba(255, 85, 0, 0.2);
}

.pricing-button {
    width: 100%;
    margin-top: 0.75rem;
    background-color: var(--furniture-accent);
    color: white;
    font-weight: 600;
    font-size: 1rem;
    padding: 0.75rem 1.5rem;
    border: 2px solid var(--furniture-accent);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.pricing-button:hover {
    background-color: var(--furniture-accent-hover);
    border-color: var(--furniture-accent-hover);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(255, 85, 0, 0.3);
}

/* Mobile optimizations for pricing */
@media (max-width: 768px) {
    .pricing-grid {
        grid-template-columns: 1fr;
        gap: 0.5rem;
    }

    .pricing-card {
        padding: 1.25rem;
        min-height: auto;
    }

    .plan-title {
        font-size: 1.125rem;
    }

    .current-price {
        font-size: 1.5rem;
    }

    .pricing-features .feature-item {
        font-size: 0.875rem;
        justify-content: flex-start;
    }

    .pricing-features .feature-text {
        text-align: left;
        flex: 1;
        font-size: 0.875rem !important;
    }

    .popular-badge {
        font-size: 0.625rem;
        padding: 0.25rem 0.5rem;
    }

    .countdown-timer {
        margin-top: 0.5rem;
    }

    .countdown-text {
        font-size: 1rem;
    }

    .countdown-display {
        font-size: 0.875rem;
        padding: 0.375rem;
    }

    .pricing-button {
        font-size: 0.875rem;
        padding: 0.625rem 1.25rem;
        margin-top: 0.5rem;
    }
}

/* Footer Section */
.footer-section {
    background: linear-gradient(135deg, #5c463a 0%, #4a3b30 100%);
    color: white;
    padding: 60px 0 40px 0;
}

.footer-content {
    display: flex;
    gap: 4rem;
    align-items: flex-start;
    max-width: 1200px;
    margin: 0 auto;
}

.footer-form {
    flex: 1;
    max-width: 400px;
}

.footer-form-title {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
    color: white;
}



.footer-info {
    flex: 1;
    display: flex;
    justify-content: flex-end;
}

.footer-contact {
    text-align: right;
}

.footer-company {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 1rem;
    color: white;
}

.footer-address {
    font-size: 1rem;
    margin-bottom: 0.5rem;
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.5;
}

.footer-phone {
    font-size: 1.125rem;
    font-weight: 600;
    color: white;
    margin: 0.125rem 0;
}

/* Kommo form integration styles */
#amoforms_1549176 {
    margin-top: 1rem;
}

#amoforms_1549176 form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

#amoforms_1549176 input {
    padding: 0.75rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.1);
    color: white;
    font-size: 1rem;
}

#amoforms_1549176 input::placeholder {
    color: rgba(255, 255, 255, 0.7);
}

#amoforms_1549176 select {
    padding: 0.75rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.1);
    color: white;
    font-size: 1rem;
}

#amoforms_1549176 button {
    background: var(--furniture-accent);
    color: white;
    border: none;
    padding: 0.875rem 2rem;
    border-radius: 25px;
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

#amoforms_1549176 button:hover {
    background: var(--furniture-accent-dark);
    transform: translateY(-2px);
}

/* Footer social icons */
.footer-social {
    display: flex;
    gap: 1rem;
    margin-top: 1rem;
    justify-content: flex-end;
}

.social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    transition: all 0.3s ease;
    text-decoration: none;
}

.social-link.whatsapp {
    background: #25D366;
    color: white;
}

.social-link.whatsapp:hover {
    background: #1db954;
    transform: scale(1.1);
}

.social-link.instagram {
    background: transparent;
    padding: 0;
    border-radius: 50%;
    overflow: hidden;
}

.social-link.instagram:hover {
    transform: scale(1.1);
}

.social-link.instagram img {
    width: 48px;
    height: 48px;
    border-radius: 50%;
}

@media (max-width: 768px) {
    .footer-content {
        flex-direction: column;
        gap: 2rem;
        text-align: center;
        align-items: center;
    }

    .footer-form {
        max-width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .footer-info {
        justify-content: center;
        align-items: center;
    }

    .footer-contact {
        text-align: center;
    }

    .footer-form-title {
        font-size: 1.25rem;
        text-align: center;
    }

    .footer-company {
        font-size: 1.125rem;
    }

    .footer-social {
        justify-content: center;
        margin-top: 1.5rem;
    }

    .footer-section {
        padding-bottom: 3rem;
    }
}

/* Pricing Modal Styles */
.pricing-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 99999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.pricing-modal.active {
    display: flex;
}

.modal-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(5px);
}

.modal-container {
    position: relative;
    background: white;
    border-radius: 20px;
    max-width: 700px;
    width: 100%;
    max-height: 90vh;
    overflow: hidden;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    animation: modalSlideIn 0.3s ease-out;
}

@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: translateY(-50px) scale(0.95);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Modal Header */
.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 30px;
    border-bottom: 1px solid #e2e8f0;
    background: #f8fafc;
}

.modal-tabs {
    display: flex;
    gap: 8px;
}

.modal-tab {
    padding: 12px 20px;
    border: none;
    background: transparent;
    color: var(--furniture-secondary);
    font-size: 0.875rem;
    font-weight: 600;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    white-space: nowrap;
}

.modal-tab:hover {
    background: rgba(var(--furniture-accent-rgb), 0.1);
    color: var(--furniture-accent);
}

.modal-tab.active {
    background: var(--furniture-accent);
    color: white;
}

.modal-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: none;
    background: transparent;
    color: var(--furniture-secondary);
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s ease;
}

.modal-close:hover {
    background: rgba(0, 0, 0, 0.1);
    color: var(--furniture-primary);
}

/* Modal Content */
.modal-content {
    display: flex;
    padding: 30px;
    gap: 40px;
    overflow-y: auto;
    max-height: calc(90vh - 160px);
}

.plan-details {
    flex: 1;
    position: relative;
}

.plan-content {
    display: none;
}

.plan-content.active {
    display: block;
    animation: fadeIn 0.3s ease-in;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateX(-10px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.modal-plan-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--furniture-primary);
    margin: 0 0 8px 0;
    text-align: left;
}

.popular-text {
    background: var(--furniture-accent);
    color: white;
    padding: 4px 8px;
    border-radius: 8px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-left: 10px;
}

.modal-plan-subtitle {
    font-size: 1rem;
    color: var(--furniture-secondary);
    margin: 0 0 20px 0;
    text-align: left;
}

.modal-price-block {
    margin-bottom: 20px;
    padding: 15px 0;
}

.modal-current-price {
    display: block;
    font-size: 2rem;
    font-weight: 700;
    color: var(--furniture-accent);
    margin-bottom: 5px;
}

.modal-old-price {
    font-size: 1rem;
    color: var(--furniture-secondary);
    text-decoration: line-through;
}

.modal-features {
    margin-bottom: 20px;
}

.modal-features .feature-item {
    display: flex;
    align-items: flex-start;
    margin-bottom: 12px;
    font-size: 0.875rem;
    line-height: 1.4;
}

.modal-access {
    padding: 15px 0;
}

.modal-access p {
    margin: 0;
    font-size: 1rem;
    color: var(--furniture-secondary);
}

.modal-access strong {
    color: var(--furniture-primary);
    font-weight: 600;
}

/* Form Section */
.form-section {
    flex: 0 0 350px;
    background: #f8fafc;
    border-radius: 16px;
    padding: 25px;
    height: fit-content;
}

.form-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--furniture-primary);
    margin: 0 0 20px 0;
    text-align: center;
}

/* Modal Kommo Form Styles */
#amoforms_1549184 {
    width: 100%;
}

#amoforms_1549184 form {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

#amoforms_1549184 input,
#amoforms_1549184 select,
#amoforms_1549184 textarea {
    width: 100%;
    padding: 12px 15px;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    background: white;
    color: var(--furniture-primary);
    font-size: 0.875rem;
    transition: all 0.3s ease;
    box-sizing: border-box;
}

#amoforms_1549184 input:focus,
#amoforms_1549184 select:focus,
#amoforms_1549184 textarea:focus {
    outline: none;
    border-color: var(--furniture-accent);
    box-shadow: 0 0 0 3px rgba(var(--furniture-accent-rgb), 0.1);
}

#amoforms_1549184 input::placeholder,
#amoforms_1549184 textarea::placeholder {
    color: #9ca3af;
}

#amoforms_1549184 button {
    background: var(--furniture-accent);
    color: white;
    border: none;
    padding: 15px 30px;
    border-radius: 25px;
    font-weight: 600;
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.3s ease;
    width: 100%;
    margin-top: 10px;
}

#amoforms_1549184 button:hover {
    background: var(--furniture-accent-dark);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(var(--furniture-accent-rgb), 0.3);
}

/* Modal Form Styles - Desktop */
@media (min-width: 769px) {
    .plan-content.active {
        display: flex;
        gap: 30px;
        align-items: flex-start;
    }

    /* Vertical layout on desktop - prices below plan name */
    .plan-content.active .modal-plan-info {
        display: flex;
        flex-direction: column;
        gap: 15px;
    }

    .plan-content.active .modal-plan-titles {
        text-align: left;
    }

    .plan-content.active .modal-plan-title {
        font-size: 2rem;
        font-weight: 700;
        margin: 0 0 8px 0;
        color: var(--furniture-primary);
    }

    .plan-content.active .modal-plan-subtitle {
        font-size: 1.25rem;
        margin: 0 0 15px 0;
        color: #64748b;
    }

    .plan-content.active .modal-price-block {
        text-align: left;
        margin: 0;
        padding: 0;
    }

    .plan-content.active .modal-current-price {
        display: block;
        font-size: 2.5rem;
        font-weight: 700;
        margin: 0 0 8px 0;
        color: var(--furniture-accent);
    }

    .plan-content.active .modal-old-price {
        display: block;
        font-size: 1.125rem;
        margin: 0;
        color: #94a3b8;
        text-decoration: line-through;
    }
}

/* Mobile modal layout */
@media (max-width: 768px) {

    /* Hide all plan content by default */
    .plan-content {
        display: none !important;
    }

    /* Show only active plan content */
    .plan-content.active {
        display: block !important;
    }

    /* Two-column layout for plan info */
    .plan-content.active .modal-plan-info {
        display: flex !important;
        justify-content: space-between !important;
        align-items: flex-start !important;
        gap: 15px !important;
        margin-bottom: 20px !important;
    }

    /* Left column - plan titles */
    .plan-content.active .modal-plan-titles {
        flex: 1 !important;
        text-align: left !important;
    }

    .plan-content.active .modal-plan-titles h3.modal-plan-title,
    .plan-content.active .modal-plan-titles .modal-plan-title {
        text-align: left !important;
        margin: 0 0 8px 0 !important;
        font-size: 1.2rem !important;
        font-weight: 700 !important;
    }

    .plan-content.active .modal-plan-titles p,
    .plan-content.active .modal-plan-titles .modal-plan-subtitle {
        text-align: left !important;
        margin: 0 !important;
        font-size: 1.125rem !important;
        color: #64748b !important;
    }

    /* Right column - pricing */
    .plan-content.active .modal-price-block {
        text-align: right !important;
        margin: 0 !important;
        padding: 0 !important;
        flex-shrink: 0 !important;
    }

    .plan-content.active .modal-price-block .modal-current-price {
        display: block !important;
        text-align: right !important;
        font-size: 1.8rem !important;
        font-weight: 700 !important;
        margin: 0 0 5px 0 !important;
        color: var(--furniture-accent) !important;
    }

    .plan-content.active .modal-price-block .modal-old-price {
        display: block !important;
        text-align: right !important;
        font-size: 1rem !important;
        margin: 0 !important;
        color: #94a3b8 !important;
        text-decoration: line-through !important;
    }
}


.modal-plan-info {
    flex: 1;
    min-width: 0;
}

.modal-form-container {
    flex: 0 0 280px;
    background: #f8f9fa;
    border-radius: 12px;
    padding: 20px;
    border: 1px solid #e5e7eb;
}

.form-title {
    margin: 0 0 20px 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--furniture-primary);
    text-align: center;
}

.form-group {
    margin-bottom: 15px;
}

.form-group input {
    width: 100%;
    padding: 12px 16px;
    border: 2px solid #e5e7eb;
    border-radius: 8px;
    font-size: 0.95rem;
    transition: all 0.3s ease;
    background: white;
    box-sizing: border-box;
}

.form-group input:focus {
    outline: none;
    border-color: var(--furniture-accent);
    box-shadow: 0 0 0 3px rgba(255, 85, 0, 0.1);
}

.form-group input::placeholder {
    color: #9ca3af;
}

.form-submit-btn {
    width: 100%;
    background: var(--furniture-accent);
    color: white;
    border: none;
    padding: 12px 20px;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: 10px;
}

.form-submit-btn:hover {
    background: var(--furniture-accent-hover);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(255, 85, 0, 0.3);
}

.form-submit-btn:active {
    transform: translateY(0);
}


/* Modal Timer */
.modal-timer {
    background: var(--furniture-accent);
    color: white;
    padding: 20px 30px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
}

.timer-text {
    font-size: 1.5rem;
    font-weight: 600;
}

.modal-countdown-display {
    font-size: 1rem;
    font-weight: 700;
    background: rgba(255, 255, 255, 0.2);
    padding: 8px 16px;
    border-radius: 8px;
    min-width: 100px;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .pricing-modal {
        padding: 20px 10px;
        align-items: center;
        box-sizing: border-box;
    }

    .modal-container {
        max-height: calc(100vh - 40px);
        border-radius: 16px;
        margin: 0;
    }

    .modal-header {
        padding: 10px 15px;
        flex-direction: column;
        gap: 10px;
        align-items: stretch;
    }

    .modal-tabs {
        flex-wrap: wrap;
        justify-content: center;
        gap: 6px;
        margin-right: 50px;
    }

    .modal-tab {
        padding: 10px 16px;
        font-size: 0.75rem;
        flex: 1;
        min-width: 120px;
    }

    .modal-close {
        position: absolute;
        top: 15px;
        right: 15px;
        width: 32px;
        height: 32px;
    }

    .modal-content {
        flex-direction: column;
        padding: 15px;
        gap: 15px;
        max-height: calc(100vh - 340px);
    }

    .form-section {
        flex: none;
        width: 100%;
    }

    .modal-current-price {
        font-size: 1.75rem;
    }

    .modal-features {
        display: none;
    }


    .modal-timer {
        padding: 15px 20px;
        flex-direction: column;
        gap: 10px;
    }

    .timer-text {
        font-size: 0.875rem;
    }

    .modal-countdown-display {
        font-size: 0.875rem;
        padding: 6px 12px;
    }
}

@media (max-width: 480px) {
    .modal-tabs {
        gap: 4px;
    }

    .modal-tab {
        padding: 8px 12px;
        font-size: 0.7rem;
        flex: 1;
        min-width: 0;
        text-align: center;
        white-space: normal;
        line-height: 1.2;
    }

    .modal-content {
        padding: 10px;
    }

    .form-section {
        padding: 15px;
    }
}

/* Unified Floating Buttons */
.scroll-to-top-btn,
.whatsapp-btn,
.instagram-btn {
    position: fixed;
    right: 30px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    z-index: 99999;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    text-decoration: none;
    border: none;
}

/* Scroll to Top Specifics */
.scroll-to-top-btn {
    bottom: 30px;
    background: rgba(92, 70, 58, 0.65);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.4);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3),
        0 4px 12px 0 rgba(0, 0, 0, 0.2),
        inset 0 1px 0 0 rgba(255, 255, 255, 0.4);
    transform: translateY(20px);
}

.scroll-to-top-btn.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.scroll-to-top-btn:hover {
    background: rgba(92, 70, 58, 0.85);
    transform: translateY(0);
    box-shadow: 0 12px 40px 0 rgba(0, 0, 0, 0.4),
        0 6px 16px 0 rgba(0, 0, 0, 0.3),
        inset 0 1px 0 0 rgba(255, 255, 255, 0.5);
    border-color: rgba(255, 255, 255, 0.6);
}

/* Social Buttons Specifics */
.whatsapp-btn {
    bottom: 170px;
    background: #25D366;
    box-shadow: 0 4px 12px rgba(37, 211, 102, 0.3);
}

.instagram-btn {
    bottom: 100px;
    background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
    box-shadow: 0 4px 12px rgba(188, 24, 136, 0.3);
}

.whatsapp-btn.visible,
.instagram-btn.visible {
    opacity: 1;
    visibility: visible;
    animation: floatInstagram 3s ease-in-out infinite;
}

.whatsapp-btn.visible {
    animation-delay: 0.5s;
}

/* Hover States for Socials */
.whatsapp-btn:hover {
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 6px 16px rgba(37, 211, 102, 0.4);
}

.instagram-btn:hover {
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 6px 16px rgba(188, 24, 136, 0.4);
}

/* Active State */
.scroll-to-top-btn:active,
.whatsapp-btn:active,
.instagram-btn:active {
    transform: translateY(0) scale(1);
}

/* SVG Animations */
.scroll-to-top-btn svg,
.whatsapp-btn svg,
.instagram-btn svg {
    transition: transform 0.2s ease;
}

.whatsapp-btn:hover svg,
.instagram-btn:hover svg {
    transform: scale(1.1);
}

.scroll-to-top-btn:hover svg {
    transform: translateY(0);
}

/* Instagram Float Animation */
@keyframes floatInstagram {

    0%,
    100% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-8px);
    }
}

/* Media Queries for Floating Buttons */
@media (max-width: 480px) {

    .scroll-to-top-btn,
    .whatsapp-btn,
    .instagram-btn {
        right: 15px;
        width: 42px;
        height: 42px;
    }

    .scroll-to-top-btn {
        bottom: 15px;
        font-size: 16px;
    }

    .instagram-btn {
        bottom: 70px;
    }

    .whatsapp-btn {
        bottom: 125px;
    }
}

@media (min-width: 481px) and (max-width: 768px) {

    .scroll-to-top-btn,
    .whatsapp-btn,
    .instagram-btn {
        right: 20px;
        width: 45px;
        height: 45px;
    }

    .scroll-to-top-btn {
        bottom: 20px;
        font-size: 18px;
    }

    .instagram-btn {
        bottom: 80px;
    }

    .whatsapp-btn {
        bottom: 140px;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {

    .scroll-to-top-btn,
    .whatsapp-btn,
    .instagram-btn {
        right: 25px;
    }

    .scroll-to-top-btn {
        bottom: 25px;
    }

    .instagram-btn {
        bottom: 90px;
    }

    .whatsapp-btn {
        bottom: 155px;
    }
}

.why-us-section {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding: 0;
    padding-top: 50px;
}

.why-us-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    margin-top: 40px;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding: 0 1rem;
}

@media (min-width: 768px) {
    .why-us-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
    }
}

@media (min-width: 1200px) {
    .why-us-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Style Matching Achievement Card in About Section */
.why-us-card.style-achievement {
    background: rgba(255, 255, 255, 0.85);
    border: 1px solid rgba(92, 70, 58, 0.3);
    /* Made border slightly more visible/darker */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    border-radius: 16px;
    padding: 1.75rem;
    transition: all 0.4s ease;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 1.25rem;
    position: relative;
    overflow: hidden;
    height: 100%;
}

.why-us-card.style-achievement:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.2), 0 10px 20px -10px rgba(0, 0, 0, 0.15);
    border-color: rgba(92, 70, 58, 0.5);
    /* Darker on hover */
    background: rgba(255, 255, 255, 0.95);
    z-index: 5;
}

/* Icon Styles */
.card-icon {
    flex-shrink: 0;
    width: 3.5rem;
    height: 3.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(116, 69, 47, 0.08);
    /* Brand brown background */
    border: 1px solid rgba(116, 69, 47, 0.2);
    /* Brand brown border */
    border-radius: 12px;
    color: var(--furniture-primary);
    /* Brand brown icon */
}

.card-icon svg {
    width: 1.75rem;
    height: 1.75rem;
    stroke-width: 1.5px;
}

/* Content Styles */
.card-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    height: 100%;
}

.card-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--furniture-primary);
    margin-bottom: 0.5rem;
    line-height: 1.2;
}

.card-text {
    font-size: 1.15rem;
    /* Increased font size for better readability */
    color: #4b5563;
    line-height: 1.3;
    /* Decreased line spacing */
    margin-bottom: 1.25rem;
    font-weight: 400;
    flex-grow: 1;
    /* Pushes button to bottom if height fixed, though height is auto here */
}

/* Button Styles */
.card-button {
    background: transparent;
    color: var(--furniture-primary);
    border: 1px solid var(--furniture-primary);
    border-radius: 99px;
    padding: 0.6rem 1.4rem;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: var(--font-family);
    margin-top: auto;
    /* Align to bottom if card stretches */
}

.card-button:hover {
    background: var(--furniture-primary);
    color: white;
    box-shadow: 0 4px 12px rgba(116, 69, 47, 0.25);
    transform: translateY(-1px);
}

/* Partners Marquee - Right to Left Animation */
.partners-marquee {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    /* Breakout of container */
    overflow: hidden;
    padding: 30px 0 20px 0;
    /* Reduced top padding */
    margin-top: 10px;
    /* Reduced margin-top */
    background: transparent;
    position: relative;
    mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}

.partners-track {
    display: flex;
    width: max-content;
    gap: 3rem;
    /* Adjusted gap to 3rem */
    animation: scroll-left-partners 120s linear infinite;
}

.partner-item {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: auto;
    /* Dynamic width based on logo */
    padding: 0 20px;
    /* Additional breathing room inside item */
    height: 80px;
}

.partner-logo {
    height: 50px;
    /* Fixed uniform height */
    width: auto;
    max-width: 100%;
    object-fit: contain;
    opacity: 0.4;
    /* Made greyer/fainter */
    transition: opacity 0.3s ease, transform 0.3s ease;
    filter: grayscale(100%);
}

.partner-logo:hover {
    opacity: 1;
    filter: grayscale(0%);
    transform: scale(1.1);
}

/* Move Left Animation */
@keyframes scroll-left-partners {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-33.333%);
    }
}

@media (max-width: 768px) {
    .partners-track {
        gap: 1.5rem;
        animation-duration: 60s;
        /* Faster on mobile */
    }

    .partner-item {
        width: auto;
        height: 50px;
        padding: 0 10px;
    }

    .partner-logo {
        height: 40px !important;
        width: auto;
    }
}