/* ========================================
   HOME.CSS - RESPONSIVE STYLES
   Extracted from assets/css/home.css
   ======================================== */

/* Tablet - 991px */
@media screen and (max-width: 991px) {
    .home {
        padding: 0 4%;
    }
}

/* Tablet - 840px (Realisation Grid Layout) */
@media screen and (max-width: 840px) {
    .realisation {
        position: relative;
        padding: 20px 0;
        overflow-x: hidden;
    }

    .realisation .content {
        display: none;
    }

    .realisation .image {
        flex: 0 0 100%;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: stretch;
        gap: 5rem;
        padding: 20px 4%;

        position: relative;
        width: 100%;
        height: fit-content;
    }

    .realisation .heading {
        flex: 0 0 100%;
    }

    .realisation .image .item {
        box-sizing: border-box;
        position: static;
        flex: 1 1 calc((100% - 5rem) / 2);
        min-width: 300px;
        max-width: min(480px, calc(100% - 40px));
        margin: 0 auto;
        background-color: transparent;

        /* Force equal heights for all items */
        display: flex;
        flex-direction: column;
        gap: 3rem;
        justify-content: flex-start;
        /* min-height: 550px; */

        background-color: var(--bg-color);
        padding: 3rem;
        border-radius: 2rem;
        box-shadow: 0 0 8px -3px rgba(110, 110, 110, 0.25);
        transition: .175s;
    }

    .realisation .image .item:hover {
        box-shadow: 0 0 15px 7px rgba(58, 58, 58, 0.15);
        transform: scale(101%);
    }

    .realisation .image .item img {
        width: 100%;
        height: 150px;
        object-fit: contain;
        object-position: center;
        transform: rotate(0deg) !important;
        box-shadow: 0 5px 7px -3px #7c7c7c1e;
        border-radius: 1rem;
    }

    .realisation .image .realisation_about {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 1rem;
        text-align: center;
    }

    /* .realisation .realisation_about .realisation_description {
        font-size: 1.4rem;
    } */

    .btn-box .btn.realisation_link {
        width: 20rem;
        margin: 0 auto;
    }

    .realisation .controller {
        display: flex;
        /* flex-direction: column; */
        gap: 1rem;
    }

    .realisation .controller .slider-btn {
        cursor: pointer;
    }

    .realisation .controller .slider-btn button::before {
        background-color: var(--bg-color);
    }
}

/* Mobile - 768px */
@media screen and (max-width: 768px) {
    .home-imgHover {
        pointer-events: none;
        background-color: var(--bg-color);
        opacity: 0.6;
    }
}

/* Mobile - 700px */
@media screen and (max-width: 700px) {
    .realisation .image .item img {
        height: auto;
        max-width: 100%;
    }
}

/* Mobile - 575px */
@media screen and (max-width: 575px) {
    html {
        font-size: 50%;
    }

    .home .home-content h1 {
        display: flex;
        flex-direction: column;
    }

    .home .home-sci {
        width: 160px;
    }

    .home .home-sci a {
        width: 38px;
        height: 38px;
    }
}

/* Mobile - 462px */
@media screen and (max-width: 462px) {
    .home {
        min-height: 600px;
        height: 100vh;
    }

    .home .btn-box {
        width: 100%;
        flex-direction: column;
        gap: 1rem;
        height: fit-content;
    }

    .home .btn-box .btn {
        min-height: 5rem;
    }

    .home .home-content h1 {
        font-size: 5.2rem;
    }

    .education {
        padding: 10rem 4% 5rem 5%;
    }

    .contact form .input-box .input-field {
        width: 100%;
    }
}

/* Mobile - 371px */
@media screen and (max-width: 371px) {
    .home {
        justify-content: center;
    }

    .home .home-content {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .home .btn-box {
        align-items: center;
    }

    .home-sci {
        margin: 0 auto;
    }
}