@media (min-width: 850px) and (max-width: 1159px) {

    :root {
        --font-size-s: 0.7rem;
        --font-size-m: 0.9rem;
        --font-size-n: 1rem;
        --font-size-l: 1.2rem;
        --font-size-xl: 1.4rem;
        --font-size-x2: 2rem;
        --font-size-x3: 3rem;

        --transition-n: all 0.25s;
    }

    nav .contact-details-container {
        width: 40%;
        padding:  6px !important;
    }

    nav .contact-details-container .cdc-container .cdc-details {
        display: none !important;
    }

    .main-center .main-center-container {
        top: 6rem;
    }

    .main-center-container .mcc-quote-bottom {
        font-size: 2rem;
    }

    .lower-quote {
        font-size: 2rem;
        max-width: 80vw;
    }

    .about-container {
        padding: 0 2rem;
    }

    .about-container .about-quote-2 {
        font-size: 2rem;
    }

    .services .service-bg img {
        width: 40%;
    }

    .services .service-bg .service-icon1 {
        margin: 10rem 0 -3rem 0;
    }

    .services .service-bg .service-icon2 {
        width: 30%;
    }

    .ask-voln {
        max-height: 4rem;
    }

    .ask-voln .av-bg .av-bg-bottom {
        margin-top: 8rem;
    }

    .ss-left .about-quote-2 {
        font-size: 2rem !important;
    }

    .ss-right .ss-right-quote {
        width: 70%;
    }

    .sec-vol-container {
        width: 85%;
    }

    .donate-container {
        width: 90%;
    }

    .donate-card {
        max-width: 25vw;
    }

    .footer {
        padding: 10rem 10% 5rem;
        justify-content: space-between;
        gap: 1rem;
    }

    .footer-links {
        justify-content: space-between;
        width: 60%;
        padding-left: 2rem;
    }

}

@media (min-width: 560px) and (max-width: 850px) {

    :root {
        --font-size-s: 0.6rem;
        --font-size-m: 0.8rem;
        --font-size-n: 1rem;
        --font-size-l: 1.1rem;
        --font-size-xl: 1.3rem;
        --font-size-x2: 2rem;
        --font-size-x3: 3rem;

        --transition-n: all 0.25s;
    }

    nav .contact-details-container {
        display: none !important;
    }

    .main-center .main-center-container {
        top: 4rem;
    }

    .main-center-container .mcc-quote-bottom {
        font-size: 1.5rem;
    }

    .navbar .nav-menu {
        display: none !important;
    }

    #nav-dropdown-toggle {
        display: block;
    }

    .navbar-quote {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 4px;
    }

    .lower-quote {
        font-size: 2rem;
        max-width: 80vw;
    }

    .services .service-bg img {
        width: 40%;
    }

    .services .service-bg .service-icon1 {
        margin: 10rem 0 -3rem 0;
    }

    .services .service-bg .service-icon2 {
        width: 30%;
    }

    .about-us {
        grid-template-columns: 1fr;
        margin: 0 6%;
    }

    .about-container {
        padding: 2rem 0;
    }

    .about-container .about-quote-2 {
        font-size: 2rem;
    }

    .ask-voln .av-bg .av-bg-bottom {
        margin-top: 10rem;
    }

    .ss-right-image {
        width: 90%;
    }

    .ss-left .about-quote-2 {
        font-size: 1.5rem !important;
    }

    .ss-right .ss-right-quote {
        width: 90%;
        top: 40%;
        padding: 1rem;
    }

    .sec-vol-container {
        width: 85%;
    }

    .image-container {
        grid-template-columns: repeat(3, 1fr);
    }

    .donate-container {
        width: 90%;
    }

    .donate-card {
        max-width: 35vw;
    }

    .footer {
        padding: 7rem 5% 5rem;
        flex-wrap: wrap;
    }

    .footer-section {
        width: 100%;
    }

    .footer-links {
        padding-left: 0;
        width: 100%;
        flex-wrap: nowrap;
        justify-content: space-evenly;
    }
}

@media screen and (max-width: 559px) {
    
    :root {
        --font-size-s: 0.6rem;
        --font-size-m: 0.8rem;
        --font-size-n: 1rem;
        --font-size-l: 1.1rem;
        --font-size-xl: 1.3rem;
        --font-size-x2: 2rem;
        --font-size-x3: 3rem;

        --transition-n: all 0.25s;
    }
    
    nav {
        padding: 0;
    }

    main {
        margin-top: 7rem;
    }

    nav .contact-details-container {
        display: none !important;
    }

    .main-center .main-center-container {
        top: 4rem;
    }

    .main-center-container .mcc-quote-bottom {
        font-size: 1.5rem;
    }

    .join-us-container .member-content {
        display: none;
    }

    .hero-card {
        height: 40vh !important;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .hero-card img {
        transform: scale(3);
        transform-origin: top;
    }

    .navbar-quote {
        display: flex;
        flex-direction: column;
    }

    .navbar .nav-menu {
        display: none !important;
    }

    #nav-dropdown-toggle {
        display: block;
    }

    .services {
        padding: 2rem 0;
    }

    .lower-quote {
        font-size: 1.4rem;
        max-width: 90vw;
    }

    .about-container .about-quote-1 {
        font-size: 1.4rem;
    }

    .services .service-bg img {
        width: 40%;
    }

    .services .service-bg .service-icon1 {
        margin: 10rem 0 -3rem 0;
    }

    .services .service-bg .service-icon2 {
        width: 30%;
    }

    .about-us {
        grid-template-columns: 1fr;
        margin: 0;
    }

    .about-container {
        padding: 2rem 0;
    }

    .about-container .about-quote-2 {
        font-size: 1.4rem;
    }

    .about-checks-container {
        column-gap: .5rem;
    }

    .about-checks-container div i {
        margin-right: 4px;
    }

    .ask-voln .av-bg .av-bg-bottom {
        margin-top: 14rem;
    }

    .ask-voln .av-bg .av-bg-bottom img {
        max-width: 45vw;
    }

    .ask-c-content {
        font-size: var(--font-size-xl);
        width: 100vw;
        padding: 0 10vw
    }

    .success-story {
        display: flex;
        flex-direction: column;
        width: 100vw;
        gap: 2rem;
        padding: 5rem 10vw;
    }

    .ss-left .about-quote-2 {
        font-size: 1.5rem !important;
    }

    .ss-right-image {
        top: 5rem;
    }

    .ss-right .ss-right-quote {
        width: 90%;
        top: -2rem;
        margin-left: -1.5rem;
        padding: 1rem;
    }

    .section-volunteer {
        margin-top: calc(20rem - calc(0.4 * calc(559px - 100vw)));
    }

    .sec-vol-container {
        width: 80%;
    }

    .sec-vol-container .svc {
        max-width: 90%;
    }

    .image-container {
        grid-template-columns: repeat(2, 1fr);
    }

    .donate-container {
        width: 90%;
    }

    .donate-card {
        max-width: 60vw;
    }

    .footer {
        padding: 5rem 5%;
        flex-wrap: wrap;
    }

    .footer-section {
        width: 100%;
    }

    .footer-links {
        padding-left: 0;
        width: 100%;
        flex-wrap: nowrap;
        justify-content: space-evenly;
    }

}