/**
Theme Name: Vokeo Theme
Author: Visual Code Agency
Author URI: https://visualcode.agency/
Description: Designed to support a bold, modern digital marketing identity with strong visual impact, clean typography, and flexible content layouts. Built for performance, scalability, and easy long-term maintenance.
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: vokeo-theme
Template: astra
*/

/* Off canvas */
#off-canvas .uael-flyout-wrapper .uael-side {
    width: 50%;
}
#off-canvas .uael-flyout-content.push {
    display: flex;
    flex-direction: column;
    justify-content: center;
}
#off-canvas .uael-flyout-wrapper .uael-flyout-close {
    top: 20px;
    right: 44px;
    margin: 0;
}
#off-canvas .uael-flyout-overlay,
#mobile-menu-icon .uael-flyout-overlay {
	backdrop-filter: blur(4px);
    background: transparent;
}
/* Changes on blur */
body #vokeo-logo,
body #vokeo-hero h1 {
    opacity: 1;
    transition: opacity .3s ease-in;
}
body.flyout_open #vokeo-logo,
body.flyout_open #vokeo-hero h1 {
    opacity: 0;
    transition: opacity .5s ease-in .1s;
}
/* Mobile menu */
#mobile-menu-icon .uael-flyout-close {
    display: none;
}
#mobile-menu-icon {
    position: absolute;
    bottom: -496px;
    right: 10px;
}
#mobile-menu-icon .uael-nav-menu-icon {
    display: none;
}
#mobile-menu-icon .uael-side {
    right: -320px;
}
.menu-toggler {
    width: 54px;
    height: 255px;
    display: block;
    position: absolute;
    left: -54px;
    top: 464px;
    background-image: url('/wp-content/uploads/2026/01/navigation-1.svg');
    background-repeat: no-repeat;
    background-position: 0;
    background-size: 100%;
    cursor:pointer;
    z-index:9999;
    -webkit-tap-highlight-color: transparent;
}
#mobile-menu-icon.is_open .menu-toggler {
    background-image: url('/wp-content/uploads/2026/02/close-nav.svg');
    opacity: 0.7;
}
#mobile-menu-icon .uael-side .uael-flyout-content {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: flex-end;
    padding-bottom: 70px;
}
#mobile-menu-icon .uael-side .menu-item a.uael-menu-item {
    text-shadow: 0 4px 4px rgba(0, 0, 0, .25);
}
#mobile-menu-icon .uael-side .off-canvas-logo {
    display: block;
    width: 100%;
    max-width: 213px;
    margin-left: -23px;
    margin-bottom: 20px;
}
#mobile-menu-icon .uael-side .off-canvas-logo img {
    width: 100%;
    -webkit-filter: drop-shadow(0 0 16px rgba(0,0,0,0.52));
    filter: drop-shadow(0 0 16px rgba(0,0,0,0.52));
}

/* Lists */
.wp-singular.page-template-default .elementor-widget-text-editor ul {
    margin-left: 30px;
}
.wp-singular.page-template-default .elementor-widget-text-editor li {
    list-style-type: none;
    position: relative;    /* It's needed for setting position to absolute in the next rule. */
}

.wp-singular.page-template-default .elementor-widget-text-editor li::before {
    content: '•';
    position: absolute;
	font-family: "Poppins", Sans-serif;
    left: -19px;          /* Adjust this value so that it appears where you want. */
    font-size: 20px;      /* Adjust this value so that it appears what size you want. */
}
/* Contact form */
#contactez-moi #name-1 .forminator-col.forminator-col-md-6,
#contactez-moi #name-2 .forminator-col.forminator-col-md-6 {
    width: 100%;
    max-width: 100%;
    -ms-flex-preferred-size: 100%;
    flex-basis: 100%;
}
#contactez-moi .forminator-ui.forminator-custom-form[data-design=material] .forminator-input--wrap:after {
    height: 1px;
}
#contactez-moi .forminator-ui.forminator-custom-form[data-design=material] .forminator-floating--input {
    -webkit-transform: translateY(var(--forminator-floating-label-translate, 36px));
    transform: translateY(var(--forminator-floating-label-translate, 36px));
}
#contactez-moi form.forminator-design--material .forminator-is_active .forminator-label[class*="forminator-floating-"] {
    color: #4F4347;
    -webkit-transform: translateY(var(--forminator-floating-label-translate, 0px));
    transform: translateY(var(--forminator-floating-label-translate, 0px));
}
#contactez-moi form.forminator-design--material .forminator-is_filled .forminator-label[class*="forminator-floating-"] {
    color: #4F4347;
    -webkit-transform: translateY(var(--forminator-floating-label-translate, 0px));
    transform: translateY(var(--forminator-floating-label-translate, 0px));
}
#contactez-moi form.forminator-design--material .forminator-textarea,
#contactez-moi form.forminator-design--material .forminator-is_active .forminator-textarea,
#contactez-moi form.forminator-design--material .forminator-is_filled .forminator-textarea,
#contactez-moi form.forminator-design--material .forminator-is_hover .forminator-textarea {
	padding-left: 0;
	border-width: 1px;
    border-top: 0;
    border-left: 0;
    border-right: 0;
}
#contactez-moi form.forminator-design--material .forminator-is_active .forminator-textarea,
#contactez-moi form.forminator-design--material .forminator-is_hover .forminator-textarea {
	border-color: #ec1c4e;
}
#contactez-moi form.forminator-design--material .forminator-is_active .forminator-textarea--wrap:after,
#contactez-moi form.forminator-design--material .forminator-is_filled .forminator-textarea--wrap:after,
#contactez-moi form.forminator-design--material .forminator-is_hover .forminator-textarea--wrap:after {
	content: none;
}
#contactez-moi form.forminator-design--material .forminator-field-textarea .forminator-label[class*="forminator-floating-"] {
	padding-left: 0;
}
#contactez-moi form.forminator-design--material .forminator-field-textarea .forminator-is_filled .forminator-label[class*="forminator-floating-"],
#contactez-moi form.forminator-design--material .forminator-field-textarea .forminator-is_active .forminator-label[class*="forminator-floating-"] {
	transform: translateY(calc(-100% + 30px));
}
#contactez-moi form[data-grid="custom"] .forminator-row.forminator-row-last .forminator-field {
	text-align: end;
}
#contactez-moi form.forminator-ui.forminator-design--material .forminator-button-submit {
	margin-top: 16px;
    padding: 13px 32px 13px 30px;
    line-height: 21px;
    letter-spacing: 1.6px;
    border: 2px solid #ec1c4e;
    border-radius: 40px;
}
/* Video bg */
.elementor #home-video-bg {
	/*	background-size: 1200px; */
	background-size: contain;
    background-repeat: no-repeat;
}
.elementor #home-video-bg .elementor-background-video-hosted {
	object-fit: contain;
    max-height: 100%;
}
.elementor #inner-video-bg {
    background-size: contain;
    background-repeat: no-repeat;
    background-size: auto 694px;
    background-position: center -50px;
}
.elementor #inner-video-bg .elementor-background-video-hosted {
    height: 694px!important;
	inset-block-start: 0;
    inset-inline-start: 0;
    transform: translate(0, -50px);
    object-fit: contain;
    object-position: center;
}
/* Homepage */
#home-video-bg .elementor-background-video-embed {
    max-height: 680px;
}
/* Responsive */
@media screen and (max-width: 782px) {
    #contactez-moi form.forminator-ui.forminator-custom-form[data-design=material] .forminator-button {
        margin: 0 0 10px 0;
        width: auto;
    }
	#contactez-moi form[data-grid="custom"] .forminator-row.forminator-row-last .forminator-field {
		text-align: center;
	}
	.elementor #inner-video-bg {
		background-position: center 10%;
        background-size: auto 370px;
	}
	.elementor #inner-video-bg .elementor-background-video-hosted {
		height: 370px !important;
		transform: translate(0, -5%);
		object-fit: cover;
		object-position: center;
	}
}
@media screen and (max-width: 767px) {
	/* Off canvas */
	#off-canvas .uael-flyout-wrapper .uael-side {
		width: 80%;
	}
	/* Video bg */
	.elementor #home-video-bg {
		background-size: auto 80%;
	}
	.elementor #home-video-bg .elementor-background-video-hosted {
		object-fit: contain;
		max-height: 80%;
		object-fit: cover;
	}
	/* Footer */
	#footer-info .hfe-nav-menu > li {
    	display: flex;
    	justify-content: center;
	}
    /* Communication slider */
    #comm-slider .elementor-widget-container {
        min-height: 235px;
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        justify-content: center;
    }
    #comm-slider button.slick-arrow {
        width: 30px;
        height: 54px;
        border-radius: 0;
        background-image: url('/wp-content/uploads/2026/02/ico-left.svg');
        background-repeat: no-repeat;
        background-size: 30px 54px;
    }
    #comm-slider button.slick-prev.slick-arrow {
        left: -37px;
    }
    #comm-slider button.slick-next.slick-arrow {
        right: -37px;
        transform: rotate(180deg) translateY(50%);
    }
    #comm-slider button.slick-arrow i {
        display: none;
    }
    #comm-slider .slick-slider .slick-track {
        display: flex;
        align-items: center;
    }
    #comm-slider .uael-post__footer {
        margin: 0;
    }
    /* Forminator */
    #contactez-moi .forminator-ui.forminator-custom-form[data-design=material] .forminator-floating--input,
    #contactez-moi form.forminator-design--material .forminator-field-textarea .forminator-label[class*="forminator-floating-"] {
        font-size: 15px;
        font-weight: 400;
    }
    #contactez-moi .forminator-ui.forminator-custom-form[data-design=material] .forminator-input,
    #contactez-moi .forminator-ui.forminator-custom-form[data-design=material] .forminator-input input,
    #contactez-moi .forminator-ui.forminator-custom-form[data-design=material] .forminator-textarea,
    #contactez-moi .forminator-ui.forminator-custom-form[data-design=material] .forminator-iti-input .iti__selected-dial-code {
        font-size: 24px;
        line-height: 35px;
    }
    #contactez-moi .forminator-ui.forminator-custom-form[data-design=material] .forminator-row:not(:last-child) {
        margin-bottom: 4px;
    }
    #contactez-moi .forminator-ui.forminator-custom-form[data-design=material] .forminator-input--wrap {
        padding-right: 40px;
    }
    #contactez-moi .forminator-ui.forminator-custom-form[data-design=material] .forminator-input {
        padding: 10px 0 0;
    }
    #contactez-moi .forminator-ui.forminator-custom-form[data-design=material] .forminator-textarea {
        min-height: 170px !important;
    }
    #contactez-moi .forminator-ui.forminator-custom-form[data-design=material] .forminator-row.forminator-row-last {
        margin-top: 22px;
    }
}
@media screen and (max-width: 767px) and (orientation: landscape) {
    .menu-toggler {
        top: 40px;
    }
}