@font-face {
  font-family: 'CentraNo2';
  src: url('fonts/CentraNo2-Light.woff2') format('woff2'),
       url('fonts/CentraNo2-Light.woff') format('woff');
  font-weight: 300;
  font-style: normal;
}

@font-face {
  font-family: 'CentraNo2';
  src: url('fonts/CentraNo2-Medium.woff2') format('woff2'),
       url('fonts/CentraNo2-Medium.woff') format('woff');
  font-weight: 500;
  font-style: normal;
}

:root {
  --color: #333;
}

html, body {
  width: 100%;
  height: 100%;
  overflow-x: hidden; /* Prevent horizontal scroll */
  background-color: #fff; 
}

body {
  font-family: 'CentraNo2', sans-serif;
  font-weight: 300;
  margin: 0;
  padding: 0;
  color: var(--color);
}

.container {
  max-width: 800px;
  margin: 0 auto;
  padding: 40px 60px 40px 100px;
  background-color: white;
  text-align: left;
}

h1 {
  font-weight: 500;
  font-size: 32px;
  margin-bottom: 20px;
  color: #000099;  /* Changed to deep blue */
}

p {
  max-width: 100%;
  line-height: 1.8;
  font-size: 17px;
  padding: 0;
  margin: 0 0 1em 0;
  text-align: left;
}

.how-to-use {
  font-weight: 500;
  margin-top: 1em;
  margin-bottom: 0.5em;
}

.how-to-use + p {
  font-weight: 300;
}

/* Replace your current .blank and related classes with these */

.blank {
  width: 100%;
  height: 60vh;
  background-size: cover;
  background-position: center;
  background-attachment: fixed !important;
}

/* Apply images directly to elements instead of pseudo-elements */
.first-image {
  background-image: url('images/image1.jpg');
}

.second-image {
  background-image: url('images/image2.jpg');
}

.third-image {
  background-image: url('images/image3.jpg');
}

.fourth-image {
  background-image: url('images/image4.jpg');
}

.fifth-image {
  background-image: url('images/image5.jpg');
}

/* Mobile and tablet responsive adjustments */
@media (max-width: 768px) {
  .container {
    padding: 20px 15px; /* Significantly reduced padding */
    max-width: 100%; /* Allow container to use more screen width */
  }
  .blank {
    height: 40vh; /* Shorter parallax sections on mobile */
  }
}

/* Extra small devices (phones) */
@media (max-width: 480px) {
  .container {
    padding: 15px 10px; /* Even smaller padding for phones */
  }
  .blank {
    height: 30vh; /* Even shorter parallax sections on very small screens */
  }
}

/* For devices that don't handle fixed backgrounds well */
@media (hover: none) {
  .blank {
    background-attachment: fixed !important;  /* Force fixed even on touch devices */
  }
}

/* Accessibility - respect reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
  .blank {
    background-attachment: fixed !important;  /* Force fixed even with reduced motion */
    transition: none;
  }
}

@supports (-webkit-touch-callout: none) {
  /* iOS devices */
  .blank {
    background-attachment: scroll;
    background-position: center center;
  }
}

@media (pointer: coarse) and (max-width: 768px) {
  .blank {
    background-attachment: scroll !important;
    /* Disable parallax on mobile touch devices where it performs poorly */
  }
}