.heroImage {
    height: 90vh;
    background-image: url('/wp-content/uploads/2026/02/services.webp');
    background-attachment: fixed;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 0% -10%;
    position: relative;
}

.heroOverlayText {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-100%);
}

.heroOverlayText h1 {
    font-family: 'Axiforma';
    text-align: center;
    color: white;
    font-size: 3.1em;
    margin: 20px 0px;
    font-weight: 500;
    line-height: 90%;
}

.heroOverlayText p {
    font-family: 'Axiforma';
    font-size: 1.3em;
    color: white;
    margin: unset;
    text-align: center;
}

.heroRow {
    position: relative;
    height: 90vh;
}

.servicesRow {
    padding-top: 7vh;
    background-color: #162d3e;
}

.servicesRow>h2 {
    font-family: 'Axiforma';
    color: #ff8b00;
    text-align: center;
    font-size: 2.6em;
    position: relative;
    margin-bottom: 7vh;
    z-index: 2;
}

.servicesBlurbs {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    padding: 0 6%;
    justify-content: space-between;
}

.serviceBlurb {
    width: 45%;
    position: relative;
    cursor: pointer;
}

.serviceBlurbImg {
    position: relative;
}

.serviceBlurbOverlayText {
    position: absolute;
    top: 100%;
    left: 0;
    transform: translate(20px,-110%);
    width: 90%;
}

.serviceBlurbOverlayText h2 {
    color: white;
    font-family: 'Axiforma';
    font-size: 1.5em;
}

.serviceBlurbImg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 23px;
    display: block;
    filter: brightness(0.7);
}

.serviceBlurbImg {
    width: 100%;
    height: auto;
    aspect-ratio: 2/1.1;
    border: 2px solid #ff8b00;
    border-radius: 26px;
}

.serviceBlurb p {
    font-family: 'Axiforma';
    color: #ff8b00;
    font-size: 1.2em;
    padding: 0 2%;
    margin-bottom: 60px;
    font-weight: 500;
}

.servicesRow a {
    background-color: #ff8b00;
    color: white;
    font-family: 'Axiforma';
    font-style: italic;
    padding: 10px 30px;
    margin: 0 auto;
    display: flex;
    width: fit-content;
    border-radius: 25px;
    font-size: 1.3em;
}

.servicesModalBG {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 999;
    background-color: rgba(0,0,0,0.4);
    opacity: 0;
    transition: all 0.15s ease-in-out;
    pointer-events: none;
}

.servicesModal {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 60%;
    height: 100%;
    aspect-ratio: 0.9/0.9;
    background-color: white;
    transform: translate(-50%,-50%);
    border: 4px solid #ff8b00;
    border-radius: 6px;
    box-shadow: inset 7px 7px 5px rgba(0,0,0,0.3);
    max-height: 95%;
    transition: all 0.2s ease-in-out;
}

.modalTextInner ul {
    padding-left: 24px;
}

.servicesModalBG.openModal {
    opacity: 1;
    pointer-events: all;
}

.modalImg {
    width: 80%;
    height: 35%;
    margin: 40px auto;
    border-radius: 16px;
    border: 3px solid #ff8b00;
    margin-bottom: 25px;
}

.modalImg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 14px;
    filter: brightness(0.7);
}

.modalWave {
    position: absolute;
    top: 100%;
    left: 0;
    transform: translateY(-100%);
    width: 100%;
    height: 13%;
    background-image: url("data:image/svg+xml,%3Csvg id='Capa_1' data-name='Capa 1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1933.81 392.93'%3E%3Cpath d='M1407,5175.8c102.25,73.52,214.84,150.36,341,146.23,89-2.91,174.19-46.65,263-40.57,97.89,6.7,185.27,73.16,283.39,73.57,106.44.45,196.57-75.81,299-104.35,122.81-34.21,252.65,2.11,377.56,27.76s265.81,37.51,369.8-35.82v326.11H1407Z' transform='translate(-1406.98 -5175.8)' style='fill:%23162d3e'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 0% 0%;
}


.modalText h2 {
    font-family: 'Axiforma';
    color: #162d3e;
    margin: unset;
    font-size: 1.6em;
}

.modalText {
    padding: 0 10%;
    font-family: 'Axiforma';
}

.modalTextInner li {
    font-family: 'Axiforma';
    color: #ff8b00;
    font-size: 1em;
}

.modalClose {
    position: absolute;
    top: 0;
    left: 100%;
    transform: translate(-102%,2%);
    width: 35px;
    height: 35px;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='SVGRepo_bgCarrier' stroke-width='0'%3E%3C/g%3E%3Cg id='SVGRepo_tracerCarrier' stroke-linecap='round' stroke-linejoin='round'%3E%3C/g%3E%3Cg id='SVGRepo_iconCarrier'%3E%3Cpath d='M5.29289 5.29289C5.68342 4.90237 6.31658 4.90237 6.70711 5.29289L12 10.5858L17.2929 5.29289C17.6834 4.90237 18.3166 4.90237 18.7071 5.29289C19.0976 5.68342 19.0976 6.31658 18.7071 6.70711L13.4142 12L18.7071 17.2929C19.0976 17.6834 19.0976 18.3166 18.7071 18.7071C18.3166 19.0976 17.6834 19.0976 17.2929 18.7071L12 13.4142L6.70711 18.7071C6.31658 19.0976 5.68342 19.0976 5.29289 18.7071C4.90237 18.3166 4.90237 17.6834 5.29289 17.2929L10.5858 12L5.29289 6.70711C4.90237 6.31658 4.90237 5.68342 5.29289 5.29289Z' fill='%23162d3e'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    cursor: pointer;
}


@media only screen and (max-width:1600px){
    .serviceBlurb p {
    font-size: 0.9em;
}


.servicesModal {
    width: 70%;
}


.modalImg {
    margin: 30px auto;
}


.modalText h2 {
    font-size: 1.3em;
}

.modalTextInner li {
    font-family: 'Axiforma';
    color: #ff8b00;
    font-size: 0.9em;
}

}

@media only screen and (max-width:1080px){
    .servicesModal {
        width: 80%;
    }
    .modalImg {
        height: 30%;
    }
}

@media only screen and (max-width:1000px){
    .serviceBlurbOverlayText h2 {
    font-size: 1.2em;
}
.serviceBlurb p {
    font-size: 0.8em;
}


}


@media only screen and (max-width:800px){
    .servicesModal {
    width: 91%;
}
.modalText {
    font-size: 0.9em;
}

    .servicesBlurbs {
    flex-direction: column;
}
.serviceBlurb {
    width: 100%;
    position: relative;
}

.serviceBlurb p {
    margin-bottom: 40px;
}

.servicesRow>h2 {
    font-family: 'Axiforma';
    color: #ff8b00;
    text-align: center;
    font-size: 2.6em;
    position: relative;
    margin-bottom: 7vh;
    z-index: 2;
}
}


@media only screen and (max-width:600px){
.servicesModal {
    width: 91%;
    aspect-ratio: unset;
    height: 88%;
}
.heroOverlayText {
    width: 95%;
}
.modalImg {
    height: 27%;
}
.modalText h2 {
    font-size: 1em;
}
.modalTextInner {
    font-size: 0.9em;
}

.heroOverlayText h1 {
    font-size: 2em;
}


.heroOverlayText p {
    font-size: 1em;
}

.modalClose {
    width: 40px;
    height: 40px;
}
}

@media only screen and (max-width: 400px) {
    .modalImg {
        height: 20%;
    }
    .modalTextInner {
        font-size: 0.8em;
    }
}

@supports (-webkit-touch-callout:default){
    .heroImage {
    background-attachment: initial;
}
}

@media only screen and (max-width: 600px) and (max-height: 750px) {
    .modalText h2 {
        font-size: 1em;
    }
    .modalTextInner {
        font-size: 0.8em;
    }
}

@media only screen and (max-width: 600px) and (max-height: 700px) {
    .modalImg {
        height: 18%;
    }
    .modalTextInner {
        font-size: 0.7em;
    }
}