/* You can add custom CSS and extend Boostrap styles in this file. Remember, Bootstrap is just CSS at the end of the day! */
body{
  margin: 0px;
  padding: 0px;
  background-color:#282A2A ;
}


/*
blue-ish green
#869D96
*/

.w-background{
  background-color: #212529;    
}

.bi-house-door{
  color: white;
}

.left_space {
   padding-left: 20px;
   padding-right: 20px;
}

#navbar a:hover, #navbar i:hover{
  color: hsl(359, 85%, 53%);
}

.red{
  color: hsl(359, 85%, 53%);
}

h1{
    font-family: 'Josefin Sans', sans-serif;
  }

h2{
  font-family: 'Josefin Sans', sans-serif;
}

h3{
   font-family: 'Josefin Sans', sans-serif;
   font-size: 20px;
}

P{
  font-family: 'Poppins', sans-serif;
}

ul {
   font-family: 'Poppins', sans-serif;
}

a {
   color:white;
   text-decoration: none;
   display: inline-block;
}

#hero-section{
  background-image: 
    linear-gradient(rgba(0,0,0,.4), rgba(0,0,0,.7)),
    url(pictures/main_background_new.jpg);
  background-size: cover;
  background-position: center;
  width: 100%;
  padding: 20%;
  color: white;
  text-align: center;
}

#project_description {
   display: block;
   width: 100%;
   text-align: center;
   color:#282A2A;
   background-color: #869D96;
   min-height: 500px;
}

#navbar{
  background-color: #141515;
}

.navbar i{
  padding-left: 15px;
}

.head-border{
  border-width: 2%;
  border-style: solid;
  color: white;
}

.face{
  width:10vw;
  margin-left: auto;
  margin-right: auto;
  display: block;
}

.center{
  margin-left: auto;
  margin-right: auto;
  object-fit: contain;
}

.card{
  text-align: center;
  margin: auto;
  background: transparent;
  border: none;
}

.card-body{
  background: transparent;
  color: white;
  margin: 10px;
}

#video-section{
  display: block;
  width: 100%;
  padding: 50px;
  padding-left: 100px;
  padding-right: 100px;
  max-height: 600px;
  text-align: center;
  background-color: #1E1F1F;
  color: white;
}


/* mission  */
#mission-section{
  display: block;
  width: 100%;
  padding: 50px;
  padding-left: 100px;
  padding-right: 100px;
  min-height: 600px;
  text-align: center;
  background-color: #1E1F1F;
  color: white;
}

#mission-section p{
  text-align: center;
  padding: 20;
  font-size: 20px;
  margin: auto;
  color: #FBFBFB;
}

#mission-section h2{
  padding: 20px;
  font-family: 'Josefin Sans', sans-serif;
  color: #FBFBFB;

}

#learn_more{
  display: block;
  width: 100%;
  background-color: #1E1F1F;

}



/*meet the sponsor carousel*/
/* mission  */
#meetSponsor{
  display: block;
  width: 100%;
  padding: 50px;
  padding-left: 100px;
  padding-right: 100px;
  min-height: 600px;
  text-align: center;
  background-color: #1E1F1F;
}

#meetSponsor p{
  text-align: center;
  padding: 20;
  font-size: 20px;
  margin: auto;
  color: #FBFBFB;
}

#meetSponsor h2{
  padding: 20px;
  font-family: 'Josefin Sans', sans-serif;
  color: #FBFBFB;

}

/*  team  */
#team-section{
  display: block;
  width: 100%;
  text-align: center;
  margin: 40px 0;
  color: white;
  background-color: #282A2A;
  min-height: 500px;
  padding-bottom: 50px;
}

.team-description{
  font-size: 20px;
  text-decoration: underline;
}

.team-roles{
  font-size: 15px;
}

.emails{
  font-size: 12px;
}

#team-section h2{
  padding: 60px 0px 20px 0px;
  font-family: 'Josefin Sans', sans-serif;

}

.headShots{
  padding: 50px;
  max-width: 300px;
  max-height: 250px;
  border-radius: 50%;
}


/*sponsor*/
.sponsor{
  background-color: #282A2A;
  color: beige;
  margin: 0px;
  padding: 0px;
}

#video {
  display: block;
  text-align: center;
  color: black;
  background-color: black ;
}

#video_spacer {
  padding: 25px;
}

/* Documents */
#documents-section {
  display: block;
  width: 100%;
  text-align: center;
  color: white;
  padding-left: 100px;
  padding-right: 100px;
  min-height: 600px;
  background-color: #1E1F1F;
}

#documents-section i{
  font-size: 20px;
}

#documents-section h2{
  padding: 20px;
}

.icon{
  margin-top: 50px;
}

#documents-section a{
  text-decoration: none;
  color: white;
}

#documents-section p{
  text-decoration: none;
  color: white;
}

#documents-section i:hover{
  color: hsl(359, 85%, 53%);
  font-size: 70px;
}

.row i{
  font-size: 60px;  
}

#documents-section i{
  font-size: 50px;
}

#documents-section h2{
  padding: 60px 0px 20px 0px;
  font-family: 'Josefin Sans', sans-serif;

}

/*footer*/
#footer-section{
  color: white;
}

#footer-nav {
   background-color: black;
   display: flex;
}

#footer-logo {
   padding: 2%;
}

#footer-logo img {
   width: 50px;
   height: 50px;
}

#footer-base {
   background-color: #1E1F1F;
   min-height: 80px;
   display: flex;
   align-items: center;
   margin: 0;
   justify-content: center;
}

#footer-base span {
   padding-left: 3%;
   padding-right: 3%;
   font-size: 13px;
}

#footer-base a {
   padding:20px;
}

.footer-container {
   padding-left: 50px;
   align-items: center;
   display: flex;
}

.footer-column {
   padding: 15%;
   flex: 1;
   white-space: nowrap;
}

.footer-column ul {
   list-style-type: none;
   margin: 0;
   padding: 0;
}

.footer-column h3 {
   padding-bottom: 20px;
}


.button {
  display: inline-block;
  padding: 8px 30px;
  font-size: 18px;
  color: white;
  text-decoration: none;
  background: #282A2A;
  border: 2px solid white;
  border-radius: 5px;
  transition: transform 0.2s;
}

.button:hover {
  transform: scale(1.05);
  background: hsl(359, 85%, 53%);
}

@media (max-width: 600px) {
   .footer-container {
      align-items: center;
      display: inline-block;
   }
   .footer-column {
      white-space: nowrap;
   }
   #video_spacer {
      position: relative;
      padding-bottom: 56.25%;
      overflow: hidden;
   }
   
   #video_spacer iframe {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
   }
 }

 #description {
   padding: 50px;
   min-height: 100px;
   background-color: #282A2A;
   color: white;
 }

 #description h1 {
   padding-bottom: 60px;
 }

 #description h3 {
   text-decoration: underline;
 }

 #description a{
   color: white;
   text-decoration: underline;
 }

 .image_container {
   width: 100%;

 }

 #description img{
   max-width: 100%;
 }

 #background_image {
   background-image: 
    linear-gradient(rgba(0,0,0,.4), rgba(0,0,0,.7)),
    url(pictures/description_background.png);
   background-size: cover;
   background-position: center;
   width: 100%;
   padding: 20%;
 }

 #documents {
   padding: 50px;
   min-height: 100px;
   background-color: #282A2A;
   color: white;
 }

 #documents h1 {
   padding-bottom: 60px;
 }

 #documents h2 {
   padding-top: 20px;
   padding-bottom: 10px;
   font-size: 24px;
   text-decoration: underline;
 }

 #documents h3 {
   padding-top: 10px;
   padding-bottom: 10px;
   font-size: 20px;
 }

 #documents a{
   color: white;
   text-decoration: underline;
 }

 #doc_background_image {
   background-image: 
    linear-gradient(rgba(0,0,0,.4), rgba(0,0,0,.7)),
    url(./pictures/documents_background.jpg);
   background-size: cover;
   background-position: center;
   width: 100%;
   padding: 20%;
 }

 #myIframe1,#myIframe2,#myIframe3,#myIframe4,#myIframe5,#myIframe6,#myIframe7,#myIframe8,
 #myIframe9, #myIframe10, #myIframe11, #myIframe12, #myIframe13, #myIframe14{
  display: none;
  width: 100%;
  height: 600px;
 }

 #iframe_button{
  background-color: white;
  color: #1E1F1F;
 }

 #iframe_button:hover{
    background-color: hsl(359, 85%, 53%);
    color: white;
    transform: scale(1.1);
 }

 #schedule{
   padding: 50px;
   min-height: 100px;
   background-color: #869D96;
 }

 #schedule h1 {
   padding-bottom: 60px;
 }

 #schedule a{
   color: black;
   text-decoration: underline;
 }

 .image_container {
   width: 100%;

 }

 #schedule img{
   max-width: 100%;
 }

 #sched_background_image {
   background-image: 
    linear-gradient(rgba(0,0,0,.4), rgba(0,0,0,.7)),
    url(./pictures/schedule_background.jpg);
   background-size: cover;
   background-position: center;
   width: 100%;
   padding: 20%;
   max-height: 400px;
 }

 #sol_background_image {
   background-image: 
    linear-gradient(rgba(0,0,0,.4), rgba(0,0,0,.7)),
    url(./pictures/solution.jpg);
   background-size: cover;
   background-position: center;
   width: 100%;
   padding: 20%;
   max-height: 400px;
 }

 #req_background_image {
   background-image: 
    linear-gradient(rgba(0,0,0,.4), rgba(0,0,0,.7)),
    url(./pictures/requirements_back.jpg);
   background-size: cover;
   background-position: center;
   width: 100%;
   padding: 20%;
   max-height: 400px;
 }

 #tech_background_image {
   background-image: 
    linear-gradient(rgba(0,0,0,.4), rgba(0,0,0,.7)),
    url(./pictures/technologies.jpg);
   background-size: cover;
   background-position: center;
   width: 100%;
   padding: 20%;
   max-height: 400px;
 }

 .gray {
   color: #9b9b9b;
 }

 .dates-2 {
   color: #9b9b9b;
 }

 .image-container{
   position: relative;
   display: inline-block;
 }

 .image-container img{
   display: block;
   width: 100%;
   height: auto;
 }

 .gradient {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: linear-gradient(rgba(0, 0, 0, 0.548), rgba(0, 0, 0, 0.842));
 }

 .pad-bottom {
   padding-bottom: 20px;
 }

 hr {
  border: 0; 
  height: 5px; 
  background: linear-gradient(to right, #ccc, hsl(359, 85%, 53%), #ccc); 
  margin: 20px 0;
}

.dropdown-menu{
  background-color: #212529;
}
.dropdown-item{
  background-color:#212529 ;
  color: lightgray;
}

.dropdown-item:hover{
  background-color: #212529;
}

.footer-column a:hover{
  color: hsl(359, 85%, 53%);
}

#red-link:hover{
  color: hsl(359, 85%, 53%);
}