/*
 Theme Name:   Pubzinne Child Theme
 Theme URI:    http://pubzinne.axiomthemes.com/
 Description:  Pubzinne Child Theme
 Author:       AxiomThemes
 Author URI:   http://axiomthemes.com/
 Template:     pubzinne
 Version:      1.0
 Tags:         flexible-header, custom-background, custom-colors, custom-header, custom-menu, featured-image-header, featured-images, full-width-template, microformats, post-formats, theme-options, threaded-comments, translation-ready
 Text Domain:  pubzinne
*/


/* =Theme customization starts here
-------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

:root {
    --combes-primary: #F5EE2E;
    --combes-secondary: #FF5714;
    /*#DA3E52;*/
    --combes-light: #d4d2d5;
    --combes-dark: #283F3B;
    --combes-darkest: #0f1615;
}

body {
    scroll-behavior: smooth;
	overflow-x: hidden;
    font-family: "Poppins";
}

::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--combes-secondary);
}

::-webkit-scrollbar-thumb {
    background: var(--combes-primary);
    border-radius: 50px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
}

body .page_content_wrap {
    padding-top: 0;
    padding-bottom: 0;
}

.content_wrap,
.content_container {
    width: 100%;
}

body .page_content_wrap {
    margin-top: 100px;
}

@media (max-width: 479px) {

    body .content_wrap,
    body .content_container {
        width: 100% !important;
    }
}

@media (max-width: 767px) {

    body .content_wrap,
    body .content_container {
        width: 100% !important;
    }
}

@media (max-width: 1023px) {

    body .content_wrap,
    body .content_container {
        width: 100% !important;
    }
}

@media (max-width: 1279px) {

    body .content_wrap,
    body .content_container {
        width: 100% !important;
    }
}

@media (max-width: 1439px) {

    body .content_wrap,
    body .content_container {
        width: 100% !important;
    }
}

.content_wrap,
.content_container {
    max-width: 100%;
    margin: 0 auto;
}

.navbar-top {
    border-bottom: 3px solid var(--combes-primary) !important;
    width: 100vw;
    height: calc(100px + 1rem);
    position: fixed;
    z-index: 99999;
    top: 0rem;
    transition: height .3s ease !important;
}

.navbar-top.scrolled {
    height: 100px;
}

body.admin-bar .navbar-top {
    top: 32px;
}

body .trx_addons_scroll_to_top {
    border-radius: 50%;
}

/* @media (min-width: 768px) {
    .body_wrap {
        margin-top: 100px;
    }
} */

.navbar-top:not(.mobile) .sc_layouts_item {
    transition: margin-top .3s ease,
        margin-bottom .3s ease;
}

.navbar-top.scrolled .sc_layouts_item {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

.navbar-top .sc_layouts_logo img.logo_image {
    transition: transform .4s ease;
}

.navbar-top.scrolled .sc_layouts_logo img.logo_image {
    transform: scale(.8);
}

.navbar-top:not(.scrolled) .sc_layouts_logo:hover img.logo_image {
    transform: scale(1.02);
}

.navbar-top.scrolled .sc_layouts_logo:hover img.logo_image {
    transform: scale(.82);
}

.nav-contact-button .elementor-button-link {
    font-family: "DINCondensed", sans-serif;
    font-weight: 600;
    font-size: 1.2rem;
    background-color: transparent;
    border-radius: 5px;
    transition: all .2s ease;
}

.nav-contact-button .elementor-button-link .elementor-button-text,
.nav-contact-button .elementor-button-link .elementor-button-icon {
    color: #fff;
    transition: all .15s ease;
}

.nav-contact-button .elementor-button-link .elementor-button-icon svg {
    fill: #fff;
    transition: all .15s ease;
}

.nav-contact-button:hover .elementor-button-link {
    background-color: var(--combes-primary);
}

.nav-contact-button:hover .elementor-button-link .elementor-button-text,
.nav-contact-button:hover .elementor-button-link .elementor-button-icon {
    color: var(--combes-dark);
}

.nav-contact-button:hover .elementor-button-link .elementor-button-icon svg {
    fill: var(--combes-dark);
}

.scheme_dark .sc_layouts_menu_nav>li ul {
    min-width: 100%;
    background-color: var(--combes-darkest);
    border-bottom: 3px solid var(--combes-primary);
}

.scheme_dark .sc_layouts_menu_nav>li+li:before {
    background-color: var(--combes-primary);
    ;
}

.scheme_default.footer_wrap h1,
.scheme_default.footer_wrap h2,
.scheme_default.footer_wrap h3,
.scheme_default.footer_wrap h4,
.scheme_default.footer_wrap h5,
.scheme_default.footer_wrap h6,
.scheme_default.footer_wrap h1 a,
.scheme_default.footer_wrap h2 a,
.scheme_default.footer_wrap h3 a,
.scheme_default.footer_wrap h4 a,
.scheme_default.footer_wrap h5 a,
.scheme_default.footer_wrap h6 a,
.footer_wrap .scheme_default.vc_row h1,
.footer_wrap .scheme_default.vc_row h2,
.footer_wrap .scheme_default.vc_row h3,
.footer_wrap .scheme_default.vc_row h4,
.footer_wrap .scheme_default.vc_row h5,
.footer_wrap .scheme_default.vc_row h6,
.footer_wrap .scheme_default.vc_row h1 a,
.footer_wrap .scheme_default.vc_row h2 a,
.footer_wrap .scheme_default.vc_row h3 a,
.footer_wrap .scheme_default.vc_row h4 a,
.footer_wrap .scheme_default.vc_row h5 a,
.footer_wrap .scheme_default.vc_row h6 a {
    color: #ffffff;
}

body .numbers {
    text-align: center;
}

/* WHO HEADER */
.combes-who-header {
    position: relative;

}

@keyframes moveA {

    0%,
    100% {
        top: 50%;
    }

    50% {
        top: 49%;
    }
}

@keyframes moveB {

    0%,
    100% {
        top: 25%;
    }

    50% {
        top: 22%;
    }
}

@keyframes moveC {

    0%,
    100% {
        top: 75%;
    }

    50% {
        top: 77%;
    }
}

.combes-who-header .img-A,
.combes-who-header .img-B,
.combes-who-header .img-C {
    position: absolute;
    width: 100%;
    height: 100%;
}

.combes-who-header .img-A img,
.combes-who-header .img-B img,
.combes-who-header .img-C img {
    object-fit: cover;
    object-position: center;
}

.combes-who-header .img-A img {
    position: absolute;
    width: 60%;
    height: 60%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    animation: moveA 3s ease-in-out infinite;
}

.combes-who-header .img-B img {
    position: absolute;
    width: 25%;
    height: 30%;
    top: 25%;
    left: 25%;
    transform: translate(-50%, -50%);
    z-index: 2;
    animation: moveB 4s ease-in-out infinite;
}

.combes-who-header .img-C img {
    position: absolute;
    width: 15%;
    height: 35%;
    top: 75%;
    left: 65%;
    transform: translate(-50%, -50%);
    z-index: 3;
    animation: moveC 4.5s ease-in-out infinite;
}

@keyframes moveD {
    0% {
        top: 0;
    }

    33.33% {
        top: .5rem;
    }

    100% {
        top: 0;
    }
}

.combes-bottom-cta {
    position: relative;
}

.combes-bottom-cta svg {
    position: absolute;
    top: 0;
    left: 0;
    transform: translate(-50%, 0%);
    animation: moveD 3s ease infinite;
}


/* FOOTER BUTTON */
.footer-button .elementor-button-link {
    font-family: "DINCondensed", sans-serif;
    font-weight: 600;
    font-size: 1.2rem;
    background-color: var(--combes-primary);
    border-radius: 5px;
    transition: all .2s ease;
}

.footer-button .elementor-button-link .elementor-button-text,
.footer-button .elementor-button-link .elementor-button-icon {
    color: var(--combes-dark);
    transition: all .15s ease;
}

.footer-button .elementor-button-link .elementor-button-icon svg {
    fill: var(--combes-dark);
    transition: all .15s ease;
}

.footer-button:hover .elementor-button-link {
    background-color: var(--combes-secondary);
}

.footer-button:hover .elementor-button-link .elementor-button-text,
.footer-button:hover .elementor-button-link .elementor-button-icon {
    color: #ffffff;
}

.footer-button:hover .elementor-button-link .elementor-button-icon svg {
    fill: #ffffff;
}

/* HELPER */
.color-accent {
    color: #FF5714 !important;
}

html body .contact-cta-bottom h2 {
    width: 80%;
    margin-left: auto;
    margin-right: auto;

}
html body .d-none {
    display: none !important;
}


/* .parallax-bg {
    position: relative;
    overflow: hidden;
    background-attachment: fixed !important;
    background-size: cover !important;
    background-position: center !important;
} */
.parallax-bg {
    position: relative;
    background-attachment: fixed;
    background-size: cover;
    background-position: center bottom !important;
  }
  
  @media (max-width: 1024px) {
    .parallax-bg {
      background-attachment: scroll;
    }
  }
  
  body .onpage-right {
      position: relative;
    }
    body .onpage-right .right-img img {
        position: fixed;
        bottom: 0;
        right: 0;

    animation: float 4s ease-in-out infinite;
    }
    @keyframes float {
        0% {
            transform: translateY(0);
        }
        50% {
            transform: translateY(1rem);
        }
        100% {
            transform: translateY(0);
        }
    }

/* Styles pour le header contenant la vidéo */
.video-header {
    position: relative;
    width: 100vw;
    height: calc(100dvh - 100px - 1rem);
    overflow: hidden;
    background-color: #000;
}

/* Styles pour la vidéo de fond */
.background-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
    opacity: 0; /* Démarre avec une opacité de 0 */
    animation: fadeIn 1s ease-in-out forwards; /* Animation pour passer à 1 en 2s */
}

/* Styles pour le masque */
.video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.35);
    z-index: 2;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
/* Styles pour le logo centré */
.center-logo {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 30vw;
    height: auto;
    z-index: 3;
    transition: transform 0.3s ease-out;
    transform-style: preserve-3d;
    opacity: 0; /* Démarre avec une opacité de 0 */
    animation: fadeIn 1s ease-in-out forwards; /* Animation pour passer à 1 */
    animation-delay: 1s; /* Délai d'1 seconde pour commencer après le logo */
}

@media screen and (orientation: portrait) {
    .video-header {
        /* height: calc(100vh - 100px - 1rem); */
    }
    
    .center-logo {
        top: 40%;
        width: 65vw;
        height: auto;
    }
}

.mouse {
    width: 25px; /* Largeur divisée par deux */
    height: 45px; /* Hauteur divisée par deux */
    border: 1.5px solid #fff; /* Bordure divisée par deux */
    border-radius: 30px; /* Ajuster le rayon pour maintenir la forme */
    position: absolute;
    bottom: 2rem; /* 2rem au-dessus du bas */
    left: 50%;
    transform: translateX(-50%);
    z-index: 3; /* Même z-index que le logo */
    opacity: 0; /* Démarre avec une opacité de 0 */
    animation: fadeIn 2s ease-in-out forwards; /* Animation pour passer à 1 en 2s */
    animation-delay: 1.5s; /* Délai d'1 seconde pour commencer après le logo */
}

.mouse::before {
    content: '';
    width: 6px; /* Largeur divisée par deux */
    height: 6px; /* Hauteur divisée par deux */
    position: absolute;
    top: 5px; /* Position ajustée par rapport à la nouvelle hauteur */
    left: 50%;
    transform: translateX(-50%);
    background-color: #fff; /* Fond blanc */
    border-radius: 50%;
    opacity: 1;
    animation: wheel 2s infinite;
    -webkit-animation: wheel 2s infinite;
}

@keyframes wheel {
    to {
        opacity: 0;
        top: 30px; /* Position de fin ajustée à la moitié de la hauteur initiale */
    }
}

@-webkit-keyframes wheel {
    to {
        opacity: 0;
        top: 30px; /* Position de fin ajustée à la moitié de la hauteur initiale */
    }
}

.elementor-element.brand-slider .elementor-image-carousel-wrapper .elementor-image-carousel .swiper-slide-image {
	filter: grayscale(1);
	opacity: .95;
	object-fit: contain;
	height: 125px;
	margin: auto;
	transition: filter .3s ease, opacity .3s ease;
}
.elementor-element.brand-slider .elementor-image-carousel-wrapper .elementor-image-carousel .swiper-slide-image:hover {
	filter: grayscale(0);
	opacity: 1;
}