*{
  margin: o;
  padding: 0;
  box-sizing: border-box;
  scroll-behavior: smooth
  }

html{
  font-family: 'Josefin Sans', sans-serif;
  font-size: 16px;

}


body{
margin: 0;
background: #cecece73;
}

nav{

  background-color: #e0e0e0;
  width: 100%;
  height: 100px;
  position: fixed;
  z-index: 999;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 30px ;
 }
 .navbar a{
  color: #1616b1;
  text-decoration: none;
  text-align: center;
  justify-content: center;
  font-size: 1.3em;
  font-weight: 700;
  transition: all 0.3s ease;
   transition: all 0.3s ease-in-out;
 }

nav ul {
 margin-right: 20px;
 
}

nav ul li {
 
 line-height: 80px;
 display: inline-block;
 list-style: none;
 margin: 0 5px;
}
 .navbar a:hover{
  color: #d6550b;
 }
 .logo{
  height: 80px;
  width: 170px;
  cursor: pointer;}

  .checkbtn{
      font-size: 30px;
      color: #070d5c;
      float: right;
      line-height: 80px;
      margin-right: 40px;
      cursor: pointer;
      display: none;
    }

    #check{
      display: none;
    }
    #srvc{
      color: #d6550b;
     }
     #create{
      margin-right: 440px;
      cursor: pointer;
      font-size: 1.5em;
     }

     h3{
      text-align: center;
      font-size: 26px;
      color: #2c9caf;
      margin: 0;
      padding-top: 10px;
     }

     #id{
      font-size: 10px;
     }

     section{
      width: 100%;
      min-height: 100vh;
      display: flex;
      align-items: center;
      background: url(img/cooop.png) no-repeat;
      background-size: cover;
      background-position: center;
      background-attachment: fixed;
     }

     a{
      text-decoration: none;
     }

     .gallery{
      display: flex;
      flex-wrap: wrap;
      width: 100%;
      justify-content: space-evenly;
      align-items: center;
      margin: 50px 0;
      margin-top: 90px;
     }

     .content{
      width: 20%;
      margin: 15px;
      box-sizing: border-box;
      
      float: left;
      text-align: center;
      border-radius: 20px;
      cursor: pointer;
      padding-top: 10px;
      box-shadow: 0 14px 28px rgba(0,0,0,0.25),
      0 10px 10px rgba(0,0,0,0.22);
      transition: .4s;
      background: #f2f2f2;
     }

     .content:hover{
      box-shadow: 0 3px 6px rgba(0,0,0,0.16),
      0 3px 6px rgba(0,0,0,0.23);
      transform: translate(0px, -8px);
     }

     .gallery img{
      width: 100%;
      height: 200px;
      text-align: center;
      margin: 0 auto;
      display: block;
      border-radius: 20px;
     }

     p{
      text-align: center;
      color: #b2bec3;
      padding-top: 0 8px;
     }
    
     h6{
      font-size: 26px;
      text-align: center;
      color: #222f3e;
      margin: 0;
     }

     del{
      color: #b2bec3;
      font-size: 22px;
     }
     
     .gallery ul{
      list-style: none;
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 0;
     }

     .gallery li{
      padding: 5px;
     }

     section .fa{
      font-size: 26px;
      transition: .4s;
      
     }

     .checked{
      color: #268391;
     }

     section .fa:hover{
      transform: scale(1.3);
      transition: .6s;
     }

     .button {
      text-align: center;
      font-size: 24px;
      width: 100%;
      padding: 1em 2em;
      border: 0;
      border-radius: 5px;
      font-weight: bold;
      border-bottom-right-radius: 20px;
      border-bottom-left-radius: 20px;
      margin-top: 5px;
      letter-spacing: 5px;
      text-transform: uppercase;
      cursor: pointer;
      color: #2c9caf;
      transition: all 1000ms;
      font-size: 15px;
      position: relative;
      overflow: hidden;
      outline: 2px solid #2c9caf;
    }
    
    button:hover {
      color: #ffffff;
      transform: scale(1.1);
      outline: 2px solid #70bdca;
      box-shadow: 4px 5px 17px -4px #268391;
    }
    
    button::before {
      content: "";
      position: absolute;
      left: -50px;
      top: 0;
      width: 0;
      height: 100%;
      background-color: #2c9caf;
      transform: skewX(45deg);
      z-index: -1;
      transition: width 1000ms;
    }
    
    button:hover::before {
      width: 250%;
    }

    .calendly-inline-widget{
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: 90px;
  
      
    }
    
    @media(max-width:1000px){
      .content{
        width: 45%;

      }
    }

    @media(max-width:750px){
      .content{
        width: 100%;
        
      }
      #create{
        display: none;
      }
    }

    @media screen and (max-width: 981px){
      #create{
        display: none;
      }

    }

    @media screen and (max-width: 526px){
      #srvc{
        font-size: 13px;
      }  
    }

    @media screen and (max-width: 427px){
      #srvc{
        font-size: 12px;
      }
      .logo{
        width: 120px;
        height: 50px;
      }
    }

    @media screen and (max-width: 364px){
      #srvc{
        font-size: 12px;
      }
      .logo{
        width: 100px;
        height: 30px;
      }
    }