/* Company Overview Page Styles */

/* Hero Section */
.overview-hero-section {
  background: linear-gradient(
    135deg,
    var(--bs-primary) 0%,
    var(--bs-secondary) 100%
  );
  height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.overview-hero-section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 300'%3E%3Cg fill='none' stroke='%23ffffff' stroke-width='2' opacity='0.3'%3E%3C!-- Cityscape silhouette --%3E%3Cpath d='M0,250 L50,250 L50,200 L100,200 L100,180 L150,180 L150,160 L200,160 L200,140 L250,140 L250,120 L300,120 L300,100 L350,100 L350,80 L400,80 L400,60 L450,60 L450,40 L500,40 L500,60 L550,60 L550,80 L600,80 L600,100 L650,100 L650,120 L700,120 L700,140 L750,140 L750,160 L800,160 L800,180 L850,180 L850,200 L900,200 L900,220 L950,220 L950,240 L1000,240 L1000,250 L1200,250'/%3E%3C!-- Eiffel Tower --%3E%3Cpath d='M600,40 L590,100 L610,100 Z'/%3E%3Cpath d='M595,70 L605,70'/%3E%3Cpath d='M597,85 L603,85'/%3E%3C!-- Buildings --%3E%3Crect x='100' y='180' width='50' height='70'/%3E%3Crect x='200' y='140' width='50' height='110'/%3E%3Crect x='300' y='100' width='50' height='150'/%3E%3Crect x='700' y='120' width='50' height='130'/%3E%3Crect x='800' y='160' width='50' height='90'/%3E%3C!-- Airplanes --%3E%3Cpath d='M150,80 L170,85 L150,90 L155,85 Z'/%3E%3Cpath d='M850,60 L870,65 L850,70 L855,65 Z'/%3E%3C!-- Dotted flight paths --%3E%3Cpath d='M170,85 Q300,50 600,40' stroke-dasharray='5,5'/%3E%3Cpath d='M850,65 Q700,30 600,40' stroke-dasharray='5,5'/%3E%3C/g%3E%3C/svg%3E");
  background-size: cover;
  background-position: center;
  opacity: 0.6;
}

.overview-hero-content {
  position: relative;
  z-index: 2;
  text-align: center;
}

.overview-hero-title {
  color: white;
  font-size: 3.5rem;
  font-weight: 700;
  margin: 0;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
  letter-spacing: 2px;
}

/* Services Overview Section */
.services-overview-section {
  background-color: #f8f9fa;
  padding: 80px 0;
  position: relative;
}

.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 60px;
  max-width: 1000px;
  margin: 0 auto;
}

.service-item {
  text-align: center;
  background: white;
  padding: 40px 30px;
  border-radius: 15px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  position: relative;
  overflow: hidden;
}

.service-item::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 5px;
  background: linear-gradient(90deg, var(--bs-primary), var(--bs-success));
}

.service-item:hover {
  transform: translateY(-10px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}

.service-icon {
  position: relative;
  width: 120px;
  height: 120px;
  margin: 0 auto 25px;
  background: linear-gradient(135deg, var(--bs-primary), var(--bs-secondary));
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 25px rgba(36, 37, 93, 0.3);
}

.service-icon i {
  font-size: 2.5rem;
  color: white;
  position: absolute;
}

.service-icon i:first-child {
  transform: translate(-8px, -8px);
}

.service-icon i:last-child {
  transform: translate(8px, 8px);
  opacity: 0.7;
}

.service-title {
  color: var(--bs-primary);
  font-size: 1.8rem;
  font-weight: 700;
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* Content Section */
.overview-content-section {
  background-color: white;
  padding: 80px 0;
}

.content-header {
  text-align: center;
  margin-bottom: 60px;
}

.content-title {
  color: var(--bs-primary);
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 20px;
  position: relative;
  display: inline-block;
}

.content-title::after {
  content: "";
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 4px;
  background: var(--bs-success);
  border-radius: 2px;
}

.content-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  margin-top: 40px;
}

.content-column {
  background: #f8f9fa;
  padding: 30px;
  border-radius: 10px;
  border-left: 5px solid var(--bs-success);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
  transition: transform 0.3s ease;
}

.content-column:hover {
  transform: translateY(-5px);
}

.content-column p {
  color: #555;
  line-height: 1.8;
  margin-bottom: 20px;
  text-align: justify;
  font-size: 14px;
}

.content-column p:last-child {
  margin-bottom: 0;
}

/* Responsive Design */
@media (max-width: 992px) {
  .services-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .content-grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .overview-hero-title {
    font-size: 2.5rem;
  }
}

@media (max-width: 768px) {
  .overview-hero-title {
    font-size: 2rem;
  }

  .services-overview-section {
    padding: 60px 0;
  }

  .overview-content-section {
    padding: 60px 0;
  }

  .service-item {
    padding: 30px 20px;
  }

  .service-icon {
    width: 100px;
    height: 100px;
  }

  .service-icon i {
    font-size: 2rem;
  }

  .service-title {
    font-size: 1.5rem;
  }

  .content-title {
    font-size: 2rem;
  }

  .content-column {
    padding: 25px;
  }
}

@media (max-width: 576px) {
  .overview-hero-section {
    height: 200px;
  }

  .overview-hero-title {
    font-size: 1.8rem;
  }

  .services-overview-section,
  .overview-content-section {
    padding: 40px 0;
  }

  .service-icon {
    width: 80px;
    height: 80px;
  }

  .service-icon i {
    font-size: 1.5rem;
  }

  .service-title {
    font-size: 1.3rem;
  }

  .content-title {
    font-size: 1.8rem;
  }
}

/* Animation for service icons */
@keyframes float {
  0%,
  100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-10px);
  }
}

.service-item:hover .service-icon {
  animation: float 2s ease-in-out infinite;
}

/* Special styling for different service types */
.service-item:nth-child(1) .service-icon {
  background: linear-gradient(135deg, #3b82f6, #1d4ed8);
}

.service-item:nth-child(2) .service-icon {
  background: linear-gradient(135deg, #10b981, #059669);
}

.service-item:nth-child(3) .service-icon {
  background: linear-gradient(135deg, #f59e0b, #d97706);
}