/* ===== Top-level toggle ===== */

.int-des .top-level-menu-link a {
 font-family: 'Opensans', Arial, sans-serif;
 font-weight:400;
 font-size:13px;
 text-transform:none;;
 letter-spacing:1px;
 color:#84667c;
}

.int-des .top-level-menu-link a:hover {
color:#fff;
}

div.poppins a {
font-family:"Poppins", Helvetica, Arial, Lucida, sans-serif !important;
letter-spacing:1px;
}

.slide-in-menu-container .top-level-title-link a {
font-size:16px;
font-family:"Poppins", Helvetica, Arial, Lucida, sans-serif;
color:#fff;
font-weight:400;
letter-spacing:2px;
width:100%;
transition:opacity 0.3s;

}

.slide-in-menu-container .top-level-title-link a:hover {
opacity:0.72;
}

.slide-in-menu-container .top-level-title-link {
text-align:center;
padding:10px 0;
}

.slide-in-menu-container .et_pb_column_1_tb_header {
padding-top:190px;
}


.top-toggle {
  text-align: center;
  margin-bottom: 8px;
}

.top-toggle-title {
  cursor: pointer;
  font-size: 16px;
  font-weight: 400;
  color: #fff;
  padding: 10px 0;
  letter-spacing: 2px;
  font-family: Poppins, Helvetica, Arial, Lucida, sans-serif;
  text-transform: uppercase;
  transition: color 0.3s ease, opacity 0.3s ease, padding-bottom 0.3s ease;
}

.top-toggle-title:hover {
  color: rgba(255, 255, 255, 0.72);
}

.top-toggle-title.open {
  padding-bottom: 20px;
}

.top-toggle-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease;
}

/* ===== Sub-toggle styling ===== */
.sub-toggle {
  margin-bottom: 5px;
  text-align: center;
}

.sub-toggle-title {
  cursor: pointer;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.2;
  padding: 1px 0;
  color: #fff;
  font-family: Poppins, Helvetica, Arial, Lucida, sans-serif;
  letter-spacing: 1px;
  text-transform: uppercase;
  transition: color 0.3s ease, opacity 0.3s ease;
}

.sub-toggle-title:hover {
  color: rgba(255, 255, 255, 0.72);
}

.sub-toggle-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s ease;
  padding: 5px 0;
  background: transparent;
}

.sub-toggle-content a {
  display: block;
  margin: 4px 0;
  color: #84667c;
  text-decoration: none;
  letter-spacing: 1px;
  font-size: 13px;
  opacity: 0;
  transition: opacity 0.5s ease, color 0.3s ease;
}

.sub-toggle-content a:hover {
  color: #fff;
}

.sub-toggle-content::after {
  content: "";
  display: block;
  width: 15%;
  height: 1px;
  background-color: #fff;
  margin: 30px auto 15px;
}



.sub-toggle-content.open a {
  opacity: 1;
}


div.top-toggle-content-link {
  margin-bottom: 12px;
}


.top-toggle-content-link a {
  font-size: 13px;
  color: #84667c;
  letter-spacing: 1px;
  transition: letter-spacing 0.3s ease;
}

.top-toggle-content-link a:hover {
  letter-spacing: 2px;
}


.top-level-menu-link {
  padding-bottom: 15px;

}

.top-level-menu-link a {
  text-transform: uppercase;
  color: #fff;
  font-size: 12px;
}





#slide-in-open {
  cursor: pointer;
}

.line {
  display: block;
  position: absolute;
  height: 2px;
  width: 100%;
  background: white;
  opacity: 1;
  -webkit-transition: .1s ease-in-out;
  -moz-transition: .1s ease-in-out;
  -o-transition: .1s ease-in-out;
  transition: .1s ease-in-out;
}

.line-2 {
  top: 10px;
}

.line-3 {
  top: 20px;
}

#slide-in-open.open .line-1 {
  top: 10px;
  -webkit-transform: rotate(135deg);
  -moz-transform: rotate(135deg);
  -o-transform: rotate(135deg);
  transform: rotate(135deg);
}

#slide-in-open.open .line-2 {
  display: none;
}

#slide-in-open.open .line-3 {
  top: 10px;
  -webkit-transform: rotate(-135deg);
  -moz-transform: rotate(-135deg);
  -o-transform: rotate(-135deg);
  transform: rotate(-135deg);
}

.slide-in-menu {
  left: 0 !important;
  opacity: 1 !important;
}

.slide-in-menu-container {
  -webkit-transition: all 0.5s ease !important;
  -moz-transition: all 0.5s ease !important;
  -o-transition: all 0.5s ease !important;
  -ms-transition: all 0.5s ease !important;
  transition: all 0.5s ease !important;
}





















.my-header-row {
  position: relative;
  /* anchor for absolute children */
}

.my-header-row .colour-block {
  position: absolute;
  top: -35px;
  left: 50%;
  transform: translateX(-50%);
  width: 120px;
  /* keep your custom size */
  height: 170px;
  background: rgba(106, 80, 103, 0.85);
  background: rgba(182, 162, 180, 0.9);


  z-index: 0;
  /* sits behind content */
}

.my-header-row>*:not(.colour-block) {
  position: relative;
  z-index: 1;
  /* pull logo + hamburger above the block */
}

/* Keep logo and hamburger above the colour block */
.my-header-row .et_pb_module:not(.colour-block) {
  position: relative;
  z-index: 2;
  /* higher than block */
}












/* =====================================================
   CUSTOM HEADER & MENU STYLING
   Applies only to rows with .custom-header-row
   ===================================================== */

/* ===== Header layout (vertical centring) ===== */
.custom-header-row {
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* vertical centring */
  align-items: center;
  /* horizontal centring */
  text-align: center;
  min-height: 60vh;
  /* optional, adjust if you want taller header */
  margin: auto;
}

/* ===== H1 styling ===== */
.custom-header-row h1 {
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
  line-height: 0.3;
  margin: 0;
  text-align: center;
}

/* Top line – YIF */
.custom-header-row h1 .yif,
span.yif {
  display: block;
  font-weight: 500;
  text-transform: uppercase;
  font-size: clamp(20px, 2vw, 25px);
  letter-spacing: clamp(10px, 1.5vw, 15px);
  line-height: 2.5;
}

/* Second line – page title */
.custom-header-row h1 .title {
  display: block;
  font-weight: 400;
  font-size: clamp(32px, 5vw, 50px);
  letter-spacing: clamp(8px, 2vw, 15px);
  margin-top: 0;
  line-height:1.2;
}

/* H2 styling */
.custom-header-row h2 {
  font-family: 'Literata', serif;
  font-weight: 400;
  font-size: clamp(15px, 1.5vw, 18px);
  line-height: 1.6;
  text-align: center;

}

.custom-header-row h2 {
  /*	padding-inline: clamp(10%, 1.5vw, 50%); */
}




/* Optional: fine-tune on very small screens */
@media (max-width: 480px) {
  #et-top-navigation ul#top-menu {
    gap: 0.2rem;
  }

  #et-top-navigation ul#top-menu li a {
    font-size: 15px;
    letter-spacing: 0.5px;
  }
}

/* ---- KEEP DESKTOP MENU ON TABLET & MOBILE ---- */
@media (max-width: 980px) {

  .et_pb_menu__wrap,
  .et_pb_menu__menu {
    display: flex !important;
  }

  .et_mobile_nav_menu {
    display: none !important;
    /* hides the hamburger */
  }
}

/* ---- ALLOW MENU ITEMS TO WRAP ON MULTIPLE LINES ---- */
.et_pb_menu__menu nav ul {
  flex-wrap: wrap !important;
  justify-content: center !important;
  text-align: center;
  padding: 0 20px;
  /* adds spacing either side */
}

/* ---- STYLE MENU LINKS ---- */
.et_pb_menu__menu nav ul li a {
  font-size: clamp(13px, 1.1vw, 14px);
  /* scales smoothly between 13–14px */
  line-height: 1em;
  /* roughly 2px spacing between lines visually */
  letter-spacing: 1px;
}



/* ---- CENTRE ALL CONTENT VERTICALLY IN ROW ---- */
.et_pb_row.align-center {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}

















/* ---- SLIGHTLY SMALLER TEXT ON TABLET/MOBILE ---- */
@media (max-width: 980px) {
  .et_pb_menu__menu nav ul li a {
    font-size: 13px !important;
    letter-spacing: 1px;
  }

  .et_pb_menu__menu nav ul {
    padding: 0 15px;
    /* more breathing room at smaller sizes */
  }
}


/* =====================================================
   MENU BEHAVIOUR: Keep full text menu visible at all sizes
   ===================================================== */

/* Always show desktop menu, even below Divi's breakpoint */
@media (max-width: 980px) {
  .et_mobile_nav_menu {
    display: none !important;
    /* hide hamburger */
  }


.slide-in-menu-container .et_pb_column_1_tb_header {
padding-top:100px;
}


.my-header-row .colour-block {
	height:160px;
}


  #et-top-navigation {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100%;
    text-align: center;

  }

  #et-top-navigation ul#top-menu {
    display: flex !important;
    flex-wrap: wrap;
    /* allow wrapping onto multiple lines */
    justify-content: center;
    gap: 1.2rem;
    /* spacing between links */
    padding: 0;
    margin: 10;
  }

  #et-top-navigation ul#top-menu li {
    display: inline-block !important;
    float: none !important;
  }

  #et-top-navigation ul#top-menu li a {
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
    font-size: 16px;
    letter-spacing: 1px;
    padding: 5px 8px;
  }
}