:root{
    --light-pink: #FBEBE4;
    --light-pink-hover: #ffd3c0;
    --pink: #3844e9;
    --pink-hover: #1976f7;
}

.bg-brand-light-pink{
    background-color: var(--light-pink);
}
.text-brand-light-pink{
    color: var(--light-pink);
}
.border-brand-light-pink{
    border: 1px solid var(--light-pink);
}
.btn-brand-light-pink{
    background-color: var(--light-pink) !important;
    color: black;
}
.btn-brand-light-pink:hover{
    background-color: var(--light-pink-hover) !important;
}
.border-brand-light-pink{
    border-color: var(--light-pink-hover) !important;
}

.bg-brand-pink{
    background-color: var(--pink);
}
.text-brand-pink{
    color: var(--pink);
}
.border-brand-pink{
    border: 1px solid var(--pink);
}
.btn-brand-pink{
    background-color: var(--pink) !important;
    color: white;
}
.btn-brand-pink:hover{
    background-color: var(--pink-hover) !important;
    color: white;
}
.btn-outline-brand-pink{
    border: 1px solid var(--pink) !important;
    color: var(--pink);
}
.btn-outline-brand-pink:hover{
    background-color: var(--pink-hover) !important;
    color: white;
}
.border-brand-pink{
    border-color: var(--pink-hover) !important;
}

.rounded-brand{
    border-radius: 25px;
}

.overflow-hidden{
    overflow: hidden;
}

.letter-spacing{
    letter-spacing: 2px;
}

.w-max-content{
    width: max-content;
}


.new-banner{
    overflow: hidden;
}

/* .new-banner{
    background-image: url("/new-banner-2.webp");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
} */

.new-banner-card{
    width: 300px;
}

.new-mob-banner-wrap{
    width: max-content;
}
.new-mob-banner-wrapper{
    overflow-x: auto;
}

.new-mob-banner-wrapper::-webkit-scrollbar{
    display: none;
}

@media screen and (width < 700px) {
    .bars-para{
        display: block
    }
    .logo-text{
        font-size: 16px;
    }
    .nav-bar-wrap div{
        display: flex;
        justify-content: space-between;
        text-align: start;
    }
    .nav-bar-wrap p:nth-child(1){
        text-align: start !important;
        width: auto;
    }
    .hero-section{
        max-height: 40vh;
        background-image: url("./new-bg.webp");
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
    }
    
    .hero-container{
        max-height: 40vh;
        align-content: center;
    }
    
    .hero-content{
        max-height: 40vh;
    }
    .card-img{
        margin-left: 0px !important;
    }
    .left-img{
        padding-right: 0px !important;
    }
    .new-banners-wrap-desk{
        display: none;
    }
}

@media screen and (width > 700px) {
    .new-mob-banner-wrapper{
        display: none !important;
    }
}