/*-------------------------------------------------------------------------------------------------------------------
   Overalls
-------------------------------------------------------------------------------------------------------------------*/

   * {
      border: 0;
      box-sizing: border-box;
      margin: 0;
      outline: none;
      padding: 0;
      -webkit-tap-highlight-color: transparent;
   }

   a {
      color: inherit;
      text-decoration: none;
   }

   img {
      display: block;
      pointer-events: none;
   }

   p { 
      margin: 0; 
   }

   textarea { 
      resize: none; 
   }

   ul li { 
      list-style: none; 
   }

   :root {
      --black-dark: #0F0F0F;
      --black-light: #272727;
      --gray-dark: #444;
      --gray-light: #999;
      --gray-medium: #3F3F3F;
      --white-dark: #EEE;
      --white-light: #FFF;
      --white-medium: #FDFDFD;
      --white-off: #F8F8F8;

      --green-dark: #6B982E;
      --green-light: #A6EA49;
      --green-medium: #77CE00;
   }

   ::placeholder { 
      color: var(--gray-dark); 
      opacity: .75;
   }

   ::-webkit-scrollbar {
      height: 0;
      width: 0;
   }

/*-------------------------------------------------------------------------------------------------------------------
   HTML tags
-------------------------------------------------------------------------------------------------------------------*/

   body {
      background: var(--white-medium);
      color: var(--black-light);
      font-family: 'Be Vietnam Pro', sans-serif;
      font-size: 16px;
      font-weight: 400;
      width: 100%;
   }

   h1, h2, h3, h4, h5  {
      font-family: 'Be Vietnam Pro', sans-serif;
      font-weight: 700;
      line-height: 1;
      margin: 0;
   }

   html { 
      scroll-behavior: smooth; 
   }

   input, 
   select, 
   textarea 
   { 
      background: none;
      border-bottom: 1.5px solid var(--black-light);
      font-family: 'Be Vietnam Pro', sans-serif;
      font-size: 16px;
      font-weight: 400;
      padding: 8px 16px;
   }

/*-------------------------------------------------------------------------------------------------------------------
   [#] IDs
-------------------------------------------------------------------------------------------------------------------*/

   #button-example {
      border-radius: 88px;
      bottom: 200px;
      min-height: 88px;
      min-width: 88px;
      right: -60px;
   }

   #button-example > img {
      max-height: 52px;
      max-width: 52px;
   }

   #example {
      height: 675px;
   }

   #quality-1 {
      border-color: var(--green-light);
   }

   #quality-2 {
      border-color: var(--green-dark);
   }

   #quality-3 {
      border-color: var(--green-medium);
   }

/*-------------------------------------------------------------------------------------------------------------------
   [.] Classes
-------------------------------------------------------------------------------------------------------------------*/

   .button-primary {
      background: var(--green-dark);
      color: var(--white-light);
   }

   .button-primary, 
   .button-secondary 
   {
      border-radius: 26px;
      height: 52px;
   }

   .button-secondary {
      background: transparent;
      border: 3px solid var(--green-dark);
      color: var(--green-dark);
   }

   .button-secondary:hover {
      background: var(--green-dark);
      color: var(--white-light);
   }

   .button-service {
      background: var(--white-light);
      margin-bottom: -25%;
      width: 200px;
   }

   .container {
      max-width: 1160px;
      width: 80%;
   }

   .container-full {
      max-width: 1440px;
      width: 90%;
   }

   .gallery {
      scroll-behavior: smooth;
   }

   .gallery-button {
      border-radius: 52px;
      min-height: 52px;
      min-width: 52px;
   }

   .gallery-button > img {
      max-height: 32px;
      max-width: 32px;
   }
   
   .gallery-content {
      height: 320px;
      max-height: 320px;
      max-width: 320px;
      min-height: 320px;
      min-width: 320px;
      width: 320px;
   }

   .gallery-overlay {
      background: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.1), transparent);
      backdrop-filter: blur(4px);
      -webkit-backdrop-filter: blur(4px);
   }

   .image-example-after,
   .image-example-before 
   {
      opacity: 0;
      transition: opacity 0.5s ease;
   }

   .image-example-after.active,
   .image-example-before.active 
   {
      opacity: 1;
   }

   .link-text {
      color: var(--black-light);
   }

   .link-text:hover {
      color: var(--green-dark);
   }

   .logo-main {
      width: 320px;
   }

   .measures-image {
      height: 120px;
      max-height: 120px;
      max-width: 120px;
      min-height: 120px;
      min-width: 120px;
      width: 120px;
   }

   .number-option {
      background: var(--white-dark);
      border-radius: 40px;
      height: 40px;
      width: 40px;
   }

   .qualities {
      border: 2px solid var(--gray-dark);
   }

   .quality-bubble {
      border-radius: 60px;
      bottom: -4px;
      height: 60px;
      right: -4px;
      width: 60px;
   }

   .reasons {
      background: linear-gradient(to top, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.1), transparent);
      backdrop-filter: blur(10px);
      border: 2px solid var(--green-dark);
      min-height: 200px;
      min-width: 200px;
      height: 200px;
      width: 200px;
      -webkit-backdrop-filter: blur(10px);
   }

   .reasons-bottom {
      transform: translateY(25%);
   }

   .reasons-top {
      transform: translateY(-25%);
   }

   .service-bubble {
      bottom: -1px;
      right: -2px;
   }

   .step {
      border-radius: 44px;
      height: 44px;
      min-height: 44px;
      min-width: 44px;
      position: relative;
      width: 44px;
   }

   .step::after {
      border-left: 4px dashed var(--green-dark);
      content: "";
      height: 152px;
      left: 50%;
      position: absolute;
      top: 100%;
      transform: translateX(-50%);
      z-index: -1;
   }

   #estimate .dt-display-flex.dt-jcontent-fstart.dt-mtop-60p.dt-width-100:last-of-type .step::after {
      display: none;
   }

   .table-bubble {
      border-radius: 48px;
      max-height: 48px;
      max-width: 48px;
      min-height: 48px;
      min-width: 48px;
   }

   .testimonial-image {
      border-radius: 50%;
      height: 40px;
      width: 40px;
   }

   .title {
      font-family: 'Be Vietnam Pro', sans-serif;
      font-weight: 700;
   }

/*-------------------------------------------------------------------------------------------------------------------
   Colors
-------------------------------------------------------------------------------------------------------------------*/

   .black-dark-b { background: var(--black-dark) !important; }
   .black-dark-c { color: var(--black-dark) !important; }
   .black-light-b { background: var(--black-light) !important; }
   .black-light-c { color: var(--black-light) !important; }
   .gray-dark-b { background: var(--gray-dark) !important; }
   .gray-dark-c { color: var(--gray-dark) !important; }
   .gray-light-b { background: var(--gray-light) !important; }
   .gray-light-c { color: var(--gray-light) !important; }
   .gray-medium-b { background: var(--gray-medium) !important; }
   .gray-medium-c { color: var(--gray-medium) !important; }
   .white-dark-b { background: var(--white-dark) !important; }
   .white-dark-c { color: var(--white-dark) !important; }
   .white-light-b { background: var(--white-light) !important; }
   .white-light-c { color: var(--white-light) !important; }
   .white-medium-b { background: var(--white-medium) !important; }
   .white-medium-c { color: var(--white-medium) !important; }
   .white-off-b { background: var(--white-off) !important; }
   .white-off-c { color: var(--white-off) !important; }

   .green-dark-b { background: var(--green-dark) !important; }
   .green-dark-c { color: var(--green-dark) !important; }
   .green-light-b { background: var(--green-light) !important; }
   .green-light-c { color: var(--green-light) !important; }
   .green-medium-b { background: var(--green-medium) !important; }
   .green-medium-c { color: var(--green-medium) !important; }

/*-------------------------------------------------------------------------------------------------------------------
   Third-party
-------------------------------------------------------------------------------------------------------------------*/

   .hero-slider {
      height: 492px;
      touch-action: none;
      user-select: none;
   }

   .hero-slider-badge {
      background: 
         linear-gradient(180deg,rgba(0, 0, 0, 0.5) 50%, rgba(0, 0, 0, 0.5) 50%),
         url('../images/alliancecleaning-solutions.com_image_hero-badge-icon.png'),
         url('../images/alliancecleaning-solutions.com_image_hero-badge.png');
      background-position: center;
      background-size: cover;
      border-radius: 75px;
      height: 150px;
      right: -10px;
      top: -10px;
      width: 150px;
   }

   .hero-slider-divider {
      background: var(--green-dark);
      min-height: calc(492px + 80px);
      left: 50%;
      margin-top: -40px;
      pointer-events: none;
      transform: translateX(-50%);
      width: 4px;
   }

   .hero-slider-handle {
      background: var(--green-dark);
      border-radius: 8px;
      cursor: ew-resize;
      height: 16px;
      left: 50%;
      pointer-events: auto;
      top: 50%;
      transform: translate(-50%, -50%);
      width: 16px;
   }

   .hero-slider-image {
      border-radius: 28px;
      inset: 0;
      pointer-events: none;
      user-select: none;
      -webkit-user-drag: none;
   }

   .hero-slider-label {
      border-radius: 16px;
      gap: 8px;
      height: 48px;
      white-space: nowrap;
   }

   .hero-slider-label-icon {
      height: 24px;
      width: 24px;
   }

   .hero-slider-overlay {
      clip-path: inset(0 50% 0 0);
      inset: 0;   
      -webkit-clip-path: inset(0 50% 0 0);
   }

   .hero-slider-shape {
      max-height: 180px;
      max-width: 180px;
      min-height: 180px;
      min-width: 180px;
   }

   .image-before {
      inset: 0;
   }

   .label-bottom {
      bottom: 32px;
      left: 40%;
      transform: translateX(-50%);
   }

   .label-left {
      left: -40px;
      top: 60%;
      transform: translateY(-50%);
   }

   .label-top {
      left: 55%;
      top: -20px;
      transform: translateX(-50%);
   }

/*-------------------------------------------------------------------------------------------------------------------
   Responsive Web Design
-------------------------------------------------------------------------------------------------------------------*/

   @media screen and (max-width: 768px) {
      #button-example {
         border-radius: 72px;
         bottom: -8px;
         min-height: 72px;
         min-width: 72px;
         right: -12px;
      }

      #button-example > img {
         max-height: 44px !important;
         max-width: 44px !important;
      }

      #example {
         height: initial !important;
         margin-top: 80% !important;
      }
      
      .button-service {
         padding: 40px !important;
         width: 180px !important;
      }
      
      .container {
         width: 90% !important;
      }

      .mq-aitems-fstart {
         align-items: flex-start !important;
      }

      .mq-fdirection-column {
         flex-direction: column !important;
      }

      .mq-fsize-2 {
         font-size: 2rem !important;
      }

      .mq-margin-0-auto {
         margin: 0 auto !important;
      }

      .mq-mleft-0 {
         margin-left: 0 !important;
      }

      .mq-mright-0 {
         margin-right: 0 !important;
      }

      .mq-mtop-20p {
         margin-top: 20px !important;
      }

      .mq-mtop-28p {
         margin-top: 28px !important;
      }

      .mq-mtop-40p {
         margin-top: 40px !important;
      }

      .mq-mtop-60p {
         margin-top: 60px !important;
      }

      .mq-mtop-80p {
         margin-top: 80px !important;
      }

      .mq-pleft-20p {
         padding-left: 20px !important;
      }

      .mq-pright-20p {
         padding-right: 20px !important;
      }

      .mq-width-90 {
         width: 90% !important;
      }

      .mq-width-100 {
         width: 100% !important;
      }

      .reasons-bottom {
         transform: translateY(8%);
      }

      .reasons-top {
         transform: translateY(-8%);
      }

      .step::after {
         height: 304px;
      }
   }

   @media (max-width: 768px) {
      .hero-slider {
         border-radius: 24px;
         height: 360px;
      }

      .hero-slider-badge {
         border: 0   ;
         height: 100px;
         padding: 8px !important;
         right: -8px;
         top: -8px;
         width: 100px;
      }

      .hero-slider-badge span {
         font-size: 0.8rem;
         max-width: 100%;
         text-align: center !important;
      }

      .hero-slider-divider {
         min-height: calc(360px + 40px);
         margin-top: -20px;
      }

      .hero-slider-handle {
         border-radius: 24px;
         height: 24px;
         width: 24px;
      }

      .hero-slider-label {
         border-radius: 14px;
         font-size: 0.88rem;
         gap: 8px;
         max-width: 200px;
         padding: 10px 14px;
         white-space: normal;
      }

      .label-bottom {
         bottom: -18px;
         left: 200px;
         max-width: 190px;
         transform: none;
      }

      .label-left {
         bottom: 78px;
         left: -8px;
         max-width: 170px;
         top: auto;
         transform: none;
      }

      .label-top {
         left: 20px;
         max-width: 170px;
         top: -18px;
         transform: none;
      }
   }