#hero {
  padding: 80px 40px;
  text-align: center;
  background:white;
  color:black;
  margin-top:50px;
}

#hero-head {
  font-size: 2.8rem;
  margin-bottom: 1rem;
  overflow: hidden;
  white-space: nowrap;
  width: 0;
}

.hero-para{
  font-size: 1.3rem;
  margin-bottom: 2rem;
}

.hero-para,
.hero-card,
.hero-cta-button,
#companies {
  opacity: 0;
  transform: translateY(40px);
}

.hero-card {
  transform: scale(0.8);
}

.visible {
  opacity: 1 !important;
  transform: translateY(0) scale(1) !important;
  transition: all 0.8s ease-out;
}

.typing {
  animation: typing 2.5s steps(40, end) forwards, blink 0.75s step-end infinite;
}

@keyframes typing {
  to { width: 100%; }
}

@keyframes blink {
  50% { border-color: transparent; } 
}

.hero-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 25px;
  max-width: 1200px;
  margin: auto;
  margin-bottom: 40px;
}

.hero-card {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  padding:10px;
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
  display: flex;
  flex-direction: column;
  gap:5px;
}

.hero-card:hover {
  transform: scale(1.05);
  box-shadow: 0 8px 30px rgba(168, 85, 247, 0.6);
}

.hero-icon {
  font-size: 30px;
  margin-bottom: 10px;
}

.hero-cta-button {
  padding: 12px 30px;
  background: #ff00ff;
  color: white;
  border: none;
  border-radius: 30px;
  font-size: 1rem;
  cursor: pointer;
  transform: scale(0.8);
  text-decoration: none;
  display: inline-block;
}

img.hero-card-img {
  width: 100%;
  height: 150px;
  object-fit: cover;
  border-radius: 12px;
  margin-bottom: 15px;
}


#promo {
  position: fixed; top: 0; left: 0;
  width: 100vw; height: 100vh;
  background: rgba(0,0,0,0.75);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; visibility: hidden;
  transition: opacity 0.4s ease;
  z-index:1000;
}
#promo.show { opacity: 1; visibility: visible; }
/* Split screen container */
#promoContent {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  width: 50%; max-width: 900px;
  height: 70%; 
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  transform: scale(0.8);
  transition: transform 0.5s ease;
  position: relative;
}
#promo.show #promoContent { transform: scale(1); }
/* Panels */
.company-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
  text-align: center;
}
.company-panel:nth-child(1) { background: #f7f9fc; }
.company-panel:nth-child(2) { background: #fcf7f9; }
.company-panel:nth-child(3) { background: #fcf7f9; }
.company-panel:nth-child(4) { background: #fcf7f9; }
.company-panel img { max-width: 80px; margin-bottom: 16px; }
#arc-logo{ max-width: 70px; }
.company-panel h2 {
  margin: 10px 0;
  font-size: 20px;
  color: #333;
}
.company-panel p { margin-bottom: 20px; color: #666; }
.visit-btn {
  padding: 12px 24px;
  background: #0073e6;
  color: #fff;
  border: none;
  border-radius: 25px;
  text-decoration: none;
  font-size: 15px;
  transition: background 0.3s, transform 0.2s;
}
.visit-btn:hover { background: #005bb5; transform: translateY(-2px); }
/* Close */
#close-Btn {
  position: absolute;
  top: 15px; right: 15px;
  font-size: 28px;
  color: #444;
  background: none;
  border: none;
  cursor: pointer;
  transition: transform 0.2s;
}
#close-Btn:hover { transform: rotate(90deg); color: #000; }

@media (max-width: 768px) {
  #hero-head {
    font-size: 2rem;
    width: auto; /* Remove the width constraint */
    white-space: normal; /* Allow the text to wrap */
  }
}

@media (max-width: 768px) {
  /* Adjust Promo Content Width & Height */
  #promoContent {
    width: 90%; /* Increase width for mobile */
    height: auto; /* Allow height to adjust */
    grid-template-columns: 1fr; /* Stack panels vertically */
    max-height: none; /* Remove max height to let content flow */
    padding: 10px; /* Add some padding */
  }

  /* Adjust Panel Layout */
  .company-panel {
    padding: 15px;
  }

  /* Adjust Company Panel Title & Description Font Sizes */
  .company-panel h2 {
    font-size: 18px; /* Smaller font size for mobile */
  }

  .company-panel p {
    font-size: 14px; /* Smaller font size for mobile */
  }

  /* Adjust Visit Button Padding & Font Size */
  .visit-btn {
    padding: 10px 20px;
    font-size: 14px; /* Smaller font size for buttons */
  }

  /* Close Button */
  #close-Btn {
    font-size: 24px; /* Smaller close button */
  }

  /* Adjust the Image Size for Panels */
  .company-panel img {
    max-width: 60px; /* Smaller image for mobile */
  }
}