@use '../abstracts/variables' as *;
@use "../mixins/breakpoints" as *;

.home-container {
    background-image: url('/resources/images/background_image.webp');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    height: auto;
    padding-top: 6%;
    font-family: "Outfit", sans-serif;

    @include media-min-xxl {
        padding-top: 4%;
    }

    @include media-min-5-xl {
        padding-top: 2%;
    }
    @include media-min-6-xl {
        padding-top: 1%;
    }

    .modal-content {
        .modal-header {
            background-color: $dark-brown !important;
            color: $white !important;

            .modal-title {
                font-weight: 100 !important;
            }

            .btn-modal-close {
                color: white !important;
                border: 2px solid white !important;
                padding: 3px 9px;
                border-radius: 50%;
            }
        }

        .calculate-input {
            width: 100%;
            text-align: center;
            color: #6E6E6E;
            padding: 6px 5px;
            border-radius: 0px !important;
            border: 2px solid rgba(0, 0, 0, 0.1) !important;
        }

        .close-browse {
            border: 2px solid black !important;
            padding: 3px 9px;
            border-radius: 50%;
            color: black;
        }
    }

    .banner-carousel {
        .home-banner-carousel-one {
            background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('/resources/images/home_banner_football_image.webp');
            background-position: center;
            background-repeat: no-repeat;
            background-size: 100% 100%;
            height: 50vh;
            margin-top: 39px;
            position: relative;

            @include media-min-xs-l {
                height: 55vh;
            }

            @include media-min-md {
                margin-top: 33px;
                height: 65vh;
            }

            @include media-min-lg {
                margin-top: 0px;
                height: 85vh;
            }

        }

        .home-banner-carousel-two {
            background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('/resources/images/home_class_room_image.webp');
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;

            min-height: calc(100vh - 90px);
            height: auto;
            margin-top: 0; // FIX
            position: relative;

            display: flex;
            align-items: center;
            justify-content: center;
            padding: 4rem 1.5rem;

        }

        .banner-content {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100%;
            color: $white;
            text-align: center;

            .banner-header {
                width: 90%;

                @include media-min-xs-l {
                    width: 80%;
                }

                @include media-min-md {
                    width: 65%;
                }

                @include media-min-xl {
                    width: 70%;
                }

                .banner-text {
                    font-size: 22px;
                    font-weight: 600;

                    @include media-min-md {
                        font-size: 40px;
                    }

                    @include media-min-lg {
                        font-size: 45px;
                    }

                    @include media-min-xl {
                        font-size: 50px;
                    }
                }

                .camp-btn-fs {
                    font-size: 1.3rem !important;
                    margin-bottom: 10px !important;

                    @media (max-width:576px) {
                        font-size: 0.8rem !important;
                    }
                     @include media-min-5-xl{
                        font-size: 2rem !important;
                    }
                }

                .become-btn-fs {
                    font-size: 1rem !important;

                    @media (max-width:576px) {
                        font-size: 0.8rem !important;
                    }
                     @include media-min-5-xl{
                        font-size: 2rem !important;
                    }
                }

                .banner-sub-title {
                    font-size: 1.25rem !important;

                    @media (max-width:576px) {
                        font-size: 1rem !important;
                    }
                    @include media-min-5-xl{
                        font-size: 2rem !important;
                    }
                }
            }
        }
    }

    .tab-heading {
        color: black;
        font-weight: 600;
        font-size: 26px;
        position: relative;
        display: inline-block;
        /* Ensure the element has dimensions */
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
        /* Add text shadow effect */
    }

    .tab-heading::after {
        content: "";
        position: absolute;
        width: 45%;
        /* Set width of the line to 50% of the text */
        height: 3.5px;
        /* Thickness of the line */
        background-color: $dark-brown;
        /* Color of the line */
        bottom: -10px;
        /* Adjust the distance from the text */
    }

    .tab-heading.head-center::after {
        left: 25%;
        /* Center the line */
    }

    .tab-heading.head-left::after {
        left: 0%;
        /* right the line */
    }

    .tab-heading.head-right::after {
        left: 0%;

        @include media-min-lg {
            right: 0%;
            /* right the line */
        }
    }

    .small-gray {
        font-size: 13px;
        color: rgb(180, 177, 177);
    }

    .recent-campaign {
        .recent-campaign-content {

            // display: flex;
            // justify-content: center;
            // align-items: center;
            .recent-campaign-content-cover {

                .card-carousel-content {
                    .carousel-container {
                        overflow: hidden;
                        /* Prevents overflow */
                        width: 100%;

                        .card {
                            background-color: transparent !important;
                            border: none !important;
                        }

                        .campaign-image {
                            width: 100%;
                            border-radius: 20px;
                        }

                        .carousel {
                            display: flex;
                            transition: transform 0.5s ease;
                            width: calc(100% + 20px);
                            /* Adjusted to account for card spacing */
                        }

                        .campaign-card {
                            flex: 0 0 calc(100% - 20px);
                            /* Full width for mobile with spacing */
                            margin-right: 20px;
                            /* Adds space between each card */
                            box-sizing: border-box;

                            @include media-min-md {
                                flex: 0 0 calc((100% / 2) - 20px);
                                /* 20px is the spacing between cards */
                            }

                            @include media-min-lg {
                                flex: 0 0 calc((100% / 3) - 20px);
                                /* 20px is the spacing between cards */
                            }
                        }

                        .campaign-card:last-child {
                            margin-right: 0;
                            /* Removes margin from the last card */
                        }

                        @media (max-width: 768px) {
                            .campaign-card {
                                flex: 0 0 calc(100% - 20px);
                                /* Full width for mobile with spacing */
                            }
                        }
                    }
                }
            }
        }

        .recent-campaign-banner {
            background-color: $white;
            border-radius: 6px;
            border: 2px solid #8493B9;

            .text {
                font-size: 20px;
            }

            .calculator-img {
                width: 100%;

                @include media-min-xs-l {
                    width: 40%;
                }

                @include media-min-md {
                    width: 20%;
                }

                @include media-min-lg {
                    width: 12%;
                }

                @include media-min-xxl {
                    width: 10%;
                }
            }
        }
    }

    .browse-fundraisers {
        .browse-fundraisers-content {
            display: flex;
            justify-content: center;
            align-items: center;

            .browse-fundraisers-content-cover {

                // width: 90%;
                // @include media-min-xl {
                //     width: 80%;
                // }
                .browse-fundraisers-images {
                    .img-div {
                        margin: 0px 25px;

                        @include media-min-sm {
                            margin: 0px 35px;
                            min-height: 170px;
                        }

                        @include media-min-md {
                            min-height: 170px;
                        }

                        @include media-min-xl {
                            min-height: 225px;
                        }

                        @include media-min-xxl {
                            min-height: 200px;
                        }

                        .bf-card-img {
                            width: 100%;

                        }
                    }
                }

                .browse-name {
                    text-align: center;
                    font-size: 19px;
                    font-weight: 600;
                }

                .browse-padding {
                    padding-top: 1px;
                }
            }
        }
    }

    .supercharged-savings {
        overflow: hidden;

        table {
            background: $dark-blue;
            border-radius: 20px;
            font-size: 12px;
            font-weight: bold;
            overflow: hidden;

            @include media-min-md {
                font-size: 20px;
                border-radius: 60px;
            }

            thead {
                background-color: $dark-blue;
                color: $white;

                th {
                    padding: 8px;

                    @include media-min-md {
                        padding: 15px;
                    }
                }

                th:first-child {
                    border-radius: 50px 0px 0px 0px;

                    @include media-min-md {
                        border-radius: 70px 0px 0px 0px;
                    }
                }

                th:last-child {
                    border-radius: 0px 50px 0px 0px;

                    @include media-min-md {
                        border-radius: 0px 70px 0px 0px;
                    }
                }
            }

            tbody {
                background: #EBEEF6;

                td:first-child {
                    border-left: 8px solid $dark-brown !important;

                    @include media-min-md {
                        border-left: 15px solid $dark-brown !important;
                    }
                }

                td:last-child {
                    border-right: 8px solid $dark-brown !important;

                    @include media-min-md {
                        border-right: 15px solid $dark-brown !important;
                    }
                }

                td {
                    padding: 8px;

                    @include media-min-md {
                        padding: 15px;
                    }
                }
            }

            tfoot {
                background-color: $dark-blue;

                td {
                    padding: 8px;

                    @include media-min-md {
                        padding: 15px;
                    }
                }

                td:first-child {
                    border-radius: 0px 0px 0px 50px;

                    @include media-min-md {
                        border-radius: 0px 0px 0px 70px;
                    }
                }

                td:last-child {
                    border-radius: 0px 0px 50px 0px;

                    @include media-min-md {
                        border-radius: 0px 0px 70px 0px;
                    }
                }
            }
        }
    }

    .discover {
        .discover-content {
            .carousel-container {
                overflow: hidden;
                /* Prevents overflow */
                width: 100%;

                .carousel {
                    display: flex;
                    transition: transform 0.5s ease;
                    width: calc(100% + 35px);
                    /* Adjusted to account for card spacing */
                }

                .card {
                    flex: 0 0 calc(100% - 35px);
                    /* Full width for mobile with spacing */
                    margin-right: 35px;
                    /* Adds space between each card */
                    box-sizing: border-box;
                    border: solid 1px white !important;

                    @include media-min-md {
                        flex: 0 0 calc((100% / 2) - 35px);
                        /* 20px is the spacing between cards */
                    }

                    @include media-min-lg {
                        flex: 0 0 calc((100% / 3) - 35px);
                        /* 20px is the spacing between cards */
                    }
                }

                .card:last-child {
                    margin-right: 0;
                    /* Removes margin from the last card */
                }
            }

            .discover-card {
                background-color: $white;
                border-radius: 10px;

                img {
                    width: 100%;
                    border-radius: 10px 10px 0px 0px;
                }

                .content {
                    .sub-head {
                        font-size: 15px;
                        font-weight: 600;
                    }

                    .card-head {
                        font-size: 18px;
                    }

                    .discover-footer {
                        bottom: 0;
                        font-size: 15px;
                    }
                }
            }
        }
    }

    .why-fundraise {
        .why-fundraise-content {
            .head {
                font-size: 18px;
            }

            sup {
                color: #4A4B4B;
                font-weight: 600;
            }

            .count {
                background-color: $dark-blue;
                color: $white;
                font-weight: 600;
                border-radius: 13px;
                padding: 10px 18px;
            }

            .video-tag {
                border: 4px solid $dark-blue;
                border-radius: 3px;
            }

            video[poster] {
                width: 100%;
                background-color: white;
            }
        }
    }

    .why-fundraise-sub {
        border: 4px solid $dark-brown;
        border-radius: 100px 100px 0px 0px;

        .why-fundraise-sub-sections {
            position: relative;
        }

        .why-fundraise-sub-sections::before {
            @include media-min-lg {
                content: "";
                position: absolute;
                height: 100%;
                border-left: 3.5px solid $dark-blue;
                top: 15px;
                left: 26px;
                /* Center the line */
            }
        }

        .star {
            font-size: 19px;
            padding: 3px 5px;
            margin-right: 10px;
            color: $white;
            background-color: $dark-brown;
            border-radius: 15px;
            position: relative;
        }

        .why-fundraise-sub-content {
            display: flex;
            justify-content: center;
            align-items: center;

            .why-fundraise-sub-text {
                width: 100%;

                @include media-min-xl {
                    width: 85%;
                }

                .fundraise-nav-pills {
                    cursor: pointer;

                    .active {
                        color: $dark-blue;
                        position: relative;

                    }

                    .active::after {
                        content: "";
                        position: absolute;
                        width: 200px;
                        /* Set width of the line to 50% of the text */
                        height: 5px;
                        /* Thickness of the line */
                        background-color: $dark-blue;
                        /* Color of the line */
                        left: 0;
                        bottom: -10px;
                        /* Adjust the distance from the text */
                    }
                }

                .supporter-nav-pills {
                    cursor: pointer;

                    .active {
                        color: $dark-blue !important;
                        position: relative;

                    }

                    .active::after {
                        content: "";
                        position: absolute;
                        width: 200px;
                        /* Set width of the line to 50% of the text */
                        height: 5px;
                        /* Thickness of the line */
                        background-color: $dark-blue;
                        /* Color of the line */
                        left: 0;
                        bottom: -10px;
                        /* Adjust the distance from the text */
                    }
                }

                .sub-text {
                    p {
                        font-size: 18px;
                        font-weight: 600;
                    }

                    .p-inactive {
                        color: #444444;
                    }

                    .small-inactive {
                        color: #6A6A6A;
                    }
                }

                .fundraise-img-div {
                    .moblie-img {
                        width: 70%;

                        @include media-min-sm {
                            width: 50%;
                        }

                        @include media-min-md {
                            width: 40%;
                        }

                        @include media-min-lg {
                            width: 50%;
                        }

                        @include media-min-xl {
                            width: 50%;
                        }
                    }
                }

                .supporter-img-div {
                    .moblie-img {
                        width: 70%;

                        @include media-min-sm {
                            width: 50%;
                        }

                        @include media-min-md {
                            width: 40%;
                        }

                        @include media-min-lg {
                            width: 80%;
                        }

                        @include media-min-xl {
                            width: 75%;
                        }
                    }
                }
            }

            .why-fundraise-sub-redeem-coupon {
                .sub-text {
                    p {
                        font-size: 18px;
                        font-weight: 600;
                    }

                    .text-light-dark {
                        color: #444444;
                    }
                }

                .moblie-img {
                    width: 100%;
                }

                .redeem-img-div {
                    .moblie-img {
                        width: 60%;

                        @include media-min-sm {
                            width: 45%;
                        }

                        @include media-min-md {
                            width: 30%;
                        }

                        @include media-min-lg {
                            width: 67%;
                        }

                        @include media-min-lg-xx {
                            width: 60%;
                        }

                        @include media-min-xl {
                            width: 45%;
                        }

                        // @include media-min-xxl {
                        //     width: 62.5%;
                        // }
                    }
                }

                .side-menu-img-div {
                    .moblie-img {
                        width: 60%;

                        @include media-min-sm {
                            width: 45%;
                        }

                        @include media-min-md {
                            width: 30%;
                        }

                        @include media-min-lg {
                            width: 67%;
                        }

                        @include media-min-lg-xx {
                            width: 60%;
                        }

                        @include media-min-xl {
                            width: 45%;
                        }

                        // @include media-min-xxl {
                        //     width: 62.5%;
                        // }
                    }
                }
            }
        }
    }

    .admin-dashboard {
        .admin-card {
            background-color: $white;
            min-height: 170px;
            margin-bottom: 20px;
            position: relative;
            font-size: 16px;
            padding: 13px;
            border-left: 3px solid $orange-clr;
            border-bottom: 3px solid $orange-clr;
            border-radius: 8px;
            display: flex;
            justify-content: center;
            align-items: center;

            @include media-min-xl {
                min-height: 140px;
            }

            @include media-min-xxl {
                min-height: 170px;
            }
        }

        .admin-card::after {
            background-color: $orange-clr;
            border-radius: 50%;
            content: "";
            position: absolute;
            width: 10px;
            height: 10px;
            bottom: 60px;
            right: -4px;

        }

        .admin-card::before {
            content: "";
            position: absolute;
            right: 0;
            bottom: 2px;
            width: 2.5px;
            height: 40%;
            /* or 100px */
            border-bottom-right-radius: 10px;
            background: $orange-clr;
        }

        .participant-card {
            background-color: $white;
            // min-height: 100px;
            border-radius: 6px;
            border-left: 10px solid $orange-clr;

            @include media-min-xxl {
                min-height: 203px;
            }

            table {
                @include media-min-xxl {
                    margin-top: 30px;
                    margin-bottom: 15px;
                }

                td {
                    font-size: 16px;
                    padding: 0px 15px;

                    @media (min-width: 0px) and (max-width: 1400px) {
                        display: block;
                        width: 100%;
                        margin-bottom: 5px;
                    }

                    @media (min-width: 1401px) {
                        border-right: 2px solid;
                    }

                    // @include media-min-xxl {
                    //     border-right: 2px solid;
                    // }
                }

                td:first-child {
                    padding-right: 15px;
                }

                td:last-child {
                    padding-left: 15px;
                    border-right: 0px;
                }
            }
        }
    }

    .participant-dashboard {
        .small-card {
            background-color: $white;
            border-radius: 5px;
            border-left: 10px solid $orange-clr;
            font-weight: 600;
            font-size: 16px;

            @include media-min-lg {
                border-radius: 3px;
                border-left: 8px solid $orange-clr;
            }
        }

        .head {
            font-weight: 600;
            font-size: 18px;
        }

        .participant-card {
            background-color: $white;
            // min-height: 100px;
            border-radius: 6px;
            border-left: 10px solid $orange-clr;

            @include media-min-xxl {
                min-height: 203px;
            }

            table {
                @include media-min-xxl {
                    margin-top: 30px;
                    margin-bottom: 15px;
                }

                td {
                    font-size: 16px;
                    padding: 0px 15px;

                    @media (min-width: 0px) and (max-width: 1400px) {
                        display: block;
                        width: 100%;
                        margin-bottom: 5px;
                    }

                    @media (min-width: 1401px) {
                        border-right: 2px solid;
                    }

                    // @include media-min-xxl {
                    //     border-right: 2px solid;
                    // }
                }

                td:first-child {
                    padding-right: 15px;
                }

                td:last-child {
                    padding-left: 15px;
                    border-right: 0px;
                }
            }
        }
    }

    .stoties {
        .stoties-content {
            .carousel-card {
                display: flex;
                justify-content: center;
                align-items: center;

                .carousel-card-inner {
                    background-color: $white;
                    box-shadow: 0px 0px 10px gray;
                    border-radius: 15px;

                    @include media-min-xl {
                        width: 80%;
                    }

                    @include media-min-xxl {
                        width: 70%;
                    }


                    .stoties-img {
                        width: 100%;

                        @include media-max-md {
                            aspect-ratio: 16 / 12;
                            object-fit: contain;
                        }

                        @include media-min-md {
                            border-top-left-radius: 15px;
                            border-bottom-left-radius: 15px;
                        }
                    }

                    .head {
                        font-size: 18px;
                        font-weight: 600;
                    }

                    .text {
                        font-size: 16px;
                        line-height: 30px;

                        @include media-min-lg {
                            font-size: 18px;
                            line-height: 35px;
                        }
                    }
                }
            }

            .carousel-control-prev-icon,
            .carousel-control-next-icon {
                display: none;
            }

            .carousel-control-prev::after,
            .carousel-control-next::after {
                font-family: "Font Awesome 6 Free";
                font-weight: 900;
                color: $dark-blue;
                /* Change to your preferred color */
                font-size: 35px;
                /* Adjust size as needed */
            }

            .carousel-control-prev::after {
                content: "\f060";
                /* Font Awesome left arrow icon */
            }

            .carousel-control-next::after {
                content: "\f061";
                /* Font Awesome right arrow icon */
            }
        }
    }

    .send-app {
        .send-app-card {
            box-shadow: 0px 5px 20px gray;
            border-radius: 10px;

            .card-inner {
                text-align: center;

                @include media-min-lg {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                }

                .QR-code {
                    width: 175px;
                    height: 175px;
                    border: 2px solid lightgray;
                    background: #e9ecefab;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    font-weight: bold;
                    /* Optional: to make the text stand out */
                }
            }

            .send-app-img-div {
                img {
                    width: 84%;
                }
            }
        }
    }

    .modal {
        .image-name {
            font-size: 20px;
            font-weight: 600;
        }
    }

    .participant-share-dialog-box {
        max-width: 950px !important;

        .body-para {
            font-family: "poppins", sans-serif;
            line-height: 35px;
            font-weight: 500;
            font-size: 14px;
        }
    }

    .img-border {
        border: 10px solid #3B56A7;
        border-radius: 25px;
    }


}
/* CARD */
.sport-card {
    background: #ffffff;
    border-radius: 20px;
    padding: 12px;
    position: relative;
    text-align: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}