/*
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

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

/*-_-_-_-_-_-_- 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 : var(--e-global-color-secondary);
        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(--e-global-color-accent);
        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;
        
        .text{
            /*transition: opacity 0.2s ease;*/
            position:absolute;
            opacity: 0;
            height: 0;
            padding : 10px 20px!important;
           
        }
        .title{
            /*transition: opacity 0.2s ease;*/
            position:absolute;
            opacity: 1;
            height: auto;
            padding : 0 20px!important;
            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;
                height: auto;
            }
            .title{
                opacity: 0;
                height: 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;
    }
    
}
/* 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);
        }
    }
}