/* ===== MAIN CSS FILE - GLOBAL STYLES ===== */
/* This file contains all the global styles, navigation, footer, and theme variables */
@import '~@fortawesome/fontawesome-free/css/all.css';
/* ===== CSS CUSTOM PROPERTIES (VARIABLES) ===== */
:root {
  --primary-color: #14213d;    /* Dark blue for primary elements */
  --primary-hover: #0d1a33;    /* Slightly darker blue for hover states */
  --secondary-color: #e5e5e5;  /* Light gray for secondary elements */
  --accent-color: #ff7700;     /* Orange for accents */
  --background-color: #ffffff;  /* White background */
  --surface-color: #f8f8f8;    /* Very light gray for cards/surfaces */
  --text-primary: #000000;     /* Black for primary text */
  --text-secondary: #333333;   /* Dark gray for secondary text */
  --text-muted: #666666;       /* Medium gray for muted text */
  --border-color: #dddddd;     /* Light gray for borders */
  --shadow-light: 0 1px 3px rgba(0, 0, 0, 0.1);
  --shadow-medium: 0 4px 6px rgba(0, 0, 0, 0.1);
  --shadow-large: 0 10px 15px rgba(0, 0, 0, 0.1);
  
  /* Additional colors for specific elements */
  --header-bg: #14213d;        /* Dark blue header */
  --footer-bg: #14213d;        /* Dark blue footer */
  --button-bg: #f5f5f5;        /* Light gray/beige for buttons */
  --button-hover: #e5e5e5;     /* Slightly darker for button hover */
  --heading-accent: #fca311;   /* Orange for heading accents */
  /* Animation and transition variables */
  --transition-fast: 0.15s ease-in-out; /* Fast transitions for hover effects */
  --transition-normal: 0.3s ease-in-out; /* Normal transitions for most elements */
  --transition-slow: 0.5s ease-in-out; /* Slow transitions for complex animations */

  /* Spacing variables */
  --spacing-xs: 0.25rem; /* 4px - Extra small spacing */
  --spacing-sm: 0.5rem; /* 8px - Small spacing */
  --spacing-md: 1rem; /* 16px - Medium spacing */
  --spacing-lg: 1.5rem; /* 24px - Large spacing */
  --spacing-xl: 2rem; /* 32px - Extra large spacing */
  --spacing-2xl: 3rem; /* 48px - 2X large spacing */
  --spacing-3xl: 4rem; /* 64px - 3X large spacing */

  /* Font size variables */
  --font-xs: 0.75rem; /* 12px - Extra small text */
  --font-sm: 0.875rem; /* 14px - Small text */
  --font-base: 1rem; /* 16px - Base font size */
  --font-lg: 1.125rem; /* 18px - Large text */
  --font-xl: 1.25rem; /* 20px - Extra large text */
  --font-2xl: 1.5rem; /* 24px - 2X large text */
  --font-3xl: 1.875rem; /* 30px - 3X large text */
  --font-4xl: 2.25rem; /* 36px - 4X large text */
  --font-5xl: 3rem; /* 48px - 5X large text */

  /* Border radius variables */
  --radius-sm: 0.25rem; /* Small border radius */
  --radius-md: 0.375rem; /* Medium border radius */
  --radius-lg: 0.5rem; /* Large border radius */
  --radius-xl: 0.75rem; /* Extra large border radius */
  --radius-2xl: 1rem; /* 2X large border radius */
  --radius-full: 9999px; /* Full/circular border radius */

  /* Container width variables */
  --container-xs: 480px; /* Extra small container for mobile */
  --container-sm: 640px; /* Small container for tablets */
  --container-md: 768px; /* Medium container for small desktops */
  --container-lg: 1024px; /* Large container for desktops */
  --container-xl: 1280px; /* Extra large container for wide screens */
  --container-2xl: 1536px; /* 2X large container for ultra-wide screens */
}

/* ===== CUSTOM TEXT SELECTION HIGHLIGHT ===== */
::selection {
  background-color: var(--accent-color); /* Orange background */
  color: #ffffff; /* White text for better readability */
}

::-moz-selection {
  background-color: var(--accent-color); /* Orange background for Firefox */
  color: #ffffff; /* White text for better readability */
}


/* ===== GLOBAL RESET AND BASE STYLES ===== */
/* Reset default browser styles and set base typography */
* {
  margin: 0; /* Remove default margin */
  padding: 0; /* Remove default padding */ 
  font-family: 'Bodoni Moda', serif; /* Apply Bodoni Moda to all elements */
}

html {
  scroll-behavior: smooth; /* Smooth scrolling for anchor links */
  font-size: 16px; /* Base font size for rem calculations */
  background-color: var(--surface-color); /* Ensure consistent background */
}

body {
  font-family: 'Bodoni Moda', serif;
  line-height: 1.6; /* Comfortable line height for readability */
  color: var(--text-primary); /* Primary text color */
  background-color: var(--surface-color); /* Use surface color for consistency */
  transition: background-color var(--transition-normal), color var(--transition-normal); /* Smooth theme transitions */
  overflow-x: hidden; /* Prevent horizontal scroll */
  min-height: 100vh; /* Ensure full height coverage */
}

/* Ensure all buttons and inputs use the same font */
button,
input,
textarea,
select {
  font-family: 'Bodoni Moda', serif;
}

/* ===== TYPOGRAPHY STYLES ===== */
/* Heading styles with consistent spacing and sizing */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 700; /* Bold font weight for headings */
  line-height: 1.2; /* Tighter line height for headings */
  margin-bottom: var(--spacing-md); /* Bottom margin for spacing */
  color: var(--text-primary); /* Primary text color */
}

h1 {
  font-size: var(--font-4xl); /* Large heading size */
}

h2 {
  font-size: var(--font-3xl); /* Medium-large heading size */
}

h3 {
  font-size: var(--font-2xl); /* Medium heading size */
}

h4 {
  font-size: var(--font-xl); /* Small-medium heading size */
}

h5 {
  font-size: var(--font-lg); /* Small heading size */
}

h6 {
  font-size: var(--font-base); /* Base heading size */
}

/* Paragraph and text styles */
p {
  margin-bottom: var(--spacing-md); /* Bottom margin for paragraphs */
  color: var(--text-secondary); /* Secondary text color */
}

a {
  color: var(--primary-color); /* Primary color for links */
  text-decoration: none; /* Remove default underline */
  transition: color var(--transition-fast); /* Smooth color transition */
}

a:hover {
  color: var(--primary-hover); /* Hover color for links */
}

/* List styles */
ul,
ol {
  margin-bottom: var(--spacing-md); /* Bottom margin for lists */
  padding-left: var(--spacing-lg); /* Left padding for list indentation */
}

li {
  margin-bottom: var(--spacing-xs); /* Small margin between list items */
  color: var(--text-secondary); /* Secondary text color for list items */
}

/* ===== NAVIGATION BAR STYLES ===== */
/* Main navigation container with fixed positioning */
.main-navigation-bar {
  position: fixed; /* Fixed position at top of page */
  top: 0; /* Stick to top */
  left: 0; /* Align to left edge */
  right: 0; /* Stretch to right edge */
  background-color: #fafafa9c; /* White background */
  backdrop-filter: blur(20px); /* Blur effect for modern look */
  border-bottom: 1px solid var(--border-color); /* Bottom border */
  z-index: 1000; /* High z-index to stay above other content */
  transition: all var(--transition-normal); /* Smooth transitions */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* Add shadow for depth */
}

/* Navigation container wrapper for centering and padding */
.nav-container-wrapper {
  max-width: var(--container-xl); /* Maximum width constraint */
  margin: 0 auto; /* Center the container */
  padding: 0 var(--spacing-lg); /* Horizontal padding */
  display: flex; /* Flexbox layout */
  align-items: center; /* Vertical center alignment */
  justify-content: space-between; /* Space between logo and menu */
  height: 70px; /* Fixed navigation height */
}

/* Company logo section styles */
.company-logo-section {
  display: flex; /* Flexbox for logo alignment */
  align-items: center; /* Vertical center alignment */
}

.company-logo-image {
  height: 80px; /* Further increased logo height for better visibility */
  width: auto; /* Maintain aspect ratio */
  border: none; /* Removed border */
  border-radius: var(--radius-md); /* Rounded corners */
  /* Removed hover transition effect */
}

/* Removed hover effect for logo */

/* Desktop navigation menu styles */
.desktop-nav-menu-list {
  display: flex; /* Horizontal flexbox layout */
  list-style: none; /* Remove list bullets */
  margin: 0; /* Remove default margin */
  padding: 0; /* Remove default padding */
  gap: var(--spacing-lg); /* Space between menu items */
}

.nav-menu-item {
  margin: 0; /* Remove default margin */
}

/* Navigation link styles */
.nav-link-default,
.nav-link-active {
  display: block; /* Block display for better click area */
  padding: var(--spacing-sm) var(--spacing-md); /* Padding for click area */
  font-weight: 700; /* Medium font weight */
  font-size: var(--font-base); /* Base font size */
  border-radius: var(--radius-full); /* Rounded corners */
  transition: all var(--transition-normal); /* Smooth transitions */
  position: relative; /* For pseudo-element positioning */
}

.nav-link-default {
  color: var(--primary-color); /* Dark blue text color */
}

.nav-link-default:hover {
  color: #ffffff; /* White text on hover */
  background-color: rgba(227, 102, 0, 0.991); /* Light orange background on hover */
}

.nav-link-active {
  color: #ffffff; /* White text for active link */
  background-color: var(--accent-color); /* Orange background for active */
  font-weight: 600; /* Bolder font weight for active state */
}

/* Navigation controls section (theme toggle and mobile menu) */
.nav-controls-section {
  display: flex; /* Flexbox layout */
  align-items: center; /* Vertical center alignment */
  gap: var(--spacing-md); /* Space between controls */
}


/* Mobile menu toggle button styles */
.mobile-menu-toggle {
  display: none; /* Hidden by default (desktop) */
  background: transparent; /* Clean transparent background */
  border: none; /* No border */
  cursor: pointer; /* Pointer cursor */
  flex-direction: column; /* Vertical stack for hamburger lines */
  justify-content: center; /* Center alignment */
  align-items: center; /* Center alignment */
  width: 30px; /* Clean compact width */
  height: 30px; /* Clean compact height */
  padding: 4px; /* Minimal padding */
  border-radius: 0; /* No rounded corners */
  position: relative; /* For pseudo-elements */
  /* Removed all transitions and effects */
}

/* Removed hover and active effects for clean hamburger */

/* Hamburger menu line styles */
.hamburger-line-top,
.hamburger-line-middle,
.hamburger-line-bottom {
  width: 22px; /* Clean line width */
  height: 2px; /* Clean line height */
  background-color: #fca311; /* Orange color */
  margin: 2px 0; /* Space between lines */
  transition: background-color 0.3s ease; /* Smooth color transition */
  border-radius: 1px; /* Slightly rounded edges */
  position: relative;
}

/* Removed all hover effects and animations for clean hamburger */

/* Removed all animations - clean hamburger stays as hamburger */

/* Mobile navigation menu overlay */
.mobile-nav-menu-overlay {
  display: none; /* Hidden by default */
  position: fixed; /* Fixed positioning */
  top: 60px; /* Directly below navigation bar - no gap */
  left: 0; /* Full width */
  right: 0; /* Full width */
  background: #ffffff; /* Clean white background */
  border-top: 1px solid rgba(0, 0, 0, 0.05); /* Subtle top border */
  border-bottom: 2px solid #fca311; /* Orange accent border */
  z-index: 999; /* High z-index */
  transform: translateY(-100%); /* Initially hidden above */
  transition: transform 0.3s ease; /* Smooth slide animation */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* Subtle shadow */
}

/* Mobile menu active state */
.mobile-nav-menu-overlay.menu-active {
  display: block; /* Show when active */
  transform: translateY(0); /* Slide down to visible position */
}

/* Mobile navigation menu list */
.mobile-nav-menu-list {
  list-style: none; /* Remove bullets */
  margin: 0; /* Remove margin */
  padding: 1rem 0; /* Simple padding top and bottom */
  display: flex; /* Flexbox layout */
  flex-direction: column; /* Vertical stack */
  gap: 0; /* No gap - clean separation with borders */
}

.mobile-nav-item {
  margin: 0; /* Remove margin */
  border-bottom: 1px solid rgba(0, 0, 0, 0.05); /* Subtle separator */
}

.mobile-nav-item:last-child {
  border-bottom: none; /* No border on last item */
}

/* Removed decorative effects for clean interface */

/* Body scroll lock when menu is open */
body.menu-open {
  overflow: hidden;
  position: fixed;
  width: 100%;
}

/* Mobile navigation link styles */
.mobile-nav-link {
  display: block; /* Block display */
  padding: 1rem 1.5rem; /* Clean padding */
  color: #14213d; /* Dark blue text */
  font-weight: 500; /* Medium weight */
  font-size: 1rem; /* Standard size */
  transition: all 0.3s ease; /* Smooth transitions */
  text-align: left; /* Left align */
  background: transparent; /* Transparent background */
}

.mobile-nav-link:hover {
  color: #fca311; /* Orange text on hover */
  background: rgba(252, 163, 17, 0.05); /* Very subtle orange tint */
  padding-left: 2rem; /* Slight indent on hover */
}

/* ===== MAIN CONTENT STYLES ===== */
/* Main content container with top margin for fixed navigation */
main {
  margin-top: 70px; /* Offset for fixed navigation */
  min-height: calc(100vh - 70px); /* Minimum height minus navigation */
}

/* ===== BUTTON STYLES ===== */
/* Primary button styles */
.hero-primary-button,
.cta-primary-button,
.services-cta-button,
.gallery-cta-button,
.form-submit-button {
  display: inline-flex; /* Inline flex for content alignment */
  align-items: center; /* Vertical center alignment */
  justify-content: center; /* Horizontal center alignment */
  padding: var(--spacing-md) var(--spacing-xl); /* Generous padding */
  background-color: var(--secondary-color); /* Primary background */
  color: white; /* White text */
  font-weight: 600; /* Semi-bold font */
  font-size: var(--font-base); /* Base font size */
  border: none; /* No border */
  border-radius: var(--radius-lg); /* Rounded corners */
  cursor: pointer; /* Pointer cursor */
  transition: all var(--transition-fast); /* Smooth transitions */
  text-decoration: none; /* No underline for links */
  box-shadow: var(--shadow-medium); /* Medium shadow */
}

.hero-primary-button:hover,
.cta-primary-button:hover,
.services-cta-button:hover,
.gallery-cta-button:hover,
.form-submit-button:hover {
  background-color: var(--primary-hover); /* Darker background on hover */
  transform: translateY(-2px); /* Slight lift effect */
  box-shadow: var(--shadow-large); /* Larger shadow on hover */
  color: white; /* Maintain white text */
}

/* Secondary button styles */
.hero-secondary-button,
.cta-secondary-button {
  display: inline-flex; /* Inline flex for content alignment */
  align-items: center; /* Vertical center alignment */
  justify-content: center; /* Horizontal center alignment */
  padding: var(--spacing-md) var(--spacing-xl); /* Generous padding */
  background-color: transparent; /* Transparent background */
  color: var(--primary-color); /* Primary text color */
  font-weight: 600; /* Semi-bold font */
  font-size: var(--font-base); /* Base font size */
  border: 2px solid var(--primary-color); /* Primary border */
  border-radius: var(--radius-lg); /* Rounded corners */
  cursor: pointer; /* Pointer cursor */
  transition: all var(--transition-fast); /* Smooth transitions */
  text-decoration: none; /* No underline for links */
}

.hero-secondary-button:hover,
.cta-secondary-button:hover {
  background-color: var(--primary-color); /* Primary background on hover */
  color: white; /* White text on hover */
  transform: translateY(-2px); /* Slight lift effect */
  box-shadow: var(--shadow-medium); /* Medium shadow on hover */
}

/* ===== FOOTER STYLES ===== */
/* Main footer container */
.main-footer-section {
  background-color: #ffffff; /* White background */
  border-top: 1px solid var(--border-color); /* Top border */
  padding: var(--spacing-2xl) 0; /* Vertical padding */
}

/* Footer content wrapper */
.footer-content-wrapper {
  max-width: var(--container-xl); /* Maximum width constraint */
  margin: 0 auto; /* Center container */
  padding: 0 var(--spacing-lg); /* Horizontal padding */
  display: grid; /* Grid layout */
  grid-template-columns: 1fr 1fr; /* Two equal columns */
  gap: var(--spacing-2xl); /* Gap between columns */
  align-items: start; /* Align items to start */
}

/* Footer info section */
.footer-info-section {
  display: flex; /* Flexbox layout */
  flex-direction: column; /* Vertical stack */
  gap: var(--spacing-md); /* Space between elements */
  align-items: center; /* Center items */
}

.footer-logo-image {
  height: 70px; /* Further increased footer logo height for better visibility */
  width: auto; /* Maintain aspect ratio */
}

.footer-description-text {
  color: var(--text-primary); /* Black text color */
  margin: 0; /* Remove default margin */

}

/* Footer links section */
.footer-links-section {
  display: flex; /* Flexbox layout */
  flex-direction: column; /* Vertical stack */
  gap: var(--spacing-md); /* Space between elements */
}

.footer-links-heading {
  color: var(--text-primary); /* Black text color */
  font-size: var(--font-lg); /* Large font size */
  font-weight: 600; /* Semi-bold font */
  margin: 0; /* Remove default margin */
}

.footer-links-list {
  list-style: none; /* Remove bullets */
  margin: 0; /* Remove margin */
  padding: 0; /* Remove padding */
  display: flex; /* Flexbox layout */
  flex-direction: column; /* Vertical stack */
  gap: var(--spacing-sm); /* Space between links */
}

.footer-link-item {
  margin: 0; /* Remove margin */
}

.footer-nav-link {
  color: var(--text-primary); /* Black text color */
  transition: color var(--transition-fast); /* Smooth color transition */
}

.footer-nav-link:hover {
  color: var(--accent-color); /* Orange color on hover */
}

/* Footer bottom section */
.footer-bottom-section {
  max-width: var(--container-xl); /* Maximum width constraint */
  margin: var(--spacing-xl) auto 0; /* Top margin and center */
  padding: var(--spacing-lg) var(--spacing-lg) 0; /* Padding */
  border-top: 1px solid var(--border-color); /* Top border */
  text-align: center; /* Center text */
}

.footer-copyright-text {
  color: var(--text-primary); /* Black text color */
  font-size: var(--font-lg); /* Small font size */
  margin: 0; /* Remove margin */
}

/* ===== RESPONSIVE DESIGN ===== */
/* Tablet styles */
@media (max-width: 768px) {
  /* Hide desktop navigation, show mobile toggle */
  .desktop-nav-menu-list {
    display: none; /* Hide desktop menu */
  }

  .mobile-menu-toggle {
    display: flex; /* Show mobile toggle */
  }

  /* Adjust navigation container padding */
  .nav-container-wrapper {
    padding: 0 var(--spacing-md); /* Reduced padding */
  }

  /* Adjust footer layout for mobile */
  .footer-content-wrapper {
    grid-template-columns: 1fr; /* Single column layout */
    gap: var(--spacing-xl); /* Reduced gap */
    text-align: center; /* Center text */
  }

  /* Adjust button sizes for mobile */
  .hero-primary-button,
  .hero-secondary-button,
  .cta-primary-button,
  .cta-secondary-button {
    padding: var(--spacing-md) var(--spacing-lg); /* Reduced padding */
    font-size: var(--font-sm); /* Smaller font */
  }
}

/* Mobile styles */
@media (max-width: 480px) {
  /* Further reduce spacing and sizing for small screens */
  .nav-container-wrapper {
    padding: 0 var(--spacing-sm); /* Minimal padding */
    height: 60px; /* Reduced height */
  }

  .company-logo-image {
    height: 65px; /* Increased mobile logo size */
  }

  main {
    margin-top: 60px; /* Adjust for smaller navigation */
  }

  /* Adjust typography for mobile */
  h1 {
    font-size: var(--font-3xl); /* Smaller heading */
  }

  h2 {
    font-size: var(--font-2xl); /* Smaller heading */
  }

  h3 {
    font-size: var(--font-xl); /* Smaller heading */
  }
}

/* ===== UTILITY CLASSES ===== */
/* Container utility classes */
.container-sm {
  max-width: var(--container-sm);
  margin: 0 auto;
  padding: 0 var(--spacing-lg);
}
.container-md {
  max-width: var(--container-md);
  margin: 0 auto;
  padding: 0 var(--spacing-lg);
}
.container-lg {
  max-width: var(--container-lg);
  margin: 0 auto;
  padding: 0 var(--spacing-lg);
}
.container-xl {
  max-width: var(--container-xl);
  margin: 0 auto;
  padding: 0 var(--spacing-lg);
}
.container-2xl {
  max-width: var(--container-2xl);
  margin: 0 auto;
  padding: 0 var(--spacing-lg);
}

/* Text alignment utilities */
.text-left {
  text-align: left;
}
.text-center {
  text-align: center;
}
.text-right {
  text-align: right;
}

/* Display utilities */
.hidden {
  display: none;
}
.block {
  display: block;
}
.flex {
  display: flex;
}
.grid {
  display: grid;
}

/* Spacing utilities */
.mt-0 {
  margin-top: 0;
}
.mt-sm {
  margin-top: var(--spacing-sm);
}
.mt-md {
  margin-top: var(--spacing-md);
}
.mt-lg {
  margin-top: var(--spacing-lg);
}
.mt-xl {
  margin-top: var(--spacing-xl);
}

.mb-0 {
  margin-bottom: 0;
}
.mb-sm {
  margin-bottom: var(--spacing-sm);
}
.mb-md {
  margin-bottom: var(--spacing-md);
}
.mb-lg {
  margin-bottom: var(--spacing-lg);
}
.mb-xl {
  margin-bottom: var(--spacing-xl);
}