/*--------------------------------------------------------------------------------------
Theme Name: k-day
Theme URI: 
Author URI: http://goigi.com/
Description: 
Author: GOIGI
Version: 
----------------------------------------------------------------------------------------
----------------------------------------------------------------------------------------*/
:root{
  --brand:#002c5f;
  --brand-2:#0c2d57;
  --accent:#ff5722;
  --text:#333;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family: 'Mukta Mahee', sans-serif;
  color:var(--text);
  margin:0;
  line-height:1.6;
  background:#fff;
}
.nav-menu .menu {
  display: flex;
  gap: 20px; /* Space between menu items */
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-menu .menu li {
  display: inline-block; /* Make each list item inline */
}

.nav-menu .menu li a {
  text-decoration: none;
  color: #000; /* Adjust color */
  font-weight: 500;
  text-transform: uppercase;
}
section.hipaa-notice {
    margin-top: 50px;
    margin-bottom: 50px;
}



/* ===== Header ===== */
header {
  background: #fff; /* Optional */
  padding: 10px 0;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

header .container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

header .logo img {
  max-height: 60px;
}

header .nav-menu a {
  margin-left: 20px;
  text-decoration: none;
  color: #333;
  font-weight: 500;
  transition: color 0.3s ease;
}

header .nav-menu a:hover {
  color: #f26522; /* Example hover color */
}
/* Base */
.site-header {
  background: #fff;
  padding: 10px 0;
  border-bottom: 1px solid #eee;
}
.logo img {
  max-height: 50px;
}
.nav-menu .menu {
  display: flex;
  gap: 20px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.menu-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  width: 30px;
  height: 25px;
  background: none;
  border: none;
  cursor: pointer;
}
.menu-toggle .bar {
  height: 3px;
  width: 100%;
  background: #333;
  margin: 4px 0;
  border-radius: 2px;
  transition: all 0.3s ease;
}

/* Desktop */
@media (min-width: 769px) {
  .nav-panel {
    display: flex !important;
    align-items: center;
    gap: 20px;
  }
  .translator {
    margin-left: 20px;
  }
}

/* Mobile */
@media (max-width: 768px) {
  .nav-panel {
    display: none;
    flex-direction: column;
    position: absolute;
    top: 60px;
    right: 15px;
    background: #fff;
    width: 250px;
    border: 1px solid #ddd;
    padding: 15px;
    z-index: 999;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
  }
  .nav-panel.active {
    display: flex;
  }
  .nav-menu .menu {
    flex-direction: column;
    gap: 15px;
  }
  .translator {
    margin-top: 15px;
  }
  .menu-toggle {
    display: flex;
  }
}
.menu-toggle {
  display: block !important;   /* force visible */
  position: relative;          /* keep it inside header flow */
  width: 40px;
  height: 30px;
  cursor: pointer;
  background: transparent;
  border: none;
  z-index: 9999; /* stay above */
}

.menu-toggle .bar {
  display: block;
  width: 100%;
  height: 4px;
  background-color: #000; /* change to #fff if dark header */
  margin: 6px 0;
  border-radius: 2px;
}
/* Default: hidden (desktop) */
button.menu-toggle {
    display: none !important;
}

/* Mobile only */
@media (max-width: 768px) {
  button.menu-toggle {
    display: flex !important; /* show on mobile */
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 30px;
    background: none;
    border: none;
    cursor: pointer;
    z-index: 1001;
  }

  button.menu-toggle .bar {
    display: block;
    width: 28px;
    height: 3px;
    background: #000; /* change to #fff if dark background */
    margin: 4px 0;
    border-radius: 2px;
  }
}

/* ===== Hero ===== */
.hero{
  position:relative; height:85vh; overflow:hidden;
  background:url('images/banner.jpg') center/cover no-repeat fixed;
  isolation:isolate;
}
.hero::before{
  content:""; position:absolute; inset:0;
  background:radial-gradient(80% 60% at 50% 40%, rgba(0,44,95,.55), rgba(0,0,0,.65));
  z-index:0;
}
/* subtle ken-burns */
.hero .hero-bg{ position:absolute; inset:0; background:inherit; transform:scale(1); animation:kenburns 14s ease-in-out infinite alternate; z-index:-1 }
@keyframes kenburns{ from{transform:scale(1)} to{transform:scale(1.08)} }

.hero-content{ position:absolute; inset:0; display:grid; place-items:center; text-align:center; color:#fff; padding:0 1rem }
.hero-title{ font-size:clamp(2rem, 5vw, 3.2rem); font-weight:800; letter-spacing:.5px; opacity:0; transform:translateY(10px); animation:fadeUp .9s .2s forwards }
.hero-sub{ max-width:820px; opacity:0; transform:translateY(10px); animation:fadeUp .9s .5s forwards }
.hero-cta{ margin-top:22px; display:flex; gap:14px; justify-content:center; opacity:0; transform:translateY(10px); animation:fadeUp .9s .8s forwards }

/* Mobile adjustments */
@media (max-width: 768px) {
  .hero-cta {
    flex-direction: column; /* stack vertically */
    align-items: center;    /* center items */
    gap: 10px;              /* smaller spacing */
  }
  .hero-cta a,
  .hero-cta button {
    width: 100%;        /* full width on mobile */
    max-width: 280px;   /* optional limit so not too wide */
    text-align: center;
  }
}
@keyframes fadeUp{ to{ opacity:1; transform:translateY(0)} }

.btn-pill{
  border:none; border-radius:999px; padding:14px 28px; font-weight:700; letter-spacing:.2px;
  transition:transform .25s ease, box-shadow .25s ease, background .25s ease, color .25s ease;
}
.btn-primary-pill{ background:#fff; color:var(--brand) }
.btn-primary-pill:hover{ transform:translateY(-2px); box-shadow:0 10px 22px rgba(255,255,255,.15); background:#f5f7ff }
.btn-outline-pill{ background:transparent; color:#fff; outline:2px solid rgba(255,255,255,.6) }
.btn-outline-pill:hover{ transform:translateY(-2px); background:rgba(255,255,255,.1) }

/* floating accents */
.particle{ position:absolute; width:10px; height:10px; border-radius:50%; background:rgba(255,255,255,.7); filter:blur(.5px); animation:floatY 8s ease-in-out infinite }
.p1{ left:8%; top:65% }
.p2{ left:18%; top:25%; animation-duration:10s }
.p3{ right:12%; top:35%; animation-duration:12s }
.p4{ right:20%; top:70%; animation-duration:9s }
@keyframes floatY{ 0%,100%{ transform:translateY(0)} 50%{ transform:translateY(-18px)} }

/* ===== Icon Section ===== */
.icon-section{ text-align:center; background:#fff }
.icon-header{ background:var(--brand); color:#fff; padding:70px 20px }
.icon-header h2{ font-size:clamp(1.6rem, 3vw, 2.1rem); font-weight:800; margin:0 0 16px }
.icon-header .btn-primary{
  background:#fff; color:var(--brand); padding:14px 35px; border-radius:50px; font-weight:800; text-decoration:none;
  display:inline-block; transition:all .3s
}
.icon-header .btn-primary:hover{ background:#f1f1f1; transform:translateY(-2px) }
.icon-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:28px; padding:42px 20px; max-width:1100px; margin:auto;
}
@media(max-width:992px){ .icon-grid{ grid-template-columns:repeat(3,1fr)} }
@media(max-width:680px){ .icon-grid{ grid-template-columns:repeat(2,1fr)} }
.icon-box{
  aspect-ratio:1/1; display:grid; place-items:center; font-size:40px; color:var(--brand);
  background:#ffffff; border-radius:16px; box-shadow:0 10px 30px rgba(0,0,0,.06);
  transition:transform .25s ease, background .25s ease, color .25s ease;
  position:relative; overflow:hidden;
}
.icon-box::after{ content:""; position:absolute; inset:auto 0 0 0; height:0; background:linear-gradient( to top, var(--brand), transparent ); opacity:.1; transition:height .3s }
.icon-box:hover{ transform:translateY(-8px); color:#fff; background:linear-gradient(135deg, var(--brand), var(--brand-2)) }
.icon-box:hover::after{ height:100% }

/* ===== Info Section ===== */
.info-section{ text-align:center; padding:70px 20px }
.info-section h2{ font-weight:800; margin-bottom:8px }
.info-section p{ font-size:1.05rem; color:#555 }

/* ===== Korean Support ===== */
.korean-support{ background:var(--brand-2); color:#fff; overflow:hidden; position:relative }
.korean-support .ribbon{ position:absolute; right:-105px; top:45px; transform:rotate(45deg); background:#fff; color:var(--brand-2); padding:8px 80px; font-weight:800; letter-spacing:.5px }
.korean-support img{ border-radius:14px; box-shadow:0 16px 40px rgba(0,0,0,.2) }

/* ===== Cost Section ===== */
.cost-section .card{
  border:0; border-radius:16px; overflow:hidden; box-shadow:0 12px 30px rgba(0,0,0,.08);
}
.cost-section .card img{ object-fit:cover; width:100%; height:100% }

/* ===== CTA Banner ===== */
.cta-wrap{ background:url('images/cta.png') center/cover no-repeat fixed }
.cta-section{ color:#fff; text-align:center; padding:90px 24px; backdrop-filter:brightness(.9) }
.cta-glass{ background:rgba(0,0,0,.45); display:inline-block; padding:26px 30px; border-radius:18px; box-shadow:0 14px 36px rgba(0,0,0,.25) }

/* ===== K-day PACE (Features) ===== */
.kday-pace{ max-width:1100px; margin:0 auto; padding:70px 20px }
.section-header{ text-align:center; margin-bottom:40px }
.section-header h2{ font-size:36px; font-weight:800; position:relative }
.section-header h2::after{ content:""; display:block; width:56px; height:3px; background:#ccc; margin:14px auto 0 }
.feature-row h3{ font-weight:700; margin-bottom:8px }
.feature-row p{ color:#555 }
.feature-row img{ width:100%; border-radius:14px; box-shadow:0 12px 30px rgba(0,0,0,.08) }

/* ===== Contact ===== */
.contact-section{ background:var(--brand-2); color:#fff }
.contact-form{ border-radius:14px }
.contact-form input, .contact-form textarea{ border-radius:10px; padding:14px; border:1px solid #ccd; transition:all .25s }
.contact-form input:focus, .contact-form textarea:focus{ border-color:var(--brand); box-shadow:0 0 0 4px rgba(0,44,95,.15) }
.contact-form .btn{ border-radius:10px; font-weight:800 }
.contact-info h3{ font-weight:800 }

/* Footer */
footer{ text-align:center; padding:16px; background:#f8f8f8; font-size:14px }

/* Accessibility: respect reduced motion */
@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important }
  .hero{ background-attachment:scroll }
}
/* Hero */
.hero{
  background:url('images/banner.jpg') center/cover no-repeat; height:80vh;
  display:flex; flex-direction:column; justify-content:center; align-items:center;
  color:#fff; text-align:center; position:relative;
}
.hero::before{
  content:""; position:absolute; inset:0;
  background:rgba(0,51,102,0.65);
}
.hero-content{
  position:relative; z-index:2; padding:0 20px;
}
.hero-content img{ width:140px; margin-bottom:20px; }
.hero-content h1{ font-size:clamp(2rem,5vw,3rem); font-weight:700; }

/* Section Base */
.section{ padding:80px 20px; text-align:center; }
.section h2{ font-weight:700; margin-bottom:18px; font-size:2.2rem; }
.section p{ max-width:800px; margin:auto; font-size:1.05rem; }

/* Background Variants */
.light-bg{ background:var(--light-bg); }
.blue-bg{ background:var(--brand-2); color:#fff; }

/* Two Column Layout */
.two-column{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:40px; text-align:left; }
.two-column img{ width:100%; max-width:420px; border-radius:12px; box-shadow:0 8px 24px rgba(0,0,0,.15); }
.two-column .text{ max-width:500px; }

/* List */
.two-column ul{ padding-left:20px; }
.two-column li{ margin-bottom:8px; }

/* CTA */
.cta{
  background:var(--brand); color:#fff; text-align:center; padding:70px 20px;
}
.cta h2{ font-size:2rem; margin-bottom:14px; }
.cta button{
  background:#fff; color:var(--brand); border:none; padding:14px 28px; border-radius:50px;
  font-weight:700; transition:.3s;
}
.cta button:hover{ background:#f1f1f1; transform:translateY(-3px); }

/* Contact */
.contact-form{ max-width:600px; text-align:left; }
.contact-form input, .contact-form textarea{
  width:100%; padding:14px; margin-bottom:14px; border:1px solid #ccc; border-radius:8px;
}
.contact-form button{
  background:var(--brand-2); color:#fff; padding:14px 24px; border:none; border-radius:8px;
}
.contact-form input, .contact-form textarea {
  width: 100%;
  padding: 14px;
  margin-bottom: 14px;
  border: 1px solid #ccc;
  border-radius: 8px;
}

.contact-form button {
  background: var(--brand-2);
  color: #fff;
  padding: 14px 24px;
  border: none;
  border-radius: 8px;
  font-weight: bold;
  width: 100%;
  transition: 0.3s;
}

.contact-form button:hover {
  background: #005bb5;
}
button.smtbtn {
    background: #3368f2 !important;
}
textarea.wpcf7-form-control.wpcf7-textarea.form-control {
  height: 150px;
}
textarea.wpcf7-form-control.wpcf7-textarea {
    height: 60px;
}
.office-info h4 {
  font-weight: 700;
  margin-top: 15px;
}

.office-info a {
  color: var(--brand-2);
  text-decoration: none;
}
/* Contact Page */
.join-section {
  text-align: center;
  padding: 30px 15px;
}
.join-section p {
  max-width: 700px;
  margin: 10px auto;
  color: #555;
  font-size: 1rem;
}
.contact-section {
  padding: 50px 15px;
}
.contact-container {
  display: flex;
/*   flex-wrap: wrap; */
  gap: 30px;
}
.contact-form {
  flex: 1 1 45%;
}
.contact-form input,
.contact-form textarea {
  width: 100%;
  padding: 12px;
  margin-bottom: 12px;
  border: 1px solid #ccc;
  border-radius: 6px;
}
.contact-form button {
  background: var(--brand);
  color: #fff;
  padding: 14px;
  border: none;
  border-radius: 6px;
  font-weight: bold;
  width: 100%;
}
.contact-info {
  flex: 1 1 45%;
}
.contact-info h4 {
  font-weight: 700;
  margin-bottom: 10px;
}
.contact-info p {
  margin-bottom: 12px;
}
.contact-info strong {
  color: var(--brand-2);
}
.map-section iframe {
  width: 100%;
  height: 400px;
  border: 0;
}
/* Hero Section */
.hero-section {
  background: linear-gradient(135deg, #002147, #0a3d62);
  color: #fff;
  text-align: center;
  padding: 80px 20px;
}
.hero-section h1 {
  font-size: 48px;
  animation: fadeInUp 1s ease-in-out;
}
.hero-section p {
  font-size: 18px;
  margin-top: 15px;
}

/* Intro Section */
.services-intro {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  margin: 80px 0;
}
.services-intro img {
  width: 100%;
  border-radius: 12px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}
.intro-text {
  flex: 1;
}
.intro-image {
  flex: 1;
  text-align: center;
}

/* Our Services */
.our-services {
  text-align: center;
  margin: 80px 0;
}
.our-services ul {
  text-align: left;
  max-width: 800px;
  margin: 20px auto;
}
.our-services li {
  font-size: 18px;
  margin: 10px 0;
}
.service-icons {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 30px;
}
.service-icons img {
  width: 60px;
  height: 60px;
  transition: transform 0.3s ease;
}
.service-icons img:hover {
  transform: scale(1.2);
}

/* Eligibility */
.eligibility {
  background: #002147;
  color: #fff;
  text-align: center;
  padding: 60px 20px;
}
.eligibility ul {
  list-style: none;
  padding: 0;
}
.eligibility li {
  font-size: 18px;
  margin: 10px 0;
}

/* Service Area */
.service-info {
  display: flex;
  justify-content: space-between;
  gap: 30px;
  flex-wrap: wrap;
  margin: 50px 0;
}
.service-info .address {
  flex: 1;
}
.service-info .map {
  flex: 1;
}

/* Animations */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(40px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.fade-in-up {
  opacity: 0;
  animation: fadeInUp 1s ease forwards;
}
.fade-in-up.delay-1 {
  animation-delay: 0.3s;
}
.fade-in-up.delay-2 {
  animation-delay: 0.6s;
}

.slide-in-left {
  opacity: 0;
  transform: translateX(-100px);
  animation: slideInLeft 1s ease forwards;
}
@keyframes slideInLeft {
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.slide-in-right {
  opacity: 0;
  transform: translateX(100px);
  animation: slideInRight 1s ease forwards;
}
@keyframes slideInRight {
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.zoom-in {
  opacity: 0;
  transform: scale(0.8);
  animation: zoomIn 1s ease forwards;
}
@keyframes zoomIn {
  to {
    opacity: 1;
    transform: scale(1);
  }
}
.servicesicon img {
  width: 100px;
  transition: transform 0.3s ease;
}

.servicesicon img:hover {
  transform: scale(1.1);
}
/* Service Area Section */
.service-area {
    padding: 60px 0;
}
.zip-box {
    background: #f1f1f1;
    padding: 20px;
    border-radius: 6px;
    font-size: 16px;
    line-height: 1.8;
    max-width: 398px;
    word-break: break-word;
}
.map iframe {
    width: 100%;
    height: 420px;
    border: none;
    border-radius: 6px;
}

/* Location Info */
.service-area p {
    margin-top: 15px;
    font-size: 16px;
}

/* Tour Reservation Section */
.reservation-section {
    padding: 60px 0;
    background: #f9f9f9;
}
.reservation-section h2 {
    font-size: 30px;
    font-weight: bold;
    text-align: center;
    margin-bottom: 40px;
}
.form-control {
    margin-bottom: 15px;
    padding: 12px;
    font-size: 16px;
    border: 1px solid #ccc;
    border-radius: 6px;
}
textarea.form-control {
    resize: none;
}
.form-check {
    margin: 15px 0;
}
.btn-submit {
    background: #000;
    color: #fff;
    padding: 14px;
    width: 100%;
    font-size: 18px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: 0.3s ease;
}
.btn-submit:hover {
    background: #333;
}

/* Contact Info Right Column */
.reservation-section .col-md-6 p {
    font-size: 16px;
    margin-bottom: 15px;
}
.contact-box {
    background: #0d1b39;
    color: #fff;
    padding: 50px 0;
}

.contact-item {
    text-align: center;
}

.contact-card {
    background: rgba(255, 255, 255, 0.05);
    padding: 20px;
    border-radius: 10px;
    transition: transform 0.3s ease, background 0.3s ease;
}

.contact-card:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: translateY(-5px);
}

.contact-card i {
    font-size: 30px;
    color: #fff;
    margin-bottom: 15px;
    display: block;
}

.contact-card h5 {
    font-size: 18px;
    margin-bottom: 10px;
    font-weight: bold;
}

.contact-card p {
    font-size: 16px;
    line-height: 1.6;
    margin: 0;
}

/* Responsive */
@media (max-width: 768px) {
    .contact-card {
        margin-bottom: 20px;
    }
}


/* Responsive Design */
@media (max-width: 768px) {
    .zip-box {
        max-width: 100%;
    }
    .map iframe {
        height: 250px;
    }
    .reservation-section h2 {
        font-size: 24px;
    }
    .btn-submit {
        font-size: 16px;
    }
}
.footer-dark {
  background: var(--brand-2);
  color: #fff;
  padding: 30px 15px;
  text-align: center;
}
.footer-dark p {
  margin: 5px 0;
}
footer {
    text-align: center;
    padding: 16px;
    background: #f8f8f8;
    font-size: 14px;
}
footer {
  text-align: center;
  font-size: 14px;
  color: #333;
  padding: 15px 0;
  background: #f5f5f5;
}

footer a {
  color: #0073e6;
  text-decoration: none;
  margin: 0 5px;
}

footer a:hover {
  text-decoration: underline;
}
p {
    font-family: 'Mukta Mahee';
    font-size: 16px;
}
.zip-box {
  display: grid;
  grid-template-columns: repeat(5, 1fr); /* exactly 5 per row */
  gap: 8px 16px; /* row and column spacing */
  font-family: Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
}

.zip-box span {
  text-align: center; /* center each code */
  display: block;
}


@media (max-width: 768px) {
  .contact-container {
    flex-direction: column;
  }
}