@import url('https://fonts.googleapis.com/css2?family=Cedarville+Cursive&family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,800&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,200;1,400;1,500;1,600;1,700;1,800&family=Roboto:ital,wght@0,400;0,500;0,900;1,100;1,300;1,700&display=swap');
body{
    font-family: 'Open Sans', sans-serif;
}
.borderr{
   border: 2px solid red;
}
.border{
    border:1px solid black;
}
.pad0{
    padding: 0px;
}
.padtb20{
    padding-block: 20px;
}
.padtb50{
    padding-block: 50px;
}

/* header */

.header{
    background-color: #ffffff;
    box-shadow: rgba(50, 50, 93, 0.25) 100px 30px 60px -30px;
    padding: 15px 0px;
}
.logo img{
    width: 100%;
}
/* navbar */

.navBar{
    font-family: 'Poppins','Roboto';
}
.navBar ul{
   list-style: none;
   margin: 0px;
   padding: 0px;
   margin-top: 5px;
}
.navBar ul li{
   display: inline-block;
}
.navBar  li a{
   color:  #666;
   font-size: 14px;
   text-decoration: none;
   font-weight: 400;
   display: block;
   padding: 8px 10px;
}
.navBar ul ul{
    display: none;
    background: #FFF;
    width: 200px;
    z-index: 1;
    position: absolute;
    margin: 0px;
    border-radius: 5px;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px;
}
.navBar li li{
    display: block;
    text-align: left;
}
.navBar li:hover ul{
    display: block;
}

.navBar a:hover{
   background: red;
   color: #FFF;
   transition: all 0.5s ease-in-out;
}
.headerBtn{
    text-align: right;
    padding: 0px;
}
.headerBtn a{
    display: inline-block;
    text-decoration: none;
    padding: 8px 12px;
    margin-top: 5px;
    margin-left: 20px;
    background-color: red;
    color: #FFF;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
}

.mobile{
    display: none;
}
.bi-list{
    font-size: 2em;
    color: red;
}
.mobilenavbar
{
    position: fixed;
    height: 100%;
    width: 300px;
    height: 100%;
    background: #FFF;
    z-index: 40;
    overflow: auto;
    top: 0px;
    left: -300px;
    transition: all 0.25s linear;
    padding: 50px 0px;
}
.mobilenavbar.active{
    left: 0px;
    box-shadow: 1px 0px 30px 0px #123;
}
.mobilenavbar img{
    position: absolute;
    right: 20px;
    top: 20px;
    width: 40px;
}
.mobilenavbar ul{
    padding: 0px;
    margin:0px;
    list-style: none;
}
.mobilenavbar ul li a{
    color: #006666;
    display: block;
    text-decoration: none;
    height: 40px;
    line-height: 40px;
    padding: 0px 20px;
    font-size: 13px;
    text-transform: uppercase;
    font-weight: 500;
}
.menuactive{background: #4344; color: #000;}
#down-menu{
    display: none;
}
.mobilenavbar ul ul{
    background: #FCFCFC;
    padding-left: 20px;
}
.mobilenavbar ul ul a{
    width: 100%;
    font-weight: 500;
    text-align: left;
    line-height: unset;
    height: auto;
    padding: 10px 20px;
    display: table;
}
.mobilenavbar ul ul a i{
    width: 30px;
    display: table-cell;
}



/* slider */
.myCaption{
    padding-left: 30px;
    text-align: left;
    width: 700px;
    left:7%;
    top: 10%;
}
.myCaption h1{
    color:#cf2317;
    font-size: 4rem;
    font-weight: 700;
    text-transform: uppercase;
}
.myCaption p{
    font-family: 'Roboto','Poppins';
    color: #ffffff;
    font-size: 1.6rem;
    font-weight: 300;
}
.myCaption a{
    display: inline-block;
    text-decoration: none;
    color: #fff;
    font-weight: 600;
    width: 120px;
    padding:12px 0px;
    text-align: center;
    margin-top: 10px;
    border-radius: 4px 23px 4px 23px;
    background-color: red;
}
.myCaption a:hover{
    background: orange ;
    transition: all 0.6s ease-in-out;
}

.carousel-control{
    width: 40px;
    height: 40px;
    line-height: 40px;
}
.carousel-control-prev{
    text-align: center;
    border-radius: 100%;
    top:50%;
    margin-left:30px;
    background-image: none !important;
    background-color: rgba(255, 255, 255, .9);
}
.carousel-control-next{
    text-align: center;
    border-radius: 100%;
    top:50%;
    margin-right:30px;
    background-image: none !important;
    background-color: rgba(255, 255, 255, .9);
}
.carousel-inner img{
    width: 100vw;
}

.batt{
    background-color: red;
    border-radius: 0px 15px 0px 15px;
    color: #FFF;
    font-size: 12px;
}
/* About us */

.aboutBg {
    margin-top: 30px;
    padding: 40px;
}
.aboutDesc{
    padding: 20px;
}
.line{
    background-color: #cf2317;
    width: 85px;
    height: 2px;
    border-radius: 6px;
}
.line1{
    background-color: #cf2317;
    width: 65px;
    height: 2px;
    margin-top: 5px;
    border-radius: 5px;
}
.aboutDesc h2{
    color: #cf2317;
    font-size: 3.7rem;
}
.aboutDesc h3{
    color: #254472;
    font-size: 1.6rem;
    margin-top: 30px;
    font-weight: 700;
}
.aboutDesc p{
    color: #737373;
    font-size:1.4rem;
}
.aboutDesc h4{
    color: #254472;
    font-size:1.7rem;
    font-weight: 700;
    padding-top: 10px;
}
.Contribution b{
  color: #ff665b;
}
.Contribution i{
    display: inline-block;
    width: 25px;
    height: 25px;
    line-height: 25px;
    font-weight: 800;
    color: #254472;
    font-size: 1.9rem;
     
}
.joinIcon{
    display: inline-block;
    left: 13px;
    font-weight: 800;
    text-align: center;
    color: #254472;
    font-size: 1.3rem;
     position:absolute ;
}
.joinBtn{
    margin-top: 40px;
    margin-left: 10px;
    font-size: 1.3rem;
    border-radius: 10px;
    text-align: left;
    display: inline-block;
    position: relative;
    font-weight: 600;
}
.joinBtn a{
    text-decoration: none;
    border-radius: 10px;
    padding: 10px 18px;
    background-color: #d9dee3;
    color: #4e4e4e;
    margin-inline: 10px;
}
.joinBtn a:hover{
    box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px inset, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px inset;
    transition: all 0.5s ease-in;
    
}

/* banner */

.banerImg{
    background-color: #c013c0;
    padding-block: 25px;
}
.banerImg1{
    background-color:#0707f5;
    padding-block: 25px;
}
.banerImg2{
    background-color: #fb1717;
    padding-block: 25px;
}
.banerImg3{
    background-color: #55a60a;
    padding-block: 25px;
}
.banerImg4{
    background-color: rgb(6, 104, 174);
    padding-block: 25px;
}
.banerImg5{
    background-color: rgb(122, 9, 122);
    padding-block: 25px;
}
.banner{
  margin-top: -90px;
}
 /* Mansa-Foundation */
 .foundation{
    background-color: #fafafa;
 }

 .mansaFoundation span{
    color: #cf2317;
 }
 .FoundationBg h3,h4,p{
    font-family: 'Poppins','Roboto';
 }
 .FoundationBg p{
    color: #737373;
    font-size: 1.3rem;
 }
 .causeCard{
    border: 1px dotted red;
    padding: 2px;
 }
 .cause h4{
  font-size: 1.7rem;
  color: #254472;
  font-weight: 600;
  font-family: 'Poppins','Roboto';
  padding: 3px;
 }
 .cause b{
  color: #cf2317;
 }
 
 .cause i{
  color: #cf2317;
  display: inline-block;
  width: 25px;
  height: 25px;
  line-height: 25px;
  text-align: center;
 }
 .recentStories h3{
  font-family: 'Poppins','Roboto';
  padding-top: 10px;
  color: #254472;
  font-weight: 500;
 }
 .recentStories p{
    font-size: 1.5rem;
    padding-bottom: 10px;
 }
.storiesCard{
    margin-bottom: 20px;
} 
 .storiesCard h4{
  font-size: 1.7rem;
  color: #254472;
  font-weight: 600;
  font-family: 'Poppins','Roboto';
 }
 .storiesCard b{
  color: #cf2317;
 }
 .storiesCard p{
  color: #737373;
  font-size: 1.3rem;
  font-weight: 400;
  padding-bottom: 10px;
 }
 
 .storiesCard i{
  color: #cf2317;
  display: inline-block;
  width: 25px;
  height: 25px;
  line-height: 25px;
  text-align: center;
 }
 .recentStories h2{
  font-family: 'Poppins','Roboto';
  padding-top: 10px;
  color: #254472;
 }
 .involved h4{
  color: #254472;
  font-weight: 500;
  margin-top: 20px;
 }
 .involvedCard{
    overflow: auto;
    width: 100%;
    height: 200px;
    background-color: #f5f5f5;
 }
 .involvedCard i{
  display: inline-block;
  width: 55px;
  height: 55px;
  line-height: 55px;
  text-align: center;
  font-size: 4rem;
  color: #cf2317;
 }
 .involvedCard h4{
  display: inline-block;
 }
 .involvedCard p{
    font-size: 1.3rem;
    color: #868686;
 }
 .involvedOuter{
    margin-top: 30px;
 }
 .involvedOuter h5{
    display: inline-block;
 }

/* Why Choose Us */
.choose{
    padding-block: 50px;
    background-color: #f6f6f6;
}
.chooseDesc{
    font-family: 'Poppins','Roboto';
    margin-bottom: 20px;
}
.chooseDesc h3{
    padding-block: 10px;
    font-weight: 700;
    color:#121212
}

.mission{
/*    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;*/
    padding: 10px;
}
.mission img{
    border-radius: 10px;
}
.mission h4{
    color: #2f2f2f;
    font-weight: 600;
}
.mission p{
    font-size: 1.3rem;
    color: #272727;
    margin-top: 10px;
}

/* event */
.banner2{
    background-image: url('../img/causes-1.jpg');
    background-size: cover;
    padding: 50px 0px;
    position: relative;
    background-attachment: fixed;
 }
 .banner2::before{
    content: " ";
    position: absolute;
    background: rgba(36, 44, 56, 0.8);
    width: 100%;
    height: 100%;
    top:0%;
}
 .banner2Desc{
    color: #FFF;
    padding-inline: 30px
    margin-bottom: 30px;
    font-family: 'Poppins','Roboto';   
    margin-bottom: 150px;
}
 .banner2Desc h2{
    font-size: 3.5rem;
    color: #cf2317;
 }
 .banner2Desc h4{
    display: inline-block;
    font-size: 1.5rem;
    font-weight: 700;
 }
 
.banner2Desc i{
    display: inline-block;
    width: 30px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    font-size: 2.5rem;
    font-weight: 400;
}
 
.banner2Desc p{
    padding-block:4px;
    font-size: 1.3rem;
    font-family: 'Poppins','Roboto';
    color: #eee;
}
.eventDesc{
    background-color: #FFF;
    padding: 20px;
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
    border-radius: 10px;
}
.eventDesc img{
    width: 100%;
    margin-top: -100px;
    border-radius: 10px;
}
.date{
    width: 100px;
    background-color: #cf2317;
    color: #fff;
    font-size: 2rem;
    border-radius: 4px;
    padding: 4px;
    font-weight: 500;
    padding-left: 5px;
    margin-top: 10px;
    margin-bottom: 5px;
 }
 .date:hover{
    background-color: #254472;
    transition: all 0.5s ease-in-out;
 }
 .eventDesc{
    padding-bottom: 30px;
 }
 .eventDesc b{
     color: #fc7970;
    padding-block: 20px;
 }
 .eventDesc span{
     color: #254472 ;
 }
 .eventDesc a{
     color: #666666;
     font-size: 1.7rem; 
     font-family: 'Poppins','Roboto';
     font-weight: 500;
    text-decoration: none;
    cursor: pointer;
 }
 .eventDesc i{
    display: inline-block;
    width: 30px;
    height: 30px;
    line-height: 30px;
    text-align: center;
 }
 .eventDesc p{
    display: inline-block;
 }
 
.evenBtn{
    border: 1px solid green;
    padding: 10px 15px;
    margin-top: 20px;
}
.event a{
  text-decoration: none;
}


/* footer */
.footer{
    background:url('../img/causes-3.jpg') no-repeat;
    background-size: cover;
    padding: 50px 0px;
    position: relative;
    background-attachment: fixed;
    color: #fff;
}
.footer::before{
    content: '';
    position: absolute;
    background: rgba(0,0,0,.8);
    width: 100%;
    height: 100%;
    top:0%;
}
.footerLogo{
    text-align: center;
    margin-bottom: 50px;
    z-index: 2;
    position: relative;
}
.footerLogo img{
    width: 300px;
}
.footer h3{
    font-size: 1.4em;
}
.line{
    background-color: #cf2317;
    width: 50px;
    height: 1px;
    border-radius: 3px;
    margin-left: 3px;
}
.ftsocial i{
    display: inline-block;
    width: 30px;
    height: 30px;
    line-height: 30px;
}
.FootLogo{
    padding-bottom: 30px;
}
.FootLogo img{
    margin-top: 30px;
    padding-bottom: 20px;
}
.FootLogo p{
    font-size: 1.4rem;
    font-weight: 400;
    font-family: 'Poppins','Roboto';
}
.FootLogo i{
    display: inline-block;
    width: 40px;
    height: 40px;
    line-height: 40px;
    border-radius: 100%;
    background-color: #dbd3d3;
    text-align: center;
    color:#000;
    padding-inline: 10px;
    cursor: pointer;
}
.FootLogo i:hover{
    background-color: #d22114;
    transition : all 0.5s ease-in-out;
    color: #fff;
}
.ftlink ul{
    padding: 0px;
    margin: 0px;
    list-style: none;
    margin-bottom: 20px;
}
.ftlink li{
    border-bottom: 1px dotted red;
}
.ftlink a{
    height: 40px;
    line-height: 40px;
    display: block;
    color: #FFF;
}
.designby{
    background: rgba(0, 0, 0, 1.0);
    padding: 20px 0px;
    color: #FFF;
    font-size: 1.1em;
}
.designby a{
    color: blue;
    text-decoration: underline;
}
.design_right{text-align: right;}

#scroll {
    position:fixed;
    right:10px;
    bottom:10px;
    cursor:pointer;
    width:50px;
    height:50px;
    background-color: red;
    text-indent:-9999px;
    display:none;
    -webkit-border-radius:5px;
    -moz-border-radius:5px;
    border-radius:5px;
}
#scroll span {
    position:absolute;
    top:50%;
    left:50%;
    margin-left:-8px;
    margin-top:-12px;
    height:0;
    width:0;
    border:8px solid transparent;
    border-bottom-color:#FFFF
}


/*----------------------------How we work ----------*/
.helpPeople{
    background:url('../img/about1.jpg.webp') no-repeat;
    background-size: cover;
    padding: 50px 0px;
    position: relative;
    background-attachment: fixed;
    color: #fff;
}
.helpPeople::before{
    content: '';
    position: absolute;
    background: rgba(223, 95, 70, 0.7);
    width: 100%;
    height: 100%;
    top: 0%;
    left: 0%;
}
.helpPeopleBg{
    color: #fff;
}
.helpPeopleBg h3{
   padding-block: 10px;
}
.helpWay{
    background-color: #f0efec;
}
.helpDesc h2{
    font-size: 3.3rem;
    font-family: 'Roboto','Poppins';
    color: #4e4e4e;
    font-weight: 400;
}
.helpDesc span{
    color: #cf2317;
}
.helpWay p{
    color: #737373;
    font-family: 'Poppins','Roboto';
    font-size: 1.4rem;
    font-weight: 300;
}



/*-------------------- Donation -------------*/
.donationSec{
    background:url('../img/header-bg\ \(1\).jpg') no-repeat;
    background-size: cover;
    padding: 50px 0px;
    position: relative;
    color: #fff;
}
.donationSec::before{
    content: '';
    position: absolute;
    background: rgba(11, 11, 11, 0.5);
    width: 100%;
    height: 100%;
    top: 0%;
    left: 0%;
}
.donationHead{
    padding-inline: 50px;
    text-align: center;
    padding-inline: 30px;
    margin-bottom: 50px;
}
.donationHead h2{
    padding-bottom: 10px;
    font-size: 2.5em;
    color: #fff;
}
.donationHead p{
    font-size: 1.2em;
    font-weight: 300;
    color: #d6d6d6;
    line-height: 30px;
}
.donateDesc h5{
    color: #fff;
    font-weight: 800;
    font-size: 1.7rem;
}
.donateDesc{
    padding-top: 20px;
}
.donateDesc p{
    color: #b4b4b4;
    font-size: 1.3rem;
}
.formTag{
    margin-top: 30px;
}
.formTag input, .formTag select, .formTag textarea{
    margin-top: 20px;
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    background-color: #eee;
    border-radius: 5px;
    color: #000;
}
.formTag textarea{
    width: 100%;
    height: 100px;
    padding: 10px;
    margin-top: 20px;
    padding-left: 10px;
    border: 1px solid #ddd;
    background-color: #eee;
    border-radius: 5px;
    resize: none;
}
.formTag input[type=submit]{
    width: 150px;
    height: 50px;
    background-color: red;
    border: none;
    border-radius: 0px 20px 0px 20px;
    color: #FFF;
    font-weight: 700;
}



/*------------------------------- Mission ------------*/
.mission2{
    background:url('../img/donate3.avif') no-repeat;
    background-size: cover;
    padding: 50px 0px;
    position: relative;
    background-attachment: fixed;
    color: #fff;
}
.mission2::before{
    content: '';
    position: absolute;
    background: rgba(16, 16, 16, 0.7);
    width: 100%;
    height: 100%;
    top: 0%;
    left: 0%;
}
.mission2Bg{
    color: #fff;
}
.mission2Bg h3{
   padding-block: 10px;
}
.mission2Bg i{
    display: inline-block;
    width: 70px;
    height: 70px;
    line-height: 70px;
    text-align: center;
    font-size: 3rem;
    background-color: #2f2f2f;
    color: #fff;
    border-radius: 100%;
    margin-block: 20px;
}
.mission3Bg{
    padding-left: 50px;
    text-align: left;
}
.mission3Bg span{
   color: #aa1c0c;
   font-weight: 800;
}
.mission3Bg h1{
    font-size: 3.8rem;
    font-weight: 600;
}
.mission3Bg p{
    font-size: 1.5rem;
    color: #505050;
}


/*---------------------volunteer---------------------- */
.volunteer h4{
    color: #cf2317;
    font-weight: 600;
}
.volunteer h2{
    font-weight: 700;
    padding-bottom: 30px;
}
.voluntPic{
/*    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;*/
    border: 1px solid #eee;
    margin-bottom: 20px;
    padding: 20px;
    border-radius: 5px;
    text-align: center;
}
.voluntPic img{
    margin: auto;
    height: 200px;
    width: 200px;
    border-radius: 100%;
}
.voluntPic h3{
   margin-top: 20px; 
   font-size: 1.3em;
   font-weight: 600;
   color: #000;
}
.voluntPic b{
    color: #cf2317;
    font-weight: 500;
}

/*---------------------------------------*/

 .contactus{
    background:url('../img/donate3.avif') no-repeat;
    background-size: cover;
    padding: 100px 0px;
    position: relative;
    color: #fff;
  }
.contactus::before{
    content: '';
    position: absolute;
    background: rgba(7, 7, 7, 0.844);
    width: 100%;
    height: 100%;
    top: 0%;
    left: 0%;
}

 .contactus h1 {
    font-size: 5rem;
    color: #fff !important;;
    font-family: 'Times New Roman', Times, serif;
    font-weight: 800;
    padding-block: 10px;
    text-align: center;
    padding-bottom: 30px;
 }
 .contactus p{
    color: #b2b2b2;
    font-size: 1.5rem;
    font-family: 'poppins';
    text-align: left;
    padding-bottom: 30px;
 }
 
 
 .contactus h2{
    color: #fff;
    font-family:'Times New Roman', Times, serif;
    font-weight: 600;
    font-size: 4rem;

 }
 .Contactmail{
    padding-bottom: 15px;
 }
 .Contactmail input{
    width: 100%;
    padding: 10px;
    border-radius: 5px;
    border: 1px solid #959595;
    font-weight: 500;
    color: #fff;
    margin-block: 5px;
 }
 button{
    padding: 12px 30px;
    background-color: transparent;
    margin-top: 40px;
    border-radius: 20px;
 }
 button:hover{
   background-color: #cf2317;
   color: #fff;
   transition: all 05.s ease-in-out;
 }

 /* contact-me */

.pageHead{
    padding: 30px 10px;
    text-align: center;
    background-color: #fcf5f6;
}

.pageHead h2{
    font-weight: 400;
    color: #cf2317;
    font-size: 2em;
}
.pageHead p{
   padding-bottom:25px ;
   color: #999;
}
.social{
    text-align: center;
    padding:25px;
    border: 1px solid #eee;
    border-radius: 10px;
    margin-bottom: 20px;
}
.social i{
    display: inline-block;
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    color: red;
    font-size: 1.8rem;
    border: 1px solid #dfdfdf;
    background-color:  #ededed;
    border-radius: 100%;
}

.social i:hover{
    transition: all 0.5s ease-in-out;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px; 
    cursor: pointer;
}
.social h4{
   font-weight: 700;
   color: #322c2c;
   padding: 15px;
}

.email-box{
    padding: 20px;
    border-radius: 10px;
    border: 1px solid #eee;
}
.email-box i{
    display: inline-block;
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    color: red;
    font-size: 1.8rem;
    border: 1px solid #dfdfdf;
    background-color:  #ededed;
    border-radius: 100%;
}

/* input-box -------------------- Contact Page----------------- */
.info-sectn{
    padding-top: 18px;
    text-align: center;
}
.info-sectn input{
    padding: 20px;
}
.info-sectn textarea{
    height: 120px;
    padding: 20px;
    resize: none;
}
.info-sectn input[type="submit"]{
    background-color: #cf2317;
    color: #fff;
    font-size: 14px;
    height: 50px;
    font-weight: 700;
    border-radius: 0px 20px 0px 20px;
    text-align: center;
    padding: 0px;
    width: 150px;
}
.info-sectn input[type="submit"]:hover{
    background-color: #aa1c0c;
    transition: all 0.6s ease-in-out;
    cursor: pointer;
}

/*-----------------------------------------------------*/


.why h2{

  font-size: 3.9rem;
text-align: center;
  font-weight: 600;
  margin-block: 50px;

}
.why h4{
  font-size: 2.2rem;

}
.why li{
  font-size: 1.5rem;
  padding-top: 20px;
}






@media(max-width: 900px)
{
    .desktop{display: none;}
    .mobile{display: block;}
    .headerBtn{
        text-align: center;
    }
    .headerBtn a{
        padding: 5px 10px;
        margin-top: 10px;
        font-size: 10px;
    }
    .myCaption{display: none;}
    .carousel-inner img{
        height: 150px !important;
    }
    .aboutBg {
        padding: 0px;
    }
    .eventDesc{
        margin-bottom: 20px;
    }
    .eventDesc img{
        margin: 0px;
    }
    .footerLogo img{
        width: 200px;
    }
}