:root {
    /* --background-color: #151515; */
    --link-color: #828fff;
}

html[data-theme='light'] {
    --background-color: #fff;
    --background-color-10:rgba(0,0,0,.10);
    --text-color-11: #f2f2f2;
    --text-color-10: #E8E8E8;
    --text-color-9: #D8D8D8;
    --text-color-8: #C8C8C8;
    --text-color-7: #979797;
    --text-color-6: #A8A8A8;
    --text-color-5: #999999;
    --text-color-4: #777777;
    --text-color-3: #555555;
    --text-color-2: #333333;
    --text-color-1: #111111;
    --bgcolor-holder:#E8E8E8;
    
}

html[data-theme='dark'] {
    --background-color: #151515;
    --background-color-dd:rgba(0,0,0,.8);
    --background-color-10:rgba(255,255,255,.10);
    --text-color-1: #f2f2f2;
    --text-color-2: #E8E8E8;
    --text-color-3: #D8D8D8;
    --text-color-4: #C8C8C8;
    --text-color-5: #B8B8B8;
    --text-color-6: #A8A8A8;
    --text-color-7: #999999;
    --text-color-8: #777777;
    --text-color-9: #555555;
    --text-color-10: #333333;
    --text-color-11: #111111;
    --bgcolor-holder:#1e1e1e;
}


html, body { height: 100%; margin: 0; } 
body { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight:normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;background-color: var(--background-color);color: var(--text-color-1); } 
a,a:active,a:focus,a:hover { text-decoration: none } 
a:focus { outline: 0!important } 
textarea:focus, input:focus { outline: none; } 
*:focus { outline: none; } 
p { margin:0; padding:0 } 
ol,ul { list-style:none } 
* { margin:0; padding:0;box-sizing: border-box;} 
a { text-decoration:none; outline:none; color: #3884FF; } 
a:hover { text-indent:0; cursor:pointer } 
img { border:0; max-width: 100%; display: block; } 
.clearfix:after { content:" "; visibility:hidden; display:block; height:0; clear:both } 
*:where(:not(iframe, canvas, img, svg, video, input):not(svg *)) { all: unset; display: revert; } 
*,*::before,*::after { box-sizing: border-box; } 
table { border-collapse: collapse; } 
textarea { white-space: revert; } 
svg { display: block; } 
b, strong{font-weight: 700;}
.d-none{display: none;}
[data-theme=dark] .d-block-light, [data-theme=light] .d-block-dark {display: block!important;}

.home::-webkit-scrollbar{display: none;}
/* ::-webkit-scrollbar{width:10px;display: none;}
::-webkit-scrollbar-track{background-color:transparent;-webkit-border-radius:10px;border-radius:10px}
::-webkit-scrollbar-thumb{-webkit-border-radius:10px;border-radius:10px;background:#6d6d6d} */
.row{display: flex;padding: 0 30px;width: 100%;}
.d-flex{display: flex;}
.ml-auto{margin-left: auto;}
.align-center{align-items: center;}
.justify-center{justify-content: center;}

.full-screen-header{width: 100%;height: calc(100vh - 70px);display: flex;justify-content: center;align-items: center;position: relative;flex-direction: column;padding: 0 15px;}
.no-margin{margin: 0;}

.header-bottom-bar{position: absolute;bottom: 30px;display: flex;}
.full-screen-icon{justify-content: center;}
.toggle-fullscreen-btn{border:0;padding:0;background:0 0;cursor:pointer;outline:0}
.toggle-fullscreen-svg{display:block;height:auto}
.toggle-fullscreen-svg path{transform-box:view-box;transform-origin:12px 12px;fill:none;stroke:var(--text-color-1);stroke-width:2;transition:.15s}
.toggle-fullscreen-btn:not(.on) .icon-fullscreen-leave{display:none}
.toggle-fullscreen-btn.on .icon-fullscreen-enter{display:none}
.btn-icon{width: 44px;height: 44px;cursor: pointer;border-radius: 5px;}
.btn-icon:hover{background-color:var(--background-color-10);}
.settings-icon{position: relative;}
.js-toggle-fullscreen-btn svg, .btn-icon svg{max-width: 20px;max-height: 20px;opacity: .75;}
.js-toggle-fullscreen-btn:hover svg,.btn-icon:hover svg{opacity: 1;}

#dayAndYear{font-size: 32px;margin: 0 0 40px 0;color: var(--text-color-4);font-weight: 500;}
/*==== flip clock site ====*/
.flip-clock-wrapper *{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;-o-box-sizing:border-box;box-sizing:border-box;-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;-ms-backface-visibility:hidden;-o-backface-visibility:hidden;backface-visibility:hidden}
.flip-clock-wrapper a{cursor:pointer;text-decoration:none;color:#ccc}
/* .flip-clock-wrapper a:hover{color:#fff} */
.flip-clock-wrapper ul{list-style:none}
.flip-clock-wrapper.clearfix:after,.flip-clock-wrapper.clearfix:before{content:" ";display:table}
.flip-clock-wrapper.clearfix:after{clear:both}
.flip-clock-wrapper{font:normal 11px "Helvetica Neue",Helvetica,sans-serif;-webkit-user-select:none}
.flip-clock-meridium{background:0 0!important;box-shadow:0 0 0!important;font-size:36px!important}
.flip-clock-meridium a{color:#313333}
.flip-clock-wrapper{text-align:center;position:relative}
.flip-clock-wrapper:after,.flip-clock-wrapper:before{content:" ";display:table}
.flip-clock-wrapper:after{clear:both}
.flip-clock-wrapper ul{position:relative;float:left;margin:5px;width:130px;height:160px;font-size:80px;font-weight:700;line-height:87px;border-radius:6px;background:#000;margin-top: 0;margin-bottom: 0;}
.flip-clock-wrapper ul.flip-clock-meridium{margin: 0 0 0 20px;width: auto;}
.flip-clock-wrapper ul li{z-index:1;position:absolute;left:0;top:0;width:100%;height:100%;line-height:157px;text-decoration:none!important}
.flip-clock-wrapper ul li:first-child{z-index:2}
.flip-clock-wrapper ul li a{display:block;height:100%;-webkit-perspective:200px;-moz-perspective:200px;perspective:200px;margin:0!important;overflow:visible!important;cursor:default!important}
.flip-clock-wrapper ul li a div{z-index:1;position:absolute;left:0;width:100%;height:50%;font-size:80px;overflow:hidden;outline:1px solid transparent}
.flip-clock-wrapper ul li a div .shadow{position:absolute;width:100%;height:100%;z-index:2}
.flip-clock-wrapper ul li a div.up{-webkit-transform-origin:50% 100%;-moz-transform-origin:50% 100%;-ms-transform-origin:50% 100%;-o-transform-origin:50% 100%;transform-origin:50% 100%;top:0}
.flip-clock-wrapper ul li a div.up:after{content:"";position:absolute;top:78px;left:0;z-index:5;width:100%;height:3px;background-color:#000;background-color:rgba(0,0,0,.5)}
.flip-clock-wrapper ul li a div.down{-webkit-transform-origin:50% 0;-moz-transform-origin:50% 0;-ms-transform-origin:50% 0;-o-transform-origin:50% 0;transform-origin:50% 0;bottom:0;border-bottom-left-radius:6px;border-bottom-right-radius:6px}
.flip-clock-wrapper ul li a div div.inn{position:absolute;left:0;z-index:1;width:100%;height:200%;color:#ccc;text-align:center;background-color:#1c1c1c;border-radius:6px;font-size:130px}
.flip-clock-wrapper ul li a div.up div.inn{top:0}
.flip-clock-wrapper ul li a div.down div.inn{bottom:0}
.flip-clock-wrapper ul.play li.flip-clock-before{z-index:3}
/* .flip-clock-wrapper .flip{box-shadow:0 2px 5px rgba(0,0,0,.7)} */
.flip-clock-wrapper ul.play li.flip-clock-active{-webkit-animation:asd 10ms .49s linear both;-moz-animation:asd 10ms .49s linear both;animation:asd 10ms .49s linear both;z-index:5}
.flip-clock-divider{float:left;display:inline-block;position:relative;width:20px;height:160px}
.flip-clock-divider:first-child{width:0}
.flip-clock-dot{display:block;background:#323434;width:10px;height:10px;position:absolute;border-radius:50%;box-shadow:0 0 5px rgba(0,0,0,.5);left:5px}
.flip-clock-divider .flip-clock-label{position:absolute;top:-1.5em;right:-86px;color:#000;text-shadow:none}
.flip-clock-divider.minutes .flip-clock-label{right:-88px}
.flip-clock-divider.seconds .flip-clock-label{right:-91px}
.flip-clock-dot.top{top:60px}
.flip-clock-dot.bottom{bottom:60px}
html[data-theme="light"] .flip-clock-wrapper ul li a div div.inn{background-color: #e5e5e5;color: var(--text-color-2);}
html[data-theme="light"] .flip-clock-wrapper ul li a div.up:after{background-color: rgb(255 255 255 / 50%);}
@-webkit-keyframes asd{
0%{z-index:2}
100%{z-index:4}
}
@-moz-keyframes asd{
0%{z-index:2}
100%{z-index:4}
}
@-o-keyframes asd{
0%{z-index:2}
100%{z-index:4}
}
@keyframes asd{
0%{z-index:2}
100%{z-index:4}
}
.flip-clock-wrapper ul.play li.flip-clock-active .down{z-index:2;-webkit-animation:turn .5s .5s linear both;-moz-animation:turn .5s .5s linear both;animation:turn .5s .5s linear both}
@-webkit-keyframes turn{
0%{-webkit-transform:rotateX(90deg)}
100%{-webkit-transform:rotateX(0)}
}
@-moz-keyframes turn{
0%{-moz-transform:rotateX(90deg)}
100%{-moz-transform:rotateX(0)}
}
@-o-keyframes turn{
0%{-o-transform:rotateX(90deg)}
100%{-o-transform:rotateX(0)}
}
@keyframes turn{
0%{transform:rotateX(90deg)}
100%{transform:rotateX(0)}
}
.flip-clock-wrapper ul.play li.flip-clock-before .up{z-index:2;-webkit-animation:turn2 .5s linear both;-moz-animation:turn2 .5s linear both;animation:turn2 .5s linear both}
@-webkit-keyframes turn2{
0%{-webkit-transform:rotateX(0)}
100%{-webkit-transform:rotateX(-90deg)}
}
@-moz-keyframes turn2{
0%{-moz-transform:rotateX(0)}
100%{-moz-transform:rotateX(-90deg)}
}
@-o-keyframes turn2{
0%{-o-transform:rotateX(0)}
100%{-o-transform:rotateX(-90deg)}
}
@keyframes turn2{
0%{transform:rotateX(0)}
100%{transform:rotateX(-90deg)}
}
.flip-clock-wrapper ul li.flip-clock-active{z-index:3}
.flip-clock-wrapper ul.play li.flip-clock-before .up .shadow{background:-moz-linear-gradient(top,rgba(0,0,0,.1) 0,#000 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0,rgba(0,0,0,.1)),color-stop(100%,#000));background:linear,top,rgba(0,0,0,.1) 0,#000 100%;background:-o-linear-gradient(top,rgba(0,0,0,.1) 0,#000 100%);background:-ms-linear-gradient(top,rgba(0,0,0,.1) 0,#000 100%);background:linear,to bottom,rgba(0,0,0,.1) 0,#000 100%;-webkit-animation:show .5s linear both;-moz-animation:show .5s linear both;animation:show .5s linear both}
.flip-clock-wrapper ul.play li.flip-clock-active .up .shadow{background:-moz-linear-gradient(top,rgba(0,0,0,.1) 0,#000 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0,rgba(0,0,0,.1)),color-stop(100%,#000));background:linear,top,rgba(0,0,0,.1) 0,#000 100%;background:-o-linear-gradient(top,rgba(0,0,0,.1) 0,#000 100%);background:-ms-linear-gradient(top,rgba(0,0,0,.1) 0,#000 100%);background:linear,to bottom,rgba(0,0,0,.1) 0,#000 100%;-webkit-animation:hide .5s .3s linear both;-moz-animation:hide .5s .3s linear both;animation:hide .5s .3s linear both}
.flip-clock-wrapper ul.play li.flip-clock-before .down .shadow{background:-moz-linear-gradient(top,#000 0,rgba(0,0,0,.1) 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0,#000),color-stop(100%,rgba(0,0,0,.1)));background:linear,top,#000 0,rgba(0,0,0,.1) 100%;background:-o-linear-gradient(top,#000 0,rgba(0,0,0,.1) 100%);background:-ms-linear-gradient(top,#000 0,rgba(0,0,0,.1) 100%);background:linear,to bottom,#000 0,rgba(0,0,0,.1) 100%;-webkit-animation:show .5s linear both;-moz-animation:show .5s linear both;animation:show .5s linear both}
.flip-clock-wrapper ul.play li.flip-clock-active .down .shadow{background:-moz-linear-gradient(top,#000 0,rgba(0,0,0,.1) 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0,#000),color-stop(100%,rgba(0,0,0,.1)));background:linear,top,#000 0,rgba(0,0,0,.1) 100%;background:-o-linear-gradient(top,#000 0,rgba(0,0,0,.1) 100%);background:-ms-linear-gradient(top,#000 0,rgba(0,0,0,.1) 100%);background:linear,to bottom,#000 0,rgba(0,0,0,.1) 100%;-webkit-animation:hide .5s .3s linear both;-moz-animation:hide .5s .3s linear both;animation:hide .5s .2s linear both}
@-webkit-keyframes show{
0%{opacity:0}
100%{opacity:1}
}
@-moz-keyframes show{
0%{opacity:0}
100%{opacity:1}
}
@-o-keyframes show{
0%{opacity:0}
100%{opacity:1}
}
@keyframes show{
0%{opacity:0}
100%{opacity:1}
}
@-webkit-keyframes hide{
0%{opacity:1}
100%{opacity:0}
}
@-moz-keyframes hide{
0%{opacity:1}
100%{opacity:0}
}
@-o-keyframes hide{
0%{opacity:1}
100%{opacity:0}
}
@keyframes hide{
0%{opacity:1}
100%{opacity:0}
}
#clock1{height:240px}
/*==== flip clock site ====*/
.quotes-section{margin-top: 60px;}
#quotation{font-size: 20px;color: var(--text-color-4);font-weight: 500;}
#source{font-size: 18px;color: var(--text-color-5);text-align: center;margin-top: 20px;font-weight: 400;}

.flipclock-content{padding: 100px 0;}
.content-container{max-width: 700px;margin: 0 auto;padding:0 20px ;}
h1{font-size: 48px;font-weight: 500;margin: 20px 0;line-height: 1.5;display: inline-block;width: 100%;}
h2{font-size: 32px;font-weight: 500;margin:40px 0 20px 0;line-height: 1.5;display: inline-block;width: 100%;}
h3{font-size: 24px;font-weight: 500;margin:40px 0 15px 0;line-height: 1.5;display: inline-block;width: 100%;}
p{font-size: 1.1rem;line-height: 30px;margin: 0 0 20px 0;font-weight: 400;color: var(--text-color-3);}
/* .flipclock-content strong{color: #fff;} */
.content-container ul{list-style-type: disc;padding: 10px 0 0 20px;}
.content-container ul li{font-size: 16px;line-height: 30px;margin: 0 0 10px 0;padding: 0 0 0 5px; color: var(--text-color-3);font-weight: 400;}
.content-container a{color: var(--link-color);border-bottom: 1px solid var(--link-color);}

.button-right{position: absolute;right: 15px;bottom: 15px;}
.glow-on-hover img{max-width: 20px;}
.glow-on-hover{width:50px;height:50px;border:none;outline:none;color:#fff;background-color:#EF884F;cursor:pointer;position:relative;z-index:0;border-radius:50%;font-weight:600;display:flex;align-items:center;justify-content:center}
  
.Btn{width:40px;height:40px;display:flex;align-items:center;justify-content:center;border:none;background-color:transparent;position:relative;border-radius:7px;cursor:pointer;transition:all .3s}
.svgContainer{width:100%;height:100%;display:flex;align-items:center;justify-content:center;background-color:transparent;backdrop-filter:blur(0px);letter-spacing:.8px;border-radius:10px;transition:all .3s}
.BG{position:absolute;content:"";width:100%;height:100%;background:#EF884F;z-index:-1;border-radius:10px;pointer-events:none;transition:all .3s}
.Btn:hover .BG{transform:rotate(35deg);transform-origin:bottom}
.Btn:hover .svgContainer{background-color:rgba(209,209,209,0.466);backdrop-filter:blur(4px)}
/* ====top-header-bar style start====== */
.visible {opacity: 1;}
.hidden {opacity: 0;}
.header-topbar{display: flex;flex-direction: row;height: 70px;padding: 5px 10px;transition: opacity 0.5s ease-in-out;align-items: center;}
.header-invisible{opacity: 0;}
.topbar-start-column{width: 50%;display: flex;
    }
.topbar-center-column{display: flex;flex-shrink: 0;align-items: center;width: 250px;position: relative;}
.topbar-center-column h1{margin: 0;line-height: 40px;}
.topbar-center-column h1 a{font-size: 22px;font-weight: 500;color: var(--text-color-2);display: block;font-size: 0;opacity: .8;}
.topbar-center-column h1 a:hover{opacity: 1;}
.topbar-end-column{width: 50%;display: flex;flex-direction: row;justify-content: end;align-items: center;gap: 10px;margin-right: 5px;}
.topbar-end-column .ml-auto{margin-left: 10px;}
.dropdown-tab-section{padding: 12px 12px 12px;}
.dropdown-title{text-transform: uppercase;font-size: 14px;color: var(--text-color-7);font-weight: 500;border-bottom: 1px solid var(--text-color-10);padding: 5px 0 10px;}
.dropdown-tab-section ul{margin: 0;padding: 0;list-style: none;}
.dropdown-tab-section ul li{border-bottom: 1px solid var(--text-color-10);padding: 12px 0;}
.tabs-row{display: inline-block;width: 100%;}

.tabs-row input[type="checkbox"]{display: none;}
.tabs-row input[type="checkbox"] {margin: 4px 0 0;margin-top: 1px \9;line-height: normal;}
.tabs-row label {height: inherit;display: block;font-size: 15px;color: var(--text-color-2);font-weight: 400;margin: 0;cursor: pointer;}
.tabs-row input:checked+label i {background: #419BF9;}
.tabs-row i{float: right;width: 36px;height: 19px;margin-right: 5px;font-style: normal;position: relative;display: inline-block;border-radius: 25px;background: rgba(79,79,79,1);}
.tabs-row input:checked+label i::before {left: 19px;}
.tabs-row i:before{content: '';position: absolute;}
.tabs-row i::after{content: '';position: absolute;}
.tabs-row i:before {top: 2px;left: 2px;z-index: 1;width: 15px;height: 15px;background: #fff;border-radius: 25px;transition: all .2s ease-in-out 0s;}
/* .topbar-end-column .dropbtn {background-color: #3498DB;color: white;padding: 16px;font-size: 16px;border: none;cursor: pointer;} */
/* .topbar-end-column .dropbtn:hover, .dropbtn:focus {background-color: #2980B9;} */
.topbar-end-column .dropdown {position: relative;display: inline-block;}
.topbar-end-column .dropdown-content {display: none;position: absolute;background-color: var(--background-color-dd);min-width: 230px;overflow: auto;box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);z-index: 1;right: 0;}
.topbar-end-column .dropdown-content a {color: black;padding: 12px 16px;text-decoration: none;display: block;}
.topbar-end-column .dropdown a:hover {background-color: #ddd;}
.topbar-end-column .show {display: block;}

/* ====top-header-bar style end====== */


/* ==== menu icon style start==== */
.overflow-hidden{overflow: hidden;}
.menu-icon {cursor: pointer;z-index: 1;font-size: 24px;}
#slide-out-menu {position: fixed;top: 0;left: -260px;width: 260px;height: 100%;background-color: var(--text-color-11);;color: #fff;z-index: 11;padding: 2px;transition: left 0.3s ease-in-out;box-sizing: border-box;/* Added transition property */;overflow: auto;}
#slide-out-menu.menu-visible {left: 0;}
#overlay {position: fixed;top: 0;left: 0;width: 100%;height: 100%;background-color: rgba(0, 0, 0, 0.6);z-index: 10;cursor: pointer;}
.hidden {display: none;}
.menu-content-box{padding: 14px 10px 14px 10px;border-bottom: 1px solid var(--text-color-10);}
.menu-content-box .menu-title{font-size: 16px; color: var(--text-color-7);font-weight:500;padding: 5px 12px 10px 12px;}

.menu-icon-main ul {list-style: none;padding: 0;}
.menu-content-box li a, .menu-content-box li.coming-soon-nav{padding: 10px 12px;text-decoration: none;font-size: 14px;color: var(--text-color-1);display: block;transition-duration: .3s;display: flex;}
.menu-content-box li.coming-soon-nav{color: var(--text-color-6);}
.menu-content-box li.coming-soon-nav span{margin-left: auto;font-size: 11px;color: var(--text-color-8);}
.menu-content-box li.active a, .menu-content-box li a:hover{background-color: var(--background-color-10);border-radius: 4px;}

/* ==== menu icon style end==== */

/* ==== footer styles start ==== */
.footer-section-main{padding-top: 50px;padding-bottom: 70px;text-align: center;border-top: 1px solid var(--text-color-10);}
.footer-row-first, .footer-row-second, .footer-bottom-row{margin-bottom: 30px;}
.footer-row-first li, .footer-row-second li{display: inline-block;margin: 0 8px;}
.footer-row-first li a, .footer-row-second li a{font-size: 15px;color: var(--text-color-3);font-weight: 400;transition: color 300ms ease 0ms;}
.footer-row-first li a:hover, .footer-row-second li a:hover{text-decoration-line: underline;}
.footer-bottom-row p a{font-size: 15px;color: var(--text-color-3);font-weight: 400;}
.footer-bottom-row p{font-size: 15px;color: var(--text-color-3);font-weight: 400;}
/* ==== footer styles end ==== */

/* ------- full screen clock page styles ------- */
.fullscreenclock .header-topbar{height: 50px;}
.full-screen-clock-header {width: 100%;height: calc(100vh - 100px);display: flex;position: relative;}
.full-screen-clock{display: flex;padding: 0 40px;width: 100%;height:100%;gap: 50px;font-family: 'Bebas Neue', sans-serif;}
.fullscreenclock-box{position: relative;width: 100%;background-color: var(--bgcolor-holder);border-radius: 50px;color: var(--text-color-4);text-align: center;font-weight: 500;-webkit-font-smoothing: antialiased;display: flex;align-items: center;justify-content: center;}
html[data-theme='light'] .fullscreenclock-box{color: var(--text-color-2);}

#hourDiv,#minuteDiv{font-size: clamp(30vw, 38vw, 44vw);}
#amPmDiv{position: absolute;bottom:6%;color: var(--text-color-4);font-size: clamp(2vw, 5vw, 8vw);left: 10%;}
.topbar-center-column h1 a::before {content: 'Flip Clock Online';position: absolute;left: 0;color: #fff;right: 0;margin: 0 auto;font-size: 50px;font-size: 22px;font-weight: 500;color: var(--text-color-2);text-align: center;}



@media screen and (max-width: 991px) {
    .full-screen-clock-header {height: auto;padding-top: 50px;}
    .full-screen-clock {padding: 0 20px;gap: 20px;}
    .fullscreenclock-box {border-radius: 20px;}
    .full-screen-clock{flex-direction: column;}
    .menu-content-box li a, .menu-content-box li.coming-soon-nav {padding: 15px 10px;}
    }

@media screen and (max-width:767px) {
.mobile-hidden{display: none;}    
#clock1 {height: auto;}
.flip-clock-wrapper ul {
    position: relative;
    float: left;
    margin: 5px;
    width: 50px;
    height: 80px;
    font-size: 80px;}
    .flip-clock-divider{height: 80px;}
    .flip-clock-dot.top {
        top: 32px;
    }
    .flip-clock-dot.bottom {
        bottom: 15px;
    }
    .flip-clock-wrapper ul.flip-clock-meridium{margin: 0 auto;width: 100%;}
.flip-clock-wrapper ul li {line-height: 80px;}
.flip-clock-wrapper ul li a div div.inn {font-size: 60px;}
h2 {font-size: 28px;}

}

/*--------- Minimal Colorful Analog Clock --------*/
.minimal-colorful-clock{position:relative;z-index:0;height:calc(100vh - 70px);width:100vw;display:flex;align-items:center;justify-content:center}
.clock-minimal{background:transparent;height:500px;width:500px;border:7px solid var(--color);border-radius:50%;position:absolute;z-index:1}
.hour-minimal .upper{background:var(--color);height:120px;width:10px;border-top-left-radius:100px;border-top-right-radius:100px;position:relative;bottom:-3px}
.hour-minimal .middle{background:transparent;height:30px;width:30px;border:4px solid var(--color);border-radius:100px}
.hour-minimal .down{background:transparent;height:120px}
.hour-minimal{display:flex;flex-direction:column;align-items:center;position:absolute;z-index:2}
.minute-minimal .upper{background:var(--color);height:140px;width:7px;border-top-left-radius:100px;border-top-right-radius:100px;position:relative;bottom:-3px}
.minute-minimal .middle{background:transparent;height:30px;width:30px;border:4px solid var(--color);border-radius:100px}
.minute-minimal .down{display:flex;flex-direction:column;align-items:center;background:transparent;height:140px}
.minute-minimal{display:flex;flex-direction:column;align-items:center;position:absolute;z-index:3}
.second-minimal .upper{background:var(--color);height:160px;width:2px;border-top-left-radius:100px;border-top-right-radius:100px;position:relative;bottom:-3px}
.second-minimal .middle{background:transparent;height:30px;width:30px;border:4px solid var(--color);border-radius:100px}
.second-minimal .down{background:transparent;height:160px}
.second-minimal{display:flex;flex-direction:column;align-items:center;position:absolute;z-index:4}
.hour-minimal .upper,.minute-minimal .upper,.second-minimal .upper{animation:colorChange 20s ease-in-out infinite}
.clock-minimal,.hour-minimal .middle,.minute-minimal .middle,.second-minimal .middle{animation:borderColorChange 20s ease-in-out infinite}
@keyframes colorChange {
0%{background:#5ac8fa}
10%{background:#3345eb}
20%{background:#975afa}
30%{background:#da5afa}
40%{background:#d94cba}
50%{background:#ff2d55}
60%{background:#ff3b30}
70%{background:#ff9500}
80%{background:#fc0}
90%{background:#4cd964}
100%{background:#5ac8fa}
}
@keyframes borderColorChange {
0%{border:4px solid #5ac8fa}
10%{border:4px solid #3345eb}
20%{border:4px solid #975afa}
30%{border:4px solid #da5afa}
40%{border:4px solid #d94cba}
50%{border:4px solid #ff2d55}
60%{border:4px solid #ff3b30}
70%{border:4px solid #ff9500}
80%{border:4px solid #fc0}
90%{border:4px solid #4cd964}
100%{border:4px solid #5ac8fa}
}

/*--------- About Page Styles start--------*/
.contact-section{padding: 50px 0 30px 0px;;text-align: center;}
.contact-section a{border: none;border-radius: 0;font-size: 18px;font-weight: 500;line-height: 30px;background-color: var(--link-color);padding: 14px 36px;color: var(--text-color-1);}




/*--------- About page Styles End--------*/

.aura-clock-container {
    position: relative;
    z-index: 0;
    height: calc(100vh - 70px);
    width: 100vw;
    display: flex;
    align-items: center;
    justify-content: center;
}


.gradient-header {
	background: linear-gradient(-45deg,#492212,#6063f6,#ae1de8,#106189);
	background-size: 400% 400%;
	animation: gradient 45s ease infinite;
	height: 100vh;
}

@keyframes gradient {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}




.local-time-detail, .world-clock-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    /* padding: 20px; */
    max-width: 1100px;
    margin: 100px auto 0;
}
.local-time-detail{text-align: center;}
.local-time-detail .city-name{font-size: 3rem;font-weight: 500;margin: 0 0 10px 0;line-height: 1;}
.local-time-detail h2{font-size: 6rem;font-weight: 500;margin: 0 0 10px 0;line-height: 1;}
.local-time-detail p{font-size: 1.5rem;font-weight: 500;margin: 0 0 10px 0;line-height: 1;}
.world-clock-box {
    background-color:var(--background-color-10);
    border-radius: 10px;
    padding: 25px 15px;
    text-align: center;
    flex: 0 0 calc(33% - 20px);cursor: pointer;
}

.world-clock-box h3 {
    margin: 0 0 10px 0;
    font-size: 1.2em;
}

.world-clock-box .time {
    font-size: 1.5em;
    font-weight: bold;margin:0 0 15px 0;
}





.stop-watch-container{max-width:1100px;margin:100px auto 0}
.stopwatch{font-size:6rem;margin-bottom:40px;text-align:center}
.controls{margin-bottom:20px}
.btn{padding:10px 20px;font-size:16px;margin:0 5px;border-radius:4px;cursor:pointer;width:100%;font-size:18px;background-color:#828fff;color:#fff;height:50px;text-align:center;}
.laps{text-align:left;max-width:300px;margin:0 auto}
#startBtn{background-color:#828fff;}
#pauseBtn{background-color:#f4bf51;}
#lapBtn{background-color:#828df5;}
#resumeBtn{background-color:#27cfba;}
#stopBtn{background-color:#f66b80;}
.second-row-btns button,.third-row-btns button{flex:0 0 50%;text-align:center}
.first-row-btns,.second-row-btns,.third-row-btns{width:100%;max-width:600px;display:flex;justify-content:space-between;margin:0 auto}
.btn.hidden{display:none}


/*==== digital clock online =======*/
.digital-clock-online {position: relative;z-index: 0;height: calc(100vh - 70px);width: 100vw;display: flex;flex-direction: column;align-items: center;justify-content: center;}
.digital-clock-wrapper{font-size:8rem;font-weight: 500;}

@media screen and (min-width: 1200px) {
.digital-clock-wrapper{font-size:12rem;}
}
@media screen and (max-width: 767px) {
.digital-clock-wrapper{font-size:4rem;}
}
/*==== digital clock online =======*/