:root {
      /* CSS variables for header styling */
      --header-color: #ffffff;
      --header-font-color: #656565;
      --body-bg-color: #F4FFF6;

      /* Primary and secondary colors */
      --primary-color: #315941;
      --primary-hover-color: #00712D;
      --primary-color-two:#DFF5D6;
      --primary-color-three: #dbe7db;    
      --secondary-color: #144734; 
      --third-color: #F0F1D9; 
      --fourth-color:#D5ED9F;
      --fifth-color:#F4CFAE;
      --color-primary:#303131;


       /* hover colors */
      --primary-hover-color: #F4CFAE;
      --secondary-hover-color:#315941;
      --font-color-hover-secondary:#F0F1D9;


       /* fonts colors */
      --font-color-primary: #303131;
      --font-color-subheading:#303131;
      --font-secondary-color: #00712D;
      --font-third-color: #144734;
      --font-color-counter: #F4CFAE;
      --font-color-counter-secondary: #F0F1D9;

      /* seperator color */
      --seperator-color: #D5ED9F;

      /* Padding and max-width */
      --padding: clamp(1rem,12vw,15.625rem);
      --max-width: 1728px;

      /* Button colors */
      --button-color-primary:#0ABB4A;
      --button-color-secondary:#15843F;
      --button-color:linear-gradient(to right,var(--button-color-primary),var(--button-color-secondary));


      /* Font family */
      --font-primary: 'Vancouver', sans-serif;
     
    }

    html, body {
      margin: 0 ;
      padding: 0 ;
      box-sizing: border-box;
      background-color: var(--body-bg-color);
      font-family: 'Noto Sans', sans-serif;
      overflow-x: hidden;
    }
    *, *::before, *::after {
      box-sizing: inherit;
    

    }
    a {
      text-decoration: none;
      transition: all 0.3s ease;
    }

    header {
      
      background-color: var(--header-color);
      box-shadow: 0 2px 10px rgba(0,0,0,0.1);
      position: fixed;
      width: 100%;
      top: 0;
      z-index: 999;
    }
    .site-header {
      margin: auto;
      color: var(--header-font-color);
      padding: 1rem var(--padding);
      max-width: var(--max-width);
      
    }

    .site-branding {
      flex-grow: 1;
      text-align: center;
    }
    .site-branding img {
      max-height: 60px;
      height: auto;
     
    }

    .main-navigation {
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-grow: 1;
      flex-basis: 1;
    }
    .right ul {
      width: 100%;
      margin-left: auto;
    }
    .main-menu {
      list-style: none;
      display: flex;
      justify-content: space-between;
      gap: 2.4rem;
      margin: 0;
      padding: 0;
      flex-grow: 1;
    }
    .main-menu li {
      position: relative;
    }
    .main-menu a {
      color: var(--header-font-color);
      font-weight: 500;
      white-space: nowrap;
    }

    .menu-item-has-children > a::after {
      content: '▼';
      font-size: 0.7rem;
      display: inline-block;
      transition: transform 0.5s ease;
    }
    .menu-item-has-children:hover > a::after {
      transform: rotate(180deg) translateY(10%);
    }

    .sub-menu {
      opacity: 0;
      transform: translateY(10px);
      transition: opacity 0.3s ease, transform 0.3s ease;
      will-change: opacity, transform;
      position: absolute;
      top: 100%;
      left: 0;
      background-color: var(--header-color);
      padding: 0.5rem 0;
      border-radius: 0.5rem;
      min-width: 200px;
      box-shadow: 0 8px 20px rgba(0,0,0,0.2);
      z-index: 1000;
      pointer-events: none;
    }
    .menu-item-has-children:hover > .sub-menu {
      opacity: 1;
      transform: translateY(0);
      pointer-events: auto;
    }
    .sub-menu li a {
      padding: 0.6rem 1rem;
      display: block;
      /* color: #ffffff; */
    }
    .sub-menu li a:hover::before {
      transform-origin: center;
      transform: scaleX(1);
    }

    .menu-toggle {
      display: none;
      font-size: 1.8rem;
      background: none;
      border: none;
      color: var(--header-font-color);
      cursor: pointer;
      margin-left: auto;
    }

    .mobile-menu {
      display: none;
    }
    .mobile-menu.menu-open {
      display: flex;
    }

    .menu-notification{
      right: 0;
    }
    /* Header animation */
header {

  animation: slideDown 1s ease-out forwards;
}

@keyframes slideDown {
  0% {
    transform: translateY(-100%);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

    
    @media (max-width: 1023px) {
      .main-navigation {
        width: 100%;
        flex-direction: column;
        display: none;
      }
      .main-navigation.active {
        display: flex;
        background-color: transparent;
        margin-top: 1rem;
        padding: 1rem;
        border-radius: 0.5rem;
      }
      .main-menu {
        flex-direction: column;
        width: 100%;
        gap: 0.75rem;
      }
      .sub-menu {
        position: static;
        background-color: transparent;
        box-shadow: none;
        margin-left: 1rem;
        
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease;
      }
      .sub-menu li a {
        color: var(--header-font-color);
      }
      .menu-item-has-children.open > .sub-menu {
        max-height: 500px;
      }
      .menu-toggle {
        display: block;
      }
      .site-branding img{
        margin: 0;
      }
     .sub-menu li a:hover{
      background: transparent;
     }
     
    }