h2{
    text-align: center;
    font-size: 24pt;
}
.projet-content{
    max-width: 80%;
    margin: auto;
}
.projet-content a{
    text-decoration: none;
    color: #1f97ba;
}
.projet-content a:hover{
    color: #8fcaa7;
}
.projet-content .description p {
    max-width: 800px;
    margin:auto;
    margin-bottom: 20px;
}
img{
    width: 100%;
    border-radius: 40px;
    margin-top: 20px;
    margin-bottom: 20px;
}
.projet-content>div{
    margin-bottom: 40px;
}
/* Styles for projet not found */
main{
    min-height: 41vh;
}
.projet-not-found{
    text-align: center;
    margin-top: 100px;
}

/* Styles for COTS */
.cots .description{
    display: flex;
    gap: 40px; 
}

.cots .description img{
    width: 60%;
    height: auto;
}
.cots .description p{
    width: 40%;
    margin-top: 40px;
}
@media screen and (max-width: 768px) {
    .cots .description{
        flex-direction: column;
        gap: 0px;
    }
    .cots .description img{
        width: 100%;
        height: auto;
    }
    .cots .description p{
        width: 100%;
        margin-top: 20px;
    }
    
}

/* Styles for Icon for Hire */
.imageifh{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}
.imageifh img:last-child{
    grid-column: span 2;
    width: 50%;
    margin: auto;
}
.imageifh img{
    width: 100%;
    border-radius: 20px;
    margin: auto;
}
@media screen and (max-width: 768px) {
    .imageifh{
        grid-template-columns: 1fr;
    }
    .imageifh img:last-child{
        grid-column: span 1;
        width: 100%;
    }
}

/* Styles for Scottish Airlines */
iframe {
    width: 100%; 
    aspect-ratio: 16 / 9;
    height: auto;
    border-radius: 20px;
    margin-top: 20px;
    margin-bottom: 20px;
}

/* Styles for Service Civique */

.sc h3{
    color: #8fcaa7;
    margin-bottom: 10px;
    font-weight: bold;
}
h3:first-child{
    margin-top: 20px;
}
.sc>div{
    margin-bottom: 60px;
}
.animdifpublic{
    display: inline-flex;
    gap: 20px;
}
.animdifpublic img{
    width: 30%;
    display: inline-block;
    margin: auto;
}
.animdifpublic p{
    margin-top: 40px;
}

.triselectif{
    display: inline-flex;
    gap: 20px;
}
.triselectif p{
    margin-top: 40px;
}
.triselectifimg{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    width: 65%;
}
.triselectifimg img{
    width: 100%;
    border-radius: 20px;
    display: block;
    margin-top: 0;
    margin-bottom: 0;
}
@media screen and (max-width: 768px) {
    .animdifpublic, .triselectif{
        flex-direction: column;
        gap: 0px;
    }
    .animdifpublic p, .triselectif img{
        width: 100%;
        margin-top: 20px;
    }
    .animdifpublic img, .triselectif p{
        width: 100%;
        margin-top: 20px;
    }
    .triselectifimg{
        grid-template-columns: 1fr;
        width: 100%;
    }
}

/* Styles for Erasmus */

.diverasmus{
    display: flex;
    justify-content: center;
}
.diverasmus img{
    width: 30%;
    margin: auto;
}
.diverasmus p{
    width: 40%;
    margin-top: 40px;
    margin: auto
}
@media screen and (max-width: 768px){
    .diverasmus{
        flex-direction: column;
        gap: 20px;
    }
    .diverasmus img, .diverasmus p{
        width: 100%;
        margin-top: 20px;
    }
}

/* Styles for Photographie */
.photo-gallery{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}
.photo-gallery img{
    margin: auto;
}
@media screen and (max-width: 768px) {
    .photo-gallery{
        grid-template-columns: 1fr;
    }
}