/* Global / Resets */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font: inherit;
    font-size: 100%;
    text-align: center;

    
}

a {
    all: unset;
    
}

li {
    all:unset;
}

.hide {
    opacity: 0;
}

:root {
--dusty-olive: #677343ff;
/* --dusty-olive: #496029; */
--onyx: #292E24;
--dusty-olive-trans: rgba(103, 115, 67, 0);
--dusty-olive-half-trans: rgba(103, 115, 67, 0.3);
--dusty-olive-dark: rgb(76, 85, 49);
--palm-leaf: #87986A;
--dim-grey: #69626dff;
/* --bone: #d1d4c5ff; */
--bone: rgb(255, 255, 255);
--bone-half-trans: rgba(209, 212, 197, 0.514);
--bone-trans: rgba(209, 212, 197, 0);
--parchment: #f0ebe4ff;
--porcelain: #fffdf7ff;
--rust-brown: #9e461a;
--rust-brown-darker: #763514 ;
--rust-brown-half-trans: #9e461ace;
--brandy: #7b3614d9;
--haze: #54778a;

--globalRad: 2px;


--wave: polygon(100% 0%, 0% 0% , 0.00% 58.85%, 2.50% 55.76%, 5.00% 52.09%, 7.50% 48.02%, 10.00% 43.79%, 12.50% 39.63%, 15.00% 35.77%, 17.50% 32.42%, 20.00% 29.76%, 22.50% 27.96%, 25.00% 27.10%, 27.50% 27.22%, 30.00% 28.34%, 32.50% 30.38%, 35.00% 33.22%, 37.50% 36.73%, 40.00% 40.69%, 42.50% 44.89%, 45.00% 49.10%, 47.50% 53.08%, 50.00% 56.63%, 52.50% 59.53%, 55.00% 61.63%, 57.50% 62.82%, 60.00% 63.02%, 62.50% 62.23%, 65.00% 60.49%, 67.50% 57.90%, 70.00% 54.59%, 72.50% 50.76%, 75.00% 46.62%, 77.50% 42.38%, 80.00% 38.30%, 82.50% 34.58%, 85.00% 31.45%, 87.50% 29.06%, 90.00% 27.56%, 92.50% 27.03%, 95.00% 27.49%, 97.50% 28.92%, 100.00% 31.24%);

--wave2: polygon(100% 0%, 0% 0% , 0.00% 97.22%, 2.50% 96.84%, 5.00% 95.71%, 7.50% 93.89%, 10.00% 91.50%, 12.50% 88.65%, 15.00% 85.51%, 17.50% 82.24%, 20.00% 79.04%, 22.50% 76.08%, 25.00% 73.51%, 27.50% 71.49%, 30.00% 70.12%, 32.50% 69.49%, 35.00% 69.62%, 37.50% 70.50%, 40.00% 72.10%, 42.50% 74.31%, 45.00% 77.03%, 47.50% 80.09%, 50.00% 83.33%, 52.50% 86.58%, 55.00% 89.64%, 57.50% 92.35%, 60.00% 94.57%, 62.50% 96.16%, 65.00% 97.05%, 67.50% 97.18%, 70.00% 96.54%, 72.50% 95.18%, 75.00% 93.15%, 77.50% 90.59%, 80.00% 87.63%, 82.50% 84.42%, 85.00% 81.16%, 87.50% 78.02%, 90.00% 75.17%, 92.50% 72.77%, 95.00% 70.96%, 97.50% 69.83%, 100.00% 69.44%);

--wave-inverted: polygon(100% 100%, 0% 100% , 0.00% 41.15%, 2.50% 44.24%, 5.00% 47.91%, 7.50% 51.98%, 10.00% 56.21%, 12.50% 60.37%, 15.00% 64.23%, 17.50% 67.58%, 20.00% 70.24%, 22.50% 72.04%, 25.00% 72.90%, 27.50% 72.78%, 30.00% 71.66%, 32.50% 69.62%, 35.00% 66.78%, 37.50% 63.27%, 40.00% 59.31%, 42.50% 55.11%, 45.00% 50.90%, 47.50% 46.92%, 50.00% 43.37%, 52.50% 40.47%, 55.00% 38.37%, 57.50% 37.18%, 60.00% 36.98%, 62.50% 37.77%, 65.00% 39.51%, 67.50% 42.10%, 70.00% 45.41%, 72.50% 49.24%, 75.00% 53.38%, 77.50% 57.62%, 80.00% 61.70%, 82.50% 65.42%, 85.00% 68.55%, 87.50% 70.94%, 90.00% 72.44%, 92.50% 72.97%, 95.00% 72.51%, 97.50% 71.08%, 100.00% 68.76%);
}

body {
    background-color: var(--porcelain);
}

html {
  scroll-behavior: smooth;
}



@font-face {
    font-family: "habibi";
    src: url(Habibi-Regular.ttf);
}

@font-face {
    font-family: 'montserrat-italic';
    src: url(Montserrat-Italic-VariableFont_wght.ttf);
}

@font-face {
    font-family: 'montserrat';
    src: url(Montserrat-VariableFont_wght.ttf);
}

@font-face {
    font-family: 'assistant';
    src: url();
}

h1 {
    font-family: habibi;
    font-size: 3.5rem;
    color: var(--bone);
    
}

h2 {
    font-family: habibi;
    font-size: 2.5rem;
    color: var(--bone);
}

.h2-alt {
    color: var(--dusty-olive);
    font-size: 1.5rem;
}

.h2-alt-2 {
    color: var(--dusty-olive);
    font-size: 2.5rem;
}

.h2-btn {
    font-size: 1.2rem;
}

h3 {
    font-family: montserrat;
     font-size: 1.2rem;
    color: var(--bone);
    
}

.h3-alt {
    color: var(--dusty-olive);
    /* text-shadow: 1px 1px var(--bone); */
    /* background-color: var(--dusty-olive); */
}

.h3-alt-2 {
    color: var(--dusty-olive);
}

p {
    font-family: habibi;
    color: var(--dusty-olive);
    
}

.p-alt {
    font-family: habibi;
    color: var(--bone);
}

button{
    border: none;
}

/* Menu */

#menu-stick {
    z-index: 10;
    position: sticky;
    top: 0;
    /* background-color: var(--dusty-olive); */
    /* width: 64px;
    height: 64px; */
    
}

.menu-button {
    width: 64px;
    position:absolute;
    top: 30px;
    left: 30px;

    
}


.email-underline:hover {
    text-decoration: underline;
    cursor: pointer;
}

/* Hero */

.hero {
    min-height: 300px;
    padding-top: 50px;
    padding-left: 20px;
    padding-right: 20px;
    background-color: var(--dusty-olive);

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    position: relative;
}
.title-container {
    position: relative;
    /* margin-bottom: 30px; */
}

#logo-container {
    background-image: url(logo-ring.svg);
    height: 450px;
    width: 450px;
   

    background-repeat: no-repeat;
   background-size: contain;
   
   display: flex;
   justify-content: center;
   align-items: center;

   /* border: 1px solid black; */

   margin-bottom: 40px;
  
}

#header-tagline {
    position: absolute;
    bottom: 15px;
}

#header-tag-1, #header-tag-2 {
    opacity: 0;
    transition: 1s;
}

@media screen and (max-width: 576px) {
  #logo-container {
   max-width: 450px;
  }
}

#re {
    border: 2px solid var(--bone-trans);
    transition: 0.5s;
}

.wave-img-container{
    background-image: url(pexels-miroslav-glasa-2147620119-29690824.webp);
   background-repeat: no-repeat;
   background-size: cover;
    height: 275px;
    /* clip-path: var(--wave2); */
    display: flex;
    justify-content: center;
    align-items: center;
   
}

#landing-box {
    height: 200px;
    width: 90%;
    border: 2px solid var(--dusty-olive);
    background-color: var(--bone);
    
}



.wave1 {
   
    height: 80px;
    background-color: var(--dusty-olive);
    clip-path: var(--wave); 
}

.wave1-inv {
    height: 80px;
    background-color: var(--dusty-olive);
    clip-path: var(--wave-inverted);
}

#menu-button-container {
    height: 42px;
    width: 42px;
    position:absolute;
    top: 30px;
    left: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;

    

    z-index: 10;
    background-color: var(--dusty-olive);
}



#menu-button {
    position: relative;
    width: 25px;
    height: 25px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.chevron-svg {
    position: absolute; 
     transition: 0.2s;
}

#chevron-top-left {
    top:-12px;
    left: -12px;
   
}


#chevron-btm-right {
    bottom:-12px;
    right: -12px;
}



#menu-ctr {
    width: 25px;
    height: 25px;
    border: 2px solid var(--bone);
     transition: 0.5s;
     display: flex;
     justify-content: center;
     align-items: center;
     position: relative;
}

#menu-burger {
    position: absolute;
    width:42px;
    /* opacity: 1; */
    transition: 0.5s;
    z-index: 10;
}


#menu {
    opacity: 1;
    display: none;
    transition: 0.5s;
    position: absolute;
     top: 80px;
    left: 30px;
    border: 2px solid var(--dusty-olive-dark);
    border-radius: var(--globalRad);
    /* width: 200px; */
    /* height: 200px; */
    background-color: var(--bone);
    padding: 10px;

    z-index: 20;
}

.nav-link {
    font-size: 1.5rem;
    text-align: left;
    white-space: nowrap;
    margin-bottom: 10px;
    color: var(--dusty-olive-dark);
    cursor: pointer;
    transition: 0.3s;
}

.nav-link:hover {
    background-color: var(--dusty-olive-half-trans);
}

/* SECTION 1.1 */

#section-1-1{
    background-color: var(--dusty-olive);

      margin-top: 20px;
    padding-left: 5%;
    padding-right: 5%;
    padding-top: 25px;
    padding-bottom: 25px;

    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    
}



.section-1-1-img {
    width: 400px;
    max-width: 100%;
    height: auto;
    /* margin-right: 20px; */
/* border: 1px solid black; */
box-shadow: 7px 7px var(--onyx);

border-radius: var(--globalRad);
  
}

.section-1-1-txt{
    text-align: left;
    width: 600px;
padding: 10px;
    border: 2px solid var(--onyx);
    border-radius: var(--globalRad);
    box-shadow: 7px 7px var(--onyx);

   
}

#chev-bone-lrg{
    transform: scale(200%);
    padding-right: 25px;
}

#section-1-1-drophead1, #section-1-1-drophead2 {
    border: 2px solid var(--bone-trans);
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding-top: 15px;
      padding-bottom: 15px;
      padding-left: 10px;
      transition: 0.3s;

      cursor: pointer;
   
}
#section-1-1-drophead1:hover, #section-1-1-drophead2:hover {
    border: 2px solid var(--onyx);
}

#section-1-1-dropdown1, #section-1-1-dropdown2 {
    display: none;
    
    
}

#section-1-1-dropdown1.open, #section-1-1-dropdown2.open {
    display: block;
   
}

/* SECTION 1.2 */

#section-1-2{
    background-color: var(--porcelain);
}



/* SECTION 1 */

#section-1 {
    margin-top: 20px;
    padding-left: 15%;
    padding-right: 15%;
    /* background-color: red; */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /* border: 1px solid black; */
    background-image: url("43475.png");
    background-size: cover;
    margin-bottom: 50px;
   

}

#homepage-headshot {
    max-height: 250px;
    width: auto;

    margin: 25px;
    
}

#button-container {
    position: relative;
    /* border: 1px solid black; */
    width: 300px;
    height: 75px;
    display: flex;
    justify-content: center;
    align-items: center;
}

#chevron-top-left-lrg, #chevron-top-left-lrg2{
    top: 0px;
    left: 0px;
    transform: scale(200%);
}

#chevron-btm-right-lrg, #chevron-btm-right-lrg2 {
    bottom: -2px;
    right: -2px;
    transform: scale(200%);
}

#cta-btn, #cta-btn2 {
   
    background-color: var(--dusty-olive);
    padding: 15px;
    width: 280px;
    transition: 0.2s;
    cursor: pointer;
    /* font-weight: 500; */
    white-space: nowrap;
    border-radius: var(--globalRad);
    box-shadow: 5px 5px var(--onyx);
    
}

#cta-btn:hover, #cta-btn2:hover {
    box-shadow: 7px 7px var(--onyx);
}

#cta-btn:active, #cta-btn2:active {
    box-shadow: 5px 5px;
}



.acc-container {
    width: 95%;
    /* border: 1px solid black; */
}

.acc-header{
    border: 2px solid var(--dusty-olive-trans);
    
    height: 60px;

    display: flex;
    justify-content: center;
    align-items: center;

    cursor: pointer;
    margin: 5px;

    transition: 0.3s;

    position: relative;

}

.acc-header:hover {
    border: 2px solid var(--dusty-olive-half-trans);
}

.acc-chevron {
    position: absolute;
    right: 10%;
    transform: scale(150%);
}

.acc-dropdown-container {
    height: 0px;
    display: flex;
    flex-direction: column;
    visibility: hidden;
    opacity: 0;
    justify-content: center;
    align-items: center;
    /* border: 1px solid black;    */
   transition: 0.5s;
  
}

.acc-dropdown-container.expand {
    visibility: visible;
    opacity: 1;
    height: 100%;
   
     
}

#bullet-list-container {
    width: 75%;
    display: grid;
    grid-template-columns: 20px auto;
}
#bullet-list {
    text-align: left;
   
}

#what-is-dropdown {
    text-align: left;
}

/* SECTION 2 */

#section-2 {
      background-image: url("43475.png");
    background-size: cover;

    
}
#section-2-heading{
    margin-left: 15%;
    margin-right: 15%;
}
#crane-img {
    max-height: 200px;
    width: auto;
    margin: 25px;
    border-radius: var(--globalRad);
    box-shadow: 7px 7px var(--onyx) ;
}

.tile-container{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;


}

.area-tile {
    border: 2px solid var(--bone-trans);
    border-radius: var(--globalRad);
    width: 400px;
   height: 300px;
    margin: 10px;
    padding: 20px;

    transition: 0.5s;
}

 @keyframes tileScroll {
    0%{transform:scale(0.2); opacity: 0;}
    100%{}
}


 @keyframes fadeIn {
    0%{opacity: 0;}
    100%{opacity: 1;}
}

@media (prefers-reduced-motion: no-preference) {
    .area-tile, .section-1-1-img, #crane-img {
    animation: tileScroll linear both;
    animation-timeline: view();
    animation-range: 0vh 50vh;
    
    }

    
} 

@media (prefers-reduced-motion: no-preference) {
    #about-ed-container {
        animation: fadeIn linear both;
        animation-timeline: view();
        animation-range: 0vh 50vh;
    }
}

.area-tile:hover{
    border: 2px solid var(--dusty-olive);
    background-color: var(--bone-half-trans);
}

.tile-img {
    width: 50px;
}

.tile-title {
    color: var(--dusty-olive);
    font-size: 1.5rem;
    margin: 20px;
}
.tile-text {
    color: var(--dusty-olive);
    font-style: italic;
    margin: 20px;
}

/* SECTION-3 */

#section-3 {
    padding-left: 15%;
    padding-right: 15%;
    /* padding: 10px; */

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border: 2px solid var(--dusty-olive);
    background-color: var(--dusty-olive-half-trans);
}

#section-4 {
     padding-left: 5%;
    padding-right: 5%;
    background-color: var(--dusty-olive);
    padding-bottom: 25px;
}

#about-ed-container {
    display: grid;
    grid-template-columns: 49% 1% 49%;

    /* border: 1px solid black; */
}

@media screen and (max-width: 992px) {
  #about-ed-container {
    display: flex;
    flex-direction: column;

    /* border: 1px solid black; */
}
}

.about-text {
    padding: 10px;
}

#line {
    width: 1px;
    height: 100%;
    background-color: var(--bone);
}

#section-45 {
    min-height: 100px;
    background-color: var(--dusty-olive);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
}

#section-5 {
    

     /* display: grid; */
     /* display: none; */
   
   text-align: left;
}

.section-5-item {
    padding: 25px;
}

#section-6 {
     padding-left: 15%;
    padding-right: 15%;
    background-color: var(--dusty-olive);
}

/* FOOTER */

footer {
    height: 150px;
   background-color: var(--dusty-olive);
   display: flex;
   justify-content: center;
   align-items: center;
   flex-direction: column;
}