:root {
    --black: #000;
    --white: #fff;
    --orange: #f67a22;
    --gray: #2e2e2e;
    --gray-darker: #1c1c1c;
    --trans-black: rgba(0,0,0,.36);
    --gray-light:#636363;
    --gray-light-2:#ececec;
    --gray-2: #a3a3a3;
    --tan: #eceae5;
    --tan-dark: #4c4442;
    --cream: #ecdfcf;
    --green: #79955c;
    --green-dark: #3b382c;
    
}

html { scroll-behavior: smooth; scroll-padding-top: 100px; }

.text-black { color: var(--black); }
.text-white { color: var(--white); }
.text-orange { color: var(--orange); }
.text-gray { color: var(--gray); }
.text-gray-darker { color: var(--gray-darker); }
.text-trans-black { color: var(--trans-black); }
.text-gray-light { color: var(--gray-light); }
.text-tan-dark { color: var(--tan-dark); }
.text-cream { color: var(--cream); }
.text-green { color: var(--green); }
.text-green-dark { color: var(--green-dark); }

.bg-black { background-color: var(--black); } 
.bg-white { background-color: var(--white); }
.bg-orange { background-color: var(--orange); }
.bg-gray { background-color: var(--gray); }
.bg-gray-darker { background-color: var(--gray-darker); }
.bg-trans-black { background-color: var(--trans-black); }
.bg-gray-light { background-color: var(--gray-light);}
.bg-gray-light-2 { background-color: var(--gray-light-2);}
.bg-gray-2 { background-color: var(--gray-2); }
.bg-tan { background-color: var(--tan); }
.bg-tan-dark { background-color: var(--tan-dark); }
.bg-cream { background-color: var(--cream);}
.bg-green { background-color: var(--green); }
.bg-green-dark { background-color: var(--green-dark); }

.text-urw-din {font-family: "neue-haas-grotesk-text", sans-serif; line-height: 1; }
.text-proxima { font-family: "neue-haas-grotesk-text", sans-serif; line-height: 1;  }
.text-montserrat { font-family: "neue-haas-grotesk-text", sans-serif; line-height: 1; }
.text-el-messiri { font-family: "El Messiri", sans-serif;line-height: 1;}

.text-fs-13 { font-size:13px; }
.text-fs-15 { font-size:15px; }
.text-fs-17 { font-size:17px }
.text-fs-19 { font-size:19px; }
.text-fs-20 { font-size:20px; }
.text-fs-22 { font-size:22px; }
.text-fs-24 { font-size:clamp(18px, 3vw, 24px); }
.text-fs-27 { font-size:27px; }
.text-fs-29 { font-size:29px; }
.text-fs-34 { font-size:34px; }
.text-fs-35 { font-size:35px; }
.text-fs-37 { font-size:37px; }
.text-fs-50 { font-size:50px; }
.text-fs-70 { font-size:clamp(35px, 6vw, 70px); }
.text-fs-100 { font-size:clamp(30px, 6vw, 100px); }

body { font-size:19px; font-family: "minion-pro", serif; line-height: 1.5; overflow-x:hidden; font-weight:400; background-color: var(--cream);  }

p, li, div { line-height:1.5 }

.hero::after { position:absolute; content:''; z-index:1; width:100%; height:100%; top:0; left:0; right:0; bottom:0; background-color: rgba(0,0,0,.4); }

nav ul { margin: 0; padding: 0; list-style: none; position: relative;  } 
nav ul li { display: inline-block;  } 
nav a { display: block; padding: 0 10px; color: #fff; font-size: 20px; text-decoration: none; font-family: "El Messiri", sans-serif;text-transform: uppercase; -webkit-transition: all 0.5s ease;-moz-transition: all 0.5s ease;-o-transition: all 0.5s ease;transition: all 0.5s ease; } 
nav ul ul { opacity:0; position: absolute; top: 40px; -webkit-transition: all 0.5s ease;-moz-transition: all 0.5s ease;-o-transition: all 0.5s ease;transition: all 0.5s ease;     background: rgba(0,0,0, .8); padding: 1rem;  } 
nav ul li:hover > ul { display:inherit;  top: 30px; opacity:1; } 
nav ul ul li { width: 200px; float: none; display: list-item; position: relative; margin-bottom:5px; } 
nav ul ul ul li { position: relative; top:-60px; left:200px;  } 
nav ul ul a { font-size:13px; }
nav a:hover, nav ul ul ul a { color: #fff } nav ul ul li:hover > ul { display:inherit; }

.fade-in { opacity:0; }
.mobile-overlay-wrapper { opacity:0; position:fixed; top:0; left:0; right:0; bottom:0; background-color: rgba(0,0,0,.9); 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:#fff; 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(--orange); }
.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: #fff; 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 { position:fixed; top:0; left:0; right:0; width:100%; z-index:100; -webkit-transition: all 0.5s ease;-moz-transition: all 0.5s ease;-o-transition: all 0.5s ease;transition: all 0.5s ease; background: transparent; }
header::before { content:''; width:100%; height: 100%; position:absolute; top:0; left:0; right:0; background: #000000; background: linear-gradient(180deg, rgba(0, 0, 0, 0.93) 7%, rgba(0, 0, 0, 0) 100%); z-index:50; }
header nav, header img { position:relative; z-index: 55;}
.object-fit-cover { width:100%; height:100%; object-fit: cover; }
.hero-image { opacity: .55; }
.index-page-type .hero { position:relative; height: 685px; overflow: hidden;}
.inner-page-type .hero { position:relative; height: 511px; overflow: hidden;}

.index-page-type .hero-text { position:absolute; top:55%; left:0; transform: translateY(-50%); z-index:10; width: 100%; padding:0 60px; }
.index-page-type .hero-text h2 { font-size:clamp(50px, 6vw, 110px);  line-height: 1;}
.inner-page-type .hero-text { position:absolute; top:59%; left:50%; transform: translate(-50%, -50%); z-index:10; width: 100%; padding:0 30px; text-align: center; }
.main-logo { width:330px; -webkit-transition: all 0.5s ease;-moz-transition: all 0.5s ease;-o-transition: all 0.5s ease;transition: all 0.5s ease; }
.btn-orange { display: inline-block; background: var(--orange) url(../img/icon-lotus.png) 15px 50% no-repeat; color:var(--white); font-size:19px; border-radius:.25rem; padding:.75rem 1.5rem .70rem 3.5rem;  text-decoration:none; font-family: "urw-din", sans-serif; text-transform: uppercase; font-weight: 400; font-family: "El Messiri", sans-serif; }
.btn-trans-black { display: inline-block; background-color: var(--trans-black); color:var(--white); font-size:17px; border:1px solid var(--white); padding:.70rem 3rem;  text-decoration:none; font-family: "urw-din", sans-serif; text-transform: uppercase; font-weight: 400;}
.shadow-lg  {box-shadow: 0 1rem 3rem rgba(0,0,0,.7)!important }
.box-orange { background-color: var(--tan);  padding:2.5rem 4rem; color:var(--tan-dark);  box-shadow: 0 .5rem 2rem rgba(0,0,0,.3)!important; width:142%; position:relative; z-index:1; border-radius: 1rem; }
.shifted-left { margin-left:-40%; }

.box-orange h2 { font-size: clamp(30px, 4vw, 45px); font-family: "El Messiri", sans-serif;  line-height: 1; }
.box-image { height:550px; border-top-right-radius: 1.5rem; border-bottom-right-radius: 1.5rem; overflow: hidden; }
.order-lg-2 .box-image { border-top-right-radius: 0rem; border-bottom-right-radius: 0rem;  border-top-left-radius: 1.5rem; border-bottom-left-radius: 1.5rem; }
.inner-page-type .box-image { height:500px }
.inner-page-type .box-image.h-600 { height:600px; }
.inner-page-type .box-image.h-700 { height:700px; }
.bx-wrapper { box-shadow:none; border:none; background-color: transparent; margin:auto; }
.bx-slider-heading { height:60px; background-color: var(--green); color: var(--white); font-size:16px; font-family: "El Messiri", sans-serif; line-height: normal; text-transform: uppercase; display: flex; align-items: center; padding:0 1rem; margin:0; border-top-right-radius: 1rem; border-top-left-radius: 1rem; line-height: 1;}

.bx-slider-button { width:60px; height:60px; display:flex; align-items: center; justify-content: center; }

footer { background-color: var(--green-dark); color: var(--white); font-size:17px; padding:90px 30px; }
.circle-white { width:50px; height:50px; border-radius: 100px; background-color: var(--white); display:flex; align-items: center; justify-content: center; }
.circle-orange { width:50px; height:50px; border-radius: 100px; background-color: var(--orange); display:flex; align-items: center; justify-content: center; }
footer a { color:var(--white); text-decoration: none;}
.social-legal-wrapper { height:170px; }

body.scrolled header { background-color: var(--gray-darker);}
body.scrolled .main-logo { width:200px; }
body.scrolled nav a { font-size: 16px; }

/* section { overflow:hidden; } */

.hide-bottom-border-on-desktop { border-bottom-color:var(--gray) !important; }
.shift-up { margin-top:-40px; margin-bottom:40px;  }
.form-control { background-color:var(--gray-light-2); font-size:18px; font-family: "proxima-nova", sans-serif; line-height: 1; }
.form-control::placeholder { color: #999; }
.footer-hero { height:371px; position:relative; }
.footer-hero img { opacity:.5}
.footer-hero h2 { position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); z-index:1; width:100%; text-align:center; padding:0 1rem; }
.mw-450 { max-width: 450px; }
.mw-500 { max-width: 500px; }
.mw-990 { max-width: 990px; }
.border-bottom-orange { border-bottom: 5px solid var(--orange); }
.team-circle { max-width:300px; max-height:300px; border-radius: 100%; overflow: hidden; border: 1px solid #e4e4e4;}
.box-orange .btn-orange { border:1px solid var(--white) !important; }

@media (max-width:1280px){
    .box-orange { width:175%; }
    .shifted-left { margin-left:-72%; }
}

@media (max-width:990px){
    .social-legal-wrapper { height:auto }
    body { font-size:16px; }
    .box-image, .inner-page-type .box-image, .inner-page-type .box-image.h-600, .inner-page-type .box-image.h-700 { height:auto }
    .box-orange { width:100%; padding:2rem; }
    .shifted-left { margin-left:auto; }
    .main-logo { width:200px; }
    .index-page-type .hero, .inner-page-type .hero { height:400px; }
    .mobile-trigger { display:block; }
    .hero-text { width:100%; padding:30px; text-align:center; top:60%; left:50%; transform:translate(-50%, -50%);  }
    .shift-up { margin:auto;  }
    .has-borders .border-end, .has-borders .border-start { border-right:none !important; border-left:none !important; }
    .hide-bottom-border-on-desktop { border-bottom-color:var(--white) !important; }
    .index-page-type .hero-text { width:100%; }
    .text-fs-50 { font-size:35px; }
    .order-lg-2 .box-image, .box-image { border-top-left-radius: 1rem; border-top-right-radius: 1rem; border-bottom-left-radius: 0; border-bottom-right-radius: 0;}
    .box-orange { border-top-left-radius: 0rem; border-top-right-radius: 0rem; border-bottom-left-radius: 1rem; border-bottom-right-radius: 1rem; }
}
