/* Global Styles */
html {
    font-family: 'Open Sans', sans-serif;
    color: white;
    scroll-behavior: smooth;
    font-size: 18px;
}

body {
    background-color: #5762D5;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Poiret One', sans-serif;
    color: white;
}

#hidden {
    visibility: hidden;
}

.isFlexContainer {
    display:inline-flex;
    justify-content:space-between;
    align-items: center;
}

.isFlexColumn {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Navigation */

.navbar {
    padding-left: 10px;
}

.navbar-brand {
    font-family: 'Poiret One', san-serif;
    font-size: 1.5rem;
}

.navbar-dark .navbar-nav .nav-link {
    color: rgba(255,255,255,1);
}

.navbar-dark .navbar-nav .nav-link:hover {
    background-color: #142252;
}

.navbar-dark .navbar-nav .nav-link.active, .navbar-dark .navbar-nav .show>.nav-link {
    color: #fff;
    background-color: #142252;
}


/* Splash section */

.splash {
    background-image: url(Images/Rendering.jpg);
    width: 100%;
    min-height: 50%;
    background-size: cover;
    background-position: center center;
    min-height: 40em;
    margin-bottom: 20px;
    font-family: 'Poiret One', sans-serif;
}

.splash h1 {
    color: black;
    font-size: 5rem;
    font-weight: 700;
    padding: 0px;
    margin: 0px;
}

.splash h2 {
    font-size: 3rem;
    color: black;
    margin-bottom: 15px;
}

.splash-box {
    max-width: 20%;
    min-width: min-content;
    text-align: center;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 10%;
    padding: 30px 20px 30px 20px;
    font-family: 'Poiret One', sans-serif;
    opacity: 0; 
    margin-left: 10%;
}

.splash-box p {
    font-size: 1.25rem;
}

.button {
    width: 75%;
    border: 2px solid white;
    margin: 0 auto;
    border-radius: 20px;
    background-color: #5762D5;
    color: white;
}

.button:hover {
    background-color: #2933A3;
    cursor: pointer;
}

.button p {
    padding-top: 10px;
}

/* Animations */

#fadein1  {
    opacity: 0;
}

#fadein2 {
    opacity: 0;
}

@media (prefers-reduced-motion: no-preference) {
    .fadein {
        animation-name: opacity;
        animation-duration: 1.2s; 
        animation-timing-function: ease-in; 
        animation-delay: 0s;
        animation-direction: alternate;
        animation-iteration-count: 1;
        animation-play-state: running;
    }
}
@keyframes opacity {
    0% {
      opacity: 0;;
    }
    100% {
      opacity: 1;
    }
  }
.visible {
    opacity: 1!important;
}

  /* Facts Sections */
  .facts {
      width: 95%;
      margin-left: 2.5%;
      align-content: center;
      background-color: #142252;
      margin-bottom: 20px;
  }

  .fact-box {
      text-align: center;
      background-color: #142252;
      padding: 20px;
      width: 25%;
      height: 19rem;
      padding-top: 75px;
      border-right: white 2px solid;
  }

  .fact-box h5 {
    font-size: 1.5rem;
}
.fact-box h3 {
    font-size: 2.5rem;
}

  .fact-box:last-child {
      border-right: 0px;
  }

/*Main Section */
.main {
    width: 95%;
    background-color: #142252;
    margin-left: 2.5%;
    padding: 10px;
    margin-bottom: 20px;
    color: white;
}

/* Location Section */
.location {
    width: 95%;
    margin-left: 2.5%;
    margin-right: 2.5%;
    color: white;
    border-top: 2px solid white;
}

.location-container {
    width: 100%;
    background-color: #142252;
    padding: 10px;
    margin-top: 10px;
}

.location-container img {
    width: 100%;
}

/*Footer */
.footer {
    width: 100%;
    padding: 20px;
    color: white;
    border-top: 1px solid white;
    margin-top: 10px;
    display: flex;
    justify-content: space-between;
}

.footer a {
    color: white;
}

.stickyFooter {
    position: absolute;
    bottom: 10px;
    height: 30px;
    width: 100%;
    padding: 20px;
    color: white;
    border-top: 1px solid white;
    margin-bottom: 10px;
    display: flex;
    justify-content: space-between;
}

.footerContent {
    margin-right: 20px;
    margin-left: 20px;
}


/* THE PROPOSED DEVELOPMENT */

.theDevelopment {
    width: 95%;
    margin-left: 2.5%;
    margin-right: 2.5%;
    color: white;
    border-top: 2px solid white;
}

.devInfo {
    width: 50%;
    padding: 10px;
    margin-top: 10px;
    margin-bottom: 10px;
    background-color:#5762D5;
}

.devInfo img {
    width: 100%;
}

#devText {
    background-color: #142252;
    opacity: 0;
}

.devPhotos {
    width: 95%;
    margin-left: 2.5%;
    margin-right: 2.5%;
    color: white;
    border-top: 2px solid white;
    
}

.photosContainer {
    width: 100%;
    background-color: #142252;
    padding: 10px;
    margin-top: 10px;
}

.photosContainer img {
    width: 95%;
    margin-left: 2.5%;
    margin-right: 2.5%;
}

.map {
        width: 95%;
        margin-left: 2.5%;
        margin-right: 2.5%;
        margin-top: 10px;
        color: white;
        border-top: 2px solid white;
}

.map-container {
    width: 100%;
    background-color: #142252;
    padding: 10px;
    margin-top: 10px;
}

.google-map {
    width: 100%;
    height: 600px;
}


/* WHO WE ARE PAGE */
.foundation-container {
    border-top: white 2px solid;
    width: 95%;
    margin-left: 2.5%;
    margin-right: 2.5%;
    
}

.the-foundation {
    background-color: #142252;
    margin-top: 10px;
    color: white;
    padding-left: 10px;
}

.heading {
    background-color: #142252;
    margin-bottom: -18px;
    padding-left: 10px;
}

.team-members-container {
    border-top: white 2px solid;
    width: 95%;
    margin-left: 2.5%;
    margin-right: 2.5%;
    color: white;
    padding-top: 10px;
}

.svn {
    border-top: none !important;
    padding-top: 10px;
}

.logo {
    margin: 20px;
    width: 20%;
        
    background-color: white;
    
}

.logo img {
    width: 100%;
    align-items: center;
}

.team {
       margin-left: 10px;
       width: 80%;
}

.company {
    border-top: white 0.5px solid;
    background-color: #142252;
    padding-left: 10px;
    width: 100%;
}


/* About the Project */
.about {
    border-top: solid white 1px;
}  

.about-box {
      width: 90%;
  }

  .about-box img {
      max-width: 100%;
      margin-bottom: 20px;
  }


/* TIMELINE & MILESTONES */
.timelineContainer {
    border-top: white 2px solid;
    width: 95%;
    margin-left: 2.5%;
    margin-right: 2.5%;
    padding-top: 10px;
}

.timelineInfo {
    width: 50%;
    margin: 10px;
    padding-left: 10px;
    padding-right: 5px;
    background-color: #142252;
    color: white;
}

.timelineImage {
    width: 50%;
    margin: 10px;
    padding-left: 5px;
    padding-right:10px;
}

.timelineImage img {
    width: 100%;
}



  /* Contact Form */


.contactContainer {
    border-top: white 2px solid;
    width: 95%;
    margin-left: 2.5%;
    margin-right: 2.5%;
    color: white;
    padding-top: 10px;
}

.contactInfo {
    background-color: #142252;
    color: white;
    margin: 10px;
    padding-left: 10px;
    padding-right: 5px;
    width: 100%;
}

.contactImage {
    width: 40%;
    margin-right: 10px;
}

.contactImage img {
    max-width: 100%;
}


  /* Breakpoint mobile 600px */

  @media only screen 
and (min-device-width: 375px)
and (max-device-width: 667px)
and (orientation: portrait) { 


      .isFlexContainer {
          display: inline-flex;
          flex-direction: column;
      }

      .splash-box {
          margin-top: 50px;
          margin-left: 0px;
          margin-right: 0px;
      }

      #hidden {
        display: none;
    }

      .fact-box {
        text-align: center;
        padding-bottom: 50px;
        width: 100%;
        height: 15rem;
        padding-top: 75px;
        border-bottom: white 2px solid;
        border-right: none;
    }
    
    .fact-box h5 {
        font-size: 2rem;
    }
    .fact-box h3 {
        font-size: 3rem;
    }
/*
    .navbar-toggler-icon{
        padding: 20px !important;
      }
      .nav-link {
          font-size: 1rem;
      }
*/

/* FOOTER */
    .footerContent {
        font-size: 0.5rem;
    }

/* THE DEVELOPMENT */
    .devInfo {
        width: 100%;
}
    .devInfo img {
        width: 100%;
    }

   }

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

   

    .isFlexContainer {
        display: inline-flex;
        flex-direction: column;
    }

/* Navbar 
    .navbar-toggler-icon{
        padding: 20px !important;
    }
    .nav-link {
        font-size: 1rem;
    }   
*/
/* INDEX */
    #hidden {
        display: none;
    }

    .fact-box {
      text-align: center;
      padding: 20px;
      width: 100%;
      height: 15rem;
      padding-top: 75px;
      border-bottom: white 2px solid;
      border-right: none;
  }
  
  .fact-box h5 {
      font-size: 2rem;
  }
  .fact-box h3 {
      font-size: 3rem;
  }

/* THE DEVELOPMENT */
  .devInfo {
      width: 100%;
      margin-top: 0px;
  }
  .devInfo img {
    width: 100%;
}

#reversed {
    flex-direction: column-reverse;
}

/*TIMELINE & MILESTONES */
  .timelineInfo {
    width: 100%;
    margin: 0px;
    margin-bottom: 10px;
}

.timelineImage {
    width: 100%;
    margin: 0px;
    padding: 0px;
}

/*WHO WE ARE */
    .logo {
        width: 60%;
    }

/* CONTACT */
.contactImage {
    display: none;
}

  }