:root {
    --white: #fff;
    --black: #000;
    --red: #e73842;
    --cream: #f6f5f1;
    --gray-dark-faded: #282828;
    --gray-dark: #181818;
    --teal-dark: #233437;
    --gray-light: #d0d0d0;
    --blue-light: #cde9f4;
    --cream: #f6f5f1;
    --cream-dark: #e2dbcf;
}

.text-montserrat { font-family: "Montserrat", sans-serif; font-optical-sizing: auto;font-weight: 300; font-style: normal; }
.text-nunito { font-family: "Nunito", sans-serif; font-optical-sizing: auto; font-weight: 300; font-style: normal; }
.text-roboto { font-family: "Roboto", serif; font-weight: 400; font-style: normal; }

.bg-white { background-color: var(--white);}
.bg-black { background-color: var(--black);}
.bg-red { background-color: var(--red);}
.bg-cream { background-color: var(--cream); }
.bg-gray-dark-faded { background-color: var(--gray-dark-faded);}
.bg-gray-dark { background-color: var(--gray-dark);}
.bg-teal-dark { background-color: var(--teal-dark);}
.bg-blue-light { background-color: var(--blue-light); }
.bg-cream { background-color: var(--cream); }
.bg-cream-dark { background-color: var(--cream-dark);}

.text-white { color: var(--white);}
.text-black { color: var(--black);}
.text-red { color: var(--red);}
.text-cream { color: var(--cream); }
.text-gray-dark-faded { color: var(--grey-dark-faded);}
.text-gray-dark { color: var(--grey-dark);}
.text-teal-dark { color: var(--teal-dark);}
.text-gray-light { color: var(--gray-light);}
.text-blue-light { color: var(--blue-light); }
.text-cream { color: var(--cream); }

body { background-color:var(--white); font-size:18px; font-family: "Nunito", sans-serif; font-optical-sizing: auto; font-weight: 400; font-style: normal; }
nav {  } 
nav ul { margin: 0; padding: 0; list-style: none; position: relative;  } 
nav ul li { display: inline-block; margin-right:1rem;  } 
nav ul li a { display: block; padding:10px; color: var(--red); font-size: 18px; text-decoration: none; font-family: "Montserrat", sans-serif; font-weight: 500;} 
nav ul ul { opacity:0; position: absolute; top: 40px; background:var(--red); padding: 1rem;  } 
nav ul li:hover > ul { display:inherit;  opacity:1; } 
nav ul li:hover { background-color: var(--red); }
nav ul li:hover a { color:var(--white) !important } 
nav ul ul li { width: 200px; float: none; display: list-item; position: relative; margin-bottom:5px; } 
nav ul li:hover a { color:var(--red) }
nav ul ul li a { font-size:13px; padding:0; border-bottom:0 !important; color:var(--white) !important; } 
nav ul ul li:hover a { font-size:13px; padding:0;  border-bottom:0 !important;  }

.fade-in { opacity:0; }
.mobile-overlay-wrapper { opacity:0; position:fixed; top:0; left:0; right:0; bottom:0; background-color:var(--cream); z-index:-1; display:flex; align-items:center; justify-content: center; text-align: center; -webkit-transition: all 0.5s ease;-moz-transition: all 0.5s ease;-o-transition: all 0.5s ease;transition: all 0.5s ease; }
.mobile-overlay-wrapper > li { margin-bottom:1rem; }
.mobile-overlay-wrapper a  { color:var(--red); text-decoration: none; font-size:27px; }
.mobile-overlay-wrapper a.order-online-link { font-size:20px; display:inline-block; margin-top:.5rem;  }
.mobile-dropdown { display:none; }
.mobile-dropdown a { font-size:20px; color: var(--purple-faded); }
.mobile-trigger { cursor:pointer; width:40px; height:20px; position:fixed; top:40px; right:30px; z-index:1005;  display:none; }
.mobile-trigger span { width:100%; display: block; background-color: var(--red); height:2px; margin-bottom:5px; border-radius: .25rem; -webkit-transition: all 0.5s ease;-moz-transition: all 0.5s ease;-o-transition: all 0.5s ease;transition: all 0.5s ease;}
body.open .mobile-trigger span:nth-child(3) { display:none; }
body.open .mobile-trigger span:nth-child(1) { transform:rotate(45deg) }
body.open .mobile-trigger span:nth-child(2) { transform:rotate(-45deg); margin-top:-7px; }
body.open .mobile-overlay-wrapper { opacity: 1; z-index:1000; }

header {  background-color: rgba(255, 255, 255, 0); display:flex; align-items:center; height:90px; position:fixed; top:0; left:0; width:100%; z-index:1000; -webkit-transition: all 0.5s ease;-moz-transition: all 0.5s ease;-o-transition: all 0.5s ease;transition: all 0.5s ease; }
.scrolled header { background-color: rgba(255, 255, 255, 1); }


h2 { font-size:40px; font-family: "Montserrat", sans-serif; font-optical-sizing: auto;font-weight: 400; font-style: normal; }
.opacity-0 { opacity: 0;}
.btn-black { font-size:18px; font-family: "Nunito", sans-serif; font-optical-sizing: auto; font-weight: 500; font-style: normal; display: inline-block; padding:10px 20px; background-color: var(--black); color: var(--white); text-decoration: none; text-transform: uppercase; }

.text-fs-13 { font-size:13px; }
.text-fs-14 { font-size:14px; }
.text-fs-15 { font-size:15px; }
.text-fs-16 { font-size:16px; }
.text-fs-18 { font-size:18px; }
.text-fs-20 { font-size:20px; }
.text-fs-24 { font-size:24px; }
.text-fs-25 { font-size:25px; }
.text-fs-36 { font-size:36px; }
.text-fs-50 { font-size:50px; }
.text-fs-77 { font-size:77px; }
.text-fs-90 { font-size:90px; }

.slide { position:relative; }
#slide-1 .slide-text { position:absolute; bottom:70px; left:80px; width: 45%; z-index: 5; }
#slide-1::after { content:''; position:absolute; bottom:0; left:0; width:100%; background: rgb(0,0,0); background: linear-gradient(11deg, rgba(0,0,0,0.8127844887955182) 0%, rgba(0,0,0,0) 62%); height:100%; z-index:1; }
.mw-60 { max-width: 60%;}
.mw-70 { max-width: 70%;}

.text-bold-700 { font-weight: 700;}

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

footer a { text-decoration: none; color: var(--purple); font-family: "Nunito", sans-serif; }
footer .form-wrapper { border-bottom:2px solid var(--white); }
footer .form-wrapper button { letter-spacing: .09rem; display: flex; align-items:center; padding-right:1rem; }

.home-section .home-link, 
.about-section .about-link,
.brands-section .brands-link,
.products-section .products-link,
.get-in-touch-section .get-in-touch-link,
.contact-section .contact-link { color: var(--black); }

.hero { position:relative; background-color: var(--blue-light); }
.hero-text { position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); z-index:10; text-align:center; width:90%; }
.hero-text h2 { font-size:50px;  font-family: "Montserrat", sans-serif; font-optical-sizing: auto;font-weight: 300; font-style: normal; }
.hero-text p { font-size:18px;  font-family: "Montserrat", sans-serif; font-optical-sizing: auto;font-weight: 300; font-style: normal; }

.hero.bg-cream-dark { background-color: var(--cream-dark);}

.about-page .has-timeline { padding-bottom:300px; } 
.about-page .timeline-rule { background:var(--black); height:4px; display:flex; align-items:center; justify-content:space-between; }
.about-page .point { position:relative; margin-top:22px; font-size:15px; font-weight:600; cursor:pointer; }
.about-page .point span { display:block; background:var(--black); width:12px; height:12px; border-radius:100px; margin:auto; }
.about-page .point.first-item span { margin:auto auto auto 0; }
.about-page .point.last-item span { margin:auto 0 auto auto; }
.about-page .point-details { display:none; position:absolute; height:100px; left:50%; transform:translateX(-50%); bottom:-125px; width:200px; z-index: 5; }
.about-page .point:hover .point-details { display:block }
.about-page .point:hover span { background-color:var(--red)}

.get-in-touch { position:relative; height:409px; width:100%; }

.about-page .mobile-timeline-wrapper { border-left:4px solid var(--red); padding-left:20px; }
.about-page .circle { display:block; background:var(--red); width:12px; height:12px; border-radius:100px; margin:auto;  position:absolute; left:-28px; top:4px;}

.brand-wrapper { height:345px; display:flex; align-items:center; justify-content:center; }
.brand-wrapper img { max-width:65%;  }

.products-page .hero-logos { position:absolute; bottom:30px; left:50%; transform:translateX(-50%); z-index:5; width:100%; text-align:center;   }
.products-page .product-image-wrapper { height:370px; display:flex; align-items:center; justify-content:center; border:1px solid var(--gray-light); padding:2rem;  }
.products-page .product-image-wrapper img, .product-detail-page .product-image-wrapper img { width:100%; }

.product-detail-page .product-image-wrapper { height:280px; display:flex; align-items:center; justify-content:center; border:1px solid var(--gray-light); padding:2rem;  }


@media (max-width:990px){
    .mobile-trigger { display:block; }
    .sm-mw-90 { max-width: 90%;}
    .hero { height:400px; }
    .hero-text { top:55%; }
    .hero img { width:100%; height:100%; object-fit:cover; }
    .hero-text h2 { font-size:30px; }
    .about-page .has-timeline { padding-bottom:20px; }
    .products-page .product-image-wrapper, .product-detail-page .product-image-wrapper  { height:auto; padding:2rem; }
    .text-fs-sm-30 { font-size:30px; }

}