:root {
    --clr-primary: hsl(358, 71%, 44%);
    --clr-gray-light: hsl(220, 30%, 96%);
    --clr-gray-dark: hsl(0, 0%, 85%);
    --clr-gray: hsl(0, 0%, 29%);
    --clr-dark: hsl(345, 6%, 13%);
    --clr-light: hsl(0, 0%, 100%);
    --clr-light-translucent10: hsl(0, 0%, 100%, 0.1);
    --clr-dark-translucent10: hsl(345, 6%, 13%, 0.1);
    --grad-red: linear-gradient(180deg, var(--clr-primary), #302322);
    --grad-black: linear-gradient(180deg, var(--clr-dark), black);
    --fontsize-modifier: 0px;
    --text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.45);
    --round-xtiny: 4px;
    --round-tiny: 8px;
    --round-small: 10px;
    --round-big: 25px;
    --space-padblock: clamp(5vh, 8.5rem, calc(10vh + 1rem))
}

.hero {
    position: relative;
    color: var(--clr-light);
    display: grid;
    align-items: center;
    align-content: center
}

.hero .section-head,
.hero .section-body {
    z-index: 5;
    position: relative;
    text-align: center;
    text-shadow: var(--text-shadow)
}

@media(min-width: 1078px) {

    .hero .section-head,
    .hero .section-body {
        text-align: left
    }
}

.hero .section-body {
    margin-top: 1em
}

.hero .button {
    margin-inline: auto
}

@media(min-width: 1078px) {
    .hero .button {
        margin-left: 0
    }
}

.hero::before,
.hero::after {
    --angled-panel-width: 1000px;
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: var(--angled-panel-width);
    margin-inline: calc((var(--angled-panel-width) - 100vw)/2*-1)
}

@media(min-width: 800px) {

    .hero::before,
    .hero::after {
        margin-inline: unset;
        left: 0;
        width: unset;
        right: clamp(2.5rem, 5vw, 4rem)
    }
}

.hero::before {
    background: var(--clr-dark);
    opacity: .7;
    z-index: 2;
    clip-path: polygon(0 0, 82.5% 0, 40% 100%, 0 100%)
}

.hero::after {
    background: var(--grad-red);
    z-index: 1;
    clip-path: polygon(0 0, 27.5% 0, 100% 100%, 0 100%);
    right: 30vw
}

@media(min-width: 800px) {
    .hero::after {
        right: clamp(16rem, 40vw, 32rem)
    }
}

.hero.hero-short {
    padding-block: 2rem 4rem;
    max-width: 100%;
    overflow-x: hidden;
    min-height: 70dvh
}

@media(min-width: 1078px) {
    .hero.hero-short {
        padding-block: 4rem
    }

    .hero.hero-short .section-head,
    .hero.hero-short .section-body {
        margin-left: 0;
        max-width: 52%
    }

    .hero.hero-short .section-body {
        margin-left: 0;
        max-width: 48%
    }
}

@media(min-width: 1440px) {
    .hero.hero-short {
        padding-block: 6rem
    }

    .hero.hero-short .section-head,
    .hero.hero-short .section-body {
        margin-left: 0;
        max-width: 56.15%
    }

    .hero.hero-short .section-body {
        margin-left: 0;
        max-width: 52.5%
    }
}

.contact {
    border-radius: var(--round-small);
    background: var(--grad-black);
    padding: 3rem 1.25rem;
    color: var(--clr-light);
    z-index: 20;
    position: relative
}

@media(min-width: 1078px) {
    .contact {
        padding: 3rem 5rem
    }
}

.contact-bottom {
    display: flex;
    flex-direction: column;
    row-gap: 2rem;
    filter: drop-shadow(0px 23px 40px rgba(56, 0, 0, 0.25))
}

.contact-bottom .section-head {
    text-align: center
}

.contact-bottom .section-head .deck {
    color: var(--clr-gray);
    margin-block: 1em
}

@media(min-width: 1078px) {
    .contact-bottom .section-head {
        margin-right: 3rem;
        text-align: left
    }
}

.contact-bottom .section-body {
    border-radius: var(--round-small);
    background: var(--clr-dark);
    padding: 3rem 1.25rem;
    color: var(--clr-light);
    position: relative
}

.contact-bottom .section-body h3 {
    margin-bottom: 3rem;
    font-size: 1.325rem;
    text-align: center
}

@media(min-width: 1440px) {
    .contact-bottom .section-body h3 {
        font-size: 1.525rem
    }
}

.contact-bottom .section-body button {
    max-width: fit-content;
    margin-inline: auto;
    margin-top: 2rem;
    padding-inline: 2rem
}

@media(min-width: 1366px) {
    .contact-bottom .section-body button {
        padding-inline: 3rem;
        grid-column: 2/3;
        grid-row: 4/5;
        margin-right: 0;
        margin-top: 0;
        height: 4rem
    }
}

@media(min-width: 1078px) {
    .contact-bottom .section-body {
        padding: 4rem 5rem
    }
}

.contact-bottom .contact-links-wrapper {
    display: flex;
    flex-direction: column;
    row-gap: 2rem
}

@media(min-width: 1078px) {
    .contact-bottom .contact-links-wrapper {
        margin-top: 2rem
    }
}

.contact-bottom .contact-link {
    display: flex;
    flex-direction: column;
    gap: 1em;
    align-items: center
}

.contact-bottom .contact-link .contact-link-icon-disc {
    border-radius: 100%;
    background: var(--clr-primary);
    aspect-ratio: 1;
    width: 3.125rem;
    display: grid;
    place-items: center;
    border: 2px solid var(--clr-primary);
    transition: background 300ms ease
}

.contact-bottom .contact-link .contact-link-icon-disc svg {
    transition: transform 300ms ease;
    width: 1.85rem;
    height: auto
}

@media(min-width: 1078px) {
    .contact-bottom .contact-link .contact-link-icon-disc {
        width: 4rem
    }
}

.contact-bottom .contact-link .link-text {
    font-weight: 600;
    transition: color 300ms ease
}

.contact-bottom .contact-link .link-text.multiline {
    line-height: 2
}

@media(min-width: 1078px) {
    .contact-bottom .contact-link.workhours {
        align-items: flex-start
    }

    .contact-bottom .contact-link.workhours .link-text {
        text-align: left
    }
}

.contact-bottom .contact-link:hover,
.contact-bottom .contact-link:focus-visible {
    color: var(--clr-primary)
}

.contact-bottom .contact-link:hover .contact-link-icon-disc,
.contact-bottom .contact-link:focus-visible .contact-link-icon-disc {
    background: rgba(0, 0, 0, 0)
}

.contact-bottom .contact-link:hover .contact-link-icon-disc svg,
.contact-bottom .contact-link:focus-visible .contact-link-icon-disc svg {
    transform: scale(1.25)
}

.contact-bottom .contact-link:hover .contact-link-icon-disc svg path,
.contact-bottom .contact-link:focus-visible .contact-link-icon-disc svg path {
    fill: var(--clr-primary)
}

@media(min-width: 800px) {
    .contact-bottom .contact-link {
        flex-direction: row
    }
}

@media(min-width: 1366px) {
    .contact-bottom form {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr 1fr auto auto;
        gap: 1.5rem
    }
}

@media(min-width: 1366px) {
    .contact-bottom .form-fields {
        display: grid;
        grid-column: 1/-1;
        grid-row: 1/-1;
        grid-template-columns: subgrid;
        grid-template-rows: subgrid
    }
}

.contact-bottom .form-fields .field-element:nth-child(1) {
    grid-column: 1/2;
    grid-row: 1/2
}

.contact-bottom .form-fields .field-element:nth-child(2) {
    grid-column: 2/3;
    grid-row: 1/2
}

.contact-bottom .form-fields .field-element:nth-child(3) {
    grid-column: 1/2;
    grid-row: 2/3
}

.contact-bottom .form-fields .field-element:nth-child(4) {
    grid-column: 2/3;
    grid-row: 2/3
}

.contact-bottom .form-fields .field-element:nth-child(5) {
    grid-column: 1/3;
    grid-row: 3/4
}

@media(min-width: 1078px) {
    .contact-bottom {
        display: grid;
        grid-template-columns: 1fr 1fr;
        row-gap: unset
    }
}

.service-slider .service-swiper,
.service-slider .servicepage-swiper {
    width: 100%;
    overflow: visible;
    padding-right: 20px
}

.service-slider .swiper-wrapper a {
    position: relative;
    overflow: hidden;
    border-radius: var(--round-small)
}

.service-slider .swiper-wrapper a::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--grad-black);
    opacity: .4;
    z-index: 2
}

.service-slider .swiper-wrapper a::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--grad-red);
    opacity: 0;
    z-index: 3;
    transition: opacity 500ms ease
}

.service-slider .swiper-wrapper a:hover::after,
.service-slider .swiper-wrapper a:focus-visible::after {
    opacity: .5
}

.service-slider .swiper-wrapper .service-card-text {
    position: absolute;
    z-index: 5;
    inset: auto auto 1rem 1rem;
    width: 80%;
    color: var(--clr-light)
}

@media(min-width: 1078px) {
    .service-slider .swiper-wrapper .service-card-text {
        inset: auto auto 1.5rem 1.5rem;
        width: 60%
    }
}

.service-slider .swiper-wrapper img {
    position: relative;
    z-index: 1
}

@media(min-width: 1078px) {
    .service-slider .swiper-wrapper img {
        width: 100%
    }
}

.service-slider .scrollbar-wrapper {
    margin-top: 2rem;
    height: .25rem;
    width: calc(100% - 20px);
    position: relative
}

@media(min-width: 1078px) {
    .service-slider .scrollbar-wrapper {
        width: 100%;
        margin-top: 3rem
    }
}

.service-slider .swiper-scrollbar {
    left: 0 !important;
    right: 0 !important;
    background: var(--clr-light-translucent10);
    height: 2px !important
}

.service-slider .swiper-scrollbar .swiper-scrollbar-drag {
    background: var(--clr-primary);
    height: 4px !important
}

.service-slider .section-body {
    overflow-x: hidden
}

#service-slider-global {
    padding-inline: 0
}

#service-slider-global .section-head {
    padding-inline: max(clamp(1.5rem, 5vw, 2rem), (100% - 1440px)/2);
    text-align: center
}

#service-slider-global .section-head .deck {
    margin-top: 1em
}

#service-slider-global .section-head .button {
    display: none
}

#service-slider-global .section-body {
    margin-block: 2rem;
    padding-inline: max(clamp(1.5rem, 5vw, 2rem), (100% - 1440px)/2)
}

@media(min-width: 1078px) {
    #service-slider-global .section-body {
        width: 100%;
        margin-block: 4rem
    }
}

.faq-wrapper {
    position: relative;
    display: flex;
    flex-direction: column;
    counter-reset: css-counter 0
}

.faq-wrapper .faq-unit {
    color: var(--clr-dark);
    display: grid;
    transition: grid-template-rows 450ms ease-out;
    border-top: 1px solid var(--clr-dark-translucent10);
    border-bottom: 1px solid var(--clr-dark-translucent10);
    padding: 2rem 0
}

.faq-wrapper .faq-unit:hover .faq-answer .faq-answer-text,
.faq-wrapper .faq-unit:focus-visible .faq-answer .faq-answer-text {
    opacity: 1
}

.faq-wrapper .faq-unit:hover .faq-question-icon,
.faq-wrapper .faq-unit:focus-visible .faq-question-icon {
    opacity: 1
}

.faq-wrapper .faq-unit[expanded=true] {
    grid-template-rows: auto 1fr
}

.faq-wrapper .faq-unit[expanded=true] .faq-question-icon::before {
    rotate: 0deg
}

.faq-wrapper .faq-unit[expanded=true] .faq-question-icon::after {
    rotate: 0deg
}

.faq-wrapper .faq-unit[expanded=false] {
    grid-template-rows: auto 0fr
}

.faq-wrapper .faq-unit[expanded=false] .faq-question-icon::before {
    transform: rotate(-90deg)
}

.faq-wrapper .faq-unit[expanded=false] .faq-question-icon::after {
    transform: rotate(-180deg)
}

.faq-wrapper .faq-question {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    column-gap: 1rem;
    padding: 1.5rem
}

.faq-wrapper .faq-question-text {
    counter-increment: css-counter 1
}

.faq-wrapper .faq-question-text::before {
    content: counter(css-counter) ". "
}

.faq-wrapper .faq-question-icon {
    height: 2rem;
    aspect-ratio: 1;
    position: relative;
    background: var(--grad-red);
    border-radius: 100%;
    cursor: pointer;
    transition: background 200ms ease, scale 180ms ease
}

.faq-wrapper .faq-question-icon::before,
.faq-wrapper .faq-question-icon::after {
    content: "";
    height: 3px;
    width: 1rem;
    border-radius: 100vw;
    background: var(--clr-light);
    position: absolute;
    inset: 0;
    margin: auto;
    transition: rotate 650ms ease
}

@media(min-width: 1078px) {
    .faq-wrapper .faq-question-icon {
        height: 2.85rem
    }
}

.faq-wrapper .faq-question-icon:hover,
.faq-wrapper .faq-question-icon:focus-visible {
    animation: solidify 500ms forwards
}

.faq-wrapper .faq-answer {
    overflow: hidden;
    padding-left: 1rem
}

.faq-wrapper .faq-answer-text {
    transition: opacity 450 ease;
    padding: .25rem 1.5rem 1.5rem 1.5rem
}

.callout {
    color: var(--clr-light);
    background: var(--grad-black)
}

.callout .section-head {
    text-align: center
}

@media(min-width: 1078px) {
    .callout .section-head {
        text-align: left
    }
}

.callout .button {
    margin-top: 2.5em;
    margin-inline: auto;
    width: max-content;
    padding-inline: 3rem
}

@media(min-width: 1078px) {
    .callout .button {
        margin-block: unset;
        margin-right: 0
    }
}

.callout .section-body {
    margin-block: 2rem
}

@media(min-width: 1078px) {
    .callout {
        display: grid;
        grid-template-columns: 2fr 1fr;
        align-items: center
    }

    .callout .section-body {
        width: 100%;
        margin-block: 0
    }
}

.callout .deck {
    color: inherit
}

#hero-blogpage {
    min-height: 100dvh;
    padding-block: 2rem 4rem;
    max-width: 100%;
    overflow-x: hidden;
    background: url(../img/pest-control-fairfield-01.webp) no-repeat, url(../img/pest-control-fairfield-01.webp) no-repeat;
    background-position-x: right;
    background-size: auto 100%
}

@media(min-width: 1078px) {
    #hero-blogpage {
        min-height: calc(100dvh - 152px);
        padding-block: unset;
        max-width: unset
    }

    #hero-blogpage .section-head,
    #hero-blogpage .section-body {
        margin-right: 26rem
    }
}

@media(min-width: 1440px) {

    #hero-blogpage .section-head,
    #hero-blogpage .section-body {
        margin-right: 35rem
    }
}

#hero-blogpage .button {
    max-width: fit-content
}

 .blog-section {
  width: 100%;
}

/* Each row */
.blog-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 30px 50px;
  gap: 30px;
}
.blog-row:first-child {
  padding-top: 0;
}
.blog-row:last-child {
  padding-bottom: 0;
}

/* Equal width for content + image */
.blog-content,
.blog-image {
  flex: 1;
  max-width: 50%;
}

/* Text block */
.blog-content {
  padding-right: 20px;
}
.blog-row:nth-child(even) {
  flex-direction: row-reverse;
}

.blog-row:nth-child(even) .blog-content {
  padding-right: 0;
  padding-left: 20px;
}

/* Heading & paragraph */
.blog-content h2 {
  margin-bottom: 15px;
  font-size: 24px;
  color: #003366;
}

.blog-content p {
  font-size: 16px;
  line-height: 1.6;
}

/* Image block */
.blog-image {
  width: 100%;
  height: 100%;
}

.blog-image img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* fills container */
  border-radius: 6px;
  display: block;
}


/* Responsive */
@media(max-width: 768px) {
    .blog-section{
        padding-bottom: 0 !important;
    }

    .blog-row {
    flex-direction: column-reverse !important;
    text-align: center;
    padding: 30px 5%;
    }
    .blog-content{
    padding-left: 0 !important;
    text-align: left;
    }
  .blog-content,
  .blog-image {
    max-width: 100%;
    padding: 0;
  }
  .blog-image {
    height: auto;
  }
  .blog-image img {
    height: auto;
  }
  
  
}