* {
     margin: 0;
     padding: 0;
     font-family: poppins, cinzel, sans-serif;
 }



 #banner {
     background: linear-gradient(rgba(0, 0, 0, 0.5), #009664), url(images/cannabisflower.jpg);
     background-size: cover;
     background-position: center;
     height: 90vh;
 }

 .logo {
     width: 115px;
     position: absolute;
     top: 4%;
     left: 10%;

 }

 .social-link {
     align-items: center;
     display: flex;
     justify-content: center;
 }

 .copyright {
     align-items: center;
     justify-content: center;
     display: flex;
 }

 .banner-text {
     text-align: center;
     color: #fff;
     padding-top: 180px;


 }

 .banner-text h1 {
     font-size: 124px;
 }

 .banner-text p {
     font-size: 20px;
     font-style: italic;
 }

 .banner-btn {
     width: 100% !important;
    display: flex;
    align-items: center;
    justify-content: center;

 }

 .banner-btn a {
    width: 200px;
    text-decoration: none;
    display: flex;
    margin: 20px 10px;
    padding: 12px 0px;
    color: #fff;
    border: .5px solid #fff;
    position: relative;
    z-index: 1;
    transition: color 0.5s;
    align-items: center;
    justify-content: center;
    flex-direction: column;
 }

 .banner-btn a span {
     width: 100%;
 }


 .banner-btn a:hover span {
     width: 100%;
 }

 .banner-btn a:hover {
     color: #000;
 }

 #sideNav {
     width: 250px;
     height: 100vh;
     position: fixed;
     right: -250px;
     top: 0;
     background: #009688;
     z-index: 2;
     transition: 0.5s;
 }

 #sideNav ul li {

     list-style: none;
     margin: 50px 20px;
 }

 #sideNav ul li a {
     text-decoration: none;
     color: #fff;

 }

 #menuBtn {
     width: 50px;
     height: 50px;
     background: #009688;
     text-align: center;
     position: fixed;
     right: 30px;
     top: 20px;
     border-radius: 3px;
     z-index: 3;
     cursor: pointer;


 }

 #menuBtn img {
     width: 28px;
     margin-top: 15px;

 }

 @media screen and (max-width: 770px) {

     .banner-text h1 {
         font-size: 44px;

     }


     .banner-text p {
         display: block;
         margin: 20px auto;

     }



 }

 /*About Us---*/

 #AboutUs {
     width: 100%;
     padding: 70px 0;

 }

 .title-text {
     text-align: center;
     padding-bottom: 70px;

 }

 .title-text p {
     margin: auto;
     font-size: 20px;
     color: #009688;
     font-weight: bold;
     position: relative;
     z-index: 1;
     display: inline-block;
 }

 .title-text p::after {
     content: '';
     width: 50px;
     height: 35px;
     background: linear-gradient(#019587, #fff);
     position: absolute;
     top: -20px;
     left: 0;
     z-index: -1;
     transform: rotate(10deg);
     border-top-left-radius: 35px;
     border-bottom-right-radius: 35px;

 }


 .title-text h1 {
     font-size: 40px;
 }

 .AboutUs-box {
     width: 80%;
     margin: auto;
     display: flex;
     flex-wrap: wrap;
     align-items: center;
     text-align: center;

 }

 .AboutUs {
     flex-basis: 50%;

 }

 .AboutUs-img {
     flex-basis: 50%;
     margin: auto;
     width: 75px;
 }

 .AboutUs-img img {
     width: 65%;
     border-radius: 10px;

 }

 .AboutUs h1 {
     text-align: left;
     margin-bottom: 10px;
     font-weight: 100;
     color: #009688;

 }

 .AboutUs-desc {
     display: flex;
     align-items: center;
     margin-bottom: 40px;

 }

 .AboutUs-icon .fa {
     width: 50px;
     height: 50px;
     font-size: 30px;
     line-height: 50px;
     border-radius: 8px;
     color: #009688;
     border: 1px solid #009688;
 }

 .AboutUs-text p {
     padding: 0 20px;
     text-align: initial;


 }

 @media screen and (max-width: 770px) {
     .title-text h1 {
         font-size: 35px;
     }


     .AboutUs {
         flex-basis: 100%;

     }

     .AboutUs-img {

         width: 55px;

     }

     .AboutUs-img img {
         flex-basis: 55%;

     }

 }

 /*------Services------*/

 #service {
     width: 100%;
     padding: 70px 0;
     background: #efefef;

 }

 .service-box {
     width: 80%;
     display: flex;
     flex-wrap: wrap;
     justify-content: space-around;
     margin: auto;

 }

 .single-service {
     flex-basis: 48%;
     text-align: center;
     border-radius: 7px;
     margin-bottom: 20px;
     color: #fff;
     position: relative;
 }

 .single-service img {
     width: 100%;
    border-radius: 7px;
    height: 450px;
    object-fit: cover;

 }

 .overlay {
     width: 100%;
     height: 100%;
     position: absolute;
     top: 0;
     border-radius: 7px;
     cursor: pointer;
     background: linear-gradient(rgba(0, 0, 0, 0.5), #009688);
     opacity: 0;
     transition: 1s;
 }

 .single-service:hover .overlay {
     opacity: 1;

 }

 .service-desc {
     width: 80%;
     position: absolute;
     bottom: 0;
     left: 50%;
     opacity: 0;
     transform: translateX(-50%);
     transition: 1s;
 }




 hr {
     background: #fff;
     height: 2px;
     border: 0;
     margin: 15px auto;
     width: 60%;
 }

 .service-desc p {
     font-size: 14px;
 }

 .single-service:hover .service-desc {
     bottom: 40%;
     opacity: 1;

 }

 @media screen and (max-width: 770px) {

     .single-service {
         flex-basis: 100%;
         margin-bottom: 30px;

     }

     .service-desc p {
         font-size: 12px;
     }

     hr {
         margin: 5px auto;

     }

     .single-service:hover .service-desc {
         bottom: 25%;


     }
 }

 /*---testimonial-----*/

 #testimonials {
     width: 100%;
     padding: 70px 0;

 }

 .testimonial-row {
     width: 80%;
     margin: auto;
     display: flex;
     justify-content: space-between;
     align-items: flex-start;
     flex-wrap: wrap;

 }

 .testimonial-col {
     flex-basis: 28%;
     padding: 10px;
     margin-bottom: 30px;
     border-radius: 5px;
     box-shadow: 0 10px 20px 3px #00968814;
     cursor: pointer;
     transition: 0.5s;

 }

 .testimonial-col p {
     font-size: 14px;
 }

 .user {
     display: flex;
     align-items: center;
     margin: 20px 0;

 }

 .user-info .fa {
     margin-left: 10px;
     color: #27c0ff;
     font-size: 20px;

 }

 .user-info small {
     color: #27c0ff;
 }

 .testimonial-col:hover {
     transform: translateY(-8px);
 }

 @media screen and (max-width: 770px) {
     .testimonial-col {
         flex-basis: 100%;
     }
 }


 /*----footer----*/

 #footer {
     padding: 100px 0 20px;
     background: #efefef;
     position: relative;

 }

 .footer-row {
     width: 80%;
     margin: 0 auto;
     display: flex;
     justify-content: space-around;
     flex-wrap: wrap;

 }

 .footer-left,
 .footer-right {
     flex-basis: 45%;
     padding: 10px;
     margin-bottom: 20px;

 }

 .footer-right {
     text-align: right;

 }

 .footer-row h1 {
     margin: 10px 0;
 }

 .footer-row p {
     line-height: 35px;
 }

 .footer-left .fa,
 .footer-right .fa {
     font-size: 20px;
     color: #009688;
     margin: 10px;
 }

 .footer-img {
     max-width: 370px;
     opacity: 0.1;
     position: absolute;
     left: 50%;
     top: 35%;
     transform: translate(-50%, -50%);


 }

 .social-link {
     text-align: center;

 }

 .social-link .fa {
     height: 49px;
     width: 40px;
     font-size: 20px;
     line-height: 40px;
     border: 1px solid #009688;
     margin: 40px 5px 0;
     color: #009688;
     cursor: pointer;
     transition: .5s;

 }

 .social-link .fa:hover {
     background: #009688;
     color: #fff;
     transform: translateY(-7px);


 }

 .social-link p {
     font-size: 12px;
     margin-top: 20px;

 }

 @media screen and (max-width: 770px) {



     .footer-left,
     .footer-right {
         flex-basis: 100%;
         font-size: 14px;

     }

     .footer-img {
         top: 25%;

     }

 }