html {
    background-color: #000;
}

body {
  font-family: Arial, sans-serif;
  line-height: 1.6;
  margin: 0;
  padding: 0;
  color: #fff;
}

/* ======== Hero Section ======== */

.hero_section {
  background-color: #000;
  padding: 0;
  text-align: right;
  margin-top: 3rem;
}

.logo img {
  width: 100%;
  height: auto;
}

.logo .wide_screen {
  display: none;
}

.logo_1 img {
  width: 50%;
  height: auto;
  padding-right: 10%;
}

.logo_2 img {
  width: 50%;
  height: auto;
  padding-right: 1%;
}

.title {
  background-color: #000;
  padding: 20px;
  text-align: left;
  background: linear-gradient(to bottom, rgba(0,0,0,0.1) 0%, rgba(221, 13, 13, 0.473) 100%);
}

.title h1 {
  color: #fff;
  font-size: 2rem;
  margin: 0;
  margin-bottom: -5px;
  font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}

/* ======== Section 1 ======== */

.section_1 {
  background: linear-gradient(to bottom, rgba(221, 13, 13, 0.473) 0%, rgba(0, 0, 0, 0.1) 100%);
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: left;
}

/* Limit width for readability */
.section_1 .text {
  max-width: 600px;
  width: 100%;
}

/* Even out paragraph spacing */
.section_1 .text p {
  margin: 0 0 1rem 0;
  line-height: 1.8;
  letter-spacing: 0.5px;
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}

/* Consistent spacing for all image blocks */
.section_1 .image {
  width: 100%;
  max-width: 700px;
  margin: 2rem 0; /* <- identical margin above and below each image */
}

.section_1 img {
  width: 100%;
  height: auto;
  border-radius: 10px;
  display: block;
}

/* Prevent margin collapse between paragraphs and images */
.section_1 .text, 
.section_1 .image {
  padding: 0;
} 

.section_12 {
  display: none;
}

/* ======== Tablet ======== */

@media (min-width: 545px) {
  .hero_section {
    align-items: center;
    text-align: center;
  }

  .logo img {
    width: 40%;
    height: auto;
    margin-top: 2rem;
  }

  .logo .mobile {
    display: none;
  }

  .logo .wide_screen {
    display: inline;
  }

  .logo_1 img {
    width: 20%;
    height: auto;
    margin-right: -40%;
  }

  .logo_2 img {
    width: 20%;
    height: auto;
    margin-right: -40%;
  }

  .hero_section .title {
    padding-left: 10%;
  }

  .section_1 .text {
    width: 60%;
  }

  .image img {
    width: 100%;
    height: auto;
  }
}

/* ======== Laptop ======== */

@media (min-width: 1024px) {
  
  .logo img{
    width: 40%;
    height: auto;
    margin-top: 0;
  }

  .logo_1 img {
    width: 30%;
    height: auto;
    margin-right: -40%;
  }

  .section_1 {
    display: none;
  }

  .section_12 {
    display: flex;
    flex-direction: row;       
    align-items: center;
    gap: 2rem;                
    padding: 40px 20px;
    background: linear-gradient(to bottom, rgba(221, 13, 13, 0.473) 0%, rgba(0, 0, 0, 0.1) 100%);
  }

  .section_12 .image,
  .section_12 .text {
    flex: 1 1 50%;
  }

  .section_12 .image {
    max-width: 50%;
  }

  .section_12 img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 10px;
  }

  .section_12.section_reverse {
    flex-direction: row-reverse;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.1) 0%,rgba(221, 13, 13, 0.473) 100%);

  }

  .section_12 .text {
    padding: 0 1rem;
  }

  .section_12.section_reverse .text {
    padding: 0 1rem;
  }
  
  
}