/* Techub service-details look for the Vvveb canvas.
   Scoped so other editor blocks keep the landing stylesheet. */

@import url("https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Plus+Jakarta+Sans:wght@500;600;700;800&display=swap");

.payera-editor-content:has(.tp-service-detils-area){
  padding: 24px 16px 40px;
  background: #fff;
}

.payera-editor-content .tp-service-detils-area{
  --tp-ff-body: "DM Sans", sans-serif;
  --tp-ff-heading: "Plus Jakarta Sans", sans-serif;
  --tp-ff-p: "DM Sans", sans-serif;
  --tp-common-white: #ffffff;
  --tp-common-black: #12062c;
  --tp-common-gray2: #f4f4f4;
  --tp-heading-primary: #12062c;
  --tp-heading-secondary: #00b7ff;
  --tp-theme-primary: #00b7ff;
  --tp-text-body: #67677a;
  --tp-text-9: #4ea3d8;
  --tp-text-10: #767676;
  --tp-border-secondary: #812efa;
  font-family: var(--tp-ff-body);
  font-size: 16px;
  font-weight: 400;
  color: var(--tp-text-body);
  line-height: 30px;
}

.payera-editor-content .tp-service-detils-area a{
  text-decoration: none;
}

.payera-editor-content .tp-service-detils-area h1,
.payera-editor-content .tp-service-detils-area h2,
.payera-editor-content .tp-service-detils-area h3,
.payera-editor-content .tp-service-detils-area h4,
.payera-editor-content .tp-service-detils-area h5,
.payera-editor-content .tp-service-detils-area h6{
  font-family: var(--tp-ff-heading);
  color: var(--tp-heading-primary);
  margin-top: 0;
  font-weight: 700;
  line-height: 1.2;
}

.payera-editor-content .tp-service-detils-area ul{
  margin: 0;
  padding: 0;
  list-style: none;
}

.payera-editor-content .tp-service-detils-area .fix{
  overflow: hidden;
}

.payera-editor-content .tp-service-detils-area .z-index-11{
  z-index: 11;
}

.payera-editor-content .tp-service-detils-area .p-relative{
  position: relative;
}

.payera-editor-content .tp-service-detils-area .pt-120{
  padding-top: 120px;
}

.payera-editor-content .tp-service-detils-area.pt-120{
  padding-top: 40px;
}

.payera-editor-content .tp-service-detils-area.pb-100{
  padding-bottom: 40px;
}

.payera-editor-content .tp-service-detils-area .mb-20{
  margin-bottom: 20px;
}

.payera-editor-content .tp-service-detils-area .mb-30{
  margin-bottom: 30px;
}

.payera-editor-content .tp-service-detils-area .mb-35{
  margin-bottom: 35px;
}

.payera-editor-content .tp-service-detils-area .mb-50{
  margin-bottom: 50px;
}

.payera-editor-content .tp-service-detils-area .mb-60{
  margin-bottom: 60px;
}

.payera-editor-content .tp-service-detils-area .ml-35{
  margin-left: 0;
}

@media (min-width: 1200px) {
  .payera-editor-content .tp-service-detils-area .ml-35{
    margin-left: 35px;
  }
}

.payera-editor-content .tp-header-btn{
  display: inline-flex;
  justify-content: center;
  gap: 10px;
  border: none;
  outline: none !important;
  background-color: var(--tp-theme-primary, #00b7ff);
  color: var(--tp-common-white, #fff);
  font-size: 16px;
  font-weight: 700;
  padding: 18px 30px;
  line-height: 1;
  transition: 500ms;
  position: relative;
  overflow: hidden;
  text-align: center;
  z-index: 1;
  font-family: var(--tp-ff-heading, "Plus Jakarta Sans", sans-serif);
}

.payera-editor-content .tp-header-btn::before,
.payera-editor-content .tp-header-btn::after{
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 150%;
  height: 150%;
  transition: 700ms cubic-bezier(0.52, 1.64, 0.37, 0.66);
}

.payera-editor-content .tp-header-btn::before{
  top: -50%;
  border-top-left-radius: 50%;
  border-top-right-radius: 50%;
  background-color: var(--tp-text-9, #4ea3d8);
}

.payera-editor-content .tp-header-btn::after{
  bottom: 100%;
  border-bottom-left-radius: 50%;
  border-bottom-right-radius: 50%;
  background-color: var(--tp-heading-primary, #12062c);
}

.payera-editor-content .tp-header-btn span{
  position: relative;
  color: inherit;
  z-index: 2;
}

.payera-editor-content .tp-header-btn:hover{
  color: #fff;
}

.payera-editor-content .tp-header-btn:hover::before{
  top: 100%;
}

.payera-editor-content .tp-header-btn:hover::after{
  bottom: -50%;
}

@media (max-width: 991px) {
  .payera-editor-content .tp-service-details-wrapper{
    margin-left: 0;
    margin-top: 50px;
  }
}

.payera-editor-content .tp-service-details-box{
  background: var(--tp-common-gray2);
  padding: 30px 32px;
}

.payera-editor-content .tp-service-details-thumb img{
  width: 100%;
  max-width: 100%;
  height: auto;
  border-radius: 0;
  object-fit: cover;
}

.payera-editor-content .tp-service-details-box-title{
  font-size: 30px;
  margin-bottom: 44px;
}

.payera-editor-content .tp-service-details-price .tp-header-btn{
  padding: 18px 42px;
}

.payera-editor-content .tp-service-details-price{
  padding: 30px 0 0 30px;
  background: var(--tp-common-white);
}

.payera-editor-content .tp-service-details-price-thumb{
  margin-left: -22px;
  margin-top: 50px;
}

.payera-editor-content .tp-service-details-price-thumb img{
  max-width: none;
  width: auto;
  height: auto;
  object-fit: contain;
}

.payera-editor-content .tp-service-details-price-shape{
  position: absolute;
  bottom: -20px;
  right: -11px;
  z-index: -1;
}

.payera-editor-content .tp-service-details-pdf-title{
  font-size: 22px;
  font-weight: 800;
  margin-bottom: 38px;
}

.payera-editor-content .tp-service-details-pdf{
  background: var(--tp-common-white);
  padding: 22px 20px 18px 30px;
}

.payera-editor-content .tp-service-details-pdf-icon span{
  margin-right: 22px;
  display: inline-flex;
}

.payera-editor-content .tp-service-details-pdf-info span{
  font-size: 14px;
  color: var(--tp-text-10);
}

.payera-editor-content .tp-service-details-pdf-info p{
  color: var(--tp-heading-primary);
  font-weight: 700;
  font-family: var(--tp-ff-heading);
  margin-bottom: 0;
}

.payera-editor-content .tp-service-details-pdf-info a{
  color: inherit;
}

.payera-editor-content .tp-service-details-title{
  font-size: 36px;
  letter-spacing: -1px;
  margin-bottom: 22px;
}

@media (max-width: 767px) {
  .payera-editor-content .tp-service-details-title{
    font-size: 30px;
  }
}

.payera-editor-content .tp-service-details-wrapper p{
  color: var(--tp-text-10);
  margin-bottom: 50px;
}

.payera-editor-content .tp-service-details-icon-box:hover span{
  background: var(--tp-theme-primary);
}

.payera-editor-content .tp-service-details-icon-box:hover img{
  filter: brightness(0) invert(1);
}

.payera-editor-content .tp-service-details-icon-box span{
  width: 100px;
  height: 100px;
  display: inline-block;
  background: var(--tp-common-gray2);
  line-height: 100px;
  margin-bottom: 26px;
  transition: 0.4s;
}

.payera-editor-content .tp-service-details-icon-box img{
  transition: 0.4s;
  width: auto;
  max-width: 48px;
  height: auto;
}

.payera-editor-content .tp-service-details-icon-title{
  font-size: 20px;
  line-height: 32px;
}

.payera-editor-content .tp-service-details-title-2{
  font-size: 16px;
  line-height: 30px;
  background: var(--tp-common-white);
  filter: drop-shadow(0 4px 20px rgba(30, 22, 22, 0.08));
  padding: 28px 85px 28px 40px;
  margin-bottom: 62px;
}

@media (max-width: 767px) {
  .payera-editor-content .tp-service-details-title-2{
    font-size: 15px;
    padding: 40px 30px 38px;
  }
}

.payera-editor-content .tp-service-details-point:hover span::before{
  transform: scale(1);
}

.payera-editor-content .tp-service-details-point span{
  display: inline-block;
  flex: 0 0 auto;
  font-size: 30px;
  height: 60px;
  width: 60px;
  line-height: 60px;
  text-align: center;
  border-radius: 50%;
  color: var(--tp-common-white);
  background: var(--tp-theme-primary);
  margin-right: 30px;
  position: relative;
  transition: 0.4s;
  z-index: 1;
}

.payera-editor-content .tp-service-details-point span::before{
  content: "";
  position: absolute;
  inset: 0;
  transform: scale(0);
  background: var(--tp-heading-primary);
  z-index: -1;
  transition: 0.6s;
  border-radius: 50%;
}

.payera-editor-content .tp-service-details-point-title{
  font-size: 16px;
  line-height: 30px;
  color: var(--tp-text-10);
  font-weight: 400;
}

.payera-editor-content .tp-custom-accordion{
  position: relative;
  z-index: 2;
}

.payera-editor-content .tp-custom-accordion .accordion-items{
  margin-bottom: 20px;
  background-color: var(--tp-common-white);
  overflow: hidden;
  border-radius: 30px;
}

.payera-editor-content .tp-custom-accordion .accordion-header{
  margin: 0;
}

.payera-editor-content .tp-custom-accordion .accordion-buttons{
  position: relative;
  width: 100%;
  padding: 18px 90px 18px 78px;
  text-align: left;
  font-size: 16px;
  line-height: 24px;
  background-color: rgba(255, 255, 255, 0.5);
  color: var(--tp-common-black);
  font-weight: 700;
  font-family: var(--tp-ff-heading);
  border: 0;
  cursor: pointer;
  box-shadow: none;
}

.payera-editor-content .tp-custom-accordion .accordion-buttons:not(.collapsed){
  background-color: var(--tp-theme-primary);
  color: var(--tp-common-white);
}

.payera-editor-content .tp-custom-accordion .accordion-buttons:not(.collapsed)::after{
  color: var(--tp-heading-primary);
  background: var(--tp-common-white);
}

.payera-editor-content .tp-custom-accordion .accordion-buttons::after{
  position: absolute;
  content: "−";
  font-family: var(--tp-ff-heading);
  top: 18px;
  left: 32px;
  width: 25px;
  height: 25px;
  font-weight: 700;
  font-size: 16px;
  color: var(--tp-common-white);
  text-align: center;
  background: var(--tp-theme-primary);
  border-radius: 50px;
  line-height: 23px;
}

.payera-editor-content .tp-custom-accordion .accordion-buttons.collapsed::after{
  content: "+";
}

.payera-editor-content .tp-custom-accordion .accordion-body{
  background-color: var(--tp-common-white);
  padding: 23px 30px;
  font-weight: 400;
  font-size: 16px;
  line-height: 30px;
  color: #707480;
}

.payera-editor-content .tp-service-details-faq .tp-custom-accordion .accordion-items{
  border-radius: 0;
  filter: drop-shadow(0 0 30px rgba(29, 18, 46, 0.08));
  background-color: var(--tp-common-white);
}

.payera-editor-content .tp-service-details-faq .tp-custom-accordion .accordion-buttons:not(.collapsed),
.payera-editor-content .tp-service-details-faq .tp-custom-accordion .collapsed{
  border-radius: 0;
}

.payera-editor-content .tp-service-details-faq .accordion-body{
  padding: 23px 70px 23px 30px;
}