/* Import Fonts */
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Lato:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Anton&display=swap');

/* Brand Colors */
:root {
    --yellow: #f6cb18;
    --green: #9cb83d;
    --blue: #078ea8;
    --orange: #e46b26;
    --gray: #4c5469;
    --dark-green: #588020;
    --darkest-green: #3e5e12;
    --dark-blue: #0a1334;
    --light-green: #eefcde;
    --mid-green: #bed599;
    --white: #fdfbf7;
}

html, body {
    height: 100%;
    margin: 0;
    display: flex;
    flex-direction: column;
}

body {
    font-family: 'Lato', sans-serif;
    color: var(--gray);
    background-color: var(--white);
    min-height: 100vh;
    padding-top: 85px; /* Adjust if navbar height changes */
}

h1, h2, h3, h4, h5 {
    font-family: 'Anton', sans-serif;
    letter-spacing: 1px;
    color: var(--dark-blue);
}

h3 {
    font-size: 1.4rem;
}

.btn-warning {
    background-color: var(--yellow) !important;
    border: solid 2px;
    border-color: var(--white);
    color: var(--white) !important;
    transition: all 0.3s ease-in-out;
}

    .btn-warning:hover {
        border: solid 2px;
        border-color: var(--white);
        background-color: var(--orange) !important;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
        transform: translateY(-2px);
    }

/* Override Bootstrap Defaults with Brand Colors */
.btn-success {
    background-color: var(--dark-green) !important;
    border: solid 2px;
    border-color: var(--white);
    color: var(--white) !important;
    transition: all 0.3s ease-in-out;
}

    .btn-success:hover {
        border: solid 2px;
        border-color: var(--white);
        background-color: var(--darkest-green) !important;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
        transform: translateY(-2px);
    }

    .btn-success strong {
        text-transform: uppercase;
        font-weight: 800;
        transform: scale(1);
        animation: pulse 1.5s infinite;
    }

.btn-outline-success {
    border-color: var(--green) !important;
    color: var(--green) !important;
    transition: all 0.3s ease-in-out;
}

    .btn-outline-success:hover {
        background-color: var(--green) !important;
        color: var(--white) !important;
    }

.bg-success {
    background-color: var(--blue) !important;
    color: var(--white) !important;
}

.bg-light {
    background: linear-gradient( to top, var(--green), var(--white) 100% ) !important;
}

.hero.bg-light {
    background: linear-gradient( to top, var(--green) 0%, var(--green) 5%, var(--yellow) 40%, var(--white) 100%) !important;
}

/* Cards */
.card-title {
    color: var(--orange);
}

.card-text {
    color: var(--gray);
}

.card-wrapper {
    background-color: var(--white);
    transform: translateY(0);
    transition: all 0.3s ease-in-out;
}

    .card-wrapper:hover {
        transform: translateY(-5px);
    }

.nohover-card-wrapper {
    background-color: var(--white);
}

.online-card-wrapper {
    background-color: var(--white);
    min-height: 800px;
}


/* Footer */
footer {
    background-color: var(--dark-blue);
    color: var(--white);
    flex-shrink: 0;
    position: relative !important;
    margin-top: 20px !important;
    line-height: 1 !important;
}

/* Main content */
main.flex-grow-1 {
    flex: 1; /* allows main content to grow and push footer down */
}

/* Links */
a {
    color: var(--blue);
}

    a:hover {
        color: var(--orange);
    }


.cities a {
    color: var(--dark-blue);
    font-weight: 500;
    text-decoration: none;
    transition: color 0.3s;
}

.cities a:hover {
    color: var(--orange);
    text-decoration: underline;
}

.navbar-custom {
    background-color: var(--green);
    font-family: 'Lato', sans-serif; /* Ensure consistency */
}

    .navbar-custom .nav-link,
    .navbar-custom .no-hover-link,
    .navbar-custom .navbar-brand,
    .navbar-custom .btn {
        font-family: inherit; /* Inherit from .navbar-custom */
        color: #fff !important;
    }

    .navbar-custom .navbar-brand {
        font-weight: 700; /* Make the brand stand out */
    }

    .navbar-custom .btn {
        background-color: #fff;
        color: var(--green) !important;
        font-weight: bold;
        transition: all 0.3s ease-in-out;
    }

        .navbar-custom .btn:hover {
            transform: scale(103%);
            background-color: var(--light-green);
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }

.navbar-brand {
    font-size: 1.5rem;
    font-family: 'Lato', sans-serif !important;
}

.nav-link {
    color: #fff !important;
    font-weight: 600;
    transition: all 0.3s ease-in-out;
}

    .nav-link:hover {
        transform: translateY(-3px);
    }

.no-hover-link {
    transition: none !important;
}

    .no-hover-link:hover {
        transform: none !important;
    }

.image-gradient {
    position: relative;
    width: 100%;
    height: 100%;
}

    .image-gradient img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .image-gradient::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient( to right, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 30% );
    }

@media (max-width: 767.7px) {
    .image-gradient::after {
        background: linear-gradient( to bottom, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 30% );
    }
}

.blog-card {
    border: solid 2px var(--green);
}

.btn-blog, .btn-blog:focus {
    background-color: var(--green);
    color: var(--white) !important;
    border: solid 2px var(--white);
    transition: all 0.3s ease-in-out;
}

    .btn-blog:hover, btn-blog.active {
        background-color: var(--dark-green) !important;
        border: solid 2px var(--white);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
        transform: translateY(-2px);
    }

.description-box {
    background-color: var(--orange);
    border-radius: 0.5rem;
    width: 100%;
    box-sizing: border-box;
}

.blog-content img {
    max-width: 100%;
    height: auto;
    margin: 1.5rem 0;
    border-radius: 0.5rem;
}

/* Smaller headers inside post content */
.blog-content h1 {
    font-size: 2rem;
    margin-top: 2rem;
    margin-bottom: 1rem;
}

.blog-content h2 {
    font-size: 1.75rem;
    margin-top: 1.75rem;
    margin-bottom: 0.9rem;
}

.blog-content h3 {
    font-size: 1.5rem;
    margin-top: 1.5rem;
    margin-bottom: 0.75rem;
}

.blog-content h4, .blog-content h5, .blog-content h6 {
    font-size: 1.25rem;
    margin-top: 1.25rem;
    margin-bottom: 0.5rem;
}

.blog-content p {
    line-height: 1.6;
    margin-bottom: 1rem;
}

.blog-content blockquote {
    padding: 1rem 1.5rem;
    margin: 1.5rem 0;
    border-left: 4px solid var(--blue);
    background-color: #f1f3f5;
    border-radius: 0.25rem;
}

.blog-content pre {
    background-color: #e9ecef;
    padding: 1rem;
    border-radius: 0.25rem;
    overflow-x: auto;
}

.blog-content code {
    background-color: #dee2e6;
    padding: 0.2rem 0.4rem;
    border-radius: 0.25rem;
    font-family: monospace;
}

.blog-lead {
    font-size: 1.25rem;
    font-weight: 300;
    color: var(--white);
    margin-bottom: 1.5rem;
}

@media (max-width: 900px) {
    .hero .lead {
        display: none !important;
    }
}

.about-us-bg {
    background-color: var(--blue) !important;
}

.text-darkcolor {
        color: var(--dark-blue) !important;
}

/* FAQs */
.faq-section {
    background-color: var(--light-green);
    padding: 2rem 1rem;
    border-radius: 0.5rem;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    margin-bottom: 2rem;
}

/* FAQ Question Styling */
.faq-question {
    background-color: #f8f9fa;
    border: 1px solid #ddd;
    padding: 1rem;
    font-size: 1.1rem;
    font-weight: 600;
    transition: background-color 0.3s;
}

    .faq-question:focus {
        box-shadow: none;
        color: var(--dark-blue) !important;
    }

    .faq-question.collapsed {
        background-color: #f8f9fa;
        color: var(--gray) !important;
    }

    .faq-question:not(.collapsed) {
        background-color: var(--mid-green) !important;
        color: var(--gray) !important;
    }

    .faq-question:hover {
        background-color: var(--mid-green) !important;
        cursor: pointer;
    }

/* Accordion body smooth slide using Bootstrap collapse */
.accordion-collapse {
    overflow: hidden;
    transition: height 0.4s ease;
}

.faq-answer {
    padding: 1rem;
    margin: 0;
}

/* Dropdown menu styling */
.nav-item .dropdown-menu {
    border-radius: 0.5rem;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    padding: 0.5rem 0;
    min-width: 180px; /* optional: ensure consistent width */
}

/* Dropdown items styling */
.nav-item .dropdown-item {
    padding: 0.5rem 1rem;
    font-weight: 500;
    transition: background-color 0.2s, color 0.2s;
}

    .nav-item .dropdown-item:hover,
    .nav-item .dropdown-item:focus {
        background-color: #e9ecef;
        color: #000;
    }

    /* Optional: active item styling */
    .nav-item .dropdown-item.active {
        background-color: #d1d5db;
        color: #000;
    }

.navbar .dropdown-toggle::after {
    display: none;
}

@media (max-width: 991px) {
    .container.d-xxl-none .card-text {
        display: none !important;
    }
}

@media (max-width: 1399.98px) {
    .hero .btn-success {
        margin-bottom: 0px !important;
        margin-top: 10px !important;
    }

    .hero {
        padding-bottom: 25px !important;
    }
}

@media (max-width: 767px) {
    body, html {
        overflow-x: hidden;
    }
}

/* Hide all by default, then show based on breakpoints */
.call-book-full, .call-book-mid, .call-book-icons {
    display: none;
}

/* Full text 1248px */
@media (min-width: 1248px) {
    .call-book-full {
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }
}

/* Mid version 1120 - 1247px */
@media (min-width: 1120px) and (max-width: 1247.98px) {
    .call-book-mid {
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }
}

/* Icons only 992 - 1120px (or adjust to your hamburger breakpoint) */
@media (max-width: 1119.99px) and (min-width: 992px) {
    .call-book-icons {
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }
}

/* Existing hover for phone links and icons */
.call-book-full .phone:hover,
.call-book-mid .phone:hover,
.call-book-icons .phone:hover {
    color: var(--blue) !important;
}

/* Optional: prevent the button icon from changing */
.call-book-full .btn i,
.call-book-mid .btn i,
.call-book-icons .btn i {
    color: inherit; /* keeps it as default */
}

@keyframes fall {
    0% {
        transform: translateY(-10vh) rotate(0deg);
    }

    100% {
        transform: translateY(110vh) rotate(360deg);
    }
}

@keyframes snow {
    0% {
        transform: translateY(-10vh) rotate(0deg);
    }

    100% {
        transform: translateY(110vh) rotate(180deg);
    }
}

.falling-leaf,
.falling-snow {
    position: absolute;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    pointer-events: none;
}

.falling-leaf {
    animation-name: fall;
}

.falling-snow {
    animation-name: snow;
}

/* Hide animations on mobile */
@media (max-width: 767.98px) {
    .falling-leaf,
    .falling-snow {
        display: none !important;
    }
}

.firework-launch {
    position: absolute;
    bottom: 0;
    width: 4px;
    height: 40px;
    border-radius: 2px;
    animation: launch 0.8s ease-out forwards;
}

@keyframes launch {
    to {
        transform: translateY(-65vh);
        opacity: 0;
    }
}

.firework-particle {
    position: absolute;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    animation: explode 1.6s ease-out forwards;
}

@keyframes explode {
    to {
        transform: translate(var(--x), var(--y));
        opacity: 0;
    }
}

.floating-social-bottom {
    position: fixed;
    bottom: 20px;
    left: 20px;
    display: flex;
    flex-direction: row; /* default horizontal for lg/md */
    gap: 10px;
    z-index: 1050;
}

/* Stack vertically on small screens */
@media (max-width: 991.98px) { /* md and below */
    .floating-social-bottom {
        flex-direction: column;
        bottom: 15px;
        left: 15px;
        gap: 8px;
    }
}

/* Default button style */
.floating-social-bottom a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    color: white !important;
    font-size: 1rem;
    text-decoration: none;
    transition: transform 0.2s;
}

    /* Hover effect */
    .floating-social-bottom a:hover {
        transform: scale(1.1);
    }

/* Brand colors */
.facebook {
    background-color: #3b5998;
}

.instagram {
    background-color: #E1306C;
}

.linkedin {
    background-color: #0077b5;
}

.yelp {
    background-color: #d32323;
}

/* Smaller size on mobile */
@media (max-width: 575.98px) { /* xs screens */
    .floating-social-bottom a {
        width: 35px;
        height: 35px;
        font-size: 0.9rem;
    }
}

.before-after-slider {
    position: relative;
    overflow: hidden;
    height: 400px;
}

    .before-after-slider img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

.after-img {
    clip-path: inset(0 50% 0 0);
}

.slider-handle {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 6px;
    background: var(--white);
    cursor: ew-resize;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translateX(-50%);
}

.slider-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 5rem;
    font-weight: 500;
    color: #fff;
    pointer-events: none;
    opacity: 0.95;
    text-shadow: 0 0 6px rgba(0,0,0,0.5);
}

    .slider-arrow.left {
        left: -26px;
    }

    .slider-arrow.right {
        right: -26px;
    }

.slider-video-wrapper {
    display: flex;
    gap: 2rem;
    justify-content: center;
    align-items: flex-start;
    flex-wrap: wrap;
}

.slider-container {
    flex: 1 1 600px;
    max-width: 600px;
}

.video-container {
    flex: 0 0 267px; /* width fixed for Facebook video */
}

.facebook-video {
    width: 100%;
    display: block;
    height: 400px;
}

.reviews-carousel-wrapper {
    position: relative;
    overflow: hidden;
}

    /* Add left and right fades */
    .reviews-carousel-wrapper::before,
    .reviews-carousel-wrapper::after {
        content: "";
        position: absolute;
        top: 0;
        width: 4rem; /* width of fade */
        height: 100%;
        pointer-events: none;
        z-index: 2;
    }

    .reviews-carousel-wrapper::before {
        left: 0;
        background: linear-gradient(to right, var(--white) 0%, transparent 100%);
    }

    .reviews-carousel-wrapper::after {
        right: 0;
        background: linear-gradient(to left, var(--white) 0%, transparent 100%);
    }

.reviews-carousel {
    display: flex;
    gap: 1rem;
    padding: 1rem;
    flex-wrap: nowrap;
}

.review-card {
    width: 400px;
    min-height: 220px;
    flex-shrink: 0;
}

.review {
    font-size: 1.1rem;
    line-height: 2;
    outline: solid 2px var(--orange);
}

.stars {
    font-size: 1.2rem;
    color: var(--yellow);
}

.before-after-slider-caption {
    text-align: center;
    font-size: 1rem;
    font-weight: 600;
    color: var(--orange);
}