/* === Reusable Colors === */
:root {
    --stone: #f3f3f3;
    --sky: #b6e1fa;
    --lime: #daff75;
    --forest: #082e2a;
}

.bg-stone{
    background-color:var(--stone);
    color:black;
}
.bg-lime{
    background-color:var(--lime);
    color:forest;
}
.bg-sky{
    background-color:var(--sky);
    color:forest;
}
.bg-forest{
    background-color:var(--forest);
    color:white;
}

/** key points **/
/* Style for Key Points Section */
.key-point {
    display: flex;
    align-items: center;
    font-family: 'Stratos Regular', sans-serif;
    font-size: 21px;
    font-weight: 700;
    margin-bottom: 15px;
    margin-top: 15px;
}

/* Tick Icon Styling */
.tick-icon {
    width: 45px; /* Adjusted for good fit */
    height: auto;
    margin-right: 25px; /* Ensures gap between tick and text */
}

/* Ensure Key Points are Left-Aligned */
.key-point span {
    text-align: left;
}

/* Sign Up Button */
.btn-signup {
    background-color: var(--sky);
    color: black;
    padding: 12px 24px;
    font-size: 1.2rem;
    font-weight: bold;
    margin-top: auto; /* Ensures button stays at bottom */
}

/* Lime Hover Effect */
.btn-signup:hover {
    background-color: var(--lime);
    color: black;
}

.text-highlight{
    background: var(--lime);
    color: var(--forest) !important;
}

/** ensuring links look good on weird colours **/
.bg-lime a:hover{
	background-color:white;
	text-decoration: underline !important;
}


.accordion-button:not(.collapsed) {
    color: var(--bs-accordion-active-color);
    font-weight:bold;
    background-color: var(--lime);
    box-shadow: inset 0 calc(-1* var(--bs-accordion-border-width)) 0 var(--bs-accordion-border-color);
}

.accordion-button:focus {
    box-shadow: none !important;
    outline: none !important;
}


.accordion-body {
    padding-left:50px;
    padding-right:50px;
}










.question-bar .form-control:focus,
.question-bar .form-select:focus,
.question-bar button:focus {
	outline: 0 !important;
	box-shadow: none !important;
}