/* Reset default browser styles */
html, body, h1, h2, h3, h4, h5, h6, p, ol, ul {
  margin: 0;
  padding: 0;
}

/* Set box-sizing to border-box for easier sizing calculations */
html {
  box-sizing: border-box;
}

*, *:before, *:after {
  box-sizing: inherit;
}

/* Set a base font size and line height */
body {
  font-family: Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
}

/* Add some basic styles to improve readability and appearance */
a {
  text-decoration: none;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0.5em 0;
}

p li {
  margin: 0.75em 0;
}

/* Styles for the header */
  
  .inner-header h2 {
    font-family: Helvetica, Arial, sans-serif;
    font-size: 1.5em;
    color: #ffffff;
    white-space: nowrap;
  }

  /* CSS for logo and title positioning */
  .header .inner-header {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-right: 6.5%;
    overflow: hidden;
  }

  .header .inner-header .logo {
    height: 80%; /* Adjust the height as needed */
    margin-left: 30px; /* Add some left margin for spacing */
    justify-content: center;
    align-items: center;
    z-index: 3;
  }

  .header .inner-header h1 {
    font-family: Helvetica, Arial, sans-serif;
    font-weight: 700;
    display: inline-block;
    margin: 0;
    font-size: 2em;
    white-space: nowrap;
  }


  /* Styles for the Main Body */
  
  .section {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    scroll-snap-align: start;
  }
  
  .section h2 {
    font-size: 50px;
    margin-bottom: 20px;
  }
  
  .section p li {
    font-size: 25px;
  }

  .back-to-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 40px;
    height: 40px;
    background-color: #333;
    color: #fff;
    border: none;
    border-radius: 50%;
    font-size: 24px;
    cursor: pointer;
    visibility: hidden;
    opacity: 0;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  .back-to-top:hover {
    background-color: #555;
  }

  #welcome {
    background: url(../images/aboutus2.jpg) no-repeat center center fixed;
    background-size: cover;
    min-height: 90vh;
  }

  #welcome h2, #welcome p {
    font-weight: 800;
    text-shadow: 2px 2px 4px #333;
    color: white;
  }

  #about.section {
    position: relative;
    top: -10vh;
    background: linear-gradient(0deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 4%, rgba(255,255,255,1) 51%, rgba(255,255,255,1) 96%, rgba(255,255,255,0) 100%);
  }

  #about h2, #about p {
    color:#ffffff;
  }

  #aboutcontainer {
    background: linear-gradient(90deg, #2b5192 0%, #00A3BC 100%);
    width: 100%;
    height: 55vh;
    text-align: center;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 2em;
    min-height: 475px;
  }


  .text-hidden {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 1s ease, transform 1s ease;
    transition-delay: 0.2s;
}

.text-visible {
    opacity: 1;
    transform: translateY(0);
}
  
  #about-heading {
    flex: 1;
    font-size: 3em;
    font-weight: bold;
    max-width: 50%;
  }
  
  #about-content {
    flex: 1;
    text-align: left;
    font-size: calc(0.8vw + 0.8vh);
    max-width: 50%;
    max-height: fit-content;
  }

  /* Media query for smaller screens */
@media (max-width: 768px) {
  #aboutcontainer {
    flex-direction: column; /* Change to column direction for stacking items */
    align-items: center; /* Center items vertically */
    height: 40%;
    padding: 1em;
  }

  #about-heading {
    text-align: center; /* Center the heading */
    align-items: center;
    max-width: 100%; /* Set maximum width to full width */
    width: 90vw;
    font-size: 2em;
    max-height: 3em;
    margin: 0;
    padding-top: 3vh;
  }

  #about-content {
    align-items: center;
    max-width: 90vw;
    font-size: calc(1.2vw + 1.2vh);
    min-height: 200px;
    padding-top: 3vh;
  } 
}

  #services{
    background: url(../images/school.jpg) no-repeat center center fixed;
    background-size: cover;
    display: flex;
    flex-direction: row;
  }

  #services h2 {
    text-align: center;
    color: white;
    width: 50vw;
    font-size: calc(1.5vw + 1.5vh);
    font-weight: bold;
    order: 2; /* Position h2 on the right */
    padding-bottom: 50%;
    padding-right: 10%;
  }

  #services ul {
    text-align: left;
    color: white;
    width: 50vw;
    padding-left: 3%;
    padding-right: 3%;
    font-size: calc(0.8vw + 0.8vh);
    list-style: none; /* Remove default list style */
    order: 1; /* Position list on the left */
    max-height: 80vh;
  }

    /* Media query for smaller screens */
@media (max-width: 768px) {
  #services {
    flex-direction: column; /* Change to column direction for stacking items */
    align-items: center; /* Center items vertically */
  }

  #services h2 {
    order: 1;
    padding: 0;
    width: 100vw;
    max-height: 20vh;
    text-shadow: 2px 2px 4px #333;
  }

  #services ul {
    order: 2;
    width: 100vw;
    text-shadow: 2px 2px 4px #000000;
    font-size: calc(1.2vw + 1.2vh);
  }

}

body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  background-color: #fff;
}

#contact {
  min-height: 80vh;
}

.container {
  width: 100%;
  margin: 0 auto;
  padding: 20px;
  display: flex;
  justify-content: center;
}

.contact-section {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 70vh;
}

/* Left Side (Form) */
.form-container {
  width: 50%;
  padding: 20px;
  display: flex;
  justify-content: center; /* Center the content horizontally */
  align-items: center; /* Center the content vertically */
  position: relative; /* Required for overlay */
}

.form-container img {
  max-width: 90%; /* Adjust the size of the circle */
  max-height: 90%; /* Adjust the size of the circle */
  border-radius: 50%; /* Rounds the corners to create a circle */
  display: block; /* Ensures the border-radius is applied correctly */
}


/* Right Side (Contact Information) */
.contact-info {
  width: 50%;
  padding: 20px;
  background: linear-gradient(to right, #f4f4f4, #ffffff);
  border-left: 1px solid #ccc;
  display: flex;
  flex-wrap: wrap;
  min-height: 45vh;
}

.contact-item {
  display: flex;
  align-items: center;
  margin-bottom: 10px; /* Add space between items */
  width: 100%;
}

.info p {
  margin: 0; /* Reset default margins */
}

/* Align PNG indicators vertically to the left */
.indicator-container {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

/* Adjust the size and spacing of the PNG indicators */
.indicator {
  width: 40px; /* Adjust the size of the indicator */
  height: 40px; /* Adjust the size of the indicator */
  margin-bottom: 2vh; /* Add space between indicators */
  margin-right: 2vw;
  margin-left: 0.5vw;
}

.contact-info h2 {
  margin-top: 0;
}

.contact-info p {
  margin-bottom: 10px;
  font-size: calc(0.8vw + 0.8vh);
}

/* Styling links */
.contact-info a {
  color: #0f90cc; /* Blue color */
  text-decoration: none; /* Remove underline */
  font-size: calc(0.8vw + 0.8vh);
}

.contact-info a:hover {
  text-decoration: underline; /* Add underline on hover */
}

/* Media query for smaller screens */
@media (max-width: 768px) {
  .form-container {
    display: none; /* Hide the form container */
  }

  .contact-info {
    width: 100%; /* Make the contact information section take full width */
    border-left: none; /* Remove border */
  }

  .container {
    padding: 0px;
  }

  .contact-info {
    padding: 0px;
    width: 100%;
    justify-content: center;
    padding-top: 2vh;
  }

  .contact-info h2 {
    font-size: calc(2.5vw + 2.5vh);
    font-weight: bold;
  }
  
  .contact-info p {
    font-size: calc(1vw + 1vh);
  }

  .contact-info a {
    font-size: calc(1vw + 1vh);
  }

  .indicator {
    margin-left: 3vw;
    margin-right: 3vw;
  }

}


  #vendors {
    background: url(../images/handshake.jpg) no-repeat center center fixed;
    background-size: cover;
  }

  #districts {
    background: url(../images/school.jpg) no-repeat top center;
    background-size: 200vh;
  }

  #districts h2, #districts p {
    color:white;
  }

  #faq {
    background: url(../images/faq.jpg) no-repeat left top;
    background-size: 70vh;
  }

  #safety {
    background: url(../images/belts.jpg) no-repeat top center;
    background-size: 30vh;
  }


  .footer {
    background:#333;
    height: 15vh;
    text-align: center;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
  }

  .footer h2{
    color: white;
    font-size: calc(1vw + 1vh);
  }

  .footer-logo {
    width: 5.5vw;
    height: 5vw;
    margin-right: 3vw;
  }

  /* Media query for smaller screens */
@media (max-width: 768px) {
  .footer-logo {
    width: 10vw;
    height: 10vw;
  }

}


/* Stylized Header Waves */

  @import url(//fonts.googleapis.com/css?family=Lato:300:400);

body {
  margin:0;
  opacity: 0;
  transition: opacity .25s;
}

h1, h2 {
  font-family: 'Lato', sans-serif;
  font-weight:300;
  letter-spacing: 2px;
  font-size:48px;
  margin-bottom: 0;
}

p {
  font-family: 'Lato', sans-serif;
  letter-spacing: 1px;
  font-size:25px;
}

.header {
  position:relative;
  text-align:center;
  background: linear-gradient(90deg, #2b5192 0%, #00A3BC 100%);
  color:white;
}

.inner-header {
  height:15vh;
  width:100%;
  margin: 0;
  padding: 0;
}

.flex { /*Flexbox for containers*/
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.waves {
  position:relative;
  width: 100%;
  height:1vh;
  margin-bottom:-7px; /*Fix for safari gap*/
  min-height:50px;
  max-height:100px;
}

.content {
  position:relative;
  height:0vh;
  text-align:center;
  background-color: white;
}


/* Animation */

.parallax > use {
  animation: move-forever 25s cubic-bezier(.55,.5,.45,.5)     infinite;
}
.parallax > use:nth-child(1) {
  animation-delay: -2s;
  animation-duration: 14s;
}
.parallax > use:nth-child(2) {
  animation-delay: -3s;
  animation-duration: 20s;
}
.parallax > use:nth-child(3) {
  animation-delay: -4s;
  animation-duration: 26s;
}
.parallax > use:nth-child(4) {
  animation-delay: -5s;
  animation-duration: 40s;
}
@keyframes move-forever {
  0% {
   transform: translate3d(-90px,0,0);
  }
  100% { 
    transform: translate3d(85px,0,0);
  }
}

/*Shrinking for mobile*/
@media (max-width: 768px) {
  .waves {
    height:40px;
    min-height:40px;
  }
  .content {
    height:30vh;
  }
  .header .inner-header h1 {
    font-size:4vw;
  }
  .inner-header h2 {
    font-size:2.5vw;
  }
  #sticky {
    height: 60px; /* Adjust the height for smaller screens */
    min-height: 60px;
  }
  .header .inner-header .logo {
    height: 60%; /* Adjust the height as needed */
    margin-left: 10px; /* Add some left margin for spacing */
    justify-content: center;
    align-items: center;
    z-index: 3;
  }
}

/* Additional shrinking for smaller screens */
@media (max-width: 425px) {
  .waves {
    height: 20px;
    min-height: 20px;
  }
  .content {
    height: 20vh;
  }
  #sticky {
    height: 40px; /* Adjust the height for even smaller screens */
    max-height: 40px;
  }
  .header .inner-header .logo {
    height: 40%; /* Adjust the height as needed */
    margin-left: 5px; /* Add some left margin for spacing */
    justify-content: center;
    align-items: center;
    z-index: 3;
  }
}

#sticky {
  height:80px;
  background:linear-gradient(90deg, #2b5192 0%, #00A3BC 100%);
  position:relative;
  /* needed for clone: */
  top:0; 
  width:100%;
}

/* Mini Logo appears on scroll */
.minilogo {
  position: relative;
  display: flex;
  align-items: top;
  justify-content: left;
  margin-right: auto;
  margin-left: 10px;
  cursor: pointer;
  visibility: hidden;
}

.bluelogo {
  height: 40px;
}

/* Add a class to handle opacity transition for the cloned sticky header */
.visible {
  opacity: 1;
  transition: opacity 0.3s ease;
}

/* Add a white background color to the top navigation */
.topnav {
  overflow: hidden;
  background: -moz-linear-gradient(top,  rgba(255,255,255,1) 0%, rgba(255,255,255,1) 60%, rgba(255,255,255,1) 77%, rgba(255,255,255,1) 83%, rgba(255,255,255,0) 100%);
  background: -webkit-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(255,255,255,1) 60%,rgba(255,255,255,1) 77%,rgba(255,255,255,1) 83%,rgba(255,255,255,0) 100%);
  background: linear-gradient(to bottom,  rgba(255,255,255,1) 0%,rgba(255,255,255,1) 60%,rgba(255,255,255,1) 77%,rgba(255,255,255,1) 83%,rgba(255,255,255,0) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff',GradientType=0 );
  display: flex;
  justify-content: right;
}

/* Style the links inside the navigation bar */
.topnav span, .topnav a {
  float: right;
  display: block;
  color: #2B5192;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
  margin-right: 1vh;
  cursor: pointer;
}

/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
  display: none;
}

/* Dropdown container - needed to position the dropdown content */
.dropdown {
  float: right;
  overflow: hidden;
}

/* Style the dropdown button to fit inside the topnav */
.dropdown .dropbtn {
  font-size: 17px;
  font-weight: bold;
  border: none;
  outline: none;
  color: #0f90cc;
  padding: 16px 16px;
  background-color: inherit;
  font-family: inherit;
  cursor: pointer;
  text-align: center;
  margin-right: 1vh;
}

/* Style the dropdown content (hidden by default) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 8px 0px rgba(0,0,0,0.2);
  z-index: 1;
  border-radius: 20px;
  right: 0; /* Align the dropdown to the right */
}

/* Style the links inside the dropdown */
.dropdown-content a, .dropdown-content span {
  float: none;
  color: #2B5192;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

/* Add a dark background on topnav links and the dropdown button on hover */
.topnav a:hover, .dropdown:hover .dropbtn, .topnav span:hover {
  background-color: #0f90cc;
  color: white;
  border-radius: 20px;
}

/* Add a grey background to dropdown links on hover */
.dropdown-content span:hover, .dropdown-content a:hover {
  background-color: #ddd;
  color: #2B5192;
  width: 100%;
}

/* Show the dropdown menu when the user moves the mouse over the dropdown button */
.dropdown:hover .dropdown-content {
  display: block;
}