@media (min-width: 992px) and (max-width: 1199.98px) {
    header .navbar .navbar-container {
        flex-wrap: wrap;
    }

    header .navbar .navbar-brand {
        width: 100%;
        text-align: center;
        margin-left: 0;
    }

    .categories .categories-box .category {
        width: calc(25% - 20px);
    }

    .situations .situations-box .big-situation {
        display: flex;
        flex-direction: row;
        align-items: stretch;
        justify-content: center;
    }

    .situations .situations-box .situation .image-box {
        width: 350px;
    }

    .situations .situations-box .situation .content {
        width: calc(100% - 350px);
    }

    .donations .top-box {
        justify-content: center;
        flex-wrap: wrap;
    }

    .donations .top-box .right {
        justify-content: center;
        flex-wrap: wrap;
        margin-left: 0;
    }

    .donations .top-box .right .cats {
        justify-content: center;
        flex-wrap: wrap;
        margin-left: 0;
        width: 100%;
    }

    .donations .top-box .right .cat {
        margin-block: 10px;
    }

    .donations .top-box .right .title-box {
        margin-left: 0;
        margin-bottom: 10px;
    }

    .donations .top-box .left {
        margin-top: 10px;
        width: 100%;
        text-align: center;
    }

    .donations .top-box .left .read-more {
        display: inline-flex;
    }
}


@media (max-width: 991.98px) {
    header .mobile-header {
        position: absolute;
        top: 0;
        right: 0;
        width: 300px;
        padding: 20px;
        background-color: var(--white-color);
        z-index: 1000;
        border-top-left-radius: 30px;
        border-bottom-left-radius: 30px;
    }

    header .mobile-header .logo {
        display: inline-block;
        max-height: 65px;
        margin-bottom: 20px;
        margin-inline: auto;
    }

    header .mobile-header .top {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 10px;
    }

    header .mobile-header .top .title {
        font-size: 16px;
        font-weight: bold;
        color: var(--gray-color);
    }

    header .mobile-header .top .btn {
        background-image: unset;
        opacity: 1;
        background-color: var(--primary-color);
        padding: 5px;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 30px;
        height: 30px;
    }

    header .mobile-header ul li a {
        color: var(--dark-color);
        font-weight: 600;
        font-size: 17px;
    }

    header .mobile-header ul > li:hover a ,
    header .mobile-header ul > li.active a {
        color: var(--primary-color);
        font-weight: bold;
    }

    header .mobile-header ul li .dropdown-menu li a {
        color: var(--dark-color);
        font-weight: 600;
        font-size: 17px;
    }

    header .mobile-header ul li .dropdown-menu li:hover a {
        color: var(--white-color);
        background-color: var(--primary-color);
    }

    header .top-nav .right-box .right,
    header .top-nav .right-box .left {
        margin-bottom: 10px;
    }

    header .top-nav .right-box,
    header .top-nav .right-box .right,
    header .top-nav .right-box .left {
        justify-content: center;
    }

    header .navbar .navbar-collapse {
        display: none;
    }

    header .top-nav .left-box {
        text-align: center;
    }

    header .hero .hero-box .content-box {
        width: 80%;
    }

    header .navbar .navbar-nav:first-of-type .nav-item {
        margin-left: 0;
        margin-bottom: 10px;
    }

    header .navbar .navbar-nav:last-of-type .nav-item .nav-link {
        display: none !important;
    }

    header .navbar .navbar-brand {
        display: none;
    }

    header .navbar .mobile-section .navbar-brand {
        display: block;
    }

    header .navbar .mobile-section {
        display: flex;
    }

    header .navbar .mobile-section .auth-box a {
        display: inline-block;
        background-color: var(--primary-color);
        color: var(--white-color);
        padding: 10px 20px;
        border-radius: 10px;

    }

    header .navbar .mobile-section ul {
        display: flex;
    }

    .categories .categories-box .category {
        width: 100%;
        display: block;
    }

    .situations .situations-box .big-situation {
        display: flex;
        flex-direction: row;
        align-items: stretch;
        justify-content: center;
    }

    .situations .situations-box .situation .image-box {
        width: 300px;
    }

    .situations .situations-box .situation .image-box .sharing-box {
        display: block;
    }

    .situations .situations-box .situation .content {
        width: calc(100% - 300px);
    }

    .donations .top-box {
        justify-content: center;
        flex-wrap: wrap;
    }

    .donations .top-box .right {
        justify-content: center;
        flex-wrap: wrap;
        margin-left: 0;
    }

    .donations .top-box .right .cats {
        justify-content: center;
        flex-wrap: wrap;
        margin-left: 0;
        width: 100%;
    }

    .donations .top-box .right .cat {
        margin-block: 10px;
    }

    .donations .top-box .right .title-box {
        margin-left: 0;
        margin-bottom: 10px;
    }

    .donations .top-box .left {
        margin-top: 10px;
        width: 100%;
        text-align: center;
    }

    .donations .top-box .left .read-more {
        display: inline-flex;
    }

    .sms-donations .donations-box .donation img {
        height: 200px;
    }

    .videos-sec .videos-box .video .item {
        width: 90%;
        margin-inline: auto;
    }

    .videos-sec .videos-box .owl-nav .owl-prev {
        right: -30px;
    }

    .videos-sec .videos-box .owl-nav .owl-next {
        left: -30px;
    }

    .testimonials .testimonials-box .testimonial .image-box,
    .testimonials .testimonials-box .testimonial .name {
        display: none;
    }

    .testimonials .testimonials-box .owl-item.center .image-box,
    .testimonials .testimonials-box .owl-item.center .name {
        display: block;
    }

    .testimonials .testimonials-box .owl-item.center .testimonial {
        transform: translateX(-50%) scale(1);
        top: -30px;
        padding: 20px;
    }

    footer .box:first-of-type {
        margin-top: 40px;
        text-align: center;
    }

    footer .box:first-of-type .social {
        justify-content: center;
    }

    footer .bottom-box {
        flex-wrap: wrap;
        justify-content: center;
        text-align: center;
    }

    footer .bottom-box .item {
        width: 100%;
    }

    footer .bottom-box .item:last-of-type {
        justify-content: center;
    }

    footer .bottom-box .item:nth-of-type(2) {
        margin-block: 10px;
    }

    footer .box:nth-of-type(2) .title {
        width: 100%;
    }

    footer .box:nth-of-type(2) ul {
        width: 100%;
    }
}

@media (max-width: 767.98px) {
    .categories .categories-box .category {
        width: 100%;
        display: block;
    }

    .situations .situations-box .big-situation {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .situations .situations-box .situation .image-box {
        width: 100%;
        height: 300px;
        flex: unset;
        border-bottom-right-radius: 0;
        border-top-left-radius: 20px;
    }

    .situations .situations-box .situation .image-box .sharing-box,
    .donations .bottom-box .donation .image-box .sharing-box,
    .gifts .bottom-box .gift .image-box .sharing-box {
        display: block;
    }

    .situations .situations-box .situation .content,
    .donations .bottom-box .donation .content {
        width: 100%;
    }

    .donations .top-box,
    .gifts .top-box {
        justify-content: space-between;
        flex-wrap: wrap;
    }

    .donations .top-box .right {
        justify-content: start;
        flex-wrap: nowrap;
        margin-left: 20px;
    }

    .donations .top-box .right .cats {
        display: none;
    }

    .donations .top-box .bottom {
        display: block;
        max-width: 100%;
    }

    .donations .top-box .bottom .cats .owl-stage-outer {
        padding-block: 20px;
    }

    .donations .top-box .left {
        margin-top: 0;
        width: unset;
        text-align: center;
    }

    .donations .top-box .left .read-more,
    .gifts .top-box .left .read-more {
        padding-inline: 20px;
        display: inline-flex;
    }

    .donations .bottom-box .donation .content .donation-title,
    .gifts .bottom-box .gift .content .gift-title {
        margin-top: 0;
    }

    .donations .bottom-box .donation .content .top,
    .gifts .bottom-box .gift .content .top {
        position: relative;
        padding: 10px 0 20px;
        box-shadow: unset;
        background-color: #FFFFFF;
        border-radius: 0;
        left: unset;
        transform: unset;
        width: 100%;
        top: unset;
    }

    .donations .bottom-box .donation .content .collect,
    .gifts .bottom-box .gift .content .collect {
        text-align: start;
    }

    .gifts .top-box .right {
        margin-left: 0;
        width: 100%;
        text-align: center;
        justify-content: center;
    }

    .gifts .top-box .left {
        margin-top: 20px;
        text-align: center;
        width: 100%;
    }

    .partners .partner-box .owl-stage-outer {
        margin-inline: 0;
    }

    .partners .partner-box .owl-stage-outer .owl-stage {
        padding-right: 10px !important;
    }

    .partners .partner-box .item {
        height: 150px;
        padding: 20px;
    }

    .partners .partner-box .item img {
        max-height: 100px;
    }

    footer .box:nth-of-type(3) img {
        margin-inline: auto;
        margin-top: 30px;
    }
}

@media (max-width: 575.98px) {
    #hello_bar div {
        font-size: 9px !important;
    }
    #hello_bar div img {
        width: 20px;
        height: auto !important;
    }
    .banner-content {
        width: 95% !important;

    }
    #hello_bar {
        padding: 20px;
    }
    #hello_bar div {
        flex-direction: column !important;
    }
    .banner-content h2 {
        font-size: 12pt !important;
    }
    .banner-sec p {
        font-size: 10pt !important;
    }
    .side-menu-wrapper .box ul {
        flex-direction: row;
    margin: 0;
    gap: 10px;
    }
    .side-menu-wrapper {
        bottom: 0;
        width: 100%;
        transform: none;
        top: unset;
    }
    .side-menu-wrapper .open-button, .side-menu-wrapper .box .close-button {
        display: none !important;
    }

    .side-menu-wrapper .box {
        display: flex !important;
        border-bottom-right-radius: 0;
        border-bottom-left-radius: 0;
        padding: 10px !important;
        box-shadow: none;
        border-top: 1px solid var(--primary-color)

    }
    .side-menu-wrapper .box ul li {
        padding-block: 0 !important;
        border-bottom: none !important;
        flex:1
    }
    .side-menu-wrapper .box ul li a {
        font-size: 14px;
     
     
    }
    .side-menu-wrapper .box ul li a i {
        font-size: 19px;
        margin-bottom: 3px;
    }
    .modal .modal-content {
        padding-inline: 20px;
    }

    header .hero .hero-box .content-box {
        width: 90%;
    }

    header .hero .hero-box .owl-nav {
        display: none;
    }

    header .navbar .navbar-brand img {
        max-width: unset;
        height: 60px;
    }
    header .navbar {
        padding-block: 0.5rem !important;
    }
    header .navbar .mobile-section ul {
        margin-top: 5px;
        margin-bottom: 5px;
    }
    header .hero .hero-box .item {
        height: 150px;
        min-height: unset !important;
    }
    header .hero .hero-box .content-box {
        zoom:0.5
    }
    header .navbar .mobile-section ul {
        zoom:0.8
    }
    header .navbar .mobile-section .auth-box a {
        font-size: 10px !important;
    }

    header .navbar .mobile-section .auth-box a {
        margin-inline: 15px;
        font-size: 12px;
        padding: 8px 15px;
    }

    .top-nav {
        display: none;
    }

    .categories .categories-box .category {
        width: 100%;
        display: block;
    }

    .donations .bottom-box .donation .content {
        padding: 16px;
    }

    .situations .situations-box .situation .content .shares-box .owl-nav,
    .donations .bottom-box .donation .content .shares-box .owl-nav {
        display: none;
    }

    .situations .situations-box .situation .content .shares-box,
    .donations .bottom-box .donation .content .shares-box {
        padding-inline: 0;
    }

    .gifts .bottom-box .gift .content form .actions,
    .situations .situations-box .situation .content form .actions,
    .donations .bottom-box .donation .content form .actions {
        gap: 10px;
    }

    .gifts .bottom-box .gift .content form .actions .btn,
    .situations .situations-box .situation .content form .actions .btn,
    .donations .bottom-box .donation .content form .actions .btn {
        font-size: 14px;
        padding-inline: 10px;
    }

    .gifts .bottom-box .gift .content form .actions .btn i,
    .situations .situations-box .situation .content form .actions .btn i,
    .donations .bottom-box .donation .content form .actions .btn i {
        font-size: 14px;
    }

    .sms-donations {
        padding-block: 0 20px;
    }

    .sms-donations .container {
        padding-inline: 0;
    }

    .sms-donations .title,
    .sms-donations .description {
        padding-inline: 16px;
    }

    .sms-donations .bottom {
        margin-inline: 0;
    }

    .sms-donations .donations-box .owl-nav {
        display: none;
    }

    .videos-sec {
        padding-top: 40px;
        padding-bottom: 75px;
    }

    .videos-sec .videos-box .video .item {
        padding: 30px;
    }

    .videos-sec .videos-box .owl-nav {
        display: none;
    }

    .videos-sec .videos-box .owl-dots {
        bottom: -45px;
    }

    .videos-sec .videos-box .video .item .title {
        font-size: 20px;
    }

    .videos-sec .videos-box .video .item .description {
        font-size: 14px;
    }

    .partners .container {
        padding-inline: 0;
    }

    .partners .title,
    .partners .description {
        padding-inline: 16px;
    }

    .partners .partner-box .item {
        height: 100px;
        padding: 20px;
    }

    .partners .partner-box .item img {
        max-height: 70px;
    }

    .testimonials .testimonials-box .owl-item.center .testimonial {
        background-color: var(--primary-color);
        color: var(--white-color);
        position: relative;
        width: 100%;
        left: 0;
        transform: unset;
        top: 0;
        padding: 28px;
        border: none;
    }

    footer .box:first-of-type {
        margin-top: 30px;
        text-align: start;
    }

    footer .box:first-of-type .social {
        justify-content: flex-start;
    }

    footer .box:nth-of-type(3) img {
        width: 100%;
    }

    footer .bottom-box .item {
        order: 2;
        margin-block: 10px;
    }

    footer .bottom-box .item:last-of-type {
        order: 1;
    }

    footer .bottom-box .item:nth-of-type(2) {
        margin-block: 0;
    }

    footer .bottom-box .item:nth-of-type(2) {
        flex-wrap: wrap;
    }

    footer .bottom-box .item:nth-of-type(2) span:nth-of-type(2) {
        display: none;
    }

    footer .bottom-box .item:nth-of-type(2) span:last-of-type {
        display: block;
        width: 100%;
        margin-top: 10px;
    }

    .testimonials .testimonials-box .testimonial .image-box,
    .testimonials .testimonials-box .testimonial .name {
        display: block;
    }

    .testimonials .testimonials-box .testimonial .image-box {
        width: 100px;
        height: 100px;
    }

    .testimonials .testimonials-box .owl-item.center .testimonial {
        transform: scale(1.1);
    }
}