html {
padding-top: none;

}

body {
padding-top: 0px;
background-color: black;
font-family: "noto sans", sans-serif;
margin-top: 120px;
}

/* <H> tag settings*/

h1 {
    font-size: 2em;
    font-weight: bold;
    color: whitesmoke;

}

h2 {
    font-size: 1.5em;
    font-weight: bold;
    color: whitesmoke;
}



header {
  position: fixed;
  background: black;
  top: 0;
  width: 100%;
  z-index: 999; /* Ensure it stays above other content */
  transition: transform 0.3s ease-in-out; /* Smooth transition for hiding/showing */
}

.header-hidden {
  transform: translateY(-100%); /* Move header entirely out of view */
}

/*
header {

    background: white;
    color: white;
    position: fixed;
    top: 0;
    width: 100%; /* Ensures the header spans the full width */
    z-index: 1000; /* Ensures the header stays on top of other content */
        /* Add other styling as needed (background-color, padding, etc.) */

}

*/

#headerlogo {
  opacity: 0.8;
  width: 100px;
  padding: 10px;
}


/*HEADER LINKS*/




.headerimage {
    display: inline-block;
    float: left;
    width: 100px;
    padding: 10px;

}

.link1 {
    display: inline-block;
    float: right;
    padding: 25px;
    font-size: 1.5em;
}


.link2 {
   display: inline-block;
    float: right;
    padding: 25px;
    font-size: 1.5em;

}

.link3 {
    display: inline-block;
    float: right;
    padding: 25px;
    font-size: 1.5em;

}


.link4 {
   display: inline-block;
    float: right;
    padding: 25px;
    font-size: 1.5em;

}


.vertical-line {
  border-left: 10px solid red; /* Adds a 2px solid red border on the left */
  padding-left: 20px; /* Adds space between the line and content */
  padding: 10px;
}

img {
height: 100%;
width: 100%;
margin: 0px auto;

}

a {
  text-decoration: none;
  color: white;
}

a:hover {
    color: purple;

}

.parentContainer {
position: relative;
text-align: center;
color: wheat;
}

.bottom-left {
position: absolute;
bottom: 10px;
left: 15px;
font-size: 3em;
color: black;
}

.top-left {
position: absolute;
top: 10px;
left: 15px;
font-size: 3.2em;
color: black;
}

.top-right {
position: absolute;
top: 10px;
right: 15px;
font-size: 3.2em;
color: black;
}

.bottom-right {
position: absolute;
bottom: 10px;
right: 15px;
font-size: 3em;
color: black;
}

.centered {
position: absolute;
top: 50%;
left: 40%;
font-size: 3em;
color: black;
}

.site-logo {
position: absolute;
top: 10px;
left: 10px;
width: 100px;
height: 100px;
margin: none;
box-shadow: none;
}


.image-grid {
  display: grid;
  /* Creates as many columns as fit, each at least 250px wide */
  grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
  gap: 8px; /* Spacing between images */
  padding: 8px;
  border: 8px;
}

.image-grid img {
  width: 400px;       /* Ensures image fills the grid cell width */
  height: 400px;     /* Sets a uniform height for all images */
  object-fit: cover; /* Prevents stretching by cropping the image to fit */
  border-radius: 8px;
}


/* OFFER TEXT  */
.box2 {
    display: flex;
    background: whitesmoke;
    width: 90%;
    border-radius: 20px;
    margin: 40px;
    padding: 20px;
    border: black;
    display: flex;
    flex-direction: center;
    justify-content: left;
}
/* FLEX BOX */

.box4 {
    display: flex;
    background: green;
}

.picture {
    color: black;
    flex-basis: 60%;
}

#paisleypony {
    max-width: 75%;
    border-radius: 20px;
    object-fit: contain;
    height: auto;
}

.about {
    color: black;
    flex-basis: 40%;
    text-align: justify;
}



/*
.inbox2 {
    background: white;
    margin: auto;0px; /* Example height */
        backgroun
    display: flex;
    width: 20%;
    align-items: center;
    justify-content: center;
}
*/
/* NAVIGATION BAR */


.box1 {
    width: 40%;
    margin: 40px;
    padding: 20px;
    background: black;

}



.button1 {
 background-color: #008CBA;  /* Green */
  border-radius: 12px;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
}

.button1:hover {
  background-color: #04AA6D;  /* Green */
  border-radius: 12px;
  box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
}

.button2 {
 background-color: #008CBA;  /* Green */
  border-radius: 12px;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
}

.button2:hover {
  background-color: #04AA6D;  /* Green */
  border-radius: 12px;
  box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
}

.button3 {
 background-color: #008CBA;  /* Green */
  border-radius: 12px;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
}

.button3:hover {
  background-color: #04AA6D;  /* Green */
  border-radius: 12px;
  box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
}
.button4 {
 background-color: #008CBA;  /* Green */
  border-radius: 12px;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
}

.button4:hover {
  background-color: #04AA6D;  /* Green */
  border-radius: 12px;
  box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
}


/* MAP */


.box3 {
    width: 80%;
    margin: 40px;
    padding: 20px;
    background: black;

}


/*HTML version*/

.trans-shoe {
position: absolute;
top: 10px;
left: 10px;
width: 100px;
height: 100px;
margin: none;
box-shadow: none;
}

#trans_shoe {
  opacity: 0.8;
  width: 100px;
}

#apachelogo {
   width: 10%;
}