/*
Theme Name:   Appic
Theme URI:    https://web-by-concept.com
Description:  Thème enfant de Kadence pour Appic
Author:       Web By Concept
Author URI:   https://web-by-concept.com
Template:     kadence
Version:      1.0.0
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
Tags:         légèreté, rapidité
Text Domain:  appic
*/

:root {
    --black: #343739;
    --turquoise: #13B4C3;
    --light-turquoise: #84D4DB;
    --light-turquoise-bg: #EAFDFF;
    --blue: #476DAA;
    --pink: #E72F76;
    --light-pink: #E87BA5;
    --green: #96C11F;
    --light-green: #BCDE5B;
    --light-green-bg: #96C11F14;
    --gray: #767A7E;
    --light-gray: #CECECE;
}

html {
    font-size: 16px;
}

body {
    color: var(--black);
}

.elementor-widget-heading h1.elementor-heading-title {
    font-size: 3.4rem;
    line-height: 1.4;
    position: relative;
    z-index: 1;
}


.elementor-widget-nav-menu .elementor-nav-menu__container ul.elementor-nav-menu .menu-item .sub-menu > .menu-item .elementor-sub-item {
    display: block;
    border-left: none;
}

.elementor-widget-nav-menu .elementor-nav-menu__container ul.elementor-nav-menu .menu-item .sub-menu > .menu-item .elementor-sub-item::first-letter {
    color: var(--pink);
}

.elementor-widget-heading .elementor-widget-container h2.elementor-heading-title {
    display: inline-block;
    position: relative;
}

.green-polygon.elementor-widget-heading .elementor-widget-container h2.elementor-heading-title::after,
.turquoise-polygon.elementor-widget-heading .elementor-widget-container h2.elementor-heading-title::after {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    right: -40px;
    width: 86px;
    height: 80px;
    background-repeat: no-repeat;
    background-size: contain;
    opacity: 0.4;
    z-index: -1;
}

.green-polygon.elementor-widget-heading .elementor-widget-container h2.elementor-heading-title::after {
    background-image: url('assets/img/green-polygon.svg');
}

.turquoise-polygon.elementor-widget-heading .elementor-widget-container h2.elementor-heading-title::after {
    background-image: url('assets/img/turquoise-polygon.svg');
}

.icons-line-separator::before {
    content: '';
    display: inline-block;
    position: absolute;
    top: 75px;
    left: 50%;
    width: 212px;
    height: 48px;
    background-image: url('assets/img/icons-line.png');
    background-repeat: no-repeat;
    background-size: contain;
    transform: translateX(-50%);
}

#main-menu .elementor-nav-menu .menu-item .elementor-item.has-submenu .sub-arrow {
    display: inline-block;
    width: 10px;
    height: 10px;
    margin-left: 10px;
    padding: 0;
    border-right: 2px solid var(--black);
    border-bottom: 2px solid var(--black);
    transform: translateY(-2px) rotate(45deg);
    transition: all .4s;
}

#main-menu .elementor-nav-menu .menu-item .elementor-item.has-submenu .sub-arrow i {
    display: none;
}

#main-menu .elementor-nav-menu .menu-item:hover .elementor-item.has-submenu .sub-arrow {
    border-right: 2px solid var(--pink);
    border-bottom: 2px solid var(--pink);
    transition: all .4s;
}



.page-intro-section::before {
    content: '';
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    background: -moz-linear-gradient(left,  rgba(52,55,57,1) 0%, rgba(86,88,90,0.5) 50%, rgba(255,255,255,0) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(left,  rgba(52,55,57,1) 0%,rgba(86,88,90,0.5) 50%,rgba(255,255,255,0) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right,  rgba(52,55,57,1) 0%,rgba(86,88,90,0.5) 50%,rgba(255,255,255,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#343739', endColorstr='#00ffffff',GradientType=1 ); /* IE6-9 */
}



/* RESPONSIVE DESIGN */
@media screen and (max-width: 1200px) {

    html {
        font-size: 15px;
    }
}


@media screen and (min-width: 1200px) and (max-width: 1600px) {

    #main-menu .elementor-nav-menu .menu-item a.elementor-item {
        padding-left: 8px;
        padding-right: 8px;
        font-size: 1rem;
    }
    
}


@media screen and (max-width: 768px) {
    html {
        font-size: 14px;
    }
}