html{
    height: 100%;
}
body {
  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
  background-color: rgb(242, 250, 253);
  height:100%;
  display: flex;
  flex-direction: row;
  background-color: rgb(242, 250, 253);
  padding: 0;
  margin: 0;

}
.max-w-\[800px\]{
  max-width: 100%!important;
}
.corner-wrapper {
  display: block;
  overflow: hidden;
  width:98%;
  /* height: 80vh; */
  height: auto;
  min-height: 80vh;
  border-radius: 1rem;
  transform: translateZ(0px);
  border: 1px solid #dbf3ff;
}
.my-container{
  width: 80%;
  max-width: 80%;
  margin-left: 20%;
}
.nav-link{
  margin: 5px;
  font-weight: 550;
}
.left-column-container{
  display: flex;
  flex-direction: column;
  width: 70%;
  padding: 10px;
  align-items: center;
}
.right-column-container{
    width: 30%
}
.nav-link-container{
  margin-bottom: 1rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  height: 50%;
}
.sidenav {
  height: 100%;
  width: 20%;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: #124991;
  overflow-x: hidden;
  padding-top: 20px;
  align-items: center;
  padding-top:30px;
  display: flex;
  flex-direction: column;
  
}
.logo{
    margin-bottom: 2rem;
    width: 80%;
}
.sidenav a {
  padding: 6px 6px 6px 6px;
  text-decoration: none;
  font-size: 0.9rem;
  /* color: #f1f1f1; */
  color:white;
  display: block;
}

.sidenav a:hover {
  color: rgb(0, 152, 255);
}

.main {
  /* margin-left: 250px; Same as the width of the sidenav */
  background-color: rgb(242, 250, 253);
  
}

@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}
iframe {
        border: 0px;
        width: 100%; /* takes precedence over the width set with the HTML width attribute */
      }
  .custom-btn
  {      
      overflow: hidden;
      border: 0.1rem solid white;  
      font-family: 'Arial';
      font-size: 0.9rem;
      color: white;
      background: none;
      cursor: pointer;
      padding: 0.8rem 1.5rem;
      display: inline-block;
      margin: 15px 30px;
      text-transform: uppercase;
      outline: none;
      position: relative;
      transition: all 0.3s;
      border-radius: 4rem;
      font-weight:700;
  }
  .custom-btn:after{
      content: '';
      position: absolute;
      z-index: -1;
      transition: all 0.3s;
     box-sizing: border-box;
  }
  .btn-03:after {
    width: 0;
    height: 100%;
    top: 0;
    left: 0;
    background: #fff;
  }
  
  .btn-03:hover,
  .btn-03:active {
    color: #457b9d;
  }
  
  .btn-03:hover:after,
  .btn-03:active:after {
    width: 100%;
  }
  .contact-container{
    background-color: black;
    width: 100%;
    height: 10rem; 
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
  }
  #inlineFrameExample{
    min-height: 80vh;
  }
  @media only screen and (max-width: 900px) {
    .logo{
      margin-bottom: 1rem;
    }
    .sidenav a{
      font-size: 0.6rem;
    }
    .custom-btn{
      font-size: 0.4rem;
      padding: 0.4rem 0.8rem;
    }
    .contact-container{
      font-size: 0.5rem;
      height: 6rem;
    }
    .left-column-container{
      padding: 5px;
    }
  }

  @media only screen and (min-width: 1300px) {
    .sidenav a{
      font-size: 1.5rem;
    }
    .custom-btn{
      font-size: 1rem;
      padding: 1rem 2rem;
    }
    .contact-container{
      font-size: 1.2rem;
      height: 13rem;
    }
    .logo{
      margin-bottom: 3rem;
    }
  }
  @media only screen and (min-width: 2000px) {

    .sidenav a{
      font-size: 2rem;
    }

    .sidenav{
      width: 15%;
    }
    .my-container{
      width: 85%;
      max-width: 85%;
      margin-left:15%;
    }
    .custom-btn{
      font-size: 1.5rem;
      border-width: 0.2rem;
      padding: 1.3rem 2.8rem;
    }
    .nav-link-container{
      margin-bottom: 6rem;
    }
    .left-column-container{
      padding: 3rem;
    }
    #inlineFrameExample{
      transform: scale(calc(100%*1.5));
      transform-origin: top;
    }
    .corner-wrapper{
      overflow-y: visible;
    }
  }
  @media only screen and (min-width: 3000px) {

    .nav-link-container {
      height: 50%;
      margin-bottom: 4rem;
    }
    .sidenav a{
      font-size: 3.2rem;
    }
    .custom-btn{
      font-size: 2.5rem;
      border-width: 0.3rem;
      padding: 2rem 4rem;
    }
    .logo{
      margin-bottom: 10rem
    }
    .contact-container{
      font-size: 2.5rem;
      height: 25rem;
    }
    .left-column-container{
      padding: 5rem;
    }
    #inlineFrameExample{
      transform: scale(calc(100%*2.5));
      transform-origin: top;
    }
    .corner-wrapper{
      overflow-y: visible;
    }
  }
  @media only screen and (min-width: 4000px) {
    #inlineFrameExample{
      transform: scale(calc(100%*3));
      transform-origin: top;
    }
  }