@font-face {
    font-family: 'Poppins-Regular';
    src: url(../fonts/Poppins-Regular.ttf);
}

@font-face {
    font-family: 'Poppins-Light';
    src: url(../fonts/Poppins-Light.ttf);
}

@font-face {
    font-family: 'Poppins-SemiBold';
    src: url(../fonts/Poppins-SemiBold.ttf);
}

@font-face {
    font-family: 'Poppins-Bold';
    src: url(../fonts/Poppins-Bold.ttf);
}

@font-face {
    font-family: 'Cookie-Regular';
    src: url(../fonts/Cookie-Regular.ttf);
}

:root {
    --primary-color: #93338E;
    --primary-dark-color: #663171;
    --primary-light-color: #EDE9F4;
    --secondary-color: #E53F71;
    --grey-color: #7780A0;
    --grey-light-color: #F3F5F9;
    --black-color: #3D3357;
    --white-color: #FFFFFF;
    --yellow-color: #FFBC01;
}

*,
::after,
::before {
    box-sizing: border-box
}

html,
body {
    font-family: 'Poppins-Regular';
    color: var(--grey-color);
    overflow-x: hidden;
    background-color: var(--white-color);
}

.font-weight-bold {
    font-family: 'Poppins-Bold';
}

.font-weight-semibold {
    font-family: 'Poppins-SemiBold';
}

.font-weight-normal {
    font-family: 'Poppins-Regular';
}

/* Placeholder */
::-webkit-input-placeholder {
    /* Edge */
    color: var(--grey-color) !important;
    font-size: small;
}

:-ms-input-placeholder {
    /* Internet Explorer 10-11 */
    color: var(--grey-color) !important;
    font-size: small;
}

::placeholder {
    color: var(--grey-color) !important;
    font-size: small;
}

.text-small {
    font-size: small;
}

.text-very-small {
    font-size: 10px;
}

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

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

.text-grey-light {
    color: var(--grey-light-color) !important;
}

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

.yellow-color {
    color: var(--yellow-color);
}


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

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

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

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

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

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

small {
    font-size: 13px;
}

.curved-50 {
    border-radius: 50px !important;
}

.curved-60 {
    border-radius: 60px !important;
}

.curved-50 {
    border-radius: 50px !important;
}

.curved-30 {
    border-radius: 30px !important;
}

.curved-25 {
    border-radius: 25px !important;
}

.curved-20 {
    border-radius: 20px !important;
}

.curved-15 {
    border-radius: 15px !important;
}

.curved-10 {
    border-radius: 10px !important;
}

.curved-top-30 {
    border-top-left-radius: 30px !important;
    border-top-right-radius: 30px !important;
}

.curved-top-20 {
    border-top-left-radius: 20px !important;
    border-top-right-radius: 20px !important;
}

.curved-bottom-20 {
    border-bottom-left-radius: 20px !important;
    border-bottom-right-radius: 20px !important;
}

.curved-bottom-30 {
    border-bottom-left-radius: 30px !important;
    border-bottom-right-radius: 30px !important;
}

.curved-left-15 {
    border-top-left-radius: 15px !important;
    border-bottom-left-radius: 15px !important;
}

.curved-right-15 {
    border-top-right-radius: 15px !important;
    border-bottom-right-radius: 15px !important;
}

.btn-primary {
    background-color: var(--primary-color) !important;
    border: 1px solid var(--primary-color) !important;
}

.btn-primary:hover {
    background-color: var(--primary-dark-color) !important;
    border: 1px solid var(--primary-dark-color) !important;
}

.btn-secondary {
    background-color: #eceef5;
    border: 1px solid #eceef5;
    color: var(--black-color);
}

.btn-secondary:hover {
    background-color: #eceef5;
    border: 1px solid #eceef5;
    color: var(--black-color);
}

.btn-create {
    background-color: var(--primary-color);
    border: 1px solid var(--primary-color);
    color: var(--white-color);
    height: 46px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.btn-create:hover {
    background-color: var(--primary-dark-color);
    border: 1px solid var(--primary-dark-color);
    color: var(--white-color);
}

.btn-outline-black {
    background-color: var(--white-color);
    border: 1px solid #E8E8E8;
    color: var(--black-color);
    border-radius: 10px;
}

.btn-outline-black:hover {
    background-color: var(--black-color);
    border: 1px solid var(--black-color);
    color: var(--white-color);
    border-radius: 10px;
}

.btn-pill {
    border-radius: 50px;
}

.table-data .table th {
    font-family: 'Poppins-Bold';
    font-size: 13px;
    color: var(--black-color);
    padding: 15px;
    text-align: center;
    vertical-align: middle;
    background-color: var(--grey-light-color);
    border: 0;
}

.table-data .table td {
    font-size: 13px;
    color: var(--grey-color);
    vertical-align: middle;
    padding: 15px;
    border-color: #F0F3FE;
}

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

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

.table-data .btn-detail {
    background-color: var(--primary-light-color);
    width: 30px;
    height: 30px;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.table-data .btn-detail i {
    font-size: 16px;
    color: var(--primary-color);
}

.table-data table tbody tr:hover {
    --bs-table-hover-bg: var(--primary-light-color);
}

.table-data table tbody tr:hover .btn-detail {
    border: 1px solid var(--primary-color);
}

.banner .carousel-indicators [data-bs-target] {
    width: 10px;
    height: 10px;
    border-radius: 30px !important;
    border-top: none;
    border-bottom: none;
}

.banner .carousel-control-next,
.banner .carousel-control-prev {
    width: 5%;
}

.banner .carousel-control,
.banner .carousel-control {
    width: 40px;
    height: 40px;
    background-color: rgba(40, 40, 40, 0.7);
    border-radius: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.banner .carousel-control i,
.banner .carousel-control i {
    font-size: 20px;
}

.navbar {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 1rem;
}

.navbar-brand img {
    width: 52px;
    /* height: auto; */
}

.navbar .nav-link {
    color: var(--grey-color);
    font-size: 13px;
    padding-right: 1rem !important;
    padding-left: 1rem !important;
}

.navbar .nav-link .icon {
    color: var(--grey-color);
    font-size: 18px;
}

.navbar .btn-buy-now {
    background-color: var(--primary-color);
    color: var(--white-color);
}

.navbar .form-control:focus {
    box-shadow: none;
}

.navbar-fixed-top {
    top: 0;
    border-width: 0 0 1px;
    position: fixed;
    right: 0;
    left: 0;
    z-index: 1030;
}

.navbar .icon-cart {
    height: 40px;
    width: 40px;
    background-color: var(--light-grey-color);
    border-radius: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.navbar .icon-cart i {
    font-size: 20px;
}

.navbar .input-group-append .btn-primary {
    height: 35px;
    width: 35px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.navbar .input-group-append .btn-primary i {
    font-size: 16px;
}

.navbar .input-group .form-control:focus {
    box-shadow: none;
}


footer {
    background-color: #D9CDEE;
    padding: 30px;
    position: relative;
}

footer .logo img {
    width: 110px;
    /* height: auto; */
}

@media screen and (max-width: 768px) {
    footer {
        background-color: #D9CDEE;
        padding: unset;
        padding-bottom: 30px;
        position: relative;
    }

    footer .logo img {
        width: 50px;
        /* height: auto; */
    }
}

footer hr {
    border-top: 1px solid #E8E8E8;
    opacity: 1;
}

footer .icon-medsos {
    width: 30px;
    height: 30px;
    border-radius: 50px;
    border: 1px solid var(--grey-color);
    display: flex;
    justify-content: center;
    align-items: center;
}

footer .icon img {
    height: 40px;
}