.arrow-icon {
    width: 50px;
    height: 50px;
    transition: transform 0.3s ease;
}

.arrow-icon:hover {
    transform: translateY(10px);
    filter: brightness(0) saturate(100%) invert(50%) sepia(100%) saturate(10000%) hue-rotate(0deg); /* Change color using filter */
}

body, html {
    margin: 0;
    padding: 0;
    height: 100%;
}

.bounce {
    display: inline-block;
    position: relative;
    -moz-animation: bounce 2.5s infinite linear;
    -o-animation: bounce 2.5s infinite linear;
    -webkit-animation: bounce 2.5s infinite linear;
    -webkit-animation: bounce 2.5s infinite linear;
    animation: bounce 2.5s infinite linear;
    color: 000;
    width: 30px;
}

.container {
    display: flex;
    justify-content: space-between;
    box-sizing: border-box;
}
.column {
    display: flex;
    flex-direction: column;
    width: 25%; /* Adjust column width */
    gap: 10px; /* Adjust gap between images */
}

.column.full-vertical{
    display: flex;
    flex-direction: column;
    width: 12%; /* Adjust column width */
    gap: 10px; /* Adjust gap between images */
}


.column.full-vertical img{ width: 100%;
    height: 15vh;
    object-fit: cover; /* Ensure images fill the space */
}


.column.one-vertical{
    display: flex;
    flex-direction: column;
    width: 12%; /* Adjust column width */
    gap: 10px; /* Adjust gap between images */
}


.column.one-vertical img{ width: 100%;
    height: 100%;
    object-fit: cover; /* Ensure images fill the space */
}

.column img {
    width: 57%;
    height: 15vh;
    object-fit: cover; /* Ensure images fill the space */
}

.column .full-height {
    width: 100%;
    height: 30vh;
    object-fit: cover;
}


.column .full-vert {
   
    width: 25vw;
    height: 14.7vh;
    object-fit: cover;
}

.column .row {
    display: contents;
    flex-direction: row;
    gap: 10px; /* Adjust gap between images in a row */
}
.column .row img {
   
    width: 94vw;
    height: 52vw;
}
/* Common class for Picture 3 and Picture 7 */
.full-height {
    height: 100%; /* Full height for these pictures */
}
/* Specific styles for Picture 1 and Picture 2 */

/* .column:first-child img:nth-child(1),
.column:first-child img:nth-child(2) {
    height: calc(50% - 5px); /* Half the container height minus half the gap 
} */



/* Specific styles for Picture 4, 5, 10, 11, 12 */
/* .column:nth-child(2) img,
.column:nth-child(4) img {
    height: 100%; /* Full height for these pictures 
} */
/* Responsive adjustments */
@media (max-width: 768px) {
    .container {
        flex-direction: column;
    }
    .column {
        width: 100%; /* Full width on smaller screens */
    }
    .column:first-child img:nth-child(1),
    .column:first-child img:nth-child(2) {
        height: inherit; /* Reset height for smaller screens */
    }
    .full-height {
        height: auto; /* Reset height for smaller screens */
    }
    .column:nth-child(2) img,
    .column:nth-child(4) img {
        height: auto; /* Reset height for smaller screens */
    }

    .container {
        display: flex
    ;
        justify-content: space-between;
        /* gap: 10px; */
        /* padding: 10px; */
        box-sizing: border-box;
    }
}


@media (max-width: 768px) {
/* .container{
    display: flex;
    justify-content: space-between;
    box-sizing: border-box;
    width: 96vw;} */

    .column .row img {
        width: 96vw;
        height: 52vw;
        margin-bottom:1vh;
        margin-top:1vh;
    }

}


@media (max-width: 480px) {
.column .row img {
   
    width: 49vw;
}
}