:root {
  --main-color: #000000;
  --second-color: #bc9648;
  --third-color: #eaeaea;
  --white-color: #ffffff;
  --background-color: rgba(192, 192, 192, 0.4);
  --placeholder-color: #a1a1a1;
  --box-shadow: rgba(17, 17, 26, 0.1) 0px 4px 16px,
    rgba(17, 17, 26, 0.05) 0px 8px 32px;
}

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

@media (max-width: 768px) {

  html,
  body {
    overflow-x: hidden;
    scroll-behavior: auto !important;
  }

  .about-section {
    .about-image {
      img {
        height: 400px !important;
      }
    }

    .header-section {
      h3 {
        font-size: 35px;
      }
    }

    .img-two {
      display: none;
    }

    p {
      font-size: 15px;
    }

    li {
      font-size: 14px;
      color: #555151;
    }
  }

  .services-section {

    .slide {
      position: sticky;
      top: 0;
      width: 100%;
      height: 80vh !important;
      opacity: 1;
      margin-bottom: 200px !important;
      overflow: hidden;

      &::before {
        content: "";
        position: absolute;
        background-color: #00000075;
        inset: 0;
        width: 100%;
        height: 100%;
        z-index: 1;
      }

      img {
        width: 100%;
        height: 100vh !important;
      }
    }

    .content-services {
      position: absolute;
      bottom: 50px;
      left: 50px;

      z-index: 2;

      h1 {
        font-size: 40px !important;
        font-weight: bold;
      }
    }
  }

  .project-card {
    img {
      height: 400px !important;
    }
  }
}

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

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

@media (max-width: 1200px) {
  .about-section {
    .img-one {
      img {
        height: 600px;
        width: 100%;
      }
    }

    .header-section {
      h3 {
        font-size: 40px;
      }
    }

    .img-two {
      bottom: -25px;
      background-color: transparent;
    }

    p {
      font-size: 16px;
    }

    li {
      font-size: 15px;
      color: #555151;
    }
  }

  .projects-section {
    .container-fluid {
      img {
        height: 450px;
      }
    }
  }
}

@media (min-width: 992px) {}

@media (min-width: 1200px) {}