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;
    --xxlrg-margin: 500px;
  
    /* COLOURS */
  
    /* Primary */
    --Primary-Pastel-Blue: #c9dee4;
    --Primary-Sea-Blue: #007099;
  
    /* Mono */
    --Mono-Almost-Black: #2e2e2e;
    --Mono-Dark-Grey: #555555;
    --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: 18px;
    font-weight: 400;
    line-height: 150%;
    margin: 0;
    color: var(--Mono-Dark-Grey)
  }
  
  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: var(--xxs) var(--lrg-margin);
    justify-content: space-between;
    align-items: center;
    align-self: stretch;
    flex-direction: row;
    flex-wrap: wrap;
    row-gap: var(--xs);
    position: relative;
    max-width:100%;
    background-color: var(--Mono-White);
  }
  
  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;
  }
  
  header ul li {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  header ul li a {
    color: var(--Shades-Sea-Turq-1);
    font-family: "Axios Pro";
    font-size: 18px;
    line-height: 140%; /* 25.2px */
    text-decoration: underline;
  }
  
  header ul li a:hover {
    text-decoration: none;
    color: var(--Shades-Sea-Turq-3);
  }
  
  #logo {
    width: auto;
    height: auto;
  }
  
  
  
  /* ----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);
      cursor:pointer;
  }
  
  
  .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);
    cursor:pointer;
  }
  
  /* ----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: 60vh;
    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.webp') 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: var(--Shades-Sea-Turq-3);
  }
  
  .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;
  }
  
  
  
  /* 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;
  }
  
  
  /* VIDEO BLOCK */
  
  .video-block {
    display: flex;
    display: flex;
    padding: var(--xxl) 0;
    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%;
  }

  .transcript {
    text-align: left;
    height: 300px;
    overflow-x: scroll;
    width: var(--col-8);
  }
  
  
  /* 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 h3 {
    color: var(--Primary-Pastel-Blue);
  }
  
  .icon-block-item p {
    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;
  }
  
  /* 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: var(--Mono-Lightest-Grey);
    border: 0;
    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);
  }
  
 
  /* <----Error Message----> */

       .error {
        color: red;
        font-size: 12px;
    }



  /* input[required],
  textarea[required] {
      background-color: #fffcf0;
      border: 1px solid #f39c12;
  } */
  
 
  
          .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;
            }
          
      
          .form-field input::placeholder {
            color: var(--Mono-Dark-Grey);
            text-decoration: none;

          }
          .form-field textarea::placeholder {
              color: var(--Mono-Dark-Grey);
          }
        


          /* FORM SUBIT CONFIRMATION PAGE */
  .success {
    display: flex;
    height: 100vh;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: var(--xxs);
    align-self: stretch;
    background: url('https://www.thisisvisceral.com/wp-content/uploads/accessiblity-featured.jpg') lightgray 50% / cover no-repeat;
    min-height: min-content;
  }
  
  .success-intro {
    display: flex;
    width: var(--col-4);
    padding: var(--md);
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sm);
    border-radius: 5px;
    background: var(--Shades-Sea-Turq-3);
  }
  
  .success-intro-text {
      gap: var(--xs);
      display: flex;
      flex-direction: column;
  }
  
  .success-intro-text h1 {
    color: var(--Primary-Pastel-Blue);
  }
  
  .success-intro-text p {
    color: white;
  }
  
  /* ----Mobile styles---- */



  
  @media screen and (max-width: 996px) {

/* BODY */

body {overflow-x: hidden;}


    /* GLOBAL */

    header {
      padding: var(--xs) var(--xxs-2);
    }
  
    #logo {
      width: 60px;
      height: 60px;
    }

  
/* HERO */


.hero {
    padding: var(--xxs-2);
    flex-direction: column;
    height: 45vh;
    background: var(--Shades-Sea-Turq-3);
    justify-content: center;
}
  
    .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%;
}



/* VIDEO */

.video-block {
    padding: var(--xxl) var(--sm-margin);
}

.video-container , .transcript{
    width:100%;
}


/* SUCCESS */

.success {
    padding:var(--sm-margin);
}


.success-intro {
    width: var(--col-10);
}

  }
  

  /* 1920PX AND ABOVE */
  
  @media (min-width: 1920px) {


header {

    padding-left: 15%;
    padding-right: 15%;
}


.hero {

    padding-left:15%;
}


    .text-columns {
width: 80%;
margin: 0 10%;
 }


 .icon-block-items {
    width: 80%;
    margin: 0 10%;   
 }

.form-container  {
    padding-left: 15%;
    padding-right: 15%;
}

  }