/* Basic Reset and Styles */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


body {
    font-family: 'Arial', sans-serif;
    color: #333;
    /* Dark grey text for readability */
    background-color: #f4f4f4;
    /* Light grey background for contrast */
    line-height: 1.6;
    font-size: 16px;
    /* Space at top for fixed header */
}


html {
    scroll-padding-top: 130px;
    /* Avoids hidden sections by the header */
}

/* Main Content and Section Styles */
main {
    padding: 20px;
    padding-top: 130px !important;
    background-color: #e6e6e6;
    /* Slightly different background for content area */
}

main section {
    background: white;
    padding: 20px;
    margin-bottom: 40px;
    border: 2px solid #ccc;
    border-radius: 15px;
    /* Rounded corners for sections */
}

main h1,
main section h1 {
    text-decoration: underline;
    /* Emphasis on section titles */
    font-size: 2.5rem;
    /* Larger font size for main titles */
}

main section h2 {
    font-size: 1.3rem;
    /* Subtitle sizing for clarity */
}

/* Button Styles for Full Width, Metallic Blue, and Textured Appearance */
main .main-button,
main a.button,


main button {
    display: block;
    /* Ensures the button fills the container */
    width: 100%;
    /* Full width of the container */
    padding: 12px 15px;
    /* Adequate padding, adjust as needed */
    font-size: 2.0rem;
    /* Consistent font size */
    color: white;
    /* Text color */
    border-radius: 8px;
    /* Rounded corners */
    border: none;
    /* No border */
    cursor: pointer;
    /* Cursor indicates clickable item */
    text-align: center;
    /* Centers text */
    margin-bottom: 20px;
    /* Space between buttons */
    background-image: linear-gradient(to right, #3a7bd5, #3a6073);
    /* Metallic blue gradient */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    /* Lifted look with shadow */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    /* Smooth transition for interaction */
    text-decoration: none;
    /* No underline for link-styled buttons */
}

/* Hover Effect for Button */
main .main-button:hover,
main a.button:hover,
main button:hover {
    transform: translateY(-2px);
    /* Slightly lift button on hover */
    box-shadow: 0 7px 20px rgba(0, 0, 0, 0.3);
    /* Enhanced shadow for lifted effect */
}

/* Focused Button Style */
main .main-button:focus,
main a.button:focus,
main button:focus {
    outline: none;
    /* Removes default outline */
    box-shadow: 0 0 0 2px #fff, 0 0 0 5px #3a7bd5;
    /* Focus indicator */
}

/* Universal Section Styles */
.section {
    display: flex;
    flex-direction: column;
    background-color: #ffffff;
    border: 2px solid #ccc;
    margin: 20px 0;
    padding: 20px;
    border-radius: 15px;
}

.section h2 {
    padding-bottom: 0px;
    /* Instead of margin-bottom */
}

.section p {
    padding-top: 0px;
    /* Instead of margin-top */
}

/* Styles for h1 with class .section-title within .section */
.section h1.section-title {
    font-size: 32px;
    /* Or whatever size you prefer for h1 */
    color: #333;
    margin-bottom: 20px;
    text-align: left;
    width: 100%;
    word-spacing: normal;
    letter-spacing: normal;
}

/* Styles for h2 within .section */
.section h2 {
    font-size: 24px;
    /* Adjusted size for h2 */
    color: #333;
    margin-bottom: 5px;
    text-align: left;
    width: 100%;
    word-spacing: normal;
    letter-spacing: normal;
}

/* Adjusts the top margin of paragraphs or specific elements following h2 */
.section h2+* {
    margin-top: 0;
    /* Removes additional space by setting the top margin to 0 */
}

.section .content-container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
}

.section .section-text,
.section .subcontainer {
    flex: 3;
    padding-right: 20px;
}

.section .section-image-container,
.section .section-image {
    flex: 2;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    /* Ensures image container uses full width */
    max-width: 100%;
    /* Ensures images are not larger than their container */
    height: auto;
    /* Maintains aspect ratio */
    border-radius: 10px;
    border: 2px solid silver;
}

.section-button {
    display: block;
    width: 100%;
    padding: 12px 0px;
    background-image: linear-gradient(to right, #3a7bd5, #3a6073);
    color: white;
    text-align: center;
    font-size: 2.0rem;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    text-decoration: none;
    margin-top: 20px;
}

.section-button:hover {
    background-image: linear-gradient(to right, #2a5da8, #2a4868);
    box-shadow: 0 7px 20px rgba(0, 0, 0, 0.3);
    transform: translateY(-2px);
}

/* Standardized Input Styles for Forms and Calculators */
input[type="number"],
input[type="text"],
input[type="email"],
input[type="tel"],
textarea {
    width: 33%;
    /* Full width */
    padding: 10px;
    /* Consistent padding */
    margin-bottom: 10px;
    /* Consistent margin */
    border-radius: 8px;
    /* Consistent rounded corners */
    border: 2px solid silver;
    /* Consistent border */
    font-size: 1.2rem;
    /* Consistent font size */
}

input[type="radio"],
input[type="checkbox"] {
    margin: 0 10px;
    /* Standardized margin */
    transform: scale(1.5);
    /* Enhanced visibility */
    vertical-align: middle;
    /* Aligns with adjacent text */
}

/* Hover and Focus States for Interactive Elements */
a:focus,
button:focus,
input:focus,
textarea:focus {
    outline: 2px solid #3a7bd5;
    /* Focus outline for accessibility */
}

/* Unique Calculator Container Styles */
.calculator-container {
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    /* Retains unique shadow */
    margin-bottom: 20px;
    /* Distinct from .section for emphasis */
}

/* Calculator Title Styles */
.calculator-container h3 {
    margin-bottom: 10px;
    /* Specific margin for separation */
    font-size: 1.2rem;
    /* Legible font size for titles */
}

#mortgage-repayment-calculator #calculateRepayment {
    margin-top: 20px;
    /* Adds space above the button */
}

.applicants-container {
    display: flex;
    /* Use Flexbox for layout */
    flex-wrap: wrap;
    /* Allow items to wrap as needed */
    justify-content: space-between;
    /* Space out the child elements */
    align-items: flex-start;
    /* Align items at the start of the flex container */
}

#applicant1Questions,
#applicant2Questions {
    flex-basis: 48%;
    /* Each child takes up less than half of the container width */
    max-width: 48%;
    /* Prevents the boxes from growing beyond 48% of their container's width */
}

/* Target only questions within the mortgageForm */
#mortgageForm .question,
#mortgageForm .question label,
#mortgageForm .question input,
#mortgageForm .question select,
#mortgageForm .question textarea {
    margin-bottom: 0.5rem;
    /* Reduces the space between questions */
}

/* Reduce padding inside input fields and text areas within the form for a more compact look */
#mortgageForm input[type="text"],
#mortgageForm input[type="email"],
#mortgageForm input[type="number"],
#mortgageForm textarea {
    padding: 0.25rem;
    /* Less padding inside inputs and textareas */
    margin-bottom: 0.5rem;
    /* Less space below inputs */
}

/* Adjust line height for labels within the form to make them closer */
#mortgageForm .question label {
    line-height: 1.2;
    /* Tighter line height for labels */
}

/* For radio buttons and checkboxes specifically */
#mortgageForm input[type="radio"],
#mortgageForm input[type="checkbox"] {
    margin-right: 0.5rem;
    /* Right margin for radio buttons and checkboxes */
    margin-bottom: 0;
    /* Reduce space below these inputs */
}

/* Align form elements properly with reduced spacing */
#mortgageForm .form-element {
    display: flex;
    align-items: center;
    /* Ensures alignment is maintained */
    margin-bottom: 0.5rem;
    /* Less bottom margin for overall form element */
}

/* Contact Form Input Alignment */
#contact-form .input-row {
    display: flex;
    justify-content: space-between;
}

#contact-form .input-group {
    flex: 1;
    margin-right: 8px;
    /* Adds spacing between input fields */
}

#contact-form .input-group:last-child {
    margin-right: 10px;
    /* Ensures the last input group doesn't have extra margin on the right */
}

#contact-form input[type="text"],
#contact-form input[type="email"],
#contact-form input[type="tel"] {
    width: 100%;
    /* Ensures inputs take full width of their parent .input-group */
    padding: 10px;
    border-radius: 8px;
    border: 2px solid silver;
    font-size: 1.2rem;
}

/* Contact Form Textarea Full Width */
#contact-form textarea {
    width: 100%;
    /* Ensures the textarea takes full width of its container */
    padding: 10px;
    border-radius: 8px;
    border: 2px solid silver;
    font-size: 1.2rem;
    box-sizing: border-box;
    /* Includes padding and border in the element's total width and height */
    margin-top: 10px;
    /* Ensures there's space above the textarea if stacked with other elements */
}

/* Footer */
footer {
    background: linear-gradient(to right, #000, #3a7bd5, #3a6073, #000);
    /* Black to blue gradient */
    color: white;
    text-align: center;
    height: 100px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 0.8rem;
    margin-top: -40px;
    /* Reduces gap between the last section and footer */
}

/* Modal */
.modal {
    display: none;
    /* Hidden by default */
    position: fixed;
    /* Stay in place */
    z-index: 1;
    /* Sit on top */
    left: 0;
    top: 0;
    width: 100%;
    /* Full width */
    height: 100%;
    /* Full height */
    overflow: auto;
    /* Enable scroll if needed */
    background-color: rgba(0, 0, 0, 0.4);
    /* Black with opacity */
}

/* Modal Content Box */
.modal-content {
    background-color: #fefefe;
    /* White background color */
    margin: calc(120px + 10%) auto;
    /* 15% from the top and centered */
    padding: 20px;
    /* Padding */
    border: 1px solid #888;
    /* Solid border */
    width: 80%;
    /* Width */
    color: #000;
    /* Black text color for contrast */
    border-radius: 15px;
}


#privacyPolicyModal .modal-content {
    margin: 5% auto;
}

/* The Close Button */
.close {
    color: #aaa;
    /* Light grey color */
    float: right;
    /* Align to the right */
    font-size: 28px;
    /* Larger font size */
    font-weight: bold;
    /* Make it bold */
}

.close:hover,
.close:focus {
    color: black;
    /* Change color to black on hover/focus */
    text-decoration: none;
    /* No underline */
    cursor: pointer;
    /* Change cursor to pointer */
}

/* Privacy Policy Text Styling */
#privacy-policy-text {
    font-size: 16px;
    /* Standard font size */
    line-height: 1.6;
    /* Adequate line height for readability */
}

/* Collapsible Section Styles */
.collapsible {
    background-image: linear-gradient(to right, #f0f0f0, #dcdcdc);
    /* Gradient of light greys */
    color: #444;
    cursor: pointer;
    padding: 18px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 1.5rem;
    transition: background-color 0.3s ease;
}

.collapsible:after {
    content: '\002B';
    /* Unicode character for "plus" sign (+) */
    color: #777;
    font-weight: bold;
    float: right;
    margin-left: 5px;
}

.collapsible.active:after {
    content: "\2212";
    /* Unicode character for "minus" sign (−) */
}

.collapsible-content {
    padding: 0 18px;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
}

/* Question Styles */
.question {
    margin-bottom: 20px;
    /* Space between each question for clarity */
}

/* Hidden Question Styles */
.hidden-question {
    display: none;
    /* Hide the question */
    margin-bottom: 0;
    /* Remove the bottom margin when hidden */
}

@media (max-width: 768px) {

    /* Main content adjustments */
    main {
        padding: 0.625rem;
        /* Adjusts padding for main content area */
    }

    #applicant1Questions,
    #applicant2Questions {
        flex-basis: 100%;
        /* Stack the questions on smaller screens */
        max-width: 100%;
    }

    .section .content-container {
        flex-direction: column;
        /* Ensures content is stacked vertically */
    }

    .section .section-text,
    .section .section-image-container {
        width: 100%;
        /* Ensures elements take full width */
    }

    .section .section-image-container {
        order: 2;
        /* Places images below the text */
        margin-top: 1.25rem;
        /* Adds spacing above images */
    }

    .section-image-container img {
        width: 100%;
        /* Ensures image width matches container */
        height: auto;
        /* Maintains aspect ratio */
        border: none;
        /* Removes any border */
        box-shadow: none;
        /* Removes any shadow */
    }

    /* Adjusts form input elements for full width */
    #contact-form .input-group input,
    #contact-form textarea,
    .calculator-container input,
    .calculator-container select {
        width: 100%;
        /* Ensures elements take full width */
        margin-bottom: 0.625rem;
        /* Adds spacing between elements */
    }

    /* Adjusts footer padding and font size for readability */
    footer {
        padding: 9.375rem 0.625rem;
        /* Converted padding to rem */
        font-size: 0.9rem;
        /* Keeps font size as is */
    }
}
    @media (max-width: 768px) {
        .section .section-image-container {
            margin-bottom: 1.25rem;
            /* Adds space below images in all sections */
        }
    }

    /* Global adjustments for subheadings and paragraphs within sections */
    .section h2 {
        margin-bottom: 0.3125rem;
        /* Reduces space between subheadings and paragraphs */
    }

    .section p {
        margin-bottom: 1.25rem;
        /* Increases space between paragraphs and the following subheadings */
    }

    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="number"],
    textarea {
        width: 100%;
        /* Full width within container */
        box-sizing: border-box;
        /* Includes padding and border in the element's total width */
    }

    #contact-form input,
    #contact-form textarea {
        width: 100%;
        /* Full width */
        box-sizing: border-box;
        /* Includes padding and borders in width calculation */
        margin-bottom: 0.625rem;
        /* Adds space between each field */
    }

    /* Specific adjustments for the Contact Us section to ensure vertical stacking */
    #contact-form .input-group {
        display: block;
        /* Default block display stacks elements vertically */
    }

    #contact-form .input-row {
        display: block;
        /* Ensures the container for inputs behaves like a block element, stacking its children */
    }

    /* Adjusts the layout for questions and their corresponding radio buttons */
    .question {
        display: block;
        /* Ensures the question text and radio buttons are in block layout */
    }

    .question label:first-of-type {
        display: block;
        /* Displays the question text on its own line */
        margin-bottom: 0.3125rem;
        /* Adds a little space between the question and the radio buttons */
    }

    .question input[type="radio"]+label {
        display: inline-block;
        /* Displays radio buttons and their labels inline */
        margin-right: 0.625rem;
        /* Adds space between the radio button-label pairs */
    }

    .question div {
        margin-top: 0;
        /* Adjusts top margin for alignment */
    }


@media (max-width: 768px) {

    /* Targets the calculator sections specifically for radio buttons */
    #mortgage-repayment-calculator .question,
    #stamp-duty-calculator .question {
        display: flex;
        flex-direction: column;
        /* Ensures questions are stacked vertically */
    }

    #mortgage-repayment-calculator input[type="radio"],
    #stamp-duty-calculator input[type="radio"],
    #mortgage-repayment-calculator label,
    #stamp-duty-calculator label {
        display: inline-flex;
        /* Aligns radio buttons and labels on the same line */
        align-items: center;
        /* Centers items vertically */
    }

    /* Creates a new line for each radio button and its label */
    #mortgage-repayment-calculator .question div,
    #stamp-duty-calculator .question div {
        display: flex;
        flex-direction: column;
        /* Stacks radio button and label vertically */
    }

    /* Adjusts spacing for radio buttons and labels */
    #mortgage-repayment-calculator .question input[type="radio"]+label,
    #stamp-duty-calculator .question input[type="radio"]+label {
        margin-left: 0.3125rem;
        /* Space between radio button and label */
        margin-bottom: 0.625rem;
        /* Space after each radio button/label pair */
    }

    /* Alternatively, if the button directly follows the radio button groups */
    #calculateRepayment,
    #calculateStampDuty {
        margin-top: 1.25rem;
        /* Adds space above the calculate button */
    }
}

#loadingOverlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.8);
    display: flex;
    z-index: 9999;
}

#loading-dots {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 15px;
    aspect-ratio: 1;
    border-radius: 50%;
    animation: dot 1s infinite linear alternate;
}

@keyframes dot {
    0% {
        box-shadow: 20px 0 #000, -20px 0 #0002;
        background: #000
    }

    33% {
        box-shadow: 20px 0 #000, -20px 0 #0002;
        background: #0002
    }

    66% {
        box-shadow: 20px 0 #0002, -20px 0 #000;
        background: #0002
    }

    100% {
        box-shadow: 20px 0 #0002, -20px 0 #000;
        background: #000
    }
}


/* CSS for header */


.header {
    background: linear-gradient(to right, #000, #3a7bd5, #3a6073, #000);
    font-size: 62.5% !important;
    font-family: 'Roboto', sans-serif !important;
    position: fixed;
    width: 100%;
    min-height: 120px;
    max-height: 120px;
    display: flex;
    align-items: center;
    z-index: 1;
}

.header li {
    list-style: none;
}

.header a {
    text-decoration: none;
}

#header-logo {
    height: 70px;
}

.header h1 {
    padding-left: 10px;
    padding-right: 20px;
    color: white;
    font-size: 35px;
}


.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 1.5rem;
    width: 100%;
}

.hamburger {
    display: none;
}

.bar {
    display: block;
    width: 25px;
    height: 3px;
    margin: 5px auto;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    background-image: linear-gradient(to right, red, white, blue);
}

.nav-menu {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.nav-item {
    min-width: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.nav-link,
.sub-menu a {
    font-size: 16px;
    font-weight: 400;
    color: white;

    border: 2px solid transparent;
    background-origin: border-box;
    background-clip: padding-box, border-box;
    transition: background-color 0.5s, transform 0.1s;
    padding: 12px 15px;
    width: 145px;
    background-image: linear-gradient(to right, #3a7bd5, #3a6073);
    border-image: linear-gradient(to right, red, white, blue) 1;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.sub-menu a {
    width: 100%;

}


.nav-link:hover,
.sub-menu a:hover {
    background-image: linear-gradient(to right, #2a5da8, #2a4868);
    transform: scale(1.05);
}

.nav-logo {
    font-size: 2.1rem;
    font-weight: 500;
    color: #482ff7;
    display: flex;
    align-items: center;
}

/* add sub nav */
.dropdown {
    position: relative;
}

.sub-menu {
    display: none;
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    width: max-content;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 10px 27px rgba(0, 0, 0, 0.05);
    padding: 1rem;
    z-index: 10;
    background: linear-gradient(to right, #000, #3a7bd5, #3a6073, #000);

}

.sub-menu.active {
    display: block;
}

.sub-menu li {
    margin: 1rem 0;
}

/*  */

@media only screen and (max-width: 906px) {
    .nav-menu {
        position: fixed;
        left: -100%;
        top: 120px;
        flex-direction: column;
        background: linear-gradient(to right, #000, #3a7bd5, #3a6073, #000);

        width: 100%;
        text-align: center;
        transition: 0.3s;
        box-shadow:
            0 10px 27px rgba(0, 0, 0, 0.05);
    }

    .nav-menu.active {
        left: 0;
    }

    .nav-item,
    .sub-menu .nav-item {
        margin: 5px;
        margin-bottom: 5px;
        width: 90%;
        align-items: center;
        justify-content: center;
    }

    .nav-link {
        width: 100%;
    }

    .hamburger {
        display: block;
        cursor: pointer;
    }

    .sub-menu {
        position: unset;
        background: unset;
        padding: unset;

    }

    .sub-menu.active {
        display: grid;
        grid-template-rows: auto 1fr auto auto;
        grid-template-columns: 1fr 1fr;
        width: 90%;
    }

    .sub-menu li {
        margin: 7px 0px;
        justify-content: center;
        display: flex;
    }

    .dropdown {
        display: flex;
        flex-direction: column;
    }
}

.hamburger.active .bar:nth-child(2) {
    opacity: 0;
}

.hamburger.active .bar:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
}

.hamburger.active .bar:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
}