/* ===================================
   Kairo's Home Improvement - Custom CSS

   TABLE OF CONTENTS:
   1. Global Styles & Variables
   2. Navigation Bar
   3. Hero Section
   4. Services Section
   5. Portfolio Section
   6. Why Choose Us Section
   7. Testimonials Section
   8. CTA Section
   9. Contact Section
   10. Footer
   11. Scroll to Top Button
   12. Portfolio Modal
   13. Animations
   14. Responsive Styles
   15. Utilities

   DESIGN SYSTEM:
   - Colors: Blue (#1a375f) primary, Orange (#F97316) accent
   - Typography: Poppins (headings), Inter (body)
   - Spacing: 80px (desktop), 60px (tablet), 40px (mobile)
   - Border Radius: 16px (cards), 50px (buttons)
   - Shadows: Layered for depth and elevation
   - Animations: Smooth cubic-bezier for natural motion
   =================================== */

/* ===================================
   1. Global Styles & Variables
   CSS Custom Properties for consistent theming
   These variables can be overridden for easy customization
   =================================== */

:root {
    /* Color Palette: Brand colors and UI colors */
    --primary-color: #1a375f;        /* Deep blue: headers, buttons, backgrounds */
    --secondary-color: #F97316;      /* Vibrant orange: accents, CTAs, highlights */
    --accent-color: #F7FAFC;         /* Light gray: section backgrounds */
    --text-dark: #2D3748;            /* Dark gray: primary text color */
    --text-light: #718096;           /* Medium gray: secondary text, captions */
    --white: #FFFFFF;                /* Pure white: backgrounds, text on dark */
    --overlay-dark: rgba(26, 54, 93, 0.85);  /* Dark overlay: hero, modals (85% opacity) */

    /* Typography: Font families for consistent text hierarchy */
    --font-heading: 'Poppins', sans-serif;   /* Headings: bold, modern, clean */
    --font-body: 'Inter', sans-serif;        /* Body text: readable, professional */

    /* Spacing: Section padding adjusts via media queries */
    --section-padding: 80px 0;       /* Desktop: generous vertical spacing */

    /* Transitions: Default animation timing for smooth interactions */
    --transition: all 0.3s ease;     /* Standard: hover effects, state changes */

    /* Logo Sizing: Responsive logo dimensions */
    --logo-width: 420px;             /* Main logo width (not currently used) */
    --logo-height: 300px;            /* Main logo height (not currently used) */
    --logo-padding: 14px;            /* Padding inside logo wrapper */
    --logo-border-radius: 12px;      /* Corner rounding for logo container */
    --logo-nav-size: 220px;          /* Navbar logo size (responsive) */
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--font-body);
    color: var(--text-dark);
    line-height: 1.6;
    overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    font-weight: 700;
    line-height: 1.2;
}

a {
    text-decoration: none;
    transition: var(--transition);
}

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

.section-padding {
    padding: var(--section-padding);
}

/* ===================================
   Pattern Background Overlay
   Adds subtle radial gradients to light sections for visual interest
   - Uses ::before pseudo-element to layer pattern
   - pointer-events: none allows clicking through overlay
   - Two radial gradients: orange (top-left), blue (bottom-right)
   =================================== */
.bg-light {
    position: relative;  /* Establishes positioning context for ::before */
}

.bg-light::before {
    content: '';         /* Required for pseudo-element to render */
    position: absolute;  /* Positioned relative to .bg-light parent */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;           /* Cover entire parent element */
    /* Subtle radial gradients: brand colors at very low opacity (3%) */
    background-image:
        radial-gradient(circle at 20% 50%, rgba(249, 115, 22, 0.03) 0%, transparent 50%),
        radial-gradient(circle at 80% 80%, rgba(26, 54, 93, 0.03) 0%, transparent 50%);
    pointer-events: none; /* Allow clicks to pass through to content below */
}

/* ===================================
   Section Title Styling
   Consistent title design with gradient underline accent
   - Large, bold typography for visual hierarchy
   - Centered orange gradient underline for brand consistency
   =================================== */
.section-title {
    font-size: 2.5rem;          /* Large size: desktop (40px) */
    font-weight: 700;           /* Bold weight for prominence */
    color: var(--primary-color);/* Brand blue */
    margin-bottom: 1rem;        /* Space below title */
    position: relative;         /* Positioning context for ::after underline */
    display: inline-block;      /* Shrink-wrap to content width */
    padding-bottom: 1rem;       /* Space for underline */
}

/* Gradient Underline: Orange accent under section titles */
.section-title::after {
    content: '';                /* Required for pseudo-element */
    position: absolute;         /* Positioned relative to .section-title */
    bottom: 0;                  /* Aligned to bottom edge */
    left: 50%;                  /* Start at horizontal center */
    transform: translateX(-50%);/* Center the 60px line */
    width: 60px;                /* Fixed width accent line */
    height: 4px;                /* Thickness of underline */
    /* Gradient: orange to lighter orange for depth */
    background: linear-gradient(90deg, var(--secondary-color), #ff8833);
    border-radius: 2px;         /* Slight rounding on ends */
}

.section-subtitle {
    font-size: 1.125rem;
    color: var(--text-light);
    max-width: 700px;
    margin: 0 auto;
    line-height: 1.8;
}

/* ===================================
   2. Navigation Bar
   Fixed header with glassmorphism effect and scroll behavior

   FEATURES:
   - Fixed positioning: stays at top while scrolling
   - Glassmorphism: blur effect with semi-transparent background
   - Scroll effect: JavaScript adds .scrolled class to compress header
   - Gradient background: blue with subtle color variation
   - Layered shadows: depth and definition

   RESPONSIVE:
   - Desktop (≥992px): Full horizontal layout
   - Tablet/Mobile (<992px): Hamburger menu
   =================================== */

/* Default Navigation State: Full height with gradient background */
#mainNav {
    /* Glassmorphism background: gradient with transparency */
    background: linear-gradient(135deg,
        rgba(26, 54, 93, 0.98) 0%,      /* Dark blue start */
        rgba(26, 54, 93, 0.95) 50%,     /* Slightly lighter middle */
        rgba(45, 74, 112, 0.98) 100%);  /* Lighter blue end */

    backdrop-filter: blur(10px);         /* Blur effect for glassmorphism */
    padding: 0.85rem 0;                  /* Vertical padding: top and bottom */

    /* Smooth transitions: cubic-bezier for natural easing */
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);

    /* Layered shadows: depth with inner border */
    box-shadow:
        0 2px 20px rgba(0,0,0,0.15),    /* Main shadow: soft drop shadow */
        0 0 0 1px rgba(255,255,255,0.1);/* Inner border: subtle white outline */

    border-bottom: 1px solid rgba(255,255,255,0.1); /* Subtle separator */
}

/* Scrolled State: Compressed header when user scrolls past 100px */
/* JavaScript in script.js adds/removes .scrolled class */
#mainNav.scrolled {
    padding: 0.5rem 0;                   /* Reduced padding: more compact */

    /* Simplified gradient: less variation when scrolled */
    background: linear-gradient(135deg,
        rgba(26, 54, 93, 0.98) 0%,
        rgba(26, 54, 93, 0.96) 100%);

    /* Enhanced shadow: more prominent when scrolled */
    box-shadow:
        0 4px 30px rgba(0,0,0,0.25),    /* Stronger shadow: more elevation */
        0 0 0 1px rgba(255,255,255,0.15);/* Brighter inner border */
}

/* Collapsed header styles (used by existing scroll JS) */
#mainNav.scrolled .brand-text,
#mainNav.scrolled .navbar .brand-text,
#mainNav.scrolled .navbar-brand .brand-text {
    font-size: 1rem;
}

#mainNav.scrolled .brand-subtext {
    opacity: 0;
    visibility: hidden;
    height: 0;
    margin: 0;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
}

#mainNav.scrolled .logo-background,
#mainNav.scrolled .navbar .logo-background,
#mainNav.scrolled .navbar-brand .logo-background {
    width: 65px;
    height: 65px;
    background-size: 85%;
}

/* Responsive: tablet and below */
@media (max-width: 991px) {
    :root {
        --logo-nav-size: 160px;
        --section-padding: 60px 0;
    }

    #mainNav {
        padding: 0.5rem 0;
    }

    #mainNav .logo-background,
    .navbar .logo-background,
    .navbar-brand .logo-background {
        width: 70px;
        height: 70px;
    }

    .brand-text {
        font-size: 0.95rem;
    }

    .brand-subtext {
        font-size: 0.7rem;
    }

    .hero-section {
        min-height: 500px;
    }

    .navbar-nav .nav-link {
        margin: 0.25rem 0;
    }

    .btn-cta {
        margin-top: 0.5rem;
        width: 100%;
        justify-content: center;
    }
}

/* Responsive: mobile */
@media (max-width: 767px) {
    :root {
        --logo-nav-size: 90px;
        --section-padding: 40px 0;
    }

    #mainNav {
        padding: 0.4rem 0;
    }

    .navbar-brand {
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    /* Hide logo on mobile, show only text */
    .navbar-brand .logo-wrapper {
        display: none;
    }

    .brand-text-wrapper {
        margin-left: 0 !important;
    }

    .brand-text {
        font-size: 1rem;
    }

    .brand-subtext {
        font-size: 0.7rem;
    }

    .brand-subtext i {
        font-size: 0.65rem;
    }

    .hero-section {
        min-height: 420px;
    }

    .navbar-toggler {
        border: 2px solid rgba(255,255,255,0.3);
        padding: 0.5rem;
        border-radius: 8px;
    }

    .navbar-toggler:focus {
        box-shadow: 0 0 0 0.2rem rgba(249, 115, 22, 0.3);
    }

    .navbar-nav .nav-link {
        padding: 0.75rem 1rem !important;
        margin: 0.25rem 0;
        border-radius: 8px;
    }

    .navbar-nav .nav-link i {
        font-size: 1rem;
    }

    .btn-cta {
        margin-top: 0.75rem;
        width: 100%;
        justify-content: center;
        padding: 0.75rem 1.5rem;
    }
}

.navbar-brand {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--white) !important;
    font-family: var(--font-heading);
    position: relative;
    transition: all 0.3s ease;
}

.navbar-brand:hover {
    transform: translateY(-2px);
}

.navbar-brand:hover .brand-text {
    color: var(--secondary-color) !important;
}

/* Logo Wrapper with shine effect */
.logo-wrapper {
    position: relative;
    overflow: hidden;
    border-radius: 50%;
}

.logo-shine {
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(
        45deg,
        transparent,
        rgba(255, 255, 255, 0.1),
        transparent
    );
    transform: rotate(45deg);
    animation: shine 3s infinite;
}

@keyframes shine {
    0% {
        transform: translateX(-100%) translateY(-100%) rotate(45deg);
    }
    100% {
        transform: translateX(100%) translateY(100%) rotate(45deg);
    }
}

/* Brand text next to logo inside navbar */
.navbar .brand-text,
.navbar-brand .brand-text {
    color: var(--white);
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1.1rem;
    line-height: 1.2;
    white-space: nowrap;
    letter-spacing: 0.3px;
    text-shadow: 0 2px 4px rgba(0,0,0,0.2);
    transition: all 0.3s ease;
}

@media (max-width: 767px) {
    .navbar .brand-text,
    .navbar-brand .brand-text {
        font-size: 0.9rem;
    }
}

/* Wrapper and subtitle for brand */
.brand-text-wrapper {
    display: flex;
    flex-direction: column;
}

.brand-subtext {
    color: rgba(255,255,255,0.85);
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 0.75rem;
    line-height: 1.3;
    margin-top: 3px;
    display: flex;
    align-items: center;
}

.brand-subtext i {
    font-size: 0.7rem;
    opacity: 0.8;
}

@media (max-width: 767px) {
    .brand-subtext {
        font-size: 0.7rem;
    }
}

/* Header Contact Bar */
.header-contact-bar {
    gap: 1rem;
    padding: 0.5rem 1rem;
    background: rgba(255,255,255,0.1);
    border-radius: 50px;
    border: 1px solid rgba(255,255,255,0.15);
}

.header-contact-item {
    color: var(--white);
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.3s ease;
    padding: 0.25rem 0.5rem;
    border-radius: 20px;
}

.header-contact-item:hover {
    color: var(--secondary-color);
    background: rgba(255,255,255,0.1);
    transform: translateY(-2px);
}

.header-contact-item i {
    font-size: 0.875rem;
}

.header-contact-bar .divider {
    color: rgba(255,255,255,0.3);
    font-weight: 300;
}

.navbar-nav .nav-link {
    color: rgba(255,255,255,0.95) !important;
    font-weight: 500;
    padding: 0.6rem 1rem !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    display: flex;
    align-items: center;
    border-radius: 8px;
    font-size: 0.95rem;
}

.navbar-nav .nav-link i {
    font-size: 0.875rem;
    opacity: 0.8;
    transition: all 0.3s ease;
}

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

.navbar-nav .nav-link:hover {
    color: var(--secondary-color) !important;
    background: rgba(255,255,255,0.08);
    transform: translateY(-2px);
}

.navbar-nav .nav-link:hover i {
    opacity: 1;
    transform: scale(1.1);
}

.navbar-nav .nav-link:hover::before {
    width: 80%;
}

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

.btn-cta {
    background: linear-gradient(135deg, var(--secondary-color) 0%, #ff8833 100%);
    color: var(--white) !important;
    padding: 0.65rem 1.75rem;
    border-radius: 50px;
    font-weight: 600;
    border: 2px solid transparent;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(249, 115, 22, 0.3);
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
}

.btn-cta::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
    transition: left 0.5s ease;
}

.btn-cta:hover::before {
    left: 100%;
}

.btn-cta:hover {
    background: linear-gradient(135deg, #ff8833 0%, var(--secondary-color) 100%);
    transform: translateY(-3px);
    box-shadow: 0 6px 25px rgba(249, 115, 22, 0.5);
    border-color: rgba(255,255,255,0.3);
}

.btn-cta i {
    transition: all 0.3s ease;
}

.btn-cta:hover i {
    transform: scale(1.15);
}

.logo-background {
    background-image: url('images/gallery/logo.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 85%;
    background-color: #ffffff;
    display: inline-block;
    width: var(--logo-width);
    height: var(--logo-height);
    padding: var(--logo-padding);
    border-radius: var(--logo-border-radius);
    box-shadow: 0 4px 15px rgba(0,0,0,0.15);
    margin-left: 0;
    transition: all 0.4s ease;
}

/* Circular logo background used inside the header/navbar */
#mainNav .logo-background,
.navbar .logo-background,
.navbar-brand .logo-background {
    width: 90px;
    height: 90px;
    padding: 0;
    background-color: #ffffff;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 80%;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2), 0 0 0 3px rgba(249, 115, 22, 0.3);
    margin-left: 0;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    border: 3px solid rgba(255,255,255,0.2);
}

#mainNav.scrolled .logo-background,
.navbar-brand:hover .logo-background {
    box-shadow: 0 6px 20px rgba(249, 115, 22, 0.4), 0 0 0 3px rgba(249, 115, 22, 0.5);
    transform: scale(1.05) rotate(5deg);
}

/* ===================================
   3. Hero Section
   =================================== */

.hero-section {
    position: relative;
    height: 100vh;
    min-height: 600px;
    overflow: hidden;
}

#heroCarousel {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

.carousel-inner,
.carousel-item {
    height: 100%;
}

.carousel-item {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.carousel-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--overlay-dark);
}

.hero-content {
    position: relative;
    z-index: 1;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--white);
    padding-top: 120px;
}

.hero-content h1 {
    color: var(--white);
    text-shadow: 2px 2px 8px rgba(0,0,0,0.3);
    font-size: 3.5rem;
    line-height: 1.2;
}

.hero-content h2 {
    color: var(--white);
    font-size: 1.75rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
    text-shadow: 1px 1px 4px rgba(0,0,0,0.3);
}

.hero-content .lead {
    font-size: 1.5rem;
    color: rgba(255,255,255,0.9);
}

.hero-content .btn-primary {
    background: linear-gradient(135deg, var(--secondary-color) 0%, #ff8833 100%);
    border: 2px solid transparent;
    padding: 1rem 2.5rem;
    font-size: 1.125rem;
    font-weight: 600;
    border-radius: 50px;
    box-shadow: 0 4px 20px rgba(249, 115, 22, 0.4);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.hero-content .btn-primary::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
    transition: left 0.5s ease;
}

.hero-content .btn-primary:hover::before {
    left: 100%;
}

.hero-content .btn-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 30px rgba(249, 115, 22, 0.6);
    background: linear-gradient(135deg, #ff8833 0%, var(--secondary-color) 100%);
}

.hero-content .btn-outline-light {
    border: 2px solid var(--white);
    padding: 1rem 2.5rem;
    font-size: 1.125rem;
    font-weight: 600;
    border-radius: 50px;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
    background: rgba(255,255,255,0.1);
}

.hero-content .btn-outline-light:hover {
    background-color: var(--white);
    color: var(--primary-color);
    transform: translateY(-3px);
    box-shadow: 0 6px 30px rgba(255,255,255,0.4);
}

/* ===================================
   Hero Logo (Floating Logo Above Headline)
   Animated logo that floats vertically for visual interest

   FEATURES:
   - Continuous float animation: 3-second infinite loop
   - Responsive sizing: scales from 280px (desktop) to 130px (mobile landscape)
   - Drop shadow: creates depth, changes to orange glow on hover
   - Semi-transparent: 85% opacity for subtle effect

   RESPONSIVE BEHAVIOR:
   Desktop: 280px, Large Tablet: 240px, Tablet: 200px,
   Large Mobile: 220px, Mobile: 190px, Small Mobile: 160px,
   Landscape Mobile: 130px (no animation)
   =================================== */

/* Logo Wrapper: Contains animated logo */
.hero-logo-wrapper {
    margin-bottom: 2rem;                 /* Space below logo */
    animation: floatLogo 3s ease-in-out infinite; /* Continuous vertical float */
}

/* Logo Image: Responsive with shadow and hover effect */
.hero-logo {
    width: 280px;                        /* Default size: desktop */
    max-width: 90vw;                     /* Prevents overflow on small screens */
    height: auto;                        /* Maintains aspect ratio */
    opacity: 0.85;                       /* Subtle transparency */
    filter: drop-shadow(0 8px 20px rgba(0,0,0,0.3)); /* Shadow for depth */
    transition: all 0.4s ease;           /* Smooth hover transitions */
}

/* Hover Effect: Brightens and scales logo with orange glow */
.hero-logo:hover {
    opacity: 1;                          /* Full opacity: more visible */
    transform: scale(1.05);              /* Slight enlargement: 5% */
    filter: drop-shadow(0 12px 30px rgba(249, 115, 22, 0.4)); /* Orange glow */
}

/* Float Animation: Gentle vertical movement */
@keyframes floatLogo {
    0%, 100% {
        transform: translateY(0px);      /* Start/end position: normal */
    }
    50% {
        transform: translateY(-10px);    /* Midpoint: 10px higher */
    }
}

/* ===================================
   RESPONSIVE BREAKPOINTS: Hero Logo
   Scales logo size and adjusts spacing for different screen sizes
   Follows mobile-first approach with decreasing sizes

   STRATEGY:
   - Desktop (≥1200px): Largest logo (280px) - default
   - Large Tablet (992-1199px): Slightly smaller (240px)
   - Tablet (768-991px): Medium size (200px)
   - Large Mobile (576-767px): Larger for better visibility (220px)
   - Mobile (400-575px): Standard mobile size (190px)
   - Small Mobile (≤400px): Smallest size (160px)
   - Landscape Mobile: Minimal size (130px), no animation
   =================================== */

/* Large tablets and small desktops (992-1199px) */
@media (max-width: 1199px) {
    .hero-logo {
        width: 240px;                    /* Slightly smaller than desktop */
    }
}

/* Tablets (768-991px) */
@media (max-width: 991px) {
    .hero-logo {
        width: 200px;                    /* Medium size for tablets */
    }

    .hero-logo-wrapper {
        margin-bottom: 1.5rem;           /* Reduced bottom margin */
    }
}

/* Large phones and small tablets (576-767px) */
/* Note: Larger than smaller mobile for better visibility */
@media (max-width: 767px) {
    .hero-logo {
        width: 220px;                    /* Intentionally larger for prominence */
    }

    .hero-logo-wrapper {
        margin-bottom: 1.5rem;
        /* Mobile-specific float animation: smaller movement */
        animation: floatLogoMobile 3s ease-in-out infinite;
    }

    .hero-content {
        padding-top: 100px;              /* Less padding on mobile */
    }

    /* Mobile Float Animation: Reduced movement for smaller screens */
    @keyframes floatLogoMobile {
        0%, 100% {
            transform: translateY(0px);
        }
        50% {
            transform: translateY(-6px); /* Only 6px movement vs 10px on desktop */
        }
    }
}

/* Small phones (400-575px) */
@media (max-width: 575px) {
    .hero-logo {
        width: 190px;                    /* Standard mobile size */
    }

    .hero-logo-wrapper {
        margin-bottom: 1.25rem;          /* Slightly less margin */
    }

    .hero-content {
        padding-top: 90px;               /* Reduced top padding */
    }
}

/* Very small phones (≤400px) */
@media (max-width: 400px) {
    .hero-logo {
        width: 160px;                    /* Smallest logo size */
    }

    .hero-logo-wrapper {
        margin-bottom: 1rem;             /* Minimal margin */
    }

    .hero-content {
        padding-top: 85px;               /* Minimal top padding */
    }
}

/* Landscape mode on mobile (height ≤500px) */
/* Optimized for horizontal phone orientation */
@media (orientation: landscape) and (max-height: 500px) {
    .hero-logo {
        width: 130px;                    /* Very small for limited vertical space */
    }

    .hero-logo-wrapper {
        margin-bottom: 0.75rem;          /* Minimal spacing */
        animation: none;                 /* Disable animation: saves space */
    }

    .hero-content {
        padding-top: 80px;               /* Compact header spacing */
    }
}

/* ===================================
   4. Services Section
   Card-based layout with animated top border and hover effects

   DESIGN:
   - White cards: clean, professional appearance
   - 16px border radius: modern, friendly feel
   - Animated top border: orange gradient slides in on hover
   - Lift effect: card raises 10px on hover
   - Layered shadows: depth increases on hover

   INTERACTION:
   - Default state: subtle shadow, minimal border
   - Hover state: lifts up, stronger shadow, orange border appears
   - Cubic-bezier timing: smooth, natural motion
   =================================== */

/* Service Card: Base styles */
.service-card {
    background: var(--white);            /* White background for content */
    padding: 2.5rem 2rem;                /* Generous padding: top/bottom, left/right */
    border-radius: 16px;                 /* Rounded corners: modern look */
    box-shadow: 0 4px 20px rgba(0,0,0,0.08); /* Subtle shadow: gentle elevation */
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); /* Smooth transitions */
    border: 1px solid rgba(26, 54, 93, 0.05); /* Very subtle border */
    position: relative;                  /* Positioning context for ::before */
    overflow: hidden;                    /* Clips ::before to card bounds */
}

/* Animated Top Border: Orange gradient line that slides in on hover */
.service-card::before {
    content: '';                         /* Required for pseudo-element */
    position: absolute;                  /* Positioned at top of card */
    top: 0;
    left: 0;
    width: 100%;                         /* Full width of card */
    height: 4px;                         /* Thickness of border line */
    /* Orange gradient: brand color accent */
    background: linear-gradient(90deg, var(--secondary-color), #ff8833);
    transform: scaleX(0);                /* Hidden by default: 0 width */
    transition: transform 0.4s ease;     /* Smooth slide-in animation */
}

/* Hover: Show top border */
.service-card:hover::before {
    transform: scaleX(1);                /* Expand to full width */
}

/* Hover: Lift card and enhance shadow */
.service-card:hover {
    transform: translateY(-10px);        /* Lift up 10px */
    box-shadow: 0 12px 40px rgba(0,0,0,0.15); /* Stronger shadow: more elevation */
    border-color: rgba(249, 115, 22, 0.2); /* Orange tint on border */
}

.service-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 1.5rem;
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: var(--white);
}

.service-card h4 {
    font-size: 1.375rem;
    color: var(--primary-color);
    margin-bottom: 1rem;
}

.service-card p {
    color: var(--text-light);
    margin-bottom: 0;
}

/* ===================================
   5. Portfolio Section (Redesigned)
   Enhanced gallery with flexible 4-column grid system

   LAYOUT:
   - Desktop XL (≥1200px): 4 columns
   - Desktop LG (992-1199px): 3 columns
   - Tablet MD (768-991px): 3 columns
   - Mobile SM (576-767px): 2 columns
   - Mobile XS (<576px): 1 column

   FEATURES:
   - Category filtering with smooth transitions
   - Image zoom and overlay on hover
   - Responsive card heights with aspect ratio
   - Orange border glow on hover
   =================================== */


/* Single combined gallery carousel wrapper */
.gallery-single-carousel {
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 24px rgba(0,0,0,0.1);
    border: 1px solid rgba(0,0,0,0.07);
}

/* Category badge on each slide */
.slide-cat-badge {
    display: inline-block;
    background: var(--primary-color);
    color: white;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.2rem 0.65rem;
    border-radius: 20px;
    margin-bottom: 0.5rem;
}

/* Carousel */
.gallery-carousel {
    background: #0f1923;
    position: relative;
}

.gallery-slide {
    display: flex;
    flex-direction: column;
}

.gallery-slide-img {
    width: 100%;
    height: 520px;
    object-fit: contain;
    background: #0f1923;
    display: block;
}

.gallery-slide-caption {
    background: var(--white);
    padding: 1.25rem 5rem 1.25rem 1.75rem;
    position: relative;
    border-top: 3px solid var(--secondary-color);
    min-height: 110px;
}

.slide-counter {
    position: absolute;
    top: 1.1rem;
    right: 1.75rem;
    font-size: 0.78rem;
    color: var(--text-light);
    font-weight: 600;
    background: var(--accent-color);
    padding: 0.2rem 0.65rem;
    border-radius: 20px;
    white-space: nowrap;
}

.gallery-slide-caption h4 {
    font-size: 1.15rem;
    color: var(--primary-color);
    margin-bottom: 0.4rem;
    font-weight: 700;
}

.gallery-slide-caption p {
    font-size: 0.9rem;
    color: var(--text-light);
    margin: 0;
    line-height: 1.7;
}

.gallery-carousel .carousel-control-prev,
.gallery-carousel .carousel-control-next {
    height: calc(100% - 110px);
    width: 70px;
    opacity: 0.75;
}

.gallery-carousel .carousel-control-prev-icon,
.gallery-carousel .carousel-control-next-icon {
    background-color: rgba(26,54,93,0.7);
    border-radius: 50%;
    width: 48px;
    height: 48px;
    background-size: 50%;
}

/* ===================================
   RESPONSIVE: Gallery Carousel Adjustments
   =================================== */

@media (max-width: 991px) {
    .gallery-slide-img {
        height: 400px;
    }

}

@media (max-width: 767px) {
    .gallery-slide-img {
        height: 300px;
    }

    .gallery-slide-caption {
        padding: 1rem 4.5rem 1rem 1.25rem;
    }

    .gallery-slide-caption h4 {
        font-size: 1rem;
    }
}

@media (max-width: 575px) {
    .gallery-slide-img {
        height: 240px;
    }

}

/* ===================================
   6. Why Choose Us Section
   =================================== */

.bg-primary {
    background: linear-gradient(135deg, var(--primary-color), #2D4A70) !important;
}

.why-us-card {
    padding: 1.5rem;
    transition: all 0.3s ease;
}

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

.why-us-card:hover .why-us-icon {
    transform: scale(1.1) rotate(5deg);
}

.why-us-icon {
    width: 70px;
    height: 70px;
    margin: 0 auto 1.5rem;
    background: rgba(255,255,255,0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: var(--secondary-color);
    transition: all 0.4s ease;
    border: 2px solid rgba(249, 115, 22, 0.3);
}

.why-us-card h4 {
    font-size: 1.25rem;
    color: var(--white);
    margin-bottom: 1rem;
}

.why-us-card p {
    color: rgba(255,255,255,0.8);
    margin-bottom: 0;
}

/* ===================================
   7. Testimonials Section
   =================================== */

.testimonial-card {
    background: var(--white);
    padding: 3rem 2rem;
    border-radius: 16px;
    box-shadow: 0 4px 30px rgba(0,0,0,0.1);
    position: relative;
    border: 1px solid rgba(26, 54, 93, 0.08);
}

.testimonial-card::before {
    content: '\201C';
    position: absolute;
    top: 1rem;
    left: 1.5rem;
    font-size: 4rem;
    color: rgba(249, 115, 22, 0.1);
    font-family: Georgia, serif;
    line-height: 1;
}

.testimonial-stars {
    color: var(--secondary-color);
    font-size: 1.5rem;
}

.testimonial-text {
    font-size: 1.125rem;
    font-style: italic;
    color: var(--text-dark);
    margin-bottom: 1.5rem;
    line-height: 1.8;
}

.testimonial-name {
    font-size: 1.25rem;
    color: var(--primary-color);
    margin-bottom: 0.25rem;
}

.testimonial-project {
    color: var(--text-light);
    font-size: 0.938rem;
    margin-bottom: 0;
}

#testimonialsCarousel .carousel-control-prev,
#testimonialsCarousel .carousel-control-next {
    width: 50px;
    height: 50px;
    background-color: var(--primary-color);
    border-radius: 50%;
    top: 50%;
    transform: translateY(-50%);
    opacity: 0.8;
}

#testimonialsCarousel .carousel-control-prev {
    left: -25px;
}

#testimonialsCarousel .carousel-control-next {
    right: -25px;
}

#testimonialsCarousel .carousel-control-prev:hover,
#testimonialsCarousel .carousel-control-next:hover {
    opacity: 1;
}

/* ===================================
   8. CTA Section
   =================================== */

.cta-section {
    position: relative;
    padding: 100px 0;
    background-image: url('https://images.unsplash.com/photo-1581858726788-75bc0f6a952d?w=1600');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

.cta-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--overlay-dark);
}

.cta-section .container {
    position: relative;
    z-index: 1;
}

.cta-section .btn-light {
    background-color: var(--white);
    color: var(--primary-color);
    border: 2px solid var(--white);
    padding: 1rem 2.5rem;
    font-size: 1.125rem;
    font-weight: 600;
    border-radius: 50px;
}

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

.cta-section .btn-outline-light {
    border: 2px solid var(--white);
    padding: 1rem 2.5rem;
    font-size: 1.125rem;
    font-weight: 600;
    border-radius: 50px;
}

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

/* ===================================
   9. Contact Section
   =================================== */

.contact-form-wrapper {
    background: var(--white);
    padding: 2.5rem;
    border-radius: 12px;
    box-shadow: 0 4px 30px rgba(0,0,0,0.1);
}

.contact-form .form-label {
    font-weight: 600;
    color: var(--primary-color);
    margin-bottom: 0.5rem;
}

.contact-form .form-control,
.contact-form .form-select {
    border: 2px solid #E2E8F0;
    padding: 0.75rem 1rem;
    border-radius: 8px;
    transition: var(--transition);
}

.contact-form .form-control:focus,
.contact-form .form-select:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 0.2rem rgba(26, 54, 93, 0.1);
}

.contact-form .btn-primary {
    background-color: var(--secondary-color);
    border: none;
    padding: 1rem;
    font-weight: 600;
    border-radius: 8px;
}

.contact-form .btn-primary:hover {
    background-color: var(--primary-color);
}

.contact-info {
    padding: 2rem 1rem;
}

.contact-info-item {
    display: flex;
    align-items: flex-start;
    margin-bottom: 1.25rem;
}

.contact-icon {
    width: 50px;
    height: 50px;
    background: var(--primary-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 1rem;
    flex-shrink: 0;
}

.contact-icon i {
    font-size: 1.5rem;
    color: var(--white);
}

.contact-info-item h5 {
    font-size: 1.125rem;
    color: var(--primary-color);
    margin-bottom: 0.5rem;
}

.contact-info-item p {
    color: var(--text-light);
    margin-bottom: 0;
}

.contact-info-item a {
    color: var(--text-light);
}

.contact-info-item a:hover {
    color: var(--secondary-color);
}

.social-links {
    margin-top: 1.5rem;
}

.social-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 45px;
    height: 45px;
    background: var(--primary-color);
    color: var(--white);
    border-radius: 50%;
    font-size: 1.25rem;
    margin-right: 0.5rem;
    transition: var(--transition);
}

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

.map-container {
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
}

/* ===================================
   10. Footer
   =================================== */

.footer {
    background-color: var(--primary-color);
    color: var(--white);
    padding: 60px 0 20px;
}

.footer-heading {
    color: var(--white);
    font-size: 1.25rem;
    margin-bottom: 1.5rem;
    font-weight: 600;
}

/* Footer logo (small circular white background) */
.footer-logo {
    width: 64px;
    height: 64px;
    background: #ffffff;
    padding: 8px;
    border-radius: 50%;
    object-fit: contain;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

@media (max-width: 767px) {
    .footer-logo {
        width: 52px;
        height: 52px;
        padding: 6px;
    }
}

.footer-text {
    color: rgba(255,255,255,0.8);
    line-height: 1.8;
}

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

.footer-links li {
    margin-bottom: 0.75rem;
}

.footer-links a {
    color: rgba(255,255,255,0.8);
    transition: var(--transition);
}

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

.footer-social {
    display: flex;
    gap: 0.75rem;
}

.footer-social-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: rgba(255,255,255,0.1);
    color: var(--white);
    border-radius: 50%;
    font-size: 1.125rem;
    transition: var(--transition);
}

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

.footer-divider {
    border-color: rgba(255,255,255,0.2);
    margin: 2rem 0;
}

.footer-copyright {
    color: rgba(255,255,255,0.7);
    font-size: 0.938rem;
}

.footer-link {
    color: rgba(255,255,255,0.7);
    margin: 0 0.5rem;
}

.footer-link:hover {
    color: var(--secondary-color);
}

/* ===================================
   11. Scroll to Top Button
   =================================== */

.scroll-top {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 50px;
    height: 50px;
    background: var(--secondary-color);
    color: var(--white);
    border: none;
    border-radius: 50%;
    font-size: 1.5rem;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transition: var(--transition);
    z-index: 1000;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}

.scroll-top.show {
    opacity: 1;
    visibility: visible;
}

.scroll-top:hover {
    background: var(--primary-color);
    transform: translateY(-5px);
}

/* ===================================
   12. Portfolio Modal
   =================================== */

.modal-content {
    border-radius: 12px;
    border: none;
}

.modal-header {
    background-color: var(--primary-color);
    color: var(--white);
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
}

.modal-header .btn-close {
    filter: invert(1);
}

.modal-body img {
    border-radius: 8px;
}

/* ===================================
   13. Animations
   =================================== */

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ===================================
   14. Responsive Styles
   =================================== */

@media (max-width: 991px) {
    .section-title {
        font-size: 2rem;
    }
    
    .hero-content h1 {
        font-size: 2.5rem;
    }
    
    .hero-content .lead {
        font-size: 1.25rem;
    }
    
    #testimonialsCarousel .carousel-control-prev,
    #testimonialsCarousel .carousel-control-next {
        display: none;
    }
}

@media (max-width: 767px) {
    :root {
        --section-padding: 60px 0;
    }
    
    .section-title {
        font-size: 1.75rem;
    }
    
    .hero-content h1 {
        font-size: 2rem;
    }
    
    .hero-content .lead {
        font-size: 1.125rem;
    }
    
    .hero-content .btn-primary,
    .hero-content .btn-outline-light {
        padding: 0.75rem 1.5rem;
        font-size: 1rem;
    }
    
    .service-icon {
        width: 60px;
        height: 60px;
        font-size: 1.5rem;
    }
    
    .service-card h4 {
        font-size: 1.125rem;
    }
    
    .contact-form-wrapper {
        padding: 1.5rem;
        margin-bottom: 2rem;
    }
    
    .scroll-top {
        bottom: 20px;
        right: 20px;
        width: 45px;
        height: 45px;
    }
}

/* Additional responsive refinements */
@media (max-width: 991px) {
    .navbar-toggler {
        border-color: rgba(249, 115, 22, 0.5);
    }

    .navbar-toggler:hover {
        border-color: var(--secondary-color);
        background: rgba(249, 115, 22, 0.1);
    }
}

@media (max-width: 575px) {
    .navbar-brand {
        padding-left: 0.5rem;
    }

    .brand-text {
        font-size: 0.95rem;
    }

    .brand-subtext {
        font-size: 0.65rem;
    }
}
/* Mobile menu enhancements */
@media (max-width: 991px) {
    .navbar-collapse {
        margin-top: 1rem;
        background: rgba(26, 54, 93, 0.98);
        border-radius: 12px;
        padding: 1rem;
        box-shadow: 0 4px 20px rgba(0,0,0,0.2);
        border: 1px solid rgba(255,255,255,0.1);
    }

    .navbar-collapse.show {
        animation: slideDown 0.3s ease;
    }

    @keyframes slideDown {
        from {
            opacity: 0;
            transform: translateY(-10px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
}


/* ===================================
   15. Utilities
   =================================== */

.bg-light {
    background-color: var(--accent-color) !important;
}

.text-primary {
    color: var(--primary-color) !important;
}

.text-secondary {
    color: var(--secondary-color) !important;
}

/* Loading Spinner for Form */
.spinner-border-sm {
    width: 1rem;
    height: 1rem;
    border-width: 0.15em;
}

/* Landscape orientation enhancements */
@media (orientation: landscape) and (max-width: 1024px) and (max-height: 500px) {
    #mainNav {
        padding: 0.35rem 0;
    }

    #mainNav .logo-background,
    .navbar .logo-background,
    .navbar-brand .logo-background {
        width: 55px;
        height: 55px;
    }

    .brand-text {
        font-size: 0.85rem;
    }

    .brand-subtext {
        display: none;
    }
}

/* Ensure contact submit button is full-width on small screens for better tap targets */
@media (max-width: 767px) {
    .contact-form .btn-primary {
        width: 100%;
        display: block;
    }
}