/*
 Theme Name:     Wonder Marbles
 Theme URI:      https://example.com/
 Description:    A child theme for the Twenty Twenty-One theme
 Author:         Your Name
 Author URI:     https://example.com/
 Template:       twentytwentyone
 Version:        1.0.0
 Text Domain:    twentytwentyone-child
*/

/* Add your custom CSS below this line */

:root{
    --focus-color: #a88167;
    --light-bg: #e9e4d8;
    --dark-bg: #e7dcc9;
    --primary-color: #252221;
    --secondary-color: #27303b;
    --white-color: #ffffff;
    --branding--logo--max-width-mobile: 150px;
    
        --branding--logo--max-width: 150px;
}

body{
    background: none;
}


.menu-button-container{
    display: none;
}
.menu-wrapper > *{
    width: auto;
    align-items: center;
}
#site-navigation{
    display: flex;
    align-items: center;
}
.header-sticky li:not(.mega-current_page_item) > a{
    color: #000 !important;
}

#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link,
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-current-menu-item > a.mega-menu-link, #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-current-menu-ancestor > a.mega-menu-link, #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-current-page-ancestor > a.mega-menu-link{
    text-transform: uppercase;
    font-weight: 600;
}

.dashicons{
    width: auto;
    height: auto;
}

.-top-40{
    top: -40px;
}

body:not(.home) .fullscreen{
    /*max-height: 400px;
    min-height: 400px;*/
}

body:not(.home) .fullscreen,
body:not(.home) .fullscreen > div{
    position: relative;
}

body:not(.home) .fullscreen:before {
    content: " ";
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.7) 0%,
        rgba(255,255,255, 0.1) 100%
    );
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

.img-hover-wrapper{
    display: block;
    overflow: hidden;
    max-height: 212px;
}
.img-hover-wrapper img{
    transition: transform 0.6s ease;
    transform-origin: center center;
    will-change: transform;
}
.img-zoom-rotate:hover img{
    transform: scale(1.5) rotate(-15deg)
}
.img-zoom-rotate a,
.page-template-template-contact a{
    color: #000;
}

.wpcf7-form p{
    margin: 0;
}
.wpcf7-form br{
    display: none;
}

.wpcf7-form input, .wpcf7-form textarea{
    border: 1px solid #ccc;
    border-radius: 0;
    padding: 5px 15px !important;
}
.top-social{color:#fff;}
.top-social a img{width:20px; margin:0 0 0 8px;}
.top-social a img:first-child{display:none;}
.top-social a img:last-child{}
.sticky-active .top-social a img:first-child{display:none;}
.sticky-active .top-social a img:last-child{display:inline-block;}
.top-social.mobile{display:none;}

.fs-18{font-size:18px;}

.site .button:hover, .site .button:active, button:hover, button:active, input[type=submit]:hover, input[type=submit]:active, input[type=reset]:hover, input[type=reset]:active, .wp-block-search .wp-block-search__button:hover, .wp-block-search .wp-block-search__button:active, .wp-block-button .wp-block-button__link:hover, .wp-block-button .wp-block-button__link:active, .wp-block-file a.wp-block-file__button:hover, .wp-block-file a.wp-block-file__button:active {
    background-color: transparent;
    border-color: #e92123;
    color: #e92123;
}
div#logo-carousel-free-210.logo-carousel-free .sp-lc-logo {
    border: 0;
	padding:0 15px;
}
.sp-lc-button-next, .sp-lc-button-prev{display:none !important;}
#logo-carousel-free-210.sp-lc-container .sp-logo-carousel{padding-top:10px !important;}
#footer{
	background:url("https://wondermarbleweb.com/dev/wp-content/uploads/2026/01/marble-texture.webp") repeat center;
}

@media (min-width: 768px){
.slider-wrapper{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}
}
.slider-wrapper > div{
    height: 100%;
}

@media (max-width: 767px){
    #site-navigation{
        position: static;
    }
	.top-social{display:none;}
	.top-social.mobile{display:inline-block;}
	.primary-navigation{margin-left:0;}
	
	.ytplayer-player{
        position: static !important;
        max-height: inherit !important;
        height: auto !important;
        min-height: 240px;
        width: 100% !important;
    }
    #header[data-transparent="true"] + .fullscreen.mobile-height{
        top: 0;
        /*height: 300px;*/
        padding: 0;
        min-height: inherit;
        position: relative;
        margin: 0;
    }
    .ytplayer-container{
        transform: scale(1);
                position: static;
    }
    .youtube-background{
        width: 100%;
    }
    .top-social a img{
        filter: brightness(0);
    }
}