/* Global Colors */
:root {
    --primary: rgba(103, 51, 204, 1);
    --background-color: #f4f7fa;
    --default-color: #444444;
    --heading-color: #433f39;
    --accent-color: #ffb03b;
    --surface-color: #ffffff;
    --contrast-color: #ffffff;
    --nqcbody-text: rgba(102, 119, 144, 1);
    --nqcblack: rgba(35, 38, 47, 1);
    --zhblack: rgba(0, 0, 0, 1);
}

/* Nav Menu Colors  */
:root {
    --nav-color: #ffffff;
    --nav-hover-color: #ffb03b;
    --nav-mobile-background-color: #ffffff;
    --nav-dropdown-background-color: #ffffff;
    --nav-dropdown-color: #444444;
    --nav-dropdown-hover-color: #ffb03b;
}

/* Color Presets */

.light-background {
    --background-color: #fffaf3;
    --surface-color: #ffffff;
}

.light-bg {
    background-color: #fffaf3;
}

.dark-background {
    --background-color: #1e160d;
    --default-color: #ffffff;
    --heading-color: #ffffff;
    --surface-color: #42301c;
    --contrast-color: #ffffff;
}

/* Smooth scroll */
:root {
    scroll-behavior: smooth;
}

/*--------------------- General Styling & Shared Classes -----------------------*/
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: 'Cairo', sans-serif;
    font-family: 'Noto Kufi Arabic', sans-serif;
    font-size: 13px;
}

body {
    color: var(--default-color);
    background-color: #f4f7fa;
}

a {
    color: var(--accent-color);
    text-decoration: none;
    transition: 0.3s;
}

a:hover {
    color: color-mix(in srgb, var(--accent-color), transparent 25%);
    text-decoration: none;
}

.a-active-link {
    color: var(--primary-color) !important;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--heading-color);
    font-family: var(--heading-font);
}

/* Inverted icon for rtl direction */
[dir="rtl"] .rtl-icon {
    transform: scaleX(-1);
}

.text-justify {
    text-align: justify;
}

*:focus {
    box-shadow: none !important;
}

span.error {
    color: red;
    font-size: 0.875em;
}

.primary-color {
    color: var(--primary-color);
}

/*----------------------- Navbar --------------------*/
.navbar {
    background: transparent;
    /* padding: 1rem 2rem;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05); */
}

.navbar-brand {
    font-weight: 700;
    font-size: 1.5rem;
    color: #5b2cff;
    background-color: var(--background-color);
}

.navbar-nav .nav-link {
    color: white;
    margin: 0 0.5rem;
    font-weight: 400;
    border-radius: 30px;
    padding-left: 10px !important;
    padding-right: 10px !important;
    background: linear-gradient(0deg,
            rgba(30, 28, 60, 1) 0%,
            rgba(89, 86, 164, 1) 100%);
}

.navbar-nav .nav-link.active {
    color: var(--accent-color);
    font-weight: 400;
}

.navbar-nav .nav-link:hover {
    color: var(--accent-color);
}

.btn-main {
    margin-right: 80px;
    color: white;
    border-radius: 90px;
    padding: 8px 30px !important;
    background: linear-gradient(0deg,
            rgba(30, 28, 60, 1) 0%,
            rgba(89, 86, 164, 1) 100%);
}

.btn-main:hover {
    color: var(--accent-color);
}

@media (max-width: 768px) {
    .hero-frame #navbarNav {
        margin-top: 30px !important;

    }

    .navbar-nav .nav-link {
        align-items: center !important;
        justify-content: center !important;
    }

    .navbar-nav .nav-link {
        margin-top: 10px !important;
    }

    .btn-main {
        margin-top: 10px !important;
        margin-right: 0 !important;
    }
}

/* -------------------------------------- */



/*-------------------- Hero Section ----------------------*/
.hero-frame {
    position: relative;
    background: linear-gradient(180deg, #2f295d 0%, #4b3b8f 100%);
    border-radius: 15px;
    border-color: transparent !important;
    overflow: hidden;
    /* clip-path: path("M0,35 Q0,0 35,0 H950 q35,0 35,35 v20 q0,35 35,35 h45 q35,0 35,35 v425 q0,35-35,35 H35 Q0,585 0,550 Z"
        ); */
}


.hero-frame::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    inset: 0;
    background-image: url('../img/logo.png');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 0;
    width: 150px;
    height: 60px;
    background-color: var(--background-color);
    border-bottom-left-radius: 20px;
}

.hero-heading .hero-content {
    padding-right: 50px !important;
}

.hero-heading p {
    font-size: 1.5rem;
    color: white;
    margin-top: 100px;
}

.hero-heading h1 {
    font-size: 4rem;
    font-weight: 700;
    color: white;
    margin-top: 20px;
}

.hero-heading .img-arrow-line {
    margin-top: 20px;
    width: 100% !important;
    height: 150px !important;
    object-fit: contain;
}

.hero-heading img {
    margin-top: 90px;
    width: 100% !important;
    height: 400px !important;
    object-fit: contain;

}

.hero-view-all-packages a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 10px 40px;
    position: relative;
    flex: 0 0 auto;
    margin-bottom: -4.00px;
    margin-right: -4.00px;
    border-radius: 132px;
    border: 4px solid;
    border-color: #000000;
    background: #6733CC;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    font-weight: 700;
    color: #ffffff;
    box-shadow: 0 0 2px white;
    box-shadow: 0px 0px 21px #9d94ff, 0px 18px 30px #0000008c;
}

.hero-view-all-packages a:hover {
    transform: translateY(-2px);
    /* box-shadow: 0px 0px 85px #9d94ff66, 0px 32px 64px #0000007a; */
}

.hero-view-all-packages a:focus {
    outline: 2px solid #ffffff;
    outline-offset: 2px;
}

@media (max-width: 768px) {
    .hero-heading .hero-content {
        padding-right: 0 !important;
    }

    .hero-frame::before {
        width: 130px;
        height: 60px;
    }

    .hero-heading p {
        font-size: 1rem;
        color: white;
        margin-top: 50px;
    }

    .hero-heading h1 {
        font-size: 1.5rem;
        font-weight: 700;
        color: white;
    }

    .hero-heading .img-arrow-line {
        margin-top: 10px;
        width: 100% !important;
        height: 70px !important;
    }

    .hero-heading img {
        margin-top: 0;
        width: 100% !important;
        height: 180px !important;
    }
}

/*-------------------- why choose us ----------------------*/


.why-choose-us .card-container {
    padding: 50px;
    width: 100%;
    background-color: #ffffff;
    border-radius: 24px;
}

.why-choose-us .card-container .ellipse {
    margin-right: 60px;
    width: 26px;
    height: 26px;
    background-color: #7dd087;
    border-radius: 13px;
    border: 3px solid;
    border-color: #ffffff;
}

.why-choose-us .card-container h2 {
    margin-top: 50px;
    margin-right: 60px;
    font-weight: 600;
    color: var(--nqcblack);
    font-size: 48px;
    letter-spacing: -1.92px;
    line-height: 60px;
}

.why-choose-us .card-container p {
    margin-right: 60px;
    margin-top: 30px;
    font-weight: 500;
    color: var(--nqcbody-text);
    font-size: 18px;
    letter-spacing: 0;
    line-height: 30px;
}

.why-choose-us .card-container a {
    margin-top: 30px;
    display: inline-flex;
    gap: 10px;
    padding: 15px 36px;

    border-radius: 132px;
    border: 3px solid;
    border-color: #000000;
    box-shadow: 0px 0px 79px #9d94ff66, 0px 28px 60px #0000007a;
    background: linear-gradient(0deg,
            rgba(30, 28, 60, 1) 0%,
            rgba(89, 86, 164, 1) 100%);
}

.why-choose-us .card-container a:hover {
    transform: translateY(-2px);
    box-shadow: 0px 0px 85px #9d94ff66, 0px 32px 64px #0000007a;
}

.why-choose-us .card-container a:focus {
    outline: 2px solid #ffffff;
    outline-offset: 2px;
}

.why-choose-us .card-container a span {
    position: relative;
    width: fit-content;
    font-weight: 700;
    color: #ffffff;
    font-size: 18px;
    letter-spacing: 0;
    line-height: 24px;
    white-space: nowrap;
}

.why-choose-us .card-container .vector-line {
    margin-top: 50px;
    width: 36px;
    height: 41px;
}

@media (max-width: 768px) {
    .why-choose-us .card-container {
        padding: 20px;
    }

    .why-choose-us .card-container .ellipse {
        margin-right: 30px;
    }

    .why-choose-us .card-container h2 {
        margin-right: 30px;
        margin-top: 10px;
        font-size: 26px;
    }

    .why-choose-us .card-container p {
        margin-right: 30px;
        margin-top: 15px;
        font-size: 18px;
    }

    .why-choose-us .card-container a {
        padding: 10px 20px;
    }


    .why-choose-us .card-container a span {
        position: relative;
        width: fit-content;
        font-weight: 700;
        color: #ffffff;
        font-size: 14px;
    }

    .why-choose-us .card-container .vector-line {
        margin-top: 25px;
        width: 30px;
        height: 35px;
    }

}


.why-choose-us .feature-card {
    padding: 40px 10px;
    background-color: #ffffff;
    border-radius: 24px;
    box-shadow: 0px 32px 48px -8px #0000001a, 0px 0px 14px -4px #0000000d;

}

.why-choose-us .feature-item-1 {
    margin-top: 0;
    background: linear-gradient(0deg,
            rgba(30, 28, 60, 1) 0%,
            rgba(89, 86, 164, 1) 100%), linear-gradient(0deg, rgba(35, 38, 47, 1) 0%, rgba(35, 38, 47, 1) 100%);
}

.why-choose-us .feature-item-2 {
    margin-top: 30px;
}

.why-choose-us .feature-item-3 {
    margin-top: 50px;
}

.why-choose-us .feature-item-4 {
    margin-top: 30px;
}

.why-choose-us .span-list-icon {
    width: 64px;
    height: 64px;
    padding: 15.27px;
    position: relative;
    background-color: #f3ebff;
    border-radius: 35.63px;
    aspect-ratio: 1;

    display: flex;
    align-items: center;
    justify-content: center;
}

.why-choose-us .check {
    position: relative;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.why-choose-us .check i {
    font-size: 26px;
    color: var(--primary);
}

.why-choose-us h3 {
    padding-top: 30px;
    font-weight: 600;
    color: var(--zhblack);
    font-size: 24px;
    text-align: center;
    letter-spacing: 0;
    line-height: 30px;
}

@media (max-width: 768px) {

    .why-choose-us .feature-card {
        padding: 40px 10px;
    }

    .why-choose-us h3 {
        font-weight: 600;
        color: var(--zhblack);
        font-size: 14px;
        letter-spacing: 0;
        line-height: 30px;
    }
}

/* ------------------Experience Premium----------------------- */
.exp-premium {
    background-color: #ffffff;
    border-radius: 24px;
    box-shadow: 0px 32px 48px -8px #0000001a, 0px 0px 14px -4px #0000000d;
}

.exp-premium .exp-premium-content img {
    margin-top: 50px;
    margin-right: 150px;
}

.exp-premium .exp-premium-content h2 {
    margin-top: 50px;
    margin-right: 80px;
    font-weight: 600;
    color: var(--nqcblack);
    font-size: 42px;
}

.exp-premium .exp-premium-content p {
    margin-right: 80px;
    margin-top: 50px;
    font-weight: 500;
    color: var(--nqcbody-text);
    font-size: 14px;
    letter-spacing: 0;
    line-height: 30px;
}


.exp-premium .exp-premium-content a {
    margin-right: 80px;
    margin-top: 30px;
    display: inline-flex;
    gap: 10px;
    padding: 10px 30px;

    border-radius: 132px;
    border: 3px solid;
    border-color: #000000;
    box-shadow: 0px 0px 79px #9d94ff66, 0px 28px 60px #0000007a;
    background: linear-gradient(0deg,
            rgba(30, 28, 60, 1) 0%,
            rgba(89, 86, 164, 1) 100%);
}

.exp-premium .exp-premium-content a:hover {
    transform: translateY(-2px);
    box-shadow: 0px 0px 85px #9d94ff66, 0px 32px 64px #0000007a;
}

.exp-premium .exp-premium-content a:focus {
    outline: 2px solid #ffffff;
    outline-offset: 2px;
}

.exp-premium .exp-premium-content a span {
    position: relative;
    width: fit-content;
    font-weight: 600;
    color: #ffffff;
    font-size: 18px;
    letter-spacing: 0;
    line-height: 24px;
    white-space: nowrap;
}

.exp-premium .exp-premium-content .ellipse {
    margin-top: 30px;
    margin-right: 80%;
    width: 26px;
    height: 26px;
    background-color: #7dd087;
    border-radius: 13px;
    border: 3px solid;
    border-color: #ffffff;
}

@media (max-width: 768px) {

    .exp-premium .exp-premium-content img {
        margin-top: 10px;
        margin-right: 50px;
    }

    .exp-premium .exp-premium-content h2 {
        margin-right: 10px;
        font-size: 24px;
    }

    .exp-premium .exp-premium-content p {
        margin-right: 10px;
        margin-top: 30px;
    }


    .exp-premium .exp-premium-content a {
        margin-right: 10px;
        margin-top: 30px;
    }

    .exp-premium .exp-premium-content a span {
        font-size: 16px;
    }

    .exp-premium .exp-premium-content .ellipse {
        margin-top: 30px;
        margin-right: 80%;
        width: 26px;
        height: 26px;
        background-color: #7dd087;
        border-radius: 13px;
        border: 3px solid;
        border-color: #ffffff;
    }
}


/* --------------- how it works----------------- */
.how-it-works {
    padding-left: 100px;
    padding-right: 100px;
    background-color: #ffffff;
    border-radius: 24px;
    box-shadow: 0px 32px 48px -8px #0000001a, 0px 0px 14px -4px #0000000d;
}

.how-it-works .how-title h2 {
    font-weight: 700;
    color: var(--nqcblack);
    font-size: 36px;
}

.how-it-works .how-subtitle p {
    margin-top: 10px;
    font-weight: 500;
    color: var(--nqcbody-text);
    font-size: 14px;
    letter-spacing: 0;
    line-height: 30px;
}

.how-it-works .work-card {
    width: 100%;
    padding-top: 50px;
    padding-bottom: 50px;
    background-color: #F4ECFF;
    border-radius: 24px;
}

.how-it-works .work-card h4 {
    font-weight: 600;
}

@media (max-width: 768px) {
    .how-it-works {
        padding-left: 20px;
        padding-right: 20px;
    }

    .how-it-works .how-title h2 {
        font-size: 30px;
    }

}

/*-------------------- footer area -----------------------*/
.footer {
    margin-top: 100px !important;
    margin-bottom: 50px !important;
    background-color: #ffffff;
    border-radius: 24px;
    box-shadow: 0px 32px 48px -8px #0000001a, 0px 0px 14px -4px #0000000d;
}

.footer .btn.btn-social {
    margin-right: 5px;
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: black;
    border: 1px solid var(--background-color);
    border-radius: 35px;
    transition: .3s;
}

.footer .btn.btn-link:hover {
    letter-spacing: 1px;
    box-shadow: none;
    color: var(--secondary);
}

.footer .btn.btn-social:hover {
    color: var(--secondary);
}

.footer .btn.btn-link {
    display: block;
    margin-bottom: 5px;
    padding: 0;
    text-align: start;
    color: var(--nqcbody-text);
    font-size: 15px;
    font-weight: normal;
    text-transform: capitalize;
    transition: .3s;
    text-decoration: none;
}

.footer .copyright {
    padding: 25px 0;
    font-size: 15px;
    border-top: 1px solid rgba(256, 256, 256, .1);
}

.footer .copyright a {
    color: var(--light);
}

.section-title-footer::after {
    display: inline-block;
    content: "";
    width: 40px;
    height: 2px;
    top: 50%;
    left: -70px;
    margin-top: -1px;
    margin: 0 5px;
    background: var(--primary);
}

.footer .timings-list {
    list-style: none;
    padding: 0;
}

.footer .timings-list li {
    padding: 10px 0;
    border-bottom: 1px dotted #6c757d;
}

.footer .closed-badge {
    border: solid 1px red;
    color: red;
    padding: 5px 10px;
    border-radius: 5px;
}

.section-title-footer {
    color: #000;
    font-weight: 700;
}

/* ----------------packages Modal---------------- */
.modal-backdrop.show {
    backdrop-filter: blur(8px);
    background-color: rgba(0, 0, 0, 0.3);
}

#packagesModalId .modal-content {
    border-color: transparent;
    border-radius: 15px;
    background: rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
    padding-bottom: 50px;
}

#packagesModalId .modal-content .btn-close {
    position: absolute;
    top: -10px;
    left: -10px;
    backdrop-filter: blur(15px);
    background-color: rgba(255, 255, 255, 0.25);
    border-radius: 50%;
    padding: 0.8rem;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
    opacity: 1;
}

#packagesModalId .form-packages-card {
    padding-top: 32px;
    padding-bottom: 10px;
    background-color: white;
    border-radius: 24px;
    box-shadow: 0px 88px 64px -32px #0e0e0e40;
}

#packagesModalId .form-packages-card label {
    color: var(--nqcbody-text);
    font-weight: 600;
}

#packagesModalId .icons-search-line-wrapper {
    width: 52px;
    height: 52px;
    border-radius: 64px;
    overflow: hidden;
    border: 2px solid #000000;
    box-shadow: 0px 0px 31px #9d94ff, 0px 28px 60px #0000008c;
    background: linear-gradient(0deg,
            rgba(30, 28, 60, 1) 0%,
            rgba(89, 86, 164, 1) 100%);
}

#packagesModalId .icons-search-line {
    width: 24px;
    height: 24px;
}

#packagesModalId .divider {
    position: relative;
    align-self: stretch;
    width: 100%;
    height: 1px;
    background-color: #e5e8eb;
    border-radius: 1px;
}

#packagesModalId .form-packages-card p {
    color: var(--nqcbody-text);
    font-weight: 400;
}

#packagesModalId .packages-card {
    background-color: white;
    border-radius: 52px;
    box-shadow: 0px 88px 64px -32px #0e0e0e40;
}

#packagesModalId .card-custom {
    width: 100%;
    border-radius: 42px;
    color: white;
    padding: 1.5rem;
    overflow: hidden;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);

}

#packagesModalId .card-custom.platinum-card {
    background: linear-gradient(0deg,
            rgba(30, 28, 60, 1) 0%,
            rgba(89, 86, 164, 1) 100%), linear-gradient(0deg, rgba(35, 38, 47, 1) 0%, rgba(35, 38, 47, 1) 100%);
}

#packagesModalId .card-custom.premium-card {
    background: linear-gradient(to bottom, #FFA641, #FF7E29);
}

#packagesModalId .label-top {
    position: absolute;
    top: 1rem;
    left: 2rem;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 9999px;
    padding: 0.25rem 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

#packagesModalId .star-top {
    position: absolute;
    top: 1rem;
    right: 2rem;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
}

#packagesModalId .circle-btn {
    position: absolute;
    bottom: 0;
    left: 0;
    transform: translate(30%, -25%);
    background-color: #FF8C2A;
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
    cursor: pointer;
    transition: transform 0.3s;
}

#packagesModalId .circle-btn-platinum {
    position: absolute;
    bottom: 0;
    left: 0;
    transform: translate(30%, -25%);
    background: linear-gradient(0deg,
            rgba(30, 28, 60, 1) 0%,
            rgba(89, 86, 164, 1) 100%), linear-gradient(0deg, rgba(35, 38, 47, 1) 0%, rgba(35, 38, 47, 1) 100%);
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
    cursor: pointer;
    transition: transform 0.3s;
}


#packagesModalId .circle-btn:hover {
    transform: translate(25%, -25%) scale(1.1);
}

#packagesModalId .circle-btn i {
    font-size: 18px;
    font-weight: 700;
}

#packagesModalId .circle-btn-platinum:hover {
    transform: translate(25%, -25%) scale(1.1);
}

#packagesModalId .circle-btn-platinum i {
    font-size: 18px;
    font-weight: 700;
}

#packagesModalId .bg-glow {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 8rem;
    height: 8rem;
    background-color: rgba(117, 80, 246, 0.4);
    border-radius: 50%;
    filter: blur(3rem);
    transform: translate(-20%, 40%);
    z-index: -1;
}


#packagesModalId .packages-card .package-label img {
    height: 20px;
    width: 20px;
}

#packagesModalId .packages-card .package-label h4 {
    color: var(--primary);
    font-size: 16px;
    font-weight: 600;
}

#packagesModalId .packages-card .package-label p {
    margin-right: 20px;
    margin-top: 5px;
    color: var(--nqcbody-text);
    font-size: 12px;
    font-weight: 400;
}

/*
#mycurve .card {
    width: 340px;
    height: 500px;
    background-color: aqua;
    border-radius: 32px;
    overflow: hidden;
    position: relative;
}




#mycurve .card::before {
    content: "";
    width: 64px;
    height: 64px;
    background-color: transparent;
    position: absolute;
    left: -4px;
    bottom: 86px;
    border-bottom-left-radius: 64px;
    box-shadow: 0 20px 0 0 #ffffff;
}


#mycurve .card::after {
    content: "";
    width: 64px;
    height: 64px;
    background-color: transparent;
    position: absolute;
    left: 86px;
    bottom: -4px;
    border-bottom-left-radius: 64px;

    box-shadow: -20px 0 0 0 #ffffff;

}


#mycurve .card .shape {
    width: 80px;
    height: 80px;
    background-color: #ffffff;
    position: absolute;
    left: 8px;
    bottom: 8px;
    z-index: 99;
    border-radius: 50%;
}

#mycurve .card .shape::after {
    content: "";
    width: 0;
    height: 0;
    border-top: 80px solid transparent;
    border-left: 80px solid #ffffff;
    border-bottom: 80px solid #ffffff;
    border-right: 80px solid transparent;
    position: absolute;
    left: -32px;
    bottom: -32px;
}

#mycurve .zoom {
    width: 80px;
    height: 80px;
    background-color: black;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 99;
    border-radius: 50%;
}


#mycurve .card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
} */

.modal-backdrop.show {
    backdrop-filter: blur(25px);
    /* -webkit-backdrop-filter: blur(10px); */
    background-color: #000;

}


.details-package-modal .modal-content {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 20px;
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
    color: #fff;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    padding: 20px;
}

.details-package-modal .modal-content .btn-close {
    position: absolute;
    top: -10px;
    left: -10px;
    backdrop-filter: blur(15px);
    background-color: rgba(255, 255, 255, 0.25);
    border-radius: 50%;
    padding: 0.8rem;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
    opacity: 1;
}

.details-package-modal .section-card {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 15px;
    padding: 20px;
    margin-bottom: 20px;
}

.details-package-modal .section-card-ul {
    background: rgba(85, 85, 85, 0.50);
    border-radius: 15px;
    padding: 20px;
    margin-bottom: 20px;
}

.details-package-modal .packages-img img {
    border-radius: 15px;
    height: 200px;
    width: 100%;
    object-fit: fill;
}

.details-package-modal .price-tag {
    background: rgba(255, 255, 255, 0.15);
    border-radius: 10px;
    padding: 5px 15px;
    font-size: 16px;
    font-weight: bold;
    display: inline-block;
}

.details-package-modal .btn-submit {
    background: linear-gradient(90deg, #5b4bff, #7d66ff);
    border: none;
    color: #fff;
    border-radius: 10px;
    padding: 10px 25px;
}

.details-package-modal h4,
.details-package-modal h5 {
    font-weight: bold;
}

.details-package-modal .modal-header {
    border-bottom: none;
}

.details-package-modal .modal-footer {
    border-top: none;
}

.details-package-modal .submit-contract a {
    margin-top: 10px;
    margin-bottom: 40px;
    display: inline-flex;
    gap: 10px;
    padding: 15px 36px;
    color: white;
    border-radius: 132px;
    border: 1px solid;
    border-color: #000000;
    box-shadow: 0px 0px 79px #9d94ff66, 0px 28px 60px #0000007a;
    background: linear-gradient(0deg,
            rgba(30, 28, 60, 1) 0%,
            rgba(89, 86, 164, 1) 100%);
}

.details-package-modal .submit-contract a:hover {
    transform: translateY(-2px);
    box-shadow: 0px 0px 85px #9d94ff66, 0px 32px 64px #0000007a;
}

s

/* --------------- package area----------------- */
.package-section {
    padding-left: 150px;
    padding-right: 150px;
}

.package-section .title h2 {
    font-weight: 700;
    color: var(--nqcblack);
    font-size: 36px;
}

@media (max-width: 768px) {
    .package-section {
        padding-left: 10px;
        padding-right: 10px;
    }

    .package-section .title h2 {
        font-size: 30px;
    }

}


.package-section .packages-card {
    width: 100%;
    background-color: white;
    border-radius: 52px;
    box-shadow: 0px 88px 64px -32px #0e0e0e40;
}

.package-section .card-custom {
    width: 100%;
    border-radius: 42px;
    color: white;
    padding: 4.5rem;
    overflow: hidden;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);

}

.package-section .card-custom.platinum-card {
    background: linear-gradient(0deg,
            rgba(30, 28, 60, 1) 0%,
            rgba(89, 86, 164, 1) 100%), linear-gradient(0deg, rgba(35, 38, 47, 1) 0%, rgba(35, 38, 47, 1) 100%);
}

.package-section .card-custom.premium-card {
    background: linear-gradient(to bottom, #FFA641, #FF7E29);
}

.package-section .label-top {
    position: absolute;
    top: 1rem;
    left: 2rem;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 9999px;
    padding: 0.25rem 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.package-section .star-top {
    position: absolute;
    top: 1rem;
    right: 2rem;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.package-section .circle-btn {
    position: absolute;
    bottom: 0;
    left: 0;
    transform: translate(30%, -25%);
    background-color: #FF8C2A;
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
    cursor: pointer;
    transition: transform 0.3s;
}

.package-section .circle-btn-platinum {
    position: absolute;
    bottom: 0;
    left: 0;
    transform: translate(30%, -25%);
    background: linear-gradient(0deg,
            rgba(30, 28, 60, 1) 0%,
            rgba(89, 86, 164, 1) 100%), linear-gradient(0deg, rgba(35, 38, 47, 1) 0%, rgba(35, 38, 47, 1) 100%);
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
    cursor: pointer;
    transition: transform 0.3s;
}


.package-section .circle-btn:hover {
    transform: translate(25%, -25%) scale(1.1);
}

.package-section .circle-btn i {
    font-size: 18px;
    font-weight: 700;
}

.package-section .circle-btn-platinum:hover {
    transform: translate(25%, -25%) scale(1.1);
}

.package-section .circle-btn-platinum i {
    font-size: 18px;
    font-weight: 700;
}

.package-section .bg-glow {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 8rem;
    height: 8rem;
    background-color: rgba(117, 80, 246, 0.4);
    border-radius: 50%;
    filter: blur(3rem);
    transform: translate(-20%, 40%);
    z-index: -1;
}

.package-section .packages-card .package-label {
    margin-bottom: 40px !important;
}

.package-section .packages-card .package-label img {
    height: 20px;
    width: 20px;
}

.package-section .packages-card .package-label h4 {
    color: var(--primary);
    font-size: 16px;
    font-weight: 600;
}

.package-section .packages-card .package-label p {
    margin-right: 20px;
    margin-top: 5px;
    color: var(--nqcbody-text);
    font-size: 12px;
    font-weight: 400;
}

/* -------------------submit Contract Packages------------------------ */

#submitContractPackagesModalId .modal-content {
    border-color: transparent;
    border-radius: 15px;
    background: rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
    padding-bottom: 50px;
}

#submitContractPackagesModalId .modal-content .btn-close {
    position: absolute;
    top: -10px;
    left: -10px;
    backdrop-filter: blur(15px);
    background-color: rgba(255, 255, 255, 0.25);
    border-radius: 50%;
    padding: 0.8rem;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
    opacity: 1;
}

#submitContractPackagesModalId .form-packages-card {
    padding-top: 32px;
    padding-bottom: 10px;
    background-color: white;
    border-radius: 24px;
    box-shadow: 0px 88px 64px -32px #0e0e0e40;
}

#submitContractPackagesModalId .form-packages-card label {
    color: var(--nqcbody-text);
    font-weight: 600;
}

#submitContractPackagesModalId .icons-search-line-wrapper {
    width: 52px;
    height: 52px;
    border-radius: 64px;
    overflow: hidden;
    border: 2px solid #000000;
    box-shadow: 0px 0px 31px #9d94ff, 0px 28px 60px #0000008c;
    background: linear-gradient(0deg,
            rgba(30, 28, 60, 1) 0%,
            rgba(89, 86, 164, 1) 100%);
}

#submitContractPackagesModalId .icons-search-line {
    width: 24px;
    height: 24px;
}

#submitContractPackagesModalId #btnSubmitContract {
    margin-top: 10px;
    margin-bottom: 40px;
    display: inline-flex;
    gap: 10px;
    padding: 15px 36px;
    color: white;
    border-radius: 132px;
    border: 1px solid;
    border-color: #000000;
    box-shadow: 0px 0px 79px #9d94ff66, 0px 28px 60px #0000007a;
    background: linear-gradient(0deg,
            rgba(30, 28, 60, 1) 0%,
            rgba(89, 86, 164, 1) 100%);
}

#submitContractPackagesModalId #btnSubmitContract:hover {
    transform: translateY(-2px);
    box-shadow: 0px 0px 85px #9d94ff66, 0px 32px 64px #0000007a;
}