:root {
    --body-font: system-ui, sans-serif;
    --font-size: 16px;
}

body {
    font-family: var(--body-font);
    font-size: var(--font-size);
    line-height: 1.4;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    text-wrap: balance;
    text-transform: capitalize;
}

.wrapper {
    max-width: 900px;
    margin-inline: auto;
}

.flex-header {
    display: flex;
}

.orange {
    color: #ff9900;
}

.wrap-none {
    text-wrap: none;
}

.red {
    color: #ff0000;
}

.cemter {
    text-align: center;
}

.underline {
    text-decoration: underline;
}

.bold {
    font-weight: bold;
}

.padding-bottom {
    padding-bottom: 1rem;
}

.cta-btn {
    background-color: #ff9900;
    color: #333;
    padding: 10px 20px;
    border-radius: 5px;
    text-decoration: none;
    font: inherit;
}

.cta-btn-grey {
    text-decoration: none;
    color: grey;
}

header {
    padding: 3rem 0 0 0 !important;
    text-align: center;
    background-color: #333;
    padding: 0;
    color: #fff;
}

header .wrapper .left {
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    flex: 1;
}

header .wrapper .left .h-1 {
    line-height: 1 !important;
    padding-top: 10px;
    text-transform: capitalize;
}

header .wrapper .left .h-2 {
    font-style: italic;
    font-weight: 400;
    margin-top: 10px;
    font-size: 1.3rem;
    padding-bottom: 10px;
}

header .wrapper .right {
    flex: 1;
}

header .wrapper .right video {
    width: 100%;
}

/* BTN Bar */
.btn-bar {
    background-color: #333;
    text-align: center;
    padding: 3rem 0;
}

.btn-bar>a {
    margin-right: 1rem;
}

.btn-bar .cta-btn {
    background-color: #ff9900;
    color: #333;
    padding: 10px 20px;
    border-radius: 5px;
    text-decoration: none;
    font: inherit;
}

.btn-bar .cta-btn-grey {
    text-decoration: none;
    color: grey;
}

/* Details CSS */
.details {
    max-width: 600px;
    margin-inline: auto;
    padding: 3rem 0;
}

.details h3 {
    padding: 0 0 2rem 0;
}

.details .wrapper ul {
    list-style-position: inside !important;
    list-style-type: none;
    /* Removes default bullet points */
    padding-left: 0;
    /* Optional: Removes default padding */
}

.details .wrapper ul li {
    position: relative;
    /* Establishes a positioning context */
    padding-left: 20px;
    /* Makes space for the check mark */
    margin-top: 1rem;
    /* Keeps original top margin */
}


.details .wrapper ul li::before {
    content: "✓";
    /* Unicode character for check mark */
    position: absolute;
    /* Absolutely position the check mark */
    left: 0;
    /* Align to the left */
    top: 0;
    /* Align to the top */
    color: #333;
    /* Check mark color */
}

.details .btn-wrapper {
    padding: 3rem 0;
    text-align: center;
}

.details .btn-wrapper a {
    margin-right: 1rem;
}

.details .wrapper .details-p {
    margin-top: 1rem !important;
}


/* Footer CSS */
footer {
    text-align: center;
    padding: 3rem;
}

footer a {
    display: inline-block;
    margin-top: 1rem;
    text-decoration: none;
    margin-right: 1rem;
    color: #a6a6a6;
}

/* Media Query */
@media (max-width: 768px) {
    .wrapper {
        padding: 0 10px 0 10px !important;
    }

    .wrapper .h-1 {
        line-height: 1 !important;
    }

    .btn-wrapper {
        padding-top: 2rem;
    }

    .three-rem {
        margin: 3rem 0 !important;
        text-align: center;
    }

    .three-rem a {
        margin-right: 1rem;
    }
}