/* General Styles */
* {
    margin: 0;
    padding: 0;
    font-family: "Playfair Display", serif;
}

:root {
    --pink: #F40194;
    --light-black: #292827;
    --dark-grey: #2a2928;
}

.c-white {
    color: #fff !important;
}

.c-pink-login {
    color: var(--green) !important;
}
.c-pink {
    color: var(--pink) !important;
}

.black {
    color: #000 !important;
}

.c-light-black {
    color: var(--light-black);
}

.bg-black {
    background-color: #000;
}

.bg-dark-grey {
    background-color: var(--dark-grey);
}

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

.fw-400 {
    font-weight: 400;
}

.fw-500 {
    font-weight: 500;
}

.fw-700 {
    font-weight: 700;
}

.fw-900 {
    font-weight: 900;
}

.font-2rem {
    font-size: 1.5rem;
}

.navbar {
    padding: 0;
    background-color: transparent;
    /* top: -5px; */
}

.navbar-toggler {
    padding: 0.25rem 0.75rem;
    font-size: 1.25rem;
    background-color: #1f1d1dcf !important;
    border: 1px solid transparent;
    border-radius: 0.25rem;
}

.nav-link {
    color: #fff !important;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}

.nav1 {
    margin-bottom: 10px;
}

.nav1 .nav-link {
    padding: 2px 10px !important;
}

a.nav-menu2 {
    padding: 0 1rem !important;
    border-right: 2px solid #fff;
}

.navbar-brand img {
    width: 60%;
    transition: height 0.3s ease;
}

.header-container {
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 10;
}

.banner-image,
.social-benifits,
.blogs {
    position: relative;
}

.banner-content,
.blog-container,
.social-benifits-content {
    position: absolute;
    /* Position the text on top of the banner */
    top: 50%;
    /* Vertically center the text */
    left: 16%;
    /* Horizontally center the text */
    transform: translate(0, -50%);
    /* Adjust centering */
    color: #fff;
    width: 65%;
}

.banner-content h1 {
    font-size: 4rem;
}

.metric span {
    font-size: 4.5rem;
}

.book-demo-login {
    background-color: var(--green);
    border-radius: 25px;
    margin-right: 10px;
    border: 2px solid var(--green);
}

.book-demo {
    background-color: var(--pink);
    border-radius: 25px;
    margin-right: 10px;
    border: 2px solid var(--pink);
}

.button {
    color: #fff;
    padding: 4px 10px;
    font-size: 12px;
    font-weight: 600;
    border-radius: 25px;
    border: 2px solid var(--pink);
}

.button:hover {
    color: #fff;
    text-decoration: none;
}

.signup-btn {
    background-color: var(--pink);
}


/* === animated metrics === */
.metrics-container {
    position: relative;
    /* anchor for absolutely-positioned children */
}

/* every metric starts transparent and stacked on top of each other */
.metric {
    position: absolute;
    top: 10%;
    left: 20%;
    /* width: 100%; */
    margin: 0;
    opacity: 0;
    animation: metricCycle 9s infinite;
}

/* stagger the start times */
.metric:nth-child(1) {
    animation-delay: 0s;
}

.metric:nth-child(2) {
    animation-delay: 3s;
}

.metric:nth-child(3) {
    animation-delay: 6s;
}

/* key-frames: 0-10 % fade-in | 10-30 % stay | 30-40 % fade-out */
@keyframes metricCycle {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }

    10% {
        opacity: 1;
        transform: translateY(0);
    }

    30% {
        opacity: 1;
        transform: translateY(0);
    }

    40% {
        opacity: 0;
        transform: translateY(-20px);
    }

    100% {
        opacity: 0;
        transform: translateY(-20px);
    }
}


.your-community ul li {
    list-style-type: none;
    font-size: 13px;
    padding-bottom: 0.4rem;
}

.your-community ul li img {
    width: 17px;
}

.your-community ul li a,
.your-community ul li a:hover {
    text-decoration: none;
    color: var(--light-black);
    cursor: default;
}

.footer-nav li,
.footer-nav-bottom li,
.social-links li {
    list-style-type: none;
    display: inline-block;
}

.footer-nav li a,
.footer-nav-bottom li a {
    color: #fff;
    text-decoration: none;
    border-right: 1px solid #fff;
    padding: 0px 10px;
    font-size: 12px;
}

.footer-nav-bottom li a,
.footer-content p {
    font-size: 10px;

}

.phone-link {
    font-size: 14px;
}

.phone-link a:hover {
    text-decoration: none;
    color: #fff !important;
    cursor: pointer;
}

.salon-terms-n-condition p,
.salon-terms-n-condition ul li,
.customer-terms-n-condition p,
.customer-terms-n-condition ul li {
    font-size: 14px;
}

.stat-block .number {
    font-size: 3.5rem;
}

.stat-block .label {
    font-size: 2rem;
    line-height: 1.15;
    color: #222;
    margin: 0;
}

/* #footer {
    z-index: -1;
    position: relative;
} */

.floating-wpp-button {
    width: 50px !important;
    height: 50px !important;
}

#WAButton {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 9999;
    width: auto;
    height: auto;
    pointer-events: auto;
}

#WAButton * {
    pointer-events: auto;
}

/* Media Queries */

/* ========== Small Screens (max-width: 768px) ========== */
@media (max-width: 768px) {
    nobr {
        white-space: wrap;
    }

    .header-container {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 999;
    }

    .large-screen {
        display: none;
    }

    .small-screen {
        display: block;
    }

    h1 {
        font-size: 2.5rem !important;
    }

    .navbar-toggler-right {
        padding-right: 0;
    }

    #header {
        background-color: #fff;
    }

    .navbar-nav .dropdown-menu,
    ul.navbar-nav,
    ul.navbar-nav li {
        background-color: #413f3f !important;
        text-align: center;
        padding-right: 0 !important;
        margin-bottom: 0;
        padding-bottom: .3rem;
        border: none;
    }

    /* ul.navbar-nav {
        padding-top: .3rem;
        padding-bottom: 1.3rem;
    } */

    a.dropdown-item {
        color: #fff;
        font-size: 13px !important;
        text-align: left;
    }

    .nav1 .nav-link,
    a.nav-menu2 {
        color: #fff !important;
        font-weight: 600 !important;
        font-size: 16px !important;
        padding: 15px 0;
        border-right: none;
    }

    /* a.nav-menu2 span {
        display: none;
    } */

    .navbar-brand img {
        width: 50%;
    }

    .talk-btn {
        font-size: 13px;
    }

    .banner-img {
        margin-top: 5rem;
        height: 75vh;
        width: 100%;
        object-fit: cover;
        max-width: 100%;
        display: block;
    }

    .social-benifits-banner-img {
        height: 60vh;
        width: 100%;
        object-fit: cover;
        max-width: 100%;
        display: block;
    }

    .blogs img {
        height: 80vh;
        width: 100%;
        object-fit: cover;
        max-width: 100%;
        display: block;
    }


    .banner-content {
        top: 40%;
    }

    .banner-content .row .col-md-7,
    .get-more .row .col-md-4 .row,
    .why-salon-owners .row .col-md-6 .row,
    .why-salon-owners-img,
    .cash-benifits-img,
    .join-your-community-img,
    .technology-feature-img {
        margin-bottom: 2rem !important;
    }

    .get-more .row .col-md-4 .row .col-md-4,
    .why-salon-owners .row .col-md-6 .row .col-md-3,
    .social-benifits-content .row .col-md-6 .col-md-12 .row .col-md-3,
    .larika-feature .row .col-md-6 .col-md-12 .row .col-md-3,
    .packages .row .col-md-4 {
        margin-bottom: 1rem !important;
    }

    .social-benifits-content,
    .blog-container {
        width: 85%;
        left: 10%;
    }

    .why-salon-owners .row .col-md-6 .row .col-md-3,
    .get-more .row .col-md-4 .row .col-md-4,
    .social-benifits-content .row .col-md-6 .col-md-12 .row .col-md-3,
    .larika-feature .row .col-md-6 .col-md-12 .row .col-md-3,
    .book-a-salon-anytime .row .col-md-6 .col-md-12 .row .col-md-3 {
        width: 30%;
    }

    .why-salon-owners .row .col-md-6 .row .col-md-9,
    .get-more .row .col-md-4 .row .col-md-8,
    .social-benifits-content .row .col-md-6 .col-md-12 .row .col-md-9,
    .larika-feature .row .col-md-6 .col-md-12 .row .col-md-9,
    .book-a-salon-anytime .row .col-md-6 .col-md-12 .row .col-md-9 {
        width: 70%;
    }

    .social-benifits-content .row .col-md-6 .col-md-12 .row:nth-child(3),
    .why-salon-owners-heading {
        padding-bottom: 1.5rem !important;
    }

    .get-more .row:nth-child(4) {
        padding-top: 0 !important;
    }

    .success-story .col-md-6:first-child,
    .party .col-md-6:first-child,
    #footer .col-md-3 {
        padding-bottom: 2rem;
    }

    .text-right {
        text-align: left !important;
    }

    .order-first {
        order: 1;
    }

    .stat-block {
        padding-bottom: 2rem;
        text-align: center !important;
    }

    /* .blog-container p {
        display: none;
    } */

    .blogs-read-more span {
        color: #fff !important;
        border-bottom: 6px solid #fe019a;
    }

    #footer img {
        width: 50%;
    }

    .social-links {
        padding-left: 1rem;
    }
}

/* ========== Medium & Large Screens (min-width: 768px) ========== */
@media (min-width: 768px) {

    /* Hide small-screen logo */
    .small-screen {
        display: none;
    }

    /* large logo is displayed */
    .large-screen {
        display: block;
    }

    .top-nav {
        /* position: fixed; */
        z-index: 999;
        width: 100%;
        padding-top: 1.5rem;
        padding-bottom: 1.5rem;
    }

    .no-border {
        border-right: none !important;
    }

    .blog-container {
        max-width: 500px;
    }

    .advantage-img {
        margin-top: -2.5rem;
        height: 380px;
    }

    .stat-block+.stat-block {
        border-left: 4px solid var(--pink);
    }
}

/* ========== Large Screens (min-width: 1500px) ========== */
@media (min-width: 1200px) {
    .container {
        max-width: 960px !important;
    }
}

/* ========== Large Screens (min-width: 1500px) ========== */
@media (min-width: 1500px) {
    .patient-story-img {
        width: 100% !important;
    }
}

/* ========== Device-Specific Breakpoints ========== */
@media only screen and (min-device-width: 1024px) and (max-device-width: 1366px) and (-webkit-min-device-pixel-ratio: 2) {
    .top-nav {
        width: 100%;
    }
}

@media only screen and (min-device-width: 834px) and (max-device-width: 1112px) and (-webkit-min-device-pixel-ratio: 2) {
    .top-nav {
        width: 100%;
    }
}

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 1) {
    .top-nav {
        width: 100%;
    }
}