*,
*::before,
*::after {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    line-height: 1;
}

:root {
    --gap: 2.5rem;
    /*
    --font-size-big-icon: clamp(3rem, 5vw, 4rem);
    --font-size-h1: clamp(2.25rem, 4vw, 3rem);
    --font-size-h2: clamp(1.8rem, 3vw, 2rem);
    --font-size-h3: clamp(1.6rem, 1.8vw, 1.7rem);
    --font-size-h4: clamp(1.3rem, 1.5vw, 1.4rem);
    --font-size-h5: clamp(1.1rem, 1.3vw, 1.2rem);
    */
    --font-size-big-icon: clamp(3rem, 5vw, 4rem);
    --font-size-h1: clamp(2.25rem, 4vw, 3rem);
    --font-size-h2: clamp(1.8rem, 3vw, 2rem);
    --font-size-h3: clamp(1.6rem, 1.8vw, 1.7rem);
    --font-size-h4: clamp(1.4rem, 1.6vw, 1.5rem);
    --font-size-h5: clamp(1.2rem, 1.4vw, 1.3rem);
    --font-size-p: clamp(1.0rem, 1.2vw, 1.1rem);
    --font-size-small: clamp(0.9rem, 1.1vw, 1rem);
    --font-size-page-name: clamp(0.8rem, 0.8vw, 0.8rem);
}

html {
    font-size: clamp(100%, 1vw, 125%);
    margin: 0;
}

body {
    font-family: 'Open Sans', sans-serif;
    color: #333;
    font-size: 1rem;
}

span.blue {
    color: blue;
}

#top p {
    text-align: right;
    font-weight: 100;
    line-height: 1.2;
}

header {
    padding: 18px 0;
    color: #6C0E0E;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#navigation {
    text-align: center;
    background: linear-gradient(217deg, rgba(153, 0, 0, 0.8), rgba(153, 0, 0, 0) 70.71%),
    linear-gradient(127deg, rgba(51, 0, 0, 0.8), rgba(204, 51, 0, 0.8) 70.71%),
    linear-gradient(336deg, rgba(102, 0, 0, 0.8), rgba(102, 0, 0, 0.8) 70.71%);
}

#navigation nav {
    padding: 1rem 0;
    display: flex;
    font-size: var(--font-size-p);
    justify-content: space-between;
}

#navigation nav a {
    color: white;
    text-decoration: none;
    margin: 0 1rem;
    display: inline-block;
    line-height: 1.6;
}

#hero {
    /*text-align: center;*/
    /*padding: 48px 24px;*/
    background-image: linear-gradient(rgba(64, 64, 64, 0.9), rgba(64, 64, 64, 0.9)),
    url('https://images.unsplash.com/photo-1541888698598-4096432cd70e');
    background-size: cover;
    background-position: center;
    background-blend-mode: multiply;
    color: #fff;
}

#hero h1 {
    /*font-size: 3.3rem;*/
    font-family: "Roboto Slab", serif;

    font-optical-sizing: auto;
    font-weight: 500;
    font-style: normal;
    /*font-size: 3rem;*/
    font-size: var(--font-size-h1);
    /*text-align: center;*/
    /*white-space: break-spaces;*/
    /*width: 80%;*/
    /*margin: 0 auto;*/
    white-space: pre-line;
    /*line-height: 1.2;*/
}

#hero h2 {
    font-size: var(--font-size-h2);
    /*text-align: center;*/
    font-weight: 100;
    line-height: 1.3;
}

em {
    color: red;
    font-weight: 400;
    font-size: var(--font-size-page-name);
    text-transform: lowercase;
}

em::before {
    content: "+";
    color: red;
    font-weight: bold;
}

#hero h3 {
    font-size: var(--font-size-h3);
    font-weight: normal;
    line-height: 1.4;
}

#hero .container {
    padding: 48px 0;
    display: flex;
    flex-direction: column;
    gap: 3rem;
    /*align-items: center;*/
}

#hero .cta-button {
    display: inline-block;
    padding: 12px 36px;
    background-color: #fff;
    color: #6C0E0E;
    text-decoration: none;
    border-radius: 38px;
}

#content {
    padding: 2rem 0 5rem 0;
}

strong {
    font-weight: 700;
}

main {
    display: flex;
    flex-wrap: nowrap;
    gap: 3rem;
    flex-direction: column;
    /*padding: 5rem 0;*/
}

#content p {
    line-height: 1.6;
    font-size: var(--font-size-p);
}

#content p small {
    display: block;
}

.padded {
    padding: 2rem
}

#content h1 {
    font-family: "Roboto Slab", serif;
    font-optical-sizing: auto;
    font-weight: 500;
    font-style: normal;
    color: #7A0910;
    font-size: var(--font-size-h1);
    text-align: left;
    /*white-space: break-spaces;*/
    /*width: 80%;*/
    /*margin: 0 auto;*/
    line-height: 1.2;
    /*white-space: pre-line;*/
}

#content h2 {
    /*font-size: 1.8rem;*/
    font-size: var(--font-size-h2);
    /*text-align: center;*/
    /*white-space: break-spaces;*/
    /*width: 80%;*/
    /*margin: 0 auto 0 auto;*/
    font-weight: 500;
    line-height: 1.3;
    /*white-space: pre-line;*/
}

#content h3 {
    font-size: var(--font-size-h3);
    font-weight: 400;
    line-height: 1.4;
}

#content h4 {
    font-size: var(--font-size-h4);
    font-weight: 400;
    line-height: 1.4;
    color: #333;
    text-transform: uppercase;
}

#content a {
    color: #7A0910;
    text-decoration: none;
}

#content a:visited {
    color: #370407;
    text-decoration: none;
}


#footer {
    background-color: #242424;
}

#footer ul li a {
    font-size: var(--font-size-small);
}

#footer ul li h3 {
    font-weight: 500;
    padding-bottom: 0.25rem;
}

#copyright {
    background-color: #191919;
    text-align: center;
    color: #eee;
    font-size: 85%;
}

#copyright .container {
    padding: 24px;
}

#copyright p {
    color: #ccc;
}

.container {
    max-width: 1100px;
    margin: 0 auto;
    /* outline: 2px solid green; */
}

footer {
    font-size: 85%;
    color: white;
}

footer .container {
    padding: var(--gap) 0;
}

footer ul {
    -moz-column-count: 1;
    column-count: 1;
    -moz-column-gap: 20px;
    column-gap: 2rem;
    -moz-column-fill: balance;
    column-fill: balance;
    padding: var(--gap) 0;
}

footer ul li {
    page-break-inside: avoid;
    -moz-column-break-inside: avoid;
    break-inside: avoid;
    /*width: 100%;*/
    display: flex;
    flex-direction: column;
    /*align-items: flex-start;*/
    gap: 0.5em;
    margin: 4rem 0 0 0;
}

footer ul li:first-of-type {
    margin: 0;
}

footer li a {
    color: #ccc;
    text-decoration: none;
    font-size: var(--font-size-p);
    line-height: 1.4;
}

footer img.logo {
    margin-bottom: 1rem;
    width: 120px;
    height: auto;
    display: block;
}

.columns {
    display: flex;
    flex-direction: row;
    gap: 3rem;
    /***/
    flex-wrap: nowrap;
}

.columns .column {
    /* background-color: yellow; */
    /*min-width: 350px;*/
    flex: 50%;
    display: flex;
    gap: var(--gap);
    flex-direction: column;
}

.columns .column-1 {
    flex: 1 1 33%;
    /*min-width: 250px;*/
    /*background-color: darksalmon;*/
}

.columns .column-2 {
    flex: 1 1 66%;
    /*min-width: 250px;*/
    /*background-color: aquamarine;*/

    /*flex: 2;*/
    display: flex;
    flex-direction: column;
    gap: var(--gap);
}

li {
    /*line-height: 1.6;*/
}

.columns .one-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--gap);
}

.columns .two-col {
    flex: 2;
    display: flex;
    flex-direction: column;
    gap: var(--gap);
}


ul.list {
    list-style: none;
    padding-left: 0;
}

ul.list li {
    margin-left: 2rem;
    /*list-style-type: square;*/
    line-height: 1.6;
    font-size: var(--font-size-p);

    position: relative;
    padding-left: 25px; /* Adjust space for the icon */

}

ul.list li::before {
    content: "\f058"; /* FontAwesome icon */
    font-family: "Font Awesome 6 Free";
    font-weight: 100;
    color: #900;
    position: absolute;
    left: 0;
    top: 6px;
    font-size: var(--font-size-small);
}

ul.regular {
    list-style: none;
    padding-left: 0;
}

ul.regular li {
    margin-left: 2rem;
    list-style-type: square;
    line-height: 1.6;
    font-size: var(--font-size-p);

    position: relative;
    /*padding-left: 25px;*/
}

ul.regular li::before {
    /*
    content: "\f111";
    font-family: "Font Awesome 6 Free";
    font-weight: 600;
    color: #900;
    position: absolute;
    left: 0;
    top: 10px;
    font-size: 6px;
    */
}

ul.contact-us {
    display: flex;
    gap: var(--gap);
    flex-direction: column;
    margin-left: 2rem;
}

ul.contact-us li {
    list-style: none;
    line-height: 1.6;
}

ul.contact-us li li {
    list-style: square;
    margin-left: 2rem;
}

img.full {
    width: 100%;
    height: auto;
}

.highlight {
    padding: 2rem;
    background-color: #F8F8E6; /*beige*/
    /*background-image: linear-gradient(rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.1)),
    url('../images/background.jpg');
    background-size: cover;
    background-position: center;
    background-blend-mode: multiply;*/
}

.white {
    padding: 2rem;
    background-color: white;
}

.to-right {
    margin-left: auto;
    text-align: right;
}

.to-left {
    margin-right: auto;
    text-align: left;
}

.price-schedule-holder {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    font-size: var(--font-size-p);
}

#content .price-schedule-holder p {
    font-size: 1rem;
}

.price-schedule {
    width: 100%;
    border-collapse: collapse;
}

.price-schedule th {
    background-color: white;
    font-weight: 500;
}

.price-schedule th,
.price-schedule td {
    text-align: left;
    padding: 1rem 0.5rem;
}

.price-schedule td:nth-child(2),
.price-schedule th:nth-child(2) {
    text-align: right;
}

.price-schedule tbody td {
    padding: 0.5rem;
}

caption {
    color: #333;
    /*font-size: var(--font-size-h4);*/
    font-size: clamp(1.3rem, 1.8vw, 1.5rem);;
    line-height: 100%;
    text-align: left;
    font-weight: 600;
    padding: 1rem 0.5rem 2rem;
}

.center {
    display: flex;
    justify-content: center;
}

.sky {

    background-size: 100% 100%;
    background-position: 0px 0px, 0px 0px, 0px 0px, 0px 0px, 0px 0px;
    background-attachment: fixed;
    background-size: 100% 100%;
    background-position: 0px 0px,
    0px 0px,
    0px 0px,
    0px 0px,
    0px 0px,
    0px 0px,
    0px 0px,
    0px 0px,
    0px 0px,
    0px 0px,
    0px 0px;
    background-image: radial-gradient(
            18% 28% at 24% 50%,
            #d3e4f0 7%,
            #073aff00 100%
    ),
    radial-gradient(18% 28% at 18% 71%, #ffffff59 6%, #073aff00 100%),
    radial-gradient(70% 53% at 36% 76%, #73a8ce 0%, #073aff00 100%),
    radial-gradient(42% 53% at 15% 94%, #d3e4f0 7%, #073aff00 100%),
    radial-gradient(42% 53% at 34% 72%, #eaf2f8 7%, #073aff00 100%),
    radial-gradient(18% 28% at 35% 87%, #2c1b0f 7%, #073aff00 100%),
    radial-gradient(31% 43% at 7% 98%, #73a8ce 24%, #073aff00 100%),
    radial-gradient(21% 37% at 72% 23%, #d3e4f0 24%, #073aff00 100%),
    radial-gradient(35% 56% at 91% 74%, #9fc6e3 9%, #073aff00 100%),
    radial-gradient(74% 86% at 67% 38%, #eaf2f8 24%, #073aff00 100%),
    linear-gradient(125deg, #d3e4f0 1%, #73a8ce 100%);
    background-attachment: fixed;
    background-color: #200;


}

.sky #content {
    padding: 0;
}

.home {
    background-color: #E8EEF7;
}

.red {
    color: red;
}

.buttons {
    /*margin: 24px 0 60px 0;*/
    display: flex;
    justify-content: space-between;
}

.btn {
    text-align: center;
    /*font-family: sans-serif;*/
    -webkit-border-radius: 200px;
    -moz-border-radius: 200px;
    border-radius: 200px;
    text-decoration: none;
    padding: 1rem 3rem;
    cursor: pointer;
    border: 3px solid #880000;
    font-size: var(--font-size-p);
    text-transform: uppercase;
    line-height: 1.25;
}

.btn .fa {
    padding-left: 2rem;
}

.new {
    outline: 1px solid red;
}

.arrow-next {
}

.arrow-prev {
    padding-right: 2rem;
}


.secondary {
    background-color: #fff;
}

#content .primary {
    color: #ffffff;
    background: #880000;
    display: block;
}

#content .primary:visited {
    color: #ffffff;
}


.looking {
    text-align: left;
    font-size: 108%;
    background-color: #fff;
    padding: 2rem;
}

#content .looking h1 {
    text-align: left;
}

#content .looking h1 i {
    font-size: var(--font-size-big-icon);
}

.looking li {
    margin: 1.5rem 0;
}

.subtitle {
}

.subtitle h2 {
    margin: 0;
    text-align: left;
}

.subtitle h3 {
}

blockquote {
}

blockquote p {
    /*font-size: 90%;*/
}

blockquote .author {
    margin-top: 1rem;
    font-weight: 600;
    text-align: right;
}

blockquote .description {
    color: #444;
    text-align: right;
    font-weight: 100;
    line-height: 1.25 !important;
    font-size: 85% !important;
}

.email::before {
    content: "\f0e0"; /* Unicode for Font Awesome envelope icon */
    font-family: "Font Awesome 5 Free"; /* Font Awesome font family */
    margin-right: 0.5rem; /* Space between icon and text */
    margin-left: -2rem;
}

.testimonials {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap);
}

.testimonials .column {
    flex: 1;
    min-width: 250px;
}

.testimonials .item {
    /*background-color: yellow;*/
    display: flex;
    flex-direction: column;
    gap: 4rem;
}


ul.cols-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Creates 3 equal-width columns */
}

ul.cols-3 li {
    margin-bottom: 10px; /* Optional: adds space between items */
}


.labmate-features {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
}

.labmate-features tbody {
    border-top: 1px solid #ddd;
}

.labmate-features th {
    text-align: left;
    font-weight: normal;
}

.labmate-features caption {
    /*font-weight: bold;*/
    /*margin-bottom: 10px;*/
    /*text-align: left;*/

    color: #333;
    font-size: var(--font-size-h3);
    line-height: 100%;
    margin-bottom: 1.5rem;
    text-align: left;
}

.labmate-features th,
.labmate-features td {
    border-bottom: 1px solid #ddd;
    line-height: 1.4;
    padding: 0.8rem;
    vertical-align: top;
}

.labmate-features tbody tr:nth-child(odd) {
    background-color: #f9f9f9;
}

.labmate-features tbody tr:nth-child(even) {
    /*background-color: #e9e9e9;*/
}

.labmate-features td:nth-child(2) {
    width: 4rem;
    text-align: center;
    color: #2CA01C;
}


.wrapper {
    /*
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    */
}


.clean-form-container {
    background-color: #fff;
    padding: 3rem;
    text-align: center;
    /*line-height: 100px;*/
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    gap: 2rem;
    align-items: center;
}


.clean-form-container h3 {
    font-size: var(--font-size-h3);
    font-weight: normal;
    line-height: 1.4;
}

.clean-form-container.login {
    /*width: 560px;*/
}

.clean-form-container.create-account {
    width: 1100px;
}

.login-form {
    width: 300px;
}


.login-form label {
    text-align: left;
}

.login-form input {
    font-size: inherit;
}

.login-form input[type=text],
.login-form input[type=password] {
    padding: 0.5rem;
}


.login-form fieldset {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    border: 0;
}


/* x */
.am-selector {
    display: flex;
    flex-wrap: wrap;
    background: #e5e5e5;
}

/* x */
.am-selector .input {
    position: absolute;
    opacity: 0;
}

/* x */
.am-selector .label {
    padding: 20px 30px;
    background: #e5e5e5;
    cursor: pointer;
    font-size: 1rem;
    transition: background 0.1s, color 0.1s;
    flex: 1;
    text-align: left;
    line-height: 1.2;
}

/* x */
.am-selector .label:hover {
    background: #d8d8d8;
}

/* x */
.am-selector .input:checked + .label {
    background: white;
    color: #000;
}

/* x */
.am-selector .tab-container {
    display: none;
    padding: 20px 30px 30px;
    background: #fff;
}

/* x */
.am-selector .input:checked + .label + .tab-container {
    display: block;
    width: 100%;
}


.features {
    width: 100%;
    border-collapse: collapse;
}

#content .features img {
    width: 100%;
    margin-bottom: 1rem;
    display: block;
}

#content .features h3 {
    font-size: var(--font-size-h3);
    font-weight: 100;
    text-transform: none;
    cursor: pointer;
    padding: 1rem;
}

#content .features td div {
    /*padding: 0.5rem 0;*/
}

.features tr {
    border-bottom: 1px solid #bbb;
}

.features td {
    text-align: left;
    vertical-align: top;
    padding: 0;
}

/* Column 1 width between 400px and 700px */
.features td:nth-child(1) {
    width: auto;
    max-width: 700px;
    /*min-width: 350px;*/
}

.features td:nth-child(1) span {
    display: none;
}

.features td:nth-child(2) {
    padding-left: 2rem;
    max-width: 350px;
}

/* Column 3 fixed width of 50px */
.features td:nth-child(3) {
    width: 50px;
    text-align: center;
}

.features td:nth-child(3) span {
    line-height: 3;
}

/*
#content .features h2 {
    text-align: left;

}
*/

#content .features caption {
    font-size: var(--font-size-h2);
    line-height: 100%;
    padding: 0.5rem 0;
    margin: 0;
    border-bottom: 1px solid #bbb;
}

#content .features h4 {
    font-size: var(--font-size-h4);
    font-weight: 100;
    text-transform: none;
    /*cursor: pointer;*/
    padding: 1rem;
}

#content .features h5 {
    font-size: var(--font-size-h5);
    font-weight: 400;
    line-height: 1.4;
    color: #333;
    text-transform: none;
    /*margin-top: 2.5rem;
    padding-bottom: 0.5rem;*/
    margin: 3.8rem 0 0.5rem 0;
}

ol.alpha {
    counter-reset: list;
    margin-left: 2rem;
}

ol.alpha > li {
    list-style: none;
    counter-increment: list;
    padding-left: 1rem;
    line-height: 1.6;
}

ol.alpha > li::marker {
    content: counter(list) ")\a0";
}

ol.alpha > li::marker {
    content: counter(list, lower-alpha) ")\a0";
}

.mini-menu {
    font-size: var(--font-size-page-name);
    text-transform: uppercase;
    /*display: flex;
    gap: 5px;
    flex-wrap: wrap;*/

    width: 100%;
    max-width: 1100px;
}

.mini-menu .slider-wrapper {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    width: 100%;
    -webkit-overflow-scrolling: touch;
    user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    cursor: grab;
    gap: 0.5rem;
}

.mini-menu a {
    background-color: #F5F5DC;
}


.mini-menu a,
.mini-menu span,
.mini-menu strong {
    padding: 0.5rem 1rem;
    border-radius: 2rem;

    flex: 0 0 auto;
    /*margin-right: 3px;*/

}

.mini-menu strong {
    font-weight: 700;
    display: inline-block;
}

.scrolling-wrapper::-webkit-scrollbar,
.slider-wrapper::-webkit-scrollbar {
    display: none;
}

.shadow {
    -webkit-box-shadow: 0px 0px 25px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 0px 0px 25px rgba(0, 0, 0, 0.1);
    box-shadow: 0px 0px 25px rgba(0, 0, 0, 0.1);
}

.expand-collapse-btn {
    border: 1px solid #333;
    cursor: pointer;
}

.accordion {
    display: inline-block;
    width: 100%;
}

.accordion .mini-menu {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 1rem;
    gap: 1rem;
}

.accordion-item {
    transition: max-height 0.3s ease;
    position: relative;
}

/*
.accordion-header {
    cursor: pointer;
    padding: 1rem;
    font-size: var(--font-size-h4);
}
*/

/*
.accordion-header {
    font-size: var(--font-size-h4);
    font-weight: 500;
    line-height: 1.4;
    color: #333;
    text-transform: none;
    margin: 2.5rem 0 0.5rem 0;
}
*/

#content .accordion-header {
    font-size: var(--font-size-h4);
    font-weight: 100;
    text-transform: none;
    cursor: pointer;
    padding: 1rem;
}


.accordion-header:visited {
    color: #707;
}

.accordion-header:focus {
    background-color: red;
}

.accordion-header:hover {
    background-color: #F8F8E6;
}

.accordion-item-content {
    padding: 0 1rem; /* DO NOT TOUCH */
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
    /*line-height: 130%;*/
    background-color: #F7F7F7;
    display: flex;
    flex-direction: column;
}

.accordion-item-content p,
.accordion-item-content img {
    padding: 1rem 0;
}


.accordion-item-content ul {
    margin-left: 24px;
    list-style: none;
    padding: 0.5rem 0;
}


/*.accordion-item-content*/
.code {
    font-family: monospace;
    font-size: var(--font-size-p);
    word-break: break-all;
}

.accordion-item-content ul.numbered {
    list-style: decimal;
    margin-left: 46px;
    background-color: #2CA01C;
}

.accordion-item-content ul li {
    font-size: var(--font-size-p);
    padding: 0.5rem 0;
}

/*
.accordion-item-content p {
    margin: 6px 0;
    line-height: 150% !important;
}
*/

.accordion-item-content > *:last-child {
    /*margin-bottom: 24px !important;*/
}


/* General reset for layout */


/* Style for the dialog */

dialog {
    margin: auto; /* Initially, position the dialog at the center and scale it vertically to 0 */
    /* Collapsed vertically */
    opacity: 0; /* Fully transparent */
    transition: opacity var(--display) ease-out, transform var(--display) ease-out;
    background-color: white;
    padding: 2rem;
    border: none;
    width: clamp(320px, 90%, 600px);
    overflow: hidden; /* Ensure content is hidden during the transition */
    z-index: -1; /* Initially place the dialog behind the content */
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.caption {
    /* background-color: orange; */
    display: flex;
    justify-content: space-between;
}

.caption .close {
    cursor: pointer;
}

/* When the dialog is open */
dialog[open] {
    opacity: 1; /* Fully visible */
    /* Expand to original height */
    z-index: 1000; /* Bring the dialog to the front when open */
}

/* Styling for dialog backdrop */
dialog::backdrop {
    background-color: rgba(0, 0, 0, 0); /* Transparent backdrop by default */
    transition: background-color var(--display), filter var(--display);
    filter: blur(1px); /* Slight blur effect */
    backdrop-filter: blur(1px); /* Optional: adds a blur effect to the backdrop */
}

:focus-visible {
    outline: none;
}


/* When the dialog is open, backdrop color changes */
dialog[open]::backdrop {
    background-color: rgba(0, 0, 0, 0.4); /* Semi-transparent dark backdrop */
}

.dialog-content p {

}

.open-modal {
    color: cornflowerblue;
    cursor: pointer;
    padding-left: 0.25rem;
}

.open-modal::before {
    content: "\f059"; /* FontAwesome icon */
    font-family: "Font Awesome 6 Free";
    font-weight: 600;
}

.dialog-content p {
    line-height: 1.3;
    font-size: var(--font-size-p);
}


@media (max-width: 700px) {
    #content .features table,
    #content .features tbody,
    #content .features tr,
    #content .features td {
        display: block;
        width: 100%;
    }

    #content .features h2 {
        margin-top: 0;
    }

    #content .features h5 {
        margin-top: 0.5rem;
    }

    #content .features tr {
        display: flex;
        flex-wrap: wrap;
    }

    /* Column 1 and 3 next to each other */
    #content .features td:nth-child(1) {
        flex: 1;
        display: flex;
        flex-direction: column; /* Stack items vertically in mobile */
        align-items: flex-start;
        align-items: center;
        width: 100%;
    }

    #content .features td:nth-child(1) h1 {
        margin: 0;
        flex: 1;
    }

    #content .features td:nth-child(1) span {
        display: block;
        font-weight: bold;
        color: #aaa;
        padding: 0.5rem;
    }


    #content .features td:nth-child(1) img {
        width: 100%; /* Make the image responsive */
        padding-bottom: 0.5rem;
        display: block;
    }

    #content .features td:nth-child(2) {
        width: 100%;
        padding-left: 0;
        max-width: 100%;
    }

    #content .features td:nth-child(2) p {
        padding-bottom: 0.5rem;
    }

    #content .features td:nth-child(3) {
        display: none; /* Hide third column */
    }

    #content .features td div {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        width: 100%;
        align-items: center;
        justify-content: space-between;
        flex-wrap: nowrap;
        align-items: flex-start;
    }

    #content .features h4 {
        /*margin-top: 0.5rem;*/
    }

    header {
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }

    #top p {
        text-align: center;
    }

    .columns {
        flex-direction: column;
    }
}

@media (min-width: 900px) {
    .am-selector .tab-container {
        order: 99;
    }
}

@media (max-width: 900px) {
    .am-selector {
        flex-direction: column;
    }
}

@media (min-width: 400px) {
    footer ul {
        -moz-column-count: 1;
        column-count: 1;
    }
}

@media (max-width: 480px) {

    #hero .cta-button {
        padding: 12px 18px;
        font-size: 14px;
    }

    #hero p {
        font-size: 14px;
    }

    .price-schedule th, .price-schedule td {
        /*padding: 6px;*/
    }
}

@media (min-width: 600px) {
    footer ul {
        -moz-column-count: 2;
        column-count: 2;
    }
}

@media (max-width: 600px) {
    ul.cols-3 {
        grid-template-columns: repeat(1, 1fr); /* Creates 3 equal-width columns */
    }

    .clean-form-container {
        width: 100vw;
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .wrapper {
        width: auto;
        height: auto;
    }

    .buttons {
        display: flex;
        align-items: center;
        gap: 2rem;
        flex-direction: column;
    }
}

@media (max-width: 768px) {
    #hero .cta-button {
        padding: 12px 18px;
        font-size: 16px;
    }

    #hero p {
        font-size: 16px;
    }
}

@media (max-width: 780px) {
    .columns {
        flex-direction: column;
    }

    .column-1 {
        width: 100%;
    }

    .column-2 {
        width: 100%;
    }

    img.full {
        /*max-width: 250px;*/
        margin: 0 auto;
        display: block;
    }
}

@media (max-width: 800px) {
    ul.cols-3 {
        grid-template-columns: repeat(2, 1fr); /* Creates 3 equal-width columns */
    }
}

@media (min-width: 900px) {
    footer ul {
        -moz-column-count: 3;
        column-count: 3;
    }
}

@media (max-width: 1132px) {
    .container {
        margin: 0 1rem;
    }
}

@media (orientation: portrait) {
    .sky #content {
        /*background-color: lightblue;*/
    }

    .wrapper {
        /*width: 100vw;*/
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .clean-form-container.login {
        /*width: 160px;*/
    }
}

@media (orientation: landscape) {
    .sky .container {
        /*background-color: lightgreen;*/
        margin: 0 auto;
    }

    .wrapper {
        width: 100vw;
        height: auto;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .clean-form-container {
        margin: 1rem auto;
    }
}