.overlay {
  background: rgba(0, 0, 0, 0.8);
}
.info-container {
  width: 27.8%;
  padding: 3rem;
}
.overlay-info-container {
  width: 72.2%;
  position: relative;
  padding: 1rem;
}
/* Responsive styles for information section */
@media (max-width: 991.89px) {
  .info-container {
    width: 40%;
    margin-inline-end: 0;
    margin-bottom: 1rem;
  }

  .overlay-info-container {
    width: 60%;
    padding: 1rem 0.5rem;
  }
}
@media (max-width: 767.89px) {
  .info-container {
    width: 60%;
    margin-inline-end: 0;
    margin-bottom: 1rem;
  }

  .overlay-info-container {
    width: 40%;
    padding: 1rem 0.5rem;
  }
}
@media (max-width: 575.89px) {
  .info-container {
    width: 90%;
    margin-inline-end: 0;
    margin-bottom: 1rem;
  }

  .overlay-info-container {
    width: 10%;
    padding: 1rem 0.5rem;
  }
}
@media (min-width: 992px) and (max-width: 1399.98px) {
  .info-container {
    width: 35%;
  }
  .overlay-info-container {
    width: 65%;
  }
}
/* .info-background {
  background:
    linear-gradient(to bottom, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 1)),
    url("../assets/images/pattern-info.svg") no-repeat top center,
    linear-gradient(to right,   rgba(255, 255, 255, 1), rgba(255, 255, 255, 0.3)) ;
  background-size: cover;
} */

.info-background {
  position: relative;
  background-color: white;
}

.info-background::before {
  content: "";
  position: absolute;
  top: 0;
  inset-inline-start: 0;
  inset-inline-end: 0;
  bottom: 0;
  background: linear-gradient(
      to bottom,
      rgba(255, 255, 255, 0.94),
      rgba(255, 255, 255, 1)
    ),
    url("../assets/images/pattern-info.svg") no-repeat top center;
  background-size: cover;
  opacity: 1;
  z-index: 0;
}

.info-background > * {
  position: relative;
  z-index: 1;
}

.rounded {
  border-radius: 0.5rem !important;
}

svg {
  fill: var(--primary-color);
  width: 1.75rem;
}

.info {
  position: fixed;
  top: 0;
  inset-inline-end: 0;
  inset-inline-start: 0;
  bottom: 0;
  z-index: 1300;
  overflow: auto;
}

.phone-icon-info {
  width: 1.125rem;
}

.mouwasat-info-logo {
  width: 90%;
}

/* Social Media Cards Responsive Styles */
.social-media-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
}

/* Large screens - 3 cards per row */
@media (min-width: 1200px) {
  .social-media-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Medium screens - 2 cards per row */
@media (min-width: 768px) and (max-width: 1199.98px) {
  .social-media-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Small screens - 2 cards per row with smaller gap */
@media (min-width: 576px) and (max-width: 767.98px) {
  .social-media-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
  }

  .social-media-grid .card {
    padding: 0.75rem !important;
  }

  .social-media-grid .card h6 {
    font-size: 0.875rem;
  }
}

/* Extra small screens - 1 card per row */
@media (max-width: 991.88px) {
  .social-media-grid {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }

  .social-media-grid .card {
    padding: 1rem !important;
  }
}

/* Ensure cards have consistent height */
.social-media-grid .card {
  display: flex;
  align-items: center;
  min-height: 3.5rem;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.social-media-grid .card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Icon and text alignment */
.social-media-grid .card .d-flex {
  width: 100%;
  justify-content: flex-start;
  align-items: center;
}

.social-media-grid .card i {
  flex-shrink: 0;
  width: 1.25rem;
  text-align: center;
  color: var(--primary-color);
}

.social-media-grid .card h6 {
  margin: 0;
  font-weight: 500;
  color: var(--primary-color);
}

/* Font Awesome Icon Styles */
.social-media-grid .card i.fa-brands {
  font-size: 1.25rem;
  width: auto;
  height: auto;
  transition: transform 0.3s ease;
  display: inline-block;
}

.social-media-grid .card:hover i.fa-brands {
  transform: scale(1.2);
}

/* Specific icon colors */
.social-media-grid .card i.fa-facebook-f {
  color: var(--primary-color);
}

.social-media-grid .card i.fa-x-twitter {
  color: var(--primary-color);
}

.social-media-grid .card i.fa-linkedin-in {
  color: var(--primary-color);
}

.social-media-grid .card i.fa-youtube {
  color: var(--primary-color);
}

.social-media-grid .card i.fa-instagram {
  color: var(--primary-color);
}

.social-media-grid .card i.fa-whatsapp {
  color: var(--primary-color);
}

#informationSection {
  display: flex;
  overflow-y: scroll;
}