{\rtf1\ansi\ansicpg1252\cocoartf2820
\cocoatextscaling0\cocoaplatform0{\fonttbl\f0\fswiss\fcharset0 Helvetica;}
{\colortbl;\red255\green255\blue255;}
{\*\expandedcolortbl;;}
\margl1440\margr1440\vieww11520\viewh8400\viewkind0
\pard\tx720\tx1440\tx2160\tx2880\tx3600\tx4320\tx5040\tx5760\tx6480\tx7200\tx7920\tx8640\pardirnatural\partightenfactor0

\f0\fs24 \cf0 * \{\
    margin: 0;\
    padding: 0;\
    box-sizing: border-box;\
\}\
\
body \{\
    font-family: Arial, sans-serif;\
    background-color: #f5f5f5;\
    color: #333;\
\}\
\
header \{\
    background-color: #0d47a1;\
    color: white;\
    padding: 20px 0;\
\}\
\
header nav \{\
    display: flex;\
    justify-content: space-between;\
    align-items: center;\
    max-width: 1200px;\
    margin: 0 auto;\
\}\
\
header nav .logo h1 \{\
    font-size: 40px;\
    font-weight: bold;\
    color: coral;
\}\
\
header nav ul.nav-links \{\
    list-style: none;\
    display: flex;\
\}\
\
header nav ul.nav-links li \{\
    margin: 0 15px;\
\}\
\
header nav ul.nav-links li a \{\
    color: white;\
    text-decoration: none;\
    font-size: 18px;\
    transition: color 0.3s;\
\}\
\
header nav ul.nav-links li a:hover \{\
    color: #ff6f61;\
\}\
\
.hero \{\
    background-color: #0d47a1;\
    color: white;\
    text-align: center;\
    padding: 10px 20px;\
\}\
\
.hero h2 \{\
    font-size: 50px;\
    margin-bottom: 2px;\
    text-align: center;\
    color: coral;\
\}\
\
.hero p \{\
    font-size: 18px;\
    margin-bottom: 30px;\
\}\
\
.cta-btn \{\
    padding: 10px 30px;\
    background-color: #ff6f61;\
    color: white;\
    border: none;\
    font-size: 16px;\
    cursor: pointer;\
    text-decoration: none;\
    border-radius: 5px;\
\}\
\
.cta-btn:hover \{\
    background-color: #e25c52;\
\}\
\
section \{\
    padding: 60px 20px;\
\}\
\
.container \{\
    max-width: 1200px;\
    margin: 0 auto;\
    padding: 0 20px;\
\}\
\
h2 \{\
    font-size: 32px;\
    margin-bottom: 20px;\
\}\
\
.service-item \{\
    background-color: white;\
    padding: 30px;\
    margin-bottom: 30px;\
    border-radius: 8px;\
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);\
\}\
\
.service-item h3 \{\
    font-size: 24px;\
    margin-bottom: 10px;\
\}\
\
.service-item p \{\
    font-size: 16px;\
    color: #555;\
\}\
\
.contact form \{\
    display: flex;\
    flex-direction: column;\
\}\
\
.contact .form-group \{\
    margin-bottom: 15px;\
\}\
\
.contact label \{\
    font-size: 16px;\
    margin-bottom: 5px;\
\}\
\
.contact input,\
.contact textarea \{\
    padding: 10px;\
    font-size: 16px;\
    border: 1px solid #ddd;\
    border-radius: 5px;\
    margin-top: 5px;\
\}\
\
.contact button \{\
    padding: 12px 30px;\
    background-color: #0d47a1;\
    color: white;\
    border: none;\
    font-size: 18px;\
    border-radius: 5px;\
    cursor: pointer;\
\}\
\
.contact button:hover \{\
    background-color: #013b6e;\
\}\
\
footer \{\
    background-color: #333;\
    color: white;\
    text-align: center;\
    padding: 15px 0;\
    font-size: 14px;\
\}\
}

/*-- -------------------------- -->
<---          Services          -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
    #services-502 {
        margin: var(--sectionPadding);
        margin-left: 0;
        margin-right: 0;
        padding: 0 1rem;
        /* prevents overflow from the slant shape */
        overflow: hidden;
        position: relative;
        z-index: 1;
    }
    #services-502:before {
        /* section background */
        content: "";
        width: 100%;
        height: 100%;
        background: var(--primary);
        opacity: 1;
        position: absolute;
        display: block;
        top: 0;
        left: 0;
        z-index: -1;
    }
    #services-502 .cs-container {
        width: 100%;
        max-width: 80rem;
        margin: auto;
        /* 60px - 80px top and bottom */
        padding: clamp(3.75em, 6.82vw, 5em) 0;
        /* maintains proportional margin top as screen size grows */
        margin-top: 56vw;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        /* 40px - 70px */
        gap: clamp(2.5rem, 5.7vw, 4.375rem);
        position: relative;
        /* places it on top of the cs-background */
        z-index: 10;
    }
    #services-502 .cs-container:before {
        /* section slant on mobile */
        content: "";
        width: 62.5rem;
        height: 125rem;
        background: var(--primary);
        opacity: 1;
        position: absolute;
        z-index: -1;
        display: block;
        top: -28.75rem;
        /* these last two center it horizontally and rotate -65deg */
        left: 50%;
        transform: translateX(-50%) rotate(-65deg);
    }
    #services-502 .cs-background {
        width: 100%;
        height: auto;
        aspect-ratio: 1;
        display: block;
        position: absolute;
        top: 0;
        left: 0;
    }
    #services-502 .cs-background img {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        object-fit: cover;
    }
    #services-502 .cs-content {
        width: 100%;
    }

    #services-502 .cs-topper {
        color: var(--bodyTextColorWhite);
    }
    #services-502 .cs-title {
        /* changes to 45% at tablet */
        width: 95%;
        max-width: 32.125rem;
        color: var(--bodyTextColorWhite);
    }
    #services-502 .cs-card-group {
        width: 100%;
        max-width: 35.25rem;
        padding: 0;
        margin: 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        /* 20px - 32px */
        gap: clamp(1.25rem, 3vw, 2rem);
    }
    #services-502 .cs-item {
        list-style: none;
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        /* 32px - 64px */
        gap: clamp(2rem, 5vw, 4rem);
    }
    #services-502 .cs-icon {
        width: 3.75rem;
        height: auto;
        display: block;
    }
    #services-502 .cs-h3 {
        /* 25px - 31px */
        font-size: clamp(1.5625rem, 3vw, 1.9375rem);
        line-height: 1.2em;
        font-weight: 700;
        text-transform: uppercase;
        margin: 0 0 1.25rem 0;
        color: var(--bodyTextColorWhite);
    }
    #services-502 .cs-item-text {
        /* 16px - 20px clamp(1rem, 1rem, 1.25rem)*/
        font-size: clamp(1.1rem, 1.1rem, 1.35rem);
        line-height: 1.5em;
        text-align: left;
        margin: 0;
        color: var(--bodyTextColorWhite);
    }
    #services-502 .cs-button-solid {
        font-size: 1rem;
        /* 46px - 56px */
        line-height: clamp(2.875rem, 5.5vw, 3.5rem);
        text-decoration: none;
        font-weight: 700;
        text-align: center;
        margin: 0;
        color: #000;
        min-width: 9.375rem;
        padding: 0 1.5rem;
        background-color: var(--secondary);
        border-radius: 0.25rem;
        display: inline-block;
        position: relative;
        z-index: 1;
        /* prevents padding from adding to the width */
        box-sizing: border-box;
    }
    #services-502 .cs-button-solid:before {
        content: "";
        position: absolute;
        height: 100%;
        width: 0%;
        background: #fff;
        opacity: 1;
        top: 0;
        left: 0;
        z-index: -1;
        border-radius: 0.25rem;
        transition: width 0.3s;
    }
    #services-502 .cs-button-solid:hover:before {
        width: 100%;
    }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
    #services-502:before {
        /* remove the pseudo for the section background */
        display: none;
    }
    #services-502 .cs-background {
        /* reset height to let top and bottom properties create the height */
        height: auto;
        aspect-ratio: initial;
        position: absolute;
        /* creates the gap between the image and the blue section */
        top: 3.75rem;
        bottom: 0;
    }
    #services-502 .cs-background img {
        width: 60%;
        left: auto;
        right: 0;
        object-position: 80% top;
    }
    #services-502 .cs-container {
        margin-top: 0;
    }
    #services-502 .cs-container:before {
        /* make really tall so it always covers top to bottom, even when you add more list items */
        height: 250rem;
        /* make really really wide so it covers the left side at large scree sizes */
        width: 250rem;
        /* push X amount from the center line to the right.  If after you added content and the slant is not covering everything, make this negative number even more negative to pull it more to the right */
        margin-right: -68.75rem;
        /* prevents the mouse from interacting with it */
        pointer-events: none;
        top: 50%;
        left: auto;
        /* pushes the right edge of the element to the center line of the parent */
        right: 50%;
        transform: rotate(-35deg) translateY(-50%);
    }
    #services-502 .cs-title {
        width: 45%;
    }
    #services-502 .cs-card-group {
        width: 52%;
        /* 24px - 32px */
        padding-left: clamp(1.5rem, 3vw, 2rem);
        /* prevents padding from adding to width */
        box-sizing: border-box;
    }
    #services-502 .cs-item {
        flex-direction: row;
    }
}


:root {
    /* Add these styles to your global stylesheet, which is used across all site pages. You only need to do this once. All elements in the library derive their variables and base styles from this central sheet, simplifying site-wide edits. For instance, if you want to modify how your h2's appear across the site, you just update it once in the global styles, and the changes apply everywhere. #ff6a3e;*/
    --primary: #1480ae;
    --primaryLight: #ffba43;
    --secondary: #ffba43;
    --secondaryLight: #ffba43;
    --headerColor: #1a1a1a;
    --bodyTextColor: #4e4b66;
    --bodyTextColorWhite: #fafbfc;
    /* 13px - 16px */
    --topperFontSize: clamp(0.8125rem, 1.6vw, 1rem);
    /* 31px - 49px */
    --headerFontSize: clamp(1.9375rem, 3.9vw, 3.0625rem);
    --bodyFontSize: 1rem;
    /* 60px - 100px top and bottom */
    --sectionPadding: clamp(3.75rem, 7.82vw, 6.25rem) 1rem;
}

body {
    margin: 0;
    padding: 0;
}

*, *:before, *:after {
    /* prevents padding from affecting height and width */
    box-sizing: border-box;
}
.cs-topper {
    font-size: var(--topperFontSize);
    line-height: 1.2em;
    text-transform: uppercase;
    text-align: inherit;
    letter-spacing: .1em;
    font-weight: 700;
    color: var(--primary);
    margin-bottom: 0.25rem;
    display: block;
}

.cs-title {
    font-size: var(--headerFontSize);
    font-weight: 900;
    line-height: 1.2em;
    text-align: inherit;
    max-width: 43.75rem;
    margin: 0 0 1rem 0;
    color: var(--headerColor);
    position: relative;
}

.cs-text {
    font-size: var(--bodyFontSize);
    line-height: 1.5em;
    text-align: inherit;
    width: 100%;
    max-width: 40.625rem;
    margin: 0;
    color: var(--bodyTextColor);
}