/*------------------------
CSS Reset
------------------------*/

html, body, header, div, span, img, a, h1, h2, p, form, fieldset, label, ul, li, button { margin: 0; border: 0; padding: 0; outline: 0; font-size: 100%; font: inherit; vertical-align: baseline; }
header, label { display: block; }
* { box-sizing: border-box; }

/*------------------------
Body / html
------------------------*/

body, html { height: 100%; font-family: Arial, Helvetica, sans-serif; }
html { scroll-behavior: smooth; }

/*------------------------
Hero
------------------------*/

/* Container must be relative so overlay can sit absolutely inside it */
.hero-container {
  position: relative;
  width: 100%;
  height: 800px; /* Adjust height as needed */
  overflow: hidden;
}

/* Ensure the background image covers the entire hero area */
.hero-bg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}

/* Overlay sits directly on top of the image */
.hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  
  /* Flexbox layouts make it easy to center text and badges */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  background: rgba(0, 0, 0, 0.4); /* Optional: Darkens image for text readability */
  color: #ffffff;
  padding: 20px;
}

/* Layout for the store buttons side-by-side */
.badge-container {
  display: flex;
  gap: 15px;
  margin-top: 20px;
  flex-wrap: wrap; /* Wraps buttons neatly on small screens */
  justify-content: center;
}

/* Size and hover states for the badges */
.store-badge img {
  height: 45px; /* Keeps both badges visually uniform */
  width: auto;
  transition: transform 0.2s ease;
}

.store-badge:hover img {
  transform: scale(1.05); /* Slight pop-out effect on hover */
}

/*------------------------
Hero image
------------------------*/

.hero-image { background-image: linear-gradient(rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.1)), url("shared-images/newhero.jpg"); height: 100%; background-position: center; background-repeat: no-repeat; background-size: cover; position: relative; }
.hero-text { text-align: center; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: white; }


.hero-text-mobile {
  display: block; /* Visible by default on small screens */
  font-size: 1.3rem;
  color: #ffc0cb;
}

.hero-text-desktop {
  display: none; /* Hidden by default on small screens */
  color: #ffc0cb;
}

/* 3. Media Query Breakpoint (Screens 768px wide and up) */
@media screen and (min-width: 768px) {
  .hero-text-mobile {
    display: none; /* Hide the short text on desktop */
	 color: #ffc0cb;
  }

  .hero-text-desktop {
    display: block; /* Show the long text on desktop */
    font-size: 3rem;
	 color: #ffc0cb;
  }
}


/*------------------------
Nav links
------------------------*/

.topnav { z-index: 2; overflow: hidden; font-family: 'Oswald', sans-serif; }
.topnav a { float: left; display: block; color: #fff; text-align: center; padding: 14px 16px; text-decoration: none; font-size: 18px; }
.topnav .icon { display: none; }
.dropdown { float: left; overflow: hidden; }
.dropdown .dropbtn { font-size: 17px; border: none; outline: none; color: white; padding: 14px 16px; background-color: inherit; font-family: inherit; margin: 0; }
.dropdown-content { display: none; position: absolute; background-color: #f9f9f9; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1; }
.dropdown-content a { float: none; color: black; padding: 12px 16px; text-decoration: none; display: block; text-align: left; }
.topnav a:hover, .dropdown:hover .dropbtn { color: white; }
.dropdown-content a:hover { background-color: #ddd; color: black; }
.dropdown:hover .dropdown-content { display: block; }

@media screen and (max-width: 800px) {
  .topnav { background-color: #000; z-index: 999; border-bottom: 2px solid #72b4e5; }
  .topnav a:not(:first-child), .dropdown .dropbtn { display: none; }
  .topnav a.icon { float: right; display: block; }
}

@media screen and (max-width: 800px) {
  .topnav.responsive { position: relative; }
  .topnav.responsive .icon { position: absolute; right: 0; top: 0; }
  .topnav.responsive a { float: none; display: block; text-align: left; }
  .topnav.responsive .dropdown { float: none;}
  .topnav.responsive .dropdown-content { position: relative;}
  .topnav.responsive .dropdown .dropbtn { display: block; width: 100%; text-align: left; }
}

/*------------------------
2 column responsive
------------------------*/

.column { float: left; padding: 0 20px 10px 20px; }
.left { width: 50%;  }
.right { width: 50%; }
.row:after { content: ""; display: table; clear: both; }
@media screen and (max-width: 800px) {
  .column { width: 100%; }
	.row { }
	h3 { padding-bottom: 20px; }
}

/*------------------------
Responsive images
------------------------*/

.land { max-width: 50%; height: auto; }
@media screen and (max-width: 800px) {
	.land { max-width: 50%; height: auto; }
}

/*------------------------
Sections
-------------------------*/

.cont { max-width: 1200px; margin: 0 auto; padding: 40px 0; }
.navy { background-color: #282725; }

h1 { font-family: 'Oswald', sans-serif; }
h2 { text-align: center; font-size: 40px; color: #ffc0cb; font-family: 'Oswald', sans-serif; }
h3 { text-align: center; font-size: 30px; font-weight: normal; padding: 0 0 10px 0; color: #ffffff; font-family: 'Oswald', sans-serif; }

h4 { font-size: 30px; font-family: 'Oswald', sans-serif; color: #ffc0cb; }

.desc { font-size: 22px; padding: 18px 18px 18px 18px; color: #f1f1f1; }
.desc a { color: #f1f1f1; }

.butt a { margin: 10px 0 30px 0; padding: 10px 25px; text-align: center; text-decoration: none; display: inline-block; background-color: #555; color: #ffffff; border-radius: 5px; border: 2px solid #fff; }
.butt a:hover { background-color: #ddd; color: #000000; }
.butt a.active { background-color: #555; color: #ffffff; }
.cent { text-align: center; }

.topp { font-family: 'Oswald', sans-serif; border-top: 2px solid white;  margin: 20px 20px 20px 20px; padding: 5px 0 0 5px; }
.topp a { float: right; font-size: 20px; color: #fff; text-decoration: none; }
.topp a:hover { color: #ffc0cb; }
.topp a.active { color: #ffc0cb; }

@media screen and (max-width: 800px) {
	.container { text-align: center; }
}



.copy { background-color: #282725; text-align: center; font-size: 20px; font-weight: normal; color: #000; padding: 30px 30px; }