/* ===================== GENERAL ===================== */


body {
    margin: 0in;
    font-family: Arial, Helvetica, sans-serif;
    line-height: 1.6;
	background-color: #ADADAD;
}
/* ===================== TOP NAV ===================== */
.top-nav {
    position: fixed;
    top: 0px;
    left: 0;
    width: 100%;

    display: flex;
    justify-content: space-evenly;
    padding: 20px 0;

    background: #111;
    z-index: 1000;
}
.img-protect {
    position: relative;
    display: inline-block;
}

.img-protect::after {
    content: "";
    position: absolute;
    inset: 0;
    background: transparent;
}


.btn {
  display: inline-block;
  padding: 10px 20px;
  margin: 5px;
  background-color: #4CAF50; /* green button, change as needed */
  color: white;
  text-decoration: none;
  font-weight: bold;
  border-radius: 5px;
  transition: background-color 0.3s ease;
}

.btn:hover {
  background-color: #45a049; /* slightly darker on hover */
}



.nav {
    display: flex;
    justify-content: space-between; /* spreads buttons across page */
    align-items: center;
    margin-bottom: 30px;
}

/* Optional button styling */


/* ===================== HERO SECTION ===================== */


/* Dark overlay for readability */


.hero-title {
  color: white;
  font-size: 3.5rem;
  letter-spacing: 3px;
  text-transform: uppercase;
  text-shadow: 2px 2px 12px rgba(0, 0, 0, 0.9);
  z-index: 1;
}

.hero-subtitle {
    font-size: 1.5rem;
    margin-top: 10px;
}

.hero {
    height: 100vh;
    margin-top: 50px;

    
     background-size: 100% 85%;
    background-position: center center;
    background-repeat: no-repeat;


    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    text-align: center;
    color: white;
    position: relative;

    /* smooth fade */
    transition: background-image 1.5s ease-in-out;
}

.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.45);
}

.hero * {
    position: relative;
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  justify-items: center;  /* centers items inside each grid cell */
  margin-top: 30px;
	margin-left: 10px;
	margin-right: 10px;
}

.grid figure {
  margin: 0;
  text-align: center;
}

.grid img {
  max-width: 100%;
  height: auto;
	border-radius: 8px;
}

/*.grid img {
  width: 100%;
  display: block;
} */

.grid figcaption {
  margin-top: 6px;
  font-size: 0.9rem;
  /*color: #2B2A31;*/
	/*color: #ADADAD;*/
	color: #222020;
}

.about
{
    display: flex;
    gap: 30px;
    align-items: flex-start;
	
} 



/* About image styling */
.about-img {
    max-width: 300px;
    height: auto;
    border-radius: 4px;
}

/* Text area */
.about-text {
    max-width: 800px;
}

/* Headings */
.about-text h2 {
    margin-top: 0;
}

.purchase {
  max-width: 900px;
  margin: 120px auto 0;   /* pushes content below the nav */
  padding: 40px 20px;
  text-align: center;
}

.purchase h2 {
  font-size: 2.2rem;
  margin-bottom: 20px;
}

.construction {
  font-size: 1.2rem;
  color: #292525;
  font-style: italic;
}

.test {
	align-center;
}
.wrap-img {
    float: left;              /* image on left */
    margin: 0 20px 15px 0;    /* space between image and text */
    max-width: 300px;
}

H1 {
	align-center; margin-top: 100px;
}

/* ===================== IMAGE HOVER GROW ===================== */

.grid figure {
  transition: transform 0.35s ease, box-shadow 0.35s ease;
  position: relative;
}

.grid figure:hover {
  transform: scale(1.65);
  z-index: 10; /* allows it to overlap neighbors */
}

.grid figure img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
}

/* Add this at the bottom of your CSS file */

@keyframes heroBackgroundRotate {
    0%   { background-image: url("images/DA.jpg"); }
    12.5% { background-image: url("images/DB.jpg"); }
    25%  { background-image: url("images/DC.jpg"); }
    37.5% { background-image: url("images/DD.jpg"); }
    50%  { background-image: url("images/DE.jpg"); }
    62.5% { background-image: url("images/DF.jpg"); }
    75%  { background-image: url("images/DG.jpg"); }
    87.5% { background-image: url("images/DH.jpg"); }
    100% { background-image: url("images/DA.jpg"); }
}
/*

@keyframes heroBackgroundRotate {
    0%   { background-image: url("images/DA.jpg"); }
    12%  { background-image: url("images/DB.jpg"); }
    24%  { background-image: url("images/DC.jpg"); }
    36%  { background-image: url("images/DD.jpg"); }
    48%  { background-image: url("images/DE.jpg"); }
    60%  { background-image: url("images/DF.jpg"); }
	72%  { background-image: url("images/DE.jpg"); }
    84%  { background-image: url("images/DF.jpg"); }
    100% { background-image: url("images/DA.jpg"); }
}
*/

.hero {
    /* your existing styles... */
    animation: heroBackgroundRotate 20s infinite;
    transition: background-image 1.5s ease-in-out; /* keeps the smooth fade */
}
.site-footer {
    margin-top: 60px;
    padding: 20px 15px;

    background-color: #ADADAD; /* same as body */
   /* color: #2B2A31; */

    text-align: center;
    font-size: 0.9rem;
}

.site-footer {
    margin-top: 0;              /* remove gap above footer */
    padding: 20px 15px;
    background-color: #ADADAD;  /* same as body */
    /*color: #2B2A31;*/
    text-align: center;
    font-size: 0.9rem;
}

.site-footer p {
    margin: 0 auto;
    max-width: 900px;
    line-height: 1.5;
}

.grid {
    margin-bottom: 0;
}

img {
    -webkit-touch-callout: none; /* iOS */
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}