@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap");

body {
    background: #f2f2f350;
    font-family: "Roboto", Light 300;
}
/* Adjusting the height of the navbar */
.navbar {
    padding-top: 0.01px; 
    padding-bottom: 0.01px;
    height: auto; 
}

/* Adjusting the height of the navbar brand/logo */
.navbar-brand img {
    height:20px;
}

/* Adjusting the height and padding of navbar items */
.navbar-nav .nav-link {
    padding-top: 5px; 
    padding-bottom: 5px; 
    font-size: 17px; 
}
/* Position the container for the title and text */
.text-container {
    position: absolute;
    top: 30%; 
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: white; 
    font-family: 'Roboto', sans-serif;
    z-index: 100; 
}

/* Style for the titles */
.heading-content {
    position: absolute;
    top: 45%; 
    width: 100%; 

max-width: 100%;
}

.heading-content h5 {
    font-size: 3em; 
    font-weight: 300; 
    color: #fff;
    font-family: Roboto, sans-serif;
}

.heading-content h1 {
    font-size: 3em; 
    font-weight: 300; 
    color: #fff;
    font-family: Roboto, sans-serif;
}

.heading-content {
    font-size: 1em; 
    text-transform: uppercase;
    font-weight: lighter;
    color: #ccc; 
    word-spacing: 5px;
    letter-spacing: 2px; 
}
/* Footer */
footer {
    font-size: 0.875em; 
    color: #6c757d; 
}

footer a {
    color: #6c757d; 
    text-decoration: none; 
}

footer a:hover {
    text-decoration: underline;
}

/* Bio-Buttons */
#bio .btn {
    border: 2px solid rgb(246, 246, 246);
    width: 25%;
    padding: 15px 20px;
    background: #6e6d6d;
    border-radius: 5px; 
    margin-top: 10px;
}

#bio .btn:after {
    color: #fff;
    text-decoration: none;
    font-size: 1em; /* Corrected from - lem to 1em */
    font-weight: bold;
    text-transform: uppercase;
}
#bio .btn:hover {
    border: 2px solid #badbd7;
    cursor: pointer;
}

/* Contact-Buttons */
#contact .btn {
    border: 2px solid rgb(246, 246, 246);
    width: 25%;
    padding: 15px 20px;
    background: #6e6d6d;
    border-radius: 5px; 
    margin-top: 10px;
}

#contact .btn:after {
    color: #fff;
    text-decoration: none;
    font-size: 1em; 
    font-weight: bold;
    text-transform: uppercase;
}
#contact .btn:hover {
    border: 2px solid #badbd7;
    cursor: pointer;
}
/* Videos */

..video-container {
    position: relative;
    width: 100%;
    max-width: 800px;
    text-align: center;
    margin: 10px auto; /* Reduced margin */
}

.video-grid {
    display: flex;
    flex-direction: column; /* Stack videos vertically */
    align-items: center;
    gap: 10px; /* Reduce space between videos */
}

.video-container:first-child {
    margin-top: 0 !important; /* Ensures first video doesn't have extra top spacing */
}

/* footer */

  footer {
    position: fixed;
    bottom: 0;
    width: 100%;
    background-color: #f8f9fa; /* Light background color */
    text-align: center;
    padding: 10px;
    box-shadow: 0 -1px 5px rgba(0, 0, 0, 0.1); /* Adds a light shadow */
  }
  .mb-0 {
    margin-bottom: 0;
    color: #333; /* Text color */
    font-family: 'Roboto', sans-serif; /* Optional font family */
  }