/* ========================================= */
/*          GLOBAL STYLES & VARIABLES        */
/* ========================================= */
:root {
  /* Color Palette (Inspired by Logo + Professional Accent) */
  --clr-dark: #1e2a3a;        /* Slightly softer dark blue-grey */
  --clr-light: #f4f7f6;       /* Very light, slightly cool background */
  --clr-white: #ffffff;
  --clr-grey: #627d98;        /* Muted blue-grey for secondary text */
  --clr-light-grey: #dae4ed;  /* Lighter blue-grey for borders/backgrounds */
  --clr-primary-accent: #007bff; /* A common, vibrant blue */
  --clr-primary-accent-darker: #0056b3; /* Darker shade for hover */
  --clr-text-dark: #333f4d;    /* Darker text for readability */
  --clr-text-light: #f4f7f6;   /* Primary light text (on dark bg) */
  --rgb-primary-accent: 0, 123, 255; /* RGB for the blue accent for focus rings */
  --rgb-dark-overlay: 30, 42, 58; /* RGB for dark overlay matching --clr-dark */

  /* Typography */
  --font-primary: "Lexend Deca", sans-serif;
  --font-size-base: 1.6rem;
  --line-height-base: 1.6;

  /* Sizing & Spacing */
  --header-height: 7rem;
  --padding-x-section: clamp(2rem, 5vw, 8rem); /* Responsive horizontal padding */
  --padding-y-section: clamp(4rem, 8vw, 9rem); /* Responsive vertical padding */
  --gap-section: clamp(3rem, 6vw, 6rem);      /* Responsive gap between sections */

  /* Borders & Shadows */
  --border-radius-sm: 4px;
  --border-radius-md: 8px;
  --border-radius-lg: 12px;
  /* More modern, spread-out shadows */
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 8px 16px rgba(0, 0, 0, 0.12);
  --shadow-lg: 0 15px 30px rgba(0, 0, 0, 0.15);

  /* Transitions */
  --transition-speed: 0.3s;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 62.5%; /* 1rem = 10px */
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-primary);
  font-size: var(--font-size-base); /* Base font size */
  line-height: var(--line-height-base);
  color: var(--clr-text-dark);
  background-color: var(--clr-light);
}

/* ========================================= */
/*              REUSABLE COMPONENTS          */
/* ========================================= */
.section {
  /* Padding is now applied within .container for consistency */
}
.section:not(:first-child) {
  /* Use a subtle border */
  border-top: 1px solid var(--clr-light-grey);
}

/* Consistent Container for Centering Content */
.container {
    max-width: 1200px; /* Max width for content */
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--padding-x-section); /* Use section padding vars */
    padding-right: var(--padding-x-section);
    padding-top: var(--padding-y-section);
    padding-bottom: var(--padding-y-section);
    width: 100%; /* Ensure container takes width */
}

/* Special container padding for hero */
.hero > .container {
    padding-top: calc(var(--header-height) + var(--padding-y-section));
    padding-bottom: var(--padding-y-section);
}


/* --- Headings --- */
.primary-heading {
  font-size: 5.2rem; /* Slightly smaller for modern look */
  font-weight: 700;
  color: var(--clr-white); /* MODIFIED: White for hero */
  line-height: 1.1;
  letter-spacing: -2px; /* Keep negative spacing */
  margin-bottom: 2rem;
  /* Removed text-shadow */
}
.secondary-heading {
  font-size: 4rem;
  font-weight: 600; /* Slightly bolder */
  color: var(--clr-dark); /* Use dark as primary section heading color */
  margin-bottom: 2rem; /* Increased margin */
  letter-spacing: -1.5px;
  /* Removed text-shadow */
}
.ternary-heading {
  font-size: 2.8rem; /* Adjusted size */
  color: var(--clr-dark);
  margin-bottom: 1.5rem;
  letter-spacing: -1px;
  font-weight: 500;
}

/* --- Buttons --- */
/* Base button style */
.btn {
  display: inline-block;
  font-size: 1.6rem;
  font-weight: 500;
  padding: 1.2rem 2.8rem;
  border-radius: var(--border-radius-md); /* Use consistent border-radius */
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--transition-speed) ease, color var(--transition-speed) ease, border-color var(--transition-speed) ease, transform var(--transition-speed) ease, box-shadow var(--transition-speed) ease;
  border: 1px solid transparent;
  text-align: center;
  /* Added subtle initial shadow */
  box-shadow: var(--shadow-sm);
}

.btn:hover {
    transform: translateY(-3px); /* Slightly more pronounced lift */
    box-shadow: var(--shadow-md); /* Medium shadow on hover */
}

/* Primary Button Style (Solid Accent) */
.btn-primary {
  background-color: var(--clr-primary-accent);
  color: var(--clr-white);
  border-color: var(--clr-primary-accent);
}
.btn-primary:hover {
  background-color: var(--clr-primary-accent-darker);
  border-color: var(--clr-primary-accent-darker);
  color: var(--clr-white);
  box-shadow: var(--shadow-md); /* Keep shadow on hover */
}

/* Secondary Button Style (Outline/Ghost) */
.btn-secondary {
  background-color: transparent;
  color: var(--clr-white);
  border-color: var(--clr-white);
}
.btn-secondary:hover {
  background-color: var(--clr-white);
  color: var(--clr-primary-accent);
  border-color: var(--clr-white); /* Border color stays white */
  box-shadow: var(--shadow-md); /* Keep shadow on hover */
}

/* Keep properties class working */
.btn-properties {
  background-color: var(--clr-primary-accent);
  color: var(--clr-white);
  border-color: var(--clr-primary-accent);
}
.btn-properties:hover {
  background-color: var(--clr-primary-accent-darker);
  border-color: var(--clr-primary-accent-darker);
  color: var(--clr-white);
  box-shadow: var(--shadow-md);
}
.btn-contact {
    background-color: transparent;
    color: var(--clr-white);
    border-color: var(--clr-white);
}
.btn-contact:hover {
    background-color: var(--clr-white);
    color: var(--clr-primary-accent);
    border-color: var(--clr-white);
    box-shadow: var(--shadow-md);
}


/* Button specific use (like property links) */
.properties-link {
    background-color: var(--clr-primary-accent);
    color: var(--clr-white);
    font-size: 1.6rem;
    padding: 1rem 2rem;
    border-radius: var(--border-radius-md); /* Consistent rounding */
    box-shadow: var(--shadow-sm); /* Initial shadow */
}
.properties-link:hover {
    background-color: var(--clr-primary-accent-darker);
    color: var(--clr-white);
    box-shadow: var(--shadow-md); /* Medium shadow on hover */
    transform: translateY(-3px); /* Apply hover transform */
}


/* --- General Text & Links --- */
p {
    margin-bottom: 1.5rem;
    color: var(--clr-grey); /* Use grey for standard paragraphs */
}
p:last-child {
    margin-bottom: 0;
}

a {
    color: var(--clr-primary-accent);
    text-decoration: none;
    transition: color var(--transition-speed) ease;
}
a:hover {
    color: var(--clr-primary-accent-darker);
    text-decoration: underline;
}


/* ========================================= */
/*              HEADER & NAVIGATION          */
/* ========================================= */
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 var(--padding-x-section); /* Use section padding */
  height: var(--header-height);
  background-color: var(--clr-dark); /* Use dark color from palette */
  position: fixed;
  width: 100%;
  top: 0; /* Ensure it sticks to the top */
  left: 0; /* Ensure it spans full width */
  z-index: 1000; /* Ensure it's above other content */
  box-shadow: var(--shadow-md); /* Add shadow for separation */
  background: linear-gradient(to right, var(--clr-dark), var(--clr-primary-accent));
  background-size: 200% 100%;
  animation: gradientAnimation 10s ease infinite;
}

.header-logo {
  height: calc(var(--header-height) * 0.7); /* Make logo slightly smaller than header */
  width: auto;
  /* filter: brightness(0) invert(1); (Use if logo isn't white) */
}

.nav {
  display: flex;
  align-items: center;
  column-gap: 3rem; /* Adjusted gap */
}

.nav-links:link,
.nav-links:visited {
  display: inline-block;
  font-size: 1.5rem; /* Slightly smaller nav links */
  font-weight: 500; /* Bolder nav links */
  color: var(--clr-text-light);
  text-decoration: none;
  letter-spacing: 0.5px;
  text-transform: uppercase; /* Keep uppercase if desired */
  transition: color var(--transition-speed) ease, border-bottom-color var(--transition-speed) ease; /* Added border-bottom-color to transition */
  padding: 0.5rem 0; /* Add padding for better click area */
  border-bottom: 2px solid transparent; /* Prepare for hover effect */
}

.nav-links:hover,
.nav-links:active {
  color: var(--clr-primary-accent); /* Accent color on hover */
  border-bottom-color: var(--clr-primary-accent); /* Activated underline effect */
  text-decoration: none; /* Remove default underline */
}


/* ========================================= */
/*                HERO SECTION               */
/* ========================================= */
.hero {
  /* Remove layout properties, handled by container and flex */
  /* padding is now handled by the inner .container */
  padding: 0; /* Remove section padding */
  min-height: 80vh; /* Use min-height instead of fixed height */
  display: flex; /* Use Flexbox for centering */
  align-items: center;
  justify-content: center;
  text-align: center;
  position: relative; /* Needed for pseudo-element overlay */
  background-image: url('img/code-background-placeholder.webp'); /* Placeholder */
  background-size: cover;
  background-position: center;
  overflow: hidden; /* Ensures overlay fits perfectly */
}

.hero::before { /* Gradient overlay */
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(rgba(var(--rgb-dark-overlay), 0.75), rgba(var(--rgb-dark-overlay), 0.6)); /* Dark overlay */
    z-index: 1; /* Behind the content */
}

/* Ensure hero content is above the overlay */
.hero-container {
    position: relative;
    z-index: 2;
    /* Container class already handles max-width and padding */
    /* Center content within the container */
    display: flex;
    flex-direction: column;
    align-items: center;
}

.hero-description {
  margin: 2rem 0 3rem 0; /* Adjusted margins */
  color: var(--clr-light); /* MODIFIED: Light text for hero */
  font-size: 1.8rem; /* Slightly larger description */
  max-width: 60ch; /* Adjusted max-width */
  line-height: 1.7;
}

/* Hero Buttons Alignment */
.hero-container > .btn {
    margin-right: 1.5rem; /* Space between buttons */
    margin-bottom: 1rem; /* Space below buttons if they wrap */
}
/* Ensure last button doesn't have right margin */
.hero-container > .btn:last-child {
    margin-right: 0;
}


/* ========================================= */
/*       ABOUT / EXPERTISE SECTION           */
/* ========================================= */
#about { /* Use ID selector for specificity */
    background-color: var(--clr-white); /* Optional: slightly different background */
}
#about .container { /* Apply padding specifically to the container in this section */
    padding-top: var(--padding-y-section);
    padding-bottom: var(--padding-y-section);
}

.about-description {
  /* Removed fixed width, rely on container */
  max-width: 75ch; /* Limit line length */
  margin-left: auto; /* Center if needed, or remove for left align */
  margin-right: auto; /* Center if needed, or remove for left align */
  text-align: center; /* Center the description */
  margin-bottom: var(--gap-section); /* Space below description */
  color: var(--clr-grey);
}

.about-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* Responsive columns */
  gap: calc(var(--gap-section) / 1.5); /* Slightly smaller gap */
}

.about-box {
    background-color: var(--clr-white); /* Ensure white background if section is colored */
    padding: 3rem;
    border-radius: var(--border-radius-md);
    box-shadow: var(--shadow-sm);
    text-align: center; /* Center content within the box */
    transition: transform var(--transition-speed) ease, box-shadow var(--transition-speed) ease;
}

.about-box:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-md);
}

.about-logo { /* Style the icons */
  height: 4rem; /* Adjusted size */
  width: 4rem; /* Adjusted size */
  padding: 1.5rem; /* Adjusted padding */
  border-radius: 50%;
  color: var(--clr-white); /* White icon */
  background-color: var(--clr-primary-accent); /* Accent background */
  margin-bottom: 2rem; /* Increased margin */
  display: inline-flex; /* Correct centering */
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-sm);
}

.about-heading { /* Corresponds to H3 in the box */
  font-size: 2.2rem; /* Adjusted size */
  font-weight: 600;
  color: var(--clr-dark); /* Use dark color */
  margin-bottom: 1rem;
}

.about-box-description {
  font-size: 1.5rem;
  line-height: 1.7; /* Slightly more line height */
  color: var(--clr-grey);
}


/* ========================================= */
/*       SERVICES / PROJECTS SECTION         */
/* ========================================= */
#services .container { /* Apply padding specifically to the container in this section */
    padding-top: var(--padding-y-section);
    padding-bottom: var(--padding-y-section);
}

/* Reusing 'properties' classes for Services */
.properties-set {
  display: flex;
  flex-direction: column;
  align-items: stretch; /* Stretch cards to full width */
  gap: var(--gap-section);
}

.properties-card {
  padding: 0; /* Remove padding, handle internally */
  display: flex; /* Use flexbox for content alignment */
  flex-direction: column; /* Stack content vertically */
  align-items: stretch; /* Stretch content vertically */
  gap: 0; /* No gap, image touches container */
  width: 100%;
  background: linear-gradient(45deg, var(--clr-light-grey), var(--clr-light), var(--clr-light-grey)); /* Lighter Gradient background */
  background-size: 200% 200%; /* Make background larger for animation */
  border-radius: var(--border-radius-lg); /* Consistent rounding */
  box-shadow: var(--shadow-md); /* Add shadow */
  overflow: hidden; /* Important for image rounding */
  transition: box-shadow var(--transition-speed) ease;
  animation: gradientAnimation 8s ease infinite; /* Apply gradient animation */
}
.properties-card:hover {
    box-shadow: var(--shadow-lg);
}

/* Removed alternate layout rules as images are removed */

/* Removed image style rule as images are removed */

.properties-container {
  padding: 4rem; /* Consistent padding */
}

.properties-loc {
  /* Removed - Not relevant for services */
}

.properties-card-container { /* For feature icons/tags */
  display: flex;
  flex-wrap: wrap; /* Allow wrapping */
  align-items: center;
  gap: 1rem;
  margin-top: 1.5rem; /* Space above features */
  margin-bottom: 2rem; /* Space below features */
}

.properties-cards { /* Individual feature tag */
  display: inline-flex; /* Use inline-flex */
  align-items: center;
  gap: 0.8rem;
  background-color: var(--clr-light); /* Use light background */
  color: var(--clr-grey); /* Use grey text */
  font-size: 1.3rem; /* Smaller font size */
  padding: 0.6rem 1.2rem;
  border-radius: var(--border-radius-sm);
  border: 1px solid var(--clr-light-grey); /* Subtle border */
}

.properties-price {
  /* Removed - Not relevant */
}

.properties-card-logo {
  height: 1.8rem; /* Smaller icons */
  width: 1.8rem;
  color: var(--clr-primary-accent); /* Use accent color for icons */
}

.properties-description {
  font-size: 1.5rem; /* Consistent font size */
  line-height: 1.7;
  color: var(--clr-grey);
  margin-top: 1.5rem; /* Space above description */
  margin-bottom: 3rem; /* Space below description */
}

.properties-list-links {
  display: flex;
  align-items: center;
  gap: 1.5rem; /* Reduced gap */
}

/* Share link (optional) */
.properties-link-logo {
    padding: 1rem; /* Make it squarer */
    line-height: 1; /* Ensure icon is centered vertically */
    background-color: var(--clr-light);
    color: var(--clr-grey);
    border: 1px solid var(--clr-light-grey);
}
.properties-link-logo:hover {
    background-color: var(--clr-light-grey);
    color: var(--clr-dark);
}
.properties-source-logo {
    height: 2rem;
    width: 2rem;
}

.properties-more:link,
.properties-more:visited {
  display: inline-block; /* Make it block/inline-block for margin */
  text-decoration: none;
  font-size: 1.6rem;
  font-weight: 500;
  color: var(--clr-primary-accent);
  margin-top: 2rem; /* Space above this link */
  /* text-align: center; (Centered via parent div) */
}
.properties-more:hover,
.properties-more:active {
  color: var(--clr-primary-accent-darker);
  text-decoration: underline;
}


/* ========================================= */
/*              PROJECTS SECTION             */
/* ========================================= */
#projects .container {
    padding-top: var(--padding-y-section);
    padding-bottom: var(--padding-y-section);
}

.projects-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* Responsive columns */
  gap: calc(var(--gap-section) / 1.5); /* Slightly smaller gap for grid */
  margin-top: var(--gap-section); /* Space above the grid */
}

/* Individual project card styles */
.project-card {
  background-color: var(--clr-white);
  border-radius: var(--border-radius-lg);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  transition: transform var(--transition-speed) ease, box-shadow var(--transition-speed) ease;
  display: flex;
  flex-direction: column;
}

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

.project-card-image {
  width: 100%;
  height: 220px; /* Adjusted height */
  object-fit: cover;
}

.project-card-content {
  padding: 2.5rem; /* Slightly less padding */
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.project-card-content .ternary-heading {
  margin-bottom: 1rem;
  font-size: 2.4rem; /* Adjusted heading size */
}

.project-stage {
    margin-bottom: 1.5rem; /* Space below the badge */
    text-align: right; /* Align badge to the right */
}

.stage-badge {
    display: inline-block;
    font-size: 1.2rem;
    font-weight: 600;
    padding: 0.4rem 0.8rem;
    border-radius: var(--border-radius-sm);
    text-transform: uppercase;
    color: var(--clr-white); /* White text */
    background-color: var(--clr-primary-accent); /* Accent color as background */
    box-shadow: var(--shadow-sm); /* Subtle shadow */
}

/* Optional: Add different colors based on stage */
.stage-badge.completed {
    background-color: #28a745; /* Green for completed */
}

.stage-badge.in-progress {
    background-color: #ffc107; /* Yellow for in progress */
    color: var(--clr-dark); /* Dark text for visibility on yellow */
}

.stage-badge.planning {
    background-color: #007bff; /* Blue for planning */
}

.project-card-description {
  font-size: 1.5rem;
  line-height: 1.7;
  color: var(--clr-grey);
  margin-bottom: 2rem;
  flex-grow: 1;
}

.project-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem; /* Smaller gap */
  margin-bottom: 2rem;
}

.project-card-tag {
  background-color: var(--clr-light);
  color: var(--clr-primary-accent);
  font-size: 1.2rem;
  font-weight: 500;
  padding: 0.4rem 0.9rem; /* Adjusted padding */
  border-radius: var(--border-radius-sm);
  border: 1px solid var(--clr-primary-accent);
}

.project-card-cta {
  margin-top: auto;
  text-align: left;
}

.project-card-link {
  display: block; /* Make the link a block element */
  text-decoration: none; /* Remove default underline */
  color: inherit; /* Inherit text color */
}

.project-card-link:hover .project-card {
  transform: translateY(-5px); /* Apply the hover transform to the card */
  box-shadow: var(--shadow-lg); /* Apply the hover shadow to the card */
}


/* ========================================= */
/*             TESTIMONIAL SECTION           */
/* ========================================= */
#testimonial .container {
    padding-top: var(--padding-y-section);
    padding-bottom: var(--padding-y-section);
}

.testimonial-container {
  display: grid;
  grid-template-columns: 1fr 1fr; /* Keep 1fr 1fr for two main columns */
  gap: var(--gap-section);
  margin-top: var(--gap-section);
  align-items: start; /* Align items to the start */
}

.testimonial-box:first-child { /* Grid for text testimonials */
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* Responsive columns */
  gap: calc(var(--gap-section) / 2);
}

.testimonial-card {
    background-color: var(--clr-white);
    padding: 2.5rem;
    border-radius: var(--border-radius-md);
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    transition: transform var(--transition-speed) ease, box-shadow var(--transition-speed) ease;
}

.testimonial-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-md);
}

.testimonial-img {
  height: 6rem;
  width: 6rem;
  object-fit: cover;
  border-radius: 50%;
  margin-bottom: 1.5rem;
  box-shadow: var(--shadow-sm);
  align-self: center; /* Center image */
}

.testimonial-description {
  margin: 0 0 1.5rem 0;
  color: var(--clr-text-dark);
  font-size: 1.5rem;
  font-style: italic;
  flex-grow: 1;
}

.testimonial-author {
  color: var(--clr-grey);
  font-size: 1.4rem;
  font-weight: 500;
  text-align: center; /* Center author */
  margin-top: auto;
}
.testimonial-author::before {
    content: "— ";
}

/* Grid for images */
.testimonial-box.img-box {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 1rem; /* Adjusted gap */
}

.testimonial-photo-box {
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: var(--border-radius-md);
  box-shadow: var(--shadow-sm);
}

.testimonial-photo {
  display: block;
  height: 100%;
  width: 100%;
  object-fit: cover;
  transition: transform var(--transition-speed) ease, filter var(--transition-speed) ease;
}

.testimonial-photo:hover {
  transform: scale(1.05);
  filter: brightness(1.1);
}


/* ========================================= */
/*              CONTACT SECTION              */
/* ========================================= */
#contact .container {
    padding-top: var(--padding-y-section);
    padding-bottom: var(--padding-y-section);
}

.contact-heading {
  text-align: center;
  margin-bottom: var(--gap-section);
}

.contact-container {
  max-width: 700px;
  margin: 0 auto;
  background-color: var(--clr-white);
  padding: 4rem;
  border-radius: var(--border-radius-lg);
  box-shadow: var(--shadow-md);
}

.contact-form-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
}

.contact-box {
    margin-bottom: 2rem;
}
.contact-box.full-width {
    grid-column: 1 / -1;
}

.contact-label {
  display: block;
  margin-bottom: 0.8rem;
  font-weight: 500;
  font-size: 1.4rem;
  color: var(--clr-dark);
}

.contact-input {
  width: 100%;
  padding: 1.2rem 1.5rem;
  border: 1px solid var(--clr-light-grey);
  border-radius: var(--border-radius-sm);
  font-family: inherit;
  font-size: 1.6rem;
  color: var(--clr-text-dark);
  background-color: var(--clr-light);
  transition: border-color var(--transition-speed) ease, box-shadow var(--transition-speed) ease;
}

.contact-input:focus {
  outline: none;
  border-color: var(--clr-primary-accent);
  box-shadow: 0 0 0 0.3rem rgba(var(--rgb-primary-accent), 0.25);
}

.contact-input::placeholder {
  color: var(--clr-grey);
  opacity: 0.7;
}

textarea.contact-input {
  min-height: 150px;
  resize: vertical;
}

.contact-link { /* Wrapper for the submit button */
    display: block; /* Ensure link takes full width for centering */
    text-align: center; /* Center the button */
    margin-top: 3rem;
}

.contact-link .btn { /* Style the button within the link container */
    /* Inherits button styles */
}


/* ========================================= */
/*                 FOOTER                    */
/* ========================================= */
.footer {
  background-color: var(--clr-dark);
  color: var(--clr-light-grey);
  padding-top: var(--padding-y-section);
  padding-bottom: var(--padding-y-section);
  font-size: 1.4rem;
}

.footer .container.footer-grid { /* Use container for padding and grid layout */
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--gap-section);
    align-items: start;
}

.footer-container {
  display: flex;
  flex-direction: column;
  /* align-items: center; (Align items to center if needed) */
}

.footer-heading {
  font-size: 1.8rem;
  font-weight: 600;
  color: var(--clr-white);
  margin-bottom: 2rem;
}

.footer-logo {
  height: calc(var(--header-height) * 0.6);
  width: auto;
  /* filter: brightness(0) invert(1); (Use if logo isn't white) */
  margin-bottom: 2rem;
}

.copyright {
  margin-top: auto; /* Push copyright to the bottom */
  color: var(--clr-grey);
}

.social-container {
  /* Removed flex properties */
}

.social-links-list {
  list-style: none;
  display: flex;
  gap: 1.5rem;
  /* justify-content: center; (Center social icons if needed) */
}

.footer-social-logo {
    height: 2.4rem;
    width: 2.4rem;
    color: var(--clr-light-grey);
    transition: color var(--transition-speed) ease;
}
.footer-social-logo:hover {
    color: var(--clr-primary-accent);
}

.social {
  /* Removed flex properties */
}

.address {
  font-style: normal;
  line-height: 1.6;
  color: var(--clr-grey);
}

.contact address { /* Target the contact address block */
    font-style: normal;
}

.social-link:link,
.social-link:visited {
    display: inline-block; /* Ensure padding works */
    text-decoration: none;
    transition: transform var(--transition-speed) ease;
}
.social-link:hover,
.social-link:active {
    transform: translateY(-2px); /* Subtle lift */
}


/* ========================================= */
/*              ANIMATIONS                   */
/* ========================================= */
/* fadeInUp - Basic fade and slide up */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Gradient Animation */
@keyframes gradientAnimation {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.animate-on-scroll {
    opacity: 0; /* Initially hidden */
    transform: translateY(20px); /* Slightly down initially */
    transition: opacity var(--transition-speed) ease-out, transform var(--transition-speed) ease-out;
}

.animate-on-scroll.is-visible {
    opacity: 1;
    transform: translateY(0);
}


/* ========================================= */
/*              RESPONSIVE DESIGN            */
/* ========================================= */
/* Adjustments for medium devices (tablets) */
@media (max-width: 992px) {
    :root {
        /* Adjust spacing for smaller screens */
        --padding-x-section: 4rem;
        --padding-y-section: 6rem;
        --gap-section: 4rem;
    }

    .primary-heading { font-size: 4.2rem; letter-spacing: -1.5px; }
    .secondary-heading { font-size: 3.2rem; letter-spacing: -1px; }
    .ternary-heading { font-size: 2.4rem; }

    .header { padding: 0 var(--padding-x-section); }
    .nav { column-gap: 2rem; }
    .nav-links:link, .nav-links:visited { font-size: 1.4rem; }

    .hero .container { /* Adjust hero container specifically */
        padding-top: calc(var(--header-height) + var(--padding-y-section));
        padding-bottom: var(--padding-y-section);
    }

    .properties-card,
    .properties-card:nth-child(even) {
        grid-template-columns: 1fr; /* Stack service cards */
    }
     .properties-card:nth-child(even) .properties-img,
     .properties-container {
        order: 0; /* Reset order for stacking */
    }
    .properties-img {
        height: 200px; /* Adjust image height when stacked */
    }
     .properties-container { padding: 3rem; }

    .testimonial-container { grid-template-columns: 1fr; } /* Stack testimonial grids */
    .testimonial-box.img-box { grid-template-columns: repeat(2, 1fr); } /* Keep image grid 2x2 */

    .contact-form-inner { grid-template-columns: 1fr; } /* Stack form fields */
    .contact-box.full-width { grid-column: 1 / -1; } /* Still works */
}

/* Adjustments for small devices (landscape phones) */
@media (max-width: 768px) {
     :root {
         --padding-x-section: 2rem;
         --padding-y-section: 4rem;
         --gap-section: 3rem;
     }

    html { font-size: 58%; } /* Slightly smaller base font */

    .header { /* Consider adding mobile nav toggle here */
        flex-direction: column; /* Stack logo and nav */
        height: auto; /* Allow height to adjust */
        padding: 1rem var(--padding-x-section);
    }

    .nav {
        margin-top: 1rem;
        column-gap: 1.5rem; /* Smaller gap */
    }

    .primary-heading { font-size: 3.6rem; }
    .secondary-heading { font-size: 2.8rem; }

    .hero .container { /* Further adjust hero container */
        padding-top: calc(var(--header-height) + var(--padding-y-section) + 4rem); /* More space for stacked header */
        padding-bottom: var(--padding-y-section);
    }

    .hero-description { font-size: 1.6rem; max-width: 90%; }
    .hero-container > .btn { margin-right: 1rem; padding: 1rem 2rem; font-size: 1.5rem;}
    .hero-buttons {
        flex-direction: column; /* Stack buttons */
        gap: 1rem; /* Space between stacked buttons */
        align-items: center; /* Center stacked buttons */
    }

    .about-container { grid-template-columns: 1fr; } /* Stack about boxes */
    .properties-card { grid-template-columns: 1fr; } /* Ensure stacking */
    .properties-card:nth-child(even) .properties-img,
    .properties-container { padding: 2.5rem;}

    .testimonial-box:first-child { grid-template-columns: 1fr; } /* Stack testimonial cards */
    .testimonial-box.img-box { grid-template-columns: repeat(2, 1fr); gap: 1rem; }

    .footer .container.footer-grid { grid-template-columns: 1fr; text-align: center; }
    .footer-container { align-items: center; }
    .footer-logo { margin-left: auto; margin-right: auto;}
    .social-links-list { align-items: center; }
    .copyright { margin-top: 2rem; text-align: center;}
    .address { text-align: center; }
    .footer .social-link { justify-content: center; }
}

/* Adjustments for very small devices */
@media (max-width: 480px) {
    :root {
         --padding-x-section: 1.5rem;
         --padding-y-section: 3rem;
         --gap-section: 2rem;
    }
    .primary-heading { font-size: 3rem; }
    .secondary-heading { font-size: 2.4rem; }
    .ternary-heading { font-size: 2rem; }

    .hero-description { font-size: 1.5rem; }
    .hero-container > .btn { font-size: 1.4rem; padding: 0.8rem 1.5rem;}

    .about-box { padding: 2rem; }
    .properties-container { padding: 2rem; }
    .project-card-content { padding: 2rem;}
    .testimonial-card { padding: 2rem; }
    .contact-container { padding: 3rem; }
    .footer .container.footer-grid { gap: 3rem; }
}

/* ------------------------------ */
/* *** Hero Background Animation *** */
/* ------------------------------ */

.hero-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000; /* Dark background for stars */
  overflow: hidden;
  z-index: -1; /* Ensure it's behind the content */
}

.hero-background::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(#fff, transparent);
  animation: falling-stars 5s linear infinite;
  transform-origin: bottom;
}

@keyframes falling-stars {
  0% { transform: translateY(-100%) rotate(0deg); opacity: 1; }
  100% { transform: translateY(100%) rotate(180deg); opacity: 0; }
}

/* ========================================= */
/*             PROJECT DETAIL PAGE           */
/* ========================================= */
#project-detail .container {
    padding-top: var(--padding-y-section);
    padding-bottom: var(--padding-y-section);
    text-align: center;
}

.project-image-container {
    width: 90%; /* Increased width */
    max-width: 900px; /* Increased max-width for wider layout */
    height: auto; /* Allow height to adjust */
    padding: 4rem; /* Adjust padding if necessary, keep it generous */
    margin: 3rem auto; /* Center the container */
    border-radius: var(--border-radius-lg);
    overflow: hidden;
    display: flex; /* Use flexbox */
    flex-direction: row; /* Arrange items horizontally */
    justify-content: center; /* Center content horizontally */
    align-items: center; /* Center content vertically */
    gap: 4rem; /* Add space between heading and image */
    background: linear-gradient(to right, #a8edea, #fed6e3); /* Adjusted gradient direction */
    box-shadow: var(--shadow-md);
}

.project-image-container .primary-heading {
    color: var(--clr-dark);
    margin-bottom: 0; /* Remove bottom margin as it's not stacked */
    flex-basis: 50%; /* Give heading space */
    text-align: right; /* Align text to the right */
}

.project-detail-image {
    display: block;
    max-width: 40%; /* Adjust image size to fit horizontally */
    height: auto;
    object-fit: contain;
    flex-basis: 50%; /* Give image space */
}

/* Add responsive adjustments */
@media (max-width: 768px) {
    .project-image-container {
        flex-direction: column; /* Stack content on smaller screens */
        gap: 2rem; /* Adjust gap for stacking */
        padding: 3rem; /* Adjust padding */
    }

    .project-image-container .primary-heading {
        text-align: center; /* Center text when stacked */
        margin-bottom: 1rem; /* Add margin back */
        flex-basis: auto; /* Reset flex basis */
    }

    .project-detail-image {
        max-width: 60%; /* Make image larger when stacked */
        flex-basis: auto; /* Reset flex basis */
    }
}

/* ------------------------------ */
/*       AI Test Section         */
/* ------------------------------ */
#ai-test-section {
    margin-top: 4rem;
    padding: 3rem;
    background-color: var(--clr-white);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-md);
}

#generated-test-area .contact-box,
.initial-questions .contact-box {
    margin-bottom: 2.5rem; /* Increased space between questions */
}

#ai-comment-area {
    margin-top: 3rem;
    font-size: 1.8rem;
    line-height: 1.7;
    color: var(--clr-text-dark);
}

#animation-area {
    margin-top: 3rem;
    min-height: 150px; /* Ensure animation area has some height */
    display: flex;
    justify-content: center;
    align-items: center;
    /* Add your animation styles here */
    /* Example: background for visualization */
    background-color: #e9ecef; /* Light grey background */
    border-radius: var(--border-radius-md);
    /* Add animation properties later */
}

.connecting-dots {
    position: relative;
    width: 150px; /* Container width for dots */
    height: 50px; /* Container height for dots */
    display: flex;
    justify-content: space-between; /* Space out the dots */
    align-items: center;
}

.dot {
    width: 20px;
    height: 20px;
    background-color: var(--clr-primary-accent); /* Accent color for dots */
    border-radius: 50%;
    position: absolute;
}

.dot-1 {
    left: 0;
    animation: pulse 1.5s infinite ease-in-out alternate;
}

.dot-2 {
    right: 0;
    animation: pulse 1.5s infinite ease-in-out alternate reverse;
}

.connection-line {
    position: absolute;
    width: 100%;
    height: 4px; /* Thickness of the line */
    background: linear-gradient(to right, var(--clr-primary-accent), var(--clr-primary-accent-darker)); /* Gradient line */
    z-index: -1; /* Behind the dots */
    transform: scaleX(0); /* Start with no width */
    animation: drawLine 1.5s infinite ease-in-out alternate;
}

@keyframes pulse {
    0% { transform: scale(1); }
    100% { transform: scale(1.2); }
}

@keyframes drawLine {
    0% { transform: scaleX(0); }
    100% { transform: scaleX(1); }
}