/*!--------------------
Template Name: Influtics - Social Influencer Portfolio & Video Sharing HTML Template
Author: tempticspro
Version: 1.0

CSS INDEX
=================== 
01. CUSTOM PROPERTIES
02. GLOBAL
03. Components
04. CSS Animation
05. Header
06. Hero
07. Social Links
08. Reels
09. Services
10. Intro
11. Live
12. Videos
13. Contact
14. Article
15. Footer

--- INNER PAGES

16. About Page
17. Service Page
18. Service Details Page
19. Videos Page
20. Video Details Page
21. Video Shop Page
22. Video Shop Details Page
23. Login Page
24. Checkout Page
25. Blogs Page
26. Pricing Page
27. Contact Page
28. Blog Details Page

*/
@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap");
@import url('https://fonts.googleapis.com/css2?family=Italianno&family=Noto+Sans+JP:wght@100..900&family=Oswald:wght@200..700&family=Rowdies:wght@300;400;700&display=swap');
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.0/css/all.min.css');
:root {
  --ttRed: #09ab04;
  --ttLightRed: #f2eeea;
  --ttGray: #b5b5b5;
  --ttGray2: #808080;
  --black: #000;
  --white: #fff;
  --tt-pink: #143612;
  --tt-gold: #09ab04;
  --tt-gradient-1: linear-gradient(
    90deg,
    var(--tt-pink) 0%,
    var(--tt-gold) 100%
  );
  --font-inter: "Inter", sans-serif;
  --plyr-color-main: var(--ttRed);
}

html {
  overflow-x: hidden;
}

body {
  font-family: var(--font-inter);
  margin: auto;
}

ul {
  list-style: none inside;
  padding: 0;
  margin: 0;
}

a,
button,
img,
svg path {
  transition: 0.4s ease;
}

a {
  text-decoration: none;
  vertical-align: top;
}

button {
  background-color: transparent;
  border: none;
}

img {
  max-width: 100%;
}

i {
  line-height: 1;
}

p {
  line-height: 1.75;
}

h2{
    font-weight:bold;
}
[data-sal] {
  transition-duration: 1s;
  transition-delay: 0.2s;
}

@media screen and (max-width: 479px) {
  .col-xxs-12 {
    width: 100%;
  }
}
@media (min-width: 1400px) {
  .container {
    max-width: 1434px;
  }
}

@media screen and (max-width: 575px) {
  .row-cols-xs-1 > * {
    width: 100%;
  }
}

@media screen and (max-width: 479px) {
  .row-cols-xxs-1 > * {
    width: 100%;
  }
}

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type="number"] {
  -moz-appearance: textfield;
}

input[type="radio"]:checked + span::after {
  opacity: 1;
}

input {
  outline: none;
  border: none;
}

.preloader {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: 0.3s ease;
}
.preloader .loader {
  width: 150px;
  aspect-ratio: 1.154;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  display: grid;
  background: conic-gradient(
      from 0deg at 50% 60%,
      #0219a6 120deg,
      rgba(0, 0, 0, 0) 0
    ),
    conic-gradient(from 120deg at 50% 60%, #0219a6 120deg, rgba(0, 0, 0, 0) 0),
    conic-gradient(from 240deg at 50% 60%, #0219a6 120deg, rgba(0, 0, 0, 0) 0),
    conic-gradient(from 0deg at 50% 60%, #e5002a 120deg, rgba(0, 0, 0, 0) 0),
    conic-gradient(from 120deg at 50% 60%, #e5002a 120deg, rgba(0, 0, 0, 0) 0),
    conic-gradient(from 240deg at 50% 60%, #e5002a 120deg, rgba(0, 0, 0, 0) 0),
    #0219a6;
  background-size: 200% 200%;
  background-repeat: no-repeat;
  animation: l8 1.5s infinite;
}
@keyframes l8 {
  0% {
    background-position: left, top, right;
  }
  30%,
  50% {
    background-position: left, top, right, center, center, center;
  }
  80%,
  100% {
    background-position: center;
  }
}

.tt-container {
  display: flex;
}
.tt-container__left {
  width: 300px;
  height: 100vh;
  position: sticky;
  top: 0;
  flex-shrink: 0;
}
@media screen and (max-width: 1199px) {
  .tt-container__left {
    width: 270px;
  }
}
.tt-container__right {
  width: calc(100% - 300px);
  padding: 30px;
  flex-grow: 1;
  overflow: hidden;
}
@media screen and (max-width: 1199px) {
  .tt-container__right {
    padding: 20px;
  }
}

.tt-section-heading {
  color: var(--ttRed);
  margin-bottom: 22px;
}
.tt-section-heading__btn {
  background: rgba(9, 171, 4, 0.5);
  border-radius: 99px;
  padding: 0 10px;
  height: 30px;
  display: flex;
  align-items: center;
  font-size: 15px;
  color: var(--ttRed);
  flex-shrink: 0;
}
.tt-section-heading__btn:hover {
  background-color: var(--ttRed);
  color: var(--white);
}
.tt-section-title {
  color: var(--black);
  font-weight: 700;
  font-size: 15px;
}

.sa-single-accordion-item {
  transition: 0.4s ease;
}

.sa-single-accordion-item.open .sa-single-accordion-item__header i {
  transform: rotate(90deg);
}
.sa-single-accordion-item.open .sa-single-accordion-item__body {
  grid-template-rows: 1fr;
  padding-top: 9px;
}

.sa-single-accordion-item__header i {
  transition: transform 0.4s ease;
  display: inline-block;
  color: #000;
}

.sa-single-accordion-item__title {
  color: #000;
}

.sa-single-accordion-item__body {
  transition: all 0.4s ease;
  display: grid;
  grid-template-rows: 0fr;
  overflow: hidden;
}

.sa-single-accordion-item__body > * {
  overflow: hidden;
}



.tt-slider-nav {
  background-color: var(--white);
  border-radius: 999px;
  width: 48px;
  height: 48px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  position: absolute;
  z-index: 1;
  top: 44%;
  transform: translateY(-50%);
  right: 0;
  color: var(--ttRed);
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.1);
}
.tt-slider-nav:hover {
  background-color: rgb(255, 0, 0);
  color: var(--white);
}

.tt-inner-page-banner {
  border-radius: 20px;
  position: relative;
  z-index: 1;
  background: no-repeat center center;
  background-size: cover;
  color: var(--white);
  padding: clamp(60px, 10.73vw, 206px) 15px;
  text-align: center;
  overflow: hidden;
}
.tt-inner-page-banner::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.7);
}
.tt-inner-page-title {
  font-weight: 700;
  font-size: 36px;
  margin-bottom: 0;
}
@media screen and (max-width: 479px) {
  .tt-inner-page-title {
    font-size: 30px;
  }
}
.tt-inner-page-inner-title {
  font-weight: 700;
  font-size: 24px;
  margin-bottom: 15px;
  margin-top: 50px;
}
@media screen and (max-width: 575px) {
  .tt-inner-page-inner-title {
    margin-top: 30px;
  }
}

.jo-container {
  margin: 0 13.281vw;
}
@media screen and (max-width: 1599px) {
  .jo-container {
    margin: 0 10.281vw;
  }
}
@media screen and (max-width: 1399px) {
  .jo-container {
    margin: 0 7.281vw;
  }
}
@media screen and (max-width: 1199px) {
  .jo-container {
    margin: 0 3.281vw;
  }
}
@media screen and (max-width: 991px) {
  .jo-container {
    margin: 0 15px;
  }
}

.jo-sidebar {
  position: fixed;
  z-index: 10;
  right: 0;
  height: 100%;
  overflow: auto;
  background: #fff;
  z-index: 999;
  transform: translateX(100%);
  transition: 0.4s ease;
  padding: 40px 15px;
  padding-top: 15px;
  max-width: 100%;
  border-left: 1px solid var(--ttRed);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
@media screen and (max-width: 479px) {
  .jo-sidebar {
    padding: 30px 15px;
    padding-top: 15px;
  }
}
.jo-sidebar.active {
  transform: translateX(0);
}
.jo-sidebar__heading {
  gap: 30px;
  padding-bottom: 15px;
}
.jo-sidebar .logo {
  max-width: 65%;
}
.jo-sidebar-close-btn {
  transform: rotate(45deg);
}
.jo-sidebar .jo-header-nav-in-mobile nav {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.jo-sidebar .jo-header-nav-in-mobile nav a {
  color: var(--black);
  padding: 12px 15px;
}
.jo-sidebar .jo-header-nav-in-mobile nav a:hover {
  color: var(--tt-pink);
}
.jo-sidebar .jo-header-nav-in-mobile nav .has-sub-menu.active > a {
  color: var(--tt-pink);
}
.jo-sidebar .jo-header-nav-in-mobile nav .has-sub-menu .jo-header-submenu li {
  border: none;
  padding-bottom: 6px;
}
.jo-sidebar .jo-header-nav-in-mobile nav .has-sub-menu .jo-header-submenu a {
  padding: 0 15px;
}
@media screen and (max-width: 991px) {
  .jo-sidebar .jo-header-nav-in-mobile nav > * {
    border-top: 1px solid rgba(0, 0, 0, 0.2);
  }
  .jo-sidebar .jo-header-nav-in-mobile nav > *:last-child {
    border-bottom: 1px solid rgba(0, 0, 0, 0.2);
  }
}
.jo-sidebar-socials.tt-footer-top__socials {
  margin-top: 15px;
  justify-content: flex-start;
  gap: 10px;
}
.jo-sidebar-socials.tt-footer-top__socials a {
  border-color: rgba(0, 0, 0, 0.2);
  color: var(--ttRed);
  width: 35px;
  font-size: 18px;
}
.jo-sidebar .jo-btn {
  width: 100%;
  margin-top: 15px;
}
.jo-sidebar .jo-btn i {
  font-size: 10px;
  padding-right: 5px;
}

.jo-header-nav-in-mobile {
  margin: 0 -15px;
}
@media screen and (max-width: 479px) {
  .jo-header-nav-in-mobile {
    margin: 0 -15px;
  }
}

.jo-section-title {
  font-weight: 700;
  font-size: clamp(26px, 2.08vw, 40px);
  line-height: 1.35;
  letter-spacing: -0.02em;
  color: var(--black);
}

.jo-btn {
  background: linear-gradient(90deg, #143612 48%, #09ab04 100%);
  display: inline-flex;
  justify-content: center;
  align-items: center;
  padding: 0 20px;
  height: 42px;
  gap: 3px;
  border-radius: 6px;
  color: var(--white);
  position: relative;
  z-index: 1;
}
.jo-btn::before {
  position: absolute;
  content: "";
  inset: 0;
  border-radius: 6px;
  z-index: -1;
  background: linear-gradient(90deg, #09ab04 0%, #143612 100%);
  transition: 0.4s ease;
}
.jo-btn:hover {
  color: var(--white);
}
.jo-btn:hover::before {
  opacity: 0;
}

.jo-breadcrumb {
  padding: 14.323vw 0 11.458vw;
  background: url(../img/breadcrumb-bg.jpg) no-repeat center center;
  background-size: cover;
  text-align: center;
  position: relative;
  z-index: 1;
  color: var(--white);
  overflow: hidden;
}
@media screen and (max-width: 1199px) {
  .jo-breadcrumb {
    padding: 140px 0 100px;
  }
}
@media screen and (max-width: 479px) {
  .jo-breadcrumb {
    padding: 130px 0 80px;
  }
}
.jo-breadcrumb::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--tt-pink), var(--tt-gold));
  z-index: -1;
  opacity: 80%;
}
.jo-breadcrumb-nav {
  display: flex;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
}
.jo-breadcrumb-nav a {
  color: var(--white);
}
.jo-breadcrumb-nav a:hover {
  color: var(--black);
}

.jo-page-title {
  color: var(--white);
  margin-bottom: 3px;
}

.jo-radio label {
  position: relative;
  display: inline-block;
}
.jo-radio label > span {
  padding-left: 30px;
  display: inline-block;
}
.jo-radio label > span::before,
.jo-radio label > span::after {
  content: "";
  position: absolute;
  width: 20px;
  aspect-ratio: 1/1;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 50%;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}
.jo-radio label > span::after {
  width: 8px;
  aspect-ratio: 1/1;
  background-color: var(--ttRed);
  border: none;
  left: 6px;
  opacity: 0;
}
.jo-radio input[type="radio"]:checked + span::after {
  opacity: 1;
}

.jo-select-wrapper {
  height: 100%;
}
.jo-tab {
  transition: 0.2s ease;
  pointer-events: none;
  display: none;
}
.jo-tab.active {
  display: block;
  pointer-events: all;
}

.tt-channel-content-pagination > button {
  color: var(--ttRed);
  height: 20px;
}
.tt-channel-content-pagination .pages {
  display: flex;
  gap: 11px;
  overflow: auto;
}
.tt-channel-content-pagination .pages a {
  width: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1/1;
  background-color: rgba(158, 158, 158, 0.102);
  font-weight: 700;
  font-size: 16px;
  color: var(--black);
  border-radius: 50%;
  flex-shrink: 0;
}
@media screen and (max-width: 479px) {
  .tt-channel-content-pagination .pages a {
    width: 32px;
  }
}
.tt-channel-content-pagination .pages a:hover,
.tt-channel-content-pagination .pages a.active {
  background-color: var(--ttRed);
  color: var(--white);
}

.jo-inner-faq {
  padding: 4.583vw 0 5.208vw;
}
@media screen and (max-width: 991px) {
  .jo-inner-faq {
    padding: 38px 0 50px;
  }
}

.tt-accordion {
  margin: 2.448vw 12.5vw 0;
}
@media screen and (max-width: 1199px) {
  .tt-accordion {
    margin: 25px 12.5vw 0;
  }
}
@media screen and (max-width: 991px) {
  .tt-accordion {
    margin: 25px 15px 0;
  }
}
@media screen and (max-width: 479px) {
  .tt-accordion {
    margin: 25px 0 0;
  }
}
.tt-accordion .sa-single-accordion-item {
  padding: 30px 20px;
  border-radius: 10px;
  background-color: #f4f4f4;
}
.tt-accordion .sa-single-accordion-item:not(:last-child) {
  margin-bottom: 20px;
}
.tt-accordion .sa-single-accordion-item__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.tt-accordion .sa-single-accordion-item__header .left {
  display: flex;
  gap: 20px;
  align-items: center;
}
.tt-accordion .sa-single-accordion-item__header .left > * {
  margin-bottom: 0;
}
.tt-accordion .sa-single-accordion-item__header .left h5 {
  font-weight: bold;
  font-size: 20px;
}
@media screen and (max-width: 991px) {
  .tt-accordion .sa-single-accordion-item__header .left h5 {
    font-size: 18px;
  }
}
.tt-accordion .sa-single-accordion-item__header .left .order-num {
  color: var(--ttRed);
}
.tt-accordion .sa-single-accordion-item__title {
  margin-bottom: 0;
  transition: 0.4s ease;
}
.tt-accordion .sa-single-accordion-item__body {
  padding-left: 40px;
}
.tt-accordion .sa-single-accordion-item__body p {
  margin-bottom: 0;
  color: var(--white);
  font-weight: 600;
}
.tt-accordion .sa-single-accordion-item.open {
  background-color: var(--ttRed);
  color: var(--white);
}
.tt-accordion
  .sa-single-accordion-item.open
  .sa-single-accordion-item__header
  .order-num {
  color: var(--white);
}
.tt-accordion .sa-single-accordion-item.open .sa-single-accordion-item__title {
  color: var(--white);
}
.tt-accordion
  .sa-single-accordion-item.open
  .sa-single-accordion-item__header
  i {
  color: var(--white);
}
.tt-accordion .sa-single-accordion-item.open .sa-single-accordion-item__body {
  padding-top: 20px;
}

.jo-circle-box > * {
  position: absolute;
  width: 50px;
  height: 50px;
  opacity: 50%;
  transform-origin: left;
}
.jo-circle-box .circle-1 {
  left: 10%;
  top: 30%;
  animation: services-triangle 6s linear infinite alternate;
}
.jo-circle-box .circle-2 {
  left: 30%;
  top: 65%;
  animation: services-triangle 8s linear infinite alternate;
}
.jo-circle-box .circle-3 {
  left: 70%;
  top: 70%;
  animation: services-triangle 10s linear infinite alternate;
}
.jo-circle-box .circle-4 {
  left: 90%;
  top: 32%;
  animation: services-triangle 9s linear infinite alternate;
}

@keyframes services-triangle {
  0% {
    -webkit-transform: rotate(0deg) translateX(-50px);
    -moz-transform: rotate(0deg) translateX(-50px);
    -ms-transform: rotate(0deg) translateX(-50px);
    transform: rotate(0deg) translateX(-50px);
  }
  100% {
    -webkit-transform: rotate(360deg) translateY(100px);
    -moz-transform: rotate(360deg) translateY(100px);
    -ms-transform: rotate(360deg) translateY(100px);
    transform: rotate(360deg) translateY(100px);
  }
}
.tt-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 60px;
  margin-bottom: 30px;
}
@media screen and (max-width: 1199px) {
  .tt-header {
    gap: 20px;
  }
}
@media screen and (max-width: 575px) {
  .tt-header {
    margin-bottom: 20px;
  }
}
.tt-header button {
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.tt-header button i {
  font-size: 16px;
}
.tt-header button:hover {
  color: var(--ttRed);
}
@media screen and (max-width: 767px) {
  .tt-header__search-wrapper {
    position: fixed !important;
    width: auto !important;
    left: 20px;
    right: 20px;
    z-index: 22;
  }
}
.tt-header__search {
  background-color: var(--white);
  width: 100%;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 100px;
  display: flex;
  align-items: center;
  padding: 0 20px;
  height: 55px;
}
@media screen and (max-width: 767px) {
  .tt-header__search {
    position: fixed;
    z-index: 99;
    width: auto;
    top: 60px;
    left: 10px;
    right: 10px;
    height: 50px;
    box-shadow: 0px 4px 50px rgba(0, 0, 0, 0.1);
    transform: translateY(-10%);
    opacity: 0;
    pointer-events: none;
    transition: 0.2s ease;
  }
  .tt-header__search.active {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }
}
.tt-header__search input {
  background: transparent;
  border: none;
  width: 100%;
  height: 100%;
}
.tt-header__search button {
  font-size: 18px;
  color: var(--ttRed);
}
.tt-header__search button:hover {
  color: var(--black);
}
.tt-header-search-suggestion {
  background-color: var(--white);
  position: absolute;
  z-index: 22;
  box-shadow: 0px 4px 64px rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  padding: 12px 20px;
  width: 100%;
  top: calc(100% + 10px);
  display: none;
}
.tt-header-search-suggestion.active {
  display: block;
}
@media screen and (max-width: 767px) {
  .tt-header-search-suggestion {
    top: 90px;
  }
}
.tt-header-search-suggestion a {
  display: block;
  color: var(--black);
  padding: 6px 0;
}
.tt-header-search-suggestion a:hover {
  color: var(--ttRed);
}
.tt-header__right {
  flex-shrink: 0;
  display: flex;
  gap: 20px;
}
@media screen and (max-width: 1199px) {
  .tt-header__right {
    gap: 15px;
  }
}
.tt-header__right button {
  border: 1px solid rgba(181, 181, 181, 0.25);
  height: 40px;
  padding: 0 15px;
  border-radius: 99px;
}
@media screen and (max-width: 1199px) {
  .tt-header__right button {
    padding: 0 11px;
  }
}

.tt-mobile-nav {
  position: fixed;
  bottom: 0;
  z-index: 99;
  left: 0;
  right: 0;
  background-color: var(--white);
  display: none;
  padding: 21px 20px 15px;
  align-items: center;
  justify-content: space-between;
  background: var(--white);
  box-shadow: 0px 4px 70px rgba(0, 0, 0, 0.1);
  border-radius: 20px 20px 0px 0px;
}
@media screen and (max-width: 767px) {
  .tt-mobile-nav {
    display: flex;
  }
}
.tt-mobile-nav a {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
  color: var(--black);
  font-size: 14px;
}
.tt-mobile-nav a:hover,
.tt-mobile-nav a.active {
  color: var(--ttRed);
}
.tt-mobile-nav a i {
  font-size: 16px;
}

.jo-header {
  position: relative;
  z-index: 99;
  width: 100%;
  padding: 10px 1.563vw;
  background: #fff; /* Transparent white */
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.08);
  opacity: 1; /* Set to 1 to keep elements visible */
}

@media screen and (max-width: 1399px) {
  .jo-header {
    inset: 0 40px auto;
  }
}
@media screen and (max-width: 1199px) {
  .jo-header {
    padding: 0 20px;
  }
}
@media screen and (max-width: 991px) {
  .jo-header {
    padding: 15px 20px;
  }
}
@media screen and (max-width: 767px) {
  .jo-header {
    inset: 0 20px auto;
  }
}
@media screen and (max-width: 479px) {
  .jo-header {
    inset: 0 0 auto;
    padding: 12px;
  }
}
.jo-header-right {
  display: flex;
  align-items: center;
  gap: 4.167vw;
  flex-shrink: 0;
}
@media screen and (max-width: 1399px) {
  .jo-header-right {
    gap: 60px;
  }
}
@media screen and (max-width: 1199px) {
  .jo-header-right {
    gap: 40px;
  }
}
@media screen and (max-width: 479px) {
  .jo-header-right .jo-btn {
    font-size: 14px;
    padding: 0 10px;
    height: 38px;
  }
}
.jo-header-right .jo-btn.jo-header-sidebar-open-btn {
  padding-top: 3px;
}
@media screen and (max-width: 479px) {
  .jo-header-right .jo-btn.jo-header-sidebar-open-btn {
    padding: 5px 10px 0 !important;
  }
}
.jo-header-right .jo-btn.jo-header-sidebar-open-btn i {
  font-size: 18px;
  padding-right: 0;
}
@media screen and (max-width: 479px) {
  .jo-header-right .jo-btn.jo-header-sidebar-open-btn i {
    font-size: 16px;
  }
}
.jo-header-right .jo-btn i {
  font-size: 10px;
  padding-top: 1px;
  padding-right: 5px;
}
.jo-header-nav nav {
  font-weight: 500;
  display: flex;
  gap: 2.604vw;
}
@media screen and (max-width: 1399px) {
  .jo-header-nav nav {
    gap: 30px;
  }
}
@media screen and (max-width: 1199px) {
  .jo-header-nav nav {
    gap: 20px;
  }
}
@media screen and (max-width: 991px) {
  .jo-header-nav nav {
    display: none;
  }
}
.jo-header-nav nav a {
  color: #09a904;
  font-size: clamp(16px, 0.833vw, 16px);
  height: clamp(70px, 3.89vw, 74px);
  display: grid;
  align-items: center;
}
.jo-header-nav nav a:not([href]):hover,
.jo-header-nav nav a:hover {
  color: #09a904;
}
.jo-header-submenu {
  position: absolute;
  min-width: 200px;
  background-color: var(--white);
  box-shadow: 0 15px 15px rgba(0, 0, 0, 0.03);
  top: 100%;
  left: 0;
  opacity: 0;
  transition: 0.4s ease, pointer-events 0s;
  transform: translateY(-5px);
  pointer-events: none;
  width: max-content;
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.1);
  border-radius: 0 0 10px 10px;
  overflow: hidden;
}
.jo-header-submenu li {
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.jo-header-submenu li:last-child {
  border-bottom: 0;
}
.jo-header-submenu li a {
  height: auto;
  padding: 8px 15px;
  display: inline-block;
  width: 100%;
}
@media screen and (max-width: 991px) {
  .jo-header-submenu li a {
    padding: 4px 10px;
  }
}
@media screen and (max-width: 991px) {
  .jo-header-submenu {
    position: static;
    transform: translateY(0);
    opacity: 1;
    width: 100%;
    overflow: hidden;
    box-shadow: none;
  }
}

.has-sub-menu {
  position: relative;
  display: grid;
  grid-template-rows: max-content 0fr;
  transition: 0.4s ease;
}
.has-sub-menu > a {
  position: relative;
}
@media screen and (max-width: 991px) {
  .has-sub-menu > a::before,
  .has-sub-menu > a::after {
    content: "";
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    width: 10px;
    height: 1px;
    background-color: var(--tt-pink);
  }
  .has-sub-menu > a::after {
    transform: rotate(90deg) translateX(-5%);
    transition: 0.4s ease;
  }
}
@media screen and (max-width: 991px) {
  .has-sub-menu.active {
    grid-template-rows: max-content 1fr;
  }
}
.has-sub-menu.active > a::after {
  transform: rotate(0deg);
}
.has-sub-menu.active .jo-header-submenu {
  margin-bottom: 5px;
  pointer-events: all;
}
.has-sub-menu:hover .jo-header-submenu {
  opacity: 1;
  transform: translateY(0);
  pointer-events: all;
}

.jo-inner-header {
  background-color: var(--white);
}

.jo-banner {
  background-size: cover;
  padding: 8.125vw 0 0;
  position: relative;
  z-index: 1;
  overflow: hidden;
}
@media screen and (max-width: 1599px) {
  .jo-banner {
    padding: 126px 0 0;
  }
}
@media screen and (max-width: 1199px) {
  .jo-banner {
    padding: 106px 0 0;
  }
}
.jo-banner .vector {
  position: absolute;
  bottom: 115px;
  right: 0;
}
.jo-banner-container {
  margin: 0 7.031vw;
}
@media screen and (max-width: 1599px) {
  .jo-banner-container {
    margin: 0 75px;
  }
}
@media screen and (max-width: 1199px) {
  .jo-banner-container {
    margin: 0 45px;
  }
}
@media screen and (max-width: 479px) {
  .jo-banner-container {
    margin: 0 15px;
  }
}
.jo-banner__txt {
  position: relative;
}
.jo-banner__txt .vector {
  bottom: -65px;
  right: 370px;
}
.jo-banner__title {
  margin-top: 25px;
  font-size: clamp(34px, 5.73vw, 110px);
  font-weight: 700;
  color: var(--white);
  line-height: 1.05;
  margin-bottom: 30px;
}
.jo-banner__title > span:first-child {
  display: block;
}
.jo-banner__title span.styled {
  position: relative;
  z-index: 1;
}
.jo-banner__title span.styled::before,
.jo-banner__title span.styled::after {
  position: absolute;
  content: "";
  inset: 0;
  top: -30px;
  z-index: -1;
  background: url(../img/banner-txt-vector-1.svg) no-repeat center center;
  background-size: 100% 100%;
}
.jo-banner__title span.styled::after {
  background-image: url(../img/banner-txt-vector-2.svg);
  z-index: 1;
  inset: -10px;
  left: -8px;
  top: -30px;
}
.jo-banner__notifi {
  background-color: var(--white);
  border-radius: 999px;
  padding: 5px 8px;
  max-width: 160px;
  display: flex;
  gap: 8px;
  align-items: center;
  position: relative;
  font-size: 14px;
  color: var(--ttGray2);
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
}
.jo-banner__notifi > img {
  width: 40px;
  aspect-ratio: 1/1;
  display: inline-block;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
}
.jo-banner__notifi .icon {
  position: absolute;
  top: 0;
  right: 10px;
  transform: translateY(-40%);
  border-radius: 999px;
  box-shadow: 0 5px 7px rgba(0, 0, 0, 0.3);
}
.jo-banner__notifi .icon img {
  width: 30px;
}
.jo-banner__btns {
  display: flex;
  gap: 20px;
}
.jo-banner__btns > *:last-child {
  background: none;
}
.jo-banner__btns > *:last-child:hover {
  background: #09a904;
}
.jo-banner__btns > *:last-child::before {
  border: 1px solid transparent;
  background: linear-gradient(90deg, #105a0d, var(--white)) border-box;
  -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: destination-out;
  mask-composite: exclude;
}
@media screen and (max-width: 991px) {
  .jo-banner__img {
    text-align: center;
  }
}
.jo-banner__img > img {
  max-width: 33.854vw;
}
@media screen and (max-width: 991px) {
  .jo-banner__img > img {
    max-width: 60%;
    margin: auto;
  }
}
.jo-banner__img::before,
.jo-banner__img::after {
  transform: translateX(-50%) !important;
  pointer-events: none;
}
.jo-banner__img .jo-banner__notifi {
  position: absolute;
  top: 70%;
  left: 0;
  text-align: left;
}
.jo-banner__followers {
  background: url(../img/banner-follower-count.svg) no-repeat center center;
  background-size: contain;
  text-align: center;
  font-size: 14px;
  padding: 28px 32px;
  position: absolute;
  right: 0;
  top: 30%;
}
@media screen and (max-width: 479px) {
  .jo-banner__followers {
    padding: 18px 22px;
  }
}
.jo-banner__followers .number {
  font-weight: 700;
  font-size: 26px;
  color: var(--ttRed);
  display: block;
  margin-bottom: 0;
  line-height: 1;
}
@media screen and (max-width: 479px) {
  .jo-banner__followers .number {
    font-size: 22px;
  }
}

.jo-social-links {
  padding: 100px 0 50px;
}
@media screen and (max-width: 1399px) {
  .jo-social-links {
    padding: 70px 0 20px;
  }
}
@media screen and (max-width: 767px) {
  .jo-social-links {
    padding: 50px 0 10px;
  }
}
@media screen and (min-width: 1400px) {
  .jo-social-links .container {
    max-width: 1417px;
  }
}
@media (min-width: 576px) {
  .jo-social-links .row {
    --bs-gutter-x: 1.25vw;
  }
}
@media screen and (max-width: 1399px) {
  .jo-social-links .row {
    --bs-gutter-x: 15px;
    --bs-gutter-y: 15px;
  }
}

.jo-social-link {
  background-color: var(--white);
  box-shadow: 0 4px 70px rgba(9, 171, 4, 0.5);
  border-radius: 10px;
  padding: 1.563vw 1.042vw;
  display: flex;
  gap: 0.781vw;
  align-items: center;
}
@media screen and (max-width: 1399px) {
  .jo-social-link {
    padding: 15px;
    flex-wrap: wrap;
    gap: 8px;
  }
}
@media screen and (max-width: 479px) {
  .jo-social-link {
    gap: 10px;
  }
}
.jo-social-link .icon {
  max-width: clamp(40px, 2.604vw, 50px);
  flex-shrink: 0;
}
.jo-social-link .txt {
  flex-grow: 1;
}
.jo-social-link .txt h5 {
  font-weight: 600;
  font-size: clamp(18px, 1.042vw, 20px);
  margin-bottom: 0.156vw;
}
.jo-social-link .txt span {
  font-weight: 400;
  font-size: clamp(12px, 0.729vw, 14px);
  color: var(--ttGray2);
}
.jo-social-link .jo-btn {
  padding: 0 8px;
  font-size: 16px;
  height: 29px;
  flex-shrink: 0;
}

.jo-reels {
  padding: 50px 0;
}
@media screen and (max-width: 991px) {
  .jo-reels {
    padding: 50px 0 0;
  }
}
@media screen and (max-width: 767px) {
  .jo-reels {
    padding: 40px 0 0;
  }
}
.jo-reels-heading {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0px;
  gap: 40px;
}
@media screen and (max-width: 479px) {
  .jo-reels-heading {
    margin-bottom: 10px;
  }
}
.jo-reels-heading button {
  flex-shrink: 0;
  background-color: rgba(9, 171, 4, 0.5);
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 99px;
  color: var(--ttRed);
  transition: 0.4s ease;
}
.jo-reels-heading button i {
  padding-top: 2px;
}
.jo-reels-heading button:hover {
  color: var(--white);
  background-color: var(--ttRed);
}

.jo-reels-container {
  max-width: 1920px;
  margin: auto;
  padding: 0px 3.91vw;
}

@media screen and (max-width: 991px) {
  .jo-reel .plyr {
    min-width: 0;
  }
}
.jo-reel .plyr__poster {
  background-color: transparent;
}
.jo-reel-video {
  margin-bottom: 16px;
  border-radius: 20px;
  overflow: hidden;
}
.jo-reel-video video {
  max-width: 100%;
  height: 25.63vw;
  max-height: 492px;
  width: 100%;
  object-fit: cover;
  background: #ddd;
  vertical-align: top;
}
@media screen and (max-width: 767px) {
  .jo-reel-video video {
    height: 42.63vw;
  }
}
@media screen and (max-width: 575px) {
  .jo-reel-video video {
    height: 66.63vw;
  }
}
@media screen and (max-width: 479px) {
  .jo-reel-video video {
    height: 138.73vw;
  }
}
.jo-reel .link {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 20px;
}
.jo-reel-title a {
  font-weight: 700;
  font-size: 1.042vw;
  color: var(--black);
}
@media screen and (max-width: 1399px) {
  .jo-reel-title a {
    font-size: 16px;
  }
}
.jo-reel-title a:hover {
  color: var(--tt-pink);
}
.jo-reel-info {
  color: var(--ttGray2);
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.platform-tag,
.jo-reel .link {
  background-color: var(--white);
  padding: 10px 15px;
  width: max-content;
  border-radius: 99px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  font-weight: 600;
  color: var(--black);
}
.platform-tag img,
.jo-reel .link img {
  width: 16px;
}

.jo-services {
  padding: 2.604vw 0;
}
@media screen and (max-width: 991px) {
  .jo-services {
    padding: 40px 0;
  }
}
@media (min-width: 1400px) {
  .jo-services .container {
    max-width: 1417px;
  }
}
.jo-services-wrapper {
  padding: 2.604vw;
  background-color: #cad4ca;
  border-radius: 20px;
}
@media screen and (max-width: 1399px) {
  .jo-services-wrapper {
    padding: 30px;
  }
}
@media screen and (max-width: 991px) {
  .jo-services-wrapper {
    padding: 20px;
  }
}
@media screen and (max-width: 479px) {
  .jo-services-wrapper {
    padding: 15px;
  }
}
.jo-services-wrapper .heading {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: space-between;
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
  padding-bottom: 26px;
  margin-bottom: 40px;
  flex-wrap: wrap;
}
@media screen and (max-width: 479px) {
  .jo-services-wrapper .heading {
    margin-bottom: 20px;
    padding-bottom: 21px;
  }
}
.jo-services-tabs-wrapper {
  display: flex;
  align-items: flex-start;
  gap: 1.563vw;
}
@media screen and (max-width: 991px) {
  .jo-services-tabs-wrapper {
    flex-direction: column;
  }
}
@media screen and (max-width: 479px) {
  .jo-services-tabs-wrapper {
    gap: 20px;
  }
}
.jo-services-tab-navs {
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 0.781vw, 15px);
  flex-shrink: 0;
}
@media screen and (max-width: 991px) {
  .jo-services-tab-navs {
    width: 100%;
    text-align: center;
  }
}
.jo-services-tab-navs .tab-nav {
  background-color: var(--white);
  border-radius: 10px;
  height: 3.906vw;
  min-width: 19.271vw;
  text-align: left;
  padding: 0 1.042vw;
  font-weight: 600;
  font-size: 1.042vw;
  position: relative;
  z-index: 1;
}
@media screen and (max-width: 1399px) {
  .jo-services-tab-navs .tab-nav {
    min-width: 0;
    font-size: 16px;
    height: 55px;
  }
}
@media screen and (max-width: 991px) {
  .jo-services-tab-navs .tab-nav {
    font-size: 14px;
    height: 45px;
    padding: 0 15px;
    text-align: center;
  }
}
.jo-services-tab-navs .tab-nav::before {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  border-radius: 10px;
  background: linear-gradient(90deg, #09ab04 0%, #143612 100%);
  z-index: -1;
  opacity: 0;
  transition: 0.4s ease;
}
.jo-services-tab-navs .tab-nav.active {
  color: var(--white);
}
.jo-services-tab-navs .tab-nav.active::before {
  opacity: 1;
}

.tt-tab {
  overflow: hidden;
  opacity: 0;
  height: 0;
  pointer-events: none;
  transition: 0.4s ease;
}
.tt-tab.active {
  opacity: 1;
  height: auto;
  pointer-events: auto;
}

.tt-service-tab {
  display: flex;
  gap: 1.563vw;
  background-color: var(--white);
  padding: 1.563vw;
  border-radius: 10px;
}
@media screen and (max-width: 1199px) {
  .tt-service-tab {
    flex-direction: column;
    gap: 20px;
  }
}
@media screen and (max-width: 767px) {
  .tt-service-tab {
    padding: 20px;
  }
}
@media screen and (max-width: 479px) {
  .tt-service-tab {
    padding: 15px;
  }
}
.tt-service-tab .img {
  max-width: 21.302vw;
  flex-shrink: 0;
  border-radius: 10px;
  overflow: hidden;
}
@media screen and (max-width: 1399px) {
  .tt-service-tab .img {
    max-width: 350px;
  }
}
.tt-service-tab .title {
  font-size: clamp(17px, 1.042vw, 20px);
  font-weight: 700;
  color: var(--black);
  margin-bottom: 0.365vw;
}
@media screen and (max-width: 991px) {
  .tt-service-tab .title {
    margin-bottom: 12px;
  }
}
.tt-service-tab .descr {
  font-weight: 400;
  font-size: clamp(16px, 0.833vw, 16px);
  line-height: 1.65;
  color: var(--ttGray2);
  margin-bottom: 0.885vw;
}
@media screen and (max-width: 991px) {
  .tt-service-tab .descr {
    margin-bottom: 15px;
  }
}
.tt-service-tab .list {
  font-size: clamp(16px, 0.833vw, 16px);
  list-style: disc inside;
  padding-left: 10px;
  margin-bottom: 0;
}
.tt-service-tab .list li:not(:last-child) {
  margin-bottom: 0.521vw;
}

.jo-intro-lives-wrapper {
  background: url(../img/intro-live-bg.png) var(--black) no-repeat center center;
  background-size: cover;
  padding: 50px 0;
}

.jo-intro {
  overflow: hidden;
  position: relative;
  padding: 50px 0;
}
@media screen and (max-width: 1399px) {
  .jo-intro {
    padding: 20px 0 50px;
  }
}
.jo-intro__txt {
  color: var(--white);
}
.jo-intro__txt .jo-section-title {
  color: var(--white);
  margin-bottom: 22px;
}
.jo-intro__txt .jo-btn::after {
  content: "";
  position: absolute;
  inset: 1px;
  background-color: var(--black);
  z-index: -1;
  border-radius: 6px;
  transition: 0.4s ease;
}
.jo-intro__txt .jo-btn:hover::after {
  opacity: 0;
}
.jo-intro__descr {
  margin-bottom: 33px;
  font-size: clamp(16px, 0.833vw, 16px);
}
.jo-intro__list {
  padding: 0;
  margin: 0;
  margin-bottom: 50px;
}
.jo-intro__list li {
  position: relative;
  padding-left: 35px;
  list-style: none;
  font-weight: 600;
  font-size: clamp(16px, 0.833vw, 16px);
}
.jo-intro__list li:not(:last-child) {
  margin-bottom: 18px;
}
.jo-intro__list li::before {
  position: absolute;
  content: "";
  left: 0;
  top: 1px;
  width: 20px;
  height: 20px;
  background: url(../img/checkmark-badge.svg) no-repeat center center;
  background-size: 100% 100%;
}
.jo-intro__img {
  display: flex;
  justify-content: flex-start;
  margin-left: 34px;
  position: relative;
}
@media screen and (max-width: 479px) {
  .jo-intro__img {
    margin-left: 0;
  }
}
.jo-intro__img .play-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 56px;
  width: 114px;
  aspect-ratio: 1/1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--white);
  color: var(--ttRed);
  border-radius: 99px;
  font-size: 26px;
  box-shadow: 0 0 0 20px rgba(255, 255, 255, 0.5);
  animation: btn-shadow-anim 2.5s linear infinite forwards;
}
@media screen and (max-width: 767px) {
  .jo-intro__img .play-btn {
    left: 26px;
    width: 84px;
  }
}
@media screen and (max-width: 479px) {
  .jo-intro__img .play-btn {
    left: 10px;
    width: 70px;
    font-size: 20px;
  }
}
.jo-intro__img .play-btn:hover {
  background-color: var(--ttRed);
  color: var(--white);
}
.jo-intro__img img {
  max-width: none;
  max-height: 34.371vw;
  border-radius: 999px 0 0 999px;
}
.jo-intro__vector {
  position: absolute;
  top: 27px;
  left: -427px;
  animation: spin 5.5s linear infinite forwards;
}
@media screen and (max-width: 1799px) {
  .jo-intro__vector {
    left: -497px;
  }
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes btn-shadow-anim {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.5);
  }
  100% {
    box-shadow: 0 0 0 20px rgba(255, 255, 255, 0);
  }
}
.jo-upcoming-lives {
  color: var(--white);
  padding: 50px 0;
}
@media screen and (max-width: 1399px) {
  .jo-upcoming-lives {
    padding: 20px 0;
  }
}
.jo-upcoming-lives__heading {
  text-align: center;
  border: solid rgba(255, 255, 255, 0.2);
  border-width: 1px 0 1px 0;
  color: var(--white);
  padding: 40px 0 30px;
  margin-bottom: 50px;
}
@media screen and (max-width: 1399px) {
  .jo-upcoming-lives__heading {
    padding: 30px 0 20px;
  }
}
.jo-upcoming-lives__heading .jo-section-title {
  color: var(--white);
}
.jo-upcoming-live {
  display: flex;
  align-items: center;
  gap: 2.604vw;
  background-color: rgba(255, 255, 255, 0.05);
  border-radius: 20px;
  padding: 1.563vw;
}
@media screen and (max-width: 1399px) {
  .jo-upcoming-live {
    gap: 30px;
  }
}
@media screen and (max-width: 1199px) {
  .jo-upcoming-live {
    align-items: flex-start;
  }
}
@media screen and (max-width: 991px) {
  .jo-upcoming-live {
    flex-direction: column;
  }
}
@media screen and (max-width: 767px) {
  .jo-upcoming-live {
    padding: 15px;
  }
}
.jo-upcoming-live:not(:last-child) {
  margin-bottom: 30px;
}
.jo-upcoming-live__img {
  border-radius: 20px;
  overflow: hidden;
  flex-shrink: 0;
  max-width: 26.458vw;
}





@media screen and (max-width: 1399px) {
  .jo-upcoming-live__img {
    max-width: 478px;
  }
}
@media screen and (max-width: 1199px) {
  .jo-upcoming-live__img {
    max-width: 418px;
  }
}
.jo-upcoming-live__txt .platform-tag {
  margin-bottom: 1.302vw;
}
.jo-upcoming-live__txt .title {
  font-weight: 700;
  font-size: 20px, 1.25vw, 24px;
}
.jo-upcoming-live__txt .date {
  font-size: clamp(12px, 0.729vw, 14px);
  font-weight: 500;
  padding-bottom: 1.302vw;
  display: inline-block;
}
@media screen and (max-width: 479px) {
  .jo-upcoming-live__txt .date {
    padding-bottom: 15px;
  }
}
.jo-upcoming-live__txt .descr {
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  padding-top: 1.042vw;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 1.667vw;
  font-size: clamp(16px, 0.833vw, 16px);
}
@media screen and (max-width: 479px) {
  .jo-upcoming-live__txt .descr {
    padding-top: 15px;
    margin-bottom: 20px;
  }
}

.jo-videos {
  padding: 100px 0;
}
@media screen and (max-width: 1399px) {
  .jo-videos {
    padding: 70px 0;
  }
}
.jo-videos__heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 45px;
  flex-wrap: wrap;
  gap: 8px;
}
.jo-videos__heading .jo-section-title {
  margin-bottom: 0;
}
.jo-videos__heading .jo-videos__btn {
  color: var(--ttRed);
}
.jo-videos__heading .jo-videos__btn i {
  padding-top: 4px;
  padding-right: 4px;
}
.jo-videos__heading .jo-videos__btn:hover {
  color: var(--white);
}
.jo-videos__heading .jo-videos__btn:hover::after {
  opacity: 0;
}
.jo-videos__heading .jo-videos__btn::after {
  position: absolute;
  inset: 1px;
  content: "";
  z-index: -1;
  background-color: var(--white);
  border-radius: 5px;
  transition: 0.4s ease;
}
.jo-videos-slider {
  margin-bottom: 30px;
}

.jo-video-card {
  border-radius: 20px;
  overflow: hidden;
  position: relative;
  margin: 0 auto;
  z-index: 1;
  max-width: 35.94vw;
  min-width: 30vw;
}
@media screen and (max-width: 991px) {
  .jo-video-card {
    max-width: 350px;
  }
}
@media screen and (max-width: 479px) {
  .jo-video-card {
    max-width: 315px;
  }
}
.jo-video-card:hover::before {
  opacity: 1;
}
.jo-video-card:hover .bottom {
  transform: translateY(0);
}
.jo-video-card::before {
  position: absolute;
  content: "";
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    to bottom,
    rgba(255, 30, 132, 0.5),
    var(--tt-gold)
  );
  opacity: 0;
  transition: 0.4s ease;
}
.jo-video-card__img {
  width: 100%;
  object-fit: contain;
  background-color: #f5f5f5;
}
.jo-video-card__txt {
  position: absolute;
  inset: 40px;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
}
@media screen and (max-width: 1399px) {
  .jo-video-card__txt {
    inset: 30px;
  }
}
@media screen and (max-width: 1199px) {
  .jo-video-card__txt {
    inset: 20px;
  }
}
@media screen and (max-width: 479px) {
  .jo-video-card__txt {
    inset: 15px;
  }
}
.jo-video-card__btn {
  border: 1px solid var(--white);
  border-radius: 50%;
  width: 50px;
  aspect-ratio: 1/1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  padding-top: 1px;
  color: var(--white);
}
.jo-video-card__btn:hover {
  background-color: var(--white);
  color: var(--tt-pink);
}
.jo-video-card__premium-tag {
  width: 50px;
  aspect-ratio: 1/1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--black);
  background-color: var(--white);
  border-radius: 50%;
  padding-top: 1px;
}
.jo-video-card .bottom {
  transform: translateY(calc(100% - 27px));
  transition: 0.4s ease;
}
.jo-video-card .price {
  display: inline-block;
  background: var(--white);
  border-radius: 999px;
  font-weight: 600;
  font-size: 12px;
  padding: 3.5px 10px;
  color: var(--ttRed);
  margin-bottom: 10px;
}
.jo-video-card__title {
  font-weight: 700;
  font-size: clamp(21px, 1.26vw, 24px);
  line-height: 29px;
  color: var(--white);
  margin-bottom: 4px;
  display: inline-block;
}
.jo-video-card__title:hover {
  color: var(--tt-pink);
}
.jo-video-card__infos {
  color: var(--white);
  font-weight: 300;
}
.jo-video-card__infos > *:not(:last-child) {
  border-right: 1px solid var(--white);
  padding-right: 10px;
  margin-right: 5px;
}

.jo-contact {
  overflow: hidden;
}
.jo-contact .top {
  padding-top: 100px;
 /* background: url(../img/contact-bg.jpg) no-repeat center center;*/
  background-size: cover;
}
@media screen and (max-width: 1399px) {
  .jo-contact .top {
    padding-top: 70px;
  }
}
@media screen and (max-width: 991px) {
  .jo-contact .top {
    padding: 70px 0;
  }
}
.jo-contact__img {
  position: relative;
  z-index: 1;
}
.jo-contact__img::before,
.jo-contact__img::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: -50px;
  left: 50%;
  transform: translateX(-42%);
  width: 594px;
  aspect-ratio: 1/1;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.5);
  animation: scale 3s infinite linear;
}
.jo-contact__img::after {
  width: 510px;
  height: 510px;
  top: -7px;
  transform: translateX(-40.8%);
}
.jo-contact-form-wrapper {
  border-radius: 20px;
  background-color: var(--white);
  padding: 2.083vw;
  box-shadow: 0px 4px 70px rgba(9, 171, 4, 0.5);
  margin-bottom: -225px;
}
@media screen and (max-width: 1199px) {
  .jo-contact-form-wrapper {
    padding: 30px;
  }
}
@media screen and (max-width: 991px) {
  .jo-contact-form-wrapper {
    margin-bottom: 0;
  }
}
@media screen and (max-width: 479px) {
  .jo-contact-form-wrapper {
    padding: 20px;
  }
}
.jo-contact-form-wrapper > .icon {
  display: inline-block;
  margin-bottom: 0.781vw;
}
.jo-contact-form-wrapper .jo-section-title {
  margin-bottom: 0.781vw;
}
@media screen and (max-width: 1399px) {
  .jo-contact-form-wrapper .jo-section-title {
    margin-bottom: 10px;
  }
}
.jo-contact-form-wrapper p {
  margin-bottom: 1.563vw;
}
@media screen and (max-width: 1399px) {
  .jo-contact-form-wrapper p {
    margin-bottom: 12px;
  }
}
.jo-contact-form > *:not(:last-child) {
  margin-bottom: 1.458vw;
}
@media screen and (max-width: 1399px) {
  .jo-contact-form > *:not(:last-child) {
    margin-bottom: 15px;
  }
}
.jo-contact-form label {
  display: block;
  width: max-content;
  max-width: 100%;
  font-weight: 600;
  color: var(--black);
  font-size: clamp(16px, 0.833vw, 16px);
  margin-bottom: 0.885vw;
}
.jo-contact-form input,
.jo-contact-form textarea {
  border: 1px solid rgba(0, 0, 0, 0.15);
  height: clamp(56px, 3.385vw, 65px);
  width: 100%;
  padding: 0 1.302vw;
  font-size: clamp(16px, 0.833vw, 16px);
  font-weight: 500;
  color: var(--black);
  border-radius: 10px;
  background-color: rgba(245, 245, 245, 0.5);
}
@media screen and (max-width: 479px) {
  .jo-contact-form input,
  .jo-contact-form textarea {
    padding: 0 15px;
    height: 45px;
  }
}
.jo-contact-form textarea {
  height: clamp(120px, 7.187vw, 138px);
  padding: 0.781vw 1.302vw;
}
@media screen and (max-width: 1399px) {
  .jo-contact-form textarea {
    padding: 15px;
  }
}
.jo-contact-form textarea:focus {
  outline: none;
}
.jo-contact .jo-btn {
  font-size: clamp(16px, 0.833vw, 16px);
}
.jo-contact .bottom {
  padding-bottom: 300px;
  background-color: #cad4ca;
}
@media screen and (max-width: 1399px) {
  .jo-contact .bottom {
    padding-bottom: 70px;
  }
}
@media screen and (max-width: 767px) {
  .jo-contact .bottom {
    padding-bottom: 50px;
  }
}
.jo-contact .bottom .blank-space {
  pointer-events: none;
}

@keyframes scale {
  0% {
    scale: 1;
    opacity: 1;
  }
  100% {
    scale: 1.1;
    opacity: 0;
  }
}
.jo-partners-title {
  font-weight: 600;
  font-size: 24px;
  color: var(--black);
  text-align: center;
  margin-bottom: 40px;
  margin-top: 45px;
}
.jo-partners-slider-pagination {
  text-align: center;
  margin-top: 55px;
}
.jo-partners-slider-pagination .swiper-pagination-bullet-active {
  background-color: var(--ttRed);
}

.jo-articles {
  padding: 100px 0;
}
@media screen and (max-width: 1399px) {
  .jo-articles {
    padding: 70px 0;
  }
}
.jo-articles .jo-section-title {
  margin-bottom: 30px;
}

.jo-article {
  border: 1px solid #e5e5e5;
  padding: 24px;
  border-radius: 16px;
}
@media screen and (max-width: 1199px) {
  .jo-article {
    padding: 18px;
  }
}
.jo-article__img {
  overflow: hidden;
  border-radius: 10px;
  margin-bottom: 20px;
  position: relative;
}
.jo-article__img img {
  width: 100%;
  aspect-ratio: 402/265;
}
.jo-article .date {
  position: absolute;
  bottom: 30px;
  left: 30px;
  background-color: var(--white);
  border-radius: 10px;
  font-weight: 500;
  font-size: clamp(11px, 0.729vw, 14px);
  color: var(--black);
  display: inline-block;
  text-transform: uppercase;
  overflow: hidden;
  text-align: center;
}
@media screen and (max-width: 1399px) {
  .jo-article .date {
    bottom: 20px;
    left: 20px;
  }
}
.jo-article .date .number {
  background: #09a904;
  display: block;
  color: var(--white);
  padding: 3px;
  border-radius: 10px;
}
.jo-article .date .txt {
  padding: 2px 11px;
  display: block;
}
.jo-article__infos {
  display: flex;
  align-items: center;
  gap: 1.563vw;
  font-size: clamp(12px, 0.729vw, 14px);
  font-weight: 500;
  margin-bottom: 0.625vw;
}
.jo-article__info {
  display: flex;
  align-items: center;
  gap: 5px;
  line-height: 1;
}
.jo-article__info i {
  font-size: 18px;
  color: #09a904;
}
.jo-article__title {
  font-weight: 600;
  font-size: clamp(19px, 1.146vw, 22px);
  margin-bottom: 1.302vw;
  line-height: 1.4;
}
@media screen and (max-width: 1399px) {
  .jo-article__title {
    margin-bottom: 18px;
  }
}
.jo-article__title a {
  color: var(--black);
  display: inline-block;
}
.jo-article__title a:hover {
  color: var(--ttRed);
}
.jo-article__btn {
  font-weight: 600;
  color: #09a904;
  font-size: clamp(16px, 0.833vw, 16px);
  display: inline-flex;
}
.jo-article__btn:hover {
  color: var(--black);
}
.jo-article__btn .icon {
  font-size: 22px;
  line-height: 0.7;
  padding-top: 1px;
  padding-left: 4px;
}

.tt-footer {
  background-color: var(--black);
  padding: 55px 30px;
  color: var(--white);
}
@media screen and (max-width: 479px) {
  .tt-footer {
    padding: 45px 20px;
  }
}
.tt-footer-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 35px;
  padding-bottom: 40px;
}
@media screen and (max-width: 1399px) {
  .tt-footer-top {
    flex-wrap: wrap;
    justify-content: center;
  }
}
@media screen and (max-width: 767px) {
  .tt-footer-top > * {
    flex-grow: 1;
  }
}
.tt-footer-top__about {
  max-width: 600px;
  flex-shrink: 0;
}
@media screen and (max-width: 767px) {
  .tt-footer-top__about {
    max-width: 100%;
  }
}


.tt-footer-top__logo {
  margin-bottom: 20px;
  display: inline-block;
}
.tt-footer-top__descr {
  margin-bottom: 30px;
}
.tt-footer-top__socials {
  display: flex;
  align-items: center;
  gap: 15px;
}
.tt-footer-top__socials a {
  width: 47px;
  font-size: 20px;
  color: rgba(255, 255, 255, 0.7);
  aspect-ratio: 1/1;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #d2d2d2;
  border-radius: 50%;
  transition: 0.4s ease;
}
.tt-footer-top__socials a i {
  padding-top: 3px;
}
.tt-footer-top__socials a:hover {
  background-color: var(--ttRed);
  color: var(--white);
  border-color: var(--ttRed);
}
.tt-footer-widget__title {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 18px;
}
.tt-footer-widget__links a {
  font-size: 16px;
  display: block;
  margin-bottom: 8px;
  color: var(--white);
}
.tt-footer-widget__links a:hover {
  color: var(--ttRed);
}
.tt-footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding: 20px 0 0;
  gap: 20px 10px;
}
.tt-footer-bottom p,
.tt-footer-bottom a {
  color: rgba(255, 255, 255, 0.5);
}
.tt-footer-bottom .links {
  gap: 8px 35px;
}
.tt-footer-bottom a:hover {
  color: var(--ttRed);
}

.jo-footer {
  background-color: var(--black);
  margin-top: 100px;
}
.jo-footer-top {
  padding: 2.76vw 1.563vw;
  background: linear-gradient(90deg, #143612 48%, #09ab04 100%);
  border-radius: 0 0 20px 20px;
}
@media screen and (max-width: 1199px) {
  .jo-footer-top {
    padding: 40px 1.563vw;
  }
}
@media screen and (max-width: 991px) {
  .jo-footer-top {
    padding: 30px 10px;
  }
}
.jo-footer-top .logo {
  width: 211px;
}
@media screen and (max-width: 1199px) {
  .jo-footer-top .logo {
    width: 150px;
  }
}
.jo-footer-top__nwsltr {
  display: flex;
  background-color: var(--white);
  border-radius: 999px;
  padding: 5px;
}
@media screen and (max-width: 479px) {
  .jo-footer-top__nwsltr {
    flex-direction: column;
    border-radius: 20px;
    gap: 5px;
  }
}
.jo-footer-top__nwsltr input {
  background-color: transparent;
  width: 100%;
  height: 3.385vw;
  padding: 0 25px;
  font-size: 16px;
}
@media screen and (max-width: 1199px) {
  .jo-footer-top__nwsltr input {
    height: 45px;
  }
}
@media screen and (max-width: 479px) {
  .jo-footer-top__nwsltr input {
    padding: 0 15px;
  }
}
.jo-footer-top__nwsltr button {
  height: auto;
  border-radius: 999px;
  flex-shrink: 0;
  padding: 0 1.25vw;
}
@media screen and (max-width: 479px) {
  .jo-footer-top__nwsltr button {
    height: 45px;
  }
}
.jo-footer-top__nwsltr button::before {
  border-radius: 999px;
}
.jo-footer-top__socials a {
  position: relative;
  z-index: 1;
  border: 1px solid var(--white);
  color: var(--white);
}
.jo-footer-top__socials a:hover::before {
  opacity: 1;
}
.jo-footer-top__socials a::before {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: -1;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--tt-pink) 0%, var(--tt-gold) 100%);
  opacity: 0;
  transition: 0.4s ease;
}
.jo-footer-middle {
  padding: 3.125vw 0 2.083vw;
  color: var(--white);
}
@media screen and (max-width: 479px) {
  .jo-footer-middle {
    padding: 40px 0;
  }
}
.jo-footer-widget__title {
  font-weight: 700;
  font-size: clamp(17px, 1.042vw, 20px);
  margin-bottom: 20px;
}
.jo-footer-contact a {
  font-size: clamp(22px, 1.563vw, 30px);
  font-weight: 500;
  color: #b5b5b5;
}
@media screen and (max-width: 479px) {
  .jo-footer-contact a {
    font-size: 22px;
  }
}
.jo-footer-links .links {
  font-size: clamp(16px, 0.833vw, 16px);
  display: grid;
  gap: 8px 40px;
  grid-template-columns: repeat(2, max-content);
}
.jo-footer-links .links a {
  font-weight: 500;
  color: #b5b5b5;
}
.jo-footer-links .links a:hover {
  color: var(--ttRed);
}
.jo-footer-gallery .imgs {
  display: flex;
  gap: 15px;
}
.jo-footer-gallery .imgs img {
  border-radius: 10px;
  max-width: clamp(80px, 5.208vw, 100px);
}
.jo-footer .tt-footer-bottom {
  padding-bottom: 20px;
  border-top-color: rgba(255, 255, 255, 0.2);
  font-size: clamp(16px, 0.833vw, 16px);
  justify-content: center;
}
.jo-footer-middle {
  text-align: center;
}
.jo-inner-social-links {
  padding: 100px 0;
}
@media screen and (max-width: 1399px) {
  .jo-inner-social-links {
    padding: 70px 0;
  }
}
@media screen and (max-width: 767px) {
  .jo-inner-social-links {
    padding: 50px 0;
  }
}

.jo-inner-videos {
  background-color: #fff1f1;
}

.jo-inner-about {
  padding: 5.208vw 0 4.323vw;
}
@media screen and (max-width: 991px) {
  .jo-inner-about {
    padding: 50px 0 47px;
  }
}
.jo-inner-about .top-wrapper {
  border-radius: 20px;
  border: 1px solid rgba(0, 0, 0, 0.15);
}
.jo-inner-about-left {
  background: url(../img/inner-about-left-bg.png) var(--black) no-repeat center
    center;
  background-size: cover;
  height: 100%;
  border-radius: 20px;
  padding: 2.083vw 5.729vw;
  width: max-content;
  max-width: 100%;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
@media screen and (max-width: 1199px) {
  .jo-inner-about-left {
    padding: 25px 50px;
  }
}
@media screen and (max-width: 991px) {
  .jo-inner-about-left {
    width: 100%;
  }
}
@media screen and (max-width: 479px) {
  .jo-inner-about-left {
    padding: 25px 35px;
  }
}
.jo-inner-about-left .title {
  color: var(--white);
  font-weight: 600;
  font-size: clamp(21px, 1.25vw, 24px);
  margin-bottom: clamp(18px, 1.198vw, 22px);
}
.jo-inner-about-left .jo-btn {
  border-radius: 999px;
}
.jo-inner-about-left .jo-btn::before {
  border-radius: 999px;
}
.jo-inner-about-left .sub-title {
  font-size: 16px;
  font-weight: 500;
  color: var(--ttGray2);
  margin-top: clamp(20px, 1.563vw, 30px);
  margin-bottom: 0;
}
.jo-inner-about-left .img {
  position: relative;
  border-radius: 999px;
  width: max-content;
  max-width: 100%;
  margin: 0 auto;
  margin-bottom: clamp(20px, 2.083vw, 40px);
}
.jo-inner-about-left .img img {
  border: 0.9vw solid var(--white);
  border-radius: 999px;
  max-width: 15.937vw;
  aspect-ratio: 1/1;
}
@media screen and (max-width: 1599px) {
  .jo-inner-about-left .img img {
    max-width: 17.937vw;
  }
}
@media screen and (max-width: 1199px) {
  .jo-inner-about-left .img img {
    max-width: 20.937vw;
  }
}
@media screen and (max-width: 991px) {
  .jo-inner-about-left .img img {
    max-width: 100%;
  }
}
.jo-inner-about-left .img .follower-tag {
  position: absolute;
  top: 42px;
  left: -33px;
  background-color: #18e76e;
  border-radius: 999px;
  color: var(--white);
  padding: 4px 10px;
  font-weight: 400;
  font-size: clamp(16px, 0.781vw, 15px);
}
.jo-inner-about-txt {
  padding: 1.563vw;
  padding-left: 0;
}
@media screen and (max-width: 991px) {
  .jo-inner-about-txt {
    padding: 25px;
  }
}
@media screen and (max-width: 575px) {
  .jo-inner-about-txt {
    padding: 15px;
  }
}
.jo-inner-about .jo-section-title {
  margin-bottom: 1.198vw;
}
.jo-inner-about-second-title {
  font-size: clamp(26px, 2.083vw, 40px);
  font-weight: 500;
  font-style: italic;
  line-height: 1.5;
  margin-bottom: 0;
  margin-top: 4.167vw;
}
@media screen and (max-width: 767px) {
  .jo-inner-about-second-title {
    font-size: 22px;
  }
}
@media screen and (max-width: 479px) {
  .jo-inner-about-second-title {
    font-size: 20px;
  }
}
.jo-inner-about-second-title .txt-gold {
  color: var(--tt-gold);
}
.jo-inner-about-second-title .txt-pink {
  color: var(--tt-pink);
}

.jo-inner-services {
  padding: 5.208vw 0;
}
@media screen and (max-width: 991px) {
  .jo-inner-services {
    padding: 50px 0;
  }
}

.jo-inner-service {
  background-color: #c2fec0;
  border: none;
  border-radius: 20px;
  padding: clamp(15px, 1.563vw, 30px);
}
.jo-inner-service .jo-article__img {
  border-radius: 15px;
}
.jo-inner-service .jo-article__img img {
  aspect-ratio: 390/261;
}
.jo-inner-service .jo-article__info {
  gap: 10px;
}
.jo-inner-service .jo-article__info i {
  font-size: clamp(17px, 1.042vw, 20px);
}
.jo-inner-service .jo-article__title {
  font-size: clamp(17px, 1.042vw, 20px);
  font-weight: 700;
  margin-bottom: 10px;
}
.jo-inner-service-descr {
  color: var(--ttGray2);
  font-size: clamp(18px, 1.146vw, 22px);
}
.jo-inner-service .jo-btn {
  gap: 6px;
  color: var(--tt-pink);
}
.jo-inner-service .jo-btn::after {
  content: "";
  position: absolute;
  z-index: -1;
  background-color: #fff1f1;
  position: absolute;
  inset: 1px;
  border-radius: 4px;
  transition: 0.4s ease;
}
.jo-inner-service .jo-btn:hover {
  color: var(--white);
}
.jo-inner-service .jo-btn:hover::after {
  opacity: 0;
}
.jo-inner-service .jo-btn .icon {
  font-size: 10px;
  padding-top: 4px;
}

.jo-inner-features {
  background: url(../img/features-bg.jpg) no-repeat center center;
  background-size: cover;
  padding: 5.208vw 0;
}
@media screen and (max-width: 991px) {
  .jo-inner-features {
    padding: 50px 0;
  }
}

.jo-inner-feature {
  text-align: center;
}
.jo-inner-feature .icon {
  width: 6.25vw;
  max-width: 100%;
  padding-top: 0.625vw;
  aspect-ratio: 1/1;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  margin: auto;
  margin-bottom: 1.563vw;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(45px, 3.125vw, 60px);
  background: linear-gradient(180deg, var(--ttRed), var(--tt-gold));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
@media screen and (max-width: 991px) {
  .jo-inner-feature .icon {
    width: 65px;
  }
}
@media screen and (max-width: 767px) {
  .jo-inner-feature .icon {
    padding-top: 7px;
  }
}
.jo-inner-feature .title {
  font-weight: 700;
  font-size: clamp(17px, 1.042vw, 20px);
  color: var(--white);
}

.jo-inner-main-content {
    padding: 5.208vw 0;
    position: relative;
}
@media screen and (max-width: 991px) {
  .jo-inner-main-content {
    padding: 50px 0;
  }
}

.jo-service-details-sidebar {
  background-color: #fff1f1;
  border-radius: 20px;
  padding: 1.719vw;
}
@media screen and (max-width: 991px) {
  .jo-service-details-sidebar {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
  }
  .jo-service-details-sidebar > * {
    width: calc((100% - 15px) / 2);
  }
}
@media screen and (max-width: 991px) and (max-width: 479px) {
  .jo-service-details-sidebar > * {
    width: calc((100% - 15px) / 1);
  }
}
@media screen and (max-width: 479px) {
  .jo-service-details-sidebar {
    justify-content: center;
    padding: 25px 14px;
  }
}
.jo-service-details-sidebar .service-list li:not(:last-child) {
  margin-bottom: clamp(12px, 1.042vw, 20px);
}
.jo-service-details-sidebar .service-list a {
  padding: clamp(7.5px, 0.66vw, 12.5px) clamp(12px, 1.042vw, 20px);
  border-radius: 10px;
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(90deg, var(--ttRed), var(--tt-gold));
  font-weight: 500;
  font-size: 20px;
  color: var(--black);
}
@media screen and (max-width: 1599px) {
  .jo-service-details-sidebar .service-list a {
    font-size: 18px;
  }
}
@media screen and (max-width: 575px) {
  .jo-service-details-sidebar .service-list a {
    font-size: 16px;
  }
}
.jo-service-details-sidebar .service-list a::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 1px;
  background-color: #fff1f1;
  border-radius: 8.5px;
  transition: 0.4s ease;
}
.jo-service-details-sidebar .service-list a:hover,
.jo-service-details-sidebar .service-list a.current {
  color: var(--white);
}
.jo-service-details-sidebar .service-list a:hover::before,
.jo-service-details-sidebar .service-list a.current::before {
  opacity: 0;
}
.jo-service-details__cta {
  margin-top: 1.563vw;
  position: relative;
  z-index: 1;
}
@media screen and (max-width: 991px) {
  .jo-service-details__cta {
    margin-top: 0;
  }
}
.jo-service-details__cta .img {
  position: relative;
  z-index: 1;
  border-radius: 20px;
  overflow: hidden;
}
.jo-service-details__cta .img::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.7);
}
.jo-service-details__cta .txt {
  position: absolute;
  bottom: clamp(25px, 2.604vw, 50px);
  z-index: 2;
  color: var(--white);
  text-align: center;
  width: 100%;
}
.jo-service-details__cta .txt .icon {
  font-size: clamp(25px, 2.604vw, 50px);
  line-height: 1;
  margin-bottom: 6px;
}
.jo-service-details__cta .txt .title {
  font-weight: 600;
  font-size: clamp(14px, 0.938vw, 18px);
  display: block;
  margin-bottom: 0.781vw;
}
.jo-service-details__cta .txt a {
  font-weight: 700;
  font-size: clamp(18px, 1.25vw, 24px);
  color: var(--white);
}
.jo-service-details__cta .txt a:hover {
  color: var(--tt-pink);
}
.jo-service-details-cover-img {
  margin-bottom: 1.563vw;
}
@media screen and (max-width: 1199px) {
  .jo-service-details-cover-img {
    margin-bottom: 18px;
  }
}
.jo-service-details-cover-img img {
  border-radius: 20px;
  aspect-ratio: 930/433;
  max-width: 100%;
  object-fit: cover;
}
.jo-service-details__tag {
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 0.677vw;
  display: flex;
  align-items: center;
  gap: 5px;
}
@media screen and (max-width: 1199px) {
  .jo-service-details__tag {
    margin-bottom: 12px;
  }
}
.jo-service-details__tag .icon {
  font-size: 20px;
  line-height: 0.7;
  color: var(--ttRed);
}
.jo-service-details__title {
  font-weight: 700;
  font-size: clamp(24px, 1.25vw, 24px);
}
.jo-service-details__descr {
  font-size: 15px;
  color: var(--ttGray2);
}
.jo-service-details__inner-imgs {
  display: flex;
  gap: 24px;
  margin: 1.823vw 0;
}
@media screen and (max-width: 767px) {
  .jo-service-details__inner-imgs {
    gap: 15px;
  }
}
@media screen and (max-width: 479px) {
  .jo-service-details__inner-imgs {
    flex-direction: column;
  }
}
.jo-service-details__inner-imgs img {
  width: 100%;
  border-radius: 20px;
}
.jo-service-details-related-services {
  background-color: #fff1f1;
}
.jo-service-details-related-services .heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: clamp(20px, 2.083vw, 40px);
}
.jo-service-details-related-services .heading .jo-section-title {
  margin-bottom: 0;
}

.jo-related-services-slider .jo-inner-service {
  background-color: var(--white);
}
.jo-related-services-slider-nav {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 18px;
}
.jo-related-services-slider-nav button:hover {
  color: var(--ttRed);
}

.jo-videos-toggle-switch {
  position: relative;
  display: inline-block;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  margin-bottom: 2.604vw;
}
@media screen and (max-width: 991px) {
  .jo-videos-toggle-switch {
    margin-bottom: 20px;
  }
}
@media screen and (max-width: 479px) {
  .jo-videos-toggle-switch {
    gap: 8px;
  }
}
.jo-videos-toggle-switch .toggle-label {
  font-weight: 500;
  font-size: 16px;
  display: flex;
  align-items: center;
  gap: 5px;
  transition: 0.4s ease;
}
@media screen and (max-width: 479px) {
  .jo-videos-toggle-switch .toggle-label {
    font-size: 14px;
  }
}
.jo-videos-toggle-switch .toggle-label.premium {
  color: rgba(0, 0, 0, 0.3);
}
@media screen and (max-width: 479px) {
  .jo-videos-toggle-switch .toggle-label i {
    display: none;
  }
}
.jo-videos-toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}
.jo-videos-toggle-switch input:checked ~ .slider {
  background-color: var(--black);
}
.jo-videos-toggle-switch input:checked ~ .slider:before {
  -webkit-transform: translateX(100%);
  -ms-transform: translateX(100%);
  transform: translateX(100%);
}
.jo-videos-toggle-switch input:checked ~ .toggle-label.premium {
  color: var(--black);
}
.jo-videos-toggle-switch input:checked ~ .toggle-label.free {
  color: rgba(0, 0, 0, 0.3);
}
.jo-videos-toggle-switch .slider {
  cursor: pointer;
  position: relative;
  width: 36px;
  display: block;
  height: 20px;
  background-color: var(--black);
  -webkit-transition: 0.4s;
  transition: 0.4s;
  border-radius: 999px;
}
.jo-videos-toggle-switch .slider::before {
  position: absolute;
  content: "";
  aspect-ratio: 1/1;
  left: 2px;
  bottom: 2px;
  top: 2px;
  background-color: var(--white);
  -webkit-transition: 0.4s;
  transition: 0.4s;
  border-radius: 50%;
}

.jo-inner-videos-filter-nav {
  margin-bottom: 3.333vw;
  gap: 10px;
}
@media screen and (max-width: 991px) {
  .jo-inner-videos-filter-nav {
    margin-bottom: 25px;
  }
}
.jo-inner-videos-filter-nav button {
  background: linear-gradient(90deg, var(--ttRed), var(--tt-gold));
  border-radius: 6px;
  height: 2.188vw;
  padding: 0 20px;
  color: var(--ttRed);
  position: relative;
  z-index: 1;
}
@media screen and (max-width: 1599px) {
  .jo-inner-videos-filter-nav button {
    height: 38px;
  }
}
@media screen and (max-width: 479px) {
  .jo-inner-videos-filter-nav button {
    padding: 0 10px;
    height: 35px;
    font-size: 14px;
  }
}
.jo-inner-videos-filter-nav button::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 1px;
  background-color: var(--white);
  border-radius: 4.5px;
  transition: 0.4s ease;
}
.jo-inner-videos-filter-nav button:hover{
  color: #09a904 !important;
}
.jo-inner-videos-filter-nav button:hover::before,
.jo-inner-videos-filter-nav button.active::before {
  opacity: 0;
}

.jo-inner-videos-row {
  --bs-gutter-y: 1.563vw;
  --bs-gutter-x: 1.563vw;
}

.jo-inner-video-card {
  max-width: none;
  min-width: 0;
}
.jo-inner-video-card::before {
  background: linear-gradient(0deg, rgb(0, 0, 0), transparent);
  opacity: 1;
}
.jo-inner-video-card .jo-video-card__txt {
  top: auto;
}
.jo-inner-video-card .bottom {
  transform: translate(0);
}
@media screen and (max-width: 479px) {
  .jo-inner-video-card .jo-video-card__btn {
    width: 40px;
  }
}
.jo-inner-video-card .jo-video-card__title {
  margin-top: 1.302vw;
  margin-bottom: 1.042vw;
  font-size: clamp(18px, 1.25vw, 24px);
}
.jo-inner-video-card .jo-video-card__img {
  aspect-ratio: 690/617;
  object-fit: cover;
}
@media screen and (max-width: 575px) {
  .jo-inner-video-card .jo-video-card__img {
    aspect-ratio: 1410/617;
  }
}
@media screen and (max-width: 479px) {
  .jo-inner-video-card .jo-video-card__img {
    aspect-ratio: 1410/967;
  }
}
.jo-inner-video-card--big .jo-video-card__img {
  aspect-ratio: 1410/617;
}
@media screen and (max-width: 479px) {
  .jo-inner-video-card--big .jo-video-card__img {
    aspect-ratio: 1410/967;
  }
}

.jo-inner-video-card-2 {
  border-radius: 0;
  max-width: none;
}
.jo-inner-video-card-2::before {
  content: none;
}
.jo-inner-video-card-2 .jo-video-card__img {
  aspect-ratio: 330/430;
  border-radius: 20px;
}
.jo-inner-video-card-2 .jo-video-card__txt {
  position: static;
  color: var(--black);
}
.jo-inner-video-card-2 .jo-video-card__btn {
  color: var(--ttRed);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  background-color: var(--white);
}
.jo-inner-video-card-2 .jo-video-card__btn:hover {
  background-color: var(--ttRed);
  color: var(--white);
}
.jo-inner-video-card-2 .jo-video-card__title {
  color: var(--black);
  font-size: clamp(17px, 1.042vw, 20px);
  font-weight: 500;
  margin-top: 0.99vw;
  margin-bottom: 0.573vw;
}
.jo-inner-video-card-2 .jo-video-card__title:hover {
  color: var(--ttRed);
}
.jo-inner-video-card-2 .jo-video-card__infos {
  color: var(--black);
}
.jo-inner-video-card-2--big {
  margin: 0.521vw 0;
}
.jo-inner-video-card-2--big .jo-video-card__img {
  aspect-ratio: 1410/561;
  object-fit: cover;
}
@media screen and (max-width: 479px) {
  .jo-inner-video-card-2--big .jo-video-card__img {
    aspect-ratio: 1/1;
  }
}
.jo-inner-video-card-2--big .jo-video-card__btn {
  width: clamp(50px, 4.792vw, 92px);
  font-size: clamp(16px, 1.25vw, 22px);
}

.jo-inner-videos-slider .swiper-slide {
  max-width: 35.938vw;
  min-width: 276px;
}
@media screen and (max-width: 575px) {
  .jo-inner-videos-slider .jo-inner-video-card .jo-video-card__img {
    aspect-ratio: 690/617;
  }
}
.jo-inner-videos-slider-nav button {
  width: 45px;
  aspect-ratio: 1/1;
  background-color: rgba(9, 171, 4, 0.5);
  border-radius: 999px;
  color: var(--ttRed);
  padding-top: 6.5px;
}
.jo-inner-videos-slider-nav button:hover {
  background-color: var(--ttRed);
  color: var(--white);
}

.jo-inner-page-container {
  margin: 0 19.71vw;
}
@media screen and (max-width: 1599px) {
  .jo-inner-page-container {
    margin: 0 15.71vw;
  }
}
@media screen and (max-width: 1399px) {
  .jo-inner-page-container {
    margin: 0 12.71vw;
  }
}
@media screen and (max-width: 1199px) {
  .jo-inner-page-container {
    margin: 0 9.71vw;
  }
}
@media screen and (max-width: 991px) {
  .jo-inner-page-container {
    margin: 0 15px;
  }
}

.jo-video-details-wrapper {
  padding: 5.25vw 0;
}

.jo-video-details-cover {
  overflow: hidden;
  border-radius: 20px;
  position: relative;
  z-index: 2;
  margin-bottom: clamp(22px, 1.58vw, 30px);
}
.jo-video-details-cover::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 35%, #000000 100%);
  z-index: 1;
}
.jo-video-details-cover img {
  width: 100%;
  aspect-ratio: 1170/570;
}
.jo-video-details-cover .video-btn {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: var(--white);
  font-weight: 500;
  text-align: center;
}
.jo-video-details-cover .video-btn a {
  border: 1px solid rgba(255, 255, 255, 0.2);
  width: clamp(60px, 5.25vw, 100px);
  aspect-ratio: 1/1;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(20px, 1.42vw, 27px);
  color: var(--white);
  margin: auto;
  margin-bottom: 15px;
}
.jo-video-details-cover .video-btn a:hover {
  background-color: var(--white);
  color: var(--tt-pink);
}
.jo-video-details-cover .video-btn a i {
  padding-top: 4px;
}
.jo-video-details-txt h2 {
  font-weight: 700;
  font-size: clamp(21px, 1.26vw, 24px);
  color: var(--black);
  margin-bottom: clamp(16px, 0.84vw, 16px);
  margin-top: 20px;
}
.jo-video-details-txt p {
  font-size: 15px;
  color: var(--ttGray2);
}
.jo-video-details-txt ul {
  font-size: clamp(16px, 0.79vw, 15px);
  color: var(--black);
  font-weight: 500;
  margin-bottom: clamp(30px, 2.84vw, 54px);
  margin-top: clamp(20px, 1.58vw, 30px);
}
.jo-video-details-txt ul li {
  position: relative;
  padding-left: 26px;
  margin-bottom: 15px;
}
.jo-video-details-txt ul li::before {
  content: "\f11f";
  font-family: flaticon_jio_-_influencer !important;
  font-style: normal;
  font-weight: normal !important;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  color: var(--ttRed);
  font-size: 14px;
}
.jo-video-details-txt ul li:last-child {
  margin-bottom: 0;
}
.jo-video-details-txt blockquote {
  background-color: rgba(9, 171, 4, 0.5);
  padding: clamp(20px, 1.58vw, 30px);
  border-radius: 20px;
  font-size: clamp(17px, 1.05vw, 20px);
  color: var(--ttGray2);
  font-style: italic;
  display: flex;
  align-items: center;
  gap: clamp(15px, 1.05vw, 20px);
}
@media screen and (max-width: 479px) {
  .jo-video-details-txt blockquote {
    flex-wrap: wrap;
  }
}
.jo-video-details-txt-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.jo-video-details-shares {
  display: flex;
  align-items: center;
  gap: 20px;
}
.jo-video-details-shares .share-options {
  display: flex;
  gap: 8px;
}
.jo-video-details-shares .share-options a {
  width: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1/1;
  border: 1px solid rgba(210, 210, 210, 0.88);
  color: var(--ttGray2);
  border-radius: 999px;
  font-size: 16px;
  padding-top: 3px;
}
.jo-video-details-shares .share-options a:hover {
  background-color: var(--ttRed);
  border-color: var(--ttRed);
  color: var(--white);
}
.jo-video-details-cta {
  background: linear-gradient(45deg, var(--ttRed), var(--tt-gold));
  color: var(--white);
  padding: clamp(30px, 2.63vw, 50px);
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  align-items: center;
  justify-content: space-between;
  border-radius: 20px;
  margin-top: clamp(50px, 5.25vw, 100px);
}
.jo-video-details-cta h3 {
  font-weight: 500;
  font-size: clamp(32px, 2.1vw, 40px);
}
.jo-video-details-cta .jo-btn {
  border: 1px solid var(--white);
}
.jo-video-details-cta .jo-btn i {
  font-size: 10px;
  padding-top: 1px;
  padding-right: 3px;
}

.jo-related-videos-slider-nav button:hover {
  color: var(--ttRed);
}

.jo-video-shop {
  padding: 5.25vw 0;
}
.jo-video-shop-sidebar {
  background-color: #fff1f1;
  padding: clamp(15px, 1.58vw, 30px);
  border-radius: 20px;
}
.jo-video-shop-sidebar-widget-title {
  font-size: clamp(15px, 0.95vw, 18px);
  font-weight: 600;
  color: var(--black);
  margin-bottom: clamp(16px, 0.84vw, 16px);
}
.jo-video-shop-sidebar > * {
  margin-bottom: clamp(20px, 2.1vw, 40px);
}
.jo-video-shop-sidebar > *:last-child {
  margin-bottom: 0;
}
.jo-video-shop-search-form {
  background-color: var(--white);
  height: 60px;
  border-radius: 10px;
  display: flex;
  align-items: center;
}
.jo-video-shop-search-form input {
  background-color: transparent;
  height: 100%;
  padding: 15px;
  width: 100%;
}
.jo-video-shop-search-form button {
  flex-shrink: 0;
  color: var(--ttRed);
  font-size: 20px;
  padding-right: 15px;
  padding-top: 6px;
  padding-left: 0;
}
.jo-video-shop-price-filter-form {
  background-color: var(--white);
  border-radius: 10px;
  padding: 15px;
}
.jo-video-shop-price-filter-form .noUi-base {
  margin-bottom: 8px;
}
.jo-video-shop-price-filter-form .noUi-horizontal {
  height: 7px;
  border: 1px solid var(--ttRed);
}
.jo-video-shop-price-filter-form .noUi-handle {
  width: 18px;
  height: 18px;
  box-shadow: none;
  border: 5px solid var(--ttRed);
  border-radius: 50%;
  top: -7px;
}
.jo-video-shop-price-filter-form .noUi-handle::before,
.jo-video-shop-price-filter-form .noUi-handle::after {
  content: none;
}
.jo-video-shop-price-filter-form .noUi-connect {
  background-color: var(--ttRed);
}
.jo-video-shop-price-filter-form .noUi-touch-area::before,
.jo-video-shop-price-filter-form .noUi-touch-area::after {
  content: none;
}
.jo-video-shop-price-filter-form .filtered-price {
  font-weight: 500;
  font-size: 12px;
  color: var(--black);
  display: block;
  margin-top: 10px;
}
.jo-video-shop-categories-link {
  background-color: var(--white);
  border-radius: 10px;
  padding: 25px 15px;
}
.jo-video-shop-categories-link a {
  display: flex;
  justify-content: space-between;
  color: var(--black);
  margin-bottom: 15px;
}
.jo-video-shop-categories-link a:hover {
  color: var(--ttRed);
}
.jo-video-shop-categories-link a:last-child {
  margin-bottom: 0;
}
.jo-video-shop-video-status-form {
  background-color: var(--white);
  border-radius: 10px;
  padding: 15px;
}
.jo-video-shop-video-status-form > *:not(:last-child) {
  margin-bottom: 10px;
}
.jo-video-shop-video-status-form label {
  position: relative;
  display: inline-block;
}
.jo-video-shop-video-status-form span {
  padding-left: 30px;
  display: inline-block;
}
.jo-video-shop-video-status-form span::before,
.jo-video-shop-video-status-form span::after {
  content: "";
  position: absolute;
  width: 20px;
  aspect-ratio: 1/1;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 50%;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}
.jo-video-shop-video-status-form span::after {
  width: 8px;
  aspect-ratio: 1/1;
  background-color: var(--ttRed);
  border: none;
  left: 6px;
  opacity: 0;
}
.jo-video-shop-video-status-form input[type="radio"]:checked + span::after {
  opacity: 1;
}
.jo-video-shop-row {
  --bs-gutter-x: 30px;
  --bs-gutter-y: 30px;
}
@media screen and (max-width: 1599px) {
  .jo-video-shop-row {
    --bs-gutter-x: 20px;
    --bs-gutter-y: 20px;
  }
}

.jo-video-shop-item .premium-badge {
  position: absolute;
  top: clamp(20px, 1.58vw, 30px);
  left: clamp(20px, 1.58vw, 30px);
  width: clamp(40px, 2.63vw, 50px);
  aspect-ratio: 1/1;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--white);
  color: var(--ttRed);
  border-radius: 50%;
  padding-top: 5px;
}
.jo-video-shop-item .jo-video-card__btn {
  transform: translate(0);
  bottom: clamp(20px, 1.58vw, 30px);
  left: clamp(20px, 1.58vw, 30px);
  top: auto;
  width: clamp(40px, 2.63vw, 50px);
}
.jo-video-shop-item .jo-video-card__infos {
  color: var(--ttRed);
  font-weight: 500;
}
.jo-video-shop-item .jo-video-card__title:hover {
  color: var(--ttRed);
}

.jo-video-shop-details {
  padding-top: clamp(60px, 5.25vw, 100px);
  padding-bottom: clamp(60px, 5.25vw, 100px);
}
.jo-video-shop-details-video-cover {
  border-radius: 20px;
  overflow: hidden;
  margin-bottom: clamp(17px, 1.21vw, 23px);
}
.jo-video-shop-details-video-cover .jo-video-card__btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: var(--white);
  color: var(--ttRed);
  width: clamp(50px, 3.68vw, 70px);
  font-size: clamp(15px, 0.95vw, 18px);
}
.jo-video-shop-details-video-cover .jo-video-card__btn:hover {
  color: var(--white);
  background-color: var(--ttRed);
}
.jo-video-shop-details-title {
  font-weight: 600;
  font-size: clamp(22px, 1.58vw, 30px);
  margin-bottom: clamp(16px, 0.84vw, 16px);
}
.jo-video-shop-details-descr {
  color: var(--ttGray2);
  font-size: clamp(16px, 0.79vw, 15px);
}
.jo-video-shop-details-sidebar > * {
  margin-bottom: 0;
}
.jo-video-shop-details-sidebar-title {
  font-weight: 600;
  font-size: clamp(15px, 0.95vw, 18px);
}
.jo-video-shop-details-video-info {
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
  padding: clamp(15px, 1.58vw, 30px);
}
@media screen and (max-width: 1799px) {
  .jo-video-shop-details-video-info {
    padding: clamp(15px, 1.28vw, 30px);
  }
}
.jo-video-shop-details-video-info:last-child {
  border: none;
}
.jo-video-shop-details-video-info p {
  font-size: 14px;
}
.jo-video-shop-details-video-info .jo-btn {
  width: 100%;
  margin-top: clamp(10px, 1vw, 19px);
}
@media screen and (max-width: 1799px) {
  .jo-video-shop-details-video-info .jo-btn {
    padding: 0 15px;
  }
}
.jo-video-shop-details-video-info .jo-btn i {
  font-size: 10px;
}

.jo-login {
  padding: 12.4vw 0 10.19vw 38.62vw;
  background: url(../img/login-bg.jpg) no-repeat center center;
  background-size: cover;
}
@media screen and (max-width: 767px) {
  .jo-login {
    padding: 12.4vw 0 10.19vw 28.62vw;
  }
}
@media screen and (max-width: 479px) {
  .jo-login {
    padding: 12.4vw 15px 10.19vw 15px;
  }
}

.jo-auth-form-wrapper {
  background-color: var(--white);
  width: max-content;
  max-width: 100%;
  border-radius: 20px;
  overflow: hidden;
  max-width: clamp(310px, 30.11vw, 573px);
}
@media screen and (max-width: 767px) {
  .jo-auth-form-wrapper {
    max-width: clamp(290px, 60.11vw, 573px);
  }
}
@media screen and (max-width: 479px) {
  .jo-auth-form-wrapper {
    max-width: clamp(290px, 100%, 100%);
    width: 100%;
  }
}
.jo-auth-form-wrapper .heading {
  background-color: var(--ttRed);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(25px, 2.1vw, 40px);
  color: var(--white);
}
.jo-auth-form-wrapper .heading .logo {
  max-width: 40%;
}
.jo-auth-form-wrapper .heading h3 {
  margin-bottom: 0;
  font-weight: 600;
  font-size: clamp(18px, 1.58vw, 30px);
}
.jo-auth-form-wrapper .bottom {
  padding: clamp(25px, 2.1vw, 40px);
}
.jo-auth-form-wrapper form input {
  width: 100%;
  border: 1px solid rgba(0, 0, 0, 0.22);
  height: clamp(45px, 4.2vw, 80px);
  padding: clamp(15px, 1.58vw, 30px);
  border-radius: 10px;
  margin-bottom: clamp(15px, 1.05vw, 20px);
}
.jo-auth-form-wrapper form .forget-password-btn {
  color: var(--ttGray2);
  font-size: clamp(16px, 0.84vw, 16px);
  padding-top: clamp(7px, 0.53vw, 10px);
  padding-bottom: clamp(15px, 1.16vw, 22px);
}
.jo-auth-form-wrapper form .forget-password-btn:hover {
  color: var(--ttRed);
}
.jo-auth-form-wrapper form .jo-btn {
  width: 100%;
  height: clamp(45px, 2.73vw, 52px);
}
.jo-auth-form-wrapper p {
  text-align: center;
  margin-top: clamp(20px, 1.58vw, 30px);
  font-size: clamp(16px, 0.84vw, 16px);
}
.jo-auth-form-wrapper p a {
  color: var(--ttRed);
}
.jo-auth-form-wrapper p a:hover {
  color: var(--black);
}

.jo-register {
  padding-top: clamp(50px, 5.25vw, 100px);
  padding-bottom: clamp(50px, 5.25vw, 100px);
}

.jo-checkout-wrapper {
  margin: 5.25vw 26.01vw;
}
@media screen and (max-width: 1199px) {
  .jo-checkout-wrapper {
    margin: 5.25vw 20.01vw;
  }
}
@media screen and (max-width: 991px) {
  .jo-checkout-wrapper {
    margin: 60px 15px;
  }
}

.jo-checkout-form {
  background-color: rgba(255, 0, 0, 0.06);
  border-radius: 20px;
}
.jo-checkout-form .form-block {
  padding: clamp(20px, 2.1vw, 40px);
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}


.jo-checkout-form .form-block:last-child {
  border-bottom: 0;
}
.jo-checkout-form .form-block .block-title {
  font-weight: 600;
  font-size: clamp(22px, 1.58vw, 30px);
  margin-bottom: clamp(18px, 1.21vw, 23px);
}
.jo-checkout-form .form-block p {
  font-size: clamp(16px, 0.84vw, 16px);
}
.jo-checkout-form .form-block p a {
  color: var(--ttRed);
}
.jo-checkout-form input {
  width: 100%;
  height: clamp(50px, 4.2vw, 80px);
  padding: clamp(15px, 1.58vw, 30px);
  border-radius: 10px;
  margin-bottom: clamp(15px, 1.05vw, 20px);
}

.jo-checkout-payment-methods label {
  display: flex;
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
  padding-bottom: clamp(8px, 0.79vw, 15px);
  margin-bottom: clamp(8px, 0.79vw, 15px);
  font-weight: 600;
}
.jo-checkout-payment-methods label > span::before,
.jo-checkout-payment-methods label > span::after {
  top: 16px;
}
.jo-checkout-payment-methods label .content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.jo-checkout-note {
  width: 100%;
  background-color: var(--white);
  border-radius: 10px;
  padding: clamp(15px, 1.58vw, 30px);
  border: 1px solid transparent;
  height: 212px;
  margin-top: clamp(25px, 2.1vw, 40px);
  vertical-align: top;
  margin-bottom: clamp(30px, 2.36vw, 43px);
}
.jo-checkout-note:focus,
.jo-checkout-note:focus-visible,
.jo-checkout-note:focus-within {
  outline: none;
  border-color: var(--ttRed);
}

.jo-checkout-agreement-wrapper {
  margin-bottom: clamp(20px, 2.1vw, 40px);
}
.jo-checkout-agreement-wrapper label {
  padding-left: 30px;
  position: relative;
  display: inline-block;
}
.jo-checkout-agreement-wrapper label .txt::before,
.jo-checkout-agreement-wrapper label .txt::after {
  content: "";
  position: absolute;
  width: 20px;
  aspect-ratio: 1/1;
  border-radius: 50%;
  border: 1px solid var(--ttGray2);
  top: 4px;
  left: 0;
}
.jo-checkout-agreement-wrapper label .txt::after {
  width: 10px;
  top: 9px;
  left: 5px;
  border: none;
  background-color: rgb(9, 171, 4);
  opacity: 0;
}
.jo-checkout-agreement-wrapper label input:checked ~ .txt::after {
  opacity: 1;
}

.jo-checkout-total {
  margin-bottom: clamp(10px, 0.95vw, 18px);
}
.jo-checkout-total h4 {
  font-weight: 600;
  font-size: clamp(20px, 1.58vw, 30px);
  margin-bottom: 0.53vw;
}
.jo-checkout-total .number {
  font-weight: 600;
  font-size: clamp(24px, 2.1vw, 40px);
}

.jo-inner-blogs {
  padding: clamp(60px, 5.25vw, 100px) 0;
}
.jo-inner-blogs-sidebar > * {
  margin-bottom: clamp(15px, 1.26vw, 24px);
}
.jo-inner-blogs-sidebar-widget {
  padding: clamp(25px, 2.1vw, 40px) clamp(15px, 1.58vw, 30px);
  background-color: rgba(9, 171, 4, 0.5);
  border-radius: 10px;
}
.jo-inner-blogs-sidebar-widget-title {
  font-weight: 700;
  font-size: clamp(18px, 1.16vw, 22px);
  color: var(--black);
  position: relative;
  padding-bottom: clamp(4px, 0.47vw, 9px);
  margin-bottom: clamp(15px, 1.58vw, 30px);
}
.jo-inner-blogs-sidebar-widget-title::before {
  content: "";
  position: absolute;
  bottom: 0;
  height: 2px;
  width: clamp(35px, 2.63vw, 50px);
  background-color: var(--ttRed);
}
.jo-inner-blogs-search-form {
  background-color: var(--white);
  height: clamp(45px, 3.15vw, 60px);
  border-radius: 10px;
  padding: 0 clamp(12px, 1.05vw, 20px);
  display: flex;
  align-items: center;
}
.jo-inner-blogs-search-form input {
  width: 100%;
  background-color: transparent;
}
.jo-inner-blogs-search-form button {
  color: var(--ttRed);
  padding: 0;
  padding-top: 3px;
  font-size: 20px;
}
.jo-inner-blogs-categories a {
  background-color: var(--white);
  border-radius: 10px;
  height: clamp(46px, 2.94vw, 56px);
  padding: 0 clamp(15px, 1.05vw, 20px);
  background-color: var(--white);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: clamp(16px, 0.84vw, 16px);
  color: var(--black);
  margin-bottom: clamp(9px, 0.63vw, 12px);
}
.jo-inner-blogs-categories a:hover {
  background-color: var(--ttRed);
  color: var(--white);
}
.jo-inner-blogs-sidebar-post {
  display: flex;
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
  align-items: center;
  gap: clamp(12px, 0.79vw, 15px);
  padding: clamp(12px, 1.05vw, 20px) 0;
}
.jo-inner-blogs-sidebar-post:first-child {
  padding-top: 0;
}
.jo-inner-blogs-sidebar-post:last-child {
  padding-bottom: 0;
  border-bottom: none;
}
.jo-inner-blogs-sidebar-post .img {
  flex-shrink: 0;
  overflow: hidden;
  border-radius: 10px;
}
.jo-inner-blogs-sidebar-post .img img {
  width: 78px;
  aspect-ratio: 1/1;
  object-fit: cover;
}
.jo-inner-blogs-sidebar-post .date {
  font-size: clamp(12px, 0.74vw, 14px);
  color: var(--ttRed);
  display: flex;
  align-items: center;
  gap: 8px;
}
.jo-inner-blogs-sidebar-post .date .icon {
  padding-top: 4px;
  font-size: 16px;
}
.jo-inner-blogs-sidebar-post .title {
  font-size: clamp(16px, 0.84vw, 16px);
  line-height: 1.6;
  margin-bottom: 0;
}
.jo-inner-blogs-sidebar-post .title a {
  font-weight: 600;
  color: var(--black);
}

.jo-inner-blogs-sidebar-post .title a:hover {
  color: var(--ttRed);
}
.jo-inner-blogs-tags {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(3px, 0.63vw, 6px);
}
.jo-inner-blogs-tags a {
  height: clamp(28px, 1.79vw, 34px);
  padding: 0 clamp(9px, 0.63vw, 12px);
  background-color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 5px;
  color: var(--black);
  font-size: clamp(16px, 0.84vw, 16px);
}
.jo-inner-blogs-tags a:hover {
  background-color: var(--ttRed);
  color: var(--white);
}

.jo-inner-blog {
  border: 1px solid rgba(0, 0, 0, 0.2);
  padding: clamp(15px, 1.58vw, 30px);
  margin-bottom: clamp(18px, 1.26vw, 24px);
  border-radius: 20px;
}
.jo-inner-blog-img {
  margin-bottom: clamp(18px, 1.26vw, 24px);
  border-radius: 20px;
  overflow: hidden;
}
.jo-inner-blog-img img {
  width: 100%;
  aspect-ratio: 869/470;
  object-fit: cover;
}
.jo-inner-blog-infos {
  display: flex;
  flex-wrap: wrap;
  gap: 4px clamp(15px, 1.58vw, 30px);
  font-size: 14px;
  margin-bottom: clamp(11px, 0.74vw, 14px);
}
.jo-inner-blog-infos > *:not(:first-child) {
  position: relative;
  padding-left: clamp(22px, 1.94vw, 37px);
}
.jo-inner-blog-infos > *:not(:first-child)::before {
  content: "";
  position: absolute;
  width: 7px;
  aspect-ratio: 1/1;
  background-color: var(--ttRed);
  border-radius: 50%;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}

.jo-inner-blog-infos .author {
  color: var(--ttRed);
  font-weight: 500;
}
.jo-inner-blog-infos .author .name {
  color: var(--ttGray2);
  font-weight: 400;
}
.jo-inner-blog-infos .date {
  color: var(--black);
}
.jo-inner-blog-title {
  font-weight: 700;
  font-size: clamp(20px, 1.26vw, 24px);
  margin-bottom: clamp(10px, 0.79vw, 15px);
}
.jo-inner-blog-title a {
  color: var(--black);
}
.jo-inner-blog-title a:hover {
  color: var(--ttRed);
}
.jo-inner-blog-descr {
  color: var(--ttGray2);
  font-size: clamp(16px, 0.84vw, 16px);
  margin-bottom: clamp(18px, 1.37vw, 26px);
}
.jo-inner-blog-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}
.jo-inner-blog-actions > * {
  height: clamp(36px, 2.21vw, 42px);
  border-radius: 10px;
}
.jo-inner-blog-actions a {
  aspect-ratio: 1/1;
  background-color: rgba(9, 171, 4, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ttRed);
  font-size: clamp(17px, 1.05vw, 20px);
}
.jo-inner-blog-actions a:hover {
  background-color: var(--ttRed);
  color: var(--white);
}
.jo-inner-blog-actions .share-btn {
  border: 1px solid rgba(9, 171, 4, 0.5);
  padding: 0 clamp(10px, 1.16vw, 22px);
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: clamp(16px, 0.84vw, 16px);
}
.jo-inner-blog-actions .share-btn:hover {
  background-color: var(--ttRed);
  color: var(--white);
}
.jo-inner-blog-actions .share-btn:hover i {
  color: var(--white);
}
.jo-inner-blog-actions .share-btn i {
  color: var(--ttRed);
  padding-top: 2px;
  transition: 0.4s ease;
}

.jo-inner-pricing-plan {
  background-color: var(--white);
  box-shadow: 0px 4px 25px rgba(0, 0, 0, 0.06);
  padding: clamp(25px, 2.1vw, 40px);
  position: relative;
  overflow: hidden;
  z-index: 1;
  border-radius: 16px;
  background: url(../img/pricing-plan-bg.svg) rgba(0, 0, 0, 0.02) no-repeat;
  background-position-x: 0;
  background-position-y: 0;
  background-size: cover;
}
.jo-inner-pricing-plan::before {
  content: "";
  position: absolute;
  z-index: -1;
  background: url(../img/pricing-plan-vector.svg) no-repeat center center;
  background-size: 100% 100%;
  width: 317px;
  height: 268px;
  top: 60%;
  transform: translateY(-50%);
  right: 0;
  pointer-events: none;
}
.jo-inner-pricing-plan .plan-icon {
  width: clamp(60px, 3.68vw, 70px);
  aspect-ratio: 1/1;
  border-radius: 8px;
  box-shadow: 0px 4px 25px rgba(0, 0, 0, 0.06);
  position: absolute;
  top: 0;
  left: 0;
  padding: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--white);
}
.jo-inner-pricing-plan .plan-icon img {
  max-width: clamp(35px, 2.63vw, 50px);
}
.jo-inner-pricing-plan .heading {
  padding-left: clamp(45px, 3.68vw, 70px);
  padding-left: 80px;
  border-bottom: 1px solid #d4dcff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: clamp(25px, 2.1vw, 40px);
}
.jo-inner-pricing-plan .heading .title {
  font-weight: 700;
  font-size: clamp(20px, 1.26vw, 24px);
}
.jo-inner-pricing-plan .heading .sub-title {
  font-size: clamp(16px, 0.84vw, 16px);
  font-weight: 300;
}
.jo-inner-pricing-plan .heading .price {
  font-weight: 700;
  font-size: clamp(24px, 1.58vw, 30px);
}
.jo-inner-pricing-plan .plan-features {
  padding: clamp(25px, 2.1vw, 40px) 0 clamp(15px, 1.58vw, 30px);
}
.jo-inner-pricing-plan .plan-features li {
  position: relative;
  padding: 0 24px;
  font-weight: 600;
  margin-bottom: clamp(9px, 0.63vw, 12px);
}
.jo-inner-pricing-plan .plan-features li:last-child {
  margin-bottom: 0;
}
.jo-inner-pricing-plan .plan-features li::before,
.jo-inner-pricing-plan .plan-features li::after {
  content: "";
  position: absolute;
  top: 3px;
  width: 16px;
  aspect-ratio: 1/1;
}

.jo-inner-pricing-plan .plan-features li::before {
  left: 0;
  background: url(../img/checkmark.svg) no-repeat center center;
  background-size: cover;
}
.jo-inner-pricing-plan .plan-features li::after {
  right: 0;
  content: "\f121";
  font-family: flaticon_jio_-_influencer !important;
  font-style: normal;
  font-weight: normal !important;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #445375;
}
.jo-inner-pricing-plan-btn {
  height: clamp(45px, 2.94vw, 56px);
  background-color: var(--ttRed);
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  font-weight: 600;
  gap: 10px;
  font-size: clamp(16px, 0.84vw, 16px);
}
.jo-inner-pricing-plan-btn:hover {
  color: var(--white);
  background-color: var(--black);
}
.jo-inner-pricing-plan-btn i {
  font-size: 14px;
}

.jo-contact-info {
  border: 1px solid rgba(9, 171, 4, 0.5);
  padding: clamp(15px, 1.58vw, 30px);
  border-radius: 16px;
  text-align: center;
}
.jo-contact-info .icon {
  border: 1px solid rgba(9, 171, 4, 0.5);
  border-radius: 8px;
  width: clamp(55px, 3.68vw, 70px);
  aspect-ratio: 1/1;
  margin: auto;
  padding: 5px;
  color: var(--ttRed);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(25px, 1.84vw, 35px);
  margin-bottom: clamp(10px, 0.84vw, 16px);
}
.jo-contact-info .title {
  font-weight: 700;
  font-size: clamp(18px, 1.26vw, 24px);
  margin-bottom: clamp(7px, 0.53vw, 10px);
}
.jo-contact-info .title a {
  color: var(--black);
}
.jo-contact-info .title a:hover {
  color: var(--ttRed);
}
.jo-contact-info .descr {
  margin-bottom: 0;
  color: #445375;
  font-size: clamp(16px, 0.84vw, 16px);
}

.jo-inner-contact-form-section {
background: linear-gradient(90deg, var(--tt-pink), var(--tt-gold));
    padding-top: clamp(50px, 5.25vw, 100px);
}
.jo-inner-contact-form-wrapper {
  background-color: var(--white);
  padding: clamp(25px, 2.36vw, 45px);
  border-radius: 16px;
  margin-bottom: clamp(50px, 5.25vw, 100px);
}
.jo-inner-contact-from-left-title {
  font-weight: 700;
  color:#fff;
  font-size: clamp(25px, 2.1vw, 40px);
  margin-bottom: clamp(33px, 3.05vw, 58px);
}
.jo-inner-contact-img {
  background: url(../img/inner-contact-img-vector.svg) no-repeat top center;
  background-size: contain;
  padding-top: 25px;
}
.jo-inner-contact-form-title {
  font-weight: 700;
  font-size: clamp(24px, 1.58vw, 30px);
}
.jo-inner-contact-form input,
.jo-inner-contact-form textarea,
.jo-inner-contact-form .ss-main {
  height: clamp(45px, 3.15vw, 60px);
  border: 1px solid rgba(9, 171, 4, 0.5);
  border-radius: 8px;
  width: 100%;
  padding: 0 clamp(15px, 1.05vw, 20px);
}
.jo-inner-contact-form input:focus,
.jo-inner-contact-form input:focus-visible,
.jo-inner-contact-form input:focus-within,
.jo-inner-contact-form textarea:focus,
.jo-inner-contact-form textarea:focus-visible,
.jo-inner-contact-form textarea:focus-within,
.jo-inner-contact-form .ss-main:focus,
.jo-inner-contact-form .ss-main:focus-visible,
.jo-inner-contact-form .ss-main:focus-within {
  outline: none;
  box-shadow: none;
}


.jo-inner-contact-form textarea {
  padding: clamp(15px, 1.05vw, 20px);
  height: 150px;
  vertical-align: top;
  margin-bottom: clamp(15px, 1.58vw, 30px);
}
.jo-inner-contact-form .submit-btn {
  height: clamp(45px, 3.15vw, 60px);
  background-color: var(--ttRed);
  border-radius: 8px;
  width: 100%;
  color: var(--white);
  font-weight: 600;
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
}
.jo-inner-contact-form .submit-btn:hover {
  background-color: var(--black);
  color: var(--white);
}
.jo-inner-contact-form .submit-btn i {
  font-size: 12px;
  padding-top: 3px;
}

.ss-content .ss-list .ss-option.ss-highlighted,
.ss-content .ss-list .ss-option:not(.ss-disabled).ss-selected {
  background-color: var(--ttRed);
}

.ss-content .ss-list .ss-option:hover {
  background-color: var(--ttRed);
}

.jo-blog-details-img {
  border-radius: 20px;
  overflow: hidden;
}
.jo-blog-details-txt p {
  font-size: 15px;
  color: var(--ttGray2);
}
.jo-blog-details-txt ul {
  font-size: clamp(16px, 0.79vw, 15px);
  color: var(--black);
  font-weight: 500;
  margin-bottom: clamp(30px, 1.58vw, 30px);
  margin-top: clamp(20px, 1.58vw, 30px);
}
.jo-blog-details-txt ul li {
  position: relative;
  padding-left: 26px;
  margin-bottom: 15px;
}
.jo-blog-details-txt ul li::before {
  content: "\f11f";
  font-family: flaticon_jio_-_influencer !important;
  font-style: normal;
  font-weight: normal !important;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  color: var(--ttRed);
  font-size: 14px;
}
.jo-blog-details-txt ul li:last-child {
  margin-bottom: 0;
}
.jo-blog-details-txt blockquote {
  background-color: rgba(255, 0, 0, 0.05);
  padding: clamp(30px, 2.1vw, 40px) clamp(20px, 1.58vw, 30px);
  padding-right: clamp(80px, 6.83vw, 130px);
  border-left: 4px solid var(--ttRed);
  font-size: 16px;
  font-weight: 500;
  font-style: italic;
  position: relative;
}

@media screen and (max-width: 479px) {
  .jo-blog-details-txt blockquote {
    flex-wrap: wrap;
  }
}
.jo-blog-details-txt blockquote .quotation-icon {
  position: absolute;
  bottom: 30px;
  right: 30px;
}
.jo-blog-details-inner-imgs {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(15px, 1.58vw, 30px);
  margin-bottom: 15px;
}
@media screen and (max-width: 479px) {
  .jo-blog-details-inner-imgs {
    grid-template-columns: repeat(1, 1fr);
  }
}
.jo-blog-details-inner-imgs img {
  width: 100%;
  aspect-ratio: 450/269;
  border-radius: 15px;
}
.jo-blog-details-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  justify-content: space-between;
  border: solid #d4dcff;
  border-width: 1px 0 1px 0;
  padding: 20px 0;
}
.jo-blog-details-actions .tags-wrapper,
.jo-blog-details-actions .share {
  display: flex;
  gap: 15px;
  align-items: center;
}
.jo-blog-details-actions .title {
  font-weight: 600;
  font-size: 16px;
  margin-bottom: 0;
}
.jo-blog-details-actions .tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.jo-blog-details-actions .tags a {
  height: 34px;
  background-color: #f8f8f8;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  padding: 0 16px;
  color: var(--black);
}
.jo-blog-details-actions .tags a:hover {
  background-color: var(--ttRed);
  color: var(--white);
}
.jo-blog-details-actions .share-options {
  display: flex;
  gap: 20px;
  align-items: center;
  font-size: 18px;
}
.jo-blog-details-actions .share-options a {
  color: #445375;
}
.jo-blog-details-actions .share-options a:hover {
  color: var(--ttRed);
}

.jo-blog-comments {
  margin-top: clamp(30px, 3.15vw, 60px);
}
.jo-blog-comments-title {
  font-weight: 600;
  font-size: clamp(20px, 1.26vw, 24px);
  margin-bottom: clamp(28px, 1.84vw, 35px);
}

.jo-blog-comment {
  display: flex;
  gap: 20px;
}
.jo-blog-comment:not(:last-child) {
  border-bottom: 1px solid #d4dcff;
  padding-bottom: clamp(25px, 2.1vw, 40px);
  margin-bottom: clamp(25px, 2.1vw, 40px);
}
.jo-blog-comment-user-img {
  flex-shrink: 0;
}
.jo-blog-comment-user-img img {
  width: clamp(56px, 5.04vw, 96px);
  border-radius: 50%;
}
.jo-blog-comment-txt {
  padding-top: clamp(20px, 1.31vw, 25px);
}
.jo-blog-comment-txt .heading {
  margin-bottom: 12px;
}
.jo-blog-comment-txt .name {
  font-weight: 500;
  font-size: clamp(17px, 1.05vw, 20px);
}
.jo-blog-comment-txt .date {
  color: #445375;
  font-size: clamp(16px, 0.84vw, 16px);
}
.jo-blog-comment-txt .descr {
  color: #445375;
}
.jo-blog-comment-txt .reply-btn {
  border-radius: 999px;
  background-color: rgba(9, 171, 4, 0.5);
  height: 30px;
  font-size: 14px;
  padding: 0 16px;
  color: var(--ttRed);
}
.jo-blog-comment-txt .reply-btn:hover {
  background-color: var(--ttRed);
  color: var(--white);
}

.jo-blog-comment-form-wrapper {
  padding-top: clamp(30px, 3.15vw, 60px);
  border-top: 1px solid rgba(9, 171, 4, 0.5);
  margin-top: clamp(25px, 2.1vw, 40px);
}
.jo-blog-comment-form-title {
  font-weight: 600;
  font-size: clamp(21px, 1.26vw, 24px);
  margin-bottom: clamp(25px, 2.1vw, 40px);
}
.jo-blog-comment-form label {
  display: block;
  font-weight: 500;
  margin-bottom: 10px;
}
.jo-blog-comment-form input,
.jo-blog-comment-form textarea {
  height: clamp(55px, 2.94vw, 56px);
  border: 1px solid rgba(9, 171, 4, 0.5);
  border-radius: 4px;
  width: 100%;
  padding: 0 clamp(15px, 1.05vw, 20px);
}
.jo-blog-comment-form input:focus,
.jo-blog-comment-form input:focus-visible,
.jo-blog-comment-form input:focus-within,
.jo-blog-comment-form textarea:focus,
.jo-blog-comment-form textarea:focus-visible,
.jo-blog-comment-form textarea:focus-within {
  outline: none;
}
.jo-blog-comment-form textarea {
  padding: clamp(15px, 1.05vw, 20px);
  height: 200px;
  vertical-align: top;
}
.jo-blog-comment-form button {
  background-color: var(--ttRed);
  height: clamp(45px, 2.94vw, 56px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 clamp(18px, 1.26vw, 24px);
  border-radius: 6px;
  gap: 8px;
  color: var(--white);
  margin-top: clamp(15px, 1.58vw, 30px);
}
.jo-blog-comment-form button i {
  font-size: 22px;
  padding-top: 3px;
} /*# sourceMappingURL=style.css.map */
header.jo-header img {
  max-width: 150px;
}

.hero-section-video .mute-btn {
    top: unset;
    right: 30px;
    bottom: 220px !important;
    background-color: #000 !important;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.w-full {
  width: 100%;
}

/* <----------------------------------> */

.services-section {
  padding: 50px 20px;
  text-align: center;
}

.services-section h2 {
  font-size: 2.5rem;
  color: linear-gradient(90deg, #09ab04 0%, #143612 100%);
  margin-bottom: 30px;
}

.tab-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  background: #1e1e1e;
  padding: 20px;
  border-radius: 20px;
  margin-bottom: 30px;
}

.tab-buttons button {
  background: #ffffff;
  color: #000;
  padding: 12px 24px;
  border-radius: 30px;
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
}

.tab-buttons button.active {
  background: linear-gradient(90deg, #09ab04 0%, #143612 100%);
  color: #000;
}

.video-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 20px;
}

.video-card {
  background: #111;
  border-radius: 15px;
  overflow: hidden;
  position: relative;
}

.video-card video {
  width: 100%;
  height: 300px;
  object-fit: cover;
}

@media (max-width: 768px) {
  .video-card video {
    height: 200px;
  }

  .tab-buttons button {
    font-size: 14px;
    padding: 10px 18px;
  }
}

.our-process {
  padding: 60px 20px;
  position: relative;
}

.container {
  max-width: 1200px;
  margin: auto;
  position: relative;
}
.pricing-btn--executive:hover{
    color:#fff !important;
}
.section-title {
  text-align: center;
  color: #09a904;
  font-size: 2.5rem;
  font-weight: bold;
  margin-bottom: 60px;
}

/* Center vertical line */
.process-line {
  position: absolute;
  top: 80px;
  bottom: 0;
  left: 50%;
  width: 2px;
  background-color: #09a904;
  transform: translateX(-50%);
  z-index: 1;
}

/* Step structure */
.process-step {
  display: flex;
  align-items: center;
  margin-bottom: 80px;
  position: relative;
  z-index: 2;
}

.process-step.left {
  flex-direction: row-reverse;
  text-align: left;
}

.process-step.right {
  flex-direction: row;
  text-align: left;
}

.step-number {
  background: linear-gradient(90deg, #09ab04 0%, #143612 100%);
  color: #000;
  font-weight: bold;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: grid;
  place-content: center;
  font-size: 18px;
  margin: 0 20px;
  flex-shrink: 0;
}

.step-content {
  max-width: 400px;
  flex: 1;
}

.step-content h3 {
  margin: 0 0 10px;
}

.step-content p {
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
}

.step-icon img {
  width: 100px;
  height: auto;
  margin: 0 20px;
}

/* Responsive Design */
@media (max-width: 768px) {
  .process-line {
    display: none;
  }

  .process-step {
    flex-direction: column !important;
    text-align: center;
  }

  .step-icon {
    margin-bottom: 20px;
  }

  .step-number {
    margin: 10px auto;
  }

  .step-content {
    max-width: 100%;
  }
}

.tdm-testimonial-section {
  padding: 100px 20px;

  background-color: #fff;
}

.tdm-testimonial-container {
  max-width: 1200px;
  margin: auto;
}

.tdm-heading {
  font-size: 2.5rem;
  font-weight: 800;
  line-height: 1.2;
}

.tdm-heading span {
  display: block;
}

.tdm-rating-summary {
  margin: 20px 0;
}

.tdm-stars {
  font-size: 24px;
  color: yellow;
  margin-bottom: 5px;
}

.tdm-rating-summary p {
  font-weight: 600;
}

.tdm-cards-wrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 30px;
  margin-top: 40px;
}

.tdm-testimonial-card {
  background: #fff;
  color: #000;
  padding: 25px;
  border-radius: 15px;
  max-width: 400px;
  flex: 1;
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.05);
  text-align: left;
}

.swiper-slide {
  display: flex;
  justify-content: center;
}
.tdm-orange {
  color: orange;
  font-size: 18px;
  margin-bottom: 10px;
}

.tdm-name {
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 10px;
}

.tdm-feedback {
  color: #666;
  font-size: 0.95rem;
}
h2.tdm-heading {
    text-align: center;
    color: #000;
}
.tdm-testimonial-card {
    border: 1px solid #000;
}
/* Responsive */
@media (max-width: 768px) {
  .tdm-cards-wrapper {
    flex-direction: column;
    align-items: center;
  }
}

.tdm-stats-section {
  background: #dee2e6;
  padding: 60px 20px;
  border-radius: 0;
}

.tdm-container {
  max-width: 1200px;
  margin: auto;
}

.tdm-stats-heading {
  text-align: center;
  font-size: 2rem;
  font-weight: 800;
  margin-bottom: 70px;
  color: #ffffff;
}

.tdm-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 80px;
}

.tdm-stat-card {
  background: #000000;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08);
  text-align: center;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transition: color 0.3s ease;
  z-index: 1;
  color: #fff;
}

.tdm-stat-card h3 {
  font-size: 1.8rem;
  font-weight: 700;
  margin-bottom: 10px;
}

.tdm-stat-card p {
  font-size: 1rem;
  color: #ffffff;
}

.tdm-stat-card.icon span {
  font-size: 2rem;
  display: block;
  margin-bottom: 10px;
}

/* Hover Background Animation */
.tdm-stat-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: #09ab04;
  z-index: -1;
  transition: left 0.4s ease;
}

.tdm-stat-card:hover::before {
  left: 0;
}

.tdm-stat-card:hover h3,
.tdm-stat-card:hover p {
  color: #ffffff;
}

.fixed_enquiry_btn_web {
  position: fixed;
  bottom: 5%;
  left: 3%;
  z-index: 99;
}

.fixed_enquiry_btn_web a {
  display: flex;
  align-items: center;
  gap: 8px; /* spacing between icon and text */
  padding: 10px 15px;
  border-radius: 100px;
  font-size: 15px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  word-spacing: 1px;
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
  color: #fff;
  text-decoration: none;
  margin-bottom: 20px;
}

.fixed_enquiry_btn_web a:nth-child(1) {
    background-color: #f15d30;
    padding: 15px 15px;
    text-align: center;
}

.fixed_enquiry_btn_web a:nth-child(2) {
  background-color: #24cc63;
  padding: 8px 12px;
}

.fixed_enquiry_btn_web a:nth-child(3) {
  background-color: #0693e3;
  padding: 11px 15px;
}
.fixed_enquiry_btn_web a:nth-child(2) {
    background-color: #24cc63;
    padding: 12px 12px;
}
.fixed_enquiry_btn_web a:nth-child(2) span {
    font-size: 25px;
}
.fixed_enquiry_btn_web a span,
.fixed_enquiry_btn_web a svg {
  font-size: 20px;
  color: #fff;
  display: flex;
  align-items: center;
}

.fixed_enquiry_btn_web svg path {
  fill: #fff;
}
.jo-footer-top a img {
  max-width: 100px;
}
.jo-footer-middle p span,
.jo-footer-middle p a,
.jo-footer-middle p label {
  vertical-align: middle;
  display: inline-block;
  font-size: 18px;
}
.primary-bg {
  background-color: rgba(9, 171, 4, 0.5);
  color: #fff;
  margin-bottom: 50px;
}

.xs-section-padding {
  padding: 60px 20px;
}

.xs-heading {
  text-align: center;
  margin-bottom: 40px;
}

.section-subtitle {
  font-size: 18px;
  color: #fff;
  opacity: 0.8;
}

.section-title {
  font-size: 35px;
  font-weight: 700;
  margin-top: 10px;
  color: #fff;
}

.working-process-group {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}

.single-work-process {
  background-color: #fff;
  padding: 30px 10px;
  border-radius: 15px;
  text-align: center;
  flex: 1 1 22%;
  min-width: 200px;
  transition: transform 0.3s ease;
}

.single-work-process:hover {
  transform: scale(1.05);
}

.work-process-icon img {
  width: 60px;
  height: 55px;
  object-fit: contain;
  margin-bottom: -19px;
}

h4.small {
  font-size: 18px;
  margin: 0;
  color: #000000;
}
.work-process-icon {
  text-align: center;
  width: 124px;
  height: 124px;
  line-height: 124px;
  border: 1px solid #fff;
  border-radius: 50%;
  background-color: #192414;
  width: 124px;
  height: 124px;
  margin: 0 auto;
  -webkit-transition: all 0.4s ease;
  -o-transition: all 0.4s ease;
  transition: all 0.4s ease;
  margin-bottom: 40px;
  position: relative;
}

.current-section .working-process-group .work-process-icon {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-name: bounceIns;
  animation-name: bounceIns;
}
 @media (max-width: 768px) {
    .working-process-group {
      flex-direction: row;
      overflow-x: auto;
      flex-wrap: nowrap;
    }

    .single-work-process {
      flex: 0 0 auto;
    }
  }
  .floating-icons {
    position: fixed;
    bottom: 2%;
    left: 15px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    z-index: 1000;
  }

  .floating-icons .icon {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 24px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    transition: transform 0.3s;
  }

  .floating-icons .icon:hover {
    transform: scale(1.1);
  }

  .icon.call {
    background-color: #f15d30;
  }

  .icon.whatsapp {
    background-color: #25d366;
  }

  .icon.email {
    background-color: #1da1f2;
  }

  @media (max-width: 768px) {
    .floating-icons {
      bottom: 20%;
      left: 10px;
    }

    .floating-icons .icon {
      width: 40px;
      height: 40px;
      font-size: 20px;
    }
  }

  .jo-services {
    padding: 2.604vw 0;
  }
  @media screen and (max-width: 991px) {
    .jo-services {
      padding: 40px 0;
    }
  }
  @media (min-width: 1400px) {
    .jo-services .container {
      max-width: 1417px;
    }
  }
  .jo-services-wrapper {
    padding: 2.604vw;
    background-color: #cad4ca;
    border-radius: 20px;
  }
  @media screen and (max-width: 1399px) {
    .jo-services-wrapper {
      padding: 30px;
    }
  }
  @media screen and (max-width: 991px) {
    .jo-services-wrapper {
      padding: 20px;
    }
  }
  @media screen and (max-width: 479px) {
    .jo-services-wrapper {
      padding: 15px;
    }
  }
  .jo-services-wrapper .heading {
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: space-between;
    border-bottom: 1px solid rgba(0, 0, 0, 0.2);
    padding-bottom: 26px;
    margin-bottom: 40px;
    flex-wrap: wrap;
  }
  @media screen and (max-width: 479px) {
    .jo-services-wrapper .heading {
      margin-bottom: 20px;
      padding-bottom: 21px;
    }
  }
  .jo-services-tabs-wrapper {
    display: flex;
    align-items: flex-start;
    gap: 1.563vw;
  }
  @media screen and (max-width: 991px) {
    .jo-services-tabs-wrapper {
      flex-direction: column;
    }
  }
  @media screen and (max-width: 479px) {
    .jo-services-tabs-wrapper {
      gap: 20px;
    }
  }
  .jo-services-tab-navs {
    display: flex;
    flex-direction: column;
    gap: clamp(10px, 0.781vw, 15px);
    flex-shrink: 0;
  }
  @media screen and (max-width: 991px) {
    .jo-services-tab-navs {
      width: 100%;
      text-align: center;
    }
  }
  .jo-services-tab-navs .tab-nav {
    background-color: var(--white);
    border-radius: 10px;
    height: 3.906vw;
    min-width: 19.271vw;
    text-align: left;
    padding: 0 1.042vw;
    font-weight: 600;
    font-size: 1.042vw;
    position: relative;
    z-index: 1;
  }
  @media screen and (max-width: 1399px) {
    .jo-services-tab-navs .tab-nav {
      min-width: 0;
      font-size: 16px;
      height: 55px;
    }
  }
  @media screen and (max-width: 991px) {
    .jo-services-tab-navs .tab-nav {
      font-size: 14px;
      height: 45px;
      padding: 0 15px;
      text-align: center;
    }
  }
  .jo-services-tab-navs .tab-nav::before {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    border-radius: 10px;
    background: linear-gradient(90deg, #09ab04 0%, #143612 100%);
    z-index: -1;
    opacity: 0;
    transition: 0.4s ease;
  }
  .jo-services-tab-navs .tab-nav.active {
    color: var(--white);
  }
  .jo-services-tab-navs .tab-nav.active::before {
    opacity: 1;
  }

  .tt-tab {
    overflow: hidden;
    opacity: 0;
    height: 0;
    pointer-events: none;
    transition: 0.4s ease;
  }
  .tt-tab.active {
    opacity: 1;
    height: auto;
    pointer-events: auto;
  }

  .tt-service-tab {
    display: flex;
    gap: 1.563vw;
    background-color: var(--white);
    padding: 1.563vw;
    border-radius: 10px;
  }

  @media screen and (max-width: 1199px) {
    .tt-service-tab {
      flex-direction: column;
      gap: 20px;
    }
  }
  @media screen and (max-width: 767px) {
    .tt-service-tab {
      padding: 20px;
    }
  }
  @media screen and (max-width: 479px) {
    .tt-service-tab {
      padding: 15px;
    }
  }
  .tt-service-tab .img {
    max-width: 21.302vw;
    flex-shrink: 0;
    border-radius: 10px;
    overflow: hidden;
  }
  @media screen and (max-width: 1399px) {
    .tt-service-tab .img {
      max-width: 350px;
    }
  }
  .tt-service-tab .title {
    font-size: clamp(17px, 1.042vw, 20px);
    font-weight: 700;
    color: var(--black);
    margin-bottom: 0.365vw;
  }
  @media screen and (max-width: 991px) {
    .tt-service-tab .title {
      margin-bottom: 12px;
    }
  }
  .tt-service-tab .descr {
    font-weight: 400;
    font-size: clamp(13px, 0.833vw, 16px);
    line-height: 1.65;
    color: var(--ttGray2);
    margin-bottom: 0.885vw;
  }


  @media screen and (max-width: 991px) {
    .tt-service-tab .descr {
      margin-bottom: 15px;
    }
  }
  .tt-service-tab .list {
    font-size: clamp(13px, 0.833vw, 16px);
    list-style: disc inside;
    padding-left: 10px;
    margin-bottom: 0;
  }
  .tt-service-tab .list li:not(:last-child) {
    margin-bottom: 0.521vw;
  }
  .jo-intro-lives-wrapper {
    background: url(../img/intro-live-bg.png) var(--black) no-repeat center
      center;
    background-size: cover;
    padding: 50px 0;
  }

  .jo-intro {
    overflow: hidden;
    position: relative;
    padding: 50px 0;
  }
  @media screen and (max-width: 1399px) {
    .jo-intro {
      padding: 20px 0 50px;
    }
  }
  .jo-intro__txt {
    color: var(--white);
  }
  .jo-intro__txt .jo-section-title {
    color: var(--white);
    margin-bottom: 22px;
  }
  .jo-intro__txt .jo-btn::after {
    content: "";
    position: absolute;
    inset: 1px;
    background-color: var(--black);
    z-index: -1;
    border-radius: 6px;
    transition: 0.4s ease;
  }
  .jo-intro__txt .jo-btn:hover::after {
    opacity: 0;
  }
  .jo-intro__descr {
    margin-bottom: 33px;
    font-size: clamp(16px, 0.833vw, 16px);
  }
  .jo-intro__list {
    padding: 0;
    margin: 0;
    margin-bottom: 50px;
  }
  .jo-intro__list li {
    position: relative;
    padding-left: 35px;
    list-style: none;
    font-weight: 600;
    font-size: clamp(16px, 0.833vw, 16px);
  }
  .jo-intro__list li:not(:last-child) {
    margin-bottom: 18px;
  }
  .jo-intro__list li::before {
    position: absolute;
    content: "";
    left: 0;
    top: 1px;
    width: 20px;
    height: 20px;
    background: url(../img/checkmark-badge.svg) no-repeat center center;
    background-size: 100% 100%;
  }
  .jo-intro__img {
    display: flex;
    justify-content: flex-start;
    margin-left: 34px;
    position: relative;
  }
  @media screen and (max-width: 479px) {
    .jo-intro__img {
      margin-left: 0;
    }
  }
  .jo-intro__img .play-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 56px;
    width: 114px;
    aspect-ratio: 1/1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--white);
    color: var(--ttRed);
    border-radius: 99px;
    font-size: 26px;
    box-shadow: 0 0 0 20px rgba(255, 255, 255, 0.5);
    animation: btn-shadow-anim 2.5s linear infinite forwards;
  }
  @media screen and (max-width: 767px) {
    .jo-intro__img .play-btn {
      left: 26px;
      width: 84px;
    }
  }
  @media screen and (max-width: 479px) {
    .jo-intro__img .play-btn {
      left: 10px;
      width: 70px;
      font-size: 20px;
    }
  }
  .jo-intro__img .play-btn:hover {
    background-color: var(--ttRed);
    color: var(--white);
  }
  .jo-intro__img img {
    max-width: none;
    max-height: 34.371vw;
    border-radius: 999px 0 0 999px;
  }
  .jo-intro__vector {
    position: absolute;
    top: 27px;
    left: -427px;
    animation: spin 5.5s linear infinite forwards;
  }
  @media screen and (max-width: 1799px) {
    .jo-intro__vector {
      left: -497px;
    }
  }

  @keyframes spin {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }
  @keyframes btn-shadow-anim {
    0% {
      box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.5);
    }
    100% {
      box-shadow: 0 0 0 20px rgba(255, 255, 255, 0);
    }
  }
  .jo-upcoming-lives {
    color: var(--white);
    padding: 50px 0;
  }
  @media screen and (max-width: 1399px) {
    .jo-upcoming-lives {
      padding: 20px 0;
    }
  }
  .video-tabs-section {
    padding: 40px;
    background: #f0f0f0;
  }

  .tab-container {
    display: flex;
    flex-direction: row;
    gap: 20px;
    flex-wrap: wrap;
  }

  .tab-buttons {
    flex: 1 1 150px;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .tab-btn {
    padding: 12px;
    background: #ffffff;
    border: 2px solid #118b50;
    color: #118b50;
    font-weight: bold;
    cursor: pointer;
    border-radius: 6px;
    transition: background 0.3s;
  }

  .tab-btn.active,
  .tab-btn:hover {
    background: #118b50;
    color: white;
  }

  .tab-content-wrapper {
    flex: 3 1 600px;
  }

  .tab-content {
    display: none;
  }

  .tab-content.active {
    display: block;
  }

  .video-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
  }

  .video-grid iframe {
    flex: 1 1 calc(33.333% - 20px);
    height: 200px;
    border: none;
    border-radius: 10px;
  }

  /* Responsive */
  @media (max-width: 768px) {
    .tab-container {
      flex-direction: column;
    }
    .video-grid iframe {
      flex: 1 1 100%;
    }
  }

button.mute-btn.text-white {
    position: absolute;
}

h2.jo-section-title {
    color: #09a904;
    text-transform: uppercase;
}

h2.section-heading {
    color: #09a904;    
    text-transform: uppercase;
}

span.highlight {
    color: #fff;
}



h2.service-section-title {
    color: #a8ffb3;
    text-transform: uppercase;
    font-weight: bold;
}
/* <-------------------------------------------------------> */

.growth-stories-section {
  background-color: #000;
  padding: 5.208vw 20px;
}

.section-heading {
  text-align: center;
  font-size: 2.2rem;
  font-weight: bold;
  padding-bottom: 40px;
  color: #a8ffb3;
  text-transform: uppercase;
}

.highlight {
  color: #a8ffb3;
}
button.mute-btn.text-white {
    position: absolute;
}


.story-section {
  display: flex;
  flex-direction: column;
  gap: 50px;
}

.story-card {
  background-color: #111;
  border-radius: 12px;
  padding: 55px;
  display: flex;
  align-items: center;
  width: 50%;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.story-card:hover {
  transform: translateY(-5px);
}

/* Unique #09a904 gradient box shadows */
.card-fidom {
 box-shadow: 0 0 20px rgba(0, 255, 0, 0.4), 0 0 40px rgba(0, 200, 100, 0.3);
}
.card-fidom:hover {
 box-shadow: 0 0 25px rgba(0, 255, 0, 0.7), 0 0 60px rgba(0, 200, 100, 0.5);
}

.card-formulaguy {
  box-shadow: 0 0 20px rgba(0, 255, 0, 0.4), 0 0 40px rgba(0, 200, 100, 0.3);
}
.card-formulaguy:hover {
  box-shadow: 0 0 25px rgba(0, 255, 0, 0.7), 0 0 60px rgba(0, 200, 100, 0.5);
}

.card-rangde {
box-shadow: 0 0 20px rgba(0, 255, 0, 0.4), 0 0 40px rgba(0, 200, 100, 0.3);
    transition: all ease 0.5s;
}
.card-rangde:hover {
box-shadow: 0 0 25px rgba(0, 255, 0, 0.7), 0 0 60px rgba(0, 200, 100, 0.5);
}

.story-image {
  width: 100px;
  height: 100px;
  margin-right: 20px;
  border-radius: 10px;
  background: #fff;
  padding: 10px;
  object-fit: contain;
  flex-shrink: 0;
}

.story-content {
  flex: 1;
}

.story-content h3 {
  color: #a8ffb3;
  margin-bottom: 10px;
  font-size: 1.6rem;
}

.story-content p {
  color: #ccc;
  font-size: 0.95rem;
  line-height: 1.6;
}

/* Alignments */
.align-left {
  align-self: flex-start;
  margin-left: 55px;
}

.align-right {
  align-self: flex-end;
  flex-direction: row-reverse;
  text-align: right;
  margin-right: 55px;
}

.align-right .story-image {
  margin-left: 20px;
  margin-right: 0;
}

/* Responsive */
@media (max-width: 768px) {
  .story-card {
    width: 100%;
    flex-direction: column !important;
    text-align: center !important;
    align-self: center !important;
    margin:0;
  }
.process-box .p-arrow {
    display: none;
}
.process-box {
    margin-bottom: 70px;
}
  .story-image {
    margin: 0 0 15px 0 !important;
  }
}
.service-section {
      padding: 5.208vw 20px;
      background: #fff;
    }

    .service-section-container {
      max-width: 1200px;
      margin: 0 auto;
    }

    .service-section-title {
      text-align: center;
      font-size: 2.5rem;
      margin-bottom: 40px;
    }

    .service-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 40px;
      justify-items: center;
    }

    .service-card-wrapper {
      position: relative;
      perspective: 1000px;
    }

    .service-card-border {
      position: absolute;
      top: 8px;
      left: 8px;
      right: -8px;
      bottom: -8px;
      border-radius: 12px;
      background: linear-gradient(90deg, var(--ttRed), var(--tt-gold));
      z-index: 0;
      transform: rotate(1deg);
    }

    .service-card {
      position: relative;
      background-color: #111;
      padding: 30px 20px;
      border-radius: 10px;
      z-index: 1;
      box-shadow: 0 5px 10px rgba(255, 165, 0, 0.15);
      transition: all 0.3s ease;
      height:350px;
    }

    .service-card:hover {
      transform: scale(1.02);
    }

    .service-card h3 {
      margin-top: 0;
      font-size: 36px;
    }

    .service-card p {
      margin-top: 10px;
      font-size: 20px;
      color: #fff;
    }

    .highlight-card {
      background: linear-gradient(90deg, var(--tt-pink), var(--tt-gold));
      color: #000;
      font-weight: bold;
    }
.service-card h3 {
    color: #fff;
}
    @media screen and (max-width: 900px) {
      .service-grid {
        grid-template-columns: repeat(2, 1fr);
      }
    }

    @media screen and (max-width: 600px) {
      .service-section-title {
        font-size: 20px;
      }

      .service-grid {
        grid-template-columns: 1fr;
      }

      .service-card {
        padding: 20px 15px;
}
}
section.jo-reels-wrapper {
    position: relative;
}

.jo-reels-wrapper button.jo-slider-nav-btn.jo-reels-slider-prev {
    position: absolute;
    left: -50px;
    top: 50%;
    z-index: 99;
}
.jo-reels-wrapper button.jo-slider-nav-btn.jo-reels-slider-next{
    position: absolute;
    right: -50px;
    top: 50%;
    z-index: 99; 
}
button.jo-slider-nav-btn i {
    color: #fff;
}

.swiper-button-next:after, .swiper-button-prev:after {

    color: #fff;
    font-size: 20px;
    background: #000;
    padding: 14px;
    font-weight: bold;
    border-radius: 50px;
    z-index: 99;
}

.process-section {
  background: #fff;
  padding: 5.208vw 20px;
  color: #fff;
  text-align: center;
}

.process-section h2 {
  font-size: 2.5rem;
  color: #000;
  padding-bottom: 58px;
}

.process-steps {
  display: flex;
  justify-content: center;
  gap: 90px;
  flex-wrap: wrap;
  position: relative;
}

.process-step {
  position: relative;
  max-width: 260px;
  padding: 30px 15px;
  background: #111;
  border-radius: 12px;
  transition: transform 0.3s ease;
  animation: fadeIn 1s ease forwards;
  opacity: 0;
}

.process-step:hover {
  transform: translateY(-10px);
}

.process-icon {
  position: relative;
  margin-bottom: 20px;
}

.icon-emoji {
  font-size: 3.5rem;
}

.step-number {
  position: absolute;
  top: -15px;
  left: -15px;
  background: #00ff88;
  color: #000;
  font-weight: bold;
  border-radius: 50%;
  padding: 8px 12px;
  font-size: 1rem;
}

.step-line {
  position: absolute;
  top: 50%;
  left: 100%;
  width: 60px;
  height: 4px;
  background: #09ab04;
  z-index: 0;
}

.last-line {
  display: none;
}

.process-text h3 {
  color: #00ff88;
  font-size: 1.1rem;
  margin-bottom: 10px;
}

.process-text p {
  font-size: 0.95rem;
  color: #eee;
  line-height: 1.5;
}

@media (max-width: 1000px) {
  .process-steps {
    flex-direction: column;
    align-items: center;
  }

  .step-line {
    left: 50%;
    top: 100%;
    width: 4px;
    height: 60px;
    transform: translateX(-50%);
  }

  .last-line {
    display: none !important;
  }
}

/* Fade-in animation */
@keyframes fadeIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fade-in {
  opacity: 0;
  transform: translateY(30px);
  animation: fadeIn 1s ease forwards;
}

.fade-in:nth-child(1) {
  animation-delay: 0.1s;
}
.fade-in:nth-child(2) {
  animation-delay: 0.3s;
}
.fade-in:nth-child(3) {
  animation-delay: 0.5s;
}
.fade-in:nth-child(4) {
  animation-delay: 0.7s;
}

.brand-best-friend-section {
  background: #000;
  padding: 80px 20px;
  text-align: center;
}

.brand-best-friend-section h2 {
  font-size: 2.5rem;
  font-weight: 800;
  background: linear-gradient(90deg, #00ff88, #00cc66);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 60px;
}

.brand-icons-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 70px;
}

.brand-icon-block {
  width: 220px;
  transition: transform 0.3s ease;
  cursor: pointer;
}

.brand-icon-block img {
  width: 125px;
  margin-bottom: 20px;
  transition: transform 0.3s ease;
}

.brand-icon-block p {
  font-size: 1rem;
  color: #fff;
  line-height: 1.5;
  transition: color 0.3s ease;
}
.brand-icon-block p:hover{
color: #00ff77;
}
.brand-icon-block:hover {
  transform: translateY(-10px);
}

.brand-icon-block:hover img {
  transform: scale(1.1);
}

.brand-icon-block:hover p {
  color: #09ab04;
}

@media (max-width: 768px) {
  .brand-icon-block {
    width: 100%;
  }

  .brand-best-friend-section h2 {
    font-size: 1.8rem;
  }
}


.rocket-pricing-section {
  background: #fff;
  color: #fff;
  padding: 5.208vw 20px;
  font-family: "Segoe UI", sans-serif;
}

.rocket-pricing-section h2 {
text-transform: uppercase;
    font-weight: bold;
    text-align: center;
    font-size: 2.5rem;
    margin-bottom: 60px;
}

.rocket-pricing-section h2 span {
  color: #a8ffb3;
}

.rocket-pricing-cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 30px;
}

.rocket-pricing-card {
  background: #ffffff;
  color: #000;
  border: 3px solid #00cc66;
  border-radius: 15px;
  max-width: 350px;
  width: 100%;
  padding: 30px;
  position: relative;
  box-shadow: 0 10px 25px rgba(0, 204, 102, 0.3);
  transition: transform 0.3s ease;
}

.rocket-pricing-card:hover {
  transform: translateY(-5px);
}

.rocket-pricing-badge {
position: absolute;
    top: -25px;
    left: 20px;
    background: #00cc66;
    color: #fff;
    font-size: 24px;
    font-weight: bold;
    padding: 5px 10px;
    border-radius: 10px;
}

.rocket-plan-title {
  font-size: 24px;
  font-weight: bold;
  color: #007f3d;
  margin-bottom: 10px;
}

.rocket-plan-price {
  font-size: 28px;
  margin-bottom: 20px;
}

.rocket-plan-features {
  list-style: none;
  padding: 0;
  margin: 0 0 20px;
}

.rocket-plan-features li {
    margin: 8px 0;
    display: flex;
    align-items: center;
    font-size: 18px;
}

.rocket-plan-features li::before {
  content: "✔️";
  margin-right: 10px;
  color: #00b359;
}

.rocket-plan-features li.rocket-not-included::before {
  content: "❌";
  color: #ff4d4d;
}

.rocket-book-btn {
  background: #00cc66;
  color: #fff;
  border: none;
  padding: 10px 20px;
  font-weight: bold;
  font-size: 14px;
  cursor: pointer;
  border-radius: 5px;
  transition: background 0.3s;
}

.rocket-book-btn:hover {
  background: #00994d;
}

@media (max-width: 768px) {
  .rocket-pricing-section h2 {
    font-size: 25px;
  }
 .process-box .p-arrow {
    display: none;
}
.tt-footer-top__socials {
    justify-content: center !important;
}
.process-box {
    margin-bottom: 70px;
}
.jo-footer-top {
    text-align: center;
}

.jo-footer-top img {
    max-width: 200px !important;
}
h2.section-heading {
    font-size: 25px;
}

.process-section h2 {
    font-size: 25px;
}

.cm-counter-wrapper h3 {
    font-size: 25px;
}

.cm-counter {
    margin-bottom: 30px;
}

h2.service-section-title {
    font-size: 25px;
}
}

.#09a904-services-section {
  padding: 50px 20px;
  color: white;
  background-color: #000;
  margin-top: 50px;
  margin-bottom: 50px;
}

.#09a904-services-section h2 {
  text-align: center;
  font-size: 28px;
  margin-bottom: 40px;
  color: #a8ffb3;
}

.#09a904-service-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  justify-content: center;
}

.#09a904-service-card {
  position: relative;
  background: #000;
  color: #fff;
  padding: 25px;
  border-radius: 10px;
  width: 300px;
  min-height: 180px;
  z-index: 2;
  font-size: 16px;
  box-shadow: 0 0 0 2px #00ff88;
  transition: transform 0.3s ease, opacity 0.3s ease;
}
@keyframes fadeBounceUp {
  0% {
    opacity: 0.6;
    transform: translateY(10px);
  }
  50% {
    opacity: 1;
    transform: translateY(-5px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Apply animation on hover */
.#09a904-service-card:hover {
  animation: fadeBounceUp 0.6s ease-out;
}

.#09a904-service-card::before {
  content: "";
  position: absolute;
  top: 8px;
  left: 8px;
  right: -8px;
  bottom: -8px;
  background: linear-gradient(135deg, #00ff88, #007f4f);
  border-radius: 10px;
  z-index: -1;
  transform: rotate(-2deg);
}

.#09a904-service-card h3 {
  margin-top: 0;
  font-size: 20px;
  color: #a8ffb3;
}

@media (max-width: 768px) {
  .#09a904-service-card {
    width: 100%;
  }

  .#09a904-services-section h2 {
    font-size: 22px;
  }
}
.cm-home-contact {
    overflow: hidden;
    background: linear-gradient(90deg, var(--tt-pink), var(--tt-gold));
}
h2.jo-section-title {
    color: #09a904;
    text-align: center;
}
h2.jo-section-title span {
    display: block;
    font-size: 18px;
    padding-bottom:15px;
    color:#000;
    
}
h2.section-heading {
    color: #09a904;
}

span.highlight {
    color: #fff;
}

.story-content h3 {color: #09a904;}

.process-section h2 {
    color: #09a904;
}

.process-text h3 {
    color: #09a904;
}

h2.tdm-stats-heading {
    color: #09a904 !important;
}

h2.service-section-title {
    color: #09a904;
}

h2.tdm-heading {
    color: #09a904;
}

.rocket-pricing-section h2 {
    color: #09a904;
}

.rocket-pricing-badge {
    background-color: #09a904;
}

.rocket-plan-title {
    color: #09a904;
}
.brand-best-friend-section h2 {
    color: #09a904;
}
.brand-icon-block p {   
    color: #fff;
}
.rocket-pricing-section h2 span {
    color: #fff;
}
.brand-best-friend-section h2 {
    color: #09a904 !important;
    background: transparent;
    -webkit-text-fill-color: #09a904;
}
.service-card-wrapper:hover .service-card {
    background: #09a904;
}

.service-card-wrapper:hover .service-card-border {
    background: #000;
    border: 1px solid #09a904;
}

.story-content h3 {color: #09a904;}

.process-section h2 {
    color: #09a904;
}

.process-text h3 {
    color: #09a904;
}

h2.tdm-stats-heading {
    color: #09a904 !important;
}

h2.service-section-title {
    color: #09a904;
}

h2.tdm-heading {
    color: #09a904;
}

.rocket-pricing-section h2 {
    color: #09a904;
}

.rocket-pricing-badge {
    background-color: #09a904;
}

.rocket-plan-title {
    color: #09a904;
}
.brand-best-friend-section h2 {
    color: #09a904;
}
.brand-icon-block p {   
    color: #09a904;
}
.rocket-pricing-section h2 span {
    color: #fff;
}

.process-box {
  position: relative;
  padding: 85px 35px 40px;
  border-radius: 15px;
  -webkit-border-radius: 15px;
  -moz-border-radius: 15px;
  -webkit-transition: all 0.3s linear;
  -moz-transition: all 0.3s linear;
  -o-transition: all 0.3s linear;
  -ms-transition: all 0.3s linear;
  transition: all 0.3s linear;
  border:1px solid #000;
}
.process-box .number-box {
  width: 70px;
  height: 70px;
  line-height: 70px;
  text-align: center;
  color: #fff;
  font-size: 24px;
  font-weight: 900;
  font-family: "Red Hat Display", sans-serif;
  display: inline-block;
  position: absolute;
  left: 50%;
  top: -35px;
  margin-left: -35px;
  margin-bottom: 45px;
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  background-color: #0039e4;
  background-image: -moz-linear-gradient(145deg, #09a904, #143612);
  background-image: -webkit-linear-gradient(145deg, #09a904, #143612);
  background-image: linear-gradient(145deg, #09a904, #143612);

}
.process-box .icon-main {
  margin-bottom: 30px;
  line-height: 1;
}
.process-box .icon-main i, .process-box .icon-main span:before {
  font-size: 100px;
}
.process-box .icon-main svg {
  width: 100px;
  fill: #606060;
}
.process-box .content-box .process-box-title {
  font-size: 25px;
  font-weight: 700;
  margin-bottom: 15px;
}
.process-box .content-box p:last-child {
  margin-bottom: 0;
}
.process-box .p-arrow {
  position: absolute;
  top: -13px;
  right: -70px;
  z-index: 1;
}
.process-box:hover {
  box-shadow: 8px 8px 30px 0px rgba(9, 169, 4, 0.15);
  -webkit-box-shadow: 8px 8px 30px 0px rgba(9, 169, 4, 0.15);
  -moz-box-shadow: 8px 8px 30px 0px rgba(9, 169, 4, 0.15);
  background: #fff;
}

.process-box .content-box .process-box-title {
    color: #000;
}
.content-box p {
    color: #000;
}

.cm-counter-wrapper {
    padding: 5.208vw 0 0;
    background-image: url('assets/img/hero-4.webp');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    background-attachment: fixed;
    position: relative;
}

.cm-counter-wrapper:before {
    content: "";
    background: rgba(0,0,0,0.8);
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}
.achive-image-wrapper {
    padding-bottom: 50px;
}
/* .cm-counter-wrapper h3 {
    position: relative;
    z-index: 9;
    color: #09a904;
    text-align: center;
        text-transform: uppercase;
        font-size: 2.5rem;
        margin-bottom: 40px;
        font-weight: bold;
} */

/* .headerForAchievement h3{
  position: relative;
  z-index: 9;
  color: #09a904;
  text-align: center;
      text-transform: uppercase;
      font-size: 2.5rem;
      margin-bottom: 40px;
      font-weight: bold;
} */
.cm-inner-counter {
    position: relative;
    z-index: 9;
}
.cm-counter {
    padding: 50px 30px;
    text-align: center;
}

.cm-icon i {
    color: #09a904;
    font-size: 40px;
}
.cm-counter-inner {
    background: #F4F4F4;
}
.cm-number {
    color: #000;
    padding-top: 20px;
    font-weight: bold;
    font-size: 35px;
}
.cm-counter-inner .col-md-3 {
    padding: 0 !important;
}

.cm-counter-inner .col-md-3:hover {
    background: #fff;
}

.cm-description {
    color: #000;
}

.cm-number p {
    margin: 0;
}
section.cm-testimonial-section {
    padding: 3.208vw 20px;
    background: #000;
}

.cm-service-wrapper {
    padding: 5vw 0;
}

.inner-content-wrapper {
    padding: 30px 30px 28px;
    /* background: #fff; */
    margin-bottom: 30px;
    box-shadow: 8px 8px 30px 0px rgba(42, 67, 113, 0.15);
    -webkit-box-shadow: 8px 8px 30px 0px rgba(42, 67, 113, 0.15);
    -moz-box-shadow: 8px 8px 30px 0px rgba(42, 67, 113, 0.15);
    border-radius: 15px;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    -webkit-transition: all 0.3s linear;
    -moz-transition: all 0.3s linear;
    -o-transition: all 0.3s linear;
    -ms-transition: all 0.3s linear;
    transition: all 0.3s linear;
}
.cm-tagline {
    padding-bottom: 20px;
    display: block;
}


.cm-image-container img {
    width: 100%;
}

.cm-description-wrapper {
    padding: 20px 0 0;
    text-align: center;
}

.cm-description-wrapper h3 {
    font-size: 18px;
    line-height: normal;
    color: #09a904;
}

.cm-description-wrapper h3 {
    font-weight: bold;
    text-transform: uppercase;
    font-size: 20px;
}

.cm-description-wrapper p {
    font-size: 14px;
    text-align: justify;
}



.marquee1 {
 
  overflow: hidden;
  box-sizing: border-box;
  position: relative;
}

.marquee1:hover .marquee1-content1 {
  animation-play-state: paused;
}

.marquee1-content1 {
  display: flex;
  flex-direction: column;
  animation: marquee1-vertical 60s linear infinite;
}

.marquee1-content1 img {
  height: 100px;
  width:25%;
  margin-bottom: 20px;
  vertical-align: middle;
}

@keyframes marquee1-vertical {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
}
}

/* section */


.billing-toggle-container {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 60px;
  gap: 24px;
}

.billing-label {
  font-size: 18px;
  color: #222;
  transition: color 0.2s;
}

.switch {
  position: relative;
  display: inline-block;
  width: 56px;
  height: 32px;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #f3f6fd;
  border-radius: 32px;
  box-shadow: 0 2px 8px 0 #a3a3ff33;
  transition: background 0.3s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 28px;
  width: 28px;
  left: 2px;
  bottom: 2px;
  background: #8d8dff;
  border-radius: 50%;
  box-shadow: 0 2px 8px 0 #a3a3ff55;
  transition: transform 0.3s, background 0.3s;
}

input:checked + .slider {
  background-color: #f3f6fd;
}

input:checked + .slider:before {
  transform: translateX(24px);
  background: #6c63ff;
}

.billing-label--monthly {
  color: #222;
}

input:checked ~ .billing-label--monthly {
  color: #888;
}

input:checked ~ .billing-label--yearly {
  color: #222;
}

.billing-label--yearly {
  color: #888;
  transition: color 0.2s;
} 

/* --- Card Container --- */
.pricing-cards-container {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 40px;
  margin: 100px 0 0 0;
}

/* --- Card --- */
.pricing-card {
  background: rgba(255,255,255,0.85);
  border-radius: 22px;
  box-shadow: 0 12px 40px 0 rgba(44,62,80,0.15), 0 2px 10px 0 rgba(44,62,80,0.08);
  border: 1.5px solid #e6e9f2;
  padding: 40px 32px 56px 32px; /* extra bottom padding for button overlap */
  width: 440px;
  min-height: 560px;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: all 0.35s ease;
  backdrop-filter: blur(2.5px);
  overflow: visible;
}

.pricing-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 20px 50px 0 rgba(44,62,80,0.2), 0 5px 15px 0 rgba(44,62,80,0.1);
  border-color: #d0d7e8;
}

.pricing-card::before {
  content: '';
  position: absolute;
  top: -40px;
  left: -40px;
  width: 420px;
  height: 220px;
  /* background: radial-gradient(ellipse at 60% 40%, #e0f7fa 0%, #f3e8ff 60%, transparent 100%); */
  opacity: 0.55;
  z-index: 0;
  pointer-events: none;
  filter: blur(8px);
  animation: liquidMove 8s ease-in-out infinite alternate;
}

.pricing-card--economy .pricing-subtitle,
.pricing-card--economy .pricing-features li {
  color: #e0e6ff;
}

.pricing-card--economy .pricing-divider {
  border: none;
  height: 2px;
  /* background: linear-gradient(90deg, #ff4f7f 0%, #fff 100%); */
}

.pricing-card--economy .pricing-price {
  color: #fff;
  text-shadow: 0 2px 8px #ff512e55;
}

/* --- Badge --- */
.pricing-badge {
  position: absolute;
  top: 28px;
  left: 0;
  padding: 8px 26px;
  border-radius: 0 12px 12px 0;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 1px;
  box-shadow: 0 4px 16px 0 #0002;
  display: inline-block;
  background: linear-gradient(90deg, #fff8, transparent 80%);
  border: none;
  z-index: 2;
}

.pricing-badge--standard {
  background: linear-gradient(90deg, #1de9b6 80%, #00bfae 100%);
  color: #fff;
}

.pricing-badge--economy {
  background: linear-gradient(90deg, #ff4f7f 80%, #e91e63 100%);
  color: #fff;
}

.pricing-badge--executive {
  background: linear-gradient(90deg, #4CAF50 80%, #2E7D32 100%);
  color: #fff;
}

/* --- Image Spotlight --- */
.pricing-img {
  width: 150px;
  height: 150px;
  object-fit: contain;
  margin-bottom: 18px;
  margin-top: 18px;
  z-index: 1;
  position: relative;
}

.pricing-img::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 180px;
  height: 180px;
  background: radial-gradient(circle, #e3f6ff 60%, transparent 100%);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  z-index: 0;
}

/* --- Price and Subtitle --- */
.pricing-price {
  font-size: 44px;
  font-weight: 700;
  margin-bottom: 6px;
  color: #23294e;
  text-shadow: 0 2px 8px #a3b1d155;
  letter-spacing: 1px;
}

.pricing-subtitle {
  font-size: 20px;
  color: #a3b1d1;
  margin-bottom: 24px;
  font-weight: 500;
  letter-spacing: 0.5px;
}

/* --- Divider --- */
.pricing-divider {
  width: 100%;
  border: none;
  height: 2px;
  background: linear-gradient(90deg, #e6e9f2 0%, #fff 100%);
  margin: 18px 0 24px 0;
  border-radius: 2px;
}

/* --- Features List --- */
.pricing-features {
  list-style: none;
  padding: 0;
  margin: 0 0 32px 0;
  width: 100%;
}

.pricing-features li {
  font-size: 17px;
  color: #23294e;
  text-align: center;
  margin-bottom: 10px;
  font-weight: 400;
  letter-spacing: 0.2px;
  line-height: 2;
}

/* --- Button --- */
.pricing-btn {
  width: 80%;
  margin: 0 auto;
  padding: 14px 0;
  border: none;
  border-radius: 30px;
  font-size: 18px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s, box-shadow 0.2s, filter 0.2s;
  /* box-shadow: 0 8px 32px 0 #1de9b655; */
  background: rgba(41, 185, 5, 0.92);
  color: #fff;
  position: absolute;
  /* left: 50%; */
  bottom: -28px;
  /* transform: translateX(-50%); */
  overflow: hidden;
  backdrop-filter: blur(2px);
  filter: drop-shadow(0 4px 16px #1de9b6cc);
  z-index: 2;
}

.pricing-btn--economy {
  background: rgba(255, 79, 127, 0.92);
  box-shadow: 0 8px 32px 0 #ff4f7f55;
  filter: drop-shadow(0 4px 16px #ff4f7fcc);
}

.pricing-btn--executive {
  background: linear-gradient(90deg, #4CAF50 0%, #2E7D32 100%);
  box-shadow: 0 8px 32px 0 #4CAF5055;
  filter: drop-shadow(0 4px 16px #4CAF50cc);
}

.pricing-btn::before {
  content: "";
  position: absolute;
  top: 0;
  left: -75%;
  width: 50%;
  height: 100%;
  background: linear-gradient(120deg, rgba(255,255,255,0.45) 0%, rgba(255,255,255,0.05) 100%);
  transform: skewX(-20deg);
  transition: left 0.5s;
  pointer-events: none;
}

.pricing-btn:hover::before {
  left: 120%;
  transition: left 0.5s;
}

.pricing-btn:hover {
  filter: drop-shadow(0 6px 20px #4CAF50cc);
  box-shadow: 0 10px 40px 0 #4CAF5077;
  transform: translateY(-2px);
}

.pricing-btn--economy:hover {
  filter: drop-shadow(0 4px 16px #ff4f7fcc);
  box-shadow: 0 8px 32px 0 #ff4f7f55;
}

.pricing-btn--executive:hover {
  filter: drop-shadow(0 4px 16px #4CAF50cc);
  box-shadow: 0 10px 40px 0 #4CAF5077;
  color:#fff !important;
}
.pricing-btn .arrow {
  padding-bottom: 10px;
  font-size: 40px;
  margin-left: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  background: #fff;
  border-radius: 50%;
  color: #23294e;
  box-shadow: 0 2px 8px 0 #0001;
  transition: background 0.2s, color 0.2s;
}
.pricing-btn:hover .arrow {
  background: #f3f6fd;
  color: #1de9b6;
}
.pricing-btn--economy:hover .arrow {
  color: #ff4f7f;
}
.pricing-btn--executive:hover .arrow {
  color: #a993fe;
}

/* --- Responsive --- */
@media (max-width: 1100px) {
  .pricing-cards-container {
      flex-direction: column;
      align-items: center;
      gap: 32px;
  }
  .pricing-card {
      width: 90vw;
      max-width: 400px;
      padding-bottom: 56px;
  }
  .pricing-btn {
      width: 90%;
      bottom: -24px;
  }
}
@media (max-width: 700px) {
  .pricing-cards-container {
      gap: 18px;
      margin: 40px 0 0 0;
  }
  .pricing-card {
      padding: 24px 8px 18px 8px;
      min-height: 420px;
      padding-bottom: 40px;
  }
  .pricing-img {
      width: 100px;
      height: 100px;
  }
  .pricing-badge {
      font-size: 13px;
      padding: 6px 16px;
  }
  .pricing-price {
      font-size: 32px;
  }
  .pricing-btn {
      width: 95%;
      bottom: -18px;
  }
} 



.achievements-wrapper {
  background-color: #000;

}
.cm-description {
    font-size: 22px;
}
.achievements-heading h3,.cm-tagline h3 {
  color: #09a904;
  font-size: 2.7rem;
  font-weight: 700;
  text-transform: uppercase;
  text-align: center;
  /* margin-bottom: 50px; */
  position: relative;
  z-index: 10;
}

.achievement-carousel {
  width: 100%;
  overflow: hidden;
  position: relative;
  background: #111;
  /* border-radius: 20px; */
  /* padding: 30px 0; */
  box-shadow: 0 0 30px rgba(0, 255, 100, 0.15);
}

.achievement-track {
  display: flex;
  /* gap: 20px; */
  animation: scrollSlide 60s linear infinite;
  padding-left: 20px;
}

.achievement-track:hover {
  animation-play-state: paused;
}

.achievement-item {
  flex: 0 0 auto;
  width: 400px;
  height: 400px;
  /* background: #fff; */
  /* border-radius: 12px; */
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.achievement-item:hover {
  transform: translateY(-6px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
}

.achievement-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}

.achievement-item:hover img {
  transform: scale(1.06);
}

@keyframes scrollSlide {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(calc(-370px * 12)); /* width + gap */
  }
}

/* Responsive Design */
@media (max-width: 1024px) {
  .achievement-item {
    width: 300px;
    height: 300px;
  }
  @keyframes scrollSlide {
    100% {
      transform: translateX(calc(-280px * 12));
    }
  }
}
.achievement-carousel.carausel1 {
    box-shadow: none !important;
    background: #fff !important;
}

.achievement-carousel.carausel1 .achievement-item {
    box-shadow: none;
    width: 200px;
    height: 200px;
    justify-content: center;
    align-items: center;
}

.achievement-carousel.carausel1 .achievement-item img {
    width: 150px;
    height: 150px;
}

@media (max-width: 768px) {
  .achievements-heading h3 {
    font-size: 2rem;
  }
.process-box .content-box .process-box-title {
    font-size: 22px;
}
 .pricing-card.pricing-card--executive {
    margin-bottom: 50px;
}
  .achievement-item {
    width: 200px;
    height: 200px;
  }
  @keyframes scrollSlide {
    100% {
      transform: translateX(calc(-200px * 12));
    }
  }
 .achievement-item {
    width: 100% !important;
    height: 100%;
}
.cm-counter {
    padding: 0 30px 0;
    text-align: center;
}
.cm-counter-inner .col-md-3 {
    padding: 0 !important;
    width: 50%;
}
.cm-description {
    font-size: 16px;
}
}

@media (max-width: 480px) {
 .achievement-item {
    width: 100%;
    height: 100%;
}
  @keyframes scrollSlide {
    100% {
      transform: translateX(calc(-160px * 12));
    }
  }
}
/* Wrapper hides overflow so the loop looks seamless */
.achievement-carousel {
  position: relative;
  overflow: hidden;
  /* Optional: soft edge fade */
  -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
}

/* The track holds all items in a single row */
.achievement-track1 {
  display: flex;
  align-items: center;
  gap: clamp(12px, 2vw, 1px);
  width: max-content;           /* allow content to be as wide as needed */
  will-change: transform;
  animation: achievement-scroll var(--scroll-duration, 40s) linear infinite;
}

/* Each slide is a fixed-width flex item (tweak as you like) */
.achievement-item {
  flex: 0 0 auto;
  width: 400px;
  aspect-ratio: 4 / 3;          /* keeps consistent tile shape; adjust if needed */
 
  overflow: hidden;
}

/* Images fill the tile neatly */
.achievement-item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;          /* smoother hover behavior on parent */
  user-select: none;
}
@media(min-width: 768px) and (max-width: 1199px){
.p-arrow{
    display: none;
}  
.process-box .content-box .process-box-title {
    font-size: 18px;
}
.process-box {
    margin-bottom: 70px;
    padding: 85px 25px 40px;
}
}


/* The magic: slide the first half out exactly as long as it takes to reveal the clone */
@keyframes achievement-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }  /* relies on items being duplicated in the same order */
}

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  .achievement-track1 { animation: none; transform: none; }
}


.achievement-carouselnew {
  width: 100%;
  overflow: hidden;
  position: relative;

}

.achievement-tracknew {
  display: inline-flex;
  gap: 0px;                 /* space between items */
  align-items: center;
  width: max-content;        /* shrink-to-fit content */
  animation: ach-scroll 60s linear infinite;
  will-change: transform;
}

.achievement-item {
  flex: 0 0 auto;
}

.achievement-item img {
  height: 100%;              /* tweak as needed */
  width: 100%;
  display: block;
  object-fit: contain;

}



/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  .achievement-tracknew { animation: none; }
}

/* The magic: move one full set width (50%) */
@keyframes ach-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (max-width: 767px) {
    .achievement-carousel.carausel1 .achievement-item {
        box-shadow: none;
        width: 150px !important;
        height: 150px;
        PADDING: 0 !important;
}

.achievement-tracknew .achievement-item {
    width: 400px !important;
    height: 400px !important;
}
.jo-reels-wrapper button.jo-slider-nav-btn.jo-reels-slider-next {
    right: 0;
}
.jo-reels-wrapper button.jo-slider-nav-btn.jo-reels-slider-prev {
    left: 0;
}
.jo-inner-videos-filter-nav button {
    padding: 6px 20px !important ;
}
}
@media (max-width: 768px) {
/* Target the exact element including bootstrap utility classes for max specificity */
  .jo-inner-videos-filter-nav.d-flex.justify-content-center.flex-wrap {
    display: flex !important;
    flex-wrap: nowrap !important;              /* force single row */
    justify-content: flex-start !important;    /* keep items left so they scroll */
    align-items: center !important;
    overflow-x: auto !important;               /* enable horizontal scroll */
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    scroll-behavior: smooth !important;
    gap: 10px !important;
    padding: 10px 6px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    touch-action: pan-x !important;            /* helps with touch gestures */
    -ms-overflow-style: none !important;       /* hide scrollbar on IE/Edge */
    scrollbar-width: none !important;          /* hide scrollbar on Firefox */
  }

  /* Hide webkit scrollbar */
  .jo-inner-videos-filter-nav.d-flex.justify-content-center.flex-wrap::-webkit-scrollbar {
    display: none !important;
    height: 0 !important;
  }

  /* Make each button resistant to shrinking and ensure inline-block behavior */
  .jo-inner-videos-filter-nav.d-flex.justify-content-center.flex-wrap > .tab-nav {
    flex: 0 0 auto !important;
    display: inline-block !important;
    white-space: nowrap !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 8px 14px !important;
    font-size: 14px !important;
    line-height: 1 !important;
    border-radius: 6px !important;
  }
}