html {
  scroll-behavior: smooth;
  background-color: #fafafa; /* This colors the 'overscroll' area */  
}

/* 1. Reset the foundation */
html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: auto; 
  min-height: 100%;
  overflow-x: hidden;
  overflow-y: auto; /* Let the browser handle the scrollbar */
}

/* 3. The 'Show' state */
.page.visible {
  display: flex !important;
  opacity: 1 !important;
}

.viewport {
  display: flex;
  flex-direction: column;
  min-height: 100dvh; /* Use dynamic viewport height for mobile Safari */
  background-color: #ffffff; /* This keeps your main site white */  
}

body {
  color:#000;
  font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
  font-weight: normal;
  font-style: normal;
  font-size: 1.125rem;
  line-height: 1.4;  
}

body img {
  user-select: none;
} 

.contact {
  width: 80%;
  padding: 10px;
  margin-top: 2rem;  
}

.flex-container {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  align-items: top;
  gap: 20px;
  height: auto;
  margin-top: 50px;
}

.box {
  width: 80%;
  padding: 10px;
  text-align: center;
  border-bottom: #ddd solid 0px;
}

.box img {
  text-align: center;
  width: 60px;
  margin-top: 1em;
  margin-bottom: 1em;
  user-select: none;
}

.box .sql-server {
  width: 120px;
}

.box .fabric {
  width: 90px;
}

.box-text img {
  text-align: center;
  width: 60px;
}

.box-text {
  text-align: justify;
  margin-top: 10px;
}

.page-footer {
  width: 100%;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

.footer-col {
  display: flex;
  flex: 1; /* Takes up the remaining space */
  width: 100%;
  justify-content: space-around;
  align-items: center;
  padding: 20px 0;
  font-size: 0.8rem;
}

.footer-copyright {
  width: 100%;
  text-align: center;
  padding: 15px 0;
  font-size: 0.8rem;
}

.footer-columns {
  display: flex;         /* Activates side-by-side mode for the columns */
  justify-content: center;   /* Centers columns horizontally */
  align-items: center;
  flex-grow: 1;           /* Takes up the space above the copyright */
  width: 100%;
}

.page.active {
  display: flex; /* Only the active page exists in the scroll flow */
}

#home {
  justify-content: center;
}

.altavu-form {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.logo {
  margin-top: 20px;
  width: 160px;
}

.menu {
  display: flex;
  flex-direction: row; /* Tabs usually look best side-by-side */
  gap: 15px;           /* Space between tabs */
  justify-content: center;
}

.chip {
  position: relative;
  text-decoration: none;
  color: #777;         /* Greyscale for inactive tabs */
  font-weight: 500;
  padding: 8px 4px;
  transition: color 0.3s ease;
}

/* The Animated Underline */
.chip::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: #000; /* Underline color */
  transform: scaleX(0);   /* Hidden by default */
  transition: transform 0.2s ease;
}

.chip:hover {
  color: #000;
  transform: scaleX(1);   /* Underline slides/grows in */
}

.chip.active::after {
  transform: scaleX(1);   /* Underline slides/grows in */
}

.chip.active {
  color: #000;
  transform: scaleX(1);   /* Underline slides/grows in */  
}

.form-group {
  display: flex;
  flex-direction: column; /* Stacks label on top of input */
  gap: 8px;               /* Space between label and input */
  margin-bottom: 20px;
  width: 100%;
  max-width: 400px;
}

/* Adjusted for Underline-only look */
input, textarea {
  padding: 12px 4px; /* Reduced side padding since there's no side border */
  border: none;
  border-bottom: 1px solid #ddd; /* The underline */
  color: #333;
  border-radius: 0; /* Important: remove the rounded corners */
  width: 100%;
  box-sizing: border-box;
  background-color: transparent; /* Ensures it blends with your page */
  font-family: inherit;
  font-size: inherit;
  transition: border-color 0.3s ease;
  resize: none; /* Optional: prevents the 'resize handle' from looking weird on textareas */
}

/* Focused State */
input:focus, textarea:focus {
  outline: none;
  border-bottom: 2px solid #000; /* Darker/Thicker underline when typing */
  /* Removed box-shadow as it usually looks better without it for underline styles */
}

/* Placeholder styling (Optional) */
::placeholder {
  color: #aaa;
  font-weight: 400;
}

button {
  padding: 12px 20px;
  background-color: #f8f9fa; /* Bootstrap's 'light' grey */
  color: #212529;
  border: 1px solid #dee2e6; /* Subtle border makes it look 'solid' */
  border-radius: 6px;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  width: 100%; /* Matches the width of your underlined inputs */
  /* Smooth transitions for all properties */
  transition: all 0.2s ease-in-out;
  /* Reset appearance for mobile Safari */
  -webkit-appearance: none;
}

/* Hover State - Darker and adds a small shadow */
button:hover {
  background-color: #e2e6ea;
  color: #212529;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
}

/* Focus State - The Bootstrap "Blue Glow" (Optional) */
button:focus {
  outline: none;
}

/* Active State - When the button is actually pressed down */
button:active {
  background-color: #dae0e5;
  border-color: #d3d9df;
  transform: translateY(1px); /* Slight 'press' effect */
}

@media (min-width: 768px) {
  .flex-container {
    flex-direction: row;
  }
  .contact {
    width: 40%;
  }  
  .box {
    width: 400px;
  }
}

/* 1. Define the entrance animation */
@keyframes fab-fade-in {
  from {
    opacity: 0;
    transform: scale(0.8);
    pointer-events: none;
  }
  to {
    opacity: 1;
    transform: scale(1);
    pointer-events: auto;
  }
}

.fab {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 44px;
  height: 44px;
  background-color: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid #e5e7eb;
  border-radius: 50%;
  z-index: 99999;
  
  /* 2. Link the animation to the scroll position */
  animation: fab-fade-in linear both;
  animation-timeline: scroll();
  /* The FAB stays invisible for the first 50px, then fades in by 150px */
  animation-range: 50px 100px; 
}

/* 3. The Chevron (Perfectly Centered) */
.arrow {
  position: absolute;
  top: 54%; /* Optical center adjustment */
  left: 50%;
  width: 10px;
  height: 10px;
  border-top: 2px solid #374151;
  border-left: 2px solid #374151;
  transform: translate(-50%, -50%) rotate(45deg);
}

/* The container that holds the active page AND the footer */
.viewport {
    display: flex;
    flex-direction: column;
    min-height: 100vh; /* Forces the entire 'shell' to be full screen */
    width: 100%;
}

/* The individual pages */
.page {
    /* We DON'T use min-height: 100vh here anymore, 
       otherwise the footer will always be 'off-screen' initially */
    width: 100%;
    display: none; /* Controlled by your JS */
    flex-direction: column;
    align-items: center;
    margin-top: 20px;
    margin-bottom: 20px;
    /* This tells the active page to GROW and push the footer down */
    flex: 1 0 auto; 
}

#footer {
    flex-shrink: 0; /* Ensures it stays its natural height */
    width: 100%;
    padding: 30px 0;
    text-align: center;
    background-color: #fafafa;
    line-height: 1.6;
}