@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&family=Spectral:wght@600&display=swap");

:root {
    --bg-gradient: linear-gradient(135deg, #fcf8f1 0%, #f2f5fa 48%, #eef4f1 100%);
    --card-bg: rgba(255, 255, 255, 0.9);
    --text-color: #1c1c1c;
    --muted-text: #6c757d;
    --primary: #0f5b5f;
    --accent: #f28f3b;
    --border-color: rgba(15, 91, 95, 0.15);
    --shadow-soft: 0 20px 45px rgba(15, 91, 95, 0.12);
}

* {
    box-sizing: border-box;
}

body {}

.main {
    min-height: 93vh;
}

.bgn {
    background: #5C8A5D;

    background: -webkit-linear-gradient(0deg, rgba(92, 138, 93, 1) 0%, rgba(218, 222, 188, 1) 75%);
    background: -moz-linear-gradient(0deg, rgba(92, 138, 93, 1) 0%, rgba(218, 222, 188, 1) 75%);
    background: linear-gradient(0deg, rgba(92, 138, 93, 1) 0%, rgba(218, 222, 188, 1) 75%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#5C8A5D", endColorstr="#DADEBC", GradientType=0);

}

h3 {
    font-family: "DINOTBold9";
}

.loading {
    font-family: "DINOTBold9";
   
    color: #fff;
}
.wrapper {
    max-width: 1612px;
    margin: 0 auto;
}

.btn-city {
    font-family: "DINOTCondBold";
    letter-spacing: 0.03em;
    font-size: 1.1rem;
    border: 1px solid #2b4f22;
    background-color: #e8efea;

    border-radius: 12px;
    width: 100%;
    display: block;
    position: relative;
}

.art-area .bulanbintang-area img {
    display: block;
    transition: transform 0.15s ease-out;
    will-change: transform;
}

.btn-city-active,
.btn-city:hover {
    border: 1px solid #ecd89f;
    background: #0F3F18;
    color: #fff;
    background: -webkit-linear-gradient(0deg, rgba(15, 63, 24, 1) 0%, rgba(30, 83, 46, 1) 100%);
    background: -moz-linear-gradient(0deg, rgba(15, 63, 24, 1) 0%, rgba(30, 83, 46, 1) 100%);
    background: linear-gradient(0deg, rgba(15, 63, 24, 1) 0%, rgba(30, 83, 46, 1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#0F3F18", endColorstr="#1E532E", GradientType=0);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.days-area {
    background: #A97D5A;
    background: -webkit-linear-gradient(0deg, rgba(169, 125, 90, 1) 0%, rgba(246, 232, 163, 1) 50%);
    background: -moz-linear-gradient(0deg, rgba(169, 125, 90, 1) 0%, rgba(246, 232, 163, 1) 50%);
    background: linear-gradient(0deg, rgba(169, 125, 90, 1) 0%, rgba(246, 232, 163, 1) 50%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#A97D5A", endColorstr="#F6E8A3", GradientType=0);

    padding: 3px;
    border-radius: 12px;
}

.days-area .days-area-inside {
    background: #0F3F18;
    background: -webkit-linear-gradient(0deg, rgba(15, 63, 24, 1) 0%, rgba(30, 83, 46, 1) 100%);
    background: -moz-linear-gradient(0deg, rgba(15, 63, 24, 1) 0%, rgba(30, 83, 46, 1) 100%);
    background: linear-gradient(0deg, rgba(15, 63, 24, 1) 0%, rgba(30, 83, 46, 1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#0F3F18", endColorstr="#1E532E", GradientType=0);
    padding: 12px 4px;
    border-radius: 10px;
}

.btn:active {
    color: #fff !important;
}

.btn-day {
    margin: 3px;
    padding: 2px;
    border-radius: 22px;
}

.btn-day img {
    padding: 13px 0px;
}

.btn-day-active {
    background: #A97D5A;
    background: -webkit-linear-gradient(0deg, rgba(169, 125, 90, 1) 0%, rgba(246, 232, 163, 1) 50%);
    background: -moz-linear-gradient(0deg, rgba(169, 125, 90, 1) 0%, rgba(246, 232, 163, 1) 50%);
    background: linear-gradient(0deg, rgba(169, 125, 90, 1) 0%, rgba(246, 232, 163, 1) 50%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#A97D5A", endColorstr="#F6E8A3", GradientType=0);
}

.btn-day-active .btn-day-active-inside {
    background: #467D3A;
    background: -webkit-linear-gradient(0deg, rgba(70, 125, 58, 1) 0%, rgba(127, 194, 103, 1) 50%);
    background: -moz-linear-gradient(0deg, rgba(70, 125, 58, 1) 0%, rgba(127, 194, 103, 1) 50%);
    background: linear-gradient(0deg, rgba(70, 125, 58, 1) 0%, rgba(127, 194, 103, 1) 50%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#467D3A", endColorstr="#7FC267", GradientType=0);

    padding: 3px;
    border-radius: 20px;
}
.list-item-content a{
    color: black;
    text-decoration: none;
}

/** art-area **/
.art-area {
 
    position: relative;
}

.art-area .lentera-area {
    z-index: 99;
    position: absolute;
    top: -90px;
    right: 20%;
}

.art-area .lentera-area img {

    display: block;
    transform-origin: top center;
    animation: lenteraSwing 4s ease-in-out infinite;
}

@keyframes lenteraSwing {
    0% {
        transform: rotate(4deg) translateX(0px);
    }

    50% {
        transform: rotate(-4deg) translateX(0px);
    }

    100% {
        transform: rotate(4deg) translateX(0px);
    }
}

.art-area .mosque-area {
    position: absolute;
    bottom: -40px;
    left: -5%;
    width: 110%;
}

.art-area .bulanbintang-area {
    position: absolute;
    z-index: 80;
    top: 0;
    left: 30%;
}

.form-control  {
    font-family: "ArialBold";
    font-size: 1rem;
}

.social-media-footer {
    font-family: "DINOTCondBlack";
    font-size: 1.2rem;
}
.DINOTCondBold {
    font-family: "DINOTCondBold";
}

.DINOTBold9 {
    font-family: "DINOTBold9";
}
.at {
    font-family: "ArialBold";
}

/** modal style **/
.modal-xl {
    /* widen Bootstrap's XL modal so the schedule fits comfortably */
    --bs-modal-width: min(1600px, 95vw);
}

.modal-content {
    position: relative;
}

.modal-content .modal-lentera-area {
    position: absolute;
    top: 0px;
    left: 34%;
    width: 150px;
    z-index: 99999;
}


.modal-content .modal-lentera-area img {

    display: block;
    transform-origin: top center;
    animation: lenteraSwing 4s ease-in-out infinite;
}



.wrapper-modal {
    position: relative;
    z-index: 9;
    height: 700px;
}

.wrapper-modal .wrapper-modal-content {
    position: relative;
    height: 700px;
}
.wrapper-modal   .wrapper-modal-mosque-mobile {
    position: absolute;
    bottom: -10px;
    left: -10px;
    width: 120px;

}

@media screen and (max-width: 991px) {
  .wrapper-modal {
               height: auto;
        padding-top: 0rem;
    }

    .wrapper-modal .wrapper-modal-content {
        position: relative;
        height: auto;
    }
    .modal-lentera-area-mobile{
        position: absolute;
        top: 0px;
        right: 10%;
        width: 100px; 
        z-index: 99999;
    }
    .modal-lentera-area-mobile img{
        display: block;
        transform-origin: top center;
        animation: mobileLenteraSwing 4s ease-in-out infinite;
    }
}

.wrapper-modal .wrapper-modal-content .wrapper-modal-content-inside {
    position: absolute;
    top: 12%;
    right: 20%;
    width: 300px;
}

@media screen and (max-width: 991px) {
    .border-modal{
        border:1px solid #c5d0ac00;
    }
    .wrapper-modal .wrapper-modal-content .wrapper-modal-content-inside {
        position: relative;
        margin: 0 auto;
        top: 0%;
        right: 0%;
        width: 300px;
    }

    .model-time-area-title {
        margin-top: 90px;
    }

}

.wrapper-modal .wrapper-modal-content .wrapper-modal-content-inside .wrapper-modal-content-bg {
    position: absolute;
    top: -82px;
    left: -177px;
    width: 668px;

}

.wrapper-modal .wrapper-modal-content .wrapper-modal-content-inside .wrapper-modal-mosque {
    position: absolute;
    bottom: -95px;
    left: -363px;
    width: 380px;

}

.modal-box-related {
    position: relative;
}

.modal-box-related .modal-box {

    position: absolute;
    top: -4px;
    width: 100%;
}

.modal-box {
    background: #A97D5A;
    background: -webkit-linear-gradient(0deg, rgba(169, 125, 90, 1) 0%, rgba(246, 232, 163, 1) 50%);
    background: -moz-linear-gradient(0deg, rgba(169, 125, 90, 1) 0%, rgba(246, 232, 163, 1) 50%);
    background: linear-gradient(0deg, rgba(169, 125, 90, 1) 0%, rgba(246, 232, 163, 1) 50%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#A97D5A", endColorstr="#F6E8A3", GradientType=0);

    padding: 2px;
    border-radius: 14px;
}

.modal-box .modal-box-inside {
    background: #0F3F18;
    background: -webkit-linear-gradient(0deg, rgba(15, 63, 24, 1) 0%, rgba(30, 83, 46, 1) 100%);
    background: -moz-linear-gradient(0deg, rgba(15, 63, 24, 1) 0%, rgba(30, 83, 46, 1) 100%);
    background: linear-gradient(0deg, rgba(15, 63, 24, 1) 0%, rgba(30, 83, 46, 1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#0F3F18", endColorstr="#1E532E", GradientType=0);
    padding: 6px;
    border-radius: 12px;
    box-shadow: 1px 4px 6px rgba(0, 0, 0, 0.7);
}

.model-time-area-title,
.model-time-area-inside {
    position: relative;
}

.model-time-area-title h1,
.model-time-area-title h4 {
    font-family: "DINOTBold9";
    color: #fbe4a6;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
    line-height: 90%;
    z-index: 9999;
}

.model-time-area-title h1 {
    font-size: 1.6rem;
}

.model-time-area-title h4 {
    font-size: 1.2rem;
}

.shadow-x {
    box-shadow: 3px 3px 1px rgba(0, 0, 0, 0.3);
}

.border-icon {
    border-radius: 60%;
}

.model-time-area-inside {
    font-family: "DINOTMedium5";
    font-size: 0.9rem;
}

.time {
    font-family: "DINOTMedium5";
    font-size: 1.1rem;
}

.model-time-area-inside p {
    font-family: "DINOTMedium5";
    font-size: 0.9rem;
    line-height: 125%;
    margin: 0px;
}

.modal-circle {
    width: 28px;
    height: 28px;
    border: 3px solid #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 2px;
    color: #fff;
    font-family: "DINOTCondBlack";
    font-size: 1rem;
}
.gradient-line {
    /* Set the height to define the line's thickness */
    height: 5px;
    /* Set the width as needed (e.g., 100% or a fixed value) */
    width: 100%;
    /* Apply the linear gradient */
    /*background-image: linear-gradient(to right, red, yellow, blue);
    /* Optional: add margin for spacing */
    background-color: #f6e8a3;
    margin: 20px 0;
}
.style-a, .style-a strong {
    font-size: 0.8rem !important; 
    line-height: 125%;
    margin-bottom: 0px !important;
    padding-bottom: 0px !important;	
    font-family: "DINOTMedium5";
}
/* .style-a {
  background: #DFE1C0;
background: -webkit-linear-gradient(0deg, rgba(223, 225, 192, 1) 0%, rgba(209, 208, 168, 1) 50%);
background: -moz-linear-gradient(0deg, rgba(223, 225, 192, 1) 0%, rgba(209, 208, 168, 1) 50%);
background: linear-gradient(0deg, rgba(223, 225, 192, 1) 0%, rgba(209, 208, 168, 1) 50%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#DFE1C0", endColorstr="#D1D0A8", GradientType=0);

} */

.list-item {
    display: flex;
    float: right;
}

.list-item-content {
    padding: 10px;
    margin-left: 20px;
}

.mobile-only {
    display: none;
}

.mobile-art-area {
    border: none;
    position: relative;
    width: 100%;
}

.mobile-art-area .mobile-art-star {
    position: absolute;
    top: -35px;
    left: 24%;
    width: 200px;
    z-index: 1;
}

.mobile-art-area .mobile-art-lentera {
    position: absolute;
    top: -124px;
    left: 55%;
    width: 133px;
    z-index: 1;
    transform-origin: top center;
    animation: mobileLenteraSwing 4s ease-in-out infinite;
}

@keyframes mobileLenteraSwing {
    0% {
        transform: rotate(5deg);
    }

    50% {
        transform: rotate(-5deg);
    }

    100% {
        transform: rotate(5deg);
    }
}

@media screen and (max-width: 991px) {
    .main {
        min-height: auto;
        padding-bottom: 3rem;
    }

    /* Mobile (iPhone/Android) overrides go here */
    .mobile-only {
        display: block;
    }

    .desktop-view {
        display: none !important;
    }

    .art-area .lentera-area {
        top: -170px;
        right: 20%;
    }

    .list-item {
        display: block;
        float: none;

    }

    .list-item-content {
        padding: 10px;
    }

}

.dev{
    position: absolute;
    width: 100%;
    margin: 0 auto;
    z-index: 9999;
}
.dev .border{   
    border: 1px solid red !important;
}