/* =========================================
   CSS Reset & Variables
   ========================================= */
:root {
  --primary-color: #0c0c0c;
  --secondary-color: #ffffff;
  --text-color: #fafafa;
  --text-muted: rgba(255, 255, 255, 0.85);
  --btn-bg: #111111;
  --btn-text: #ffffff;
  --nav-link-color: #0f0f0f;
  /* Depends on the design, navbar is light on left? Wait, the design has black text for nav, but it's superimposed on sky. Actually the sky in the image is bright, so black text is used for nav */

  --font-main: 'Inter', system-ui, -apple-system, sans-serif;
  --section-pad: 10%;
}

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

body {
  font-family: var(--font-main);
  background-color: var(--primary-color);
  color: var(--text-color);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  text-decoration: none;
  color: inherit;
}

/* =========================================
   Typography & Buttons
   ========================================= */

h1 {
  font-weight: 700;
  letter-spacing: -0.02em;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 24px;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  border-radius: 4px;
  transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
  cursor: pointer;
  border: none;
  font-family: var(--font-main);
}

.btn-primary {
  background-color: var(--btn-bg);
  color: var(--btn-text);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.btn-primary:hover {
  background-color: #2a2a2a;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.btn-secondary {
  background-color: var(--btn-bg);
  color: var(--btn-text);
}

.btn-secondary:hover {
  background-color: #2a2a2a;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.arrow {
  margin-left: 8px;
  font-size: 1rem;
  transition: transform 0.3s ease;
}

.btn:hover .arrow {
  transform: translateX(4px);
}

/* =========================================
   Hero Section Layout
   ========================================= */

.hero {
  position: relative;
  width: 100%;
  height: 100vh;
  /* Full viewport height */
  min-height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.hero-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  background: url('assets/Hero Bg.jpg') center center/cover no-repeat;
  /* Fallback color */
  background-color: #2a3439;
}

.hero-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(17, 17, 17, 0.05);
}

/* =========================================
   Navbar
   ========================================= */

.navbar {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  padding: 30px var(--section-pad);
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 1000;
  /* Increased to ensure it sits above all hero layers */
}

.logo img {
  height: 32px;
  width: auto;
  object-fit: contain;
}

.fallback-logo {
  border-radius: 4px;
}

.nav-links {
  display: flex;
  gap: 32px;
  /* From the design, nav links look dark because the sky is bright */
  color: var(--nav-link-color);
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0.05em;
}

.nav-links a {
  position: relative;
  padding-bottom: 4px;
  transition: color 0.3s ease;
}

/* Underline hover effect for Nav */
.nav-links a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0%;
  height: 2px;
  background-color: var(--nav-link-color);
  transition: width 0.3s ease;
}

.nav-links a:hover::after {
  width: 100%;
}

/* No specific override needed currently */

/* =========================================
   Mobile Hamburger Menu
   ========================================= */

.menu-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 10px;
  z-index: 100;
}

.hamburger {
  display: block;
  position: relative;
  width: 24px;
  height: 2px;
  background-color: white;
  transition: all 0.3s ease;
}

.hamburger::before,
.hamburger::after {
  content: '';
  position: absolute;
  width: 24px;
  height: 2px;
  background-color: white;
  transition: all 0.3s ease;
  left: 0;
}

.hamburger::before {
  top: -8px;
}

.hamburger::after {
  top: 8px;
}

@media (max-width: 900px) {
  .menu-toggle {
    display: block;
    z-index: 110;
  }

  .nav-contact-btn {
    display: none;
  }

  .nav-links {
    position: absolute;
    top: 15px;
    right: var(--section-pad);
    left: auto;
    width: 140px;
    background-color: #ffffff;
    flex-direction: column;
    padding: 50px 15px 15px;
    text-align: center;
    border-radius: 6px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    opacity: 0;
    pointer-events: none;
    transform: translateY(-10px);
    transition: all 0.3s ease;
    z-index: 105;
    gap: 15px;
  }

  .nav-links a {
    color: #111111;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0;
  }

  .nav-links a::after {
    display: none;
    /* remove hover underline on mobile */
  }

  /* Style the 4th link (CONTACT) as a button */
  .nav-links a:last-child {
    background-color: #1a1a1a;
    color: #ffffff;
    padding: 10px 0;
    border-radius: 4px;
    margin-top: 5px;
  }

  .navbar.nav-open .nav-links {
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: translateY(0) !important;
    visibility: visible !important;
  }

  .navbar.nav-open .hamburger {
    background-color: transparent !important;
  }

  .navbar.nav-open .hamburger::before {
    transform: rotate(45deg);
    top: 0;
    background-color: #111111 !important;
  }

  .navbar.nav-open .hamburger::after {
    transform: rotate(-45deg);
    top: 0;
    background-color: #111111 !important;
  }
}

/* =========================================
   Hero Center Content
   ========================================= */

.hero-center {
  position: absolute;
  top: 195px;
  left: 50%;
  transform: translateX(-50%);
  width: 90%;
  max-width: 1200px;
  text-align: center;
  z-index: 2;
}

/* =========================================
   Responsive Adjustments for Hero
   ========================================= */

@media (max-width: 900px) {
  .hero-bg {
    background-position: center bottom;
  }


  .hero {
    min-height: 100vh;
  }

  .hero-center {
    top: 130px;
    z-index: 4;
    /* On mobile, we might want it above to be safe, but lets keep it 2 and rely on object-position */
  }
}

@media (max-width: 600px) {
  .hero-center {
    top: 110px;
  }

  .hero-title {
    background: none;
    -webkit-text-fill-color: initial;
  }
}

.hero-title {
  font-weight: 500;
  font-size: clamp(3rem, 5vw, 5.5rem);
  line-height: 1.1;
  color: #fff3df;
  text-shadow: 0 4px 24px rgba(17, 17, 17, 0.6), 0 2px 8px rgba(17, 17, 17, 0.35);
  /* Smooth entrance animation */
  animation: fadeUp 1s ease-out forwards;
  opacity: 0;
  transform: translateY(30px);
  margin-bottom: 40px;
}


@keyframes fadeIn {
  to {
    opacity: 1;
  }
}

@keyframes float {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-15px);
  }
}

@keyframes fadeUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* =========================================
   Hero Bottom Content
   ========================================= */

.hero-bottom-container {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 40px var(--section-pad);
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  z-index: 5;
}

.hero-bottom-left {
  max-width: 500px;
  animation: fadeInLeft 1s ease-out 0.3s forwards;
  opacity: 0;
  transform: translateX(-30px);
}

.hero-description {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--secondary-color);
  margin-bottom: 24px;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
}

@keyframes fadeInLeft {
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* =========================================
   Scroll Indicator
   ========================================= */

.hero-bottom-right {
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fadeInRight 1s ease-out 0.5s forwards;
  opacity: 0;
  transform: translateX(30px);
}

@keyframes fadeInRight {
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.scroll-indicator {
  position: relative;
  width: 120px;
  height: 120px;
  cursor: pointer;
  border-radius: 50%;
  transition: transform 0.3s ease;
}

.scroll-indicator:hover {
  transform: scale(1.05);
}

.scroll-icon-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.scroll-text {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  animation: spinSlowly 10s linear infinite;
}

/* Spinning animation for the circular text */
@keyframes spinSlowly {
  100% {
    transform: rotate(360deg);
  }
}

.scroll-arrow {
  position: absolute;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Slight bounce animation for the arrow */
  animation: bounceDown 2s infinite;
}

@keyframes bounceDown {

  0%,
  20%,
  50%,
  80%,
  100% {
    transform: translateY(0);
  }

  40% {
    transform: translateY(-6px);
  }

  60% {
    transform: translateY(-3px);
  }
}

/* =========================================
   About Us Section
   ========================================= */

.about {
  background-color: #ededed;
  padding: 100px var(--section-pad);
  color: #111111;
}

.container {
  width: 100%;
  max-width: 1300px;
  margin: 0 auto;
}

.about-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 80px;
  align-items: center;
}

.about-content {
  max-width: 520px;
}

.about-title {
  font-size: clamp(2.5rem, 4vw, 3.5rem);
  margin-bottom: 30px;
  color: #111111;
  font-weight: 700;
  text-transform: none;
}

.about-title .thin {
  font-weight: 300;
}

.about-description {
  font-size: 1.1rem;
  line-height: 1.7;
  color: #333333;
  margin-bottom: 40px;
}

.btn-dark {
  background-color: #0c0c0c;
  color: #ffffff;
  padding: 14px 36px;
  border-radius: 6px;
  font-weight: 600;
  letter-spacing: 0.1em;
  font-size: 0.85rem;
  transition: all 0.3s ease;
}

.btn-dark:hover {
  background-color: #333333;
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.about-image {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: flex-end;
}

.about-image img {
  width: 100%;
  height: auto;
  max-width: 700px;
  object-fit: cover;
  display: block;
}

/* =========================================
   Responsive Design
   ========================================= */

@media (max-width: 1024px) {
  .about-grid {
    grid-template-columns: 1fr;
    gap: 50px;
  }

  .about-content {
    max-width: 100%;
    text-align: center;
    margin: 0 auto;
  }

  .about-image {
    justify-content: center;
  }
}

@media (max-width: 900px) {
  /* Removed conflicting display:none that was hiding the menu card */

  .hero-bottom-container {
    flex-direction: column;
    align-items: flex-start;
    gap: 30px;
  }

  .scroll-indicator {
    width: 80px;
    height: 80px;
  }

  .hero-bottom-right {
    align-self: center;
  }

  .about {
    padding: 60px var(--section-pad);
  }
}

/* =========================================
   Why Choose Section
   ========================================= */

.why-choose {
  background-color: var(--secondary-color);
  padding: 120px var(--section-pad);
  color: #111111;
  text-align: center;
}

.section-header {
  max-width: 800px;
  margin: 0 auto 80px;
  text-align: center;
}

.section-header .section-title {
  font-size: clamp(2rem, 3.5vw, 2.8rem);
  font-weight: 300;
  margin-bottom: 20px;
  color: #111111;
}

.section-header .section-title .bold {
  font-weight: 700;
}

.section-subtitle {
  font-size: 1.15rem;
  color: #555555;
  line-height: 1.6;
}

.why-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px;
}

.why-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.why-icon {
  width: 60px;
  height: 60px;
  background-color: #f1f4f6;
  /* Light gray box background */
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 25px;
  transition: transform 0.3s ease;
}

.why-icon img {
  width: 24px;
  height: 24px;
}

.why-item:hover .why-icon {
  transform: translateY(-5px);
}

.why-item-title {
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 15px;
  color: #111111;
}

.why-item-description {
  font-size: 0.95rem;
  line-height: 1.7;
  color: #666666;
  max-width: 250px;
}

/* =========================================
   Responsive Adjustments for Why Choose
   ========================================= */

@media (max-width: 1024px) {
  .why-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 60px 40px;
  }
}

@media (max-width: 600px) {
  .why-choose {
    padding: 80px var(--section-pad);
  }

  .why-grid {
    grid-template-columns: 1fr;
    gap: 50px;
  }

  .section-header {
    margin-bottom: 50px;
  }
}

/* =========================================
   Services & Industries Section
   ========================================= */

.services {
  background-color: #ffffff;
  /* Contrast with the light gray About section */
  padding: 120px var(--section-pad);
  color: #111111;
}

/* Services Grid */
.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  margin-bottom: 120px;
}

.service-card {
  padding: 40px;
  border: 1px solid #f0f0f0;
  transition: all 0.3s ease;
  background-color: #ffffff;
}

.service-card:hover {
  border-color: #111111;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
  transform: translateY(-5px);
}

.service-icon-box {
  width: 50px;
  height: 50px;
  background-color: #f6f8f9;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 25px;
}

.service-icon-box img {
  width: 22px;
  height: 22px;
}

.service-card-title {
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 15px;
  color: #111111;
}

.service-card-text {
  font-size: 1rem;
  line-height: 1.6;
  color: #666666;
}

/* Industries We Serve */
.industries-inner-section {
  padding-top: 60px;
  text-align: center;
  border-top: 1px solid #f0f0f0;
}

.center-title {
  margin-bottom: 60px;
  font-weight: 300;
}

.center-title .bold {
  font-weight: 700;
}

.industries-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px;
}

.industry-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.industry-icon-box {
  width: 65px;
  height: 65px;
  background-color: #f1f4f6;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  transition: all 0.3s ease;
}

.industry-icon-box img {
  width: 26px;
  height: 26px;
}

.industry-item:hover .industry-icon-box {
  transform: scale(1.1);
  background-color: #e2e8ed;
}

.industry-name {
  font-size: 1.1rem;
  font-weight: 600;
  color: #111111;
}

/* =========================================
   Responsive Adjustments for Services
   ========================================= */

@media (max-width: 1100px) {
  .services-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 900px) {
  .services {
    padding: 80px var(--section-pad);
  }

  .services-grid {
    margin-bottom: 80px;
  }
}

@media (max-width: 768px) {
  .services-grid {
    grid-template-columns: 1fr;
  }

  .industries-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 50px 20px;
  }

  .service-card {
    padding: 30px;
  }
}

@media (max-width: 480px) {
  .industries-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}

/* =========================================
   Our Process Section
   ========================================= */

.process {
  background-color: var(--secondary-color);
  padding: 120px var(--section-pad);
  color: #111111;
  text-align: center;
}

.process .section-title {
  font-weight: 300;
}

.process .section-title .bold {
  font-weight: 700;
}

.process-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
  margin-top: 100px;
  /* Increased margin for top-positioned numbers */
}

.process-step {
  position: relative;
  padding: 60px 20px 20px;
  /* More top padding for the number */
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: transform 0.3s ease;
}

.process-step:hover {
  transform: translateY(-5px);
}

.step-number {
  font-size: 7.5rem;
  font-weight: 700;
  color: #eff4f8;
  /* Subtle blue-grey from design */
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 0;
  pointer-events: none;
  line-height: 1;
  font-family: var(--font-main);
}

.step-title {
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 20px;
  color: #111111;
  position: relative;
  z-index: 1;
  margin-top: 10px;
}

.step-description {
  font-size: 0.95rem;
  line-height: 1.7;
  color: #666666;
  max-width: 240px;
  position: relative;
  z-index: 1;
  text-align: center;
}

/* =========================================
   Our Commitment Section
   ========================================= */

.commitment {
  background-color: #f8f9fb;
  /* Subtle grey/blue from design */
  padding: 120px var(--section-pad);
  color: #111111;
}

.commitment .section-title {
  font-weight: 300;
  text-align: center;
}

.commitment .section-title .bold {
  font-weight: 700;
}

.commitment .section-subtitle {
  text-align: center;
  margin-bottom: 80px;
}

.commitment-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 60px 40px;
}

.commitment-item {
  display: flex;
  gap: 25px;
  align-items: flex-start;
}

.commitment-icon-box {
  flex-shrink: 0;
  width: 60px;
  height: 60px;
  background-color: #2b4b7c;
  /* Dark blue from design */
  display: flex;
  align-items: center;
  justify-content: center;
  /* subtle shadow */
  box-shadow: 0 4px 10px rgba(43, 75, 124, 0.15);
  transition: transform 0.3s ease;
}

.commitment-icon-box img {
  width: 28px;
  height: 28px;
}

.commitment-item:hover .commitment-icon-box {
  transform: translateY(-3px);
  box-shadow: 0 6px 15px rgba(43, 75, 124, 0.25);
}

.commitment-item-title {
  font-size: 1.15rem;
  font-weight: 600;
  margin-bottom: 12px;
  color: #111111;
  margin-top: 5px;
  /* Alignment with icon */
}

.commitment-item-description {
  font-size: 1rem;
  line-height: 1.6;
  color: #666666;
}

/* =========================================
   Responsive Adjustments for Commitment
   ========================================= */

@media (max-width: 900px) {
  .commitment-grid {
    grid-template-columns: 1fr;
    gap: 50px;
  }
}

@media (max-width: 600px) {
  .commitment {
    padding: 80px var(--section-pad);
  }
}

/* =========================================
   Contact Section
   ========================================= */

.contact {
  background-color: #ffffff;
  padding: 120px var(--section-pad);
  color: #111111;
}

.contact-wrapper {
  display: flex;
  justify-content: center;
  gap: 60px;
  margin-top: 60px;
  width: 100%;
}

/* Form Styles */
.contact-form {
  display: flex;
  flex-direction: column;
  gap: 25px;
}

.form-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 25px;
}

.input-group {
  display: flex;
  flex-direction: column;
}

.input-group label {
  font-size: 0.8rem;
  font-weight: 600;
  color: #333333;
  margin-bottom: 8px;
  letter-spacing: 0.05em;
}

.input-group input,
.input-group textarea {
  width: 100%;
  padding: 16px;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  font-family: var(--font-main);
  font-size: 1rem;
  color: #111111;
  background-color: #ffffff;
  transition: border-color 0.3s ease;
}

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

.input-group textarea {
  resize: vertical;
}

.btn-submit {
  align-self: flex-start;
  background-color: #111111;
  color: #ffffff;
  padding: 18px 40px;
  border: none;
  border-radius: 4px;
  font-family: var(--font-main);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 12px;
  transition: all 0.3s ease;
  width: 100%;
  justify-content: center;
}

.btn-submit:hover {
  background-color: #2a2a2a;
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.submit-icon {
  width: 16px;
  height: 16px;
}

/* Contact Info Cards */
.contact-info-container {
  display: flex;
  flex-direction: column;
  gap: 25px;
  width: 100%;
  max-width: 600px;
}

.info-card {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 30px;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  background-color: #ffffff;
}

.info-icon-box {
  width: 50px;
  height: 50px;
  background-color: #f4f6f8;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.info-icon-box img {
  width: 20px;
  height: 20px;
}

.info-title {
  font-size: 0.85rem;
  font-weight: 700;
  color: #111111;
  margin-bottom: 6px;
  letter-spacing: 0.05em;
}

.info-detail {
  font-size: 1rem;
  color: #666666;
}

/* =========================================
   Responsive Adjustments for Contact
   ========================================= */

@media (max-width: 900px) {
  .contact-wrapper {
    flex-direction: column;
    align-items: center;
    gap: 40px;
  }
}

@media (max-width: 600px) {
  .form-row {
    grid-template-columns: 1fr;
  }

  .contact {
    padding: 80px var(--section-pad);
  }
}

/* =========================================
   Footer Section
   ========================================= */

.footer {
  background-color: #0d121c;
  /* Deep dark blue from design */
  color: #94a3b8;
  /* Muted light grey text */
  padding-top: 100px;
}

.footer-top {
  display: grid;
  grid-template-columns: 2fr 1fr 1.5fr;
  gap: 60px;
  padding: 0 var(--section-pad) 80px;
}

.footer-brand {
  max-width: 320px;
}

.footer-logo {
  height: 38px;
  width: auto;
  margin-bottom: 25px;
}

.footer-description {
  font-size: 0.95rem;
  line-height: 1.7;
}

.footer-heading {
  color: #ffffff;
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  margin-bottom: 25px;
}

.footer-links ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.footer-links a {
  font-size: 0.95rem;
  transition: color 0.3s ease;
}

.footer-links a:hover {
  color: #ffffff;
}

.contact-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.contact-list li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.95rem;
}

.contact-list a {
  transition: color 0.3s ease;
}

.contact-list a:hover {
  color: #ffffff;
}

.footer-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.footer-bottom {
  text-align: center;
  padding: 30px var(--section-pad);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 0.85rem;
}

.footer-bottom a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.footer-credit {
  margin-top: 6px;
  font-size: 0.78rem;
  opacity: 0.5;
}

.footer-credit a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.footer-credit a:hover {
  opacity: 0.8;
}

/* =========================================
   Responsive Adjustments for Footer
   ========================================= */

@media (max-width: 900px) {
  .footer-top {
    grid-template-columns: 1fr;
    gap: 50px;
  }
}

@media (max-width: 600px) {
  .footer {
    padding-top: 80px;
  }
}

/* =========================================
   Responsive Adjustments for Process
   ========================================= */

@media (max-width: 1024px) {
  .process-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 60px 30px;
  }
}

@media (max-width: 600px) {
  .process {
    padding: 80px var(--section-pad);
  }

  .process-grid {
    grid-template-columns: 1fr;
    gap: 50px;
  }

  .step-number {
    font-size: 6rem;
  }
}