@font-face {
    font-family: Aptos;
    src: url('../fonts/Aptos.ttf') format('truetype');
}
body {
    font-family: 'Aptos', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 1rem;
    line-height: 1.6;
    color: #222;
    background-color: aliceblue;
}
.navbar-toggler {
    border-color: #FFF;
}
.navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba%28255, 255, 255, 1%29' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}
/* Navigation */
.navbar {
    background-color: #1a2847;
    position: sticky;
    top: 0;
    z-index: 100;
}
.navbar-brand img {
    border-radius: .5rem;
}
.nav-item {
    margin: 0 1rem;
}
.nav-link {
    color: white;
    border-radius: .5rem;
    transition: background-color 0.3s;
}
.nav-link:hover, .nav-link:focus {
    color: white;
    background-color: #2a5298;
}
/* Sections */
section {
    padding: 3rem 0;
    border-bottom: 1px solid #ddd;
}
section h2 {
    color: #1e3c72;
    text-align: center;
    position: relative;
    margin-bottom: 1rem;
}
section h2:after {
    content: '';
    display: block;
    width: 6rem;
    height: 4px;
    background-color: #2a5298;
    margin: 1rem auto 0;
}

.intro-text {
    font-size: 1.3rem;
    font-weight: 600;
    color: #1e3c72;
}
.par-text {
    font-size: 1.1rem;
    font-weight: 600;
}
.qsn-container {
    background-color: #fdfdfd;/* d5e7f5 */
    text-align: center;
    padding: 1rem;
    border: 2px dashed #122b59;
    border-radius: 1rem;
    box-shadow: 5px 5px 10px 0 rgba(18, 43, 89, 0.4);
}
.qsn-container p {
    font-size: 1.2rem;
    font-weight: 600;
    color: #122b59;
    padding-top: .5rem;
    margin-bottom: 0;
}

#osn-logo {
    width: 30rem;
}
.mission, .engagement {
    text-align: center;
    padding-top: 1rem;
    height: 100%;
}
.mission img, .engagement img {
    border-radius: .5rem;
}

.img-holder {
    border-radius: .5rem;
    overflow: hidden;
}
.img-holder img {
    transition: transform .75s ease;
}
.img-holder img:hover {
    transform: scale(1.1);
}

.expertise {
    color: #FFF;
    background-color: rgba(30, 60, 114, .9);
    padding: 1rem;
    border: 1px solid #1e3c72;
    border-radius: 1rem;
    margin-bottom: 1rem;
    box-shadow: 5px 5px 5px 0 rgba(18, 43, 89, 0.5);
}
.expertise h4 {
    font-size: 1.4rem;
    font-weight: 600;
    margin-bottom: 0;
}
.expertise ul {
    margin: .5rem 0;
}
.expertise li {
    font-size: 1.1rem;
    font-weight: 600;
}
#exp_a2, #exp_a4, #exp_a6, #exp_b1, #exp_b3, #exp_b5 {
    background-color: rgba(71, 60, 56, 0.8);
    border-color: #473c38;
}
#exp_a1, #exp_a3, #exp_a5, #exp_b1, #exp_b3, #exp_b5 {
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
}
#exp_a1 {
    background-image: url('../pics/blueinox.jpg');
}
#exp_a3 {
    background-image: url('../pics/kitchen.jpg');
}
#exp_a5 {
    background-image: url('../pics/paint.jpg');
}
#exp_b1 {
    background-image: url('../pics/wood.jpg');
}
#exp_b3 {
    background-image: url('../pics/hotel.jpg');
}
#exp_b5 {
    background-image: url('../pics/supplies.jpg');
}

.service-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: #fefefe;
    text-align: center;
    padding: 1rem;
    height: 100%;
    border: 1px solid #122b59;
    border-radius: 1rem;
    box-shadow: 5px 5px 0 0 rgba(18, 43, 89, .3);
    transition: transform 0.3s, box-shadow 0.3s;
}
.service-container:hover {
    transform: translateY(-5px);
    box-shadow: 5px 5px 10px 0 rgba(18, 43, 89, .4);
}
.service-container p {
    font-size: 1.2rem;
    font-weight: 600;
    color: #122b59;
    padding-top: .5rem;
    margin-bottom: 0;
}

#pourquoi ul {
    list-style: none;
    margin: 2rem 0 0;
}
#pourquoi ul li {
    display: flex;
    justify-content: start;
    align-items: center;
    font-size: 1.1rem;
    font-weight: 600;
    padding-bottom: 1.5rem;
}
#pourquoi ul img {
    margin-right: 1rem;
}
#pourquoi .div-holder {
    display: flex;
    justify-content: center;
    align-items: end;
    height: 100%;
}
#pourquoi .img-holder img {
    border-radius: .5rem;
}

.slider-holder {
    position: relative;
}
.slider-control {
    margin-bottom: .5rem;
}
.industrie, .solution {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: grab;
}
.industrie:active, .solution:active {
    cursor: grabbing;
}
.industrie-img img, .solution-img img {
    border-top-left-radius: .5rem;
    border-top-right-radius: .5rem;
}
.industrie-text, .solution-text {
    background-color: #1e3c72;
    color: #FFF;
    text-align: center;
    padding: .5rem 0;
    border-bottom-left-radius: .5rem;
    border-bottom-right-radius: .5rem;
}
.solution-text {
    background-color: #2a5298;
}
.industrie-text p, .solution-text p {
    font-size: 1.1rem;
    margin-bottom: 0;
}
#industrie-control, #solution-control {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
#industrie-prev, #industrie-next {
    background-color: #1e3c72;
    border: 1px solid #14284d;
    padding: .25rem .75rem;
}
#solution-prev, #solution-next {
    background-color: #2a5298;
    border: 1px solid #234580;
    padding: .25rem .75rem;
}

.brands {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
}
.brands img {
    width: 250px;
    cursor: pointer;
}

.contact-text {
    color: #2a5298;
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0;
}
#contact .card {
    background-image: url('../pics/osn-cogs.png');
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
}
#contact h5 {
    color: #1e3c72;
    font-size: 1.4rem;
    margin-bottom: .5rem;
}
.card-p, .card-a {
    color: #333;
    font-size: 1.2rem;
    font-weight: 500;
    margin-bottom: 0;
    text-decoration: none;
}
#contact a:hover {
    color: #0a58ca;
    text-decoration: underline;
}
/* Footer #1a2847*/
footer {
    background-color: #1e3c72;
    color: white;
    text-align: center;
    padding: .5rem;
}
footer p {
    font-size: 1.1rem;
    font-weight: 500;
    margin: 0;
}
/* Responsive */
@media (max-width: 768px) {
    nav ul {
        flex-direction: column;
    }
    nav a {
        padding: 12px 15px;
        text-align: center;
    }
    section {
        padding: 40px 15px;
    }
    section h2 {
        font-size: 1.6em;
    }
}