@charset "UTF-8";
/*=========================
    1. Start COMMON css
==========================*/
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Roboto:wght@400;500&display=swap");

:root {
  --primary-color: #0072ff;
  --primary-color-rgb: 0, 114, 255;
  --secondary-color: #00c6ff;
  --heading-color: #031031;
  --body-color: #747474;
  --white: #fff;
  --light-gray: #f4f7ff;
  --light-blue-gray: #f2f5fe;
  --black: #0d1034;
  --yellow: #fba31c;
  --roboto: "Roboto", sans-serif;
  --inter: "Inter", sans-serif;
  --bg-gradient-1: linear-gradient(
    180deg,
    var(--primary-color) 0%,
    var(--secondary-color) 140%
  );
  --bg-gradient-2: linear-gradient(
    145deg,
    var(--secondary-color) 0%,
    var(--primary-color) 100%
  );
}

html {
  font-size: 100%;
}

* {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

a {
  color: inherit;
  text-decoration: none;
  -webkit-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s;
}

a:hover,
a:focus {
  color: inherit;
  text-decoration: none;
}

a:focus,
input:focus,
textarea:focus,
button:focus {
  text-decoration: none;
  outline: none;
}

i,
span,
a {
  display: inline-block;
}

h1,
h2,
h3,
h4,
h5 {
  font-weight: 700;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--inter);
  color: var(--heading-color);
  margin: 0px;
  font-weight: 600;
}

h1 {
  font-size: 60px;
  line-height: auto;
}

h2 {
  font-size: 42px;
  line-height: 1.3;
}

h3 {
  font-size: 30px;
  line-height: 1.4;
}

h4 {
  font-size: 22px;
  line-height: 1;
}

h5 {
  font-size: 18px;
  line-height: 1;
}

h6 {
  font-size: 16px;
}

ul,
ol {
  margin: 0px;
  padding: 0px;
  list-style-type: none;
}

p {
  margin: 0px;
}

input,
textarea {
  display: inherit;
}

img {
  max-width: 100%;
}

body {
  font-family: var(--roboto);
  font-weight: normal;
  font-style: normal;
  color: var(--body-color);
  font-size: 16px;
  line-height: 30px;
  overflow-x: hidden;
}

.bg_cover {
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
}

.slick-slide {
  outline: 0;
}

ul.social-link li {
  display: inline-block;
}

.form_group {
  position: relative;
}

.form_control {
  width: 100%;
  padding: 0 20px;
  height: 50px;
  border: none;
}

textarea.form_control {
  padding-top: 15px;
  display: inherit;
}

.container {
  padding: 0 32px;
}

@media only screen and (min-width: 1200px) {
  .container {
    max-width: 1400px;
  }
}

.section-title h2 {
  margin-bottom: 13px;
}

.section-title-white h2,
.section-title-white p {
  color: var(--white);
}

/*===== All bg =====*/
.light-blue-bg {
  background-color: rgba(21, 183, 238, 0.07);
}

.dark-blue-bg {
  background-color: #3a416f;
}

.light-blue-gray {
  background-color: var(--light-blue-gray);
}

/*===== All Button Style =====*/
.main-btn {
  position: relative;
  overflow: hidden;
  font-size: 16px;
  text-transform: capitalize;
  border-radius: 5px;
  letter-spacing: 0.05em;
  font-weight: 500;
  padding: 14px 34px;
  line-height: 1.5;
  z-index: 1;
  color: var(--white);
  background-color: var(--primary-color);
  background-image: var(--bg-gradient-2);
  transition: all 0.3s ease-out;
}

.main-btn::before {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 200%;
  content: "";
  background: var(--heading-color);
  border-radius: 50%;
  transform: translateY(100%);
  transition: transform 0.4s cubic-bezier(0.3, 1, 0.8, 1);
  z-index: -1;
}

.main-btn:hover {
  color: var(--text-white);
  background-color: var(--color-primary);
  transform: translateY(-3px);
}

.main-btn:hover::before {
  transform: translateY(0) scale(2);
}

.main-btn:hover {
  color: var(--white);
  background-color: var(--heading-color);
}

.btn-outline {
  color: var(--primary-color);
  background: var(--white);
}

.btn-outline:hover {
  color: var(--white);
  background: var(--heading-color);
}

.btn-md {
  padding: 12px 24px;
  font-size: 14px;
}

.arrow-btn:after {
  display: inline-block;
  content: "\f061";
  font-family: "Font Awesome 5 Pro";
  font-weight: 600;
  margin-left: 10px;
}

.filled-btn {
  background-color: transparent;
  border: 1px solid var(--primary-color);
}

button {
  border: none;
}

/*
    nice select css
*/
.nice-select {
  width: 100%;
  outline: none;
}

.nice-select.open:after {
  -webkit-transform: none;
  transform: none;
}

.nice-select:after {
  content: "";
  font-family: "Font Awesome 5 Pro";
  right: 20px;
  font-size: 12px;
  font-weight: 400;
  -webkit-transform: none;
  transform: none;
  border: none;
  top: 0;
  margin-top: 0;
  color: #2e2e2e;
}

.nice-select .list {
  width: 100%;
}

/*
    Nice number css
*/
.nice-number {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-pack: stretch;
  -ms-flex-pack: stretch;
  justify-content: stretch;
}

.nice-number input {
  vertical-align: middle;
  -moz-appearance: textfield;
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
  margin: 0;
  text-align: center;
}

.nice-number input::-webkit-inner-spin-button,
.nice-number input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/*
    search
*/
#search-modal {
  background: rgba(23, 26, 33, 0.85);
}

#search-modal .modal-content {
  background: 0 0;
  -webkit-box-shadow: none;
  box-shadow: none;
  border: none;
}

#search-modal .modal-content:focus {
  -webkit-box-shadow: none;
  box-shadow: none;
}

#search-modal .form_control {
  padding-left: 0;
  background: transparent;
  border: none;
  border-bottom: 1px solid #e5e5e5;
  color: var(--white);
  margin-bottom: 0;
  height: 50px;
}

#search-modal .form_control:focus {
  border-color: #fd6350;
}

#search-modal .form_control::-webkit-input-placeholder {
  color: var(--white);
}

#search-modal .form_control::-moz-placeholder {
  color: var(--white);
}

#search-modal .form_control:-ms-input-placeholder {
  color: var(--white);
}

#search-modal .form_control::-ms-input-placeholder {
  color: var(--white);
}

#search-modal .form_control::placeholder {
  color: var(--white);
}

#search-modal .search_btn {
  position: absolute;
  background: transparent;
  top: 10px;
  right: 10px;
  color: var(--white);
}

/*
    Start Preloader css
*/
.preloader {
  background-color: var(--white);
  bottom: 0;
  height: 100%;
  left: 0;
  position: fixed;
  right: 0;
  top: 0;
  width: 100%;
  z-index: 99999;
}

.lds-ellipsis {
  margin: 0 auto;
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  width: 64px;
  text-align: center;
  z-index: 9999;
}

.lds-ellipsis img {
  max-width: 120px;
  max-height: 120px;
  object-fit: contain;
}

.lds-ellipsis span {
  display: inline-block;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background-color: var(--primary-color);
  background-image: var(--bg-gradient-2);
  -webkit-animation: ball-pulse-sync 0.6s 0s infinite ease-in-out;
  animation: ball-pulse-sync 0.6s 0s infinite ease-in-out;
}

.lds-ellipsis span:nth-child(1) {
  -webkit-animation: ball-pulse-sync 0.6s -0.14s infinite ease-in-out;
  animation: ball-pulse-sync 0.6s -0.14s infinite ease-in-out;
}

.lds-ellipsis span:nth-child(2) {
  -webkit-animation: ball-pulse-sync 0.6s -70ms infinite ease-in-out;
  animation: ball-pulse-sync 0.6s -70ms infinite ease-in-out;
}

@-webkit-keyframes ball-pulse-sync {
  33% {
    -webkit-transform: translateY(10px);
    transform: translateY(10px);
  }

  66% {
    -webkit-transform: translateY(-10px);
    transform: translateY(-10px);
  }

  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

@keyframes ball-pulse-sync {
  33% {
    -webkit-transform: translateY(10px);
    transform: translateY(10px);
  }

  66% {
    -webkit-transform: translateY(-10px);
    transform: translateY(-10px);
  }

  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

/*
    End Preloader css
*/
/*
    Start scroll_up css
*/
.back-to-top {
  background: #fd6350;
  border-radius: 50%;
  bottom: 30px;
  color: var(--white);
  cursor: pointer;
  display: none;
  font-size: 20px;
  width: 50px;
  height: 50px;
  line-height: 50px;
  position: fixed;
  right: 30px;
  text-align: center;
  text-decoration: none;
  -webkit-transition: 0.3s;
  transition: 0.3s;
  z-index: 337;
}

.back-to-top:hover,
.back-to-top:focus {
  background: #070346;
  color: var(--white);
}

/*
    End scroll_up css
*/
@-webkit-keyframes play {
  0% {
    -webkit-transform: translateX(-50%) translateY(-50%) translateZ(0)
      scale(0.5);
    transform: translateX(-50%) translateY(-50%) translateZ(0) scale(0.5);
    opacity: 0;
  }

  0% {
    -webkit-transform: translateX(-50%) translateY(-50%) translateZ(0)
      scale(0.5);
    transform: translateX(-50%) translateY(-50%) translateZ(0) scale(0.5);
    opacity: 1;
  }

  100% {
    -webkit-transform: translateX(-50%) translateY(-50%) translateZ(0)
      scale(1.3);
    transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.3);
    opacity: 0;
  }
}

@keyframes play {
  0% {
    -webkit-transform: translateX(-50%) translateY(-50%) translateZ(0)
      scale(0.5);
    transform: translateX(-50%) translateY(-50%) translateZ(0) scale(0.5);
    opacity: 0;
  }

  0% {
    -webkit-transform: translateX(-50%) translateY(-50%) translateZ(0)
      scale(0.5);
    transform: translateX(-50%) translateY(-50%) translateZ(0) scale(0.5);
    opacity: 1;
  }

  100% {
    -webkit-transform: translateX(-50%) translateY(-50%) translateZ(0)
      scale(1.3);
    transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.3);
    opacity: 0;
  }
}

:is(.lc-1, .lc-2, .lc-3) {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
}

:is(.lc-1, .lc-2, .lc-3) * {
  display: inline;
}

.lc-1 {
  -webkit-line-clamp: 1 !important;
  line-clamp: 1 !important;
}

.lc-2 {
  -webkit-line-clamp: 2 !important;
  line-clamp: 2 !important;
}

.lc-3 {
  -webkit-line-clamp: 3 !important;
  line-clamp: 3 !important;
}

/*====================
    End COMMON css
======================*/
/*---=======================
   02. Start Header  css
===========================---*/
.header-area {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 999;
}

.header-area.is-sticky {
  position: fixed;
  background: rgba(255, 255, 255, 0.9);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  box-shadow: 0px 8px 60px rgba(24, 24, 24, 0.05);
  -webkit-animation: sticky 0.8s;
  animation: sticky 0.8s;
}

.header-area .header-top p {
  font-size: 14px;
}

.header-area .header-top {
  border-bottom: 1px solid #e8e8e8;
  background-color: var(--light-blue-gray);
}

.header-area.is-sticky .header-top {
  display: none;
}

/* .header-area.inner-page-header .header-top {
    border-color: rgba(255, 255, 255, .08);
}

.header-area.inner-page-header:not(.is-sticky) :is(.nav-link:not(:is(.active, .menu-dropdown .nav-link)), .header-top p, .header-top a):not(.mobile-menu *) {
	color: var(--white);
} */
.header-area.is-sticky .btn-outline {
  color: var(--white);
  background-color: var(--primary-color);
  background-image: var(--bg-gradient-2);
  border-color: var(--primary-color);
}

.header-area .more-option {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-inline-start: 30px;
}

.header-area .more-option .more-option-toggle {
  z-index: 11;
  font-size: 25px;
  padding: 10px;
}

.header-area .more-option .item {
  position: relative;
  display: flex;
}

.header-area .more-option .item:not(:last-child) {
  -webkit-margin-end: 16px;
  margin-inline-end: 16px;
}

.header-area .navbar-nav {
  margin-inline: auto;
}

.header-area .nav-link {
  position: relative;
  padding-top: 30px;
  padding-bottom: 30px;
  color: var(--heading-color);
  font-weight: 500;
}

.header-area .nav-link.toggle i {
  font-size: 12px;
  -webkit-margin-start: 2px;
  margin-inline-start: 2px;
  transition: transform 0.4s ease-out;
}

.header-area .nav-link.toggle:hover i {
  transform: rotate(-90deg);
}

.header-area .nav-link:hover .menu-dropdown {
  transform: none;
}

.header-area .nav-link:hover,
.header-area .nav-link.active,
.header-area .nav-link:focus {
  color: var(--primary-color);
}

.header-area .main-navbar .navbar {
  position: inherit;
  padding: 0;
}

.header-area .main-navbar .navbar .navbar-brand {
  padding: 0;
  margin: 0;
}

/* .header-area:not(.is-sticky) .navbar-brand img:last-child {
	display: none;
}
.header-area.is-sticky .navbar-brand img:last-child {
	display: block;
}
.header-area.is-sticky .navbar-brand img:first-child {
	display: none;
} */

.header-area .main-navbar .nav-item {
  position: relative;
  margin-left: 15px;
  margin-right: 15px;
}

/* .header-area .main-navbar .nav-item:last-child {
	margin-right: 0;
} */

.header-area .main-navbar .menu-dropdown {
  position: absolute;
  top: auto;
  left: 0;
  z-index: 99;
  opacity: 0;
  width: 200px;
  display: block;
  visibility: hidden;
  list-style: none;
  margin: 0;
  padding: 0;
  border-radius: 5px;
  padding: 15px 0px 15px 0px;
  background-color: var(--white);
  box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.15);
  transform-origin: 0 0;
  transform: scale(0);
  transition: transform 0.3s ease-out;
}

.header-area .main-navbar .menu-dropdown .nav-item {
  margin: 0;
}

.header-area .main-navbar .menu-dropdown .nav-link {
  display: block;
  padding: 5px 30px;
  font-size: 14px;
  -webkit-border-start: 2px solid transparent;
  border-inline-start: 2px solid transparent;
}

.header-area .main-navbar .menu-dropdown .nav-link:hover {
  color: var(--primary-color);
  background-color: var(--light-gray);
}

.header-area .main-navbar .menu-dropdown .nav-link:hover.toggle i {
  transform: translateY(-50%) rotate(-90deg);
}

.header-area .main-navbar .menu-dropdown .nav-link.toggle i {
  position: absolute;
  top: 50%;
  right: 20px;
  transform: translateY(-50%);
}

.header-area .main-navbar .menu-dropdown .nav-link.active {
  border-inline-start-color: var(--primary-color);
}

.header-area .main-navbar .menu-dropdown .menu-dropdown .nav-item {
  margin: 0;
}

.header-area .menu-toggler {
  width: 22px;
  height: 20px;
  padding: 0;
  border: 0;
  background: transparent;
  z-index: 1000;
}

.header-area .menu-toggler:focus {
  box-shadow: none !important;
}

.header-area .menu-toggler span {
  position: relative;
  display: block;
  width: 22px;
  height: 2px;
  background: var(--heading-color);
  border-radius: 10px;
  transition:
    transform 200ms 0ms,
    top 200ms 160ms;
}

.header-area .menu-toggler span:nth-child(1) {
  top: -4px;
}

.header-area .menu-toggler span:nth-child(3) {
  top: 4px;
}

.header-area .menu-toggler.active span:nth-child(1) {
  top: 0;
  transform: rotateZ(45deg);
  transition:
    top 200ms 0ms,
    transform 200ms 160ms;
}

.header-area .menu-toggler.active span:nth-child(2) {
  transform: scale(0);
}

.header-area .menu-toggler.active span:nth-child(3) {
  top: -4px;
  transform: rotateZ(-45deg);
  transition:
    top 200ms 0ms,
    transform 200ms 160ms;
}

.header-area
  .main-navbar
  .navbar-nav
  .nav-item
  .menu-dropdown
  li
  .menu-dropdown {
  top: 0;
  opacity: 0;
  left: 200px;
  visibility: hidden;
  transform: scale(0);
}

.header-area
  .main-navbar
  .navbar-nav
  .nav-item
  .menu-dropdown
  li
  .menu-dropdown
  li
  .menu-dropdown {
  top: 0;
  opacity: 0;
  left: 200px;
  visibility: hidden;
  transform: scale(0);
}

.header-area
  .main-navbar
  .navbar-nav
  .nav-item
  .menu-dropdown
  li
  .menu-dropdown
  li
  .menu-dropdown
  li
  .menu-dropdown {
  top: 0;
  opacity: 0;
  left: 200px;
  visibility: hidden;
  transform: scale(0);
}

.header-area
  .main-navbar
  .navbar-nav
  .nav-item
  .menu-dropdown
  li
  .menu-dropdown
  li
  .menu-dropdown
  li
  .menu-dropdown
  li
  .menu-dropdown {
  top: 0;
  opacity: 0;
  left: 200px;
  visibility: hidden;
  transform: scale(0);
}

.header-area
  .main-navbar
  .navbar-nav
  .nav-item
  .menu-dropdown
  li
  .menu-dropdown
  li
  .menu-dropdown
  li
  .menu-dropdown
  li
  .menu-dropdown
  li
  .menu-dropdown {
  top: 0;
  opacity: 0;
  left: 200px;
  visibility: hidden;
  transform: scale(0);
}

.header-area
  .main-navbar
  .navbar-nav
  .nav-item
  .menu-dropdown
  li
  .menu-dropdown
  li
  .menu-dropdown
  li
  .menu-dropdown
  li
  .menu-dropdown
  li
  .menu-dropdown
  li
  .menu-dropdown {
  top: 0;
  opacity: 0;
  left: 200px;
  visibility: hidden;
  transform: scale(0);
}

.header-area
  .main-navbar
  .navbar-nav
  .nav-item
  .menu-dropdown
  li
  .menu-dropdown
  li
  .menu-dropdown
  li
  .menu-dropdown
  li
  .menu-dropdown
  li
  .menu-dropdown
  li:hover
  .menu-dropdown {
  opacity: 1;
  visibility: visible;
  transform: scale(1);
}

.header-area
  .main-navbar
  .navbar-nav
  .nav-item
  .menu-dropdown
  li
  .menu-dropdown
  li
  .menu-dropdown
  li
  .menu-dropdown
  li
  .menu-dropdown
  li
  .menu-dropdown
  li.active
  a {
  color: var(--primary-color);
}

.header-area
  .main-navbar
  .navbar-nav
  .nav-item
  .menu-dropdown
  li
  .menu-dropdown
  li
  .menu-dropdown
  li
  .menu-dropdown
  li
  .menu-dropdown
  li:hover
  .menu-dropdown {
  opacity: 1;
  visibility: visible;
  transform: scale(1);
}

.header-area
  .main-navbar
  .navbar-nav
  .nav-item
  .menu-dropdown
  li
  .menu-dropdown
  li
  .menu-dropdown
  li
  .menu-dropdown
  li:hover
  .menu-dropdown {
  opacity: 1;
  visibility: visible;
  transform: scale(1);
}

.header-area
  .main-navbar
  .navbar-nav
  .nav-item
  .menu-dropdown
  li
  .menu-dropdown
  li
  .menu-dropdown
  li:hover
  .menu-dropdown {
  opacity: 1;
  visibility: visible;
  transform: scale(1);
}

.header-area
  .main-navbar
  .navbar-nav
  .nav-item
  .menu-dropdown
  li
  .menu-dropdown
  li:hover
  .menu-dropdown {
  opacity: 1;
  visibility: visible;
  transform: scale(1);
}

.header-area
  .main-navbar
  .navbar-nav
  .nav-item
  .menu-dropdown
  li:hover
  .menu-dropdown {
  opacity: 1;
  visibility: visible;
  transform: scale(1);
}

.header-area .main-navbar .navbar-nav .nav-item:hover .menu-dropdown {
  opacity: 1;
  visibility: visible;
  transform: scale(1);
}

.header-area .main-responsive-nav {
  display: none;
}

.header-area .mobile-menu {
  visibility: hidden;
}

@-webkit-keyframes sticky {
  0% {
    top: -50%;
  }

  100% {
    top: 0;
  }
}

@keyframes sticky {
  0% {
    top: -50%;
  }

  100% {
    top: 0;
  }
}

@media (max-width: 1199px) {
  .header-area {
    display: flex;
    flex-direction: column;
    position: relative;
    background: rgba(var(--white-rgb), 0.9);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
    box-shadow: 0px 8px 60px rgba(24, 24, 24, 0.1);
  }

  .header-area .header-top {
    order: -1;
  }

  .header-area.is-sticky {
    position: fixed;
    top: 0;
    width: 100%;
  }

  .header-area .main-responsive-nav {
    display: block;
    height: 60px;
    line-height: 60px;
  }

  .header-area .main-responsive-nav > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .header-area .main-navbar {
    display: none;
  }

  .mobile-menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 0;
    overflow: hidden;
    overflow-y: scroll;
    transition: all 0.8s ease;
    z-index: 999;
  }

  .mobile-menu .mobile-menu-wrapper {
    margin-top: 60px;
    padding: 0 20px 30px;
    display: flex;
    flex-direction: column;
    width: 100%;
    background: var(--white);
    box-shadow: 0px 8px 60px rgba(24, 24, 24, 0.1);
  }

  .mobile-menu .navbar-nav {
    width: 100%;
    -webkit-margin-start: 0;
    margin-inline-start: 0;
  }

  .mobile-menu .navbar-nav li a {
    padding: 10px 0;
    border-bottom: 1px solid rgba(var(--primary-color-rgb), 0.15);
    transition: all 700ms ease;
  }

  .mobile-menu .navbar-nav li ul {
    -webkit-padding-start: 12px;
    padding-inline-start: 12px;
    list-style-type: none;
  }

  .mobile-menu .navbar-nav li li a {
    font-size: 14px;
  }

  .mobile-menu .more-option {
    padding-top: 20px;
    margin-top: 20px;
    justify-content: center;
  }

  .mobile-menu li.nav-item:not(.show) ul {
    display: none;
  }

  .mobile-menu li.nav-item.show > .toggle {
    position: relative;
  }

  .mobile-menu li.nav-item.show > .toggle i::before {
    content: "\f068";
  }

  .mobile-menu .nav-link.toggle {
    position: relative;
  }

  .mobile-menu .nav-link.toggle i {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
  }

  .mobile-menu .nav-link.toggle:hover i {
    transform: translateY(-50%);
  }

  .mobile-menu-active .mobile-menu {
    visibility: visible;
    height: 100vh;
  }
}

.header-area .social-link {
  --size: 36px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.header-area .social-link a {
  text-align: center;
  width: var(--size);
  height: var(--size);
  line-height: var(--size);
  background-color: rgba(255, 255, 255, 0.1);
  color: var(--primary-color);
  font-size: 14px;
}

.header-area .social-link a:last-child {
  margin: 0;
}

.header-area .social-link a:hover {
  color: var(--white);
  background-color: var(--primary-color);
  background-image: var(--bg-gradient-2);
}

/*---=======================
   End Header  css
===========================---*/
/*---=======================
    02. Start Hero  css
===========================---*/
.hero-wrapper-one {
  position: relative;
  overflow: hidden;
  padding: 250px 0 210px;
  background-color: var(--light-blue-gray);
  z-index: 1;
}

.hero-wrapper-one .shape {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  z-index: -1;
}

.mockup {
  position: absolute;
}

.mockup-1 {
  left: 0;
}

.mockup-2 {
  right: 0;
}

.hero-wrapper-one .mockup {
  bottom: 150px;
}

.hero-content h1 {
  margin-bottom: 25px;
}

.hero-wrapper-one .hero-content p {
  font-size: 18px;
  line-height: 30px;
  margin-bottom: 45px;
  max-width: 540px;
}

.hero-wrapper-one .hero-content .search-form-wrapper {
  background-color: rgb(255, 255, 255);
  border-radius: 8px;
  padding: 20px 30px;
  margin-bottom: 20px;
}

.hero-wrapper-one .hero-content .search-form-wrapper form .form_control {
  font-weight: 500;
  font-size: 17px;
  color: #3a416f;
}

.hero-wrapper-one .hero-content .search-form-wrapper form .nice-select:before {
  content: "";
  display: inline-block;
  width: 2px;
  height: 40px;
  background-color: #e8e8e8;
  right: -15px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.hero-wrapper-one
  .hero-content
  .search-form-wrapper
  form
  .form_control::placeholder {
  color: #3a416f;
}

.hero-wrapper-one .hero-content .search-form-wrapper form .nice-select {
  height: 50px;
  line-height: 50px;
  border-radius: 0px;
  border: none;
  font-weight: 500;
  padding: 0;
  color: #3a416f;
}

.hero-wrapper-one .hero-content .search-form-wrapper form .main-btn {
  float: right;
}

.hero-wrapper-one .hero-content .search-form-wrapper form .main-btn i {
  margin-left: 10px;
}

.hero-wrapper-one .hero-content .available-text {
  font-weight: 500;
}

.hero-wrapper-one .hero-content .available-text span {
  color: var(--primary-color);
  font-size: 24px;
}

.breadcrumb-wrpper {
  position: relative;
  padding: 250px 0 130px;
  border-radius: 0 0 40px 40px;
  background-color: var(--light-blue-gray);
  /* background-image: var(--bg-gradient-1); */
}

.breadcrumb-wrpper .mockup-img {
  width: 296px;
  height: 180px;
  z-index: 0;
}

.breadcrumb-wrpper .page-title h1 {
  font-size: 60px;
  line-height: 73px;
}

.breadcrumb-wrpper .mockup {
  bottom: 40px;
}

/* ====== Page Hero (shared breadcrumb/hero across inner pages) ====== */
.page-hero {
  background: linear-gradient(120deg, #F0EBFF 0%, #FFFFFF 80%);
  padding: 140px 0 40px;
  border-bottom: 1px solid #EDF2F7;
}

.page-hero .page-title h1 {
  font-size: 2.25rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  background: linear-gradient(145deg, #2A1E5C 0%, #009FEB 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  line-height: 1.25;
  margin-bottom: 0.5rem;
}

.hero-wrapper-one .banner-image {
  position: relative;
  height: auto;
  min-width: 550px;
  min-height: 550px;
  max-width: 550px;
  max-height: 550px;
  z-index: 2;
}

.hero-wrapper-one .banner-image .image {
  position: absolute;
  z-index: 3;
}

.hero-wrapper-one .banner-image .image.img-1 {
  bottom: 0;
  left: 0;
}

.hero-wrapper-one .banner-image .image.img-2 {
  bottom: 20%;
  right: -7%;
}

.hero-wrapper-one .banner-image .image.img-3 {
  top: 0;
  left: 10%;
}

.hero-wrapper-one .slider-wrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  right: 0;
  width: 100%;
  max-width: 80%;
  transform: translate(-50%, -50%);
  z-index: 2;
}

.hero-wrapper-one .slick-list {
  border-radius: 5px;
  overflow: hidden;
  box-shadow: 0 0 25px 0 rgb(62, 28, 131, 0.1);
}

.hero-wrapper-one .banner-image::before,
.hero-wrapper-one .banner-image::after {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  border-radius: 50%;
}

.hero-wrapper-one .banner-image::after {
  width: calc(100% - 30px);
  height: calc(100% - 30px);
  background: var(--bg-gradient-2);
  z-index: -2;
}

.hero-wrapper-one .banner-image::before {
  width: calc(75% - 30px);
  height: calc(75% - 30px);
  background: var(--white);
  z-index: -1;
}

.hero-wrapper-one .slick-dots {
  display: flex;
  justify-content: center;
  margin: 0;
  padding-top: 16px;
  list-style-type: none;
}

.hero-wrapper-one .slick-dots li {
  margin: 0 0.25rem;
}

.hero-wrapper-one .slick-dots button {
  display: block;
  width: 0.8rem;
  height: 0.8rem;
  padding: 0;
  border: none;
  border-radius: 100%;
  background-color: rgba(var(--primary-color-rgb), 0.15);
  text-indent: -9999px;
}

.hero-wrapper-one .slick-dots li.slick-active button {
  background-color: var(--primary-color);
  background-image: var(--bg-gradient-2);
}

.lines {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100%;
  z-index: -2;
}

.lines .line {
  position: absolute;
  width: 1px;
  height: 100%;
  top: 0;
  left: 50%;
  background: #e8e8e8;
}

.lines .line:nth-child(1) {
  margin-left: -40%;
}

.lines .line:nth-child(1)::after {
  -webkit-animation-delay: 2s;
  animation-delay: 2s;
}

.lines .line:nth-child(2) {
  margin-left: -20%;
}

.lines .line:nth-child(2)::after {
  -webkit-animation-delay: 2.5s;
  animation-delay: 2.5s;
}

.lines .line:nth-child(4) {
  margin-left: 20%;
}

.lines .line:nth-child(4)::after {
  -webkit-animation-delay: 2.5s;
  animation-delay: 2.5s;
}

.lines .line:nth-child(5) {
  margin-left: 40%;
}

.lines .line:nth-child(5)::after {
  -webkit-animation-delay: 2s;
  animation-delay: 2s;
}

.lines .line::after {
  content: "";
  display: block;
  position: absolute;
  height: 30px;
  width: 2px;
  top: -50%;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(
    to bottom,
    rgba(var(--primary-color-rgb), 0) 0%,
    var(--secondary-color) 70%,
    var(--primary-color) 100%
  );
  -webkit-animation: run 5s 0s infinite;
  animation: run 5s 0s infinite;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  -webkit-animation-timing-function: cubic-bezier(0.4, 0.26, 0, 0.97);
  animation-timing-function: cubic-bezier(0.4, 0.26, 0, 0.97);
}

@keyframes run {
  0% {
    top: -50%;
  }

  100% {
    top: 100%;
  }
}

/*---=======================
    End Hero  css
===========================---*/
@media (min-width: 1400px) {
  .custom-container {
    max-width: 1400px;
  }
}

/*---=======================
   02. Start Products  css
===========================---*/
.features-wrapper-one {
  position: relative;
  margin-top: -120px;
  padding: 60px 40px 50px;
  background-color: #fdfdfd;
  /* border: 1px solid rgba(0, 0, 0, 0.1); */
  box-shadow: 0 0 25px 0 rgb(62, 28, 131, 0.1);
  box-sizing: border-box;
  border-radius: 8px;
  z-index: 2;
}

.features-border {
  position: relative;
}

.features-border:last-child:after {
  display: none;
}

.features-border:after {
  position: absolute;
  content: "";
  top: 50%;
  transform: translateY(-50%);
  right: 0;
  width: 1px;
  height: 80%;
  background-color: #e8e8e8;
}

.features-item-one .icon {
  margin-bottom: 23px;
}

.features-item-one .icon img {
  max-height: 45px;
  min-height: 45px;
}

.features-item-one .content h5 {
  margin-bottom: 23px;
}

/* the slides */
.featured-products .slick-slide {
  margin: 0 10px;
}

/* the parent */
.featured-products .slick-list {
  margin: 0 -10px;
}

.featured-arrows {
  display: flex;
  justify-content: flex-end;
}

.featured-arrows .slick-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background-color: #e7edfe;
  color: var(--heading-color);
  cursor: pointer;
  z-index: 1;
  transition: all 0.3s;
}

.featured-arrows .slick-arrow:hover {
  background-color: var(--primary-color);
  background-image: var(--bg-gradient-2);
  color: var(--white);
}

.featured-arrows .slick-arrow.prev {
  margin-right: 20px;
}

/*---=======================
    End Products  css
===========================---*/
/*---=======================
   02. Start Products  css
===========================---*/
.featured-content-box h2 {
  margin-bottom: 5px;
}

.featured-content-box p {
  margin-bottom: 30px;
}

.featured-content-box .main-btn {
  margin-bottom: 20px;
}

.featured-content-box h3 {
  font-size: 20px;
  font-weight: 500;
  color: #555555;
}

.featured-content-box h3 span {
  color: var(--primary-color);
  font-size: 30px;
}

.products-filter-tab .nav-tabs {
  border-bottom: none;
}

.products-filter-tab .nav-link {
  border-radius: 0px;
  font-family: "Inter", sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  border-radius: 5px;
  border: none;
  color: var(--heading-color);
  background-color: var(--white);
  box-shadow: 0 5px 25px rgba(0, 0, 0, 0.08);
  margin-left: 10px;
  margin-right: 10px;
  padding: 10px 24px;
  margin-bottom: 5px;
}

.products-filter-tab .nav-link.active {
  background-color: var(--primary-color);
  background-image: var(--bg-gradient-2);
  color: var(--white);
}

.featured-products .products-item-one {
  box-shadow: unset;
}

.products-item-one {
  overflow: hidden;
  border-radius: 10px;
  border: 1px solid #e8e8e8;
  box-shadow: 0px 30px 50px 0px rgb(8, 0, 42, 0.08);
}

.products-item-one .products-thumb img {
  width: 100%;
  border-radius: 8px 8px 0 0;
}

.products-item-one .products-content {
  padding: 22px 25px 25px;
  background: #fdfdfd;
  box-sizing: border-box;
}

.products-item-one .products-content h3.title {
  font-size: 18px;
  line-height: 26px;
  font-weight: 600;
  margin-bottom: 8px;
}

.products-item-one .products-content h3.title:hover {
  color: var(--primary-color);
}

.products-item-one .products-content p {
  margin-bottom: 0;
}

.products-item-one .products-content p a {
  color: var(--primary-color);
}

.products-item-one .products-content .rating {
  margin-bottom: 20px;
}

.products-item-one .products-content .price {
  float: right;
  font-size: 24px;
  font-weight: 600;
  color: #031031;
}

.products-item-one .products-content .product-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.products-item-one .products-content .product-meta .meta-btn ul li {
  display: inline-block;
}

.products-item-one .products-content .product-meta .meta-btn ul li .demo-btn {
  padding: 8px 20px;
  line-height: 27px;
  border: 1px solid #e8e8e8;
  box-sizing: border-box;
  border-radius: 3px;
}

.products-item-one .products-content .product-meta .meta-btn ul li .icon-btn {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #e8e8e8;
  box-sizing: border-box;
  border-radius: 3px;
}

.products-item-one .products-content .product-meta .meta-btn ul li a:hover {
  color: var(--white);
  background-color: var(--primary-color);
  background-image: var(--bg-gradient-2);
  border-color: var(--white);
}

.products-item-two .products-content {
  padding: 20px 20px 20px;
}

.products-item-two .products-content h3.title {
  font-size: 16px;
  line-height: 24px;
}

/* Products Details */
.products-details-wrapper .products-content h3.title {
  font-size: 30px;
  font-weight: 600;
  line-height: 45px;
}

.products-details-wrapper .products-content .product-meta ul li {
  display: inline-block;
}

.products-details-wrapper .products-content .product-meta > ul > li {
  margin-bottom: 10px;
  margin-right: 20px;
}

.products-details-wrapper .products-content span.author a {
  color: var(--primary-color);
}

.products-details-wrapper .products-content .content-img {
  padding: 20px;
  border: 1px solid #e1e1e1;
  border-radius: 5px;
}

.products-details-wrapper .products-content .button ul li {
  margin-right: 20px;
}

.products-details-wrapper .products-content .button ul li:last-child {
  margin-right: 0px;
}

.products-details-wrapper .products-content .discription-content h4 {
  margin-bottom: 23px;
}

.products-details-wrapper .products-content .discription-content p {
  margin-bottom: 15px;
}

.products-details-wrapper .products-content .discription-content ul.list li {
  font-weight: 500;
  font-size: 16px;
  line-height: 27px;
  color: #000000;
  margin-bottom: 10px;
}

.products-details-wrapper
  .products-content
  .discription-content
  ul.list
  li:before {
  display: inline-block;
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  vertical-align: middle;
  background: #373737;
  margin-right: 10px;
}

.products-details-wrapper
  .products-content
  .discription-content
  ul.list
  li:last-child {
  margin-bottom: 0px;
}

/* Products Sidebar */
.products-filter {
  background-color: var(--primary-color);
  background-image: var(--bg-gradient-1);
  padding: 30px 40px;
  border-radius: 10px;
  margin-bottom: 55px;
  box-shadow: 0px 30px 50px 0px rgb(8, 0, 42, 0.08);
}

.show-text h4 {
  color: var(--white);
  font-weight: 400;
  font-size: 24px;
}

.show-text h4 span {
  font-size: 36px;
}

.products-filter .product-dopdown .nice-select {
  height: 50px;
  line-height: 50px;
  color: #0c1239;
  font-size: 24px;
  font-size: 18px;
}

.sidebar-widget-area.produts-sidebar .widget {
  background: var(--white);
  border: 1px solid rgba(0, 0, 0, 0.05);
  box-shadow: 0px 4px 4px 2px rgba(0, 0, 0, 0.02);
  border-radius: 5px;
}

.sidebar-widget-area.produts-sidebar .widget.search-widget {
  border: none;
  padding: 0;
}

.sidebar-widget-area.produts-sidebar .widget.search-widget form .form_control {
  border: 1px solid rgba(0, 0, 0, 0.05);
  height: 65px;
}

.sidebar-widget-area.produts-sidebar .widget.search-widget form .search-btn {
  position: absolute;
  top: 19px;
  right: 20px;
  background-color: transparent;
  color: #212121;
}

.sidebar-widget-area.produts-sidebar .widget {
  padding: 40px 30px;
}

.sidebar-widget-area.produts-sidebar .widget h4.widget-title:after {
  display: inline-block;
  content: "";
  width: 40px;
  height: 2px;
  background-color: var(--primary-color);
  background-image: var(--bg-gradient-2);
  vertical-align: middle;
  margin-left: 15px;
}

.sidebar-widget-area.produts-sidebar .widget.categories-widget {
  padding-bottom: 32px;
  padding-top: 36px;
}

.sidebar-widget-area.produts-sidebar
  .widget.categories-widget
  ul.category-nav
  > li:last-child {
  margin-bottom: 0px;
}

.sidebar-widget-area.produts-sidebar
  .widget.categories-widget
  ul.category-nav
  > li {
  margin-bottom: 5px;
}

.sidebar-widget-area.produts-sidebar
  .widget.categories-widget
  ul.category-nav
  > li
  > a {
  font-size: 16px;
  font-weight: 500;
  color: var(--heading-color);
}

.sidebar-widget-area.produts-sidebar
  .widget.categories-widget
  ul.category-nav
  ul
  li
  a:hover,
.sidebar-widget-area.produts-sidebar
  .widget.categories-widget
  ul.category-nav
  > li
  > a.active {
  color: var(--primary-color);
}

.sidebar-widget-area.produts-sidebar
  .widget.categories-widget
  ul.category-nav
  li
  ul.cat-submenu {
  padding: 0 15px;
}

.sidebar-widget-area.produts-sidebar .widget.price-range-widget {
  padding: 35px 30px 32px;
}

.price-range-widget .price-number {
  justify-content: space-between;
}

.price-range-widget .price-number span.text {
  width: 60%;
}

.price-range-widget .price-number span.amount {
  width: 80%;
}

.price-range-widget .price-number span.amount input {
  width: 100%;
  border: none;
}

.ui-widget.ui-widget-content {
  border: none;
  background: #dfdada;
  height: 7px;
}

.ui-slider .ui-slider-range {
  background-color: var(--primary-color);
  background-image: var(--bg-gradient-2);
  border-radius: 0px;
}

.ui-state-default,
.ui-widget-content .ui-state-default {
  background: var(--primary-color);
  border: none;
  width: 5px;
  height: 18px;
  outline: none;
}

.ui-slider-horizontal .ui-slider-handle {
  margin: 0;
}

.sidebar-widget-area.produts-sidebar .widget.add-widget {
  padding: 0;
  border: none;
  box-shadow: none;
}

.sidebar-widget-area.produts-sidebar .widget.widget.add-widget .title {
  padding: 15px 30px;
}

.sidebar-widget-area.produts-sidebar .widget.widget.add-widget .title h4 {
  font-size: 24px;
}

.sidebar-widget-area.produts-sidebar .widget.item-info-widget h5 {
  font-size: 20px;
  font-weight: 600;
  line-height: 27px;
  color: #000000;
  margin-bottom: 25px;
}

.widget.item-info-widget .info-table table tbody tr:first-child td {
  border-top: none;
  padding-top: 0;
}

.widget.item-info-widget .info-table table tbody tr:last-child td {
  padding-bottom: 0;
}

.sidebar-widget-area.produts-sidebar .widget.license-widget {
  padding-top: 20px;
}

.license-widget .license-accordion .card {
  background-color: transparent;
  border: none;
  border-radius: 0px;
}

.license-widget .license-accordion .card .card-header {
  background-color: transparent;
  border-radius: 0;
  border: none;
  padding: 15px 0px;
}

.license-widget .license-accordion .card .card-header input[type="radio"] {
  display: none;
}

.license-widget .license-accordion .card .card-header label {
  margin-bottom: 0px;
  width: 100%;
}

.license-widget .license-accordion .card .card-header label span.title {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  line-height: 20px;
  color: #3a416f;
  padding-left: 30px;
}

.license-widget
  .license-accordion
  .card
  .card-header
  input[type="radio"]:checked
  + label
  span:before {
  background-color: var(--white);
}

.license-widget .license-accordion .card .card-header label span.title:before {
  position: absolute;
  top: 5px;
  left: 5px;
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #5c8aff;
  z-index: 1;
}

.license-widget .license-accordion .card .card-header label span.title:after {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: var(--primary-color);
  background-image: var(--bg-gradient-2);
  transition: all 0.3s;
}

.license-widget
  .license-accordion
  .card
  .card-header
  label
  span.title
  span.price {
  font-size: 30px;
  font-weight: 500;
}

.license-widget .license-accordion .card .card-body {
  padding: 0;
}

.license-widget .license-accordion .license-btn {
  display: block;
  text-align: center;
  background: var(--primary-color);
  color: var(--white);
  padding: 10px 40px;
  font-weight: 500;
  margin-top: 20px;
  border-radius: 5px;
}

.sidebar-widget-area.produts-sidebar .widget.item-info-widget {
  padding: 35px 30px 15px;
}

/*---=======================
   02. Start Testimonial  css
===========================---*/
/*---=======================
   02. Start Testimonial  css
===========================---*/
.testimonial-wrapper-one {
  position: relative;
  z-index: 1;
}

.testimonial-wrapper-one .button {
  float: right;
}

.testimonial-wrapper-one .button .main-btn {
  border-color: var(--white);
}

.testimonial-wrapper-one .button .main-btn:hover {
  background-color: var(--white);
  color: var(--primary-color);
}

.testimonial-wrapper-one:after {
  position: absolute;
  top: 0;
  left: 0;
  content: "";
  width: 100%;
  height: 60%;
  background-color: var(--primary-color);
  background-image: var(--bg-gradient-1);
  z-index: -1;
}

/* Testimonial Slider Container */
.testimonial-slider-one.row {
  margin-left: -15px;
  margin-right: -15px;
}

.testimonial-slider-one .col-lg-8 {
  -ms-flex: 0 0 91.666667%;
  flex: 0 0 91.666667%;
  max-width: 91.666667%;
  padding-left: 15px;
  padding-right: 15px;
}

.testimonial-slider-one .col-md-10 {
  -ms-flex: 0 0 100%;
  flex: 0 0 100%;
  max-width: 100%;
}

/* Testimonial Card - 2 Column Layout */
.testimonial-item-one {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 30px;
  padding: 40px 20px;
  background-color: var(--white);
  border: 1px solid rgba(0, 0, 0, 0.05);
  box-sizing: border-box;
  box-shadow: 0px 0px 22px 14px rgba(0, 0, 0, 0.02);
  border-radius: 8px;
  width: 100%;
  transition: all 0.3s ease;
}

.testimonial-item-one:hover {
  box-shadow: 0px 10px 35px 0px rgba(0, 0, 0, 0.08);
  transform: translateY(-5px);
}

/* Left Column - Image */
.testimonial-item-one .wt-thumb {
  min-width: 100px;
  max-width: 100px;
  width: 100px;
  height: 100px;
  flex-shrink: 0;
  border-radius: 8px;
  overflow: hidden;
  background-color: #f5f5f5;
}

.testimonial-item-one .wt-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Right Column - Content */
.testimonial-item-one .wt-content {
  flex: 1;
  width: 100%;
  text-align: left;
  position: relative;
}

/* Quote Icon */
.testimonial-item-one .quote-icon {
  position: absolute;
  top: 0;
  right: 0;
  opacity: 0.5;
  z-index: 1;
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.testimonial-item-one .quote-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  max-width: 80px;
}

/* Client Name with Badge */
.testimonial-item-one .client-name {
  margin: 0 0 8px 0;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--heading-color);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  word-wrap: break-word;
}

/* Occupation */
.testimonial-item-one .position {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--body-color);
  margin-bottom: 15px;
}

/* Comment Text */
.testimonial-item-one .comment {
  font-size: 15px;
  line-height: 1.7;
  color: var(--body-color);
  margin-bottom: 15px;
  text-align: left;
}

/* Rating Stars */
.testimonial-item-one .rating {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Badge Styles */
.badge-source {
  font-size: 11px;
  padding: 3px 10px;
  border-radius: 4px;
  font-weight: 600;
  display: inline-block;
  line-height: 1.3;
  text-transform: capitalize;
  white-space: nowrap;
  margin-left: 0;
}

.badge-envato {
  background-color: #82b440;
  color: #fff;
}

.badge-website {
  background-color: #007bff;
  color: #fff;
}

/* Rating Stars */
ul.rating li {
  display: inline-block;
  margin-right: 5px;
}

ul.rating li i {
  color: var(--yellow);
  font-size: 14px;
}

.testimonial-wrapper-one .slick-slide {
  height: 100%;
}

/* Responsive Testimonial Styles */
@media (max-width: 992px) {
  .testimonial-item-one {
    padding: 35px 30px;
    gap: 25px;
  }

  .testimonial-item-one .wt-thumb {
    min-width: 90px;
    max-width: 90px;
    width: 90px;
    height: 90px;
  }

  .testimonial-item-one .quote-icon {
    width: 75px;
    height: 75px;
  }

  .testimonial-item-one .quote-icon img {
    max-width: 75px;
  }

  .testimonial-item-one .client-name {
    font-size: 17px;
  }

  .testimonial-item-one .comment {
    font-size: 14px;
  }
}

@media (max-width: 768px) {
  .testimonial-item-one {
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 30px 25px;
    gap: 20px;
  }

  .testimonial-item-one .wt-thumb {
    min-width: 85px;
    max-width: 85px;
    width: 85px;
    height: 85px;
    border-radius: 50%;
  }

  .testimonial-item-one .wt-content {
    text-align: center;
  }

  .testimonial-item-one .client-name {
    font-size: 16px;
    justify-content: center;
  }

  .testimonial-item-one .position {
    margin-bottom: 12px;
  }

  .testimonial-item-one .comment {
    font-size: 14px;
    text-align: center;
  }

  .testimonial-item-one .quote-icon {
    position: static;
    width: auto;
    height: auto;
    margin-bottom: 10px;
    display: block;
  }

  .testimonial-item-one .quote-icon img {
    max-width: 45px;
    width: 45px;
    height: auto;
  }
}

@media (max-width: 576px) {
  .testimonial-item-one {
    padding: 25px 15px;
    gap: 15px;
  }

  .testimonial-item-one .wt-thumb {
    min-width: 75px;
    max-width: 75px;
    width: 75px;
    height: 75px;
  }

  .testimonial-item-one .client-name {
    font-size: 14px;
  }

  .testimonial-item-one .position {
    font-size: 12px;
    margin-bottom: 10px;
  }

  .testimonial-item-one .comment {
    font-size: 13px;
    line-height: 1.5;
  }

  .badge-source {
    font-size: 9px;
    padding: 2px 6px;
  }

  .testimonial-item-one .quote-icon {
    position: static;
    width: auto;
    height: auto;
    margin-bottom: 8px;
  }

  .testimonial-item-one .quote-icon img {
    max-width: 35px;
    width: 35px;
    height: auto;
  }

  ul.rating li i {
    font-size: 12px;
  }
}

/*---=======================
     End Testimonial css
===========================---*/
/*---=======================
    Start Newsletter css
===========================---*/
.newsletter-wrapper-one {
  position: relative;
  background-color: var(--light-gray);
  padding: 100px;
  border-radius: 10px;
  z-index: 1;
}

.newsletter-wrapper-one .section-title img {
  margin-bottom: 15px;
}

.newsletter-wrapper-one .shape {
  position: absolute;
  z-index: -1;
}

.newsletter-wrapper-one .shape.shape-1 {
  top: 50px;
  left: 50px;
}

.newsletter-wrapper-one .shape.shape-2 {
  bottom: 50px;
  right: 50px;
}

.newsletter-form .form_group .form_control {
  height: 80px;
  border-radius: 8px;
  padding: 0 25px;
}

.newsletter-form .form_group .main-btn {
  position: absolute;
  top: 15px;
  right: 20px;
}

/*---=======================
    End Newsletter css
===========================---*/
/*---=======================
    Start Blog css
===========================---*/
.post-meta ul li {
  display: inline-block;
}

.post-meta ul li span i {
  margin-right: 10px;
}

.blog-post-item-one .entry-content {
  background-color: #fdfdfd;
  border: 1px solid rgba(0, 0, 0, 0.1);
}

.blog-post-item-one .entry-content .post-meta {
  padding: 15px 30px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.blog-post-item-one .entry-content .post-meta ul li span {
  text-transform: uppercase;
}

.blog-post-item-one .entry-content .post-meta ul li span i {
  margin-right: 10px;
  color: var(--primary-color);
}

.blog-post-item-one .entry-content .content {
  padding: 30px;
}

.blog-post-item-one .entry-content .content h3.title {
  font-size: 20px;
  line-height: 30px;
  margin-bottom: 15px;
}

.blog-post-item-one .entry-content .post-meta ul li span:hover,
.blog-post-item-one .entry-content .content h3.title:hover {
  color: var(--primary-color);
}

.blog-post-item-one .entry-content .content p {
  margin-bottom: 15px;
}

.blog-post-item-one .entry-content .content .btn-link {
  color: #212121;
  font-weight: 500;
}

.blog-post-item-one .entry-content .content .btn-link:hover {
  text-decoration: none;
  color: var(--primary-color);
}

.blog-post-item-one .entry-content .content .btn-link:hover:after {
  background-color: var(--primary-color);
  background-image: var(--bg-gradient-2);
}

.blog-post-item-one .entry-content .content .btn-link:after {
  display: inline-block;
  content: "";
  width: 10px;
  height: 3px;
  background-color: #212121;
  vertical-align: middle;
  margin-left: 5px;
}

/* Blog Details Css */
.blog-details-wrapper .blog-post-item .post-thumbnail {
  margin-bottom: 25px;
}

.blog-details-wrapper .blog-post-item .post-thumbnail img {
  width: 100%;
}

.blog-details-wrapper .blog-post-item .entry-content .post-meta ul li {
  margin-right: 20px;
}

.blog-details-wrapper .blog-post-item .entry-content h3 {
  font-size: 40px;
  line-height: 50px;
  margin-bottom: 20px;
}

.blog-details-wrapper .blog-post-item .entry-content p {
  margin-bottom: 20px;
}

.blog-share ul li {
  margin-right: 15px;
}

.blog-share ul li a {
  color: var(--white);
  padding: 7px 20px;
  border-radius: 30px;
}

.blog-share ul li a.facebook {
  background-color: #275baa;
}

.blog-share ul li a.twitter {
  background-color: #28c8f0;
}

.blog-share ul li a.linkedin {
  background-color: #0e76a8;
}

.blog-share ul li a i {
  margin-right: 10px;
}

.sidebar-widget-area .widget.product-search {
  padding: 10px;
  border-top: none;
}

.sidebar-widget-area .widget {
  padding: 45px 50px 50px;
  border-top: 3px solid var(--primary-color);
  background-color: rgba(18, 82, 245, 0.07);
}

.sidebar-widget-area .widget h4.widget-title {
  font-weight: 500;
  margin-bottom: 25px;
}

.sidebar-widget-area .widget.products-category-widget {
  padding-bottom: 43px;
}

.sidebar-widget-area .widget.products-category-widget .category-nav > li {
  margin-bottom: 20px;
}

.sidebar-widget-area
  .widget.products-category-widget
  .category-nav
  > li:last-child {
  margin-bottom: 0px;
}

.sidebar-widget-area
  .widget.products-category-widget
  .category-nav
  > li
  > a::before {
  display: inline-block;
  content: "\f061";
  font-family: "Font Awesome 5 Pro";
  font-weight: 400;
  margin-right: 10px;
}

.sidebar-widget-area .widget.products-category-widget .category-nav > li ul {
  padding-left: 23px;
}

.sidebar-widget-area .widget.products-category-widget .category-nav li a {
  color: #3a416f;
  font-weight: 500;
}

.sidebar-widget-area .widget.products-category-widget .category-nav li a:hover {
  color: var(--primary-color);
}

.sidebar-widget-area
  .widget.products-category-widget
  .category-nav
  > li
  ul
  > li:before {
  display: inline-block;
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: #3a416f;
  vertical-align: middle;
  margin-right: 10px;
}

.sidebar-widget-area
  .widget.products-category-widget
  .category-nav
  .cat-submenu {
  display: none;
}

.sidebar-widget-area .widget.categories-widget {
  padding-bottom: 40px;
}

.sidebar-widget-area .widget.categories-widget ul.widget-link li {
  padding-bottom: 10px;
  border-bottom: 1px dashed #e5e5e5;
  margin-bottom: 10px;
}

.sidebar-widget-area .widget.categories-widget ul.widget-link li:last-child {
  margin-bottom: 0px;
  padding-bottom: 0px;
  border-bottom: none;
}

.sidebar-widget-area .widget.categories-widget ul.widget-link li a {
  display: block;
  color: #3a416f;
  font-weight: 500;
  font-size: 18px;
}

.sidebar-widget-area .widget.categories-widget ul.widget-link li a span {
  float: right;
}

.sidebar-widget-area .widget.categories-widget ul.widget-link li a:hover {
  color: var(--primary-color);
}

.sidebar-widget-area .widget.widget-tag-cloud {
  padding-bottom: 43px;
}

.sidebar-widget-area .widget.widget-tag-cloud a {
  background-color: rgba(18, 82, 245, 0.15);
  padding: 5px 15px;
  font-weight: 500;
  color: #3a416f;
  margin-right: 2px;
  margin-bottom: 7px;
  transition: all 0.3s;
}

.sidebar-widget-area .widget.widget-tag-cloud a:hover {
  background-color: var(--primary-color);
  background-image: var(--bg-gradient-2);
  color: var(--white);
}

/*---=======================
    End Blog css
===========================---*/
.product-search {
  padding: 10px;
  background-color: rgba(18, 82, 245, 0.071);
  border-left: 3px solid var(--primary-color);
}

.product-search .form_control {
  background-color: transparent;
  font-size: 18px;
  color: #3a416f;
  font-weight: 500;
  height: 45px;
}

.product-search .form_control::placeholder {
  color: #3a416f;
}

.product-search .search-btn {
  position: absolute;
  top: 0;
  right: 0;
  border-radius: 5px;
  width: 45px;
  height: 45px;
  background-color: var(--primary-color);
  background-image: var(--bg-gradient-2);
  font-size: 15px;
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
}

.widget.add-widget {
  text-align: center;
  padding: 0;
  background-color: transparent;
  border-top: none;
}

.sidebar-widget-area .widget.add-widget .title {
  background-color: var(--primary-color);
  background-image: var(--bg-gradient-2);
  padding: 15px 60px;
}

.sidebar-widget-area .widget.add-widget .title h4 {
  color: var(--white);
  line-height: 35px;
}

.sidebar-widget-area .widget.add-widget img {
  width: 100%;
}

/*---=======================
   02. Start Footer css
===========================---*/
.footer-widget {
  background-color: var(--black);
  border-radius: 30px 30px 0 0;
}

.footer-widget .widget h4.widget-title::before {
  position: absolute;
  content: "";
  bottom: -2px;
  left: 0;
  width: 40px;
  height: 3px;
  background-color: var(--primary-color);
  background-image: var(--bg-gradient-2);
}

.footer-widget .widget h4.widget-title {
  position: relative;
  color: var(--white);
  font-size: 20px;
  line-height: 30px;
  margin-bottom: 30px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.footer-widget .widget p {
  color: #d8d9dc;
}

.footer-widget .widget.about-widget .footer-logo {
  margin-bottom: 30px;
}

.footer-widget .widget.footer-nav-widget ul.widget-nav li {
  margin-bottom: 10px;
}

.footer-widget .widget.footer-nav-widget ul.widget-nav li:last-child {
  margin-bottom: 0px;
}

.footer-widget .widget.footer-nav-widget ul.widget-nav li a {
  color: #d8d9dc;
  position: relative;
}

/* .footer-widget .widget.footer-nav-widget ul.widget-nav li a:before {
    display: inline-block;
    content: '';
    width: 8px;
    height: 8px;
    background-color: #373737;
    vertical-align: middle;
    margin-bottom: 4px;
    margin-right: 10px;
} */
.footer-widget .widget.contact-widget .contact-info p {
  margin-bottom: 20px;
  color: #d8d9dc;
}

.footer-widget .widget.footer-nav-widget ul.widget-nav li a:hover,
.footer-widget .widget.contact-widget .contact-info p:hover a {
  color: var(--primary-color);
}

.footer-widget .widget.contact-widget .contact-info p i {
  color: var(--primary-color);
  font-size: 24px;
  margin-right: 15px;
}

.copyright-area {
  background-color: var(--primary-color);
  background-image: var(--bg-gradient-2);
  padding: 25px 0;
}

.copyright-area .copyright-text p {
  color: var(--white);
}

.copyright-area .copyright-social {
  float: right;
}

.copyright-area .copyright-social ul.social-link li {
  margin-left: 5px;
}

.copyright-area .copyright-social ul.social-link li a {
  width: 41px;
  height: 41px;
  text-align: center;
  border-radius: 50%;
  line-height: 41px;
  background-color: rgba(255, 255, 255, 0.05);
  background-image: var(--bg-gradient-2);
  color: var(--white);
}

/*---=======================
    End Footer css
===========================---*/
/*---=======================
   Sart FAQ  css
===========================---*/
.widget.faq-nav-widget {
  padding: 45px 20px 50px;
}

.widget.faq-nav-widget .nav-tabs {
  border-bottom: none;
}

.widget.faq-nav-widget .nav-tabs .nav-link {
  display: block;
  border: none;
  background-color: transparent;
  font-weight: 500;
  font-size: 18px;
  color: #3a416f;
}

.widget.faq-nav-widget .nav-tabs .nav-link.active,
.widget.faq-nav-widget .nav-tabs .nav-link:hover {
  color: var(--primary-color);
}

.faq-wrapper-one .card {
  border-radius: 0px;
  border: none;
}

.faq-wrapper-one .card .card-header {
  background-color: #f9f9f9;
  color: #3a416f;
  font-weight: 500;
  border-bottom: none;
}

.faq-wrapper-one .card .card-header[aria-expanded="true"] {
  background-color: var(--primary-color);
  background-image: var(--bg-gradient-2);
  color: var(--white);
}

.faq-wrapper-one .card .card-header[aria-expanded]:after {
  display: inline-block;
  content: "\f107";
  font-weight: 600;
  font-family: "Font Awesome 5 Pro";
  font-size: 16px;
  float: right;
  transition: all 0.3s;
}

.faq-wrapper-one .card .card-header[aria-expanded="true"]:after {
  transform: rotate(-180deg);
}

.faq-wrapper-one .card .card-body {
  border: 1px solid #f9f9f9;
  border-top: none;
  padding: 15px 20px;
}

/*---=======================
   End FAQ  css
===========================---*/
/*---=======================
   02. Start Service  css
===========================---*/
.service-item-one .service-item {
  position: relative;
  text-align: center;
  padding: 40px 30px;
  border-radius: 7px;
}

.service-item-one .service-item:after {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  height: 5px;
  width: 0;
  border-radius: 3px;
  content: "";
  transition: all 0.3s;
}

.service-item-one .service-item:hover:after {
  width: 100%;
}

.service-item-one .service-column:nth-child(even) {
  margin-top: -40px;
}

.service-item-one .service-column:nth-child(odd) {
  margin-bottom: 40px;
}

.service-item-one .service-item.item-one:hover:after {
  background-color: rgb(18, 82, 245);
}

.service-item-one .service-item.item-two:hover:after {
  background-color: rgb(0, 161, 255);
}

.service-item-one .service-item.item-three:hover:after {
  background-color: rgb(95, 58, 252);
}

.service-item-one .service-item.item-four:hover:after {
  background-color: rgb(253, 97, 49);
}

.service-item-one .service-item.item-one {
  background-color: rgba(18, 82, 245, 0.05);
}

.service-item-one .service-item.item-two {
  background-color: rgba(0, 161, 255, 0.07);
}

.service-item-one .service-item.item-three {
  background-color: rgba(95, 58, 252, 0.07);
}

.service-item-one .service-item.item-four {
  background-color: rgba(253, 97, 49, 0.07);
}

.service-item-one .service-item .icon {
  margin-bottom: 15px;
}

.service-item-one .service-item .info h3.title {
  font-size: 22px;
  margin-bottom: 10px;
}

.service-details-wrapper .servies-item .service-img {
  margin-bottom: 30px;
}

.service-details-wrapper .servies-item .service-img img {
  width: 100%;
}

.service-details-wrapper .servies-item .info p {
  margin-bottom: 30px;
}

.service-details-wrapper .servies-item .info p span {
  color: var(--primary-color);
  font-weight: 700;
}

.service-details-wrapper .servies-item .info h4.features-title {
  margin-bottom: 20px;
}

/*---=======================
   End Service  css
===========================---*/
/*---=======================
   Start Career  css
===========================---*/
.jobs-wrapper-one .single-job {
  background-color: #f8f8f8;
  -webkit-box-shadow: 0 0 20px 0px #dcdcdc;
  box-shadow: 0 0 20px 0px #dcdcdc;
  padding: 30px;
}

.jobs-wrapper-one .single-job h3.title {
  margin-bottom: 15px;
}

.jobs-wrapper-one .single-job p i {
  margin-right: 5px;
  color: var(--primary-color);
}

.job-details-section .job-details-wrapper .job-details h3.title {
  margin-bottom: 20px;
  color: var(--primary-color);
}

.job-details-section .job-details-wrapper .job-details .info {
  margin-bottom: 20px;
}

.job-details-section .job-details-wrapper .job-details .info .label {
  font-weight: 700;
  color: #3a416f;
}

/*---=======================
   Start Career  css
===========================---*/
/*---=======================
   Start Contact css
===========================---*/
.information-item {
  display: flex;
  align-items: center;
  padding: 40px;
  border: 1px solid #e5e5e5;
}

.information-item .icon {
  transition: all 0.3s;
}

.information-item .info {
  margin-left: 20px;
}

.information-item .icon i {
  width: 45px;
  height: 45px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--primary-color);
  color: var(--primary-color);
  transition: all 0.7s;
}

.information-item .info p {
  line-height: 26px;
  font-weight: 500;
  color: #3a416f;
  word-break: break-all;
}

.information-item .info p a:hover {
  color: var(--primary-color);
}

.contact-wrapper .section-title span.span {
  font-weight: 500;
  font-size: 18px;
  color: var(--primary-color);
}

.contact-wrapper .contact-form .form_control {
  height: 60px;
  border: 1px solid #e5e5e5;
  margin-bottom: 20px;
}

.contact-wrapper .contact-form .nice-select {
  height: 60px;
  line-height: 60px;
  border-radius: 0px;
  margin-bottom: 20px;
}

.contact-wrapper .contact-form textarea.form_control {
  height: 150px;
}

/*---=======================
   End Contact css
===========================---*/
/*---=======================
   Start knowledgebase css
===========================---*/
.knowledgebase-item {
  background-color: var(--white);
  box-shadow: 0 10px 30px #e1e1e1;
  padding: 30px;
  border-radius: 5px;
}

.knowledgebase-item h3.title {
  font-size: 20px;
  margin-bottom: 10px;
  line-height: 28px;
}

.knowledgebase-item h3.title:hover {
  color: var(--primary-color);
}

.requirements-nav .card {
  border-radius: 0;
  border: none;
}

.requirements-nav .card .card-header {
  display: block;
  border: none;
  background-color: var(--primary-color);
  background-image: var(--bg-gradient-2);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-grow: 1;
}

.requirements-nav .card .card-header[aria-expanded="true"]:after {
  transform: rotate(-180deg);
}

.requirements-nav .card .card-header[aria-expanded]:after {
  display: inline-block;
  content: "\f107";
  font-family: "Font Awesome 5 Pro";
  font-weight: 600;
  color: var(--white);
  transition: all 0.3s;
}

.requirements-nav .card .card-body ul.list li {
  margin-bottom: 5px;
}

.requirements-nav .card .card-body ul.list li a {
  color: #3a416f;
  font-weight: 500;
}

.requirement-wrapper {
  padding: 25px 30px;
  box-shadow: 20px 37px 102px rgb(0 0 0 / 10%);
  border-radius: 10px;
  background: var(--white);
  overflow: hidden;
}

.requirement-wrapper-content .title {
  margin-bottom: 15px;
}

.requirement-wrapper-content p {
  margin-bottom: 20px;
}

.post-share-date {
  padding: 20px;
  box-shadow: 20px 37px 102px rgb(0 0 0 / 10%);
  border-radius: 10px;
  background: var(--white);
  overflow: hidden;
}

.post-share-date .post-date,
.post-share-date .social-link li span {
  font-weight: 500;
}

.post-share-date .social-link {
  float: right;
}

.post-share-date .social-link li {
  display: inline-block;
  margin-left: 15px;
}

.post-share-date .social-link li span,
.post-share-date .post-date,
.post-share-date .social-link li a {
  color: #3a416f;
}

.post-share-date .social-link li span,
.post-share-date .social-link li a:hover,
.post-share-date .social-link li:focus {
  color: var(--primary-color);
}

/*---=======================
   End knowledgebase css
===========================---*/
/*---=======================
   Start Documentation css
===========================---*/
.documentation-header {
  background-color: var(--primary-color);
  background-image: var(--bg-gradient-1);
  padding: 15px 0;
}

.documentation-navigation .brand-logo {
  color: var(--white);
  font-size: 18px;
  font-weight: 500;
}

.documentation-navigation .nav-right ul li {
  display: inline-block;
}

.documentation-navigation .nav-right {
  float: right;
}

.documentation-navigation .nav-right ul li {
  margin-left: 15px;
}

.documentation-navigation .nav-right ul li a {
  color: var(--white);
}

.documentation-area .doc-item .doc-inner-item {
  display: block;
}

.documentation-area .doc-item .doc-img {
  position: relative;
  overflow: hidden;
}

.documentation-area .doc-item .doc-img .doc-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: auto;
  padding: 10px 15px;
  background-color: rgba(0, 0, 0, 0.8);
}

.documentation-area .doc-item .doc-img img {
  width: 100%;
}

.documentation-area .doc-item .doc-content h3 {
  font-size: 14px;
  line-height: 24px;
  color: var(--white);
}

.documentation-area .doc-item .doc-content span.version {
  font-size: 12px;
  line-height: 24px;
  color: var(--white);
}

/*---=======================
   End Documentation css
===========================---*/
.rate {
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23fbbf24" stroke-width="2" stroke-linejoin="round" width="19" height="16"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>') repeat-x;
  background-size: 19px 16px;
  height: 16px;
  transition: all 0.5s ease-out 0s;
  -webkit-transition: all 0.5s ease-out 0s;
  width: 95px;
  display: inline-block;
  margin-inline-start: -3px;
}

.rating-container li {
  display: inline-block;
}

.rate .rating {
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23fbbf24" width="19" height="16"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>') repeat-x;
  background-size: 19px 16px;
  height: 16px;
}

ul.rating-container {
  margin-bottom: 11px;
}

.brand-logo img {
  max-width: 190px;
}

.footer-widget .widget.about-widget .footer-logo img {
  max-width: 150px;
}

.mockup-img {
  position: absolute;
  background-color: var(--white);
  border-radius: 10px;
  padding: 7px;
  width: 335px;
  height: 220px;
}

.mockup-img img {
  border-radius: 7px;
  width: 100%;
  height: 100%;
}

.mockup-left .mockup-img {
  transform: rotate(33deg);
}

.mockup-left .mockup-img.mockup-img-one {
  top: 31%;
  left: -165px;
}

.mockup-left .mockup-img.mockup-img-two {
  top: 49%;
  left: 135px;
}

.mockup-left .mockup-img.mockup-img-three {
  left: -125px;
  bottom: 21%;
}

.mockup-right .mockup-img {
  transform: rotate(33deg);
}

.mockup-right .mockup-img.mockup-img-one {
  right: 75px;
}

.mockup-right .mockup-img.mockup-img-two {
  right: -12%;
  top: 54%;
}

.mockup-right .mockup-img.mockup-img-three {
  right: 20px;
  bottom: 15%;
}

@media only screen and (min-width: 1200px) and (max-width: 1400px) {
  .mockup-right .mockup-img.mockup-img-two {
    right: -17%;
  }

  .mockup-img {
    width: 280px;
    height: 180px;
  }

  .mockup-right .mockup-img.mockup-img-one {
    right: 25px;
  }

  .mockup-right .mockup-img.mockup-img-three {
    bottom: 22%;
  }

  .mockup-left .mockup-img.mockup-img-one {
    top: 35%;
  }

  .mockup-left .mockup-img.mockup-img-two {
    left: 95px;
  }

  .mockup-left .mockup-img.mockup-img-three {
    left: -125px;
    bottom: 25%;
  }
}

@media only screen and (min-width: 991px) and (max-width: 1200px) {
  .mockup-img {
    width: 270px;
    height: 170px;
  }

  .mockup-left .mockup-img.mockup-img-two {
    top: 50%;
    left: 75px;
  }

  .mockup-right .mockup-img.mockup-img-two {
    right: -16%;
  }
}

@media screen and (max-width: 991px) {
  .mockup-right,
  .mockup-left {
    display: none;
  }
}

img.lazyload {
  opacity: 0;
  filter: blur(5px);
  transition:
    filter 400ms,
    opacity 400ms;
}

img.lazyloaded {
  opacity: 1;
  filter: blur(0);
}

.team-area .content span {
  color: var(--primary-color);
}

.team-area .board-member .image {
  position: relative;
  overflow: hidden;
  padding: 30px;
}

.team-area .board-member .image img {
  border-radius: 10px;
}

.team-area .board-member .image::before {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  width: calc(100% / 2);
  height: calc(100% / 1);
  background-color: var(--primary-color);
  background-image: var(--bg-gradient-2);
  border-radius: 10px 0 0 10px;
  z-index: -1;
}

.team-area .card {
  overflow: hidden;
  border: 0;
  border-radius: 8px;
  box-shadow: 0px 30px 50px 0px rgb(8, 0, 42, 0.08);
}

.team-area .card .card-content {
  padding: 20px;
}

/* .team-area .card-image:after {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 80px;
    height: 80px;
    content: '';
    background-color: var(--primary-color);
    background-image: var(--bg-gradient-2);
    clip-path: polygon(0 0, 100% 0, 0 95%);
    z-index: 1;
    transition: all .3s;
} */
.team-area .social-link {
  --size: 32px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.team-area .social-link a {
  text-align: center;
  width: var(--size);
  height: var(--size);
  line-height: var(--size);
  background-color: rgba(255, 255, 255, 0.1);
  color: var(--white);
  font-size: 14px;
  background-color: var(--primary-color);
  background-image: var(--bg-gradient-2);
  border-radius: 5px;
}

.team-area .social-link a:last-child {
  margin: 0;
}

.text-primary {
  color: var(--primary-color) !important;
}

/* -------------------------- */
/* About page css Start */
/* -------------------------- */

.about-area .about-left img {
  border-radius: 12px;
}
.about-area .about-right .sec-title {
  margin-bottom: 7px;
}
.about-area .about-right .sec-desc {
  max-width: 500px;
}

.about-area .about-right .info-card {
  display: flex;
  gap: 15px;
  align-items: center;
}
.about-area .about-right .info-card .image {
  max-width: 64px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid var(--primary-color);
}
.about-area .about-right .subtitle {
  background: rgb(218 226 253);
  color: rgb(74 81 103);
  padding: 8px 15px;
  border-radius: 30px;
  font-size: 14px;
  line-height: 1;
  margin-bottom: 5px;
}
.about-area .about-right .info-card .dasignation {
  line-height: 1;
  margin-bottom: 5px;
  font-weight: 500;
  font-size: 14px;
}
.about-area .about-right .info-card .name a:hover {
  color: var(--primary-color);
}

@media (max-width: 992.98px) {
  .about-area.pb-100 {
    padding-bottom: 50px;
  }
}
/* ---------- service-area-v2 ----------- */
.service-area-v2 .card {
  padding: 25px 20px;
  border-radius: 15px;
  text-align: center;
  transition: 0.3s ease;
}

.service-area-v2 .card .icon-box {
  width: 64px;
  height: 64px;
  margin: 0 auto 25px;
  background: #ffffff;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
}

.service-area-v2 .card .icon-box img {
  width: 40px;
  transition: all 0.4s ease;
}
.service-area-v2 .card h3 {
  font-size: 16px;
  font-weight: 700;
  color: #1d2b4f;
  margin-bottom: 15px;
}
.service-area-v2 .card p {
  font-size: 16px;
  color: #6c7a92;
  line-height: 1.7;
  margin-bottom: 15px;
}

.service-area-v2 .card:hover {
  transform: translateY(-6px);
}
.service-area-v2 .card:hover .icon-box img {
  transform: rotateY(180deg);
}
.service-area-v2 .card .visit-btn {
  color: var(--primary-color);
  font-size: 16px;
  font-weight: 500;
}

.service-area-v2 .card .visit-btn i {
  margin-inline-start: 6px;
}
.service-area-v2 .grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 20px;
}
.service-area-v2 .grid .card:nth-child(1) {
  background: #eff2fe;
}

.service-area-v2 .grid .card:nth-child(2) {
  background: #eff6fe;
}

.service-area-v2 .grid .card:nth-child(3) {
  background: #f3effe;
}

.service-area-v2 .grid .card:nth-child(4) {
  background: #fbf1eb;
}
@media (max-width: 992px) {
  .service-area-v2 .grid {
    grid-template-columns: repeat(2, 1fr);
  }
  @media (max-width: 992.98px) {
    .service-area-v2.pb-100 {
      padding-bottom: 50px;
    }
  }
}
@media (max-width: 768px) {
  .service-area-v2 .grid {
    grid-template-columns: repeat(1, 1fr);
  }
}

/* ----------- carousel-area-v2 ------------- */
.carousel-area-v2 .products-item-one {
  box-shadow: unset;
}
.carousel-area-v2 .products-item-one .products-content p {
  margin-bottom: 10px;
}
.carousel-area-v2 .slick-slide {
  margin: 0 10px;
}
.carousel-area-v2 .title-inline {
  display: flex;
  justify-content: space-between;
  gap: 15px;
  flex-wrap: wrap;
  align-items: center;
}

.carousel-area-v2 .carousel-arrows {
  display: flex;
  gap: 15px;
}

.carousel-area-v2 .carousel-arrows .slick-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background-color: #e7edfe;
  color: var(--heading-color);
  cursor: pointer;
  z-index: 1;
  transition: all 0.3s;
}

.carousel-area-v2 .carousel-arrows .slick-arrow:hover {
  background-color: var(--primary-color);
  background-image: var(--bg-gradient-2);
  color: var(--white);
}
.carousel-area-v2 .slick-slide {
  height: auto;
}
/* -------------------------- */
/* About page css End */
/* -------------------------- */

/*  Error 404 Badge Fixing */
.error-page-visual {
  position: relative;
  display: inline-block;
  width: 100%;
}
.error-page-badge {
  display: inline-block !important;
  position: relative !important;
  background-color: rgba(0, 136, 255, 0.08) !important;
  color: #0088ff !important;
  padding: 6px 16px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  border-radius: 50px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  margin-bottom: 20px !important;
}

/* 2. Action Buttons Overrides */
.error-page-actions {
  display: flex !important;
  gap: 15px !important;
  align-items: center !important;
  margin-top: 25px !important;
}
/* Filled Home Button styling to match top right nav button */
.error-page-actions .kd-404-btn-filled {
  background-color: #0088ff !important;
  color: #ffffff !important;
  border: 1px solid #0088ff !important;
  padding: 12px 30px !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  border-radius: 6px !important;
  transition: all 0.25s ease-in-out !important;
  box-shadow: 0 4px 12px rgba(0, 136, 255, 0.15) !important;
}
.error-page-actions .kd-404-btn-filled:hover {
  background-color: #0077dd !important;
  border-color: #0077dd !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(0, 136, 255, 0.25) !important;
}
/* Outlined Contact Button styling */
.error-page-actions .kd-404-btn-outline {
  background-color: transparent !important;
  color: #0088ff !important;
  border: 1px solid #0088ff !important;
  padding: 12px 30px !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  border-radius: 6px !important;
  transition: all 0.25s ease-in-out !important;
}
.error-page-actions .kd-404-btn-outline:hover {
  background-color: rgba(0, 136, 255, 0.04) !important;
  border-color: #0088ff !important;
  transform: translateY(-2px) !important;
  color: #0088ff !important;
}

/* Responsive stack for small devices */
@media (max-width: 480px) {
  .error-page-actions {
    flex-direction: column !important;
  }
  .error-page-actions .btn {
    width: 100% !important;
    text-align: center !important;
  }
}

/* ============================================
   INLINE CSS MOVED FROM BLADE FILES
   ============================================ */

/* ----- Shared: product-cat-badge & sale-count (from latest-products, featured-products, about) ----- */
.product-cat-badge {
    display: inline-block;
    background: rgba(0, 159, 235, 0.12);
    color: #009FEB;
    padding: 3px 10px;
    border-radius: 30px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
    width: fit-content;
}
.product-cat-badge i {
    margin-right: 4px;
    font-size: 0.65rem;
}
.sale-count i {
    margin-right: 4px;
    color: #009FEB;
}

/* ----- Home Page: Featured & Latest Products On Sale ----- */
.product-meta-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 6px;
}

.product-meta-top .product-cat-badge {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 0;
    flex-shrink: 1;
    min-width: 0;
}

.product-sale-flash {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: linear-gradient(135deg, var(--item-primary) 0%, #2A1E5C 100%);
    color: white;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: 20px;
    letter-spacing: 0.3px;
    box-shadow: 0 4px 10px rgba(0, 159, 235, 0.25);
    flex-shrink: 0;
    white-space: nowrap;
    line-height: 1.4;
}

.product-old-price {
    font-size: 0.85rem;
    font-weight: 500;
    color: #9aa4b2;
    text-decoration: line-through;
    text-decoration-thickness: 2px;
    text-decoration-color: var(--item-primary);
}

.product-discount-price {
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--item-primary);
    letter-spacing: -0.02em;
}

.products-item-one .products-content .product-author {
    color: var(--item-text-muted);
    font-size: 0.85rem;
    margin-bottom: 8px;
    line-height: 1.5;
}

.product-author a {
    color: var(--item-primary);
    text-decoration: none;
    font-weight: 500;
}

.product-author a:hover {
    text-decoration: underline;
}

.products-item-one.product-on-sale {
    border: 1px solid rgba(0, 159, 235, 0.15);
    box-shadow: 0 8px 24px -6px rgba(0, 159, 235, 0.08), 0 2px 4px rgba(0, 159, 235, 0.04);
}

.products-item-one.product-on-sale:hover {
    border-color: rgba(0, 159, 235, 0.3);
    box-shadow: 0 12px 32px -6px rgba(0, 159, 235, 0.14), 0 4px 8px rgba(0, 159, 235, 0.06);
}
    border: 1px solid rgba(0, 159, 235, 0.15);
    box-shadow: 0 8px 24px -6px rgba(0, 159, 235, 0.08), 0 2px 4px rgba(0, 159, 235, 0.04);
}

.products-item-one.product-on-sale:hover {
    border-color: rgba(0, 159, 235, 0.3);
    box-shadow: 0 12px 32px -6px rgba(0, 159, 235, 0.14), 0 4px 8px rgba(0, 159, 235, 0.06);
}

/* ----- Terms & Conditions Page ----- */
:root {
    --terms-heading-color: #031031;
    --terms-body-color: #747474;
    --terms-white: #ffffff;
    --terms-light-blue-gray: #f2f5fe;
    --terms-border-color: #e9ecf1;
    --terms-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.04);
    --terms-shadow: 0 1px 4px rgba(0, 0, 0, 0.06), 0 4px 18px rgba(0, 0, 0, 0.05);
    --terms-radius-sm: 6px;
    --terms-radius: 10px;
    --terms-radius-lg: 14px;
}

.terms-page {
    background-color: #f9fafb;
}

.terms-page .page-wrapper {
    max-width: 1400px;
    margin: 0 auto;
    padding: 32px 32px 80px;
    display: flex;
    gap: 36px;
    align-items: flex-start;
}

.terms-page .toc-sidebar {
    position: sticky;
    top: 120px;
    width: 230px;
    flex-shrink: 0;
    max-height: calc(100vh - 140px);
    overflow-y: auto;
    padding-right: 10px;
    scrollbar-width: thin;
    scrollbar-color: #d1d5db transparent;
}

.terms-page .toc-sidebar::-webkit-scrollbar {
    width: 4px;
}

.terms-page .toc-sidebar::-webkit-scrollbar-track {
    background: transparent;
}

.terms-page .toc-sidebar::-webkit-scrollbar-thumb {
    background: #d1d5db;
    border-radius: 10px;
}

.terms-page .toc-card {
    background: var(--terms-white);
    border: 1px solid var(--terms-border-color);
    border-radius: var(--terms-radius);
    padding: 20px 16px;
    box-shadow: var(--terms-shadow-sm);
}

.terms-page .toc-title {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: #8b919e;
    font-weight: 700;
    margin-bottom: 14px;
    padding-left: 6px;
}

.terms-page .toc-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 1px;
    margin: 0;
    padding: 0;
}

.terms-page .toc-list li a {
    display: block;
    padding: 8px 12px;
    font-size: 0.83rem;
    color: var(--terms-body-color);
    text-decoration: none;
    border-radius: var(--terms-radius-sm);
    transition: all 0.18s ease;
    border-left: 2px solid transparent;
    line-height: 1.5;
    font-weight: 500;
}

.terms-page .toc-list li a:hover {
    background: var(--terms-light-blue-gray);
    color: var(--terms-heading-color);
    border-left-color: #c4d5f0;
}

.terms-page .toc-list li a.active {
    background: rgba(0, 114, 255, 0.08);
    color: var(--primary-color);
    font-weight: 600;
    border-left-color: var(--primary-color);
}

.terms-page .main-content {
    flex: 1;
    min-width: 0;
    background: var(--terms-white);
    border-radius: var(--terms-radius-lg);
    padding: 44px 48px;
    box-shadow: var(--terms-shadow);
    border: 1px solid var(--terms-border-color);
}

.terms-page .last-updated {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.8rem;
    color: #5f6877;
    background: var(--terms-light-blue-gray);
    padding: 6px 16px;
    border-radius: 20px;
    margin-bottom: 30px;
    border: 1px solid #eef1f7;
    font-weight: 500;
}

.terms-page .last-updated .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #22c55e;
    flex-shrink: 0;
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.18);
}

.terms-page h1 {
    font-weight: 700;
    font-size: 2.1rem;
    letter-spacing: -0.03em;
    margin-bottom: 12px;
    color: var(--terms-heading-color);
    line-height: 1.25;
}

.terms-page .intro-text {
    color: var(--terms-body-color);
    font-size: 1rem;
    margin-bottom: 36px;
    line-height: 1.8;
    padding-bottom: 26px;
    border-bottom: 1px solid #edf0f4;
}

.terms-page .section {
    margin-bottom: 34px;
}

.terms-page .section:last-child {
    margin-bottom: 0;
}

.terms-page .section h2 {
    font-size: 1.22rem;
    font-weight: 700;
    color: var(--terms-heading-color);
    margin-bottom: 12px;
    letter-spacing: -0.01em;
    position: relative;
    padding-left: 18px;
}

.terms-page .section h2::before {
    content: '';
    position: absolute;
    left: 0;
    top: 5px;
    bottom: 5px;
    width: 4px;
    background: var(--bg-gradient-2);
    border-radius: 4px;
}

.terms-page .section p,
.terms-page .section li {
    color: var(--terms-body-color);
    font-size: 0.96rem;
    line-height: 1.85;
    margin-bottom: 8px;
}

.terms-page .section ul {
    padding-left: 22px;
    margin-bottom: 10px;
}

.terms-page .section ul li {
    margin-bottom: 5px;
    list-style-type: disc;
    padding-left: 3px;
}

.terms-page .section ul li::marker {
    color: #bcc3d0;
    font-size: 0.7rem;
}

.terms-page .company-name {
    font-weight: 700;
    color: var(--terms-heading-color);
}

.terms-page .contact-real a {
    color: var(--primary-color);
    text-decoration: none;
    font-weight: 600;
    transition: color 0.2s;
}

.terms-page .contact-real a:hover {
    color: #0055cc;
    text-decoration: underline;
}

/* ----- Refund Policy Page ----- */
:root {
    --refund-heading-color: #031031;
    --refund-body-color: #747474;
    --refund-white: #ffffff;
    --refund-light-blue-gray: #f2f5fe;
    --refund-border-color: #e9ecf1;
    --refund-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.04);
    --refund-shadow: 0 1px 4px rgba(0, 0, 0, 0.06), 0 4px 18px rgba(0, 0, 0, 0.05);
    --refund-radius-sm: 6px;
    --refund-radius: 10px;
    --refund-radius-lg: 14px;
}

.refund-page {
    background-color: #f9fafb;
}

.refund-page .page-wrapper {
    max-width: 1400px;
    margin: 0 auto;
    padding: 32px 32px 80px;
    display: flex;
    gap: 36px;
    align-items: flex-start;
}

.refund-page .toc-sidebar {
    position: sticky;
    top: 120px;
    width: 230px;
    flex-shrink: 0;
    max-height: calc(100vh - 140px);
    overflow-y: auto;
    padding-right: 10px;
    scrollbar-width: thin;
    scrollbar-color: #d1d5db transparent;
}

.refund-page .toc-sidebar::-webkit-scrollbar {
    width: 4px;
}

.refund-page .toc-sidebar::-webkit-scrollbar-track {
    background: transparent;
}

.refund-page .toc-sidebar::-webkit-scrollbar-thumb {
    background: #d1d5db;
    border-radius: 10px;
}

.refund-page .toc-card {
    background: var(--refund-white);
    border: 1px solid var(--refund-border-color);
    border-radius: var(--refund-radius);
    padding: 20px 16px;
    box-shadow: var(--refund-shadow-sm);
}

.refund-page .toc-title {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: #8b919e;
    font-weight: 700;
    margin-bottom: 14px;
    padding-left: 6px;
}

.refund-page .toc-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 1px;
    margin: 0;
    padding: 0;
}

.refund-page .toc-list li a {
    display: block;
    padding: 8px 12px;
    font-size: 0.83rem;
    color: var(--refund-body-color);
    text-decoration: none;
    border-radius: var(--refund-radius-sm);
    transition: all 0.18s ease;
    border-left: 2px solid transparent;
    line-height: 1.5;
    font-weight: 500;
}

.refund-page .toc-list li a:hover {
    background: var(--refund-light-blue-gray);
    color: var(--refund-heading-color);
    border-left-color: #c4d5f0;
}

.refund-page .toc-list li a.active {
    background: rgba(0, 114, 255, 0.08);
    color: var(--primary-color);
    font-weight: 600;
    border-left-color: var(--primary-color);
}

.refund-page .main-content {
    flex: 1;
    min-width: 0;
    background: var(--refund-white);
    border-radius: var(--refund-radius-lg);
    padding: 44px 48px;
    box-shadow: var(--refund-shadow);
    border: 1px solid var(--refund-border-color);
}

.refund-page .last-updated {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.8rem;
    color: #5f6877;
    background: var(--refund-light-blue-gray);
    padding: 6px 16px;
    border-radius: 20px;
    margin-bottom: 30px;
    border: 1px solid #eef1f7;
    font-weight: 500;
}

.refund-page .last-updated .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #22c55e;
    flex-shrink: 0;
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.18);
}

.refund-page h1 {
    font-weight: 700;
    font-size: 2.1rem;
    letter-spacing: -0.03em;
    margin-bottom: 12px;
    color: var(--refund-heading-color);
    line-height: 1.25;
}

.refund-page .intro-text {
    color: var(--refund-body-color);
    font-size: 1rem;
    margin-bottom: 36px;
    line-height: 1.8;
    padding-bottom: 26px;
    border-bottom: 1px solid #edf0f4;
}

.refund-page .section {
    margin-bottom: 34px;
}

.refund-page .section:last-child {
    margin-bottom: 0;
}

.refund-page .section h2 {
    font-size: 1.22rem;
    font-weight: 700;
    color: var(--refund-heading-color);
    margin-bottom: 12px;
    letter-spacing: -0.01em;
    position: relative;
    padding-left: 18px;
}

.refund-page .section h2::before {
    content: '';
    position: absolute;
    left: 0;
    top: 5px;
    bottom: 5px;
    width: 4px;
    background: var(--bg-gradient-2);
    border-radius: 4px;
}

.refund-page .section p,
.refund-page .section li {
    color: var(--refund-body-color);
    font-size: 0.96rem;
    line-height: 1.85;
    margin-bottom: 8px;
}

.refund-page .section ul {
    padding-left: 22px;
    margin-bottom: 10px;
}

.refund-page .section ul li {
    margin-bottom: 5px;
    list-style-type: disc;
    padding-left: 3px;
}

.refund-page .section ul li::marker {
    color: #bcc3d0;
    font-size: 0.7rem;
}

.refund-page .company-name {
    font-weight: 700;
    color: var(--refund-heading-color);
}

.refund-page .contact-real a {
    color: var(--primary-color);
    text-decoration: none;
    font-weight: 600;
    transition: color 0.2s;
}

.refund-page .contact-real a:hover {
    color: #0055cc;
    text-decoration: underline;
}

/* ----- Privacy Policy Page ----- */
:root {
    --privacy-heading-color: #031031;
    --privacy-body-color: #747474;
    --privacy-white: #ffffff;
    --privacy-light-blue-gray: #f2f5fe;
    --privacy-border-color: #e9ecf1;
    --privacy-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.04);
    --privacy-shadow: 0 1px 4px rgba(0, 0, 0, 0.06), 0 4px 18px rgba(0, 0, 0, 0.05);
    --privacy-radius-sm: 6px;
    --privacy-radius: 10px;
    --privacy-radius-lg: 14px;
}

.privacy-policy-page {
    background-color: #f9fafb;
}

.privacy-policy-page .page-wrapper {
    max-width: 1400px;
    margin: 0 auto;
    padding: 32px 32px 80px;
    display: flex;
    gap: 36px;
    align-items: flex-start;
}

.privacy-policy-page .toc-sidebar {
    position: sticky;
    top: 120px;
    width: 230px;
    flex-shrink: 0;
    max-height: calc(100vh - 140px);
    overflow-y: auto;
    padding-right: 10px;
    scrollbar-width: thin;
    scrollbar-color: #d1d5db transparent;
}

.privacy-policy-page .toc-sidebar::-webkit-scrollbar {
    width: 4px;
}

.privacy-policy-page .toc-sidebar::-webkit-scrollbar-track {
    background: transparent;
}

.privacy-policy-page .toc-sidebar::-webkit-scrollbar-thumb {
    background: #d1d5db;
    border-radius: 10px;
}

.privacy-policy-page .toc-card {
    background: var(--privacy-white);
    border: 1px solid var(--privacy-border-color);
    border-radius: var(--privacy-radius);
    padding: 20px 16px;
    box-shadow: var(--privacy-shadow-sm);
}

.privacy-policy-page .toc-title {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: #8b919e;
    font-weight: 700;
    margin-bottom: 14px;
    padding-left: 6px;
}

.privacy-policy-page .toc-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 1px;
    margin: 0;
    padding: 0;
}

.privacy-policy-page .toc-list li a {
    display: block;
    padding: 8px 12px;
    font-size: 0.83rem;
    color: var(--privacy-body-color);
    text-decoration: none;
    border-radius: var(--privacy-radius-sm);
    transition: all 0.18s ease;
    border-left: 2px solid transparent;
    line-height: 1.5;
    font-weight: 500;
}

.privacy-policy-page .toc-list li a:hover {
    background: var(--privacy-light-blue-gray);
    color: var(--privacy-heading-color);
    border-left-color: #c4d5f0;
}

.privacy-policy-page .toc-list li a.active {
    background: rgba(0, 114, 255, 0.08);
    color: var(--primary-color);
    font-weight: 600;
    border-left-color: var(--primary-color);
}

.privacy-policy-page .main-content {
    flex: 1;
    min-width: 0;
    background: var(--privacy-white);
    border-radius: var(--privacy-radius-lg);
    padding: 44px 48px;
    box-shadow: var(--privacy-shadow);
    border: 1px solid var(--privacy-border-color);
}

.privacy-policy-page .last-updated {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.8rem;
    color: #5f6877;
    background: var(--privacy-light-blue-gray);
    padding: 6px 16px;
    border-radius: 20px;
    margin-bottom: 30px;
    border: 1px solid #eef1f7;
    font-weight: 500;
}

.privacy-policy-page .last-updated .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #22c55e;
    flex-shrink: 0;
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.18);
}

.privacy-policy-page h1 {
    font-weight: 700;
    font-size: 2.1rem;
    letter-spacing: -0.03em;
    margin-bottom: 12px;
    color: var(--privacy-heading-color);
    line-height: 1.25;
}

.privacy-policy-page .intro-text {
    color: var(--privacy-body-color);
    font-size: 1rem;
    margin-bottom: 36px;
    line-height: 1.8;
    padding-bottom: 26px;
    border-bottom: 1px solid #edf0f4;
}

.privacy-policy-page .intro-text strong {
    color: var(--privacy-heading-color);
    font-weight: 700;
}

.privacy-policy-page .section {
    margin-bottom: 34px;
}

.privacy-policy-page .section:last-child {
    margin-bottom: 0;
}

.privacy-policy-page .section h2 {
    font-size: 1.22rem;
    font-weight: 700;
    color: var(--privacy-heading-color);
    margin-bottom: 12px;
    letter-spacing: -0.01em;
    position: relative;
    padding-left: 18px;
}

.privacy-policy-page .section h2::before {
    content: '';
    position: absolute;
    left: 0;
    top: 5px;
    bottom: 5px;
    width: 4px;
    background: var(--bg-gradient-2);
    border-radius: 4px;
}

.privacy-policy-page .section p,
.privacy-policy-page .section li {
    color: var(--privacy-body-color);
    font-size: 0.96rem;
    line-height: 1.85;
    margin-bottom: 8px;
}

.privacy-policy-page .section ul {
    padding-left: 22px;
    margin-bottom: 10px;
}

.privacy-policy-page .section ul li {
    margin-bottom: 5px;
    list-style-type: disc;
    padding-left: 3px;
}

.privacy-policy-page .section ul li::marker {
    color: #bcc3d0;
    font-size: 0.7rem;
}

.privacy-policy-page .highlight-box {
    background: var(--privacy-light-blue-gray);
    border: 1px solid #e2e8f5;
    border-radius: var(--privacy-radius);
    padding: 18px 22px;
    margin: 16px 0;
    font-size: 0.92rem;
    color: var(--privacy-body-color);
    line-height: 1.8;
}

.privacy-policy-page .highlight-box strong,
.privacy-policy-page .company-name {
    color: var(--privacy-heading-color);
    font-weight: 700;
}

.privacy-policy-page .contact-real a {
    color: var(--primary-color);
    text-decoration: none;
    font-weight: 600;
    transition: color 0.2s;
}

.privacy-policy-page .contact-real a:hover {
    color: #0055cc;
    text-decoration: underline;
}

/* ----- Items Page ----- */
:root {
    --item-primary-dark: #2A1E5C;
    --item-primary: #009FEB;
    --item-primary-light: #009FEB;
    --item-secondary-accent: #FB8B67;
    --item-primary-glow: #F0EBFF;
    --item-card-border: #EDF2F7;
    --item-text-main: #0F172A;
    --item-text-muted: #475569;
    --item-shadow-sm: 0 8px 20px rgba(0, 0, 0, 0.02), 0 2px 4px rgba(0, 0, 0, 0.02);
    --item-shadow-md: 0 12px 28px -8px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.02);
    --item-sidebar-width: 280px;
    --item-bg-soft: #fbfdfe;
}

.item-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 32px;
}

.item-two-column-layout {
    display: flex;
    gap: 48px;
    flex-wrap: wrap;
    padding: 48px 0 80px;
}

.item-sidebar {
    flex: 0 0 var(--item-sidebar-width);
    position: sticky;
    top: 100px;
    align-self: flex-start;
    height: fit-content;
    z-index: 10;
}

.item-sidebar-card {
    background: white;
    border-radius: 24px;
    padding: 24px;
    border: 1px solid var(--item-card-border);
    margin-bottom: 24px;
    box-shadow: var(--item-shadow-sm);
}

.item-sidebar-card:last-child {
    margin-bottom: 0;
}

.item-sidebar-card-title {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--item-primary-light);
    color: var(--item-text-main);
}

.item-sidebar-card-title i,
.item-sidebar-card-title-icon {
    color: var(--item-primary);
    font-style: normal;
}

.item-sidebar-search {
    margin-bottom: 0;
}

.item-sidebar-search h4 {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 12px;
    color: var(--item-text-main);
}

.item-sidebar-search h4 i {
    margin-right: 8px;
    color: var(--item-primary);
}

.item-search-box {
    display: flex;
    align-items: center;
    background: #f8f9fc;
    border-radius: 60px;
    border: 1px solid #e9edf2;
    padding: 8px 16px;
    transition: all 0.2s;
}

.item-search-box:focus-within {
    border-color: var(--item-primary-light);
    box-shadow: 0 0 0 3px rgba(0, 159, 235, 0.1);
}

.item-search-box input {
    flex: 1;
    border: none;
    background: transparent;
    padding: 10px 0;
    font-size: 0.9rem;
    outline: none;
    font-family: inherit;
}

.item-search-box button {
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 1.1rem;
    color: var(--item-primary);
}

.item-category-section h4 {
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 16px;
    color: var(--item-text-main);
}

.item-category-section h4 i {
    margin-right: 8px;
    color: var(--item-primary);
}

.item-category-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.item-category-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    border-radius: 40px;
    cursor: pointer;
    transition: all 0.2s;
    font-weight: 500;
    color: var(--item-text-muted);
}

.item-category-item:hover {
    background: rgba(0, 159, 235, 0.1);
    color: var(--item-primary);
}

.item-category-item.item-active-cat {
    background: var(--item-primary-light);
    color: white;
}

.item-category-count {
    background: #eef2f6;
    padding: 2px 8px;
    border-radius: 30px;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--item-text-muted);
}

.item-category-item.item-active-cat .item-category-count {
    background: rgba(255, 255, 255, 0.25);
    color: white;
}

.item-category-item a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    text-decoration: none;
    color: inherit;
}

.item-category-item a span {
    display: flex;
    align-items: center;
}

.item-category-item i {
    margin-right: 10px;
    width: 20px;
    color: var(--item-primary);
    transition: color 0.2s;
}

.item-category-item.item-active-cat i {
    color: white;
}

/* On Sale Filter */
.item-sale-section {
    padding: 4px 0;
}

.item-sale-toggle {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 14px;
    background: linear-gradient(135deg, #f0f9ff 0%, #e6f4fd 100%);
    border: 1px solid #cce8f9;
    text-decoration: none;
    color: var(--item-primary);
    transition: all 0.25s ease;
    cursor: pointer;
}

.item-sale-toggle:hover {
    background: linear-gradient(135deg, #e0f4ff 0%, #d0eeff 100%);
    border-color: var(--item-primary-light);
    transform: translateX(6px);
    box-shadow: 0 6px 18px rgba(0, 159, 235, 0.14);
}

.item-sale-toggle.item-sale-active {
    background: linear-gradient(135deg, #009FEB 0%, #2A1E5C 100%);
    border-color: #2A1E5C;
    color: white;
    box-shadow: 0 6px 20px rgba(0, 159, 235, 0.3);
}

.item-sale-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(0, 159, 235, 0.1);
    color: var(--item-primary);
    font-size: 0.9rem;
    flex-shrink: 0;
}

.item-sale-toggle.item-sale-active .item-sale-icon {
    background: rgba(255, 255, 255, 0.2);
    color: white;
}

.item-sale-text {
    font-weight: 600;
    font-size: 0.95rem;
    flex: 1;
}

.item-sale-check {
    font-size: 1.15rem;
    color: var(--item-primary);
    flex-shrink: 0;
}

.item-sale-toggle.item-sale-active .item-sale-check {
    color: white;
}

.item-content-area {
    flex: 1;
    min-width: 0;
}

.item-topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
    margin-bottom: 24px;
    padding: 0 4px;
}

.item-info-text {
    font-size: 0.85rem;
    color: var(--item-text-muted);
}

.item-info-text i {
    margin-right: 6px;
    color: var(--item-primary);
}

.item-info-text span {
    color: var(--item-primary);
    font-weight: 700;
}

.item-sort-wrapper select {
    padding: 8px 16px;
    border: 1px solid #e9edf2;
    border-radius: 40px;
    font-size: 0.85rem;
    background: white;
    cursor: pointer;
    font-family: inherit;
    outline: none;
    color: var(--item-text-main);
    transition: all 0.2s;
}

.item-sort-wrapper select:focus {
    border-color: var(--item-primary-light);
    box-shadow: 0 0 0 3px rgba(0, 159, 235, 0.1);
}

.item-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2.5rem;
}

.item-card {
    background: white;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: var(--item-shadow-sm);
    transition: all 0.3s cubic-bezier(0.2, 0, 0, 1);
    border: 1px solid var(--item-card-border);
    display: flex;
    flex-direction: column;
    transform: translateZ(0);
    -webkit-mask-image: -webkit-radial-gradient(white, black);
    position: relative;
    z-index: 1;
}

.item-card:hover {
    z-index: 2;
    transform: translateY(-6px);
    box-shadow: var(--item-shadow-md);
    border-color: rgba(0, 159, 235, 0.3);
}

.item-card-img {
    width: 100%;
    height: auto;
    min-height: 160px;
    overflow: hidden;
    background: #f0eef7;
    flex-shrink: 0;
    position: relative;
    border-radius: 16px 16px 0 0;
    line-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.item-card-img a {
    display: block;
    width: 100%;
    height: auto;
}

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

.item-card-content {
    padding: 10px 20px 18px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.item-card-category {
    display: inline-block;
    background: rgba(0, 159, 235, 0.12);
    color: var(--item-primary);
    padding: 3px 10px;
    border-radius: 30px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
    width: fit-content;
}

.item-card-category i {
    margin-right: 6px;
    font-size: 0.65rem;
}

.item-card h3 {
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 4px;
    line-height: 1.4;
    color: var(--item-text-main);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.item-card h3 a {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: color 0.2s;
}

.item-card h3 a:hover {
    color: var(--item-primary);
}

.item-card-author {
    color: var(--item-text-muted);
    font-size: 0.9rem;
    margin-bottom: 6px;
    line-height: 1.5;
}

.item-card-author a {
    color: var(--item-primary);
    text-decoration: none;
    font-weight: 500;
}

.item-card-author a:hover {
    text-decoration: underline;
}

.item-author-with-rating {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    font-size: 0.9rem;
}

.item-author-with-rating > span:first-child {
    font-size: 0.9rem;
}

.item-inline-rating {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    flex-shrink: 0;
}

.item-inline-stars {
    display: inline-block;
    position: relative;
}

.item-inline-star-bg {
    width: 72px;
    height: 14px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z' fill='none' stroke='%23fbbf24' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E") repeat-x;
    background-size: 14px 14px;
    position: relative;
}

.item-inline-star-fill {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z' fill='%23fbbf24'/%3E%3C/svg%3E") repeat-x;
    background-size: 14px 14px;
}

.item-inline-rating-count {
    font-size: 0.82rem;
    color: var(--item-text-muted);
    font-weight: 500;
}

.item-rating-price {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 8px 0;
    flex-wrap: wrap;
    gap: 8px;
}

.item-stars {
    display: flex;
    align-items: center;
    gap: 4px;
}

.item-star-bg {
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23fbbf24" stroke-width="2" stroke-linejoin="round" width="16" height="16"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>');
    background-repeat: repeat-x;
    background-size: 16px;
    width: 80px;
    height: 16px;
    display: inline-block;
    position: relative;
}

.item-star-fill {
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23fbbf24" width="16" height="16"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>');
    background-repeat: repeat-x;
    background-size: 16px;
    height: 16px;
    position: absolute;
    top: 0;
    left: 0;
}

.item-rating-count {
    font-size: 16px;
    color: var(--item-text-muted);
    margin-left: 4px;
}

.item-price {
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--item-primary);
}

.item-price-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.item-card-meta-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
}

.item-card-meta-top .item-card-category {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.item-old-price {
    font-size: 0.95rem;
    font-weight: 500;
    color: #9aa4b2;
    text-decoration: line-through;
    text-decoration-thickness: 2px;
    text-decoration-color: var(--item-primary);
    position: relative;
}

.item-discount-price {
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--item-primary);
    letter-spacing: -0.02em;
}

.item-sale-countdown {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--item-primary);
    background: rgba(0, 159, 235, 0.08);
    padding: 2px 8px;
    border-radius: 12px;
    margin-left: 4px;
    white-space: nowrap;
    animation: saleFlashPulse 2s ease-in-out infinite;
}

.item-sale-flash {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    background: linear-gradient(135deg, var(--item-primary) 0%, #2A1E5C 100%);
    color: white;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 20px;
    letter-spacing: 0.3px;
    box-shadow: 0 4px 10px rgba(0, 159, 235, 0.25);
    animation: saleFlashPulse 2s ease-in-out infinite;
    pointer-events: none;
    flex-shrink: 0;
    white-space: nowrap;
}

.item-sale-flash i {
    font-size: 0.6rem;
    color: rgba(255, 255, 255, 0.9);
}

@keyframes saleFlashPulse {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 4px 10px rgba(0, 159, 235, 0.25);
    }
    50% {
        transform: scale(1.05);
        box-shadow: 0 6px 18px rgba(0, 159, 235, 0.4);
    }
}

.item-card.item-on-sale {
    border-color: rgba(0, 159, 235, 0.15);
    box-shadow: 0 8px 24px -6px rgba(0, 159, 235, 0.08), 0 2px 4px rgba(0, 159, 235, 0.04);
}

.item-card.item-on-sale:hover {
    border-color: rgba(0, 159, 235, 0.3);
    box-shadow: 0 12px 32px -6px rgba(0, 159, 235, 0.14), 0 4px 8px rgba(0, 159, 235, 0.06);
}

.item-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid #EFF3F8;
    flex-wrap: wrap;
    gap: 10px;
}

.item-buttons {
    display: flex;
    gap: 8px;
    align-items: center;
}

.item-btn-demo {
    padding: 6px 16px;
    border: 1px solid #e2e8f0;
    border-radius: 30px;
    font-size: 0.8rem;
    font-weight: 400;
    color: var(--item-text-main);
    text-decoration: none;
    transition: all 0.2s;
    background: transparent;
}

.item-btn-demo:hover {
    background: var(--item-primary-light);
    border-color: var(--item-primary-light);
    color: white;
}

.item-btn-cart {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #e2e8f0;
    border-radius: 50%;
    color: var(--item-text-main);
    text-decoration: none;
    transition: all 0.2s;
    cursor: pointer;
    background: transparent;
    padding: 0;
    font-size: inherit;
    line-height: 1;
}

.item-btn-cart:hover {
    background: var(--item-primary-light);
    border-color: var(--item-primary-light);
    color: white;
}

.item-sales {
    font-size: 0.8rem;
    color: var(--item-text-muted);
    font-weight: 500;
}

.item-sales i {
    margin-right: 4px;
    color: var(--item-primary);
}

.item-pagination-container {
    margin-top: 20px;
    display: flex;
    justify-content: center;
}

.item-pagination {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
}

.item-pagination a,
.item-pagination span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 42px;
    height: 42px;
    padding: 0 12px;
    border-radius: 12px;
    font-weight: 500;
    font-size: 0.9rem;
    text-decoration: none;
    transition: all 0.2s;
    background: white;
    color: var(--item-text-muted);
    border: 1px solid #e2e8f0;
    cursor: pointer;
}

.item-pagination a:hover {
    background: rgba(0, 159, 235, 0.08);
    border-color: var(--item-primary-light);
    color: var(--item-primary);
}

.item-pagination .item-active-page {
    background: var(--item-primary-light);
    border-color: var(--item-primary-light);
    color: white;
    pointer-events: none;
}

.item-pagination .item-disabled-page {
    opacity: 0.5;
    pointer-events: none;
    background: #f1f5f9;
}

.item-no-results {
    text-align: center;
    padding: 60px 20px;
    background: #fafaff;
    border-radius: 40px;
    color: var(--item-text-muted);
    grid-column: 1 / -1;
}

.item-no-results i {
    font-size: 3rem;
    margin-bottom: 16px;
    color: var(--item-primary-light);
    display: block;
}

/* ----- Blog Index Page ----- */
:root {
    --blog-primary-dark: #2A1E5C;
    --blog-primary: #009FEB;
    --blog-primary-light: #009FEB;
    --blog-secondary-accent: #FB8B67;
    --blog-primary-glow: #F0EBFF;
    --blog-card-border: #EDF2F7;
    --blog-text-main: #0F172A;
    --blog-text-muted: #475569;
    --blog-shadow-sm: 0 8px 20px rgba(0, 0, 0, 0.02), 0 2px 4px rgba(0, 0, 0, 0.02);
    --blog-shadow-md: 0 12px 28px -8px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.02);
    --blog-sidebar-width: 280px;
    --blog-bg-soft: #fbfdfe;
}

.page-blog-index body {
    font-family: 'Inter', sans-serif;
    background-color: var(--blog-bg-soft);
    color: var(--blog-text-main);
    line-height: 1.6;
    scroll-behavior: smooth;
}

.blog-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 32px;
}

.blog-hero {
    background: linear-gradient(120deg, var(--blog-primary-glow) 0%, #FFFFFF 80%);
    padding: 48px 0 40px;
    border-bottom: 1px solid var(--blog-card-border);
}

.blog-hero-badge {
    display: inline-block;
    background: rgba(124, 92, 231, 0.15);
    color: var(--blog-primary-dark);
    padding: 4px 12px;
    border-radius: 40px;
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 20px;
}

.blog-hero-badge i {
    margin-right: 6px;
    color: var(--blog-primary);
}

.blog-hero h1 {
    font-size: 3rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    background: linear-gradient(145deg, var(--blog-primary-dark) 0%, var(--blog-primary) 100%);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    line-height: 1.2;
    margin-bottom: 1rem;
}

.blog-hero-description {
    font-size: 1.1rem;
    color: var(--blog-text-muted);
    border-left: 3px solid var(--blog-primary-light);
    padding-left: 20px;
}

.blog-hero-description i {
    margin-right: 6px;
    color: var(--blog-primary-light);
}

.blog-two-column-layout {
    display: flex;
    gap: 48px;
    flex-wrap: wrap;
    padding: 48px 0 80px;
}

.blog-sidebar {
    flex: 0 0 var(--blog-sidebar-width);
    position: sticky;
    top: 100px;
    align-self: flex-start;
    height: fit-content;
}

.blog-sidebar-card {
    background: white;
    border-radius: 24px;
    padding: 24px;
    border: 1px solid var(--blog-card-border);
    margin-bottom: 24px;
    box-shadow: var(--blog-shadow-sm);
}

.blog-sidebar-card:last-child {
    margin-bottom: 0;
}

.blog-sidebar-card-title {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--blog-primary-light);
    color: var(--blog-text-main);
}

.blog-sidebar-card-title i {
    color: var(--blog-primary);
}

.blog-sidebar-search {
    margin-bottom: 0;
}

.blog-sidebar-search h4 {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 12px;
    color: var(--blog-text-main);
}

.blog-sidebar-search h4 i {
    margin-right: 8px;
    color: var(--blog-primary);
}

.blog-search-box {
    display: flex;
    align-items: center;
    background: #f8f9fc;
    border-radius: 60px;
    border: 1px solid #e9edf2;
    padding: 8px 16px;
    transition: all 0.2s;
}

.blog-search-box:focus-within {
    border-color: var(--blog-primary-light);
    box-shadow: 0 0 0 3px rgba(124, 92, 231, 0.1);
}

.blog-search-box input {
    flex: 1;
    border: none;
    background: transparent;
    padding: 10px 0;
    font-size: 0.9rem;
    outline: none;
    font-family: 'Inter', sans-serif;
}

.blog-search-box button {
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 1.1rem;
    color: var(--blog-primary);
}

.blog-category-section h4 {
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 16px;
    color: var(--blog-text-main);
}

.blog-category-section h4 i {
    margin-right: 8px;
    color: var(--blog-primary);
}

.blog-category-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.blog-category-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    border-radius: 40px;
    cursor: pointer;
    transition: all 0.2s;
    font-weight: 500;
    color: var(--blog-text-muted);
}

.blog-category-item:hover {
    background: rgba(124, 92, 231, 0.1);
    color: var(--blog-primary);
}

.blog-category-item:hover i {
    color: var(--blog-primary);
}

.blog-category-item.blog-active-cat {
    background: var(--blog-primary-light);
    color: white;
}

.blog-category-item.blog-active-cat i {
    color: white;
}

.blog-category-item i {
    margin-right: 10px;
    width: 20px;
    color: var(--blog-primary);
    transition: color 0.2s;
}

.blog-category-count {
    background: #eef2f6;
    padding: 2px 8px;
    border-radius: 30px;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--blog-text-muted);
}

.blog-category-item.blog-active-cat .blog-category-count {
    background: rgba(255, 255, 255, 0.25);
    color: white;
}

.blog-category-item a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    text-decoration: none;
    color: inherit;
}

.blog-category-item a span {
    display: flex;
    align-items: center;
}

.blog-reset-filters {
    text-align: center;
}

.blog-reset-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: transparent;
    border: 1px solid #e2e8f0;
    padding: 10px 24px;
    border-radius: 40px;
    font-weight: 500;
    cursor: pointer;
    font-family: 'Inter', sans-serif;
    text-decoration: none;
    color: var(--blog-text-muted);
    transition: 0.2s;
}

.blog-reset-btn i {
    color: var(--blog-primary);
}

.blog-reset-btn:hover {
    border-color: var(--blog-primary-light);
    color: var(--blog-primary);
    background: rgba(124, 92, 231, 0.05);
}

.blog-reset-btn:hover i {
    color: var(--blog-primary);
}

.item-reset-filters {
    text-align: center;
}

.item-reset-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: transparent;
    border: 1px solid #e2e8f0;
    padding: 10px 24px;
    border-radius: 40px;
    font-weight: 500;
    cursor: pointer;
    font-family: 'Inter', sans-serif;
    text-decoration: none;
    color: var(--item-text-muted);
    transition: 0.2s;
}

.item-reset-btn i {
    color: var(--item-primary);
}

.item-reset-btn:hover {
    border-color: var(--item-primary-light);
    color: var(--item-primary);
    background: rgba(0, 159, 235, 0.05);
}

.item-reset-btn:hover i {
    color: var(--item-primary);
}

.blog-content-area {
    flex: 1;
    min-width: 0;
}

.blog-info-text {
    text-align: left;
    margin-bottom: 20px;
    font-size: 0.85rem;
    color: var(--blog-text-muted);
    padding-left: 4px;
}

.blog-info-text i {
    margin-right: 6px;
    color: var(--blog-primary);
}

.blog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 2rem;
    margin-bottom: 2.5rem;
}

.blog-card {
    background: white;
    border-radius: 28px;
    overflow: hidden;
    box-shadow: var(--blog-shadow-sm);
    transition: all 0.3s cubic-bezier(0.2, 0, 0, 1);
    border: 1px solid var(--blog-card-border);
    display: flex;
    flex-direction: column;
}

.blog-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--blog-shadow-md);
    border-color: rgba(124, 92, 231, 0.3);
}

.blog-card-img {
    width: 100%;
    height: 220px;
    overflow: hidden;
    background: #f0eef7;
    flex-shrink: 0;
}

.blog-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.blog-card:hover .blog-card-img img {
    transform: scale(1.05);
}

.blog-card-content {
    padding: 22px 24px 26px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.blog-post-category {
    display: inline-block;
    background: rgba(124, 92, 231, 0.12);
    color: var(--blog-primary);
    padding: 4px 14px;
    border-radius: 30px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 14px;
    width: fit-content;
}

.blog-post-category i {
    margin-right: 6px;
    font-size: 0.65rem;
}

.blog-card h3 {
    font-size: 1.4rem;
    font-weight: 700;
    margin-bottom: 12px;
    line-height: 1.3;
    color: var(--blog-text-main);
}

.blog-card h3 a {
    text-decoration: none;
    color: inherit;
    transition: color 0.2s;
}

.blog-card h3 a:hover {
    color: var(--blog-primary);
}

.blog-excerpt {
    color: var(--blog-text-muted);
    font-size: 0.9rem;
    margin: 12px 0 18px;
    line-height: 1.5;
    flex: 1;
}

.blog-meta-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid #EFF3F8;
    padding-top: 14px;
    font-size: 0.75rem;
    color: #5b6e8c;
    margin-top: auto;
}

.blog-meta-info i {
    margin-right: 4px;
    color: var(--blog-primary-light);
}

.blog-read-link {
    color: var(--blog-primary);
    font-weight: 700;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: 0.2s;
}

.blog-read-link i {
    font-size: 0.7rem;
    transition: transform 0.2s;
}

.blog-read-link:hover {
    gap: 10px;
    color: var(--blog-primary-dark);
}

.blog-read-link:hover i {
    transform: translateX(3px);
}

.blog-pagination-container {
    margin-top: 20px;
    display: flex;
    justify-content: center;
}

.blog-pagination {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
}

.blog-pagination a,
.blog-pagination span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 42px;
    height: 42px;
    padding: 0 12px;
    border-radius: 12px;
    font-weight: 500;
    font-size: 0.9rem;
    text-decoration: none;
    transition: all 0.2s;
    background: white;
    color: var(--blog-text-muted);
    border: 1px solid #e2e8f0;
    cursor: pointer;
}

.blog-pagination a:hover {
    background: rgba(124, 92, 231, 0.08);
    border-color: var(--blog-primary-light);
    color: var(--blog-primary);
}

.blog-pagination .blog-active-page {
    background: var(--blog-primary-light);
    border-color: var(--blog-primary-light);
    color: white;
    pointer-events: none;
}

.blog-pagination .blog-disabled-page {
    opacity: 0.5;
    pointer-events: none;
    background: #f1f5f9;
}

.blog-no-results {
    text-align: center;
    padding: 60px 20px;
    background: #fafaff;
    border-radius: 40px;
    color: var(--blog-text-muted);
}

.blog-no-results i {
    font-size: 3rem;
    margin-bottom: 16px;
    color: var(--blog-primary-light);
    display: block;
}

/* Footer social icons and back-to-top vertical centering (blog index) */
.page-blog-index .back-to-top {
    line-height: 1;
}
.page-blog-index .back-to-top i {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: block;
    margin: 0;
    padding: 0;
}
.page-blog-index .copyright-area .copyright-social ul.social-link li a {
    position: relative;
    line-height: 1;
}
.page-blog-index .copyright-area .copyright-social ul.social-link li a i {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: block;
    margin: 0;
    padding: 0;
}

/* ----- Blog Details Page ----- */
:root {
    --blog-details-primary-dark: #2A1E5C;
    --blog-details-primary: #009FEB;
    --blog-details-primary-light: #009FEB;
    --blog-details-secondary-accent: #FB8B67;
    --blog-details-text-main: #0F172A;
    --blog-details-text-muted: #475569;
    --blog-details-card-border: #EDF2F7;
    --blog-details-shadow-sm: 0 8px 20px rgba(0, 0, 0, 0.02), 0 2px 4px rgba(0, 0, 0, 0.02);
    --blog-details-shadow-md: 0 12px 28px -8px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.02);
    --blog-details-bg-soft: #fbfdfe;
}

.page-blog-details body {
    font-family: 'Inter', sans-serif;
    background-color: var(--blog-details-bg-soft);
    color: var(--blog-details-text-main);
    line-height: 1.6;
    scroll-behavior: smooth;
}

.blog-details-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 32px;
}

.blog-details-back-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 32px 0 24px;
    padding: 10px 20px;
    background: white;
    border: 1px solid var(--blog-details-card-border);
    border-radius: 40px;
    text-decoration: none;
    color: var(--blog-details-text-main);
    font-weight: 500;
    transition: all 0.2s;
}

.blog-details-back-link:hover {
    border-color: var(--blog-details-primary-light);
    color: var(--blog-details-primary);
    transform: translateX(-4px);
}

.blog-details-back-link i {
    font-size: 0.9rem;
}

.blog-details-wrapper {
    display: flex;
    gap: 48px;
    flex-wrap: wrap;
    padding-bottom: 64px;
}

.blog-details-sidebar {
    flex: 0 0 300px;
    position: sticky;
    top: 24px;
    align-self: flex-start;
    order: 1;
}

.blog-details-main {
    flex: 1;
    min-width: 0;
    order: 2;
}

.blog-details-sidebar-card {
    background: white;
    border-radius: 24px;
    padding: 24px;
    border: 1px solid var(--blog-details-card-border);
    margin-bottom: 28px;
    box-shadow: var(--blog-details-shadow-sm);
}

.blog-details-sidebar-title {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--blog-details-primary-light);
}

.blog-details-sidebar-title i {
    color: var(--blog-details-primary);
}

.blog-details-search-box {
    display: flex;
    gap: 8px;
}

.blog-details-search-box input {
    flex: 1;
    padding: 12px 16px;
    border: 1px solid var(--blog-details-card-border);
    border-radius: 40px;
    outline: none;
    font-family: 'Inter', sans-serif;
    font-size: 0.9rem;
    transition: all 0.2s;
    background: #fafbfc;
}

.blog-details-search-box input:focus {
    border-color: var(--blog-details-primary-light);
    box-shadow: 0 0 0 3px rgba(124, 92, 231, 0.1);
}

.blog-details-search-btn {
    background: var(--blog-details-primary);
    border: none;
    padding: 0 20px;
    border-radius: 40px;
    color: white;
    cursor: pointer;
    transition: all 0.2s;
}

.blog-details-search-btn:hover {
    background: var(--blog-details-primary-dark);
}

.blog-details-recent-post {
    display: flex;
    gap: 14px;
    margin-bottom: 18px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--blog-details-card-border);
}

.blog-details-recent-post:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.blog-details-recent-post-img {
    width: 70px;
    height: 70px;
    border-radius: 16px;
    object-fit: cover;
    background: #e9e4ff;
}

.blog-details-recent-post-info h5 {
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: 6px;
    line-height: 1.4;
}

.blog-details-recent-post-info a {
    text-decoration: none;
    color: var(--blog-details-text-main);
    transition: color 0.2s;
}

.blog-details-recent-post-info a:hover {
    color: var(--blog-details-primary);
}

.blog-details-recent-post-date {
    font-size: 0.7rem;
    color: var(--blog-details-text-muted);
}

.blog-details-categories-list {
    list-style: none;
}

.blog-details-categories-list li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid var(--blog-details-card-border);
    cursor: pointer;
    transition: color 0.2s;
}

.blog-details-categories-list li:last-child {
    border-bottom: none;
}

.blog-details-categories-list li:hover {
    color: var(--blog-details-primary);
}

.blog-details-categories-list li span:first-child i {
    margin-right: 10px;
    width: 20px;
    color: var(--blog-details-primary-light);
}

.blog-details-post-card {
    background: white;
    border-radius: 32px;
    overflow: hidden;
    box-shadow: var(--blog-details-shadow-sm);
    border: 1px solid var(--blog-details-card-border);
}

.blog-details-post-header {
    padding: 32px 36px 0 36px;
}

.blog-details-post-category {
    display: inline-block;
    background: rgba(124, 92, 231, 0.12);
    color: var(--blog-details-primary);
    padding: 6px 16px;
    border-radius: 30px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 20px;
}

.blog-details-post-category i {
    margin-right: 6px;
}

.blog-details-post-title {
    font-size: 2.5rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.2;
    margin-bottom: 20px;
    color: var(--blog-details-text-main);
}

.blog-details-post-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    margin-bottom: 24px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--blog-details-card-border);
}

.blog-details-meta-item {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--blog-details-text-muted);
    font-size: 0.85rem;
}

.blog-details-meta-item i {
    color: var(--blog-details-primary-light);
    width: 16px;
}

.blog-details-feature-img {
    width: 100%;
    height: auto;
    display: block;
}

.blog-details-feature-img img {
    width: 100%;
    height: auto;
    object-fit: cover;
}

.blog-details-post-content {
    padding: 36px;
}

.blog-details-post-content h2 {
    font-size: 1.75rem;
    font-weight: 700;
    margin: 32px 0 16px;
    color: var(--blog-details-text-main);
}

.blog-details-post-content h3 {
    font-size: 1.4rem;
    font-weight: 600;
    margin: 28px 0 12px;
    color: var(--blog-details-text-main);
}

.blog-details-post-content p {
    margin-bottom: 20px;
    color: var(--blog-details-text-muted);
    line-height: 1.7;
}

.blog-details-post-content ul,
.blog-details-post-content ol {
    margin: 16px 0 20px 24px;
    color: var(--blog-details-text-muted);
}

.blog-details-post-content li {
    margin-bottom: 8px;
}

.blog-details-post-content code {
    background: #f1f5f9;
    padding: 2px 6px;
    border-radius: 6px;
    font-family: 'Monaco', monospace;
    font-size: 0.85rem;
    color: var(--blog-details-primary-dark);
}

.blog-details-post-content pre {
    background: #0f172a;
    color: #e2e8f0;
    padding: 20px;
    border-radius: 16px;
    overflow-x: auto;
    margin: 24px 0;
    font-size: 0.85rem;
    line-height: 1.5;
}

.blog-details-post-content pre code {
    display: block;
    background: transparent;
    color: inherit;
    padding: 0;
    border-radius: 0;
    font-size: inherit;
    line-height: inherit;
    white-space: pre-wrap;
    word-break: break-word;
}

.blog-details-post-content blockquote {
    position: relative;
    padding: 16px 24px 16px 28px;
    margin: 24px 0;
    background: #f8fafc;
    border-radius: 16px;
    font-style: italic;
    color: var(--blog-details-text-main);
    overflow: hidden;
    width: 100%;
    box-sizing: border-box;
}

.blog-details-post-content blockquote::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 4px;
    background: var(--blog-details-primary-light);
}

.blog-details-author-bio {
    background: #f8fafc;
    border-radius: 24px;
    padding: 28px 32px;
    margin: 32px 0;
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    align-items: center;
}

.blog-details-author-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--blog-details-primary-light);
}

.blog-details-author-info h4 {
    font-size: 1.2rem;
    font-weight: 700;
    margin-bottom: 6px;
}

.blog-details-author-info p {
    color: var(--blog-details-text-muted);
    font-size: 0.9rem;
    margin-bottom: 8px;
}

.blog-details-author-social a {
    color: var(--blog-details-primary);
    text-decoration: none;
    margin-right: 16px;
    font-size: 1rem;
}

/* Footer social icons and back-to-top vertical centering (blog details) */
.page-blog-details .back-to-top {
    line-height: 1;
}
.page-blog-details .back-to-top i {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: block;
    margin: 0;
    padding: 0;
}
.page-blog-details .copyright-area .copyright-social ul.social-link li a {
    position: relative;
    line-height: 1;
}
.page-blog-details .copyright-area .copyright-social ul.social-link li a i {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: block;
    margin: 0;
    padding: 0;
}

/*---=======================
   Start Auth Page css
===========================---*/

/* Section Wrapper */
.auth-page {
    background: var(--light-gray);
}

/* Two Column Layout */
.auth-two-col {
    display: flex;
    align-items: stretch;
}

/* --- Left Panel --- */
.auth-left-panel {
    flex: 0 0 50%;
    max-width: 50%;
    padding: 60px 40px 60px 0;
    display: flex;
    align-items: center;
}

.auth-left-content {
    max-width: 480px;
    margin-left: auto;
    width: 100%;
}

.auth-left-logo {
    margin-bottom: 40px;
}

.auth-left-logo img {
    max-width: 160px;
    height: auto;
}

.auth-left-text {
    margin-bottom: 44px;
}

.auth-left-text h2 {
    font-size: 36px;
    font-weight: 800;
    color: var(--heading-color);
    line-height: 1.25;
    margin-bottom: 16px;
}

.auth-left-text p {
    font-size: 16px;
    line-height: 1.7;
    color: var(--body-color);
    margin-bottom: 0;
}

/* Stats Grid */
.auth-stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.auth-stat-box {
    background: var(--white);
    border-radius: 12px;
    padding: 22px 20px;
    text-align: center;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
    border: 1px solid rgba(0, 0, 0, 0.04);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.auth-stat-box:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.07);
}

.auth-stat-icon {
    font-size: 22px;
    color: var(--primary-color);
    margin-bottom: 8px;
}

.auth-stat-number {
    font-size: 24px;
    font-weight: 800;
    color: var(--heading-color);
    line-height: 1.2;
    margin-bottom: 2px;
}

.auth-stat-label {
    font-size: 12px;
    font-weight: 500;
    color: var(--body-color);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* --- Right Panel --- */
.auth-right-col {
    flex: 0 0 50%;
    max-width: 50%;
    padding: 60px 0 60px 40px;
    display: flex;
    align-items: center;
}

.auth-right-inner {
    width: 100%;
    max-width: 460px;
    margin-right: auto;
}

/* Switch Text */
.auth-page-switch {
    font-size: 14px;
    color: var(--body-color);
    margin-top: 24px;
    font-weight: 500;
}

.auth-page-switch a {
    color: var(--primary-color);
    font-weight: 600;
}

.auth-page-switch a:hover {
    color: var(--heading-color);
    text-decoration: underline;
}

/* --- Card Wrapper --- */
.auth-form-wrapper {
    background: var(--white);
    border-radius: 16px;
    padding: 40px 36px 36px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.06), 0 1px 8px rgba(0, 0, 0, 0.03);
    position: relative;
    border: 1px solid rgba(0, 0, 0, 0.04);
}

/* Gradient top accent bar */
.auth-form-wrapper::before {
    content: '';
    position: absolute;
    top: 0;
    left: 32px;
    right: 32px;
    height: 4px;
    border-radius: 0 0 4px 4px;
    background: var(--bg-gradient-2);
}

/* Header */
.auth-form-header {
    text-align: center;
    margin-bottom: 28px;
    padding-top: 4px;
}

.auth-form-header h3 {
    font-size: 24px;
    font-weight: 700;
    color: var(--heading-color);
    margin-bottom: 6px;
}

.auth-form-header p {
    font-size: 14px;
    color: var(--body-color);
    margin-bottom: 0;
}

/* Social Login */
.auth-social-login {
    margin-bottom: 22px;
}

.auth-social-label {
    font-size: 13px;
    color: var(--body-color);
    font-weight: 500;
    text-align: center;
    margin-bottom: 14px;
}

.auth-social-btn-group {
    display: flex;
    gap: 12px;
}

.auth-btn {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px 16px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    font-family: var(--inter);
    border: 1.5px solid rgba(0, 0, 0, 0.08);
    background: var(--white);
    color: var(--heading-color);
    cursor: pointer;
    transition: all 0.25s ease;
    text-decoration: none;
}

.auth-btn svg {
    flex-shrink: 0;
}

.auth-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
    text-decoration: none;
}

.auth-btn-google:hover {
    border-color: #ea4335;
    background: #fef2f0;
}

.auth-btn-facebook:hover {
    border-color: #1877f2;
    background: #f0f5ff;
}

/* Divider */
.auth-divider {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 24px;
}

.auth-divider::before,
.auth-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(to right, transparent, rgba(0, 0, 0, 0.08), transparent);
}

.auth-divider span {
    font-size: 12px;
    color: var(--body-color);
    white-space: nowrap;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

/* Form */
.auth-form {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.auth-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.auth-field label {
    font-size: 13px;
    font-weight: 600;
    color: var(--heading-color);
    font-family: var(--inter);
}

.auth-input {
    width: 100%;
    height: 48px;
    padding: 0 16px;
    border: 1.5px solid rgba(0, 0, 0, 0.08);
    border-radius: 10px;
    font-size: 14px;
    font-family: var(--inter);
    color: var(--heading-color);
    background: #fafafa;
    transition: border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
    outline: none;
}

.auth-input:focus {
    border-color: var(--primary-color);
    background: var(--white);
    box-shadow: 0 0 0 4px rgba(var(--primary-color-rgb), 0.08);
}

.auth-input:hover {
    background: var(--white);
}

.auth-input::placeholder {
    color: #b0b0b0;
}

/* Password Input Wrap */
.auth-input-wrap {
    position: relative;
}

.auth-input-wrap .auth-input {
    padding-right: 46px;
}

.auth-password-toggle {
    position: absolute;
    top: 50%;
    right: 5px;
    transform: translateY(-50%);
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    color: var(--body-color);
    font-size: 16px;
    cursor: pointer;
    border-radius: 8px;
    transition: background 0.2s ease, color 0.2s ease;
}

.auth-password-toggle:hover {
    background: rgba(0, 0, 0, 0.05);
    color: var(--heading-color);
}

/* Field Row */
.auth-field-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 2px;
}

/* Checkbox */
.auth-checkbox {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--body-color);
    cursor: pointer;
    font-weight: 500;
}

.auth-checkbox input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--primary-color);
    cursor: pointer;
    flex-shrink: 0;
}

.auth-checkbox span {
    line-height: 1.4;
}

.auth-checkbox a {
    color: var(--primary-color);
    text-decoration: underline;
}

.auth-checkbox a:hover {
    color: var(--heading-color);
}

/* Forgot Link */
.auth-forgot-link {
    font-size: 13px;
    font-weight: 500;
    color: var(--primary-color);
    text-decoration: none;
}

.auth-forgot-link:hover {
    color: var(--heading-color);
    text-decoration: underline;
}

/* Submit Button */
.auth-submit-btn {
    width: 100%;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary-color);
    background-image: var(--bg-gradient-2);
    color: var(--white);
    font-size: 15px;
    font-weight: 600;
    font-family: var(--inter);
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: opacity 0.3s ease, transform 0.25s ease, box-shadow 0.3s ease;
    letter-spacing: 0.2px;
}

.auth-submit-btn:hover {
    opacity: 0.95;
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(var(--primary-color-rgb), 0.25);
    color: var(--white);
}

.auth-submit-btn:active {
    transform: translateY(0);
}

/*---=======================
   End Auth Page css
===========================---*/

/*---=======================
   Start License & Support Plan Page css
===========================---*/
.license-support-page {
    background-color: var(--light-blue-gray);
}

.license-support-page .ls-section + .ls-section {
    margin-top: 70px;
}

.license-support-page .ls-section-title {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 15px;
    margin-bottom: 35px;
}

.license-support-page .ls-section-title h2 {
    font-size: 36px;
    line-height: 1.3;
    color: var(--heading-color);
    margin: 0;
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
}

.license-support-page .ls-section-title::after {
    content: '';
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    height: 2px;
    background: -webkit-gradient(linear, left top, right top, from(var(--primary-color)), to(transparent));
    background: linear-gradient(to right, var(--primary-color), transparent);
}

.license-support-page .ls-badge-count {
    font-size: 14px;
    font-weight: 500;
    background: rgba(var(--primary-color-rgb), 0.1);
    color: var(--primary-color);
    padding: 4px 16px;
    border-radius: 30px;
    -ms-flex-negative: 0;
    flex-shrink: 0;
}

.license-support-page .ls-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

.license-support-page .ls-card {
    position: relative;
    background: var(--white);
    border-radius: 20px;
    padding: 35px 30px 40px;
    -webkit-box-shadow: 0 8px 30px rgba(var(--primary-color-rgb), 0.08);
    box-shadow: 0 8px 30px rgba(var(--primary-color-rgb), 0.08);
    border: 1px solid rgba(var(--primary-color-rgb), 0.1);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-transition: -webkit-transform 0.3s ease, -webkit-box-shadow 0.3s ease;
    transition: -webkit-transform 0.3s ease, -webkit-box-shadow 0.3s ease;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    transition: transform 0.3s ease, box-shadow 0.3s ease, -webkit-transform 0.3s ease, -webkit-box-shadow 0.3s ease;
}

.license-support-page .ls-card:hover {
    -webkit-transform: translateY(-6px);
    transform: translateY(-6px);
    -webkit-box-shadow: 0 16px 48px rgba(var(--primary-color-rgb), 0.18);
    box-shadow: 0 16px 48px rgba(var(--primary-color-rgb), 0.18);
    border-color: var(--primary-color);
}

.license-support-page .ls-default-badge {
    position: absolute;
    top: -12px;
    right: 24px;
    background: var(--primary-color);
    color: var(--white);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 6px 16px;
    border-radius: 30px;
    -webkit-box-shadow: 0 4px 12px rgba(var(--primary-color-rgb), 0.35);
    box-shadow: 0 4px 12px rgba(var(--primary-color-rgb), 0.35);
}

.license-support-page .ls-default-badge.ls-is-default {
    background: var(--heading-color);
    -webkit-box-shadow: 0 4px 12px rgba(3, 16, 49, 0.25);
    box-shadow: 0 4px 12px rgba(3, 16, 49, 0.25);
}

.license-support-page .ls-card-header {
    margin-bottom: 20px;
}

.license-support-page .ls-card-header .ls-name {
    font-size: 22px;
    font-weight: 700;
    color: var(--heading-color);
    margin-bottom: 5px;
}

.license-support-page .ls-card-header .ls-slug {
    display: block;
    font-size: 13px;
    color: var(--body-color);
    text-transform: lowercase;
    margin-bottom: 10px;
}

.license-support-page .ls-card-header .ls-price {
    font-size: 32px;
    font-weight: 700;
    color: var(--primary-color);
    margin-top: 10px;
}

.license-support-page .ls-card-header .ls-price small {
    font-size: 14px;
    font-weight: 400;
    color: var(--body-color);
}

.license-support-page .ls-card-support .ls-duration {
    display: inline-block;
    background: rgba(var(--primary-color-rgb), 0.08);
    color: var(--primary-color);
    font-size: 12px;
    font-weight: 600;
    padding: 4px 14px;
    border-radius: 30px;
    margin-top: 10px;
    border: 1px solid rgba(var(--primary-color-rgb), 0.12);
}

.license-support-page .ls-feature-list {
    list-style: none;
    padding: 0;
    margin: 15px 0 0;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
}

.license-support-page .ls-feature-list li {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: baseline;
    -ms-flex-align: baseline;
    align-items: baseline;
    padding: 10px 0;
    border-bottom: 1px solid rgba(var(--primary-color-rgb), 0.08);
    font-size: 15px;
    gap: 10px;
}

.license-support-page .ls-feature-list li:last-child {
    border-bottom: none;
}

.license-support-page .ls-feature-list .ls-feat-label {
    color: var(--body-color);
    font-weight: 500;
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
}

.license-support-page .ls-feature-list .ls-feat-value {
    color: var(--heading-color);
    font-weight: 600;
    text-align: right;
    max-width: 60%;
}

.license-support-page .ls-empty {
    grid-column: 1 / -1;
    text-align: center;
    padding: 40px 20px;
    background: var(--white);
    border-radius: 16px;
    color: var(--body-color);
    border: 1px solid rgba(var(--primary-color-rgb), 0.1);
}

/*---=======================
   End License & Support Plan Page css
===========================---*/

/*---=======================
   Start Checkout Page css
===========================---*/
.checkout-page {
    background-color: var(--light-blue-gray);
}

.checkout-page .checkout-return {
    margin-bottom: 20px;
}

.checkout-page .checkout-return a {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 500;
    color: var(--primary-color);
    text-decoration: none;
    -webkit-transition: color 0.3s ease-out 0s;
    transition: color 0.3s ease-out 0s;
}

.checkout-page .checkout-return a:hover {
    color: var(--heading-color);
}

.checkout-page .checkout-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 30px;
}

.checkout-page .checkout-card {
    background: var(--white);
    padding: 30px;
    border-radius: 12px;
    -webkit-box-shadow: 0 4px 12px rgba(3, 16, 49, 0.05);
    box-shadow: 0 4px 12px rgba(3, 16, 49, 0.05);
    border: 1px solid rgba(3, 16, 49, 0.08);
}

.checkout-page .checkout-card h2 {
    font-size: 18px;
    margin-bottom: 20px;
    color: var(--heading-color);
    font-weight: 700;
}

.checkout-page .checkout-card h2.mt-25 {
    margin-top: 25px;
}

.checkout-page .form-group {
    margin-bottom: 15px;
}

.checkout-page .form-group label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 6px;
    color: var(--heading-color);
}

.checkout-page .form-group input {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 14px;
    color: var(--heading-color);
    -webkit-transition: border-color 0.2s, -webkit-box-shadow 0.2s;
    transition: border-color 0.2s, -webkit-box-shadow 0.2s;
    transition: border-color 0.2s, box-shadow 0.2s;
    transition: border-color 0.2s, box-shadow 0.2s, -webkit-box-shadow 0.2s;
}

.checkout-page .form-group input:focus {
    outline: none;
    border-color: var(--primary-color);
    -webkit-box-shadow: 0 0 0 3px rgba(var(--primary-color-rgb), 0.1);
    box-shadow: 0 0 0 3px rgba(var(--primary-color-rgb), 0.1);
}

.checkout-page .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}

.checkout-page .summary-item {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    margin-bottom: 10px;
    font-size: 14px;
    color: var(--body-color);
}

.checkout-page .summary-item.subtotal-row {
    font-weight: 500;
    color: var(--heading-color);
}

.checkout-page .summary-item.total {
    font-size: 16px;
    color: var(--heading-color);
    margin-top: 10px;
}

.checkout-page .summary-item.empty-cart-message {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    padding: 20px;
    color: var(--body-color);
}

.checkout-page hr {
    border: 0;
    border-top: 1px solid rgba(3, 16, 49, 0.08);
    margin: 15px 0;
}

.checkout-page .payment-method {
    margin: 20px 0;
}

.checkout-page .method-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--heading-color);
    margin-bottom: 10px;
}

.checkout-page .method-title i {
    margin-right: 8px;
}

.checkout-page .polar-widget {
    background: rgba(var(--primary-color-rgb), 0.04);
    border: 1px solid var(--primary-color);
    border-radius: 6px;
    padding: 12px;
    text-align: center;
    margin-bottom: 15px;
}

.checkout-page .polar-widget .polar-brand {
    color: var(--heading-color);
    font-size: 14px;
}

.checkout-page .polar-widget p {
    font-size: 12px;
    color: var(--body-color);
    margin-top: 5px;
}

.checkout-page .btn-checkout {
    width: 100%;
    padding: 14px;
    background-color: var(--heading-color);
    color: var(--white);
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    -webkit-transition: background 0.3s ease-out 0s;
    transition: background 0.3s ease-out 0s;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 10px;
}

.checkout-page .btn-checkout:hover {
    background-color: var(--primary-color);
    color: var(--white);
}

.checkout-page .secure-note {
    text-align: center;
    font-size: 12px;
    color: var(--body-color);
}

.checkout-page .checkout-return {
    margin-bottom: 20px;
}

.checkout-page .checkout-return a {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 500;
    color: var(--primary-color);
    text-decoration: none;
    -webkit-transition: color 0.3s ease-out 0s;
    transition: color 0.3s ease-out 0s;
}

.checkout-page .checkout-return a:hover {
    color: var(--heading-color);
}

.checkout-page .checkout-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 30px;
}

.checkout-page .checkout-card {
    background: var(--white);
    padding: 30px;
    border-radius: 12px;
    -webkit-box-shadow: 0 4px 12px rgba(3, 16, 49, 0.05);
    box-shadow: 0 4px 12px rgba(3, 16, 49, 0.05);
    border: 1px solid rgba(3, 16, 49, 0.08);
}

.checkout-page .checkout-card h2 {
    font-size: 18px;
    margin-bottom: 20px;
    color: var(--heading-color);
    font-weight: 700;
}

.checkout-page .checkout-card h2.mt-25 {
    margin-top: 25px;
}

.checkout-page .form-group {
    margin-bottom: 15px;
}

.checkout-page .form-group label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 6px;
    color: var(--heading-color);
}

.checkout-page .form-group input {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 14px;
    color: var(--heading-color);
    -webkit-transition: border-color 0.2s, -webkit-box-shadow 0.2s;
    transition: border-color 0.2s, -webkit-box-shadow 0.2s;
    transition: border-color 0.2s, box-shadow 0.2s;
    transition: border-color 0.2s, box-shadow 0.2s, -webkit-box-shadow 0.2s;
}

.checkout-page .form-group input:focus {
    outline: none;
    border-color: var(--primary-color);
    -webkit-box-shadow: 0 0 0 3px rgba(var(--primary-color-rgb), 0.1);
    box-shadow: 0 0 0 3px rgba(var(--primary-color-rgb), 0.1);
}

.checkout-page .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}

.checkout-page .summary-item {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    margin-bottom: 10px;
    font-size: 14px;
    color: var(--body-color);
}

.checkout-page .summary-item.subtotal-row {
    font-weight: 500;
    color: var(--heading-color);
}

.checkout-page .summary-item.total {
    font-size: 16px;
    color: var(--heading-color);
    margin-top: 10px;
}

.checkout-page .summary-item.empty-cart-message {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    padding: 20px;
    color: var(--body-color);
}

.checkout-page hr {
    border: 0;
    border-top: 1px solid rgba(3, 16, 49, 0.08);
    margin: 15px 0;
}

.checkout-page .payment-method {
    margin: 20px 0;
}

.checkout-page .method-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--heading-color);
    margin-bottom: 10px;
}

.checkout-page .method-title i {
    margin-right: 8px;
}

.checkout-page .polar-widget {
    background: rgba(var(--primary-color-rgb), 0.04);
    border: 1px solid var(--primary-color);
    border-radius: 6px;
    padding: 12px;
    text-align: center;
    margin-bottom: 15px;
}

.checkout-page .polar-widget .polar-brand {
    color: var(--heading-color);
    font-size: 14px;
}

.checkout-page .polar-widget p {
    font-size: 12px;
    color: var(--body-color);
    margin-top: 5px;
}

.checkout-page .btn-checkout {
    width: 100%;
    padding: 14px;
    background-color: var(--heading-color);
    color: var(--white);
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    -webkit-transition: background 0.3s ease-out 0s;
    transition: background 0.3s ease-out 0s;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 10px;
}

.checkout-page .btn-checkout:hover {
    background-color: var(--primary-color);
    color: var(--white);
}

.checkout-page .secure-note {
    text-align: center;
    font-size: 12px;
    color: var(--body-color);
    margin-top: 10px;
}

.checkout-page .secure-note i {
    color: var(--primary-color);
}

/* Header Auth Trigger */
.auth-trigger {
    cursor: pointer;
}

/* Prevent body scroll when modal open */
body.auth-modal-open {
    overflow: hidden;
}

/* Register Sidebar Custom Styling */
.register-welcome-text h2 {
  font-size: 28px;
  font-weight: 700;
  color: var(--heading-color);
  margin-bottom: 12px;
  line-height: 1.3;
}

.register-welcome-text p {
  font-size: 15px;
  line-height: 1.6;
  color: var(--body-color);
  margin-bottom: 28px;
}

.register-stats-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 30px;
}

.register-stats-container .stat-card {
  background: var(--white);
  padding: 16px;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(3, 16, 49, 0.03);
  border: 1px solid rgba(3, 16, 49, 0.06);
  display: flex;
  align-items: center;
  gap: 12px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.register-stats-container .stat-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 30px rgba(3, 16, 49, 0.06);
}

.register-stats-container .stat-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background-image: linear-gradient(135deg, rgba(42, 30, 92, 0.08) 0%, rgba(0, 159, 235, 0.08) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: var(--primary-color);
}

.register-stats-container .stat-info {
  display: flex;
  flex-direction: column;
  text-align: left;
}

.register-stats-container .stat-number {
  font-size: 20px;
  font-weight: 700;
  color: var(--heading-color);
  line-height: 1.2;
}

.register-stats-container .stat-label {
  font-size: 12px;
  color: var(--body-color);
  font-weight: 500;
}

.register-features-boxes {
  display: flex;
  flex-direction: column;
  gap: 16px;
  text-align: left;
}

.register-features-boxes .feature-box {
  background: var(--white);
  padding: 18px;
  border-radius: 12px;
  border: 1px solid rgba(3, 16, 49, 0.05);
  box-shadow: 0 4px 20px rgba(3, 16, 49, 0.02);
  display: flex;
  align-items: flex-start;
  gap: 16px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.register-features-boxes .feature-box:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(3, 16, 49, 0.06);
}

.register-features-boxes .feature-box-icon {
  width: 40px;
  height: 40px;
  min-width: 40px;
  border-radius: 8px;
  background-image: linear-gradient(135deg, rgba(42, 30, 92, 0.06) 0%, rgba(0, 159, 235, 0.06) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: var(--primary-color);
}

.register-features-boxes .feature-box-content h4 {
  font-size: 15px;
  font-weight: 700;
  color: var(--heading-color);
  margin-bottom: 6px;
  line-height: 1.3;
}

.register-features-boxes .feature-box-content p {
  font-size: 13px;
  line-height: 1.5;
  color: var(--body-color);
  margin-bottom: 0;
}

/* Secure Note & Payment Method Badges */
.secure-note-section {
    margin-top: 15px;
    text-align: center;
    border-top: 1px solid #e2e8f0;
    padding-top: 15px;
}

.secure-note-section .secure-note {
    font-size: 13px;
    color: #64748b;
    margin-bottom: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.secure-note-section .secure-note i {
    color: #10b981;
}

.accepted-payment-methods {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    justify-content: center;
}

.accepted-payment-methods .payment-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 4px;
    padding: 4px 4px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    max-width: 54px;
}

.accepted-payment-methods .payment-badge img {
    width: auto;
    max-width: 100%;
    display: block;
    object-fit: contain;
}
/* WhatsApp Widget Styles */
.whatsapp-widget {
  position: fixed;
  bottom: 25px;
  left: 25px;
  z-index: 9999;
  font-family: inherit;
}

.whatsapp-widget.whatsapp-rtl {
  left: auto;
  right: 25px;
}

.whatsapp-btn {
  width: 55px;
  height: 55px;
  background-color: #25d366;
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
  outline: none;
  text-decoration: none;
}

.whatsapp-btn:hover {
  background-color: #128c7e;
  transform: scale(1.05);
  color: #fff;
}

/* WhatsApp Popup */
.whatsapp-popup {
  position: absolute;
  bottom: 70px;
  left: 0;
  width: 320px;
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 5px 25px rgba(0, 0, 0, 0.15);
  display: none;
  flex-direction: column;
  overflow: hidden;
  animation: waFadeIn 0.3s ease;
}

.whatsapp-widget.whatsapp-rtl .whatsapp-popup {
  left: auto;
  right: 0;
}

@keyframes waFadeIn {
  from {
    opacity: 0;
    transform: translateY(15px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.whatsapp-popup-header {
  background-color: #075e54;
  color: #fff;
  padding: 15px 20px;
  display: flex;
  align-items: center;
  position: relative;
}

.whatsapp-popup-avatar {
  width: 40px;
  height: 40px;
  background-color: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  margin-right: 12px;
}

.whatsapp-widget.whatsapp-rtl .whatsapp-popup-avatar {
  margin-right: 0;
  margin-left: 12px;
}

.whatsapp-popup-header-info h4 {
  font-size: 15px;
  font-weight: 600;
  color: #fff;
  margin: 0 0 2px 0;
}

.whatsapp-popup-header-info p {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.8);
  margin: 0;
}

.whatsapp-popup-close {
  position: absolute;
  top: 15px;
  right: 15px;
  background: none;
  border: none;
  color: #fff;
  font-size: 20px;
  cursor: pointer;
  opacity: 0.7;
  transition: opacity 0.2s;
  outline: none;
}

.whatsapp-widget.whatsapp-rtl .whatsapp-popup-close {
  right: auto;
  left: 15px;
}

.whatsapp-popup-close:hover {
  opacity: 1;
}

.whatsapp-popup-body {
  background-color: #e5ddd5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cg fill='%23b2b2b2' fill-opacity='0.08'%3E%3Cpath fill-rule='evenodd' d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm1-61c3.16 0 6-2.5 6-5.5S38.16 18 35 18s-6 2.5-6 5.5 2.84 5.5 6 5.5zm29 57c2.2 0 4-1.8 4-4s-1.8-4-4-4-4 1.8-4 4 1.8 4 4 4zM25 49c1.65 0 3-1.35 3-3s-1.35-3-3-3-3 1.35-3 3 1.35 3 3 3zm40-34c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zM15 8c.55 0 1-.45 1-1V5c0-.55-.45-1-1-1s-1 .45-1 1v2c0 .55.45 1 1 1zm70 70c.55 0 1-.45 1-1v-2c0-.55-.45-1-1-1s-1 .45-1 1v2c0 .55.45 1 1 1z'/%3E%3C/g%3E%3C/svg%3E");
  padding: 20px;
  min-height: 100px;
  display: flex;
  flex-direction: column;
}

.whatsapp-chat-bubble {
  background-color: #fff;
  border-radius: 8px;
  padding: 10px 14px;
  max-width: 90%;
  position: relative;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.whatsapp-chat-bubble::after {
  content: "";
  position: absolute;
  top: 0;
  left: -10px;
  border-width: 0 10px 10px 0;
  border-style: solid;
  border-color: transparent #fff transparent transparent;
}

.whatsapp-widget.whatsapp-rtl .whatsapp-chat-bubble::after {
  left: auto;
  right: -10px;
  border-width: 0 0 10px 10px;
  border-color: transparent transparent transparent #fff;
}

.whatsapp-chat-time {
  font-size: 9px;
  color: #999;
  text-align: right;
  margin-bottom: 4px;
}

.whatsapp-chat-bubble p {
  font-size: 13px;
  color: #333;
  margin: 0;
  line-height: 1.4;
  word-break: break-word;
}

.whatsapp-popup-footer {
  padding: 10px 20px;
  background-color: #fff;
  display: flex;
  justify-content: center;
}

.whatsapp-start-chat-btn {
  background-color: #25d366;
  color: #fff;
  border: none;
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  transition: background-color 0.2s;
  width: 100%;
  justify-content: center;
}

.whatsapp-start-chat-btn:hover {
  background-color: #128c7e;
  color: #fff;
}

/* WhatsApp User Input */
.whatsapp-input-container {
  margin-top: 15px;
  background-color: #fff;
  border-radius: 8px;
  padding: 6px 10px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  border: 1px solid #e0e0e0;
}

#whatsapp-user-message {
  width: 100%;
  border: none;
  resize: none;
  outline: none;
  font-size: 13px;
  color: #333;
  padding: 4px 0;
  font-family: inherit;
  background: transparent;
}

#whatsapp-user-message::placeholder {
  color: #999;
}

/* Unified Chat Widget Styles */
.unified-chat-widget {
  position: fixed;
  bottom: 25px;
  left: 25px;
  z-index: 9999;
  font-family: inherit;
}

.unified-chat-widget.chat-rtl {
  left: auto;
  right: 25px;
}

.unified-chat-btn {
  width: 55px;
  height: 55px;
  background-color: var(--primary-color);
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
  outline: none;
}

.unified-chat-btn:hover {
  background-color: var(--heading-color);
  transform: scale(1.05);
  color: #fff;
}

/* Chat Options Popup */
.chat-options-popup {
  position: absolute;
  bottom: 70px;
  left: 0;
  width: 320px;
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 5px 25px rgba(0, 0, 0, 0.15);
  display: none;
  flex-direction: column;
  overflow: hidden;
  animation: waFadeIn 0.3s ease;
}

.unified-chat-widget.chat-rtl .chat-options-popup {
  left: auto;
  right: 0;
}

.chat-options-header {
  background-color: var(--primary-color);
  color: #fff;
  padding: 15px 20px;
  position: relative;
}

.chat-options-header h4 {
  font-size: 15px;
  font-weight: 600;
  color: #fff;
  margin: 0 0 2px 0;
}

.chat-options-header p {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.8);
  margin: 0;
}

.chat-options-close {
  position: absolute;
  top: 15px;
  right: 15px;
  background: none;
  border: none;
  color: #fff;
  font-size: 20px;
  cursor: pointer;
  opacity: 0.7;
  transition: opacity 0.2s;
  outline: none;
}

.unified-chat-widget.chat-rtl .chat-options-close {
  right: auto;
  left: 15px;
}

.chat-options-close:hover {
  opacity: 1;
}

.chat-options-body {
  padding: 15px;
  background-color: #f8f9fa;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.chat-option-item {
  display: flex;
  align-items: center;
  background-color: #fff;
  border-radius: 8px;
  padding: 12px 15px;
  border: 1px solid #eef0f3;
  cursor: pointer;
  transition: all 0.2s ease;
}

.chat-option-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
}

.chat-option-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: #fff;
  margin-right: 12px;
}

.unified-chat-widget.chat-rtl .chat-option-icon {
  margin-right: 0;
  margin-left: 12px;
}

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

.tawkto-option .chat-option-icon {
  background-color: #00a4ff;
}

.chat-option-info {
  flex-grow: 1;
}

.chat-option-info h5 {
  font-size: 13px;
  font-weight: 600;
  margin: 0 0 2px 0;
  color: var(--heading-color);
}

.chat-option-info p {
  font-size: 11px;
  color: var(--body-color);
  margin: 0;
  line-height: 1.2;
}

.chat-option-arrow {
  color: #ccc;
  font-size: 14px;
}

.unified-chat-widget.chat-rtl .chat-option-arrow {
  transform: scaleX(-1);
}

.chat-option-item:hover .chat-option-arrow {
  color: var(--primary-color);
}

/* Header Cart Button Styling */
.header-cart-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 45px;
  height: 45px;
  border-radius: 5px;
  background-color: var(--white);
  color: var(--heading-color);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
  font-size: 18px;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  border: 1px solid rgba(0, 0, 0, 0.08);
}

.header-cart-btn:hover {
  background-color: var(--primary-color);
  color: var(--white);
  transform: translateY(-2px);
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
  border-color: var(--primary-color);
}

.header-cart-btn i {
  transition: transform 0.3s ease;
}

.header-cart-btn:hover i {
  transform: scale(1.1);
}

/* Badge styling */
.header-cart-badge {
  position: absolute;
  top: -8px;
  right: -8px;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 10px;
  background: var(--primary-color);
  background-image: var(--bg-gradient-2);
  color: var(--white);
  font-size: 10px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--white);
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
}

.header-cart-btn:hover .header-cart-badge {
  background: var(--white);
  color: var(--primary-color);
  border-color: var(--primary-color);
  transform: scale(1.05);
}

/* Inner header transparent background adaptive support */
.header-area.inner-page-header:not(.is-sticky) .header-cart-btn {
  background-color: rgba(3, 16, 49, 0.05);
  color: var(--heading-color);
  border-color: rgba(3, 16, 49, 0.08);
  box-shadow: none;
}

.header-area.inner-page-header:not(.is-sticky) .header-cart-btn:hover {
  background-color: var(--primary-color);
  color: var(--white);
  border-color: var(--primary-color);
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
}

.header-area.inner-page-header:not(.is-sticky) .header-cart-badge {
  border-color: var(--white);
}

.header-area.inner-page-header:not(.is-sticky) .header-cart-btn:hover .header-cart-badge {
  background: var(--white);
  color: var(--primary-color);
  border-color: var(--primary-color);
}

/*---=======================
   End Checkout Page css
===========================---*/

/*---=======================
   Start Order Confirmation Page css
===========================---*/
.order-confirmation-page {
    background-color: var(--light-blue-gray);
}

.order-confirmation-page .order-confirmation-return {
    margin-bottom: 20px;
}

.order-confirmation-page .order-confirmation-return a {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 8px;
    color: var(--primary-color);
    font-size: 14px;
    font-weight: 500;
    -webkit-transition: color 0.3s ease-out 0s;
    transition: color 0.3s ease-out 0s;
}

.order-confirmation-page .order-confirmation-return a:hover {
    color: var(--heading-color);
}

.order-confirmation-page .order-confirmation-card {
    max-width: 720px;
    margin: 0 auto;
    padding: 48px 42px;
    background: var(--white);
    border: 1px solid rgba(3, 16, 49, 0.08);
    border-radius: 12px;
    -webkit-box-shadow: 0 12px 32px rgba(3, 16, 49, 0.08);
    box-shadow: 0 12px 32px rgba(3, 16, 49, 0.08);
    text-align: center;
}

.order-confirmation-page .order-confirmation-icon {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    width: 82px;
    height: 82px;
    margin-bottom: 24px;
    color: var(--white);
    background-image: var(--bg-gradient-2);
    border-radius: 50%;
    -webkit-box-shadow: 0 12px 24px rgba(var(--primary-color-rgb), 0.25);
    box-shadow: 0 12px 24px rgba(var(--primary-color-rgb), 0.25);
}

.order-confirmation-page .order-confirmation-icon i {
    font-size: 34px;
    line-height: 1;
}

.order-confirmation-page .order-confirmation-card h1 {
    margin-bottom: 10px;
    color: var(--heading-color);
    font-size: 30px;
    line-height: 1.25;
    font-weight: 700;
}

.order-confirmation-page .order-confirmation-subtitle {
    max-width: 560px;
    margin: 0 auto;
    color: var(--body-color);
    font-size: 16px;
    line-height: 1.7;
}

.order-confirmation-page .order-confirmation-divider {
    width: 100%;
    height: 1px;
    margin: 28px 0;
    background: rgba(3, 16, 49, 0.08);
}

.order-confirmation-page .order-confirmation-info {
    margin-bottom: 30px;
    padding: 22px 24px;
    text-align: left;
    background: rgba(var(--primary-color-rgb), 0.04);
    border: 1px solid rgba(var(--primary-color-rgb), 0.1);
    border-left: 4px solid var(--primary-color);
    border-radius: 8px;
}

.order-confirmation-page .order-confirmation-info h3 {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
    color: var(--heading-color);
    font-size: 18px;
    line-height: 1.4;
    font-weight: 700;
}

.order-confirmation-page .order-confirmation-info h3 i,
.order-confirmation-page .order-confirmation-info strong {
    color: var(--primary-color);
}

.order-confirmation-page .order-confirmation-info p {
    color: var(--body-color);
    font-size: 14px;
    line-height: 1.7;
}

.order-confirmation-page .order-confirmation-info p + p {
    margin-top: 10px;
}

.order-confirmation-page .order-confirmation-actions {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: 14px;
}

.order-confirmation-page .order-confirmation-dashboard-btn,
.order-confirmation-page .order-confirmation-secondary-btn {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    gap: 9px;
    min-height: 52px;
    padding: 14px 30px;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.3;
}

.order-confirmation-page .order-confirmation-secondary-btn {
    color: var(--heading-color);
    background: var(--light-blue-gray);
    border: 1px solid rgba(3, 16, 49, 0.08);
    -webkit-transition: all 0.3s ease-out 0s;
    transition: all 0.3s ease-out 0s;
}

.order-confirmation-page .order-confirmation-secondary-btn:hover {
    color: var(--white);
    background: var(--heading-color);
    border-color: var(--heading-color);
}

.order-confirmation-page .order-confirmation-note {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 8px;
    margin-top: 22px;
    color: var(--body-color);
    font-size: 13px;
    line-height: 1.6;
}

.order-confirmation-page .order-confirmation-note i {
    color: var(--primary-color);
}

.order-confirmation-page .order-confirmation-support-info {
    margin-bottom: 30px;
    padding: 22px 24px;
    text-align: left;
    background: rgba(255, 152, 0, 0.05);
    border: 1px solid rgba(255, 152, 0, 0.2);
    border-left: 4px solid #ff9800;
    border-radius: 8px;
}

.order-confirmation-page .order-confirmation-support-info h3 {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
    color: var(--heading-color);
    font-size: 18px;
    line-height: 1.4;
    font-weight: 700;
}

.order-confirmation-page .order-confirmation-support-info h3 i {
    color: #ff9800;
}

.order-confirmation-page .order-confirmation-support-info p {
    color: var(--body-color);
    font-size: 14px;
    line-height: 1.7;
}

/* User Dashboard Purchase Code Copy Button */
.db-purchase-code-wrap {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
    padding: 4px 8px;
    background: rgba(var(--primary-color-rgb), 0.08);
    border: 1px solid rgba(var(--primary-color-rgb), 0.2);
    border-radius: 6px;
}

.db-purchase-code-text {
    font-family: monospace;
    font-size: 12px;
    font-weight: 600;
    color: var(--primary-color);
    letter-spacing: 0.3px;
    word-break: break-all;
}

.db-copy-btn {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    padding: 0;
    background: var(--primary-color);
    color: #ffffff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 11px;
    -webkit-transition: background 0.2s ease, filter 0.2s ease, transform 0.1s ease;
    transition: background 0.2s ease, filter 0.2s ease, transform 0.1s ease;
}

.db-copy-btn:hover {
    -webkit-filter: brightness(0.9);
    filter: brightness(0.9);
    -webkit-transform: scale(1.05);
    transform: scale(1.05);
}

.db-copy-btn.copied {
    background: #28a745;
}

/*---=======================
   End Order Confirmation Page css
===========================---*/

/* Switch Text */
.auth-switch {
    text-align: center;
    font-size: 13px;
    color: var(--body-color);
    margin-top: 20px;
    margin-bottom: 0;
    font-weight: 500;
}

.auth-switch-link {
    color: var(--primary-color);
    font-weight: 600;
    text-decoration: none;
}

.auth-switch-link:hover {
    color: var(--heading-color);
    text-decoration: underline;
}

/* Header Auth Trigger */
.auth-trigger {
    cursor: pointer;
}

/* Prevent body scroll when modal open */
body.auth-modal-open {
    overflow: hidden;
}

/*---=======================
   End Auth Page css
===========================---*/