/* ==========================================================================
   Approach Section
   ========================================================================== */

:root {
    --color-navy: #152536;
    --color-gold-start: #d4a373;
    --color-gold-end: #b8834f;
    --color-bg: #f8f9fa;
    --color-text-dark: #1f2937;
    --color-text-muted: #6b7280;

    --skew-angle: -18deg;
}


/* ==========================================================================
   Main Section
   ========================================================================== */

.approach-section {
    padding: 50px 20px;

    background-color: var(--color-bg);

    overflow: hidden;

    font-family: inherit;
}


/* ==========================================================================
   Container
   ========================================================================== */

.approach-container {
    max-width: 1200px;

    margin: 0 auto;
}


/* ==========================================================================
   Header
   ========================================================================== */

.approach-header {
    text-align: center;

    margin-bottom: 50px;
}


.approach-subtitle {
    display: block;

    margin-bottom: 8px;

    font-size: 0.85rem;

    letter-spacing: 2px;

    text-transform: uppercase;

    color: var(--color-gold-end);

    font-weight: 700;
}


.approach-title {
    margin: 0;

    font-size: 2.5rem;

    color: var(--color-text-dark);

    font-family: Georgia, serif;
}


/* ==========================================================================
   Grid Layout
   ========================================================================== */

.approach-grid {
    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 35px;

    padding: 20px 0;
}


/* ==========================================================================
   Diagonal Cards
   ========================================================================== */

.diagonal-card {
    position: relative;

    z-index: 1;

    border-radius: 12px;

    padding: 35px;

  

    /*
     * Initial animation state.
     */
    opacity: 0;

    transform:
        skewX(var(--skew-angle))
        translateY(40px)
        scale(1);

    transition:
        opacity 0.7s ease,
        transform 0.7s cubic-bezier(0.165, 0.84, 0.44, 1),
        box-shadow 0.4s ease;
}


/* ==========================================================================
   Alternating Card Position
   ========================================================================== */

/*
 * Cards 2 and 4 stay on the upper level.
 *
 * Cards 1 and 3 remain on the lower level.
 */

.diagonal-card[data-step="1"],
.diagonal-card[data-step="3"] {
    transform:
        skewX(var(--skew-angle))
        translateY(-40px)
        scale(1);
}


/* ==========================================================================
   Animated / Visible State
   ========================================================================== */

/*
 * Cards 1 and 3:
 * Lower level.
 */

.diagonal-card[data-step="1"].animate-in,
.diagonal-card[data-step="3"].animate-in {
    opacity: 1;

    transform:
        skewX(var(--skew-angle))
        translateY(0)
        scale(1);
}


/*
 * Cards 2 and 4:
 * Upper level.
 */

.diagonal-card[data-step="2"].animate-in,
.diagonal-card[data-step="4"].animate-in {
    opacity: 1;

    /* transform:
        skewX(var(--skew-angle))
        translateY(-40px)
        scale(1); */
}


/* ==========================================================================
   Card Themes
   ========================================================================== */

.card-dark {
    background:
        linear-gradient(
            135deg,
            #101c29 0%,
            #1c3248 100%
        );

    color: #ffffff;
}


.card-gold {
    background:
        linear-gradient(
            135deg,
            var(--color-gold-start) 0%,
            var(--color-gold-end) 100%
        );

    color: #ffffff;
}


/* ==========================================================================
   Un-Skew Content
   ========================================================================== */

.card-content {
    /*
     * Counteract the card's skew.
     */
    transform:
        skewX(calc(var(--skew-angle) * -1));

    display: flex;

    flex-direction: column;

    align-items: center;
}


/* ==========================================================================
   Icon
   ========================================================================== */

.card-icon {
    width: 60px;

    height: 60px;

    margin-bottom: 20px;

    color: #ffffff;

    opacity: 0.9;
}


.card-icon svg {
    width: 100%;

    height: 100%;
}


/* ==========================================================================
   Card Typography
   ========================================================================== */

.card-title {
    margin: 0 0 12px 0;

    font-size: 1.3rem;

    font-weight: 700;

    color: #ffffff;
}


.card-text {
    margin: 0;

    font-size: 0.92rem;

    line-height: 1.6;

    opacity: 0.88;
}


/* ==========================================================================
   Hover Effect
   ========================================================================== */

/*
 * Cards 1 and 3 are lower.
 * On hover they move upward by 10px.
 */

.approach-grid .diagonal-card[data-step="1"]:hover,
.approach-grid .diagonal-card[data-step="3"]:hover {
    z-index: 10;

    box-shadow:
        0 22px 45px rgba(0, 0, 0, 0.22);

    transform:
        skewX(var(--skew-angle))
        translateY(-10px)
        scale(1.02);
}


/*
 * Cards 2 and 4 are already 40px higher.
 * On hover they move another 10px upward.
 *
 * Therefore their hover position becomes -50px.
 */

.approach-grid .diagonal-card[data-step="2"]:hover,
.approach-grid .diagonal-card[data-step="4"]:hover {
    z-index: 10;

    box-shadow:
        0 22px 45px rgba(0, 0, 0, 0.22);

    transform:
        skewX(var(--skew-angle))
        translateY(10px)
        scale(1.01);
}


/* ==========================================================================
   Responsive Layout - Tablet
   ========================================================================== */

@media (max-width: 992px) {

    .approach-grid {
        grid-template-columns: repeat(2, 1fr);

        gap: 25px;
    }

}


/* ==========================================================================
   Responsive Layout - Mobile
   ========================================================================== */

@media (max-width: 576px) {

    :root {
        --skew-angle: -8deg;
    }


    .approach-grid {
        grid-template-columns: 1fr;

        gap: 20px;
    }


    /*
     * On mobile all cards use the same vertical level.
     */

    .diagonal-card[data-step="1"].animate-in,
    .diagonal-card[data-step="2"].animate-in,
    .diagonal-card[data-step="3"].animate-in,
    .diagonal-card[data-step="4"].animate-in {
        transform:
            skewX(var(--skew-angle))
            translateY(0)
            scale(1);
    }


    /*
     * Mobile hover.
     */

    .approach-grid .diagonal-card[data-step="1"]:hover,
    .approach-grid .diagonal-card[data-step="2"]:hover,
    .approach-grid .diagonal-card[data-step="3"]:hover,
    .approach-grid .diagonal-card[data-step="4"]:hover {
        transform:
            skewX(var(--skew-angle))
            translateY(-8px)
            scale(1.02);
    }

}


/* ==========================================================================
   Reduced Motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {

    /*
     * Lower cards.
     */

    .diagonal-card[data-step="1"],
    .diagonal-card[data-step="3"] {
        opacity: 1;

        transform:
            skewX(var(--skew-angle))
            translateY(0)
            scale(1);

        transition: none;
    }


    /*
     * Upper cards.
     */

    .diagonal-card[data-step="1"],
    .diagonal-card[data-step="3"] {
        opacity: 1;

        transform:
            skewX(var(--skew-angle))
            translateY(-40px)
            scale(1);

        transition: none;
    }


    /*
     * Reduced-motion hover for lower cards.
     */

    .approach-grid .diagonal-card[data-step="1"]:hover,
    .approach-grid .diagonal-card[data-step="3"]:hover {
        transform:
            skewX(var(--skew-angle))
            translateY(-10px)
            scale(1.02);
    }


    /*
     * Reduced-motion hover for upper cards.
     */

    .approach-grid .diagonal-card[data-step="2"]:hover,
    .approach-grid .diagonal-card[data-step="4"]:hover {
        transform:
            skewX(var(--skew-angle))
            translateY(-50px)
            scale(1.02);
    }

}


/** Add **/
/* Mobile Viewport Par Cards ko Horizontal Slider mein badalna */
@media screen and (max-width: 767px) {
    .approach-grid {
        display: flex !important;
        overflow-x: auto !important;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        gap: 16px;
        padding-bottom: 20px; /* Scrollbar space */
        
        /* Smooth scrolling */
        scroll-behavior: smooth;
    }

    .approach-grid .diagonal-card {
        /* Har card mobile screen ki ~85% width lega taaki agla card halka sa dikhe */
        flex: 0 0 85% !important;
        max-width: 85% !important;
        scroll-snap-align: center;
        
        /* Mobile height auto adjust karein */
        min-height: auto;
    }

    /* Standard scrollbar hide karne ke liye (Optional) */
    .approach-grid::-webkit-scrollbar {
        height: 4px;
    }
    .approach-grid::-webkit-scrollbar-thumb {
        background: #cca352; /* Gold Theme Color */
        border-radius: 4px;
    }
}

/* Mobile Viewport Par Cards Slider Fix */
@media screen and (max-width: 767px) {
    .approach-grid {
        display: flex !important;
        overflow-x: auto !important;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        gap: 16px;
        padding-bottom: 10px;
        scroll-behavior: smooth;

        /* Hide Scrollbar for Firefox & IE/Edge */
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    /* Hide Scrollbar for Chrome, Safari and Opera */
    .approach-grid::-webkit-scrollbar {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
    }

    .approach-grid .diagonal-card {
        flex: 0 0 85% !important;
        max-width: 85% !important;
        scroll-snap-align: center;
        min-height: auto;

        /* JS Animation Transform Override fix (Line/Border Offset Hatane ke liye) */
        opacity: 1 !important;
        transform: skewX(0deg) translateY(0) scale(1) !important;
    }

    /* Card ke andar skew ko zero kar rahe hain taaki layout fix rahe */
    .approach-grid .card-content {
        transform: none !important;
    }
    
    .approach-header{
        margin-bottom:0px;
    }
    
    .approach-title {
        font-size:20px;
        
    }
}