/* 
Theme Name: Warther Hello Elementor
Description: Warther's Hello Elementor Child Theme
Author: RMR Development
Template: hello-elementor
Version: 1.0.0
Text Domain: warther-hello-elementor
*/

/*=== Start Globals ===*/
:root {
    --wp--style--global--content-size: 1200px!important;
}
/*=== Layout Elements ===*/
body,html{
    overflow-x: hidden;
}
body.home{
    background-color: black;
}
/*=== Start Header ===*/
.no_wrap_section .elementor-container{
    flex-wrap: nowrap;
}
.header-contact-btn{
	white-space: nowrap;
}
@media (min-width: 767px) {
	.main-menu-container .elementor-widget-wrap{
		flex-wrap: nowrap;
		justify-content: center;
		align-items: center;
		flex-direction: column;
	}
}
.elementor-nav-menu--main .elementor-nav-menu a, .elementor-nav-menu--main .elementor-nav-menu a.highlighted, 
.elementor-nav-menu--main .elementor-nav-menu a:focus, .elementor-nav-menu--main .elementor-nav-menu a:hover{
    padding: 5px 7px;
}
.elementor-nav-menu .sub-arrow{
    padding: 5px;
}
.wpmenucart-icon-shopping-cart-0, .wpmenucart-icon-shopping-cart-0 + span.amount{
    color: white;
}

.wpmenucart-icon-shopping-cart-0:hover, .wpmenucart-icon-shopping-cart-0 + span.amount:hover{
    color: var( --e-global-color-8373498 )
}
/*=== End Header ===*/
/*=== Start Main Menu ===*/
body.home .header-sticky-section {
    display: flex;
    justify-content: center;
    padding: 0!important;
    height: 0;
}
.header-sticky-section .elementor-container{
    background: #BDA77C;
    max-width: none!important;
    margin: 0;
}


.header-sticky-section .elementor-container .elementor-widget-wrap > .elementor-element {
    width: auto;
}


body:not(.home) .header-sticky-section  .elementor-widget-nav-menu{
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-left: auto;
}

body:not(.home) .header-sticky-section .elementor-container .elementor-widget-wrap {
    align-content: center;
}
body .header-sticky-section .elementor-container{
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
}

body.home .header-sticky-section .elementor-container{
    background: #BDA77C;
    border-radius: 10px!important;
    padding: 15px 20px 15px 20px!important;
    margin-top: 10px;
    height: fit-content;
    width: 100%;
    z-index: 10;
    max-width: 1100px!important;
}

.warther-logo-column{
    max-width: 125px;
}
.phone-button-column{
    max-width: 125px;
}

@media (max-width: 767px) {
    .mobile-menu-button{
        margin-left: auto!important;
    }
    .header-sticky-section .elementor-container .elementor-widget-wrap {
        align-content: center;
    }
    .header-sticky-section .elementor-container > :last-child {
        width: auto;
    }
}

/*=== End Main Menu  ===*/
#pojo-a11y-toolbar{
    top: 23vw!important;
}
@media (max-width: 767px) {
    #pojo-a11y-toolbar{
        bottom: -250px !important;
        top: initial !important;
    }
}

/*=== End Globals ===*/

/*=== Start Home Page Styles ===*/
.home-banner-video .elementor-container{
    max-width: none!important;
}
.home-banner-video video{
    min-height: 450px!important;
}

.home-product-panels{
    margin-top: -300px!important;
}
@media screen and (max-width: 1400px){
    .home-product-panels{
        margin-top: -200px!important;
    }
}
@media screen and (max-width: 800px){
    .home-product-panels{
        margin-top: -167px!important;
    }
}
.tablet-container {
    width: 20% !important;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;        /* Uses a flexbox-like behavior */
    -webkit-box-orient: vertical; /* Sets the box orientation to vertical */
    -webkit-line-clamp: 3;  
}

.tablet-container .elementor-widget-wrap{
    padding: 10px;
    margin: auto;
    width: 90%;
    background-color: #665a4e;
    color: white;
    text-align: center;
    border-radius: 10px!important;
    height: calc(7.5vw + 7.5vh + 10rem);
}
.tablet-container  img{
    margin-top: 5px;
    height: calc(5vw + 5vh + 0rem);
    width: auto;
}
.tablet-container  p{
    margin-top: 15px;
    font-size: calc(0.45vw + 0.45vh);
}

@media screen and (min-width: 1400px){
    .tablet-container  p{
        font-size: 12px;
    }
}
.tablet-container .tablet-header .elementor-heading-title{
    font-size: calc(.75vw + 0.75vh)!important;
    height: calc(1vw + 1vh + 2rem);
    vertical-align: center;
    text-align: center;
}

@media screen and (max-width: 768px){
	body.home .main-menu .elementor-container{
		border-radius: 0;
		margin-top: -5px;
	}
    .tablet-container  p{
        display: none;
    }
	.tablet-container .elementor-widget-wrap{
		height: auto;
	}
	.elementor-2923 .elementor-element.elementor-element-bacf64b > .elementor-container{
		min-height: 0;
	}
	.elementor-2923 .elementor-element.elementor-element-bacf64b > .elementor-background-overlay{
		opacity: 0;
	}
}

/*=== End Home Page Styles ===*/


/*=== Start Woocommerce Product Styles ===*/
.eael-product-grid .products .product {
    position: relative!important;
    width: calc(7vw + 7vh + 7rem)!important; /* Adjust size based on your design */
    height: calc(7vw + 7vh + 7rem)!important; /* Ensure the container is square */
    border-radius: 50%!important; /* Makes the container circular */
    color: white !important;
    background-color: #3e4a62 !important;
    box-shadow: 2px 2px 5px 2px #0000008f !important;
    overflow: hidden!important; /* Ensures content outside the circle is hidden */
    display: flex!important;
    justify-content: center!important;
    align-items: center!important;
    text-align: center!important;
}

.eael-product-grid .products .product .eael-product-title h2, .product .eael-product-price h2{
    color: white !important;
}

.eael-product-grid .products .product .overlay {
    width: 100%!important;
    height: 100%!important;
    display: flex!important;
    justify-content: center!important;
    align-items: center!important;
}

.eael-product-grid .products .product img {
    width: 100%!important;
    height: 100%!important;
    object-fit: cover!important; /* Ensures the image fills the circle without distortion */
    max-width: calc(5vw + 5vh + 5rem)!important;
    max-height: 200px;
}

.eael-product-grid .products .product .eael-product-title{
    position: absolute!important;
    bottom: 20px!important; /* Adjust based on the layout you want */
    left: 50%!important;
    transform: translateX(-50%)!important;
    color: white!important; /* Adjust text color for visibility */
}
.eael-product-grid .products .product .eael-product-price {
    position: absolute!important;
	font-size: 14px!important;
    line-height: 15px !important;
    bottom: 10px!important; /* Adjust based on the layout you want */
    left: 50%!important;
    transform: translateX(-50%)!important;
    color: white!important; /* Adjust text color for visibility */
    text-shadow: 0 0 2px black;
}

h2.woocommerce-loop-product__title{
    font-size: 17px !important;
    line-height: 15px !important;
    text-shadow: 0 0 2px black;
}
.woocommerce-Price-amount.amount{
    font-size: 17px !important;
}

.elementor-element.elementor-element-39d428e.eael-product-grid-column-4.elementor-widget.elementor-widget-eicon-woocommerce{	
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    max-width: 100vw;
    justify-content: center;
}


.eael-product-grid .woocommerce ul.products, .eael-post-grid .woocommerce ul.products{
        justify-content: center;
        align-items: center;
}
@media only screen and (min-width: 1025px) {
    .eael-product-grid-column-2 .eael-product-grid .woocommerce ul.products {
        grid-template-columns: repeat(2, 0fr)!important;
    }
}

@media only screen and (min-width: 1025px) {
    .eael-product-grid-column-3 .eael-product-grid .woocommerce ul.products {
        grid-template-columns: repeat(3, 0fr)!important;
    }
}

.bell-type{
    position: relative !important;
    width: calc(33vw) !important;
    height: calc(33vw) !important;
    max-width: 250px;
    max-height: 250px;
    border-radius: 50% !important;
    background: #bda77c;
    border: 1px solid black;
    color: black;
    overflow: hidden !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important; 
}

.bell-type img{
    max-width: 75px;
}

.music-bells{
    display: flex;
    justify-content: center;
}
.music-bells .elementor-container{
    margin-left: 0!important;
    margin-right: 0!important;
    width: 100%!important;
    position: relative!important;
    justify-content: space-evenly!important;
    flex-direction: row!important;
    flex-wrap: nowrap!important;
}
.bell-type h5{ 
    font-size: clamp(12px, calc(1vw + 1vh), 20px)!important;
}
.bells-types-title h5{
    font-size: clamp(12px, calc(1vw + 1vh), 20px)!important;
}

#music_bells .elementor-widget.elementor-widget-call-to-action,
#hand_bells .elementor-widget.elementor-widget-call-to-action,
#milestone_bells .elementor-widget.elementor-widget-call-to-action{
    position: relative!important;
    width: calc(7vw + 7vh + 7rem)!important; /* Adjust size based on your design */
    height: calc(7vw + 7vh + 7rem)!important; /* Ensure the container is square */
    border-radius: 50%!important; /* Makes the container circular */
    color: white !important;
    background-color: #3e4a62 !important;
    box-shadow: 2px 2px 5px 2px #0000008f !important;
    overflow: hidden!important; /* Ensures content outside the circle is hidden */
    display: flex!important;
    justify-content: center!important;
    align-items: center!important;
    text-align: center!important;
}


#music_bells .elementor-widget.elementor-widget-call-to-action .elementor-cta__bg-wrapper,
#hand_bells .elementor-widget.elementor-widget-call-to-action .elementor-cta__bg-wrapper,
#milestone_bells .elementor-widget.elementor-widget-call-to-action .elementor-cta__bg-wrapper{
    min-height: 200px;
}

#music_bells .elementor-widget.elementor-widget-call-to-action span,
#hand_bells .elementor-widget.elementor-widget-call-to-action span,
#milestone_bells .elementor-widget.elementor-widget-call-to-action span{
    background: transparent;
    border: none;
    padding-top: 0;
    margin-bottom: 0px;
    font-size: 18px;
    font-weight: 500;
}

#music_bells .elementor-widget-wrap,
#hand_bells .elementor-widget-wrap,
#milestone_bells .elementor-widget-wrap{
    justify-content: center;
}

#music_bells .elementor-container.elementor-column-gap-no,
#hand_bells .elementor-container.elementor-column-gap-no,
#milestone_bells .elementor-container.elementor-column-gap-no{
    justify-content: center;
}

@media only screen and (max-width: 1200px) {
    #music_bells .elementor-widget.elementor-widget-call-to-action .elementor-cta__bg-wrapper,
    #hand_bells .elementor-widget.elementor-widget-call-to-action .elementor-cta__bg-wrapper,
    #milestone_bells .elementor-widget.elementor-widget-call-to-action .elementor-cta__bg-wrapper{
        min-height: 150px;
    }
    
    #music_bells .elementor-widget.elementor-widget-call-to-action .elementor-cta__content,
    #hand_bells .elementor-widget.elementor-widget-call-to-action .elementor-cta__content,
    #milestone_bells .elementor-widget.elementor-widget-call-to-action .elementor-cta__content{
        padding: 0;
    }
    #music_bells .elementor-widget.elementor-widget-call-to-action span,
    #hand_bells .elementor-widget.elementor-widget-call-to-action span,
    #milestone_bells .elementor-widget.elementor-widget-call-to-action span{
        font-size: 15px;
        margin-bottom: 20px;
    }
}

/*=== End Woocommerce Product Styles ===*/


/*=== Start Footer Styles ===*/
.elementor-location-footer .elementor-section .elementor-container{
	justify-content: space-between;
}
@media screen and (max-width: 768px){
	
	.elementor-903 .elementor-element.elementor-element-118df64, .elementor-903 .elementor-element.elementor-element-c83e390{
		text-align: center;
	}
	.elementor-903 .elementor-element.elementor-element-f4f8511{
        justify-content: center;
        display: flex;
	}
	.elementor-903 .elementor-element.elementor-element-b5c9711 .elementor-nav-menu .elementor-item, .elementor-903 .elementor-element.elementor-element-e39b9d5 .elementor-nav-menu .elementor-item, .elementor-widget-wrap{
		justify-content: center;
	}
}
/*=== End Footer Styles ===*/

/*=== Start Other ===*/
.hidden {
    opacity: 0;
    transition: opacity 1s ease-in-out;
}
.visible {
opacity: 1;
}
/*=== End Other ===*/