@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400&family=Roboto:wght@100&display=swap');

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

body{
   font-family: 'Open Sans', sans-serif;
   background: #fff;
   color: #333;
   line-height: 1.6; 
}
ul{
   list-style: none;
}
a{
   color:#333;
   text-decoration: none;
}
h1, h2{
   font-weight: 300;
   line-height: 1.2;
}

p{
   margin: 10px 0;

}
img{
   width: 100%;
}
.navbar{
 display: flex;
 align-items: center;
 justify-content:space-between;
 background-color: #333;
 color: #fff;
 opacity: 0.8;
 width: 100%;
 height: 70px;
 position: fixed;
 top: 0px;
 padding:0 30px;
 transition: 0.5s;
}

.navbar.top{
   background: transparent;
}

.navbar a{
   color:#fff;
   padding:10px 20px;
   margin: 0 5px;
}
.navbar a:hover{
   border-bottom: #28a745 2px solid;
}
.navbar ul {
   display: flex;
}
.navbar .logo{
   font-weight: 400;
}

/*Header*/
.hero{
   background: url('../image/home/showcase.jpg') no-repeat center center/cover;
   height: 100vh;
   position: relative;
   color: #fff;
}
.hero.blog{
   background: url('../image/home/blog.jpg') no-repeat center center/cover;
   height: 30vh;
}
.hero .content{
   display: flex;
   flex-direction:column;
   align-items: center;
   justify-content: center;
   text-align: center;
   height: 100%;
   padding: 0 20px;
}
.hero .content .h1{
   font-size: 55px;
}
.hero .content p{
   font-size: 23px;
   max-width: 600px;
   margin: 20px 0 30px;
}

/*Icons*/

.icons{
   padding: 30px;
}
.icons h3{
   font-weight: bold;
   margin-bottom: 15px; 
}
.icons i{
   background-color: #28a745;
   color: #fff;
   padding: 1rem;
   border-radius: 50%;
   margin-bottom: 15px;
}
.cases img:hover{
   opacity: 0.7;
}
.team img{
   border-radius: 50%;
}
/*Callback form*/
.callback{
   width: 100%;
   padding: 20px 0;
}
.callback label{
   display: block;
   margin-bottom: 5px;
}
.callback .form-control{
   margin-bottom: 15px;
}
.callback input{
   width: 100%;
   padding: 4px;
   height: 40px;
   border: #f5f5f5 1px solid;
}
.callback input:focus {
 outline-color: #28a745;
}
.callback .btn{
   padding: 12px 0;
   margin-top:20px;
}
/*Post*/
.post{
   padding: 50px 30px;
}
.post h2{
   font-size: 40px;
   margin-bottom: 20px;
   padding-bottom: 10px;
   border-bottom: #ccc solid 1px;
}
.post .meta{
   margin-bottom: 30px;
}
.post img {
   width:300px;
   border-radius: 50%;
   display: block;
   margin: 0 auto 30px;
}
/*Footer*/
.footer{
   display: flex;
   flex-direction:column;
   align-items: center;
   justify-content: center;
   text-align: center;
   height: 200px;
}
.footer a{
   color: #fff;
}
.footer a:hover{
   color: #28a745;
}
.footer .social > *{
   margin-right: 30px;
}

/*Mobile*/

@media(max-width:768px){
   .navbar{
      flex-direction: column;
      height: 120px;
      padding: 20px;
   }
   .navbar a {
      padding: 10px 10px;
      margin: 0 3px;
   }

   .flex-items{
      flex-direction: column;
   }
   .flex-columns .column, .flex-grid .column{
      flex: 100%;
      max-width: 100%;
   }
   .team img{
      width: 70%;
   }
}