*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

.navContainer-st{
    position: relative;
    width: 100%;
    height: auto;

    background: linear-gradient(90deg, rgb(0, 0, 0),rgba(0, 0, 0, 0.449), rgba(184, 175, 0, 0.535)), url(Children-Daressa.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 100% 55%;
    background-attachment: fixed;

    padding: 10rem 0;
    top: 2rem
}
.navContainer-st2{
    position: relative;
    width: 100%;
    height: auto;

    background: linear-gradient(90deg, rgb(0, 0, 0),rgba(0, 0, 0, 0.449), rgba(184, 175, 0, 0.535)), url(Dominic-family.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 100% 23%;
    background-attachment: fixed;

    padding: 10rem 0;
    top: 2rem
}
.navContainer-st3{
    position: relative;
    width: 100%;
    height: auto;

    background: linear-gradient(90deg, rgb(0, 0, 0),rgba(0, 0, 0, 0.449), rgba(184, 175, 0, 0.535)), url(Aza-child.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 100% 35%;
    background-attachment: fixed;

    padding: 10rem 0;
    top: 2rem
}

.caption{
    padding: 1.3rem 0;
    width: min(40rem,90%);
    top: 8rem;
    /* background-color: blueviolet; */
    margin: auto;
}

.cptStory{
    width: 100%;
    text-align: center;


     h1 {
        font-size: 30px;
    }

    hr {
       border: 2px solid #fffb00;
       margin: auto;
       max-width: 6rem;
    }
}



@media (width <= 1050px) {
    
    .cptStory{
        width: 80%;
        text-align: center;
        margin: auto;
        padding: 0;
        /* background-color: blueviolet; */
    
    
         h1 {
            font-size: 24px;
            line-height: 2rem ;
        }
        hr {
            margin-top: 1rem;
         }
    }


    .story-content:nth-child(1){
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        align-items: center;


        gap: 3rem;
        padding: 0;
    }


    .story-image{
        height: 30rem;
        width: 100% !important;
        margin: auto;
    }
    .story-image img{
        height: 100%;
        width: 100%;
        object-fit: cover;
        object-position: 100% 30%;
    }



    .story-description{
        width: 100% !important;
        padding: 1rem 0 !important;
        /* outline: 1px solid rgb(0, 131, 0); */
        /* background-color: blueviolet; */
        height: auto;
    
        h1{
            color: rgb(74, 21, 90);
            font-size: 2rem;
            margin: 0 0 30px;
        }
    
        p{
            font-size: 10px;
            line-height: 27px;
            margin: 0 0 17px 0;
        }
    }
   
    .story-container{
        /* background-color: #fffb00; */
    
        hr{
            border: 4px solid rgb(114, 23, 44);
            margin: 2rem 4rem !important;
        }
    }
}




.story-container{
    margin: 1.9rem 0 0 0;
    /* background-color: aqua; */

    hr{
        border: 1px solid rgb(91, 8, 135);
        margin: 0 4rem;
    }
}

.story-content{
    margin: 2rem 0;
    padding: 10px 1rem;
}
.story-content:nth-child(1){
    margin: 2rem 3rem 0;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    gap: 3rem;
    padding: 1rem;
}

@media (width <= 450px) {
    
    .story-content:nth-child(1){
        margin: 0;
        padding: 3rem 2rem;
    }
}

.story-description{
    width: 50%;
    padding: 1rem;
    /* margin: 0 3rem; */
    /* outline: 1px solid rgb(0, 131, 0); */

    h1{
        color: rgb(74, 21, 90);
        font-size: 2rem;
        margin: 0 0 30px;
    }

    p{
        font-size: 17px;
        line-height: 27px;
        margin: 0 0 17px 0;
    }
}
.story-image{
    height: 30rem;
    width: 47%;
    /* margin: 0 3rem 0 0; */
}
.story-image img{
    height: 100%;
    width: 100%;
    object-fit: cover;
    object-position: 100% 30%;
}


.story-gird{
    position: relative;
    display: grid;
    grid-template-columns: 
    repeat(auto-fit, 
    minmax(200px, 1fr));

    gap: 30px;
    /* background-color: limegreen; */
    padding: 1.5rem 4rem;
}

.grid{
    width: 100%;
    /* background-color: #fffb00; */
    

    span{
        font-size: clamp(30px, 5vw, 2.5rem);
        font-weight: 50;
        color:rgb(74, 21, 90);
        
        display: flex;
        justify-content: center;
        align-items: center;

        padding: 1rem 3rem;
        line-height: 1.4em;
        /* margin: 5em 0 0 0; */

        /* background-color: aqua; */
    }
}

.grid p{
    font-size: clamp(15px, 5vw, 17px);
    line-height: 27px;
    margin: 0 0 17px 0;
}
.grid h1{
    color: rgb(74, 21, 90);
    font-size: 2rem;
    margin: 0 0 20px;
}


@media (width <= 450px){
 
    .story-gird{
        padding: 1.5rem 2rem;

    }


}

.story-breaker{
    position: relative;
    height: auto;
    width: 100%;
    background-color: #000;

    h1{
        font-size: clamp(28px, 5vw, 2.4rem);
        /* margin: 0 0 10px; */
        color: #fffb00;
        padding: 1em 0 0 4rem;
        
    }
}

.bg-img1{
    background: linear-gradient(110deg,rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6), rgba(255, 255, 0, 0.5)), url(Garessa-children.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 100% 28%;
    background-attachment: fixed;

    /* object-fit: cover; */

    mix-blend-mode: multiply;
}
.bg-img2{
    background: linear-gradient(110deg,rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6), rgba(255, 255, 0, 0.5)), url(Dominic-friend.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 100% 28%;
    background-attachment: fixed;

    /* object-fit: cover; */

    mix-blend-mode: multiply;
}
.bg-img3{
    background: linear-gradient(110deg,rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6), rgba(255, 255, 0, 0.5)), url(Aza-husband.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 100% 28%;
    background-attachment: fixed;

    /* object-fit: cover; */

    mix-blend-mode: multiply;
}


.story-holder{
    /* position: absolute; */
    /* background-color: blue; */
    height: auto;
    width: 100%;
    padding: 1rem 0;
    top: 0;


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

    /* gap: 30px; */
}
.story-holder img{
    height: 30rem;
    width: 20rem;
    position: absolute;
    margin: 6rem 0;
    left: 10;
    object-fit: cover;
}
.st-content{
    padding: 0 3rem;
    
    p{
        color: white;
        font-size: 17px;
        line-height: 27px;
        margin: 0 0 20px 0;
    }
}

.story-container .last{
    width: 90%;
    height: auto;
   
    padding: 2rem 0;
    margin: auto;
    margin-top: 3rem;

    /* background-color: aqua; */

    
    h1{
        color: rgb(74, 21, 90);
        text-align: center;
        padding: 0 0 2rem 0;
    }
    p{
        text-align: center;
        padding: 0 0 0.5rem 0;
        font-size: 1.1rem;
    }
    hr{
        border: 1px solid rgb(74, 21, 90);
        max-width: 5rem;
        margin: auto;
        margin-top: 3rem;
    }
}

@media (width <= 1050px){
    .story-container .last{
        hr{
            margin: auto !important;
            margin-top: 3rem;
        }
        p:nth-child(4){
            padding: 0 0 3rem 0;
            /* background-color: blue; */
        }
    }
}
@media (width <= 450px){
    .story-breaker{
        h1{
            padding: 1em 0 0 2rem;

        }
    }
    .st-content{
        padding: 0 2rem;
    }    
}


.duressa-donation{
    width: 100%;
    padding: 0rem 3rem 5rem 3rem;
    /* background-color: #fffb00; */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    
    
    p{
        font-size: 2.6rem;
        text-align: center;
        color: rgb(74, 21, 90);
        padding: 0 0 1rem 0;
    }
    button{
        padding: 1rem 3rem;
        margin: auto;
        border-radius: 25px;
        margin-top: 20px;
        outline: none;
        border: none;
        background-color: rgb(74, 21, 90);
        transition: .3s ease;
    }
    button:hover{
        background-color: #fffb00;
        a{
            color: rgb(74, 21, 90);
            
        }
    }
    a{
        color: aliceblue; 
        text-decoration: none;
        font-size: 1rem;
        outline: none;
    }
    
}

@media (width <= 750px) {

}