@import url('https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,300..900;1,300..900&display=swap');
        :root {
            --bg: #ffffff;
            --header: #ffffff9a;
            --text: #111111;
            --text2: #101215;
            --primary: #0C1724;
            --primaryinvert: #2EF2E2;
            --activebtn: #94949466;
            --hover:#d9efff;
            --surface: #ecf8ffd8;
            --container: #f4f4f4;
            --outline: #60606013; 
            --unselected: #525252;
            --containeritem: #EBFBFF;
            --insidecontainer: #cbdade;
        }

        @media (prefers-color-scheme: dark) {
        :root {
            --bg: #0C1724;
            --header: #0c17249a;
            --text: #f1f5f9;
            --text2: #bedcff; 
            --primary: #2EF2E2;
            --primaryinvert: #0C1724;
            --activebtn: #1c314b7a;
            --hover: #0a2334;
            --surface: #051121d8;
            --container: #051121;
            --outline: #ffffff09;
            --unselected: #000000;
            --containeritem: #11222E;
            --insidecontainer: #1e3b50;
        }
        }



        body {
        font-family: 'Figtree', sans-serif;
        font-optical-sizing: auto;
        font-style: normal;
        margin: 0px;
        padding: 0px;
        background-color: var(--bg);
        }
        @media (max-width: 768px) {
        body {
        margin: 0px;
        padding: 0px;
        }
        }

        








        /*La barre de nav d'en haut*/
        .main-header {
        display: flex;
        justify-content: center;
        padding: 10px;
        }
        .header-container {
        z-index: 10;
        position: fixed;
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 75%;
        background-color: var(--header);
        box-shadow: 5px 5px 30px 2px #00000013;
        outline: 2px solid var(--outline) ;
        backdrop-filter: blur(30px);
        padding: 7px 30px;
        border-radius: 15px;
        transition: 0.3s;
        }
        @media (max-width: 768px) {
        .header-container {
        width: 87%;
        padding: 5px 15px;
        }
        }
        .btn-plus {
        display: none;
        }
        @media (max-width: 768px) {
        .btn-plus {
        display: flex;
        color: var(--primaryinvert);
        text-decoration: none;
        transition: 0.3s;
        }
        }
        .btn-plus:active {
        transform: scale(0.90);
        }
        .logo-section {
        display: flex;
        align-items: center;
        gap: 15px; 
        }
        .nav-links {
        align-items: center;
        justify-content: flex-start;
        display: flex;
        gap: 30px;
        }
        @media (max-width: 768px) {
        .nav-links {
            display: none;
        }
        }
        .btn_active {
            text-decoration: none;
            background-color: var(--activebtn);
            padding: 7px 12px;
            margin: -7px -12px;
            border-radius: 12px;
            color: var(--text);
            font-size: 1rem;
            font-weight: 500;
            transition: 0.3s;
            border-radius: 100;
        }
        .btn_active:active {
            transform: scale(0.90);
        }
        .btn_active:hover {
            color: var(--text);
            background-color: var(--hover);
            padding: 10px 18px;
            margin: -10px -18px;
            border-radius: 22px;
        }
        .btn_inactive {
            text-decoration: none;
            color: var(--text);
            padding: 5px 8px;
            margin: -5px -8px;
            font-size: 1rem;
            font-weight: 500;
            transition: 0.3s;
            transition: 0.3s;
        }
        .btn_inactive:active {
            transform: scale(0.90);
        }
        .btn_inactive:hover {
            color: var(--text);
            background-color: var(--hover);
            padding: 8px 10px;
            margin: -8px -10px;
            border-radius: 100px;
        }
        .btn_active2 {
            text-decoration: none;
            background-color: var(--activebtn);
            padding: 7px 12px;
            margin: -7px -12px;
            border-radius: 12px;
            color: var(--text);
            font-size: clamp(16px, 10vw, 48px);
            font-weight: 500;
            transition: 0.3s;
            border-radius: 25px;
        }
        .btn_active2:active {
            transform: scale(0.90);
        }
        .btn_active2:hover {
            color: var(--primary);
            background-color: var(--hover);
            padding: 10px 18px;
            margin: -10px -18px;
            border-radius: 22px;
        }
        .btn_inactive2 {
            text-decoration: none;
            color: var(--text);
            padding: 5px 8px;
            margin: -5px -8px;
            font-size: clamp(16px, 8vw, 48px);
            font-weight: 500;
            transition: 0.3s;
            transition: 0.3s;
        }
        .btn_inactive2:active {
            transform: scale(0.90);
        }
        .btn_inactive2:hover {
            color: var(--primary);
            background-color: var(--hover);
            padding: 8px 10px;
            margin: -8px -10px;
            border-radius: 100px;
        }
        .btn-primary {
        background-color: var(--primary);
        color: var(--text2);
        padding: 8px 20px;
        border-radius: 20px;
        font-weight: bold;
        }
        .Logo {
        height: 50px;
        }
        .brand-name{
        font-size: larger;
        color: var(--primary);
        font-weight: 400;
        margin: 0;
        }












        /*L'image de presentation de la page*/
        .Logo-entier {
            margin-top: -20px;
            display: flex;
            width: 100%;
            transition: 0.3s;
            mask-image: linear-gradient(to bottom, black 70%, transparent 100%);
        }
        @media (max-width: 768px) {
        .Logo-entier {
            width: 100%;
        }
        }
        .Img-services {
            margin-top: -20px;
            display: flex;
            width: 100%;
            transition: 0.3s;
            mask-image: linear-gradient(
                to bottom,
                transparent 0%,
                black 10%,
                black 85%,
                transparent 100%);}
        @media (max-width: 768px) {
        .Img-services {
            width: 100%;
        }
        }
        .Img-Locaux-NexoraTech{
            display: flex;
            justify-self: center;
            border-radius: 0px;
            width: 100%;
            transition: transform 0.6s ease;
        }
        .Img-Locaux-NexoraTech:hover{
            transform: scale(0.9);
            border-radius: 15px;
            box-shadow: 5px 5px 20px 2px #0000005e;
        }





        .separator{
            height: 70px;
        }
        @media (max-width: 768px){
        .separator{
            height: 50px;
        }
        }





        /*Page d'arrivée*/
        .Landing-Page {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center
        }
        .btn-primary1 {
            align-items: center;
            justify-content: center;
            display: flex;
            margin-left: auto;
            margin-right: auto;
            gap: 20px;
            font-family: "Inter", sans-serif;
            font-size: 1.4rem;
            font-weight: 700;
            font-style: normal;
            color: var(--text);
            background-color: var(--bg);
            outline: 2px solid var(--outline);
            padding: 18px 40px;
            border-radius: 15px;
            border: none;
            transition: 0.3s;
        }
        .btn-primary1:hover {
            transform: scale(1.05);
            background-color: var(--bg);
            box-shadow: 5px 5px 20px 2px #0000005e;
        }
        @media (prefers-color-scheme: light){
        .btn-primary1:hover{
            box-shadow: 5px 5px 20px 2px #00000018;
        }
        }
        .btn-primary1:active {
            transform: scale(0.95);
        }
        @media (max-width: 768px) {
        .btn-primary1 {
            justify-self: center;
            font-weight: 500;
            font-size: 1rem;
            padding: 10px 20px;
        }
        }
        .arrow-icon{
            height: 2rem;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .Title-landing {
            z-index: 9;
            color: var(--text);
            font-family: "Inter", sans-serif;
            font-size: 2.8rem;
            font-weight: 700;
            text-align: center;
            margin-top: -60px;
            margin-bottom: -10px;
            transition: 0.3s;
        }
        .Title-landing-other{
            color: var(--text);
            font-family: "Inter", sans-serif;
            font-size: 2.8rem;
            font-weight: 700;
            text-align: center;
            margin-top: -25px;
            margin-bottom: -10px;
            transition: 0.3s;
        }
        @media (max-width: 768px) {
        .Title-landing {
            margin-left: 10px;
            margin-right: 10px;
            margin-top: -50px;
            margin-bottom: 10px;
            font-weight: 600;
            font-size: 2rem;
        }
        }
        .highlight-text {
            font-family: "Playfair Display", serif;
            font-optical-sizing: auto;
            font-weight: 500;
            font-style: italic;
        }
        .Subtitle-landing {
            color: var(--text);
            font-size: 1.4rem;
            font-weight: 100;
            text-align: center;
            padding: 0px 5px;
            transition: 0.3s;
        }
        @media (max-width: 768px) {
        .Subtitle-landing {
            font-weight: 300;
            font-size: 1rem;
            margin: 2%;
        }
        }






        /*Presentation de Nexora*/
        @keyframes fade-in {
            from { opacity: 0; transform: translateY(50px); }
            to { opacity: 1; transform: translateY(0); }
        }
        .presentation-container {
            flex-direction: column;
            align-items: center;
            justify-content: center;
            display:flex;
            margin-right: auto;
            margin-left: auto;
            width: 90%;
            max-width: 1000px;  
            background-color: var(--bg);
            outline: 2px solid var(--bg);
            padding: 5px 5% ;
            border-radius: 20px;
            gap: 5px;
            animation: fade-in linear both;
            animation-timeline: view();
            animation-range: entry 30% cover 40%;
            overflow: hidden;
        }
        @media (max-width: 768px) {
        .presentation-container {
            background-color: var(--bg);
            outline: 2px solid var(--bg);
            width: 94%;
            padding: 10px;
            margin:0%;
            border-radius: 25px;
        }
        }
        .About-container {
            color: var(--text);
            padding: 10px;
        }
        @media (max-width: 768px) {
        .About-container{
            padding: 0px;
        }
        }
        .Title-presentation{
            font-family: 'Inter';
            font-weight: 700;
            font-style: normal;
            font-size: 2rem;
            text-align: left;
        }
        @media (max-width: 768px) {
        .Title-presentation {
            font-size: 1.7rem;
            text-align: center;
        }
        }
        .Subtitle-presentation {
            font-size: 1.3rem;
            text-align: left;
        }
        @media (max-width: 768px) {
        .Subtitle-presentation {
            font-size: 1.2rem;
            font-weight: 300;
            text-align: start;
            padding: 2%;
        }
        }
        .email-form{
            display: flex;
            align-items:center;
            background-color: var(--header);
            outline: 2px solid var(--outline);
            padding: 10px 11px;
            gap: 11px;
            border-radius: 30px;
            transition: 0.3s;
        }
        @media (max-width: 768px) {
        .email-form{
            flex-wrap: wrap;
            flex-direction: column;
            margin-top: 0px;
            margin-bottom: 30px;
        }
        }
        input::placeholder {
            color: var(--text);
            opacity: 1;
        }
        .email-input{
            font-size: 1rem;
            color: black;
            background-color: var(--container);
            outline: 1px solid var(--outline);
            border: none;
            padding: 15px 30px;
            border-radius: 20px;
        }
        @media (max-width: 768px) {
        .email-input {
            font-size: 1rem;
        }
        }
        .email-input:active{
            outline: 5px solid var(--outline);
        }
        @media (prefers-color-scheme: dark) {
        .email-input{
            color: white;

        }
        }
        
        .btn-primary2 {
            font-size: 1rem;
            color: var(--text);
            background-color: var(--container);
            outline: 1px solid var(--outline);
            border: none;
            padding: 15px 30px;
            border-radius: 20px;
            transition: 0.2s;
        }
        @media (max-width: 768px) {
        .btn-primary2{
            font-size: 1rem;
            width: 100%;
        }
        }
        .btn-primary2:hover{
            transform: scale(1.1);
            background-color: var(--bg);
            box-shadow: 5px 5px 20px 2px #0000005e;
            cursor: pointer;
        }
        .btn-primary2:active{
            transform: scale(0.95);
        }
        .NexoraTech_presenter {
            justify-self: center;
            flex-direction: column;
            margin-top: 20px;
            margin-bottom: 15px;
            border-radius: 20px;
            display: flex; 
            margin-left: auto;
            margin-right: auto;
            width: 90%;
            transition: 0.3s;
        }
        @media (max-width: 768px) {
        .NexoraTech_presenter {
            width: 100%;
            border-radius: 15px;
            margin: 0px
        }
        }
        .NexoraTech_presenter:hover {
            box-shadow: 5px 5px 20px 2px rgba(0, 0, 0, 0.37);
        }
        @Media(prefers-color-scheme: light){
        .NexoraTech_presenter:hover{
            box-shadow: 5px 5px 20px 2px #00000018;
        }
        }












        /*texte d'en bas*/
        footer {
        width: 100%;
        max-width: 1000px;
        background-color: var(--bg);
        backdrop-filter: blur(5px);
        margin-top: 30px;
        margin-bottom: 30px;
        margin-left: auto;
        margin-right: auto;
        border-radius: 15px;
        display: flex;
        align-items: center;
        justify-content: center;
        }
        .footer-text {
        color: var(--text2);
        text-align: center;
        margin: 0;
        justify-content: center;
        }









        /*Overlay-plus*/
        .overlay {
        height: 100vh;
        width: 0;
        position: fixed;
        z-index: 20;
        top: 0;
        right: 0;
        backdrop-filter: blur(30px);
        background-color: var(--header);
        outline: 2px solid var(--outline);
        overflow-x: hidden;
        transition: 0.5s;
        box-shadow: -5px 0 25px rgba(0,0,0,0.5);
        border-top-left-radius: 15px;
        border-top-right-radius: 0px;
        border-bottom-left-radius: 15px;
        border-bottom-right-radius: 0px;
        margin-top: 10px;
        }

        .overlay-content {
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 25px;
        }
        .btn-overlay {
        text-decoration: none;
        color: var(--text);
        font-size: clamp(16px, 11vw, 48px);
        font-weight: 400;
        transition: 0.3s;
        display: block;
        border-radius: 100px;
        }

        .btn-overlay:active {
        transform: scale(0.90);
        }

        .btn-overlay:hover {
        color: var(--primary);
        background-color: var(--primaryinvert);  
        padding: 8px 30px;
        margin: -8px -30px;
        border-radius: 100px;
        }
        .closebtn {
        position: absolute;
        top: -10px;
        right: 25px;
        font-size: 60px;
        color: var(--text);
        text-decoration: none;
        transition: 0.3s;
        z-index: 2001;
        }
        .closebtn:active{
        transform: scale(0.90);
        }
        .closebtn:hover {
        color: var(--primary);
        }
        .SimDesign-container{
        display:flex;
        position: relative;
        align-items: center;
        justify-content: center;
        }
        .design-par{
        display: none;
        font-size: 2vh;
        color: var(--primary);
        }
        .Logo-SimDesign{
        display: none;
        width: 20%;
        height: auto;
        }
        @media (max-width: 768px) {
        .Logo-SimDesign{
        display: none;
        width: 40%;
        }
        }