:root {
    --primary-color: #2A9D8F; /* Teal */
    --accent-color: #E9C46A; /* Gold */
    --dark-grey: #343a40;
    --light-grey: #f8f9fa;
    --white: #ffffff;
}
body {
    font-family: 'Lato', sans-serif;
    background-color: var(--light-grey);
    color: var(--dark-grey);
    padding-top: 56px; /* Adjust for fixed navbar */
}
h1, h2, h3, h4, h5, h6 {
    font-family: 'Poppins', sans-serif;
    color: var(--primary-color);
}
.navbar {
    background-color: var(--white);
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}
.navbar-brand {
    font-weight: 700;
    color: var(--primary-color) !important;
}
.hero-section {
    background-color: var(--primary-color);
    color: var(--white);
    padding: 60px 0;
    text-align: center;
    margin-bottom: 40px;
}
.hero-section h1 {
    color: var(--white);
    font-size: 2.5rem;
    margin-bottom: 15px;
}
 .hero-section p {
    font-size: 1.25rem;
    margin-bottom: 30px;
}
.btn-primary {
    background-color: var(--accent-color);
    border-color: var(--accent-color);
    color: var(--dark-grey);
    font-weight: 700;
}
.btn-primary:hover {
    background-color: #d4b04a; /* Slightly darker gold */
    border-color: #d4b04a;
}
.card {
    margin-bottom: 20px;
    border: none;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
}
.card-header {
    background-color: var(--primary-color);
    color: var(--white);
    font-weight: 600;
}
.card-body i {
    color: var(--primary-color);
    margin-right: 10px;
}
#map {
    height: 300px; /* Adjusted height for card */
    width: 100%;
    border-radius: 0.25rem; /* Match card border radius */
}
.footer {
    background-color: var(--dark-grey);
    color: var(--light-grey);
    padding: 10px 0 !important; /* Further reduced vertical padding */
    margin-top: 40px;
    width: 100vw !important; /* Ensure full viewport width */
    margin-left: calc(50% - 50vw) !important; /* Center element and counteract parent padding */
    box-sizing: border-box !important; /* Include padding in width */
}
.footer a {
    color: var(--accent-color);
    text-decoration: none;
}
.footer a:hover {
    text-decoration: underline;
}
 .card-text {
    word-break: break-all; /* Prevent long strings from overflowing */
}
/* Added padding for grid alignment */
.container {
    padding-left: 15px;
    padding-right: 15px;
}
.row {
    margin-left: -15px;
    margin-right: -15px;
}
.col, .col-md-6, .col-lg-4, .col-12 {
    padding-left: 15px;
    padding-right: 15px;
}
.footer .social-icons a {
    color: var(--light-grey);
    margin: 0 10px;
    font-size: 1.5rem;
}
 .footer .social-icons a:hover {
    color: var(--accent-color);
}
.dns-results pre {
    background-color: #e9ecef; /* Light grey background for results */
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
    padding: 15px;
    overflow-x: auto;
    white-space: pre-wrap; /* Wrap long lines */
    word-wrap: break-word;
}
 #dns-results-container {
    min-height: 50px; /* Give the results container some minimum height */
}
 .webrtc-feedback {
    margin-top: 15px;
    padding: 15px;
    border-radius: 5px;
 }
 .webrtc-feedback.alert-danger {
    background-color: #f8d7da;
    border-color: #f5c6cb;
    color: #721c24;
 }