/* 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");

/* Variables */
:root{
    --header-height: 11rem;
}

/* Header */
header{position: fixed; left: 0; top: 0; width: 100%; height: var(--header-height); z-index: 999; display: flex; align-items: center; transition: var(--transition);}
header.header-scrolled, header.header-bg{box-shadow: 0 .2rem .6rem rgba(0, 0, 0, 0.1); background-color: var(--tertiary-color);}
header.header-bg + *{padding-top: var(--header-height);}
header + *{padding-top: var(--header-height);}
nav ul li a{display: flex; align-items: center; justify-content: center; gap: 0 1rem; line-height: 1; white-space: nowrap; padding: 1rem 1.5rem; color: white; font-size: 1.2rem; text-transform: uppercase; font-family: var(--secondary-font); letter-spacing: .4rem; position: relative;}
.logo img, a.logo-mobile{width: 7rem;}
@media(width < 1400px){
    nav ul{gap: 0 1rem;}
    nav ul li a.logo{ min-width: auto;} 
}
@media(width < 1200px){
    nav ul li a{letter-spacing: .2rem; padding: 1rem 1rem;} 
}
@media(width > 991px){
    nav ul{display: flex; align-items: center; justify-content: center; gap: 0 var(--gutter);}
    nav ul li a::after{content: ""; position: absolute; left: 0; top: 50%; height: .2rem; background-color: var(--primary-color); transition: background-color .4s ease,width .3s ease-in; width: 0; transform: translateY(-50%);}
    nav ul li a:not(.logo):hover::after, nav ul li a.active::after{width: 100%;}
    header .container a.logo-mobile{display: none !important;}
    header a.logo{min-width: 28rem;}  
}
@media(width < 992px){
    header{background-color: var(--tertiary-color);}
    nav ul li.logo-wrap{display: none !important;}
    header nav{position: fixed; left: 0; top: 0; width: 100%; background-color: var(--tertiary-color); padding-top: var(--header-height); transition: var(--transition);opacity: 0; visibility: hidden;}
    header nav.active{opacity: 1; visibility: visible;}
    nav ul li a{justify-content: flex-start; padding: 1.5rem var(--gutter); transition: var(--transition);}
    nav ul li a.active, nav ul li a:hover{background-color: rgba(0, 0, 0, 0.05); color: var(--primary-color);}
    header .container{display: flex; align-items: center; justify-content: center;}
    a.logo-mobile{position: relative; z-index: 9999;}
}

/* Hero Section */
.hero-section{height: 100dvh; background: url(../images/hero-bg.jpg) bottom center no-repeat; position: relative; isolation: isolate; display: flex; align-items: center;}
.hero-section::after{position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: #00000061; content: ""; z-index: -1; }
.hero-section .container{max-width: 90rem;}
.hero-section h1{color: white; text-align: center; line-height: 1;}

/* Main, Section, Section Header */
main{padding: var(--sm) 0;}
.section{padding: var(--sm) 0;}
.section-header:not(:last-child), .section-content:not(:last-child){margin-bottom: var(--lg);}
.section-block:not(:last-child){margin-bottom: var(--sm);}
@media(width < 992px){
    main{padding: var(--gutter) 0;}
    .section{padding: var(--gutter) 0;}
    .section-header:not(:last-child), .section-content:not(:last-child){margin-bottom: var(--md);}
}
@media(width < 768px){
    .section-header:not(:last-child), .section-content:not(:last-child){margin-bottom: var(--sm);}
}

/* Intro Section */
.intro-grid{display: grid; grid-template-columns: 1fr auto; gap: var(--md);}
.intro-grid figure{max-width: 60rem;}
.intro-grid figure:not(:last-child){margin-bottom: var(--gutter);}
.intro-content{max-width: 75rem;}
@media(width < 1200px){
    .intro-grid figure{max-width: 50rem;}
}
@media(width < 992px){
    .intro-grid{grid-template-columns: 1fr;}
    .intro-grid figure{max-width: 100%;}
    .intro-content{max-width: 100%;}
}

/* Article */
article h2:not(:last-child), article h3:not(:last-child), article h6:not(:last-child), .article-headding:not(:last-child), article video:not(:last-child){margin-bottom: var(--gutter);}
article p:not(:last-child), article .article-block-content:not(:last-child){margin-bottom: 2rem;}
article .article-block-content p:not(:last-child){margin-bottom: .5rem;}
.article-block-content.bordered{padding: 1rem 0; border-top: .1rem solid rgba(var(--tertiary-color-rgb), 0.3); border-bottom: .1rem solid rgba(var(--tertiary-color-rgb), 0.3);}

.article-headding p{text-transform: uppercase; letter-spacing: .8rem; font-size: var(--fs-sm); font-family: var(--secondary-font); font-weight: 200; line-height: 1; color: var(--primary-color);}
.article-headding p:not(:last-child){margin-bottom: .5rem;}

.vector{position: absolute; top: 0; left: 0; max-width: 13.7rem; z-index: -1;}
.vector-content{padding-top: var(--lg);}

.grid-2{display: grid; grid-template-columns: 30% 60%; gap: var(--md); justify-content: space-between;}
.grid-2 figure:not(:last-child){margin-bottom: var(--gutter);}
.grid-2 article{max-width: 80%; margin: 0 auto;}
.grid-2 .vector-content .article-headding{position: relative; z-index: 99;}
.grid-2 .vector-content .vector{z-index: 99; left: -6rem;}
.grid-2 .banner-image{aspect-ratio: 1.9/1;}
.grid-2 .banner-image img{width: 100%; height: 100%; object-fit: cover;}
@media(width < 992px){
    .grid-2{grid-template-columns: 1fr;}
    .grid-2 .vector-content .vector{left: 0;}
    .grid-2 article{max-width: 100%;}
}

/* Products */
.products{max-width: 126rem; display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--gutter); margin-inline: auto;}
.product div{max-width: 19rem; margin: 0 auto;}
.product-name{display: flex; align-items: center; justify-content: center; text-align: center; padding: var(--gutter-half) 0; color: var(--text-color);}
.add-to-cart-link{display: flex; align-items: center; justify-content: center; text-align: center; font-family: var(--secondary-font); color: var(--primary-color); font-weight: 300; font-size: var(--fs-sm); padding: var(--gutter-half) 0;}
.product-image, .product .product-content{display: block; transition: transform .5s ease;}
.product:hover .product-image{transform: scale(1.2);}
.product-content{background-color: var(--body-color);}
.product:hover .product-content{transform: translateY(-54px);}
.product .add-to-cart-link{transition: var(--transition); opacity: 0;}
.product .add-to-cart-link:hover{color: var(--text-color);}
.product:hover .add-to-cart-link{opacity: 1;}
@media(width < 992px){
    .products{grid-template-columns: repeat(3, 1fr);}
}
@media(width < 768px){
    .products{grid-template-columns: repeat(2, 1fr);}
}
@media(width < 481px){
    .products{grid-template-columns: 1fr;}
}

/* Contact */
.contact-section .container{max-width: 1480px;}
.contact-grid{display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sm);}
.contact-grid h4{line-height:` 1;}
.contact-grid h4:not(:last-child){margin-bottom: 2rem;}
.contact-grid ul.contact-content-list li{display: grid; grid-template-columns: 13.5rem auto;}
.contact-grid ul.contact-content-list li h5{font-weight: 700;}
.contact-content-block:not(:last-child){margin-bottom: var(--sm);}
.contact-form li:not(:last-child){margin-bottom: var(--gutter);}
.contact-form .label{font-weight: 700;}
.contact-form .label:not(:last-child){margin-bottom: .5rem;}
.contact-form .required-label{color: red; font-weight: normal;}
.contact-form input, .contact-form textarea{border: .1rem solid white; width: 100%; background-color: white; height: 6.6rem; padding: 0 var(--gutter); transition: var(--transition);}
.contact-form input:hover, .contact-form textarea:hover, .contact-form input:focus, .contact-form textarea:focus{border-color:var(--primary-color);}
.contact-form .grid{display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--gutter);}
.contact-form textarea{resize: none; min-height: 12rem; padding: var(--gutter);}
.contact-form textarea:focus::placeholder{opacity: 0; visibility: hidden;}
.contact-form-button{font-family: var(--secondary-font); color: var(--primary-color); cursor: pointer;}
.contact-form input.contact-form-checkbox {
    width: 20px !important;
    height: 20px !important;
    min-height: auto;
    padding: 0;
    margin: 0;
    cursor: pointer;
    appearance: checkbox;
    -webkit-appearance: checkbox;
}

.checkbox-container {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 10px;
}

    .checkbox-container label {
        margin-bottom: 0 !important;
        font-weight: normal;
        cursor: pointer;
    }

.contact-grid iframe {
    width: 100%;
    height: 100%;
}
@media(width < 1200px){
    .contact-form .grid{grid-template-columns: 1fr;}
}
@media(width < 992px){
    .contact-grid{grid-template-columns: 1fr;}
    .contact-grid iframe{aspect-ratio: 1;}
}

/* Footer */
footer{background-color: var(--secondary-color); --container-width: 124rem;}
.footer-content{display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gutter); padding: var(--gutter) 0;}
.footer-logo{max-width: 7rem;}
.footer-logo{display: block; margin: 0 auto;}
.footer-content{text-align: center;}
.footer-content p{font-size: var(--fs-lg); color: white;}
.footer-content p a{color: white;}
.footer-content .footer-headding{font-size: 2.4rem; color: white;}
.footer-content .footer-headding:not(:last-child){margin-bottom: var(--gutter-half);}
.social-media-links{display: flex; align-items: center; justify-content: center; gap: 0 var(--gutter-half);}
.social-media-links a{color: white;}
.social-media-links svg{color: white; width: 3rem;}
.social-media-links svg path{fill: white;}
.copyright:not(:first-child){border-top: .1rem solid white;}
.copyright{padding: var(--gutter) 0;}
.copyright > :not(:last-child){margin-bottom: var(--gutter);}
.copyright p{font-size: var(--fs-sm); color: white; text-align: center;}
.copyright figure img{max-width: 40rem; width: 100%; display: block; margin: 0 auto;}
@media(width < 768px){
    .footer-content{grid-template-columns: repeat(2, 1fr);}
}
@media(width < 481px){
    .footer-content{grid-template-columns: 1fr;}
}

/* Page Hero */
.page-hero-section{height: 50dvh; background-size: cover; background-repeat: no-repeat; background-position: 0px 40%; position: relative; isolation: isolate; display: flex; align-items: center;}
.page-hero-section::before{position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: #00000061; content: ""; z-index: -1; }
.page-hero-1{background-image: url('../images/page-hero-bg-1.jpeg');}
.page-hero-2{background-image: url('../images/page-hero-bg-2.jpeg');}
.page-hero-3{background-image: url('../images/page-hero-bg-3.jpeg');}
.page-hero-4{background-image: url('../images/page-hero-bg-4.jpeg');}
.page-hero-section h1{text-align: center; color: white; line-height: 1;opacity:1}
.page-hero-section h1 .char{ display:inline-block}

.intro-grid-2{display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sm);}
.intro-grid-2 .intro-content{max-width: 100%;}
@media(width < 1200px){
    .intro-grid-2{grid-template-columns: 1fr;}
}

.content-grid{display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sm);}
.content-grid:not(:last-child){margin-bottom: var(--gutter);}
@media(width < 1200px){
    .content-grid{grid-template-columns: 1fr;}
}

/* Gallery */
.gallery-grid{display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem;}
.gallery-grid > *{aspect-ratio: 1; position: relative;}
.gallery-grid > ::after{content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(84, 93, 92, 0.56); z-index: 1; opacity: 0;  transition: var(--transition); visibility: hidden;}
.gallery-grid > :hover::after{opacity: 1; visibility: visible;}
.gallery-grid > * > img{object-fit: cover; width: 100%; height: 100%;}
.gallery-grid p{position: absolute; left: 0; top: 0; width: 100%; height: 100%; text-align: center; display: flex; align-items: center; justify-content: center; color: white; opacity: 0; transition: var(--transition); visibility: hidden; z-index: 2; color: white;}
.gallery-grid :hover > p{opacity: 1; visibility: visible;}
.lightbox .lb-image{border:0;}
@media(width < 1200px) {
    .gallery-grid{grid-template-columns: repeat(3, 1fr);}
}
@media(width < 768px){
    .gallery-grid{grid-template-columns: repeat(2, 1fr);}
}
@media(width < 481px){
    .gallery-grid{grid-template-columns:1fr;}
}

.contact-intro{padding: var(--xl) 0; background: url(../images/vector-1.png) center center no-repeat; background-size: auto 100%;}
.contact-intro h4{font-size: calc(var(--h4) - .8rem);}

.single-product{max-width: 120rem; margin-inline: auto; display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--gutter); align-items: center;}
.single-product-content > :not(:last-child){margin-bottom: var(--gutter);}
.breadcrumb{display: flex; align-items: center; margin: 0 calc(1rem * -1);}
.breadcrumb li, .breadcrumb li a{font-size: var(--fs-sm); color: var(--text-color); text-transform: uppercase; font-family: var(--secondary-font); font-size: 1rem; letter-spacing: .2rem; color: #767676; transition: var(--transition);}
.breadcrumb li a:hover{color: var(--primary-color);}
.breadcrumb li{padding: 0 1rem; position: relative;}
.breadcrumb li:not(:last-child)::after{position: absolute; right: 0; top: 50%; transform: translateY(-50%) rotate(15deg); width: .1rem; height: .8rem; background-color: #767676; content: "";}
@media(width < 992px){
    .single-product{grid-template-columns: 1fr;}
}

.reveal-left, .reveal-right {
  visibility: hidden;
  position: relative;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}