/* Import CSS */
@import url("reset.css");
@import url("base.css");
@import url("color.css");
@import url("typography.css");
@import url("component.css");

/* Variable */
:root {
    --header-height: 16.5rem;
}

@media(width < 1400px) {
    :root {
        --header-height: 14rem;
    }
}

@media(width < 1200px) {
    :root {
        --header-height: 12rem;
    }
}

@media(width < 992px) {
    :root {
        --header-height: 10rem;
    }
}

@media(width < 768px) {
    :root {
        --header-height: 8rem;
    }
}

/* Header */
header {
    padding: var(--gutter) 0;
    transition: var(--transition);
    background-color: var(--body-color);
}

    header.header-scroll {
        --header-height: 8rem;
        --gutter: 1.5rem;
    }

    header.position-fixed {
        left: 0;
        top: 0;
        width: 100%;
        z-index: 999;
    }

        header.position-fixed + #smooth-wrapper #smooth-content > :first-child {
            padding-top: calc(var(--header-height) + (var(--gutter) * 2));
            transition: var(--transition);
        }

    header .logo {
        aspect-ratio: 1;
        display: grid;
        place-items: center;
        margin-right: auto;
    }

        header .logo img {
            transition: var(--transition);
        }

.header-box {
    height: var(--header-height);
    border: 0.1rem solid var(--border-color);
    display: flex;
    transition: var(--transition);
}

    .header-box > :not(:last-child) {
        border-right: .1rem solid var(--border-color);
    }

header.header-scroll.position-fixed + * {
    --header-height: 10rem;
}

header .logo img {
    max-height: 60%;
}

.book-btn {
    padding: 1.6rem;
    display: flex;
    align-items: flex-end;
    line-height: 1;
    font-size: var(--fs-lg);
    color: var(--text-color);
}

header .book-btn {
    aspect-ratio: 1.2/1;
    background-color: var(--yellow-peach);
}

    header .book-btn:hover {
        font-family: var(--font-extra-bold-italic);
    }

header.header-scroll .book-btn {
    font-size: var(--fs-md);
}

.languages {
    display: flex;
    flex-direction: column;
    width: calc(var(--header-height) / 2);
}

    .languages > * {
        flex: 1 0 0%;
        display: grid;
        place-items: center;
        text-align: center;
        color: rgba(var(--text-color-rgb),30%);
    }

    .languages > :hover {
        color: var(--text-color);
    }

    .languages > .active {
        color: var(--text-color);
        background-color: var(--sky-blue-medium);
    }

    .languages > :not(:last-child) {
        border-bottom: .1rem solid var(--border-color);
    }

.burger-wrap {
    display: none;
    aspect-ratio: 1;
}

header.header-scroll .languages > * {
    font-size: var(--fs-md);
}

@media(width > 991px) {
    header .languages {
        border-right: 0 !important;
    }
}

@media(width < 992px) {
    header {
        --gutter: 1.5rem;
    }

        header.position-fixed + #smooth-wrapper #smooth-content > :first-child {
            --gutter: 1.5rem;
        }

        header .book-btn {
            border-left: .1rem solid var(--border-color);
        }

    .burger-wrap {
        display: grid;
        place-items: center;
    }
}

@media(width < 576px) {
    header.header-scroll .book-btn {
        font-size: var(--fs-lg);
    }

    header.header-scroll .languages > * {
        font-size: var(--fs-lg);
    }
}

@media(width < 376px) {
    header .book-btn {
        flex: 1 0 0%;
        border-left: 0;
        justify-content: center;
    }
}

nav {
    display: flex;
    flex: 1 0 0%;
    transition: var(--transition);
}

    nav a {
        padding: 1.5rem;
        display: flex;
        line-height: 1;
        font-size: var(--fs-lg);
        color: var(--text-color);
    }

header.header-scroll nav a {
    font-size: var(--fs-md);
}

@media(width > 991px) {
    nav a {
        flex: 1 0 0%;
        align-items: flex-end;
    }

        nav a:hover {
            background-color: var(--sky-blue-medium);
            font-family: var(--font-extra-bold-italic);
        }

        nav a:not(:last-child) {
            border-right: .1rem solid var(--border-color);
        }
}

@media(width < 992px) {
    nav {
        flex-direction: column;
        align-items: center;
        justify-content: center;
        border-right: 0 !important;
        position: fixed;
        left: 0;
        top: 0;
        width: 100%;
        height: 100dvh;
        z-index: 9999;
        background-color: var(--sky-blue);
        opacity: 0;
        visibility: hidden;
    }

        nav a {
            font-size: clamp(var(--h4), 10vw, var(--h4));
        }

        nav.active {
            opacity: 1;
            visibility: visible;
        }
}


/* Hero Banner */
.hero-banner {
    aspect-ratio: 3/1;
    background: url('../images/hero-banner.jpg') center center no-repeat;
    background-size: cover;
}

@media(width < 768px) {
    .hero-banner {
        aspect-ratio: 1/1;
    }
}

.hero-banner-section h2 {
    text-transform: uppercase;
}

@media(width < 1200px) {
    .hero-banner-section h2 br {
        display: none;
    }
}

@media(width < 576px) {
    .hero-banner-section h2 {
        text-transform: lowercase;
    }
}

/* Intro Section */
.intro-section .border-box:not(:last-child) {
    margin-bottom: var(--lg);
}

@media(width < 992px) {
    .intro-section .border-box:not(:last-child) {
        margin-bottom: var(--md);
    }
}

@media(width < 768px) {
    .intro-section .border-box:not(:last-child) {
        margin-bottom: var(--sm);
    }
}

/* Intro Images */
.intro-images {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
}

.intro-image img {
    object-fit: cover;
    width: 100%;
    height: 100%;
    border: .1rem solid var(--border-color);
}

@media(width > 767px) {
    .intro-image img {
        transform: scale(1.5);
    }
}

@media(width > 767px) {
    .intro-images > :first-child {
        transform: rotate(7deg);
    }

    .intro-images > :nth-child(2n) {
        transform: rotate(-7deg);
    }

    .intro-images > :nth-child(4n) {
        transform: rotate(7deg);
    }

    .intro-images > :nth-child(5n) {
        transform: rotate(-7deg);
    }
}

@media(width < 768px) {
    .intro-images {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--gutter-half);
    }
}

@media(width < 576px) {
    .intro-images {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Section */
.section {
    padding: var(--xl) 0;
}

@media(width < 1200px) {
    .section {
        padding: var(--lg) 0;
    }
}

@media(width < 992px) {
    .section {
        padding: var(--md) 0;
    }
}

@media(width < 768px) {
    .section {
        padding: var(--sm) 0;
    }
}

/* Label Card Section */
.label-cards-section .grid {
    gap: var(--lg);
}

@media(width < 992px) {
    .label-cards-section .grid {
        gap: var(--sm);
    }
}

/* Card Slider Section */
.card-slider-grid {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 7rem;
}

.card-slider-wrapper {
    width: 35vw;
    padding-right: var(--md);
}

.card-slider .swiper-slide {
    display: flex;
}

    .card-slider .swiper-slide > * {
        flex: 1 0 0%;
        border: .1rem solid var(--border-color);
    }

        .card-slider .swiper-slide > * > img {
            object-fit: cover;
            width: 100%;
            height: 100%;
        }

@media(width < 1200px) {
    .card-slider-grid {
        grid-template-columns: 1fr;
    }

    .card-slider-wrapper {
        width: 60rem;
        margin-inline: auto;
        padding-right: 0;
    }
}

@media(width < 768px) {
    .card-slider-wrapper {
        width: 80vw;
        margin-inline: auto;
    }
}

.swiper-wrapper {
    height: auto;
}

/* Banner Slider */
.banner-slider-wrapper {
    overflow: hidden;
}

.banner-slide {
    width: 100%;
    aspect-ratio: 3/1;
    border: .1rem solid var(--border-color);
}

    .banner-slide img {
        object-fit: cover;
        width: 100%;
        height: 100%;
    }

.swiper-pagination {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 2.5rem;
}

.swiper-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet {
    margin: 0;
    width: 1.5rem;
    aspect-ratio: 1;
    height: auto;
    border-radius: 0;
    border: .2rem solid var(--border-color);
    background: none;
    opacity: 1;
}

    .swiper-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet.swiper-pagination-bullet-active {
        background-color: var(--dark-grey);
    }

.banner-slider-section .border-box > .flex {
    flex-direction: column;
}

.banner-slider-section .border-box .max-w-90 {
    max-width: 100%;
}

@media(width < 992px) {
    .banner-slide {
        aspect-ratio: 2.5/1;
    }
}

@media(width < 768px) {
    .banner-slide {
        aspect-ratio: 2/1;
    }
}

/* Product Intro Section */
.product-intro {
    display: flex;
    align-items: center;
    gap: var(--gutter) var(--lg);
}

.single-product {
    width: clamp(30rem, 56.5rem, 40vw);
    aspect-ratio: 1/1.4;
    border: .2rem solid var(--border-color);
    display: grid;
    place-items: center;
    transform: rotate(1deg);
}


@media(width < 1200px) {
    .product-intro {
        gap: var(--gutter);
    }
}

@media(width < 992px) {
    .product-intro {
        flex-direction: column;
    }
}

@media(width < 768px) {
    .single-product {
        transform: none;
    }
}

/* Page Banner Section */
.page-banner {
    width: 100%;
    aspect-ratio: 2.4/1;
    border: .1rem solid var(--border-color);
    position: relative;
    display: grid;
    place-items: center;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    padding: var(--gutter);
}

    .page-banner::before {
        position: absolute;
        left: .8rem;
        top: .8rem;
        width: 100%;
        height: 100%;
        background-color: var(--dark-grey);
        content: "";
        z-index: -1;
    }

    .page-banner::after {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        content: "";
        background-color: rgba(0,0,0,10%);
    }

    .page-banner img {
        object-fit: cover;
        width: 100%;
        height: 100%;
    }

.page-banner-1 {
    background-image: url('../images/page-banner-1.jpg');
}

.page-banner-content {
    max-width: 116rem;
    color: var(--light-yellow-peach);
    position: relative;
    z-index: 9;
}

    .page-banner-content .link {
        color: var(--light-yellow-peach);
    }

@media(width < 992px) {
    .page-banner {
        aspect-ratio: 2/1;
    }
}

@media(width < 768px) {
    .page-banner {
        aspect-ratio: 1.5/1;
    }
}

@media(width < 576px) {
    .page-banner {
        aspect-ratio: 1;
    }
}

/* Footer */
footer {
    padding: var(--xl) 0;
}

@media(width < 1200px) {
    footer {
        padding: var(--lg) 0;
    }
}

@media(width < 992px) {
    footer {
        padding: var(--md) 0;
    }
}

@media(width < 768px) {
    footer {
        padding: var(--sm) 0;
    }
}

.footer-content {
    background-color: var(--yellow-peach);
    padding: var(--xl);
    border: .2rem solid var(--border-color);
    display: grid;
    grid-template-columns: 1fr auto auto auto;
    gap: var(--xl);
}

.footer-headding {
    font-family: var(--font-black-italic);
}

    .footer-headding:not(:last-child) {
        margin-bottom: var(--gutter);
    }

.footer-block:not(:last-child) {
    margin-bottom: var(--gutter-half);
}

.footer-links li {
    display: flex;
    align-items: center;
}

    .footer-links li:not(:last-child) {
        margin-bottom: 1rem;
    }

    .footer-links li a {
        color: var(--dark-grey);
        white-space: nowrap;
        line-height: 1;
    }

        .footer-links li a:hover {
            text-decoration: underline;
        }

footer p a {
    color: var(--text-color);
}

    footer p a:hover {
        text-decoration: underline;
    }

@media(width < 1200px) {
    .footer-content {
        padding: var(--md) var(--gutter);
        gap: var(--md);
    }
}

@media(width < 992px) {
    .footer-content {
        grid-template-columns: auto auto auto;
    }

        .footer-content > :first-child {
            grid-column: span 4;
        }

    .footer-logo img {
        max-width: 8rem;
    }
}

@media(width < 768px) {
    .footer-content {
        grid-template-columns: 1fr;
        gap: var(--gutter);
    }

        .footer-content > :first-child {
            grid-column: span 1;
        }

    .footer-logo img {
        max-width: 6rem;
    }

    .footer-headding:not(:last-child) {
        margin-bottom: var(--gutter-half);
    }
}

/* Page Hero */
.page-hero {
    border: .1rem solid var(--border-color);
}

    .page-hero > :not(:last-child) {
        border-bottom: .1rem solid var(--border-color);
    }

.page-hero-headding {
    display: grid;
    place-items: center;
    padding: var(--md) var(--gutter);
    min-height: 43rem;
    text-center
}

.page-hero-content {
    padding: var(--md) var(--gutter);
}

    .page-hero-content > * {
        max-width: 80%;
        margin-inline: auto;
    }

@media(width < 992px) {
    .page-hero-headding {
        min-height: 30rem;
    }
}

@media(width < 768px) {
    .page-hero-headding {
        min-height: 20rem;
    }

    .page-hero-content {
        padding: var(--gutter);
    }

        .page-hero-content > * {
            max-width: 100%;
        }
}

/* Coverflow Slider */
.coverflow-slider .swiper-wrapper > :nth-child(odd) {
    transform: rotate(-5deg);
}

.coverflow-slider .swiper-wrapper > :nth-child(even) {
    transform: rotate(5deg);
}

.coverflow-slider .swiper-slide {
    width: auto;
    transition: transform 0.5s ease;
}

    .coverflow-slider .swiper-slide figure {
        width: 36rem;
        overflow: hidden;
        border: .1rem solid var(--border-color);
    }

        .coverflow-slider .swiper-slide figure img {
            object-fit: cover;
            width: 100%;
            height: 100%;
        }

@media(width < 1200px) {
    .coverflow-slider .swiper-slide figure {
        width: 30rem;
    }
}

@media(width < 992px) {
    .coverflow-slider .swiper-slide figure {
        width: 25rem;
    }
}

@media(width < 768px) {
    .coverflow-slider .swiper-slide figure {
        width: 20rem;
    }
}

/* Section banner */
.section-banner {
    width: 100%;
    aspect-ratio: 2.4/1;
    border: .1rem solid var(--border-color);
}

    .section-banner img {
        object-fit: cover;
        width: 100%;
        height: 100%;
    }

@media(width < 992px) {
    .section-banner {
        aspect-ratio: 2/1;
    }
}

@media(width < 768px) {
    .section-banner {
        aspect-ratio: 1.5/1;
    }
}

@media(width < 576px) {
    .section-banner {
        aspect-ratio: 1;
    }
}

/* Tab Section */
.tab-grid {
    display: grid;
    grid-template-columns: 1fr 2fr;
}

.tabs {
    display: flex;
}

    .tabs li {
        flex: 1 0 0%;
        display: flex;
    }

        .tabs li a {
            flex: 1 0 0%;
            display: flex;
            align-items: center;
            padding: var(--gutter) var(--md);
            min-height: 17rem;
            font-size: var(--h5);
            font-family: var(--font-italic);
            color: var(--text-color);
        }

            .tabs li a.active {
                font-family: var(--font-black-italic);
                background-color: var(--yellow-peach);
            }

.tab-content-block {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    min-height: 100%;
}

    .tab-content-block > :not(:last-child) {
        border-right: .1rem solid var(--dark-grey);
    }

.tab-content > .tab-content-block > :first-child {
    padding: var(--md);
}

    .tab-content > .tab-content-block > :first-child > :not(:last-child) {
        margin-bottom: var(--gutter);
    }

.tab-content > .tab-content-block ul {
    column-count: 2;
}

    .tab-content > .tab-content-block ul li {
        display: flex;
    }

        .tab-content > .tab-content-block ul li:not(:last-child) {
            margin-bottom: var(--gutter);
        }

        .tab-content > .tab-content-block ul li a {
            display: flex;
            align-items: center;
            line-height: 1;
            font-size: var(--fs-lg);
            color: var(--text-color);
        }

.tab-content figure img {
    object-fit: cover;
    width: 100%;
    height: 100%;
}

.tab-content-block.hide {
    display: none;
}

.tab-content-block.active {
    display: grid;
}

@media(width > 1199px) {
    .tabs {
        flex-direction: column;
    }

    .tab-grid > :not(:last-child) {
        border-right: .2rem solid var(--border-color);
    }

    .tabs li:not(:last-child) {
        border-bottom: .2rem solid var(--border-color);
    }
}

@media(width < 1200px) {
    .tab-grid {
        grid-template-columns: 1fr;
    }

        .tab-grid > :not(:last-child) {
            border-bottom: .2rem solid var(--border-color);
        }

    .tabs {
        flex-wrap: wrap;
    }

        .tabs li:not(:last-child) {
            border-right: .1rem solid var(--border-color);
        }

        .tabs li a {
            font-size: var(--fs-lg);
            min-height: auto;
            text-align: center;
            justify-content: center;
            padding: var(--gutter) var(--gutter-half);
        }

    .tab-content > .tab-content-block > :first-child {
        padding: var(--gutter);
    }
}

@media(width < 768px) {
    .tab-content-block {
        grid-template-columns: 1fr;
    }
}

@media(width <480px) {
    .tab-content > .tab-content-block ul {
        column-count: 1;
    }
}

/* Full Section */
.full-section {
    min-height: 100dvh;
    display: flex;
    align-items: center;
}

    .full-section .btn-wrap:not(:first-child) {
        margin-top: var(--lg);
    }

@media(width < 1200px) {
    .full-section .btn-wrap:not(:first-child) {
        margin-top: var(--md);
    }
}

@media(width < 992px) {
    .full-section .btn-wrap:not(:first-child) {
        margin-top: var(--sm);
    }
}

@media(width < 768px) {
    .full-section .btn-wrap:not(:first-child) {
        margin-top: var(--gutter);
    }
}

.border-box-content-block.grid {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--sm) var(--lg);
}

.border-box-links-wrap {
    width: 30vw;
}

.border-box-links {
    column-count: 3;
    column-gap: var(--gutter);
}

    .border-box-links li {
        display: flex;
        align-items: center;
    }

        .border-box-links li:not(:last-child) {
            margin-bottom: var(--gutter);
        }

        .border-box-links li a {
            display: flex;
            align-items: center;
            line-height: 1;
            white-space: nowrap;
            font-size: var(--fs-lg);
            color: var(--text-color);
        }

@media(width < 1200px) {
    .border-box-content-block.grid {
        grid-template-columns: 1fr;
        gap: var(--gutter);
    }

    .border-box-links-wrap {
        width: 100%;
    }
}

@media(width < 576px) {
    .border-box-links {
        column-count: 2;
    }
}

@media(width < 480px) {
    .border-box-links {
        column-count: 1;
    }
}

/* Post */
.post-image figure {
    border: .1rem solid var(--border-color);
}

.post-image figure {
    width: clamp(30rem, 56.5rem, 40vw);
}

.posts .post:not(:last-child) {
    margin-bottom: var(--xl);
}

@media(width < 1200px) {
    .posts .post:not(:last-child) {
        margin-bottom: var(--lg);
    }
}

@media(width > 991px) {
    .posts .post:nth-child(even) .post-image {
        order: 2
    }
}

/* Contact */
.contact-box {
    border: .1rem solid var(--border-color);
}

.contact-box-column:not(:last-child) {
    border-bottom: .1rem solid var(--border-color);
}

.contact-box-column {
    min-height: 16.4rem;
}

    .contact-box-column.grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }

        .contact-box-column.grid > :not(:last-child) {
            border-right: .1rem solid var(--border-color);
        }

.contact-block {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--gutter-half);
    padding: var(--gutter-half) var(--lg);
}

@media(width < 1200px) {
    .contact-block {
        padding: var(--gutter-half) var(--gutter);
    }
}

@media(width < 992px) {
    .contact-block {
        flex-direction: column;
        justify-content: center;
        min-height: auto;
    }

    .contact-box-column.grid > :not(:last-child) {
        border-right: 0;
        border-bottom: .1rem solid var(--border-color);
    }

    .contact-box-column.grid {
        grid-template-columns: 1fr;
    }
}

/* Intro Images Scroll Animation */
@media(width > 767px) {
    .intro-images-section .intro-images-container {
        height: 200vh;
    }

    .intro-images-section .intro-images {
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .intro-images-section .intro-image-item {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

        .intro-images-section .intro-image-item *:nth-child(1) {
            text-align: right;
        }

        .intro-images-section .intro-image-item *:nth-child(2) {
            margin: 0 auto;
        }
}

/* Text Transform Utility */
.no-transform {
    text-transform: none !important;
}