/* custom lavender color */
:root {
    --lavender-accent: #d0ccff;
}

.text-lavender {
    color: var(--lavender-accent);
}

.bg-lavender {
    background-color: var(--lavender-accent);
}

/* custom font classes */
.montserrat-100 {
    font-family:
        "Montserrat",
        system-ui,
        -apple-system,
        sans-serif;
    font-optical-sizing: auto;
    font-weight: 100;
    font-style: normal;
}

.montserrat-200 {
    font-family:
        "Montserrat",
        system-ui,
        -apple-system,
        sans-serif;
    font-optical-sizing: auto;
    font-weight: 200;
    font-style: normal;
}

.montserrat-300 {
    font-family:
        "Montserrat",
        system-ui,
        -apple-system,
        sans-serif;
    font-optical-sizing: auto;
    font-weight: 300;
    font-style: normal;
}

.montserrat-400 {
    font-family:
        "Montserrat",
        system-ui,
        -apple-system,
        sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
}

.montserrat-500 {
    font-family:
        "Montserrat",
        system-ui,
        -apple-system,
        sans-serif;
    font-optical-sizing: auto;
    font-weight: 500;
    font-style: normal;
}

.montserrat-600 {
    font-family:
        "Montserrat",
        system-ui,
        -apple-system,
        sans-serif;
    font-optical-sizing: auto;
    font-weight: 600;
    font-style: normal;
}

.montserrat-700 {
    font-family:
        "Montserrat",
        system-ui,
        -apple-system,
        sans-serif;
    font-optical-sizing: auto;
    font-weight: 700;
    font-style: normal;
}

.montserrat-800 {
    font-family:
        "Montserrat",
        system-ui,
        -apple-system,
        sans-serif;
    font-optical-sizing: auto;
    font-weight: 800;
    font-style: normal;
}

.montserrat-900 {
    font-family:
        "Montserrat",
        system-ui,
        -apple-system,
        sans-serif;
    font-optical-sizing: auto;
    font-weight: 900;
    font-style: normal;
}

/* apply font to all body content */
body {
    font-family:
        "Montserrat",
        system-ui,
        -apple-system,
        sans-serif;
    font-weight: 400;
    font-optical-sizing: auto;
    font-style: normal;
    font-display: swap;
}

.btn.btn-custom {
    background-color: #6261613d;
    border: none;
}

/* apply default bootstrap style on checked */
.btn-check:not(:checked) + .btn.btn-custom:hover {
    background-color: #28282850;
}

.hero-title {
    /* min, default, max */
    /* font-size: clamp(10vw, 6rem, 14vw); */
    font-size: clamp(3rem, 18vw, 6rem);
    line-height: 1.2;
}

.section-title {
    /* font-size: clamp(2.2rem, 5vw, 3rem); */
    font-size: clamp(3vw, 3rem, 8vw);
}

.form-note {
    font-size: 0.7rem;
}

.button-padding {
    padding: 0.8rem 2.8rem;
}

.input-padding {
    padding: 0.4rem 0.6rem;
}

/* fix for sticky header hiding content */
/* for any target element */
:target {
    scroll-margin-top: 5.5rem;
}

/* change box shadow in default focus and for valid input */
.form-control:focus,
.was-validated .form-control:valid:focus,
.form-control.is-valid:focus {
    box-shadow: 0 0 0 0.25rem rgba(171, 157, 230, 0.6);
}

.was-validated .form-control:valid,
.form-control.is-valid {
    /* el sa7 el a5dar da mdaye2ni */
    background-image: none;
}

/* remove browser autofill background */
/* katar 5er gemini bsara7a */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    transition: background-color 5000s ease-in-out 0s !important;
}

/* prevent footer text overflow on extra small screens */
@media screen and (max-width: 576px) {
    footer {
        font-size: 0.8rem;
    }
}