/***** GRID

Note using Flexbox components: the "flex-container justify-blabla" 
should be in the same col-X div in order to work properly!


****** */

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap');

:root {
  --grid-gap: 1rem;

  --bgcolor: #F4F2EC;


  --primary: #998145;
  --primaryhover: #856D31;

  --secondary: #fff;
  --secondaryhover: #f2f2f2;

  --tertiary: #1e3a8a;
  --tertiaryhover: #1e3a8a;

  --border-radius:4px;

  --space: 2rem;
}

*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


html {
  scroll-behavior: smooth;
}

body {
  margin:0;
  font-family: "Noto Sans", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
  background: var(--bgcolor);
}


.hidden-on-load {
  opacity: 0;
}



.box {
  background: var(--secondaryhover);
}

button {
  background-color: var(--secondary);
  color: var(--primary);
  border: 2px solid var(--primary);
  padding: 10px 20px;
  border-radius: var(--border-radius);
  cursor: pointer;
}


.spacer-s {
  width: 100%;
  height: 1rem;
}


.spacer-m {
  width: 100%;
  height: 2rem;
}


.spacer-l {
  width: 100%;
  height: 4rem;
}


.txt-left {
  text-align: left;
}

.txt-center {
  text-align: center;
}

.txt-right {
  text-align: right;
}




/* flex stuff */
/* Basic Flexbox Container */
.flex-container {
  display: flex;
  justify-content: flex-start; /* Default horizontal alignment */
  align-items: flex-start;     /* Default vertical alignment */
}

/* Flex Direction: Row (default) or Column */
.flex-row {
  flex-direction: row;
}

.flex-column {
  flex-direction: column;
}

/* Align Items (vertical alignment) */
.align-top {
  align-items: flex-start;
}

.align-middle {
  align-items: center;
}

.align-bottom {
  align-items: flex-end;
}

/* Justify Content (horizontal alignment) */
.justify-start {
  justify-content: flex-start;
}

.justify-center {
  justify-content: center;
}

.justify-end {
  justify-content: flex-end;
}

.justify-between {
  justify-content: space-between;
}

.justify-around {
  justify-content: space-around;
}

.justify-evenly {
  justify-content: space-evenly;
}

/* Full Height (useful for centering vertically) */
.full-height {
  height: 100vh;
}



html {
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
  overflow-x:hidden;
}


a {
    color: inherit;
    text-decoration: none;
}

a:hover {
  color: var(--primaryhover);
}


.ctabtn {
  display: inline-block;
  background: var(--primary);
  color:#fff;
  border-radius: var(--border-radius);
  padding:15px;
}

.ctabtn:hover {
  color: #fff;
  background:var(--primaryhover);
}


.lead {
  font-size: 1.2rem;
  line-height: 1.8rem;
  font-weight: 300;
  float: left;
}

/*MENU */

#menu-mobilemenu {
  list-style: none;
  padding: 0;
  margin: 0;
}


#menu-mobilemenu li  a {
  display: block;
  background: rgba(0,0,0,0.05);
  color: var(--primaryhover);
  border-radius: var(--border-radius);
  padding: 15px;
}

.mainmenu-mobile {
    display: none;
    flex-direction: column;
    background: #fff;
    position: absolute;
    top: 150px; /* adjust based on your layout */
    right: 0;
    left: 0;
    padding: 1rem;
    z-index: 999;
}




.mainmenu-mobile.menu-visible {
    display: flex;
}


.menu-item:hover .sub-menu {
  display: block;
}

.sub-menu {
  display: none;
  border:1px solid var(--primaryhover);
  background: #fff;
  position: absolute;
  z-index: 30;
  padding:10px;
  width: 250px;
  border-radius: var(--border-radius);
  list-style: none;
  left: -30px;
  margin-top: 15px;
  box-shadow: 0px 16px 37px -8px rgba(0,0,0,0.43);
-webkit-box-shadow: 0px 16px 37px -8px rgba(0,0,0,0.43);
-moz-box-shadow: 0px 16px 37px -8px rgba(0,0,0,0.43);

}

.sub-menu li {
  float: left;
  width: 100%;
  margin: 0!important;
  padding: 10px;
}



.mobmenu .sub-menu {
  display: block!important;
}


.mobmenu .sub-menu {
position: relative;
max-width: 100%;
border:none;
padding:0;
}

.mobmenu .menu-item {
  width: 100%!important;
  text-align: left;
  margin:1rem 0!important;
}

.menuwrapper {
      background: #fff;
      padding: 1rem 0;
      width: 100%;
      z-index: 1;
    }


    .mainmenu {
      list-style: none;
      margin:0;
      padding: 0;
      position: relative;
      z-index: 300;
    }

    .mainmenu li {
      float: left;
      margin: 0 1.2rem;
      padding: 1rem;
      border-radius: var(--border-radius);
      position: relative;

    }

    .mainmenu li:hover {
      background: rgba(0,0,0,0.05);
      color: var(--primaryhover);

    }


    .menu-visible li {
      text-align: center;
      margin: 0.8rem 0;

    }

    .current-menu-item {
      color: var(--primaryhover);
      border-radius: var(--border-radius);
      background: rgba(0,0,0,0.05);
    }


.mob-trigger {
  width:40px; 
  height: 40px; 
  background:var(--primary);
  border-radius: var(--border-radius);
}


    @media (max-width: 650px) {
  .mainmenu {
    display: none;
    flex-direction: column;
    position: absolute;
    top: 100px;
    left: 0;
    right: 0;
    background: white;
    padding: 1rem;
    z-index: 1000;
  }

  .mainmenu.menu-visible {
    display: flex;
  }
}



.footermenu {
  width: 100%;
      list-style: none;
      display: flex;
    justify-content: center;
    list-style: none;
    padding: 0;
    margin: 0;
    gap: 20px;
    }

.footermenu li {
      
      
    }

.footerh3 {
  margin-bottom: 2rem;
}


.sponsorbox {
  background: #fff;
  border:1px solid var(--primary);
  border-radius: var(--border-radius);
  width:100%; 
  height:100px;
  padding: 10px;
  margin-top: 20px;
  margin-bottom: 20px;
  display: flex;
    align-items: center; /* Vertically center content */
    gap: 20px; /* Space between columns */
}

.sponsorbox_small {
  background: #fff;
  border:1px solid var(--primary);
  border-radius: var(--border-radius);
  width:100%; 
  height:100px;
  padding: 10px;
  margin-top: 20px;
  margin-bottom: 20px;


}


.footerimg {
  max-width: 80%;
}
/* HEADERS */

.sectionheader {
  position: relative;
  width1:100%;
}


.sectiontitlebox {
  position:absolute; 
  bottom: 50px;
}

.sectiontitle {
  color: #fff; 
  font-size: 5rem; 
  font-weight: normal;
}



.bodyh2 {
  font-size: 1.5rem; 
  font-weight: normal;
}


.sh1 {
  background:var(--primary) url(../images/s1header.svg) no-repeat center;
  background-size: 300%;
    height: 500px;
}

.sh1child {
  background:var(--primary) url(../images/s1header.svg) no-repeat center;
  background-size: 300%;
    height: 400px;
}



.sh2 {
  background:#005F25 url(../images/s2header.svg) no-repeat center;
  background-size: 300%;
    height: 600px;
}

.sh2child {
  background:#005F25 url(../images/s2header.svg) no-repeat center;
  background-size: 300%;
    height: 400px;
}


.sh3 {
  background:#006ea1;
  background-size: 80%;
    height: 500px;
}


.sh4 {
  background:var(--primary) url(../images/s4header.svg) no-repeat right center;
  background-size: 190%;
    height: 500px;
}


.sh5 {
  background:var(--primary) url(../images/s1header.svg) no-repeat center;
  background-size: 100%;
    height: 400px;
}



.sh6 {
  background:#006ea1 url(../images/s3header.svg) no-repeat center;
  background-size: 100%;
    height: 400px;
}



.blob3 {
  display: block; width: 700px; height: auto; position: absolute; top:120px; opacity: 0.9
}


.s1image1 {
  width: 560px;
  height: auto;
  position: absolute;
  top:-25px;
  right: 50px;
  z-index: 3;
}

.s1image2 {
  width: 520px;
  height: auto;
  position: absolute;
  top:80px;
  right: 120px;
  left:0;
  margin-left:auto;
  margin-right:auto;
}


.s2image1 {
  width: 460px;
  height: auto;
  position: absolute;
  top:50px;
  right: 0;
}

.s2image2 {
  width: 560px;
  height: auto;
  position: absolute;
  top:10px;
  left:200px;
  margin-left:auto;
  margin-right:auto;
    z-index: 3;
}


.mobheader1, .mobheader2 {
    display: none;
    width: 100%;
  }



.s3blobanner {
  display: block;
    width: 90%;
    height: auto;
    position: absolute;
    top: -70px;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
}


.timelinetitle {

  color: #fff; 
  font-size: 2rem; 
  font-weight: normal; 
  float: left; 
  margin-right: 50px;
}


.roomindicator {
  display:inline-block; 
  width:15px; 
  height:15px; 
  margin-left:-25px; 
  float: left;
}


.timelinetxt {
  font-size: 1rem;
  line-height: 1.8rem;
  font-weight: 300;
  float: left;
}

.float1 {
  width: 636px;
  height: 674px;
  position: absolute;
  background: url(../images/float1.svg);
  background-size: cover;
  top:400px;
  left:-300px;

}


.sectionbody {
  position: relative;
}


.sectionspacing {
  padding-top:6rem
}



.blogcard {
  background: #fff;
  padding: 20px;
  margin-top: 20px;
  margin-bottom: 20px;
  border-radius: var(--border-radius);
}

.contentfix {
  width:50%; 
  float: left;
}


.faquestion {
  background: #fff;
  padding: 20px;
  width: 100%;
  margin-bottom: 10px;
}

.accordion {
  margin:1rem 0 2.2rem 0;
}

.accordion-toggle {
  cursor: pointer;
  background: none;
  border: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 0 ;
}

.accordion-content span {
  display: block;
  margin-top:1rem;
}

.chevron {
  display: inline-block;
  transition: transform 0.3s ease;
}

.accordion-toggle.active .chevron {
  transform: rotate(180deg);
}


.grid {
  display: grid;
   grid-template-columns: repeat(12, 1fr);
  gap: var(--grid-gap, 1rem);
  width: 100%;
  box-sizing: border-box; /* critical */
 }


.datestamp {
  display: block;
  margin: 1rem 0;
  font-style: italic;
}

/* Medium - 640px+ (md) */
@media (min-width: 650px) {
  .grid {
    grid-template-columns: repeat(12, 1fr);
  }


}

/* Column Span Classes */
[class*="col-"] {
grid-column: span 12; 
}


 /*  mobile variants for columns  */
@media (max-width: 650px) {
  .m-1 { grid-column: span 1; }
  .m-2 { grid-column: span 2; }
  .m-3 { grid-column: span 3; }
  .m-4 { grid-column: span 4; }
  .m-5 { grid-column: span 5; }
  .m-6 { grid-column: span 6;  }
  .m-7 { grid-column: span 7;  }
  .m-8 { grid-column: span 8;  }
  .m-9 { grid-column: span 9;  }
  .m-10 { grid-column: span 10;  }
  .m-11 { grid-column: span 11;  }
  .m-12 { grid-column: span 12;  }




  .sponsorbox {
    display: block;
    height: auto;
  }


  .footermenu {
    display: block;
    width: 100%;
  }


  .sectionheader {
  height: 200px;
  }


  .blob3 {
 width: 380px;  top:50px; 
}

.sectiontitlebox {
  bottom:0px;
}

  .sectiontitle {
    font-size: 2.4rem;
  }

  .sh1, .sh2 {
    padding: 2rem;
    height: auto!important;
  }

  .mobheader1, .mobheader2 {
    display: block;
  }

  .s1logo, .s1image1, .s1image2, .s2image1, .s2image2 {
    display: none;
  }

  .roomindicator {
  margin-left:0px; 
  margin-right: 100%;
  float: left;
}


.timelinetitle {
  width: 100%;
  font-size: 2.8rem; 
}


.s3blobanner {
  top: -20px;
}


.sectionspacing {
  padding-top:2rem
}


}




/* Medium and up */
@media (min-width: 650px) {
  .col-1 { grid-column: span 1; }
  .col-2 { grid-column: span 2; }
  .col-3 { grid-column: span 3; }
  .col-4 { grid-column: span 4; }
  .col-5 { grid-column: span 5; }
  .col-6 { grid-column: span 6; }
  .col-7 { grid-column: span 7; }
  .col-8 { grid-column: span 8; }
  .col-9 { grid-column: span 9; }
  .col-10 { grid-column: span 10; }
  .col-11 { grid-column: span 11; }
  .col-12 { grid-column: span 12; }
}



.container {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
  box-sizing: border-box; /* Important */
}


@media (max-width: 650px) {

  .sectionheader {
  height: 250px;
}

.mainmenu {
  display: none;
}

.menuactiongroup {
  display: none;
}


.s3blobanner {
  top: -20px;
}


}


@media (min-width: 650px) {
  .container {
    max-width: 100%;
  }



  .mmt {
    display: none;
  }


}
}

/* Large (lg) - ≥ 960px */
@media (min-width: 960px) {
  .container {
    max-width: 100%;
  }

  .mmt {
    display: none;
  }
}

/* Extra Large (xl) */
@media (min-width: 1440px) {
  .container {
    width: 100%;
    max-width: 1440px;
  }

  .mmt {
    display: none;
  }
}