@media only screen and (min-width: 992px) and (max-width: 1024px)
{
    .navbar-brand { font-size: 1.5rem !important; }
    li { font-size: 20px; font-weight: 500;}
    h1 { font-size: 30px;}
    h2 { font-size: 23px;}
    h3 { font-size: 20px;}
    .banner p {font-size: 18px!important;}
    .text-section {font-size: 16px; line-height: 25px; }
    .pt-128px { padding-top: 4rem;}
    p {font-size: 16px; }
    .fundraising button { font-size: 18px!important;}
    .volunteer i {color: #4CB998;}
    button img {width:23px;}
    .carousel-control-next {right: -95px!important;}
    .carousel-control-prev { left: -90px!important;}
    .volunteer p {font-size: 14px;}
    .card-image-overlay { height: 179px; width: 298px;}
    .stripe {        bottom: -54px;    }
    .banner {        padding: 11rem;    }
    .icon-style::after {        left: 211px;        height: 83%;        top: 9px;    }
    .icon-style::before {        left: 86px;        height: 69%;        top: 13px;     }
    .icon-style {        height: 70px;        width: 70px;    }
    .history-banner {        padding: 9rem;        background-position-y: 5rem;    }
}

@media only screen and (min-width:768px) and (max-width:991px) 
{
.bi-grid{ font-size: 30px !important;}
    .navbar-brand {font-size: 1.25rem !important;}
    li {font-size: 16px;}
    h1 {font-size: 26px;}
    .banner p {font-size: 14px!important;}
    .text-section {font-size: 15px;line-height: 21px}
    .pt-96px {padding-top: 5rem;}
    p {font-size: 16px;    line-height: 22px;}
    .fundraising button {font-size: 16px!important; }
    h2 {font-size: 21px;}
    h3 {font-size: 18px; }
    .volunteer i {color: #4CB998;}
    .box {height: 36px; width: 16rem; margin-left: 4rem;}  
    button img {width:23px;}
    .carousel-indicators li {width: 10px; height: 10px; }
    .carousel-control-next { right: -70px!important; }
    .carousel-control-prev { left: -68px!important; }
    .volunteer p { font-size: 12px; }
    .card-image-overlay { height: 142px; width: 221px; }
    .stripe {        bottom: -95px;    }
    .sm-b-n58{bottom:-58px;}
    .banner {        padding: 11rem;    }
.about-banner {    padding: 7rem;}
.icon-style::after {    left: 161px;    height: 75%;    top: 8px;}
.icon-style::before {    left: 56px;    height: 69%;    top: 8px;}
.icon-style {    height: 50px;    width: 50px;}
.pointer::after {    left: 48.3%;}
.w-60 {    width: 50%;}
.navbar-mobile { position: fixed; overflow: hidden; top: 0; right: 0; left: 0; bottom: 0; background: #05396b85; transition: 0.3s; }
.navbar-mobile .mobile-nav-toggle { position: absolute; top: 15px; right: 15px; }
 .navbar-mobile ul { display: block!important; position: absolute; top: 55px; right: 15px; left: 15px; padding: 12px 0; background-color: #fff; overflow-y: auto; transition: 0.3s; }
.navbar-mobile a { font-size: 15px; color: #242120; }
 .navbar-mobile a:hover, .navbar-mobile .active, .navbar-mobile li:hover > a { color: #5cdb94; }
.history-banner {    padding: 8rem;    background-position-y: 5rem;}
.mobile-nav-toggle { display: block; }
 .navbar ul { display: none; }
}

@media only screen and (min-width:300px) and (max-width:767px) {
    .navbar-brand { font-size: 1.5rem !important;}
    .navbar i{font-size: 1.5rem !important;}
    .navbar i:hover{ font-size: 1rem !important;}
    li {font-size: 16px;   font-weight: 500;} 
    .banner { padding: 7rem; }
    h1 {font-size: 24px; }
    h2 { font-size: 20px; }
    h3 {font-size: 17px;}
    .banner p { font-size: 14px!important;}
    .text-section { font-size: 16px;}
    .pt-128px {padding-top: 5rem;}
    p {  font-size: 16px;}
    .volunteer i {color: #4CB998;} 
    .stripe {bottom: -61px; }
    .fundraising button { font-size: 17px!important; }
    .box {    width: 19rem;  margin-left: 19px; }
    .carousel-indicators li { width: 8px; height: 8px;  }
    .carousel-indicators { bottom: -46px!important; }
    .card-image-overlay {   height: 210px;    width: 367px;   }
    .mobile-nav-toggle { display: block; }
 .navbar ul { display: none; }
.sm-b-n68 {        bottom: -58px;        } 
 .sm-b-n28 {            bottom: -28px;        }
.about-banner {    padding: 7rem;}
.icon-sm-style{    height:100px;    width:100px;    top:10px;    left:10px;}
.text-green {    color: #17a77d;    font-size: 18px;}
.history-banner {    padding: 8rem;    background-position-y: 0rem;    background-position-x: -20rem;}
.price-shadow {    width: 60%;  }
.navbar-mobile { position: fixed; overflow: hidden; top: 0; right: 0; left: 0; bottom: 0; background: #05396b85; transition: 0.3s; }
.navbar-mobile .mobile-nav-toggle { position: absolute; top: 15px; right: 15px; }
 .navbar-mobile ul { display: block!important; position: absolute; top: 55px; right: 15px; left: 15px; padding: 12px 0; background-color: #fff; overflow-y: auto; transition: 0.3s; }
.navbar-mobile a {  font-size: 15px; color: #242120; }
 .navbar-mobile a:hover, .navbar-mobile .active, .navbar-mobile li:hover > a { color: #5cdb94; }

}