* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --header-height: 70px;
    --bottom-nav-height: 76px;

    --header-bottom-gap: 3px;
    --footer-top-gap: 18px;

    --primary-dark: #031f4b;
    --primary-deep: #021838;
    --primary-darker: #01132f;

    --primary-card: #082d61;
    --primary-card-light: #0c3974;

    --primary-field: #09356f;
    --primary-field-focus: #0b3e81;

    --primary-blue: #0b6cff;
    --primary-blue-light: #1688ff;
    --primary-blue-dark: #0557d6;

    --accent-orange: #ff7a16;
    --accent-orange-dark: #e76300;

    --white: #ffffff;
    --muted-white: #d9e6f5;
    --muted-text: #b8c7da;

    --danger: #ff818c;
    --success: #38d996;
    --warning: #ffc857;

    --border-blue: rgba(44, 126, 220, 0.35);
    --border-light: rgba(255, 255, 255, 0.12);

    --page-background:
        radial-gradient(
            circle at 50% 5%,
            rgba(22, 105, 219, 0.20),
            transparent 28%
        ),
        linear-gradient(
            180deg,
            var(--primary-dark) 0%,
            var(--primary-deep) 58%,
            var(--primary-darker) 100%
        );

    --blue-gradient:
        linear-gradient(
            180deg,
            var(--primary-blue-light) 0%,
            var(--primary-blue) 55%,
            var(--primary-blue-dark) 100%
        );

    --orange-gradient:
        linear-gradient(
            180deg,
            var(--accent-orange) 0%,
            var(--accent-orange-dark) 100%
        );

    --card-shadow:
        0 14px 35px rgba(0, 0, 0, 0.18);

    --button-shadow:
        0 8px 20px rgba(11, 108, 255, 0.25);
}

html {
    width: 100%;
    min-height: 100%;
    scroll-behavior: smooth;
    background: var(--primary-darker);
}

body {
    width: 100%;
    min-height: 100vh;

    margin: 0 !important;

    padding-top:
        calc(
            var(--header-height) +
            var(--header-bottom-gap)
        ) !important;

    padding-right: 0 !important;

    padding-bottom:
        calc(
            var(--bottom-nav-height) +
            var(--footer-top-gap) +
            env(safe-area-inset-bottom)
        ) !important;

    padding-left: 0 !important;

    overflow-x: hidden;

    background: var(--page-background);
    color: var(--white);

    font-family:
        "Hind Siliguri",
        "Inter",
        "Segoe UI",
        sans-serif;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body.offcanvas-open {
    overflow: hidden;
}

img {
    max-width: 100%;
    height: auto;
}

button,
input,
select,
textarea {
    font-family: inherit;
}

button,
a {
    -webkit-tap-highlight-color: transparent;
}

button {
    appearance: none;
}

a {
    color: var(--primary-blue-light);
    text-decoration: none;
}

a:hover,
a:focus {
    color: var(--accent-orange);
}

.selfbgcolor {
    background-color: var(--primary-dark) !important;
    color: var(--white) !important;
}

.selfbggradient {
    background: var(--page-background) !important;
    color: var(--white) !important;
}

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

.banner {
    background-color: var(--primary-dark);
}

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

.theme-success {
    color: var(--success) !important;
}

.theme-warning {
    color: var(--warning) !important;
}

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

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

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

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

.bg-theme-gradient {
    background: var(--page-background) !important;
}

.bg-blue-gradient {
    background: var(--blue-gradient) !important;
}

.bg-orange-gradient {
    background: var(--orange-gradient) !important;
}

@media only screen and (max-width: 390px) {
    :root {
        --header-bottom-gap: 2px;
        --footer-top-gap: 16px;
    }
}

@media only screen and (min-width: 992px) {
    :root {
        --header-bottom-gap: 5px;
        --footer-top-gap: 20px;
    }
}