/* =========================================================

   HERO EMAIL SERVICE

========================================================= */



.hero_navigation_internet {



    position: relative;



    overflow: hidden;



    background: #020817;



    min-height: 420px;



    padding: 28px 40px 40px;



    display: flex;



    align-items: center;



}



/* =========================================================

   BACKGROUND

========================================================= */



.hero_navigation_internet__background {



    position: absolute;



    inset: 0;



    background-image: url('http://embsinformatique.fr/wp-content/uploads/2026/05/bg-navigation-internet-hero.png');



    background-repeat: no-repeat;



    background-position: center right;



    background-size: contain;



    opacity: 0.95;



}



/* =========================================================

   CONTAINER

========================================================= */



.hero_navigation_internet__container {



    position: relative;



    z-index: 2;



    width: 100%;



   



    margin: 0 auto;



}



/* =========================================================

   BREADCRUMB

========================================================= */



/* =========================================================

   BREADCRUMB

========================================================= */



.hero_navigation_internet__breadcrumb {



    display: flex;



    align-items: center;



    gap: 8px;



    font-size: 12px;



    color: rgba(255,255,255,0.7);



    margin-top: 32px;



    margin-bottom: 42px;



}



.hero_navigation_internet__breadcrumb a {



    color: rgba(255,255,255,0.78);



    transition: var(--transition-fast);



}



.hero_navigation_internet__breadcrumb a:hover {



    color: var(--color-white);



}



.hero_navigation_internet__breadcrumb-current {



    color: #3b82f6;



}



/* =========================================================

   CONTENT

========================================================= */



.hero_navigation_internet__content {



    display: flex;



    align-items: center;



    gap: 34px;

    margin-top: 8rem;



}



/* =========================================================

   ICON

========================================================= */



/* =========================================================

   ICON

========================================================= */



.hero_navigation_internet__icon {



    width: 96px;

    height: 96px;



    border-radius: 26px;



    background:

        linear-gradient(

            180deg,

            #3b82f6 0%,

            #2563eb 100%

        );



    display: flex;



    align-items: center;



    justify-content: center;



    box-shadow:

        0 14px 40px rgba(37,99,235,0.24);



    flex-shrink: 0;



}



.hero_navigation_internet__icon svg {



    width: 48px;

    height: 48px;



    color: #ffffff;



}



/* =========================================================

   TEXT

========================================================= */



.hero_navigation_internet__text {



    max-width: 560px;



}



/* =========================================================

   SUBTITLE

========================================================= */



.hero_navigation_internet__subtitle {



    display: block;



    font-size: 12px;



    font-weight: 700;



    letter-spacing: 1px;



    color: #3b82f6;



    margin-bottom: 10px;



}





/* =========================================================

   TITLE

========================================================= */



.hero_navigation_internet__title {



    font-size: 56px;



    line-height: 1.02;



    font-weight: 800;



    color: #ffffff;



    margin-bottom: 18px;



    letter-spacing: -0.04em;



}



/* =========================================================

   DESCRIPTION

========================================================= */



.hero_navigation_internet__description {



    font-size: 16px;



    line-height: 1.8;



    color: rgba(255,255,255,0.78);



    margin-bottom: 30px;



    max-width: 520px;



}



/* =========================================================

   ICON

========================================================= */



.hero_navigation_internet__icon {



    width: 96px;

    height: 96px;



    border-radius: 26px;



    background:

        linear-gradient(

            180deg,

            #3b82f6 0%,

            #2563eb 100%

        );



    display: flex;



    align-items: center;



    justify-content: center;



    box-shadow:

        0 14px 40px rgba(37,99,235,0.24);



    flex-shrink: 0;



}



/* =========================================================

   SUBTITLE

========================================================= */



.hero_navigation_internet__subtitle {



    display: block;



    font-size: 12px;



    font-weight: 700;



    letter-spacing: 1px;



    color: #3b82f6;



    margin-bottom: 10px;



}



/* =========================================================

   BUTTON

========================================================= */



.hero_navigation_internet__button {



    display: inline-flex;



    align-items: center;



    gap: 10px;



    padding: 14px 24px;



    border-radius: 12px;



    background:

        linear-gradient(

            135deg,

            #3b82f6,

            #2563eb

        );



    color: #ffffff;



    font-size: 14px;



    font-weight: 600;



    transition:

        transform 0.25s ease,

        box-shadow 0.25s ease;



    box-shadow:

        0 12px 30px rgba(37,99,235,0.24);



}



.hero_navigation_internet__button:hover {



    background: #2563eb;



    transform: translateY(-2px);



    box-shadow:

        0 16px 36px rgba(37,99,235,0.34);



}



/* =========================================================

   RESPONSIVE

========================================================= */



@media (max-width: 1200px) {



    .hero_navigation_internet {



        min-height: 360px;



        background-position: right center;



    }



    .hero_navigation_internet__title {



        font-size: 44px;



    }



}



@media (max-width: 992px) {



    .hero_navigation_internet {



        padding: 28px 24px 34px;



        min-height: auto;



    }



    .hero_navigation_internet__background {



        background-size: cover;



        opacity: 0.28;



    }



    .hero_navigation_internet__content {



        flex-direction: column;



        align-items: flex-start;



        gap: 24px;



    }



    .hero_navigation_internet__title {



        font-size: 38px;



    }



}



@media (max-width: 768px) {



    .hero_navigation_internet {



        padding: 22px 18px 28px;



    }



    .hero_navigation_internet__breadcrumb {



        margin-bottom: 28px;



        font-size: 11px;



    }



    .hero_navigation_internet__icon {



        width: 74px;

        height: 74px;



        border-radius: 20px;



    }



    .hero_navigation_internet__icon svg {



        width: 36px;

        height: 36px;



    }



    .hero_navigation_internet__title {



        font-size: 30px;



    }



    .hero_navigation_internet__description {



        font-size: 14px;



        line-height: 1.7;



    }



    .hero_navigation_internet__button {



        width: 100%;



        justify-content: center;



    }



}