/* ==================================================
   QUEUE MANAGEMENT PAGE
================================================== */
:root {
    --queue-primary: #0b63ce;
    --queue-primary-dark: #074b9b;
    --queue-secondary: #17a8e5;
    --queue-dark: #0b1735;
    --queue-text: #5f6b7a;
    --queue-light: #f5f9ff;
    --queue-white: #ffffff;
    --queue-border: #dce8f6;
}


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

.queue-hero {
    position: relative;
    min-height: 485px;
    margin-top: 68px;
    display: flex;
    align-items: center;
    overflow: hidden;
    color: var(--queue-white);
    background-image: linear-gradient( 90deg, rgba(5, 20, 48, 0.78) 0%, rgba(10, 42, 92, 0.58) 38%, rgba(15, 75, 150, 0.22) 70%, rgba(15, 75, 150, 0.03) 100% ), url("/images/products/queue-management/queue-hero.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

    .queue-hero::before {
        content: "";
        position: absolute;
        width: 300px;
        height: 300px;
        top: -130px;
        left: -90px;
        border-radius: 50%;
        background: rgba(54, 157, 255, 0.12);
        filter: blur(4px);
    }

    .queue-hero::after {
        content: "";
        position: absolute;
        width: 260px;
        height: 260px;
        bottom: -150px;
        left: 36%;
        border-radius: 50%;
        background: rgba(0, 202, 255, 0.10);
    }

    .queue-hero .container {
        position: relative;
        z-index: 2;
    }

.queue-hero-content {
    max-width: 720px;
}

.queue-hero-label {
    display: inline-flex;
    align-items: center;
    padding: 7px 15px;
    margin-bottom: 18px;
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 50px;
    background: rgba(255, 255, 255, 0.10);
    backdrop-filter: blur(8px);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 1.4px;
}

.queue-hero-content h1 {
    max-width: 700px;
    margin-bottom: 18px;
    color: var(--queue-white);
    font-size: clamp(2.45rem, 5vw, 4rem);
    font-weight: 750;
    line-height: 1.08;
    letter-spacing: -1.6px;
}

    .queue-hero-content h1 span {
        display: block;
        color: #7ad4ff;
    }

.queue-hero-content p {
    max-width: 650px;
    margin-bottom: 28px;
    color: rgba(255, 255, 255, 0.84);
    font-size: 1rem;
    line-height: 1.8;
}

.queue-hero-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

.queue-primary-btn,
.queue-secondary-btn {
    min-height: 48px;
    padding: 12px 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    border-radius: 8px;
    font-size: 0.94rem;
    font-weight: 650;
    text-decoration: none;
    transition: 0.3s ease;
}

.queue-primary-btn {
    color: var(--queue-white);
    background: linear-gradient( 135deg, var(--queue-primary), var(--queue-secondary) );
    box-shadow: 0 12px 30px rgba(0, 126, 222, 0.32);
}

    .queue-primary-btn:hover {
        color: var(--queue-white);
        transform: translateY(-3px);
        box-shadow: 0 16px 36px rgba(0, 126, 222, 0.42);
    }

.queue-secondary-btn {
    color: var(--queue-white);
    border: 1px solid rgba(255, 255, 255, 0.45);
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(8px);
}

    .queue-secondary-btn:hover {
        color: var(--queue-dark);
        background: var(--queue-white);
        border-color: var(--queue-white);
        transform: translateY(-3px);
    }


/* ==================================================
   COMMON SECTION HEADING
================================================== */

.queue-section-label {
    display: inline-block;
    margin-bottom: 12px;
    color: var(--queue-primary);
    font-size: 0.90rem;
    font-weight: 800;
    letter-spacing: 1.5px;
}

.queue-section-heading {
    max-width: 760px;
    margin: 0 auto 42px;
}

    .queue-section-heading h2,
    .queue-overview-content h2,
    .queue-benefits-content h2 {
        font-size: clamp(2.3rem, 4.5vw, 3.3rem);
        font-weight: 800;
        line-height: 1.15;
        letter-spacing: -1px;
    }

        .queue-section-heading h2 span,
        .queue-overview-content h2 span,
        .queue-benefits-content h2 span {
            color: #0b1735;
           
        }

    .queue-section-heading p {
        color: var(--queue-text);
        font-size: 1rem;
        line-height: 1.8;
    }


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

.queue-overview-section {
    padding: 85px 0;
    background: var(--queue-white);
}

.queue-overview-image {
    position: relative;
    width: 100%;
    padding: 13px;
    background: linear-gradient(145deg, #eff6ff, #ffffff);
    border: 1px solid #dbeafe;
    border-radius: 25px;
    box-shadow: 0 24px 55px rgba(15, 23, 42, 0.11);
    overflow: hidden;
}


    .queue-overview-image img {
        display: block;
        width: 110%;
        margin-left: -5%;
        height: auto;
        object-fit: contain;
        object-position: center;
        border-radius: 18px;
        transition: transform .4s ease;
    }

    .queue-overview-image:hover img {
        transform: scale(1.015);
    }



.queue-image-badge {
    position: absolute;
    left: 25px;
    right: 25px;
    bottom: 25px;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 15px 18px;
    border-radius: 14px;
    background: rgba(10, 26, 58, .88);
    border: 1px solid rgba(255,255,255,.18);
    backdrop-filter: blur(8px);
    color: #fff;
}

.queue-image-badge-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: linear-gradient(135deg,#1d8fff,#32b7ff);
    color: #fff;
    font-size: 1.1rem;
}



.queue-overview-content p {
    margin-bottom: 15px;
    color: var(--queue-text);
    font-size: 0.95rem;
    line-height: 1.85;
}

.queue-check-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 13px 20px;
    margin-top: 26px;
}

.queue-check-item {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--queue-dark);
    font-size: 0.9rem;
    font-weight: 600;
}

    .queue-check-item i {
        color: var(--queue-primary);
        font-size: 1rem;
    }


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

.queue-features-section {
    padding: 85px 0;
    background: var(--queue-light);
}

.queue-features-section {
    padding: 85px 0;
    background: var(--queue-light);
}

.queue-feature-card {
    height: 100%;
    padding: 22px 20px;
    border: 1px solid var(--queue-border);
    border-radius: 14px;
    background: var(--queue-white);
    box-shadow: 0 8px 20px rgba(21, 64, 109, 0.06);
    transition: all .35s ease;
}

    .queue-feature-card:hover {
        transform: translateY(-6px);
        border-color: rgba(11, 99, 206, 0.25);
        box-shadow: 0 14px 32px rgba(21, 64, 109, 0.12);
    }

.queue-feature-icon {
    width: 50px;
    height: 50px;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    color: #fff;
    background: linear-gradient(135deg, var(--queue-primary), var(--queue-secondary));
    font-size: 1.2rem;
}

.queue-feature-card h3 {
    margin-bottom: 8px;
    color: var(--queue-dark);
    font-size: 1rem;
    font-weight: 700;
}

.queue-feature-card p {
    margin: 0;
    color: var(--queue-text);
    font-size: .85rem;
    line-height: 1.65;
}

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

.queue-process-section {
    padding: 85px 0;
    background: var(--queue-white);
}

.queue-process-card {
    position: relative;
    height: 100%;
    padding: 20px 16px 18px;
    text-align: center;
    border: 1px solid var(--queue-border);
    border-radius: 12px;
    background: var(--queue-white);
    transition: all .3s ease;
    box-shadow: 0 6px 18px rgba(21, 64, 109, 0.06);
}

    .queue-process-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 14px 30px rgba(21, 64, 109, 0.12);
    }

.queue-step-number {
    position: absolute;
    top: 10px;
    right: 12px;
    color: rgba(11,99,206,.15);
    font-size: 1.3rem;
    font-weight: 800;
}

.queue-process-icon {
    width: 48px;
    height: 48px;
    margin: 0 auto 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #eaf4ff;
    color: var(--queue-primary);
    font-size: 1.1rem;
}

.queue-process-card h3 {
    margin-bottom: 6px;
    color: var(--queue-dark);
    font-size: .95rem;
    font-weight: 700;
}

.queue-process-card p {
    margin: 0;
    color: var(--queue-text);
    font-size: .82rem;
    line-height: 1.55;
}

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

.queue-benefits-section {
    padding: 85px 0;
    background: linear-gradient( 135deg, #f7fbff 0%, #eef6ff 100% );
}

.queue-benefits-content > p {
    margin-bottom: 26px;
    color: var(--queue-text);
    line-height: 1.8;
}

.queue-benefits-list {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.queue-benefit-item {
    display: flex;
    gap: 15px;
}

.queue-benefit-icon {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    color: var(--queue-primary);
    background: var(--queue-white);
    box-shadow: 0 8px 20px rgba(15, 72, 127, 0.10);
}

.queue-benefit-item h3 {
    margin-bottom: 5px;
    color: var(--queue-dark);
    font-size: 1rem;
    font-weight: 700;
}

.queue-benefit-item p {
    margin: 0;
    color: var(--queue-text);
    font-size: 0.87rem;
    line-height: 1.6;
}

.queue-stats-box {
    padding: 28px;
    border-radius: 20px;
    background: linear-gradient( 145deg, #082b5f, #0755a6 );
    box-shadow: 0 22px 50px rgba(7, 57, 112, 0.24);
}

.queue-stat-card {
    height: 100%;
    padding: 25px 15px;
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 14px;
    color: var(--queue-white);
    background: rgba(255, 255, 255, 0.09);
    backdrop-filter: blur(8px);
}

    .queue-stat-card i {
        margin-bottom: 13px;
        color: #82d8ff;
        font-size: 1.7rem;
    }

    .queue-stat-card h3 {
        margin-bottom: 4px;
        color: var(--queue-white);
        font-size: 1.35rem;
        font-weight: 750;
    }

    .queue-stat-card p {
        margin: 0;
        color: rgba(255, 255, 255, 0.74);
        font-size: 0.8rem;
    }


/

/* ==================================================
   RESPONSIVE
================================================== */

@media (max-width: 991.98px) {

    .queue-hero {
        min-height: 440px;
        background-position: 60% center;
    }

    .queue-overview-section,
    .queue-features-section,
    .queue-process-section,
    .queue-benefits-section {
        padding: 70px 0;
    }

    .queue-overview-image img {
        height: 480px;
    }

    .queue-cta-box {
        padding: 40px 32px;
        flex-direction: column;
        align-items: flex-start;
    }
}


@media (max-width: 767.98px) {

    .queue-hero {
        min-height: 420px;
        margin-top: 62px;
        padding: 60px 0;
        background-position: 64% center;
    }

    .queue-hero-content h1 {
        letter-spacing: -1px;
    }

    .queue-check-list {
        grid-template-columns: 1fr;
    }

    .queue-overview-image img {
        height: 420px;
    }

    .queue-section-heading {
        margin-bottom: 32px;
    }

    .queue-cta-section {
        padding: 60px 0;
    }
}


@media (max-width: 575.98px) {

    .queue-hero {
        min-height: 400px;
        padding: 50px 0;
    }

    .queue-hero-content h1 {
        font-size: 2.15rem;
    }

    .queue-hero-buttons {
        flex-direction: column;
        align-items: stretch;
    }

    .queue-primary-btn,
    .queue-secondary-btn {
        width: 100%;
    }

    .queue-overview-section,
    .queue-features-section,
    .queue-process-section,
    .queue-benefits-section {
        padding: 58px 0;
    }

    .queue-overview-image img {
        height: 360px;
    }

    .queue-image-badge {
        left: 14px;
        right: 14px;
        bottom: 14px;
    }

    .queue-feature-card {
        padding: 24px 21px;
    }

    .queue-stats-box {
        padding: 18px;
    }

    .queue-stat-card {
        padding: 20px 10px;
    }

    .queue-cta-box {
        padding: 34px 24px;
        border-radius: 16px;
    }

    .queue-cta-btn {
        width: 100%;
    }
}