body {
   background-color: #1B213C; /* Deep Blue */
   color: white; /* Text color for contrast */
   font-family: Arial, sans-serif; /* Font for text */
   margin: 0; /* Remove default margin */
   padding: 0; /* Remove default padding */
   box-sizing: border-box; /* Include padding and border in element's total width and height */
   position: relative; /* Enable positioning for child elements */
   font-kerning: normal;
   }
.header {
   position: fixed;
   max-height: 90px;
   top: 0;
   left: 0;
   right: 0;
   background-color: #1B213C;
   padding: 10px;
   z-index: 1;
   transition: 0.4s;
   }
.logo-mobile {
   max-width: 80px;
   display: block;
   padding: 10px;            
   float:left;
   transition: 0.4s;
   } 
.topmenu {
   padding-left: 100px;
   padding-right: 200px;
   text-align: center;
   max-width: 90em;
   margin: 0 auto;
   }
.dropdown{
   overflow: hidden;
   position: fixed;
   z-index: 1;
   padding-top: 30px;
   top: 120px;
   left: 0px;
   right: 0px;
   bottom: 0px;        
   background-color: #1B213C;
   transition: 0.4s;
   white-space: nowrap; 
   }
.dropdown li{
   width: 100%;         
   display: block;
   flex-direction: column;
   }
.dropdown a {
   width: 100%;
   display: block;
   text-align: left;
   line-height: 50px; 
   padding-left: 30px;
   font-size: 20px;
   margin-bottom: 20px;
   }
.dropdown a.active {
   color: #C8C7F2;
   }
nav {
    display: inline;
    justify-content: center;
    position: relative;
    top: 30px;
        }
nav ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
    display: flex; 
    justify-content: space-around;
    }
nav ul li {
     width: 20%; 
     display: inline;
     font-size: 20px;
     transition: 0.4s;
     }
nav ul li a {
     color: white; /* Font color of the navigation menu */
     display: inline-block; /* Ensure consistent width and height */
     text-decoration: none;
     width: 100%;     
     line-height: 40px;            
     }
nav ul li a.active {
     background-repeat: no-repeat;
     background-position: center;
     background-image: url("/NavHighlight.svg");  /* Background color for the Home link */
     }
nav ul li a:hover {
     color: #C8C7F2;
     transition: 0.4s; /* Background fades in on hover */
     }
#menu-icon {
     margin: auto 0;
     display: none;
     cursor: pointer;
     position: absolute;
     top: 45px;
     right: 30px;
     width: 40px;
     height: 40px;
     transition: 0.4s;
     }
.bar1, .bar2, .bar3 {
     width: 30px;
     height: 3px;
     background-color: white;
     margin: 6px 0;
     transition: 0.4s;
     }
.open .bar1 {
     -webkit-transform: rotate(-45deg) translate(-6px, 6px);
      transform: rotate(-45deg) translate(-6px, 6px);
     }
.open .bar2 {
     opacity: 0;
     }
.open .bar3 {
     -webkit-transform: rotate(45deg) translate(-6px, -8px);
     transform: rotate(45deg) translate(-6px, -8px);
     }
.open .dropdown {
     display: block; 
     }
header.shrink .logo-desktop {
     max-width: 150px;
     padding: 5px 0px;
     transition: 0.4s;
     }
header.shrink .logo-mobile {
     max-width: 40px;
     padding-top: 5px;
     padding-bottom: 5px;
     padding-right: 50px;
     transition: 0.4s;
     }
header.shrink nav ul li a {
     font-size: 14px;
     line-height: 30px;
     transition: 0.4s;
     }
header.shrink nav {
     top: 10px;
     transition: 0.4s;
     }
.main {
     margin-top: 120px;
     }
a.email:link {
     color: #191970; 
     }
a.email:visited {
     color: #191970;
     }
a.email:hover {
     color: #FFA7C8;
     }
a.email2:link {
     color: #FFFFFF;
     font-size: 26px; 
     font-weight: 300;
     }
a.email2:hover {
     color: #FFA7C8;
     }
hr.purple {
     border: none;
     height: 3px;
     background-color: #C8C7F2;
     opacity: 0.5;
     margin: 0px 0px 8px 0px;
     }
.text-section {
     background-image: url("/WhiteFadeBackground4.svg");
     background-size:cover;
     background-repeat: no-repeat;
     background-position: center;
     color: #191970;
     padding: 10px;
     }
.large-blue-text{
     margin: 22px 8.5vw;
     font-size: 22px;
     font-weight: 600;
     }
.small-blue-text{
     text-align: center;
     margin: 20px 22vw;
     font-size: 16px
     }
.gradient-underline{
     padding-bottom: 7px;
     position: relative;
     }  
.gradient-underline::after {
     background: #C8C7F2;
     background: linear-gradient(to right, transparent 0%, #C8C7F2 2%,         transparent 100%);  
     content: "";
     position: absolute;
     bottom: 0;
     left: 0;
     height: 2px;
     width: 100%;
     }
.small-purple-text {
     text-align: center;
     margin: 10px 0px 30px 0px;    
     font-size: 10px;
     color: #C8C7F2;
     }            
.center-text-large {
     text-align: center;
     margin: auto;
     font-size: 20px;
     font-weight: 600;
     }
.center-text-small {
     text-align: center;
     margin-top: 20px; /* Add margin between image and text */
     font-size: 15px;
     }
.left-text-large {
     text-align: left;
     margin-left: 2vw; /* Add margin between image and text */
     font-size: 20px;
     font-weight: 600;
     }
.left-text-small {
     text-align: left;
     margin: 0 0 0 2vw;
     font-size: 15px;
     }
.image-container {
     height: 200px;
     display: flex;
     justify-content: space-around; /* Distribute images evenly */
     margin: 0px auto;
     padding: 80px 0px;
     flex-wrap: wrap; /* Allow items to wrap to the next line */
    background-image: url("/ContactBackground.svg");
     background-size:cover;
     background-repeat: no-repeat;
     background-position: center;
     max-width: 90em;
     }
.text-container {
     display: flex;
     justify-content: space-around; /* Distribute images evenly */
     flex-wrap: wrap; /* Allow items to wrap to the next line */
     margin: 0 5vw;
     }
.image {
     width: 30%; /* Width of each image container */
     text-align: center; /* Center the image */
     margin-bottom: 40px; /* Add margin between images */     
     }
.bullet-image {
     display: flex;
     align-self: center;
     width: 80%; /* Width of each image container */
     margin-bottom: 30px;                   
     }
.image img {
     max-width: 80px;
     margin: 10px 0 20px;
     }
.bullet-image img {
     max-width: 30px;
     height: 105px; /* Maintain aspect ratio */
     }
.video-section {
     background-color: #C8C7F2;
     opacity: 0.5;
     padding: 20px 0;
     }
.video-container {
     width: 60%; /* Set video width to 80% of the page */
     margin: 1% auto; /* Center the video horizontally */
     }
.video-container video {
     width: 100%; /* Ensure the video fills its container */
     border-radius: 15px;
     }

 /* Media query for smaller screens */
 @media only screen and (max-width: 1024px) {
 nav ul li a {
     font-size: 16px; /* Adjust font size for smaller screens */
     }
     }

 /* Media query to hide the dropdown on larger screens. 810px TO ENSURE DROPDOWN APPEARS WHEN SHRINKING WINDOW */@media (min-width: 810px) {
#dropdown {
     display: none !important;
     }
.menu-icon {
     display: none;
     }
     }

/* Media query for even smaller screens */
@media only screen and (max-width: 810px) {
nav ul li a {
     display: none;
     }
.logo-mobile {
     display: block; /* Make the second logo a block element */
     }
.image-container {
     height: 200px;
     display: flex;
     justify-content: space-around; /* Distribute images evenly */
     margin: 0px auto;
     padding: 80px 0px;
     flex-wrap: wrap; /* Allow items to wrap to the next line */
    background-image: url("/ContactBackground.svg");
     background-size:cover;
     background-repeat: no-repeat;
     background-position: center;
     }
.image {
     width: 90%; /* Adjust main content image width to take full width on mobile */
     }
nav ul li a {
     margin-left: 10px;
     }
nav ul li a.active {
     background-image: none;
     }
.dropdown{
     display: block; 
     width: 0;      
     }
#menu-icon {
     display: inline-block;
            }
header.shrink #menu-icon {
     display: inline-block; /* Initially hide the button and dropdown menu */
     top: 15px; /* Adjust the top position as needed */
     right: 30px; /* Adjust the right position as needed */
     width: 40px; /* Set the width of the image */
     height: 40px; /* Set the height of the image */
     padding: 5px 0;
     transition: 0.4s;
     }
header.shrink .dropdown {
     top: 60px;
     transition: 0.4s;
     }
header.shrink .dropdown a {           
     line-height: 50px; 
     padding-left: 20px;
     font-size: 20px;
     margin-bottom: 20px;
     transition: 0.4s;
     }
.text-section {
     background-image: url("/WhiteFadeBackground4Mobile.svg");
     }
.small-blue-text{
     margin: 20px 8vw;
     }
.video-container {
     width: 80%; /* Set video width to 80% of the page */
     }
     }