/* Navbar container */
.navbar {
    display: flex;                /* Use flexbox for layout */
    justify-content: center;      /* Center horizontally */
    align-items: center;          /* Center vertically */
    width: 100%;                  /* Full width */
    padding: 0;                   /* Remove any padding */
    margin: 0;                    /* Remove any margin */
    position: relative;           /* Make navbar a flex container */
}

/* Navbar brand (logo) */
.navbar-brand {
    display: flex;                
    justify-content: center;      /* Center the logo horizontally */
    align-items: center;          /* Center the logo vertically */
    position: relative;           /* Ensure it doesn't go out of bounds */
}

/* Navbar items container */
.navbar-nav {
    display: flex;                /* Flex container for navbar items */
    justify-content: flex-end;    /* Align nav items to the right */
    align-items: center;          /* Vertically center nav items */
    padding: 0;                   /* Remove any padding */
    margin: 0;                    /* Remove any margin */
    flex-grow: 1;                 /* Allow this to take remaining space */
}

/* Navbar item styling */
.navbar-nav .nav-item {
    margin: 0;                    /* Remove unwanted margin */
    padding-left: 2rem;           /* Adjust spacing between items */
}

/* Navbar icon (logo) styling */
.navbar-icon {
    object-fit: cover;
    max-width: 100%;               /* Ensure logo doesn't exceed container */
    height: auto;                  /* Maintain aspect ratio */
}

/* Fully transparent navbar */
.navbar-custom {
    background-color: rgba(0, 0, 0, 0) !important; /* Fully transparent */
    position: absolute; /* Keep it above the content */
    width: 100%; /* Ensure it spans the full width */
    z-index: 1000; /* Make sure it's above everything */
}

/* Ensure navbar links stay visible */
.navbar-custom .nav-link {
    color: white !important; /* Adjust based on background */
}

/* Override for mobile screens */
@media (max-width: 768px) {
    .navbar-nav {
        padding: 0;                /* Remove padding */
        justify-content: center;   /* Center items on mobile */
        flex-direction: column;    /* Stack items vertically */
        align-items: center;       /* Center align items */
    }
}





  










/* Hero Video Section */

/* Hero Video Container (Maintains 16:9 Aspect Ratio) */
.hero-video-container {
    position: relative;
    display: inline-block;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%; /* 16:9 Aspect Ratio */
    overflow: hidden;
    background-color: #000; /* Ensures a black background */
    margin: 0;  /* Remove any margin to avoid borders */
}

/* Wrapper for the YouTube video */
.video-wrapper {
    position: absolute;  /* Position the wrapper absolutely within the container */
    top: 0;
    left: 0;
    width: 100%;  /* Make the wrapper take up full width */
    height: 100%;  /* Make the wrapper take up full height */
    overflow: hidden;
}

/* YouTube Video Styling */
.youtube-video {
    position: absolute;  /* Position the iframe absolutely within the wrapper */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
    outline: none;
    object-fit: cover;  /* Ensure the video fills the container without distortion */
    pointer-events: auto;  /* Ensure video controls work */
    z-index: 2; /* Ensure it is above background but below carousel controls */
}

/* Prevent scrolling when video is focused */
body.prevent-scroll {
    overflow: hidden; /* Disable body scrolling */
}

/* Optional fix for navbar and video container when video is focused */
.navbar.fixed {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1000;
}

.video-container.prevent-scroll {
    overflow: hidden; /* Disable scrolling in the video container */
}











/* Poster Gallery */

/* Image Gallery Styling */
.image-gallery-container {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 15px;
    padding: 20px;
  }
  
  .image-gallery-item img {
    width: 100%;
    height: auto;
    cursor: pointer;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease;
  }
  
  .image-gallery-item img:hover {
    transform: scale(1.05);
  }
  

@media (max-width: 1325px) {
    .image-gallery-container {
        grid-template-columns: repeat(4, 1fr); /* 2 items per row */
    }
}

@media (max-width: 910px) {
    .image-gallery-container {
        grid-template-columns: repeat(1, 1fr); /* 2 items per row */
    }
}

/* Styling for the image items */
.image-gallery-item img {
    width: 100%;
    height: auto;
    cursor: pointer;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease;
}

/* Image hover effect */
.image-gallery-item img:hover {
    transform: scale(1.05);
}










/* Horizontal Video Feed */

/* Carousel container styling */
.carousel-container {
    width: 95%;
    margin: auto;
    position: relative;
    display: flex;
    justify-content: center; /* Center the carousel */
    overflow: hidden; /* Hide anything beyond the 3 visible items */
}

/* Flex wrapper for the carousel items */
.carousel-wrapper {
    display: flex;
    width: 100%; /* Ensures full width */
    transition: transform 0.5s ease-in-out;
    flex-wrap: nowrap;
    gap: 10px;
}


/* Video card styling */
.video-card {
    flex: 0 0 calc(33.33% - 6.8px); /* Adjust the width of each card considering the gap */
    background: #fff;
    border-radius: 15px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    padding: 15px;
    text-align: center;
    cursor: pointer;

    height: 640px; /* Increase the height of the YouTube video */
}


.video-card iframe {
    width: 100%;
    height: 440px; /* Increase the height of the YouTube video */
    border-radius: 10px;
}

/* Arrows styling without circle */
.carousel-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    
    display: flex;
    align-items: normal; /* Centers arrow vertically */
    justify-content: center; /* Centers arrow horizontally */
    
    width: 50px; /* Ensure consistent background size */
    height: 50px; 
    
    background-color: rgba(0, 0, 0, 0.7); /* Background color */
    border-radius: 10px; /* Rounded background */
    
    font-size: 40px; /* Arrow size */
    line-height: 1; /* Prevents vertical misalignment */
    
    color: white;
    cursor: pointer;
    z-index: 10;
}


/* Hover effect */
.carousel-arrow:hover {
    background-color: rgba(0, 0, 0, 1);
    color: rgba(255, 255, 255, 1);
}


/* Positioning the arrows outside the carousel */
.carousel-container .prev {
    left: 0px; /* Adjusted for positioning */
}

.carousel-container .next {
    right: 0px; /* Adjusted for positioning */
}


/* Responsive Adjustments */

@media (max-width: 1630px) {
    .video-card {
        flex: 0 0 calc(100% / 2 - 6.8px); /* Always force 1 items per row */
        background: #fff;
        border-radius: 15px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
        padding: 15px;
        text-align: center;
        cursor: pointer;

        height: 540px; /* Increase the height of the video card */
    }

    .video-card iframe {
        width: 100%;
        height: 340px; /* Increase the height of the YouTube video */
        border-radius: 10px;
    }

    .carousel-wrapper {
        gap: 10px; /* Reduce spacing on smaller screens */
    }

    .carousel-arrow {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        
        display: flex;
        align-items: normal; /* Centers arrow vertically */
        justify-content: center; /* Centers arrow horizontally */
        
        width: 50px; /* Ensure consistent background size */
        height: 50px; 
        
        background-color: rgba(0, 0, 0, 0.7); /* Background color */
        border-radius: 10px; /* Rounded background */
        
        font-size: 40px; /* Arrow size */
        line-height: 1; /* Prevents vertical misalignment */
        
        color: white;
        cursor: pointer;
        z-index: 10;
    }
}


@media (max-width: 910px) {
    .video-card {
        flex: 0 0 calc(100% / 1 - 6.8px); /* Always force 1 items per row */
        background: #fff;
        border-radius: 15px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
        padding: 15px;
        text-align: center;
        cursor: pointer;

        height: 540px; /* Increase the height of the video card */
    }

    .video-card iframe {
        width: 100%;
        height: 340px; /* Increase the height of the YouTube video */
        border-radius: 10px;
    }

    .carousel-wrapper {
        gap: 10px; /* Reduce spacing on smaller screens */
    }

    .carousel-arrow {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        
        display: flex;
        align-items: normal; /* Centers arrow vertically */
        justify-content: center; /* Centers arrow horizontally */
        
        width: 50px; /* Ensure consistent background size */
        height: 50px; 
        
        background-color: rgba(0, 0, 0, 0.7); /* Background color */
        border-radius: 10px; /* Rounded background */
        
        font-size: 40px; /* Arrow size */
        line-height: 1; /* Prevents vertical misalignment */
        
        color: white;
        cursor: pointer;
        z-index: 10;
    }
}

/* Modal Styles */
.modal {
    display: none; /* Ensure the modal is hidden initially */
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    align-items: center;
    justify-content: center;
    opacity: 0; /* Initially hidden */
    visibility: hidden;
    transition: opacity 0.3s ease-in-out, visibility 0s 0.3s; /* Smooth transition for both visibility and opacity */
}

/* Modal Content */
.modal-content {
    max-height: 90vh;  /* Ensures the modal fits within the viewport */
    overflow-y: auto;  /* Enables scrolling for overflow content */
    display: flex;
    flex-direction: column;
    padding: 2rem;
    align-items: center;
    width: 80%;
}

.modal-body {
    flex-grow: 1;  /* Allows the body to take up remaining space */
    overflow-y: auto;  /* Enables scrolling if content overflows */
}

#modalVideo {
    height: 540px;  /* Fixes the video height */
    min-height: 540px;  /* Ensures it doesn't shrink */
    width: 100%;  /* Adjusts width to fit container */
}

/* Responsive: Adjusting for smaller screens */
@media (max-width: 1024px) {

    #modalVideo {
        height: 340px;  /* Fixes the video height */
        min-height: 340px;  /* Ensures it doesn't shrink */
        width: 100%;  /* Adjusts width to fit container */
    }
}


@media (max-width: 414px) {
    
    #modalVideo {
        height: 240px;  /* Fixes the video height */
        min-height: 240px;  /* Ensures it doesn't shrink */
        width: 100%;  /* Adjusts width to fit container */
    }
}


/* Close Button */
.close {
    position: absolute;
    top: 10px;
    right: 20px;
    font-size: 24px;
    cursor: pointer;
}










/* Hero Image Thumbnails */

/* Container for the thumbnail and video */
.key-ideas-thumbnail {
    position: relative;
    display: inline-block;
    width: 100%; /* Ensure the thumbnail takes up the full width of the container */
    height: 0;
    padding-bottom: 25%; /* Aspect ratio 4:3 (height is 1/4 of the width) */
    overflow: hidden;
    background-color: #000; /* Optional: to give a background color while loading */
}

/* Thumbnail image */
.key-ideas-thumbnail img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Cover the container without distorting aspect ratio */
    object-position: bottom; /* Position the image to fit well on hover */
}

/* Title - positioned at the bottom left, initially hidden */
.thumbnail-title {
    position: absolute;
    bottom: 5%;  /* Adjust to move title closer or further from the bottom */
    left: 0;     /* Move the title flush with the left side of the container */
    color: white;
    font-size: 2rem;  /* Large text size initially */
    opacity: 0; /* Hidden by default */
    transition: opacity 0.3s ease-in-out; /* Fade-in effect */
    pointer-events: none; /* Prevent interfering with the hover area */
    margin-left: 1rem; /* Small left margin to avoid direct touch with the edge */
    text-shadow: 
        1px 1px 5px rgba(0, 0, 0, 1), 
        -1px -1px 5px rgba(0, 0, 0, 1),
        1px -1px 5px rgba(0, 0, 0, 1),
        -1px 1px 5px rgba(0, 0, 0, 1); /* Thicker outline effect */
}

/* On hover, show the title */
.key-ideas-thumbnail:hover .thumbnail-title {
    opacity: 1; /* Show the title when hovered */
}

/* Video - hidden by default */
.key-ideas-thumbnail video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Make sure the video covers the container */
    opacity: 0; /* Initially hidden */
    transition: opacity 0.3s ease-in-out; /* Fade-in effect */
}

/* Show the video on hover */
.key-ideas-thumbnail:hover video {
    opacity: 1; /* Show the video when hovered */
}

/* Ensure responsiveness of text size */
@media (max-width: 768px) {
    .thumbnail-title {
        font-size: 1.5rem;  /* Reduce text size for smaller screens */
        bottom: 3%;       /* Adjust bottom distance for smaller screens */
    }
}

@media (max-width: 480px) {
    .thumbnail-title {
        font-size: 1rem;  /* Even smaller text for very small screens */
    }
}


/* Flush Left Body Text on Mobile*/
@media (max-width: 768px) {
    /* Keep titles/headers centered */
    .header-font, .display-font-2 {
      text-align: center;
    }
  
    /* Make paragraphs flush left */
    .paragraph-font {
      text-align: left;
      margin-left: 0;
      margin-right: 0;
      padding-left: 0;
      padding-right: 0;
    }
  }
  

  
/* Go To Top Button */
.gototopbtn {
    position: fixed;
    width: 3.125rem;
    height: 3.125rem;
    background: rgba(255, 255, 255, 0.1); /* Semi-transparent black for a common modern effect */
    bottom: 2.5rem;
    right: 2rem;
    text-decoration: none;
    text-align: center;
    line-height: 3.125rem;
    color: white;
    font-size: 1.5rem;
    transition: opacity 0.3s ease-in-out; /* Transition effect for opacity */
    opacity: 0; /* Initially set opacity to 0 */
    border-radius: 50%; /* Makes the button circular */
}

.gototopbtn.show {
    opacity: 1; /* Make the button visible */
}


/* Footer */

/* Footer Column Styling */
.footer .col-4 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%; /* Ensure vertical alignment */
}
/* Footer Text Styling */
.footer p {
    padding: 0;
    margin: 0; /* Remove margin for proper centering */
    text-align: center; /* Horizontally align text */
}

/* Footer Background */
.footer-bg {
    background-color: #111111; /* Consistent dark background */
}

/* Responsive Design */
@media (max-width: 1630px) {
    .footer p {
        font-size: 42px; /* Adjust text size for smaller screens */
    }
}

@media (max-width: 1325px) {
    .footer p {
        font-size: 36px; /* Adjust text size for smaller screens */
    }
}


@media (max-width: 910px) {
    .footer p {
        font-size: 28px; /* Adjust text size for smaller screens */
    }
}

@media (max-width: 700px) {
    .footer p {
        font-size: 24px; /* Adjust text size for smaller screens */
    }
}

@media (max-width: 430px) {
    .footer p {
        font-size: 20px; /* Adjust text size for smaller screens */
    }
}


/* Add the fade-in effect */
.fade-in {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s, transform 0.5s;
  }
  
  .fade-in.visible {
    opacity: 1;
    transform: translateY(0);
  }