*{
    box-sizing: border-box;
    padding: 0%;
    margin: 0%;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
html,body{
    scroll-behavior: smooth;
    scroll-snap-type: y mandatory;
    color-scheme: dark,light;
}
:root{
     --bck: #098040;
    --light-bck: #f16823;
    --greys: #e3e3e3;
    --grays: #fefeff;
    --shadow-large: 0px 4px 40px #33333359;
    --shadow-small: 0px 4px 6px #33333359;
    --dark-bakground: #013f09;
    --reds: red;
    --light-background: #f16823;
    --dark-background: #013f09;
    --dark-background2: aquamarine;
    --shadow-large: 0px 4px 40px #33333359;
    --shadow-small: 0px 4px 6px #33333359;
}

header{
    width: 100%;
    position: relative;
}

.clamped-text {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 8;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #303030;
    /* font-size: 1em; */
}

.clamped-textHo {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #303030;
    /* font-size: 1em; */
}

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

.center-down{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.p{
    text-align: center;
    text-transform: capitalize;
}

.pb{
    font-weight: 500;
}

.p-l{
    text-align: left;
}

.h1{
    font-size: 2.5em;
    text-align: left;
    text-transform: capitalize;
}

.h1 span{
    color: #098040;
}
.h1s{
    font-size: 2em;
    text-align: left;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.spb{
    width: 100%;
    height:80vh;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.spb3{
    width: 100%;
    gap: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.padd{
    padding-inline: 6rem;
    padding-block: 4rem;
}

.btn{
    width: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: #fff;
    padding: 12px;
    border-radius: 25px;
    background: var(--light-background);
}

.btn3{
    padding: 8px 60px;
    background: #f16823;
    border-radius: 28px;
    color: #fff;
    text-align: center;
    text-decoration: none;
}
.btn4{
    padding: 8px 60px;
    background: transparent;
    border-radius: 28px;
    color: var(--light-bck);
    border: 1px solid var(--light-bck);
}

.btn5{
    width: 100px;
    text-align: center;
    background: var(--light-background);
    color: #fff;
    border-radius: 25px;
}



.p-bs{
    font-weight: 500;
    font-size: 1.1em;
}
.p-b{
    font-weight: 500;
    font-size: 1.3em;
}

#plus{
    font-weight: 500;
    font-size: 1.5rem;
}

.p{
    text-align: center;
}

.logo{
    width:140px;
    height: 140px;
    background: rgba(255, 255, 255, 0.658);
    border-radius: 12px;
    padding: 12px;
}

.logo img{
    width: 100%;
    height: auto;
}

nav{
    width: 100%;
    display: flex;
    justify-content: space-between;
    position: fixed;
    padding: 8px;
    top: 0%;
    padding-inline: 6rem;
    z-index: 999;
}

nav.active{
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #ffffff;
    backdrop-filter: blur(4px);
    box-shadow: var(--shadow-small);
    border-bottom: 3px solid var(--light-bck);
    background: #fff; 
    border: none;
}

nav.active a{
    color: var(--light-bck);
    font-weight: 500;
    font-size: 0.9em;
}

nav.active .btn5{
    color: #fff;
}

nav.active a:hover{
    color: rgb(39, 39, 39);
    font-weight: 500;
}


nav.active .logo{
    width: 60px;
    height: 60px;
    padding: 0;
}

nav.active .links{
    box-shadow: none;
    background: none;
    height: 0%;
    padding: 0%;
}

nav .links{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    background: rgba(255, 255, 255, 0.514);
    height: 10vh;
    padding: 2rem 1.5rem;
    border-radius: 24px;
    box-shadow: var(--shadow-small);
    /* backdrop-filter: blur(6px); */
}

.links a{    
    text-decoration: none;
    color: rgb(73, 73, 73);
    padding: 8px;
    transition: 0.1s ease;
    border: 2px solid var(--light-background);
    color: var(--light-bck);
    /* color: #fff; */
    /* border: 2px solid #fff; */
    border-radius: 24px;
}

.links .btn5{
    color: #fff;
}

.links .btn5:hover{
    color: #fff;
}

.links a:hover{
    color: green;
    transform: scale(1.02);
}

.hero-slider{
    width: 100%;
}

.hero-slide{
    width: 100%;
    height: 100vh;
    display: none;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    animation: fade 2s ease;
}

@keyframes fade{
0%{
    opacity: 0;
}

100%{
    opacity: 1;
}
}
.hero-slide.active{
    display: flex;
}

.hero-slide .content{
    width: 60%;
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: #fcfcfc62;
    color: rgb(2, 2, 2);
    border-bottom: 6px solid rgb(241, 112, 6);
    padding: 24px;
    border-radius: 12px;
    box-shadow: var(--shadow-small);
}

.hero-slide .content h1{
    font-size: 1.5rem;
    text-transform: uppercase;
}

.hero-slide .content .cont-btns{
    display: flex;
    gap: 20px;
}

.cont-btns a{
    text-align: left;
    border-radius: 24px;
    text-decoration: none;
    color: #f0870f;
    border: 2px solid #f0870f;
    text-align: center;
    font-weight: 500;
    padding: 8px 12px;
}

.cont-btns a:nth-child(2){
    background: #f0870f;
    color: #fff;
}


/* MCta-card */
.MCta-Cards {
    gap: 20px;
}

.MCta-card{
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 10px;
    border-radius: 12px;
    box-shadow: var(--shadow-small);
}

.line{
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 10px;
    padding: 20px;
    border-radius: 12px;
    border: 1px solid var(--light-background);
}

.MCta-card .fa-users,
.MCta-card .fa-bank,
.MCta-card .fa-hands{
    font-size: 3em;
    color: var(--light-background);
}



/* vision */
.vision{
    width: 100%;
    height: 400px;
    background: #fdfdfd;
}

.vision-holder{
    width: 100%;
    display: flex;
    justify-content: space-between;
    gap: 50px;
}

.vision .img{
    width: 100%;
    height: 300px;
    background-image: url(Slide/vision.jpg);
    background-position: center;
    background-size: cover;
    border-radius: 12px;
}

.vision .cont{
    width: 100%;
    height: 300px;
    /* display: flex;
    gap: 20px;
    align-items: center;
    justify-content: center;
    flex-direction: column; */
    border-radius: 12px;
}
/* .vision .cont p{
    text-align: center;
} */
/* about */

/* ABOUT */
.about{
    width: 100%;
    background: rgb(255, 255, 252);
}

.abt-h{
    width: 100%;
    display: flex;
    justify-content: space-between;
    gap: 10px;
}

.abt-left{
    width: 60%;
    position: relative;
}

.abt-left .img{
    width: 100%;
    height: 400px;
    background-image: url(Slide/open001.jpg);
    background-size: cover;
    background-position: center;
    border-radius: 12px;
}

.numbers{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: absolute;
    bottom: -50px;
    background: #f16823;
    padding: 10px;
    color: #fff;
    border-radius: 12px;
}

.numbers-slider{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border-right: 1px solid #fff;
    padding: 0px 10px;
}

.numbers-slider:last-child{
    border: none;
}

.numbers-slider p{
    text-align: center;
}

/* ABOUT - RIGHT */

.abt-right{
    width: 60%;
    margin-left: 30px;
}

.xp{
    width: 100%;
    display: flex;
    align-items: center;
    gap: 120px;
    margin-top: 30px;
    margin-bottom: 30px;
}

.xp-points {
    width: 50%;
    gap: 10px;
}

.xp-box{
    width: 200px;
    height: 140px;
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    border-radius: 12px;
    background: var(--light-bck);
    color: #fff;
}

/* mission */
.mission{
    width: 100%;
    height: 100vh;
}

.mission-top span{
    color: var(--bck);
}

.mission-cta{
    gap: 24px;
    margin-top: 60px;
}

.imgs{
    gap: 20px;
}

.imgs .img{
    width: 600px;
    height: 300px;
    overflow: clip;
    gap: 20px;
    display: flex;
    border-radius: 12px;
    background: #000000;
}

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

.mission .cta{
    /* align-items: flex-end;
    justify-content: right; */
    gap: 10px;
    border-radius: 20px;
}

.mission .cta h3{
    background: var(--light-bck);
    padding: 12px;
    color: #fff;
}

.mission .cta p{
    width: 70%;
    /* text-align: right; */
}

/* cause-card */
.causes{
    width: 100%;
    height: 100vh;
    gap: 62px;
}
.cause-wrapper{
    width: 100%;
    gap: 32px;
}
.cause-card{
    width: 100%;
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 10px;
    box-shadow: var(--shadow-small);
    border-radius: 12px;
    padding-bottom: 12px;
}

.CCD-top{
    width: 100%;
    height: 200px;
    overflow: clip;
}

.CCD-top img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.CCD-mid{
    padding-inline: 12px;
}


.CCd-mid-top h4{
    font-size: 1.04rem;
    margin-bottom: 10px;
    color: var(--light-background);
}

.CCD-mid-foot{
    display: flex;
    justify-content: space-between;
    padding-top: 12px;
}

.CCD-foot{
    width: 100%;
    padding-inline: 12px;
    padding-bottom: 12px;
}

.CCD-foot .donated-range{
    width: 100%;
    height: 5px;
    border-radius: 25px;
    background: rgba(128, 128, 128, 0.205);
    position: relative;
}

.donated-range::before{
    content: "";
    width: 6%;
    background: red;
    inset: 0;
    position: absolute;
    border-radius: 25px;
    animation: closein1 2s ease;
}
.Rangetwo::before{
    content: "";
    width: 24%;
    background: rgb(255, 208, 0);
    inset: 0;
    position: absolute;
    border-radius: 25px;
    animation: closein2 5s ease;
}
.Rangethree::before{
    content: "";
    width: 60%;
    background: rgb(9, 124, 5);
    inset: 0;
    position: absolute;
    border-radius: 25px;
    animation: closein3 5s ease;
}

@keyframes closein1 {
    0%{
        width: 0%;
    }
    100%{
        width: 6%;
    }
}
@keyframes closein2 {
    0%{
        width: 0%;
    }
    100%{
        width: 24%;
    }
}
@keyframes closein3 {
        0%{
        width: 0%;
    }
    100%{
        width: 60%;
    }
}

/* .TST-Card */
.Testimonial{
    width: 100%;
    height: 100vh;
    background: #fafafc;
}

.testimo-mid{
    width: 100%;
    gap: 20px;
    margin-top: 60px;
}

.Tst-top{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 12px;
    gap: 22px;
    border-bottom: 1px solid #ddd;
}
.Tst-top .img{
    width: 100px;
    height: 100px;
}

.Tst-top .img1{
    width: 200px;
    height: 100px;
    overflow: hidden;
}
.Tst-top .img1 img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 12px;
}

.Tst-top .img img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 12px;
}
.TST-Card{
    quotes: '"' '"';
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 20px;
    box-shadow: 3px 4px 12px #33333359;
    padding: 20px;
    border-radius: 12px;
    position: relative;
    background: #fff;
}

.TST-Card::before{
    content: open-quote;
    position: absolute;
    top: -8%;
    right: 5%;
    font-family: monospace;
    font-size: 6em;
    color: #333;
}

.Tst-mid p{
    text-align: center;
    font-style: italic;
    font-weight: 400;
    color: #333;
}

.Tst-foot p{
    font-weight: 500;
    text-align: center;
    font-style: italic;
    color: rgb(18, 139, 6);
}

.stars{
    margin-top: 20px;
}

.stars .fa-star{
    color: rgb(206, 175, 0);
}

/* .TST-Card Two Styles Start*/

.TST-Cardtwo{
    quotes: '"' '"';
    width: 100%;
    height: 320px;
    display: flex;
    gap: 50px;
    justify-content: space-between;
    position: relative;
    background: #fff;
    box-shadow: 3px 4px 12px #33333359;
    padding: 20px;
    border-radius: 12px;
}

.TST-Cardtwo::before{
    content: open-quote;
    position: absolute;
    top: -8%;
    right: 5%;
    font-family: monospace;
    font-size: 6em;
    color: #333;
}

.TST-Cardtwo .Tst-top{
    width: 60%;
    flex-direction: column;
    gap: 5px;
    border-right: 1px solid #ddd;
    border-bottom: none;
    padding-right: 20px;
}

.TST-Cardtwo .Tst-mid{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.TST-Cardtwo .img{
    width: 100%;
    height: 240px;
    flex-shrink: 0;
}

.TST-Cardtwo .img img{
    border-radius: 12px;
}
/* .TST-Card Two Styles End*/

/* donate-cta */
.donate-cta{
    width: 100%;
    height: 100vh;
    background-image: url(Slide/transLife.png);
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;
}

.donate-cta::before{
    content: "";
    position: absolute;
    inset: 0;
    /* background: #02180ada; */
}

.cta-holder{
    width: 100%;
    height: inherit;
    display: flex;
    align-items: last baseline;
    justify-content: baseline;
}

.donate-box{
    width: 300px;
    height: 300px;
    gap: 30px;
    background: #f16823d8;
    padding: 0px 12px;
    color: #fff;
    backdrop-filter: blur(6px);
    border-radius: 12px;
    box-shadow: var(--shadow-large);
    z-index: 1;
}

.donate-box a{
    width: 160px;
    border: 1px solid #ddd;
    padding: 12px;
    text-decoration: none;
    color: #fff;
    text-align: center;
    border-radius: 25px;
}

/* success story */

.SS-card{
    gap: 80px;
}
.ssc-img{
    width: 100%;
    height: 400px;
    overflow: clip;
    border-radius: 20px;
    box-shadow: 10px 10px 0px #000000;
}

.ssc-img img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ssc-content{
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding-block: 3rem;
}

.ssc-content h1{
    /* width: 180px; */
    background: var(--light-background);
    color: #fff;
    text-transform: capitalize;
    text-align: center;
    border-radius: 5px;
    padding: 8px;
    position: relative;
    box-shadow: 0px 4px 12px #00000034;
    /* color: var(--light-background); */
}

.ssc-content h1::before{
    content: "";
    width: 50px;
    height: 50px;
    inset: 0;
    position: absolute;
    left: 140px;
    top: -20px;
    background: var(--bck);
    border-radius: 100%;
    z-index: -1;
    box-shadow: 0px 4px 12px #0000007a;
}

.ssc-icons{
    width: 100%;
    display: flex;
    align-items: center;
    gap: 50px;
}

.icon-div{
    width: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 5px;
    padding: 20px;
    border-radius: 12px;
    background: var(--light-background);
    color: #fff;
    /* background: linear-gradient(45deg, rgb(95, 95, 95), rgb(209, 209, 209)); */
    box-shadow: var(--shadow-small);
}

.icon-div .fa-eye{
    font-size: 1.em;
    color: #fefeff;
}

/* .events */
/* 
.EN-holder{
    width: 100%;
    display: flex;
    gap: 40px;
    margin-top: 60px;
}

.EN-links{
    width: 30%;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.EN-links .EN-links-a-holder{
    display: flex;
    box-shadow: var(--shadow-small);
    border-radius: 12px;
    overflow: hidden;
    color: #fff;
    flex-direction: row-reverse;
}

.EN-links-a-holder:nth-child(2){
    display: flex;
    align-items: center;
    flex-direction: row-reverse;
}

.EN-links-a-holder a{
    padding: 12px;
    text-decoration: none;
    color: var(--dark-bakground);
}

.EN-links-a-holder .date{
    text-align: center;
    padding: 12px;
    background: var(--light-background);
}

.News{
    width: 80%;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.News .img{
    width: 100%;
    height: 300px;
    display: flex;
    background-size: cover;
    background-position: center;
    border-radius: 12px;
    overflow: clip;
    position: relative;
}

.News .img::before{
    content: "";
    inset: 0;
    background: #020100ce;
    position: absolute;
}

.News-cont{
    position: relative;
    padding: 32px;
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: center;
    gap: 10px;
}

.News p, .News h1{
    text-transform: capitalize;
    color: #ddd;
}

.News a{
    padding: 6px 40px 8px;
    border: 1px solid #ddd;
    border-radius: 25px;
    text-decoration: none;
    color: #ddd;
}

.News .date{
    padding: 22px;
    position: relative;
    color: #fff;
    background: var(--light-background);
}

.gallery{
    width: 200px;
    height: 200px;
    display: flex;
    overflow: clip;
    color: #fff;
    border-radius: 12px;
}

.gallery img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.News-btn{
    margin-top: 40px;
} */

/* blog */
.blog{
    height: 100vh;
}

.blogs{
    gap: 50px;
}

.blog-card{
    width: 100%;
    height: 300px;
    padding: 12px;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    justify-content: end;
    background-size: cover;
    background-position: center;
    position: relative;
    box-shadow: var(--shadow-small);
}

.blog-card-cont{
    width: 70%;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.507);
    overflow: hidden;
    position: absolute;
    bottom: -50px;
    box-shadow: var(--shadow-small);
}

.blog-card-cont h1, .blog-card-cont p{
    padding-inline: 20px;
}

.blog-card-cont h1{
    padding-top: 12px;
    font-size: 1rem;
    padding-bottom: 12px;
    /* background: var(--light-background); */
    color: rgb(255, 255, 255);
    text-transform: capitalize;
    background: #d14c0ad0;
}

.blog-card-action{
    float: right;
    text-align: center;
    padding: 8px;
    background: var(--light-background);
}

.blog-card-action a{
    color: #fff;
}

/* foooter */
footer{
    /* background: var(--dark-bakground); */
    background: #aa7774;
    color: #fff;
}
.footer-contents{
    width: 100%;
    display: flex;
    justify-content: space-between;
    gap: 20px;
}

.footer-contents > div{
    width: 100%;
}

.copy-ryt{
    width: 100%;
    text-align: center;
    padding: 12px;
    background: #8b423f;
}