* { background-repeat: no-repeat; background-position: center center; box-sizing: border-box; }
body { margin: 0px; padding: 0px; width: 100%; height: auto; background-color: var(--background); color: var(--black); font-family: "myriad-pro", sans-serif; font-weight: 400; font-size: 100%; line-height: 1.2; text-rendering:  optimizeLegibility; -webkit-font-smoothing: antialiased; }
ul, ol { padding: 0px; margin: 0px; }
li { list-style-type: none; vertical-align: top; }
.richtextcontent ul, .content ul, .richtextcontent ol { margin-bottom: 26px;}
.richtextcontent ul > li, .content ul > li {list-style-type: disc;margin-left: 30px;}
.richtextcontent ol > li, .content ol > li {list-style-type: decimal; margin-left: 30px;}
fieldset { padding: 0px; margin: 0px; border: none; }
input, textarea, select { font-size: 90%; background: transparent; border: solid #000000 1px; padding: 5px; color: #000000; box-sizing: border-box;  }
input[type=text], input[type=password]  { height: 30px; }
input[type=button], input[type=submit] { cursor: pointer; background-color: #000000; color: #ffffff; padding: 10px 20px 10px 20px; }
select { height: 30px; padding-right: 30px; background-image: none; background-repeat: no-repeat; background-position: right 10px center; }
table { border-spacing: 0px; }
td, th { padding: 0px; text-align: left; vertical-align: top; }
.hidden { display: none; }
.spacer { clear: both; height: 0px; display: none; }
a { color: var(--black); text-underline-offset: 0.2em; text-decoration-color: var(--black); text-decoration: underline; }
strong, p>strong  {  font-weight: 600;}
em {font-style: italic;}

.richtextcontent figure {width: min-content; color: gray; font-size: 0.8rem; font-style: italic; }
.richtextcontent figure[style*="float:right"], .richtextcontent img[style*="float: right"] { margin: 0 0 30px 30px;}
.richtextcontent figure[style*="float:left"], .richtextcontent img[style*="float: left"] { margin: 0 30px 20px 0;}
.richtextcontent figure.image:not([style]) { margin: 20px 0 20px 0;}

h1, h1>span, h2, h3, h4, h5, h6 { padding: 0px 0px 0px 0px; margin: 0px; line-height: 1.3; color: var(--black); }
h1 {font-size: 40px; margin-bottom: 1.2rem; }
h2 {font-size: 24px; margin-bottom: 1rem;}
h3 {font-size: 20px; margin-bottom: 0.75rem;}
p { font-size: 16px; }

@media (max-width: 599px) {
 h1 { font-size: 2rem; margin-bottom: 1.2rem; }
 h2 { font-size: 1.75rem; margin-bottom: 1rem; }
 h3 { font-size: 1.5rem; margin-bottom: 1rem; }
 p { font-size: 0.9375rem; padding-bottom: 1rem; }
}

:root 
{
   --background: #FFFFFF;
   --red: #CD2925;
   --grey: #B1B0AF;
   --blue: #0B1D50;

}

/* Brochure */

.layoutheader .logo {
  display: flex;
  justify-content: center;
  margin: 20px 0;
}

.layoutheader .logo .links,
.layoutheader .logo .links li,
.layoutheader .logo .links a {
  display: block; /* reset, avoid unwanted full-width stretching */
}

.layoutheader .logo img {
  width: 500px;
  height: 200px;
  display: block;
}

.trucks .images_container {
  display: flex;
  flex-wrap: wrap;
  max-width: 1200px;  /* set to whatever max width you want the grid to be */
  margin: 0 auto;
  gap: 10px;     /* centers the container itself on the page */
}

.trucks .images_container .image {
  flex: 0 0 calc((100% - 32px) / 3); /* 3 per row, accounting for 2 gaps of 16px */
  height: 250px; /* set your desired image height */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.info .content {
  color: var(--blue);
  text-align: center;
  font-weight: 700;
  line-height: 1.4;
  max-width: 1200px;
  margin: 0 auto; /* centers the whole block on the page */
  padding: 0 24px; /* breathing room on smaller screens */
}

.info .content p {
  font-size: 30px;
  margin: 20px 24px;
}

.contact {
  background-color: var(--blue);
  padding: 40px 24px;
}

.contact .links {
  display: grid;
  grid-template-columns: repeat(2, auto);
  justify-content: center; /* centers the 2-column grid within the container */
  align-items: center;
  gap: 24px 400px; /* row gap, column gap */
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 1200px;
}

.contact .links .link {
  display: flex;
  justify-content: center;
}

.contact .links .link:hover {
  opacity: 0.8;
}

.contact .links a {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 12px;
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  font-size: 24px;
}

/* .contact .links .link1 a, .contact .links .link3 a{
   cursor: default;
}

.contact .links .link1:hover, .contact .links .link3:hover{
   opacity: 1;
} */


.contact .links a i {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 3px solid #fff;
  color: #fff;
  font-size: 16px;
  flex-shrink: 0;
}

.copyright {
  float: left;
  margin: 0 0 0 20px;
  color: var(--grey);
}

.layoutcredits {
  float: right;
  margin-top: 15px;
  margin-right: 30px;
}

.layoutcredits .beachshore {
  color: var(--grey);
  text-align: right;
}

.layoutcredits .beachshore a:hover {
  cursor: pointer;
  opacity: 0.8;
}

.contact-form {
  margin-top: 30px;
  margin-bottom: 30px;
}

.contact-form .titletxt {
  text-align: center;
  color: var(--blue);
  font-size: 32px;
  font-weight: 700;
  margin-bottom: 30px;
}

.contact-form .formbuilder {
  display: flex;
  flex-wrap: wrap;
  gap: 20px 24px;
  max-width: 1000px;
  margin: 0 auto;
}

/* Default: two fields per row */
.contact-form .formbuilder .form-group {
  flex: 1 1 calc(50% - 12px);
}

/* Message field spans full width */
.contact-form .formbuilder .field_area {
  flex: 1 1 100%;
}

.contact-form .formbuilder .label label {
  display: block;
  color: var(--blue);
  font-weight: 600;
  font-size: 16px;
  margin-bottom: 8px;
}

.contact-form .formbuilder .label .required {
  color: var(--red);
}

.contact-form .formbuilder .input input,
.contact-form .formbuilder .input textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 12px 14px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 16px;
  background: #fff;
}

.contact-form .formbuilder .input textarea {
  min-height: 150px;
  resize: vertical;
}

.contact-form .formbuilder .spacer {
  display: none; /* gap already handles spacing */
}

.contact-form .buttons {
  max-width: 1000px;
  margin: 10px auto 0;
}

.contact-form .buttons .button {
  background-color: var(--red);
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 16px 32px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
}

.contact-form .buttons .button:hover {
  opacity: 0.8;
}

.contact-form .confirm {
  max-width: 1000px;
  margin: 0 auto;
  padding: 40px 30px;
  text-align: center;
  background-color: #f4f7fb; /* light tint, feel free to swap for something else */
  border: 1px solid var(--blue);
  border-radius: 8px;
}

.contact-form .confirm p {
  color: var(--blue);
  font-size: 22px;
  font-weight: 700;
  margin: 0;
}

@media (max-width: 600px) {
  .contact-form .formbuilder .form-group {
    flex: 1 1 100%;
  }
}



/* ============================================
   LAPTOP / SMALL DESKTOP — 1024px
   ============================================ */
@media (max-width: 1024px) {

  .layoutheader .logo img {
    width: 400px;
    height: 160px;
  }

  .trucks .images_container {
    max-width: 900px;
    gap: 10px;
  }

  .info .content p {
    font-size: 26px;
  }

  .contact .links {
    gap: 24px 120px; /* reduce the huge 400px column gap so it doesn't overflow */
  }

  .contact .links a {
    font-size: 20px;
  }

  .contact-form .formbuilder,
  .contact-form .buttons {
    max-width: 800px;
  }
}

/* ============================================
   TABLET — 768px
   ============================================ */
@media (max-width: 768px) {

  .layoutheader .logo img {
    width: 300px;
    height: 120px;
  }

  .trucks .images_container {
    max-width: 700px;
    gap: 8px;
  }

  .trucks .images_container .image {
    flex: 0 0 calc((100% - 16px) / 3); /* keep 3-across, matches reduced gap */
    height: 28vw;
  }

  .info .content {
    padding: 0 16px;
  }

  .info .content p {
    font-size: 22px;
    margin: 16px 12px;
  }

  .contact-form {
    padding: 0 20px;
  }

  .contact {
    padding: 30px 20px;
  }

  .contact .links {
    gap: 20px 60px;
  }

  .contact .links a {
    font-size: 18px;
  }

  .contact .links a i {
    width: 36px;
    height: 36px;
    font-size: 14px;
  }

  .copyright,
  .layoutcredits {
    float: none;
    text-align: center;
    margin: 0 0 10px 0;
  }

  .layoutcredits .beachshore {
    text-align: center;
  }
}

/* ============================================
   MOBILE — 599px (matches existing typography breakpoint)
   ============================================ */
@media (max-width: 599px) {

  .layoutheader .logo {
    margin: 12px 0;
  }

  .layoutheader .logo img {
    width: 220px;
    height: 88px;
  }

  .info .content p {
    font-size: 18px;
    margin: 12px 0;
  }

  .contact-form {
    padding: 0 16px;
  }

  .contact {
    padding: 24px 16px;

  }

  .contact .links {
    grid-template-columns: 1fr; /* stack to single column */
    justify-items: flex-start;
    gap: 20px;
  }

  .contact .links a {
    font-size: 16px;
  }

  .contact-form {
    margin-top: 30px;
    margin-bottom: 30px;
  }

  .contact-form .titletxt {
    font-size: 24px;
    margin-bottom: 20px;
  }

  .contact-form .formbuilder {
    gap: 14px;
  }

  .contact-form .buttons .button {
    width: 100%;
    padding: 14px 24px;
  }
}