:root,
:after,
:before {
    --color-white: #fefefe;
    --color-black: #1a1a1a;
    --color-blue: #1d5e98;
    --color-blue-hvr: #0f8c9b;
    --color-dark-blue: #151c2d;
    --color-gray: #575757;

    --color-navbar-transparent: #fefefecb;
}

/* For extremely small screen devices (595px and below) */
@media only screen and (max-width: 595px) {
    /*  */
}
 
/* Small screen devices (600px and above) */
@media only screen and (min-width: 600px) {
    /*  */
}
 
/* Medium screen devices (768px and above) */
@media only screen and (max-width: 768px) {
    .banner .left-col {
        width: 85%;
        padding: 2rem 0 3rem;
    }
    .banner .right-col svg {
        display: none;
    }

    .card-flex .card {
        flex-basis: 100%;
    }

    .text {
        bottom: -0.5rem;
    }

    .contact-form {
        width: 95%;
        padding: 2rem 2.5rem;
        border-radius: 0.3rem;
        position: relative;
    }
    .contact-form .form-inner > .form-left-col,
    .contact-form .form-inner > .form-right-col {
        flex-basis: 100%;
    }

    .footer-cols .footer-logo {
        flex-basis: 100%;
        text-align: center;
    }
    .footer-cols > li:not(.footer-logo) {
        margin: 6% 3% 0;
    }
}
 
/* Big screen devices (889px and above) */
@media only screen and (min-width: 889px) {
    /* header */
    .banner {
        gap: 0;
        flex-direction: row;
        align-content: center;
        padding: 9rem 1rem 0;
    }
    .banner-deco {
        margin: 0 0 -1rem;
    }
    /* expertise */
    .card-desc {
        font-size: 1.1rem;
    }
    /* realisations */
    .tabs-container {
        width: 90%;
    }

    .contact-form .form-inner {
        flex-direction: column;
        align-items: center;
    }
    .contact-form .form-inner > .form-left-col, .contact-form .form-inner > .form-right-col {
        width: 100%;
        flex-basis: 100%;
        padding: 1.5rem 2rem;
    }
    .contact-form .form-inner > .form-right-col {
        padding: 0 2rem 1.5rem 2rem;
    }
    .contact-form .form-inner > .form-left-col {
        padding: 1.5rem 2rem 0 2rem;
    }
}
 
/* Extra big screen devices (1200px and above) */
@media only screen and (min-width: 1200px) {
    .banner-deco {
        margin: -4rem 0 -1rem;
    }
    .expertises {
        padding: 0 2rem 1rem;
    }

    /* FOOTER */
    .footer-cols .footer-logo {
        flex-basis: 100%;
        text-align: center;
    }
    .footer-cols li:nth-child(4) {
        margin: 3% 3%;
    }
}

/* Larger screen devices (1600px and above) */
@media only screen and (min-width: 1600px) {
    .banner .left-col {
        padding: 0;
    }
    .banner-deco {
        margin: -10rem 0 -1rem;
    }
}