body, html {
    height: 100%;
    margin: 0;
    font-family: Arial, sans-serif;
}

.video-container {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.full-container {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

#videoBG {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -100;
    transform: translateX(-50%) translateY(-50%);
}

.content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    /*color: white;*/
    z-index: 1;
}


.navbar-nav .nav-link:hover {
    font-weight: bold;
}

.fading-line-white {
    height: 2px;  /* Adjust the height of the line as needed */
    background: linear-gradient(to right, black, white, black);
}

.fading-line-black {
    height: 2px;  /* Adjust the height of the line as needed */
    background: linear-gradient(to right, white, dimgray, white);
}

.gradient-custom {
/* fallback for old browsers */
background: #f6d365;

/* Chrome 10-25, Safari 5.1-6 */
background: -webkit-linear-gradient(to right, rgba(246, 211, 101, 1), rgba(253, 160, 133, 1));

/* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
background: linear-gradient(to right, rgba(246, 211, 101, 1), rgba(253, 160, 133, 1))
}

        /* Styles for the carousel container */
        .carousel-container {
            width: 100%;
            overflow: hidden;
            position: relative;
        }

        /* Styles for the carousel content */
        .carousel-content {
            display: flex;
            animation: scroll 10s linear infinite; /* Auto-scrolling animation */
        }

        /* Style for individual carousel items */
        .carousel-item {
            min-width: 100%;
            flex: 0 0 auto;
            height: 300px;
        }

        /* Reset animation when hovering over the carousel */
        .carousel-container:hover .carousel-content {
            animation-play-state: paused;
        }

        /* Keyframes for auto-scrolling animation */
        @keyframes scroll {
            0% {
                transform: translateX(0);
            }
            100% {
                transform: translateX(-100%);
            }
        }
		
		


.fade-in-image { 
animation: fadeIn 5s; 
transition: transform .5s ease;
}

.fade-in-image:hover {
  transform: scale(1.3); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
}

.fade-in-card {
	opacity: 0.8;
	animation: fadeOut 2s; 
	transition: transform .5s ease;
	box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.5);
}

.fade-in-card:hover {
	opacity: 1;
	transform: scale(1.1);
	animation: fadeIn2 2s; 
}



@keyframes fadeIn2 {
  0% { opacity: 0.8; }
  100% { opacity: 1; }
}

@keyframes fadeOut {
  0% { opacity: 1; }
  100% { opacity: 0.8; }
}

.youtube_vid {
	width:50%;
	margin:0 auto;
}

.bio_image (
	width:10vw; 
	border-radius: 50%; 
	box-shadow: 2px 2px 10px white;
)

.fade-in-image2 { 
animation: fadeIn 5s; 
transition: transform .5s ease;
}

.fade-in-image2:hover {
  transform: scale(1.1); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
}

@keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}


/* gallery codes */
  .gallery {
    display: flex;
    white-space: nowrap;
    position: relative; /* To position the pseudo-element */
  }

  .gallery::before,
  .gallery::after {
    content: '';
    position: absolute;
    top: 0;
    width: 10%; /* Or the amount of padding you want */
    height: 100%;
    z-index: 2;
  }

  .gallery::before {
    left: 0;

  }

  .gallery::after {
    right: 0;
 
  }

  .gallery img {
    max-height: 20vh; /* Adjust the height as you need */
    margin-right: 10px; /* Space between images */
    transition: transform 0.3s ease-out, z-index 0s ease 0.3s; /* Delay z-index transition so it does not go below while animating */
    position: relative;
    z-index: 0;
  }

  @keyframes scroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(calc(-250px * 5)); /* Adjust this value */ }
  }

  .scrolling-gallery {
    animation: scroll 20s linear infinite;
  }

  /* Pause the scrolling when hovering over the gallery */
  .scrolling-gallery:hover {
    animation-play-state: paused;
  }

  /* Zoom effect on hover */
  .gallery img:hover {
    transform: scale(2); /* Adjust scale value to control the zoom level */
    z-index: 100; /* Ensure the image is above the others when scaled up */
    transition-delay: 0s; /* Reset the transition delay so z-index applies immediately on hover */
  }
  
	img.rounded-corners {
    border-radius: 20px; /* Adjust this value to increase or decrease the roundness */
    /* Optional properties to improve the appearance */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
  }
  
  /*below code for mobile devices */
  @media only screen and (max-width: 768px) {
  .gallery {
    /* Example: Stop the automatic animation on mobile for better control and performance */
    animation: none;
	overflow: hidden;
  }
  
  
  /* Add some basic styling to the video element */
.responsive-video {
  max-width: 100%;
  height: auto;
  display: block; /* To make it go full width of the container */
  margin: 0 auto; /* To center the video in the container */
}

/* Ensuring the video doesn't exceed the width of the screen on smaller devices */
@media screen and (max-width: 768px) {
  .responsive-video {
    width: 100%;
  }
}