:root {
    --primary-color: #4a4e69;
    --secondary-color: #9a8c98;
    --accent-color: #c9ada7;
    --background-color: #f2e9e4;
    --text-color: #22223b;
}

@font-face {
    font-family: "FontMasjid";
    src: url("fonts/Noteworthy-Bold.ttf") format("truetype"); /* Even older browsers */
    font-weight: bold;
    font-style: normal;
}

body,
html {
    height: 100%;
    margin: 0;
    font-family: Arial, sans-serif;
    color: white;
    background: black;
    overflow: hidden;
}

.top-section {
    /* align-items: center; */
    /* background-color: #172f64; */
    padding: 0px 0px;
    position: absolute;
    top: 20px;
    left: 0;
    width: 100%;
    opacity: 1;
    display: flex;
    align-items: flex-start;
    z-index: 3;
}

.date-info {
    flex-grow: 1;
    display: flex;
    align-items: center;
    /* background-color: rgb(66, 65, 65); */
    padding: 10px 20px;
    font-size: 1.51vw;
    z-index: 2;
}
.space {
    flex-grow: 1;
}
.date-and-clock {
    display: flex;
    align-items: center;
    /* align-items: flex-end; */
    text-align: center;
    margin-right: 20px;
    color: white !important;
    font-weight: bolder;
    padding: 0px 0px;
    border-radius: 25px;
    /* Fallback for non-WebKit browsers */
    /* text-shadow:
        -0.1px -0.1px 0px white,
        0.1px -0.1px 0px white,
        -0.1px 0.1px 0px white,
        0.1px 0.1px 0px white; */

    /* For WebKit browsers */
    /* -webkit-text-stroke: 0.1px white; */
    /* text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.7); */
}
.date {
    height: max-content;
    margin: 0px 0px;
    padding: 0.65em 0.5em;
    background-color: #2c3e50;
    border-top-left-radius: 0.6em;
    border-bottom-left-radius: 0.6em;
}
.date p {
    margin: 0px 0px;
}
.clock {
    height: max-content;
    font-size: 2.2vw;
    line-height: 1.4em;
    font-weight: bold;
    align-items: center;
    text-align: right;
    background-color: #ffffff;
    padding: 0.5em 0.5em;
    z-index: 2;
    /* border-radius: 25px; */
    border-top-right-radius: 0.6em;
    border-bottom-right-radius: 0.6em;
    color: #000000; /*rgb(250,250,250) !important;*/
}
.masjid-logo {
    width: 1em;
    height: 1em;
    /* background: url('logo.png') no-repeat center; */
    /* background-color: red; */
    /* -webkit-mask-image: url('logo.png'); */
    /* mask-image: url('logo.png'); */
}
.masjid-info {
    display: flex;
    margin-right: 0px;
    text-align: left;
    width: 29%;
    background-color: #f7782c;
    padding: 0.5em 2em 0.8em 2em;
    border-bottom-right-radius: 7em;
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.1);
    z-index: 3;
}

.masjid-info h1 {
    margin: 0px 0px 0.1em 0px;
    padding: 0;
    font-size: 2.5vw;
    line-height: 1.15em;
    font-family: "FontMasjid", arial;
    font-weight: bold;
    color: #ffffff;
    letter-spacing: 0.02em;
    /* Fallback for non-WebKit browsers */
    /* text-shadow:
        -0.5px -0.5px 0px white,
        0.5px -0.5px 0px white,
        -0.5px 0.5px 0px white,
        0.5px 0.5px 0px white; */

    /* For WebKit browsers */
    /* -webkit-text-stroke: 0.5px white; */
    /* text-shadow: 2px 2px 5px rgba(255, 255, 255, 1); */
}

.masjid-info p {
    margin: 0px 0px;
    font-size: 1.2vw;
    line-height: 1.35em;
    color: #ffffff !important;
}

#background {
    width: 100vw;
    height: 100vh;
    position: relative;
    margin: auto;
    background-color: black;
    overflow: hidden;
}
.slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 700ms ease;
    pointer-events: none;
}
.slide.active {
    opacity: 1;
}
/* Blurred background */
.blurred-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    filter: blur(20px); /* Apply blur effect */
    object-fit: cover;
    z-index: 0; /* Behind the main image */
}

/* Main image that is centered */
.main-image {
    position: absolute;
    inset: 0;
    margin: auto;
    width: 100%;
    height: 100%;
    object-fit: contain;

    /* 🔽 reduce size */
    transform: scale(0.78); /* adjust: 0.6 - 0.9 */
    transform-origin: center center;
}

#countdown {
    position: absolute;
    top: 35%;
    left: 30%;
    font-size: 10vw;
    color: rgba(255, 255, 255, 0.8);
    border-radius: 0.6em;
    z-index: 4;
    padding: 0.4em;
    text-align: center;
    font-weight: bold;
    display: none;
}

.prayer-times {
    background-color: rgba(200, 225, 255, 0.5);
    padding: 2em 2em;
    position: absolute;
    z-index: 2;
    transition: all 0.5s ease; /* Smooth transition */
}

.prayer-times div {
    text-align: center;
    flex: 1;
    margin: 2vh 0;
    border-radius: 1vw;
    display: flex;
    flex-direction: column;
    z-index: 2;
}

.prayer-times .shubuh {
    /* background-color: #2D9CDB; */
    background-color: #ffffff;
}

.prayer-times .syuruq {
    /* background-color: #56CCF2; */
    background-color: #ffffff;
}

.prayer-times .dzuhur {
    /* background-color: #6FCF97; */
    background-color: #ffffff;
}

.prayer-times .ashar {
    background-color: #ffffff;
}

.prayer-times .maghrib {
    /* background-color: #F2994A; */
    background-color: #ffffff;
}

.prayer-times .isya {
    /* background-color: #9B51E0; */
    background-color: #ffffff;
}

.prayer-times h2 {
    margin: 0;
    padding: 0.5em;
    font-size: 1.35vw;
    border-top-left-radius: 1vw;
    border-top-right-radius: 1vw;
}
.prayer-times .default h2 {
    background-color: #808080;
}
.prayer-times .active h2 {
    background-color: #f7952c;
}

.prayer-times p {
    margin: 0;
    padding: 0.3em;
    font-size: 1.7vw;
    font-weight: bold;
    background-color: rgba(
        255,
        255,
        255,
        0.2
    ); /* Slightly transparent white background for the time box */
    border-bottom-left-radius: 1vw;
    border-bottom-right-radius: 1vw;
    height: 100%;
}
.prayer-times .default p {
    color: #333333 !important;
}
.prayer-times .active p {
    color: #f7952c !important;
}

.footer-text {
    position: absolute;
    bottom: 1.15em;
    width: 100%;
    /* background-color: #333333; */
    background-color: #2c3e50;
    padding: 10px;
    font-size: 1.75vw;
    letter-spacing: 0.8px;
    white-space: nowrap;
    overflow: hidden;
    height: 1.3em;
    line-height: 2vw;
    z-index: 3;
}

.footer-text span {
    display: inline-block;
    white-space: nowrap;
    /* padding-left: -100%; */
    animation: scroll-text 50s linear infinite;
}

#sedekah {
    position: absolute;
    right: 7vw;
    bottom: 14vh;
    z-index: 5;
    width: 300px;
    text-align: justify;
    font-size: 1.2em;
    line-height: 1.2em;
}

#qris {
    margin-top: 10px;
    width: 300px; /* Set the desired width */
    height: 350px; /* Set the desired height */
    background-image: url("/public/qris.png"); /* Add the PNG file here */
    background-size: contain; /* This ensures the image scales properly */
    background-repeat: no-repeat; /* Prevents the background from repeating */
    background-position: center; /* Centers the image in the div */
    z-index: 5;
}

@media (max-aspect-ratio: 1/1) {
    .prayer-times {
        width: 94vw;
        bottom: 5vw; /* Positioned above the footer */
        display: flex;
        justify-content: space-around;
    }
    .prayer-times div {
        margin: 0 20px !important;
    }
}

/* If height < width (landscape orientation) */
@media (min-aspect-ratio: 1/1) {
    .prayer-times {
        top: 7vw;
        bottom: 3vw; /* Move closer to the footer */
    }
}

@keyframes scroll-text {
    0% {
        transform: translateX(0%);
    } /* Start from off-screen to the right */
    100% {
        transform: translateX(-100%);
    } /* End off-screen to the left */
}