.App {
    text-align: center;
    font-family: Inter, sans-serif;
}

.App-logo {
    height: 60vmin;
    pointer-events: none;
}


@media (prefers-reduced-motion: no-preference) {
    .App-logo {
        height: calc(20px + 2vmin);
        width: calc(40px + 2vmin);
    }
}

.reveal {
    opacity: 0;
    transform: translateY(-30px);
}

.reveal-visible {
    opacity: 1;
    transform: translateY(0);
    transition: transform 0.8s ease-out, opacity 0.8s ease-out;
}

.App-header {
    background-color: #FFFFFF;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    font-size: calc(2px + 2vmin);

}

.App-Objectifs {
    display: flex;
    flex-direction: row;

}

#App-videoMaquette {
    height: calc(500px + 2vmin);
    width: calc(500px + 2vmin);
}

.App-link {
    color: #61dafb;
}

.App-footer {
    background-color: #000;
}


.brand-name {
    text-decoration: none;
    color: #FFF;
    font-size: 40px;
    margin-left: 3rem;
}

.footer {
    background-color: #000;
    width: 100%;
    bottom: 0;
    color: white;
}

.divInfo {
    flex-direction: row;
    display: flex;
    justify-content: space-around;
}

.Footer-logo {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}

.logo-bottom {
    height: 100px;
    width: 150px;
}

.App-Slogan {
    background-image: url("../galaxie.webp");
    text-align: justify;
}

mark {
    background-color: #FFFFFF;
}

.App-SloganH3 {
    font-size: 25px;
    padding-left: 4%;
}

.App-SloganH2 {
    font-size: 40px;
    font-weight: bold;
    padding-bottom: 5%;
    padding-left: 4%;
    padding-right: 4%;
}

.App-CentrerDivSlogan {
    padding-top: 30%;
}

.App-Logo {
    width: 10%;
}

.App-DimensionDiv {
    width: 50%;
}

.App-DimensionDiv2 p {
    font-size: 17px;
}

.App-BasitMarkBody {
    justify-content: center;
    align-items: center;
    display: flex;
}

h1 {
    font-size: 50px;
}

.video {
    border-radius: 20px;
!important;
}

.App-MaquetteBasit {
    height: 20%;
    width: 70%;

}

.App-DivAccueil {
    height: 100%;
    width: 100%;
    /*centrer la div */
    display: flex;
    justify-content: center;
    align-items: center;

}

.App-DivBasit {
    color: #FFFFFF;
    justify-content: center;
    display: flex;
}

.App-CenterBasit {
    height: 100%;
    width: 70%;
}

.App-MaquetteBasit2 {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.App-MaquetteBasit2 div {
    text-align: center;
    flex-basis: 25%;
    padding: 10px
}

.App-MaquetteBasit2 p {
    color: #FFFFFF;
    font-size: 20px;
}

.App-Accueil {
    width: 100%;
    border-radius: 20px;
}

#Accueil {
    padding: 35px;
}

.App-Search {
    width: 100%;
    border-radius: 20px;
}

#Search {
    padding: 35px;
}

.App-InfoCommande {
    width: 100%;
    border-radius: 20px;
}

#InfoCommande {
    padding: 35px;
}

.App-CreateBasit {
    width: 100%;
    border-radius: 20px;
}

#CreateBasit {
    padding: 35px;
}

#rowMaquette {
    background-image: url("../PurpleSpace.webp");
}

.App-DivGeneral {
    background-image: url("../PurpleSpace.webp");
}

.App-Explication p {
    text-align: center;
    font-size: 20px;
}

.App-Explication {
    justify-content: center;
    display: flex;
}

.App-DimensionExplication {
    height: 100%;
    width: 70%;
}

.App-DivInteret {
    align-items: center;
    padding: 50px;
}

.App-Particulier {
    height: 100%;
    padding: 15px;
    border: #000000 solid;
    margin: 15px;
}

.App-Createur {
    height: 100%;
    padding: 15px;
    border: #000000 solid;
    margin: 15px;
}

.App-Professionnel {
    height: 100%;
    padding: 15px;
    border: #000000 solid;
    margin: 15px;
}

.linkedin {
    color: #000;
!important;
}

.App-Accueil2 {
    width: 100%;
    border-radius: 20px;
    height: 50%;
}
.nav-tabs {
    --bs-nav-tabs-border-color: #FFF; !important;
    font-weight: bold; !important;
}
.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
    color: #af4efb; !important;
}

:root{
    --bs-link-color: dark; !important;
    --bs-link-hover-color: #af4efb; !important;
}
#linkedin {
    color: #000;
!important;
}

#instagram {
    color: #000;
!important;
}

.btn-outline-primary {
    color: #af4efb;
!important;
    border-color: #af4efb;
!important;
}

.btn-outline-primary:hover {
    color: #fff;
!important;
    background-color: #af4efb;
!important;
    border-color: #af4efb;
!important;
}

.btn-primary {
    color: #fff;
!important;
    background-color: #af4efb;
!important;
    border-color: #af4efb;
!important;
}

.custom-image-size {
    width: 100%; !important;
    max-width: 700px; !important;
}


.form-check-input:checked {
    background-color: #af4efb;
!important;
    border-color: #af4efb;
!important;
    color: #af4efb;
!important;
}

.banner-section {
    position: relative !important;
    width: 100% !important;
    height: 50vh !important;
    background-image: url("../bandeau.png") !important;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    /* Vous pouvez ajouter un filtre si nécessaire */
}

.banner-content {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    /* Optionnel : ajouter un arrière-plan semi-transparent pour le texte */
}

.banner-title {
    color: white !important;
    font-size: 2em !important;
    /* Autres styles pour le titre */
}


.accordion-button::after {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-plus-lg" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M8 2a.5.5 0 0 1 .5.5v5h5a.5.5 0 0 1 0 1h-5v5a.5.5 0 0 1-1 0v-5h-5a.5.5 0 0 1 0-1h5v-5A.5.5 0 0 1 8 2"/></svg>'); !important;
}
.accordion-button:not(.collapsed)::after {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-dash-lg" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M2 8a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11A.5.5 0 0 1 2 8"/></svg>'); !important;
}

@media (min-width: 770px) {
    #carousel1 {
        height: 400px
    }

    #carousel2 {
        height: 400px
    }

    #carousel3 {
        height: 400px
    }

}