@import "wptiff-colors.css";
@import "wptiff-fonts.css";
@import "wptiff-spacings.css";


h1,
h2,
h3,
h4,
p {
  color: var(--clr-primary);
}


/* ================== Sections ================== */
.services-section {
  margin-top: -30px !important;
  padding: 110px 0 80px 0 !important;
}

/* === services hero === */
.services-hero {
  margin: 0;
  display: flex;
  align-items: center;
  border-radius: 30px;
  box-shadow: 2px 4px 24px 0px rgba(0, 74, 124, 0.06);
  background-image: linear-gradient(180deg, rgba(188, 228, 250, .5) -70.7%, rgba(188, 228, 250, 0) 67.09%);
  z-index: 10;
}

.services-hero .et_pb_row {
  max-width: var(--mw-m);
}

.services-hero .et_pb_row .description {
  padding: 80px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.services-hero .et_pb_row img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}


/* === services tabs === */
.services-tabs {
  display: flex;
  border-radius: 0 0 30px 30px;
  background-image: linear-gradient(180deg, rgba(188, 228, 250, .5) -70.7%, rgba(188, 228, 250, 0) 67.09%);
  background-color: #f6fafc;
  z-index: 9;
}

.services-tabs .et_pb_heading_container {
  justify-items: center;
  margin-bottom: 50px;
}

.services-tabs .et_pb_heading_container h2 {
  max-width: 700px;
}


/* === services how === */
.services-how {
  border-radius: 0 0 30px 30px;
  box-shadow: 2px 4px 24px 0px rgba(0, 74, 124, 0.06);
  z-index: 8;
}

.services-how .et_pb_row {
  max-width: var(--mw-m);
}

.services-how .et_pb_row .how-description {
  padding: 80px 50px;
}

.services-how .et_pb_row .how-description h2 {
  margin-bottom: 52px;
}

.services-how .et_pb_row .how-description .icon-list {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.services-how .et_pb_row .how-description .icon-list .icon-list-item {
  display: flex;
  gap: 25px;
}

/* === services carousel === */
.services-carousel {
  display: flex;
  border-radius: 0 0 30px 30px;
  background-image: linear-gradient(180deg, rgba(188, 228, 250, .5) -70.7%, rgba(188, 228, 250, 0) 67.09%);
  background-color: #f6fafc;
  z-index: 7;
}

.services-carousel .et_pb_text_2 {
  margin: 25px 0 50px 0;
}

/* === services cta === */
.services-cta {
  margin-top: -30px !important;
  background-color: var(--clr-primary);
  border-radius: 0 0 30px 30px;
  z-index: 6;
}

.services-cta .et_pb_row .cta-description {
  padding: 150px 0 100px 0 !important;
}

.services-cta .et_pb_row .cta-description h4 {
  font-weight: 400 !important;
}


.services-cta .et_pb_row .cta-description h4 {
  margin: 45px 0 90px 0;
}


/* ================== Cards ================== */
.card-lg {
  border-radius: 30px;
}

.card-md {
  border-radius: 20px;
}


/* ================== Tabs ================== */
.tabs-wrapper {
  max-width: 1000px;
  padding: 20px 30px 30px 30px;
  margin: 0 auto;
  background-color: var(--clr-white);
  box-shadow: 2px 4px 24px 0px rgba(0, 74, 124, 0.06);
  display: flex;
}

.tabs-wrapper .dsm-advanced-tabs-wrapper {
  display: flex;
  justify-content: center !important;
  gap: 10px;
}

.tabs-wrapper .dsm-advanced-tabs-wrapper::after {
  content: "";
  margin-top: -11px;
  display: block;
  height: 1px;
  width: 100%;
  background: linear-gradient(90deg, rgba(211, 226, 235, 0.00) 0%, #D3E2EB 50%, rgba(211, 226, 235, 0.00) 100%);
}

.tabs-wrapper .dsm-advanced-tabs-wrapper .dsm-tab {
  border-bottom: solid 3px transparent;
  padding: 10px 10px 16px 10px;
  background-color: var(--clr-white);
  color: var(--clr-primary);
  text-transform: uppercase;
  font-weight: var(--fw-btn);
  opacity: 0.3;
}

.tabs-wrapper .dsm-advanced-tabs-wrapper .dsm-active {
  border-bottom: solid 3px var(--clr-primary) !important;
  color: var(--clr-primary);
  opacity: 1;
}

.tabs-wrapper .dsm-advanced-tabs-container {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.tabs-wrapper .dsm-advanced-tabs-container .dsm-content,
.tabs-wrapper .dsm-advanced-tabs-content-wrapper .dsm-content-wrapper {
  padding: 0 !important;
}


.tabs-wrapper .dsm-content-wrapper {
  border-style: none !important;
}

.tabs-wrapper .tab-content {
  display: flex;
  gap: 30px;
  border: none;
}

.tabs-wrapper .tab-content .tab-description {
  width: 50%;
  display: flex;
  flex-direction: column;
  gap: 50px;
  justify-content: space-around;
  padding: 20px;
}

.tabs-wrapper .tab-content img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}


/* ================== Nested Tabs ================== */
.services-nested-tabs {
  display: flex;
  align-items: center;
}

.nested-tabs {
  max-width: 1200px;
  display: flex;
  flex-direction: row;
  gap: 20px;
}

.nested-tabs button {
  cursor: pointer;
}


/* ===== tabs lvl 1=====*/
.nested-tabs #lvl1-tabs-nav {
  display: flex;
  align-items: center;
  flex-direction: column;
  padding: 20px 0;
  gap: 10px;
}

.nested-tabs #lvl1-tabs-nav .lvl1-nav-btn {
  position: relative;
  width: 330px;
  background-color: transparent;
  border-radius: 8px;
  padding: 24px 27px;
  z-index: 9;
  display: flex;
  gap: 14px;
  cursor: pointer;

}

.nested-tabs #lvl1-tabs-nav .lvl1-nav-btn.active {
  background-color: #fff;
  filter: drop-shadow(2px 4px 24px rgba(0, 74, 124, 0.06));
}

.nested-tabs #lvl1-tabs-nav .lvl1-nav-btn.active::after {
  content: "";
  position: absolute;
  right: -10px;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 10px solid #fff;
  filter: drop-shadow(2px 4px 24px rgba(0, 74, 124, 0.06));
}


.nested-tabs .content-card {
  background-color: #fff;
  border-radius: 20px;
  padding: 30px 60px;
  box-shadow: 2px 4px 24px 0px rgba(0, 74, 124, 0.06);
}

.nested-tabs .content-card .lvl1-tab-content.active {
  display: block;
}

.nested-tabs .content-card .lvl1-tab-content {
  display: none;
}

.nested-tabs .content-card .lvl1-tab-content .no-jobs {
  width: 100%;
  text-align: center;
  padding: 75px 0;
}

.nested-tabs .content-card .lvl1-tab-content .tab-extra-content {
  padding: 30px;
}

.nested-tabs .content-card .lvl1-tab-content .tab-extra-content h3 {
  margin-bottom: 30px;
}

/* ===== tabs lvl 2=====*/
.nested-tabs .content-card #lvl2-tabs-navigation {
  position: relative;
  display: flex;
  gap: 10px;
  justify-content: center;
}

.nested-tabs .content-card #lvl2-tabs-navigation button {
  color: var(--clr-primary);
  text-transform: uppercase;
  font-weight: var(--fw-btn);
  opacity: 0.3;
  border-bottom: solid 3px transparent;
}

.nested-tabs .content-card #lvl2-tabs-navigation .active {
  opacity: 1;
  border-bottom: solid 3px var(--clr-primary);

}

.nested-tabs .content-card #lvl2-tabs-navigation::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  height: 1px;
  width: 100%;
  background: linear-gradient(90deg, rgba(211, 226, 235, 0.00) 0%, #D3E2EB 50%, rgba(211, 226, 235, 0.00) 100%);
}

.nested-tabs .content-card #lvl2-tabs-navigation button {
  border: none;
  background: transparent;
  padding: 10px 20px 16px 20px;

}

.nested-tabs .content-card .lvl2-tab-content {
  display: none;
}

.nested-tabs .content-card .lvl2-tab-content.active {
  display: block;
}

.nested-tabs .content-card .lvl2-tab-content h3 {
  padding: 30px;
}



/* ===== accordion =====*/
.nested-tabs .content-card .lvl2-tab-content .accordion .accordion-item {
  position: relative;
}

.nested-tabs .content-card .lvl2-tab-content .accordion .accordion-item::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 1px;
  width: 100%;
  background: linear-gradient(90deg, #D3E2EB 47.45%, rgba(211, 226, 235, 0.00) 100%);
}


.nested-tabs .content-card .lvl2-tab-content .accordion .accordion-item:last-child::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  height: 1px;
  width: 100%;
  background: linear-gradient(90deg, #D3E2EB 47.45%, rgba(211, 226, 235, 0.00) 100%);
}

.nested-tabs .content-card .lvl2-tab-content .accordion .accordion-content {
  display: none;
  border: none;
}

.nested-tabs .content-card .lvl2-tab-content .accordion .accordion-header {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: none;
  background: transparent;
  padding: 20px 30px;
  font-size: 20px;
  font-weight: var(--fw-btn);
  color: var(--clr-primary);
  text-transform: uppercase;
}

.nested-tabs .content-card .lvl2-tab-content .accordion .accordion-header-icon {
  position: relative;
}

.nested-tabs .content-card .lvl2-tab-content .accordion .accordion-header-icon::before {
  position: absolute;
  content: "";
  color: #000;
  width: 2px;
  height: 16px;
}

.nested-tabs .content-card .lvl2-tab-content .accordion .accordion-content {
  border: none;
  background: transparent;
  padding: 0 30px 20px 30px;

}


/* ================== Carousel ================== */
.carousel-wrapper .dsm_card_carousel_wrapper {
  margin: 0;
  padding: 25px 0;
}

.carousel-wrapper .dsm_card_wrapper {
  height: 400px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background-color: var(--clr-white);
  box-shadow: 2px 4px 24px 0px rgba(0, 74, 124, 0.06);
  padding: 50px 32px !important;
  border-radius: 18px;
  color: var(--clr-primary);
}

.carousel-wrapper .dsm_card_wrapper h4 {
  font-weight: 700 !important;
}

.carousel-wrapper .swiper-button-prev,
.carousel-wrapper .swiper-button-next {
  height: 100%;
  width: 200px;
  top: 0;
  margin-top: 0;
}

.carousel-wrapper .swiper-button-prev {
  background: linear-gradient(90deg, #F6FAFC 0%, rgba(246, 250, 252, 0.00) 100%);
}

.carousel-wrapper .swiper-button-next {
  background: linear-gradient(270deg, #F6FAFC 0%, rgba(246, 250, 252, 0.00) 100%);
}

.carousel-wrapper .swiper-button-prev::before,
.carousel-wrapper .swiper-button-next::before {
  border-radius: 6px;
  padding: 12px;
  background-color: var(--clr-primary);
  color: var(--clr-white) !important;
}




/* ================== Buttons ================== */
.btn .btn:hover {
  border: none;
}

.btn {
  border: 0;
  border-radius: 6px;
  padding: 20px 24px;
  width: fit-content;
}

.btn-dark {
  background-color: var(--clr-primary);
  color: var(--clr-white);
  transition: 300ms;
}

.btn-light {
  background-color: var(--clr-white);
  color: var(--clr-primary);
  transition: 300ms;
}

.btn-dark:hover {
  background-color: var(--clr-secondary);
  color: var(--clr-primary)
}

.btn-light:hover {
  background-color: var(--clr-secondary);
  color: var(--clr-primary)
}



/* ================== Responsive ==================*/

@media (min-width: 1280px) and (max-width: 1649px) {
  .services-section {
    margin-top: -30px !important;
    padding: 110px 50px 80px 50px !important;
  }

  .services-carousel {
    padding: 110px 0 80px 0 !important;
  }

  .carousel-wrapper .swiper-button-prev,
  .carousel-wrapper .swiper-button-next {
    width: 150px;
  }
}

@media (min-width: 980px) and (max-width: 1279px) {
  .services-section {
    margin-top: -30px !important;
    padding: 110px 50px 80px 50px !important;
  }

  /* === services hero === */
  .services-hero .et_pb_row .description,
  .services-how .et_pb_row .how-description {
    padding: 50px 50px 50px 0;
  }

  .services-carousel {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* === services carousel === */
  .carousel-wrapper .swiper-button-prev,
  .carousel-wrapper .swiper-button-next {
    width: 150px;
  }
}



@media (max-width: 980px) {
  .services-section {
    margin-top: -30px !important;
    padding: 110px 20px 60px 20px !important;
  }

  .bg-spacing {
    height: 350px;
  }

  /* === services hero === */
  .services-hero .et_pb_row {
    display: flex;
    flex-direction: column-reverse;
  }

  .services-hero .et_pb_row .description {
    padding: 0;
    display: flex;
    flex-direction: column;
    margin-top: 30px !important;
    gap: 24px;
  }

  /* === services tabs === */
  .services-tabs {
    padding-bottom: 20px !important;
  }

  .tabs-wrapper {
    margin: 0;
    padding: 20px;
  }

  .tabs-wrapper .tab-content {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 0;
  }

  .tabs-wrapper .tab-content .tab-description {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 20px;
    padding: 0;
  }

  .tabs-wrapper .dsm-advanced-tabs-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }

  /* === services how === */
  .services-how {
    padding-bottom: 20px !important;
  }

  .services-how .et_pb_row .how-description {
    padding: 0 0 50px 0;
  }

  .services-how .et_pb_row .how-description h2 {
    margin-bottom: 25px;
  }

  /* === services carousel === */
  .services-carousel {
    padding-bottom: 0 !important;
  }

  .services-carousel .et_pb_text_2 {
    margin: 15px 0 30px 0;
  }

  .carousel-wrapper .swiper-button-prev,
  .carousel-wrapper .swiper-button-next {
    width: 75px;
  }

  .carousel-wrapper .swiper-button-prev::before,
  .carousel-wrapper .swiper-button-next::before {
    padding: 6px;
    font-size: 25px;
  }

  .carousel-wrapper .dsm_card_wrapper {
    height: 325px;
    padding: 30px 32px !important;
  }

  /* === services cta === */
  .services-cta .et_pb_row .cta-description {
    padding: 110px 20px 80px 20px !important;
  }

  .services-cta .et_pb_row .cta-description h4 {
    margin: 20px 0 40px 0;
  }



  /* === nested tabs === */
  .services-nested-tabs {
    display: block;
    align-items: center;
  }

  .nested-tabs .content-card #lvl2-tabs-navigation {
    position: relative;
    display: flex;
    gap: 10px;
    justify-content: center;
  }


  .nested-tabs {
    max-width: var(--max-w-m);
    display: flex;
    flex-direction: column;
    gap: 20px;
  }

  .nested-tabs #lvl1-tabs-nav {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: center;
    padding: 0;
  }

  .nested-tabs #lvl1-tabs-nav .lvl1-nav-btn.active::after {
    display: none;
  }

  .nested-tabs #lvl1-tabs-nav .lvl1-nav-btn {
    padding: 10px 15px;
  }

  .nested-tabs .content-card .lvl1-tab-content .tab-extra-content {
    padding: 30px 0 0 0;
  }


  .nested-tabs .content-card .lvl1-tab-content .tab-extra-content h3 {
    padding: 0;
    margin-bottom: 10px;

  }

  .nested-tabs .content-card .lvl2-tab-content .accordion .accordion-header {
    font-size: 16px;
    font-weight: 600;
    padding: 15px 0;
  }

  .nested-tabs .content-card .lvl2-tab-content .accordion .accordion-header .accordion-icon {
    width: 25px;
    height: 25px;
  }

  .nested-tabs .content-card .lvl2-tab-content h3 {
    padding: 30px 0 10px 0;
  }

  .nested-tabs .content-card {
    padding: 30px;
  }
}

@media (max-width: 720px) {
  .nested-tabs #lvl1-tabs-nav .lvl1-nav-btn {
    width: 100%;
    justify-content: center;
  }
}