/* Home Page Specific Styles */
/* Services Section Redesign */
.services-section-new {
    background-color: #f8f9fa;
    /* Assuming bg-light equivalent */
}

/* Service Header Badge */
.service-pill-badge {
    background: #e8f5e9;
    color: #28a745;
    padding: 6px 16px;
    border-radius: 50px;
    font-size: 0.85rem;
    font-weight: 600;
    display: inline-block;
}

.service-subtitle {
    max-width: 700px;
    font-size: 1rem;
    line-height: 1.6;
}

/* Service Card New Style */
.service-card-new {
    background: #ffffff;
    border: none;
    border-radius: 16px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    overflow: hidden;
}

.service-card-new:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08) !important;
}

.service-img-wrapper {
    height: 220px;
    position: relative;
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
}

.service-img-wrapper img {
    transition: transform 0.5s ease;
}

.service-card-new:hover .service-img-wrapper img {
    transform: scale(1.05);
}

/* Icon Badge */
.service-icon-badge {
    position: absolute;
    top: 15px;
    right: 15px;
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(4px);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    z-index: 2;
}

.service-icon-badge i {
    color: #28a745;
    /* Success Green */
    font-size: 1.2rem;
}

/* Content Typography */
.service-card-new h4 {
    font-size: 1.25rem;
    font-weight: 700;
}

.service-card-new p {
    font-size: 0.9rem;
    line-height: 1.5;
    color: #6c757d;
}

/* WhatsApp Button */


/* Header Compact Style */
#header {
    padding: 0;
}

.navbar {
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
}

.header-logo {
    height: 50px !important;
    /* Smaller logo */
    transition: all 0.3s ease;
}

.nav-link {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-color) !important;
    padding: 0 1rem !important;
}

.nav-link.active {
    color: var(--secondary-color) !important;
}

/* Hero Carousel Redesign */
.hero-section .carousel-item {
    height: 85vh;
    /* Slightly smaller than full screen */
    min-height: 600px;
    background-color: #000;
}

.hero-overlay {
    background: linear-gradient(to right, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.4) 100%);
}

.hero-badge {
    background: rgba(40, 167, 69, 0.2);
    border: 1px solid rgba(40, 167, 69, 0.4);
    color: #4cd137;
    padding: 8px 16px;
    border-radius: 50px;
    font-weight: 600;
    font-size: 0.9rem;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    backdrop-filter: blur(5px);
    margin-bottom: 1.5rem;
}

.hero-title {
    font-size: 4rem;
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: 1rem;
    color: white;
}

.hero-subtitle {
    font-size: 1.5rem;
    font-weight: 600;
    color: #4cd137;
    /* Green subtitle */
    margin-bottom: 1rem;
}

.hero-desc {
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.9);
    max-width: 600px;
    margin-bottom: 2rem;
    line-height: 1.6;
}

.hero-btn-primary {
    background-color: var(--secondary-color);
    color: white;
    padding: 12px 30px;
    border-radius: 50px;
    font-weight: 600;
    border: none;
    transition: all 0.3s;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.hero-btn-primary:hover {
    background-color: #218838;
    transform: translateY(-2px);
    color: white;
}

.hero-btn-outline {
    background-color: transparent;
    border: 2px solid rgba(255, 255, 255, 0.3);
    color: white;
    padding: 12px 30px;
    border-radius: 50px;
    font-weight: 600;
    transition: all 0.3s;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.hero-btn-outline:hover {
    background-color: white;
    color: var(--primary-color);
    border-color: white;
}

.hero-features {
    display: flex;
    gap: 20px;
    margin-top: 2rem;
    flex-wrap: wrap;
}

.hero-feature-item {
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 8px;
}

.hero-feature-item i {
    color: #4cd137;
}

/* Carousel Controls Hero */
.hero-section .carousel-control-prev,
.hero-section .carousel-control-next {
    width: 60px;
    height: 60px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    top: 50%;
    transform: translateY(-50%);
    backdrop-filter: blur(5px);
    opacity: 0.8;
    margin: 0 20px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    z-index: 5;
    /* Ensure above content if needed, but below overlay */
}

.hero-section .carousel-control-prev:hover,
.hero-section .carousel-control-next:hover {
    background: rgba(255, 255, 255, 0.2);
}

.hero-section .carousel-indicators {
    bottom: 30px;
    z-index: 10;
    margin-bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.hero-section .carousel-indicators button {
    width: 12px !important;
    height: 12px !important;
    border-radius: 50% !important;
    margin: 0 8px !important;
    /* Increased spacing to prevent dots from touching */
    background-color: rgba(255, 255, 255, 0.5) !important;
    border: none !important;
    opacity: 1 !important;
    transition: all 0.3s ease;
    text-indent: -999px;
    padding: 0;
    flex: 0 0 auto;
}

/* Fix for potential extra dots/pseudo elements */
.hero-section .carousel-indicators button::before,
.hero-section .carousel-indicators button::after {
    display: none !important;
    content: none !important;
}

.hero-section .carousel-indicators .active {
    background-color: #4cd137 !important;
    width: 35px !important;
    border-radius: 20px !important;
    opacity: 1 !important;
}

/* Mobile Responsive Hero Styles */
@media (max-width: 768px) {

    .hero-section .carousel-control-prev,
    .hero-section .carousel-control-next {
        display: none;
        /* Hide arrows on mobile for cleaner look */
    }

    .hero-section .carousel-item {
        height: 100vh;
        /* Full height on mobile */
        min-height: 100vh;
    }

    .hero-title {
        font-size: 2.2rem;
        /* Smaller font on mobile */
        margin-bottom: 0.5rem;
    }

    .hero-subtitle {
        font-size: 1.1rem;
        margin-bottom: 0.5rem;
    }

    .hero-desc {
        font-size: 0.95rem;
        margin-bottom: 1.5rem;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .hero-btn-primary,
    .hero-btn-outline {
        padding: 10px 20px;
        font-size: 0.9rem;
        width: 100%;
        /* Stack buttons */
        justify-content: center;
    }

    .hero-badge {
        font-size: 0.8rem;
        padding: 5px 12px;
        margin-bottom: 1rem;
    }

    .hero-features {
        gap: 10px;
        margin-top: 1.5rem;
    }

    .hero-feature-item {
        font-size: 0.8rem;
    }

    .hero-section .carousel-indicators {
        bottom: 80px;
        /* Move indicators up appropriately */
        margin-bottom: 0;
    }
}

/* Property Pill Hover Effect */
.property-pill {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: default;
}

.property-pill:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08) !important;
}

.property-pill-single {
    width: 300px;
    max-width: 100%;
}

.property-pill-double {
    width: 100%;
    max-width: 200px;
}

/* CTA Section */
.cta-section {
    background-color: var(--secondary-color);
    border-radius: 0 0 50% 50% / 20px;
}

.cta-btn {
    background-color: var(--white);
    color: var(--secondary-color);
    font-weight: 700;
    padding: 15px 40px;
    border-radius: 50px;
    transition: all 0.3s ease;
}

.cta-btn:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
    background-color: var(--primary-color);
    color: var(--white);
}

.cta-btn-outline {
    border: 2px solid var(--white);
    color: var(--white);
    font-weight: 700;
    padding: 13px 40px;
    border-radius: 50px;
    transition: all 0.3s ease;
}

.cta-btn-outline:hover {
    background-color: var(--white);
    color: var(--secondary-color);
}

/* Footer Styles */
.footer-logo-circle {
    width: 60px;
    height: 60px;
    background-color: var(--secondary-color);
    color: var(--white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 1.5rem;
}

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

.footer-social-icon:hover {
    background-color: var(--secondary-color);
    transform: translateY(-3px);
}

.footer-link {
    color: #a0aec0;
    text-decoration: none;
    transition: 0.3s;
    display: inline-block;
    margin-bottom: 12px;
}

.footer-link:hover {
    color: var(--secondary-color);
    padding-left: 5px;
}

/* Contact Section Redesign */
.contact-card {
    background: #ffffff;
    /* Or bg-light if preferred, screenshot looks like white cards on white/gray bg? No, right side has separate cards. */
    /* Screenshot shows the form is in a white card. The right side items are in white cards too? Or transparent?
       The screenshot shows the form has a white bg and shadow.
       The right side items seem to be individual cards with white background? Or maybe the whole section is white and these are gray?
       Let's look at the screenshot again.
       Left: Big white card with shadow.
       Right: Individual white cards (or very light gray) for each item?
       Actually, the right side items look like they have a white background with a subtle shadow or border, sitting on a main white background?
       Or maybe they are just blocks.
       Let's stick to: Left = White Card with Shadow. Right = Individual Cards with very light gray bg (bg-light) or white with border.
       Let's go with white cards with border/shadow for both for consistency, or follow the "green icon box" style.
       Screenshot right side: White/Light backgrounds.
       Let's use .contact-info-card for the right side items.
    */
    transition: transform 0.3s ease;
}

.contact-info-card {
    background-color: #f8f9fa;
    /* Light gray like bg-light */
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 20px;
    display: flex;
    align-items: start;
    border: 1px solid rgba(0, 0, 0, 0.05);
    /* Subtle border */
}

.contact-icon-box {
    width: 50px;
    height: 50px;
    background-color: rgba(40, 167, 69, 0.1);
    /* var(--secondary-color) with opacity */
    color: var(--secondary-color);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    flex-shrink: 0;
    margin-right: 20px;
}

.contact-info-content h5 {
    font-weight: 700;
    color: var(--text-color);
    margin-bottom: 5px;
}

.contact-info-content p,
.contact-info-content a {
    color: var(--text-light);
    font-size: 0.95rem;
    text-decoration: none;
    margin-bottom: 2px;
    display: block;
}



/* Testimonial Section Redesign */
.testimonials-section {
    background-color: #fff !important;
}

.testimonial-card {
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
    /* Soft large shadow */
    max-width: 850px;
    margin: 20px auto;
    /* Space for shadow */
    position: relative;
    z-index: 2;
}

.testimonial-avatar {
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, #4CAF50, #8BC34A);
    /* Gradient green */
    font-size: 1.2rem;
}

.custom-nav-btn {
    width: 50px;
    height: 50px;
    background: white;
    border-radius: 50%;
    opacity: 1;
    top: 50%;
    transform: translateY(-50%);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.custom-nav-btn:hover {
    background: #f8f9fa;
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15);
}

.carousel-control-prev.custom-nav-btn {
    left: 10%;
    /* Adjust based on container width to sit outside card */
}

.carousel-control-next.custom-nav-btn {
    right: 10%;
}

@media (max-width: 991px) {
    .carousel-control-prev.custom-nav-btn {
        left: 0;
    }

    .carousel-control-next.custom-nav-btn {
        right: 0;
    }
}

.carousel-control-prev-icon-custom,
.carousel-control-next-icon-custom {
    font-size: 1.2rem;
    color: #333;
}

/* Custom Indicators */
.custom-indicators {
    position: static;
    /* Place below carousel */
    margin-top: 30px;
    margin-bottom: 0;
}

.custom-indicators [data-bs-target] {
    background-color: #dee2e6;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin: 0 5px;
    border: none;
    opacity: 1;
    transition: all 0.3s;
}

.custom-indicators .active {
    background-color: var(--secondary-color);
    width: 30px;
    /* Long pill for active */
    border-radius: 10px;
}

/* Testimonial Carousel */
.testimonials-section .carousel-control-prev-icon,
.testimonials-section .carousel-control-next-icon {
    background-size: 50%;
}

/* Why Choose Us Redesign */
.why-choose-us {
    background: radial-gradient(circle at center, #0f2035 0%, #05101c 100%);
    /* Deep Navy Gradient */
    color: white;
}

.why-choose-us h2 {
    color: white !important;
}

.feature-card {
    background: rgba(255, 255, 255, 0.03);
    /* Very subtle transparent white */
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 16px;
    padding: 2.5rem;
    height: 100%;
    transition: transform 0.3s ease, background 0.3s ease;
}

.feature-card:hover {
    transform: translateY(-5px);
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.1);
}

.feature-icon-box {
    width: 60px;
    height: 60px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    margin-bottom: 1.5rem;
    color: white;
}

/* Feature Colors */
/* Feature Colors - Solid/Gradient BG with White Icons to match screenshot */
.feature-icon-blue {
    background: linear-gradient(135deg, #0d6efd, #0a58ca);
    box-shadow: 0 4px 15px rgba(13, 110, 253, 0.3);
    border: none;
}

.feature-icon-green {
    background: linear-gradient(135deg, #198754, #146c43);
    box-shadow: 0 4px 15px rgba(25, 135, 84, 0.3);
    border: none;
}

.feature-icon-purple {
    background: linear-gradient(135deg, #6f42c1, #59359a);
    box-shadow: 0 4px 15px rgba(111, 66, 193, 0.3);
    border: none;
}

.feature-icon-orange {
    background: linear-gradient(135deg, #fd7e14, #ca6510);
    box-shadow: 0 4px 15px rgba(253, 126, 20, 0.3);
    border: none;
}

.feature-icon-teal {
    background: linear-gradient(135deg, #20c997, #1aa179);
    box-shadow: 0 4px 15px rgba(32, 201, 151, 0.3);
    border: none;
}

.feature-icon-red {
    background: linear-gradient(135deg, #dc3545, #b02a37);
    box-shadow: 0 4px 15px rgba(220, 53, 69, 0.3);
    border: none;
}

.feature-title {
    font-weight: 700;
    margin-bottom: 1rem;
    color: white;
}

.feature-desc {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 0;
}

.section-badge {
    background: rgba(25, 135, 84, 0.2);
    color: #28a745;
    /* Brighter green text */
    border: 1px solid rgba(40, 167, 69, 0.3);
    padding: 0.5rem 1.5rem;
    border-radius: 50px;
    font-weight: 600;
    font-size: 0.9rem;
    display: inline-block;
    letter-spacing: 0.5px;
}

.text-gradient-best {
    background: linear-gradient(90deg, #28a745, #fd7e14);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
}

.testimonials-section .carousel-control-prev,
.testimonials-section .carousel-control-next {
    width: 60px;
    opacity: 0.8;
}

/* Service Card Lift matches style.css utilities but ensuring height equality */
.service-card {
    display: flex;
    flex-direction: column;
}

/* Floating WhatsApp */


/* Responsive Adjustments */

/* =========================================
   MOBILE-FIRST RESPONSIVE OVERRIDES (Home)
   ========================================= */

@media (max-width: 768px) {

    /* Hero Section */
    .hero-section {
        margin-top: 0;
        /* Removing top margin if fixed header */
    }

    .hero-section .carousel-item {
        height: 80vh !important;
        /* Slightly larger for impact but not full screen blocking */
        min-height: 500px;
    }

    .hero-title {
        font-size: 2.2rem;
        line-height: 1.2;
    }

    .hero-subtitle {
        font-size: 1.25rem;
        margin-bottom: 15px;
    }

    .hero-desc {
        font-size: 1rem;
        margin-bottom: 20px;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        line-clamp: 3;
        /* Standard property */
        /* Limit lines text */
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .hero-features {
        display: none;
        /* Hide features in hero on small screens to save space */
    }

    .hero-btn-primary,
    .hero-btn-outline {
        width: 100%;
        margin-bottom: 10px;
        justify-content: center;
    }

    /* Carousel Indicators */
    .hero-section .carousel-indicators {
        bottom: 15px;
    }

    .hero-section .carousel-indicators button {
        width: 10px !important;
        height: 10px !important;
        margin: 0 5px !important;
    }

    /* Sections */
    .display-5 {
        font-size: 1.8rem;
        /* Smaller section headings */
    }

    .service-subtitle {
        font-size: 1rem;
        width: 100%;
    }

    /* Testimonials */
    .testimonial-card {
        padding: 20px;
    }

    .quote-icon {
        font-size: 2rem;
    }

    /* Contact Section on Home */
    .contact-form-wrapper {
        padding: 25px 15px;
    }
}