* {
  word-wrap: break-word;
  overflow-wrap: break-word;
}

html, body {
  overflow-x: hidden;
  scroll-behavior: smooth;
}

 input,
select,
textarea {
  font-size: 16px !important;  /* Prevents mobile zoom-in */
}
/* Body Styling */

body {
    background-color: #f4f4f4; /* Light gray background */
    font-family: Arial, sans-serif; /* Optional: Set a font */
    margin: 0; /* Remove any default margin */
    padding: 0; /* Remove any default padding */
    padding-top: 70px; /* Match the header height to avoid overlap */
    background-color: #f4f4f4; /* Ensure the background matches your design */
    display: flex;
    flex-direction: column; /* Stack header, main, and footer vertically */
    min-height: 100vh; /* Ensure body fills the full viewport height */
}

/* General Header Styling */
header {
    background-color: #fff; /* White background */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Subtle shadow */
    position: fixed; /* Fix the header at the top */
    top: 0; /* Align to the top edge */
    width: 100%; /* Ensure the header spans the full width */
    z-index: 1000; /* Keep it above all other content */
    height: 70px; /* Fixed height for the header */
}

/* Header Container */
.header-container {
    display: flex; /* Use Flexbox for layout */
    justify-content: space-between; /* Space out logo and nav */
    align-items: center; /* Center all items vertically */
    height: 70px; /* Set consistent height for the header */
    padding: 0 20px; /* Add padding to the sides */
}

/* Logo Styling */
.logo {
    display: flex;
    align-items: center;
    margin: 0; /* Remove margins to align the logo properly */
    padding: 0; /* Remove extra padding */
}

.logo img {
    height: 100%; /* Match the header height */
    max-height: 70px; /* Prevent the logo from exceeding the header height */
    object-fit: contain; /* Maintain logo proportions */
}

/* Navbar Styling */
.navbar {
    list-style: none; /* Remove bullet points */
    display: flex; /* Align nav items horizontally */
    margin: 0; /* Reset margins */
    padding: 0; /* Reset padding */
}

.navbar a {
    text-decoration: none; /* Remove underline from links */
    font-size: 16px; /* Set font size for nav links */
    line-height: 1; /* Ensure proper vertical centering */
    color: #333; /* Default text color */
    padding: 5px 10px; /* Add padding around links for better click area */
}

.navbar li {
    margin: 0 15px; /* Space between nav items */
}

/* Add extra space to the last item */
.navbar li:last-child {
    margin-right: 50px; /* Add extra space to the right of "Contact Us" */
}

.navbar a:hover {
    color: #007bff; /* Adjust highlight color */
}
/* Dropdown Menu */
.dropdown {
    position: relative; /* Ensure the dropdown menu is positioned relative to this item */
}

.dropdown:hover .dropdown-menu {
    display: block;
}

.dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background-color: #fff;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    list-style: none;
    margin: 0;
    padding: 10px 0;
    min-width: 150px;
    z-index: 1000;
}

.dropdown-menu li {
    margin: 0;
}

.dropdown-menu a {
    display: block;
    padding: 5px 15px;
    color: #333;
    text-decoration: none;
    font-size: 14px;
    width: 100%; /* Ensure the link spans the full width of the dropdown menu */
    box-sizing: border-box; /* Include padding in width calculation */
}

.dropdown-menu a:hover {
    background-color: #f8f9fa;
    color: #007bff;
    cursor: pointer;
}


.hamburger {
    display: none;
    flex-direction: column;
    gap: 5px;
    cursor: pointer;
 }
    
.hamburger div {
    width: 25px;
    height: 3px;
    background: #333;
    transition: all 0.3s ease;
}
    
.hamburger.active div:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
}
    
.hamburger.active div:nth-child(2) {
    opacity: 0;
}
    
.hamburger.active div:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
}
    
.mobile-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: #FFFFFF;
    width: 100%;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    flex-direction: column;
    padding: 1rem 0;
    text-align: center; /* Center all menu items */
}
    
.mobile-menu.show {
    display: flex;
}
    
.mobile-menu a {
    display: block;
    padding: 0.75rem;
    color: #333;
    text-decoration: none;
    font-size: 1rem;
    border-bottom: 1px solid #f1f1f1; /* Optional divider for better visual separation */
}
    
.mobile-menu a:last-child {
    border-bottom: none; /* Remove divider for the last item */
    
}
    
 .dropdown .dropdown-menu {
    display: none;
}
    
/* Responsive Design */
@media (max-width: 768px) {
    .navbar {
         display: none;
    }
    .hamburger {
        display: flex;
    }
    .dropdown .dropdown-menu {
        display: none !important;
    }
}
    

#resources-main {
    text-align: center; /* Center-align text */
    padding: 40px 20px; /* Add spacing around the main content */
    border-radius: 10px; /* Rounded corners for a polished look */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
    font-family: 'Arial', sans-serif; /* Set a clean font */
    color: #333; /* Neutral text color */
    max-width: 100%; /* full width */
    background-color: #f4f4f4;
    min-height: calc(100vh - 140px);
    
}

#resources-main h2 {
    font-size: 26px;
    margin-bottom: 20px;
}

.resource-links {
    display: flex; /* Align items horizontally */
    flex-wrap: wrap; /* Allow wrapping for smaller screens */
    gap: 20px; /* Space between cards */
    justify-content: center; /* Center cards */
    padding: 0 40px; /* add padding so it doesn't float too center */
    max-width: 1200px;
    margin: auto; /* center container */
}

.resource-card {
    background: white; /* Card background */
    border: 1px solid #ddd; /* Light border */
    border-radius: 8px; /* Rounded corners */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Subtle shadow */
    width: 280px; /* Fixed card width */
    padding: 20px; /* Add inner padding */
    text-align: center; /* Center content in the card */
    transition: transform 0.2s ease, box-shadow 0.2s ease; /* Smooth hover effect */
}

.resource-card:hover {
    transform: translateY(-5px); /* Lift the card on hover */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2); /* More shadow on hover */
}

.resource-card img {
    width: 80px; /* Icon size */
    margin-bottom: 10px;
}

.resource-card h3 {
    font-size: 1.5em;
    margin: 10px 0;
    color: #2483c0; /* Primary color for titles */
}

.resource-card p {
    font-size: 1em;
    color: #666; /* Subtle text color for descriptions */
    text-decoration: none;
}

.resource-links a{
    text-decoration: none; /* Forcefully remove underline */
}

.resource-card .icon{
    color: #2483c0; /* Forcefully remove underline */
}



/* Main content */
main {
    flex: 1; /* Fills the remaining space between header and footer */
    padding: 20px; /* Optional: Add some padding for content */
}

/* Contact Section Styling */
#contact {
    max-width: 800px;
    margin: auto; /* Center the section on the page */
    text-align: center;
    padding: 20px;
}

#contact p {
    font-size: 16px;
    margin-bottom: 30px;
}

#contact h2 {
    font-size: 26px; /* Larger font size for the heading */
    font-weight: bold;
    margin-bottom: 15px; /* Slightly larger margin for spacing */
}

/* Contact Card Styling */
.contact-card, .open-hours {
    background: #fff; /* White background for the cards */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Subtle shadow */
    border-radius: 10px; /* Rounded corners */
    padding: 2em; /* Add consistent padding */
    margin-bottom: 30px; /* Spacing between cards */
    text-align: left;
}

.contact-card ul, .open-hours ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.contact-card li strong, .open-hours li strong {
    padding-right: 5px; /* Add space after the colon */
}

.contact-card li, .open-hours li {
    margin: 20px 0; /* Add more space between list items */
    font-size: 16px;
    display: flex;
    align-items: center; /* Align icon and text vertically */
}

/* Icon Styling */
.contact-card li i, .open-hours li i {
    font-size: 22px; /* Larger icon size */
    margin-right: 20px; /* Add consistent space between the icon and text */
    color: #0056b3; /* Apply the new blue color to the icons */
    flex-shrink: 0; /* Prevent icons from shrinking if the text is long */
}

/* Links in Contact Info */
.contact-card a {
    text-decoration: none;
    color: #007bff; /* Blue color for links */
    transition: color 0.3s ease;
}

.contact-card a:hover {
    color: #0056b3; /* Slightly darker blue on hover */
}

/* Office Hours Styling */
.open-hours h3 {
    text-align: center; /* Center-align the heading */
    font-size: 20px; /* Set the font size */
    font-weight: bold; /* Make the text bold */
    color: #333; /* Ensure consistent text color */
    margin-bottom: 15px; /* Add spacing below the heading */
}


/* Map Styling */
iframe {
    border: 0;
    border-radius: 10px;
    margin-top: 30px; /* Add more space above the map */
}

.month-card {
    background-color: #ffffff;
    padding: 15px 25px;
    border-radius: 12px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.08);
    font-size: 16px;
    font-weight: 500;
    color: #0056b3;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    border: 1px solid #ddd;
}


.months-container {
    display: grid;
    grid-template-columns: auto auto auto; /* keep this */
    gap: 15px;
    padding: 20px;
    justify-content: center;
}

.month-card.cue {
    width: clamp(50px, 15vw, 100px);   /* responsive */
    height: clamp(50px, 15vw, 100px);  /* responsive */
    background: linear-gradient(to bottom right, #c2e7f9, #87c7eb);
    color: white;
    font-size: clamp(12px, 4vw, 20px);
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
    cursor: pointer;
    text-transform: uppercase;
    transition: transform 0.3s ease;
}

.month-card.cue:hover {
    transform: translateY(-4px);
}


.month-card.cue:hover {
    transform: translateY(-4px);
}



.key-dates-container {
    margin-top: 30px;
    padding: 20px;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
}

/* Key Dates Table */
.key-dates-container h3 {
    font-size: 24px;
    font-weight: bold;
    color: #0083c0;
    margin-bottom: 20px;
    text-align: center;
}

.back-button {
    display: inline-block;
    margin: 20px auto;
    padding: 10px 20px;
    background-color: #0083c0;
    color: #fff;
    font-size: 15px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.back-button:hover {
    background-color: #89CFF0;
}

button {
    padding: 10px 20px;
    background-color: #0056b3;
    color: #fff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
    transition: background-color 0.3s ease;
    margin-bottom: 20px;
}

button:hover {
    background-color: #0069d9;
}

.key-dates-table {
    width: 100%;
    border-collapse: collapse;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.key-dates-table th,
.key-dates-table td {
    padding: 15px 20px;
    border-bottom: 1px solid #eee;
    text-align: left;
}

.key-dates-table th {
    background-color: #0083c0;
    color: white;
    font-weight: 600;
}

.key-dates-table tr:nth-child(even) {
    background-color: #f9f9f9;
}

.key-dates-table tr:hover {
    background-color: #f1f1f1;
}

.calculators-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 20px;
    margin: 0 auto;
  max-width: 100%;
  box-sizing: border-box;
  overflow: hidden;
    padding: 0 20px;
}

.calculator-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #f9f9f9;
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 8px;
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer;
}

.calculator-card:hover {
    transform: scale(1.05);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.calculator-card i {
    font-size: 2.5em; /* Slightly larger for better distinction */
    color: #0083c0;
    margin-bottom: 10px;
}

.calculator-card h3 {
    font-size: 1.1em; /* Slightly larger text */
    color: #333;
}

.calculator-section {
    display: none;
    animation: fadeIn 0.3s ease-in-out;
}

.calculator-section h2{
    color: #0056b3;
}

.calculator-wrapper {
    max-width: 800px;
    margin: 20px auto;
    padding: 20px;
    background-color: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}


.tax-details {
    margin-bottom: 20px;
}

#tax-breakdown th,
#tax-breakdown td {
    border: 1px solid #ddd;
    padding: 10px;
    text-align: left;
}

#tax-breakdown th {
    background-color: #f4f4f4;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.back-to-calculators {
    margin-top: 20px;
    padding: 10px 20px;
    background-color: #0056b3;
    color: #fff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.back-to-calculators:hover {
    background-color: #003d80;
}

/* Borrow Calculator Container */
#borrow-calculator {
    margin: 20px auto;
    padding: 20px;
    max-width: 800px;
    background-color: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Borrow Calculator Title */
#borrow-calculator h2 {
    text-align: center;
    color: #0056b3;
    font-size: 1.8em;
    margin-bottom: 20px;
}

/* Borrow Calculator Fieldset */
#borrow-calculator fieldset {
    border: none;
    margin-bottom: 20px;
    padding: 0;
}

.borrow-form fieldset{
color: #0056b3;
}
/* Borrow Calculator Legend */
#borrow-calculator legend {
    font-size: 1.2em;
    font-weight: bold;
    margin-bottom: 10px;
    color: #0056b3;
}

/* Borrow Calculator Labels */
#borrow-calculator label {
    display: block;
    font-size: 0.9em;
    font-weight: 600;
    margin-bottom: 8px;
    color: #555;
}

/* Borrow Calculator Input Fields */
#borrow-calculator input[type="number"],
#borrow-calculator select {
    width: 100%;
    padding: 10px;
    margin-bottom: 15px;
    font-size: 1em;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}

/* Borrow Calculator Currency Input */
#borrow-calculator .currency-input {
    position: relative;
    margin-bottom: 15px;
}

#borrow-calculator .currency-input span {
    position: absolute;
    top: 50%;
    left: 10px;
    transform: translateY(-50%);
    font-size: 1em;
    color: #555;
}

#borrow-calculator .currency-input input {
    padding-left: 25px;
}

/* Borrow Calculator Buttons */
#borrow-calculator button {
    display: block;
    width: 100%;
    padding: 10px;
    background-color: #0056b3;
    color: white;
    font-size: 1em;
    font-weight: bold;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

#borrow-calculator button:hover {
    background-color: #003f8c;
}

#borrow-calculator button:active {
    background-color: #002a5f;
}

/* Borrow Calculator Results Section */
#borrow-results {
    padding: 20px;
    background-color: #e6f7ff;
    border: 1px solid #b3e5ff;
    border-radius: 4px;
    font-size: 1em;
    line-height: 1.5;
}

#borrow-results h3 {
    color: #0056b3;
    margin-bottom: 10px;
    font-size: 1.4em;
}

/* Back to Calculators Button */
#borrow-calculator .back-to-calculators {
    margin-top: 20px;
    font-weight: normal;
    transition: background-color 0.3s ease;
}

#borrow-calculator .back-to-calculators:hover {
    background-color: #e0e0e0;
}

/* Responsive Design */
@media (max-width: 600px) {
    #borrow-calculator {
        padding: 15px;
    }

    #borrow-calculator input[type="number"],
    #borrow-calculator select {
        font-size: 0.9em;
    }

    #borrow-calculator button {
        font-size: 0.9em;
    }
}

/* Savings Calculator Section */
#savings-calculator {
    max-width: 600px;
    margin: 20px auto;
    padding: 20px;
    border: 2px solid #0056b3;
    border-radius: 10px;
    background-color: #f9f9f9;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
}

#savings-calculator h2 {
    color: #0056b3;
    text-align: center;
    margin-bottom: 20px;
    font-size: 24px;
    font-weight: bold;
}

/* Savings Calculator Form */
#savings-form {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

#savings-form fieldset {
    border: none;
    padding: 0;
    margin: 0;
}

#savings-form legend {
    font-size: 18px;
    font-weight: bold;
    color: #0056b3;
    margin-bottom: 10px;
}

#savings-form label {
    font-size: 14px;
    font-weight: bold;
    margin-bottom: 5px;
}

#savings-form input[type="number"],
#savings-form select {
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 14px;
    width: 100%;
    box-sizing: border-box;
    transition: border-color 0.3s;
}

#savings-form input[type="number"]:focus,
#savings-form select:focus {
    border-color: #0056b3;
    outline: none;
}

/* Currency Input for Savings Calculator */
#savings-form .currency-input {
    display: flex;
    align-items: center;
    gap: 5px;
}

#savings-form .currency-input span {
    font-size: 16px;
    font-weight: bold;
    color: #0056b3;
}

/* Buttons in Savings Calculator */
#savings-form button {
    padding: 10px 20px;
    font-size: 16px;
    font-weight: bold;
    color: #fff;
    background-color: #0056b3;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s;
}

#savings-form button:hover {
    background-color: #003d82;
}

#savings-form button.back-to-calculators {
    margin-top: 20px;
    background-color: #777;
}

#savings-form button.back-to-calculators:hover {
    background-color: #555;
}

/* Results Section for Savings Calculator */
#savings-results {
    padding: 15px;
    margin-top: 20px;
    border: 1px dashed #0056b3;
    border-radius: 10px;
    background-color: #e8f1fa;
}

#savings-results h3 {
    font-size: 20px;
    font-weight: bold;
    color: #0056b3;
    margin-bottom: 10px;
}

#savings-results p {
    font-size: 16px;
    color: #333;
    margin: 5px 0;
}

#savings-results strong {
    color: #0056b3;
}

#basic-loan-repayment-calculator {
    max-width: 800px;
    margin: 20px auto;
    padding: 20px;
    border: 2px solid #0056b3;
    border-radius: 10px;
    background-color: #f9f9f9;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
}

#basic-loan-repayment-calculator h2 {
    color: #0056b3;
    text-align: center;
    margin-bottom: 20px;
}

.loan-options {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    margin: 20px auto; 
}

.loan-options fieldset {
    flex: 1;
    border: 1px solid #ccc;
    padding: 15px;
    border-radius: 8px;
    background: #fff;
    margin-top: 20px; /* Add space above Loan sections */
    margin-bottom: 20px; /* Add space below Loan sections */
}

.loan-options label {
    display: block;
    font-size: 14px;
    margin-bottom: 5px;
}

button {
    display: block;
    width: 100%;
    padding: 10px;
    background-color: #0056b3;
    color: #fff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

button:hover {
    background-color: #003d82;
}

#loan-results {
    margin-top: 20px;
    padding: 10px;
    border: 1px dashed #0056b3;
    background-color: #e8f1fa;
    border-radius: 10px;
}




/* Footer Styling */
footer {
    background-color: #fff; /* Match the body background for consistency */
    text-align: center; /* Center the text in the footer */
    padding: 2px 0; /* Add space inside the footer */
    font-size: 14px; /* Adjust the font size */
    border-top: 1px solid #ddd; /* Optional: Add a subtle border on top */
}
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type="number"] {
    -moz-appearance: textfield;
}
/* Override individual calculator-specific borders */
#savings-calculator,
#basic-loan-repayment-calculator {
    border: none; /* Remove their specific border to avoid duplication */
}

/* Optional: maintain calculator-section fade-in and heading color */
.calculator-section h2 {
    color: #0056b3;
}
@media (max-width: 480px) {
  .month-card.cue {
    font-size: 14px;
    padding: 10px;
    width: 70px;
    height: 70px;
  }

  .key-dates-table th,
  .key-dates-table td {
    font-size: 12px;
    padding: 8px;
  }

  .back-button {
    font-size: 14px;
    padding: 8px 12px;
  }

  h2, h3 {
    font-size: 20px;
  }

  .key-dates-container {
    padding: 10px;
  }

  body {
    font-size: 14px;
  }
}

@media (max-width: 768px) {
  .loan-options {
    flex-direction: column;
  }

}

@media (max-width: 480px) {
  .calculator-card h3 {
    font-size: 14px;
  }

  .calculator-card i {
    font-size: 2em;
  }

  .calculators-container {
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    padding: 10px;
  }
}