body {
    margin: 0;
    padding: 0;
    font-family: 'Nunito', sans-serif;

}

.hero{
    height: 350px;
    text-align: center;
    background-image: url('https://36base.com.ng/wp-content/uploads/2025/06/NYSC-Corps-Members-Marching-in-a-POP-Ceremony.jpg');
    background-size: cover;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 0px;
}

.box{
    border: 0px solid black;
    background-color: #B6C2AE;
    padding: 5px;
    border-radius: 10px;
}

.activiti{
    height: auto;
    text-align: center;
    color: black;
    border: 0px solid #e1e1ab;
    background-color: #e1e1ab;
    padding: 10px;
}

.cds{
    width: 30%;
    height: auto;
    margin: 0%;
}

.activity{
    display: flex;
    justify-content: space-between;
    margin: 0%;
    width: 100%;
}

.guide{    
    height: 350px;
    text-align: center;
    color: black;
    display: flex;
    justify-content: center;
    margin: 0%;
    background-color: antiquewhite;
}

.guid{
    width: 500px;
    height: auto;
    text-align: center;
    color: black;
    display: flex;
    justify-content: space-around;
    margin: auto;
    background-color: #bde0fe;
    border-bottom: 5px solid black;
    border-radius: 10px;
    text-align: center;
    padding: 10px;
}

img{
    width: 100px;
    height: 100px;
    border-radius: 50%;
}

#guide-image{
    width: 180px;
    height: 200px;
    margin: 20px 0px 5px 20px;
    border-radius: 0%;
}

.hov{
    width: 200px;
    flex-shrink: 0;
    height: 200px;
    margin: 20px 0px 5px 20px;
    border-radius: 10%;
    background-image: url("https://pbs.twimg.com/profile_images/1908552274755928064/vcgD39co_400x400.jpg");
    background-size: cover;
    transition: background-image 0.3s ease;
}
.hov:hover{
    background-image: url("https://i.nfte.ai/ia/l901/62359/1719417715222292861_1519147881.avif");
}

.hero:hover{
    background-image: url('https://media4.giphy.com/media/v1.Y2lkPTc5MGI3NjExMDV6ZHM4aHh6YTRxanptZnlpOTBiNzE1djBocHY1dDg5YXZxbTFzbiZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/ckZaiMHc7WKF73vfBN/giphy.gif');
    background-size: cover;
    transition: background-image 0.3s ease;
}

.guid:hover{
    background-image: url("https://media.giphy.com/media/v1.Y2lkPWVjZjA1ZTQ3d3A1dHlnanQ5czk5cjk2MDE2dXFwd2xjcm5yMDF5eDVsdmpmdHVudyZlcD12MV9naWZzX3NlYXJjaCZjdD1n/l3q2NskxlNrJuIcvK/giphy.gif");
    background-size: cover;
    background-color: transparent;
    transition: background-image 0.3s ease;
}

.word{
    color: white;
    text-shadow: 2px 2px 4px #000000;
}

.word:hover{
    color: #bde0fe;
    text-shadow: 2px 2px 4px #000000;
    transition: color 0.3s ease;
}