:root {
    --bs-font-sans-serif: "NotoSans", "Roboto", "Segoe UI", "Helvetica Neue", "Arial", system-ui, sans-serif;

    --dx-color-darkblue: #374971;
    --dx-color-darkpurple: #7169A8;

    --dx-fs-1: 1.5rem;
    --dx-fs-2: 1.6rem;
    --dx-fs-3: 1.85rem;
    --dx-fs-4: 2.3rem;
    --dx-navbar-height: 80px;
    --dx-hero-height: 578px;
    --dx-section-bg-color: white;
    --dx-section-tap-radius: 29px;
    --dx-section-tap: calc(var(--dx-section-tap-radius) * 2);
    --dx-section-padding-bottom: calc(2.5 * var(--dx-section-tap));
    --dx-process-list-number-diameter: 44px;
    --dx-plans-list-gradient-start: #3F4773;
}

html {
    scroll-padding-top: calc(var(--dx-section-tap) - 10px);
}

body {
    counter-reset: section;

    font-size: 16px;
    padding-top: var(--dx-navbar-height);
}

h2 {
    font-size: var(--dx-fs-4);
}

.dx-fs-1 {
    font-size: var(--dx-fs-1);
}

.dx-fs-2 {
    font-size: var(--dx-fs-2);
}

.dx-fs-3 {
    font-size: var(--dx-fs-3);
}

.dx-fs-4 {
    font-size: var(--dx-fs-4);
}

.text-justify {
    text-align: justify !important;
}

.navbar {
    --bs-navbar-nav-link-padding-x: 1rem;

    height: var(--dx-navbar-height);
    font-size: var(--dx-fs-2);
    background-color: #A19CB7;
    background-image: url(../img/nav-bg.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
}

.section {
    background-color: var(--dx-section-bg-color);
    font-size: var(--dx-fs-1);
    padding: calc(1.5 * var(--dx-section-tap));
    padding-bottom: var(--dx-section-padding-bottom);
    margin-top: calc(-1 * var(--dx-section-tap));
    mask: radial-gradient(var(--dx-section-tap-radius) at 50% 0, #0000 98%, #000) no-repeat;

    &:last-child {
        padding-bottom: var(--dx-section-tap);
    }

    p {
        /* padding: 1rem 0; */
        margin: 1.5rem 0;
    }
}

#home {
    --dx-section-bg-color: var(--dx-color-darkblue);
    padding: 0 0 var(--dx-section-tap) 0;
    background-color: var(--dx-section-bg-color);
}

#hero {
    height: var(--dx-hero-height);
    overflow: hidden;

    .carousel-caption {
        bottom: 0;
    }

    .carousel-control {
        width: 8%;
        span {
            width: 4rem;
            height: 4rem;
            filter: drop-shadow(0px 0px 3px rgba(0, 0, 0, 0.5));
        }
    }

    img {
        height: var(--dx-hero-height);
        object-fit: cover;
    }
}

#headline {
    
    margin: -4rem;
}

#tagline {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 85px;
    color: white;
    font-weight: 300;
    margin: 0px;
    padding: 1.5rem;
    
}

#about, #process {
    /* mask: radial-gradient(60px at 50% -10px, #0000 98%, #000); */
    --dx-section-bg-color: #D6C2DF;
}

#about {
    background-image: url(../img/about-bg-cartridge.png);
    background-position: left 10% bottom var(--dx-section-tap);
    background-repeat: no-repeat;
    background-size: 48% auto;
    padding-bottom: var(--dx-section-tap);

    #about-aamst {
        margin-right: -20%;
    }
}

#why, #plans {
    color: #fff;
    --dx-section-bg-color: var(--dx-color-darkpurple)
}

#why-list .card {
    color: #314063;
    background-color: #908BB7;
    border-radius: var(--dx-fs-1);
    line-height: 120%;

    h3 {
        font-size: var(--dx-fs-4);
    }
    
    img {
        max-height: 118px;
        object-fit: contain;
        margin: 2.5rem auto 0;
    }
}


#cases {
    --dx-section-bg-color: #6FC9C8;
}

#process {
    background-image: url(../img/process-bg.png);
    background-repeat: no-repeat;
    background-position: left bottom var(--dx-section-tap);
    background-size: contain;

    #process-list {
        img {
            max-height: 138px;
            object-fit: contain;
            margin: 0.5rem auto;
        }
    }
    .process-list-number {
        color: #fff;
        background-color: var(--dx-color-darkpurple);
        margin: 0 auto;
        display: flex;
        justify-content: center;
        align-items: center;
        width: var(--dx-process-list-number-diameter);
        height: var(--dx-process-list-number-diameter);
        /* line-height: var(--dx-process-list-number-diameter); */
        border-radius: 50%;
    }
}

#plans {

    #plans-dog {
        --dx-plans-bg: url(../img/plans-dog-bg.png);
    }

    #plans-cat {
        --dx-plans-bg: url(../img/plans-cat-bg.png);
    }

    .plans-content {
        background-image: url(../img/plans-gradient-bg.png), var(--dx-plans-bg);
        background-repeat: no-repeat, no-repeat;
        background-position: center, center;
        background-size: 100% 100%, auto;
    }
}

#footer {
    background-color: #E4EFFA !important;

    #contact {
        margin-top: 0;
        padding: var(--dx-section-tap) 0;
    }

}

@media (max-width: 768px) {
    #plans {
        padding-left: var(--dx-section-tap);
        padding-right: var(--dx-section-tap);
    }
}

@media (max-width: 576px) {
    :root {
        font-size: 14px;
    }

    .section {
        padding-left: var(--dx-section-tap);
        padding-right: var(--dx-section-tap);
    }

    #plans {
        padding-left: 0;
        padding-right: 0;
    }
}

@media(max-width: 375px) {
    :root {
        font-size: 12px;
    }
}