.about-area {
      position: relative;
      z-index: 1
    }

    .about-area-inner {
      padding-top: 200px
    }

    @media only screen and (max-width: 1399px) {
      .about-area-inner {
        padding-top: 170px
      }
    }

    @media only screen and (max-width: 1199px) {
      .about-area-inner {
        padding-top: 120px
      }
    }

    .about-area .area-bg {
      position: absolute;
      width: 100%;
      height: calc(100% - 80px);
      top: 0;
      inset-inline-start: 0;
      z-index: -1
    }

    @media only screen and (max-width: 1199px) {
      .about-area .area-bg {
        height: calc(100% - 60px)
      }
    }

    .about-area .area-bg img {
      width: 100%;
      height: 100%;
      -o-object-fit: cover;
      object-fit: cover
    }

    .about-area .section-content {
      width: 410px;
      background-color: #171717
    }

    .dark .about-area .section-content {
      background-color: #121212
    }

    @media only screen and (max-width: 1199px) {
      .about-area .section-content {
        width: 340px
      }
    }

    @media(max-width: 575px) {
      .about-area .section-content {
        width: 100%
      }
    }

    .about-area .section-content .content-first {
      padding: 60px 45px 49px
    }

    @media only screen and (max-width: 1199px) {
      .about-area .section-content .content-first {
        padding: 40px 35px 29px
      }
    }

    .about-area .section-content .section-title {
      font-size: 28px;
      line-height: 1.25;
      color: var(--white);
      margin-top: 0;
      text-transform: unset;
    }

    @media only screen and (max-width: 1399px) {
      .about-area .section-content .section-title {
        font-size: 30px
      }
    }

    @media only screen and (max-width: 1199px) {
      .about-area .section-content .section-title {
        font-size: 30px
      }
    }

    @media only screen and (max-width: 991px) {
      .about-area .section-content .section-title {
        font-size: 30px
      }
    }

    @media only screen and (max-width: 767px) {
      .about-area .section-content .section-title {
        font-size: 26px
      }
    }

    @media(max-width: 575px) {
      .about-area .section-content .section-title {
        font-size: 28px
      }
    }

    .about-area .section-content .section-title-wrapper {
      margin-top: 43px
    }

    @media only screen and (max-width: 1199px) {
      .about-area .section-content .section-title-wrapper {
        margin-top: 33px
      }
    }

    .about-area .section-content .wc-btn-circle {
      width: 80px;
      height: 80px;
      background-color: var(--white);
      color: var(--black)
    }

    @media only screen and (max-width: 767px) {
      .about-area .section-content .wc-btn-circle {
        width: 60px;
        height: 60px;
        font-size: 14px
      }
    }

    .about-area .section-content .wc-btn-circle i {
      transform: none
    }

    .about-area .section-content .video-btn {
      display: flex;
      align-items: center;
      gap: 15px
    }

    .about-area .section-content .video-btn .text {
      font-size: 14px;
      font-weight: 500;
      text-transform: uppercase;
      line-height: 16px;
      color: var(--white)
    }

    .about-area .section-content .video-btn .text br {
      display: block
    }



    .dark .about-area .section-content .wc-btn-normal {
      background-color: #171717
    }

    @media only screen and (max-width: 1199px) {
      .about-area .section-content .wc-btn-normal {
        padding: 0 35px;
        height: 60px
      }
    }

    .about-area .section-content {
      max-width: 855px;
      margin-inline-start: unset;
      margin-top: 42px;
      display: flex;
      gap: 50px;
    }

    .about-area .section-title {
      text-indent: unset;
    }

    .about-area .section-content .wc-btn-normal {
      padding: 0 45px;
      color: var(--white);
      height: 100px;
      background-color: var(--black);
      display: flex;
    }

    .wc-btn-normal {
      font-size: 15px;
      font-weight: 500;
      text-transform: uppercase;
    }

    .btn-text-flip {
      perspective: 1000px;
    }

    .wc-btn-normal {
      display: inline-flex;
      position: relative;
      color: var(--secondary);
      text-decoration: none;
      font-size: 18px;
      font-weight: 500;
      align-items: center;
      gap: 5px;
    }

    .wc-btn {
      display: inline-flex;
      transition: all .3s;
    }

    .service-area .service-top-wrapper {
      padding-bottom: 57px
    }

    .service-area .service-top-wrapper {
      display: grid;
      grid-template-columns: 1fr 420px;
      align-items: center
    }

    @media only screen and (max-width: 991px) {
      .service-area .service-top-wrapper {
        grid-template-columns: 1fr
      }
    }

    .service-area .services-wrapper-box {
      overflow: hidden
    }

    .service-area .services-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      margin: 0 -50px;
      gap: 50px 0
    }

    @media only screen and (max-width: 1399px) {
      .service-area .services-grid {
        margin: 0 -30px
      }
    }

    @media only screen and (max-width: 1199px) {
      .service-area .services-grid {
        grid-template-columns: repeat(3, 1fr)
      }
    }

    @media only screen and (max-width: 991px) {
      .service-area .services-grid {
        grid-template-columns: 1fr 1fr
      }
    }

    @media(max-width: 575px) {
      .service-area .services-grid {
        grid-template-columns: 1fr
      }
    }

    .service-area .service-item {
      padding: 0 50px;
      border-inline-start: 1px solid #ece7e4
    }

    .dark .service-area .service-item {
      border-color: #272727
    }

    @media only screen and (max-width: 1399px) {
      .service-area .service-item {
        padding: 0 30px
      }
    }

    .service-area .service-item .icon {
      padding-bottom: 48px
    }

    @media only screen and (max-width: 1199px) {
      .service-area .service-item .icon {
        padding-bottom: 25px
      }
    }

    .service-area .service-item .title {
      padding-bottom: 25px;
      font-size: 30px
    }

    @media only screen and (max-width: 1399px) {
      .service-area .service-item .title {
        font-size: 24px
      }

      .pl-30 {
        padding-left: 30px;
      }

      .pr-30 {
        padding-right: 30px;
      }
    }

    .service-area .service-item .service-features li {
      font-family: var(--font_plusjakartasans);
      font-size: 18px;
      color: var(--secondary);
      font-weight: 300;
      padding-bottom: 15px;
      line-height: 1.5em;
      /*list-style: disc;
      list-style-position: inside*/
    }

    .blog-img-leftmove img {
      transform: scale(1.1);
      transition: all .5s
    }

    .blog-img-leftmove:hover img {
      transform: scale(1.1) translateX(4%)
    }

    .blog-img-zoom {
      overflow: hidden
    }

    .blog-img-zoom img {
      transform: scale(1);
      transition: all 1s
    }

    .blog-img-zoom:hover img {
      transform: scale(1.1)
    }

    .blog-area .blog-wrapper-box {
      margin-top: 9px
    }

    .blog-area .section-title {
      max-width: 280px
    }

    .blog-area .blog-wrapper>* {
      display: block
    }

    .blog-area .blog-wrapper>*:not(:first-child) {
      border-top: 1px solid var(--border);
      padding-top: 29px;
      margin-top: 30px
    }

    .blog {
      display: grid;
      gap: 20px 60px;
      grid-template-columns: auto 520px;
      justify-content: space-between;
      align-items: flex-start
    }


    @media only screen and (max-width: 1399px) {
      .blog {
        grid-template-columns: auto 470px
      }
    }

    @media only screen and (max-width: 1199px) {
      .blog {
        grid-template-columns: auto 410px
      }
    }

    @media only screen and (max-width: 767px) {
      .blog {
        grid-template-columns: auto
      }
    }

    .blog .author {
      display: flex;
      align-items: center;
      gap: 15px
    }

    .blog .avatar {
      width: 50px;
      height: 50px;
      border-radius: 50%;
      overflow: hidden
    }

    .blog .name {
      font-size: 18px
    }

    .blog .name span {
      font-weight: 700
    }

    .blog .post {
      font-size: 14px;
      display: inline-block;
      margin-top: 5px
    }

    .blog .content .meta {
      display: flex;
      align-items: center;
      gap: 7px
    }

    .blog .tag {
      font-size: 12px;
      text-transform: uppercase;
      padding: 4px 8px;
      background-color: #f1f1f4;
      color: var(--primary);
      border-radius: 20px;
      display: inline-block
    }

    .dark .blog .tag {
      background-color: #333
    }

    .blog .date {
      font-size: 12px;
      text-transform: uppercase
    }

    .blog .date.has-left-line {
      padding-inline-start: 25px
    }

    .blog .date.has-left-line:before {
      width: 15px
    }

    .blog .title {
      font-size: 30px;
      margin-top: 15px;
      line-height: 1.16
    }

    @media only screen and (max-width: 1399px) {
      .blog .title {
        font-size: 26px
      }
    }

    @media only screen and (max-width: 1199px) {
      .blog .title {
        font-size: 22px
      }
    }

    .blog .text {
      margin-top: 7px
    }

    .blog .btn-wrapper {
      margin-top: 23px
    }

    .blog .wc-btn-primary {
      background-color: var(--white);
      border-color: var(--border);
      padding: 0 28px
    }

    .dark .blog .wc-btn-primary {
      background-color: var(--black);
      color: var(--white)
    }

    .blog .wc-btn-primary:hover {
      border-color: var(--border)
    }

    .blog .wc-btn-circle {
      background-color: var(--white);
      border: 1px solid var(--border);
      width: 40px;
      height: 40px
    }

    .dark .blog .wc-btn-circle {
      background-color: var(--black);
      color: var(--white)
    }

    .blog .wc-btn-circle:hover {
      border-color: var(--border)
    }

    .blog .wc-btn-group {
      display: flex;
      width: -moz-fit-content;
      width: fit-content
    }

    .blog .wc-btn-group>*:nth-child(1) {
      transform: scale3d(0.5, 0.5, 1);
      margin-inline-end: -40px
    }

    .blog .wc-btn-group>*:nth-child(2) {
      transform: scale3d(1, 1, 1)
    }

    .blog .wc-btn-group>*:nth-child(3) {
      transform: scale3d(1, 1, 1);
      margin-inline-start: 0
    }

    .blog .wc-btn-group:hover>*:nth-child(1) {
      transform: scale3d(1, 1, 1);
      margin-inline-end: 0
    }

    .blog .wc-btn-group:hover>*:nth-child(2) {
      transform: scale3d(1, 1, 1)
    }

    .blog .wc-btn-group:hover>*:nth-child(3) {
      transform: scale3d(0.5, 0.5, 1);
      margin-inline-start: -40px
    }


    .wc-btn-group {
      display: flex;
      width: -moz-fit-content;
      width: fit-content
    }

    .wc-btn-group>*:nth-child(1) {
      transform: scale3d(0.5, 0.5, 1);
      margin-inline-end: -40px
    }

    .wc-btn-group>*:nth-child(2) {
      transform: scale3d(1, 1, 1)
    }

    .wc-btn-group>*:nth-child(3) {
      transform: scale3d(1, 1, 1);
      margin-inline-start: 0
    }

    .wc-btn-group:hover>*:nth-child(1) {
      transform: scale3d(1, 1, 1);
      margin-inline-end: 0
    }

    .wc-btn-group:hover>*:nth-child(2) {
      transform: scale3d(1, 1, 1)
    }

    .wc-btn-group:hover>*:nth-child(3) {
      transform: scale3d(0.5, 0.5, 1);
      margin-inline-start: -40px
    }

    .wc-btn-circle {
      text-align: center;
      width: 40px;
      height: 40px;
      font-weight: 500;
      font-size: 16px;
      line-height: 1.5;
      color: var(--black);
      border-radius: 100%;
      display: flex;
      gap: 10px;
      align-items: center;
      justify-content: center;
      background-color: var(--white)
    }

    @media only screen and (max-width: 1199px) {
      .wc-btn-circle {
        width: 40px;
        height: 40px
      }
    }

    .wc-btn-circle:hover {
      background-color: var(--black);
      color: var(--white)
    }

    .wc-btn-oval {
      font-weight: 500;
      font-size: 16px;
      line-height: 1.5;
      color: var(--white);
      border: 1px solid #3f3a36;
      display: inline-block;
      padding: 32px 52px;
      text-align: center;
      transition: all .3s;
      border-radius: 50% 50% 50% 50%/50% 50% 50% 50%
    }

    .wc-btn-circle {
      background-color: var(--white);
      width: 40px;
      height: 40px;
      font-size: 18px;
      color: var(--black);
      border: 1px solid var(--black)
    }

    .dark .wc-btn-circle {
      background-color: var(--black);
      color: var(--white);
      border-color: var(--white)
    }

    .wc-btn-circle:hover {
      background-color: var(--white);
      color: var(--black)
    }

    .dark .wc-btn-circle:hover {
      background-color: var(--black);
      color: var(--white);
      border-color: var(--white)
    }

    .wc-btn-circle i {
      transform: rotate(-45deg)
    }

    .wc-btn-primary {
      font-size: 15px;
      font-weight: 500;
      text-transform: uppercase;
      background-color: var(--white);
      color: var(--black);
      padding: 0 35px;
      border-radius: 40px
    }

    .dark .wc-btn-primary {
      background-color: var(--black);
      color: var(--white)
    }

    .wc-btn-primary:hover {
      background-color: var(--white);
      color: var(--black);
      border-color: var(--black)
    }

    .dark .wc-btn-primary:hover {
      background-color: var(--black);
      color: var(--white);
      border-color: var(--white)
    }

    .wc-btn-normal {
      font-size: 15px;
      font-weight: 500;
      text-transform: uppercase
    }

    .wc-btn-normal i {
      transform: rotate(-45deg)
    }

    .wc-btn-group {
      display: flex;
      width: -moz-fit-content;
      width: fit-content
    }

    .wc-btn-group>*:nth-child(1) {
      transform: scale3d(0.5, 0.5, 1);
      margin-inline-end: -60px
    }

    .wc-btn-group>*:nth-child(2) {
      transform: scale3d(1, 1, 1)
    }

    .wc-btn-group>*:nth-child(3) {
      transform: scale3d(1, 1, 1);
      margin-inline-start: 0
    }

    .wc-btn-group:hover>*:nth-child(1) {
      transform: scale3d(1, 1, 1);
      margin-inline-end: 0
    }

    .wc-btn-group:hover>*:nth-child(2) {
      transform: scale3d(1, 1, 1)
    }

    .wc-btn-group:hover>*:nth-child(3) {
      transform: scale3d(0.5, 0.5, 1);
      margin-inline-start: -60px
    }

    .blog .wc-btn-group> :nth-child(1) {
      transform: scale3d(0.5, 0.5, 1);
      margin-inline-end: -40px;
    }

    .blog .wc-btn-circle {
      background-color: var(--white);
      border: 1px solid var(--border);
      width: 40px;
      height: 40px;
    }

    .project-area .section-title {
      /*max-width: 330px*/
      max-width: 100%;
    }

    .project-area .section-header {
      display: grid;
      gap: 20px 60px;
      grid-template-columns: auto auto auto;
      align-items: center;
      justify-content: space-between
    }

    @media only screen and (max-width: 991px) {
      .project-area .section-header {
        grid-template-columns: 1fr 1fr;
        gap: 20px 40px
      }
    }

    @media only screen and (max-width: 767px) {
      .project-area .section-header {
        grid-template-columns: 1fr
      }
    }

    .project-area .section-header .text {
      max-width: 450px
    }

    .project-area .nav-icon {
      width: 70px;
      height: 70px;
      font-size: 20px;
      border: 1px solid var(--border);
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      transition: all .5s;
      color: var(--primary)
    }

    @media only screen and (max-width: 1919px) {
      .project-area .nav-icon {
        width: 60px;
        height: 60px;
        font-size: 16px
      }
    }

    .project-area .nav-icon:hover {
      background-color: var(--theme);
      color: white;
      border-color: rgba(0, 0, 0, 0)
    }

    .dark .project-area .nav-icon:hover {
      color: white;
    }

    .project-area .slider-nav {
      display: flex;
      gap: 20px
    }

    .dir-rtl .project-area .slider-nav {
      flex-direction: row-reverse
    }

    @media only screen and (max-width: 991px) {
      .project-area .slider-nav {
        display: none
      }
    }

    .project-area .projects-wrapper-box {
      margin-top: 90px
    }

    @media only screen and (max-width: 1919px) {
      .project-area .projects-wrapper-box {
        margin-top: 70px
      }
    }

    @media only screen and (max-width: 1399px) {
      .project-area .projects-wrapper-box {
        margin-top: 50px
      }
    }

    .project-area .projects-wrapper-box .swiper {
      margin: -30px;
      padding: 30px
    }

    @media only screen and (max-width: 991px) {
      .project-area .projects-wrapper-box .swiper {
        margin: 0;
        padding: 0
      }
    }

    .project-box {
      display: inline-block;
      position: relative
    }

    .project-box:hover .thumb {
      transform: scale(1.09)
    }

    @media only screen and (max-width: 991px) {
      .project-box:hover .thumb {
        transform: none
      }
    }

    .project-box:hover .wc-btn-circle {
      margin-bottom: 0;
      opacity: 1
    }

    .project-box .thumb {
      position: relative;
      border-radius: 5px;
      overflow: hidden;
      transition: all .5s
    }

    .project-box .thumb:after {
      position: absolute;
      content: "";
      width: 100%;
      height: 100%;
      background-image: linear-gradient(180deg, rgba(18, 18, 18, 0) 38.85%, #121212 100%);
      top: 0;
      inset-inline-start: 0
    }

    .project-box .thumb img {
      width: 100%;
      height: 100%;
      -o-object-fit: cover;
      object-fit: cover
    }

    .project-box .tag {
      font-size: 14px;
      text-transform: uppercase;
      line-height: 1;
      display: inline-block;
      padding: 10px 15px;
      border-radius: 5px;
      background-color: rgba(255, 255, 255, .35);
      color: var(--black)
    }

    .project-box .meta {
      position: absolute;
      top: 0px;
      inset-inline-start: 0px;
      margin: 40px
    }

    @media only screen and (max-width: 1919px) {
      .project-box .meta {
        margin: 30px
      }
    }

    .project-box .title {
      font-size: 24px;
      line-height: 1.25;
      font-weight: 600;
      color: var(--white)
    }

    @media only screen and (max-width: 1919px) {
      .project-box .title {
        font-size: 22px
      }
    }

    .project-box .title a:hover {
      color: var(--white)
    }

    .project-box .content {
      position: absolute;
      bottom: 0;
      inset-inline-start: 0;
      margin: 40px;
      overflow: hidden
    }

    @media only screen and (max-width: 1919px) {
      .project-box .content {
        margin: 30px
      }
    }

    .project-box .wc-btn-circle {
      margin-top: 28px;
      width: 60px;
      height: 60px;
      background-color: var(--theme);
      color: var(--black);
      margin-bottom: -88px;
      opacity: 0;
      transition: all .5s
    }

    @media only screen and (max-width: 991px) {
      .project-box .wc-btn-circle {
        margin-bottom: 0;
        opacity: 1
      }
    }

    .project-box .wc-btn-circle i {
      transform: rotate(-45deg)
    }


    .project-area {
      border-bottom: 1px solid var(--border);
      padding-top: 94px;
      padding-bottom: 93px;
    }


    .team-box .thumb img {
      width: 100%;
      border-radius: 5px;
    }

    .team-box .title {
      font-size: 20px;
      line-height: 1;
    }

    @media only screen and (max-width: 1199px) {
      .team-box .title {
        font-size: 20px
      }
    }

    .team-box .text {
      font-size: 16px;
      font-weight: 500;
      margin-top: 7px;
      color: var(--secondary);
      font-family: var(--font_plusjakartasans);
    }

    @media only screen and (max-width: 1199px) {
      .team-box .text {
        margin-top: 3px
      }
    }

    .team-box .content {
      margin-top: 30px
    }

    @media only screen and (max-width: 1399px) {
      .team-box .content {
        margin-top: 27px
      }
    }

    .team-box:hover .thumb {
      transform: scale(1.09)
    }

    @media only screen and (max-width: 991px) {
      .team-box:hover .thumb {
        transform: none
      }
    }

    .team-box:hover .wc-btn-circle {
      margin-bottom: 0;
      opacity: 1
    }

    .team-box:hover .thumb {
      transform: scale(1.09);
    }

    .team-box .thumb {
      position: relative;
      border-radius: 5px;
      overflow: hidden;
      transition: all .5s;
    }


    .testimonial-area-inner {
      display: grid;
      gap: 40px 60px;
      grid-template-columns: 1fr 740px
    }

    @media only screen and (max-width: 1399px) {
      .testimonial-area-inner {
        grid-template-columns: 1fr 640px
      }
    }

    @media only screen and (max-width: 1199px) {
      .testimonial-area-inner {
        grid-template-columns: 1fr 470px
      }
    }

    @media only screen and (max-width: 991px) {
      .testimonial-area-inner {
        grid-template-columns: 100%
      }
    }

    .testimonial-area .section-subtitle {
      font-size: 18px;
      font-weight: 500;
      color: var(--primary);
      font-family: var(--font_spacegrotesk)
    }

    .testimonial-area .section-title {
      max-width: 390px
    }

    .testimonial-area .section-content .subtitle-wrapper {
      display: flex;
      gap: 15px;
      align-items: center
    }

    .testimonial-area .section-content .title-wrapper {
      margin-top: 30px
    }

    @media only screen and (max-width: 767px) {
      .testimonial-area .section-content .title-wrapper {
        margin-top: 15px
      }
    }

    .testimonial-area .section-content .text-wrapper {
      margin-top: 32px
    }

    @media only screen and (max-width: 1199px) {
      .testimonial-area .section-content .text-wrapper {
        margin-top: 22px
      }
    }

    .testimonial-area .section-content .text-wrapper .text {
      max-width: 557px;
      font-family: var(--font_plusjakartasans);
    }

    .testimonial-area .section-content .review-wrapper-box {
      margin-top: 63px
    }

    @media only screen and (max-width: 1199px) {
      .testimonial-area .section-content .review-wrapper-box {
        margin-top: 43px
      }
    }

    .testimonial-area .review-wrapper {
      background-color: #e7f5eb;
      border-radius: 5px;
      padding: 15px 20px;
      display: inline-flex;
      align-items: center
    }

    .dark .testimonial-area .review-wrapper {
      background-color: #252525
    }

    .testimonial-area .review-author {
      display: flex;
      gap: 10px;
      align-items: center
    }

    .testimonial-area .review-author .text {
      font-size: 16px;
      font-weight: 600
    }

    .testimonial-area .review-author .text br {
      display: block
    }

    .testimonial-area .review-rating {
      padding-inline-start: 20px;
      border-inline-start: 1px solid #cddbd9;
      margin-inline-start: 20px
    }

    .testimonial-area .review-rating .ratings {
      display: flex;
      align-items: center
    }

    .testimonial-area .review-rating .number {
      font-size: 22px;
      display: inline-block
    }

    .testimonial-area .review-rating .icon-list {
      display: inline-flex;
      gap: 2px;
      margin-inline-start: 8px
    }

    .testimonial-area .review-rating .icon-list li {
      font-size: 14px
    }

    .testimonial-area .review-rating .text {
      font-size: 14px;
      margin-top: 4px
    }

    .testimonial-area .testimonial-wrapper {
      padding: 80px 100px;
      background-color: var(--white);
      box-shadow: 0px 30px 200px rgba(16, 25, 56, .08);
      border-radius: 5px
    }

    .dark .testimonial-area .testimonial-wrapper {
      background-color: #1c1c1c
    }

    @media only screen and (max-width: 1199px) {
      .testimonial-area .testimonial-wrapper {
        padding: 50px 60px
      }
    }

    @media only screen and (max-width: 767px) {
      .testimonial-area .testimonial-wrapper {
        padding: 30px 20px
      }
    }

    .testimonial-area .testimonial-wrapper-box {
      position: relative
    }

    .testimonial-area .slider-nav {
      display: flex;
      justify-content: space-between;
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      width: calc(100% + 70px);
      margin-inline-start: -35px
    }

    .dir-rtl .testimonial-area .slider-nav {
      flex-direction: row-reverse
    }

    @media only screen and (max-width: 1199px) {
      .testimonial-area .slider-nav {
        width: calc(100% + 60px);
        margin-inline-start: -30px
      }
    }

    @media only screen and (max-width: 991px) {
      .testimonial-area .slider-nav {
        display: none
      }
    }

    .testimonial-area .slider-nav .nav-icon,
    .testimonial-area .slider-nav [role=button] {
      cursor: pointer;
      width: 70px;
      height: 70px;
      border: 1px solid rgba(18, 18, 18, .15);
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 20px;
      color: var(--primary);
      transition: all .5s
    }

    .dark .testimonial-area .slider-nav .nav-icon,
    .dark .testimonial-area .slider-nav [role=button] {
      border-color: #464646
    }

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

      .testimonial-area .slider-nav .nav-icon,
      .testimonial-area .slider-nav [role=button] {
        width: 60px;
        height: 60px;
        font-size: 18px
      }
    }

    .testimonial-area .slider-nav .nav-icon:hover,
    .testimonial-area .slider-nav [role=button]:hover {
      background-color: var(--theme);
      border-color: rgba(0, 0, 0, 0);
      color: white;
    }

    .testimonial-area .slider-nav .nav-icon.swiper-button-disabled,
    .testimonial-area .slider-nav [role=button].swiper-button-disabled {
      opacity: .3
    }

    .testimonial-item {
      text-align: center
    }

    .testimonial-item .icon img {
      height: 47px
    }

    @media only screen and (max-width: 1199px) {
      .testimonial-item .icon img {
        height: 37px
      }
    }

    @media only screen and (max-width: 1399px) {
      .testimonial-item .text {
        font-size: 20px
      }
    }

    .testimonial-item .post {
      font-size: 16px;
      display: block;
      margin-top: 8px
    }

    .testimonial-item .name {
      font-size: 24px;
      line-height: 1;
      display: block;
      color: var(--primary)
    }

    .testimonial-item .text-wrapper {
      margin-top: 38px
    }

    @media only screen and (max-width: 767px) {
      .testimonial-item .text-wrapper {
        margin-top: 28px
      }
    }

    .testimonial-item .author {
      margin-top: 55px
    }

    @media only screen and (max-width: 1199px) {
      .testimonial-item .author {
        margin-top: 45px
      }
    }

    @media only screen and (max-width: 767px) {
      .testimonial-item .author {
        margin-top: 35px
      }
    }

    .testimonial-item .content img {
      width: 100%;
    }


    @media only screen and (min-width: 1200px) {
      .client-area-inner {
        padding-top: 0
      }
    }

    .client-area .section-title {
      font-size: 24px;
      line-height: 1.25;
      margin-top: -10px;
      max-width: 345px
    }

    .client-area .clients-wrapper-box {
      margin-top: 54px
    }

    @media only screen and (max-width: 1399px) {
      .client-area .clients-wrapper-box {
        margin-top: 44px
      }
    }

    @media only screen and (max-width: 1199px) {
      .client-area .clients-wrapper-box {
        margin-top: 34px
      }
    }

    .client-area .clients-wrapper {
      display: grid;
      gap: 40px 60px;
      grid-template-columns: repeat(6, 230px);
      justify-content: space-between
    }

    @media only screen and (max-width: 1199px) {
      .client-area .clients-wrapper {
        grid-template-columns: repeat(4, 180px)
      }
    }

    @media only screen and (max-width: 991px) {
      .client-area .clients-wrapper {
        grid-template-columns: repeat(2, 1fr)
      }
    }

    @media(max-width: 575px) {
      .client-area .clients-wrapper {
        grid-template-columns: repeat(1, 1fr)
      }
    }

    .client-area .client-box .title {
      font-size: 18px;
    }

    .client-area .client-box .content {
      margin-bottom: 20px
    }

    @media only screen and (max-width: 1199px) {
      .client-area .client-box .content {
        margin-bottom: 23px
      }
    }

    .client-area .client-box .text {
      font-size: 14px;
      line-height: 1.28;
      margin-top: 14px
    }

    .client-area p {
      color: var(--primary);
      font-family: var(--font_plusjakartasans);
      font-weight: 600;
      font-size: clamp(14px, 2vw, 18px);
    }

    /* Responsive font for modern screens */
    .responsive-text {
      font-size: clamp(14px, 2vw, 18px);
      margin-bottom: 0.5rem;
    }

    /* Responsive logo image */
    .responsive-logo {
      max-height: clamp(28px, 6vw, 60px);
      width: auto;
      height: auto;
      margin: 0 8px;
      transition: all 0.3s ease-in-out;
    }

    /* Optional: hide scrollbar in modern browsers while allowing scroll */
    .client-area .d-flex::-webkit-scrollbar {
      display: none;
    }

    .client-area .d-flex {
      -ms-overflow-style: none;
      scrollbar-width: none;
    }


    /*** news ****/



    .news-blog-area .section-title {
      max-width: 500px
    }

    .news-blog-area .section-header {
      display: grid;
      gap: 20px 60px;
      grid-template-columns: auto auto;
      justify-content: space-between;
      align-items: center
    }

    @media only screen and (max-width: 767px) {
      .news-blog-area .section-header {
        grid-template-columns: auto
      }
    }

    .news-blog-area .news-blog-wrapper-box {
      margin-top: 51px
    }

    @media only screen and (max-width: 1399px) {
      .news-blog-area .news-blog-wrapper-box {
        margin-top: 41px
      }
    }

    .news-blog-area .news-blog-wrapper {
      display: grid;
      gap: 40px 45px;
      grid-template-columns: repeat(4, 1fr)
    }

    @media only screen and (max-width: 991px) {
      .news-blog-area .news-blog-wrapper {
        grid-template-columns: repeat(2, 1fr)
      }
    }

    @media only screen and (max-width: 767px) {
      .news-blog-area .news-blog-wrapper {
        grid-template-columns: repeat(1, 1fr)
      }
    }

    .news-blog:hover .thumb img {
      transform: scale(1.1)
    }

    .news-blog .thumb {
      overflow: hidden
    }

    .news-blog .thumb img {
      width: 100%;
      transition: all .5s;
      border-radius: 5px;
    }

    .news-blog .content-wrapper {
      margin-top: 28px
    }

    .news-blog .title {
      font-size: 24px;
      line-height: 1.15
    }

    @media only screen and (max-width: 1399px) {
      .news-blog .title {
        font-size: 20px
      }
    }

    .news-blog .tag {
      font-size: 15px;
      display: inline-block
    }

    .news-blog .meta {
      margin-top: 27px;
      display: flex;
      gap: 5px;
      align-items: center
    }

    @media only screen and (max-width: 1399px) {
      .news-blog .meta {
        margin-top: 17px
      }
    }

    .news-blog .date {
      font-size: 15px;
      display: inline-block;
      color: var(--primary);
    }

    .news-blog .date.has-left-line {
      padding-inline-start: 25px
    }

    .news-blog .date.has-left-line:before {
      width: 20px
    }

    .line-top {
      border-top: 1px solid var(--border);
    }

    .footer-nav-list .text p {
      font-size: 20px;
      color: black;
      font-family: var(--font_teko);
      text-transform: uppercase;
      line-height: 1;
    }