a {
  text-decoration: none;
}

a.my_button {
  background-color: #0073aa;
  padding: 5px 10px;
  border-radius: 5px;
  color: #fff;
}
.wp-block-details summary::after {
    content: "+";
  margin-left: 50px;
  color: #4169E1; /* Your marker color */
  font-size: 1.2em;
  transition: transform 0.3s ease;
}

.header_hero .wp-block-cover__inner-container {
  height: 85vh;
  display: flex;
  flex-direction: column;
}

.header_hero .wp-block-spacer {
  display: none;
}

.wp-block-cover__inner-container .header_div {
  margin: auto;
}

.wp-block-cover__inner-container h1 {
  font-size: 48px;
  letter-spacing: 3px;
  margin: auto;
}

:where(.wp-block-button.is-style-outline--3 .wp-block-button__link),
:where(.wp-block-button.is-style-outline--4 .wp-block-button__link),
:where(.wp-block-button.is-style-outline--5 .wp-block-button__link) {
  border-color: #4169e1 !important;
  border-color: #ec5252 !important;
  font-size: 20px !important;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-top: 1.2rem;
  transition: 0.5s;
}

.wp-block-button__link:hover {
  background-color: #ec5252 !important;

}

header .wp-block-cover {
  padding: 0 !important;
}

.header_top > div,
.header_top > div > div,
.header_top > div > div > div {
  width: 100%;
}

.header_logo {
  gap: 10px;
}

.nav_menu a {
  font-size: 18px;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-weight: 700;
  padding-bottom: 5px;
}

.nav_menu a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0%;
  height: 2px;
  background-color: currentColor; /* Or any custom color */
  transition: width 0.3s ease;
  background-color: #ec5252;
  
}

.nav_menu a:hover::after {
  width: 100%;
}

.wp-block-navigation__container .free_quote_nav {
  border: 2px solid #ec5252;
  padding-top: 0.667em;
  padding-right: 1.33em;
  padding-bottom: 0.667em;
  padding-left: 1.33em;
  border-radius: 5px;
}

.wp-block-navigation__container .free_quote_nav a:hover::after {
  width: 0;
}

/* HOME */
#home {
  margin-top: 100px;
}

#home .wp-block-media-text__content {
  line-height: 34px;
}

/* SERVICES */
#services {
  width: 70%;
  margin: 100px auto;
  /* background-color: #eee; */
  padding: 30px;
}

.services_heading {
  width: 100%;
}

#services h2 {
  letter-spacing: 2px;
}

#services h3 {
  font-size: 22px;
  letter-spacing: 1px;
  text-align: center;
}

#painting,
#drywall {
  gap:24px
}

#painting h4,
#drywall h4 {
  margin-bottom: 1rem;
  font-size: 22px;

}

.no_padding_right {
  padding-right: 0 !important;

}

/* ACCORDION */

#services .wp-block-group .wp-accordion {
  max-width: 800px;
  margin: 0 auto;
  font-family: sans-serif;
}
.wp-accordion details {
  border: 2px solid #ec5252;
  border-radius: 6px;
  margin-bottom: 20px;
  padding: 10px 15px;
  background: #f9f9f9;
  position: relative;
}
.wp-accordion summary {
  font-weight: 600;
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 28px;
}
.wp-accordion summary::marker {
  display: none;
}
.wp-accordion summary::after {
  content: "+";
  font-size: 24px;
  transition: 0.3s;
  color: #ec5252;
}
.wp-accordion details[open] summary::after {
  content: "–"; /* Unicode minus */
  font-size: 24px;
}
.wp-accordion p,
#commercial p {
  margin-top: 10px;
  font-size: 18px;
  line-height: 24px;
  letter-spacing: 1px;
}

#services .wp-block-group {
  width: 100%;
}

#services .wp-accordion {
  width: 100%;
}

/* COMMERCIAL */
#commercial {
  align-items: center;
  padding-left: 30px;
}

#commercial p {
  font-size: 20px;
}

#commercial h2 {
  text-align: center;
  width: 100%;
}

/* custom code */
 .commercial-drywall {
      background-color: #f9f9f9;
      padding: 4rem 1.5rem;
    }

    .container {
      max-width: 1100px;
      margin: 0 auto;
    }

    .intro h2,
    #about h2 {
      font-size: 2.5rem;
      margin-bottom: 0.5rem;
    }

    .intro .tagline {
      font-size: 1.25rem;
      color: #666;
      margin-bottom: 2rem;
    }

    .content-wrapper {
      display: flex;
      flex-wrap: wrap;
      gap: 2rem;
    }

    .highlight-box {
      background-color: #fceb07;
      padding: 2rem;
      border-left: 5px solid #ec5252;
      flex: 1 1 250px;
      max-width: 300px;
    }

    .highlight-box p {
      font-size: 1rem;
      margin: 0.5rem 0;
    }

    .highlight-box .small-note {
      font-size: 0.875rem;
      color: #555;
      margin-top: 1rem;
    }

    .highlight-box img {
      width: 150px;
      display: inline-block;
      margin-top: 2rem;
    }

    .details {
      flex: 2 1 400px;
    }

    .details p {
      margin-bottom: 2rem;
      color: #333;
    }

    .services {
      list-style: none;
      padding-left: 1rem;
    }

    .services ul {
      list-style: none;
      margin-top: 20px;
    }
    .services li {
      margin-bottom: 20px;
      font-size: 1.2rem;
    }

    .services li::before {
      content: "";
      margin-right: 0.8rem;
      
      color: #228B22;
      display: inline-block;
  width: 20px;
  height: 20px;
  background-image: url('checkmark.png');
  background-size: contain;
  background-repeat: no-repeat;
  
  vertical-align: middle;
    }

    /* carousel */
     @layer reset, base, layout, addon;

/* To learn more about the following features:
   - Scroll Buttons  
   - Scroll Markers  
   - Scroll-State Queries  
   - Scroll Initial Target  
   - Anchor Positioning  
   check out these excellent resources by Adam Argyle:
   - https://chrome.dev/carousel/
   - https://developer.chrome.com/blog/carousels-with-css/
*/

@layer addon {
  @supports (scroll-marker-group: after) and (inset-block-end: anchor(end)) {
    .section-wrapper {
      anchor-name: --carousel;

      /* Adjust the position of the carousel controls (buttons + markers) on small screens */
      --controls-margin-block: 64px; /* Vertical spacing from the scroller */
      --controls-margin-inline: 12px; /* Horizontal base spacing */

      --scroll-btn-gap: 12px;
      --scroll-btn-extra-offset: 0px;
      --scroll-btn-margin-inline: calc(var(--controls-margin-inline) + var(--scroll-btn-extra-offset));
      --scroll-btn-size: 40px;

      /* md-n-above */
      @media (width >= 768px) {
        /* Adjust the position of the carousel controls (buttons + markers) On medium and larger screens */
        --controls-margin-block: 84px; /* Vertical spacing from the scroller */
        --controls-margin-inline: 32px; /* Horizontal base spacing */

        --scroll-btn-gap: 78px;
        --scroll-btn-extra-offset: 53px;
      }
    }

    .cards {
      /* padding-block: 16px; */
      scroll-marker-group: after;
      scrollbar-width: none;

      &::before,
      &::after {
        content: '';
        display: block;
        inline-size: 50cqi;
      }

      &::scroll-marker-group {
        display: grid;
        grid-auto-flow: column;
        block-size: fit-content;
        inline-size: 60cqi;
        background-color: oklch(from var(--secondary) calc(l / 1.6) c calc(h - 2));
        justify-items: end;
        position-anchor: --carousel;
        position: absolute;
        inset-block-end: calc(anchor(end) + var(--controls-margin-block) + 16px);
        inset-inline-start: calc(anchor(start) + var(--controls-margin-inline));
        border-radius: 100px;
      }

      &::scroll-button(*) {
        block-size: var(--scroll-btn-size);
        border-radius: 100px;
        border-width: 0;
        cursor: pointer;
        display: inline grid;
        inline-size: var(--scroll-btn-size);
        inset-block-end: calc(anchor(end) + var(--controls-margin-block));
        line-height: 0;
        outline-color: var(--surface);
        outline-offset: 2px;
        place-items: center;
        position-anchor: --carousel;
        position: absolute;
        z-index: 10;
        user-select: none;
        -webkit-tap-highlight-color: transparent;
        -webkit-touch-callout: none;
        background-color: var(--surface);
      }

      /* 
       The buttons are intentionally styled without hover effects. 
      This aligns with the original design choice to reduce visual noise 
      and avoid drawing unnecessary attention away from card interactions.

      If you'd like to add a hover effect, uncomment the code below. 
      It uses relative color and transitions for a subtle lift on hover.
     */

      /* &::scroll-button(*) {
        background-color: oklch(from var(--surface) calc(l * 1.5) c h);
        transition-property: background-color, box-shadow;
        transition-duration: var(--duration);
        transition-timing-function: ease;
      }

      &::scroll-button(*):is(:not(:hover, :active)) {
        background-color: var(--surface);
        box-shadow: var(--elevation-shadow-02);
      } */

      &::scroll-button(*):disabled {
        cursor: not-allowed;
        background-color: color-mix(in srgb, var(--secondary) 80%, var(--surface) 20%);
      }

      &::scroll-button(inline-start) {
        content: var(--arrow-icon) / 'Scroll back';
        inset-inline-end: calc(
          anchor(end) + var(--scroll-btn-margin-inline) + var(--scroll-btn-size) + var(--scroll-btn-gap)
        );
        transform: scaleX(-1);
      }
      &::scroll-button(inline-end) {
        content: var(--arrow-icon) / 'Scroll forward';
        inset-inline-end: calc(anchor(end) + var(--scroll-btn-margin-inline));
      }
    }

    .btn-shape-deco {
      display: grid;
      position-anchor: --carousel;
      position: absolute;
      block-size: var(--scroll-btn-size);
      place-items: center;
      inline-size: calc(var(--scroll-btn-size) * 2 + var(--scroll-btn-gap));
      inset-block-end: calc(anchor(end) + var(--controls-margin-block));
      inset-inline-end: calc(anchor(end) + var(--scroll-btn-margin-inline));
      color: var(--surface);
      opacity: 0.8;
      /* md-n-below */
      @media (width < 768px) {
        display: none;
      }
    }

    .card {
      container-type: scroll-state;
      scroll-snap-align: center;
      scroll-snap-stop: always;

      &::scroll-marker {
        content: '';
        aspect-ratio: 1;
        cursor: pointer;
        text-decoration: none;
        width: 8px;
        height: 8px;
        border-radius: 100px;
        background-color: var(--primary);
      }

      &::scroll-marker:target-current {
        /* 
  Assigns anchor-name: --current to the currently active scroll marker.
  The .marker-bar uses position-anchor: --current to align relative to the active marker.
  As you scroll, the marker-bar transitions its inset-inline-start (left) to follow the active marker.
*/
        anchor-name: --current;
      }
    }

    .img-2 {
      /* Clear fallback transform */
      transform: unset;
      transition: transform var(--duration) ease-in;
      transition-delay: var(--img-translate-delay);
      @container scroll-state(snapped: inline) {
        transform: translateX(55px) translateY(10px) rotate(8deg);
      }
    }

    .marker-bar {
      /* Prevents expensive paint and layout invalidations outside the element */
      contain: layout paint;
      will-change: inset-inline-start;

      inline-size: calc(6cqi + 8px);
      block-size: 8px;
      display: block;
      background-color: var(--primary);
      position-anchor: --current;
      position: absolute;
      inset-block-end: anchor(end);
      inset-inline-start: calc(anchor(start) - 6cqi);
      border-radius: 100px;
      pointer-events: none;
      transition: inset-inline-start var(--duration);
    }

    .scroll-start {
      scroll-initial-target: nearest;
    }
  }
}

@layer reset {
  *,
  ::before,
  ::after {
    /* box-sizing: border-box; */
  }

  :where(:not(dialog)) {
    margin: 0;
  }

  :where(html) {
    -webkit-text-size-adjust: none;

    @media (prefers-reduced-motion: no-preference) {
      scroll-behavior: smooth;
    }
  }

  :where(body) {
    min-block-size: 100svb;
    -webkit-font-smoothing: antialiased;
  }
}

@layer base {
  html {
    --arrow-icon: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="%234428c2"><path d="M647-440H160v-80h487L423-744l57-56 320 320-320 320-57-56 224-224Z"/></svg>');
    --caption: 400 0.688rem/1rem system-ui, sans-serif;
    --headline: 600 2.812rem/3.25rem system-ui, sans-serif;
    --headline-small: 600 2rem / 2.5rem system-ui, sans-serif;
    --label: 600 1rem / 1.375rem system-ui, sans-serif;
    --title: 600 1.75rem/2.25rem system-ui, sans-serif;
    --title-small: 600 1.5rem/2rem system-ui, sans-serif;

    --surface: oklch(96% 0 236);
    --on-surface: oklch(0% 0 0);

    --primary: oklch(91% 0.18 99);
    --on-primary: oklch(0% 0 0);

    --secondary: oklch(43% 0.22 250);
    --on-secondary: oklch(100% 0 0);

    --surface-container: oklch(91% 0.03 64);
    --on-surface-container: oklch(0% 0 0);

    --shadow-02: 0px 1px 2px rgba(0, 0, 0, 0.14), 0px 0px 2px rgba(0, 0, 0, 0.12);
    --shadow-04: 0px 2px 4px rgba(0, 0, 0, 0.14), 0px 0px 2px rgba(0, 0, 0, 0.12);
  }
}

@layer layout {
  
  .my_section-wrapper {
    container-type: inline-size;
    margin: 200px auto;
    background-color: #444;
    color: var(--on-secondary);
    display: block;
    border-start-end-radius: 128px;
    overflow: clip;
    padding-block: 32px;
    padding-block-end: 128px;
    width: 100%;

    /* md-n-above */
    @media (width >= 768px) {
      padding-block-end: 60px;
    }
  }
  .header {
    padding-block: 32px;
    display: grid;
    place-items: center;
    padding-inline: 16px;
    /* md-n-above */
    @media (width >= 768px) {
      padding-block: 64px 64px 32px;
    }
  }
  .headline {
    text-align: center;
    text-wrap: pretty;
    font: var(--headline-small);

    /* md-n-above */
    @media (width >= 768px) {
      font: var(--headline);
    }
  }
  .cards {
    list-style: none;
    display: grid;
    grid-auto-flow: column;
    place-items: start;
    padding-block: 32px;
    padding-inline: 48px;
    gap: 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    /* motionOK */
    @media (prefers-reduced-motion: no-preference) {
      scroll-behavior: smooth;
    }
  }

  .card {
    --card-circle-bg: var(--on-secondary);
    background-color: var(--surface-container);
    color: var(--on-surface-container);
    border-radius: 1rem;
    overflow: clip;
    width: 300px;
    height: 350px;
    /* background-image: url(test_image.jpg); */
  }

  .card-even {
    --card-circle-bg: var(--secondary);
    background-color: var(--surface);
    color: var(--on-surface);
    width: 250px;
  }
  
  .card:nth-child(odd){
    
    background-image: url(test_image.jpg);

  }
  .card:nth-child(even){
    
    background-image: url(test_2_image.jpg);

  }


}


/* MEDIA-TEXT */
#commercial .media_text {
  width: 80%;
  margin-bottom: 100px;
  /* background-color: #eee; */
  padding: 50px;
}

#commercial .media_text > *:first-child {
  margin-right: 100px;
}

#commercial .wp-block-media-text__content p{
  line-height: 34px;
  /* width: 600px; */
}
.wp-block-media-text__media img {
  /* width: 400px; */
}

.wp-block-media-text > .wp-block-media-text__content {
  padding: 0;
}

/* PARTNER */
#commercial #partner_one {
  /* background-color: #000; */
  /* color: #eee; */
}

#commercial #partner_one,
#commercial #partner_two  {
  border-radius: 10px;
  /* border: 4px solid #ec5252; */
}


#commercial #partner_one :where(.wp-block-button.is-style-outline--5 .wp-block-button__link) {
  
  border-color: #ec5252 !important;
  font-size: 20px !important;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-top: 15px;
}

#commercial #partner_two {
  /* background-color: #000;
  color: #eee; */
}

#commercial #partner_two :where(.wp-block-button.is-style-outline--6 .wp-block-button__link) {
  
  border-color: #eee !important;
  font-size: 20px !important;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-top: 15px;
}

#partner_one p:first-child,
#partner_two p:first-child {
  font-weight: 700;
  margin-bottom: 1rem;
}

.ready {
  background-color: #53b2ed;
  color: #fff;
  padding: 40px;
  border-radius: 15px;
}

.ready p {
  letter-spacing: 1px;
}

.ready a {
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* ABOUT */
#about {
  margin-top: 100px;
}
#about .wp-block-media-text__content {
  margin-right: 20px;
}
#about p {
  font-size: 20px;
  letter-spacing: 1px;
  line-height: 26px;
  margin-bottom: 20px;
}

#about p:first-child {
  font-weight: 600;
}
#about p:last-child {
  font-style: italic;
}

#about .wp-block-media-text {
  margin: 20px auto;
  width: 80%;
}

/* Our process */
#process .process-section {
  max-width: 1000px;
  margin: 4rem auto;
  padding: 2rem;
  font-family: sans-serif;
}

.process-section h2 {
  text-align: center;
  font-size: 2rem;
  margin-bottom: 0.5rem;
}

.process-section .subtitle {
  text-align: center;
  font-size: 1.2rem;
  color: #666;
  margin-bottom: 2rem;
}

.timeline {
  display: flex;
  /* flex-direction: column; */
  flex-wrap: wrap;
  gap: 1.5rem 6.5rem;
  justify-content: center;
}

.step {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1rem;
  background: #f9f9f9;
  border-left: 4px solid #ec5252;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
  width: 300px;
}

.icon {
  font-size: 2rem;
  flex-shrink: 0;
}

.content h3 {
  margin: 0 0 0.3rem;
  font-size: 1.1rem;
  color: #333;
}

.content p {
  margin: 0;
  color: #555;
}

.footer-note {
  text-align: center;
  margin-top: 2rem;
  font-size: 1.2rem;
  font-weight: bold;
}

.footer-note span:nth-child(1) {
  color: #4169E1;
}
.footer-note span:nth-child(2) {
  color: #ec5252;
}
.footer-note span:nth-child(3) {
  color: #999;
}

/* QUOTE */
#quote {
  padding: 0 2rem 4rem;
  /* color: #fff; */
}

.quote_container {
  width: 90%;
  box-shadow: 0 0 4px #ddd;
  padding: 4rem;
  border-radius: 10px;
  /* background-color: #5d676e; */
}

.quote_container .ff-el-input--label label {
  font-weight: bold;
  letter-spacing: 1px;
}

.fluent_form_1 {
  padding-left: 1rem;
}

.fluentform_wrapper_1 {
  padding: 1rem;
  border: 2px solid #ec5252;
  border-radius: 5px;
}

#fluentform_1 .ff_submit_btn_wrapper .ff-btn {
  background-color: #ec5252;
  color: #ffffff;
}

/* FOOTER */
footer nav a,
.wp-block-group p,
 footer li a {
  font-size: 1.1rem;
  font-weight: 500;
  letter-spacing: 1px;
}

footer ul {
  list-style: none;
  text-align: center;
  /* margin-bottom: 1.1rem; */
  /* font-weight: 500; */
}

#footer_services li a {
  display: inline-block;
  margin-bottom: 8px;
}

/* RESPONSIVE STYLES */

.wp-block-navigation__responsive-container:not(.is-menu-open.is-menu-open) {
  /* background-color: #000 !important; */
  color: #000 !important;
}

.wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open {
  background-color: #000 !important;

}

.wp-block-navigation__responsive-container {
  /* width: 100vw !important; */
  padding-right: 30px !important;
}

@media screen and (max-width: 400px) {
  .step {
    width: 260px;
  }
}

@media screen and (max-width: 450px) {
  .wp-block-cover__inner-container h1 {
  font-size: 40px;
}

#services {
  width: 96%;
}

#commercial {
  padding: 10px;
}

#commercial .media_text > :first-child {
  margin: 0;
}

#commercial .wp-block-media-text__content p {
  line-height: 28px;
  width: 90%;
  font-size: 20px !important;
}

#commercial .media_text {
  width: 96%;
  padding: 50px 20px;
}

#quote {
  padding: 0 0 4rem;
}
.quote_container {
  padding: 2rem;
}

#commercial .wp-block-spacer {
  height: 0;
  display: none;
}
}