.service-section {
  margin: 0 30px;
  border-radius: 16px;

  @include breakpoint (max-xxl){
        margin: 0 15px;
        padding-left: 14px !important;
        padding-right: 14px !important;
    }
}

.service-left-items {
  .section-title {
    margin-bottom: 30px !important;
  }
}

.service-ai {
    margin-left: -56%;
    margin-top: 30px;
}

.service-right-area {
  position: relative;
  z-index: 9;

  .service-right-card-items {
    ul {
      li {
          background-color: $body-bg;
          padding: 24px;
          border-radius: 14px;
          @include flex;
          gap: 30px;
          padding-right: 30px;

          @include breakpoint (max-md){
            display: block;
          }

          &:not(:last-child){
            margin-bottom: 20px;
          }

          .thumb {
            max-width: 300px;
            width: 100%;
            height: 235px;

            @include breakpoint (max-md){
             max-width: initial;
             margin-bottom: 25px;
            }

            img {
              @include imgw;
              border-radius: 10px;
              object-fit: cover;
            }
          }

          .content {
              h3 {
                margin-bottom: 10px;
                
                a {
                    &:hover {
                      color: $theme-color;
                    }
                }
              }

              .link-btn {
                margin-top: 15px;
                i {
                  margin-left: 5px;
                }
              }
          }
      }
    }
  }
}

.service-card-item {
    margin-top: 30px;
    background-color: $bg-color;
    padding: 40px 30px;
    border-radius: 8px;
    position: relative;
    z-index: 9;

    &::before {
        position: absolute;
        content: "";
        left: 0px;
        top: 0px;
        right: 0px;
        bottom: 0px;
        opacity: 0;
        -webkit-transform: scale(1, 0.3);
        transform: scale(1, 0.3);
        background-color: $theme-color;
        -webkit-transition: all 500ms ease;
        transition: all 500ms ease;
        z-index: -1;
        border-radius: 8px;
    }

    .icon {
        width: 72px;
        height: 68.494px;
        line-height: 68.494px;
        border-radius: 6px;
        background-color: $white;
        text-align: center;
    }

    .content {
        margin-top: 30px;

        h3 {
            margin-bottom: 15px;

            @include breakpoint (max-xxl){
                font-size: 22px;
            }

            a {
                
                background-position: 0 95%;
                background-repeat: no-repeat;
                background-size: 0% 2px;
                display: inline;

                &:hover {
                    color: $white;
                    background-size: 100% 2px;
                    background-image: linear-gradient(180deg, $white 0%, $white 100%);
                }
            }
        }
    }

    &.active {
        &::before {
            opacity: 1;
            transform: scale(1, 1);
        }

        .icon {
            img {
                -webkit-animation: gelatine 0.6s;
                animation: gelatine 0.6s;
            }
        }

        .content {
            h3 {
                 color: $white;
            }

            p {
                color: $white;
            }
        }
    }

    &.style-2 {
        background-color: $bg-color-3;
        overflow: hidden;

        .icon {
            border-radius: 50%;
            border: 1px solid #EBE6E8;
            @include transition;

            img {
                 @include transition;
            }
        }

        .content {
            h3 {
                color: $header-color-2;
            }

            p {
                color: $header-color-2;
            }
        }

        &::before {
           border-radius: 8px;
            border: 1px solid #EBE6E8;
            box-shadow: 0 4px 30px 0 rgba(41, 15, 28, 0.10);
            background-color: $white
        }

        &:hover {
            .icon {
                background-color: $theme-color-2;

                img {
                    filter: brightness(0) invert(1);
                }
            }
        }
    }
}

.global-service-box {
  background-color: $bg-color;
  padding: 58px 30px;
  border: 1px solid  rgba(255, 255, 255, 0.08);
  @include flex;
  justify-content: space-between;
  border-radius: 8px;
  margin-top: 30px;
  position: relative;

  @include breakpoint (max-xl){
    padding: 30px;
    flex-wrap: wrap;
    gap: 30px;
  }

  &::before {
    position: absolute;
    content: "";
    inset: 0;
    opacity: 0;
    transform: scale(1, 0.3);
    background-color: $theme-color;
    transition: all 500ms ease;
    border-radius: 8px;
  }

  .global-content {
    flex-basis: 30%;
    position: relative;
    z-index: 9;

    @include breakpoint (max-xl){
      flex-basis: initial;
    }
  }

  .content {
    display: flex;
    gap: 40px;

    span {
      font-size: 32px;
      font-weight: 600;
      opacity: 0.2;
      writing-mode: vertical-lr;
      line-height: 1;
    }

    h3 {
      text-transform: capitalize;

      a {
        color: $white;
        &:hover {
          color: $theme-color;
        }
      }
    }
  }

  .text {
    color: $white;
    max-width: 395px;
    position: relative;
    z-index: 9;
    opacity: .5;
  }

  .icon {
    display: inline-block;
    border: 1.103px solid rgba(255, 255, 255, 0.08);
    background: $body-bg;
    width: 64px;
    height: 64px;
    line-height: 64px;
    border-radius: 50%;
    color: $white;
    text-align: center;
    font-size: 20px;
    position: relative;
    z-index: 9;
    transition: all 0.3s ease;

    &:hover {
      background-color: $theme-color-2;
      color: $white;
      border: 1px solid $theme-color-2;
    }
  }

  .hover-image {
    width: 250px;
    height: 250px;
    position: absolute;
    border-radius: 16px;
    top: 50%;
    left: 0;
    transform: translateY(-50%) rotate(10deg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position-x: 75%;
    border-radius: 30px;
    opacity: 0;
    transition: transform 0.3s ease-out, opacity 0.3s ease-out;
    margin: -200px 0 0 -50px;
    overflow: hidden;
    pointer-events: none;
    z-index: 99;
    visibility: hidden;
    will-change: transform;

    @include breakpoint (max-lg){
      display: none !important;
    }
  }

  &:hover {
    .hover-image {
      opacity: 1;
      visibility: visible;
    }

    .content {
      span {
        color: $white;
        opacity: 1;
      }

      h3 {
        a {
          color: $white;
        }
      }
    }

    &::before {
      opacity: 1;
      transform: scale(1, 1);
    }
  }
}

.service-section-3 {
  margin: 0 30px;
  border-radius: 16px;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  position: relative;
  z-index: 99;

   @include breakpoint (max-xxl){
        margin: 0 15px;
        padding-left: 14px !important;
        padding-right: 14px !important;
    }

  .array-button {
    .array-prev,.array-next {
      background-color: $body-bg;
      color: $white;
      border: none;

      &:hover {
        background-color: $theme-color;
        color: $white;
      }
    }
  }

   .swiper-dot {
        .swiper-pagination-bullet {
            background-color: $white;
        }
        .swiper-pagination-bullet.swiper-pagination-bullet-active {
            background-color: $theme-color;
        }
    }
}

.service-box-style-3 {
  margin-top: 30px;
  background-color: $body-bg;
  padding: 45px 30px;
  border-radius: 8px;
  position: relative;
  z-index: 9;

  @include breakpoint (max-lg){
    padding: 30px 35px;
  }

  @include breakpoint (max-md){
    padding: 30px 30px;
  }

  @include breakpoint (max-sm){
    padding: 30px 25px;
  }

  &::before {
      position: absolute;
      content: "";
      left: 0px;
      top: 0px;
      right: 0px;
      bottom: 0px;
      opacity: 0;
      -webkit-transform: scale(1, 0.3);
      transform: scale(1, 0.3);
      background-color: $theme-color;
      -webkit-transition: all 500ms ease;
      transition: all 500ms ease;
      z-index: -1;
      border-radius: 8px;
  }

  .icon {
    width: 80px;
    height: 80px;
    line-height: 80px;
    text-align: center;
    border-radius: 50%;
    background-color: $bg-color;
    @include transition;
  }

  .content {
    margin-top: 40px;

    h3 {
      margin-bottom: 20px;

      a {
          background-position: 0 95%;
          background-repeat: no-repeat;
          background-size: 0% 2px;
          display: inline;

          &:hover {
              color: $white;
              background-size: 100% 2px;
              background-image: linear-gradient(180deg, $white 0%, $white 100%);
          }
      }
    }

    p {
      font-size: 18px;
      color: $white;
      opacity: 0.8;
      line-height: 155.556%;
    }

    .link-btn {
        color: $white;
        margin-top: 20px;

        i {
          margin-left: 6px;
          margin-right: 0;
        }

        &:hover {
          color: $theme-color;
        }
    }
  }

  .number {
    color: $white;
    font-family: $heading-font;
    font-size: 32px;
    font-weight: 600;
    letter-spacing: -1px;
    transform: rotate(90deg);
    display: inline-block;
    position: absolute;
    top: 30px;
    right: 30px;
    @include transition;
    opacity: 0;
    visibility: hidden;
  }

  &:hover {
     &::before {
          opacity: 1;
          transform: scale(1, 1);
      }

      .icon {
        
          img {
              -webkit-animation: gelatine 0.6s;
              animation: gelatine 0.6s;
          }
      }

      .content {
        h3 {
          a {
            color: $white;
          }
        }

        p {
          color: $white;
        }

        .link-btn {
          color: $white;
        }
      }

      .number {
        opacity: 0.15;
        visibility: visible;
      }
  }
}

.service-wrapper-5 {
  margin-top: 60px;

  .bb-top {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
  }

  .bb-bottom {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }

  .service-box-style-5 {
      @include flex;
      justify-content: space-between;

      @include breakpoint (max-xl){
        flex-wrap: wrap;
        gap: 30px;
        padding: 30px 0;
      }

      .thumb {
          transition: all 0.4s ease-in-out;
          height: 213px;
          flex-basis: 26%;

           @include breakpoint (max-xl){
            flex-basis: initial;
            
            img {
              width: 250px !important;
            }
          }

          @include breakpoint (max-lg){
            height: initial;
            flex-basis: 100%;

            img {
              width: 100% !important;
            }
          }

        img {
            @include imgw;
            object-fit: cover;
            width: 195px;
            @include transition;
            opacity: 0.12;
            mix-blend-mode: overlay;

            @include breakpoint (max-xxl){
              width: 140px;
            }
        }
      }

      .service-text {
        @include flex;
        gap: 180px;

         @include breakpoint (max-xxl){
           flex-wrap: wrap;
           gap: 30px;
          }
      }

      .title {
        font-size: 24px;
        font-weight: 500;
        max-width: 280px;

       a {
              color: $white;
              background-position: 0 95%;
              background-repeat: no-repeat;
              background-size: 0% 2px;
              display: inline;

              &:hover {
                  color: $header-color;
                  background-size: 100% 2px;
                  background-image: linear-gradient(180deg, $header-color 0%, $header-color 100%);
              }
          }
      }

      .text {
        opacity: 0.88;
        color: $white;
        width: 100%;
        max-width: 272px;
      }

      .arrow-icon {
        font-size: 30px;
        transform: rotate(-40deg);
        display: inline-block;
        color: $white;

        &:hover {
          color: $theme-color;
        }
      }

      &.active {
        .thumb {
          img {
              width: 338px;
              opacity: 1;

               @include breakpoint (max-xxl){
                width: 280px;
              }
          }
        }
      }
  }
}

.service-box-style-4 {
  margin-top: 30px;

    .service-list-wrap {
      position: relative;
      border-bottom: 1px solid #EBE8E6;
      padding: 50px 30px;

       @include breakpoint (max-sm){
          padding: 40px 10px;
      }

      &.active-block {
        background-color: $bg-color-5;
        border-bottom: 1px solid $bg-color-5;
      }

      .service-acc-btn {
        position: relative;
        padding-left: 275px;
        cursor: pointer;

         @include breakpoint (max-xxl){
            padding-left: 200px;
          }

           @include breakpoint (max-xl){
            padding-left: 90px;
          }

           @include breakpoint (max-sm){
            padding-left: 20px;
          }

          .number {
            display: inline-block;
            font-size: 18px;
            font-weight: 500;
            font-family: $heading-font;
            color: $header-color-4;
            position: absolute;
            top: 0;
            left: 0;

             @include breakpoint (max-sm){
             top: -30px;
             left: 20px;
            }
          }

          .icon {
            position: absolute;
            top: 0;
            right: 0;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            line-height: 40px;
            color: $header-color-4;
            border: 1px solid $header-color-4;
            text-align: center;
          }

           h3 {
            font-size: 30px;
            font-weight: 600;

            a {
              color: $header-color-4;

              &:hover {
                color: $theme-color-4;
              }
            }
          }
      }

      .service-acc-content {
        margin-top: 35px;
        display: none;
        position: relative;

         @include breakpoint (max-sm){
           margin-top: 25px;
          }
      }

      .service-wrap {
          display: flex;
          gap: 100px;
          width: 100%;
          padding-left: 275px;

          @include breakpoint (max-xxl){
            padding-left: 200px;
          }

         @include breakpoint (max-xl){
            padding-left: 90px;
          }

          @include breakpoint (max-lg){
            flex-wrap: wrap;
            gap: 30px;
          }

          @include breakpoint (max-sm){
            padding-left: 20px;
          }

          .item-text {
              h4 {
                font-size: 20px;
                font-weight: 500;
                margin-bottom: 15px;
                 color: $header-color-4;
              }

              .text {
                max-width: 465px;

                p {
                  font-size: 18px;
                  line-height: 155.556%;

                   @include breakpoint (max-sm){
                    font-size: 16px;
                  }
                }
              }

              ul {
                  li {
                      color: $header-color-4;
                      font-size: 16px;
                      font-weight: 500;
                      font-family: $heading-font;

                      &:not(:last-child){
                        margin-bottom: 10px;
                      }

                      i {
                        font-size: 20px;
                        margin-right: 8px;
                      }
                  }
              }
          }
      }
    }
}

.service-section-4 {
  .service-box-style-4 .block .service-acc-content.current {
      display: block;
  }

  .service-box-style-4 .block .service-acc-btn.active .icon:before {
      content: "\f00d";
      
  }

  .service-box-style-4 .block .service-acc-btn.active .icon {
    background-color: $theme-color-4;
    color: $white;
    border: 1px solid $theme-color-4;
  }

  .service-box-style-4 .block .service-acc-btn.active {
      color: $theme-color;
  }

  .aservice-box-style-4 .block:last-child {
      margin-bottom: 0;
  }
}

.service-details-wrapper {
    .service-top-img {
        border-radius: 12px;

        img {
            @include imgw;
            border-radius: 12px;
        }
    }

    .service-details-content {
        margin-top: 30px;

        h3 {
            font-size: 32px;
            font-weight: 600;
            margin-top: 30px;
        }

        .service-list-items {
            display: flex;
            gap: 60px;
            margin-top: 30px;

            @include breakpoint (max-xl){
              flex-wrap: wrap;
              gap: 30px;
            }

            ul {
                li {
                    font-weight: 500;

                    i {
                        color: $theme-color;
                        margin-right: 10px;
                    }

                    &:not(:last-child){
                        margin-bottom: 15px;
                    }
                }
            }
        }

        .service-box-area {
          margin-top: 40px;

            .service-box-items {
              background-color: $bg-color;
              border-radius: 10px;
              padding: 30px 20px;

                .number {
                    width: 38px;
                    height: 38px;
                    line-height: 38px;
                    border-radius: 50%;
                    background-color: $theme-color;
                    color: $white;
                    font-size: 16px;
                    display: block;
                    text-align: center;
                  font-weight: 700;
                }

                h5 {
                    font-size: 18px;
                    font-weight: 500;
                    max-width: 143px;
                    margin-top: 20px;
                }

                p {
                  margin-top: 10px;
                }
            }
        }
    }

    .service-details-sidebar {
       margin-top: 30px;

        .sidebar-widget {
            padding: 40px 35px;
            border-radius: 10px;
            background-color: $bg-color;
            margin-bottom: 30px;

             .sideber-title {
                margin-bottom: 25px;

                h4 {
                    font-size: 24px;
                    font-weight: 500;
                    display: inline-block;

                    i {
                        color: $theme-color;
                        font-size: 16px;
                        margin-right: 7px;
                    }
                }
             }

            .project-infrom {
                li {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    background-color: $white;
                    padding: 14px 20px;
                    border-radius: 8px;
                    color: $header-color;
                    font-size: 16px;
                    font-weight: 500;

                    span {
                        color: $header-color;
                        font-size: 16px;
                        font-weight: 500;
                    }

                    &:not(:last-child) {
                        margin-bottom: 30px;
                    }
                }
            }
        }

        .sidebar-widget-image {
            position: relative;

            img {
                @include imgw;
                border-radius: 8px;
            }

            .content {
                position: absolute;
                padding: 25px;
                bottom: 25px;
                left: 25px;
                right: 25px;

                .icon {
                    font-size: 70px;
                    color: $white;
                    margin-bottom: 35px;
                }

                h3 {
                    margin-top: 15px;
                    color: $white;
                    font-size: 32px;
                    font-weight: 600;
                }

                .theme-btn {
                    margin-top: 30px;
                }
            }

            .white-logo {
                position: absolute;
                top: 50px;
                left: 50px;
            }
        }

        .service-list-item {
            li {
              font-size: 16px;
              font-weight: 600;
              font-family: $heading-font;

              &:not(:last-child){
                margin-bottom: 10px;
              }

              a {
                color: $header-color;
                @include flex;
                justify-content: space-between;
                background-color: $body-bg;
                padding: 20px 24px;
                line-height: 1;
                border-radius: 8px;

                &:hover {
                  background-color: $theme-color;
                  color: $white;
                }
              }
            }
        }
    }
}

.service-section11 {
  @include breakpoint (max-xxl){
    padding-bottom: 120px !important;
  }

   @include breakpoint (max-xl){
    padding-bottom: 100px !important;
  }

   @include breakpoint (max-lg){
    padding-bottom: 80px !important;
  }
}