/*
Theme Name: Big Man Show
Version: 1.0
Author: Y.C
Author URI: http://madadim.co.il
Text Domain: arbel-child
Template: arbel
*/

/*-------Fonts-------*/

.font-Jomhuria {
    font-family: 'Jomhuria', serif;
}

/*STYLES
---------------------------------------*/

.row-style-1 {
    background: linear-gradient(179.45deg, #482767 0.48%, #191220 37.73%, #180E23 103.27%);
}
.row-style-2 {
    background: linear-gradient(179.59deg, rgba(24, 15, 36, 0.2) 47.94%, rgba(21, 16, 22, 0) 109.67%);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}
.row-style-3 {
    background: conic-gradient(from 127.22deg at 34.95% 14.43%, #1F1327 0deg, #5E3789 360deg);
}
.row-style-4 {
    background: conic-gradient(from 24.22deg at 72.36% 50.03%, #16091E 0deg, #251736 360deg);
}
.row-style-5 {
    background: linear-gradient(358.86deg, #130525 35.52%, rgba(25, 8, 31, 0.46) 99.03%);
}
.row-style-6 {
    background: conic-gradient(from -41.83deg at 49.01% 54.92%, #180E23 0deg, #5E3789 360deg);
}
.box-style-1 {
    background: linear-gradient(11.91deg, rgba(25, 9, 31, 0.47) 22%, rgba(73, 35, 73, 0.73) 53%, #CC8CFF 134.47%);
}
.box-style-2 {
    background: linear-gradient(90deg, #130525 0%, rgba(219, 174, 255, 0.71) 49%, rgba(219, 174, 255, 0.71) 51%, #251736 100%);
    /* background: linear-gradient(90deg, #130525 0%, rgba(219, 174, 255, 0.71) 48.08%, #251736 100%); */

}
.white-img img {
    /* filter: brightness(0) invert(1); */
}

/*BODY
---------------------------------------*/
/* Smooth scrolling + scrollbar over content (does not take width) */
html,
body {
    /* scroll-behavior: smooth !important;
    overflow-y: overlay; */
    /* scrollbar-width: none; */
}
body::-webkit-scrollbar {
  /* width: 12px; */
}
body::-webkit-scrollbar-button {
    /* display: none; */
}
body::-webkit-scrollbar-thumb {
    /* background-color: #979797;
    border: 2px solid #fff;
    border-radius: 16px; */
}
body::-webkit-scrollbar-track {
    /* background-color: transparent; */
}

h4 {
	margin: 0 0 6px 0;
}
.big-man-title {
    font-family: 'Jomhuria', serif;
    color: #ffffff;
    font-size: 96px;
    font-weight: 400;
}
a.pojo-a11y-toolbar-link.pojo-a11y-toolbar-toggle-link {
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
}

/* Pojo Accessibility - custom floating toggle & internal close button */
.pojo-a11y-toolbar-toggle {
    display: none !important; /* Hide original toggle wrapper, we add our own button */
}

.pojo-a11y-custom-toggle {
    position: fixed;
    left: 20px;
    bottom: 20px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: #0073e6;
    color: #ffffff;
    border: none;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 99999;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}

.pojo-a11y-custom-toggle svg {
    width: 24px;
    height: 24px;
}

.pojo-a11y-toolbar-inner {
    position: relative;
}

.pojo-a11y-toolbar-close {
    position: absolute;
    left: 15px;
    top: 6px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: none;
    background: transparent;
    color: #000000;
    font-size: 30px;
    line-height: 1;
    cursor: pointer;
}

.pojo-a11y-toolbar-close:focus {
    outline: 2px solid #ffffff;
    outline-offset: 2px;
}
/*HOME PAGE
---------------------------------------*/

.home-slider {
	position: relative;
    height: 400px;
    max-width: 1600px;
    margin: auto;
}

.no-tabs .md-tabs-links {
    display: none;
}

/*WOO PRODUCT PAGE
---------------------------------------*/


/*CONTACT FORM
---------------------------------------*/

.wpcf7-form, .main-contact-form {
    float: left;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.main-contact-form p {
    width: 100%;
    max-width: 730px;
}

.wpcf7-form-control-wrap {
	float: left;
	width: 100%;
	max-width: 730px;
}

.wpcf7-form-control-wrap input, .wpcf7-form-control-wrap select {
    width: 100%;
    background-color: transparent;
    color: #ffffff;
    border: 0;
    border-bottom: 1px solid #F0C2F4E0;
    line-height: 40px;
    font-size: 26px;
    margin-top: 5px;
    padding-bottom: 10px;
}
.wpcf7-form-control-wrap input::placeholder,
.wpcf7-form-control-wrap select::placeholder,
.wpcf7-form-control-wrap textarea::placeholder {
    font-size: 26px;
	color: #7D6793;
}
.wpcf7-form-control-wrap textarea {
	width: 100%;
    height: 200px;
	background-color: transparent;
    color: #ffffff;
    border: 0;
	border-bottom: 1px solid #F0C2F4E0;
	line-height: 40px;
	font-size: 20px;
	margin: 0;
}
.wpcf7-form label {
    float: left;
    width: 100%;
    font-size: 26px;
    margin-bottom: 30px;
}
.wpcf7-acceptance input[type="checkbox"] {
    float: left;
    width: 26px;
    height: 26px;
}
.wpcf7-acceptance a {
    color: #ffffff;
}
.wpcf7-form .submit-container input {
    width: 360px;
    height: 66px;
    font-size: 26px;
    color: #ffffff;
    border: 2px solid #CC8CFF;
    border-radius: 4px;
    background-color: #19081F75;
    transition: all 0.3s ease;
}
.wpcf7-form .submit-container input:disabled {
    color: #ffffff42;
    border: 2px solid #cb8cff36;
    background-color: #19081F75!important;
}
.wpcf7-spinner {
    position: absolute;
}

/*FAST CONTACT
---------------------------------------*/

.fast-contact .wpcf7-form-control-wrap {
    float: right;
    width: 33%;
}

.wpcf7-form-control-wrap.mailpoetsignup {
    width: 100%;
}

.fast-contact .wpcf7-form-control-wrap input {
    display: block;
    width: 90%;
    font-size: 20px;
    text-align: center;
    margin: auto;
    border: 0;
    border-bottom: 1px solid #dddddd;
    outline: 0;
}

.fast-contact .wpcf7-mailpoetsignup {
    display: block;
    font-size: 14px;
    text-align: right;
    margin: 5px 20px;
    border: 0;
    outline: 0;
}

.fast-contact .wpcf7-mailpoetsignup input {
    float: right;
    width: auto;
    margin: 0 0 0 5px;
}

.fast-contact input[type="submit"] {
    display: block;
    margin: 5px auto;
    padding: 0 10px;
    font-size: 26px;
    line-height: 40px;
    width: 90%;
    text-align: center;
    border: 0;
    background-color: #6fb51a;
    color: white;
    outline: 0;
    cursor: pointer;
}

.fast-contact-submit {
    position: relative;
    float: left;
    width: 100%;
}

.fast-contact .ajax-loader {
    position: absolute;
    top: 17px;
    right: -10px;
}

.wpcf7-response-output {
    float: right;
    width: 90%;
    margin: 5px 5%!important;
    text-align: center;
    border: 2px solid var(--header_hover_select_background_color)!important
}

.fast-contact .wpcf7-not-valid-tip {
    text-align: center;
}


/*MOBILE CONTACT
----------------------*/

.mobile-contact-open i {
    background-color: #0060b3;
	color: white;
}
.mobile-contact-call i {
    background-color: #0060b3;
	color: white;
}

.mobile-contact-whatsapp {
    background-color: #0060b3;
	color: white;
}

.mobile-contact-waze {
    background-color: #0060b3;
	color: white;
}

.mobile-contact-newsletter {
    background-color: #0060b3;
	color: white;
}

.mobile-contact-newsletter i {
	background-color: #0060b3;
	color: white;
}

/*MAGIC DUST EFFECT
---------------------------------------*/

.magic-dust-particle {
    position: fixed;
    pointer-events: none;
    z-index: 9999;
    border-radius: 50%;
    background: radial-gradient(circle, #FFD700 0%, #FFA500 50%, rgba(255, 215, 0, 0.3) 100%);
    box-shadow: 0 0 6px rgba(255, 215, 0, 0.8), 
                0 0 12px rgba(255, 215, 0, 0.4),
                inset 0 0 2px rgba(255, 255, 255, 0.5);
    will-change: transform, opacity;
    transform-origin: center;
}

/*ELEMENTS
---------------------------------------*/

.ele-1 {
    position: absolute;
    top: -85px;
    left: 40px;
    width: 777px;
    height: 790px;
    background-image: url(images/e48d1ac4218dd2c57ff6323263f46863c3d788d3.webp);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
@keyframes ele2-breathe {
    0%, 100% { transform: rotate(9deg) scale(1); }
    50% { transform: rotate(9deg) scale(1.06); }
}

.ele-2 {
    position: absolute;
    top: 66px;
    left: calc(50% - 756px);
    width: 630px;
    height: 400px;
    background-image: url(images/f5bffdb3abe5c0e96c46f40074667338472d4702.webp);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    transform-origin: center;
    animation: ele2-breathe 3s ease-in-out infinite;
    z-index: 9;
}
.ele-breathe {
    animation: ele2-breathe 3s ease-in-out infinite;
}
.ele-3 {
    position: absolute;
    top: 46px;
    left: 612px;
    width: 220px;
    height: 220px;
    background-image: url(images/gold-crumbs-2.webp);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    /* transform: rotate(9deg); */
}
.ele-4 {
    position: absolute;
    top: 254px;
    left: 6px;
    width: 220px;
    height: 220px;
    background-image: url(images/gold-crumbs.webp);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    /* transform: rotate(256deg); */
}
.ele-5 {
    float: left;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, rgba(48, 0, 58, 0.118) 0%, rgba(240, 194, 244, 0.59) 37.5%, rgba(240, 194, 244, 0.59) 68.1%, rgba(48, 0, 58, 0.1239) 100%);
}
.ele-7 {
    position: absolute;
    top: 0;
    left: calc(50% + 310px);
    width: 200px;
    height: 200px;
    background-image: url(images/gold-crumbs-3.webp);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
.ele-8 {
    position: absolute;
    top: -70px;
    left: calc(50% + 240px);
    width: 220px;
    height: 220px;
    background-image: url(images/gold-crumbs-4.webp);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    /* transform: rotate(200deg); */
}
.ele-9 {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 600px;
    height: 600px;
    background-image: url(images/a5d2102e7468fadc57542c337919ccbca415cd22.webp);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
.ele-10 {
    position: absolute;
    bottom: 180px;
    left: 190px;
    width: 220px;
    height: 220px;
    background-image: url(images/09d5dd26b3ae0b3dcc74cddb556e88cb0cc23ca6.webp);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    transform: rotate(220deg);
}

/*RESPONSIVE
---------------------------------------*/

/* Breakpoint: מתחת ל-1440px */
@media screen and (max-width: 1440px) {

}

@media screen and (max-width: 1270px) {
    .ele-1 {
        top: 0;
        left: 0;
        width: 500px;
        height: 500px;
    }
    .ele-2 {
        top: 31px;
        left: 84px;
        width: 367px;
        height: 360px;
    }
    .ele-3 {
        top: 75px;
        left: 380px;
        width: 180px;
        height: 180px;
    }
    .ele-4 {
        top: 206px;
        left: -70px;
        width: 180px;
        height: 180px;
    }
    .big-man-title {
        font-size: 62px;
    }
}

@media screen and (max-width: 950px) {

    .ele-1 {
        top: 0;
        left: 0;
        width: 260px;
        height: 260px;
    }
    .ele-2 {
        top: 31px;
        left: 44px;
        width: 190px;
        height: 160px;
    }
    .ele-3 {
        top: 30px;
        left: 206px;
        width: 80px;
        height: 80px;
    }
    .ele-4 {
        top: 110px;
        left: -10px;
        width: 80px;
        height: 80px;
    }
    .ele-7 {
        top: -10px;
        left: calc(50% + 210px);
        width: 100px;
        height: 100px;
    }
    .ele-9 {
        bottom: 0;
        left: 5%;
        width: 90%;
        height: 400px;
        background-position: bottom;
    }
    .ele-10 {
        bottom: 120px;
        left: 32%;
        width: 140px;
        height: 140px;
    }
    .wpcf7-form label {
        font-size: 18px;
        margin-bottom: 10px;
    }
    .wpcf7-form-control-wrap input::placeholder,
    .wpcf7-form-control-wrap select::placeholder,
    .wpcf7-form-control-wrap textarea::placeholder {
        font-size: 18px;
    }
    .wpcf7-form-control-wrap textarea {
        height: 100px;
    }
    .wpcf7-form .submit-container input {
        width: 260px;
        height: 46px;
        font-size: 20px;
    }
    .customize-support #pojo-a11y-toolbar {
        top: 116px !important
    }
    #pojo-a11y-toolbar {
        z-index: 999999;
    }
    a.pojo-a11y-toolbar-link.pojo-a11y-toolbar-toggle-link {
        width: 40px;
        height: 40px;
        padding: 7px !important;
    }
    a.pojo-a11y-toolbar-link.pojo-a11y-toolbar-toggle-link svg {
        width: 26px;
        height: 26px;
    }
    .pojo-a11y-custom-toggle {
        width: 40px;
        height: 40px;
        left: 10px;
        bottom: 10px;
    }
    .pojo-a11y-custom-toggle svg {
        width: 20px;
        height: 20px;
    }
    /* Big carousel: horizontal scroll under 950px, 70vw width per slide */
    .big-carousel.e-con {
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
        max-width: 100vw !important;
    }
    .big-carousel > .e-con-inner {
        display: flex !important;
        flex-wrap: nowrap !important;
        flex-direction: row !important;
        gap: 16px;
        width: max-content !important;
        max-width: none !important;
        min-height: 0;
        padding: 0 16px;
    }
    .big-carousel > .e-con-inner > .elementor-element {
        flex: 0 0 70vw !important;
        width: 70vw !important;
        min-width: 70vw !important;
        max-width: 70vw !important;
        scroll-snap-align: start;
        scroll-snap-stop: normal;
    }
    .big-carousel .elementor-custom-embed-image-overlay,
    .big-carousel .e-hosted-video {
        width: 100% !important;
        height: 100% !important;
    }
    /* .big-carousel img.attachment-full {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 1191 / 819;
        object-fit: cover;
    } */

}

@media screen and (max-width: 600px) {

    .ele-1 {
        top: 0;
        left: calc(50% - 130px);
        width: 260px;
        height: 260px;
    }
    .ele-2 {
        top: 31px;
        left: calc(50% - 85px);
        width: 190px;
        height: 160px;
    }
    .ele-3 {
        top: 30px;
        left: calc(50% + 90px);
        width: 80px;
        height: 80px;
    }
    .ele-4 {
        top: 110px;
        left: calc(50% - 160px);
        width: 80px;
        height: 80px;
    }
    .big-man-title {
        font-size: 50px;
    }
}