/*
Theme Name: Artevo Child
Author: ThemesCamp
Author URI:  http://themeforest.net/user/themescamp
Theme URI: http://themeforest.net/user/themescamp/portfolio
Template: artevo
Description: This is child theme for artevo Theme.
Version: 1.0.0
License: GNU General Public License version 3.0
License URI: http://www.gnu.org/licenses/gpl-3.0.html
Text Domain: artevo-child
Tags: one-column, two-columns, right-sidebar,custom-colors,featured-images
*/

/* =Theme customization starts here
------------------------------------------------------------ */

/*-------------------------------------------  GENERAL -------------------------------------------*/
/*-------------------------------------------  GENERAL -------------------------------------------*/


/* Réduire la largeur de la barre de défilement */
::-webkit-scrollbar {
  width: 10px;
  background-color: #e5e5e5;
}

/* Arrondir les bords de la barre de défilement */
::-webkit-scrollbar-thumb {
    border-radius: 4px;
}

/* Foncer la couleur grise de la barre de défilement */
::-webkit-scrollbar-thumb {
    background-color: #555555;
}




/*------------------------------------------- END GENERAL -------------------------------------------*/
/*------------------------------------------- END GENERAL -------------------------------------------*/


/*------------------------------------------- COLOR -------------------------------------------*/
/*------------------------------------------- COLOR -------------------------------------------*/

h1 span, .homeSlider p span, span.gold{
  color: #C9B193 !important;
}

.form1 label, .white h3, .white h2, .taptap-by-bonfire ul li a{
  color: #fff !important;
}

h3, h2{
  color: #33393F !important;
}

.taptap-main-menu-button-two:before, .taptap-main-menu-button-two::after,.taptap-main-menu-button-two-middle::before, .taptap-main-wrapper{
  background-color: #33393F !important;
}

.taptap-menu-active .taptap-main-menu-button-two:before, .taptap-menu-active .taptap-main-menu-button-two::after, .taptap-menu-active .taptap-main-menu-button-two-middle::before{
  background-color: #fff !important;
}


/*------------------------------------------- END COLOR -------------------------------------------*/
/*------------------------------------------- END COLOR -------------------------------------------*/

/*------------------------------------------- FONT -------------------------------------------*/
/*------------------------------------------- FONT -------------------------------------------*/


 h1,h2,h3,h4,h5,h6, .homeSlider p, .strongPoint p, .taptap-by-bonfire ul li a{
   font-family: "Afacad" !important;
 }

span.small{
  font-size: 60%;
  padding-top: 10px;
  font-style: italic;
  letter-spacing: -1px;
}

.taptap-by-bonfire ul li a{
  font-size: 35px !important;
}

.taptap-by-bonfire li::marker{
  font-size: 0 !important;
}

.taptap-by-bonfire ul li a{
  line-height: 1.2;
}



/*------------------------------------------- END FONT -------------------------------------------*/
/*------------------------------------------- END FONT -------------------------------------------*/

/*------------------------------------------------ TITLE ------------------------------------------------*/
/*------------------------------------------------ TITLE ------------------------------------------------*/


h1{
  letter-spacing: -2px;
  font-weight: 400;
  font-size: calc(32px + 2vw) !important;
  line-height: 1 !important;
}

h2{
  letter-spacing: -2px;
  font-weight: 400 !important;
  font-size: calc(15px + 2vw) !important;
  line-height: 1.2 !important;
}

h3{
  letter-spacing: -1px;
  font-weight: 400;
  line-height: 1.2 !important;
  margin-top: 30px;
}

.serviceGrid2 h3, .strongPoint p{
  font-size: 28px !important;
  letter-spacing: -1px;
}


 .homeSlider p{
   font-size: calc(3vw + 42px) !important;
   line-height: 1;
   letter-spacing: -5px;
   text-shadow: 0 0px 25px rgb(0, 0, 0, 0.4);
   padding: 20px;
 }

 .heroSection2 h1{
   text-shadow: 0 0px 25px rgb(0, 0, 0, 0.5);
 }


/*------------------------------------------------ END TITLE ------------------------------------------------*/
/*------------------------------------------------ END TITLE ------------------------------------------------*/


/*------------------------------------------------ ELEMENT ------------------------------------------------*/
/*------------------------------------------------ ELEMENT ------------------------------------------------*/



p{
  margin-bottom: 20px !important;
}

.serviceGrid h2{
  transform: translateY(28vh) !important;
  -webkit-transform: translateY(28vh) !important;
  text-shadow: 0 0 25px rgb(0,0,0,0.3);
}

.serviceGrid .box-item:not(.active) h6{
  text-shadow: 0 0 25px rgb(0,0,0,0.5);
}

.serviceGrid .tcgelements-interactive-hero-box{
  display: flex;
  align-items: center;
  height: calc(100vh - 50px) !important;
  min-height: inherit !important;
}

.serviceGrid .box-item{
  width: 300px !important;
  height: 306px !important;
}


.serviceGrid2 .service{
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
}

.serviceGrid2 .service .elementor-image-box-content{
  position: absolute;
  bottom: 10px;
}

.serviceGrid2 .service .elementor-image-box-content p{
  height: 0;
  opacity: 0;
  transition: all ease 0.4s;
  -webkit-transition: all ease 0.4s;
  padding: 0 20px;
}

.serviceGrid2 .service:hover .elementor-image-box-content p{
  height: 100px;
  opacity: 1;
}

.serviceGrid2 .elementor-image-box-img{
  height: 400px;
  overflow: hidden;
}

.serviceGrid2 .elementor-image-box-img::after{
  content: "";
  position: absolute;
  width: 100%;
  height: 40%;
  background: #000000;
  background: linear-gradient(90deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%);
  background: -webkit-linear-gradient(90deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%);
  bottom: 0;
  left: 0;
  transition: all ease 0.4s;
  -webkit-transition: all ease 0.4s;
}

.serviceGrid2 .service:hover .elementor-image-box-img::after{
  height: 70%;
}

.serviceGrid2 img{
  height: 100% !important;
  object-fit: cover;
}


ul>li {
  list-style: outside none disc !important;
}

.loader-wrap .load-logo img {
  min-width: 250px !important;
  width: 18vw !important;
}

.strongPoints > .e-con-inner{
  align-items: stretch !important;
}

.strongPoint img{
  height: 80px !important;
  width: auto !important;
}

.elementor-custom-embed-play svg{
  height: 150px !important;
  width: 150px !important;
}

.tcgelements-accordion p{
  margin-bottom: 0 !important;
}

.home #smooth-content{
  padding-top: 0 !important;
}

.imgTranslate img{
  transform: translateY(60px);
  -webkit-transform: translateY(60px);
}

.elementor-slideshow__title{
  display: none !important;
}


/*------------------------------------------------ END ELEMENT ------------------------------------------------*/
/*------------------------------------------------ END ELEMENT ------------------------------------------------*/


/*------------------------------------------------ BUTTON ------------------------------------------------*/
/*------------------------------------------------ BUTTON ------------------------------------------------*/

.frm_button_submit{
  box-shadow: none;
  padding: 10px 30px !important;
  font-size: 16px !important;
  border-radius: 0 !important;
  background-color: #C9B193 !important;
  border-radius: 0;
  border: none !important;
}

.frm_button_submit:hover{
  background-color: #a38f75 !important;
}

/*-------- BUTTON 1 -----------*/

.button1{
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
}

/* 1) Base bouton */
.button1 .tcgelements-button{
  position: relative;
  align-items: center;
  z-index: 0;
  border-radius: 0;
  transition: border-radius .45s ease;
  font-size: 20px;
  display: flex !important;
  font-weight: 600 !important;
  font-family: 'Afacad' !important;
}

/* 2) Texte et icône au-dessus */
.button1 .tcgelements-button-text,
.button1 .tcgelements-button-icon{
  position: relative;
  z-index: 2;
}

/* 3) Zone icône */
.button1 .tcgelements-button-icon{
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.6em;
  height: auto;
  margin-left: .25rem;
  transform: translateY(2px);
  -webkit-transform: translateY(2px);
}

/* 4) PARALLÉLOGRAMME fin derrière l'icône - FIXÉ À DROITE */
.button1 .tcgelements-button-content-wrapper::before{
  content: "";
  position: absolute;
  top: 50%;
  right: 21px;                              /* ancré à droite */
  transform: translateY(-50%) skewX(-45deg); /* SEULEMENT centrage vertical */
  transform-origin: right center;            /* grandit depuis la droite */
  width: 40px;
  height: 50px;
  background: #C9B193;
  z-index: -1;
  transition: all .5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 5) Au survol : grandit vers la gauche en restant fixé à droite */
.button1 .tcgelements-button:hover .tcgelements-button-content-wrapper::before{
  width: calc(100% + 10px);
}

/* 6) Texte et icône en blanc au survol */
.button1 .tcgelements-button:hover .tcgelements-button-text,
.button1 .tcgelements-button:hover .tcgelements-button-icon i{
  color: #fff;
  transition: color .3s ease .15s;
}

/*-------------- END BUTTON 1 ------------*/


/*--------------- BUTTON 2 ---------------*/

.button2 a{
  background: none !important;
  color: #33393F !important;
  font-weight: 600;
  transition: all ease 0.3s !important;
  -webkit-transition: all ease 0.3s !important;
  padding: 20px 0 !important;
}

.button2 .tcgelements-button-text{
  text-decoration: underline;
}

.button2 a:hover{
  color: #C9B193 !important;
}

/*-------------- END BUTTON 2 ------------*/


/*------------------------------------------- END BUTTON -------------------------------------------*/
/*------------------------------------------- END BUTTON -------------------------------------------*/

/*------------------------------------------------ HEADER ------------------------------------------------*/
/*------------------------------------------------ HEADER ------------------------------------------------*/

header{
  position: fixed;
  top: 0;
  z-index: 9999;
  width: 100%;
}

.header{
  transition: transform .28s ease;
  will-change: transform;
  box-shadow: 0 0 10px 10px rgb(0, 0, 0, 0.04);
  -webkit-box-shadow: 0 0 10px 10px rgb(0, 0, 0, 0.04);
}

.header > .e-con-inner{
  max-width: 90vw !important;
}

.scroll_up header .header{
  transform: translateY(0) !important;
  -webkit-transform: translateY(0) !important;
}

.scroll_down header .header{
  transform: translateY(-110%) !important;
  -webkit-transform: translateY(-110%) !important;
}

.home:not(.scroll_up) .header{
  background: none !important;
  box-shadow: none;
  -webkit-box-shadow: none;
}

.home:not(.scroll_up) .header .menu-item:not(.current-menu-item) a{
  color: #fff !important;
}

.home:not(.scroll_up) .header .menu-item a:hover{
  color: #C9B193 !important;
}

.home:not(.scroll_up) header .darkLogo{
  display: none;
}

.home:not(.scroll_up) header .lightLogo{
  display: block !important;
}

.home .heroSection::after{
  position: absolute;
  content: "";
  width: 100%;
  height: 200px;
  background: #000000;
  background: linear-gradient(270deg, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 100%);
  background: -webkit-linear-gradient(270deg, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 100%);
  top: 0;
  left: 0;
}

.menu-wrapper ul li ul:not(.tcg-buga,.tcg-buga *){
  width: 300px !important;
}

.taptap-by-bonfire ul li:not(.current-menu-item) a{
  opacity: 0.6;
}


/*------------------------------------------------ END HEADER ------------------------------------------------*/
/*------------------------------------------------ END HEADER ------------------------------------------------*/


/*------------------------------------------------- FOOTER -----------------------------------------------*/
/*------------------------------------------------- FOOTER -----------------------------------------------*/



/*------------------------------------------------ END FOOTER  ------------------------------------------------*/
/*------------------------------------------------ END FOOTER ------------------------------------------------*/


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




/*------------------------------------------------ END  FORM ------------------------------------------------*/
/*------------------------------------------------ END  FORM ------------------------------------------------*/



/*------------------------------------------------  PAGE 2nd  ------------------------------------------------*/
/*------------------------------------------------  PAGE 2nd  ------------------------------------------------*/




/*------------------------------------------------- END PAGE 2nd -----------------------------------------------*/
/*------------------------------------------------- END PAGE 2nd -----------------------------------------------*/

/*------------------------------------------  BLOG -----------------------------------------------*/
/*-----------------------------------------  BLOG -----------------------------------------------*/





/*----------------------------------------------- END BLOG -----------------------------------------------*/
/*----------------------------------------------- END BLOG -----------------------------------------------*/


/*------------------------------------------------- SHOP-----------------------------------------------*/
/*------------------------------------------------- SHOP-----------------------------------------------*/




/*------------------------------------------------- END SHOP -----------------------------------------------*/
/*------------------------------------------------- END SHOP -----------------------------------------------*/

/*------------------------------------------------- 4K-----------------------------------------------*/
/*------------------------------------------------- 4K-----------------------------------------------*/




@media screen and (min-width: 1920px){


}



@media screen and (min-width: 2559px){

  .serviceGrid h6, .serviceGrid2 h3, .strongPoint p, .strongPoints3 h3, h3{
    font-size: 35px !important;
  }

  .strongPoints4 li{
    font-size: 30px !important;
  }

  .button1 .tcgelements-button-text, .button2 .tcgelements-button-text{
    font-size: 23px !important
  }

  .tcg-nav .menu-item a, .strongPoints3 p{
    font-size: 17px !important;
  }

  body{
    font-size: 17px !important;
  }

  .e-con{
    --container-max-width: 1800px !important;
  }

  .tcg-dynamic-slider .swiper-container{
    width: 1800px !important;
  }

  header .top-logo img{
    height: 90px !important;
  }

  .maskImg img{
    height: 540px !important;
  }

  .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
    max-width: 1800px;
  }

  .serviceGrid .box-item {
    width: 400px !important;
    height: 406px !important;
  }

  .h2Style{
    width: 1180px !important;
  }

  .serviceGrid2 .elementor-image-box-img {
    height: 500px;
  }

  .strongPoints3 img{
    width: 70% !important;
    height: 557px !important;
  }

  .cards img{
    height: 300px !important;
  }


}



/*------------------------------------------------- END 4K-----------------------------------------------*/
/*------------------------------------------------- END 4K-----------------------------------------------*/


/*------------------------------------------------- LAPTOP-----------------------------------------------*/
/*------------------------------------------------- LAPTOP-----------------------------------------------*/


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

  .header > .e-con-inner {
    max-width: 98vw !important;
  }

  .lightLogo, .darkLogo{
    padding: 0 30px !important;
  }

  header .menu-item{
    margin-right: 10px !important;
  }

  .serviceGrid h2{
    transform: translateY(26vh) !important;
    -webkit-transform: translateY(26vh) !important;
  }

}






/*------------------------------------------------- END LAPTOP -----------------------------------------------*/
/*------------------------------------------------- END LAPTOP -----------------------------------------------*/

/*------------------------------------------------- TABLET-----------------------------------------------*/
/*------------------------------------------------- TABLET-----------------------------------------------*/




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

  h2{
    font-size: calc(22px + 2vw) !important;
  }

  h3{
    font-size: 24px !important;
  }

  .strongPoint p{
    font-size: 17px !important;
  }

  h1{
    letter-spacing: -2px;
  }

  .homeSlider p{
    letter-spacing: -3px;
  }

  .header > div{
    max-width: 90vw !important;
  }

  .taptap-menu-button-wrapper {
    right: 35px;
  }

  .strongPoint{
    padding: 20px !important;
  }

  .strongPoint img {
    height: 60px !important;
  }

  .imgTranslate img{
    transform: none;
    -webkit-transform: none;
  }

  .scroll_up header .header{
    transform: translateY(0) !important;
    -webkit-transform: translateY(0) !important;

  }

  .scroll_down header .header{
    transform: translateY(0) !important;
    -webkit-transform: translateY(0) !important;
  }

  .homeSlider .tcg-animation-none > div{
    max-width: 100% !important;
  }

  .homeSlider p{
    max-width: 95vw;
  }

  .homeSlider p br{
    display: none;
  }

  .header, .scroll_up header .header, .scroll_down header .header, .home:not(.scroll_up) .header{
    transform: translateY(0) !important;
    -webkit-transform: translateY(0) !important;
    box-shadow: 0 0 10px 10px rgb(0, 0, 0, 0.04) !important;
    -webkit-box-shadow: 0 0 10px 10px rgb(0, 0, 0, 0.04) !important;
    background-color: #fff !important;
  }

  .home:not(.scroll_up) header .darkLogo{
    display: block !important;
  }

  .home:not(.scroll_up) header .lightLogo{
    display: none !important;
  }

  .serviceGrid .tcgelements-interactive-hero-box{
    padding-top: 100px !important;
  }

  .serviceGrid .box-item {
    height: 15vh !important;
  }

  .serviceGrid h2 {
    transform: translateY(75px) !important;
    -webkit-transform: translateY(75px) !important;
    text-align: center;
  }

  .serviceGrid2 {
    width: 80vw !important;
    margin: auto !important;
  }

  .serviceGrid2 img{
    border-radius: 20px !important;
  }

  .serviceGrid2 .service .elementor-image-box-img::after {
    border-radius: 20px;
  }

  .serviceGrid2 .service:hover .elementor-image-box-img::after {
    height: 40%;
  }


}




/*------------------------------------------------- END TABLET-----------------------------------------------*/
/*------------------------------------------------- END TABLET-----------------------------------------------*/

/*------------------------------------------------- LANDSCAPE-----------------------------------------------*/
/*------------------------------------------------- LANDSCAPE-----------------------------------------------*/

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

  h1{
    letter-spacing: -1px !important;
  }

  h2 {
    font-size: calc(25px + 2vw) !important;
    font-weight: 500 !important;
    letter-spacing: -1px;
  }

  .taptap-by-bonfire ul li a{
    font-size: 30px !important;
  }

  .serviceGrid2 h3, .strongPoint p {
    font-size: 28px !important;
    letter-spacing: 0px;
    padding: 0 10px;
  }

  .strongPoint p {
    font-size: 22px !important;
  }

  .header > div {
    max-width: 100vw !important;
  }

  .taptap-menu-button-wrapper {
    right: 20px;
  }

  .strongPoint img {
    height: 50px !important;
  }

  .strongPoint{
    padding-bottom: 0 !important;
  }

  .homeSlider p{
    padding: 5px;
    font-size: calc(3vw + 39px) !important;
  }

  .serviceGrid .tcgelements-interactive-hero-box {
    height: calc(75vh - 50px) !important;
    min-height: 600px !important;
  }

  .serviceGrid .box-item {
    height: auto !important;
    padding: 10px !important;
  }

  .serviceGrid h2 {
    transform: translateY(120px) !important;
    -webkit-transform: translateY(120px) !important;
  }

  .serviceGrid .date.fsz-12{
    display: none;
  }

  .serviceGrid2 {
    width: 98vw !important;
  }

  .serviceGrid2 .elementor-image-box-img {
    height: 250px;
  }



  .serviceGrid2 .service .elementor-image-box-content {
    position: absolute;
    bottom: -10px;
  }

  .serviceGrid2 .service:hover .elementor-image-box-content p{
    height: 0px;
    opacity: 0;
  }

  .strongPoint {
    padding: 20px 10px 10px !important;
  }

  .strongPoint p{
    margin-bottom: 0 !important;
  }

  .button1 .tcgelements-button{
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  .button1 .tcgelements-button-icon{
    width: 20px !important;
  }


}


/*------------------------------------------------- END LANDSCAPE-----------------------------------------------*/
/*------------------------------------------------- END LANDSCAPE-----------------------------------------------*/

/*------------------------------------------------- PORTRAIT-----------------------------------------------*/
/*------------------------------------------------- PORTRAIT-----------------------------------------------*/


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




}



/*------------------------------------------------- END PORTRAIT-----------------------------------------------*/
/*------------------------------------------------- END PORTRAIT-----------------------------------------------*/