body {
     font-family: 'Quattrocento', serif;
}
 #about h2 {
     font-size: 2.5rem;
     font-weight: bold;
}
 #about .btn-primary {
     background-color: #007bff;
     border-color: #007bff;
}
 #about .btn-outline-primary {
     color: #007bff;
     border-color: #007bff;
}
 #about .btn-outline-primary:hover {
     background-color: #007bff;
     color: white;
}
 .hero {
     position: relative;
     overflow: hidden;
}
 .hero::after {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: rgba(0, 0, 0, 0.5);
    /* Adjust opacity as needed */
     z-index: 1;
}
 .hero .container {
     position: relative;
     z-index: 2;
}
 .scroll-down {
     position: absolute;
     bottom: 30px;
     left: 50%;
     transform: translateX(-50%);
     z-index: 2;
     color: white;
     text-decoration: none;
     transition: opacity 0.3s;
}
 .scroll-down:hover {
     opacity: 0.8;
}
 .image-container {
     height: 500px;
     overflow: hidden;
     display: flex;
     align-items: center;
     justify-content: center;
}
 .image-container img {
     max-height: 100%;
     width: auto;
     object-fit: contain;
}