*{
    margin: 0px;
    padding: 0px;
}

.container{
    margin-top: -5%;
    width: 100%;
    height: 120%;
}

#support{
    width: 140px;
    height: 40px;
    border-radius: 20px;
    display: flex;
    position: fixed;
    margin-right: 5%;
    right: 0;
    bottom: 80px;
    padding: 10px;
    z-index: 100;
    align-items: center;
}

#support > img{
    width: 20px;
    height: 20px;
    margin-left: 10px;
    margin-right: 10px;
    align-items: center;
}

/* common properties */

h2{
    font-size: 36px;
}

.text-align{
    text-align: center;
}

.float-left{
    float: left;
}

.float-right{
    float: right;
}

.float-clear{
    clear: both;
}

/* Top div */

.image-cont{
    padding-top: 75px;
    width: 100%;
    height: 100%;
}

.img-div{
    position: relative;
}

.img-inner-div{
    max-width: 520px;
    height: 300px;
    position: absolute;
    top: 20%;
    right: 15%;
}

.img-inner-div > h2{
    line-height: 45px;
    margin-bottom: 30px;
}

.img-inner-div-info > div > h3{
    line-height: 33px;
    margin-bottom: 8px;
}

.img-inner-div-info > div > span{
    line-height: 20px;
}

.img-inner-div-info{
    display: flex;
    flex-direction: row;
    width: 100%;
    height: 70px;
    margin-bottom: 25px;
}

.img-inner-div-info > div{
    margin-right: 50px;
}

/* featured div */

.featured{
    width: 650px;
    min-height: 180px;
    display: flex;
    position: absolute;
    left: 0;
    right: 0;
    bottom: -40px;
    margin: 0 auto;
    background-color: white;
    border-radius: 10px;
    padding: 0px 20px 0px 0px;
    box-shadow: 0 30px 60px rgb(0 0 0 / 10%);
}

.img-div-2{
    width: 250px;
    height: 160px;
    margin-right: 30px;
}
.img-div-2 > img{
    width: 250px;
    height: 180px;
    border-radius: 10px 0px 0px 10px ;
}

.featured-info{
    width: 420px;
    height: 170px;
}

.featured-info > div{
    width: 130px;
    height: 25px;
    background: linear-gradient(270deg,#3023ae 0,#846dd7 100%);
    border-radius: 20px;
    text-align: center;
    line-height: 25px;
}

.featured-info > p{
    /* margin-bottom: 20px; */
    line-height: 27px;
}

.featured-info > h2{
    margin-top: 10px; 
    font-size: 20px;
}

.featured-info > span{
    cursor: pointer;
}

/* trending div */

.trending{
    width: 1205px;
    height: 970px;
    margin: auto;
}

.trending-inner{
    width: 100%;
    height: 550px;
    padding-top: 200px;
}

.trending-inner > h2{
    line-height: 54px;
}

.trending-inner > p{
    margin-bottom: 70px; 
    line-height: 26px;
}

.carousel{
    width: 100%;
    height: 500px;
    display: flex;
    flex-grow: 1,2,1;
    margin-bottom: 20px;
}

.go-left-btn, .go-right-btn{
    padding-top: 200px;
    width: 50px;
}

.go-left-btn > button, .go-right-btn > button{
    width: 100%;
    background-color: white;
    border: none;
    cursor: pointer;
}

.carousel-view{
    width: 100%;
    height: 450px;
    display: grid;
    grid-template-columns: 35% 35% 35%;
    
}

.carousel ~ span{
    position: absolute;
    right: 480px;
}

.carousel ~ a{
    position: absolute;
    right: 230px;
    text-decoration: none;
}

/* Simple steps */

.simple-steps{
    width: 1100px;
    height: 980px;
    margin: auto;
    padding: 30px;
}

.rows{
    width: 1000px;
    height: 700px;
    margin: auto;
}

.right{
    width: 498px;
    height: 650px;
    padding-top: 50px;
}

.left{
    width: 498px;
    height: 600px;
    display: flex;
    flex-direction: row;
    padding-top: 100px;
}

.simple-img > img{
    width: 80px;
    height: 500px;
    margin-right: 20px;
}

.simple-info > div{
    width: 390px;
    height: 190px;
}

.simple-info  h4{
    line-height: 30px;
    padding-bottom: 10px;
}

.simple-info  p{
    line-height: 27px;
}

.right > video{
    width: 470px;
    height: 600px;
}

.bottom{
    width: 100%;
    height: 150px;
}

.bottom > div{
    display: flex;
    flex-direction: row;
    margin-top: 50px;
}

.bottom > div > button:nth-child(1){
    margin-left: 200px;
    margin-right: 20px;
    box-shadow: 0 4px 8px rgb(1 191 189 / 30%);
    cursor: pointer;
}

.bottom > div > button:nth-child(2){
    margin-left: 20px;
    box-shadow: 0 4px 8px rgb(0 0 0 / 10%);
    background-color: rgb(255, 255, 255); 
    border: 2px solid #01BFBD; 
    cursor: pointer;
}

#twoButtons{
    margin-top: 5%;
}

.b{
    width: 100%;
    height: 60px;
    display: flex;
    margin-top: 100px;
    align-items: center;
}

.b > p{
    margin-right: 100px;
}


.chat{
    width: 400px;
    height: 100%;
    display: flex;
}

.chat > div{
    width: 200px;
    height: 80%;
    border-radius: 50px;
    text-align: center;
    padding-top: 10px;
    cursor: pointer;
}

.chat >div:nth-child(1) > i {
  line-height: 25px;
  width: 30px;
  border-radius: 3px;
  font-size: 18px;
  color: #354F84;
  margin-right: 1%;
  background-color: #fff;    
}

.chat >div:nth-child(2) > i {
    
    font-size: 22px;
    color: #fff;
    margin-right: 1%;
    background-color: #13CB6A;    
  }
  

.chat > div:nth-child(1){
    background-color: #354F84;
    margin-right: 10px;
}

.chat > div:nth-child(2){
    background-color: #13CB6A;
}

.chat img{
    margin-top:-2% ;
    margin-right: 10px;
}

 /* causese div */
.causes-head > p{
    line-height: 26px;
}

#causes-img{
    display: grid;
    grid-template-columns:182px 182px 182px 182px 182px 182px;
    grid-template-rows: 159px 159px;
    grid-gap: 10px;
    margin-left: 12%;
    margin-bottom: 50px;
    margin-top: 30px;
}

#causes-img > div{
    position: relative;
}

#causes-img span{
    position: absolute;
    bottom: 0;
    left: 30px;
    font-style: 'Source Sans Pro', sans-serif;
    color: white;
    top: 100px;
    font-weight: 700;
}
.donate-btn{
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-direction: row;
    flex-direction: row;
    font-size: 17px;
    font-weight: bold;
    line-height: 25px;
    width: 172px;
    height: 54px;
    background: #204B6B;
    border-radius: 8px;
    color: #fff;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    text-decoration: none;
    text-transform: capitalize;
}

/* #causes-img > div > div{
    width: 20px;
    height: 5px;
    border-radius: 5px;
    background-color: white;
    position: absolute;
    bottom: 0;
    left: 70px;
    top: 120px;
} */

#causes-img > div > img{
    border-radius: 10px;
}

/* why keto */

.why{
    width: 1100px;
    height: 500px;
    margin: auto;
    padding-top: 50px;
    padding-left: 20px;
}

.keto-info{
    width: 90%;
    height: 450px;
    margin: 70px auto;
    display: grid;
    grid-template-columns: 200px 200px 200px 200px;
    grid-template-rows: 250px 250px;
    grid-gap: 50px;
}

.keto-info p{
    text-align: center;
    color: #444444;
    font-family: 'Source Sans Pro', sans-serif;
}

.keto-info img{
    width: 90px;
    height: 80px;
    margin-left: 50px;
}

.keto-info > div > div{
    width: 70px;
    height: 3px;
    background-color: orange;
    border-radius: 5px;
    margin-top: 10px;
    margin-bottom: 10px;
    margin-left: 60px;
}

/* Success stories */

.success{
    width: 1100px;
    height: 600px;
    margin: 100px auto;
    padding-top: 30px;
}

.success > h2{
    margin-bottom: 50px;
}

#card{
    width: 950px;
    height: 380px;
    margin-left: 20px;
    box-shadow: 0 7px 14px 0 rgb(0 0 0 / 10%);
    border-radius: 5px;
    
}

#card > img{
    border-radius : 5px;
    float : left;
}

#divInfo{
    width: 480px;
    height: 100%;
    float : right;
}

#divInfo > h2{
    margin-top : 20px;
    margin-bottom : 20px;
    font-size : 20px;
}

#divInfo > p{
    font-size : 17px;
    line-height : 27px;
    margin-bottom : 50px;
}

#divA{
    width : 100%;
    height : 10px;
}

#divA > a{
    cursor : pointer;
}

/* featured IN */

.featured-in{
    width: 1100px;
    height: 300px;
    margin: 200px auto;
}

.featured-in > h2{
    margin-bottom: 50px;
}

.featured-in > div:nth-child(3){
    margin-left: 50px; 
    margin-bottom: 50px; 
    margin-top: 0px;
}

/* .featured-in > div:nth-child(3) > p{
    margin-right: 100px;
} */

.carousel-featured{
    width: 100%;
    padding-top: 50px;

}

.carousel-featured-in{
    width: 90%;
    height: 200px;
    margin-left: 50px;

}


/* Text Styles */

.font-style{
    font-family: 'Source Sans Pro', sans-serif;
}

.font-weight-700{
    font-weight: 700;
}

.font-weight-400{
    font-weight: 400;
}

.img-inner-div-info-size_1{
    font-size: 26px;
}

.img-inner-div-info-size_2{
    font-size: 17px;
}

.font-size12{
    font-size: 12px;
}

/* Common color */

.font-color_1{
    color: #444444;
}

.font-color_2{
    color: #999999;
}

.font-color_4{
    color: #777777;
}

.green-color-text-1{
    color: #039695;
}

.green-color-text-2{
    color: #01BFBD;
}

.green-color-back{
    background-color: #01BFBD;
}

.font-color_3{
    color: white;
}

/* buttons */

.start-fundraiser{
    width: 300px;
    height: 60px;
    border-radius: 5px;
    border: 0px;
    font-size: 20px;
}

/* material icons */

.material-icons{
    font-family: "Material Icons";
    vertical-align: middle;
}


@media only screen and (min-width: 720px){
    body{
        overflow-x: hidden;
    }
    
    
    .img-div{
        height: 500px;
    }

    .img-div > img{
        width: 100%;
        height: 100%;   
        object-fit: cover;
        object-position: 35%;
    }
}

@media only screen and (max-width: 720px){
    body{
        overflow-x: hidden;
    }
    

    .img-div{
        height: 500px;
    }

    .img-div > img{
        width: 100%;
        height: 100%;   
        object-fit: cover;
        object-position: 25%;
    }

    .featured{
        flex-direction: column;
        position: static;
        width: 87%;
    }

    .img-div-2{
        width: 100%;
    }

    .img-div-2 > img{
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .featured-info{
        width: 100%;
    }

    .featured-info > div{
        margin-top: 3%;
        margin-left: 35%;
    }

    .trending{
        width: 100%;
        height: 800px;
    }

    .trending-inner{
        padding-top: 50px;
    }

    .carousel-view{
        margin-left: 2%;
        grid-template-columns: 35% 35%;
        gap: 90px;
        overflow: hidden;
    }

    .carousel ~ span{
        position: static;
    }

    .carousel ~ a{
        position: static;
    }

    .simple-steps{
        width: 70%;
    }

    .rows{
        width: 100%;
    }

    .right{
        display: none;
    }

    .bottom > div > button:nth-child(1){
        margin-left: 10%;
    }

    .b{
        margin-top: 50%;
    }

    .chat{
        flex-direction: column;
        gap: 20px;
    }

    .causes{
        margin-top: 40%;
    }

    #causes-img{
        width: 100%;
        margin-left: 2%;
        overflow: hidden;
    }

    #causes-img > div{
        width: 95%;
    }

    #causes-img > div > img{
        width: 87%;
    }

    .why{
        width: 100%;
        padding-left:0px ;
    }

    .keto-info{
        grid-template-columns: 30% 30% 30%;
        grid-template-rows: 40% 40%;
    }

    .keto-info > div:nth-child(7){
        visibility: hidden;
    }

    .keto-info > div:nth-child(8){
        visibility: hidden;
    }

    .keto-info img{
        margin-left: 27%;
    }

    .keto-info > div > div{
        margin-left: 32%;
    }

    .success{
        visibility: visible;
        width: 100%;
        height: 800px;
    }

    .carousel{
        width: 100%;
        height: 100%;
    }

    #successCarousel{
        height: 100%;
    }

    #card{
        max-width: 550px;
        height: 95%;
        text-align: center;
    }

    #card > img{
        width: 100%;
        float: none;
    }

    #divInfo{
        float:none;
        width: 100%;
        height: 40%;
        margin-right: 0px;
    }

    .featured-in{
        width: 100%;
        height: 200px;
        margin-top: 70%;
        margin-bottom: 20%;
    }

    .carousel-featured{
        padding: 0px;
    }

    .carousel-featured-in{
        margin-left: 3%;
        height: 100px;
    }

    .carousel-featured-in > img{
        width: 100%;
    }

    .featured-in > div:nth-child(3){
        display: none;
    }

    .featured-in{
        margin-top: 60%;
    }

    .start-fundraiser{
        height: 80px;
    }
}

/* small devices */




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

    .container{
        margin-top: -20%;
    }

    .img-div > img{
        content: url("https://kettocdn.gumlet.io/media/banner/0/71/image/cd0188940abd618df0307b38d7733dae6fa18f15.png?w=576&dpr=1.3");
    }

    .img-div{
        height: 370px;
    }

    .img-inner-div{
        top: 60%;
        right: 2%;
        padding-left: 30%;
        margin-top: 16%;
        height: 200px ;
    }

    .img-inner-div > h2{
        font-size: 26px;
    }

    .img-inner-div-info{
        /* flex-direction: column; */
        width: 50%;
        text-align: center;
    }

    .img-inner-div-info > div{
        margin-right: 20px;
        margin-left: -5%;
        margin-top:-4% ;
    }
    
    .img-inner-div-info > div:nth-child(1) > h2{
        font-size: 22px;
        margin-top: -2%;
        width: 150px;
    }

    .img-inner-div-info > div:nth-child(2) > h2{
        font-size: 22px;
        margin-top: -2%;
        width: 100px;
    }

    .img-inner-div-info > div:nth-child(3) > h2{
        margin-top: -2%;
        font-size: 22px;
        margin-left: 5%;
    }

     
    .start-fundraiser{
        width: 90%;
        margin-left:4% ;
        margin-top: -2%;
    }


    .featured{
        width: 70% ;
        height: 400px;
        flex-direction: column;
        margin-top: 60%;
        position: static;
        gap: 5%;
    }

    .featured-info{
        width: 250px;
    }

    .featured-info > div{
        margin-left: 22%;
    }

    .trending{
        width: 100%;
        height: 800px;
    }

    .trending-inner{
        padding-top: 80px;
    }

    .donateNowArrow{
        margin-top: -16%;
    }

    #glb{
        margin-left: 4%;
        margin-right: -2%;
    }

    #grb{
        margin-left: -11%;
        margin-top: 1%;
    }
    .carousel-view{
        width:80% ;
        grid-template-columns: 33%;
        overflow: hidden;
    }
   
    .carousel ~ span{
        position: static;
    }

    .carousel ~ a{
        position: static;
    }
 
    .carousel{
        width: 100%;
    }

    .centerText{
     width: 90%;
     padding-left: 10%;
    }

    .simple-steps{
        width: 70%;
    }

    .rows{
        width: 100%;
    }

    .right{
        display: none;
    }

    .left{
        width: 100%;
        padding-top: 60px;
        text-align: center;
        flex-direction: column;
    }

    .simple-img{
        display: none;
    }

    .simple-info > div{
        width: 100%;
    }

    .simple-info > div:nth-child(2){
        margin-bottom: 50px;
    }

    .bottom > div{
        flex-direction: column;
    }

    .bottom > div > button:nth-child(1){
        margin-top: 28%;
        
    }
    
    #twoButtons{
        margin-top: 29%;
        margin-left:4%;
    }

    .b{
        margin-top: 130%;
    }

    .b > p{
        margin: auto;
        width: 130%;
        margin-right: 10%;
        margin-top: -20%;
        margin-left: -10%;
    }

    .chat{
        height: 100px;
        flex-direction: column;
    }

    .chat > div{
        width: 100%;
    }

    .chat >div > i {
        margin-top: -22%;
    }

    .causes{
        margin-top: 120%;
    }

    #causes-img{
        width: 95%;
        margin-left: 3%;
        display: grid;
        grid-template-columns: 33% 33% 33%;
    }

    #causes-img > div:nth-child(4){
        margin-top: -20%;
    }
  
    #causes-img > div:nth-child(5){
        margin-top: -20%;
    }
 
    #causes-img > div:nth-child(6){
        margin-top: -20%;
    }

    
    #causes-img > div:nth-child(7){
        margin-top: -36%;
        margin-bottom: 28% ;
    }
  
    #causes-img > div:nth-child(8){
        margin-top: -36%;
    }
 
    #causes-img > div:nth-child(9){
        margin-top: -36%;
    }

    #causes-img > div > img{
        width: 87%;
    }

    .why{
        width: 100%;
        padding-left: 5% ;
    }

    .keto-info{
        grid-template-columns: 40% 40%;
        grid-template-rows: 40% 40%;
    }

    .keto-info img{
        margin-left: 12%;
    }

    .keto-info > div > div{
        margin-left: 20%;
    }

    .success{
        visibility: hidden;
        width: 100%;
        height: 0px;
    }

    .featured-in{
        width: 100%;
        height: 200px;
        margin-top: 70%;
        margin-bottom: 20%;
    }

    .carousel-featured{
        padding: 0px;
    }

    .carousel-featured-in{
        margin-left: 3%;
        height: 100px;
    }

    .carousel-featured-in > img{
        width: 100%;
    }

    .featured-in > div:nth-child(3){
        display: none;
    }

    body{
        overflow-x: hidden;
    }
    
}


/* for iphone X */ 
@media  only screen and (max-width : 400px){

    .img-inner-div{
        top: 60%;
        right: 2%;
        padding-left: 45%;
        margin-top: 16%;
        height: 200px ;
    }
   
    .img-inner-div-info > div{
        margin-right: 20px;
        margin-left: -10%;
        margin-top:-4% ;
    }
    
 
    .start-fundraiser{
        margin-left: 4% ;
        height: 7vh ;
        margin-top: 4%;
    }

    .featured{
        margin-top: 75%;
    }
  
    #glb{
        margin-left: 3%;
        margin-right: -2%;
    }

    #grb{
        margin-left: 2%;
        margin-top: 1%;
    }

    .carousel-view{
        margin-left: 0%;
    }

    body{
        overflow-x: hidden;
    }
    
}
mt-20{
    margin-top: 20px;
}


#PaymentAnchor{
    color: white;
    text-decoration: none;
}