/* Your entire CSS code from the prompt has been placed here */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --primary-color: #1e3a8a;
    --primary-light: #3b82f6;
    --secondary-color: #f59e0b;
    --accent-color: #10b981;
    --text-dark: #1f2937;
    --text-light: #6b7280;
    --background-light: #f9fafb;
    --background-white: #ffffff;
    --shadow-light: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    --shadow-medium: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    --shadow-large: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    --border-radius: 12px;
    --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: "DM Sans", Sans-serif !important;
}

body {
    font-family: "DM Sans", Sans-serif !important;
}

html {
    scroll-padding-top: 90px;
}

section {
    min-height: 50vh;
}

.header {
    position: relative;
    min-height: 100vh;
    background: url("../images/header.jpg") center/cover no-repeat;
    z-index: 2;
}

    .header::after {
        content: "";
        position: absolute;
        inset: 0;
        background-color: transparent;
        background-image: linear-gradient(90deg, #121E47 51%, rgba(0, 0, 0, 0) 80%);
        opacity: 0.76;
        z-index: 1;
    }

.global-header::after {
    background-image: linear-gradient(90deg, #3b6687 51%, rgba(0, 0, 0, 0) 80%);
}

.nile-header::after {
    background-image: linear-gradient(90deg, #6c4596 51%, rgba(0, 0, 0, 0) 80%);
}

.innovation-header::after {
    background-image: linear-gradient(90deg, #2e6285 51%, rgba(0, 0, 0, 0) 80%);
}

.easy-way-header::after {
    background-image: linear-gradient(90deg, rgb(109, 70, 87) 51%, rgba(0, 0, 0, 0) 80%);
}

.custom-navbar {
    background: transparent;
    padding-top: 1rem;
    padding-bottom: 1rem;
    transition: all 0.3s ease-in-out;
    z-index: 10;
}

    .custom-navbar .navbar-brand {
        color: #fff;
        font-weight: 700;
        letter-spacing: 0.5px;
    }



    .custom-navbar .nav-link {
        position: relative;
        color: #fff;
        font-weight: 500;
        padding: 0.75rem 1rem;
        transition: color 0.3s ease;
        z-index: 1;
        display: flex;
        align-items: center;
        justify-content: center;
    }

        .custom-navbar .nav-link i {
            font-size: 1rem;
            transition: color 0.3s ease;
        }

            .custom-navbar .nav-link i:hover {
                color: #e9c46a;
            }


@media screen and (min-width:992px) {

    .custom-navbar .nav-link::after {
        content: "";
        position: absolute;
        left: 50%;
        bottom: -10px;
        transform: translateX(-50%);
        width: 110%;
        height: 94px;
        background: #e9c46a;
        clip-path: polygon(0 0, 100% 0, 100% 100%, 50% calc(100% - 15px), 0 100%);
        opacity: 0;
        transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
        z-index: -1;
    }


    .custom-navbar .nav-link:hover::after,
    .custom-navbar .nav-link:focus::after {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }

    .custom-navbar .nav-link.active {
        color: #000;
        font-weight: 700;
    }

        .custom-navbar .nav-link.active::after {
            opacity: 1;
        }

    .custom-navbar .nav-link:hover,
    .custom-navbar .nav-link:hover i {
        color: #000;
        font-weight: 700;
    }
}



.scrolled,
.navbar-dark-bg {
    background: rgba(18, 30, 71, 0.9);
    backdrop-filter: blur(5px);
}

.nile .scrolled,
.nile .navbar-dark-bg {
    background: rgba(95, 29, 165, 0.9);
}


.global .scrolled,
.global .navbar-dark-bg {
    background: rgba(50, 88, 117, 0.9);
}

.innovation .scrolled,
.innovation .navbar-dark-bg {
    background: rgba(50, 136, 194, 0.9);
}

.easy-way .scrolled,
.easy-way .navbar-dark-bg {
    background: rgba(109, 70, 87, 0.9);
}

.hero {
    position: relative;
    z-index: 2;
    padding-top: 120px;
    padding-bottom: 120px;
    text-align: center;
}

    .hero h1 {
        font-size: 2rem !important;
    }

@media screen and (min-width:992px) {
    .hero {
        text-align: left;
    }

        .hero h1 {
            font-size: 3rem !important;
        }
}

.hero h1 u {
    text-decoration-thickness: 3px;
    text-underline-offset: 6px;
}



.header-wave {
    position: absolute;
    bottom: -2%;
    left: 0;
    width: 100%;
    line-height: 0;
    overflow: hidden;
}

    .header-wave svg {
        display: block;
        width: 100%;
        height: 100px;
        transform: scaleY(-1);
        transform-origin: center;
    }

.btn-primary {
    background-color: #e9c46a;
    border: none;
    color: #000;
    font-weight: 600;
    padding: 12px 24px;
    transition: all 0.5s ease-in-out;
}

    .btn-primary:hover {
        background-color: #e9c46a;
        border: none;
        color: #000;
        transform: scale(1.1);
    }

.partner-logos img {
    opacity: 1;
    transition: 0.3s;
}



@media screen and (min-width:992px) {
    .hero p {
        max-width: 53%
    }
}

.hero .content {
    padding-top: 100px;
}

h2 {
    color: #121E47;
    font-weight: 700;
    position: relative;
    display: inline-block;
    margin: auto;
    padding-bottom: 25px;
    font-size: 40px;
}

h2 {
    position: relative;
    display: inline-block;
    padding-bottom: 20px;
}

    h2::after {
        content: "";
        position: absolute;
        left: 50%;
        bottom: 0;
        transform: translateX(-50%);
        width: 250px;
        height: 50px;
        background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 500 150' preserveAspectRatio='none'><path d='M9.3,127.3c49.3-3,150.7-7.6,199.7-7.4c121.9,0.4,189.9,0.4,282.3,7.2C380.1,129.6,181.2,130.6,70,139 c82.6-2.9,254.2-1,335.9,1.3c-56,1.4-137.2-0.3-197.1,9' fill='none' stroke='%23e9c46a' stroke-width='6' stroke-linecap='round'/></svg>") no-repeat center/contain;
        pointer-events: none;
    }

.easy-way h2::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 250px;
    height: 50px;
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 500 150' preserveAspectRatio='none'><path d='M9.3,127.3c49.3-3,150.7-7.6,199.7-7.4c121.9,0.4,189.9,0.4,282.3,7.2C380.1,129.6,181.2,130.6,70,139 c82.6-2.9,254.2-1,335.9,1.3c-56,1.4-137.2-0.3-197.1,9' fill='none' stroke='%23008edc' stroke-width='6' stroke-linecap='round'/></svg>") no-repeat center/contain;
    pointer-events: none;
}

.global h2 {
    color: rgb(50, 88, 117);
}

.nile h2 {
    color: rgb(95, 29, 165);
}

.innovation h2 {
    color: #289be8;
}

.easy-way h2 {
    color: #d30f64;
}

.about .box p {
    margin-top: 20px;
    line-height: 1.8;
    text-align: justify;
    font-size: 17px;
}

.about .content-box .box {
    background: #fff;
    padding: 10px;
    border-radius: 12px;
    text-align: center;
    transition: all 0.5s ease-in-out;
    border: 1px solid #e9c56a9a;
    height: 100%;
}

    .about .content-box .box span {
        font-size: 48px;
        font-weight: 700;
        color: #121e478d;
        transition: all 0.5s ease-in-out;
    }

    .about .content-box .box p {
        text-align: center;
        font-size: 24px;
        font-weight: 700;
        letter-spacing: 1px;
        color: #152660;
    }

    .about .content-box .box:hover {
        background-color: #e9c46a;
        transform: translateY(-3px);
    }

        .about .content-box .box:hover span {
            color: #121e47;
        }

.about .img img {
    border-radius: 150px 0px 150px 0px;
    border: 5px solid #e9c46a;
    box-shadow: 0 0 25px #e9c46a;
    transition: box-shadow 0.4s ease;
}

    .about .img img:hover {
        box-shadow: 0 0 40px #e9c46a, 0 0 60px #e9c46a;
    }

.feature-box {
    position: relative;
    min-height: 650px;
    background-size: cover;
    background-position: center;
    color: #fff;
    text-align: center;
    padding: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

@media screen and (min-width:768px) {
    .feature-box {
        min-height: 580px;
    }
}

.feature-box .small-text {
    position: relative;
    z-index: 2;
    font-size: 2.8rem;
    font-weight: 600;
    margin: 0;
    transition: opacity 0.3s ease;
}

.feature-box .feature-inner {
    position: absolute;
    inset: 10px;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 20px;
    opacity: 0;
    transition: opacity 0.5s ease;
    z-index: 3;
    text-align: center;
    border: 2px solid #fff;
    border-radius: 10px;
}

.feature-box:hover .feature-inner {
    opacity: 1;
}

.feature-box:hover .small-text {
    opacity: 0;
}

.features-section .feature-inner h3 {
    font-size: 1.8rem;
    font-weight: 600;
    margin-bottom: 10px;
}

.features-section .feature-inner p {
    font-size: .9rem;
    margin-top: 15px;
    line-height: 1.6;
    text-align: left;
}

@media screen and (min-width:400px) {
    .features-section .feature-inner p {
        font-size: 1rem;
    }
}

.value-icon {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, rgb(233, 196, 106), #8f6f20);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
    transition: all 0.3s ease;
}

    .value-icon i {
        font-size: 2rem;
        color: white;
    }

.value-card:hover .value-icon {
    transform: scale(1.1) rotate(5deg);
}


.company-card {
    background: white;
    border-radius: 20px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
    transition: all 0.4s ease;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    padding: 0px;
}

.company-card-content {
    padding: 2.5rem;
}

.company-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(233, 196, 106, 0.2), transparent);
    transition: left 0.5s ease;
}

.company-card .img {
    height: 370px;
}

    .company-card .img img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.company-card:hover::before {
    left: 100%;
}

.company-card:hover {
    transform: translateY(-15px);
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.2);
}


.company-features {
    margin-top: 1.5rem;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.badge {
    font-size: 0.85rem;
    padding: 0.8rem 1rem;
    border-radius: 20px;
    background-color: #e9c46a;
    color: #000;
}

.company-card-content h3 {
    color: #121e47;
    font-weight: 700;
}

.company-card-content .second-p {
    color: #555555;
    line-height: 1.8;
    text-align: justify;
}

.header-badge {
    border: 2px solid #e9c46a;
    color: #fff;
    background-color: transparent;
}

.scrolling-text {
    white-space: nowrap;
    padding-right: 100px;
    color: #000;
    font-weight: bold;
}

@keyframes scroll-left {
    0% {
        transform: translateX(0%);
    }

    100% {
        transform: translateX(-50%);
    }
}

.store-animated-bar {
    height: 40px;
    background-color: #e9c46a;
    color: #e9c46a
}

.scrolling-track {
    display: flex;
    width: max-content;
    animation: scroll-left 19s linear infinite;
}

.field-card,
.service-card {
    background-color: #fff;
    height: 100%;
    border-radius: 10px;
    box-shadow: 0 5px 60px rgba(0, 0, 0, 0.2);
    padding: 20px;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    transition: all 0.5s ease-in-out;
}

    .field-card:hover,
    .service-card:hover {
        transform: translateY(-6px);
    }

    .field-card .field-icon,
    .service-icon {
        width: 70px;
        height: 70px;
        border-radius: 50%;
        background: linear-gradient(135deg, #14255b, #12329c);
        display: flex;
        justify-content: center;
        align-items: center;
        color: white;
        font-size: 28px;
        margin-bottom: 20px;
    }

    .field-card h4,
    .service-card h5 {
        color: #121E47;
        font-weight: 600;
        font-size: 2rem;
        margin-bottom: 15px;
    }

    .field-card p,
    .course-card p,
    .innovation-services .box p {
        font-size: 1rem;
        color: #555555;
    }

.course-count {
    padding: 14px 28px;
    background: linear-gradient(135deg, rgb(233, 196, 106), #8f6f20);
    display: inline-block;
    border-radius: 30px;
    color: #fff;
    font-weight: 600;
}

.course-card {
    border: 1px solid #e9c46a;
    box-shadow: 0 5px 60px rgba(0, 0, 0, 0.2);
}

    .course-card .badge-custom-1,
    .product-card .badge-custom-1 {
        background: linear-gradient(135deg, rgb(233, 196, 106), #8f6f20);
    }

    .course-card .badge-custom {
        background: linear-gradient(135deg, #14255b, #12329c);
        color: #fff !important;
    }

.person,
.weeks {
    color: #8f6f20;
    font-weight: 500;
    font-size: 17px;
}

.weeks {
    color: #121E47;
}

.course-price {
    color: #555;
    font-weight: 600;
}

.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
    color: #fff;
    background: linear-gradient(135deg, rgb(233, 196, 106), #8f6f20);
}

.nav-pills .nav-link {
    color: #121E47;
    font-weight: 600;
}

.nile-about {
    box-shadow: 0 5px 60px rgba(0, 0, 0, 0.2);
    padding: 20px;
    text-align: center;
    border-radius: 20px;
    border: 1px solid #8f6f20;
}

    .nile-about .feature-inner p {
        text-align: center;
    }

.services .service-card {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
}

    .services .service-card:hover {
        transform: translateY(-6px);
        box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
    }

.services .icon,
.innovation-services .box .icon {
    background: linear-gradient(135deg, rgb(233, 196, 106), #8f6f20);
    color: #fff;
    width: 60px;
    height: 60px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    margin: 0 auto;
}

.services ul li {
    padding: 4px 0;
    margin-bottom: 15px;
    font-size: 15px;
    color: #333;
    border-bottom: 1px dashed #e5e5e5;
}

.service-card h5 {
    font-size: 1.3rem;
}

.services ul li span {
    color: green;
    margin: 0px 4px;
}

.btn-accent {
    background: linear-gradient(135deg, #14255b, #12329c);
    color: white !important;
    padding: 12px 24px;
}

.product-card .card-title,
.innovation-services .box h3 {
    color: #121E47;
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 15px;
}

.innovation-services .box {
    border: 1px solid #e9c46a;
    border-radius: 15px;
    transition: all 0.5s ease-in-out;
}

    .innovation-services .box:hover {
        transform: scale(1.02);
        box-shadow: 0 26px 48px rgba(0, 0, 0, 0.25) !important;
    }

.easy-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
}

    .easy-card .img {
        height: 300px;
        width: 100%;
    }

        .easy-card .img img {
            height: 100%;
            width: 100%;
            object-fit: cover;
        }

.form-control.is-invalid,
.form-select.is-invalid {
    border-color: #E74C3C;
    ;
    background-image: none;
}

.form-control.is-valid,
.form-select.is-valid {
    border-color: #27AE60;
    background-image: none;
}

.invalid-feedback {
    display: block;
    width: 100%;
    margin-top: 0.25rem;
    font-size: 0.875em;
    color: #E74C3C;
    ;
}

.form-control:focus {
    border-color: #16A085;
    ;
    box-shadow: 0 0 0 0.2rem rgba(22, 160, 133, 0.25);
}

.is-invalid {
    border-color: #dc3545 !important;
}

.invalid-feedback {
    color: #dc3545;
    font-size: 0.9rem;
    display: none;
    min-height: 18px;
    white-space: pre-wrap;
}

.contact-btn {
    background: linear-gradient(135deg, rgb(233, 196, 106), #8f6f20);
}

.contact-title {
    color: #121E47;
    font-weight: 600;
}

.contact {
    background-image: linear-gradient(rgba(0, 0, 0, .8), rgba(0, 0, 0, .8)), url(../images/contact.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}


.floating-btn {
    position: fixed;
    z-index: 9999;
    width: 55px;
    height: 55px;
    border-radius: 50%;
    border: none;
    color: #fff;
    font-size: 22px;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    transition: transform 0.2s ease, background 0.3s ease;
    cursor: pointer;
}

    .floating-btn:hover {
        transform: scale(1.1);
    }

.cart-btn {
    bottom: 20px;
    transition: transform 0.2s ease, background 0.3s ease;
    background: linear-gradient(135deg, rgb(233, 196, 106), #8f6f20);
    right: 20px;
}

    .cart-btn:hover {
        background: linear-gradient(135deg, rgb(233, 196, 106), #8f6f20);
    }

.top-btn:hover {
    background: linear-gradient(135deg, #14255b, #12329c);
}

.top-btn {
    transition: transform 0.2s ease, background 0.3s ease;
    bottom: 20px;
    background: linear-gradient(135deg, #14255b, #12329c);
    left: 20px;
    display: none;
}


.global .field-card .field-icon {
    background: linear-gradient(135deg, #396789, #245174);
}

.global .course-count {
    background: linear-gradient(135deg, rgb(226, 193, 108), #8f6f20);
}

.global .field-card h4 {
    color: #000;
    font-size: 1.7rem;
}

.global .badge-custom {
    background: linear-gradient(135deg, #396789, #245174);
}

.global .top-btn {
    background: linear-gradient(135deg, #396789, #245174);
}

.global .about {
    position: relative;
    z-index: 1;
}

.global .floating-icon {
    position: absolute;
    font-size: 50px;
    color: rgba(0, 114, 255, 0.25);
    animation: floatIcon 10s ease-in-out infinite alternate;
    z-index: -1;
}


.icon-1 {
    top: 5%;
    left: 5%;
    animation-delay: 0s;
}

.icon-2 {
    bottom: 1%;
    right: 10%;
    animation-delay: 3s;
}

.icon-3 {
    top: 100%;
    right: 90%;
    animation-delay: 6s;
}


@keyframes floatIcon {
    0% {
        transform: translateY(0) translateX(0) rotate(0deg);
    }

    50% {
        transform: translateY(-20px) translateX(15px) rotate(10deg);
    }

    100% {
        transform: translateY(0) translateX(0) rotate(0deg);
    }
}

.nile .about {
    position: relative;
}

.nile .floating-icons {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}

    .nile .floating-icons i {
        position: absolute;
        font-size: 2.5rem;
        color: #610bbca1;
        animation: floatIcon 10s linear infinite;
    }


        .nile .floating-icons i:nth-child(1) {
            top: 10%;
            left: 10%;
            animation-delay: 0s;
        }

        .nile .floating-icons i:nth-child(2) {
            top: 50%;
            left: 3%;
            animation-delay: 2s;
        }

        .nile .floating-icons i:nth-child(3) {
            top: 60%;
            left: 90%;
            animation-delay: 4s;
        }

        .nile .floating-icons i:nth-child(4) {
            top: 102%;
            left: 50%;
            animation-delay: 6s;
        }

        .nile .floating-icons i:nth-child(5) {
            top: 10%;
            left: 80%;
            animation-delay: 8s;
        }

@keyframes floatIcon {
    0% {
        transform: translateY(0) rotate(0deg);
        opacity: 0.3;
    }

    50% {
        transform: translateY(-30px) rotate(15deg);
        opacity: 0.6;
    }

    100% {
        transform: translateY(0) rotate(0deg);
        opacity: 0.3;
    }
}

.nile .services .service-card .icon {
    background: linear-gradient(135deg, #521270, #6b22b9);
    box-shadow: inset 0 0 15px rgba(255, 255, 255, 0.25), inset 0 0 30px rgba(107, 34, 185, 0.4), 0 0 15px rgba(107, 34, 185, 0.4);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    transition: all 0.4s ease;
}

    .nile .services .service-card .icon:hover {
        box-shadow: inset 0 0 25px rgba(255, 255, 255, 0.35), inset 0 0 40px rgba(107, 34, 185, 0.55), 0 0 25px rgba(107, 34, 185, 0.5);
        transform: scale(1.05);
    }

.nile .services .service-card h5 {
    color: #000;
}

.nile .services .service-card ul li span {
    color: #f1c21b;
}

.nile .service-card {
    box-shadow: inset 0 0 15px rgba(255, 255, 255, 0.25), inset 0 0 10px rgba(107, 34, 185, 0.2), 0 0 15px rgba(107, 34, 185, 0.2);
}

.nile .btn-accent {
    background: linear-gradient(135deg, #521270, #6b22b9);
    box-shadow: inset 0 0 1px rgba(255, 255, 255, 0.25), inset 0 0 10px rgba(107, 34, 185, 0.4), 0 0 1px rgba(107, 34, 185, 0.4);
    border: none;
}

.nile .top-btn {
    background: linear-gradient(135deg, #521270, #6b22b9);
}

.innovation .innovation-services .box {
    border: 1px solid rgba(23, 96, 145, 0.4);
    box-shadow: inset 0 0 5px rgba(255, 255, 255, 0.25), inset 0 0 10px rgba(40, 155, 232, 0.4), 0 0 5px rgba(23, 96, 145, 0.4);
}

    .innovation .innovation-services .box .icon {
        background: linear-gradient(135deg, rgb(40, 155, 232), rgb(23, 96, 145));
        box-shadow: inset 0 0 15px rgba(255, 255, 255, 0.25), inset 0 0 30px rgba(40, 155, 232, 0.4), 0 0 15px rgba(23, 96, 145, 0.4);
        backdrop-filter: blur(6px);
        -webkit-backdrop-filter: blur(6px);
        transition: all 0.4s ease;
    }

    .innovation .innovation-services .box h3 {
        color: #000;
    }

.innovation .btn-accent,
.innovation .top-btn {
    background: linear-gradient(135deg, rgb(32, 132, 198), rgb(23, 96, 145));
    border: none;
}

.easy-way .features-section .feature-box .value-icon {
    background: linear-gradient(135deg, rgb(211, 15, 100), rgb(0, 142, 220));
}

.easy-way .services .service-card {
    border: 1px solid rgba(211, 15, 100, 0.4);
    box-shadow: inset 0 0 5px rgba(255, 255, 255, 0.25), inset 0 0 10px #d30f6466, 0 0 5px rgba(0, 142, 220, 0.4);
}

    .easy-way .services .service-card h5 {
        color: #d30f64;
    }

.easy-way .services ul li span {
    color: rgb(0, 142, 220) !important;
}

.easy-way .about {
    position: relative;
}

.easy-way .floating-icons {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}



    .easy-way .floating-icons i {
        position: absolute;
        font-size: 2.4rem;
        color: rgba(32, 132, 198, 0.40);
        filter: drop-shadow(0 6px 14px rgba(3, 123, 255, 0.06));
        transform-origin: center;
        animation: floatTravel 10s ease-in-out infinite;
    }


.easy-way .icon-1 {
    top: 8%;
    left: 2%;
    font-size: 3rem;
    animation-duration: 12s;
    animation-delay: 0s;
}


.easy-way .icon-2 {
    top: 8%;
    right: 8%;
    font-size: 2.2rem;
    animation-duration: 9s;
    animation-delay: 1s;
}


.easy-way .icon-3 {
    top: 38%;
    left: 6%;
    font-size: 2rem;
    animation-duration: 11s;
    animation-delay: 2s;
}


.easy-way .icon-4 {
    bottom: 10%;
    left: 18%;
    font-size: 2.8rem;
    animation-duration: 13s;
    animation-delay: 3s;
}

.easy-way .icon-5 {
    top: 55%;
    right: 2%;
    font-size: 2.2rem;
    animation-duration: 10s;
    animation-delay: 4s;
}


.easy-way .icon-6 {
    bottom: 8%;
    right: 10%;
    font-size: 3rem;
    animation-duration: 14s;
    animation-delay: 5s;
}


.easy-way .icon-7 {
    top: 28%;
    right: 50%;
    font-size: 2.6rem;
    animation-duration: 12s;
    animation-delay: 6s;
}

@keyframes floatTravel {
    0% {
        transform: translateY(0) translateX(0) rotate(0deg) scale(1);
        opacity: 0.25;
    }

    25% {
        transform: translateY(-16px) translateX(8px) rotate(6deg) scale(1.03);
        opacity: 0.6;
    }

    50% {
        transform: translateY(-28px) translateX(-6px) rotate(-4deg) scale(1.06);
        opacity: 0.45;
    }

    75% {
        transform: translateY(-12px) translateX(10px) rotate(3deg) scale(1.02);
        opacity: 0.6;
    }

    100% {
        transform: translateY(0) translateX(0) rotate(0deg) scale(1);
        opacity: 0.25;
    }
}

@media (max-width: 768px) {
    .easy-way .floating-icons i {
        font-size: 1.9rem;
        color: rgba(3, 123, 255, 0.18);
    }

    .easy-way .icon-3,
    .icon-5,
    .icon-7 {
        display: none;
    }
}

.easy-way .services {
    position: relative;
    background-image: url(../images/easy-way-bg.webp);
    background-repeat: no-repeat;
    background-position: top right;
}

    .easy-way .services::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 350px;
        height: 350px;
        background-image: url("../images/easy-way-bg-2.webp");
        background-repeat: no-repeat;
        background-position: center center;
        background-size: contain;
        opacity: 1;
        z-index: -1;
    }


.bg-purple {
    background: linear-gradient(135deg, #521270, #6b22b9);
    color: white;
}

.bg-pink {
    background: linear-gradient(135deg, #396789, #245174);
    color: white;
}

.bg-orange {
    background: linear-gradient(135deg, rgb(211, 15, 100), rgb(0, 142, 220));
    color: white;
}

.featured-article {
    background: var(--background-white);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-light);
    padding: 2rem;
    transition: var(--transition);
}

    .featured-article:hover {
        box-shadow: var(--shadow-medium);
        transform: translateY(-5px);
    }

    .featured-article img {
        border-radius: var(--border-radius);
    }

.article-meta {
    color: var(--text-light);
    font-size: 0.875rem;
}

    .article-meta i {
        margin-right: 5px;
    }

.news-card {
    background: var(--background-white);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-light);
    transition: var(--transition);
    overflow: hidden;
    height: 100%;
}

    .news-card:hover {
        box-shadow: var(--shadow-medium);
        transform: translateY(-5px);
    }

    .news-card img {
        height: 200px;
        object-fit: cover;
        transition: var(--transition);
    }

    .news-card:hover img {
        transform: scale(1.05);
    }

    .news-card .card-body {
        padding: 1.5rem;
    }

    .news-card .card-title {
        font-weight: 600;
        color: var(--text-dark);
        margin-bottom: 1rem;
    }

    .news-card .card-meta {
        color: var(--text-light);
        font-size: 0.875rem;
        margin-top: 1rem;
    }


.community-section {
    background: var(--background-light);
}

.event-tabs {
    border: none;
    margin-bottom: 3rem;
}

    .event-tabs .nav-link {
        border: none;
        background: var(--background-white);
        color: var(--text-light);
        border-radius: 25px;
        padding: 12px 24px;
        margin: 0 8px;
        font-weight: 500;
        transition: var(--transition);
    }

        .event-tabs .nav-link:hover,
        .event-tabs .nav-link.active {
            background: linear-gradient(135deg, #14255b, #12329c);
            color: white;
            transform: translateY(-2px);
            box-shadow: var(--shadow-light);
        }

.event-card {
    background: var(--background-white);
    border-radius: var(--border-radius);
    padding: 1.5rem;
    box-shadow: var(--shadow-light);
    transition: var(--transition);
    height: 100%;
}

    .event-card:hover {
        box-shadow: var(--shadow-medium);
        transform: translateY(-5px);
    }

.upcoming-event {
    border-left: 4px solid #e9c46a;
}

.past-event {
    border-left: 4px solid var(--text-light);
}

.event-date {
    position: relative;
}

.date-box {
    background: linear-gradient(135deg, #14255b, #12329c);
    color: white;
    border-radius: 8px;
    padding: 10px;
    text-align: center;
    width: 60px;
    float: left;
    margin-right: 1rem;
}

    .date-box .day {
        display: block;
        font-size: 1.5rem;
        font-weight: 700;
        line-height: 1;
    }

    .date-box .month {
        display: block;
        font-size: 0.75rem;
        text-transform: uppercase;
        letter-spacing: 1px;
    }

.event-content h4,
.event-content h5 {
    color: var(--text-dark);
    margin-bottom: 0.5rem;
}

.event-description {
    color: var(--text-light);
    margin-bottom: 1rem;
}

.event-image {
    width: 100%;
    height: 150px;
    object-fit: cover;
    border-radius: 8px;
    margin-bottom: 1rem;
}

.gallery-item img {
    transition: var(--transition);
    cursor: pointer;
}

.gallery-item:hover img {
    transform: scale(1.05);
    box-shadow: var(--shadow-medium);
}

.event-card .event-content .btn-primary {
    background: linear-gradient(135deg, rgb(233, 196, 106), #8f6f20);
    font-weight: 700;
    font-size: 16px;
}


.opportunities-section {
    background: var(--background-white);
}

.opportunity-category {
    background: linear-gradient(135deg, var(--background-light), var(--background-white));
    border-radius: var(--border-radius);
    padding: 2rem;
    text-align: center;
    transition: var(--transition);
    height: 100%;
}

    .opportunity-category:hover {
        transform: translateY(-5px);
        box-shadow: var(--shadow-medium);
    }

.category-icon {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
}

    .category-icon i {
        font-size: 2rem;
        color: white;
    }

.job-card {
    background: var(--background-white);
    border: 1px solid #e5e7eb;
    border-radius: var(--border-radius);
    padding: 1.5rem;
    transition: var(--transition);
    height: 100%;
}

    .job-card:hover {
        border-color: var(--primary-light);
        box-shadow: var(--shadow-medium);
        transform: translateY(-3px);
    }

.job-header {
    display: flex;
    justify-content: space-between;
    align-items: start;
    margin-bottom: 1rem;
}

    .job-header h4 {
        color: var(--text-dark);
        margin-bottom: 0;
    }

.job-details p {
    color: var(--text-light);
    margin-bottom: 0.5rem;
}

.job-description {
    color: var(--text-dark);
    margin-bottom: 1rem;
}

.job-requirements h6 {
    color: var(--text-dark);
    margin-bottom: 0.5rem;
}

.job-requirements ul {
    color: var(--text-light);
    padding-left: 1rem;
    margin-bottom: 1.5rem;
}

.partnership-card {
    background: var(--background-white);
    border-radius: var(--border-radius);
    padding: 2rem;
    text-align: center;
    box-shadow: var(--shadow-light);
    transition: var(--transition);
    height: 100%;
}

    .partnership-card:hover {
        box-shadow: var(--shadow-medium);
        transform: translateY(-5px);
    }

.partnership-icon {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, rgb(233, 196, 106), #8f6f20);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
}

    .partnership-icon i {
        font-size: 1.5rem;
        color: white;
    }

.job-card .btn-primary {
    background: linear-gradient(135deg, rgb(233, 196, 106), #8f6f20);
}

.partnership-card .btn-outline-primary {
    border: 1px solid #245174;
    color: #245174;
}

    .partnership-card .btn-outline-primary:hover {
        background-color: #245174;
        color: white;
    }


.team-section {
    background: var(--background-light);
}

.team-card {
    background: var(--background-white);
    border-radius: var(--border-radius);
    overflow: hidden;
    box-shadow: var(--shadow-light);
    transition: var(--transition);
    height: 100%;
}

    .team-card:hover {
        box-shadow: var(--shadow-medium);
        transform: translateY(-10px);
    }

.team-image {
    position: relative;
    overflow: hidden;
}

    .team-image img {
        width: 100%;
        height: 280px;
        object-fit: cover;
        transition: var(--transition);
    }

.team-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, #14255b, #12329c);
    opacity: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
}

.team-card:hover .team-overlay {
    opacity: 0.9;
}

.team-card:hover .team-image img {
    transform: scale(1.1);
}

.social-links {
    display: flex;
    gap: 1rem;
}

    .social-links a {
        width: 40px;
        height: 40px;
        background: rgba(255, 255, 255, 0.2);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        text-decoration: none;
        transition: var(--transition);
    }

        .social-links a:hover {
            background: #e9c46a;
            color: #000;
            transform: translateY(-3px);
        }

.team-info {
    padding: 1.5rem;
    text-align: center;
}

    .team-info h4 {
        color: var(--text-dark);
        margin-bottom: 0.5rem;
    }

.team-role {
    color: var(--primary-color);
    font-weight: 600;
    margin-bottom: 1rem;
}

.team-description {
    color: var(--text-light);
    font-size: 0.875rem;
}

.team-stats {
    background: var(--background-white);
    border-radius: var(--border-radius);
    padding: 2rem;
    box-shadow: var(--shadow-light);
}

.stat-card {
    text-align: center;
}

    .stat-card i {
        font-size: 2.5rem;
        color: #245174;
        margin-bottom: 1rem;
    }

    .stat-card h3 {
        font-size: 2rem;
        font-weight: 700;
        color: var(--text-dark);
        margin-bottom: 0.5rem;
    }

    .stat-card p {
        color: var(--text-light);
        font-size: 0.875rem;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

.nile .products .card.product-card {
    box-shadow: inset 0 0 1px rgba(255, 255, 255, 0.25), inset 0 0 10px rgba(107, 34, 185, 0.4), 0 0 1px rgba(107, 34, 185, 0.4);
}

.nile .products .badge-custom-1 {
    background: linear-gradient(135deg, #521270, #6b22b9);
    color: white;
}

.nile .features-section .feature-box .value-icon {
    background: linear-gradient(135deg, #521270, #6b22b9);
    box-shadow: inset 0 0 1px rgba(255, 255, 255, 0.25), inset 0 0 10px rgba(107, 34, 185, 0.4), 0 0 1px rgba(107, 34, 185, 0.4);
}

.global .features-section .feature-box .value-icon {
    background: linear-gradient(135deg, #396789, #245174);
    box-shadow: inset 0 0 5px rgba(255, 255, 255, 0.25), inset 0 0 10px rgba(40, 155, 232, 0.4), 0 0 5px rgba(23, 96, 145, 0.4);
}

.innovation .features-section .feature-box .value-icon {
    background: linear-gradient(135deg, rgb(40, 155, 232), rgb(23, 96, 145));
    box-shadow: inset 0 0 15px rgba(255, 255, 255, 0.25), inset 0 0 30px rgba(40, 155, 232, 0.4), 0 0 15px rgba(23, 96, 145, 0.4);
}

.innovation .products .product-card .badge-custom-1 {
    background: linear-gradient(135deg, rgb(40, 155, 232), rgb(23, 96, 145));
    box-shadow: inset 0 0 15px rgba(255, 255, 255, 0.25), inset 0 0 30px rgba(40, 155, 232, 0.4), 0 0 15px rgba(23, 96, 145, 0.4);
    color: white;
}

.easy-way .popular-packages .package-card .travel-badge {
    background: linear-gradient(135deg, rgb(211, 15, 100), rgb(0, 142, 220));
    color: white;
}

body.login-body, body.signup-body {
    background: linear-gradient(135deg, #0f2027, #203a43, #2c5364);
    font-family: "DM Sans", sans-serif;
    color: #fff;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}


.login-card, .signup-card {
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(12px);
    border-radius: 15px;
    padding: 40px 30px;
    color: #fff;
    box-shadow: 0 0 25px rgba(0, 212, 255, 0.6), 0 0 50px rgba(0, 212, 255, 0.3), 0 0 75px rgba(0, 212, 255, 0.2);
    border: 1px solid rgba(0, 212, 255, 0.4);
    transition: 0.3s ease-in-out;
}

    .login-card:hover, .signup-card:hover {
        box-shadow: 0 0 35px rgba(0, 212, 255, 0.9), 0 0 70px rgba(0, 212, 255, 0.5), 0 0 100px rgba(0, 212, 255, 0.3);
    }

    .login-card .title, .signup-card .title {
        font-weight: 700;
        font-size: 28px;
        color: #fff;
    }

    .login-card .description, .signup-card .description {
        font-size: 14px;
        opacity: 0.8;
    }


    .login-card label, .signup-card label {
        font-size: 14px;
        margin-bottom: 6px;
        display: block;
    }

    .login-card input,
    .login-card select, .signup-card input,
    .signup-card select {
        background: rgba(255, 255, 255, 0.15);
        border: none;
        border-radius: 8px;
        padding: 10px 12px;
        color: #fff;
        width: 100%;
        transition: all 0.3s ease-in-out;
    }

        .login-card input:focus, .signup-card input:focus,
        .login-card select:focus, .signup-card select:focus {
            background: rgba(255, 255, 255, 0.25);
            outline: none;
            box-shadow: 0 0 8px #00d4ff;
        }

        .login-card input::placeholder, .signup-card input::placeholder {
            color: rgba(255, 255, 255, 0.6);
        }


.password-field {
    position: relative;
}

.toggle-password {
    position: absolute;
    top: 70%;
    right: 12px;
    transform: translateY(-50%);
    cursor: pointer;
    color: #00d4ff;
    font-size: 16px;
}

select option {
    color: #0f2027;
}

.error-msg {
    font-size: 13px;
    margin-top: 5px;
}


.btn-login, .btn-signup {
    background: linear-gradient(to right, #0077b6, #00b4d8);
    border: none;
    padding: 12px;
    border-radius: 8px;
    font-weight: bold;
    letter-spacing: 1px;
    color: white;
    transition: 0.3s;
}

    .btn-login:hover, .btn-signup:hover {
        background: linear-gradient(to right, #0096c7, #00b4d8);
        transform: scale(1.02);
    }

.create-account,
.forget-pass {
    color: #00d4ff;
    text-decoration: none;
    font-size: 14px;
}

    .create-account:hover,
    .forget-pass:hover {
        text-decoration: underline;
    }

.cart-container {
    margin-top: 30px;
}

.cart-item {
    border-bottom: 1px solid #e9ecef;
    padding: 15px 0;
}

    .cart-item img {
        width: 150px;
        height: 150px;
        object-fit: contain;
    }

.cart-summary {
    background: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}

    .cart-summary h5 {
        font-weight: bold;
    }

    .cart-summary .btn {
        width: 100%;
        border-radius: 10px;
    }

.cart-navbar, .user-profile-navbar {
    background-color: #203a43;
}

.cart-main-header {
    min-height: 60vh;
    background: linear-gradient(rgba(0,0,0,.7),rgba(0,0,0,.7)), url(../images/cart-bg.jpg);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    display: flex;
    justify-content: center;
    align-items: center;
}

.wishlist-main-header {
    min-height: 60vh;
    background: linear-gradient(rgba(0,0,0,.7),rgba(0,0,0,.7)), url(../images/wishlist.jpg);
    background-position: bottom;
    background-size: cover;
    background-repeat: no-repeat;
    display: flex;
    justify-content: center;
    align-items: center;
}

    .cart-main-header h3, .wishlist-main-header h3 {
        text-align: center;
        color: #fff;
        font-size: 4rem;
        font-weight: 700;
        letter-spacing: 1.5px;
        text-shadow: 2px 2px 8px rgba(0, 212, 255, 0.4);
    }

/* Dashboard Styles */
.dashboard .sidebar {
    position: sticky;
    top: 0;
    min-height: 100vh;
    overflow-y: auto;
    padding-top: 30px;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

    .dashboard .sidebar .btn-outline-primary, .dashboard .sidebar .btn-outline-success {
        background: linear-gradient(135deg, rgb(40, 155, 232), rgb(23, 96, 145));
        box-shadow: inset 0 0 15px rgba(255, 255, 255, 0.25), inset 0 0 30px rgba(40, 155, 232, 0.4), 0 0 15px rgba(23, 96, 145, 0.4);
        color: white;
        border: none;
        padding: 13px 26px;
    }

.dashboard-card {
    background: white;
    padding: 1rem;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    cursor: pointer;
    border: 2px solid transparent;
    height: 100%;
}

    .dashboard-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
        border-color: var(--accent-color);
    }

.dashboard-icon {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #396789, #245174);
    box-shadow: inset 0 0 5px rgba(255, 255, 255, 0.25), inset 0 0 10px rgba(40, 155, 232, 0.4), 0 0 5px rgba(23, 96, 145, 0.4);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
    transition: all 0.3s ease;
}

    .dashboard-icon i {
        font-size: 2rem;
        color: white;
    }

.dashboard-card:hover .dashboard-icon {
    transform: scale(1.1) rotate(5deg);
}

#dashboardSelection {
    padding-top: 70px;
}

    #dashboardSelection ul li {
        border-bottom: 1px dashed #b4b4b4;
        padding: 10px;
    }

#ecommerceDashboard .card, #lmsDashboard .card {
    background: linear-gradient(135deg, #521270, #6b22b9);
    box-shadow: inset 0 0 1px rgba(255, 255, 255, 0.25), inset 0 0 10px rgba(107, 34, 185, 0.4), 0 0 1px rgba(107, 34, 185, 0.4);
}

#ecommerceDashboard .analysis-card, #lmsDashboard .analysis-card {
    background: white;
}


/* Stat Cards */
.stat-card {
    transition: var(--transition);
}

    .stat-card:hover {
        transform: translateY(-5px);
    }

.stat-icon {
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
}

/* Profile */
.profile-card {
    background: linear-gradient(135deg, #521270, #6b22b9);
    box-shadow: inset 0 0 1px rgba(255, 255, 255, 0.25), inset 0 0 10px rgba(107, 34, 185, 0.4), 0 0 1px rgba(107, 34, 185, 0.4);
    color: white;
}

.profile-avatar {
    width: 80px;
    height: 80px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
}

.profile-stats .col-4 h6 {
    font-size: 1.2rem;
    font-weight: 700;
}

/* Package Cards */
.package-card {
    border: 2px solid transparent;
    transition: var(--transition);
    height: 100%;
}

    .package-card:hover {
        transform: translateY(-3px);
    }

.package-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 1rem;
    border-radius: var(--border-radius) var(--border-radius) 0 0;
}

.package-price {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--primary-color);
}

.package-category {
    background-color: var(--light-color);
    color: var(--dark-color);
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.875rem;
    font-weight: 500;
}

/* Action Cards */
.action-card {
    transition: var(--transition);
    cursor: pointer;
}

    .action-card:hover {
        background-color: var(--light-color);
        transform: translateY(-2px);
    }

.action-icon {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
}

/* Buttons */
.btn {
    border-radius: 8px;
    font-weight: 500;
    padding: 0.5rem 1.25rem;
    transition: var(--transition);
}

    .btn:hover {
        transform: translateY(-1px);
    }

.btn-floating {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 1050;
}

/* Utilities */
.hover-shadow {
    transition: var(--transition);
}

    .hover-shadow:hover {
        box-shadow: var(--box-shadow);
    }

/* Responsive Design */
@media (max-width: 768px) {
    .hero-section h1 {
        font-size: 2rem;
    }

    .stat-icon {
        width: 50px;
        height: 50px;
        font-size: 1.25rem;
    }

    .btn-floating {
        bottom: 1rem;
        right: 1rem;
        width: 50px;
        height: 50px;
    }
}

/* Modal Enhancements */
.modal-content {
    border: none;
    border-radius: var(--border-radius);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.modal-header {
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border-radius: var(--border-radius) var(--border-radius) 0 0;
}

    .modal-header .btn-close {
        filter: invert(1);
    }

/* Form Enhancements */
.form-control, .form-select {
    border-radius: 8px;
    border: 2px solid #e9ecef;
    transition: var(--transition);
}

    .form-control:focus, .form-select:focus {
        border-color: var(--primary-color);
        box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25);
    }



/* Badge Styles */
.badge-category {
    background-color: var(--info-color);
    color: white;
    font-size: 0.75rem;
    padding: 0.375rem 0.75rem;
    border-radius: 20px;
}

/* Success/Error Messages */
.alert-custom {
    border: none;
    border-radius: var(--border-radius);
    font-weight: 500;
}

.alert-success {
    background: linear-gradient(135deg, #d4edda 0%, #c3e6cb 100%);
    color: var(--success-color);
}

.alert-danger {
    background: linear-gradient(135deg, #f8d7da 0%, #f5c6cb 100%);
    color: var(--danger-color);
}

/* course lessons */
.lessons .sidebar {
    background-color: #111d45;
    min-height: 100vh;
}

.lesson-item {
    cursor: pointer;
    padding: 10px 15px;
    color: white;
}

    .lesson-item.active {
        background-color: #1eaad4;
        color: white;
    }

    .lesson-item:hover {
        background-color: #33425a;
    }

iframe {
    width: 100%;
    height: 500px;
    border: none;
    border-radius: 10px;
}

.controls {
    margin-top: 20px;
}

.back-button {
    color: #fff;
    text-decoration: none;
    margin-bottom: 15px;
    display: inline-block;
}

.progress-container {
    margin: 15px 0;
}

.progress {
    height: 10px;
    background-color: #374151;
}

.progress-bar {
    background: linear-gradient(135deg, rgb(40, 155, 232), rgb(23, 96, 145));
}

.lessons .btn-primary {
    background-color: rgb(23, 96, 145);
}

.back-button {
    background: linear-gradient(135deg, rgb(40, 155, 232), rgb(23, 96, 145));
    box-shadow: inset 0 0 15px rgba(255, 255, 255, 0.25), inset 0 0 30px rgba(40, 155, 232, 0.4), 0 0 15px rgba(23, 96, 145, 0.4);
    display: inline-block;
    padding: 20px;
    border-radius: 8px;
}

.heart-btn {
    background: linear-gradient(135deg, rgb(211, 15, 100), rgb(0, 142, 220));
    color: white;
    border: none;
}

    .heart-btn:hover {
        color: #fff;
    }

.footer {
    background-color: #080e22;
}

    .footer i {
        color: #dcb34c;
    }

    .footer .gmt {
        color: #dcb34c;
        font-weight: 600;
        text-decoration: none;
    }

    .footer .btn-outline-secondary:hover {
        background-color: transparent;
        transform: translateY(-8px);
    }

.quick-links li a {
    transition: 0.5s all ease-in-out;
}

.quick-links li:hover a {
    padding-left: 10px;
    color: #dcb34c !important;
    font-weight: 600 !important;
}

.cart-badge {
    position: absolute;
    top: 0;
    right: 0;
    transform: translate(40%, -40%);
    background-color: #e53e3e;
    color: white;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    font-size: 11px;
    font-weight: bold;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 2px solid white;
}

.navbar-dark-bg .cart-badge, .scrolled .cart-badge {
    border-color: #121E47;
}