@import url('https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,300..900;1,300..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=La+Belle+Aurore&display=swap');

:root {
    --rs-primary: #145380;
    --rs-secondary: #1ba4ab;
    --rs-tertiary: #75cedc;
    --rs-pearl-rose: #efdfd7;
    --rs-fresh-mint: #e9f3ef;
    --rs-fine-blue: #c1e0df;
    --bs-body-color: rgb(28, 10, 37);
    --bs-secondary-rgb: rgb(174, 50, 35);
    --rs-orange: rgb(219, 50, 35);
    --bs-dark-rgb: rgb(28, 10, 37);
    --rs-peach: #fae8ee;
    --rs-dark_peach: rgb(242, 200, 196);
    --rs-dark_purple: #4a1a61;
    --rs-light_purple: rgba(113, 44, 249, 0.15);
    --rs-taupe: rgb(244, 240, 240, 0.5);
    --rs-text-primary: #145380;
    --rs-text-secondary: #1ba4ab;
    --rs-text-inverted: #ffffff;
    --rs-background-white: #ffffff;
    --rs-background-purple: #4a1a61;
    --rs-background-light: #f9f7f7;
    --rs-background-very-light: #F4F4F4;
    --rs-cta-color: #efdfd7;
    --rs-cta-hover: #ffd86e;
    --rs-footer-text: #ffffff;
    --rs-purple: #68227f;
    --rs-background-land3-1: rgb(74, 26, 97, 0.1);
    --rs-background-land3-2: rgb(228, 73, 45, 0.1);
    --rs-background-land3-3: rgb(244, 244, 244, 1);
    --rs-background-land3-4: rgb(136, 69, 153, 0.05);
    --rs-footer-background: #ededed;
    scroll-behavior: smooth;
}

html {
    scroll-padding-top: 96px;
    overflow-x: hidden;
}

body {
    overflow-x: hidden;
    font-family: "Figtree", sans-serif;
}

h1, h2, h3, h4, h5, .h1, .h3 {
    font-family: "Figtree", sans-serif;
    font-weight: 700;
}

p {
    font-size: 18px;
}

#navbar-offer {
    padding: 0 0.125em;
}

.navbar-nav > .nav-link:hover {
    text-decoration: underline;
}

.navbar-nav > .nav-link.active {
    color: var(--rs-primary);
    text-underline-color: var(--bs-body-color);
    text-decoration: underline;
}

.dropdown:hover .dropdown-menu {
    display: block;
    margin-top: 0;
}

.reset-bg-primary {
    background-color: var(--rs-primary);
}

.reset-bg-secondary {
    background-color: var(--rs-secondary);
}

.reset-bg-tertiary {
    background-color: var(--rs-tertiary);
}

.reset-bg-mint {
    background-color: var(--rs-fresh-mint);
}

.reset-bg-rose {
    background-color: var(--rs-pearl-rose);
}

.text-orange {
    color: var(--bs-secondary-rgb);
}

.text-rs-primary {
    color: var(--rs-primary);
}

.text-rs-secondary {
    color: var(--rs-secondary);
}

.text-rs-tertiary {
    color: var(--rs-tertiary);
}

.text-light_orange {
    color: var(--rs-orange);
}

#email-modal-button {
    border: 0;
    border-top-left-radius: var(--bs-border-radius-xl) !important;
    border-top-right-radius: var(--bs-border-radius-xl) !important;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    padding: var(--bs-btn-padding-y) 3em;
}

#carouselSlides .carousel-item > img {
    max-height: 720px;
    margin-left: 50%;
    transform: translateX(-50%);
}

@media (max-width: 767.98px) {
    #carouselSlides .carousel-item > img {
        height: 472px;
    }
}

.reset-carousel-indicators.carousel-indicators [data-bs-target] {
    background: #D9D9D9;
    opacity: 1;
    height: 8px;
    width: 8px;
    border: 0;
    border-radius: 50%;
}

.reset-carousel-indicators.carousel-indicators [data-bs-target].active {
    background: var(--rs-primary);
}

.smooth-scroll {
    scroll-behavior: smooth;
}

@media (max-width: 399.98px) {
    .navbar-brand img {
        width: 108px;
    }
}

@media (min-width: 400px) and (max-width: 575.98px) {
    .navbar-brand img {
        width: 144px;
    }
}

@media (min-width: 576px) and (max-width: 767.98px) {
    .navbar-brand img {
        width: 160px;
    }
}

@media (min-width: 768px) {
    .navbar-brand img {
        width: 180px;
    }
}

.bg-peach {
    background-color: var(--rs-peach);
}

.bg-dark_peach {
    background-color: var(--rs-dark_peach);
}

.bg-orange {
    background-color: #ae3225;
}

.bg-light_orange {
    background-color: var(--rs-orange);
}

.bg-light_purple {
    background-color: var(--rs-light_purple);
}

.bg-taupe {
    background-color: var(--rs-taupe);
}

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

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

.text-peach {
    color: var(--rs-dark_peach);
}

.text-rose {
    color: var(--rs-pearl-rose);
}

.text-mint {
    color: var(--rs-fresh-mint);
}

.text-blue {
    color: var(--rs-fine-blue);
}

.divider-peach {
    background-color: var(--rs-dark_peach);
    width: 4em;
    height: 0.25em;
    margin: 1em 0;
}

.divider-gray {
    background-color: var(--bs-gray-400);
    width: 4em;
    height: 0.25em;
    margin: 1em 0;
}

.number-circle {
    font-size: 16px;
    border-radius: 50%;
    padding-top: 0.125em;
    height: 2em;
    width: 2em;
    border: 2px solid rgb(28, 10, 37);
    text-align: center;
    margin: 1em auto;
}

.step-spacer {
    background-color: rgb(28, 10, 37);
    width: 100%;
    height: 0.25em;
    margin: auto;
}

.mt-n8 {
    margin-top: -4em;
}

.mt-n10 {
    margin-top: -5em;
}

.card-faq {
    border: 2px solid var(--rs-dark_peach);
}

.survey-content {
    transition: opacity 0.6s ease;
}

.survey-content.inactive {
    height: 0;
    opacity: 0;
    overflow-y: hidden;
}

.survey-content.active {
    display: grid;
    gap: 1rem;
    height: 100%;
    opacity: 1;
}

#progress-indicator {
    transition: left 0.6s ease;
}

.btn-orange {
    background-color: var(--rs-orange);
    border-color: var(--rs-orange);
    color: white;
}

.btn-orange:hover {
    background-color: var(--rs-orange);
    border-color: var(--rs-orange);
    color: var(--bs-body-color)
}

.bg-dark_purple {
    background-color: rgb(28, 10, 37);
}

.bg-purple {
    background-color: var(--rs-dark_purple)
}

.link-dark {
    color: rgb(28, 10, 37);
}

#modelLoader {
    height: 256px;
    width: 256px;
}

.reset-btn-primary {
    color: #ffffff;
    background-color: var(--rs-primary);
    border-color: var(--rs-primary);
}

.reset-btn-primary:hover {
    color: #ffffff;
    background-color: var(--rs-secondary);
    border-color: var(--rs-secondary);
}

.btn-primary {
    background-color: var(--bs-body-color);
    border-color: var(--bs-body-color);
}

.btn-outline-primary {
    color: var(--bs-body-color);
    border-color: var(--bs-body-color);
}

.btn-outline-primary:hover {
    background-color: var(--bs-body-color);
}

.btn-check:checked + .btn-outline-primary {
    border-color: var(--bs-body-color);
    background-color: var(--bs-body-color);
}

.btn-check:hover + .btn-light {
    border-color: var(--bs-body-color);
}

.btn-check:checked + .btn-light {
    background-color: var(--bs-body-color) !important;
    border-color: var(--bs-body-color) !important;
    color: #ffffff !important;
    font-weight: bold;
}

.btn-check:hover + .btn-dq, .border-orange {
    border-color: var(--rs-orange);
}

.btn-check:checked + .btn-dq {
    background-color: var(--rs-orange) !important;
    border-color: var(--rs-orange) !important;
    color: #ffffff !important;
}

.border-dark {
    color: var(--bs-body-color);
    border-color: var(--bs-body-color);
}

.form-check-input {
    height: 1.25em;
    width: 1.25em;
}

.form-check-input:checked[type=radio], .form-check-input:checked[type=checkbox] {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/%3e%3c/svg%3e");
    background-color: var(--bs-body-color);
}

.video-fluid {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
}

.video-fluid iframe, .video-fluid video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.divider-rose {
    background-color: var(--rs-pearl-rose);
    width: 4em;
    height: 0.25em;
    margin: 1em 0;
}

#consentForm {
    height: 18em;
}

#languageSelector .nav-pills .nav-link {
    color: var(--bs-body-color);
    border: var(--bs-body-color) 1px solid;
}

#languageSelector .nav-pills .nav-link.active {
    background-color: var(--bs-body-color);
}

#priceSelector .nav-link.active, #languageSelector .nav-link.active {
    color: #ffffff;
    background-color: #ffffff;
    border: 3px solid var(--rs-purple) !important;
}

#priceSelector .display-1 {
    font-family: "Figtree", sans-serif;
    font-size: 55pt;
}

.border-pricing {
    border: 3px var(--bs-secondary-rgb) solid;
}

.btn-arch {
    width: 100%;
    text-align: left;
    padding-left: 2em;
}

#planForm #nav-pricing-tab .btn-arch::before, #pricingArchForm .btn-arch::before {
    position: absolute;
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, .25);
    content: '';
    margin-left: -1.5em;
    height: 1.25em;
    width: 1.25em;
    background-color: #fff;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

#planForm #nav-pricing-tab .btn-arch.active::before, #pricingArchForm .btn-check:checked + .btn-arch::before {
    content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/%3e%3c/svg%3e");
    border-color: #0d6efd;
    background-color: var(--bs-body-color);
}

.price-card {
    border-style: solid;
    border-width: 8px;
    margin-bottom: 1.5em;
    background-color: #ffffff;
}

.price-card.active, #priceSelector .btn-check:checked + .btn {
    background-color: white;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}

.price-card.active .h3, .price-card.active .h1, .price-card.active h3 {
    font-weight: 700 !important;
}

#priceSelector .card:hover {
    border: 2px solid var(--rs-tertiary);
}

.img-sample {
    object-fit: cover;
}

@media (min-width: 768px) {
    #surveyForm .modal-body {
        height: 480px;
    }
}

.text-rotate {
    transform: rotate(-90deg);
}

#surveyForm .modal-body {
    height: 360px;
}

.carousel-pricing .carousel-item {
    height: 320px;
}

.carousel-pricing .carousel-indicators button {
    height: 8px;
    width: 8px;
    margin-right: 8px;
    margin-left: 8px;
    background-color: var(--bs-secondary-bg-subtle) !important;
}

.carousel-pricing .carousel-indicators .active {
    background-color: var(--rs-dark_purple) !important;
}

.carousel-pricing .carousel-control-next-icon, .carousel-pricing .carousel-control-prev-icon {
    width: 4rem;
    height: 4rem;
}

.carousel-pricing .carousel-control-next-icon:hover {
    filter: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%234a1a61'%3e%3cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e")
}

.carousel-pricing .carousel-control-prev-icon:hover {
    filter: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%234a1a61'%3e%3cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3e%3c/svg%3e")
}

#nav-examples.nav-pills .nav-link {
    color: #fff;
}

#nav-examples.nav-pills .nav-link.active {
    color: var(--bs-secondary-rgb);
    background-color: #fff;
}

.border-bottom-dashed {
    border-bottom-width: 2px !important;
    border-bottom-style: dashed;
}

strike {
    text-decoration-color: var(--bs-danger);
}

.text-silver {
    color: #c4c8cb;
}

.text-gold {
    color: #fce571;
}

.text-bronze {
    color: #b9916d;
}

.bg-gold {
    background-color: red;
}

.bg-silver {
    background-color: #c4c8cb;
}

.bg-bronze {
    background-color: blue;
}

#surveyForm #id_email::placeholder {
    color: var(--bs-dark-rgb);
}

.reset-text-error {
    font-size: .875em;
    color: var(--rs-orange);
}

.border-purple {
    border: 1px solid var(--rs-purple)
}

#photo-grid {
    display: grid;
    grid-template-columns: 25% 40% 35%;
}

#photo-grid > * {
    padding: 0.25em;
}

#photo-grid > .div1 {
    grid-area: 1 / 1 / 3 / 2;
}

#photo-grid > .div2 {
    grid-area: 1 / 2 / 2 / 3;
}

#photo-grid > .div3 {
    grid-area: 1 / 3 / 2 / 4;
}

#photo-grid > .div4 {
    grid-area: 2 / 2 / 3 / 3;
}

#photo-grid > .div5 {
    grid-area: 2 / 3 / 4 / 4;
}

#photo-grid > .div6 {
    grid-area: 3 / 1 / 4 / 3;
}

@media (max-width: 991.98px) {
    #photo-grid > .div1 {
        grid-area: 1 / 1 / 2 / 2;
    }

    #photo-grid > .div4 {
        grid-area: 2 / 1 / 3 / 4;
    }

    #photo-grid > .div5 {
        grid-area: 3 / 3 / 4 / 4;
    }
}

#photo-grid img {
    width: 100%;
    height: 100%;
    object-position: center;
    object-fit: cover;
}

#affordable-landing-hero {
    background-position: left;
    background-image: url('https://cdn.resetsmile.com/static/images/affordable_hero_bg.jpg');
    background-size: cover
}

.floating-badge {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 120px;
    height: auto;
}

.rounded-md-start {
    border-radius: var(--bs-border-radius-xl) var(--bs-border-radius-xl) 0 0;
}

.rounded-md-end {
    border-radius: 0 0 var(--bs-border-radius-xl) var(--bs-border-radius-xl);
}

.affordable-landing-image {
    overflow-x: hidden;
    height: 100%;
    width: 100%;
    object-fit: cover;
    border-radius: var(--bs-border-radius-xl) !important;
}

@media (min-width: 768px) {
    #affordable-landing-hero {
        background-position: center;
    }

    .affordable-landing-image {
        background-color: var(--rs-pearl-rose);
    }

    .rounded-md-start {
        border-radius: var(--bs-border-radius-xl) 0 0 var(--bs-border-radius-xl);
    }

    .rounded-md-end {
        border-radius: 0 var(--bs-border-radius-xl) var(--bs-border-radius-xl) 0;
    }

    .floating-badge {
        top: 80%;
        left: 100%;
    }
}

.admin-card td {
    vertical-align: baseline;
}

.tooth {
    stroke: #212529;
    stroke-width: 2px;
    fill: white;
}

.tooth:hover {
    fill: cyan;
    cursor: pointer;
}

.tooth.active {
    fill: cyan;
}