/*=============== GOOGLE FONTS ===============*/
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap");
/*=============== VARIABLES CSS ===============*/
:root {
  --header-height: 3.5rem;
  /*========== Colors ==========*/
  /*Color mode HSL(hue, saturation, lightness)*/
  --first-color: hsl(220, 68%, 54%);
  --first-color-lighten: hsl(220, 68%, 97%);
  --title-color: hsl(220, 48%, 28%);
  --text-color: hsl(220, 12%, 45%);
  --body-color: hsl(220, 100%, 99%);
  /*========== Font and typography ==========*/
  /*.5rem = 8px | 1rem = 16px ...*/
  --body-font: "Poppins", sans-serif;
  --normal-font-size: .938rem;
  --small-font-size: .813rem;
  --smaller-font-size: .75rem;
  /*========== Font weight ==========*/
  --font-medium: 500;
  --font-semi-bold: 600;
  /*========== z index ==========*/
  --z-tooltip: 10;
  --z-fixed: 100;
}
@media screen and (min-width: 1024px) {
  :root {
    --normal-font-size: 1rem;
    --small-font-size: .875rem;
    --smaller-font-size: .813rem;
  }
}

/*=============== BASE ===============*/
* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

body {
  font-family: var(--body-font);
  font-size: var(--normal-font-size);
  background-color: var(--body-color);
  color: var(--text-color);
  width: 100%;
}
ul {
  list-style: none;
}

a {
  text-decoration: none;
}
a,
a:hover,
a:focus {
  text-decoration: none !important;
}


/*=============== REUSABLE CSS CLASSES ===============*/
.container {
  max-width: 1120px;
  margin: 0 auto;
}

/*=============== HEADER ===============*/
.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  box-shadow: 0 2px 8px hsla(220, 68%, 12%, 0.1);
  background-color: var(--body-color);
  z-index: var(--z-fixed);
}

/*=============== NAV ===============*/
.nav {
  height: var(--header-height);
}
.nav__data {
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.nav__logo {
  display: inline-flex;
  align-items: center;
  column-gap: 0.25rem;
  color: var(--title-color);
  font-weight: var(--font-semi-bold);
  transition: color 0.3s;
  text-decoration: none; 
}

.nav__logo i {
  font-size: 1.25rem;
}

.nav__logo:hover {
  color: var(--first-color);
}


.nav__logo img {
  height: auto;        
  max-height: 60px;     
  width: auto;
  max-width: 100%;      
}


@media (max-width: 480px) {
  .nav__logo img {
    max-height: 35px;  
  }

}

.nav__toggle {
  position: relative;
  width: 32px;
  height: 32px;
}
.nav__toggle-menu, .nav__toggle-close {
  font-size: 1.25rem;
  color: var(--title-color);
  position: absolute;
  display: grid;
  place-items: center;
  inset: 0;
  cursor: pointer;
  transition: opacity 0.1s, transform 0.4s;
}
.nav__toggle-close {
  opacity: 0;
}
@media screen and (max-width: 1118px) {
  .nav__menu {
    background-color: var(--body-color);
    position: absolute;
    left: 0;
    top: 2.5rem;
    width: 100%;
    height: calc(100vh - 3.5rem);
    overflow: auto;
    padding-block: 1.5rem 4rem;
    pointer-events: none;
    opacity: 0;
    transition: top 0.4s, opacity 0.3s;
  }
  .nav__menu::-webkit-scrollbar {
    width: 0.5rem;
  }
  .nav__menu::-webkit-scrollbar-thumb {
    background-color: hsl(220, 12%, 70%);
  }
}
.nav__link {
  color: var(--title-color);
  font-weight: var(--font-semi-bold);
  padding: 1.25rem 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: background-color 0.3s;
}
.nav__link:hover {
  background-color: var(--first-color-lighten);
}

/* Show menu */
.show-menu {
  opacity: 1;
  top: 3.5rem;
  pointer-events: initial;
}

/* Show icon */
.show-icon .nav__toggle-menu {
  opacity: 0;
  transform: rotate(90deg);
}

.show-icon .nav__toggle-close {
  opacity: 1;
  transform: rotate(90deg);
}

/*=============== DROPDOWN ===============*/
.dropdown__button {
  cursor: pointer;
}
.dropdown__arrow {
  font-size: 1.5rem;
  font-weight: initial;
  transition: transform 0.4s;
}
.dropdown__content, .dropdown__group, .dropdown__list {
  display: grid;
}
.dropdown__container {
  background-color: var(--first-color-lighten);
  height: 0;
  overflow: hidden;
  transition: height 0.4s;
}
.dropdown__content {
  row-gap: 1.75rem;
}
.dropdown__group {
  padding-left: 2.5rem;
  row-gap: 0.5rem;
}
.dropdown__group:first-child {
  margin-top: 1.25rem;
}
.dropdown__group:last-child {
  margin-bottom: 1.25rem;
}
.dropdown__icon i {
  font-size: 1.25rem;
  color: var(--first-color);
}
.dropdown__title {
  font-size: var(--small-font-size);
  font-weight: var(--font-semi-bold);
  color: var(--title-color);
}
.dropdown__list {
  row-gap: 0.25rem;
}
.dropdown__link {
  font-size: var(--smaller-font-size);
  font-weight: var(--font-medium);
  color: var(--text-color);
  transition: color 0.3s;
}
.dropdown__link:hover {
  color: var(--title-color);
}

/* Rotate dropdown icon */
.show-dropdown .dropdown__arrow {
  transform: rotate(180deg);
}

/*=============== BREAKPOINTS ===============*/
/* For small devices */
@media screen and (max-width: 300px) {
  .dropdown__group {
    padding-left: 1.5rem;
  }
}
/* For large devices */
@media screen and (min-width: 1118px) {
  /* Nav */
  .nav {
    height: calc(var(--header-height) + 2rem);
    display: flex;
    justify-content: space-between;
  }
  .nav__toggle {
    display: none;
  }
  .nav__list {
    display: flex;
    column-gap: 3rem;
    height: 100%;
  }
  .nav li {
    display: flex;
  }
  .nav__link {
    padding: 0;
  }
  .nav__link:hover {
    background-color: initial;
  }
  /* Dropdown */
  .dropdown__button {
    column-gap: 0.25rem;
    pointer-events: none;
  }
  .dropdown__container {
    height: max-content;
    position: absolute;
    left: 0;
    right: 0;
    top: 6.5rem;
    background-color: var(--body-color);
    box-shadow: 0 6px 8px hsla(220, 68%, 12%, 0.05);
    pointer-events: none;
    opacity: 0;
    transition: top 0.4s, opacity 0.3s;
  }
  .dropdown__content {
    grid-template-columns: repeat(4, max-content);
    column-gap: 6rem;
    max-width: 1120px;
    margin-inline: auto;
  }
  .dropdown__group {
    padding: 4rem 0;
    align-content: baseline;
    row-gap: 1.25rem;
  }
  .dropdown__group:first-child, .dropdown__group:last-child {
    margin: 0;
  }
  .dropdown__list {
    row-gap: 0.75rem;
  }
  .dropdown__icon {
    width: 60px;
    height: 60px;
    background-color: var(--first-color-lighten);
    border-radius: 50%;
    display: grid;
    place-items: center;
    margin-bottom: 1rem;
  }
  .dropdown__icon i {
    font-size: 2rem;
  }
  .dropdown__title {
    font-size: var(--normal-font-size);
  }
  .dropdown__link {
    font-size: var(--small-font-size);
  }
  .dropdown__link:hover {
    color: var(--first-color);
  }
  .dropdown__item {
    cursor: pointer;
  }
  .dropdown__item:hover .dropdown__arrow {
    transform: rotate(180deg);
  }
  .dropdown__item:hover > .dropdown__container {
    top: 5.5rem;
    opacity: 1;
    pointer-events: initial;
    cursor: initial;
  }
}
@media screen and (min-width: 1152px) {
  .container {
    margin-inline: auto;
  }
}


/* HERO SECTION */

.hero-section{
      background-image: url('https://storage.googleapis.com/workspace-0f70711f-8b4e-4d94-86f1-2a93ccde5887/image/f798a8b5-f352-47d6-b379-58f49e16b848.png');
      background-size: cover;
      background-position: center center;
      background-repeat: no-repeat;
      min-height: 50vh;
      display: flex;
      justify-content: flex-end;
      align-items: center;
      padding: 2rem;
}
/* Overlay on the right side where text goes */
    .cc-card {
      background: rgba(2, 65, 110, 0.85);
      max-width: 420px;
      width: 90%;
      padding: 2.5rem 2rem;
      border-radius: 12px;
      text-align: center;
      box-shadow: 0 0 40px rgba(0, 0, 0, 0.7);
    }

    .cc-card h1 {
      font-weight: 400;
      font-size: 1.6rem;
      margin-bottom: 0.4rem;
      color: white;
    }

    .cc-card h1 strong,
    .cc-card h1 b {
      font-weight: 700;
      font-size: 1.20rem;
      display: block;
      margin-top: 0.15rem;
      color: #fbbf24;
    }

    .cc-card p {
      font-size: 0.9rem;
      letter-spacing: 0.05em;
      margin: 1rem 0 2.5rem 0;
      color: #d0e7ff;
      line-height: 1.3;
    }

    .cc-btn {
      background-color: white;
      color: #02416e;
      font-size: 1rem;
      font-weight: 600;
      border: none;
      padding: 0.75rem 1.7rem;
      border-radius: 6px;
      cursor: pointer;
      box-shadow: 0 5px 15px rgba(255 255 255 / 0.4);
      transition: background-color 0.3s ease, color 0.3s ease;
      user-select: none;
      font-family: inherit;
    }

    .cc-btn:hover,
    .cc-btn:focus {
      background-color: #1782eb;
      color: white;
      outline: none;
      box-shadow: 0 8px 20px rgba(23, 130, 235, 0.7);
    }
    .meta .main-text{
      font-size: 12px;
    }
    .ts{
      margin: 2rem 0;
    }

    @media (max-width: 768px) {
      .hero-section {
        justify-content: center;
        padding: 1.5rem;
        min-height: 30vh;
      }

      .cc-card {
        max-width: 100%;
        padding: 2rem 1.5rem;
        border-radius: 10px;
        margin: 0 1rem;
      }

      .cc-card h1 {
        font-size: 1.4rem;
      }
      .cc-card h1 strong {
        font-size: 1.4rem;
      }

      .cc-card p {
        font-size: 0.85rem;
      }
      
    }

    @media (max-width: 400px) {
      .cc-card h1 {
        font-size: 1.25rem;
      }
      .cc-card h1 strong {
        font-size: 1.8rem;
      }
      .cc-card p {
        font-size: 0.8rem;
      }
      .cc-btn {
        font-size: 0.9rem;
        padding: 0.6rem 1.3rem;
      }
    }

:root {
  --bg: #f6f8fb;
  --surface: #ffffff;
  --primary: #1e66ff;
  --primary-600: #1553d6;
  --text: #0f172a;
  --muted: #475569;
  --border: #e5e7eb;
  --ring: rgba(30,102,255,.35);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: system-ui, sans-serif; background: var(--bg); color: var(--text); line-height: 1.5; }
a { color: inherit; text-decoration: none; }

.container { width: min(1200px, 92%); margin-inline: auto; }

section { padding: 24px 0 8px; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin: 24px 0 14px; }
.section-head h2 { font-size: clamp(20px, 2.6vw, 28px); margin: 0; }
.section-head p { color: var(--muted); margin: 0; }
.sub-title { margin: 16px 6px 6px; color: #334155; font-size: 15px; }

/* Grid */
.grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 14px; }
.span-12 { grid-column: span 12; }
.span-6 { grid-column: span 6; }
.span-4 { grid-column: span 4; }
.span-3 { grid-column: span 3; }

@media (max-width: 1000px) {
  .span-6 { grid-column: span 12; }
  .span-4, .span-3 { grid-column: span 6; }
}
@media (max-width: 640px) {
  .span-4, .span-3 { grid-column: span 12; }
}

/* Card */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: 18px; padding: 18px; transition: box-shadow .2s ease, transform .2s ease; }
.card:hover { box-shadow: 0 10px 30px rgba(2,6,23,.06); transform: translateY(-2px); }
.card .row { display: flex; gap: 16px; align-items: flex-start; }
.icon { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: #eef2ff; }
.card h3 { margin: 0 0 6px; font-size: 18px; }
.card p { margin: 0; color: var(--muted); }
.card .actions { margin-top: 12px; display: flex; gap: 10px; flex-wrap: wrap; }

/* Link-card */
.link-card { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 14px; display: flex; gap: 12px; align-items: flex-start; justify-content: space-between; transition: box-shadow .2s ease, transform .2s ease; }
.link-card:hover { box-shadow: 0 8px 25px rgba(2,6,23,.06); transform: translateY(-2px); }
.link-card .meta { display: flex; gap: 12px; align-items: flex-start; }
.link-card h4 { margin: 0; font-size: 16px; }
.link-card .url { color: var(--primary); font-weight: 600; font-size: 14px; word-break: break-all; }
.tag { font-size: 12px; color: var(--muted); background: #f1f5f9; padding: 6px 10px; border-radius: 999px; border: 1px solid var(--border); }

/* Buttons */
.btn { display: inline-flex; align-items: center; gap: 10px; border: 1px solid transparent; padding: 12px 16px; border-radius: 14px; font-weight: 600; cursor: pointer; transition: .2s ease; }
.btn-outline { background: transparent; border-color: var(--border); }
.btn-outline:hover { border-color: var(--primary); box-shadow: 0 0 0 6px var(--ring); }

/* Accessibility */
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
:focus-visible { outline: 3px solid var(--primary); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* footer design */

.f-s{
  margin: 0;
      font-family: Arial, sans-serif;
      line-height: 1.5;
      background: #f9f9f9;
}

footer.sc-footer {
      background: #fff;
      padding: 20px 10px 10px 10px;
      border-top: 1px solid #e5e5e5;
    }

    .sc-footer-container {
      max-width: 1150px;
      margin: 0 auto;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      gap: 10px;
    }

    /* Left section */
    .sc-footer-left {
      flex: 1 1 250px;
    }

    .sc-footer-left img {
      width: 40px;
      vertical-align: middle;
      margin-right: 8px;
    }

    .sc-footer-left h2 {
      display: inline-block;
      font-size: 20px;
      margin: 0;
      vertical-align: middle;
      color: #2b2b2b;
    }

    .sc-footer-left p {
      color: #555;
      margin: 15px 0;
      font-size: 14px;
      max-width: 250px;
    }

    .sc-social-icons {
      display: flex;
      gap: 10px;
    }

    .sc-social-icons a {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 32px;
      height: 32px;
      border-radius: 50%;
      background: #f0f0f0;
      color: #333;
      text-decoration: none;
      font-size: 14px;
      transition: background 0.3s;
    }

    .sc-social-icons a:hover {
      background: #007bff;
      color: #fff;
    }

    /* Footer columns */
    .sc-footer-column {
      flex: 1 1 150px;
    }

    .sc-footer-column h3 {
      font-size: 16px;
      margin-bottom: 12px;
      color: #2b2b2b;
    }

    .sc-footer-column ul {
      list-style: none;
      padding: 0;
      margin: 0;
    }

    .sc-footer-column ul li {
      margin-bottom: 8px;
    }

    .sc-footer-column ul li a {
      text-decoration: none;
      color: #555;
      font-size: 14px;
      transition: color 0.3s;
    }

    .sc-footer-column ul li a:hover {
      color: #007bff;
    }

    /* Contact info */
    .sc-contact-item {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 10px;
      font-size: 14px;
      color: #555;
    }

    /* Bottom footer */
    .sc-footer-bottom {
      margin-top: 30px;
      padding-top: 15px;
      border-top: 1px solid #e5e5e5;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      font-size: 13px;
      color: #777;
    }

    .sc-footer-bottom a {
      margin-left: 15px;
      text-decoration: none;
      color: #555;
    }

    .sc-footer-bottom a:hover {
      color: #007bff;
    }

    /* Responsive design */
    @media (max-width: 768px) {
      .sc-footer-container {
        flex-direction: column;
      }
      .sc-footer-left {
        flex: 0 1 100%;
        max-width: 100%;
      }
      .sc-footer-column {
        margin-top: 10px;
      }
      .sc-footer-bottom {
        flex-direction: column;
        align-items: center;
        gap: 10px;
      }
    }


/* ALLGEMEIIN PAGE */

/* Wrapper */
    .svc-wrapper {
      max-width: 1200px;
      margin: auto;
      padding: 2rem;
      text-align: center;
    }

    .svc-title {
      font-size: 2rem;
      margin-bottom: 0.5rem;
    }

    .svc-subtitle {
      max-width: 700px;
      margin: 0 auto 1.5rem;
      color: #666;
      font-size: 0.95rem;
    }

    /* Buttons */
    .svc-btn-group {
      margin-bottom: 2rem;
    }

    .svc-btn {
      display: inline-block;
      padding: 0.75rem 1.5rem;
      margin: 0.25rem;
      font-size: 0.9rem;
      border-radius: 5px;
      text-decoration: none;
      font-weight: bold;
    }


    .svc-btn-alt {
      background: #000;
      color: #fff;
    }

    /* Services Grid */
    .svc-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
      gap: 1.5rem;
      margin-top: 2rem;
    }

    .svc-card {
      border: 1px solid #ddd;
      padding: 1.5rem;
      text-align: left;
      background: #fff;
      border-radius: 8px;
      transition: all 0.3s ease;
    }

    .svc-card:hover {
      border-color: #84b5f7;
      transform: translateY(-5px);
    }

    .svc-icon {
      font-size: 2rem;
      margin-bottom: 1rem;
    }

    .svc-card h3 {
      margin-bottom: 0.5rem;
      font-size: 1.2rem;
    }

    .svc-card p {
      font-size: 0.9rem;
      color: #555;
      margin-bottom: 1rem;
    }

    .svc-learn {
      display: inline-block;
      font-size: 0.85rem;
      font-weight: bold;
      color: #ff4d00;
      text-decoration: none;
    }

    .svc-learn:hover {
      text-decoration: underline;
    }

    /* Responsive tweaks */
    @media (max-width: 768px) {
      .svc-title {
        font-size: 1.5rem;
      }

      .svc-subtitle {
        font-size: 0.9rem;
      }
    }

/* DAILYJOBS PAGE SECTION */

.daily-jobs {
    margin:0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
      Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
    background-color: #ffffff;
    color: #0f172a;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  .fj-container {
    max-width: 1200px;
    padding: 1.5rem 1rem 4rem;
    margin-left: auto;
    margin-right: auto;
    overflow-x: hidden;
  }

  /* Heading */
  .d-title {
    font-weight: 900;
    font-size: 2rem;
    margin-bottom: 0.3rem;
    color: #0f172a;
  }
  .fj-subtitle {
    color: #64748b;
    font-weight: 500;
    font-size: 0.9rem;
    margin-top: 0;
    margin-bottom: 2rem;
  }

  /* Grid */
  .fj-job-grid {
    display: grid;
    gap: 1.5rem 1.5rem;
    grid-template-columns: repeat(1, 1fr);
  }
  @media (min-width: 480px) {
    .fj-job-grid {
      grid-template-columns: repeat(1, 1fr);
      gap: 1.5rem;
    }
  }
  @media (min-width: 768px) {
    .fj-job-grid {
      grid-template-columns: repeat(2, 1fr);
      gap: 1.5rem;
    }
  }

  /* Job card */
 .fj-job-card {
  background: rgb(255, 255, 255); /* semi-transparent white */
  border-radius: 1.5rem;
  padding: 1.5rem 1.5rem 1.75rem;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.1);

  /* glass effect */
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);

  border: 1px solid rgba(255, 255, 255, 0.3); /* subtle border for glass */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}


  /* Top left category */
  .fj-category {
    font-size: 0.8rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 0.45rem;
    color: #94a3b8;
    margin-bottom: 0.45rem;
  }
  .fj-category svg {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    fill: #94a3b8;
  }

  /* Job title */
  .fj-job-title {
    font-weight: 800;
    font-size: 1.1rem;
    margin: 0 0 0.65rem 0;
    color: #0f172a;
  }

  /* Location & type */
  .fj-location-type {
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    gap: 0.8rem;
    margin-bottom: 1.25rem;
  }
  .fj-location {
    font-weight: 600;
    color: #0f172a;
    display: flex;
    align-items: center;
    gap: 0.35rem;
  }
  .fj-location svg {
    width: 14px;
    height: 14px;
    fill: #0f172a;
  }
  .fj-job-type {
    color: #94a3b8;
    font-weight: 500;
  }
  
  /* Posted date and company container */
  .fj-posted-company {
    font-size: 0.85rem;
    color: #94a3b8;
    font-weight: 500;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: auto;
  }
  .fj-post-date {
    font-weight: 400;
  }
  .fj-company {
    font-weight: 700;
    color: #0f172a;
  }

  /* Icon on bottom right */
  .fj-icon-container {
    margin-left: auto;
    margin-top: 0.6rem;
    width: 48px;
    height: 48px;
    border-radius: 0.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  /* Individual icon backgrounds */
  .fj-icon-finance {
    background: #091c28;
  }
  .fj-icon-software {
    background: #356b92;
  }
  .fj-icon-hr {
    background: #2481ee;
  }
  .fj-icon-business {
    background: #e76342;
  }
  .fj-icon-customer {
    background: #f2a34b;
  }
  .fj-icon-marketing {
    background: #115159;
  }

  /* SVG icons inside icon container */
  .fj-icon-svg {
    width: 24px;
    height: 24px;
    fill: #fff;
  }

  .fj-task-list {
  list-style: disc;
  padding-left: 1.25rem;
  margin: 1rem 0;
  color: #0f172a;
  font-size: 0.95rem;
  line-height: 1.6;
}

.fj-task-list li {
  margin-bottom: 0.4rem;
}

/* MARKETING PAGE SECTION */

.marketing-s{
      font-family: "Poppins", sans-serif;
      margin: 0;
      padding: 0;
      background: #fff;
      color: #333;
}

.mp-wrapper {
      max-width: 1200px;
      margin: 0 auto;
      padding: 3rem 1rem;
      text-align: center;
    }

    .mp-wrapper h2 {
      font-size: 2rem;
      margin-bottom: 1rem;
    }

    .mp-wrapper p {
      color: #666;
      margin-bottom: 3rem;
    }

    .mp-steps {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
      gap: 2rem;
      position: relative;
    }

    .mp-step-card {
      background: #fff;
      padding: 1.5rem;
      border-radius: 1rem;
      box-shadow: 0 5px 15px rgba(0,0,0,0.1);
      text-align: left;
      position: relative;
      transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

    .mp-step-card:hover {
      transform: translateY(-5px);
      box-shadow: 0 10px 20px rgba(0,0,0,0.15);
    }

    .mp-step-number {
      font-size: 1.2rem;
      font-weight: bold;
      color: #3B82F6;
      margin-bottom: 0.5rem;
    }

    .mp-step-card h3 {
      font-size: 1.4rem;
      margin-bottom: 1rem;
    }

    .mp-list {
      list-style: none;
      padding: 0;
      margin: 0;
    }

    .mp-list li {
      margin-bottom: 0.5rem;
      font-size: 0.95rem;
      color: #555;
      display: flex;
      align-items: center;
    }

    .mp-list li::before {
      content: "✔";
      color: #10B981; /* green check */
      font-weight: bold;
      margin-right: 0.5rem;
    }

    /* Desktop diagonal staggered effect */
    @media (min-width: 768px) {
      .mp-steps {
        grid-template-columns: repeat(4, 1fr);
      }
      .mp-step-card:nth-child(1) { margin-top: 0; }
      .mp-step-card:nth-child(2) { margin-top: 2rem; }
      .mp-step-card:nth-child(3) { margin-top: 4rem; }
      .mp-step-card:nth-child(4) { margin-top: 6rem; }
    }

/* INTERNET PAGE SECTION */

.internet-s{
      font-family: "Poppins", sans-serif;
      margin: 0;
      padding: 0;
      background: #f9fafb;
      color: #333;
}

.pi-wrapper {
      max-width: 1200px;
      margin: 0 auto;
      padding: 3rem 1rem;
    }

    .pi-wrapper h2 {
      font-size: 2rem;
      margin-bottom: 1rem;
      text-align: center;
    }

    .pi-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 2rem;
    }

    /* 2-column layout on desktop */
    @media (min-width: 992px) {
      .pi-grid {
        grid-template-columns: 1fr 1fr;
        align-items: start;
      }
    }

    .pi-text {
      background: #fff;
      padding: 2rem;
      border-radius: 1rem;
      box-shadow: 0 5px 15px rgba(0,0,0,0.08);
      line-height: 1.6;
    }

    .pi-text h3 {
      margin-top: 1.5rem;
      font-size: 1.2rem;
      color: #3B82F6;
    }

    .pi-projects {
      display: grid;
      gap: 1.5rem;
    }

    .pi-card {
      background: #fff;
      border-radius: 1rem;
      padding: 1.5rem;
      box-shadow: 0 5px 15px rgba(0,0,0,0.08);
      transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

    .pi-card:hover {
      transform: translateY(-5px);
      box-shadow: 0 10px 20px rgba(0,0,0,0.15);
    }

    .pi-card a {
      font-size: 1.1rem;
      font-weight: bold;
      color: #2563eb;
      text-decoration: none;
    }

    .pi-card p {
      margin-top: 0.5rem;
      font-size: 0.9rem;
      color: #555;
    }

/* PRODUCTION PAGE SECTION */

.production-s{
      margin: 0;
      padding: 0;
      background: #fff;
      color: #333;
}

.ph-wrapper {
      max-width: 1100px;
      margin: 0 auto;
      padding: 3rem 1rem;
    }

    .ph-wrapper h2 {
      text-align: center;
      font-size: 2rem;
      margin-bottom: 2rem;
      color: #1e40af;
    }

    .timeline {
      position: relative;
      margin: 2rem 0;
      padding-left: 20px;
    }

    /* Vertical line */
    .timeline::before {
      content: "";
      position: absolute;
      top: 0;
      left: 20px;
      width: 4px;
      height: 100%;
      background: #3b82f6;
    }

    .timeline-item {
      position: relative;
      margin-bottom: 2.5rem;
      padding-left: 3rem;
    }

    .timeline-item::before {
      content: "";
      position: absolute;
      left: -8px;
      top: 5px;
      width: 20px;
      height: 20px;
      background: #fff;
      border: 4px solid #3b82f6;
      border-radius: 50%;
      z-index: 1;
    }

    .timeline-card {
      background: #fff;
      border-radius: 0.75rem;
      padding: 1.2rem 1.5rem;
      box-shadow: 0 5px 15px rgba(0,0,0,0.08);
      transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

    .timeline-card:hover {
      transform: translateY(-5px);
      box-shadow: 0 10px 20px rgba(0,0,0,0.15);
    }

    .timeline-card h3 {
      font-size: 1.1rem;
      margin: 0;
      color: #2563eb;
    }

    .timeline-card p {
      margin-top: 0.5rem;
      font-size: 0.9rem;
      line-height: 1.5;
      color: #555;
    }

    /* Responsive */
    @media (min-width: 768px) {
      .timeline {
        margin-left: 50px;
      }
      .timeline-item {
        padding-left: 4rem;
      }
    }

/* FACTS PAGE SECTION */

.faqpro-section {
      max-width: 1100px;
      margin: 50px auto;
      padding: 20px;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 40px;
    }

    /* Left text side */
    .faqpro-text h2 {
      font-size: 2.2rem;
      font-weight: bold;
      margin: 10px 0;
    }

    .faqpro-text h2 span {
      color: #7c3aed; /* purple accent */
    }

    .faqpro-text p {
      color: #555;
      font-size: 1rem;
      line-height: 1.6;
    }

    /* Accordion container */
    .faqpro-accordion {
      display: flex;
      flex-direction: column;
      gap: 15px;
    }

    .faqpro-item {
      background: #f9fafb;
      border-radius: 10px;
      overflow: hidden;
      border: 1px solid #eee;
    }

    .faqpro-label {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 18px 20px;
      cursor: pointer;
      font-weight: 500;
      font-size: 1rem;
      color: #111;
      transition: background 0.3s ease;
    }

    .faqpro-label:hover {
      background: #f3f4f6;
    }

    .faqpro-label i {
      font-size: 1.4rem;
      color: #7c3aed;
      transition: transform 0.3s ease;
    }

    .faqpro-input {
      display: none;
    }

    .faqpro-content {
      max-height: 0;
      overflow: hidden;
      padding: 0 20px;
      background: #fff;
      font-size: 0.95rem;
      line-height: 1.6;
      color: #444;
      transition: max-height 0.5s ease, padding 0.4s ease;
    }

    .faqpro-input:checked ~ .faqpro-content {
      max-height: 1000px; /* big enough */
      padding: 15px 20px;
    }

    .faqpro-input:checked + .faqpro-label i {
      transform: rotate(180deg);
    }

    /* Responsive */
    @media (max-width: 900px) {
      .faqpro-section {
        grid-template-columns: 1fr;
      }
    }


    .approach-container {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      gap: 2rem;
      max-width: 1100px;
      margin: 0 auto;
      padding: 50px 20px;
      flex-wrap: wrap;
    }

    .approach-left {
      flex: 1 1 80px;
    }

    .approach-left h2 {
      font-size: 2.5rem;
      font-weight: 700;
      margin-top: 5rem;
    }

    

    .approach-right {
      flex: 1 1 400px;
      background: #fff;
      border-radius: 15px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.08);
      padding: 30px;
    }

    .approach-step {
      margin-bottom: 25px;
      border-bottom: 1px solid #ddd;
      padding-bottom: 20px;
    }

    .approach-step:last-child {
      border-bottom: none;
    }

    .approach-step h4 {
      font-size: 0.9rem;
      font-weight: 600;
      color: #666;
      text-transform: uppercase;
      margin-bottom: 5px;
    }

    .approach-step h3 {
      font-size: 1.2rem;
      color: #1a1a6b;
      margin-bottom: 8px;
    }

    .approach-step p {
      font-size: 0.95rem;
      color: #555;
    }

    /* Responsive Design */
    @media (max-width: 768px) {
      .approach-container {
        flex-direction: column;
        align-items: center;
        text-align: center;
      }
      .approach-left h2 {
        font-size: 2rem;
        margin-top: 0;
      }
      .approach-left p {
        max-width: 100%;
      }
      .approach-right {
        width: 100%;
        margin-top: 0%;
      }
    }
/* ONLINE PAGE */

.Onlinebewerbung{
  margin: 0;
      padding: 20px;
      background: #f4f7fb;
      color: #333;
}
.apply-wrapper {
      max-width: 800px;
      margin: auto;
    }

    .apply-title {
      text-align: center;
      margin-bottom: 30px;
      font-size: 2rem;
      color: #0056a3;
    }

    .apply-intro {
      text-align: center;
      margin-bottom: 40px;
      font-size: 1rem;
      line-height: 1.6;
    }

    .apply-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
      gap: 20px;
    }

    .apply-card {
      background: #fff;
      border-radius: 12px;
      padding: 20px;
      text-align: center;
      box-shadow: 0 4px 12px rgba(0,0,0,0.08);
      transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

    .apply-card:hover {
      transform: translateY(-5px);
      box-shadow: 0 8px 20px rgba(0,0,0,0.15);
    }

    .apply-icon {
      font-size: 36px;
      color: #0077cc;
      margin-bottom: 15px;
    }

    .apply-card h3 {
      margin: 10px 0;
      font-size: 1.2rem;
      color: #0077cc;
    }

    .apply-card p {
      font-size: 0.95rem;
      line-height: 1.5;
      margin: 5px 0;
    }

    .apply-card a {
      color: #0056a3;
      text-decoration: none;
      font-weight: bold;
    }

    .apply-card a:hover {
      text-decoration: underline;
    }

    @media (max-width: 480px) {
      .apply-title {
        font-size: 1.5rem;
      }
      .apply-card {
        padding: 15px;
      }
      .apply-card h3 {
        font-size: 1rem;
      }
      .apply-card p {
        font-size: 0.9rem;
      }
    }

/* STAGE PAGE */

.bct-section h2, h3 {
      color: #003366;
      margin-bottom: 15px;
    }

    .bct-section p, li { font-size: 1rem; }

    .bct-section a { color: #0066cc; text-decoration: none; }
    .bct-section a:hover { text-decoration: underline; }

    /* Sections */
    .bct-section {
      background: #fff;
      margin: 40px auto;
      padding: 40px 30px;
      max-width: 1100px;
      border-radius: 12px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    }

    .bct-section ul {
      margin: 15px 0 15px 20px;
    }
    .bct-section li {
      margin-bottom: 10px;
    }

    .bct-list-highlight li::before {
      content: "✔ ";
      color: #28a745;
      font-weight: bold;
    }

    /* Address */
    address {
      font-style: normal;
      margin-top: 10px;
      line-height: 1.6;
    }

    /* Footer */
    .bct-footer {
      text-align: center;
      padding: 20px;
      background: #003366;
      color: white;
      margin-top: 40px;
    }
    .bct-footer a { color: #ffdd00; }

    /* Responsive */
    @media (max-width: 768px) {
      .bct-hero-content h1 { font-size: 2rem; }
      .bct-hero-content p { font-size: 1rem; }
      .bct-section { padding: 25px 20px; }
    }

/* buero_veranst.html page */

.container5 {
      max-width: 1200px;
      margin: auto;
      padding: 2rem 1rem;
    }

    .intro5, .fazit5 {
      margin-bottom: 2rem;
      background: #fff;
      padding: 1.5rem;
      border-radius: 12px;
      box-shadow: 0 4px 8px rgba(0,0,0,0.05);
    }

    h2 {
      color: #0077b6;
      margin-top: 0;
    }

    /* Comparison section */
    .comparison5 {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 1rem;
      margin-bottom: 2rem;
    }

    .card5 {
      background: #fff;
      border-radius: 12px;
      padding: 1.5rem;
      box-shadow: 0 4px 8px rgba(0,0,0,0.05);
      transition: transform 0.3s;
    }

    .card5:hover {
      transform: translateY(-4px);
    }

    .card5 h2 {
      font-size: 1.3rem;
    }

    /* Aufgaben Tabelle */
    table {
      width: 100%;
      border-collapse: collapse;
      margin-top: 1rem;
      background: #fff;
      border-radius: 12px;
      overflow: hidden;
      box-shadow: 0 4px 8px rgba(0,0,0,0.05);
      font-size: 1rem;
    }

    table th, table td {
      padding: 0.75rem;
      border: 1px solid #ddd;
      text-align: left;
      vertical-align: top;
    }

    table th {
      background: #0077b6;
      color: #fff;
    }

    /* Responsive adjustments */
    @media (max-width: 992px) {
      header h1 {
        font-size: 1.6rem;
      }
      table th, table td {
        font-size: 0.95rem;
      }
    }

    @media (max-width: 768px) {
      .comparison5 {
        grid-template-columns: 1fr;
      }
      table th, table td {
        font-size: 0.9rem;
        padding: 0.6rem;
      }
    }

    /* Accordion for mobile */
    .accordion5 {
      display: none;
    }

    @media (max-width: 600px) {
      .comparison5 {
        display: none;
      }
      .accordion5 {
        display: block;
        margin-bottom: 2rem;
      }
      .accordion-item5 {
        background: #fff;
        margin-bottom: 1rem;
        border-radius: 10px;
        overflow: hidden;
        box-shadow: 0 4px 6px rgba(0,0,0,0.05);
      }
      .accordion-header5 {
        padding: 1rem;
        background: #0096c7;
        color: #fff;
        cursor: pointer;
        font-weight: bold;
      }
      .accordion-content5 {
        padding: 1rem;
        display: none;
      }
    }

/* kontakt page */

.custom-main-k {
      flex: 1;
      max-width: 800px;
      margin: auto;
      padding: 2rem 1rem;
    }

    .custom-message-k {
      background: #fff;
      padding: 1.5rem;
      border-radius: 12px;
      box-shadow: 0 4px 8px rgba(0,0,0,0.05);
      margin-bottom: 2rem;
    }

    .custom-message-k p {
      margin-bottom: 1rem;
    }

    .custom-message-k strong {
      color: #0077b6;
    }

    /* Responsive tweaks */
    @media (max-width: 600px) {
      .custom-message-k {
        padding: 1rem;
      }
    }

/* trainee page */

    .trainee {
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      background-color: #f9f9f9;
      color: #333;
      line-height: 1.6;
      padding: 20px;
    }

    .trainee-container {
      max-width: 900px;
      margin: 0 auto;
      background-color: #fff;
      padding: 30px 40px;
      border-radius: 8px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    }

    .trainee-title {
      text-align: center;
      color: #004080;
      margin-bottom: 25px;
      font-weight: 700;
    }

    .trainee-subtitle {
      color: #0066cc;
      margin-bottom: 15px;
      border-bottom: 2px solid #0066cc;
      padding-bottom: 5px;
    }

    .trainee-list {
      list-style-type: disc;
      margin-left: 20px;
      margin-bottom: 25px;
    }

    .trainee-text {
      margin-bottom: 25px;
      font-size: 1rem;
    }

    
    .trainee-highlight {
      background-color: #e6f0ff;
      border-left: 5px solid #0066cc;
      padding: 15px 20px;
      margin-bottom: 30px;
      font-style: italic;
      color: #004080;
    }

 
    @media (max-width: 600px) {
      .trainee {
        padding: 15px;
      }

      .trainee-container {
        padding: 20px 25px;
      }

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

      .trainee-subtitle {
        font-size: 1.3rem;
      }

      .trainee-text, 
      .trainee-list {
        font-size: 0.95rem;
      }
    }

/* praktikum page */

    .praktikum {
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      background-color: #fafafa;
      color: #222;
      line-height: 1.6;
      padding: 20px;
    }

    .praktikum-container {
      max-width: 900px;
      margin: 0 auto;
      background: #fff;
      padding: 30px 40px;
      border-radius: 8px;
      box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    }

    .praktikum-title {
      text-align: center;
      color: #2c3e50;
      margin-bottom: 30px;
      font-weight: 700;
      font-size: 2rem;
    }

    .praktikum-subtitle {
      color: #2980b9;
      margin-bottom: 15px;
      border-bottom: 3px solid #2980b9;
      padding-bottom: 6px;
      font-weight: 600;
    }

    .praktikum-text,
    .praktikum-list li {
      font-size: 1rem;
      margin-bottom: 15px;
      color: #444;
    }

    .praktikum-list {
      margin-left: 20px;
      margin-bottom: 25px;
      list-style-type: disc;
    }

    .praktikum-highlight {
      background-color: #d6eaf8;
      border-left: 6px solid #2980b9;
      padding: 15px 20px;
      margin-bottom: 30px;
      font-style: italic;
      color: #1b4f72;
    }

    .praktikum-contact {
      background-color: #f0f8ff;
      border: 1px solid #2980b9;
      padding: 20px;
      border-radius: 6px;
      font-weight: 600;
      color: #1a5276;
      margin-top: 30px;
      word-wrap: break-word;
    }

    /* Responsive */
    @media (max-width: 600px) {
      .praktikum {
        padding: 15px;
      }

      .praktikum-container {
        padding: 20px 25px;
      }

      .praktikum-title {
        font-size: 1.6rem;
      }

      .praktikum-subtitle {
        font-size: 1.2rem;
      }

      .praktikum-text,
      .praktikum-list li {
        font-size: 0.95rem;
      }
    }

/* inhalt page */

.eq {
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      background-color: #f5f7fa;
      color: #2c3e50;
      line-height: 1.6;
      padding: 20px;
    }

    .eq-container {
      max-width: 900px;
      margin: 0 auto;
      padding: 20px;
    }

    .eq-title {
      text-align: center;
      color: #34495e;
      margin-bottom: 40px;
      font-weight: 700;
      font-size: 2.2rem;
    }

    .eq-card {
      background: #fff;
      border-radius: 10px;
      box-shadow: 0 6px 15px rgba(0,0,0,0.1);
      padding: 25px 30px;
      margin-bottom: 30px;
      transition: box-shadow 0.3s ease;
    }

    .eq-card:hover {
      box-shadow: 0 10px 25px rgba(0,0,0,0.15);
    }

    .eq-subtitle {
      color: #2980b9;
      margin-bottom: 15px;
      font-weight: 600;
      border-bottom: 3px solid #2980b9;
      padding-bottom: 8px;
      font-size: 1.5rem;
    }

    .eq-text {
      font-size: 1rem;
      margin-bottom: 15px;
      color: #34495e;
    }

    .eq-list {
      margin-left: 20px;
      margin-bottom: 15px;
      list-style-type: disc;
      color: #34495e;
    }

    .eq-link {
      color: #2980b9;
      text-decoration: none;
      font-weight: 600;
    }

    .eq-link:hover {
      text-decoration: underline;
    }

    /* Responsive */
    @media (max-width: 600px) {
      .eq {
        padding: 15px;
      }

      .eq-container {
        padding: 10px;
      }

      .eq-title {
        font-size: 1.8rem;
        margin-bottom: 30px;
      }

      .eq-subtitle {
        font-size: 1.3rem;
      }

      .eq-text,
      .eq-list {
        font-size: 0.95rem;
      }
    }

/* inhalt2 page  */

.eq2 {
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      background-color: #f0f4f8;
      color: #2c3e50;
      line-height: 1.6;
      padding: 20px;
    }

    .eqkurs-container {
      max-width: 900px;
      margin: 0 auto;
      background: #fff;
      padding: 30px 40px;
      border-radius: 10px;
      box-shadow: 0 6px 18px rgba(0,0,0,0.1);
    }

    .eqkurs-title {
      text-align: center;
      color: #34495e;
      margin-bottom: 40px;
      font-weight: 700;
      font-size: 2.2rem;
    }

    .eqkurs-module-list {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
      gap: 20px;
    }

    .eqkurs-module {
      background: #e8f0fe;
      border-radius: 8px;
      padding: 20px;
      box-shadow: 0 3px 8px rgba(41, 128, 185, 0.2);
      transition: background-color 0.3s ease;
    }

    .eqkurs-module:hover {
      background-color: #d0e4fd;
    }

    .eqkurs-module h2 {
      font-size: 1.25rem;
      color: #1a5276;
      margin-bottom: 15px;
      border-bottom: 2px solid #2980b9;
      padding-bottom: 6px;
    }

    .eqkurs-module ul {
      list-style-type: disc;
      margin-left: 20px;
      color: #34495e;
    }

    .eqkurs-module ul li {
      margin-bottom: 8px;
      font-size: 1rem;
    }

    /* Responsive */
    @media (max-width: 600px) {
      .eqkurs-container {
        padding: 20px 25px;
      }

      .eqkurs-title {
        font-size: 1.8rem;
        margin-bottom: 30px;
      }

      .eqkurs-module h2 {
        font-size: 1.1rem;
      }

      .eqkurs-module ul li {
        font-size: 0.95rem;
      }
    }

/* inhalt 3 page */

.eq3 {
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      background-color: #f9fbfd;
      color: #2c3e50;
      line-height: 1.6;
      padding: 20px;
    }

    .eqrv-container {
      max-width: 960px;
      margin: 0 auto;
      background: #fff;
      padding: 30px 40px;
      border-radius: 10px;
      box-shadow: 0 6px 20px rgba(0,0,0,0.1);
    }

    .eqrv-title {
      text-align: center;
      color: #34495e;
      margin-bottom: 40px;
      font-weight: 700;
      font-size: 2.2rem;
    }

    .eqrv-table {
      width: 100%;
      border-collapse: collapse;
      margin-bottom: 30px;
    }

    .eqrv-table thead {
      background-color: #2980b9;
      color: white;
    }

    .eqrv-table th,
    .eqrv-table td {
      padding: 15px 20px;
      border: 1px solid #ddd;
      vertical-align: top;
    }

    .eqrv-table th {
      text-align: left;
      font-weight: 600;
      font-size: 1.1rem;
    }

    .eqrv-table td ul {
      list-style-type: disc;
      margin-left: 20px;
      color: #34495e;
    }

    .eqrv-table td ul li {
      margin-bottom: 8px;
      font-size: 1rem;
    }

    .eqrv-online-bewerbung {
      background-color: #d6eaf8;
      border-left: 6px solid #2980b9;
      padding: 20px 25px;
      font-style: italic;
      color: #1b4f72;
      font-weight: 600;
      border-radius: 6px;
    }

    /* Responsive for tablets */
    @media (max-width: 1024px) {
      .eqrv-container {
        padding: 25px 20px;
      }

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

    /* Responsive for smaller screens */
    @media (max-width: 700px) {
      .eqrv-table,
      .eqrv-table thead,
      .eqrv-table tbody,
      .eqrv-table th,
      .eqrv-table td,
      .eqrv-table tr {
        display: block;
        width: 100%;
      }

      .eqrv-table thead tr {
        position: absolute;
        top: -9999px;
        left: -9999px;
      }

      .eqrv-table tr {
        margin-bottom: 25px;
        border: 1px solid #ccc;
        border-radius: 8px;
        padding: 15px;
        background: #f7f9fc;
      }

      .eqrv-table td {
        border: none;
        padding-left: 50%;
        position: relative;
        text-align: left;
      }

      .eqrv-table td:before {
        position: absolute;
        top: 15px;
        left: 15px;
        width: 45%;
        padding-right: 10px;
        white-space: nowrap;
        font-weight: 600;
        color: #2980b9;
        content: attr(data-label);
      }

      .eqrv-table td ul {
        margin-left: 0;
        padding-left: 20px;
      }
    }

    /* Extra small phones */
    @media (max-width: 400px) {
      .eqrv-title {
        font-size: 1.6rem;
      }

      .eqrv-table td {
        padding-left: 45%;
      }

      .eqrv-online-bewerbung {
        font-size: 0.95rem;
        padding: 15px;
      }
    }

/* jobs page */

.jobs {
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      background-color: #f7f9fc;
      color: #2c3e50;
      line-height: 1.6;
      padding: 20px;
    }

    .jobs-wrapper {
      max-width: 900px;
      margin: 0 auto;
      background: #fff;
      padding: 30px 40px;
      border-radius: 10px;
      box-shadow: 0 6px 20px rgba(0,0,0,0.1);
    }

    .jobs-heading {
      text-align: center;
      color: #34495e;
      margin-bottom: 10px;
      font-weight: 700;
      font-size: 2rem;
    }

    .jobs-date {
      text-align: center;
      color: #7f8c8d;
      margin-bottom: 30px;
      font-style: italic;
      font-size: 0.9rem;
    }

    .job-item {
      background-color: #eaf2f8;
      border-left: 6px solid #2980b9;
      padding: 20px 25px;
      margin-bottom: 25px;
      border-radius: 8px;
      transition: box-shadow 0.3s ease;
    }

    .job-item:hover {
      box-shadow: 0 8px 20px rgba(41, 128, 185, 0.3);
    }

    .job-position {
      font-size: 1.3rem;
      font-weight: 700;
      color: #1a5276;
      margin-bottom: 12px;
    }

    .job-focus {
      font-weight: 600;
      color: #2c3e50;
      margin-bottom: 12px;
    }

    .job-details p,
    .job-details ul {
      margin-bottom: 12px;
      color: #34495e;
      font-size: 1rem;
    }

    .job-details ul {
      list-style-type: disc;
      margin-left: 20px;
    }

    /* Responsive */
    @media (max-width: 600px) {
      .jobs {
        padding: 15px;
      }

      .jobs-wrapper {
        padding: 20px 25px;
      }

      .jobs-heading {
        font-size: 1.6rem;
      }

      .job-position {
        font-size: 1.1rem;
      }

      .job-details p,
      .job-details ul li {
        font-size: 0.95rem;
      }
    }

/* minijob page */

.minijob {
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      background-color: #f9fafc;
      color: #2c3e50;
      line-height: 1.6;
      padding: 20px;
    }

    .minijob-wrapper {
      max-width: 600px;
      margin: 0 auto;
      background: #fff;
      padding: 30px 35px;
      border-radius: 10px;
      box-shadow: 0 6px 18px rgba(0,0,0,0.1);
    }

    .minijob-title {
      text-align: center;
      color: #34495e;
      margin-bottom: 30px;
      font-weight: 700;
      font-size: 2rem;
    }

    .minijob-card {
      background-color: #e8f4fd;
      border-left: 6px solid #2980b9;
      padding: 20px 25px;
      border-radius: 8px;
      margin-bottom: 25px;
    }

    .minijob-section {
      margin-bottom: 20px;
    }

    .minijob-section h2 {
      color: #1a5276;
      font-size: 1.25rem;
      margin-bottom: 10px;
      border-bottom: 2px solid #2980b9;
      padding-bottom: 5px;
      font-weight: 600;
    }

    .minijob-section p {
      font-size: 1rem;
      color: #34495e;
      margin-left: 10px;
    }

    .minijob-hours {
      font-style: italic;
      color: #2c3e50;
      margin-left: 10px;
    }

    .minijob-apply {
      text-align: center;
      margin-top: 30px;
    }

    .minijob-apply a {
      display: inline-block;
      background-color: #2980b9;
      color: white;
      padding: 12px 25px;
      border-radius: 6px;
      text-decoration: none;
      font-weight: 600;
      transition: background-color 0.3s ease;
    }

    .minijob-apply a:hover {
      background-color: #1a3d6d;
    }

   
    @media (max-width: 480px) {
      .minijob-wrapper {
        padding: 20px 20px;
      }

      .minijob-title {
        font-size: 1.6rem;
        margin-bottom: 25px;
      }

      .minijob-section h2 {
        font-size: 1.1rem;
      }

      .minijob-section p,
      .minijob-hours {
        font-size: 0.95rem;
      }
    }

/* reiseleitung page */

.reiseleiter-body {
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      line-height: 1.6;
      margin: 0;
      padding: 0;
      background-color: #f9f9f9;
      color: #333;
    }
    .reiseleiter-container {
      max-width: 900px;
      margin: 2rem auto;
      padding: 2rem 1.5rem;
      background: #fff;
      box-shadow: 0 0 10px rgba(0,0,0,0.1);
      border-radius: 8px;
    }
    .reiseleiter-title {
      color: #2c3e50;
      margin-top: 1.5rem;
      margin-bottom: 1rem;
    }
    .reiseleiter-subtitle {
      color: #2c3e50;
      margin-top: 1.2rem;
      margin-bottom: 1rem;
    }
    .reiseleiter-text {
      margin-bottom: 1rem;
      text-align: justify;
    }
    @media (max-width: 600px) {
      .reiseleiter-body {
        font-size: 16px;
      }
      .reiseleiter-container {
        margin: 1rem;
        padding: 1rem;
      }
      .reiseleiter-title {
        font-size: 1.5rem;
      }
      .reiseleiter-subtitle {
        font-size: 1.2rem;
      }
    }

/* seminar page */

    .training-body {
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      background: linear-gradient(135deg, #f0f4f8, #d9e2ec);
      margin: 0;
      padding: 2rem 1rem;
      color: #102a43;
      line-height: 1.65;
      font-size: 18px;
    }
    .training-container {
      max-width: 900px;
      margin: 0 auto;
      background: #ffffff;
      padding: 2.5rem 3rem;
      border-radius: 12px;
      box-shadow: 0 12px 24px rgba(16, 42, 67, 0.15);
      border: 1px solid #bcccdc;
      transition: box-shadow 0.3s ease;
    }
    .training-container:hover {
      box-shadow: 0 20px 40px rgba(16, 42, 67, 0.25);
    }
    .training-title,
    .training-subtitle {
      font-weight: 700;
      color: #334e68;
      margin-bottom: 1rem;
      letter-spacing: 0.03em;
    }
    .training-title {
      font-size: 2.8rem;
      border-bottom: 3px solid #627d98;
      padding-bottom: 0.3rem;
      margin-bottom: 2rem;
    }
    .training-subtitle {
      font-size: 2rem;
      margin-top: 2.5rem;
      margin-bottom: 1.2rem;
    }
    .training-text {
      margin-bottom: 1.3rem;
      text-align: justify;
      color: #334e68;
    }
    .training-list {
      list-style: inside disc;
      margin-bottom: 1.8rem;
      padding-left: 0;
      color: #486581;
    }
    .training-list-item {
      margin-bottom: 0.6rem;
      font-weight: 500;
      transition: color 0.3s ease;
    }
    .training-list-item:hover {
      color: #1d4ed8;
      cursor: default;
    }
    .training-schedule strong {
      display: block;
      margin-top: 1.8rem;
      margin-bottom: 0.6rem;
      font-size: 1.15rem;
      color: #1e40af;
      border-left: 4px solid #3b82f6;
      padding-left: 0.8rem;
      font-weight: 700;
      letter-spacing: 0.02em;
    }
    @media (max-width: 768px) {
      .training-body {
        font-size: 16px;
        padding: 1.5rem 1rem;
      }
      .training-container {
        padding: 2rem 1.5rem;
      }
      .training-title {
        font-size: 2.2rem;
      }
      .training-subtitle {
        font-size: 1.6rem;
      }
    }
    @media (max-width: 400px) {
      .training-body {
        font-size: 15px;
      }
      .training-container {
        padding: 1.5rem 1rem;
      }
      .training-title {
        font-size: 1.8rem;
      }
      .training-subtitle {
        font-size: 1.3rem;
      }
    }

/* jobs page */
    .jobs-body {
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      background: #f0f4f8;
      margin: 0;
      padding: 2rem 1rem;
      color: #1e293b;
      line-height: 1.6;
      font-size: 18px;
    }
    .jobs-container {
      max-width: 960px;
      margin: 0 auto;
      background: #fff;
      padding: 2.5rem 3rem;
      border-radius: 12px;
      box-shadow: 0 12px 24px rgba(30, 41, 59, 0.1);
      border: 1px solid #cbd5e1;
    }
    .jobs-title {
      font-size: 2.8rem;
      margin-bottom: 1rem;
      color: #0f172a;
      border-bottom: 3px solid #3b82f6;
      padding-bottom: 0.3rem;
      letter-spacing: 0.03em;
    }
    .jobs-intro {
      font-size: 1.1rem;
      margin-bottom: 2rem;
      color: #475569;
    }
    .job-section {
      background: #f8fafc;
      border: 1px solid #cbd5e1;
      border-radius: 10px;
      padding: 1.8rem 2rem;
      margin-bottom: 2rem;
      box-shadow: 0 4px 8px rgba(59, 130, 246, 0.1);
      transition: box-shadow 0.3s ease;
    }
    .job-section:hover {
      box-shadow: 0 8px 16px rgba(59, 130, 246, 0.2);
    }
    .job-heading {
      font-size: 1.6rem;
      font-weight: 700;
      color: #1e40af;
      margin-bottom: 0.8rem;
      border-left: 5px solid #3b82f6;
      padding-left: 0.8rem;
      letter-spacing: 0.02em;
    }
    .job-requirements {
      list-style: disc inside;
      margin: 1rem 0 1.5rem 0;
      color: #334155;
    }
    .job-requirements-item {
      margin-bottom: 0.5rem;
    }
    .job-contact {
      font-weight: 600;
      color: #2563eb;
      margin-top: 0.5rem;
    }
    .job-contact a {
      color: #2563eb;
      text-decoration: none;
      border-bottom: 1px solid transparent;
      transition: border-color 0.3s ease;
    }
    .job-contact a:hover {
      border-color: #2563eb;
    }
    @media (max-width: 768px) {
      .jobs-body {
        font-size: 16px;
        padding: 1.5rem 1rem;
      }
      .jobs-container {
        padding: 2rem 1.5rem;
      }
      .jobs-title {
        font-size: 2.2rem;
      }
      .job-heading {
        font-size: 1.3rem;
      }
    }
    @media (max-width: 400px) {
      .jobs-body {
        font-size: 15px;
      }
      .jobs-container {
        padding: 1.5rem 1rem;
      }
      .jobs-title {
        font-size: 1.8rem;
      }
      .job-heading {
        font-size: 1.1rem;
      }
    }

/* bewerbung page */

    .application-body {
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      background: #f5f7fa;
      margin: 0;
      padding: 2rem 1rem;
      color: #1e293b;
      line-height: 1.6;
      font-size: 18px;
    }
    .application-container {
      max-width: 900px;
      margin: 0 auto;
      background: #fff;
      padding: 2.5rem 3rem;
      border-radius: 12px;
      box-shadow: 0 10px 20px rgba(30, 41, 59, 0.1);
      border: 1px solid #cbd5e1;
    }
    .application-title {
      font-size: 2.8rem;
      margin-bottom: 1rem;
      color: #0f172a;
      border-bottom: 3px solid #2563eb;
      padding-bottom: 0.3rem;
      letter-spacing: 0.03em;
    }
    .application-text {
      margin-bottom: 1.5rem;
      color: #334155;
    }
    .application-contact {
      background: #e0e7ff;
      border-left: 6px solid #2563eb;
      padding: 1rem 1.5rem;
      margin-bottom: 2rem;
      border-radius: 6px;
      font-weight: 600;
      color: #1e40af;
    }
    .application-contact a {
      color: #1e40af;
      text-decoration: none;
      border-bottom: 1px solid transparent;
      transition: border-color 0.3s ease;
    }
    .application-contact a:hover {
      border-color: #1e40af;
    }
    .application-subtitle {
      font-size: 2rem;
      margin-bottom: 1rem;
      color: #334155;
      border-bottom: 2px solid #cbd5e1;
      padding-bottom: 0.3rem;
    }
    .application-checklist {
      list-style: none;
      padding-left: 0;
      margin-bottom: 0;
    }
    .application-checklist-item {
      position: relative;
      padding-left: 2.2rem;
      margin-bottom: 1rem;
      color: #475569;
      font-weight: 500;
    }
    .application-checklist-item::before {
      content: "✔";
      position: absolute;
      left: 0;
      top: 0;
      color: #2563eb;
      font-weight: 700;
      font-size: 1.2rem;
      line-height: 1;
    }
    @media (max-width: 768px) {
      .application-body {
        font-size: 16px;
        padding: 1.5rem 1rem;
      }
      .application-container {
        padding: 2rem 1.5rem;
      }
      .application-title {
        font-size: 2.2rem;
      }
      .application-subtitle {
        font-size: 1.6rem;
      }
    }
    @media (max-width: 400px) {
      .application-body {
        font-size: 15px;
      }
      .application-container {
        padding: 1.5rem 1rem;
      }
      .application-title {
        font-size: 1.8rem;
      }
      .application-subtitle {
        font-size: 1.3rem;
      }
    }

/* impressum page */

header.imp-header {
      color: black;
      padding: 1rem;
      text-align: center;
      font-weight: bold;
      font-size: 2rem;
    }

    .imp-container {
      width: 90%;
      max-width: 1100px;
      margin: 2rem auto;
    }

    .imp-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 1rem;
      margin-bottom: 2rem;
    }

    .imp-box {
      background: #fff;
      padding: 1.2rem;
      border-radius: 8px;
      box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    }

    h2.imp-section-title {
      background: #f5f5f5;
      padding: 0.8rem;
      border-left: 4px solid #4b82f1;
      font-size: 1.2rem;
      margin-top: 2rem;
    }

    .imp-text {
      margin: 0.5rem 0 1rem;
    }

    .imp-list {
      margin: 0.5rem 0 1rem;
      padding-left: 1.2rem;
    }

    .imp-link {
      color: #4b82f1;
      text-decoration: none;
    }

    .imp-link:hover {
      text-decoration: underline;
    }

    footer.imp-footer {
      margin-top: 3rem;
      background: #f5f5f5;
      text-align: center;
      padding: 1rem;
      font-size: 0.9rem;
      color: #555;
    }

    /* ✅ Responsive Design */
    @media (max-width: 768px) {
      .imp-grid {
        grid-template-columns: 1fr;
      }
    }

/* staff page */
.staff {
      margin: 0;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI',
        Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue',
        sans-serif;
      background: #fafafa;
      color: #222;
      line-height: 1.5;
      padding: 2rem 1rem;
    }

    .layout-wrapper {
      max-width: 960px;
      margin: 0 auto;
    }

    h1 {
      font-weight: 700;
      margin-bottom: 1rem;
      font-size: 1.5rem;
      color: #222;
    }

    p.text-intro {
      color: #555;
      max-width: 540px;
      margin: 0 auto 2rem auto;
      font-size: 0.95rem;
      text-align: center;
    }

    .grid-members {
      display: grid;
      gap: 1.5rem;
      grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    }

    .member-card {
      background: #fff;
      border-radius: 0.5rem;
      box-shadow: 0 4px 8px rgb(0 0 0 / 0.07);
      overflow: hidden;
      display: flex;
      flex-direction: column;
    }

    .role-label {
      font-size: 0.75rem;
      background: #f9f2ec;
      color: #585858;
      padding: 0.25rem 0.75rem;
      align-self: flex-start;
      border-bottom-left-radius: 0;
      border-top-left-radius: 0.5rem;
      border-top-right-radius: 0.5rem;
      border-bottom-right-radius: 0;
      margin: 1rem;
      min-width: max-content;
      font-weight: 500;
    }

    .photo-box {
      background: #d8ebef;
      padding: 0.75rem;
      text-align: center;
    }

    .photo-box img {
      width: 100%;
      height: auto;
      max-height: 175px;
      object-fit: cover;
      border-radius: 0.25rem;
    }

    .details-area {
      padding: 1rem 1.25rem 1.5rem;
      flex-grow: 1;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
    }

    .details-area h3 {
      margin: 0.4rem 0 0.6rem 0;
      font-weight: 600;
      font-size: 1rem;
    }

    .details-area p {
      color: #555;
      font-size: 0.85rem;
      margin: 0;
      flex-grow: 1;
    }

    @media (max-width: 480px) {
      .staff {
        padding: 1rem 0.5rem;
      }
      .role-label {
        font-size: 0.7rem;
        padding: 0.2rem 0.5rem;
        margin: 0.75rem;
      }
      .details-area h3 {
        font-size: 0.9rem;
      }
      .details-area p {
        font-size: 0.8rem;
      }
    }


/* policy page */

.policy{
  margin: 0;
    font-family: "Poppins", sans-serif;
    background-color: #1f2434;
    color: #ddd;
    line-height: 1.6;
    padding: 20px;
}
/* Container */
  .policy-container {
    max-width: 900px;
    margin: 0 auto;
    overflow-x: hidden;
  }

  /* Navigation Menu */
  .policy-nav {
    display: flex;
    flex-wrap: wrap;
    background: #252c45;
    border-radius: 6px;
    overflow: hidden;
    margin-bottom: 40px;
  }
  .policy-nav button {
    flex: 1;
    background: #252c45;
    border: none;
    color: #b9becf;
    padding: 14px 15px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.3s, color 0.3s;
    text-transform: uppercase;
    letter-spacing: 0.06em;
  }
  .policy-nav button:not(:last-child) {
    border-right: 1px solid #3a4064;
  }
  .policy-nav button.active,
  .policy-nav button:hover {
    background: #2c537a;
    color: #fff;
  }

  /* Header */
  .policy-header .policy-t {
    font-weight: 700;
    font-size: 2rem;
    color: #fafafa;
    margin-bottom: 0;
    letter-spacing: 0.06em;
  }
  .policy-header span {
    color: #b1b8c7;
    font-size: 0.9rem;
    letter-spacing: 0.08em;
  }
  .policy-header a {
    color: #acc6ff;
    text-decoration: underline;
  }
  .policy-section a{
    color: #acc6ff;
    text-decoration: underline;
  }

  /* Sections */
  .policy-section {
    margin-top: 30px;
  }
  .policy-content-item {
    margin-bottom: 30px;
  }
  .policy-content-item strong {
    display: block;
    color: #e7ebf5;
    font-weight: 700;
    margin-bottom: 10px;
    letter-spacing: 0.03em;
  }
  .policy-content-item p,
  .policy-content-item ul {
    color: #b9becf;
    font-size: 0.95rem;
    margin-bottom: 10px;
  }
  .policy-content-item ul {
    padding-left: 20px;
    list-style-type: disc;
  }
  .policy-content-item li {
    margin-bottom: 5px;
  }

  /* Responsive */
  @media (max-width: 600px) {
    .policy-nav {
      flex-direction: column;
    }
    .policy-nav button {
      border-right: none !important;
      border-bottom: 1px solid #3a4064;
      flex: none;
      text-align: center;
    }
    .policy-nav button:last-child {
      border-bottom: none;
    }
    .policy-header .policy-t {
      font-size: 1.3rem;
    }
    .policy-content-item p,
    .policy-content-item ul {
      font-size: 0.9rem;
    }
  }

/* Wrapper */
.bct-legal-wrapper {
  max-width: 1100px;
  margin: 0 auto;
  padding: 1rem;
}

/* Card Design */
.bct-legal-card {
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 1.5rem;
  margin-bottom: 1.5rem;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}

.bct-legal-title {
  font-size: 1.3rem;
  margin-bottom: 1rem;
  color: #333;
}

.bct-legal-list {
  margin: 0.5rem 0 1rem 1.5rem;
}

.bct-legal-list li {
  margin-bottom: 0.5rem;
}

.bct-legal-card a {
  color: #0056b3;
  text-decoration: none;
}

.bct-legal-card a:hover {
  text-decoration: underline;
}

/* Footer */
.bct-legal-footer {
  text-align: center;
  font-size: 0.9rem;
  margin-top: 2rem;
  padding: 1rem;
  color: #555;
}

/* Responsive */
@media (max-width: 768px) {
  .bct-legal-card {
    padding: 1rem;
  }
  .bct-legal-title {
    font-size: 1.1rem;
  }
}

@media (max-width: 480px) {
  .bct-legal-wrapper {
    padding: 0.5rem;
  }
}

/* kontakt page */

/* Headline */
.page-header {
  font-size: 48px;
  font-weight: 700;
  color: #004080;
  padding-top: 7rem;
}

/* Container */
.data-container {
  max-width: 900px;
  margin: 0 auto 50px auto;
  background: #fff;
  padding: 30px;
  border-radius: 12px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.1);
}

/* Section headlines */
.headline {
  font-size: 20px;
  font-weight: 600;
  color: #004080;
  margin: 25px 0 15px;
}

/* Tables */
.table {
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
}

.table td {
  padding: 12px 15px;
  vertical-align: middle;
  border-color: #e5e7eb !important;
  font-size: 15px;
}

.table tr:nth-child(even) {
  background: #f9fafb;
}

/* Inputs */
.form-control {
  border: 1px solid #d1d5db;
  border-radius: 8px;
  font-size: 15px;
  padding: 10px 14px;
  transition: 0.3s ease;
}

.form-control:focus {
  border-color: #004080;
  box-shadow: 0 0 6px rgba(0,64,128,0.2);
}

/* Textarea */
textarea.form-control {
  min-height: 120px;
  resize: vertical;
}

/* Buttons */
.btn {
  border-radius: 8px;
  font-weight: 600;
  padding: 12px 24px;
  font-size: 16px;
  transition: 0.3s ease;
}

.btn-success {
  background: #004080;
  border: none;
}

.btn-success:hover {
  background: #0066cc;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,64,128,0.25);
}

.btn-secondary {
  background: #e5e7eb;
  color: #333;
  border: none;
}

.btn-secondary:hover {
  background: #d1d5db;
}

/* Spam protection icons */
.human-icon {
  font-size: 24px;
  margin: 0 6px;
  cursor: pointer;
  color: #888;
  transition: color 0.3s ease, transform 0.2s ease;
}

.human-icon:hover {
  color: #004080;
  transform: scale(1.2);
}

.human-icon.selected {
  color: #004080;
}

/* Modal */
.modal-content {
  border-radius: 12px;
  padding: 20px;
}

/* Fix navbar alignment on contact page */



/* Responsive */
@media (max-width: 768px) {
  .table td {
    display: block;
    width: 100%;
  }
  .table tr {
    display: block;
    margin-bottom: 15px;
  }
  .nav__data {
    display: flex;
    align-items: center;
    justify-content: space-between !important;
    width: 100%;
  }

}
/* ====== Base Styles ====== */
body {
  background: #f8f9fa; /* light gray background */
  font-family: "Segoe UI", Arial, sans-serif;
  color: #333;
  line-height: 1.6;
  margin: 0;
  padding: 0;
}

/* ====== Headings ====== */
h1, h2, h3, h4 {
  color: #004080; /* dark blue */
  font-weight: 600;
  margin-bottom: 1rem;
}

/* ====== Table Form Layout ====== */
table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 2rem;
  background: #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  border-radius: 8px;
  overflow: hidden;
}

table td {
  padding: 12px 16px;
  vertical-align: middle;
  border-bottom: 1px solid #eee;
}

/* Last row without border */
table tr:last-child td {
  border-bottom: none;
}

/* ====== Labels ====== */
td:first-child {
  font-weight: 500;
  color: #004080;
  width: 25%;
  background: #f0f6ff;
}

/* ====== Inputs ====== */
input[type="text"],
input[type="email"],
input[type="tel"],
select,
textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 0.95rem;
  transition: border-color 0.3s, box-shadow 0.3s;
}

input:focus,
select:focus,
textarea:focus {
  border-color: #007bff;
  box-shadow: 0 0 0 3px rgba(0,123,255,0.2);
  outline: none;
}

/* ====== Buttons ====== */
button,
input[type="submit"] {
  background: #007bff;
  color: #fff;
  border: none;
  padding: 12px 20px;
  border-radius: 6px;
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.3s, transform 0.2s;
}

button:hover,
input[type="submit"]:hover {
  background: #0056b3;
  transform: translateY(-2px);
}

/* ====== Cards look for sections ====== */
.section-box {
  background: #fff;
  padding: 20px 25px;
  margin-bottom: 2rem;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}

/* ====== Spam-Schutz Icons ====== */
.human-icon {
  cursor: pointer;
  font-size: 2rem;
  color: #6c757d;
  margin-right: 1rem;
  transition: color 0.3s, transform 0.2s;
}

.human-icon:hover {
  color: #007bff;
  transform: scale(1.1);
}

/* ====== Responsive ====== */
@media (max-width: 768px) {
  table td {
    display: block;
    width: 100%;
  }
  td:first-child {
    background: transparent;
    color: #333;
    font-weight: 600;
  }
}

p label {
  display: block;       /* para automatic new line */
  margin-bottom: 2px;   /* space sa ilalim ng bawat option */
  cursor: pointer;      /* mas madaling i-click */
}

p input[type="radio"] {
  margin-right: 6px;    /* space sa pagitan ng bilog at text */
}

/* Wrapper box */
.custom-section {
  background: #ffffff;
  border: 1px solid #e0e0e0;
  border-radius: 10px;
  padding: 20px;
  margin: 20px 0;
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}

/* Title */
.custom-section-title {
  font-size: 1.2rem;
  font-weight: 600;
  color: #004080; /* dark blue */
  margin-bottom: 15px;
  border-left: 4px solid #007bff;
  padding-left: 10px;
}

/* Options wrapper */
.custom-options {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Each option */
.custom-option {
  display: flex;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid #ddd;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s;
  font-size: 0.95rem;
  color: #333;
}

/* Radio inside option */
.custom-option input[type="radio"] {
  margin-right: 10px;
  accent-color: #007bff; /* modern blue check */
}

/* Hover and active states */
.custom-option:hover {
  background: #f8f9ff;
  border-color: #007bff;
}

.custom-option input[type="radio"]:checked + span,
.custom-option input[type="radio"]:checked {
  font-weight: 600;
  color: #007bff;
}

/* Fields wrapper */
.custom-field {
  margin-bottom: 18px;
  display: flex;
  flex-direction: column;
}

/* Labels */
.custom-field label {
  font-weight: 500;
  margin-bottom: 6px;
  color: #333;
}

/* Select box style */
.custom-select {
  padding: 10px 12px;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 0.95rem;
  background: #fff;
  transition: all 0.3s;
  cursor: pointer;
}

/* Hover & focus */
.custom-select:hover {
  border-color: #007bff;
}

.custom-select:focus {
  outline: none;
  border-color: #007bff;
  box-shadow: 0 0 4px rgba(0, 123, 255, 0.4);
}

/* Note / small info text */
.custom-note {
  margin-top: 10px;
  font-size: 0.9rem;
  color: #555;
  font-style: italic;
}

/* Make option spans lighter */
.custom-field span {
  margin-left: 4px;
  color: #666;
  font-size: 0.9rem;
}

/* Extra note text */
.custom-note {
  margin-top: 12px;
  font-size: 0.9rem;
  color: #444;
  line-height: 1.5;
  background: #f9f9f9;
  padding: 10px 12px;
  border-left: 3px solid #007bff;
  border-radius: 6px;
}

/* Checkbox option style */
.custom-field input[type="checkbox"] {
  margin-right: 8px;
  accent-color: #007bff;
}

/* Notes box style (reuse from Reiserücktritt) */
.custom-note {
  margin-top: 12px;
  font-size: 0.9rem;
  color: #444;
  line-height: 1.5;
  background: #f9f9f9;
  padding: 10px 12px;
  border-left: 3px solid #007bff;
  border-radius: 6px;
}

.custom-section{
  width: 100%;
  margin: 10px 10px;
}

/* Target word style */
.spam-target {
  color: #d9534f;
  font-weight: bold;
}

/* Spam-protect content */
.spam-protect {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  width: 100%;
  padding: 15px 20px;
  border: 1px solid #ddd;
  border-radius: 8px;
  background: #fafafa;
  box-sizing: border-box;
}

/* Instruction */
.spam-instruction {
  flex: 1; /* para lumapad at hindi dikit */
  font-size: 1rem;
  color: #333;
}

/* Icons container */
.spam-icons {
  display: flex;
  gap: 20px;
  font-size: 2rem; /* mas malaki icons */
}

/* Icons design */
.spam-icons .human-icon {
  cursor: pointer;
  transition: transform 0.2s, color 0.2s;
  color: #555;
}

.spam-icons .human-icon:hover {
  transform: scale(1.3);
  color: #007bff;
}

.headline {
  font-size: 1.5rem;
  font-weight: bold;
  margin-bottom: 20px;
}

.data-box {
  background: #fafafa;
  padding: 20px;
  border-radius: 8px;
  border: 1px solid #ddd;
}


.participant-table {
  width: 100%;
  font-size: 0.95rem;
}

.participant-table td {
  vertical-align: middle;
  padding: 10px;
}

.participant-table input {
  margin-top: 5px;
  width: 100%;
}


.note {
  font-size: 0.9rem;
  color: #666;
  margin-top: 10px;
}


@media (max-width: 767px) {
  .participant-table td {
    display: block;
    width: 100%;
  }

  .participant-table input {
    margin-top: 8px;
  }
}

/* company page */

/* Container */
    .storefinder-container-unique {
      max-width: 1200px;
      margin: auto;
      padding: 20px;
      font-family: Arial, sans-serif;
      color: #222;
      text-align: center;
      padding-top: 7rem;
    }

    .storefinder-header-unique {
      font-size: 50px;
      font-weight: bold;
      margin-bottom: 15px;
      color: #004080;
    }

    /* Content Layout */
    .storefinder-content-unique {
      display: flex;
      flex-wrap: wrap;
      gap: 20px;
      justify-content: center;
      align-items: center;
    }

    /* Store Info */
    .storefinder-info-unique {
      flex: 1 1 300px;
      text-align: center;
    }

    .storefinder-info-unique h2 {
      font-size: 18px;
      margin-bottom: 12px;
    }

    .storefinder-address-unique {
      font-size: 14px;
      margin-bottom: 15px;
      line-height: 1.6;
    }

    /* Icon Row */
    .storefinder-contact-unique {
      font-size: 14px;
      margin-top: 15px;
      line-height: 1.8;
    }

    .storefinder-contact-unique i {
      margin-right: 8px;
      color: #444;
    }

    /* Button */
    .storefinder-btn-unique {
      display: inline-block;
      margin-top: 15px;
      padding: 10px 18px;
      border: 1px solid #222;
      background: transparent;
      cursor: pointer;
      text-decoration: none;
      font-size: 14px;
      color: #222;
      transition: 0.3s;
    }

    .storefinder-btn-unique:hover {
      background: #222;
      color: #fff;
    }

    /* Map Section */
    .storefinder-map-unique {
      flex: 2 1 400px;
      min-height: 300px;
    }

    .storefinder-map-unique img {
      width: 100%;
      height: auto;
      border-radius: 6px;
    }
    .storefinder-contact-unique a:hover{
      color: blue;
    }

    /* Responsive */
    @media (max-width: 768px) {
      .storefinder-content-unique {
        flex-direction: column;
      }

      .storefinder-map-unique {
        min-height: 250px;
      }
    }

.custom-image-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  flex: 1 1 45%;
  justify-content: center;
}

.custom-image {
  width: 48%;
  height: 220px;
  object-fit: cover;
  border-radius: 8px;
}

/* ✅ Responsive layout for small devices */
@media (max-width: 768px) {
   .custom-image-group {
    display: none !important;
  }
}

/* Header container */
.dropdown__header2 {
    text-align: left;
    margin-bottom: 0.75rem;
}

/* Image styling */
.dropdown__img2 {
    width: 100%;
    max-width: 300px;      /* limit para hindi sobrang laki sa desktop */
    height: auto;          /* responsive height */
    aspect-ratio: 4 / 1.5;   /* keeps it wide and low */
    object-fit: cover;    
    border-radius: 8px;
    display: block;
    margin: 0 auto 8px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Hover effect (optional) */
.dropdown__img2:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}


/* Responsive adjustments */
@media (max-width: 768px) {
    .dropdown__img2 {
        max-width: 160px;
        aspect-ratio: 3 / 1;
    }
   
}

@media (max-width: 480px) {
    .dropdown__img2 {
        max-width: 230px;
        aspect-ratio: 2.5 / 1.5;
    }
}

    .australien-info-box {
  display: flex;
  justify-content: space-between; /* ✅ pushes image and list to opposite sides */
  align-items: center;        /* aligns them from the top */
  gap: 1rem;                      /* space between the two columns */
  margin-top: 1.5rem;
  flex-wrap: wrap;             
}

.australien-info-img {
  width: 45%;                     /* adjust as needed */
  max-width: 500px;
  height: auto;
  border-radius: 8px;
}

.australien-info-list {
  width: 50%;
  list-style-type: disc;
  padding-left: 1.5rem;
  line-height: 1.6;
  font-size: 1rem;
}

.australien-info-list2 {
  width: 100%;
  list-style-type: disc;
  padding-left: 1.5rem;
  line-height: 1.6;
  font-size: 1rem;
}

.australien-info-list h2{
      padding:none;
    }

/* Responsive: stack image and list on smaller devices */
@media (max-width: 768px) {
  .australien-info-box {
    flex-direction: column;
    align-items: center;
    text-align: left;
  }

  .australien-info-img,
  .australien-info-list {
    width: 100%;
  }
}

.australien-box{
  margin-bottom: 1rem;
}