@charset "UTF-8";
.header {
  padding-block: var(--space-m);
  padding-inline: var(--gutter);
}
.header .header__container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
.header .header__logo {
  width: 18rem;
}
.header__container {
  background: red;
}
/* -----------------------NAV ITEMS-------------------- */
/* --------------------MEGA MENU CONTENT DESKTOP & MOBILE----------------- */
/* -----------------------MOBILE SETTINGS-------------------- */
:root {
  --mm-pad-v: var(--space-m);
  --mm-pad-h: var(--gutter);
}
.mm-close-dropdown-btn {
  background-color: unset;
  gap: 0.5em;
  padding-inline-start: unset;
}
/* ----------------------YOUR CUSTOM CSS--------------------- */
.mm {
  border: 5px solid red;
}
.mm:not(.brx-open) {
  border: 5px solid red;
}
@media (max-width: 1100px) {
  .mm {
    border: 5px solid red;
    background: blue;
  }
}
.mm.brx-open {
  border: 5px solid red;
  border: 5px solid pink;
}
/* -----------------------END OF YOUR CUSTOM CSS-------------------- */
/* -----------------------LOGIC *IGNORE*-------------------- */
.mm__nav-items-wrapper, .brx-dropdown-content {
  gap: unset;
}
/* -----------------------END OF LOGIC-------------------- */
/* -----------------------REST OF CSS BELOW--------------------*/
.mm .brxe-dropdown.brx-has-megamenu .brx-dropdown-content {
  padding-block: var(--space-m);
  padding-inline: var(--space-m);
  gap: var(--space-m);
  box-shadow: 119px 360px 152px rgba(0, 0, 0, 0.01), 67px 203px 128px rgba(0, 0, 0, 0.05), 30px 90px 95px rgba(0, 0, 0, 0.09), 7px 23px 52px rgba(0, 0, 0, 0.1), 0px 0px 0px rgba(0, 0, 0, 0.1);
  flex-direction: row;
}
.mm .brxe-dropdown:not(.brx-has-megamenu) .brx-dropdown-content {
  min-width: fit-content;
  box-shadow: 119px 360px 152px rgba(0, 0, 0, 0.01), 67px 203px 128px rgba(0, 0, 0, 0.05), 30px 90px 95px rgba(0, 0, 0, 0.09), 7px 23px 52px rgba(0, 0, 0, 0.1), 0px 0px 0px rgba(0, 0, 0, 0.1);
}
.mm .brxe-dropdown:not(.brx-has-megamenu) .brx-dropdown-content > li a, .mm .brxe-dropdown:not(.brx-has-megamenu) .brx-dropdown-content > li .brx-submenu-toggle {
  white-space: nowrap;
}
.mm .mm__mobile-nav {
  display: none;
}
.mm .mm-close-dropdown-btn {
  position: absolute;
  inset-inline-start: var(--mm-pad-h);
}
@media (min-width: 1100px) {
  .mm .brxe-dropdown:not(.brx-has-megamenu) .brx-dropdown-content .menu-item a, .mm .brxe-dropdown:not(.brx-has-megamenu) .brx-dropdown-content .brxe-dropdown:not(.brx-has-megamenu) .brx-submenu-toggle {
    color: var(--neutral);
    padding-block: var(--space-s);
    padding-inline: var(--space-s);
  }
  .mm .brxe-dropdown:not(.brx-has-megamenu) .brx-dropdown-content .menu-item a:hover, .mm .brxe-dropdown:not(.brx-has-megamenu) .brx-dropdown-content .brxe-dropdown:not(.brx-has-megamenu) .brx-submenu-toggle:hover {
    color: var(--white);
    background-color: var(--neutral);
  }
  .mm .brxe-dropdown:not(.brx-has-megamenu) .brx-dropdown-content .menu-item a {
    width: 100%;
  }
  .mm .brxe-dropdown:not(.brx-has-megamenu) .brx-dropdown-content .brx-submenu-toggle > a {
    color: inherit;
    font-weight: inherit;
    text-transform: inherit;
  }
  .mm .brxe-dropdown:not(.brx-has-megamenu) .brxe-dropdown:not(.brx-has-megamenu) .brx-submenu-toggle {
    justify-content: space-between;
  }
  .mm .brxe-dropdown:not(.brx-has-megamenu) .brxe-dropdown:not(.brx-has-megamenu) .brx-submenu-toggle svg {
    transform: rotate(-90deg);
  }
  .mm .brxe-dropdown .brx-dropdown-content {
    background-color: var(--white);
  }
  .mm .mm__nav-items-wrapper {
    transition-duration: 0s;
  }
  .mm .mm__nav-items > li {
    max-inline-size: max-content;
  }
  .mm .mm__nav-items > .brxe-dropdown > .brx-submenu-toggle button svg {
    transform: rotate(0);
    transition: transform 0.2s ease-in-out;
  }
  .mm .mm__nav-items > .brxe-dropdown > .brx-dropdown-content {
    transform: translateY(40px);
  }
  .mm .mm__nav-items > .brxe-dropdown.open > .brx-dropdown-content {
    transform: translateY(20px);
  }
  .mm .mm__nav-items > .brxe-dropdown.open > .brx-submenu-toggle button svg {
    transform: rotatex(180deg);
  }
  .mm .mm__nav-items > li:last-of-type a.mm__nav-link, .mm .mm__nav-items > li:last-of-type > .brx-submenu-toggle {
    --btn-background: var(--primary);
    --btn-background-hover: var(--primary-hover);
    --btn-text-color: var(--primary-ultra-light);
    --btn-text-color-hover: var(--primary-ultra-light);
    --btn-border-color: var(--primary);
    --btn-border-color-hover: var(--primary-hover);
    --btn-outline-background-hover: var(--primary-hover);
    --btn-outline-border-hover: var(--primary-hover);
    --btn-outline-text-color: var(--primary);
    --btn-outline-text-color-hover: var(--primary-ultra-light);
    --focus-color: var(--primary-dark);
    padding-block: var(--btn-padding-block);
    padding-inline: var(--btn-padding-inline);
    min-inline-size: var(--btn-min-width);
    line-height: var(--btn-line-height);
    font-size: var(--btn-font-size, var(--text-m));
    font-weight: var(--btn-font-weight);
    font-style: var(--btn-font-style);
    text-decoration: var(--btn-text-decoration);
    text-transform: var(--btn-text-transform);
    letter-spacing: var(--btn-letter-spacing);
    border-width: var(--btn-border-width);
    border-style: var(--btn-border-style);
    border-radius: var(--btn-border-radius);
    display: var(--btn-display, inline-flex);
    text-align: center;
    justify-content: center;
    align-items: center;
    background: var(--btn-background);
    color: var(--btn-text-color);
    border-color: var(--btn-border-color);
    transition: all var(--btn-transition-duration) ease;
    width: 100%;
  }
  .mm .mm__nav-items > li:last-of-type a.mm__nav-link:hover, .mm .mm__nav-items > li:last-of-type > .brx-submenu-toggle:hover {
    background: var(--btn-background-hover);
    border-color: var(--btn-border-color-hover);
    color: var(--btn-text-color-hover);
    text-decoration: var(--btn-text-decoration-hover);
  }
  .mm .mm__nav-items > li:last-of-type .brx-submenu-toggle a {
    color: inherit;
  }
  .mm .mm__nav-items > li:not(:last-of-type) > a {
    color: var(--neutral);
  }
  .mm .mm__nav-items > li:not(:last-of-type) > a:hover {
    color: var(--neutral-light);
  }
  .mm .mm__nav-items > li:not(:last-of-type) > .brx-submenu-toggle {
    color: var(--neutral);
  }
  .mm .mm__nav-items > li:not(:last-of-type) > .brx-submenu-toggle a, .mm .mm__nav-items > li:not(:last-of-type) > .brx-submenu-toggle span, .mm .mm__nav-items > li:not(:last-of-type) > .brx-submenu-toggle svg {
    color: inherit;
  }
  .mm .mm__nav-items > li:not(:last-of-type).open > .brx-submenu-toggle, .mm .mm__nav-items > li:not(:last-of-type):hover > .brx-submenu-toggle {
    color: var(--neutral-light);
  }
}
@media (max-width: 1100px) {
  .mm .mm__toggle-open {
    display: flex !important;
    --brxe-toggle-scale: 1;
    color: var(--neutral);
    font-size: 2.6rem;
  }
  .mm .mm__toggle-open svg {
    width: 2.6rem;
    height: auto;
    color: inherit;
  }
  .mm .mm__mobile-nav {
    padding-block: var(--mm-pad-v);
    padding-inline: var(--mm-pad-h);
    border-block-end: none;
    display: flex;
    align-items: center;
    flex-direction: row-reverse;
    justify-content: space-between;
  }
  .mm .mm__mobile-nav .mm-close-dropdown-btn {
    opacity: 0;
    visibility: hidden;
    transform: translatex(100%);
    transition: opacity 0.4s cubic-bezier(0.79, 0.14, 0.15, 0.86), visibility 0.4s cubic-bezier(0.79, 0.14, 0.15, 0.86), transform 0.4s cubic-bezier(0.79, 0.14, 0.15, 0.86);
  }
  .mm .mm__mobile-nav[data-submenu-open="True"] .mm-close-dropdown-btn {
    visibility: visible;
    opacity: 1;
    transform: translatex(0);
  }
  .mm .mm__nav-items .brxe-dropdown:not(.brx-has-megamenu) .brx-dropdown-content li > a {
    color: var(--neutral);
    padding-block: 1em;
    padding-inline: 1em;
    background-color: var(--neutral-ultra-light);
    border-radius: var(--radius-s);
    width: 100%;
  }
  .mm .mm__nav-items .brxe-dropdown:not(.brx-has-megamenu) .brx-dropdown-content .brxe-dropdown:not(.brx-has-megamenu) .brx-submenu-toggle {
    color: var(--neutral);
    padding-block: 1em;
    padding-inline: 1em;
    background-color: var(--neutral-ultra-light);
    border-radius: var(--radius-s);
  }
  .mm .mm__nav-items .brxe-dropdown:not(.brx-has-megamenu) .brx-dropdown-content .brxe-dropdown:not(.brx-has-megamenu) .brx-submenu-toggle svg {
    color: inherit;
    font-weight: inherit;
  }
  .mm .mm__nav-items .brxe-dropdown:not(.brx-has-megamenu) .brx-dropdown-content .brxe-dropdown:not(.brx-has-megamenu) .brx-submenu-toggle > a {
    color: inherit;
    font-weight: inherit;
    text-decoration: inherit;
  }
  .mm .mm__nav-items .brxe-dropdown {
    position: static;
  }
  .mm .mm__nav-items .brxe-dropdown > .brx-dropdown-content {
    display: flex;
    position: absolute !important;
    inset: 0;
    transition-property: transform, opacity, visibility;
    transition-duration: 0.4s;
    transition-timing-function: cubic-bezier(0.79, 0.14, 0.15, 0.86);
    display: flex;
    padding-block: var(--mm-pad-v);
    padding-inline: var(--mm-pad-h);
    left: 0 !important;
    min-width: 100% !important;
    overflow-x: hidden;
    flex-direction: column;
    background-color: var(--white);
    border-radius: 0;
    box-shadow: none;
    opacity: 1;
    transform: translateX(100%);
  }
  .mm .mm__nav-items .brxe-dropdown > .brx-dropdown-content > * {
    max-width: 100%;
  }
  .mm .mm__nav-items .brxe-dropdown > .brx-submenu-toggle {
    justify-content: space-between;
  }
  .mm .mm__nav-items .brxe-dropdown > .brx-submenu-toggle button svg {
    transition: none;
    transform: rotate(-90deg);
  }
  .mm .mm__nav-items .brxe-dropdown.open > .brx-dropdown-content {
    transform: translatex(0);
  }
  .mm .mm__nav-items .brxe-dropdown .brx-dropdown-content {
    -ms-overflow-style: none;
    /* IE and Edge scrollbar */
    scrollbar-width: none;
    /* Firefox scrollbar */
  }
  .mm .mm__nav-items .brxe-dropdown .brx-dropdown-content::-webkit-scrollbar {
    display: none;
  }
  .mm .mm__nav-items-wrapper {
    position: fixed;
    inset: 0;
    background-color: var(--white);
    z-index: 1001;
    transform: translateX(100%);
    display: flex;
    visibility: hidden;
    transition: transform 0.4s cubic-bezier(0.79, 0.14, 0.15, 0.86), visibility 0.4s cubic-bezier(0.79, 0.14, 0.15, 0.86);
  }
  .mm .mm__nav-items-wrapper .mm__toggle-close {
    display: flex;
    font-size: 2.6rem;
    color: var(--neutral);
  }
  .mm .mm__nav-items-wrapper .mm__toggle-close svg {
    width: 2.6rem;
    height: auto;
    color: inherit;
  }
  .mm .mm__nav-items-wrapper ul.mm__nav-items {
    position: relative;
    overflow-x: hidden;
    overflow-y: auto;
    display: flex;
    flex: 1;
    justify-content: flex-start;
    background-color: var(--white);
    -ms-overflow-style: none;
    /* IE and Edge scrollbar */
    scrollbar-width: none;
    /* Firefox scrollbar */
    align-items: stretch;
    bottom: 0;
    flex-direction: column;
    flex-wrap: nowrap;
    inset-inline: 0;
    padding-block: var(--mm-pad-v);
    padding-inline: var(--mm-pad-h);
    gap: var(--space-xs);
    transition: none;
    opacity: 1 !important;
    transition: visibility 0.4s cubic-bezier(0.79, 0.14, 0.15, 0.86);
  }
  .mm .mm__nav-items-wrapper ul.mm__nav-items::-webkit-scrollbar {
    display: none;
  }
  .mm .mm__nav-items-wrapper ul.mm__nav-items > li:last-of-type {
    padding-block: unset;
    padding-inline: unset;
  }
  .mm .mm__nav-items-wrapper ul.mm__nav-items > li:last-of-type .mm__nav-link, .mm .mm__nav-items-wrapper ul.mm__nav-items > li:last-of-type > .brx-submenu-toggle {
    --btn-background: var(--primary);
    --btn-background-hover: var(--primary-hover);
    --btn-text-color: var(--primary-ultra-light);
    --btn-text-color-hover: var(--primary-ultra-light);
    --btn-border-color: var(--primary);
    --btn-border-color-hover: var(--primary-hover);
    --btn-outline-background-hover: var(--primary-hover);
    --btn-outline-border-hover: var(--primary-hover);
    --btn-outline-text-color: var(--primary);
    --btn-outline-text-color-hover: var(--primary-ultra-light);
    --focus-color: var(--primary-dark);
    padding-block: var(--btn-padding-block);
    padding-inline: var(--btn-padding-inline);
    min-inline-size: var(--btn-min-width);
    line-height: var(--btn-line-height);
    font-size: var(--btn-font-size, var(--text-m));
    font-weight: var(--btn-font-weight);
    font-style: var(--btn-font-style);
    text-decoration: var(--btn-text-decoration);
    text-transform: var(--btn-text-transform);
    letter-spacing: var(--btn-letter-spacing);
    border-width: var(--btn-border-width);
    border-style: var(--btn-border-style);
    border-radius: var(--btn-border-radius);
    display: var(--btn-display, inline-flex);
    text-align: center;
    justify-content: center;
    align-items: center;
    background: var(--btn-background);
    color: var(--btn-text-color);
    border-color: var(--btn-border-color);
    transition: all var(--btn-transition-duration) ease;
    width: 100%;
  }
  .mm .mm__nav-items-wrapper ul.mm__nav-items > li:last-of-type .mm__nav-link:hover, .mm .mm__nav-items-wrapper ul.mm__nav-items > li:last-of-type > .brx-submenu-toggle:hover {
    background: var(--btn-background-hover);
    border-color: var(--btn-border-color-hover);
    color: var(--btn-text-color-hover);
    text-decoration: var(--btn-text-decoration-hover);
  }
  .mm .mm__nav-items-wrapper ul.mm__nav-items > li:last-of-type .mm__nav-link > a, .mm .mm__nav-items-wrapper ul.mm__nav-items > li:last-of-type > .brx-submenu-toggle > a {
    color: inherit;
    font-weight: inherit;
  }
  .mm .mm__nav-items-wrapper ul.mm__nav-items > li:not(:last-of-type) {
    border-block-end: none;
  }
  .mm .mm__nav-items-wrapper ul.mm__nav-items > li:not(:last-of-type) > .mm__nav-link {
    color: var(--neutral);
    padding-block: 1em;
    padding-inline: 1em;
    background-color: var(--neutral-ultra-light);
    border-radius: var(--radius-s);
    width: 100%;
  }
  .mm .mm__nav-items-wrapper ul.mm__nav-items > li:not(:last-of-type) > .brx-submenu-toggle {
    color: var(--neutral);
    padding-block: 1em;
    padding-inline: 1em;
    background-color: var(--neutral-ultra-light);
    border-radius: var(--radius-s);
  }
  .mm .mm__nav-items-wrapper ul.mm__nav-items > li:not(:last-of-type) > .brx-submenu-toggle svg {
    color: inherit;
    font-weight: inherit;
  }
  .mm .mm__nav-items-wrapper ul.mm__nav-items > li:not(:last-of-type) > .brx-submenu-toggle > a {
    color: inherit;
    font-weight: inherit;
    text-decoration: inherit;
  }
  .mm .mm__nav-items-wrapper ul.mm__nav-items > li:last-of-type {
    margin-block-start: auto;
  }
  .mm .mm__nav-items-wrapper ul.mm__nav-items > li:last-of-type a.mm__nav-link, .mm .mm__nav-items-wrapper ul.mm__nav-items > li:last-of-type .brxe-dropdown.brx-has-megamenu, .mm .mm__nav-items-wrapper ul.mm__nav-items > li:last-of-type .brxe-dropdown:not(.brx-has-megamenu) {
    text-align: center;
  }
  .mm .mm__nav-items li.brxe-dropdown:not(.brx-has-megamenu) .brx-dropdown-content {
    padding-block: var(--mm-pad-v);
    padding-inline: var(--mm-pad-h);
    gap: var(--space-xs);
  }
  .mm .mm__nav-items li.brxe-dropdown:not(.brx-has-megamenu) .brx-dropdown-content .menu-item, .mm .mm__nav-items li.brxe-dropdown:not(.brx-has-megamenu) .brx-dropdown-content .brxe-dropdown:not(.brx-has-megamenu) {
    border-block-end: none;
  }
  .mm .mm__mobile-logo {
    display: block;
    opacity: 1;
    transform: translatex(0);
    transition: opacity 0.4s cubic-bezier(0.79, 0.14, 0.15, 0.86), visibility 0.4s cubic-bezier(0.79, 0.14, 0.15, 0.86), transform 0.4s cubic-bezier(0.79, 0.14, 0.15, 0.86);
  }
  .mm .mm__mobile-logo img {
    height: 3rem;
    width: auto;
  }
  .mm .mm__mobile-nav[data-submenu-open="True"] .mm__mobile-logo {
    visibility: hidden;
    opacity: 0;
    transform: translatex(-100%);
    transition: opacity calc(0.4s / 1.5) cubic-bezier(0.79, 0.14, 0.15, 0.86), visibility 0.4s cubic-bezier(0.79, 0.14, 0.15, 0.86), transform 0.4s cubic-bezier(0.79, 0.14, 0.15, 0.86);
    transition: opacity 0.4s cubic-bezier(0.79, 0.14, 0.15, 0.86), visibility 0.4s cubic-bezier(0.79, 0.14, 0.15, 0.86), transform 0.4s cubic-bezier(0.79, 0.14, 0.15, 0.86);
  }
  :where(html[dir="RTL"]) .mm .mm__nav-items .brxe-dropdown > .brx-submenu-toggle button svg {
    transform: rotate(90deg);
  }
  :where(html[dir="RTL"]) .mm .mm__nav-items .brxe-dropdown > .brx-dropdown-content {
    transform: translatex(-100%);
  }
  :where(html[dir="RTL"]) .mm .mm__mobile-nav .mm-close-dropdown-btn {
    transform: translatex(-100%);
  }
  :where(html[dir="RTL"]) .mm .mm__mobile-nav[data-submenu-open="True"] .mm__mobile-logo {
    transform: translatex(100%);
  }
}
.mm.brx-open .mm__nav-items-wrapper {
  visibility: visible;
  transform: translateX(0);
}
.mm.brx-open .mm__nav-items {
  visibility: visible !important;
}
@media (max-width: 1100px) {
  body.bricks-is-frontend.admin-bar .mm__nav-items-wrapper {
    top: var(--wp-admin--admin-bar--height) !important;
  }
  body.bricks-is-frontend.admin-bar .mm__nav-items-wrapper .mm__nav-items {
    top: unset;
  }
}
/************************************************ 
  ✅ Static Breakpoints 
  - Defines common responsive breakpoints
  - Used for media queries throughout the project
*************************************************/
/************************************************ 
  ✅ Variables for Bricks Builder
  - Use these in the Bricks Builder CSS grid settings
*************************************************/
/*
.rs-grid--1      = One full-width column
.rs-grid--2      = Two equal columns
.rs-grid--3      = Three equal columns
.rs-grid--4      = Four equal columns
.rs-grid--2-3    = Two-thirds, one-third layout
.rs-grid--3-2    = One-third, two-thirds layout
.rs-grid--1-2    = Small first, large second
.rs-grid--2-1    = Large first, small second
.rs-grid--1-3    = Small first, large three columns
.rs-grid--3-1    = Large three columns, small second
.rs-grid--2-4    = Two small, four large
.rs-grid--4-2    = Four large, two small
*/
/************************************************ 
  ✅ Grid Defaults Mixin 
  - Sets basic grid layout properties
  - Ensures consistent spacing
*************************************************/
/************************************************ 
  ✅ Symmetrical Grid Layouts 
  - Supports: 4, 3, and 2 columns 
  - Ensures even rows at all breakpoints
*************************************************/
.rs-grid--4 {
  display: grid !important;
  grid-template-columns: var(--grid-4);
  /* Default column setup */
}
@media (max-width: 1200px) {
  .rs-grid--4 {
    grid-template-columns: var(--grid-2);
    /* 4 → 2 columns */
  }
}
@media (max-width: 768px) {
  .rs-grid--4 {
    grid-template-columns: var(--grid-1);
    /* 2 → 1 column */
  }
}
.rs-grid--3 {
  display: grid !important;
  grid-template-columns: var(--grid-3);
  /* Default column setup */
}
@media (max-width: 1200px) {
  .rs-grid--3 {
    grid-template-columns: var(--grid-1);
    /* 3 → 1 column */
  }
}
.rs-grid--2 {
  display: grid !important;
  grid-template-columns: var(--grid-2);
  /* Default column setup */
}
@media (max-width: 768px) {
  .rs-grid--2 {
    grid-template-columns: var(--grid-1);
    /* 2 → 1 column */
  }
}
/************************************************ 
  ✅ Symmetrical Grid Layouts 
  - Supports: 4, 3, and 2 columns 
  - Ensures even rows at all breakpoints
*************************************************/
.rs-grid--4 {
  display: grid !important;
  grid-template-columns: var(--grid-4);
  /* Default column setup */
}
@media (max-width: 1200px) {
  .rs-grid--4 {
    grid-template-columns: var(--grid-2);
    /* 4 → 2 columns */
  }
}
@media (max-width: 768px) {
  .rs-grid--4 {
    grid-template-columns: var(--grid-1);
    /* 2 → 1 column */
  }
}
.rs-grid--3 {
  display: grid !important;
  grid-template-columns: var(--grid-3);
  /* Default column setup */
}
@media (max-width: 1200px) {
  .rs-grid--3 {
    grid-template-columns: var(--grid-1);
    /* 3 → 1 column */
  }
}
.rs-grid--2 {
  display: grid !important;
  grid-template-columns: var(--grid-2);
  /* Default column setup */
}
@media (max-width: 768px) {
  .rs-grid--2 {
    grid-template-columns: var(--grid-1);
    /* 2 → 1 column */
  }
}
/************************************************ 
  ✅ Asymmetrical Grid Layouts
  - Supports: 2-3, 3-2, 1-2, 2-1
  - Maintains proper proportions at all breakpoints
*************************************************/
.rs-grid--2-3 {
  display: grid !important;
  grid-template-columns: var(--grid-2-3);
  /* Default setup */
}
@media (max-width: 1200px) {
  .rs-grid--2-3 {
    grid-template-columns: var(--grid-2);
    /* Converts to even 2 columns */
  }
}
@media (max-width: 768px) {
  .rs-grid--2-3 {
    grid-template-columns: var(--grid-1);
    /* Final collapse to 1 column */
  }
}
.rs-grid--3-2 {
  display: grid !important;
  grid-template-columns: var(--grid-3-2);
  /* Default setup */
}
@media (max-width: 1200px) {
  .rs-grid--3-2 {
    grid-template-columns: var(--grid-2);
    /* Converts to even 2 columns */
  }
}
@media (max-width: 768px) {
  .rs-grid--3-2 {
    grid-template-columns: var(--grid-1);
    /* Final collapse to 1 column */
  }
}
.rs-grid--1-2 {
  display: grid !important;
  grid-template-columns: var(--grid-1-2);
  /* Default setup */
}
@media (max-width: 768px) {
  .rs-grid--1-2 {
    grid-template-columns: var(--grid-1);
    /* Final collapse to 1 column */
  }
}
.rs-grid--2-1 {
  display: grid !important;
  grid-template-columns: var(--grid-2-1);
  /* Default setup */
}
@media (max-width: 768px) {
  .rs-grid--2-1 {
    grid-template-columns: var(--grid-1);
    /* Final collapse to 1 column */
  }
}
/************************************************ 
  ✅ Advanced Asymmetrical Grid Layouts
  - Supports: 1-3, 3-1, 2-4, 4-2
  - More complex responsive breakpoints
*************************************************/
.rs-grid--1-3 {
  display: grid !important;
  grid-template-columns: var(--grid-1-3);
  /* Default setup */
}
@media (max-width: 1200px) {
  .rs-grid--1-3 {
    grid-template-columns: var(--grid-2);
    /* Converts to 2 equal columns */
  }
}
@media (max-width: 768px) {
  .rs-grid--1-3 {
    grid-template-columns: var(--grid-1);
    /* Final collapse to 1 column */
  }
}
.rs-grid--3-1 {
  display: grid !important;
  grid-template-columns: var(--grid-3-1);
  /* Default setup */
}
@media (max-width: 1200px) {
  .rs-grid--3-1 {
    grid-template-columns: var(--grid-2);
    /* Converts to 2 equal columns */
  }
}
@media (max-width: 768px) {
  .rs-grid--3-1 {
    grid-template-columns: var(--grid-1);
    /* Final collapse to 1 column */
  }
}
.rs-grid--2-4 {
  display: grid !important;
  grid-template-columns: var(--grid-2-4);
  /* Default setup */
}
@media (max-width: 1200px) {
  .rs-grid--2-4 {
    grid-template-columns: var(--grid-2);
    /* Converts to 2 equal columns */
  }
}
@media (max-width: 768px) {
  .rs-grid--2-4 {
    grid-template-columns: var(--grid-1);
    /* Final collapse to 1 column */
  }
}
.rs-grid--4-2 {
  display: grid !important;
  grid-template-columns: var(--grid-4-2);
  /* Default setup */
}
@media (max-width: 1200px) {
  .rs-grid--4-2 {
    grid-template-columns: var(--grid-2);
    /* Converts to 2 equal columns */
  }
}
@media (max-width: 768px) {
  .rs-grid--4-2 {
    grid-template-columns: var(--grid-1);
    /* Final collapse to 1 column */
  }
}
/************************************************ 
  ✅ opt-grid-auto-2 – Responsive 2-Column Grid
*************************************************/
.opt-grid-auto-2 {
  --grid-gap: 1rem;
  --grid-min-card-width: 280px;
  display: grid;
  gap: var(--grid-gap);
  grid-template-columns: repeat(auto-fit, minmax(var(--grid-min-card-width), 1fr));
  max-width: 1200px;
  width: 100%;
  margin-inline: auto;
  padding-inline: 0;
  overflow-x: hidden;
}
/************************************************ 
  ✅ opt-grid-auto-3 – Responsive 3-Column Grid
*************************************************/
.opt-grid-auto-3 {
  --grid-gap: 1rem;
  --grid-min-card-width: 260px;
  display: grid;
  gap: var(--grid-gap);
  grid-template-columns: repeat(auto-fit, minmax(var(--grid-min-card-width), 1fr));
  max-width: 1200px;
  width: 100%;
  margin-inline: auto;
  padding-inline: 0;
  overflow-x: hidden;
}
/************************************************ 
  ✅ opt-grid-auto-4 – Responsive 4-Column Grid
*************************************************/
.opt-grid-auto-4 {
  --grid-gap: 1rem;
  --grid-min-card-width: 220px;
  display: grid;
  gap: var(--grid-gap);
  grid-template-columns: repeat(auto-fit, minmax(var(--grid-min-card-width), 1fr));
  max-width: 1200px;
  width: 100%;
  margin-inline: auto;
  padding-inline: 0;
  overflow-x: hidden;
}
/************************************************ 
  ✅ Static Breakpoints 
*************************************************/
.rs-article-dual-sidebar {
  display: grid;
  grid-template-areas: "content";
  grid-template-columns: auto;
  gap: var(--space-s);
  padding-inline: var(--section-padding-x);
  max-width: var(--content-width);
  margin-inline: auto;
}
@media (min-width: 768px) {
  .rs-article-dual-sidebar {
    padding-inline: var(--space-l);
  }
}
@media (min-width: 1200px) {
  .rs-article-dual-sidebar {
    padding-inline: 0;
  }
}
@media (min-width: 1024px) {
  .rs-article-dual-sidebar {
    grid-template-areas: "before content";
    grid-template-columns: var(--sidebar-width) auto;
  }
}
@media (min-width: 1200px) and (min-height: 34em) {
  .rs-article-dual-sidebar {
    grid-template-areas: "before content after";
    grid-template-columns: var(--sidebar-width) auto var(--sidebar-width);
  }
}
.rs-article-dual-sidebar__before {
  grid-area: before;
  display: none;
}
@media (min-width: 1024px) {
  .rs-article-dual-sidebar__before {
    display: flex;
    flex-direction: column;
    justify-content: stretch;
  }
}
.rs-article-dual-sidebar__content {
  grid-area: content;
  width: 100%;
  max-width: clamp(38rem, 7vw + 32rem, 56rem);
}
.rs-article-dual-sidebar__after {
  grid-area: after;
  display: none;
}
@media (min-width: 1200px) and (min-height: 34em) {
  .rs-article-dual-sidebar__after {
    display: flex;
    flex-direction: column;
    justify-content: stretch;
  }
}
.rs-article-dual-sidebar__sidebar {
  position: sticky;
  top: var(--sticky-top);
  align-self: start;
}
/************************************************ 
  ✅ Static Breakpoints 
  - Defines common responsive breakpoints
  - Used for media queries throughout the project
*************************************************/
.rs-article-dual-sidebar {
  display: grid;
  gap: var(--space-s);
  grid-template-areas: "content";
  grid-template-columns: auto;
  justify-content: center;
  width: 100%;
  max-width: var(--content-width);
  margin-inline: auto;
  padding-inline: var(--section-padding-x);
}
@media (min-width: 768px) {
  .rs-article-dual-sidebar {
    padding-inline: var(--space-l);
  }
}
@media (min-width: 1200px) {
  .rs-article-dual-sidebar {
    padding-inline: 0;
  }
}
@media (min-width: 1024px) {
  .rs-article-dual-sidebar {
    grid-template-areas: "before content";
    grid-template-columns: [before] 1fr [content] auto;
  }
}
@media (min-width: 1200px) and (min-height: 34em) {
  .rs-article-dual-sidebar {
    grid-template-areas: "before content after";
    grid-template-columns: [before] 1fr [content] auto [after] 1fr;
  }
}
.rs-article-dual-sidebar__before {
  grid-area: before;
  display: none;
}
@media (min-width: 1024px) {
  .rs-article-dual-sidebar__before {
    display: flex;
    flex-direction: column;
    justify-content: stretch;
    position: sticky;
    top: var(--sticky-top, var(--space-m));
    align-self: start;
  }
}
.rs-article-dual-sidebar__content {
  grid-area: content;
  width: 100%;
  max-width: clamp(38rem, 7vw + 32rem, 56rem);
}
.rs-article-dual-sidebar__after {
  grid-area: after;
  display: none;
}
@media (min-width: 1200px) and (min-height: 34em) {
  .rs-article-dual-sidebar__after {
    display: flex;
    flex-direction: column;
    justify-content: stretch;
    position: sticky;
    top: var(--sticky-top, var(--space-m));
    align-self: start;
    height: max-content;
  }
}
.rs-sidebar-section {
  flex-grow: 1;
}
.rs-sidebar-section--grow {
  flex-grow: 1;
}
.rs-sidebar-section--small {
  max-height: none;
}
.rs-sidebar-section--min {
  flex-grow: 0;
}
.rs-sidebar-section > * {
  position: static;
  max-height: none;
  overflow: visible;
  inset-block-start: auto;
}
/* Process Section Styles */
.opt-process-section {
  counter-reset: process;
  /* Resets the counter for process steps */
  background: linear-gradient(var(--base-semi-light), var(--base-ultra-light));
  /* Gradient background for the section */
}
/* Intro Section Styles */
.opt-intro {
  text-align: center;
  /* Center-aligns text within the intro section */
  align-items: center;
  /* Centers items within the intro section */
}
/* Heading within the Intro Section */
.opt-intro__heading {
  /* Add specific styles for the heading in the intro section */
}
/* Lede Text within the Intro Section */
.opt-intro__lede {
  max-width: 60ch;
  /* Limits the maximum width of the intro text */
}
/* Process Grid Styles */
.opt-process-grid {
  display: grid;
  /* Makes the section a grid container */
  grid-template-columns: var(--grid-3);
  /* Defines the number of columns in the grid */
  grid-template-rows: 1fr;
  /* Defines a single row in the grid */
}
/* Process Card Styles */
.opt-process-card {
  --counter-font-size: var(--h1);
  /* Font size for the counter */
  --counter-size: calc(var(--counter-font-size) * 1.5);
  /* Counter size based on the font size */
  /* Mask styles for the card background */
  --mask: linear-gradient(to bottom, black, black) no-repeat bottom/100% calc(100% - var(--border-width)),
          linear-gradient(to right, black, black) no-repeat top left/calc(50% - var(--counter-size)), 
          linear-gradient(to left, black, black) no-repeat top right/calc(50% - var(--counter-size));
  gap: var(--card-gap);
  /* Gap between the content in the card */
  align-items: center;
  /* Centers items vertically in the card */
  text-align: center;
  /* Centers the text horizontally */
  padding: var(--card-padding);
  /* Padding inside the card */
  position: relative;
  /* Sets the position of the card relative to its parent */
  isolation: isolate;
  /* Isolates the stacking context for child elements */
  /* Card Background and Masking */
  /* Counter Display */
}
.opt-process-card::before {
  content: "";
  /* Creates an empty element before the card */
  position: absolute;
  /* Positions the pseudo-element absolutely inside the card */
  inset: 0;
  /* Stretches the pseudo-element to fill the entire card */
  z-index: -1;
  /* Places the pseudo-element behind the content */
  border: var(--border-width) dashed var(--border-color-dark);
  /* Adds a dashed border around the card */
  border-radius: var(--card-radius);
  /* Rounds the corners of the border */
  -webkit-mask: var(--mask);
  /* Applies the mask to the pseudo-element for webkit browsers */
  mask: var(--mask);
  /* Applies the mask to the pseudo-element */
}
.opt-process-card::after {
  content: counter(process);
  /* Displays the current process step */
  counter-increment: process;
  /* Increments the process step counter */
  position: absolute;
  /* Positions the pseudo-element absolutely */
  inset: calc(var(--counter-size) / -2) auto auto 50%;
  /* Adjusts the position of the counter inside the card */
  translate: -50% 0;
  /* Centers the counter element */
  font-size: var(--counter-font-size);
  /* Sets the font size of the counter */
  line-height: 1;
  /* Ensures single line height for the counter */
  inline-size: var(--counter-size);
  /* Sets the width of the counter box */
  block-size: var(--counter-size);
  /* Sets the height of the counter box */
  display: grid;
  /* Makes the counter a grid item */
  place-items: center;
  /* Centers the content inside the grid */
}
/* Heading within the Process Card */
.opt-process-card__heading {
  /* Add specific styles for the heading inside the process card */
}
/* Description Text within the Process Card */
.opt-process-card__description {
  font-size: var(--text-s);
  /* Sets the font size for the card description */
}