/*border: red solid 4px;*/
/* green colour 36f0839d*/
/* color: #fe6601; orange colour*/
/* color: rgba(255, 255, 255, 0.856); white */

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

/**
*! Fonts
**/

/* bricolage-grotesque-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Bricolage Grotesque";
  font-style: normal;
  font-weight: 400;
  src: url("/fonts/bricolage-grotesque-v9-latin-regular.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* bricolage-grotesque-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Bricolage Grotesque";
  font-style: normal;
  font-weight: 700;
  src: url("/fonts/bricolage-grotesque-v9-latin-700.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* bricolage-grotesque-800 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Bricolage Grotesque";
  font-style: normal;
  font-weight: 800;
  src: url("/fonts/bricolage-grotesque-v9-latin-800.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* dm-sans-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 400;
  src: url("/fonts/dm-sans-v17-latin-regular.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* dm-sans-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 700;
  src: url("/fonts/dm-sans-v17-latin-700.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/*======================================================
  1. Base Font & Headings (Bricolage Grotesque)
  ======================================================*/

/* * Apply Bricolage Grotesque to all headings, the brand title, and the main navbar button.
 * Use the same heavy font-weight, line-height, and letter-spacing for consistency.
 */
h1,
h2,
h3,
.brand-title,
.navbar .contact-us {
  /* Fallback added: 'Bricolage Grotesque', 'Inter', sans-serif; */
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 800; /* Use a heavy weight for maximum visibility */
  line-height: 1.1; /* Keeps vertical space tight for impact */
  letter-spacing: -0.02em;
}

/*======================================================
  2. Fluid Sizing (Ensures Responsive Headings)
  ======================================================*/

/* * Apply the responsive CLAMP sizes here. 
 * This OVERRIDES the fixed 'font-size' that was conflicting below.
 */
.hero h1 {
  /* Min 2.8rem (45px) | Fluid 7vw | Max 4.5rem (72px) */
  font-size: clamp(2.8rem, 7vw, 4.5rem);
}

h2 {
  /* Min 2rem (32px) | Fluid 5vw | Max 3rem (48px) */
  font-size: clamp(2rem, 5vw, 3rem);
}

h3 {
  /* Min 1.5rem (24px) | Fluid 3vw | Max 2rem (32px) */
  font-size: clamp(1.5rem, 3vw, 2rem);
}

/*======================================================
  3. Spacing & Margin
  ======================================================*/

/* * Define margins/spacing separately, and ensure the line-height is 
 * not overwritten by the generic Bricolage rules above.
 */
h1 {
  margin-bottom: 25px;
}

h2 {
  margin-bottom: 15px;
}

h3 {
  margin-bottom: 10px;
}

/*======================================================
  4. Body Copy (DM Sans)
  ======================================================*/

/* * Apply DM Sans to all body text.
 * Note: If using <p1> tags, you should include p1 in this selector.
 */
p {
  /* Fallback added: 'DM Sans', 'Arial', sans-serif; */
  font-family: "DM Sans", sans-serif;
  font-weight: 400; /* Regular weight for easy reading */
  font-size: 1.125rem; /* Approx 18px (Excellent readability) */
  line-height: 1.6; /* Excellent spacing for long-form reading */
  margin-bottom: 20px;
}
html,
body {
  padding: 0;
  margin: 0;

  background-color: #140b2a;

  color: #fe6601;
  font-size: 100%;
  font-family: "DM sans", "Arial", sans-serif;
}

.logo {
  vertical-align: bottom;
  width: 50px;
  margin-right: 1em;
}

.navbar {
  display: flex;
  justify-content: space-evenly;
  align-items: flex-end;
  padding: 15px 20px;
  border-bottom: 1px solid rgba(254, 102, 1, 0.1);
  z-index: 2; /* check this */
  width: 100%;
}

.ip-phonenumber-nav {
  margin-top: 0.25em;
}
.ip-title-number {
  justify-content: center;
  text-align: center;
}

.navbar-brand {
  display: flex;
  align-items: flex-end;
  margin-right: 0px;
  width: 100%;
}

.brand-title {
  font-size: 2em;
  margin-left: 20px;
  margin-top: auto;
  line-height: 1;
  margin-bottom: -5px;
  text-align: center;
  line-height: 1.1;
}

.navbar-links-center {
  display: flex;
  flex-wrap: nowrap;
  flex-shrink: 0;
  list-style: none;
  padding: 0;
  gap: 20px;
  margin-left: 20px;
  margin-top: 0px;
  align-items: flex-end;
  margin-bottom: -5px;
  font-size: 1.5em;
  margin-left: auto;
  font-weight: 700;
}

.navbar-links-center a {
  text-decoration: none;
  color: rgba(255, 255, 255, 0.856);
  font-size: 1em;
  line-height: 1;
  padding-top: 8px;
}

.navbar-links-center a:hover {
  color: #36f0839d;

  /* Optional: Add a smooth transition effect */
  transition: color 0.3s ease;
}
/*TODO: MAKE THE NAV BAR ALIGN CORRECT ON MOBILE*/
.navbar-right-mobile-group {
  display: flex;
  align-self: flex-end;
  align-items: flex-end;
  margin-left: 20px;
}

.navbar-contact {
  margin-left: 0;
  margin-bottom: 0px;
  align-self: auto;
}
.contact-us {
  padding: 14px 28px;
  border: 3px solid #fe6601;
  background-color: transparent;
  color: #fe6601;
  font-size: 1.2em;
  cursor: pointer;
  border-radius: 15px;
  position: relative;
  overflow: hidden;
  z-index: 1;
  transition: color 0.4s ease;
  font-family: "DM Sans", "Arial", sans-serif;
  font-weight: 700; /* Bold text makes the button stand out */
  font-size: 1.125rem;
}

.contact-us::before {
  content: "";
  background-color: #fe6601;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  transform: translateX(-100%);
  transition: transform 0.4s ease-out;
}

.contact-us:hover {
  color: #140b2a;
  border-color: #fe6601;
}

.contact-us:hover::before {
  transform: translateX(0);
}

.hamburger-menu {
  display: none;
  align-self: flex-end;
}

.bar {
  display: block;
  width: 35px;
  height: 6px;
  margin: 8px auto; /* Space between bars */
  background-color: #fe6601; /* Orange color */
  transition: all 0.3s ease-in-out;
}

.bar:first-child {
  margin-top: 0;
}
.bar:last-child {
  margin-bottom: 0;
}
/**
*! mobile styles
**/

@media (max-width: 900px) {
  .navbar {
    align-items: flex-end;
    justify-content: space-between;
    padding: 10px 15px;
    position: relative;
  }

  .navbar-right-mobile-group {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: auto;
    padding-left: 10px;
    padding-right: auto;
  }

  /* CORRECTED AND MERGED NAVBAR LINKS STYLES */
  .navbar-links-center {
    flex-direction: row; /* Horizontal links */
    justify-content: center; /* Center links in the horizontal bar */
    gap: 0px; /* Spacing between links */
    position: absolute;
    top: 60%;
    left: 0;
    width: 100%; /* Full width bar */
    background-color: #140b2a;
    border-top: 1px solid rgba(254, 102, 1, 0.2);
    padding: 10px 0; /* Vertical padding for the bar */
    visibility: hidden;
    text-align: center;

    /* HIDDEN STATE */
    max-height: 0;
    overflow: hidden;
    /*  transition: max-height 0.3s ease-in-out, margin-top 0.3s ease-in-out, 
      visibility 0s 0.3s;  */
    margin-top: 0px;
    list-style: none;
    margin: 0;
  }

  /* Style for individual links in the dropdown */
  .navbar-links-center li {
    width: auto; /* Allow items to shrink for horizontal layout */
  }

  .navbar-links-center li a {
    color: rgba(255, 255, 255, 0.856);
    font-size: 1.2rem;
    padding: 5px 10px;
    display: block;
    text-decoration: none;
  }

  /* Hover state for links in the dropdown */
  .navbar-links-center li a:hover {
    background-color: rgba(254, 102, 1, 0.1);
    color: #fe6601;
  }

  /* The ACTIVE class to show the menu */
  .navbar-links-center.active {
    /* Adjusted height for one horizontal row of links */
    max-height: 150px;
    visibility: visible;
    /* transition: max-height 0.3s ease-in-out, margin-top 0.3s ease-in-out, 
      visibility 0s 0s; */
    margin-top: 40px;
    z-index: 9999;
  }

  /* Hamburger menu visibility and style */
  .hamburger-menu {
    display: block;
    cursor: pointer;
    margin: 0px;
  }

  /* Hamburger to 'X' transformation */
  .hamburger-menu.active .bar:nth-child(2) {
    opacity: 0;
  }
  .hamburger-menu.active .bar:nth-child(1) {
    transform: translateY(14px) rotate(45deg);
  }
  .hamburger-menu.active .bar:nth-child(3) {
    transform: translateY(-14px) rotate(-45deg);
  }
}

.logo {
  width: 60px;
}

.brand-title {
  font-size: 1.3em;
  margin-left: 8px;
  align-self: auto;
  justify-content: auto;
  margin-bottom: -3px;
}

.navbar-contact {
  margin-left: 0;
  margin-right: -3px;
  align-self: center;
}

.contact-us {
  padding: 6px 10px;
  font-size: 16px;
  border-radius: 10px;
}

.hero,
.our-story,
.our-services,
.contact-us {
  text-align: center;
}

.image-after-hero {
  text-align: center;
  padding: 20px 0;
}

.hero h2,
.hero h1,
.hero h3,
.hero p {
  /* Use a consistent, but slightly smaller margin than the general h1/h2 to group the hero text */
  margin-bottom: 40px;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.9);
}

.hero h3:last-of-type {
  margin-bottom: 10px;
}

.hero {
  display: flex; /* Use Flexbox for easy vertical stacking and centering */
  flex-direction: column;
  align-items: center; /* Center content horizontally */
  text-align: center; /* Center text within its lines */
  position: relative;
  z-index: 1;

  /* Set a minimum height for the image to be visible */
  min-height: 500px;

  /* Add internal padding to separate content from the top/bottom edges */
  padding: 50px 20px;

  /* 2. BACKGROUND IMAGE PROPERTIES */
  background-image: url("/img/hero.jpg");
  background-repeat: no-repeat;

  /* Ensure the image covers the whole area without stretching or clipping */
  background-size: cover;
  background-position: center center;
}

.hero::before {
  content: ""; /* Required for pseudo-elements */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.65);
  z-index: -1;
}
.hero-text-box {
  background-color: rgba(255, 255, 255, 0.2);
  padding: 20px;
  padding-bottom: 20px;
  width: min(1000px, 92%); /*  width: min(800px, 92%); settings i like*/
  border-radius: 10px;
}

.hero .contact-us {
  margin-top: 55px;
  margin-bottom: 0px;
}

.our-story {
  width: min(1000px, 92%);
  padding: 20px;
  margin-left: auto;
  margin-right: auto;
  padding-bottom: 0px;
  /* padding-top: 40px; */
}

.paint-heading-bg {
  display: inline-block;
  padding-left: 40px;
  padding-right: 40px;
  padding-top: 10px;
  padding-bottom: 10px;
  margin: 0 auto;
  text-align: center;
  background-color: transparent;
  border: none;
  outline: none;
  background-image: url(/img/greenpaint.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center center;
}
.paint-heading-bg h2 {
  margin-bottom: 0;
  color: rgba(255, 255, 255, 0.856);
  position: relative;
  z-index: 1;
  /* Add padding to lift the text off the center of the graphic if needed */
  /* padding-top: 20px; */
}

.foundations {
  margin-top: 20px;
  width: min(1000px, 92%);
}

.ip-ratings-carousel {
  margin: 20px auto;
  width: min(1000px, 90%);
  border: 5px /* solid red */;
  display: flex;
  overflow-x: auto;
  justify-items: center;
  border-radius: 2em;
}

.ip-ratings-carousel::-webkit-scrollbar {
  display: none;
}

.ip-ratings-carousel-group {
  display: flex;
  justify-content: center;
  gap: 2.5em;
  animation: spin 15s infinite linear;
  padding-right: 2.5em;
}

.ip-ratings-carousel-card {
  flex: 0 0 16em; /* this is what you change for sizing */
  height: 12em; /* this is what you change for sizing */
  /* padding: 1em; */
  /* background: cornflowerblue; */
  align-content: center;
  border-radius: 2em;
}

.ip-ratings-carousel-card img {
  width: 110%;
  height: 90%;

  object-fit: cover;
  border-radius: 2em;
}
/* Media Query: Only applies to screens WIDER than 768px (Desktop/Large Tablet) */
@media (min-width: 769px) {
  .ip-ratings-carousel:hover .ip-ratings-carousel-group {
    /* This rule is now only active on desktop */
    animation-play-state: paused;
  }
}
@media (max-width: 768px) {
  .ip-ratings-carousel-group {
    animation: spin 25s infinite linear;
  }
}

.range-services {
  margin-top: 30px;
  text-align: center;
  width: min(1000px, 92%);
  align-content: center;
}

.our-services {
  width: min(1000px, 92%);
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 0px;
}

.range-services a.services-link {
  text-decoration: none;
  color: rgba(255, 255, 255, 0.856);
  font-weight: 780;
}
.range-services a.services-link:hover {
  color: #36f0839d;
  transition: color 0.2s ease-in-out;
}

/**
*! For the popup large images 
**/

/**
*!  the .carousel for images 
**/

.carousel {
  margin: 20px auto;
  width: 300px;
  border: 5px /* solid red */;
  display: flex;
  overflow-x: auto;
  justify-items: center;
  border-radius: 1em;
}

.carousel::-webkit-scrollbar {
  display: none;
}

.group {
  display: flex;
  justify-content: center;
  gap: 1em;
  animation: spin 30s infinite linear;
  padding-right: 1em;
}

.card {
  flex: 0 0 20em; /* this is what you change for sizing */
  height: 15em; /* this is what you change for sizing */
  /* padding: 1em; */
  background: cornflowerblue;
  border-radius: 0.2em;
  align-content: center;
  border-radius: 1em;
  cursor: pointer;
}

.group .card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 1em;
}

.carousel:hover .group {
  animation-play-state: paused;
}
@media screen and (min-width: 800px) {
  .mobile-services {
    display: none; /* Hides the entire carousel */
  }
}

@media (max-width: 768px) {
  .carousel:hover .group {
    animation-play-state: running;
  }
}
@keyframes spin {
  from {
    translate: 0;
  }
  to {
    translate: -100%;
  }
}

#imageModal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  background: rgba(0, 0, 0, 0.85);
  align-items: center;
  justify-content: center;
}

#modalImage {
  max-width: 90%;
  max-height: 90%;
}

.lightbox-close {
  position: absolute;
  top: 20px;
  right: 30px;
  color: #fff;
  font-size: 40px; /* Make it large and clear */
  font-weight: bold;
  text-decoration: none;
  cursor: pointer;
  line-height: 1;
  opacity: 0.8;
  transition: opacity 0.2s;
}

.lightbox-close:hover {
  opacity: 1;
}

/**
*! On to the rest of service selection
**/

.service-grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px 0px;
  width: min(1000px, 92%);
  margin: 40px auto;
  margin-top: 0px;
}

.service-item .service-heading {
  text-align: center;
}

.service-grid-container > .service-item:last-child {
  grid-column: 1 / -1;
  justify-self: center;
  max-width: 500px;
}

@media (max-width: 800px) {
  .service-grid-container {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .service-grid-container > .service-item:nth-child(n + 5) {
    display: none;
  }
}

.ip-why-section {
  width: min(1000px, 92%);
  padding: 20px;
  padding-top: 0px;
  margin-top: 0px;
  margin-left: auto;
  margin-right: auto;
  /* align-content is not valid on block elements; removed */
}

/* * TITLE CONTAINER CONTROL
* Keeps the display: flex; to center the paint-heading-bg block itself. 
*/
.ip-why-choose-us {
  width: min(1000px, 92%);
  align-content: center;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 2em;
  display: flex; /* Kept to center the title block */
  justify-content: center; /* ADDED: Centers the paint-heading-bg block */
}

/* * TITLE ALIGNMENT
* Uses the new class to center the text *within* the paint-heading-bg container.
*/
.paint-heading-bg.title-center-align {
  text-align: center;
}

/* LIST STYLES */
.why-choose-list {
  list-style: none; /* Removes default bullet points */
  padding: 0;
  margin: 20px 0;
  /* ADDED: Display grid for responsive layout (optional, but good practice for lists of icons) */
  display: grid;
  grid-template-columns: repeat(
    auto-fit,
    minmax(280px, 1fr)
  ); /* 3 columns on desktop, adapts to mobile */
  gap: 30px;
}

/* * LIST ITEM (ICON-OVER-TEXT LAYOUT)
* Overrides previous side-by-side styles.
*/
.why-choose-item {
  display: flex; /* Enable Flexbox */
  flex-direction: column; /* Stack icon above text content */
  align-items: center; /* Centers the icon and the text block horizontally */
  margin-bottom: 0; /* Removed from here, controlled by grid gap above */
  gap: 0; /* Removed from here */
}

/* NEW: Wrapper for the SVG (necessary due to HTML change) */
.icon-svg-wrapper {
  /* Ensures wrapper doesn't interfere with SVG size or centering */
  display: inline-block;
  margin-bottom: 15px; /* Space between icon and text */
}

/* SVG ICON STYLES */
.why-choose-item svg.icon-small {
  width: 48px; /* New size for prominent icon */
  height: 48px;
  flex-shrink: 0;
  /* margin-bottom removed as it's controlled by the wrapper now */
  color: var(--primary-accent-color, #fe6601);
}

/***! why choose us ip section**/

.ip-why-section {
  width: min(1000px, 92%);
  padding: 20px;
  padding-top: 0px;
  margin-top: 0px;
  margin-left: auto;
  margin-right: auto;
}

.ip-why-choose-us {
  width: min(1000px, 92%);
  align-content: center;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 2em;
  display: flex; /* Kept to center the title block */
  justify-content: center; /* ADDED: Centers the paint-heading-bg block */
}

.paint-heading-bg.title-center-align {
  text-align: center;
}

.paint-heading-bg .heading-tagline {
  font-size: 1.2em; /* Slightly smaller than the H2 */
  color: rgba(255, 255, 255, 0.856); /* Use a prominent color */
  margin-top: 0px; /* Pull it closer to the H2 */
  font-weight: 400; /* Make it lighter than the H2 */
}

.why-choose-list {
  list-style: none; /* Removes default bullet points */
  padding: 0;
  margin: 20px 0;
  display: grid;
  grid-template-columns: repeat(
    auto-fit,
    minmax(500px, 1fr)
  ); /* 3 columns on desktop, adapts to mobile */
  gap: 30px;
  width: min(1000px, 92%);
}

.why-choose-item {
  display: flex; /* Enable Flexbox */
  flex-direction: row; /* Stack icon above text content */
  align-items: center; /* Centers the icon and the text block horizontally */
  gap: 15px; /* Adjust spacing between SVG and text */
  margin-bottom: auto;
  align-content: center;
  justify-items: center;
  margin-top: auto;
}

/* NEW: Wrapper for the SVG (necessary due to HTML change) */
.icon-svg-wrapper {
  /* Ensures wrapper doesn't interfere with SVG size or centering */
  display: inline-block;
  margin-top: auto;
  margin-bottom: auto;
}

/* SVG ICON STYLES */
.why-choose-item svg.icon-small {
  width: 32px; /* Set to the smaller size for side-by-side (as seen in the image) */
  height: 32px;
  flex-shrink: 0; /* Prevents icon from shrinking */
  color: #36f0839d;
}

/* TEXT CONTENT STYLES */
.why-choose-item .benefit-content {
  /* Restrict the width of the text block for readability */
  flex-grow: 1;
}

.benefit-content h3 {
  margin-top: 0;
  margin-bottom: 5px;
  font-size: 1.2em;
  color: rgba(255, 255, 255, 0.856);
  text-align: left; /* ENSURES heading text is left-aligned */
}

.why-choose-item .benefit-content p {
  margin-bottom: 0;
  line-height: 1.6;
  color: #fe6601;
  text-align: left; /* ENSURES paragraph text is left-aligned */
}

/* ========================================================= */
/* MOBILE STYLES: SVG ABOVE TEXT, SINGLE COLUMN */
/* ========================================================= */
@media (max-width: 800px) {
  /* 1. Force the list into a single vertical column */
  .why-choose-list {
    display: flex;
    flex-direction: column;
    gap: 0; /* Use margin-bottom on the item instead */
  }

  /* 2. Change the list item from side-by-side (row) to stack (column) */
  .why-choose-item {
    display: flex;
    flex-direction: column; /* **KEY CHANGE: Stacks the SVG above the text** */
    align-items: center; /* Centers the SVG and text block horizontally */
    text-align: center; /* Centers text content within the item */
    margin-bottom: 30px; /* Space between stacked benefits */
    gap: 0;
  }

  /* 4. Remove flex-grow and center the text content block */
  .why-choose-item .benefit-content {
    flex-grow: 0; /* Reset flex-grow from desktop styles */
    width: 100%; /* Ensures the text block fills the available width */
  }

  /* 5. Center the heading and paragraph text */
  .why-choose-item .benefit-content h3,
  .why-choose-item .benefit-content p {
    text-align: center; /* Ensures text is centered under the icon */
  }

  /* 6. Remove margin-top override on heading (if needed) */
  .why-choose-item .benefit-content h3 {
    margin-top: 5px; /* Add slight margin back above the heading */
  }
}
/***! ip page contact form section**/

.contact-us-section {
  width: min(1000px, 92%);
  padding: 20px;
  padding-top: 0px;
  margin-top: 0px;
  margin-left: auto;
  margin-right: auto;
}

.contact-us-section form {
  display: flex;
  flex-direction: column;
  gap: 15px;
  background-color: rgba(255, 255, 255, 0.05);
  padding: 30px;
  border-radius: 10px;
  border: 1px solid rgba(254, 102, 1, 0.2);
}

/* --- 2. Labels --- */
.contact-us-section label {
  color: rgba(255, 255, 255, 0.856);
  font-family: "DM Sans", sans-serif;
  font-size: 1.125rem;
  font-weight: 700;
  margin-top: 5px;
}

.contact-us-section input[type="text"],
.contact-us-section input[type="email"],
.contact-us-section input[type="tel"], /* Added 'tel' type */
.contact-us-section input[type="number"] {
  width: 100%;
  padding: 15px;
  background-color: #140b2a;
  color: white;
  border: 2px solid rgba(254, 102, 1, 0.5); /* Orange border for visibility */
  border-radius: 8px;
  font-family: "DM Sans", sans-serif;
  font-size: 1rem;
  outline: none;
  transition: border-color 0.3s ease;
}

.contact-us-section input:focus {
  width: 100%;
  padding: 15px;
  background-color: #140b2a;
  color: white;
  border: 2px solid rgba(254, 102, 1, 0.5);
  border-radius: 8px;
  font-family: "DM Sans", sans-serif;
  font-size: 1.2rem;
  outline: none;
  resize: vertical;
  transition: border-color 0.3s ease;
}

.contact-us-section input:focus,
.contact-us-section textarea:focus {
  border-width: 2px;
  border-color: #fe6601;
  box-shadow: 0 0 5px rgba(254, 102, 1, 0.8);
}

.contact-us-section form textarea {
  width: 100%; /* Ensure width is 100% */
  padding: 15px;
  min-height: 120px; /* Give it a decent height */
  color: white;
  font-size: 1.2rem;
  background-color: #140b2a;
  font-family: "DM Sans", sans-serif; /* Add font family */
  border-radius: 8px; /* Add border-radius */
  border: 2px solid rgba(254, 102, 1, 0.5);
  outline: none; /* Remove default outline */
  resize: vertical;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
  border-color: rgba(254, 102, 1, 0.5);
}

.contact-us-section {
  width: min(600px, 52%);

  padding: 0 20px;
}

@media (max-width: 768px) {
  .contact-us-section {
    width: 90%;
  }
}

.contact-us-section form {
  background-color: rgba(
    255,
    255,
    255,
    0.05
  ); /* Light transparent background */
  padding: 30px;
  border-radius: 10px;
  border-color: #fe6601;
}

.phone-number {
  text-align: center;
  margin-top: 20px;
}

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

/**! THIS IS FOR THE 3D CAROUSEL GENERAL STYLING **/
.whole-carousel {
  background-color: #140b2a; /* Black background like the original video */
  margin: 0;
  padding: 0;
  padding-top: 50px;
  padding-left: 0px;
  padding-right: 20px;
  overflow: hidden; /* Prevent scroll bars due to 3D movement */
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: vh;
  width: 75vw;
}

/* 1. SCENE SETUP - Manages the perspective for the entire 3D space */
.scene {
  /* Perspective is now on the scene wrapper */
  perspective: 1500px;
  position: relative;
  /* The scene wrapper acts as the main content block */
  /*  width: 600px; Needs to be wide enough to encompass the structure
  height: 500px; Needs to be tall enough for both carousel and reflection */
  width: clamp(300px, 45vw, 600px);
  height: clamp(150px, 27.5vw, 600px);
  margin: 0 auto; /* Center the scene horizontally */
  /* 👇 ADD THESE TWO LINES FOR SCALING 👇 */
  transform-origin: top center; /* Ensures it scales down from the center-top */
  /* Initially empty, will be set by JavaScript: */
  transform: scale(1);
}

/* 2. CAROUSEL CONTAINER - Sizing and centering the carousel structure */
.carousel-container {
  /* Calculated width for 10 items at 300px radius: 2*300*tan(18) ≈ 195px */
  width: 195px; /***!change this for gap between items**/
  height: 350px;
  position: absolute;
  left: 50%;
  transform: translateX(-50%); /* Center horizontally */
}

/* Positioning the top and reflection containers */
.carousel-container.top {
  top: 50px;
  z-index: 10;
}

.carousel-container.reflection {
  top: 400px; /* Position below the top carousel (350px height + 50px gap) */
  opacity: 0.6; /* Transparency for the reflection effect */
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
}

/* 3. CAROUSEL TRACK - The rotating cylinder */
.carousel-track {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  /* **NEW:** Apply the initial position/distance here */
  transform: translateZ(
    calc(-1 * var(--carousel-radius))
  ); /* Moves it back on the Z axis */

  /* Define the radius variable */
  --carousel-radius: 400px; /***! change for gap/radius**/
  animation: rotateCarousel 30s infinite linear;
}

/* Reflection track transform */
.carousel-container.reflection .carousel-track {
  transform: translateZ(calc(-1 * var(--carousel-radius))) rotateX(0deg);
  /* animation-direction: reverse; */
}

/* 4. CAROUSEL ITEM - The individual panels */
.carousel-item {
  position: absolute;
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 5px;
  cursor: pointer;

  /* Apply the 3D positioning */
  transform: rotateY(calc((var(--i) - 1) * 36deg))
    translateZ(var(--carousel-radius));
  transition: transform 0.5s ease-in-out;
}

/* Pseudo-element for Shading/Light Overlay */
.carousel-item::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  /* Lighting Gradient: center looks brighter/more reflective */
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.1) 0%,
    rgba(255, 255, 255, 0) 50%,
    rgba(255, 255, 255, 0.1) 100%
  );
  z-index: 1;
}

/* Nested Image Styling */
.carousel-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
  display: block;
}

/* 5. THE FLOOR/LIGHT EFFECT */
.floor {
  position: absolute;
  /*   **CRITICAL FIX: The floor should be positioned at the 'mirror plane'.**   The bottom of the top carousel is at 350px (height) + 50px (top offset) = 400px. 
  The floor is an infinite plane, so its vertical position should be 400px (or slightly less, e.g., 399px, to prevent Z-fighting with the carousel bottom edge).
  */
  top: 399px; /* Position it at the meeting point of the carousel and reflection */
  left: 50%;
  /* The X-rotation is correct to make it a flat plane */
  transform: translateX(-50%) rotateX(90deg);
}

/* 6. KEYFRAMES */
@keyframes rotateCarousel {
  from {
    /* ONLY apply the X-tilt and Y-rotation */
    transform: rotateX(-10deg) rotateY(0deg);
  }
  to {
    /* ONLY apply the X-tilt and Y-rotation */
    transform: rotateX(-10deg) rotateY(360deg);
  }
}

.carousel-container.reflection .carousel-item {
  transform: 
   /* 1. Apply the original cylindrical positioning */ rotateY(
      calc((var(--i) - 1) * 36deg)
        /***!change this depending on the number of items**/
    )
    translateZ(var(--carousel-radius))
    /* 2. Flip vertically for the reflection effect */ scaleY(-1)
    /* 3. Tilt flat to look like it's lying on the floor. */ rotateX(90deg);
  top: -181px;
  opacity: 0.6;
  --reflection-radius: 575px; /***! change for gap/radius**/
  transform: 
  /* 1. Apply the original cylindrical positioning (Rotation is key) */ rotateY(
      calc((var(--i) - 1) * 36deg)
    )
    /* 2. Push it out along the floor (this is the new "radius") */
    translateZ(var(--reflection-radius))
    /* 3. Flip vertically for the reflection effect */ scaleY(-1)
    /* 4. Tilt flat to look like it's lying on the floor. */ rotateX(90deg);
  cursor: default;
}
.carousel-container.reflection .carousel-item img {
  /* This compensates for the scaleY(-1) applied to the parent item, 
     making the image content display correctly. */
  transform: scaleY(-1);
}
.desktop-our-services {
  display: flex;
  flex-direction: column;
  align-content: center;
  justify-items: center;
  align-items: center;
  margin-top: 2em;
}
@media screen and (max-width: 800px) {
  .whole-carousel,
  .test-our-services {
    display: none; /* Hides the entire carousel */
  }
}
/* .whole-carousel:hover .carousel-track {
  animation-play-state: paused;
} */

/**!SERVICE PAGE**/

.service-page {
  width: min(1000px, 92%);
  padding: 40px;
  padding-top: 0px;
  margin-top: 0px;
  margin-left: auto;
  margin-right: auto;
}

.sp-main-heading-container {
  margin-top: 1em;
  margin-bottom: 2em;
}

.sp-heading-container .paint-heading-bg {
  margin: 0 auto; /* Tries to center the header block if it has a fixed width */
  text-align: center; /* Ensures content inside is centered */
  justify-content: center;
  display: flex;
  max-width: 80em;
}

.paint-heading-bg .sp-main-heading {
  text-align: center;

  padding-top: 20px;
  margin-bottom: 1em;
}

.sp-service-paragraph {
  text-align: center;
  padding-bottom: 40px;
  font-family: "DM Sans", sans-serif;
  font-weight: 400; /* Regular weight for easy reading */
  font-size: 1.125rem; /* Approx 18px (Excellent readability) */
  line-height: 1.6; /* Excellent spacing for long-form reading */
}

.sp-heading {
  padding: 5px 15px;
  margin-bottom: 20px;
  text-align: center;
}

.sp-page-left {
  display: flex; /* Use flex for text/image side-by-side */
  flex-direction: row; /* Default stack on mobile */
  justify-content: space-between;
  align-items: flex-start;
  padding-bottom: 2em;
}

.sp-text-column {
  /* Takes up the left side of the row */
  flex-basis: 45%;
  display: flex; /* Make sure content inside stacks vertically */
  flex-direction: column;
  align-items: flex-start;
}

.sp-heading-left {
  max-width: none;
  margin-top: 0;
  text-align: center;
  color: rgba(255, 255, 255, 0.856);
}

.sp-text-left {
  padding-top: 1em;
  max-width: none;
  width: 100%;
}
.sp-img-left {
  flex-basis: 50%; /* Image takes 50% of the container width */
  height: auto;
  height: 300px;
  width: 400px;
  min-height: 300px;
  object-fit: cover;
  background: cornflowerblue;
  border-radius: 0.2em;
  border: red solid 4px;
}

.sp-img-left img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

.sp-page-right {
  display: flex; /* Use flex for text/image side-by-side */
  flex-direction: row-reverse; /* Default stack on mobile */
  justify-content: space-between;
  align-items: flex-start;
  padding-bottom: 2em;
}

.sp-text-column {
  /* Takes up the left side of the row */
  flex-basis: 45%;
  display: flex; /* Make sure content inside stacks vertically */
  flex-direction: column;
  align-items: center;
}

.sp-heading-right {
  max-width: none;
  margin-top: 0;
  color: rgba(255, 255, 255, 0.856);
}

.sp-text-right {
  /* Remove any width/order constraints from previous attempts */
  padding-top: 1em;
  max-width: none;
  width: 100%;
}
.sp-img-right {
  flex-basis: 50%; /* Image takes 50% of the container width */
  height: 300px;
  width: 400px;
  min-height: 300px; /* Ensure a minimum size */
  object-fit: cover;
  background: cornflowerblue;
  border-radius: 0.2em;
  border: red solid 4px;
}

.sp-img-right img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

.sp-contact-btn-container {
  width: min(1000px, 92%);
  margin-left: auto;
  margin-right: auto;
  display: flex;
  justify-content: center;
  padding-bottom: 2em;
}

/* ======================================================= */
/* MOBILE LAYOUT (1 COLUMN) - Applies to screen width of 800px and below */
/* ======================================================= */
@media (max-width: 800px) {
  /* Target both left and right service sections */
  .sp-page-left,
  .sp-page-right {
    /* CRITICAL: Force elements to stack vertically */
    flex-direction: column;
    /* Ensure the text content is now above the image */
    gap: 20px;
    /* Reset alignment to left for readability on mobile */
    align-items: flex-start;
  }

  /* Force text and image columns to take up the full width */
  .sp-text-column {
    flex-basis: 100%;
    width: 100%;
    margin-bottom: 0; /* Clear previous desktop margin */
  }

  /* Ensure text aligns left on mobile for readability in both left/right blocks */
  .sp-text-column {
    align-items: center;
  }
  .sp-text-left,
  .sp-text-right {
    text-align: left;
  }

  /* Ensure the image is below the text block for both sections */
  .sp-page-left .sp-img-left {
    order: 2;
  }
  .sp-page-left .sp-text-column {
    order: 1;
  }

  .sp-page-right .sp-img-right {
    order: 2;
  }
  .sp-page-right .sp-text-column {
    order: 1;
  }

  /* Adjust image for better mobile viewing */
  .sp-img-left,
  .sp-img-right {
    min-height: 250px;
    max-width: 90%;
    margin: auto;
  }
}

/***!Gallery page**/

/***TODO NEED TO MAKE IMAGES POPUP CORRECTLY WHEN CLICKED ON**/
.gp-main-header {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1000;
  background-color: #140b2a;
}

.gp-heading-container {
  width: min(1000px, 92%);
  margin-left: auto;
  margin-right: auto;
  margin-top: 1em;
  margin-bottom: 1em;
  padding-top: 0px;
}

.gp-title {
  text-align: center;
}

.gp-heading-container .paint-heading-bg {
  margin: 0 auto; /* Tries to center the header block if it has a fixed width */
  text-align: center; /* Ensures content inside is centered */
  justify-content: center;
  display: flex;
  max-width: 15em;
}

.gp-filter-btns {
  align-content: center;
  justify-content: center;
  display: flex;
  flex-wrap: wrap;
  padding-left: 20%;
  padding-right: 20%;
  padding-bottom: 1em;
}

.filter-btns {
  background-color: transparent;
  color: rgb(254, 102, 1);

  /* Consolidated Layout and Text Properties */
  padding: 7px 14px; /* Use the larger padding for the dynamic effect */
  border: 2px solid rgb(254, 102, 1); /* Use the thicker border */
  margin: 10px;
  cursor: pointer;
  border-radius: 15px;
  font-family: "DM Sans", Arial, sans-serif;
  font-weight: 700; /* Use the bolder weight */
  font-size: 1.125rem; /* Use the larger font size */

  /* Required for the pseudo-element slide-in effect */
  position: relative;
  overflow: hidden;
  z-index: 1;
  transition: color 0.4s ease;
}

.filter-btns::before {
  content: "";
  background-color: rgb(254, 102, 1); /* The accent color slides in */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1; /* Puts the background behind the button text */
  transform: translateX(-100%); /* Hides the orange bar off to the left */
  transition: transform 0.4s ease-out;
}
.filter-btns:hover {
  color: rgb(20, 11, 42); /* Dark text on orange background */
}

.filter-btns:hover::before {
  transform: translateX(0);
}
.filter-btns.active {
  /* Locks the text color to Navy */
  color: rgb(20, 11, 42);
  /* The border-color remains the same as the slide-in color (orange) */
  border-color: rgb(254, 102, 1);
}

.filter-btns.active::before {
  /* CRITICAL FIX: Locks the orange background in place */
  transform: translateX(0);
}

@media (max-width: 768px) {
  .gp-filter-btns {
    /* 1. Stop wrapping! Items must stay on one line. */
    flex-wrap: nowrap;
    justify-content: flex-start;
    padding-left: 5%;
    padding-right: 5%;
    /* 2. CRITICAL: Allow the container to scroll horizontally */
    overflow-x: auto;
    /* 3. Hide the scrollbar (optional, but cleaner aesthetic) */
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
  }

  /* Hide the scrollbar for Webkit browsers (Chrome, Safari, etc.) */
  .gp-filter-btns::-webkit-scrollbar {
    display: none;
  }

  /* Prevent the buttons from shrinking below their content size */
  .filter-btns {
    flex-shrink: 0;
  }
}

/* ------------------------------------------- */
/* GALLERY ITEMS STYLING */
/* ------------------------------------------- */

.gp-gallery-wrapper {
  justify-content: center;
  width: min(1200px, 92%);
  padding: 40px;
  padding-top: 410px;
  margin-top: 0px;
  margin-left: auto;
  margin-right: auto;
}
@media (max-width: 800px) {
  .gp-gallery-wrapper {
    padding-top: 270px; /* Sets the top padding to 0 when screen is 800px or smaller */
  }
}

.gp-gallery-items {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-left: auto;
  margin-right: auto;
  gap: 20px;
  padding-top: 30px;
}

/* The container for each image, which is the filterable element */
.gallery-item {
  border-radius: 0.75rem;
  height: 250px;
  width: 300px;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  box-shadow: 0 8px 15px rgba(0, 0, 0, 0.4);
  transition: opacity 0.6s ease-in-out, transform 0.6s ease-in-out,
    margin 0.5s ease-in-out, width 0.5s ease-in-out, height 0.5s ease-in-out;

  /* Initial state for visible items (needed for the transition to work when they are hidden) */
  opacity: 1;
  transform: scale(1);
}

/* Styling for the actual image inside the container */
.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease;
}

/* Zoom effect on hover */
.gallery-item:hover img {
  transform: scale(1.05);
}

/* Class for hiding items */
.gallery-item.hidden {
  display: none;
  opacity: 0;
  height: 0;
  padding: 0;
  margin: 0;
  border: none;
  visibility: hidden;
  min-height: 0;
  min-width: 0;
}

/**!For large modal of gallery images**/

@media screen and (min-width: 800px) {
  .modal {
    /* Full-screen overlay */
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 2;
    padding-top: 0px;

    /* Centering the 80vw x 80vh content */
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .modal-content {
    /* Defines the fixed size for the image container */
    width: 50vw;
    height: 60vh;

    /* Set position relative for the 'X' button */
    position: relative;

    /* Use Flexbox here if you have text/captions/other elements to center with the image. 
       If only the image is inside, this is optional but good practice. */
    display: flex;
    align-items: center;
    justify-content: center;
  }

  #modalImage {
    /* Force the image to fill the 80vw x 80vh container */
    height: 100%;
    width: 100%;
    object-fit: cover;
    max-width: 100%;
    max-height: 100%;
  }

  .close {
    display: inline-block;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    cursor: pointer;
    z-index: 3;
    padding: 0;
    margin: 0;
    text-align: center;
    width: 40px;
    height: 40px;
    line-height: 35px; /* Must equal the height */
    position: absolute;
    top: 0px;
    right: 0px;

    /* Optional: Improve visibility/clickability */

    background: rgba(0, 0, 0, 0.7);

    border-radius: 5px;
  }
  /* Optional: Add a hover effect for better user feedback */
  .close:hover,
  .close:focus {
    color: #fff;
    opacity: 1;
    text-decoration: none;
  }
}

/**!About us page**/

.ap-main-section {
  justify-content: center;
  width: min(1000px, 92%);
  padding: 40px;
  padding-top: 0;
  margin-bottom: 0.5em;
  padding-bottom: 0.5em;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  margin-top: 1em;
}

.ap-sub-heading {
  margin-top: 40px;
  margin-top: 2em;
}

.ab-img-top-container {
  width: min(1000px, 92%);
  display: flex;
  height: 400px;
  margin-left: auto;
  margin-right: auto;
  padding-bottom: 1em;
  gap: 1em;
}

.ab-img-top {
  flex: 1 1 0;
  width: 100%;
  height: 100%;
  padding-bottom: 0;
  object-fit: cover;
  background: cornflowerblue;
  border-radius: 0.2em;
  border: red solid 4px;
}

.ap-we-understand-paragraph {
  margin-top: 2em;
}

.ap-engineered-paragraph {
  justify-content: center;
  width: min(1000px, 92%);
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}
.ap-carousel {
  margin: 20px auto;
  width: min(1000px, 82%);
  border: 5px /* solid red */;
  display: flex;
  overflow-x: auto;
  justify-items: center;
  border-radius: 1em;
}

.ap-carousel::-webkit-scrollbar {
  display: none;
}

.ap-carousel-card {
  height: 60px;
  width: 800px;
}
.ap-carousel-group {
  display: flex;
  justify-content: center;
  gap: 1em;
  animation: spin 30s infinite linear;
  padding-right: 1em;
}

.ap-carousel-card {
  flex: 0 0 20em; /* this is what you change for sizing */
  height: 6em; /* this is what you change for sizing */
  /* padding: 1em; */
  background: cornflowerblue;
  border-radius: 0.2em;
  align-content: center;
  border-radius: 1em;
  cursor: pointer;
}

.ap-carousel.group-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 1em;
}

/***!Images on about page**/

.ab-img-top-container {
  width: min(1000px, 92%); /* Note: Using 1000px and 92% as per previous goal */
  height: 400px;
  margin-left: auto;
  margin-right: auto;
  padding-bottom: 1em;
  display: flex;
  justify-content: space-between; /* Spacing between items */
  gap: 1em;
}

.ab-img-top {
  /* Each image takes 1/3 of the space */
  flex: 1 1 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: cornflowerblue;
  border-radius: 0.2em;
  border: red solid 4px;
}

.ab-img-top img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

/* Ensure the parent list uses flexbox or grid for layout */
.ap-list {
  list-style: none; /* Remove default bullets */
  padding: 0;
  /* Example: Display in a column or grid depending on desired layout */
  display: flex;
  flex-direction: column;
  gap: 20px; /* Space between items */
}

/* Style the new item class */
.ap-advantage {
  display: flex; /* Aligns icon and content side-by-side */
  align-items: flex-start; /* Aligns content to the top (important for multi-line text) */
  margin-bottom: 20px; /* Space below each item */
}

/* Style the icon wrapper to control icon size and spacing */
.ap-advantage .icon-svg-wrapper {
  flex-shrink: 0; /* Prevents the icon from shrinking */
  margin-right: 15px; /* Space between icon and text */
  /* You may need to adjust the width/height here if 'icon-small' isn't defined */
  width: 32px;
  height: 32px;
}

/* Ensure the SVG scales within the wrapper */
.ap-advantage .icon-svg-wrapper svg {
  display: block;
  color: #36f0839d;
}

/* Optional: Clean up the content section */
.ap-advantage .benefit-content h3 {
  margin-top: 0; /* Remove top margin from heading */
  margin-bottom: 5px; /* Space between title and paragraph */
}

/***!Mobile about page (ap) **/

@media (max-width: 768px) {
  .ab-img-top-container {
    width: 82%;
    flex-direction: column;
    height: auto;
    align-items: flex-start;
  }

  .ab-img-top {
    width: 100%;
    height: 100%;
    min-height: 200px;
    flex: 0 0 auto;
  }
}
.ap-list-heading {
  text-align: center;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
  color: #36f0839d;
}
.ap-list {
  text-align: left;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
  text-align: left;
}

.ap-list ul {
  margin: 0;
  padding: 0;
  text-align: left;
  list-style-position: outside;
  list-style-type: disc; /* Ensures standard bullet points */
  list-style-position: outside; /* Places the bullet outside the text block */
  text-align: left;
  padding-left: 2em;
}

.ap-list li {
  line-height: 2;
  padding-left: 2em;
  margin-bottom: 15px;
  text-align: left;
  font-family: "DM Sans", sans-serif;
  font-weight: 400; /* Regular weight for easy reading */
  font-size: 1.125rem; /* Approx 18px (Excellent readability) */
  margin-bottom: 20px;
}

.ap-promise-headline,
.ap-engineered-headline,
.ap-we-understand-headline {
  margin-top: 1em;
  margin-bottom: 1em;
}
.ap-main-section-p2 {
  justify-content: center;
  width: min(1000px, 92%);
  padding: 40px;
  padding-top: 0px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  margin-bottom: 3em;
}

.ap-engineered-headline {
  padding-top: 1em;
  padding-bottom: 1em;
}

.ap-promise-headline {
  padding-bottom: 1em;
}

.ap-contact-btn-btm {
  padding-top: 1em;
}