*::-webkit-media-controls-panel {

  display: none!important;

  -webkit-appearance: none;

}

*::-webkit-media-controls-play-button {

  display: none!important;

  -webkit-appearance: none;

}

*::-webkit-media-controls-start-playback-button {

  display: none!important;

  -webkit-appearance: none;

}

body {
        background-color: #3a355c;
      }
      
      .masonry-container {
        margin: 30px;
      }
      
      .masonry-item {
        display: inline-block;
        width: 100%;
        margin-bottom: 15px;
        position: relative;
        overflow: hidden;
      }
      
      .masonry-item img {
        width: 100%;
        height: auto;
        border-radius: 8px;
        transition: transform 0.6s ease-in-out;
      }
      
      /* ... (Previous CSS code) ... */
      
      /* Hide the image text by default */
      .masonry-item .image-text {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        padding: 40px 70px 40px 70px; /* Default padding for larger screens */
        background: linear-gradient(rgba(0, 0, 0, 0), #1f1c30);
        border-bottom-left-radius: 0px;
        border-bottom-right-radius: 0px;
        opacity: 1;
        transition: opacity 0.9s ease-in-out;
        font-size: 29px;
        font-weight: bold;
        pointer-events: none; /* Ensure the text doesn't interfere with hover events */
      }
      
      /* Show the tagline when the image text disappears */
      .masonry-item:hover .image-text {
        opacity: 0;
      }
      
      /* Show the tagline when the image text disappears */
      .masonry-item:hover .tagline {
        opacity: 1;
      }
      
      /* Initial styles for the tagline */
      .tagline {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        padding: 40px 70px 40px 70px; /* Default padding for larger screens */
        background: linear-gradient(rgba(0, 0, 0, 0), #1f1c30);
        border-bottom-left-radius: 0px;
        border-bottom-right-radius: 0px;
        opacity: 0; /* Hide the tagline initially */
        transition: opacity 0.9s ease-in-out;
        font-size: 20px;
        font-weight: bold;
        pointer-events: none; /* Ensure the tagline doesn't interfere with hover events */
      }
      
      
      /* Responsive adjustments */
      @media (max-width: 768px) {
        .masonry-item .image-text {
          padding: 20px 30px 20px 30px; /* Adjusted padding for medium screens */
          font-size: 20px; /* Adjusted font size for medium screens */
        }
      }
      
      @media (max-width: 576px) {
        .masonry-item .image-text {
          padding: 15px 20px 15px 20px; /* Adjusted padding for small screens */
          font-size: 16px; /* Adjusted font size for small screens */
        }
      }
      
      /* ... (Remaining CSS code) ... */
      
      .masonry-item:hover img {
        transform: scale(1.1);
      }
      
      .masonry-item:hover .image-text {
        opacity: 0;
      }
      
      @media (min-width: 576px) {
        .masonry-container {
          column-count: 2;
          column-gap: 15px;
        }
      }
      
      @media (min-width: 768px) {
        .masonry-container {
          column-count: 3;
        }
      }
      
      @media (min-width: 992px) {
        .masonry-container {
          column-count: 3;
        }
      }
      .navbar-brand img {
        max-height: 100px; /* Set the desired maximum height */
        width: auto;
      }
      .banner {
        height: 105vh;
        background: url("assets/") center/cover no-repeat; /* Replace 'your-background-image.jpg' with your actual background image */
        color: rgb(255, 255, 255);
        background-size: 500px 500px;
        z-index: 2;
      }
      
      .banner h1 {
        font-size: 3rem; /* Adjust the font size as needed */
        margin-bottom: 20px;
      }
      
      .banner p {
        font-size: 1.2rem; /* Adjust the font size as needed */
        margin-bottom: 30px;
      }
      
      .banner a {
        font-size: 1.2rem; /* Adjust the font size as needed */
      }
      #background-video {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        z-index: -2;
      }
      
      .overlay {
        position: absolute;
        z-index: -1;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0); /* Adjust the opacity as needed */
      }
      
      
      
      .register button {
        --color: #836dac;
        font-family: inherit;
        display: inline-block;
        width: 8em;
        height: 2.6em;
        line-height: 2.5em;
        /* margin: 20px; */
        position: relative;
        overflow: hidden;
        border: 2px solid var(--color);
        transition: color 0.5s;
        z-index: 1;
        font-size: 17px;
        border-radius: 6px;
        font-weight: 500;
        color: var(--color);
      }
      .register button:before {
        content: "";
        position: absolute;
        z-index: -1;
        background: var(--color);
        height: 150px;
        width: 200px;
        border-radius: 50%;
      }
      
      .register button:hover {
        color: #fff;
      }
      
      .register button:before {
        top: 100%;
        left: 100%;
        transition: all 0.7s;
      }
      
      .register button:hover:before {
        top: -30px;
        left: -30px;
      }
      
      .register button:active:before {
        background: #836dac;
        transition: background 0s;
      }
      #home #nav .container {
        max-width: 100vw;
      }
      /* Hide scrollbar */
      body::-webkit-scrollbar {
          display: none;
      }
      
      .transparent-bg {
          background-color: rgba(0, 0, 0, 0);
          transition: background-color 0.5s ease-in-out;
      }
      
      .solid-bg {
          background-color: #322d4b; /* Set your desired solid background color */
      }
      /* Initial styles for navbar buttons */
      .navbar-transparent .navbar-nav li a {
          color: #ffffff !important;
      }
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      
      body {
        background: #f2f2f2;
      }
      
      @keyframes slide {
        from {
          transform: translateX(0);
        }
        to {
          transform: translateX(-100%);
        }
      }
      
      .logos {
        overflow: hidden;
        padding: 30px 0;
        background: #7b70a5;
        white-space: nowrap;
        position: relative;
      }
      
      .logos:before,
      .logos:after {
        position: absolute;
        top: 0;
        width: 100px;
        height: 100%;
        content: "";
        z-index: 2;
      }
      
      .logos:before {
        left: 0;
        background: linear-gradient(to left, rgba(255, 255, 255, 0), #7b70a5);
      }
      
      .logos:after {
        right: 0;
        background: linear-gradient(to right, rgba(255, 255, 255, 0), #7b70a5);
      }
      
      /* .logos:hover .logos-slide {
        animation-play-state: paused;
      } */
      
      
      
      .logos-slide {
        display: inline-block;
        animation: 35s slide infinite linear;
      }
      
      .logos-slide img {
        height: 50px;
        margin: 0 40px;
      }
       @font-face {
              font-family: 'Titania';
              src: 
                   url('assets/titania/Titania-Regular.ttf') format('truetype'),   /* Modern Browsers */
               
              /* You can add more src declarations for different font formats */
          }
      
          body {
              font-family: 'Titania', sans-serif; /* Use the font family */
          }
          
          body {
                  background-image: url('assets/BG.png'); /* Replace 'path/to/your/image.jpg' with the path to your image file */
                  background-repeat: repeat; /* This will cause the image to repeat both horizontally and vertically */
                  background-position: center;
                  margin: 0; /* Remove default margin */
                  padding: 0; /* Remove default padding */
                  /* You can add more custom styles here */
              }

              .pushable {
                position: relative;
                background: transparent;
                border: none;
                cursor: pointer;
                outline-offset: 4px;
                outline-color: deeppink;
                transition: filter 250ms;
                -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
              }
              
              .shadow {
                position: absolute;
                top: 0;
                left: 0;
                height: 100%;
                width: 100%;
                background: hsl(226, 25%, 69%);
                border-radius: 50px;
                filter: blur(2px);
                will-change: transform;
                transform: translateY(2px);
                transition: transform 600ms cubic-bezier(0.3, 0.7, 0.4, 1);
              }
              
              .edge {
                position: absolute;
                top: 0;
                left: 0;
                border-radius: 50px;
                height: 100%;
                width: 100%;
                background: linear-gradient(
                  to right,
                  hsl(248, 39%, 39%) 0%,
                  hsl(248, 39%, 49%) 8%,
                  hsl(248, 39%, 39%) 92%,
                  hsl(248, 39%, 29%) 100%
                );
              }
              
              .front {
                display: block;
                position: relative;
                border-radius: 50px;
                background: hsl(248, 53%, 58%);
                padding: 8px 16px;
                color: white;
                font-weight: 600;
                text-transform: uppercase;
                letter-spacing: 1.5px;
                font-size: 1rem;
                transform: translateY(-4px);
                transition: transform 600ms cubic-bezier(0.3, 0.7, 0.4, 1);
              }
              
              .pushable:hover {
                filter: brightness(110%);
              }
              
              .pushable:hover .front {
                transform: translateY(-2px);
                transition: transform 34ms;
              }
              
              .pushable:hover .shadow {
                transform: translateY(4px);
                transition: transform 250ms cubic-bezier(0.3, 0.7, 0.4, 1.5);
              }
              
              .pushable:active .shadow {
                transform: translateY(1px);
                transition: transform 34ms;
              }
              
              .pushable:focus:not(:focus-visible) {
                outline: none;
              } 
              
              .video-background {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                overflow: hidden;
                z-index: -1; /* push it to the back */
              }
              .video-background video {
                min-width: 100%;
                min-height: 100%;
                width: auto;
                height: auto;
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
              }
              
              
               /* Style for the transparent section */
      .transparent-section {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh; /* Adjust the height as needed */
        background-color: rgba(0, 0, 0, 0.5); /* Adjust the opacity as needed */
        z-index: 1; /* Ensure it's above the video background */
      }
      .content {
        display: none;
    }
    body.loading .content {
        display: block;
    }
    .logos-slide img {
      width: 80px; /* Set your desired width */
      height: auto; /* Maintain aspect ratio */
      display: inline-block;
        animation: 30s slide infinite linear; /* Decrease the duration to 20 seconds */
      }
      /* Styling for the pop-up */
    .popup {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.5);
      z-index: 9999;
  }

  .popup-content {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background-color: white;
      padding: 20px;
      text-align: center;
      border-radius: 10px;
  }

  .close-btn {
      position: absolute;
      top: 10px;
      right: 10px;
      cursor: pointer;
  }