@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Jost:wght@500;600&family=Montserrat:wght@400;500&display=swap");

/* ============================================
   DESIGN TOKENS — Single source of truth
   ============================================ */
:root {
  /* Brand */
  --clr-accent: #FF6A00;
  --clr-accent-rgb: 255, 106, 0;
  --clr-accent-hover: #e85f00;

  /* Dark theme (default) */
  --clr-bg: #0a1227;
  --clr-surface: #0f1932;
  --clr-text: #93b4ca;
  --clr-title: #fff;
  --clr-border: rgba(255, 255, 255, 0.1);
  --clr-border-hover: rgba(255, 255, 255, 0.2);
  --clr-overlay: rgba(15, 25, 50, 0.8);
  --clr-muted: rgba(255, 255, 255, 0.05);

  /* Semantic */
  --clr-success: #28c76f;
  --clr-danger: #ea5455;
  --clr-warning: #f99f0b;
  --clr-info: #1e9ff2;
  --clr-primary: #7367f0;
  --clr-dark: #192a56;

  /* Typography */
  --ff-heading: "Jost", sans-serif;
  --ff-body: "Montserrat", sans-serif;

  /* Spacing */
  --radius: 8px;
  --radius-lg: 12px;
  --radius-pill: 50px;
  --radius-circle: 50%;

  /* Transitions */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --duration: 0.3s;

  /* Shadows */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.15);
  --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.2);
  --shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.3);
  --shadow-accent: 0 4px 20px rgba(var(--clr-accent-rgb), 0.25);
}

/* ============================================
   LIGHT THEME OVERRIDES
   ============================================ */
.light-version {
  --clr-bg: #f0f5fc;
  --clr-surface: #fff;
  --clr-text: #555;
  --clr-title: #172941;
  --clr-border: rgba(0, 0, 0, 0.08);
  --clr-border-hover: rgba(0, 0, 0, 0.15);
  --clr-overlay: rgba(255, 255, 255, 0.8);
  --clr-muted: rgba(0, 0, 0, 0.03);
}

/* ============================================
   RESET & BASE
   ============================================ */
*, *::before, *::after { box-sizing: border-box; }

html {
  font-size: 16px;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  padding: 0;
  font-size: 1rem;
  color: var(--clr-text);
  line-height: 1.7;
  overflow-x: hidden;
  font-family: var(--ff-body);
  background: var(--clr-bg);
  transition: background var(--duration) var(--ease), color var(--duration) var(--ease);
}

::selection {
  background-color: var(--clr-accent);
  color: #fff;
}

a {
  display: inline-block;
  text-decoration: none;
  transition: all var(--duration) var(--ease);
  color: inherit;
}
a:hover { text-decoration: none; color: inherit; }

ul { margin: 0; padding: 0; }
ul li { list-style: none; padding: 5px 0; }

strong, b { font-family: var(--ff-heading); }

img { max-width: 100%; }

/* ============================================
   TYPOGRAPHY
   ============================================ */
h1, h2, h3, h4, h5, h6 {
  font-weight: 600;
  margin: 0;
  line-height: 1.25;
  color: var(--clr-title);
  font-family: var(--ff-heading);
}

h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { color: var(--clr-title); }
h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover { color: var(--clr-accent); }

h1 { font-size: clamp(2.5rem, 5vw, 5rem); }
h2 { font-size: clamp(2rem, 4vw, 3.375rem); line-height: 1.2; }
h3 { font-size: clamp(1.5rem, 3vw, 2.25rem); line-height: 1.3; }
h4 { font-size: clamp(1.25rem, 2.5vw, 1.75rem); line-height: 1.35; }
h5 { font-size: clamp(1.125rem, 2vw, 1.5rem); line-height: 1.4; }
h6 { font-size: clamp(1rem, 1.5vw, 1.25rem); font-weight: 500; }

p { margin-top: 0; }
p:last-child { margin-bottom: 0 !important; }
p a { color: var(--clr-accent); }

/* ============================================
   UTILITY CLASSES
   ============================================ */
.bg_img { background-size: cover; background-position: center; background-repeat: no-repeat; }
.bg_contain { background-size: contain; }
.bg_fixed { background-attachment: fixed; }
.right_center { background-position: right center; }
.left_center { background-position: left center; }
.bottom_center { background-position: bottom center; }
.bottom_left { background-position: bottom left; }
.bottom_right { background-position: bottom right; }
.top_center { background-position: top center; }
.top_left { background-position: top left; }
.top_right { background-position: top right; }

.pt-80 { padding-top: 80px; }
.pb-80 { padding-bottom: 80px; }
.pt-60 { padding-top: 40px; }
.pb-60 { padding-bottom: 40px; }
.pt-120 { padding-top: 80px; }
.pb-120 { padding-bottom: 80px; }
.mb-30 { margin-bottom: 30px; }
.mb-40 { margin-bottom: 40px; }
.mb--50 { margin-bottom: -50px; }
.mb-30-none { margin-bottom: -30px !important; }
.mb-40-none { margin-bottom: -40px !important; }
.fs--14 { font-size: 14px; }
.h-50px { height: 50px !important; }
.rtl { direction: rtl; }
.ltr { direction: ltr; }

@media (min-width: 992px) {
  .pt-120 { padding-top: 120px; }
  .pb-120 { padding-bottom: 120px; }
  .pt-60 { padding-top: 60px; }
  .pb-60 { padding-bottom: 60px; }
}

/* Line clamping */
[class*="line--limit"] { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; }
.line--limit-1 { -webkit-line-clamp: 1; }
.line--limit-2 { -webkit-line-clamp: 2; }
.line--limit-3 { -webkit-line-clamp: 3; }
.line--limit-4 { -webkit-line-clamp: 4; }
.line--limit-5 { -webkit-line-clamp: 5; }

/* Flex utility (shared across many components) */
.footer-links, .footer-links li, .social-icons, .header-wrapper, .header-wrapper .right-area,
.menu, .header-top .header-top-area, .header-top .header-top-area .social,
.testimonial-item .testimonial-content .testimonial-header, .contact__item,
.profile-wrapper, .dashboard__item .dashboard__header, .dashboard__item,
.deposit-item, .deposit-preview, .message__chatbox__header, .reply-item,
.post__item .post__content .meta__date, .post__share,
.widget.widget__tags ul, .widget__post, .post__tag {
  display: flex;
  flex-wrap: wrap;
}

/* ============================================
   COLOR UTILITIES
   ============================================ */
.bg--body { background-color: var(--clr-bg) !important; }
.bg--section { background-color: var(--clr-surface) !important; }
.bg--base, .btn--base, .badge--base { background-color: var(--clr-accent) !important; }
.bg--primary, .btn--primary, .badge--primary { background-color: var(--clr-primary) !important; }
.bg--success, .btn--success, .badge--success { background-color: var(--clr-success) !important; }
.bg--danger, .btn--danger, .badge--danger { background-color: var(--clr-danger) !important; }
.bg--warning, .btn--warning, .badge--warning { background-color: var(--clr-warning) !important; }
.bg--info, .btn--info, .badge--info { background-color: var(--clr-info) !important; }
.bg--dark, .btn--dark, .badge--dark { background-color: var(--clr-dark) !important; }
.bg--white, .btn--white, .badge--white { background-color: #fff !important; }
.bg--black, .btn--black, .badge--black { background-color: #000 !important; }
.bg--transparent { background-color: transparent !important; }
.bg--none { background: none !important; }

[class*="btn--"] { color: #fff; font-weight: 500; }
[class*="btn--"]:hover { color: #fff; }

.text--base { color: var(--clr-accent) !important; }
.text--primary { color: var(--clr-primary) !important; }
.text--success { color: var(--clr-success) !important; }
.text--danger { color: var(--clr-danger) !important; }
.text--warning { color: var(--clr-warning) !important; }
.text--info { color: var(--clr-info) !important; }
.text--dark { color: var(--clr-dark) !important; }
.text--white { color: #fff !important; }
.text--black { color: #000 !important; }
.text--body { color: var(--clr-text) !important; }
.text--title { color: var(--clr-title) !important; }

.text--white p, .text--white ul li, .text--white ul li a, .text--white span { color: #fcf6f5; }

/* ============================================
   OVERLAY
   ============================================ */
.bg--overlay { position: relative; }
.bg--overlay::before,
.section__category::before {
  position: absolute;
  content: '';
}
.bg--overlay::before {
  inset: 0;
  background: var(--clr-overlay);
}

.overlay {
  position: fixed;
  inset: 0;
  z-index: 99;
  background: rgba(15, 25, 50, 0.7);
  backdrop-filter: blur(4px);
  transition: all var(--duration) var(--ease);
  visibility: hidden;
  opacity: 0;
}
.overlay.active { opacity: 1; visibility: visible; }

/* ============================================
   BUTTONS
   ============================================ */
.cmn--btn {
  color: #fff;
  border-radius: var(--radius);
  line-height: 24px;
  font-weight: 500;
  padding: 14px 30px;
  background: var(--clr-accent);
  border: 1px solid transparent;
  text-transform: uppercase;
  font-size: 15px;
  letter-spacing: 0.3px;
  overflow: hidden;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--ff-heading);
  transition: all var(--duration) var(--ease);
  box-shadow: var(--shadow-accent);
}

.cmn--btn:hover {
  color: #fff;
  background: var(--clr-accent-hover);
  transform: translateY(-2px);
  box-shadow: 0 6px 28px rgba(var(--clr-accent-rgb), 0.35);
}

.cmn--btn.btn--sm { padding: 10px 20px 8px; }
.cmn--btn.btn--md { padding: 10px 25px; }
.cmn--btn.btn--lg { padding: 13px 35px; }
.cmn--btn.btn--block { padding: 10px 25px; display: block; }
.cmn--btn i:last-child { margin-left: 5px; }
.cmn--btn i:first-child { margin-right: 5px; }

.btn__grp { margin: -5px; }
.btn__grp .cmn--btn { margin: 5px; }
.btn__grp .cmn--btn:nth-child(even) { background: transparent; box-shadow: none; }
.btn__grp .cmn--btn:nth-child(even):hover { background: var(--clr-accent); box-shadow: var(--shadow-accent); }

/* ============================================
   SCROLL TO TOP
   ============================================ */
.scrollToTop {
  width: 44px;
  height: 44px;
  line-height: 44px;
  color: #fff;
  z-index: 9;
  bottom: 30px;
  right: 30px;
  font-size: 18px;
  position: fixed;
  border-radius: var(--radius);
  transform: translateY(150px);
  display: block;
  text-align: center;
  background: var(--clr-accent);
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: var(--shadow-accent);
  transition: all var(--duration) var(--ease);
}
.scrollToTop:hover { color: #fff; transform: translateY(-3px); }
.scrollToTop.active { transform: translateY(0); animation: bounceInDown 0.8s var(--ease); }
.scrollToTop img { width: 100%; }

/* ============================================
   VIDEO BUTTON
   ============================================ */
.video__button {
  width: 72px;
  height: 72px;
  z-index: 1;
  border-radius: var(--radius-circle);
  transform: translate(-50%, -50%);
  background: var(--clr-accent);
  line-height: 75px;
  text-align: center;
  box-shadow: 0 0 0 0 rgba(var(--clr-accent-rgb), 0.4);
  animation: pulse-ring 2s infinite;
}
.video__button i { font-size: 24px; color: #fff; }
.video__button img { width: 100%; }

.video__button::before,
.video__button::after {
  position: absolute;
  content: "";
  inset: 0;
  border-radius: var(--radius-circle);
  background: var(--clr-accent);
  opacity: 0.15;
  z-index: -10;
}
.video__button::before { animation: inner-ripple 2s linear infinite; }
.video__button::after { animation: outer-ripple 2s linear infinite; }

@keyframes pulse-ring {
  0% { box-shadow: 0 0 0 0 rgba(var(--clr-accent-rgb), 0.4); }
  70% { box-shadow: 0 0 0 20px rgba(var(--clr-accent-rgb), 0); }
  100% { box-shadow: 0 0 0 0 rgba(var(--clr-accent-rgb), 0); }
}

@keyframes outer-ripple {
  0% { transform: scale(1); opacity: 0.5; }
  80% { transform: scale(2.5); opacity: 0; }
  100% { transform: scale(3.5); opacity: 0; }
}

@keyframes inner-ripple {
  0%, 30% { transform: scale(1); opacity: 0.5; }
  100% { transform: scale(1.5); opacity: 0; }
}

/* ============================================
   SECTION HEADER
   ============================================ */
.section__header {
  margin: 0 0 40px;
  max-width: 620px;
  position: relative;
  z-index: 1;
}
.section__header .section__title { margin-bottom: 18px; }
.section__header .section__title:last-child { margin-bottom: 0; }
.section__header p i { color: var(--clr-accent); }
.section__header.text-center { margin-inline: auto; max-width: 100%; }

@media (min-width: 768px) {
  .section__header { margin-bottom: 60px; }
  .section__header.mb-low { margin-bottom: 45px; }
}

.section__category {
  display: inline-block;
  padding: 5px 18px;
  background: var(--clr-accent);
  margin-bottom: 30px;
  font-family: var(--ff-heading);
  color: #fff;
  text-transform: capitalize;
  position: relative;
  border-radius: var(--radius);
  font-size: 14px;
  letter-spacing: 0.5px;
}
.section__category::before {
  top: calc(100% - 5px);
  right: 0;
  clip-path: polygon(100% 0, 0 0, 100% 100%);
  background: var(--clr-accent);
  width: 12px;
  height: 17px;
}

/* ============================================
   HEADER
   ============================================ */
header { z-index: 999; }

.header-top {
  background: var(--clr-accent);
  color: #fff;
}
.header-top * { color: #fff; }
.header-top .header-top-area {
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
}
.header-top .header-top-area li { padding: 0; }
.header-top .header-top-area .social li a {
  width: 40px; height: 40px; line-height: 40px;
  text-align: center;
  border-right: 1px solid rgba(255, 255, 255, 0.3);
  font-size: 15px;
  transition: background var(--duration) var(--ease);
}
.header-top .header-top-area .social li a:hover { background: rgba(255, 255, 255, 0.1); }
.header-top .header-top-area .social li:first-child a { border-left: 1px solid rgba(255, 255, 255, 0.3); }
.header-top .header-top-area .mail {
  padding: 5px 10px; min-height: 40px;
  border-left: 1px solid rgba(255, 255, 255, 0.3);
  display: flex; align-items: center;
}
.header-top .header-top-area .mail i { margin-right: 7px; }
.header-top .header-top-area .mail:last-child { border-right: 1px solid rgba(255, 255, 255, 0.3); }
@media (max-width: 767px) { .header-top { display: none; } }

.header-wrapper {
  justify-content: space-between;
  align-items: center;
  padding: 15px 0;
}
.header-wrapper .logo { width: 200px; max-height: 80px; }
.header-wrapper .logo a { display: block; }
.header-wrapper .logo img { max-width: 100%; max-height: 100%; }
.header-wrapper .right-area { align-items: center; flex: 1; justify-content: flex-end; }
.header-wrapper .right-area .cmn--btn {
  padding: 0 16px; line-height: 42px; font-size: 14px;
  border-radius: var(--radius); text-transform: capitalize;
}
.header-wrapper .right-area .cmn--btn:hover { border-color: var(--clr-border-hover); }

@media (max-width: 1199px) { .header-wrapper .logo { max-width: 175px; } }
@media (max-width: 450px) {
  .header-wrapper .logo { width: 160px; }
  .header-wrapper .right-area .cmn--btn { font-size: 12px; line-height: 34px; padding: 0 12px; }
}
@media (max-width: 425px) { .header-wrapper .logo { width: 110px !important; } }

.header-section { position: relative; }
.header-section .header-bottom {
  position: absolute;
  left: 0; top: 100%; width: 100%; z-index: 99;
  transition: all var(--duration) var(--ease);
  border-bottom: 1px solid var(--clr-border);
  backdrop-filter: blur(0);
}
.header-section.active .header-bottom {
  background: var(--clr-surface);
  top: 0; position: fixed;
  animation: fadeInDown 0.5s var(--ease);
  backdrop-filter: blur(12px);
  box-shadow: var(--shadow-md);
}

/* Navigation */
.menu { font-family: var(--ff-heading); font-weight: 500; }
.menu li { padding: 0; }
.menu li a { padding: 5px 15px; font-weight: 500; color: var(--clr-title); transition: color var(--duration) var(--ease); }
.menu li a:hover { color: var(--clr-accent); }
.menu li.active a { color: var(--clr-accent); }

@media (max-width: 1199px) { .menu li a { padding: 5px 11px; font-size: 15px; } }

@media (min-width: 992px) {
  .menu { margin-left: auto; }
  .menu li .submenu {
    position: absolute;
    top: calc(100% + 10px); left: 0;
    min-width: 220px;
    background: var(--clr-surface);
    transition: all var(--duration) var(--ease);
    opacity: 0; visibility: hidden;
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--clr-border);
    overflow: hidden;
  }
  .menu li .submenu li a {
    display: flex; justify-content: space-between;
    padding: 8px 20px;
    border-bottom: 1px solid var(--clr-border);
    font-weight: 400;
  }
  .menu li .submenu li .submenu { left: 100%; top: 10px; }
  .menu li .submenu li:hover > .submenu { top: 0; }
  .menu li .submenu li:hover > a { background: var(--clr-accent); color: #fff; padding-left: 24px; }
  .menu li:hover > .submenu { top: 100%; visibility: visible; opacity: 1; }
  .menu > li:last-child .submenu { left: unset; right: 0; }
}

@media (max-width: 991px) {
  .menu {
    width: 100%; position: absolute; top: 100%; left: 0; z-index: 9;
    background: var(--clr-surface);
    overflow: auto; max-height: calc(100vh - 100px);
    transition: all var(--duration) var(--ease);
    transform: scaleY(0); transform-origin: top; display: block;
  }
  .menu.active { transform: scaleY(1); }
  .menu li a {
    display: flex; justify-content: space-between;
    border-bottom: 1px solid var(--clr-border);
    padding: 8px 20px; font-size: 16px;
  }
  .menu li:last-child > a { border: none; }
  .menu li .submenu { padding-left: 20px; display: none; }
  .menu li .submenu li a { font-size: 14px; }
}

/* Hamburger */
.header-bar {
  position: relative; cursor: pointer;
  width: 25px; height: 20px;
}
.header-bar span {
  position: absolute; display: block;
  height: 2.5px; width: 100%;
  transition: all var(--duration) var(--ease);
  background-color: var(--clr-title);
  left: 0; border-radius: 2px;
}
.header-bar span:first-child { top: 0; }
.header-bar span:nth-child(2) { top: 50%; transform: translateY(-50%); }
.header-bar span:last-child { bottom: 0; }
.header-bar.active span:first-child { transform: rotate(45deg) translate(3px, 9px); }
.header-bar.active span:nth-child(2) { opacity: 0; }
.header-bar.active span:last-child { transform: rotate(-45deg) translate(3px, -9px); }

@media (min-width: 576px) { .header-bar { margin-right: 20px; } }
@media (min-width: 992px) { .header-bar { display: none; } }
@media (max-width: 452px) { .header-bar { width: 20px; height: 17px; } }

.menu-item-has-children { position: relative; z-index: 999 !important; }
.menu-item-has-children > a { align-items: center; }
.menu-item-has-children > a::after {
  content: "\f107"; font-weight: 600;
  font-family: "Line Awesome Free"; margin-left: 5px;
  transition: transform var(--duration) var(--ease);
}

/* ============================================
   BANNER
   ============================================ */
.banner-section { background: rgba(15, 25, 50, 0.3); }

.banner-content { padding: 200px 15px; }
.banner-content .banner-title {
  font-size: clamp(2.8rem, 5vw, 4.375rem);
  line-height: 1.15;
  margin-bottom: 40px;
}
.banner-content .banner-txt { font-size: clamp(1.125rem, 2vw, 1.5rem); max-width: 540px; }
.banner-content .btn__grp { margin-top: 40px; }

@media (min-width: 768px) { .banner-content .btn__grp .cmn--btn { padding: 18px 45px; } }
@media (min-width: 992px) { .banner-content { margin-left: auto; max-width: 662px; } }
@media (min-width: 992px) and (max-width: 1399px) {
  .banner-content { max-width: 572px; }
  .banner-content .banner-title { font-size: 3.75rem; line-height: 1.15; }
}
@media (min-width: 992px) and (max-width: 1199px) { .banner-content { max-width: 483px; } }
@media (max-width: 991px) { .banner-content { padding: 180px 0 120px; } }
@media (max-width: 575px) {
  .banner-content .banner-title { margin-bottom: 25px; }
  .banner-content .btn__grp { margin-top: 20px; }
}

.banner-thumb { padding: 100px 50px 0; overflow: hidden; }
@media (min-width: 1400px) { .banner-thumb img { width: 100%; } }
@media (max-width: 1399px) { .banner-thumb img { max-width: 720px; } }
@media (max-width: 1199px) { .banner-thumb img { max-width: 640px; } }
@media (max-width: 991px) { .banner-thumb { padding-top: 30px; width: 100%; text-align: center; } .banner-thumb img { width: 100%; max-width: 520px; } }
@media (max-width: 575px) { .banner-thumb { padding-inline: 15px; } }

@media (min-width: 992px) {
  .banner-thumb-bg { clip-path: polygon(40px 0%, 100% 0%, 100% 100%, 0% 100%); }
  .mw-lg-100 { max-width: 100%; }
}

/* ============================================
   CHOOSE / ABOUT SECTION
   ============================================ */
.choose__item .choose__icon {
  height: 80px; width: 80px; line-height: 80px;
  text-align: center; border-radius: var(--radius-lg);
  font-size: 40px; margin-bottom: 30px;
  background: var(--clr-surface); color: var(--clr-accent);
  border: 1px solid var(--clr-border);
  transition: all var(--duration) var(--ease);
}
.choose__item:hover .choose__icon {
  background: var(--clr-accent); color: #fff;
  box-shadow: var(--shadow-accent);
  transform: translateY(-4px);
}
.choose__item .choose__content .choose__title { font-weight: 500; margin-bottom: 30px; }

@media (min-width: 992px) { .choose-wrapper div[class*="col"]:nth-of-type(even) .choose__item { margin-top: 40px; } }

.about-thumb { direction: rtl; }
.about-thumb img { max-width: 920px; }
@media (max-width: 991px) {
  .pt-max-lg-0 { padding-top: 0; }
  .pb-max-lg-50 { padding-bottom: 50px; }
  .about-thumb img { max-width: 100%; }
}

/* ============================================
   CARDS
   ============================================ */
.card-item { text-align: center; position: relative; }
.card-item .card-thumb {
  margin-bottom: 20px; overflow: hidden;
  border-radius: var(--radius-lg);
  transition: transform var(--duration) var(--ease);
}
.card-item .card-thumb img { max-width: 100%; transition: transform 0.5s var(--ease); }
.card-item:hover .card-thumb img { transform: scale(1.06); }
.card-item .title { font-weight: 500; font-size: 20px; }
.card-item .title a { color: var(--clr-accent); }
.card-item .discount ~ .card-thumb, .card-item .discount ~ .title { opacity: 0.4; }

/* ============================================
   HOW IT WORKS
   ============================================ */
.how__item { padding: 0 30px; text-align: center; position: relative; }
.how__item .shape-bg {
  position: absolute; left: 100%; transform: translateX(-50%);
  width: 100%; top: 33px; height: 25px;
}
@media (max-width: 991px) { .how__item .shape-bg { display: none; } }
.how__item .shape-bg img { width: 100%; height: 100%; object-fit: contain; }

.how__thumb {
  width: 100px; height: 100px; font-size: 30px;
  text-align: center; line-height: 94px;
  border: 3px solid var(--clr-accent);
  border-radius: var(--radius-circle);
  border-top: none; border-right: none;
  transform: rotate(45deg);
  color: var(--clr-accent); background: #fff;
  margin: 0 auto 20px;
  transition: all var(--duration) var(--ease);
}
.how__thumb i { transform: rotate(-45deg); }
.how__item:hover .how__thumb {
  background: var(--clr-accent); color: #fff;
  box-shadow: var(--shadow-accent);
}
div[class*="col"]:nth-of-type(3n + 3) .how__item .shape-bg { display: none; }

/* ============================================
   COUNTERS
   ============================================ */
.counter__item {
  padding: 40px 20px; border-radius: var(--radius-lg);
  background: var(--clr-surface); border: 1px solid var(--clr-border);
  overflow: hidden; color: #fff; position: relative;
  transition: all var(--duration) var(--ease);
}
.counter__item:hover { border-color: var(--clr-accent); transform: translateY(-4px); box-shadow: var(--shadow-accent); }
.counter__item .counter__header { display: flex; align-items: center; }
.counter__item .counter__header .title { margin: 0; color: var(--clr-accent); }
.counter__item .counter__header .title i { font-size: 80%; line-height: 1; }
.counter__item .icon {
  font-size: 50px; line-height: 1; color: var(--clr-title);
  position: absolute; right: 20px; bottom: 20px; opacity: .15;
  transition: all 0.5s var(--ease);
}
.counter__item:hover .icon { opacity: .3; transform: scale(1.5); }
.bg--section .counter__item { background: var(--clr-bg); }

/* ============================================
   TESTIMONIALS
   ============================================ */
.testimonial-item { position: relative; border-radius: var(--radius-lg); }
.testimonial-item .testimonial-thumb {
  width: 100px; height: 100px; border-radius: var(--radius-lg);
  overflow: hidden; border: 2px solid var(--clr-border); margin-bottom: 25px;
}
.testimonial-item .testimonial-thumb img { width: 100%; }
.testimonial-item .testimonial-content .testimonial-header {
  align-items: flex-end; justify-content: space-between; margin: -5px -5px 20px;
}
.testimonial-item .testimonial-content .testimonial-header .name { margin: 5px; }
.testimonial-item .testimonial-content .testimonial-header .info { font-size: 14px; }
.testimonial-item .testimonial-content .testimonial-header .ratings { margin: 5px; }
.testimonial-item .quote {
  font-size: 100px; line-height: 1; position: absolute;
  right: 25px; top: 25px; opacity: .2; color: var(--clr-accent);
}
.ratings { color: #e9ba17; font-size: 18px; }

/* Owl carousel dots */
.owl-dots { display: flex; flex-wrap: wrap; margin: -3px; margin-top: 25px; justify-content: center; }
.owl-dots .owl-dot {
  width: 15px; height: 15px; margin: 3px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-circle);
  transition: all var(--duration) var(--ease);
}
.owl-dots .owl-dot.active { background: var(--clr-accent); }
.owl-dots .owl-dot span { display: block; width: 4px; height: 4px; border-radius: var(--radius-circle); background: var(--clr-accent); }

/* ============================================
   PARTNERS
   ============================================ */
.partner-thumb { position: relative; height: 110px; overflow: hidden; display: block; }
.partner-thumb img { width: 100%; height: 100%; object-fit: contain; filter: grayscale(0); transition: all var(--duration) var(--ease); }
.partner-thumb img:nth-child(2) { position: absolute; left: 0; top: -110px; filter: grayscale(100%); }
.partner-thumb:hover img { transform: translateY(110px); }
.partner-thumb:hover img:nth-child(2) { top: 0; transform: translateY(0); }

/* ============================================
   FOOTER
   ============================================ */
.footer-logo { max-width: 250px; max-height: 300px; margin: 0 auto 30px; }
.footer-logo a { display: block; }
.footer-logo img { width: 100%; }

.footer-links { justify-content: center; }
.footer-links li { padding: 0px 5px; align-items: center; }
.footer-links li a { padding: 5px 10px; color: var(--clr-title); transition: color var(--duration) var(--ease); }
.footer-links li a:hover { color: var(--clr-accent); }
.footer-links li::after { content: "|"; color: var(--clr-accent); font-size: 12px; }
.footer-links li:last-child::after { display: none; }

.footer-top { border-bottom: 1px solid var(--clr-border); }

.footer-bottom { margin: -5px; }
.footer-bottom .copyright { padding: 5px; max-width: 600px; }

@media (max-width: 575px) {
  .footer-bottom { text-align: center; }
  .footer-bottom .social-icons, .footer-bottom .copyright { width: 100%; justify-content: center; }
}

.footer__txt { text-align: center; max-width: 620px; margin: 0 auto; padding: 20px 0 60px; }

.social-icons li { padding: 5px; }
.social-icons li a {
  width: 38px; height: 38px; line-height: 38px;
  text-align: center; border-radius: var(--radius-circle);
  background: rgba(255, 255, 255, 0.08); color: #fff;
  transition: all var(--duration) var(--ease);
}
.social-icons li a:hover {
  border-radius: 40%; background: var(--clr-accent);
  transform: translateY(-3px); box-shadow: var(--shadow-accent);
}

/* ============================================
   FORMS
   ============================================ */
.form--control {
  height: 50px; box-shadow: none !important; outline: none;
  background: var(--clr-surface); border: 1px solid var(--clr-border);
  color: var(--clr-title) !important;
  border-radius: var(--radius);
  transition: border-color var(--duration) var(--ease);
}
.form--control::placeholder { color: var(--clr-text) !important; }
.form--control[type="file"] { height: unset; padding: 12px 20px; line-height: 25px; }
.form--control:focus { background: var(--clr-surface); border-color: var(--clr-accent); }
textarea.form--control { height: 120px; }
.bg--section .form--control { background: var(--clr-bg); }
.form--control:disabled { background-color: #2c3856; opacity: 1; color: #bbb !important; cursor: not-allowed; }

.form--label {
  text-transform: capitalize; font-family: var(--ff-heading);
  color: var(--clr-title); cursor: pointer; margin-bottom: 8px;
}
.form--label i { color: var(--clr-accent); }
.form--group { margin-bottom: 20px; }

.form--check { display: flex; flex-wrap: wrap; padding: 0; }
.form--check:not(:last-child) { margin-bottom: 10px; }
.form--check label { cursor: pointer; font-size: 14px; align-self: center; width: calc(100% - 1.3rem); padding-left: 15px; }
.form--check .form-check-input { margin: 0; height: 1.3rem; width: 1.3rem; }
.form--check .form-check-input:checked { background-color: var(--clr-accent); border-color: var(--clr-accent); }

/* Select */
.select-bar {
  height: 40px !important; margin: 0 15px;
  background: transparent; display: block;
  border-radius: var(--radius); border: 1px solid var(--clr-border);
}
.select-bar select { width: 70px; height: 40px; border: none; background: transparent !important; padding: 0 10px; font-size: 14px; }
.select-bar .current { display: block; margin-top: 2px; }
.select-bar .list { width: 100%; max-height: 200px; overflow-y: auto; background: var(--clr-surface); }
.select-bar .list li { padding: 0 20px; }

@media (max-width: 575px) {
  .select-bar { margin: 0 10px; height: 35px !important; }
  .select-bar select { height: 35px; width: 60px; }
}
@media (max-width: 991px) { .select-bar { margin-left: auto; } }

.langSel {
  background-color: transparent; padding: 10px 20px;
  border: 0 !important;
  border-radius: var(--radius); color: var(--clr-title);
  font-size: 14px;
}
.langSel option { color: #777; }

/* ============================================
   ACCOUNT SECTION
   ============================================ */
.account-section {
  display: flex; flex-wrap: wrap;
  min-height: 100vh; position: relative; z-index: 1;
}
.account-section::before {
  position: absolute; content: ''; inset: 0;
  background-color: var(--clr-surface); opacity: 0.75; z-index: -1;
}
.account-section .left {
  width: 40%; padding: 50px 30px;
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  background-color: var(--clr-surface);
}
.account-section .right {
  width: 60%; display: flex; flex-wrap: wrap;
  justify-content: center; align-items: center;
}
.account-section .form-check { padding-left: 2.1em; }

@media (max-width: 1199px) {
  .account-section { flex-direction: column; justify-content: center; align-items: center; }
  .account-section .right { order: -1; }
  .account-section .left { margin-top: 50px; width: 60%; }
}
@media (max-width: 767px) {
  .account-section .right { width: 70%; }
  .account-section .left { margin-top: 50px; width: 80%; }
}
@media (max-width: 575px) {
  .account-section { padding: 40px 20px; }
  .account-section .right { width: 100%; }
  .account-section .left { margin-top: 30px; width: 100%; }
}

.account__wrapper {
  margin: 0 auto; max-width: 920px; padding: 50px;
  border: 1px dashed rgba(var(--clr-accent-rgb), 0.3);
  border-radius: var(--radius-lg);
}
.account__wrapper .logo { max-width: 280px; margin: 0 auto 30px; }
.account__wrapper .logo a { display: block; }
.account__wrapper .logo a img { width: 100%; }

/* ============================================
   CONTACT
   ============================================ */
.contact__item {
  height: 100%; padding: 32px 30px;
  border: 1px solid var(--clr-border); border-radius: var(--radius-lg);
  align-items: center; word-break: break-word;
  transition: all var(--duration) var(--ease);
}
.contact__item:hover { border-color: var(--clr-accent); transform: translateY(-4px); box-shadow: var(--shadow-md); }
.contact__item .contact__icon {
  width: 70px; height: 70px; text-align: center; line-height: 70px;
  border: 1px solid var(--clr-border);
  background: var(--clr-muted); font-size: 24px;
  color: var(--clr-accent); border-radius: var(--radius-circle);
  transition: all var(--duration) var(--ease);
}
.contact__item:hover .contact__icon { background: var(--clr-accent); color: #fff; box-shadow: var(--shadow-accent); }
.contact__item .contact__body { width: calc(100% - 70px); padding-left: 20px; }
.contact__item .contact__body .contact__title { margin: 0 0 5px; }
.contact__item .contact__body a { color: var(--clr-accent); }
.contact__item .contact__info li { padding: 0; }
.contact__item .contact__info li:not(:last-child) { margin-bottom: 10px; }

@media (max-width: 575px) { .contact__item { padding: 20px 15px; } }

.hero-section { padding: 220px 0 100px; }
@media (max-width: 767px) { .hero-section { padding: 150px 0 50px; } }

.contact__wrapper__1, .contact__wrapper__2 .contact__wrapper__2_inner {
  padding: 50px 30px 30px;
  border: 1px solid var(--clr-border); border-radius: var(--radius-lg);
}
.contact__wrapper__1 { width: 60%; border-right: none; border-radius: var(--radius-lg) 0 0 var(--radius-lg); }
.contact__wrapper__2 { width: 40%; }
.contact__wrapper__2 .contact__wrapper__2_inner { border-left: none; border-radius: 0 var(--radius-lg) var(--radius-lg) 0; }

@media (max-width: 991px) {
  .contact__wrapper__1 { width: 100%; margin-bottom: 40px; border-right: 1px solid var(--clr-border); border-radius: var(--radius-lg); }
  .contact__wrapper__2 { width: 100%; }
  .contact__wrapper__2 .contact__wrapper__2_inner { border-left: 1px solid var(--clr-border); border-radius: var(--radius-lg); }
  .contact__wrapper__2 .contact__wrapper__2_inner.bg--body { background: var(--clr-surface) !important; }
}
@media screen and (max-width: 400px) {
  .contact__wrapper__1, .contact__wrapper__2 .contact__wrapper__2_inner { padding: 30px 15px 15px; }
}

.maps { min-height: 500px; }
@media (max-width: 991px) { .maps { min-height: 300px; } }

/* ============================================
   DASHBOARD
   ============================================ */
.dashboard__item {
  padding: 30px; border-radius: var(--radius-lg);
  margin: 0 auto; position: relative;
  transition: all var(--duration) var(--ease);
  box-shadow: 0 0 10px rgba(var(--clr-accent-rgb), 0.08);
  border: 1px solid var(--clr-border);
  height: 100%; align-items: center; text-align: left;
}
.dashboard__item:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--clr-accent); }
.dashboard__item .dashboard__header { align-items: center; }
.dashboard__item .dashboard__header .title { margin: 0; }
.dashboard__item .dashboard__icon {
  width: 50px; height: 50px; font-size: 30px; line-height: 50px;
  text-align: center; color: #fff;
  background: var(--clr-accent); display: block;
  border-radius: var(--radius-lg); margin: 0;
  transition: all var(--duration) var(--ease);
}
.dashboard__item a { margin: 0; color: rgba(255, 255, 255, 0.9); }
.dashboard__item * { position: relative; }
.dashboard__item .cont { max-width: calc(100% - 60px); padding-left: 20px; }
.dashboard__item .cont .dashboard-header { justify-content: space-between; }
.dashboard__item .cont .dashboard-header .title { font-size: 28px; line-height: 1; }
.dashboard__item:hover .dashboard__icon { background: #fff !important; color: var(--clr-accent); }

div[class*="col"]:nth-of-type(6n + 1) .dashboard__item .dashboard__icon { background: #fe721c; }
div[class*="col"]:nth-of-type(6n + 2) .dashboard__item .dashboard__icon { background: #05bbc9; }
div[class*="col"]:nth-of-type(6n + 3) .dashboard__item .dashboard__icon { background: #ff4b4b; }
div[class*="col"]:nth-of-type(6n + 4) .dashboard__item .dashboard__icon { background: #876cfe; }
div[class*="col"]:nth-of-type(6n + 5) .dashboard__item .dashboard__icon { background: #8e3ff0; }
div[class*="col"]:nth-of-type(6n + 6) .dashboard__item .dashboard__icon { background: var(--clr-accent); }

/* ============================================
   PROFILE
   ============================================ */
.profile-wrapper {
  padding: 30px; border-radius: var(--radius-lg);
  border: 1px solid var(--clr-border);
}
.profile-wrapper .profile-user { text-align: center; width: 100%; max-width: 300px; margin: 0 auto 40px; }
.profile-wrapper .profile-user .thumb { margin-bottom: 20px; }
.profile-wrapper .profile-user .thumb img { max-width: 100%; }
.profile-wrapper .profile-form-area { width: calc(100% - 300px); }
@media (min-width: 992px) { .profile-wrapper .profile-form-area { padding-left: 30px; } }
@media (min-width: 1200px) { .profile-wrapper .profile-form-area { padding-left: 70px; } }
@media (max-width: 991px) { .profile-wrapper .profile-form-area { width: 100%; } }
@media (max-width: 450px) { .profile-wrapper { padding: 30px 15px; } }

.profile-user { position: relative; }
.remove-image { display: none; font-size: 40px; color: var(--clr-danger); right: 0; top: 0; position: absolute; cursor: pointer; line-height: 1; }

/* ============================================
   TABLES
   ============================================ */
.cmn--table {
  margin: 0; border: none; border-radius: var(--radius-lg);
  background: var(--clr-surface); overflow: hidden;
}
.cmn--table thead tr th {
  font-family: var(--ff-heading); padding: 12px 10px;
  text-align: center; border: none;
  background: var(--clr-accent); color: #fff;
}
.cmn--table thead tr th:not(:last-child) { border-right: 1px solid rgba(255, 255, 255, 0.15); }
.cmn--table thead tr th:first-child { border-radius: var(--radius-lg) 0 0 0; }
.cmn--table thead tr th:last-child { border-radius: 0 var(--radius-lg) 0 0; }
.cmn--table tbody { text-align: center; }
.cmn--table tbody tr td {
  color: var(--clr-text); vertical-align: middle;
  padding: 10px 8px; border-color: var(--clr-border);
}
.cmn--table tbody tr td .badge { text-transform: capitalize; }
.cmn--table tbody tr td:not(:last-child) { border-right: 1px solid var(--clr-border); }
.cmn--table tbody tr td .date { font-size: 14px; }

@media (min-width: 992px) {
  .cmn--table { border: 1px solid var(--clr-border); border-top: none; }
  .cmn--table .details { max-width: 260px; margin: 0 auto; font-size: 14px; }
}
@media (max-width: 991px) {
  .cmn--table thead { display: none; }
  .cmn--table tbody tr { display: block; }
  .cmn--table tbody tr:first-child { border-top: 1px solid var(--clr-border); }
  .cmn--table tbody tr td {
    display: flex; align-items: center; justify-content: space-between;
    border-left: 1px solid var(--clr-border); border-right: 1px solid var(--clr-border);
    padding: 10px 15px; text-align: right;
  }
  .cmn--table tbody tr td::before { content: attr(data-label); margin-right: 10px; color: var(--clr-title); font-weight: 500; }
  .cmn--table tbody tr:nth-child(even) { background: var(--clr-muted); }
}
.bg--section .cmn--table { background: var(--clr-bg); }

/* ============================================
   CUSTOM CARD
   ============================================ */
.custom--card {
  height: 100%; border: 1px solid var(--clr-border);
  background: var(--clr-surface); border-radius: var(--radius-lg);
  overflow: hidden;
}
.custom--card .card-header {
  background: var(--clr-muted); margin: -1px -1px 0; padding: 12px;
}
.custom--card .card-header .card-title { text-align: center; margin: 0; color: var(--clr-title); font-size: 18px; }
.custom--card .card-footer { text-align: center; background: transparent; }
.custom--card .form--control[readonly] { background: var(--clr-bg); }
.bg--section .custom--card { background: var(--clr-bg); }

/* ============================================
   DEPOSIT
   ============================================ */
.deposit-item {
  justify-content: space-between; background: var(--clr-surface);
  padding: 20px; border-radius: var(--radius-lg);
  border: 1px solid var(--clr-border);
}
.deposit-item .deposit-thumb { overflow: hidden; border-radius: var(--radius-lg); border: 1px solid var(--clr-border); }
.deposit-item .deposit-thumb, .deposit-item .deposit-content { width: calc(50% - 15px); }
.deposit-item .deposit-thumb img, .deposit-item .deposit-content img { width: 100%; height: 100%; object-fit: cover; }
.deposit-item .deposit-content { align-self: center; }
.deposit-item .deposit-content ul { margin: 0 0 30px; }
.deposit-item .deposit-content ul li { padding: 10px 0; border-bottom: 1px solid var(--clr-border-hover); }
.deposit-item .deposit-content ul li:first-child { border-top: 1px solid var(--clr-border-hover); }

@media screen and (max-width: 540px) {
  .deposit-item { padding: 15px; }
  .deposit-item .deposit-content, .deposit-item .deposit-thumb { width: 100%; }
  .deposit-item .deposit-content { padding: 20px 0 0; }
}

.deposit-preview {
  border-radius: var(--radius-lg); overflow: hidden;
  max-width: 520px; margin: 0 auto; padding: 20px;
  justify-content: center; flex-direction: column; align-items: center;
}
.deposit-preview .deposit-thumb img { max-width: 100%; }
.deposit-preview .deposit-content { margin-top: 30px; width: 100%; }
.deposit-preview .deposit-content ul { width: 100%; }
.deposit-preview .deposit-content ul li { padding: 10px 0; font-size: 14px; }

.btn-close { opacity: 1; }

/* ============================================
   MODALS
   ============================================ */
.cmn--modal .modal-header { background: var(--clr-surface); }
.cmn--modal .modal-header .modal-title { color: var(--clr-title); margin: 0; }
.cmn--modal .modal-content { background: var(--clr-bg); border: none; border-radius: var(--radius-lg); }
.cmn--modal .modal-content * { border-color: var(--clr-border); }
.cmn--modal .modal-content .modal-footer { background: var(--clr-surface); }
.cmn--modal .modal-content .modal-header { padding: 12px 15px; }
.cmn--modal .modal-content .modal-footer { padding: 12px; }
.cmn--modal .modal-content .btn-close {
  background: transparent; padding: 0;
  width: 35px; height: 35px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: none; opacity: 1;
}
.cmn--modal .modal-content .btn-close::before {
  content: "\f00d"; font-family: "Line Awesome Free";
  font-weight: 700; color: var(--clr-danger); font-size: 20px;
}

/* ============================================
   MESSAGES / SUPPORT
   ============================================ */
.message__chatbox { border-radius: var(--radius-lg); border: 1px solid var(--clr-border); }
.message__chatbox__header {
  align-items: center; justify-content: space-between;
  padding: 15px 20px;
  border-bottom: 1px solid var(--clr-border);
  background: var(--clr-muted);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.message__chatbox__header .title { margin: 0; }
.message__chatbox__body { padding: 30px; }
@media (max-width: 575px) { .message__chatbox__body { padding: 15px; } }

.reply-item {
  padding: 20px 0; border: 1px solid var(--clr-border);
  border-radius: var(--radius-lg); align-items: center;
  margin: 10px; background: var(--clr-surface);
}
.reply-item .name-area { padding: 20px; width: 220px; text-align: center; }
.reply-item .name-area .title { margin: 0; font-size: 18px; }
.reply-item .name-area .reply-thumb {
  width: 80px; height: 80px; border-radius: var(--radius-circle);
  overflow: hidden; margin: 0 auto 15px;
}
.reply-item .name-area .reply-thumb img { height: 100%; width: 100%; object-fit: cover; }
.reply-item .content-area { width: calc(100% - 220px); padding: 20px; }
.reply-item .content-area .meta-date { font-size: 14px; line-height: 1.5; margin-bottom: 20px; display: block; }

@media (max-width: 767px) {
  .reply-item { padding: 0; }
  .reply-item .name-area, .reply-item .content-area { width: 100%; border: none; }
  .reply-item .name-area { border-bottom: 1px solid var(--clr-border); }
}

.reply-message-area { margin: -10px; }
.reply-message-area li { padding: 0; }
.reply-message-area li ul { padding-left: 20px; }
@media (min-width: 768px) { .reply-message-area li ul { padding-left: 50px; } }
.bg--section .reply-item { background: var(--clr-bg); }

/* ============================================
   BLOG / POSTS
   ============================================ */
.post__item {
  background: var(--clr-surface); overflow: hidden;
  border-radius: var(--radius-lg);
  border: 1px solid var(--clr-border);
  transition: all var(--duration) var(--ease);
}
.post__item:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.post__item .post__thumb {
  overflow: hidden; border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  position: relative;
}
.post__item .post__thumb a { display: block; }
.post__item .post__thumb .category {
  position: absolute; bottom: 0; left: 0; z-index: 1;
  padding: 4px 15px; border-radius: 0 var(--radius) 0 0;
  background: var(--clr-accent); color: #fff;
  font-family: var(--ff-heading); font-size: 14px; line-height: 24px;
}
.post__item .post__thumb img { width: 100%; transition: transform 0.5s var(--ease); }
.post__item:hover .post__thumb img { transform: scale(1.06); }
.post__item .post__content { padding: 30px; }
.post__item .post__content .post__title { margin-bottom: 20px; }
.post__item .post__content .post__title a {
  display: -webkit-box; -webkit-box-orient: vertical;
  -webkit-line-clamp: 2; text-overflow: ellipsis;
  overflow: hidden; text-decoration: none;
}
.post__item .post__content .meta__date {
  border-left: 4px solid var(--clr-accent);
  border-radius: var(--radius); justify-content: space-between;
  padding: 5px; background: var(--clr-bg);
}
.post__item .post__content .meta__date .meta__item { font-size: 14px; padding: 5px; display: flex; align-items: center; }
.post__item .post__content .meta__date .meta__item i { font-size: 20px; color: var(--clr-accent); margin-right: 6px; }
.post__item .post__read { font-family: var(--ff-heading); margin-top: 25px; color: var(--clr-accent); }

@media (max-width: 991px) { .post__item .post__content { padding: 25px 15px 20px; } }
.bg--section .post__item { background: var(--clr-bg); }
.bg--section .post__item .meta__date { background: var(--clr-surface); }

/* Blog detail */
.post__details .post__header { margin-bottom: 40px; }
.post__details .post__header .post__title { margin-bottom: 8px; }
.post__details .post-meta { margin: -3px -10px 25px; }
.post__details .post-meta li { padding: 3px 10px; }
.post__details .post-meta li i { color: tomato; }
.post__details p { margin-bottom: 30px; }
.post__details .post__thumb { height: 420px; margin-bottom: 30px; }
.post__details .post__thumb img { width: 100%; height: 100%; object-fit: cover; }
.post__details .post__quote { margin-bottom: 30px; }
@media (max-width: 575px) { .post__details .post__thumb { height: unset; } }

.post__quote {
  font-size: clamp(1.125rem, 2vw, 1.5rem);
  line-height: 1.5; font-family: var(--ff-heading);
  color: var(--clr-title); font-style: italic;
  text-align: center; padding: 0 30px;
  border-left: 3px solid var(--clr-accent); border-radius: 2px;
}
@media (max-width: 575px) { .post__quote { padding: 0 15px; } }

/* Tags & share */
.post__tag, .post__share { margin: -5px; }
.post__tag li, .post__share li { padding: 5px; }
.post__share__title { margin-bottom: 10px; }
.post__tag li a {
  font-size: 14px; padding: 5px 15px;
  background: var(--clr-surface); color: var(--clr-title);
  text-decoration: none; border-radius: var(--radius);
  border: 1px solid var(--clr-border);
  transition: all var(--duration) var(--ease);
}
.post__tag li a:hover, .post__tag li a.active { background: var(--clr-accent); color: #fff; border-color: transparent; }

.post__share li a { text-decoration: none; }
.post__share li a i {
  line-height: 35px; width: 35px; height: 35px;
  display: block; text-align: center; color: #fff;
  background: var(--clr-accent); border-radius: var(--radius);
  transition: all var(--duration) var(--ease);
}
.post__share li a i:hover { transform: translateY(-2px); }
.post__share li a i[class*="facebook"] { background: #3b5998; }
.post__share li a i[class*="twitter"] { background: #55acee; }
.post__share li a i[class*="instagram"] { background: #e4405f; }
.post__share li a i[class*="linkedin"] { background: #007bb5; }
.post__share li a i[class*="youtube"] { background: #cd201f; }
.post__share li a i[class*="pinterest"] { background: #007bb5; }
.post__share li a i[class*="vimeo"] { background: #1ab7ea; }

/* ============================================
   SIDEBAR / WIDGETS
   ============================================ */
.blog-sidebar {
  padding: 40px; border-radius: var(--radius-lg);
  border: 1px solid var(--clr-border);
}
@media (min-width: 992px) and (max-width: 1199px) { .blog-sidebar { padding: 30px 20px; } }
@media (max-width: 400px) { .blog-sidebar { padding: 30px 20px; } }

.widget__title { margin-bottom: 10px; }
.widget:not(:last-child) { margin-bottom: 40px; }
.widget.widget__category ul li { padding: 0; }
.widget.widget__category ul li a {
  text-decoration: none; color: var(--clr-title);
  padding: 10px 0; border-bottom: 1px solid var(--clr-border);
  display: block; transition: padding var(--duration) var(--ease);
}
.widget.widget__category ul li a:hover { padding-left: 10px; color: var(--clr-accent); }
.widget.widget__post__area ul li { padding: 10px 0; }
.widget.widget__tags ul { margin: -5px; }
.widget.widget__tags ul li { padding: 5px; }
.widget.widget__tags ul li a {
  padding: 8px 20px; border-radius: var(--radius);
  background: var(--clr-bg); font-size: 14px;
  text-decoration: none; color: var(--clr-title);
  border: 1px solid var(--clr-border);
  transition: all var(--duration) var(--ease);
}
.widget.widget__tags ul li a:hover, .widget.widget__tags ul li a.active {
  background: var(--clr-accent); color: #fff; border-color: transparent;
}

.widget__post { text-decoration: none; }
.widget__post .widget__post__thumb { width: 80px; height: 80px; }
.widget__post .widget__post__thumb img { width: 100%; height: 100%; object-fit: cover; }
.widget__post .widget__post__content { width: calc(100% - 80px); padding-left: 15px; }
.widget__post .widget__post__content .widget__post__title {
  display: -webkit-box; -webkit-box-orient: vertical;
  -webkit-line-clamp: 2; overflow: hidden; text-overflow: ellipsis;
  margin: 0 0 5px;
}
.widget__post .widget__post__content span { font-size: 14px; color: var(--clr-accent); }

/* ============================================
   PRIVACY CONTENT
   ============================================ */
.privacy-content h1, .privacy-content h2, .privacy-content h3,
.privacy-content h4, .privacy-content h5, .privacy-content h6 { color: var(--clr-title) !important; }
.privacy-content p, .privacy-content span, .privacy-content li { color: #f1f1f1 !important; }

/* ============================================
   PAGINATION
   ============================================ */
.pagination { margin: -3px; margin-top: 25px; flex-wrap: wrap; justify-content: center; }
.pagination .page-item { text-align: center; padding: 3px; }
.pagination .page-item a, .pagination .page-item span {
  width: 45px; height: 45px; border-radius: var(--radius);
  background: var(--clr-muted); color: var(--clr-title);
  padding: 0; line-height: 45px; display: block; margin: 0;
  border: 1px solid var(--clr-border);
  transition: all var(--duration) var(--ease);
}
.pagination .page-item a.active, .pagination .page-item span.active { background: var(--clr-accent); color: #fff; }
.pagination .page-item.active span, .pagination .page-item.active a,
.pagination .page-item:hover span, .pagination .page-item:hover a { background: var(--clr-accent); color: #fff; }
.pagination .page-item.disabled span { background: rgba(var(--clr-accent-rgb), 0.3); border: none; color: #fff; }

/* ============================================
   COOKIES
   ============================================ */
.cookies-card {
  width: 520px; padding: 30px; color: #1E2337;
  position: fixed; bottom: 0; left: 0; z-index: 9999;
  border-radius: var(--radius-lg);
}
.cookies-card.bg--default { background-color: #EADFD8; }
.cookies-card__icon {
  width: 55px; height: 55px; border-radius: var(--radius-circle);
  background-color: #DED4CD; font-size: 32px;
  display: inline-flex; justify-content: center; align-items: center;
}
.cookies-btn {
  color: #363636; text-decoration: none;
  padding: 10px 25px; border: 1px solid #848484;
  margin: 3px 5px; display: inline-block;
  border-radius: var(--radius-pill);
  transition: all var(--duration) var(--ease);
}
.cookies-btn:hover { background-color: #DED4CD; }

.cookies-card.style--lg { width: 100%; display: flex; flex-wrap: wrap; align-items: center; }
.cookies-card.style--lg .cookies-card__content { width: calc(100% - (55px + 220px)); padding: 0 25px; }
.cookies-card.style--lg .cookies-card__content * { color: #2C3249 !important; font-size: 15px !important; }
.cookies-card.style--lg .cookies-card__content a { color: var(--clr-accent) !important; }
.cookies-card.style--lg .cookies-card__btn { width: 220px; }

.cookies-card.cookies--dark { color: #EADFD8; background-color: #2C3249; }
.cookies-card.cookies--dark .cookies-btn { color: #EADFD8; }
.cookies-card.cookies--dark .cookies-btn:hover { background-color: #343A50; }
.cookies-card.cookies--dark .cookies-card__icon { background-color: #1E2337; }

@media (max-width: 1399px) { .cookies-card.style--lg, .cookies-card { width: 100%; } }
@media (max-width: 767px) {
  .cookies-card.style--lg { display: block; }
  .cookies-card.style--lg .cookies-card__content { width: 100%; padding: 0; margin-top: 25px; }
  .cookies-card.style--lg .cookies-card__btn { width: 100%; margin-top: 20px; }
}

/* ============================================
   PRELOADER
   ============================================ */
.preloader {
  position: fixed; z-index: 9999999; inset: 0;
  background: var(--clr-surface);
  overflow: hidden; width: 100%; height: 100%;
}
.loader-circle {
  position: absolute; left: 50%; top: 50%;
  width: 120px; height: 120px; border-radius: var(--radius-circle);
  box-shadow: inset 0 0 0 1px var(--clr-border);
  margin-left: -60px; margin-top: -60px;
  display: flex; align-items: center; justify-content: center;
}
.loader-circle img { width: 40%; height: 40%; object-fit: contain; }
.loader-line-mask {
  position: absolute; left: 50%; top: 50%;
  width: 60px; height: 120px;
  margin-left: -60px; margin-top: -60px;
  overflow: hidden; transform-origin: 60px 60px;
  mask-image: linear-gradient(to bottom, #000, transparent);
  animation: rotate 1.2s infinite linear;
}
.loader-line-mask .loader-line {
  width: 120px; height: 120px; border-radius: var(--radius-circle);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.5);
}

@keyframes rotate {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* ============================================
   QUANTITY INPUT
   ============================================ */
.quantity { position: relative; }
.quantity input { padding: 8px 15px; }
.quantity-nav {
  position: absolute; inset: 0;
  display: flex; justify-content: space-between; align-items: center;
  border: 1px solid var(--clr-border);
}
.quantity-nav .quantity-button {
  width: 40px; cursor: pointer; height: 100%;
  display: flex; justify-content: center; align-items: center;
  transition: background var(--duration) var(--ease);
}
.quantity-nav .quantity-button:hover { background: var(--clr-muted); }
.quantity-up { order: 1; border-left: 1px solid var(--clr-border); }
.quantity-down { order: -1; border-right: 1px solid var(--clr-border); }

.bg--shadow { box-shadow: 0 0 10px var(--clr-border); }

/* ============================================
   LANGUAGE DROPDOWN
   ============================================ */
.custom--dropdown { position: relative; width: auto; min-width: max-content; border-radius: var(--radius); padding-right: 20px; }
.custom--dropdown::after {
  content: "\f107"; position: absolute; font-weight: 900;
  font-family: 'Line Awesome Free'; top: 50%; right: 0;
  transform: translateY(-50%); transition: 0.3s ease-in-out;
  font-size: 0.875rem; color: var(--clr-title);
}
.custom--dropdown.open::after { transform: translateY(-50%) rotate(180deg); }
.custom--dropdown > .custom--dropdown__selected { cursor: pointer; font-size: 0.875rem; color: var(--clr-title) !important; }
.custom--dropdown > .dropdown-list {
  position: absolute; background-color: #fff; width: 100%;
  border-radius: var(--radius-lg); box-shadow: 0 12px 24px rgba(21, 18, 51, 0.13);
  opacity: 0; overflow: hidden; transition: 0.25s ease-in-out;
  transform: scaleY(0); transform-origin: top center;
  top: 100%; margin-top: 10px; z-index: -1; visibility: hidden;
  max-height: 230px; overflow-y: auto !important; min-width: max-content;
}
.custom--dropdown.open > .dropdown-list { transform: scale(1); opacity: 1; visibility: visible; z-index: 999 !important; background: #fff !important; }
.dropdown-list > .dropdown-list__item {
  padding: 10px 15px; cursor: pointer;
  transition: var(--duration); font-size: 0.875rem;
}
.dropdown-list > .dropdown-list__item:hover { background-color: var(--clr-accent); color: #fff !important; }
.dropdown-list > .dropdown-list__item, .custom--dropdown > .custom--dropdown__selected { display: flex; align-items: center; flex-wrap: wrap; }
.dropdown-list > .dropdown-list__item .thumb, .custom--dropdown > .custom--dropdown__selected .thumb { max-width: 30px; }
.dropdown-list__item .thumb img { border-radius: var(--radius-circle); height: 20px; width: 20px; }
.dropdown-list > .dropdown-list__item .text, .custom--dropdown > .custom--dropdown__selected .text { width: calc(100% - 30px); }
.custom--dropdown__selected.dropdown-list__item .thumb .flag { border-radius: var(--radius-circle); height: 20px; width: 20px; }

.dark-mode .custom--dropdown > .dropdown-list { background: #0c152a !important; }
.dark-mode .selected-lang { color: #fff; }
.selected-lang { color: #000; }

.two-factor-content { padding: 30px 0; }
.two-factor-content .subtitle { padding-bottom: 30px; border-bottom: 1px solid var(--clr-border); margin-bottom: 40px; }

.supported-title { color: black; }
.dark-mode .supported-title { color: white; }

.bg-trans { background: transparent; }
.radius--10px { border-radius: 10px; }
.read--more {
  width: 30px; height: 30px; line-height: 30px;
  text-align: center; margin-left: 10px;
  font-size: 20px; font-weight: 700; border-radius: var(--radius-circle);
}

.custom-radius div { border-radius: var(--radius) !important; }

/* ============================================
   LIGHT VERSION — SPECIFIC OVERRIDES
   ============================================ */
.light-version .banner-section { background: rgba(255, 255, 255, 0.5); }
.light-version .header-section.active .header-bottom { background: var(--clr-surface) !important; }
.light-version .header-bar span { background: var(--clr-title); }
.light-version .cmn--btn:hover { color: var(--clr-title); }
.light-version .btn__grp .cmn--btn:nth-child(even) { color: var(--clr-title); }
.light-version .btn__grp .cmn--btn:nth-child(even):hover { color: #fff; background: var(--clr-accent); }
.light-version .account-section .left { background-color: var(--clr-surface); }
.light-version .account-section p { color: #e6edff; }
.light-version footer .social-icons li a { background: var(--clr-accent); }
.light-version .dashboard__item:hover .dashboard__icon { background: var(--clr-title) !important; }
.light-version .message__chatbox .add-area .cmn--btn { color: #fff !important; }
.light-version .cmn--modal .modal-header, .light-version .cmn--modal .modal-footer { background-color: #f9f9f9; }
.light-version .cmn--modal .modal-header .modal-title { color: #363636; }
.light-version .cmn--modal .modal-content { background-color: #fff; }
.light-version .privacy-content p, .light-version .privacy-content span, .light-version .privacy-content li { color: #777 !important; }
.light-version .privacy-content h1, .light-version .privacy-content h2, .light-version .privacy-content h3,
.light-version .privacy-content h4, .light-version .privacy-content h5, .light-version .privacy-content h6 { color: #363636 !important; }

@media (max-width: 991px) {
  .light-version .menu li a.cmn--btn { color: #fff; }
  .light-version .menu li .submenu { box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1); }
}

@media (max-width: 991px) {
  .header-section .custom--dropdown { display: inline-block; }
}

/* Template version toggle */
.template-version { position: fixed; top: 50%; margin-top: -40px; right: 0; z-index: 999; cursor: pointer; }
.template-version .chorka {
  background: #fff; display: block; text-align: center;
  border-radius: var(--radius); transition: all var(--duration) var(--ease);
  font-size: 20px; width: 40px; height: 40px; line-height: 40px; color: var(--clr-dark);
}
.template-version .chorka i { width: 40px; height: 40px; line-height: 40px; display: block; }
.light-version .template-version .chorka { background: var(--clr-dark); color: #fff; }
@media (max-width: 767px) { .template-version { top: 40%; } }