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

   HERO EMAIL SERVICE

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



.hero-email-service {



    position: relative;



    overflow: hidden;



    background: #020817;



    min-height: 420px;



    padding: 28px 40px 40px;



    display: flex;



    align-items: center;



}



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

   BACKGROUND

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



.hero-email-service__background {



    position: absolute;



    inset: 0;



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



    background-repeat: no-repeat;



    background-position: center right;



    background-size: contain;



    opacity: 0.95;



}



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

   CONTAINER

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



.hero-email-service__container {



    position: relative;



    z-index: 2;



    width: 100%;



    



    margin: 0 auto;



}



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

   BREADCRUMB

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



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

   BREADCRUMB

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



.hero-email-service__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-email-service__breadcrumb a {



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



    transition: var(--transition-fast);



}



.hero-email-service__breadcrumb a:hover {



    color: var(--color-white);



}



.hero-email-service__breadcrumb-current {



    color: #a855f7;



}



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

   CONTENT

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



.hero-email-service__content {



    display: flex;



    align-items: center;



    gap: 34px;



    margin-top:8rem;



}



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

   ICON

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



.hero-email-service__icon {



    width: 96px;

    height: 96px;



    border-radius: 26px;



    background:

        linear-gradient(

            180deg,

            #a855f7 0%,

            #7e22ce 100%

        );



    display: flex;



    align-items: center;



    justify-content: center;



    box-shadow:

        0 14px 40px rgba(139,92,246,0.24);



    flex-shrink: 0;



}



.hero-email-service__icon svg {



    width: 48px;

    height: 48px;



    color: #ffffff;



}



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

   TEXT

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



.hero-email-service__text {



    max-width: 560px;



}



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

   SUBTITLE

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



.hero-email-service__subtitle {



    display: block;



    font-size: 12px;



    font-weight: 700;



    letter-spacing: 1px;



    color: #a855f7;



    margin-bottom: 10px;



}



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

   TITLE

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



.hero-email-service__title {



    font-size: 56px;



    line-height: 1.02;



    font-weight: 800;



    color: #ffffff;



    margin-bottom: 18px;



    letter-spacing: -0.04em;



}



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

   DESCRIPTION

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



.hero-email-service__description {



    font-size: 16px;



    line-height: 1.8;



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



    margin-bottom: 30px;



    max-width: 520px;



}



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

   BUTTON

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



.hero-email-service__button {



    display: inline-flex;



    align-items: center;



    gap: 10px;



    padding: 14px 24px;



    border-radius: 12px;



    background:

        linear-gradient(

            135deg,

            #9333ea,

            #7e22ce

        );



    color: #ffffff;



    font-size: 14px;



    font-weight: 600;



    transition:

        transform 0.25s ease,

        box-shadow 0.25s ease;



    box-shadow:

        0 12px 30px rgba(147,51,234,0.24);



}



.hero-email-service__button:hover {



    background: #7e22ce;



    transform: translateY(-2px);



    box-shadow:

        0 16px 36px rgba(147,51,234,0.34);



}



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

   RESPONSIVE

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



@media (max-width: 1200px) {



    .hero-email-service {



        min-height: 360px;



        background-position: right center;



    }



    .hero-email-service__title {



        font-size: 44px;



    }



}



@media (max-width: 992px) {



    .hero-email-service {



        padding: 28px 24px 34px;



        min-height: auto;



    }



    .hero-email-service__background {



        background-size: cover;



        opacity: 0.28;



    }



    .hero-email-service__content {



        flex-direction: column;



        align-items: flex-start;



        gap: 24px;



    }



    .hero-email-service__title {



        font-size: 38px;



    }



}



@media (max-width: 768px) {



    .hero-email-service {



        padding: 22px 18px 28px;



    }



    .hero-email-service__breadcrumb {



        margin-bottom: 28px;



        font-size: 11px;



    }



    .hero-email-service__icon {



        width: 74px;

        height: 74px;



        border-radius: 20px;



    }



    .hero-email-service__icon svg {



        width: 36px;

        height: 36px;



    }



    .hero-email-service__title {



        font-size: 30px;



    }



    .hero-email-service__description {



        font-size: 14px;



        line-height: 1.7;



    }



    .hero-email-service__button {



        width: 100%;



        justify-content: center;



    }



}