/* Body and general styling */ body { font-family: 'Lato', sans-serif; margin: 0; padding: 0; background-color: rgba(20, 20, 20, 1); } html { scroll-behavior: smooth; } /* Navbar styling */ .navbar { height: 80px; padding: 0 30px; backdrop-filter: blur(20px); background-color: rgba(195, 199, 211, 0.6); transition: background-color 0.3s ease-out; } /* Headings and text */ h3 { font-family: 'Times New Roman', Times, serif; font-weight: 700; font-size: 2.5rem; margin-bottom: 1.5rem; } p { font-family: Arial, Helvetica, sans-serif; font-size: 1.1rem; line-height: 1.6; } #project1 { padding: 0; } .container-fluid { padding: 0; } /* Main image container */ .main-image-container { width: 100%; height: 70vh; background-image: url('../images/Bronx/IMG_9509.jpg'); background-size: cover; background-position: center; position: relative; display: flex; align-items: flex-end; padding: 2rem; } #project2 .main-image-container{ background-image: url("../images/Greenwich/IMG_3550.jpg"); } #project3 .main-image-container{ background-image: url("../images/GreenwichVil/IMG_9204.jpg"); } #project4 .main-image-container{ background-image: url("../images/Greenwhich4/IMG_5550.jpg"); } #project5 .main-image-container{ background-image: url("../images/EastVil/IMG_3195.jpg"); } #project6 .main-image-container{ background-image: url("../images/UpperWest/IMG_2244.jpg"); } .project-title { color: white; font-size: 3rem; font-weight: 700; text-shadow: 2px 2px 4px rgba(0,0,0,0.5); } /* Image gallery container */ .image-gallery-container { padding: 2rem 5%; } /* Image gallery grid */ .image-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 1rem; justify-content: center; } .gallery-item { overflow: hidden; border-radius: 4px; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); transition: transform 0.3s ease, box-shadow 0.3s ease; position: relative; /* Allow absolute positioning of the image */ height: 250px; /* Set a fixed height */ display: flex; justify-content: center; align-items: center; /*Center image inside container */ } .gallery-item:hover { transform: translateY(-5px); box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2); } .gallery-item img { width: 800px; height: 500px; /* Maintain aspect ratio */ /*max-height: 100%; Prevent image from exceeding container height */ object-fit: cover; /* Ensure the image covers the container while maintaining proportions */ transition: all 0.3s ease; } .gallery-item:hover img { transform: scale(1.05); } /* Modal styles */ /* Fade-in effect */ @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } /* Add this class to elements you want to animate*/ .fade-in { animation: fadeIn .5s ease-in; } .modal { display: none; /* Hidden by default */ position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; overflow: hidden; /*background-color: rgba(0, 0, 0, 0.8);*/ background: rgba(0, 0, 0, 0.6); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); /* For Safari */ display: flex; /* Enable flexbox for centering */ justify-content: center; /* Center horizontally */ align-items: flex-start; /* Align to the top */ } .modal-content { margin: 100px auto; /* Add margin to lower it */ margin-top: 100px; display: block; max-width: 1000px; max-height: 750px; } .close { position: absolute; top: 100px; right: 30px; color: white; font-size: 40px; font-weight: bold; cursor: pointer; } .caption { margin: 10px auto; text-align: center; color: white; font-size: 20px; } .modal-navigation { position: absolute; top: 50%; width: 100%; display: flex; justify-content: space-between; } #prevBtn, #nextBtn { background-color: transparent; /*backdrop-filter: blur(1px);*/ color: white; border: none; padding: 50px; cursor: pointer; } .video-section { background-color: #f8f9fa; /* Light background color for contrast */ padding: 40px 0; /* Add top and bottom padding */ text-align: center; /* Center-align content */ } .video-section h3 { margin-bottom: 30px; /* Space below the heading */ font-size: 24px; /* Font size for the heading */ } .video-section .row { justify-content: center; /* Center align the videos */ } .video-section video { max-width: 100%; /* Ensure videos are responsive */ height: auto; /* Maintain aspect ratio */ border-radius: 8px; /* Rounded corners for videos */ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Subtle shadow effect */ } .video-section .col-md-6 { max-width: 400px; /* Limit the maximum width of each video */ margin: 0 15px; /* Horizontal spacing between videos */ } /* Responsive adjustments */ @media (max-width: 768px) { .main-image-container { height: 40vh; } .project-title { font-size: 2rem; } .image-gallery { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); } }