:root {
            --primary-color: #c22725; /* Dark Red */
            --secondary-color: black;
            --background-light: #f8f9fa; /* Light Gray */
            /* Modal-specific colors (Adjusted to match primary color) */
            --modal-primary-color: #c22725; /* Dark Red */
            --modal-success-color: #198754;
            --modal-accent-border: #ffc107; /* Yellow for contrast */
        }

        /* General Styling */
        body {
            font-family: 'Montserrat', sans-serif;
            color: var(--secondary-color);
        }
        section {
            padding: 80px 0;
        }
            .navbar-expand-lg .navbar-nav .nav-link {
      
        padding: 8px 23px;
        font-weight: 600;
    }
    
    .btn-warning{
        padding: 8px 25px;
        
    }
    
        .text-primary-custom {
            color: var(--primary-color) !important;
        }

        /* Hero/Header Section Style */
        #hero {
            background-color: var(--background-light); 
            min-height: 500px;
            display: flex;
            align-items: center;
            text-align: center;
        }
        
        /* Custom Button Styling */
        .btn-custom-primary {
            background-color: var(--primary-color);
            border-color: var(--primary-color);
            color: white;
            transition: background-color 0.3s, border-color 0.3s;
        }
        .btn-custom-primary:hover {
            background-color: #a02020; /* Slightly darker on hover */
            border-color: #a02020;
            color: white;
        }
        /* CTA Banner */
        .cta-banner {
            background-color: var(--primary-color);
            color: white;
        }
        
        /* Feature Card (Services) Styling */
        .expertise-card {
            border: 1px solid #e9ecef;
            padding: 30px;
            text-align: center;
            border-radius: 8px;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
            background-color: white;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }
        .expertise-card .icon-wrapper {
            margin-bottom: 20px;
            font-size: 2.5rem; /* Large icon size */
            color: var(--primary-color);
        }
        .expertise-card h3 {
            font-size: 1.2rem; /* Reduced font size to fit long titles */
            font-weight: 700;
            color: var(--primary-color);
            margin-bottom: 15px;
            min-height: 40px; /* Ensure space for two lines */
        }
        .expertise-card p {
            font-size: 0.95rem;
            color: #555;
            flex-grow: 1; /* Allows text to push button to bottom */
        }

        /* Footer Styling */
        .footer-wrapper {
            background-color: var(--secondary-color);
            color: #ddd;
        }
        .footer-wrapper a {
            color: #bbb;
            text-decoration: none;
            transition: color 0.3s;
        }
        .footer-wrapper a:hover {
            color: var(--primary-color);
        }
        .footer-bottom {
            background-color: #111;
            padding: 15px 0;
            font-size: 0.85rem;
            color: #999;
        }
        .contact-panel {
            background-color: #222;
            padding: 25px;
            border-radius: 6px;
        }
        .contact-panel h5 {
            color: var(--primary-color);
        }
        .contact-panel .contact-item {
            display: flex;
            align-items: flex-start;
            margin-bottom: 15px;
        }
        .contact-panel .contact-item i {
            color: var(--primary-color);
            margin-right: 10px;
            font-size: 1.2rem;
            padding-top: 3px;
        }
        .contact-panel .social-icons a {
            color: #fff;
            margin-right: 15px;
            font-size: 1.5rem;
        }
        .contact-panel .social-icons a:hover {
            color: var(--primary-color);
        }
        
        /* Fixed Footer/Button Style */
        #back-to-top {
            display: none;
            position: fixed;
            bottom: 20px;
            right: 20px;
            z-index: 1000;
            background-color: var(--primary-color);
            border-color: var(--primary-color);
        }
        #back-to-top:hover {
            background-color: #a02020;
            border-color: #a02020;
        }


        /* === MODAL-SPECIFIC STYLES === */
        .modal-content {
            border-radius: 12px; 
            box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25);
            overflow: hidden;
            border: none;
        }
        .modal-header {
            background-color: var(--modal-primary-color);
            color: white;
            border-bottom: 5px solid var(--modal-accent-border); 
            border-top-left-radius: 12px;
            border-top-right-radius: 12px;
        }
        .modal-header .btn-close {
            filter: invert(1);
        }
        .modal-dialog {
            max-width: 550px; 
        }
        #formStep form {
            background-color: #ffffff;
            padding: 15px 20px;
            border-radius: 8px;
            border: 1px solid #e9ecef;
        }
        .mb-2 { margin-bottom: 0.5rem !important; }
        .mb-3 { margin-bottom: 0.7rem !important; }
        .mb-4 { margin-bottom: 1.0rem !important; }

        .form-label {
            font-weight: 700;
            color: var(--modal-primary-color); 
            margin-bottom: 0.2rem; 
            font-size: 0.9rem; 
        }
        .form-control-lg {
            padding: 0.5rem 1rem; 
            font-size: 1rem;
            border-radius: 6px;
        }
        .btn-custom-submit {
            background-color: var(--modal-primary-color);
            border-color: var(--modal-primary-color);
            font-weight: bold;
            transition: background-color 0.3s;
        }
        .btn-custom-submit:hover {
            background-color: #a02020; 
            border-color: #a02020;
        }
        .video-container {
            position: relative;
            width: 100%;
            padding-top: 56.25%;
            border-radius: 8px;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
            overflow: hidden;
            background-color: #000;
        }
        .video-container video {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }
        #finalStep {
            background-color: #e6f7f7; 
            border: 2px solid var(--modal-primary-color); 
            border-radius: 10px;
            margin: 10px 0;
        }
        #finalStep .bi-check-circle-fill {
            fill: var(--modal-success-color);
        }
        
        @media (max-width: 767.98px) { /* Targets screens smaller than 'md' (768px) */
        
        .container{
            padding: 0px 30px;
        }
    
    /* 1. Adjust Section Padding on Mobile */
    section {
        padding: 50px 0; /* Reduce vertical padding on sections */
    }
    
    /* 2. Adjust Hero Section Heading Size (display-5 is too big) */
    #hero .display-5 {
        font-size: 2rem; /* Smaller size for main headline */
        line-height: 1.2;
    }
    
    /* 3. Adjust General Section Heading Size (h2 is too big) */
    h2 {
        font-size: 1.75rem !important; /* Smaller size for section headlines */
    }
    
    /* 4. Adjust Hero Min-Height for Mobile */
    #hero {
        min-height: 400px; /* Reduce minimum height on mobile */
        padding-top: 50px;
        padding-bottom: 50px;
    }
    
    /* 5. Center Service Cards on small screens (they already stack, this is just for text alignment) */
    .expertise-card {
        padding: 20px;
    }
    
    /* 6. Footer Contact Panel adjustment for better flow */
    .contact-panel {
        padding: 20px;
    }
    
    /* 7. Ensure Hero/CTA buttons are full width */
    #hero-button, #final-button {
        width: 100%;
        font-size: 18px;
    }
    .navbar-expand-lg .navbar-nav .nav-link {
    padding: 12px 0px;
    
}
body{
    padding-top: 50px;
}
.sticky-top {
    
    position: fixed;
    width: 0;
    z-index: 1020;
    width: 100%;
}
.btn-warning {
   
    margin-top: 20px;
}
    .navbar-toggler:focus {
    
    box-shadow: unset;
}
}