/* ======= Base Setup ======= */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600&display=swap');

body {
  margin: 0;
  font-family: 'Montserrat', sans-serif;
  background-color: #fff;
}

/* ======= Section Wrapper ======= */
.futuristic-section {
  background: #ebe0d6; /* Secondary color */
  padding: 3rem 0;
}

/* ======= Main Container ======= */
.container {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
}

/* ======= Row of Cards ======= */
.info-cards-row {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  justify-content: space-between;
}

/* ======= Individual Info Card ======= */
.info-card {
  flex: 1 1 300px;
  background: #fff;
  border-radius: 16px;
  padding: 2.5rem 1.5rem;
  box-shadow: 0 4px 12px rgba(29, 75, 59, 0.15);
  text-align: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.info-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(29, 75, 59, 0.2);
}

/* ======= Icon Circle ======= */
.icon-circle {
  width: 70px;
  height: 70px;
  margin: 0 auto 1rem;
  border-radius: 50%;
  background: #1d4b3b; /* Main color */
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  box-shadow: 0 0 0 5px rgba(29, 75, 59, 0.2), 
              0 4px 8px rgba(0, 0, 0, 0.2);
}

.icon-circle i {
  font-size: 2rem;       /* Increase icon size */
  color: #ebe0d6;        /* Secondary color for contrast */
}

/* ======= Heading & Text ======= */
.info-heading {
  margin: 1rem 0 0.75rem;
  font-size: 1.6rem;     /* Larger heading for better visibility */
  font-weight: 600;      /* Bold weight for emphasis */
  color: #1d4b3b;        /* Main color */
}

.info-text {
  font-size: 1.2rem;     /* Larger paragraph text */
  line-height: 1.6;
  color: #444;
  margin: 0;
}

.info-text strong {
  color: #1d4b3b;        /* Highlight main color for emphasis */
}




















/* ======= UNSERE DIENSTLEISTUNGEN ======= */




/* -------------------------------
   1. Font Import (Poppins)
-------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500;700&display=swap');

/* -------------------------------
   2. Base Setup
-------------------------------- */
body {
  margin: 0;
  font-family: 'Poppins', sans-serif;
  background-color: #fff; 
}

/* -------------------------------
   3. Section Wrapper
-------------------------------- */
.professional-services-section {
  background-color: #f7f7f7; 
  padding: 4rem 0;  
  text-align: center;
}

/* Container */
.container {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
}

/* Section Header */
.section-header {
  margin-bottom: 3rem;
}

.section-title {
  font-size: 2.4rem;  
  font-weight: 700;
  color: #1d4b3b;     
  margin: 0 0 1rem;
  text-transform: uppercase;
  letter-spacing: 1.5px;
}

.section-subtext {
  font-size: 1.3rem;
  font-weight: 500; /* Slightly bolder for better visibility */
  color: #444;
  max-width: 700px;
  margin: 0 auto;
  line-height: 1.6;
}

/* -------------------------------
   4. Services Grid
-------------------------------- */
.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  
  /* Optional stacking for smaller screens
     @media (max-width: 900px) {
       grid-template-columns: 1fr;
     }
  */
}

/* -------------------------------
   5. Service Card
-------------------------------- */
.service-card {
  background-color: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.1);
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.service-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.15);
}

/* Card Image */
.service-image {
  width: 100%;
  height: 220px;  
  overflow: hidden;
  position: relative;
  background-color: #ddd;
}

.service-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Card Content */
.service-content {
  padding: 2rem; 
  text-align: center;
}

.service-title {
  font-size: 1.8rem;      /* Larger, bolder service title */
  font-weight: 700;
  color: #1d4b3b; 
  margin: 0 0 1rem;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.service-text {
  font-size: 1.3rem;      /* Increased paragraph size */
  font-weight: 500;       /* Bolder text for better visibility */
  color: #333;
  line-height: 1.7;
  margin: 0;
}