/* ============================================================== 
    # Multiple Items Widget With Link
=================================================================== 
*/

/* Import */
@import url('https://fonts.googleapis.com/css2?family=Frank+Ruhl+Libre:wght@300;400;500;700;900&family=DM+Sans:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&display=swap');

/* Variables */
:root {
    /* Font */
    --font-family-tabs-style-one: 'Frank Ruhl Libre', serif;
    --sub-font-family-tabs-style-one: 'DM Sans', sans-serif;
    /* Main color */
    --color-tabs-style-one: #d1143e;
    /* Tab Background */
    --tab-background-color: #FFF5E7;
}

/* ============================================================== 
    # Style One
=================================================================== 
*/

/* Main config */
.tabs-style-one-area {
    position: relative;
    z-index: 1;

    .container {
        width: 100% !important;
        max-width: 1320px !important;

        .explore-future-tab {

            /* Flexbox container for tabs */
            .tabs-flex-container {
                display: flex;
                flex-direction: row;
                gap: 30px;
            }

            /* Left sidebar with tabs */
            .tabs-sidebar {
                flex: 0 0 25%;
                max-width: 300px;
                position: relative;
            }

            .tabs-sidebar::before {
                content: "";
                position: absolute;
                top: 0;
                left: 0;
                width: 300px;
                height: 4px;
                background-color: var(--color-tabs-style-one);
            }

            /* Right content area */
            .tabs-content {
                flex: 1;
                /* Takes up remaining space */
            }

            .explore-future-tab__button {
                position: relative;
                display: block;
                border-top: 4px solid var(--color-tabs-style-one);
                padding-top: 10px;
                z-index: 2;
            }

            /* Tab content layout */
            .explore-future-tab__content {
                display: block;
                /* Change to block to stack rows vertically */
            }

            .explore-future-tab__content .row {
                margin-bottom: 20px;
                /* Add space between rows */
            }

            /* Image holder */
            .img-holder {
                width: 100%;
            }

            /* Image styling */
            .img-holder img {
                width: 100%;
                height: auto;
                display: block;
            }

            .pr-tab {
                background: var(--tab-background-color);
            }

            /* Text content */
            .text-holder {
                width: 100%;
                font-family: var(--font-family-tabs-style-one);
                padding-top: 20px;
                padding-right: 40px;
                padding-bottom: 20px;
                padding-left: 40px;

                h2 {
                    font-weight: 700;
                    font-size: 30px;
                    margin-bottom: 10px;
                    line-height: 38px;
                    margin: 0px;
                    text-align: left;
                    text-decoration-style: solid;
                    unicode-bidi: isolate;
                    text-size-adjust: 100%;
                }
            }

            /* Header */
            .site-heading {
                text-align: left;
                padding-top: 40px;

                /* Title */
                h2 {
                    font-weight: 500;
                    font-size: 40px;
                    font-family: var(--font-family-tabs-style-one);
                    text-align: left;
                    line-height: 48px;
                    text-decoration: solid;
                    text-transform: capitalize;
                    margin: 0px;
                }

                /* Subtitle */
                h4 {
                    font-weight: 400;
                    font-size: 20px;
                    font-family: var(--font-family-tabs-style-one);
                    margin-bottom: 30px;
                    text-align: left;
                }

                /* Tab list */
                .tab-btns {
                    margin-top: 30px;
                    padding-left: 0;
                    list-style: none;

                    ul {
                        margin-left: 0px;
                    }

                    li {
                        margin-bottom: 15px;
                    }

                    li.active-btn h3 {
                        color: #000;
                        font-weight: 600;
                    }

                    li a {
                        text-decoration: none;
                        display: block;
                    }

                    h3 {
                        font-weight: 700;
                        font-size: 22px;
                        line-height: 40px;
                        list-style-image: none;
                        list-style-type: none;
                        list-style-position: outside;
                        font-family: var(--font-family-tabs-style-one);
                        color: #666;
                        cursor: pointer;
                        margin: 0;
                        text-align: left;
                        display: block;
                    }
                }
            }
        }
    }
}



/* ============================================================== 
    # Media Queries
=================================================================== 
*/
@media screen and (max-width: 1080px) {
    .tabs-style-one-area .container .explore-future-tab .tabs-flex-container {
        flex-direction: column;
    }

    .tabs-style-one-area .container .explore-future-tab .tabs-sidebar {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

@media screen and (max-width: 768px) {
    .tabs-style-one-area .container .explore-future-tab .text-holder {
        padding: 15px;
    }

    .tabs-style-one-area .container .explore-future-tab .text-holder h2 {
        font-size: 24px;
        line-height: 30px;
    }
}

@media screen and (max-width: 650px) {
    .tabs-style-one-area .container .explore-future-tab .site-heading h2 {
        font-size: 30px;
    }
}