:root {
  /* --- PRIMITIVE COLORS (From Variables.png) --- */
  --color-black: #000000;
  --color-white: #FFFFFF;

  /* Neutrals */
  --neutral-lightest: #EEEEEE;
  --neutral-lighter: #CCCCCC;
  --neutral-light: #AAAAAA;
  --neutral: #666666;
  --neutral-dark: #444444;
  --neutral-darker: #222222;
  --neutral-darkest: #111111;
  --bg-F6: #F6F9FC;

  /* Theme Colors */
  --brand-primary: #25AAE1;
  /* Primary blue from image */
  --brand-success: #246D6C;
  /* Success green */
  --brand-danger: #FD6354;
  /* Error red */
  --brand-warning: #EDC167;
  /* Warning yellow */
  --brand-secondary: #6C666E;
  --brand-info: #8DC63F;
  --brand-bglight: #ECF0F4;
  --brand-bgaccent: #7F98B2;
  --brand-bgwhite: #FFFFFF;
  --brand-teal: #29C9C7;

  --brand-accent-aqua: #A0E6E5;
  --brand-accent-orange: #F9BFA2;
  --brand-accent-lime: #BBDD8C;
  --brand-accent-red: #F3B5AE;
  --brand-accent-yellow: #FBD897;

  /* Component Colors */
  --header-gradient-start: #0085FF;
  --header-gradient-end: #23A2D6;
  --search-border: #C7DEE8;
  --search-focus-bg: #f8fbff;

  /*Shades Colors*/
  --brand-primary-100: #D3EEF9;
  --brand-primary-200: #A8DDF3;
  --brand-primary-300: #7CCCED;
  --brand-primary-400: #51BBE7;
  --brand-primary-500: #25AAE1;
  --brand-primary-600: #1E88B4;
  --brand-primary-700: #166687;
  --brand-primary-800: #0F445A;
  --brand-primary-900: #07222D;
  --brand-primary-250: #F5FDFF;

  --brand-secondary-100: #E1E0E1;
  --brand-secondary-200: #C4C1C4;
  --brand-secondary-300: #A6A3A8;
  --brand-secondary-400: #89848B;
  --brand-secondary-500: #6C666E;
  --brand-secondary-600: #565258;
  --brand-secondary-700: #413D42;
  --brand-secondary-800: #2B292C;
  --brand-secondary-900: #161416;

  --brand-info-100: #E8F4D9;
  --brand-info-200: #D1E8B2;
  --brand-info-300: #BBDD8C;
  --brand-info-400: #A4D165;
  --brand-info-500: #8DC63F;
  --brand-info-600: #719E32;
  --brand-info-700: #557726;
  --brand-info-800: #384F19;
  --brand-info-900: #1C280D;

  --brand-e6: #E6E6E6;
  --brand-slate: #1E293B;

  /* Additional Component Colors */
  --badge-bg: #F0FBFF;
  --gradient-blue: #316CF4;
  --body-color: #212529;
  --control-border: #D5CBCA;
  --border-light: #ECE7E0;
  --product-bg: #F4F6FC;
  --text-slate: #64748B;
  --brand-primary-150: #B7EAFF;
  --white-overlay: rgba(255, 255, 255, 0.34);
  --shadow-card-blue-hover: 0px 24px 48px 0px rgba(90, 150, 255, 0.24), 0px 10px 20px 0px rgba(90, 150, 255, 0.18);

  /* Component Shadows */
  --shadow-badge: 0px 17.05px 34.1px 0px rgba(90, 150, 255, 0.18), 0px 6.82px 13.64px 0px rgba(90, 150, 255, 0.12);
  --shadow-card-blue: 0px 19.32px 38.64px 0px rgba(90, 150, 255, 0.18), 0px 7.73px 15.46px 0px rgba(90, 150, 255, 0.12);
  --shadow-banner-img: -8.34px 16.68px 24.65px -2.28px rgba(30, 136, 180, 0.18);
  --shadow-slide: 1px 6px 6px 0px rgba(102, 158, 181, 0.16);
  --shadow-champion: 3px -3px 8px 0px rgba(37, 169, 223, 0.9), -3px 3px 6px 0px rgba(37, 173, 227, 0.3), 3px 3px 6px 0px rgba(37, 169, 223, 0.2), -3px -3px 6px 0px rgba(37, 169, 223, 0.2);
  --shadow-btn-info: 0px 10px 15px 0px rgba(139, 197, 63, 0.2), 0px 4px 6px 0px rgba(139, 197, 63, 0.2);

  /* --- TYPOGRAPHY (From Typography.png) --- */
  --font-family-base: 'Gotham', sans-serif;
  --h1-size: 56px;
  --h2-size: 48px;
  --h3-size: 40px;
  --h4-size: 32px;
  --h5-size: 24px;
  --h6-size: 16px;
  --body-size: 16px;
  --line-height-base: 1.5;

  /* --- SHADOWS (From Shadows.png) --- */
  --shadow-xxsmall: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
  --shadow-xsmall: 0px 1px 2px 0px rgba(0, 0, 0, 0.06);
  --shadow-small: 0px 2px 4px -2px rgba(0, 0, 0, 0.06);
  --shadow-medium: 0px 12px 16px -4px rgba(0, 0, 0, 0.08);
  --shadow-large: 0px 20px 24px -4px rgba(0, 0, 0, 0.08);
  --shadow-xlarge: 0px 24px 48px -12px rgba(0, 0, 0, 0.18);
  --shadow-xxlarge: 0px 32px 64px -12px rgba(0, 0, 0, 0.14);

  /* --- BREAKPOINTS (Bootstrap-aligned) --- */
  --breakpoint-xs: 0;
  --breakpoint-sm: 576px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 992px;
  --breakpoint-xl: 1200px;
  --breakpoint-xxl: 1400px;
}


  /* Desktop-first approach (max-width): */
  @media (max-width: 575px) { }   /* breakpoint-xs-max - Extra small devices (phones) */
  @media (max-width: 767px) { }   /* breakpoint-sm-max - Small devices (tablets portrait) */
  @media (max-width: 991px) { }   /* breakpoint-md-max - Medium devices (tablets landscape) */
  @media (max-width: 1199px) { }  /* breakpoint-lg-max - Large devices (desktops) */
  @media (max-width: 1399px) { }  /* breakpoint-xl-max - Extra large devices */ 


@font-face {
  font-family: Gotham;
  src: url('./fonts/gotham/Gotham-Thin.otf') format('opentype'),
       url('./fonts/gotham/Gotham-Thin.ttf') format('truetype');
  font-weight: 100;
  font-style: normal;
}

@font-face {
  font-family: Gotham;
  src: url('./fonts/gotham/Gotham-ThinItalic.otf') format('opentype'),
       url('./fonts/gotham/Gotham-ThinItalic.ttf') format('truetype');
  font-weight: 100;
  font-style: italic;
}

@font-face {
  font-family: Gotham;
  src: url('./fonts/gotham/Gotham-XLight.otf') format('opentype'),
       url('./fonts/gotham/Gotham-XLight.ttf') format('truetype');
  font-weight: 200;
  font-style: normal;
}

@font-face {
  font-family: Gotham;
  src: url('./fonts/gotham/Gotham-XLightItalic.otf') format('opentype'),
       url('./fonts/gotham/Gotham-XLightItalic.ttf') format('truetype');
  font-weight: 200;
  font-style: italic;
}

@font-face {
  font-family: Gotham;
  src: url('./fonts/gotham/Gotham-Light.otf') format('opentype'),
       url('./fonts/gotham/Gotham-Light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
}

@font-face {
  font-family: Gotham;
  src: url('./fonts/gotham/Gotham-LightItalic.otf') format('opentype'),
       url('./fonts/gotham/Gotham-LightItalic.ttf') format('truetype');
  font-weight: 300;
  font-style: italic;
}

@font-face {
  font-family: Gotham;
  src: url('./fonts/gotham/Gotham-Book.otf') format('opentype'),
       url('./fonts/gotham/Gotham-Book.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: Gotham;
  src: url('./fonts/gotham/Gotham-BookItalic.otf') format('opentype'),
       url('./fonts/gotham/Gotham-BookItalic.ttf') format('truetype');
  font-weight: 400;
  font-style: italic;
}

@font-face {
  font-family: Gotham;
  src: url('./fonts/gotham/Gotham-Medium.otf') format('opentype'),
       url('./fonts/gotham/Gotham-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: Gotham;
  src: url('./fonts/gotham/Gotham-MediumItalic.otf') format('opentype'),
       url('./fonts/gotham/Gotham-MediumItalic.ttf') format('truetype');
  font-weight: 500;
  font-style: italic;
}

@font-face {
  font-family: Gotham;
  src: url('./fonts/gotham/Gotham-Bold.otf') format('opentype'),
       url('./fonts/gotham/Gotham-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: Gotham;
  src: url('./fonts/gotham/Gotham-BoldItalic.otf') format('opentype'),
       url('./fonts/gotham/Gotham-BoldItalic.ttf') format('truetype');
  font-weight: 700;
  font-style: italic;
}

@font-face {
  font-family: Gotham;
  src: url('./fonts/gotham/Gotham-Black.otf') format('opentype'),
       url('./fonts/gotham/Gotham-Black.ttf') format('truetype');
  font-weight: 800;
  font-style: normal;
}

@font-face {
  font-family: Gotham;
  src: url('./fonts/gotham/Gotham-BlackItalic.otf') format('opentype'),
       url('./fonts/gotham/Gotham-BlackItalic.ttf') format('truetype');
  font-weight: 800;
  font-style: italic;
}

@font-face {
  font-family: Gotham;
  src: url('./fonts/gotham/Gotham-Ultra.otf') format('opentype'),
       url('./fonts/gotham/Gotham-Ultra.ttf') format('truetype');
  font-weight: 900;
  font-style: normal;
}

@font-face {
  font-family: Gotham;
  src: url('./fonts/gotham/Gotham-UltraItalic.otf') format('opentype'),
       url('./fonts/gotham/Gotham-UltraItalic.ttf') format('truetype');
  font-weight: 900;
  font-style: italic;
}

@font-face {
  font-family: NoeDisplay;
  src: url('./fonts/Noe Display/NoeDisplay-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: NoeDisplay;
  src: url('./fonts/Noe Display/Noe-Display-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: NoeDisplay;
  src: url('./fonts/Noe Display/noe-display-bold-italic.ttf') format('truetype');
  font-weight: 700;
  font-style: italic;
}

@font-face {
  font-family: NoeDisplay;
  src: url('./fonts/Noe Display/Noe-Display-Regular-Italic.ttf') format('truetype');
  font-weight: 400;
  font-style: italic;
}

.site{
  padding-top: 170px;
}
/* --- BOOTSTRAP OVERRIDES --- */
.btn-primary,
.bg-primary {
  background-color: var(--brand-primary) !important;
  border-color: var(--brand-primary) !important;
  transition: all 0.3s ease;
}
.bg-light {
  background-color: var(--brand-bglight) !important;
}
.btn-primary:hover {
  background-color: var(--brand-primary-600) !important;
  border-color: var(--brand-primary-600) !important;
  box-shadow: 0 4px 8px rgba(37, 170, 225, 0.3);
}
.btn-primary:active {
  transform: translateY(0);
}
.btn-primary:focus-visible {
  outline: 2px solid var(--brand-primary);
  outline-offset: 2px;
}
.text-black {
  color: var(--brand-secondary-700) !important;
}
.btn-green {
  background-color: var(--brand-info);
  border: 2px solid var(--brand-info) !important;
  color: var(--color-white);
  font-weight: 500;
  font-size: 16px;
  box-shadow: var(--shadow-btn-info);
  line-height: 150%;
  min-height: 48px;
  border-radius: 5px;
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: center;
  padding: 10px 24px;
  transition: all 0.3s ease;
  text-decoration: none;
  &.btn-sm {
     min-height: 40px; 
     padding: 8px 24px;
     font-size: 14px;
     display:inline-flex;
     gap: 8px;
     align-items: center;
  }
}
.btn-green:hover {
  /*background-color: var(--brand-info-600);*/
  background-color: var(--color-white) !important;
  border-color: var(--brand-info-600) !important;
  box-shadow: 0px 14px 20px 0px rgba(139, 197, 63, 0.3), 0px 6px 8px 0px rgba(139, 197, 63, 0.3);
  /*color: var(--color-white);*/
  color: var(--brand-secondary-700) !important;
  border: 2px solid var(--brand-info) !important;
  img {
    filter: brightness(0) invert(90%) sepia(60%) saturate(522%) hue-rotate(190deg) brightness(17%) contrast(74%);
    /* filter: brightness(0) saturate(100%) invert(67%) sepia(26%) saturate(941%) hue-rotate(151deg) brightness(78%) contrast(134%); */
  }
}
.btn-text {
  border: none;
  background-color: transparent;
}
/* .btn:first-child:active {
  transform: translateY(0);
  box-shadow: var(--shadow-btn-info);
  background-color: var(--brand-info-600);
  border-color: var(--brand-info-600);
  color: var(--color-white);
} */
/*.btn-green:active {
  transform: translateY(0);
  box-shadow: var(--shadow-btn-info);
  background-color: var(--brand-info-600);
  border-color: var(--brand-info-600);
  color: var(--color-white);
}
.btn-green:focus-visible {
  outline: 2px solid var(--brand-info);
  background-color: var(--brand-info-600);
  outline-offset: 2px;
}*/
.btn-green-outline {
    border: 2px solid var(--brand-info);
    background-color: transparent;
    color: var(--brand-secondary-700);
    font-weight: 500;
    font-size: 16px;
    line-height: 150%;
    min-height: 48px;
    border-radius: 5px;
    display: flex;
    white-space: nowrap;
    gap: 12px;
    align-items: center;
    justify-content: center;
    padding: 10px 24px;
    transition: all 0.3s ease;
    text-decoration: none;
    &.btn-sm{
      padding: 2px 24px;
      font-size: 14px;
      min-height: 26px;
      line-height:1;
    }
}
.btn-green-outline:hover {
    background-color: var(--brand-info);
    color: var(--color-white);
    box-shadow: var(--shadow-btn-info);
    opacity: 1 !important;
    border-color: var(--brand-info);
}
.btn-green-outline:hover img {
    filter: brightness(0) invert(1);
}
/*.btn-green-outline:active {
    transform: translateY(0);
}
.btn-green-outline:focus-visible {
    outline: 2px solid var(--brand-info);
    outline-offset: 2px;
}*/
.btn-outline {
   border: 2px solid var(--color-white);
   display: flex;
   justify-content: center;
   align-items: center;
   border-radius: 5px;
   font-weight: 500;
   font-size: 16px;
   line-height: 150%;
   min-height: 48px;
   color: var(--color-white);
   gap: 12px;
   padding: 10px 24px;
   background-color: transparent;
   transition: all 0.3s ease;
   letter-spacing: -0.5px;
}
.btn-outline:hover {
   background-color: var(--color-white);
   color: var(--brand-secondary-700);
   box-shadow: 0 4px 12px rgba(255, 255, 255, 0.25);
}
.btn-outline:hover img {
   filter: brightness(0) saturate(100%);
}
.btn-outline:active {
   transform: translateY(0);
}
.btn-outline:focus-visible {
   outline: 2px solid var(--color-white);
   outline-offset: 2px;
}
.form-control {
  min-height: 48px;
  background-color: var(--brand-primary-250) !important;
  border-color: var(--search-border);
  border-radius: 9px;
  color: var(--neutral-darkest);
  transition: border-color 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
}
.form-select {
    min-height: 48px;
    background-color: var(--brand-primary-250) !important;
    border-color: var(--search-border);
    border-radius: 9px;
    color: var(--neutral-darkest);
    transition: border-color 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
    outline: none;
    &:focus {
      box-shadow: 0 0 0 3px rgba(37, 170, 225, 0.1);
    }
}
.form-control:focus {
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 3px rgba(37, 170, 225, 0.1);
}
.form-check-input {
  width: 18px;
  height: 18px;
  transition: all 0.3s ease;
}
.form-check-input:focus {
  box-shadow: 0 0 0 3px rgba(37, 170, 225, 0.1);
  border-color: var(--brand-primary);
}
.btn-success {
  box-shadow: var(--shadow-btn-info);
  border: 1px solid var(--brand-info);
  color: var(--color-white);
  font-weight: 500;
  font-size: 16px;
  line-height: 150%;
  min-height: 48px;
  background-color: var(--brand-info);
  border-radius: 5px;
  transition: all 0.3s ease;
}
.btn-success:hover {
  background-color: var(--brand-info-600);
  border-color: var(--brand-info-600);
  box-shadow: 0px 14px 20px 0px rgba(139, 197, 63, 0.3), 0px 6px 8px 0px rgba(139, 197, 63, 0.3);
  transform: translateY(-2px);
}
.btn-success:active {
  transform: translateY(0);
  box-shadow: var(--shadow-btn-info);
}
.btn-success:focus-visible {
  outline: 2px solid var(--brand-info);
  outline-offset: 2px;
}
.page-title {
    font-family: NoeDisplay;
    font-weight: 700;
    font-size: 46px;
    line-height: 120%;
    color: var(--brand-slate);
}
i {
  font-style: italic;
}
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-family-base) !important;
  font-size: var(--body-size);
  line-height: var(--line-height-base);
  color: var(--neutral-darkest);
}

/* Global link transitions */
a {
  transition: color 0.3s ease, opacity 0.3s ease;
}

a:hover {
  opacity: 0.8;
}

a:focus-visible {
  outline: 2px solid var(--brand-primary);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Global button transitions */
button {
  transition: all 0.3s ease;
  cursor: pointer;
}

button:active {
  transform: translateY(0);
}

button:focus-visible {
  outline: 2px solid var(--brand-primary);
  outline-offset: 2px;
}

h1 {
  font-size: var(--h1-size);
  font-weight: 700;
}

h2 {
  font-size: var(--h2-size);
}

h3 {
  font-size: var(--h3-size);
}

h4 {
  font-size: var(--h4-size);
}

h5 {
  font-size: var(--h5-size);
}

h6 {
  font-size: var(--h6-size);
}

.title {
  font-family: NoeDisplay;
}

/* Custom Shadow Classes to match your image */
.shadow-custom-sm {
  box-shadow: var(--shadow-small);
}

.shadow-custom-xl {
  box-shadow: var(--shadow-xlarge);
}
.section-badge {
    align-items: center;
    gap: 8px;
    background-color: var(--badge-bg);
    border-radius: 88.26px;
    box-shadow: var(--shadow-badge);
    font-weight: 700;
    font-size: 9px;
    line-height: 150%;
    padding: 6px 15px;
    color: var(--brand-primary);
    text-transform: uppercase;
    margin-bottom: 56px;
    letter-spacing: 0.5px;
}
.sub-title {
    padding-bottom: 24px;
    h3 {
        font-family: NoeDisplay;
        font-weight: 700;
        line-height: 120%;
        font-size: 36px;
        margin: 0;
        color: var(--brand-secondary-700);
        i {
            font-size: 40px;
        }
    }
}
/* ================================================
   NEXT CHAMPION CTA
   ================================================ */

.next-champion {
    background: linear-gradient(87.81deg, var(--gradient-blue) 6.15%, var(--header-gradient-end) 52.43%);
    box-shadow: var(--shadow-champion);
    padding: 68px 0;
    .container {
        max-width: 960px;
        padding: 0 15px;
    }
    .next-champion-inner {
        display: flex;
        align-items: center;
    }
    .left-content {
        flex: 1 1 auto;
        border-right: 1px solid rgba(255, 255, 255, 0.34);
        .sub-title {
            font-weight: 400;
            font-size: 30px;
            line-height: 43px;
            color: var(--color-white);
            padding-bottom: 30px;
            margin-bottom: 0;
            max-width: 500px;
            width: 100%;
        }
        p {
            font-weight: 400;
            font-size: 17px;
            line-height: 25px;
            color: var(--color-white);
            margin-bottom: 0;
            max-width: 500px;
            width: 100%;
        }
    }
    .right-content {
        max-width: 340px;
        width: 100%;
        display: flex;
        justify-content: flex-end;
    }
    .buttons {
        max-width: 260px;
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 26px;
    }
}
.cards-row {
    display: flex;
    gap: 32px;
    padding-top: 66px;
    .card {
    display: flex;
    flex-direction: column;
    border: none;
    background-color: transparent;
    transition: transform 0.3s ease;

    img {
        width: 100%;
        height: 300px;
        border-radius: 15px;
        box-shadow: var(--shadow-card-blue);
        object-fit: cover;
        margin-bottom: 24px;
        transition: box-shadow 0.3s ease;
    }

    &:hover {
        transform: translateY(-4px);

        img {
            box-shadow: var(--shadow-card-blue-hover);
        }
    }
}

.card-text {
    display: flex;
    flex-direction: column;
    gap: 8px;

    h6 {
        font-weight: 700;
        font-size: 18px;
        line-height: 131%;
        margin-bottom: 16px;
    }

    .truncate-text-4 {
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 4;
        -webkit-box-orient: vertical;
        margin: 0;
        font-weight: 400;
        font-size: 15px;
        line-height: 160%;
        margin-bottom: 24px;
    }

    a {
        font-weight: 700;
        font-size: 14px;
        line-height: 150%;
        vertical-align: middle;
        text-transform: uppercase;
        display: flex;
        align-items: center;
        gap: 10px;
        text-decoration: none;
        color: var(--brand-primary);
        transition: color 0.3s ease, gap 0.3s ease;

        .arrow {
            max-width: 17px;
            display: flex;
            align-items: center;
            transition: transform 0.3s ease;

            img {
                width: 100%;
                height: auto;
                margin: 0;
                box-shadow: none;
            }
        }

        &:hover {
            color: var(--brand-primary-600);
            opacity: 1;

            .arrow {
                transform: translateX(4px);
            }
        }
    }
}

}
@media (max-width: 991px) {
  .site{
    padding-top: 107px;
  }
}
@media (max-width: 768px) { 
    .next-champion {
            padding: 58px 0 71px;
            .next-champion-inner {
                flex-direction: column;
            }
            .left-content {
                border-right: none;
                border-bottom: 1px solid var(--white-overlay);
                padding-bottom: 30px;
                .sub-title {
                    font-weight: 700;
                }
            }
            .right-content {
                padding-top: 30px;
                justify-content: center;
            }
        }
            .cards-row {
                flex-direction: column;
                padding-bottom: 48px;
                gap: 48px;
                padding-top: 40px;
                .card {
                  img {
                    height: 220px;
                  }
                }
            }
            .card-text {
                gap: 0;
            }
}
@media (max-width: 468px) { 
  .next-champion {
      .left-content {
          max-width: 300px;
          margin: 0 auto;
      }
      .right-content {
          padding-top: 30px;
          justify-content: center;
      }
  }
}

/*style for detail screen*/
.breadcrumb{
  display: flex;
  gap: 12px;
  color: var(--brand-secondary);
    a{
      text-decoration: none;
      color:var(--brand-primary-600);
      &:hover{
        color:var(--brand-primary-600);

      }
    }
}

/*.upload-file-wrap{
    flex-direction: column;
    .upload-btn{
      font-size: 12px;
      width: 100%;
      display: flex;
      justify-content: center;
    }
}*/

.accordion-item{
  border: none !important;
  background-color: transparent !important;
}

#reset-filters, .main_category_arrow{
  text-decoration: none !important;
}
/******details page*****/
.body-content {
	.main-image {
		background: linear-gradient(0deg, var(--product-bg), var(--product-bg)), linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(109, 109, 109, 0.08) 100%);
		border-radius: 20px;
		padding: 20px;
		background-blend-mode: multiply;
		border: none;
	}
	.tag {
		padding: 7px 14px;
		border: 1px solid var(--brand-primary);
		background-color: var(--color-white);
		border-radius:20px;
		box-shadow: var(--shadow-badge);
	    a {
	    	text-decoration: none;
		color: var(--brand-primary);
	    }
	}
	.product-title {
		color: var(--brand-secondary-700)
	}
	.woocommerce .cart .button.single_add_to_cart_button {
	 background-color: var(--brand-info) !important;
	}
	.single_add_to_cart_button {
	  background-color: var(--brand-info) !important;
	  border: 2px solid var(--brand-info) !important;
	  color: var(--color-white) !important;
	  font-weight: 500 !important;
	  font-size: 14px !important;
	  box-shadow: var(--shadow-btn-info) !important;
	  line-height: 150% !important;
	  min-height: 40px !important;
	  border-radius: 5px !important;
	  display: flex !important;
	  gap: 12px !important;
	  align-items: center !important;
	  justify-content: center !important;
	  padding: 8px 24px !important;
	  transition: all 0.3s ease !important;
	}
	.single_add_to_cart_button:hover {
	  background-color: var(--color-white) !important;
	  border: 2px solid var(--brand-info) !important;
	  box-shadow: 0px 14px 20px 0px rgba(139, 197, 63, 0.3), 0px 6px 8px 0px rgba(139, 197, 63, 0.3) !important;
	 color: var(--brand-secondary-700) !important;
	  img {
	    filter: brightness(0) invert(90%) sepia(60%) saturate(522%) hue-rotate(190deg) brightness(17%) contrast(74%) !important;
  		}
       }
       .quantity {
       	height: 40px;
	background-color: var(--brand-primary-250) !important;
    	border:1px solid var(--search-border) !important;
       }
	.quantity:has(input:focus) {
	    outline: none !important;
	    border-color: var(--brand-primary) !important;
	    box-shadow: 0 0 0 3px rgba(37, 170, 225, 0.1) !important;
	}
	.quantity input {
		background-color: var(--brand-primary-250) !important;
	}
	.quantity .qty-button { 
		background-color: var(--brand-primary-250) !important;
	}
	
       .variations select {
       	background-color: var(--brand-primary-250) !important;
    	border-color: var(--search-border) !important;
       }
       .variations select:focus {
		outline: none !important;
		border-color: var(--brand-primary) !important;
		box-shadow: 0 0 0 3px rgba(37, 170, 225, 0.1) !important;
	}
}

/**************/
.accordion-wrap {
	.accordion {
	border-radius: 20px;
	padding: 20px;	
	box-shadow: var(--shadow-badge);
		table {
			width: 100%;
		}
	}
	.accordion-item-header {
	border-top: none;	
	h3.single-page-accordion-title  {
		margin-bottom: 0;
		font-family: gotham;
	}
	&.active {
    		border-bottom: 1px solid var(--brand-primary);
	}
	}
	.single-page-accordion-item-body {
		padding: 0;	
	}
	.accordion-item-body-content {
		padding: 20px 0;
		.wp-block-classic {
			font-size: 14px;
			line-height: 1.5;
			ul li {
				line-height: 1.5;
				font-size: 14px;
				color: var(----brand-secondary);
			}
			h3 {
			font-size: 16px;
			line-height: 1.5;
			color: var(--brand-secondary-700);
			}
			p {
			font-size: 14px;
			line-height: 1.5;
			color: var(----brand-secondary);
			}
		}
		h2 {
			font-size: 16px;
			line-height: 1.5;
			color: var(--brand-secondary-700);
			margin-bottom: 20px;
		}
		table.shop_attributes td {
			p {
				a {
				font-size: 14px !important;
				line-height: 1.5 !important;
				color: var(--brand-primary) !important;
				text-decoration: none !important;	
				}
			}
		   }
		   .gform_wrapper.gravity-theme input, .gform_wrapper.gravity-theme .gfield textarea.medium  {
	   		    border-radius: 5px;
			    min-height: 48px;
			    background-color: var(--brand-primary-250) !important;
			    border-color: var(--search-border) !important;
			    color: var(--neutral-darkest);
			    transition: border-color 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease !important;
			    border-width: 1px !important;
			    background-color: var(--brand-primary-250) !important;
			    outline: none !important;
		   }
		   .gform_wrapper.gravity-theme input:focus, .gform_wrapper.gravity-theme .gfield textarea.medium:focus  {
			outline: none !important;
			border-color: var(--brand-primary) !important;
			box-shadow: 0 0 0 3px rgba(37, 170, 225, 0.1) !important;
		   }
		   .gform_wrapper.gravity-theme .ginput_complex label {
		   	font-weight: 600;
		   }
		   .gform_wrapper.gravity-theme .ginput_complex .ginput_container_date select{
		       min-height: 48px !important;
			background-color: var(--brand-primary-250) !important;
			border:1px solid var(--search-border) !important;
			border-radius: 5px;
		   }
		   .gform_wrapper.gravity-theme .ginput_complex .ginput_container_date select:open {
		   outline: none !important;
		   border-color: var(--brand-primary) !important;
		   box-shadow: 0 0 0 3px rgba(37, 170, 225, 0.1) !important;
		   } 
		   .gform_wrapper.gravity-theme .gform_drop_area {
		   	background-color: var(--brand-primary-250) !important;
			border:1px dashed var(--search-border) !important;
			border-radius: 9px;
		   }
		   
	}
}
.accordion-right {
	border-radius: 20px;
	box-shadow: var(--shadow-badge);
	h2 {
	    border-bottom: 1px solid var(--brand-primary);
	    margin-bottom: 20px;
	    padding-bottom: 20px;
	}
	h5 {
		a {
		color: var(--brand-primary);
			span svg {
	 		fill: var(--brand-primary);
	 		}
		}
	}
	.accordion-item-header {
		 h3 {
		 	font-family: gotham;
		 	margin-bottom: 0;
		 	a {
		 		text-decoration: none;
		 		color: var(--brand-primary);
		 		font-weight: 500;
		 	}
		 }
	}
	.accordion-item-body {
		padding: 0;
	}
	.main_category_arrow {
		color: var(--brand-primary);
		font-weight: 400;
			span svg {
	 		fill: var(--brand-primary);
	 		}
	}
	.accordion-item-body-content {
		 padding: 20px 10px 0 0;
		.list-content {
			margin-left: 0;
		}
	} 
	.accordion-sub-item {
		margin-bottom: 20px;
		margin-left: 0;
	}
}
.carousel-wrap {
	margin-bottom: 0;
}

.other-product-slider {
	.product-card {
		a {
		text-decoration: none;
		}
		.product-img {
		background: linear-gradient(0deg, var(--product-bg), var(--product-bg)), linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(109, 109, 109, 0.08) 100%);
		border-radius: 8px;
		padding: 20px;
		background-blend-mode: multiply;
		border: none;
		}
	}
	.card-title {
	margin-bottom: 12px;
	a {
		color: var(----brand-secondary);
		text-decoration:none;
		line-height: 1.5;
		}
	}
	.card-price { 
		margin: 0;
		display: flex;
		gap: 20px;
		font-size: 20px;
		text-decoration: none;
		line-height: 1.5;
		bdi {
		font-size: 20px;
		text-decoration: none;
		line-height: 1.5;
		span  {
		font-size: 20px;
		line-height: 1.5;
		color: var(--brand-danger);
		}
		}
	}
	.product-price {
		bdi {
			font-size: 20px;
			text-decoration: none;
			line-height: 1.5;
		}
	}
}
.product-card:hover {
	box-shadow: none;
}
/**product-listing***/
.search-btn-wrap {
	input {
	    border-radius: 5px;
	    min-height: 42px;
	    background-color: var(--brand-primary-250) !important;
	    border:1px solid var(--search-border) !important;
	    color: var(--neutral-darkest);
	    transition: border-color 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease !important;
	    &:focus {
	    outline: none !important;
	    border-color: var(--brand-primary) !important;
	    box-shadow: 0 0 0 3px rgba(37, 170, 225, 0.1) !important;
	    }
	}
}
.filter-btn {
	background-color: var(--brand-primary);
	color: var(--color-white);
	border:1px solid var(--brand-primary);
	transition: box-shadow 0.4s ease;
	border-radius: 5px;
	&:active {
    	  box-shadow: var(--shadow-badge) !important;
	}
	img {
	filter: invert(1) brightness(1);
	}
}
.nav-select {
	background-color: var(--brand-primary-250);
        border: 1px solid var(--search-border);
	transition: box-shadow 0.4s ease;
	border-radius: 5px;
	font-size: 16px;
	color: var(--brand-secondary);
	 &:focus {
	    outline: none !important;
	    border-color: var(--brand-primary);
	    box-shadow: 0 0 0 3px rgba(37, 170, 225, 0.1);
	    }
}
.side-filter-wrap {
	background-color: #f6f9fc;
	box-shadow: var(--shadow-badge);
	border-radius: 20px;	
	.title {
		font-family: gotham;
		color: var(--brand-secondary-700);
	}
	.line-divider {
		border: 1px solid var(--brand-primary);
	}
	.checkbox-list-wrap {
		padding-left: 0;
	}
	.main_category_arrow {
		text-decoration: none;
		color: var(--brand-primary);
		span {
			svg {
				fill: var(--brand-primary);
			}
		}
	}
}
/**new-slider***/
	.slick-slider .element {
		margin: 0;
	}
    .product-card.product-col {
    	width: 100%;
    	position: relative;
    	padding: 0;
    	display: flex;
    	flex-direction: column;
        .product-img {
            background: linear-gradient(0deg, var(--product-bg), var(--product-bg)),
                linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(109, 109, 109, 0.08) 100%);
            height: 304px;
            background-blend-mode: multiply;
            border-radius: 15px;
            position: relative;
            padding: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 16px;
            overflow: hidden;
            max-width: 100%;
            img {
                width: 100%;
                height: auto;
            }
        }
        .product-name {
            display: flex;
            flex-direction: column;
            padding-bottom: 30px;
            width: 100%;
        }
        .name {
            font-weight: 500;
            font-size: 18px;
            line-height: 150%;
            color: var(--brand-secondary-700);
            margin-bottom: 4px;
            display: -webkit-box;
	    -webkit-line-clamp: 2;
	    -webkit-box-orient: vertical;
	    overflow: hidden;
	    min-height: 54px;
        }
        .product-code {
            font-weight: 400;
            font-size: 12px;
            line-height: 150%;
            color: var(--brand-secondary-700);
            margin-bottom: 12px;
        }
        .product-price {
            font-weight: 500;
            font-size: 18px;
            line-height: 150%;
            color: var(--brand-secondary-700);
            margin-bottom: 16px;
        }
        .hover-link {
                width: 100%;
                height: 48px;
                background-color: var(--brand-primary);
                color: var(--color-white);
                text-align: center;
                display: flex;
                justify-content: center;
                align-items: center;
                text-decoration: none;
                font-weight: 500;
                position: absolute;
                bottom: -50px;
                left: 0;
                transition: bottom 0.3s ease;
                font-size: 16px;
                z-index: 1;
                opacity: 1;
                img {
                    width: 16px;
                    height: auto;
                    margin-left: 8px;
                }
        }
        &:hover {
		.hover-link {
		        bottom: 0;
		}
		.product-img img {
			transform: none;
		}
		.product-swiper-next, .product-swiper-prev {
			opacity: 1;
		}
        } 
       
        .productSwiper {
            width: 100%;
            height: auto;
        }
        .productSwiper .swiper-slide {
            display: flex;
            height: 218px;
        }
        .productSwiper .swiper-slide img {
            width: 100%;
            height: auto;
            object-fit: contain;
        }
        .product-swiper-prev,
        .product-swiper-next {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            z-index: 2;
            cursor: pointer;
            width: 32px;
            height: 32px;
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: #c4c1c4bd;
            border-radius: 50%;
            opacity: 0;
            transition: opacity 0.3s ease;
        }
        .product-swiper-prev img,
        .product-swiper-next img {
            width: 9px;
            height: auto;
        }
        .product-swiper-prev {
            left: 0px;
            transform: translateY(-50%) rotate(180deg);
        }
        .product-swiper-next {
            right: 0px;
        }
        .product-row > div:hover .product-swiper-prev,
        .product-row > div:hover .product-swiper-next {
            opacity: 1;
        }
        .badge {
            position: absolute;
            top: 22px;
            left: 12px;
            padding: 4px 8px;
            border-radius: 5px;
            color: var(--color-black);
            z-index: 11;
            &.best-seller {
                background-color: var(--brand-primary-300);
            }
            &.new-arrival {
                background-color: var(--brand-info-200);
            }
            &.exclusive-item {
                background-color: var(--brand-accent-yellow);
            }
            &.new-item {
                background-color: var(--brand-accent-orange);
            }
        }
        .like {
            position: absolute;
            right: 20px;
            top: 25px;
            border: none;
            background-color: transparent;
            cursor: pointer;
            z-index: 1;
            img {
                transition: filter 0.2s ease;
            }
            &.active img {
                filter: brightness(0) saturate(100%) invert(19%) sepia(97%) saturate(7481%) hue-rotate(358deg) brightness(101%) contrast(107%);
            }
        }
        .product-color {
            margin-bottom: 16px;
        }
        .min-text {
            font-weight: 400;
            font-size: 12px;
            line-height: 150%;
            color: var(--brand-secondary);
            span {
                font-weight: 500;
            }
        }
        .colors {
            display: flex;
            align-items: center;
            gap: 10px;
            padding-left: 6px;
            list-style: none;
            margin: 0;
            .color-swatch {
                width: 16px;
                height: 16px;
                border-radius: 50%;
                background-color: var(--swatch-color);
                cursor: pointer;
                border: none;
                outline: 2px solid transparent;
                outline-offset: 3px;
                transition: outline-color 0.2s ease;
                &.active {
                    outline-color: var(--swatch-color);
                }
            }
            .add-color {
                width: 26px;
                height: 26px;
                border: 1px solid var(--brand-secondary-200);
                color: var(--brand-secondary);
                display: flex;
                align-items: center;
                justify-content: center;
                border-radius: 50%;
                cursor: pointer;
            }
        }
    }
	.woocommerce-page.woocommerce-product .reset_variations, .woocommerce.woocommerce-page.woocommerce-product .reset_variations {
		padding: 0 15px;
	}

	.woocommerce .cart .button.single_add_to_cart_button {
	 background-color: var(--brand-info) !important;
	}
	.woocommerce .cart .button.single_add_to_cart_button {
		&:hover { 
			background-color: var(--color-white) !important;
		}
	}
	.woocommerce .cart .button.single_add_to_cart_button.disabled {
		&:hover { 
			background-color: var(--brand-info) !important;
			color: var(--color-white) !important;
			img {
				filter: none !important;
			}
		}
	}
	textarea {
	background-color: var(--brand-primary-250) !important;
	    border-color: var(--search-border) !important;
	    border-radius: 9px;
	    color: var(--neutral-darkest);
	    transition: border-color 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease !important;
	    outline: none;
	}
	textarea:focus {
		outline: none !important;
		border-color: var(--brand-primary) !important;
		box-shadow: 0 0 0 3px rgba(37, 170, 225, 0.1) !important;
	}
	.thumbnails img {
		border-radius: 8px;
		border: 1px solid var(--search-border);
	}
	.thumbnails img.active {
		border-color: var(--brand-primary) !important;
		box-shadow: 0 0 0 3px rgba(37, 170, 225, 0.1) !important;
	}
	.woocommerce-per-page {
	    display: flex;
	    align-items: center;
	    gap: 10px;
	    select { 
	        height: 30px;
    		width: 60px;
    		background-color: var(--brand-primary-250) !important;
	    border:1px solid var(--search-border) !important;
	    border-radius: 5px;
	    color: var(--neutral-darkest);
	    transition: border-color 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease !important;
	    outline: none;
	    &:focus {
		outline: none !important;
		border-color: var(--brand-primary) !important;
		box-shadow: 0 0 0 3px rgba(37, 170, 225, 0.1) !important;
		}
	    }
	}
	.category_bottom_content {
		a {
		text-decoration: none;
		font-weight: 400;
		color: var(--brand-primary);
			&.c-button--brand-blue {
			font-weight: 400;
			color: var(--brand-primary);
			padding: 0;
			background-color: transparent;
			text-decoration: none;
			font-size: 16px;
		    text-transform: capitalize;
		    border: none;
		    box-shadow: none;
		    height: auto;
			&:hover {
				background-color: transparent;
			}
			}
		}
		h2 {
		font-size: 20px;
		}
	} 
	.search-bar {
		.form-group {
		  input {
			&.form-control {
			    display: flex;
			    width: 100%;
			    padding: 6px 12px;
			}
		  }
		}
        }
        .searchform-container {
        	    gap: 10px;
		    display: flex;
		    justify-content: center;
        	input {
		    border-radius: 5px;
		    min-height: 42px;
		    color: var(--neutral-darkest);
		    background-color: var(--brand-primary-250) !important;
		    border: 1px solid var(--search-border) !important;
		    transition: border-color 0.3s, box-shadow 0.3s, background-color 0.3s !important;
		    padding: 13px 12px;
		    height: 42px;
		    font-size: 14px;
		    min-width: 500px;
		    &:focus {
	  	        outline: none !important;
			border-color: var(--brand-primary) !important;
			box-shadow: 0 0 0 3px rgba(37, 170, 225, 0.1) !important;
		    }
        	}
        	.btn-green {
        		min-height: 42px;
			padding: 6px 24px;
        	}
        }
        .gform_wrapper.gravity-theme input[type=text], .gform_wrapper.gravity-theme input[type=email], .gform_wrapper.gravity-theme input[type=tel], .gform_wrapper.gravity-theme .ginput_complex .ginput_container_date select, .gform_wrapper.gravity-theme .gform_drop_area  {
        	 border-radius: 5px;
		    min-height: 42px;
		    color: var(--neutral-darkest);
		    background-color: var(--brand-primary-250) !important;
		    border: 1px solid var(--search-border) !important;
		    transition: border-color 0.3s, box-shadow 0.3s, background-color 0.3s !important;
		    padding: 13px 12px;
		    height: 42px;
		    font-size: 14px;
		     &:focus {
	  	        outline: none !important;
			border-color: var(--brand-primary) !important;
			box-shadow: 0 0 0 3px rgba(37, 170, 225, 0.1) !important;
		    }
		 
        }
        .gform_wrapper.gravity-theme .gform_drop_area {
        	height: auto !important;
        }
        .c-entry_content-search-form {
	    gap: 20px;
	    display: flex;
	    flex-direction: column;
        }
        .gform_wrapper.gravity-theme .gform_footer input, .gform_button_select_files {
         		min-height: 40px;
			padding: 8px 24px;
			font-size: 14px;
			display: inline-flex;
			gap: 8px;
			align-items: center;
			background-color: var(--brand-info);
			border: 2px solid var(--brand-info) !important;
			color: var(--color-white);
    			font-weight: 500;
    			box-shadow: var(--shadow-btn-info);
    			line-height: 150%;
    			border-radius: 5px;
    			transition: all 0.3s ease;
    			&:hover {
    			background-color: var(--color-white) !important;
    			color: var(--brand-secondary-700) !important;
    			border: 2px solid var(--brand-info) !important;
    			text-decoration: none;
    			}
        }
        .gform_wrapper.gravity-theme .gfield_label {
        	font-weight: 400 !important;
        }
     
	.sidebar {
	    background-color: #f6f9fc;
	    box-shadow: var(--shadow-badge);
	    border-radius: 20px;
	    padding: 20px;
		.archive-list,.category-list {
			padding-left: 0;
			list-style: none;
			li{
				color: var(--brand-primary);
				a {
				text-decoration: none;
				color: var(--brand-primary);
				}
			} 
	}
	.search-form {
		display: flex;
		flex-direction: column;
		gap: 20px;
		.search-field {
			    border-radius: 5px;
			    min-height: 42px;
			    color: var(--neutral-darkest);
			    background-color: var(--brand-primary-250) !important;
			    border: 1px solid var(--search-border) !important;
			    transition: border-color 0.3s, box-shadow 0.3s, background-color 0.3s !important;
			    padding: 13px 12px;
			    height: 42px;
			    font-size: 14px;
			    width: 100%;
			     &:focus {
		  	        outline: none !important;
				border-color: var(--brand-primary) !important;
				box-shadow: 0 0 0 3px rgba(37, 170, 225, 0.1) !important;
			    }
			}
		}
	}
	.blog-title {
		.container {
			padding-left: 0 !important;
			padding-right: 0 !important;
		}
	}
     
        .products {
		.product-card.product-col {
		    .product-name {
		    	        align-items: flex-start;
		    	        .name {
		    	        	text-align: left;
		    	        }
		    }
		    .btn-green {
    			&.btn-sm {
    			    color: var(--color-white) !important;
    			    &:hover {
    			    color: var(--brand-secondary-700) !important;
    			    }
    			}
		   }
		}
	}
	
        .product-container {
        	gap: 20px;
        	padding: 40px 0;
        	.product-card.product-col {
        		width: calc(33.33333333% - 14px);
        		.product-img {
			img {
				object-fit: contain;
			}}
        	}
        	.desc {
        		margin-bottom: 16px;
        		display: -webkit-box;
			-webkit-line-clamp: 3;
			-webkit-box-orient: vertical;
			overflow: hidden;
        	}
        	.swiper {
        		height: 100%;
        		width: 100%;
        	}
        	.swiper-slide {
    			display: flex;
        	}
        	.add_to_cart_button {
        	        min-height: 40px;
			padding: 8px 24px;
			font-size: 14px;
			display: inline-flex;
			gap: 8px;
			align-items: center;
			background-color: var(--brand-info);
			border: 2px solid var(--brand-info) !important;
			color: var(--color-white);
    			font-weight: 500;
    			box-shadow: var(--shadow-btn-info);
    			line-height: 150%;
    			border-radius: 5px;
    			transition: all 0.3s ease;
    			&:hover {
    			background-color: var(--color-white) !important;
    			color: var(--brand-secondary-700) !important;
    			border: 2px solid var(--brand-info) !important;
    			text-decoration: none;
    			}
    			
        	}
        }
        .blog-container {
        	.product-container {
        		&.block-container {
        			padding: 0 20px 0 0;
        		}
        		.product-card.product-col {
        			width: calc(50% - 10px);
        			border-radius: 0.75rem;
        			box-shadow: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -4px rgba(0, 0, 0, .1);
            			overflow: hidden;
        			        .product-img {
        			        padding: 0;
        			        border-radius: 0;
                			height: 200px;
                			margin: 0;
            				a {
            					height: 100%;
            					display: flex;
            					width: 100%;
            					img {
            						object-fit: cover;
            					}
            				}
        			}
        			.product-name {
        			    position: relative;
				    padding: 4rem 1.75rem 2rem;
				    .name {
					    margin: 0;
					    border-bottom: 1px solid rgb(211 211 211);
					    padding-bottom: 1.25rem;
					    font-size: 1.875rem;
					    line-height: 2.25rem;
					    font-weight: 400;
					    color: rgb(65 61 66);
					    display: block;
				    }
				    .product-price {
				    position: absolute;
				    left: 1.75rem;
				    top: 0;
				    margin-top: 0;
				    margin-bottom: 1.25rem;
				    display: inline-block;
				    border-bottom-right-radius: .5rem;
				    border-bottom-left-radius: .5rem;
				    background-color: var(--brand-info);
				    padding: .25rem 1rem;
				    font-size: 1rem;
				    line-height: 1.75rem;
				    letter-spacing: .05em;
				    font-weight: 400;
				    color: rgb(255 255 255);
				    
				    }
				    .desc {
					    margin: 0;
					    padding-top: 1.25rem;
					    line-height: 1.5;
					    color: rgb(107 101 108);
				    }
				    .add-btn {
				    	margin-top: 2rem;
				    }
        			}
        		}
        	} 
        }
        .woocommerce-cart .cross-sells .products.cart-product-list {
        	text-align: center;
    		flex-wrap: wrap;
        	.product-card.product-col {
        		&.col-lg-4 {
        			width: calc(50% - 10px);
        		}
        	}
        }
        .pagination {
        	display: flex;
    		justify-content: center;
    		padding: 20px 0;
    		 .nav-links {
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -2px rgba(0, 0, 0, .1);
        		display: flex;
    			white-space: nowrap;
    			border-radius: 4px;
    			overflow: hidden;
        		.page-numbers {
        			    height: 30px;
				    display: flex;
				    flex: 1 0 30px;
				    padding: 0 10px;
				    justify-content: center;
				    text-decoration: none;
				    font-size: 16px;
				    align-items: center;
				    &.current {
				    background-color: rgb(141 198 63);
				    color: var(--color-white);
					    &a {
					    	 background-color: rgb(37 170 225);
					    	 color: var(--color-white);
					    }
				    }
				    &.dots {
				    color: var(--brand-secondary-800);
				    }
				    &.prev,&.next {
				    &:hover {
				     	background-color: var(--brand-primary);
			    		color: var(--color-white);
				    }
				    	.sr-only {
				    	display: none;
				    	}
				    }
        		}
			a {
			&.page-numbers {
			&:hover {
			    background-color: var(--brand-primary);
			    color: var(--color-white);
			}
			 color: var(--brand-secondary-800);
			}
			
			}
        	}
        }
        .pagination-links {
        	.pagination-links_inner {
        		box-shadow: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -2px rgba(0, 0, 0, .1);
        		display: flex;
    			white-space: nowrap;
    			border-radius: 4px;
    			overflow: hidden;
        		.page-numbers {
        			    height: 30px;
				    display: flex;
				    flex: 1 0 30px;
				    justify-content: center;
				    text-decoration: none;
				    font-size: 16px;
				    align-items: center;
				    &.current {
				    background-color: rgb(141 198 63);
				    color: var(--color-white);
					    &a {
					    	background-color: rgb(37 170 225);
					    	 color: var(--color-white);
					    }
				    }
				    &.dots {
				    color: var(--brand-secondary-800);
				    }
				    &.prev,&.next {
				    &:hover {
				     background-color: var(--brand-primary);
			    		color: var(--color-white);
				    }
				    	.sr-only {
				    	display: none;
				    	}
				    }
        		}
			a {
			&.page-numbers {
			&:hover {
			    background-color: var(--brand-primary);
			    color: var(--color-white);
			}
			 color: var(--brand-secondary-800);
			}
			
			}
        	}
        }        	
        .c-entry_content-search-results {
        	.pagination-links {
        		justify-content: center;
        	}
        }
	.product-grid-main {
	.product-card.product-col {
		align-items: center;
	}
	}
	.post {
		.container {
			padding-left: 5px !important;
    			padding-right: 0 !important;
		}
	}
	.blog-detail-page {
			h1 {
			font-size: 30px;
			line-height: 1.5;
		}
		.wp-block-columns {
			margin-top: 0 !important;
			margin-bottom: 0 !important;
		}
		h2 {
			font-size: 30px;
			line-height: 1.5;
		}
		a {
			text-decoration: none;
			color: var(--brand-primary);
		}
		.wp-block-image img {
			border-radius: 8px;
		}
		.wp-block-button__link {
			min-height: 40px;
			padding: 8px 24px;
			font-size: 14px;
			display: inline-flex;
			gap: 8px;
			align-items: center;
			background-color: var(--brand-info);
			border: 2px solid var(--brand-info) !important;
			color: var(--color-white);
    			font-weight: 500;
    			box-shadow: var(--shadow-btn-info);
    			line-height: 150%;
    			border-radius: 5px;
    			transition: all 0.3s ease;
    			&:hover {
    			background-color: var(--color-white) !important;
    			color: var(--brand-secondary-700) !important;
    			border: 2px solid var(--brand-info) !important;
    			text-decoration: none;
    			}	
		}
		.wp-block-acf-card {
			padding: 60px 20px 20px;
			border-radius: 10px;
			position: relative;
			box-shadow: var(--shadow-card-blue) !important;
			p {
			color: var(--brand-secondary) !important;
			}
			
			.btn-green {
				color: var(--color-white);
			}
			.count {
				padding: 10px 15px;
				border-radius: 0 0 8px 8px;
				color: var(--color-white) !important;
				position: absolute;
				top: 0;
				left: 20px;
				background-color: var(--brand-info-600);
			}
			
		}
		img {
			width: 100%;
			height: auto;
		}
		a {
			img {
			width: 100%;
			height: auto;
			}
		}
		.wp-block-navigation {
			.wp-block-navigation-item {
				position: relative;
				padding: 5px 5px;
				color: var(--brand-primary);
				text-decoration: none;
			}
			.has-child .wp-block-navigation__submenu-container>.wp-block-navigation-item>.wp-block-navigation-item__content {
			padding: 0;
			}
			&:not(.has-background) .wp-block-navigation__submenu-container {
				border: 1px solid var(--brand-primary);
				border-radius: 8px;
				overflow: hidden !important;
				box-shadow: var(--shadow-card-blue) !important;
				.wp-block-navigation-item {
					font-size: 14px;
				}
				.wp-block-navigation-item:hover {
					color: var(--color-white);
					background-color: var(--brand-primary);
				}
			}
		} 
		
	}
.blog-detail-class {
	padding-top: 2.5rem;
    		padding-bottom: 2.5rem;
    		background-color: rgb(246 249 252);
	 	.blog-detail-grid {
	  		 display: grid;
	 		 grid-template-columns: repeat(12, minmax(0, 1fr));
	 	.blog-detail-left {
	 		grid-column: span 3 / span 3;
	 		padding: 2.5rem;
 			.btn-green-outline {
 				margin-top: 1rem !important;
 				color: var(--brand-secondary-700);
 				&:hover {
 					color: var(--color-white);
 				}
 			}
	 		h2 {
	 			color: rgb(65 61 66);
	 			line-height: 1.25;
	 			font-size: 2.25rem;
	 			font-family: Noe Display, serif;
	 		}
	 		.blog-detail-left-content {
	 			p {
	 				font-size: 1rem;
        				line-height: 1.5rem;
        				margin-top: 1.5rem !important;
    					margin-bottom: 1.5rem !important;
    					color: rgb(107 101 108);
	 			}
	 		}
	 	}
	 	
	 }
	 .blog-detail-slider-container{
	 	grid-column: span 9 / span 9;
	 	.c-card-slider_swiper {
	 		
	 		.blog-slider-relative {
	 			aspect-ratio: 4 / 3;
	 			a {
	 			display: flex;
	 			position: relative;
	 			height: 100%;
		 			img {
		 				object-fit: contain;
		 			}
	 			}
	 		}
	 		.swiper-button-next {
	 			svg {
	 				transform: rotate(180deg);
	 			}
	 		}
	 		.sr-only {
 			    position: absolute;
			    width: 1px;
			    height: 1px;
			    padding: 0;
			    margin: -1px;
			    overflow: hidden;
			    clip: rect(0, 0, 0, 0);
			    white-space: nowrap;
			    border-width: 0;
	 		}
	 		.swiper-slide {
	 			width: 24rem;
	 			box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.175);
	 			border-radius: .75rem;
	 		}
	 		.stroke-brand-blue {
    				stroke: var(--brand-primary);
			}
	 		.blog-slider-flex {
	 			padding-bottom: 2rem;
	 			padding-top: 4rem;
	 			padding-left: 1.75rem;
    				padding-right: 1.75rem;
    				flex-direction: column;
    				display: flex;
    				position: relative;
    				min-height: 360px;
    				.flex-grow {
				    flex-grow: 1;
				}
	 			.bg-brand-green {
	 				color: var(--color-white);
    					margin-bottom: 1.5rem !important;
    					margin-top: 0 !important;
    					top: 0 !important;
    					font-size: 1.125rem;
    					line-height: 1.75rem;
    					border-bottom-right-radius: .5rem;
					border-bottom-left-radius: .5rem;
					display: inline-block;
					position: absolute;
					background-color: var(--brand-info);
					padding: 5px 10px !important;
	 			}
	 			h3 {
	 				font-family: gotham;
 					padding-bottom: 1.5rem !important;
 					margin: 0 !important;
 					border-bottom: 1px solid #dee2e6 !important;
 					color: rgb(65 61 66);
 					
	 			}
	 			p {
	 				    padding-bottom: 0 !important;
	 				    padding-top: 1.5rem !important;
	 				    margin-bottom: 1.5rem !important;
	 				    margin: 0 !important;
	 				    color: rgb(107 101 108);
	 				    line-height: 1.5;
	 				    font-size: 14px;
	 				    display: -webkit-box;
				  	    -webkit-line-clamp: 4;
				  	    -webkit-box-orient: vertical;  
				  	    overflow: hidden;
				  	    text-overflow: ellipsis;
	 			}
	 			.self-end {
	 				gap: 3rem !important;
	 				align-self: flex-end;
	 				justify-content: space-between;
	 				align-items: center;
	 				width: 100%;
	 				display: flex;
	 				margin-top: 2rem;
	 				.btn-green {
	 					margin: 0 !important;
 						color: var(--color-white);
	 				}
	 			}
	 		}
	 	}
	 
	 }
}
.product-details{
	.product-color {
	ul.colors {
	display: flex;
	align-items: center;
	gap: 10px;
	padding-left: 6px;
	list-style: none;
	margin: 0;
	.color-swatch {
  	width: 16px;
  	height: 16px;
  	border-radius: 50%;
  	background-color: var(--swatch-color);
  	cursor: pointer;
  	border: none;
  	outline: 2px solid transparent;
  	outline-offset: 3px;
  	transition: outline-color 0.2s ease;
  	&.active {
  	outline-color: var(--swatch-color);
  	}
	}
	.add-color {
  	width: 26px;
  	height: 26px;
  	border: 1px solid var(--brand-secondary-200);
  	color: var(--brand-secondary);
  	display: flex;
  	align-items: center;
  	justify-content: center;
  	border-radius: 50%;
  	cursor: pointer;
	}
	}
	.hidden-select{
	display: none;
	}
	}
}
.upload-file-wrap {
	.upload-btn {
	    min-width: 115px;
	    display: flex;
	    justify-content: center;
	}
}
@media only screen and (max-width: 1199px) { 
	.product-grid-bottom {
    	flex-direction: column;
    	gap: 20px;
    }
       .product-grid-main {
    	.product-grid {
    		justify-content: center;
    	}
    }
    .woocommerce .cart-collaterals {
    	    display: flex;
	    flex-direction: column-reverse;
    }
    .woocommerce .cart-collaterals .cart_totals, .woocommerce-page .cart-collaterals .cart_totals {
    	width: 100%;
    }
    .woocommerce .cart-collaterals .cross-sells, .woocommerce-page .cart-collaterals .cross-sells {
    width: 100%;
    }
   .blog-detail-class {
     .blog-detail-grid {
		.blog-detail-left {
			grid-column: span 4 / span 4;
		}
     	        .blog-detail-slider-container {
     	        	grid-column: span 8 / span 8;
     	        }
     	     }
     }
}
@media only screen and (max-width: 991px) { 
.blog-detail-class {
	.blog-detail-grid {
		.blog-detail-left {
			grid-column: span 5 / span 5;
		}
     	        .blog-detail-slider-container {
     	        	grid-column: span 7 / span 7;
     	        }
     	   }
     }
}
@media only screen and (max-width: 768px) {
   .accordion-wrap { 
    	flex-direction: column;
    	}
    	.accordion-right {
    	 max-width: none;
    	 h5 {
    	 max-width: none;
    	 padding-right: 10px;
    	}
    }
    .category_bottom_content {
    	padding-top: 40px;
    }
    .body-content {
    	display: flex;
        flex-direction: column;
        gap: 30px;
    }
     .add-btn {
                display: flex;
                flex-direction: column;
                gap: 10px;
            }
      .product-container {
                    padding-right: 20px;
                    padding-left: 20px;
                    .add_to_cart_button {
                    	display: flex;
        		justify-content: center;
                    }
                    .overlay-btn {
                    	text-decoration: none;
                    }
        	.product-card.product-col {
        		width: calc(50% - 10px);
        	}
        }
        .searchform-container { 
        	input {
        	min-width: auto;
        	}
        }
        .blog-container {
        	.product-container {
        		&.block-container {
        			padding: 0 20px;
        		}
        		.product-card.product-col {
        			width: 100%;
        		}
        	}
        }
        .blog-title {
	    .container {
	    	padding: 20px 10px 10px 10px !important;
	    }
    	}
    	.cart_item td.product-name {
    		width: 100%;
    	}
    	.blog-detail-class {
	    	.blog-detail-grid {
			.blog-detail-left {
				grid-column: span 12 / span 12;
			}
	     	        .blog-detail-slider-container {
	     	        	grid-column: span 12 / span 12;
	     	        }
	     }
     	}
    }
    @media only screen and (max-width: 468px) { 
    		.slick-slider .element  {
    			display: flex;
    			justify-content: center;
    		}
                .product-container {
        	.product-card.product-col {
        		width: 100%;
        	}
        	}
        	.blog-container {
        	.product-container {
        		.product-card.product-col {
        			width: 100%;
        		}
        	} 
        }
        .woocommerce-cart .cross-sells .products.cart-product-list {
        	justify-content: center;
        	.product-card.product-col {
        		&.col-lg-4 {
        			width: 100%;
        		}
        	}
        }
    }