@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

.menu-list li {
    margin-bottom: 14px;
    margin-top: 2px;
}

/* CSS for the reveal animation */

.ts-sec {
  padding: 60px 10px !important;
}

.tst-sec {
  padding: 80px 10px 60px 10px;
}

.pts-vision .text-wrapper {
  margin-left: 12px;
}

.ts-section {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

.ts-section.trava-revealed {
  opacity: 1;
  transform: translateY(0);
}

.ts-plumber-mission span.tanvir-block-des {
    color: #102644;
}

.wp-block-group.ts-faq {
    border: 1px solid #ddd;
    border-radius: 7px;
    padding: 20px 30px;
    background: #fff;
}

.wp-block-group.ts-faq p {
    padding: 14px 0;
}

.ts-faq-slider .swiper-pagination {
    margin-bottom: 0px;
}

.ts-faq-slider .swiper-wrapper {
    padding-bottom: 60px;
}

.ts-faq-slider span.swiper-pagination-bullet.swiper-pagination-bullet-active {
    background: #101828d6;
}

.ts-faq-slider span.swiper-pagination-bullet {
    width: 15px;
    height: 6px;
    border-radius: 2px;
}

.tsp-service-box-slider-btn-img {
    margin-bottom: 20px;
}

.tsp-service-box-slider-btn-img figure.wp-block-image {
    width: 45px;
}

.ts-service-box-slider .swiper-pagination {
    margin-bottom: -10px;
}

.ts-service-box-slider .swiper-wrapper {
    padding-bottom: 35px;
}

.ts-service-box-slider span.swiper-pagination-bullet {
    width: 12px;
    height: 4px;
    border-radius: 3px;
    background: #101828;
}

ul.wp-block-navigation__container > li.wp-block-navigation-item a.wp-block-navigation-item__content {
    text-decoration: none;
}

.ts-privacy p, .ts-privacy ul.wp-block-list {
    padding-bottom: 10px;
}

/* FAQ for all site templates On  */

.wp-block-group.ts-faq-accordion {
    padding: 20px 40px;
    border-radius: 12px;
    margin: 50px 0;
}

.wp-block-group.ts-faq-accordion .wp-block-accordion-item {
    padding: 20px;
    background: #ffffff;
    border-radius: 8px;
    border: 1px solid #EBEBEB;
    margin: 20px 0;
}

.ts-faq-accordion h3.wp-block-accordion-heading, .wp-block-group.ts-faq-accordion span.wp-block-accordion-heading__toggle-title {
    text-decoration: none;
}

.ts-faq-accordion span.wp-block-accordion-heading__toggle-icon {
    background: #F5F5F5;
    border-radius: 200px;
    padding: 6px;
    margin-top: 0px;
    font-size: 30px;
}

.wp-block-tanvir-blocks-my-icon-img.ts-faqs-title-top {
    border: 1px solid #E2E8F0;
    border-radius: 66px;
    padding: 4px 12px;
    font-size: 14px;
}

/* FAQ for all site templates Off  */

.ts-privacy h2.wp-block-heading {
  padding: 10px 0;
}

.ts-privacy hr.wp-block-separator {
  padding-top: 15px;
  border-color: transparent;
}

.ts-privacy {
  padding: 0 20px 60px 20px;
}

.swiper-wrapper.tblock-hide-desktop .tsoft-service-box-content .tsp-service-box-slider-btn-img figure.wp-block-image {
  width: 40px;
}

.swiper-wrapper.tblock-hide-desktop .tsoft-service-box-content figure.wp-block-image {
  width: 15px;
  margin-top: 3px;
}

.ts-top-ps {
  padding-top: 80px !important;
  padding-bottom: 60px !important;
}

.ts-ptb {
  padding-top: 50px !important;
  padding-bottom: 50px !important;
}

.pts-contact-info .text-wrapper {
  margin-left: 20px;
  color: #101828;
}

.pts-contact-info .text-wrapper:hover {
  color: #1e40af;
}

.tse-footer-last-right-menu a {
  color: #cbd5e1;
  font-size: 12px;
  padding: 5px;
}

.tse-footer-last-right-menu a:hover {
  color: #ff6b00;
}

.tsoft-check-list .text-wrapper {
  margin-left: 10px;
}

p.ts-team-dec {
  min-height: 68px;
}

mark.has-inline-color {
  background: transparent;
}

.tsoft-white-cta-m span.tanvir-block-des {
  margin: 0 8px;
}

.ts-services-dec h2 {
  margin: 18px 0;
}

.ts-services-dec h3 {
  margin: 10px 0;
}

.ts-services-dec p {
  font-size: 16px;
  margin: 8px 0;
}

/* Mobile Navigation On */

.p-nav-wrap .wp-block-navigation .wp-block-navigation-submenu .wp-block-navigation-item:not(:last-child) {
  margin-bottom: 0;
}

.p-nav-wrap {
  width: 100%;
  font-family: inherit;
  background: #fff;
  overflow: hidden;
}

.p-nav-icons {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 6px 8px;
  cursor: pointer;
  user-select: none;
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  left: 0;
}

.p-nav-icons svg {
  flex-shrink: 0;
  transition: opacity 0.28s ease, transform 0.28s ease;
}

.p-nav-x {
  display: none;
  opacity: 0;
  transform: rotate(-90deg) scale(0.85);
}

.p-nav-wrap.active .p-nav-z {
  display: none;
}

.p-nav-wrap.active .p-nav-x {
  display: block;
  opacity: 1;
  transform: rotate(0deg) scale(1);
}

.p-nav-menu {
  overflow: hidden;
  transform: translateX(100%);
  transition: max-height 0.4s ease, opacity 0.3s ease, transform 0.3s ease;
  background: #ffffff;
  position: fixed;
  left: 0;
  top: 73px;
  z-index: 9;
  width: 100%;
  height: 100%;
}

.p-nav-wrap.active .p-nav-menu {
  transform: translateX(0);
  transition: max-height 0.4s ease, opacity 0.3s ease, transform 0.3s ease;
}

.p-nav-menu .wp-block-navigation {
  display: flex;
  flex-direction: column;
  gap: 0;
  align-items: stretch;
}

.p-nav-menu .wp-block-navigation-item {
  position: relative;
  width: 100%;
  border-bottom: 1px solid #e5e7eb;
}

.p-nav-menu .wp-block-navigation-item__content {
  display: block;
  width: 100%;
  padding: 12px 14px;
  color: #1f2937;
  text-decoration: none;
  font-size: 14px;
  line-height: 1.4;
  transition: background 0.25s ease, color 0.25s ease, padding-left 0.25s ease;
}

.p-nav-menu .wp-block-navigation-item__content:hover {
  background: #f8fafc;
  color: #0084D1;
  padding-left: 18px;
}

.p-nav-menu .wp-block-navigation__submenu-icon {
  transition: transform 0.3s ease;
}

.p-nav-menu .wp-block-navigation__submenu-container {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transform: translateY(-6px);
  transition: max-height 0.35s ease, opacity 0.28s ease, transform 0.28s ease;
  background: #f9fafb;
  padding: 0;
  margin: 0;
  border-top: 0;
  position: static !important;
  box-shadow: none !important;
  min-width: 100% !important;
  visibility: visible !important;
}

.p-nav-menu .wp-block-navigation-submenu.is-menu-open>.wp-block-navigation__submenu-container,
.p-nav-menu .wp-block-navigation-item.has-child.open-on-click.is-menu-open>.wp-block-navigation__submenu-container {
  max-height: 500px;
  opacity: 1;
  transform: translateY(0);
  /* transition added here for smooth open */
  transition: max-height 0.35s ease, opacity 0.28s ease, transform 0.28s ease;
}

.p-nav-menu .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
  padding-left: 28px;
  font-size: 13px;
}

.p-nav-menu .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
  padding-left: 32px;
}

/* Remove borders on sub-menu items */

.p-nav-menu .wp-block-navigation__submenu-container .wp-block-navigation-item {
  border-bottom: none;
}

.p-nav-wrap.active li.wp-block-navigation-item.has-child.open-on-click.wp-block-navigation-submenu {
  display: flex;
  flex-wrap: wrap;
}

.p-nav-wrap.active span.wp-block-navigation__submenu-icon {
  width: 40px !important;
}

.p-nav-wrap.active button.wp-block-navigation-item__content.wp-block-navigation-submenu__toggle {
  width: calc(100% - 40px);
  padding-left: 10px;
  font-size: 16px;
}

/* Sub menu slider like off canvas menu on */

.p-nav-menu li.wp-block-navigation-item.wp-block-navigation-submenu {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}

.p-nav-menu li.wp-block-navigation-item.wp-block-navigation-submenu button.wp-block-navigation__submenu-icon {
  width: 70px;
}

.p-nav-menu li.wp-block-navigation-item.wp-block-navigation-submenu>a.wp-block-navigation-item__content {
  width: calc(100% - 85px);
}

.p-nav-menu li.wp-block-navigation-item.has-child span.wp-block-navigation__submenu-icon svg {
  width: 20px;
  height: 20px;
  margin-top: -6px;
  transform: rotate(-90deg);
}

.p-nav-menu a.wp-block-navigation-item__content span.wp-block-navigation-item__label {
  color: #0f172a;
}

.electrician-header .p-nav-menu nav ul.wp-block-navigation__container li ul.wp-block-navigation__submenu-container.wp-block-navigation-submenu {
  background: #f8f8f8;
}

/* =========================
   OPEN SUB MENU PANEL
========================= */

.p-nav-wrap ul.wp-block-navigation__submenu-container.wp-block-navigation-submenu {
  height: auto;
  visibility: visible;
  overflow: visible;
  opacity: 1;
  height: 100%;
  height: 100vh;
  position: fixed !important;
  top: 0;
  transform: translateX(100%);
  transition: 0.4s;
  left: 0;
}

.p-nav-wrap.active ul.wp-block-navigation__submenu-container.wp-block-navigation-submenu.open-p-sub-menu {
  transform: translateX(0);
}

.p-nav-wrap.active ul.wp-block-navigation__submenu-container.wp-block-navigation-submenu.open-p-sub-menu li.p-nav-sub-header {
  padding: 12px;
  background: #ffe2cd;
  display: block;
}

.p-nav-wrap.active ul.wp-block-navigation__submenu-container.wp-block-navigation-submenu li a.wp-block-navigation-item__content {
  padding: 12px 14px;
  font-size: 14px;
}

.p-nav-wrap.active ul.wp-block-navigation__submenu-container.wp-block-navigation-submenu.open-p-sub-menu li.p-nav-sub-header span.wp-block-navigation__submenu-icon {
  padding: 0;
  margin: 0;
}

.p-nav-wrap.active ul.wp-block-navigation__submenu-container.wp-block-navigation-submenu.open-p-sub-menu li.p-nav-sub-header span.wp-block-navigation__submenu-icon svg {
  width: 22px;
  margin-right: 13px;
  height: 20px;
  float: left;
  margin-top: -10px;
  padding: 0;
  transform: rotate(90deg);
}

.p-nav-wrap.active ul.wp-block-navigation__submenu-container.wp-block-navigation-submenu.open-p-sub-menu li.p-nav-sub-header span.wp-block-navigation__submenu-icon span.wp-block-navigation-item__label {
  display: block;
  width: 100vw;
  font-size: 16px;
}

/* Sub menu slider like off canvas menu off */

/* Mobile Navigation Off */

/* Increase the bottom margin on submenus, so that the outline is visible. */

.wp-block-navigation .wp-block-navigation-submenu .wp-block-navigation-item:not(:last-child) {
  margin-bottom: 3px;
}

/* Increase the outline offset on the parent menu items, so that the outline does not touch the text. */

.wp-block-navigation .wp-block-navigation-item .wp-block-navigation-item__content {
  outline-offset: 4px;
}

/* Remove outline offset from the submenus, otherwise the outline is visible outside the submenu container. */

.wp-block-navigation .wp-block-navigation-item ul.wp-block-navigation__submenu-container .wp-block-navigation-item__content {
  outline-offset: 0;
}

/*
 * Progressive enhancement to reduce widows and orphans
 * https://github.com/WordPress/gutenberg/issues/55190
 */

h1,
h2,
h3,
h4,
h5,
h6,
blockquote,
caption,
figcaption,
p {
  text-wrap: pretty;
}

/*
 * Change the position of the more block on the front, by making it a block level element.
 * https://github.com/WordPress/gutenberg/issues/65934
*/

.more-link {
  display: block;
}

/*
 * Prevents unnecessary scrollbars while handling long lines of preformatted text.
 * https://core.trac.wordpress.org/ticket/63875
 */

:where(pre) {
  overflow-x: auto;
}

.wp-site-blocks .virza-none,
.wp-site-blocks .ts-none {
  display: none;
}

/* On Pagenation */

.virza-read-more .wp-block-post-excerpt__more-text,
.ts-read-more .wp-block-post-excerpt__more-text {
  margin: 16px auto;
}

.virza-read-more .wp-block-post-excerpt__more-text .wp-block-post-excerpt__more-link,
.ts-read-more .wp-block-post-excerpt__more-text .wp-block-post-excerpt__more-link {
  font-size: 14px;
}

/* Off Pagenation */

figure.wp-block-image.virza-img-100 img,
figure.wp-block-image.ts-img-100 img, .ts-img-100 a {
  width: 100%;
}

.ts--mission .tanvir-block-des {
  color: #0f172a;
}

.tsoft-service-box-content {
  padding: 40px 24px;
}

.tsoft-service-box-content .wp-block-group.is-content-justification-space-between.is-nowrap.is-layout-flex.wp-block-group-is-layout-flex {
  padding-bottom: 20px;
}

/* On about faq toggole */

.wp-block-group.virza-active {
  background-color: #f1f5f9;
  transition: 0.4s;
}

.wp-block-group.virza-on-off {
  opacity: 0;
  visibility: hidden;
  display: none;
  transition: 0.4s;
}

.wp-block-group.virza-active .wp-block-group.virza-on-off {
  opacity: 1;
  visibility: visible;
  transition: 0.4s;
  display: block;
}

.virza-active .virza-toggle img {
  transform: rotate(180deg);
  transition: 0.4s;
}

.virza-toggle img {
  transition: 0.4s;
}

.virza-toggle {
  cursor: pointer;
}

/* Off about faq toggle */

/* On navigation__responsive Sub Menu 
has-modal-open is-menu-open
*/

.wp-block-navigation__responsive-container.has-modal-open.is-menu-open li.wp-block-navigation-item.has-child>ul {
  opacity: 0;
  visibility: hidden;
  height: 0;
  transform: translateY(100%);
  transition: 0.4s;
}

.wp-block-navigation__responsive-container.has-modal-open.is-menu-open li.wp-block-navigation-item.has-child.open>ul {
  opacity: 1;
  visibility: visible;
  height: auto;
  transform: translateY(0px);
  transition: 0.4s;
}

.wp-block-navigation__responsive-container.has-modal-open.is-menu-open li.wp-block-navigation-item.has-child.wp-block-navigation-submenu>a.wp-block-navigation-item__content {
  position: relative;
  z-index: 1;
}

.wp-block-navigation__responsive-container.has-modal-open.is-menu-open li.wp-block-navigation-item.has-child.wp-block-navigation-submenu>a.wp-block-navigation-item__content:after {
  position: absolute;
  right: -20px;
  content: url("/wp-content/themes/travasoft-gas/assets/images/arrow-down.png");
}

.wp-block-navigation__responsive-container.has-modal-open.is-menu-open li.wp-block-navigation-item.has-child.wp-block-navigation-submenu>a {
  padding: 0.5em;
}

.wp-block-navigation__responsive-container.has-modal-open.is-menu-open ul li a {
  color: #101828;
}

/* Off navigation__responsive Sub Menu */

/* On Contact from 7 style adjustment On */

.tsoft-cf-wrap {
  background: #F1F5F9;
  border: 1px solid #D1D5DC;
  border-radius: 24px;
  padding: 24px;
}

.tsoft-cf-wrap br {
  display: none;
}

.tsoft-cf-wrap .tsoft-cf-input-group span.wpcf7-form-control-wrap {
  display: block;
}

.tsoft-cf-wrap .tsoft-cf-input-group p {
  display: flex;
}

.tsoft-cf-wrap span.wpcf7-form-control-wrap {
  display: block;
  margin-top: 6px;
}

.tsoft-cf-wrap span.wpcf7-form-control-wrap input.wpcf7-form-control {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid #D1D5DC;
  border-radius: 12px;
  padding: 12px 20px;
  font-size: 14px;
}

.tsoft-cf-wrap label {
  margin: 0 8px;
}

.tsoft-cf-wrap .tsoft-cf-input-single label {
  width: 100%;
}

select.wpcf7-form-control.wpcf7-select {
  width: 94%;
  border: 2px solid #ddd;
  padding: 12px 20px;
  border-radius: 30px;
  color: #4A5565;
  font-size: 14px;
  font-weight: 400;
}

textarea.wpcf7-form-control.wpcf7-textarea {
  width: 94%;
  box-sizing: border-box;
  height: 93px;
  border: 2px solid #ddd;
  border-radius: 50px;
  font-size: 14px;
  padding: 36px 20px;
}

select:focus.wpcf7-form-control.wpcf7-select.wpcf7-validates-as-required {
    background: #fff;
    border-color: #F4C541;
}

textarea:focus.wpcf7-form-control.wpcf7-textarea {
    background: #fff;
    border-color: #F4C541;
}

.tsoft-cf-wrap input.wpcf7-form-control.wpcf7-submit.has-spinner {
  width: 100%;
  border-radius: 12px;
  padding: 16px;
  font-size: 16px;
  background: #101828;
  color: #ffffff;
  cursor: pointer;
  transition: 0.4s;
}

.tsoft-cf-wrap>p {
  margin: 0 8px;
}

.tsoft-cf-wrap input.wpcf7-form-control.wpcf7-submit.has-spinner:hover {
  background: #FF0030;
}

.tsoft-cf-wrap label {
  font-size: 16px;
  color: #101828;
}

.tsoft-cf-input-single p {
  display: flex;
}

/* On Contact from 7 style adjustment The End */

/* Desktop & Tablet Layout: 768-1920 */

@media only screen and (min-width: 768px) {
  ul.wp-block-navigation__container > li.wp-block-navigation-item > a.wp-block-navigation-item__content {
    text-decoration: none;
    padding: 4px 8px;
    border-radius: 9px;
    transition: 0.3s;
  }

  ul.wp-block-navigation__container > li.wp-block-navigation-item > a.wp-block-navigation-item__content:hover {
    color: #ffffff;
    transition: 0.3s;
    background: #3b4af1
  }

  .swiper-c1 .swiper-wrapper, .swiper-c2 .swiper-wrapper, .swiper-c3 .swiper-wrapper, .swiper-c4 .swiper-wrapper {
    display: grid !important;
    gap: 15px;
    transform: none !important;
    width: 100% !important;
  }

  .swiper-c1 .swiper-wrapper {
    grid-template-columns: repeat(1, 1fr);
  }
  .swiper-c2 .swiper-wrapper {
    grid-template-columns: repeat(2, 1fr);
  }
  .swiper-c3 .swiper-wrapper {
    grid-template-columns: repeat(3, 1fr);
  }
  .swiper-c4 .swiper-wrapper {
    grid-template-columns: repeat(4, 1fr);
  }

  .swiper-c1 .swiper-slide,
  .swiper-c2 .swiper-slide,
  .swiper-c3 .swiper-slide,
  .swiper-c4 .swiper-slide {
    width: auto !important;
    margin: 0 !important;
    min-width: 0 !important;
    height: auto !important;
  }

  .swiper-c1 .swiper-pagination.swiper-pagination,
  .swiper-c1 .swiper-button-prev,
  .swiper-c1 .swiper-button-next,
  .swiper-c2 .swiper-pagination.swiper-pagination,
  .swiper-c2 .swiper-button-prev,
  .swiper-c2 .swiper-button-next,
  .swiper-c3 .swiper-pagination.swiper-pagination,
  .swiper-c3 .swiper-button-prev,
  .swiper-c3 .swiper-button-next,
  .swiper-c4 .swiper-pagination.swiper-pagination,
  .swiper-c4 .swiper-button-prev,
  .swiper-c4 .swiper-button-next {
    display: none;
  }
}

/* Desktop Layout: 1025 < */

@media only screen and (min-width:1025px) {

  .wp-site-blocks .virza-none-d,
  .ts-none-d {
    display: none !important;
  }
}

/* Tablet Layout: 1024 => 768px */

@media only screen and (min-width:768px) and (max-width:1024px) {

  .pts-contact-info .text-wrapper {
    margin-left: 10px;
  }

  .pts-contact-info .text-wrapper span.tanvir-block-des {
    font-size: 16px !important;
  }

  .pts-contact-info {
    margin-bottom: 24px !important;
  }

  .tsoft-white-cta-m h2 {
    padding-bottom: 20px;
  }

  .tsoft-white-cta-m {
    padding: 24px !important;
  }

  .tsoft-white-cta-m .icon-text-wrapper {
    flex-direction: column !important;
  }

  .tsoft-white-cta-m .icon-text-wrapper .icon-container {
    border: 0;
  }

  .tsoft-white-cta-m .icon-text-wrapper .text-wrapper {
    text-align: center !important;
  }

  .tsoft-white-cta-m .icon-text-wrapper .icon-container img {
    transform: rotate(90deg);
  }

  .wp-site-blocks .virza-none-d,
  .ts-none-d {
    display: none !important;
  }

  .wp-block-group.plumber-header {
    margin: 0 10px;
  }

  .ts-p10-t,
  .ts-p10-tm {
    padding: 10px 20px;
  }
  .wp-block-group.ts-faqs {
    padding: 0 20px;
  }
}

/* Mobile Layout: 767px => 360px */

@media (max-width:767px) {

  .tsoft-cta h3.wp-block-heading {
    text-align: center;
  }

  .tsoft-cta .wp-block-group.virza-t-center-m {
    justify-content: center;
    margin-top: 16px;
  }

  .ts-sec {
    padding: 30px 20px !important;
  }

  .tst-sec {
    padding: 60px 20px 30px 20px;
  }

  .tsoft-white-cta-m h2 {
    padding-bottom: 20px;
  }

  .tsoft-white-cta-m {
    padding: 24px !important;
  }

  .tsoft-white-cta-m .icon-text-wrapper {
    flex-direction: column !important;
  }

  .tsoft-white-cta-m .icon-text-wrapper .icon-container {
    border: 0;
  }

  .tsoft-white-cta-m .icon-text-wrapper .text-wrapper {
    text-align: center !important;
  }

  .tsoft-white-cta-m .icon-text-wrapper .icon-container img {
    transform: rotate(90deg);
  }

  .tsoft-white-cta-m .wp-block-group.ts-service {
    text-align: center;
    margin-top: 20px;
  }

  .ts-top-ps {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
  }

  .ts-ptb {
    padding-top: 30px !important;
    padding-bottom: 30px !important;
  }

  .pts-contact-info .text-wrapper {
    margin-left: 10px;
  }

  .pts-contact-info .text-wrapper span.tanvir-block-des {
    font-size: 16px !important;
  }

  .pts-contact-info {
    margin-bottom: 24px !important;
  }

  .single-post main .wp-block-group:nth-child(1),
  .single-post .wp-block-query {
    padding: 0 20px !important;
  }

  .single-post .wp-block-columns.tsoft-cta {
    margin: 0 20px !important;
  }


  .wp-site-blocks .virza-none-m,
  .ts-none-m {
    display: none !important;
  }

  .wp-site-blocks .virza-c1-m,
  .wp-site-blocks .ts-c1-m {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }

  .wp-site-blocks .virza-c2-m,
  .wp-site-blocks .ts-c2-m {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .wp-site-blocks .virza-t-center-m,
  .wp-site-blocks .ts-t-center-m {
    text-align: center;
    padding: 0;
  }

  .virza-flex-col-m,
  .ts-flex-col-m {
    flex-direction: column;
    min-height: unset !important;
    padding: 20px 0;
  }

  .wp-block-group.virza-white-m,
  .wp-block-group.ts-white-m {
    background: #f8fafc !important;
  }

  .wp-block-group.virza-white-m p,
  .wp-block-group.ts-white-m p {
    color: #1E2939 !important;
  }

  .wp-block-group.virza-white-m ul li a {
    color: #1E2939 !important;
  }

  .wp-block-group.plumber-header {
    margin: 0 10px;
  }
  .wp-block-group.ts-faq {
    padding: 14px 20px;
  }
  .ts-faq-slider .swiper-button-prev,
  .ts-faq-slider .swiper-button-next {
    display: none;
  }
  .ts-p10-tm {
    padding: 10px 20px;
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  .tsoft-service-box-content {
    padding: 20px 16px;
  }

  .tsoft-service-box-content .wp-block-group.is-content-justification-space-between.is-nowrap.is-layout-flex.wp-block-group-is-layout-flex {
    padding-bottom: 14px;
  }

  .tsoft-cf-wrap {
    padding: 32px 4px;
  }

  .tsoft-cf-wrap .tsoft-cf-input-group p {
    display: flex;
    flex-direction: column;
  }

  .tsoft-cf-wrap .tsoft-cf-input-group label:nth-child(1) {
    margin-bottom: 10px;
  }

  .tsoft-cf-wrap label {
    font-size: 14px;
  }

  nav .wp-block-navigation__responsive-container {
    right: 120%;
    top: 0;
    transform: translateX(100%);
    transition: 0.4s;
    opacity: 0;
    display: inherit;

  }
  .wp-block-navigation__responsive-container.has-modal-open.is-menu-open {
    right: 0;
    top: 0;
    transform: translateX(0);
    opacity: 1;
    transition: 0.4s;
  }
  .wp-block-group.ts-faq {
    padding: 14px 20px;
  }

  .ts-faq-slider .swiper-button-prev,
  .ts-faq-slider .swiper-button-next {
    display: none;
  }

  .ts-p10-tm {
    padding: 10px 20px;
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  .wp-block-columns.ts-col-re-m {
		flex-direction: column-reverse;
	}
  /* FAQ for all site templates On */
  .wp-block-group.ts-faq-accordion {
    padding: 0px 10px;
    margin: 30px 0px;
  }
  .wp-block-group.ts-faq-accordion .wp-block-accordion-item {
    padding: 10px;
    margin: 10px 0;
  }
  .wp-block-group.ts-faqs {
    padding: 0 20px;
  }
  .ts-faq-accordion span.wp-block-accordion-heading__toggle-icon {
    font-size: 20px;
  }
  /* FAQ for all site templates Off */
	
 /* ==On contact from== */
 select.wpcf7-form-control.wpcf7-select {
  width: 109%;
 }
 textarea.wpcf7-form-control.wpcf7-textarea {
  width: 109%;
 }
 /* ==Off contact from== */

}


/* ============================================================
   Source: ts.css
   ============================================================ */


/* ============================================================
   Travasoft TS — Main Stylesheet
   ============================================================ */

body p {
  color: #334155;
  line-height: 160%;
}

.ts-footer figure.wp-block-image.size-large {
    width: 190px;
    margin-left: 0 !important;
}

/* ============================================================
   Utility Classes
   ============================================================ */

.ts-none-m { display: block; }

.ts-none-d { display: none; }

.ts-img-100 { width: 100%; }

.ts-img-100 img { width: 100%; height: auto; display: block; }

.ts-center { text-align: center; display: flex; justify-content: center; }

.wp-block-tanvir-blocks-my-icon-img.ts-btn-outline a.icon-text-wrapper {
    border: 1px solid #3f5dec;
    transition: 0.3s;
}

.wp-block-tanvir-blocks-my-icon-img.ts-btn-outline a.icon-text-wrapper:hover {
    background: #ffffff;
    color: #3b4af1;
    transition: 0.3s;
}

.wp-block-tanvir-blocks-my-icon-img.ts-btn-outline a.icon-text-wrapper span.tanvir-block-des {
    color: #ffffff;
    transition: 0.3s;
}

.wp-block-tanvir-blocks-my-icon-img.ts-btn-outline a.icon-text-wrapper:hover span.tanvir-block-des {
    color: #3b4af1;
    transition: 0.3s;
}

.wp-block-tanvir-blocks-my-icon-img.ts-btn-outline a.icon-text-wrapper .icon-container svg {
    fill: #ffffff;
    transition: 0.3s;
}

.wp-block-tanvir-blocks-my-icon-img.ts-btn-outline a.icon-text-wrapper:hover .icon-container svg {
    fill: #3b4af1;
    transition: 0.3s;
    transform: rotate(-45deg);
}

.ts-btn-fee a.icon-text-wrapper {
    padding: 7px 16px;
    border-radius: 25px;
    background: #3f5dec;
}

/* ============================================================
   Section Base
   ============================================================ */

.tsa-why-choose li {
    margin: 0;
    padding: 20px !important;
    font-size: 18px;
    background: #e5e8f9;
    border-radius: 12px;
    box-shadow: 4px 4px 0px #3b5af1;
    margin: 25px;
}

.wp-block-group.ts-section {
  padding: 100px 10px;
}

.wp-block-group.tse-title {
  margin-bottom: 0;
}

.wp-block-group.tse-title h2 {
  margin-bottom: 16px;
}

.wp-block-group.tse-title mark {
  background-color: transparent !important;
}

.tse-title mark.has-inline-color,
.ts-hs1 mark.has-inline-color {
  background: linear-gradient(to right, #1e40af, #3b82f6);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: #1e40af;
}

.count-number h2 {
  background: linear-gradient(to bottom, #3B5AF1, #0E207A);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: #3B5AF1;
}

.ts-stats-sec .wp-block-group.trava-stats-section {
    display: flex;
    align-items: center;
}

.ts-stats-sec .wp-block-group.count-number:nth-child(1) h2 {
    margin-top: 20px;
}

p.ts-about-pa {
    margin-top: 20px;
}

.gradient-404 {
  background: linear-gradient(to bottom, #010B3E, #3B5AF1);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: #3B5AF1;
}

/* ============================================================
   TS Header
   ============================================================ */

/* Off navigation__responsive Sub Menu ts-header */

.ts-header.is-stuck{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  background-color: #f8fafc;
  box-shadow: 0 -1px 7px #8f909d;
  transition: 0.4s;
}

.ts-header a.wp-block-navigation-item__content {
  text-decoration: none;
  transition: color 0.3s;
  color: #0f172a;
  font-weight: 500;
}

.ts-header li.wp-block-navigation-item:hover > a.wp-block-navigation-item__content {
  color: #1e40af;
}

.ts-header li.wp-block-navigation-item.current-menu-item > a.wp-block-navigation-item__content {
  color: #1e40af;
}

/* Mobile nav toggle */

.ts-mobile-nav-toggle button {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
}

.ts-mobile-menu {
  display: none;
  background: #ffffff;
  border-top: 1px solid #e2e8f0;
  padding: 16px 20px;
}

.ts-mobile-menu.is-open {
  display: block;
}

/* ============================================================
   TS Button Styles
   ============================================================ */

/* Electrician Section The End */

a.tse-call-wrap {
  background: #3b5af1;
  padding: 10px 16px;
  border-radius: 12px;
  color: #fff;
  font-size: 16px;
  font-weight: 500;
  position: relative;
}

a.tse-call-wrap span.tse-icon {
  position: relative;
  z-index: 1;
  width: 28px;
  display: inline-block;
}

a.tse-call-wrap span.tse-icon svg {
  position: absolute;
}

a.tse-call-wrap span.tse-icon svg.icon-1 {
  top: -19px;
}

a.tse-call-wrap span.tse-icon svg.icon-2 {
  top: -16px;
}

a.tse-icon-wrap {
  font-size: 16px;
  padding: 10px 16px;
  border: 1px solid #1F3A8A;
  border-radius: 12px;
  margin-left: 16px;
}

a.tse-icon-wrap svg {
  top: 16px;
  margin-bottom: -6px;
  margin-right: 10px;
}

/* Electrician Speak To An Electrician btn The End */

/* ts_button shortcode buttons */

.ts-button-call,
.ts-button-quote,
.ts-button-book,
.ts-button-emergency {
  border-radius: 24px !important;
/*   font-weight: 600 !important; */
  transition: 0.3s !important;
  opacity: 1;
}

.ts-btn-only-h {
    background: #3b4af1;
    padding: 12px 20px;
    font-size: 16px;
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    gap: 8px;
}

.ts-button-call:hover,
.ts-button-quote:hover {
  opacity: 0.9;
}

/* ============================================================
   HS1 — Hero Section
   ============================================================ */

.ts-hs1 {
  padding-top: 90px !important;
  padding-bottom: 86px !important;
}

.ts-hs1 > h1.wp-block-heading {
  max-width: 1160px;
  margin: 0 auto 20px;
  font-size: clamp(2.35rem, 4.45vw, 4.1rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: #0f172a;
}

.ts-hs1 h1 mark {
  background: linear-gradient(to right, #2c4cd9, #4367ff);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.ts-hs1 > p.has-text-align-center {
  max-width: 1160px;
  margin: 0 auto;
  color: #0f172a;
  font-size: 1.05rem;
  line-height: 1.7;
}

.ts-hs1 > .wp-block-group {
  margin-top: 28px;
  margin-bottom: 44px;
}

.ts-hs1 > .wp-block-group .wp-block-group {
  gap: 14px;
}

.ts-hs1 a.tse-call-wrap,
.ts-hs1 a.ts-button-call {
    padding: 14px 12px;
    border-radius: 999px;
    background: #3558ef;
    font-size: 20px;
    font-weight: 500;
    text-decoration: none;
    box-shadow: 0 8px 22px rgba(53, 88, 239, 0.25);
}

.ts-hs1 a.tse-icon-wrap,
.ts-hs1 a.ts-button-quote,
.ts-hs1 a.ts-button-book {
    padding: 14px 16px;
    border-radius: 999px;
    border: 1px solid #a9b8ea;
    color: #3558ef;
    font-size: 20px;
    font-weight: 500;
}

.ts-hs1 a.tse-call-wrap span.tse-call-text {
    display: inline-flex;
    flex-direction: row;
    align-content: center;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-left: 20px;
}

.ts-hs1 a.tse-call-wrap span.tse-call-text span.ts1-btn-text {
    margin-top: -3px;
}

.ts-hs1 a.tse-call-wrap span.tse-icon {
    top: 10px;
}

.ts-hs1 a.tse-icon-wrap span + svg {
    margin-left: 10px;
}

.ts-hs1 .wp-block-tanvir-blocks-my-slider.swiper {
  width: 100%;
  overflow: hidden;
  padding-bottom: 34px;
}

.ts-hs1 .wp-block-tanvir-blocks-slide.swiper-slide figure.wp-block-image img {
    margin-bottom: -40px;
}

.ts-hs1 .swiper-slide {
  height: auto;
}

.ts-hs1 .swiper-slide .ts-hs1-img {
  margin: 0;
  overflow: hidden;
  background: #ffffff;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
}

.ts-hs1 .ts-hs1-img img {
  width: 100%;
  height: auto;
  display: block;
}

.ts-hs1 .ts-hs1-img-offset {
  margin-top: 14px;
}

.ts-hs1 .swiper-pagination {
  position: static;
  margin-top: 18px;
}

.ts-hs1 .swiper-pagination-bullet {
  width: 24px;
  height: 4px;
  border-radius: 999px;
  background: #c8d4ea;
  opacity: 1;
}

.ts-hs1 .swiper-pagination-bullet-active {
  background: #4b67f6;
}

.ts-hs1 .swiper-button-prev,
.ts-hs1 .swiper-button-next {
  display: none !important;
}

.hs1-2btn-wrap a.hs1-btn {
    display: flex;
    align-content: center;
    justify-content: center;
    align-items: center;
    gap: 12px;
    border: 1px solid #3B5AF1;
    padding: 8px 14px;
    border-radius: 99px;
    margin: 5px;
    color: #3B5AF1;
    font-size: 20px;
}

.hs1-2btn-wrap a.hs1-btn svg {
    margin-bottom: -7px;
}

.hs1-2btn-wrap {
    display: flex;
}

.hs1-2btn-wrap  a.hs1-btn.ts-btn1 {
    background: #3B5AF1;
    color: #fff;
}

.hs1-2btn-wrap a.hs1-btn.ts-btn1 span.hs1-btn-text {
    margin-top: -6px;
}

.hs1-2btn-wrap a.hs1-btn.ts-btn1 span.hs1-btn-img {
    margin-bottom: -6px;
}

/* ---------- 1. TRUST BADGE LINE ---------- */

.trust-line{
    display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px;
    max-width:840px;margin:30px auto 0;padding:0 24px;
    text-align:center;font-size:1.02rem;color:#0f172a;
  }

.trust-line .bolt{
    display:inline-flex;align-items:center;justify-content:center;
    width:30px;height:30px;border-radius:9px;margin-right:4px;
    background:linear-gradient(135deg,#5b78ff 0%,#2f4ee6 100%);color:#fff;box-shadow:0 6px 14px rgba(47,78,230,.35);
  }

.trust-line .pill{
    display:inline-block;font-weight:700;color:#3b5af1;
    background:#eef1ff;border:1px solid #dce2fb;
    padding:2px 12px;border-radius:999px;margin:0 3px;
  }

/* ---------- 3. TRUST STRIP ---------- */

.strip-band{background:linear-gradient(180deg,#f4f6ff 0%,#eef1ff 100%);border-top:1px solid #e3e8fb;}

.strip{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;padding:100px 24px;max-width:1180px;margin:0 auto;}

.feat{
    background:#fff;border:1px solid var(--border);border-radius:16px;padding:22px 20px;
    box-shadow:0 8px 22px rgba(17,26,75,.06);transition:transform .25s ease, box-shadow .25s ease;
  }

.feat:hover{transform:translateY(-6px);box-shadow:0 18px 40px rgba(17,26,75,.13);}

.feat .ic{
    width:42px;height:42px;border-radius:12px;display:flex;align-items:center;justify-content:center;
    background:linear-gradient(135deg,#5b78ff 0%,#2f4ee6 100%);box-shadow:0 8px 18px rgba(47,78,230,.30);margin-bottom:14px;
  }

.feat .ic svg{width:21px;height:21px;stroke:#fff;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}

.feat h4{margin:0 0 5px;font-size:.98rem;font-weight:800;color:var(--ink);letter-spacing:-.01em;}

.feat p{margin:0;font-size:.86rem;color:#5a6478;}

/* =========================
   TS HS2 - SPECIALISTS On
   ========================= */

.ts-hs2 {
  padding: 88px 20px !important;
  background: #eceff4 !important;
}

.ts-hs2 .ts-title {
  max-width: 900px;
  margin: 0 auto 44px !important;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* ==On trust== */

.ts-section-1 .wp-block-tanvir-blocks-my-icon-img.has-14-px-font-size {
    padding: 7px 14px;
    border: 1px solid #d8deea;
    border-radius: 999px;
    background: #f5f7fb;
}

/* ==Off trust== */

.ts-hs2 .ts-title > .wp-block-tanvir-blocks-my-icon-img .icon-text-wrapper {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px;
  padding: 7px 14px;
  border: 1px solid #d8deea;
  border-radius: 999px;
  background: #f5f7fb;
}

.ts-hs2 .ts-title > .wp-block-tanvir-blocks-my-icon-img .tanvir-block-des {
  color: #0f172a;
  font-size: 13px !important;
}

.ts-hs2 .wp-block-heading.has-x-large-font-size {
  margin: 0;
  font-size: clamp(2rem, 4.1vw, 3.2rem);
  line-height: 1.16;
  letter-spacing: -0.02em;
  color: #0f172a !important;
}

.ts-hs2 .has-small-font-size {
  max-width: 900px;
  margin: 0 auto;
  color: #475569 !important;
  font-size: 1.06rem;
  line-height: 1.62;
}

.ts-hs2 .wp-block-tanvir-blocks-my-slider.swiper {
  width: 100%;
  max-width: 1180px;
  overflow: hidden;
}

.ts-hs2 .swiper-wrapper {
  align-items: stretch;
}

.ts-hs2 .swiper-slide {
  height: auto;
}

.ts-hs2-card .wp-block-group {margin-left: inherit !important;}

.ts-hs2-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 180px;
  padding: 18px 16px;
  border: 1px solid #d2d9e4;
  border-radius: 12px;
  background: #f8fafc;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
  transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease, background-color 0.25s ease;
}

.ts-hs2-card h3 {
  margin: 14px 0 8px !important;
  color: #0f172a !important;
  font-size: 18px !important;
  line-height: 1.3;
}

.ts-hs2-card p,
.ts-hs2-card p.has-text-color {
  margin: 0;
  color: #64748b !important;
  font-size: 14px !important;
  line-height: 1.58;
}

.ts-hs2-card .wp-block-tanvir-blocks-my-icon-img {
  margin-top: auto;
  padding-top: 12px;
  margin-left: 0 !important;
}

.ts-hs2-card a.icon-text-wrapper {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 8px;
  margin-top: 0;
  text-decoration: none;
}

.ts-hs2-card a.icon-text-wrapper .tanvir-block-des {
  color: #3658ed;
  font-size: 14px !important;
  font-weight: 600;
}

.ts-hs2-card a.icon-text-wrapper .icon-container {
  padding-left: 0;
  margin-bottom: 0;
}

.ts-hs2-card a.icon-text-wrapper .icon-container svg {
  fill: #3658ed;
}

.ts-hs2-icon {
  margin: 0 !important;
}

.ts-hs2-icon img {
  width: 34px !important;
  height: 34px;
  object-fit: contain;
}

.ts-hs2-card:hover {
  border-color: #3d58ec;
  box-shadow: 0 8px 24px rgba(61, 88, 236, 0.26);
  transform: translateY(-2px);
  background: #3d58ec;
  text-align: center;
  transition: 0.3s;
}

.ts-hs2-card:hover .ts-hs2-icon {
  opacity: 0;
  visibility: hidden;
}

.ts-hs2-card:hover h3,
.ts-hs2-card:hover p,
.ts-hs2-card:hover p.has-text-color {
  color: #ffffff !important;
}

.ts-hs2-card:hover .wp-block-tanvir-blocks-my-icon-img {
  margin-top: 14px;
  padding-top: 0;
  width: 100%;
}

.ts-hs2-card:hover a.icon-text-wrapper {
  justify-content: center !important;
  width: 100%;
  max-width: 170px;
  margin: 0 auto;
  border-radius: 30px;
  background: #ffffff;
  padding: 4px;
  transition: 0.3s;
}

.ts-hs2-card .wp-block-tanvir-blocks-my-icon-img .icon-container img {
    transform: rotate(45deg);
    transition: 0.3s;
    margin-bottom: -7px;
}

.ts-hs2-card:hover .wp-block-tanvir-blocks-my-icon-img .icon-container img {
    transform: rotate(0deg);
    transition: 0.3s;
}

.ts-hs2-card:hover a.icon-text-wrapper .tanvir-block-des {
  color: #3558ef;
}

.ts-hs2-card:hover a.icon-text-wrapper .icon-container svg {
  fill: #3558ef;
}

.ts-hs2 .swiper-pagination {
  position: static;
  margin-top: 16px;
}

.ts-hs2 .swiper-pagination-bullet {
  width: 18px;
  height: 4px;
  border-radius: 999px;
  background: #c9d3e7;
  opacity: 1;
}

.ts-hs2 .swiper-pagination-bullet-active {
  background: #4361ee;
}

.ts-hs2 .swiper-button-prev,
.ts-hs2 .swiper-button-next {
  display: none !important;
}

.ts-hs2 .ts-center {
  margin-top: 34px !important;
}

.ts-hs2 .ts-btn-outline .icon-text-wrapper {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px;
  min-height: 48px;
  padding: 0 24px;
  border-radius: 999px;
  background: #3f5dec;
  color: #ffffff;
  text-decoration: none;
}

.ts-hs2 .ts-btn-outline .tanvir-block-des,
.ts-hs2 .ts-btn-outline svg {
  color: #ffffff;
  fill: #ffffff;
}

.wp-block-tanvir-blocks-my-slider .swiper-slide .ts-hs2-card .wp-block-image > img,
.wp-block-tanvir-blocks-my-slider .swiper-slide .ts-hs4-card .wp-block-image > img {
  margin-inline: inherit !important;
}

/* =========================
   TS HS2 - SPECIALISTS Off
   ========================= */

/* =========================
   TS HS4 - DIGITAL SOLUTIONS On
   ========================= */

.ts-hs4 {
  padding: 80px 20px;
  background: #ffffff !important;
}

.ts-hs4 .tse-title {
  max-width: 760px;
  margin: 0 auto 42px !important;
  text-align: center;
}

.ts-hs4 .tse-title > .wp-block-tanvir-blocks-my-icon-img .icon-text-wrapper {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px;
  padding: 7px 14px;
  border: 1px solid #dce5ef;
  border-radius: 999px;
  background: #f7fafc;
}

.ts-hs4 .tse-title > .wp-block-tanvir-blocks-my-icon-img .tanvir-block-des {
  font-size: 13px !important;
  color: #64748b;
}

.ts-hs4 .wp-block-heading.has-x-large-font-size {
  margin: 0;
  font-size: clamp(2rem, 4vw, 3.2rem);
  line-height: 1.16;
  letter-spacing: -0.02em;
  color: #0f172a !important;
}

.ts-hs4 .has-small-font-size {
  max-width: 660px;
  margin: 0 auto;
  font-size: 1.06rem;
  line-height: 1.62;
  color: #475569 !important;
}

.ts-hs4 .wp-block-tanvir-blocks-my-slider.swiper {
  width: 100%;
  overflow: hidden;
}

.ts-hs4 .swiper-wrapper {
  align-items: stretch;
}

.ts-hs4 .swiper-slide {
  height: auto;
}

.ts-hs4-card {
  background: #f9fbfc;
  border: 1px solid #d4dee8;
  border-radius: 14px;
  padding: 16px 14px;
  height: 100%;
  transition: background-color 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
  box-shadow: 1px 1px 2px 1px #3737371C;
}

.ts-hs4-card .wp-block-image {
    padding-bottom: 20px;
}

.ts-hs4-card:hover {
  background: #f1f5f9;
  border-color: #c8d4e2;
  transform: translateY(-3px);
}

.ts-hs4-card .ts-hs2-icon {
  margin: 0 0 14px !important;
}

.ts-hs4-card h3 {
  margin: 0 0 8px !important;
  font-size: 18px !important;
  line-height: 1.32;
  color: #0f172a;
}

.ts-hs4-card p {
  margin: 0 0 12px;
  font-size: 14px !important;
  line-height: 1.5;
  color: #64748b !important;
}

.ts-hs4-card .wp-block-tanvir-blocks-my-icon-img {
  margin-bottom: 6px;
}

.ts-hs4-card .wp-block-tanvir-blocks-my-icon-img .icon-text-wrapper {
  gap: 8px;
}

.ts-hs4-card .wp-block-tanvir-blocks-my-icon-img .tanvir-block-des {
  font-size: 13px !important;
  color: #64748b;
  line-height: 1.4;
}

.ts-hs4 .swiper-pagination {
  position: static;
  margin-top: 14px;
}

.ts-hs4 .swiper-pagination-bullet {
  width: 16px;
  height: 3px;
  border-radius: 999px;
  background: #cbd5e1;
  opacity: 1;
}

.ts-hs4 .swiper-pagination-bullet-active {
  background: #4361ee;
}

.ts-hs4 .swiper-button-prev,
.ts-hs4 .swiper-button-next {
  display: none !important;
}

.ts-hs4-btn {
  margin-top: 32px !important;
}

.ts-hs4-btn .ts-btn-outline .icon-text-wrapper {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px;
  min-height: 48px;
  padding: 0 24px;
  border-radius: 999px;
  background: #4361ee;
  text-decoration: none;
}

.ts-hs4-card .icon-text-wrapper, .ts-hs7-card-bottom .icon-text-wrapper {
    display: flex;
}

.ts-hs4-card .icon-text-wrapper .icon-container, .ts-hs7-card-bottom .icon-text-wrapper .icon-container {
    margin-top: 4px;
}

/* =========================
   TS HS4 - DIGITAL SOLUTIONS Off
   ========================= */

/* =========================
   TS HS6 - STEPS On
   ========================= */

.ts-hs6 {
  padding: 84px 20px;
  background: #ffffff;
}

.ts-hs6 .tse-title {
  max-width: 800px;
  margin: 0 auto 44px !important;
  text-align: center;
}
.ts-hs6-no {
    font-size: 40px;
    font-family: 'Inter';
    color: #0F172A;
    font-weight: 600;
    transition: 0.3s;
}
.ts-hs6-card:hover .ts-hs6-no {
    color: #ffffff;
    transition: 0.3s;
}
.ts-hs6 .tse-title > .wp-block-tanvir-blocks-my-icon-img .icon-text-wrapper {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px;
  padding: 7px 14px;
  border: 1px solid #dce5ef;
  border-radius: 999px;
  background: #f7fafc;
}

.ts-hs6 .tse-title > .wp-block-tanvir-blocks-my-icon-img .tanvir-block-des {
  font-size: 13px !important;
  color: #64748b;
}

.ts-hs6 .wp-block-heading.has-x-large-font-size {
  margin: 0;
  font-size: clamp(2rem, 4vw, 3.2rem);
  line-height: 1.16;
  letter-spacing: -0.02em;
  color: #0f172a !important;
}

.ts-hs6 .has-small-font-size {
  max-width: 720px;
  margin: 0 auto;
  font-size: 1.08rem;
  line-height: 1.62;
  color: #475569 !important;
}

.ts-hs6 .wp-block-tanvir-blocks-my-slider.swiper {
  width: 100%;
  overflow: hidden;
}

.ts-hs6 .swiper-wrapper {
  align-items: stretch;
}

.ts-hs6 .swiper-slide {
  height: auto;
}

.ts-hs6-card {
  display: flex;
  flex-direction: column;
  /* min-height: 390px; */
  padding: 22px 20px;
  border: 1px solid #e6ebf2;
  border-radius: 22px;
  background: #f8fafc;
  transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease, transform 0.25s ease;
}

.ts-hs6-card h3 {
  margin: 0 0 16px !important;
  font-size: 18px;
  line-height: 1.2;
  font-weight: 600;
  color: #1e293b;
}

.ts-hs6-card p {
  font-size: 16px !important;
  line-height: 1.55;
  color: #64748b !important;
  border-top: 1px solid #ddd;
  margin-top: 10px;
  padding: 15px 0;
  font-weight: 300;
}

.ts-hs6-card > .wp-block-group:last-child {
  /* margin-top: auto;
  padding-top: 20px;
  border-top: 1px solid #dde4ec;
  align-items: center; */
}

.ts-hs6-card > .wp-block-group:last-child h2 {
  margin: 0;
  font-size: 40px;
  line-height: 1;
  font-weight: 500;
  color: #0f172a;
}

.ts-hs6-card .ts-hs2-icon {
  margin: 0 !important;
}

.ts-hs6-card .ts-hs2-icon img {
  width: 44px !important;
  height: 44px;
  object-fit: contain;
}

.ts-hs6-card:hover {
  background-color: #0f2d79;
  border-color: #163a93;
  background-image:
    linear-gradient(180deg, rgba(5, 20, 72, 0.22) 0%, rgba(16, 47, 126, 0.55) 100%),
    linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px),
    linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px);
  background-size: auto, 54px 54px, 54px 54px;
  background-position: center, center, center;
  transform: translateY(-2px);
}

/* linear-gradient(121.09deg, #030A39 28.56%, #072B6D 61.16%); */

.ts-hs6-card:hover h3,
.ts-hs6-card:hover h2,
.ts-hs6-card:hover p {
  color: #f8fbff !important;
}

.ts-hs6-card:hover > .wp-block-group:last-child,
.ts-hs6 .swiper-slide:first-child .ts-hs6-card > .wp-block-group:last-child {
  /* border-top-color: rgba(235, 243, 255, 0.42); */
}

.ts-hs6 .swiper-pagination {
  position: static;
  margin-top: 16px;
}

.ts-hs6 .swiper-pagination-bullet {
  width: 16px;
  height: 3px;
  border-radius: 999px;
  background: #cbd5e1;
  opacity: 1;
}

.ts-hs6 .swiper-pagination-bullet-active {
  background: #4361ee;
}

.ts-hs6 .swiper-button-prev,
.ts-hs6 .swiper-button-next {
  display: none !important;
}

.ts-hs6 .ts-hs6-card .wp-block-group {
    display: flex;
    justify-content: space-between !important;
    margin: 0 !important;
    align-items: center;
    align-content: center;
}

.ts-hs6 .ts-hs6-card .wp-block-group h2 {
    margin: 0 !important;
}

.ts-hs6 .ts-hs6-card .wp-block-group figure.wp-block-image img {
    width: 24px !important;
    height: 24px;
}

.ts-hs6 .ts-hs6-card .wp-block-group figure.wp-block-image {
    background: #fff;
    padding: 15px;
    border-radius: 50px;
}

/* =========================
   TS HS6 - STEPS Off
   ========================= */

/* =========================
   TS HS7 - INVESTMENT On
   ========================= */

.ts-hs7 {
  padding: 84px 20px;
  background: #f3f7fb !important;
}

.ts-hs7 .tse-title {
  max-width: 760px;
  margin: 0 auto 42px !important;
  text-align: center;
}

.ts-hs7 .tse-title > .wp-block-tanvir-blocks-my-icon-img .icon-text-wrapper {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px;
  padding: 7px 14px;
  border: 1px solid #dce5ef;
  border-radius: 999px;
  background: #f8fbff;
}

.ts-hs7 .tse-title > .wp-block-tanvir-blocks-my-icon-img .tanvir-block-des {
  font-size: 12px !important;
  color: #64748b;
}

.ts-hs7 .wp-block-heading.has-x-large-font-size {
  margin: 0;
  font-size: clamp(2rem, 4vw, 3.2rem);
  line-height: 1.16;
  letter-spacing: -0.02em;
  color: #0f172a !important;
}

.ts-hs7 .has-small-font-size {
  max-width: 640px;
  margin: 0 auto;
  font-size: 1.04rem;
  line-height: 1.62;
  color: #475569 !important;
}

.ts-hs7 .wp-block-tanvir-blocks-my-slider.swiper {
  width: 100%;
  overflow: hidden;
}

.ts-hs7 .swiper-wrapper {
  align-items: stretch;
}

.ts-hs7 .swiper-slide {
  height: auto;
}

.ts-hs7-card {
  padding: 32px 24px;
  border: 1px solid #cfdae6;
  border-radius: 16px;
  background: #ffffff;
}

.ts-hs7-card-top {
  padding: 24px;
  border-radius: 12px;
  background: #FCFBFC;
}

.ts-hs7-card-top h3 {
  margin: 0 0 8px !important;
  font-size: 21px;
  line-height: 1.2;
  color: #1e293b;
}

.ts-hs7-card-top p {
  margin: 0;
  font-size: 13px !important;
  line-height: 1.45;
  color: #64748b !important;
}

.ts-hs7-card-top .ts-hs7-price {
  margin-top: 16px !important;
  margin-bottom: 4px !important;
}

.ts-hs7-card-top .ts-hs7-price mark {
  font-size: 39px;
  font-weight: 700;
  line-height: 1;
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a;
}

.ts-hs7-card-top .wp-block-buttons {
  width: 100%;
  margin: 0;
}

.ts-hs7-card-top .wp-block-button {
  width: 100%;
}

.ts-hs7-card-top .wp-block-button__link {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid #cfd8e3;
  border-radius: 26px;
  background: #ffffff;
  color: #0f172a;
  font-size: 16px;
  font-weight: 400;
  text-decoration: none;
  transition: 0.5s;
}

.ts-hs7-card-top.card-active {
  background: linear-gradient(180deg, #f1f5ff 0%, #d8e2ff 100%);
}

.ts-hs7-card-top.card-active .wp-block-button__link {
  border-color: #4663ef;
  background: linear-gradient(180deg, #4a67f1 0%, #3f5be9 100%);
  color: #ffffff;
}

.ts-hs7-card-top.card-active .wp-block-button__link:hover {
  border-color: #4663ef;
  background: #ffffff;
  color: #0f172a;
}

.ts-hs7-card-top .wp-block-button__link:hover {
  border-color: #4663ef;
  background: linear-gradient(180deg, #4a67f1 0%, #3f5be9 100%);
  color: #ffffff;
}

.ts-hs7-card-bottom {
  margin-top: 10px;
  padding-top: 2px;
}

.ts-hs7-card-bottom h4 {
  margin: 0 0 12px !important;
  font-size: 24px;
  line-height: 1.3;
  color: #0f172a;
}

.ts-hs7-card-bottom .wp-block-tanvir-blocks-my-icon-img {
  margin-bottom: 9px;
}

.ts-hs7-card-bottom .wp-block-tanvir-blocks-my-icon-img .icon-text-wrapper {
  gap: 8px;
}

.ts-hs7-card-bottom .wp-block-tanvir-blocks-my-icon-img .tanvir-block-des {
  font-size: 13px !important;
  line-height: 1.35;
  color: #1f2937;
}

/* TS HS7 - Tabs */

.ts-hs7-tabs-nav {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 32px;
}

.ts-hs7-tab-btn {
  padding: 10px 28px;
  border: 2px solid #3b5af1;
  border-radius: 30px;
  background: transparent;
  cursor: pointer;
  font-size: 15px;
  font-weight: 600;
  color: #3b5af1;
  transition: background 0.2s, color 0.2s;
}

.ts-hs7-tab-btn.active {
  background: #3b5af1;
  color: #ffffff;
}

.ts-hs7-panel {
  display: none;
}

.ts-hs7-panel.active {
  display: block;
}

/* TS HS7 - Card extras */

.ts-hs7-badge {
  display: inline-block;
  padding: 3px 10px;
  background: #eff6ff;
  color: #3b5af1 !important;
  border-radius: 20px;
  font-size: 12px !important;
  font-weight: 600;
  margin: 0 0 8px !important;
}

.ts-hs7-pay-badge {
  display: inline-block;
  padding: 3px 10px;
  background: #f1f5ff;
  color: #64748b !important;
  border-radius: 20px;
  font-size: 11px !important;
  font-weight: 600;
  letter-spacing: 0.05em;
  margin: 4px 0 14px !important;
}

.ts-hs7-card-top.card-active .ts-hs7-badge {
  background: #dde6ff;
}

.ts-hs7-card-top.card-active .ts-hs7-pay-badge {
  background: #dde6ff;
}

.ts-hs7-card-bottom h4.ts-hs7-section-h {
  font-size: 12px !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #64748b !important;
  border-top: 1px solid #e8edf3;
  padding-top: 14px !important;
}

.ts-hs7-card-bottom h4.ts-hs7-section-h:first-child {
  border-top: none;
  padding-top: 0 !important;
}

.ts-hs7-quote {
  margin-top: 16px !important;
  padding: 12px 14px;
  background: #f1f5ff;
  border-left: 3px solid #3b5af1;
  border-radius: 0 6px 6px 0;
  font-size: 13px !important;
  color: #475569 !important;
  font-style: italic;
  line-height: 1.5;
}

.ts-hs7 .swiper-pagination {
  position: static;
  margin-top: 16px;
}

.ts-hs7 .swiper-pagination-bullet {
  width: 16px;
  height: 3px;
  border-radius: 999px;
  background: #cbd5e1;
  opacity: 1;
}

.ts-hs7 .swiper-pagination-bullet-active {
  background: #4361ee;
}

.ts-hs7 .swiper-button-prev,
.ts-hs7 .swiper-button-next {
  display: none !important;
}

/* =========================
   TS HS7 - INVESTMENT Off
   ========================= */

/* =========================
   TS HS9 - CTA On
   ========================= */

.ts-hs9 {
  padding: 64px 20px;
  background: #ffffff;
}

.ts-hs9 .ts-hs9-cta-inner {
  max-width: 1220px;
  margin: 0 auto;
  padding: 56px 32px;
  border-radius: 18px;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  position: relative;
}

.ts-hs9 .ts-hs9-cta-inner::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,0.08) 0%, rgba(19,74,214,0.08) 100%);
  pointer-events: none;
}

.ts-hs9 .ts-hs9-cta-inner > * {
  position: relative;
  z-index: 1;
}

.ts-hs9 .ts-hs9-cta-inner h2 {
  max-width: 760px;
  margin: 0 auto 14px !important;
  font-size: clamp(2.15rem, 4.4vw, 4rem);
  line-height: 1.12;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: #23429c !important;
}

.ts-hs9 .ts-hs9-cta-inner p {
  max-width: 650px;
  margin: 0 auto;
  font-size: 1rem;
  line-height: 1.7;
  color: #3f526d !important;
}

.ts-hs9-btns a.wp-block-button__link.wp-element-button svg {
    width: 28px;
    margin-bottom: -7px;
    fill: #ffffff;
    transition: 0.3s;
    transform: rotate(-45deg);
}

.wp-block-buttons.ts-hs9-btns {
    margin-top: 48px;
}

.ts-hs9-btns a.wp-block-button__link.wp-element-button {
    font-size: 20px;
    font-weight: 500;
    transition: 0.3s;
    padding: 16px 70px;
    border: 1px solid 
}

.ts-hs9-btns a.wp-block-button__link.wp-element-button:hover svg {
    transform: rotate(0deg);
    fill: #3b4af1;
    transition: 0.3s;
}

.ts-hs9-btns a.wp-block-button__link.wp-element-button:hover {
    background: #ffffff;
    color: #3b4af1;
    transition: 0.3s;
}

.ts-hs9-btns .wp-block-button:nth-child(1) a.wp-block-button__link.wp-element-button {
    background: #ffffff;
    color: #3b4af1;
    transition: 0.3s;
}

.ts-hs9-btns .wp-block-button:nth-child(1) a.wp-block-button__link.wp-element-button svg {
    fill: #3b4af1;
    transition: 0.3s;
    transform: rotate(0deg);
}

.ts-hs9-btns .wp-block-button:nth-child(1) a.wp-block-button__link.wp-element-button:hover svg {
    fill: #ffffff;
    transition: 0.3s;
    transform: rotate(-45deg);
}

.ts-hs9-btns .wp-block-button:nth-child(1):hover a.wp-block-button__link.wp-element-button {
    background: #3b4af1;
    color: #ffffff;
    transition: 0.3s;
}

/* =========================
   TS HS9 - CTA Off
   ========================= */

/* =========================
   TS HS8 - BLOG On
   ========================= */

.ts-hs8 {
  padding: 84px 20px;
  background: #ffffff !important;
}

.ts-hs8 .tse-title {
  max-width: 780px;
  margin: 0 auto 42px !important;
  text-align: center;
}

.ts-hs8-post-info .wp-block-post-title a {
    font-size: 24px;
    font-weight: 500;
}

.ts-hs8-post-info p.wp-block-post-excerpt__excerpt {
    min-height: 85px;
}

.ts-hs8-post-info .wp-block-post-date {
    padding: 0 !important;
    margin: initial;
    font-size: 14px !important;
}

.ts-hs8-post-info .wp-block-post-comments-link a {
    font-size: 14px !important;
}

.ts-hs8 .tse-title > .wp-block-tanvir-blocks-my-icon-img .icon-text-wrapper {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px;
  padding: 7px 14px;
  border: 1px solid #dce5ef;
  border-radius: 999px;
  background: #f7fafc;
}

.ts-hs8 .tse-title > .wp-block-tanvir-blocks-my-icon-img .tanvir-block-des {
  font-size: 13px !important;
  color: #64748b;
}

.ts-hs8 .wp-block-heading.has-x-large-font-size {
  margin: 0;
  font-size: clamp(2rem, 4vw, 3.2rem);
  line-height: 1.16;
  letter-spacing: -0.02em;
  color: #0f172a !important;
}

.ts-hs8 .has-small-font-size {
  max-width: 670px;
  margin: 0 auto;
  font-size: 1.04rem;
  line-height: 1.62;
  color: #475569 !important;
}

.ts-hs8 .plumber-3c-blog {
  max-width: 1280px;
  margin: 0 auto;
}

.ts-hs8 .plumber-3c-blog .wp-block-post-template {
  gap: 16px !important;
}

.ts-hs8 .plumber-3c-blog .wp-block-post {
  margin: 0;
}

.ts-hs8 .plumber-3c-blog .wp-block-post > .wp-block-group {
  height: 100%;
  border: 1px solid #d4dee9;
  border-radius: 14px;
  overflow: hidden;
  background: #ffffff;
}

.ts-hs8 .ts-hs8-post-cat {
  position: relative;
}

.ts-hs8 .ts-hs8-post-cat .wp-block-post-featured-image {
  margin: 0;
}

.ts-hs8 .ts-hs8-post-cat .wp-block-post-featured-image a,
.ts-hs8 .ts-hs8-post-cat .wp-block-post-featured-image img {
  display: block;
  width: 100%;
}

.ts-hs8 .ts-hs8-post-cat .wp-block-post-terms {
  position: absolute;
  top: 10px;
  right: 10px;
  margin: 0;
  z-index: 2;
}

.ts-hs8 .ts-hs8-post-cat .wp-block-post-terms a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  background: #4361ee;
  color: #ffffff !important;
  font-size: 11px;
  font-weight: 600;
  text-decoration: none;
}

.ts-hs8 .ts-hs8-post-cat .wp-block-post-terms strong {
  display: none;
}

.ts-hs8 .ts-hs8-post-info {
  padding: 12px 12px 10px;
}

.ts-hs8 .ts-hs8-post-info .wp-block-post-title {
  margin: 0;
  padding: 0 !important;
  font-size: 33px;
  line-height: 1.28;
}

.ts-hs8 .ts-hs8-post-info .wp-block-post-title a {
  color: #0f172a !important;
  text-decoration: none;
}

.ts-hs8 .ts-hs8-post-info .wp-block-post-excerpt {
  margin: 10px 0 10px;
  color: #64748b !important;
  font-size: 13px;
  line-height: 1.5;
}

.ts-hs8 .ts-hs8-post-info .wp-block-post-excerpt p {
  margin: 0;
}

.ts-hs8 .ts-hs8-post-info > .wp-block-group:last-child {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid #e2e8f0;
  gap: 8px;
}

.ts-hs8 .ts-hs8-post-info .wp-block-post-date,
.ts-hs8 .ts-hs8-post-info .wp-block-post-comments-link {
  color: #94a3b8 !important;
  margin: 0;
  line-height: 1.4;
}

.ts-hs8 .ts-hs8-post-info .wp-block-post-comments-link a,
.ts-hs8 .ts-hs8-post-info .wp-block-post-date a {
  color: #94a3b8 !important;
  text-decoration: none;
}

.ts-hs8 .ts-center {
  margin-top: 24px !important;
}

.ts-hs8 .ts-btn-outline .icon-text-wrapper {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px;
  min-height: 42px;
  padding: 0 18px;
  border: 1px solid #9fb1ff;
  border-radius: 999px;
  background: #ffffff;
  color: #4361ee !important;
  text-decoration: none;
}

.ts-hs8 .ts-btn-outline .tanvir-block-des,
.ts-hs8 .ts-btn-outline svg {
  color: #4361ee !important;
  fill: #4361ee !important;
}

/* =========================
   TS HS8 - BLOG Off
   ========================= */

/* =========================
   TS HS5 - PROJECTS On
   ========================= */

.ts-hs5 .wp-block-tanvir-blocks-my-slider .swiper-slide>* {
    height: inherit;
}

.ts-hs5 {
  padding: 80px 20px;
  background: #eef4f8 !important;
}

.ts-hs5 .ts-title {
  max-width: 760px;
  margin: 0 auto 48px;
  text-align: center;
}

.ts-hs5 .wp-block-tanvir-blocks-my-icon-img {
  margin-bottom: 12px;
}

.ts-hs5 .wp-block-tanvir-blocks-my-icon-img .icon-text-wrapper {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px;
  padding: 10px 18px;
  border: 1px solid #d8e1ea;
  border-radius: 999px;
  background: transparent;
}

.ts-hs5 .wp-block-tanvir-blocks-my-icon-img .tanvir-block-des {
  font-size: 14px !important;
  color: #64748b;
  line-height: 1;
}

.ts-hs5 .wp-block-heading.has-x-large-font-size {
  margin: 0;
  font-size: clamp(2rem, 4vw, 3.2rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: #0f172a !important;
}

.ts-hs5 .has-small-font-size {
  max-width: 760px;
  margin: 0 auto;
  font-size: 1.125rem;
  line-height: 1.6;
  color: #475569 !important;
}

/* slider base */

.ts-hs5 .wp-block-tanvir-blocks-my-slider.swiper {
  width: 100%;
  overflow: hidden;
}

.ts-hs5 .swiper-wrapper {
  align-items: stretch;
}

.ts-hs5 .swiper-slide {
  height: auto;
  box-sizing: border-box;
}

/* image */

.ts-hs5-img {
  margin: 0 0 28px;
}

.ts-hs5-img a,
.ts-hs5-img img {
  display: block;
  width: 100%;
}

.ts-hs5-img img {
  height: auto;
}

/* content */

.ts-hs5 .swiper-slide > .wp-block-group:last-child {
  border-bottom: 1px solid #d7dee7;
  padding-bottom: 18px;
}

.ts-hs5 .swiper-slide h3 {
  margin: 0;
  color: #0f172a;
  font-size: clamp(1.7rem, 2vw, 2.2rem);
  line-height: 1.15;
  font-weight: 700;
}

.ts-hs5 .swiper-slide .wp-block-group[style*="justify-content:space-between"] {
  align-items: center;
  gap: 18px;
  margin-bottom: 16px;
}

.ts-hs5 .wp-block-buttons {
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.ts-hs5 .wp-block-button.is-style-outline .wp-block-button__link {
  padding: 7px 14px;
  border: 0;
  border-radius: 999px;
  background: #dfe8ff;
  color: #5672ff;
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}

.ts-hs5 .swiper-slide p {
  margin: 0;
  font-size: 1.06rem;
  line-height: 1.55;
  color: #475569;
}

/* pagination */

.ts-hs5 .swiper-pagination {
  position: static;
  margin-top: 24px;
}

.ts-hs5 .swiper-pagination-bullet {
  width: 22px;
  height: 4px;
  border-radius: 999px;
  background: #cbd5e1;
  opacity: 1;
}

.ts-hs5 .swiper-pagination-bullet-active {
  background: #4361ee;
}

.ts-hs5 .swiper-button-prev,
.ts-hs5 .swiper-button-next {
  display: none !important;
}

/* bottom button */

.ts-hs5-all-btn {
  margin-top: 44px !important;
  text-align: center;
}

.ts-hs5-all-btn .ts-btn-outline .icon-text-wrapper {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px;
  min-height: 56px;
  padding: 0 28px;
  border-radius: 999px;
  background: linear-gradient(180deg, #5472ff 0%, #3f5df0 100%);
  color: #fff !important;
  text-decoration: none;
}

.ts-hs5 .wp-block-tanvir-blocks-slide.swiper-slide {
    position: relative;
    z-index: 1;
}

.ts-hs5 .wp-block-tanvir-blocks-slide.swiper-slide .wp-block-tanvir-blocks-my-icon-img {
    /* margin: 0 auto; */
    text-align: center;
    position: absolute;
    top: 29%;
    right: 0;
    left: 0;
    bottom: 0;
    opacity: 0;
    visibility: hidden;
    transition: 0.3s;
    transform: translate(-90px, 90px);
}

.ts-hs5 .wp-block-tanvir-blocks-slide.swiper-slide .wp-block-tanvir-blocks-my-icon-img a.icon-text-wrapper {
    background: #3b4af1;
    border: 0;
    gap: 0;
}

.ts-hs5 .wp-block-tanvir-blocks-slide.swiper-slide .wp-block-tanvir-blocks-my-icon-img .icon-container {
    margin: 0 !important;
    padding: 0 !important;
}

.ts-hs5 .wp-block-tanvir-blocks-slide.swiper-slide .wp-block-tanvir-blocks-my-icon-img img {
    margin-bottom: -15px !important;
    padding-bottom: 0 !important;
}

.ts-hs5 .wp-block-tanvir-blocks-slide.swiper-slide .wp-block-tanvir-blocks-my-icon-img span.tanvir-block-des {
    color: #ffffff;
}

.ts-hs5 .wp-block-tanvir-blocks-slide.swiper-slide:hover .wp-block-tanvir-blocks-my-icon-img {
    visibility: visible;
    opacity: 1;
    transform: translate(0px, 0px);
    transition: 0.3s;
}

.ts-hs5 .wp-block-tanvir-blocks-slide.swiper-slide:hover p {
    color: #3b4af1;
    transition: 0.3s;
}

/* =========================
   TS HS5 - PROJECTS Off
   ========================= */

.ts-hs9 .ts-hs9-cta-btn .wp-block-tanvir-blocks-my-icon-img:last-child .icon-text-wrapper .icon-container {
    transform: rotate(-45deg) !important;
    margin-top: -5px;
}

.ts-btn-outline .icon-container svg {
    margin-top: 7px;
}

.ts-about-top-slider span.swiper-pagination-bullet {
    width: 16px;
    height: 4px;
    border-radius: 2px;
    background: #3b4af1;
}

.ts-about-top-slider .swiper-button-prev, .ts-about-top-slider .swiper-button-next {
    display: none;
}

.ts-about-top-slider {
    padding-bottom: 80px;
}

.ts-about-top-slider .swiper-pagination.swiper-pagination-clickable.swiper-pagination-bullets {
	position: static;
    margin-bottom: 18px;
}

/* =========================
   FAQ Section - faq-desktop.png Start
   ========================= */

.ts-faq-section {
  padding: 90px 80px 88px !important;
  background: #f4f7fb !important;
}

.ts-faq-section > .wp-block-columns {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(520px, 631px);
  align-items: stretch !important;
  gap: 96px;
  width: 100%;
  max-width: 1280px;
  margin: 0 auto !important;
}

.ts-faq-section > .wp-block-columns > .wp-block-column {
  min-width: 0;
}

.ts-faq-section > .wp-block-columns > .wp-block-column:first-child {
  display: flex;
  flex-direction: column;
}

.ts-faq-section > .wp-block-columns > .wp-block-column:first-child > .wp-block-tanvir-blocks-my-icon-img:first-child {
  margin: 0 !important;
}

.ts-faq-section > .wp-block-columns > .wp-block-column:first-child > .wp-block-tanvir-blocks-my-icon-img:first-child .icon-text-wrapper {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 10px;
  padding: 9px 16px;
  border: 1px solid #dce3ed;
  border-radius: 999px;
  background: #f7faff;
  line-height: 1;
}

.ts-faq-section > .wp-block-columns > .wp-block-column:first-child > .wp-block-tanvir-blocks-my-icon-img:first-child .icon-container {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 12px !important;
  margin: 0;
}

.ts-faq-section > .wp-block-columns > .wp-block-column:first-child > .wp-block-tanvir-blocks-my-icon-img:first-child .tanvir-block-des {
  color: #334155;
  font-size: 14px !important;
  line-height: 1;
}

.ts-faq-section h2.wp-block-heading {
  max-width: 460px;
/*   margin: 28px 0 0 !important; */
  padding: 0 !important;
  color: #0f172a !important;
  font-size: 40px !important;
  line-height: 1.5;
  letter-spacing: 0;
}

.ts-faq-section h2.wp-block-heading mark {
  background: linear-gradient(90deg, #21317f 0%, #3b5af1 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: #2f48c4 !important;
}

.ts-faq-section .ts-faq-project {
  width: 100%;
  max-width: 436px;
  margin: auto 0 0 !important;
  padding: 28px 31px;
  border-radius: 20px;
  background: #3b5af1;
  color: #ffffff;
  box-sizing: border-box;
}

.ts-faq-section .ts-faq-project > p {
  margin: 0 0 32px;
  color: #ffffff;
  font-size: 30px;
  font-weight: 400;
  line-height: 1.2;
}

.ts-faq-section .ts-faq-project .wp-block-tanvir-blocks-my-icon-img {
  margin: 0 !important;
}

.ts-faq-section .ts-faq-project a.icon-text-wrapper {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 9px;
  min-height: 40px;
  padding: 4px 14px 4px 5px;
  border-radius: 999px;
  background: #ffffff;
  color: #0f172a;
  text-decoration: none;
  line-height: 1;
}

.ts-faq-section .ts-faq-project a.icon-text-wrapper .icon-container {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 34px !important;
  height: 34px;
  margin: 0;
  border-radius: 50%;
  background: #3b5af1;
}

.ts-faq-section .ts-faq-project a.icon-text-wrapper .icon-container svg {
  width: 20px;
  height: 20px;
}

.ts-faq-section .ts-faq-project a.icon-text-wrapper .icon-container svg path {
  fill: #ffffff;
}

.ts-faq-section .ts-faq-project a.icon-text-wrapper .tanvir-block-des {
  color: #0f172a;
  font-size: 18px !important;
  font-weight: 500;
  line-height: 1;
}

.ts-faq-section .wp-block-accordion {
  display: flex;
  flex-direction: column;
  gap: 32px;
  margin: 0;
  max-width: 820px;
}

.ts-faq-section .wp-block-accordion-item {
  overflow: hidden;
  border: 1px solid #cdd6e1;
  border-radius: 14px;
  background: #f1f5f9;
}

.ts-faq-section .wp-block-accordion-heading {
  margin: 0;
}

.ts-faq-section .wp-block-accordion-item.is-open span.wp-block-accordion-heading__toggle-icon {
    transform: rotate(0deg);
}

.ts-faq-section .wp-block-accordion-heading__toggle {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  width: 100%;
  min-height: 78px;
  padding: 24px 52px 24px 26px;
  border: 0;
  background: transparent;
  color: #202124;
  cursor: pointer;
  font: inherit;
  text-align: left;
}

.ts-faq-section .wp-block-accordion-heading__toggle-title {
  display: block;
  color: #202124;
  font-size: 25px;
  font-weight: 600;
  line-height: 1.3;
}

.ts-faq-section .wp-block-accordion-heading__toggle-icon {
  position: absolute;
  top: 29px;
  right: 20px;
  width: 22px;
  height: 22px;
  border: 2px solid #2f3134;
  border-radius: 50%;
  color: transparent;
  font-size: 0;
  line-height: 1;
  flex: 0 0 22px;
}

.ts-faq-section .wp-block-accordion-heading__toggle-icon::before,
.ts-faq-section .wp-block-accordion-heading__toggle-icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 2px;
  border-radius: 999px;
  background: #2f3134;
  transform: translate(-50%, -50%);
}

.ts-faq-section .wp-block-accordion-heading__toggle-icon::after {
  width: 2px;
  height: 10px;
}

.ts-faq-section .wp-block-accordion-panel {
  display: none;
  padding: 0 40px 24px 20px;
}

.ts-faq-section .wp-block-accordion-item:first-child .wp-block-accordion-panel,
.ts-faq-section .wp-block-accordion-item.is-open .wp-block-accordion-panel,
.ts-faq-section .wp-block-accordion-item.is-active .wp-block-accordion-panel,
.ts-faq-section .wp-block-accordion-item:has(.wp-block-accordion-heading__toggle[aria-expanded="true"]) .wp-block-accordion-panel {
  display: block;
}

.ts-faq-section .wp-block-accordion-item:has(.wp-block-accordion-heading__toggle[aria-expanded="false"]) .wp-block-accordion-panel {
  display: none;
}

.ts-faq-section .wp-block-accordion-item:first-child .wp-block-accordion-heading__toggle-icon::after,
.ts-faq-section .wp-block-accordion-item.is-open .wp-block-accordion-heading__toggle-icon::after,
.ts-faq-section .wp-block-accordion-item.is-active .wp-block-accordion-heading__toggle-icon::after,
.ts-faq-section .wp-block-accordion-item:has(.wp-block-accordion-heading__toggle[aria-expanded="true"]) .wp-block-accordion-heading__toggle-icon::after {
  opacity: 0;
}

.ts-faq-section .wp-block-accordion-item:has(.wp-block-accordion-heading__toggle[aria-expanded="false"]) .wp-block-accordion-heading__toggle-icon::after {
  opacity: 1;
}

.ts-faq-section .wp-block-accordion-panel p {
/*   max-width: 530px; */
  margin: 0;
  color: #52565b !important;
/*   font-size: 20px; */
  font-weight: 400;
  line-height: 1.32;
}

/* =========================
   FAQ Section - faq-desktop.png End
   ========================= */

/* Before after box in about page on  */

.wp-block-group.ts-before-after {
    padding: 48px 45px;
}

.wp-block-group.ts-before-after h3.wp-block-heading {
    margin: 16px 0 40px 0;
    font-size: 28px;
}

.wp-block-group.ts-before-after .icon-text-wrapper {
    padding: 16px;
    border: 1px solid;
    border-radius: 8px;
    margin: 12px 0;
    background: #ffffff;
}

.ts-icon-before-border .icon-text-wrapper {
    border-color: #FFA2A2 !important;
}

.ts-icon-after-border .icon-text-wrapper {
    border-color: #7BF1A8 !important;
}

.wp-block-group.ts-before-after .icon-text-wrapper span.tanvir-block-des {
    font-size: 16px;
    color: #0F172A;
    font-weight: 500;
    line-height: 1em;
}

.wp-block-group.ts-before-after svg {
    margin-bottom: -8px;
}

.wp-block-group.ts-before-after .icon-container.has-icon-color {
    margin-right: 10px;
}

.wp-block-group.ts-before-after > p {
    text-transform: uppercase;
}

/* Before after box in about page off */

figure.wp-block-image.size-full.ts-star-icon img {
    width: 160px;
}

figure.wp-block-image.size-full.ts-star-icon {
    margin-left: 0 !important;
}

.wp-block-group.ts-hs4-card.ts-review-box {
    border: 8px solid #ffffff;
}

.wp-block-group.alignfull.ts-section.ts-hs4.ts-testimonial-sec {
    background: #F8FAFC !important;
}

.swiper-c1-client-trust {
    margin-top: 64px;
}

.wp-block-group.ts-section.ts-story .ts-mission-vission span.tanvir-block-des {
    font-size: 20px !important;
    color: #334155;
}

.wp-block-group.ts-section.ts-story .ts-mission-vission h3.wp-block-heading {
    font-size: 32px !important;
    margin-bottom: 24px !important;
    margin-top: 24px !important;
}

.wp-block-group.ts-section.ts-story .ts-mission-vission .wp-block-tanvir-blocks-slide.swiper-slide .wp-block-group.ts-hs4-card {
    padding: 40px 32px;
}

.wp-block-group.ts-section.ts-story .ts-mission-vission .ts-hs4-card > p {
    font-size: 18px !important;
}

.wp-block-group.ts-section.ts-story .ts-mission-vission .wp-block-tanvir-blocks-slide.swiper-slide:hover .wp-block-group.ts-hs4-card {
    background: #3b5af1;
    color: #ffffff;
}

.wp-block-group.ts-section.ts-story .ts-mission-vission .wp-block-tanvir-blocks-slide.swiper-slide:hover .wp-block-group.ts-hs4-card h3.wp-block-heading, .wp-block-group.ts-section.ts-story .ts-mission-vission .wp-block-tanvir-blocks-slide.swiper-slide:hover .wp-block-group.ts-hs4-card p, .wp-block-group.ts-section.ts-story .ts-mission-vission .wp-block-tanvir-blocks-slide.swiper-slide:hover .wp-block-group.ts-hs4-card span {
    color: #ffffff !important;
}

.ts-post-single span.ts-rp-card__comments {
    display: none;
}

/* =========================
  Contact Form 7 Start
   ========================= */

/* Parent column must be relative */

/* ===Icon-Box Start=== */

.wp-block-column {
    position: relative;
}

/* Contact box (floating) */

.ts-contact-icon-box {
    position: absolute;
    bottom: -6px;
    right: -6px;
    width: 351px;
    background: linear-gradient(135deg, #3b5af1, #4c6fff);
    border: 5px solid #ffffff;
    border-radius: 16px;
    padding: 30px;
    z-index: 2;
    height: 249px;
}

.ts-contact-icon-box .wp-block-heading{
    text-align: left;
}

.ts-contact-icon-box .icon-text-wrapper {
    gap: 15px;
    margin-top: 20px;
}

.ts-contact-icon-box .icon-container {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 46px;
    border-radius: 50%;
}

/* ===Icon-Box End=== */

/* ===Form Start===*/

.ts-contact-form {
    margin-right:0px 
}

/* Row layout */

.ts-form {
    display: flex;
    gap: 60px;
}

.ts-form-group {
    width: 100%;
}

/* Labels */

label {
    color: #000000;
    font-size: 14px;
    margin-bottom: -12px;
    display: block;
}

/* Inputs */

input,
textarea,
select {
    width: 100%;
    padding: 12px;
    border-radius: 30px;
    border: 2px solid #ddd;
    font-size: 14px;
    outline: none;
    transition: all 0.3s ease;
}

select.wpcf7-form-control.wpcf7-select {
  width: 100%;
  border: 2px solid #ddd;
  padding: 12px 20px;
  border-radius: 30px;
  color: #4A5565;
  font-size: 14px;
  font-weight: 400;
}

textarea.wpcf7-form-control.wpcf7-textarea {
  width: 100%;
  box-sizing: border-box;
  height: 93px;
  border: 2px solid #ddd;
  border-radius: 50px;
  font-size: 14px;
  padding: 36px 20px;
}

/* select */

.ts-form-group select {
    width: 95%;
}

/* Textarea */

.ts-form-group textarea {
    width: 90%;
    border-radius: 20px;
    height: 150px;
    resize: none;
}

/* Focus effect (yellow border) */

input:focus,
textarea:focus,
select:focus {
    background: #fff;
    border-color: #f4c542;
}

/* Button */

.contact-button  {
    background: linear-gradient(45deg, #3b5af1, #5f7cff);
    color: #fff;
    border: none;
    padding: 16px 20px;
    border-radius: 30px;
    cursor: pointer;
    font-size: 16px;
	font-weight: 600;
    transition: 0.3s;
	width: 35%
}

/* Button hover */

.contact-button:hover {
    transform: translateX(5px);
}

/* ===Contact Form 7 End===*/

/* Tablet/Desktop layout */

@media (min-width: 768px) {
  .ts-none-m { display: block !important; }
  .ts-none-d { display: none !important; }
  /* TS HS2 - SPECIALISTS On */
  .ts-hs2 {
    padding: 92px 32px !important;
  }

  .ts-hs2 .wp-block-tanvir-blocks-my-slider.swiper {
    overflow: visible;
  }

  .ts-hs2 .swiper-wrapper {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    width: 100% !important;
    transform: none !important;
  }

  .ts-hs2 .swiper-slide {
    width: auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    flex-shrink: 1 !important;
  }

  .ts-hs2 .swiper-slide.swiper-slide-duplicate {
    display: none !important;
  }

  .ts-hs2 .swiper-pagination,
  .ts-hs2 .swiper-button-prev,
  .ts-hs2 .swiper-button-next {
    display: none !important;
  }
  /* TS HS2 - SPECIALISTS Off */
  /* TS HS4 - DIGITAL SOLUTIONS On */
  .ts-hs4 {
    padding: 92px 32px;
  }

  .ts-hs4 .wp-block-tanvir-blocks-my-slider.swiper {
    overflow: visible;
  }

  .ts-hs4 .swiper-wrapper {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    width: 100% !important;
    transform: none !important;
  }

  .ts-hs4 .swiper-slide {
    width: auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    flex-shrink: 1 !important;
  }

  .ts-hs4 .swiper-pagination,
  .ts-hs4 .swiper-button-prev,
  .ts-hs4 .swiper-button-next {
    display: none !important;
  }
  /* TS HS4 - DIGITAL SOLUTIONS Off */
  /* TS HS6 - STEPS On */
  .ts-hs6 {
    padding: 96px 32px;
  }

  .ts-hs6 .wp-block-tanvir-blocks-my-slider.swiper {
    overflow: visible;
  }

  .ts-hs6 .swiper-wrapper {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    width: 100% !important;
    transform: none !important;
  }

  .ts-hs6 .swiper-slide {
    width: auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    flex-shrink: 1 !important;
  }

  .ts-hs6 .swiper-pagination,
  .ts-hs6 .swiper-button-prev,
  .ts-hs6 .swiper-button-next {
    display: none !important;
  }
  /* TS HS6 - STEPS Off */
  /* TS HS7 - INVESTMENT On */
  .ts-hs7 {
    padding: 96px 32px;
  }

  .ts-hs7-panel {
    padding: 0;
  }

  .ts-hs7 .wp-block-tanvir-blocks-my-slider.swiper {
    overflow: visible;
  }

  .ts-hs7 .swiper-wrapper {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    width: 100% !important;
    transform: none !important;
  }

  .ts-hs7 .swiper-slide {
    width: auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    flex-shrink: 1 !important;
  }

  .ts-hs7 .swiper-pagination,
  .ts-hs7 .swiper-button-prev,
  .ts-hs7 .swiper-button-next {
    display: none !important;
  }
  /* TS HS7 - INVESTMENT Off */
  /* TS HS9 - CTA On */
  .ts-hs9 {
    padding: 70px 32px;
  }

  .ts-hs9 .ts-hs9-cta-inner {
    padding: 60px 44px;
  }

  .ts-hs9 .ts-hs9-cta-inner h2 {
    font-size: clamp(2.5rem, 3.8vw, 3.7rem);
  }

  .ts-hs9 > .ts-hs9-btns {
    display: none;
  }
  /* TS HS9 - CTA Off */
  /* TS HS8 - BLOG On */
  .ts-hs8 {
    padding: 96px 32px;
  }
  .ts-hs8-post-info .wp-block-post-title a {
      font-size: 18px;
  }
  .ts-hs8 .plumber-3c-blog .wp-block-post-template {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
  /* TS HS8 - BLOG Off */
  /* TS HS5 - PROJECTS On */
  
  .ts-hs5 {
    padding: 90px 32px;
  }

  .ts-hs5 .ts-title {
    margin-bottom: 56px;
  }

  .ts-hs5 .wp-block-tanvir-blocks-my-slider.swiper {
    overflow: visible;
  }

  /* IMPORTANT: reset swiper row behavior */
  .ts-hs5 .swiper-wrapper {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 48px;
    row-gap: 52px;
    width: 100% !important;
    transform: none !important;
  }

  .ts-hs5 .swiper-slide {
    width: auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    flex-shrink: 1 !important;
  }

  .ts-hs5 .swiper-pagination,
  .ts-hs5 .swiper-button-prev,
  .ts-hs5 .swiper-button-next {
    display: none !important;
  }

  .ts-hs5-img {
    margin-bottom: 26px;
  }

  .ts-hs5 .swiper-slide h3 {
    font-size: 2rem;
  }

  .ts-hs5 .swiper-slide p {
    margin-top: 10px;
    font-size: 18px;
	min-height: 55px;
  }

  .ts-hs5-all-btn {
    margin-top: 56px !important;
  }
  /* TS HS5 - PROJECTS Off */
  .swiper-c1-client-trust .wp-block-group.ts-hs4-card {
      border: 8px solid #ffffff;
      box-shadow: 1px 1px 8px #d2cccc;
  }
  .swiper-c1-client-trust .wp-block-tanvir-blocks-slide {
      padding: 0 8px;
  }
  
  .wp-block-group.ts-section.ts-story .ts-mission-vission .swiper-wrapper {
      gap: 44px;
  }
  /* ts-step-slide about page on */
  .ts-step-slide .swiper-wrapper {
    background: #f9fbfc;
    margin: 40px 0;
    border: 1px solid #E2E8F0;
    border-radius: 24px;
    padding: 0px;
  }
	.ts-step-slide .swiper-wrapper .ts-hs4-card p {
		min-height: 42px;
	}
  .wp-block-tanvir-blocks-my-slider.swiper.ts-step-slide {
      padding: 0px 35px;
  }
  .wp-block-tanvir-blocks-my-slider.swiper.ts-step-slide .wp-block-group.ts-hs4-card {
      border: 0;
      padding: 30px;
	  box-shadow: none;
  }
  .wp-block-tanvir-blocks-my-slider.swiper.ts-step-slide .wp-block-group.ts-hs4-card h2.wp-block-heading {
      font-size: 48px;
      margin-bottom: 12px;
  }
  /* ts-step-slide about page off */
  .wp-block-tanvir-blocks-my-slider.swiper.swiper-c1.client-trust.swiper-initialized.swiper-horizontal.swiper-backface-hidden {
    padding: 20px 0;
  }
  .ts-header nav .wp-block-navigation__responsive-container-content > ul li:nth-last-child(1) a {
    display: none;
  }
}

/* Desktop Layout: 1025 < */

@media only screen and (min-width:1025px) {

  .wp-site-blocks .virza-none-d,
  .ts-none-d {
    display: none !important;
  }

  
  .ts-hs5 {
    padding: 100px 48px;
  }

  .ts-hs5 .swiper-wrapper {
    column-gap: 46px;
    row-gap: 54px;
  }

  .ts-hs5 .swiper-slide h3 {
    font-size: 2.15rem;
  }
	.ts-hs5-img a, .ts-hs5-img img {
		min-height: 434px;
		margin-bottom: 8px;
	}
	
	
}

/* Tablet Layout: 1024 => 768px */

@media only screen and (min-width:768px) and (max-width:1024px) {
  /* TS HS2 - SPECIALISTS On */
  .ts-hs2 {
    padding: 78px 26px !important;
  }

  .ts-hs2 .wp-block-heading.has-x-large-font-size {
    font-size: 2.55rem;
  }

  .ts-hs2 .swiper-wrapper {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  /* TS HS2 - SPECIALISTS Off */
  /* TS HS4 - DIGITAL SOLUTIONS On */
  .ts-hs4 {
    padding: 78px 26px;
  }

  .ts-hs4 .wp-block-heading.has-x-large-font-size {
    font-size: 2.55rem;
  }

  .ts-hs4 .swiper-wrapper {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ts-hs4-card {
    padding: 24px 18px;
  }
  /* TS HS4 - DIGITAL SOLUTIONS Off */
  /* TS HS6 - STEPS On */
  .ts-hs6 {
    padding: 80px 26px;
  }

  .ts-hs6 .wp-block-heading.has-x-large-font-size {
    font-size: 2.6rem;
  }

  .ts-hs6 .swiper-wrapper {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ts-hs6-card {
    min-height: 360px;
    padding: 20px 18px;
  }
  /* TS HS6 - STEPS Off */
  /* TS HS7 - INVESTMENT On */
  .ts-hs7 {
    padding: 78px 26px;
  }

  .ts-hs7 .wp-block-heading.has-x-large-font-size {
    font-size: 2.55rem;
  }

  .ts-hs7 .swiper-wrapper {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ts-hs7-card {
    padding: 14px 12px;
  }
  /* TS HS7 - INVESTMENT Off */
  /* TS HS9 - CTA On */
  .ts-hs9 {
    padding: 58px 24px;
  }

  .ts-hs9 .ts-hs9-cta-inner {
    padding: 44px 28px;
  }

  .ts-hs9 .ts-hs9-cta-btn .wp-block-tanvir-blocks-my-icon-img .icon-text-wrapper {
    min-width: 230px;
    min-height: 50px;
    font-size: 16px;
  }

  .ts-hs9 .ts-hs9-cta-btn .tanvir-block-des {
    font-size: 16px !important;
  }
  /* TS HS9 - CTA Off */
  /* TS HS8 - BLOG On */
  .ts-hs8 {
    padding: 78px 26px;
  }

  .ts-hs8 .wp-block-heading.has-x-large-font-size {
    font-size: 2.55rem;
  }

  .ts-hs8 .plumber-3c-blog .wp-block-post-template {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  /* TS HS8 - BLOG Off */
  /* TS HS5 - PROJECTS On */
  .ts-hs5 {
    padding: 80px 28px;
  }

  .ts-hs5 .wp-block-heading.has-x-large-font-size {
    font-size: 2.7rem;
  }

  .ts-hs5 .has-small-font-size {
    font-size: 1.05rem;
  }

  .ts-hs5 .swiper-wrapper {
    column-gap: 28px;
    row-gap: 38px;
  }

  .ts-hs5 .swiper-slide h3 {
    font-size: 1.8rem;
  }

  .ts-hs5 .swiper-slide .wp-block-group[style*="justify-content:space-between"] {
    flex-wrap: wrap !important;
    align-items: flex-start;
  }

  .ts-hs5 .wp-block-buttons {
    justify-content: flex-start;
  }
  /* TS HS5 - PROJECTS Off */
	
  .shots{grid-template-columns:repeat(3,1fr);}
  .strip{grid-template-columns:repeat(2,1fr);}
}

/* Mobile Layout: 767px => 360px */

@media (max-width:767px) {
  .ts-none-m { display: none !important; }
  .ts-none-d { display: block !important; }
  .ts-header nav.is-vertical.wp-block-navigation > ul li:nth-last-child(1) a {
    background: #3b5af1;
    text-align: center;
    margin: 20px;
    color: #ffffff;
    border-radius: 10px;
  }
  .ts-header nav.is-vertical.wp-block-navigation > ul li:nth-last-child(1) a span.wp-block-navigation-item__label {
    color: #ffffff;
  }
  /* TS HS2 - SPECIALISTS On */
  .ts-hs2 {
    padding: 56px 18px !important;
  }

  .ts-hs2 .ts-title {
    margin-bottom: 28px !important;
  }

  .ts-hs2 .wp-block-heading.has-x-large-font-size {
    font-size: clamp(2rem, 11vw, 2.55rem);
    line-height: 1.18;
  }

  .ts-hs2 .has-small-font-size {
    max-width: 320px;
    font-size: 1rem;
    line-height: 1.55;
  }

  .ts-hs2 .swiper-wrapper {
    display: flex !important;
    gap: 0;
    transform: translate3d(0, 0, 0);
  }

  .ts-hs2 .swiper-slide {
    width: 100% !important;
  }

  .ts-hs2 .swiper-slide.swiper-slide-duplicate {
    display: block !important;
  }

  .ts-hs2-card {
    min-height: 0;
    padding: 20px 16px;
  }

  .ts-hs2-card:hover a.icon-text-wrapper {
    max-width: 152px;
  }

  .ts-hs2 .swiper-pagination {
    margin-top: 12px;
    display: block !important;
  }

  .ts-hs2 .ts-center {
    margin-top: 24px !important;
  }

  .ts-hs2 .ts-btn-outline .icon-text-wrapper {
    min-height: 44px;
    padding: 0 22px;
  }
  .ts-stats-sec .wp-block-group.trava-stats-section {
    flex-direction: column;
  }

  .ts-stats-sec .wp-block-group.trava-stats-section h2.wp-block-heading {
    text-align: center;
  }
  /* TS HS2 - SPECIALISTS Off */
  .ts-header a.ts-button.ts-button-call {
    padding: 5px 10px !important;
    font-size: 14px !important;
    font-weight: 300 !important;
  }

  .ts-logo img {
    width: 128px;
  }

  .wp-block-group.ts-section {
    padding: 60px 18px;
  }

  .ts-hs1 {
    padding-top: 56px !important;
    padding-bottom: 54px !important;
  }

  .ts-hs1 > h1.wp-block-heading {
    max-width: 320px;
    margin-bottom: 14px;
    font-size: clamp(2rem, 11vw, 2.55rem);
    line-height: 1.12;
  }

  .ts-hs1 > p.has-text-align-center {
    max-width: 320px;
    font-size: 0.97rem;
    line-height: 1.6;
  }

  .ts-hs1 > .wp-block-group {
    margin-top: 20px;
    margin-bottom: 28px;
  }

  .ts-hs1 > .wp-block-group .wp-block-group {
    flex-wrap: wrap !important;
    gap: 10px !important;
  }

  .ts-hs1 a.tse-call-wrap,
  .ts-hs1 a.tse-icon-wrap,
  .ts-hs1 a.ts-button-call,
  .ts-hs1 a.ts-button-quote,
  .ts-hs1 a.ts-button-book {
    min-height: 46px;
    width: 100%;
    max-width: 260px;
    justify-content: center;
    margin: 0 auto;
    font-size: 14px;
    padding: 11px 16px;
  }

  .ts-hs1 .wp-block-tanvir-blocks-my-slider.swiper {
    padding-bottom: 26px;
  }

  .ts-hs1 .ts-hs1-img-offset {
    margin-top: 0;
  }

  .ts-hs1 .swiper-pagination {
    margin-top: 14px;
  }
  .hs1-2btn-wrap {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
	
  .shots{grid-template-columns:repeat(2,1fr);}
  .strip{grid-template-columns:1fr;}
	
  /* TS HS4 - DIGITAL SOLUTIONS On */
  .ts-hs4 {
    padding: 56px 18px;
  }

  .ts-hs4 .tse-title {
    margin-bottom: 26px !important;
  }

  .ts-hs4 .wp-block-heading.has-x-large-font-size {
    font-size: clamp(2rem, 11vw, 2.55rem);
    line-height: 1.18;
  }

  .ts-hs4 .has-small-font-size {
    max-width: 320px;
    font-size: 1rem;
    line-height: 1.55;
  }

  .ts-hs4-card {
    padding: 18px 14px;
  }


  .ts-hs4 .swiper-pagination {
    margin-top: 10px;
  }

  .ts-hs4-btn {
    margin-top: 22px !important;
  }

  .ts-hs4-btn .ts-btn-outline .icon-text-wrapper {
    min-height: 44px;
    padding: 0 22px;
  }
  /* TS HS4 - DIGITAL SOLUTIONS Off */
  /* TS HS6 - STEPS On */
  .ts-hs6 {
    padding: 56px 18px;
  }

  .ts-hs6 .tse-title {
    margin-bottom: 26px !important;
  }

  .ts-hs6 .wp-block-heading.has-x-large-font-size {
    font-size: clamp(2rem, 11vw, 2.55rem);
    line-height: 1.18;
  }

  .ts-hs6 .has-small-font-size {
    max-width: 320px;
    font-size: 1rem;
    line-height: 1.55;
  }

  .ts-hs6-card {
    /* min-height: 350px; */
    padding: 20px 16px;
    border-radius: 16px;
  }

  .ts-hs6-card > .wp-block-group:last-child h2 {
    font-size: 34px;
  }

  .ts-hs6 .swiper-pagination {
    margin-top: 12px;
  }
  .ts-hs6-card p {
    margin-top: 15px;
  }
  /* TS HS6 - STEPS Off */
  /* TS HS7 - INVESTMENT On */
  .ts-hs7 {
    padding: 56px 18px;
  }

  .ts-hs7 .tse-title {
    margin-bottom: 26px !important;
  }

  .ts-hs7 .wp-block-heading.has-x-large-font-size {
    font-size: clamp(2rem, 11vw, 2.55rem);
    line-height: 1.18;
  }

  .ts-hs7 .has-small-font-size {
    max-width: 320px;
    font-size: 1rem;
    line-height: 1.55;
  }

  .ts-hs7-card {
    border-radius: 14px;
    padding: 12px 10px;
  }

  .ts-hs7-card-top {
    padding: 10px 8px;
  }

  .ts-hs7-card-bottom h4 {
    font-size: 22px;
  }

  .ts-hs7 .swiper-pagination {
    margin-top: 12px;
  }
  /* TS HS7 - INVESTMENT Off */
  /* TS HS9 - CTA On */
  .ts-hs9 {
    padding: 34px 12px;
  }

  .ts-hs9 .ts-hs9-cta-inner {
    padding: 30px 14px;
    border-radius: 14px;
  }

  .ts-hs9 .ts-hs9-cta-inner h2 {
    max-width: 320px;
    font-size: clamp(1.95rem, 9.5vw, 2.45rem);
    line-height: 1.18;
    margin-bottom: 10px !important;
  }

  .ts-hs9 .ts-hs9-cta-inner p {
    max-width: 300px;
    font-size: 0.95rem;
    line-height: 1.55;
  }
  .ts-hs9 .ts-hs9-cta-inner .ts-hs9-btns {
      display: none;
  }
  /* TS HS9 - CTA Off */
  /* TS HS8 - BLOG On */
  .ts-hs8 {
    padding: 56px 18px;
  }

  .ts-hs8 .tse-title {
    margin-bottom: 26px !important;
  }

  .ts-hs8 .wp-block-heading.has-x-large-font-size {
    font-size: clamp(2rem, 11vw, 2.55rem);
    line-height: 1.18;
  }

  .ts-hs8 .has-small-font-size {
    max-width: 320px;
    font-size: 1rem;
    line-height: 1.55;
  }

  .ts-hs8 .plumber-3c-blog .wp-block-post-template {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 14px !important;
  }

  .ts-hs8 .ts-hs8-post-info {
    padding: 12px 10px 10px;
  }

  .ts-hs8 .ts-hs8-post-info .wp-block-post-title {
    font-size: 29px;
  }

  .ts-hs8 .ts-center {
    margin-top: 18px !important;
  }

  .ts-hs8 .ts-btn-outline .icon-text-wrapper {
    min-height: 40px;
    padding: 0 16px;
  }
  /* TS HS8 - BLOG Off */
  /* TS HS5 - PROJECTS On */
  .ts-hs5 {
    padding: 56px 20px;
  }

  .ts-hs5 .ts-title {
    margin-bottom: 34px;
  }

  .ts-hs5 .wp-block-heading.has-x-large-font-size {
    font-size: 2.2rem;
    line-height: 1.15;
  }

  .ts-hs5 .has-small-font-size {
    max-width: 320px;
    font-size: 1rem;
    line-height: 1.55;
  }

  .ts-hs5-img {
    margin-bottom: 22px;
  }

  .ts-hs5 .swiper-slide .wp-block-group[style*="justify-content:space-between"] {
    flex-wrap: nowrap !important;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 16px;
  }

  .ts-hs5 .swiper-slide h3 {
    font-size: 1.55rem;
  }

  .ts-hs5 .wp-block-buttons {
    gap: 8px;
    justify-content: flex-end;
  }

  .ts-hs5 .wp-block-button.is-style-outline .wp-block-button__link {
    padding: 6px 12px;
    font-size: 0.8rem;
  }

  .ts-hs5 .swiper-slide p {
    font-size: 1rem;
    line-height: 1.55;
  }

  .ts-hs5-all-btn {
    margin-top: 34px !important;
  }

  .ts-hs5-all-btn .ts-btn-outline .icon-text-wrapper {
    min-height: 52px;
    padding: 0 24px;
  }
  /* TS HS5 - PROJECTS Off */
  /* =========================
   FAQ Section - faq-mobil.png Start
   ========================= */
  .ts-faq-section {
    padding: 50px 20px 44px !important;
  }

  .ts-faq-section > .wp-block-columns {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    max-width: 656px;
  }

  .ts-faq-section > .wp-block-columns > .wp-block-column:first-child {
    display: contents;
  }

  .ts-faq-section > .wp-block-columns > .wp-block-column:nth-child(2) {
    order: 3;
  }

  .ts-faq-section > .wp-block-columns > .wp-block-column:first-child > .wp-block-tanvir-blocks-my-icon-img:first-child {
    order: 1;
  }

  .ts-faq-section h2.wp-block-heading {
    order: 2;
    max-width: 100%;
    margin-top: 31px !important;
    margin-bottom: 95px !important;
    font-size: 32px !important;
    line-height: 1.56;
  }

  .ts-faq-section .wp-block-accordion {
    gap: 18px;
  }

  .ts-faq-section .wp-block-accordion-item {
    border-radius: 16px;
  }

  .ts-faq-section .wp-block-accordion-heading__toggle {
    min-height: 91px;
    padding: 24px 54px 24px 28px;
  }

  .ts-faq-section .wp-block-accordion-heading__toggle-title {
    font-size: 16px;
    line-height: 1.44;
  }

  .ts-faq-section .wp-block-accordion-heading__toggle-icon {
    top: 31px;
    right: 28px;
    width: 19px;
    height: 19px;
    border-width: 2px;
  }

  .ts-faq-section .wp-block-accordion-heading__toggle-icon::before {
    width: 9px;
  }

  .ts-faq-section .wp-block-accordion-heading__toggle-icon::after {
    height: 9px;
  }

  .ts-faq-section .wp-block-accordion-panel {
    padding: 0 28px 25px;
  }

  .ts-faq-section .wp-block-accordion-panel p {
    max-width: none;
    font-size: 15px;
    line-height: 1.35;
  }

  .ts-faq-section .ts-faq-project {
    order: 4;
    max-width: none;
    margin-top: 33px !important;
    padding: 28px 20px;
    border-radius: 24px;
    text-align: center;
  }

  .ts-faq-section .ts-faq-project > p {
    margin-bottom: 28px;
    font-size: 22px;
    font-weight: 600;
  }

  .ts-faq-section .ts-faq-project a.icon-text-wrapper {
    min-height: 42px;
    padding: 5px 17px 5px 5px;
  }

  .ts-faq-section .ts-faq-project a.icon-text-wrapper .icon-container {
    width: 34px !important;
    height: 34px;
  }

  .ts-faq-section .ts-faq-project a.icon-text-wrapper .tanvir-block-des {
    font-size: 18px !important;
  }
.ts-faq-section {
    padding: revert;
}
.has-text-align-left.has-small-font-size {
    position: absolute;
    padding-top: 170px;
}
  
  /* =========================
   FAQ Section - faq-mobil.png End
   ========================= */

  .swiper-c1-client-trust {
    margin-top: 36px;
  }
  .wp-block-group.ts-before-after {
    padding: 24px 12px;
  }
  .wp-block-group.ts-before-after h3.wp-block-heading, .wp-block-group.ts-before-after > p {
      text-align: center;
  }

  .swiper-c1-client-trust span.swiper-pagination-bullet, .wp-block-group.ts-section.ts-story span.swiper-pagination-bullet  {
    width: 16px;
    height: 4px;
    border-radius: 2px;
    background: #3b4af1;
  }
  .swiper-c1-client-trust .swiper-pagination.swiper-pagination-bullets.swiper-pagination-horizontal, .wp-block-group.ts-section.ts-story .swiper-pagination {
      margin-bottom: -14px;
  }
  .swiper-c1-client-trust .swiper-wrapper, .wp-block-group.ts-section.ts-story .swiper-wrapper {
      margin-bottom: 30px;
      margin-top: 24px;
  }
  
  .wp-block-group.ts-section.ts-story .ts-mission-vission h3.wp-block-heading {
      font-size: 24px !important;
  }
  .wp-block-group.ts-section.ts-story .ts-mission-vission .wp-block-tanvir-blocks-slide.swiper-slide .wp-block-group.ts-hs4-card {
      padding: 24px 16px;
  }
  .wp-block-group.ts-section.ts-story .ts-mission-vission .ts-hs4-card > p {
      font-size: 16px !important;
  }
  select.wpcf7-form-control.wpcf7-select {
  width: 100%;
 }
 textarea.wpcf7-form-control.wpcf7-textarea {
  width: 100%;
 }
  .ts-contact-last p.has-text-align-left {
    display: none;
}
  /* === Contact Form 7 End=== */
  .ts-contact-icon-box {
      position: static;
      width: 100%;
      margin-top: 20px !important;
  }
  .ts-contact-icon-box .icon-container {
      padding: 1px;
      margin-right: 5px;
  }
  /* ===Icon-Box End=== */
  .ts-form {
      flex-direction: column;
  }
  .ts-contact-form {
      margin-right:20px 
  }
  .ts-form {
      gap: 0px;
  }
 .ts-form {
  	display: block;
}
  .ts-form-group textarea {
      width: 100%;
      border-radius: 40px;
      height: 12px;
      resize: none;
  }
  .ts-form-group select {
      width: 105%;
  }
	/* Button */
.contact-button  {
    width: 100%;
}

/* Button hover */

  /* === Contact Form 7 End=== */
  footer .wp-block-group.ts-footer {
    margin-bottom: 52px;
  }
  footer .ts-fixed-footer-call-m a.tse-call-wrap span.tse-icon svg.icon-2 {
    right: 8px;
  }
  footer .ts-fixed-footer-call-m {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    background-color: #000;
    box-shadow: 0 -2px 2px #0f172a;
    transition: 0.4s;
    text-align: center;
    padding: 15px 0;
  }
	.ts-terms-conditions p {
		margin-top: 8px;
	}
}


/* ============================================================
   Source: extra.css
   ============================================================ */


/* =============================================================
   Projects Details Start
   ============================================================= */

.project-metaboxs {
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap;
}

.project-metaboxs .project-meta-box {
    padding: 10px 48px;
    background: linear-gradient(180deg, #EFF6FF 0.97%, #D7E9FF 100%);
    border-radius: 8px;
    margin: 6px;
}

.project-metaboxs .project-meta-box p {
    margin: 0;
}

.project-metaboxs .project-meta-box, .ts-project-title {
    text-align: center;
}

.ts-project-title{
    font-size: 48px;
    line-height: 56px;
    font-weight: 600;
    padding-bottom: 40px;
}

.ts-project {
    text-align: left;
    padding-top: 80px;
    padding-bottom: 31px;
    font-size: 36px;
    line-height: 42px;
    font-weight: 700;
}

.ts-project-screens {
    text-align: center;
    padding: 64px 0 64px 0;
}

/* ==ctp-project-On== */

.cpt-project-content h3.wp-block-heading
 {
    padding: 40px 0 24px 0;
    font-size: 36px;
    font-weight: 700;
    line-height: 42px;
}

.cpt-project-content .wp-block-quote {
    background: #CAD5E2;
    border-radius: 24px;
    padding: 25px 40px;
    margin: 64px;
    width: 1052px;
}

.cpt-project-content .wp-block-quote p:nth-child(2) {
    font-size: 20px;
    font-weight: 600;
    color: #0F172A;
    padding-top: 16px;
}

/* ==ctp-project-Off== */

.ts-more-projects {
    padding: 87px 0 48px 0;
}

.ts-more-projects-font .ts-rp-card__title a {
    font-size: 24px;
}

.ts-more-projects-font .ts-rp-card__meta {
    display: none !important;
}

/* =============================================================
   Projects Details The End
   ============================================================= */

/* =============================================================
   Projects Details masonry Gallery Start
   ============================================================= */

/* Masonry container */

.ts-masonry-image-gallery {
    column-count: 2;
    column-gap: 0px;
}

.ts-masonry-image-gallery .ts-masonry-grid {
    background: #DBEAFE;
    padding: 16px;
    border-radius: 24px;
    box-shadow: 0px 2px 2px 0px #0104145e;
    margin: 0px 10px 20px 10px;
	overflow: hidden;
}

.ts-masonry-image-gallery .ts-masonry-grid-title {
    text-align: center;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.5em;
}

/* Each image wrapper */

.ts-masonry-image-gallery .wp-block-image {
    break-inside: avoid;
    margin-bottom: 20px;
}

/* Make images responsive */

.ts-masonry-image-gallery img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 10px; /* optional */
}

/* =============================================================
   Projects Details masonry Gallery End
   ============================================================= */

/* =============================================================
   Projects Shortcode — [travasoft_projects]
   ============================================================= */

.ts-projects-section {
    width: 100%;
}

/* Grid — 2 columns on desktop */

.ts-projects-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 48px 40px;
}

/* Card */

.ts-project-card {
    display: flex;
    flex-direction: column;
}

/* Image wrapper */

.ts-project-card__image-wrap {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    background: #f0f0f0;
    aspect-ratio: 16 / 10;
    margin-bottom: 24px;
}

.ts-project-card__image {
    width: 100%;
    height: 111%;
    object-fit: cover;
    display: block;
    transition: transform 0.45s ease;
}

.ts-project-card__image--placeholder {
    width: 100%;
    height: 100%;
    background: #e8e8e8;
}

/* Hover overlay */

.ts-project-card__overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: rgba(30, 80, 200, 0.72);
    opacity: 0;
    transition: opacity 0.35s ease;
    text-decoration: none;
    border-radius: 8px;
}

.ts-project-card__image-wrap:hover .ts-project-card__overlay {
    opacity: 1;
}

.ts-project-card__image-wrap:hover .ts-project-card__image {
    transform: scale(1.04);
}

.ts-project-card__overlay-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.18);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
}

.ts-project-card__overlay-label {
    color: #fff;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.03em;
}

/* Card body */

.ts-project-card__body {
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* Title + tags row */

.ts-project-card__meta-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.ts-project-card__title {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.25;
    margin: 0;
    color: inherit;
}

/* Tags */

.ts-project-card__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    flex-shrink: 0;
}

.ts-project-card__tag {
    display: inline-block;
    padding: 4px 12px;
    border: 1.5px solid #cbd5e1;
    border-radius: 20px;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #475569;
    white-space: nowrap;
    background: transparent;
}

/* Excerpt */

.ts-project-card__excerpt {
    font-size: 0.95rem;
    line-height: 1.6;
    color: #64748b;
    margin: 0 0 16px;
}

/* Divider */

.ts-project-card__divider {
    border: none;
    border-top: 1px solid #e2e8f0;
    margin: 0;
    margin-top: auto;
}

/* No projects message */

.ts-projects-none {
    grid-column: 1 / -1;
    text-align: center;
    color: #64748b;
    padding: 40px 0;
}

/* Load More button */

.ts-projects-load-more-wrap {
    display: flex;
    justify-content: center;
    margin-top: 48px;
}

.ts-projects-load-more {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 32px;
    background: #1e3a8a;
    color: #fff;
    font-size: 1rem;
    font-weight: 600;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.25s ease, transform 0.2s ease;
    letter-spacing: 0.02em;
}

.ts-projects-load-more:hover {
    background: #1e40af;
    transform: translateY(-1px);
}

.ts-projects-load-more.ts-loading {
    opacity: 0.7;
    cursor: not-allowed;
    transform: none;
}

.ts-projects-load-more svg {
    flex-shrink: 0;
}

/* =============================================================
   Related Posts Shortcode — [related_post]
   ============================================================= */

.ts-related-posts h3.ts-rp-card__title a {
    font-size: 24px;
}

.ts-related-posts {
    display: grid;
    gap: 32px 28px;
    width: 100%;
}

/* Dynamic column counts */

.ts-related-posts--cols-2 { grid-template-columns: repeat(2, 1fr); }

.ts-related-posts--cols-3 { grid-template-columns: repeat(3, 1fr); }

.ts-related-posts--cols-4 { grid-template-columns: repeat(4, 1fr); }

.ts-related-posts__none {
    grid-column: 1 / -1;
    text-align: center;
    color: #64748b;
    padding: 32px 0;
}

/* Card */

.ts-rp-card {
    display: flex;
    flex-direction: column;
}

/* Image */

.ts-rp-card__image-wrap {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: 10px;
    aspect-ratio: 16 / 10;
    margin-bottom: 20px;
    text-decoration: none;
    background: #e8edf2;
}

.ts-rp-card__image {
    width: 100%;
    height: 111%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}

.ts-rp-card__image-wrap:hover .ts-rp-card__image {
    transform: scale(1.04);
}

.ts-rp-card__image--placeholder {
    width: 100%;
    height: 100%;
    background: #dde3ea;
}

/* Category badge — top-right pill */

.ts-rp-card__badge {
    position: absolute;
    top: 14px;
    right: 14px;
    display: inline-block;
    padding: 5px 14px;
    border-radius: 20px;
    background: #2563eb;
    color: #fff;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1;
    white-space: nowrap;
    pointer-events: none;
}

/* Body */

.ts-rp-card__body {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.ts-rp-card__title {
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.3;
    margin: 0 0 10px;
}

.ts-rp-card__title a {
    color: inherit;
    text-decoration: none;
    transition: color 0.2s ease;
}

.ts-rp-card__title a:hover {
    color: #2563eb;
}

.ts-rp-card__excerpt {
    font-size: 0.9rem;
    line-height: 1.6;
    color: #64748b;
    margin: 0 0 16px;
    flex: 1;
}

.ts-rp-card__divider {
    border: none;
    border-top: 1px solid #e2e8f0;
    margin: 0 0 12px;
}

/* Meta row: date · comments */

.ts-rp-card__meta {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.82rem;
    color: #94a3b8;
}

.ts-rp-card__meta-dot {
    font-size: 1rem;
    line-height: 1;
    color: #cbd5e1;
}

.single-post .tsoft-white-cta-m .wp-block-column:nth-child(2) {
    text-align: center;
}

/* =============================================================
   Related Posts — Responsive
   ============================================================= */

.ts-blog-sec .wp-block-query ul.columns-3 {
    margin: 60px 0;
}

.ts-blog-sec .icon-container svg {
    margin-bottom: -6px;
    transition: 0.3s;
}

.ts-blog-sec a.icon-text-wrapper {
    padding: 7px 20px !important;
    margin-top: 40px;
    transition: 0.3s;
}

.ts-blog-sec a.icon-text-wrapper:hover {
    background: #3b5af1 !important;
    transition: 0.3s;
}

.ts-blog-sec a.icon-text-wrapper:hover .icon-container svg {
    fill: #ffffff;
    transform: rotate(-45deg);
    transition: 0.3s;
}

.ts-blog-sec a.icon-text-wrapper:hover span.tanvir-block-des {
    color: #ffffff;
    transition: 0.3s;
}

.page-numbers {
    padding: 7px 24px;
    border-radius: 50px;
    border: 1px solid #3b5af1;
    color: #3b5af1;
    margin: 0 4px;
}

.page-numbers.current {
    background: #3b5af1;
    color: #ffffff;
    transition: 0.3s;
}

.wp-block-query-pagination-next, .wp-block-query-pagination-previous {
    padding: 4px 14px;
    border-radius: 50px;
    border: 1px solid #3b5af1;
    color: #3b5af1;
    margin: 0 8px !important;
}

/* ts hs7i2 pricing tabs On */

/* Tabs */

.ts-hs7i2-tabs-wrap{text-align:center;}

.ts-hs7i2-tabs{display:inline-flex;gap:6px;background:#eef0fd;border:1px solid #e3e8e9;padding:6px;border-radius:999px;margin:0 auto 16px;}

.ts-hs7i2-tab{
    border:0;background:transparent;font:inherit;font-weight:600;font-size:.98rem;color:#6b7a80;
    padding:11px 26px;border-radius:999px;cursor:pointer;display:inline-flex;align-items:center;gap:8px;
  }

.ts-hs7i2-tab .ts-hs7i2-dot{width:8px;height:8px;border-radius:50%;background:#c2cbcc;}

.ts-hs7i2-tab[aria-selected="true"]{background:#ffffff;color:#2d47d4;box-shadow:0 1px 2px rgba(22,36,42,.06), 0 4px 12px rgba(22,36,42,.08);}

.ts-hs7i2-tab[aria-selected="true"] .ts-hs7i2-dot{background:#3b5af1;}

.ts-hs7i2-tab:focus-visible{outline:2px solid #3b5af1;outline-offset:2px;}

/* Panels */

.ts-hs7i2-panel[hidden]{display:none;}

.ts-hs7i2-tab-intro{text-align:center;max-width:680px;margin:6px auto 40px;color:#4a5b62;font-size:1.02rem;}

/* Cards */

.ts-hs7i2-cards{display:grid;grid-template-columns:repeat(2,1fr);gap:28px;align-items:stretch;}

.ts-hs7i2-card{position:relative;display:flex;flex-direction:column;background:#ffffff;border:1px solid #e3e8e9;border-radius:16px;padding:34px 32px;box-shadow:0 1px 2px rgba(22,36,42,.04), 0 8px 24px rgba(22,36,42,.06);}

.ts-hs7i2-card.ts-hs7i2-featured{border:1.5px solid #3b5af1;box-shadow:0 2px 4px rgba(22,36,42,.05), 0 18px 40px rgba(59,90,241,.12);}

.ts-hs7i2-badge{position:absolute;top:-13px;right:28px;background:#3b5af1;color:#fff;font-size:.74rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:7px 14px;border-radius:999px;box-shadow:0 6px 16px rgba(59,90,241,.28);}

/* Speed chip (NEW) */

.ts-hs7i2-speed-badge{
    display:inline-flex;align-items:center;gap:7px;align-self:flex-start;
    font-size:.78rem;font-weight:700;letter-spacing:.01em;color:#2d47d4;
    background:#eef1fd;border:1px solid #c5cef9;
    padding:6px 12px;border-radius:999px;margin-bottom:16px;
  }

.ts-hs7i2-speed-badge .ts-hs7i2-bolt{font-size:.85rem;line-height:1;}

.ts-hs7i2-card-eyebrow{font-size:.76rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:#3b5af1;margin-bottom:12px;}

.ts-hs7i2-card h3{font-size:1.4rem;font-weight:800;letter-spacing:-.01em;margin:0 0 10px;color:#16242a;}

.ts-hs7i2-card-desc{color:#4a5b62;font-size:.96rem;margin:0 0 24px;min-height:48px;}

/* Price */

.ts-hs7i2-price{padding:22px 0 20px;border-top:1px solid #e3e8e9;border-bottom:1px solid #e3e8e9;margin-bottom:22px;}

.ts-hs7i2-price .ts-hs7i2-amount{font-size:2.1rem;font-weight:800;letter-spacing:-.02em;color:#16242a;line-height:1.12;}

.ts-hs7i2-price .ts-hs7i2-amount .ts-hs7i2-per{display:block;font-size:1.05rem;font-weight:600;color:#2d47d4;margin-top:3px;}

.ts-hs7i2-commitment{display:inline-flex;align-items:center;gap:7px;margin-top:14px;font-size:.82rem;font-weight:600;color:#4a5b62;background:#f1f4f4;border:1px solid #e3e8e9;padding:6px 12px;border-radius:999px;}

.ts-hs7i2-commitment::before{content:"";width:7px;height:7px;border-radius:50%;background:#3b5af1;}

/* Button */

.ts-hs7i2-btn{display:block;text-align:center;text-decoration:none;font-weight:700;font-size:1rem;padding:15px 18px;border-radius:10px;background:#3b5af1;color:#fff;border:1px solid #2d47d4;box-shadow:0 8px 18px rgba(59,90,241,.18);margin-bottom:28px;cursor:pointer;}

.ts-hs7i2-btn.ts-hs7i2-secondary{background:#fff;color:#2d47d4;border:1.5px solid #3b5af1;box-shadow:none;}

/* Feature groups */

.ts-hs7i2-includes + .ts-hs7i2-includes{margin-top:24px;}

.ts-hs7i2-includes h4{font-size:.82rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:#6b7a80;margin:0 0 14px;}

.ts-hs7i2-feature-list{list-style:none;margin:0;padding:0;}

.ts-hs7i2-feature-list li{position:relative;padding-left:30px;margin-bottom:11px;font-size:.94rem;color:#4a5b62;}

.ts-hs7i2-feature-list li::before{content:"✓";position:absolute;left:0;top:1px;width:19px;height:19px;display:flex;align-items:center;justify-content:center;font-size:.72rem;font-weight:800;color:#3b5af1;background:#eef1fd;border-radius:50%;}

.ts-hs7i2-feature-list.ts-hs7i2-excluded li{color:#6b7a80;}

.ts-hs7i2-feature-list.ts-hs7i2-excluded li::before{content:"✕";color:var(--no);background:#f7eceb;}

.ts-hs7i2-divider-soft{height:1px;background:#e3e8e9;margin:24px 0;}

.ts-hs7i2-card-note{margin:20px auto 0;max-width:560px;text-align:center;font-size:.9rem;color:#6b7a80;background:#fff;border:1px dashed #d3dadb;border-radius:10px;padding:16px 20px;}

.ts-hs7i2-card-note strong{color:#16242a;font-weight:700;}

.ts-hs7i2-bottom-note{margin:56px auto 0!important;max-width:760px !important;text-align:center;font-size:.98rem;color:#4a5b62;background:#eef1fd;border:1px solid #c5cef9;border-radius:16px;padding:22px 28px;}

.ts-hs7i2-bottom-note strong{color:#2d47d4;}

.ts-hs7i2-btn:hover {
    background: #fff;
    transition: 0.3s;
}

a.ts-hs7i2-btn.ts-hs7i2-secondary:hover {
    background: rgb(59, 90, 241);
    color: #fff;
    transition: 0.3s;
}

.ts-hs7i2-btn, .ts-hs7i2-btn.ts-hs7i2-secondary {
    transition: 0.3s;
}

/* =============================================================
   ts hs7i2 pricing tabs Off
   ============================================================= */

.ts-featured-product {
    border: 1px solid #3b5af1;
    border-radius: 12px;
    padding: 36px 28px !important;
    margin-top: 60px !important;
}

.ts-featured-product > p.wp-block-paragraph {
    margin-top: -55px;
    margin-bottom: 25px;
    background: #3b5af1;
    border-radius: 6px;
    color: #fff;
    padding: 6px;
}

.ts-featured-product .icon-text-wrapper {
    padding: 10px 10px 25px 10px;
}

.ts-featured-product .icon-text-wrapper span.tanvir-block-des {
    font-size: 14px !important;
    padding-top: 10px;
    display: inline-block;
}

.ts-featured-product .icon-text-wrapper strong.tanvir-block-title {
    font-size: 20px !important;
}

.ts-featured-product .icon-text-wrapper .icon-container {
    width: 190px !important;
}

/*============= For responsive CSS3 Start Now >--->==============*/

/* Medium Layout 1280px */

@media only screen and (min-width:992px) { }

/* Tablet Layout: 768px */

@media only screen and (min-width:768px) and (max-width:991px){
    .ts-related-posts--cols-4,
    .ts-related-posts--cols-3 {
        grid-template-columns: repeat(2, 1fr);
    }
    .ts-related-posts--cols-2 {
        grid-template-columns: 1fr;
    }
    .ts-rp-card__title {
        font-size: 1.05rem;
    }

    .ts-projects-grid {
        grid-template-columns: 1fr;
        gap: 40px 0;
    }

    .ts-project-card__meta-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .ts-project-card__title {
        font-size: 1.3rem;
    }

    .ts-masonry-image-gallery {
        column-count: 2;
    }
}

/* Mobile Layout 320px */

@media only screen and (max-width:767px){ 
    .ts-related-posts--cols-4,
    .ts-related-posts--cols-3,
    .ts-related-posts--cols-2 {
        grid-template-columns: 1fr;
        gap: 28px 0;
    }
    .ts-rp-card__image-wrap {
        aspect-ratio: 4 / 3;
        margin-bottom: 14px;
    }
    .ts-rp-card__title {
        font-size: 1rem;
    }
    .ts-rp-card__excerpt {
        font-size: 0.88rem;
    }

    .ts-masonry-image-gallery {
        column-count: 1;
        column-gap: 12px;
    }
    .ts-masonry-image-gallery .ts-masonry-grid {
        padding: 4px;
        border-radius: 10px;
        margin-bottom: 20px;
    }
    .ts-masonry-image-gallery .ts-masonry-grid-title {
        font-size: 18px;
        font-weight: 400;
    }
    .ts-masonry-image-gallery .wp-block-image {
        margin-bottom: 12px;
    }
    .ts-projects-grid {
        gap: 32px 0;
    }

    .ts-project-card__image-wrap {
        aspect-ratio: 4 / 3;
        margin-bottom: 16px;
    }

    .ts-project-card__title {
        font-size: 1.15rem;
    }

    .ts-project-card__excerpt {
        font-size: 0.9rem;
    }

    .ts-projects-load-more {
        width: 100%;
        justify-content: center;
        padding: 14px 20px;
    }

    .ts-projects-load-more-wrap {
        margin-top: 32px;
    }
    /* Projects Details Start */
    .project-metaboxs .project-meta-box {
        width: 50%;
    }
    /* Projects Details The End */
    .ts-projects-grid {
        grid-template-columns: repeat(1, 1fr);
    }
    .ts-project {
        text-align: center;
        padding-top: 40px;
    }
    .ts-project-screens {
        text-align: center;
        padding: 45px 0 45px 0;
    }
    /* ==ctp-project-On== */
    .cpt-project-content h3.wp-block-heading{
        text-align: center;
    }
    .cpt-project-content .wp-block-quote {
        padding: 15px  10px;
        margin: 30px 0;
        width: 100%;
    }
    .cpt-project-content .wp-block-quote p:nth-child(2) {
        font-size: 16px;
    }
    /* ==ctp-project-Off== */
    .ts-more-projects {
        padding: 36px 0 36px 0;
    }
    .ts-more-projects-font .ts-rp-card {
        margin-top: -36px;
    }
    .ts-related-posts h3.ts-rp-card__title a {
        font-size: 20px;
    }

    
    .ts-hs7i2-pricing{padding:52px 18px 64px;}
    .ts-hs7i2-section-head h2{font-size:1.7rem;}
    .ts-hs7i2-cards{grid-template-columns:1fr;gap:34px;}
    .ts-hs7i2-tabs{display:flex;width:100%;}
    .ts-hs7i2-tab{flex:1;justify-content:center;padding:11px 10px;font-size:.9rem;}
    .ts-hs7i2-card{padding:30px 24px;}
    .ts-hs7i2-badge{right:50%;transform:translateX(50%);}

.ts-featured-product {
    border: 1px solid #3b5af1;
    border-radius: 12px;
    padding: 20px 0px !important;
    margin-top: 40px !important;
}
.ts-featured-product > p.wp-block-paragraph {
    margin-top: -30px;
    margin-bottom: 10px;
    background: #3b5af1;
    border-radius: 6px;
    color: #fff;
    padding: 6px;
}
.ts-featured-product .icon-text-wrapper {
    padding: 10px;
}
.ts-featured-product .icon-text-wrapper span.tanvir-block-des {
    font-size: 12px !important;
    padding-top: 10px;
}
.ts-featured-product .icon-text-wrapper strong.tanvir-block-title {
    font-size: 18px !important;
}
	
}

/* Wide Mobile Layout 480px */

@media only screen and (min-width:480px) and (max-width:766px){}

/*================= <---End---> responsive CSS3 ===================*/

/* =============================================================
   TS Comparison Section — ts-hs12 (comparison3)
   ============================================================= */

/* ── Bottom 4-icons grid ── */

.ts-hs12-4icons {
    padding: 24px 32px !important;
    margin-top: 32px !important;
    gap: 0 !important;
}

/* Dividers between the 4 items */

.ts-hs12-4icons .wp-block-tanvir-blocks-my-icon-img {
    padding: 0 24px;
    border-right: 1px solid #e2e8f0;
}

.ts-hs12-4icons .wp-block-tanvir-blocks-my-icon-img:last-child {
    border-right: none;
}

.ts-hs12-4icons .wp-block-tanvir-blocks-my-icon-img .icon-text-wrapper {
    align-items: center !important;
    gap: 16px !important;
}

.ts-hs12-4icons .wp-block-tanvir-blocks-my-icon-img .icon-container {
    flex-shrink: 0;
}

.ts-hs12-4icons .wp-block-tanvir-blocks-my-icon-img .tanvir-block-title {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #0f172a;
    display: block;
    margin-bottom: 3px;
}

.ts-hs12-4icons .wp-block-tanvir-blocks-my-icon-img .tanvir-block-des {
    font-size: 13px !important;
    color: #64748b;
    line-height: 1.4;
}

:root {
  --color-primary: #2563eb;
  --color-primary-dark: #1e40af;
  --color-primary-light: #dbeafe;
  --color-danger: #dc2626;
  --color-success: #059669;
  --color-success-light: #d1fae5;
  --color-success-dark: #047857;

  --color-text: #0f172a;
  --color-text-soft: #1f2937;
  --color-muted: #475569;
  --color-border: #e2e8f0;
  --color-bg: #ffffff;
  --color-bg-soft: #f8fafc;

  --color-dark-border: rgba(255,255,255,0.08);
  --color-dark-text: #ffffff;
  --color-dark-text-soft: #e2e8f0;

  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --fs-xs: 0.75rem;
  --fs-sm: 0.875rem;
  --fs-base: 1rem;
  --fs-lg: 1.125rem;
  --fs-4xl: 3rem;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;

  --radius-md: 12px;
  --radius-2xl: 32px;
  --radius-full: 999px;

  --shadow-md: 0 4px 12px rgba(15,23,42,0.06);
  --shadow-lg: 0 10px 30px rgba(15,23,42,0.08);

  --container-max: 1280px;
  --container-px: clamp(1rem, 4vw, 2.5rem);

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --t-base: 280ms;
}

.block-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.5rem 1rem;
  background: var(--color-primary-light);
  color: var(--color-primary-dark);
  border-radius: var(--radius-full);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.block-eyebrow::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--color-primary);
}

.block-heading-section {
  text-align: center;
  max-width: 820px;
  margin: 0 auto var(--space-12);
}

.block-heading-section .element-title {
  font-size: clamp(1.75rem, 4vw, var(--fs-4xl));
  margin: var(--space-5) 0 var(--space-4);
  color: var(--color-text);
}

.block-heading-section .element-title .is-accent { color: var(--color-primary); }

.block-heading-section .element-subtitle {
  font-size: var(--fs-lg);
  color: var(--color-muted);
  line-height: 1.6;
}

.section-comparison {
  padding: var(--space-20) 0;
  background:
    radial-gradient(1200px 600px at 50% -200px, rgba(37,99,235,0.06), transparent 60%),
    var(--color-bg-soft);
  position: relative;
  overflow: hidden;
}

.section-comparison::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 1px 1px, rgba(15,23,42,0.04) 1px, transparent 0);
  background-size: 24px 24px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 50%, #000 30%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 50%, #000 30%, transparent 70%);
  pointer-events: none;
}

.section-comparison > .container { position: relative; }

.block-comparison-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
  position: relative;
  align-items: stretch;
}

.element-vs-badge {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 64px; height: 64px;
  background: #ffffff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: var(--fs-sm);
  color: var(--color-text);
  letter-spacing: 0.05em;
  box-shadow: 0 0 0 1px var(--color-border), 0 10px 30px rgba(15,23,42,0.08);
  z-index: 5;
  outline: 6px dashed rgba(148,163,184,0.35);
  outline-offset: 6px;
}

.block-compare-card {
  position: relative;
  border-radius: var(--radius-2xl);
  padding: clamp(1.5rem, 2.5vw, 2.25rem);
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  overflow: hidden;
  isolation: isolate;
  animation: fadeUp 700ms var(--ease-out) both;
}

.block-compare-card.is-before {
  background:
    radial-gradient(110% 75% at 100% 100%, rgba(239,68,68,0.38), transparent 55%),
    radial-gradient(80% 50% at 90% 0%, rgba(220,38,38,0.18), transparent 60%),
    linear-gradient(160deg, #0b1220 0%, #14101e 50%, #2a0d12 100%);
  color: var(--color-dark-text);
  border: 1px solid var(--color-dark-border);
  box-shadow: 0 30px 60px -20px rgba(15,23,42,0.45);
}

.block-compare-card.is-after {
  background: #ffffff;
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-lg);
  animation-delay: 120ms;
}

.block-compare-card.is-before .wp-block-heading { color: #ffffff; }

.block-compare-card.is-before .wp-block-heading mark { color: #ef4444; }

.element-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
}

.element-card-head { flex: 1; min-width: 0; }

.element-card-head h3 {
    font-size: 24px;
    line-height: 1.5em;
}

.element-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.4rem 0.85rem;
  border-radius: var(--radius-full);
  font-size: var(--fs-xs);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: var(--space-5);
}

.element-tag.is-danger {
  background: rgba(239,68,68,0.22);
  color: #fecaca;
  box-shadow: 0 0 0 1px rgba(239,68,68,0.25);
}

.element-tag.is-success {
  background: var(--color-success-light);
  color: var(--color-success-dark);
}

.element-tag svg { width: 14px; height: 14px; }

.element-card-title {
  font-size: clamp(1.35rem, 2.4vw, 1.75rem);
  font-weight: 700;
  margin-bottom: var(--space-2);
  letter-spacing: -0.01em;
  line-height: 1.2;
}

.element-card-subtitle {
  font-size: clamp(1.35rem, 2.4vw, 1.75rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.2;
}

.block-compare-card.is-before .element-card-subtitle { color: #ef4444; }

.block-compare-card.is-after  .element-card-subtitle { color: var(--color-primary); }

.element-card-visual {
  width: 160px;
  height: 130px;
  flex-shrink: 0;
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

/* ---- SPEEDOMETER (shared base) ---- */

.element-speedometer {
  width: 160px;
  height: 110px;
  position: relative;
}

.element-speedometer svg { width: 100%; height: 100%; overflow: visible; }

.element-speedometer .arc-fill {
  stroke-dasharray: 220;
  stroke-dashoffset: 220;
}

.element-speedometer .meter-label {
  font-size: 9.5px;
  font-weight: 600;
  font-family: var(--font-sans);
}

.element-speedometer .needle {
  transform-origin: 80px 80px;
  transform: rotate(-90deg);
}

.element-speedometer .needle-line {
  stroke-width: 2.5;
  stroke-linecap: round;
}

.element-speedometer .needle-cap-outer { stroke-width: 1.5; }

/* ---- RED METER (Before card) — loops needle between 50 ↔ 80 ---- */

.element-speedometer.is-red .arc-bg { stroke: rgba(255,255,255,0.18); }

.element-speedometer.is-red .arc-fill {
  stroke: url(#meterGradient);
  filter:
    drop-shadow(0 0 6px rgba(239,68,68,0.9))
    drop-shadow(0 0 14px rgba(220,38,38,0.6));
  animation: meterFillRed 2.2s var(--ease-in-out) infinite alternate;
}

.element-speedometer.is-red .meter-label { fill: #e2e8f0; }

.element-speedometer.is-red .meter-label.is-hot { fill: #fca5a5; }

.element-speedometer.is-red .meter-label.is-active { fill: #fecaca; }

.element-speedometer.is-red .needle-line { stroke: #f1f5f9; }

.element-speedometer.is-red .needle-cap-outer { fill: #94a3b8; stroke: #cbd5e1; }

.element-speedometer.is-red .needle-cap-inner { fill: #0b1220; }

.element-speedometer.is-red .needle {
  animation: needleSweepRed 2.2s var(--ease-in-out) infinite alternate;
}

@keyframes needleSweepRed {
  0%   { transform: rotate(0deg); }    /* points around 50 */
  100% { transform: rotate(54deg); }   /* points around 80 */
}

@keyframes meterFillRed {
  0%   { stroke-dashoffset: 110; }     /* fill to 50 */
  100% { stroke-dashoffset: 44; }      /* fill to 80 */
}

/* ---- GREEN METER (After card) — loops needle between 90 ↔ 100 ---- */

.element-speedometer.is-green .arc-bg { stroke: rgba(5,150,105,0.14); }

.element-speedometer.is-green .arc-fill {
  stroke: url(#meterGradientGreen);
  filter: drop-shadow(0 0 8px rgba(5,150,105,0.45));
  animation: meterFillGreen 1.8s var(--ease-in-out) infinite alternate;
}

.element-speedometer.is-green .meter-label { fill: #64748b; }

.element-speedometer.is-green .meter-label.is-active { fill: var(--color-success-dark); font-weight: 800; }

.element-speedometer.is-green .needle-line { stroke: var(--color-success-dark); }

.element-speedometer.is-green .needle-cap-outer { fill: #d1fae5; stroke: #10b981; }

.element-speedometer.is-green .needle-cap-inner { fill: var(--color-success-dark); }

.element-speedometer.is-green .needle {
  animation: needleSweepGreen 1.8s var(--ease-in-out) infinite alternate;
}

@keyframes needleSweepGreen {
  0%   { transform: rotate(72deg); }   /* points around 90 */
  100% { transform: rotate(90deg); }   /* points to 100 */
}

@keyframes meterFillGreen {
  0%   { stroke-dashoffset: 22; }      /* fill to 90 */
  100% { stroke-dashoffset: 0; }       /* fill to 100 */
}

.block-feature-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  flex: 1;
}

.element-feature-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-md);
  transition: transform var(--t-base) var(--ease-out), background var(--t-base) var(--ease-out);
}

.block-compare-card.is-before .element-feature-item {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.07);
}

.block-compare-card.is-after .element-feature-item {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  justify-content: space-between;
}

.element-feature-item:hover { transform: translateX(2px); }

.block-compare-card.is-after .element-feature-item:hover {
  border-color: #bfdbfe;
  background: #fafbff;
}

.element-feature-icon {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.element-feature-icon svg { width: 18px; height: 18px; }

.block-compare-card.is-before .element-feature-icon {
  background: rgba(239,68,68,0.22);
  color: #fca5a5;
  box-shadow: 0 0 0 1px rgba(239,68,68,0.15);
}

.block-compare-card.is-after .element-feature-icon {
  background: var(--color-primary-light);
  color: var(--color-primary);
}

.element-feature-text {
  font-size: var(--fs-sm);
  line-height: 1.5;
  font-weight: 500;
}

.block-compare-card.is-before .element-feature-text { color: var(--color-dark-text-soft); }

.block-compare-card.is-after  .element-feature-text {
  color: var(--color-text-soft);
  flex: 1;
}

.element-feature-chev {
  width: 16px;
  height: 16px;
  color: var(--color-muted);
  flex-shrink: 0;
  transition: transform var(--t-base) var(--ease-out);
}

.element-feature-item:hover .element-feature-chev { transform: translateX(3px); }

.element-benefit-icon svg { width: 24px; height: 24px; }

.element-benefit:hover .element-benefit-icon { transform: scale(1.08) rotate(-3deg); }

@keyframes fadeUp {
  0%   { opacity: 0; transform: translateY(16px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* =========================================================
   RESPONSIVE — Mobile: VS sits between the two cards
   ========================================================= */

@media (max-width: 960px) {
  .block-comparison-grid {
    grid-template-columns: 1fr;
    grid-template-areas:
      "before"
      "vs"
      "after";
    gap: 0;
  }
  .block-compare-card.is-before {
    grid-area: before;
    margin-bottom: var(--space-3);
  }
  .element-vs-badge {
    grid-area: vs;
    position: relative;
    left: auto;
    top: auto;
    transform: none;
    justify-self: center;
    margin: var(--space-2) auto;
  }
  .block-compare-card.is-after {
    grid-area: after;
    margin-top: var(--space-3);
  }
}

@media only screen and (max-width: 767px) {
    
    .ts-hs12-4icons {
        padding: 20px 16px !important;
    }
    .ts-hs12-4icons .wp-block-tanvir-blocks-my-icon-img {
        padding: 12px 0;
        border-right: none;
        border-bottom: 1px solid #e2e8f0;
    }
    .ts-hs12-4icons .wp-block-tanvir-blocks-my-icon-img:last-child {
        border-bottom: none;
    }
}

@media (max-width: 560px) {
  .section-comparison { padding: var(--space-16) 0; }
  .element-card-top { flex-direction: column; align-items: stretch; }
  .element-card-visual { width: 100%; height: 130px; align-self: center; }
  .element-speedometer,
  .element-speedometer.is-green { width: 180px; }
  .element-feature-item { padding: var(--space-3) var(--space-4); }
}

/* Very small screens (320px - 380px) */

@media (max-width: 380px) {
  :root {
    --container-px: 0.875rem;
  }
  .section-comparison { padding: var(--space-12) 0; }
  .block-heading-section { margin-bottom: var(--space-8); }
  .block-heading-section .element-title { font-size: 1.5rem; }
  .block-heading-section .element-subtitle { font-size: var(--fs-base); }
  .block-compare-card { padding: var(--space-4); border-radius: 20px; }
  .element-card-title,
  .element-card-subtitle { font-size: 1.2rem; }
  .element-card-visual { height: 120px; }
  .element-speedometer { width: 160px; }
  .element-speedometer.is-green { width: 160px; }
  .element-feature-item { padding: 0.7rem 0.85rem; gap: 0.625rem; }
  .element-feature-icon { width: 34px; height: 34px; }
  .element-feature-icon svg { width: 16px; height: 16px; }
  .element-feature-text { font-size: 0.8125rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}


/* ============================================================
   Source: ai-after-live.css
   ============================================================ */


/* =========================================================
   TRAVASOFT — DIGITAL PRODUCTS SECTION
   Design tokens → Section → Components
   ========================================================= */

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  color: #475569;
  background: #F5F7FB;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

button { font-family: inherit; cursor: pointer; }

a { color: inherit; text-decoration: none; }

ul { list-style: none; padding: 0; margin: 0; }

/* =========================================================
   SECTION SHELL
   ========================================================= */

.ts-hs11fp2-section-products {
  position: relative;
  background:
    radial-gradient(1200px 600px at 90% 0%, rgba(59,90,241,.05), transparent 60%),
    radial-gradient(900px 500px at 10% 100%, rgba(59,90,241,.04), transparent 60%),
    linear-gradient(180deg, #F8FAFD 0%, #F2F5FB 100%);
  padding: clamp(48px, 6vw, 96px) 0 clamp(64px, 7vw, 112px);
  overflow: hidden;
}

.ts-hs11fp2-section-products .ts-hs11fp2-container {
  width: 100%;
  max-width: calc(1280px + 32px);
  margin: 0 auto;
  padding: 0 clamp(16px, 5vw, 16px);
  position: relative;
  z-index: 1;
}

@media (min-width: 1440px) {
  .ts-hs11fp2-section-products .ts-hs11fp2-container { padding: 0 16px; }
}

/* =========================================================
   FEATURED PRODUCT WRAPPER
   ========================================================= */

.ts-hs11fp2-block-featured-wrap {
  position: relative;
  margin: clamp(40px, 5vw, 72px) auto 0;
}

.ts-hs11fp2-block-featured-badge {
  position: absolute;
  top: -22px;
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 28px;
  background: linear-gradient(135deg, #3B5AF1 0%, #2A45D4 100%);
  color: #fff;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
  box-shadow: 0 4px 12px rgba(59,90,241,.18);
  z-index: 3;
  white-space: nowrap;
}

/* Card */

.ts-hs11fp2-block-featured-card {
  background: #fff;
  border: 1px solid #E6E9F2;
  border-radius: 28px;
  padding: clamp(28px, 4vw, 56px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(32px, 4vw, 56px);
  align-items: center;
  box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 6px 20px rgba(15,23,42,.05);
  position: relative;
}

@media (max-width: 980px) {
  .ts-hs11fp2-block-featured-card {
    grid-template-columns: 1fr;
    gap: 40px;
    padding-top: clamp(40px, 8vw, 56px);
  }
}

/* =========================================================
   PRODUCT INFO (left side)
   ========================================================= */

.ts-hs11fp2-block-product-info {
  min-width: 0;
}

.ts-hs11fp2-block-product-headrow {
  display: flex;
  align-items: flex-start;
  gap: clamp(16px, 2vw, 28px);
  margin-bottom: 22px;
}

.ts-hs11fp2-block-product-icon {
  flex-shrink: 0;
  width: clamp(64px, 8vw, 88px);
  height: clamp(64px, 8vw, 88px);
  display: grid;
  place-items: center;
  background: #fff;
  border-radius: 18px;
  border: 1px solid #E6E9F2;
  color: #3B5AF1;
  box-shadow: 0 4px 14px rgba(59,90,241,.08), inset 0 -2px 0 rgba(11,23,51,.03);
  transition: transform .35s cubic-bezier(0.22, 1, 0.36, 1);
}

.ts-hs11fp2-block-product-icon svg {
  width: 58%;
  height: 58%;
}

.ts-hs11fp2-block-featured-card:hover .ts-hs11fp2-block-product-icon {
  transform: translateY(-3px) rotate(-3deg);
}

.ts-hs11fp2-element-product-title {
  margin: 6px 0 0;
  font-size: clamp(24px, 2.8vw, 34px);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: #334155;
}

.ts-hs11fp2-element-product-desc {
  margin: 0;
  font-size: clamp(14px, 1.2vw, 16px);
  line-height: 1.75;
  color: #475569;
  max-width: 480px;
}

.ts-hs11fp2-element-divider {
  margin: clamp(24px, 3vw, 36px) 0;
  border: 0;
  height: 1px;
  background: #E6E9F2;
}

/* feature grid — left-aligned, icon + title inline */

.ts-hs11fp2-block-feature-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(20px, 2.6vw, 30px) clamp(20px, 2.4vw, 36px);
}

.ts-hs11fp2-block-feature-item {
  text-align: left;
  padding: 4px 0;
  border-radius: 10px;
  transition: transform .3s cubic-bezier(0.22, 1, 0.36, 1);
}

.ts-hs11fp2-block-feature-item:hover { transform: translateY(-2px); }

.ts-hs11fp2-element-feature-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.ts-hs11fp2-element-icon {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  color: #3B5AF1;
  transition: transform .3s cubic-bezier(0.22, 1, 0.36, 1);
}

.ts-hs11fp2-element-icon svg { width: 100%; height: 100%; }

.ts-hs11fp2-block-feature-item:hover .ts-hs11fp2-element-icon { transform: scale(1.12); }

.ts-hs11fp2-element-feature-label {
  margin: 0;
  font-size: clamp(14px, 1.2vw, 16px);
  font-weight: 700;
  color: #0F172A;
  letter-spacing: -.01em;
  line-height: 1.2;
}

.ts-hs11fp2-element-feature-desc {
  margin: 0;
  font-size: clamp(12px, 1vw, 13.5px);
  line-height: 1.55;
  color: #7C879D;
}

/* =========================================================
   MOCKUP STAGE (right side)
   ========================================================= */

.ts-hs11fp2-block-mockup-stage {
  position: relative;
  min-width: 0;
}

/* ---------- DASHBOARD CARD ---------- */

.ts-hs11fp2-block-dashboard {
  display: grid;
  grid-template-columns: 56px 1fr;
  background: #fff;
  border: 1px solid #E6E9F2;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(15,23,42,.05), 0 16px 40px rgba(15,23,42,.08);
  font-size: 12px;
  position: relative;
  transform: perspective(1200px) rotateY(-2deg) rotateX(2deg);
  transition: transform .6s cubic-bezier(0.22, 1, 0.36, 1);
}

.ts-hs11fp2-block-mockup-stage:hover .ts-hs11fp2-block-dashboard {
  transform: perspective(1200px) rotateY(0deg) rotateX(0deg);
}

/* Sidebar */

.ts-hs11fp2-block-dash-side {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 10px 0;
  background: #fff;
  border-right: 1px solid #EEF1F5;
}

.ts-hs11fp2-element-side-logo {
  width: 36px;
  height: 36px;
  background: #3B5AF1;
  border: 0;
  border-radius: 10px;
  display: grid;
  place-items: center;
  margin-bottom: 8px;
  box-shadow: 0 2px 8px rgba(59,90,241,.18);
}

.ts-hs11fp2-element-side-logo svg { width: 20px; height: 20px; }

.ts-hs11fp2-element-side-btn {
  width: 36px;
  height: 36px;
  background: transparent;
  border: 0;
  border-radius: 8px;
  display: grid;
  place-items: center;
  color: #7C879D;
  transition: background .2s, color .2s;
}

.ts-hs11fp2-element-side-btn:hover { background: #F6F8FC; color: #334155; }

.ts-hs11fp2-element-side-btn.ts-hs11fp2-is-active {
  background: #ECEFFE;
  color: #3B5AF1;
}

.ts-hs11fp2-element-side-btn svg { width: 18px; height: 18px; }

/* Main */

.ts-hs11fp2-block-dash-main {
  padding: 14px 16px 16px;
  background: #fff;
  min-width: 0;
}

.ts-hs11fp2-block-dash-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.ts-hs11fp2-element-dash-title {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: #0F172A;
  letter-spacing: -.01em;
}

/* Dropdown */

.ts-hs11fp2-block-dropdown { position: relative; }

.ts-hs11fp2-element-dropdown-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px 6px 12px;
  background: #fff;
  border: 1px solid #E6E9F2;
  border-radius: 8px;
  font-size: 11px;
  color: #334155;
  font-weight: 500;
  transition: border-color .2s, box-shadow .2s;
}

.ts-hs11fp2-element-dropdown-btn:hover { border-color: #3B5AF1; box-shadow: 0 0 0 3px rgba(59, 90, 241, 0.16); }

.ts-hs11fp2-element-dropdown-btn svg { width: 12px; height: 12px; transition: transform .2s; }

.ts-hs11fp2-block-dropdown.ts-hs11fp2-is-open .ts-hs11fp2-element-dropdown-btn svg { transform: rotate(180deg); }

.ts-hs11fp2-block-dropdown-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 120px;
  background: #fff;
  border: 1px solid #E6E9F2;
  border-radius: 10px;
  padding: 4px;
  box-shadow: 0 4px 12px rgba(15,23,42,.05), 0 16px 40px rgba(15,23,42,.08);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity .2s, transform .2s, visibility .2s;
  z-index: 5;
}

.ts-hs11fp2-block-dropdown.ts-hs11fp2-is-open .ts-hs11fp2-block-dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.ts-hs11fp2-block-dropdown-menu li {
  padding: 7px 10px;
  font-size: 11px;
  color: #334155;
  border-radius: 6px;
  cursor: pointer;
  transition: background .15s;
}

.ts-hs11fp2-block-dropdown-menu li:hover { background: #ECEFFE; color: #3B5AF1; }

/* KPIs */

.ts-hs11fp2-block-kpis {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 14px;
}

.ts-hs11fp2-block-kpi {
  background: #fff;
  border: 1px solid #EEF1F5;
  border-radius: 10px;
  padding: 9px 10px;
  transition: transform .25s cubic-bezier(0.22, 1, 0.36, 1), box-shadow .25s, border-color .25s;
}

.ts-hs11fp2-block-kpi:hover {
  transform: translateY(-2px);
  border-color: #3B5AF1;
  box-shadow: 0 4px 14px rgba(59,90,241,.10);
}

.ts-hs11fp2-element-kpi-label {
  margin: 0;
  font-size: 9.5px;
  color: #7C879D;
  font-weight: 500;
  letter-spacing: .01em;
}

.ts-hs11fp2-element-kpi-value {
  margin: 4px 0 2px;
  font-size: 14px;
  font-weight: 700;
  color: #0F172A;
  letter-spacing: -.01em;
}

.ts-hs11fp2-element-kpi-delta {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 9px;
  font-weight: 600;
  color: #16A34A;
}

/* Chart */

.ts-hs11fp2-block-chart-card {
  background: #fff;
  border: 1px solid #EEF1F5;
  border-radius: 12px;
  padding: 12px 12px 8px;
  margin-bottom: 14px;
}

.ts-hs11fp2-element-chart-title {
  margin: 0 0 10px;
  font-size: 12px;
  font-weight: 600;
  color: #0F172A;
}

.ts-hs11fp2-block-chart-wrap {
  position: relative;
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 6px;
}

.ts-hs11fp2-block-chart-yaxis {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 4px 0 18px;
  font-size: 9px;
  color: #7C879D;
  text-align: right;
}

.ts-hs11fp2-block-chart-svg {
  width: 100%;
  height: 130px;
  display: block;
}

.ts-hs11fp2-block-chart-xaxis {
  position: absolute;
  bottom: -2px;
  left: 30px;
  right: 0;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  font-size: 9px;
  color: #7C879D;
  text-align: center;
}

/* Chart draw animation */

.ts-hs11fp2-chart-line {
  stroke-dasharray: 2000;
  stroke-dashoffset: 2000;
}

.ts-hs11fp2-chart-dots circle {
  opacity: 0;
}

.ts-hs11fp2-is-in-view .ts-hs11fp2-chart-line {
  animation: drawLine 1.6s cubic-bezier(0.25, 1, 0.5, 1) .3s forwards;
}

.ts-hs11fp2-is-in-view .ts-hs11fp2-chart-area {
  animation: fadeArea .9s ease .9s forwards;
}

.ts-hs11fp2-is-in-view .ts-hs11fp2-chart-dots circle {
  animation: popDot .35s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.ts-hs11fp2-is-in-view .ts-hs11fp2-chart-dots circle:nth-child(1) { animation-delay: .5s; }

.ts-hs11fp2-is-in-view .ts-hs11fp2-chart-dots circle:nth-child(2) { animation-delay: .7s; }

.ts-hs11fp2-is-in-view .ts-hs11fp2-chart-dots circle:nth-child(3) { animation-delay: .9s; }

.ts-hs11fp2-is-in-view .ts-hs11fp2-chart-dots circle:nth-child(4) { animation-delay: 1.1s; }

.ts-hs11fp2-is-in-view .ts-hs11fp2-chart-dots circle:nth-child(5) { animation-delay: 1.3s; }

.ts-hs11fp2-is-in-view .ts-hs11fp2-chart-dots circle:nth-child(6) { animation-delay: 1.5s; }

.ts-hs11fp2-is-in-view .ts-hs11fp2-chart-dots circle:nth-child(7) { animation-delay: 1.7s; }

@keyframes drawLine {
  to { stroke-dashoffset: 0; }
}

@keyframes fadeArea {
  to { opacity: 1; }
}

@keyframes popDot {
  from { opacity: 0; transform: scale(.4); transform-origin: center; }
  to   { opacity: 1; transform: scale(1); }
}

/* Chart tooltip */

.ts-hs11fp2-block-chart-tooltip {
  position: absolute;
  top: 0;
  left: 60%;
  transform: translateX(-50%);
  background: #fff;
  border: 1px solid #E6E9F2;
  border-radius: 8px;
  padding: 6px 10px;
  text-align: center;
  box-shadow: 0 4px 16px rgba(11,23,51,.10);
  white-space: nowrap;
  z-index: 2;
  opacity: 0;
  animation: fadeIn .4s cubic-bezier(0.22, 1, 0.36, 1) 1.4s forwards;
}

.ts-hs11fp2-element-tt-date { margin: 0; font-size: 9px; color: #7C879D; }

.ts-hs11fp2-element-tt-label { margin: 2px 0 0; font-size: 9px; color: #7C879D; }

.ts-hs11fp2-element-tt-value { margin: 1px 0 0; font-size: 13px; font-weight: 700; color: #0F172A; }

@keyframes fadeIn { from { opacity: 0; transform: translateX(-50%) translateY(-4px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } }

/* Recent orders */

.ts-hs11fp2-block-recent-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.ts-hs11fp2-element-recent-title {
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  color: #0F172A;
}

.ts-hs11fp2-element-viewall {
  font-size: 11px;
  color: #3B5AF1;
  font-weight: 500;
  transition: opacity .2s;
}

.ts-hs11fp2-element-viewall:hover { opacity: .7; }

.ts-hs11fp2-block-recent-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ts-hs11fp2-element-recent-row {
  display: grid;
  grid-template-columns: 20px 65px 1fr 60px 75px;
  align-items: center;
  gap: 8px;
  padding: 5px 4px;
  border-radius: 6px;
  transition: background .2s;
}

.ts-hs11fp2-element-recent-row:hover { background: #F6F8FC; }

.ts-hs11fp2-element-avatar {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-size: cover;
}

.ts-hs11fp2-element-recent-id { font-size: 10px; color: #7C879D; font-weight: 500; }

.ts-hs11fp2-element-recent-name { font-size: 11px; color: #334155; font-weight: 500; }

.ts-hs11fp2-element-recent-amt { font-size: 11px; color: #0F172A; font-weight: 600; text-align: right; }

.ts-hs11fp2-element-status {
  font-size: 9px;
  font-weight: 600;
  padding: 3px 7px;
  border-radius: 999px;
  text-align: center;
}

.ts-hs11fp2-status-completed { background: #D1FAE5; color: #16A34A; }

.ts-hs11fp2-status-preparing { background: #FED7AA; color: #C2410C; }

/* =========================================================
   TABBED MOCKUP VIEWPORT
   ========================================================= */

.ts-hs11fp2-block-mock-tabs {
  display: inline-flex;
  gap: 6px;
  padding: 5px;
  background: #fff;
  border: 1px solid #E6E9F2;
  border-radius: 999px;
  margin-bottom: 18px;
  box-shadow: 0 2px 10px rgba(11,23,51,.05);
}

.ts-hs11fp2-element-mock-tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 16px;
  border: 0;
  background: transparent;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  color: #7C879D;
  overflow: hidden;
  transition: color .25s, background .25s;
}

.ts-hs11fp2-element-mock-tab svg { width: 15px; height: 15px; position: relative; z-index: 1; }

.ts-hs11fp2-element-mock-tab span:not(.ts-hs11fp2-element-tab-fill) { position: relative; z-index: 1; }

.ts-hs11fp2-element-mock-tab:hover { color: #334155; }

.ts-hs11fp2-element-mock-tab.ts-hs11fp2-is-active {
  color: #fff;
  background: linear-gradient(135deg, #3B5AF1, #2A45D4);
  box-shadow: 0 3px 10px rgba(59,90,241,.18);
}

/* auto-rotate progress sweep on the active tab */

.ts-hs11fp2-element-tab-fill {
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,.18);
  transform: scaleX(0);
  transform-origin: left;
  z-index: 0;
}

.ts-hs11fp2-element-mock-tab.ts-hs11fp2-is-active .ts-hs11fp2-element-tab-fill.ts-hs11fp2-is-running {
  animation: tabSweep 4s linear forwards;
}

@keyframes tabSweep {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* viewport that holds both panels */

.ts-hs11fp2-block-mock-viewport {
  position: relative;
  min-height: 492px;
}

.ts-hs11fp2-block-mock-panel {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translateY(12px) scale(.985);
  transition: opacity .5s cubic-bezier(0.22, 1, 0.36, 1), transform .5s cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}

.ts-hs11fp2-block-mock-panel.ts-hs11fp2-is-active {
  position: relative;
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.ts-hs11fp2-block-mock-panel[hidden] { display: block; }

/* keep in flow for fade; JS toggles class */

/* phones side by side in the mobile-app panel */

.ts-hs11fp2-block-phone-row {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 18px;
  min-height: 430px;
  padding: 12px 0 18px;
}

/* =========================================================
   PHONE FRAME — thinner bezel, better proportions
   ========================================================= */

.ts-hs11fp2-block-phone-frame {
  position: relative;
  display: flex;
  width: 204px;
  padding: 5px;
  background: linear-gradient(160deg, #303341 0%, #14151d 55%, #23263400 100%), #16171f;
  border-radius: 36px;
  box-shadow:
    inset 0 0 0 1.5px rgba(255,255,255,.05),
    0 6px 16px rgba(15,23,42,.10);
}

.ts-hs11fp2-element-phone-screen { width: 100%; }

/* staggered depth for the two-phone layout */

.ts-hs11fp2-block-phone-frame--track  { transform: translateY(16px) rotate(-3deg); z-index: 1; }

.ts-hs11fp2-block-phone-frame--order { transform: translateY(6px) rotate(3deg); z-index: 2; }

.ts-hs11fp2-block-phone-row:hover .ts-hs11fp2-block-phone-frame--track  { transform: translateY(16px) rotate(-1.5deg); }

.ts-hs11fp2-block-phone-row:hover .ts-hs11fp2-block-phone-frame--order { transform: translateY(6px) rotate(1.5deg); }

.ts-hs11fp2-block-phone-frame { transition: transform .5s cubic-bezier(0.22, 1, 0.36, 1); }

.ts-hs11fp2-element-phone-btn {
  position: absolute;
  background: #0b0c12;
  border-radius: 3px;
}

.ts-hs11fp2-element-phone-btn--power  { right: -1.5px; top: 88px; width: 2.5px; height: 42px; }

.ts-hs11fp2-element-phone-btn--vol-up { left: -1.5px; top: 74px;  width: 2.5px; height: 28px; }

.ts-hs11fp2-element-phone-btn--vol-dn { left: -1.5px; top: 108px; width: 2.5px; height: 28px; }

.ts-hs11fp2-element-phone-screen {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 31px;
  overflow: hidden;
  padding-top: 24px;
}

.ts-hs11fp2-element-phone-island {
  position: absolute;
  top: 7px;
  left: 50%;
  transform: translateX(-50%);
  width: 58px;
  height: 15px;
  background: #0b0c12;
  border-radius: 999px;
  z-index: 3;
}

.ts-hs11fp2-element-phone-statusbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px 2px;
  color: #0F172A;
}

.ts-hs11fp2-element-sb-time { font-size: 10px; font-weight: 700; letter-spacing: -.01em; }

.ts-hs11fp2-element-sb-icons { display: inline-flex; align-items: center; gap: 4px; }

.ts-hs11fp2-element-phone-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 8px 12px 14px;
}

/* ---- Live order tracking screen ---- */

.ts-hs11fp2-element-track-map {
  position: relative;
  height: 132px;
  margin: 4px 0 0;
  overflow: hidden;
}

.ts-hs11fp2-element-map-bg { width: 100%; height: 100%; display: block; }

.ts-hs11fp2-element-map-route {
  stroke-dashoffset: 0;
  animation: routeFlow 1.4s linear infinite;
}

@keyframes routeFlow { to { stroke-dashoffset: -26; } }

.ts-hs11fp2-element-courier {
  position: absolute;
  left: 38%;
  top: 38%;
  width: 26px;
  height: 26px;
  margin: -13px 0 0 -13px;
  display: grid;
  place-items: center;
  background: #3B5AF1;
  border: 2.5px solid #fff;
  border-radius: 50%;
  box-shadow: 0 3px 8px rgba(59,90,241,.4);
  animation: courierMove 4s cubic-bezier(0.25, 1, 0.5, 1) infinite alternate;
}

.ts-hs11fp2-element-courier svg { width: 14px; height: 14px; }

@keyframes courierMove {
  from { left: 30%; top: 64%; }
  to   { left: 70%; top: 30%; }
}

.ts-hs11fp2-element-track-content { padding-top: 12px; }

.ts-hs11fp2-element-track-eta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.ts-hs11fp2-element-eta-label { margin: 0; font-size: 10px; color: #7C879D; }

.ts-hs11fp2-element-eta-time { margin: 2px 0 0; font-size: 20px; font-weight: 800; color: #0F172A; letter-spacing: -.02em; }

.ts-hs11fp2-element-eta-badge {
  font-size: 9px;
  font-weight: 700;
  color: #3B5AF1;
  background: #ECEFFE;
  padding: 5px 9px;
  border-radius: 999px;
}

.ts-hs11fp2-element-courier-card {
  display: grid;
  grid-template-columns: 34px 1fr auto;
  align-items: center;
  gap: 9px;
  padding: 9px;
  background: #F6F8FC;
  border-radius: 12px;
  margin-bottom: 12px;
}

.ts-hs11fp2-element-courier-avatar {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(135deg, #3B5AF1, #2A45D4);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
}

.ts-hs11fp2-element-courier-info p { margin: 0; }

.ts-hs11fp2-element-courier-name { font-size: 11px; font-weight: 600; color: #0F172A; }

.ts-hs11fp2-element-courier-role { font-size: 9px; color: #7C879D; margin-top: 1px !important; }

.ts-hs11fp2-element-courier-call {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: #fff;
  color: #3B5AF1;
  box-shadow: 0 1px 4px rgba(15,23,42,.08);
}

.ts-hs11fp2-element-courier-call svg { width: 14px; height: 14px; }

.ts-hs11fp2-element-track-steps {
  display: flex;
  flex-direction: column;
  gap: 0;
  position: relative;
  margin-top: auto;
}

.ts-hs11fp2-element-step {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 5px 0;
  position: relative;
}

.ts-hs11fp2-element-step-dot {
  position: relative;
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  border-radius: 50%;
  background: #fff;
  border: 2px solid #E6E9F2;
  z-index: 1;
}

.ts-hs11fp2-element-step:not(:last-child) .ts-hs11fp2-element-step-dot::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 12px;
  transform: translateX(-50%);
  width: 2px;
  height: 18px;
  background: #E6E9F2;
}

.ts-hs11fp2-element-step.ts-hs11fp2-is-done .ts-hs11fp2-element-step-dot {
  background: #3B5AF1;
  border-color: #3B5AF1;
}

.ts-hs11fp2-element-step.ts-hs11fp2-is-done:not(:last-child) .ts-hs11fp2-element-step-dot::after { background: #3B5AF1; }

.ts-hs11fp2-element-step.ts-hs11fp2-is-current .ts-hs11fp2-element-step-dot {
  background: #3B5AF1;
  border-color: #3B5AF1;
  box-shadow: 0 0 0 4px #ECEFFE;
  animation: pulseDot 1.6s ease-in-out infinite;
}

@keyframes pulseDot {
  0%, 100% { box-shadow: 0 0 0 3px #ECEFFE; }
  50%      { box-shadow: 0 0 0 6px rgba(59,90,241,.12); }
}

.ts-hs11fp2-element-step-text { font-size: 11px; color: #7C879D; }

.ts-hs11fp2-element-step.ts-hs11fp2-is-done .ts-hs11fp2-element-step-text { color: #334155; font-weight: 500; }

.ts-hs11fp2-element-step.ts-hs11fp2-is-current .ts-hs11fp2-element-step-text { color: #0F172A; font-weight: 700; }

.ts-hs11fp2-element-phone-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 2px 2px 12px;
  border-bottom: 1px solid #EEF1F5;
}

.ts-hs11fp2-element-back {
  width: 24px;
  height: 24px;
  background: transparent;
  border: 0;
  display: grid;
  place-items: center;
  color: #0F172A;
  border-radius: 6px;
  transition: background .2s;
}

.ts-hs11fp2-element-back:hover { background: #F6F8FC; }

.ts-hs11fp2-element-back svg { width: 16px; height: 16px; }

.ts-hs11fp2-element-phone-title {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  color: #0F172A;
}

.ts-hs11fp2-block-order-items {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 14px 0;
}

.ts-hs11fp2-element-order-item {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
}

.ts-hs11fp2-element-food {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #F6F8FC;
  display: grid;
  place-items: center;
  overflow: hidden;
}

.ts-hs11fp2-element-food svg { width: 100%; height: 100%; }

.ts-hs11fp2-element-food-info { min-width: 0; }

.ts-hs11fp2-element-food-info p { margin: 0; }

.ts-hs11fp2-element-food-name { font-size: 10.5px; font-weight: 600; color: #0F172A; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.ts-hs11fp2-element-food-price { font-size: 9.5px; color: #7C879D; margin-top: 1px !important; }

.ts-hs11fp2-block-qty {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.ts-hs11fp2-element-qty-btn {
  width: 19px;
  height: 19px;
  background: transparent;
  border: 1px solid #E6E9F2;
  border-radius: 50%;
  font-size: 12px;
  line-height: 1;
  color: #334155;
  display: grid;
  place-items: center;
  transition: background .15s, color .15s, border-color .15s, transform .12s;
  user-select: none;
}

.ts-hs11fp2-element-qty-btn:hover {
  background: #3B5AF1;
  color: #fff;
  border-color: #3B5AF1;
}

.ts-hs11fp2-element-qty-btn:active { transform: scale(.92); }

.ts-hs11fp2-element-qty-num {
  min-width: 11px;
  text-align: center;
  font-size: 10.5px;
  font-weight: 600;
  color: #0F172A;
  font-variant-numeric: tabular-nums;
}

.ts-hs11fp2-block-order-summary {
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid #EEF1F5;
}

.ts-hs11fp2-element-summary-row {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: #7C879D;
  margin-bottom: 4px;
}

.ts-hs11fp2-element-summary-row:nth-child(2) {
  margin-bottom: 10px;
}

.ts-hs11fp2-element-summary-row span:last-child {
  color: #0F172A;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.ts-hs11fp2-block-place-order {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: linear-gradient(135deg, #3B5AF1, #2A45D4);
  color: #fff;
  border: 0;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 600;
  box-shadow: 0 4px 12px rgba(59,90,241,.18);
  transition: transform .15s, box-shadow .15s;
}

.ts-hs11fp2-block-place-order:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(59,90,241,.22); }

.ts-hs11fp2-block-place-order:active { transform: translateY(0); }

/* =========================================================
   BOTTOM CTA BAR
   ========================================================= */

.ts-hs11fp2-block-cta-bar {
  margin: clamp(28px, 3vw, 40px) auto 0;
  background: #fff;
  border: 1px solid #E6E9F2;
  border-radius: 20px;
  padding: clamp(18px, 2.4vw, 26px) clamp(20px, 2.6vw, 32px);
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: clamp(16px, 2.5vw, 32px);
  align-items: center;
  box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 6px 20px rgba(15,23,42,.05);
}

.ts-hs11fp2-element-cta-icon {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #3B5AF1, #2A45D4);
  color: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(59,90,241,.20);
}

.ts-hs11fp2-element-cta-icon svg { width: 22px; height: 22px; }

.ts-hs11fp2-element-cta-text { min-width: 0; }

.ts-hs11fp2-element-cta-head {
  margin: 0;
  font-size: clamp(14px, 1.2vw, 16px);
  color: #0F172A;
  line-height: 1.5;
}

.ts-hs11fp2-element-cta-head strong { font-weight: 600; }

.ts-hs11fp2-element-cta-sub {
  margin: 4px 0 0;
  font-size: clamp(13px, 1.1vw, 15px);
  color: #7C879D;
  line-height: 1.5;
}

.ts-hs11fp2-block-cta-btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 22px;
  background: linear-gradient(135deg, #3B5AF1, #2A45D4);
  color: #fff;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  box-shadow: 0 4px 12px rgba(59,90,241,.18);
  transition: transform .2s cubic-bezier(0.22, 1, 0.36, 1), box-shadow .25s;
  white-space: nowrap;
}

.ts-hs11fp2-block-cta-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(59,90,241,.26);
}

.ts-hs11fp2-block-cta-btn svg {
  width: 16px;
  height: 16px;
  transition: transform .25s cubic-bezier(0.22, 1, 0.36, 1);
}

.ts-hs11fp2-block-cta-btn:hover svg { transform: translate(2px, -2px); }

/* =========================================================
   ANIMATIONS — entrance
   ========================================================= */

[data-anim="fade-up"] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .9s cubic-bezier(0.22, 1, 0.36, 1), transform .9s cubic-bezier(0.22, 1, 0.36, 1);
}

[data-anim="fade-up"].ts-hs11fp2-is-in-view {
  opacity: 1;
  transform: translateY(0);
}

/* =========================================================
   RESPONSIVE — TABBED VIEWPORT + PHONES
   ========================================================= */

/* Tablet — tighten dashboard + phones */

@media (max-width: 1180px) {
  .ts-hs11fp2-block-dashboard { font-size: 11px; }
  .ts-hs11fp2-block-phone-frame { width: 192px; }
  .ts-hs11fp2-block-phone-row { gap: 10px; }
}

@media (max-width: 1040px) {
  .ts-hs11fp2-block-phone-frame { width: 178px; }
  .ts-hs11fp2-block-phone-row { gap: 6px; }
}

/* Below 980px the card stacks (info over viewport) */

@media (max-width: 980px) {
  .ts-hs11fp2-block-mock-viewport { min-height: 0; }
  .ts-hs11fp2-block-phone-frame { width: 196px; }
  .ts-hs11fp2-block-phone-row { gap: 16px; }
  .ts-hs11fp2-block-dashboard {
    transform: none;
  }
}

/* Mobile — drop the tabs, show BOTH views stacked, phones get more room */

@media (max-width: 720px) {
  .ts-hs11fp2-block-dashboard { grid-template-columns: 44px 1fr; font-size: 10px; }
  .ts-hs11fp2-block-dash-side { padding: 8px 0; gap: 4px; }
  .ts-hs11fp2-element-side-logo, .ts-hs11fp2-element-side-btn { width: 28px; height: 28px; }
  .ts-hs11fp2-element-side-logo svg { width: 16px; height: 16px; }
  .ts-hs11fp2-element-side-btn svg { width: 14px; height: 14px; }
  .ts-hs11fp2-block-dash-main { padding: 12px 12px; }
  .ts-hs11fp2-block-kpis { gap: 6px; }
  .ts-hs11fp2-block-kpi { padding: 7px 8px; }
  .ts-hs11fp2-element-kpi-value { font-size: 12px; }
  .ts-hs11fp2-element-kpi-label { font-size: 8.5px; }
  .ts-hs11fp2-element-kpi-delta { font-size: 8.5px; }
  .ts-hs11fp2-element-recent-row { grid-template-columns: 18px 55px 1fr 50px 65px; }

  /* tabs hidden on mobile — both panels shown in flow */
  .ts-hs11fp2-block-mock-tabs { display: none; }
  .ts-hs11fp2-block-mock-viewport { min-height: 0; }
  .ts-hs11fp2-block-mock-panel,
  .ts-hs11fp2-block-mock-panel[hidden] {
    position: relative;
    opacity: 1;
    transform: none;
    pointer-events: auto;
    display: block;
  }
  .ts-hs11fp2-block-mock-panel[data-panel="mobile"] { margin-top: 28px; }

  /* phones bigger + taller on mobile */
  .ts-hs11fp2-block-phone-row { gap: 16px; }
  .ts-hs11fp2-block-phone-frame { width: 168px; padding: 6px; }
  .ts-hs11fp2-block-phone-frame--track  { transform: translateY(-10px) rotate(-3deg); }
  .ts-hs11fp2-block-phone-frame--order { transform: translateY(10px) rotate(3deg); }

  /* CTA stacks */
  .ts-hs11fp2-block-cta-bar {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .ts-hs11fp2-element-cta-icon { margin: 0 auto; }
  .ts-hs11fp2-block-cta-btn { justify-self: center; }
}

@media (max-width: 540px) {
  .ts-hs11fp2-block-dashboard { transform: none; }
  .ts-hs11fp2-block-chart-yaxis { display: none; }
  .ts-hs11fp2-block-chart-wrap { grid-template-columns: 1fr; }
  .ts-hs11fp2-block-chart-xaxis { left: 0; }
  .ts-hs11fp2-block-kpis { grid-template-columns: repeat(2, 1fr); }

  /* phones stack vertically — each gets full width so content breathes */
  .ts-hs11fp2-block-phone-row {
    flex-direction: column;
    align-items: center;
    gap: 22px;
  }
  .ts-hs11fp2-block-phone-frame {
    width: 100%;
    max-width: 260px;
    padding: 6px;
  }
  .ts-hs11fp2-block-phone-frame--track,
  .ts-hs11fp2-block-phone-frame--order { transform: none; }
  .ts-hs11fp2-block-phone-row:hover .ts-hs11fp2-block-phone-frame--track,
  .ts-hs11fp2-block-phone-row:hover .ts-hs11fp2-block-phone-frame--order { transform: none; }

  .ts-hs11fp2-block-feature-grid { grid-template-columns: 1fr; gap: 20px; }

}

@media (max-width: 380px) {
  .ts-hs11fp2-block-featured-card { padding: 24px 16px; border-radius: 20px; }
  .ts-hs11fp2-block-dashboard { grid-template-columns: 38px 1fr; }
  .ts-hs11fp2-element-recent-row { grid-template-columns: 14px 46px 1fr 42px 52px; gap: 5px; }
  .ts-hs11fp2-element-recent-id { font-size: 9px; }
  .ts-hs11fp2-element-recent-name { font-size: 10px; }
  .ts-hs11fp2-element-recent-amt { font-size: 10px; }
  .ts-hs11fp2-element-status { font-size: 7.5px; padding: 2px 4px; letter-spacing: 0; }
  .ts-hs11fp2-block-featured-badge { font-size: 10px; padding: 10px 18px; letter-spacing: .08em; }
  .ts-hs11fp2-block-phone-row { gap: 8px; }
}

/* Reduced motion */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001s !important;
    transition-duration: 0.001s !important;
  }
  .ts-hs11fp2-element-tab-fill { animation: none !important; }
  [data-anim] { opacity: 1; transform: none; }
}