@import url("../css/_intro-module.css");
@import url("../css/_split-banner.css");

    .home-shape-1{top: -36px; right: -21px;}
    .home-shape-2{top: -52px; left: 84px;}
    .home-shape-3{bottom: -35px; left: -95px;}

.donate-grid-list{  position: relative; -webkit-transition: background-color 250ms ease-out ;-ms-transition: background-color 250ms ease-out; transition: background-color 250ms ease-out;}
.donate-grid-svg{position: absolute; opacity: 0;}
.donate-grid-list:hover .donate-grid-svg{opacity: 1;}
.donate-grid-svg-1{top: -47px; left: -34px; width: 93px; height: 140px;}
.donate-grid-svg-2{top: -30px; right: -20px; width: 88px; height: 104px;}
.donate-grid-list h5{position: relative; z-index: 1; margin-bottom: 11px;}
.donate-grid-list p {margin-bottom: 22px;}
.donate-grid-list::before{display: none;}
.donate-grid-list.light-blue{background-color: var(--light-blue);}
.donate-grid-list.light-blue .donate-grid-svg svg {fill: var(--orange);}
.donate-grid-list.light-green{background-color: var(--light-green);}
.donate-grid-list.light-green .donate-grid-svg svg {fill: var(--pink);}
.donate-grid-list.light-pink{background-color: var(--light-pink);}
.donate-grid-list.light-pink .donate-grid-svg svg {fill: var(--violet);}
.donate-grid-list.light-red{background-color: var(--light-red);}
.donate-grid-list.light-red .donate-grid-svg svg {fill: var(--violet);}
.donate-grid-list.light-orange{background-color: var(--light-orange);}
.donate-grid-list.light-orange .donate-grid-svg svg {fill: var(--green);}
.donate-grid-list.light-violet{background-color: var(--light-violet);}
.donate-grid-list.light-violet .donate-grid-svg svg {fill: var(--pink);}
.donate-grid-list .donate-grid-svg svg mask path {fill: none !important;}
.donate-grid-list:hover {color: var(--white);  }
.donate-grid-list:hover h5{color: var(--white);}
.donate-grid-list:hover h3{color: var(--white);}

.donate-grid-list.light-blue:hover {background-color: var(--text-violetblue);}
.donate-grid-list.light-blue .outline-btn {border-color: var(--text-violetblue); color: var(--text-violetblue);}
.donate-grid-list.light-blue:hover .outline-btn {color: var(--text-violetblue);}
.donate-grid-list.light-blue .readmore {color: var(--text-violetblue);}

.donate-grid-list.light-green:hover {background-color: var(--green);}
.donate-grid-list.light-green .outline-btn {border-color: var(--green); color: var(--green);}
.donate-grid-list.light-green:hover .outline-btn { color: var(--green);}
.donate-grid-list.light-green .readmore {color: var(--green);}

.donate-grid-list.light-pink:hover {background-color: var(--pink);}
.donate-grid-list.light-pink .outline-btn {border-color: var(--pink); color: var(--pink);}
.donate-grid-list.light-pink:hover .outline-btn {color: var(--pink);}
.donate-grid-list.light-pink .readmore {color: var(--pink);}

.donate-grid-list.light-orange:hover {background-color: var(--orange);}
.donate-grid-list.light-orange .outline-btn {border-color: var(--orange); color: var(--orange);}
.donate-grid-list.light-orange:hover .outline-btn {color: var(--orange);}
.donate-grid-list.light-orange .readmore {color: var(--orange);}

.donate-grid-list.light-red:hover {background-color: var(--red);}
.donate-grid-list.light-red .outline-btn {border-color: var(--red); color: var(--red);}
.donate-grid-list.light-red:hover .outline-btn {color: var(--red);}
.donate-grid-list.light-red .readmore {color: var(--red);}

.donate-grid-list.light-violet:hover {background-color: var(--violet);}
.donate-grid-list.light-violet .outline-btn {border-color: var(--violet); color: var(--violet);}
.donate-grid-list.light-violet:hover .outline-btn {color: var(--violet);}
.donate-grid-list.light-violet .readmore {color: var(--violet);}

.donate-grid-list .outline-btn {margin: 0 4px 0 0; background: transparent;}
.donate-grid-list:hover .outline-btn {background: var(--white); border-color:var(--white);}
.donate-grid-list:hover .readmore{color: var(--white);}



footer#main_footer {border-top: 1px solid rgba(0, 0, 0, 0.1);}
/*-- media css starts here --*/

@media only screen and (min-width: 1024px) {
    .donate-grid-main{padding: 24px 0 49px 0;}
    .donate-grid-row{gap: 50px}
    .donate-grid-list{flex: 0 0 calc(33.33% - 34px);}
    .donate-grid-list .donate-grid-text {padding: 43px 50px 40px 50px;}
    .donate-btns{gap: 10px; justify-content: space-between;}

.split-banner-section .split-banner-image{margin: -50px -50px 0 0;}
}
@media only screen and (max-width: 1299px) and (min-width: 1024px){
    .home-shape-1{top: -91px; right: -75px;}
    .home-shape-2{top: -85px; left: 24px;}
    .home-shape-3{bottom: -50px; left: -120px;}
    .donate-grid-main{padding-top: 24px;}
    .donate-grid-row {gap: 25px;}
    .donate-grid-list {flex: 0 0 calc(33.33% - 17px); }
    .donate-grid-list .donate-grid-text {padding: 30px 25px;}
    .donate-grid-svg-1{top: -47px; left: -34px; width: 60px; height: 85px;}
    .donate-grid-svg-2{top: -30px; right: -20px; width: 68px; height: 84px;}
    .donate-btns {gap: 4px;}
    .donate-btns .button{padding: 7px 27px 12px 14px; font-size: 1rem;}
    .donate-btns .button::after{top: -1px; right: 13px;}

     .split-banner-section .split-banner-txt {width: 35.8%;}
    .split-banner-section .split-banner-image{margin: -50px 0 0; width: 64.2%;}
    
}
@media only screen and (max-width: 1023px) and (min-width: 768px){
    .home-shape-1{top: -15px; right: -9px;}
    .home-shape-1 svg{width: 116px; height: 174px;}
    .home-shape-2{top: -23px; left: 39px;}
    .home-shape-2 svg{width: 85px; height: 91px;}
    .home-shape-3{bottom: -20px; left: -30px;}
    .home-shape-3 svg{width: 161px; height: 123px;}
    .split-banner-section .split-banner-txt { width: 32.8%;}
    .split-banner-section .split-banner-image { width: 67.2%;}
    .donate-grid-main{padding: 24px 0 49px 0;}
    .donate-grid-list:hover .donate-grid-svg{display: none;}
    .donate-grid-row{gap: 30px;}
    .donate-grid-list{flex: 0 0 calc(50% - 15px);}
    .donate-grid-list .donate-grid-text { padding: 30px 25px;}

    .donate-btns {gap: 32px;}
    .donate-btns .button{padding: 7px 27px 12px 14px;}
    .donate-btns .button::after{top: -1px; right: 13px;}
}
@media only screen and (max-width: 767px) and (min-width: 200px){
    .donate-grid-main { margin-bottom: 60px; }
    .donate-grid-list:hover .donate-grid-svg{display: none;}
    .donate-grid-row{display: block;}
    .donate-grid-list{margin-bottom: 22px; }
    .donate-grid-list .donate-grid-text {padding: 30px 30px 32px;}
    .donate-grid-list p{font-size: 0.875rem; line-height: 1.375rem; margin-bottom: 18px;}
    .donate-btns {gap: 20px;}
    .donate-btns .button{padding: 10px 34px 12px 23px; font-size: 0.938rem;}
    .donate-btns .button::after{top: -1px; right: 15px;}

    .home-shape-1{top: -15px; right: -9px;}
    .home-shape-1 svg{width: 116px; height: 174px;}
    .home-shape-2{top: -23px; left: 39px;}
    .home-shape-2 svg{width: 85px; height: 91px;}
    .home-shape-3{bottom: -20px; left: -30px;}
    .home-shape-3 svg{width: 161px; height: 123px;}

}

@media only screen and (max-width: 385px) and (min-width: 200px){
    .donate-grid-list .donate-grid-text { padding: 30px 25px 32px;}
}