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

:root {
  --section-padding: calc(var(--xl) + var(--gutter));
}
@media (width < 1200px) {
  :root {
    --section-padding: var(--lg);
  }
}
@media (width < 992px) {
  :root {
    --section-padding: var(--md);
  }
}

/* Header */

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

.p-t-half {
    padding-top: var(--gutter-half);
}

/* Section Block */
.section-block:not(:last-child){margin-bottom: var(--section-padding);}

/* Article */
article > :not(:last-child) {
  margin-bottom: var(--gutter);
}
@media (width < 576px) {
  article > :not(:last-child) {
    margin-bottom: var(--gutter-half);
  }
}

/* Images */
.images > :not(:last-child) {
  margin-bottom: 2rem;
}

.article-imge {
  margin-top: calc(var(--xl) + var(--md));
}
@media (width < 1300px) {
  .article-imge {
    margin-top: var(--xl);
  }
}
@media (width < 1200px) {
  .article-imge {
    margin-top: var(--lg);
  }
}
@media (width < 992px) {
  .article-imge {
    margin-top: var(--md);
  }
}

.products-grid {display: grid; grid-template-columns: repeat(4, 1fr); gap:1rem;}
.product{background-color: #F3EFE7; padding:var(--sm) var(--gutter); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--gutter); text-align: center;}
.product figure{height:60vh;}
.product figure img{height:100%;object-fit:cover;}
@media (width < 1300px) {
  .products-grid {grid-template-columns: repeat(3, 1fr);}
}
@media (width < 992px) {
  .products-grid {grid-template-columns: repeat(2, 1fr);}
}
@media (width < 576px) {
  .products-grid {grid-template-columns: 1fr;}
}

/* Page Banner */
.page-banner{min-height: 85rem; position: relative; background-size: cover; background-repeat: no-repeat; background-position: center center; display: flex; align-items: center; justify-content: center; text-align: center; isolation: isolate; padding: var(--md) var(--gutter);}
.page-banner::after{position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(33,33,33,0.25); content: ""; z-index: -1;}
.page-banner-1{background-image: url('../images/page-banner-1.jpg');}
.page-banner h2{color: white;}
.page-banner > * > :not(:last-child){margin-bottom: var(--gutter);}
@media (width < 1200px) {
  .page-banner{min-height: 75rem;}
}
@media (width < 992px) {
  .page-banner{min-height: 65rem;}
}
@media (width < 768px) {
  .page-banner{min-height: 55rem;}
}
@media (width < 576px) {
  .page-banner{min-height: 45rem;}
}

/* Footer */
footer .container > *{padding: var(--xl) 0;}
.copyright{display: flex; justify-content: center;}
.copyright img{max-width: 58rem;}
.footer-logo img{max-width: 28.6rem;}
footer .container > *{padding: var(--xl) 0;}
footer ul li{display: flex;}
footer ul li:not(:last-child){margin-bottom: 1rem;}
footer ul li a{color: var(--text-color); display: flex; line-height: 1;}
.footer-content{display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--gutter);}
@media (width < 1200px) {
  footer .container > *{padding: var(--lg) 0;}
  .copyright img{max-width: 50rem;}
  .footer-logo img{max-width: 20rem;}
  .footer-content{display: grid; grid-template-columns: repeat(3, 1fr);}
}
@media (width < 992px) {
  footer .container > *{padding: var(--md) 0;}
  .copyright img{max-width: 40rem;}
  .footer-logo img{max-width: 16rem;}
  .footer-content{display: grid; grid-template-columns: repeat(2, 1fr);}
}
@media (width < 768px) {
  .copyright img{max-width: 35rem;}
}
@media (width < 576px) {
  .copyright img{max-width: 30rem;}
  .footer-content{display: grid; grid-template-columns: 1fr;}
}

.page-headding{padding: var(--section-padding) 0;}
.page-headding + .section {
    padding-top: var(--gutter);
    padding-bottom: var(--gutter);
}
.product-details{display: grid; grid-template-columns: 1fr 1.2fr; gap: var(--gutter) var(--section-padding);}
.single-product-image{background-color: var(--off-white-color); padding: var(--gutter); display: flex; align-items: center; justify-content: center;height:100vh;}
.single-product-image img{height:100%; object-fit:cover;}
.single-product-details > li:first-child{padding-top: 0;}
.single-product-details > li:last-child{padding-bottom: 0;}
.single-product-details > li{padding: var(--gutter) 0;}
.single-product-details > li > :not(:last-child){margin-bottom: 1rem;}
.single-product-details > li:not(:last-child){border-bottom: .1rem solid #D4CBBA;}
@media (width < 992px) {
  .product-details{grid-template-columns: 1fr;}
  .single-product-image img{max-height: 50rem;}
}

/* Nice Select */
.nice-select{border-radius: 0; border-color: #707070; background-color: #F3EFE7; padding-left: var(--gutter); padding-right: 7rem; height: 5rem; display: flex; align-items: center; font-size: var(--fs-lg); font-family: var(--font-family); color: var(--text-color);}
.nice-select::after{border-bottom-width: .1rem; border-right-width: .1rem; width: .8rem; height: .8rem; border-color: var(--border-color); right: 2.4rem;}
.nice-select .list{border-radius: 0; min-width: 100%; border: 0; margin-top: .1rem; box-shadow: none; background-color: #f7f4ed;}
.nice-select .list li{padding-left: var(--gutter);}
.nice-select .option:hover, .nice-select .option.focus, .nice-select .option.selected.focus{background: none;}

/* Header */
:root{
    --header-height: 25.4rem;
}
header{position: fixed; left: 0; top: 0; width: 100%; z-index: 9999; background-color: var(--body-color); display: flex; align-items: center; height: var(--header-height); transition: var(--transition);}
header.header-scrolled{background-color: var(--off-white-color); --header-height: 10rem;}
header + *{margin-top: var(--header-height); transition: var(--transition);}
header.header-scrolled + * {--header-height: 19rem;}
header .logo img{max-height: 19.4rem; transition: var(--transition);}
header.header-scrolled .logo img{max-height: 5rem;}
header .container{display: flex; align-items: center; justify-content: space-between;}
header ul{display: flex; align-items: center; justify-content: flex-end;}
nav, header ul{gap: 1rem var(--sm);}
nav a, header ul li a{font-size: var(--fs); font-family: var(--font-family); color: var(--text-color); white-space: nowrap; display: flex; align-items: center; gap: 0 1rem;}
@media (width > 991px) {
  nav{flex: 1 0 0%; display: flex; align-items: center;}
  header ul{flex: 1 0 0%;}
  header .logo{order: 2;}
  header ul{order: 3;}
  .mobile{display: none !important;}
}
@media (width < 992px) {
  header .logo{flex: 1 0 0%;}
  .desktop{display: none !important;}
  header .logo img{max-width: 20rem;}
  nav{position: fixed; left: 0; top: 0; width: 100%; height: 100dvh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; background-color: var(--off-white-color); opacity: 0; visibility: hidden; pointer-events: none; transition: var(--transition);} 
  nav.active{opacity: 1; visibility: visible; pointer-events: auto;}
  nav a{font-size: clamp(var(--h4), 4vw, 4vw);}
  header{--header-height: 12rem;}
  header.header-scrolled{--header-height: 12rem;}
  header + * {--header-height: 12rem;}
}
@media (width < 768px) {
  header .logo img{max-width: 16rem;}
  header ul{gap: 1rem var(--gutter);}
  header, header.header-scrolled{--header-height: 10rem;}
}
@media (width < 576px) {
  header .logo img{max-width: 12rem;}

    header .logo img.desktop {
        padding-top:4rem;
    }
  header ul{gap: 1rem var(--gutter-half);}
  header ul li a{font-size: var(--fs-sm);}
}

/* Hero Scroll Slider - Start */
.mwg_effect007 .scroll {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}
.mwg_effect007 .header {
    position: absolute;
    width: 100%;
    text-align: center;
    top: 25px;
    left: 0;
    text-transform: uppercase;
}
.mwg_effect007 .pin-height {
    height:400vh;
}
.mwg_effect007 .pin-container {
    position: relative;
    height: 100vh;
    overflow: hidden; /* Hides anything exceeding the container */
}
.mwg_effect007 .circle {
    width: 300%;
    aspect-ratio: 1;
    position: absolute;
    top: 50%;
    left: -100%;
}
.mwg_effect007 .media {
    /* width: 25vw; */
    width: 35vh;
    aspect-ratio: 0.74;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%,-50%);
}

/* Hero Scroll Slider - End */

.arc-container {
    position: relative;
    height: clamp(30rem, 32vw, 52rem);
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    transform: none;
}
@media screen and (max-width:767px){
    .arc-container {
        height: clamp(28rem, 58vw, 42rem);
    }
}


.arc-item {
    position: absolute;
    left: 50%;
    bottom: 0;
    transform-origin: center bottom;
    transition: transform 0.5s ease;
    will-change: transform;
}

    .arc-item img {
        display: block;
        width: clamp(16rem, 19vw, 34rem);
        height: clamp(24rem, 28vw, 48rem);
        object-fit: cover;
    }