/* MEDIA QUERY */
@media (max-width: 700px) {
    /* container */
    .container {
      margin: 0 2px;
      padding: 0 20px;
    }
    
    /* navbar */
    .navbar .container {
      margin: 0 0;
    }

    .navbar .active {
      color: #6052cc;
      /* background-color: #555; */
    }

    .navbar h1 img {
      /* width: 80px; */
      height: 25px;
      object-fit: cover;
    }

    .nav-links {
      height: 210px;
    }

    .nav-links ul li {
      height: 43px;
    }
  
    /* .nav-links li:hover {
    background-color: #555;
    } */
  
    .nav-links a:hover {
      color: #6052cc;
    }
  
    .navbar ul li {
      position: relative;

    }
    .navbar ul li ul.dropdown {
      width: auto;
      background-color: #e9e9e9;
      /* background-color: red; */
          position: absolute;
          /* right: 30px; */
          left: 90px;
          top: 10px;
          /* display: block; */
    }

    .navbar ul li ul.dropdown li {
      display: block;
    }

    /* Navigation */
    .menu-bars {
      display: inline;
    }
  
    .navbar .nav-links {
      display: none; 
      width: 100vw;
      position: absolute;
      left: 0;
      top: 80px;
    }
  
    .navbar .flex{
      flex-direction: column;
      align-items: flex-start;
      justify-content: center;
    }
  
    .navbar h1 {
      margin-top: 10px
    }
  
    .navbar ul {
      flex-direction: column;
      width: 100%;
    }
  
    .navbar .active-2 {
      display: flex;
      background-color: #e9e9e9;
    }
  
    /* Header */
    .flex1 {
      width: 90%;
    }
  
    .side-row {
      width: 250px;
    }
  
    .mySlides img {
      height: 70vh;
    }
  
    .mySlides .project-title {
      font-size: 25px;
      right: -20px;
    }
  
    .mySlides .flex2 {
      left: -8px;
      font-size: 15px;
    }

    .side-row {
      width: 10%;
    }
  
    .side-row .arrow {
      top: 28px;
      left: 13px;
      padding: 4px;
    }
  
    .dots {
      position: absolute;
      bottom: 45px;
      left: 25px;
    }
    .dot {
      width: 13px;
      height: 13px;
      margin: 0 5px;
    }

    
    /* About us */
    .about-us .flex {
      width: auto;
    }
  
    .about-us {
      padding: 10px 0;
    }
  
    .about-us h3 {
      font-size: 35px;
      line-height: 50px;
    }
  
    .about-us .seperator {
      margin-top: 2px;
      margin-bottom: 20px;
    }
    .about-us .container {
      flex-direction: column;
    }
  
    .about-us .about-info {
      width: 100%;
    }
  
    .about-us .about-info h1 {
      font-size: 60px;
      color: 6052cc;
      margin-bottom: 5px;
      text-transform: uppercase;
    }

    .about-us .about-info h3 {
      font-size: 30px;
    } 
    .about-info p {
      font-size: 15px;
      line-height: 1.5rem;
    }

    .about_list li {
      font-size: 15px;
    }

    .boxed-btn {
      margin-top: 0px;
      padding: 12px 8px;
      font-size: 12px;
    }

    .about-us .about-img img {
      width: 100%;
      object-fit: cover;
      margin-top: 20px;
      height: auto;
    }
  
    .about-us .circle1 {
      width: 75px;
      height: 75px;
    }

    .flex .about-img {
      order: 1;
    }
  
    .flex .about {
      /* width: auto; */
      width: 100%;
      order: 2;
    }

    .about-us .circle1 {
      left: 50%;
    }
  
    /* Services */
    .services {
      margin-top: 80px;
    }
  
    .services h3 {
      font-size: 30px;
    }
   
    .services h1 {
      margin-bottom: 3px;
    }
    .services .services-container {
      margin-top: 10px;
      margin-bottom: 80px;
      flex-direction: column;
    }
  
    .services .card {
      width: 100%;
      margin-top: 40px;
      position: relative;
    }
  
    .circle {
      width: 130px;
      height: 130px;
      margin: 0 auto;
    }

    .services img {
      height: 200px;
      margin: 0 auto;
    }
  
    .services p {
      line-height: 1.5rem;
    }

    .services .heading {
      margin-bottom: 0px;
    }
  
    /* Project */
    .project .project-info {
      width: 100%;
      margin-right: 0px;
    }
  
    .project .project-img img {
      width: 100%;
      height: 400px;
      object-fit: cover;
      margin-top: 30px;
    }
  

    .project .project-info2 {
      width: 100%;
      margin-left: 0px;
    }

    .project .flex li {
      font-size: 18px;
    }
    
    .project .project-img2 img {
      width: 100%;
      /* height: 600px; */
      /* object-fit: cover; */
    }
  
    .project h3 {
      font-size: 40px;
    }
  
    .project .seperator {
      margin-top: 10px;
      margin-bottom: auto;
    }

    .project h2 {
      margin-bottom: auto;
    }

    .project .flex p {
      margin-bottom: 10px;
    }
  
    /* Testimonial */
    .testimonial {
      margin-top: 0px;
    }
  
    .testimonial .sub-heading {
      margin-bottom: 0px;
    }
  
    .testimonial .container {
      padding-left: 10px;
    }

    .circle3 {
      width: 100px;
      height: 100px;
    }

    .testimonial h2 {
      font-size: 30px
    }
    .myTestimonial {
      width: auto;
    }
  
    .myTestimonial p {
      font-size: 15px;
    }
  
    .right-button, .left-button {
      display: none;
    }
  
    /* About ceo */
    .about-ceo {
      margin-top: 50px;
      margin-bottom: 0px;
      background: linear-gradient(to right, #c8cdd4 35%, #ffffff 20%, #ffffff 100%);
      height: 640px;
    }
    
    .about-ceo .ceo-image img {
      width: 65%;
      height: auto;
      margin-top: 40px;
      margin-left: 50px;
    }
  
    .about-ceo .ceo-info .ceo-head {
      margin-bottom: 10px;
      font-size: 20px;
    }
  
    .about-ceo .ceo-info h1 {
      font-size: 30px;
    }
    /* .about-ceo .flex {
      flex-direction: column;
    } */

    .about-ceo h5 {
      margin-top: 15px;
      margin-bottom: 5px;
    }
  
    .about-ceo .ceo-image{
      /* width: 100%; */
      width: 400px;
      height: 400px;
    }
    
    .about-ceo .ceo-info {
      width: 100%;
      margin-top: -60px;
    }
  
    .about-ceo .ceo-info .icons {
      margin: 10px 0;
      width: 30%;
    }
  
    .about-ceo .ceo-info .ceo-info2 {
      line-height: 1.5rem;
      z-index: 1;
      /* position: relative; */
      /* margin-bottom: 300px; */
    }

    .about-ceo .ceo-info {
      /* z-index: 1; */
      position: relative;
 
    }

    .about-ceo .ceo-info .icons {
      justify-content: flex-start;
      justify-content: space-between;
      width: 48%;
      font-size: 25px;
      margin-top: 10px;
      /* margin-left: 15px; */
    }
    
    .about-ceo .ceo-info .icons .fab{
      padding-right: 10px;
    }

    /* contact us */
    .contact-us {
      margin-top: 330px;
    }

    .contact-us .flex {
      flex-direction: column;
    }
  
    .contact-us img {
      width: 100%;
      height: 500px;
      margin-top: 210px;
    }
  
    .contact-us .contact-info {
      width: auto;
      margin-left: 0px;
    }
  
    .contact-info input[type='text'],
    .contact-info input[type='email'] {
      width: 350px;
    }

    .contact-us input {
      height: 50px;
      padding-left: 20px;
      margin-bottom: 20px;
      font-size: 15px;
    }

    .contact-us textarea {
      width: 350px;
      height: 100px;
      padding-top: 20px;
      padding-left: 20px;
      margin-bottom: 20px;
      font-size: 16px;
    }

    .contact-us .contact-info h1 {
      font-size: 35px;
      margin: 0 0;
    }
  
    .contact-info .line {
      margin-top: 5px;
      margin-bottom: 30px;
    }
    
    .contact-us .send-mail {
      width: 115px;
      padding: 5px 6px;
      font-size: 12px;
    }

    /* Footer */
    .footer .flex {
      flex-direction: column;
      width: 90%;
    }
  
    .footer {
      margin-top: 50px;
      padding-top: 25px;
      padding-bottom: 10px;
    }

    .footer .big {
      font-size: 25px;
      font-weight: 500;
      color: #ffffff;
      margin-bottom: 0px;
      margin-left: 0px;
    }
  
    .footer h1 {
      margin: 5px 0px;
    }

    .footer .boxed-btn2 {
      margin-top: 20px;
      width: auto;
      padding: 12px 8px;
      font-size: 1px;
      font-size: 12px;
    }

    .footer h3 {
      font-size: 30px;
      margin-left: 0;
    }
  
    .footer .text-center {
      margin-bottom: 20px;
      margin-right: 0px;
      display: flex;
      justify-content: flex-start;
      align-items: flex-start;
    }
  
    .footer .flex {
      padding-right: 0px;
      margin-right: 0px;
    }
  
  
    .footer .ebison img {
      margin-left: 0px;
    }
  
    .footer .icons {
      flex-direction: row;
    }
  
    .footer div {
      width: 90%;
    }

    .footer .container div {
      width: 100%;
    }
  
    .footer .ebison img {
      height: 100px;
      margin-top: 30px;
    }
  
    .footer .ebison-info {
      width: 100%;
      margin-left: 0px;
      margin-bottom: 20px;
    }
  
    
    .footer .ebison-info h3 {
      margin-bottom: 0px;
    }
  
    .footer .ebison-info p {
      margin-top: 10px;
    }
  
    .footer .ebison .icons {
      width: 30%;
      font-size: 20px;
    }

    .footer .company {
      margin-bottom: 20px;
    }

    .footer .contact 
    {
      margin-top: 70px;
    }
    .footer .company {
      height: 150px;
    }
    
    .footer .bottom {
      margin-top: 0px;
      width: auto;
    }

    .footer .bottom p{
      text-align: center;
      padding: 0px 0;
      margin: 0;
    }

    /* Important styles */
   

    h2 {
      font-size: 20px !important;
    }

    h3 {
      font-size: 18px !important;
    }

    h4 {
      font-size: 16px !important;
    }

    h5 {
      font-size: 14px !important;
    }

    /* h6 {
      font-size: 12px !important;
    } */
    
    p {
      /* font-size: 14px !important; */
      line-height: 1.5rem !important;
    }

    a {
      font-size: 14px !important;
    }

    /* li {
      font-size: 14px !important;
    } */

    i {
      font-size: 23px !important;
    }
  }