/* Colors */
:root {
  --color-white: #fefefe;
  --color-blue-500: #004010;
  --color-blue-700: #017f20;
  --color-grey-50: #fffade;
  --color-grey-200: #fff5bf;
  --color-grey-400: #ffed8c;
  --color-grey-500: #ffea7a;
  --color-black: #0d0b0e;
}

.text-custom-2{color:var(--global-color-two) !important}
.bg-custom-2{background-color:var(--global-color-two) !important}

/* Typography */


/* General */
.bg-custom-gradient{background:radial-gradient( circle at 0%, #004010 0%, transparent 65% ),  radial-gradient(circle at 100%, #004010 0%, transparent 65%), #198754;}

.btn-more, .btn-white-more {position:relative;z-index:0;padding-left:20px !important}
.btn-more:after, .btn-white-more:after{content:"";width:6px;height:6px;border:2px solid var(--global-color-one);border-top:0;border-right:0;transform:rotate(45deg);display:block;position:absolute;left:10px;top:calc(50% - 3px);z-index:1;transition:0.1s linear}
.btn-more:hover:after, .btn-white-more:hover:after{left:0}
.btn-white-more:after{border-color:#fff}

.search_form{max-width:500px;margin:0 auto;display:flex;align-items:center;justify-content:center;position:relative}
.search_form input[type="search"]{width:500px;height:45px;border-radius:8px;border:0px;padding-left:30px;padding-right:10px}
.search_form #searchsubmit{width:24px;height:24px;background:url(https://8am.coffee/wp-content/uploads/2025/03/zoom.svg) no-repeat center;display:block;position:absolute;left:5px;top:calc(50% - 12px)}


/* Header */
.header_absolute .navbar.navbar-expand-lg .navbar-nav.navbar_desktop > * >a, 
.header_fixed .navbar.navbar-expand-lg .navbar-nav.navbar_desktop > * >a{filter:unset !important}

body.home_class header:not(.header_scrolled) .navbar.navbar-expand-lg .navbar-nav.navbar_desktop>*>a {color:#fff}
body.home_class header:not(.header_scrolled) .navbar_icons img:not(.btn-call),body.home_class header:not(.header_scrolled) .mini-cart-toggler img{filter: invert(1) brightness(100)}
body.home_class header:not(.header_scrolled) .navbar_icons a{color:#fff}
body.subpages_class header{border-bottom:1px solid #999;}
#masthead.header_scrolled .navbar-toggler .navbar-toggler-icon{border-color:var(--global-color-one) !important}

.header_scrolled{box-shadow:0 5px 5px rgba(0, 0, 0, 0.1)}

.header_fixed:not(.header_scrolled) .navbar-brand.logo{filter:invert(1) brightness(100)}
.header_scrolled .navbar-brand.logo img{margin:0 auto}
@media(max-width: 991px){
	.navbar-brand.logo img{height:50px;}
	#navbarTogglerMainMenu .navbar_desktop li a{padding:1px !important;}
}
 

/* Navbar */
#masthead .navbar-toggler .navbar-toggler-icon{border-color:#fff !important}

@media(min-width: 991px){
  #navbarTogglerMainMenu > * {flex:1 1 33.33%;max-width:calc(50% - 100px)}
  #navbarTogglerMainMenu > .logo_wrap {flex:1 1 200px;max-width:200px}
  #navbarTogglerMainMenu .navbar-brand.logo{margin:0}

  .navbar.navbar-expand-lg .navbar-nav > .nav-item{margin:0 5px !important}
  }

@media(max-width: 991px){
    .menu-item .user_login{flex-flow:column nowrap !important;}
    .menu-item:has(>.user_login){padding:0 !important}
    .menu-item:has(.user_logged_in) > a{justify-content: center;}
}
   
.btn-call{max-width: 25px !important;}

/* Homepage Sections */
@media(min-width:1200px) {
  .main_banner{height: 100vh;min-height: 600px;}  
}

#about_us{position:relative;z-index:0}
#about_us:before{content:"";background:url(https://8am.coffee/wp-content/themes/zoha-child/vecteezy.svg); width:100%;height:100%;position:absolute;right:0;top:0;z-index:-1;opacity:0.07;}

body .products_list .card .card-img-bundle {border-radius:20px 20px 0 0}
body .products_list .card .card-body {border-radius:0 0 20px 20px}
body .products_list .card:before{content:"";width:100%;height:95%;border-radius:20px;position:absolute;right:0;bottom:0;z-index:-1;background:linear-gradient(90deg,rgba(0, 64, 16, 1) 0%, rgba(25, 135, 84, 1) 80%);transform-origin:right bottom;transition:transform 0.1s ease, box-shadow 0.3s ease}
body .products_list .card:hover:before{transform:translateY(15px);box-shadow: 0 10px 0 #cccccc;}


body .products_list .card .add_to_cart_button{background:transparent !important;color:#004010;font-size:0px;width:40px !important;height:40px;text-align:center;padding:0;}
body .products_list .card .add_to_cart_button:before {content:"\F23F";font:300 30px 'Bootstrap-icons';}
body .products_list .card .add_to_cart_button.added:before {content:"\F239";font:300 30px 'Bootstrap-icons';}
body .products_list .card .add_to_cart_button.loading:before{display:none}
body .products_list .card .add_to_cart_button.loading:after{top:50%;left:calc(50% - 10px);font-size:20px;}

/* Slideshow */
#home_slideshow .card-img-boundle .image_as_background {height:100vh;min-height:700px}


/* Analog Clock Styles */
.analog-clock {
  width: 400px;
  height: 400px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff 0%, #fffade 50%, #fffade 100%);
  border: 1px solid #888;
  position: relative;
  margin: 0 auto;
  box-shadow: 0 0 50px rgba(0, 0, 0, 0.3);
  overflow: hidden;
  z-index: 0;
}
.analog-clock:before {content:"";width:100%;height:100%;background:radial-gradient(circle at 0%, var(--color-blue-700) 0%, transparent 65%), radial-gradient(circle at 100%, var(--color-blue-700) 0%, transparent 65%),    var(--color-blue-500);border-radius:100%;position:absolute;right:0;top:0;z-index:-2}
.analog-clock:after {content:"";width:calc(100% - 20px);height:calc(100% - 20px);background:radial-gradient( circle at 0%, var(--color-grey-400) 0%, transparent 65% ),  radial-gradient(circle at 100%, var(--color-grey-400) 0%, transparent 65%), var(--color-grey-50);border-radius:100%;position:absolute;right:10px;top:10px;z-index:-2}

.clock-face {
  width: 100%;
  height: 100%;
  position: relative;
  transition: transform 0.2s ease-out; /* Add transition for smooth parallax */
}
/*
.clock-face:before {content:"8 AM";width:62%;height:62%;background:#004010;border:1px solid #004010;border-radius:100%;position:absolute;right:19%;top:19%;z-index:-1;font:800 50px custom_font_1;color:#fff;display:flex;align-items:center;justify-content:center;padding-bottom:100px;direction:ltr}
*/

.hand {
  position: absolute;
  width: 50%;
  height: 6px;
  background: #333;
  top: 50%;
  transform-origin: 100%;
  transform: rotate(90deg);
  transition: transform 0.5s cubic-bezier(0.4, 2.3, 0.6, 1);
  border-radius: 3px;
}

.hour-hand {
  height: 8px;
  width: 20%;
  left: 30%;  
  top:calc(50% - 4px);
  background: #222;
  z-index: 3;
}

.min-hand {
  height: 5px;
  width: 25%;
  left: 25%;
  top:calc(50% - 2px);
  background: #444;
  z-index: 2;
}

.second-hand {
  height: 2px;
  width: 30%;
  left: 50%;
  top:calc(50% - 1px);
  background: red;
  z-index: 1;
  transition: transform 0.05s linear; /* Smoother second hand movement */
  transform-origin:left center;
}
/*
.second-hand:after {content:"";width:80px;height:50px;background:url('second-hand.svg') no-repeat top;position:absolute;right:0;top:0;transform:translate(39px, -50%) rotate(90deg);z-index:-1;}
*/
.center-dot {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 20px;
  background: #333;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  z-index: 4;
}

/* Clock Numbers */
.numbers {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

.number {
  position: absolute;
  width: 100%;
  height: 100%;
  text-align: center;
  font-size:clamp(1rem, 2vw + 1rem,  2rem);
  font-weight: bold;
  color: #004010;
  top:48%;
}

.number-1 { transform: rotate(30deg) translateY(-40%) rotate(-30deg); }
.number-2 { transform: rotate(60deg) translateY(-40%) rotate(-60deg); }
.number-3 { transform: rotate(90deg) translateY(-40%) rotate(-90deg); }
.number-4 { transform: rotate(120deg) translateY(-40%) rotate(-120deg); }
.number-5 { transform: rotate(150deg) translateY(-40%) rotate(-150deg); }
.number-6 { transform: rotate(180deg) translateY(-40%) rotate(-180deg); }
.number-7 { transform: rotate(210deg) translateY(-40%) rotate(-210deg); }
.number-8 { transform: rotate(240deg) translateY(-40%) rotate(-240deg); }
.number-9 { transform: rotate(270deg) translateY(-40%) rotate(-270deg); }
.number-10 { transform: rotate(300deg) translateY(-40%) rotate(-300deg); }
.number-11 { transform: rotate(330deg) translateY(-40%) rotate(-330deg); }
.number-12 { transform: rotate(360deg) translateY(-40%) rotate(-360deg); }

/* Minute Markers */
.minute-markers {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 0; /* Behind hands and numbers */
}

.minute-marker {
  position: absolute;
  width: 2px; /* Small dot width */
  height: 10px; /* Small dot height */
  background-color: #666; /* Dot color */
  border-radius: 0;
  top: calc(50% - 5px); /* Start from center for rotation */
  left: calc(50% - 1px);
  margin-left: -1px; /* Offset by half width */
  margin-top: -1px; /* Offset by half height */
  /* Rotation will be applied individually via JS */
  transition: transform 0.5s ease-out, background-color 0.5s ease-out, width 0.5s ease-out, height 0.5s ease-out; /* Add transition for smooth effect */
}

.marker-displaced {
   background-color: #aaa; /* Slightly lighter color when displaced */
}

/* REMOVE ALL INDIVIDUAL MARKER RULES BELOW */
/*
.marker-1 { transform: rotate(6deg) translateY(-95px); }
.marker-2 { transform: rotate(12deg) translateY(-95px); }
.marker-3 { transform: rotate(18deg) translateY(-95px); }
.marker-4 { transform: rotate(24deg) translateY(-95px); }
.marker-5 { transform: rotate(30deg) translateY(-95px); width: 4px; height: 4px; margin-left: -2px; margin-top: -2px; background-color: #333; }
.marker-6 { transform: rotate(36deg) translateY(-95px); }
...
.marker-56 { transform: rotate(336deg) translateY(-95px); }
.marker-57 { transform: rotate(342deg) translateY(-95px); }
.marker-58 { transform: rotate(348deg) translateY(-95px); }
.marker-59 { transform: rotate(354deg) translateY(-95px); }
.marker-60 { transform: rotate(360deg) translateY(-95px); width: 4px; height: 4px; margin-left: -2px; margin-top: -2px; background-color: #333; }
*/

#akademy_section:before{backdrop-filter: blur(5px);}

/* Blog */
@media(min-width:1200px){
  .blog_posts .widget-body > .row .col:nth-child(5n+1){width:calc(50% - 0px)}
}


/* Products */
.woocommerce div.product .woocommerce-tabs ul.tabs{margin-bottom:0;text-align:center;overflow: visible;}
.woocommerce div.product .woocommerce-tabs ul.tabs li{border:0;background-color:transparent;padding-right:20px;padding-left:20px}
.woocommerce div.product .woocommerce-tabs ul.tabs li::before, .woocommerce div.product .woocommerce-tabs ul.tabs li::after{border:0;box-shadow:unset}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active::before, .woocommerce div.product .woocommerce-tabs ul.tabs li.active::after{box-shadow:unset}
.woocommerce div.product .woocommerce-tabs ul.tabs::before{display:none}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active{border-bottom:0px;position:relative;z-index:0;overflow:visible;}
.woocommerce div.product .woocommerce-tabs ul.tabs li:after{content:"";width:100%;height:6px;background:#004010;position:absolute;left:0;bottom:-4px;z-index:2;border-radius:10px;transform:scale(0,1);transition:0.3s ease}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active:after{transform:scale(1,1)}

.woocommerce div.product .woocommerce-tabs .woocommerce-Tabs-panel {border:1px solid #004010;border-radius:10px;padding:10px;}
.woocommerce div.product .woocommerce-tabs ul.tabs li > a{display:flex;align-items:center;justify-content:center;color:#777}
.woocommerce div.product .woocommerce-tabs ul.tabs li i{margin-left:5px;font-size:20px}


.wc-block-components-checkout-place-order-button__text{justify-content:center}

#sales_agents .card .card-body{transform:translateX(20%);transition:1s ease}
#sales_agents .card:hover .card-body{transform:translateX(0)}



#products_list .card img.card-img{visibility:visible}
#products_list .card img.second-img{visibility:hidden}
#products_list .card:hover card-img-bundle:has(.second-img) img.card-img{visibility:hidden}
#products_list .card:hover img.second-img{visibility:visible}

@media(min-width:992px){
	body .single-main-row > .col-lg-8{flex:1 0 50% !important;}
	body .single-main-row > .col-lg-4{flex:1 0 50% !important;}
}