body {
    margin: 0;
    padding: 0;
    height: 1005;
    font-family: arial black;
}

.navbar {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 2000;
    padding-bottom: 1.5vh;
    box-sizing: border-box;
    box-shadow: 0px 8px 1.82px 0.18px rgba(18, 83, 110, 0.90);
    background-size: cover;
    background-color: #fff;
    display: table;
  }
  
  .title {
    text-decoration: none;
    font-size: 2.25rem;
    color: #2f536e;
    display: table-cell;
    padding-left: 1vw;
  }

  .menuParent {
    display: table-cell;
  }

  .menuChild {
    float: right;
    padding-top: 1.25vh;
  }

  .menu {
    margin: 25px;
    font-size: 1.25rem;
    color: #2f536e;
    text-decoration: none;

  }

  .menu:hover {
    color: #D3D3D3;
  }

  .pageTitleParent {
    width: 100%;
    height: 20vh;
    margin-top: 12vh;
    text-align: center;
  }

  .pageTitle {
    font-size: 3rem;
    color: #2f536e;
  }

  .pageTitleText {
    font-size: 2rem;
    color: #fec51c;
    margin-top: -4vh;
  }

  .pageTitleText1, .pageTitleText5 {
    font-size: 2.25rem;
    color: #2f536e;
    line-height: 0.5;
  }

  .pageTitleText2{
    font-size: 2.5rem;
    color: #fec51c;
    margin-top: -5vh;
    font-weight: 50;
    font-style: italic;
  }

  .pageTitleText3 {
    font-size: 1rem;
    color: #fec51c;
    margin-top: -4.5vh;
    font-weight: 50;
    font-style: italic;
  }

  .pageTitleText4 {
    font-size: 2rem;
    color: #fec51c;
    margin-top: -3vh;
    font-weight: 50;
    font-style: italic;
  }

  .pageText1 {
    color: #2f536e;
    font-size: 2rem;
  }

  .contactInfo {
    font-size: 2.5rem;
    color: #2f536e;
    margin-top: 15vh;
  }

  input.contact:-webkit-autofill {
    -webkit-box-shadow: 0 0 0px 1000px white inset;
    -webkit-text-fill-color: #2f536e;
    font-family: 'Arial', sans-serif;
  }

  .imagesParent {
    height: 60vh;
    width: 100%;
    margin-top: 2vh;
    margin-left: -1.25vw;
    z-index: 1;

    background: url(images/multi-image.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    position: absolute;
  }



  .footerContainer {
    z-index: 0;
  }

  .sizeParent {
    height: 25vh;
    width: 100%;
  }
  
  .sizeChild {
    height: inherit;
    width: 60%;
    margin: auto;
    display: flex;
  }

  .size1, .size2,  .size3 {
    height: inherit;
    width: 25%;
    cursor: pointer;
  }

  .size1 {
    background: url(images/1ft-image.png);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
  }

  .size1:hover {
    background: url(images/1ft-hover.png);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
  }

  .size1:active {
    background: url(images/1ft-image.png);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
  }

  .size2 {
    background: url(images/2ft-image.png);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
  }

  .size2:hover {
    background: url(images/2ft-hover.png);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
  }

  .size2:active {
    background: url(images/2ft-image.png);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
  }

  .size3 {
    background: url(images/4ft-image.png);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
  }

  .size3:hover {
    background: url(images/4ft-hover.png);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
  }

  .size3:active {
    background: url(images/4ft-image.png);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
  }

  .size0 {
    height: inherit;
    width: 15%;
  }

  .radioBtnsParent {
    height: 4vh;
    width: 100%;
  }

  .radioBtnsChild {
    height: inherit;
    width: 60%;
    margin: auto;
    display: flex;
  }

  .radioBtnBox1, .radioBtnBox2, .radioBtnBox3 {
    height: inherit;
    width: 25%;
    cursor: pointer;
  }

  .radioBtnBox0 {
    height: inherit;
    width: 15%;
  }

  .radios {
    margin-top: 1vh;
    margin-left: 50%;
  }

  .nextBtnParent {
    height: 9vh;
    width: 100%;
    margin-top: 7vh;

  }

  .nextBtnChild {
    height: inherit;
    width: 10px;
    margin: auto;
    width: 25%;

  }

  .nextBtn {
    height: inherit;
    width: 80%;
    background: url(images/next-button.png);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    margin: auto;
    cursor: pointer;
  }

  .nextBtn:hover {
    background: url(images/next-button-hover.png);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
  }

  .nextBtn:active {
    background: url(images/next-button.png);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
  }

  .contactInfoParent {
    height: 10vh;
    width: 100%;
    margin-top: -5vh;
  }

  .contactInfoChild {
    margin: auto;
    text-align: center;
  }

  .contact1 {
    margin-bottom: 2.5vh;
  }

  .contact {
    font-size: 2rem;
    color: #2f536e;
    border: black 3px solid;
    width: 30%;
  }

  .contact::placeholder {
    color: #2f536e;
  }

  .submitBtn {
    height: inherit;
    width: 80%;
    background: url(images/submit-button.png);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    margin: 20vh auto 0px auto;
    cursor: pointer;
  }

  .submitBtn:hover {
    background: url(images/submit-button-hover.png);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
  }

  .submitBtn:active {
    background: url(images/submit-button.png);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
  }


  footer {
      width: 100%;
      height: auto;
      max-height: 33vh;
      bottom: 0px;

      position: fixed;
      background: url(images/footer.png);
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      aspect-ratio: 16/9;
  }



  @media only screen and (max-width: 768px) {
    body {
      font-size: 1.5rem; /* Reduce font size for mobile */
    }
  
    .navbar {
      padding-bottom: 2vh;
    }
  
    .title {
      color: transparent;
      font-size: .5rem;
      margin-left: 50px;
      background: url(images/Title.png);
      background-repeat: no-repeat;
      background-position: center;
      background-size: contain;
    }

  
    .menuChild {
      padding-top: 1vh;
    }
  
    .menu {
      font-size: .75rem;
      margin: 5px;
    }


  
    .pageTitleParent {
      height: 15vh;
      margin-top: 15vh;
    }
  
    .pageTitle {
      font-size: 2rem;
    }
  
    .pageTitleText,
    .pageTitleText2,
    .pageTitleText3 {
      font-size: 1.5rem;
      margin-top: -3vh;
    }

    .pageTitleText1 {
      margin-top: 5vh;
      line-height: 1.2;
    }

    .pageTitleText4 {
      font-size: 1.5rem;
      margin-top: 2.5vh;
      margin-bottom: 4vh;
    }

    .pageTitleText5 {
      margin-top: 6vh;
      line-height: .5;
      font-size: 1.5rem;
    }
    
    .contactInfo {
      font-size: 1.25rem;
      margin-top: 8vh;
    }
  
    .pageText1 {
      font-size: 1.5rem;
    }

    .imagesParent {
      margin-top: -15vh;
    }
  
    .contactInfoParent {
      height: auto;
      margin-top: 0vh;
    }
  
    .contact1 {
      margin-bottom: 3vh;
    }
  
    .contact {
      font-size: 1.5rem;
      width: 80%; /* Increase input width for mobile */
    }
  
    .sizeParent {
      height: auto;
      width: 100%;
      background-size: contain;
    }
  
    .sizeChild {
      width: 90%;
      flex-direction: table; /* Stack sizes vertically */
    }
  
    .size1, .size2, .size3 {
      width: 100%;
      height: 20vh;
      background-size: contain;
      background-position: center;
      background-repeat: no-repeat;
    }

    .size1:hover, .size2:hover, .size3:hover {
      background-size: contain;
      background-position: center;
      background-repeat: no-repeat;
    }

    .size1:active, .size2:active, .size3:active {
      background-size: contain;
      background-position: center;
      background-repeat: no-repeat;
    }
  
    .size0 {
      height: 10vh;
    }
  
    .radioBtnsParent {
      height: auto;
    }
  
    .radioBtnsChild {
      flex-direction: table; /* Stack radio buttons */
      width: 90%;
    }
  
    .radioBtnBox1, .radioBtnBox2, .radioBtnBox3 {
      width: 100%;
    }
  
    .radios {
      margin-left: 50%;
      margin-top: 0.5vh;
    }
  
    .nextBtnParent, .nextBtnChild {
      width: 100%;
      height: auto;
      margin-top: 5vh;
    }
  
    .nextBtn {
      width: 90%;
      height: 8vh;
    }
  
    .submitBtn {
      width: 90%;
      height: 8vh;
      margin-top: 10vh;
    }
  
    footer {
      height: 20vh;
    }
  }