/* Custom Colors */
:root {
    --pink: #bf2652;
}

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

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

.border-circle {
    border-style: solid;
    border-color: var(--pink);
}

.bg-circle {
    background-color: #232323cc;
}

.custom-stroke-text-effect-pink {
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke-width: 2px;
    -webkit-text-stroke-color: var(--pink);
    white-space: nowrap;
}

.custom-stroke-text-effect-light {
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke-width: 2px;
    -webkit-text-stroke-color: var(--light);
    white-space: nowrap;
}

.custom-stroke-text-effect-dark {
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke-width: 2px;
    -webkit-text-stroke-color: var(--dark);
    white-space: nowrap;
}

p.lead {
    font-size: 1.3em;
    font-weight: 500;
    line-height: 36.8px;
    line-height: 2.3rem;
    color: var(--tertiary);
}

.slide1-text {
    margin-top: 42%;
}
.slide2-text {
    margin-top: 65%;
}

.custom-hero-font-1 {
    font-size: calc(40px + 50 * ((100vw - 300px) / (1200 - 300)));
    line-height: calc(40px + 50 * ((100vw - 300px) / (1200 - 300)));
}

.custom-hero-font-4 {
    font-size: calc(20px + 20 * ((100vw - 300px) / (1200 - 300)));
    line-height: calc(20px + 20 * ((100vw - 300px) / (1200 - 300)));
}

.custom-stroke-text-effect-light {
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke-width: 2px;
    -webkit-text-stroke-color: var(--light);
    white-space: nowrap;
}

.custom-stroke-text-effect-pink {
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke-width: 2px;
    -webkit-text-stroke-color: var(--pink);
    white-space: nowrap;
}

.custom-el-1 {
    margin-top: -3vw;
    margin-right: 10vw;
    border-radius: 50%;
    width: 22vw;
    height: 22vw;
}

.custom-el-4 {
    height: 150px;
    display: block;
    margin-right: 14px;
    float: left;
}

#home-circle {
    z-index: -1;
}

html.sticky-header-active #header .header-body {
    border-bottom-color: var(--pink);
}

@media (max-width: 991px) {
    .custom-el-1 {
        width: 30vw;
        height: 30vw;
    }
}

@media (max-width: 590px) {
    .custom-el-1 {
        width: 35vw;
        height: 35vw;
    }

    #home-circle {
        margin-top: -10%;
    }

    .custom-el-4 {
        height: 90px;
    }

}
@media (max-width: 431px) {
    .custom-el-1 {
        width: 50vw;
        height: 50vw;
    }
}