.elementor-2178 .elementor-element.elementor-element-d015459{--display:flex;--min-height:100vh;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--justify-content:center;--gap:0px 0px;--background-transition:0.3s;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-2178 .elementor-element.elementor-element-3885a95{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--justify-content:center;--align-items:flex-start;--flex-wrap:nowrap;--background-transition:0.3s;--overlay-opacity:1;--border-radius:0px 0px 0px 0px;--e-con-transform-transition-duration:1400ms;}.elementor-2178 .elementor-element.elementor-element-3885a95::before, .elementor-2178 .elementor-element.elementor-element-3885a95 > .elementor-background-video-container::before, .elementor-2178 .elementor-element.elementor-element-3885a95 > .e-con-inner > .elementor-background-video-container::before, .elementor-2178 .elementor-element.elementor-element-3885a95 > .elementor-background-slideshow::before, .elementor-2178 .elementor-element.elementor-element-3885a95 > .e-con-inner > .elementor-background-slideshow::before, .elementor-2178 .elementor-element.elementor-element-3885a95 > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{--background-overlay:'';background-image:url("https://www.arche-production.herostudio.fr/wp-content/uploads/2026/02/Untitled-design-6-1-819x1024.png");background-position:center center;background-size:cover;}.elementor-2178 .elementor-element.elementor-element-3885a95:hover::before, .elementor-2178 .elementor-element.elementor-element-3885a95:hover > .elementor-background-video-container::before, .elementor-2178 .elementor-element.elementor-element-3885a95:hover > .e-con-inner > .elementor-background-video-container::before, .elementor-2178 .elementor-element.elementor-element-3885a95 > .elementor-background-slideshow:hover::before, .elementor-2178 .elementor-element.elementor-element-3885a95 > .e-con-inner > .elementor-background-slideshow:hover::before{--background-overlay:'';}.elementor-2178 .elementor-element.elementor-element-3885a95:hover{--overlay-opacity:0;}.elementor-2178 .elementor-element.elementor-element-3885a95, .elementor-2178 .elementor-element.elementor-element-3885a95::before{--overlay-transition:0.4s;--border-transition:0.3s;}.elementor-2178 .elementor-element.elementor-element-3885a95.e-con{--flex-grow:0;--flex-shrink:0;--e-con-transform-scale:1;}.elementor-2178 .elementor-element.elementor-element-3885a95.e-con:hover{--e-con-transform-scale:1.05;}.elementor-2178 .elementor-element.elementor-element-cfcb3af{text-align:center;width:var( --container-widget-width, 102.839% );max-width:102.839%;--container-widget-width:102.839%;--container-widget-flex-grow:0;}.elementor-2178 .elementor-element.elementor-element-cfcb3af .elementor-heading-title{color:#FFFFFF;font-family:"DM Serif Text", Sans-serif;font-size:39px;font-weight:600;text-transform:capitalize;line-height:1.2em;}.elementor-2178 .elementor-element.elementor-element-cfcb3af.elementor-element{--align-self:center;--flex-grow:0;--flex-shrink:0;}.elementor-2178 .elementor-element.elementor-element-0e781eb .elementor-button{font-family:"Inter Tight", Sans-serif;font-size:16px;font-weight:500;font-style:italic;text-decoration:none;fill:#FFFFFF;color:#FFFFFF;background-color:#00000000;transition-duration:0.5s;border-style:solid;border-width:1px 1px 1px 1px;border-radius:14px 14px 14px 14px;}.elementor-2178 .elementor-element.elementor-element-0e781eb .elementor-button:hover, .elementor-2178 .elementor-element.elementor-element-0e781eb .elementor-button:focus{color:#3D3D3D;background-color:#FFFFFF;border-color:#FFFFFF;}.elementor-2178 .elementor-element.elementor-element-0e781eb .elementor-button:hover svg, .elementor-2178 .elementor-element.elementor-element-0e781eb .elementor-button:focus svg{fill:#3D3D3D;}.elementor-2178 .elementor-element.elementor-element-0e781eb.elementor-element{--align-self:center;}.elementor-2178 .elementor-element.elementor-element-a46bbe8{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--justify-content:center;--align-items:center;--flex-wrap:nowrap;--background-transition:0.3s;--overlay-opacity:1;--e-con-transform-transition-duration:1400ms;}.elementor-2178 .elementor-element.elementor-element-a46bbe8::before, .elementor-2178 .elementor-element.elementor-element-a46bbe8 > .elementor-background-video-container::before, .elementor-2178 .elementor-element.elementor-element-a46bbe8 > .e-con-inner > .elementor-background-video-container::before, .elementor-2178 .elementor-element.elementor-element-a46bbe8 > .elementor-background-slideshow::before, .elementor-2178 .elementor-element.elementor-element-a46bbe8 > .e-con-inner > .elementor-background-slideshow::before, .elementor-2178 .elementor-element.elementor-element-a46bbe8 > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{--background-overlay:'';background-image:url("https://www.arche-production.herostudio.fr/wp-content/uploads/2026/02/Untitled-design-11-1-1024x681.png");background-position:center left;background-size:cover;}.elementor-2178 .elementor-element.elementor-element-a46bbe8:hover::before, .elementor-2178 .elementor-element.elementor-element-a46bbe8:hover > .elementor-background-video-container::before, .elementor-2178 .elementor-element.elementor-element-a46bbe8:hover > .e-con-inner > .elementor-background-video-container::before, .elementor-2178 .elementor-element.elementor-element-a46bbe8 > .elementor-background-slideshow:hover::before, .elementor-2178 .elementor-element.elementor-element-a46bbe8 > .e-con-inner > .elementor-background-slideshow:hover::before{--background-overlay:'';}.elementor-2178 .elementor-element.elementor-element-a46bbe8:hover{--overlay-opacity:0;}.elementor-2178 .elementor-element.elementor-element-a46bbe8, .elementor-2178 .elementor-element.elementor-element-a46bbe8::before{--overlay-transition:0.4s;--border-transition:0.3s;}.elementor-2178 .elementor-element.elementor-element-a46bbe8.e-con:hover{--e-con-transform-scale:1.05;}.elementor-2178 .elementor-element.elementor-element-1132acb{text-align:center;width:var( --container-widget-width, 102.839% );max-width:102.839%;--container-widget-width:102.839%;--container-widget-flex-grow:0;}.elementor-2178 .elementor-element.elementor-element-1132acb .elementor-heading-title{color:#FFFFFF;font-family:"DM Serif Text", Sans-serif;font-size:39px;font-weight:600;text-transform:capitalize;line-height:1.2em;}.elementor-2178 .elementor-element.elementor-element-1132acb.elementor-element{--align-self:center;--flex-grow:0;--flex-shrink:0;}.elementor-2178 .elementor-element.elementor-element-c2d93e3 .elementor-button{font-family:"Inter Tight", Sans-serif;font-size:16px;font-weight:500;font-style:italic;text-decoration:none;fill:#FFFFFF;color:#FFFFFF;background-color:#FFFFFF00;transition-duration:0.5s;border-style:solid;border-width:1px 1px 1px 1px;border-radius:14px 14px 14px 14px;}.elementor-2178 .elementor-element.elementor-element-c2d93e3 .elementor-button:hover, .elementor-2178 .elementor-element.elementor-element-c2d93e3 .elementor-button:focus{color:#3D3D3D;background-color:#FFFFFF;border-color:#FFFFFF;}.elementor-2178 .elementor-element.elementor-element-c2d93e3 .elementor-button:hover svg, .elementor-2178 .elementor-element.elementor-element-c2d93e3 .elementor-button:focus svg{fill:#3D3D3D;}.elementor-2178 .elementor-element.elementor-element-c2d93e3.elementor-element{--align-self:center;}.elementor-2178 .elementor-element.elementor-element-f0994fe{--display:flex;--min-height:100vh;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--justify-content:center;--gap:0px 0px;--background-transition:0.3s;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-2178 .elementor-element.elementor-element-4baebed{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--justify-content:center;--align-items:flex-start;--flex-wrap:nowrap;--background-transition:0.3s;--overlay-opacity:0.32;--border-radius:0px 0px 0px 0px;--e-con-transform-transition-duration:1400ms;}.elementor-2178 .elementor-element.elementor-element-4baebed:not(.elementor-motion-effects-element-type-background), .elementor-2178 .elementor-element.elementor-element-4baebed > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://www.arche-production.herostudio.fr/wp-content/uploads/2026/02/42742617_577845372634898_170794588615737344_n.jpg");background-position:center center;background-size:cover;}.elementor-2178 .elementor-element.elementor-element-4baebed::before, .elementor-2178 .elementor-element.elementor-element-4baebed > .elementor-background-video-container::before, .elementor-2178 .elementor-element.elementor-element-4baebed > .e-con-inner > .elementor-background-video-container::before, .elementor-2178 .elementor-element.elementor-element-4baebed > .elementor-background-slideshow::before, .elementor-2178 .elementor-element.elementor-element-4baebed > .e-con-inner > .elementor-background-slideshow::before, .elementor-2178 .elementor-element.elementor-element-4baebed > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{--background-overlay:'';background-color:#000000;}.elementor-2178 .elementor-element.elementor-element-4baebed:hover::before, .elementor-2178 .elementor-element.elementor-element-4baebed:hover > .elementor-background-video-container::before, .elementor-2178 .elementor-element.elementor-element-4baebed:hover > .e-con-inner > .elementor-background-video-container::before, .elementor-2178 .elementor-element.elementor-element-4baebed > .elementor-background-slideshow:hover::before, .elementor-2178 .elementor-element.elementor-element-4baebed > .e-con-inner > .elementor-background-slideshow:hover::before{--background-overlay:'';}.elementor-2178 .elementor-element.elementor-element-4baebed:hover{--overlay-opacity:0;}.elementor-2178 .elementor-element.elementor-element-4baebed, .elementor-2178 .elementor-element.elementor-element-4baebed::before{--overlay-transition:0.4s;--border-transition:0.3s;}.elementor-2178 .elementor-element.elementor-element-4baebed.e-con{--flex-grow:0;--flex-shrink:0;--e-con-transform-scale:1;}.elementor-2178 .elementor-element.elementor-element-4baebed.e-con:hover{--e-con-transform-scale:1.05;}.elementor-2178 .elementor-element.elementor-element-1543c39{text-align:center;width:var( --container-widget-width, 102.839% );max-width:102.839%;--container-widget-width:102.839%;--container-widget-flex-grow:0;}.elementor-2178 .elementor-element.elementor-element-1543c39 .elementor-heading-title{color:#FFFFFF;font-family:"DM Serif Text", Sans-serif;font-size:39px;font-weight:600;text-transform:capitalize;line-height:1.2em;}.elementor-2178 .elementor-element.elementor-element-1543c39.elementor-element{--align-self:center;--flex-grow:0;--flex-shrink:0;}.elementor-2178 .elementor-element.elementor-element-39e02aa .elementor-button{font-family:"Inter Tight", Sans-serif;font-size:16px;font-weight:500;font-style:italic;text-decoration:none;fill:#FFFFFF;color:#FFFFFF;background-color:#00000000;transition-duration:0.5s;border-style:solid;border-width:1px 1px 1px 1px;border-radius:14px 14px 14px 14px;}.elementor-2178 .elementor-element.elementor-element-39e02aa .elementor-button:hover, .elementor-2178 .elementor-element.elementor-element-39e02aa .elementor-button:focus{color:#3D3D3D;background-color:#FFFFFF;border-color:#FFFFFF;}.elementor-2178 .elementor-element.elementor-element-39e02aa .elementor-button:hover svg, .elementor-2178 .elementor-element.elementor-element-39e02aa .elementor-button:focus svg{fill:#3D3D3D;}.elementor-2178 .elementor-element.elementor-element-39e02aa.elementor-element{--align-self:center;}.elementor-2178 .elementor-element.elementor-element-390b51a{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--justify-content:center;--align-items:center;--flex-wrap:nowrap;--background-transition:0.3s;--overlay-opacity:0.38;--e-con-transform-transition-duration:1400ms;}.elementor-2178 .elementor-element.elementor-element-390b51a:not(.elementor-motion-effects-element-type-background), .elementor-2178 .elementor-element.elementor-element-390b51a > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://www.arche-production.herostudio.fr/wp-content/uploads/2026/02/577172036_2006873600052019_7193981614060326585_n-1.jpg");background-position:center center;background-size:cover;}.elementor-2178 .elementor-element.elementor-element-390b51a::before, .elementor-2178 .elementor-element.elementor-element-390b51a > .elementor-background-video-container::before, .elementor-2178 .elementor-element.elementor-element-390b51a > .e-con-inner > .elementor-background-video-container::before, .elementor-2178 .elementor-element.elementor-element-390b51a > .elementor-background-slideshow::before, .elementor-2178 .elementor-element.elementor-element-390b51a > .e-con-inner > .elementor-background-slideshow::before, .elementor-2178 .elementor-element.elementor-element-390b51a > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{--background-overlay:'';background-color:#000000;}.elementor-2178 .elementor-element.elementor-element-390b51a:hover::before, .elementor-2178 .elementor-element.elementor-element-390b51a:hover > .elementor-background-video-container::before, .elementor-2178 .elementor-element.elementor-element-390b51a:hover > .e-con-inner > .elementor-background-video-container::before, .elementor-2178 .elementor-element.elementor-element-390b51a > .elementor-background-slideshow:hover::before, .elementor-2178 .elementor-element.elementor-element-390b51a > .e-con-inner > .elementor-background-slideshow:hover::before{--background-overlay:'';}.elementor-2178 .elementor-element.elementor-element-390b51a:hover{--overlay-opacity:0;}.elementor-2178 .elementor-element.elementor-element-390b51a, .elementor-2178 .elementor-element.elementor-element-390b51a::before{--overlay-transition:0.4s;--border-transition:0.3s;}.elementor-2178 .elementor-element.elementor-element-390b51a.e-con:hover{--e-con-transform-scale:1.05;}.elementor-2178 .elementor-element.elementor-element-7fd41af{text-align:center;width:var( --container-widget-width, 102.839% );max-width:102.839%;--container-widget-width:102.839%;--container-widget-flex-grow:0;}.elementor-2178 .elementor-element.elementor-element-7fd41af .elementor-heading-title{color:#FFFFFF;font-family:"DM Serif Text", Sans-serif;font-size:39px;font-weight:600;text-transform:capitalize;line-height:1.2em;}.elementor-2178 .elementor-element.elementor-element-7fd41af.elementor-element{--align-self:center;--flex-grow:0;--flex-shrink:0;}.elementor-2178 .elementor-element.elementor-element-61a197d .elementor-button{font-family:"Inter Tight", Sans-serif;font-size:16px;font-weight:500;font-style:italic;text-decoration:none;fill:#FFFFFF;color:#FFFFFF;background-color:#FFFFFF00;transition-duration:0.5s;border-style:solid;border-width:1px 1px 1px 1px;border-radius:14px 14px 14px 14px;}.elementor-2178 .elementor-element.elementor-element-61a197d .elementor-button:hover, .elementor-2178 .elementor-element.elementor-element-61a197d .elementor-button:focus{color:#3D3D3D;background-color:#FFFFFF;border-color:#FFFFFF;}.elementor-2178 .elementor-element.elementor-element-61a197d .elementor-button:hover svg, .elementor-2178 .elementor-element.elementor-element-61a197d .elementor-button:focus svg{fill:#3D3D3D;}.elementor-2178 .elementor-element.elementor-element-61a197d.elementor-element{--align-self:center;}.elementor-2178 .elementor-element.elementor-element-0113191{--display:flex;--background-transition:0.3s;}@media(min-width:768px){.elementor-2178 .elementor-element.elementor-element-3885a95{--width:50%;}.elementor-2178 .elementor-element.elementor-element-a46bbe8{--width:50%;}.elementor-2178 .elementor-element.elementor-element-4baebed{--width:50%;}.elementor-2178 .elementor-element.elementor-element-390b51a{--width:50%;}}@media(max-width:1024px){.elementor-2178 .elementor-element.elementor-element-cfcb3af .elementor-heading-title{font-size:55px;}.elementor-2178 .elementor-element.elementor-element-0e781eb .elementor-button{font-size:16px;}.elementor-2178 .elementor-element.elementor-element-1132acb .elementor-heading-title{font-size:55px;}.elementor-2178 .elementor-element.elementor-element-c2d93e3 .elementor-button{font-size:16px;}.elementor-2178 .elementor-element.elementor-element-1543c39 .elementor-heading-title{font-size:55px;}.elementor-2178 .elementor-element.elementor-element-39e02aa .elementor-button{font-size:16px;}.elementor-2178 .elementor-element.elementor-element-7fd41af .elementor-heading-title{font-size:55px;}.elementor-2178 .elementor-element.elementor-element-61a197d .elementor-button{font-size:16px;}}@media(max-width:767px){.elementor-2178 .elementor-element.elementor-element-cfcb3af .elementor-heading-title{font-size:45px;}.elementor-2178 .elementor-element.elementor-element-0e781eb .elementor-button{font-size:15px;}.elementor-2178 .elementor-element.elementor-element-1132acb .elementor-heading-title{font-size:45px;}.elementor-2178 .elementor-element.elementor-element-c2d93e3 .elementor-button{font-size:15px;}.elementor-2178 .elementor-element.elementor-element-1543c39 .elementor-heading-title{font-size:45px;}.elementor-2178 .elementor-element.elementor-element-39e02aa .elementor-button{font-size:15px;}.elementor-2178 .elementor-element.elementor-element-7fd41af .elementor-heading-title{font-size:45px;}.elementor-2178 .elementor-element.elementor-element-61a197d .elementor-button{font-size:15px;}}/* Start custom CSS for button, class: .elementor-element-0e781eb *//* 1. On prépare le bouton (bordure invisible par défaut) */
.elementor-2178 .elementor-element.elementor-element-0e781eb .elementor-button {
    background-color: transparent; /* Optionnel : si tu veux un bouton vide au centre */
    border: 1px solid rgba(255, 255, 255, 0.1) !important; /* Bordure fantôme très légère */
    position: relative;
    transition: all 0.3s;
}

/* 2. On crée la ligne qui va parcourir le contour */
.elementor-2178 .elementor-element.elementor-element-0e781eb .elementor-button::before {
    content: '';
    position: absolute;
    top: -1px; left: -1px; right: -1px; bottom: -1px;
    border-radius: inherit; /* Pour suivre les arrondis de ton bouton */
    
    /* On crée une bordure dégradée dont une partie est transparente */
    padding: 1px; /* Épaisseur du trait */
    background: linear-gradient(90deg, 
        transparent 0%, 
        transparent 25%, 
        #ffffff 50%, 
        transparent 75%, 
        transparent 100%);
    background-size: 200% 100%;
    
    /* Le masque magique : permet de ne voir que la bordure */
    -webkit-mask: 
        linear-gradient(#fff 0 0) content-box, 
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    
    /* L'animation */
    animation: drawBorder 5s linear infinite;
    animation-delay: 2s; /* Pour le décalage avec tes titres */
}

/* 3. L'animation du tracé */
@keyframes drawBorder {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-c2d93e3 *//* 1. Base identique */
.elementor-2178 .elementor-element.elementor-element-c2d93e3 .elementor-button {
    background-color: transparent;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    position: relative;
    transition: all 0.3s;
}

/* 2. Animation Inversée */
.elementor-2178 .elementor-element.elementor-element-c2d93e3 .elementor-button::before {
    content: '';
    position: absolute;
    top: -1px; left: -1px; right: -1px; bottom: -1px;
    border-radius: inherit;
    padding: 1px;
    
    /* On inverse le dégradé (direction vers la gauche) */
    background: linear-gradient(-90deg, 
        transparent 0%, 
        transparent 25%, 
        #ffffff 50%, 
        transparent 75%, 
        transparent 100%);
    background-size: 200% 100%;
    
    -webkit-mask: 
        linear-gradient(#fff 0 0) content-box, 
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    
    /* On utilise l'animation inversée définie plus bas */
    animation: drawBorderReverse 6s linear infinite; 
    animation-delay: 3.5s; 
}

/* 3. L'animation qui part dans l'autre sens */
@keyframes drawBorderReverse {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-d015459 *//* 1. État par défaut - Arrivée très fluide */
@media (min-width: 768px) {
    .split-hero > .e-con,
    .split-hero > .elementor-column {
        width: 50% !important;
        box-shadow: inset 0 0 0 2000px rgba(0, 0, 0, 0.40);
        filter: grayscale(0%) blur(0px);
        /* COURBE PLUS LONGUE ET PLUS LISSE */
        transition: 
            width 1.2s cubic-bezier(0.25, 1, 0.3, 1), 
            filter 0.8s ease, 
            box-shadow 0.8s ease !important;
    }

    /* 2. Au survol du parent : transition douce vers le flou */
    .split-hero:hover > .e-con,
    .split-hero:hover > .elementor-column {
        filter: grayscale(100%) blur(5px);
        box-shadow: inset 0 0 0 2000px rgba(0, 0, 0, 0.60);
        width: 35% !important; /* On réduit un peu moins pour laisser du texte visible */
    }

    /* 3. L'élément survolé s'ouvre comme un rideau */
    .split-hero > .e-con:hover,
    .split-hero > .elementor-column:hover {
        width: 65% !important; 
        filter: grayscale(0%) blur(0px) !important;
        box-shadow: inset 0 0 0 2000px rgba(0, 0, 0, 0) !important;
        z-index: 10;
    }

    /* 4. On évite que le titre ne "saute" pendant le mouvement */
    .split-hero .elementor-widget {
        z-index: 20;
        position: relative;
        pointer-events: none;
        transition: transform 1.2s cubic-bezier(0.25, 1, 0.3, 1);
    }
}
/* On redonne la priorité au clic sur les boutons et les liens */
.elementor-2178 .elementor-element.elementor-element-d015459 .elementor-button, 
.elementor-2178 .elementor-element.elementor-element-d015459 a {
    pointer-events: auto !important;
    z-index: 30 !important;
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-39e02aa *//* btn-5 */

.btn-5 {
  --primary: #02A2F8;
  --neutral-1: #f7f8f7;
  --neutral-2: #e7e7e7;
  --radius: 32px;
  scale: 0.5;
  cursor: pointer;
  border-radius: var(--radius);
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  transition: all 0.3s ease;
  min-width: 160px;
  padding: 0 20px;
  height: 64px;
  font-family: "Galano Grotesque", Poppins, Montserrat, sans-serif;
  font-style: normal;
  font-size: 18px;
  font-weight: 600;
}
.btn-5:hover {
  transform: scale(1.02);
}
.btn-5:active {
  transform: scale(1);
}
.btn-5:after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius);
  background: #fff;
  border: 2.5px solid transparent;
  z-index: 0;
  transition: all 0.4s ease;
}
.btn-5:hover::after {
  transform: scale(1.05, 1.1);
}
.btn-5::before {
  content: "";
  inset: 7px 6px 6px 6px;
  position: absolute;
  border-radius: 30px;
  filter: blur(0.5px);
  z-index: 2;
}
.btn-5 .state p {
  display: flex;
  align-items: center;
  justify-content: center;
}
.btn-5 .state .icon {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  transform: scale(1.25);
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}
.btn-5 .state .icon svg {
  overflow: visible;
}

/* Outline */
.btn-5 .outline {
  position: absolute;
  border-radius: inherit;
  overflow: hidden;
  z-index: 1;
  opacity: 0;
  transition: opacity 0.4s ease;
  inset: -2px -3.5px;
}
.btn-5 .outline::before {
  content: "";
  position: absolute;
  inset: -100%;
  background: conic-gradient(
    from 180deg,
    transparent 60%,
    white 80%,
    transparent 100%
  );
  animation: spin 2s linear infinite;
  animation-play-state: paused;
}
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.btn-5:hover .outline {
  opacity: 1;
}
.btn-5:hover .outline::before {
  animation-play-state: running;
}

/* Letters */
.btn-5 .state p span {
  display: block;
  opacity: 0;
  animation: slideDown 0.8s ease forwards calc(var(--i) * 0.03s);
}
.btn-5:hover p span {
  opacity: 1;
  animation: wave 0.5s ease forwards calc(var(--i) * 0.02s);
}
.btn-5:focus p span {
  opacity: 1;
  animation: disapear 0.6s ease forwards calc(var(--i) * 0.03s);
}
@keyframes wave {
  30% {
    opacity: 1;
    transform: translateY(4px) translateX(0) rotate(0);
  }
  50% {
    opacity: 1;
    transform: translateY(-3px) translateX(0) rotate(0);
    color: var(--primary);
  }
  100% {
    opacity: 1;
    transform: translateY(0) translateX(0) rotate(0);
  }
}
@keyframes slideDown {
  0% {
    opacity: 0;
    transform: translateY(-20px) translateX(5px) rotate(-90deg);
    color: var(--primary);
    filter: blur(5px);
  }
  30% {
    opacity: 1;
    transform: translateY(4px) translateX(0) rotate(0);
    filter: blur(0);
  }
  50% {
    opacity: 1;
    transform: translateY(-3px) translateX(0) rotate(0);
  }
  100% {
    opacity: 1;
    transform: translateY(0) translateX(0) rotate(0);
  }
}
@keyframes disapear {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    transform: translateX(5px) translateY(20px);
    color: var(--primary);
    filter: blur(5px);
  }
}

/* Plane */
.btn-5 .state--default .icon svg {
  animation: land 0.6s ease forwards;
}
.btn-5:hover .state--default .icon {
  transform: rotate(45deg) scale(1.25);
}
.btn-5:focus .state--default svg {
  animation: takeOff 0.8s linear forwards;
}
.btn-5:focus .state--default .icon {
  transform: rotate(0) scale(1.25);
}
@keyframes takeOff {
  0% {
    opacity: 1;
  }
  60% {
    opacity: 1;
    transform: translateX(70px) rotate(45deg) scale(2);
  }
  100% {
    opacity: 0;
    transform: translateX(160px) rotate(45deg) scale(0);
  }
}
@keyframes land {
  0% {
    transform: translateX(-60px) translateY(30px) rotate(-50deg) scale(2);
    opacity: 0;
    filter: blur(3px);
  }
  100% {
    transform: translateX(0) translateY(0) rotate(0);
    opacity: 1;
    filter: blur(0);
  }
}

/* Contrail */
.btn-5 .state--default .icon:before {
  content: "";
  position: absolute;
  top: 50%;
  height: 2px;
  width: 0;
  left: -5px;
  background: linear-gradient(to right, transparent, rgba(0, 0, 0, 0.5));
}
.btn-5:focus .state--default .icon:before {
  animation: contrail 0.8s linear forwards;
}
@keyframes contrail {
  0% {
    width: 0;
    opacity: 1;
  }
  8% {
    width: 15px;
  }
  60% {
    opacity: 0.7;
    width: 80px;
  }
  100% {
    opacity: 0;
    width: 160px;
  }
}

/* States */
.btn-5 .state {
  padding-left: 29px;
  z-index: 2;
  display: flex;
  position: relative;
}
.btn-5 .state--default span:nth-child(4) {
  margin-right: 5px;
}
.btn-5 .state--sent {
  display: none;
}
.btn-5 .state--sent svg {
  transform: scale(1.25);
  margin-right: 8px;
}
.btn-5:focus .state--default {
  position: absolute;
}
.btn-5:focus .state--sent {
  display: flex;
}
.btn-5:focus .state--sent span {
  opacity: 0;
  animation: slideDown 0.8s ease forwards calc(var(--i) * 0.2s);
}
.btn-5:focus .state--sent .icon svg {
  opacity: 0;
  animation: appear 1.2s ease forwards 0.8s;
}
@keyframes appear {
  0% {
    opacity: 0;
    transform: scale(4) rotate(-40deg);
    color: var(--primary);
    filter: blur(4px);
  }
  30% {
    opacity: 1;
    transform: scale(0.6);
    filter: blur(1px);
  }
  50% {
    opacity: 1;
    transform: scale(1.2);
    filter: blur(0);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}/* End custom CSS */