@media screen and (min-width: 1200px) {

  .navbar-expand-xl {
    flex-wrap: wrap;
  }

  .banner-slider.subpage figure {
    height: auto;
  }



}





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

  .navbar-nav a.show::before,
  .navbar-nav a:hover::before,
  .nav-link.active::before {
    display: none;
  }




}


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

  .slidePlaceholder {
    display: block;
  }

}

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


  header {
    padding: 0;
    position: relative;
    background: #000;
  }


  .navbar-brand img {
    width: 150px;
  }


  .navbar-nav a {
    margin: 8px 0;
    font-size: 1.4rem;
    padding: 3px 9px;
  }

  .navbar-nav a.btn-primary {
    padding: 10px 30px;
    margin-right: 0;
    margin-left: auto;
    margin-bottom: 20px;
  }

  .navbar-nav .nav-link.show::before,
  .navbar-nav .nav-link:hover::before,
  .navbar-nav .nav-link.active::before {
    height: 1px;
    bottom: -4px;
    width: 130px;
    right: 0;
  }



  .navbar-toggler:focus {
    box-shadow: none;
  }

  .navbar-toggler i {
    color: var(--primary);
    font-size: 30px;
  }

  .banner aside {
    position: relative;
    padding: 150px 0px 30px 0px;
  }

  .banner figure {
    position: absolute;
    height: 100%;
    width: 100%;
  }

  .banner figure img {
    height: 100%;
    object-fit: cover;
    object-position: center center;
  }

  .content-masked-image {
    width: 100%;
    height: 100%;

  }



  .scroll-down {
    display: none;
  }

  footer {
    padding-bottom: 60px;
  }


}

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


  h1,
  h2,
  h2.small {
    font-size: 2.8rem;
    line-height: 3.2rem;
  }


  h3 {
    font-size: 2rem;
    line-height: 2.2rem;
  }

  .slick-prev {
    left: 0px;
  }

  .slick-next {
    right: 0px;
  }

  .blog-list li a figure {
    width: 150px;
  }

  .chairman-msg {
    padding-left: 70px;
    margin-top: 30px;
  }

  .chairman-msg span img {
    width: 60px;
  }

  .chairman-msg h2.small {
    font-size: 1.8rem;
    line-height: 2.2rem;
  }

  .projects-nav-container {
    position: relative;
    bottom: 0;
  }

  .projects-nav::before {
    background: var(--primary);
    width: calc(100% + 20px);
    border-radius: 0 0 8px 8px;
    left: -10px;
  }

  .projects-slider .slick-slide img {
    height: 320px;
    object-fit: cover;
  }


  .form-checkout {
    background-position: center bottom;
  }


  .footer-nav {
    flex-wrap: wrap;
  }

  #scroll {
    border: 1px solid #fff;
  }

  .services-tabs .nav {
    align-items: start;
    flex-direction: row !important;
    width: 100%;
    flex-wrap: nowrap;
  }

  .services-tabs .nav button {
    flex: 0 0 auto;
  }

  .services-tabs .nav .nav-link {
    font-size: 1.8rem;
    line-height: 2.2rem;
    width: unset;
    padding: 20px 15px;
  }

  .services-tabs .nav .nav-link br {
    display: none;
  }

  .services-tabs .nav .nav-link span {
    position: relative;
    left: 0;
    top: 0;
    margin-right: 10px;
  }

  .services-tabs .tab-content {
    padding-top: 30px;
  }



}


@media (max-width:768px) {}



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



  h1,
  h2,
  h2.small {
    font-size: 2.2rem;
    line-height: 2.8rem;
    font-weight: 600;
  }

  h3 h3.small {
    font-size: 1.5rem;
    line-height: 1.875rem;
  }


  h4 {
    font-size: 1.375rem;
    line-height: 1.75rem;
  }


  p,
  main,
  ul li,
  header {
    font-size: 1.4rem;
    line-height: 1.9rem;
  }

  .rating-panel ul li h2 {
    font-size: 3.5rem;
  }



  .clients-logos {
    padding: 0px;
  }



  .clients-logos ul {
    justify-content: center;
    flex-wrap: wrap;
    gap: 20px;
  }


  .vline {
    display: none;
  }

  #scroll-container {
    white-space: wrap;
    box-shadow: none;
    border-radius:0%;
  }

  .timeline {
    padding-top: unset;
    flex-direction: column;
    padding-left: 5px;
  }

  .timeline>li {
    flex-basis: unset;
    display: flex;
    gap: 4px;
  }

  .timeline li figure {
    min-width: 50px;
  }

  .timeline li:nth-child(2n) aside {
    position: relative;
    bottom: unset;
  }

  .timeline li figure span {
    margin-right: 10px;
  }

  .timeline li aside {
    width: unset;
  }

  .timeline>li::before {
    width: 1px;
    height: 100%;
    top: 0;
    left: 22px;
  }

  #scroll-left,
  #scroll-right {
    display: none;
  }



  .newsletter .input-group {
    flex-direction: column;
    gap: 15px;
  }

  .newsletter .form-control {
    width: 100%;
    border-radius: var(--bs-border-radius) !important;
  }

  .newsletter .btn-primary {
    margin: 0 auto !important;
    border-radius: var(--bs-border-radius) !important;
    padding: 15px;
  }

  .mid-img-panel figcaption {
    position: relative;
    top: -10px;
    padding: 20px;
    width: 100%;
    color: #333;
    background: #eee;
    border-radius: 0 0 8px 8px;
  }


  .btn-primary,
  .btn-white {
    padding: 12px 16px;
    font-size: 1.2rem;
    line-height: 1.rem;
  }

  .btn-primary.btn-small {
    font-size: 1rem;
    letter-spacing: 2px;
    line-height: 1.2rem;
  }

  footer h4 {
    font-weight: 600;
    margin-top: 30px;
  }



}


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

  .navbar-brand img {
    width: 150px;
  }


  .nav-tabs .nav-link {
    padding: 10px 15px;
  }

  .content-img-right {
    float: right;
    width: 100%;
    margin: 0 0 30px 0px;
  }


  footer .form-floating {
    width: 100%;
  }



}

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



  .social-media {
    gap: 16px;
  }

}