home1.css

body{
  padding:0;
  margin:0;
  border:0;
  font-family:"Monospace"
}
.main
{
  display:grid;
  grid-template-rows: auto auto auto auto auto auto;
  background-color: transparent;
}

.nav
{
  background-color: white;
  color:MediumSeaGreen;
  opacity:1;
  grid-row:1/2;
  display:grid;
  grid-template-columns:  1fr 10fr 1fr;
  grid-template-rows: auto auto;

}

.nav-head
{
  grid-row:1/2;
  grid-column:2/3;
  display:flex;
  align-items: center;
  justify-content: center;
  animation:fadeInDownBig 1s 1;
}

.navig
{

  background-color: transparent;
  grid-column: 2/3;
  grid-row:2/3;
  display:flex;
  flex-direction: row;
  flex-wrap:wrap;
    border-bottom:2px solid black;
    align-items: center;
  justify-content: center;
}



@media screen and (max-width: 650px) {
  body .main .nav .navig p:first-of-type{
    font-size:70%;
  }
  body .main .nav .navig img:first-of-type{
    width:50%;
  }
}
@media (min-width: 650px) and (max-width: 768px) {
  body .main .nav .navig p:first-of-type{
    font-size:110%;
  }
  body .main .nav .navig img:first-of-type{
    width:50%;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  body .main .nav .navig p:first-of-type{
    font-size:150%;
  }
  body .main .nav .navig img:first-of-type{
    width:60%;
  }
}

.head
{
  grid-row:2/3;
  /* background-image: url("images/2.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed; */
  /* background-color: MediumSeaGreen; */
  /* background-color: #7FFF00; */
      background: linear-gradient(to bottom,white,grey);
    background-color: white;
  color:black;
  display:grid;
  grid-template-columns: 1fr 8fr 1fr;
  grid-template-rows: 9fr 1fr;
  grid-gap:10px;

}

.head-content
{
  text-shadow: 0 0 10px transparent ;
  text-align: center;
  font-weight: bold;
grid-row:1/2;
grid-column:2/3;
margin-top:30px;
display:grid;
grid-template-rows: auto auto auto auto;
grid-gap:50px;
}

.head-1
{
  grid-row:1/2;
box-shadow: 0 0 15px black;
/* padding:10px; */
display:flex;
flex-direction: row;
margin:auto;
  background-color: white;
  /* animation:bounceInLeft 2s 1; */
}

.head-1-2
{
  display:flex;
  flex-direction: column;
}

.head-1-1
{
  display:flex;
  flex-direction: column;
  margin:30px;
}

.head-2
{
    grid-row:3/4;

box-shadow: 0 0 15px black;
/* padding:10px; */
display:flex;
flex-direction: row;
margin:auto;
  background-color: white;
  /* animation:bounceInLeft 2s 1; */
}

.head-2-1
{
  display:flex;
  flex-direction: column;
  margin:30px;
}

.head-2-2
{
  display:flex;
  flex-direction: column;
}

.head-content p:first-child
{

  font-size:250%;
}

.head-content p:nth-child(2)
{
  font-size:110%;
    font-weight: lighter;
}



@media screen and (max-width: 650px) {
  body .main .head .head-content p:first-child{
    font-size:150%;
  }
body .main .head .head-content p:nth-child(2){
  font-size:90%;
}
}
@media (min-width: 650px) and (max-width: 768px) {
  body .main .head .head-content p:first-child{
    font-size:200%;
  }
  body .main .head .head-content p:nth-child(2){
    font-size:100%;
  }
}
@media (min-width: 768px) and (max-width: 992px) {
  body .main .head .head-content p:first-child{
    font-size:250%;
  }
  body .main .head .head-content p:nth-child(2){
    font-size:110%;
  }
}

@media (min-width: 992px) and (max-width: 1160px) {
  body .main .head .head-content p:first-child{
    font-size:300%;
  }
  body .main .head .head-content p:nth-child(2){
    font-size:120%;
  }
}

.dummy
{
  grid-row:3/4;
  height:300px;
  background-image: url("images/9.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
}

.approach
{
  grid-row:4/5;
  /* background-image: url("images/8.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed; */
  /* background-color: MintCream; */
        background: linear-gradient(to bottom,white,lightgrey);
  background-color: white;
  color:white;
  display:flex;
flex-direction: column;
display:grid;
grid-template-columns: 1fr 8fr 1fr;


}


.approach-content
{

    text-shadow: 0 0 10px white ;
    font-weight: bold;
    grid-column:2/3;
    display:flex;
    flex-direction: row;
    flex-wrap:wrap;

}

.approach-c1
{
  background-color: white;
  border-bottom:2px solid transparent;
  border-radius:20px;
    color:black;
    height:600px;
    width:450px;
    box-shadow: 0 0 20px black;
  margin-left:auto;
  margin-top:30px;
  margin-bottom:30px;
    margin-right:auto;
    display:flex;
    flex-direction: row;
    flex-wrap:wrap;
}
.a-c1-1
{
  display:flex;
  height:50%;
  width:100%;
}

.a-c1-2
{
    display:flex;
    text-align:center;
    justify-content: center;
    flex-direction: row;
    flex-wrap:wrap;
    width:100%;
    height:50%;
  padding:10px;
}

.approach-c2
{
  background-color: white;
    color:black;
    border-bottom:2px solid transparent;
    border-radius:20px;
    height:600px;
    width:450px;
    box-shadow: 0 0 20px black;
  margin-left:auto;
  margin-top:30px;
  margin-bottom:30px;
    margin-right:auto;
    display:flex;
    flex-direction: row;
    flex-wrap:wrap;
}
.approach-c3
{
  background-color: white;
    color:black;
    height:600px;
    border-bottom:2px solid transparent;
    border-radius:20px;
    width:450px;
    box-shadow: 0 0 20px black;
  margin-left:auto;
  margin-top:30px;
  margin-bottom:40px;
    margin-right:auto;
    display:flex;
    flex-direction: row;
    flex-wrap:wrap;
}
.approach-c4
{
  background-color: white;
    color:black;
    border-bottom:2px solid transparent;
    border-radius:20px;
    height:600px;
  width:450px;
    box-shadow: 0 0 20px black;
  margin-left:auto;
  margin-top:30px;
  margin-bottom:40px;
    margin-right:auto;
    display:flex;
    flex-direction: row;
    flex-wrap:wrap;
}

.approach-head
{
  /* background-color: MintCream; */
  color:black;
  /* border-bottom:2px solid black; */
  font-weight: bold;
  text-shadow: 0 0 10px white ;
  grid-column: 2/3;

}

.content
{
  color:white;
  /* background-image: url("images/41.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed; */
  background: linear-gradient(to bottom,lightgrey,grey);
  background-color: lightgrey;
  grid-row:5/6;
  display:grid;
  grid-template-columns: 1fr 8fr 1fr;
  grid-template-rows:2fr 1fr ;


}

.c-content
{
  color:black;;
  /* font-weight: bold; */
  /* text-shadow: 0 0 10px white ; */

  grid-row:1/2;
  grid-column:2/3;
}

.footer
{
  background-color: #161518;
  color:MediumSeaGreen;
  grid-row:6/7;
   text-shadow: 0 0 10px MediumSeaGreen ;
  display:flex;
  flex-direction:row;
  flex-wrap:wrap;
  text-align:center;
  padding-top: 10px;
    padding-bottom: 10px;
}

.f-1
{
margin-left: auto;
margin-right: auto;
}

.f-2
{
  margin-left: auto;
  margin-right: auto;
}

.f-3
{
  margin-left: auto;
  margin-right: auto;
}

.f-4
{
  margin-left: auto;
  margin-right: auto;
}
.nav-button
{

  color:black;
  font-size:113%;
  padding:0%;
  text-align:center;
    font-weight: bold;
        padding:10px;
  animation:fadeInDownBig 2s 1;

  }

.nav-button:hover
{

  background-color: black;
  color:white;
  border 1px solid black;
  border-radius: 10px;
}
  .button{
   display: inline-block;
   font-family: 'Montserrat';
   background-color: black;
   border:1px solid transparent;
   border-radius: 10px;
   color: white;
   padding: 12px 22px;
   text-align: center;
   text-decoration: none;
   font-weight:bold;
   display: inline-block;
   font-size: 14px;
   margin: 4px 2px;
   cursor: pointer;
     outline: none;

  }

  .button:hover{

box-shadow: 0 0 18px black;

  }


  @keyframes neo
  {
    0% {
      text-shadow: 0 0 10px white ,
                   0 0 20px MediumSeaGreen ,
                   0 0 22px MediumSeaGreen ;
    }
    100% {
      text-shadow: 0 0 2px white
                   0 0 8px MediumSeaGreen ,
                   0 0 10px MediumSeaGreen ,
                   0 0 20px MediumSeaGreen ,
                   0 0 30px MediumSeaGreen ,
                   0 0 40px MediumSeaGreen,
                   0 0 50px MediumSeaGreen ;

    }
  }

  @keyframes fadeInDownBig {
    from {
      opacity: 0;
      -webkit-transform: translate3d(0, -2000px, 0);
      transform: translate3d(0, -2000px, 0);
    }

    to {
      opacity: 1;
      -webkit-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
    }
  }

  @keyframes bounceInLeft {
    from,
    60%,
    75%,
    90%,
    to {
      -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
      animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    }

    0% {
      opacity: 0;
      -webkit-transform: translate3d(-3000px, 0, 0);
      transform: translate3d(-3000px, 0, 0);
    }

    60% {
      opacity: 1;
      -webkit-transform: translate3d(25px, 0, 0);
      transform: translate3d(25px, 0, 0);
    }

    75% {
      -webkit-transform: translate3d(-10px, 0, 0);
      transform: translate3d(-10px, 0, 0);
    }

    90% {
      -webkit-transform: translate3d(5px, 0, 0);
      transform: translate3d(5px, 0, 0);
    }

    to {
      -webkit-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
    }
  }