/* 10) video section ///////////////////////////*/
.videoSection {
    padding: 120px 4%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2%;
    width: 100%;
    height: 100%;
}

.videoSection .videoContainer {
    position: relative;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    width: 80%; /* Ensure video containerDiv takes full width */
    max-width: 65em; /* You can limit the max width of the containerDiv for larger screens if you want */
}

.videoSection .bird {
    width: 11%;
}

.videoSection .videoThumbnail {
    border-radius: 0.5em;
    width: 80%;
    /* max-height: 20.5625em; */
}

.videoSection .videoContainer .playButton {
    cursor: pointer;
    width: 8.5%;
    position: absolute;
    opacity: 0.9;
}

.videoSection .videoContainer .playButton:hover {
    opacity: 1;
}

.videoSection .videoContainer #myVideo {
    display: none;
    border-radius: 0.5em;
    width: 100%;
    /* max-height: 25.5625; */
    margin: auto;
}
   .videoSection {
        padding: 10% 8%;
    }
/* Responsive adjustments for small screens */
@media only screen and (max-width:768px) {
    .videoSection {
        padding: 10% 8%;
    }
    .videoSection .videoContainer {
  
    width: 100%;
 
}
video#myVideo{
    margin:0px !important;
    width:100% !important
}
img.videoThumbnail{
   margin:0px !important;
    width:100% !important   
}
}
@media only screen and (max-width: 425px) {
  
    .videoSection .bird {
        display: none; /* Hide birds on smaller screens */
    }

    .videoSection .videoContainer .playButton {
        width: 8.5vw; /* Adjust size of play button */
    }
}