/* Size adjustment CSS for images and videos
   Reduces size of media elements to make the site look more professional */

/* Global image and video size adjustments */
.img-fluid, video {
    max-width: 80%;
    margin: 0 auto;
}

/* Hero section - specific adjustments */
.hero-section video {
    max-width: 75%;
    display: block;
    margin: 0 auto;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    border-radius: 8px;
}

/* Portfolio section adjustments */
.portfolio-img {
    height: 200px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.portfolio-img img,
.portfolio-img video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Team member images */
.team-img-wrapper {
    width: 120px;
    height: 120px;
    margin: 0 auto;
    overflow: hidden;
}

.team-img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* About section video */
.about-img video,
.about-img img {
    max-width: 80%;
    display: block;
    margin: 0 auto;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

/* Make sure videos maintain aspect ratio */
video {
    object-fit: contain;
}

/* Media queries for responsive sizing */
@media (max-width: 992px) {
    .portfolio-img {
        height: 180px;
    }
    
    .team-img-wrapper {
        width: 110px;
        height: 110px;
    }
    
    .hero-section video {
        max-width: 80%;
    }
}

@media (max-width: 768px) {
    .img-fluid, video {
        max-width: 90%;
    }
    
    .portfolio-img {
        height: 180px;
    }
    
    .about-img video,
    .about-img img {
        max-width: 90%;
    }
    
    .team-img-wrapper {
        width: 100px;
        height: 100px;
    }
}