* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    scroll-behavior: smooth;
}
  
:root{
  --primary-color: #0081c7;
  --primary-color-hsl: hsl(201, 100%, 39%);
  --primary-color-hue: 201;
  --primary-color-saturation: 100%;
  --primary-color-lightness: 39%;
  --primary-color-hsl: hsl(var(--primary-color-hue), var(--primary-color-saturation), var(--primary-color-lightness));
   --primary-color-01: rgb(0, 129, 199, 0.1);
  --primary-color-02: rgb(0, 129, 199, 0.2);
  --primary-color-light-10: hsl(var(--primary-color-hue), var(--primary-color-saturation), calc(var(--primary-color-lightness) + 10%));
  --primary-color-light-20: hsl(var(--primary-color-hue), var(--primary-color-saturation), calc(var(--primary-color-lightness) + 20%));
  --primary-color-dark-10: hsl(var(--primary-color-hue), var(--primary-color-saturation), calc(var(--primary-color-lightness) - 10%));
  --primary-color-dark-20: hsl(var(--primary-color-hue), var(--primary-color-saturation), calc(var(--primary-color-lightness) - 20%));

  --secondary-color: #eb690b;
  --secondary-color-hsl: hsl(25, 91%, 48%);
  --secondary-color-hue: 25;
  --secondary-color-saturation: 91%;
  --secondary-color-lightness: 48%;
  --secondary-color-hsl: hsl(var(--secondary-color-hue), var(--secondary-color-saturation), var(--secondary-color-lightness));
  --secondary-color-light-10: hsl(var(--secondary-color-hue), var(--secondary-color-saturation), calc(var(--secondary-color-lightness) + 10%));
  --secondary-color-light-20: hsl(var(--secondary-color-hue), var(--secondary-color-saturation), calc(var(--secondary-color-lightness) + 20%));
  --secondary-color-dark-10: hsl(var(--secondary-color-hue), var(--secondary-color-saturation), calc(var(--secondary-color-lightness) - 10%));
  --secondary-color-dark-20: hsl(var(--secondary-color-hue), var(--secondary-color-saturation), calc(var(--secondary-color-lightness) - 20%));

  --primary-color-dark-10-hex: #006094;
  --primary-color-dark-20-hex: 	#003f61;
  --primary-color-light-10-hex: #00a2fa;
  --primary-color-light-20-hex: #2eb6ff;

  --secondary-color-dark-10-hex: #b95209;
  --secondary-color-dark-20-hex: #883d06;
  --secondary-color-light-10-hex: #f58432;
  --secondary-color-light-20-hex: #f8a163;


  --primary-dark: #333333;
  --primary-light: whitesmoke;

  --background-color-1: rgb(51, 51, 51); 
  --background-color-2: #222222;

  --background-color-light-1: #666666;

  --h1: bold 4rem/1em var(--main-font);
  --h2: bold 3rem/1.2em var(--main-font);
  --h3: bold 2.25rem/1.2em var(--main-font);
  --h4: bold 1.5rem/1.6em var(--main-font);
  --big: 1.25rem/1.6em var(--main-font);
  --p: 1rem/1.6em var(--main-font);
  --small: 0.75rem/2em var(--main-font);

  --margin-xxs: .25rem;
  --margin-xs: .5rem;
  --margin-s: .75rem;
  --margin-sm: .85rem;
  --margin-m: 1rem;
  --margin-xm: 1.1rem;
  --margin-l: 1.25rem;
  --margin-xl: 1.75rem;
  --margin-xxl: 2.5rem;
  --margin-xxxl: 3.5rem;

  --main-font: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

body{
  background-color: var(--background-color-1);
  font-family: var(--main-font);
}

.section-wrapper > * {
  margin: 5% auto;
  margin-bottom: 10%;
}

.section-wrapper .header-info-container,
.section-wrapper .hero-container {
  margin: 0;
}

#contactus-section-wrapper > * {
  margin-top: 4%;
}

@media screen and (max-width: 800px){
  #contactus-section-wrapper > * {
    margin-top: 4%;
  }
  
  .section-wrapper > * {
    margin: 25% 0 !important;
    margin-bottom: 10% !important;
  }
}


/* PAGE RELATED CLASSES */

.underline-dark{
  width: fit-content;
  text-decoration: underline;
  text-underline-offset: 30%;
  text-decoration-thickness: 2px;
}

.hover-underline-left,
.hover-underline-center,
.hover-underline-right{
  width: fit-content;
  position: relative;
}

.hover-underline-left::after,
.hover-underline-center::after,
.hover-underline-right::after{
  content: '';
  position: absolute;
  width: 0;
  bottom: -3px;
  height: 2px;
  background-color: var(--text-col-light);
  transition: all 0.25s ease;
}

.hover-underline-primary::after{
  background-color: var(--primary-color);
}

.hover-underline-left::after{
  left: 0;
}

.hover-underline-center::after{
  left: 50%;
}

.hover-underline-right::after{
  right: 0;
}

.hover-underline-left:hover::after,
.hover-underline-center:hover::after,
.hover-underline-right:hover::after{
  width: 100%;
}

.hover-underline-center:hover::after{
  left: 0;
}




/* PADDING */

.pd-xxl{
  padding: clamp(1.5rem, 5vw, 2.5rem);
}

.pd-xl {
    padding: clamp(1.25rem, 4.5vw, 1.75rem) !important;
}

.pd-l {
    padding: clamp(1rem, 1vw, 1.25rem);
}

.pd-m {
    padding: clamp(0.75rem, 3vw, 1rem);
}

.pd-s {
    padding: clamp(0.5rem, 2vw, 0.75rem);
}

.pd-xs {
    padding: clamp(0.25rem, 1vw, 0.5rem);
}

  /* PADDING X-AXLE */

.pd-x-xxl{
  padding-right: clamp(1.5rem, 5vw, 2.5rem);
  padding-left: clamp(1.5rem, 5vw, 2.5rem);
}

.pd-x-xl{
  padding-right: clamp(1.25rem, 4.5vw, 1.75rem);
  padding-left: clamp(1.25rem, 4.5vw, 1.75rem);
}

.pd-x-l{
  padding-right: clamp(1rem, 1vw, 1.25rem);
  padding-left: clamp(1rem, 1vw, 1.25rem);
}

.pd-x-m{
  padding-right: clamp(0.75rem, 3vw, 1rem);
  padding-left: clamp(0.75rem, 3vw, 1rem);
}

.pd-x-s{
  padding-right: clamp(0.5rem, 2vw, 0.75rem);
  padding-left: clamp(0.5rem, 2vw, 0.75rem);
}

.pd-x-xs{
  padding-right: clamp(0.25rem, 1vw, 0.5rem);
  padding-left: clamp(0.25rem, 1vw, 0.5rem);
}

  /* PADDING Y-AXLE */

.pd-y-xxl{
  padding-top: clamp(1.5rem, 5vw, 2.5rem);
  padding-bottom: clamp(1.5rem, 5vw, 2.5rem);
}

.pd-y-xl{
  padding-top: clamp(1.25rem, 4.5vw, 1.75rem);
  padding-bottom: clamp(1.25rem, 4.5vw, 1.75rem);
}

.pd-y-l{
  padding-top: clamp(1rem, 1vw, 1.25rem);
  padding-bottom: clamp(1rem, 1vw, 1.25rem);
}

.pd-y-m{
  padding-top: clamp(0.75rem, 3vw, 1rem);
  padding-bottom: clamp(0.75rem, 3vw, 1rem);
}

.pd-y-s{
  padding-top: clamp(0.5rem, 2vw, 0.75rem);
  padding-bottom: clamp(0.5rem, 2vw, 0.75rem);
}

.pd-y-xs{
  padding-top: clamp(0.25rem, 1vw, 0.5rem);
  padding-bottom: clamp(0.25rem, 1vw, 0.5rem);
}

  /* PADDING TOP */

.pd-t-xxl{
  padding-top: clamp(1.5rem, 5vw, 2.5rem);
}

.pd-t-xl{
  padding-top: clamp(1.25rem, 4.5vw, 1.75rem);
}

.pd-t-l{
  padding-top: clamp(1rem, 1vw, 1.25rem);
}

.pd-t-m{
  padding-top: clamp(0.75rem, 3vw, 1rem);
}

.pd-t-s{
  padding-top: clamp(0.5rem, 2vw, 0.75rem);
}

.pd-t-xs{
  padding-top: clamp(0.25rem, 1vw, 0.5rem);
}

  /* PADDING BOTTOM */

.pd-b-xxl{
  padding-bottom: clamp(1.5rem, 5vw, 2.5rem);
}

.pd-b-xl{
  padding-bottom: clamp(1.25rem, 4.5vw, 1.75rem);
}

.pd-b-l{
  padding-bottom: clamp(1rem, 1vw, 1.25rem);
}

.pd-b-m{
  padding-bottom: clamp(0.75rem, 3vw, 1rem);
}

.pd-b-s{
  padding-bottom: clamp(0.5rem, 2vw, 0.75rem);
}

.pd-b-xs{
  padding-bottom: clamp(0.25rem, 1vw, 0.5rem);
}

  /* PADDING RIGHT */

.pd-r-xxl{
  padding-right: clamp(1.5rem, 5vw, 2.5rem);
}

.pd-r-xl{
  padding-right: clamp(1.25rem, 4.5vw, 1.75rem);
}

.pd-r-l{
  padding-right: clamp(1rem, 1vw, 1.25rem);
}

.pd-r-m{
  padding-right: clamp(0.75rem, 3vw, 1rem);
}

.pd-r-s{
  padding-right: clamp(0.5rem, 2vw, 0.75rem);
}

.pd-r-xs{
  padding-right: clamp(0.25rem, 1vw, 0.5rem);
}

  /* PADDING LEFT */

.pd-l-xxl{
  padding-left: clamp(1.5rem, 5vw, 2.5rem);
}

.pd-l-xl{
  padding-left: clamp(1.25rem, 4.5vw, 1.75rem);
}

.pd-l-l{
  padding-left: clamp(1rem, 1vw, 1.25rem);
}

.pd-l-m{
  padding-left: clamp(0.75rem, 3vw, 1rem);
}

.pd-l-s{
  padding-left: clamp(0.5rem, 2vw, 0.75rem);
}

.pd-l-xs{
  padding-left: clamp(0.25rem, 1vw, 0.5rem);
}


  /* MARGIN */

.mr-xl{
  margin: 2rem;
}

.mr-l{
  margin: 1.25rem;
}

.mr-m{
  margin: 1rem;
}

.mr-s{
  margin: 0.6rem;
}

.mr-xs{
  margin: 0.25rem;
}

  /* MARGIN X-AXLE */

.mr-x-xl{
  margin-right: 2rem;
  margin-left: 2rem;
}

.mr-x-l{
  margin-right: 1.25rem;
  margin-left: 1.25rem;
}

.mr-x-m{
  margin-right: 1rem;
  margin-left: 1rem;
}

.mr-x-s{
  margin-right: 0.6rem;
  margin-left: 0.6rem;
}

.mr-x-xs{
  margin-right: 0.25rem;
  margin-left: 0.25rem;
}

  /* MARGIN Y-AXLE */

.mr-y-xl{
  margin-top: 2rem;
  margin-bottom: 2rem;
}

.mr-y-l{
  margin-top: 1.25rem;
  margin-bottom: 1.25rem;
}

.mr-y-m{
  margin-top: 1rem;
  margin-bottom: 1rem;
}

.mr-y-s{
  margin-top: 0.6rem;
  margin-bottom: 0.6rem;
}

.mr-y-xs{
  margin-top: 0.25rem;
  margin-bottom: 0.25rem;
}

  /* MARGIN TOP */

.mr-t-xl{
  margin-top: 2rem;
}

.mr-t-l{
  margin-top: 1.25rem;
}

.mr-t-m{
  margin-top: 1rem;
}

.mr-t-s{
  margin-top: 0.6rem;
}

.mr-t-xs{
  margin-top: 0.25rem;
}

  /* MARGIN BOTTOM */

.mr-b-xl{
  margin-bottom: 2rem;
}

.mr-b-l{
  margin-bottom: 1.5rem;
}

.mr-b-m{
  margin-bottom: 1rem;
}

.mr-b-s{
  margin-bottom: 0.6rem;
}

.mr-b-xs{
  margin-bottom: 0.25rem;
}

  /* MARGIN RIGHT */

.mr-r-xl{
  margin-right: 2rem;
}

.mr-r-l{
  margin-right: 1.25rem;
}

.mr-r-m{
  margin-right: 1rem;
}

.mr-r-s{
  margin-right: 0.6rem;
}

.mr-r-xs{
  margin-right: 0.25rem;
}

  /* MARGIN LEFT */

.mr-l-xl{
  margin-left: 2rem;
}

.mr-l-l{
  margin-left: 1.25rem;
}

.mr-l-m{
  margin-left: 1rem;
}

.mr-l-s{
  margin-left: 0.6rem;
}

.mr-l-xs{
  margin-left: 0.25rem;
}


  /* GAP */

.gap-xl{
  gap: 2.5rem;
}

.gap-l{
  gap: 1.5rem;
}

.gap-m{
  gap: clamp(0.75rem, 1vw, 1.0rem);
}

.gap-s{
  gap: 0.5rem;
}

.gap-xs{
  gap: 0.25rem;
}

.w-full{
  width: 100% !important;
}

.w-fit{
  width: fit-content;
}

.h-full{
  height: 100% !important;
}

.h-fit{
  height: fit-content;
}

/* COMPONENTS */

.section-header{
  width: fit-content;
  background-color: #444444;
  border-radius: 10px;
  padding: 20px 20px !important;
}

.section-header h2{
  position: relative;
  font-family: var(--main-font);
  font-size: calc(var(--margin-xl) + 0.1rem);
  font-weight: 500;
  color: whitesmoke;
  width: fit-content;
}

.section-header h2::after{
  content: '';
  position: absolute;
  height: 3px;
  left: 0;
}

@media screen and (max-width: 1680px){
  .section-header{
    border-radius: 8px;
    padding: 18px 18px !important;
  }
  
  .section-header h2{
    font-size: calc(var(--margin-xl) - 0.25rem);
  }

  .section-header h2::after{
    height: 2px;
  }
}

@media screen and (max-width: 1280px){
  .section-header{
    border-radius: 8px;
    padding: 12px 18px !important;
  }

  .section-header h2{
    font-size: calc(var(--margin-l) + 0.05rem);
  }
}

@media screen and (max-width: 800px){
  .section-header{
    width: 100%;
    border-radius: 8px;
    padding: 2.75% 20px !important;
  }

  .section-header h2{
    font-size: clamp(1.2rem, 3.8vw, 1.8rem);
  }

  .section-header h2::after{
    height: 3px;
  }
}

@media screen and (max-width: 500px){
  .section-header{
    border-radius: 8px;
    padding: 12px 18px !important;
  }

  .section-header h2::after{
    height: 2px;
  }
}






/* ACTIVE CLASSES */

.dropdown-trigger{
}


.dropdown-content{
  position: absolute;
  top: 100%;
  left: 0%;
  width: 100%;
  z-index: 2;

  height: 0;
  transform: translateY(-10px);
  opacity: 0;
  overflow: hidden;
  transition: all 0.3s ease;
}

.dropdown-trigger:hover + .dropdown-content,
.navlink-wrapper:hover .dropdown-content,
.dropdown-content:hover {
  pointer-events: auto;
  height: fit-content; 
  opacity: 1;
  transform: translateY(0);
}


.hero-heading {
  font-size: clamp(1.6rem, 1.4rem + 1.3vw, 3.3rem) !important; /* Reduced max and middle scaling */
}

.primary-heading {
  font-size: clamp(1.65rem, 1.45rem + 0.95vw, 2.7466rem) !important;
}

.secondary-heading {
  font-size: clamp(1.3rem, 1.1rem + 0.7vw, 2rem) !important;
}

.tertiary-heading {
  font-size: clamp(1.2rem, 1rem + 0.5vw, 1.7578rem) !important;
}

.body-text-large {
  font-size: clamp(1.05rem, 0.9rem + 0.3vw, 1.35rem) !important;
}

.body-text {
  font-size: clamp(0.95rem, 0.8rem + 0.2vw, 1.125rem) !important;
}

.body-text-small {
  font-size: clamp(0.85rem, 0.7rem + 0.175vw, 1rem) !important;
}

.small-text{
  font-size: clamp(0.7rem, 0.65rem + 0.12vw, 0.75rem);
}

.caption-text {
  font-size: clamp(0.625rem, 0.6rem + 0.09vw, 0.72rem) !important;
}