/* Fonts */
/*@import url('/fonts/jameel/JameelNooriNastaleeqKasheeda.ttf');

@font-face {
    font-family: Jameel;
    src: url(/fonts/jameel/JameelNooriNastaleeqKasheeda.ttf);
}*/


@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');

@font-face {
    font-family: Naskh;
    src: url(fonts/DecoType\ Naskh\ Regular.ttf);
}

@font-face {
    font-family: Gilroy;
    src: url(fonts/gilroy/Gilroy-Regular.ttf);
    font-weight: 400;
}

@font-face {
    font-family: Gilroy;
    src: url(fonts/gilroy/Gilroy-Medium.ttf);
    font-weight: 500;
}

@font-face {
    font-family: Gilroy;
    src: url(fonts/gilroy/Gilroy-SemiBold.ttf);
    font-weight: 600;
}

@font-face {
    font-family: Gilroy;
    src: url(fonts/gilroy/Gilroy-Bold.ttf);
    font-weight: 700;
}

@font-face {
    font-family: Neue;
    src: url(fonts/Neue/HelveticaNeueMedium.otf);
}

@font-face {
    font-family: Neue;
    src: url(fonts/Neue/HelveticaNeueMedium.otf);
    font-weight: 500;
}

@font-face {
    font-family: Neue;
    src: url(fonts/Neue/HelveticaNeueBold.otf);
    font-weight: 700;
}



/*-----------------*/
html {
    overflow-x: hidden;
}

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

/*Globle*/
.vertical-divider {
    width: 1px;
    background-color: #000;
}

.w-20 {
    width: 22.5%;
}

.w-60 {
    width: 55%;
}

.s-container-lg {
    max-width: 1620px;
    margin: 0px auto;
    ;
}

.invert {
    /*    filter: invert(1)*/
}
/*#Green1-05-2 .list-group-items{
    text-align: center;
}*/
.time-chart-item-1, .time-chart-item-3 {
    width: max-content;
}

.list-style-none {
    list-style: none;
    padding: 0px;
}

.text-s-yellow {
    color: #EDD462;
}

.z-index-2 {
    z-index: 2;
}

/* Fonts */
.bebas {
    /*    font-family: "Bebas Neue" !important;*/
}

.meue {
    font-family: "Neue" !important;
}

.gilroy {
    font-family: "Gilroy" !important;
}

.naskh {
    font-family: "Naskh" !important;
}
/*.jameel {
    font-family: "Jameel";
}*/
/*-----------------*/


/* Font Sizing */
.fs-15 {
    font-size: 15.93px;
    line-height: 19.51px;
}

.fs-23 {
    font-size: 23.16px;
    line-height: 29.09px;
}

.fs-25 {
    font-size: 24px;
    line-height: 34.1px;
}

.fs-27 {
    font-size: 26.55px;
    line-height: 34.1px;
}

.fs-28 {
    font-size: 28px;
    line-height: 34.3px;
}

.fs-32 {
    font-size: 32px;
    line-height: 42px;
}

.fs-36 {
    font-size: 36.5px;
    line-height: 44.71px
}

.fs-42 {
    font-size: 42px;
    line-height: 62.71px
}

.fs-64 {
    font-size: 64.13px;
    line-height: 76.96px;
}


.s-date-1 {
    font-family: "Gilroy";
    font-weight: 700;
    font-size: 74.59px;
    line-height: 92.35px;
}

.s-date-2 {
    font-family: "Gilroy";
    font-weight: 700;
    font-size: 40.72px;
    line-height: 50.41px;
}

.jummah-heading {
    font-size: 36.4px;
    line-height: 56.85px;
}

    .jummah-heading.naskh {
        font-size: 42.4px;
    }

.jummah-timing {
    font-family: "Gilroy";
    font-size: 32.26px;
    list-style: 47.62px;
}

.jummah-lable {
    font-size: 25px;
    line-height: 33.08px;
}

.small-heading {
    font-weight: 700;
    color: #254E22;
    font-family: 'sans-serif' !important;
    font-size: 31.6px;
    line-height: 39.16px;
}

.s-timer {
    font-size: 86px;
    line-height: 90px;
    font-weight: 500;
}


.time-chart-item.iqamah-time {
    color: #254E22;
    font-size: 27px;
    font-family: "Gilroy";
    font-weight: 500;
    line-height: 39.51px;
}

.time-chart-item {
    color: #254E22;
    font-size: 24px;
    font-family: "Gilroy";
    font-weight: 500;
    line-height: 39.51px;
}

.time-chart-item-2 {
    color: #254E22;
    font-family: "Gilroy";
    font-size: 34px;
    font-weight: 600;
    line-height: 42.55px;
}

/*-----------------*/

/*Background*/
.bg-2 {
    /*    background-image: url('images/bg-clock-2.png');*/
    background-size: cover;
    background-position: center center;
}

.bg-img-size {
    /*    background-image: url('images/bg-clock-1.webp');*/
    background-size: cover;
    background-position: center center;
}

.slider-bg-img-size {
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center center;
}

/*-----------------*/

.timer-box-2 {
    margin-bottom: 120px;
    display: inline-flex;
    background-color: #EDD462;
    padding: 20px 24px;
}

#Green1-05-1 {
    /*    background-image: url('images/bg-clock-1.webp');
    background-size: cover;
    background-position: 50% 50%;*/
}

.height-100vh {
    max-height: auto;
    min-height: 100vh;
}

.s-bg-greeen {
    background-color: #95812D;
    height: 320px;
    z-index: 1;
    /* top: 38%; */
    opacity: 75%;
}

.Green1-05-1-header {
    top: 50px;
}

.Green1-times {
    z-index: 2;
    background-color: #FFF9ED;
    padding-right: 32px;
    padding-left: 32px;
}

.dawn-box {
    background-color: #EDD462;
}

/*Time Chart*/
/* .time-chart-item-3,
.time-chart-item-1 {
    max-width: max-content;
} */

.time-chart-item-3.active,
.time-chart-item-1.active {
    background-color: #254E22;
    color: white;
    border-radius: 10px;
}

.timer-box {
    margin-top: -42%;
    background-color: #EDD462;
}

.azan-timeings {
    list-style: none;
    gap: 6px;
}

ul.list-group.azan-timeings.text-end {
    align-items: end;
}

.time-chart-item {
    padding: 4px 10px 4px 10px;
    margin-bottom: 12px;
    max-width: max-content;
}

    .time-chart-item.active {
        background-color: #254E22;
        color: #EDD462;
        border-radius: 8px;
    }

.time-chart-item-2 {
    padding: 4px 10px 4px 10px;
    margin-bottom: 8.5px;
    max-width: max-content;
}

    .time-chart-item-2.naskh {
        line-height: 48px !important;
        font-size: 32px;
        padding: 12px 10px 2px 10px;
    }

    .time-chart-item-2.active {
        background-color: #254E22;
        color: #EDD462;
        border-radius: 8px;
        min-width: 120px;
    }

.jummah-times {
    margin-left: 0px;
}

.jummah-times-box {
    background-color: #081022;
    margin-top: -120px;
}

/*-----------------*/
@media screen and (max-width: 2400px) {
    #Green1-05-2 .col-4.bg-1.px-5.position-relative {
        zoom: 85% !important;
    }
}

@media screen and (max-width: 1900px) {
    #Green1-05-2 .col-4.bg-1.px-5.position-relative {
        zoom: 65% !important;
    }

    #Green1-05-2 .col-8 .Green1-05-2-header,
    #Green1-05-2 .col-8 .text-white.fs-42.w-75.ps-5,
    #Green1-05-2 .col-8 .footer-section {
        zoom: 90% !important;
    }

    #Green1-05-1 .fs-64,
    #Green1-05-1 .s-timer {
        font-size: 36px !important;
        line-height: 52px;
    }

    #Green1-05-1 .fs-36 {
        font-size: 24px !important;
        line-height: 36px;
    }

    #Green1-05-1 .fs-32 {
        font-size: 17px !important;
    }

    #Green1-05-1 .fs-25 {
        font-size: 16px !important;
    }

    .small-heading {
        font-size: 24px !important;
    }

    #Green1-05-1 .fs-23 {
        font-size: 16px !important;
    }

    #Green1-05-1 .fs-15 {
        font-size: 12px !important;
    }

    #Green1-05-1 .list-group.azan-timeings .fs-25 {
        font-size: 13px !important;
    }

    .time-chart-item-3.active, .time-chart-item-1.active {
        /*        padding: 5px !important;*/
    }

    #Green1-05-1 .list-group-items.fs-28 {
        font-size: 18px !important;
    }

    #Green1-05-1 .timer-box {
        margin-top: -29% !important;
    }
}

@media(max-width: 1499px) {
    #Green1-05-1 .container-fluid {
        zoom: 87% !important;
    }

    #Green1-05-2 .col-4.bg-1.px-5.position-relative {
        zoom: 60% !important;
    }
}

@media(max-width: 1350px) {
    #Green1-05-2 .col-4.bg-1.px-5.position-relative {
        zoom: 60% !important;
    }
}

@media(max-width: 1280px) {
    #Green1-05-1 .timer-box {
        margin-top: -15% !important;
    }

    #Green1-05-2 .col-4.bg-1.px-5.position-relative {
        zoom: 50% !important;
    }

    #Green1-05-2 .col-8 .Green1-05-2-header,
    #Green1-05-2 .col-8 .text-white.fs-42.w-75.ps-5,
    #Green1-05-2 .col-8 .footer-section {
        zoom: 60% !important;
    }

    #Green1-05-2 .col-4.bg-1.px-5.position-relative .fs-25 {
        font-size: 22px;
    }
}

@media(max-width: 1150px) {
    #Green1-05-1 .container-fluid {
        zoom: 82% !important;
    }
}

@media(max-width: 1099px) {
    #Green1-05-1 .container-fluid {
        zoom: 76% !important;
    }
}

@media(max-width: 1024px) {
    #Green1-05-1 .container-fluid {
        zoom: 70% !important;
    }

    #Green1-05-2 .col-4.bg-1.px-5.position-relative {
        zoom: 45% !important;
    }

    .w-20 {
        margin: 3rem 0 !important;
    }
}

@media(max-width: 990px) {
    #Green1-05-1 .s-date-1 {
        font-size: 42px;
        line-height: 62px;
    }

    #Green1-05-1 .s-date-2 {
        font-size: 24px;
        line-height: 36px;
    }
}

@media(max-width: 946px) {
    #Green1-05-1 .container-fluid {
        zoom: 65% !important;
    }

    #Green1-05-2 .col-4.bg-1.px-5.position-relative .fs-25 {
        font-size: 18px;
    }

    #Green1-05-2 .col-4.bg-1.px-5.position-relative .fs-32 {
        font-size: 24px;
    }

    #Green1-05-2 .fs-23 {
        font-size: 20px;
    }

    #Green1-05-2 .col-8 .Green1-05-2-header,
    #Green1-05-2 .col-8 .text-white.fs-42.w-75.ps-5,
    #Green1-05-2 .col-8 .footer-section {
        zoom: 50% !important;
    }

    #Green1-05-2 .col-8 .text-white.fs-42 {
        font-size: 28px;
    }
}

@media(max-width: 880px) {
    #Green1-05-1 .container-fluid {
        zoom: 59% !important;
    }

    #Green1-05-2 .col-4.bg-1.px-5.position-relative {
        zoom: 38% !important;
    }

    #Green1-05-2 .col-8 .Green1-05-2-header,
    #Green1-05-2 .col-8 .text-white.fs-42.w-75.ps-5,
    #Green1-05-2 .col-8 .footer-section {
        zoom: 40% !important;
    }
}

@media(max-width: 807px) {
    #Green1-05-1 .container-fluid {
        zoom: 52% !important;
    }
}

@media(max-width: 768px) {
    #Green1-05-1 .container-fluid {
        zoom: 47% !important;
    }
}

@media(max-width: 694px) {
    #Green1-05-1 .container-fluid {
        zoom: 40% !important;
    }

    #Green1-05-2 .col-4.bg-1.px-5.position-relative {
        zoom: 30% !important;
    }
}

@media(max-width: 599px) {
    #Green1-05-1 .container-fluid {
        zoom: 34% !important;
    }
}

@media(max-width: 533px) {
    #Green1-05-1 .container-fluid {
        zoom: 30% !important;
    }

    #Green1-05-2 .col-4.bg-1.px-5.position-relative {
        zoom: 20% !important;
    }
}

@media(max-width: 499px) {
    #Green1-05-1 .container-fluid {
        zoom: 28% !important;
    }
}

@media(max-width: 437px) {
    #Green1-05-1 .container-fluid {
        zoom: 22% !important;
    }
}

@media(max-width: 380px) {
    #Green1-05-1 .container-fluid {
        zoom: 18% !important;
    }

    #Green1-05-2 .col-4.bg-1.px-5.position-relative {
        zoom: 18% !important;
    }

    #Green1-05-2 .col-8 .Green1-05-2-header,
    #Green1-05-2 .col-8 .text-white.fs-42.w-75.ps-5,
    #Green1-05-2 .col-8 .footer-section {
        zoom: 18% !important;
    }
}


.qr-code {
    max-width: 91px;
    max-height: 91px;
}

.logo-dimensions {
    max-width: 85px;
    max-height: 102px;
}

.bg-timer-box {
    padding: 10px 15px;
    background: #EDD462;
    color: #000;
    font-weight: bold;
}
/*-----------------*/