/* --- Color Variables --- */
:root {
    --dark-blue: #022a4d; /* Primary Color for Headings/Text */
    --orange-warning: #ff9900; /* Accent Color for Buttons/Highlights */
    --light-gray: #f8f9fa; /* Background Color */
    --text-color: #343a40;
}

/* --- Global Resets & Typography --- */
body {
    font-family: Arial, sans-serif;
    color: var(--text-color);
    background-color: #fff;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--dark-blue);
    font-weight: 700;
}

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

.bg-dark-blue {
    background-color: var(--dark-blue) !important;
}

/* --- Header & Navigation --- */
.main-header {
    background-color: #fff;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.header-top-row {
    background-color: var(--dark-blue);
}

.top-phone-link {
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    font-size: 1.1rem;
}

/* Logo Styling */
.logo-text-blue {
    color: var(--dark-blue);
    font-weight: 900;
    font-size: 1.8rem;
}

.logo-text-orange {
    color: var(--orange-warning);
    font-weight: 900;
    font-size: 1.8rem;
}

/* Navigation Links */
.main-nav .nav-link {
    color: var(--dark-blue);
    font-weight: 600;
    transition: color 0.2s, border-bottom 0.2s;
    border-bottom: 2px solid transparent;
}

.main-nav .nav-link:hover,
.main-nav .nav-link.active-nav {
    color: var(--orange-warning);
    border-bottom: 2px solid var(--orange-warning);
}

.quote-btn {
    background-color: var(--orange-warning);
    color: #fff;
    font-weight: 700;
    border: none;
    padding: 8px 25px;
    transition: background-color 0.3s;
}

.quote-btn:hover {
    background-color: #e68a00; /* Slightly darker orange */
    color: #fff;
}

/* Mobile Nav Toggle */
.navbar-toggler {
    border: 1px solid var(--dark-blue);
    color: var(--dark-blue);
    padding: 5px 10px;
}
.navbar-toggler:focus {
    box-shadow: none;
}

/* --- Hero Section (Index Page) --- */
.hero-section {
    position: relative;
    background: linear-gradient(rgba(0, 42, 77, 0.6), rgba(0, 42, 77, 0.6)), url('images/mover-hero.jpg') no-repeat center center;
    background-size: cover;
    height: 70vh; /* Adjust height as needed */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #fff;
}

.hero-content h1 {
    color: #fff;
    font-size: 3rem;
    font-weight: 900;
}

.hero-content p {
    font-size: 1.3rem;
    margin-bottom: 30px;
}

/* --- Standard Content Sections --- */
.section-title {
    font-size: 2.2rem;
    color: var(--dark-blue);
    border-bottom: 3px solid var(--orange-warning);
    padding-bottom: 10px;
    margin-bottom: 30px;
    display: inline-block;
}

/* --- Service Card Styling (Used across Services, About, Index) --- */
.service-card {
    transition: transform 0.3s, box-shadow 0.3s;
    border: 1px solid #ddd;
    border-top: 5px solid var(--orange-warning);
    border-radius: 8px;
    padding: 20px;
    background-color: #fff;
    height: 100%; /* Ensures equal height in rows */
}

.service-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
}

.service-card i {
    color: var(--dark-blue);
    font-size: 3rem;
    margin-bottom: 15px;
}

/* --- Gallery Page Styling --- */
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
}

.gallery-item img {
    width: 100%;
    height: 300px;
    object-fit: cover; /* Ensures images cover the area without distortion */
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s;
}

.gallery-item img:hover {
    transform: scale(1.03);
}

/* --- Contact Page Styling --- */
.map-container {
    border: 5px solid var(--dark-blue);
}

.form-control:focus, .form-select:focus {
    border-color: var(--orange-warning);
    box-shadow: 0 0 0 0.25rem rgba(255, 153, 0, 0.25);
}

/* --- Footer --- */
footer {
    background-color: var(--dark-blue) !important;
}

footer a {
    color: var(--orange-warning);
    text-decoration: none;
}


/* ==================================== */
/* 1. Left Side Floating Contact Icons CSS */
/* ==================================== */

/* Container for Left Side Fixed Contact Icons */
.fixed-contact-left {
    position: fixed;
    top: 50%; /* स्क्रीन के बीचों-बीच (ऊपर से) */
    left: 20px; /* बाएँ किनारे से 20px अंदर */
    transform: translateY(-50%); /* ऊँचाई के हिसाब से सेंटर करें */
    z-index: 1050; /* सुनिश्चित करें कि यह सभी चीज़ों के ऊपर हो */
    display: flex;
    flex-direction: column; /* आइकॉन्स को एक के नीचे एक रखें */
    gap: 15px; /* आइकॉन्स के बीच की दूरी */
}

/* Base style for all floating buttons */
.fixed-contact-left a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 55px; /* बटन की चौड़ाई */
    height: 55px; /* बटन की ऊँचाई */
    border-radius: 50%; /* गोल आकार */
    text-decoration: none;
    color: white; /* आइकॉन्स का रंग सफ़ेद */
    transition: transform 0.3s ease; /* स्मूथ एनिमेशन */
}

.fixed-contact-left a:hover {
    transform: scale(1.1); /* हॉवर करने पर थोड़ा बड़ा हो जाए */
}

/* 1. Phone specific style (Red) */
.phone-float-btn {
    background-color: #DD4B39; 
}

/* 2. WhatsApp specific style (Green) */
.whatsapp-float-btn {
    background-color: #25D366; 
}

/* 3. Instagram specific style (Pink/Purple Gradient) */
.insta-float-btn {
    background-color: #E1306C; 
    /* Instagram का आकर्षक Gradient इफेक्ट */
    background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
}