.metric-card {
            background-color: white;
            border-radius: 12px;
            padding: 25px;
            margin-bottom: 30px;
            box-shadow: 0 6px 15px rgba(0,0,0,0.08);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            height: 100%; /* Ensure cards have equal height */
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }
        .metric-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 25px rgba(0,0,0,0.15);
        }
        .metric-icon {
            font-size: 2.5rem;
            margin-bottom: 15px;
            display: block; /* Ensures icon is on its own line */
        }
        .metric-title {
            font-size: 1.1rem;
            color: #6c757d;
            margin-bottom: 5px;
            font-weight: 500;
        }
        .metric-value {
            font-size: 2.2rem;
            font-weight: 700;
            color: #343a40;
            line-height: 1.1; /* Adjust line height for large numbers */
            margin-bottom: 10px;
        }
        .metric-percentage {
            font-size: 0.9rem;
            color: #dc3545; /* Red for percentage */
            font-weight: 500;
        }
        .metric-percentage.green {
            color: #28a745; /* Green for positive percentage */
        }
        .btn-learn-more {
            background-color: #007bff;
            border-color: #007bff;
            color: white;
            border-radius: 8px;
            padding: 8px 15px;
            align-self: flex-end; /* Pushes button to the bottom right */
        }
        .btn-learn-more:hover {
            background-color: #0056b3;
            border-color: #0056b3;
        }
        /* Custom colors for icons/borders */
        .icon-green { color: #28a745; }
        .icon-blue { color: #007bff; }
        .icon-teal { color: #17a2b8; }
        .icon-orange { color: #fd7e14; }
        .icon-purple { color: #6f42c1; }

        /* Card border top colors for visual separation (optional) */
        .card-border-green { border-top: 5px solid #28a745; }
        .card-border-blue { border-top: 5px solid #007bff; }
        .card-border-teal { border-top: 5px solid #17a2b8; }
        .card-border-orange { border-top: 5px solid #fd7e14; }
        .card-border-purple { border-top: 5px solid #6f42c1; }



/* ===========================
   🎨 Variables globales
=========================== */
:root {
  --green-light: hsl(123deg, 47%, 74%);
  --green-dark: #2e7f32;
  --blue-light: hsl(210deg, 47%, 74%);
  --blue-dark: #2e577f;
  --orange-light: hsl(34deg, 93%, 77%);
  --orange-dark: #b66a07;
  --purple-light: hsl(231deg, 44%, 76%);
  --purple-dark: #334084;
  --yellow-light: hsl(54deg, 76%, 79%);
  --yellow-dark: #afa018;
  --brown-light: hsl(20deg, 41%, 69%);
  --brown-dark: #68402c;
  --red-light: hsl(0deg, 59%, 76%);
  --red-dark: #922626;
  --pink-light: hsl(295deg, 42%, 72%);
  --pink-dark: #6e2f74;
  --white-light: hsl(0deg, 0%, 100%);
  --white-dark: #999999;

  /* 🌍 Taille principale du cercle */
  --orbit-radius: 20rem;
} 

/* ===========================
   🪐 Styles généraux orbit
=========================== */

.gva-orbital-navigation.style-2 {
    display: grid;
    min-height: 950px;
    place-content: center;
    overflow: hidden;
}
.gva-orbital-navigation.style-1 {
    display: grid;
    min-height: 810px;
    place-content: center;
    overflow: hidden;
}
.orbit {
  --size: calc(var(--orbit-radius) * 2);
  --speed: 120s;
}

.orbit .center-image {
  width: var(--size);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  z-index: 10;
  display: flex;
  justify-content: center;
}

.orbit .center-image img {
  position: absolute;
  transition: opacity 500ms;
}

.orbit .center-image img:not(:first-child):hover {
  opacity: 0;
}

.orbit ul {
  display: grid;
  place-items: center;
  width: var(--size);
  height: var(--size);
  position: relative;
  list-style: none;
  transform-origin: center;
  animation: orbit var(--speed) linear infinite;
}

.orbit ul:hover {
  animation-play-state: paused;
  --orbit-play-state: paused;
}

/* ===========================
   🟢 Cercles orbitaux
=========================== */
.orbit li {
  cursor: pointer;
  position: absolute;
  width: 8rem;
  aspect-ratio: 1/1;
  border-radius: 50%;
  font-weight: 500;
  color: var(--white-light);
  text-align: center;
  display: grid;
  place-items: center;

  /* ✅ Texte responsive */
  font-size: clamp(0.6rem, 1.2vw, 1rem);
  padding: 0.5rem;
  word-break: break-word;
  text-wrap: balance;
}

.orbit li:hover {
  --throb-play-state: paused;
}

/* Délai d’animation */
.orbit li:nth-child(1) { --throb-delay: 0ms; }
.orbit li:nth-child(2) { --throb-delay: 500ms; }
.orbit li:nth-child(3) { --throb-delay: 1000ms; }
.orbit li:nth-child(4) { --throb-delay: 1500ms; }
.orbit li:nth-child(5) { --throb-delay: 2000ms; }
.orbit li:nth-child(6) { --throb-delay: 2500ms; }
.orbit li:nth-child(7) { --throb-delay: 3000ms; }
.orbit li:nth-child(8) { --throb-delay: 3500ms; }

.orbit li > * {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  border-radius: inherit;
  position: absolute;
  animation: orbit var(--speed) linear reverse infinite, throb 1s var(--throb-delay) ease-in-out infinite alternate;
  animation-play-state: var(--orbit-play-state, running), var(--throb-play-state, running);
}

.orbit li > div {
  background-color: var(--icon-bg);
}

.orbit li > p {
  background: var(--text-bg);
  transition: opacity 500ms;
  opacity: 0;
}

.orbit li:hover > p {
  opacity: 1;
}

/* ===========================
   🎨 Positions orbitantes
=========================== */
.orbit li:nth-child(1) {
  --icon-bg: var(--blue-light);
  --text-bg: var(--blue-dark);
  /* 12h → en haut */
  transform: translate(0, calc(var(--orbit-radius) * -1));
}

.orbit li:nth-child(2) {
  --icon-bg: var(--green-light);
  --text-bg: var(--green-dark);
  /* 15h → à droite */
  transform: translate(var(--orbit-radius), 0);
}

.orbit li:nth-child(3) {
  --icon-bg: var(--pink-light);
  --text-bg: var(--pink-dark);
  /* 18h → en bas */
  transform: translate(0, var(--orbit-radius));
}

.orbit li:nth-child(4) {
  --icon-bg: var(--red-light);
  --text-bg: var(--red-dark);
  /* 21h → à gauche */
  transform: translate(calc(var(--orbit-radius) * -1), 0);
}




/* ===========================
   🔄 Animations
=========================== */
@keyframes orbit {
  100% {
    rotate: 1turn;
  }
}
@keyframes throb {
  100% {
    scale: 1.05;
  }
}

/* ===========================
   🧩 Tabs (optionnel)
=========================== */
.orbit .tab-content {
  display: none;
}
.orbit .tab-content.active {
  display: block;
  width: 67%;
}

.orbit .center-image {
  position: relative;
  z-index: 10;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  width: var(--size);
}

/* ===========================
   📱 Responsive
=========================== */
@media (max-width: 992px) {
  :root {
    --orbit-radius: 15rem;
  }
  .orbit li {
    width: 6rem;
  }
}

@media (max-width: 768px) {
  :root {
    --orbit-radius: 11rem;
  }
  .orbit li {
    width: 5rem;
  }
}

@media (max-width: 576px) {
  :root {
    --orbit-radius: 8rem;
  }
  .orbit li {
    width: 4rem;
  }
}


/*/===========================
   🔢 circle  Animation
   ///////////////////////////// */

   /* Conteneur circulaire */
.gva-orbital-navigation.style-2 .circle {
    position: relative;
    width: 80vw;
    height: 80vw;
    max-width: 700px;
    max-height: 700px;
    border-radius: 50%;
    margin: 40px auto;
    box-shadow: 0 20px 40px rgba(0,0,0,0.3), 0 10px 20px rgba(0,0,0,0.2);
	border : 40px solid #f7f7f7;
}
.gva-orbital-navigation.style-2  .wrap-circle {
    position: relative;
    width: 80vw;
    height: 80vw;
    max-width: 700px;
    max-height: 700px;
    border-radius: 50%;
    margin: 40px auto;
	display: inline-table;

}
/* Contenu central */
.gva-orbital-navigation.style-2 .content {
    position: absolute;
    width: 65%;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    font-size: 21px;
    font-weight: 500;
    opacity: 0;
    transition: opacity 0.5s, transform 0.5s;
}

/* Wrapper pour positionner l’orbite */
.gva-orbital-navigation.style-2 .orbit-wrapper {
    position: absolute;
}

/* Positions exactes */
.gva-orbital-navigation.style-2 .orbit1 { top: -100px; left: 47%; transform: translateX(-50%); }
.gva-orbital-navigation.style-2 .orbit2 { top: 38%; left: 94%; }
.gva-orbital-navigation.style-2 .orbit3 { top: 94%; right: 33%; }
.gva-orbital-navigation.style-2 .orbit4 { top: 50%; left: -120px; transform: translateY(-50%); }
.gva-orbital-navigation.style-2 .orbit5 { top: 50%; right: -80px; transform: translateY(-50%); }
.gva-orbital-navigation.style-2 .orbit6 { bottom: -15px; left: 0; transform: translateY(-50%); }
.gva-orbital-navigation.style-2 .orbit7 { bottom: -15px; right: 0; transform: translateY(-50%); }
.gva-orbital-navigation.style-2 .orbit8 { bottom: -80px; left: 50%; transform: translateX(-50%); }

/* Orbites elles-mêmes : scale + opacity */
.gva-orbital-navigation.style-2 .orbit {
    width: 160px;
    height: 160px;
    border-radius: 25%;
    border: 1px solid #38A856;
    display: inline-grid;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    background-color: #38A856;
    color: #fff;
    opacity: 0;
    transform: scale(0);
    transition: transform 0.8s cubic-bezier(0.68,-0.55,0.27,1.55), opacity 0.8s;
}

/* Orbites actives au clic */
.gva-orbital-navigation.style-2 .orbit.active {
	  background-color: #28d155;
	  box-shadow: 0 0 20px rgba(40,290,85,0.6);

}

/* Animation : conserve la position parent */
.gva-orbital-navigation.style-2 .orbit.animate {
    opacity: 1;
    transform: scale(1);
		  padding-left: 5%;
	  line-height: 20px;
	  font-size: 16px;
	  padding-right: 17%;
}
.gva-orbital-navigation.style-2  li {
	    list-style-type: circle;
    text-align: left;
    font-size: 18px;
    font-weight: 500;
    line-height: 25px;
	padding-bottom:10px;
}
/* Contenus cachés pour tabs */
.gva-orbital-navigation.style-2 .tab-content { display: none; }

/* Responsive */
@media (max-width: 768px) {
    .gva-orbital-navigation.style-2 .circle{
        display: flex;
        flex-direction: column;
        row-gap: 50px;
    }
    .gva-orbital-navigation.style-2 .circle, .wrap-circle{
        box-shadow: none;
    }

    .gva-orbital-navigation.style-2 .orbit,.orbit-wrapper{
        position: static;
        transform: none;
    }

    .gva-orbital-navigation.style-2 .content{
        position: static;
        transform: none;
    }

    .gva-orbital-navigation.style-2 .tab-content{
        display: block;
        font-size: 21px;
        font-weight: 500;
        margin-top: 50px;
        text-align: center;
    }

    .gva-orbital-navigation.style-2 .orbit-wrapper{
        display: flex;
        flex-direction: column;
        align-items: center;
    }
}


/********* accrodian style 2 ***********/
/* ============================================
   Style 1: Bootstrap 5 Accordion - Design Custom
   ============================================ */

 /* ============================================
           Global Styles
           ============================================ */

        /* ============================================
           Accordion Container
           ============================================ */
        .accordion-style-1 {
            --bs-accordion-bg: transparent;
            --bs-accordion-border-color: transparent;
            --bs-accordion-btn-active-bg: #fff;
            --bs-accordion-btn-active-border-color: transparent;
        }

        /* ============================================
           Accordion Items
           ============================================ */
        .accordion-style-1 .accordion-item {
            background-color: transparent;
            border: none;
            box-shadow: none;
            border-radius: 0px;
            margin-bottom: 11px;
            position: relative;
            overflow: hidden;
			padding-left: 20px;
        }

        /* ============================================
           Accordion Header/Button
           ============================================ */
        .accordion-style-1 .accordion-header {
            padding: 0;
            border-radius: 0px;
            border: none;
            background-color: #fff;
        }

        .accordion-style-1 .accordion-button {
            color: #9DC44C !important;
            display: block;
            border: none;
            padding: 0px 20px 0px 40px !important;
            font-size: 20px;
            background-color: #fff;
            font-weight: 600;
            position: relative;
            box-shadow: none !important;
            transition: all 0.1s ease 0;
            border-radius: 0px;
            text-align: left;
        }

        /* Bouton au hover */
        .accordion-style-1 .accordion-button:hover {
            background-color: #fff;
            color: #9DC44C !important;
        }

        /* Bouton actif/ouvert */
        .accordion-style-1 .accordion-button:not(.collapsed) {
            color: #9DC44C !important;
            background-color: #fff;
            box-shadow: none !important;
        }

        /* Focus state */
        .accordion-style-1 .accordion-button:focus {
            box-shadow: none;
            border-color: transparent;
            background-color: #fff;
            color: #9DC44C !important;
        }

        /* ============================================
           Accordion Button Icons (Pseudo-element)
           ============================================ */
        .accordion-style-1 .accordion-button::after {
            content: "\f068"; /* Icône moins (−) FontAwesome */
            font-family: "Font Awesome 6 Free", sans-serif;
    text-align: center;
    position: absolute;
    left:-20px;
    top: 10px;
    color:#9DC44C !important;
    background-color:#fff;
    border: 5px solid #fff;
    font-size: 15px;
    width: 40px;
    height:40px;
    line-height: 30px;
    border-radius: 50%;
    transition:all 0.3s ease 0s;
    background-image:unset;
        }

        /* Bouton collapsed (fermé) - affiche l'icône + */
        .accordion-style-1 .accordion-button.collapsed::after {
            content: "\f067"; /* Icône plus (+) FontAwesome */
        }

        /* Rotation au hover */
        .accordion-style-1 .accordion-button:hover::after,
        .accordion-style-1 .accordion-button.collapsed:hover::after {
            transform: translateY(0%) rotate(360deg);
        }

        /* ============================================
           Accordion Body (Contenu)
           ============================================ */
        .accordion-style-1 .accordion-body {
            background-color: #fdfdfd;
            color: #000;
            line-height: 25px;
            padding: 10px 25px 20px 35px;
            border-top: none;
            font-size: 14px;
            position: relative;
            border-radius: 0 0 10px 10px;
        }

        /* Animation collapse smooth */
        .accordion-style-1 .accordion-collapse {
            transition: all 0.3s ease-in-out;
        }

        /* ============================================
           Texte blanc / Titre
           ============================================ */
        .text-white {
            color: white;
            text-transform: uppercase;
        }

        /* ============================================
           Loader Animation
           ============================================ */
        .loader {
            display: inline-block;
            width: 30px;
            height: 30px;
            position: relative;
            border: 4px solid #Fff;
            top: 50%;
            animation: loader 2s infinite ease;
        }

        .loader-inner {
            vertical-align: top;
            display: inline-block;
            width: 100%;
            background-color: #fff;
            animation: loader-inner 2s infinite ease-in;
        }

        @keyframes loader {
            0% {
                transform: rotate(0deg);
            }
            
            25% {
                transform: rotate(180deg);
            }
            
            50% {
                transform: rotate(180deg);
            }
            
            75% {
                transform: rotate(360deg);
            }
            
            100% {
                transform: rotate(360deg);
            }
        }

        @keyframes loader-inner {
            0% {
                height: 0%;
            }
            
            25% {
                height: 0%;
            }
            
            50% {
                height: 100%;
            }
            
            75% {
                height: 100%;
            }
            
            100% {
                height: 0%;
            }
        }

        /* ============================================
           Responsive Design
           ============================================ */
        @media (max-width: 768px) {
            .accordion-style-1 .accordion-button {
                padding: 15px 25px 15px 70px;
                font-size: 16px;
            }

            .accordion-style-1 .accordion-body {
                padding: 10px 15px 15px 25px;
                font-size: 12px;
            }

            .accordion-style-1 .accordion-button::after {
                width: 35px;
                height: 35px;
                font-size: 13px;
                left: 15px;
            }
        }

        @media (max-width: 576px) {
            .accordion-style-1 .accordion-button {
                padding: 12px 15px 12px 60px;
                font-size: 14px;
            }

            .accordion-style-1 .accordion-body {
                padding: 8px 10px 12px 15px;
                font-size: 11px;
                line-height: 20px;
            }

            .accordion-style-1 .accordion-button::after {
                width: 30px;
                height: 30px;
                font-size: 12px;
                line-height: 26px;
                left: 10px;
            }
        }


/******************** accrodian style 2 *******************/



.accordion-style-2.faq-content-wrapper {
 position:relative
}
.accordion-style-2.faq-content-wrapper:before {
 background-color:#70798f;
 content:"";
 height:calc(100% - 60px);
 left:-40px;
 position:absolute;
 top:30px;
 width:1px
}
.accordion-style-2 .panel-heading:before {
 background-color:#fff;
 border:1px solid;
 border-radius:50px;
 content:"";
 height:15px;
 left:-48px;
 position:absolute;
 top:50%;
 -webkit-transform:translateY(-50%);
 transform:translateY(-50%);
 width:15px
}
.accordion-style-2 .faq-right-img-mockup {
 left:-80px;
 position:absolute
}
.accordion-style-2 .panel-group {
 margin:0
}
.accordion-style-2 #accordionExample.panel-group .panel {
 border-radius:0;
 box-shadow:0 2px 5px rgba(0,0,0,.15);
 margin-top:30px;
 position:relative
}

.accordion-style-2 .panel:before {
 background:rgba(0,0,0,0) -webkit-linear-gradient(top,#6b8bfb 0,#9dc44c 100%) repeat scroll 0 0;
 background:rgba(0,0,0,0) linear-gradient(to bottom,#6b8bfb 0,#9dc44c 100%) repeat scroll 0 0;
 content:"";
 height:100%;
 left:-2px;
 position:absolute;
 top:0;
 width:2px
}
.accordion-style-2 #accordionExample .panel:first-child {
 margin-top:0
}
.accordion-style-2 .panel-group .panel-body {
 border:0 none;
 padding:0 30px 10px
}
.accordion-style-2 #accordionExample .panel-body {
 border:0 none
}
.accordion-style-2 .panel-heading {
 border:0 none;
 border-radius:0;
 margin:0;
 padding:20px 30px;
 position:relative;
}
.accordion-style-2 .panel-title {
 color:#4c5462;
 font-size:18px;
  margin-bottom: 0;
}
.accordion-style-2 .panel-title a {
 color:#9DC44C;
 display:block;
 position:relative;
 padding: 0;
 text-decoration: none;
}
.accordion-style-2 .panel-title a.collapsed:after {
 content:"add";
}
.accordion-style-2 .panel-title a:hover {text-decoration: none;}
.accordion-style-2 .panel-title a:after {
 border:1px solid #9DC44C;
 border-radius:50px;
 color:#9DC44C;
 content:"expand less";
 font-family:'Material Icons';
 font-size:12px;
 font-weight:400;
 height:22px;
 line-height:20px;
 position:absolute;
 right:-22px;
 text-align:center;
 top: 0;
 -webkit-transform:translateY(-50%);
 transform:translateY(-50%);
 width:22px;
  background-image: none;
  transform: none;
}

.accordion-style-2 .accordion-button:not(.collapsed) {
color: #9DC44C;
background-color: transparent;
box-shadow: none;
}
  
.accordion-style-2 .accordion-button:not(.collapsed):after {background-image: none;}

.accordion-style-2 .faq-home-2 .faq-right-img-mockup {
 left:auto;
 right:-70px;
}

.accordion-style-2 .img-responsive {
  max-width: 100%;
}
/************* end accrodian style 2 *************/
/* ============================================
   Stacked Cards - CSS Only
   No JavaScript Required
   ============================================ */

/* Screen reader only class */
.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;
}

/* ============================================
   Main Section Container
   ============================================ */
.stacked-cards-section {
    position: relative;
    width: 100%;
    max-width: min(calc(100% - 2rem), 40rem);
    margin: 0 auto;
    padding: 20px;
}

/* ============================================
   Cards Container
   ============================================ */
.cards-container {
    position: relative;
    width: 100%;
    height: 400px;
    perspective: 1000px;
}

/* ============================================
   Individual Card/Article
   ============================================ */
.card-article {
    position: absolute;
    width: 100%;
    height: 100%;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    overflow: hidden;
    transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    transform: translateY(20px) scale(0.8);
    opacity: 0;
    pointer-events: none;
    z-index: 1;
}

/* ============================================
   Card Header
   ============================================ */
.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 25px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #fff;
    border-bottom: 3px solid rgba(255, 255, 255, 0.1);
}

.card-header h2 {
    margin: 0;
    font-size: 24px;
    font-weight: 600;
    text-transform: capitalize;
}

/* ============================================
   Navigation Label (Toggle Button)
   ============================================ */
.nav-label {
    cursor: pointer;
    font-size: 24px;
    color: #fff;
    transition: all 0.3s ease;
    user-select: none;
    opacity: 0.8;
    padding: 5px 10px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.nav-label:hover {
    opacity: 1;
    transform: scale(1.2) rotate(90deg);
}

/* ============================================
   Card Content Container
   ============================================ */
.card-content {
    padding: 25px;
    height: calc(100% - 70px);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

/* ============================================
   Card Image
   ============================================ */
.card-image {
    width: 100%;
    max-width: 150px;
    height: auto;
    border-radius: 8px;
    object-fit: cover;
    align-self: center;
    margin-bottom: 10px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* ============================================
   Card Icon
   ============================================ */
.card-icon {
    text-align: center;
    font-size: 48px;
    color: #667eea;
    margin-bottom: 10px;
}

.card-icon img {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: 3px solid #667eea;
    padding: 8px;
    background: #f8f9ff;
}

.card-icon i {
    display: inline-block;
    width: 60px;
    height: 60px;
    line-height: 60px;
    border-radius: 50%;
    background: #f8f9ff;
    color: #667eea;
}

/* ============================================
   Card Text / Content List
   ============================================ */
.card-text {
    flex: 1;
    overflow-y: auto;
}

.content-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.content-list li {
    padding: 10px 0;
    border-bottom: 1px solid #eee;
    font-size: 14px;
    line-height: 1.6;
    color: #333;
    transition: all 0.3s ease;
}

.content-list li:last-child {
    border-bottom: none;
}

.content-list li:hover {
    padding-left: 10px;
    color: #667eea;
    background: #f8f9ff;
    margin: 0 -10px;
    padding-left: 20px;
    padding-right: 10px;
}

/* ============================================
   Radio Input State Management
   ============================================ */

/* Checked radio styles - Shows the active card */
input[type="radio"]:checked + .cards-container .card-article {
    transform: translateY(0) scale(1);
    opacity: 1;
    pointer-events: auto;
    z-index: 10;
}

/* Position cards in stack */
input[type="radio"]:nth-of-type(1):checked ~ .cards-container .card-article:nth-child(1) {
    transform: translateY(0) scale(1);
    opacity: 1;
    pointer-events: auto;
    z-index: 10;
}

input[type="radio"]:nth-of-type(2):checked ~ .cards-container .card-article:nth-child(2) {
    transform: translateY(0) scale(1);
    opacity: 1;
    pointer-events: auto;
    z-index: 10;
}

input[type="radio"]:nth-of-type(3):checked ~ .cards-container .card-article:nth-child(3) {
    transform: translateY(0) scale(1);
    opacity: 1;
    pointer-events: auto;
    z-index: 10;
}

input[type="radio"]:nth-of-type(4):checked ~ .cards-container .card-article:nth-child(4) {
    transform: translateY(0) scale(1);
    opacity: 1;
    pointer-events: auto;
    z-index: 10;
}

/* Back cards positioning */
input[type="radio"]:nth-of-type(1):checked ~ .cards-container .card-article:nth-child(2) {
    transform: translateY(10px) scale(0.95);
    opacity: 0.8;
}

input[type="radio"]:nth-of-type(1):checked ~ .cards-container .card-article:nth-child(3) {
    transform: translateY(20px) scale(0.9);
    opacity: 0.6;
}

input[type="radio"]:nth-of-type(1):checked ~ .cards-container .card-article:nth-child(4) {
    transform: translateY(30px) scale(0.85);
    opacity: 0.4;
}

/* Similar for other radio states... */
input[type="radio"]:nth-of-type(2):checked ~ .cards-container .card-article:nth-child(3) {
    transform: translateY(10px) scale(0.95);
    opacity: 0.8;
}

input[type="radio"]:nth-of-type(2):checked ~ .cards-container .card-article:nth-child(4) {
    transform: translateY(20px) scale(0.9);
    opacity: 0.6;
}

input[type="radio"]:nth-of-type(2):checked ~ .cards-container .card-article:nth-child(1) {
    transform: translateY(30px) scale(0.85);
    opacity: 0.4;
}

input[type="radio"]:nth-of-type(3):checked ~ .cards-container .card-article:nth-child(4) {
    transform: translateY(10px) scale(0.95);
    opacity: 0.8;
}

input[type="radio"]:nth-of-type(3):checked ~ .cards-container .card-article:nth-child(1) {
    transform: translateY(20px) scale(0.9);
    opacity: 0.6;
}

input[type="radio"]:nth-of-type(3):checked ~ .cards-container .card-article:nth-child(2) {
    transform: translateY(30px) scale(0.85);
    opacity: 0.4;
}

input[type="radio"]:nth-of-type(4):checked ~ .cards-container .card-article:nth-child(1) {
    transform: translateY(10px) scale(0.95);
    opacity: 0.8;
}

input[type="radio"]:nth-of-type(4):checked ~ .cards-container .card-article:nth-child(2) {
    transform: translateY(20px) scale(0.9);
    opacity: 0.6;
}

input[type="radio"]:nth-of-type(4):checked ~ .cards-container .card-article:nth-child(3) {
    transform: translateY(30px) scale(0.85);
    opacity: 0.4;
}

/* ============================================
   Scrollbar Styling
   ============================================ */
.card-content::-webkit-scrollbar {
    width: 6px;
}

.card-content::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}

.card-content::-webkit-scrollbar-thumb {
    background: #667eea;
    border-radius: 10px;
}

.card-content::-webkit-scrollbar-thumb:hover {
    background: #764ba2;
}

/* ============================================
   Responsive Design
   ============================================ */
@media (max-width: 768px) {
    .stacked-cards-section {
        padding: 15px;
    }

    .cards-container {
        height: 350px;
    }

    .card-header {
        padding: 15px 20px;
    }

    .card-header h2 {
        font-size: 18px;
    }

    .card-content {
        padding: 15px;
        height: calc(100% - 60px);
    }

    .card-image {
        max-width: 120px;
    }

    .nav-label {
        font-size: 20px;
    }
}

@media (max-width: 576px) {
    .stacked-cards-section {
        padding: 10px;
    }

    .cards-container {
        height: 300px;
    }

    .card-header {
        padding: 12px 15px;
    }

    .card-header h2 {
        font-size: 16px;
    }

    .card-content {
        padding: 12px;
        height: calc(100% - 50px);
    }

    .card-image {
        max-width: 100px;
    }

    .content-list li {
        font-size: 12px;
    }

    .nav-label {
        font-size: 18px;
    }
}

/* ============================================
   Animations & Transitions
   ============================================ */
@keyframes slideIn {
    from {
        transform: translateY(20px) scale(0.8);
        opacity: 0;
    }
    to {
        transform: translateY(0) scale(1);
        opacity: 1;
    }
}

.card-article {
    animation: slideIn 0.5s ease-out;
}

/**** tabs ****/
.nav .nav-link {
  position: relative;
  border-radius: .25rem !important;
}

.gva-tabs-wrapper.vertical-right .nav-pills .nav-link.active:before {
  opacity: 1;
}
.gva-tabs-wrapper.vertical-right .nav-pills .nav-link:before {
    content: '';
    position: absolute;
    display: block;
    border-top: 8px solid transparent;
    border-right: 10px solid #7CBFE6;
    border-bottom: 8px solid transparent;
    top: 50%;
    right: 100%;
    transform: translateY(-50%);
    opacity: 0;
  }
.gva-tabs-wrapper.vertical-left .nav-pills .nav-link.active:before {
  opacity: 1;
}
.gva-tabs-wrapper.vertical-left .nav-pills .nav-link:before {
  content: '';
    display: block;
    border-top: 8px solid transparent;
    border-left: 10px solid #7CBFE6;
    border-bottom: 8px solid transparent;
    position: absolute;
    top: 50%;
    right: -10px;
    transform: translateY(-50%);
    opacity: 0;
}