/* Reset and Base Styles */

* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}



:root {

    --primary-black: #000000;

    --secondary-black: #1a1a1a;

    --primary-white: #ffffff;

    --secondary-white: #f5f5f5;

    --accent-gray: #666666;

    --light-gray: #e0e0e0;

    --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

}



html {

    scroll-behavior: smooth;

}



body {

    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    background-color: var(--primary-white);

    color: var(--primary-black);

    line-height: 1.6;

    overflow-x: hidden;

}



.container {

    max-width: 1200px;

    margin: 0 auto;

    padding: 0 20px;

}



/* Navigation */

.navbar {

    position: fixed;

    top: 0;

    width: 100%;

    background-color: rgba(255, 255, 255, 0.95);

    backdrop-filter: blur(10px);

    z-index: 1000;

    transition: transform 0.3s ease, box-shadow 0.3s ease;

    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);

}



.navbar.scrolled {

    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);

}



.navbar.hidden {

    transform: translateY(-100%);

}



.nav-container {

    max-width: 1200px;

    margin: 0 auto;

    padding: 1rem 20px;

    display: flex;

    justify-content: space-between;

    align-items: center;

}



.logo-container {

    height: 60px;

    width: 150px;

    display: flex;

    align-items: center;

    overflow: hidden;

    position: relative;

}



.logo-link {

    display: block;

    height: 100%;

    width: 100%;

    position: relative;

    cursor: pointer;

    text-decoration: none;

}



.logo {

    height: 75%;

    width: auto;

    object-fit: contain;

    object-position: center center;

    transition: var(--transition);

    position: absolute;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);

}



.logo-link:hover .logo {

    transform: translate(-50%, -50%) scale(1.05);

}



.nav-menu {

    display: flex;

    list-style: none;

    gap: 2rem;

    align-items: center;

}



.nav-dropdown {

    position: relative;

}



.dropdown-toggle {

    display: flex;

    align-items: center;

    gap: 0.3rem;

}



.dropdown-toggle::after {

    display: none;

}



.dropdown-arrow {

    font-size: 0.7rem;

    transition: transform 0.3s ease;

    display: inline-block;

}



.nav-dropdown.active .dropdown-arrow {

    transform: rotate(180deg);

}



.dropdown-menu {

    position: absolute;

    top: 100%;

    left: 50%;

    background-color: var(--primary-white);

    list-style: none;

    padding: 0.5rem 0;

    margin: 0;

    min-width: 150px;

    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);

    border-radius: 4px;

    opacity: 0;

    visibility: hidden;

    transform: translateX(-50%) translateY(-10px);

    transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;

    z-index: 1000;

}



.nav-dropdown.active .dropdown-menu {

    opacity: 1;

    visibility: visible;

    transform: translateX(-50%) translateY(0);

}



.dropdown-menu li {

    padding: 0;

    margin: 0;

}



.dropdown-menu .nav-link {

    display: block;

    padding: 0.75rem 1.5rem;

    white-space: nowrap;

}



.dropdown-menu .nav-link:hover {

    background-color: var(--secondary-white);

}



.nav-link {

    text-decoration: none;

    color: var(--primary-black);

    font-weight: 500;

    position: relative;

    transition: var(--transition);

    padding: 0.5rem 0;

}



.nav-link::after {

    content: '';

    position: absolute;

    bottom: 0;

    left: 0;

    width: 0;

    height: 2px;

    background-color: var(--primary-black);

    transition: var(--transition);

}



.nav-link:hover::after {

    width: 100%;

}



.nav-link.booking-btn {

    background-color: var(--primary-black);

    color: var(--primary-white);

    padding: 0.6rem 1.5rem;

    border-radius: 4px;

    transition: var(--transition);

    white-space: nowrap;

}



.nav-link.booking-btn::after {

    display: none;

}



.nav-link.booking-btn:hover {

    background-color: var(--secondary-black);

    transform: translateY(-2px);

    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);

}



.hamburger {

    display: none;

    flex-direction: column;

    cursor: pointer;

    gap: 5px;

}



.hamburger span {

    width: 25px;

    height: 2px;

    background-color: var(--primary-black);

    transition: var(--transition);

}



/* Hero Section */

.hero {

    min-height: 100vh;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    text-align: center;

    padding: 120px 20px 80px;

    position: relative;

    overflow: hidden;

    /* Grayscale synthwave/colorwave background with multiple layers */

    background: 

        /* Horizontal grid lines */

        repeating-linear-gradient(

            0deg,

            transparent,

            transparent 98px,

            rgba(0, 0, 0, 0.025) 98px,

            rgba(0, 0, 0, 0.025) 100px

        ),

        /* Vertical grid lines */

        repeating-linear-gradient(

            90deg,

            transparent,

            transparent 98px,

            rgba(0, 0, 0, 0.025) 98px,

            rgba(0, 0, 0, 0.025) 100px

        ),

        /* Diagonal synthwave accent lines */

        repeating-linear-gradient(

            125deg,

            transparent,

            transparent 3px,

            rgba(0, 0, 0, 0.015) 3px,

            rgba(0, 0, 0, 0.015) 6px

        ),

        /* Wave gradients (colorwave style) - multiple elliptical gradients for depth */

        radial-gradient(ellipse 800px 400px at 20% 60%, rgba(0, 0, 0, 0.12) 0%, transparent 60%),

        radial-gradient(ellipse 600px 300px at 80% 85%, rgba(0, 0, 0, 0.1) 0%, transparent 55%),

        radial-gradient(ellipse 700px 350px at 50% 25%, rgba(0, 0, 0, 0.08) 0%, transparent 45%),

        radial-gradient(ellipse 500px 250px at 70% 40%, rgba(0, 0, 0, 0.06) 0%, transparent 40%),

        /* Base gradient */

        linear-gradient(135deg, var(--primary-white) 0%, var(--secondary-white) 100%);

}



.hero::before {

    content: '';

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    /* Animated wave pattern overlay (synthwave style) */

    background: 

        /* Horizontal wave lines */

        repeating-linear-gradient(

            0deg,

            transparent,

            transparent 48px,

            rgba(0, 0, 0, 0.03) 48px,

            rgba(0, 0, 0, 0.03) 50px

        ),

        /* Wavy horizontal gradient */

        linear-gradient(

            90deg,

            transparent 0%,

            rgba(0, 0, 0, 0.04) 20%,

            transparent 40%,

            rgba(0, 0, 0, 0.04) 60%,

            transparent 80%,

            rgba(0, 0, 0, 0.04) 100%

        ),

        /* Vertical wave gradient */

        linear-gradient(

            0deg,

            transparent 0%,

            rgba(0, 0, 0, 0.03) 30%,

            transparent 60%,

            rgba(0, 0, 0, 0.03) 90%,

            transparent 100%

        );

    animation: waveMove 6s ease-in-out infinite;

    z-index: 1;

    opacity: 0.7;

    pointer-events: none;

}



@keyframes waveMove {

    0%, 100% {

        transform: translateY(0) translateX(0) scale(1);

        opacity: 0.7;

    }

    33% {

        transform: translateY(-15px) translateX(5px) scale(1.01);

        opacity: 0.8;

    }

    66% {

        transform: translateY(10px) translateX(-5px) scale(0.99);

        opacity: 0.75;

    }

}



.hero::after {

    content: '';

    position: absolute;

    bottom: 0;

    left: 0;

    width: 100%;

    /* Height calculated for 8-degree angle */

    /* tan(8°) ≈ 0.140, so for 100vw width, need ~14vw minimum height */

    /* Using 25vw to make it slightly lower and less prominent */

    height: 25vw;

    background: var(--primary-white);

    /* Create 8-degree diagonal: bottom-left (0 100%) to point on right side */

    /* tan(8°) ≈ 0.140, so for 25vw height, offset is 25vw * 0.140 ≈ 3.5vw */

    /* As percentage of height: 3.5vw / 25vw ≈ 14%, so point is at 100% - 14% = 86% from top */

    clip-path: polygon(0 100%, 100% 14%, 100% 100%);

    z-index: 2;

}

/* Ensure hero-founder allows lights to be visible */
.hero-founder {
    overflow: visible !important;
}

.hero-founder::before,
.hero-founder::after {
    z-index: 1;
}

/* Christmas Lights */
/* Home page lights - positioned just below testimonials section */
.christmas-lights {
    position: relative;
    width: 100%;
    height: 100px;
    margin-top: 0;
    margin-bottom: 50px;
    z-index: 5;
    pointer-events: none;
    overflow: visible;
}

/* Founder page lights (inside hero) - make sure they're visible */
.hero .christmas-lights {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100px;
    margin-top: 0;
    margin-bottom: 0;
    z-index: 15;
    pointer-events: none;
    overflow: visible;
}

.wire-svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100px;
    z-index: 1;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

.light {
    width: 14px;
    height: 20px;
    border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
    position: absolute;
    opacity: 0.4;
    transition: opacity 1s ease, transform 0.5s ease;
    box-shadow: 0 0 8px currentColor, 0 0 16px currentColor, inset 0 -2px 4px rgba(0, 0, 0, 0.2);
    animation: lightFlicker 10s ease-in-out infinite;
    filter: brightness(1);
    transform-origin: center top;
    z-index: 2;
}

/* Position lights to hang below the drooping wire - wire at top sags down, lights hang from it */
/* Home page lights - positioned just below testimonials */
.light-1 { left: 2%; top: 30px; }
.light-2 { left: 10.33%; top: 38px; }
.light-3 { left: 18.66%; top: 45px; }
.light-4 { left: 27%; top: 51px; }
.light-5 { left: 35.33%; top: 56px; }
.light-6 { left: 43.66%; top: 60px; }
.light-7 { left: 52%; top: 61px; }
.light-8 { left: 60.33%; top: 60px; }
.light-9 { left: 68.66%; top: 56px; }
.light-10 { left: 77%; top: 51px; }
.light-11 { left: 85.33%; top: 45px; }
.light-12 { left: 93.66%; top: 38px; }

/* Founder page lights - original position */
.hero .light-1 { left: 2%; top: 30px; }
.hero .light-2 { left: 10.33%; top: 38px; }
.hero .light-3 { left: 18.66%; top: 45px; }
.hero .light-4 { left: 27%; top: 51px; }
.hero .light-5 { left: 35.33%; top: 56px; }
.hero .light-6 { left: 43.66%; top: 60px; }
.hero .light-7 { left: 52%; top: 61px; }
.hero .light-8 { left: 60.33%; top: 60px; }
.hero .light-9 { left: 68.66%; top: 56px; }
.hero .light-10 { left: 77%; top: 51px; }
.hero .light-11 { left: 85.33%; top: 45px; }
.hero .light-12 { left: 93.66%; top: 38px; }

/* Alternate between cool (white/blue) and warm (yellow/white) colors */
.light-1 { background-color: #ffffff; color: #ffffff; animation-delay: 0s; } /* Cool - White */
.light-2 { background-color: #ffeb3b; color: #ffeb3b; animation-delay: 0.5s; } /* Warm - Yellow */
.light-3 { background-color: #64b5f6; color: #64b5f6; animation-delay: 1s; } /* Cool - Blue */
.light-4 { background-color: #fff59d; color: #fff59d; animation-delay: 1.5s; } /* Warm - Light Yellow */
.light-5 { background-color: #ffffff; color: #ffffff; animation-delay: 2s; } /* Cool - White */
.light-6 { background-color: #ffeb3b; color: #ffeb3b; animation-delay: 2.5s; } /* Warm - Yellow */
.light-7 { background-color: #90caf9; color: #90caf9; animation-delay: 3s; } /* Cool - Light Blue */
.light-8 { background-color: #fff59d; color: #fff59d; animation-delay: 3.5s; } /* Warm - Light Yellow */
.light-9 { background-color: #64b5f6; color: #64b5f6; animation-delay: 4s; } /* Cool - Blue */
.light-10 { background-color: #ffffff; color: #ffffff; animation-delay: 4.5s; } /* Cool - White */
.light-11 { background-color: #ffeb3b; color: #ffeb3b; animation-delay: 5s; } /* Warm - Yellow */
.light-12 { background-color: #90caf9; color: #90caf9; animation-delay: 5.5s; } /* Cool - Light Blue */

@keyframes lightFlicker {
    0% {
        opacity: 0.25;
        transform: scale(0.96);
        filter: brightness(0.5);
        box-shadow: 0 0 4px currentColor, 0 0 8px currentColor;
    }
    20% {
        opacity: 0.7;
        transform: scale(1.04);
        filter: brightness(0.9);
        box-shadow: 0 0 8px currentColor, 0 0 16px currentColor, 0 0 24px currentColor;
    }
    40% {
        opacity: 1;
        transform: scale(1.08);
        filter: brightness(1.3);
        box-shadow: 0 0 12px currentColor, 0 0 24px currentColor, 0 0 36px currentColor, 0 0 48px currentColor;
    }
    50% {
        opacity: 0.98;
        transform: scale(1.06);
        filter: brightness(1.2);
        box-shadow: 0 0 11px currentColor, 0 0 22px currentColor, 0 0 33px currentColor, 0 0 44px currentColor;
    }
    60% {
        opacity: 0.4;
        transform: scale(0.98);
        filter: brightness(0.65);
        box-shadow: 0 0 6px currentColor, 0 0 12px currentColor;
    }
    75% {
        opacity: 0.8;
        transform: scale(1.05);
        filter: brightness(1.1);
        box-shadow: 0 0 10px currentColor, 0 0 20px currentColor, 0 0 30px currentColor;
    }
    85% {
        opacity: 1;
        transform: scale(1.08);
        filter: brightness(1.3);
        box-shadow: 0 0 12px currentColor, 0 0 24px currentColor, 0 0 36px currentColor, 0 0 48px currentColor;
    }
    100% {
        opacity: 0.3;
        transform: scale(0.97);
        filter: brightness(0.6);
        box-shadow: 0 0 5px currentColor, 0 0 10px currentColor;
    }
}





@keyframes rotate {

    from { transform: rotate(0deg); }

    to { transform: rotate(360deg); }

}



.hero-content {

    position: relative;

    z-index: 3;

    max-width: 800px;

}



.hero-title {

    font-size: clamp(3rem, 8vw, 5rem);

    font-weight: 700;

    margin-bottom: 1.5rem;

    line-height: 1.1;

    letter-spacing: -0.02em;

}



.hero-subtitle {

    font-size: clamp(1.1rem, 2vw, 1.5rem);

    color: var(--accent-gray);

    margin-bottom: 2.5rem;

    font-weight: 300;

}



.hero-buttons {

    display: flex;

    gap: 1rem;

    justify-content: center;

    flex-wrap: wrap;

    margin-bottom: 1.5rem;

}



.hero-location {

    font-size: 1.1rem;

    color: var(--accent-gray);

    font-weight: 400;

    margin-top: 0;

    margin-bottom: 0.5rem;

    text-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);

}



.hero-location:last-of-type {

    margin-bottom: 4.5rem;

}



.btn {

    padding: 1rem 2.5rem;

    text-decoration: none;

    border-radius: 4px;

    font-weight: 600;

    transition: var(--transition);

    display: inline-block;

    border: 2px solid transparent;

    cursor: pointer;

    font-size: 1rem;

}



.btn-primary {

    background-color: var(--primary-black);

    color: var(--primary-white);

}



.btn-primary:hover {

    background-color: var(--secondary-black);

    transform: translateY(-2px);

    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);

}



.btn-secondary {

    background-color: transparent;

    color: var(--primary-black);

    border-color: var(--primary-black);

}



.btn-secondary:hover {

    background-color: var(--primary-black);

    color: var(--primary-white);

    transform: translateY(-2px);

}





/* Section Styles */

section {

    padding: 100px 0;

    position: relative;

}



.section-title {

    font-size: clamp(2.5rem, 5vw, 3.5rem);

    font-weight: 700;

    text-align: center;

    margin-bottom: 4rem;

    letter-spacing: -0.02em;

}





/* About Section */

.about {

    background-color: var(--primary-white);

}



.services-grid {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));

    gap: 1.5rem;

}



.service-card {

    padding: 2rem;

    background-color: var(--secondary-white);

    border-radius: 8px;

    text-align: center;

    transition: var(--transition);

    border: 1px solid transparent;

}



.service-card:hover {

    transform: translateY(-8px);

    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.1);

    border-color: var(--light-gray);

}



.service-icon {

    width: 42px;

    height: 42px;

    margin-bottom: 1.25rem;

    display: inline-block;

    transition: var(--transition);

    color: var(--primary-black);

}



.service-icon svg {

    width: 100%;

    height: 100%;

    display: block;

}



.service-card:hover .service-icon {

    transform: scale(1.1) rotate(5deg);

}



.performance-card:hover .lightning-icon {

    transform: none;

}



/* Phone icon animation - exclude from general hover effect */

.responsive-card:hover .phone-icon {

    transform: none;

}



.phone-icon {

    transform-origin: center;

    animation: none;

}



.phone-icon.animate-spin {

    animation: iconSpinBounce 0.8s ease-out forwards;

}



/* Lightning icon drop animation */

.lightning-icon {

    position: relative;

    filter: drop-shadow(0 0 0 rgba(0, 0, 0, 0));

    opacity: 0;

    transform: translateY(-100vh) rotate(-45deg);

}



.lightning-icon.drop-in {

    animation: lightningDrop 2s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;

}



@keyframes iconSpinBounce {

    0% {

        transform: rotate(0deg) scale(1);

    }

    60% {

        transform: rotate(360deg) scale(1.2);

    }

    80% {

        transform: rotate(360deg) scale(0.95);

    }

    100% {

        transform: rotate(360deg) scale(1);

    }

}



@keyframes lightningDrop {

    0% {

        transform: translateY(-100vh) rotate(-45deg);

        filter: drop-shadow(0 50px 30px rgba(0, 0, 0, 0.8));

        opacity: 0;

    }

    10% {

        opacity: 0.8;

    }

    50% {

        transform: translateY(-20px) rotate(5deg);

        filter: drop-shadow(0 20px 15px rgba(0, 0, 0, 0.5));

        opacity: 1;

    }

    100% {

        transform: translateY(0) rotate(0deg);

        filter: drop-shadow(0 5px 5px rgba(0, 0, 0, 0.2));

        opacity: 1;

    }

}



.service-card h3 {

    font-size: 1.375rem;

    margin-bottom: 0.75rem;

    font-weight: 600;

}



.service-card p {

    color: var(--accent-gray);

    line-height: 1.5;

    font-size: 0.95rem;

}



/* Microanimations wave animation */

.wave-letter {

    display: inline-block;

    transition: transform 0.3s ease, text-shadow 0.3s ease;

}



@keyframes waveJump {

    0% {

        transform: translateY(0);

        text-shadow: 0 0 0 rgba(0, 0, 0, 0);

    }

    50% {

        transform: translateY(-15px);

        text-shadow: 0 12px 20px rgba(0, 0, 0, 0.6);

    }

    100% {

        transform: translateY(0);

        text-shadow: 0 0 0 rgba(0, 0, 0, 0);

    }

}



/* Microanimations box drawing animation */

.microanimations-word {

    position: relative;

    display: inline-block;

    padding: 4px;

}



.box-border {

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

    pointer-events: none;

}



.box-line {

    position: absolute;

    background-color: var(--primary-black);

}



.box-top {

    top: 0;

    left: 0;

    height: 3px;

    width: 0;

}



.box-right {

    top: 0;

    right: 0;

    width: 3px;

    height: 0;

}



.box-bottom {

    bottom: 0;

    right: 0;

    height: 3px;

    width: 0;

}



.box-left {

    bottom: 0;

    left: 0;

    width: 3px;

    height: 0;

}



.microanimations-word.animate-box .box-top {

    animation: drawTop 0.35s ease-out 0s forwards,

               eraseTopReverse 0.35s ease-out 1.4s forwards;

}



.microanimations-word.animate-box .box-right {

    animation: drawRight 0.35s ease-out 0.35s forwards,

               eraseRightReverse 0.35s ease-out 1.75s forwards;

}



.microanimations-word.animate-box .box-bottom {

    animation: drawBottom 0.35s ease-out 0.7s forwards,

               eraseBottomReverse 0.35s ease-out 2.1s forwards;

}



.microanimations-word.animate-box .box-left {

    animation: drawLeft 0.35s ease-out 1.05s forwards,

               eraseLeftReverse 0.35s ease-out 2.45s forwards;

}



@keyframes drawTop {

    from { width: 0; }

    to { width: 100%; }

}



@keyframes drawRight {

    from { height: 0; }

    to { height: 100%; }

}



@keyframes drawBottom {

    from { width: 0; }

    to { width: 100%; }

}



@keyframes drawLeft {

    from { height: 0; }

    to { height: 100%; }

}



@keyframes eraseTopReverse {

    from { width: 100%; left: 0; }

    to { width: 0; left: 100%; }

}



@keyframes eraseRightReverse {

    from { height: 100%; top: 0; }

    to { height: 0; top: 100%; }

}



@keyframes eraseBottomReverse {

    from { width: 100%; right: 0; }

    to { width: 0; right: 100%; }

}



@keyframes eraseLeftReverse {

    from { height: 100%; bottom: 0; }

    to { height: 0; bottom: 100%; }

}



/* Testimonials Section */

.testimonials {

    background-color: var(--secondary-white);

    padding: 40px 0 40px 0;

    position: relative;

}



.testimonials .section-title {

    margin-bottom: 1rem;

}



.hero-founder {

    min-height: 60vh !important;

    padding: 105px 20px 80px !important;

}



.testimonials-grid {

    display: none;

}



.testimonial-card {

    background-color: var(--primary-white);

    padding: 1.25rem;

    border-radius: 8px;

    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);

    transition: var(--transition);

    border-left: 4px solid var(--primary-black);

    border-right: 4px solid var(--primary-black);

    transform: scale(1);

    height: 180px;

    width: 100%;

    display: flex;

    flex-direction: column;

}



.testimonial-card:hover {

    transform: translateY(-5px) scale(1);

    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2);

}



.testimonials-carousel-wrapper {

    position: relative;

    width: 100%;

    overflow: visible;

    padding: 2rem 0;

    margin: 0 auto;

    background-color: inherit;

}



.testimonials-carousel {

    display: flex;

    align-items: center;

    justify-content: flex-start;

    gap: 2rem;

    transition: transform 0.5s ease;

    padding: 0;

    width: max-content;

    margin: 0 auto;

}



.testimonial-card.carousel-card {

    flex: 0 0 auto;

    width: 320px;

    max-width: 320px;

    min-width: 320px;

    margin: 0;

    padding: 1.25rem;

    transform: scale(0.9);

    opacity: 0.8;

    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);

    height: 180px;

    transition: transform 0.5s ease, opacity 0.5s ease;

    box-sizing: border-box;

}



.testimonial-card.carousel-card.active {

    transform: scale(1);

    opacity: 1;

    z-index: 2;

    width: 320px;

    max-width: 320px;

    min-width: 320px;

    height: 180px;

    padding: 1.25rem;

    box-sizing: border-box;

}



.testimonial-content {

    display: flex;

    flex-direction: column;

    height: 100%;

    justify-content: space-between;

    padding: 0;

}



.testimonial-text {

    font-size: 0.85rem;

    line-height: 1.5;

    margin-bottom: 0.5rem;

    color: var(--accent-gray);

    font-style: italic;

    flex: 1;

    overflow-y: auto;

    overflow-x: hidden;

}



.testimonial-author {

    display: flex;

    align-items: center;

    gap: 0.75rem;

    flex-shrink: 0;

    margin-top: auto;

}



.carousel-controls {

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 1.5rem;

    margin-top: 1rem;

}



.carousel-dots {

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 0.5rem;

}



.carousel-dot {

    width: 6px;

    height: 6px;

    border-radius: 50%;

    background-color: rgba(0, 0, 0, 0.2);

    border: none;

    cursor: pointer;

    padding: 0;

    transition: all 0.3s ease;

    flex-shrink: 0;

}



.carousel-dot:hover {

    background-color: rgba(0, 0, 0, 0.4);

    transform: scale(1.3);

}



.carousel-dot.active {

    background-color: var(--primary-black);

    width: 8px;

    height: 8px;

}



.carousel-btn {

    background-color: transparent;

    color: var(--primary-black);

    border: none;

    width: auto;

    height: auto;

    border-radius: 0;

    font-size: 2rem;

    cursor: pointer;

    transition: var(--transition);

    display: flex;

    align-items: center;

    justify-content: center;

    line-height: 1;

    padding: 0.5rem;

}



.carousel-btn:hover:not(:disabled) {

    color: var(--secondary-black);

    transform: scale(1.2);

}



.carousel-btn:active:not(:disabled) {

    transform: scale(1);

}



.carousel-btn:disabled {

    opacity: 0.3;

    cursor: not-allowed;

    pointer-events: none;

}



.author-avatar {

    width: 36px;

    height: 36px;

    border-radius: 50%;

    background-color: var(--primary-black);

    color: var(--primary-white);

    display: flex;

    align-items: center;

    justify-content: center;

    font-weight: 600;

    font-size: 0.9rem;

    flex-shrink: 0;

}



.author-info h4 {

    font-weight: 600;

    margin-bottom: 0.2rem;

    font-size: 0.95rem;

    line-height: 1.2;

}



.author-info p {

    color: var(--accent-gray);

    font-size: 0.8rem;

    line-height: 1.3;

}



/* Process Section */

.process {

    background-color: var(--primary-white);

    padding: 30px 0 40px 0;

}



.process .section-title {

    margin-bottom: 2rem;

}



.process-intro {

    text-align: center;

    font-size: 1.25rem;

    line-height: 1.8;

    color: var(--accent-gray);

    max-width: 800px;

    margin: 0 auto 4rem;

}



.process-steps {

    display: flex;

    flex-direction: column;

    gap: 3rem;

    max-width: 900px;

    margin: 0 auto;

}



.process-step {

    background-color: var(--secondary-white);

    padding: 2.5rem;

    border-radius: 8px;

    border-left: 4px solid var(--primary-black);

    transition: var(--transition);

}



.process-step:hover {

    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);

    transform: translateY(-2px);

}



.process-step-header {

    display: flex;

    align-items: center;

    gap: 1.5rem;

    margin-bottom: 1.5rem;

}



.process-icon {

    width: 48px;

    height: 48px;

    color: var(--primary-black);

    flex-shrink: 0;

}



.process-icon svg {

    width: 100%;

    height: 100%;

    display: block;

}



.process-step-title {

    font-size: 1.75rem;

    font-weight: 700;

    color: var(--primary-black);

    margin: 0;

}



.process-step-content {

    color: var(--accent-gray);

    line-height: 1.8;

}



.process-step-content p {

    margin-bottom: 1.25rem;

    font-size: 1.1rem;

}



.process-step-content p:last-child {

    margin-bottom: 0;

}



.process-highlight {

    background-color: var(--primary-white);

    padding: 1.5rem;

    border-radius: 6px;

    border-left: 3px solid var(--primary-black);

    margin: 1.5rem 0 !important;

    font-size: 1.1rem;

    line-height: 1.8;

}



.process-list {

    list-style: none;

    padding: 0;

    margin: 1.5rem 0;

}



.process-list li {

    padding: 0.75rem 0;

    padding-left: 1.75rem;

    position: relative;

    font-size: 1.1rem;

    line-height: 1.8;

}



.process-list li::before {

    content: '→';

    position: absolute;

    left: 0;

    color: var(--primary-black);

    font-weight: bold;

}



.process-step-content strong {

    color: var(--primary-black);

    font-weight: 600;

}



.process-step-content u {

    text-decoration: underline;

    text-decoration-color: var(--primary-black);

    text-underline-offset: 3px;

}



/* Founder Section */

.founder-content {

    background-color: var(--primary-white);

    padding: 80px 0;

}



.founder-intro-item {

    display: block;

    margin-bottom: 4rem;

    max-width: 1200px;

    margin-left: auto;

    margin-right: auto;

    overflow: hidden;

}



.founder-intro-item .founder-image-wrapper {

    width: 45%;

    max-width: 350px;

    float: left;

    margin: 0 2rem 1rem 0;

    shape-outside: margin-box;

}



.founder-intro-item .founder-text-wrapper {

    overflow: hidden;

}



.founder-main-title {

    font-size: clamp(2rem, 4vw, 3rem);

    font-weight: 700;

    margin-bottom: 1.5rem;

    color: var(--primary-black);

    letter-spacing: -0.02em;

    text-align: left;

}



.founder-lead {

    font-size: 1.25rem;

    line-height: 1.8;

    color: var(--accent-gray);

    text-align: left;

    font-style: italic;

}



.founder-item {

    display: block;

    margin-bottom: 2.5rem;

    max-width: 1200px;

    margin-left: auto;

    margin-right: auto;

    min-height: 0;

}



.founder-item::after {

    content: "";

    display: table;

    clear: both;

}



.founder-item.reverse {

    direction: ltr;

}



.founder-image-wrapper {

    width: 45%;

    max-width: 350px;

    border-radius: 6px;

    overflow: hidden;

    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);

    transition: transform 0.3s ease, box-shadow 0.3s ease;

    position: relative;

    aspect-ratio: 4 / 3;

    float: left;

    margin: 0 2rem 1rem 0;

    shape-outside: margin-box;

}



.founder-item.reverse .founder-image-wrapper {

    float: right;

    margin: 0 0 1rem 2rem;

    shape-outside: margin-box;

}



.founder-image-wrapper:hover {

    transform: translateY(-5px);

    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);

}



.founder-image {

    width: 100%;

    height: 100%;

    display: block;

    object-fit: cover;

    object-position: center center;

}



/* Crop ski photo - remove top third, show bottom 2/3 */

.founder-image-wrapper.ski-crop {

    aspect-ratio: 4 / 2;

}



.founder-image-wrapper.ski-crop .founder-image {

    position: absolute;

    left: 0;

    object-position: center 66%;

    height: 150%;

    width: 100%;

    top: -33%;

}



/* Crop backflip photo - remove less from top (add back a fifth), remove bottom fifth, show middle portion */

.founder-image-wrapper.backflip-crop {

    aspect-ratio: 4 / 2.4;

}



.founder-image-wrapper.backflip-crop .founder-image {

    position: absolute;

    left: 0;

    object-position: center center;

    height: 166.67%;

    width: 100%;

    top: -12%;

}



.founder-text-wrapper {

    padding: 0;

    overflow: hidden;

}



.founder-item-text-only .founder-text-wrapper {

    max-width: 800px;

    margin: 0 auto;

    text-align: left;

    overflow: visible;

}



.founder-text-wrapper h3 {

    font-size: 2rem;

    font-weight: 700;

    margin-bottom: 1.5rem;

    color: var(--primary-black);

}



.founder-text-wrapper p {

    color: var(--accent-gray);

    line-height: 1.8;

    font-size: 1.1rem;

    margin-bottom: 1.25rem;

}



.founder-text-wrapper p:last-child {

    margin-bottom: 0;

}



.founder-text-wrapper p:last-of-type {

    margin-bottom: 0;

    font-weight: 600;

    color: var(--primary-black);

}



.founder-focus {

    max-width: 900px;

    margin: 5rem auto 0;

    padding: 3rem;

    background-color: var(--secondary-white);

    border-radius: 12px;

    text-align: center;

}



.founder-focus h3 {

    font-size: 2rem;

    font-weight: 700;

    margin-bottom: 1.5rem;

    color: var(--primary-black);

}



.founder-focus p {

    color: var(--accent-gray);

    line-height: 1.8;

    font-size: 1.1rem;

    margin-bottom: 1.25rem;

}



.founder-focus p:last-child {

    margin-bottom: 0;

    font-weight: 600;

    color: var(--primary-black);

}



.founder-cta-link {

    color: inherit;

    text-decoration: none;

    font-weight: inherit;

    cursor: pointer;

    display: inline-block;

    position: relative;

    transition: transform 0.3s ease, color 0.3s ease;

    animation: cta-pulse 3s ease-in-out infinite;

}



.founder-cta-link:hover {

    animation: none;

    transform: translateY(-2px) scale(1.03);

    color: var(--primary-black);

}



.founder-cta-link::after {

    content: '';

    position: absolute;

    bottom: -2px;

    left: 0;

    width: 0;

    height: 2px;

    background-color: var(--primary-black);

    transition: width 0.3s ease;

}



.founder-cta-link:hover::after {

    width: 100%;

}



@keyframes cta-pulse {

    0%, 100% {

        transform: scale(1);

    }

    50% {

        transform: scale(1.015);

    }

}



/* Contact Section */

.contact {

    background-color: var(--primary-white);

    padding: 20px 0 60px 0;

}



.contact .section-title {

    margin-bottom: 2rem;

}



.contact-wrapper {

    display: grid;

    grid-template-columns: 1fr 1.5fr;

    gap: 4rem;

    align-items: start;

}



.contact-info h3 {

    font-size: 2rem;

    margin-bottom: 1rem;

    font-weight: 600;

}



.contact-info p {

    color: var(--accent-gray);

    margin-bottom: 2rem;

    line-height: 1.8;

}



.contact-message {

    background-color: var(--primary-white);

    padding: 1.25rem;

    border-radius: 0;

    border: 2px solid var(--primary-black);

    margin-top: 2rem;

    transition: var(--transition);

}



.contact-message:hover {

    background-color: var(--secondary-white);

}



.contact-message p {

    color: var(--primary-black);

    line-height: 1.6;

    margin: 0;

    font-size: 0.95rem;

    font-weight: 500;

}



.contact-details {

    display: flex;

    flex-direction: column;

    gap: 1.5rem;

}



.contact-item {

    display: flex;

    align-items: center;

    gap: 1rem;

    font-size: 1.1rem;

}

.contact-item a {

    color: inherit;

    text-decoration: none;

    transition: var(--transition);

}

.contact-item a:hover {

    color: var(--accent-gray);

    text-decoration: underline;

}



.contact-icon {

    width: 24px;

    height: 24px;

    margin-right: 0.75rem;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    color: var(--primary-black);

    flex-shrink: 0;

}



.contact-icon svg {

    width: 100%;

    height: 100%;

    display: block;

}



.contact-form {

    display: flex;

    flex-direction: column;

    gap: 1.5rem;

}



.form-group {

    position: relative;

}



.form-group input,

.form-group textarea,

.form-group select {

    width: 100%;

    padding: 1rem;

    border: 2px solid var(--light-gray);

    border-radius: 4px;

    font-family: inherit;

    font-size: 1rem;

    transition: var(--transition);

    background-color: var(--primary-white);

    color: var(--primary-black);

}



.form-group input:focus,

.form-group textarea:focus,

.form-group select:focus {

    outline: none;

    border-color: var(--primary-black);

    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.1);

}



.form-group textarea {

    resize: vertical;

    min-height: 120px;

}



.form-message {

    padding: 1rem;

    border-radius: 4px;

    text-align: center;

    font-weight: 500;

    display: none;

}



.form-message.success {

    background-color: #d4edda;

    color: #155724;

    border: 1px solid #c3e6cb;

    display: block;

}



.form-message.error {

    background-color: #f8d7da;

    color: #721c24;

    border: 1px solid #f5c6cb;

    display: block;

}



/* Booking Section */

.booking {

    background-color: var(--secondary-white);

}



.booking-wrapper {

    max-width: 600px;

    margin: 0 auto;

}



.booking-info {

    text-align: center;

    margin-bottom: 3rem;

}



.booking-info h3 {

    font-size: 2rem;

    margin-bottom: 1rem;

    font-weight: 600;

}



.booking-info p {

    color: var(--accent-gray);

    line-height: 1.8;

}



.booking-form {

    background-color: var(--primary-white);

    padding: 2.5rem;

    border-radius: 8px;

    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);

}



/* Footer */

.footer {

    background-color: var(--primary-black);

    color: var(--primary-white);

    padding: 3rem 0 1.5rem;

}



.footer-content {

    display: flex;

    justify-content: center;

    align-items: center;

    margin-bottom: 2rem;

    flex-wrap: wrap;

    gap: 2rem;

}



.footer-logo {

    display: flex;

    align-items: center;

    justify-content: center;

}



.footer-logo-img {

    height: 80px;

    width: auto;

    max-width: 300px;

    filter: brightness(0) invert(1);

    opacity: 1;

    transition: var(--transition);

}



.footer-logo-img:hover {

    transform: scale(1.05);

    opacity: 0.9;

}



.footer-links {

    display: flex;

    gap: 2rem;

    flex-wrap: wrap;

}



.footer-links a {

    color: var(--primary-white);

    text-decoration: none;

    transition: var(--transition);

    opacity: 0.8;

}



.footer-links a:hover {

    opacity: 1;

    text-decoration: underline;

}



.footer-bottom {

    text-align: center;

    padding-top: 2rem;

    border-top: 1px solid rgba(255, 255, 255, 0.1);

    opacity: 0.6;

}



/* Animations */

.fade-in {

    animation: fadeIn 1s ease-out;

}



.fade-in-delay {

    animation: fadeIn 1s ease-out 0.3s both;

}



.fade-in-delay-2 {

    animation: fadeIn 1s ease-out 0.6s both;

}



@keyframes fadeIn {

    from {

        opacity: 0;

        transform: translateY(20px);

    }

    to {

        opacity: 1;

        transform: translateY(0);

    }

}



/* Responsive Design */

@media (max-width: 768px) {

    .hamburger {

        display: flex;

    }



    .nav-menu {

        position: fixed;

        left: -100%;

        top: 60px;

        flex-direction: column;

        background-color: var(--primary-white);

        width: 100%;

        text-align: center;

        transition: var(--transition);

        box-shadow: 0 10px 27px rgba(0, 0, 0, 0.05);

        padding: 2rem 0;

        gap: 0;

    }



    .nav-menu.active {

        left: 0;

    }



    .nav-menu li {

        width: 100%;

        padding: 1rem 0;

    }



    .nav-dropdown {

        width: 100%;

    }



    .dropdown-toggle {

        justify-content: center;

    }



    .dropdown-menu {

        position: static;

        transform: none;

        opacity: 0;

        max-height: 0;

        overflow: hidden;

        transition: opacity 0.3s ease, max-height 0.3s ease;

        box-shadow: none;

        background-color: var(--secondary-white);

        margin-top: 0.5rem;

        border-radius: 0;

    }



    .nav-dropdown.active .dropdown-menu {

        opacity: 1;

        max-height: 200px;

        transform: none;

        visibility: visible;

    }



    .dropdown-menu li {

        padding: 0;

    }



    .dropdown-menu .nav-link {

        padding: 0.75rem 2rem;

        text-align: left;

    }



    .nav-link.booking-btn {

        margin: 0 2rem;

        width: calc(100% - 4rem);

    }



    .hamburger.active span:nth-child(1) {

        transform: rotate(45deg) translate(8px, 8px);

    }



    .hamburger.active span:nth-child(2) {

        opacity: 0;

    }



    .hamburger.active span:nth-child(3) {

        transform: rotate(-45deg) translate(7px, -7px);

    }



    .nav-container {

        padding: 0.6rem 20px;

    }



    .logo-container {

        height: 50px;

        width: 130px;

    }



    .hero {

        min-height: 50vh;

        padding: 140px 20px 50px;

    }



    .hero-founder {

        min-height: 45vh !important;

        padding: 98px 20px 60px !important;

    }

    /* Home page lights - just below testimonials */
    .christmas-lights {
        height: 80px;
        margin-top: 0;
        margin-bottom: 40px;
    }
    
    /* Founder page lights - original position */
    .hero .christmas-lights {
        top: 0;
    }

    .wire-svg {
        width: 100%;
        height: 80px;
    }

    .light {
        width: 10px;
        height: 16px;
    }

    .light-1 { left: 2%; top: 20px; }
    .light-2 { left: 10.33%; top: 26px; }
    .light-3 { left: 18.66%; top: 31px; }
    .light-4 { left: 27%; top: 35px; }
    .light-5 { left: 35.33%; top: 38px; }
    .light-6 { left: 43.66%; top: 40px; }
    .light-7 { left: 52%; top: 41px; }
    .light-8 { left: 60.33%; top: 40px; }
    .light-9 { left: 68.66%; top: 38px; }
    .light-10 { left: 77%; top: 35px; }
    .light-11 { left: 85.33%; top: 31px; }
    .light-12 { left: 93.66%; top: 26px; }





    .hero-buttons {

        flex-direction: column;

        width: 100%;

    }



    .btn {

        width: 100%;

        text-align: center;

    }



    .contact-wrapper {

        grid-template-columns: 1fr;

        gap: 2rem;

    }



    .services-grid {

        grid-template-columns: 1fr;

    }

    

    .testimonials-grid {

        display: none;

    }

    

    .testimonials-carousel-wrapper {

        padding: 1.5rem 0;

        overflow: hidden;

    }

    

    .testimonials-carousel {

        gap: 1rem;

        padding: 0;

    }

    

    .testimonial-card.carousel-card {

        width: 280px;

        min-width: 280px;

        max-width: 280px;

        height: 180px;

    }

    

    .testimonial-card.carousel-card.active {

        width: 280px;

        min-width: 280px;

        max-width: 280px;

        height: 180px;

    }





    .testimonial-text {

        font-size: 0.85rem;

        line-height: 1.5;

        margin-bottom: 0.5rem;

    }



    .testimonial-author {

        gap: 0.5rem;

    }



    .author-avatar {

        width: 32px;

        height: 32px;

        font-size: 0.9rem;

    }



    .author-info h4 {

        font-size: 0.9rem;

        margin-bottom: 0.15rem;

    }



    .author-info p {

        font-size: 0.8rem;

    }



    .carousel-controls {

        margin-top: 0.5rem;

        gap: 0.75rem;

    }



    .carousel-btn {

        width: auto;

        height: auto;

        font-size: 1.75rem;

        padding: 0.5rem;

    }



    .footer-content {

        flex-direction: column;

        text-align: center;

    }



    .footer-links {

        justify-content: center;

    }



    section {

        padding: 60px 0;

    }



    .testimonials {

        padding: 20px 0;

    }



    .process-intro {

        font-size: 1.1rem;

        margin-bottom: 3rem;

        padding: 0 1rem;

    }



    .process-steps {

        gap: 2rem;

    }



    .process-step {

        padding: 2rem;

    }



    .process-step-header {

        flex-direction: column;

        align-items: flex-start;

        gap: 1rem;

        margin-bottom: 1.25rem;

    }



    .process-step-title {

        font-size: 1.5rem;

    }



    .process-step-content p {

        font-size: 1rem;

    }



    .process-highlight {

        padding: 1.25rem;

        font-size: 1rem;

    }



    .process-list li {

        font-size: 1rem;

    }



    /* Founder page responsive */

    .founder-item {

        margin-bottom: 3rem;

    }



    .founder-item.reverse {

        direction: ltr;

    }



    .founder-image-wrapper {

        float: none !important;

        width: 80% !important;

        max-width: 350px !important;

        margin: 0 auto 2rem !important;

        display: block;

    }



    .founder-intro-item .founder-image-wrapper {

        float: none !important;

        width: 80% !important;

        max-width: 350px !important;

        margin: 0 auto 2rem !important;

        display: block;

    }



    .founder-text-wrapper {

        padding: 0;

        overflow: visible;

    }



    .founder-text-wrapper h3 {

        font-size: 1.75rem;

    }



    .founder-focus {

        padding: 2rem 1.5rem;

        margin: 3rem auto 0;

    }





    .founder-intro-item {

        grid-template-columns: 1fr;

        gap: 2rem;

        margin-bottom: 3rem;

    }



    .founder-main-title {

        text-align: center;

        font-size: 2rem;

    }



    .founder-lead {

        text-align: center;

    }



    .hero-founder {

        min-height: 35vh !important;

        padding: 84px 20px 50px !important;

    }

}



@media (max-width: 480px) {

    .nav-container {

        padding: 0.5rem 20px;

    }



    .logo-container {

        height: 45px;

        width: 120px;

    }



    .nav-menu {

        top: 55px;

    }



    .hero {

        padding: 150px 20px 50px;

    }



    .hero-founder {

        min-height: 30vh !important;

        padding: 91px 20px 40px !important;

    }

    /* Home page lights - just below testimonials */
    .christmas-lights {
        height: 70px;
        margin-top: 0;
        margin-bottom: 35px;
    }
    
    /* Founder page lights - original position */
    .hero .christmas-lights {
        top: 0;
    }

    .wire-svg {
        width: 100%;
        height: 70px;
    }

    .light {
        width: 8px;
        height: 14px;
    }

    .light-1 { left: 2%; top: 18px; }
    .light-2 { left: 10.33%; top: 23px; }
    .light-3 { left: 18.66%; top: 27px; }
    .light-4 { left: 27%; top: 30px; }
    .light-5 { left: 35.33%; top: 32px; }
    .light-6 { left: 43.66%; top: 34px; }
    .light-7 { left: 52%; top: 35px; }
    .light-8 { left: 60.33%; top: 34px; }
    .light-9 { left: 68.66%; top: 32px; }
    .light-10 { left: 77%; top: 30px; }
    .light-11 { left: 85.33%; top: 27px; }
    .light-12 { left: 93.66%; top: 23px; }



    .hero-title {

        font-size: 2.5rem;

    }



    .section-title {

        font-size: 2rem;

    }



    .service-card {

        padding: 1.25rem;

    }

    

    .testimonials-grid {

        display: none;

    }

    

    .testimonials-carousel-wrapper {

        padding: 1rem 0;

        overflow: hidden;

    }

    

    .testimonials-carousel {

        gap: 0.75rem;

        padding: 0;

    }

    

    .testimonial-card.carousel-card {

        width: 240px;

        min-width: 240px;

        max-width: 240px;

        height: 160px;

        padding: 1rem;

    }

    

    .testimonial-card.carousel-card.active {

        width: 240px;

        min-width: 240px;

        max-width: 240px;

        height: 160px;

    }



    .testimonial-text {

        font-size: 0.8rem;

        line-height: 1.4;

        margin-bottom: 0.4rem;

    }



    .testimonial-author {

        gap: 0.5rem;

    }



    .author-avatar {

        width: 32px;

        height: 32px;

        font-size: 0.85rem;

    }



    .author-info h4 {

        font-size: 0.85rem;

        margin-bottom: 0.1rem;

    }



    .author-info p {

        font-size: 0.75rem;

    }



    .testimonials-carousel {

        gap: 0.75rem;

        padding: 0;

        justify-content: center;

    }



    .testimonials-carousel-wrapper {

        padding: 0.25rem 0.5rem;

        width: 100%;

        overflow: hidden;

    }



    .carousel-controls {

        margin-top: 0.5rem;

    }



    .carousel-btn {

        width: auto;

        height: auto;

        font-size: 1.5rem;

        padding: 0.5rem;

    }



    .booking-form {

        padding: 1.5rem;

    }



    /* Founder page mobile */

    .founder-main-title {

        font-size: 2rem;

    }



    .founder-lead {

        font-size: 1.1rem;

    }



    .founder-text-wrapper h3 {

        font-size: 1.5rem;

    }



    .founder-focus {

        padding: 1.5rem;

    }



    .founder-focus h3 {

        font-size: 1.5rem;

    }



    .founder-image-wrapper {

        width: 90%;

        max-width: 300px;

    }

}



/* Performance Optimizations */

img {

    max-width: 100%;

    height: auto;

    display: block;

}



/* Smooth scrolling for older browsers */

@media (prefers-reduced-motion: no-preference) {

    html {

        scroll-behavior: smooth;

    }

}