@import url(config.css);

.about {
    background: #fff;
    padding: 40px 70px;
}

.row {
    padding: 10px 0px;
}

.about_img figure {
    margin: 0;
}

.about image {
    width: 100%;
    height: 200px;
}

.about_img figure img {
    transition: ease-in all 0.5s;
    border-radius: 5px;
    height: fit-content;
}

.about .titlepage {
    padding-bottom: 0;
    max-width: 610px;
    width: 100%;
    justify-content: start;
    align-items: start;
}

.titlepage span {
    padding: 0px;
    padding-top: 5px;
    font-family: var(--heading);
}

.about .titlepage p {
    padding-top: 15px;
    padding-bottom: 10px;
    color: #999998;
    font-family: var(--p);
}

.about .titlepage h2 {
    padding-top: 15px;
}

.about .read_more {
    margin-top: 35px;
    transition: 0.5s;
}

.about_img figure img:hover {
    box-shadow: 0 0 16px 3px #635d5d38;
    /* transition: ease-in all 0.5s; */
}

/* Add masonry styles here */
.masonry-grid {
    width: 100%; /* Adjust as needed */
    margin-top: 20px; /* Space from about text */
    column-count: 3;
}

.masonry-grid-item {
    margin-bottom: 10px;
    box-sizing: border-box;
    padding: 5px;
}

.masonry-grid-item img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 5px;
}


.Image{
    width: 100%;
    height: 65vh;
    position: relative;
}

/* --- Custom Animation CSS (Based on User's Request) --- */

/* Base state: Hidden and translated */
.fade-in-up, .fade-in-left, .fade-in-right {
    opacity: 0;
    transition: opacity 1s ease-out, transform 1s ease-out;
}

/* Initial transform positions */
.fade-in-up {
    transform: translateY(20px);
}
.fade-in-left {
    transform: translateX(-30px);
}
.fade-in-right {
    transform: translateX(30px);
}
.lg\:flex-nowrap{
margin-top: 20vh;
}

/* Target class: Visible and reset transform */
.show {
    opacity: 1;
    transform: translate(0, 0);
}

/* Custom masonry styling for cross-browser compatibility */
.masonry-grid {
    /* Responsive column settings using standard CSS */
    column-count: 1;
    column-gap: 1rem; /* Equivalent to gap-4 */
}
@media (min-width: 640px) { /* sm breakpoint */
    .masonry-grid {
        column-count: 3;
    }
}
@media (min-width: 1024px) { /* lg breakpoint */
    .masonry-grid {
        column-count: 3;
    }
}
@media (max-width: 768px) {
    .about{
        padding: 20px 30px;
    }    
}
.masonry-grid-item {
    display: inline-block; /* Important for masonry to work */
    width: 100%;
    padding: 0.25rem; /* Equivalent to p-1 */
    margin-bottom: 1rem; /* Equivalent to mb-4 */
    box-sizing: border-box;
}