/**
 * Hero Section & Vision Styles
 * Animo Consulting Theme
 */

/* ========================================
 * Hero Section
 * ======================================== */

/* Hero content alignment variables */
.hero-section {
  --hero-content-left: 45%;
  --hero-title-width: min(580px, 90vw); /* レスポンシブ対応 */
  position: relative;
  margin-top: -6%;
  z-index: 1;
  background-image: url('../images/optimized/hero-main.png');
  background-size: auto 100%;
  background-position: calc(-22vw + 50%) top;
  background-repeat: no-repeat;
  min-height: clamp(600px, 70vh, 550px);
}

.hero-container {
  position: relative;
  max-width: var(--container-max-width);
  margin: 0 auto;
}

.hero-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: 0;
  position: relative;
  width: fit-content;
  margin-left: var(--hero-content-left);
  min-height: auto;
}

.hero-english-subtitle{
  font-size: calc(var(--font-size-base) * 0.7);
  vertical-align: middle;
  display: inline-block;
  padding-top: 0.2rem;
  letter-spacing: 0.2rem;
}


.hero-text {
  margin-bottom: var(--spacing-lg);
  margin-top: clamp(200px, 25vh, 10px);
}

.hero-title {
  font-size: clamp(28px, 6vw, 58px);
  font-weight: var(--font-weight-bold);
  color: var(--color-hero-title);
  line-height: 1.3;
  margin: 0 0 var(--spacing-sm) 0;
  width: var(--hero-title-width);
}


.vision-section .container {
  width: var(--hero-title-width);
  margin-left: var(--hero-content-left);
  padding: 0;
}

.hero-subtitle {
  font-family: var(--font-family-heading);
  font-weight: 700;
  color: var(--color-hero-title);
  margin: 0;
  justify-content: left;
}

.hero-buttons {
  width: var(--hero-title-width);
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin-left: var(--hero-content-left);
  margin-bottom: 2rem;
}

.hero-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-family-heading), serif;
  padding: clamp(5px, 1.5vw, 9px) clamp(5px, 3vw, 10px);
  font-size: clamp(14px, 1.5vw, 19px);
  font-weight: bold;
  background: linear-gradient(to bottom, #ffffff 0%, #E3DFDF 100%);
  text-decoration: none;
  border-radius: 20px;
  border: 3px solid;
  transition: all var(--transition-base);
  min-width: clamp(120px, 15vw, 180px);
  text-align: center;
  box-shadow:
    0 2px 4px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.hero-btn:hover {
  transform: translateY(-1px);
  text-decoration: none;
  box-shadow:
    0 4px 8px rgba(0, 0, 0, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.hero-btn--turquoise {
  border-color: #0e857a;
  color: #0e857a;
}
.hero-btn--turquoise:hover {
  background: linear-gradient(to bottom, #0e857a 0%, var(--color-primary-dark) 100%);
  color: white;
  border-color: #0e857a;
}

.hero-btn--orange {
  border-color: #bd681d;
  color: #bd681d;
}
.hero-btn--orange:hover {
  background: linear-gradient(to bottom, #bd681d 0%, #ff7f3f 100%);
  color: white;
  border-color: #bd681d;
}

.hero-btn--blue {
  border-color: #5F7CB8;
  color: #5F7CB8;
}
.hero-btn--blue:hover {
  background: linear-gradient(to bottom, #5F7CB8 0%, var(--color-accent-blue-dark) 100%);
  color: white;
  border-color: #5F7CB8;
}

/* ========================================
 * Vision Section
 * ======================================== */

.vision-section {
  /* Container for vision content */
  display: block;
}
.vision-title {
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-bold);
  font-family: var(--font-family-heading), serif;
  margin-bottom: 0.5rem;
  text-align: left;
}
.training-readme-title,
.vision-lead {
  font-size: calc(var(--font-size-base) * 1.2);
  font-family: var(--font-family-heading),serif;
  color: #3d60a9;
  font-weight: 700;
  line-height: 1.8;
  margin-bottom: var(--spacing-sm);
  letter-spacing: var(--letter-spacing-heading);
}

.vision-description {
  font-size: var(--font-size-base);
  color: var(--color-text-body);
  line-height: 1.8;
  z-index: 10;
}

.vision-description p {
  margin-bottom: var(--spacing-md);

}

.vision-link {
  display: inline-block;
  color: var(--color-accent-blue);
  text-decoration: underline;
  font-weight: var(--font-weight-medium);
}

.vision-link:hover {
  color: var(--color-accent-blue-dark);
}

/* ========================================
 * CTA Section
 * ======================================== */

.cta-section {
  background-color: var(--color-bg-beige);
  padding: var(--spacing-xxl) 0;
  margin-bottom: 0;
}

.cta-section h2 {
  font-size: var(--font-size-h2);
  margin-bottom: var(--spacing-md);
}

.cta-buttons {
  display: flex;
  justify-content: center;
  gap: var(--spacing-md);
  flex-wrap: wrap;
}

/* ========================================
 * News Section
 * =================4====================== */

.news-section {
  margin-top: 0;
  padding-left: 15%;
  width: 80%;
}
.news-section .container {
  margin-top: 1rem;
  margin-bottom: var(--spacing-xl);
}
.news-title{
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-bold);
  font-family: var(--font-family-heading), serif;
  margin: 0;
}

.not-found{
  text-align: left;
  font-size: var(--font-size-base);
  color: var(--color-text-body);
}

/* News section - 左揃え & ボタン小 */
.news-section .section-header {
  text-align: left;
}

.news-section .text-center {
  text-align: left;
}

.news-section .btn-outline {
  padding: 8px 20px;
  font-size: var(--font-size-small);
}
.news-list-link{
  text-decoration: underline;
    color: var(--color-primary);
}
.news-list-link:hover{
    color: var(--color-accent-green);
  text-decoration: none;
}

/* ========================================
 * Training Section (障害理解研修)
 * ======================================== */

/* 障害理解研修セクション - 全幅レイアウト */
.training-section {
  background-image:
          linear-gradient(to left, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.1) 10%, rgba(255, 255, 255, 0.5) 35%, rgba(255, 255, 255, 0) 50%),      url('../images/optimized/service-training.jpg');
  background-size: 35% auto;
  background-position: left  top, left top;
  background-repeat: no-repeat;
  position: relative;
  overflow: visible;
  overflow-x: hidden;
}

.training-container {
  max-width: var(--container-max-width);
  margin: 0 auto;
  padding: 0 var(--container-padding);
  position: relative;
}

/* ===== ビジュアルエリア: 写真 + 装飾円 + アイコン円 ===== */
.training-visual {
  position: relative;
  width: 100%;
  height: 400px;
}

/* 写真: 左半分 */
.training-photo {
  position: absolute;
  left: 0;
  top: 0;
  width: 50%;
  height: 100%;
  object-fit: cover;
  z-index: 2;
}

/* 巨大な装飾円: 右側から溢れる */
.training-circle-large {
  position: absolute;
  right: -300px;
  top: 50%;
  transform: translateY(-50%);
  width: 900px;
  height: 900px;
  background-color: rgba(var(--shadow-color-primary), var(--opacity-15));
  border-radius: 50%;
  z-index: 1;
}

/* ===== タイトル上部の背景アイコン ===== */
.training-title,
.dispatch-title,
.online-title,
.simulation-title {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.training-title::before,
.dispatch-title::before,
.online-title::before,
.simulation-title::before {
  content: '';
  display: block;
  width: 60px;
  height: 60px;
  margin-bottom: 6px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.training-title::before {
  background-image: url('../images/footer-icons/training.png');
}

.dispatch-title::before {
  background-image: url('../images/footer-icons/instructor.png');
}

.online-title::before {
  background-image: url('../images/footer-icons/online.png');
}

.simulation-title::before {
  background-image: url('../images/footer-icons/simulation.png');
}

/* ===== テキストコンテンツ: タイトル + 説明文 ===== */
.training-text-content {
  position: relative;
  z-index: 2;
  padding-left: 34%;
  padding-right: var(--spacing-lg);
  padding-top: var(--spacing-sm);
  padding-bottom: 0;
  width: 80%;
  min-height: 480px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.training-readme-content {
  margin-bottom: 1em;
}

.training-title {
  font-size: clamp(28px, 3.5vw, 40px);
  font-weight: var(--font-weight-medium);
  font-family: var(--font-family-heading);
  color: #0e857a;
  margin: 0 0 var(--spacing-md) 0;
  line-height: 1.4;
  letter-spacing: var(--letter-spacing-heading);
}

.training-description {
  font-size: calc(var(--font-size-base) * 1.2);
  font-family: var(--font-family-heading);
  font-weight: 700;
  color: var(--color-text-body);
  line-height: 1.8;
  margin-bottom: var(--spacing-lg);
}

/* ===== 下部コンテンツ: イントロ + 3セクション ===== */
.training-bottom-content {
  position: relative;
  z-index: 2;
  padding-left: 15%;
  padding-right: var(--spacing-xl);
  width: 80%;
}

.training-intro {
  font-size: var(--font-size-base);
  color: var(--color-text-body);
  line-height: 1.5;
  margin-bottom: var(--spacing-sm);
  text-align: left;
}

.training-sections {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
}

.training-section-item {
  border-radius: var(--radius-md);
  position: relative;
}

.training-section-title {
  display: inline-block;
  background-color: #0e857a;
  color: var(--color-text-white);
  padding: 8px 24px;
  border-radius: 20px;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
    margin-bottom: var(--spacing-sm);
}

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

.training-section li {
  position: relative;
  padding-left: 20px;
  font-size: var(--font-size-base);
  color: var(--color-text-body);
  line-height: 1.5;
}
.training-section-item li:before,
.training-list li:before {
  content: "・";
  position: absolute;
  left: 0;
  color: var(--color-text-body);
  font-weight: bold;
}

.training-fee-note {
  font-size: var(--font-size-base);
  color: var(--color-text-body);
  margin: 0;
}
/*---流れセクション---*/
.flow-container{
  margin: var(--spacing-lg) auto;
  text-align: center;
}
/* 費用セクション - バリアフリーページスタイル準拠 */
.training-cost-item {
  width: 100%;
  max-width: 700px;
  margin: var(--spacing-lg) auto;
  padding: 20px 40px;
  border: solid 1px var(--color-primary);
  border-radius: 5px;
}

.training-cost-item dl {
  display: grid;
  grid-template-columns: 100px 1fr;
  align-items: center;
  margin: 0;
}

.training-cost-item dt {
  display: inline-block;
  padding: 15px 20px;
  font-size: var(--font-size-large);
  color: var(--color-text-white);
  background-color:#0e857a;
  border-radius: 10px;
  font-weight: bold;
  line-height: 1;
  text-align: center;
}

.training-cost-item dd {
  font-size: var(--font-size-base);
  color: var(--color-text-dark);
  margin: 0;
  padding-left: 20px;
}

/* ========================================
 * Dispatch Section (講師派遣)
 * ======================================== */

.dispatch-section {
  margin: 0 auto;
  min-height: 500px;
  /* 前面から順に指定: グラデーション → service-instructor.jpg (前) → dispatch-bg.png (後) */
  background-image:
    linear-gradient(to right, white 0%, rgba(255, 255, 255, 0.9) 5%, rgba(255, 255, 255, 0.6) 15%, rgba(255, 255, 255, 0.2) 25%, transparent 35%, transparent 100%),
    url('../images/optimized/service-instructor.jpg'),
    url('../images/optimized/dispatch-bg.png');
  background-size:
    clamp(40%, 55vw, 60%) auto,
    clamp(40%, 55vw, 60%) auto,
    35% auto;
  background-position:
    right -10px center,
    right -10px center,
    15% center;
  background-repeat: no-repeat;
  padding: var(--spacing-xxl) 0;
  position: relative;
  overflow: hidden;
}


.dispatch-container {
  max-width: var(--container-max-width);
  display: grid;
  align-items: center;
  position: relative;
  z-index: 1;
}

.dispatch-content {
  padding-left: 18%;
  width: 50%;
}

.dispatch-image {
  width: 100%;
  height: 100%;
  border-radius: var(--radius-lg);
}

.dispatch-header {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-lg);
}

.dispatch-title {
  font-size: clamp(28px, 3.5vw, 32px);
  font-weight: var(--font-weight-medium);
  font-family: var(--font-family-heading);
  color: #0e857a;
  margin: 0;
  letter-spacing: var(--letter-spacing-heading);
  /* display/flex-direction は共通スタイルで定義済み */
}

.dispatch-lead {
  font-size: calc(var(--font-size-base) * 1.2);
  font-family: var(--font-family-heading);
  font-weight: 700;
  color: var(--color-text-body);
  line-height: 1.8;
  margin-bottom: var(--spacing-md);
}

.dispatch-description {
  font-size: var(--font-size-base);
  color: var(--color-text-body);
  line-height: 1.8;
  margin-bottom: var(--spacing-lg);
}

.dispatch-btn {
  display: inline-block;
  background-color:#0e857a;
  color: var(--color-text-white);
  padding: 8px 24px;
  border-radius: 20px;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  margin-bottom: var(--spacing-sm);
}

.dispatch-btn:hover {
  background-color: var(--color-accent-turquoise);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(var(--shadow-color-primary), var(--opacity-30));
}

.dispatch-note {
  font-size: var(--font-size-small);
  color: var(--color-text-body);
  margin-top: var(--spacing-md);
  line-height: 1.6;
}

.dispatch-btn .service-note {
  font-size: 0.75em;
  font-weight: normal;
  margin-left: 0.5em;
}

/* ========================================
 * Online Seminar Section (オンラインセミナー)
 * ======================================== */

.online-section {
  background-image:
          linear-gradient(to left, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 10%, rgba(255, 255, 255, 0.3) 35%, rgba(255, 255, 255, 0) 50%),
          url('../images/optimized/service-online.jpg');
  background-size: clamp(50%, 70vw, 50%) auto;
  background-position: -10% center;
  background-repeat: no-repeat;
  min-height: 500px;
  /*padding: var(--spacing-xxl) 0;*/
  position: relative;
  overflow: hidden;
}

.online-container {
  max-width: var(--container-max-width);
  margin: 0 auto;
  position: relative;
  z-index: 1;
  background-image: url("../images/optimized/online-bg.png");
  background-position: 110% 20px;
  background-repeat: no-repeat;
  background-size: 40% auto;
  padding: 0px 0 0 0;
  }

.online-header {
  position: relative;
  display: flex;
  align-items: center;
}

.online-header-content {
  width: 55%;
  margin-left: auto;
  padding: var(--spacing-xl) 0 0 0;
}

.online-content {
  margin-top: var(--spacing-md);
  padding-bottom: var(--spacing-xl);
}

.online-title {
  font-size: clamp(28px, 3.5vw, 40px);
  font-weight: var(--font-weight-medium);
  font-family: var(--font-family-heading);
  color: #0e857a;
  margin: 0 0 23px 0;
  letter-spacing: 0.1em;
  /* display/flex-direction は共通スタイルで定義済み */
}

.online-lead {
  font-size: calc(var(--font-size-base) * 1.2);
  font-weight: 700;
  color: var(--color-text-body);
  line-height: 1.8;
  margin: 0;
}

.online-description {
  font-size: var(--font-size-base);
  color: var(--color-text-body);
}
.elearning-simulation-wrapper{
  background-image: url('../images/simulation-section_bg.svg');
  background-size: 50% auto;
  background-repeat: no-repeat;
  background-position: left center;
}
/* ========================================
 * Simulation Experience Section (障害者模擬体験)
 * TOP.svg準拠: 単一カラムレイアウト
 * ======================================== */

.simulation-section {
  padding: 0 0 var(--spacing-xxl) 0;
  position: relative;
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(-50vw + 50%);
 }
.simulation-section:before{
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100vw;
    height: 100%;
   z-index: 0;
}
.simulation-section:after{
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100vw;
    height: 100%;
    background-image: url('../images/simulation-section_bt_bg.svg');
    background-size: 20% auto;
    background-repeat: no-repeat;
    background-position: 45% bottom;
    z-index: 0;
}
.simulation-container {
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.simulation-header {
  margin-bottom: 0;
  position: relative;
  min-height: 400px;
  display: flex;
  align-items: center;
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 10%, rgba(255, 255, 255, 0.3) 35%, rgba(255, 255, 255, 0) 50%),
    url('../images/optimized/service-simulation.jpg');
  background-size: clamp(30%, 45vw, 45%) auto;
  background-position: right center;
  background-repeat: no-repeat;
}

.simulation-header-content {
  max-width: calc(var(--container-max-width) * 0.6);
  width: 60%;
  padding: var(--spacing-xl) 0;
  padding-left: 15%;
}

.simulation-title {
  font-size: clamp(28px, 3.5vw, 40px);
  font-weight: var(--font-weight-medium);
  font-family: var(--font-family-heading);
  color: #0e857a;
  margin: 0 0 23px 0;
  letter-spacing: 0.1em;
  /* display/flex-direction は共通スタイルで定義済み */
}

.simulation-lead {
  font-size: calc(var(--font-size-base) * 1.2);
  color: var(--color-text-body);
  line-height: 1.8;
  margin: 0;
  font-weight: 700;
}

.simulation-sections {
  display: flex;
  flex-direction: column;
  gap: 35px;
  margin: 0 auto 1rem auto;
  max-width: var(--container-max-width);
  width: 100%;
  padding-right:30%;
  background-image: url('../images/simulation-container_middle_bg.svg');
  background-size: 35% auto;
  background-repeat: no-repeat;
  background-position: 80% 10%;
}
.simulation-section-item h3 {
  color: #0e857a;
  font-size: var(--font-size-large);
  font-weight: var(--font-weight-bold);
  font-family: var(--font-family-heading);
  margin: 0 0 var(--spacing-xs) 15rem;
  line-height: 1.4;
  letter-spacing: 0.06em;
}
.simulation-section-item h3.cost{
  background-color: var(--color-primary);
  color: var(--color-text-white);
  border-radius: 20px;
  width: 3em;
  text-align: center;
}
.simulation-section-item p {
  padding-left: 15rem;
  font-size: var(--font-size-base);
  color: var(--color-text-body);
  line-height: 1.8;
  margin: 0;
}

/* ========================================
 * 研修動画作成Section
 * ======================================== */

.elearning-section {
  background-image: linear-gradient(to left, white 0%, rgba(255, 255, 255, 0.5) 15%, rgba(255, 255, 255, 0) 30%), url('../images/optimized/service-elearning.jpg');
  background-size: clamp(40%, 55vw, 60%) auto;
  background-position: left top;
  background-repeat: no-repeat;
  padding: var(--spacing-sm) 0;
  position: relative;
  overflow: hidden;
  margin:  var(--spacing-xl) 0 0 0;
}

.elearning-container {
  margin-left: 55%;
  margin-right: var(--spacing-xl);
  max-width: var(--container-max-width);
  display: grid;
  align-items: center;
  position: relative;
  z-index: 1;
}

.elearning-content {
  grid-column: 2;
  background-image: url("../images/optimized/elearning-bg.svg");
  background-repeat: no-repeat;
  background-size: 70% auto;
  background-position: center bottom;
}

.elearning-image {
  grid-column: 1;
  grid-row: 1;
  width: 100%;
  height: 100%;
  border-radius: var(--radius-lg);
}

.elearning-header {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-lg);
}

.elearning-title {
  font-size: clamp(28px, 3.5vw, 32px);
  font-weight: var(--font-weight-medium);
  font-family: var(--font-family-heading);
  color: #0e857a;
  margin: 0;
  letter-spacing: var(--letter-spacing-heading);
}

.elearning-title::before {
  background-image: url('../images/footer-icons/elearning.png');
  content: '';
  display: block;
  width: 60px;
  height: 60px;
  margin-bottom: 6px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.elearning-lead {
  font-size: calc(var(--font-size-base) * 1.2);
  margin-bottom: var(--spacing-md);
}

.elearning-divider {
  margin-top: var(--spacing-lg);
}

.elearning-btn {
  display: inline-block;
  background-color: #0e857a;
  color: var(--color-text-white);
  padding: 8px 24px;
  border-radius: 20px;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  margin-bottom: var(--spacing-sm);
}

.elearning-examples {
  font-size: var(--font-size-base);
  color: var(--color-text-body);
  line-height: 1.8;
  margin-bottom: var(--spacing-lg);
}

.elearning-note {
  font-size: var(--font-size-small);
  color: var(--color-text-body);
  margin-top: var(--spacing-md);
  line-height: 1.6;
}

/* ========================================
 * YouTube Section
 * ======================================== */

.youtube-section {
  padding: var(--spacing-xxl) 0;
}

.youtube-header {
  text-align: center;
  margin-bottom: var(--spacing-xl);
}

.youtube-title {
  font-size: clamp(28px, 3.5vw, 32px);
  font-weight: var(--font-weight-medium);
  font-family: var(--font-family-heading);
  color: #333333;
  margin: 0;
  text-align: center;
  background-color: var(--color-bg-beige);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-sm);
  letter-spacing: var(--letter-spacing-heading);
  background-image: url('../images/footer-icons/youtube.png');
  background-repeat: no-repeat;
  background-position: center 10px;
  padding: 73px 20px 20px 20px;
}

.youtube-grid {
  max-width: 80%;
  margin: 0 auto;
  padding: 0 var(--container-padding);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-lg);
  text-align: center;
}

.youtube-card {
  background-color: var(--color-bg-white);
  overflow: hidden;
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.youtube-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.youtube-thumbnail {
  position: relative;
  aspect-ratio: 16 / 9;
  background-color: var(--color-gray-200);
  display: flex;
  align-items: center;
  justify-content: center;
}

.youtube-play-button {
  cursor: pointer;
  transition: transform var(--transition-base);
}

.youtube-card:hover .youtube-play-button {
  transform: scale(1.1);
}

.youtube-card-content {
  padding: var(--spacing-md);
}

.youtube-card-title {
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-dark);
  margin-bottom: var(--spacing-xs);
  line-height: 1.4;
  letter-spacing: var(--letter-spacing-base);
}

.youtube-card-description {
  font-size: clamp(11px, 1vw, 12px);
  color: var(--color-text-body);
  line-height: 1.6;
  margin: 0;
  letter-spacing: var(--letter-spacing-base);
}

/* YouTube Coming Soon */
.youtube-coming-soon {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  background-color: #f5f5f5;
  width: 100%;
  color: #000;
}

.coming-soon-text {
  font-size: 1.5rem;
  font-weight: bold;
  color: #333;
}

.coming-soon-subtext {
  font-size: 0.9rem;
  color: #888;
  margin-top: 0.5rem;
}

/* ========================================
 * Services Section
 * ======================================== */

.services-section {
  padding: var(--spacing-xxl) 0;
}

/* Responsive styles moved to responsive.css */