/*============= COURSE SECTION =============*/

body{
  overflow-x: hidden ;
  font-family: 'Lato' , sans-serif;
  color: #505962 ;
}

a.college{
  color: white ;
}

a:hover{
  color: 	#00FF7F ;
  text-decoration: underline;
}

.offset:after{
  display: block ;
  content: "" ;
  height: 4rem ;
  margin-top: -4rem ;
}

/* Navigation */
.navbar{
  text-transform: uppercase;
  font-weight: 700;
  font-size: 0.9rem ;
  letter-spacing: 0.1rem ;
  background-color: rgba(0, 0, 0, 0.4)!important;
}

.navbar-brand img{
  height: 3rem ;
}

.navbar-nav li{
  padding-right: 0.7rem ;
}

.navbar-dark .navbar-nav .nav-link{
  color: white ;
  padding-top: 0.8rem ;
}

.navbar-dark .navbar-nav .nav-link.active,
.navbar-dark .navbar-nav .nav-link:hover{
  color: #0067a5 ;
}

.ilogo{
  width: 100% ;
  max-width: 250px ;
  min-width: 110px ;
  height: auto;
}

/* Landing Page */
.home-inner{
  background-image: url("../img/auv2.png") ;
}

.caption{
  width: 100% ;
  max-width: 100% ;
  position: absolute;
  top: 38% ;
  z-index: 1 ;
  color: white ;
  text-transform: uppercase;
}
.caption h1{
  font-size: 3.8rem ;
  font-weight: 700;
  letter-spacing: 0.3rem ;
  text-shadow: 0.1rem 0.1rem 0.8rem black ;
  padding-bottom: 1rem ;
}

.caption h3{
  font-size: 2rem ;
  text-shadow: 0.1rem 0.1rem 0.5rem black ;
  padding-bottom: 1.6rem ;
}
.narrow h1 {
    font-size: 2.4rem;
  }

.flogo{
  padding-bottom: 1rem ;
}

.sauvl{
  width: 15% ;
  max-width: 15% ;
  height: auto ;
}

.ref{  /*to give the reference in anchor tag */
  z-index: 100 ;
}

.mempic{
  width: 75% ;
  max-width: 75% ;
  height: auto ;
}

.fun{
  width: 100% ;
  margin-bottom: 2rem ;
  margin-left: 1rem ;
  background-color: #0067a5 ;
}

.elogo{  //for the footer logo
  width: 100% ;
  max-width: 100% ;
  height: auto;
}

.btn-secondary {
  border-width: medium;
  border-radius: 0;
  padding: .6rem 1.2rem;
  font-size: 1.2rem;
  text-transform: uppercase;
  margin: 1rem;
  border-color: #1EBBA3;
  background-color: #1EBBA3;
  color: white;
}
.btn-secondary:hover,
.btn-secondary:focus {
  border-color: #189582;
  background-color: #189582;
  color: white;
}

/* start of about */
.narrow {
  width: 75%;
  margin: 1.5rem auto;
  padding-top: 2rem;
}

.dark2{
  background-color: rgba(0,0,0,0.25) ;
  color: white ;
  padding: 7rem 2rem ;
}

.narrow h1{
  font-size: 2.4rem ;
}

/* start of drone */

.jumbotron{
  margin-bottom: 0 ;
  padding: 2rem 0 3.5rem ;
  border-radius: 0 ;
}

h2.heading {
  font-size: 1.9rem ;
  font-weight: 700;
  font-transform: uppercase ;
  margin-bottom: 1.9rem ;
}
.heading-underline{
  width: 3rem ;
  height: 0.2rem ;
  background-color: #0067a5 ;
  margin: 0 auto 2rem ;
}
.feature h3{
  font-size: 1.3rem ;
  text-transform: uppercase;
  padding-bottom: 0.4rem ;
}
.feature p{
  font-size: 1.1rem ;
}
/* Achievements */
.fixed {
  background-image: url("../img/sfix.jpg");
  z-index: -5 ;
}

/*.fixed-background{

}*/

.dark{
  background-color: rgba(0,0,0,0.65) ;
  color: white ;
  padding: 7rem 2rem ;
}
.fixed-background h3{
  margin-bottom: 2rem ;
}

.fixed-background p{
  margin-top: 1.5rem ;
}

/* memebers */
#mlist {
  margin: 1rem ;
  font-size: 1.1rem ;
  color: #1ebba3 ;
}
.member-hr{
  border-top: 0.2rem solid #0067a5;
}
.member-heading{
  padding-top: 1.8rem ;
}

/* contact section */
footer{
  background-color: #40474e ;
  color: white ;
  padding: 2rem 0 2rem ;
  margin-top: 1rem ;
}
footer img{
  height: 3rem ;
  margin: 1.5rem 0 ;
}
.social a{
  font-size: 1.6rem ;
  margin: 1.2rem 0.5rem 0 0 ;
}

.fa-facebook{
  color: #3b5998 ;
}
.fa-instagram{
  color: #c32aa3 ;
}

.fa-youtube{
  color: #bb0000 ;
}
.fa-facebook: hover , .fa-instagram: hover , .fa-youtube: hover{
  color: #d5d5d5 ;
}
hr.socket{
  width: 100% ;
  border-top: 0.2rem solid #666b71 ;
  margin-top: 2rem ;
}

/* media queries */
@media (max-width: 767px){
  .caption h1{
    font-size: 2.3rem ;
    letter-spacing: 0.15rem ;
    padding-bottom: 0.5rem ;
  }

  .caption h3{
    font-size: 1.2rem ;
    padding-bottom: 1.2rem ;
  }
  .narrow h1{
    font-size: 1.5rem ;
  }
  .mempic{
    max-width: 40% ;
    display: block;
    margin: 0 auto;
    height: auto ;
  }
  
  .ppic img{
    max-width: 25% ;
    margin: 0 auto ;
    height: auto; 
  }

  .ilogo{
    width: 50% ;
    max-width: 180px ;
    height: auto;
  }

}

/*============ BOOTSTRAP BREAK POINTS:

Extra small (xs) devices (portrait phones, less than 576px)
No media query since this is the default in Bootstrap

Small (sm) devices (landscape phones, 576px and up)
@media (min-width: 576px) { ... }

Medium (md) devices (tablets, 768px and up)
@media (min-width: 768px) { ... }

Large (lg) devices (desktops, 992px and up)
@media (min-width: 992px) { ... }

Extra (xl) large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }

=============*/