/* ============================================

   Corporate Events - Master CSS

===============================================*/



body {

  font-family: 'Inter', sans-serif;

  color: #111827;

  background: #f8faff;

  overflow-x: hidden;

  scroll-behavior: smooth;

  margin: 0;

  padding: 0;

}



/* ===== HERO SECTION ===== */

.banner.corp-hero {

  position: relative;

  min-height: 550px; 

  height: 80vh;

  width: 100%;

  overflow: hidden; /* Fixed syntax error: added 'hidden' */

  background: #000;

  display: flex;

  align-items: center;

  justify-content: center;

}



.video-background {

  position: absolute;

  top: 50%;

  left: 50%;

  width: 100vw;

  height: 56.25vw; 

  min-height: 80vh; 

  min-width: 142.22vh; /* Corrected math for full 16:9 coverage */

  transform: translate(-50%, -50%); 

  z-index: 0;

  pointer-events: none; 

}



.video-background iframe {

  position: absolute;

  top: 50%;

  left: 50%;

  width: 100%;

  height: 100%; 

  transform: translate(-50%, -50%) scale(1.3); /* Slightly increased scale to hide UI on all screens */

  border: none;

}



.video-overlay {

  position: absolute;

  inset: 0;

  background: rgba(0, 0, 0, 0.4); /* Added overlay color to ensure visibility */

  z-index: 1;

}





/* ===== SECTION TITLES ===== */

.section-title {

  font-size: 34px;

  font-weight: 600;

  color: #000000;

  text-align: center;

  margin-bottom: 40px;

  position: relative;

  text-transform: uppercase;

  letter-spacing: 0.5px;

}



.section-title::after {

  content: "";

  position: absolute;

  bottom: -12px;

  left: 50%;

  width: 80px;

  height: 4px;

  background: linear-gradient(90deg, #2c75ff, #60a5fa);

  transform: translateX(-50%);

  border-radius: 2px;

}



/* ===== BENEFITS ===== */

.corp-benefits {

  padding: 90px 60px;

  background: #fff;

}



.benefit-grid {

  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));

  gap: 35px;

  margin-top: 30px;

}



.benefit-card {

  background: rgba(255,255,255,0.9);

  backdrop-filter: blur(10px);

  padding: 35px 25px;

  border-radius: 20px;

  box-shadow: 0 6px 20px rgba(0,0,0,0.08);

  transition: all 0.4s ease;

  text-align: center;

}



.benefit-card:hover {

  transform: translateY(-10px);

  box-shadow: 0 12px 25px rgba(44,117,255,0.25);

}



.benefit-card.highlight {

  border: 2px solid #2c75ff;

  background: linear-gradient(135deg, #e6edff, #ffffff);

}



/* ===== CORPORATE SOLUTIONS ===== */

.corp-solutions {

  padding: 100px 60px;

  background: linear-gradient(to bottom right, #daeafa, #f5f9ff);

  text-align: center;

}



.solutions-grid {

  display: flex;

  justify-content: center;

  flex-wrap: wrap;

  gap: 0;

  margin-top: 50px;

}



.solution-card {

  flex: 1;

  min-width: 250px;

  max-width: 25%;

  padding: 50px 30px;

  transition: all 0.4s ease;

  cursor: pointer;

}



.solution-card:nth-child(odd) {

  background: linear-gradient(135deg, #2c75ff, #1e40af);

  color: #fff;

}



.solution-card:nth-child(even) {

  background: #ffffff;

  color: #1e3a8a;

  border: 1px solid #e2e8f0;

}



.solution-card:hover {

  transform: scale(1.03);

  z-index: 2;

  box-shadow: 0 12px 30px rgba(0,0,0,0.15);

}



/* ===== CONTACT SECTION ===== */

.corp-contact {

  display: flex;

  align-items: center;

  justify-content: space-between;

  padding: 80px 40px;

  gap: 50px;

  background: radial-gradient(circle at top, #f8faff 0%, #e8efff 100%);

}



.contact-video {

  flex: 1;

  position: relative;

  overflow: hidden;

  border-radius: 16px;

  box-shadow: 0 6px 20px rgba(0,0,0,0.15);

}



.contact-video iframe {

  width: 100%;

  height: 320px;

  border: none;

  transition: transform 0.4s ease;

}



.contact-info {

  flex: 1;

  font-size: 16px;

}



.book-btn {

  display: inline-block;

  background: linear-gradient(135deg, #2c75ff, #1e40af);

  color: #fff;

  padding: 12px 30px;

  border-radius: 30px;

  text-decoration: none;

  font-weight: 600;

  transition: all 0.3s ease;

}



/* ===== SCROLL ANIMATIONS ===== */

[data-animate] {

  opacity: 0;

  transform: translateY(40px);

  transition: all 0.9s ease-out;

}



[data-animate].visible {

  opacity: 1;

  transform: translateY(0);

}



/* ===== MASTER RESPONSIVENESS ===== */



/* Tablets / Medium Screens */

@media (max-width: 1100px) {

  .solution-card {

    max-width: 50%;

  }

}



/* Mobile Phones - Final Corporate Hero Fix */

@media (max-width: 768px) {

  .banner.corp-hero {

    height: 80vh !important;

    min-height: 80vh !important;

    display: flex !important;

    justify-content: center;

    align-items: center;

    padding: 30px 0;

    background: #040940; 

  }



  /* 1. The Video Container - NO OUTLINE */

  .banner.corp-hero .video-background {

    position: relative !important;

    width: 260px !important;   /* Narrow vertical window */

    height: 350px !important;  /* Shorter height as requested */

    margin: 0 auto !important;

    border-radius: 20px;

    overflow: hidden !important; /* This clips the video edges */

    top: auto !important;

    left: auto !important;

    transform: none !important;

    border: none !important;    /* Removes the outline/border */

    box-shadow: 0 15px 35px rgba(0,0,0,0.6);

  }



  /* 2. The Video Inside - FIXED WIDTH TO REMOVE BLACK BAR */

  .banner.corp-hero .video-background iframe {

    width: 550% !important; 

    height: 100% !important;

    position: absolute !important;

    left: 50% !important;

    top: 50% !important;

    transform: translate(-50%, -50%) scale(1.1) !important;

    margin: 0 !important;

    pointer-events: none;

  }



  /* 3. Cleanup other elements */

  .section-title {

    font-size: 26px;

    margin: 0 auto 20px !important;

    text-align: center;

    width: 100%;

  }



  .solution-card {

    max-width: 100% !important;

    width: 100%;

  }



  .corp-contact {

    flex-direction: column;

    text-align: center;

  }

  

  /* ===== BENEFITS RESPONSIVE ===== */

.corp-benefits {

    /* Reducing large desktop padding so it fits phone screens */

    padding: 50px 20px !important; 

    text-align: center; /* Centers text for better mobile readability */

}



/* If you have a grid or flex row inside benefits, stack them vertically */

.benefits-container, .benefit-grid {

    display: flex;

    flex-direction: column;

    gap: 30px;

    width: 100%;

}

}