/* extra large screens upwards */
@media (min-width: 1600px) {

    p,
    li {
        font-family: 'Graphik-Regular', sans-serif;
        font-size: 16px !important;
    }


    .btn,
    button {

        font-size: 16px !important;

    }

    .spacer-2 {
        height: 12em;
    }

    .about-hero-image {
        top: 35em;
    }

    .hero-section {
        h2 {
            font-size: 60px;
            color: var(--white);
            line-height: 55px;
            text-transform: uppercase;
        }
    }

    .events-hero,
    .donation {

        height: 75em;
    }

    .community {
        height: 75em;
    }

    .title-page {
        height: 55em;
    }

    .ignite {
        padding: 4em 0;
        background: url(/assets/images/community/ignite.webp) no-repeat;
        background-size: cover;
        background-position: center;
        height: 60em;
    }

    
}

/* tablets downward */
@media (max-width: 1000px) {
    .nav {
        .d-flex {
            gap: 15px;
            margin-bottom: 10px;
        }
    }

    .donation {
        background: url(/assets/images/donate/hero-background.webp) no-repeat;
        background-size: cover;
        background-position: center;
        height: 50em;
    }

    .how-section {
        & .text-frame {
            h2 {
                line-height: 35px;
                color: var(--black);
            }
        }
    }

    .community {
        padding: 0 1em !important;
        height: 50em;

        h2,
        .h2,
        p {
            text-align: center !important;
        }
    }

    .com-about-section {
        .row {
            gap: 5em;
        }
    }

    .ignite {
        height: 40em;

        .cta {
            display: flex;
            justify-content: start;
        }
    }


    .newsletter {
        padding: 4em 2em;

        .row {
            gap: 10px;
        }

        .btns {
            display: flex;
            flex-direction: column;
            gap: 10px;

            input {
                height: 3.5em;
            }

            button {
                width: 100%;
                position: unset;
                height: 3.5em;
            }
        }
    }

    /* how section styling  */
    .how-section {
        background-color: #fff;
        padding: 4em 2em;

        .row {
            margin-bottom: 3em;
            justify-content: space-between;
        }

    }

    .scaffold {
        & .base {
            .row {
                justify-content: center;
            }

            & .left {
                display: none;
            }

            & .right {
                padding: 0 2em 1em;
                height: 100vh;

                .wrapper {
                    width: 30em;
                    max-width: 30em;
                }
            }
        }
    }

    .navbar-custom {
        width: 96%;
        padding: 5px;
        top: 1em;
        background: url(/assets/images/homepage/hero-bg.webp) no-repeat;
        background-size: cover;
    }

    .footer {
        padding: 4em 5em;

        .row {
            justify-content: normal !important;
        }

    }

    .founders-section {
        & .team {
            & .frame {
                text-align: center;

                img {
                    max-width: 150px;
                }
            }
        }
    }

    .support-cause {
        .button {
            display: block;
        }
    }

    .events-section {
        .event-card {

            width: 100%;
            max-width: 100%;
        }
    }

    .blogs-section {
        .blog-card {

            width: 100%;
            max-width: 100%;
        }
    }

    .success-stories {
        .py-0 {
            padding: 0 !important;
        }

        .box {
            margin-top: 2em;
        }
    }

    .about-section {
        .row {
            gap: 0 !important;
        }

        .text-frame {
            p {
                color: var(--gray);
                font-weight: 400;
                line-height: 24px;
                text-align: left;
                min-width: auto;

            }
        }
    }

    .achievements {
        min-height: 100em;
    }

    .events-section, .blogs-section {
        .row {
            gap: 2em 0;
            padding: 1em 1em;
        }
    }
    .event-details {
        .speakers {
            display: flex;
            gap: 2em;
            justify-content: center;
        }
    }
}

/* mobile screens downward */
@media (max-width: 576px) {
    main {
        background-color: var(--body-color);
        padding: 8px 8px 0;
    }

    footer {
        margin: 0 8px 8px;
        border-radius: 0 0 1.5em 1.5em;
    }

    .spacer-2 {
        height: 8em;
    }

    section {
        padding: 25px !important;
    }

    [class^="col-xl-"],
    [class^="col-lg-"],
    [class^="col-md-"],
    [class^="col-sm-"],
    [class^="col-xs-"],
    [class*=" col-xl-"],
    [class*=" col-lg-"],
    [class*=" col-md-"],
    [class*=" col-sm-"],
    [class*=" col-xs-"] {
        padding: 0;
    }



    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    .h2,
    .h3,
    p {
        text-align: left !important;
    }

    .btn {
        align-self: left !important;
    }


    .navbar-custom {
        .d-flex {
            margin-bottom: 1em;
        }
    }

    .navbar-simple {
        width: 96%;
        padding: 5px;
        top: 1em;
    }


    .navbar-normal {
        display: flex;
        justify-content: space-between;
        padding: 1rem;
        margin-top: 2rem;
        background-color: #0A1111;
        border-radius: 20px;
    }

    .hero-section {
        padding: 0 !important;

        h2,
        .h2,
        p {
            text-align: center !important;
        }

    }



    h2 {
        font-size: 30px !important;
        line-height: 35px !important;
        /* text-align: center!important; */
    }


    h1 {
        font-size: 25px !important;
    }

    .about-section {
        .row {
            gap: 0 !important;
        }


    }

    .join-section {
        .row {
            gap: 2em;
        }
    }

    .vison-mission {
        padding: 4em 2em;

        .row {
            gap: 1em;
        }
    }

    .vison-mission {
        & .sliding-frame {
            padding: 0;

            & .row {
                & .col {
                    padding: 0;

                    .body {
                        padding-left: 2em;
                    }
                }
            }
        }
    }

    .no h1 {
        font-size: 70px !important;
    }

    .about-section {
        .text-frame {
            padding: 0 0 2em;

            .title {
                line-height: 35px;
            }
        }

        .image {
            padding: 0;
        }
    }

    .achievements {
        min-height: 85em;

        .text-frame {
            padding: 0;
        }

        .features {
            margin-top: 0;

            .col-12 {
                padding: 0;
            }
        }

    }


    .support-cause {
        height: 20em;

        .text-frame {
            align-items: start;
        }
    }

    .support-section {
        height: 25em;

        .text-frame {
            align-items: start;
        }
    }


    .events-section .view-more-btn {
        justify-content: left;
    }

    .features {
        margin-top: 0 !important;

        .row {
            padding: 0 !important;
            gap: 10px;
        }
    }

    .blog-section {
        padding: 4em 1em;
    }

    .join-section {
        .text-frame {
            padding: 0;
        }

        .points {
            margin: 0;
            padding: 20px 18px 20px 0 !important;
            display: flex;
            flex-direction: column;
            gap: 5px;
        }
    }


    .newsletter {
        padding: 4em 1em;

        .row {
            gap: 10px;
        }

        .btns {
            display: flex;
            flex-direction: column;
            gap: 10px;

            input {
                height: 3.5em;
            }

            button {
                width: 100%;
                position: unset;
                height: 3.5em;
            }
        }
    }

    .support1 {
        .text-frame {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
        }
    }

    .contact-section {
        .row .wrapper {
            padding: 0;
        }

        .box {
            padding: 1em 1em;
        }
    }

    .footer {
        padding: 4em 2em !important;

        .menus {
            gap: 30px;
            flex-direction: column;

        }

        .footer-texts {
            margin-top: 2em;

            .copyright,
            .tagline,
            .links {
                padding: 0;

                p {
                    text-align: center !important;
                }
            }

        }
    }

    /* how section styling  */
    .how-section {
        background-color: #fff;
        padding: 4em 1.2em;

        .row {
            gap: 2em !important;
            justify-content: space-between;
        }

    }

    /* about page  */
    .about {
        height: 35em;

    }

    .events-hero {
        height: 40em;
        background-position: bottom;

        .row {
            text-align: left;
        }
    }

    /* event-detail page  */
    .title-page {
        .row {
            justify-content: start;
            text-align: left;
            color: var(--white);
            position: relative;
            z-index: 2;

            .cta {
                margin-top: 1em;
                display: flex;
                justify-content: start;
            }
        }
    }

    .event-details {
        .speakers {
            display: flex;
            gap: 2em;
            justify-content: center;
        }
    }

    .faq {
        .info {
            width: auto;
        }
    }

    .about-hero-image {
        padding: 0;
        width: 100%;
    }

    .founders-section {

        .details,
        .line {
            margin-left: 0;
        }

        & .team {
            & .frame {
                img {
                    max-width: 90%;
                }
            }
        }
    }

    .success-stories {
        & .box {
            margin-top: 2em;

            .row {
                gap: 2em;
            }

            .story {
                color: #343434;
                height: 12em;
            }
        }
    }

    .events-section, .blogs-section {
        .search-bar {
            padding: 0;
        }

        .custom-search-bar {
            border-radius: 10px;
            /* gap: 10px; */
            position: relative;
            display: flex;
            flex-wrap: wrap;
            justify-content: flex-end;
            flex-direction: column-reverse;
            align-items: flex-end;
        }

        .custom-search-bar .search-icon {
            background: transparent;
            border: none;
            position: absolute;
            right: 1rem;
            top: 76%;
            transform: translateY(-50%);
            z-index: 10;
            color: #343434;
        }

        .custom-dropdown-toggle {
            border-radius: 12px;
            background: #C2E7D4;
            padding: 8px 16px;
            color: #000;
            border: none;
            gap: 0;
            height: auto;
            box-shadow: none !important;
        }
    }
    .event-details {
        .entry {
            width: 100%;
        }
    }

    .achievements {
        min-height: 90em;
    }

}