@import url('https://fonts.googleapis.com/css?family=Krub:300,300i,400,400i,500,600,700|Raleway:300,300i,400,400i,500,600,700');

html {
  scroll-behavior: smooth;
}
p {
  
  font-family: 'Raleway', sans-serif;
    font-weight: 300;
  font-size: 16px;
}
h1,h2,h3,h4,h5,h6 {
font-family: 'Krub', sans-serif;
	}








        
        @media (min-width: 992px) {
		#header .header-nav-main nav > ul > li {
				margin: 0 20px;
		}
		#header .header-nav-main nav > ul > li:first-child {
				margin-left: 0;
		}
		#header .header-nav-main nav > ul > li > a {
				font-size: 14px;
				padding: 0 !important;
            padding-right:5px; 
		}
}

h1, h2, h3, h4, h5, h6 {
		color: var(--dark);
}

h3 {
		text-transform: none;
		font-weight: bold;
		font-size: 2.3em;
		line-height: 1.2em;
}

p {
		font-weight: 300;
		font-size: 16px;
		line-height: 30px;
}

.custom-el-pos-1 {
		margin-top: -100px;
}

.custom-el-pos-2 {
		top: 25px;
		position: relative;
}

@media (min-width: 992px) {
		.custom-el-pos-2 {
				top: 0;
		}
}

.custom-el-pos-3 {
		bottom: -25px !important;
}

@media (max-width: 1919px) {
		.custom-shape-divider-1 {
				min-width: 1920px;
		}
}

.custom-shape-divider-1.custom-shape-divider-1-flip-horizonal {
		transform: rotateY(180deg);
}

.hero {
		height: 750px;
}

.hero-el-1 {
		width: 1400px;
		height: 1400px;
		position: absolute;
		border-radius: 100%;
		top: -62%;
		left: -21%;
}

.hero-el-2 {
		width: 1400px;
		height: 1400px;
		position: absolute;
		border-radius: 100%;
		top: -65%;
		left: -20.3%;
		background: var(--primary-100);
}

.custom-text-1 {
		font-size: 200px;
		position: relative;
		top: 100px;
}

.custom-text-1 em {
		font-size: 0.7em;
		font-style: normal;
}

@media (min-width: 992px) {
		.custom-text-1 {
				font-size: 180px;
		}
}

@media (min-width: 1400px) {
		.custom-text-1 {
				font-size: 300px;
		}
}

.custom-svg-position-1 {
		position: absolute;
		/*top: -500px;*/
		left: 100px;
		opacity: 0.2;
}

.custom-svg-position-2 {
		position: absolute;
		top: 300px;
		left: -62%;
		opacity: 0.2;
		z-index: 0;
		max-width: 2000px;
}

.custom-svg-position-3 {
		position: absolute;
		top: 395px;
		right: -60%;
		opacity: 0.2;
		z-index: 0;
		max-width: 2000px;
}

@keyframes customLines1anim {
		from {
				stroke-dasharray: 1600;
				stroke-dashoffset: 1600;
		}
		to {
				stroke-dasharray: 1600;
				stroke-dashoffset: 0;
		}
}

.customLines1anim {
		animation-name: customLines1anim;
}

@media (min-width: 992px) {
		.custom-highlight-1 {
				position: relative;
				z-index: 1;
		}
		.custom-highlight-1:after {
				content: '';
				position: absolute;
				top: 60%;
				left: 50%;
				width: 0%;
				height: 25%;
				background-color: var(--primary);
				z-index: -1;
				right: 0;
		}
		.custom-highlight-1-tertiary:after {
				background-color: var(--tertiary);
		}
}

.custom-highlight-anim:after {
		animation-name: customHighlightAnim;
		animation-duration: 2s;
		animation-fill-mode: forwards;
}

.custom-highlight-anim-delay:after {
		animation-delay: 1s;
}





    .logo-wrapper {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 8px;
        max-width: 100%;
        height: 60px; /* optionnel pour forcer la hauteur max */
    }

    .logo-rose {
        width: 52px;
        height: 52px;
    }

    .logo-rose g {
        animation: sway 4s ease-in-out infinite;
        transform-origin: center;
    }

    @keyframes sway {
    0%   { transform: rotate(0deg); }
    25%  { transform: rotate(10deg); }
    50%  { transform: rotate(0deg); }
    75%  { transform: rotate(-10deg); }
    100% { transform: rotate(0deg); }
}


    .logo-text {
        text-decoration: none;
        font-family: 'Krub', sans-serif;
        font-size: 25px;
        color: #ffffff;
        font-weight: lighter;
        line-height: 1;
        white-space: nowrap;
    }

    @media (max-width: 576px) {
        .logo-wrapper {
            flex-direction: column;
            align-items: center;
            height: auto;
            
            display: flex;
        
        gap: 4px;
        padding: 5px;
        max-width: 100%;
   
        }
        .logo-rose {
        width: 32px;
        height: 32px;
       }
        .logo-text {
            font-size: 18px;
        }
    }