* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Helvetica Neue', Arial, sans-serif;
}

:root {
    --primary: #004aad;
    --secondary: #f8c52c;
    --white: #ffffff;
    --dark: #1a202c;
    --dark-overlay: rgba(0, 16, 41, 0.6);
    --transition: all 0.3s ease;
}

html {
    scroll-behavior: smooth;
}

.nav-item.active {
    color: var(--secondary);
    /* yellow */
    border-bottom: 2px solid var(--secondary);
}


body {
    font-size: 16px;
    line-height: 1.6;
    color: var(--dark);
    overflow-x: hidden;
}

/* Full-screen hero with no overlay on image */
.hero {
    height: 100vh;
    width: 100%;
    position: relative;
    overflow: hidden;
    padding-top: 80px;
}

.slider {
    position: absolute;
    top: 0;
    left: 0;
    width: 300%;
    height: 100%;
    display: flex;
    transition: transform 0.7s ease;
}

.slide {
    width: 33.33%;
    height: 100%;
    position: relative;
}

.slide-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Animated stars */
.star {
    position: absolute;
    background-color: var(--secondary);
    clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
    opacity: 0.8;
    z-index: 15;
}

.star-1 {
    width: 40px;
    height: 40px;
    top: 18%;
    right: 15%;
    animation: float 4s ease-in-out infinite, twinkle 3s ease-in-out infinite;
}

.star-2 {
    width: 30px;
    height: 30px;
    top: 60%;
    right: 30%;
    animation: float 5s ease-in-out infinite, twinkle 4s ease-in-out infinite 1s;
}

.star-3 {
    width: 25px;
    height: 25px;
    top: 30%;
    right: 45%;
    animation: float 6s ease-in-out infinite, twinkle 5s ease-in-out infinite 0.5s;
}

.star-4 {
    width: 35px;
    height: 35px;
    top: 70%;
    right: 10%;
    animation: float 7s ease-in-out infinite, twinkle 4s ease-in-out infinite 1.5s;
}

@keyframes float {
    0% {
        transform: translateY(0) rotate(0deg);
    }

    50% {
        transform: translateY(-10px) rotate(5deg);
    }

    100% {
        transform: translateY(0) rotate(0deg);
    }
}

@keyframes twinkle {

    0%,
    100% {
        opacity: 0.8;
    }

    50% {
        opacity: 0.4;
    }
}

/* Top navigation */
.top-nav {
    position: fixed;
    top: 0;
    width: 100%;
    padding: 10px 30px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    background-color: rgba(0, 74, 173, 0.3);
    /* transparent default */
    backdrop-filter: blur(8px);
    transition: background-color 0.4s ease, box-shadow 0.3s ease;
    z-index: 999;
}

.top-nav.scrolled {
    background-color: #004aad;
    /* full color when not on hero */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}


.nav-item {
    color: #ffffff;
    text-decoration: none;
    font-size: 16px;
    font-weight: 500;
    margin-left: 25px;
    padding: 8px 10px;
    transition: color 0.3s ease;
}

.nav-item:hover {
    color: #f9d71c;
}

.contact-btn {
    background-color: #f9d71c;
    color: #1a1a1a;
    display: flex;
    align-items: center;
    padding: 8px 18px;
    border-radius: 30px;
    font-weight: 600;
    font-size: 15px;
    margin-left: 25px;
    text-decoration: none;
    transition: background 0.3s ease;
}

.contact-btn i {
    margin-right: 8px;
}

.contact-btn:hover {
    background-color: #ffffff;
    color: #004aad;
}

/* Emergency service tag */
.emergency-tag {
    position: absolute;
    top: 100px;
    left: 60px;
    background-color: var(--secondary);
    color: var(--dark);
    padding: 15px 25px;
    font-size: 20px;
    font-weight: 700;
    z-index: 20;
}

/* Hero content containers - one for each slide */
.hero-content-container {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 20;
}

.hero-content {
    position: absolute;
    bottom: 150px;
    left: 60px;
    max-width: 700px;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s ease, transform 0.5s ease;
    pointer-events: none;
}

.hero-content.active {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.hero-title {
    color: var(--white);
    font-size: 60px;
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 30px;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

.call-now-btn {
    display: inline-block;
    background-color: var(--secondary);
    color: var(--dark);
    font-size: 24px;
    font-weight: 700;
    padding: 15px 50px;
    text-decoration: none;
    transition: var(--transition);
}

.call-now-btn:hover {
    background-color: #e6b41b;
}

/* Logo container in right corner center */
.logo-container {
    position: absolute;
    top: 50%;
    right: 40px;
    transform: translateY(-50%);
    z-index: 30;
    max-width: 220px;
    background-color: rgba(255, 255, 255, 0.9);
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.logo {
    width: 100%;
    display: block;
}

/* Dark overlay for text readability */
.text-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, var(--dark-overlay) 0%, rgba(0, 0, 0, 0) 60%);
    z-index: 10;
}

/* Slider indicators */
.slider-dots {
    position: absolute;
    bottom: 80px;
    left: 60px;
    display: flex;
    gap: 15px;
    z-index: 20;
}

.dot {
    width: 12px;
    height: 12px;
    background-color: rgba(255, 255, 255, 0.6);
    border-radius: 50%;
    cursor: pointer;
    transition: var(--transition);
}

.dot.active {
    background-color: var(--secondary);
    transform: scale(1.2);
}

/* Mobile styles */
.mobile-toggle {
    display: none;
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 200;
    width: 40px;
    height: 40px;
    background-color: var(--primary);
    border-radius: 5px;
    cursor: pointer;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.toggle-bar {
    width: 25px;
    height: 3px;
    background-color: var(--white);
    margin: 3px 0;
    transition: var(--transition);
}

.mobile-menu {
    position: fixed;
    top: 0;
    right: -300px;
    width: 300px;
    height: 100vh;
    background-color: var(--white);
    z-index: 190;
    padding: 80px 30px 30px;
    transition: var(--transition);
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
}

.mobile-menu.active {
    right: 0;
}

.mobile-link {
    display: block;
    color: var(--dark);
    text-decoration: none;
    font-size: 18px;
    font-weight: 600;
    padding: 15px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.mobile-btn {
    display: block;
    background-color: var(--primary);
    color: var(--white);
    text-align: center;
    text-decoration: none;
    padding: 15px;
    font-weight: 700;
    margin-top: 30px;
    border-radius: 5px;
}

.mobile-btn i {
    margin-right: 10px;
}


/* Services Section */
.services {
    padding: 100px 50px;
    background-color: #f9f9f9;
}

.section-title {
    text-align: center;
    margin-bottom: 50px;
}

.section-title h2 {
    font-size: 2.5rem;
    color: #1a3e6d;
    position: relative;
    display: inline-block;
    padding-bottom: 15px;
}

.section-title h2::after {
    content: '';
    position: absolute;
    width: 80px;
    height: 4px;
    background-color: #f9d71c;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    padding: 0 20px;
}

.service-card {
    background-color: #ffffff;
    color: #1a1a1a;
    border-radius: 12px;
    padding: 40px 25px;
    text-align: center;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
}

.service-card {
    background-color: #1a3e6d;
    /* Keep your original dark blue */
    padding: 40px 30px;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
    text-align: center;
    color: white;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.service-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
}

.icon-wrap-dark {
    width: 80px;
    height: 80px;
    background-color: #0d284b;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto 20px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

.icon-wrap-dark img {
    width: 60px;
    height: auto;
    transition: transform 0.3s ease;
}

.service-card:hover .icon-wrap-dark img {
    transform: scale(1.1);
}

.service-card h3 {
    font-size: 1.3rem;
    margin-bottom: 15px;
    color: #f9d71c;
    font-weight: bold;
}

.service-card p {
    font-size: 1rem;
    color: #eaeaea;
    line-height: 1.6;
}


/* simple service */

.simple-service {
    background: linear-gradient(90deg, #0e2a50 0%, #1a3e6d 100%);
    color: #ffffff;
    position: relative;
    overflow: hidden;
    padding: 100px 0;
}

.simple-service::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.1));
    z-index: 0;
}

.simple-service>* {
    position: relative;
    z-index: 1;
}

.simple-service-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 60px;
    /* more spacing between image and text */
    margin-bottom: 80px;
    padding: 40px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 12px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
}

.service-image {
    flex: 1.2;
    /* increase image width ratio */
    min-width: 350px;
    max-width: 600px;
}

.service-image img {
    width: 100%;
    height: auto;
    max-width: 100%;
    border-radius: 12px;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4);
    transition: transform 0.3s ease;
}

.service-image img:hover {
    transform: scale(1.03);
}

.service-content {
    flex: 1;
    min-width: 300px;
    padding-right: 20px;
}

.section-label {
    color: var(--secondary);
    font-size: 0.9rem;
    text-transform: uppercase;
    margin-bottom: 10px;
    letter-spacing: 1px;
}

.service-content h2 {
    font-size: 2rem;
    margin-bottom: 20px;
    font-weight: 700;
    color: #2d5994;
}

.service-content p {
    font-size: 1.1rem;
    line-height: 1.7;
    margin-bottom: 30px;
    color: #f0f0f0;
    /* softer white for easier reading */
}

.yellow-btn {
    background-color: var(--secondary);
    color: #1a1a1a;
    padding: 14px 28px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: bold;
    font-size: 1rem;
    transition: background-color 0.3s ease;
}

.yellow-btn:hover {
    background-color: white;
    color: #1a3e6d;
}

.slider-wrapper {
    position: relative;
    overflow: hidden;
    max-width: 1200px;
    margin: 0 auto;
}

.service-slider {
    display: flex;
    transition: transform 0.5s ease-in-out;
    width: 100%;
}

.simple-service-container {
    flex: 0 0 100%;
    padding: 40px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 40px;
    align-items: center;
}

.simple-service-container {
    background-color: rgba(255, 255, 255, 0.05);
    /* light translucent box */
    border-radius: 12px;
    padding: 40px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}


.slider-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: #f9d71c;
    color: #1a1a1a;
    border: none;
    padding: 10px 20px;
    font-size: 2rem;
    font-weight: bold;
    cursor: pointer;
    z-index: 10;
    border-radius: 5px;
    transition: background 0.3s ease;
}

.slider-btn:hover {
    background-color: white;
}

.prev-btn {
    left: 10px;
}

.next-btn {
    right: 10px;
}

/* Why Choose Us */
.why-us {
    padding: 100px 50px;
}

.why-us-content {
    display: flex;
    align-items: center;
    gap: 50px;
    flex-wrap: wrap;
    padding: 20px;/
}

.why-us-text {
    flex: 1;
    min-width: 300px;
    padding: 20px;
}

.why-us-text h2 {
    font-size: 2.5rem;
    color: #1a3e6d;
    margin-bottom: 20px;
}

.why-us-text p {
    margin-bottom: 30px;
    font-size: 1.1rem;
}

.why-us-points {
    margin-bottom: 30px;
}

.point {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
}

.point-icon {
    background-color: #f9d71c;
    color: #1a3e6d;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 15px;
    flex-shrink: 0;
}

.why-us-image {
    flex: 1;
    min-width: 300px;
}

.why-us-image img {
    width: 100%;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

/* Call to Action */
.cta {
    background: linear-gradient(rgba(26, 62, 109, 0.9), rgba(26, 62, 109, 0.9)), url('/api/placeholder/1200/400') center/cover no-repeat;
    padding: 80px 0;
    color: white;
    text-align: center;
}

.cta h2 {
    font-size: 2.5rem;
    margin-bottom: 20px;
}

.cta p {
    font-size: 1.2rem;
    max-width: 800px;
    margin: 0 auto 30px;
}

/* Customer Reviews */
.reviews {
    padding: 80px 0;
    background-color: #f9f9f9;
}

.reviews-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

.review-card {
    background-color: white;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.review-rating {
    color: #f9d71c;
    font-size: 1.5rem;
    margin-bottom: 15px;
}

.review-text {
    margin-bottom: 20px;
    font-style: italic;
}

.reviewer {
    display: flex;
    align-items: center;
}

.reviewer-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    margin-right: 15px;
    background-color: #e0e0e0;
}

.reviewer-info h4 {
    margin-bottom: 5px;
}

/* Contact Form */
.contact {
    padding: 80px 0;
}

.contact-container {
    display: flex;
    flex-wrap: wrap;
    gap: 50px;
}

.contact-info {
    flex: 1;
    min-width: 300px;
}

.contact-info h2 {
    font-size: 2.5rem;
    color: #1a3e6d;
    margin-bottom: 20px;
}

.contact-info p {
    margin-bottom: 30px;
    font-size: 1.1rem;
}

.contact-item {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}

.contact-icon {
    background-color: #1a3e6d;
    color: white;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 15px;
    flex-shrink: 0;
}

.contact-form {
    flex: 1;
    min-width: 300px;
    background-color: white;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: bold;
}

.form-group input,
.form-group textarea,
.form-group select {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-size: 1rem;
}

.form-group textarea {
    height: 120px;
}

.submit-btn {
    background-color: #1a3e6d;
    color: white;
    border: none;
    padding: 15px 30px;
    border-radius: 50px;
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
    width: 100%;
}

.submit-btn:hover {
    background-color: #f9d71c;
    color: #1a3e6d;
}

/* Footer */
footer {
    background-color: #1a3e6d;
    padding: 40px 40px;
    color: white;
}

.footer-content,
.footer-social,
.footer-bottom {
    padding-left: 40px;
    padding-right: 40px;
}

.footer-content {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
}

.footer-column {
    flex: 1;
    min-width: 200px;
}

.footer-column h3 {
    margin-bottom: 20px;
    font-size: 1.3rem;
    color: #f9d71c;
}

.footer-column ul {
    list-style: none;
}

.footer-column ul li {
    margin-bottom: 10px;
}

.footer-column ul li a {
    color: white;
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-column ul li a:hover {
    color: #f9d71c;
}

.footer-bottom {
    margin-top: 40px;
    text-align: center;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* Added classes for icons */
.fa {
    display: inline-block;
    width: 1em;
    height: 1em;
    background-color: currentColor;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.testimonials-section {
    padding: 100px 40px;
    background-color: #f8f9fb;
    position: relative;
}

.testimonials-section .section-title h2 {
    font-size: 2.5rem;
    color: #1a3e6d;
}

.testimonials-section .section-title p {
    max-width: 700px;
    margin: 0 auto;
    font-size: 1.1rem;
    color: #555;
    margin-top: 15px;
}

.section-title h2 {
    font-size: 2.5rem;
    color: #f9d71c;
    text-transform: uppercase;
    margin-bottom: 15px;
    text-align: center;
    letter-spacing: 1px;
}

.section-title p {
    font-size: 1.1rem;
    color: #e0e0e0;
    text-align: center;
    max-width: 700px;
    margin: 0 auto 50px;
}


.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    margin-top: 60px;
}

.testimonial-item {
    background-color: white;
    border-radius: 12px;
    padding: 30px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.06);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.testimonial-item:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.1);
}

.testimonial-content {
    flex-grow: 1;
    margin-bottom: 25px;
    position: relative;
}

.quote-icon {
    font-size: 32px;
    color: #f9d71c;
    margin-bottom: 15px;
}

.testimonial-content p {
    font-size: 1rem;
    color: #444;
    font-style: italic;
    line-height: 1.7;
}

.testimonial-rating {
    color: #f9d71c;
    margin-top: 15px;
}

.testimonial-author {
    display: flex;
    align-items: center;
    gap: 15px;
    padding-top: 20px;
    border-top: 1px solid #eee;
}

.author-image {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid #f9d71c;
    flex-shrink: 0;
}

.author-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.author-info h4 {
    margin: 0;
    font-size: 18px;
    color: #1a3e6d;
    font-weight: 600;
}

.author-info p {
    margin: 3px 0 0;
    font-size: 14px;
    color: #777;
}

/* Stats Section */
.testimonial-stats {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 40px;
    background-color: #1a3e6d;
    border-radius: 12px;
    padding: 50px 20px;
    margin-top: 80px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
}

.stat-item {
    text-align: center;
    flex: 1 1 200px;
}

.stat-number {
    font-size: 2.5rem;
    color: #f9d71c;
    font-weight: 800;
}

.stat-label {
    color: white;
    font-size: 1.1rem;
    font-weight: 500;
    margin-top: 8px;
}

/* CTA Section */
.testimonial-cta {
    background-color: #1a3e6d;
    color: white;
    margin-top: 60px;
    padding: 50px 30px;
    border-radius: 12px;
    text-align: center;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
}

.testimonial-cta h3 {
    font-size: 28px;
    margin-bottom: 15px;
}

.testimonial-cta p {
    font-size: 1.1rem;
    margin-bottom: 25px;
    color: rgba(255, 255, 255, 0.85);
}

.cta-button {
    display: inline-block;
    background-color: #f9d71c;
    color: #1a3e6d;
    font-weight: bold;
    padding: 15px 40px;
    font-size: 16px;
    border-radius: 50px;
    text-decoration: none;
    transition: all 0.3s ease;
}

.cta-button:hover {
    background-color: white;
    transform: translateY(-3px);
}

.fa-truck {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 512'%3E%3Cpath d='M48 0C21.5 0 0 21.5 0 48V368c0 26.5 21.5 48 48 48H64c0 53 43 96 96 96s96-43 96-96H384c0 53 43 96 96 96s96-43 96-96h32c17.7 0 32-14.3 32-32s-14.3-32-32-32V288 256 237.3c0-17-6.7-33.3-18.7-45.3L512 114.7c-12-12-28.3-18.7-45.3-18.7H416V48c0-26.5-21.5-48-48-48H48zM416 160h50.7L544 237.3V256H416V160zM112 416c-26.5 0-48-21.5-48-48s21.5-48 48-48s48 21.5 48 48s-21.5 48-48 48zm368-48c0 26.5-21.5 48-48 48s-48-21.5-48-48s21.5-48 48-48s48 21.5 48 48z'/%3E%3C/svg%3E");
}

.fa-wrench {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M352 320c88.4 0 160-71.6 160-160c0-15.3-2.2-30.1-6.2-44.2c-3.1-10.8-16.4-13.2-24.3-5.3l-76.8 76.8c-3 3-7.1 4.7-11.3 4.7H336c-8.8 0-16-7.2-16-16V118.6c0-4.2 1.7-8.3 4.7-11.3l76.8-76.8c7.9-7.9 5.4-21.2-5.3-24.3C382.1 2.2 367.3 0 352 0C263.6 0 192 71.6 192 160c0 19.1 3.4 37.5 9.5 54.5L19.9 396.1C7.2 408.8 0 426.1 0 444.1C0 481.6 30.4 512 67.9 512c18 0 35.3-7.2 48-19.9L297.5 310.5c17 6.2 35.4 9.5 54.5 9.5zM80 456c-13.3 0-24-10.7-24-24s10.7-24 24-24s24 10.7 24 24s-10.7 24-24 24z'/%3E%3C/svg%3E");
}

.fa-key {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M336 352c97.2 0 176-78.8 176-176S433.2 0 336 0S160 78.8 160 176c0 18.7 2.9 36.8 8.3 53.7L7 391c-4.5 4.5-7 10.6-7 17v80c0 13.3 10.7 24 24 24h80c13.3 0 24-10.7 24-24V448h40c13.3 0 24-10.7 24-24V384h40c6.4 0 12.5-2.5 17-7l33.3-33.3c16.9 5.4 35 8.3 53.7 8.3zM376 96a40 40 0 1 1 0 80 40 40 0 1 1 0-80z'/%3E%3C/svg%3E");
}

.fa-battery-full {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'%3E%3Cpath d='M464 160c8.8 0 16 7.2 16 16V336c0 8.8-7.2 16-16 16H80c-8.8 0-16-7.2-16-16V176c0-8.8 7.2-16 16-16H464zM80 96C35.8 96 0 131.8 0 176V336c0 44.2 35.8 80 80 80H464c44.2 0 80-35.8 80-80V320c17.7 0 32-14.3 32-32V224c0-17.7-14.3-32-32-32V176c0-44.2-35.8-80-80-80H80z'/%3E%3C/svg%3E");
}

.fa-truck-monster {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 512'%3E%3Cpath d='M112 0C85.5 0 64 21.5 64 48V96H16c-8.8 0-16 7.2-16 16s7.2 16 16 16H64v48H16c-8.8 0-16 7.2-16 16s7.2 16 16 16H64v48H16c-8.8 0-16 7.2-16 16s7.2 16 16 16H64v32c0 26.5 21.5 48 48 48H244.5c5.4 9.4 17.4 6.8 25.2 15.6c44.8 44.8 116.7 44.9 161.6 .2s44.9-116.7 .2-161.6c-8.8-7.9-6.2-19.8-15.6-25.2V48c0-26.5-21.5-48-48-48H112zM352 368a48 48 0 1 1 0 96 48 48 0 1 1 0-96z'/%3E%3C/svg%3E");
}

.fa-check {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z'/%3E%3C/svg%3E");
}

.fa-phone {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M164.9 24.6c-7.7-18.6-28-28.5-47.4-23.2l-88 24C12.1 30.2 0 46 0 64C0 311.4 200.6 512 448 512c18 0 33.8-12.1 38.6-29.5l24-88c5.3-19.4-4.6-39.7-23.2-47.4l-96-40c-16.3-6.8-35.2-2.1-46.3 11.6L304.7 368C234.3 334.7 177.3 277.7 144 207.3L193.3 167c13.7-11.2 18.4-30 11.6-46.3l-40-96z'/%3E%3C/svg%3E");
}

.fa-envelope {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M48 64C21.5 64 0 85.5 0 112c0 15.1 7.1 29.3 19.2 38.4L236.8 313.6c11.4 8.5 27 8.5 38.4 0L492.8 150.4c12.1-9.1 19.2-23.3 19.2-38.4c0-26.5-21.5-48-48-48H48zM0 176V384c0 35.3 28.7 64 64 64H448c35.3 0 64-28.7 64-64V176L294.4 339.2c-22.8 17.1-54 17.1-76.8 0L0 176z'/%3E%3C/svg%3E");
}

.fa-map-marker {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3E%3Cpath d='M215.7 499.2C267 435 384 279.4 384 192C384 86 298 0 192 0S0 86 0 192c0 87.4 117 243 168.3 307.2c12.3 15.3 35.1 15.3 47.4 0zM192 128a64 64 0 1 1 0 128 64 64 0 1 1 0-128z'/%3E%3C/svg%3E");
}

.fa-star {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'%3E%3Cpath d='M316.9 18C311.6 7 300.4 0 288.1 0s-23.4 7-28.8 18L195 150.3 51.4 171.5c-12 1.8-22 10.2-25.7 21.7s-.7 24.2 7.9 32.7L137.8 329 113.2 474.7c-2 12 3 24.2 12.9 31.3s23 8 33.8 2.3l128.3-68.5 128.3 68.5c10.8 5.7 23.9 4.9 33.8-2.3s14.9-19.3 12.9-31.3L438.5 329 542.7 225.9c8.6-8.5 11.7-21.2 7.9-32.7s-13.7-19.9-25.7-21.7L381.2 150.3 316.9 18z'/%3E%3C/svg%3E");
}

/* Contact Section Styles */
.contact {
    padding: 80px 40px;
    background-color: #f9f9f9;
}


.contact .section-title p {
    max-width: 700px;
    margin: 0 auto;
    font-size: 1.1rem;
    color: #555;
    margin-top: 15px;
    text-align: center;
}

.contact-container {
    display: flex;
    flex-wrap: wrap;
    gap: 50px;
    margin-top: 40px;
}

.contact-info {
    flex: 1;
    min-width: 300px;
}

.contact-info h3 {
    font-size: 1.8rem;
    color: #1a3e6d;
    margin-bottom: 20px;
}

.contact-info p {
    margin-bottom: 30px;
    font-size: 1.1rem;
    color: #555;
}

.contact-item {
    display: flex;
    align-items: flex-start;
    margin-bottom: 25px;
}

.contact-icon {
    background-color: #1a3e6d;
    color: white;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 15px;
    flex-shrink: 0;
}

.contact-item h4 {
    margin: 0 0 5px 0;
    font-size: 1.2rem;
    color: #1a3e6d;
}

.contact-item p {
    margin: 0;
    font-size: 1rem;
    color: #555;
}

.service-area {
    background-color: #f0f5ff;
    padding: 20px;
    border-radius: 10px;
    margin-top: 30px;
    border-left: 4px solid #1a3e6d;
}

.service-area h4 {
    color: #1a3e6d;
    margin-top: 0;
    margin-bottom: 10px;
    font-size: 1.2rem;
}

.service-area p {
    margin-bottom: 10px;
}

.area-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.area-list li {
    position: relative;
    padding-left: 20px;
}

.area-list li:before {
    content: '';
    position: absolute;
    left: 0;
    top: 8px;
    width: 8px;
    height: 8px;
    background-color: #f9d71c;
    border-radius: 50%;
}

.emergency-box {
    background-color: #fff8e8;
    padding: 20px;
    border-radius: 10px;
    margin-top: 30px;
    border-left: 4px solid #f9d71c;
}

.emergency-box h4 {
    color: #f9a61c;
    margin-top: 0;
    margin-bottom: 10px;
    font-size: 1.2rem;
    display: flex;
    align-items: center;
}

.emergency-box h4 i {
    margin-right: 10px;
}

.emergency-box p {
    margin-bottom: 0;
    font-size: 0.95rem;
}

/* Contact Form Styles */
.contact-form {
    flex: 1;
    min-width: 300px;
    background-color: white;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.contact-form h3 {
    font-size: 1.8rem;
    color: #1a3e6d;
    margin-bottom: 20px;
    text-align: center;
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: #333;
}

.form-group label .required {
    color: #e74c3c;
}

.form-group input,
.form-group textarea,
.form-group select {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-size: 1rem;
    color: #333;
    transition: border-color 0.3s ease;
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
    border-color: #1a3e6d;
    outline: none;
}

.form-group textarea {
    height: 120px;
    resize: vertical;
}

.checkbox-group {
    display: flex;
    align-items: center;
}

.checkbox-group input {
    width: auto;
    margin-right: 10px;
}

.checkbox-group label {
    margin-bottom: 0;
    font-weight: normal;
}

.submit-btn {
    background-color: #1a3e6d;
    color: white;
    border: none;
    padding: 15px 30px;
    border-radius: 50px;
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.submit-btn i {
    margin-right: 10px;
}

.submit-btn:hover {
    background-color: #f9d71c;
    color: #1a3e6d;
}

.form-note {
    margin-top: 15px;
    font-size: 0.9rem;
    color: #777;
    text-align: center;
}

/* Map Section */
.map-section {
    margin-top: 80px;
}

.map-section h3 {
    font-size: 1.8rem;
    color: #1a3e6d;
    margin-bottom: 20px;
    text-align: center;
}

.map-container {
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.map-section {
    padding: 80px 0;
}

.map-container {
    position: relative;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

/* Business Hours */
.business-hours {
    margin-top: 80px;
}

.business-hours h3 {
    font-size: 1.8rem;
    color: #1a3e6d;
    margin-bottom: 20px;
    text-align: center;
}

.hours-container {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    justify-content: center;
}

.hours-box {
    flex: 1;
    min-width: 250px;
    max-width: 500px;
    background-color: white;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.hours-box h4 {
    font-size: 1.4rem;
    color: #1a3e6d;
    margin-top: 0;
    margin-bottom: 20px;
    text-align: center;
}

.hours-box ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.hours-box ul li {
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid #eee;
}

.hours-box ul li:last-child {
    border-bottom: none;
}

.hours-box ul li span {
    font-weight: 600;
    color: #555;
}

.hours-box.emergency {
    background-color: #1a3e6d;
    color: white;
    text-align: center;
}

.hours-box.emergency h4 {
    color: #f9d71c;
}

.hours-box.emergency p {
    margin-bottom: 20px;
}

.emergency-phone {
    display: inline-block;
    background-color: #f9d71c;
    color: #1a3e6d;
    font-weight: bold;
    padding: 12px 24px;
    border-radius: 50px;
    text-decoration: none;
    font-size: 18px;
    transition: all 0.3s ease;
}

.emergency-phone:hover {
    background-color: white;
    transform: scale(1.05);
}

/* Footer Styles */
footer {
    background-color: #1a3e6d;
    padding: 60px 0 20px;
    color: white;
}

.footer-content {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    margin-bottom: 40px;
}

.footer-column {
    flex: 1;
    min-width: 200px;
}

.footer-logo {
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
}

.footer-logo i {
    margin-right: 10px;
}

.footer-logo span {
    color: #f9d71c;
}

.footer-column p {
    margin-bottom: 20px;
    line-height: 1.6;
}

.footer-contact p {
    margin-bottom: 10px;
    display: flex;
    align-items: center;
}

.footer-contact p i {
    margin-right: 10px;
    color: #f9d71c;
}

.footer-column h3 {
    margin-bottom: 20px;
    font-size: 1.3rem;
    color: #f9d71c;
    position: relative;
    padding-bottom: 10px;
}

.footer-column h3:after {
    content: '';
    position: absolute;
    width: 40px;
    height: 3px;
    background-color: #f9d71c;
    bottom: 0;
    left: 0;
}

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

.footer-column ul li {
    margin-bottom: 10px;
}

.footer-column ul li a {
    color: white;
    text-decoration: none;
    transition: all 0.3s ease;
    position: relative;
    padding-left: 15px;
}

.footer-column ul li a:before {
    content: '';
    position: absolute;
    left: 0;
    top: 8px;
    width: 6px;
    height: 6px;
    background-color: #f9d71c;
    border-radius: 50%;
}

.footer-column ul li a:hover {
    color: #f9d71c;
    padding-left: 20px;
}

/* Social & Certifications */
.footer-social {
    padding: 30px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    margin-bottom: 30px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
}

.social-icons {
    display: flex;
    gap: 15px;
}

.social-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background-color: rgba(255, 255, 255, 0.1);
    color: white;
    border-radius: 50%;
    transition: all 0.3s ease;
    text-decoration: none;
}

.social-icon:hover {
    background-color: #f9d71c;
    color: #1a3e6d;
    transform: translateY(-3px);
}

.certifications {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.cert-badge {
    background-color: rgba(249, 215, 28, 0.2);
    color: #f9d71c;
    padding: 5px 15px;
    border-radius: 20px;
    font-size: 0.9rem;
    font-weight: 600;
}

/* Footer Bottom */
.footer-bottom {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
}

.footer-bottom p {
    margin: 0;
}

.footer-links a {
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-links a:hover {
    color: #f9d71c;
}

.floating-call-button {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 9999;
    background-color: #fcb900;
    color: #000;
    font-weight: bold;
    font-size: 18px;
    padding: 14px 20px;
    border-radius: 50px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    transition: background-color 0.3s ease;
}

.floating-call-button i {
    font-size: 20px;
}

.floating-call-button:hover {
    background-color: #ffcd42;
}

/* New icons for footer */
.fa-facebook {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath d='M279.14 288l14.22-92.66h-88.91v-60.13c0-25.35 12.42-50.06 52.24-50.06h40.42V6.26S260.43 0 225.36 0c-73.22 0-121.08 44.38-121.08 124.72v70.62H22.89V288h81.39v224h100.17V288z'/%3E%3C/svg%3E");
}

.fa-twitter {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z'/%3E%3C/svg%3E");
}

.fa-instagram {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M224.1 141c-63.6 0-114.9 51.3-114.9 114.9s51.3 114.9 114.9 114.9S339 319.5 339 255.9 287.7 141 224.1 141zm0 189.6c-41.1 0-74.7-33.5-74.7-74.7s33.5-74.7 74.7-74.7 74.7 33.5 74.7 74.7-33.6 74.7-74.7 74.7zm146.4-194.3c0 14.9-12 26.8-26.8 26.8-14.9 0-26.8-12-26.8-26.8s12-26.8 26.8-26.8 26.8 12 26.8 26.8zm76.1 27.2c-1.7-35.9-9.9-67.7-36.2-93.9-26.2-26.2-58-34.4-93.9-36.2-37-2.1-147.9-2.1-184.9 0-35.8 1.7-67.6 9.9-93.9 36.1s-34.4 58-36.2 93.9c-2.1 37-2.1 147.9 0 184.9 1.7 35.9 9.9 67.7 36.2 93.9s58 34.4 93.9 36.2c37 2.1 147.9 2.1 184.9 0 35.9-1.7 67.7-9.9 93.9-36.2 26.2-26.2 34.4-58 36.2-93.9 2.1-37 2.1-147.8 0-184.8zM398.8 388c-7.8 19.6-22.9 34.7-42.6 42.6-29.5 11.7-99.5 9-132.1 9s-102.7 2.6-132.1-9c-19.6-7.8-34.7-22.9-42.6-42.6-11.7-29.5-9-99.5-9-132.1s-2.6-102.7 9-132.1c7.8-19.6 22.9-34.7 42.6-42.6 29.5-11.7 99.5-9 132.1-9s102.7-2.6 132.1 9c19.6 7.8 34.7 22.9 42.6 42.6 11.7 29.5 9 99.5 9 132.1s2.7 102.7-9 132.1z'/%3E%3C/svg%3E");
}

.fa-yelp {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3E%3Cpath d='M42.9 240.32l99.62 48.61c19.2 9.4 16.2 37.51-4.5 42.71L30.5 358.45c-21.4 5.3-40.2-13.5-34.9-34.9l28.33-113.22c5.3-21.5 33.3-24.5 42.9-4.49zm115.09-56.25c-36.51-12.71-88.43 51.51-75.4 87.93 9.4 25.91 53.3 4.2 62.5-21.9 5.3-14.51-1.1-31.31-14.5-38.41-4.5-2.45-46.6-32.22-45.9-88.42 0-3.21.3-6.31.8-9.41 37.41-74.12 208.62-161.64 288.63-38.31 64.01 98.83-34.51 145.94-97.32 125.03-70.72-23.41-106.53-90.34-111.94-96.24-4-4.5-11.61-12.71-22.92-12.71-16.8 0-31.3 19.8-21.4 37.6 3.1 5.3 5.8 9.4 9.1 13.5 13.8 17.1 44.12 54.52 60.32 69.63 28.92 27.01 46.32 25.21 74.42 5.9 72.62-49.71 31.21-187.94-85.63-171.13zm227.25 29.21l-39.74 15.2c-18.95 7.35-34.48-10.43-27.19-29.36l20.61-53.42c7.35-18.95 33.59-24.95 44.35-9.5l28.72 41.14c10.82 15.62-7.7 39.01-26.75 35.94zm19.3 134.65l-93.63-143.24c-18.31-28.1 14.8-62.31 45.4-47.21L499.3 285.55c18.25 9.15 20.8 33.16 5.2 45.96l-79.85 69.02c-15.5 13.36-39.87 2.77-47.2-15.6z'/%3E%3C/svg%3E");
}

.fa-google {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 488 512'%3E%3Cpath d='M488 261.8C488 403.3 391.1 504 248 504 110.8 504 0 393.2 0 256S110.8 8 248 8c66.8 0 123 24.5 166.3 64.9l-67.5 64.9C258.5 52.6 94.3 116.6 94.3 256c0 86.5 69.1 156.6 153.7 156.6 98.2 0 135-70.4 140.8-106.9H248v-85.3h236.1c2.3 12.7 3.9 24.9 3.9 41.4z'/%3E%3C/svg%3E");
}

.fa-paper-plane {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M498.1 5.6c10.1 7 15.4 19.1 13.5 31.2l-64 416c-1.5 9.7-7.4 18.2-16 23s-18.9 5.4-28 1.6L284 427.7l-68.5 74.1c-8.9 9.7-22.9 12.9-35.2 8.1S160 493.2 160 480V396.4c0-4 1.5-7.8 4.2-10.7L331.8 202.8c5.8-6.3 5.6-16-.4-22s-15.7-6.4-22.8-1L106 360.8 17.7 316.6C7.1 311.3 .3 300.7 0 288.9s5.9-22.8 16.1-28.7l448-256c10.7-6.1 23.9-5.5 34 1.4z'/%3E%3C/svg%3E");
}

.fa-exclamation-circle {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zm0-384c13.3 0 24 10.7 24 24V264c0 13.3-10.7 24-24 24s-24-10.7-24-24V152c0-13.3 10.7-24 24-24zM224 352a32 32 0 1 1 64 0 32 32 0 1 1 -64 0z'/%3E%3C/svg%3E");
}



/* Responsive styles */
@media (max-width: 1200px) {
    .hero-title {
        font-size: 48px;
    }

    .emergency-tag {
        top: 80px;
        left: 40px;
        font-size: 18px;
    }

    .hero-content {
        bottom: 120px;
        left: 40px;
    }

    .logo-container {
        max-width: 200px;
        right: 30px;
        padding: 15px;
    }

    .slider-dots {
        left: 40px;
    }

    .star-1 {
        width: 35px;
        height: 35px;
    }

    .star-2 {
        width: 25px;
        height: 25px;
    }

    .star-3 {
        width: 20px;
        height: 20px;
    }

    .star-4 {
        width: 30px;
        height: 30px;
    }
}

@media (max-width: 992px) {
    .top-nav {
        display: none;
    }

    .mobile-toggle {
        display: flex;
    }

    .mobile-toggle.active .toggle-bar:nth-child(1) {
        transform: translateY(9px) rotate(45deg);
    }

    .mobile-toggle.active .toggle-bar:nth-child(2) {
        opacity: 0;
    }

    .mobile-toggle.active .toggle-bar:nth-child(3) {
        transform: translateY(-9px) rotate(-45deg);
    }

    .hero-content {
        bottom: 100px;
        left: 20px;
        max-width: 500px;
    }

    .emergency-tag {
        top: 120px;
        left: 20px;
    }

    .logo-container {
        max-width: 180px;
        padding: 15px;
        right: 20px;
    }

    .slider-dots {
        left: 20px;
    }
}

@media (max-width: 768px) {

    .hero-title {
        font-size: 36px;
    }

    .call-now-btn {
        font-size: 18px;
        padding: 12px 30px;
    }



    .logo-container {
        max-width: 150px;
        padding: 12px;
    }

    .emergency-tag {
        font-size: 16px;
        padding: 10px 20px;
    }

    .star-1 {
        width: 30px;
        height: 30px;
    }

    .star-2 {
        width: 20px;
        height: 20px;
    }

    .star-3 {
        width: 15px;
        height: 15px;
    }

    .star-4 {
        width: 25px;
        height: 25px;
    }

    .hero h1 {
        font-size: 2.5rem;
    }

    .why-us-content {
        flex-direction: column;
        padding: 0;
    }

    .contact-container {
        flex-direction: column;
    }

    .hero-buttons {
        flex-direction: column;
        align-items: center;
    }

    .btn-primary,
    .btn-secondary {
        width: 100%;
        max-width: 300px;
        margin-bottom: 10px;
    }

    .services {
        padding: 100px 0px;
    }

    /* simple service */
    .simple-service-container {
        flex-direction: column;
        text-align: center;
        padding: 30px 20px;
    }

    .slider-btn {
        font-size: 1.5rem;
        padding: 8px 14px;
    }



    .service-content {
        padding-right: 0;
    }

    .service-image {
        max-width: 100%;
    }

    .contact-container,
    .hours-container,
    .footer-content,
    .footer-social,
    .footer-bottom {
        flex-direction: column;
        padding: 60px 20px;
    }



    .contact-form,
    .contact-info,
    .hours-box {
        width: 100%;
    }

    .area-list {
        grid-template-columns: 1fr;
    }

    .footer-column {
        width: 100%;
        margin-bottom: 30px;
    }

    .social-icons,
    .certifications {
        justify-content: center;
        width: 100%;
    }

    .footer-bottom {
        text-align: center;
    }

    .footer-links {
        margin-top: 10px;
    }

    .testimonials-section {
        padding: 100px 20px;
    }

    .testimonial-cta h3 {
        font-size: 24px;
        padding: 80px 20px;
    }

    .testimonial-cta p {
        font-size: 1rem;
    }

    .cta-button {
        padding: 12px 30px;
        font-size: 15px;
    }

    .testimonial-stats {
        flex-direction: column;
        align-items: center;
    }

    .floating-call-button {
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

@media (max-width: 576px) {
    .hero-title {
        font-size: 30px;
        margin-bottom: 20px;
    }

    .emergency-tag {
        font-size: 14px;
        padding: 8px 15px;
    }

    .call-now-btn {
        font-size: 16px;
        padding: 10px 25px;
    }

    .logo-container {
        max-width: 120px;
        padding: 10px;
        right: 15px;
    }
}