@font-face{
    font-family: poppins-light;
    src: url("../fonts/Poppins-Light.otf");
}

@font-face{
    font-family: poppins-regular;
    src: url("../fonts/Poppins-Regular.otf");
}

@font-face{
    font-family: poppins-semiBold;
    src: url("../fonts/Poppins-SemiBold.otf");
}

@font-face{
    font-family: poppins-bold;
    src: url("../fonts/Poppins-Bold.otf");
}

@font-face{
    font-family: poppins-extraBold;
    src: url("../fonts/Poppins-ExtraBold.otf");
}

body{
    font-family: poppins-light !important;
}

.nav-link{
    font-size: 14px !important;
    font-family: poppins-regular;
    color: #ffffff !important;
}

#panel h1{
    font-family: poppins-bold !important;
}

.nav-item:first-of-type .nav-link{
    font-family: poppins-semiBold;
}

.section-title{
    color: #333333;
    font-weight: 700;
    font-family: poppins-bold;
}

.card-title{
    font-weight: 700;
    font-family: poppins-bold;
}

.activity-card{
    padding-left: 10px;
    padding-right: 10px;
    border: none !important;
    min-width: 300px !important;
}

.activity-card .card-body{
    border-radius: 1.5em;
}

.index-card-img{
    margin-left: auto;
    margin-right: auto;  
    display: block;
    margin-bottom: 20px;
}

.card-text{
    font-size: 15px;
    text-align-last: center;
}

.advantage-card .card-text{
    font-size: 14.5px;
}

.index-card-title {
    height: 70px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.demande-devis-row{
    margin-top:70px;
    padding-top: 30px;
    background-image: url("../images/Fichier 7.png");
    background-repeat: no-repeat; 
    background-size: cover;
    display:flex;
    flex-direction: column;
    justify-content: center;
}

.demande-devis-row > #demande-devis-button{
    margin: auto !important;
    margin-top: 20px !important;
}

.demande-devis-row>div:last-child{
    margin-bottom: 30px !important;
}

.demande-devis-row > div{
    margin: auto !important;
    margin-top: 20px !important;
}

.demande-devis-row > p{
    margin: auto !important;
    margin-top: 20px !important;
}

#demande-devis-button{
    width: 250px;
    background: none;
    border: none;
    background-image: url("../images/Fichier 14.png");
    background-repeat: no-repeat;
    background-size: 100% 50px; 
}

#demande-devis-button>span{
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    height: 50;
    width: 80%;
}

.advantage-card{
    padding-left: 30px;
    padding-right: 30px;
    border: none !important;
    min-width: 250px !important;
}

#short-presentation{
    font-family: poppins-semiBold;
}

#full-presentation{
    font-size: 15px;
    text-align-last: center;
}

.text-selection{
    font-family: poppins-semiBold;
}

#presentation{
    padding-top: 30px;
    margin-top: 50px;
}

#presentation>div:last-child{
    padding-bottom: 200px;
}

.row{
    padding-left: 0px !important;
    padding-right: 0px !important;
    margin-right: 0px !important;
    margin-left: 0px !important;
}

.footer-ref{
    padding: 0 15px !important;
    display: block;
    border-left: 0.2em yellow solid;
    font-size: 12px !important;
}

.footer-ref:first-child{
    border-left: none;
}

#footer>div>a img{
    margin-left: 10px;
    margin-right: 10px;
}

#the-cafe-container{
    background-image: url("../images/Fichier 11.png");
    background-repeat: no-repeat; 
    background-size: 100%;
    display: block;
    padding-top: 150px;
    padding-right: 0px;
    padding-left: 0px;
    margin-bottom: 80px;
    margin-top: -200px;
}

#the-cafe-container>.row{
    background-color: white;
}

#the-cafe-container>.row:last-child{
    border-bottom-left-radius: 1em;
    border-bottom-right-radius: 1em;
}

button>span{
    font-size: 14px !important;
    font-family: poppins-regular !important;
}

#the-cafe-container form{
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-top: 10px;
}

#the-cafe-container form>div{
    margin-top: 5px;
    margin-bottom: 10px;
}

#send-info-button{
    margin: auto !important;
    width: 150px;
    background: none;
    border: none;
    background-image: url("../images/Fichier 14.png");
    background-repeat: no-repeat;
    background-size: 100% 40px; 
}

#the-cafe-container form>button{
    margin-top: 15px !important;
    margin-bottom: 25px !important;
}

#send-info-button>span{
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    height: 40;
    width: 80%;
}

.title-decoration{
    margin: auto !important; 
    margin-right: 10px !important; 
    margin-left: 0 !important;
}

#the-img{
    margin-left: 10px;
    margin-right: 10px;
}

#coffee-img{
    margin-left: 10px;
    margin-right: 10px;
}

#sn-row{
    margin-top: 30px;
    margin-bottom: 20px;
}

#french-web{
    background-image: url("../images/Fichier 2.png");
    background-repeat: no-repeat; 
    background-size: cover;
    display: block;
    min-height: 568px;
}

#french-web>div:first-child{
    padding:30px;
}

.yellow-button{
    background: none;
    border: none;
    background-image: url("../images/Fichier 19.png");
    background-repeat: no-repeat;
    background-size: 100% 40px; 
}

.yellow-button>span{
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    height: 40;
    width: 80%;
    margin-right: 50px;
}

#copyright{
    margin-top: 20px;
    font-size: 0.8em;
}

@media only screen and (max-width: 975px) {
    nav {
        background-color: #ffffff00;
        padding: 0 !important;
    }

    nav .nav-item:hover{
        background-color: rgba(41, 43, 44, 0.5);
        border-radius: 0.6em;
        padding-left: 3px;
    }

    #panel{
        background-color: rgba(41, 43, 44, 0.4);
        border-radius: 0.4em;
        margin-left: 10px;
        margin-right: 10px;
    }
    .navbar-collapse {
        background: #0661eb;
        padding: 15px;
    }
    .navbar-dark .navbar-toggler {
        color: #fff !important;
        border-color: #fff !important;
    }
}

.card.activity-card:hover .card-body {
    background: #007bff!important;
}
.card.activity-card:hover .card-body .card-title,
.card.activity-card:hover .card-body .card-text {
    color: #fff!important;
}