.content {

    position: absolute;

    bottom: 0;

    background: rgba(0, 0, 0, 0.5);

    color: #f1f1f1;

    width: 100%;

    padding: 00px;

}



#myBtn {

    width: 200px;

    font-size: 18px;

    padding: 10px;

    border: none;

    background: #000;

    color: #fff;

    cursor: pointer;

}



#myBtn:hover {

    background: #ddd;

    color: black;

}



.rounded-cicle {



    margin-top: 20%;

    /* Adjust as needed */

    border-radius: 50px;



}



.item {

    width: 100%;

    /* Occupy full width of the container */

    max-width: 250px;

    /* Limit maximum width */

    height: auto;

    /* Automatically adjust height based on content */

    padding: 10px;

    /* Padding around each item */

    box-sizing: border-box;

    /* Ensure padding is included in width */

    display: flex;

    justify-content: center;

    align-items: center;



    margin-bottom: 10px;

    /* Space between rows */

}



.item img {

    max-width: 100%;

    /* Ensures the image fills its container */

    height: auto;

    /* Maintains aspect ratio */

    transition: filter 0.3s ease;

    /* Add transition for hover effect */

    filter: grayscale(100%);

    /* Initially grayscale */

}



.item:hover img {

    filter: none;

    /* Remove grayscale on hover */

}





.item2 {



    /* Limit maximum width */

    height: 600px;

    ;

    /* Automatically adjust height based on content */

    padding: 10px;

    /* Padding around each item */

    box-sizing: border-box;

    /* Ensure padding is included in width */

    display: flex;

    justify-content: center;

    align-items: center;



    margin-bottom: 10px;

    /* Space between rows */

}



.item2 img {

    width: 100%;

    /* Ensures the image fills its container */

    /* Maintains aspect ratio */

    border: 1px solid black;

    height: 400px;

    ;



}



.item2:hover img {

    filter: none;

    /* Remove grayscale on hover */

}



/* external css: flickity.css */



* {

    -webkit-box-sizing: border-box;

    box-sizing: border-box;

}





.gallery-cell {

    width: 66%;

    height: 400px;

    margin-right: 10px;

    background: #8C8;



}





.gallery-cell img {

    width: 100%;

    height: 400px;



}



.gallery-cell img,

.gallery-cell video {

    width: 100%;

    height: auto;

    display: block;

}





.play-button {

    position: absolute;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);

    width: 64px;

    height: 64px;

    background: url('https://img.icons8.com/ios-filled/50/000000/play-button-circled.png') no-repeat center center;

    background-size: contain;

    cursor: pointer;

}



.hidden {

    display: none;

}



.video-container {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    z-index: 10;

    background: rgba(0, 0, 0, 0.5);

}



.video-container video {

    width: 100%;

    height: 100%;

    object-fit: cover;

}



.filterDiv {

    float: left;

    background-color: #2196F3;

    color: #ffffff;

    width: 340px;

    height: 200px;

    line-height: 100px;

    text-align: center;

    margin: 10px;

    display: none;

    position: relative;

    overflow: hidden;

    text-shadow: 2px 2px 2px #000;

    font-size: 25px;

}



.filterDiv img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    display: block;

    transition: transform 0.3s ease;

}



.filterDiv:hover img {

    transform: scale(1.1);

}



.filterDiv span {

    position: absolute;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);

    display: none;

}



.filterDiv:hover span {

    display: block;

}



.show {

    display: block;

}



.container2 {

margin-top: 20px;

    overflow: hidden;

    text-align: center;

    width: 100%;

}



.image-hover {

    transition: transform 0.3s ease-in-out;

}



.image-hover:hover {

    transform: scale(1.1);

}