:root {
   --primary: #1e2241;
   --navy-dark: #1b1f3a;
   --navy-mid: #262b54;
   --accent: #88f001;
   --accent-green: #528820;
   --white: #fdfdfd;
   --white-pure: #fff;
   --text: #333;
   --text-light: #666;
   --light-bg: #f8f8f9;
   --dark: #1e2241;
}

* {
   box-sizing: border-box;
   margin: 0;
   padding: 0;
}
body {
   font-family: "Sarabun", "Segoe UI", Tahoma, "Noto Sans Thai", "Microsoft Sans Serif", sans-serif;
   color: var(--text);
   line-height: 1.6;
   background: var(--white);
}

/* Headings use Prompt font for both Thai and English */
h1, h2, h3, h4, h5, h6 {
   font-family: "Prompt", "Sarabun", "Segoe UI", "Noto Sans Thai", sans-serif;
   font-weight: 600;
}

/* Layout */
.container {
   max-width: 1100px;
   margin: 0 auto;
   padding: 0 20px;
}
.grid-3 {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
   gap: 2rem;
}
.split-layout {
   display: flex;
   gap: 4rem;
   flex-wrap: wrap;
}
.split-layout > * {
   flex: 1;
   min-width: 300px;
}

/* Components */
.btn {
   display: inline-block;
   padding: 10px 20px;
   border-radius: 4px;
   text-decoration: none;
   font-weight: 600;
   transition: 0.3s;
}
.btn-primary {
   background: var(--primary);
   color: var(--white);
}
.btn-primary:hover {
   background: #004494;
}
.btn-outline {
   border: 2px solid var(--white);
   color: var(--white);
}
.btn-outline:hover {
   background: var(--white);
   color: var(--primary);
}
.btn-lang {
   font-weight: bold;
   color: var(--navy-dark);
   text-decoration: none;
   border: 1px solid var(--navy-dark);
   padding: 5px 10px;
   border-radius: 4px;
   transition: 0.3s;
}
.btn-lang:hover {
   background: var(--navy-dark);
   color: var(--white);
}
.bg-light {
   background: var(--light-bg);
}

/* Header */
header {
   background: var(--navy-dark);
   box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
   position: sticky;
   top: 0;
   z-index: 100;
}
.navbar {
   display: flex;
   justify-content: space-between;
   align-items: center;
   height: 55px;
}
.logo img {
   height: 40px;
   width: auto;
   object-fit: contain;
   display: block;
}

/* Hamburger Menu (hidden on desktop) */
.hamburger {
   display: none;
   flex-direction: column;
   cursor: pointer;
   padding: 10px;
   gap: 5px;
}
.hamburger span {
   width: 25px;
   height: 3px;
   background: var(--white);
   border-radius: 3px;
   transition: 0.3s;
}

.nav-links {
   display: flex;
   list-style: none;
   gap: 20px;
}
.nav-links a {
   text-decoration: none;
   color: var(--white);
   font-weight: 500;
   transition: 0.3s;
}
.nav-links a:hover,
.nav-links a.active {
   color: var(--accent);
}
.btn-lang {
   font-weight: bold;
   color: var(--white);
   text-decoration: none;
   border: 1px solid rgba(255, 255, 255, 0.3);
   padding: 5px 10px;
   border-radius: 4px;
   transition: 0.3s;
}
.btn-lang:hover {
   background: var(--accent);
   color: var(--navy-dark);
   border-color: var(--accent);
}

/* Hero */
.hero {
   background: linear-gradient(
      135deg,
      var(--navy-dark) 0%,
      var(--navy-mid) 50%,
      var(--primary) 100%
   );
   color: var(--white);
   padding: 6rem 0;
   text-align: center;
   position: relative;
   overflow: hidden;
}
.hero::before {
   content: "";
   position: absolute;
   top: -50%;
   right: -10%;
   width: 400px;
   height: 400px;
   background: radial-gradient(circle, var(--accent) 0%, transparent 70%);
   opacity: 0.15;
   border-radius: 50%;
}

/* Hero with image - add this class to section to enable image background */
.hero.hero-image {
   background:
      linear-gradient(rgba(30, 34, 65, 0.5), rgba(38, 43, 84, 0.4)),
      url("/images/hero-home.jpg");
   background-size: cover;
   background-position: center;
   background-attachment: fixed;
   padding: 8rem 0;
}

/* Extra bottom margin for hero image on inner pages */
.hero.hero-image[data-image="services"],
.hero.hero-image[data-image="case-studies"],
.hero.hero-image[data-image="contact"] {
   margin-bottom: 3rem;
}
.hero.hero-image::before {
   display: none;
}

/* Size control via data-size attribute */
.hero.hero-image[data-size="small"] {
   padding: 5rem 0;
}
.hero.hero-image[data-size="medium"] {
   padding: 8rem 0;
}
.hero.hero-image[data-size="large"] {
   padding: 10rem 0;
}
.hero.hero-image[data-size="xlarge"] {
   padding: 12rem 0;
}

/* Overlay brightness control - must come AFTER image rules for specificity */
.hero.hero-image[data-image="home"][data-overlay="light"] {
   background:
      linear-gradient(rgba(30, 34, 65, 0.3), rgba(38, 43, 84, 0.2)),
      url("/images/hero-home.jpg");
}
.hero.hero-image[data-image="home"][data-overlay="medium"] {
   background:
      linear-gradient(rgba(30, 34, 65, 0.5), rgba(38, 43, 84, 0.4)),
      url("/images/hero-home.jpg");
}
.hero.hero-image[data-image="home"][data-overlay="dark"] {
   background:
      linear-gradient(rgba(30, 34, 65, 0.8), rgba(38, 43, 84, 0.9)),
      url("/images/hero-home.jpg");
}

.hero.hero-image[data-image="services"][data-overlay="light"] {
   background:
      linear-gradient(rgba(30, 34, 65, 0.3), rgba(38, 43, 84, 0.2)),
      url("/images/hero-services.jpg");
}
.hero.hero-image[data-image="services"][data-overlay="medium"] {
   background:
      linear-gradient(rgba(30, 34, 65, 0.5), rgba(38, 43, 84, 0.4)),
      url("/images/hero-services.jpg");
}
.hero.hero-image[data-image="services"][data-overlay="dark"] {
   background:
      linear-gradient(rgba(30, 34, 65, 0.8), rgba(38, 43, 84, 0.9)),
      url("/images/hero-services.jpg");
}

.hero.hero-image[data-image="case-studies"][data-overlay="light"] {
   background:
      linear-gradient(rgba(30, 34, 65, 0.3), rgba(38, 43, 84, 0.2)),
      url("/images/hero-casestudies.jpg");
}
.hero.hero-image[data-image="case-studies"][data-overlay="medium"] {
   background:
      linear-gradient(rgba(30, 34, 65, 0.5), rgba(38, 43, 84, 0.4)),
      url("/images/hero-casestudies.jpg");
}
.hero.hero-image[data-image="case-studies"][data-overlay="dark"] {
   background:
      linear-gradient(rgba(30, 34, 65, 0.8), rgba(38, 43, 84, 0.9)),
      url("/images/hero-casestudies.jpg");
}

.hero.hero-image[data-image="contact"][data-overlay="light"] {
   background:
      linear-gradient(rgba(30, 34, 65, 0.3), rgba(38, 43, 84, 0.2)),
      url("/images/hero-contact.jpg");
}
.hero.hero-image[data-image="contact"][data-overlay="medium"] {
   background:
      linear-gradient(rgba(30, 34, 65, 0.5), rgba(38, 43, 84, 0.4)),
      url("/images/hero-contact.jpg");
}
.hero.hero-image[data-image="contact"][data-overlay="dark"] {
   background:
      linear-gradient(rgba(30, 34, 65, 0.8), rgba(38, 43, 84, 0.9)),
      url("/images/hero-contact.jpg");
}

/* Custom image support via data-image attribute */
.hero.hero-image[data-image="home"] {
   background:
      linear-gradient(rgba(30, 34, 65, 0.5), rgba(38, 43, 84, 0.4)),
      url("/images/hero-home.jpg");
}
.hero.hero-image[data-image="services"] {
   background:
      linear-gradient(rgba(30, 34, 65, 0.5), rgba(38, 43, 84, 0.4)),
      url("/images/hero-services.jpg");
}
.hero.hero-image[data-image="case-studies"] {
   background:
      linear-gradient(rgba(30, 34, 65, 0.5), rgba(38, 43, 84, 0.4)),
      url("/images/hero-casestudies.jpg");
}
.hero.hero-image[data-image="contact"] {
   background:
      linear-gradient(rgba(30, 34, 65, 0.5), rgba(38, 43, 84, 0.4)),
      url("/images/hero-contact.jpg");
}

.hero h1 {
   font-size: 2.5rem;
   margin-bottom: 1rem;
   text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}
.hero.hero-image h1 {
   font-size: 3rem;
}
.hero p {
   text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
}
.hero-btns {
   margin-top: 2rem;
   display: flex;
   gap: 1rem;
   justify-content: center;
}

/* Features */
.features {
   padding: 4rem 20px;
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
   gap: 2rem;
   text-align: center;
}
.feature-card {
   padding: 2rem;
   border: 1px solid #eee;
   border-radius: 8px;
   transition: 0.3s;
}
.feature-card:hover {
   box-shadow: 0 5px 20px rgba(136, 241, 1, 0.2);
   transform: translateY(-5px);
}
.icon {
   font-size: 2.5rem;
   margin-bottom: 1rem;
}

/* Image Gallery */
.image-gallery {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
   gap: 1.5rem;
   margin: 3rem 0;
}
.image-card {
   position: relative;
   border-radius: 12px;
   overflow: hidden;
   box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
   transition: 0.3s;
}
.image-card:hover {
   transform: scale(1.02);
   box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}
.image-card img {
   width: 100%;
   height: 250px;
   object-fit: cover;
}
.image-caption {
   position: absolute;
   bottom: 0;
   left: 0;
   right: 0;
   background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
   color: var(--white);
   padding: 1rem;
}
.image-caption h4 {
   margin-bottom: 0.25rem;
}
.image-caption p {
   font-size: 0.85rem;
   opacity: 0.9;
   margin: 0;
}

/* Feature Section with Image */
.feature-section {
   display: flex;
   gap: 3rem;
   align-items: center;
   margin: 4rem 0;
   flex-wrap: wrap;
}
.feature-section.image-right {
   flex-direction: row-reverse;
}
.feature-section .content {
   flex: 1;
   min-width: 300px;
}
.feature-section .image-side {
   flex: 1;
   min-width: 300px;
}
.feature-section img {
   width: 100%;
   border-radius: 12px;
   box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}
.feature-section h3 {
   color: var(--navy-dark);
   font-size: 1.8rem;
   margin-bottom: 1rem;
}
.feature-section p {
   color: var(--text-light);
   line-height: 1.8;
}

/* Services Preview */
.services-preview {
   padding: 4rem 0;
   text-align: center;
}
.service-item {
   background: var(--white);
   padding: 2rem;
   border-radius: 8px;
   box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
   transition: 0.3s;
}
.service-item:hover {
   transform: translateY(-3px);
   box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
}
.service-item a {
   color: var(--accent);
   text-decoration: none;
   font-weight: 600;
   display: inline-block;
   margin-top: 1rem;
}

/* Page Header */
.page-header {
   background: var(--light-bg);
   padding: 3rem 0;
   text-align: center;
   border-bottom: 1px solid #eee;
   margin-bottom: 3rem;
}
.page-header h1 {
   color: var(--navy-dark);
   margin-bottom: 0.5rem;
}

/* Content Sections */
.content-section {
   margin-bottom: 4rem;
}
.content-section h2 {
   color: var(--navy-dark);
   margin-bottom: 1rem;
   border-bottom: 2px solid var(--accent);
   padding-bottom: 10px;
   display: inline-block;
}
.content-section ul {
   margin-left: 20px;
   margin-top: 1rem;
}
.content-section li {
   margin-bottom: 0.5rem;
}

/* Forms */
.form-group {
   margin-bottom: 1.5rem;
}
.form-group label {
   display: block;
   margin-bottom: 0.5rem;
   font-weight: 600;
   color: var(--navy-dark);
}
.form-group input,
.form-group select,
.form-group textarea {
   width: 100%;
   padding: 10px;
   border: 1px solid #ddd;
   border-radius: 4px;
   font-family: inherit;
   transition: 0.3s;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
   outline: none;
   border-color: var(--accent);
   box-shadow: 0 0 0 3px rgba(136, 241, 1, 0.2);
}
.contact-info p {
   margin-bottom: 1rem;
}

/* CTA Banner */
.cta-banner {
   background: linear-gradient(
      135deg,
      var(--navy-dark) 16%,
      var(--accent) 100%
   );
   color: var(--white);
   padding: 3rem 0;
   text-align: center;
   margin-top: 2rem;
}
.cta-banner h2 {
   margin-bottom: 1.5rem;
   color: var(--white);
}

/* Placeholder Box */
.placeholder-box {
   text-align: center;
   padding: 4rem;
   background: var(--light-bg);
   border: 2px dashed var(--accent);
   border-radius: 8px;
   color: var(--text-light);
}

/* Case Studies Grid */
.case-studies-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
   gap: 2rem;
   margin: 2rem 0;
}
.case-study-card {
   background: var(--white);
   padding: 2rem;
   border-radius: 8px;
   box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
   transition: 0.3s;
   border: 1px solid #eee;
   text-align: center;
}
.case-study-card:hover {
   transform: translateY(-5px);
   box-shadow: 0 5px 20px rgba(136, 241, 1, 0.2);
}
.case-study-card .icon {
   font-size: 2.5rem;
   margin-bottom: 1rem;
}
.case-study-card h3 {
   color: var(--navy-dark);
   margin-bottom: 1rem;
   font-size: 1.3rem;
}
.case-study-card p {
   color: var(--text-light);
   line-height: 1.6;
   margin-bottom: 1rem;
}
.case-study-card .status {
   display: inline-block;
   padding: 0.25rem 0.75rem;
   border-radius: 20px;
   font-size: 0.85rem;
   font-weight: 600;
   margin-bottom: 1rem;
}
.case-study-card .status.completed {
   background: #e8f5e9;
   color: #2e7d32;
}
.case-study-card .status.in-progress {
   background: #fff3e0;
   color: #e65100;
}
.case-study-card a {
   display: inline-block;
   margin-top: 1rem;
   padding: 0.5rem 1.5rem;
   background: var(--navy-dark);
   color: var(--white);
   text-decoration: none;
   border-radius: 4px;
   font-weight: 500;
   transition: 0.3s;
}
.case-study-card a:hover {
   background: var(--accent);
   color: var(--navy-dark);
}

/* Breadcrumb */
.breadcrumb {
   margin-bottom: 2rem;
   padding: 1rem 0;
   font-size: 0.9rem;
}
.breadcrumb a {
   color: var(--text-light);
   text-decoration: none;
   transition: 0.3s;
}
.breadcrumb a:hover {
   color: var(--accent);
}
.breadcrumb .separator {
   margin: 0 0.5rem;
   color: var(--text-light);
}
.breadcrumb .current {
   color: var(--navy-dark);
   font-weight: 600;
}

/* Case Study Details */
.case-study-details {
   max-width: 800px;
   margin: 0 auto;
}
.project-info {
   background: var(--light-bg);
   padding: 2rem;
   border-radius: 8px;
   margin-bottom: 2rem;
   border-left: 4px solid var(--accent);
}
.project-info h2 {
   color: var(--navy-dark);
   margin-bottom: 1rem;
   font-size: 1.5rem;
}
.project-info p {
   margin-bottom: 0.5rem;
   color: var(--text);
}
.project-info strong {
   color: var(--navy-dark);
   font-weight: 600;
}

/* Project Gallery */
.project-gallery {
   margin-bottom: 2rem;
}
.project-gallery h2 {
   color: var(--navy-dark);
   margin-bottom: 1rem;
   font-size: 1.5rem;
   border-bottom: 2px solid var(--accent);
   padding-bottom: 0.5rem;
}
.placeholder-gallery {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
   gap: 1rem;
   margin: 1.5rem 0;
}
.placeholder-image {
   aspect-ratio: 16/9;
   background: var(--light-bg);
   border: 2px dashed #ddd;
   border-radius: 8px;
   display: flex;
   align-items: center;
   justify-content: center;
   color: var(--text-light);
   font-size: 0.9rem;
   transition: 0.3s;
}
.placeholder-image:hover {
   border-color: var(--accent);
   color: var(--navy-dark);
}
.gallery-note {
   text-align: center;
   color: var(--text-light);
   font-size: 0.9rem;
   font-style: italic;
   margin-top: 1rem;
}

.project-description {
   margin-bottom: 2rem;
}
.project-description h2 {
   color: var(--navy-dark);
   margin-bottom: 1rem;
   font-size: 1.5rem;
   border-bottom: 2px solid var(--accent);
   padding-bottom: 0.5rem;
}
.project-description p {
   color: var(--text);
   line-height: 1.8;
   margin-bottom: 1rem;
}
.back-link {
   margin-top: 2rem;
   padding-top: 2rem;
   border-top: 1px solid #eee;
}
.back-link a {
   color: var(--navy-dark);
   text-decoration: none;
   font-weight: 600;
   transition: 0.3s;
}
.back-link a:hover {
   color: var(--accent);
}

/* Footer */
footer {
   background: var(--navy-dark);
   color: #ccc;
   padding: 3rem 0 1rem;
   margin-top: auto;
}
.footer-content {
   display: flex;
   justify-content: space-between;
   flex-wrap: wrap;
   gap: 2rem;
   margin-bottom: 2rem;
}
.footer-col h4 {
   color: var(--white);
   margin-bottom: 1rem;
}
.footer-col a {
   color: #ccc;
   text-decoration: none;
   transition: 0.3s;
}
.footer-col a:hover {
   color: var(--accent);
}
.copyright {
   text-align: center;
   border-top: 1px solid rgba(255, 255, 255, 0.1);
   padding-top: 1rem;
   font-size: 0.9rem;
}

@media (max-width: 768px) {
   /* Mobile Navigation */
   .hamburger {
      display: flex; /* Show hamburger on mobile */
   }
   .nav-links {
      position: absolute;
      top: 100%;
      left: 0;
      right: 0;
      background: var(--navy-dark);
      flex-direction: column;
      padding: 1rem 0;
      display: none; /* Hidden by default */
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
   }
   .nav-links.active {
      display: flex; /* Show when active */
   }
   .nav-links li {
      margin: 0;
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
   }
   .nav-links li:last-child {
      border-bottom: none;
   }
   .nav-links a {
      padding: 1rem 2rem;
      display: block;
      color: var(--white);
   }
   .lang-switch {
      margin-top: 1rem;
      padding: 0 2rem;
      text-align: center;
   }

   .hero h1 {
      font-size: 2rem;
   }
   .hero.hero-image h1 {
      font-size: 1.8rem;
   }
   .hero p {
      font-size: 1rem;
   }
   .hero {
      padding: 3rem 0;
   }
   .hero.hero-image {
      padding: 4rem 0;
      background-attachment: scroll; /* Disable parallax on mobile for better performance */
   }
   /* Responsive sizing for mobile */
   .hero.hero-image[data-size="small"] {
      padding: 3rem 0;
   }
   .hero.hero-image[data-size="medium"] {
      padding: 4rem 0;
   }
   .hero.hero-image[data-size="large"] {
      padding: 5rem 0;
   }
   .hero.hero-image[data-size="xlarge"] {
      padding: 6rem 0;
   }
   .split-layout {
      flex-direction: column;
      gap: 2rem;
   }
}

@media (min-width: 769px) and (max-width: 1024px) {
   .hero.hero-image {
      background-attachment: scroll; /* Disable parallax on tablets/smaller laptops for performance */
   }
   .hero.hero-image[data-size="small"] {
      padding: 4rem 0;
   }
   .hero.hero-image[data-size="medium"] {
      padding: 6rem 0;
   }
   .hero.hero-image[data-size="large"] {
      padding: 7rem 0;
   }
   .hero.hero-image[data-size="xlarge"] {
      padding: 9rem 0;
   }
}

/* Form Alerts */
.form-alert {
   padding: 1rem;
   margin-bottom: 1rem;
   border-radius: 4px;
   font-weight: 500;
   text-align: center;
   animation: slideIn 0.3s ease-out;
}
.form-alert-success {
   background: #4caf50;
   color: var(--white);
   border: 1px solid #45a049;
}
.form-alert-error {
   background: #f44336;
   color: var(--white);
   border: 1px solid #da190b;
}
@keyframes slideIn {
   from {
      opacity: 0;
      transform: translateY(-10px);
   }
   to {
      opacity: 1;
      transform: translateY(0);
   }
}