/* style.css */

/* container that holds both logo and menu */

.navbar {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important; /* Forces vertical stacking: logo on top, menu on bottom */
  align-items: center !important;    /* Forces everything to align to the horizontal center */
  justify-content: center !important;
  width: 90% !important;            /* Ensures the navbar stretches across the whole screen */
  max-width: 100%;
  padding: 15px 30px;
  background-color: #F0F2F5;
}

/* logo styling */
.logo {
  background-image: url('logo/handclogo.png'); /* Or '/logo/handclogo2.png' if using absolute path */
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  
  /* RESPONSIVE SIZE FIXES */
  width: 400px;           /* This acts as your ideal desktop width */
  max-width: 100%;        /* Prevents the image from exceeding the screen width */
  height: auto;           /* Allows the height to scale down proportionally */
  aspect-ratio: 1 / 1;    /* Matches your original 500x500 square proportions */
  
  margin-bottom: 20px; 
  display: block !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.social-links {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin: 0 0 1rem;
  font: 700 1rem Arial, sans-serif;
}

.social-links a {
  padding: .5rem .8rem;
  border-radius: 4px;
  color: #FFFFFF;
  text-decoration: none;
  transition: opacity .2s;
}

.social-links a:hover {
  opacity: .8;
}

.social-links .facebook-link {
  background-color: #1877F2;
}

.social-links .instagram-link {
  background: linear-gradient(45deg, #FCAF45, #DD2A7B, #8134AF);
}

.nav-menu {
  width: 100% !important;            /* Forces the menu wrapper to span the full width under the logo */
  display: flex !important;
  justify-content: center !important;/* Aligns the wrapper to the center */
}

.nav-menu ul {
  display: flex !important;
  flex-direction: row !important;    /* Keeps links horizontal */
  justify-content: center !important;/* Perfectly centers the list items */
  list-style: none;
  margin: 0;
  padding: 0;
}

/* spacing between menu items */
.nav-menu li {
  margin: 0 15px; 
}

/* menu link styling */
.nav-menu a {
  color: #1E14DB;
  font-weight: bold; 
  font-size: 2rem;   
  text-decoration: none; 
  transition: color 1s;
}

/* hover effect */
.nav-menu a:hover { 
  color: #000000;
}

@media (max-width: 768px) {
  .nav-menu ul {
    flex-wrap: wrap;
    row-gap: .5rem;
  }

  .nav-menu li {
    margin: 0 .5rem;
  }

  .nav-menu a {
    font-size: 1.35rem;
  }
}

body{
background-color: #F0F2F5;
font-family: "Times New Roman";
}

h1{
color: #350DB0;
text-align: center;
font-weight: bold;
font-size: 1.5rem;
}

h2{
color: #1E14DB;
text-align: center;
font-weight: bold;
font-size: 2rem;
text-decoration: underline;
}

h3{
color: #1E14DB;
text-align: Right;
font-weight: bold;
font-size: 2rem;
text-decoration: underline;
}

p1{
font-size: 1.1rem;
line-height: 1.6;
color: #350DCB0;
text-align: Center;
}

.homepage-content {
  width: min(900px, calc(100% - 2rem));
  margin: 1rem auto 4rem;
}

.homepage-content h2 {
  margin: 0 0 1rem;
}

.homepage-message {
  min-height: 1.6em;
  margin: 0;
  color: #350DB0;
  font-size: 1.1rem;
  line-height: 1.6;
  text-align: center;
  white-space: pre-wrap;
}


.text-doc-body {
    /* 1. Structural styles for the text file */
    white-space: pre-wrap;     /* Keeps your line breaks */
    padding: 25px;
    line-height: 1.5;

    /* 2. Styles copied over from your old .p1 class */
    font-size: 1.6rem; 
    line-height: 1.6;     
    color: #350DCB0;		/* Your desired text color */
    text-align: center;
}



/* Convert form structure to a clean layout */
.contact-form-grid {
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-width: 100%; /* Gives the layout a solid readable width */
    margin-top: 20px;
}

/* Forces Label on left, Input on right */
.form-row {
    display: grid;
    grid-template-columns: 100px 1fr; /* 100px width for labels, rest to input */
    align-items: left;              /* Centers labels vertically for standard inputs */
    gap: 15px;
}

/* Special alignment override to force "Message:" to top-left of the textarea */
.form-row.align-top {
    align-items: start;
}

.form-row.align-top label {
    padding-top: 8px; /* Micro adjustment to visually square with the textarea border */
}

/* Beautiful sizing limits for textarea text box */
.contact-form-grid textarea {
    padding: 12px;
    min-height: 180px;
    resize: vertical horizontal;
    border: 1px solid #4c566a;
    background-color: #3b4252;
    color: #eceff4;
    border-radius: 4px;
    font-family: inherit;
}

.contact-form-grid input {
    padding: 12px;
    border: 1px solid #4c566a;
    background-color: #3b4252;
    color: #eceff4;
    border-radius: 4px;
    font-family: inherit;
}

/* Button style adjustments */
.submit-btn {
    padding: 12px 25px;
    background-color: #88c0d0;
    color: #2e3440;
    border: none;
    border-radius: 4px;
    font-weight: bold;
    cursor: pointer;
    justify-self: start; /* Keeps button aligned left with the input boxes */
}

/* Container holds them side by side */
.stepped-container {
  display: flex;
  justify-content: center;
  align-items: flex-start; /* Aligns them at the top initial baseline */
  width: 95%;
  max-width: 100%;
  margin: 40px auto 300px auto; /* Huge bottom margin accounts for the down-shifted image */
  padding: 0 0;
}

/* Base image styling */
.step-img {
  width: 40%; /* Combined width is 110% to force the side overlap */
  max-width: 100%;
  height: auto;
  border: 4px solid #FFFFFF;
  box-shadow: 0 4px 15px rgba(0,0,0,0.15);
}

.left-step {
  z-index: 1;
}

/* Overlaps horizontally and pushes down vertically */
.right-step {
  margin-left: 10%;            /* Pulls it horizontally over the left image */
  transform: translateY(50%);   /* Pushes it DOWN by exactly half of its own height */
  z-index: 2;                   /* Sits on top of the left image */
}

.gallery-spacer {
  visibility: hidden;
}

/* Mobile Responsiveness: Stacks them vertically on smaller screens */
@media (max-width: 768px) {
  .stepped-container {
    flex-direction: column;
    align-items: center;
    margin-bottom: 100px;       /* Shrinks the bottom margin spacer for mobile */
  }
  .step-img {
    width: 90%;
  }
  .right-step {
    margin-left: 0;
    transform: translateY(20px); /* Small down-shift for a clean mobile stack */
  }
  .gallery-spacer {
    display: none;
  }
}