/* 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: FONTSPRING;
    src: url(fonts/FONTSPRING/Fontspring-DEMO-bebasneuepro-bold.otf);
}


@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;
}

@font-face {
    font-family: Bodoni;
    src: url(fonts/Bodoni/bodoni-72-medium.ttf);
    font-weight: 500;
}

@font-face {
    font-family: Bodoni;
    src: url(fonts/Bodoni/bodoni-72-bold.ttf);
    font-weight: 700;
}



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

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

/*Globle*/

.xl-container {
    max-width: 1636.6px;
}

.divider {
    height: 1px;
    background-color: white;
}

.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 */
.fontspring {
    font-family: "FONTSPRING" !important;
}

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

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

.bodoni {
    font-family: "Bodoni" !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-39 {
    font-size: 39.5px;
    line-height: 62.71px;
}

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

.fs-48 {
    font-size: 47.96px;
    line-height: 58.75px;
}

.fs-52 {
    font-size: 51.15px;
    line-height: 61.13px;
}

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

.fs-76 {
    font-size: 72.92px;
    line-height: 90.73px;
}

.fs-82 {
    font-size: 82px;
    line-height: 90.73px;
}

.line-height-62px {
    line-height: 62.71px;
}

.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*/
#Clock4 {
/*    background-color: #FAF6EB;*/
    background-size: cover;
    background-position: center center;
}

#Clock3 {
/*    background-image: url(./images/clock-3/background.webp);*/
    background-size: cover;
    background-position: center center;
}

.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;
}

/* Clock 3 */
.clock3-header-box {
    background: linear-gradient(90deg, #D3B651 0%, #C8AB4F 12.35%, #B0924A 45.5%, #A28247 75.68%, #9D7D46 100%);
    padding: 4px;
    max-width: 380px;
    margin-right: -4px;
    margin-top: 32px;
}

.clock3-header-box-innner {
    background: #0a121d;
    padding: 14px 20px;
    max-width: 370px;
    height: 100%;
}

.clock-3-circle-wrap {
    background: linear-gradient(90deg, #D3B651 0%, #C8AB4F 12.35%, #B0924A 45.49%, #A28247 75.67%, #9D7D46 99.98%);
    padding: 4px;
    border-radius: 100%;
    box-shadow: 0px 3px 0px 2px rgba(228,223,202,1);
    display: inline-block;
}

.clock-3-circle {
    background-color: #081022;
    height: auto;
    width: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 100%;
    min-width: 256.2px;
    min-height: 260.7px;
    padding: 12px 2px;
    text-align: center;
    overflow: hidden;
}

    .clock-3-circle.s-small {
        min-width: 183.27px;
        min-height: 186.4px;
    }

.asdasdas {
    margin-top: -50px;
}

.clock-3-time-warpper {
    background-image: url(./images/half-ring.png);
    background-position: top;
    background-size: cover;
    height: 47vh;
    min-height: 450px;
    flex-grow: 1;
    color: #0A121D;
}

.clock-3-time {
    padding: 1.5vw 8vw 0.2vw 8vw;
}

.clock-3-time-img {
    top: 8px;
    width: 69.5%;
}
/*-----------------*/


/* Clock 4 */
.clock-4-top-box {
    position: absolute;
    top: 0px;
    margin: auto;
    left: 39%;
    box-shadow: 0px 10px 24.6px 0px #00000030;
    overflow: hidden;
    border-radius: 0px 0px 60px 60px !important;
    width: 460px;
}

.time-chart-item-one.active {
    background: #EDD462;
    border-radius: 60px;
    padding: 0px 0px;
}

.clock-4-heading {
    background-color: #188B20;
    padding: 9px 36px;
    border-radius: 20px;
}

.jummah-times-clock-4 {
    background-color: #EDD462;
    padding: 30px 60px 20px 30px;
    position: absolute;
    right: 0%;
}


/* Clock 5 */
/* Start of col 1 */
.dimanic_timer_wrapper {
/*    background-image: url(./images/clock-5/background.png);*/
    background-position: center;
    background-size: cover;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.navbar {
    padding: 2vw 4.277vw 0vw;
    font-size: 1.762vw;
}

    .navbar img {
        width: 5.116vw;
    }

.dymanic_timmer_box {
    padding: 1vw 4.277vw 2vw;
}

    .dymanic_timmer_box h1 {
        font-size: 7.278vw;
        line-height: 7.278vw;
        margin-bottom: -1.178vw;
    }

    .dymanic_timmer_box h2 {
        font-size: 2.239vw;
        line-height: 2.743vw;
    }

    .dymanic_timmer_box .countdown {
        font-size: 7.555vw;
        line-height: 7.555vw;
        margin: -1vw 0vw;
    }

    .dymanic_timmer_box .current_time .text,
    .dymanic_timmer_box .current_date .text {
        font-size: 1.512vw;
    }

.dimanic_timer_wrapper .current_time .time {
    font-size: 5.816vw;
    margin: -1vw 0vw;
}

.dimanic_timer_wrapper .current_date .date {
    font-size: 3.779vw;
    margin: -1vw 0vw;
}

    .dimanic_timer_wrapper .current_date .date span {
        font-size: 2.523vw;
    }

.lunar_calendar_eng {
    font-size: 1.036vw;
    padding: 0px 0.5vw;
    background-color: #EDD462;
    border-radius: 4px;
}

.lunar_calendar_arabic {
    direction: rtl;
    font-size: 2.022vw;
}

    .lunar_calendar_arabic span {
        font-size: 1.522vw;
    }

.dimanic_timer_wrapper .footer {
    background-color: #EDD462;
    padding: 1.5vw 4.277vw 1.2vw;
}

    .dimanic_timer_wrapper .footer .text {
        font-size: 1.497vw;
    }



/* End of col 1 */

/* Start of col 2 */
.clock-5 .timing_banner_wrapper {
    background-color: #E39D53;
    padding: 10px;
}

.clock-5-box-date {
    font-size: 1.66vw;
    background-color: #edd462;
    padding: 0.2vw 1vw 0vw 1vw;
    text-align: center;
    color: #000;
    border-radius: 12px;
    font-weight: 600;
    display: inline-block;
}

.clock-5-image-1 {
    position: absolute;
    top: 10%;
    left: 22%;
    width: 5vw;
}

.clock-5-image-2 {
    position: absolute;
    top: 9%;
    width: 3.4vw;
    left: 27%;
}

.clock-5-image-3 {
    position: absolute;
    top: 18%;
    width: 3vw;
    right: 3%;
}

.clock-5-image-4 {
    position: absolute;
    top: 12%;
    width: 3.2vw;
    right: 8%;
}

.rise-text, .dawn-text {
    font-size: 22px;
    line-height: 2.017vw;
    font-weight: 500;
}

.clock-5.footer {
    position: absolute;
    bottom: 0.5vw;
    left: 1.5vw;
}
.clock-5.footer-mobile-qr {
    position: absolute;
    bottom: 0.5vw;
    right: 1.5vw;
}

.clock-5.footer .text {
    font-size: 1.5rem;
}

.clock-5-align-right {
    position: absolute;
    top: 2vw;
    right: 9vw;
}

.clock-5-box-date.bg-green {
    background-color: #188B20;
    color: white;
}

.clock-5 .timing_banner_item img {
    width: 1.955vw;
}

.clock-5 .timing_banner_item .text {
    font-size: 1.3vw;
}

.azan_timmings_icon_box {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 20px;
    margin-bottom: 30px;
}

    .azan_timmings_icon_box .text {
        font-size: 1.397vw;
    }

    .azan_timmings_icon_box img {
        width: 3.77vw;
        height: 3.77vw;
    }


.azan_timmings_list {
    gap: 35px;
}

.clock-5 .azan_timmings_list_item_name {
    box-shadow: 0px 3px 11.4px 0px rgba(0,0,0,0.16);
    padding: 0.417vw 2.604vw;
    border-radius: 0.733vw;
    align-items: center;
    color: #656565;
    height: 3.6vw;
}

    .clock-5 .azan_timmings_list_item_name .text {
        font-size: 1.397vw;
        font-weight: 600;
    }

    .clock-5 .azan_timmings_list_item_name img {
        width: 2.664vw;
    }

    .clock-6 .azan_timmings_list_item_name.active,
    .clock-6 .azan_timmings_list_item_name.active .text,
    .clock-5 .azan_timmings_list_item_name.active {
        background-color: #558B55;
        color: white;
    }

.clock-5.azan_timmings_list_item_time {
    font-size: 2.008vw;
    font-weight: 600;
    box-shadow: 0px 3px 11.4px 0px rgba(0,0,0,0.16);
    padding: 0.257vw 1.3vw;
    border-radius: 0.733vw;
    color: #656565;
    height: 3.6vw;
}

    .clock-5.azan_timmings_list_item_time.active {
        background-color: #558B55;
        color: white;
    }
/* End Of Clock 5 */

/* Start of Clock 6 */
.clock-6-sidebar {
    width: 36.429%;
}

.clock-6 .clock-6-content-body {
    width: 63.571%;
    background-image: url(./images/clock-6/background.png);
    background-position: center;
    background-size: cover;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.clock-6 .timing_banner_wrapper {
    padding: 0.650vw 1.222vw !important;
}

.clock-6 .timing_banner_item img {
    width: 1.576vw;
    height: 1.576vw;
}

.clock-6 .timing_banner_item .text {
    font-size: 1.106vw !important;
    color: #606060;
}

.clock-6_timer_wrapper {
    background-color: #558B55;
    padding: 0.800vw 1.8vw 0vw 0.8vw;
}

.clock-6 .current_time .text,
.clock-6 .current_date .text {
    font-size: 0.738vw;
}

.clock-6 .current_time .time {
    font-size: 2.837vw;
}

.clock-6 .lunar_calendar_eng {
    font-size: 0.505vw;
    padding: 0px 0.2vw;
}

.clock-6 .lunar_calendar_arabic {
    font-size: 0.986vw;
}

    .clock-6 .lunar_calendar_arabic span {
        font-size: 0.975vw;
    }

.clock-6_timer_wrapper .current_date .date {
    font-size: 1.843vw;
}

    .clock-6_timer_wrapper .current_date .date span {
        font-size: 1.231vw;
    }

.clock-6 .dymanic_timmer_box {
    font-size: 2.148vw;
}

    .clock-6 .dymanic_timmer_box .text {
        font-size: 1.537vw;
    }

.azan_timmings_list {
    gap: 1.711vw;
}

.clock-6 .azan_timmings_icon_box {
    margin-bottom: 26px;
}

.clock-6 .azan_timmings_list_item_name {
    box-shadow: 0px 3px 11.4px 0px rgba(0,0,0,0.16);
    padding: 0.417vw 2vw;
    border-radius: 0.733vw;
    align-items: center;
    gap: 1.15vw;
    height: 3vw;
}

    .clock-6 .azan_timmings_list_item_name .text {
        font-size: 1.138vw;
        color: #656565;
        font-weight: 600;
    }

    .clock-6 .azan_timmings_list_item_name img {
        width: 2.169vw;
    }

.clock-6.azan_timmings_list_item_time {
    box-shadow: 0px 3px 11.4px 0px rgba(0,0,0,0.16);
    padding: 0.22vw 1vw;
    border-radius: 0.733vw;
    align-items: center;
    gap: 1.15vw;
    height: 3vw;
}

    .clock-6.azan_timmings_list_item_time .text {
        font-size: 1.627vw;
        font-weight: 600;
        color: #656565;
    }

.clock-6 .footer {
    padding: 1vw 4.277vw 1vw;
}

.clock-6 .counter {
    font-size: 3vw;
    text-align: center;
}

.clock-6 .counter-box .text {
    font-size: 1.186vw;
}

/* Clock 7 */

.clock-7-content-body {
    width: 63.571%;
    background-image: url(./images/clock-6/background.png);
    background-position: center;
    background-size: cover;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.clock-7-sidebar {
    width: 36.429%;
}

    .clock-7-sidebar .timing_banner_wrapper {
        background-color: #0849AB;
        padding: 0.650vw 1.222vw !important;
    }

.clock-7 .timing_banner_item .text {
    font-size: 1.106vw;
}

.clock-7 .timing_banner_item img {
    width: 1.572vw;
}

.clock-7-sidebar .current_date {
    background-color: #0849AB;
    padding: 0vw 1vw 0.1vw;
}

    .clock-7-sidebar .current_date h3 {
        font-size: 2.691vw;
    }

    .clock-7-sidebar .current_date .text {
        font-size: 1.469vw;
        margin-top: -0.7vw;
    }

.clock-7_timer_wrapper {
    background-color: white;
}

.clock-7 .current_time {
    background-color: #E49E54;
    padding: 0.2vw 1.15vw;
    border-radius: 0.9vw;
}

    .clock-7 .current_time .text {
        font-size: 0.62vw;
    }

    .clock-7 .current_time .time {
        font-size: 2.383vw;
        margin: -0.611vw 0px -0.978vw;
    }

.clock-7 .time-info h3 {
    font-size: 4.087vw;
    color: #0849AB;
    margin-bottom: -15px;
}

.clock-7 .counter-box {
    background-color: #0849AB;
    padding: 1rem;
    border-radius: 0.9vw 0 0 0.9vw;
}

    .clock-7 .counter-box .text {
        font-size: 1.469vw;
    }

    .clock-7 .counter-box h3 {
        font-size: 4.018vw;
    }

.clock-7 .Jummah-box {
    background-color: #000000;
    padding: 0vw 2vw;
    border-radius: 0.9vw;
    width: 25.097vw;
    margin: auto;
}

.clock-7 .s-text-orange {
    color: #E49E54;
}

.clock-7 .Jummah-box .title_eng {
    font-size: 1.673vw;
}

.clock-7 .Jummah-box .title_arabic {
    font-size: 2.764vw;
}

.clock-7 .Jummah-box .divider {
    background-color: #FFF9ED;
    height: 1;
    width: 100%;
}

.clock-7 .Jummah-box .time {
    font-size: 1.798vw;
    font-weight: 500;
}

.clock-7 .Jummah-box .text {
    font-size: 1.237vw;
    font-weight: 600;
}

.clock-7 .azan_timmings_wrapper {
    background-image: url(./images/clcok-7/side-background.png);
    background-size: cover;
    background-image: center center;
}

.clock-7 .azan_timmings_icon_box {
    color: #0849AB;
    background-color: white;
    display: inline-block;
    padding: 0.15vw 0.5vw;
    text-align: center;
    text-transform: uppercase;
    border-radius: 1.539vw;
    min-width: 7.827vw;
}

    .clock-7 .azan_timmings_icon_box .text {
        font-size: 1.539vw;
    }

.clock-7 .azan_timmings_list {
    gap: 0.8vw;
}

.clock-7 .azan_timmings_list_item_name {
    font-size: 3.179vw;
    text-align: left;
    display: inline-block;
    line-height: 3.179vw;
    padding: 0.2vw 1vw 0vw;
    border-radius: 1vw;
    height: 3.373vw;
    width: auto;
}

    .clock-7 .azan_timmings_list_item_name .text {
        padding: 0px;
    }

    .clock-7 .azan_timmings_list_item_name.active {
        background-color: #E49E54;
        color: black;
    }

.clock-7 .azan_timmings_list_item_time {
    font-size: 1.818vw;
    height: 3.373vw;
    font-weight: 500;
    display: flex;
    justify-content: center;
    align-items: center;
}

    .clock-7 .azan_timmings_list_item_time.active {
        background-color: #E49E54;
        color: #000;
        font-weight: 500;
        border-radius: 1vw;
    }

.clock-7 .hidden {
    visibility: hidden;
}

/* Clock 8 */
#Clock8-wrapper {
    background: linear-gradient(90deg, #0849AB 0%, #27C4F2 100%);
}

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

    .clock-8 .twilight img {
        width: 1.949vw;
    }

    .clock-8 .twilight .text {
        font-size: 1.363vw;
        font-weight: 400;
    }

.current-date-time {
    background-color: white;
    border-radius: 1.2vw;
    width: 41.316vw;
    padding: 0vw 1.4vw;
    color: #0849AB;
}

.current_date_lable {
    font-size: 1.567vw;
}


.clock-8 .current_date {
    color: #0849AB;
}

    .clock-8 .current_date h3 {
        font-size: 2.785vw;
    }

    .clock-8 .current_date .text {
        font-size: 1.52vw;
        margin-top: -0.8vw;
    }


.clock-8 .lunar_calendar_eng {
    font-size: 1.028vw;
    background: #E49E54;
    padding: 0.225vw 0.5vw;
    border-radius: 0px;
}

.clock-8 .lunar_calendar_arabic {
    font-size: 2.01vw;
}

.clock-8 .current_time .time {
    font-size: 6.027vw !important;
    margin: -1.5vw 0vw;
    color: #0849AB;
}

.clock-8 .clock-8-info_wrapper {
    max-width: 90%;
    text-align: center;
}

.clock-8 .azan_timmings_wrapper {
    background-color: rgba(0,0,0,0.4);
    border: 1px solid #fff;
    border-radius: 2.5vw;
}

.clock-8 .azan_timmings_list {
    gap: 1.5vw;
}

.clock-8 .azan_timmings_list_item_name {
    font-size: 3.179vw;
    text-align: left;
    display: inline-block;
    line-height: 3.179vw;
    padding: 0.2vw 1vw 0vw;
    border-radius: 1vw;
    height: 3.373vw;
    width: auto;
}

    .clock-8 .azan_timmings_list_item_name .text {
        padding: 0px;
    }

    .clock-8 .azan_timmings_list_item_name.active {
        background-color: #E49E54;
        color: black;
    }

.clock-8 .azan_timmings_list_item_time {
    font-size: 1.818vw;
    height: 3.373vw;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 1vw;
}

    .clock-8 .azan_timmings_list_item_time.active {
        background-color: #E49E54;
        color: #000;
        font-weight: 700 !important;
    }

.clock-8 .hidden {
    visibility: hidden;
}

.clock-8 .azan_timmings_icon_box {
    color: #0849AB;
    background-color: white;
    display: inline-block;
    padding: 0.15vw 0.5vw;
    text-align: center;
    text-transform: uppercase;
    border-radius: 1.539vw;
    min-width: 7.827vw;
}

    .clock-8 .azan_timmings_icon_box .text {
        font-size: 1.539vw;
    }

.clock-8 .prayer .azan_timmings_list_item_time {
    font-size: 2.5rem;
    padding: 0.6vw 1vw;
}


.clock-8 .counter-box {
    background-color: white;
    padding: 0px;
    color: #0849AB;
    border-radius: 2vw;
}

    .clock-8 .counter-box .counter {
        font-size: 7.857vw;
    }

    .clock-8 .counter-box .text {
        font-size: 2.872vw;
    }



/* RESPONSIVENESS */
@media screen and (max-width: 9000px) {
    #Clock6 #Green1-05-2 .col-4.position-relative {
        zoom: 96% !important;
    }

    #Clock7 #Green1-05-2 .col-4.position-relative {
        zoom: 92% !important;
    }
}

@media screen and (max-width: 5000px) {
    #Clock6 #Green1-05-2 .col-4.position-relative {
        zoom: 95% !important;
    }

    #Clock3 .Green1-05-2-header, #Clock3 .clock3-header-box, #Clock3 .xl-container {
        zoom: 120%;
    }
}

@media screen and (max-width: 4000px) {
    #Clock6 #Green1-05-2 .col-4.position-relative {
        zoom: 93% !important;
    }

    #Clock4 .Green1-05-2-header, #Clock4 .container-fluid {
        zoom: 100% !important;
    }

    #Clock3 .Green1-05-2-header, #Clock3 .clock3-header-box, #Clock3 .xl-container {
        zoom: 100%;
    }
}

@media screen and (max-width: 2400px) {
    #Clock6 #Green1-05-2 .col-4.position-relative {
        zoom: 90% !important;
    }

    #Clock8 .row.no-gutters {
        zoom: 92% !important;
    }

    #Clock4 .Green1-05-2-header, #Clock4 .container-fluid {
        zoom: 100% !important;
    }

    #Clock3 .Green1-05-2-header, #Clock3 .clock3-header-box, #Clock3 .xl-container {
        zoom: 105%;
    }
}

@media screen and (max-width:2160px) {
    #Clock3 .Green1-05-2-header, #Clock3 .clock3-header-box, #Clock3 .xl-container {
        zoom: 95%;
    }
}

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

    #Clock7 #Green1-05-2 .col-4.position-relative {
        zoom: 86% !important;
    }

    #Clock8 .row.no-gutters {
        zoom: 82% !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;
    }

    #Clock4 .Green1-05-2-header, #Clock4 .container-fluid {
        zoom: 85% !important;
    }

    #Clock5 .azan_timmings_wrapper, #Clock5 .navbar {
        zoom: 98%;
    }

    #Clock5 .footer-bottom {
        zoom: 90%;
    }

    #Clock3 .Green1-05-2-header, #Clock3 .clock3-header-box, #Clock3 .xl-container {
        zoom: 90%;
    }

    #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 screen and (max-width:1580px) {
    #Clock3 .Green1-05-2-header, #Clock3 .clock3-header-box, #Clock3 .xl-container {
        zoom: 82%;
    }
}

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

    #Clock6 #Green1-05-2 .col-4.position-relative {
        zoom: 86% !important;
    }

    #Clock7 #Green1-05-2 .col-4.position-relative {
        zoom: 80% !important;
    }

    #Clock8 .row.no-gutters {
        zoom: 75% !important;
    }

    #Clock4 .Green1-05-2-header, #Clock4 .container-fluid {
        zoom: 80% !important;
    }

    #Clock5 .azan_timmings_wrapper, #Clock5 .navbar {
        zoom: 95%;
    }

    #Clock5 .footer-bottom {
        zoom: 85%;
    }

    #Clock3 .Green1-05-2-header, #Clock3 .clock3-header-box, #Clock3 .xl-container {
        zoom: 72%;
    }
}

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

    #Clock8 .row.no-gutters {
        zoom: 70% !important;
    }

    #Clock5 .azan_timmings_wrapper, #Clock5 .navbar {
        zoom: 92%;
    }

    #Clock5 .footer-bottom {
        zoom: 80%;
    }
}

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

    #Clock6 #Green1-05-2 .col-4.position-relative {
        zoom: 84% !important;
    }

    #Clock7 #Green1-05-2 .col-4.position-relative {
        zoom: 75% !important;
    }

    #Clock8 .row.no-gutters {
        zoom: 65% !important;
    }

    #Clock4 .Green1-05-2-header, #Clock4 .container-fluid {
        zoom: 70% !important;
    }

    #Clock5 .dymanic_timmer_box {
        zoom: 90%;
    }

    #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: 67% !important;
    }

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

    #Clock3 .Green1-05-2-header, #Clock3 .clock3-header-box, #Clock3 .xl-container {
        zoom: 65%;
    }
}

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

    #Clock8 .row.no-gutters {
        zoom: 60% !important;
    }
}

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

    /* #Clock8 .row.no-gutters{
        zoom: 55% !important;
    } */
}

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

    #Clock6 #Green1-05-2 .col-4.position-relative {
        zoom: 80% !important;
    }

    #Clock7 #Green1-05-2 .col-4.position-relative {
        zoom: 72% !important;
    }

    #Clock8 .row.no-gutters {
        zoom: 75% !important;
    }

        #Clock8 .row.no-gutters .current-date-time {
            width: 44.316vw !important;
        }

            #Clock8 .row.no-gutters .current-date-time .lunar_calendar.pt-3.gap-2 {
                padding-top: 0.5rem !important;
            }

            #Clock8 .row.no-gutters .current-date-time .current_time.text-center {
                padding-top: 0.25rem !important;
            }

    .clock-8 .clock-8-info_wrapper {
        max-width: 94%;
        text-align: center;
    }

    #Clock5 .azan_timmings_wrapper, #Clock5 .navbar {
        zoom: 86%;
    }

    #Clock5 .footer-bottom {
        zoom: 65%;
    }

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

    #Clock4 .clock-4-top-box, #Clock4 .Green1-times {
        zoom: 80% !important;
    }

    #Clock4 .clock-3-inner .w-20 {
        zoom: 80% !important;
    }

    #Clock3 .Green1-05-2-header, #Clock3 .clock3-header-box, #Clock3 .xl-container {
        zoom: 55%;
    }
}

@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: 67% !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;
    }

    #Clock6 #Green1-05-2 .col-4.position-relative {
        zoom: 80% !important;
    }

    #Clock7 #Green1-05-2 .col-4.position-relative {
        zoom: 62% !important;
    }
     #Clock4 .Green1-05-2-header{
        zoom: 50% !important;
    } 
    #Clock4 .clock-4-top-box, #Clock4 .Green1-times {
        zoom: 70% !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: 30% !important;
    }*/

    #Clock8 .row.no-gutters {
        zoom: 80% !important;
    }

    #Clock3 .Green1-05-2-header, #Clock3 .clock3-header-box, #Clock3 .xl-container {
        zoom: 47%;
    }

        #Clock3 .xl-container .fs-48 {
            line-height: 82.75px !important;
        }
}

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

    #Clock5 .azan_timmings_wrapper, #Clock5 .navbar {
        zoom: 84%;
    }

    #Clock5 .footer-bottom {
        zoom: 55%;
    }

    #Clock5 .dymanic_timmer_box {
        zoom: 85%;
    }
}

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

    #Clock4 .clock-3-inner .w-20 {
        zoom: 65% !important;
    }

    #Clock4 .clock-4-top-box, #Clock4 .Green1-times {
        zoom: 65% !important;
    }

    .clock-5-image-1 {
        left: 26% !important;
    }

    .clock-5-image-2 {
        left: 32% !important;
    }

    #Clock3 .Green1-05-2-header, #Clock3 .clock3-header-box, #Clock3 .xl-container {
        zoom: 40%;
    }
}

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

    #Clock6 #Green1-05-2 .col-4.position-relative {
        zoom: 72% !important;
    }

    .clock-5-image-1 {
        top: 16% !important;
    }

    .clock-5-image-2 {
        top: 12% !important;
    }

    #Clock5 .azan_timmings_wrapper {
        zoom: 82%;
    }

    #Clock5 .footer-bottom {
        zoom: 31%;
    }
}

@media screen and (max-width: 620px) {
    #Clock3 .Green1-05-2-header, #Clock3 .clock3-header-box, #Clock3 .xl-container {
        zoom: 32%;
    }
}

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

    #Clock8 .row.no-gutters .current-date-time {
        width: 44.316vw !important;
    }

        #Clock8 .row.no-gutters .current-date-time .lunar_calendar.pt-3.gap-2 {
            padding-top: 0rem !important;
        }

    #Clock4 .clock-3-inner .w-20 {
        zoom: 58% !important;
    }

    #Clock4 .clock-4-top-box, #Clock4 .Green1-times {
        zoom: 52% !important;
    }

    #Clock3 .Green1-05-2-header, #Clock3 .clock3-header-box, #Clock3 .xl-container {
        zoom: 27%;
    }
}


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

    #Clock6 #Green1-05-2 .col-4.position-relative {
        zoom: 63% !important;
    }

    #Clock7 #Green1-05-2 .col-4.position-relative {
        zoom: 58% !important;
    }

    #Clock4 .clock-3-inner .w-20 {
        zoom: 52% !important;
    }

    .clock-5-image-1, .clock-5-image-2 {
        display: none !important;
    }

    #Clock5 .azan_timmings_wrapper {
        zoom: 72%;
    }
}

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

    #Clock7 #Green1-05-2 .col-4.position-relative {
        zoom: 50% !important;
    }
}

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

    #Clock5 .dymanic_timmer_box {
        zoom: 70%;
    }

    #Clock5 .footer-bottom {
        zoom: 21%;
    }

    #Clock5 .timing_banner_wrapper {
        zoom: 70%;
    }

    #Clock5 .azan_timmings_wrapper {
        zoom: 58%;
    }

    #Clock3 .Green1-05-2-header, #Clock3 .clock3-header-box, #Clock3 .xl-container {
        zoom: 20%;
    }
}

@media(max-width: 380px) {

    #Green1-05-1 .container-fluid {
        zoom: 18% !important;
    }

    #Clock6 #Green1-05-2 .col-4.position-relative {
        zoom: 50% !important;
    }

    #Clock7 #Green1-05-2 .col-4.position-relative {
        zoom: 42% !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;
    }*/

    #Clock5 .timing_banner_wrapper {
        zoom: 60%;
    }

    #Clock5 .azan_timmings_wrapper {
        zoom: 51%;
    }

    #Clock3 .Green1-05-2-header, #Clock3 .clock3-header-box, #Clock3 .xl-container {
        zoom: 16%;
    }
}


.qr-code #generateqrcode img {
    max-width: 100%;
    height: auto;
    padding: 5px;
    background-color: #fff;
}
.mobile-icon {
    width: 20px;
    height: 20px;
    margin-right: 5px;
}
.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;
}

#Clock4 .Green1-times {
    box-shadow: 0px 10px 24.6px 0px #00000030;
}
/*-----------------*/
/*Mobile Screens*/
@media screen and (max-width: 768px) {
    /*    .mobile-clock  */
    .clock-7 .mobile-clock .timing_banner_item img, .clock-6 .mobile-clock .timing_banner_item img {
        width: 20px;
        height: auto;
    }

    .clock-7 .mobile-clock .timing_banner_item .text, .clock-6 .mobile-clock .timing_banner_item .text {
        font-size: 11px !important;
    }

    .mobile-clock .clock-7-sidebar .current_date h3 {
        font-size: 25px;
    }

    .mobile-clock .clock-7-sidebar .current_date .text {
        font-size: 14px;
    }

    .mobile-clock .lunar_calendar_eng {
        font-size: 12px;
        padding: 2px 5px;
    }

    .mobile-clock .lunar_calendar_arabic, .mobile-clock .lunar_calendar_arabic span {
        font-size: 14px;
    }

    .clock-7 .mobile-clock .current_time .time {
        font-size: 21px;
    }

    .clock-7 .mobile-clock .current_time .text {
        font-size: 12px;
    }

    .clock-7 .mobile-clock .counter-box .text {
        font-size: 9px;
    }

    .clock-7 .mobile-clock .counter-box h3 {
        font-size: 18px;
        margin-bottom: 0;
    }

    .clock-7 .mobile-clock .fs-42 {
        line-height: 52px;
    }

    .clock-7 .mobile-clock .Jummah-box {
        width: 250px;
    }

        .clock-7 .mobile-clock .Jummah-box .title_eng {
            font-size: 24px;
        }

        .clock-7 .mobile-clock .Jummah-box .title_arabic {
            font-size: 24px;
        }

        .clock-7 .mobile-clock .Jummah-box .text {
            font-size: 18px;
        }

        .clock-7 .mobile-clock .Jummah-box .time {
            font-size: 18px;
        }

    .clock-7 .mobile-clock .azan_timmings_icon_box .text {
        font-size: 18px;
    }

    .clock-7 .mobile-clock .azan_timmings_list_item_name {
        font-size: 26px;
        line-height: 28px;
        height: auto;
    }

    .clock-7 .mobile-clock .azan_timmings_list_item_time {
        font-size: 16px;
        line-height: 28.5px;
        height: auto;
    }

    .clock-6 .mobile-clock .current_time .text, .clock-6 .mobile-clock .current_date .text, .clock-6 .mobile-clock .counter-box .text, .mobile-clock .clock-6_timer_wrapper .current_date .date span {
        font-size: 11px;
    }

    .mobile-clock .clock-6_timer_wrapper .current_date .date, .clock-6 .mobile-clock .current_time .time, .clock-6 .mobile-clock .counter {
        font-size: 18px;
    }

    .clock-6 .mobile-clock .azan_timmings_icon_box img {
        width: 69px;
        height: 60px;
    }
    .clock-6 .mobile-clock .azan_timmings_icon_box {
        gap: 10px;
    }
    .clock-6 .mobile-clock .azan_timmings_icon_box .text {
        font-size: 11px;
    }
    .clock-6 .mobile-clock .azan_timmings_list_item_name img {
        width: 33px;
    }
    .clock-6 .mobile-clock .azan_timmings_list_item_name .text {
        font-size: 11px;
    }
    .clock-6 .mobile-clock .azan_timmings_list_item_name {
        gap: 8px;
        height: 30px;
    }
}

@media screen and (max-width: 640px) {
    .mobile-clock .fs-28 {
        font-size: 16px;
    }

    .mobile-clock .fs-25, .mobile-clock .small-heading {
        font-size: 14px !important;
    }

    .mobile-clock .fs-36, .mobile-clock .fs-32 {
        font-size: 15px;
        line-height: 26px;
    }

    #Green1-05-2.mobile-clock .fs-23, .mobile-clock .fs-15 {
        font-size: 12px;
    }

    .mobile-clock .fs-64 {
        font-size: 32px;
    }
    .mobile-clock .azan-timeings .fs-25{
        line-height: 22px;
    }
    .mobile-clock .azan-timeings .fs-28 {
        line-height: 22px;
    }
    .mobile-clock .jummah-times-box .fs-23, .mobile-clock .jummah-times-box .fs-15 {
        line-height: 14px;
    }
    .mobile-clock .jummah-times-box{
        margin-top: -80px;
    }
    .mobile-clock .timer-box-2 {
        margin-bottom: 86px;
    }
}

@media screen and (max-width: 380px) {

    .mobile-clock .fs-28 {
        font-size: 14px;
        padding: 0.25rem !important;
    }

    .mobile-clock .fs-25 {
        font-size: 12px !important;
        padding: 0.25rem !important;
        line-height: 22px;
    }

    .mobile-clock .fs-36, .mobile-clock .fs-32 {
        font-size: 12px;
    }

    #Green1-05-2.mobile-clock .fs-23, .mobile-clock .fs-15 {
        font-size: 12px;
    }
}