body,html{
   idth: 100%;
    margin: 0%;
    height: 100%;
 background-color: rgb(186, 216, 242) 
}

#intro{
width: 100%;
height: 400px;

background-image: url(../images/devotion.jpg);
background-repeat: no-repeat;
background-position: center;
filter: contrast(100%);
background-size: cover; display: flex; 
flex-direction: column; justify-content: center; align-items: center; 
text-align: center; color: white; filter: contrast(110%);

}

.topic{
    flex:1;
    display:flex;
    justify-content:center;
    align-items:center;
    color:white;
    font-size:24px;
    font-weight:bold;
}

.topic:nth-child(1){
    background:rgb(182, 99, 99);
}

.topic:nth-child(2){
    background:rgb(169, 20, 203);
}

.topic:nth-child(3){
    background:rgb(195, 139, 139);
}


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

body{

    font-family:'Poppins',sans-serif;

    background:#f5f5f5;

}

#intro h1{

    font-size:50px;

    margin-bottom:20px;

    color:rgb(234, 68, 68);

}

#intro p{

    font-size:22px;

    width:70%;

    line-height:1.6;

}


#topics{

    display:flex;

    justify-content:center;

    gap:30px;

    padding:50px;

}

.topic{

    flex:1;

    padding:35px;

    border-radius:20px;

    color:rgb(0, 6, 92);

    text-align:center;

    box-shadow:0 15px 25px rgba(226, 206, 206, 0.25);

    transition:.4s;

}

.topic:hover{

    transform:translateY(-12px);

}


.topic h2{

    margin-bottom:15px;

    font-size:30px;

}

.topic p{

    line-height:1.8;

    font-size:18px;
}
#class{
   display:flex
gap:30px;

 padding:50px;
 background:rgb(182, 99, 99);


}
#class button{
    width: 10%;
    height: 40px;
    color: beige;
    background-color: rgb(44, 42, 165);
}
#slider button:hover{
    background-color:blue;}


.gallery {
    display: grid;
    grid-template-columns: repeat(3, 250px);
    justify-content: center;
    gap: 20px;
}

.gallery img {
    width: 250px;
    height: 180px;
    object-fit: cover;
    border-radius: 10px;
    transition: transform 0.3s ease;
    cursor: pointer;
}

.gallery img:hover {
    transform: scale(1.1) rotate(3deg);

}

.devotion-table th{
    background:#93db97;
    color:rgb(231, 37, 37);
    padding:15px;
}

.devotion-table td{
    padding:15px;
    border-bottom:1px solid #de0606;
    text-align:center;
}

.devotion-table tr:nth-child(even){
    background:#c96c6c;
}

.devotion-table tr:hover{
    background:#62d86c;

}
#desc button{
    width: 50%;
    height: 40px;
    color: beige;
    background-color: rgb(146, 145, 212);
}
#desc button:hover{
    background-color:rgb(14, 14, 159);}