body{
    /* background-image: url("assets/masjid.jpg"); */
    background-color: rgb(236, 192, 139);

    background-size: cover; /* This makes the image cover the entire screen */
    background-position: center; /* Centers the image */
    background-repeat: no-repeat; /* Prevents the image from repeating */
    height: 100vh; /* Ensures the body takes up the full height of the viewport */
    width: 100%; 
    margin: 0; /* Removes default margin */
    object-fit: contain;
}

.box-title {
    display: inline-block; display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding:0;
    margin:0;

}

.text {
    font-family: monospace;
    font-size: 3em;
    border-right: 5px solid;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    color: rgb(255, 255, 255);
    /* Typing and cursor animations */
    animation: typing 3s steps(30) infinite alternate, 
               cursor 0.8s step-end infinite;
}

/* Typing cursor blinking */
@keyframes cursor {
    50% { border-color: transparent; }
}

/* Typing effect */
@keyframes typing {
    /* from { width: 0; }
    to { width: 100%; }
     Ensures text fully types out */
     0% { width: 0; }
}


button{

    background-color: rgb(186, 138, 16);
    width: 100%;
    height: 50px;
    border-radius: 25px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 50px;
    color: bisque;
    margin-top: 100px;


}

button:hover{

    background-color: rgb(239, 187, 33);
    object-fit: cover;
    width: 100%;
    height: 50px;
    border-radius: 25px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: rgb(254, 254, 254);
}
button h1{

    font-size: 30px;
    font-family: Georgia, 'Times New Roman', Times, serif;
    /* color: bisque; */
}

.div-background{

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width:100%;
    height: 100%;

}

.bg-img{

    height: 50%;
    width: 60%;
    border: solid 1px rgba(233, 174, 98, 0.407);
    border-radius: 25px;
    background-color: rgba(205, 134, 63, 0.196);
    display: flex;
    justify-content: center;
    align-items: center;
    /* flex-direction: column; */
    gap:30px;

   
}
.text-area{

    width: 400px;
    height: 250px;
    background-color:white;
    padding: 20px;
    border-radius: 25px;
    text-align: justify;
    font-size: 20px;
    white-space: normal;
}

.sub-img{

    background-color: rgb(205, 133, 63);
    height: 90%;
    width: 90%;

}

.Frame{

    width:100px;
    height:200px;
    background-color: rgb(143, 159, 165);
    outline: solid 1px green;
    display: flex;
    justify-content: center;
    align-items: center;

}
span{
    line-height:5px;
}