:root {
    --neutral-100: rgba(255, 253, 245, 0.7);
    --neutral-700: rgba(25,  31, 36, 0.7);
    --neutral-800: #191f24;

    --white: #fffdf5;
    --white-button: rgb(255, 253, 245);

    --orange: #ffaf0f;
    --green: #17ba99;
    --pink: #ed9de2;
    --blue:#01a2d5;

    --border-white: #e5e7eb;
    
}

/* Base Styles */
body {
    font-family: 'DM Sans', Arial, Helvetica, sans-serif;
    color: #333;
    font-size: 17px;
    line-height: 1.5;
    letter-spacing: -1px;
    background-color: var(--white);
}

/* Backgrounds */
.bg-neutral-800 {
    background-color: var(--neutral-800);
}

.bg-grd {
    background: linear-gradient(180deg, var(--neutral-100) 0%, rgba(255, 255, 255, 1) 100%);
}

.bg-grd-reverse {
    background: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, var(--neutral-100) 100%);
}
.bg-green {
    background-color: var(--green);
}
.bg-orange {
    background-color: var(--orange);
}

/* Colors */
.text-white {
    color: var(--white)!important;
}

.text-neutral-100 {
    color: var(--neutral-100)!important;
}

.text-neutral-700 {
    color: var(--neutral-700)!important;
}

.text-neutral-800 {
    color: var(--neutral-800)!important;
}

.text-orange {
    color: var(--orange)!important;
}

.text-green {
    color: var(--green)!important;
}

.text-pink {
    color: var(--pink)!important;
}

.text-blue {
    color: var(--blue)!important;
}

.text-hero {
    color: rgba(255, 253, 245, 0.7);
}

.testimonial {
    text-indent: -.75rem;
}

.testimonial:before {
    content: open-quote;
}

.testimonial:after {
    content: close-quote;
}

#contactFormStatus {
    color: var(--green);
}

#waitlistFormStatus {
    color: var(--green);
}


/* Border */
.border-white {
    border-color: var(--border-white)!important;
}  

.border-neutral-800 {
    border-color: var(--neutral-800)!important;
}

.border-green {
    border-color: var(--green)!important;
}

.border-neutral-700 {
    border-color: var(--neutral-700)!important;
}

/* Buttons */
.btn-white-button {
    background-color: var(--white-button);
    color: var(--neutral-800);
}

.btn-white-button:hover {
    background-color: var(--white-button);
    color: var(--neutral-800);
}

.btn-neutral-800 {
    background-color: var(--neutral-800);
    color: var(--white);
}

.btn-neutral-800:hover {
    background-color: #fff;
    color: var(--neutral-800);
}

.btn-neutral-800 i {
    color: var(--white);
}

.btn-neutral-800:hover i {
    color: var(--neutral-800);
}

.btn-green {
    background-color: var(--green);
    color: var(--white);
}

.btn-green:hover {
    background-color: var(--green);
    color: var(--white);
}

.modal-header .btn-close-white {
    color: var(--white)!important;
}

.modal-header .btn-close-white:hover {
    color: var(--blue)!important;
}

.modal-header .btn-close-white:focus {
    box-shadow: none;
}

.modal-body input, .modal-body textarea {
    color: var(--white);
    transition: all .2s ease-in-out;
}

#contactForm input, #contactForm textarea {
    color: var(--neutral-700);
    transition: all .2s ease-in-out;
}

.modal-body input:focus, .modal-body input:focus-visible, .modal-body textarea:focus, .modal-body textarea:focus-visible {
    box-shadow: none;
    border-color: var(--green)!important;
    outline: none;
}

.modal-body input:placeholder, .modal-body textarea:placeholder {
    color: var(--white);
}

.modal-body select {
    color: var(--white);
    transition: all .2s ease-in-out;
}

.modal-body select:focus, .modal-body select:focus-visible {
    box-shadow: none;
    border-color: var(--green)!important;
    outline: none;
}

.modal-body select option {
    color: var(--white);
    background-color: var(--neutral-800);
}   

.modal-body .form-check-input:checked {
    background-color: var(--green);
    border-color: var(--green);
}

/* Navbar */
.navbar-brand {
    font-weight: 700;
    font-size: 1.5rem;      
}

.navbar-dark .navbar-nav .nav-link {
    padding: 0.5rem 1rem;
}

.navbar-dark .navbar-nav .nav-link:hover {
    color: #fff!important;
}

/* Modal */
#waitlistModal, #contactModal {
    backdrop-filter: blur(7px);
    background-color: rgba(25,31,36, 0.91);
    opacity: 1 !important;
}

#waitlistModal sup, #contactModal sup {
    color: var(--orange);
}


/* Media Queries */
@media (max-width: 575.98px) {
    :root {
      --bs-container-padding-x: 2rem; /* default is 1rem (for .container) */
    }
  }

@media (max-width: 767.98px) {
      
   }

@media (min-width: 768px) and (max-width: 991.98px) {
   
}