/* --- RESET & BOX MODEL --- */
    * {
      box-sizing: border-box; /* Crucial: prevents padding from pushing items off-screen */
    }

    body { 
      margin: 0; 
	  color: rgb(34, 34, 34);
      font-family: sofia-pro; 
      overflow-x: hidden; /* Safety net: prevents horizontal scroll */
    }

    .etr-header {
      width: 100%;
      padding: 20px 50px; /* Desktop padding */
      background: #fff;
      border-bottom: 1px solid #eee;
      position: sticky;
      top: 0;
      z-index: 1000;
    }
	
	.fadedlink{
		color: rgba(51,51,51,.5);
	}

    .etr-container {
      display: flex;
      justify-content: space-between;
      align-items: center;
      max-width: 1600px;
      margin: 0 auto;
      width: 100%;
    }
	
	main {
	  max-width: 1600px; /* Matches your header's max-width */
	  margin: 0 auto;    /* Centers the entire content block */
	  padding: 20px 50px; /* Adds the side padding you want */
	}

	
	/* Adjust padding for mobile screens */
	@media (max-width: 992px) {
	  main {
		padding: 15px 20px;
	  }
	}
	
	/* --- HERO IMAGE RESPONSIVENESS --- */
	.hero {
	  width: 100%;
	  overflow: hidden; /* Prevents any accidental side-scrolling */
	  line-height: 0;   /* Removes the tiny gap at the bottom of images */
	}

	.hero img {
	  width: 100%;       /* The image will now fill 100% of the PADDED main section */
	  height: auto;
	  display: block;
	  border-radius: 4px; /* Optional: adds a slight roundness to the image corners */
	}
	
	.imgdiv {
  width: 100%;       /* The container fills its parent */
  max-width: 1200px; /* Optional: keeps the image from getting too huge on 4k monitors */
  margin: 0 auto;    /* Centers the container if it hits the max-width */
	}

	.imgdiv img {
	  display: block;    /* Removes the tiny gap at the bottom of images */
	  width: 100%;       /* Forces the image to be the width of the div */
	  height: auto;      /* Scaled automatically to keep the aspect ratio perfect */
	}




/* Styling the 'Contact' Button */
.etr-contact-btn {
  /* Font & Typography */
  font-family: "sofia-pro", sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  text-decoration: none;
  color: #000000;

  /* Shape & Border */
  border: 2px solid #000000; /* Clean black border */
  padding: 12px 28px;
  display: inline-block;
  background-color: transparent;
  
  /* Smooth Animation */
  transition: all 0.3s ease-in-out;
  cursor: pointer;
}

/* Hover State - Colors Flip */
.etr-contact-btn:hover {
  background-color: #000000;
  color: #ffffff !important; /* Forces text to white */
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1); /* Subtle lift effect */
  transform: translateY(-1px); /* Moves button up slightly */
}

/* Active State - When Clicked */
.etr-contact-btn:active {
  transform: translateY(1px);
}
	
	@media (max-width: 992px) {
	  .hero img {
		/* Optional: If the image looks too short on mobile, 
		   you can set a min-height here */
		min-height: 300px; 
		object-fit: cover;
	  }
	}

    .etr-logo { font-family: ltc-bodoni-175; font-size: 24px; margin: 0; color: #1a1a1a; }
    .etr-tagline { font-size: 10px; letter-spacing: 2px; text-transform: uppercase; margin: 0; color: #1a1a1a; }
	
	h1 { font-family: ltc-bodoni-175; font-size: clamp(30px, 4vw, 40px); font-weight: 400; margin: 0; color: #1a1a1a; }
	
	h3 { font-family: inherit; font-size: 18px; font-weight: 600; margin-top: 30; color: #1a1a1a; }

    /* --- DESKTOP NAV --- */
    .etr-nav ul {
      display: flex;
      list-style: none;
      gap: 20px;
      margin: 0;
      padding: 0;
    }

    .etr-nav a {
      text-decoration: none;
      color: #1a1a1a;
      font-weight: 700;
      font-size: 13px;
      text-transform: uppercase;
    }

    .etr-contact-btn {
      border: 1.5px solid #1a1a1a;
      padding: 8px 15px;
    }
	
	.general-paragraph{
		line-height: 30px; 
		text-align:justify;
		white-space: normal !important; 
		max-width: 492px; 
		margin: 8px auto;
	}
	
	h2 {
		font-size: 38px;
	}
	
	.general-paragraphh2, .general-paragraphh3{
		line-height: 1.5em; 
		text-align:justify;
		white-space: normal !important; 
		max-width: 492px; 
		margin: 32px auto 8px auto;
	}

    /* --- HAMBURGER BUTTON --- */
    .etr-menu-toggle {
      display: none; 
      background: none;
      border: none;
      cursor: pointer;
      flex-direction: column;
      gap: 6px;
      z-index: 10001;
      padding: 5px; /* Creates a larger tap area */
      margin-right: 5px; /* MOVES BUTTON TO THE LEFT */
    }

    .etr-menu-toggle span {
      display: block;
      width: 28px;
      height: 3px;
      background: #1a1a1a;
      transition: 0.3s;
    }

    /* --- MOBILE STYLES --- */
    @media (max-width: 992px) {
      .etr-header {
        padding: 15px 20px; /* Reduced side padding to pull content inward */
      }

      .etr-menu-toggle { 
        display: flex; 
      }

      /* Logo font size adjustment for small screens */
      .etr-logo { font-size: 20px; }

      .etr-nav {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        background: #ffffff;
        z-index: 9999;
        flex-direction: column;
        justify-content: center;
        align-items: center;
      }

      .etr-nav.active { display: flex !important; }

      .etr-nav ul {
        flex-direction: column;
        align-items: center;
        gap: 25px;
      }

      .etr-nav a { font-size: 22px; }

      /* Hamburger animation to X */
      .open span:nth-child(1) { transform: translateY(9px) rotate(45deg); }
      .open span:nth-child(2) { opacity: 0; }
      .open span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }
    }

    /* --- FOOTER CENTERED --- */
    .site-footer {
      text-align: center;
      padding: 50px 20px;
      background: #f9f9f9;
      border-top: 1px solid #eee;
    }
    
    .site-footer a { color: #1a1a1a; text-decoration: none; font-weight: bold; }