@font-face{
 font-family: "somo";
 src: url('/css/fonts/josefin/JosefinSans-Regular.ttf');
}
@font-face{
 font-family: "somoLight";
 src: url('/css/fonts/josefin/JosefinSans-Light.ttf');
}
@font-face{
 font-family: "somoBold";
 src: url('/css/fonts/josefin/JosefinSans-Bold.ttf');
}
@font-face{
 font-family: "somoHead";
 src: url('/css/fonts/edo.ttf');
}
@font-face{
 font-family: "quicksand";
 src: url('/css/fonts/Quicksand/Quicksand-VariableFont_wght.ttf');
}
@font-face{
 font-family: "Lexand Deca";
 src: url('/css/fonts/Lexend_Deca/LexendDeca-VariableFont_wght.ttf');
}
@font-face{
 font-family: "Open Sans";
 src: url('/css/fonts/Open_Sans/OpenSans-VariableFont_wdth,wght.ttf');
}
* {
    box-sizing: border-box;
    transition: 500ms;
    scroll-behavior: smooth;
}

html {
    scroll-behavior: smooth;
}
.apply{
    /*background: #FFC83B;*/
    background: rgba(243, 243, 251, 0.876);
}

.hide{display: none !important;}

body {
    background-color: #fff;
    margin: 0;
    padding: 0;
    font-family: quicksand, sans-serif;
}

.header {
    overflow: hidden;
    padding: 20px 10px;
    width: 100%;
    height: 100vh;
    /* background-image: linear-gradient(rgba(33, 33, 83, 0.65), rgba(33, 33, 83, 0.6)), url('/images/homeSlide/greens.jpg');
    background-size: cover;
    background-position: center; */
    height: auto;
    /* animation: header 10s 0s ease-in-out alternate infinite, changeHeadBg 40s 3s infinite;
    background-repeat: no-repeat; */
    background-color:#1e2144;
    font-family: "Open Sans", sans-serif;
    font-weight: 100;
    font-size: 14px;
}

.header-right {
    float: none;
}

.header-right div.newsReport{
   padding: 3px;
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
}
.header-right div.newsReport a{
   background: #FFC83B;
   color: #000000;
   padding: 7px;
   border-radius: 3px;
   margin: 4px;
   min-width: 140px;
   text-align: center;
}

.header-somo-n-prft{
    /*background: linear-gradient(#1e2144, #ffc83b);*/
    /*background: #1e2144;*/
    background: #ffffff;
    padding: 84px 5% 84px;
    font:500 1.4em quicksand, sans-serif;
    color: #000000;
    display: flex;
    justify-content: center;
}
.header-somo-n-prft p{
    /*background: rgba(255,255,255,1);*/
    background: rgba(200, 200, 200,0.1);
    display: inline-block;
    border-radius: 9px;
    padding: 14px;
    text-align: center;
}

.banner {
    display: inline-block;
    justify-content: center;
    width: 100%;
    height: 80px;
    background-color: rgba(0, 0, 0, 0.418);
    position: fixed;
}

.logo {
    float: left;
    padding: 10px;
    /* margin-left: 15%; */
}

nav {
    padding-right: 15%;
    /* display: none; */
}

nav ul {
    width: auto;
    float: right;
    align-items: center;
}

nav ul li {
    display: inline-block;
    align-items: center;
    /*padding-top: 10px;*/
    margin: 0 10px;
    position: relative;
}

nav ul li::after {
    content: '';
    height: 3px;
    width: 0%;
    background: #C4233C;
    position: absolute;
    left: 0;
    bottom: -8px;
    transition: 0.5s;
}

nav ul li:hover::after {
    width: 100%;
}

div.nav-lnks a {
    color: #CC6328;
    padding: 15px 15px;
    text-decoration: none;
    font-family: quicksand, sans-serif;
    font-weight: 500;
}

a:active {
    color: #CC6328;
}

#btn {
    border-radius: 30px;
    background-color: #00A5A2;
    padding: 10px;
    color: #FFC83B;
    width: 8%;
    float: right;
    position: absolute;
    font-family: quicksand, sans-serif;
    font-weight: 500;
    border: none;
}

.tag-line {
    /* font-size: 10px; */
    text-align: center;
    font-family: 'quicksand', sans-serif;
    line-height: 3.5em;
    padding-top: 80px;
}
div.header-right .tag-line h1{

}

div.header-right .tag-line h1 span{
    font-family: 'quicksand', sans-serif;
    font-weight: 700;
    font-size: 2em;
    text-shadow: #CC6328 1px 2px 1px;
    padding-top: 80%;
    color: #FFF;
}

#one {
    border-radius: 100px;
    width: 40px;
    border: 2px solid #FFC83B;
    background: transparent;
    color: thistle;
}

div.header-right .row {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    flex-wrap: wrap;
    padding-top: 5%;
    font-family: quicksand, sans-serif;
    font-weight: 900;
    font-size: 1.8em;
}

div.header-right .row .column {
    position: relative;
}
div.header-right .row .column img{
    width: 250px;
    height: 250px;
    object-fit: contain;
}

/* .column img, .column1 img, .column2 img {
    width:100%;
    height:100%;
} */

#academy {
    position: absolute;
    top: 50%;
    left: 16%;
    text-align: center;
    color: #000;
    text-shadow: #888 2px 2px;
    line-height: 1.5em;
}

#invest {
    position: absolute;
    top: 50%;
    left: 46%;
    text-align: center;
    color: #000;
    text-shadow: #888 2px 2px;
    line-height: 1.5em;
}

#channels {
    position: absolute;
    top: 50%;
    left: 73%;
    text-align: center;
    text-shadow: #888 2px 2px;
    line-height: 1.5em;
}

.buttons {
    width: 100%;
    align-items: center;
    justify-content: center;
}

.buttons button {
    width: 150px;
    /* align-items: center; */
    /*translate: -50y;*/
    align-content: center;
}

section.summary {
    /*background-color: #212153;*/
    padding: 40px 20px;
}

section.summary .items {
    list-style-type: none;
    color: #fff;
    font-size: 20px;
    text-align: center;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    font-family: 'quicksand', sans-serif;
    padding: 10px;
    width: 100%;
}

section.summary .items div {
    margin: 14px;
    /*color: #FFC83B;*/
    color: #000000;
}

section.summary .items div h3{
    margin: 3px;
    color: #FFC83B;
    font-family: 'quicksand', sans-serif;
} 

section.summary .items div h2{
    margin: 7px;
    /*color: #FFC83B;*/
    color: #1e2144;
    font-size: 3em;
    font-family: quicksand, sans-serif;
}
section.summary .items div h2.stat-pre{
    /**/
}
section.summary .items div h2.stat-pre span{
    display: inline-flex;
    animation : statPre 900ms alternate infinite;
}
section.summary .items div h2.stat-pre span:nth-of-type(even){
    animation-delay: -0.3s;
    color: #1ca0a4;
}
section.summary .items div h2.stat-pre span:nth-of-type(3){
    animation-delay: -0.6s;
    color: #CC6328;
}

div.programs section {
    width: 100%;
    margin: 0px;
    color: #000;
    background: #fff;
    border: none !important;
}
div.programs section.academy{
    border: 7px solid #C4233C;
    border-width: 7px 7px 0 0 ;
    background-color:#C4233C;
}
div.programs section h1{
    font-family: quicksand, sans-serif;
    color: #FFC83B;
    font-size: 2.5em;
    width:100%;
    text-align: center;
    padding:10px;
    margin:0;
}
div.programs section.academy h1{
    background-color:#C4233C;
}
div.programs section.invest{
    border: 7px solid #CC6328;
    border-width: 7px 7px 0 0;
    background-color:#CC6328;
}

div.programs section.invest h1{
    background-color:#CC6328;
}
div.programs section.channel{
    border: 7px solid #00A5A2;
    border-width: 7px 0 0 7px;
    background-color:#00A5A2;
}
div.programs section.channel h1{
    background-color:#00A5A2;
}

div.programs section div.rows{
    display: flex;
    align-items: stretch;
    flex-wrap: wrap;
    width: 100%;
    /*height: 100%;*/
    min-height: 84vh;
    background: #ffffff;
    /* padding-bottom: 14px; */
}

div.programs section div.rows .colm {
    width: 50%;
    max-height: 98vh;
    overflow: hidden;
}
div.programs section div.rows .colm img {
    display: none;
    width: 100%;
    height: 100%;
    box-shadow: #808080 7px 7px 5px;
    margin: auto;
    object-fit: contain;
}
div.programs section div.rows .colm iframe {
    width: 100%;
    height: 100%;
    min-height: 320px;
    /*box-shadow: #808080 7px 7px 5px;*/
    margin: auto;
    object-fit: contain;
}

div.programs section div.rows .colm.right img {
    box-shadow: #808080 -7px 7px 5px;
}

div.programs section div.rows{
    display: flex;
}
div.programs section div.rows .bgs {
    /*display: none;*/
    align-items: center;
    justify-content: center;
    padding: 10px;
    writing-mode: vertical-lr;
    text-orientation: upright;
    color: #FFC83B;
    font-family: quicksand, sans-serif;
    font-weight: 700;
    font-size: 2.5em;
    text-align: center;
}

div.programs section div.rows .bg1 {
    background: #C4233C;
}
div.programs section div.rows .bg2 {
    background: #CC6328;
   
}
div.programs section div.rows .bg3 {
    background: #00A5A2;
}

div.programs section div.rows .text{
    display: flex;
    /* width: 50%; */
}
div.programs section div.rows .text .text-box {
    /* padding:20px; */
    flex-grow: 1;
    height: auto;
}

div.programs section div.rows .text .text-box a.ext {
    /*text-decoration: underline;*/
    padding: 3px;
    border: 1px solid #808080;
    border-radius: 3px;
    color: #212153;
}
div.programs section div.rows .text .text-box a.ext:hover {
    background: #FFC83B;
}

div.programs section div.rows .text .text-box p {
    font-family: quicksand, sans-serif;
    text-align: initial;
    font-family: quicksand, sans-serif;
    color:#000; 
    text-align: center;
}

/*div.programs section div.rows .text .text-box ul {
    display: flex;
    flex-direction: column;
    align-items:center;
    list-style: none;
    min-height: 161px;
    width: 98%;
    padding: 4px;
    border-radius: 4px;
}

div.programs section div.rows .text .text-box ul:hover {
    min-height: 168px;
    width: 100%;
    align-items: flex-start;
    border:1px solid #dcdcdc;
}

div.programs section div.rows .text .text-box ul li{
    border: 1px solid #808080;
    padding: 4px 7px;
    margin: 4px auto;
    border-radius: 4px;
    cursor: pointer;
    background: rgba(200,200,200,0.4);
    background: #212153;
    color: #000000;
    min-width: 105px;
    position: relative;
}
div.programs section div.rows .text .text-box ul:hover li{
    margin: 4px;
}
div.programs section.academy div.rows .text .text-box ul li{
    background: rgba(196,35,60,0.5);
}
div.programs section.invest div.rows .text .text-box ul li{
    background: rgba(204,99,40,0.5);
}
div.programs section.channel div.rows .text .text-box ul li{
    background: rgba(0,165,162,0.5);
}
div.programs section div.rows .text .text-box ul a{
    display: block;
    position: absolute;
    bottom: 100%;
    box-shadow: #707070 4px -4px 4px;
    right: 3%;
    left: 3%;
    margin: auto;
    margin-left: 30%;
    text-align: center;
    width: 0%;
    max-width: 140px;
    border-radius: 7px;
    color:#000000;
    background: #FFC83B;
    overflow: hidden;
    padding: 0px;
    height: 0;
}
div.programs section div.rows .text .text-box ul p{
    position: absolute;
    top: 0px;
    box-shadow: #707070 4px 4px 4px;
    right: 0px;
    margin: 0px;
    width: 63%;
    border-radius: 4px;
    color:#ffe4c4;
    color: #fcfcfc;
    background-color: rgba(179, 46, 65, 0.8);
    background: rgb(33,33,83,0.9);
    overflow: hidden;
    height: 0;
}
div.programs section div.rows .text .text-box ul li:hover{
    width: 98%;
}
div.programs section div.rows .text .text-box ul li:target{
    animation: targeted linear 500ms alternate 6;
}
div.programs section div.rows .text .text-box ul li:hover  a{
    display: block;
    width: 63%;
    padding:7px;
    height: auto;
}
div.programs section div.rows .text .text-box ul li:hover  p{
    display: block;
    width: 70%;
    padding:10px;
    overflow: auto;
    height: auto;
}*/

div.programs section div.rows .text .text-box div.flip-cards{
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}
div.programs section div.rows .text .text-box div.flip-cards div.flip-card-big {
  /*background-color: #dcdcdc;*/
  perspective: 1000px;
}

div.programs section div.rows .text .text-box div.flip-cards div.flip-card-big .flip-card {
  position: relative;
  width: 240px;
  height: 180px;
  border-radius: 7px;
  margin: 7px;
  text-align: center;
  transform-style: preserve-3d;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
}

div.programs section div.rows .text .text-box div.flip-cards div.flip-card-big .flip-card:target{
    animation: targetedB linear 900ms 1;
}

div.programs section div.rows .text .text-box div.flip-cards div.flip-card-big:hover .flip-card {
  transform: rotateY(180deg);
}

div.programs section div.rows .text .text-box div.flip-cards div.flip-card-big .flip-card-a, div.programs section div.rows .text .text-box div.flip-cards div.flip-card-big .flip-card-b {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 7px;
  overflow: auto;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  padding: 3px;
}

div.programs section div.rows .text .text-box div.flip-cards div.flip-card-big .flip-card-a {
  background-color: #dcdcdc;
  color: black;
  display: flex;
  justify-content: center;
  align-items: center;
}
div.programs section.academy div.rows .text .text-box div.flip-cards div.flip-card-big .flip-card-a {
  background: rgba(196, 35, 60, 0.2);
}
div.programs section.invest div.rows .text .text-box div.flip-cards div.flip-card-big .flip-card-a {
  background: rgba(204, 99, 40, 0.2);
}
div.programs section.channel div.rows .text .text-box div.flip-cards div.flip-card-big .flip-card-a {
  background: rgba(0, 165, 162, 0.2);
}
div.programs section div.rows .text .text-box div.flip-cards div.flip-card-big .flip-card-a img {
  display: none;
  width: 100%;
  height: 150px;
  object-fit: cover;
}
div.programs section div.rows .text .text-box div.flip-cards div.flip-card-big .flip-card-a h2 {
  margin: 1px;
  padding: 3px;
  font-size: 1.4em;
}
div.programs section div.rows .text .text-box div.flip-cards div.flip-card-big a {
    border: 1px solid #808080;
    padding: 4px 7px;
    margin: 4px auto;
    border-radius: 4px;
    cursor: pointer;
    background: rgba(200,200,200,0.4);
    background: #212153;
    color: #ffffff;
    min-width: 105px;
}

div.programs section div.rows .text .text-box div.flip-cards div.flip-card-big .flip-card-b {
  color: #000000;
  background: #dcdcdc;
  transform: rotateY(180deg);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}



h1 {
    font-family: 'quicksand', sans-serif;
    font-weight: 700;
    letter-spacing: .2em;
    font-size:3em;
    text-align: left;
    line-height: .8em;
}
/*#academyContent ul, #Somo-Invest ul {
    font-family: quicksand, sans-serif;
    line-height: 2.5em;
    padding:10px;
}*/
#academyContent ul {
    /* border:2px solid #C4233C; */
}
#Somo-Invest ul {
    /* border:2px solid #CC6328; */
}
/*#Somo-Academy, ul, li, #Somo-Invest ul li {
    list-style: none;
    font-family: quicksand, sans-serif;    line-height: 2em;
    cursor: pointer;
}*/

.content p {
    text-align: center;
    font-size: 18px;
    line-height: 2rem;
    font-family: quicksand, sans-serif;
    color:#fff;  
}

/*#biz, #chanuka, #buruka, #digiSomo, #inuka, #digiKua {
    display:none;
}*/
.boostBiz, .buruka, .chanuka, .digiSomo, .digiKua, .inuka{
    transition: transform 500ms ease-in-out 25ms;
}



.digiKua:hover + #digiKua, .inuka:hover + #inuka {
    display: block;
    
}
/* #channelsContent ul {
    border: 3px solid #00A5A2;
    color:#000;
} */
#item1 {
    float: left;
    width: 25%
}
#item2 {
    float: left;
    width: 50%;
}

#item3 {
    float: right;
    width: 25%
}

.second {
    border: 2px solid #1e2144;
    width: 80%;
    height: 200px;
}

.tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: black;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute;
    z-index: 1;
}

.tooltip:hover .tooltiptext {
    visibility: visible;
}

/*#boostBiz, #buruka, #chanuka, #digiSomo, #inuka, #digiKua {
    display:none;
}*/
.boostBiz, .buruka, .chanuka, .digiSomo {
    transition: transform 600ms ease-in-out 45ms;
}

.boostBiz:hover + #boostBiz, 
.buruka:hover + #buruka,
.chanuka:hover + #chanuka,
.digiSomo:hover + #digiSomo
.inuka:hover + #inuka,
.digiKua:hover + #digiKua{
    display: block;
    color:#ffe4c4;
    background: rgba(196,35,60, 0.5);
    width:60%;
    transform: translateX(50px) translateY(0);
    padding:5px;
}

.carousel-wrapper {
    height: 600px;
    position: relative;
    width: 1000px;
    margin: 0 auto;
}

.carousel-item {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 25px 50px;
    opacity: 0;
    transition: all 0.5s ease-in-out;
}

.arrow {
    border: solid black;
    border-width: 0 3px 3px 0;
    display: inline-block;
    padding: 12px;
}

.arrow-prev {
    left: -30px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%) rotate(135deg);
}

.arrow-next {
    right: -30px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%) rotate(-45deg);
}

.light {
    color: white;
}
@media (max-width: 480px) {
    .arrow, .light .arrow {
        background-size: 10px;
        background-position: 10px 50%;
    }
}

.item-1 {
    z-index: 2;
    opacity: 1;
    background: none;
    background-size: cover;
}

.imgbox img {
    display: block;
    margin-left: auto;
    margin-right: auto;
    align-items: center;
    width: 30%;
    border-radius: 50%;
}

.item-2 {
    background: none;
    background-size: cover;
}

.item-3 {
    background: none;
    background-size: cover;
}

.blue {
    background-color: #212153;
    padding: 20px 20px;
}

.items ul {
    list-style-type: none;
    color: #fff;
    font-size: 20px;
    text-align: center;
    display: flex;
    justify-content: space-around;
}

#item11 {
    float: left;
    width: 25%
}

#item22 {
    float: left;
    width: 50%;
}

#item33 {
    float: right;
    width: 25%
}

.profile p {
    text-align: center;
    font-size: 25px;
    line-height: 1.5rem;
}

.profile h2 {
    text-align: center;
    font-size: 16px;
}

*:target~.item-1 {
    opacity: 0;
}

#item-1:target~.item-1 {
    opacity: 1;
}

#item-2:target~.item-2,
#item-3:target~.item-3 {
    z-index: 3;
    opacity: 1;
}

body.privacy{
    /*background: linear-gradient(rgba(254,201,73, 0.5), rgba(254,201,73, 0.5)), url('/images/academy.JPG') fixed no-repeat center;
    background-size: cover;
    background-position: center;*/
}
div#privacy_policy{
    color: #000000;
    border-radius: 7px;
    max-width: 720px;
    padding: 42px 2%;
    margin: 70px auto;
    background: rgba(255,255,255,0.9);
}
div#privacy_policy.reports{
    padding: 24px 2%;
    margin: 7px auto;
}
div#privacy_policy div.logo{
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 14px auto;
    float: none;
}
div#privacy_policy div.logo img{
    width: 105px;
    height: 105px;
}
div#privacy_policy h1, div#privacy_policy p, div#privacy_policy a{
    color: #000000;
}
div#privacy_policy.reports h1{
    margin: 7px auto;
}
div#privacy_policy a{
    text-decoration: underline;
}
div.report-list{
    display: flex;
    flex-wrap: wrap;
    max-width: 960px;
    margin: auto;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    min-height: 77vh;
}
div.report-list a{
    margin: 14px;
    color: #000000;
    border: 1px solid #808080;
    padding: 3px 3px 7px;
    border-radius: 7px;
    display: flex;
    flex-direction: column;
    text-align: center;
}
div.report-list a img{
    width: 280px;
    max-width: 91vw;
    height: 210px;
    object-fit: cover;
    border-radius: 7px;
    margin-bottom: 4px;
}

.footer {
    background: #1e2144;
}

@media screen and (max-width: 840px){
    div.header-right .row .column img{
        width: 210px;
        height: 210px;
    }
}
@media screen and (max-width: 640px){
    div.programs section div.rows{
        flex-direction: column;
    }
    div.programs section div.rows .bgs{
        font-size: 1.8em;
    }
    div.programs section div.rows .text{
        width: 100%;
        order: 1;
    }
    div.programs section div.rows .colm{
        width: 100%;
        order: 2;
    }
}
@media screen and (max-width: 480px){
    div.header-right .row .column img{
        width: 180px;
        height: 180px;
    }
    div.header-right .tag-line h1 span{
        font-weight: 500;
        font-size: 1.8em;
    }
    div.programs section.invest{
        border: none;
    }
    div.programs section.channel{
        border: none;
    }
    div.programs section.academy{
        border: none;
    }
    div.programs section div.rows .bgs{
        display: none;
    }

   
}
@media screen and (max-width: 420px){
    div.header-right .row .column img{
        width: 150px;
        height: 150px;
    }
    div.header-right .tag-line h1 span{
        font-size: 1.4em;
    }
    div.header-right .tag-line h1{
        font-weight: 400;
    }
    div.programs section div.rows .text .text-box ul {
        width: 98%;
    }
}

@keyframes targeted {
    100%{
        transform: scale(1.1);
        border-radius: 9px;
        box-shadow: 3px 3px 7px #494949;
        background: #ffc83b
    }
}
@keyframes targetedB {
    100%{
        border-radius: 9px;
        box-shadow: 3px 3px 7px #494949;
        background: #ffc83b;
        transform: rotateY(360deg);
    }
}
@keyframes header{
    0%{
        background-position: 0%;
    }
    100%{
        background-position: 100%;
    }
}
@keyframes changeHeadBg{
    0%{
        background-image: linear-gradient(rgba(33, 33, 83, 0.65), rgba(33, 33, 83, 0.6)), url('/images/homeSlide/greens.jpg');
    }
    25%{
        background-image: linear-gradient(rgba(33, 33, 83, 0.65), rgba(33, 33, 83, 0.6)), url('/images/homeSlide/academy.jpg');
    }
    50%{
        background-image: linear-gradient(rgba(33, 33, 83, 0.65), rgba(33, 33, 83, 0.6)), url('/images/homeSlide/channel.jpg');
    }
    75%{
        background-image: linear-gradient(rgba(33, 33, 83, 0.65), rgba(33, 33, 83, 0.6)), url('/images/homeSlide/invest.jpg');
    }
}
@keyframes statPre{
    0%{
        transform: scale(-1);
    }
    100%{
        transform: scale(2);
    }
}
.apply-container{
    margin: 30px auto;
    margin-top: 21vh;
}

div.apply-container .apply-columns{
    display: flex;
    flex-flow: row;
    flex-wrap: wrap;
    justify-content: center;
    margin: 1rem;
}
div.apply-container .apply-content{
 margin: 14px 2rem;
 display: flex;
 flex-direction: column;
 justify-content: space-around;
 align-items: center;
 /*width: 140px;*/
 max-width: 96vw;
 padding: 7px;
 border-radius: 7px;
}
div.apply-container .apply-content.ke{
  background: linear-gradient(#ffeec3, #ffeec3, rgba(255, 238, 195, 0.1)), url('/images/brands/ke.png');
}
div.apply-container .apply-content.tz{
  background: linear-gradient(#ffeec3, #ffeec3, rgba(255, 238, 195, 0.1)), url('/images/brands/tz.png');
}
div.apply-container .apply-content.ke, div.apply-container .apply-content.tz{
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

div.apply-container .apply-content .apply-link{
    display: block;
    border: 0;
    font-size: 13px;
    padding: 10px 30px;
    border-radius: 30px;
    line-height: 1;
    cursor: pointer;
    box-shadow: #665454 7px 7px 5px;
    margin: 1rem auto;
   background-color: #ffffff; 
   color: #000000;  
}

div.more .more-link{
    display: inline-block;
    border: 0;
    font-size: 13px;
    padding: 10px 30px;
    margin: 21px 7px;
    border-radius: 30px;
    line-height: 1;
    cursor: pointer;
    box-shadow: #665454 7px 7px 5px;
   background-color: #ffffff; 
   color: #000000; 
   
}

/* .faqs-box
{
    width: 500px;
    height:400px;
    background: #212153;
    color: white;
    box-shadow: 2px 7px 7px rgb(0,0,0,0.2);
    line-height: 2rem;
    overflow: hidden;
    margin: 1rem auto;
    
    
}

.faq-box
{
    margin: 1rem auto;
    width: 500px;
    height:300px;
    background: #212153;
    color: white;
    line-height: 2rem;
   
    
} */

/* .faqs-box p,.faq-box p
{
    text-align: center;
}
.faqs
{
    margin: 1rem;
}

.answer
{
    color: #C4233C;
} */

.textarea {
    width:100%;
    max-width:70rem;
    margin: 0 auto;
    padding: 0 .5rem 210px;
}
body.faqs div#f_asked_qs{
    width: 720px;
    max-width: 98vw;
    margin: 70px auto;
}
.accordion-item {
    /* background-color:#fff; */
    border-radius:4px;
    margin-bottom:0.1rem;
    padding:.2rem;
    margin: 7px;
    box-shadow: .5rem 2px .5rem rgba(0,0,0, .1);
    
}
.accordion h2{
    text-align: center;
}

.accordion-item h2{
    text-align: center;
}

.accordion-link {
    /*font-size: .8rem;*/
    color:rgba(248, 233, 27, 0.8);
    text-decoration:none;
    background-color: #00a5a2;
    width:100%;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding: .3rem 0;
    border-radius: 4px;
}
.accordion-link span {
    color: #ffffff;
    margin: .1rem;
    /* font-variant: small-caps; */
    padding:2px;
    text-align: left;
}
.accordion-link img{
    color:#e7d5ff;
    padding:.5rem;
}
.accordion-link #less {
    display:none;
}
.accordion-item a:hover {
    text-decoration: none;
    color:#fff;
}
.answer {
    max-height: 0px;
    overflow: auto;
    position:relative;
    background-color: #e0dcdc;
    transition: max-height 650ms;
    border-radius: 0px 0px 4px 4px;
}

.answer::before {
    content: "";
    position: absolute;
    width: .6rem;
    height: 90%;
    background-color: #d1d1d1;
    top:50%;
    left:0;
    transform:translateY(-50%);
}
.answer div.info{
    padding:7px 3%;
    width: 98%;
}
.answer div.info p{
    color: rgba(15, 7, 7, 0.9);
    font-size:1rem;
    margin: 14px auto;
}
.accordion-item:target .answer, .accordion-item.openned_me_js .answer {
    max-height:100vh;
}
.accordion-item:target .accordion-link #more, .accordion-item.openned_me_js .accordion-link #more {
    display:none;
}

.accordion-item:target .accordion-link #less, .accordion-item.openned_me_js .accordion-link #less {
    display:block;
}

body.faqs div#f_asked_qs div#f_cats{
    width: 720px;
    max-width: 98vw;
    margin: 70px auto;
    padding: 10px;
}
body.faqs div#f_asked_qs div#f_cats h2{
    font-weight: 200;
}
body.faqs div#f_asked_qs div#f_cats p._err{
    color: #ff0000;
    padding: 20px 1%;
    background: #ffffff;
}
body.faqs div#f_asked_qs div#f_cats div#f_cats_list{
    display: flex;
    flex-direction: column;
}
body.faqs div#f_asked_qs div#f_cats div#f_cats_list a{
    margin: 5px;
    padding: 10px 5px;
    border-bottom: 1px double #00a5a2;
    color: #C4233C;
    font-size: 1em;
    border-radius: 5px;
}
body.faqs div#f_asked_qs div#f_cats div#f_cats_list a:hover, body.faqs div#f_asked_qs div#f_cats div#f_cats_list a:active{
    box-shadow: 2px 2px 9px #00a5a2;
}

/* Mpesa Category */
.mpesa-category{
    /* background: url(/images/Donate_Bg.jpeg) no-repeat center; */
    /* background-size:cover; */
    width: 100%;
    min-height: 58vh;
    display: flex;
    align-items: stretch;
   flex-wrap: wrap;
}
.mpesa-category.contacts{
    background: url("/images/2023/team.jpg") no-repeat fixed center;
    background-size:cover;
    width: 100%;
    min-height: 70vh;
    display: flex;
    align-items: stretch;
   flex-wrap: wrap;
   position: relative;
}
.mpesa-category.contacts::before{
    content:"";
    display:block;
    position:absolute;
    background-color: rgba(205, 102, 45, 0.7);
    width:100%;
    height:100%;

}
.mpesa-parts-1
{
    width: 50%;
    /* min-height: 70vh; */
    /* background-color: rgba(7, 41, 73, 0.7); */
    text-align: center;
    padding: 40px 2% 0 8%;
    color:#CC6328;
}
.leftdonate {
    max-width: 600px; 
    margin: 0 auto; 
  }
.mpesa-text-1 
{
    font-size: 1.1rem;
    color: rgb(255, 255, 255); 
    margin-top: 5rem; 
}

.mpesa-text-2{
    font-size: 1.1rem;
    /* color: rgb(255, 255, 255);  */
    margin-top: 3rem;
    text-align: center;
    font-family: 'Quicksand',sans-serif;
}
p.mpesa-text-2 a{
    text-decoration: underline;
}
.mpesa-text-1 span, .mpesa-text-2 span, .mpesa-text-3 
{
    color: #cc6328;
}


.mpesa-parts-2
{
    /* width: 50%; */
    /* min-height: 70vh; */
    /*background-color: rgba(254, 201, 73, 0.7);*/
    /* background-color: rgba(255,255,255,0.5); */
    text-align: center;
    /*display: block;*/
    /* padding: 98px 2%; */
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
.mpesa-parts-2.contacts{
    /* background: none; */
    z-index:1;
}
.mpesa-parts-2 .mpesa-part-2-items-1,.mpesa-part-2-items-2{
    max-width: 400px;
    /* flex:1; */
    margin:10px;
}
.mpesa-parts-2 .mpesa-part-2-items-1, .mpesa-parts-2 .mpesa-part-2-items-2{
    /* margin: 42px auto; */
}
.mpesa-part-2-image img
{
    /*margin-top: 2rem;*/
    width: 100%;
    max-height: 180px;
    min-height: 110px;
    padding: 5px;
    border-radius: 14px;
    background: rgba(255,255,255,0.0);
    object-fit: contain;
}

.mpesa-parts-2 h3.or{
    text-align: center;
    font-weight: 600;
    margin: 42px auto;
}

.mpesa-donate
{
    margin: 7px 0;
    width: 20rem;
    height: 3rem;
    background-color: #24a535;
    outline: none;
    color: white;
    border: none;
    text-align: center;
    border-radius: 2rem;
    font-size: 1rem;
    cursor: pointer;
    
}

.paypal-donate
{
    margin: 7px 0;
    width: 20rem;
    height: 3rem;
    background-color: #253b80;
    outline: none;
    color: white;
    border: none;
    text-align: center;
    border-radius: 2rem;
    font-size: 1rem;
    cursor: pointer;
    
}

.btc-donate
{
    margin: 7px 0;
    width: 20rem;
    height: 3rem;
    background-color: #f7931a;
    outline: none;
    color: white;
    border: none;
    text-align: center;
    border-radius: 2rem;
    font-size: 1rem;
    cursor: pointer;
    
}
/* End of Mpesa Category */


/* Mpesa Page */
.mpesa-parts-2-payments
{
    font-weight: 700;
}

.mpesa-parts-2-payments form.mpesa{
    /* background: rgba(255,255,255,0.7); */
    padding: 7px 2% 21px;
    border-radius: 4px;
    max-width: 420px;
    margin: 3px auto 42px;
}
.mpesa-parts-2-payments form.mpesa.contacts{
    max-width: 100%;
}
.mpesa-parts-2-payments form.mpesa.contacts{
    /* background: #ffefd5; */
    /* background: rgba(255, 239, 213, 0.7); */
    padding: 14px 5%;
    margin-top: 30px;
}
.mpesa-parts-2-payments form.mpesa.contacts h2{
    font:700 2.8em somoLight, sans-serif;
    margin: 21px auto 7px;
}
.mpesa-parts-2-payments form.mpesa.contacts p{
    text-align: left;
    color:#fff;
    font-family: 'quicksand', sanserif;
}
form.mpesa{
    font-weight: 500;
}
form.mpesa .mpesa-parts-2-payments-filling{
    display: block;
    text-align: left;
    margin: 21px auto;
    padding: 0px;
    max-width: 300px;
    font-weight: 700;
}

form.mpesa  .mpesa-parts-2-payments-filling{
    text-align: center;
}

form.mpesa.contacts  .mpesa-parts-2-payments-filling{
    text-align: left;
    margin: 21px auto 21px 0%;
    padding: 5px;
    max-width: 100%;
}

.mpesa-parts-2-payments-filling input
{
    width: 300px;
    /*height: 3rem;*/
    text-align: center;
    margin: 0rem auto;
    border: 0px solid #353535;
    border-bottom-width: 1px;
    padding: 9px;
    font: 500 1.1em quicksand, sans-serif;
    background-color: transparent;
    border-radius: 3px;
}
form.contacts .mpesa-parts-2-payments-filling{
    background-color: #ffffff;
    color: #141414;
    margin:0;
}
form.contacts .mpesa-parts-2-payments-filling input{
    text-align: left;
    padding-left: 30px;
    width: 100%;
    border:2px solid #000;
    border-radius:40px;
    margin:20px;
    display:flex;
}
form.contacts .mpesa-parts-2-payments-filling textarea{
    width: 100%;
    /*height: 3rem;*/
    text-align: left;
    margin: 0rem auto;
    border: 0px solid #353535;
    border-bottom-width: 1px;
    padding: 20px;
    font: 500 1.1em quicksand, sans-serif;
    background-color: #ffffff;
    color: #141414;
    border-radius: 30px;
    border:2px solid #000;
}
.mpesa-parts-2-payments-filling input,
.mpesa-parts-2-payments-filling textarea {
    position:relative;
    z-index:17;
}
.mpesa-parts-2-payments-filling label {
    position:relative;
    z-index:3;
}
.mpesa-parts-2-payments-filling input.amount{
    font-size: 3.5em;
    border:none;
    border-radius: 7px;
}
.mpesa-parts-2-payments-filling input.amount:after{
    content: ".00";
    font-size: 3.5em;
    border:none;
    border-radius: 7px;
}
.mpesa-parts-2-payments-filling input:focus{
    outline: none;
    box-shadow: 0px 3px 5px #707070;
}
form.contacts .mpesa-parts-2-payments-filling input:focus{
    outline: none;
    box-shadow: 3px 3px 5px #707070;
}
form.mpesa img.mpesa-paybill{
    max-width: 280px;
    max-height: 200px;
}

.mpesa-btn
{
    margin: 14px auto;
    min-width: 49%;
    max-width: 91%;
    padding: 7px;
    background-color: rgb(16, 133, 51);
    outline: none;
    color: white;
    border: none;
    text-align: center;
    border-radius: 2rem;
    font: 500 1.2em quicksand, sans-serif;
    cursor: pointer;
}
form.contacts .mpesa-btn{
    background: #1ca0a4;
}

.mpesa-instructions
{
    line-height: 2rem;
    font-weight: 500;
    text-align: left;
}
/* end of mpesa page */

/* Paypal page */
.paypal-cart
{
 display: flex;
 position: absolute;
}

.back
{
    position: relative;
   margin: 2rem 1rem;
   cursor: pointer;
}

.paypal-img-btn
{
    width: 400px;
    height: 300px;
    display: flex;
    margin-top: 15rem;
   justify-content: center;
}
.paypal-items
{
    width: 600px;
    height: 560px;
    background-color: rgb(255, 255, 255);
    border: 1px solid black;
    position: relative;
    margin-top: 2rem;
}

.paypal-items p
{
    margin-top: 3rem;
    line-height: 2rem;
    text-align: center;
    font-weight: 500;
}

.paypal-item-checkbox
{
    margin-top: 2rem;
    text-align: center;
    font-weight: 500;
}

.paypals-donate
{
    margin: 5rem 12rem;
    width: 13rem;
    height: 3rem;
    background-color: rgb(14, 111, 221);
    outline: none;
    color: white;
    border: none;
    text-align: center;
    border-radius: 2rem;
    font-size: 1rem;
    cursor: pointer;
}

.back
{
    color: red;
    width: 6rem;
    height: 2rem;
    outline: none;
    border: 1px solid black;
    background-color: white;
}

.cancels a
{
    text-align: center;
    margin-left: 12rem;
}
/* End of Paypal page */

/* Thanks page */

.mpesa-parts-2s
{
    padding: 0px;
    background-color: rgba(255, 255, 255, 0.466);
    text-align: center;
    display: block;
}

.mpesa-part-2s-image img,.paypal-img-btn img
{
    width: 40%;
    height: 40%;

}

.mpesa-parts-2s p
{
    font-size: 1.4rem;
    font-weight: 500;
    color: rgb(62, 32, 173);
}
/* End of Thanks Page */

/* body.team{
    background: #00a5a2 url('/images/team/newBg.jpg') no-repeat fixed center;
    background-size: cover;
}
body.team div.team-img{
    background: #00a5a2 url('/images/team/newBg.jpg') no-repeat fixed center; 
    background-size: cover;
    height: 480px;
    min-height: 70vh;
    max-height: 77vh;
    animation: teamBg 14s ease-in-out alternate infinite;  
    position: relative;
} */
body.team section.board {
    background: rgba(255,200,59,0.9);
    color: #ffffff;
  }
  body.team section {
    background-color: #CC6328;
  }
  body.team section article {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    max-width: 1280px;
    margin: auto;
  }
div.icons-container {
    position: absolute;
    top: -80px;
    left: 0;
    right: 0;
    height: 150px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 2px;
    overflow: auto;
    max-width: 98%;
    margin: 0px auto;
}

div.teamDept {
    min-height: 58vh;
 background-color: #CC6328;
    margin-top: 10%;
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    list-style: none;
    padding: 0;
}
div.teamDept .team-img img {
    width: 30%; /* Adjust the width based on your design */
    margin: 10px;
    border-radius: 8px;
  }
  
  body.team section h1 {
    font: 700 3.5em quicksand, sans-serif;
    width: 100%;
    text-align: left;
    color: #fff;
    letter-spacing: .1em;
    margin-left: 15%;
    margin-bottom: 0;
    margin-top: 6%;
    margin-top: 6%
  }

body.team section div.team-mb{
    text-align: center;
    color: #000000;
    /* margin: 42px 14px; */
    width: 207px;
    margin:30px;
    
}
div.team-img{
    flex-wrap: wrap;
    justify-content: center;
}

body.team section.board div.team-mb{
/*    color: #ffffff;*/
    color: #000000;
    width: 460px;
  flex-grow: 1;
}
body.team section div.team-mb div.img-pr{
    position: relative;
    margin-bottom: 18px;
}

body.team section.board div.team-mb div.img-pr{
    border: 5px solid #CC6328;
  border-radius: 50%;
  max-width: 205px;
  margin: auto;
}
body.team section div.team-mb img.team-pic{
    width: 100%;
    max-width: 205px;
    height: 200px;
   object-position: top;
    object-fit: cover;
    border:3px solid #FFC83B;
    border-radius: 50%;
    /* filter:grayscale(100%) */
}

.centered {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
  }
  
body.team section.board div.team-mb img.team-pic{
/*    filter:grayscale();*/
    border-radius: 50%;
}
.lin {
    border-radius:50%;
}
body.team section div.team-mb a.lin{
    position: absolute;
    /* left: 1%; */
    right: -15%;
    bottom: 70;
    padding: 0px;
}
body.team section.board div.team-mb h2{
/*    color:#000;*/
    color:#ffffff;
}
body.team section.teamTop div.teamDept div.team-mb div.img-pr a.lin img{
    border-radius: 50%;
  border: 3px solid #fff;
}

body.team section div.team-mb a.lin img {
    width:45px;
    height:45px;
    border-radius: 50%;
    background-color: #fff;
}
body.team section.board div.team-mb p{
    text-align: left;
}

body.team section.board div.team-mb div.img-pr a.lin img {
    background:#fff;
    border-radius:50%;
}

div#extra_UIs{background: rgba(0,0,0,0.7); display: none; position: fixed; top: 0px; left: 0%; right: 0%; bottom: 0%; z-index: 21; overflow: auto; padding: 1%; max-height: 100vh; align-items: center;}
div#extra_UIs div#first_pop.pop {
    display: none;
    width: 380px;
    max-width: 91vw;
    height: 520px;
    margin: 7px auto;
    background-color: #212153;
    background-color: #ffeed0;
    background-color: #ffffff;
    background-image: linear-gradient(rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.9)), url(/images/extra/2022_bg.jpg);
    background-size: cover;
    position: relative;
    /* display: block; */
    padding: 0px;
    border-radius: 4px;
    overflow: auto;
    /* box-shadow: 3px 3px 21px #ffffff, 3px -3px 21px #ffffff; */
}

div.icons-container button {
    width:140px; 
    max-width: 150px;
    margin: 0px 10px 0 10px;
    height:70px; 
    /* padding:20px;  */
    background:#999999; 
    border-radius:10px; 
    border:1px solid #999999;
    /* align-items:center;  */
    justify-content:center;
    /* display: flex; */
    /* flex-direction: column; */
    cursor:pointer;
    box-shadow: 5px 5px 1px rgba(0, 0, 0, 0.8);

}
div.icons-container button:hover {
    background:#FFC83B;
    border:1px solid #ffc83b;

}
div.icons-container button h5 {
    color:#fff;
    font-family:'quicksand',sans-serif;
    letter-spacing: .1em;
    margin:0;
}

div.icons-container .tm {
    width:30px;
    height:30px; 
    border-radius:50%; 
    background:#cccccc; 
    padding:3px;
    justify-content: center; 
    align-content: center;
    margin-bottom:0;
    
}

div.icons-container .tm:hover{
    background:#fff; 
 
}


div#extra_UIs div#first_pop .logo {
    position: absolute;
    display: none;
}

div#extra_UIs div#first_pop .img {
    top: 0;
    max-height: 300px;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-image: linear-gradient(rgba(80, 28, 16, 0), rgba(80, 28, 16, 0)), url(/images/extra/2022b.jpg);
    background-size: cover;
    background-size: 100% 150%;
    background-position: top center;
}

div#extra_UIs div#first_pop.pop p {
    color: #000000;
    font-size: 16px;
    text-align: center;
    font-weight: 400;
    line-height: 1.3em;
    margin: 7px;
    padding: 7px;
}
div#extra_UIs div#first_pop.pop p a{
    font-weight: 500;
    color: #ffc83b;
}
div#extra_UIs div#first_pop.pop p a.btn{
    display: inline-block;
    margin: 21px 3%;
    padding: 7px;
    color: #ffffff;
    background-color: #212153;
    border-radius: 4px;
    font: 500 1.1em quicksand, sans-serif;
}

div#extra_UIs div#first_pop .close-btn {
    position: absolute;
    top: 1px;
    right: 1px;
    /*width: 30px;*/
    height: 30px;
    color: #212153;
    font-size: 28px;
    font-weight: 600;
    padding: 5px;
    margin: 1px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    background-color: #ffffff;
    border-radius: 5px;
}
div#extra_UIs div#first_pop .close-btn b{
    font-size: 14px;
    margin-right: 7px;
    font-weight: 400;
}

@media screen and (max-width: 1000px){
    body.team div.team-img{
        animation-duration: 20s;
    }
}
@media screen and (max-width: 500px){
    body.team div.team-img{
        animation-duration: 28s;
    }
}
@media screen and (orientation: portrait){
    .mpesa-category{
        /*background: url(/images/Donate_Bg_Phone.jpeg) no-repeat center;*/
        /*background-size:200%;
        background-repeat: repeat;
        background-position: top center;*/
    }
    .mpesa-category .mpesa-parts-1{
        /* background: linear-gradient(rgba(7, 41, 73, 0.7), rgba(7, 41, 73, 0.7)), url(/images/Donate_Bg.jpeg); */
        /* background-position: top right; */
    } 
    .mpesa-category .mpesa-parts-2{
        background: linear-gradient(rgba(255,255,255,0.5), rgba(255,255,255,0.5)), url(/images/Donate_Bg.jpeg);
        background-position: top center;
    }
    .mpesa-category .mpesa-parts-2.contacts{
        margin: 70px auto;
        background: none;
    }
    .mpesa-category .mpesa-parts-1, .mpesa-category .mpesa-parts-2{
        background-size:cover;
        /*background-repeat: repeat;*/
        min-height: 50vh;
        padding: 7px 2%;
        padding:15px 15px auto
    } 
    /*.mpesa-parts-2s
    {
        background: url(/images/Donate_Bg_Phone.jpeg) no-repeat center;
        background-size: cover;
    }*/
}


/**SECTION B OF TEAM**/
.icons-container button{
    width:120px; height:50px; padding:20px; background:#999999;
    text-align: center;
}

.Teamtwo {
    position: relative;
  overflow: initial;

}

.teamB {
    width: 90%;
    margin-left: auto;
  margin-right: auto;
  position: relative;
  overflow: hidden;
  list-style: none;
  padding: 0;
  z-index: -1;
  border: 3px solid #212153;
}

.teamIcons {
    position: absolute;
  top: -80px;
  left: 0;
  right: 0;
  height: 150px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 2px;
  overflow: auto;
  max-width: 1020px;
  margin: 0px auto;
}


div.teamIcons .swiper-pagination-bullet {
  width: 100px;
  height: 60px;
  /* max-width: initial;
  max-height: initial;
  min-width: initial;
  min-height: initial; */
  padding: 5px 10px;
  background: #999999;
  border-radius: 7px;
  object-fit: contain;
  box-shadow: 5px 5px 1px rgba(0, 0, 0, 0.8);

}

.teamIcons img {
    width:50px;
    height: 50px;
    border-radius: 50%;
    background-color: #e2e0e0;
    padding:10px;
}

@media screen and (max-width: 720px) {
    div.teamIcons div.swiper-pagination {
      height: 70px;
      top: -35px;
    }

    .teamIcons img {
        width:30px;
        height: 30px;
  }
}
/* @media screen and (max-width: 720px) {
    div# img.nav-img {
      width: 40px;
      height: 40px;
    }
  } */


@media screen and (max-width: 480px){
   section.mpesa-category{
       flex-direction: column;
       background-size: cover;
       
   }
   div.mpesa-parts-1{
       width: 100%;
       
   }
   div.mpesa-parts-2{
       width: 100%;
   }
   .mpesa-btn{
    margin: 1rem 2rem;
   }
   div.mpesa-parts-2-payments{
        width: 100%;
    }

    div.mpesa-instructions{
        width: 100%;
    }
    div.paypal-cart{
        position: absolute;
        flex-direction: column;
    }
    div.paypal-items{
        width: 450px;
        margin: 1rem;
        height: 350px; 
    }

    div.paypal-items p, span{
        font-weight: 600;
    }
    .paypals-donate{
        margin: 5rem 6rem;
    }
    div.paypal-img-btn{
        margin: 0rem 3rem;
    }

}

@media screen and (max-width: 640px){
    div.mpesa-parts-1{
        width: 100%;
    }
    div.mpesa-parts-2{
        width: 100%;
    }
    div.mpesa-parts-2-payments{
        width: 100%;
    }
    div.mpesa-instructions{
        width: 100%;
    }
    section.paypal-category{
       width: 100%;
       height: 300px;
    }
    .mpesa-btn{
        margin: 1rem 2rem;
       }

       div.paypal-cart{
        position: absolute;
        flex-direction: column;
    }
    div.paypal-items{
        width: 580px;
        margin: 1rem;
        height: 350px; 
    }
    
    div.paypal-items p, span{
        font-weight: 600;
    }
    .paypals-donate{
        margin: 5rem 10rem;
    }
    div.paypal-img-btn{
        margin: 0rem 8rem;
    }
}

@media screen and (max-width: 840px) {
    section.mpesa-category{
        flex-direction: column;
    }
    div.mpesa-parts-1{
        width: 100%;
        order: 1;
    }
    div.mpesa-parts-2{
        width: 100%;
        order: 0;
    }
    div.be-friends{
        order: 2;
    }
    div.mpesa-instructions{
        width: 100%;
    }
    .mpesa-btn{
        margin: 1rem 2rem;
       }

       div.paypal-items p, span{
        font-weight: 600;
    }   
}

@media screen and (max-width: 768px) {
    .mpesa-parts-1 {
      padding: 40px 2% 0 2%; 
      display:flex;
      flex-wrap: wrap;
    }
  
    img.donateimg {
      display:none;
    }
  }

  @media screen and (max-width: 1260px) {
img.donateimg{
    width:650px;
}
  }

  @media screen and (max-width: 1140px) {
    img.donateimg{
        width:500px;
    }
      }