/* Fil d'arianne */
#nav-breadcrumb .section-container {
    padding: 30px 20px;
}

#nav-breadcrumb  nav {
    display: flex;
    color: var(--grey);
    font-size: 14px;
    gap: 5px;
}

#nav-breadcrumb nav a {
    text-decoration: underline;
    color: var(--grey);
    display: block ruby;
}

#nav-breadcrumb nav a:hover {
    color: var(--brown);
}

#nav-breadcrumb nav span:last-of-type {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


/* CTA Section */
#cta {
    text-align: center;
    background: var(--background);
}

#cta .section-container {
    padding-top: 0;
}

#cta .content {
    padding: 16px;
    border-radius: var(--hight-radius);
    background: var(--white);
    box-shadow: var(--medium-shadow);
}

#cta h2 i {
    color: var(--brown);
}

#cta .content a {
    margin: 0 auto;
}


/* HeroSection with Bcg */
.hero-section {
    text-wrap: balance;
}

.hero-section .section-container {
    max-width: 1100px;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    background-position: 50%;
}

.hero-section .section-container:after {
    content: ' ';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, rgba(12, 12, 12, 0) 0%, rgba(12, 12, 12, 0.7) 100%);
}

.hero-section .content {
    position: relative;
    z-index: 50;
    color: white;
}

.hero-section h1 {
    text-wrap: balance;
    color: white;
}

.hero-section p {
    margin: 8px 0 32px 0;
}



    /* Pad Version */
    @media screen and (min-width: 768px) {
        /* Fil d'arianne */
        #nav-breadcrumb .section-container {
            padding: 30px 40px;
        }

        #nav-breadcrumb  nav {
            font-size: 15px;
        }


        /* CTA Section */
        #cta .content {
            padding: 24px;
            margin-left: auto;
            margin-right: auto;
        }


        /* HeroSection with Bcg */
        .hero-section p {
            margin: 32px 0 96px 0;
        }
    }


        /* Desktop Version */
        @media screen and (min-width: 992px) {
            /* Fil d'arianne */
            #nav-breadcrumb .section-container {
                padding: 30px 60px;
            }

            #nav-breadcrumb  nav {
                font-size: 16px;
            }


            /* CTA Section */
            #cta .content {
                padding: 32px;
            }


            /* HeroSection with Bcg */
            .hero-section .section-container {
                max-width: 1000px;
                border-radius: var(--hight-radius);
                overflow: hidden;
                box-shadow: var(--medium-shadow);
            }

            .hero-section p {
                margin: 32px 0 68px 0;
            }
        }