/*
Theme Name: Coffee Brewery
Description: The Coffee Brewery Theme is a beautifully designed solution tailored for coffee shops, cafés, espresso bars, mobile coffee carts, roastery businesses, barista training centers, coffee subscription services, and specialty coffee vendors. Whether you’re running a local café, selling artisan coffee blends, or offering a home delivery service, this theme presents your offerings with charm and sophistication. Featuring a modern layout, elegant typography, and rich visuals, it creates a warm, inviting coffeehouse atmosphere online. It’s fully responsive, retina-ready, and built with optimized, clean code for fast performance. Designed with the coffee industry in mind, the theme includes intuitive sections for showcasing your menu, seasonal brews, signature drinks, organic coffee products, and bean origins. Promote events like tasting sessions, coffee brewing classes, or barista workshops with built-in event management and reservation features. Use the blog to share coffee recipes, brewing tips, behind-the-scenes stories, or sustainability efforts. Integrated with social media tools and SEO-ready architecture, the Coffee Brewery Theme ensures maximum visibility and engagement. It also supports customization with flexible layout options, color palettes, and fonts, plus shortcode compatibility through the Shortcodes Ultimate plugin, allowing for easy content creation. This theme is ideal for creating a digital presence that captures the essence of artisan coffee culture while helping your brand connect meaningfully with coffee lovers everywhere.
Author: misbahwp
Theme URI: https://www.misbahwp.com/products/coffee-brewery
Author URI: https://www.misbahwp.com/
Version: 1.5
Requires PHP: 7.2
Tested up to: 6.8
Requires at least: 5.0
Tags: food-and-drink, blog, photography, one-column, two-columns, three-columns, four-columns, right-sidebar, left-sidebar, grid-layout, custom-background, custom-colors, custom-header, custom-logo, custom-menu, featured-images, footer-widgets, full-width-template, featured-image-header, editor-style, post-formats, rtl-language-support, theme-options, threaded-comments
Text Domain: coffee-brewery
License: GNU General Public License v3 or later
License URI: http://www.gnu.org/licenses/gpl-3.0.html

Coffee Brewery WordPress Theme, (C) 2025 misbahwp.com
Coffee Brewery WordPress Theme is released under the terms of GNU GPL
*/

:root {
  --first-color: #713E28;
}

.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
	-webkit-transition: none;
	-moz-transition: none;
	-o-transition: none;
	transition: none;
}
.screen-reader-text:focus {
	background-color: #f1f1f1;
	border-radius: 3px;
	box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
	clip: auto !important;
	clip-path: none;
	color: #21759b;
	display: block;
	font-size: 14px;
	font-weight: 600;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000;
}
#content[tabindex="-1"]:focus {
	outline: 0;
}
body {
	font-family: "Inter", sans-serif;
  color: #626B7D;
  margin:0;
  background: #FFFFFF;
}
h1,h2,h3,h4,h5,h6{
	color: #000000;
  font-family: "Bebas Neue", sans-serif;
  letter-spacing: 1px;
}
a {
  color:#000000;
  -webkit-transition: color .1s linear;
  -moz-transition: color .1s linear;
  -o-transition: color .1s linear;
  transition: color .1s linear;
  text-decoration: none;
}
a:hover,
a:focus {
  color:var(--first-color);
  text-decoration: none;
}
.wp-block-button.is-style-squared .wp-block-button__link {
  border-radius: 0 !important;
}
.wp-block-button__link{
  color: #fff !important;
}
.wp-block-button.is-style-outline .wp-block-button__link {
  border: 2px solid #000000;
  color: #000000 !important; 
}
.post-single a, .page-single a,.sidebar-area .textwidget a,.comment-content a,.woocommerce-product-details__short-description a,#tab-description a,.extra-home-content a {
  text-decoration: underline;
  color:var(--first-color);
}
.sidebar-area a:hover{
  color: #000;
}

/* ===============================================
   Post Format
   ============================================= */

.entry-video iframe {
    width: 100%;
}

/* ===============================================
   LOGO BOX
   ============================================= */
/*img.custom-logo {
  height: 70px;
  width: 70px;
}*/
.logo {
  padding: 10px 0;
  font-weight: bold;
  text-align: center;
}
.logo a {
  color: #FFFFFF;
  font-weight: 700;
  font-size: 20px;
  text-transform: uppercase;
}
a.account-box {
  font-family: "Readex Pro", sans-serif;
  font-weight: 400;
  font-size: 12px;
  color: #FFFFFF;
}
a.account-box i{
  font-size: 18px;
}
.logo span {
  display: block;
  font-size: 15px;
  line-height: 18px;
  color: #ffffff;
}

.button-header a {
  background: var(--first-color);
  padding: 10px 20px;
  border-radius: 5px;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  display: inline-block;
}

p.info-button a {
  background: var(--first-color);
  padding: 10px 25px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 13px;
  border-radius: 30px;
  color: #ffffff;
}
.header-box {
  border-radius: 8px;
  background: var(--first-color);
  padding: 10px 10px;
}
p.info-button a:hover{
  background: #FCAC2F;
}

header#site-navigation {
  position: relative;
  z-index: 2;
  width: 100%;
  background: #ffffff;
}
.header-middle {
  background: #F0F4DA;
}
.header-inner {
  border-bottom: 2px solid #E7E7E7;
}
#google_language_translator select.goog-te-combo {
  border: 1px solid #767676 !important;
  background: #EEEEEE !important;
  border-radius: 5px !important;
}
.header-search form.wordpress-post-search {
  background: #f5f5f1;
  padding: 5px;
  border-radius: 5px;
  margin-bottom: 0px !important;
}
.header-search input#wordpress-post-search-field {
  background: transparent;
  border: none;
  width: 75%;
}
.logo-content{
  text-align: left;
}
.header-search input#wordpress-post-search-field ,button.search-button {
  border: none;
  background: transparent;
  cursor: pointer;
}
.header-search button.search-button i {
  color: #FFD233;
}
.header-search input#wordpress-post-search-field::placeholder{
  font-family: Readex Pro;
  font-weight: 400;
  font-size: 13px;
  line-height: 100%;
  letter-spacing: 0%;
  vertical-align: middle;
  color: #B4B4B4;
}
.contact-box p,.contact-box p a{
  font-weight: 400;
  font-size: 14px;
  color: #222222;
}
.contact-box p a:hover{
  color: #FCAC2F;
}
.contact-box i{
  color: #FFD233;
  font-size: 15px;
}
.nav-box a i,.offcanvas-div i{
  color: #ffffff;
}
.offcanvas {
  background: #fff3e2;
}
.admin-bar .offcanvas-header {
  margin-top: 32px;
}
.offcanvas-header {
  justify-content: right
}
.offcanvas-div .offcanvas-header .btn-close {
  background-color: var(--first-color);
  border-radius: 0;
  padding: 16px !important;
}
.offcanvas-div .offcanvas-header .btn-close {
  padding: 5px 12px;
  opacity: 1;
  height: auto;
  width: auto;
}

/* ===============================================
   HEADER SEARCH
   =============================================== */

a.open-search-form i,a.cart-customlocation i {
  font-size: 18px;
  cursor: pointer;
  color: #ffffff;
  padding: 10px;
  border-radius: 30px;
  border: 1px solid #ffffff;
}
a.admin-box{
  background: #ffffff;
  border-radius: 30px;
  padding: 10px 15px;
  color: var(--first-color);
  font-weight: 500;
  font-size: 15px;
}
a.admin-box:hover{
  background: #E3D8D4;
  color: #000000;
}
a.admin-box i{
  margin-right: 10px;
}
.header-search .search-form {
  position:fixed;
  top:0;
  right:-100%;
  width:100%;
  height:100%;
  padding:0;
  z-index:1001;
  visibility: hidden;
  -webkit-transition-property: all , -webkit-transform;
    transition-property: all , transform;
    -webkit-transition-duration: 0.5s;
    transition-duration: 0.5s;
    -webkit-transition-timing-function: cubic-bezier(0.7,0,0.3,1);
    transition-timing-function: cubic-bezier(0.7,0,0.3,1);
  background: rgba(255,255,255, 0.98) none repeat;
  border:none !important;
}
.header-search .search-form.is-open {
  right:0;
  height:100%;
  visibility: visible;
}
.header-search .search-form.is-open form {
  position: absolute;
  width: 100%;
  top: 50%;
  transform: translateY(-50%);
  padding: 0 50px;
}
.header-search .search-form a.close-search-form {
  top:50px;
  position:absolute;
  margin-left:-13px;
  left:50%;
}
.header-search .search-form i.searchform-close-button {
  font-size:25px;
  color:#616161 !important;
  opacity:0;
  -webkit-transition: transform .2s linear;
  -moz-transition: transform .2s linear;
  -o-transition: transform .2s linear;
  transition: transform .2s linear;
}
.header-search .search-form.is-open i.searchform-close-button {
  opacity:1;
}
.header-search .search-form.is-open i.searchform-close-button:hover {
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  transform: rotate(90deg);
}

/**
====================================================================
  Navigation
====================================================================
*/
.top-menu-wrapper {
    padding: 10px 0;
}
.main-navigation ul .menu-item.menu-item-has-children a,
.main-navigation ul .page_item.page_item_has_children a{
    position: relative;
}
/*.main-navigation .menu > li i,.menu li i{
    font-size: 10px;
}*/
/*.main-navigation li.current_page_item > a, .main-navigation li.current-menu-item > a {
    color: #fff;
    font-weight: 800 !important;
}*/
.main-navigation ul li a{
    display: block;
    z-index: 1;
    position: relative;
    padding: 8px 12px;
    letter-spacing: 2px;
    color: #ffffff;
    font-family: "Bebas Neue", sans-serif;
    font-weight: 800;
    font-size: 18px;
}
.main-navigation ul .menu-item.menu-item-has-children .sub-menu a:after,
.main-navigation ul .page_item.page_item_has_children .children a:after{
    content: none;
}
.main-navigation .menu ul {
    margin-bottom: 0px;
    padding: 0px;
}
.main-navigation .menu li {
    display: inline;
    position: relative;
    list-style: none;
}
.top-menu-wrapper ul {
    gap: 5px 40px;
    display: inline-flex;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
}
.main-navigation .menu > li > a ,
.page_item a{
    display: inline-block;  
}
#site-navigation .page_item_has_children ul li a,#site-navigation .main-navigation .menu .menu-item-has-children ul li a {
    font-size: 18px;
    position: relative;   
    display: block;
    color: var(--first-color);
    text-align: left;
    padding: 12px 20px !important;
    line-height: 22px;
    font-weight: 800;
}
#site-navigation .menu ul.sub-menu li a,
#site-navigation .menu ul.children li a{
    line-height: 1.5;
}
nav#site-navigation{
    padding: 0;
}
.main-navigation ul.sub-menu > li > a,
.main-navigation ul.children > li > a {
    position: relative;
    z-index: 1;
    overflow: hidden;
    display: block;
    transition: color 0.3s ease;
}

.main-navigation ul.sub-menu > li > a::before,
.main-navigation ul.children > li > a::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background-color: var(--first-color);
    color: #fff;
    z-index: -1;
    transition: left 0.4s ease;
}

.main-navigation ul.sub-menu > li > a:hover::before,
.main-navigation ul.sub-menu > li > a:focus::before,
.main-navigation ul.children > li > a:hover::before,
.main-navigation ul.children > li > a:focus::before {
    left: 0;
}

.main-navigation ul.sub-menu > li > a:hover,
.main-navigation ul.sub-menu > li > a:focus,
.main-navigation ul.children > li > a:hover,
.main-navigation ul.children > li > a:focus {
    color: #fff !important;
}
.main-navigation .menu,.main-navigation .menu ul {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
}
div#mySidenav {
    display: inline-flex;
}
.main-navigation .menu > li ,.main-navigation .menu li{
    display: inline-flex;
    position: relative;
}
.main-navigation .menu > li > a:hover{
    color: #fff;
}
.main-navigation .sub-menu,
.main-navigation .children {
    background-color: #ffffff;
    list-style: none;
    padding-left: 0;
    position: absolute;
    opacity: 0;
    left: -9999px;
    z-index: 99999;
    width: 200px !important;
    border:none;
}
.main-navigation ul.sub-menu.dropdown-menu {
    border: none;
    border-radius: unset;
}
.main-navigation .sub-menu > li > a:hover,
.main-navigation .sub-menu > li > a:focus,
.main-navigation .children > li > a:hover,
.main-navigation .children > li > a:focus {
    background: #000;
    color: #fff;
}
.main-navigation .sub-menu li ul.sub-menu,
.main-navigation .children li ul.children {
    left: 200px !important;
    top: -1px !important;
}
.main-navigation .sub-menu > li,
.main-navigation .children > li {
    display: block;
    float: none;
    position: relative;
    width: 100%;
}
.main-navigation .sub-menu > li.menu-item-has-children .submenu-expand,
.main-navigation .children > li.page_item_has_children .submenu-expand {
    display: inline-block;
    position: absolute;
    width: calc( 24px + 1rem);
    right: 0;
    top: calc( .125 * 1rem);
    bottom: 0;
    color: white;
    line-height: 1;
    padding: calc( .5 * 1rem);
}
.main-navigation .sub-menu > li.menu-item-has-children .submenu-expand,
.main-navigation .children > li.page_item_has_children .submenu-expand {
    margin-right: 0;
}
.main-navigation .sub-menu > li > a,
.main-navigation .sub-menu > li > .menu-item-link-return,
.main-navigation .children > li > .menu-item-link-return {
    color: #000;
    display: block;
    padding: 14px;
    font-weight: 400;
}
.main-navigation .sub-menu > li > .menu-item-link-return,
.main-navigation .children > li > .menu-item-link-return {
    width: 100%;
    font-size: 22px;
    font-weight: normal;
    text-align: left;
}
.main-navigation .sub-menu > li > a:empty,
.main-navigation .children > li > a:empty {
    display: none;
}
.main-navigation .sub-menu > li.mobile-parent-nav-menu-item,
.main-navigation .children > li.mobile-parent-nav-menu-item {
    display: none;
    font-size: 0.88889em;
    font-weight: normal;
}
.main-navigation .sub-menu > li:last-child,
.main-navigation .children > li:last-child {
    border-bottom: none;
}

.toggle-nav, a.closebtn{
  display: none;
}

.sub-menu span.dashicons.dashicons-arrow-down-alt2{
  position: absolute;
  top: 20px;
  right: 0;
}

span.dashicons.dashicons-arrow-down-alt2 {
    margin-top: 8px;
}

.main-navigation .dashicons-arrow-down-alt2:before {
    content: "\f347";
    font-size: 15px;
    color: #fff;
}

.children.dropdown-menu span.dashicons.dashicons-arrow-down-alt2 {
    position: absolute;
    top: 10px;
    right: 0;
}

/* ===============================================
   POST BOX
   ============================================= */

.post-box{
  border: 1px solid rgba(0, 0, 0, 0.125);
  border-radius: 10px;
  padding: 10px;
}
.post-thumbnail {
  line-height: 0;
}
h3.post-title a {
  font-size: 22px;
  text-transform: capitalize;
  font-weight: 500;
}
.post-content p{
  color: #898d94;
}
.post-content{
  word-wrap: break-word;
}
.post-meta i{
  color: var(--first-color);
}
.post-meta span {
  text-decoration: none;
  text-transform: capitalize;
  font-size: 15px;
  font-weight: 500;
  color: #000;
}
pre {
  display: block;
  padding: 9.5px;
  margin: 0 0 10px;
  font-size: 13px;
  line-height: 1.42857143;
  color: #000000;
  white-space: break-spaces;
  background-color: #f5f5f5;
  border: 1px solid #ccc;
    border-radius: 4px;
}
.post-content img,
.post-thumbnail img,
.post-content iframe,
.post-content object,
.post-content embed {
  max-width: 100%;
}
.post-content img,
.post-thumbnail img {
  max-height:100%;
  height:300px;
  width: 100%;
  object-fit: cover;
  border-radius: 10px;
  background: #dfdcdc;
}
.post-content{
  color: #3c3c3c;
}
.post-content:after {
  content: "";
  display: table;
  clear: both;
}
#content,footer {
  float: left;
  width: 100%;
}
.post-meta.my-3 {
  display: flex;
  justify-content: start;
  border-radius: 4px;
  gap: 50px;
}
.post-meta a{
  color: #000;
}
.more-btn i {
  font-size: 15px;
  margin-left: 10px;
}
.blog-grid-layout .post-meta{
 gap: 20px;
}

/* ===============================================
  Slider
  ============================================= */

#slider {
  background: var(--first-color);
  position: relative;
  height: 600px;
}
.slider-main {
  position: absolute;
  left: 0px;
  right: 0px;
  bottom: 0px;
}
.short-text {
  font-family: Julee;
  font-weight: 400;
  font-size: 20px;
  color: var(--first-color);
}
.social-links{
  text-align: center;
}
.social-links a {
  font-size: 15px;
  color: #353535;
  width: 35px;
  padding: 10px;
  line-height: 20px;
  height: 35px;
  background: #E3D8D4;
  border-radius: 7px;
  position: relative;
  display: inline-block;
  text-align: center;
}
.social-links a:hover{
  color: #ffffff;
  background: var(--first-color);
}
.bar-1 {
  background: var(--first-color);
  text-align: center;
  padding: 10px 0px;
  box-shadow: 30px 14px 24px 20px #27272738;
  transform: rotate(6deg);
  position: absolute;
  width: 100%;
  bottom: 0px;
  z-index: 2;
}
.bar-1:before {
  content: "";
  background: var(--first-color);
  top: 0px;
  left: -9px;
  width: 10px;
  height: 100%;
  position: absolute;
  overflow: hidden;
}

.bar-2 {
  background: var(--first-color);
  text-align: center;
  padding: 10px 0px;
  box-shadow: 30px 14px 24px 20px #27272738;
  transform: rotate(-3deg);
  position: absolute;
  width: 100%;
  bottom: 0px;
  z-index: 1;
}
.bar-text {
  font-family: Inter;
  font-weight: 500;
  font-size: 16px;
  letter-spacing: 2px;
  color: #fff;
  text-transform: uppercase;
}
.slider-owl-position {
  position: relative;
  padding-left: 8%;
}
.slider-owl-position h3 {
  font-weight: 400;
  font-size: 35px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #000000;
}
.slider-owl-position p {
  font-weight: 400;
  font-size: 16px;
  color: #000000;
}
span.slider-button a {
  background: var(--first-color);
  padding: 10px 15px;
  border-radius: 6px;
  font-weight: 500;
  font-size: 15px;
  letter-spacing: 1px;
  color: #fff;
}
span.slider-button a:hover {
  background: #E3D8D4;
  color: #353535;
}
span.social-links{
  margin-left: 10px;
}

#slider .slider-image-box {
  background: #222222;
}
#slider h2{
  font-weight: 300;
  font-size: 25px;
  line-height: 33.6px;
  color: #FFFFFF;
  letter-spacing: 4px;
  text-transform: uppercase;
}
#slider h1 {
  font-weight: 500;
  font-size: 28px;
  line-height: 45px;
  text-transform: uppercase;
  color: #FFFFFF;
}
span.me-2.rating-heading {
  font-weight: 600;
  font-size: 20px;
  color: #222222;
  line-height: 30px;
}
span.rating-text {
  font-weight: 300;
  font-size: 12px;
  line-height: 24px;
  color: #757575;
}
.rating-image{
  gap:10px;
  align-items: center;
  justify-content: space-between;
}
#slider .button {
  background: #fff;
  color: #222222;
  border-radius: 30px;
  padding: 8px 20px;
  display: inline-block;
  font-weight: 600;
  font-size: 14px;
  line-height: 24px;
}
#slider .button:hover{
  background: #FFD233;
  color: #fff;
}
#slider .slider-image-box{
  position: relative;
}
#slider img.slide-image {
  width: 100%;
  height: 400px;
  object-fit: cover;
}
.slider-image img{
  height: 600px;
  object-fit: cover;
  border-radius: 50px 0px 0px 50px;
}
.slider-box{
  position: relative;
}

/* ===============================================
   Feature Header Image
   ============================================= */
 
.feature-header{
  position: relative;
  background-color: #000;
}
.feature-header img {
  width: 100%;
  height: 300px !important;
  object-fit: cover;
  opacity: 0.9;
}
h1.post-title.feature-header-title{
  color: #fff;
  position: relative;
  word-wrap: break-word;
  text-align: center;
}

/* ===============================================
  Projects Section
  ============================================= */

.product-box {
  background: #FFF5F0;
  padding: 10px 15px;
  border-radius: 50px 50px 0px 0px;
  text-align: center;
  margin-top: 30px;
}
.product-box:hover{
  background: var(--first-color);
}
.product-image img{
  width: 200px !important;
  margin: 0 auto;
  height: 250px;
  object-fit: cover;
}
.product-image {
  margin-top: -30px;
}
.price-review {
  display: flex;
  align-items: center;
  justify-content: center;
  gap:20px;
}
h4.product-text a {
  font-weight: 400;
  font-size: 22px;
  color: #000000;
  letter-spacing: 1px;
}
p.product-dis {
  font-weight: 400;
  font-size: 16px;
  color: #000000;
  text-align: center;
  line-height: 1.5;
}
.cart-button a.added_to_cart.wc-forward{
  margin-left: 10px;
}
.product-box:hover .cart-button a{
  background: #ffffff;
  color: var(--first-color);
}
.product-box:hover h4.product-text a,.product-box:hover p.product-dis,.product-box:hover p.price,.product-box:hover ins span.woocommerce-Price-amount.amount bdi{
  color: #ffffff;
}
.cart-button a{
  background: var(--first-color);
  padding: 8px 20px;
  border-radius: 7px;
  display: inline-block;
  font-weight: 500;
  font-size: 14px;
  color: #ffffff;
  letter-spacing: 2px;
  text-transform: uppercase;
}
#hot_products h3 {
  font-size: 30px;
  color: #000000;
  letter-spacing: 2px;
}
#hot_products p.short-heading {
  font-size: 15px;
  font-weight: 400;
  color: #000000;
}
.product-box p.price {
  font-family: "Bebas Neue", sans-serif;
  font-weight: 400;
  font-size: 18px;
  color: #000000;
  letter-spacing: 1px;
}
.product-box ins span.woocommerce-Price-amount.amount bdi {
  color: #616161;
}
.product-box .star-rating {
  overflow: hidden;
  position: relative;
  height: 1em;
  line-height: 1;
  font-size: 16px;
  width: 5.4em;
  font-family: star;
  color: #ffd058;
}
.product-box .star-rating:before{
  content: "\53\53\53\53\53";
  color: #908E8B;
  float: right;
  top: 0;
  left: 0;
  position: absolute;
}
.product-box .star-rating span::before{
  content: "\53\53\53\53\53";
  top: 0;
  position: absolute;
  left: 0;
}
.product-box .star-rating span{
  overflow: hidden;
  float: left;
  top: 0;
  left: 0;
  position:absolute;
  padding-top: 1.5em;
}

/* ===============================================
   Cart & checkout
   ============================================= */

.wp-block-woocommerce-cart .wc-block-cart__submit-button, .wc-block-components-checkout-place-order-button, .wc-block-components-totals-coupon__button{
  background: var(--first-color);
  color: #fff !important;
  text-decoration: none !important;
  border-radius: 10px;
  border: none !important;
  padding: 10px;
  border: 2px solid transparent;
  width: 50%;
}
.wc-block-cart__submit-container a {
    font-size: 15px;
    font-weight: 600;
}
.wp-block-woocommerce-cart .wc-block-cart__submit-button:hover, .wc-block-components-checkout-place-order-button:hover{
  border: 2px solid #fff;
  background: #000;
  color: #fff !important;
}
.wp-block-woocommerce-cart .wc-block-cart-items,.wp-block-woocommerce-cart-order-summary-block, .wp-block-woocommerce-checkout-order-summary-block{
  border: 1px solid #dee2e6!important;
  padding: 10px;
  border-radius: 10px;
}
.wp-block-woocommerce-cart .wc-block-cart-items__header-image, .wc-block-cart-items__header-total{
  padding: 10px !important;
}
.wp-block-woocommerce-cart .wc-block-cart .wc-block-cart__submit-container{
  margin-top: 20px;
}
.wp-block-woocommerce-cart .wc-block-components-product-badge{
  background: var(--first-color);
  color: #fff !important;
  padding: 10px !important;
  margin-bottom: 5px;
  margin-top:5px ;
}
a.wc-block-components-product-name, .wc-block-components-product-name{
  font-size: 22px !important;
  color: #000 !important;
  text-decoration: none !important;
}
.wc-block-components-order-summary-item__quantity{
  background-image: linear-gradient(90deg, #fb6d21 0%, #eb343b 100%) !important;
  color: #fff !important;
  border: none !important;
  box-shadow: none !important;
}
.wc-block-components-sidebar-layout .wc-block-components-main {
  padding-right:0% !important;
}
.wp-block-woocommerce-cart.alignwide, .wp-block-woocommerce-checkout.alignwide.wc-block-checkout{
  margin-right: auto !important;
  margin-left: auto !important;
}
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value,
.wc-block-components-totals-footer-item .wc-block-components-totals-item__label,
.wc-block-components-totals-item__label,.wc-block-components-totals-item__value,
.wc-block-components-product-metadata .wc-block-components-product-metadata__description>p,
.is-medium table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__total .wc-block-components-formatted-money-amount,
.wc-block-components-quantity-selector input.wc-block-components-quantity-selector__input,
.wc-block-components-quantity-selector .wc-block-components-quantity-selector__button,
.wc-block-components-quantity-selector,table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__quantity .wc-block-cart-item__remove-link,
.wc-block-components-product-price__value.is-discounted,del.wc-block-components-product-price__regular  {
  color: #000 !important;
}
.wc-block-components-totals-wrapper:after{
  border-color: #000 !important;
}
tbody.wc-block-cart-items{
  border: 1px solid #000;
  border-radius: 30px;
}
.wc-block-components-product-metadata .wc-block-components-product-metadata__description>p, button.wc-block-cart-item__remove-link{
  font-size: 16px !important;
}
.is-medium table.wc-block-cart-items .wc-block-cart-items__row{
    grid-template-columns: 270px 47px !important;
    padding: 16px 16px !important;
}
.wp-block-woocommerce-cart .wc-block-components-product-badge{
  display: none;
}
.wp-block-woocommerce-cart .wc-block-cart__submit-button:hover{
  border: unset !important;
}
a.components-button.wc-block-components-button.wp-element-button.wc-block-cart__submit-button.contained {
    text-decoration: none;
}
.wc-block-components-button:not(.is-link) {
  padding: 0px !important;
}
.wc-block-components-sidebar,.wc-block-components-sidebar-layout .wc-block-components-main{
  width: 100% !important;
}
.wc-block-components-sidebar-layout.wc-block-checkout.is-large {
  flex-flow: column !important;
  flex-direction: column-reverse !important;
}
.is-large .wc-block-checkout__sidebar.is-sticky {
  position: relative !important;
  top: 0px !important;
}
/* ===============================================
   Scroll
   ============================================= */

.scroll-up {
  position: fixed;
  bottom: 12px;
  right: 30px;
  z-index: 999;
}
.scroll-up a {
  background: var(--first-color);
  color:#000;
}
.scroll-up a:hover{
  background: #0d0d0d;
  color:#fff !important;
}
.scroll-up a {
  display: block;
  height: 2.5rem;
  width: 2.5rem;
  text-align: center;
  line-height: 2;
  font-size: 1.25rem;
  color: #fff;
  opacity: 1;
  transition: all 0.3s ease 0s;
  box-shadow: 0 0 10px rgb(0 0 0 / 20%);
}
.scroll-up span {
  top: 7px;
  position: absolute;
  left: 7px;
  font-size: 25px;
  font-weight: 600;
}

/*===============================================
   PRELOADER
=============================================== */

.cssloader {
  padding-top: calc(45vh - 25px);
  position: fixed;
  width: 100%;
  height: 100%;
  top:0;
  right: 0;
  left: 0;
  bottom: 0;
  background: #212121;
  z-index: 99999;
}

.sh1 {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 50px 50px 0 0;
  border-color: #354952 transparent #ffffff transparent;
  margin: 0 auto;
  animation: shk1 1s ease-in-out infinite normal;
}

.sh2 {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 0 50px 50px;
  border-color: transparent  transparent var(--first-color) transparent ;
  margin: -50px auto 0;
  animation: shk2 1s ease-in-out infinite alternate;
}

/** animation starts here **/
@keyframes shk1 {
  0% {
    transform: rotate(-360deg);
  }

  100% {
  }
}

@keyframes shk2 {
  0% {
    transform: rotate(360deg);
  }
  100% {
  }
}
.lt {
  color: #fff;
  margin: 30px auto;
  text-align: center;
  font-weight: 100;
  letter-spacing: 10px;
}

/*
======================================================
    02. Featured Header Image
======================================================*/

.feature-header{
  position: relative;
  background-color: #000;
}
.feature-header img {
  width: 100%;
  height: 300px !important;
  object-fit: cover;
  opacity: 0.4;
}
h1.post-title.feature-header-title{
  color: #fff;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  word-break: break-all;
}

/*
======================================================
    02. Related post CSS
======================================================*/

.related-post-item h4.post-title {
    word-wrap: break-word;
}

/* ===============================================
 STICKY POST
 =============================================== */

.post-box.sticky {
    border-radius: 10px;
    border: 1px solid rgba(0, 0, 0, 0.125);
}
.post-box{
  position: relative;
}
.sticky .post-thumbnail::before {
    content: '\f08d';
    font-family: "Font Awesome\ 5 Free";
    font-size: 30px;
    font-weight: 900;
    color: #fff;
    margin-top: 10px;
    z-index: 9;
    position: absolute;
    top: 27px;
    left: 27px;
    transform: rotate(312deg);
}

/* ===============================================
 sticky header
 =============================================== */

 .fixed-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 9999;
  background: #fff;
}
.admin-bar .sticky-header.fixed-header {
   margin-top: 32px;
}

/* ===============================================
   Pagination
   ============================================= */

.pagination,
.coffee-brewery-pagination {
	margin:25px 0;
}

.pagination .nav-links a,
.pagination .nav-links span.current,
.coffee-brewery-pagination a span,
.coffee-brewery-pagination span.current {
	display:inline-block;
	text-decoration: none;
	padding:10px 12px;
	font-size:14px;
	line-height:21px;
	color:#333;
	text-align:center;
	vertical-align:middle;
	cursor:pointer;
	background:#f3f4f7;
	position:relative;
	margin:0;
	-webkit-transition: background-color .3s ease;
	-moz-transition: background-color .3s ease;
	-ms-transition: background-color .3s ease;
	-o-transition: background-color .3s ease;
	transition: background-color .3s ease;
}

.pagination .nav-links a:hover,
.pagination .nav-links a:focus,
.pagination .nav-links span.current,
.coffee-brewery-pagination span.current,
.coffee-brewery-pagination span.current:hover,
.coffee-brewery-pagination span.current:focus,
.coffee-brewery-pagination a span:hover,
.coffee-brewery-pagination a span:focus {
	background: var(--first-color);
	color: #fff;
}

.woocommerce nav.woocommerce-pagination ul li span.current {
  background: var(--first-color);
  color: #fff;
}

/*--------------------------------------------------------------
## Comments
--------------------------------------------------------------*/
.comment-reply a:focus{
  color: #fff;
}
.comment-respond input#submit:hover,
.comment-reply a:hover{
	background: #000000;
	color: #fff;
}
.comment-form-url input,nav.navigation.pagination{
  width: 100%;
}
.comment-respond input#submit {
  background: var(--first-color);
  border: none;
  color: #fff;
  padding: 10px;
  font-weight: 600;
}
.comment-content a {
  word-wrap: break-word;
}
.bypostauthor {
  display: block;
}
.comments-title {
  font-size: 1.125rem;
}
.comment-body .pull-left {
  padding-right: 0.625rem;
}
.comment-list {
  padding-left: 0;
}
.comment-list .comment {
  display: block;
}
.comment-list .pingback {
  border-top: 1px solid rgba(0, 0, 0, 0.125);
  padding: 0.563rem 0;
}
.comment-list .pingback a {
  margin-left: 5px;
  margin-right: 5px;
}
.comment-content.card-block {
  padding: 15px;
}
.comment-reply a {
  background: var(--first-color);
  padding: 5px 15px;
  color: #fff;
}
li.wp-block-latest-comments__comment {
  padding-bottom: 0px !important;
}
.sidebar-area  .wp-block-latest-comments__comment-meta{
  float: none;
  background: transparent;
}
.sidebar-area .wp-block-latest-comments__comment-meta a{
  color: #2f3235;
}
ol.wp-block-latest-comments{
  padding: 0;
}
.sidebar-area .wp-block-latest-comments__comment li {
    margin-bottom: 0;
}

/* ===============================================
   Breadcrumbs
   =============================================== */

.bread_crumb a:hover{
    color:var(--first-color);
}
.bread_crumb a{
    color: #fff;
    cursor: pointer;
    font-size: 17px;
    font-weight: 600;
    text-transform: capitalize;
    padding: 10px;

}
.bread_crumb span {
  color: var(--first-color) ;
    cursor: pointer;
    font-size: 17px;
    font-weight: 600;
    text-transform: capitalize;
     padding: 10px;
}
.bread_crumb {
    color: #fff;
    position: absolute;
    width: 100%;
    top: 65%;
}


/* ===============================================
   SIDEBARS
   =============================================== */
.sidebar-area{
  color: #000;
}
.sidebar-area .textwidget img{
  width: 100%;
  height: auto;
}
.sidebar-area .sidebar-widget {
  margin-bottom: 25px;
  background: #f5f6f7;
  border-radius: 10px;
  padding: 0px 10px;
}
.sidebar-area a,
.sidebar-area p,
.sidebar-area li,
.sidebar-area address,
.sidebar-area dd,
.sidebar-area blockquote,
.sidebar-area td,
.sidebar-area th,
.sidebar-area .textwidget {
  line-height:1.9em;
  font-weight: normal;
  color: var(--second-color);
}
footer .sidebar-area a,
footer .sidebar-area p,
footer .sidebar-area li,
footer .sidebar-area address,
footer .sidebar-area dd,
footer .sidebar-area blockquote,
footer .sidebar-area td,
footer .sidebar-area th,
footer .sidebar-area .textwidget {
  color: var(--third-color);
}
.sidebar-area ul,#calendar_wrap,.sidebar-area .textwidget,.tagcloud {
  list-style: circle;
  margin: 0;
  padding: 0 0px;
}
footer .sidebar-area ul,footer #calendar_wrap,footer .sidebar-area .textwidget,footer .tagcloud {
  list-style: none;
}
.sidebar-area li a,
.sidebar-area li {
  font-size: 15px;
  word-wrap: break-word;
}
.sidebar-area li {
  padding-bottom: 5px;
  list-style: circle;
  margin-left: 25px;
}
.sidebar-area ul li{
  position: relative;
  margin-left: 25px;
  list-style: circle;
}
footer .sidebar-area ul li{
  list-style: none;
  margin-left: 0;
}
.sidebar-area ul li ul.children li,.sidebar-area ul li ul.sub-menu li{
  margin-left: 0;
}
.sidebar-area ul li::marker,.sidebar-area li::marker{
  color: var(--first-color);
}
.sidebar-area h4.title:before, .sidebar-area h1.wp-block-heading:before,  
.sidebar-area h2.wp-block-heading:before,  
.sidebar-area h3.wp-block-heading:before,  
.sidebar-area h4.wp-block-heading:before,  
.sidebar-area h5.wp-block-heading:before,  
.sidebar-area h6.wp-block-heading:before,
.sidebar-area .wp-block-search__label:before {
    content: '';
    position: absolute;
    height: 4px;
    width: 16%;
    bottom: 12px;
    left: 0;
    background-color: var(--first-color);
}
.footer-area h4.title:before, .footer-area h1.wp-block-heading:before,  
.footer-area h2.wp-block-heading:before,  
.footer-area h3.wp-block-heading:before,  
.footer-area h4.wp-block-heading:before,  
.footer-area h5.wp-block-heading:before,  
.footer-area h6.wp-block-heading:before,
.footer-area .wp-block-search__label:before{
  display: none;
}
.sidebar-area h4.title, .sidebar-area h1.wp-block-heading,  
.sidebar-area h2.wp-block-heading,  
.sidebar-area h3.wp-block-heading,  
.sidebar-area h4.wp-block-heading,  
.sidebar-area h5.wp-block-heading,  
.sidebar-area h6.wp-block-heading,
.sidebar-area .wp-block-search__label {
    padding: 20px 0px;
    color: #000;
    font-size: 22px;
    border-bottom: 1px dashed #dfe0e4;
    font-weight: 500;
    position: relative;
}
.wp-block-search__inside-wrapper {
  margin-top: 10px;
}

footer .sidebar-area form {
  padding: 0px;
}
.sidebar-area .wp-block-search__button {
  background: var(--first-color);
  color: #ffffff;
}
.sidebar-area .tagcloud a, p.wp-block-tag-cloud a {
  font-size: 15px !important;
  background: var(--first-color);
  color: #fff;
  padding: 5px 10px;
  display: inline-block;
  margin: 5px 0;
  text-decoration: none;
  border-radius: 6px;
}
footer .sidebar-area .tagcloud a, footer p.wp-block-tag-cloud a{
  background: #000;
}
footer .sidebar-area .tagcloud a:hover, footer p.wp-block-tag-cloud a:hover{
  background: #fff;
  color: #000;
}
.sidebar-area .tagcloud a:hover{
  background: #000000;
}
.sidebar-area form {
  padding: 15px 0px;
}
.sidebar-area select,
.sidebar-area textarea, #comments textarea,
.sidebar-area input[type="text"], #comments input[type="text"],
.sidebar-area input[type="password"],
.sidebar-area input[type="datetime"],
.sidebar-area input[type="datetime-local"],
.sidebar-area input[type="date"],
.sidebar-area input[type="month"],
.sidebar-area input[type="time"],
.sidebar-area input[type="week"],
.sidebar-area input[type="number"],
.sidebar-area input[type="email"],
.sidebar-area input[type="url"],
.sidebar-area input[type="search"],
.sidebar-area input[type="tel"],
.sidebar-area input[type="color"],
.sidebar-area .uneditable-input,
#comments input[type="email"],
#comments input[type="url"]{
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  border-radius: 0;
  width:100%;
  padding: 5px 2%;
  border: solid 1px #000000;
}
#wp-calendar th,
#wp-calendar
#today,
#wp-calendar
#today a {
	background:#f3f4f7;
	color:#434343 !important;
}
#wp-calendar a:hover {
	border:none;
}
#wp-calendar {
	background: #fff;
	width:100%;
}
#wp-calendar caption {
	font-size: 14px;
	text-transform:uppercase;
	margin:0 0 10px 0;
	text-align:left;
}
#wp-calendar th,
#wp-calendar td {
	text-align: center;
	font-size: 14px;
	color:#434343 !important;
	padding:3px 6px;
}
#wp-calendar td a {
	display:block;
	text-align: center;
	font-size: 14px;
	color:#434343 !important;
	text-decoration:underline
}
#wp-calendar td#prev a,
#wp-calendar td#prev a{
	text-decoration:none;
	text-align:left;
}
#wp-calendar th{
	font-weight:bold
}
#footer-widgets caption {
  color: #fff;
}
#footer-widgets a:hover,#footer-widgets a:focus,.copyright a:hover,.copyright a:focus{
  color: #000000;
}
#footer-widgets h4 {
  margin-bottom: 30px;
  font-weight: 300;
}
tr:nth-child(2n+2) {
	background-color: #f3f4f7;
}
.searchform label {
	display: block;
}
.searchform input[type=text]::placeholder{
  font-size: 12px;
  color: #ffffff;
  font-weight: 400;
}
.searchform input[type=text] {
  width: calc(100% - 110px);
  margin: 0;
  padding: 12px;
  border: 1px solid var(--first-color);
  float: left;
  background-color: #fff;
}
.searchform input[type=submit], .sidebar-area .wp-block-search__button {
	background: var(--first-color);
	border: none;
	color: #fff;
	font-size:14px;
	font-weight: 600;
	text-align:center;
	position:relative;
	float:left;
	text-shadow:none;
	padding:14px 0;
	width:100px;
	margin:0 auto;
	cursor: pointer;
	-webkit-transition: color .3s ease, background-color .3s ease;
	-moz-transition: color .3s ease, background-color .3s ease;
	-o-transition: color .3s ease, background-color .3s ease;
	transition: color .3s ease, background-color .3s ease;
}
.searchform input[type=submit]:hover ,
.searchform input[type=submit]:focus {
	background-color:var(--first-color);
	text-decoration:none
}
.searchform:after {
  content: "";
  display: table;
  clear: both;
}
footer {
  background: var(--first-color);
}
footer .sidebar-area {
	background: none;
	padding: 25px 0 0 0;
}
.wp-block-group__inner-container h2 {
  color: #fff;
}
footer a,
footer p,
footer .sidebar-area li,
footer .sidebar-area address,
footer .sidebar-area dd,
footer .sidebar-area blockquote,
footer .sidebar-area td,
footer .sidebar-area th,
footer .sidebar-area .title,
footer .sidebar-area .textwidget {
	color: #fff;
}
.footer-area ul {
  padding: 0;
}
.footer-area h4.title {
  padding: 0;
  font-size: 30px;
  text-transform: none;
  background: transparent;
  border: none;
}
img.size-auto,
img.size-full,
img.size-large,
img.size-medium,
img.alignleft,
img.alignright,
img.aligncenter,
.attachment img {
	max-width:100%;
	height:auto;
}
.alignleft,
img.alignleft {
	display:inline;
	float:left;
	margin-right:24px;
	margin-top:4px;
}
.alignright,
img.alignright {
	display:inline;
	float:right;
	margin-left:24px;
	margin-top:4px;
}
div.aligncenter,
img.aligncenter {
	display: block;
	margin-left: auto !important;
	margin-right: auto !important;
	float:none;
}
img.alignleft,
img.alignright,
img.aligncenter {
	margin-bottom:12px;
}

.wp-caption {
	line-height:18px;
	margin-bottom:25px;
	max-width:100% !important;
	padding:4px;
	text-align:center;
}

.wp-caption img {
	margin:5px 5px 0;
	width:96%;
	height:100%
}

.wp-caption p.wp-caption-text {
	color:#888;
	font-size:12px;
	margin:5px;
}

.sticky {
}

.gallery-caption {
}

.bypostauthor {
}

/* ===============================================
 footer social links
 =============================================== */
.copy-text a.social-links {
  margin-left: 14px;
}