@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');


:root {
  --theme-black: #000000;
  --fade-black: #111827;
  --bs-white: #ffffff;
  --theme-white: #ffffff;
  --theme-fade-white: #FFFEFD;
  --theme-color: #040F24;
  --theme-green-color: #2b3935;
  --theme-secondary-color: #C35D01;
  --theme-light-secondary-color: #d2ae4c;
  --theme-light-blue: #fafdff;
  --theme-light-purple: #eef2ff;
  --theme-tertiary: #534ab7;
  --theme-dark-green: #1c2b1e;
  --theme-red: #fe5d61;
  --transition500: all 0.5s ease-in-out;
  --open-sans: "Open Sans", sans-serif;
  --bebas-neue-semiexpanded: "bebas-neue-pro-semiexpanded", sans-serif;
  --bebas-neue: "bebas-neue-pro-expanded", sans-serif;
  --theme-font: var(--open-sans);
  --theme-secondary-font: var(--bebas-neue);

  /* New tokens (kept alongside existing theme vars) */
  --theme-navy: #0f1b2d;
  --theme-purple-soft: #6d28d9;
  --theme-purple-bg: #f5f1ff;
  --theme-amber: #facc15;
  --gauge-track: #e5e7eb;
  --card-border: #e8eaed;
  --card-radius: 20px;
  --bar-track: #eceef1;

  --font16: clamp(14px, 3vw, 16px);
  --font18: clamp(14px, 1.2vw, 18px);
  --font21: clamp(14px, 1.35vw, 21px);
  --font22: clamp(16px, 1.45vw, 22px);
  --font25: clamp(18px, 1.6vw, 25px);
  --font28: clamp(20px, 1.8vw, 28px);
  --font30: clamp(22px, 1.9vw, 30px);
  --font33: clamp(24px, 2.1vw, 33px);

  /* Banner-specific clamp type scale (1vw = 19.2px @1920) */
  --font13: clamp(12px, 0.677vw, 13px);
  --font14: clamp(13px, 0.729vw, 14px);
  --font15: clamp(13px, 0.781vw, 15px);
  --font18b: clamp(15px, 0.9375vw, 18px);
  --font22b: clamp(19px, 1.145vw, 22px);
  --font40: clamp(28px, 2.083vw, 40px);
  --font67: clamp(36px, 3.4vw, 67px);

}

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

body {
  font-family: var(--theme-font);
  font-weight: 400;
  overflow-x: hidden;
  color: var(--theme-black);
  background-color: #F5F2EB;
}

a {
  display: inline-block;
  color: var(--theme-black);
  text-decoration: none;
  transition: var(--transition500);
}

b,
strong {
  font-weight: 800;
}

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

h1 {
  font-size: clamp(30px, 4.5vw, 71px);
}

h2 {
  font-size: clamp(26px, 3vw, 50px);
  margin-bottom: 0.5em;
  line-height: 1.2;
}

h3 {
  font-size: clamp(22px, 1.9vw, 36px);
  margin-bottom: 0.5em;
}

h4 {
  font-size: clamp(20px, 1.7vw, 30px);
}

h5 {
  font-size: 24px;
}

h6 {
  font-size: clamp(18px, 1.3vw, 23px);
}

p {
  font-size: clamp(14px, 1.1vw, 18px);
  margin-bottom: 1em;
  line-height: 1.7;
  font-weight: 500;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 400;
  color: var(--theme-black);
  font-family: var(--bebas-neue);
}

.opacity-0 {
  opacity: 0 !important;
}

.opacity-1 {
  opacity: 1 !important;
}

.disable_scroll {
  overflow: hidden;
}

.common_sub_section_heading h2 {
  font-size: 48px;
  color: var(--theme-black);
}

/* .common_btn_main {
    border: 2px solid var(--theme-black);
    border-radius: 8px;
    font-size: 18px;
    padding: 0 32px;
    line-height: 47px;
    color: var(--theme-black);
    transition: all 0.5s;
} */

.common_btn {
  font-size: clamp(14px, 1.1vw, 18px);
  border-bottom-left-radius: 0;
  line-height: 1.2;
  min-height: clamp(50px, 3.8vw, 58px);
  color: var(--bs-white);
  padding: 10px clamp(16px, 1.6vw, 24px);
  background-color: var(--theme-secondary-color);
  transition: all 0.5s ease-in-out;
  text-transform: capitalize;
  font-weight: 600;
  min-width: clamp(143px, 15vw, 260px);
  text-align: center;
  border: 2px solid var(--theme-secondary-color);
  align-content: center;
  border-radius: 5px;
}

.common_btn:hover {
  color: var(--theme-secondary-color);
  background-color: transparent;
}



.common_btn.theme_secondary_btn {
  background: transparent;
  color: var(--theme-color);
  border: 2px solid #2b3935;
  transition: all 0.5s ease-in-out;
}

.common_btn.theme_secondary_btn:hover {
  color: var(--theme-secondary-color);
  border-color: var(--theme-secondary-color);
}

.common_btn.btn_white {
  border: 1px solid var(--theme-white);
  background-color: transparent;
}

.common_btn.btn_white:hover {
  background-color: var(--theme-white);
}

.small_container {
  width: 100%;
  max-width: 1364px;
  margin: 0 auto;
}

.common_bg {
  background-color: #FCFAF4;
}

.common_bg_dark {
  background-color: #070707;
}


.common_icon_btn {
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-transform: none;
  letter-spacing: 0;
}

.common_icon_btn :is(svg, img) {
  width: 16px;
  height: 16px;
  object-fit: scale-down;
}

/* .common_icon_btn:hover {
  color: var(--theme-white);
} */

.common_icon_btn.without_bg_btn {
  background: transparent;
  color: var(--theme-color);
  border: none;
  padding: 0;
  line-height: 30px;
}

.common_icon_btn.without_bg_btn svg path {
  stroke: var(--theme-color);
}



.sticky_area {
  position: -webkit-sticky;
  position: sticky;
  top: 100px;
}

/* TITTLE AND CONTENT AREA START  */

.common_title_area h2 {
  font-size: clamp(28px, 2.8vw, 53px);
  margin-bottom: 0.8em;
  line-height: 1.2;
  font-family: var(--theme-font);
}


.common_title_area :is(h5, h6) {
  font-size: 22px;
  color: #060606;
  font-weight: 600;
  margin-bottom: 1em;
  font-family: var(--theme-font);
}

.common_title_area h6 {
  font-size: 18px;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--theme-secondary-color);
}

.common_title_area p {
  font-size: clamp(14px, 1.2vw, 20px);
  margin-bottom: 1em;
  font-weight: 500;
}

.common_title_area>*:last-child {
  margin-bottom: 0;
}



.common_Vpadding {
  padding-top: clamp(50px, 7vw, 100px);
  padding-bottom: clamp(50px, 7vw, 100px);
}

.common_title_area img {
  width: 100%;
  margin-bottom: 35px;
  aspect-ratio: 3 / 1.5;
  object-fit: cover;
}

.common_title_area ul {
  margin-bottom: 30px;
}

.common_title_area ul li {
  font-size: var(--font22);
  color: #1e1e1e;
  font-weight: 500;
  margin-bottom: 10px;
  padding-left: 50px;
  position: relative;
  margin-bottom: 50px;
}

.common_title_area ul li:last-child {
  margin-bottom: 0;
}

.common_title_area ul li::before {
  content: "";
  width: 30px;
  height: 30px;
  background-image: url("../img/check_icon.svg");
  background-size: contain;
  background-repeat: no-repeat;
  position: absolute;
  top: 3px;
  left: 2px;
}

.common_title_area :is(p, span, li, h2, h3, h4) a {
  color: var(--theme-color);
}

.common_mb {
  margin-bottom: clamp(40px, 5.5vw, 80px);
}

.common_mt {
  margin-top: clamp(40px, 4.8vw, 80px);
}

.cl_white :is(h1, h2, h3, h4) {
  color: var(--theme-white) !important;
}

.cl_white :is(h5, h6) {
  color: var(--theme-white) !important;
}

.cl_white p {
  color: var(--theme-white) !important;
}

.cl_white ul {
  color: var(--theme-white) !important;
}

.cl_white li,
.cl_white li p {
  color: var(--theme-white) !important;
}

.cl_blue :is(h2, h3, h4) {
  color: var(--theme-tertiary);
}

.common_bg_dark :is(h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  p,
  li,
  li p,
  span,
  a,
  button,
  button span,
  button i,
  button svg,
  button path) {
  color: var(--theme-white);
}

.hide_before::before {
  display: none !important;
}

.hide_after::after {
  display: none !important;
}

.unset_max_width :is(h2, h3, h4, h5, h6, p) {
  max-width: unset !important;
}

.common_design_bg {
  position: relative;
}

.common_design_bg::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url("../img/vector.svg") no-repeat center;
  background-size: cover;
}

/* TITTLE AND CONTENT AREA END  */

/* ============ HEADER =========== */

.header_learn_btn_area {
  padding: 14px 60px;
  background: linear-gradient(180deg, #bd0b09 0%, #d82220 100%);
  clip-path: polygon(5% 0%, 100% 0%, 100% 100%, 0% 100%);
}

.header_learn_btn_area>* {
  color: var(--theme-white);
}

.header_learn_btn_area a {
  transition: all 0.5s ease-in-out;
}

.header_learn_btn_area a:hover {
  text-decoration: underline;
}

.header_learn_btn_area a svg {
  flex: 0 0 auto;
}

.upper_header_nav {
  padding-left: 12%;
}

.upper_header_nav ul {
  display: flex;
}

.upper_header_nav ul li {
  padding-right: 40px;
  position: relative;
}

.upper_header_nav ul li:last-child {
  padding-right: 0;
}

.upper_header_nav ul li a {
  color: #fff;
  transition: all 0.5s;
  font-family: var(--theme-font);
  font-weight: 600;
}

.upper_header_nav ul li a:hover {
  color: var(--theme-color);
}

.upper_header_nav ul li::after {
  content: "|";
  position: absolute;
  top: 0;
  right: 20px;
  color: #535353;
  font-size: 18px;
}

.upper_header_nav ul li:last-child:after {
  display: none;
}

.up_contact_info_area {
  display: flex;
  align-items: center;
  column-gap: 10px;
  font-size: 16px;
}

.up_contact_info_area :is(svg, img) {
  width: 20px;
  height: 20px;
  fill: var(--theme-secondary-color);
}

.up_contact_info_area {
  font-family: var(--theme-font);
  transition: var(--transition500);
}

.up_contact_info_area:hover {
  color: var(--theme-color);
}

.up_contact_info_area:not(:last-child) {
  margin-right: 40px;
}

.mobile_header_menu {
  display: none;
}

.header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  padding: 0;
  margin: 0 auto;
}

.header_unique_btn:hover {
  color: var(--theme-tertiary);
}

.logo-area a img {
  width: 100%;
  max-width: 230px;
  height: 75px;
  object-fit: scale-down;
  object-position: left;
}

.nav-area-main {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.nav-ul {
  display: flex;
  flex-wrap: wrap;
}

.mobile_header_menu {
  display: none;
}

.nav-ul>li {
  margin-right: 30px;
  position: relative;
}

/* .nav-ul>li:last-child {
    margin-right: 0;
} */

.nav-ul li a {
  padding: 10px 0;
  font-size: clamp(14px, 1vw, 18px);
  color: var(--theme-white);
  letter-spacing: 1px;
  transition: all 0.5s;
  font-weight: 500;
  font-family: var(--theme-font);
}

.log_status {
  font-size: clamp(14px, 1.1vw, 20px);
}

.dropdown-arrow i {
  font-size: 14px;
  color: var(--theme-white);
  transition: all 0.2s ease-in-out;
}

.mobile-nav .nav-ul .dropdown-nav a::after {
  right: 10%;
}

.nav-ul li a:hover {
  color: var(--theme-red);
}

.mobile-nav .nav-ul>li>a:hover {
  color: var(--theme-red);
}

.mobile-nav .nav-ul>li>a.active {
  color: var(--theme-red);
}

.contact_btn {
  position: relative;
  display: flex;
  justify-content: end;
  flex: 0 0 auto;
  align-items: center;
}

.contact_btn .common_btn {
  background-color: #000E29;
  border-color: #000E29;
  min-width: unset;
}

.search_icon_area {
  margin-right: 30px;
}

.search_icon_area i {
  color: var(--theme-white);
  font-size: 22px;
  padding-top: 5px;
}

.nav-ul li:hover .dropdown-arrow i {
  transform: rotate(180deg);
}

.nav-ul li:hover ul {
  visibility: visible;
  opacity: 1;
  top: 45px;
}

.nav-ul li a:hover .dropdown-arrow i {
  color: var(--theme-red);
}

.nav-ul li ul {
  background-color: #ffffff;
  position: absolute;
  width: 200px;
  top: 60px;
  visibility: hidden;
  opacity: 0;
  z-index: 9999999;
  box-shadow: 1px 1px 4px 0px rgba(0, 0, 0, 0.15);
  -webkit-box-shadow: 1px 1px 4px 0px rgba(0, 0, 0, 0.15);
  -moz-box-shadow: 1px 1px 4px 0px rgba(0, 0, 0, 0.15);
  border-radius: 8px;
}

.nav-ul li ul li a {
  display: block;
  padding: 5px 12px;
  transition: all 0.5s;
  font-weight: 500;
  font-size: 14px;
  color: #000;
  transition: all 0.5s;
}

.dropdown-arrow {
  margin-left: 5px;
}

.menu-bar {
  display: none;
  padding: 0 10px;
}

.menu-bar i {
  font-size: 25px;
  color: var(--bs-white);
}

.nav-header {
  width: 100%;
  background-color: transparent;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 11;
  transition: var(--transition500);
  border-bottom: 3px solid #E3DED5;
  background-color: #F5F2EB;
}

.header_fixed {
  box-shadow: 0 0 25px #0303031c;
}

.header_fixed:after {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  background: transparent;
  backdrop-filter: blur(8px);
  z-index: -1;
}

.mobile-nav {
  display: none;
}

.nav-ul>li>a.active {
  color: var(--theme-red);
}

.nav-ul>li:last-child {
  margin-right: 0;
}

.black-overlay {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #0000008e;
  z-index: 99;
  display: none;
}

.header_offset {
  background-color: transparent;
}


/* ===================================================
   REUSABLE BUILDING BLOCKS
=================================================== */
.eyebrow_badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 12px;
  border: 1px solid #ceaeff;
  border-radius: 999px;
  background-color: #f7f1ff00;
  color: #a563ff;
  font-size: var(--font13);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.eyebrow_badge svg {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
}

.checklist_inline ul {
  display: flex;
  flex-wrap: wrap;
  row-gap: 10px;
  column-gap: clamp(18px, 1.5vw, 28px);
}

.common_title_area .checklist_inline li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--font15);
  font-weight: 500;
  color: var(--fade-black);
  padding-left: 50px;
  position: relative;
  margin-bottom: 0;
}

.common_title_area .checklist_inline li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44.155' height='54' viewBox='0 0 44.155 54'%3E%3Cg transform='translate(-2.917)'%3E%3Cpath d='M24.995 4.546c6.335 4.961 14.209 5.77 18.657 5.77H43.7v20.059c0 8.881-12.445 16.826-18.706 19.9-6.264-3.065-18.7-10.991-18.7-19.9V10.316h.047c4.447 0 12.32-.808 18.655-5.77m0-4.546C19.279 6.006 10.961 6.941 6.338 6.941a26.694 26.694 0 0 1-3.421-.191v23.625C2.917 44.3 24.995 54 24.995 54s22.078-9.7 22.078-23.625V6.75a26.741 26.741 0 0 1-3.422.191c-4.622 0-12.94-.935-18.655-6.941' fill='%23c35d01'/%3E%3Cpath d='m18.782 29.486-8.77-6.851 2.076-2.66 5.93 4.629L27.8 10.2l2.791 1.9Z' transform='translate(4.878 7.013)' fill='%23c35d01'/%3E%3C/g%3E%3C/svg%3E") !important;
  background-size: contain;
  background-repeat: no-repeat;
}

/* Generic elevated card surface, reusable anywhere */
.surface_card {
  background: var(--theme-white);
  border: 1px solid var(--card-border);
  border-radius: var(--card-radius);
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 12px 32px -16px rgba(16, 24, 40, 0.12);
}

/* Progress bar row, reusable for any "label + value + bar" pattern */
.metric_row {
  margin-bottom: 5px;
}

.metric_row:last-child {
  margin-bottom: 0;
}

.metric_row_top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}

.metric_row_top span:first-child {
  font-size: 12px;
  font-weight: 500;
  color: var(--fade-black);
}

.metric_row_top span:last-child {
  font-size: 12px;
  font-weight: 700;
  color: var(--theme-black);
}

.metric_bar_track {
  width: 100%;
  height: 6px;
  border-radius: 999px;
  background: var(--bar-track);
  overflow: hidden;
}

.metric_bar_fill {
  height: 100%;
  border-radius: 999px;
}

.metric_bar_fill.is_strong {
  background: var(--theme-secondary-color);
}

.metric_bar_fill.is_mid {
  background: #a3b818;
}

.metric_bar_fill.is_weak {
  background: var(--theme-red);
}

.metric_bar_fill.is_warm {
  background: var(--theme-light-secondary-color);
}

/* Reusable inline notice / flag block */
.notice_flag {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: clamp(14px, 1.1vw, 18px);
  border: 1px solid var(--card-border);
  border-radius: 14px;
  background: var(--theme-fade-white);
}

.notice_flag_title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  color: #6b7280;
}

.notice_flag_title svg {
  width: 16px;
  height: 16px;
  color: #9ca3af;
  flex-shrink: 0;
}

.notice_flag p {
  font-size: 12px;
  color: #9ca3af;
  margin: 0;
  line-height: 1.6;
}

/* ===================================================
   BANNER SECTION
=================================================== */
.board_banner_section {
  padding-top: 30px;
  padding-bottom: 50px;
  overflow: hidden;
}

.board_banner_section .row {
  align-items: center;
}

.board_banner_content h1 {
  font-size: clamp(36px, 4.5vw, 88px);
  line-height: 1.08;
  text-wrap: balance;
  margin: clamp(18px, 1.6vw, 26px) 0 clamp(18px, 1.6vw, 24px);
}

.board_banner_content>p {
  font-size: var(--font18b);

  font-weight: 500;
  max-width: 560px;
  margin-bottom: clamp(24px, 2vw, 34px);
}

.board_banner_btn_row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: clamp(24px, 2vw, 32px);
}


.board_banner_btn_row .common_btn svg {
  width: 16px;
  height: 16px;
}

/* ===================================================
   BANNER — MEN'S STYLE CARDS (Swiper)
=================================================== */

.bn_mens_card_wrapper {
  width: 100%;
}

/* Each slide card */
.men_style_card {
  background: var(--theme-white);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.07);
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* Photo area */
.men_style_card__img {
  position: relative;
  width: 100%;
  flex: 1 1 auto;
}

.men_style_card__img img {
  width: 100%;
  height: clamp(310px, 25vw, 440px);
  object-fit: cover;
  object-position: top center;
  display: block;
}

/* Colored accent line sitting at the bottom edge of the photo */
.men_style_card__accent {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 5px;
  background-color: #5a6b3a;
  display: block;
}

/* Content area below photo */
.men_style_card__body {
  padding: clamp(16px, 1.6vw, 22px) clamp(14px, 1.2vw, 18px);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}

/* Level badge pill */
.multicolor_badge_by_child>*:nth-child(3n +1) :is(.men_style_card__badge, .men_style_card__accent, .dress_for_card__strap) {
  background-color: #5F6038;
}

.multicolor_badge_by_child>*:nth-child(3n +2) :is(.men_style_card__badge, .men_style_card__accent, .dress_for_card__strap) {
  background-color: #365B7D;
}

.multicolor_badge_by_child>*:nth-child(3n +3) :is(.men_style_card__badge, .men_style_card__accent, .dress_for_card__strap) {
  background-color: #765573;
}

.men_style_card__badge {
  display: inline-block;
  background-color: #5F6038;
  color: var(--theme-white);
  font-size: clamp(14px, 1.15vw, 18px);
  font-weight: 500;
  margin-bottom: 0.8em;
  text-transform: uppercase;
  padding: 2px 10px;
  border-radius: 5px;
  line-height: 1.6;
}

/* Card heading — uses Bebas Neue from your theme */
.men_style_card__title {
  font-family: var(--bebas-neue);
  font-size: clamp(26px, 2.2vw, 36px);
  color: var(--theme-black);
  margin: 0;
  line-height: 1;
  letter-spacing: 0.03em;
}

/* Description */
.men_style_card__desc {
  font-size: clamp(14px, 1.1vw, 20px);
  color: var(--theme-color);
  font-weight: 600;
  line-height: 1.6;
  margin: 0;
  text-align: center;
}

/* Swiper overrides for this context */
.bn_mens_card_wrapper .swiper-slide {
  height: auto;
  /* let slides stretch to equal height */
}

/* Hide pagination on desktop where all 3 are visible */
@media (min-width: 1200px) {
   .pricing-pagination {
    display: none;
  }
}

/* Pagination dots styling (visible on mobile/tablet) */
 .pricing-pagination, .guides-pagination {
  margin-top: 20px;
  position: static;
  display: flex;
  justify-content: center;
}

 .swiper-pagination-bullet {
  background: var(--theme-secondary-color);
  opacity: 0.3;
  width: 8px;
  height: 8px;
}

 .swiper-pagination-bullet-active {
  opacity: 1;
}

/* ===================================================
   SPECTRUM SECTION
=================================================== */

.spectrum_section {
  background-color: #F5F2EB;
  /* same cream as body */
}

/* --- Heading block --- */
.spectrum_heading_wrap {
  text-align: center;
  margin-bottom: clamp(40px, 4vw, 64px);
}

.spectrum_heading_wrap p:not(.spectrum_eyebrow) {
  font-size: clamp(14px, 1.3vw, 20px);
  color: var(--theme-color);
  margin: 10px 0 0;
  font-weight: 500;
}

.spectrum_eyebrow {
  font-size: clamp(14px, 1.15vw, 18px);
  text-transform: uppercase;
  font-weight: 600;
  color: var(--theme-secondary-color);
  margin-bottom: 1em;
  font-family: var(--theme-font);
}

/* Title row: line — HEADING — line */
.spectrum_title_row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(16px, 2vw, 32px);
}

.spectrum_title {
  font-family: var(--bebas-neue-semiexpanded);
  font-size: clamp(32px, 4vw, 70px);
  color: var(--theme-color);
  white-space: nowrap;
  line-height: 1;
  margin: 0;
  flex-shrink: 0;
}

/* Decorative rule with diamond tip */
.spectrum_rule {
  flex: 1;
  height: 2px;
  background-color: var(--theme-color);
  position: relative;
  display: block;
  max-width: 300px;
}

/* Diamond at the inner end (tip closest to the title) */
.spectrum_rule:first-child::after,
.spectrum_rule:last-child::before {
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
  width: 9px;
  height: 9px;
  background-color: var(--theme-color);
}

.spectrum_rule:first-child::after {
  right: -5px;
}

.spectrum_rule:last-child::before {
  left: -5px;
}

/* --- 3-column layout --- */
.spectrum_cols {
  display: flex;
  align-items: flex-start;
}

.spectrum_col {
  flex: 1;
  text-align: center;
  padding: 0 clamp(20px, 2.5vw, 40px);
}

/* Thin vertical divider between columns */
.spectrum_divider {
  flex: 0 0 1px;
  background-color: #d0cbc0;
  align-self: stretch;
  margin: 10px 0;
}

/* --- Column top: badge + title --- */
.spectrum_col_top {
  margin-bottom: clamp(20px, 2vw, 30px);
}

/* Level badge */
.spectrum_badge {
  display: inline-block;
  background-color: var(--badge-bg, var(--theme-secondary-color));
  color: var(--theme-white);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 4px 14px;
  border-radius: 6px;
  font-family: var(--theme-font);
  margin-bottom: 10px;
}

.spectrum_col_title {
  font-family: var(--bebas-neue);
  font-size: clamp(24px, 2.9vw, 50px);
  color: var(--theme-color);
  margin: 0;
  line-height: 1;
  letter-spacing: 0.02em;
}

/* --- Flat-lay image --- */
.spectrum_col_img {
  margin-bottom: clamp(24px, 2.5vw, 36px);
}

.spectrum_col_img img {
  width: 100%;
  max-width: 420px;
  height: clamp(240px, 22vw, 320px);
  object-fit: contain;
  /* flat-lay on transparent/cream bg */
  object-position: center bottom;
  display: block;
  margin: 0 auto;
}

/* --- Text below image --- */
.spectrum_col_tagline {
  font-size: clamp(14px, 1.1vw, 22px);
  font-weight: 700;
  color: var(--theme-color);
  margin-bottom: 10px;
  line-height: 1.4;
  font-family: var(--theme-font);
}

.spectrum_col_desc {
  font-size: clamp(14px, 1vw, 20px);
  color: var(--theme-color);
  font-weight: 500;
  line-height: 1.7;
  margin: 0;
}



@media (min-width: 768px) and (max-width: 991px) {
  .spectrum_title {
    font-size: clamp(28px, 4vw, 46px);
    white-space: normal;
  }

  .spectrum_rule {
    max-width: 80px;
  }
}

/* ===================================================
   SPECTRUM HEADING — LEFT VARIANT
=================================================== */

.spectrum_heading_wrap_left {
  text-align: left;
  margin-bottom: clamp(32px, 3.5vw, 52px);
}

.spectrum_heading_wrap_left .spectrum_title_row {
  justify-content: flex-start;
  align-items: center;
  gap: clamp(16px, 2vw, 28px);
}

/* Title stays left, rule extends right and fills remaining space */
.spectrum_heading_wrap_left .spectrum_title {
  white-space: nowrap;
  flex-shrink: 0;
}

.spectrum_heading_wrap_left .spectrum_rule {
  flex: 1;

}

/* Only one rule on the right side for left-aligned layout */
.spectrum_heading_wrap_left .spectrum_rule:first-child {
  display: none;
}

/* Hide left diamond on right-only rule */
.spectrum_heading_wrap_left .spectrum_rule:last-child::before {
  display: none;
}

/* Diamond tip on left end of the rule (closest to title) */
.spectrum_heading_wrap_left .spectrum_rule:last-child::after {
  content: "";
  position: absolute;
  top: 50%;
  left: -5px;
  transform: translateY(-50%) rotate(45deg);
  width: 9px;
  height: 9px;
  background-color: var(--theme-color);
}

.occasion_subtitle {
  font-size: clamp(14px, 1vw, 20px);
  color: var(--theme-color);
  margin: 10px 0 0;
  font-weight: 500;
}

/* ===================================================
   OCCASION SECTION
=================================================== */

/* --- 6 occasion image cards --- */
.occasion_cards_row {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
  margin-bottom: clamp(32px, 4vw, 56px);
}

.occasion_card {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  display: block;
  text-decoration: none;
  aspect-ratio: 3 / 4;
}

.occasion_card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
  transition: transform 0.5s ease-in-out;
}

.occasion_card:hover img {
  transform: scale(1.04);
}

/* Dark gradient overlay */
.occasion_card__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.72) 0%, rgba(0, 0, 0, 0.18) 55%, transparent 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding: clamp(10px, 1.6vw, 25px);
}

.occasion_card__title {
  font-family: var(--bebas-neue);
  font-size: clamp(16px, 1.6vw, 30px);
  color: var(--theme-white);
  margin: 0 0 4px;
  line-height: 1.1;
  letter-spacing: 0.04em;
}

.occasion_card__desc {
  font-size: clamp(12px, 1vw, 18px);
  color: rgba(255, 255, 255, 0.82);
  margin: 0;
  font-weight: 500;
  line-height: 1.4;
  text-align: center;
}

/* --- 3 bottom cards --- */
.occasion_bottom_cards {
  display: flex;
  gap: 30px;
}

.occasion_bottom_cards>*:nth-child(1) {
  width: 40%;
}

.occasion_bottom_cards>*:nth-child(2) {
  width: 35%;
}

.occasion_bottom_cards>*:nth-child(3) {
  width: 25%;
}

.occ_bot_card {
  background: var(--theme-white);
    padding: clamp(22px, 1.8vw, 32px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  overflow: hidden;
  position: relative;
  min-height: 340px;
  box-shadow: 0px 3px 6px #00000029;
}

/* CARD 1 & 2: content left, image right */
.occ_bot_card__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  height: 100%;
  justify-content: center;
}

.occ_bot_card--faq .occ_bot_card__img {
  width: 190px;
}

.occ_bot_card--faq .occ_bot_card__img img {
  height: auto;
  aspect-ratio: 2 / 4.8;
  scale: 1.2;
}

.occ_bot_card__title {
  font-family: var(--bebas-neue);
  font-size: clamp(22px, 2.1vw, 40px);
  color: var(--theme-color);
  line-height: 1.1;
  margin: 0 0 clamp(12px, 1.2vw, 18px);
  letter-spacing: 0.02em;
}

.occ_bot_card__desc {
  font-size: clamp(13px, 0.9vw, 15px);
  color: #4b5563;
  line-height: 1.6;
  margin: 0 0 clamp(14px, 1.4vw, 20px);
  font-weight: 400;
}

.occ_bot_card__img--flatlay {
  width: 50%;
}

.occ_bot_card__img--flatlay img {
  height: auto;
  aspect-ratio: 3 / 4.2;
  scale: 1.2;
}

.full_rule {
  max-width: unset;
}

/* CARD 1: bullet list */
.occ_bot_card__list {
  list-style: none;
  padding: 0;
  margin: 0 0 clamp(16px, 1.8vw, 24px);
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.occ_bot_card__list li {
  font-size: clamp(13px, 1vw, 20px);
  font-weight: 700;
  color: var(--theme-color);
  line-height: 1.2;
}

/* CARD 1: button */
.occ_bot_card__btn {
  min-width: unset;
  font-size: clamp(12px, 0.9vw, 14px);
  min-height: 44px;
  padding: 10px 20px;
}

/* CARD 1 & 2: right-side image */
.occ_bot_card__img {
  flex: 0 0 auto;
  width: 50%;
}

.occ_bot_card__img img {
  width: 100%;
  object-fit: contain;
  object-position: bottom center;
  display: block;
}

/* CARD 2: mannequin image — slightly taller */
.occ_bot_card__img--mannequin img {
  height: clamp(180px, 20vw, 260px);
}

/* CARD 2: FAQ links */
.occ_faq_list {
  list-style: none;
  padding: 0;
  margin: 0 0 16px;
  width: 100%;
}

.occ_faq_list li {
  border-bottom: 1px solid #e8eaed;
  padding: 16px 0;
}

.occ_faq_list li:first-child {
  border-top: 1px solid #e8eaed;
}

.occ_faq_list li a {
  font-size: clamp(14px, 1vw, 20px);
  color: var(--theme-color);
  font-weight: 600;
  transition: color 0.3s;
  display: block;
}

.occ_faq_list li a:hover {
  color: var(--theme-secondary-color);
}

.occ_view_all_link {
  font-size: clamp(11px, 0.85vw, 18px);
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--theme-secondary-color);
  text-transform: uppercase;
  text-decoration: none;
  transition: opacity 0.3s;
  margin-top: auto;
}

.occ_view_all_link:hover {
  opacity: 0.75;
  color: var(--theme-secondary-color);
}

/* CARD 3: full-width content, no side image */
.occ_bot_card--essentials {
  display: block;
  width: 300px;
}

.occ_bot_card__content--full {
  height: auto;
}

/* CARD 3: essentials category list */
.occ_essentials_list {
  list-style: none;
  padding: 0;
  margin: 0;
  width: 100%;
}

.occ_essentials_list li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid #e8eaed;
}

.occ_essentials_list li:first-child {
  border-top: 1px solid #e8eaed;
}

.occ_essentials_list li img {
  width: 50px;
  height: 50px;
  object-fit: scale-down;
  border-radius: 6px;
  flex-shrink: 0;
  background: #ece8e5;
}

.occ_essentials_list li a {
  font-size: clamp(14px, 1vw, 20px);
  color: var(--theme-color);
  font-weight: 600;
  transition: color 0.3s;
}

.occ_essentials_list li a:hover {
  color: var(--theme-secondary-color);
}



/* ===================================================
   POPULAR GUIDES SECTION
=================================================== */

.popular_guides_section .spectrum_heading_wrap {
  margin-bottom: clamp(32px, 3.5vw, 50px);
}

/* --- Guide card --- */
.guide_card {
  display: flex;
  flex-direction: column;
  background: var(--theme-white);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 4px 16px rgba(0, 0, 0, 0.05);
  text-decoration: none;
  height: 100%;
  transition: box-shadow 0.35s ease, transform 0.35s ease;
}

.guide_card:hover {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
  transform: translateY(-3px);
}

/* Image area */
.guide_card__img {
  width: 100%;
  flex-shrink: 0;
}

.guide_card__img img {
  width: 100%;
  height: clamp(160px, 16vw, 220px);
  object-fit: cover;
  object-position: top center;
  display: block;
}

/* Text body */
.guide_card__body {
  padding: clamp(14px, 1.2vw, 18px) clamp(12px, 1vw, 16px);
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
  justify-content: space-between;
}

/* Title */
.guide_card__title {
  font-family: var(--bebas-neue);
  font-size: clamp(18px, 1.3vw, 24px);
  font-weight: 400;
  color: var(--theme-color);
  line-height: 1.45;
  margin: 0;
}

/* Read more link */
.guide_card__link {
  font-size: clamp(14px, 1vw, 16px);
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--theme-secondary-color);
  text-transform: uppercase;
  transition: opacity 0.3s;
  /* display: block; */
  justify-content: start;
}

.guide_card:hover .guide_card__link {
  opacity: 0.75;
}

/* --- Swiper overrides --- */
.guidesSwiper {
  /* padding-bottom: 32px; */
  padding-top: 10px;
  padding-inline: 10px;
  /* room for pagination dots on mobile */
}

.guidesSwiper .swiper-slide {
  height: auto;
}

/* Pagination dots */
.guides-pagination {
  display: flex;
  justify-content: center;
  /* margin-top: 8px; */
}

.guides-pagination.swiper-pagination-bullets {
  bottom: 0;
}

.guidesSwiper .swiper-pagination-bullet {
  background: var(--theme-secondary-color);
  opacity: 0.3;
  width: 7px;
  height: 7px;
}

.guidesSwiper .swiper-pagination-bullet-active {
  opacity: 1;
}

/* Hide dots on desktop where all 6 show */
@media (min-width: 1200px) {


  .guides-pagination {
    display: none;
  }
}

/* ===================================================
   CTA GUIDE SECTION
=================================================== */

.cta_guide_section {
  background-color: #0f1b2d;
  overflow: visible;
  position: relative;
}

.cta_guide_inner {
  display: flex;
  align-items: center;
  gap: clamp(24px, 2.6vw, 48px);
  padding: clamp(32px, 4vw, 52px) 0;
}

/* --- LEFT: Book image --- */
.cta_guide_book {
  flex: 0 0 auto;
  width: clamp(140px, 28vw, 450px);
  /* lifts image above section top edge */
  margin-top: clamp(-40px, -4vw, -60px);
  margin-bottom: clamp(-40px, -4vw, -60px);
  align-self: stretch;
  display: flex;
  align-items: flex-end;
}

.cta_guide_book img {
  width: 100%;
  height: auto;
  object-fit: contain;
  object-position: bottom center;
  display: block;
  filter: drop-shadow(0 16px 32px rgba(0, 0, 0, 0.45));
}

/* --- MIDDLE: Content --- */
.cta_guide_content {
  flex: 1;
}

.cta_guide_title {
  font-family: var(--bebas-neue);
  font-size: clamp(34px, 3.8vw, 70px);
  color: var(--theme-white);
  line-height: 1.05;
  margin: 0 0 clamp(10px, 1vw, 14px);
  letter-spacing: 0.02em;
}

.cta_guide_sub {
  font-size: clamp(14px, 1.2vw, 22px);
  color: #FCFAF4;
  font-weight: 400;
  margin: 0 0 clamp(16px, 1.6vw, 22px);
  line-height: 1.5;
}

/* Inline checklist with green ticks */
.cta_guide_checklist {
  display: flex;
  flex-wrap: wrap;
  gap: 6px clamp(16px, 2vw, 28px);
  list-style: none;
  padding: 0;
  margin: 0;
}

.cta_guide_checklist li {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: clamp(13px, 1vw, 20px);
  color: var(--theme-white);
  font-weight: 500;
  padding-left: 26px;
  position: relative;
}

.cta_guide_checklist li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  background-image: url("data:image/svg+xml,%3Csvg id='Group_44' data-name='Group 44' xmlns='http://www.w3.org/2000/svg' width='19.093' height='22.333' viewBox='0 0 19.093 22.333'%3E%3Cpath id='Path_15' data-name='Path 15' d='M16.363,18.046c-.128-.257-2.1-4.192-4.109-4.687a2.926,2.926 0 0 0-1.222-.018 2.423,2.423 0 0 0-1.5 1.43c-.426 1.259.229 2.219.868 3.118 1.278 1.8 2.519 3.575 3.8 5.373a3.609 3.609 0 0 0 1.581 1.467 2.462 2.462 0 0 0 2.575-.862 7.513 7.513 0 0 0 1.281-2.593l.57-1.583c.653-1.764 1.374-3.513 2.132-5.239s1.555-3.429 2.419-5.117 1.736-3.346 2.705-5c.25-.414.47-.821.72-1.236.046-.075.356-.5.3-.588s-.468.18-.559.2a11.557 11.557 0 0 0-2.176 1.436A22.827 22.827 0 0 0 22.226 8.07a67.706 67.706 0 0 0-5.863 9.976' transform='translate(-9.392 -2.5)' fill='%23c35d01'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
}

/* --- VERTICAL DIVIDER --- */
.cta_guide_divider {
  /* flex: 0 0 1px; */
  width: 1px;
  height: 300px;
  /* align-self: stretch; */
  background-color: var(--theme-secondary-color);
  margin: 0;
}

/* --- RIGHT: Form column --- */
.cta_guide_form_col {
  flex: 0 0 auto;
  width: clamp(260px, 25vw, 470px);
}

.cta_guide_form_eyebrow {
  font-size: clamp(14px, 1.3vw, 22px);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--theme-white);
  margin: 0 0 clamp(12px, 1.2vw, 16px);
  font-family: var(--theme-font);
}

.cta_guide_form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 12px;
}

.cta_guide_input {
  width: 100%;
  padding: clamp(13px, 1.1vw, 16px) clamp(14px, 1.2vw, 18px);
  border-radius: 8px;
  border: none;
  background-color: #f5f2eb;
  font-size: clamp(13px, 0.95vw, 15px);
  color: #4b5563;
  font-family: var(--theme-font);
  font-weight: 400;
  outline: none;
  transition: box-shadow 0.3s;
}

.cta_guide_input::placeholder {
  color: #9ca3af;
}

.cta_guide_input:focus {
  box-shadow: 0 0 0 3px rgba(195, 93, 1, 0.35);
}

.cta_guide_btn {
  width: 100%;
  padding: clamp(13px, 1.1vw, 16px) 20px;
  border-radius: 8px;
  border: none;
  background-color: var(--theme-secondary-color);
  color: var(--theme-white);
  font-family: var(--theme-font);
  font-size: clamp(14px, 1vw, 20px);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 0.3s, transform 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.cta_guide_btn svg {
  width: 22px;
  height: 22px;
}

.cta_guide_btn:hover {
  background-color: #a34e00;
  transform: translateY(-1px);
}

/* No spam notice */
.cta_guide_nospam {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: clamp(11px, 0.8vw, 18px);
  color: #FCFAF4;
  margin: 0;
  font-weight: 400;
  line-height: 1.4;
}

.cta_nospam_icon {
  flex-shrink: 0;
  display: inline-block;
  width: 22px;
  height: 22px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44.155' height='54' viewBox='0 0 44.155 54'%3E%3Cg transform='translate(-2.917)'%3E%3Cpath d='M24.995 4.546c6.335 4.961 14.209 5.77 18.657 5.77H43.7v20.059c0 8.881-12.445 16.826-18.706 19.9-6.264-3.065-18.7-10.991-18.7-19.9V10.316h.047c4.447 0 12.32-.808 18.655-5.77m0-4.546C19.279 6.006 10.961 6.941 6.338 6.941a26.694 26.694 0 0 1-3.421-.191v23.625C2.917 44.3 24.995 54 24.995 54s22.078-9.7 22.078-23.625V6.75a26.741 26.741 0 0 1-3.422.191c-4.622 0-12.94-.935-18.655-6.941' fill='%23c35d01'/%3E%3Cpath d='m18.782 29.486-8.77-6.851 2.076-2.66 5.93 4.629L27.8 10.2l2.791 1.9Z' transform='translate(4.878 7.013)' fill='%23c35d01'/%3E%3C/g%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}



/* ===================================================
   FOOTER
=================================================== */

.site_footer_main {
  background-color: #1a1a1a;
  padding: clamp(32px, 3.5vw, 52px) 0 clamp(20px, 2.5vw, 32px);
}

/* --- Top row --- */
.site_footer_top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: clamp(24px, 3.2vw, 60px);
}

/* Logo */
.site_footer_logo {
  flex-shrink: 0;
  display: inline-block;
}

.site_footer_logo img {
  height: clamp(44px, 4.5vw, 60px);
  width: auto;
  object-fit: contain;
  object-position: left center;
  display: block;
}

/* Nav links */
.site_footer_nav ul {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px clamp(24px, 3vw, 48px);
  list-style: none;
  padding: 0;
  margin: 0;
}

.site_footer_nav ul li a {
  font-family: var(--theme-font);
  font-size: clamp(14px, 1vw, 18px);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--theme-white);
  text-decoration: none;
  transition: color 0.3s;
  white-space: nowrap;
}

.site_footer_nav ul li a:hover {
  color: var(--theme-secondary-color);
}

/* --- Horizontal rule --- */
.site_footer_rule {
  width: 100%;
  height: 1px;
  background-color: #fcfaf47e;
  margin-bottom: clamp(16px, 2vw, 28px);
}

/* --- Bottom row --- */
.site_footer_bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

/* Legal links */
.site_footer_legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px clamp(16px, 2vw, 28px);
  list-style: none;
  padding: 0;
  margin: 0;
}

.site_footer_legal li a {
  font-family: var(--theme-font);
  font-size: clamp(14px, 1vw, 16px);
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #FCFAF4;
  text-decoration: none;
  transition: color 0.3s;
  white-space: nowrap;
}

.site_footer_legal li a:hover {
  color: var(--theme-white);
}

/* Copyright */
.site_footer_copy {
  font-family: var(--theme-font);
  font-size: clamp(14px, 1vw, 16px);
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #FCFAF4;
  margin: 0;
  white-space: nowrap;
}



/* ===================================================
   3 Level System Page
   3 Level System Page
   3 Level System Page
=================================================== */

.image_content_box {
  max-width: 366px;
  background-color: #F5F2EB;
  border-radius: 10px;
  padding: 40px;
}

.banner_image_container {
  background-image: url("../img/level-banner.png");
  background-size: cover;
  background-position: center right 80px;
  height: calc(100% - 30px);
  width: 53%;
  position: absolute;
  bottom: 0px;
  right: 0px;
  border-radius: 10px 0px 0px 10px;
  padding-right: clamp(20px, 9.5vw, 173px);
  padding-bottom: clamp(50px, 7vw, 100px);
  display: flex;
  justify-content: end;
  align-items: end;
}

.image_content_box p {
  font-size: var(--font18);
  font-weight: 500;
}

.custom_breadcrumb {

  background-color: #f5f2eb;
  color: #101a2c;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
}

.custom_breadcrumb a {
  color: inherit;
  text-decoration: none;
}

.custom_breadcrumb .breadcrumb_separator {
  margin: 0 3px;
}

.custom_breadcrumb .current_page {
  font-weight: 600;
}

.checklist_inline_with_icon ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
      gap: clamp(20px, 2.1vw, 40px);
  font-size: var(--font18);
  font-weight: 500;
}

.checklist_inline_with_icon ul li {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  align-items: center;

}

.checklist_inline_with_icon ul li img {
  width: 44px;
  height: 44px;
  object-fit: scale-down;
  object-position: center;
}

/* ===================================================
   3-LEVEL SYSTEM — DRESS FOR SECTION
=================================================== */

.dress_for_section .spectrum_heading_wrap {
  margin-bottom: clamp(36px, 4vw, 56px);
}

/* Subtitle below the heading rule */
.dress_for_subtitle {
  text-align: center;
  font-size: clamp(14px, 1.05vw, 17px);
  color: #4b5563;
  font-weight: 400;
  margin: clamp(16px, 1.6vw, 24px) auto 0;
  max-width: 760px;
  line-height: 1.6;
}

/* --- Grid --- */
.dress_for_grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2vw, 28px);
}

/* --- Card --- */
.dress_for_card {
  background: #FCFBF6;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0px 3px 6px #00000033;
  display: flex;
  flex-direction: column;
}

/* Colored top strap */
.dress_for_card__strap {
  height: 5px;
  width: 100%;
  flex-shrink: 0;
}

/* Split inner: content left + photo right */
.dress_for_card__inner {
  display: flex;
  flex: 1;
}

/* Left: text content */
.dress_for_card__content {
  flex: 1;
  padding: clamp(18px, 1.8vw, 26px) clamp(16px, 1.5vw, 22px);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Right: photo */
.dress_for_card__img {
  flex: 0 0 auto;
  width: 49%;
}

.dress_for_card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
      aspect-ratio: 2 / 3.5;
}

/* --- Badge --- */
.dress_for_badge {
  align-self: flex-start;
}

/* --- Title --- */
.dress_for_title {
  margin: 0;
}

/* --- Description --- */
.dress_for_desc {
  font-size: clamp(13px, 0.95vw, 15px);
  color: #4b5563;
  line-height: 1.6;
  margin: 0;
  font-weight: 400;
}

/* --- Items list --- */
.dress_for_items {
  list-style: none;
  padding: 0;
  margin: 4px 0 0;
  display: flex;
  flex-direction: column;
  gap: 25px;
}

.dress_for_items li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: clamp(13px, 0.95vw, 15px);
  font-weight: 600;
  color: var(--theme-color);
  line-height: 1.3;
}

.dress_for_item_icon {
  font-size: clamp(20px, 1.8vw, 26px);
  flex-shrink: 0;
  line-height: 1;
}

.dress_for_item_icon svg path {
  fill: #5F6038;
}

.dress_for_item_icon :is(svg, img) {
  width: 20px;
  height: 20px;
  display: block;
}

/* ===================================================
   MULTICOLOR — nth-child applies to strap + badge
   (same pattern as men_style_card)
=================================================== */

.multicolor_badge_by_child>*:nth-child(3n+1) .dress_for_item_icon svg path {
  fill: #5F6038;
}

.multicolor_badge_by_child>*:nth-child(3n+2) .dress_for_item_icon svg path {
  fill: #365B7D;
}

.multicolor_badge_by_child>*:nth-child(3n+3) .dress_for_item_icon svg path {
  fill: #765573;
}



/* ===================================================
   RIGHT BALANCE SECTION
=================================================== */

.right_balance_heading {
  margin-bottom: clamp(36px, 4vw, 56px);
}

.right_balance_subtitle {
  font-size: clamp(13px, 1vw, 16px);
  color: #4b5563;
  font-weight: 400;
  line-height: 1.65;
  margin: clamp(14px, 1.4vw, 20px) 0 0;
  max-width: 560px;
}

/* --- 6-column grid --- */
.right_balance_grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: clamp(10px, 1.2vw, 16px);
}

/* --- Card --- */
.rb_card {
  background: linear-gradient(138deg, #244970 0%, #0D2032 100%) 0% 0% no-repeat padding-box;
  border-radius: 14px;
  padding: clamp(16px, 1.6vw, 22px) clamp(14px, 1.4vw, 20px);
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.rb_card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25);
}

/* Top row: number + icon */
.rb_card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 15px;
}

/* Number */
.rb_card__num {
  font-family: var(--theme-secondary-font);
  font-size: clamp(20px, 1.9vw, 30px);
  color: #F5F2EB;
  line-height: 1;
}

/* Icon */
.rb_card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--theme-secondary-color);
  flex-shrink: 0;
}

.rb_card__icon svg {
  width: clamp(28px, 3.2vw, 60px);
  height: clamp(28px, 3.2vw, 60px);
}

/* Title */
.rb_card__title {
  font-family: var(--bebas-neue);
  font-size: clamp(18px, 1.6vw, 30px);
  color: var(--theme-fade-white);
  margin: 0;
  line-height: 1.1;
  letter-spacing: 0.04em;
}

/* Description */
.rb_card__desc {
  color: var(--theme-fade-white);
  margin: 0;
      font-size: clamp(14px, 1vw, 18px);
}



/* ===================================================
   KNOW THE BOUNDARIES SECTION
=================================================== */

.know_boundaries_section .spectrum_heading_wrap_left {
  margin-bottom: clamp(32px, 3.5vw, 52px);
}

/* --- 5-col grid --- */
.know_boundaries_grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: clamp(12px, 1.4vw, 20px);
}

/* --- Card --- */
.kb_card {
  background: var(--theme-white);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0px 3px 10px #00000033;
  display: flex;
  flex-direction: column;
}

/* --- Image wrapper --- */
.kb_card__img {
  position: relative;
  flex-shrink: 0;
}

.kb_card__img img {
  width: 100%;
  height: clamp(220px, 19.1vw, 366px);
  object-fit: cover;
  object-position: center top;
  display: block;
}

/* Cross badge — bottom-right of image */
.kb_card__cross {
  position: absolute;
  bottom: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  background-color: var(--theme-fade-white);
}

.kb_card__cross svg {
  width: 34px;
  height: 34px;
}

/* --- Card body --- */
.kb_card__body {
  padding: clamp(14px, 1.4vw, 20px) clamp(14px, 1.2vw, 18px) clamp(18px, 1.8vw, 26px);
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}

/* Title — Bebas Neue, 30px as specified */
.kb_card__title {
  font-family: var(--bebas-neue);
  font-size: clamp(24px, 1.6vw, 30px);
  color: var(--theme-color);
  margin: 0;
  line-height: 1.1;
  letter-spacing: 0.02em;
}

/* p inherits existing global styles (18px, 500 weight) — no override needed */
.kb_card__body p {
  margin-bottom: 0;
}


/* ===================================================
   OUTFIT EXAMPLES SECTION
=================================================== */

.outfit_example_section .spectrum_heading_wrap {
  margin-bottom: clamp(36px, 4vw, 56px);
}

.outfit_example_subtitle {
  text-align: center;
  font-size: clamp(13px, 1vw, 16px);
  color: #4b5563;
  font-weight: 400;
  margin: clamp(14px, 1.4vw, 20px) auto 0;
  line-height: 1.6;
}

/* --- 3 groups side by side --- */
.outfit_example_groups {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2vw, 28px);
}

/* --- Each level group --- */
.oe_group {
  display: flex;
  flex-direction: column;
}

/* Level header: badge + title, centered */
.oe_group__header {
  text-align: center;
  margin-bottom: clamp(14px, 1.4vw, 20px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

/* Badge */
.oe_group__badge {
  display: inline-block;
  padding: 4px 14px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--theme-white);
  font-family: var(--theme-font);
}

/* Level title */
.oe_group__level {
  font-family: var(--bebas-neue);
  font-size: clamp(32px, 3vw, 50px);
  color: var(--theme-color);
  margin: 0;
  line-height: 1;
  letter-spacing: 0.02em;
}

/* The white card wrapping photos + labels */
.oe_group__card {
  background: var(--theme-white);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0px 3px 10px #00000020;
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* Colored top strap */
.oe_group__strap {
  height: 5px;
  width: 100%;
  flex-shrink: 0;
}

/* 3 photos side by side, no gap */
.oe_group__photos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  flex-shrink: 0;
}

/* Thin divider between photos via box-shadow on right edge */
.oe_photo {
  position: relative;
}

.oe_photo:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 1px;
  height: 100%;
  background: rgba(255, 255, 255, 0.4);
  z-index: 1;
}

.oe_photo img {
  width: 100%;
  height: clamp(180px, 18vw, 260px);
  object-fit: cover;
  object-position: top center;
  display: block;
}

/* Labels row: 3 columns matching photos */
.oe_group__labels {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  padding: clamp(12px, 1.2vw, 16px) clamp(10px, 1vw, 14px);
  gap: 0;
}

.oe_label {
  padding: 0 clamp(8px, 0.8vw, 12px);
  position: relative;
}

/* Thin vertical divider between label columns */
.oe_label:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 2px;
  right: 0;
  width: 1px;
  height: calc(100% - 4px);
  background: #e8eaed;
}

.oe_label:first-child {
  padding-left: 0;
}

.oe_label:last-child {
  padding-right: 0;
}

.oe_label strong {
  display: block;
  font-size: clamp(11px, 0.85vw, 13px);
  font-weight: 700;
  color: var(--theme-color);
  margin-bottom: 4px;
  line-height: 1.3;
}

.oe_label p {
  font-size: clamp(10px, 0.78vw, 12px);
  color: #6b7280;
  font-weight: 400;
  line-height: 1.5;
  margin: 0;
}

/* ===================================================
   MULTICOLOR — badge + strap via nth-child
=================================================== */

.multicolor_badge_by_child>*:nth-child(3n+1) :is(.oe_group__badge, .oe_group__strap) {
  background-color: #5F6038;
}

.multicolor_badge_by_child>*:nth-child(3n+2) :is(.oe_group__badge, .oe_group__strap) {
  background-color: #365B7D;
}

.multicolor_badge_by_child>*:nth-child(3n+3) :is(.oe_group__badge, .oe_group__strap) {
  background-color: #765573;
}

/* Wrapper: rounded corners + overflow clip so strap + cards stay inside */
.oe_group__cards {
  border-radius: 14px;
  overflow: hidden;
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* Single strap spanning full width at top of the wrapper */
.oe_group__cards_strap {
  height: 8px;
  width: 100%;
  flex-shrink: 0;
}

/* Inner row holding the 3 cards side by side */
.oe_group__cards_row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  flex: 1;
  padding: 0 0px 10px;
}

/* Individual card — no border-radius, no shadow, no strap */
.oe_card {
  background: var(--theme-white);
  display: flex;
  flex-direction: column;
  position: relative;
  box-shadow: 2px 5px 10px -4px #0000001c;
  background: var(--theme-white);
  border-radius: 0 0 10px 10px;
}

/* Thin vertical divider between cards */
.oe_card:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 1px;
  height: 100%;
  background: #e8eaed;
  z-index: 1;
}

/* Photo */
.oe_card__img img {
  width: 100%;
  height: clamp(160px, 16vw, 240px);
  object-fit: cover;
  object-position: top center;
  display: block;
}

/* Text body */
.oe_card__body {
  padding: clamp(10px, 1vw, 14px) 6px clamp(14px, 1.4vw, 18px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  flex: 1;
  text-align: center;
}

.oe_card__body strong {
  display: block;
  font-size: clamp(14px, 1vw, 16px);
  font-weight: 700;
  color: var(--theme-color);
  line-height: 1.3;
}

.oe_card__body p {
  font-size: clamp(14px, 1vw, 16px);
  line-height: 1.5;
  margin: 0;
}

/* ===================================================
   MULTICOLOR — nth-child targets strap + badge
=================================================== */

.multicolor_badge_by_child>*:nth-child(3n+1) .oe_group__badge,
.multicolor_badge_by_child>*:nth-child(3n+1) .oe_group__cards_strap {
  background-color: #5F6038;
}

.multicolor_badge_by_child>*:nth-child(3n+2) .oe_group__badge,
.multicolor_badge_by_child>*:nth-child(3n+2) .oe_group__cards_strap {
  background-color: #365B7D;
}

.multicolor_badge_by_child>*:nth-child(3n+3) .oe_group__badge,
.multicolor_badge_by_child>*:nth-child(3n+3) .oe_group__cards_strap {
  background-color: #765573;
}



/* ===================================================
   WARDROBE ESSENTIALS SECTION
=================================================== */

.wardrobe_essentials_section .spectrum_heading_wrap_left {
  margin-bottom: clamp(32px, 3.5vw, 52px);
}

.wardrobe_essentials_subtitle {
  font-size: clamp(13px, 1vw, 16px);
  color: #4b5563;
  font-weight: 400;
  margin: clamp(12px, 1.2vw, 18px) 0 0;
  line-height: 1.6;
}

/* --- Card --- */
.we_card {
  background: var(--theme-white);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0px 3px 10px #00000033;
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Image */
.we_card__img img {
  width: 100%;
  height: 206px;
  object-fit: cover;
  object-position: center -20px;
  display: block;
}

/* Body */
.we_card__body {
  padding: clamp(14px, 1.4vw, 20px) clamp(14px, 1.2vw, 18px) clamp(18px, 1.8vw, 24px);
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}

/* Title — Bebas Neue, 30px as specified */
.we_card__title {
  font-family: var(--bebas-neue);
  font-size: clamp(20px, 1.6vw, 30px);
  color: var(--theme-color);
  margin: 0;
  line-height: 1.1;
  letter-spacing: 0.02em;
}

/* ===================================================
   FAQ SECTION
=================================================== */

.faq_section .spectrum_heading_wrap {
  margin-bottom: clamp(36px, 4vw, 56px);
}

.faq_tab_content_wrapper .faqs-area {
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 1.4vw, 18px);
}

/* --- Each accordion item --- */
.faq_tab_content_wrapper .faqs-area .set {
  border: 1.5px solid var(--theme-color);
  border-radius: 12px;
  overflow: hidden;
  background: transparent;
  transition: border-color 0.3s;
}

/* --- Trigger link --- */
.faq_tab_content_wrapper .faqs-area .set>a {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: clamp(18px, 1.8vw, 24px) clamp(20px, 2.2vw, 40px);
  background: transparent;
  font-family: var(--bebas-neue);
  font-size: clamp(18px, 1.9vw, 32px);
  font-weight: 600;
  color: var(--theme-color);
  line-height: 1.4;
  transition: color 0.3s;
  text-decoration: none;
}

.faq_tab_content_wrapper .faqs-area .set>a:hover {
  color: var(--theme-secondary-color);
}

/* Arrow via ::after pseudo-element */
.faq_tab_content_wrapper .faqs-area .set>a::after {
  content: "";
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30.057' height='17.857' viewBox='0 0 30.057 17.857'%3E%3Cpath d='M5033,2150l12.2,12.2,12.2-12.2' transform='translate(-5030.172 -2147.171)' fill='none' stroke='%23c35d01' stroke-linecap='round' stroke-width='4'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  transition: transform 0.5s ease;
}

/* Rotate arrow when active */
.faq_tab_content_wrapper .faqs-area .set>a.active::after {
  transform: rotate(180deg);
}

/* Active border highlight */
.faq_tab_content_wrapper .faqs-area .set:has(> a.active) {
  border-color: var(--theme-secondary-color);
}

/* --- Answer body --- */
.faq_tab_content_wrapper .faqs-area .content {
  overflow: hidden;
  padding: 0 clamp(20px, 2.2vw, 40px);
}

.faq_tab_content_wrapper .faqs-area .content p {
  padding-bottom: clamp(18px, 1.8vw, 24px);
  margin: 0;
}

/* p uses global styles — no override needed */

/* @media (max-width: 767px) {
  .site_footer_area {
    flex-direction: column;
    text-align: center;
  }
} */



/* OLD CODE  */
/* OLD CODE  */
/* OLD CODE  */
/* OLD CODE  */
/* OLD CODE  */
/* COMMON HEADING AREA  */
.common_banner_area_main {
  padding-top: clamp(130px, 17vw, 300px);
  padding-bottom: clamp(130px, 20vw, 350px);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  border-image: fill 0 radial-gradient(circle, rgba(0, 0, 0, 0.31) 0%, rgba(13, 18, 17, 0.52) 79%);
  position: relative;
}

.common_banner_context>*:last-child {
  margin-bottom: 0;
}

.common_banner_area_main:not(:has(.trusted_text_area)) .mouse_icon_animation {
  bottom: clamp(20px, 2.6vw, 50px);
}

.common_banner_context h1 {
  margin: 0 0 15px;
  margin-bottom: 0.2em;
  font-weight: 900;
  font-family: var(--theme-font);
}

.common_banner_context :is(h3, h4) {
  font-family: var(--theme-font);
  line-height: 1.5;
}



.common_banner_context p {
  margin: 0 auto;
  margin-bottom: 1.5em;
  font-size: var(--font28);
}

.mobile_nav_btn_wrapper {
  display: none;
}



/* CONTACT US PAGE STYLES */
/* CONTACT US PAGE STYLES */
/* CONTACT US PAGE STYLES */

/* .contact_pg_wrapper {
  padding-top: clamp(140px, 17vw, 250px);
} */

.form_and_content_wrapper {
  padding-top: 130px;
}

.contact_form_area_main {
  padding: 26px 26px 50px;
  box-shadow: 0px 12px 21.5px rgba(0, 0, 0, 0.22);
  background-color: #ffffff;
  border-radius: 15px;
  position: relative;
}

.contact_form_area_main::before {
  content: "";
  position: absolute;
  bottom: -6%;
  left: -6%;
  width: 72px;
  height: 234px;
  background: url('../img/about/dot_line.svg') 0 0 no-repeat;
  background-size: contain;
  z-index: -1;
}

.contact_form_area_main::after {
  content: "";
  position: absolute;
  top: -6%;
  right: -6%;
  width: 72px;
  height: 234px;
  background: url('../img/about/dot_line.svg') 0 0 no-repeat;
  background-size: contain;
  z-index: -1;
}

.contact_form_area_main :is(input:-webkit-autofill,
  input:-webkit-autofill:hover,
  input:-webkit-autofill:active,
  input:-webkit-autofill:focus) {
  background-color: #49737e !important;
  color: #555 !important;
  -webkit-box-shadow: 0 0 0 1000px #ffffff inset !important;
}

.custom_left_padding {
  padding-left: 80px;
}

.contact_form_area_main :is(.input_area, .select_area) {
  margin-bottom: 24px;
  position: relative;
}

.contact_form_area_main :is(input, textarea)::placeholder {
  color: #000000;
  font-weight: 600;
}

.input_area textarea {
  width: 100%;
  height: 130px;
  resize: none;
  outline: 0;
  padding: 10px 20px;
  font-size: var(--font18);
  font-family: var(--theme-font);
  border-radius: 6px;
  border: 1px solid #cbcbcb;
  color: var(--theme-black);
  background-color: var(--theme-fade-white);
  font-weight: 600;
}

.input_area input {
  width: 100%;
  padding: 5px 20px;
  height: 62px;
  border: none;
  outline: 0;
  font-size: var(--font18);
  font-family: var(--theme-font);
  border-radius: 6px;
  border: 1px solid #cbcbcb;
  color: var(--theme-black);
  background-color: var(--theme-fade-white);
  font-weight: 600;
}

.select_area select {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  padding: 15px 50px 15px 23px;
  background-color: #fff;
  color: var(--theme-black);
  cursor: pointer;
  outline: 0;
  height: 62px;
  font-size: var(--font18);
  font-family: var(--theme-font);
  border-radius: 6px;
  border: 1px solid #cbcbcb;
  background-color: var(--theme-fade-white);
  font-weight: 600;

  background-image: url(../img/chevron-down.svg);
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 20px;
}

.select_area {
  position: relative;
}




.submit_button_area {
  display: flex;
  align-items: center;
}

.wpcf7 form.sent .wpcf7-response-output {
  color: #fff;
}

.wpcf7-not-valid-tip {
  color: #fff !important;
  font-size: 12px !important;
  background-color: #dc3232;
  padding: 2px 5px;
}

.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.payment-required .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output {
  border-color: red !important;
  color: #fff;
  background-color: red;
  margin-left: 0;
  margin-right: 0;
}

.wpcf7 form.sent .wpcf7-response-output {
  margin-right: 0;
  margin-left: 0;
  color: #fff;
  background-color: #46b450;
}

.contact_form_heading_area {
  padding: 25px 30px;
  background-color: var(--theme-green-color);
  position: relative;
  margin-bottom: clamp(40px, 3.5vw, 60px);
  border-radius: 6px;

}

.contact_form_heading_area:after {
  content: " ";
  position: absolute;
  left: 50%;
  bottom: -24px;
  border-top: none;
  border-right: 40px solid transparent;
  border-left: 40px solid transparent;
  border-top: 25px solid var(--theme-green-color);
  /* filter: drop-shadow(0px 10px 8px rgba(0, 0, 0, 0.15)); */
  transform: translateX(-50%);
}

.contact_form_heading_area :is(h2, h3) {
  color: var(--bs-white);
  font-size: var(--font25);
  font-weight: 500;
  text-align: center;
  margin-bottom: 0;
}

input[type="submit"].common_btn {
  border-radius: 12px;
  filter: drop-shadow(0px 41px 16px rgba(0, 0, 0, 0.05));
  position: relative;
  font-size: var(--font18);
  line-height: 50px;
  color: #ffffff;
  padding: 0 25px;
  text-transform: capitalize;
  transition: all 0.5s ease-in-out;
  overflow: hidden;
  background-color: var(--theme-red);
  z-index: 1;
  font-weight: 500;
  border: none;
}

input[type="submit"].common_btn:hover {
  background-color: #e74749;
  color: #fff;
}

.secondary_header_logo {
  display: none;
}

/* body:not(:has(.common_banner_area_main)) .nav-header {
  background: var(--bs-white);
}

body:not(:has(.common_banner_area_main)) .nav-header .main_header_logo {
  display: none;
}

body:not(:has(.common_banner_area_main)) .nav-header .secondary_header_logo {
  display: block;
}

body:not(:has(.common_banner_area_main)) .nav-header .nav-ul li>a {
  color: var(--theme-black);
}

body:not(:has(.common_banner_area_main)) .nav-header .nav-ul li a:hover {
  color: var(--theme-red);
}

body:not(:has(.common_banner_area_main)) .nav-header .nav-ul li .dropdown-arrow i {
  color: var(--theme-black);
}

body:not(:has(.common_banner_area_main)) .nav-header .menu-bar i {
  color: var(--theme-black);
} */



.nav-header .main_header_logo {
  display: none;
}

.nav-header .secondary_header_logo {
  display: block;
}

.nav-header .nav-ul li>a {
  color: var(--theme-black);
}

.nav-header .nav-ul li a:hover {
  color: var(--theme-secondary-color);
}

.nav-header .nav-ul li .dropdown-arrow i {
  color: var(--theme-black);
}

.nav-header .menu-bar i {
  color: var(--theme-black);
}





/* Pagination  */
.woocommerce .product_list_wrapper .woocommerce-pagination {
  display: flex;
  justify-content: end;
}

.woocommerce .product_list_wrapper .woocommerce-pagination ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.woocommerce .product_list_wrapper .woocommerce-pagination ul.page-numbers li,
.woocommerce-page .product_list_wrapper .woocommerce-pagination ul.page-numbers li {
  margin: 0;
  border: none;
}

.woocommerce .product_list_wrapper .woocommerce-pagination ul.page-numbers:after,
.woocommerce .product_list_wrapper .woocommerce-pagination ul.page-numbers:before {
  display: none;
}

.woocommerce-js .product_list_wrapper nav.woocommerce-pagination ul li :is(a, span) {
  font-size: 1em;
  padding: 0;
  width: 2.5em;
  height: 2.5em;
  font-weight: 600;
  color: var(--bs-black);
  background: var(--bs-white);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--siteTransition);
  border: 1px solid var(--bs-black);
}

.woocommerce-js .product_list_wrapper nav.woocommerce-pagination ul li .current,
.woocommerce-js .product_list_wrapper nav.woocommerce-pagination ul li :is(a):hover {
  background: var(--sitePrimaryColor);
  color: var(--bs-black);
  border-color: var(--sitePrimaryColor);
}

/* HTML PAGINATION  */
.pagination {
  display: flex;
  justify-content: end;
}

.pagination {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.pagination .page-numbers li,
.pagination .page-numbers li {
  margin: 0;
  border: none;
}

.pagination .page-numbers:after,
.pagination .page-numbers:before {
  display: none;
}

.pagination li :is(a, span) {
  font-size: 1em;
  padding: 0;
  width: 2.5em;
  height: 2.5em;
  font-weight: 600;
  color: var(--bs-black);
  background: var(--bs-white);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--siteTransition);
  border: 1px solid var(--bs-black);
}

.pagination li .current,
.pagination li :is(a):hover {
  background: var(--sitePrimaryColor);
  color: var(--bs-black);
  border-color: var(--sitePrimaryColor);
}








/* SECONDARY COMMON CONTENT AREA  */


.common_content_area :is(h2, h3) {
  font-size: var(--font33);
  margin-bottom: 0.8em;
  font-family: var(--theme-font);
}


.common_content_area p {
  font-size: var(--font22);
}

.common_content_area ul {
  list-style: disc;
  padding-left: 24px;
}

.common_content_area ul li {
  font-size: var(--font22);
  font-weight: 600;
  margin-bottom: 1.5em;
}

.common_content_area ul li::marker {
  color: var(--theme-secondary-color);
}

.common_content_area :is(h1, h2, h3, h4, h5, h6) {
  margin: clamp(25px, 3.2vw, 60px) 0;
}

.common_content_area>*:first-child {
  margin-top: 0;
}

.common_content_area>*:last-child {
  margin-bottom: 0;
}

/* SECONDARY COMMON CONTENT AREA END  */