/* Import Roboto font */
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,400;0,700;0,900&display=swap');

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Roboto', sans-serif;
  background: #eee;
  color: #333;
}

h2 {
  font-weight: 800;
  font-size: 2em;
}

/* Ensures placeholder text uses the same font-family, size, etc. */
::placeholder {
  font-family: 'Roboto', sans-serif;
  color: #999; /* optional placeholder color */
}
/* Vendor prefixes for wider browser support */
::-webkit-input-placeholder {
  font-family: 'Roboto', sans-serif;
  color: #999;
}
:-ms-input-placeholder {
  font-family: 'Roboto', sans-serif;
  color: #999;
}
::-ms-input-placeholder {
  font-family: 'Roboto', sans-serif;
  color: #999;
}

/* Typed text in inputs/textarea also uses Roboto */
input,
textarea {
  font-family: 'Roboto', sans-serif;
  color: #333;
  font-size: 1em;
}

/* Top bar */
.top-bar {
  background: #333;
  color: #fff;
  padding: 0.5rem 1rem;
  text-align: right;
}

/* Header (logo + social) */
.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 5vw;
  background-image: url("images/hex.svg");
  background-color: #000;
  background-size: cover;
  color: #fff;
  padding-top: 80px;
  padding-bottom: 80px;
}

.header .logo h1 {
  margin: 0;
  font-size: 1.5rem;
}

.header .logo img {
  width: 40vw;
  max-width: 1000px;
  min-width: 300px;
}

/* Social block in header (including phone icon) */
.social-block {
  display: flex;
  gap: 20px;
  align-items: center;
}

.social-block a img {
  width: 40px;
  height: auto;
  transition: transform 0.3s ease;
}

.social-block a:hover img {
  transform: scale(1.1);
}

/* Responsive Header for Mobile: Stack logo on top, socials below */
@media (max-width: 768px) {
  .header {
    flex-direction: column;
    text-align: center;
    padding: 1rem;
  }
  .header .logo {
    margin-bottom: 1rem;
  }
  .header .logo img {
    width: 80vw;
    margin-left: 0;
  }
  .social-block {
    justify-content: center;
  }
}

/* Search bar (if used) */
.search-bar input {
  padding: 0.5rem;
  border: none;
}

.search-bar button {
  padding: 0.5rem 1rem;
  background: #ffc107;
  border: none;
  cursor: pointer;
}

/* Keyframe for dropDown animation */
@keyframes dropDown {
  0% {
    transform: translateY(-100px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

.header .logo {
  transform: translateY(-100px);
  opacity: 0;
  animation: dropDown 1.2s ease .2s forwards;
}

/* STICKY NAV MENU */
.main-nav {
  position: sticky;
  top: 0;
  z-index: 999;
  background: #ffc107;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

.menu-toggle {
  display: none;
}

.menu-icon {
  display: none;
  position: absolute;
  top: 1rem;
  right: 1rem;
  cursor: pointer;
  z-index: 1000;
  background: #ffc107;
  padding: 5px;
}

.menu-icon span {
  display: block;
  width: 25px;
  height: 3px;
  margin: 5px auto;
  background-color: #000;
  transition: all 0.3s ease-in-out;
}

/* Horizontal menu (desktop) */
.menu {
  list-style: none;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;
}

.menu > li {
  position: relative;
  margin: 0 1rem;
}

ul {
  list-style-type: none;
}

.menu a {
  color: #000;
  text-decoration: none;
  display: block;
  padding: 1rem;
  font-weight: 500;
}

/* Dropdown (desktop) */
.dropdown:hover .submenu {
  display: block;
}

.submenu {
  position: absolute;
  top: 100%;
  left: 0;
  background: #fff;
  display: none;
  min-width: 150px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

.submenu li a {
  color: #333;
  padding: 0.75rem 1rem;
}

.new-label {
  background: red;
  color: #fff;
  font-size: 0.7rem;
  margin-left: 0.5rem;
  padding: 2px 6px;
  border-radius: 3px;
}
/* mod for mobile sub*/
/* Hide the submenu by default */
.submenu {
  display: none;
  position: absolute; /* for desktop hover */
  top: 100%;
  left: 0;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
  min-width: 150px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* On desktop, show the submenu on hover */
@media (min-width: 769px) {
  .dropdown {
    position: relative; /* parent is relative so submenu can be absolute */
  }
  .dropdown:hover .submenu {
    display: block;

  }
  
}

/* On mobile, we rely on .submenu.show for toggling */
.submenu.show {
  display: block !important;
}






/* Mobile nav at 768px */
@media (max-width: 768px) {

  .submenu {
    position: static;    /* no absolute positioning on mobile */
    box-shadow: none;
    background: #fce7b7; /* match your main mobile nav background */
    width: 100%;
  }

  .menu-icon {
    display: block;
  }
  .menu {
    position: fixed;
    top: 0;
    left: -100%;
    width: 70%;
    height: 100vh;
    background: #ffc107;
    flex-direction: column;
    align-items: flex-start;
    padding-top: 2rem;
    transition: left 0.3s ease;
    justify-content: flex-start;
  }
  .menu > li {
    margin: 0;
    width: 100%;
  }
  .menu a {
    width: 100%;
  }
  #menu-toggle:checked + .menu-icon + .menu {
    left: 0;
  }
  /* Ensure submenu displays when toggled on mobile */
  .submenu-toggle:checked + .submenu {
    display: block !important;
  }

} 



/* ========== CROSSFADE CAROUSEL ========== */
.carousel-wrapper {
  position: relative;
  width: 100%;
  height: 60vh;
  min-height: 400px;
  background: #000;
  overflow: hidden;
}

.carousel-overlay {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  height: 8vw;
  z-index: 10;
  pointer-events: none;
}

.carousel-slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000 center/cover no-repeat;
  opacity: 0;
  transition: opacity 2s ease;
  z-index: 1;
}
.carousel-slide.active {
  opacity: 1;
  z-index: 2;
}
.carousel-slide.below {
  opacity: 0;
  z-index: 1;
}

.slide-content {
  position: absolute;
  top: 200px;
  left: 10%;
  transform: translateY(-50%);
  max-width: 80vw;
  color: #fff;
  transition: transform 1s ease, opacity 1s ease;
  opacity: 1;
}

.slide-content.move-in {
  transform: translate(0, -50%);
  opacity: 1;
}

.slide-content.move-out {
  transform: translate(-50px, -50%);
  opacity: 0;
}

.slide-title {
  font-size: 8.5vw;
  /*font-size: 8vmax;*/
  margin-bottom: 1rem;
  font-weight: 800;
}

.slide-desc {
  font-size: 2.1vw;
  font-size: 2vmax;
  margin-bottom: 1rem;
  line-height: 1.4;
}

.slide-content button {
  background: #ffc107;
  border: none;
  padding: 0.75rem 1.5rem;
  font-weight: 600;
  cursor: pointer;
}

/* Strip Containers */
.strip-container {
  display: flex;
  flex-wrap: nowrap;
  width: 100%;
 
  padding-left: 50px;
  padding-right: 50px;
  justify-content: center;
  margin-top: 40px;
  margin-bottom: 40px;
}

.strip-container h2 {
  color: #fff;
}

.orange-box {
  width: 15px;
  height: auto;
  background: #ffc107;
}

.grey-box {
  width: 100%;
  height: auto;
  background: #494949;
  padding-top: 10px;
  padding-left: 20px;
}

.clear-box {
  width: 100%;
  height: auto;
  padding-top: 10px;
  padding-left: 20px;
}

/* Featured Products */
.featured-products {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  padding-left: 50px;
  padding-right: 50px;
  padding-bottom: 150px;
  justify-content: center;
  gap: 15px;
}

.product-image img {
  max-width: 90%;
  max-height: 190px;
  margin: auto;
}

.product-image {
  display: flex;
  justify-content: center;
  padding: 15px 15px 5px 15px;
  height: 215px;
}

.product-title {
  width: 100%;
  padding: 10px;
  justify-content: center;
  text-align: center;
  color: #fff;
  background: #494949;
}

.product-shortd {
  width: 100%;
  height: 190px;
  padding: 15px;
  background: #bdbdbd;
}

.product-button {
  width: 100%;
  padding: 20px;
  justify-content: center;
  text-align: center;
  background: #bdbdbd;
  position: absolute;
  bottom: 0;
}
.product-button button {
  padding: 1rem 1.4rem;
  width: 90%;
  background: #ffc107;
  border: none;
  cursor: pointer;
  font-size: 1.2em;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}
.product-button button:hover {
  background: #ffc107;
  box-shadow: 0 2px 8px rgba(0,0,0,0.5);
}

.product {
  background-color: #fff;
  height: 500px;
  min-width: 200px;
  max-width: 300px;
  box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 2px,
              rgba(0, 0, 0, 0.07) 0px 2px 4px,
              rgba(0, 0, 0, 0.07) 0px 4px 8px,
              rgba(0, 0, 0, 0.07) 0px 8px 16px,
              rgba(0, 0, 0, 0.07) 0px 16px 32px,
              rgba(0, 0, 0, 0.07) 0px 32px 64px;
  position: relative;
}

/* ========== ABOUT SECTION ========== */
.about {
  width: 100%;
  min-height: 400px;
  padding: 30px;
  background: #252525;
  background-image: url("images/rail3.jpg");
  background-color: #000;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}

.about-content {
  display: flex;
  align-items: start;
  justify-content: center;
  flex-wrap: wrap;
  width: 100%;
  padding-left: 50px;
  padding-right: 50px;
  padding-bottom: 150px;
  gap: 15px;
}

.about-text {
  min-width: 200px;
  max-width: 500px;
}

.about h2 {
  color: #fff;
}

.about p {
  font-size: 1.2rem;
  color: #fff;
}

/* ========== NEWSLETTER SECTION ========== */
.news-letter {
  width: 100%;
  display: flex;
  align-items: start;
  justify-content: center;
  background: #494949;
}

.news-letter-content {
  width: 100%;
  padding: 20px 50px;
  background-image: url("images/hex.svg");
  background-color: #000;
  background-size: cover;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.news-left {
  position: relative;
  width: 50%;
  min-width: 200px;
  min-height: 200px;
}

.news-left img {
  width: 30vw;
  max-width: 400px;
  min-width: 230px;
  z-index: 100;
}

.img-container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.news-right {
  width: 50%;
  min-width: 200px;
  min-height: 200px;
  padding: 10px 0;
}

.contact-product-form button,
.contact-product-form input,
.contact-product-form textarea,
.news-right form input {
  background-color: #faf0d1;
  width: 100%;
  padding: 10px;
  border: 4px solid rgb(255, 255, 255);
  border-radius: 10px;
  font-size: 1.2em;
}

.news-right form input {
  margin: 10px 0;
}

.contact-product-form {
  max-width: 1000px;
  width: 100%;
}
.contact-product-form form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.contact-product-form button:hover,
.contact-product-form input:hover,
.contact-product-form textarea:hover,
.news-right form input:hover {
  border: 4px solid #ffc107;
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.94);
}

.name-fields {
  display: flex;
  gap: 10px;
}

.name-fields input {
  flex: 1;
}

@media (max-width: 768px) {
  .news-letter-content {
    flex-direction: column;
    align-items: center;
  }
  .news-left,
  .news-right {
    width: 100%;
  }
  .name-fields {
    flex-direction: column;
  }
}

/* ========== FOOTER (lighter grey box) ========== */
.footer {
  background: #494949;
  padding: 20px 50px;
}

.footer-right {
  text-align: right;
}

.footer-right p {
  margin: 0.3rem 0;
  color: #fff;
  text-decoration: none;
}

.footer-icon {
  width: 24px;
  vertical-align: middle;
  margin-right: 5px;
}

.footer-social a img {
  width: 24px;
  height: auto;
  margin-left: 10px;
  vertical-align: middle;
}

/* ======================================
   Product Page Specific Styles
====================================== */

/* Product Hero Section */
.product-hero-section {
  position: relative;
  background: url('images/products/1.png') no-repeat center center;
  background-size: cover;
  height: 50vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #818181;
  color: #fff;
}
.product-hero-section .hero-overlay {
  background: rgba(0, 0, 0, 0.5);
  padding: 2rem;
  text-align: center;
}
.product-hero-section .hero-overlay h1 {
  font-size: 3em;
  margin-bottom: 0.5rem;
}
.product-hero-section .hero-overlay p {
  font-size: 1.2em;
}

/* Product Details Section */
.product-details-section {
  padding: 50px 5vw;
  background-color: #eee;
}
.product-details-section .details-container {
  display: flex;
  gap: 2rem;
  flex-wrap: wrap;
  align-items: flex-start;
}
.product-details-section .product-img {
  flex: 1 1 300px;
  text-align: center;
  overflow: hidden;
  background-color: #fff;
  border: 2px solid #ccc;
  box-shadow: 0 2px 8px rgba(0,0,0,0.4);
}
.product-details-section .product-img img {
  max-width: 100%;
  transition: transform 0.5s ease;
  transform: translate(0px, 0px) scale(1);
}
.product-details-section .product-info {
  flex: 1 1 300px;
}
.product-details-section .product-info h2 {
  margin-bottom: 0.5rem;
  font-size: 2em;
}
.product-details-section .price {
  font-size: 1.5em;
  color: #e60000;
  margin-bottom: 1rem;
}
.product-details-section .product-info p.description {
  line-height: 1.5;
  margin-bottom: 1.5rem;
}
.product-details-section .product-info ul {
  list-style: none;
  margin-bottom: 1.5rem;
  padding: 0;
}
.product-details-section .product-info ul li {
  margin-bottom: 0.5rem;
  padding-left: 1.2rem;
  position: relative;
}
.product-details-section .product-info ul li::before {
  content: "■";
  position: absolute;
  left: 0;
  color: #ffc107;
}
.product-details-section .product-info .cta-button {
  background: #ffc107;
  border: none;
  padding: 1rem 2rem;
  font-size: 1.2em;
  cursor: pointer;
  transition: background 0.3s ease;
}
.product-details-section .product-info .cta-button:hover {
  background: #e0a800;
}
@media (max-width: 768px) {
  .product-details-section .details-container {
    flex-direction: column;
  }
}

/* Contact Us Section (full-width hex background) */
.contact-product-section {
  width: 100%;
  background-image: url("images/hex.svg");
  background-color: #000;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  min-height: 400px;
  padding: 50px 0; /* vertical spacing */
}

/* Inner container for centering + max-width */
.contact-product-content {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: none;
  padding: 0 30px; /* optional horizontal padding */
}

.contact-product-content h2 {
  color: #fff;
  margin-bottom: 20px;
  text-align: center;
}

.contact-product-form {
  width: 100%;
}

/* Single-column form by default */
.contact-product-form form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}


/* reserve a fixed-height, white, centered message box */
#contact-form-feedback {
  min-height: 2em;              /* enough space for one line of text */
  color: #fff;                  /* white text */
  text-align: center;           /* horizontal centering */
  display: flex;
  align-items: center;          /* vertical centering */
  justify-content: center;
  /* optionally match your contact‐section bg: */
  margin-bottom: 1rem;
}



/* Two-column layout on larger screens */
@media (min-width: 992px) {
  .contact-product-form form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
  }
  .contact-product-form form textarea {
    grid-column: 1 / 3;
  }
  .contact-product-form form button[type="submit"] {
    grid-column: 1 / 3;
  }
}


.contact-flex-container {
  display: flex;
  gap: 20px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 50px;
}
/* Contact details styling */
.contact-details {
  flex: 1;
 
  text-align: center;
  padding: 20px;
}
.contact-details h2 {
  margin-bottom: 20px;
  font-size: 2em;
}
.contact-details p {
  font-size: 1.2em;
  margin: 10px 0;
}
.contact-details a {
  color: #ffc107;
  text-decoration: none;
}
/* Map container styling */
.map-container {
  flex: 1;
}
#map {
  width: 100%;
  height: 400px;
  border: 2px solid #ccc;
}
/* On small screens, stack columns */
@media (max-width: 768px) {
  .contact-flex-container {
    flex-direction: column;
  }
}


.leaflet-tile {
  filter: hue-rotate(40deg) brightness(1.7);
}