:root {
    /* Updated Color Palette - Aesthetic Brown & Light Orange */
    --primary-color: #7B3F00; /* Darker, richer brown for main elements, headings, icons, buttons */
    --primary-color-rgb: 123, 63, 0; /* ADDED: RGB variable for efficient rgba usage */
    --secondary-color: #FF8C00; /* Vibrant orange/terracotta for accents, hover states */
    --accent-color: #FFE5B4; /* Light soothing orange for background of About Us section */
    --light-bg: #F8F5EE; /* Softer creamy background for alternating sections */
    --dark-bg: #2C2C2C; /* Darker grey for footer */
    --text-color: #333333; /* Main body text color */
    --light-text-color: #666666; /* Lighter text color */
    --border-color: rgba(0, 0, 0, 0.1); /* Subtle border for cards and maps */
}

/* ------------------------------------------------------------- */
/* OPTIMIZATION 1: Font Loading Strategy (Preload & Display Swap) */
/* Ismein hum font-display: swap add kar rahe hain taki fonts load hone tak browser fallback font use kare, 
   jisse FOUT (Flash of Unstyled Text) nahi hota aur First Contentful Paint tez hota hai.
   NOTE: Yeh settings Google Fonts ke CSS link par bhi apply honi chahiye. */
/* ------------------------------------------------------------- */

body {
    font-family: 'Roboto', sans-serif;
    color: var(--text-color);
    line-height: 1.6;
    background-color: #fff;
    /* OPTIMIZATION 2: Font Display Swap is key for Lighthouse */
    font-display: swap; 
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Playfair Display', serif;
    color: var(--primary-color);
    font-weight: 750;
    /* OPTIMIZATION 2: Font Display Swap is key for Lighthouse */
    font-display: swap; 
}

/* Header Styling */
.navbar-brand img {
    height: 60px;
    transition: transform 0.3s ease;
}

.navbar {
    padding-top: 5px;
    padding-bottom: 5px;
}
.navbar-brand img:hover {
    transform: scale(1.05);
}

.navbar-brand .d-sm-inline {
    /* OPTIMIZATION 3: !important se bacha, agar ho sake toh */
    color: var(--primary-color) !important;
    font-size: 1.7rem;
}

.navbar .nav-link {
    /* OPTIMIZATION 3: !important se bacha, agar ho sake toh */
    color: var(--text-color) !important; 
    font-weight: 500;
    margin: 0 8px;
    transition: color 0.3s ease, transform 0.2s ease;
    position: relative;
}

.navbar .nav-link::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 0%;
    height: 2px;
    background-color: var(--secondary-color);
    transition: width 0.3s ease;
}

.navbar .nav-link:hover::after {
    width: 100%;
}

.navbar .nav-link:hover {
    /* OPTIMIZATION 3: !important se bacha, agar ho sake toh */
    color: var(--secondary-color) !important; 
    transform: translateY(-2px);
}

.sticky-top {
    position: sticky;
    top: 0;
    width: 100%;
    z-index: 1020;
    /* OPTIMIZATION 3: !important se bacha, agar ho sake toh */
    background-color: var(--light-bg) !important; 
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

/* Hero Section - The main landing banner */
.hero-section {
    /* OPTIMIZATION 4: Background Image Handling. Agar yeh first visible image hai,
       toh isko CSS ke bajaye HTML <picture> tag ya inline style mein use karna behtar hai.
       Agar CSS mein hi rakhna hai, toh ye theek hai. */
    background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('../images/projects/hero-placeholder.jpg') no-repeat center center/cover;
    color: white;
    position: relative;
    /* FCP ko improve karne ke liye animation ko thoda fast (0.5s) ya remove kiya ja sakta hai
       lekin yahan maine 1s rakha hai taaki view na badle. */
    animation: fadeIn 1s ease-out; 
    min-height: 80vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-section .btn-outline-light {
    border-color: white;
    color: white;
    transition: background-color 0.3s ease, color 0.3s ease, transform 0.2s ease;
    border-width: 2px;
    padding: 12px 30px;
    font-size: 1.1rem;
}

.hero-section .btn-outline-light:hover {
    background-color: var(--secondary-color);
    border-color: var(--secondary-color);
    color: white;
    transform: translateY(-3px);
}

/* General Section Styling for consistent look */
section {
    padding: 100px 0;
    overflow: hidden;
}

/* Alternating background for better visual separation between sections */
section:nth-of-type(even) {
    background-color: var(--light-bg);
}

/* About Us Section - Redundant style removed */
/* #about-section ka style niche fir se define tha, maine unnecessary duplication hata diya */
#about-section {
    background-color: var(--accent-color); 
    padding: 80px 0;
}
/* REMOVED: Duplicate section style block:
#about-section {
    background-color: var(--background-light); 
    padding: 80px 0; 
}
*/

#about-section h2 {
    font-size: 2.8rem;
    margin-bottom: 3rem;
    font-weight: 700;
}

.about-image-column {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    padding-top: 0;
    padding-bottom: 20px;
}
/* Common style for circular items (image and inquiry box) */
.circular-media-item {
    width: 355px;
    height: 355px;
    /* OPTIMIZATION 3: !important se bacha, agar ho sake toh */
    border-radius: 50% !important; 
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
    /* OPTIMIZATION 3: !important se bacha, agar ho sake toh */
    border: 5px solid white !important; 
    transition: transform 0.3s ease;
    object-fit: cover;
}

.circular-media-item:hover {
    transform: scale(1.03);
}

/* SPECIFIC STYLE FOR THE MAIN IMAGE (Prashant & Rupali) - Redundant line removed */
/* REMOVED: #about-section .about-image-column img { margin-bottom: 0px; } */


/* Specific styling for the circular inquiry box */
.circular-inquiry-box {
    background-color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    text-align: center;
    overflow: hidden;

    margin-top: 40px;
}

.circular-inquiry-box h4 {
    color: var(--primary-color);
    font-size: 1.2rem;
    margin-bottom: 15px;
}

.circular-inquiry-box .input-group-text {
    background-color: var(--light-bg);
    border-color: var(--border-color);
    color: var(--text-color);
}

.circular-inquiry-box .form-control {
    border-color: var(--border-color);
    box-shadow: none;
}

.circular-inquiry-box .form-control:focus {
    border-color: var(--secondary-color);
}

.circular-inquiry-box .btn-whatsapp {
    background-color: var(--primary-color); 
    border-color: #25D366;
    color: white;
    font-weight: 600;
    transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.2s ease;
}

.circular-inquiry-box .btn-whatsapp:hover {
    background-color: #1DA851;
    transform: translateY(-2px);
}

/* About Us Right Column Text Styling */
#about-section .col-md-6 h3 {
    color: var(--primary-color);
    font-size: 2rem;
    margin-bottom: 1.5rem;
    font-weight: 700;
    margin-top: 0;
}

#about-section .col-md-6 p {
    font-family: 'Roboto', sans-serif;
    font-size: 1.05rem;
    line-height: 1.8;
    color: var(--text-color);
    margin-bottom: 1rem;
}

#about-section .col-md-6 p strong {
    color: var(--primary-color);
}


/* Card Styling (Used for Services and Project Types sections) */
.card {
    border: 1px solid var(--border-color);
    border-radius: 12px;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
    background-color: white;
}

.card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
    border-color: var(--secondary-color);
}

.service-icon {
    font-size: 3.5rem;
    color: var(--primary-color);
    margin-bottom: 1rem;
    transition: color 0.3s ease;
}

.card:hover .service-icon {
    color: var(--secondary-color);
}

.card-title {
    color: var(--primary-color);
    font-size: 1.35rem;
}

.card .btn-primary {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.2s ease;
    padding: 10px 25px;
    border-radius: 8px;
}

.card .btn-primary:hover {
    background-color: var(--secondary-color);
    border-color: var(--secondary-color);
    transform: translateY(-2px);
}


/* Project Cards (specifically for the slider thumbnails) */
.project-card .card-img-top {
    height: 220px;
    object-fit: cover;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

/* Project Slider Styling */
.carousel-item .row {
    justify-content: center;
}

#projectSlider .carousel-control-prev,
#projectSlider .carousel-control-next {
    width: 4%;
    opacity: 0.8;
    transition: opacity 0.3s ease, background-color 0.3s ease;
}

#projectSlider .carousel-control-prev:hover,
#projectSlider .carousel-control-next:hover {
    opacity: 1;
    background-color: rgba(0, 0, 0, 0.6);
}

#projectSlider .carousel-control-prev-icon,
#projectSlider .carousel-control-next-icon {
    background-color: var(--primary-color);
    border-radius: 50%;
    padding: 15px;
    transition: background-color 0.3s ease;
}

#projectSlider .carousel-control-prev-icon:hover,
#projectSlider .carousel-control-next-icon:hover {
    background-color: var(--secondary-color);
}

/* Explore All Projects Button - Large button below slider */
.btn-lg.btn-primary {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    padding: 15px 40px;
    border-radius: 10px;
    font-size: 1.1rem;
    font-weight: 600;
    transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.2s ease;
}

.btn-lg.btn-primary:hover {
    background-color: var(--secondary-color);
    border-color: var(--secondary-color);
    transform: translateY(-3px);
}


/* Map Container for Contact Us section */
.map-container {
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    border: 1px solid var(--border-color);
}

.map-container iframe {
    border-radius: 10px;
}

.magnifier-lens {
    position: absolute;
    border: 2px solid #ccc;
    cursor: none;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    background-repeat: no-repeat;
    pointer-events: none;
    z-index: 999;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    background-color: white;
    overflow: hidden;
}


}
/* New: Styling for Visuals Section Sliders (Selectors combined for efficiency) */
/* OPTIMIZATION 5: Combined repetitive selector definitions into a single block */
#isometricSlider .carousel-control-prev,
#isometricSlider .carousel-control-next,
#interiorSlider .carousel-control-prev,
#interiorSlider .carousel-control-next,
#model3dSlider .carousel-control-prev,
#model3dSlider .carousel-control-next,
#isometricSlider .carousel-control-prev-icon,
#isometricSlider .carousel-control-next-icon,
#interiorSlider .carousel-control-prev-icon,
#interiorSlider .carousel-control-next-icon,
#model3dSlider .carousel-control-prev-icon,
#model3dSlider .carousel-control-next-icon,
#isometricSlider .carousel-control-prev:hover,
#isometricSlider .carousel-control-next:hover,
#interiorSlider .carousel-control-prev:hover,
#interiorSlider .carousel-control-next:hover,
#model3dSlider .carousel-control-prev:hover,
#model3dSlider .carousel-control-next:hover,
#isometricSlider .carousel-control-prev-icon:hover,
#isometricSlider .carousel-control-next-icon:hover,
#interiorSlider .carousel-control-prev-icon:hover,
#interiorSlider .carousel-control-next-icon:hover,
#model3dSlider .carousel-control-prev-icon:hover,
#model3dSlider .carousel-control-next-icon:hover {
    transition: all 0.3s ease; /* Combine transitions */
}

/* General slider controls for visual sections */
#isometricSlider .carousel-control-prev,
#isometricSlider .carousel-control-next,
#interiorSlider .carousel-control-prev,
#interiorSlider .carousel-control-next,
#model3dSlider .carousel-control-prev,
#model3dSlider .carousel-control-next {
    width: 5%;
    opacity: 0.7;
    background-color: rgba(0, 0, 0, 0.4);
}

#isometricSlider .carousel-control-prev:hover,
#isometricSlider .carousel-control-next:hover,
#interiorSlider .carousel-control-prev:hover,
#interiorSlider .carousel-control-next:hover,
#model3dSlider .carousel-control-prev:hover,
#model3dSlider .carousel-control-next:hover {
    opacity: 1;
    background-color: rgba(0, 0, 0, 0.6);
}

#isometricSlider .carousel-control-prev-icon,
#isometricSlider .carousel-control-next-icon,
#interiorSlider .carousel-control-prev-icon,
#interiorSlider .carousel-control-next-icon,
#model3dSlider .carousel-control-prev-icon,
#model3dSlider .carousel-control-next-icon {
    background-color: var(--primary-color);
    border-radius: 50%;
    padding: 10px;
    font-size: 1.2rem;
}

#isometricSlider .carousel-control-prev-icon:hover,
#isometricSlider .carousel-control-next-icon:hover,
#interiorSlider .carousel-control-prev-icon:hover,
#interiorSlider .carousel-control-next-icon:hover,
#model3dSlider .carousel-control-prev-icon:hover,
#model3dSlider .carousel-control-next-icon:hover {
    background-color: var(--secondary-color);
}


/* Specific styling for the tabs navigation */
#visualsTabs .nav-link {
    color: var(--primary-color);
    border: 1px solid var(--primary-color);
    border-radius: 50px;
    padding: 10px 25px;
    margin: 0 5px;
    transition: all 0.3s ease;
}

#visualsTabs .nav-link.active,
#visualsTabs .nav-link:hover {
    background-color: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}

#visualsTabs .nav-link:hover:not(.active) { /* Hover for non-active pills */
    /* OPTIMIZATION 6: Using the pre-defined RGB variable for better CSS performance */
    background-color: rgba(var(--primary-color-rgb), 0.1); 
    color: var(--primary-color);
}

/* Ensure card images are properly sized within tabs */
#visualsTabsContent .project-card .card-img-top {
    height: 180px;
    object-fit: cover;
}

/* New style for the image placeholder (Unused/Redundant selector) */
/* REMOVED: .project-image-box {} */


/* Footer Styling */
footer {
    /* OPTIMIZATION 3: !important se bacha, agar ho sake toh */
    background-color: var(--dark-bg) !important; 
    color: white;
    padding: 50px 0;
}

footer .social-icons a {
    font-size: 1.8rem;
    margin: 0 10px;
    transition: color 0.3s ease, transform 0.2s ease;
}

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

footer .list-inline-item a {
    font-size: 0.95rem;
    padding: 0 8px;
    border-right: 1px solid rgba(255, 255, 255, 0.3);
    text-decoration: none;
    color: white;
}
footer .list-inline-item:last-child a {
    border-right: none;
}

footer .list-inline-item a:hover {
    color: var(--secondary-color);
}

/* Responsive Adjustments - Ordered from largest to smallest breakpoint */

/* Desktop and larger screens (min-width: 992px) */
@media (min-width: 992px) {
    /* No specific flex-direction rules needed here for .personal-intro-row
       as Bootstrap's nested .col-md-6 will handle the two-column layout */
}

/* Tablets and below (max-width: 991.98px) */
@media (max-width: 991.98px) {
    .navbar-collapse {
        background-color: var(--light-bg);
        padding: 15px;
        border-radius: 8px;
        margin-top: 10px;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    }
    .navbar .nav-link {
        padding: 8px 15px;
        text-align: center;
        margin: 0;
    }
    .navbar .nav-link::after {
        display: none;
    }
    .hero-section h1 {
        font-size: 2.2rem;
    }
    .hero-section p {
        font-size: 1rem;
    }
    section {
        padding: 60px 0;
    }
    .about-image-column {
        padding-top: 0;
        margin-bottom: 20px;
    }
    .circular-media-item {
        width: 250px;
        height: 250px;
    }
    .circular-inquiry-box {
        padding: 15px;
        margin-top: 30px;
    }
    .circular-inquiry-box h4 {
        font-size: 1.1rem;
    }
    .circular-inquiry-box .btn-whatsapp {
        font-size: 0.5rem;
    }
    #about-section h2 {
        font-size: 2.2rem;
    }
    #about-section .col-md-6 h3 {
        font-size: 1.8rem;
    }
    #about-section .col-md-6 p {
        font-size: 1rem;
    }
    .card-title {
        font-size: 1.2rem;
    }
}

/* Mobile phones and below (max-width: 767.98px) */
@media (max-width: 767.98px) {
    .hero-section {
        padding: 60px 0;
    }
    .hero-section h1 {
        font-size: 1.8rem;
    }
    .hero-section p {
        font-size: 0.9rem;
    }
    section {
        padding: 40px 0;
    }
    .about-image-column {
        padding-top: 0;
        margin-bottom: 15px;
    }
    .circular-media-item {
        width: 200px;
        height: 200px;
    }
    .circular-inquiry-box {
        padding: 10px;
        margin-top: 20px;
    }
    .circular-inquiry-box h4 {
        font-size: 0.75rem;
    }
    .circular-inquiry-box .btn-whatsapp {
        font-size: 0.5rem;
    }
    #about-section h2 {
        font-size: 2rem;
    }
    #about-section .col-md-6 h3 {
        font-size: 1.5rem;
    }
    #about-section .col-md-6 p {
        font-size: 0.95rem;
    }
    .service-icon {
        font-size: 3rem;
    }
    .btn-lg.btn-primary, .card .btn-primary {
        font-size: 0.9rem;
        padding: 10px 20px;
    }
    .navbar-brand .d-sm-inline {
        font-size: 1.2rem;
    }
    .navbar-brand img {
        height: 35px;
    }
    /* Hide slider controls on very small screens if they look cluttered */
    #isometricSlider .carousel-control-prev, #isometricSlider .carousel-control-next,
    #interiorSlider .carousel-control-prev, #interiorSlider .carousel-control-next,
    #model3dSlider .carousel-control-prev, #model3dSlider .carousel-control-next {
        display: none;
    }
}

/* Keyframe Animations */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}