:root {
    --base-clr: #324B50;
    --line-clr: #42434a;
    --hover-clr: rgba(149, 176, 182, 0.3);
    --text-clr: #e6e6ef;
    --accent-clr: #81cad9;
    --secondary-text-clr: #b0b3c1;
    --Tertiary-Color: #95b0b6; /* Light Greyish/Blue */
    --Dark-Gray: #505050;
    --Light-Gray: #d1d1d1;
}
body, html {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    font-family: 'Figtree', sans-serif;
    background-color: #ffffff;
    background-image: url(../assets/images/WebBackground2.png);
    background-size: 100% auto;
    background-position: top center;
    background-repeat: repeat-y;
    background-attachment: scroll;
    min-height: 100vh;
}
main {
    margin: 0 auto;
    margin-top: 5%;
    max-width: 100%;
    padding: 1rem;
}
/*Styling for the Pricing Header*/
.TopLine {
    margin-top: 3rem;
    margin-bottom: 0.25rem;
    text-align: center;
    font-weight: 200;
}
.darkblue-font {
    color: var(--base-clr);
}

.blue-font {
    color: var(--Tertiary-Color);
}

.darkblue-font, .blue-font {
    font-weight: 800;
}
.italic {
    font-style: italic; 
}
.subheading {
    text-align: center;
    font-weight: 100;
    color: var(--base-clr);
    margin-bottom: 2rem;
    max-width: 1200px;
}
.pricing-container {
    display: grid;
    grid-template-columns: auto repeat(2, 1fr);
    grid-template-rows: auto repeat(19, 2rem); /* 17 equal rows */
    gap: 1px; /* Spacing between grid cells */
    margin: 0 auto;
    width: 100%;
    height: auto;
    background-color: var(--line-clr); /* Grid line color */
    border: 5px solid var(--base-clr); /* Outer border */
    border-radius: 10px;
}
.grid-item {
    background-color: var(--base-clr); /* Cell background color */
    color: var(--text-clr); /* Text color */
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1rem;
    font-weight: bold;
    border: 1px solid var(--line-clr); /* Optional: Add individual cell borders */
    box-sizing: border-box;
    white-space: nowrap; /* Prevent text wrapping */
    overflow: hidden; /* Hide overflow if text is too long */
    text-overflow: ellipsis; /* Add ellipsis if text overflows */
}
.grid-item-header {
    background-color: var(--Tertiary-Color); /* Cell background color */
    color: var(--text-clr); /* Text color */
    display: flex;
    flex-direction: column; /* Stack content vertically */
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
    font-size: 1.5em;
    height: 7.5rem;
    font-weight: bold;
    border: 1px solid var(--line-clr); /* Optional: Add individual cell borders */
    box-sizing: border-box;
    padding: 0.75rem;
}

.grid-item-header .price {
    font-size: 1em; /* Smaller font size for the price */
    font-weight: 900; /* Lighter font weight for the price */
    color: white; /* Optional: Use a secondary text color */
}
.grid-item-header1 {
    background-color: var(--Tertiary-Color); /* Cell background color */
    color: var(--Dark-Gray); /* Text color */
    display: flex;
    justify-content: right;
    align-items: flex-end;
    font-size: 1.25em;
    font-weight: bold;
    border: 1px solid var(--line-clr); /* Optional: Add individual cell borders */
    box-sizing: border-box;
    padding: 0.25rem 0.5rem;
    white-space: nowrap; /* Prevent text wrapping */
    overflow: hidden; /* Hide overflow if text is too long */
    text-overflow: ellipsis; /* Add ellipsis if text overflows */
}
.grid-item-header2 {
    background-color: var(--Dark-Gray); /* Cell background color */
    color: white; /* Text color */
    display: flex;
    justify-content: flex-start;
    align-items: center;
    font-size: 1rem;
    font-weight: bold;
    border: 1px solid var(--line-clr); /* Optional: Add individual cell borders */
    box-sizing: border-box;
    padding: 0.5rem 1rem;
}
.grid-item-header2 a {
    display: flex;
    justify-content: space-between;
    width: 100%;
    gap: 1rem;
}
.redirect-icon {
    height: 15px;
    width: 15px;
    margin-left: 5px; /* Add spacing between the text and the icon */
    fill: white; /* Default color for the SVG icon */
    transition: fill 0.3s ease; /* Smooth transition for the color change */
}
.redirect-icon:hover {
    color: var(--accent-clr);
    fill: var(--accent-clr);
}
.grid-item-header2 {
    position: relative;
}
.dropdown-toggle {
    cursor: pointer;
}

.dropdown-content {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background-color: white;
    color: var(--base-clr);
    padding: 0.5rem;
    border: 1px solid var(--line-clr);
    border-radius: 5px;
    box-shadow: 0px 2px 5px var(--base-clr);
    z-index: 10;
    width: 100%;
    transition: all 0.3s ease-in-out; /* Smooth transition */
}
.grid-item-header2:hover .dropdown-content {
    display: block;
}
.featurepage {
    text-decoration: none; /* Remove underline */
    color: white; /* Inherit the text color from the parent */
    transition: color 0.3s ease, transform 0.3s ease; /* Add a hover effect */
    display: inline-flex; /* Ensure the text and icon are aligned */
    align-items: center; /* Vertically align the text and icon */
}

.featurepage:hover {
    color: var(--accent-clr); /* Change text color on hover */
}

.featurepage:hover .redirect-icon {
    fill: var(--accent-clr); /* Change the SVG icon color on hover */
}

.featurepage:hover {
    color: var(--accent-clr);
    fill: var(--accent-clr);
    transform: scale(1.05); /* Scale up on hover */
    text-shadow: 0px 0px 1px var(--accent-clr);
}
.grid-item2 {
    background-color: var(--Light-Gray); /* Cell background color */
    color: var(--base-clr); /* Text color */
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.2em;
    font-weight: bold;
    border: 1px solid var(--line-clr); /* Optional: Add individual cell borders */
    box-sizing: border-box;
}
/* Grid Item Styles for Single Column Layout (Mobile) */
.column-grid-item {
    background-color: var(--base-clr); /* Cell background color */
    color: var(--text-clr); /* Text color */
    display: none;
    justify-content: center;
    align-items: center;
    font-size: 1rem;
    font-weight: bold;
    border: 1px solid var(--line-clr); /* Optional: Add individual cell borders */
    box-sizing: border-box;
    white-space: nowrap; /* Prevent text wrapping */
    overflow: hidden; /* Hide overflow if text is too long */
    text-overflow: ellipsis; /* Add ellipsis if text overflows */
}
.column-grid-item2 {
    background-color: var(--Light-Gray); /* Cell background color */
    color: var(--base-clr); /* Text color */
    display: none;
    justify-content: center;
    align-items: center;
    font-size: 1.2em;
    font-weight: bold;
    border: 1px solid var(--line-clr); /* Optional: Add individual cell borders */
    box-sizing: border-box;
}
/*Styling for the Pricing FAQ section*/
.pricing-faq {
    margin: 5rem auto; /* Center horizontally and add top margin */
    padding: 1.25rem;
    background-color: white;
    border-radius: 10px;
    box-shadow: 0px 2px 10px var(--base-clr);
    width: 75%;
    margin-bottom: 3rem;
}

.pricing-faq .subheading {
    text-align: center;
    font-size: 2rem;
    font-weight: 600;
    color: var(--base-clr);
    margin-bottom: 1rem;
}

.faq-list {
    max-width: 800px;
    margin: 0 auto;
}

.faq-item {
    margin-bottom: 1rem;
    border: 1px solid var(--line-clr);
    border-radius: 5px;
    overflow: hidden;
    background-color: #fff;
}

.faq-question {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    font-size: 1rem;
    font-weight: bold;
    cursor: pointer;
    background-color: var(--base-clr);
    color: var(--text-clr);
    transition: color 0.5s ease; 
}

.faq-question:hover {
    color: white; /* Change text color to white */
}

.faq-answer-toggle {
    font-size: 1.5rem;
    font-weight: bold;
    color: var(--Tertiary-Color);
    transition: transform 0.3s ease;
    cursor: pointer;
    transition: color 0.1s ease;
}
.faq-answer-toggle:hover {
    color: var(--accent-clr); /* Change text color to white */
}

.faq-answer {
    height: 0; /* Start with no height */
    opacity: 0; /* Fully transparent */
    overflow: hidden; /* Hide overflowing content */
    transition: height 0.3s ease-in-out, opacity 0.3s ease-in-out; /* Smooth height and opacity transitions */
    padding: 0 1rem; /* Add horizontal padding */
    font-size: 1rem;
    color: var(--base-clr);
}

.faq-item.is-active .faq-answer {
    height: auto; /* Automatically adjust to content height */
    opacity: 1; /* Fully opaque */
    padding: 1rem; /* Add padding when visible */
}

.faq-item.is-active .faq-answer-toggle {
    transform: rotate(45deg); /* Rotate the "+" to "x" */
}
/* Mobile Styling */
@media (max-width: 768px) {
    /* General Body Adjustments */
    body {
        background-size: 100% auto; /* Adjust background size for mobile */
        background-position: top center; /* Center the background */
        overflow-x: hidden; /* Prevent horizontal scrolling */
        background-image: url(../assets/images/WebBackgroundLight.png);
    }

    main {
        padding: 1rem; /* Add padding for better spacing */
    }

    /* Header Adjustments */
    .TopLine {
        font-size: 2rem; /* Slightly reduce font size */
        margin-top: 5rem; /* Adjust spacing */
        margin-bottom: 0;
    }

    .subheading {
        font-size: 1.25rem; /* Adjust font size for better readability */
        margin-bottom: 1rem; /* Adjust spacing */
        margin-top: 0;
    }

    /* Pricing Container */
    .pricing-container {
        grid-template-columns: auto repeat(2, 1fr); /* Keep the grid layout */
        grid-template-rows: auto repeat(19, auto); /* Allow rows to grow dynamically */
        gap: 0.25rem; /* Reduce spacing between grid cells */
        width: 100%; /* Ensure the container takes up the full width */
        margin: 0 auto; /* Center the container */
        border: 6px solid var(--base-clr); /* Keep the outer border */
        border-radius: 6px; /* Slightly reduce border radius */
    }

    .grid-item-header,
    .grid-item-header1,
    .grid-item-header2 {
        font-size: 1rem; /* Adjust font size */
        padding: 0.5rem; /* Adjust padding */
        text-align: center; /* Center-align the text */
    }

    .grid-item {
        font-size: 0.9rem; /* Adjust font size */
        padding: 0.5rem; /* Adjust padding */
    }

    .grid-item2 {
        font-size: 0.9rem; /* Adjust font size */
        padding: 0.5rem; /* Adjust padding */
    }

    /* FAQ Section */
    .pricing-faq {
        width: 90%; /* Slightly reduce the width */
        margin: 2rem auto; /* Adjust spacing */
        padding: 1.5rem; /* Add padding for better spacing */
        background-color: white; /* Keep the background consistent */
        border-radius: 10px; /* Maintain the rounded corners */
        box-shadow: 0px 2px 10px var(--base-clr); /* Keep the shadow effect */
    }

    .faq-list {
        max-width: 800px; /* Keep the FAQ list width consistent */
        margin: 0 auto; /* Center the FAQ list */
    }

    .faq-item {
        margin-bottom: 1rem; /* Maintain spacing between items */
        border: 1px solid var(--line-clr); /* Keep the border */
        border-radius: 5px; /* Maintain rounded corners */
        overflow: hidden; /* Prevent overflow */
        background-color: #fff; /* Keep the background white */
    }

    .faq-question {
        display: flex; /* Keep the flex layout */
        justify-content: space-between; /* Space between question and toggle */
        align-items: center; /* Center-align the content */
        padding: 1rem; /* Maintain padding */
        font-size: 1rem; /* Keep the font size consistent */
        font-weight: bold; /* Keep the bold text */
        cursor: pointer; /* Maintain the pointer cursor */
        background-color: var(--base-clr); /* Keep the background color */
        color: var(--text-clr); /* Keep the text color */
        transition: color 0.5s ease; /* Smooth color transition */
    }

    .faq-question:hover {
        color: white; /* Change text color to white on hover */
    }

    .faq-answer-toggle {
        padding: 0.25rem;
        font-size: 1.5rem; /* Keep the toggle size consistent */
        font-weight: bold; /* Keep the bold text */
        color: var(--Tertiary-Color); /* Keep the toggle color */
        transition: transform 0.3s ease; /* Smooth rotation transition */
        cursor: pointer; /* Maintain the pointer cursor */
    }

    .faq-answer-toggle:hover {
        color: var(--accent-clr); /* Change toggle color on hover */
    }

    .faq-answer {
        height: 0; /* Start with no height */
        opacity: 0; /* Fully transparent */
        overflow: hidden; /* Hide overflowing content */
        transition: height 0.3s ease-in-out, opacity 0.3s ease-in-out; /* Smooth height and opacity transitions */
        padding: 0 1rem; /* Add horizontal padding */
        font-size: 1rem; /* Keep the font size consistent */
        color: var(--base-clr); /* Keep the text color */
    }

    .faq-item.is-active .faq-answer {
        height: auto; /* Automatically adjust to content height */
        opacity: 1; /* Fully opaque */
        padding: 1rem; /* Add padding when visible */
    }

    .faq-item.is-active .faq-answer-toggle {
        transform: rotate(45deg); /* Rotate the "+" to "x" */
    }
}
/* Max 430px — Large phones */
@media (max-width: 430px) {
    .TopLine {
        font-size: 1.9rem;
    }
    .subheading {
        font-size: 1.15rem;
    }
    .grid-item-header,
    .grid-item-header1,
    .grid-item-header2,
    .grid-item,
    .grid-item2,
    .faq-question,
    .faq-answer {
        font-size: 0.95rem;
    }
}

/* Max 412px — Wider Android phones */
@media (max-width: 412px) {
    .TopLine {
        font-size: 1.85rem;
    }
    .subheading {
        font-size: 1.1rem;
    }
    .grid-item,
    .grid-item2 {
        font-size: 0.9rem;
    }
}

/* Max 390px — iPhone 14 Pro */
@media (max-width: 390px) {
    .TopLine {
        font-size: 1.75rem;
    }
    .subheading {
        font-size: 1rem;
    }
    .grid-item-header,
    .grid-item-header1,
    .grid-item-header2,
    .faq-question {
        font-size: 0.9rem;
    }
}

/* Max 375px — iPhone 12/13/14/15 */
@media (max-width: 375px) {
    .TopLine {
        font-size: 1.65rem;
    }
    .subheading {
        font-size: 1rem;
    }
    .grid-item,
    .grid-item2,
    .faq-answer {
        font-size: 0.85rem;
    }
}

/* Max 360px — Common Androids */
@media (max-width: 360px) {
    .TopLine {
        font-size: 1.6rem;
    }
    .subheading {
        font-size: 0.95rem;
    }
    .grid-item-header,
    .grid-item-header1,
    .grid-item-header2,
    .grid-item,
    .grid-item2,
    .faq-question {
        font-size: 0.85rem;
    }
}

/* Max 320px — Smallest devices (iPhone SE) */
@media (max-width: 320px) {
    .TopLine {
        font-size: 1.5rem;
    }
    .subheading {
        font-size: 0.85rem;
    }
    .grid-item,
    .grid-item2,
    .faq-answer {
        font-size: 0.8rem;
    }
    .faq-question {
        font-size: 0.85rem;
    }
}
@media (max-width: 465px) {
    .pricing-container {
        grid-template-columns: 1fr; /* Force a single column */
        grid-template-rows: auto; /* Allow rows to grow dynamically */
        gap: 0.5rem; /* Add spacing between grid cells */
        width: 100%; /* Ensure the grid fits within the container */
        margin: 0 auto; /* Center the grid */
    }

    .grid-item,
    .grid-item2,
    .grid-item-header,
    .grid-item-header1,
    .grid-item-header2 {
        font-size: 1rem; /* Adjust font size for smaller screens */
        padding: 0.5rem; /* Reduce padding */
    }
    .grid-item, .grid-item2 {
        display: none; /* Hide grid items for smaller screens */
    }
    .column-grid-item, .column-grid-item2 {
        display: flex; /* Show column grid items with text next to them */
    }
    .grid-item-header {
        font-size: 1.5rem;
    }
    .grid-item-header1 {
        display: none;
    }
}

@media (max-width: 375px) {
    .pricing-container {
        grid-template-columns: 1fr; /* Keep a single column */
        gap: 0.5rem; /* Add spacing between grid cells */
    }

    .grid-item,
    .grid-item2,
    .grid-item-header,
    .grid-item-header1,
    .grid-item-header2 {
        font-size: 1rem; /* Further reduce font size */
        padding: 0.5rem; /* Maintain reduced padding */
    }
    .grid-item, .grid-item2 {
        display: none; /* Hide grid items for smaller screens */
    }
    .column-grid-item, .column-grid-item2 {
        display: flex; /* Show column grid items with text next to them */
    }
    .grid-item-header {
        font-size: 1.5rem;
    }
    .grid-item-header1 {
        display: none;
    }
}

@media (max-width: 320px) {
    .pricing-container {
        grid-template-columns: 1fr; /* Always a single column */
        gap: 0.5rem; /* Add spacing between grid cells */
    }

    .grid-item,
    .grid-item2,
    .grid-item-header,
    .grid-item-header1,
    .grid-item-header2 {
        font-size: 1rem; /* Further reduce font size for very small screens */
        padding: 0.4rem; /* Adjust padding */
    }
    .grid-item, .grid-item2 {
        display: none; /* Hide grid items for smaller screens */
    }
    .column-grid-item, .column-grid-item2 {
        display: flex; /* Show column grid items with text next to them */
    }
    .grid-item-header {
        font-size: 1.5rem;
    }
    .grid-item-header1 {
        display: none;
    }
}