@import './bootstrap.min.css';
@import './all.min.css';



*{
margin: 0;
padding: 0;
box-sizing: border-box;}

:root{
  --bgcolor: #eff2f1 ;
  --firstcolor: #4059ad;
  --secondcolor: #97d8c4;
  --thirdcolor: #f4b942;
  --textcolor: #424242;
  --border-radius: 5px;
  
  
}

body{
 background-color: var(--bgcolor);
 color: var(--textcolor);
 

}
main h3 {
    text-align: right;
    color: var(--textcolor);
    margin-right: 2rem;
}


header img{
  width: 100%;
position: absolute;

}

header .logo{
  height: 5rem;
  width: 6rem;
  position: absolute;
  margin-left: 47%;
  margin-top: 1rem;
}
header .home{
height: 2rem;
width: 2rem;
display: block;
margin-left: 4%;
margin-top: 3%;
}


.bikeimg{
  display: block;
  margin-right: auto;
  margin-left: auto;
}


.column {
    float: left;
    width:23%;
    padding: 1rem;
    margin-right: auto;
    margin-left: auto;
  }
  
  /* Style the images inside the grid */
  .column img {
    max-width: 100%;
    height: 100%;
    opacity: 0.8; 
    cursor: pointer;
    transition: all .3s;
  }
  
  .column img:hover {
    opacity: 1;
  }
  
  /* Clear floats after the columns */
  .row:after {
    content: "";
    display: table;
    clear: both;
  }
  
  /* The expanding image container */
  .container {
    position: relative;
    display: none;
  }
  
  /* Expanding image text */
  #imgtext {
    position: absolute;
    bottom: 15px;
    left: 15px;
    color: white;
    font-size: 20px;
  }
  
  /* Closable button inside the expanded image */
  .closebtn {
    position: absolute;
    top: 10px;
    right: 15px;
    color: white;
    font-size: 35px;
    cursor: pointer;
  }


  video{
      width: 50%;;
      display: block;
      margin-right: auto;
      margin-left: auto;
      margin-top: 2rem;
  }

  main h5,h4, p{
      text-align: center;
      padding: .5rem;
     
  }
main h6, ul li{
  text-align: right;
  margin-right: 2rem;
}
  main .subjects{
     margin-top: .5rem;
    background-color: var(--thirdcolor);
    width: 40%;
     display: block;
     margin-right: auto;
     margin-left: auto;
     border-radius: 20px;
  }


  @media (max-width: 991.98px) { 
    .logo{display: none;}
  }