/* Responsive */
  @media (max-width: 991px){
    header,
    header.sticky{
        padding: 10px 30px;
    }
    .menu{
        position: fixed;
        top: 68px;
        left: -100%;
        display: block;
        text-align: center;
        padding: 100px 50px;
        width: 100%;
        height: 100vh;
        background: #fff;
        transition: 0.5s;
        z-index: 999;
        border-top: 1px solid rgba(0, 0, 0, 0.2);
    }

    .menu.active{
        left: 0;
    }

    header ul li a{
        color: black;
        font-size: 20px;
        margin: 10px;
    }

    .toggle{
        width: 40px;
        height: 30px;
        background: url("../images/menu.png");
        background-position: center;
        background-repeat: no-repeat;
        background-size: 30px;
        cursor: pointer;
    }

    .toggle.active{
      background: url("../images/close.png");
      background-position: center;
      background-repeat: no-repeat;
      background-size: 25px;
      cursor: pointer;
  }

  header.sticky .toggle{
      filter: invert(3);
  }

  header.sticky .logo{
      color: #111;

  }
  .bannner section{
      padding: 100px 50px;
  }

  .banner{
      padding: 100px 20px 100px;
  }
  .textBx{
      text-align: center;
  }

  .banner h2{
      font-size: 38px;
  }

  .banner p{
      margin-top: 20px;
      font-size: 16px;
  }
  .btn{
      margin-top: 10px;
      padding: 10px 20px;
      font-size: 16px;
  }

}

@media (max-width: 768px){
    header,
    header.sticky{
        padding: 20px 20px;
    }
    header .logo{
        font-size: 20px;
    }

    .banner{
        padding: 150px 20px 100px;
    }

    .about_flex {
        display: initial !important;
      }
    
      .about_detail {
        width: 90% !important;
        margin-left: 5%;
        margin-right: 5%;
        text-align: justify;
      }
    
      .about_img {
        width: 90% !important;
        margin-left: 5%;
        margin-right: 5%;
      }
    
    
      .about_detail p{
          font-size: 16px;
          text-align: justify;
      }


      .overview_flex {
        display: initial !important;
      }
    
      .overview_detail {
        width: 90% !important;
        margin-left: 5%;
        margin-right: 5%;
      }

      .overview h2 {
        text-align: center;
        color: coral;
        font-size: 24px;
      }

      .overview_detail p {
        font-size: 16px;
        text-align: justify;
      }
    
      .overview_img {
        width: 90% !important;
        margin-left: 5%;
        margin-right: 5%;
      }
      .boxes .card{
        width:50%;
        margin-bottom:20px;
      }

      .para_flex {
        display: initial !important;
      }
    
      .para_detail {
        width: 90% !important;
        margin-left: 5%;
        margin-right: 5%;
      }

      .para h2 {
        text-align: center;
        color: coral;
        font-size: 24px;
      }

      .para h1{
        font-size: 30px;
      }

      .para h4{
        text-align: center;
      }

      .para_detail p {
        font-size: 16px;
        text-align: justify;
      }
    
      .para_img {
        width: 90% !important;
        margin-left: 5%;
        margin-right: 5%;
      }

      

      
}

@media (max-width: 678px){
      .boxes .card{
        width:100%;
      }
      
      .boxes p{
        font-size: 15px;
        text-align: center;
      }
  
      .boxes h1{
        font-size: 30px;
      }
}