@media (max-width: 991px) {
    header,
    header.sticky {
        padding: 0 20px 0 0 ;
        z-index: 1000;
    }

    .logo {
        font-size: 16px !important;
        font-weight: 500 !important;
        justify-content: flex-start;
    }

    header .logo .name {
        font-size: 17px !important;
        font-weight: 500 !important;
    }

    header .logo .socials {
        display: flex;
    }

    #menu {
        position: fixed;
        top: 55px;
        left: -100%;
        display: block;
        padding: 20px 50px;
        text-align: center;
        width: 100%;
        height: 100vh;
        background: #fff;
        transition: 0.5s;
        z-index: 999;
        border-top: 1px solid rgba(0,0,0,0.2);
    }

    #menu.active {
        left: 0;
    }

    header ul li a {
        color: #111;
        font-size: 24px;
        margin: 10px;
    }

    header.sticky .toggle {
        filter: invert(1);
    }

    #hamburger {
        display: block;
        cursor: pointer;
    }
    
    #hamburger.active .bar:nth-child(2) {
        opacity: 0;
    }
    
    #hamburger.active .bar:nth-child(1) {
        transform: translateY(10px) rotate(45deg);
        background-color: var(--dBlue);
    }
    
    #hamburger.active .bar:nth-child(3) {
        transform: translateY(-10px) rotate(-45deg);
        background-color: var(--dBlue);
    }

    section {
        padding: 100px 50px;
    }

    .banner {
        padding: 150px 50px 100px;
    }

    .banner h2{
        font-size: 1.5em;
    }

    .banner h3 {
        font-size: 1em;
    }

    .btn {
        margin-top: 10px;
        padding: 10px 20px;
        font-size: 16px;
    }

    .heading h2 {
            font-size: 24px;
    }

    .contentBx {
        padding: 50px;
    }

    .contentBx h3 {
        font-size: 20px;
    }

    .content {
        flex-direction: column;
    }

    .w50 {
        margin-bottom: 20px;
    }

    .timeline {
        display: flex;
        flex-direction: column;
        width: 80%;
        margin: auto;
    }

    .timeline .heading {
        margin: 0 auto 15px;
    }

    .card{
        width: 100%;
        padding: 10px;
        border-radius: 10px;
        display: block;
        margin: 20px 0;
        position: relative;
    }

    .card p {
        font-size: 16px;
    }

    .skills-container {
        padding: 0;
    }

    .work .contentBx {
        padding: 0;
    }

    .work h2 ~ p {
        padding: 0;
        text-align: left;
    }

    .work .acc-content {
        padding: 0 0 0 10px;
    }

    .veille .content iframe {
        width: 100%;
    }
    .contactInfo {
        margin: 20px 0;
    }
}

@media (max-width: 700px) {
    .work .dropdown-wrapper {
        flex-direction: column;
    
    }
    .work .dropdown-wrapper .dropdown {
        margin: 20px 0;
    }
}

@media (max-width: 600px){
    header,
    header.sticky {
        padding: 0 20px 0 0 ;
    }

    .logo {
        font-size: 16px !important;
        font-weight: 500 !important;
        justify-content: flex-start;
    }

    .banner {
        padding: 150px 20px 100px;
    }

    section {
        padding: 100px 20px;
    }

    .contentBx {
        padding: 20px;
    }

    .contentBx p, 
    .contactForm p {
        font-size: 14px;
    }

    .skill-logo {
        width: 2rem;
        height: auto;
    }

    .skill-badge {
        width: 5rem;
        height: 5rem;
    }

    .skill-name {
        font-size: 0.8em;
    }

    .veille .content iframe {
        width: 100%;
        height: 350px;
    }

    .work .acc-btn {
        font-size: 17px;
        padding: 20px 0;
    }

    .acc-btn:before {
        margin: 0 10px 0 0;
    }tBx

    .acc-content p,
    .acc-content ul li {
        font-size: 14px;
    }

    .missions-comp h4 {
        font-size: 17px;
        margin: 20px 0;
    }

    #pearltrees-container {
        width: 100%;
    max-height: 300px;
    }
}

@media (max-width: 450px){
    .missions-comp {
        flex-direction: column;
    }
}

@media (max-width: 375px){
    .banner h1 span {
        font-size: 1em;
    }
}