/* Navigation Fixed */
.header-navigation-fixed {
    display: none;
}

/* Swiper JS CSS */
.swiper {
    width: 100%;
    height: 100%;
}

.swiper-slide {
    display: flex;
    justify-content: center;
    align-items: center;
}

.swiper-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.swiper {
    width: 100%;
    height: 300px;
    margin-left: auto;
    margin-right: auto;
}

.swiper-slide {
    background-size: cover;
    background-position: center;
}

.section2Swiper2 {
    height: 80%;
    width: 100%;
}

.section2Swiper {
    height: 20%;
    box-sizing: border-box;
}

.section2Swiper .swiper-slide {
    width: 25%;
    height: 100%;
    opacity: 0.4;
}

.section2Swiper .swiper-slide-thumb-active {
    opacity: 1;
}

.swiper-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.section-2-swiper-button-next::after,
.section-2-swiper-button-prev::after {
    content: none !important;
}

/* Section 3 Grid */
.section3-grid {
    display: grid;
    column-gap: 35px;
    row-gap: 25px;
    grid-template-rows: 390px 182.5px 182.5px 390px;
    grid-template-columns: 1.5fr 1.5fr 1fr 1fr 1fr 1fr 1.5fr 1.5fr;
    grid-template-areas:
        "grid1 grid1 grid2 grid2 grid3 grid3 grid8 grid8"
        "grid4 grid4 grid5 grid5 grid5 grid5 grid8 grid8"
        "grid4 grid4 grid5 grid5 grid5 grid5 grid9 grid9"
        "grid6 grid6 grid6 grid7 grid7 grid7 grid9 grid9";
}

.grid1 {
    grid-area: grid1;
}

.grid2 {
    grid-area: grid2;
}

.grid3 {
    grid-area: grid3;
}

.grid4 {
    grid-area: grid4;
}

.grid5 {
    grid-area: grid5;
}

.grid6 {
    grid-area: grid6;
}

.grid7 {
    grid-area: grid7;
}

.grid8 {
    grid-area: grid8;
}

.grid9 {
    grid-area: grid9;
}


/* Responsiveness */
@media (max-width: 1440px) {

    /* Section 3 Grid */
    .section3-grid {
        grid-template-rows: 390px 390px 390px;
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-areas:
            "grid1 grid2 grid3"
            "grid4 grid5 grid8"
            "grid6 grid7 grid9";
    }
}

@media (max-width: 1024px) {

    /* Section 3 Grid */
    .section3-grid {
        grid-template-rows: 360px 360px 360px;
        column-gap: 20px;
        row-gap: 20px;
    }
}

@media (max-width: 768px) {

    /* Section 3 Grid */
    .section3-grid {
        column-gap: 10px;
        row-gap: 10px;
        grid-template-rows: 251px 247px 251px 331px 189px 331px;
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            "grid2 grid3"
            "grid1 grid1"
            "grid4 grid8"
            "grid5 grid5"
            "grid6 grid7"
            "grid9 grid9";
    }
}