/*
Theme Name: Osswald Architecture
Theme URI: https://osswald-architektur.de
Description: Modern, professional WordPress theme for architecture firms. Features custom post types for projects and team members, fully customizable through WordPress Customizer, responsive design, and integrated contact forms. Perfect for architecture offices, construction companies, and design professionals.
Version: 1.0.0
Author: Rainer Osswald Architekten
Author URI: https://osswald-architektur.de
Text Domain: osswald-architecture
Domain Path: /languages
Requires at least: 5.0
Tested up to: 6.4
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Tags: architecture, business, portfolio, responsive, custom-post-types, featured-images, custom-menu, threaded-comments, translation-ready

Osswald Architecture Theme, Copyright 2024 Rainer Osswald Architekten
Osswald Architecture is distributed under the terms of the GNU GPL
*/

/* Dynamic Layout Variables */
:root {
  --content-max-width: 1200px;
  --mobile-breakpoint: 768px;
}

/* Full Width Override */
body.full-width-content .main-content,
body.full-width-content .header-container,
body.full-width-content .footer-container,
body.full-width-content .hero-content {
  max-width: 100%;
  padding-left: 20px;
  padding-right: 20px;
}

body.full-width-content .hero-section {
  margin-left: 0;
  margin-right: 0;
}

/* Reset and Base Styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: "Arial", sans-serif;
  line-height: 1.6;
  color: #333;
  background: #fff;
}

/* Header Styles */
.site-header {
  background: #fff;
  border-bottom: 1px solid #eee;
  position: sticky;
  top: 0;
  z-index: 1000;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
}

.header-container {
  max-width: var(--content-max-width);
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 80px;
  position: relative;
}

.site-logo,
.custom-logo-link {
  font-size: 24px;
  font-weight: bold;
  text-decoration: none;
  color: #333;
}

.custom-logo {
  max-height: 60px;
  width: auto;
}

.main-navigation ul {
  display: flex;
  list-style: none;
  gap: 40px;
  margin: 0;
  padding: 0;
}

.main-navigation li {
  position: relative;
}

.main-navigation a {
  text-decoration: none;
  color: #333;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 1px;
  transition: color 0.3s ease;
  position: relative;
  padding: 10px 0;
}

.main-navigation a:hover,
.main-navigation a.active,
.main-navigation .current-menu-item > a {
  color: #666;
}

.main-navigation .current-menu-item > a::after {
  content: "";
  position: absolute;
  bottom: 5px;
  left: 0;
  right: 0;
  height: 2px;
  background: #333;
}

/* Fixed dropdown menu to only show on hover */
.main-navigation .sub-menu {
  display: none;
  position: absolute;
  background: #fff;
  min-width: 200px;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
  z-index: 1;
  top: 100%;
  left: 0;
  border-radius: 4px;
  flex-direction: column;
  gap: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.main-navigation li:hover > .sub-menu {
  display: flex;
  opacity: 1;
  visibility: visible;
}

.main-navigation .sub-menu a {
  display: block;
  padding: 12px 16px;
  text-transform: none;
  letter-spacing: normal;
  border-bottom: 1px solid #f0f0f0;
}

.main-navigation .sub-menu a:last-child {
  border-bottom: none;
}

.main-navigation .sub-menu a:hover {
  background: #f8f8f8;
}

.mobile-menu-btn {
  display: none;
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  color: #333;
}

/* Main Content */
.main-content {
  max-width: var(--content-max-width);
  margin: 0 auto;
  padding: 0 20px;
}

/* Page Headers */
.page-header {
  text-align: center;
  padding: 60px 0 40px;
}

.page-title,
.entry-title {
  font-size: 36px;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 20px;
}

/* Hero Slider Section */
.hero-slider-section {
  position: relative;
  margin: 0 0 60px 0;
  overflow: hidden;
  width: 100%;
}

.hero-slider {
  position: relative;
  width: 100%;
  height: 600px;
}

.slider-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
}

.slider-slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 1s ease-in-out;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.slider-slide.active {
  opacity: 1;
  z-index: 1;
}

.slider-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.2) 100%);
  z-index: 1;
}

/* Hero Content Overlay - Text über dem Slider */
.hero-content-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  padding: 0 20px;
}

.hero-content-overlay .hero-content {
  text-align: center;
  color: #fff;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
  max-width: 800px;
}

.hero-content-overlay .hero-title {
  color: #fff;
  font-size: 48px;
  margin-bottom: 20px;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 2px;
}

.hero-content-overlay .hero-subtitle {
  color: rgba(255, 255, 255, 0.95);
  font-size: 20px;
  margin-bottom: 30px;
  font-weight: 300;
}

.hero-content-overlay .hero-description {
  color: rgba(255, 255, 255, 0.9);
  max-width: 600px;
  margin: 0 auto;
  font-size: 16px;
  line-height: 1.6;
}

/* Slider Navigation Arrows */
.slider-prev,
.slider-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 20;
  background: rgba(255, 255, 255, 0.9);
  border: none;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

.slider-prev:hover,
.slider-next:hover {
  background: #fff;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
  transform: translateY(-50%) scale(1.1);
}

.slider-prev {
  left: 30px;
}

.slider-next {
  right: 30px;
}

.slider-prev span,
.slider-next span {
  font-size: 32px;
  font-weight: 300;
  color: #333;
  line-height: 1;
  display: block;
}

.slider-prev span {
  margin-right: 2px;
}

.slider-next span {
  margin-left: 2px;
}

/* Slider Dots */
.slider-dots {
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 20;
  display: flex;
  gap: 12px;
}

.slider-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  border: 2px solid rgba(255, 255, 255, 0.8);
  cursor: pointer;
  transition: all 0.3s ease;
  padding: 0;
}

.slider-dot:hover {
  background: rgba(255, 255, 255, 0.8);
  transform: scale(1.2);
}

.slider-dot.active {
  background: #fff;
  transform: scale(1.2);
}

/* Fallback Hero Section ohne Slider */
.hero-section {
  text-align: center;
  padding: 100px 20px;
  background: linear-gradient(135deg, #f8f8f8 0%, #e8e8e8 100%);
  position: relative;
  margin: 0 0 60px 0;
}

.hero-content {
  max-width: 800px;
  margin: 0 auto;
}

.hero-title {
  font-size: 48px;
  font-weight: bold;
  margin-bottom: 20px;
  text-transform: uppercase;
  letter-spacing: 2px;
}

.hero-subtitle {
  font-size: 20px;
  color: #666;
  margin-bottom: 30px;
  font-weight: 300;
}

.hero-description {
  max-width: 600px;
  margin: 0 auto;
  font-size: 16px;
  line-height: 1.6;
  color: #555;
}

/* Ensure sections after slider are visible */
.news-section,
.projects-section,
.about-section,
.team-section {
  position: relative;
  z-index: 1;
  background: #fff;
}

/* Section Headers */
.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 40px;
  flex-wrap: wrap;
  gap: 20px;
}

.section-title {
  font-size: 24px;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 0;
}

.section-link {
  color: #333;
  text-decoration: none;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 14px;
  transition: color 0.3s ease;
}

.section-link:hover {
  color: #666;
}

/* News Section */
.news-section {
  margin: 60px 0;
}

.news-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 30px;
  margin-bottom: 20px;
}

.news-item {
  background: #fff;
  padding: 30px;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  border-left: 4px solid #333;
  opacity: 0;
  transform: translateY(30px);
  animation: fadeInUp 0.6s ease forwards;
}

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

.news-date {
  font-size: 14px;
  color: #666;
  margin-bottom: 10px;
  font-weight: 500;
}

.news-title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 10px;
}

.news-title a {
  color: #333;
  text-decoration: none;
  transition: color 0.3s ease;
}

.news-title a:hover {
  color: #666;
}

.news-excerpt {
  color: #666;
  line-height: 1.6;
}

/* Projects Section */
.projects-section {
  margin: 60px 0;
}

.project-filters {
  display: flex;
  gap: 20px;
  margin-bottom: 40px;
  flex-wrap: wrap;
  justify-content: center;
}

.filter-btn {
  background: none;
  border: 1px solid #ddd;
  padding: 10px 20px;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 1px;
  transition: all 0.3s ease;
  border-radius: 4px;
  font-size: 14px;
}

.filter-btn:hover,
.filter-btn.active {
  background: #333;
  color: #fff;
  border-color: #333;
}

.projects-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 30px;
}

.project-item {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  opacity: 0;
  transform: translateY(30px);
  animation: fadeInUp 0.6s ease forwards;
}

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

.project-item a {
  text-decoration: none;
  color: inherit;
  display: block;
}

.project-image {
  width: 100%;
  height: 250px;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.project-item:hover .project-image {
  transform: scale(1.05);
}

.project-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
  color: #fff;
  padding: 30px 20px 20px;
}

.project-title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 5px;
}

.project-location {
  font-size: 14px;
  opacity: 0.8;
}

/* Placeholder Images */
.placeholder-image {
  width: 100%;
  height: 250px;
  background: linear-gradient(45deg, #f0f0f0 25%, transparent 25%),
    linear-gradient(-45deg, #f0f0f0 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #f0f0f0 75%),
    linear-gradient(-45deg, transparent 75%, #f0f0f0 75%);
  background-size: 20px 20px;
  background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #999;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 1px;
  position: relative;
}

.placeholder-image.large {
  height: 400px;
}

.placeholder-text {
  background: rgba(255, 255, 255, 0.9);
  padding: 10px 20px;
  border-radius: 4px;
  font-weight: 500;
}

/* Team Section */
.team-section {
  margin: 60px 0;
}

.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 30px;
  margin-top: 40px;
}

.team-member {
  background: #fff;
  padding: 30px 20px;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
  text-align: center;
  opacity: 0;
  transform: translateY(30px);
  animation: fadeInUp 0.6s ease forwards;
}

.team-member:hover {
  transform: translateY(-3px);
}

.team-member-image {
  margin-bottom: 20px;
}

.team-member-image img {
  width: 150px;
  height: 150px;
  border-radius: 8px;
  object-fit: cover;
  margin: 0 auto;
}

.member-name {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 10px;
  color: #333;
}

.member-title {
  color: #666;
  font-size: 14px;
  line-height: 1.4;
  margin-bottom: 10px;
}

.member-bio {
  font-size: 14px;
  color: #666;
  line-height: 1.6;
  margin-top: 15px;
}

.member-contact {
  margin-top: 15px;
  font-size: 14px;
}

.member-contact a {
  color: #333;
  text-decoration: none;
}

.member-contact a:hover {
  text-decoration: underline;
}

/* Office Navigation */
.office-nav {
  display: flex;
  gap: 30px;
  margin: 40px 0;
  justify-content: center;
  flex-wrap: wrap;
}

.office-nav-link {
  text-decoration: none;
  color: #333;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 10px 20px;
  border: 1px solid #ddd;
  transition: all 0.3s ease;
  border-radius: 4px;
}

.office-nav-link:hover,
.office-nav-link.active {
  background: #333;
  color: #fff;
  border-color: #333;
}

/* Added project category navigation styles */
.project-category-nav {
  display: flex;
  gap: 20px;
  margin: 40px 0;
  justify-content: center;
  flex-wrap: wrap;
  border-bottom: 2px solid #eee;
  padding-bottom: 0;
}

.category-nav-link {
  text-decoration: none;
  color: #333;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 15px 25px;
  border: none;
  background: none;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
}

.category-nav-link:hover {
  color: #666;
  background: #f8f8f8;
}

.category-nav-link.active {
  color: #333;
  border-bottom-color: #333;
  font-weight: bold;
}

/* About Section */
.about-section {
  margin: 60px 0;
  padding: 60px 40px;
  background: #f8f8f8;
  border-radius: 8px;
  text-align: center;
}

.about-content {
  max-width: 800px;
  margin: 0 auto;
}

.about-text {
  margin: 30px 0;
  line-height: 1.8;
  color: #666;
}

.about-text p {
  margin-bottom: 20px;
}

.about-cta {
  display: flex;
  gap: 20px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 40px;
}

/* Contact Section */
.contact-section {
  margin: 60px 0;
}

.contact-intro {
  text-align: center;
  font-size: 18px;
  color: #666;
  margin-bottom: 50px;
}

.contact-info {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  margin-bottom: 60px;
}

.contact-details h3 {
  margin-bottom: 20px;
  font-size: 20px;
}

.contact-details p {
  margin-bottom: 10px;
  line-height: 1.6;
}

.contact-details a {
  color: #333;
  text-decoration: none;
}

.contact-details a:hover {
  text-decoration: underline;
}

.map-container {
  background: #f0f0f0;
  border-radius: 8px;
  padding: 40px;
  text-align: center;
  position: relative;
}

.map-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 200px;
  color: #666;
}

.map-marker {
  font-size: 48px;
  margin-bottom: 20px;
}

/* Contact Form */
.contact-form-container {
  max-width: 600px;
  margin: 0 auto;
}

.contact-form {
  background: #f8f8f8;
  padding: 40px;
  border-radius: 8px;
}

.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  margin-bottom: 5px;
  font-weight: 500;
  color: #333;
}

.form-group input,
.form-group textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 16px;
  transition: border-color 0.3s ease;
  font-family: inherit;
}

.form-group input:focus,
.form-group textarea:focus {
  outline: none;
  border-color: #333;
}

.form-group textarea {
  resize: vertical;
  min-height: 120px;
}

.form-group input[type="checkbox"] {
  width: auto;
  margin-right: 10px;
}

.checkbox-label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-weight: normal;
}

.checkbox-label input {
  margin-top: 4px;
  flex-shrink: 0;
}

/* Project Single Page */
.project-single {
  max-width: 1000px;
  margin: 0 auto;
}

.project-header {
  text-align: center;
  margin-bottom: 40px;
}

.project-image-container {
  margin-bottom: 40px;
}

.project-main-image {
  width: 100%;
  height: 400px;
  object-fit: cover;
  border-radius: 8px;
}

/* Project Gallery */
.project-gallery {
  margin: 40px 0;
}

.project-gallery h2 {
  font-size: 18px;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 30px;
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 20px;
  margin-bottom: 40px;
}

.gallery-item {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  display: block;
  aspect-ratio: 4 / 3;
  cursor: pointer;
}

.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.gallery-item:hover img {
  transform: scale(1.1);
}

.gallery-item::after {
  content: "🔍";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 32px;
  opacity: 0;
  transition: opacity 0.3s ease;
  color: white;
  text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

.gallery-item:hover::after {
  opacity: 1;
}

/* Lightbox */
.lightbox-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.9);
  z-index: 10000;
  display: none;
  align-items: center;
  justify-content: center;
  cursor: zoom-out;
}

.lightbox-overlay.active {
  display: flex;
}

.lightbox-image {
  max-width: 90%;
  max-height: 90vh;
  object-fit: contain;
}

.lightbox-close {
  position: absolute;
  top: 20px;
  right: 30px;
  color: white;
  font-size: 40px;
  font-weight: bold;
  cursor: pointer;
  background: none;
  border: none;
  padding: 10px;
  line-height: 1;
}

.lightbox-close:hover {
  opacity: 0.7;
}

.project-details-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 60px;
}

.project-description h2,
.project-data h2 {
  font-size: 18px;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 20px;
}

.project-text {
  line-height: 1.6;
  color: #666;
}

.project-text p {
  margin-bottom: 20px;
}

.project-meta p {
  margin-bottom: 10px;
  line-height: 1.6;
}

/* Article Styles */
.news-article {
  max-width: 800px;
  margin: 0 auto;
}

.article-header {
  text-align: center;
  margin-bottom: 40px;
}

.article-title {
  font-size: 32px;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 2px;
}

.article-content {
  line-height: 1.8;
  color: #333;
}

.article-content p {
  margin-bottom: 20px;
}

.news-image {
  margin-bottom: 30px;
}

.news-image img {
  width: 100%;
  height: auto;
  border-radius: 8px;
}

.news-text {
  line-height: 1.8;
}

/* Legal Pages */
.legal-section {
  margin: 60px 0;
}

.legal-content {
  max-width: 800px;
  margin: 0 auto;
  line-height: 1.6;
}

.legal-content h2,
.legal-content h3,
.legal-content h4 {
  margin-top: 40px;
  margin-bottom: 20px;
  color: #333;
}

.legal-content h2 {
  font-size: 24px;
}

.legal-content h3 {
  font-size: 18px;
}

.legal-content h4 {
  font-size: 16px;
}

.legal-content p {
  margin-bottom: 15px;
}

.legal-content ul,
.legal-content ol {
  margin-left: 20px;
  margin-bottom: 15px;
}

.legal-content li {
  margin-bottom: 10px;
}

/* Buttons */
.btn,
.button,
input[type="submit"],
button[type="submit"] {
  display: inline-block;
  padding: 12px 30px;
  background: #333;
  color: #fff;
  text-decoration: none;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 500;
}

.btn:hover,
.button:hover,
input[type="submit"]:hover,
button[type="submit"]:hover {
  background: #555;
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.btn-secondary {
  background: transparent;
  color: #333;
  border: 2px solid #333;
}

.btn-secondary:hover {
  background: #333;
  color: #fff;
}

/* Footer */
.site-footer {
  background: #333;
  color: #fff;
  padding: 60px 0 20px;
  margin-top: 80px;
}

.footer-container {
  max-width: var(--content-max-width);
  margin: 0 auto;
  padding: 0 20px;
}

.footer-content {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 40px;
  margin-bottom: 40px;
}

.footer-section h3 {
  margin-bottom: 20px;
  font-size: 18px;
}

.footer-section p,
.footer-section a {
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.6;
  text-decoration: none;
}

.footer-section a:hover {
  color: #fff;
}

.footer-section ul {
  list-style: none;
}

.footer-section li {
  margin-bottom: 10px;
}

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: 20px;
  text-align: center;
  color: rgba(255, 255, 255, 0.6);
  font-size: 14px;
}

/* Animations */
@keyframes fadeInUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Responsive Design */
@media (max-width: 1024px) {
  .header-container {
    padding: 0 15px;
  }

  .main-content {
    padding: 0 15px;
  }

  .projects-grid {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  }

  .project-details-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}

@media (max-width: 768px) {
  .main-navigation {
    display: none;
  }

  .mobile-menu-btn {
    display: block;
  }

  .main-navigation.active {
    display: block;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #fff;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  }

  .main-navigation.active ul {
    flex-direction: column;
    gap: 0;
  }

  .main-navigation.active li {
    border-bottom: 1px solid #eee;
  }

  .main-navigation.active a {
    display: block;
    padding: 15px 20px;
  }

  .main-navigation .sub-menu {
    position: static;
    box-shadow: none;
    background: #f8f8f8;
  }

  .hero-title,
  .hero-content-overlay .hero-title {
    font-size: 32px;
  }

  .hero-subtitle,
  .hero-content-overlay .hero-subtitle {
    font-size: 18px;
  }

  .page-title {
    font-size: 28px;
  }

  .section-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .news-grid,
  .projects-grid {
    grid-template-columns: 1fr;
  }

  .team-grid {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  }

  .contact-info {
    grid-template-columns: 1fr;
  }

  .footer-content {
    grid-template-columns: 1fr;
  }

  .slider-prev {
    left: 15px;
  }

  .slider-next {
    right: 15px;
  }

  .slider-prev,
  .slider-next {
    width: 40px;
    height: 40px;
  }

  .slider-prev span,
  .slider-next span {
    font-size: 24px;
  }

  .office-nav,
  .project-category-nav {
    gap: 10px;
  }

  .office-nav-link,
  .category-nav-link {
    padding: 10px 15px;
    font-size: 12px;
  }
}

@media (max-width: 480px) {
  .hero-slider {
    height: 400px;
  }

  .hero-title,
  .hero-content-overlay .hero-title {
    font-size: 24px;
  }

  .hero-subtitle,
  .hero-content-overlay .hero-subtitle {
    font-size: 16px;
  }

  .page-title {
    font-size: 24px;
  }

  .contact-form {
    padding: 20px;
  }

  .team-member-image img {
    width: 120px;
    height: 120px;
  }
}

/* Print Styles */
@media print {
  .site-header,
  .site-footer,
  .mobile-menu-btn,
  .slider-prev,
  .slider-next,
  .slider-dots {
    display: none;
  }

  body {
    font-size: 12pt;
  }

  .main-content {
    max-width: 100%;
  }
}