/* 3. CSS Variables (Design Tokens) */
:root {
    --white: #ffffff;
    --red: #e03438;
    --yellow: #fdcc32;
    --brown: #602f18;
    --pastel-red: #f2B8B9;
    --pastel-yellow: #FEF5C2;
    --pastel-brown: #B9A197;
    --light-neutral: #F5F5F5;
    --dark-neutral: #333333;

    /* New variables for commonly used text styles */
    --font-heading: 'SpotNormal', sans-serif;
    --font-body: 'Acumin', sans-serif;
}

/* values  */

.values{
    background:var(--pastel-yellow) ;
    padding: 30px;
    border-radius: 15px;
    box-shadow: 5px 5px 0px #222;
    border: 1px solid #222  ;
        transform:  rotate(-10deg);
}

.values img{
    position: absolute;
    top: -50%;
    left: 50%;
}


.col-lg-4:nth-child(2) .values{
        transform:  rotate(10deg);
}
.col-lg-4:nth-child(3) .values{
        transform: rotate(-10deg);
}

@media(max-width:991px){
    .values{
        transform:  rotate(-10deg) scale(0.9) translateY(-10%);
    }
    .col-lg-4:nth-child(2) .values{
        transform:  rotate(10deg) scale(0.9) translateY(-10%);
}
.col-lg-4:nth-child(3) .values{
        transform:  rotate(-10deg) scale(0.9) translateY(-10%);
}
}

/* highlight text */

.highlight-animation {
            position: relative;
            display: inline-block;
            padding: 0 8px;
        }

        .highlight-animation svg {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: calc(100% + 30px);
            height: calc(100% + 30px);
            pointer-events: none;
            overflow: visible;
        }

        .highlight-path {
            fill: none;
            stroke: #e03438;
            stroke-width: 10;
            stroke-linecap: round;
            stroke-linejoin: round;
        }


/*  same as other website  */

/* --- Swiper Container 7 Styles --- */
#cardSwiper7 {
    width: 100%;
    /* Add padding to prevent cut-off due to rotation/offset */
    padding: 150px 20px 100px 20px; 
}

/* Ensure slides align content to the top */
#cardSwiper7 .swiper-slide.card-slide-7 {
    display: flex; 
    align-items: flex-start;
    justify-content: space-around;
    height: auto;
}

/* --- Navigation & Pagination Styles for Swiper 7 --- */

.card-swiper-pagination-7 { bottom: 0px; }
.card-swiper-prev-7,
.card-swiper-next-7 { 
    color: #1a1a1a; 
    top: 50%;
    z-index: 100; /* Ensure visibility */
}

.card-2 {
    background: red;
    width: 100%;
    min-height: 50vh;
    max-height: auto;
    position: relative;
    border-radius: 25px;
    padding: 2em;
    border: 2px solid #fff;
}
.card-2 h2{
    padding-top: 10px;
    font-size: 3.3em;
}
.card-2 ul li{
    font-size: 1.3em;
}

.card-icon {
    position: absolute;
    left: 30%;
    top: -15%;
    height: 100px;
    filter: drop-shadow(2px 2px 2px #222);
}

.cards-container .card-slide-7:nth-child(1) .card-2{
    transform: rotate(5deg) translate(50%,0);
    background: #e03438;
    color: #fff;
}

.cards-container .card-slide-7:nth-child(2) .card-2{
    transform: rotate(-10deg) translate(20%,15%);
    background: #fdcc32;
    color: #fff;
}

.cards-container .card-slide-7:nth-child(3) .card-2{
    transform: rotate(15deg) translate(-10%,0%);
    background: #527ba5;
    color: #fff;
}

.cards-container .card-slide-7:nth-child(4) .card-2{
    transform: rotate(-15deg)  translate(-30%,10%);
    background: #6db052;
    color: #fff;
}

.cards-container .card-slide-7:nth-child(5) .card-2{
    transform: rotate(0deg) translate(-50%,0);
    background: #f9f4ed;
}





/* ----------------------------------------------------
   1. Base Card and Transition Setup
   ---------------------------------------------------- */
.card-2 {
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), 
                box-shadow 0.4s ease-in-out, 
                z-index 0s 0s; 
    transform-origin: center; 
    z-index: 10;
    box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.1);
}

/* ----------------------------------------------------
   2. Hovered Card - Stand Out Effect
   ---------------------------------------------------- */
.cards-container .card-slide-7:hover .card-2 {
    z-index: 100;
    
    transform: 
        rotate(0deg) 
        translate(0, -20px) 
        scale(1.15);     
        box-shadow: 10px 10px 40px rgba(0, 0, 0, 0.6);
}



.cards-container .card-slide-7:hover + .card-slide-7 .card-2 {
    transform: translateX(40px) scale(0.95); 
    z-index: 5; 
}



.cards-container .card-slide-7:hover ~ .card-slide-7 .card-2 {
    transform: translateX(20px) scale(0.98); 
    z-index: 5;
}