/* Import CSS files in order */
@import url('reset.css');
@import url('base.css');
@import url('color.css');
@import url('typography.css');
@import url('component.css');

/* Hero Section */
.hero-section{padding-top: var(--md); min-height: 100dvh; display: flex;}
.hero-section .container{flex: 1 0 0%; display: flex; flex-direction: column; gap: var(--gutter); justify-content: space-between;}
.logo img{margin-inline: auto;}
.hero-section h6{font-weight: 700;}
.hero-content{display: flex; align-items: flex-end;}
.hero-content > :first-child, .hero-content > :last-child{padding-bottom: var(--md);}
.hero-content > :first-child{flex: 1 0 0%;}
.hero-content > :last-child{flex: 1 0 0%; display: flex; justify-content: flex-end;}
.illustration img{width: clamp(25rem, 20vw, 20vw);}
@media(width < 992px){
    .hero-section{padding-top: var(--gutter);}
    .hero-content {
        flex-direction: column-reverse;
        justify-content: space-between;
        height: calc(100dvh - (var(--gutter) * 2));
    }
    .hero-content > :first-child, .hero-content > :last-child{padding-bottom: var(--gutter);}
}
@media(width < 768px){
    .hero-section h6{display: none;}
    .hero-section .scroll-btn{display: none;}
    .hero-section .container{flex-direction: row; align-items: flex-end;}
    .illustration img{width: 30rem; max-width: 30rem;}
    .hero-section{padding: var(--gutter) 0;}
    .hero-section{align-items: center;}
    .logo img{height: calc(100dvh - (var(--gutter) * 2)); width: auto;}
}
@media(width < 576px){
    .illustration img{width: 15rem; max-width: 15rem;}
}

/* Video, Image - Aspect Ratio */
.video, .image{aspect-ratio: 2.7/1;}
.image img{object-fit: cover; width: 100%; height: 100%;}
.article-video{aspect-ratio: 1.14;}
.video {
    position: relative;
    overflow: hidden;
}
    .video video {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }
@media(width < 768px){
    .video, .image, .aspect-ratio-mobile{aspect-ratio: 1.24;}   
    .aspect-ratio-mobile img{object-fit: cover; width: 100%; height: 100%;}
}
@media(width < 992px){
    .aspect-ratio-md{aspect-ratio: 1.24;}   
    .aspect-ratio-md img{object-fit: cover; width: 100%; height: 100%;}
}

/* Main */
main{padding: var(--md) 0;}
main .section{padding: var(--md) 0;}
@media(width < 1200px){
    main{padding: var(--sm) 0;}
    main .section{padding: var(--sm) 0;} 
}
@media(width < 992px){
    main{padding: var(--gutter) 0;}
    main .section{padding: var(--gutter) 0;} 
}

/* Section Header */
.section-header:not(:last-child){margin-bottom: calc(var(--lg) + var(--gutter));}
.section-header h1:not(:last-child){margin-bottom: var(--md);}
.section-header-content{padding: var(--md) 0;}
article p:not(:last-child){margin-bottom: var(--gutter);}
@media(width < 1200px){
    .section-header:not(:last-child){margin-bottom: var(--lg);}
    .section-header h1:not(:last-child){margin-bottom: var(--sm);}
    .section-header-content{padding: var(--sm) 0;}
}
@media(width < 992px){
    .section-header:not(:last-child){margin-bottom: var(--md);}
    .section-header h1:not(:last-child){margin-bottom: var(--gutter);}
    .section-header-content{padding: var(--gutter) 0;}
}
@media(width < 768px){
    .section-header:not(:last-child){margin-bottom: var(--sm);}
}

/* Product Slider */
.slider-controls{display: flex; align-items: center; gap: 1rem;}
.slider-arrow{display: grid; place-items: center; width: 6.4rem; aspect-ratio: 1; background-color: white; cursor: pointer;}
.slider-arrow.swiper-button-disabled{background-color: var(--text-color); opacity: 33%; pointer-events: none;}
.slider-arrow.slider-arrow-active{background-color: white; opacity: 1; pointer-events: auto;}
.product-slide{width: 44.4rem; display: block;}
.product-slide figure{aspect-ratio: 1/1.17; background-color: black; display: grid; place-items: center; position: relative; isolation: isolate;}
.product-slide figure::before{position: absolute; left: 0; bottom: 0; width: 100%; height: 25%; content: ""; z-index: -1; background: radial-gradient(ellipse at top, rgba(139,139,139,49%) -60%,rgba(0,0,0,0%) 80%); }
.product-slide figure img{max-width: 80%; max-height: 40rem;}
.product-slide > :not(:last-child){margin-bottom: var(--gutter);}
.product-slide-content p:not(:last-child){margin-bottom: 1rem;}
.product-slider .swiper-slide{width: auto !important;}
@media(width < 1500px){
    .product-slide{width: 38rem;}
    .slider-arrow{width: 6rem;}
    .product-slide figure img {
        max-width: 80%;
        max-height: 38rem;
    }
}
@media(width < 1300px){
    .product-slide{width: 34rem;}
    .slider-arrow{width: 5.6rem;}
    .product-slide figure img {
        max-width: 80%;
        max-height: 36rem;
    }
}
@media(width < 1200px){
    .product-slide{width: 30rem;}
    .slider-arrow{width: 5rem;}
    .product-slide figure img {
        max-width: 80%;
        max-height: 32rem;
    }
}
@media(width < 992px){
    .product-slide{width: 26rem;}
    .slider-arrow{width: 4.6rem;}
    .product-slide figure img {
        max-width: 80%;
        max-height: 24rem;
    }
}

/* Footer */
footer{padding-top: var(--2xl); overflow: hidden;}
.footer-content:not(:last-child){margin-bottom: var(--gutter);}
.footer-logo{transform: translateY(50%);}
.footer-content a {
    color:white;
}
@media(width < 1200px) {
    footer{padding-top: var(--xl); overflow: hidden;}
}
@media(width < 992px){
    footer{padding-top: var(--lg); overflow: hidden;}
}
@media(width < 768px){
    footer{padding-top: var(--md); overflow: hidden;}
    .footer-content p:not(:last-child){margin-bottom: var(--gutter);}
}


.scroll-tooltip {
    position: fixed;
    pointer-events: none;
    background: #fff;
    color: #000;
    padding: calc(var(--gutter)*0.33) calc(var(--gutter)*0.5);
    font-size: var(--fs-lg);
    font-family: var(--font-family);
    box-shadow: 0 2px 6px rgba(0,0,0,.2);
    z-index: 9999;
    transform: scale(0);
    opacity: 0;
    transition: transform 0.15s ease-out, opacity 0.15s ease-out;
}

    .scroll-tooltip.active {
        transform: scale(1);
        opacity: 1;
    }

/*Language switch*/
.language-switch {
    display: flex;
    gap: var(--gutter);
}

.language {
    font-family: var(--font-family);
    font-size: var(--fs-lg);
    background: var(--text-color);
    color: var(--body-color);
    padding: calc(var(--gutter)*0.33) calc(var(--gutter)*0.66);
    flex: none;
    white-space:nowrap;
}
    .language:not(.active) {
        background: var(--border-color);
    }

@media(width < 992px) {
    .language-switch {
        margin-bottom:auto;
    }
    .language {
        align-self:flex-start;
    }
}

.contact-box {
    background: rgba(0,0,0,.5);
    padding:var(--lg);
    text-align:center;
}

.contact-box h1 {
    margin-bottom:var(--sm)!important;
}