.fa-solid, .fas {
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    /*margin-right: 10px;*/
}

.white{
    color: #fff;
}

.pb-15{
    padding-block: 15px;
}

b, strong {
    font-weight: 500;
}
/*footer*/
 .copyright-area {
    border-top: 1px solid #202020
  }

  .copyright-area-inner {
    padding: 32px 0;
    position: relative
  }

  .copyright-area-inner .shape-1 {
    position: absolute;
    bottom: 0;
    inset-inline-end: calc(100% - 300px)
  }

  @media only screen and (max-width: 991px) {
    .copyright-area-inner .shape-1 {
      display: none
    }
  }

  .dir-rtl .copyright-area-inner .shape-1 img {
    transform: rotateY(180deg)
  }

  .copyright-area .copyright-text .text {
    text-align: center;
    font-weight: 500;
    color: var(--white-2)
  }

  .copyright-area .copyright-text .text a {
    color: var(--white)
  }

   .footer-bottom-row {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 60px;
    padding-top: 40px; 
    padding-bottom: 30px;
  }
 
  /* 3 column addresses */
  .footer-branches {
    display: grid;
    grid-template-columns: repeat(4, minmax(283px, 1fr));
    gap: 60px;
  }

  /* Responsive */
  @media (max-width: 1199px) {
    .footer-bottom-row {
      grid-template-columns: 1fr;
    }

    .footer-branches {
      grid-template-columns: repeat(2, 1fr);
    }
  }

  @media (max-width: 575px) {
    .footer-branches {
      grid-template-columns: 1fr;
    }
  }
 
  .footer-area-inner {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 60px;
  }

  /* Right side = 4 columns */
  .footer-right {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 49px !important;
  }

  /* Responsive */
  @media (max-width: 1199px) {
    .footer-area-inner {
      grid-template-columns: 1fr !important;
    }

    .footer-right {
      grid-template-columns: repeat(2, 1fr) !important;
    }
  }

  @media (max-width: 575px) {
    .footer-right {
      grid-template-columns: 1fr !important;
    }
  }

  /*.footer-nav-list li:nth-last-child(2) a,*/
  /*.footer-nav-list li:last-child a {*/
  /*  white-space: nowrap;*/
  /*}*/
 .footer-nav-list li:nth-last-child(2) a {
  white-space: nowrap;
}

.footer-nav-list li:last-child a {
  white-space: nowrap;
}


/*team-area*/
.team-area-about .section-title {
    max-width: 630px
}

.team-area-about .section-header {
    display: grid;
    gap: 20px 60px;
    grid-template-columns: 1fr auto;
    align-items: center
}

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

.team-area-about .section-header .text {
    max-width: 420px
}

.team-area-about .team-wrapper-box {
    margin-top: 63px
}

@media only screen and (max-width: 1399px) {
    .team-area-about .team-wrapper-box {
        margin-top: 53px
    }
}

@media only screen and (max-width: 1199px) {
    .team-area-about .team-wrapper-box {
        margin-top: 43px
    }
}

.team-area-about .team-wrapper {
    display: grid;
    gap: 40px 30px;
    grid-template-columns: repeat(4, 1fr)
}

@media only screen and (max-width: 1399px) {
    .team-area-about .team-wrapper {
        gap: 40px 30px
    }
}

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

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

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

.team-box-about .thumb img {
    width: 100%
}

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

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

.team-box-about .text {
    font-size: 16px;
    font-weight: 500;
    margin-top: 7px
}

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

.team-box-about .content {
    margin-top: 37px
}

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

/*servicesarea2*/
 .service-area-2 {
        background-color: var(--primary);
        overflow: hidden
    }

    .dark .service-area-2 {
        background-color: #1b1b1b
    }

    .service-area-2 .service-area-inner-2 {
        position: relative;
        z-index: 1;
        padding-top: 145px
    }

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

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

    .service-area-2 .service-area-inner-2 .shape-1-2 {
        position: absolute;
        top: 0;
        inset-inline-end: calc(100% - 77px);
        width: max-content;
        z-index: -1
    }

    @media only screen and (max-width: 1399px) {
        .service-area-2 .service-area-inner-2 .shape-1-2 {
            inset-inline-end: 100%;
            width: 200px
        }
    }

    @media only screen and (max-width: 991px) {
        .service-area-2 .service-area-inner-2 .shape-1-2 {
            display: none
        }
    }

    .service-area-2 .service-area-inner-2 .shape-2-2 {
        position: absolute;
        top: 0;
        inset-inline-end: calc(100% - 115px);
        transform: translateY(-50%)
    }

    @media only screen and (max-width: 1399px) {
        .service-area-2 .service-area-inner-2 .shape-2-2 {
            inset-inline-end: calc(100% - 15px);
            width: 40px
        }
    }

    @media only screen and (max-width: 991px) {
        .service-area-2 .service-area-inner-2 .shape-2-2 {
            display: none
        }
    }

    .service-area-2 .service-area-inner-2 .shape-3-2 {
        position: absolute;
        bottom: 0;
        inset-inline-start: calc(100% + 87px);
        width: max-content
    }

    @media only screen and (max-width: 1399px) {
        .service-area-2 .service-area-inner-2 .shape-3-2 {
            inset-inline-end: calc(100% + 57px);
            width: 100px
        }
    }

    @media only screen and (max-width: 991px) {
        .service-area-2 .service-area-inner-2 .shape-3-2 {
            display: none
        }
    }

    .service-area-2 .service-area-inner-2 .shape-4-2 {
        position: absolute;
        height: 100%;
        top: 0;
        z-index: -2;
        transform: translateX(-10%)
    }

    @media only screen and (max-width: 991px) {
        .service-area-2 .service-area-inner-2 .shape-4-2 {
            display: none
        }
    }

    .service-area-2 .section-header-2 {
        display: flex;
        gap: 20px 60px;
        align-items: center;
        justify-content: space-between
    }

    @media only screen and (max-width: 767px) {
        .service-area-2 .section-header-2 {
            flex-direction: column;
            align-items: flex-start
        }
    }

    .service-area-2 .section-header-2 .text-2 {
        max-width: 350px;
        color: var(--white-2)
    }

    .service-area-2 .section-header-2 .title-wrapper-2 {
        margin-top: 17px
    }

    .service-area-2 .section-subtitle-2 {
        color: var(--white)
    }

    .service-area-2 .section-title-2 {
        max-width: 505px;
        font-size: 55px;
        color: var(--white)
    }

    .service-area-2 .services-wrapper-2 {
        display: grid;
        gap: 30px;
        grid-template-columns: repeat(4, 1fr)
    }

    .service-area-2 .service-box-2 .wc-btn-normal {
    color: var(--white);
    transition: all .5s;
}
.service-area-2 .service-box-2:hover .wc-btn-normal {
    color: var(--theme);
}

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

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

    .service-area-2 .service-box-2 {
        background-color: #1b1b1b;
        padding: 50px 22px 48px;
        border-radius: 40px
    }

    .dark .service-area-2 .service-box-2 {
        background-color: #222
    }

    @media only screen and (max-width: 1399px) {
        .service-area-2 .service-box-2 {
            padding: 40px 25px 38px;
            border-radius: 20px
        }
    }

    .service-area-2 .service-box-2:hover .wc-btn-normal-2 {
        color: var(--theme)
    }

    .service-area-2 .service-box-2 .thumb-2 img {
        max-height: 100px
    }

    @media only screen and (max-width: 1399px) {
        .service-area-2 .service-box-2 .thumb-2 img {
            max-height: 70px
        }
    }

    .service-area-2 .service-box-2 .title-2 {
        font-size: 26px;
        font-weight: 500;
        color: var(--white);
        line-height: 1.5
    }

    .service-area-2 .service-box-2 .content-2 {
        margin-top: 47px
    }

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

    .service-area-2 .service-box-2 .text-2 {
        margin-top: 21px;
        color: var(--white-2)
    }

    .service-area-2 .service-box-2 .btn-wrapper-2 {
        margin-top: 48px
    }

    .service-area-2 .service-box-2 .wc-btn-normal-2 {
        color: var(--white);
        transition: all .5s
    }

    .service-area-2 .services-wrapper-box-2 {
        margin-top: 86px
    }

    @media only screen and (max-width: 1399px) {
        .service-area-2 .services-wrapper-box-2 {
            margin-top: 66px
        }
    }

    @media only screen and (max-width: 1199px) {
        .service-area-2 .services-wrapper-box-2 {
            margin-top: 46px
        }
    }


    .hero-area-cl .btn-wrapper {
        margin-top: 33px
    }


/*about-area starts here  */
 .about-area-cl .thumbs-cl {
    width: 100%;
    aspect-ratio: 100/118;
    position: relative;
    max-width: 610px
}

.about-area-cl .thumbs-cl img {
    border-radius: 5px
}

.about-area-cl .thumbs-cl .img-1-cl {
    width: 49%;
    position: absolute;
    top: 9%;
    inset-inline-start: 0
}

.about-area-cl .thumbs-cl .img-2-cl {
    position: absolute;
    inset-inline-end: 0;
    top: 0;
    width: 41%
}

.about-area-cl .thumbs-cl .img-3-cl {
    position: absolute;
    bottom: 0;
    inset-inline-start: 26%;
    width: 59%
}

.about-area-cl .about-area-inner-cl {
    display: grid;
    gap: 50px 60px;
    grid-template-columns: 610px 444px;
    justify-content: space-between;
    align-items: center
}

@media only screen and (max-width: 1399px) {
    .about-area-cl .about-area-inner-cl {
        grid-template-columns:510px 444px
    }
}

@media only screen and (max-width: 1199px) {
    .about-area-cl .about-area-inner-cl {
        grid-template-columns:410px 400px
    }
}

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

.about-area-cl .section-content-cl .text-wrapper-cl {
    margin-top: 33px
}

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

.about-area-cl .section-content-cl .btn-wrapper-cl {
    margin-top: 43px;
    display: flex;
    gap: 30px;
    align-items: center
}

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

.about-area-cl .experience-box-cl {
    margin-top: 55px
}

@media only screen and (max-width: 1199px) {
    .about-area-cl .experience-box-cl {
        margin-top:35px
    }
}

.about-area-cl .experience-box-cl .number-cl {
    font-size: 100px;
    font-weight: 500;
    display: flex;
    align-items: flex-start
}

@media only screen and (max-width: 1199px) {
    .about-area-cl .experience-box-cl .number-cl {
        font-size:70px
    }
}

.about-area-cl .experience-box-cl .number-cl i {
    font-size: 18px;
    margin-top: 12px;
    margin-inline-start:9px
}

@media only screen and (max-width: 1199px) {
    .about-area-cl .experience-box-cl .number-cl i {
        margin-top:10px
    }
}

.about-area-cl .experience-box-cl .info-cl {
    font-size: 18px;
    line-height: 1.2;
    max-width: 180px;
    font-weight: 600;
    margin-top: 10px
}
 /*about- area ends*/
  
  .hero-area-cl .section-content-cl .title-wrapper-cl {
    margin-top: 33px;
}
            .section-title-cl span {
    font-weight: 500
}

.hero-area-cl .section-title-cl {
    font-size: 120px;
    line-height: .92;
    font-weight: 300
}

@media only screen and (max-width: 1919px) {
    .hero-area-cl .section-title-cl {
        font-size:100px
    }
}

@media only screen and (max-width: 1199px) {
    .hero-area-cl .section-title-cl {
        font-size:70px
    }
}

@media only screen and (max-width: 991px) {
    .hero-area-cl .section-title-cl {
        font-size:50px
    }
}

@media only screen and (max-width: 767px) {
    .hero-area-cl .section-title-cl {
        font-size:40px
    }
}

.hero-area-inner-cl{
    position: relative;
    z-index: 1;
    padding-top: 197px;
    padding-bottom: 94px
}

@media only screen and (max-width: 1919px){
    .hero-area-inner-cl{
        padding-top:147px;
        padding-bottom: 44px
    }
}

.hero-area-inner-cl .shape-1-cl{
    position: absolute;
    top: 200px;
    inset-inline-end: calc(100% + 133px);
    width: 132px;
    z-index: -1
}

.hero-area-inner-cl .shape-2-cl{
    position: absolute;
    bottom: 0;
    inset-inline-start: calc(100% - 180px);
    width: 494px;
    z-index: -1
}

@media only screen and (max-width: 1919px){
    .hero-area-inner-cl .shape-2-cl{
        width:314px
    }
}

@media only screen and (max-width: 767px){
    .hero-area-inner-cl .shape-2-cl{
        display:none
    }
}

.hero-area-cl .section-subtitle-cl{
    font-size: 20px;
    text-transform: uppercase;
    font-family: var(--font_plusjakartasans);
    color: var(--primary);
    font-weight: 500;
    display: inline-flex;
    gap: 15px;
    align-items: center
}

@media only screen and (max-width: 1199px){
    .hero-area-cl .section-subtitle-cl{
        font-size:16px
    }
}

.hero-area-cl .section-title-cl{
    font-size: 120px;
    line-height: .92;
    font-weight: 300
}

@media only screen and (max-width: 1919px){
    .hero-area-cl .section-title-cl{
        font-size:100px
    }
}

@media only screen and (max-width: 1199px){
    .hero-area-cl .section-title-cl{
        font-size:70px
    }
}

@media only screen and (max-width: 991px){
    .hero-area-cl .section-title-cl{
        font-size:50px
    }
}

@media only screen and (max-width: 767px){
    .hero-area-cl .section-title-cl{
        font-size:40px
    }
}

.hero-area-cl .section-content-cl{
    display: grid;
    gap: 30px 60px;
    grid-template-columns: auto 380px
}

@media only screen and (max-width: 991px){
    .hero-area-cl .section-content-cl{
        grid-template-columns:auto 340px
    }
}

@media only screen and (max-width: 767px){
    .hero-area-cl .section-content-cl{
        grid-template-columns:auto
    }
}

.hero-area-cl .text-wrapper-cl{
    margin-top: 59px
}

@media only screen and (max-width: 1919px){
    .hero-area-cl .text-wrapper-cl{
        margin-top:39px
    }
}



.image-area-cl{
    background-image: linear-gradient(180deg,#fff 0%,#fff 200px,var(--theme) 200px,var(--theme) 100%)
}

@media only screen and (max-width: 1919px){
    .image-area-cl{
        background-image:linear-gradient(180deg,#fff 0%,#fff 120px,var(--theme) 120px,var(--theme) 100%)
    }
}

@media only screen and (max-width: 767px){
    .image-area-cl{
        background-image:linear-gradient(180deg,#fff 0%,#fff 70px,var(--theme) 70px,var(--theme) 100%)
    }
}
 

 

.image-area-cl .image-wrapper-box-cl{
    position: relative;
    margin-inline-end:calc((100vw + 24px - var(--container-max-widths))/-2)
}

.image-area-cl .video-button-box-cl{
    position: absolute;
    top: 0;
    inset-inline-start: 0
}

/* FEATURES */
.features-area{
    padding-top: 120px;
    padding-bottom: 113px;
    background-color: var(--theme)
}

@media only screen and (max-width: 1919px){
    .features-area{
        padding-top:90px;
        padding-bottom: 83px
    }
}

.features-wrapper{
    display: grid;
    gap: 60px 60px;
    grid-template-columns: repeat(3, 300px);
    justify-content: space-between
}

@media only screen and (max-width: 1199px){
    .features-wrapper{
        grid-template-columns:repeat(3, 240px)
    }
}

@media only screen and (max-width: 991px){
    .features-wrapper{
        grid-template-columns:repeat(2, 310px)
    }
}

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

.feature-box .title{
    font-size: 26px;
    line-height: 1.1;
    color: #fff;
}

.feature-box .title span{
    font-weight: 700
}

.feature-box .content{
    margin-top: 44px
}

@media only screen and (max-width: 767px){
    .feature-box .content{
        margin-top:30px
    }
}

.feature-box .text{
    color: #fff;
    margin-top: 28px
}
.feature-box .title span {
    font-weight: 500
}




/*WEB DEVELOPMENT PAGE CSS*/
 .service-area2-inner{display:grid;gap:40px 60px;grid-template-columns:auto 730px}
@media only screen and (max-width: 1399px){
  .service-area2-inner{grid-template-columns:auto 630px}
}
@media only screen and (max-width: 1199px){
  .service-area2-inner{grid-template-columns:auto 540px}
}
@media only screen and (max-width: 991px){
  .service-area2-inner{grid-template-columns:auto}
}

.service-area2 .section-title{max-width:470px}
@media only screen and (max-width: 1919px){
  .service-area2 .section-title{max-width:430px}
}
@media only screen and (max-width: 1399px){
  .service-area2 .section-title{max-width:370px}
}

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

.service-area2 .section-content .shape{margin-top:37px}
@media only screen and (max-width: 1199px){
  .service-area2 .section-content .shape{margin-top:27px}
}

.dir-rtl .service-area2 .section-content .shape img{transform:rotateY(180deg)}

.service-area2 .section-content .btn-wrapper{margin-top:50px}
@media only screen and (max-width: 1199px){
  .service-area2 .section-content .btn-wrapper{margin-top:40px}
}

.service-area2 .services-wrapper{
  display:grid;
  gap:93px 120px;
  grid-template-columns:repeat(2, 1fr)
}
@media only screen and (max-width: 1399px){
  .service-area2 .services-wrapper{gap:93px 80px}
}
@media only screen and (max-width: 1199px){
  .service-area2 .services-wrapper{gap:63px 50px}
}
@media(max-width: 575px){
  .service-area2 .services-wrapper{grid-template-columns:repeat(1, 1fr)}
}

/* service-box renamed */
.service-box2 .tag{
  font-size:14px;
  display:block;
  color:var(--primary);
  padding-bottom:23px;
  border-bottom:1px solid var(--primary);
  text-transform:uppercase
}
@media only screen and (max-width: 1199px){
  .service-box2 .tag{padding-bottom:13px}
}

.service-box2 .title{font-size:30px;line-height:1.2;font-weight:400;margin-top:29px}
@media only screen and (max-width: 1399px){
  .service-box2 .title{font-size:26px}
}
@media only screen and (max-width: 1199px){
  .service-box2 .title{font-size:22px;margin-top:19px}
}

/*.service-box2 .icon{margin-top:32px}*/
/*@media only screen and (max-width: 1199px){*/
/*  .service-box2 .icon{margin-top:22px}*/
/*}*/
/*.service-box2 .icon img{height:60px}*/
/*@media only screen and (max-width: 1199px){*/
/*  .service-box2 .icon img{height:45px}*/
/*}*/

.service-box2 .text{margin-top:30px}
.service-box2 .btn-wrapper{margin-top:51px}
@media only screen and (max-width: 1399px){
  .service-box2 .btn-wrapper{margin-top:41px}
}
@media only screen and (max-width: 1199px){
  .service-box2 .btn-wrapper{margin-top:31px}
}



/*BUTTON*/
 

    .wc-btn-circle {
        background-color: var(--theme);
        color: #fff;
        width: 40px;
        height: 40px;
        font-size: 14px
    }

    .wc-btn-circle:hover {
        background-color: var(--theme)
    }

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

    .wc-btn-primary {
        font-size: 14px;
        font-weight: 400;
        text-transform: uppercase;
        background-color: var(--theme);
        border-color: #fff0;
        color: #fff;
        padding: 0 22px;
        border-radius: 40px
    }

    .wc-btn-primary:hover {
        background-color: var(--theme);
        color: #fff;
        border-color: #fff0
    }

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

    .wc-btn-group>*:nth-child(1) {
        transform: scale3d(.5, .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(.5, .5, 1);
        margin-inline-start: -40px
    }

    @keyframes mask_animation {
        from {
            -webkit-mask-position: 0 0;
            mask-position: 0 0
        }

        to {
            -webkit-mask-position: 100% 0;
            mask-position: 100% 0
        }
    }

    @keyframes mask_animation_2 {
        from {
            -webkit-mask-position: 100% 0;
            mask-position: 100% 0
        }

        to {
            -webkit-mask-position: 0 0;
            mask-position: 0 0
        }
    }

    .hero-area-cl .btn-wrapper {
        margin-top: 33px
    }
    
    
    /*ABOUT-WEB-AREA*/
        .about-webarea .section-content{margin-top:0px}
@media only screen and (max-width: 1399px){
  .about-webarea .section-content{margin-top:0px}
}
@media only screen and (max-width: 1199px){
  .about-webarea .section-content{margin-top:0px}
}
@media only screen and (max-width: 767px){
  .about-webarea .section-content{margin-top:0px}
}

.about-webarea .section-title{max-width:512px}

.about-webarea .about-thumb{
  position:relative;
  display:inline-block
}

.dir-rtl .about-webarea .about-thumb img{
  transform:rotateY(180deg)
}

.about-webarea .about-thumb .wc-btn-circle{
  position:absolute;
  top:0%;
  inset-inline-end:11%;
  width:37%;
  aspect-ratio:100/100;
  height:auto;
  font-size:30px;
  background-color:rgba(0,0,0,0);
  color:var(--white)
}

@media only screen and (max-width: 1399px){
  .about-webarea .about-thumb .wc-btn-circle{font-size:25px}
}
@media(max-width: 575px){
  .about-webarea .about-thumb .wc-btn-circle{font-size:20px}
}

.about-webarea .section-content{
  display:grid;
  gap:40px 80px;
  grid-template-columns:auto 660px
}

@media only screen and (max-width: 1399px){
  .about-webarea .section-content{grid-template-columns:auto 600px}
}
@media only screen and (max-width: 1199px){
  .about-webarea .section-content{grid-template-columns:auto 460px}
}
@media only screen and (max-width: 991px){
  .about-webarea .section-content{grid-template-columns:auto}
}

.about-webarea .section-content .text-wrapper{margin-top:46px}
@media only screen and (max-width: 991px){
  .about-webarea .section-content .text-wrapper{margin-top:26px}
}

.about-webarea .section-content .btn-wrapper{
  margin-top:53px;
  max-width:470px;

}
@media only screen and (max-width: 991px){
  .about-webarea .section-content .btn-wrapper{
    margin-inline-start:0;
    margin-top:33px
  }
}

.about-webarea .section-content .text{
  max-width:470px;
  
}
@media only screen and (max-width: 991px){
  .about-webarea .section-content .text{
    margin-inline-start:0
  }
}


/*TEAM-WEBAREA*/

.team-webarea{padding-top:62px}
.team-webarea .section-header{margin-top:100px}
@media only screen and (max-width: 1399px){
  .team-webarea .section-header{margin-top:80px}
}
@media only screen and (max-width: 1199px){
  .team-webarea .section-header{margin-top:60px}
}

.team-webarea .section-header .members{
  font-size:18px;
  font-weight:500;
  padding:10px 17px;
  border:1.5px solid var(--primary);
  border-radius:40px;
  line-height:1
}

.team-webarea .section-header .text{max-width:210px}

.team-webarea .section-header .text-wrapper{
  display:flex;
  gap:20px 40px;
  align-items:flex-start
}

.team-webarea .team-slider{margin-top:63px}
@media only screen and (max-width: 1399px){
  .team-webarea .team-slider{margin-top:43px}
}
@media only screen and (max-width: 1199px){
  .team-webarea .team-slider{margin-top:33px}
}

.team-box{background-color:var(--black)}
.dark .team-box{background-color:#1b1b1b}

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

.team-box .thumb{
  display:flex;
  align-items:center;
  justify-content:center;
  aspect-ratio:100/100
}

.team-box .thumb img{transition:all .5s}

.team-box .content{
  display:flex;
  justify-content:space-between;
  padding:58px 40px 35px;
  align-items:center
}

.team-box .content .name{
  font-size:20px;
  line-height:1.27;
  color:var(--white);
  font-weight:600;
  text-transform:uppercase
}

.team-box .content .name br{display:block}

.team-box .content .post{
  text-transform:uppercase;
  font-size:14px;
  color:var(--white-2)
}


/*ABOUT-AREA2*/
.about-webarea2{position:relative;z-index:1}
.about-webarea2-inner{padding-top:270px}

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

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

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

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

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

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

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

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

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

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

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

.about-webarea2 .section-content .section-title{
font-size:48px;
line-height:1.1;
color:var(--white);
margin-top:0
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


/*AWARDS-WEBAREA*/
.awards-webarea{position:relative;z-index:1}

.awards-webarea .section-subtitle.has-right-line{padding-inline-end:130px}
.awards-webarea .section-subtitle.has-right-line:after{width:120px}

.awards-webarea .subtitle-wrapper{margin-bottom:-130px}
@media only screen and (max-width: 1399px){
.awards-webarea .subtitle-wrapper{margin-bottom:-130px}
}
@media only screen and (max-width: 1199px){
.awards-webarea .subtitle-wrapper{margin-bottom:-110px}
}
@media only screen and (max-width: 991px){
.awards-webarea .subtitle-wrapper{margin-bottom:10px}
}

.awards-webarea .section-title-wrapper{
display:flex;
align-items:flex-end;
gap:50px
}
@media only screen and (max-width: 991px){
.awards-webarea .section-title-wrapper{
flex-direction:column;
align-items:flex-start;
gap:20px
}
}

.awards-webarea .awards-webarea-inner{
position:relative;
z-index:1
}

.awards-webarea .section-content{
margin-top:37px;
margin-inline-start:438px
}
@media only screen and (max-width: 1919px){
.awards-webarea .section-content{margin-inline-start:378px}
}
@media only screen and (max-width: 1399px){
.awards-webarea .section-content{margin-inline-start:308px}
}
@media only screen and (max-width: 1199px){
.awards-webarea .section-content{
margin-top:27px;
margin-inline-start:308px
}
}
@media only screen and (max-width: 991px){
.awards-webarea .section-content{margin-inline-start:0}
}

.awards-webarea .section-content .text{max-width:740px}

.dir-rtl .awards-webarea .section-content .shape img{
transform:rotateY(180deg)
}

.awards-webarea .section-content .text-wrapper{margin-top:40px}
@media only screen and (max-width: 1199px){
.awards-webarea .section-content .text-wrapper{margin-top:30px}
}

.awards-webarea .section-content .awards-list{margin-top:63px}
@media only screen and (max-width: 991px){
.awards-webarea .section-content .awards-list{margin-top:33px}
}

.awards-webarea .section-content .awards-list ul{
display:flex;
gap:20px 90px;
max-width:510px
}

@media(max-width: 575px){
.awards-webarea .section-content .awards-list ul{
gap:20px 90px
}
}


/*WEB-DESIGN PAGE*/

.hero-area-webdesng-inner {
    padding-top: 67px;
    padding-bottom: 143px
}

@media only screen and (max-width: 1919px) {
    .hero-area-webdesng-inner {
        /*padding-top: 100px;*/
        padding-bottom: 113px
    }
}

@media only screen and (max-width: 991px) {
    .hero-area-webdesng-inner {
        /*padding-top: 144px;*/
        padding-bottom: 73px
    }
}

.hero-area-webdesng .section-title {
    font-size: 130px;
    line-height: .92;
    font-weight: 500;
    max-width: 915px
}

@media only screen and (max-width: 1919px) {
    .hero-area-webdesng .section-title {
        font-size: 100px
    }
}

@media only screen and (max-width: 1199px) {
    .hero-area-webdesng .section-title {
        font-size: 70px;
        max-width: 555px
    }
}

@media(max-width: 575px) {
    .hero-area-webdesng .section-title {
        font-size: 40px
    }
}

.hero-area-webdesng .section-title .shape-1 {
    margin-top: -26px;
    height: 97px
}

@media only screen and (max-width: 1919px) {
    .hero-area-webdesng .section-title .shape-1 {
        margin-top: -22px;
        height: 77px
    }
}

@media only screen and (max-width: 1199px) {
    .hero-area-webdesng .section-title .shape-1 {
        margin-top: -15px;
        height: 55px
    }
}

@media(max-width: 575px) {
    .hero-area-webdesng .section-title .shape-1 {
        margin-top: -9px;
        height: 30px
    }
}

.hero-area-webdesng .section-title .shape-2 {
    margin-top: -26px;
    height: 97px
}

@media only screen and (max-width: 1919px) {
    .hero-area-webdesng .section-title .shape-2 {
        margin-top: -22px;
        height: 77px
    }
}

@media only screen and (max-width: 1199px) {
    .hero-area-webdesng .section-title .shape-2 {
        margin-top: -15px;
        height: 55px
    }
}

@media(max-width: 575px) {
    .hero-area-webdesng .section-title .shape-2 {
        margin-top: -9px;
        height: 30px
    }
}

.hero-area-webdesng .section-title br {
    display: block
}

.hero-area-webdesng .section-content .text-wrapper .title {
    font-size: 22px;
    line-height: 1.09;
    text-transform: uppercase;
    color: var(--primary)
}

.hero-area-webdesng .section-content .text-wrapper .text {
    margin-top: 26px
}

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

.hero-area-webdesng .section-content .content-end {
    margin-top: -13px;
    display: grid;
    gap: 20px 80px;
    grid-template-columns: 330px auto;
    align-items: center;
    margin-inline-start: 545px
}

@media only screen and (max-width: 1399px) {
    .hero-area-webdesng .section-content .content-end {
        margin-inline-start: 405px
    }
}

@media only screen and (max-width: 1199px) {
    .hero-area-webdesng .section-content .content-end {
        margin-inline-start: 305px;
        gap: 20px 50px
    }
}

@media only screen and (max-width: 991px) {
    .hero-area-webdesng .section-content .content-end {
        grid-template-columns: auto
    }
}

@media only screen and (max-width: 767px) {
    .hero-area-webdesng .section-content .content-end {
        margin-inline-start: 0;
        margin-top: 40px
    }
}

.hero-area-webdesng .section-content .has-left-line {
    width: 100%
}

.hero-area-webdesng .section-content .has-left-line:before {
    width: calc(100% - 180px)
}

@media only screen and (max-width: 1399px) {
    .hero-area-webdesng .section-content .has-left-line:before {
        width: calc(100% - 160px)
    }
}

.hero-area-webdesng .section-content .circle-text {
    width: 130px;
    height: 130px;
    padding: 0;
    margin-inline-start: auto
}

@media only screen and (max-width: 1399px) {
    .hero-area-webdesng .section-content .circle-text {
        width: 110px;
        height: 110px
    }
}


/*ABOUT*/
.about-area-webdesng-inner {
    display: grid;
    grid-template-columns: 1fr 43%
}

@media only screen and (max-width: 1199px) {
    .about-area-webdesng-inner {
        grid-template-columns: 1fr 47%
    }
}

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

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

.about-area-webdesng .section-content {
    padding: 100px 80px;
    position: relative;
    z-index: 1
}

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

@media(max-width: 575px) {
    .about-area-webdesng .section-content {
        padding: 60px 30px
    }
}

.about-area-webdesng .section-content .bg {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    inset-inline-start: 0;
    z-index: -1
}

.about-area-webdesng .section-content .bg:after {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    background-color: rgba(18, 18, 18, .85);
    top: 0;
    inset-inline-start: 0
}

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

.about-area-webdesng .section-content .text-wrapper {
    margin-top: 323px
}

@media only screen and (max-width: 1919px) {
    .about-area-webdesng .section-content .text-wrapper {
        margin-top: 123px
    }
}

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

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

.about-area-webdesng .section-content .text {
    font-size: 18px;
    line-height: 1.35;
    max-width: 440px;
    color: var(--white-2)
}

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

.about-area-webdesng .section-content .text span {
    color: var(--white)
}

.about-area-webdesng .section-content .btn-wrapper {
    margin-top: 42px
}

@media only screen and (max-width: 991px) {
    .about-area-webdesng .section-content .btn-wrapper {
        margin-top: 32px
    }
}

.about-area-webdesng .section-content .section-title {
    max-width: 570px;
    color: var(--white)
}

.about-area-webdesng .section-content .wc-btn-primary {
    background-color: var(--white);
    border-color: var(--white);
    color: var(--black)
}


/*servicearea*/
.services-area-webdesng .section-header {
    display: grid;
    gap: 20px 60px;
    grid-template-columns: auto 625px;
    align-items: center
}

@media only screen and (max-width: 1199px) {
    .services-area-webdesng .section-header {
        grid-template-columns: auto 505px
    }
}

@media only screen and (max-width: 991px) {
    .services-area-webdesng .section-header {
        grid-template-columns: auto
    }
}

.services-area-webdesng .section-title {
    max-width: 635px
}

.services-area-webdesng .services-wrapper-box {
    margin-top: 92px
}

@media only screen and (max-width: 1919px) {
    .services-area-webdesng .services-wrapper-box {
        margin-top: 72px
    }
}

@media only screen and (max-width: 1399px) {
    .services-area-webdesng .services-wrapper-box {
        margin-top: 62px
    }
}

@media only screen and (max-width: 1199px) {
    .services-area-webdesng .services-wrapper-box {
        margin-top: 42px
    }
}

.services-area-webdesng .services-wrapper {
    display: grid;
    gap: 61px 120px;
    grid-template-columns: repeat(2, 1fr)
}

@media only screen and (max-width: 1199px) {
    .services-area-webdesng .services-wrapper {
        gap: 61px 60px
    }
}

@media only screen and (max-width: 991px) {
    .services-area-webdesng .services-wrapper {
        grid-template-columns: repeat(1, 1fr);
        gap: 31px 60px
    }
}

.service-box-webdesng {
    display: grid;
    gap: 20px 60px;
    grid-template-columns: auto 250px;
    padding-top: 18px;
    border-top: 1px solid var(--border)
}

@media(max-width: 575px) {
    .service-box-webdesng {
        grid-template-columns: auto
    }
}

.service-box-webdesng .title {
    font-size: 18px;
    font-weight: 500;
    line-height: 1.66;
    color: var(--primary);
    display: inline-block
}

@media(max-width: 575px) {
    .service-box-webdesng .title {
        font-size: 20px;
        font-weight: 500
    }
}

.service-box-webdesng .feature-list li {
    font-size: 18px;
    font-weight: 300;
    line-height: 1.66;
    color: var(--secondary)
}


/*CTA-WEBDESIGN*/

.cta-area-webd .section-content {
    text-align: center
}

.cta-area-webd .section-content .section-title {
    max-width: 840px;
    margin-inline: auto
}

@media only screen and (max-width: 1919px) {
    .cta-area-webd .section-content .section-title {
        max-width: 700px
    }
}

@media only screen and (max-width: 1199px) {
    .cta-area-webd .section-content .section-title {
        max-width: 580px
    }
}

.cta-area-webd .section-content .btn-wrapper {
    margin-top: 51px
}

@media only screen and (max-width: 1399px) {
    .cta-area-webd .section-content .btn-wrapper {
        margin-top: 41px
    }
}

@media only screen and (max-width: 1199px) {
    .cta-area-webd .section-content .btn-wrapper {
        margin-top: 31px
    }
}
/*END*/

/*WORDPRESS DEVELOPMENT PAGE*/

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

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

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

.about-area-wordpress .section-title {
    text-indent: 0px
}

@media only screen and (max-width: 767px) {
    .about-area-wordpress .section-title {
        text-indent: 0
    }
}

.about-area-wordpress .section-title span {
    color: rgb(18 18 18 / 92%)
}

.dark .about-area-wordpress .section-title span {
    color: rgba(255, 255, 255, .2)
}

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

@media only screen and (max-width: 1399px) {
    .about-area-wordpress .section-content {
        max-width: 755px
    }
}

@media only screen and (max-width: 767px) {
    .about-area-wordpress .section-content {
        margin-top: 22px
    }
}

.about-area-wordpress .section-content .circle-text {
    width: 130px;
    height: 130px;
    padding: 0
}

@media only screen and (max-width: 991px) {
    .about-area-wordpress .section-content .circle-text {
        width: 100px;
        height: 100px
    }
}

.about-area-wordpress .section-content .circle-text .text {
    animation: none;
    position: relative
}

.about-area-wordpress .section-content .has-left-line {
    padding-inline-start: 205px
}

@media only screen and (max-width: 1399px) {
    .about-area-wordpress .section-content .has-left-line {
        padding-inline-start: 155px
    }
}

.about-area-wordpress .section-content .has-left-line:before {
    background-color: var(--primary);
    width: 155px
}

@media only screen and (max-width: 1399px) {
    .about-area-wordpress .section-content .has-left-line:before {
        width: 105px
    }
}

.about-area-wordpress .section-content .btn-wrapper {
    margin-top: 58px
}

@media only screen and (max-width: 1919px) {
    .about-area-wordpress .section-content .btn-wrapper {
        margin-top: 48px
    }
}

@media only screen and (max-width: 767px) {
    .about-area-wordpress .section-content .btn-wrapper {
        margin-top: 28px
    }
}

@media only screen and (max-width: 767px) {
    .about-area-wordpress .section-content .section-content-second {
        display: none
    }
}

.about-area-wordpress .about-thumbs {
    display: flex;
    gap: 20px 50px;
    justify-content: flex-end
}

@media only screen and (max-width: 767px) {
    .about-area-wordpress .about-thumbs {
        gap: 20px 20px
    }
}

.about-area-wordpress .about-thumbs .thumb-second {
    max-width: 855px;
    flex: 1 1 664px;
}

@media only screen and (max-width: 1399px) {
    .about-area-wordpress .about-thumbs .thumb-second {
        max-width: 755px
    }
}



/*feature-area*/
.feature-area-wordpress {
    background-color: #f0f2f4;
    border-radius: 20px;
    padding-inline: 45px
}

.dark .feature-area-wordpress {
    background-color: #1b1b1b
}

@media only screen and (max-width: 991px) {
    .feature-area-wordpress {
        padding-inline: 15px
    }
}

.feature-area-wordpress .section-title {
    max-width: 861px
}

.feature-area-wordpress .section-content {
    display: grid;
    gap: 40px 60px;
    grid-template-columns: auto 550px;
    align-items: flex-start;
    margin-top: 63px
}

@media only screen and (max-width: 1919px) {
    .feature-area-wordpress .section-content {
        margin-top: 53px
    }
}

@media only screen and (max-width: 1399px) {
    .feature-area-wordpress .section-content {
        margin-top: 43px;
        grid-template-columns: auto 450px
    }
}

@media only screen and (max-width: 1199px) {
    .feature-area-wordpress .section-content {
        margin-top: 33px;
        grid-template-columns: auto
    }
}

.feature-area-wordpress .feature-thumb {
    border-radius: 20px;
    overflow: hidden;
    display: inline-block;
    position: relative;
    max-width: 660px
}

.feature-area-wordpress .feature-thumb .thumb img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover
}

.feature-area-wordpress .feature-thumb .info {
    text-align: center
}

.feature-area-wordpress .feature-thumb .info img {
    width: 90px
}

@media only screen and (max-width: 767px) {
    .feature-area-wordpress .feature-thumb .info img {
        width: 60px
    }
}

.feature-area-wordpress .feature-thumb .info .text {
    font-size: 24px;
    line-height: 1.08;
    margin-top: 11px;
    color: var(--white);
    font-family: var(--font_instrumentsans);
    font-weight: 500
}

@media only screen and (max-width: 767px) {
    .feature-area-wordpress .feature-thumb .info .text {
        font-size: 18px
    }
}

.feature-area-wordpress .feature-thumb .btn-wrapper {
    background-color: #f0f2f4;
    position: absolute;
    inset-inline-start: 110px;
    bottom: 0;
    padding: 25px 35px 19px;
    border-radius: 20px 20px 0 0
}

.dark .feature-area-wordpress .feature-thumb .btn-wrapper {
    background-color: #1b1b1b
}

@media only screen and (max-width: 767px) {
    .feature-area-wordpress .feature-thumb .btn-wrapper {
        inset-inline-start: 40px;
        padding: 15px 25px 15px
    }
}

.feature-area-wordpress .feature-thumb .btn-wrapper:before {
    content: "";
    width: 40px;
    height: 40px;
    background-color: rgba(0, 0, 0, 0);
    border-radius: 50%;
    position: absolute;
    bottom: 0;
    right: 100%;
    box-shadow: 20px 20px 0 #f0f2f4
}

.dark .feature-area-wordpress .feature-thumb .btn-wrapper:before {
    box-shadow: 20px 20px 0 #1b1b1b
}

.feature-area-wordpress .feature-thumb .btn-wrapper:after {
    content: "";
    width: 40px;
    height: 40px;
    background-color: rgba(0, 0, 0, 0);
    border-radius: 50%;
    position: absolute;
    bottom: 0;
    left: 100%;
    box-shadow: -20px 20px 0 #f0f2f4
}

.dark .feature-area-wordpress .feature-thumb .btn-wrapper:after {
    box-shadow: -20px 20px 0 #1b1b1b
}

.feature-area-wordpress .features-wrapper1>* {
    border-bottom: 1px solid var(--border);
    padding: 37px 0 33px
}

@media only screen and (max-width: 1399px) {
    .feature-area-wordpress .features-wrapper1>* {
        padding: 27px 0 23px
    }
}

.feature-area-wordpress .features-wrapper1>*:first-child {
    border-top: 1px solid var(--border)
}

.feature-area-wordpress .feature-box-wordpress {
    display: grid;
    gap: 20px 44px;
    grid-template-columns: auto 1fr;
    align-items: flex-start
}

@media only screen and (max-width: 1399px) {
    .feature-area-wordpress .feature-box-wordpress {
        gap: 20px 34px
    }
}

@media(max-width: 575px) {
    .feature-area-wordpress .feature-box-wordpress {
        grid-template-columns: auto
    }
}

.feature-area-wordpress .feature-box-wordpress .thumb img {
    max-width: 96px
}

@media only screen and (max-width: 1399px) {
    .feature-area-wordpress .feature-box-wordpress .thumb img {
        max-width: 76px
    }
}

.feature-area-wordpress .feature-box-wordpress .title {
    font-size: 26px;
    line-height: 1
}

.feature-area-wordpress .feature-box-wordpress .text {
    margin-top: 16px
}

/*SERVICE-AREA*/
.service-area-wordpress .section-title {
    max-width: 740px;
    margin-inline: auto
}

@media only screen and (max-width: 1919px) {
    .service-area-wordpress .section-title {
        max-width: 653px;
        text-align: center;
    }
}

@media only screen and (max-width: 1199px) {
    .service-area-wordpress .section-title {
        max-width: 460px
    }
}

@media only screen and (max-width: 991px) {
    .service-area-wordpress .section-title {
        max-width: 460px;
        margin: 0
    }
}

.service-area-wordpress .section-header .text {
    max-width: 744px;
    margin-inline-start: 279px;
    text-align: center;
}

@media only screen and (max-width: 1399px) {
    .service-area-wordpress .section-header .text {
        margin-inline-start: 180px
    }
}

@media only screen and (max-width: 1199px) {
    .service-area-wordpress .section-header .text {
        margin-inline-start: 430px
    }
}

@media only screen and (max-width: 991px) {
    .service-area-wordpress .section-header .text {
        max-width: 460px;
        margin: 0
    }
}

.service-area-wordpress .section-header .text-wrapper {
    margin-top: 22px
}

@media only screen and (max-width: 1199px) {
    .service-area-wordpress .section-header .text-wrapper {
        margin-top: 12px
    }
}

.service-area-wordpress .section-header .section-title-wrapper {
    position: relative
}

.service-area-wordpress .section-header .section-title-wrapper .shape-1 {
    position: absolute;
    width: 93px;
    top: -60px;
    inset-inline-start: 43%;
    z-index: 99
}

@media only screen and (max-width: 1199px) {
    .service-area-wordpress .section-header .section-title-wrapper .shape-1 {
        display: none
    }
}

.service-area-wordpress .services-wrapper-box {
    margin-top: 73px
}

@media only screen and (max-width: 1919px) {
    .service-area-wordpress .services-wrapper-box {
        margin-top: 53px
    }
}

@media only screen and (max-width: 1199px) {
    .service-area-wordpress .services-wrapper-box {
        margin-top: 33px
    }
}

.service-box-wordpress {
    border-bottom: 1px solid #ececec;
    padding: 44px 0;
    display: grid;
    gap: 20px 60px;
    grid-template-columns: 160px 1fr 100px
}

.dark .service-box-wordpress {
    border-color: #252525
}

@media only screen and (max-width: 1199px) {
    .service-box-wordpress {
        padding: 24px 0;
        grid-template-columns: 100px 1fr 100px
    }
}

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

.service-box-wordpress:first-child {
    border-top: 1px solid #ececec
}

.dark .service-box-wordpress:first-child {
    border-color: #252525
}

.service-box-wordpress .number {
    font-size: 26px;
    font-family: var(--font_teko);
    font-weight: 600;
    color: var(--primary)
}

@media only screen and (max-width: 1199px) {
    .service-box-wordpress .number {
        font-size: 22px
    }
}

.service-box-wordpress .title {
    font-size: 26px;
        font-weight: 500;
    /*text-transform: capitalize;*/
    line-height: .88
}

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

.service-box-wordpress .text {
    max-width: 373px
}

.service-box-wordpress .feature-list {
    margin-top: 18px
}

.service-box-wordpress .feature-list li {
    font-size: 18px;
    line-height: 1.41;
    color: var(--primary)
}

.service-box-wordpress .icon {
    width: 88px;
    height: 115px;
    /*border: 1px solid #ececec;*/
    border-radius: 44px;
    display: inline-flex;
    justify-content: center;
    align-items: center
}

.dark .service-box-wordpress .icon {
    border-color: #252525
}

.service-box-wordpress .content {
    display: grid;
    gap: 20px 60px;
    grid-template-columns: 360px 1fr
}

@media only screen and (max-width: 1399px) {
    .service-box-wordpress .content {
        grid-template-columns: 300px 1fr
    }
}

@media only screen and (max-width: 1199px) {
    .service-box-wordpress .content {
        grid-template-columns: 210px 1fr
    }
}

@media only screen and (max-width: 991px) {
    .service-box-wordpress .content {
        grid-template-columns: auto
    }
}

/*image-area*/

.image-area {
    border-bottom: 1px solid var(--border)
}

.image-area .image-wrapper {
    position: relative
}

.image-area .image-wrapper img {
    width: 100%
}

.image-area .image-wrapper .title {
    font-size: 26px;
    line-height: 1;
    max-width: 200px;
    color: var(--white);
    position: absolute;
    inset-inline-end: 50px;
    bottom: 42px
}

@media only screen and (max-width: 1199px) {
    .image-area .image-wrapper .title {
        font-size: 26px
    }
}

@media only screen and (max-width: 991px) {
    .image-area .image-wrapper .title {
        font-size: 24px;
        font-weight: 600;
        max-width: 150px
    }
}

@media only screen and (max-width: 767px) {
    .image-area .image-wrapper .title {
        font-size: 20px;
        inset-inline-end: 20px;
        bottom: 14px
    }
}


.faq-area-wordpress .section-title {
    max-width: 468px
}

@media(min-width: 992px) {
    .faq-area-wordpress .section-title {
        font-size: 55px
    }
}

.faq-area-wordpress .section-content {
    display: grid;
    gap: 40px 60px;
    grid-template-columns: 550px 550px;
    align-items: center;
    justify-content: space-between
}

@media only screen and (max-width: 1199px) {
    .faq-area-wordpress .section-content {
        grid-template-columns: 420px 460px
    }
}

@media only screen and (max-width: 991px) {
    .faq-area-wordpress .section-content {
        grid-template-columns: auto
    }
}

.faq-area-wordpress .accordion-wrapper {
    margin-top: 27px
}

.faq-area-wordpress .accordion .accordion-button {
    font-size: 20px;
    line-height: 1;
    color: var(--primary);
    padding-top: 18px;
    padding-bottom: 18px;
    padding-inline-start: 0;
    padding-inline-end: 0;
    background-color: rgba(0, 0, 0, 0);
    box-shadow: none;
    text-align: start;
    
}

@media only screen and (max-width: 1199px) {
    .faq-area-wordpress .accordion .accordion-button {
        font-size: 18px
    }
}

.faq-area-wordpress .accordion .accordion-button .section-subtitle {
    font-size: 12px;
    font-weight: 700;
    color: var(--primary);
    text-transform: uppercase;
    padding: 8px 16px;
    display: inline-block;
    border-radius: 10px;
    background-color: var(--white)
}

@media only screen and (max-width: 1199px) {
    .faq-area-wordpress .accordion .accordion-button br {
        display: none
    }
}

.faq-area-wordpress .accordion .accordion-button::after {
    content: "+";
    color: var(--primary);
    background-image: none;
    line-height: 1;
    width: auto;
    height: auto;
    font-size: 25px;
    margin-inline-start: 50px;
    margin-inline-start: auto;
    margin-inline-end: 0
}

.faq-area-wordpress .accordion .accordion-button:not(.collapsed) {
    pointer-events: none
}

.faq-area-wordpress .accordion .accordion-button:not(.collapsed)::after {
    content: "-"
}

.faq-area-wordpress .accordion .accordion-item {
    border-bottom: 1px solid var(--border);
    background-color: rgba(0, 0, 0, 0);
    border-radius: 0px
}

.faq-area-wordpress .accordion .accordion-item:not(:first-child) {
    margin-top: 0px
}

.faq-area-wordpress .accordion .accordion-item:first-child {
    border-top: 1px solid var(--border)
}

.faq-area-wordpress .accordion .accordion-body {
    font-size: 18px;
    line-height: 1.44;
    padding-inline-start: 0px;
    padding-inline-end: 0px;
    padding-bottom: 24px;
    padding-top: 0;
    color: var(--secondary)
}

@media only screen and (max-width: 991px) {
    .faq-area-wordpress .accordion .accordion-body {
        padding-bottom: 23px
    }
}

.faq-area-wordpress .thumb {
    position: relative
}

.faq-area-wordpress .thumb img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover
}

/*SMM PAGE*/

.counter-area-smm-inner {
    display: grid;
    gap: 10px;
    grid-template-columns: 1fr 870px
}

@media only screen and (max-width: 1919px) {
    .counter-area-smm-inner {
        grid-template-columns: 1fr 670px
    }
}

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

.counter-area-smm .thumb img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover
}

.counter-area-smm .counter-wrapper {
    display: grid;
    gap: 10px;
    grid-template-columns: 1fr 1fr
}

@media(max-width: 575px) {
    .counter-area-smm .counter-wrapper {
        grid-template-columns: 1fr
    }
}

.counter-area-smm .counter-box {
    padding: 46px 50px 32px;
    display: flex;
    gap: 10px;
    flex-direction: column;
    justify-content: space-between;
    background-color: #fbf9f9;
    position: relative;
    z-index: 1
}

@media only screen and (max-width: 1919px) {
    .counter-area-smm .counter-box {
        padding: 36px 40px 22px
    }
}

.dark .counter-area-smm .counter-box {
    background-color: #1b1b1b
}

.counter-area-smm .counter-box:before {
    content: url(../imgs/shape/img-s-46.webp);
    position: absolute;
    top: 0;
    inset-inline-start: 0;
    z-index: -1
}

.dir-rtl .counter-area-smm .counter-box:before {
    transform: rotateY(180deg)
}

.dark .counter-area-smm .counter-box:before {
    content: url(../imgs/shape/img-s-46-light.webp)
}

.counter-area-smm .counter-box .text {
    font-size: 24px;
    line-height: 1.26
}

@media only screen and (max-width: 1919px) {
    .counter-area-smm .counter-box .text {
        font-size: 20px
    }
}

.counter-area-smm .counter-box .number {
    font-size: 100px;
    line-height: 1;
    margin-top: 60px
}

@media only screen and (max-width: 1919px) {
    .counter-area-smm .counter-box .number {
        font-size: 70px
    }
}

.counter-area-smm .counter-box.dark {
    background-color: var(--black)
}

.dark .counter-area-smm .counter-box.dark {
    background-color: #1b1b1b
}

.counter-area-smm .counter-box.dark:before {
    content: url(../imgs/shape/img-s-46-light.webp)
}

/*PROCESSAREA*/
.process-area-smm .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: 1199px) {
    .process-area-smm .section-header {
        grid-template-columns: auto
    }
}

.process-area-smm .section-header .text {
    max-width: 420px
}

.process-area-smm .section-title {
    max-width: 630px
}

.process-area-smm .process-wrapper-box {
    margin-top: 87px
}

@media only screen and (max-width: 1399px) {
    .process-area-smm .process-wrapper-box {
        margin-top: 67px
    }
}

@media only screen and (max-width: 1199px) {
    .process-area-smm .process-wrapper-box {
        margin-top: 57px
    }
}

.process-area-smm .process-wrapper {
    display: grid;
    gap: 73px 60px;
    grid-template-columns: repeat(3, 373px);
    justify-content: space-between
}

@media only screen and (max-width: 1399px) {
    .process-area-smm .process-wrapper {
        gap: 63px 55px
    }
}

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

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

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

.process-box-smm .thumb img {
    /*height: 60px*/
}

.process-box-smm .content {
    margin-top: 43px
}

@media only screen and (max-width: 1199px) {
    .process-box-smm .content {
        margin-top: 33px
    }
}

.process-box-smm .title {
    font-size: 26px;
    line-height: 1
}

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

.process-box-smm .text {
    margin-top: 25px
}

/*COUNTER AREA*/
.counter-area-smm .section-header {
        display: grid;
    gap: 61px 350px;
    grid-template-columns: 1fr 1040px;
    justify-content: flex-end;
    margin-inline-end: 80px;
    margin-bottom: 89px
}

@media only screen and (max-width: 1919px) {
    .counter-area-smm .section-header {
        margin-inline-end: 50px;
        margin-bottom: 59px
    }
}

@media only screen and (max-width: 1199px) {
    .counter-area-smm .section-header {
        grid-template-columns: auto 690px
    }
}

@media only screen and (max-width: 991px) {
    .counter-area-smm .section-header {
        grid-template-columns: auto
    }
}

@media only screen and (max-width: 767px) {
    .counter-area-smm .section-header {
        margin-inline-end: 0;
        margin-bottom: 39px
    }
}

@media(max-width: 575px) {
    .counter-area-smm .section-header {
        justify-content: center
    }
}

.counter-area-smm .section-header .text {
    max-width: 251px
}

.counter-area-smm .content-last {
    display: flex;
    align-items: center;
    gap: 20px 110px
}

@media(max-width: 575px) {
    .counter-area-smm .content-last {
        flex-direction: column;
        align-items: flex-start
    }
}

.counter-area-smm .section-title {
    font-size: 120px;
    max-width: 416px
}

@media only screen and (max-width: 1919px) {
    .counter-area-smm .section-title {
        font-size: 80px
    }
}

@media only screen and (max-width: 1199px) {
    .counter-area-smm .section-title {
        font-size: 46px
    }
}

@media only screen and (max-width: 991px) {
    .counter-area-smm .section-title {
        font-size: 40px
    }
}

@media only screen and (max-width: 767px) {
    .counter-area-smm .section-title {
        font-size: 35px
    }
}

.counter-area-smm .section-subtitle {
    font-size: 18px;
    font-family: var(--font_plusjakartasans);
    color: var(--primary)
}

.counter-area-smm .section-subtitle span {
    font-weight: 700
}

.counter-area-smm .subtitle-wrapper {
    margin-top: 20px
}

.counter-area-smm .text-wrapper {
    margin-top: 20px
}


/*tools area*/

.tools-area {
    background-color: #f7f7f7
}

.dark .tools-area {
    background-color: #1b1b1b
}

.tools-area-inner {
    padding-top: 211px;
    display: flex;
    gap: 40px 60px;
    justify-content: space-between
}

@media only screen and (max-width: 1919px) {
    .tools-area-inner {
        padding-top: 181px
    }
}

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

@media only screen and (max-width: 767px) {
    .tools-area-inner {
        flex-direction: column
    }
}

.tools-area .section-content {
    max-width: 557px
}

.tools-area .section-content .text {
    max-width: 481px
}

.tools-area .section-content .text-wrapper {
    /*margin-inline-start: 110px;*/
    margin-top: 54px
}

@media only screen and (max-width: 767px) {
    .tools-area .section-content .text-wrapper {
        margin-inline-start: 0;
        margin-top: 34px
    }
}

.tools-area .section-content .tools-list {
    margin-top: 50px;
    margin-inline-start: 110px
}

@media only screen and (max-width: 1399px) {
    .tools-area .section-content .tools-list {
        margin-top: 50px
    }
}

@media only screen and (max-width: 767px) {
    .tools-area .section-content .tools-list {
        margin-inline-start: 0;
        margin-top: 34px
    }
}

.tools-area .section-content .tools-list ul {
    display: flex;
    gap: 10px
}

.tools-area .section-content .tools-list ul li {
    font-size: 14px;
    font-weight: 500;
    color: var(--primary);
    text-transform: uppercase;
    display: inline-block;
    border: 1px solid currentColor;
    padding: 6px 18px;
    border-radius: 20px
}

.tools-area .section-thumb {
    margin-top: -61px
}

@media only screen and (max-width: 1199px) {
    .tools-area .section-thumb {
        margin-top: 0
    }
}

.tools-area .shape-image {
    display: inline-block;
    height: 0;
    transform: translate(-100%, -40px)
}

.dir-rtl .tools-area .shape-image {
    transform: translate(100%, -40px)
}


/*features-area*/
.features-area-ecom .section-title {
    max-width: 750px;
    /*text-indent: 35px;*/
    margin-top: -10px
}

@media(min-width: 992px) {
    .features-area-ecom .section-title {
        font-size: 55px;
        /*text-transform: capitalize;*/
    }
}

@media only screen and (max-width: 767px) {
    .features-area-ecom .section-title {
        text-indent: 0
    }
}

.features-area-ecom .section-content {
    margin-top: 90px;
    display: grid;
    gap: 20px 60px;
    grid-template-columns: auto 960px;
    justify-content: space-between
}

@media only screen and (max-width: 1919px) {
    .features-area-ecom .section-content {
        margin-top: 60px
    }
}

@media only screen and (max-width: 1399px) {
    .features-area-ecom .section-content {
        grid-template-columns: auto 920px
    }
}

@media only screen and (max-width: 1199px) {
    .features-area-ecom .section-content {
        grid-template-columns: 1fr;
        margin-top: 30px
    }
}

@media only screen and (max-width: 1199px) {
    .features-area-ecom .section-content .shape {
        display: none
    }
}

.dir-rtl .features-area-ecom .section-content .shape img {
    transform: rotateY(180deg)
}

.features-area-ecom .section-content .thumb {
    position: relative
}

.features-area-ecom .section-content .thumb .main-image {
    border-radius: 0 0 300px 0
}

.dir-rtl .features-area-ecom .section-content .thumb .main-image {
    border-radius: 0 0 0 300px
}

@media only screen and (max-width: 991px) {
    .features-area-ecom .section-content .thumb .main-image {
        border-radius: 0
    }
}

.features-area-ecom .section-content .thumb .shape-1 {
    position: absolute;
    inset-inline-end: 17px;
    bottom: -20px
}

.dir-rtl .features-area-ecom .section-content .thumb .shape-1 img {
    transform: rotateY(180deg)
}

.features-area-ecom .section-content .text-wrapper {
    margin-top: 60px;
    display: grid;
    gap: 23px 80px;
    grid-template-columns: 1fr 1fr
}

@media only screen and (max-width: 1399px) {
    .features-area-ecom .section-content .text-wrapper {
        margin-top: 40px
    }
}

@media only screen and (max-width: 991px) {
    .features-area-ecom .section-content .text-wrapper {
        grid-template-columns: 1fr
    }
}

/*freature-area*/

 
.feature-area-ecom {
    background-color: var(--theme)
}

.feature-area-ecom .section-title {
    max-width: 730px;
    margin-inline: auto;
    color: #fff
}

@media only screen and (max-width: 1399px) {
    .feature-area-ecom .section-title {
        max-width: 610px
    }
}

@media only screen and (max-width: 1199px) {
    .feature-area-ecom .section-title {
        max-width: 460px
    }
}

@media only screen and (max-width: 991px) {
    .feature-area-ecom .section-title {
        max-width: 460px;
        margin: 0
    }
}

.feature-area-ecom .section-header .text {
    max-width: 734px;
    margin-inline-start: 284px;
    color: #fff;
}

@media only screen and (max-width: 1399px) {
    .feature-area-ecom .section-header .text {
        margin-inline-start: 520px
    }
}

@media only screen and (max-width: 1199px) {
    .feature-area-ecom .section-header .text {
        margin-inline-start: 430px
    }
}

@media only screen and (max-width: 991px) {
    .feature-area-ecom .section-header .text {
        max-width: 460px;
        margin: 0
    }
}

.feature-area-ecom .section-header .text-wrapper {
    margin-top: 22px
}

@media only screen and (max-width: 1199px) {
    .feature-area-ecom .section-header .text-wrapper {
        margin-top: 12px
    }
}

.feature-area-ecom .section-header .section-title-wrapper {
    position: relative
}

.feature-area-ecom .section-header .section-title-wrapper .shape-1 {
    position: absolute;
    width: 93px;
    top: -60px;
    inset-inline-start: 43%;
    z-index: 99
}

@media only screen and (max-width: 1199px) {
    .feature-area-ecom .section-header .section-title-wrapper .shape-1 {
        display: none
    }
}

.feature-area-ecom .features-wrapper-box {
    margin-top: 73px;
    overflow: hidden
}

@media only screen and (max-width: 1199px) {
    .feature-area-ecom .features-wrapper-box {
        margin-top: 53px
    }
}

.feature-area-ecom .features-wrapper {
    display: grid;
    gap: 0 0;
    grid-template-columns: repeat(3, 1fr);
    margin: 0 -100px
}

@media only screen and (max-width: 1399px) {
    .feature-area-ecom .features-wrapper {
        margin: 0 -80px
    }
}

@media only screen and (max-width: 1199px) {
    .feature-area-ecom .features-wrapper {
        margin: 0 -30px
    }
}

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

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

.feature-box-ecom {
    padding: 0 100px 132px;
    border-inline-end: 1px solid rgba(0, 0, 0, .12)
}

@media only screen and (max-width: 1399px) {
    .feature-box-ecom {
        padding: 0 80px 72px
    }
}

@media only screen and (max-width: 1199px) {
    .feature-box-ecom {
        padding: 0 30px 52px
    }
}

.feature-box-ecom .title {
    font-size: 26px;
    line-height: .88;
    font-weight: 500;
    /*text-transform: capitalize;*/
    color: #fff
}

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

.feature-box-ecom .content {
    margin-top: 48px
}

@media only screen and (max-width: 1199px) {
    .feature-box-ecom .content {
        margin-top: 38px
    }
}

.feature-box-ecom .text {
    margin-top: 19px;
    color: #fff
}

/*awardsarea*/
 .awards-area-ecom {
    position: relative;
    z-index: 1
}

 .awards-area-ecom .area-bg {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    inset-inline-start: 0;
    z-index: -1
}

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

 .awards-area-ecom .area-bg:before {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    background-color: rgba(18, 18, 18, .85);
    top: 0;
    inset-inline-start: 0
}

 .awards-area-ecom .section-title {
    color: var(--white)
}

 .awards-area-ecom .section-subtitle {
    color: var(--white)
}

 .awards-area-ecom .section-subtitle.has-right-line {
    padding-inline-end: 130px
}

 .awards-area-ecom .section-subtitle.has-right-line:after {
    width: 120px;
    background-color: var(--white)
}

 .awards-area-ecom .subtitle-wrapper {
    margin-bottom: -90px
}

@media only screen and (max-width: 1399px) {
     .awards-area-ecom .subtitle-wrapper {
        margin-bottom: -70px
    }
}

@media only screen and (max-width: 1199px) {
     .awards-area-ecom .subtitle-wrapper {
        margin-bottom: -40px
    }
}

@media only screen and (max-width: 991px) {
     .awards-area-ecom .subtitle-wrapper {
        margin-bottom: 10px
    }
}

 .awards-area-ecom .section-title-wrapper {
    display: flex;
    align-items: flex-end;
    gap: 50px
}

@media only screen and (max-width: 991px) {
     .awards-area-ecom .section-title-wrapper {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px
    }
}

 .awards-area-ecom  .awards-area-ecom-inner {
    position: relative;
    z-index: 1
}

 .awards-area-ecom .section-content {
    margin-top: 72px;
    margin-inline-start: 438px
}

@media only screen and (max-width: 1919px) {
     .awards-area-ecom .section-content {
        margin-top: 62px;
        margin-inline-start: 378px
    }
}

@media only screen and (max-width: 1399px) {
     .awards-area-ecom .section-content {
        margin-top: 52px;
        margin-inline-start: 308px
    }
}

@media only screen and (max-width: 1199px) {
     .awards-area-ecom .section-content {
        margin-top: 22px;
        margin-inline-start: 228px
    }
}

@media only screen and (max-width: 991px) {
     .awards-area-ecom .section-content {
        margin-inline-start: 0
    }
}

 .awards-area-ecom .section-content .text {
    max-width: 480px;
    color: #fff
}

 .awards-area-ecom .section-content .awards-list {
    margin-top: 63px
}

@media only screen and (max-width: 991px) {
     .awards-area-ecom .section-content .awards-list {
        margin-top: 33px
    }
}

 .awards-area-ecom .section-content .awards-list ul {
    display: flex;
    gap: 20px 50px;
    max-width: 480px
}

/*WEB HOSTING*/

.hero-area-whost-inner {
    padding-top: 180px;
    padding-bottom: 59px;
    position: relative;
    z-index: 1
}

@media only screen and (max-width: 1399px) {
    .hero-area-whost-inner {
        padding-top: 160px;
        padding-bottom: 39px
    }
}

@media only screen and (max-width: 991px) {
    .hero-area-whost-inner {
        padding-top: 140px
    }
}

.hero-area-whost-inner .shape-1 {
    position: absolute;
    top: 0;
    inset-inline-start: -24%;
    z-index: -1;
    width: 62%
}

@media only screen and (max-width: 991px) {
    .hero-area-whost-inner .shape-1 {
        display: none
    }
}

.hero-area-whost-inner .shape-1 img {
    opacity: .12
}

.dir-rtl .hero-area-whost-inner .shape-1 img {
    transform: rotateY(180deg)
}

@media only screen and (max-width: 767px) {
    .hero-area-whost-inner {
        padding-top: 60px
    }
}

.hero-area-whost .section-title {
    max-width: 910px;
    font-size: 55px;
    line-height: .95;
    margin-top: -10px
}

@media only screen and (max-width: 1399px) {
    .hero-area-whost .section-title {
        max-width: 730px;
        font-size: 80px
    }
}

@media only screen and (max-width: 1199px) {
    .hero-area-whost .section-title {
        max-width: 550px;
        font-size: 60px
    }
}

@media only screen and (max-width: 991px) {
    .hero-area-whost .section-title {
        font-size: 46px
    }
}

@media only screen and (max-width: 767px) {
    .hero-area-whost .section-title {
        font-size: 38px
    }
}

.hero-area-whost .section-header {
    display: grid;
    gap: 40px 60px;
    grid-template-columns: auto auto;
    justify-content: space-between
}

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

.hero-area-whost .customer-wrapper .text {
    font-size: 18px;
    line-height: 1.22;
    margin-top: 15px
}

.hero-area-whost .customer-wrapper .text span {
    color: var(--primary)
}

.hero-area-whost .section-content {
    display: grid;
    gap: 20px;
    grid-template-columns: 400px 1fr
}

@media only screen and (max-width: 1399px) {
    .hero-area-whost .section-content {
        grid-template-columns: 310px 1fr
    }
}

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

.hero-area-whost .info-box {
    padding: 60px 55px;
    background-color: #f0f2f4;
    border-radius: 20px
}

.dark .hero-area-whost .info-box {
    background-color: #252525
}

@media only screen and (max-width: 1399px) {
    .hero-area-whost .info-box {
        padding: 40px 35px
    }
}

.hero-area-whost .info-box .thumb img {
    width: 150px
}

@media only screen and (max-width: 1399px) {
    .hero-area-whost .info-box .thumb img {
        width: 100px
    }
}

@media only screen and (max-width: 991px) {
    .hero-area-whost .info-box .thumb img {
        width: 70px
    }
}

.hero-area-whost .info-box .text {
    font-size: 18px;
    line-height: 1.36;
    color: var(--primary);
    font-family: var(--font_instrumentsans)
}

@media only screen and (max-width: 1399px) {
    .hero-area-whost .info-box .text {
        font-size: 18px
    }
}

.hero-area-whost .info-box .text-wrapper {
    margin-top: 24px
}

.hero-area-whost .info-box .btn-wrapper {
    margin-top: 66px
}

@media only screen and (max-width: 1399px) {
    .hero-area-whost .info-box .btn-wrapper {
        margin-top: 36px
    }
}

.hero-area-whost .feature-content {
    background-color: var(--black);
    border-radius: 20px;
    overflow: hidden;
    position: relative;
    z-index: 1;
    padding: 30px 30px 150px
}

.hero-area-whost .feature-content .bg {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    inset-inline-start: 0;
    z-index: -1
}

.hero-area-whost .feature-content .bg img {
    width: 100%;
    height: 106%;
    -o-object-fit: cover;
    object-fit: cover
}

.hero-area-whost .feature-content .feature-list {
    max-width: 300px
}

.hero-area-whost .feature-content .feature-list-item {
    display: flex;
    align-items: center;
    gap: 14px;
    background-color: rgba(255, 255, 255, .15);
    padding: 20px;
    border-radius: 20px;
    -webkit-backdrop-filter: blur(7.5px);
    backdrop-filter: blur(7.5px)
}

.hero-area-whost .feature-content .feature-list-item .icon {
    width: 50px;
    height: 50px;
    background-color: rgba(255, 255, 255, .8);
    display: inline-flex;
    border-radius: 12px;
    justify-content: center;
    align-items: center;
    min-width: 50px
}

.hero-area-whost .feature-content .feature-list-item .text {
    font-size: 18px;
    line-height: 1.11;
    font-family: var(--font_instrumentsans);
    color: var(--white)
}

/*about-area*/
.about-area-whost-inner {
    position: relative;
    z-index: 2
}

.about-area-whost .section-content {
    display: grid;
    gap: 20px 60px;
    grid-template-columns: 1fr 575px
}

@media only screen and (max-width: 1199px) {
    .about-area-whost .section-content {
        grid-template-columns: 1fr 435px
    }
}

@media only screen and (max-width: 991px) {
    .about-area-whost .section-content {
        grid-template-columns: 1fr
    }
}

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

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

.about-area-whost .section-content .text:not(:first-child) {
    margin-top: 25px
}

.about-area-whost .section-title {
    max-width: 545px
}

/*service area*/
.service-area-whost {
    background-color: #f0f2f47d;
}

.dark .service-area-whost {
    background-color: #171717
}

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

.service-area-whost .service-top-wrapper {
    display: grid;
    grid-template-columns: 1fr 520px
}

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

.service-area-whost .service-top-wrapper .text {
    padding-bottom: 31px
}

@media only screen and (max-width: 991px) {
    .service-area-whost .service-top-wrapper .text {
        padding-bottom: 10px
    }
}

.service-area-whost .wc-btn-underline {
    color: var(--primary);
    text-transform: capitalize;
    text-decoration-thickness: 2px;
    text-underline-offset: 2px
}

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

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

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

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

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

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

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

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

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

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

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

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

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

.service-area-whost .service-item .service-features li {
    font-size: 18px;
    color: var(--secondary);
    font-weight: 300;
    padding-bottom: 15px;
    list-style: disc;
    list-style-position: inside
}

/*DIGITAL-MARKETING*/
.awards-area-digital {
    position: relative;
    z-index: 1
}

.awards-area-digital .section-subtitle {
    font-size: 16px;
    line-height: 1;
    display: inline-block;
    text-transform: uppercase;
    color: var(--primary)
}

.awards-area-digital .section-subtitle.has-left-line {
    padding-inline-start: 140px
}

.awards-area-digital .section-subtitle.has-left-line:before {
    width: 80px
}

.awards-area-digital .section-subtitle.has-left-line:after {
    position: absolute;
    content: "";
    width: 1px;
    height: 75px;
    background-color: currentColor;
    inset-inline-start: 57px;
    bottom: -15px
}

@media only screen and (max-width: 991px) {
    .awards-area-digital .section-subtitle.has-left-line:after {
        display: none
    }
}

.awards-area-digital .subtitle-wrapper {
    margin-bottom: -50px
}

@media only screen and (max-width: 1399px) {
    .awards-area-digital .subtitle-wrapper {
        margin-bottom: -70px
    }
}

@media only screen and (max-width: 1199px) {
    .awards-area-digital .subtitle-wrapper {
        margin-bottom: -40px
    }
}

@media only screen and (max-width: 991px) {
    .awards-area-digital .subtitle-wrapper {
        margin-bottom: 10px
    }
}

.awards-area-digital .section-title-wrapper {
    display: grid;
    align-items: flex-end;
    gap: 50px;
    grid-template-columns: 390px 1fr
}

@media only screen and (max-width: 1919px) {
    .awards-area-digital .section-title-wrapper {
        grid-template-columns: 330px 1fr
    }
}

@media only screen and (max-width: 991px) {
    .awards-area-digital .section-title-wrapper {
        grid-template-columns: 1fr;
        align-items: flex-start;
        gap: 20px
    }
}

.awards-area-digital .awards-area-digital-inner {
    position: relative;
    z-index: 1
}

.awards-area-digital .section-content {
    margin-top: 27px;
    margin-inline-start: 438px
}

@media only screen and (max-width: 1919px) {
    .awards-area-digital .section-content {
        margin-top: 27px;
        margin-inline-start: 378px
    }
}

@media only screen and (max-width: 1399px) {
    .awards-area-digital .section-content {
        margin-top: 52px;
        margin-inline-start: 378px
    }
}

@media only screen and (max-width: 1199px) {
    .awards-area-digital .section-content {
        margin-top: 22px;
        margin-inline-start: 378px
    }
}

@media only screen and (max-width: 991px) {
    .awards-area-digital .section-content {
        margin-inline-start: 0
    }
}

.awards-area-digital .section-content .text {
    max-width: 831px
}

.awards-area-digital .section-content .awards-list {
    margin-top: 43px
}

@media only screen and (max-width: 991px) {
    .awards-area-digital .section-content .awards-list {
        margin-top: 33px
    }
}

.awards-area-digital .section-content .awards-list ul {
    display: flex;
    gap: 20px 40px;
    max-width: 460px;
    justify-content: space-between
}

.awards-area-digital .section-content .awards-list ul li:not(:first-child) {
    padding-inline-start: 40px;
    border-inline-start: 1px solid var(--border)
}

.awards-area-digital .about-thumbs {
    display: flex;
    gap: 20px 50px;
    justify-content: flex-end;
    margin-top: 63px
}

@media only screen and (max-width: 1399px) {
    .awards-area-digital .about-thumbs {
        margin-top: 43px
    }
}

@media only screen and (max-width: 767px) {
    .awards-area-digital .about-thumbs {
        gap: 20px 20px
    }
}

.awards-area-digital .about-thumbs .thumb-second {
    max-width: 670px;
    flex: 1 1 854px;
}

@media only screen and (max-width: 1399px) {
    .awards-area-digital .about-thumbs .thumb-second {
        max-width: 570px
    }
}

.awards-area-digital .meta {
    display: grid;
    gap: 18px;
    grid-template-columns: 30px auto
}

.awards-area-digital .meta .number {
    font-size: 36px;
    line-height: .85
}

.awards-area-digital .meta .text {
    margin-top: 11px
}

/*TEAMS AREA*/
.team-area-digital {
    background-color: #f7f7f7d4
}

.dark .team-area-digital {
    background-color: #252525
}

.team-area-digital .section-title {
    max-width: 640px
}

.team-area-digital .section-header {
    display: grid;
    gap: 30px 40px;
    grid-template-columns: 1fr 379px;
    align-items: center
}

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

.team-area-digital .section-header .text {
    max-width: 380px
}

.team-area-digital .team-wrapper-box {
    margin-top: 90px
}

@media only screen and (max-width: 1399px) {
    .team-area-digital .team-wrapper-box {
        margin-top: 70px
    }
}

@media only screen and (max-width: 1199px) {
    .team-area-digital .team-wrapper-box {
        margin-top: 50px
    }
}

.team-area-digital .team-wrapper {
    display: grid;
    gap: 0 80px;
    grid-template-columns: repeat(3, 1fr)
}

@media only screen and (max-width: 1399px) {
    .team-area-digital .team-wrapper {
        gap: 0 60px
    }
}

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

@media only screen and (max-width: 991px) {
    .team-area-digital .team-wrapper {
        gap: 0 40px
    }
}

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

.team-area-digital .team-wrapper>* {
    border-bottom: 1px solid #1c1c1c;
    padding-top: 35px;
    padding-bottom: 35px
}

.dark .team-area-digital .team-wrapper>* {
    border-color: var(--white)
}

@media only screen and (max-width: 1399px) {
    .team-area-digital .team-wrapper>* {
        padding-top: 25px;
        padding-bottom: 25px
    }
}

.team-area-digital .team-wrapper>*:nth-child(1) {
    border-top: 1px solid #1c1c1c
}

.dark .team-area-digital .team-wrapper>*:nth-child(1) {
    border-color: var(--white)
}

.team-area-digital .team-wrapper>*:nth-child(2) {
    border-top: 1px solid #1c1c1c
}

.dark .team-area-digital .team-wrapper>*:nth-child(2) {
    border-color: var(--white)
}

@media only screen and (max-width: 767px) {
    .team-area-digital .team-wrapper>*:nth-child(2) {
        border-top: 0
    }
}

.team-area-digital .team-wrapper>*:nth-child(3) {
    border-top: 1px solid #1c1c1c
}

.dark .team-area-digital .team-wrapper>*:nth-child(3) {
    border-color: var(--white)
}

@media only screen and (max-width: 1199px) {
    .team-area-digital .team-wrapper>*:nth-child(3) {
        border-top: 0
    }
}

.team-box-digital {
    display: grid;
    gap: 20px 35px;
    grid-template-columns: 36% 1fr
}

@media only screen and (max-width: 1399px) {
    .team-box-digital {
        gap: 20px 25px;
        grid-template-columns: 40% 1fr
    }
}

.team-box-digital:hover .thumb img {
    transform: scale(1.1)
}

.team-box-digital .thumb {
    overflow: hidden
}

.team-box-digital .thumb img {
    width: 100%;
    transition: all .5s
}

.team-box-digital .content {
    display: flex;
    gap: 30px;
    flex-direction: column;
    justify-content: space-between
}

.team-box-digital .name {
    font-size: 24px
}

@media only screen and (max-width: 1399px) {
    .team-box-digital .name {
        font-size: 22px
    }
}

.team-box-digital .post {
    font-size: 16px;
    line-height: 1;
    margin-top: 12px
}

.team-box-digital .wc-btn-circle {
    width: 30px;
    height: 30px;
    background-color: #f4e0e0;
    color: var(--black);
    border: 1px solid #c3b4b4;
    font-size: 14px
}

.dark .team-box-digital .wc-btn-circle {
    background-color: #252525;
    color: var(--white);
    border-color: #434343
}

.team-box-digital .wc-btn-circle i {
    transform: none
}

.team-box-digital .wc-btn-primary {
    font-size: 12px;
    font-weight: 400;
    padding: 0 11px;
    background-color: #f4e0e0;
    color: var(--black);
    border: 1px solid #c3b4b4
}

.dark .team-box-digital .wc-btn-primary {
    background-color: #252525;
    color: var(--white);
    border-color: #434343
}

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

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

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

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

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

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

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

 /*BRANDING*/
 .process-area-branding {
    background-color: #f3f3f380
}

.dark .process-area-branding {
    background-color: #252525
}

.process-area-branding-inner {
    position: relative
}

.process-area-branding-inner .shape-1 {
    position: absolute;
    inset-inline-start: 59%;
    top: 10%
}

@media only screen and (max-width: 1399px) {
    .process-area-branding-inner .shape-1 {
        top: 6%
    }
}

@media only screen and (max-width: 1199px) {
    .process-area-branding-inner .shape-1 {
        top: 4%
    }
}

@media only screen and (max-width: 991px) {
    .process-area-branding-inner .shape-1 {
        display: none
    }
}

.process-area-branding-inner .shape-1 img {
    height: 319px
}

.dir-rtl .process-area-branding-inner .shape-1 img {
    transform: rotateY(180deg)
}

@media only screen and (max-width: 1919px) {
    .process-area-branding-inner .shape-1 img {
        height: 269px
    }
}

@media only screen and (max-width: 1399px) {
    .process-area-branding-inner .shape-1 img {
        height: 219px
    }
}

@media only screen and (max-width: 1199px) {
    .process-area-branding-inner .shape-1 img {
        height: 169px
    }
}

.process-area-branding .section-title {
    max-width: 520px
}

.process-area-branding .process-wrapper-box {
    margin-top: 90px
}

@media only screen and (max-width: 1399px) {
    .process-area-branding .process-wrapper-box {
        margin-top: 70px
    }
}

@media only screen and (max-width: 1199px) {
    .process-area-branding .process-wrapper-box {
        margin-top: 50px
    }
}

.process-area-branding .process-wrapper {
    overflow: hidden
}

.process-area-branding .process-wrapper .process-slider {
    margin: 0 30px;
    overflow: visible
}

.process-box-branding {
    border-inline-start: 1px solid #b7c5c1
}

.dark .process-box-branding {
    border-color: #404040
}

.process-box-branding .number {
    font-size: 16px;
    color: #7d8683;
    display: inline-block;
    margin-inline-start: 30px
}

.dark .process-box-branding .number {
    color: #999
}

.process-box-branding .icon {
    width: 90px;
    height: 90px;
    background-color: #102eb1;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    margin-top: 244px;
    transform: translateY(50%);
    outline: 15px solid #ffffff00
}

.dark .process-box-branding .icon {
    outline-color: #252525
}

@media only screen and (max-width: 1919px) {
    .process-box-branding .icon {
        margin-top: 144px
    }
}

@media only screen and (max-width: 1199px) {
    .process-box-branding .icon {
        margin-top: 44px
    }
}

.process-box-branding .title {
    background: #f1f1f1;
    font-size: 24px;
    line-height: 1.33;
    padding: 75px 30px 61px;
    border: 1px solid #b7c5c1;
    border-radius: 200px;
    text-align: center
}

.dark .process-box-branding .title {
    border-color: #404040
}

@media only screen and (max-width: 1199px) {
    .process-box-branding .title {
        font-size: 20px
    }
}
.process-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 991px) {
  .process-grid {
    grid-template-columns: repeat(2, 1fr);
    row-gap: 80px;
  }
}

@media (max-width: 575px) {
  .process-grid {
    grid-template-columns: 1fr;
    row-gap: 60px;
  }
}

/*fun-fact-area*/
.fun-fact-area {
    background-color: #ffffff00
}

.dark .fun-fact-area {
    background-color: #252525
}

.fun-fact-area .section-title {
    max-width: 840px
}

.fun-fact-area .counter-wrapper-box {
    margin-top: 90px
}

@media only screen and (max-width: 1399px) {
    .fun-fact-area .counter-wrapper-box {
        margin-top: 70px
    }
}

@media only screen and (max-width: 1199px) {
    .fun-fact-area .counter-wrapper-box {
        margin-top: 50px
    }
}

.fun-fact-area .counter-box {
    max-width: 1310px;
    margin-inline-start: auto;
    display: flex;
    align-items: center;
    gap: 220px
}

@media only screen and (max-width: 1199px) {
    .fun-fact-area .counter-box {
        gap: 120px
    }
}

@media only screen and (max-width: 767px) {
    .fun-fact-area .counter-box {
        gap: 80px
    }
}

@media(max-width: 575px) {
    .fun-fact-area .counter-box {
        gap: 50px
    }
}

.fun-fact-area .counter-box .shape-1 {
    height: 515px
}

.dir-rtl .fun-fact-area .counter-box .shape-1 {
    transform: rotateY(180deg)
}

@media only screen and (max-width: 1919px) {
    .fun-fact-area .counter-box .shape-1 {
        height: 415px
    }
}

@media only screen and (max-width: 1199px) {
    .fun-fact-area .counter-box .shape-1 {
        height: 315px
    }
}

@media only screen and (max-width: 991px) {
    .fun-fact-area .counter-box .shape-1 {
        height: 265px
    }
}

@media only screen and (max-width: 767px) {
    .fun-fact-area .counter-box .shape-1 {
        height: 215px
    }
}

@media(max-width: 575px) {
    .fun-fact-area .counter-box .shape-1 {
        height: 135px
    }
}

.fun-fact-area .counter-box .number {
    font-size: 450px
}

@media only screen and (max-width: 1919px) {
    .fun-fact-area .counter-box .number {
        font-size: 350px
    }
}

@media only screen and (max-width: 1199px) {
    .fun-fact-area .counter-box .number {
        font-size: 250px
    }
}

@media only screen and (max-width: 991px) {
    .fun-fact-area .counter-box .number {
        font-size: 200px
    }
}

@media only screen and (max-width: 767px) {
    .fun-fact-area .counter-box .number {
        font-size: 170px
    }
}

@media(max-width: 575px) {
    .fun-fact-area .counter-box .number {
        font-size: 120px
    }
}

/*service area*/

.service-area-branding {
    background-color: var(--black)
}

.service-area-branding .section-title {
    max-width: 845px;
    color: var(--white)
}

.service-area-branding .services-wrapper-box {
    margin-top: 90px
}

@media only screen and (max-width: 1399px) {
    .service-area-branding .services-wrapper-box {
        margin-top: 70px
    }
}

@media only screen and (max-width: 1199px) {
    .service-area-branding .services-wrapper-box {
        margin-top: 50px
    }
}

.service-area-branding .services-wrapper {
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(4, 1fr)
}

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

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

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

.service-area-branding .info-text {
    margin-top: 70px;
    text-align: center
}

@media only screen and (max-width: 1399px) {
    .service-area-branding .info-text {
        margin-top: 60px
    }
}

@media only screen and (max-width: 1199px) {
    .service-area-branding .info-text {
        margin-top: 50px
    }
}

.service-area-branding .info-text .text {
    background-color: #1c1c1c;
    padding: 19px 41px;
    border-radius: 100px;
    display: inline-block;
    text-align: center;
    color: var(--white);
    max-width: 500px
}

.service-area-branding .info-text .text .wc-btn-underline {
    color: var(--white);
    font-size: inherit;
    font-weight: inherit;
    padding-bottom: 0
}

.service-area-branding .info-text .text .wc-btn-underline:before {
    height: 1px
}

.service-box-branding {
    background-color: #1c1c1c;
    padding: 47px 50px 46px;
    border-radius: 20px;
    transition: all .5s
}

@media only screen and (max-width: 1919px) {
    .service-box-branding {
        padding: 37px 30px 36px
    }
}

.service-box-branding:hover {
    transform: scale(1.03)
}

.service-box-branding .number {
    font-size: 18px;
    color: var(--white)
}

.service-box-branding .icon {
    margin-top: 136px
}

@media only screen and (max-width: 1919px) {
    .service-box-branding .icon {
        margin-top: 86px
    }
}

@media only screen and (max-width: 1199px) {
    .service-box-branding .icon {
        margin-top: 36px
    }
}

.service-box-branding .title {
    font-size: 26px;
    line-height: 1.2;
    color: var(--white);
    margin-top: 56px
}

@media only screen and (max-width: 1919px) {
    .service-box-branding .title {
        margin-top: 46px;
        font-size: 26px
    }
}

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

@media only screen and (max-width: 1199px) {
    .service-box-branding .title {
        margin-top: 26px
    }
}

.service-box-branding .text {
    color: var(--white-2);
    margin-top: 23px
}

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

.team-area {
    background-color: #fbfcf6
}

/*blog-area*/
.blog-area-branding {
    padding-top: 145px;
    padding-bottom: 0px
}

@media only screen and (max-width: 1399px) {
    .blog-area-branding {
        padding-top: 94px;
        padding-bottom: 97px
    }
}

@media only screen and (max-width: 1199px) {
    .blog-area-branding {
        padding-top: 54px;
        padding-bottom: 0px
    }
}

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

.blog-area-branding .section-header {
    display: flex;
    gap: 20px 60px;
    justify-content: space-between;
    align-items: center
}

@media only screen and (max-width: 767px) {
    .blog-area-branding .section-header {
        flex-direction: column;
        align-items: flex-start
    }
}

.blog-area-branding .section-header .title-wrapper {
    margin-top: 17px
}

.blog-area-branding .section-header .text {
    max-width: 350px
}

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

@media only screen and (max-width: 1919px) {
    .blog-area-branding .blog-wrapper-box {
        margin-top: 46px
    }
}

@media only screen and (max-width: 1199px) {
    .blog-area-branding .blog-wrapper-box {
        margin-top: 36px
    }
}

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

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

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

.blog1:hover .thumb img {
    transform: scale(1.1)
}

.blog1 .thumb {
    border-radius: 25px;
    overflow: hidden
}

.blog1 .thumb img {
    width: 100%;
    transition: all .5s
}

.blog1 .content-wrapper {
    margin-top: 28px
}

.blog1 .title {
    font-size: 26px;
    line-height: 1.15
}

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

.blog1 .tag {
    font-size: 19px
}

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

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

.blog1 .date {
    font-size: 14px;
    color: #c2c2c2
}

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

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

/*achievements*/
.achievement-area-branding {
    background-color: #f9fafd;
    padding-top: 145px
}

.dark .achievement-area-branding {
    background-color: #222
}

@media only screen and (max-width: 1399px) {
    .achievement-area-branding {
        padding-top: 94px
    }
}

@media only screen and (max-width: 1199px) {
    .achievement-area-branding {
        padding-top: 54px
    }
}

.achievement-area-branding-inner {
    position: relative
}

.achievement-area-branding-inner .shape-1 {
    position: absolute;
    inset-inline-start: 129px;
    top: 250px
}

@media only screen and (max-width: 1399px) {
    .achievement-area-branding-inner .shape-1 {
        max-width: 150px
    }
}

@media only screen and (max-width: 991px) {
    .achievement-area-branding-inner .shape-1 {
        display: none
    }
}

.dir-rtl .achievement-area-branding-inner .shape-1 img {
    transform: rotateY(180deg)
}

.achievement-area-branding-inner .shape-2 {
    position: absolute;
    inset-inline-start: calc(100% - 257px);
    top: 460px;
    width: -moz-max-content;
    width: max-content;
    width: 459px
}

@media only screen and (max-width: 1399px) {
    .achievement-area-branding-inner .shape-2 {
        width: 359px;
        inset-inline-start: calc(100% - 157px)
    }
}

@media only screen and (max-width: 767px) {
    .achievement-area-branding-inner .shape-2 {
        display: none
    }
}

.dir-rtl .achievement-area-branding-inner .shape-2 img {
    transform: rotateY(180deg)
}

.achievement-area-branding-inner .shape-3 {
    position: absolute;
    inset-inline-end: calc(100% + 12px);
    bottom: 170px;
    width: 142px
}

.dir-rtl .achievement-area-branding-inner .shape-3 img {
    transform: rotateY(180deg)
}

.achievement-area-branding .section-title {
    max-width: 1294px;
    margin: 0 auto
}

@media only screen and (max-width: 1919px) {
    .achievement-area-branding .section-title {
        max-width: 1194px
    }
}

@media only screen and (max-width: 1199px) {
    .achievement-area-branding .section-title {
        max-width: 694px
    }
}

.achievement-area-branding .section-title img {
    max-height: 68px
}

@media only screen and (max-width: 1399px) {
    .achievement-area-branding .section-title img {
        max-height: 58px
    }
}

@media only screen and (max-width: 1199px) {
    .achievement-area-branding .section-title img {
        max-height: 48px
    }
}

@media only screen and (max-width: 767px) {
    .achievement-area-branding .section-title img {
        display: none
    }
}

.achievement-area-branding .section-header {
    text-align: center
}

.dir-rtl .achievement-area-branding .section-header .section-title img {
    transform: rotateY(180deg)
}

.achievement-area-branding .section-header .title-wrapper {
    margin-top: 17px
}

.achievement-area-branding .section-header .text-wrapper {
    margin-top: 26px
}

.achievement-area-branding .section-header .btn-wrapper {
    margin-top: 43px
}

.achievement-area-branding .section-header .text {
    max-width: 407px;
    margin: 0 auto
}

.achievement-area-branding .achievement-thumb {
    max-width: 1130px;
    margin: 0 auto;
    margin-top: 80px;
    position: relative
}

@media only screen and (max-width: 1199px) {
    .achievement-area-branding .achievement-thumb {
        max-width: 630px
    }
}

@media only screen and (max-width: 991px) {
    .achievement-area-branding .achievement-thumb {
        max-width: 430px
    }
}

.dir-rtl .achievement-area-branding .achievement-thumb .main-image {
    transform: rotateY(180deg)
}

.achievement-area-branding .achievement-thumb .position-text {
    position: absolute;
    top: 145px;
    inset-inline-end: 0
}

@media only screen and (max-width: 1199px) {
    .achievement-area-branding .achievement-thumb .position-text {
        top: 45px;
        inset-inline-end: -142px
    }
}

@media only screen and (max-width: 991px) {
    .achievement-area-branding .achievement-thumb .position-text {
        top: -15px
    }
}

@media only screen and (max-width: 767px) {
    .achievement-area-branding .achievement-thumb .position-text {
        position: static;
        display: block;
        margin: 0 auto;
        margin-bottom: 20px
    }
}

/*SEO*/
.pricing-area-seo .section-title {
    max-width: 610px
}

.pricing-area-seo .section-header {
    display: grid;
    gap: 30px 60px;
    grid-template-columns: 1fr 480px
}

@media only screen and (max-width: 1199px) {
    .pricing-area-seo .section-header {
        grid-template-columns: 1fr 400px
    }
}

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

.pricing-area-seo .accordion .accordion-button {
    font-size: 18px;
    line-height: 1;
    color: var(--primary);
    padding-top: 18px;
    padding-bottom: 18px;
    padding-inline-start: 0;
    padding-inline-end: 0;
    background-color: rgba(0, 0, 0, 0);
    box-shadow: none;
    text-align: start;
    font-weight: 500
}

.pricing-area-seo .accordion .accordion-button .section-subtitle {
    font-size: 12px;
    font-weight: 700;
    color: var(--primary);
    text-transform: uppercase;
    padding: 8px 16px;
    display: inline-block;
    border-radius: 10px;
    background-color: var(--white)
}

@media only screen and (max-width: 1399px) {
    .pricing-area-seo .accordion .accordion-button {
        font-size: 20px
    }
}

@media only screen and (max-width: 1199px) {
    .pricing-area-seo .accordion .accordion-button br {
        display: none
    }
}

.pricing-area-seo .accordion .accordion-button::after {
    content: "+";
    color: var(--primary);
    background-image: none;
    line-height: 1;
    width: auto;
    height: auto;
    font-size: 25px;
    margin-inline-start: 50px;
    margin-inline-start: auto;
    margin-inline-end: 0
}

.pricing-area-seo .accordion .accordion-button:not(.collapsed) {
    pointer-events: none
}

.pricing-area-seo .accordion .accordion-button:not(.collapsed)::after {
    content: "-"
}

.pricing-area-seo .accordion .accordion-item {
    border-bottom: 1px solid #b8b8b8;
    background-color: rgba(0, 0, 0, 0);
    border-radius: 0px
}

.dark .pricing-area-seo .accordion .accordion-item {
    border-color: #464646
}

.pricing-area-seo .accordion .accordion-item:not(:first-child) {
    margin-top: 0px
}

.pricing-area-seo .accordion .accordion-item:first-child {
    border-top: 1px solid #b8b8b8
}

.dark .pricing-area-seo .accordion .accordion-item:first-child {
    border-color: #464646
}

.pricing-area-seo .accordion .accordion-body {
    font-size: 18px;
    line-height: 1.44;
    padding-inline-start: 0px;
    padding-inline-end: 0px;
    padding-bottom: 24px;
    padding-top: 0;
    color: var(--secondary)
}

@media only screen and (max-width: 991px) {
    .pricing-area-seo .accordion .accordion-body {
        padding-bottom: 23px
    }
}

.pricing-area-seo .pricing-wrapper-box {
    margin-top: 100px
}

@media only screen and (max-width: 1919px) {
    .pricing-area-seo .pricing-wrapper-box {
        margin-top: 80px
    }
}

@media only screen and (max-width: 1399px) {
    .pricing-area-seo .pricing-wrapper-box {
        margin-top: 60px
    }
}

.pricing-area-seo .pricing-wrapper {
    display: grid;
    gap: 30px;
    grid-template-columns: repeat(3, 1fr)
}

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

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

.pricing-box-seo {
    background-color: var(--white);
    padding: 47px 50px 50px;
    box-shadow: 0px 30px 200px rgba(16, 25, 56, .08);
    border-radius: 5px
}

.dark .pricing-box-seo {
    background-color: #1c1c1c
}

@media only screen and (max-width: 1199px) {
    .pricing-box-seo {
        padding: 27px 30px 30px
    }
}

.pricing-box-seo .tag {
    font-size: 18px;
    color: var(--primary);
    display: inline-block;
    line-height: 1
}

.pricing-box-seo .feature-list {
    margin-top: 39px;
    min-height: 171px
}

@media only screen and (max-width: 767px) {
    .pricing-box-seo .feature-list {
        min-height: auto
    }
}

.pricing-box-seo .feature-list li {
    display: flex;
    align-items: center
}

.pricing-box-seo .feature-list li:not(:first-child) {
    margin-top: 15px
}

.pricing-box-seo .feature-list li img {
    margin-inline-end: 10px
}

.dir-rtl .pricing-box-seo .feature-list li img {
    transform: rotateY(180deg)
}

.pricing-box-seo .price {
    font-size: 60px;
    line-height: 1;
    margin-top: 17px
}

@media only screen and (max-width: 1399px) {
    .pricing-box-seo .price {
        font-size: 50px
    }
}

@media only screen and (max-width: 991px) {
    .pricing-box-seo .price {
        font-size: 40px
    }
}

.pricing-box-seo .wc-btn-primary {
    margin-top: 50px
}

@media only screen and (max-width: 1199px) {
    .pricing-box-seo .wc-btn-primary {
        margin-top: 40px
    }
}

.dark .pricing-box-seo .wc-btn-primary:hover {
    color: var(--black)
}

/*video*/
.video-area {
    position: relative;
    z-index: 1;
    padding-top: 230px
}

@media only screen and (max-width: 1919px) {
    .video-area {
        padding-top: 170px
    }
}

@media only screen and (max-width: 1399px) {
    .video-area {
        padding-top: 150px
    }
}

@media only screen and (max-width: 1199px) {
    .video-area {
        padding-top: 110px
    }
}

.video-area .area-bg {
    position: absolute;
    top: 0;
    inset-inline-start: 0;
    width: 100%;
    height: calc(100% - 130px);
    border-radius: 20px;
    overflow: hidden;
    z-index: -1
}

@media only screen and (max-width: 1919px) {
    .video-area .area-bg {
        height: calc(100% - 65px)
    }
}

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

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

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

.video-area .info-box {
    background-color: #f0f2f4;
    padding: 46px 39px 54px;
    border-radius: 20px;
    max-width: 580px;
    margin-inline-start: auto;
    position: relative;
    z-index: 1
}

.dark .video-area .info-box {
    background-color: #252525
}

@media only screen and (max-width: 1399px) {
    .video-area .info-box {
        padding: 50px 50px 44px;
        max-width: 560px
    }
}

@media only screen and (max-width: 1199px) {
    .video-area .info-box {
        padding: 30px 30px 24px;
        max-width: 500px
    }
}

@media only screen and (max-width: 991px) {
    .video-area .info-box {
        margin-inline-start: 0
    }
}

.video-area .info-box .section-title-wrapper {
    margin-top: 160px
}

@media only screen and (max-width: 1919px) {
    .video-area .info-box .section-title-wrapper {
        margin-top: 100px
    }
}

@media only screen and (max-width: 1399px) {
    .video-area .info-box .section-title-wrapper {
        margin-top: 60px
    }
}

@media only screen and (max-width: 1199px) {
    .video-area .info-box .section-title-wrapper {
        margin-top: 40px
    }
}

.video-area .info-box .wc-btn-circle {
    width: 85px;
    height: 85px;
    background-color: var(--theme);
    color: var(--white);
    font-size: 18px
}

@media only screen and (max-width: 1199px) {
    .video-area .info-box .wc-btn-circle {
        width: 60px;
        height: 60px;
        font-size: 14px
    }
}

.video-area .info-box .info-list {
    margin-top: 31px
}

.video-area .info-box .info-list li {
    font-size: 20px;
    line-height: 1.3
}


/*slider+cta*/
.text-slider1-active .swiper-slide {
    width: auto
}

.text-slider1 {
    padding-top: 110px
}

@media only screen and (max-width: 1919px) {
    .text-slider1 {
        padding-top: 90px
    }
}

@media only screen and (max-width: 1399px) {
    .text-slider1 {
        padding-top: 70px
    }
}

@media only screen and (max-width: 1199px) {
    .text-slider1 {
        padding-top: 30px
    }
}

.text-slider1 .swiper-wrapper {
    transition-timing-function: linear
}

.text-slider1-item .title {
    font-size: 190px;
    font-weight: 500;
    line-height: 1.1
}

@media only screen and (max-width: 1919px) {
    .text-slider1-item .title {
        font-size: 140px
    }
}

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

@media only screen and (max-width: 1199px) {
    .text-slider1-item .title {
        font-size: 90px
    }
}

@media only screen and (max-width: 991px) {
    .text-slider1-item .title {
        font-size: 75px
    }
}

@media only screen and (max-width: 767px) {
    .text-slider1-item .title {
        font-size: 45px
    }
}

@media(max-width: 575px) {
    .text-slider1-item .title {
        font-size: 35px
    }
}

.text-slider1-item .title span {
    -webkit-background-clip: text;
    -webkit-text-fill-color: #102eb1;
    -webkit-text-stroke: 1px
}

.cta-area-seo .section-title {
    max-width: 680px;
    margin-inline: auto
}

.cta-area-seo .section-header {
    text-align: center
}

.cta-area-seo .btn-wrapper {
    margin-top: 42px
}
 
 
 /*slider*/
 

.text-slider2-active .swiper-slide {
    width: auto
}

.text-slider2 .swiper-wrapper {
    transition-timing-function: linear
}

.text-slider2-item .title {
    font-size: 180px;
    line-height: 1;
    text-transform: uppercase
}

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

@media only screen and (max-width: 1199px) {
    .text-slider2-item .title {
        font-size: 80px
    }
}

@media only screen and (max-width: 991px) {
    .text-slider2-item .title {
        font-size: 60px
    }
}

@media only screen and (max-width: 767px) {
    .text-slider2-item .title {
        font-size: 50px
    }
}

@media(max-width: 575px) {
    .text-slider2-item .title {
        font-size: 40px
    }
}

.team-area-2 {
    padding-top: 0px;
}

.team-area-2 .section-header {
    margin-top: 100px
}

@media only screen and (max-width: 1399px) {
    .team-area-2 .section-header {
        margin-top: 80px
    }
}

@media only screen and (max-width: 1199px) {
    .team-area-2 .section-header {
        margin-top: 60px
    }
}

.team-area-2 .section-header .members {
    font-size: 18px;
    font-weight: 500;
    padding: 10px 17px;
    border: 1.5px solid var(--primary);
    border-radius: 40px;
    line-height: 1
}

.team-area-2 .section-header .text {
    max-width: 210px
}

.team-area-2 .section-header .text-wrapper {
    display: flex;
    gap: 20px 40px;
    align-items: flex-start
}

.team-area-2 .team-slider {
    margin-top: 63px
}

@media only screen and (max-width: 1399px) {
    .team-area-2 .team-slider {
        margin-top: 43px
    }
}

@media only screen and (max-width: 1199px) {
    .team-area-2 .team-slider {
        margin-top: 33px
    }
}
.text-slider2-active .swiper-wrapper {
  transition-timing-function: linear !important;
}

/*GOOGLE ADS*/
.hero-area-gads-inner {
    padding-top: 197px;
    padding-bottom: 93px
}

@media only screen and (max-width: 1199px) {
    .hero-area-gads-inner {
        padding-top: 137px;
        padding-bottom: 73px
    }
}

@media only screen and (max-width: 767px) {
    .hero-area-gads-inner {
        padding-top: 70px;
        padding-bottom: 50px
    }
}

.hero-area-gads .section-title {
    font-size: 100px;
    line-height: .95;
    margin-top: -22px
}

@media only screen and (max-width: 1919px) {
    .hero-area-gads .section-title {
        font-size: 70px;
        margin-top: -15px
    }
}

@media only screen and (max-width: 1199px) {
    .hero-area-gads .section-title {
        margin-top: 0
    }
}

@media only screen and (max-width: 991px) {
    .hero-area-gads .section-title {
        font-size: 60px
    }
}

@media only screen and (max-width: 767px) {
    .hero-area-gads .section-title {
        font-size: 50px
    }
}

@media(max-width: 575px) {
    .hero-area-gads .section-title {
        font-size: 40px
    }
}

.hero-area-gads .section-title .shape-1 {
    height: 95px
}

@media only screen and (max-width: 1919px) {
    .hero-area-gads .section-title .shape-1 {
        height: 65px
    }
}

@media only screen and (max-width: 767px) {
    .hero-area-gads .section-title .shape-1 {
        display: none
    }
}

.hero-area-gads .section-content {
    display: grid;
    gap: 30px 80px;
    grid-template-columns: 435px auto
}

@media only screen and (max-width: 1399px) {
    .hero-area-gads .section-content {
        grid-template-columns: 335px auto
    }
}

@media only screen and (max-width: 1199px) {
    .hero-area-gads .section-content {
        grid-template-columns: auto
    }
}

.hero-area-gads .section-content .text {
    font-size: 18px;
    line-height: 1.27;
    max-width: 510px;
    font-weight: 300
}

@media only screen and (max-width: 1399px) {
    .hero-area-gads .section-content .text {
        font-size: 20px
    }
}

.hero-area-gads .section-content .text-wrapper {
    margin-top: 45px;
    margin-inline-start: 470px
}

@media only screen and (max-width: 1919px) {
    .hero-area-gads .section-content .text-wrapper {
        margin-inline-start: 270px
    }
}

@media only screen and (max-width: 767px) {
    .hero-area-gads .section-content .text-wrapper {
        margin-inline-start: 0;
        margin-top: 35px
    }
}

.hero-area-gads .section-content .wc-btn-underline {
    max-width: 251px !important;
    white-space: normal;
    font-size: 18px;
    line-height: 26px;
    font-family: var(--font_beatricetrial);
    text-transform: none;
    font-weight: 400;
    gap: 40px;
    padding-top: 20px;
    padding-bottom: 0;
    color: var(--primary)
}

.hero-area-gads .section-content .wc-btn-underline:before {
    top: 0;
    height: 1px
}

.hero-area-gads .section-content .wc-btn-underline i {
    transform: rotate(-45deg);
    font-size: 20px
}

.dir-rtl .hero-area-gads .section-content .wc-btn-underline i {
    transform: rotate(-135deg)
}

.image-wrapper .p-relative {
    z-index: 99
}

.experience-gads {
    width: 310px;
    aspect-ratio: 100/100;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    border-radius: 50%;
    background-color: #102eb1;
    position: absolute;
    inset-inline-start: 0;
    top: -116px
}

.dark .experience-gads {
    background-color: var(--black)
}

@media only screen and (max-width: 1919px) {
    .experience-gads {
        width: 250px
    }
}

@media only screen and (max-width: 1199px) {
    .experience-gads {
        top: 0
    }
}

@media only screen and (max-width: 991px) {
    .experience-gads {
        width: 200px
    }
}

@media only screen and (max-width: 767px) {
    .experience-gads {
        position: static;
        margin-bottom: 60px
    }
}

.experience-gads .number {
    font-size: 130px
}

@media only screen and (max-width: 1919px) {
    .experience-gads .number {
        font-size: 100px
    }
}

@media only screen and (max-width: 991px) {
    .experience-gads .number {
        font-size: 70px
    }
}

.experience-gads .text {
    font-size: 24px;
    line-height: 1.16;
    font-weight: 400
}

@media only screen and (max-width: 1919px) {
    .experience-gads .text {
        font-size: 20px
    }
}

@media only screen and (max-width: 991px) {
    .experience-gads .text {
        font-size: 16px
    }
}

.experience-gads .text br {
    display: block
}

/*cta area*/
.cta-area-gads-inner {
    position: relative;
    border-top: 1px solid var(--border);
    padding-top: 145px
}

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

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

.cta-area-gads-inner .shape-1 {
    position: absolute;
    bottom: -150px;
    inset-inline-start: calc(100% - 135px);
    width: 400px
}

@media only screen and (max-width: 1399px) {
    .cta-area-gads-inner .shape-1 {
        inset-inline-start: calc(100% - 35px);
        width: 300px
    }
}

@media only screen and (max-width: 767px) {
    .cta-area-gads-inner .shape-1 {
        display: none
    }
}

.dir-rtl .cta-area-gads-inner .shape-1 img {
    transform: rotateY(180deg)
}

.cta-area-gads .section-title {
    max-width: 689px;
    margin: 0 auto
}

.cta-area-gads .section-header {
    text-align: center
}

.cta-area-gads .section-header .title-wrapper {
    margin-top: 17px
}

.cta-area-gads .section-header .text {
    max-width: 407px;
    margin: 0 auto
}

.cta-area-gads .section-header .text-wrapper {
    margin-top: 26px
}

.cta-area-gads .section-header .btn-wrapper {
    margin-top: 43px
}

/*service-area*/
.service-area-ehost {
    border-bottom: 1px solid var(--border);
    padding-top: 94px;
    padding-bottom: 93px
}

@media only screen and (max-width: 1399px) {
    .service-area-ehost {
        padding-top: 74px;
        padding-bottom: 73px
    }
}

@media only screen and (max-width: 1199px) {
    .service-area-ehost {
        padding-top: 54px;
        padding-bottom: 53px
    }
}

.service-area-ehost .section-title {
    max-width: 433px
}

.service-area-ehost .section-header .btn-wrapper {
    margin-top: 47px
}

@media only screen and (max-width: 1399px) {
    .service-area-ehost .section-header .btn-wrapper {
        margin-top: 37px
    }
}

@media only screen and (max-width: 1199px) {
    .service-area-ehost .section-header .btn-wrapper {
        margin-top: 27px
    }
}

.service-area-ehost .service-area-ehost-inner {
    display: grid;
    grid-template-columns: auto 745px;
    gap: 50px 60px;
    justify-content: space-between
}

@media only screen and (max-width: 1399px) {
    .service-area-ehost .service-area-ehost-inner {
        grid-template-columns: auto 595px
    }
}

@media only screen and (max-width: 1199px) {
    .service-area-ehost .service-area-ehost-inner {
        grid-template-columns: auto 535px
    }
}

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

.service-area-ehost .service-box {
    display: flex;
    gap: 20px 30px
}

@media(max-width: 575px) {
    .service-area-ehost .service-box {
        flex-direction: column
    }
}

.service-area-ehost .service-box:hover .wc-btn-circle {
    background-color: #102EB1;
}

.dark .service-area-ehost .service-box:hover .wc-btn-circle {
    background-color: var(--white)
}

.service-area-ehost .service-box:hover .wc-btn-circle img {
    filter: brightness(10)
}

.dark .service-area-ehost .service-box:hover .wc-btn-circle img {
    filter: brightness(0)
}

.service-area-ehost .service-box .title {
    font-size: 26px;
    line-height: 1;
    text-transform: capitalize
}

.service-area-ehost .service-box .text {
    max-width: 304px;
    margin-top: 17px
}

@media(max-width: 575px) {
    .service-area-ehost .service-box .text {
        max-width: 100%
    }
}

.service-area-ehost .service-box .content {
    display: flex;
    gap: 20px 30px;
    justify-content: space-between;
    flex: 1 1 auto;
    align-items: center
}

@media(max-width: 575px) {
    .service-area-ehost .service-box .content {
        flex-direction: column;
        align-items: flex-start
    }
}

.service-area-ehost .service-box .wc-btn-circle {
    background-color: #f9f9f9;
    transition: all .5s
}

.dark .service-area-ehost .service-box .wc-btn-circle {
    background-color: #252525
}

.service-area-ehost .services-wrapper>* {
    display: block
}

.service-area-ehost .services-wrapper>*:not(:first-child) {
    padding-top: 49px;
    border-top: 1px solid var(--border)
}

@media only screen and (max-width: 991px) {
    .service-area-ehost .services-wrapper>*:not(:first-child) {
        padding-top: 29px
    }
}

.service-area-ehost .services-wrapper>*:not(:last-child) {
    padding-bottom: 45px
}

@media only screen and (max-width: 991px) {
    .service-area-ehost .services-wrapper>*:not(:last-child) {
        padding-bottom: 25px
    }
}

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

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

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

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

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

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

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

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

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

.client-area-ehost .client-box .title {
    font-size: 26px
}

.client-area-ehost .client-box .content {
    margin-top: 28px
}

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

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


/*CRM AREA*/
.awards-crmarea {
    position: relative;
    z-index: 1
}

.awards-crmarea .area-bg {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    inset-inline-start: 0;
    z-index: -1
}

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

.awards-crmarea .area-bg:before {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    background-color: rgba(18, 18, 18, 47%);
    top: 0;
    inset-inline-start: 0
}

.awards-crmarea .section-title {
    color: var(--white)
}

.awards-crmarea .section-subtitle {
    color: var(--white)
}

.awards-crmarea .section-subtitle.has-right-line {
    padding-inline-end: 130px
}

.awards-crmarea .section-subtitle.has-right-line:after {
    width: 120px;
    background-color: var(--white)
}

.awards-crmarea .subtitle-wrapper {
    margin-bottom: -90px
}

@media only screen and (max-width: 1399px) {
    .awards-crmarea .subtitle-wrapper {
        margin-bottom: -70px
    }
}

@media only screen and (max-width: 1199px) {
    .awards-crmarea .subtitle-wrapper {
        margin-bottom: -40px
    }
}

@media only screen and (max-width: 991px) {
    .awards-crmarea .subtitle-wrapper {
        margin-bottom: 10px
    }
}

.awards-crmarea .section-title-wrapper {
    display: flex;
    align-items: flex-end;
    gap: 50px
}

@media only screen and (max-width: 991px) {
    .awards-crmarea .section-title-wrapper {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px
    }
}

.awards-crmarea .awards-crmarea-inner {
    position: relative;
    z-index: 1
}

.awards-crmarea .section-content {
    margin-top: 72px;
    margin-inline-start: 438px
}

@media only screen and (max-width: 1919px) {
    .awards-crmarea .section-content {
        margin-top: 62px;
        margin-inline-start: 378px
    }
}

@media only screen and (max-width: 1399px) {
    .awards-crmarea .section-content {
        margin-top: 52px;
        margin-inline-start: 308px
    }
}

@media only screen and (max-width: 1199px) {
    .awards-crmarea .section-content {
        margin-top: 22px;
        margin-inline-start: 228px
    }
}

@media only screen and (max-width: 991px) {
    .awards-crmarea .section-content {
        margin-inline-start: 0
    }
}

.awards-crmarea .section-content .text {
    max-width: 480px;
    color: #fff
}

.awards-crmarea .section-content .awards-list {
    margin-top: 63px
}

@media only screen and (max-width: 991px) {
    .awards-crmarea .section-content .awards-list {
        margin-top: 33px
    }
}

.awards-crmarea .section-content .awards-list ul {
    display: flex;
    gap: 20px 50px;
    max-width: 480px
}

/*CLIENT-AREA*/
.client-area-text {
    position: relative
}

.client-area-text .text {
    font-size: 55px;
    line-height: 1;
    max-width: 310px;
    position: absolute;
    inset-inline-start: 40%;
    top: 70px
}

@media only screen and (max-width: 1399px) {
    .client-area-text .text {
        font-size: 26px
    }
}

@media only screen and (max-width: 1199px) {
    .client-area-text .text {
        font-size: 22px;
        max-width: 280px;
        top: 50px
    }
}

@media only screen and (max-width: 991px) {
    .client-area-text .text {
        font-size: 18px;
        max-width: 230px;
        top: 40px
    }
}

@media only screen and (max-width: 767px) {
    .client-area-text .text {
        text-align: center;
        position: static;
        margin: 0 auto;
        margin-bottom: 10px
    }
}

.client-area .clients-wrapper {
    display: grid;
    grid-template-columns: repeat(6, 1fr)
}

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

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

.client-area .client-box {
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid var(--border);
    min-width: 100px;
    aspect-ratio: 100/100;
    padding: 0 20px;
    margin-top: -1px;
    border-inline-start-color: rgba(0, 0, 0, 0)
}

@media only screen and (max-width: 767px) {
    .client-area .client-box {
        border: none;
        aspect-ratio: 100/50
    }
}

.client-area .client-box:hover img {
    opacity: 1
}

.client-area .client-box:nth-child(1) {
    grid-column-start: 2;
    border-inline-start-color: var(--border)
}

@media only screen and (max-width: 767px) {
    .client-area .client-box:nth-child(1) {
        grid-column-start: auto
    }
}

.client-area .client-box:nth-child(2) {
    grid-column-start: 1;
    border-inline-start-color: var(--border)
}

@media only screen and (max-width: 767px) {
    .client-area .client-box:nth-child(2) {
        grid-column-start: auto
    }
}

.client-area .client-box:nth-child(7) {
    grid-column-start: 2;
    border-inline-start-color: var(--border)
}

@media only screen and (max-width: 767px) {
    .client-area .client-box:nth-child(7) {
        grid-column-start: auto
    }
}

.client-area .client-box:nth-child(12) {
    grid-column-start: 5;
    border-inline-start-color: var(--border)
}

@media only screen and (max-width: 767px) {
    .client-area .client-box:nth-child(12) {
        grid-column-start: auto
    }
}

.client-area .client-box img {
    opacity: 1;
    transition: all .5s
}


/*headingclient*/
.award-area-client .section-content {
    display: grid;
    gap: 30px 60px;
    grid-template-columns: auto 1020px
}

@media only screen and (max-width: 1919px) {
    .award-area-client .section-content {
        grid-template-columns: auto 850px
    }
}

@media only screen and (max-width: 1399px) {
    .award-area-client .section-content {
        grid-template-columns: auto 780px
    }
}

@media only screen and (max-width: 1199px) {
    .award-area-client .section-content {
        grid-template-columns: auto
    }
}

.award-area-client .awards-wrapper>* {
    border-bottom: 1px solid var(--border)
}

.award-area-client .awards-wrapper>*:first-child {
    border-top: 1px solid var(--border)
}

.award-area-client .award-item {
    display: grid;
    gap: 5px 0;
    grid-template-columns: 300px 1fr 150px;
    padding: 16px 0
}

@media only screen and (max-width: 767px) {
    .award-area-client .award-item {
        grid-template-columns: 170px 1fr 150px
    }
}

@media(max-width: 575px) {
    .award-area-client .award-item {
        grid-template-columns: auto
    }
}

.award-area-client .award-item * {
    text-transform: uppercase;
    font-family: var(--font_plusjakartasans);
    color: var(--primary)
}

.award-area-client .award-item .award {
    text-align: end
}

@media(max-width: 575px) {
    .award-area-client .award-item .award {
        text-align: start
    }
}

.award-area-client .awards-wrapper-box {
    margin-top: 92px
}

@media only screen and (max-width: 1919px) {
    .award-area-client .awards-wrapper-box {
        margin-top: 72px
    }
}

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

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

.award-image {
    margin-bottom: 36px
}

/*CONTACT PAGE*/
.team-area-contact {
    padding-top: 145px
}

@media only screen and (max-width: 1399px) {
    .team-area-contact {
        padding-top: 94px
    }
}

@media only screen and (max-width: 1199px) {
    .team-area-contact {
        padding-top: 54px
    }
}

.team-area-contact-inner {
    position: relative
}

.team-area-contact-inner .shape-2 {
    position: absolute;
    max-width: 230px;
    inset-inline-end: calc(100% + 12px);
    top: 46%;
    width: -moz-max-content;
    width: max-content
}

.team-area-contact-inner .shape-3 {
    position: absolute;
    inset-inline-start: calc(100% - 425px);
    top: 50%;
    width: -moz-max-content;
    width: max-content;
    z-index: 2;
    width: 740px
}

@media only screen and (max-width: 1919px) {
    .team-area-contact-inner .shape-3 {
        width: 540px
    }
}

@media only screen and (max-width: 1399px) {
    .team-area-contact-inner .shape-3 {
        inset-inline-start: calc(100% - 225px);
        width: 440px
    }
}

@media only screen and (max-width: 1199px) {
    .team-area-contact-inner .shape-3 {
        display: none
    }
}

.dir-rtl .team-area-contact-inner .shape-3 img {
    transform: rotateY(180deg)
}

.team-area-contact .section-title {
    max-width: 1316px;
    text-align: left;
    margin: 0 auto
}

.team-area-contact .section-header {
    text-align: center
}

.team-area-contact .section-header .title-wrapper {
    margin-top: 17px
}

.team-area-contact .team-card-contact-box {
    margin-top: 36px;
    padding: 20px;
    border-radius: 40px;
   background-image: linear-gradient(180deg, #fff 0%, #fff 47%, rgb(217 228 255 / 25%) 47%);
}

.dark .team-area-contact .team-card-contact-box {
    background-image: linear-gradient(180deg, #121212 0%, #121212 47%, rgba(255, 217, 224, 0.21) 47%)
}

@media only screen and (max-width: 1199px) {
    .team-area-contact .team-card-contact-box {
        padding: 0
    }
}

.team-card-contact {
    background-color: #3c393a;
    border-radius: 25px;
    display: grid;
    grid-template-columns: 390px auto;
    position: relative;
    z-index: 1;
    overflow: hidden
}

@media only screen and (max-width: 767px) {
    .team-card-contact {
        grid-template-columns: 100%
    }
}

.team-card-contact .card-header {
    grid-column: span 2;
    display: flex;
    gap: 20px 27px;
    align-items: center;
    padding: 50px 70px;
    border-bottom: 1px solid rgba(18, 18, 18, .08)
}

@media only screen and (max-width: 767px) {
    .team-card-contact .card-header {
        flex-direction: column;
        align-items: flex-start;
        padding: 30px 30px;
        grid-column: auto
    }
}

.team-card-contact .card-header .thumb {
    width: 140px;
    height: 140px;
    border-radius: 50%
}

@media only screen and (max-width: 991px) {
    .team-card-contact .card-header .thumb {
        display: none
    }
}

.team-card-contact .card-header .title {
    font-size: 26px;
    line-height: 1.18;
    max-width: 365px;
    color: #fff
}

@media only screen and (max-width: 1199px) {
    .team-card-contact .card-header .title {
        font-size: 24px
    }
}

.team-card-contact .card-header .btn-wrapper {
    margin-inline-start: auto
}

@media only screen and (max-width: 767px) {
    .team-card-contact .card-header .btn-wrapper {
        margin-inline-start: 0
    }
}

.team-card-contact .card-header .wc-btn-primary {
    background-color: var(--white);
    border-color: var(--white);
    color: #000
}

.team-card-contact .feature-list-wrapper {
    border-inline-end: 1px solid rgba(18, 18, 18, .08);
    padding: 60px 70px 65px
}

@media only screen and (max-width: 767px) {
    .team-card-contact .feature-list-wrapper {
        padding: 30px 30px 25px;
        border-inline-end: 0
    }
}

.team-card-contact .feature-list-item .text {
    font-size: 18px;
    line-height: 20px;
    max-width: 243px;
    margin-top: 22px;
    color: #fff
}

@media only screen and (max-width: 1199px) {
    .team-card-contact .feature-list-item .text {
        margin-top: 15px
    }
}

.team-card-contact .feature-list-item .text span {
    font-weight: 500
}

.team-card-contact .feature-list-item:not(:first-child) {
    margin-top: 69px
}

@media only screen and (max-width: 1199px) {
    .team-card-contact .feature-list-item:not(:first-child) {
        margin-top: 39px
    }
}

.team-card-contact .team-members {
    padding: 60px 50px 62px
}

@media only screen and (max-width: 767px) {
    .team-card-contact .team-members {
        padding: 10px 30px 22px
    }
}

.team-card-contact .team-members .title {
    color: #fff;
    font-size: 250px;
    line-height: .74
}

@media only screen and (max-width: 1199px) {
    .team-card-contact .team-members .title {
        font-size: 200px
    }
}

@media only screen and (max-width: 991px) {
    .team-card-contact .team-members .title {
        font-size: 120px
    }
}

@media only screen and (max-width: 767px) {
    .team-card-contact .team-members .title {
        font-size: 60px
    }
}

.team-card-contact .team-members .text {
    font-size: 18px;
    line-height: 1.37;
    max-width: 303px;
    color: #fff;
    margin-top: 31px
}

@media only screen and (max-width: 767px) {
    .team-card-contact .team-members .text {
        margin-top: 14px
    }
}

.team-card-contact .shape-1 {
    width: 457px;
    height: 457px;
    background-color: var(--theme);
    border-radius: 50%;
    position: absolute;
    top: -99px;
    inset-inline-end: -72px;
    z-index: -1
}

@media only screen and (max-width: 1399px) {
    .team-card-contact .shape-1 {
        width: 407px;
        height: 407px
    }
}

@media only screen and (max-width: 767px) {
    .team-card-contact .shape-1 {
        width: 227px;
        height: 227px
    }
}

.contact-area-con .section-title {
    max-width: 850px
}

.contact-area-con .section-header {
    display: grid;
    gap: 20px 60px;
    grid-template-columns: 1fr auto
}

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

.contact-area-con .section-header .text {
    max-width: 300px
}

.contact-area-con .contact-formwrap {
    display: grid;
    gap: 50px 30px;
    grid-template-columns: repeat(2, 1fr)
}

@media only screen and (max-width: 767px) {
    .contact-area-con .contact-formwrap {
        grid-template-columns: repeat(1, 1fr);
        gap: 10px 30px
    }
}

.contact-area-con .contact-formwrap .messages {
    grid-column: span 2
}

@media only screen and (max-width: 767px) {
    .contact-area-con .contact-formwrap .messages {
        grid-column: auto
    }
}

.contact-area-con .contact-formfield input {
    width: 100%;
    height: 40px;
    border: none;
    border-bottom: 1px solid var(--border);
    outline: none;
    background-color: rgba(0, 0, 0, 0);
    transition: all .5s
}

.contact-area-con .contact-formfield input:focus {
    border-color: var(--primary)
}

.contact-area-con .submit-btn {
    margin-top: 60px
}

@media only screen and (max-width: 767px) {
    .contact-area-con .submit-btn {
        margin-top: 20px
    }
}

.contact-area-con .section-content {
    display: grid;
    gap: 40px 60px;
    grid-template-columns: 1fr 740px;
    margin-top: 112px
}

@media only screen and (max-width: 1919px) {
    .contact-area-con .section-content {
        margin-top: 72px
    }
}

@media only screen and (max-width: 1399px) {
    .contact-area-con .section-content {
        grid-template-columns: 1fr 640px
    }
}

@media only screen and (max-width: 1199px) {
    .contact-area-con .section-content {
        grid-template-columns: 1fr 600px;
        margin-top: 42px
    }
}

@media only screen and (max-width: 991px) {
    .contact-area-con .section-content {
        grid-template-columns: 1fr
    }
}

.contact-area-con .info-box .text {
    font-size: 18px;
    line-height: 1.25;
    font-weight: 300;
    color: #555555;
    max-width: 360px
}

.contact-area-con .contact-list {
    margin-top: 26px
}

.contact-area-con .contact-list li {
    font-size: 18px;
    line-height: 24px
}

.contact-area-con .contact-list li:not(:first-child) {
    margin-top: 15px
}

.contact-area-con .contact-list li a {
    text-decoration: underline;
    text-underline-offset: 2px
}

/*pricing area*/
.pricing-area-con {
    background-color: #f9f9f9
}

.dark .pricing-area-con {
    background-color: #171717
}

.pricing-area-con .section-title {
    max-width: 680px;
    margin-inline: auto
}

.pricing-area-con .section-header {
    text-align: center
}

.pricing-area-con .pricing-wrapper-box {
    margin-top: 57px
}

@media only screen and (max-width: 1399px) {
    .pricing-area-con .pricing-wrapper-box {
        margin-top: 47px
    }
}

@media only screen and (max-width: 1199px) {
    .pricing-area-con .pricing-wrapper-box {
        margin-top: 37px
    }
}

.pricing-area-con .pricing-wrapper {
    display: grid;
    gap: 30px;
    grid-template-columns: repeat(2, 1fr)
}

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

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

.pricing-box-con {
    background-color: #102eb1;
    padding: 47px 50px 50px;
    max-height: 420px;
    border-radius: 17px;
}

.dark .pricing-box-con {
    background-color: var(--black)
}

@media only screen and (max-width: 1199px) {
    .pricing-box-con {
        padding: 27px 30px 30px
    }
}

.pricing-box-con .tag {
    font-size: 18px;
    color: #fff;
    display: inline-block;
    line-height: 1
}

.pricing-box-con .feature-list {
    margin-top: 39px
}

.pricing-box-con .feature-list li {
    display: flex;
    align-items: center
}

.pricing-box-con .feature-list li:not(:first-child) {
    margin-top: 15px
}

.pricing-box-con .feature-list li img {
    margin-inline-end: 10px
}

.dir-rtl .pricing-box-con .feature-list li img {
    transform: rotateY(180deg)
}

.pricing-box-con .price {
    font-size: 45px;
    line-height: 1;
    margin-top: 17px
}

@media only screen and (max-width: 1399px) {
    .pricing-box-con .price {
        font-size: 50px
    }
}

@media only screen and (max-width: 991px) {
    .pricing-box-con .price {
        font-size: 40px
    }
}

.pricing-box-con .wc-btn-group {
    margin-top: 50px
}

@media only screen and (max-width: 1199px) {
    .pricing-box-con .wc-btn-group {
        margin-top: 40px
    }
}

@media only screen and (max-width: 1199px) {
    .pricing-box-con .wc-btn-group {
        display: flex;
        width: -moz-fit-content;
        width: fit-content
    }

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

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

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

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

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

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

    .pricing-box-con .wc-btn-group .wc-btn-circle {
        width: 40px;
        height: 40px
    }

    .pricing-box-con .wc-btn-group .wc-btn-primary {
        padding: 0 28px
    }
}