body {
    font-family: 'Poppins', sans-serif;
    margin: 0;
    padding: 0;
    width: 100%;
    overflow-x: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    flex-direction: column;
    font-size: 1.0rem;
}

:root {
    --primary-color: #091e39;
    --secondary-color: #d93c48;
    --secondary-color-accent: #a11b24;
    --border-accent-color: #003f8d;
    --button-color: #0066be;
    /* --button-color: #0c3457; */
    --card-color: #091e39;
    --background-color: #ffffff;
    --text-color: black;
    --link-hover: rgb(255, 239, 149);

}

/* Type Scale */
h1 {
    font-size: 2.25rem; /* 36px - major third ratio */
    line-height: 1.2;
    margin-bottom: 0.5rem;
    font-weight: 700;
}

h2 {
    font-size: 1.875rem; /* 30px - major third ratio */
    line-height: 1.3;
    margin-bottom: 0.5rem;
    font-weight: 600;
}

h3 {
    font-size: 1.5rem; /* 24px */
    line-height: 1.4;
    margin-bottom: 0.5rem;
    font-weight: 500;
}

p {
    font-size: 1rem; /* 16px */
    line-height: 1.6;
    margin-bottom: 1rem;
    font-weight: 400;
}

small {
    font-size: 0.875rem; /* 14px */
    font-weight: 200;
}

.container {
    width: 100%;
}

.content-wrapper {
    position: relative;
    width: 60%;
    margin: 0 auto;
    padding: 12px;
}

#horizontal-wrapper {
    display: flex;
    flex-direction: row;
    text-align: left;
}

#horizontal-wrapper div {
    margin: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
}

#horizontal-wrapper img {
    margin: 8px;
}

.gallery-wrapper {
    width: 100%;
    margin: 0 auto;
    padding: 4px;
}

.about-link {
    color: var(--secondary-color);
}

.about-link:hover {
    color:var(--link-hover);
}

.wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    flex-direction: column;
}

.vision-text-container {
    margin: 0 auto;
}

#vision {
    /* background-image: url(images/projects/shutter-fade-3.png); */
    background-image: url(images/projects/why-choose-us.webp);
    background-size: cover;
    background-position: center;
    color: white;  /* Makes the text visible over the background */
    position: relative;
    z-index: 1;
    overflow: hidden; /* Ensures child elements are clipped */ 
    height: 750px;
    /* width: 100%;  */
}

.vision-main::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: inherit;  /* Inherits the same background image */
    background-size: inherit;
    background-position: inherit;
    filter: blur(4px);  /* Apply blur to the background image */
    z-index: -1;
    opacity: 0.5;  /* Optional: Adjust opacity to make the blur more subtle */
}

  #call-now-btn {
    display: none; /* hidden by default */
    position: fixed;
    bottom: 48px;
    left: 20px;
    background-color: var(--button-color); /* green button */
    color: white;
    padding: 12px 12px;
    border-radius: 5px;
    text-decoration: none;
    font-size: 16px;
    z-index: 9999;
    opacity: 0.9;
    transition: opacity 0.3s ease, transform 0.3s ease;
  }

  #call-now-btn.show {
    display: none;
    transform: translateY(0);
  }

  #call-now-btn:hover {
    background-color: var(--secondary-color); /* darker green on hover */
    opacity: 1;
  }

#about-us {
    /* width: 100%; */
    background-image: url(images/projects/about-us.webp);
    background-size: cover;
    background-position: center;
    overflow: hidden;
    color: white; 
    position: relative;
    z-index: 1;
    overflow: hidden; 
    height: 800px;
    display: flex;
    justify-content: center; /* Horizontally center */
    align-items: center;     /* Vertically center */
    text-align: center; 
}

.testimonial {
    position: relative;
    background-color: var(--card-color);
    border: 2px solid var(--border-accent-color);
    color: white;
    border-radius: 10px;
    margin-bottom: 8px;
    padding: 4px;
}


#cta {
    width: 100%;
    color: white;
    display: flex;
    justify-content: center;
    /* background-image: url('images/projects/IMG_4396.JPEG'); */
    background-image: url('images/art/cta2.webp');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 0%;
    border-top: 5px solid #091e38;
    border-bottom: 5px solid #091e38; 
    /* padding: 15rem; */
    overflow: hidden;
    box-sizing: border-box;
}

.content {
    background: linear-gradient(to bottom right, #ff959cab, #4b0005ec);
    /* background-color: #dc394c; */
    border-radius: 5px;
    border: 2px solid var(--secondary-color-accent);
}

.phonenumber {
    word-wrap: break-word;
    word-break: break-all;
    color:var(--link-hover);
    font-weight: bold;
    text-align: center;
    font-size: 2.0rem;
}

#cta h1 {
    color: white;
}

.callnowbutton:hover {
    color: var(--link-hover);
    background-color: var(--secondary-color);
    border: 2px solid var(--secondary-color-accent);
}

#callnowbuttoncta:hover {
    background-color: white;
    color: black;
}

.callnowbutton {
    display: inline-block;
    background-color: var(--button-color);
    color: white;
    border-radius: 5px;
    padding: 24px;
    border: 2px solid var(--border-accent-color);
    text-decoration: none;
    width: 50%;
}

.content a {
    font-weight: bold;
}

.content h1 {
    color: var(--link-hover) !important;
}



.content h1:hover {
    color: var(--link-hover);
}


#cta a {
    margin: auto;
}

.team-image {
    max-width: 128px;
    border-radius: 10px;
    border: 2px solid var(--border-accent-color);
}

#team-link {
    color: white;
}

.team-member {
    background-color: var(--card-color);
    color: white;
    border-radius: 10px;
    padding: 4px;
    width: 100%;
    border: 2px solid #3c6996;
    margin: auto;
}

.testimonials {
    color: white;
}

.note {
    font-size: small;
}

.call-now {
    position: fixed;
    left: 12px;
    z-index: 1000;
    border-radius: 5px;
    /* padding: 4px; */
}

.spacer {
    margin-top: 24px;
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

#service-area-img {
    width: 75%;
    margin: auto;
    border-radius: 5px;
    border: 2px solid var(--border-accent-color);
}


@media (max-width: 850px) {
    #call-now-btn.show {
        display: block;
    }
    #service-area-img {
        width: 95%;
    }
    .navnumber {
        right: 16px !important;
        top: 20px;
    }
    #horizontal-wrapper {
        display: block;
        flex-direction: column;
        text-align: left;
    }
    .projects {
        margin-top: 0px !important;
        height: auto;
    }
    #hero-header {
        bottom: auto !important;
        top: 72px !important;
        left: 0px !important;
        font-size: 1.0rem !important;
        text-decoration: none !important;
        width: 45% !important;
        text-align: left;
    }
    #hero-call-now-button {
        display: none !important;
    }
    #call-now-button {
        display: block !important;
    }
    #hero-subtext {
        top: 48px !important;
    }
    .spacer {
        margin: 0;
    }
    .article-cover {
        max-width: 300px !important;
    }
    .articles {
        width: 100% !important;
    }
    .article {
        width: 100% !important;
    }

    .project-image {
        width: 100% !important;
        height: 250px !important;
    }
    .gallery-wrapper {
        padding: 4px;
    }
    .project-image-page {
        width: 100% !important;
        height: auto !important;
    }
    .call-now {
        position: relative;
        left: auto;
    }
    #house-painting {
        background-size: contain;
    }

    #pressure-washing {
        background-size: contain;
    }
    .logo {
       width: 300px !important; 
       margin: 0px !important;
       margin-top: 72px !important;
       margin-bottom: 72px !important;
    }

    #cta { 
       /* padding: 4px !important; */
       background-size: contain;
       background-image: none;
       background: linear-gradient(to bottom right, #ff5b66, #a11b24);

    }
    .content {
        background: none;
        border: none;
    }
    .nav-toggle {
        display: block !important; /* show hamburger */
    }
    .nav-links {
        display: none;
        flex-direction: column;
        width: 75%;
        margin: auto;

        background-color: #091e38;
        max-height: 0;
        opacity: 0;
    }     
    .nav-links.active {
        display: flex;
        opacity: 1;
        max-height: 600px;
    }       
    .nav-toggle.active .bar:nth-child(1) {
        transform: translateY(8px) rotate(45deg);
    }
    .nav-toggle.active .bar:nth-child(2) {
        opacity: 0;
    }
    .nav-toggle.active .bar:nth-child(3) {
        transform: translateY(-8px) rotate(-45deg);
    }
    .nav {
        position: relative !important;
        padding-left: 0 !important;
        justify-content: center;
    }
    .content-wrapper {
        width: auto !important;
        padding: 4px !important;
    }
    .team-member{
        width: auto !important;
        padding: 0px !important;
    }
    .service-container {
        width: 100% !important;
    }
    .service {
        padding: 1rem !important;
    }
    #logo-placeholder {
        margin-top: 0px !important;
    }
    #testimonials {
        height: auto !important;
    }
}

@media (max-width: 1200px) {
    #cta {
       padding-top: 48px;
       padding-bottom: 48px;
    }
    .content-wrapper {
        width: 75%;
        padding: 4px;
    }
}

/* * {
    border: 1px solid red;
}  */

.service {
    color: white;
    background-color: rgb(255, 255, 255);
    border: 2px solid #3c6894;
    border-radius: 10px;
    margin: auto;
    /* padding: 6rem; */
    margin-bottom: 12px;
}


#white-sub-text {
    color: white;
}

#view-more-button {
    display: inline-block;
    width: 250px;
}

#services {
    background-color: var(--card-color);
}

#hero-call-now-button {
    position: absolute;
    bottom: 12px;
    padding: 12px;
    font-weight: 600;
    right: 12px;
}

.service-list {
    display: flex;
}

#call-now-button {
    display: inline-block;
    width: 250px;
    padding: 12px;
    background-color: var(--button-color);
    margin: 32px;
    display: none;
}

#call-now-button:hover {
    border: 2px solid var(--secondary-color-accent);
    color: var(--link-hover);
    background-color: var(--secondary-color);
}

.team {
    color: black;
    margin-top: 12px;
}

#testimonial-header {
    background-color: #11355e;
    color: white;
}

#house-painting {
    position: relative;
    overflow: hidden;
    background-image: url(images/projects/house-painted-blur-2.webp);
    background-size: cover;
    background-position: 0%; 
}

#commercial-painting {
    position: relative;
    overflow: hidden;
    background-image: url(images/projects/commercial-painting.png);
    background-size: cover;
    background-position: 0%; 
}

#house-painting img {
    display: block;
    height: auto;
}

#pressure-washing {
    background-image: url(images/projects/pressure-washing.webp);
    background-size: cover;
    background-position: 0%;    
}

.service-container {
    background-color: #091e39b6; 
    border: 1px solid var(--border-accent-color);
    border-radius: 5px;
    /* padding: 2px; */
    /* width: 75%; */
    margin: auto;
    padding: 4px;
}

.services .service-text {
    color: white;
}

.service-text {
    color: white;
}

.sub-header {
    background-color: var(--secondary-color);
    color: white;
    border-radius: 15px;
    box-shadow: 2px 2px 2px rgba(87, 87, 87, 0.5);
    margin: auto;
    padding: 12px;
    width: 60%;

}

 .sub-sub-header {
    background-color: var(--primary-color);
    color: white;
    /* padding: 12px; */
    border-radius: 10px;
    box-shadow: 2px 2px 2px rgba(87, 87, 87, 0.5);
    padding: 4px;
    width: 265px;
    margin: auto;
    text-align: center;
}

.service-header {
    color: white;
    text-decoration: none;
}

/* .page-topic {
    position: absolute;
    left: -9999px;
    top: -9999px;    
} */


.footer {
    display: flex;
    background-color: var(--primary-color);
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: white;
    margin: 0 auto;
    width: 100%;
}

#testimonials {
    background-color: var(--primary-color);
    /* margin-top: 128px; */
    background-image: url(images/art/reviews.webp);
    background-repeat: no-repeat;
    background-size: cover;
    height: 1200px;
    /* clip-path: polygon(0 15%, 100% 0, 100% 85%, 0 100%); */
}

.reviewer {
    text-align: left;
    font-size: larger;
    font-weight: bold;
}

.rating {
    text-align: left;
}

.source {
    position: absolute;
    bottom: 4px;
    right: 4px;
    font-size: small;
}

.footer-links {
    display: flex;
    justify-content: center;
    gap: 4px;
    padding: 1rem;
}

.footer-links a:hover {
    color: var(--link-hover);
}


.copyright {
    color: #284461;
   flex: 1;
   margin: 0;
   text-align: center;
   margin-bottom: 12px;
}

.footer a {
    color: #dd394c;
    text-decoration: none;
}

.top-header {
    color: #dd394c;
    border-radius: 10px;
}

h1 {
    color: #d93b46;
}

a {
    color: white;
}

a:hover {
    color: var(--secondary-color);

}

.divider {
    border: none;
    height: 2px; /* Adjust thickness */
    background-color: #f3f3f3; /* Light gray color */
    margin: 12px 0; /* Adjust spacing */
}

.vision-header {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    background-color: white;
    background-size: cover; /* This makes the background image cover the entire div */
    background-position: center; /* This centers the image */
    background-repeat: no-repeat; /* This prevents the image from repeating */
    height: 400px; /* Set a height for the div to control how much space it occupies */
    clip-path: polygon(0 15%, 100% 0, 100% 85%, 0 100%);
  }

.google-biz {
    color: white;
}

.review {
    position: relative;
    display: block;
    font-style: italic;
    text-align: left;
}

.vision-main {
    height: 820px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    /* clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%); */
  }


#quality {
    background: linear-gradient(to bottom right, #dd394c, #b61c2e);
}

#beauty {
    background-color: white;
    clip-path: none;
}

#reliability {
    background-color: white;
}


#quality {
    background-color: white;
}

.text-blob img {
    position: relative;
}


.content-block {
    display: flex;
    justify-content: center;
}

#usp {
    /* background-color: #12355b; */
    border-top: 16px solid #091e38;
    background: linear-gradient(to bottom right, #2f6baa, #0c2642);

}

.text-blob img {
    max-width: 300px;
}

#hero-header {
    position: absolute;
    display: inline-block;
    bottom: 300px;
    width: 40%;
    left: 0px;
    color: white;
    border-radius: 5px;
    text-decoration: none;
    background-color: #dc394c; /* Optional: semi-transparent background for better readability */
    padding: 4px; /* Optional: adds spacing around the text */
    z-index: 1;
    text-align: center;
    animation: moveRight 3s ease-out forwards, fadeIn 1s ease-out forwards;
    box-shadow: 2px 2px 2px rgba(87, 87, 87, 0.247);
}

/* #hero-subtext {
    position: absolute;
    bottom: 0px;
    left: 0px;
    text-align: left;
    animation: moveRight 3s ease-out forwards, fadeIn 1s ease-out forwards;
    z-index: 1;
    font-weight: 400;
} */

#hero-subtext {
    position: absolute;
    bottom: 128px;
    left: 0px;
    text-align: left;
    animation: moveRight 3s ease-out forwards, fadeIn 1s ease-out forwards;
    z-index: 1;
    font-weight: 400;
}

#hero-subtext p {
    color: white;
    background-color: #091e39d0;
    padding: 4px;
    border-radius: 5px;
    font-size: 1.0rem;
    width: 50%;
}





@keyframes moveRight {
    0% {
        transform: translateX(0px); /* Start from its current position */
    }
    100% {
        transform: translateX(12px); /* Move 200px to the right */
    }
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

.projects {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
    margin-top: 0px;
    overflow: hidden;
}



.projects-page {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    align-items: flex-start; /* Ensures images align at the top */
    margin-bottom: 12px;
}

.project-image {
    width: 100%;
    border-radius: 2px;
    transition: transform 1.0s ease-in-out, opacity 1.0s ease-in-out;
    transform: scale(1);
    opacity: 1;
}

.project-image.zoom {
    transform: scale(1.2); /* Slightly zoomed-in */
}


.project-image-page {
    border-radius: 2%;
    width: 600px;
    height: 800px; 
    overflow: hidden;
    position: relative;
    border-radius: 2%;
}

.navnumber {
    position: absolute;
    right: 100px;
    color: white;
}

.navnumber:hover {
    color: var(--link-hover);
}

.nav {
    position: relative;
    top: 0;
    padding-left: 172px;
    display: flex;
    flex-wrap: wrap;
    justify-content: left;
    align-items: center; /* Aligns items vertically within the nav */
    position: fixed;
    background-color: #091e38;
    z-index: 2;
    width: 100%;
    height: auto;
}

.nav-toggle {
    display: none;
    background: none;
    border: none;
    color: white;
    font-size: 28px;
    margin-left: 15px;
    cursor: pointer;
    width: 100%;
    margin: auto;
    background-color: var(--button-color);
}

.nav-toggle:hover {
    color:rgb(255, 234, 117);
    background-color: var(--secondary-color);
}

.nav-links {
    transition: max-height 0.4s ease, opacity 0.4s ease;
    display: flex;
}

.nav-toggle .bar {
    width: 100%;
    background: white;
    transition: 0.4s ease;
}

.navbutton {
    color: white;
    background-color: var(--button-color);
    border: 2px solid var(--border-accent-color);
    padding: 0.4rem;
    border-radius: 5px;
    height: auto;
    line-height: 0.75;
    text-decoration: none;
}


.navbutton:hover {
    background-color: var(--secondary-color);
    border: 2px solid var(--secondary-color-accent);
    color: rgb(255, 239, 149);
}

.footer-links a {
    color: white;
}

.footerbutton {
    color: white;
    background-color: #12355c;
    border: 1px solid #336aa4;
    padding: 0.2rem;
    border-radius: 5px;
    align-items: center;
    justify-content: center;
    display: inline-flex;
}

.footerbutton:hover {
    background-color: var(--secondary-color);
    border: 1px solid var(--secondary-color-accent);
    color: rgb(255, 239, 149);
}

.nav a {
    margin: 4px;
    text-decoration: none;
}

#nav-placeholder {
    display: flex;
    justify-content: center;
    align-items: center;
}

#logo-placeholder {
    margin-top: 42px;
}

#cta-placeholder {
    width: 100%;
}

#footer-placeholder {
    width: 100%;
}


ul {
    list-style-type: none; /* Removes the bullets */
    padding-left: 0;       /* Optional: Removes the default left padding */
    margin-left: 0;
}

.logo {
    margin: 4px;
    width: 575px;
    margin-top: 48px;
}

@keyframes sweepIn {
    0% {
        transform: translateX(-300px);
    }
    100% {
        transform: translateX(0px);
    }
}

footer {
    background-color: #13345c;
}

.email {
    color:rgb(255, 234, 117);
    font-weight: bold;
    text-align: center;
    font-size: 2.0rem;
}

.article-view {
    text-align: left;
    justify-content: center;
    margin: auto;
}

.article-view h1 {
    text-align: center;
}

.articles {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin: 0 auto;
    width: 65%;
}

.article {
    width: 400px;
    height: auto;
    background-color: #091e38;
    background: linear-gradient(to bottom right, #2a70c5, #091e38);
    color: white;
    border: 2px solid var(--border-accent-color);
    justify-content: center;
    margin: 4px;
    border-radius: 5px;
    padding: 4px;
    position: relative;
}

.article h2 {
    text-decoration: none !important;
    margin-bottom: 12px !important;
}

.article-view h1 {
    margin-top: 48px;
    margin-bottom: 48px;
}

.article .navbutton {
    position: absolute;
    bottom: 4px;
    right: 4px;
    width: 50%;
    padding: 16px;
    text-decoration: underline;
}

.article-image {
    display: block;
    width: 300px;
    background-size: cover;
    overflow: hidden;
    justify-content: center;
    margin: auto;
    border: 2px solid #2a70c5;

}

.article-cover {
    display: block;
    max-width: 500px;
    background-size: cover;
    overflow: hidden;
    justify-content: center;
    margin: 0 auto;
    border-radius: 5px;
    border: 2px solid #2a70c5;
}

#article1 {

 background-size: cover;
 border-radius: 5px;
}

.article-view h2 {
    text-align: left;  /* Aligns text to the left */
    display: block;    /* Ensure block-level behavior if needed */
    padding: 4px; 
    width: auto;
}

.article-image {
    background-size: cover;
    border-radius: 5px;
}

.article-exerpt {
    margin-bottom: 24px;
}

.article-title {
    font-weight: bold;
    text-decoration: underline;
    color: white;
}

.up-arrow {
    position: fixed;
    bottom: 48px;
    right: 24px;
    background-color: var(--button-color);
    color: white;
    border: none;
    border-radius: 50%;
    width: 48px;
    height: 48px;
    display: none; /* Hidden by default */
    cursor: pointer;
    justify-content: center;
    align-items: center;
    display: flex;
    opacity: 0.9;
    transition: opacity 0.3s;
    z-index: 1000;
}

.up-arrow:hover {
    opacity: 1;
}

.up-arrow::before {
    content: '▲';
}