* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

    /* font-family: Arial, sans-serif; */

}



.accordion-hero {

    display: flex;

    height: 90vh;

    width: 100%;

    overflow: hidden;

}



.panel {

    flex: 1;

    background-size: cover;

    background-position: center;

    cursor: pointer;

    position: relative;

    transition:

        flex 0.8s cubic-bezier(0.4, 0, 0.2, 1),

        filter 0.6s ease;

    filter: grayscale(40%);

}



.panel::before {

    content: "";

    position: absolute;

    inset: 0;

    background: rgba(0, 0, 0, 0.05);

}



.panel.active {

    flex: 4;

    filter: grayscale(0%);

}



.content {

    position: absolute;

    bottom: 40px;

    left: 40px;

    color: #fff;

    opacity: 0;

    transform: translateY(20px);

    transition: all 0.5s ease 0.3s;

    z-index: 2;

    text-shadow: -5px 3px 11px black;

}



.panel.active .content {

    opacity: 1;

    transform: translateY(0);

}



.content h2 {

    font-size: 36px;

    margin-bottom: 15px;

    color: white;

    text-shadow: -5px 3px 11px black;

}



.content a {

    display: inline-block;

    padding: 12px 24px;

    border: 2px solid #fff;

    color: #fff;

    text-decoration: none;

    /* font-weight: bold; */

    font-weight: 500;

}



.content a:hover {

    background: #fff;

    color: #000;

}





/* Vertical Title (Inactive Panels) */

.vertical-title {

    position: absolute;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%) rotate(-90deg);

    transform-origin: center;

    color: #fff;

    font-size: 20px;

    font-weight: 600;

    letter-spacing: 2px;

    opacity: 0.85;

    transition: all 0.4s ease;

    white-space: nowrap;

    z-index: 3;

    text-shadow: -5px 3px 11px black;

}



/* Hide vertical title when panel is active */

.panel.active .vertical-title {

    opacity: 0;

    transform: translate(-50%, -50%) rotate(-90deg) scale(0.9);

}











/* Mobile View*/



/* Mobile view (vertical accordion) */

@media screen and (max-width: 768px) {

    .accordion-hero {

        flex-direction: column;

        height: auto;

        min-height: 100vh;

    }



    .panel {

        flex: 1;

        min-height: 80px;

        transition:

            min-height 0.8s cubic-bezier(0.4, 0, 0.2, 1),

            filter 0.6s ease;

    }



    .panel.active {

        flex: 3;

        min-height: 300px;

    }



    .vertical-title {

        transform: translate(-50%, -50%) rotate(0deg);

        font-size: 18px;

        text-align: center;

        width: 80%;

    }



    .content {

        bottom: 20px;

        left: 20px;

    }



    .content h2 {

        font-size: 24px;

    }

}









/* Mobile view (vertical accordion) - Alternative */

@media screen and (max-width: 768px) {

    .accordion-hero {

        flex-direction: column;

        height: auto;

    }

    

    .panel {

        flex: none;

        width: 100%;

        min-height: 80px;

        max-height: 80px;

        overflow: hidden;

        transition: 

            max-height 0.8s cubic-bezier(0.4, 0, 0.2, 1),

            filter 0.6s ease;

    }

    

    .panel.active {

        flex: none;

        max-height: 350px;

        min-height: 350px;

    }

    

    .vertical-title {

        transform: translate(-50%, -50%) rotate(0deg);

        top: 40%; /* Adjust vertical position */

        font-size: 18px;

        text-align: center;

        width: 80%;

        white-space: normal;

        line-height: 1.3;

    }

    

    .panel.active .vertical-title {

        opacity: 0;

        transform: translate(-50%, -50%) rotate(0deg) scale(0.9);

    }

    

    /* Adjust content positioning for mobile */

    .content {

        bottom: 20px;

        left: 20px;

        right: 20px;

        opacity: 0;

        transform: translateY(15px);

    }

    

    .panel.active .content {

        opacity: 1;

        transform: translateY(0);

    }

}



/* Mobile view (vertical accordion) */

@media screen and (max-width: 768px) {

    .accordion-hero {

        flex-direction: column;

        height: auto;

        min-height: 100vh;

    }

    

    .panel {

        flex: none;

        width: 100%;

        height: 80px;

        min-height: 80px;

        transition: 

            height 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94),

            min-height 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94),

            filter 0.6s ease;

        will-change: height, min-height; /* For smoother animation */

    }

    

    .panel.active {

        flex: none;

        height: 350px;

        min-height: 350px;

    }

    

    .vertical-title {

        transform: translate(-50%, -50%) rotate(0deg);

        font-size: 18px;

        text-align: center;

        width: 80%;

        white-space: normal;

        line-height: 1.3;

        transition: opacity 0.5s ease 0.2s; /* Smoother fade out */

    }

    

    .panel.active .vertical-title {

        opacity: 0;

        transform: translate(-50%, -50%) rotate(0deg) scale(0.95);

        transition: opacity 0.3s ease, transform 0.4s ease; /* Faster fade out */

    }

    

    .content {

        bottom: 15px;

        left: 15px;

        right: 15px;

        opacity: 0;

        transform: translateY(20px);

        transition: all 0.6s ease 0.4s; /* Slight delay for content reveal */

    }

    

    .panel.active .content {

        opacity: 1;

        transform: translateY(0);

        transition: all 0.6s ease 0.2s; /* Faster reveal for active panel */

    }

}