*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

   html, body {
      font-family: 'Oswald', sans-serif!important;
    max-width: 100%;
    overflow-x: hidden!important;
    min-height: 100%;
    }
    header {
      background: #fff;
      padding: 0px 0;
      border-bottom: 1px solid #eee;
    }
    header nav a {
      color: #000!important;
      margin: 0 10px;
      text-decoration: none;
      font-weight: 600;
      font-size: 1.3rem!important;
      font-family: 'Oswald', sans-serif!important;
    }


    
    .footer {
      background: #f5f5f5;
      padding: 10px 0;
      text-align: center;
      /* border-top: 1px solid #eee; */
    }
  


    .social-icons {
  text-align: center;
  margin-top: 10px;
}

.social-circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin: 0 8px;
  background-color: #000;    /* Black background */
  color: #fff;               /* White icon color */
  border-radius: 50%;        /* Circular shape */
  font-size: 18px;
  text-decoration: none;
  transition: all 0.3s ease;
}

/* Hover effect */
.social-circle:hover {
  background-color: #444;    /* Slightly lighter black on hover */
  transform: scale(1.1);     /* Gentle zoom */
  color: #fff;
}

     .arrow i {
      animation: bounce 1.5s infinite;
  }

  @keyframes bounce {
    0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
    40% { transform: translateY(-10px); }
    60% { transform: translateY(-5px); }
  }



  [data-aos] {
  transition-property: transform, opacity !important;
  will-change: transform, opacity;
}



.content p {
    /* font-size: 19px; */
    line-height: 28px;
    color: #1d1d1f!important;
    font-family: 'Oswald', sans-serif!important;
    font-weight: 400!important;
    font-size: 20.563021px !important;
  }


body {
  padding-top: 70px; /* Adjust based on your navbar height */
}
html {
  /* scroll-behavior: smooth!important; */
  scroll-padding-top: 80px; /* ensures section titles aren't hidden behind navbar */
}

.custom-container {
    max-width: 1290px!important;
  }
.custom-container2 {
    max-width: 1235px!important;
  }
.custom-container3 {
    max-width: 1120px!important;
  }


  .publication-zoom {
  transition: transform 0.5s ease-in-out, filter 0.5s ease-in-out !important; /* smooth zoom */
  transform-origin: center center !important;        /* zoom from middle */
  cursor: pointer;
}
.publication-zoom:hover {
  transform: scale(1.02)!important; /* 👈 slight zoom-in */

}


.form-control,.form-select{
  border: 0.7px solid #000!important;
  border-radius: 0!important;
}


/* Offcanvas Customization */
.offcanvas {
  background-color: #fff;
  width: 80% !important;
}

/* Remove header title space */
.offcanvas-header {
  border-bottom: none;
  padding-bottom: 0;
}

/* Nav link styling */
.offcanvas .nav-link {
  font-weight: 200;
  color: #111;
  font-size: 25px;
  white-space: nowrap;
  padding: 8px 0;
  border-bottom: none !important;
}

/* Align nav items left under close button */
.offcanvas-body {
  padding-top: 0;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
}

/* video banner css */

   /* 🎥 HERO SECTION */
      .hero-section {
        text-align: center;
        background: linear-gradient(to bottom, #f5f5f5, #fff);
        position: relative;
        height: 85vh; /* ✅ Full screen height on desktop/laptop */
        overflow: hidden; /* ✅ Hide any extra overflow */
      }

      /* 🎬 VIDEO BACKGROUND */
      .video-background {
        width: 100%;
        height: 100%;
        object-fit: cover; /* ✅ Cover full section area */
        position: absolute;
        top: 0;
        left: 0;
        z-index: 1;
      }

      /* 📝 HERO CONTENT (Text) */
      .hero-content {
        position: absolute;
        bottom: 130px; /* ✅ Keep text slightly above bottom */
        left: 50%;
        transform: translateX(-50%);
        text-align: center;
        z-index: 2;
        color: #000000;
      }

      .hero-content h2 {
        font-weight: 400;
        font-size: 35px;
        line-height: 1.3;
        margin: 0 auto;
        font-family: "Oswald", sans-serif !important;
      }

      /* ⬇️ SCROLL ARROW */
      .arrow {
        position: absolute;
        bottom: 80px;
        left: 50%;
        transform: translateX(-50%);
        z-index: 2;
      }

      /* 🔹 Section Title (for next sections) */
    .section-title {
        text-align: center;
        font-size: 2.5rem;
        margin-bottom: 40px;
        font-family: "Oswald", sans-serif !important;
        font-weight: 400!important;
      }

      .section-title-contact {
        text-align: center;
        font-size: 47px;
        margin-bottom: 80px;
        font-weight: 400!important;
        font-family: "Oswald", sans-serif !important;
      }

      /* 🔹 Headings */
      h6 {
        font-family: "Oswald", sans-serif !important;
        font-weight: 300 !important;
        font-size: 18px !important;
        color: #1d1d1f !important;
      }

      /* 📱 Mobile Responsive */
      @media (max-width: 768px) {
        .hero-section {
          height: auto; /* ✅ Let height adjust based on video */
        }
 .section-title-contact {
    
        font-size: 40px;
        margin-bottom: 40px;
       
      }
        .video-background {
          width: 100%;
          min-height: 393px !important; /* ✅ Allow natural video height */

          object-position: center; /* ✅ Keep it centered */
          transform: none !important; /* ✅ No scale adjustment */
          position: static !important; /* ✅ Normal flow for mobile */
        }

        .hero-content {
          position: relative; /* ✅ Position relative since video isn’t absolute */
          margin-top: -32px;
           bottom: 85px!important;
          text-align: center;
          z-index: 2;
        }
     


        .hero-content h2 {
          color: #000000 !important;
          font-weight: 400 !important;
          font-size: 15px !important;
          /* min-width: 950px; */

          margin: 0 auto !important;
          line-height: 1.3;
          text-wrap: balance;
          word-break: keep-all;
          font-family: "Oswald", sans-serif !important;
        }

        .arrow {
          position: relative;
          bottom: 69px;
          /* margin-top: 15px; */
        }
      }

      /* 💻 Laptop & Desktop */
      @media (min-width: 992px) {
         .hero-content {
    bottom: 50px !important; /* lift text slightly higher */
  }

  .arrow {
    bottom: 0px !important;  /* ensure visible within 100vh */
    z-index: 5 !important;    /* keep above video */
  }

        .video-background {
          height: 100vh;
        }

        .hero-content h2 {
          font-size: 35px !important;
          font-weight: 400 !important;
          color: #000000 !important;
          line-height: 1.3;
          font-family: "Oswald", sans-serif !important;
          width: 950px;
          margin: 0 auto;
        }
      }

      /* 🖥️ Ultra-Wide Screens (4K) */
      @media (min-width: 1920px) and (max-width: 1920px) {
        .video-background {
          max-height: 90vh!important;
        }
            .arrow {
        bottom: 90px !important;
        z-index: 5 !important;
    }
       .hero-content {
        position: absolute;
        bottom: 145px!important; /* ✅ Keep text slightly above bottom */
        left: 50%;
        transform: translateX(-50%);
        text-align: center;
        z-index: 2;
        color: #000000;
      }
       .hero-section {
        text-align: center;
        background: linear-gradient(to bottom, #f5f5f5, #fff);
        position: relative;
        height: 95vh!important; /* ✅ Full screen height on desktop/laptop */
        overflow: hidden; /* ✅ Hide any extra overflow */
      }
      }

 @media (min-width: 2560px) {
        .video-background {
          max-height: 90vh!important;
        }
            .arrow {
        bottom: 100px !important;
        z-index: 5 !important;
    }
       .hero-content {
        position: absolute;
        bottom: 165px!important; /* ✅ Keep text slightly above bottom */
        left: 50%;
        transform: translateX(-50%);
        text-align: center;
        z-index: 2;
        color: #000000;
      }

      .hero-section {
        text-align: center;
        background: linear-gradient(to bottom, #f5f5f5, #fff);
        position: relative;
        height: 95vh!important; /* ✅ Full screen height on desktop/laptop */
        overflow: hidden; /* ✅ Hide any extra overflow */
      }
      }


      /* publication card css */
     /* ✅ Overlay card styling */
      .overlay-card {
        min-height: 160px; /* equal height for all overlay cards */
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        border-radius: 16px;
        transition: all 0.3s ease;
      }

      /* make the logo slightly bigger and centered */
      .overlay-card img {
        height: 55px !important;
      }

      /* ensure consistent text height and alignment */
      .overlay-card h6 {
        font-size: 18px!important;
        line-height: 1.2;
        min-height: 50px;
        text-align: center;
        margin-top: 8px;
         font-weight: 400!important;
        color: #1d1d1f!important;

           
  
      }

      /* nice subtle hover effect */
      .overlay-card:hover {
        transform: translateY(-6px);
        box-shadow: 0 8px 18px rgba(0, 0, 0, 0.12);
      }

      /* responsive tweaks */
      @media (max-width: 991.98px) {
        .overlay-card {
          min-height: 160px;
        }
      }

      @media (max-width: 575.98px) {
        .overlay-card {
          min-height: 150px;
        }
      }



      /* events section css */

         /* Container row for two events */
      .events-row {
        display: flex;
        justify-content: space-between;
        gap: 80px; /* space between event 1 & 2 */
        margin-bottom: 90px;
        padding: 0 10px; 
      }

      /* Each event card */
      .event-card {
        position: relative;
        flex: 1 1 50%;
      }

      .event-card img {
        width: 100%;
        height: auto;
        border-radius: 10px;
      }

      /* Overlay positioning */
      .event-overlay {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        bottom: -115px; /* pushed down slightly for larger overlay */
        width: 55%;
      }

      /* 🎯 Overlay card design (white box) */
      .event-inner-card {
        background: #fff;
        border-radius: 16px;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
        padding: 25px 20px;
        min-height: 200px; /* increased card height */
        text-align: center;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        transition: all 0.3s ease;
      }

      /* .event-inner-card:hover {
        transform: translateY(-6px);
        box-shadow: 0 8px 22px rgba(0, 0, 0, 0.15);
      } */

      /* 🔹 Larger logo inside overlay */
      .event-inner-card img {
        height: 75px !important; /* increased logo size */
        margin-bottom: 12px;
      }

      /* Text styling inside overlay */
      .event-inner-card h6 {
        font-size: 16px;
        line-height: 1.4;
        font-weight: 500;
        margin: 0;
        color: #000;
      }

      .evn-mrg {
        margin-top: 6rem;
      }
 .evn-mrg-desk{
         margin-top: 0rem;
      }

      .pb{
        padding-bottom: 100px!important;
      }

      /* 📱 Responsive adjustments */
      @media (max-width: 991.98px) {
        .events-row {
          flex-direction: column;
          /* gap: 60px; */
        }

        .event-overlay {
          width: 70%;
          bottom: -55px;
        }

        .event-inner-card {
          min-height: 180px;
        }

        .event-inner-card img {
          height: 60px !important;
        }

        .evn-mrg {
        margin-top: 0rem;
      }

     
      .pb{
        padding-bottom: 30px!important;
      }

      }


@media (max-width: 575.98px) {
        .event-overlay {
          width: 80%;
          bottom: -90px;
        }

        .event-inner-card {
          min-height: 90px;
          padding: 30px 20px;
        }

        .event-inner-card img {
          height: 55px !important;
        }

        .evn-mrg {
        margin-top: 2rem;
      }


      .evn-mrg-desk{
         margin-top: 2rem;
      }
      .pb{
        padding-bottom: 30px!important;
      }
      }


/* about us video */

  .video-container {
        position: relative;
        width: 100%;
        /* max-width: 800px; */
        margin: auto;
        overflow: hidden;
        border-radius: 16px;
        background: #000;
      }
      
      .no-stretch-video {
        width: 100%;
        height: auto;
        display: block;
        object-fit: cover; /* ✅ Keeps full video visible, no cropping */
        background-color: #000;
      }
      
      /* 🎯 Overlay icon — hidden by default */
      .video-icon {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        cursor: pointer;
        z-index: 5;
        opacity: 0;
        transition: opacity 0.3s ease;
        pointer-events: none; /* Allow clicks to pass to video */
      }
      
      /* 👆 Show icon only when hovering over container */
      .video-container:hover .video-icon {
        opacity: 1;
        pointer-events: auto;
      }
      
      /* 🔹 Optional fade effect */
      .video-icon.fade-out {
        opacity: 0;
        transition: opacity 0.5s ease;
      }
      
      @media (max-width: 768px) {
          .video-icon {
    display: none !important; /* Hide custom play/pause button on mobile */
  }
         .video-container {
    aspect-ratio: 16 / 9;       /* Maintain proper video ratio */
    border-radius: 10px;        /* Slightly smaller corners */
  }

  .no-stretch-video {
    object-fit: contain;        /* Prevent cropping on mobile */
    height: auto;
  }

      }

   
/* 
      website for xxl screen 2560px */

/* 🖥️ For 2560px wide screens only */
@media (min-width: 2560px) {
  /* ✅ Containers stay wide but slightly inset */
  .container,
  .custom-container,
  .custom-container2, .custom-container3 {
    max-width: calc(100% - 80px) !important;
    margin-left: 40px !important;
    margin-right: 40px !important;
  }

  /* ❌ Removed hero/footer custom width — let them span fully */
  /* .hero-section,
  footer,
  section {
    width: calc(100% - 80px);
    margin-left: 40px;
    margin-right: 40px;
  } */

  /* ✅ Navbar adjustments only */
  header nav.navbar {
    padding-top: 20px !important;
    padding-bottom: 20px !important;
    padding-left: 60px !important;   /* Add breathing space left */
    padding-right: 60px !important;  /* Add breathing space right */
  }

  /* ✅ Bigger logo for 4K screens */
  header .navbar-brand img {
    height: 135px !important;
    transition: all 0.3s ease;
  }

  /* ✅ Larger nav links */
  header nav a.nav-link {
    font-size: 3rem !important;
    margin: 0 20px !important;
  }

  /* ✅ Slight border and polish */
  header {
    border-bottom: 2px solid #e0e0e0 !important;
  }

  /* ✅ Hero text scaling */
  .hero-content h2 {
    font-size: 42px !important;
    line-height: 1.4 !important;
  }

  /* ✅ Section titles */
  .section-title,
  .section-title-contact {
    font-size: 5rem !important;
  }

  /* ✅ Footer text readability */
  .footer p {
    font-size: 18px !important;
  }

 .cus-mr-xxl {
    margin-right: 6rem !important;


}


.content p {
    /* font-size: 19px; */
    
    line-height: 55px!important;
    color: #1d1d1f!important;
    font-family: 'Oswald', sans-serif!important;
    font-weight: 400!important;
   font-size: 46px !important;
  }

/* 
CARD FONT-SIZE */
.event-inner-card img {
    height: 105px !important;
    margin-bottom: 12px;
}

h6 {
    font-family: "Oswald", sans-serif !important;
    font-weight: 300 !important;
    font-size: 30px !important;
    color: #1d1d1f !important;
}

.overlay-card img {
    height: 75px !important;
}

.overlay-card h6 {
    font-size: 30px !important;
    line-height: 1.2;
    min-height: 50px;
    text-align: center;
    margin-top: 8px;
    font-weight: 400 !important;
    color: #1d1d1f !important;
}

.cus-s-xxl{
  font-size: 30px!important;
}
}