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

/**Navbar css styles**/
.navbar-brand {
    font-family: 'Brush Script MT', sans-serif;
    font-size: 28px;
    font-weight: bold;
}

.navbar-brand span {
    display: block;
    font-size: 12px;
    font-weight: 500;
    margin-top: -6px;
    margin-left: 5px;
}

.nav-link {
    font-weight: 600;
    color: black !important;
}

.nav-link:hover {
    color: #e53935 !important;
}

.sub-link:hover {
    color: #e53935 !important;
}

.nav-link.active {
    color: #e53935 !important;
}

.search-bar {
    max-width: 600px;
    width: 100%;
}

.search-button {
    background-color: #f44336;
    color: white;
    border: none;
}

.search-button:hover {
    background-color: #000;
    color: white;
}

.icon-with-badge {
    position: relative;
    margin-left: 20px;
}

.icon-badge {
    position: absolute;
    top: -8px;
    right: -10px;
    background-color: red;
    color: white;
    font-size: 12px;
    border-radius: 50%;
    padding: 2px 6px;
}

.price {
    font-size: 20px;
    font-weight: 700;
}

.mega-menu {
    width: 50vw;
}

/**home page css styles**/

.discount-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    background: red;
    color: white;
    padding: 5px 10px;
    font-size: 14px;
    font-weight: bold;
    border-radius: 5px;
}

/** product details css styles**/
.thumbnail-row {
    cursor: pointer;
    border-radius: 10px;
    overflow: hidden;
    transition: border 0.3s;
}

.thumbnail-row.active {
    border: 3px solid #0d6efd;
}

.thumbnail-row img {
    object-fit: cover;
    width: 100%;
    height: 100%;
}

.carousel-container {
    max-width: 700px;
    margin: auto;
}

.thumbnails-row {
    margin-top: 20px;
}

.size-btn {
    min-width: 48px;
    min-height: 48px;
    font-weight: 500;
    border-radius: 0.5rem;
}

.size-btn.active {
    background-color: #ed4242;
    color: #fff;
}

.color-option {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 2px solid #f59e0b;
    cursor: pointer;
    transition: border 0.3s;
}

.color-option.active {
    border: 3px solid #fff;
    box-shadow: 0 0 0 2px #f59e0b;
}