@charset "UTF-8";

/*------------------- 1.3. Variable-------------------*/
:root {
  --theme-color: #000;
  --gr-color2: #FD8900;
  --title-color: #101840;
  --body-color: #666666;
  --smoke-color: #F8F8F8;
  --smoke-color2: #ECF1FF;
  --black-color: #000000;
  --black-color2: #101018;
  --gray-color: #bdbdbd;
  --white-color: #ffffff;
  --body-bg: #E1E4E5;
  --light-color: #E1E4E5;
  --yellow-color: #E2B93B;
  --success-color: #27AE60;
  --error-color: #EB5757;
  --th-border-color: #fff;
  --title-font: "Exo", sans-serif;
  --body-font: "Inter", sans-serif;
  --icon-font: "Font Awesome 6 Pro";
  --main-container: 1320px;
  --container-gutters: 24px;
  --section-space: 80px;
  --section-space-mobile: 80px;
  --section-title-space: 60px;
  --ripple-ani-duration: 5s;
}


/*------------------- 4.00. Team  -------------------*/
/* Team global ---------------------------------- */
.th-team {
  position: relative;
}

.th-team .box-img {
  position: relative;
}

.th-team .box-desig {
  display: block;
  margin-bottom: -0.4em;
  -webkit-transition: 0.4s ease-in-out;
  transition: 0.4s ease-in-out;
  color: var(--theme-color);
}

.th-team .th-social {
  -webkit-transition: 0.4s ease-in-out;
  transition: 0.4s ease-in-out;
}

.th-team .th-social a {
  --icon-size: 40px;
  background-color: var(--white-color);
  color: var(--theme-color);
}

.th-team .th-social a:hover {
  background-color: var(--theme-color);
  color: var(--white-color);
}

.th-team .box-title {
  margin-bottom: 0;
}

/* Team Card ---------------------------------- */
.team-card {
  position: relative;
  text-align: center;
}

.team-card .box-social {
  width: 60px;
  padding: 9px 10px;
  background: rgba(255, 255, 255, 0.3);
  border: 1px solid var(--white-color);
  -webkit-backdrop-filter: blur(5px);
          backdrop-filter: blur(5px);
  border-radius: 99px;
  margin: -30px auto 24px auto;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-transition: 0.4s ease-in-out;
  transition: 0.4s ease-in-out;
  overflow: hidden;
  position: relative;
}

.team-card .box-btn {
  height: 40px;
  -webkit-transition: 0.4s ease-in-out;
  transition: 0.4s ease-in-out;
  position: absolute;
  top: calc(50% - 20px);
  left: calc(50% - 20px);
}

.team-card .box-btn i {
  width: 40px;
  height: 40px;
  line-height: 40px;
  font-size: 22px;
  background-color: var(--white-color);
  color: var(--theme-color);
  text-align: center;
  border-radius: 30px;
}

.team-card .th-social {
  visibility: hidden;
  opacity: 0;
  -webkit-transform-origin: center;
      -ms-transform-origin: center;
          transform-origin: center;
  height: 40px;
  -webkit-transform: scaleX(0);
      -ms-transform: scaleX(0);
          transform: scaleX(0);
  white-space: nowrap;
}

.team-card .th-social a {
  margin-right: 2px;
  color: var(--theme-color);
}

.team-card .th-social a:hover {
  background-color: var(--theme-color);
  color: var(--white-color);
}

.team-card .th-social a:last-child {
  margin-right: 0;
}

.team-card .box-content {
  padding: 0 12px 24px 12px;
  position: absolute;
  bottom: 24px;
  left: 24px;
  right: 24px;
  z-index: 2;
  /* Extra small devices */
}

.team-card .box-content:before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(16, 24, 64, 0.8);
  -webkit-backdrop-filter: blur(5px);
          backdrop-filter: blur(5px);
  z-index: -1;
  border-radius: 16px;
}

@media (max-width: 375px) {
  .team-card .box-content {
    bottom: 16px;
    left: 16px;
    right: 16px;
  }
}

.team-card .box-img {
  border-radius: 24px;
}

.team-card .box-desig {
  color: var(--white-color);
}

.team-card .box-title {
  color: var(--white-color);
  margin-bottom: 8px;
  font-weight: 600;
}

.team-card.active .box-img img, .team-card:hover .box-img img {
  -webkit-transform: scale(1.08);
      -ms-transform: scale(1.08);
          transform: scale(1.08);
}

.team-card.active .box-btn, .team-card:hover .box-btn {
  visibility: hidden;
  opacity: 1;
  -webkit-transform: scaleX(0);
      -ms-transform: scaleX(0);
          transform: scaleX(0);
  width: 0;
}

.team-card.active .box-social, .team-card:hover .box-social {
  width: 202px;
}

.team-card.active .th-social, .team-card:hover .th-social {
  -webkit-transform: scaleX(1);
      -ms-transform: scaleX(1);
          transform: scaleX(1);
  visibility: visible;
  opacity: 1;
}

/* Team Box ---------------------------------- */
.team-box {
  text-align: center;
  background-color: var(--theme-color);
}

.team-box .box-img {
  background-image: -webkit-linear-gradient(left, var(--smoke-color), var(--white-color));
  background-image: linear-gradient(to right, var(--smoke-color), var(--white-color));
  -webkit-clip-path: polygon(100% 0, 100% 100%, 50% calc(100% - 32px), 0 100%, 0 0);
          clip-path: polygon(100% 0, 100% 100%, 50% calc(100% - 32px), 0 100%, 0 0);
}

.team-box .box-img img {
  min-height: 280px;
  object-fit: cover;
  object-position: top center;
}

.team-box .box-desig {
  color: var(--white-color);
  max-width: 260px;
  margin: 0 auto 25px auto;
}

.team-box .box-title {
  font-size: 28px;
  color: var(--white-color);
  margin-bottom: 6px;
}

.team-box .box-title a:hover {
  color: var(--title-color);
}

.team-box .box-content {
  padding: 4px 10px 32px 10px;
}

.team-box .box-social {
  width: 60px;
  padding: 4px 5px;
  background: var(--theme-color);
  border-radius: 99px;
  margin: -60px auto 24px auto;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-transition: 0.4s ease-in-out;
  transition: 0.4s ease-in-out;
  overflow: hidden;
  position: relative;
}

.team-box .box-btn {
  height: 52px;
  -webkit-transition: 0.4s ease-in-out;
  transition: 0.4s ease-in-out;
  position: absolute;
  top: calc(50% - 26px);
  left: calc(50% - 26px);
}

.team-box .box-btn i {
  width: 52px;
  height: 52px;
  line-height: 52px;
  font-size: 22px;
  background-color: var(--white-color);
  color: var(--theme-color);
  text-align: center;
  border-radius: 30px;
}

.team-box .th-social {
  visibility: hidden;
  opacity: 0;
  -webkit-transform-origin: center;
      -ms-transform-origin: center;
          transform-origin: center;
  height: 52px;
  -webkit-transform: scaleX(0);
      -ms-transform: scaleX(0);
          transform: scaleX(0);
  white-space: nowrap;
}

.team-box .th-social a {
  --icon-size: 52px;
  font-size: 18px;
  margin-right: 2px;
  color: var(--white-color);
  background-color: var(--theme-color);
}

.team-box .th-social a:hover {
  background-color: var(--title-color);
  color: var(--white-color);
}

.team-box .th-social a:last-child {
  margin-right: 0;
}

.team-box:hover .box-img img {
  -webkit-transform: scale(1.1);
      -ms-transform: scale(1.1);
          transform: scale(1.1);
}

.team-box:hover .box-btn {
  visibility: hidden;
  opacity: 1;
  -webkit-transform: scaleX(0);
      -ms-transform: scaleX(0);
          transform: scaleX(0);
  width: 0;
}

.team-box:hover .box-social {
  width: 236px;
  background-color: var(--white-color);
}

.team-box:hover .th-social {
  -webkit-transform: scaleX(1);
      -ms-transform: scaleX(1);
          transform: scaleX(1);
  visibility: visible;
  opacity: 1;
}

/* Team Grid ---------------------------------- */
.team-grid {
  position: relative;
  z-index: 2;
  border-radius: 24px;
  text-align: center;
  overflow: hidden;
}

.team-grid .box-content {
  -webkit-mask-image: url('data:image/svg+xml,<svg width="424" height="294" viewBox="0 0 424 294" preserveAspectRatio="none" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0 0V0C132.85 69.2505 291.15 69.2505 424 0V0V294H0V0Z" fill="%23D9D9D9"/></svg>');
          mask-image: url('data:image/svg+xml,<svg width="424" height="294" viewBox="0 0 424 294" preserveAspectRatio="none" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0 0V0C132.85 69.2505 291.15 69.2505 424 0V0V294H0V0Z" fill="%23D9D9D9"/></svg>');
  -webkit-mask-size: 100% 100%;
          mask-size: 100% 100%;
  padding: 92px 12px 32px 12px;
  -webkit-mask-position: top center;
          mask-position: top center;
  background-color: var(--white-color);
  margin-top: -74px;
  /* Extra small devices */
}

@media (max-width: 375px) {
  .team-grid .box-content {
    -webkit-mask-size: 110% 103%;
            mask-size: 110% 103%;
  }
}

.team-grid .box-title {
  margin-bottom: 8px;
}

.team-grid .box-img {
  -webkit-mask-image: url('data:image/svg+xml,<svg width="424" height="271" viewBox="0 0 424 271" preserveAspectRatio="none" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0 217V217C132.163 289.004 291.837 289.004 424 217V217V0H0V217Z" fill="%23D9D9D9"/></svg>');
          mask-image: url('data:image/svg+xml,<svg width="424" height="271" viewBox="0 0 424 271" preserveAspectRatio="none" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0 217V217C132.163 289.004 291.837 289.004 424 217V217V0H0V217Z" fill="%23D9D9D9"/></svg>');
  -webkit-mask-size: 100% 100%;
          mask-size: 100% 100%;
  -webkit-mask-position: bottom center;
          mask-position: bottom center;
  background-color: var(--white-color);
}

.team-grid .box-desig {
  color: var(--body-color);
  max-width: 260px;
  margin: 0 auto 25px auto;
}

.team-grid .box-social {
  width: 60px;
  padding: 4px 5px;
  background: var(--white-color);
  border-radius: 99px;
  margin: -27px auto 0 auto;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-transition: 0.4s ease-in-out;
  transition: 0.4s ease-in-out;
  overflow: hidden;
  position: relative;
  z-index: 3;
}

.team-grid .box-btn {
  height: 52px;
  -webkit-transition: 0.4s ease-in-out;
  transition: 0.4s ease-in-out;
  position: absolute;
  top: calc(50% - 26px);
  left: calc(50% - 26px);
}

.team-grid .box-btn i {
  width: 52px;
  height: 52px;
  line-height: 52px;
  font-size: 22px;
  background-color: var(--theme-color);
  color: var(--white-color);
  text-align: center;
  border-radius: 30px;
}

.team-grid .th-social {
  visibility: hidden;
  opacity: 0;
  -webkit-transform-origin: center;
      -ms-transform-origin: center;
          transform-origin: center;
  height: 52px;
  -webkit-transform: scaleX(0);
      -ms-transform: scaleX(0);
          transform: scaleX(0);
  white-space: nowrap;
}

.team-grid .th-social a {
  --icon-size: 52px;
  font-size: 18px;
  margin-right: 2px;
  color: var(--theme-color);
  background-color: var(--white-color);
}

.team-grid .th-social a:hover {
  background-color: var(--title-color);
  color: var(--white-color);
}

.team-grid .th-social a:last-child {
  margin-right: 0;
}

.team-grid:hover .box-img img {
  -webkit-transform: scale(1.1);
      -ms-transform: scale(1.1);
          transform: scale(1.1);
}

.team-grid:hover .box-btn {
  visibility: hidden;
  opacity: 1;
  -webkit-transform: scaleX(0);
      -ms-transform: scaleX(0);
          transform: scaleX(0);
  width: 0;
}

.team-grid:hover .box-social {
  width: 236px;
  background-color: var(--theme-color);
}

.team-grid:hover .th-social {
  -webkit-transform: scaleX(1);
      -ms-transform: scaleX(1);
          transform: scaleX(1);
  visibility: visible;
  opacity: 1;
}

/* Team Block ---------------------------------- */
.team-block {
  border-radius: 16px;
  text-align: center;
  overflow: hidden;
  -webkit-mask-image: url('data:image/svg+xml,<svg width="424" height="561" viewBox="0 0 424 561" preserveAspectRatio="none" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0 511.152C0 517.361 2.88408 523.219 7.80578 527.004L43.3732 554.364C48.967 558.667 55.8265 561 62.8839 561H424V0H0V511.152Z" fill="white"/></svg>');
          mask-image: url('data:image/svg+xml,<svg width="424" height="561" viewBox="0 0 424 561" preserveAspectRatio="none" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0 511.152C0 517.361 2.88408 523.219 7.80578 527.004L43.3732 554.364C48.967 558.667 55.8265 561 62.8839 561H424V0H0V511.152Z" fill="white"/></svg>');
  -webkit-mask-size: 100% 100%;
          mask-size: 100% 100%;
  background-color: var(--white-color);
  padding: 24px;
  /* Extra small devices */
}

@media (max-width: 375px) {
  .team-block {
    padding: 20px;
  }
}

.team-block .box-content {
  padding: 0 12px 48px 12px;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 2;
}

.team-block .box-content:before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(16, 24, 64, 0.8);
  -webkit-backdrop-filter: blur(5px);
          backdrop-filter: blur(5px);
  z-index: -1;
}

.team-block .box-title {
  color: var(--white-color);
  margin-bottom: 2px;
  margin-top: 28px;
}

.team-block .box-img {
  -webkit-mask-image: url('data:image/svg+xml,<svg width="424" height="561" viewBox="0 0 424 561" preserveAspectRatio="none" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0 511.152C0 517.361 2.88408 523.219 7.80578 527.004L43.3732 554.364C48.967 558.667 55.8265 561 62.8839 561H424V0H0V511.152Z" fill="white"/></svg>');
          mask-image: url('data:image/svg+xml,<svg width="424" height="561" viewBox="0 0 424 561" preserveAspectRatio="none" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0 511.152C0 517.361 2.88408 523.219 7.80578 527.004L43.3732 554.364C48.967 558.667 55.8265 561 62.8839 561H424V0H0V511.152Z" fill="white"/></svg>');
  -webkit-mask-size: 100% 100%;
          mask-size: 100% 100%;
  border-radius: 12px;
}

.team-block .box-shape {
  position: absolute;
  bottom: 22px;
  left: 50%;
  -webkit-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
          transform: translateX(-50%);
  z-index: -1;
}

.team-block .box-social {
  width: 68px;
  padding: 8px 5px;
  margin: -35px auto 0 auto;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-transition: 0.4s ease-in-out;
  transition: 0.4s ease-in-out;
  overflow: hidden;
  position: relative;
  z-index: 3;
}

.team-block .box-btn {
  width: 62px;
  height: 70px;
  line-height: 70px;
  -webkit-transition: 0.4s ease-in-out;
  transition: 0.4s ease-in-out;
  position: absolute;
  top: calc(50% - 35px);
  left: calc(50% - 31px);
}

.team-block .th-social {
  visibility: hidden;
  opacity: 0;
  -webkit-transform-origin: center;
      -ms-transform-origin: center;
          transform-origin: center;
  height: 54px;
  -webkit-transform: scaleX(0);
      -ms-transform: scaleX(0);
          transform: scaleX(0);
  white-space: nowrap;
}

.team-block .th-social a {
  height: 54px;
  width: 48px;
  line-height: 54px;
  font-size: 18px;
  margin-right: 0;
  color: var(--white-color);
  background-color: var(--theme-color);
  -webkit-mask-image: url('data:image/svg+xml,<svg width="49" height="55" viewBox="0 0 49 55" preserveAspectRatio="none" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M20.5078 2.03322C22.9576 0.591467 25.9759 0.591467 28.4258 2.03322L44.5078 11.4977C46.9576 12.9395 48.4668 15.6039 48.4668 18.4874V37.4164C48.4668 40.2999 46.9576 42.9644 44.5078 44.4061L28.4258 53.8706C25.9759 55.3123 22.9576 55.3123 20.5078 53.8706L4.42577 44.4061C1.97595 42.9644 0.466797 40.2999 0.466797 37.4164V18.4874C0.466797 15.6039 1.97595 12.9395 4.42577 11.4977L20.5078 2.03322Z" fill="white"/></svg>');
          mask-image: url('data:image/svg+xml,<svg width="49" height="55" viewBox="0 0 49 55" preserveAspectRatio="none" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M20.5078 2.03322C22.9576 0.591467 25.9759 0.591467 28.4258 2.03322L44.5078 11.4977C46.9576 12.9395 48.4668 15.6039 48.4668 18.4874V37.4164C48.4668 40.2999 46.9576 42.9644 44.5078 44.4061L28.4258 53.8706C25.9759 55.3123 22.9576 55.3123 20.5078 53.8706L4.42577 44.4061C1.97595 42.9644 0.466797 40.2999 0.466797 37.4164V18.4874C0.466797 15.6039 1.97595 12.9395 4.42577 11.4977L20.5078 2.03322Z" fill="white"/></svg>');
  -webkit-mask-size: 100% 100%;
          mask-size: 100% 100%;
}

.team-block .th-social a:hover {
  background-color: var(--title-color);
  color: var(--white-color);
}

.team-block .th-social a:last-child {
  margin-right: 0;
}

.team-block:hover .box-img img {
  -webkit-transform: scale(1.1);
      -ms-transform: scale(1.1);
          transform: scale(1.1);
}

.team-block:hover .box-btn {
  visibility: hidden;
  opacity: 1;
  -webkit-transform: scaleX(0);
      -ms-transform: scaleX(0);
          transform: scaleX(0);
  width: 0;
}

.team-block:hover .box-social {
  width: 236px;
}

.team-block:hover .th-social {
  -webkit-transform: scaleX(1);
      -ms-transform: scaleX(1);
          transform: scaleX(1);
  visibility: visible;
  opacity: 1;
}

/* Team Element ---------------------------------- */
.team-element {
  padding-bottom: 65px;
  margin-bottom: 26px;
}

.team-element .arrow-icon {
  --btn-size: 60px;
  font-size: 20px;
  position: absolute;
  top: 0;
  right: 0;
  z-index: 3;
  background-color: var(--title-color);
  color: var(--white-color);
}

.team-element .arrow-icon:hover {
  background-color: var(--theme-color);
  -webkit-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
          transform: rotate(45deg);
}

.team-element .whatsapp {
  position: absolute;
  bottom: -28px;
  left: calc(50% - 28px);
  border: 2px solid var(--white-color);
  background-color: var(--theme-color);
  color: var(--white-color);
  line-height: 52px;
}

.team-element .whatsapp:hover {
  background-color: var(--title-color);
}

.team-element .box-img {
  border-radius: 24px;
  background-color: var(--white-color);
  position: relative;
  z-index: 2;
}

.team-element .box-img:after {
  content: url('data:image/svg+xml,<svg width="94" height="90" viewBox="0 0 94 90" preserveAspectRatio="none" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M24.3744 30.5588C24.6798 51.3254 41.6014 68 62.3703 68H69.425C82.0064 68 92.3266 77.6809 93.3429 90H93.4258V0H0.425781C13.4742 0.0801305 24.0807 10.5815 24.2728 23.6471L24.3744 30.5588Z" fill="%23E1E4E5"/></svg>');
  position: absolute;
  right: -1px;
  top: -1px;
}

.team-element .box-content {
  padding: 24px 12px 53px 12px;
  position: absolute;
  bottom: 0;
  left: 22px;
  right: 22px;
  z-index: 2;
  background-color: var(--title-color);
  border: 2px solid var(--white-color);
  border-radius: 20px;
}

.team-element .box-title {
  color: var(--white-color);
  margin-bottom: 2px;
}

.team-element .box-desig {
  color: var(--white-color);
}

.team-element:hover .box-img img {
  -webkit-transform: scale(1.1);
      -ms-transform: scale(1.1);
          transform: scale(1.1);
}

/* Team Details ---------------------------------- */
.about-card {
  margin-left: 50px;
  /* Medium Large devices */
}

@media (max-width: 1299px) {
  .about-card {
    margin-left: 0;
  }
}

.about-card .box-desig {
  color: var(--theme-color);
  margin-bottom: 0;
}

.about-card hr {
  margin: 33px 0;
  color: inherit;
  background-color: var(--th-border-color);
  opacity: 1;
}

.team-counter {
  text-align: center;
  border: 1px solid var(--th-border-color);
  border-radius: 12px;
  padding: 65px 10px;
}

.team-counter-wrap {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px;
  margin-top: 40px;
  /* Medium Large devices */
  /* Large devices */
}

@media (max-width: 1299px) {
  .team-counter-wrap {
    gap: 24px;
  }
}

@media (max-width: 1199px) {
  .team-counter-wrap {
    grid-template-columns: repeat(2, 1fr);
  }
}

.team-counter .box-title {
  margin-bottom: 2px;
}

.team-counter .box-text {
  font-size: 18px;
  color: var(--title-color);
}

.position-relative .team-card.active {
  position: -webkit-sticky;
  position: sticky;
  top: 100px;
  left: 0;
}

.team-contact {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  gap: 20px;
  padding: 32px;
  border: 1px solid var(--th-border-color);
  border-radius: 12px;
  /* Medium Large devices */
  /* Extra small devices */
}

@media (max-width: 1299px) {
  .team-contact {
    padding: 24px;
  }
}

@media (max-width: 375px) {
  .team-contact {
    padding: 16px;
  }
}

.team-contact .icon-btn {
  --btn-size: 70px;
  font-size: 20px;
  background-color: var(--theme-color);
  border: none;
  color: var(--white-color);
}

.team-contact .box-text {
  max-width: 230px;
}

.team-contact .box-text a {
  color: inherit;
  display: block;
  max-width: -webkit-fit-content;
  max-width: -moz-fit-content;
  max-width: fit-content;
}

.team-contact .box-text a:hover {
  color: var(--theme-color);
}

.team-contact .box-title {
  font-size: 20px;
  margin-bottom: 2px;
}

.skill-feature {
  text-align: left;
}

.skill-feature:not(:last-child) {
  margin-bottom: 30px;
}

.skill-feature .box-title,
.skill-feature .progress-value {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 10px;
  margin-top: -0.3em;
  font-family: var(--title-font);
  color: var(--title-color);
}

.skill-feature .progress {
  position: relative;
  height: 6px;
  background-color: var(--th-border-color);
  overflow: visible;
  border-radius: 0;
  border-radius: 9px;
}

.skill-feature .progress-bar {
  background-color: var(--theme-color);
  height: 100%;
  border-radius: inherit;
  overflow: visible;
  position: relative;
}

.skill-feature .progress-value {
  position: absolute;
  top: -30px;
  right: -8px;
}

/*------------------- 4.00. Testimonial  -------------------*/
/* Testimonial Card ---------------------------------- */
.box-profile {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 16px;
}

.testi-card {
  position: relative;
  padding: 32px 0 32px 32px;
  
  /* Extra small devices */
}

.testi-card .box-text {
  font-size: 18px;
  color: var(--white-color);
}

.testi-card .box-img {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 100%;
  border-radius: 24px;
  max-width: calc(100% - 32px);
}

.testi-card .box-img img {
  height: 100%;
  object-fit: cover;
}

.testi-card .box-content {
  max-width: 415px;
  margin-left: auto;
  padding: 30px;
  position: relative;
  z-index: 1;
  border-radius: 16px;
}

.testi-card .box-content:before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-color: var(--title-color);
  border-right: 4px solid var(--theme-color);
  z-index: -1;
}

.testi-card .box-review {
  color: var(--theme-color);
  font-size: 18px;
  margin-bottom: 13px;
}

.testi-card .box-review i {
  margin-right: 8px;
}

.testi-card .box-review i:last-child {
  margin-right: 0;
}

.testi-card .box-profile {
  margin-top: 34px;
}

.testi-card .box-avater {
  border-radius: 99px;
  border: 2px solid var(--white-color);
  overflow: hidden;
}

.testi-card .box-title {
  color: var(--theme-color);
  margin-bottom: 2px;
}

.testi-card .box-desig {
  color: var(--white-color);
  margin-bottom: -0.45em;
}

.testi-card.style2 .box-img {
  border-radius: 0;
}

.testi-card.style2 .box-content {
  border-radius: 0;
}

.testi-card.style2 .box-content:before {
  -webkit-transform: skew(-8deg) translateX(-24px);
      -ms-transform: skew(-8deg) translateX(-24px);
          transform: skew(-8deg) translateX(-24px);
  /* Extra small devices */
}

@media (max-width: 575px) {
  .testi-card.style2 .box-content:before {
    -webkit-transform: none;
        -ms-transform: none;
            transform: none;
  }
}

@media (max-width: 375px) {
  .testi-card {
    padding: 0;
  }
  .testi-card .box-img {
    display: none;
  }
  .testi-card .box-text {
    font-size: 16px;
  }
  .testi-card .box-title {
    font-size: 21px;
  }
  .testi-card .box-content {
    padding: 20px;
  }
}

/* Testimonial Box ---------------------------------- */
.testi-box {
  position: relative;
}

.testi-box-area {
  position: relative;
  z-index: 3;
  padding: 40px 35px 40px 0;
  /* Large devices */
}

@media (max-width: 1199px) {
  .testi-box-area {
    text-align: center;
    padding: 80px 0 120px 0;
  }
}

.testi-box-tab {
  position: absolute;
  bottom: 50%;
  -webkit-transform: translateY(50%);
      -ms-transform: translateY(50%);
          transform: translateY(50%);
  right: -70px;
  z-index: 3;
  background-color: var(--title-color);
  padding: 36px 10px 10px 10px;
  border-radius: 99px;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  /* Large devices */
}

.testi-box-tab .tab-btn {
  border-radius: 99px;
  overflow: hidden;
  cursor: pointer;
  margin-top: -26px;
  position: relative;
  z-index: 1;
  padding: 3px;
  background-color: var(--title-color);
  -webkit-transition: 0.4s ease-in-out;
  transition: 0.4s ease-in-out;
  -webkit-box-ordinal-group: 2;
  -webkit-order: 1;
      -ms-flex-order: 1;
          order: 1;
}

.testi-box-tab .tab-btn img {
  -webkit-filter: blur(1.5px);
          filter: blur(1.5px);
  -webkit-transition: 0.4s ease-in-out;
  transition: 0.4s ease-in-out;
}

.testi-box-tab .tab-btn.active {
  background-color: var(--white-color);
  -webkit-box-ordinal-group: 1;
  -webkit-order: 0;
      -ms-flex-order: 0;
          order: 0;
}

.testi-box-tab .tab-btn.active img {
  -webkit-filter: none;
          filter: none;
}

.testi-box-tab .tab-btn img {
  border-radius: 99px;
}

@media (max-width: 1199px) {
  .testi-box-tab {
    bottom: 0;
    right: -12px;
    -webkit-transform: none;
        -ms-transform: none;
            transform: none;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    padding: 20px;
    width: 100%;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
  .testi-box-tab .tab-btn {
    margin-left: -25px;
    margin-top: 0;
  }
}

.testi-box-tab .indicator {
  display: none;
}

.testi-box .box-text {
  font-size: 20px;
  font-weight: 500;
  line-height: 1.5;
  margin-bottom: 32px;
  color: var(--white-color);
  max-width: 650px;
  /* Large devices */
}

@media (max-width: 1199px) {
  .testi-box .box-text {
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
  }
}

.testi-box .box-review {
  color: var(--theme-color);
  font-size: 18px;
  margin-bottom: 30px;
  margin-top: -4px;
}

.testi-box .box-review i {
  margin-right: 8px;
}

.testi-box .box-review i:last-child {
  margin-right: 0;
}

.testi-box .box-title {
  font-size: 28px;
  color: var(--white-color);
  margin-bottom: 5px;
}

.testi-box .box-desig {
  color: var(--white-color);
  margin-bottom: -0.45em;
}

.testi-sec3 {
  background-color: var(--title-color);
  background-size: auto;
  background-position: top left;
  overflow: hidden;
}

.testi-img1 {
  margin-right: -300px;
  /* Large devices */
}

@media (max-width: 1199px) {
  .testi-img1 {
    margin-right: 0;
  }
}

.testi-img1 img {
  width: 100%;
}

/* Testimonial Grid ---------------------------------- */
.testi-grid {
  position: relative;
  z-index: 2;
  text-align: left;
  padding: 48px;
  /* Large devices */
  /* Extra small devices */
  /* Extra small devices */
}

.testi-grid:before {
  content: '';
  position: absolute;
  inset: 0;
  background-color: var(--white-color);
  border-radius: 16px;
  z-index: -1;
  -webkit-mask-image: url('data:image/svg+xml,<svg width="648" height="432" viewBox="0 0 648 432" preserveAspectRatio="none" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M648 0H0V432H552.263C557.684 432 560.394 432 562.911 431.333C565.141 430.742 567.253 429.77 569.152 428.459C571.295 426.98 573.056 424.921 576.58 420.802L640.316 346.297C643.161 342.972 644.583 341.309 645.596 339.435C646.494 337.772 647.153 335.99 647.551 334.142C648 332.059 648 329.871 648 325.495V0Z" fill="white"/></svg>');
          mask-image: url('data:image/svg+xml,<svg width="648" height="432" viewBox="0 0 648 432" preserveAspectRatio="none" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M648 0H0V432H552.263C557.684 432 560.394 432 562.911 431.333C565.141 430.742 567.253 429.77 569.152 428.459C571.295 426.98 573.056 424.921 576.58 420.802L640.316 346.297C643.161 342.972 644.583 341.309 645.596 339.435C646.494 337.772 647.153 335.99 647.551 334.142C648 332.059 648 329.871 648 325.495V0Z" fill="white"/></svg>');
  -webkit-mask-size: 100% 100%;
          mask-size: 100% 100%;
}

.testi-grid .box-profile {
  margin-bottom: 40px;
}

.testi-grid .box-text {
  font-size: 20px;
  font-weight: 500;
  line-height: 1.5;
  margin-bottom: -8px;
}

.testi-grid .box-review {
  color: var(--theme-color);
  font-size: 18px;
  margin-bottom: 21px;
  margin-top: -4px;
}

.testi-grid .box-review i {
  margin-right: 8px;
}

.testi-grid .box-review i:last-child {
  margin-right: 0;
}

.testi-grid .box-title {
  font-size: 28px;
  margin-bottom: 5px;
}

.testi-grid .box-desig {
  color: var(--title-color);
  margin-bottom: -0.45em;
}

.testi-grid .box-avater {
  border-radius: 99px;
  overflow: hidden;
}

.testi-grid .box-icon {
  position: absolute;
  bottom: 0;
  right: 0;
}

.testi-grid .box-logo {
  position: absolute;
  top: 48px;
  right: 48px;
  z-index: -1;
}

@media (max-width: 1199px) {
  .testi-grid {
    padding: 40px;
  }
  .testi-grid .box-logo {
    right: 40px;
    top: 40px;
  }
}

@media (max-width: 575px) {
  .testi-grid {
    padding: 32px;
  }
  .testi-grid .box-logo {
    right: 26px;
    top: 50px;
    max-width: 60px;
  }
  .testi-grid .box-title {
    font-size: 24px;
  }
  .testi-grid .box-profile {
    margin-bottom: 30px;
  }
  .testi-grid .box-text {
    font-size: 18px;
  }
}

@media (max-width: 375px) {
  .testi-grid {
    padding: 20px;
  }
  .testi-grid .box-logo {
    display: none;
  }
  .testi-grid .box-avater {
    max-width: 70px;
  }
}

.testi-grid.style2:before {
  -webkit-mask-image: url('data:image/svg+xml,<svg width="649" height="370" viewBox="0 0 649 370" preserveAspectRatio="none" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M648.5 4.85994e-07V260.053C648.5 277.726 634.173 292.053 616.5 292.053H614.159C588.33 292.053 567.391 312.992 567.391 338.821C567.391 356.041 553.432 370 536.212 370H0.5L0.500004 0L648.5 4.85994e-07Z" fill="white"/></svg>');
          mask-image: url('data:image/svg+xml,<svg width="649" height="370" viewBox="0 0 649 370" preserveAspectRatio="none" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M648.5 4.85994e-07V260.053C648.5 277.726 634.173 292.053 616.5 292.053H614.159C588.33 292.053 567.391 312.992 567.391 338.821C567.391 356.041 553.432 370 536.212 370H0.5L0.500004 0L648.5 4.85994e-07Z" fill="white"/></svg>');
  -webkit-mask-position: bottom right;
          mask-position: bottom right;
  /* Extra small devices */
}

@media (max-width: 575px) {
  .testi-grid.style2:before {
    -webkit-mask-image: none;
            mask-image: none;
  }
}

.testi-grid.style2 .box-review {
  color: #F47629;
}

.testi-grid.style2 .box-icon {
  /* Extra small devices */
}

.testi-grid.style2 .box-icon svg {
  max-width: 70px;
  /* Medium Large devices */
}

@media (max-width: 1299px) {
  .testi-grid.style2 .box-icon svg {
    max-width: 60px;
  }
}

@media (max-width: 575px) {
  .testi-grid.style2 .box-icon {
    display: none;
  }
}