.hidden {
      display: none;
  }

  h1 {
      font-size: 2.5rem;
      margin-bottom: 30px;
  }

  .section.products {
      min-height: auto !important;
      height: 100vh !important;
  }

  .products .fw-bold,
  .events .fw-bold {
      font-size: 48px;
      font-family: 'Urbanist', sans-serif;
      font-weight: 700;
      text-align: left;
      color: #E3E3E3;
      letter-spacing: 0.29px;
      position: relative;
      display: flex;
      align-items: center;
      gap: 20px;
  }

  .section.events h3 {
      font-family: 'Urbanist', sans-serif;
      font-weight: 500;
      font-size: 35px;
      line-height: 48px;
      text-align: left;
      color: #c3c3c3;
      padding-left: 3rem;
      padding-right: 3rem;
  }

  .section.events .left-background {
      width: 502px;
      height: 509px;
      background: radial-gradient(#484260, rgba(24, 25, 27, 0.00));
      border-radius: 50%;
      filter: blur(150px);
      position: absolute;
      top: -177px;
      left: -107px;
      z-index: -1;
  }

  .products .fw-bold {
      margin-bottom: 0;
  }

  .products .fw-bold::after,
  .events .fw-bold.section-title::after {
      content: "";
      flex: 1;
      height: 1px;
      background-color: #6b6b6b;
  }

  .back-button-wrapper {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 3rem;
      padding-bottom: 1rem;
      border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  }

  .rightside-button-wrapper {
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
  }

  .rightside-button-wrapper .cta-button {
      font-size: 14px;
      font-weight: 500;
      text-decoration: none;
      border: 1px solid #ccc;
      transition: all 0.3s ease;
      background: transparent;
      box-shadow: none;
      padding-left: 10px;
      width: auto;
  }

  .product-grid {
      display: flex;
      flex-wrap: wrap;
      gap: 24px;
      align-items: center;
      justify-content: center;

  }

  /* #productDetail {
      height: 80vh;
  } */

  #detailTitle {
      position: relative;
      font-size: 96px;
      font-family: 'Montserrat', sans-serif;
      font-weight: 700;
      text-align: left;
      color: rgba(80, 95, 115, 0.40);
      line-height: 46px;
      letter-spacing: 0.58px;
      margin-bottom: 100px;
  }

  #detailTitle::before {
      position: absolute;
      content: '';
      width: 200px;
      height: 150px;
      background: radial-gradient(#484260, rgba(24, 25, 27, 0.00));
      border-radius: 50%;
      filter: blur(150px);
  }

  #detailTitle span {
      font-size: 28px;
      font-family: 'Montserrat', sans-serif;
      font-weight: 700;
      text-align: left;
      color: #efefef;
      line-height: 32px;
  }

  .card {
      background: #16273c;
      border-radius: 14px;
      padding: 16px;
      flex: 1 1 calc(33.33% - 24px);
      min-width: 250px;
      max-width: 500px;
      cursor: pointer;
      transition: transform 0.3s ease;
      position: relative;
  }

  .card:hover {
      transform: translateY(-6px);
  }

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

  .card .number {
      font-size: 2rem;
      color: #284d77;
      opacity: 0.3;
      font-size: 5rem;
      font-family: 'Montserrat', sans-serif;
      font-weight: 700;
      text-align: left;
      color: rgba(80, 95, 115, 0.40);
      line-height: 1;
      letter-spacing: 0.58px;
  }

  .card .title {
      font-size: 1.1rem;
      font-weight: 600;
      margin: 10px 0 5px;
      color: #efefef;
      ;
  }

  .card .subtitle {
      font-size: 0.9rem;
      opacity: 0.85;
      color: #efefef;
      ;
  }

  .detail {
      max-width: 1000px;
      margin: auto;
  }

  .back-button {
      background: transparent;
      padding: 10px 20px;
      border: none;
      border-radius: 6px;
      color: white;
      font-size: 1rem;
      cursor: pointer;
  }

  .back-button img {
      margin-right: 10px;
  }

  .detail-wrapper {
      display: flex;
      flex-wrap: wrap;
      gap: 40px;
      margin-bottom: 60px;
  }

  .right-content {
      flex: 1 1 55%;
      color: #fff;
  }

  .right-content h2 {
      font-size: 2rem;
      margin-bottom: 16px;
  }

  .right-content p {
      margin-bottom: 16px;
      line-height: 1.6;
      opacity: 0.9;
  }

  .left-image {
      flex: 1 1 5%;
  }

  .left-image img {
      width: 100%;
      height: 100%;
      border-radius: 12px;
  }

  .left-image .detail-image {
      width: 300px;
      height: 250px;
      border-radius: 0px 0px 20px 20px;
  }

  .related-title {
      font-size: 1.4rem;
      margin-bottom: 20px;
  }


  .related-list {
      display: flex;
      gap: 16px;
      overflow-x: auto;
      padding-bottom: 10px;
      align-items: center;
      justify-content: center;
  }

  .related-card {
      min-width: 180px;
      background: #1e2a3a;
      border-radius: 12px;
      padding: 10px;
      text-align: center;
      cursor: pointer;
      transition: all 0.3s ease;
      width: 250px;
      height: 210px;
  }

  .related-card .small-card {
      width: 100%;
      color: #fff;
      display: flex;
      align-items: center;
  }

  .related-card:hover {
      transform: translateY(-4px);
  }

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

  .related-card .title {
      font-weight: 600;
      margin-left: 10px;
  }

  .related-card .number {
      font-size: 20px;
      color: #2c4e71;
      opacity: 0.5;
  }

  #relatedContainer {
      position: relative;
  }

  #relatedContainer::before {
      content: '';
      position: absolute;
      height: 1px;
      background-color: #6b6b6b;
      right: 0;
      width: 450px;
  }

  #relatedContainer::after {
      content: '';
      position: absolute;
      height: 1px;
      background-color: #6b6b6b;
      left: 0;
      width: 450px;
  }

  .products {
      background: linear-gradient(180deg, #0a1628, #1b263b);
      /* min-height: 100vh; */
      display: flex;
      align-items: center;
      padding-top: 100px;
      /* padding-bottom: 150px; */
  }

  /* .product-card img {
      margin-top: 15px;
      border-radius: 12px;
      width: 100%;
      height: auto;
  } */

  .section-title {
      font-size: 48px;
      color: #c3c3c3;
      font-family: 'Urbanist', sans-serif;
      letter-spacing: 0.3px;
  }

  /* Arrow */
  .arrow {
      position: absolute;
      top: -7px;
      right: 15px;
      font-size: 25px;
      color: white;
  }

  .product-card:hover .arrow {
      transform: translate(3px, 3px);
      transition: transform 0.2s ease;
  }

  /* Force a new row after 3 items */
  .flex-break {
      flex-basis: 100%;
      height: 0;
  }

  /* Card wrapper — fixed width for layout control */
  .product-card-wrapper {
      /* width: 320px; */
      width: 640px;
      /* min-height: 620px; */
      height: 690px;
  }

  /* Responsive: stack cards vertically on small screens */

  .flex-break {
      flex-basis: 100%;
      height: 0;
  }

  /* Number in background */
  .product-number {
      position: absolute;
      top: 0;
      left: 15px;
      font-size: 96px;
      font-weight: 700;
      color: rgba(255, 255, 255, 0.05);
  }

  .learn-more-text {
      font-size: 14px;
      color: #ffffff;
      font-weight: 500;
      opacity: 0;
  }

  /* Title & Subtitle */
  .product-card h4 {
      margin-top: 65px;
      font-family: 'Montserrat', sans-serif;
      font-weight: 700;
      font-size: 28px;
      line-height: 32px;
      color: #EFEFEF;
      margin-bottom: 20px;
  }

  .product-card h4 span {
      font-weight: 600;
  }

  .product-card p {
      font-family: 'Montserrat', sans-serif;
      font-weight: 400;
      font-size: 16px;
      line-height: 26px;
      color: #EFEFEF;
      margin-bottom: 10px;
  }

  .product-card p span {
      font-weight: 600;
  }

  .product-card .naina-tagline {
      margin-bottom: 27px;
  }

  .product-card-wrapper .card-images {
      width: 100%;
      height: 241px;
      border-radius: 12px;
      margin-bottom: 24px;
  }
  

  .product-card-wrapper .card-images img {
      width: 100%;
      height: 100%;
      object-fit: cover;
  }
  .marginTop{
    margin-top: 60px;
  }

  .product-card:hover {
      transition: bottom 0.4s ease;
  }

  /* .product-card:hover .card-images img {
    transform: scale(1.0) translateY(-5%);
} */


  .card-footer-hover .small {
      display: block;
      font-size: 13px;
      color: #ccc;
      margin-bottom: 6px;
  }

  .card-footer-hover .cta-button {
      font-size: 14px;
      font-weight: 500;
      text-decoration: none;
      /* border: 1px solid #ccc; */
      transition: all 0.3s ease;
      background: #0000004D;
      box-shadow: none;
      padding-left: 10px;
      width: auto;
  }

  .card-footer-hover .cta-button:hover {
      background: #359bd8;
      color: #fff;
      transition: color 0.3s ease;
  }

  .rightside-button-wrapper .cta-button {
      margin-left: 1rem;
  }

  .card-footer-hover .cta-button i,
  .rightside-button-wrapper .cta-button i {
      /* margin-left: 5px; */
      font-style: normal;
      height: 28px;
      background: transparent;
  }

  .card-footer-hover .cta-button .fa-arrow-right {
      background: transparent;
  }

  .card-footer-hover .cta-button:hover .fa-arrow-right {
      background: transparent;
      color: var(--icon-color);
  }

  .product-card:hover .learn-more-hover .arrow {
      /* transform: rotate(45deg) translateX(3px); */
      transform: rotate(-46deg) translateX(-2px);
      right: 20px;
  }


  /* Ensure consistent card size before hover */
  .product-card {
      background-color: #1e2a3a;
      border-radius: 16px;
      padding: 20px;
      position: relative;
      overflow: hidden;
      transition: box-shadow 0.3s ease;
      color: white;
      box-shadow: 0 0 12px rgba(0, 0, 0, 0.3);
      cursor: pointer;
      text-align: left;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      /* height: 390px;       */
      transform: scale(0.9);
      transition: transform 0.4s ease-in-out, box-shadow 0.3s ease-in-out;
      will-change: transform;
      transition: transform 0.4s ease-in-out, box-shadow 0.3s ease-in-out;
  }

  .product-card:hover {
      background: #182c47;
      box-shadow: none;
      transform: scale(1);
      background: rgba(24, 44, 71, 1);
      transition: transform 0.4s ease-in-out, box-shadow 0.3s ease-in-out;
      padding-bottom: 10px;
  }

  .product-card:hover img {
      transform: scale(1.12);
      transition: transform 0.4s ease-in-out, box-shadow 0.3s ease-in-out;
      border-radius: 0;
      margin-bottom: 10px;
  }

  /* Footer CTA - hide by default with no space */
  .card-footer-hover {
      max-height: 0;
      overflow: hidden;
      opacity: 0;
      padding: 0;
      margin: 0;
      border-top: none;
      display: flex;
      align-items: center;
      justify-content: space-between;
      transition: transform 0.4s ease-in-out, box-shadow 0.3s ease-in-out;
  }

  /* Reveal only from the bottom */
  .product-card:hover .card-footer-hover {
      max-height: 200px;
      opacity: 1;
      padding-top: 20px;
      padding-bottom: 10px;
      /* margin-top: 15px; */
      /* border-top: 1px solid rgba(255, 255, 255, 0.1); */
      display: flex;
      /* transform: translateX(0); */
      align-items: baseline;
      /* transition: transform 0.2s ease; */
      transform: translateY(0);
      transition: transform 0.4s ease-in-out, box-shadow 0.3s ease-in-out;
  }


  /* Hide static arrow on hover */
  .product-card:hover .arrow-static {
      opacity: 0;
      transition: opacity 0.2s ease;
  }

  .product-card .learn-more-hover .arrow img {
      width: 20px;
      height: 20px;
      border-radius: 0;
  }

  /* Smooth arrow movement */
  .learn-more-hover .arrow {
      transform: rotate(45deg);
      transition: transform 0.2s ease;
      /* transform: rotate(-46deg) translateX(17px); */
      right: 20px;
      transform: rotate(-6deg) translateX(3px);
  }

  .product-card:hover .learn-more-hover .arrow img {
      margin-top: 9px;
  }

  #gridContainers {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      /* max-width: 1080px; */
      max-width: 1580px;
      margin: 0 auto;
      gap: 2rem;
      overflow: hidden;
      /* height: 80vh; */
      gap: 0 !important;
      padding-left: 2rem;
      padding-right: 2rem;
  }

  /* Always-visible arrow */
  .arrow-static {
      position: absolute;
      top: 14px;
      right: 15px;
      font-size: 20px;
      color: white;
      pointer-events: none;
      transition: opacity 0.3s ease;
  }

  /* Hover version fades in */
  .learn-more-hover {
      width: 22%;
      position: absolute;
      top: 30px;
      right: 15px;
      display: flex;
      gap: 6px;
      align-items: center;
      opacity: 1;
      transform: translateX(10px);
      /* pointer-events: none; */
      transition: opacity 0.3s ease, transform 0.3s ease;
  }

  .product-card:hover .arrow-static {
      opacity: 0;
  }

  .product-card:hover .learn-more-hover {
      opacity: 1;
      transform: translateX(0);
  }

  .product-card:hover .learn-more-hover .learn-more-text {
      opacity: 1;
      transform: translateX(0);
      text-decoration: underline;
  }

  .product-card img {
      margin-top: 15px;
      border-radius: 12px;
      width: 100%;
      height: 241px;
      transition: transform 0.4s ease-in-out, box-shadow 0.3s ease-in-out;

  }

  .section.events .fw-bold.section-title {
      padding-left: 3rem;
      padding-right: 3rem;
      font-size: 80px;
      font-weight: 600 !important;
      margin-bottom: 0;
  }


  /* Section Styling new UI*/



  .services-section-card-3 {
      padding: 60px 20px;
      text-align: center;
      border-radius: 20px;
      background: linear-gradient(135deg, #1a2433, #2b3f57);
      /* max-width: 1200px;
      margin: 40px auto; */
      width: 81%;
      /* box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3); */
      position: relative;
      background: #1e2a3a;
      height: 440px;
      margin-bottom: 5rem;
      padding-top: 0;
  }

  .services-section-card-3:hover {
      transform: scale(1);
      background: rgba(24, 44, 71, 1);
      transition: transform 0.4s ease-in-out, box-shadow 0.3s ease-in-out;
      padding-bottom: 10px;
  }


  .services-section-card-3 h2 {
      text-align: left;
      font-family: 'Montserrat', sans-serif;
      font-weight: 700;
      font-size: 28px;
      line-height: 32px;
      color: #EFEFEF;
      margin-top: 35px;
  }

  .services-section-card-3 p {
      font-family: 'Montserrat', sans-serif;
      font-weight: 400;
      font-size: 16px;
      line-height: 26px;
      color: #EFEFEF;
      text-align: left;
  }

  .service-card-details {
      width: 100%;
      padding: 2rem 0;

  }

  .service-card-details ul {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 35px;
      padding-left: 0;
      transition: transform 0.4s ease-in-out, box-shadow 0.3s ease-in-out;
  }

  .service-card-details ul li {
      list-style: none;
      width: 28%;
      padding-bottom: 16px;
  }

  .service-card-details ul li:last-child img {
      height: 80px;
  }

  .service-card-details ul li img {
      width: 80%;
      height: 56px;
  }

  .services-section-card-3:hover .service-card-details ul {
      transform: scale(.9);
      transition: transform 0.4s ease-in-out, box-shadow 0.3s ease-in-out;
  }

  .services-section-card-3 .card-footer-hover {
      transition: transform 0.4s ease-in-out, box-shadow 0.3s ease-in-out;
  }

  .services-section-card-3:hover .card-footer-hover {
      opacity: 1;
      transition: transform 0.4s ease-in-out, box-shadow 0.3s ease-in-out;
      max-height: 50px;
  }

  /* Card Styling */
  .service-card {
      padding: 20px;
      border-radius: 15px;
      background: rgba(255, 255, 255, 0.05);
      transition: 0.3s;
      height: 100%;
  }

  .service-card:hover {
      background: rgba(255, 255, 255, 0.1);
      transform: translateY(-5px);
  }

  .service-card img {
      max-height: 50px;
      margin-bottom: 10px;
  }

  .service-title {
      font-weight: 600;
      margin-top: 10px;
  }

  @media (max-width: 1150px) {
      .services-title {
          font-size: 150px;
      }

      .fp-overflow {
          overflow-y: scroll !important;
      }

      .product-card h4 {
          font-size: 22px;
          margin-top: 35px;
      }

      .product-card p,
      .services-section-card-3 p {
          font-size: 14px;
      }

      .services-section-card-3 h2 {
          font-size: 22px;
      }

  }

  @media (max-width: 991px) {

      /*products Section Start*/
      .card-footer-hover {
          max-height: 200px;
          opacity: 1;
          padding-top: 12px;
          margin-top: 15px;
          border-top: 1px solid rgba(255, 255, 255, 0.1);
          display: flex;
          transform: translateX(0);
          align-items: baseline;
          padding-bottom: 15px;
      }

      .products {
          padding-top: 5rem;
          background: transparent;
      }

      .product-card {
          height: auto;
      }

      .product-card:hover {
          transform: scale(.9);
      }

      .product-card:hover img {
          transform: scale(1);
      }


      #gridContainers {
          max-width: 980px;
          flex-flow: wrap;
      }

      .product-card-wrapper {
          width: 50%;
          height: auto;
      }

      .services-section-card-3 {
          width: 100%;
          height: auto;
          padding-bottom: 0;
          margin-bottom: 0;
          padding-top: 25px;
      }

      .learn-more-hover {
          width: 40%;
      }

      .learn-more-hover .arrow {
          transform: rotate(-45deg) translateX(3px);
          top: -4px;
      }

      .learn-more-text {
          opacity: 1;
      }

      .section.events .fw-bold.section-title {
          font-size: 36px;
          padding-left: 14px;
          padding-right: 0;
      }

      .product-card:hover .learn-more-hover .arrow {
          transform: rotate(-46deg) translateX(0);

      }


  }
  @media (max-width: 768px) {
      .detail-wrapper {
          flex-direction: column;
      }

      #gridContainers {
          flex-direction: column;
          align-items: center;
          padding-left: 0;
          padding-right: 0;
      }

      .product-card-wrapper {
          width: 50%;
          margin-bottom: 1rem;
      }

      .learn-more-text {
          opacity: 1;
      }

      .product-card:hover {
          transform: scale(1);
      }


      #gridContainers {
          max-width: 750px;
          flex-flow: wrap;
      }

  }

  @media (max-width: 720px) {
      .product-card-wrapper {
          width: 100%;
          height: 100%;
          margin-bottom: 1rem;
      }

      .product-card .learn-more-hover .arrow img {
          margin-top: 0;
          width: 15px;
          height: 15px;
      }
      .marginTop {
        margin-top: 0;
        }

  }
  @media (max-width: 575px) {
      .learn-more-hover {
          width: 38%;
          top: 15px;
      }

      .product-card:hover .card-footer-hover {
          align-items: center;
      }

      #gridContainers {
          padding-left: 0;
          padding-right: 0;
          max-width: 550px;
      }

      .card-footer-hover {
          flex-flow: column;
          align-items: center;
      }


      .services-section-card-3 {
          width: 100%;
          margin-bottom: 1rem;
          height: auto;
          padding-bottom: 0;
      }

      .services-section-card-3:hover .service-card-details ul {
          transform: scale(1);
      }

      .services-section-card-3:hover .card-footer-hover {
          max-height: 80px;
      }

      .service-card-details ul {
          gap: 35px;
      }

      .products .fw-bold::after,
      .events .fw-bold.section-title::after {
          display: none;
      }

      .product-card p,
      .services-section-card-3 p {          
          font-size: 12px;
        line-height: 24px;
      }

      .product-card h4,
      .services-section-card-3 h2 {
          font-size: 16px;
          line-height: 28px;
      }

      .product-card .naina-tagline {
          margin-bottom: 10px;
      }

      .services-section-card-3 h2 {
          margin-top: 0;
      }

      .section.events .left-background {
          width: 100%;
        height: 100%;
        top: 0;
        left: 0;
      }

      .scroll-buttons button i {
          position: absolute;
      }

  }

  @media (max-width: 540px) {
      .products {
          padding-top: 0;
      }

      .products .fw-bold,
      .events .fw-bold {
          padding-bottom: 2rem;
      }

      .product-card {
          width: 100%;
          transform: scale(1);
      }

      .service-card-details ul li {
          width: 41%;
          padding-bottom: 0;
      }

      .service-card-details ul li img {
          width: 100%;
          height: 56px;
      }

      .service-card-details ul li:last-child img {
          height: 56px;
      }

  }


  @media (max-width: 440px) {}