/*
 Theme Name:   Genesis Block Theme Child
 Theme URI:    https://bphac.com
 Description:  Child theme for Genesis Block Theme
 Author:       bphac
 Author URI:   https://bphac.com
 Template:     genesis-block-theme
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Text Domain:  genesis-block-theme-child
*/

/*
 * Add your custom styles below.
 * Parent theme styles are loaded automatically via functions.php.
 */


 /* style.css */

:root {
  /* Brand */
  --color-primary:     #fc5959;
  --color-secondary:   #e37a3b;
  --color-accent:      #fdf5e8;

  /* Neutrals */
  --color-white:       #ffffff;
  --color-black:       #0a0a0a;
  --color-gray-100:    #f4f4f5;
  --color-gray-300:    #d1d5db;
  --color-gray-500:    #6b7280;
  --color-gray-700:    #374151;

  /* Semantic (use these in your components) */
 /* --color-bg:          var(--color-white);
  --color-bg-muted:    var(--color-gray-100);
  --color-text:        var(--color-gray-700);
  --color-text-muted:  var(--color-gray-500);
  --color-border:      var(--color-gray-300);
  --color-link:        var(--color-primary);
  --color-link-hover:  var(--color-secondary);*/

  --btn-radius:        0.375rem;
  --btn-font-size:     16px;
  --btn-font-weight:   500;
  --btn-padding:       1.15rem 5rem;
  --btn-transition:    all 0.2s ease;
  --btn-letter-spacing: 0.02em;
}


/* ============================================================
   CONTAINER
   ============================================================ */
 
.container {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
}
 
.container-sm  { max-width: 640px;  margin-left: auto; margin-right: auto; }
.container-md  { max-width: 768px;  margin-left: auto; margin-right: auto; }
.container-lg  { max-width: 1024px; margin-left: auto; margin-right: auto; }
.container-xl  { max-width: 1280px; margin-left: auto; margin-right: auto; }
.container-2xl { max-width: 1536px; margin-left: auto; margin-right: auto; }
 
 
/* ============================================================
   DISPLAY
   ============================================================ */
 
.block        { display: block; }
.inline-block { display: inline-block; }
.inline       { display: inline; }
.hidden       { display: none; }
.flex         { display: flex; }
.inline-flex  { display: inline-flex; }
.grid         { display: grid; }
.inline-grid  { display: inline-grid; }
 
 
/* ============================================================
   FLEXBOX — Direction
   ============================================================ */
 
.flex-row         { flex-direction: row; }
.flex-row-reverse { flex-direction: row-reverse; }
.flex-col         { flex-direction: column; }
.flex-col-reverse { flex-direction: column-reverse; }
 
 
/* ============================================================
   FLEXBOX — Wrap
   ============================================================ */
 
.flex-wrap         { flex-wrap: wrap; }
.flex-nowrap       { flex-wrap: nowrap; }
.flex-wrap-reverse { flex-wrap: wrap-reverse; }
 
 
/* ============================================================
   FLEXBOX — Justify Content (main axis)
   ============================================================ */
 
.justify-start    { justify-content: flex-start; }
.justify-end      { justify-content: flex-end; }
.justify-center   { justify-content: center; }
.justify-between  { justify-content: space-between; }
.justify-around   { justify-content: space-around; }
.justify-evenly   { justify-content: space-evenly; }
  
 
/* ============================================================
   FLEXBOX — Align Items (cross axis)
   ============================================================ */
 
.items-start    { align-items: flex-start; }
.items-end      { align-items: flex-end; }
.items-center   { align-items: center; }
.items-baseline { align-items: baseline; }
.items-stretch  { align-items: stretch; }
 
 
/* ============================================================
   FLEXBOX — Align Content (multi-line)
   ============================================================ */
 
.content-start    { align-content: flex-start; }
.content-end      { align-content: flex-end; }
.content-center   { align-content: center; }
.content-between  { align-content: space-between; }
.content-around   { align-content: space-around; }
.content-evenly   { align-content: space-evenly; }
 
 
/* ============================================================
   FLEXBOX — Align Self
   ============================================================ */
 
.self-auto     { align-self: auto; }
.self-start    { align-self: flex-start; }
.self-end      { align-self: flex-end; }
.self-center   { align-self: center; }
.self-stretch  { align-self: stretch; }
.self-baseline { align-self: baseline; }
 
 
/* ============================================================
   FLEXBOX — Grow / Shrink / Basis
   ============================================================ */
 
.flex-1      { flex: 1 1 0%; }
.flex-auto   { flex: 1 1 auto; }
.flex-none   { flex: none; }
.flex-grow   { flex-grow: 1; }
.flex-shrink { flex-shrink: 1; }
.grow-0      { flex-grow: 0; }
.shrink-0    { flex-shrink: 0; }
 
 
/* ============================================================
   FLEXBOX — Order
   ============================================================ */
 
.order-first { order: -9999; }
.order-last  { order: 9999; }
.order-none  { order: 0; }
.order-1     { order: 1; }
.order-2     { order: 2; }
.order-3     { order: 3; }
.order-4     { order: 4; }
 
 
/* ============================================================
   CSS GRID — Template Columns
   ============================================================ */
 
.grid-cols-1  { grid-template-columns: repeat(1,  minmax(0, 1fr)); }
.grid-cols-2  { grid-template-columns: repeat(2,  minmax(0, 1fr)); }
.grid-cols-3  { grid-template-columns: repeat(3,  minmax(0, 1fr)); }
.grid-cols-4  { grid-template-columns: repeat(4,  minmax(0, 1fr)); }
.grid-cols-5  { grid-template-columns: repeat(5,  minmax(0, 1fr)); }
.grid-cols-6  { grid-template-columns: repeat(6,  minmax(0, 1fr)); }
.grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
.grid-cols-none { grid-template-columns: none; }
 
 
/* ============================================================
   CSS GRID — Template Rows
   ============================================================ */
 
.grid-rows-1    { grid-template-rows: repeat(1, minmax(0, 1fr)); }
.grid-rows-2    { grid-template-rows: repeat(2, minmax(0, 1fr)); }
.grid-rows-3    { grid-template-rows: repeat(3, minmax(0, 1fr)); }
.grid-rows-4    { grid-template-rows: repeat(4, minmax(0, 1fr)); }
.grid-rows-none { grid-template-rows: none; }
 
 
/* ============================================================
   CSS GRID — Column Span
   ============================================================ */
 
.col-auto    { grid-column: auto; }
.col-span-1  { grid-column: span 1  / span 1; }
.col-span-2  { grid-column: span 2  / span 2; }
.col-span-3  { grid-column: span 3  / span 3; }
.col-span-4  { grid-column: span 4  / span 4; }
.col-span-5  { grid-column: span 5  / span 5; }
.col-span-6  { grid-column: span 6  / span 6; }
.col-span-7  { grid-column: span 7  / span 7; }
.col-span-8  { grid-column: span 8  / span 8; }
.col-span-9  { grid-column: span 9  / span 9; }
.col-span-10 { grid-column: span 10 / span 10; }
.col-span-11 { grid-column: span 11 / span 11; }
.col-span-12 { grid-column: span 12 / span 12; }
.col-span-full { grid-column: 1 / -1; }


.col-start-6	    { grid-column-start: 6; }
.col-start-7	    { grid-column-start: 7; }
.col-start-8	    { grid-column-start: 8; }
.col-start-9	    { grid-column-start: 9; }

.col-end-10	        { grid-column-end: 10; }
.col-end-11	        { grid-column-end: 11; }
.col-end-12	        { grid-column-end: 12; }
.col-end-13	        { grid-column-end: 13; }
 
/* ============================================================
   CSS GRID — Row Span
   ============================================================ */
 
.row-auto      { grid-row: auto; }
.row-span-1    { grid-row: span 1 / span 1; }
.row-span-2    { grid-row: span 2 / span 2; }
.row-span-3    { grid-row: span 3 / span 3; }
.row-span-4    { grid-row: span 4 / span 4; }
.row-span-full { grid-row: 1 / -1; }
 
 
/* ============================================================
   CSS GRID — Auto Flow
   ============================================================ */
 
.grid-flow-row         { grid-auto-flow: row; }
.grid-flow-col         { grid-auto-flow: column; }
.grid-flow-dense       { grid-auto-flow: dense; }
.grid-flow-row-dense   { grid-auto-flow: row dense; }
.grid-flow-col-dense   { grid-auto-flow: column dense; }
 
 
/* ============================================================
   CSS GRID — Justify / Align (grid context)
   ============================================================ */
 
.justify-items-start    { justify-items: start; }
.justify-items-end      { justify-items: end; }
.justify-items-center   { justify-items: center; }
.justify-items-stretch  { justify-items: stretch; }
 
.justify-self-auto      { justify-self: auto; }
.justify-self-start     { justify-self: start; }
.justify-self-end       { justify-self: end; }
.justify-self-center    { justify-self: center; }
.justify-self-stretch   { justify-self: stretch; }
 
.place-items-center     { place-items: center; }
.place-items-start      { place-items: start; }
.place-items-end        { place-items: end; }
.place-content-center   { place-content: center; }
 
 
/* ============================================================
   GAP
   ============================================================ */
 
.gap-0    { gap: 0; }
.gap-1    { gap: 0.25rem; }
.gap-2    { gap: 0.5rem; }
.gap-3    { gap: 0.75rem; }
.gap-4    { gap: 1rem; }
.gap-5    { gap: 1.25rem; }
.gap-6    { gap: 1.5rem; }
.gap-8    { gap: 2rem; }
.gap-10   { gap: 2.5rem; }
.gap-12   { gap: 3rem; }
.gap-16   { gap: 4rem; }
 
/* Column gap only */
.gap-x-0  { column-gap: 0; }
.gap-x-1  { column-gap: 0.25rem; }
.gap-x-2  { column-gap: 0.5rem; }
.gap-x-4  { column-gap: 1rem; }
.gap-x-6  { column-gap: 1.5rem; }
.gap-x-8  { column-gap: 2rem; }
 
/* Row gap only */
.gap-y-0  { row-gap: 0; }
.gap-y-1  { row-gap: 0.25rem; }
.gap-y-2  { row-gap: 0.5rem; }
.gap-y-4  { row-gap: 1rem; }
.gap-y-6  { row-gap: 1.5rem; }
.gap-y-8  { row-gap: 2rem; }
 
 
/* ============================================================
   RESPONSIVE BREAKPOINTS
   Mobile-first. Matches common WP/Tailwind breakpoints.
 
   sm:  640px
   md:  768px
   lg:  1024px
   xl:  1280px
   ============================================================ */
 
/* --- sm (640px+) ------------------------------------------ */
@media (min-width: 640px) {
  .sm\:flex        { display: flex; }
  .sm\:grid        { display: grid; }
  .sm\:hidden      { display: none; }
  .sm\:block       { display: block; }
 
  .sm\:flex-row    { flex-direction: row; }
  .sm\:flex-col    { flex-direction: column; }
 
  .sm\:grid-cols-1  { grid-template-columns: repeat(1, minmax(0, 1fr)); }
  .sm\:grid-cols-2  { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sm\:grid-cols-3  { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sm\:grid-cols-4  { grid-template-columns: repeat(4, minmax(0, 1fr)); }
 
  .sm\:col-span-1   { grid-column: span 1  / span 1; }
  .sm\:col-span-2   { grid-column: span 2  / span 2; }
  .sm\:col-span-full { grid-column: 1 / -1; }
 
  .sm\:gap-4  { gap: 1rem; }
  .sm\:gap-6  { gap: 1.5rem; }
  .sm\:gap-8  { gap: 2rem; }
 
  .sm\:justify-between { justify-content: space-between; }
  .sm\:justify-center  { justify-content: center; }
  .sm\:items-center    { align-items: center; }
}
 
/* --- md (768px+) ------------------------------------------ */
@media (min-width: 768px) {
  .md\:flex        { display: flex; }
  .md\:grid        { display: grid; }
  .md\:hidden      { display: none; }
  .md\:block       { display: block; }
 
  .md\:flex-row    { flex-direction: row; }
  .md\:flex-col    { flex-direction: column; }
 
  .md\:grid-cols-1  { grid-template-columns: repeat(1, minmax(0, 1fr)); }
  .md\:grid-cols-2  { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .md\:grid-cols-3  { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .md\:grid-cols-4  { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .md\:grid-cols-6  { grid-template-columns: repeat(6, minmax(0, 1fr)); }
 
  .md\:col-span-1   { grid-column: span 1  / span 1; }
  .md\:col-span-2   { grid-column: span 2  / span 2; }
  .md\:col-span-3   { grid-column: span 3  / span 3; }
  .md\:col-span-4   { grid-column: span 4  / span 4; }
  .md\:col-span-full { grid-column: 1 / -1; }
 
  .md\:gap-4  { gap: 1rem; }
  .md\:gap-6  { gap: 1.5rem; }
  .md\:gap-8  { gap: 2rem; }
  .md\:gap-12 { gap: 3rem; }
 
  .md\:justify-between { justify-content: space-between; }
  .md\:justify-center  { justify-content: center; }
  .md\:items-center    { align-items: center; }
  .md\:items-start     { align-items: flex-start; }
}
 
/* --- lg (1024px+) ----------------------------------------- */
@media (min-width: 1024px) {
  .lg\:flex        { display: flex; }
  .lg\:grid        { display: grid; }
  .lg\:hidden      { display: none; }
  .lg\:block       { display: block; }
 
  .lg\:flex-row    { flex-direction: row; }
  .lg\:flex-col    { flex-direction: column; }
 
  .lg\:grid-cols-1  { grid-template-columns: repeat(1,  minmax(0, 1fr)); }
  .lg\:grid-cols-2  { grid-template-columns: repeat(2,  minmax(0, 1fr)); }
  .lg\:grid-cols-3  { grid-template-columns: repeat(3,  minmax(0, 1fr)); }
  .lg\:grid-cols-4  { grid-template-columns: repeat(4,  minmax(0, 1fr)); }
  .lg\:grid-cols-5  { grid-template-columns: repeat(5,  minmax(0, 1fr)); }
  .lg\:grid-cols-6  { grid-template-columns: repeat(6,  minmax(0, 1fr)); }
  .lg\:grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
 
  .lg\:col-span-1   { grid-column: span 1  / span 1; }
  .lg\:col-span-2   { grid-column: span 2  / span 2; }
  .lg\:col-span-3   { grid-column: span 3  / span 3; }
  .lg\:col-span-4   { grid-column: span 4  / span 4; }
  .lg\:col-span-6   { grid-column: span 6  / span 6; }
  .lg\:col-span-8   { grid-column: span 8  / span 8; }
  .lg\:col-span-full { grid-column: 1 / -1; }
 
  .lg\:gap-4  { gap: 1rem; }
  .lg\:gap-6  { gap: 1.5rem; }
  .lg\:gap-8  { gap: 2rem; }
  .lg\:gap-12 { gap: 3rem; }
  .lg\:gap-16 { gap: 4rem; }
 
  .lg\:justify-between { justify-content: space-between; }
  .lg\:justify-center  { justify-content: center; }
  .lg\:items-center    { align-items: center; }
  .lg\:items-start     { align-items: flex-start; }
}
 
/* --- xl (1280px+) ----------------------------------------- */
@media (min-width: 1280px) {
  .xl\:grid-cols-3  { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .xl\:grid-cols-4  { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .xl\:grid-cols-5  { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .xl\:grid-cols-6  { grid-template-columns: repeat(6, minmax(0, 1fr)); }
 
  .xl\:col-span-4   { grid-column: span 4  / span 4; }
  .xl\:col-span-6   { grid-column: span 6  / span 6; }
  .xl\:col-span-8   { grid-column: span 8  / span 8; }
 
  .xl\:gap-8  { gap: 2rem; }
  .xl\:gap-12 { gap: 3rem; }
  .xl\:gap-16 { gap: 4rem; }
}


/* ============================================================
   BUTTONS
   ============================================================ */


/* ------------------------------------------------------------
   Base
   ------------------------------------------------------------ */

.btn_primary,
.btn_secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: var(--btn-padding);
  font-size: var(--btn-font-size);
  font-weight: var(--btn-font-weight);
  letter-spacing: var(--btn-letter-spacing);
  line-height: 1;
  border-radius: var(--btn-radius);
  border: 2px solid transparent;
  cursor: pointer;
  text-decoration: none;
  text-transform: uppercase;
  transition: var(--btn-transition);
  white-space: nowrap;
}

/* ------------------------------------------------------------
   Primary
   ------------------------------------------------------------ */

.btn_primary {
  background-color: var(--color-primary);
  color: var(--color-white);
  border-color: var(--color-primary);
}

.btn_primary:hover {
  background-color: transparent;
  color: var(--color-primary);
}

/* ------------------------------------------------------------
   Secondary
   ------------------------------------------------------------ */

.btn_secondary {
  background-color: transparent;
  color: var(--color-primary);
  border-color: var(--color-primary);
}

.btn_secondary:hover {
  background-color: var(--color-primary);
  color: var(--color-white);
}

/* ------------------------------------------------------------
   Modifier — Fennel Outline (your existing modifier)
   ------------------------------------------------------------ */

.--btn-fennel-outline {
  border-color: var(--color-accent);
  color: var(--color-accent);
  background-color: transparent;
}

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

/* ------------------------------------------------------------
   Sizes
   ------------------------------------------------------------ */

.btn-sm {
  padding: 0.5rem 1rem;
  font-size: 0.8125rem;
}

.btn-lg {
  padding: 1rem 2rem;
  font-size: 1.0625rem;
}

.btn-full {
  width: 100%;
}

/* ------------------------------------------------------------
   Disabled
   ------------------------------------------------------------ */

.btn_primary:disabled,
.btn_secondary:disabled {
  opacity: 0.5;
  pointer-events: none;
  cursor: not-allowed;
}


/* Universal */
.titles-wrap.has-description {
    display: none;
}


/* Hero Components */

/* Hero Full */

.hero-full,
.hero-cols {
   background-color: var(--color-accent);
   border-radius: 0 0 24px 24px;
   padding: 0 0 10rem;
    
   & .hero_banner {
        max-width: 1800px;
        margin: 0 auto;
        padding: 10rem 5rem;
    }

    & .hero-banner_col-left {
        font-size: 64px;
        font-weight: 600;
        line-height: 72px;
        max-width: 640px;
    }

    & .hero-banner_col-right {
      font-size: 20px;
    }

    & .hero-banner .col-right__cta-group {
       margin-top: 5rem;
    }

    
}

.col-right__cta-group {
   margin-top: 6rem;
}

.hero-cols {
   /* height: 960px; */
   & .hero-cols_main {
      margin: 0 auto;
      max-width: 1800px;
      padding: 0 5rem;
      width: 100%; 
      & .hero-cols_main-wrap {
          background-color: var(--color-primary);
          border-radius: 24px;
          padding: 5rem;
         & .hero-cols_main-content {
            max-width: 640px;
            padding-right: 5rem;
            width: 100%;
            * {
               color: #ffffff;
            }
            & .hero-cols_main-head {
               & .two-cols_title {
                     font-size: 40px;
                     font-weight: 600;
                     line-height: 48px;
                     margin-bottom: 2rem;
               }
            }
         }
         & .hero-cols_main-feat {
            border-radius: 12px;
            height: 100%;
            min-height: 600px;
            overflow: hidden;
            position: relative;
            width: 100%;
            & img {
               height: 100%;
               object-fit: cover;
               position: absolute;
               width: 100%;
            }
         }
      }
   }
 
}



.hero-main_featured {
  position: relative;
  width: 100%;
  min-height: 700px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 1rem;
  overflow: hidden;
  max-width: 1800px;
        margin: 0 auto;

  /* Fallback color while image loads */
  background-color: #0a0a0a;

  & .hero-main_featured__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    z-index: 0;
  }

  /* Dark overlay on top of image */
  &::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.60);
    z-index: 1;
  }

  & .hero-main_content {
   position: relative;
        z-index: 2;
        text-align: center;
        max-width: 1060px;
        padding: 4rem 2rem;
        color: #fff;
        font-size: 48px;
        line-height: 56px;


    & p {
      color: var(--color-white);
      font-size: 1.375rem;
      font-weight: 600;
      line-height: 1.5;
      margin-bottom: 2rem;
    }
    & .hero-main_cta {
      margin-top: 4rem;
    }
    & .hero-main_cta-content {
      font-size: 18px;
    }
  }
}


/*=======================
Page Templates
=======================*/

.two-cols {
   margin: 0 auto;
   max-width: 1800px;
   padding: 10rem 2rem;
   width: 100%; 

   & .two-cols_wrap {
      & .two-cols_content {
         margin: 5rem 0;
         & .two-cols_head {
            & .two-cols_title {
               font-size: 40px;
               line-height: 48px;
               margin-bottom: 3rem;
            }
         }
      }
      & .two-cols_feat {
         & .two-cols_feat-wrap {
            border-radius: 12px;
            height: 100%;
            min-height: 600px;
            overflow: hidden;
            position: relative;
            width: 100%;
            & img {
               height: 100%;
               object-fit: cover;
               position: absolute;
               width: 100%;
            }
         }
      }
      & > div {
         
      }
   }
}


.full-col {
   margin: 0 auto;
   max-width: 1800px;
   padding: 10rem 2rem;
   width: 100%; 
   & .full-col_title {
      font-size: 48px;
      font-weight: 600;
   }
   & .full-col_summ {
      max-width: 960px;
      margin-top: 3rem;
      width: 100%;
   }
}


.accord {
   margin: 0 auto;
   max-width: 1800px;
   padding: 10rem 2rem;
   width: 100%; 
   & .accord-info-block {
      margin-bottom: 5rem;
      & .accord-info-block_wrap {
         background-color: rgba(252 89 89 / 35%);
         width: fit-content;
         gap: 6rem;
         padding: 1rem 2rem;
         border-radius: 4px;
         & .accord-info-block_title {
            font-weight: 500;
            font-size: 16px;
         }
         & .accord-info-block_count {
            font-size: 16px;
         }
      }
   }
   & .accord-content {
      & .accord-items {
         & .accord-item {
            border-bottom: 1px solid rgba(0 0 0 / 50%);
            & .accord-btn_right-title {
               font-size: 24px;
               font-weight: 500;
               line-height: 32px;
               position: relative;
               z-index: 2;
               transition: all ease-in-out .5s;
            }
            & .accord-btn_right-icon {
               position: relative;
               z-index: 2;
               transition: all ease-in-out .5s;
               & span {
                  background-color: var(--color-primary);
                  width: 45px;
                  height: 45px;
                  border-radius: 100rem;
                  transition: all ease-in-out .5s;
               }
            }
            & .accord-item_trigger {
               padding: 3rem 2rem;
               position: relative;
               &::after {
                  content: '';
                  bottom: 0;
                  width: 100%;
                  height: 0%;
                  background: var(--color-primary);
                  left: 0;
                  position: absolute;
                  transition: all ease-in-out .5s;
               }
               &:hover {
                  &::after {
                     height: 100%;
                  }
                  * {
                     color: #ffffff;
                     transition: color ease-in-out .5s;
                  }
                  & .accord-btn_right-icon {
                    
                     & span {
                        background-color: #ffffff;
                        transition: all ease-in-out .5s;
                        svg path {
                           fill: var(--color-primary);
                        }
                       
                     }
                  }
               }
               & .accord-btn_left {
                  position: relative;
                  z-index: 2;
               }
            }
            & .accord-item_inner {
               padding: 3rem 0;
            }
         }
      }
   }
}


.accord-split {
   margin: 0 auto;
   max-width: 1800px;
   padding: 10rem 5rem;
   width: 100%; 
   & .accord-split_feat {
      height: 100%;
      & .accord-split_feat-wrap {
         border-radius: 12px;
         height: 100%;
         min-height: 600px;
         overflow: hidden;
         position: relative;
         width: 100%;
         & img {
            height: 100%;
            object-fit: cover;
            position: absolute;
            width: 100%;
         }
      }
   }
   & .accord-split_main {
      padding: 0 5rem;
      & .accord-split_main-title {
         font-size: 48px;
         font-weight: 600;
         line-height: 56px;
         margin-bottom: 5rem;
      }
      & .accord-split_main-items {
         & .accord-item {
            border-bottom: 1px solid rgba(0 0 0 / 50%);
            & .accord-item_trigger {
               padding: 3rem 0;
               & .accord-slit_item-title {
               font-size: 24px;
               font-weight: 500;
               line-height: 32px;
               position: relative;
               z-index: 2;
               transition: all ease-in-out .5s;
               }
               & .accord-split_item-icon {
                position: relative;
               z-index: 2;
               transition: all ease-in-out .5s;
               & span {
                  background-color: var(--color-primary);
                  width: 45px;
                  height: 45px;
                  border-radius: 100rem;
                  transition: all ease-in-out .5s;
               }
               }
            }
         }
      }
   }
}