/* public/css/style.css */

/* General Body Styles */
html, body {
    height: 100%; /* Full height for body */
    margin: 0; /* Remove default margin */
}

body {
    display: flex;
    flex-direction: column; /* Stack children vertically */
    font-family: 'Arial', sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f8f9fa;
}

/* Main Content */
main.container {
    margin-left: auto;
    margin-right: auto;
    padding-left: 15px; /* Adjust if needed */
    padding-right: 15px; /* Adjust if needed */
}

/* For adjusting the margins for top and bottom only */
main {
    margin-top: 5rem; /* Adjust as needed */
    margin-bottom: 5rem; /* Adjust as needed */
    flex: 1; /* Allow main to grow and fill the space */
}

/* Header Section */
header {
    background-color: #007bff;
    padding: 1rem 0;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    position: relative;
}

header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

header h2.logo {
    color: white;
}
header a {
    text-decoration: none;
}

/* Header Links */
header nav a {
    color: #fff;
    text-decoration: none;
    margin: 0 10px;
    font-size: 20px;
}

header nav a:hover {
    text-decoration: none;
}

/* Dropdown Styles */
header .dropdown-menu {
    background-color: #f8f9fa;
    border: 1px solid #ddd;
}

header .dropdown-item {
    margin: 0;
    font-size: large;
    color: #007bff;
    text-decoration: none;
}

header .dropdown-item:hover {
    background-color: #e9ecef;
    color: #0056b3;
}

/* Icons */
.material-icons {
    font-size: 24px;
    vertical-align: middle;
}

/* Tooltip Styles */
.tooltip-inner {
    background-color: #000;
    color: #fff;
}

/* Icons */
.material-icons {
    font-size: 24px; /* Icon size */
    vertical-align: middle;
}


/* Hero Section */
.hero-section {
    background-color: #e9ecef;
    border-radius: 8px;
}

.hero-section h2 {
    font-size: 1.5rem;
}

.highlighted__text {
    font-weight: bold; 
    color: #2196f3; 
    font-family: inherit;
}

.hero-section p {
    font-size: 1.25rem;
}

.hero-section .btn-primary {
    background-color: #007bff;
    border-color: #007bff;
}

.hero-section .btn-primary:hover {
    background-color: #0056b3;
    border-color: #004085;
}

/* Service Boxes */
.service-box {
    border: 1px solid #ddd;
    border-radius: 8px;
    background-color: #fff;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Shadow for boxes */
    padding: 60px 10px 20px 10px;
    transition: box-shadow 0.3s ease;
    margin-bottom: 20px;
    text-align: center; /* Center align text and content */
    height: 400px; /* Fixed height for consistency */
    display: flex;
    flex-direction: column;
}

.service-box:hover {
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3); /* Enhanced shadow on hover */
}

.service-box .service-icon {
    font-size: 50px; /* Adjust icon size */
}

.service-box h5 {
    margin-top: 10px; /* Space between icon and title */
    margin-bottom: 15px; /* Space between title and content */
}

/* Button group with two buttons side by side and the third below */
.service-box .btn-group {
    display: flex;
    justify-content: center;
    flex-wrap: wrap; /* Allow buttons to wrap if they exceed the row width */
    gap: 10px; /* Space between buttons */
    margin-bottom: 10px;
}

.service-box .btn-custom {
    background-color: #9900ef; /* Background color for buttons */
    color: #fff; /* Text color for buttons */
    font-size: 0.9rem;
    text-decoration: none;
    border: none; /* Remove border */
    border-radius: 2px; /* Rounded corners */
    border-top-right-radius: 2px !important;
    border-bottom-right-radius: 2px !important;
    border-top-left-radius: 2px !important;
    border-bottom-left-radius: 2px !important;
    padding: 9px 5px; /* Padding inside buttons */
    flex: 0 0 45%; /* Buttons will take up 45% of the container, allowing two side by side */
    transition: background-color 0.3s ease; /* Smooth background color transition */
    text-align: center;
}

.service-box .btn-custom:hover {
    background-color: #7a00c1; /* Darker shade on hover */
}

.service-box .staff-login {
    display: block;
    margin-top: 20px;
    color: #9900ef; /* Match the button color */
    text-decoration: none;
}

.service-box .staff-login:hover {
    text-decoration: underline;
}

/* Specific color styles for different services */

/* Property Tax */
.property-tax-icon {
    color: #9900ef; /* Icon color */
}

.property-tax-btn {
    background-color: #9900ef !important;
}

.property-tax-btn:hover {
    background-color: #7a00c1 !important; /* Darker shade on hover */
}

/* Complain */
.complain-icon {
    color: #fe2e2e; /* Icon color */
}

.complain-btn {
    background-color: #fe2e2e !important;
}

.complain-btn:hover {
    background-color: #c82626 !important; /* Darker shade on hover */
}

/* Water Connection */
.water-connection-icon {
    color: #1976d2; /* Icon color */
}

.water-connection-btn {
    background-color: #1976d2 !important;
}

.water-connection-btn:hover {
    background-color: #0f5ba2 !important; /* Darker shade on hover */
}

/* e-Auction */
.e-auction-icon {
    color: #009688; /* Icon color */
}

.e-auction-btn {
    background-color: #009688 !important;
}

.e-auction-btn:hover {
    background-color: #00695c !important; /* Darker shade on hover */
}

/* Advertisement */
.advertisement-icon {
    color: #ff6900; /* Icon color */
}

.advertisement-btn {
    background-color: #ff6900 !important;
}

.advertisement-btn:hover {
    background-color: #e05c00 !important; /* Darker shade on hover */
}

/* Temporary Construction */
.temporary-construction-icon {
    color: #9900ef; /* Icon color */
}

.temporary-construction-btn {
    background-color: #9900ef !important; /* Background color for buttons */
}

.temporary-construction-btn:hover {
    background-color: #7a00c1 !important; /* Darker shade on hover */
}

/* Street Vendor Licence */
.street-vendor-icon {
    color: #009688; /* Icon color */
}

.street-vendor-btn {
    background-color: #009688 !important;
}

.street-vendor-btn:hover {
    background-color: #00695c !important; /* Darker shade on hover */
}

/* Pension Scheme */
.pension-scheme-icon {
    color: #00A300; /* Icon color */
}

.pension-scheme-btn {
    background-color: #00A300 !important;
}

.pension-scheme-btn:hover {
    background-color: #007a00 !important; /* Darker shade on hover */
}

/* Service Request & Other Payment */
.service-request-icon {
    color: #e91e63; /* Icon color */
}

.service-request-btn {
    background-color: #e91e63 !important;
}

.service-request-btn:hover {
    background-color: #c2185b !important; /* Darker shade on hover */
}

/* Suggestion & Queries */
.suggestion-icon {
    color: #f57c00; /* Icon color */
}

.suggestion-btn {
    background-color: #f57c00 !important;
}

.suggestion-btn:hover {
    background-color: #e65100 !important; /* Darker shade on hover */
}



/* Footer Section */
footer {
    background-color: #333;
    color: #fff;
    padding: 2rem 0;
    width: 100%;
    text-align: center;
    font-size: 14px;
}

footer a {
    color: #fff;
    text-decoration: none;
}

footer a:hover {
    text-decoration: underline;
}

footer .list-unstyled {
    padding-left: 0;
    list-style: none;
}

footer .list-unstyled li {
    margin-bottom: 5px;
}

footer hr {
    border-color: rgba(255, 255, 255, 0.2);
}


/* Sidebar (if used) */
aside {
    background-color: #f8f9fa;
    padding: 15px;
    border: 1px solid #ddd;
}

aside ul {
    padding-left: 0;
}

aside li {
    margin-bottom: 15px;
}

/* Utility Classes */
.mt-3 {
    margin-top: 1rem;
}



/* Citizen Login Page */
.card-header {
    font-size: 1.5rem;
    font-weight: 600;
}

.card {
    border-radius: 10px;
}

.btn-primary {
    background-color: #007bff;
    border-color: #007bff;
}

.btn-primary:hover {
    background-color: #0056b3;
    border-color: #004085;
}

.btn-outline-primary {
    border-color: #007bff;
    color: #007bff;
}

.btn-outline-primary:hover {
    background-color: #007bff;
    color: #fff;
}



/* Style for Complaints */
.form-group {
    margin-bottom: 1.5rem;
}

.form-group select {
    /* Positioning and appearance */
    appearance: none;  /* Remove default arrow */
    -webkit-appearance: none;
    -moz-appearance: none;
    padding-right: 30px; /* Make space for the arrow */
    background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTEiIGhlaWdodD0iNyIgdmlld0JveD0iMCAwIDExIDciIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTEgMWw0LjUgNEw5IDEiIHN0cm9rZT0iIzAwMCIgc3Ryb2tlLXdpZHRoPSIxLjUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIvPjwvc3ZnPg==');
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 10px 7px;
}

/* For consistency across browsers */
.form-group select:focus {
    outline: none;
    border-color: #007bff; /* Optional: Add focus color */
}


.mandatory-note {
    color: red;
}

.form-control.custom-select {
    border-radius: .25rem;
    background-color: #f8f9fa;
    border: 1px solid #ced4da;
    height: auto;
}

.form-control.custom-select option {
    padding: 10px;
}

.form-group.captcha-wrapper {
    display: flex;
    align-items: center;
}

.captcha-label {
    display: flex;
    align-items: center;
    font-size: 1rem;
}

.captcha-input {
    width: 100px;
    margin-left: 10px;
    text-align: center;
}

.form-control-file { 
    /* Styles for attachment input */
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
    padding: 0.375rem 0.75rem;
    display: block;
    width: 100%;
}

.is-invalid {
    border: 1px solid red; /* Red border for invalid fields */
    outline: none; /* Remove default focus outline */
}

/* Show feedback when input is invalid */
.is-invalid ~ .invalid-feedback {
    display: block;
}



/* style for Pension Scheme */
.form-section {
    margin-bottom: 20px;
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 5px;
}
.form-section h5 {
    margin-bottom: 15px;
    font-weight: bold;
}

/* style for Temporary Construction */
.table-responsive {
    margin-top: 20px;
}
.form-row {
    display: flex; /* Ensure flexbox is used for layout */
    flex-wrap: wrap; /* Allow wrapping if needed */
}
.page-item.active .page-link {
    background-color: #483D8B !important;
    border-color: #483D8B !important;
}
.update-status{
    font-weight: 700 !important;
}