/*
Theme Name: Hello Ethicweb
Theme URI: https://elementor.com/hello-theme/?utm_source=wp-themes&utm_campaign=theme-uri&utm_medium=wp-dash
Template: hello-elementor
Author: Ethicweb
Author URI: https://elementor.com/?utm_source=wp-themes&utm_campaign=author-uri&utm_medium=wp-dash
Description: Hello Elementor is a lightweight and minimalist WordPress theme that was built specifically to work seamlessly with the Elementor site builder plugin. The theme is free, open-source, and designed for users who want a flexible, easy-to-use, and customizable website. The theme, which is optimized for performance, provides a solid foundation for users to build their own unique designs using the Elementor drag-and-drop site builder. Its simplicity and flexibility make it a great choice for both beginners and experienced Web Creators.
Tags: accessibility-ready,flexible-header,custom-colors,custom-menu,custom-logo,featured-images,rtl-language-support,threaded-comments,translation-ready
Version: 3.3.0.1744636565
Updated: 2025-04-14 15:16:05


Global variables : 
--e-global-color-primary
--e-global-color-secondary
--e-global-color-text
--e-global-color-accent

*/

:root{
    --etw-yellow : #EDF7BD;
    --etw-blue :  #1F556B;
    --etw-blue-2 : #4E8D9C;
    --etw-dark-blue : #0C2E3F;
    --etw-light-brown : #EEE7DF;
    --etw-soft-grey : #F5F5F5;
    --etw-green : #66CC99;
    --etw-brown : #C59A5C;

    --banner-decoration-width : clamp(1.5rem, 5vw, 6rem);
}
body{
    overflow-x : hidden;
}

/*-_-_-_-_-_-_- GENERALITES -_-_-_-_-_-_-_*/
.card{
    cursor: default;
}
h2{
    text-wrap: balance!important;
}
/*-_-_-_-_-_-_- COLORS -_-_-_-_-_-_-_*/

.yellow{
    color: var(--etw-yellow);
}
.blue{
    color: var(--etw-blue-2);
}
.green{
    color: var(--etw-green);
}
/* -_-_-_-_-_--_ TITLES -_-_-_-_-_-_-_ */
.etw-title_decoration h2{

    @media(min-width : 768px){

        --element-width : 100px;
        --element-offset : 50px;

        padding-left: calc(var(--element-width) + var(--element-offset));
        padding-right: calc(var(--element-width) + var(--element-offset));

        /* Petite deco */

        &::before, &::after{
            content :'';
            position:absolute;
            width: var(--element-width);
            height: 20px;
            background-color: #DDD0BF;
            top:50%;
            transform: translatey(-50%);
            
        }
        
        &::before{
            left: 0;
            border-radius : 0 0 0 20px  ;
        }
        &::after{
            right: 0;
            border-radius :  0 0 20px 0 ;
        }
    }
}

/*-_-_-_-_-_-_- BUTTONS -_-_-_-_-_-_-_*/
a{
    .elementor-button-text{
        line-height: 1em!important;
    }
}
.etw-button.round{
    position:relative;
    display: flex;
    min-height: 38px;

    a{  
        z-index: 1;
        padding: 5px 20px;
        align-content: center;
        color : black;
        font-family: "Nunito", Sans-serif;
        font-weight: 700;
        line-height: 1.4rem;
        text-align: center;
        transition: all 0.2s ease;
    }
    
    &:before{
        position:absolute;
        z-index:0;
        content : '';
        width: 38px;
        aspect-ratio: 1 / 1;
        height: 100%;
        border-radius:38px;
        background-color: var(--etw-blue-2);
        transition:all 0.2s ease;
    }
    
    /*On hover*/
    
    &:hover{
        &:before{ width: 100%; }
        
        a{ 
            color:white; 
            padding:5px 30px;
        }
    }
}


/*-_-_-_-_-_-_- BLOCKS -_-_-_-_-_-_-_*/

.etw-block.square{
    height:90%;
    
    .text,
    .icon,
    .title{
        transition: all 0.3s ease;
    }
    .text{
        opacity:1;
        height: 40px;
    }
    .icon{
        opacity: 0;
        height: 0;
    }
    &:hover{
        .icon{
            opacity : 1;
            height: 40px;
        }
        .text{
            
            opacity: 0;
        }
        
        .title,
        .text,
        .icon{
            transform : translatey(10px);
        }
    }    
}


/*-_-_-_-_-_-_- SECTIONS -_-_-_-_-_-_-_*/

.etw-tree{
    .card{
        border:  1px solid var(--e-global-color-primary);
        border-radius:5px;
        cursor: default;
        padding : 20px!important;

        
        .text{
            opacity: 0;
        }
        .title{
            position:absolute;
            opacity: 1;
            color : var(--e-global-color-primary)!important;
        }
        &:after{
            border: 5px solid var(--e-global-color-text);
            --circle-radius: 20px;
            content:'';
            position:absolute;
            background-color: white;
            width : var(--circle-radius);
            height: var(--circle-radius);
            border-radius: var(--circle-radius);
            border: 5px solid var(--e-global-color-text);
            box-shadow: 5px 5px 5px rgba(0,0,0,0.2);

            @media(max-width: 767px){
                display:none;
            }
        }
        &:hover{
            
            box-shadow: 5px 5px 5px rgba(0,0,0, 0.2);
            .text{
                opacity: 1;
            }
            .title{
                opacity: 0;
            }
            &:after{
                border: 5px solid var(--e-global-color-primary);
            }
        }
    }
}
/* SLIDER  */
  
.etw-slider{
    .elementor-swiper-button-prev,
    .elementor-swiper-button-next{
        cursor:pointer;
        
        span{
            opacity: 0;
        }
        @media(min-width:767px){
            .elementor-icon{
                opacity: 1;
            }
        }
        
        &:hover{
            span{
                opacity: 1;
            }
            @media(min-width:767px){
                .elementor-icon{
                    /* opacity: 0; */
                }
            }
        }
    }
    .e-widget-swiper .elementor-swiper-button{
        display:none;
    }
    [data-elementor-type="loop-item"]:not(.swiper-slide-active) p{
        display:none;
    }
    
    .swiper-pagination{
        display:flex;
        align-items: center;
        background-color: #F5F5F5;
    }
    .swiper-pagination-bullet {
        width: 100%;
        height:2px;
        background-color: #F5F5F5;
        border-radius: 0;
        margin:0!important;
    }
    .swiper-pagination-bullet:hover{
        background-color: #D4D4D4;
        opacity:1;
    }
    .swiper-pagination-bullet-active{
        background-color: #D4D4D4;
    }
    
}

.slider-picture:not(.active),
.slider-text:not(.active){
    display: none !important;
}

.etw-custom-slider_navigation-arrow{
    &:hover{
        background-color : var(--etw-soft-grey);
    }
}

.arrow-man-svg .arrow.active{
    fill : var(--etw-soft-blue);
}
/* BUBBLE SLIDER*/

.bubble-slider{
    h3{
        font-size: clamp(30px, 4vw, 40px)!important;
    }
    p{
        font-size: clamp(18px, 2vw, 25px)!important;
        line-height: 1.4em!important;
    }
}

/*  PICTOS  */

.card{
    .picto-arrow{
        position:absolute;
        opacity: 0;
        transition: all 0.3s ease;
        background-color: var(--e-global-color-accent);
        border-radius:100px;
        aspect-ratio:1/1;
        max-width: 65px!important;
        padding:18px 10px;
        
        line{
            stroke: white;
        }
    }
    .picto-skill{
        opacity: 1;
        transition: all 0.3s ease;
    }
    &:hover{
        .picto-arrow{
            opacity: 1;
        }
        .picto-skill{
            opacity: 0;
            transform: scale(0);
        }
        .text{
            /* transform: translatey(-20px); */
        }
    }
}

/* HERO BANNER */

.etw-hero-banner{
    
    --etw-banner-decoration-color : var(--etw-soft-blue);

    padding-left : calc(var(--banner-decoration-width) + 20px)!important;
    
    &:after{
        content:'';
        position:absolute;
        width: var(--banner-decoration-width);
        height: clamp(450px, 50vh, 100px);
        top:0;
        left:0;
        background-color:  var(--etw-banner-decoration-color);
        border-radius: 0 0 100px 0;

    }

    .etw-hero-banner_caption{
        @media(max-width : 767px){
            br{
                display:none;
            }
        }
    }
}

/* FOOTER */

.etw-footer_side-button{
    &:hover::before{
        content: '';
        width: 20px;
        background-color: var(--etw-light-brown);
        border-radius: 0 0 20px 0;
    }
}

/*Menu*/
.drop-down-content{
    position:absolute;
}
.menu-item{
    position: relative;
}

/*Interogation man*/

.interrogation-point{
    transform-origin: center!important;
    animation : 3s ease running both alternate infinite rotateZ;
    
}

@keyframes rotateZ{
    from{
        transform : translatex(50px) rotatex(-30deg) ;
    }
    to{
        transform : translatex(50px) rotatex(0deg) ;
    }
}


/* SOLUTION*/
.etw-solution_card_content--1{
    height: 280px !important;
}

.etw-solution_card_content--2{
    height: 0 !important;
    opacity:0;
    pointer-events: none;
}
.etw-solution_card__inner-container{
    height: 100%;
    background-color: #4E8D9C!important;
    box-shadow : 0px 3px 6px rgba(0,0,0, 0.2);
}
.etw-solution_card{
    
    padding-bottom : 20px;
    min-height: 300px;
   
    &:hover{
        
        .etw-solution_card__inner-container{
            background-color: white!important;
            height: 80%;
        }
        .etw-solution_card_content--1{
            height:0 !important;
            opacity: 0;
            display:none;
            pointer-events: none;
        }
        .etw-solution_card_content--2{
            height: 200px!important;
            opacity: 1;
            pointer-events: all;
        }
    }
}