/* Font Family */
@font-face {
  font-family: 'Noto Sans';
  src: url('../fonts/NotoSans-Regular.eot');
  src: local('Noto Sans Regular'), local('NotoSans-Regular'),
      url('../fonts/NotoSans-Regular.eot?#iefix') format('embedded-opentype'),
      url('../fonts/NotoSans-Regular.woff2') format('woff2'),
      url('../fonts/NotoSans-Regular.woff') format('woff'),
      url('../fonts/NotoSans-Regular.ttf') format('truetype'),
      url('../fonts/NotoSans-Regular.svg#NotoSans-Regular') format('svg');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Noto Sans';
  src: url('../fonts/NotoSans-Italic.eot');
  src: local('Noto Sans Italic'), local('NotoSans-Italic'),
      url('../fonts/NotoSans-Italic.eot?#iefix') format('embedded-opentype'),
      url('../fonts/NotoSans-Italic.woff2') format('woff2'),
      url('../fonts/NotoSans-Italic.woff') format('woff'),
      url('../fonts/NotoSans-Italic.ttf') format('truetype'),
      url('../fonts/NotoSans-Italic.svg#NotoSans-Italic') format('svg');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Noto Sans';
  src: url('../fonts/NotoSans-Bold.eot');
  src: local('Noto Sans Bold'), local('NotoSans-Bold'),
      url('../fonts/NotoSans-Bold.eot?#iefix') format('embedded-opentype'),
      url('../fonts/NotoSans-Bold.woff2') format('woff2'),
      url('../fonts/NotoSans-Bold.woff') format('woff'),
      url('../fonts/NotoSans-Bold.ttf') format('truetype'),
      url('../fonts/NotoSans-Bold.svg#NotoSans-Bold') format('svg');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Noto Sans';
  src: url('../fonts/NotoSans-BoldItalic.eot');
  src: local('Noto Sans Bold Italic'), local('NotoSans-BoldItalic'),
      url('../fonts/NotoSans-BoldItalic.eot?#iefix') format('embedded-opentype'),
      url('../fonts/NotoSans-BoldItalic.woff2') format('woff2'),
      url('../fonts/NotoSans-BoldItalic.woff') format('woff'),
      url('../fonts/NotoSans-BoldItalic.ttf') format('truetype'),
      url('../fonts/NotoSans-BoldItalic.svg#NotoSans-BoldItalic') format('svg');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('../fonts/Poppins-Light.eot');
  src: local('Poppins Light'), local('Poppins-Light'),
      url('../fonts/Poppins-Light.eot?#iefix') format('embedded-opentype'),
      url('../fonts/Poppins-Light.woff2') format('woff2'),
      url('../fonts/Poppins-Light.woff') format('woff'),
      url('../fonts/Poppins-Light.ttf') format('truetype'),
      url('../fonts/Poppins-Light.svg#Poppins-Light') format('svg');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('../fonts/Poppins-LightItalic.eot');
  src: local('Poppins Light Italic'), local('Poppins-LightItalic'),
      url('../fonts/Poppins-LightItalic.eot?#iefix') format('embedded-opentype'),
      url('../fonts/Poppins-LightItalic.woff2') format('woff2'),
      url('../fonts/Poppins-LightItalic.woff') format('woff'),
      url('../fonts/Poppins-LightItalic.ttf') format('truetype'),
      url('../fonts/Poppins-LightItalic.svg#Poppins-LightItalic') format('svg');
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('../fonts/Poppins-Regular.eot');
  src: local('Poppins Regular'), local('Poppins-Regular'),
      url('../fonts/Poppins-Regular.eot?#iefix') format('embedded-opentype'),
      url('../fonts/Poppins-Regular.woff2') format('woff2'),
      url('../fonts/Poppins-Regular.woff') format('woff'),
      url('../fonts/Poppins-Regular.ttf') format('truetype'),
      url('../fonts/Poppins-Regular.svg#Poppins-Regular') format('svg');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('../fonts/Poppins-Italic.eot');
  src: local('Poppins Italic'), local('Poppins-Italic'),
      url('../fonts/Poppins-Italic.eot?#iefix') format('embedded-opentype'),
      url('../fonts/Poppins-Italic.woff2') format('woff2'),
      url('../fonts/Poppins-Italic.woff') format('woff'),
      url('../fonts/Poppins-Italic.ttf') format('truetype'),
      url('../fonts/Poppins-Italic.svg#Poppins-Italic') format('svg');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('../fonts/Poppins-Medium.eot');
  src: local('Poppins Medium'), local('Poppins-Medium'),
      url('../fonts/Poppins-Medium.eot?#iefix') format('embedded-opentype'),
      url('../fonts/Poppins-Medium.woff2') format('woff2'),
      url('../fonts/Poppins-Medium.woff') format('woff'),
      url('../fonts/Poppins-Medium.ttf') format('truetype'),
      url('../fonts/Poppins-Medium.svg#Poppins-Medium') format('svg');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('../fonts/Poppins-MediumItalic.eot');
  src: local('Poppins Medium Italic'), local('Poppins-MediumItalic'),
      url('../fonts/Poppins-MediumItalic.eot?#iefix') format('embedded-opentype'),
      url('../fonts/Poppins-MediumItalic.woff2') format('woff2'),
      url('../fonts/Poppins-MediumItalic.woff') format('woff'),
      url('../fonts/Poppins-MediumItalic.ttf') format('truetype'),
      url('../fonts/Poppins-MediumItalic.svg#Poppins-MediumItalic') format('svg');
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('../fonts/Poppins-SemiBold.eot');
  src: local('Poppins SemiBold'), local('Poppins-SemiBold'),
      url('../fonts/Poppins-SemiBold.eot?#iefix') format('embedded-opentype'),
      url('../fonts/Poppins-SemiBold.woff2') format('woff2'),
      url('../fonts/Poppins-SemiBold.woff') format('woff'),
      url('../fonts/Poppins-SemiBold.ttf') format('truetype'),
      url('../fonts/Poppins-SemiBold.svg#Poppins-SemiBold') format('svg');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('../fonts/Poppins-SemiBoldItalic.eot');
  src: local('Poppins SemiBold Italic'), local('Poppins-SemiBoldItalic'),
      url('../fonts/Poppins-SemiBoldItalic.eot?#iefix') format('embedded-opentype'),
      url('../fonts/Poppins-SemiBoldItalic.woff2') format('woff2'),
      url('../fonts/Poppins-SemiBoldItalic.woff') format('woff'),
      url('../fonts/Poppins-SemiBoldItalic.ttf') format('truetype'),
      url('../fonts/Poppins-SemiBoldItalic.svg#Poppins-SemiBoldItalic') format('svg');
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('../fonts/Poppins-Bold.eot');
  src: local('Poppins Bold'), local('Poppins-Bold'),
      url('../fonts/Poppins-Bold.eot?#iefix') format('embedded-opentype'),
      url('../fonts/Poppins-Bold.woff2') format('woff2'),
      url('../fonts/Poppins-Bold.woff') format('woff'),
      url('../fonts/Poppins-Bold.ttf') format('truetype'),
      url('../fonts/Poppins-Bold.svg#Poppins-Bold') format('svg');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('../fonts/Poppins-BoldItalic.eot');
  src: local('Poppins Bold Italic'), local('Poppins-BoldItalic'),
      url('../fonts/Poppins-BoldItalic.eot?#iefix') format('embedded-opentype'),
      url('../fonts/Poppins-BoldItalic.woff2') format('woff2'),
      url('../fonts/Poppins-BoldItalic.woff') format('woff'),
      url('../fonts/Poppins-BoldItalic.ttf') format('truetype'),
      url('../fonts/Poppins-BoldItalic.svg#Poppins-BoldItalic') format('svg');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('../fonts/Poppins-ExtraBold.eot');
  src: local('Poppins ExtraBold'), local('Poppins-ExtraBold'),
      url('../fonts/Poppins-ExtraBold.eot?#iefix') format('embedded-opentype'),
      url('../fonts/Poppins-ExtraBold.woff2') format('woff2'),
      url('../fonts/Poppins-ExtraBold.woff') format('woff'),
      url('../fonts/Poppins-ExtraBold.ttf') format('truetype'),
      url('../fonts/Poppins-ExtraBold.svg#Poppins-ExtraBold') format('svg');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
:root{
  --mt-primary-light: #1cabdf;
  --mt-blue: #127599;
  --mt-orange: #f07a5a;
  --mt-light-orange: #ff8e6e;
  --mt-yellow: #f5c577;
  --mt-dark-yellow: #fca61d;
  --mt-green: #1aa294;
  --mt-dark-green: #0a8175;
  --mt-light-green: #1ad8c5;
  --mt-purple: #2c1a32;
  --mt-purple-dark: #1c0f21;
  --mt-primary-dark-rgb: 0, 60, 100;
  --mt-blue-rgb: 18, 117, 153;
  --mt-primary-light-rgb: 28, 171, 223;
  --mt-light-orange-rgb: 255, 142, 110;
  --mt-yellow-rgb: 245, 197, 119;
  --mt-green-rgb: 26, 162, 148;
  --mt-light-green-rgb: 26, 216, 197;
  --bs-font-sans-serif: 'Noto Sans', sans-serif;
}
html {
  scroll-behavior: auto;
  box-sizing: border-box;
  scrollbar-width: none;
  -ms-overflow-style: -ms-autohiding-scrollbar;
}
::-webkit-scrollbar {
  width: 14px;
}
::-webkit-scrollbar-track {
  background-color: #f3f3f3;
  -webkit-border-radius: 10px;
  border-radius: 10px;
}
::-webkit-scrollbar-thumb {
  -webkit-border-radius: 10px;
  border-radius: 10px;
  background: #6d6d6d;
  border: 3px solid #f3f3f3;
}
p {
  margin-bottom: 1rem;
}
a {
  color: #8b3dff;
  transition: cubic-bezier(0.55, 0.085, 0.68, 0.53) 0.2s;
}
a:hover {
  color: #5c03e0;
}

.feature-icon .bi{
  font-size: clamp(3.525rem, 7.7225vw, 4.0525rem);
  text-align: center;
}

a:hover .feature-icon .bi {
  color: #D9B677;
}

.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
}
h2 {
  margin-bottom: 1.5rem;
}
.h3, h3 {
  font-size: calc(1.115em + 0.25vw) !important;
}
.h5, h5 {
  font-size: clamp(0.898rem, 2.215vw, 1.1325rem);
}
@media (min-width: 1601px) {
  :root {
    --bs-body-font-size: calc(1em + 0.11925vw);
  }
}
@media (min-width: 1200px) {
  .container-xxl {
    max-width: 90%;
  }
}
ul, ol {
  padding-left: clamp(1.8rem, 3.5vw, 2.25rem);
}
ol {
  list-style: none;
  counter-reset: counter-leading-zero 0;
}
ol li {
  counter-increment: counter-leading-zero 1;
  position: relative;
  margin-bottom: 0.5rem;
}
ol li::before {
  content: '0' counter(counter-leading-zero)". ";
  color: var(--bs-gray-400);
  font-weight: 700;
  font-size: 75%;
  position: absolute;
  left: calc(clamp(1.65rem, 2vw, 2rem) * -1);
  top: 0.175rem;
}
ol li:nth-child(n+10)::before {
  content: "" counter(counter-leading-zero)". ";
}
img, svg {
  width: 100%;
  max-width: 100%;
}
section {
  position: relative;
  overflow: hidden;
}
small {
  font-size: calc(var(--bs-body-font-size) * 0.78);
}

/*========== Preloader ==========*/
#preloader {
  position: fixed;
  overflow: hidden;
  width: 100%;
  height: 100%;
  -webkit-transition: height 0.8s ease;
  transition: height 0.8s ease;
  background: var(--mt-purple-dark);
  opacity: 1;
  z-index: 2500;
}
#preloader .logo {
  position: absolute;
  top: 50%;
  left: 50%;
  width: clamp(5.125rem, 16.225vw, 7.575rem);
  -webkit-transform: translate(-50%, -80%);
  -ms-transform: translate(-50%, -80%);
  transform: translate(-50%, -80%);
  animation-name: slideDown;
  -webkit-animation-name: slideDown;
  animation-duration: 1s;
  -webkit-animation-duration: 1s;
  animation-timing-function: ease;
  -webkit-animation-timing-function: ease;
  visibility: visible !important;
}
.loaded #preloader {
  height: 0;
}
.seq-preloader {
  position: absolute;
  top: 50%;
  left: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(2.5rem, 6.925vw, 3.162rem);
  -webkit-transform: translate(-50%, 5.5vh);
  -ms-transform: translate(-50%, 5.5vh);
  transform: translate(-50%, 5.5vh);
  animation-name: circleDown;
  -webkit-animation-name: circleDown;
  animation-duration: 1s;
  -webkit-animation-duration: 1s;
  animation-timing-function: ease;
  -webkit-animation-timing-function: ease;
  visibility: visible !important;
}
.seq-preloader.seq-preloaded {
  opacity: 0;
  visibility: hidden;
  -webkit-transition: visibility 0s .5s, opacity .5s;
  -ms-transition: visibility 0s .5s, opacity .5s;
  transition: visibility 0s .5s, opacity .5s;
}
.seq-preload-indicator {
  overflow: visible;
  position: relative;
}
.seq-preload-circle {
  display: inline-block;
  height: 14px;
  width: 14px;
  fill: #fff;
  opacity: 0;
  -webkit-animation: seq-preloader 1.25s infinite;
  -ms-animation: seq-preloader 1.25s infinite;
  animation: seq-preloader 1.25s infinite;
}
.seq-preload-circle-2 {
  -webkit-animation-delay: .15s;
  -ms-animation-delay: .15s;
  animation-delay: .15s;
}
.seq-preload-circle-3 {
  -webkit-animation-delay: .3s;
  -ms-animation-delay: .3s;
  animation-delay: .3s;
}
.seq-preload-indicator-fallback {
  width: 42px;
  overflow: visible;
}
.seq-preload-indicator-fallback .seq-preload-circle {
  width: 8px;
  height: 8px;
  background-color: #fff;
  border-radius: 100%;
  opacity: 1;
  display: inline-block;
  vertical-align: middle;
}
.seq-preload-indicator-fallback .seq-preload-circle-2 {
  margin-left: 3px;
  margin-right: 3px;
  width: 12px;
  height: 12px;
}
.seq-preload-indicator-fallback .seq-preload-circle-3 {
  width: 16px;
  height: 16px;
}
@keyframes seq-preloader {
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@-webkit-keyframes seq-preloader {
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes slideDown {
  0% {
    transform: translate(-50%, 100vh);
  }
  100% {
    transform: translate(-50%, -80%);
  }
}
@-webkit-keyframes slideDown {
  0% {
    -webkit-transform: translate(-50%, 100vh);
  }
  100% {
    -webkit-transform: translate(-50%, -80%);
  }
}
@keyframes circleDown {
  0% {
    transform: translate(-50%, 90vh);
  }
  100% {
    transform: translate(-50%, 5.5vh);
  }
}
@-webkit-keyframes circleDown {
  0% {
    -webkit-transform: translate(-50%, 90vh);
  }
  100% {
    -webkit-transform: translate(-50%, 5.5vh);
  }
}

/*========== Utility ==========*/
.fix {
  overflow: hidden;
}
.section-xl {
  padding: clamp(4.526rem, 12.235vw, 9.825rem) 0;
}
.section-pt-xl {
  padding-top: clamp(4.526rem, 12.235vw, 9.825rem);
}
.section-pb-xl {
  padding-bottom: clamp(4.526rem, 12.235vw, 9.825rem);
}
.section-md {
  padding: clamp(3.526rem, 7.235vw, 5.825rem) 0;
}
.section-pt-md {
  padding-top: clamp(3.526rem, 7.235vw, 5.825rem);
}
.section-pb-md {
  padding-bottom: clamp(3.526rem, 7.235vw, 5.825rem);
}
.bg-primary-subtle {
  background-color: rgba(var(--mt-primary-light-rgb), 0.1);
}
.bg-primary-subtle-border {
  background-color: rgba(var(--mt-primary-light-rgb), 0.1);
  border: 1px solid rgba(var(--mt-primary-light-rgb), 0.5);
}
.text-primary-light {
  color: var(--mt-primary-light);
}
.bg-overlay-dark {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.65);
  z-index: -1;
}
.bg-overlay-primary {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(var(--mt-primary-dark-rgb), 0.7);
  backdrop-filter: grayscale(1);
  z-index: -1;
}
.bg-hover-dark {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0);
  z-index: 1;
  transition: cubic-bezier(0.25, 0.46, 0.45, 0.94) 300ms;
}
.bg-hover-dark:hover {
  background-color: rgba(0, 0, 0, 0.14);
}
.text-white h1,
.text-white h2,
.text-white h3,
.text-white h4,
.text-white h5,
.text-white h6 {
  color: #fff !important;
}
.card,
.card-body {
  height: 100%;
  overflow: hidden;
}
.card-image-hover {
  position: relative;
  background-color: transparent;
  padding-top: 125%;
  overflow: hidden;
  border: 0;
}
.card-image-hover::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.15) 0%, rgba(0, 0, 0, 0.65) 60%, rgba(0, 0, 0, 0.85) 100%);
}
.card-image-hover img {
  position: absolute;
  object-fit: cover;
  object-position: center;
  top: 50%;
  transform: translateY(-50%) scale(1);
  height: 100%;
  width: 100%;
  z-index: -1;
  transition: cubic-bezier(0.455, 0.03, 0.515, 0.955) 0.3s;
}
.card-image-hover:hover img {
  transform: translateY(-50%) scale(1.05);
}
.card-image-hover:hover::before {
  background-image: linear-gradient(to bottom, rgba(var(--mt-blue-rgb),1) 0%, rgba(var(--mt-blue-rgb),1) 100%);
  transition: cubic-bezier(0.455, 0.03, 0.515, 0.955) 0.3s;
}
.card-image-hover .card-body {
  position: absolute;
  display: flex;
  flex-direction: column;
  width: 100%;
  right: 0;
  left: 0;
  bottom: 0;
  color: #fff;
  font-size: 86%;
  height: auto;
  z-index: 5;
  transition: all ease-in-out 300ms;
}
.card-image-hover .card-body h5 {
  color: var(--bs-card-title-color);
  margin-bottom: var(--bs-card-title-spacer-y);
  font-size: 109%;
  font-weight: 600;
  transition: all ease-in-out 300ms;
}
.card-image-hover .card-body p {
  font-size: 96%;
}
.card-image-hover .card-body p,
.card-image-hover .card-body small {
  display: none;
  transition: cubic-bezier(0.455, 0.03, 0.515, 0.955) 0.3s;
}
.card-image-hover:hover .card-body p,
.card-image-hover:hover .card-body small {
  display: block;
  animation-name: slideUp;
  animation-duration: 400ms;
}
@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.icon-block-green {
  color: var(--mt-green);
  background-color: rgba(var(--mt-light-green-rgb), 0.1);
  border: var(--bs-border-width) solid rgba(var(--mt-green-rgb), 0.1);
  font-size: calc(var(--bs-body-font-size)*1.25);
}
.icon-leading-start {
  display: flex;
  flex-direction: row;
}
.icon-leading-start h5 {
  margin-bottom: 0.25rem;
}
.icon-leading-start h4 {
  color: var(--bs-heading-color) !important;
  margin-bottom: 0.25rem !important;
}
.icon-leading-start p {
  margin-bottom: 0 !important;
}
.counter-item {
  text-align: center;
}
.counter-item .counter-block .counter {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: clamp(1.667rem, 3.825vw, 2.125rem);
  line-height: clamp(7.386rem, 16.965vw, 9.489rem);
  letter-spacing: -0.025em;
  color: var(--mt-green);
}
.counter-item .counter-block {
  display: flex;
  align-items: center;
  justify-content: center;
  height: clamp(7.386rem, 16.965vw, 9.489rem);
  width: clamp(7.386rem, 16.965vw, 9.489rem);
  background-color: var(--bs-body-bg);
  border-radius: 50%;
  border: clamp(0.859rem, 1.9525vw, 1.075rem) solid rgba(var(--mt-primary-light-rgb), 0.14);
  margin: auto auto 0.75rem;
}
.counter-item .counter-block span {
  color: var(--mt-green);
  font-weight: 400;
  margin-left: 0.25rem;
  margin-bottom: 0;
}
.counter-item:nth-child(2) .counter-block .counter,
.counter-item:nth-child(2) .counter-block span {
  color: var(--mt-yellow);
}
.counter-item:nth-child(3) .counter-block .counter,
.counter-item:nth-child(3) .counter-block span {
  color: var(--mt-orange);
}
.btn-scroll-top:hover {
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
}
.btn-purchase {
  background-color: var(--mt-green);
  color: #fff;
}
.btn-purchase:hover,
.btn-purchase:focus {
  background-color: var(--mt-dark-green);
}
.ratio {
  position:relative;
  width:100%;
  border: 0;
}
.ratio::before {
  display:block;
  padding-top:var(--mm-aspect-ratio);
  content:""
}
.ratio>* {
  object-fit: cover;
  object-position: center;
}
.ratio-1x1 {
  --mm-aspect-ratio: 100%
}
.ratio-4x3 {
  --mm-aspect-ratio: 75%
}
.ratio-3x4 {
  --mm-aspect-ratio: 125%
}
.ratio-16x9 {
  --mm-aspect-ratio: 56.25%
}
.ratio-21x9 {
  --mm-aspect-ratio: 42.8571428571%
}
.ratio-4x1 {
  --mm-aspect-ratio: 25%
}
.ratio-3x1 {
  --mm-aspect-ratio: 33.3333333333%
}
.icon-link {
  gap: 0.5rem;
  font-size: 90%;
  font-weight: 500;
  color: rgba(var(--bs-link-color-rgb), var(--bs-link-opacity, 1));
}
.icon-link:hover,
.icon-link:focus {
  color: rgba(var(--bs-link-color-rgb), var(--bs-link-opacity, 0.72));
  outline: none;
  outline-width: 0;
}
.pagination {
  font-family: 'Poppins', sans-serif;
  --bs-pagination-font-size: 1em;
  border: 0;
  border-radius: 0;
  gap: 0.25rem;
}
.page-item .page-link {
  border: 0;
  border-radius: 0.5rem;
}
.video-box {
  position: relative;
  border-radius: 1rem;
  overflow: hidden;
}
.video-box::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background-color: #000;
  opacity: 0;
  transition: cubic-bezier(0.455, 0.83, 0.515, 0.955) 0.3s;
  z-index: 1;
}
.gslide-video .gvideo-wrapper {
  padding: 0 1.25rem;
}
.plyr__video-wrapper {
  border: 0;
}
@media (min-width: 1200px) {
  .gslide-video {
    max-width: 75vw !important;
  }
  .plyr--full-ui.plyr--video .plyr__control--overlaid {
    width: 5rem;
    height: 5rem;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
.video-box:hover:before {
  opacity: 0.25;
}
.video-box .play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  background-color: #fff;
  font-size: clamp(1.5rem, 5vw, 2.5rem);
  color: var(--mt-orange);
  height: clamp(3rem, 12vw, 6rem);
  width: clamp(3rem, 12vw, 6rem);
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(1);
  z-index: 5;
  transition: cubic-bezier(0.455, 0.83, 0.515, 0.955) 0.3s;
}
.video-box:hover .play-btn {
  transform: translate(-50%, -50%) scale(1.25);
}

.header-primary-bg {

  height: clamp(4.226rem, 10.235vw, 8.825rem);

  background-color: var(--bs-primary);

}

.header-green-bg {

  height: clamp(4.226rem, 10.235vw, 8.825rem);

  background-color: var(--mt-green);

}

.header-yellow-bg {
  height: clamp(4.226rem, 10.235vw, 8.825rem);
  background-color: var(--mt-dark-yellow);
}

.header-orange-bg {
  height: clamp(4.226rem, 10.235vw, 8.825rem);
  background-color: var(--mt-orange);
}

.header-dark-bg {
  height: clamp(4.226rem, 10.235vw, 8.825rem);
  background-color: var(--mt-purple);
}
.modal {
  backdrop-filter: blur(12px);
}
.modal-backdrop {
  --bs-backdrop-opacity: 0.75;
}
.modal-body button {
  font-family: 'Poppins', sans-serif;
  font-size: calc(var(--bs-body-font-size) * 0.95);
  font-weight: 600;
  margin-bottom: 0;
}
.modal-header .btn-close {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
}
.modal-header .btn-close:focus {
  border: 0;
  box-shadow: none;
  outline: 0;
}
.badge {
  font-family: 'Poppins', sans-serif;
  font-size: calc(var(--bs-body-font-size) * 0.78);
  font-weight: 600;
  line-height: 1;
  border-width: 1px;
  border-style: solid;
  text-transform: uppercase;
  letter-spacing: 0.1075em;
  border-radius: 2rem;
  padding: 0.475rem 0.75rem 0.425rem;
  margin-bottom: 1rem;
}
.badge-info {
  --bs-badge-color: var(--mt-primary-light);
  border-color: var(--mt-primary-light);
}
.badge-info-green {
  --bs-badge-color: var(--mt-green);
  border-color: var(--mt-green);
}
.badge-info-yellow {
  --bs-badge-color: var(--mt-dark-yellow);
  border-color: var(--mt-dark-yellow);
}
.badge-info-orange {
  --bs-badge-color: var(--mt-orange);
  border-color: var(--mt-orange);
}
.form-control:focus,
.form-select:focus {
  background-color: var(--bs-body-bg);
  border-color: var(--bs-border-color);
  box-shadow: none;
  color: var(--bs-body-color);
  outline: 0;
}

/*========== Navbar ==========*/
@media (max-width: 576px) {
  .offcanvas.show {
    width: 100%;
  }
}
.navbar .navbar-brand {
  width: clamp(6.778rem, 19.256vw, 12.218rem);
}
.navbar-stick .navbar-brand {
  width: clamp(6.778rem, 19.256vw, 8.218rem);
}
.navbar-dark .navbar-brand .inner {
  display: none;
}
.navbar-dark .navbar-brand {
  filter: invert(1);
}
.navbar-stick .navbar-brand .outer-yellow,
.offcanvas .navbar-brand .outer-yellow {
  fill:#f5c577;
}
.navbar-stick .navbar-brand .inner-white,
.offcanvas .navbar-brand .inner-white {
  fill:#fff;
}
.navbar-stick .navbar-brand .outer-green,
.offcanvas .navbar-brand .outer-green {
  fill:#1aa294;
}
.navbar-stick .navbar-brand .outer-orange,
.offcanvas .navbar-brand .outer-orange {
  fill:#f07a5a;
}
.navbar-stick .navbar-brand .logo-text,
.offcanvas .navbar-brand .logo-text {
  fill:#2f1834;
}
.navbar-dark .offcanvas .navbar-brand {
  filter: invert(0);
}
.navbar-dark .offcanvas .navbar-brand .inner {
  display: block;
}
.navbar-stick .navbar-brand {
  display: block;
}
.navbar-unstick .navbar-brand {
  display: none;
}
.navbar.navbar-stick .navbar-nav .nav-item.active .nav-link {
  color: var(--bs-primary) !important;
}
@media (min-width: 1200px) {
  .navbar-dark .navbar-nav .nav-item .nav-link {
    padding: 3.5rem 1rem;
  }
  .navbar-stick {
    padding: 0.5rem 0;
  }
  .navbar-stick .navbar-nav .nav-item .nav-link {
    padding: 1.25rem 1rem;
  }
  .navbar .navbar-nav .dropdown > .dropdown-menu {
    transform: translate(-50%, 0.5rem);
  }
  .navbar .dropdown-menu {
    background: transparent;
    border-radius: 0;
    box-shadow: none;
  }
  .navbar .dropdown-menu::before {
    content: '';
    position: absolute;
    background-color: var(--bs-dropdown-bg);
    top: 0.25rem;
    left: 0;
    right: 0;
    bottom: 0;
    border: 0;
    border-radius: 0.5rem;
    box-shadow: var(--bs-box-shadow);
    z-index: -1;
  }
  .navbar .dropdown-menu .dropdown-submenu.dropend .dropdown-menu::before {
    top: 0;
  }
}
.navbar .navbar-nav .dropdown > .dropdown-menu .dropdown-item.active {
  color: var(--bs-primary);
}
.dropdown-fullwidth .dropdown-menu .feature-program ul {
  padding-left: 0;
}
@media (min-width: 1200px) {
  .dropdown-fullwidth .dropdown-menu .feature-program ul {
    columns: 2;
    -webkit-columns: 2;
    -moz-columns: 2;
    margin-bottom: auto;
  }
}
.dropdown-fullwidth .dropdown-menu li {
  list-style: none;
}
.dropdown-fullwidth .dropdown-menu .dropdown-item {
  position: relative;
  display: inline-flex;
  align-items: flex-start;
  text-wrap: wrap;
  padding: 0.75rem 0;
  border-radius: 0.25rem;
  transition: cubic-bezier(0.455, 0.03, 0.515, 0.955) .3s;
}
.dropdown-fullwidth .dropdown-menu .feature-program {
  /* display: flex; */
  flex-direction: column;
}
.dropdown-fullwidth .dropdown-menu .feature-program .dropdown-item {
  padding-left: clamp(2.152rem, 4.422vw, 2.589rem);
}
.dropdown-fullwidth .dropdown-menu .feature-program .dropdown-item::before {
  content: "\f270";
  position: absolute;
  font-family: bootstrap-icons!important;
  font-size: clamp(1.3615rem, 2.752vw, 1.756rem);
  color: var(--mt-orange);
  top: 0.75rem;
  left: 0;
}
.dropdown-fullwidth .dropdown-menu .dropdown-item i {
  font-size: clamp(1.215rem, 2.755vw, 1.756rem);
  color: var(--mt-orange);
  margin-right: 0.75rem;
}
.dropdown-fullwidth .dropdown-menu .dropdown-item h5 {
  font-size: 96%;
  line-height: 1.1;
  margin-top: 0.20315rem;
  margin-bottom: 0;
  transition: cubic-bezier(0.455, 0.03, 0.515, 0.955) .3s;
}
.dropdown-fullwidth .dropdown-menu .dropdown-item:hover h5 {
  color: var(--mt-primary-light);
}
.dropdown-fullwidth .title-block-image {
  position: relative;
  background-color: var(--mt-yellow);
  border-radius: 0.5rem;
  height: 100%;
}
.dropdown-fullwidth .title-block-image h2 {
  font-size: clamp(2.025rem, 2.45622vw, 2.62595rem);
  color: #1e293b;
  line-height: 1;
  position: absolute;
  left: 2rem;
  top: 2rem;
  max-width: 100%;
}
.dropdown-fullwidth .title-block-image .img-container {
  padding-top: 70%;
}
.dropdown-fullwidth .title-block-image img {
  position: absolute;
  object-fit: cover;
  width: 100%;
  object-position: right bottom;
  bottom: 0;
}
.navbar .btn-submit {
  background-color: #fff;
  font-size: clamp(1.0025rem, 2.1556vw, 1.00125rem);
  color: #334155;
  border-radius: 50px;
}
.navbar .btn-submit:hover {
  background-color: var(--mt-purple);
  color: #fff;
}
.navbar-stick .btn-submit {
  background-color: var(--mt-purple);
  color: #fff;
}
.navbar-stick .btn-submit:hover {
  background-color: #f1f5f9;
  color: #334155;
}
@media (max-width: 1199px) {
  .navbar .btn-submit {
    background-color: var(--mt-purple);
    color: #fff;
  }
.navbar .btn-submit:hover {
  background-color: #f1f5f9;
  color: #334155;
}
}
@media (min-width: 1200px) {
  .navbar-dark .btn-icon {
    background-color: transparent;
    color: rgba(255, 255, 255, 0.5);
    border-color: rgba(255, 255, 255, 0.5);
    font-size: 1rem;
    margin: 1.5rem 0;
  }
  .navbar-dark .btn-icon:hover {
    color: rgba(255, 255, 255, 1);
    border-color: rgba(255, 255, 255, 1);
  }
}
.theme-toggle .dropdown-menu {
  min-width: unset;
}
.navbar-stick .btn-icon {
  margin: 0.75rem 0;
}
.navbar .navbar-nav .dropdown > .about-list {
  min-width: unset;
}
.navbar .navbar-nav .dropdown > .about-list .dropdown-item i {
  font-size: 120%;
  margin-right: 0.75rem;
}
.navbar .navbar-nav .nav-item .nav-link[aria-current="page"] {
  color: var(--bs-primary);
}
.dropdown-item[aria-current="page"],
.dropdown-item[aria-current="page"] > .nav-item {
  color: var(--mt-primary-light);
}
.navbar .navbar-nav .feature-program .active a h5 {
  color: var(--bs-primary) !important;
}
.light-header .navbar-toggler {
  border-color: var(--bs-gray-800);
  color: var(--bs-gray-800);
}
.icon-list ul {
  list-style: none;
  padding-left: 0;
  --bs-gutter-x: 8rem;
  --bs-gutter-y: 4rem;
  display: flex;
  flex-wrap: wrap;
  margin-left: calc(var(--bs-gutter-x) * -0.5);
  margin-right: calc(var(--bs-gutter-x) * -0.5);
  margin-top: calc(var(--bs-gutter-y) * -1);
  padding-top: 3rem;
  margin-bottom: 0;
}
.icon-list ul > * {
  flex-shrink: 0;
  margin-top: var(--bs-gutter-y);
  max-width: 100%;
  padding-left: calc(var(--bs-gutter-x) * 0.5);
  padding-right: calc(var(--bs-gutter-x) * 0.5);
  width: 100%;
}
.icon-list ul li {
  padding-top: 5.5rem;
  margin-bottom: 0 !important;
}
.icon-list ul li::before {
  content: '\F28B' !important;
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: bootstrap-icons;
  font-size: 2.25em;
  text-align: center;
  top: 0 !important;
  left: calc(var(--bs-gutter-x) * 0.5) !important;
  color: var(--mt-orange) !important;
  background-color: rgba(var(--mt-light-orange-rgb),0.1);
  border-radius: 0.5rem;
  padding: 0.75rem;
  height: 4.25rem;
  width: 4.25rem;
}
.icon-list ul li h4 {
  color: var(--bs-heading-color);
  margin-bottom: 0.25rem;
}
.border-item {
  border-right: 1px solid var(--bs-border-color);
}
.border-item:last-child {
  border-right: 0;
}
.light-header .navbar-dark .navbar-brand {
  filter: unset;
}
.light-header .logo-text {
  fill: #2f1834;
}
.light-header .navbar-brand .outer-yellow {
  fill: #f5c577;
}
.light-header .navbar-brand .inner-white {
  fill: #fff;
}
.light-header .navbar-brand .outer-green {
  fill: var(--mt-green);
}
.light-header .navbar-brand .outer-orange {
  fill: var(--mt-orange);
}
.light-header .navbar-dark .navbar-brand .inner {
  display: block;
}
.light-header .navbar .btn-submit {
  background-color: var(--bs-primary);
  color: #fff;
}
.light-header .navbar .btn-submit:hover {
  background-color: var(--mt-purple-dark);
}
.gslide-image img {
  max-width: 97%;
  border-radius: 0.5rem;
}
.glightbox-clean .gslide-media {
  -webkit-box-shadow: none;
  box-shadow: none;
}
@media (min-width: 1200px) {
  .gslide-image img {
    height: 77vh;
    width: auto;
}
}
@media (min-width: 769px) {
  .gslide-image img {
      max-height: 77vh;
  }
  .goverlay {
    background: rgba(0, 0, 0, .87);
    backdrop-filter: blur(16px);
  }
}

/*========== Button ==========*/
.btn {
  font-family: 'Poppins', sans-serif;
}
.btn:focus {
  border: 0;
  box-shadow: none;
  outline: 0;
}
.btn-primary-lg {
  background-image: linear-gradient(to right,#fda23b,#fa6036,#fda23b);
  background-size: 200%;
  --bs-btn-padding-y: 1.25rem;
  --bs-btn-padding-x: 2.5rem;
  border: 0;
  color: #fff;
  border-radius: 50px;
  background-position: left;
  transition: cubic-bezier(0.25, 0.46, 0.45, 0.94) .6s;
}
.btn-primary-lg:hover {
  color: #fff;
  background-position: right;
}
.btn-secondary-lg {
  background-image: linear-gradient(to right,var(--mt-yellow),var(--mt-dark-yellow),var(--mt-yellow));
  background-size: 200%;
  --bs-btn-padding-y: 1.25rem;
  --bs-btn-padding-x: 2.5rem;
  border: 0;
  color: #fff;
  border-radius: 50px;
  background-position: left;
  transition: cubic-bezier(0.25, 0.46, 0.45, 0.94) .6s;
}
@media (max-width: 575px) {
  .btn-secondary-lg {
    --bs-btn-padding-y: 0.75rem;
    --bs-btn-padding-x: 1.5rem;
  }
}
.btn-secondary-lg:hover {
  color: #fff;
  background-position: right;
}
.invalid-feedback {
  font-size: 75%;
}

/*========== Front Page ==========*/
.mt-home-hero {
  position: relative;
  min-height: 64vw;
  padding-top: clamp(7.125rem, 19.725vw, 12.986rem);
  padding-bottom: 3rem;
  margin-top: -8.825rem;
  /* clamp(4.226rem, 10.235vw, 8.825rem); */
}
.mt-home-hero::before {
  position: absolute;
  content: '';
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1920 945'%3E%3Cpath fill='%232a88aa' d='M1920.5,298.2c-79.5-59.6-218.7-119.8-275.1-132.8c-94.5-21.7-193.8-13.9-286.3,12.5c-95.5,27.3-320.2,155.3-462.1,308.9C822.1,568,741.2,644.7,657.2,717.2c-94.5,81.5-204.9,179-331.5,211.9C218.5,957,104.3,948.7,4.8,900.4c-1.3-0.6-2.6-1.4-4-1.9c-0.6-0.2,0-827.3,0-898.5h1919.7C1920.5,0,1920.5,296.1,1920.5,298.2z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
  height: 86%;
  top: 0;
  left: 0;
  right: 0;
  z-index: 0;
}
.mt-home-hero::after {
  position: absolute;
  content: '';
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1920 489'%3E%3Cpath fill='%23ffffff' d='M1920,489c0-78.7,0-324.2,0-324.1c0-4.4-23.8-17-27.4-19.4c-23.2-15.2-47.5-27.4-72.5-39.8c-53.3-26.5-104.7-51.2-164-67.7c-116-32.2-242.6-38.3-361.8-15.1c-255.7,49.8-437.5,217.6-657,325.4c-52.2,25.6-106,49-160.6,70.8c-46.7,18.6-96.7,31.1-147.8,37.5c-51.1,6.4-103.3,6.7-154.5,0.8C121,451.3,68.8,437.3,20,418.4c-6.7-2.6-13.3-5.3-19.6-8.4c-0.4-0.2-0.4,48.5-0.2,78.9H1920z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
  height: 489px;
  left: 0;
  right: 0;
  bottom: -4px;
  z-index: 0;
}
.mt-home-hero .swiper-slide {
  text-align: center;
  margin-bottom: 3rem;
  display: block;
}
@media (min-width: 1200px) {
  .mt-home-hero .swiper-slide {
    text-align: left;
    margin-bottom: 0;
    display: block;
  }
}
@media (max-width: 1199px) {
  .mt-home-hero .hero-caption {
    display: flex;
    align-items: center;
    min-height: 44vh;
    height: auto !important;
  }
  .mt-home-hero .swiper-slide {
    margin-bottom: 0;
  }
}
.mt-home-hero h1 {
  color: #fff;
  margin-bottom: 1.25rem;
}
.mt-home-hero p {
  font-size: clamp(1.025rem, 2.8556vw, 1.466rem);
  color: #fff;
  margin-bottom: 0;
}
@media (min-width: 1200px) {
  .mt-home-hero p {
    font-size: calc(1rem + 0.225vw);
  }
}
@media (min-width: 1820px) {
  .mt-home-hero p {
    font-size: calc(1rem + 0.325vw);
  }
}
.mt-home-hero .swiper-tabs {
  position: relative;
  z-index: 5;
}
.mt-home-hero .swiper-tab {
  position: absolute;
  display: flex;
  flex-direction: column;
  top: 0;
  left: 0;
  width: 100%;
  opacity: 0;
  visibility: hidden;
}
.mt-home-hero .swiper-tab.active {
  position: relative;
  opacity: 1;
  visibility: visible;
}
.mt-home-hero .swiper-tab .img-container {
  position: relative;
  background-color: #fff;
  padding-top: 100%;
  border-radius: clamp(1.9952rem, 6.1986vw, 2.515rem);
  overflow: hidden;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.23);
}
.mt-home-hero .swiper-tab .img-container img {
  object-fit: cover;
  object-position: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate3d(-50%, -50%, 0) scale(1.1);
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.6s;
}
.mt-home-hero .swiper-tab.active .img-container img {
  transform: translate3d(-50%, -50%, 0) scale(1);
  opacity: 1;
}
.fp-search .input-group {
  border: 0;
  border-radius: 3rem;
}
.fp-search .input-group .btn-search {
  background-color: var(--bs-gray-200);
  color: var(--bs-gray-700);
  border: 0;
  padding: 0.5rem 1.5rem;
}
.fp-search .input-group .btn-search:hover {
  background-color: var(--bs-gray-300);
}
.fp-search .input-group {
  --bs-border-radius: 4rem;
  border: 1px solid var(--bs-gray-300);
}
.fp-search .form-control {
  border: 0;
  padding: clamp(0.5rem, 4.512vw, 0.725rem) 1.25rem;
  box-shadow: none;
}
.fp-search .form-control:focus {
  box-shadow: none;
  outline: none;
}
.sc-clients h5,
.sc-partners h5 {
  text-transform: uppercase;
  letter-spacing: 0.25em;
  font-weight: 600;
}
.mitra-slide .swiper-slide,
.logo-slide .swiper-slide {
  margin: auto;
}
.logo-slide .swiper-slide figure{
  display: flex;
  height: clamp(1.548rem, 5.0251vw, 3.125rem);
}
.mitra-slide .swiper-slide figure {
  display: flex;
  height: clamp(1.548rem, 5.0251vw, 3.525rem);
}
.logo-slide .swiper-slide img {
  display: block;
  height: 100%;
  width: auto;
  margin: auto;
  filter: grayscale(1);
  opacity: 0.45;
  transition: cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.3s;
}
.mitra-slide .swiper-slide img {
  display: block;
  height: 100%;
  width: auto;
  margin: auto;
  transition: cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.3s;
}
.logo-slide .swiper-slide img:hover {
  filter: grayscale(0) invert(0);
  opacity: 1;
}
.logo-slide .swiper-wrapper,
.mitra-slide .swiper-wrapper {
  transition-timing-function: linear;
}
.public-class .card-body .btn-secondary {
  background-color: var(--mt-green);
  --bs-btn-border-color: var(--mt-green);
  color: #fff;
}
.public-class .card-body .btn-secondary:hover {
  background-color: var(--mt-dark-green);
  --bs-btn-hover-border-color: var(--mt-dark-green);
}
.public-class .table-responsive-xl::-webkit-scrollbar,
.fp-services .table-responsive-xl::-webkit-scrollbar {
  height: 0;
}
.fp-services {
  padding-bottom: clamp(5.526rem, 11.235vw, 9.825rem);
}
.fp-services .heading-block h2 {
  margin-bottom: 1rem;
}
.fp-services .heading-block p {
  margin-bottom: 0;
}
.fp-services::before {
  position: absolute;
  content: '';
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1920 273'%3E%3Cpath fill='%23ffffff' d='M1920,76.6c-5.8-2.7-22.5-6.9-25.5-7.9c-23.2-7.3-47.6-13.2-72.6-19.2c-53.4-12.8-105-24.7-164.3-32.6C1541.3,1.5,1414.4-1.4,1295,9.7c-256.2,24-438.4,104.8-658.4,156.7c-52.3,12.3-106.2,23.6-160.9,34.1c-46.8,9-96.9,15-148.1,18.1c-51.2,3.1-103.5,3.2-154.9,0.4c-53.4-3-105.8-9.7-154.7-18.8c-6.1-1.1-12.1-2.3-17.9-3.6V273h1920V76.6z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
  height: 273px;
  left: 0;
  right: 0;
  bottom: -4px;
  z-index: 0;
}
.fp-services .table-responsive-lg .row {
  flex-wrap: wrap;
}
@media (max-width: 1199px) {
  .fp-services .feature-row {
    flex-wrap: nowrap;
  }
}
.fp-services .card-body {
  display: flex;
  flex-direction: column;
  --bs-card-spacer-y: 3.5rem;
  --bs-card-spacer-x: 2.5rem;
}
.fp-services .card:hover {
  background-color: var(--mt-blue);
}
.fp-services .card:hover h4,
.fp-services .card:hover p {
  color: #fff;
}
.fp-services .feature-icon {
  width: clamp(3.525rem, 7.7225vw, 4.0525rem);
  margin: 0 auto 1.75rem;
}
.fp-services .feature-icon .primary {
  fill: #1cabdf;
}
.fp-services .feature-icon .secondary {
  fill: var(--bs-body-color);
}
.fp-services .card:hover .feature-icon .primary {
  fill: var(--mt-yellow);
}
.fp-services .card:hover .feature-icon .secondary {
  --bs-body-color: #fff;
}
.fp-services .services-caption {
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  height: 100%;
}
.fp-services .services-caption h4 {
  font-weight: 600;
}
.fp-services .services-caption p {
  font-size: 90%;
  margin-bottom: 0;
  margin-top: auto;
}
.section-usps .icon-shape {
  background-color: rgba(var(--bs-warning-rgb), var(--bs-bg-opacity));
  border: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color);
  border-color: var(--bs-warning-border-subtle);
  border-radius: 0.5rem;
  --bs-bg-opacity: 0.15;
}
.section-usps h2 {
  margin-bottom: 2.5rem;
}
.section-usps .icon-shape i {
  font-size: 150%;
}
.section-usps h4 {
  font-weight: 500;
  margin-bottom: 0;
}

/*========== Pages ==========*/
.section_hero {
  display: flex;
  align-items: center;
  height: 90vh;
  width: 100%;
  overflow: hidden;
}
.section_hero::after {
  content: '';
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 1920 220'%3E%3Cpath d='M1924,228H-4V0c263.6,115.7,599,185,964.2,185c365,0,700.2-69.2,963.8-184.9V228z'/%3E%3C/svg%3E");
  position: absolute;
  background-repeat: no-repeat;
  background-size: cover;
  width: calc(100% + 4px);
  height: clamp(3.155rem, 10.552vw, 22vh);
  left: 50%;
  bottom: -4px;
  transform: translateX(-50%);
  z-index: 0;
}
.hero_rounded {
  display: flex;
  align-items: center;
  height: clamp(33vh, 48vw, 72vh);
  width: 95%;
  border-radius: clamp(1.5rem, 5vw, 2.25rem);
  margin: 0 auto;
  overflow: hidden;
}
.hero_rounded_bottom {
  display: flex;
  align-items: center;
  height: clamp(33vh, 48vw, 52vh);
  width: 100%;
  border-radius: 0 0 clamp(1.5rem,5vw, 2.5rem) clamp(1.5rem,5vw, 2.5rem);
  margin: 0 auto;
  overflow: hidden;
}
@media (min-width: 1200px) {
  .hero_rounded_bottom {
    width: 95%;
  }
}
@media (max-width: 1199px) {
  .section_hero {
    height: 75vh;
  }
}
@media (max-width: 991px) {
  .section_hero {
    height: 55vh;
  }
}
.section_hero .jarallax-container::before,
.hero_rounded_bottom .jarallax-container::before,
.hero_rounded .jarallax-container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4);
  z-index: 1;
}
.section_hero .caption h1,
.hero_rounded_bottom h1,
.hero_rounded h1 {
  color: #fff;
  margin-bottom: 1rem;
}
.section_hero .caption p {
  font-size: calc(var(--bs-body-font-size) * 1.105);
  font-weight: 500;
  color: #fff;
  margin-bottom: 0;
}
.section-class .alert {
  font-family: 'Poppins', sans-serif;
  font-size: calc(var(--bs-body-font-size) * 0.8);
  font-weight: 500;
  line-height: 1;
  --bs-alert-border-radius: var(--bs-border-radius-sm);
  display: inline-flex;
}
.section-class .card h2 {
  font-size: calc(var(--bs-body-font-size) * 1.1);
  font-weight: 600;
  margin-bottom: 0.5rem;
}
@media (min-width: 576px) {
  .section-class .card h2 {
    color: #fff;
  }
}
.section-class .card h5 {
  font-weight: 400;
  margin-top: 1rem;
}
.section-class .btn {
  padding: 0.5rem 1rem;
}
.section-class .card .icon-link {
  color: rgba(255, 255, 255, 0.75);
  padding: 0;
}
.section-class .card .icon-link:hover {
  color: rgba(255, 255, 255, 1);
}
.section-class .card figure {
  position: relative;
}
.section-class .card figure a img {
  transition: cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.3s;
  transform: scale(1);
}
.section-class .card figure:hover a img {
  transform: scale(1.05);
}
.section-class .card figure h4 {
  position: absolute;
  bottom: var(--bs-card-spacer-y);
  left: var(--bs-card-spacer-x);
  right: var(--bs-card-spacer-x);
  color: #fff;
}
.section-class .level-badge {
  position: absolute;
  top: var(--bs-card-spacer-y);
  right: var(--bs-card-spacer-x);
  font-family: 'Poppins', sans-serif;
  font-size: calc(var(--bs-body-font-size) * 0.85);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 0.5rem;
}
.section-class .level-badge.basic {
  color: var(--mt-yellow);
}
.section-class .level-badge.intermediate {
  color: var(--mt-light-orange);
}
.section-class .level-badge.advance {
  color: var(--mt-light-green);
}
@media (max-width: 575px) {
  .section-class .card-image-hover {
    padding-top: 0;
    border-radius: 0;
  }
  .section-class .card-image-hover::before {
    display: none;
  }
  .section-class .card-image-hover img {
    position: relative;
    top: unset;
    transform: unset;
    height: 56.25vw;
    border-radius: 0.5rem;
  }
  .section-class .card-image-hover .card-body {
    position: relative;
    color: inherit;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .section-class .card-image-hover .card-body p {
    display: none;
  }
  .section-class .card-image-hover:hover img {
    transform: unset;
  }
  .section-class .level-badge {
    font-size: calc(var(--bs-body-font-size) * 0.65);
    --bs-card-spacer-y: 0.75rem;
    --bs-card-spacer-x: 0.75rem;
  }
  .section-class .card h2 {
    font-size: calc(var(--bs-body-font-size) * 0.82);
    margin-bottom: 0.125rem;
  }
  .section-class .card-body small {
    font-size: calc(var(--bs-body-font-size) * 0.796);
  }
  .section-class .card-image-hover .card-body h5 {
    font-size: calc(var(--bs-body-font-size) * 0.82);
    margin-top: 0.5rem;
  }
  .section-class .btn {
    font-size: calc(var(--bs-body-font-size) * 0.82);
    padding: 0.125rem 0.5rem;
    --bs-border-radius: 0.35rem;
  }
  .section-class .card .icon-link {
    color: var(--bs-gray-700);
    padding-right: 0.25rem;
  }
  .section-class .card .icon-link:hover {
    color: var(--bs-gray-500);
  }
}
.card-img-leading {
  display: flex;
  background-color: rgba(0, 0, 0, 0);
  border-bottom: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color);
  color: inherit;
  padding: clamp(1.5rem, 3.75vw, 2.596rem) 0;
  transition: cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.2s;
}
.card-img-leading p {
  margin-bottom: 0;
}
.card-img-leading:hover {
  background-color: rgba(0, 0, 0, 0.04);
}
.card-img-leading:last-child {
  border-bottom: 0;
}
.card-img-leading svg {
  height: auto;
}
.class-content-wrapper .feature-info h5 {
  font-size: calc(var(--bs-body-font-size) * 0.9);
  font-weight: 600;
}
.class-content-wrapper .feature-info .pricing h3 {
  font-weight: 500;
  color: var(--bs-primary);
  margin: 0 1rem 0 0;
}
.class-content-wrapper .feature-info p {
  margin-top: 0.5rem;
  margin-bottom: 0;
}
.class-content-wrapper h4 {
  color: rgba(2, 6, 23, 0.5);
  margin-bottom: 1rem;
}
.class-content-wrapper ul li {
  list-style: none;
  position: relative;
  margin-bottom: 0.75rem;
}
.class-content-wrapper ul li::before {
  content: '\f26a';
  position: absolute;
  font-family: bootstrap-icons;
  top: clamp(0.015rem, 0.035vw, 0.065rem);
  left: -2rem;
  color: var(--mt-green);
}
.class-content-wrapper .list-yellow ul li::before {
  color: var(--mt-yellow);
}
.class-content-wrapper .list-orange ul li::before {
  color: var(--mt-light-orange);
}
.intro-upper-section h1 {
  margin-bottom: 1rem;
}
.intro-upper-section p {
  margin-bottom: 0;
}
.modal-body .material-content {
  border-top: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color);
}
.modal-body .material-content:last-child {
  border-bottom: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color);
}
.modal-body .material-content button {
  color: var(--bs-gray-800);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 0;
}
.accordion-button:not(.collapsed) {
  background-color: transparent;
  box-shadow: none;
}
.accordion-button:focus {
  border: 0;
  box-shadow: none;
}
.modal-header h2 {
  margin-bottom: 0;
}

/*========== Article ==========*/
.section_light_hero {
  display: flex;
  align-items: center;
  height: clamp(30vh, 40vw, 75vh);
  width: 100%;
  overflow: visible;
}
.section_light_hero img {
  height: 100%;
  object-position: center bottom;
}
.section_light_hero .caption h1 {
  font-size: clamp(2.4725rem, 7.552vw, calc(2.575rem + 2.975vw)) !important;
  color: #fff;
  text-align: center;
}
.article-card {
  color: inherit !important;
}
.article-card:hover img {
  transform: scale(1.05);
}
.article-card h3 {
  font-size: 105% !important;
  transition: cubic-bezier(0.445, 0.05, 0.55, 0.95) 0.2s;
}
.article-card:hover h3 {
  color: var(--bs-primary);
}
.article-content-wrapper h2 {
  margin-bottom: 0.5rem;
  margin-top: 2rem;
}
.article-content-wrapper img {
  border-radius: var(--bs-border-radius-lg);
  margin: 2.5rem 0;
}
.article-content-wrapper img:first-child {
  margin: 0;
}
.article-content-wrapper h2 {
  font-size: calc(1.115em + 0.25vw);
}
blockquote {
  background-color: var(--bs-gray-100);
  border-radius: 12px;
  color: var(--bs-gray-500);
  margin: 20px auto;
  padding: 24px 24px 24px 56px;
  position: relative;
}
blockquote:before {
  color: var(--bs-gray-500);
  content: "\f6b0";
  display: block;
  font-family: bootstrap-icons;
  font-size: 3em;
  font-size: 32px;
  left: 16px;
  position: absolute;
  top: 4px;
}

/*========== Testimonial ==========*/
.testimonialSwiper .swiper-slide {
  height: auto !important;
  background-color: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(10px);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 0.75rem;
}
.testimonialSwiper .swiper-slide .card {
  background-color: transparent;
  border: 0;
  color: #fff;
}
.testimonialSwiper .client-testimony p {
  margin-bottom: 0;
  display: flex;
  flex-direction: column;
}
.testimonialSwiper .client-testimony p::before {
  position: relative;
  content: "\F255";
  font-family: "bootstrap-icons";
  font-size: 2.75rem;
  line-height: 1;
  color: var(--mt-yellow);
  margin-bottom: 1rem;
}
.testimonialSwiper .client-data p {
  font-family: "Poppins", sans-serif;
  font-weight: 500;
  margin-bottom: 0;
}
.testimonialSwiper .client-data p:nth-child(2),
.testimonialSwiper .card .client-data p:nth-child(2) {
  --bs-text-opacity: 1;
  color: rgba(255, 255, 255, 0.5);
  font-size: calc(var(--bs-body-font-size) * 0.675);
  font-weight: 400;
  margin-bottom: 0;
}
.testimonialSwiper .client-img {
  width: 15%;
}

/*========== Section Mitra ==========*/
.mitra-logo img {
  max-height: clamp(3.5rem, 9.5vw, 8rem);
  width: auto;
  margin: 0 auto;
}

/*========== Footer ==========*/
footer {
  background-color: var(--mt-purple);
  color: rgba(255, 255, 255, 0.65);
}
footer h2 {
  color: #fff;
  margin-bottom: 2rem;
}
footer .contact-info p {
  margin-bottom: 3rem;
}
footer .company-info h4 {
  color: #fff;
  font-weight: 600;
  margin-bottom: 1.5rem;
}
footer .company-info h2 {
  color: #fff;
  font-weight: 300;
  margin-bottom: 0;
}
footer .section-copyright {
  border-top: 1px solid rgba(255, 255, 255, 0.25);
  color: rgba(255, 255, 255, 0.35);
}
footer .social-block {
  display: flex;
  align-items: center;
}
footer .apps-block {
  display: flex;
  align-items: center;
}
footer .apps-block .btn {
  --bs-btn-bg: #0f172a;
  border: 0;
  border-radius: 0.5rem;
}
footer .apps-block .btn:hover {
  --bs-btn-hover-bg: #fff;
}
footer .apps-block .btn .color-light {
  fill: #fff;
}
footer .apps-block .btn:hover .color-light {
  fill: #0f172a;
}

/*========== Responsive ==========*/
@media (min-width: 768px) {
  .icon-list ul li {
    flex: 0 0 auto;
    width: 50%;
  }
}
@media (min-width: 1200px) {
  .icon-list ul {
    --bs-gutter-y: 6rem;
  }
  .icon-list ul li {
    flex: 0 0 auto;
    max-width: 33.333333333333%;
  }
  .navbar-dark .navbar-nav .nav-link {
    color: rgba(255, 255, 255, 0.65) !important;
    transition: all 0.3s;
  }
  .navbar-dark .navbar-nav .nav-link:hover {
    color: rgba(255, 255, 255, 1) !important;
  }
  .light-header header .navbar .navbar-nav .nav-item .nav-link {
    color: var(--bs-gray-500) !important;
  }
  .light-header header .navbar .navbar-nav .nav-item.active .nav-link {
    color: var(--bs-primary) !important;
  }
  .navbar .navbar-nav .nav-item.active .nav-link {
    color: rgba(255, 255, 255, 1) !important;
  }
  .light-header .navbar .navbar-nav .nav-item.active .nav-link {
    color: var(--bs-primary) !important;
  }
}
@media (min-width: 1800px) {
  .mt-home-hero::after {
    height: 50vh;
  }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .fp-services .table-responsive-xl .row > *,
  .public-class .table-responsive-xl .row > * {
    width: 30%;
  }
}
@media (max-width: 1199px) {
  .fp-services .container-xxl,
  .public-class .container-xxl {
    --bs-gutter-x: 0;
  }
  .public-class .row .text-center,
  .public-class .fp-search {
    padding: 0 1.25rem;
  }
  .fp-services .heading-block {
    padding: 0 1.25rem;
  }
  .fp-services .table-responsive-xl .row > *:first-child,
  .public-class .table-responsive-xl .row > *:first-child {
    margin-left: 1.25rem;
  }
  .fp-services .feature-row > * {
    padding-top: 0.75rem;
  }
}


/* Angga style start here */
/* About Program  */

.about-program-section {
  padding: 30px 0;
}

.image-container {
  position: relative;
  width: 100%;
  padding-top: 100%; 
  overflow: hidden;
}

.image-container img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.rounded-circle img {
  border-radius: 50%;
}

.rounded-pill img {
  border-radius: 50% / 25%;
}

.rounded-8px img {
  border-radius: 8px;
}

.about-details {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 3rem;
  padding: 48px 0;
}

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

.text-center {
  text-align: center;
}

.text-right {
  text-align: right;
}

.p-24 {
  padding: 24px;
}


/* Class Sumary  */

.class-summary .col-md-2,
.class-summary .col-md-3 {
    margin-bottom: 10px;
}

.class-summary .btn-primary {
    background-color: #ff7e29;
    color: white;
    border: none;
    padding: 10px 20px;
    text-decoration: none;
    border-radius: 5px;
    display: flex;
    align-items: center;
}

.class-summary .btn-primary i {
    margin-left: 5px;
}

/* Hero Banner  */
.hero-banner {
  display: flex;
  align-items: center;
  padding: 20px;
}

.video-thumbnail {
  position: relative;
  display: inline-block;
}

.video-thumbnail img {
  width: 100%;
  height: auto;
}

.video-box::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background-color: #4d0b0b;
  opacity: 0;
  transition: cubic-bezier(0.455, 0.83, 0.515, 0.955) 0.3s;
  z-index: 1;
}

.play-button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: rgba(255, 255, 255, 0.8);
  border-radius: 50%;
  padding: 10px;
  font-size: 24px;
  color: #000;
  text-decoration: none;
}

.play-button:hover {
  background-color: rgba(255, 255, 255, 1);
}

/* Video modal styles */
.video-modal {
  display: none;
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0,0,0,0.8);
  align-items: center;
  justify-content: center;
}

.video-modal-content {
  position: relative;
  margin: auto;
  padding: 0;
  width: 90%;
  max-width: 800px;
}

.video-modal-close {
  color: white;
  position: absolute;
  top: 10px;
  right: 25px;
  font-size: 35px;
  font-weight: bold;
  cursor: pointer;
}

.video-modal-close:hover,
.video-modal-close:focus {
  color: #999;
  text-decoration: none;
  cursor: pointer;
}

#videoIframe {
  width: 100%;
  height: 450px;
}

@media (max-width: 768px) {
  #videoIframe {
      height: 300px;
  }

  .video-modal-close {
      font-size: 25px;
      right: 15px;
      top: 5px;
  }
}


/* Program Benefit  */
.program-benefit-section {
  padding: 30px 0;
}

.benefit-item img {
  max-width: 60px;
  margin-bottom: 10px;
}

.benefits-list {
  display: grid;
  gap: 20px;
  margin-top: 5.5rem;
  justify-content: center; 
}

.benefit-item {
  text-align: center;
  display: block;
  padding: 24px;
}

.benefit-item img {
  max-width: 100%;
  height: auto;
  max-height: 64px;
  width: auto;
  margin-bottom: 10px;
}

@media (min-width: 600px) {
  .benefits-list {
      grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 900px) {
  .benefits-list {
      grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 1200px) {
  .benefits-list {
      grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
      justify-content: center;
  }
}

/* Audience Section  */
.audience-list {
  margin-top: 20px;
  display: grid;
  gap: 20px;
}

.audience-list-center {
  margin-top: 20px;
  display: flex;
  gap: 20px;
}

.audience-item {
  display: flex;
  align-items: center;
  padding: 20px;
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 10px;
  gap: 24px;
}

.audience-item-center {
  display: flex;
  padding: 20px;
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 10px;
  gap: 24px;
  width: 100%;
}

.audience-icon {
  flex: 0 0 50px;
  margin-right: 15px;
}

.audience-icon-center {
  width: 100%;
  display: flex;
  align-items: center;
  margin-right: 16px;
}

.audience-icon img {
  max-width: 100%;
  height: auto;
}

.audience-details h3 {
  font-size: 18px;
  margin-bottom: 10px;
}

.custom-col-a {
  width: 40%;
  padding: 34px 48px 34px 15px;
  display: flex;
  flex-direction: column;
}

.custom-col-b {
  width: 60%;
  padding: 15px;
  display: flex;
  flex-direction: column;
}

.custom-col-center {
  width: 100%;
  padding: 15px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.justify-content-top {
  justify-content: flex-start;
}

.justify-content-middle {
  justify-content: center;
}

.justify-content-bottom {
  justify-content: flex-end;
}

.text-center .audience-title,
.text-center .audience-description {
  margin-bottom: 20px;
}


/* Methode Program  */

.methode-list {
  display: flex;
  justify-content: center;
  gap: 48px;
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
}

.methode-item {
  width: 100%;
  padding: 34px;
}

.methode-channel {
  margin-top: 32px;
}

/* Button Popup SIlabus  */
.button-popup-wrapper .btn {
  margin-bottom: 15px;
}

.modal-content {
  border-radius: 10px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

.modal-header {
  border-bottom: none;
  text-align: center;
}

.modal-header .modal-title {
  font-weight: bold;
  font-size: 24px;
}

.modal-header .close {
  padding: 1rem;
  margin: -1rem -1rem -1rem auto;
}

.modal-body .accordion .material-content {
  border: none;
  border-bottom: 1px solid #e5e5e5;
  padding: 1rem 0;
}

.modal-body .accordion .accordion-button {
  font-size: 18px;
  font-weight: bold;
  text-decoration: none;
  color: #333;
  background: none;
  border: none;
  outline: none;
}

.modal-body .accordion .accordion-button:hover {
  text-decoration: none;
  color: #0056b3;
}

.modal-body .accordion .accordion-collapse {
  padding: 0.5rem 1rem;
  font-size: 16px;
  color: #555;
}

.modal-footer {
  border-top: none;
  justify-content: center;
}

.modal-footer .btn {
  min-width: 100px;
}

.tg {
  --bg-primary: #207ba1;
  --text-primary: #207ba1;
}

.tg-account .account-banner {
  background: var(--bg-primary);
  width: 100%;
  float: left;
  padding: 200px 0 0;
}
section.tg-may-account-wrapp.tg {
  padding-bottom: 100px;
}

.tg-account .account-banner .inner-banner .detail * {
  color: #fff;
}

.tg-account .account-banner .inner-banner .profile {
  text-align: center;
}

.tg-account .account-banner .inner-banner .profile span.image img {
  width: 130px;
  border-radius: 50%;
  box-shadow: 0px 0px 15px -10px #000;
}

.tg-account .account-banner .inner-banner .detail h3.user-name {
  font-size: 20px;
  margin-top: 20px;
}

.tg-account .account-banner .inner-banner .nav-area {
  width: 100%;
  float: left;
  margin-top: 45px;
}

.tg-account .account-banner .inner-banner .nav-area ul li a {
  background: rgba(255, 255, 255, .4);
  color: #fff;
  font-weight: 500;
  border-radius: 0px;
  font-size: 16px;
  border: none;
  padding: 10px 28px;
  min-width: 120px;
  display: block;
  transition: .4s;
  text-align: center;
}

.tg-account .account-banner .inner-banner .nav-area ul li {
  margin-right: 7px;
}

.tg-account .account-banner .inner-banner .nav-area ul li a.active,
.tg-account .account-banner .inner-banner .nav-area ul li a:hover {
  color: var(--text-primary);
  background: #fff;
}

.tg-tabs-content-wrapp {
  width: 100%;
  float: left;
  padding: 30px 0;
}

div#my-orders-table_length {
  width: fit-content;
  float: left;
}

div#my-orders-table_filter {
  width: fit-content;
  float: right;
}

div#my-orders-table_length select,
div#my-orders-table_filter input {
  border: 1px solid #207ba1;
  padding: 5px 15px;
}

div#my-orders-table_length,
div#my-orders-table_filter {
  margin-bottom: 22px;
}

.tg-tabs-content-wrapp form.tg-form {
  width: 100%;
  float: left;
  background: #f7f7f7;
  padding: 30px 30px 60px;
  border: 1px solid #eaeaea;
}

.tg-tabs-content-wrapp form.tg-form button {
  background: var(--bg-primary);
  border: none;
  padding: 10px 32px;
  cursor: pointer;
  margin: 13px 0 0;
}

.tg-tabs-content-wrapp .my-account-dashboard .card img {
  max-width: 80px;
}

.tg-tabs-content-wrapp .my-account-dashboard .card {
  text-align: center;
}

.tg-tabs-content-wrapp .my-account-dashboard .card h2 {
  font-size: 20px;
  margin-top: 14px;
}

.tg-tabs-content-wrapp .my-account-dashboard .card p {
  font-size: 15px;
}

div#my-orders-table_info {
  float: left;
}

div#my-orders-table_paginate {
  float: right;
}

.page-item.active .page-link {
  background-color: lightgrey !important;
  border: 1px solid black;
}

.page-link {
  color: black !important;
}

div#my-orders-table_paginate a {
  background: #e6e6e6;
  margin: 0 2px;
  padding: 3px 11px;
  display: inline-block;
  cursor: pointer;
  text-decoration: none;
  color: #000;
}

div#my-orders-table_paginate {
  margin-top: 8px;
}

div#my-orders-table_paginate span a.current {
  color: #fff !important;
  background: var(--primary);
}

.tg-tabs-content-wrapp .my-account-dashboard .card {
  cursor: pointer;
}

.tg-tabs-content-wrapp .my-account-dashboard .card:hover,
.tg-tabs-content-wrapp .my-account-dashboard .card.active {
  background: var(--text-primary);
}

.tg-tabs-content-wrapp .my-account-dashboard .card:hover *,
.tg-tabs-content-wrapp .my-account-dashboard .card.active * {
  color: #fff;
}

.tg-tabs-content-wrapp .my-account-dashboard .card {
  transition: .4s;
  border-radius: 16px;
  box-shadow: 0px 2px 7px -5px;
}

table#my-orders-table a.view-order {
  background: var(--text-primary);
  cursor: pointer;
  text-decoration: none;
  color: #fff;
  padding: 4px 11px;
  border-radius: 3px;
}

@media(min-width:768px) {
  table#my-orders-table td.action,
  table#my-orders-table th.action {
      text-align: center;
  }
}

@media(max-width:768px) {
  .tg-account .account-banner .inner-banner .nav-area ul li a {
      min-width: auto !important;
      padding: 8px 15px;
  }
  .toast.show {
    left: 10%;    
  }
}

@media(max-width:600px) {
  .tg-account .account-banner .inner-banner .nav-area ul li a span {
      display: none;
  }
  .tg-account .account-banner .inner-banner .nav-area ul li a {
      min-width: auto;
      padding: 8px 20px;
  }
  .tg-account .account-banner .inner-banner .nav-area ul {
      text-align: center;
      margin: 0 auto;
      width: fit-content;
  }
  .tg-account .detail {
      text-align: center;
  }
  div#my-orders-table_length select,
  div#my-orders-table_filter input {
      max-width: 120px;
      font-size: 14px;
  }
  div#my-orders-table_length label,
  div#my-orders-table_filter label {
      font-size: 0px;
  }
  .odr-dt-ctr {
      display: grid!important;
      gap: 32px!important;
  }
  .odr-dt-wrp {
      max-width: 100%!important;
  }
}
.odr-dt-wrp {
  display: flex;
  justify-content: space-between;
  border: 1px solid #ebebeb;
  padding: 16px;
  border-radius: 16px;
  min-width: 350px;
  flex-direction: column;
  min-height: 150px;
  gap: 24px;
  box-shadow: 0px 2px 7px -5px;
  flex: 1 1 calc(33.333% - 20px);
  max-width: 33.333%;
}
.odr-dt-ctr {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}
.odr-no-wrp,
.odr-date-wrp,
.odr-tstas-wrp,
.odr-ttl-wrp {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.odr-tstas {
  background-color: #bdfbbd;
  color: #008500;
  padding: 4px 8px;
  border-radius: 9999px;
  font-weight: 600;
}
a.odr-actn.view-order {
  background-color: #207ba1;
  color: white;
  font-weight: 700;
  text-align: center;
  padding: 8px 0;
  border-radius: 9999px;
}
.odr-dt-container {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.odr-no {
  font-weight: 700;
}
.odr-ttl-wrp {
  font-weight: 700;
}


form#login-form {
    display: flex;
    flex-direction: column;
    gap: 6px;
    text-align: center;
}
input#phone {
    min-height: 55px;
    margin-top: 16px;
    text-align: center;
}
.modal-header-section {
    text-align: center;
}
.otp-input {
  display: flex;
  justify-content: space-between;
  margin-bottom: 1rem;
}
.otp-input input {
  width: 60px;
  height: 60px;
  text-align: center;
  font-size: 1.2rem;
  border: 1px solid #444;
  border-radius: 4px;
  background-color: #e4e4e4;
  color: #202020;
}
.otp-input input::-webkit-outer-spin-button,
.otp-input input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.otp-input input[type=number] {
  -moz-appearance: textfield;
}
.otp-verify-bottom-section {
display: flex;
align-items: center;
justify-content: center;
gap: 16px;
}
.otp-notice-bottom {
display: flex;
flex-direction: column;
text-align: center;
margin-top: 16px;
}
span.close-otp {
text-align: right;
font-size: 32px;
}