*{

  margin: 0;

  padding: 0;

  box-sizing: border-box;

  font-family: 'Caveat', cursive;

  font-size: 20px;

}



::-webkit-scrollbar{

  width: 10px;

}

::-webkit-scrollbar-track{

  background:#d1d0d0;

}

::-webkit-scrollbar-thumb{

  background: #bf0606;

}

::selection{

  background: rgba(0, 123, 255, 0.3);

}

.content{

  max-width: 1250px;

  margin: auto;

  padding: 0 30px;

}

.navbar{

  position: fixed;

  width: 100%;

  z-index: 2;

  padding: 25px 0;

  transition: all 0.3s ease;

}

.navbar.sticky{

  background: #fff;

  padding: 10px 0;

  box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.1);

}

.navbar .content{

  display: flex;

  align-items: center;

  justify-content: space-between;

}

.navbar .logo a{

  color: #000;

  font-size: 30px;

  font-weight: 600;

  text-decoration: none;

}

.navbar .menu-list{

  display: inline-flex;

}

.menu-list li{

  list-style: none;

}

.menu-list li a{

  color: #fff;

  font-size: 22px;

  font-weight: 500;

  margin-left: 30px;

  text-decoration: none;

  transition: all 0.3s ease;

}

.sticky .menu-list li a{

  color: #000;

  font-size: 22px;

  font-weight: 500;

  margin-left: 30px;

  text-decoration: none;

  transition: all 0.3s ease;

}

.menu-list li a:hover{

  color: #bf0606;

}

.banner{

  background: url("../images/Bannernew.png") no-repeat;

  height: 100vh;

  background-size: cover;

  background-position: center;

  background-attachment: fixed;

  text-align: center;

  justify-content: center;

  align-items: center;

}

.about{

  padding: 30px 0;

}

.about .title{

  font-size: 38px;

  font-weight: 700;

  justify-content: center;

  text-align: center;

  color: #e03c31;

}

.about .subtitle{

  font-size: 30px;

  font-weight: 600;

  justify-content: center;

  text-align: center;

  padding-top: 15px;

  color: #e03c31;

}

.about p{

  padding-top:20px;

  text-align: center;

  font-size: 15px;

  font-family: 'Poppins', sans-serif;

}

.icon{

  color: #e03c31;

  font-size: 20px;

  cursor: pointer;

  display: none;

}

.menu-list .cancel-btn{

  position: absolute;

  right: 30px;

  top: 20px;

}

@media (max-width: 1230px) {

  .content{

    padding: 0 60px;

  }

}

@media (max-width: 1100px) {

  .content{

    padding: 0 40px;

  }

}

@media (max-width: 900px) {

  .content{

    padding: 0 30px;

  }

}

@media (max-width: 868px) {

  .icon{

    display: block;

  }

  body .disabled{

    overflow: hidden;

  }

  .icon.hide{

    display: none;

  }

  .navbar .menu-list{

    position: fixed;

    height: 100vh;

    width: 100%;

    max-width: 400px;

    left: -100%;

    top: 0px;

    display: block;

    padding: 40px 0;

    text-align: center;

    background: rgba(0,0,0,0.5);

    transition: all 0.3s ease;

    color:#fff;

  }

  .navbar.show .menu-list{

    left: 0%;

  }

  .navbar .menu-list li{

    margin-top: 45px;

  }

  .navbar .menu-list li a{

    font-size: 23px;

    margin-left: -100%;

    transition: 0.6s cubic-bezier(0.68, -0.55,0.265,1.55);

  }

  .navbar.show .menu-list li a{

    margin-left: 0;

    color:#fff;

  }

  .banner{

    background-size: contain;

  }

}

@media (max-width:380px) {

  .navbar .logo a{

    font-size: 27px;

  }

}



/*what we do*/

#accomplishment{

  background-image: linear-gradient(135deg, rgba(0, 255, 0, 0.3) 40%, rgba(255, 255, 0, 0.3) 40% 45%, rgba(0, 0, 0, 0.3) 45% 55%, rgba(255, 255, 0, 0.3) 55% 60%, rgba(0,0,255,0.3)60%), url("../images/woman.png");

  background-position: center;

  background-size: cover;

  background-attachment: fixed;

  display: grid;

  place-items: center center;

}

#accomplishment .title{

  font-size: 38px;

  font-weight: 700;

  justify-content: center;

  text-align: center;

  color: #fff;

  margin-top: 20px;

  margin-bottom: 20px;

}

.cards{

  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(250px,1fr));

  padding: 20px;

  grid-gap: 40px;

}

.card{

  background-color: rgba(0,0,0,0.5);

  border-radius: 20px;

  box-shadow: 0 0 30px rgba(0, 0, 0, 0.18);

}

.cardimage{

  position: relative;

  clip-path: polygon(0 0,100% 0, 100% 85%, 0 100%);

}

.cardimage img{

  width: 100%;

  display: block;

  border-radius: 20px 20px 0 0;

}

.cardimage:after{

  content: '';

  height: 100%;

  width: 100%;

  position: absolute;

  top: 0;

  left: 0;

  border-radius: 20px 20px 0 0;

  opacity: 0.7;

}

/* .card1>.cardimage:after{

  background-image: linear-gradient(135deg, #00ff00, #7fff00);

}

.card2>.cardimage:after{

  background-image: linear-gradient(135deg, #2bdce3, #42ffdb);

}

.card3>.cardimage:after{

  background-image: linear-gradient(135deg, #e3f988, #bdb76b);

}

.card4>.cardimage:after{

  background-image: linear-gradient(135deg, #ffd700, #eee8aa);

}

.card5>.cardimage:after{

  background-image: linear-gradient(135deg, #ffd700, #eee8aa);

}

.card6>.cardimage:after{

  background-image: linear-gradient(135deg, #979aaa, #838996);

}

.card7>.cardimage:after{

  background-image: linear-gradient(135deg, #4169e1, #87cefa);

}

.card8>.cardimage:after{

  background-image: linear-gradient(135deg, #00ff00, #7fff00);

} */

.carddetails{

  padding: 20px 10px;

}

.carddetails>h3{

  color: #fff;

  font-weight: 600;

  font-size: 22px;

  margin: 10px 0 15px 0;

}

.carddetails>p{

  color: #fff;

  font-size: 14px;

  line-height: 30px;

  font-weight: 200;

  font-family: 'Poppins', sans-serif;

}

.cardbtn{

  margin: 10px;

  color: #000;

  padding: 10px 24px;

  background: #f1f1f1;

  text-decoration: none;

  border-radius: 12px;

  transition: .6s;

  cursor: pointer;

  font-weight: bold;

  font-family: 'Poppins', sans-serif;

  text-align: center;

  font-size: 12px;

}

.cardbtn:hover{

  opacity: .6;

}



/*Popup gallery*/



.cards#blur.active{

  filter: blur(20px);

  pointer-events: none;

  user-select: none;

}



.popup{

  position: fixed;

  margin-top: 50px;

  height: 700px;

  top: 40%;

  left: 50%;

  transform: translate(-50%,-50%);

  width: 1280px;

  max-width: 100%;

  padding: 50px;

  box-shadow: 0 5px 30px rgba(0, 0, 0, .30);

  background: #fff;

  visibility: hidden;

  opacity: 0;

  transition: 0.5s;

  z-index: 1000;

}

.popup.active{

  margin-top: 50px;

  top: 50%;

  visibility: visible;

  opacity: 1;

  transition: 0.5s;

  width: 1280px;

  max-width: 100%;

  overflow-y: scroll;

}

.popup .popcontent{

  text-align: center;

  padding: 15px;

}

.popup .popcontent h2{

  margin: 0;

  padding: 0;

  font-size: 40px;

  text-decoration: none;

  font-family: 'Caveat', cursive;

}

.popup .popcontent h3{

  margin: 0;

  padding: 0;

  font-size: 30px;

  text-decoration: underline;

  font-family: 'Caveat', cursive;

}

.popup .popcontent p{

  margin: 10px 0 0;

  padding: 0;

}

.albumimages{

  width: 1280px;

  max-width: 100%;

  margin: 20px auto 0;

  display: flex;

  flex-direction: row;

  flex-wrap: wrap;

  transition: 0.5s;



}

.albumimages .box{

  position: relative;

  width: 250px;

  height: 250px;

  margin: 10px;

  box-sizing: border-box;

  display: inline-block;

}

.albumimages .box .thumbnail{

  position: relative;

  overflow: hidden;

}

.albumimages .box .thumbnail img{

  max-width: 100%;

  width: 250px;

  height: 250px;

  object-fit: cover;

  transition: transform 2s;

}

.albumimages .box:hover .thumbnail img{

  width: 250px;

  height: 250px;

  object-fit: cover;

  transform: scale(1.2);

}

.popup .fa.fa-times{

  position: sticky;

  top: 0;

  right: 0;

  padding: 0 5px;

  color: #000;

  margin-left: 100%;

  font-size: 24px;

  color: red;

}

.popup .fa.fa-times:hover{

  color: red;

  cursor: pointer;

}



/*@media screen and (max-width: 420px){*/

/*  #accomplishment{*/

/*    background-attachment: fixed;*/

/*  }*/

/*}*/



#donation{

  background: url("../images/Bannerbg3.png") no-repeat top center rgba(0,0,0,0.5);

  background-size: cover;

  background-position: center;

  background-attachment: fixed;

  background-blend-mode: multiply;

  width: 100%;

  display: flex;

  flex-direction: column;

  justify-content: center;

  align-items: center;

}

#donation .title{

  font-size: 38px;

  font-weight: 700;

  text-align: center;

  color: #fff;

  margin-top: 20px;

  margin-bottom: 10px;

  /* position:; */

}

#donation .mytabs{

  display: flex;

  flex-wrap: wrap;

  max-width: 600px;

  margin: 50px auto;

  padding: 25px;

}

#donation .mytabs input[type="radio"]{

  display: none;

}

#donation .mytabs label{

  padding: 25px;

  background: rgba(255, 255, 255, 0.5);

  font-weight: bold;

  border-top-left-radius: 20px;

  border-top-right-radius: 20px;

}

#donation .mytabs .tab{

  width: 100%;

  padding: 20px;

  background: #fff;

  order: 1;

  display: none;

  border-radius: 20px;

  border-top-left-radius: 0;

  background: rgba(255, 255, 255, 0.5);

}

#donation .mytabs .tab h2{

  font-size: 40px;

  color: #e03c31;

}

#donation .mytabs input[type="radio"]:checked + label + .tab{

  display: block;

}

#donation .mytabs input[type="radio"]:checked + label{

  background: #fff;

  color: #e03c31;

}



#donation .Mpesalist{

  display: flex;

  flex-direction: column;

  flex-wrap: wrap;

}

#donation .Mpesalist .mpesasteps{

  margin-left: 50px;

}

/*#donation .Mpesalist .mpesasteps li{

  font-family: 'Roboto', sans-serif;

  font-size: 15px;

}*/

#donation .Mpesalist .mpesalogo{

    height: 150px;

  width: 150px;

  margin-left: 50px;

}

#donation .Mpesalist .mpesalogo img{

    height:inherit;

    width:inherit;

}

#donation .Mpesalist .acceptedcards{

  display:flex;

  margin-top:5px;

  height: 50px;

  width: 100px;

}



#donation .Mpesalist .acceptedcards img{

    margin:10px;

    padding:5px;

  height: inherit;

  width: inherit;

}



/* Card tab */

#donation .checkoutform{

  width: 100%;

  background: rgba(0, 0, 0, 0.35);

  padding: 30px;

  border-radius: 25px;

}



#donation .cardnumber{

  margin-bottom: 25px;

}

#donation input[type="text"]{

  padding: 10px;

  border-radius: 3px;

  font-size: 16px;

  border: 0;

  text-align: center;

font-family:'Roboto', sans-serif;

}

#donation input[type="email"]{

  padding: 10px;

  border-radius: 3px;

  font-size: 16px;

  border: 0;

  text-align: center;

font-family:'Roboto', sans-serif;

}

#donation input[type="password"]{

  padding: 10px;

  border-radius: 3px;

  font-size: 16px;

  border: 0;

  text-align: center;

    font-family:'Roboto', sans-serif;

}

#donation .cardnumber .input{

  width: 100%;

  text-align: left;

  margin-top: 5px;

    font-family:'Roboto', sans-serif;

}

#donation .cardgroup{

  display: flex;

  justify-content: space-between;

  margin-bottom: 25px;

}

#donation .expirydate .expiryinput{

  width: 80px;

  margin-right: 10px;

}

#donation .cvv .cvvinput{

  width: 80px;

  margin-right: 10px;

}

#donation .expirydate, .cvv{

  display: flex;

  width: 48%;

}

#donation .cvv{

  justify-content: flex-end;

  align-items: center;

}

#donation .cvvimg{

  border: 2px solid #fff;

  width: 25px;

  height: 25px;

  color: #fff;

  font-size: 18px;

  font-weight: bold;

  border-radius: 50%;

  text-align: center;

  cursor: pointer;

  position: relative;

}

#donation .cvvimg .img{

  position: absolute;

  width: 100px;

  height: 80px;

  padding: 10px 10px 5px;

  border-radius: 3px;

  top: -30px;

  right: 33px;

  background: #064887;

  display: none;

}

#donation .cvvimg .img img{

  width: 100%;

  height: 100%;

}

#donation .cvvimg:hover .img{

  display: block;

}

#donation .contactinfo .input{

  width: 100%;

  text-align: left;

  margin-top: 5px;

}

#donation .captcha{

  margin-top: 20px;

}

#donation .paybutton{

  margin-top: 10px;

  width: 100%;

  background: #064887;

  color: #fff;

  text-align: center;

  border-radius: 3px;

  padding: 10px;

  text-transform: uppercase;

  letter-spacing: 5px;

  font-size: 18px;

  cursor: pointer;

}

@media screen and (max-width: 420px) {

  #donation .cardgroup{

    flex-direction: column;

  }

  #donation .expirydate {

    width: 100%;

    justify-content: space-between;

    margin-bottom: 25px;

  }

  #donation .expirydate .expiryinput{

    width: 48%;

    margin: 0;

  }

  #donation .cvv{

    width: 100%;

    justify-content: space-between;

  }

  #donation .cvv .cvvinput{

    width: 48%;

  }

  #donation .cvv .cvvimg .img{

    right: 26px;

  }

  #donation .captcha{

    width: 48%;

  }

}

.visa {

    background: url("https://jscardvalidator-mpccmwdwqf.now.sh/cards_sprite_compressed_30.jpg")

        0 0 no-repeat;

}

.mastercard {

    background: url("https://jscardvalidator-mpccmwdwqf.now.sh/cards_sprite_compressed_30.jpg")

        0 -30px no-repeat;

}

.amex {

    background: url("https://jscardvalidator-mpccmwdwqf.now.sh/cards_sprite_compressed_30.jpg")

        0 -60px no-repeat;

}

.diners {

    background: url("https://jscardvalidator-mpccmwdwqf.now.sh/cards_sprite_compressed_30.jpg")

        0 -90px no-repeat;

}

.discover {

    background: url("https://jscardvalidator-mpccmwdwqf.now.sh/cards_sprite_compressed_30.jpg")

        0 -120px no-repeat;

}

.shopping {

    background: url("https://jscardvalidator-mpccmwdwqf.now.sh/cards_sprite_compressed_30.jpg")

        0 -150px no-repeat;

}

.naranja {

    background: url("https://jscardvalidator-mpccmwdwqf.now.sh/cards_sprite_compressed_30.jpg")

        0 -180px no-repeat;

}

.qida {

    background: url("https://jscardvalidator-mpccmwdwqf.now.sh/cards_sprite_compressed_30.jpg")

        0 -210px no-repeat;

}

.clubdia {

    background: url("https://jscardvalidator-mpccmwdwqf.now.sh/cards_sprite_compressed_30.jpg")

        0 -240px no-repeat;

}

.musicred {

    background: url("https://jscardvalidator-mpccmwdwqf.now.sh/cards_sprite_compressed_30.jpg")

        0 -270px no-repeat;

}

.nevada {

    background: url("https://jscardvalidator-mpccmwdwqf.now.sh/cards_sprite_compressed_30.jpg")

        0 -300px no-repeat;

}

.tuya {

    background: url("https://jscardvalidator-mpccmwdwqf.now.sh/cards_sprite_compressed_30.jpg")

        0 -330px no-repeat;

}

.laanonima {

    background: url("https://jscardvalidator-mpccmwdwqf.now.sh/cards_sprite_compressed_30.jpg")

        0 -360px no-repeat;

}

.crediguia {

    background: url("https://jscardvalidator-mpccmwdwqf.now.sh/cards_sprite_compressed_30.jpg")

        0 -390px no-repeat;

}

.patagonia {

    background: url("https://jscardvalidator-mpccmwdwqf.now.sh/cards_sprite_compressed_30.jpg")

        0 -410px no-repeat;

}

.sol {

    background: url("https://jscardvalidator-mpccmwdwqf.now.sh/cards_sprite_compressed_30.jpg")

        0 -440px no-repeat;

}

.cabal {

    background: url("https://jscardvalidator-mpccmwdwqf.now.sh/cards_sprite_compressed_30.jpg")

        0 -470px no-repeat;

}

.cencosud {

    background: url("https://jscardvalidator-mpccmwdwqf.now.sh/cards_sprite_compressed_30.jpg")

        0 -500px no-repeat;

}

.credimas {

    background: url("https://jscardvalidator-mpccmwdwqf.now.sh/cards_sprite_compressed_30.jpg")

        0 -530px no-repeat;

}

.carrefour {

    background: url("https://jscardvalidator-mpccmwdwqf.now.sh/cards_sprite_compressed_30.jpg")

        0 -560px no-repeat;

}

.grupar {

    background: url("https://jscardvalidator-mpccmwdwqf.now.sh/cards_sprite_compressed_30.jpg")

        0 -590px no-repeat;

}

.wishgift {

    background: url("https://jscardvalidator-mpccmwdwqf.now.sh/cards_sprite_compressed_30.jpg")

        0 -610px no-repeat;

}

.unknown {

    background: url("https://jscardvalidator-mpccmwdwqf.now.sh/cards_sprite_compressed_30.jpg")

        0 -640px no-repeat;

}

#card-container{

  position: relative;

  width: 100%;

}

#card-container #logo{

  width: 46px;

  height: 30px;

  position: absolute;

  top: 55px;

  right: 7px;

}

#donation .checkoutform .acceptedcards{

  margin-top: 15px;

}

#donation .checkoutform .acceptedcards img{

  height: 50px;

  width: 120px;

}

#donation .checkoutform .note{

  margin-top: 10px;

  color: #fff;

  display: inline-flex;

}

#donation .checkoutform .note i{

  padding: 5px;

}

#donation .checkoutform .note p{

  font-size: 15px;

  line-height: 35px;

  font-family: 'Roboto', sans-serif;

}

#cuscontact{

  position: relative;

  min-height: 100vh;

  padding: 50px 100px;

  display: flex;

  justify-content: center;

  align-items: center;

  flex-direction: column;

  background: url("../images/banner1.jpg") no-repeat rgba(0,0,0,0.5);

  background-size: cover;

  background-attachment: fixed;

  background-blend-mode: multiply;

}



#cuscontact .contactcontent{

  max-width: 800px;

  text-align: center;

}

#cuscontact .contactcontent h2{

  font-size: 36px;

  font-weight: 500;

  color: #e03c31;

}

#cuscontact .contactcontent p{

  font-weight: 300;

  color: #fff;

}

#cuscontact .contactcontainer{

  width: 100%;

  display: flex;

  justify-content: center;

  align-items: center;

  margin-top: 30px;

}

#cuscontact .contactcontainer .contactinfo{

  width: 50%;

  display: flex;

  flex-direction: column;

}

#cuscontact .contactcontainer .contactinfo .contactbox{

  position: relative;

  padding: 20px 0;

  display: flex;

}

#cuscontact .contactcontainer .contactinfo .contactbox .contacticon{

  min-width: 60px;

  height: 60px;

  background: #fff;

  display: flex;

  justify-content: center;

  align-items: center;

  border-radius: 50%;

  font-size: 22px;

}

#cuscontact .contactcontainer .contactinfo .contactbox .contacttext{

  display: flex;

  margin-left: 20px;

  font-size: 16px;

  color: #fff;

  flex-direction: column;

  font-weight: 300;

}

#cuscontact .contactcontainer .contactinfo .contactbox .contacttext h3{

  font-weight: 500;

  color: #e03c31;

  font-size: 25px;

}

#cuscontact .contactcontainer .contactinfo .contactbox .contacttext p{

  font-weight: 300;

  color: #fff;

  font-family: 'Roboto', sans-serif;

  font-size: 15px;

}

#cuscontact .contactcontainer .contactform{

  width: 40%;

  padding: 40px;

  background: #fff;

}

#cuscontact .contactcontainer .contactform h2{

  font-size: 30px;

  color: #e03c31;

  font-weight: 500;

}

#cuscontact .contactcontainer .contactform .inputBox{

  position: relative;

  width: 100%;

  margin-top: 10px;

}

#cuscontact .contactcontainer .contactform .inputBox input,

#cuscontact .contactcontainer .contactform .inputBox textarea{

  width: 100%;

  padding: 5px 0;

  font-size: 16px;

  margin: 10px 0;

  border: none;

  border-bottom: 2px solid #333;

  outline: none;

  resize: none;

}

#cuscontact .contactcontainer .contactform .inputBox span{

  position: absolute;

  left: 0;

  padding: 5px 0;

  font-size: 16px;

  margin: 10px 0;

  pointer-events: none;

  transition: 0.5s;

  color: #666;

}

#cuscontact .contactcontainer .contactform .inputBox input:focus ~ span,

#cuscontact .contactcontainer .contactform .inputBox input:valid ~ span,

#cuscontact .contactcontainer .contactform .inputBox textarea:focus ~ span,

#cuscontact .contactcontainer .contactform .inputBox textarea:valid ~ span{

  color: #e03c31;

  font-size: 12px;

  transform: translateY(-20px);

}

#cuscontact .contactcontainer .contactform .inputBox input[type="submit"]{

  width: 100px;

  background: #e03c31;

  color: #fff;

  border: none;

  cursor: pointer;

  padding: 10px;

  font-size: 18px;

}

@media (max-width: 991px) {

  #cuscontact{

    padding: 50px;

  }

  #cuscontact .contactcontainer{

    flex-direction: column;

  }

  #cuscontact .contactcontainer .contactinfo{

    margin-bottom: 40px;

  }

  #cuscontact .contactcontainer .contactinfo,

  #cuscontact .contactcontainer .contactform{

    width: 100%;

  }

}





#cusfoot{

  background: #333;

  color: #fff;

  padding:12px;

  bottom: 0;

  height: 50px;

  text-align: center;

}

#cusfoot i{

  color: #e03c31;

}