@import url("https://fonts.googleapis.com/css2?family=Momo+Trust+Sans:wght@200..800&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap");

/* ---------- ROOT VARIABLES (avionics theme) ---------- */
:root {
  --bg-color: #000000;
  --surface-color: #0a0a0a;
  --accent-color: #00f2ff;
  --text-primary: #ffffff;
  --text-secondary: #888888;
  --border-color: #1a1a1a;
  --header-height: 80px;
}

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

html,
body {
  /* font-family: "Momo Trust Sans", sans-serif; */
  scroll-behavior: smooth;
  background-color: var(--bg-color);
  color: var(--text-primary);
}

/* Lenis smooth scroll */
html.lenis {
  height: auto;
}

.lenis.lenis-smooth {
  scroll-behavior: auto;
}

.lenis.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}

.lenis.lenis-stopped {
  overflow: hidden;
}

.lenis.lenis-scrolling iframe {
  pointer-events: none;
}

/* ---------- CUSTOM NAVBAR ---------- */
header {
  background-color: transparent !important;
  width: 100%;
  height: 6vw;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 2rem;
  font-family: "Inter", sans-serif;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  transition: background-color 0.3s ease-out;
}

header.menu-open {
  background-color: #fff !important;
  border-bottom: 1px solid #000;
}

header .menu button {
  width: 5.5vw;
  height: 2.3vw;
  border-radius: 30px;
  font-family: "Inter", sans-serif;
  text-transform: uppercase;
  font-size: 0.9rem;
  background-color: transparent !important;
  border: 1px solid #fff;
  color: #fff;
  cursor: pointer;
  transition: all 0.3s ease-out;
}

header .menu button:hover {
  background-color: rgba(255, 255, 255, 0.1) !important;
  color: #fff;
}

header.menu-open .menu button {
  border: 1px solid #333;
  color: #000;
}

header.menu-open .menu button:hover {
  background-color: #f5f1ed !important;
  color: #000;
}

header .logo-center {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease-out;
}

header.menu-open .logo-center {
  opacity: 1;
  pointer-events: auto;
}

header .logo-center img {
  width: 15vw;
  height: auto;
}

header .logo img {
  width: 15rem;
}

/* Hamburger Menu */
.hamburger-menu {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #fff;
  z-index: 999;
  display: none;
  flex-direction: row;
  padding: 0;
}

.hamburger-menu.active {
  display: flex;
  animation: slideLeft 0.5s ease-out forwards;
}

.hamburger-menu.closing {
  display: flex;
  animation: slideLeftOut 0.5s ease-out forwards;
}

@keyframes slideLeft {
  from {
    transform: translateX(-100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes slideLeftOut {
  from {
    transform: translateX(0);
    opacity: 1;
  }
  to {
    transform: translateX(-100%);
    opacity: 0;
  }
}

.menu-content {
  display: flex;
  width: 100%;
  height: 100%;
}

.menu-left {
  /* width: 30%; */
  background-color: #f5f1ed;
  display: flex;
  align-items: center;
  padding: 0 2rem;
  border-right: 1px solid #000;
}

.menu-right {
  /* width: 70%; */
  background-color: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.menu-right img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: opacity 0.4s ease-out, transform 0.6s ease-out;
  transform: scale(1);
  display: block;
}

.menu-right img.active {
  transform: scale(1.05);
}

.hamburger-menu .menu-items {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin: 0;
  padding: 0;
}

.hamburger-menu .menu-items li a {
  color: #000;
  font-size: 18px;
  text-decoration: none;
  font-family: "Inter", sans-serif;
  font-weight: 500;
  transition: all 0.3s ease-out;
  display: block;
  padding: 0.5rem 0;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.hamburger-menu .menu-items li a:hover {
  color: #666;
}

/* Ensure the menu content is above the background and clickable */
.hamburger-menu {
  pointer-events: none; /* Block clicks when hidden */
  opacity: 0;
  visibility: hidden;
  transition: all 0.5s ease;
}

.hamburger-menu.active {
  pointer-events: auto; /* Enable clicks when visible */
  opacity: 1;
  visibility: visible;
}

.menu-items li a {
  display: block;
  position: relative;
  z-index: 100; /* Force links to the top */
  cursor: pointer !important;
}

/* Mobile styles */
@media (max-width: 768px) {
  header {
    height: 20vw;
    padding: 0 1rem !important;
    background-color: rgba(0, 0, 0, 0.5) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }
  header .logo {
    height: 100%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    /* background-color: red; */
  }
  header .logo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    padding-right: 0;
  }

  header .logo-center img {
    display: none;
  }

  header.menu-open {
    background-color: #fff !important;
    border-bottom: 1px solid #000;
  }

  header .menu button {
    width: 25vw !important;
    height: 3vw;
  }

  header .menu .logo-center {
    display: block;
  }

  .hamburger-menu .menu-right {
    display: none;
  }

  .hamburger-menu .menu-left {
    width: 100%;
    border-right: none;
    padding: 0 1rem;
  }

  .hamburger-menu .menu-items li a {
    font-size: 1.2rem;
    padding: 0.3rem 0;
  }

  header .menu button {
    width: 60px;
    height: 40px;
    font-size: 0.8rem;
  }
}

/* Hero section - base styles (desktop) */
.hero {
  width: 100%;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  overflow: hidden;
  z-index: 1;
}

.hero video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero_center {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: absolute;
  color: var(--text-primary);
  position: relative;
}

.hero_center .here_center_img {
  width: 30rem;
  height: 15rem;
}

.hero_center .here_center_img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  animation: smoothZoomIn 2s cubic-bezier(0.34, 1.56, 0.64, 1) forwards,
    breatheGlow 4s ease-in-out 2s infinite;
  filter: drop-shadow(0 0 0px rgba(255, 255, 255, 0));
}

@keyframes smoothZoomIn {
  from {
    opacity: 0;
    transform: scale(0.7) rotate(-5deg);
    filter: blur(10px) drop-shadow(0 0 0px rgba(255, 255, 255, 0));
  }
  to {
    opacity: 1;
    transform: scale(1) rotate(0deg);
    filter: blur(0px) drop-shadow(0 0 20px rgba(255, 255, 255, 0.3));
  }
}

@keyframes breatheGlow {
  0%,
  100% {
    transform: scale(1);
    filter: drop-shadow(0 0 20px rgba(255, 255, 255, 0.3));
  }
  50% {
    transform: scale(1.03);
    filter: drop-shadow(0 0 30px rgba(255, 255, 255, 0.5));
  }
}

.hero_center h1 {
  font-size: 5rem;
  font-family: "Inter", sans-serif;
  transition: transform 0.1s ease-out;
  transform-origin: center;
  text-transform: uppercase;
  color: var(--text-primary);
}

.hero_center p {
  width: 55%;
  text-align: center;
  font-family: "Inter", sans-serif;
  margin-top: 1rem;
  font-size: 1rem;
  color: var(--text-primary);
}

.content {
  margin-top: 100vh;
}

/* Mobile styles */
@media (max-width: 768px) {
  .hero {
    position: relative; /* make it scroll normally */
    height: auto; /* let it size to content */
    min-height: 90vh; /* keep some height */
    z-index: 1;
  }

  .hero video {
    position: absolute; /* keep video covering the section */
    height: 100%;
    object-fit: cover;
  }

  .hero_center {
    position: relative; /* within normal flow */
    padding: 4rem 1rem; /* add some spacing */
    gap: 1rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-start !important;
    align-items: flex-start !important;
  }
  .hero_center .here_center_img img {
    display: none;
  }

  .hero_center h1 {
    font-size: 3rem;
    text-align: center;
  }

  .hero_center p {
    font-size: 16px;
    font-weight: 400;
    width: 100%;
  }

  .hero_center p br {
    display: none;
  }
  .content {
    margin-top: 0;
  }
}

/* Content section */
.content {
  width: 100%;
  position: relative;
  z-index: 10;
  margin-top: 100vh;
  background-color: var(--surface-color);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 3rem;
  padding: 2rem;
  font-family: "Inter", sans-serif;
}

.content_left {
  width: 100%;
  height: 100%;
  overflow: hidden;
  object-fit: cover;
  border-radius: 10px;
}

.content_left img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.content_right {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 2rem;
  gap: 3rem;
}

.content_right .content_right_content {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.content_right .content_right_content h1 {
  text-transform: uppercase;
  color: var(--text-primary);
}

.content_right .content_right_content span {
  font-size: 1rem;
  font-family: inherit;
  color: var(--text-secondary);
}

.content_right .content_right_content p {
  font-size: 1rem;
  color: var(--text-secondary);
}

.content_right button {
  background-color: var(--accent-color);
  color: #000;
  border: none;
  padding: 1rem 2rem;
  border-radius: 30px;
  cursor: pointer;
  width: 30%;
  text-transform: uppercase;
  font-weight: bold;
  transition: all 0.3s ease-in-out;
}

.content_right button:hover {
  background-color: var(--accent-color);
  filter: brightness(0.9);
}

@media (max-width: 768px) {
  .content {
    grid-template-columns: repeat(1, 1fr);
    gap: 2rem;
    padding: 3rem 1rem;
    margin-top: 0;
  }

  .content_right {
    padding: 0;
    gap: 1rem;
  }

  .content_right .content_right_content {
    gap: 1rem;
  }

  .content_right .content_right_content h1 {
    font-size: 22px;
  }

  .content_right .content_right_content span {
    font-size: 14px;
  }

  .content_right .content_right_content p {
    font-size: 14px;
  }

  .content_right .content_right_content h4 {
    font-size: 14px;
  }
}

/* ---------- MODERN FINDOUT SECTION ---------- */
.findout {
  background-color: var(--surface-color);
  padding: 4rem 2rem;
  font-family: "Inter", sans-serif;
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
  gap: 6rem;
}

.findout h1[data-aos="fade-up"] {
  font-size: 2rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-left: auto;
  margin-right: auto;
  text-align: start;
  width: 100%;
}

.findout_point {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  margin: 0 auto;
}

.point {
  background-color: var(--bg-color);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 2rem 1.8rem;
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}

.point:hover {
  transform: translateY(-8px);
  border-color: var(--accent-color);
  box-shadow: 0 12px 30px rgba(0, 242, 255, 0.15);
}

.point h1 {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--accent-color);
  margin-bottom: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.point p {
  font-size: 1rem;
  color: var(--text-secondary);
  line-height: 1.6;
}

.point b {
  color: var(--text-primary);
  font-weight: 600;
}

.fineout_bottom {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.fineout_bottom p {
  width: 60%;
  font-size: 16px;
  font-weight: 300;
  color: var(--text-secondary);
}

/* Responsive adjustments */

@media (max-width: 768px) {
  .findout {
    padding: 4rem 1rem;
    gap: 2rem;
  }

  .findout h1[data-aos="fade-up"] {
    font-size: 22px;
    font-weight: 500;
  }

  .findout h1 br {
    display: none;
  }

  .findout_point {
    grid-template-columns: repeat(1, 1fr);
  }

  .point {
    padding: 2rem 1.1rem;
  }

  .point h1 {
    font-size: 18px;
  }

  .point p {
    font-size: 14px;
  }

  .fineout_bottom p {
    width: 100%;
  }
}

/* scroll funtion cod */

.scroll_show {
  background-color: var(--surface-color);
  z-index: 10;
  width: 100%;
  height: 100vh;
  position: relative;
  padding: 0 2rem;
  gap: 2rem;
  font-family: "Inter", sans-serif;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}

.scroll_show_left {
  width: 100%;
  height: 100%;
  overflow: hidden;
  object-fit: cover;
  padding: 1rem 0;
}

.scroll_show_left img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.scroll_show_right {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
  padding: 1rem 0;
}

.scroll_show_right .scroll_item {
  border-top: 1px solid var(--border-color);
  display: flex;
  flex-direction: column;
  padding: 2rem;
  gap: 1rem;
}

.scroll_item h1 {
  font-size: 3rem;
  font-family: "Momo Trust Sans", sans-serif;
  color: var(--text-primary);
}

.scroll_item p {
  font-size: 1rem;
  font-family: "inter", sans-serif;
  color: var(--text-secondary);
}

.scroll_item button {
  background-color: var(--accent-color);
  color: #000;
  border: none;
  padding: 1rem 2rem;
  border-radius: 30px;
  cursor: pointer;
  width: 35%;
  text-transform: uppercase;
  font-weight: bold;
  transition: all 0.3s ease-in-out;
}

.scroll_item button:hover {
  background-color: var(--accent-color);
  filter: brightness(0.9);
}

.scroll_item p,
.scroll_item button {
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: all 0.4s ease;
}

.scroll_item.active p,
.scroll_item.active button {
  opacity: 1;
  max-height: 200px;
}

.scroll_show_left img {
  transition: opacity 0.5s ease;
}

.scroll_show_wrapper {
  height: 300vh;
}

/* ---------- Mobile Styles (max-width: 768px) ---------- */
@media (max-width: 768px) {
  .scroll_show {
    display: block;
    height: auto;
    padding: 2rem 1rem;
  }

  .scroll_show_left {
    display: none;
  }

  .scroll_show_right {
    width: 100%;
    height: auto;
    padding: 0;
    gap: 2rem;
    display: flex;
    flex-direction: column;
  }

  .scroll_item {
    border-top: none;
    padding: 0;
    /* margin-bottom: 1rem; */
    background-color: var(--surface-color);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
  }

  /* The image will be injected by JavaScript, we style it */
  .scroll_item .mobile-card-img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    display: block;
    filter: grayscale(1) contrast(1.2);
  }

  .scroll_item h1 {
    font-size: 1rem;
    padding: 0;
    margin: 0;
  }

  .scroll_item p {
    opacity: 1;
    max-height: none;
    overflow: visible;
    padding: 0;
    margin: 0;
  }

  .scroll_item button {
    opacity: 1;
    max-height: none;
    overflow: visible;
    margin: 0;
    width: auto;
    display: inline-block;
  }
}

/* Services section */
.services {
  width: 100%;
  background-color: var(--surface-color);
  padding: 6rem 2rem;
  font-family: "Inter", sans-serif;
  position: relative;
  z-index: 10;
}

.services_header {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: center;
  margin-bottom: 4rem;
  text-align: center;
}

.services_header h1 {
  font-size: 3rem;
  font-weight: 300;
  text-transform: uppercase;
  color: var(--text-primary);
}

.services_header p {
  font-size: 1.2rem;
  color: var(--text-secondary);
}

.services_grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
  margin: 0 auto;
}

.service_card {
  background-color: var(--bg-color);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  overflow: hidden;
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
  cursor: pointer;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}

.service_card:hover {
  transform: translateY(-8px);
  border-color: var(--accent-color);
  box-shadow: 0 12px 30px rgba(0, 242, 255, 0.15);
}

.service_image {
  width: 100%;
  height: 240px;
  overflow: hidden;
}

.service_image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.2);
  transition: filter 0.4s ease, transform 0.4s ease;
}

.service_card:hover .service_image img {
  filter: grayscale(0) contrast(1);
  transform: scale(1.05);
}

.service_content {
  padding: 1.5rem;
}

.service_content h3 {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 0.75rem;
  transition: color 0.3s ease;
}

.service_card:hover .service_content h3 {
  color: var(--accent-color);
}

.service_content p {
  font-size: 0.95rem;
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: 1.5rem;
}

.service_content button {
  background-color: var(--accent-color);
  color: #000;
  border: 2px solid var(--accent-color);
  padding: 0.8rem 1.5rem;
  border-radius: 30px;
  cursor: pointer;
  width: fit-content;
  text-transform: uppercase;
  font-weight: 600;
  font-size: 0.9rem;
  transition: all 0.3s ease;
  font-family: "Inter", sans-serif;
}

.service_content button a {
  text-decoration: none;
  color: #000;
  display: block;
}

.service_content button:hover {
  background-color: transparent;
  color: var(--text-primary);
  border-color: var(--text-primary);
}

.service_card:hover .service_content button {
  background-color: var(--accent-color);
  border-color: var(--accent-color);
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .services {
    padding: 4rem 1.5rem;
  }

  .services_header h1 {
    font-size: 2.5rem;
  }

  .service_image {
    height: 200px;
  }
}

@media (max-width: 480px) {
  .services_header h1 {
    font-size: 2rem;
  }

  .services_header p {
    font-size: 1rem;
  }
}

/* ---------- MODERN FOOTER ---------- */
footer {
  background-color: var(--bg-color);
  color: var(--text-primary);
  padding: 4rem 2rem 2rem;
  font-family: "Inter", sans-serif;
  border-top: 1px solid var(--border-color);
  position: relative;
  z-index: 10;
}

.footer-container {
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 3rem;
}

.footer-left {
  flex: 0 0 250px;
}

.footer-left img {
  width: 200px;
  height: 150px;
}

.footer-left a {
  text-transform: uppercase;
  font-size: 0.7rem;
  text-decoration: none;
  color: var(--text-primary);
}

.footer-left h3 {
  font-size: 2rem;
  font-weight: 700;
  color: var(--accent-color);
  margin-bottom: 1.5rem;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.social-links {
  display: flex;
  gap: 1.2rem;
  margin-top: 1.5rem;
}

.social-links a {
  color: var(--text-secondary);
  font-size: 1.3rem;
  transition: color 0.2s ease, transform 0.2s ease;
}

.social-links a:hover {
  color: var(--accent-color);
  transform: translateY(-3px);
}

.copyright {
  font-size: 0.9rem;
  color: var(--text-secondary);
  margin-top: 2rem;
  line-height: 1.5;
}

.footer-right {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 3rem;
  justify-content: flex-end;
}

.footer-column {
  min-width: 160px;
}

.footer-column h3 {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 1.5rem;
  color: var(--text-primary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 0.75rem;
}

.footer-links {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.footer-links a {
  color: var(--text-secondary);
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 400;
  transition: color 0.2s ease, padding-left 0.2s ease;
}

.footer-links a:hover {
  color: var(--accent-color);
  padding-left: 5px;
}

.footer-bottom {
  max-width: 1400px;
  margin: 3rem auto 0;
  padding-top: 2rem;
  border-top: 1px solid var(--border-color);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 1.5rem;
}

.legal-links {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  justify-content: center; /* ensure links are centered */
}

.legal-links a {
  color: var(--text-secondary);
  text-decoration: none;
  font-size: 0.85rem;
  transition: color 0.2s ease;
}

.legal-links a:hover {
  color: var(--accent-color);
  text-decoration: underline;
}

/* Mobile copyright – hidden on desktop, visible on mobile */
.mobile-copyright {
  display: none;
  font-size: 0.9rem;
  color: var(--text-secondary);
  text-align: center;
  width: 100%;
  margin-top: 1rem;
}

.footer-year {
  color: var(--text-secondary);
  font-size: 0.85rem;
}

.footer-bottom a {
  color: #fff;
  text-decoration: none;
  transition: color 0.2s ease;
}

.footer-bottom a:hover {
  color: var(--accent-color);
  text-decoration: underline;
}

.website-developer {
  font-size: 0.9rem;
  color: var(--text-secondary);
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

/* Responsive adjustments */
@media (max-width: 1024px) {
  .footer-container {
    gap: 2rem;
  }
  .footer-left {
    flex: 0 0 200px;
  }
  .footer-right {
    gap: 2rem;
  }
}

@media (max-width: 768px) {
  footer {
    padding: 3rem 1.5rem 1.5rem;
  }

  /* Make footer a column and reorder children */
  footer {
    display: flex;
    flex-direction: column;
  }

  /* Hide original copyright inside footer-left */
  .footer-left .copyright {
    display: none;
  }

  /* Show mobile copyright */
  .mobile-copyright {
    display: block;
  }

  /* Footer container becomes a column */
  .footer-container {
    flex-direction: column;
    gap: 2.5rem;
  }

  /* Left section (logo, social) appears after the columns */
  .footer-left {
    order: 2;
    width: 100%;
    flex: none;
    margin-top: 2rem;
  }

  /* Right section (columns) appears first */
  .footer-right {
    order: 1;
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr; /* two equal columns */
    gap: 2rem;
    justify-content: flex-start;
  }

  /* Remove previous flex‑based sizing for columns */
  .footer-column {
    min-width: 0; /* reset min-width */
    width: 100%;
  }

  /* First two columns (Quick Links, Company) – they will naturally fill grid cells */
  .footer-column:nth-child(1),
  .footer-column:nth-child(2) {
    width: auto;
  }

  /* Third column (Media) spans both columns? Actually we want it to start a new row.
     With grid-template-columns: 1fr 1fr, the third item will automatically go to the next row.
     We can optionally make it span both columns if desired, but the user likely wants it below.
     Leave as is – it will occupy the first column of the second row.
     To make it full width, uncomment the following:
  */
  .footer-column:nth-child(3) {
    grid-column: 1 / -1; /* make it span both columns */
    margin-top: 1rem;
  }

  /* Footer bottom (legal links) appears before the mobile copyright */
  .footer-bottom {
    order: 3;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    margin-top: 2rem;
  }

  .legal-links {
    order: 1;
    justify-content: center;
    width: 100%;
  }

  .mobile-copyright {
    order: 2;
  }
}

@media (max-width: 480px) {
  .footer-right {
    gap: 1.5rem;
  }
  .footer-column {
    min-width: 100%; /* ensure columns stack on very small screens */
  }
  /* On very small screens, maybe keep legal links centered */
  .legal-links {
    justify-content: center;
    gap: 1rem;
  }
}