@font-face{
  font-family:'Mulish';
  src:url('../fonts/font-awesome/webfonts/static/Mulish-Regular.woff2') format('woff2'),
      url('../fonts/font-awesome/webfonts/static/Mulish-Regular.woff') format('woff'),
      url('../fonts/font-awesome/webfonts/static/Mulish-Regular.ttf') format('truetype');
  font-weight:400;
  font-style:normal;
  font-display:swap;
}

@font-face{
  font-family:'Mulish-S';
  src:url('../fonts/font-awesome/webfonts/static/Mulish-SemiBold.woff2') format('woff2'),
      url('../fonts/font-awesome/webfonts/static/Mulish-SemiBold.woff') format('woff'),
      url('../fonts/font-awesome/webfonts/static/Mulish-SemiBold.ttf') format('truetype');
  font-weight:600;
  font-style:normal;
  font-display:swap;
}

@font-face{
  font-family:'myriad-pro-s';
  src:url('../fonts/font-awesome/webfonts/Myriad-Pro-Semibold.woff2') format('woff2'),
      url('../fonts/font-awesome/webfonts/Myriad-Pro-Semibold.woff') format('woff'),
      url('../fonts/font-awesome/webfonts/Myriad-Pro-Semibold.ttf') format('truetype');
  font-weight:600;
  font-style:normal;
  font-display:swap;
}

.custom{
  font-family: "myriad-pro", sans-serif;
font-weight: 700;
font-style: normal;

font-family: "myriad-pro-condensed", sans-serif;
font-weight: 700;
font-style: normal;
}



.slider {
          position: relative;
          width: 100%;
          height: 100%;
          overflow: hidden;
        }

        .slides {
          display: flex;
          transition: transform 1s ease-in-out;
        }

        .slides img {
          width: 100%;
          height: 100%;
          object-fit: cover;
          flex-shrink: 0;
        }

        /* Dots Navigation on Slider */
        .dots {
          position: absolute;
          bottom: 30px;
          left: 50%;
          transform: translateX(-50%);
          display: flex;
          gap: 10px;
          z-index: 10;
        }

        .dot {
          width: 12px;
          height: 12px;
          background-color: rgb(193 189 189);
          border-radius: 50%;
          cursor: pointer;
          transition: background-color 0.3s;
        }

        .dot.active {
          background-color: white;
        }

        .dots {
            position: absolute;
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
        }

        .dots span {
            display: block;
            width: 10px;
            height: 10px;
            margin: 5px;
            background: #ddd;
            border-radius: 50%;
            cursor: pointer;
        }

        .dots .active {
            background: #333;
        }

.ml-25 {
  margin-left: 25px;
}

.pt-0 {
  padding-top: 0;
}

.about-us ul.pq-icon-list-items {
    padding-left: 0;
    margin-bottom: 20px;
}

.about-us .pq-inner-main {
    display: grid;
    grid-template-columns: 1.8fr 1fr;
    gap: 20px;
    padding-top: 20px;
}

.about-us .cust-ab-2 {
    right: 0;
    position: absolute;
    width: 100%;
    bottom: 0;
    z-index: -1;
}

.mt-20 {
  margin-top: 20px !important;
}

@media(max-width:799px) {
  .ml-25 {
    margin-left: 0px;
  }

  .pq-custom-design-detail-box {
    padding-left: 0 !important;
  }

  .m-mt-30 {
    margin-top: 30px !important;
  }

  .about-us .pq-inner-main {
    display: grid;
    grid-template-columns:1fr;
    gap: 20px;
    padding-top: 20px;
  }

  .about-us .cust-ab-2 {
    display: none;
  }

  .cta-image img {
    display: none;
  }

  .popup-video-box-style-2 {
    padding: 100px 0 !important;
  }
}

/* make the column the positioning parent */
.pq-img-col {
    position: relative;
}

/* your main image – ensure it's visible */
.pq-custom-design-img {
    height: auto;
    display: block;
}



/* animation */
.movingX {
    animation: movingX 5s linear infinite;
}

/* keyframes */
@keyframes movingX {
    0%   { transform: translateX(0); }
    50%  { transform: translateX(20px); }
    100% { transform: translateX(0); }
}

.cust-para {
  color: #fff !important;
}

.align-item-center {
  align-items: center;
}

.cta-image {
    position: relative;
    display: block;
}

.cta-image img {
    bottom: -294px;
    position: absolute;
    right: -15%;
    width: 105%;
}

.popup-video-box-style-2 h2.pq-title-heading {
    text-shadow: 2px 2px 3px #000;
    color: #fff;
}

.popup-video-box-style-2 h2.pq-title-heading span {
    color: #b28d47;
}

.white-text {
  color: #fff !important;
}



ul.pl-0 {
    padding-left: 0;
}
.pq-portfolio-box-categorie a i {
    margin-left: 5px;
    margin-top: 4px;
}

.about-m-img {
  width: 100%;
  border-radius: 15px;
}

.pq-bg-black .pq-section-title .pq-title-subtitle {
    background: #b28d47 !important;
}

.detail-plan hr {
    margin: 48px 0 30px;
    color: #ffffff !important;
    opacity: 0.8;
}

.sticky-col {
    position: sticky;
    top: 100px;  /* adjust how early it sticks */
    height: max-content;
    z-index: 3;
}

/* make sure the section doesn't block sticky */
.detail-plan,
.detail-plan .row {
    overflow: visible !important;
}

/* sticky only on desktop / large screens */
@media (min-width: 1200px) {
    .detail-plan .sticky-right-col {
        position: sticky;
        top: 120px;          /* distance from top while sticking – adjust */
        align-self: flex-start;  /* important for flex rows */
        height: max-content;
        z-index: 3;
    }
}