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

.heroContainer {
    min-height: 67vh;
}

.heroContainer figure {
    display: block;
    margin: auto;
}


html {
    scroll-behavior: smooth;
}
.heroContainerMain {
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.9),
        rgba(255, 255, 255, 0.1)
    ),
    url("/static/images/Designer.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.pBg {
    background: url("/static/images/aesthetic.png");
    background-repeat: no-repeat;
    background-position: left;
    background-size: contain;
}

.pBg1 {
    background: linear-gradient(
        to bottom,
        rgba(250, 247, 245, 0.9),
        rgba(255, 255, 255, 1)
    ),
    url("/static/images/aesthetic.png");
    background-repeat: repeat;
    background-position: right;
    background-size: contain;
    padding: 10px;
}
.active {
    background-color: #06b6d4 !important; /* cyan-500 */
}