/* =========================================

   GLOBAL RESET + BASE TYPOGRAPHY

========================================= */

* {

  margin: 0;

  padding: 0;

  box-sizing: border-box;

}



html {

  scroll-behavior: smooth;

}



body {

  font-family: Arial, sans-serif;

  background-color: #ffffff;

  color: #222;

  line-height: 1.6;

}



/* Utility spacing scale */

:root {

  --space-xs: 8px;

  --space-sm: 16px;

  --space-md: 32px;

  --space-lg: 48px;

  --space-xl: 80px;



  --gold: #c3a04c;

  --gold-dark: #a38435;

  --text-dark: #222;

  --text-light: #fff;

}



/* =========================================

   HEADER

========================================= */

header {

  width: 100%;

  padding: var(--space-sm) 5%;

  background-color: white;

  border-bottom: 1px solid #e4e4e4;

}



.header-contact {

  font-size: 14px;

  text-align: right;

  color: #444;

  margin-bottom: var(--space-xs);

}



.header-contact span {

  margin-left: 15px;

}



.header-contact a {

  color: #444;

  text-decoration: none;

}



.logo {

  text-align: center;

  padding: var(--space-xs) 0;

}



.logo img {

  max-height: 120px;

  height: auto;

  width: auto;

}



/* =========================================

   NAVIGATION

========================================= */

nav {

  margin: var(--space-xs) 0;

  text-align: center;

}



nav ul {

  list-style: none;

  display: inline-flex;

  flex-wrap: wrap;

  gap: 16px;

}



nav a {

  text-decoration: none;

  font-size: 16px;

  color: var(--text-dark);

  font-weight: bold;

  padding-bottom: 4px;

  transition: color 0.2s ease;

}



nav a:hover {

  color: var(--gold);

}



nav a.active {

  color: var(--gold);

  border-bottom: 3px solid var(--gold);

}



nav a.active:hover {

  color: var(--gold-dark);

}



/* =========================================

   HERO SECTION

========================================= */

.hero {

  background-image: url('../img/hero.jpg');

  background-size: cover;

  background-position: center;

  min-height: 420px;

  position: relative;

}



.hero-overlay {

  background-color: rgba(0, 0, 0, 0.55);

  width: 100%;

  height: 100%;

  padding: var(--space-xl) 10%;

  color: white;



  display: flex;

  flex-direction: column;

  justify-content: center;

  align-items: flex-start;  /* ← REQUIRED FIX */

}



.hero-overlay h1 {

  font-size: 38px;

  letter-spacing: 1px;

  margin-bottom: var(--space-sm);

}



.hero-overlay p {

  font-size: 18px;

  max-width: 850px;

}



.btn {

  display: inline-block;

  margin-top: var(--space-sm);

  padding: 12px 26px;

  background-color: var(--gold);

  color: rgb(0, 0, 0);

  font-weight: bold;

  text-decoration: none;

  border-radius: 4px;

  transition: background-color 0.2s ease;

}

.btn {

  display: inline-block;

  width: auto;

}

.btn:hover {

  background-color: #be952d;

}



/* =========================================

   MAIN CONTENT SECTION

========================================= */

.main {

  padding: var(--space-xl) 10%;

  max-width: 1200px;

  margin: 0 auto;

}



.main h2 {

  font-size: 32px;

  margin-bottom: var(--space-xs);

}



.main h3 {

  font-size: 24px;

  margin-bottom: var(--space-md);

}



.main h4 {

  font-size: 20px;

  margin-bottom: var(--space-sm);

}



.main p {

  font-size: 17px;

  margin-bottom: var(--space-sm);

}



/* =========================================

   FOOTER

========================================= */

footer {

  width: 100%;

  padding: var(--space-md) 10%;

  background-color: #111;

  color: white;

  text-align: center;

  font-size: 15px;

}



/* =========================================

   ABOUT SECTION

========================================= */

.about-section {

  display: flex;

  flex-wrap: wrap;

  padding: var(--space-xl) 10%;

  gap: var(--space-lg);

  align-items: flex-start;

}



.about-image {

  flex: 1 1 350px;

}



.about-image img {

  width: 100%;

  border-radius: 4px;

}



.about-content {

  flex: 2 1 500px;

}



.about-content h2 {

  font-size: 32px;

  margin-bottom: var(--space-xs);

}



.about-content hr {

  width: 80px;

  border: 2px solid var(--gold);

  margin-bottom: var(--space-md);

}



.about-content p {

  font-size: 17px;

  margin-bottom: var(--space-md);

}



/* =========================================

   TRAINING PAGE

========================================= */

.training-hero {

  background-image: url('../img/training-bg.jpg');

  background-size: cover;

  background-position: center;

  min-height: 700px;

  position: relative;

}



.training-overlay {

  background-color: rgba(0, 0, 0, 0.45);

  width: 100%;

  padding: var(--space-xl) 10%;

  color: white;

}



.training-overlay h2 {

  font-size: 32px;

  margin-bottom: var(--space-xs);

}



.training-overlay h3 {

  font-size: 26px;

  margin-bottom: var(--space-lg);

}



.training-overlay h4 {

  font-size: 22px;

  margin: var(--space-lg) 0 var(--space-sm) 0;

}



.training-overlay p {

  font-size: 18px;

  max-width: 850px;

  margin-bottom: var(--space-sm);

}



/* =========================================

   PRODUCT GRID

========================================= */

.products-grid {

  display: flex;

  flex-wrap: wrap;

  gap: var(--space-lg);

  padding: var(--space-xl) 10%;

  justify-content: center;

}



.product-tile {

  flex: 1 1 300px;

  max-width: 320px;

  background: #fff;

  border: 1px solid #ddd;

  text-align: center;

  padding: var(--space-md);

  border-radius: 6px;

  transition: transform 0.2s ease, box-shadow 0.2s ease;

}



.product-tile:hover {

  transform: translateY(-4px);

  box-shadow: 0px 4px 12px rgba(0,0,0,0.15);

}



.product-tile img {

  width: 100%;

  border-radius: 6px;

  margin-bottom: var(--space-sm);

}



.product-tile h3 {

  font-size: 22px;

  margin-bottom: var(--space-xs);

}



.product-tile p {

  font-size: 16px;

  color: #555;

}



/* =========================================

   CONTACT PAGE

========================================= */

.contact-section {

  padding: var(--space-xl) 10%;

  max-width: 900px;

  margin: 0 auto;

  text-align: left;

}



.contact-section h2 {

  font-size: 32px;

  margin-bottom: var(--space-xs);

}



.contact-section hr {

  width: 80px;

  border: 2px solid var(--gold);

  margin-bottom: var(--space-md);

}



.contact-section p {

  font-size: 18px;

  margin-bottom: var(--space-sm);

  color: #333;

}



.contact-details p {

  font-size: 18px;

  margin-bottom: var(--space-xs);

}



.contact-details a {

  color: #3468af;

  text-decoration: none;

}



.contact-details a:hover {

  text-decoration: underline;

}



/* =========================================

   BLOG PAGE

========================================= */

.blog-section {

  padding: var(--space-xl) 10%;

  max-width: 900px;

  margin: 0 auto;

}



.blog-section h2 {

  font-size: 32px;

  margin-bottom: var(--space-xs);

}



.blog-section hr {

  width: 80px;

  border: 2px solid var(--gold);

  margin-bottom: var(--space-md);

}



.blog-list {

  display: flex;

  flex-direction: column;

  gap: var(--space-lg);

}



.blog-post h3 {

  font-size: 24px;

  margin-bottom: var(--space-xs);

}



.blog-post h3 a {

  text-decoration: none;

  color: var(--text-dark);

}



.blog-post h3 a:hover {

  color: var(--gold);

}



.blog-post p {

  font-size: 17px;

  margin-bottom: var(--space-xs);

  color: #555;

}



.blog-read {

  text-decoration: none;

  font-weight: bold;

  color: #3468af;

}



.blog-read:hover {

  text-decoration: underline;

}



/* =========================================

   VIDEOS PAGE

========================================= */

.videos-section {

  padding: var(--space-xl) 10%;

  max-width: 1200px;

  margin: 0 auto;

}



.videos-section h2 {

  font-size: 32px;

  margin-bottom: var(--space-xs);

}



.videos-section hr {

  width: 180px;

  border: 2px solid var(--gold);

  margin-bottom: var(--space-md);

}



.videos-section p {

  font-size: 18px;

  margin-bottom: var(--space-md);

  color: #333;

}



.video-wrapper {

  margin-bottom: var(--space-lg);

}



.video-wrapper video {

  width: 100%;

  border-radius: 16px;

  border: 1px solid #ccc;

}



/* =========================================

   RESPONSIVE BREAKPOINTS

========================================= */

@media (max-width: 900px) {

  .hero-overlay h1 {

    font-size: 30px;

  }

  .training-hero {

    min-height: 500px;

  }

}



@media (max-width: 700px) {

  nav ul {

    gap: 10px;

  }



  .products-grid {

    gap: var(--space-md);

  }



  .about-section,

  .training-overlay,

  .main {

    padding: var(--space-lg) 5%;

  }

}



@media (max-width: 480px) {

  .hero-overlay {

    padding: var(--space-lg) 6%;

  }



  .hero-overlay h1 {

    font-size: 26px;

  }



  .logo img {

    max-height: 90px;

  }



  .product-tile {

    max-width: 100%;

  }

}