/* Simply Refurb v1.0.0 */

:root {
    --sr-teal: #00a69c;
    --sr-blue: #005ba0;
    --sr-dark: #08243a;
    --sr-darker: #071b2b;
    --sr-light: #f0f2f4;
    --sr-text: #333;
    --sr-white: #fff;
    --sr-gradient: linear-gradient(to bottom right, #052342, #0081ff6e);
    --sr-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    --sr-radius: 5px;

    --bs-primary: #005ba0;
    --bs-primary-rgb: 0, 91, 160;
    --bs-link-color: #005ba0;
    --bs-link-hover-color: #00a69c;
}

/* -- Base ------------------------------------------------------------ */

html {
    background: var(--sr-light);
    scroll-behavior: smooth;
}

body {
    font-family: var(--sr-font);
    font-size: 18px;
    line-height: 1.67;
    letter-spacing: 1px;
    color: var(--sr-text);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

.container {
    max-width: 1140px;
}

img {
    max-width: 100%;
    height: auto;
}

::placeholder {
    color: #777;
}

strong, b {
    font-weight: 700;
}

a {
    color: var(--sr-blue);
    transition: color 0.2s;
}

a:hover, a:focus {
    color: var(--sr-teal);
}

p {
    margin-bottom: 1rem;
    text-rendering: optimizeLegibility;
}

ul {
    margin-left: 0;
    padding-left: 1.25rem;
}

/* -- Headings -------------------------------------------------------- */

h1, h2, h3, h4, h5, h6 {
    font-weight: 700;
    letter-spacing: 2px;
    line-height: 1.2;
    color: var(--sr-text);
}

h1, .h1 { font-size: 3rem; }
h2, .h2 { font-size: 2.25rem; }
h3, .h3 { font-size: 1.75rem; }
h4, .h4 { font-size: 1.35rem; }

.text-white h1, .text-white h2, .text-white h3,
.text-white h4, .text-white h5, .text-white h6 {
    color: var(--sr-white);
}

/* -- Transitions guard ----------------------------------------------- */

.no-transitions,
.no-transitions *,
.no-transitions *::before,
.no-transitions *::after {
    transition: none !important;
}

/* -- Buttons --------------------------------------------------------- */

.btn-sr-teal {
    color: var(--sr-white);
    background-color: var(--sr-teal);
    border: 0;
    border-radius: var(--sr-radius);
    font-weight: 400;
    font-size: 20px;
    letter-spacing: 1px;
    padding: 25px 30px;
    text-transform: capitalize;
    text-decoration: none;
    cursor: pointer;
    transition: opacity 0.2s;
    display: inline-block;
}

.btn-sr-teal:hover, .btn-sr-teal:focus {
    opacity: 0.8;
    color: var(--sr-white);
}

.btn-sr-blue {
    color: var(--sr-white);
    background-color: var(--sr-blue);
    border: 0;
    border-radius: var(--sr-radius);
    font-weight: 400;
    font-size: 20px;
    letter-spacing: 1px;
    padding: 25px 30px;
    text-transform: capitalize;
    text-decoration: none;
    cursor: pointer;
    transition: opacity 0.2s;
    display: inline-block;
}

.btn-sr-blue:hover, .btn-sr-blue:focus {
    opacity: 0.8;
    color: var(--sr-white);
}

.btn-sr-estimate {
    color: var(--sr-white);
    background-color: var(--sr-teal);
    border: 0;
    border-radius: var(--sr-radius);
    font-size: 25px;
    font-weight: 400;
    width: 100%;
    display: inline-block;
    line-height: 50px;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: opacity 0.2s;
}

.btn-sr-estimate:hover, .btn-sr-estimate:focus {
    opacity: 0.8;
    color: var(--sr-white);
}

/* -- Site Header ----------------------------------------------------- */

.site-header {
    background: var(--sr-white);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
    position: relative;
    z-index: 1030;
}

.site-header .logo {
    max-width: 275px;
    height: auto;
}

.site-header .navbar {
    padding: 0;
}

.site-header .nav-link {
    color: var(--sr-white);
    font-size: 15px;
    font-weight: 300;
    letter-spacing: 1px;
    padding: 0 15px;
    line-height: 50px;
    height: 50px;
    transition: background-color 0.2s;
}

.site-header .nav-link:hover,
.site-header .nav-link:focus,
.site-header .nav-link.active {
    background-color: var(--sr-teal);
    color: var(--sr-white);
}

.header-top {
    padding: 1.5rem 0;
}

.header-bottom {
    background: var(--sr-blue);
}

.header-bottom .navbar-toggler {
    background-color: var(--sr-blue);
    border: 0;
    color: var(--sr-white);
    font-size: 30px;
    padding: 10px 0;
    width: 100%;
    line-height: 1;
}

.header-bottom .navbar-toggler:focus {
    box-shadow: none;
}

.header-bottom .navbar-collapse {
    justify-content: center;
}

.header-bottom .nav-item-quote .nav-link {
    background-color: #92b42b;
}

.header-bottom .nav-item-quote .nav-link:hover {
    background-color: #7fa025;
}

.header-bottom .dropdown-menu {
    background-color: var(--sr-teal);
    border: 0;
    border-radius: 0;
    padding: 0;
    min-width: 300px;
}

.header-bottom .dropdown-item {
    color: var(--sr-white);
    font-size: 15px;
    font-weight: 300;
    padding: 0px 15px;
    line-height: 40px;
}

.header-bottom .dropdown-item:hover,
.header-bottom .dropdown-item:focus {
    background-color: rgba(255, 255, 255, 0.1);
    color: var(--sr-white);
}

/* -- Bannery (Hero) -------------------------------------------------- */

.bannery {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    padding: 10rem 0;
    min-height: 350px;
    color: var(--sr-white);
    display: flex;
    align-items: center;
}

.bannery::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--sr-gradient);
    z-index: 1;
}

.bannery > .container {
    position: relative;
    z-index: 2;
}

.bannery h1 {
    color: var(--sr-white);
    font-size: 3rem;
    margin-bottom: 1rem;
}

.bannery p {
    color: var(--sr-white);
    font-size: 1.25rem;
}

.bannery .quick-quote {
    display: flex;
    gap: 0;
    max-width: 500px;
}

.bannery .quick-quote .form-control {
    border-radius: var(--sr-radius) 0 0 var(--sr-radius);
    border: 0;
    font-size: 18px;
    padding: 15px 20px;
    height: auto;
}

.bannery .quick-quote .btn-sr-teal {
    border-radius: 0 var(--sr-radius) var(--sr-radius) 0;
    padding: 15px 25px;
    font-size: 18px;
    white-space: nowrap;
}

/* -- Company Section ------------------------------------------------- */

.company-section {
    background: var(--sr-blue);
    padding: 5rem 0;
    color: var(--sr-white);
}

.company-section h2,
.company-section h3 {
    color: var(--sr-white);
    font-weight: 700;
}

.company-section h2 {
    font-size: 2.5rem;
    margin-bottom: 0.25rem;
}

.company-section h3 {
    font-size: 1.5rem;
    margin-bottom: 1.5rem;
}

.company-section p {
    color: rgba(255, 255, 255, 0.9);
}

.company-section a:not(.btn-sr-teal) {
    color: var(--sr-white);
    text-decoration: underline;
}

/* -- CTA Strip ------------------------------------------------------- */

.cta-strip {
    background: var(--sr-teal);
    padding: 1.5em 0;
    text-align: center;
}

.cta-strip h2,
.cta-strip p {
    color: var(--sr-white);
    font-size: 40px;
    font-weight: 100;
    font-style: italic;
    margin-bottom: 0;
    letter-spacing: 2px;
}

.cta-strip a {
    color: var(--sr-white);
    text-decoration: underline;
}

.cta-strip a:hover {
    color: var(--sr-white);
    opacity: 0.8;
}

/* -- Jumbo Image ----------------------------------------------------- */

.jumbo {
    overflow: hidden;
    line-height: 0;
}

.jumbo img {
    max-height: 600px;
    width: 100%;
    object-fit: cover;
}

/* -- Reviews --------------------------------------------------------- */

.reviews {
    background: var(--sr-teal);
    padding: 5rem 0;
}

.reviews h2 {
    color: var(--sr-white);
    text-align: center;
    margin-bottom: 2rem;
}

.reviews .review-card {
    background: var(--sr-white);
    border-radius: var(--sr-radius);
    padding: 2rem;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    text-align: center;
}

.reviews .review-card p {
    color: var(--sr-text);
    font-style: italic;
    margin-bottom: 1rem;
}

.reviews .review-card .reviewer {
    font-weight: 400;
    color: var(--sr-teal);
}

.reviews .review-stars {
    color: #ffc107;
    font-size: 1.25rem;
    margin-bottom: 0.75rem;
}

.reviews .carousel-control-prev,
.reviews .carousel-control-next {
    width: 5%;
    opacity: 0.8;
}

.reviews .carousel-indicators button {
    background-color: var(--sr-white);
}

/* -- Contact Section ------------------------------------------------- */

.contact-section {
    background: var(--sr-blue);
    padding: 5rem 0;
    color: var(--sr-white);
}

.contact-section h2 {
    color: var(--sr-white);
    margin-bottom: 1.5rem;
}

.contact-section p {
    color: rgba(255, 255, 255, 0.85);
}

.contact-section a {
    color: var(--sr-white);
    text-decoration: underline;
}

.contact-section a:hover {
    color: rgba(255, 255, 255, 0.8);
}

.contact-section .form-control {
    border: 0;
    border-radius: var(--sr-radius);
    padding: 12px 15px;
    font-size: 16px;
}

.contact-section .form-control:focus {
    box-shadow: 0 0 0 0.25rem rgba(0, 166, 156, 0.25);
}

.contact-section textarea.form-control {
    min-height: 120px;
}

/* -- Page Content ---------------------------------------------------- */

.page-content {
    padding: 5rem 0;
}

.page-content h2 {
    color: var(--sr-text);
    margin-bottom: 1.5rem;
}

.page-content img {
    border-radius: var(--sr-radius);
}

/* -- Service Pages --------------------------------------------------- */

.service-intro {
    padding: 4rem 0;
}

.service-intro p {
    font-size: 18px;
    line-height: 1.67;
}

.service-specifics {
    background: var(--sr-blue);
    padding: 5rem 0;
    color: var(--sr-white);
}

.service-specifics h2,
.service-specifics h3 {
    color: var(--sr-white);
}

.service-specifics p,
.service-specifics li {
    color: rgba(255, 255, 255, 0.9);
}

.service-specifics a {
    color: var(--sr-white);
    text-decoration: underline;
}

.service-specifics a:hover {
    opacity: 0.8;
}

.service-faqs {
    padding: 5rem 0;
}

.service-faqs h2 {
    margin-bottom: 2rem;
}

/* -- FAQ Styling ----------------------------------------------------- */

.faq-item {
    margin-bottom: 1.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid #e0e0e0;
}

.faq-item:last-child {
    border-bottom: 0;
    margin-bottom: 0;
    padding-bottom: 0;
}

.faq-question {
    font-weight: 900;
    font-size: 1.1rem;
    color: var(--sr-text);
    margin-bottom: 0.5rem;
}

.faq-answer {
    margin-left: 1.25rem;
    color: var(--sr-text);
}

/* -- Projects Gallery ------------------------------------------------ */

.projects-gallery {
    padding: 5rem 0;
}

.projects-gallery h2 {
    margin-bottom: 2rem;
}

.projects-gallery .gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 1rem;
}

.projects-gallery .gallery-thumb {
    overflow: hidden;
    border-radius: var(--sr-radius);
    aspect-ratio: 4/3;
}

.projects-gallery .gallery-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s;
}

.projects-gallery .gallery-thumb:hover img {
    transform: scale(1.05);
}

/* -- Archive Page ---------------------------------------------------- */

.archive-page {
    padding: 5rem 0;
}

.archive-page h1 {
    margin-bottom: 2rem;
}

.archive-page .area-links {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 0.75rem;
}

.archive-page .area-link {
    display: block;
    padding: 1rem 1.25rem;
    background: var(--sr-white);
    border-radius: var(--sr-radius);
    color: var(--sr-blue);
    text-decoration: none;
    font-size: 16px;
    transition: background 0.2s, color 0.2s;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.archive-page .area-link:hover {
    background: var(--sr-blue);
    color: var(--sr-white);
}

/* -- 404 Page -------------------------------------------------------- */

.error-404 {
    padding: 10rem 0;
    text-align: center;
}

.error-404 h1 {
    font-size: 4rem;
    color: var(--sr-blue);
    margin-bottom: 1rem;
}

.error-404 p {
    font-size: 1.25rem;
    margin-bottom: 2rem;
}

/* -- Footer ---------------------------------------------------------- */

.site-footer {
    background: var(--sr-dark);
    color: var(--sr-white);
    padding: 4rem 0 2rem;
}

.site-footer h5 {
    color: var(--sr-white);
    font-weight: 400;
    margin-bottom: 1rem;
    letter-spacing: 2px;
}

.site-footer p {
    color: #ccc;
    font-size: 15px;
}

.site-footer a {
    color: #e6e6e6;
    text-decoration: none;
    transition: color 0.2s;
}

.site-footer a:hover {
    color: var(--sr-teal);
}

.site-footer ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.site-footer ul li {
    margin-bottom: 0.4rem;
}

.site-footer ul li a {
    font-size: 15px;
}

.site-footer .footer-logo {
    max-width: 200px;
    margin-bottom: 1rem;
}

/* -- Footer Bottom Bar ----------------------------------------------- */

.footer-bottom {
    background: var(--sr-darker);
    padding: 1rem 0;
    text-align: center;
}

.footer-bottom p {
    color: #999;
    font-size: 12px;
    margin-bottom: 0;
    letter-spacing: 1px;
}

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

.footer-bottom a:hover {
    color: var(--sr-teal);
}

/* -- Responsive: Tablet (max-width: 991.98px) ----------------------- */

@media (max-width: 991.98px) {
    h1, .h1 { font-size: 2.25rem; }
    h2, .h2 { font-size: 1.75rem; }
    h3, .h3 { font-size: 1.5rem; }

    .bannery {
        padding: 6rem 0;
        min-height: 280px;
    }

    .bannery h1 {
        font-size: 2.25rem;
    }

    .cta-strip h2,
    .cta-strip p {
        font-size: 28px;
    }

    .page-content {
        padding: 3rem 0;
    }

    .company-section { padding: 3rem 0; }
    .service-intro { padding: 3rem 0; }
    .service-specifics { padding: 3rem 0; }
    .service-faqs { padding: 3rem 0; }
    .projects-gallery { padding: 3rem 0; }
    .archive-page { padding: 3rem 0; }
    .reviews { padding: 3rem 0; }
    .contact-section { padding: 3rem 0; }
    .site-footer { padding: 3rem 0 1.5rem; }

    .site-header .logo {
        max-width: 200px;
    }

    .header-bottom .navbar-nav {
        text-align: center;
    }

    .header-bottom .nav-link {
        padding: 10px 15px;
        line-height: 1.5;
        height: auto;
    }

    .header-bottom .dropdown-menu {
        text-align: center;
        min-width: 100%;
    }
}

/* -- Responsive: Mobile (max-width: 767.98px) ----------------------- */

@media (max-width: 767.98px) {
    body {
        font-size: 14px;
    }

    h1, .h1 { font-size: 1.75rem; }
    h2, .h2 { font-size: 1.5rem; }
    h3, .h3 { font-size: 1.25rem; }

    .bannery {
        padding: 4rem 0;
        min-height: 250px;
    }

    .bannery h1 {
        font-size: 1.75rem;
    }

    .bannery .quick-quote {
        flex-direction: column;
        max-width: 100%;
    }

    .bannery .quick-quote .form-control {
        border-radius: var(--sr-radius) var(--sr-radius) 0 0;
    }

    .bannery .quick-quote .btn-sr-teal {
        border-radius: 0 0 var(--sr-radius) var(--sr-radius);
        text-align: center;
    }

    .cta-strip h2,
    .cta-strip p {
        font-size: 22px;
    }

    .btn-sr-teal,
    .btn-sr-blue {
        width: 100%;
        text-align: center;
        margin: 10px 0;
        padding: 20px;
        font-size: 18px;
    }

    .error-404 {
        padding: 5rem 0;
    }

    .error-404 h1 {
        font-size: 3rem;
    }

    .jumbo img {
        max-height: 300px;
    }

    .projects-gallery .gallery-grid {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    }

    .archive-page .area-links {
        grid-template-columns: 1fr;
    }
}