/* ============================================================
   DEEP BLUE GLASSY PREMIUM THEME
   Oracle BCS / LMS Frontend
   ============================================================ */

:root {

    /* ================= BRAND ================= */

    --blue-950: #02142f;
    --blue-900: #03265c;
    --blue-850: #043878;
    --blue-800: #064b96;
    --blue-700: #075fc2;
    --blue-600: #0878ee;
    --blue-500: #1595ff;
    --blue-400: #42b7ff;

    --primary: #0878ee;
    --primary-dark: #043878;
    --primary-deep: #02142f;

    /* ================= BACKGROUND ================= */

    --page-bg: #eef6ff;

    /* ================= GLASS ================= */

    --glass-white: rgba(255,255,255,.72);
    --glass-light: rgba(255,255,255,.58);
    --glass-strong: rgba(255,255,255,.86);

    --glass-blue:
        rgba(4, 56, 120, .72);

    --glass-blue-light:
        rgba(8, 120, 238, .12);

    --glass-border:
        rgba(255,255,255,.72);

    --glass-border-blue:
        rgba(42,155,255,.28);

    --blur: 20px;

    /* ================= SHADOW ================= */

    --shadow-sm:
        0 6px 20px rgba(2,40,90,.08);

    --shadow:
        0 12px 38px rgba(2,40,90,.12);

    --shadow-lg:
        0 20px 60px rgba(2,40,90,.18);

    --shadow-blue:
        0 12px 35px rgba(8,120,238,.20);

    /* ================= RADIUS ================= */

    --radius-sm: 10px;
    --radius-md: 14px;
    --radius-lg: 20px;
    --radius-xl: 28px;
}


/* ============================================================
   GLOBAL
   ============================================================ */

html {
    scroll-behavior: smooth;
}

body {

    position: relative;

    overflow-x: hidden;

    color: #16243a !important;

    background:

        radial-gradient(
            circle at 8% 5%,
            rgba(21,149,255,.14),
            transparent 25%
        ),

        radial-gradient(
            circle at 92% 15%,
            rgba(7,95,194,.12),
            transparent 27%
        ),

        radial-gradient(
            circle at 50% 100%,
            rgba(8,120,238,.08),
            transparent 30%
        ),

        linear-gradient(
            180deg,
            #f5faff 0%,
            #eaf4ff 100%
        ) !important;
}


/* ============================================================
   FLOATING RIBBON SYSTEM
   ছোট চিকন লম্বা নীল রিবন
   ============================================================ */

body::before,
body::after {

    content: "";

    position: fixed;

    z-index: -1;

    pointer-events: none;

    width: 4px;

    height: 190px;

    border-radius: 999px;

    opacity: .58;

    filter:
        blur(.2px)
        drop-shadow(0 0 12px rgba(21,149,255,.55));

    background:
        linear-gradient(
            180deg,
            transparent 0%,
            rgba(66,183,255,.15) 12%,
            rgba(66,183,255,.95) 50%,
            rgba(8,120,238,.30) 85%,
            transparent 100%
        );

    animation:
        floatingRibbon 11s ease-in-out infinite;
}


body::before {

    left: 8%;

    top: 18%;

    transform:
        rotate(18deg);

}


body::after {

    right: 10%;

    top: 48%;

    height: 230px;

    opacity: .42;

    transform:
        rotate(-22deg);

    animation-delay:
        -5s;

}


@keyframes floatingRibbon {

    0% {

        transform:
            translate3d(0, 0, 0)
            rotate(18deg);

    }

    25% {

        transform:
            translate3d(35px, 65px, 0)
            rotate(32deg);

    }

    50% {

        transform:
            translate3d(-15px, 135px, 0)
            rotate(8deg);

    }

    75% {

        transform:
            translate3d(45px, 210px, 0)
            rotate(27deg);

    }

    100% {

        transform:
            translate3d(0, 300px, 0)
            rotate(18deg);

    }
}


/* ============================================================
   EXTRA FLOATING RIBBONS
   .blue-ribbon ব্যবহার করলে আরও ribbon পাওয়া যাবে
   ============================================================ */

.blue-ribbon {

    position: absolute;

    width: 3px;

    height: 160px;

    border-radius: 999px;

    background:
        linear-gradient(
            180deg,
            transparent,
            rgba(66,183,255,.95),
            transparent
        );

    filter:
        drop-shadow(
            0 0 12px
            rgba(21,149,255,.65)
        );

    animation:
        ribbonFloat 9s ease-in-out infinite;

    pointer-events: none;

    opacity: .55;
}


@keyframes ribbonFloat {

    0%,
    100% {

        transform:
            translateY(-30px)
            rotate(18deg);

    }

    50% {

        transform:
            translateY(80px)
            rotate(-15deg);

    }
}


/* ============================================================
   HEADINGS
   ============================================================ */

h1,
h2,
h3,
h4,
h5,
h6 {

    color:
        #071d3d;

    letter-spacing:
        -.2px;
}


.text-primary {

    color:
        var(--primary) !important;
}


/* ============================================================
   GLASS NAVBAR
   ============================================================ */

.glass-navbar {

    position:
        sticky;

    top:
        0;

    z-index:
        1000;

    background:
        rgba(255,255,255,.68) !important;

    backdrop-filter:
        blur(22px)
        saturate(160%);

    -webkit-backdrop-filter:
        blur(22px)
        saturate(160%);

    border-bottom:
        1px solid
        rgba(255,255,255,.82) !important;

    box-shadow:
        0 8px 35px
        rgba(2,40,90,.10) !important;

    transition:
        all .3s ease;
}


.glass-navbar::after {

    content: "";

    position: absolute;

    left: 0;

    right: 0;

    bottom: -1px;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(21,149,255,.55),
            transparent
        );

}


.glass-navbar .nav-link {

    color:
        #183253 !important;

    font-weight:
        500;

    padding:
        9px 13px !important;

    border-radius:
        10px;

    transition:
        all .25s ease;
}


.glass-navbar .nav-link:hover {

    color:
        var(--primary) !important;

    background:
        rgba(8,120,238,.08);

    transform:
        translateY(-1px);
}


.glass-navbar .nav-link.active {

    color:
        #fff !important;

    background:
        linear-gradient(
            135deg,
            #0878ee,
            #043878
        );

    box-shadow:
        0 6px 18px
        rgba(8,120,238,.20);
}


/* ============================================================
   GLASS CARD
   ============================================================ */

.glass-card {

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.80),
            rgba(255,255,255,.58)
        ) !important;

    backdrop-filter:
        blur(var(--blur))
        saturate(150%);

    -webkit-backdrop-filter:
        blur(var(--blur))
        saturate(150%);

    border:
        1px solid
        var(--glass-border) !important;

    border-radius:
        var(--radius-lg) !important;

    box-shadow:
        var(--shadow);

    transition:
        transform .3s ease,
        box-shadow .3s ease,
        border-color .3s ease;
}


.glass-card:hover {

    transform:
        translateY(-5px);

    box-shadow:
        var(--shadow-lg);

    border-color:
        rgba(21,149,255,.28) !important;
}


/* ============================================================
   STANDARD BOOTSTRAP CARD OVERRIDE
   ============================================================ */

.card {

    background:
        rgba(255,255,255,.70) !important;

    backdrop-filter:
        blur(18px)
        saturate(145%);

    -webkit-backdrop-filter:
        blur(18px)
        saturate(145%);

    border:
        1px solid
        rgba(255,255,255,.86) !important;

    border-radius:
        var(--radius-lg) !important;

    box-shadow:
        var(--shadow);
}


.card-header {

    background:
        rgba(255,255,255,.38) !important;

    border-bottom:
        1px solid
        rgba(8,120,238,.08) !important;
}


/* ============================================================
   COURSE GLASS CARD
   ============================================================ */

.course-glass-card {

    position:
        relative;

    overflow:
        hidden;

    height:
        100%;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.86),
            rgba(232,244,255,.64)
        ) !important;

    backdrop-filter:
        blur(18px)
        saturate(150%);

    -webkit-backdrop-filter:
        blur(18px)
        saturate(150%);

    border:
        1px solid
        rgba(255,255,255,.92) !important;

    border-radius:
        var(--radius-lg) !important;

    box-shadow:
        0 12px 38px
        rgba(2,40,90,.11);

    transition:
        transform .35s ease,
        box-shadow .35s ease;
}


.course-glass-card::before {

    content: "";

    position: absolute;

    top: -100%;

    left: -70%;

    width: 45%;

    height: 300%;

    transform:
        rotate(22deg);

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.38),
            transparent
        );

    transition:
        left .7s ease;

    pointer-events:
        none;
}


.course-glass-card:hover::before {

    left:
        125%;
}


.course-glass-card:hover {

    transform:
        translateY(-7px);

    box-shadow:
        0 22px 55px
        rgba(2,40,90,.18);
}


/* ============================================================
   COURSE IMAGE
   ============================================================ */

.course-image-wrapper {

    position:
        relative;

    overflow:
        hidden;
}


.course-image {

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

    transition:
        transform .5s ease;
}


.course-glass-card:hover
.course-image {

    transform:
        scale(1.055);
}


/* ============================================================
   COURSE CATEGORY
   ============================================================ */

.course-category {

    background:
        linear-gradient(
            135deg,
            rgba(8,120,238,.92),
            rgba(3,56,120,.92)
        ) !important;

    color:
        #fff !important;

    backdrop-filter:
        blur(10px);

    border:
        1px solid
        rgba(255,255,255,.28);

    box-shadow:
        0 5px 15px
        rgba(2,40,90,.18);
}


/* ============================================================
   COURSE TITLE
   ============================================================ */

.course-title {

    color:
        #0a2346 !important;

    font-weight:
        700;
}


/* ============================================================
   COURSE PRICE
   ============================================================ */

.course-price {

    color:
        #0568d5 !important;

}


.course-free {

    color:
        #087f5b !important;

}


/* ============================================================
   BUTTONS
   ============================================================ */

.btn {

    transition:
        all .25s ease;
}


/* PRIMARY */

.btn-primary {

    color:
        #fff !important;

    background:
        linear-gradient(
            135deg,
            #0a83f7,
            #064b96
        ) !important;

    border-color:
        #0878ee !important;

    box-shadow:
        0 7px 20px
        rgba(8,120,238,.20);

}


.btn-primary:hover {

    color:
        #fff !important;

    background:
        linear-gradient(
            135deg,
            #0878ee,
            #03265c
        ) !important;

    transform:
        translateY(-2px);

    box-shadow:
        0 12px 28px
        rgba(8,120,238,.28);
}


/* OUTLINE */

.btn-outline-primary {

    color:
        #0568d5 !important;

    background:
        rgba(255,255,255,.50) !important;

    border-color:
        rgba(8,120,238,.30) !important;

}


.btn-outline-primary:hover {

    color:
        #fff !important;

    background:
        linear-gradient(
            135deg,
            #0878ee,
            #043878
        ) !important;

    border-color:
        #0878ee !important;
}


/* ============================================================
   PREMIUM GLASS BUTTON
   ============================================================ */

.btn-glass-primary {

    color:
        #fff !important;

    background:
        linear-gradient(
            135deg,
            rgba(21,149,255,.94),
            rgba(3,56,120,.96)
        );

    border:
        1px solid
        rgba(255,255,255,.30);

    border-radius:
        999px;

    padding:
        10px 22px;

    box-shadow:
        0 8px 25px
        rgba(3,56,120,.25);

    transition:
        all .3s ease;
}


.btn-glass-primary:hover {

    color:
        #fff !important;

    transform:
        translateY(-3px);

    box-shadow:
        0 14px 32px
        rgba(3,56,120,.32);
}


/* ============================================================
   HERO
   ============================================================ */

.glass-hero {

    position:
        relative;

    overflow:
        hidden;

    color:
        #fff;

    background:

        radial-gradient(
            circle at 10% 20%,
            rgba(66,183,255,.30),
            transparent 28%
        ),

        radial-gradient(
            circle at 90% 75%,
            rgba(21,149,255,.22),
            transparent 30%
        ),

        linear-gradient(
            135deg,
            #02142f 0%,
            #043878 45%,
            #0878ee 100%
        );

    box-shadow:
        inset 0 -1px
        rgba(255,255,255,.10);
}


.glass-hero::before {

    content: "";

    position: absolute;

    width:
        260px;

    height:
        260px;

    right:
        8%;

    top:
        -100px;

    border-radius:
        50%;

    background:
        rgba(66,183,255,.15);

    filter:
        blur(5px);

    animation:
        heroOrb 8s ease-in-out infinite;
}


@keyframes heroOrb {

    0%,
    100% {

        transform:
            translate(0,0)
            scale(1);

    }

    50% {

        transform:
            translate(-35px,60px)
            scale(1.12);

    }
}


.glass-hero h1,
.glass-hero h2,
.glass-hero h3,
.glass-hero h4 {

    color:
        #fff !important;
}


/* ============================================================
   SECTION
   ============================================================ */

.section-glass {

    position:
        relative;

    background:

        radial-gradient(
            circle at 10% 10%,
            rgba(8,120,238,.07),
            transparent 25%
        ),

        radial-gradient(
            circle at 90% 90%,
            rgba(21,149,255,.06),
            transparent 25%
        );
}


/* ============================================================
   BADGES
   ============================================================ */

.badge.bg-primary {

    background:
        linear-gradient(
            135deg,
            #0878ee,
            #043878
        ) !important;
}


.badge.bg-danger {

    box-shadow:
        0 4px 12px
        rgba(220,53,69,.18);
}


/* ============================================================
   FORM
   ============================================================ */

.form-control,
.form-select {

    color:
        #172b46 !important;

    background:
        rgba(255,255,255,.70) !important;

    border:
        1px solid
        rgba(8,120,238,.14) !important;

    border-radius:
        var(--radius-sm) !important;

    backdrop-filter:
        blur(10px);

    transition:
        all .25s ease;
}


.form-control:focus,
.form-select:focus {

    background:
        rgba(255,255,255,.90) !important;

    border-color:
        rgba(8,120,238,.48) !important;

    box-shadow:
        0 0 0 .22rem
        rgba(8,120,238,.10) !important;
}


/* ============================================================
   DROPDOWN
   ============================================================ */

.dropdown-menu {

    background:
        rgba(255,255,255,.88) !important;

    backdrop-filter:
        blur(20px)
        saturate(150%);

    -webkit-backdrop-filter:
        blur(20px);

    border:
        1px solid
        rgba(255,255,255,.88) !important;

    border-radius:
        var(--radius-md);

    box-shadow:
        0 18px 45px
        rgba(2,40,90,.15);
}


.dropdown-item {

    border-radius:
        9px;

    margin:
        2px 5px;

    width:
        calc(100% - 10px);

    transition:
        all .2s ease;
}


.dropdown-item:hover {

    color:
        #0568d5 !important;

    background:
        rgba(8,120,238,.08);
}


/* ============================================================
   ALERT
   ============================================================ */

.alert {

    border-radius:
        var(--radius-md) !important;

    backdrop-filter:
        blur(12px);

    border:
        1px solid
        rgba(255,255,255,.70);
}


/* ============================================================
   TABLE
   ============================================================ */

.table {

    --bs-table-bg:
        transparent;
}


.table thead th {

    color:
        #09294f;

    background:
        rgba(8,120,238,.055);

    border-bottom:
        1px solid
        rgba(8,120,238,.08);
}


.table tbody tr {

    transition:
        background .2s ease;
}


.table tbody tr:hover {

    background:
        rgba(8,120,238,.035);
}


/* ============================================================
   PAGINATION
   ============================================================ */

.page-link {

    color:
        #0568d5;

    background:
        rgba(255,255,255,.70);

    border-color:
        rgba(8,120,238,.10);
}


.page-link:hover {

    color:
        #fff;

    background:
        #0878ee;

    border-color:
        #0878ee;
}


.page-item.active .page-link {

    color:
        #fff;

    background:
        linear-gradient(
            135deg,
            #0878ee,
            #043878
        );

    border-color:
        #0878ee;
}


/* ============================================================
   FOOTER
   ============================================================ */

.glass-footer {

    position:
        relative;

    overflow:
        hidden;

    color:
        rgba(255,255,255,.74);

    background:

        radial-gradient(
            circle at 80% 20%,
            rgba(21,149,255,.16),
            transparent 25%
        ),

        linear-gradient(
            135deg,
            #010d21,
            #02142f,
            #043878
        );
}


.glass-footer h1,
.glass-footer h2,
.glass-footer h3,
.glass-footer h4,
.glass-footer h5,
.glass-footer h6 {

    color:
        #fff !important;
}


.glass-footer a {

    color:
        rgba(255,255,255,.72);

    text-decoration:
        none;

    transition:
        all .2s ease;
}


.glass-footer a:hover {

    color:
        #fff;

    transform:
        translateX(2px);
}


/* ============================================================
   SCROLLBAR
   ============================================================ */

::-webkit-scrollbar {

    width:
        7px;
}


::-webkit-scrollbar-track {

    background:
        #e6f1ff;
}


::-webkit-scrollbar-thumb {

    background:
        linear-gradient(
            180deg,
            #1595ff,
            #043878
        );

    border-radius:
        999px;
}


::-webkit-scrollbar-thumb:hover {

    background:
        #0878ee;
}


/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 575.98px) {

    body {

        font-size:
            13px !important;
    }


    .glass-navbar {

        backdrop-filter:
            blur(18px);

        -webkit-backdrop-filter:
            blur(18px);
    }


    .glass-card,
    .course-glass-card {

        border-radius:
            14px !important;
    }


    .course-glass-card:hover {

        transform:
            translateY(-3px);
    }


    .course-image-wrapper {

        height:
            120px;
    }


    .course-content {

        padding:
            9px !important;
    }


    .course-title {

        font-size:
            12px !important;

        line-height:
            1.35;

        min-height:
            34px;
    }


    .course-price {

        font-size:
            15px !important;
    }


    .course-free {

        font-size:
            14px !important;
    }


    .course-buttons {

        gap:
            5px !important;
    }


    .course-buttons .btn {

        min-height:
            31px !important;

        font-size:
            9px !important;

        padding:
            5px 4px !important;

        border-radius:
            7px !important;
    }


    .course-category {

        font-size:
            8px !important;

        padding:
            3px 6px !important;
    }


    /* ছোট স্ক্রিনে ribbon একটু subtle */

    body::before {

        left:
            4%;

        height:
            130px;

        opacity:
            .30;
    }


    body::after {

        right:
            5%;

        height:
            160px;

        opacity:
            .24;
    }
}


/* ============================================================
   REDUCE MOTION
   ============================================================ */

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {

        animation-duration:
            .01ms !important;

        animation-iteration-count:
            1 !important;

        scroll-behavior:
            auto !important;

        transition-duration:
            .01ms !important;
    }
}

/* ============================================================
   FLOATING STARS
   ============================================================ */

.floating-stars {

    position: fixed;

    inset: 0;

    width: 100%;
    height: 100%;

    overflow: hidden;

    pointer-events: none;

    z-index: 2;
}


.star {

    position: absolute;

    display: block;

    color: #8bd5ff;

    font-size: 9px;

    line-height: 1;

    opacity: .65;

    text-shadow:
        0 0 5px rgba(66,183,255,.9),
        0 0 12px rgba(21,149,255,.7);

    animation:
        starFloat 9s linear infinite;

}


/* Individual positions */

.star-1 {
    left: 8%;
    top: 85%;
    animation-duration: 11s;
    animation-delay: -2s;
}

.star-2 {
    left: 17%;
    top: 70%;
    font-size: 6px;
    animation-duration: 13s;
    animation-delay: -7s;
}

.star-3 {
    left: 27%;
    top: 92%;
    font-size: 12px;
    animation-duration: 15s;
    animation-delay: -4s;
}

.star-4 {
    left: 38%;
    top: 78%;
    font-size: 7px;
    animation-duration: 10s;
    animation-delay: -8s;
}

.star-5 {
    left: 48%;
    top: 95%;
    font-size: 5px;
    animation-duration: 14s;
    animation-delay: -3s;
}

.star-6 {
    left: 57%;
    top: 72%;
    font-size: 10px;
    animation-duration: 12s;
    animation-delay: -9s;
}

.star-7 {
    left: 67%;
    top: 88%;
    font-size: 6px;
    animation-duration: 16s;
    animation-delay: -5s;
}

.star-8 {
    left: 76%;
    top: 80%;
    font-size: 11px;
    animation-duration: 11s;
    animation-delay: -1s;
}

.star-9 {
    left: 84%;
    top: 94%;
    font-size: 6px;
    animation-duration: 14s;
    animation-delay: -6s;
}

.star-10 {
    left: 92%;
    top: 75%;
    font-size: 8px;
    animation-duration: 13s;
    animation-delay: -10s;
}

.star-11 {
    left: 32%;
    top: 60%;
    font-size: 5px;
    animation-duration: 17s;
    animation-delay: -12s;
}

.star-12 {
    left: 72%;
    top: 55%;
    font-size: 7px;
    animation-duration: 12s;
    animation-delay: -11s;
}


/* ============================================================
   STAR MOVEMENT
   ============================================================ */

@keyframes starFloat {

    0% {

        transform:
            translate3d(0, 120px, 0)
            rotate(0deg)
            scale(.6);

        opacity: 0;

    }

    10% {

        opacity: .65;

    }

    30% {

        transform:
            translate3d(25px, 40px, 0)
            rotate(45deg)
            scale(1);

    }

    50% {

        transform:
            translate3d(-20px, -80px, 0)
            rotate(90deg)
            scale(.75);

        opacity: .9;

    }

    70% {

        transform:
            translate3d(35px, -200px, 0)
            rotate(140deg)
            scale(1.1);

        opacity: .55;

    }

    90% {

        opacity: .25;

    }

    100% {

        transform:
            translate3d(-15px, -420px, 0)
            rotate(220deg)
            scale(.4);

        opacity: 0;

    }
}


/* ============================================================
   STAR TWINKLE
   ============================================================ */

.star:nth-child(3n) {

    animation-name:
        starFloat,
        starTwinkle;

    animation-duration:
        14s,
        2.2s;

    animation-iteration-count:
        infinite,
        infinite;

    animation-timing-function:
        linear,
        ease-in-out;

    animation-direction:
        normal,
        alternate;
}


@keyframes starTwinkle {

    from {

        filter:
            brightness(.65);

    }

    to {

        filter:
            brightness(1.8);

    }
}


/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 575.98px) {

    .star {

        font-size: 6px;

        opacity: .45;

    }

    .star:nth-child(3n) {

        font-size: 8px;

    }

}

.site-logo {
    height: 46px;
    width: auto;
    max-width: 190px;
    object-fit: contain;
    display: block;
}

@media (max-width: 575.98px) {
    .site-logo {
        height: 40px;
        max-width: 150px;
    }
}

.footer-logo {
    height: 65px;
    width: auto;
    max-width: 220px;
    object-fit: contain;
    display: block;
}

@media (max-width: 575.98px) {
    .footer-logo {
        height: 55px;
        max-width: 180px;
    }
}


/* =========================================================
   PREMIUM BLUE GLASS BUTTON THEME
   ========================================================= */

.btn-primary {
    background: linear-gradient(
        135deg,
        #062b78,
        #0b5ed7
    ) !important;

    border: 1px solid rgba(255,255,255,.25) !important;

    color: #fff !important;

    box-shadow:
        0 8px 22px rgba(6, 43, 120, .25),
        inset 0 1px 0 rgba(255,255,255,.18);

    backdrop-filter: blur(10px);

    transition: all .25s ease;
}

.btn-primary:hover {
    background: linear-gradient(
        135deg,
        #041f5c,
        #084298
    ) !important;

    transform: translateY(-2px);

    box-shadow:
        0 12px 28px rgba(6, 43, 120, .35),
        inset 0 1px 0 rgba(255,255,255,.2);
}


/* =========================================================
   OUTLINE BUTTON
   ========================================================= */

.btn-outline-primary {
    background: rgba(255,255,255,.08) !important;

    border: 1px solid #0b5ed7 !important;

    color: #0b5ed7 !important;

    backdrop-filter: blur(10px);

    transition: all .25s ease;
}

.btn-outline-primary:hover {
    background: linear-gradient(
        135deg,
        #062b78,
        #0b5ed7
    ) !important;

    color: #fff !important;

    transform: translateY(-2px);

    box-shadow:
        0 8px 20px rgba(6,43,120,.25);
}


/* =========================================================
   SUCCESS BUTTON
   ========================================================= */

.btn-success {
    background: linear-gradient(
        135deg,
        #064e3b,
        #059669
    ) !important;

    border: none !important;

    color: #fff !important;

    box-shadow:
        0 7px 20px rgba(5,150,105,.22);

    transition: all .25s ease;
}

.btn-success:hover {
    transform: translateY(-2px);

    box-shadow:
        0 11px 26px rgba(5,150,105,.32);
}


/* =========================================================
   DANGER BUTTON
   ========================================================= */

.btn-danger {
    background: linear-gradient(
        135deg,
        #991b1b,
        #dc2626
    ) !important;

    border: none !important;

    color: #fff !important;

    transition: all .25s ease;
}


/* =========================================================
   GLASS BUTTON
   ========================================================= */

.btn-glass {
    background: rgba(255,255,255,.10);

    border: 1px solid rgba(255,255,255,.25);

    color: #fff;

    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);

    box-shadow:
        0 8px 25px rgba(0,0,0,.12),
        inset 0 1px 0 rgba(255,255,255,.15);

    transition: all .25s ease;
}

.btn-glass:hover {
    background: rgba(255,255,255,.18);

    color: #fff;

    transform: translateY(-2px);

    box-shadow:
        0 12px 30px rgba(0,0,0,.18);
}


/* =========================================================
   ALL BUTTONS
   ========================================================= */

.btn {
    border-radius: 12px;

    font-weight: 600;

    transition:
        transform .25s ease,
        box-shadow .25s ease,
        background .25s ease;
}


/* Mobile */

@media (max-width: 575.98px) {

    .btn {
        border-radius: 10px;
    }

    .btn-primary,
    .btn-success,
    .btn-danger {
        box-shadow:
            0 5px 15px rgba(0,0,0,.15);
    }

}

/* =========================================================
   COURSE CARD BUTTONS
   ========================================================= */

.course-glass-card .course-buttons .btn-primary,
.course-glass-card .course-buttons .btn-outline-primary,
.course-buttons .btn-primary,
.course-buttons .btn-outline-primary {

    background: linear-gradient(
        135deg,
        #031b4e,
        #0649b8,
        #0b72e7
    ) !important;

    border: 1px solid rgba(255,255,255,.22) !important;

    color: #ffffff !important;

    border-radius: 10px !important;

    box-shadow:
        0 6px 18px rgba(3, 27, 78, .28),
        inset 0 1px 0 rgba(255,255,255,.18) !important;

    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    transition: all .25s ease !important;
}


/* Hover */

.course-glass-card .course-buttons .btn:hover,
.course-buttons .btn-primary:hover,
.course-buttons .btn-outline-primary:hover {

    background: linear-gradient(
        135deg,
        #02143a,
        #043b91,
        #075fc4
    ) !important;

    color: #fff !important;

    transform: translateY(-2px);

    box-shadow:
        0 10px 25px rgba(3,27,78,.38),
        inset 0 1px 0 rgba(255,255,255,.2) !important;
}


/* Success button-ও Blue Glass */

.course-glass-card .course-buttons .btn-success,
.course-buttons .btn-success {

    background: linear-gradient(
        135deg,
        #031b4e,
        #0649b8,
        #0b72e7
    ) !important;

    border: 1px solid rgba(255,255,255,.22) !important;

    color: #fff !important;

    border-radius: 10px !important;

    box-shadow:
        0 6px 18px rgba(3,27,78,.28),
        inset 0 1px 0 rgba(255,255,255,.18) !important;
}


/* Success hover */

.course-glass-card .course-buttons .btn-success:hover,
.course-buttons .btn-success:hover {

    background: linear-gradient(
        135deg,
        #02143a,
        #043b91,
        #075fc4
    ) !important;

    color: #fff !important;

    transform: translateY(-2px);

    box-shadow:
        0 10px 25px rgba(3,27,78,.38) !important;
}


/* Mobile Course Buttons */

@media (max-width: 575.98px) {

    .course-buttons .btn {
        min-height: 36px;
        font-size: 11px;
        padding: 6px 8px;
        border-radius: 9px !important;
    }

}

/* =====================================================
   NAVBAR TO CONTENT GAP FIX
===================================================== */

body {
    margin: 0 !important;
}

main {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

.contact-page {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

.contact-hero {
    margin-top: 0 !important;
}