/* Clean CSS for Enno Gelhaus website */

/* Background gradient */
body {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
  min-height: 100vh !important;
}

html {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
}

/* Section styling */
.u-section-1 {
  background: linear-gradient(135deg, rgba(102, 126, 234, 0.9) 0%, rgba(118, 75, 162, 0.9) 100%) !important;
}

/* Basic layout */
.u-section-1 .u-sheet-1 {
  min-height: 644px;
}

.u-section-1 .u-image-1 {
  width: 85px;
  height: 85px;
  margin: 19px auto 0 0;
}

.u-section-1 .u-text-1 {
  margin: -80px auto 0 100px;
}

.u-section-1 .u-list-1 {
  width: 1139px;
  margin: 22px -4px 0 auto;
}

.u-section-1 .u-repeater-1 {
  grid-auto-columns: calc(33.3333% - 3.33333px);
  grid-template-columns: repeat(3, calc(33.3333% - 3.33333px));
  gap: 5px;
}

.u-section-1 .u-container-layout-1,
.u-section-1 .u-container-layout-2,
.u-section-1 .u-container-layout-3 {
  padding: 10px;
}

.u-section-1 .u-text-2,
.u-section-1 .u-text-3,
.u-section-1 .u-text-4 {
  font-weight: 700;
  margin: 0 auto 0 0;
}

/* Contact information - LEFT SIDE */
.u-section-1 .u-text-5 {
  font-size: 1.375rem;
  margin: 50px auto 0 0 !important;
  color: white !important;
  background: rgba(0, 0, 0, 0.8) !important;
  padding: 20px !important;
  border-radius: 15px !important;
  width: 320px !important;
  border: 2px solid rgba(255, 255, 255, 0.3) !important;
  position: absolute !important;
  left: 20px !important;
  top: 250px !important;
}

/* Projects - RIGHT SIDE */
.u-section-1 .u-text-6 {
  font-size: 1.375rem;
  margin: 50px 0 0 auto !important;
  color: white !important;
  background: rgba(0, 0, 0, 0.8) !important;
  padding: 20px !important;
  border-radius: 15px !important;
  width: 320px !important;
  border: 2px solid rgba(255, 255, 255, 0.3) !important;
  position: absolute !important;
  right: 20px !important;
  top: 250px !important;
}

.u-section-1 .u-btn-1 {
  background-image: none;
  padding: 0;
}

/* Social media icons - CENTER - SMALL SIZE */
.u-section-1 .u-image-2 {
  width: 60px !important;
  height: 60px !important;
  position: absolute !important;
  left: 50% !important;
  top: 270px !important;
  transform: translateX(-110px) !important;
}

.u-section-1 .u-image-3 {
  width: 60px !important;
  height: 60px !important;
  position: absolute !important;
  left: 50% !important;
  top: 270px !important;
  transform: translateX(-30px) !important;
}

.u-section-1 .u-image-4 {
  width: 60px !important;
  height: 60px !important;
  position: absolute !important;
  left: 50% !important;
  top: 270px !important;
  transform: translateX(30px) !important;
}

.u-section-1 .u-image-5 {
  width: 60px !important;
  height: 60px !important;
  position: absolute !important;
  left: 50% !important;
  top: 270px !important;
  transform: translateX(110px) !important;
}

/* Responsive adjustments */
@media (max-width: 1199px) {
  .u-section-1 .u-list-1 {
    width: 940px;
    margin-right: 0;
  }

  .u-section-1 .u-repeater-1 {
    grid-auto-columns: calc(33.333333333333336% - 3.33333px);
    grid-template-columns: repeat(3, calc(33.333333333333336% - 3.33333px));
  }
}

@media (max-width: 991px) {
  .u-section-1 .u-list-1 {
    width: 720px;
  }

  .u-section-1 .u-repeater-1 {
    grid-auto-columns: calc(50% - 2.4999975px);
    grid-template-columns: repeat(2, calc(50% - 2.4999975px));
  }

  .u-section-1 .u-text-6 {
    margin-right: 230px;
  }
}

@media (max-width: 767px) {
  .u-section-1 .u-list-1 {
    width: 540px;
  }

  .u-section-1 .u-repeater-1 {
    grid-auto-columns: calc(100% - 0px);
    grid-template-columns: 100%;
  }

  .u-section-1 .u-text-5 {
    font-size: 1.222222222222222rem;
  }

  .u-section-1 .u-text-6 {
    font-size: 1.222222222222222rem;
    margin-right: 173px;
  }

  .u-section-1 .u-image-4 {
    margin-right: 449px;
  }
}

@media (max-width: 575px) {
  .u-section-1 .u-list-1 {
    width: 340px;
  }

  .u-section-1 .u-repeater-1 {
    grid-auto-columns: 100%;
  }

  .u-section-1 .u-text-6 {
    margin-right: 109px;
  }

  .u-section-1 .u-image-2 {
    margin-left: 278px;
  }

  .u-section-1 .u-image-3 {
    margin-left: 278px;
  }

  .u-section-1 .u-image-4 {
    margin-right: 249px;
  }

  .u-section-1 .u-image-5 {
    margin-right: 267px;
  }
}