Customizing Colors and the Visual Theme in Hotstar Clone

/* Hotstar.css — global background and navbar */
body {
    background: #0c111b;
}
.navbar {
    background: #0c111b;
}

/* Hotstar.css — hero slide overlay gradient */
.slide-content {
    background: linear-gradient(to right, #030b17 80%, #0c111b00);
}

/* Hotstar.css — subscribe button (primary accent) */
.sub-btn {
    background: #1f80e0;
}

/* Hotstar.css — search box focus indicator */
.search-box:focus {
    border-color: #1f80e0;
}

/* Hotstar.css — watchlist alert card background */
.alert-content {
    background: #0c111b;
}

/* Hotstar.css — alert close button (shares primary accent) */
.alert-content button {
    background: #1f80e0;
}

/* Hotstar.css — card hover overlay */
.card-body {
    background: linear-gradient(to bottom, rgba(4,8,15,0), #192133 90%);
}

/* login.css — page background (same navy) */
body {
    background-color: #0c111b;
}

/* login.css — login card surface */
.container {
    background-color: #fff;
}

/* login.css — form button */
button {
    background-color: #095ae5;
}

/* login.css — form button hover state */
button:hover {
    background-color: #062a99;
}

/* Before */
.sub-btn {
    background: #1f80e0;
}
.search-box:focus {
    border-color: #1f80e0;
}
.alert-content button {
    background: #1f80e0;
}

/* After */
.sub-btn {
    background: #e03030;
}
.search-box:focus {
    border-color: #e03030;
}
.alert-content button {
    background: #e03030;
}