/* medium */
@media only screen and (min-width: 601px) and (max-width: 1000px){
    
    .contact__form .form{
        right: 0;
        min-width: 450px;
        /* transform: translateX(-50%); */
    }
    .about{
        margin: 0 1rem;
        margin-top: 12rem;
        background-image: none;
    }
    .about > .content{
        width: 95vw;
        margin: 1rem auto;
    }
    .about > .content .highlight{
        margin: 2rem auto;
    }
    .services{
        padding: 2rem 0;
    }

    .header{
        padding: 0;
        min-height: 40vh;
    }
    .header > .container{
        margin: 1rem 0.3rem;
        width: 50%;
        font-size: 0.6rem;
    }
    .spec, .hiw{
        flex-direction: column;
        align-items: center;
        padding: 1rem;
    }
    .spec>.content,
    .hiw>.content{
        flex: auto;
        width: 75%;
        margin: 2rem auto;
    }
    .checklists{
        padding:0;
        margin: 0;
    }
    .spec>.spec_img,
    .hiw>.hiw_img
    {
        margin:0;
        width: 75%;
    }
    .hiw>.hiw_img >img{
        display: none;
    }
    .spec>.spec_img >img
    {
        width: 100%;
        max-height: 400px;
    }
    .hiw__timeline{
        margin: 1rem;
    }
    .event{
        min-width: 80vw !important;
    }
    .testimony{
        padding-bottom: 1rem;
    }
    .slideshow-container {
        padding: 2rem 0.5rem;
    }
    .next {
        right: 0.5rem;
      }
      .newsletter>.content{
          position:relative;
          left: 0;
          top: 0;
          transform: none;
          width:100vw;
          flex-direction: column;
          padding: 1rem;
          text-align: center;
          border: none;
      }
      .newsletter>.content form{
        margin: 2rem 0;
    }
      .newsletter>.content form >input{
        font-size: 1rem;
        min-width: 200px !important;
    }
    .newsletter>.content>form >button{
        font-size: 1rem;
    }
    .footer{
        padding: 1rem;
    }
    .footer__main{
        /* flex-direction: column; */
        flex-wrap: wrap;
        
    }
    
    .footer__main > .info{
        max-width: 100%;
        border-bottom: 1px solid #334756;
    }
    .footer__main > .info,
    .quick__links, .work_hr{
        margin: 2rem 0.5rem;
        padding-bottom: 1rem;
    }
    .work_hr{
        border-bottom: none;
    }
    .quick__links > ul{
        padding-left: 2rem;
    }
}


/* small */
@media screen and (max-width: 600px) {
    .hidden__small {
        display: none;
      }
      .hidden__large {
        display: block;
      }
      .nav{
          padding: 0 0.5rem;
      }
      .nav__main{
          padding: 1rem;
      }
      .logo img{
          width: 60px;
          height: 60px;
          top: -20px;
      }
      .header{
          padding: 0;
          min-height: 40vh;
      }
      .header > .container{
          width: 100%;
          padding: 1rem;
          text-align: center;
          font-size: 0.7rem;
          margin: 2rem;
      }
  
      .heading > span{
          line-height: 1.5rem;
          font-size: 1.5rem;
          font-weight: 900;
          color: white;
      }
      
  
      #sidebar{
          position: sticky;
      }
      .contact__form .form{
          position: static;
          background-color: #334756;
          width: 100%;
      }
  
      .instant__contact{
          display: flex;
          align-items: center;
          flex-direction: column;
          color: #334756;
          padding: auto 1.5rem;
      }
      .instant__contact >span{
          background-color: #f0a500;
          margin-top: 1rem;
          padding-left: 0.5rem;
          padding-right: 0.5rem;
      }
      .about{
          background:none;
          margin: 0;
      }
      .about > .content{
          max-width: 100vw;
          margin:0;
          padding: 2rem 0.5rem;
      }
      .heading{
          margin-bottom: 1rem;
      }
      .heading > h2{
          line-height: 1.6rem;
          font-size: 1.5rem;
      }
      .subheading > span{
          line-height: 1rem;
          margin-bottom: 1rem;
      }
      .services{
          padding: 1.5rem 1rem !important;
      }
      .content> .box{
          margin: 0.5rem 2rem !important;
          width: 80vw !important ;
          box-shadow: 0 2px 3px rgb(53, 53, 53);
      }
  
      .spec, .hiw{
          flex-direction: column;
          align-items: flex-start;
          padding: 1rem;
          max-width: 100vw !important;
      }
      .spec>.content,
      .hiw>.content{
          flex: auto;
          width: 90vw;
      }
      .checklists{
          padding:0;
          margin: 0;
      }
      .spec>.spec_img,
      .hiw>.hiw_img
      {
          margin:0;
          width: 90vw;
      }
      .spec>.spec_img >img,
      .hiw>.hiw_img >img
      {
          width: 100%;
          max-height: 400px;
      }
      .hiw__timeline{
          margin: 1rem;
      }
      .event{
          min-width: 80vw !important;
      }
      .testimony{
          padding-bottom: 1rem;
      }
      .slideshow-container {
          padding: 2rem 0.5rem;
      }
      .next {
          right: 0.5rem;
        }
        .newsletter>.content{
            position:relative;
            left: 0;
            top: 0;
            transform: none;
            width:100vw;
            flex-direction: column;
            padding: 1rem;
            text-align: center;
            border: none;
        }
        .newsletter>.content form{
          margin: 2rem 0;
      }
        .newsletter>.content form >input{
          font-size: 1rem;
          min-width: 200px !important;
      }
      .newsletter>.content>form >button{
          font-size: 1rem;
      }
      .footer{
          padding: 1rem;
      }
      .footer__main{
          flex-direction: column;
      }
      
      .footer__main > .info,
      .quick__links, .work_hr{
          margin: 2rem 0.5rem;
          padding-bottom: 1rem;
          max-width: 100%;
          border-bottom: 1px solid #334756;
      }
      .work_hr{
          border-bottom: none;
      }
      .quick__links > ul{
          padding-left: 2rem;
      }
}