body {
  margin: 0 auto;
  font-size: 16px;
  font-style: normal;
}

/* ----Variables---- */

:root {
  /* COLUMNS */
  --col-1: 8.33%;
  --col-2: 16.66%;
  --col-3: 25%;
  --col-4: 33.33%;
  --col-5: 41.66%;
  --col-6: 50%;
  --col-7: 58.33%;
  --col-8: 66.66%;
  --col-9: 75%;
  --col-10: 83.33%;
  --col-11: 91.66%;
  --col-12: 100%;

  /* SIZES */
  --xxxs: 5px;
  --xxs: 10px;
  --xxs-2: 15px;
  --xs: 20px;
  --sm: 30px;
  --md: 40px;
  --lrg: 50px;
  --xl: 60px;
  --xxl: 70px;
  --xxxl: 100px;

  --sm-margin: 15px;
  --lrg-margin: 145px;

  /* COLOURS */

  /* Primary */
  --Primary-Pastel-Blue: #c9dee4;
  --Primary-Sea-Blue: #007099;

  /* Mono */
  --Mono-Almost-Black: #2e2e2e;
  --Mono-Dark-Grey: #666666;
  --Mono-Mid-Grey: #cccccc;
  --Mono-Light-Grey: #eeeeee;
  --Mono-Lightest-Grey: #f6f6f6;
  --Mono-White: #fff;

  /* Shades */
  --Shades-Sea-Turq-1: #004a80;
  --Shades-Sea-Turq-2: #00386b;
  --Shades-Sea-Turq-3: #002332;

  /* Gradients */
  --Gradients-Logo: linear-gradient(90deg, #c9dbe4 0.15%, #006e99 100.08%);
  --Gradients-Radial-Dark: radial-gradient(
    705.69% 185.71% at 49.71% 48.89%,
    #00386b 9%,
    #001924 60.5%
  );
  --Gradients-Radial-Light: radial-gradient(
    371.11% 97.66% at 49.71% 48.89%,
    #e4f3f8 9%,
    #c9dde4 100%
  );
  --Gradients-Linear-Light: linear-gradient(61deg, #fff 4.22%, #c9dee4 70.08%);

  /* UI */
  --UI-Link: #426fe0;
  --UI-Focus: #f9d75d;
  --UI-Error: #d84747;
  --UI-Success: #3c9734;
}





@media (min-width:1024px) and (max-width:1440px) {
  
  :root {
    --lrg-margin: 115px;
  }
}
 
@media (min-width:1440px) and (max-width:1920px) {
  :root {
    --lrg-margin: 225px;
  }

  }

  




/* ----Text Styles---- */

h1 {
  font-size: 44px;
  line-height: 115%; /* 50.6px */
}

h2 {
  font-size: 38px;
  line-height: 125%; /* 47.5px */
}

h3 {
  font-size: 28px;
  font-weight: 600;
  line-height: 125%;
}

h4 {
  font-size: 24px;
  line-height: 130%; /* 31.2px */
}

h5 {
  font-size: 22px;
  line-height: 140%; /* 30.8px */
}

h6 {
  font-size: 20px;
  line-height: 140%; /* 28px */
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--Shades-Sea-Turq-3);
  font-family: "Crimson Pro";
  margin: 0;
  font-weight: 500;
}

p {
  font-family: Lato;
  font-size: 16px;
  font-weight: 400;
  line-height: 140%;
  margin: 0;
}

a {
  text-decoration: none;
  font-weight: 500;
  color: var(--UI-Link);
  margin: 0;
}

/* a:hover {
  text-decoration: none;
  color: var(--Primary-Sea-Blue);
} */

ul {
  margin: 0;
  padding: 0;
}

/* ----Global Elements---- */

header {
  display: flex;
  height: auto;
  padding-top: var(--xxs);
  padding-bottom: var(--xxs);
  justify-content: space-between;
  align-items: center;
  align-self: stretch;
  flex-direction: row;
  flex-wrap: wrap;
  row-gap: var(--xs);
  position: fixed;
width:100%;
  background-color: var(--Mono-White);
  z-index: 1000;
}

header ul {
  display: flex;
  height: auto;
  justify-content: flex-start;
  align-items: center;
  align-self: stretch;
  flex-direction: row;
  flex-wrap: wrap;
  row-gap: var(--xxs-2);
  column-gap: var(--sm);
  list-style-type: none;
  padding-right: var(--lrg-margin);
}

header ul li {
  display: flex;
  justify-content: center;
  align-items: center;
}

header ul li a {
  color: var(--Mono-Mid-Grey);
  font-family: "Axios Pro";
  font-size: 12px;
  line-height: 140%; /* 25.2px */
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 4px;
}

header ul li a:hover {
  text-decoration: underline;
  color: var(--Primary-Pastel-Blue);
}

#logo {
  width: auto;
  height: auto;
  padding-left: var(--lrg-margin);
}



/* ----Atoms---- */

button {
  display: flex;
  padding: var(--xxs) var(--sm);
  justify-content: center;
  align-items: center;
  gap: var(--xxs);
  border-radius: var(--xxxl);
font-size: 16px;
font-style: normal;
font-weight: 500;
line-height: 140%;
}

.button-primary {
background: var(--Gradients-Radial-Light);
border:2px solid transparent;
}


button a {
text-decoration: none !important;  
}


/* .button-primary:hover {
    background: none;
    border: 2px solid var(--Primary-Pastel-Blue);
    color: var(--Primary-Pastel-Blue);
} */


.button-secondary {
  background: var(--Gradients-Radial-Dark);
border:2px solid transparent;
color: var(--Primary-Pastel-Blue);
}

/* .button-secondary:hover {
  background: none;
  border: 2px solid var(--Shades-Sea-Turq-3);
  color: var(--Shades-Sea-Turq-3);
} */

/* ----Main components---- */


/* BACKGROUND AUDIO */
#muteButton {
 padding:0;
 background: none;
 border-radius:0;
 border:0;
 color: var(--Primary-Pastel-Blue); 
 text-decoration: underline;
 font-size: 14px;
 text-align: center;
 opacity: 0.5;
}

/* HERO */
.hero {
  display: flex;
  height: 80vh;
  padding: 0px 0px var(--md) var(--lrg-margin);
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  gap: var(--xxs);
  align-self: stretch;
  background: url(/assets/hero.png) lightgray 50% / cover no-repeat;
  min-height: min-content;
}

.hero-intro {
  display: flex;
  width: var(--col-4);
  padding: var(--md);
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sm);
  border-radius: 5px;
  background: rgba(0, 35, 50, 0.6);
}

.hero-intro-text {
    gap: var(--xs);
    display: flex;
    flex-direction: column;
}

.hero-intro-text h1 {
  color: var(--Primary-Pastel-Blue);
}

.hero-intro-text p {
  color: white;
}


/* HERO VIDEO */


.fullscreen-video-container {

  position: relative;
 height: 100vh; 
width:100%;
overflow: hidden;
   display: flex;
 justify-content: center;
align-items: flex-end;
padding-bottom: 3%;

}

.fullscreen-video-container video {
 position: absolute;
width: auto;
  height: auto;
  min-width: 100%;
  min-height: 100%;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  z-index : -1;

}

.fullscreen-video-content {
margin-left:var(--lrg-margin);

} 


        .play-button {
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          background-color: rgba(0, 0, 0, 0.7);
          color: white;
          padding: 20px;
          border-radius: 50%;
          font-size: 36px;
          cursor: pointer;
          display: flex;
          justify-content: center;
          align-items: center;
          transition: background-color 0.3s ease;
      }

      /* .play-button:hover {
          background-color: rgba(0, 0, 0, 0.9);
      } */

      /* Hidden button when video is playing */
      .hidden {
          display: none;
      }


/* BLOCK INTRO TEXT */

.block-intro-text {
  row-gap: var(--xs);
  display: flex;
  flex-direction: column;
}

.block-intro-text-lrg {
  width: var(--col-8);
  row-gap: var(--xs);
  display: flex;
  flex-direction: column;
}

.block-intro-text-md {
  width: var(--col-6);
  row-gap: var(--xs);
  display: flex;
  flex-direction: column;
}

.block-intro-text-sm {
  width: var(--col-4);
  row-gap: var(--xs);
  display: flex;
  flex-direction: column;
}


/* TEXT COLUMN BLOCK */

.video-block {
  display: flex;
  padding: var(--xxl) var(--lrg-margin) var(--xxxl) var(--lrg-margin);
  flex-direction: column;
  align-items: center;
  gap: var(--xl);
  align-self: stretch;
  background: var(--Mono-Lightest-Grey);
  text-align: center;
}

.video-container {
  display: flex;
  width: var(--col-8);
  /* padding: var(--lrg) var(--sm); */
  flex-direction: column;
  align-items: center;
  row-gap: var(--xs);
  text-align: center;
  border-radius: 5px;
  overflow-wrap: anywhere;
  /* align-self: stretch; */
  align-self: center;
}

.youtube-video {
  aspect-ratio: 16 / 9;
  width: 100%;
}


/* ICON BLOCK  */
.icon-block {
  display: flex;
  padding: var(--xxl) var(--lrg-margin);
  flex-direction: column;
  align-items: center;
  gap: var(--Large-xl, 65px);
  align-self: stretch;
  background: var(--Shades-Sea-Turq-3);
  text-align: center;
  color: var(--Mono-Mid-Grey);
}

.icon-block h2 {
  text-align: center;
  color: var(--Primary-Pastel-Blue);
}

.icon-block-items {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  align-content: flex-start;
  column-gap: var(--xxs-2);
  row-gap: var(--lrg);
  align-self: stretch;
  flex-wrap: wrap;
  color: var(--Primary-Sea-Blue);
}



.icon-block-item:nth-child(2) {
  color: var(--Mono-White);
  border-right: 1px solid var(--Primary-Pastel-Blue);
  border-left: 1px solid var(--Primary-Pastel-Blue);
  padding: 0 var(--xxs-2);
}

.icon-block-item {
  display: flex;
  width: var(--col-3);
  padding-right: var(--md);
  flex-direction: column;
  align-items: center;
  gap: var(--sm);
  text-align: center;
}

.icon-block-item h4 {
  color: var(--Mono-White);
}

.icon-block-item img {
  height:50px;
}

/* TEXT COLUMN BLOCK */

.text-column-block {
  display: flex;
  padding: var(--xxl) var(--lrg-margin) var(--xxxl) var(--lrg-margin);
  flex-direction: column;
  
  align-items: center;
  gap: var(--xl);
  align-self: stretch;
  background: var(--Mono-White);
  text-align: center;
}


.text-columns {
  display: flex;
  justify-content: center;
  align-items: center;
  align-content: flex-start;
  column-gap: var(--sm);
  row-gap: var(--lrg);
  align-self: stretch;
  flex-wrap: nowrap;
}

.text-column {
  display: flex;
  /* width: var(--col-3); */
  padding: var(--lrg) var(--sm);
  flex-direction: column;
  align-items: center;
  row-gap: var(--xs);
  text-align: center;
  border-radius: 5px;
  background: var(--Mono-Lightest-Grey);
  overflow-wrap: anywhere;
  align-self: stretch;
}

.text-column h4 {
  font-size: 38px;
}


/* FORM BLOCK */

.form-container {
  
  display: flex;
  padding: var(--xxl) var(--lrg-margin);
  align-items: flex-start;
  gap: var(--sm);
  align-self: stretch;
  justify-content: space-between;
  background-color: var(--Primary-Pastel-Blue);


}


.form-container form {
  display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--xs);
width:var(--col-6);
}



.form-container form input , select , textarea{
  display: flex;
  padding: var(--xs);
  align-items: flex-start;
  gap:var(--xxs);
  gap: var(--xxs-2);
  background-color: rgb(246 246 246 / 40%);
  border: 0;
  font-style: italic;
  font-family: 'Lato';
  font-size: 16px;
  color: var(--Mono-Dark-Grey);
  border-radius: var(--xxs);
  }
 
  

  .form-container form input::placeholder , select {
  font-size: 16px;
  line-height: 1.5em;
  color: var(--Mono-Dark-Grey);  
  }

 

.form-container form input[type=textarea] {
padding: var(--xxs) var(--xxs) var(--lrg-margin) var(--xxs);

}

.form-container form .form-field {
 width:100%;
 display: flex;
  flex-direction: column;
  gap:var(--xxs);

  }


  .form-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--xs);
    width:var(--col-4);
  }

label {
display: none;
}

/* Remove focus outline for all elements */
*:focus {
  outline: none !important;
}



        .submit-btn {
          display: flex;
          padding: var(--xxs) var(--sm);
          justify-content: center;
          align-items: center;
          gap: var(--xxs);
          background: var(--Gradients-Radial-Dark);
          border-radius: var(--xxxl);
          font-size: 16px;
          font-style: normal;
          font-weight: 500;
          line-height: 140%;
          border:2px solid transparent;
          }
        
    
        /* Unclear placeholder text */
        .form-field input::placeholder {
            font-style: italic;
            color: #666;
        }
        .form-field textarea::placeholder {
            font-style: italic;
            color: #666;
        }
        /* Style for the pop-up overlay */
        .overlay {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            z-index: 9999;
        }
        .popup {
            background-color: #fff;
            padding: 20px;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            border-radius: 5px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
            display: flex;
            flex-direction: column;
            gap: 30px;
        }


        .popup-buttons {
          display:flex;
          flex-direction: row;
          justify-content: space-between;
        }
      
        
        .popup button {
          color: var(--Mono-Mid-Grey);
          font-family: "Axios Pro";
          font-size: 12px;
          line-height: 140%; /* 25.2px */
          text-decoration: none;
          text-transform: uppercase;
          letter-spacing: 4px;
          border-radius: none;
          border:none;
          background: none;
          padding:0;
        }

        .switch button {
          color: var(--Primary-Pastel-Blue);
        }
    
        
       .popup button:hover {
          text-decoration: underline;
          color: var(--Mono-Mid-Grey);
        }


/* ----Mobile styles---- */

@media screen and (max-width: 996px) {
 
 /* HEADER */
 
  header {
    padding: var(--xs) var(--xxs-2);
  }

  #logo {
    width: 60px;
    height: 60px;
  }



  /* VIDEO */
  .fullscreen-video-container {
height:65vh;
  }

  .fullscreen-video-content {
    margin: var(--sm-margin);
    }

  .hero {
    padding: var(--xxs-2);
    flex-direction: column;
    height: 100vh;
  }

  .hero-intro {
    padding: 25px;
    max-width: 100%;
    width: auto;
  }
  


      /* ICON BLOCK */

      .icon-block {
    
        padding: var(--lrg) var(--sm-margin);
        gap: var(--lrg);
        max-width: 100%;
      
        }
    
    
      .icon-block-items {
        display: flex;
        justify-content: center;
        flex-direction: column;
        }
    
    
    .icon-block-item {
    
      width: 100%;
    
      }
    
      .icon-block-item:nth-child(2) {
    
        border-right: none;
        border-left: none;
        padding-left:0;
        padding-right: var(--md);
    
      }
    
    /* TEXT COLUMN BLOCK */
    
      .text-column-block {
        padding: var(--lrg) var(--sm-margin) var(--lrg) var(--sm-margin);
        gap: var(--lrg);
        max-width: 100%;
      
        
        }
    
        .block-intro-text-lrg {
          width: 100%;
        
          }
    
          .text-columns {
            row-gap: var(--sm);
        width: 100%;
            flex-direction: column;
            }
    
    /* FORM */
    
    .form-container {
      padding: var(--lrg) var(--sm-margin);
      flex-direction: column;
      max-width: 100%;
      
    }
    
    .form-text {
      width:100%;
    }
    
    .form-container form {
      width:100%;
    }
    

}