@import url('https://fonts.googleapis.com/css2?family=Balsamiq+Sans:wght@700&family=Roboto+Slab&display=swap');

:root{
    --primary-color:var(--off-white); 
    --yellow-color:#A2CDCD;
    
    --light-yellow:cornsilk;
    --off-white:#E8F6EF;
    --greenme:#A2CDCD;

}
body{
    font-family: 'Balsamiq Sans', cursive;
    color: black;
    background-color: var(--off-white);
    


}
h1{
     
    color:#4B6587;
    font-family: 'Roboto Slab', serif;
    text-align: center;
    padding: 2rem;
    background-color:var(--yellow-color);

}
.h2{
    
    padding:  3rem,3rem,3rem,3rem;
    text-align: center;
    font-size: 25px;
    color:whitesmoke;
}

.container{
    padding-left: 14%;
    padding-right: 14%;
    padding-bottom: 1rem;
}
/** Fluid container is used for navs!**/
.container-center{
    max-width: 600%;
    margin:auto;
}
/**Links**/
.primary{
    color:red;
}
/* Style the navigation bar */
.navbar {
    width:100%;
    background-color:#A2CDCD;
    overflow: auto;
    margin:0.5%;
    color:#0483aa;
    border-top-left-radius :2rem;
    border-bottom-right-radius: 2rem;
    
    
  }
  
  /* Navbar links */
  .navbar a {
    float: right;
    text-align:center;
    padding: 10px;
    color: white;
    text-decoration: none;
    font-size: 150%;
    margin:2px;
    
  }
  
  /* Navbar links on mouse-over */
  .navbar a:hover {
    background-color:#0483aa;
  }
  
  
  
  /* Add responsiveness - will automatically display the navbar vertically instead of horizontally on screens less than 500 pixels 
  @media screen and (max-width: 500px) {
    .navbar a {
      float: none;
      display: block;
      
    }
  }*/
  /*header-Block*/
  
  .hero{
      padding:1rem;
      background-color: var(--yellow-color);
      border-top-right-radius: 4rem;
      border-top-left-radius: 4rem;
      border-bottom-right-radius: 4rem;
      border-bottom-left-radius: 4rem;
    
  }
  .hero-img{
      max-width:50%;
      display:block;
      margin:auto;

  }
  .hero hero-heading{
      font-size: 10% ;
      
     
  }
  .hero h4{
    text-align: center;
    font-size:small;
    color:teal;
}

/**______________________________________________________________________________________________________________________________                      section Class        **/

.section{
    background-color: var(--off-white);
    padding: 2rem;
    border:#0483aa;
    border-radius:2rem;
}

.section h1 {
  text-align: center;

}

.ow {
  background-color: var(--off-white);
}

.Project{
    background-color: var(--yellow-color);
    padding :2rem;
    border:#0483aa;
    border-radius:2rem;
}
.blogs{
    background-color: var(--light-yellow);
    padding :2rem;
    border:#0483aa;
    border-radius:2rem;
}
/** sections **/



  /*LISTS*/
  
.list-item-inline {
  display: inline;
  padding: 0rem 0.5rem;
}
/* Current/active navbar link */


  .link {
    box-sizing: border-box;
    text-decoration: none;
    padding: 0.5rem 1rem;
}

.link-primary {
    background-color: var(--greenme);
    border-radius: 0.5rem;
    color: --yellow-color;
    display: block;
    max-width: 140px;
    margin: 1rem 1rem 1rem 0rem;
}

.link-secondary {
    color: --light-yellow;
    border-radius: 0.5rem;
    border: 1px solid var(--primary-color);
    display: block;
    max-width: 140px;
    margin: 1rem 1rem 1rem 0rem;
}



  /*Footer section*/
  .footer{
    width: 100%;
    background-color:#A2CDCD;
    overflow: auto;
    border-top-right-radius: 1rem;
    border-top-left-radius:1rem;
  }
  .footer a{

    float: center;
    text-align: center;
    padding: 12px, ;
    color: white;
    text-decoration: none;
    font-size: 17px;
    margin: 5px;
  }
/*BLOGS*/
.blog-img{
  width: 90%;
  height: 90%;
  
}
.project-img{
  
  width:40%;
  height:40%;
  margin-left: 26%;
  padding: 1%;;

  
}
.button {
  border: 4000 rem;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 14px 12px;
  cursor: pointer;
  
}
.button1 {background-color:#073e50; } /* Green */
.button2  {background-color:var(--light-yellow) ;}