.nav-pills li{
    /* border: 2px solid black; */
    width: 100%;
}

.nav-tabs > li {
    list-style: none !important;
    padding-right: 35px;
    font-size: 16px;
    margin-top: 5px !important;
}
.nav-tabs > li > a {
    color: #636;
}
.nav-pills li a {
    border-bottom: solid 1px #636;
}
.nav-pills > li.active > a, .nav-pills > li.active > a:focus, .nav-pills > li.active > a:hover {
    color: #fff;
    background-color: #636;
}
.w-25 {
    width: 25%;
}
.w-50 {
    width: 50%;
}
.w-75 {
    width: 75%;
}
.w-100 {
    width: 100%;
}
.nav-box {
    background: #eee none repeat scroll 0 0;
    border-top: solid 2px #c66;
    opacity: 0.9;
}
.large-text{
    font-size: 20px;
    color: #f5f5f5;
}
.mt-2 {
    margin-top: 10px !important;
}
.mt--10{
    margin-top: -10px;
}
.text-black-50 {
    color: #666;
}
form input[type=checkbox] {
    padding: 20px;
    width: auto;
}
.bg-light {
    background-color: #f1f4f7;
}
.current-session {
    margin-top: -40px;
    margin-right: 40px;
    font-size: 18px;
    padding: 0.9333rem 1rem 0.6rem 1rem;
    text-align: right;
}
.current-session span {
    color: #666;
    font-weight: bold;
}
.blog-title{
    font-size: 32px;
}
.dashboard-box{
    border:solid 1px #966;
    border-radius:5px;
    padding: 10px;
    margin: 5px;
    min-height: 30px
}

.dashboard-box:hover {
    background-color: #eee;
}
@media (max-width: 600px) {
    .logo1 {
        max-width: 280px;
    }

}

@media (max-width: 300px) {
    .logo1 {
        max-width: 100%;
    }
}
/* BEGIN TABLE STYLES */
.table th, .table td {
    font-size: 14px;
    padding: 0.9333rem 1rem 0.6rem 1rem;
    border-top-color: #d5dae6;
}

@media print{
    .table th, .table td {
        font-size: 11px;
        padding: 0.4rem 1rem 0.25rem 1rem !important;
    }
    .table tr:nth-child(odd) td {
        background-color: #f1f4f7 !important;
        -webkit-print-color-adjust: exact;
    }
    .action-btn{
        display:none;
    }
}

th div {
    vertical-align: auto;
    text-align: start;
}

.table thead th {
    font-weight: bold;
    border-bottom-color: #d5dae6;
}

.table tbody + tbody {
    border-top-color: #d5dae6;
}

.table-bordered {
    border-color: #d5dae6;
}

    .table-bordered th, .table-bordered td {
        border-color: #d5dae6;
    }

.table-striped tbody tr:nth-of-type(odd) {
    background-color: #f1f4f7;
    color: #366 !important;
}

.rotate {
    transform: rotate(270.0deg) !important;
}

/* END TABLE STYLES */
.m-auto{
    margin:auto;
}

@media print {
}


/* Fees Payment */

/* =========================================
   FEE PAYMENT PAGE
========================================= */

.fee-hero {
    position: relative;
    min-height: 560px;
    display: flex;
    align-items: center;
    overflow: hidden;

    background:
        linear-gradient(115deg, rgba(5,5,5,.95), rgba(5,5,5,.70)),
        url("../assets/images/slider/1.jpg") center/cover no-repeat;

    color: #fff;

    padding-top: 110px;
}

.fee-hero::before {
    content: "";
    position: absolute;
    width: 450px;
    height: 450px;

    right: -180px;
    top: -150px;

    background: rgba(215,25,32,.25);

    border-radius: 50%;
    filter: blur(20px);
}

.fee-hero-content {
    position: relative;
    z-index: 2;
    max-width: 760px;
}

.fee-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;

    color: #fff;
    font-size: 12px;
    font-weight: 700;

    letter-spacing: 3px;

    margin-bottom: 20px;
}

.fee-eyebrow i {
    color: #d71920;
}

.fee-hero h1 {
    font-size: clamp(42px, 6vw, 78px);
    line-height: 1.05;

    margin: 0 0 25px;

    font-weight: 800;
}

.fee-hero h1 span {
    display: block;
    color: #d71920;
}

.fee-hero p {
    max-width: 650px;

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

    font-size: 18px;
    line-height: 1.8;

    margin-bottom: 35px;
}

.fee-hero-buttons,
.cta-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
}

.fee-btn-primary,
.fee-btn-outline {
    display: inline-flex;
    align-items: center;
    gap: 10px;

    padding: 15px 25px;

    border-radius: 50px;

    text-decoration: none;

    font-weight: 700;

    transition: .3s ease;
}

.fee-btn-primary {
    background: #d71920;
    color: #fff;
}

.fee-btn-primary:hover {
    background: #fff;
    color: #d71920;
    transform: translateY(-3px);
}

.fee-btn-outline {
    border: 1px solid rgba(255,255,255,.4);
    color: #fff;
}

.fee-btn-outline:hover {
    background: #fff;
    color: #222;
    transform: translateY(-3px);
}


/* =========================================
   INTRO
========================================= */

.fee-intro {
    padding: 100px 0;
    background: #fff;
}

.fee-section-heading {
    max-width: 720px;
    margin: 0 auto 55px;
    text-align: center;
}

.fee-section-heading > span {
    color: #d71920;

    font-size: 12px;
    font-weight: 800;

    letter-spacing: 3px;
}

.fee-section-heading h2 {
    margin: 12px 0 15px;

    color: #151515;

    font-size: 42px;
    line-height: 1.15;
    font-weight: 800;
}

.fee-section-heading p {
    color: #777;

    font-size: 16px;
    line-height: 1.8;
}


/* =========================================
   HIGHLIGHTS
========================================= */

.fee-highlights {
    display: grid;
    grid-template-columns: repeat(3, 1fr);

    gap: 25px;
}

.fee-highlight {
    display: flex;
    gap: 18px;

    padding: 30px;

    border: 1px solid #eee;
    border-radius: 20px;

    background: #fff;

    transition: .3s ease;
}

.fee-highlight:hover {
    transform: translateY(-7px);

    box-shadow: 0 20px 50px rgba(0,0,0,.08);
}

.fee-icon {
    min-width: 55px;
    width: 55px;
    height: 55px;

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

    background: rgba(215,25,32,.08);

    color: #d71920;

    border-radius: 15px;

    font-size: 20px;
}

.fee-highlight h3 {
    margin: 0 0 7px;

    font-size: 17px;
}

.fee-highlight p {
    margin: 0;

    color: #777;

    font-size: 14px;
    line-height: 1.6;
}


/* =========================================
   SCHOOL FEES
========================================= */

.school-fees {
    padding: 100px 0;

    background:
        linear-gradient(135deg,#0b0b0b,#171717);

    color: #fff;
}

.light-heading h2 {
    color: #fff;
}

.light-heading p {
    color: rgba(255,255,255,.65);
}

.school-fee-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);

    gap: 25px;
}

.school-fee-card {
    position: relative;

    padding: 35px;

    background: #fff;
    color: #222;

    border-radius: 25px;

    overflow: hidden;

    transition: .35s ease;
}

.school-fee-card:hover {
    transform: translateY(-10px);

    box-shadow: 0 30px 70px rgba(0,0,0,.3);
}

.school-fee-card.featured {
    border: 2px solid #d71920;
    transform: translateY(-12px);
}

.school-fee-card.featured:hover {
    transform: translateY(-18px);
}

.featured-label {
    position: absolute;

    top: 0;
    right: 0;

    background: #d71920;
    color: #fff;

    padding: 8px 18px;

    font-size: 10px;
    font-weight: 800;

    letter-spacing: 1px;

    border-radius: 0 0 0 15px;
}

.school-card-top {
    display: flex;
    justify-content: space-between;
    align-items: center;

    margin-bottom: 25px;
}

.school-card-top > span {
    color: #ddd;

    font-size: 35px;
    font-weight: 800;
}

.school-card-icon {
    width: 65px;
    height: 65px;

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

    border-radius: 18px;

    background: rgba(215,25,32,.08);

    color: #d71920;

    font-size: 25px;
}

.school-fee-card h3 {
    font-size: 27px;
    margin-bottom: 12px;
}

.school-fee-card > p {
    color: #777;

    line-height: 1.7;

    min-height: 85px;
}

.school-fee-card ul {
    list-style: none;

    padding: 0;
    margin: 25px 0;

    border-top: 1px solid #eee;
}

.school-fee-card li {
    padding: 12px 0;

    border-bottom: 1px solid #eee;

    color: #555;

    font-size: 14px;
}

.school-fee-card li i {
    color: #d71920;
    margin-right: 8px;
}

.school-card-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 14px 18px;

    border-radius: 12px;

    background: #111;
    color: #fff;

    text-decoration: none;

    font-size: 13px;
    font-weight: 700;

    transition: .3s;
}

.school-card-btn:hover {
    background: #d71920;
    color: #fff;
}


/* =========================================
   PAYMENT STEPS
========================================= */

.payment-process {
    padding: 100px 0;

    background: #f8f8f8;
}

.payment-steps {
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

.payment-step {
    width: 220px;

    text-align: center;
}

.step-number {
    color: #d71920;

    font-size: 12px;
    font-weight: 800;

    letter-spacing: 2px;

    margin-bottom: 10px;
}

.step-icon {
    width: 70px;
    height: 70px;

    margin: 0 auto 20px;

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

    border-radius: 50%;

    background: #fff;

    color: #d71920;

    font-size: 25px;

    box-shadow: 0 15px 40px rgba(0,0,0,.08);
}

.payment-step h3 {
    margin-bottom: 10px;

    font-size: 18px;
}

.payment-step p {
    color: #777;

    font-size: 13px;
    line-height: 1.7;
}

.payment-line {
    width: 70px;
    height: 1px;

    margin-top: 105px;

    background: #ddd;
}


/* =========================================
   NOTICE
========================================= */

.payment-notice {
    padding: 70px 0;
    background: #fff;
}

.notice-card {
    display: flex;
    align-items: center;
    gap: 25px;

    padding: 35px;

    border-radius: 22px;

    background: #fff5f5;

    border: 1px solid #ffd8da;
}

.notice-icon {
    min-width: 65px;
    height: 65px;

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

    border-radius: 50%;

    background: #d71920;
    color: #fff;

    font-size: 25px;
}

.notice-content {
    flex: 1;
}

.notice-content > span {
    color: #d71920;

    font-size: 10px;
    font-weight: 800;

    letter-spacing: 2px;
}

.notice-content h3 {
    margin: 7px 0;

    font-size: 20px;
}

.notice-content p {
    margin: 0;

    color: #777;

    line-height: 1.7;

    font-size: 14px;
}

.notice-btn {
    padding: 13px 20px;

    border-radius: 50px;

    background: #111;
    color: #fff;

    text-decoration: none;

    white-space: nowrap;

    font-size: 12px;
    font-weight: 700;
}

.notice-btn:hover {
    background: #d71920;
    color: #fff;
}


/* =========================================
   FAQ
========================================= */

.fee-faq {
    padding: 100px 0;
    background: #f8f8f8;
}

.faq-grid {
    max-width: 850px;
    margin: auto;
}

.faq-grid details {
    background: #fff;

    margin-bottom: 12px;

    border-radius: 14px;

    overflow: hidden;

    box-shadow: 0 8px 30px rgba(0,0,0,.04);
}

.faq-grid summary {
    display: flex;
    justify-content: space-between;
    align-items: center;

    padding: 22px 25px;

    cursor: pointer;

    font-weight: 700;

    list-style: none;
}

.faq-grid summary::-webkit-details-marker {
    display: none;
}

.faq-grid summary i {
    color: #d71920;
}

.faq-grid details p {
    padding: 0 25px 22px;

    margin: 0;

    color: #777;

    font-size: 14px;
    line-height: 1.7;
}


/* =========================================
   CTA
========================================= */

.fee-cta {
    padding: 100px 0;

    text-align: center;

    background:
        linear-gradient(rgba(215,25,32,.92),rgba(215,25,32,.92)),
        url("../assets/images/slider/1.jpg") center/cover;

    color: #fff;
}

.fee-cta-content {
    max-width: 750px;
    margin: auto;
}

.fee-cta-content > span {
    font-size: 11px;
    font-weight: 800;

    letter-spacing: 3px;
}

.fee-cta h2 {
    margin: 15px 0;

    font-size: 42px;
}

.fee-cta p {
    color: rgba(255,255,255,.85);

    font-size: 16px;

    margin-bottom: 30px;
}

.fee-cta .fee-btn-primary {
    background: #fff;
    color: #d71920;
}

.fee-cta .fee-btn-primary:hover {
    background: #111;
    color: #fff;
}

.fee-cta .fee-btn-outline {
    border-color: rgba(255,255,255,.6);
}

.fee-cta .fee-btn-outline:hover {
    background: #fff;
    color: #222;
}


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

@media(max-width: 991px){

    .fee-highlights,
    .school-fee-grid {
        grid-template-columns: 1fr;
    }

    .school-fee-card.featured {
        transform: none;
    }

    .school-fee-card.featured:hover {
        transform: translateY(-8px);
    }

    .payment-steps {
        flex-direction: column;
        align-items: center;
        gap: 35px;
    }

    .payment-line {
        width: 1px;
        height: 45px;

        margin: 0;
    }

    .notice-card {
        flex-direction: column;
        text-align: center;
    }

}


@media(max-width: 600px){

    .fee-hero {
        min-height: 600px;
        padding-top: 130px;
    }

    .fee-hero h1 {
        font-size: 42px;
    }

    .fee-hero p {
        font-size: 15px;
    }

    .fee-hero-buttons,
    .cta-actions {
        flex-direction: column;
    }

    .fee-btn-primary,
    .fee-btn-outline {
        justify-content: center;
        width: 100%;
    }

    .fee-section-heading h2 {
        font-size: 32px;
    }

    .fee-intro,
    .school-fees,
    .payment-process,
    .fee-faq,
    .fee-cta {
        padding: 70px 0;
    }

    .school-fee-card {
        padding: 25px;
    }

    .fee-cta h2 {
        font-size: 32px;
    }

}


/* =========================================================
   ST. AMBROSE NEWS & EVENTS
   COMPLETE MODERN CSS
========================================================= */


/* =========================================================
   GLOBAL NEWS PAGE
========================================================= */

.news-page {
    width: 100%;
    overflow: hidden;
}

.news-page .container {
    width: min(1200px, 92%);
    margin: 0 auto;
}


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

.news-hero {
    position: relative;
    min-height: 430px;

    display: flex;
    align-items: center;

    padding: 120px 0 80px;

    color: #fff;

    background:
        linear-gradient(
            110deg,
            rgba(5, 10, 20, .96),
            rgba(25, 8, 12, .88)
        ),
        url("../assets/images/slider/1.jpg")
        center center / cover no-repeat;

    overflow: hidden;
}


/* Decorative circles */

.news-hero::before {
    content: "";

    position: absolute;

    width: 420px;
    height: 420px;

    right: -180px;
    top: -180px;

    background: rgba(215, 25, 32, .25);

    border-radius: 50%;

    filter: blur(20px);
}


.news-hero::after {
    content: "";

    position: absolute;

    width: 180px;
    height: 180px;

    left: -80px;
    bottom: -80px;

    border: 2px solid rgba(255,255,255,.08);

    border-radius: 50%;
}


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


.news-hero-tag {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    margin-bottom: 20px;

    color: #ff6269;

    font-size: 13px;

    font-weight: 800;

    letter-spacing: 3px;

    text-transform: uppercase;
}


.news-hero-tag i {
    font-size: 15px;
}


.news-hero h1 {

    margin: 0 0 22px;

    max-width: 850px;

    font-size: clamp(42px, 6vw, 72px);

    line-height: 1.05;

    font-weight: 800;

    color: #fff;
}


.news-hero h1 span {
    color: #d71920;
}


.news-hero p {

    max-width: 720px;

    margin: 0;

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

    font-size: 17px;

    line-height: 1.9;
}


/* =========================================================
   GENERAL NEWS SECTIONS
========================================================= */

.news-section,
.events-section {

    position: relative;

    padding: 100px 0;

    background: #f7f9fc;
}


.events-section {
    background: #fff;
}


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

.section-heading {

    max-width: 760px;

    margin-bottom: 55px;
}


.section-heading.centered {

    margin-left: auto;
    margin-right: auto;

    text-align: center;
}


.section-heading > span {

    display: inline-block;

    margin-bottom: 12px;

    color: #d71920;

    font-size: 12px;

    font-weight: 800;

    letter-spacing: 3px;

    text-transform: uppercase;
}


.section-heading h2 {

    margin: 0 0 18px;

    color: #101828;

    font-size: clamp(32px, 4vw, 46px);

    line-height: 1.15;

    font-weight: 800;
}


.section-heading p {

    margin: 0;

    color: #667085;

    font-size: 16px;

    line-height: 1.9;
}


/* =========================================================
   CATEGORY BLOCKS
   IMPORTANT FOR YOUR ORIGINAL PHP
========================================================= */

.news-category-section {

    margin-bottom: 85px;
}


.news-category-header {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 25px;

    margin-bottom: 30px;
}


.news-category-title {

    position: relative;

    margin: 0;

    padding-left: 18px;

    color: #101828;

    font-size: 30px;

    font-weight: 800;
}


.news-category-title::before {

    content: "";

    position: absolute;

    left: 0;
    top: 5px;

    width: 5px;
    height: 32px;

    border-radius: 10px;

    background: #d71920;
}


/* =========================================================
   NEWS GRID
========================================================= */

.news-grid {

    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 28px;
}


/* =========================================================
   NEWS CARD
========================================================= */

.news-card {

    position: relative;

    display: flex;

    flex-direction: column;

    min-width: 0;

    height: 100%;

    background: #fff;

    border: 1px solid rgba(16,24,40,.06);

    border-radius: 22px;

    overflow: hidden;

    box-shadow:
        0 12px 35px rgba(16,24,40,.06);

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


.news-card:hover {

    transform: translateY(-8px);

    box-shadow:
        0 25px 60px rgba(16,24,40,.13);
}


/* =========================================================
   NEWS IMAGE
========================================================= */

.news-card-image {

    position: relative;

    width: 100%;

    height: 250px;

    overflow: hidden;

    background: #eee;
}


.news-card-image img {

    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform .7s ease;
}


.news-card:hover .news-card-image img {

    transform: scale(1.08);
}


/* Image overlay */

.news-card-image::after {

    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            to bottom,
            transparent 55%,
            rgba(0,0,0,.35)
        );

    pointer-events: none;
}


/* =========================================================
   CATEGORY LABEL
========================================================= */

.news-category {

    position: absolute;

    left: 18px;
    bottom: 18px;

    z-index: 2;

    display: inline-flex;

    align-items: center;

    padding: 7px 13px;

    background: #d71920;

    color: #fff;

    border-radius: 30px;

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 1px;

    text-transform: uppercase;
}


/* =========================================================
   NEWS CARD CONTENT
========================================================= */

.news-card-content {

    display: flex;

    flex-direction: column;

    flex: 1;

    padding: 26px;
}


.news-date {

    display: inline-flex;

    align-items: center;

    gap: 7px;

    margin-bottom: 12px;

    color: #98a2b3;

    font-size: 11px;

    font-weight: 600;

    text-transform: uppercase;

    letter-spacing: .5px;
}


.news-date i {
    color: #d71920;
}


.news-card-content h3 {

    margin: 0 0 14px;

    color: #101828;

    font-size: 21px;

    line-height: 1.35;

    font-weight: 750;
}


.news-card-content p {

    margin: 0 0 22px;

    color: #667085;

    font-size: 14px;

    line-height: 1.8;
}


/* Read story */

.news-card-content a {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    width: fit-content;

    margin-top: auto;

    color: #d71920;

    text-decoration: none;

    font-size: 13px;

    font-weight: 800;

    transition: .3s ease;
}


.news-card-content a i {

    transition: transform .3s ease;
}


.news-card-content a:hover {

    color: #a90f15;
}


.news-card-content a:hover i {

    transform: translateX(5px);
}


/* =========================================================
   ORIGINAL DATA SUPPORT
   If your PHP uses .blog-post instead of .news-card
========================================================= */

.blog-post {

    position: relative;

    height: 100%;

    padding: 0 0 30px;

    background: #fff;

    border-radius: 22px;

    overflow: hidden;

    box-shadow:
        0 12px 35px rgba(0,0,0,.07);

    transition: .35s ease;
}


.blog-post:hover {

    transform: translateY(-8px);

    box-shadow:
        0 25px 60px rgba(0,0,0,.12);
}


.blog-post > img {

    width: 100%;

    height: 250px;

    object-fit: cover;

    display: block;

    transition: .6s ease;
}


.blog-post:hover > img {

    transform: scale(1.04);
}


.blog-post .blog-title {

    margin: 22px 25px 12px;

    color: #101828;

    font-size: 21px;

    line-height: 1.4;

    font-weight: 800;

    transition: .3s ease;
}


.blog-post a {

    text-decoration: none;
}


.blog-post a:hover .blog-title {

    color: #d71920;
}


.post-detail {

    list-style: none;

    padding: 0;

    margin: 0 25px 18px;
}


.post-detail li {

    color: #98a2b3;

    font-size: 12px;
}


.post-detail i {

    margin-right: 6px;

    color: #d71920;
}


.blog-post > p {

    margin: 0 25px 20px;

    color: #667085;

    font-size: 14px;

    line-height: 1.8;
}


/* =========================================================
   VIEW ALL CATEGORY BUTTON
========================================================= */

.news-view-all {

    display: flex;

    justify-content: flex-end;

    margin-top: 25px;
}


.news-view-all a {

    display: inline-flex;

    align-items: center;

    gap: 9px;

    padding: 12px 20px;

    background: #101828;

    color: #fff;

    border-radius: 30px;

    text-decoration: none;

    font-size: 12px;

    font-weight: 700;

    transition: .3s ease;
}


.news-view-all a:hover {

    background: #d71920;

    transform: translateY(-2px);
}


/* =========================================================
   BOOTSTRAP COMPATIBILITY
   Your original page uses .row and .col-md-4
========================================================= */

.news-section .row {

    display: flex;

    flex-wrap: wrap;

    margin-left: -14px;
    margin-right: -14px;
}


.news-section .row > [class*="col-"] {

    padding-left: 14px;
    padding-right: 14px;

    margin-bottom: 28px;
}


.news-section .col-md-4 {

    width: 33.333333%;
}


/* =========================================================
   ARCHIVE
========================================================= */

.news-archive {

    margin-top: 70px;

    padding-top: 45px;

    border-top: 1px solid #eaecf0;
}


.news-archive h4 {

    margin: 0 0 20px;

    color: #101828;

    font-size: 20px;

    font-weight: 800;
}


.news-archive .pagination {

    display: flex;

    flex-wrap: wrap;

    gap: 8px;

    margin: 0;

    padding: 0;

    list-style: none;
}


.news-archive .pagination li a {

    display: flex;

    align-items: center;

    justify-content: center;

    min-width: 40px;
    height: 40px;

    padding: 0 12px;

    border: 1px solid #eaecf0;

    border-radius: 10px;

    background: #fff;

    color: #475467;

    text-decoration: none;

    font-size: 13px;

    font-weight: 700;

    transition: .3s ease;
}


.news-archive .pagination li a:hover,
.news-archive .pagination li.active a {

    background: #d71920;

    border-color: #d71920;

    color: #fff;
}


/* =========================================================
   EVENTS
========================================================= */

.events-grid {

    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 25px;
}


.event-card {

    position: relative;

    display: flex;

    gap: 22px;

    padding: 28px;

    background: #fff;

    border: 1px solid #eaecf0;

    border-radius: 22px;

    transition: .35s ease;
}


.event-card:hover {

    transform: translateY(-6px);

    border-color: rgba(215,25,32,.25);

    box-shadow:
        0 20px 50px rgba(0,0,0,.08);
}


.event-date {

    width: 68px;
    height: 78px;

    flex-shrink: 0;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    border-radius: 16px;

    background: #101828;

    color: #fff;
}


.event-date strong {

    font-size: 25px;

    line-height: 1;
}


.event-date span {

    margin-top: 6px;

    color: #ff6970;

    font-size: 8px;

    font-weight: 700;

    letter-spacing: 1px;
}


.event-icon {

    position: absolute;

    top: 25px;
    right: 25px;

    color: #eaecf0;

    font-size: 30px;
}


.event-content {

    padding-right: 45px;
}


.event-type {

    color: #d71920;

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 1.5px;

    text-transform: uppercase;
}


.event-content h3 {

    margin: 8px 0;

    color: #101828;

    font-size: 20px;

    line-height: 1.35;
}


.event-content p {

    margin: 0 0 16px;

    color: #667085;

    font-size: 13px;

    line-height: 1.7;
}


.event-content a {

    color: #d71920;

    text-decoration: none;

    font-size: 12px;

    font-weight: 800;
}


.event-content a i {

    margin-left: 6px;

    transition: .3s;
}


.event-content a:hover i {

    transform: translateX(5px);
}


/* =========================================================
   NEWS CTA
========================================================= */

.news-cta {

    position: relative;

    padding: 110px 0;

    text-align: center;

    color: #fff;

    background:
        linear-gradient(
            120deg,
            rgba(8,12,22,.95),
            rgba(65,5,10,.94)
        ),
        url("../assets/images/slider/3.jpg")
        center / cover no-repeat;

    overflow: hidden;
}


.news-cta::before {

    content: "";

    position: absolute;

    width: 350px;
    height: 350px;

    right: -150px;
    top: -150px;

    background: rgba(215,25,32,.2);

    border-radius: 50%;

    filter: blur(20px);
}


.news-cta-content {

    position: relative;

    z-index: 2;

    max-width: 720px;

    margin: auto;
}


.news-cta-content > span {

    color: #ff6970;

    font-size: 12px;

    font-weight: 800;

    letter-spacing: 2px;
}


.news-cta h2 {

    margin: 15px 0;

    color: #fff;

    font-size: clamp(32px, 5vw, 48px);

    line-height: 1.15;

    font-weight: 800;
}


.news-cta p {

    max-width: 650px;

    margin: 0 auto 30px;

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

    line-height: 1.8;
}


.news-cta-buttons {

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 15px;

    flex-wrap: wrap;
}


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

.news-cta .btn-primary,
.news-cta .btn-outline {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 9px;

    min-height: 50px;

    padding: 0 25px;

    border-radius: 50px;

    text-decoration: none;

    font-size: 13px;

    font-weight: 800;

    transition: .3s ease;
}


.news-cta .btn-primary {

    background: #d71920;

    color: #fff;
}


.news-cta .btn-primary:hover {

    background: #fff;

    color: #d71920;

    transform: translateY(-3px);
}


.news-cta .btn-outline {

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

    color: #fff;
}


.news-cta .btn-outline:hover {

    background: #fff;

    color: #101828;

    transform: translateY(-3px);
}


/* =========================================================
   EMPTY NEWS STATE
========================================================= */

.news-empty {

    padding: 70px 30px;

    text-align: center;

    background: #fff;

    border-radius: 22px;

    border: 1px dashed #d0d5dd;
}


.news-empty i {

    margin-bottom: 15px;

    color: #d71920;

    font-size: 40px;
}


.news-empty h3 {

    margin-bottom: 10px;

    color: #101828;
}


.news-empty p {

    margin: 0;

    color: #667085;
}


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

@media (max-width: 1100px) {

    .news-grid {

        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .news-layout {

        grid-template-columns: 1fr;
    }

}


@media (max-width: 992px) {

    .news-hero {

        min-height: 400px;

        padding: 130px 0 80px;
    }

    .news-section,
    .events-section {

        padding: 80px 0;
    }

    .events-grid {

        grid-template-columns: 1fr;
    }

    .news-section .col-md-4 {

        width: 50%;
    }

}


@media (max-width: 768px) {

    .news-hero {

        min-height: 370px;

        padding: 120px 0 70px;
    }

    .news-hero h1 {

        font-size: 42px;
    }

    .news-hero p {

        font-size: 15px;
    }

    .news-section,
    .events-section {

        padding: 65px 0;
    }

    .section-heading {

        margin-bottom: 40px;
    }

    .section-heading h2 {

        font-size: 32px;
    }

    .news-grid {

        grid-template-columns: 1fr;
    }

    .news-section .col-md-4 {

        width: 100%;
    }

    .news-card-image {

        height: 240px;
    }

    .news-category-header {

        align-items: flex-start;

        flex-direction: column;
    }

    .news-view-all {

        justify-content: flex-start;
    }

    .event-card {

        padding: 22px;
    }

    .news-cta {

        padding: 75px 0;
    }

}


@media (max-width: 520px) {

    .news-hero {

        padding: 105px 0 60px;
    }

    .news-hero h1 {

        font-size: 36px;
    }

    .news-hero-tag {

        font-size: 11px;

        letter-spacing: 2px;
    }

    .news-card-image {

        height: 220px;
    }

    .news-card-content {

        padding: 22px;
    }

    .event-card {

        display: block;
    }

    .event-date {

        margin-bottom: 18px;
    }

    .event-icon {

        display: none;
    }

    .event-content {

        padding-right: 0;
    }

    .news-cta-buttons {

        flex-direction: column;
    }

    .news-cta .btn-primary,
    .news-cta .btn-outline {

        width: 100%;

        max-width: 260px;
    }

}

/* Result Checker */

/* =========================================================
   MODERN RESULT CHECKER
========================================================= */

.result-page {
    min-height: 100vh;
    padding: 150px 20px 90px;
    background:
        radial-gradient(circle at 10% 20%, rgba(215, 25, 32, .08), transparent 30%),
        radial-gradient(circle at 90% 80%, rgba(215, 25, 32, .06), transparent 30%),
        #f7f8fa;
}

/* Main wrapper */

.result-container {
    width: 92%;
    max-width: 1150px;
    margin: 0 auto;
}

/* =========================================================
   PAGE INTRO
========================================================= */

.result-header {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 45px;
}

.result-header .result-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    padding: 8px 18px;
    margin-bottom: 15px;

    border-radius: 50px;

    background: rgba(215, 25, 32, .08);
    color: #d71920;

    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.result-header h1 {
    margin: 0 0 15px;

    color: #171717;

    font-size: 42px;
    line-height: 1.15;
    font-weight: 800;
}

.result-header p {
    margin: 0;

    color: #6b7280;

    font-size: 16px;
    line-height: 1.8;
}

/* =========================================================
   RESULT CARD
========================================================= */

.result-card {
    position: relative;

    max-width: 620px;
    margin: 0 auto;

    padding: 45px;

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

    border: 1px solid rgba(0, 0, 0, .06);

    border-radius: 28px;

    box-shadow:
        0 25px 70px rgba(0, 0, 0, .10);

    overflow: hidden;
}

/* Decorative top line */

.result-card::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 5px;

    background: linear-gradient(
        90deg,
        #d71920,
        #ff4b52,
        #d71920
    );
}

/* =========================================================
   CARD ICON
========================================================= */

.result-icon {
    width: 70px;
    height: 70px;

    margin: 0 auto 22px;

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

    border-radius: 20px;

    background: linear-gradient(
        135deg,
        #d71920,
        #a80f15
    );

    color: #fff;

    font-size: 28px;

    box-shadow:
        0 15px 35px rgba(215, 25, 32, .25);
}

.result-card-header {
    text-align: center;
    margin-bottom: 30px;
}

.result-card-header h2 {
    margin: 0 0 8px;

    color: #171717;

    font-size: 26px;
    font-weight: 750;
}

.result-card-header p {
    margin: 0;

    color: #777;

    font-size: 14px;
    line-height: 1.6;
}

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

.result-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.result-form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.result-form-group label {
    color: #292929;

    font-size: 13px;
    font-weight: 700;
}

.result-form-group label i {
    margin-right: 6px;
    color: #d71920;
}

/* Input */

.result-input,
.result-select {
    width: 100%;
    height: 54px;

    padding: 0 16px;

    border: 1px solid #e1e4e8;

    border-radius: 12px;

    background: #fafafa;

    color: #222;

    font-size: 14px;

    outline: none;

    transition: .3s ease;

    box-sizing: border-box;
}

.result-input::placeholder {
    color: #a0a5ab;
}

.result-input:focus,
.result-select:focus {
    border-color: #d71920;

    background: #fff;

    box-shadow:
        0 0 0 4px rgba(215, 25, 32, .08);
}

/* =========================================================
   SELECT ARROW
========================================================= */

.result-select {
    cursor: pointer;
}

/* =========================================================
   SUBMIT BUTTON
========================================================= */

.result-submit {
    width: 100%;
    height: 56px;

    margin-top: 5px;

    border: none;
    border-radius: 14px;

    background: linear-gradient(
        135deg,
        #d71920,
        #b10f15
    );

    color: #fff;

    font-size: 15px;
    font-weight: 700;

    cursor: pointer;

    transition: .35s ease;

    box-shadow:
        0 12px 30px rgba(215, 25, 32, .22);
}

.result-submit i {
    margin-right: 8px;
}

.result-submit:hover {
    transform: translateY(-3px);

    box-shadow:
        0 18px 40px rgba(215, 25, 32, .30);
}

.result-submit:active {
    transform: translateY(-1px);
}

/* =========================================================
   HELP TEXT
========================================================= */

.result-help {
    margin-top: 25px;

    padding: 16px;

    border-radius: 12px;

    background: #f8f8f8;

    text-align: center;

    color: #777;

    font-size: 13px;
    line-height: 1.6;
}

.result-help i {
    color: #d71920;
    margin-right: 5px;
}

.result-help a {
    color: #d71920;
    font-weight: 700;
    text-decoration: none;
}

.result-help a:hover {
    text-decoration: underline;
}

/* =========================================================
   RESULT INFORMATION CARDS
========================================================= */

.result-features {
    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 20px;

    max-width: 950px;

    margin: 50px auto 0;
}

.result-feature {
    padding: 25px;

    background: #fff;

    border: 1px solid rgba(0, 0, 0, .05);

    border-radius: 18px;

    text-align: center;

    transition: .3s ease;
}

.result-feature:hover {
    transform: translateY(-5px);

    box-shadow:
        0 15px 35px rgba(0, 0, 0, .08);
}

.result-feature-icon {
    width: 48px;
    height: 48px;

    margin: 0 auto 15px;

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

    border-radius: 14px;

    background: rgba(215, 25, 32, .08);

    color: #d71920;

    font-size: 18px;
}

.result-feature h3 {
    margin: 0 0 7px;

    color: #222;

    font-size: 16px;
    font-weight: 700;
}

.result-feature p {
    margin: 0;

    color: #777;

    font-size: 13px;
    line-height: 1.6;
}

/* =========================================================
   SUCCESS / ERROR MESSAGE
========================================================= */

.result-message {
    padding: 15px 18px;

    margin-bottom: 20px;

    border-radius: 12px;

    font-size: 14px;

    line-height: 1.5;
}

.result-message.success {
    background: #ecfdf3;
    color: #147a43;
    border: 1px solid #b7ebcc;
}

.result-message.error {
    background: #fff1f2;
    color: #b4232b;
    border: 1px solid #fecdd3;
}

/* =========================================================
   RESULT DISPLAY
========================================================= */

.result-output {
    margin-top: 35px;

    padding: 30px;

    background: #fff;

    border-radius: 20px;

    border: 1px solid #eee;

    box-shadow:
        0 15px 40px rgba(0, 0, 0, .07);
}

.result-output-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 15px;

    padding-bottom: 20px;

    margin-bottom: 20px;

    border-bottom: 1px solid #eee;
}

.result-output-header h3 {
    margin: 0;

    font-size: 20px;
    color: #222;
}

.result-status {
    padding: 7px 14px;

    border-radius: 50px;

    background: #ecfdf3;

    color: #147a43;

    font-size: 11px;
    font-weight: 700;
}

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

.result-table-wrapper {
    width: 100%;
    overflow-x: auto;
}

.result-table {
    width: 100%;

    border-collapse: collapse;

    min-width: 600px;
}

.result-table th {
    padding: 14px;

    background: #f7f7f7;

    color: #444;

    font-size: 12px;
    font-weight: 700;

    text-align: left;
}

.result-table td {
    padding: 14px;

    color: #555;

    font-size: 13px;

    border-bottom: 1px solid #eee;
}

.result-table tr:last-child td {
    border-bottom: none;
}

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

@media (max-width: 768px) {

    .result-page {
        padding: 125px 15px 60px;
    }

    .result-container {
        width: 100%;
    }

    .result-header {
        margin-bottom: 30px;
    }

    .result-header h1 {
        font-size: 32px;
    }

    .result-header p {
        font-size: 14px;
    }

    .result-card {
        padding: 30px 22px;

        border-radius: 22px;
    }

    .result-icon {
        width: 60px;
        height: 60px;

        font-size: 23px;
    }

    .result-card-header h2 {
        font-size: 22px;
    }

    .result-features {
        grid-template-columns: 1fr;

        margin-top: 30px;
    }

    .result-feature {
        padding: 22px;
    }

    .result-output {
        padding: 20px;
    }
}

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

@media (max-width: 480px) {

    .result-page {
        padding-top: 115px;
    }

    .result-header h1 {
        font-size: 27px;
    }

    .result-card {
        padding: 25px 18px;
    }

    .result-input,
    .result-select {
        height: 52px;
    }

    .result-submit {
        height: 54px;
    }
}

/* NEW HEADER STYLE*/

/* =========================================================
   HEADER
========================================================= */

/*.header {*/
/*    position: fixed;*/
/*    top: 0;*/
/*    left: 0;*/
/*    width: 100%;*/
/*    height: 90px;*/
/*    background: #ffffff;*/
/*    z-index: 99999;*/

/*    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.08);*/

/*    transition: all 0.3s ease;*/
/*}*/


/* Container */

/*.header > .container {*/
/*    height: 100%;*/
/*    display: flex;*/
/*    align-items: center;*/
/*    justify-content: space-between;*/
/*}*/


/* =========================================================
   LOGO
========================================================= */

/*.logo {*/
/*    display: flex;*/
/*    align-items: center;*/
/*    gap: 12px;*/

/*    text-decoration: none !important;*/

/*    flex-shrink: 0;*/
/*}*/

/*.logo img {*/
/*    width: 58px;*/
/*    height: 58px;*/
/*    object-fit: contain;*/
/*}*/

/*.logo-text {*/
/*    display: flex;*/
/*    flex-direction: column;*/
/*    justify-content: center;*/
/*}*/

/*.logo-text h2 {*/
/*    margin: 0;*/
/*    padding: 0;*/

/*    color: #091b3c;*/

/*    font-size: 22px;*/
/*    font-weight: 800;*/
/*    line-height: 1.1;*/
/*}*/

/*.logo-text small {*/
/*    display: block;*/

/*    margin-top: 4px;*/

/*    color: #777;*/

/*    font-size: 11px;*/
/*    font-weight: 600;*/
/*}*/


/* =========================================================
   NAVIGATION
========================================================= */

 /* =========================================================
    NAVIGATION
 ========================================================= */

/*.navbar {*/
/*    margin: 0;*/
/*    padding: 0;*/

/*    background: transparent;*/
/*    border: none;*/

/*    min-height: auto;*/

/*    flex: 1;*/

/*    display: flex;*/
/*    justify-content: flex-end;*/
/*}*/


/* =========================================================
   MAIN NAVIGATION LIST
 ========================================================= */

/*.navbar > ul {*/

/*    display: flex !important;*/

/*    align-items: center;*/

/*    list-style: none !important;*/

/*    margin: 0 !important;*/
/*    padding: 0 !important;*/

/*    gap: 5px;*/
/*}*/


/*.navbar > ul > li {*/

/*    position: relative;*/

/*    list-style: none !important;*/

/*    margin: 0;*/
/*    padding: 0;*/
/*}*/


/* Main navigation links */

/*.navbar > ul > li > a {*/

/*    display: flex;*/

/*    align-items: center;*/

/*    gap: 7px;*/

/*    padding: 12px 14px;*/

/*    color: #18233a;*/

/*    text-decoration: none !important;*/

/*    font-family: 'Montserrat', sans-serif;*/

/*    font-size: 13px;*/

/*    font-weight: 600;*/

/*    white-space: nowrap;*/

/*    transition: all .3s ease;*/
/*}*/


/*.navbar > ul > li > a:hover {*/

/*    color: #d71920;*/
/*}*/


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

/*.navbar > ul > li > a .fa-angle-down {*/

/*    font-size: 11px;*/

/*    transition: transform .3s ease;*/
/*}*/


/* Desktop arrow */

/*@media (min-width: 901px) {*/

/*    .navbar > ul > li.dropdown:hover > a .fa-angle-down {*/

/*        transform: rotate(180deg);*/

/*    }*/

/*}*/


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

/*@media (min-width: 901px) {*/

/*    .navbar ul.dropdown-menu {*/

/*        position: absolute;*/

/*        top: calc(100% + 10px);*/

/*        left: 0;*/

/*        min-width: 220px;*/

/*        margin: 0;*/

/*        padding: 10px 0;*/

/*        background: #ffffff;*/

/*        border: none;*/

/*        border-radius: 12px;*/

/*        box-shadow: 0 20px 50px rgba(0,0,0,.12);*/

/*        list-style: none;*/

/*        opacity: 0;*/

/*        visibility: hidden;*/

/*        pointer-events: none;*/

/*        transform: translateY(12px);*/

/*        transition:*/
/*            opacity .25s ease,*/
/*            visibility .25s ease,*/
/*            transform .25s ease;*/

/*        z-index: 999999;*/

/*    }*/


    /* Show desktop dropdown */

/*    .navbar > ul > li.dropdown:hover > ul.dropdown-menu {*/

/*        opacity: 1;*/

/*        visibility: visible;*/

/*        pointer-events: auto;*/

/*        transform: translateY(0);*/

/*    }*/


    /* Dropdown items */

/*    .navbar ul.dropdown-menu li {*/

/*        display: block;*/

/*        width: 100%;*/

/*        margin: 0;*/

/*        padding: 0;*/

/*        list-style: none;*/

/*    }*/


/*    .navbar ul.dropdown-menu li a {*/

/*        display: flex;*/

/*        align-items: center;*/

/*        width: 100%;*/

/*        box-sizing: border-box;*/

/*        padding: 12px 20px;*/

/*        color: #333 !important;*/

/*        background: transparent !important;*/

/*        text-decoration: none !important;*/

/*        font-family: 'Montserrat', sans-serif;*/

/*        font-size: 12px;*/

/*        font-weight: 600;*/

/*        white-space: nowrap;*/

/*        transition: all .25s ease;*/

/*    }*/


/*    .navbar ul.dropdown-menu li a:hover {*/

/*        color: #d71920 !important;*/

/*        background: #f8f9fb !important;*/

/*        padding-left: 25px;*/

/*    }*/

/*}*/


/* =========================================================
   NAV BUTTON
 ========================================================= */

/*.navbar > ul > li > a.nav-btn {*/

/*    margin-left: 5px;*/

/*    padding: 12px 22px;*/

/*    background: #d71920 !important;*/

/*    color: #ffffff !important;*/

/*    border-radius: 30px;*/

/*    font-weight: 700;*/
/*}*/


/*.navbar > ul > li > a.nav-btn:hover {*/

/*    background: #b9141b !important;*/

/*    color: #ffffff !important;*/

/*    transform: translateY(-2px);*/
/*}*/


/* Login dropdown must NOT inherit red button */

/*.navbar > ul > li.dropdown > ul.dropdown-menu a {*/

/*    background: transparent !important;*/

/*    color: #333 !important;*/
/*}*/


/* =========================================================
   MOBILE MENU BUTTON
 ========================================================= */

/*.menu-btn {*/

/*    display: none;*/

/*    width: 45px;*/

/*    height: 45px;*/

/*    align-items: center;*/

/*    justify-content: center;*/

/*    background: #d71920;*/

/*    color: #ffffff;*/

/*    border-radius: 10px;*/

/*    cursor: pointer;*/

/*    font-size: 20px;*/

/*    z-index: 100001;*/
/*}*/


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

/*@media (max-width: 900px) {*/


    /* Header */

/*    .header {*/

/*        height: 80px;*/

/*    }*/


/*    .header > .container {*/

/*        position: relative;*/

/*    }*/


    /* Hamburger */

/*    .menu-btn {*/

/*        display: flex;*/

/*        flex-shrink: 0;*/

/*    }*/


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

/*    .navbar {*/

/*        position: absolute;*/

/*        top: 80px;*/

/*        left: 0;*/

/*        width: 100%;*/

/*        display: none;*/

/*        background: #ffffff;*/

/*        box-shadow: 0 15px 35px rgba(0,0,0,.12);*/

/*        padding: 15px 0;*/

/*        z-index: 99999;*/

/*    }*/


    /* JS opens menu */

/*    .navbar.active {*/

/*        display: block !important;*/

/*    }*/


    /* Main list */

/*    .navbar > ul {*/

/*        display: block !important;*/

/*        width: 100%;*/

/*        margin: 0 !important;*/

/*        padding: 0 !important;*/

/*    }*/


/*    .navbar > ul > li {*/

/*        width: 100%;*/

/*        display: block;*/

/*    }*/


    /* Main links */

/*    .navbar > ul > li > a {*/

/*        display: flex;*/

/*        align-items: center;*/

/*        justify-content: space-between;*/

/*        width: 100%;*/

/*        box-sizing: border-box;*/

/*        padding: 15px 25px;*/

/*        font-size: 14px;*/

/*    }*/


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

/*    .navbar ul.dropdown-menu {*/

/*        position: static !important;*/

/*        display: none !important;*/

/*        width: 100% !important;*/

/*        min-width: 100% !important;*/

/*        margin: 0 !important;*/

/*        padding: 0 !important;*/

/*        background: #f8f9fb !important;*/

/*        border: none !important;*/

/*        border-radius: 0 !important;*/

/*        box-shadow: none !important;*/

/*        opacity: 1 !important;*/

/*        visibility: visible !important;*/

/*        pointer-events: auto !important;*/

/*        transform: none !important;*/

/*    }*/


    /* THIS IS THE IMPORTANT RULE */

/*    .navbar > ul > li.dropdown.open > ul.dropdown-menu {*/

/*        display: block !important;*/

/*    }*/


    /* Dropdown items */

/*    .navbar ul.dropdown-menu li {*/

/*        display: block !important;*/

/*        width: 100%;*/

/*        margin: 0 !important;*/

/*        padding: 0 !important;*/

/*        list-style: none !important;*/

/*    }*/


    /* Dropdown links */

/*    .navbar ul.dropdown-menu li a {*/

/*        display: flex !important;*/

/*        align-items: center;*/

/*        width: 100%;*/

/*        box-sizing: border-box;*/

/*        padding: 13px 40px !important;*/

/*        color: #333 !important;*/

/*        background: #f8f9fb !important;*/

/*        text-decoration: none !important;*/

/*        font-size: 13px;*/

/*        font-weight: 600;*/

/*        white-space: nowrap;*/

/*    }*/


/*    .navbar ul.dropdown-menu li a:hover {*/

/*        color: #d71920 !important;*/

/*        background: #eeeeee !important;*/

/*    }*/


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

/*    .navbar > ul > li.dropdown.open > a .fa-angle-down {*/

/*        transform: rotate(180deg);*/

/*    }*/


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

/*    .navbar > ul > li > a.nav-btn {*/

/*        margin: 5px 20px;*/

/*        width: calc(100% - 40px);*/

/*        justify-content: center;*/

/*        box-sizing: border-box;*/

/*    }*/

/*}*/


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

/*@media (max-width: 500px) {*/

/*    .logo img {*/

/*        width: 48px;*/

/*        height: 48px;*/

/*    }*/


/*    .logo-text h2 {*/

/*        font-size: 17px;*/

/*    }*/


/*    .logo-text small {*/

/*        font-size: 9px;*/

/*    }*/

/*}*/

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

/*.navbar ul li.dropdown {*/
/*    position: relative;*/
/*}*/


/* Dropdown hidden by default */

/*.navbar ul li.dropdown > .dropdown-menu {*/
/*    display: none;*/
/*    position: absolute;*/
/*    top: 100%;*/
/*    left: 0;*/

/*    min-width: 220px;*/

/*    background: #fff;*/

/*    padding: 8px 0;*/
/*    margin: 0;*/

/*    list-style: none;*/

/*    z-index: 99999;*/

/*    box-shadow: 0 10px 30px rgba(0,0,0,0.15);*/

/*    border-radius: 8px;*/
/*}*/


/* Open through JavaScript */

/*.navbar ul li.dropdown.open > .dropdown-menu {*/
/*    display: block;*/
/*}*/


/* Dropdown links */

/*.navbar ul li.dropdown > .dropdown-menu li {*/
/*    width: 100%;*/
/*}*/


/*.navbar ul li.dropdown > .dropdown-menu li a {*/
/*    display: block;*/

/*    width: 100%;*/

/*    padding: 12px 18px;*/

/*    color: #333;*/

/*    text-decoration: none;*/

/*    white-space: nowrap;*/
/*}*/


/*.navbar ul li.dropdown > .dropdown-menu li a:hover {*/
/*    background: #f5f5f5;*/
/*}*/


/* =====================================================
   DESKTOP HOVER SUPPORT
===================================================== */

/*@media (min-width: 901px) {*/

/*    .navbar ul li.dropdown:hover > .dropdown-menu {*/
/*        display: block;*/
/*    }*/

/*}*/


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

/*@media (max-width: 900px) {*/

/*    .navbar ul li.dropdown {*/
/*        width: 100%;*/
/*    }*/


/*    .navbar ul li.dropdown > .dropdown-menu {*/
/*        position: static;*/

/*        width: 100%;*/

/*        min-width: 0;*/

/*        box-shadow: none;*/

/*        border-radius: 0;*/

/*        background: transparent;*/

/*        padding-left: 20px;*/
/*    }*/


/*    .navbar ul li.dropdown.open > .dropdown-menu {*/
/*        display: block;*/
/*    }*/


/*    .navbar ul li.dropdown > .dropdown-menu li a {*/
/*        padding: 12px 20px;*/
/*    }*/

/*}*/

/* =====================================================
   ST. AMBROSE NAVIGATION DROPDOWN FIX
===================================================== */

/*.header {*/
/*    position: relative;*/
/*    z-index: 10000;*/
/*}*/

/*.navbar {*/
/*    position: relative;*/
/*    z-index: 10001;*/
/*}*/

/*.navbar > ul {*/
/*    position: relative;*/
/*    z-index: 10002;*/
/*}*/

/*.navbar > ul > li {*/
/*    position: relative;*/
/*}*/


/* Dropdown */

/*.navbar li.dropdown {*/
/*    position: relative;*/
/*}*/

/*.navbar li.dropdown .dropdown-menu {*/
/*    display: none;*/

/*    position: absolute;*/

/*    top: 100%;*/
/*    left: 0;*/

/*    width: 220px;*/

/*    margin: 0;*/
/*    padding: 8px 0;*/

/*    list-style: none;*/

/*    background: #ffffff;*/

/*    border-radius: 8px;*/

/*    box-shadow: 0 10px 30px rgba(0,0,0,.15);*/

/*    z-index: 999999;*/
/*}*/


/* OPEN */

/*.navbar li.dropdown.open > .dropdown-menu {*/
/*    display: block !important;*/
/*}*/


/* Dropdown links */

/*.navbar li.dropdown .dropdown-menu li {*/
/*    display: block;*/
/*    width: 100%;*/
/*}*/

/*.navbar li.dropdown .dropdown-menu li a {*/
/*    display: block;*/

/*    width: 100%;*/

/*    padding: 12px 18px;*/

/*    color: #333333;*/

/*    text-decoration: none;*/

/*    background: #ffffff;*/
/*}*/

/*.navbar li.dropdown .dropdown-menu li a:hover {*/
/*    background: #f3f3f3;*/
/*}*/


/* =====================================================
   DESKTOP
===================================================== */

/*@media (min-width: 901px) {*/

/*    .navbar li.dropdown:hover > .dropdown-menu {*/
/*        display: block;*/
/*    }*/

/*}*/


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

/*@media (max-width: 900px) {*/

/*    .navbar li.dropdown .dropdown-menu {*/

/*        position: static;*/

/*        width: 100%;*/

/*        padding: 0;*/

/*        margin: 0;*/

/*        box-shadow: none;*/

/*        border-radius: 0;*/

/*        background: transparent;*/

/*    }*/

/*    .navbar li.dropdown.open > .dropdown-menu {*/
/*        display: block !important;*/
/*    }*/

/*}*/



/* Fresh Menu Style */

/* =========================================================
   ST. AMBROSE SCHOOLS
   CLEAN RESPONSIVE HEADER + NAVIGATION
   =========================================================

   IMPORTANT:
   Remove the previous navbar / dropdown / menu CSS before
   using this stylesheet.

   HTML classes supported:
   .header
   .logo
   .logo-text
   .menu-btn
   .navbar
   .dropdown
   .dropdown-toggle
   .dropdown-menu
   .nav-btn
========================================================= */


/* =========================================================
   HEADER - TRANSPARENT DEFAULT
========================================================= */

.header {
    position: fixed;
    top: 0;
    left: 0;

    width: 100%;
    height: 90px;

    background: rgba(255, 255, 255, 0.88);

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

    z-index: 99999;

    border-bottom: 1px solid rgba(255, 255, 255, 0.25);

    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.05);

    transition:
        background 0.35s ease,
        box-shadow 0.35s ease,
        height 0.35s ease,
        border-color 0.35s ease;
}


/* =========================================================
   BLACK HEADER WHEN SCROLLED
========================================================= */

.header.scrolled {

    background: rgba(8, 8, 8, 0.94);

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

    border-bottom: 1px solid rgba(255, 255, 255, 0.08);

    box-shadow:
        0 8px 30px rgba(0, 0, 0, 0.30);
}


/* =========================================================
   SCROLLED LOGO TEXT
========================================================= */

.header.scrolled .logo-text h2 {

    color: #ffffff;

}


.header.scrolled .logo-text small {

    color: rgba(255, 255, 255, 0.65);

}


/* =========================================================
   SCROLLED NAV LINKS
========================================================= */

.header.scrolled .navbar > ul > li > a {

    color: #ffffff;

}


.header.scrolled .navbar > ul > li > a:hover,
.header.scrolled .navbar > ul > li > a:focus {

    color: #ffffff;

    background: rgba(255, 255, 255, 0.10) !important;

}


/* =========================================================
   SCROLLED DROPDOWN ARROWS
========================================================= */

.header.scrolled .dropdown-toggle .fa-angle-down {

    color: #ffffff;

}


/* =========================================================
   SCROLLED HEADER HEIGHT
========================================================= */

.header.scrolled {

    height: 78px;

}


.header.scrolled .logo img {

    width: 52px;
    height: 52px;

}


/* =========================================================
   MOBILE SCROLLED HEADER
========================================================= */

@media (max-width: 900px) {

    .header.scrolled {

        height: 75px;

    }


    .header.scrolled .navbar {

        top: 75px;

        background: rgba(8, 8, 8, 0.98) !important;

    }


    .header.scrolled .navbar > ul > li > a {

        color: #ffffff;

    }


    .header.scrolled .navbar > ul > li > a:hover,
    .header.scrolled .navbar > ul > li > a:focus {

        color: #ffffff;

        background: rgba(255, 255, 255, 0.08) !important;

    }


    .header.scrolled .navbar li.dropdown > .dropdown-menu {

        background: #111111 !important;

    }


    .header.scrolled .navbar li.dropdown > .dropdown-menu li a {

        color: rgba(255, 255, 255, 0.80) !important;

        background: #111111 !important;

    }


    .header.scrolled .navbar li.dropdown > .dropdown-menu li a:hover,
    .header.scrolled .navbar li.dropdown > .dropdown-menu li a:focus {

        color: #ffffff !important;

        background: #1d1d1d !important;

    }

}


/* =========================================================
   MOBILE MENU BUTTON
========================================================= */

.header.scrolled .menu-btn {

    background: #d71920;

    color: #ffffff;

}


/* Header container */

.header > .container {
    width: min(1200px, 92%);
    height: 100%;

    margin: 0 auto;

    display: flex;
    align-items: center;
    justify-content: space-between;

    position: relative;
}


/* =========================================================
   2. LOGO
========================================================= */

.header .logo {
    display: flex;
    align-items: center;

    gap: 12px;

    flex-shrink: 0;

    text-decoration: none !important;

    color: inherit;

    z-index: 100001;
}


/* Logo image */

.header .logo img {
    display: block;

    width: 58px;
    height: 58px;

    object-fit: contain;

    flex-shrink: 0;
}


/* Logo text */

.header .logo-text {
    display: flex;
    flex-direction: column;
    justify-content: center;

    min-width: 0;
}


/* School name */

.header .logo-text h2 {
    margin: 0;
    padding: 0;

    color: #091b3c;

    font-family: 'Montserrat', sans-serif;

    font-size: 22px;
    font-weight: 800;

    line-height: 1.1;

    white-space: nowrap;
}


/* Location / subtitle */

.header .logo-text small {
    display: block;

    margin-top: 4px;

    color: #777777;

    font-family: 'Montserrat', sans-serif;

    font-size: 11px;
    font-weight: 600;

    line-height: 1.2;

    white-space: nowrap;
}


/* =========================================================
   3. NAVIGATION RESET
========================================================= */

/*
   These resets are intentionally scoped to .header so
   they don't destroy Bootstrap or other navigation systems
   elsewhere on the website.
*/

.header .navbar,
.header .navbar ul,
.header .navbar li {
    box-sizing: border-box;
}


/* Main navbar */

.header .navbar {
    display: flex;
    align-items: center;
    justify-content: flex-end;

    flex: 1;

    margin: 0;
    padding: 0;

    min-height: 0;

    background: transparent !important;

    border: none !important;

    position: relative;

    z-index: 100000;
}


/* Main menu */

.header .navbar > ul {
    display: flex !important;
    align-items: center;

    gap: 3px;

    margin: 0 !important;
    padding: 0 !important;

    list-style: none !important;
}


/* Every main menu item */

.header .navbar > ul > li {
    position: relative;

    display: block;

    margin: 0 !important;
    padding: 0 !important;

    list-style: none !important;
}


/* Remove Bootstrap pseudo styles */

.header .navbar > ul > li::before,
.header .navbar > ul > li::after {
    display: none !important;
}


/* =========================================================
   4. MAIN NAVIGATION LINKS
========================================================= */

.header .navbar > ul > li > a {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 7px;

    min-height: 48px;

    padding: 10px 14px;

    color: #18233a;

    background: transparent !important;

    border: none !important;

    border-radius: 8px;

    text-decoration: none !important;

    font-family: 'Montserrat', sans-serif;

    font-size: 13px;
    font-weight: 600;

    line-height: 1;

    white-space: nowrap;

    transition:
        color 0.25s ease,
        background-color 0.25s ease,
        transform 0.25s ease;
}


/* Main link hover */

.header .navbar > ul > li > a:hover,
.header .navbar > ul > li > a:focus {
    color: #d71920;

    background: rgba(215, 25, 32, 0.05) !important;

    text-decoration: none !important;
}


/* =========================================================
   5. DROPDOWN ARROW
========================================================= */

.header .navbar .dropdown-toggle .fa-angle-down {
    display: inline-block;

    margin-left: 2px;

    font-size: 11px;

    color: currentColor;

    transition: transform 0.25s ease;
}


/* Desktop arrow rotation */

@media (min-width: 901px) {

    .header .navbar li.dropdown:hover > .dropdown-toggle
    .fa-angle-down {

        transform: rotate(180deg);
    }

}


/* Mobile arrow rotation */

@media (max-width: 900px) {

    .header .navbar li.dropdown.open > .dropdown-toggle
    .fa-angle-down {

        transform: rotate(180deg);
    }

}


/* =========================================================
   6. DROPDOWN MENU - BASE RESET
========================================================= */

.header .navbar li.dropdown {
    position: relative;
}


/*
   Very important:

   This overrides Bootstrap's default dropdown positioning
   and prevents old CSS from interfering.
*/

.header .navbar li.dropdown > .dropdown-menu {
    box-sizing: border-box;

    margin: 0 !important;

    padding: 8px 0 !important;

    list-style: none !important;

    background: #ffffff !important;

    border: none !important;

    border-radius: 12px;

    box-shadow:
        0 18px 45px rgba(0, 0, 0, 0.14);

    z-index: 999999;
}


/* Remove list styling */

.header .navbar li.dropdown > .dropdown-menu li {
    display: block;

    width: 100%;

    margin: 0 !important;
    padding: 0 !important;

    list-style: none !important;
}


/* Remove pseudo elements */

.header .navbar li.dropdown > .dropdown-menu li::before,
.header .navbar li.dropdown > .dropdown-menu li::after {
    display: none !important;
}


/* =========================================================
   7. DESKTOP DROPDOWN
========================================================= */

@media (min-width: 901px) {

    .header .navbar li.dropdown > .dropdown-menu {

        position: absolute;

        top: calc(100% + 8px);
        left: 0;

        width: 230px;
        min-width: 230px;

        display: block !important;

        opacity: 0;
        visibility: hidden;

        pointer-events: none;

        transform: translateY(10px);

        transition:
            opacity 0.22s ease,
            visibility 0.22s ease,
            transform 0.22s ease;
    }


    /*
       Invisible bridge between the menu and dropdown.

       This prevents the dropdown from disappearing when the
       mouse moves from the parent link to the dropdown.
    */

    .header .navbar li.dropdown > .dropdown-menu::before {

        content: "";

        position: absolute;

        top: -10px;
        left: 0;

        width: 100%;
        height: 10px;

        background: transparent;
    }


    /* Show dropdown on hover */

    .header .navbar li.dropdown:hover > .dropdown-menu {

        opacity: 1;

        visibility: visible;

        pointer-events: auto;

        transform: translateY(0);
    }


    /* =====================================================
       DESKTOP DROPDOWN LINKS
    ===================================================== */

    .header .navbar li.dropdown > .dropdown-menu li a {

        display: flex;
        align-items: center;

        width: 100%;

        box-sizing: border-box;

        padding: 13px 20px;

        color: #333333 !important;

        background: transparent !important;

        border: none !important;

        text-decoration: none !important;

        font-family: 'Montserrat', sans-serif;

        font-size: 12px;

        font-weight: 600;

        line-height: 1.4;

        white-space: nowrap;

        transition:
            color 0.2s ease,
            background-color 0.2s ease,
            padding-left 0.2s ease;
    }


    /* Dropdown hover */

    .header .navbar li.dropdown > .dropdown-menu li a:hover,
    .header .navbar li.dropdown > .dropdown-menu li a:focus {

        color: #d71920 !important;

        background: #f8f9fb !important;

        padding-left: 25px;
    }

}


/* =========================================================
   8. NAVIGATION BUTTON
========================================================= */

.header .navbar > ul > li > a.nav-btn {

    margin-left: 6px;

    padding: 12px 21px;

    min-height: 44px;

    background: #d71920 !important;

    color: #ffffff !important;

    border-radius: 30px;

    font-weight: 700;

    box-shadow:
        0 7px 18px rgba(215, 25, 32, 0.18);

    transition:
        background-color 0.25s ease,
        transform 0.25s ease,
        box-shadow 0.25s ease;
}


/* Button hover */

.header .navbar > ul > li > a.nav-btn:hover,
.header .navbar > ul > li > a.nav-btn:focus {

    background: #b9141b !important;

    color: #ffffff !important;

    transform: translateY(-2px);

    box-shadow:
        0 10px 25px rgba(215, 25, 32, 0.25);
}


/* =========================================================
   9. LOGIN DROPDOWN
========================================================= */

/*
   The Login button is red, but its dropdown must remain
   white.
*/

.header .navbar > ul > li.dropdown > a.nav-btn {
    background: #d71920 !important;
    color: #ffffff !important;
}


/* Login dropdown itself */

.header .navbar > ul > li.dropdown > .dropdown-menu {
    background: #ffffff !important;
}


/* Login dropdown links */

.header .navbar > ul > li.dropdown > .dropdown-menu li a {

    color: #333333 !important;

    background: transparent !important;
}


/* Login dropdown hover */

.header .navbar > ul > li.dropdown > .dropdown-menu li a:hover {

    color: #d71920 !important;

    background: #f8f9fb !important;
}


/* =========================================================
   10. MOBILE MENU BUTTON
========================================================= */

.header .menu-btn {

    display: none;

    width: 46px;
    height: 46px;

    margin-left: auto;

    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    background: #d71920;

    color: #ffffff;

    border-radius: 10px;

    cursor: pointer;

    font-size: 20px;

    line-height: 1;

    z-index: 100002;

    user-select: none;

    transition:
        background-color 0.25s ease,
        transform 0.25s ease;
}


/* Menu button hover */

.header .menu-btn:hover {

    background: #b9141b;

    transform: translateY(-1px);
}


/* =========================================================
   11. MOBILE / TABLET
========================================================= */

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

@media (max-width: 900px) {

    /* -----------------------------------------------------
       HEADER
    ----------------------------------------------------- */

    .header {
        height: 80px;
    }


    .header.scrolled {
        height: 75px;
    }


    .header > .container {
        width: 92%;
        height: 100%;
    }


    /* -----------------------------------------------------
       LOGO
    ----------------------------------------------------- */

    .header .logo img {
        width: 50px;
        height: 50px;
    }


    .header .logo-text h2 {
        font-size: 18px;
    }


    .header .logo-text small {
        font-size: 9px;
    }


    /* -----------------------------------------------------
       MENU BUTTON
    ----------------------------------------------------- */

    .header .menu-btn {

        display: flex;

        position: relative;

        width: 46px;
        height: 46px;

        margin-left: auto;

        align-items: center;
        justify-content: center;

        background: #d71920;

        color: #ffffff;

        border-radius: 10px;

        cursor: pointer;

        z-index: 100005;

        pointer-events: auto;
    }


    /* -----------------------------------------------------
       MOBILE NAVBAR
    ----------------------------------------------------- */

    .header .navbar {

        position: absolute;

        top: 80px;
        left: 0;
        right: 0;

        width: 100%;

        display: none;

        margin: 0 !important;
        padding: 10px 0 18px !important;

        background: #ffffff !important;

        border: none !important;

        border-radius: 0 0 15px 15px;

        box-shadow:
            0 18px 40px rgba(0, 0, 0, 0.15);

        z-index: 100004;

        pointer-events: auto;

        overflow-y: auto;

        max-height: calc(100vh - 80px);

        -webkit-overflow-scrolling: touch;
    }


    /* -----------------------------------------------------
       OPEN NAVBAR
    ----------------------------------------------------- */

    .header .navbar.active {

        display: block !important;

        visibility: visible !important;

        opacity: 1 !important;

        pointer-events: auto !important;
    }


    /* -----------------------------------------------------
       SCROLLED MOBILE NAVBAR
    ----------------------------------------------------- */

    .header.scrolled .navbar {

        top: 75px;

        background: rgba(8, 8, 8, 0.98) !important;

    }


    /* -----------------------------------------------------
       MAIN UL
    ----------------------------------------------------- */

    .header .navbar > ul {

        display: block !important;

        width: 100%;

        margin: 0 !important;
        padding: 0 !important;

        list-style: none !important;
    }


    /* -----------------------------------------------------
       MAIN LI
    ----------------------------------------------------- */

    .header .navbar > ul > li {

        display: block !important;

        position: relative;

        width: 100%;

        margin: 0 !important;
        padding: 0 !important;
    }


    /* -----------------------------------------------------
       MAIN LINKS
    ----------------------------------------------------- */

    .header .navbar > ul > li > a {

        display: flex !important;

        align-items: center;

        justify-content: space-between;

        width: 100%;

        min-height: 50px;

        padding: 14px 22px;

        box-sizing: border-box;

        color: #18233a;

        background: transparent !important;

        border: none !important;

        border-radius: 0;

        text-decoration: none !important;

        cursor: pointer;

        pointer-events: auto !important;

        position: relative;

        z-index: 100006;

        font-size: 14px;
    }


    /* -----------------------------------------------------
       SCROLLED LINKS
    ----------------------------------------------------- */

    .header.scrolled .navbar > ul > li > a {

        color: #ffffff;

    }


    .header.scrolled .navbar > ul > li > a:hover,
    .header.scrolled .navbar > ul > li > a:focus {

        color: #ffffff;

        background: rgba(255, 255, 255, 0.08) !important;

    }


    /* -----------------------------------------------------
       DROPDOWN PARENT
    ----------------------------------------------------- */

    .header .navbar li.dropdown {

        position: relative;

        width: 100%;
    }


    /* -----------------------------------------------------
       DROPDOWN TOGGLE
    ----------------------------------------------------- */

    .header .navbar li.dropdown >
    .dropdown-toggle {

        cursor: pointer !important;

        pointer-events: auto !important;

        user-select: none;

        -webkit-tap-highlight-color: transparent;
    }


    /* -----------------------------------------------------
       ARROW
    ----------------------------------------------------- */

    .header .navbar li.dropdown >
    .dropdown-toggle .fa-angle-down {

        margin-left: auto;

        transition:
            transform 0.25s ease;
    }


    /* -----------------------------------------------------
       OPEN ARROW
    ----------------------------------------------------- */

    .header .navbar li.dropdown.open >
    .dropdown-toggle .fa-angle-down {

        transform: rotate(180deg);

    }


    /* -----------------------------------------------------
       DROPDOWN MENU
    ----------------------------------------------------- */

    .header .navbar li.dropdown >
    .dropdown-menu {

        position: static !important;

        display: none !important;

        width: 100% !important;

        min-width: 0 !important;

        margin: 0 !important;
        padding: 0 !important;

        background: #f5f6f8 !important;

        border: none !important;

        border-radius: 0 !important;

        box-shadow: none !important;

        opacity: 1 !important;

        visibility: visible !important;

        transform: none !important;

        pointer-events: auto !important;

        overflow: visible !important;

        z-index: 100007;
    }


    /* -----------------------------------------------------
       OPEN DROPDOWN
    ----------------------------------------------------- */

    .header .navbar li.dropdown.open >
    .dropdown-menu {

        display: block !important;

        pointer-events: auto !important;
    }


    /* -----------------------------------------------------
       DROPDOWN LI
    ----------------------------------------------------- */

    .header .navbar li.dropdown >
    .dropdown-menu > li {

        display: block !important;

        position: relative;

        width: 100%;

        margin: 0 !important;
        padding: 0 !important;
    }


    /* -----------------------------------------------------
       DROPDOWN LINKS
    ----------------------------------------------------- */

    .header .navbar li.dropdown >
    .dropdown-menu > li > a {

        display: flex !important;

        align-items: center;

        width: 100%;

        min-height: 46px;

        padding: 12px 22px 12px 42px !important;

        box-sizing: border-box;

        color: #333333 !important;

        background: #f5f6f8 !important;

        border: none !important;

        text-decoration: none !important;

        cursor: pointer !important;

        pointer-events: auto !important;

        position: relative;

        z-index: 100008;

        font-size: 13px;

        font-weight: 600;
    }


    /* -----------------------------------------------------
       DROPDOWN LINK HOVER
    ----------------------------------------------------- */

    .header .navbar li.dropdown >
    .dropdown-menu > li > a:hover,
    .header .navbar li.dropdown >
    .dropdown-menu > li > a:focus {

        color: #d71920 !important;

        background: #eeeeee !important;
    }


    /* -----------------------------------------------------
       SCROLLED DROPDOWN
    ----------------------------------------------------- */

    .header.scrolled .navbar li.dropdown >
    .dropdown-menu {

        background: #111111 !important;
    }


    .header.scrolled .navbar li.dropdown >
    .dropdown-menu > li > a {

        color: rgba(255, 255, 255, 0.85) !important;

        background: #111111 !important;
    }


    .header.scrolled .navbar li.dropdown >
    .dropdown-menu > li > a:hover,
    .header.scrolled .navbar li.dropdown >
    .dropdown-menu > li > a:focus {

        color: #ffffff !important;

        background: #1d1d1d !important;
    }


    /* -----------------------------------------------------
       NAV BUTTON
    ----------------------------------------------------- */

    .header .navbar > ul > li > a.nav-btn {

        width: calc(100% - 40px);

        min-height: 48px;

        margin: 7px 20px;

        padding: 13px 20px;

        justify-content: center;

        border-radius: 30px;

        background: #d71920 !important;

        color: #ffffff !important;
    }


    /* -----------------------------------------------------
       LOGIN DROPDOWN
    ----------------------------------------------------- */

    .header .navbar >
    ul > li.dropdown > a.nav-btn {

        background: #d71920 !important;

        color: #ffffff !important;
    }

}


/* =========================================================
   SMALL PHONES
========================================================= */

@media (max-width: 500px) {

    .header {
        height: 75px;
    }


    .header.scrolled {
        height: 70px;
    }


    .header > .container {
        width: 94%;
    }


    .header .logo {
        gap: 8px;
    }


    .header .logo img {
        width: 44px;
        height: 44px;
    }


    .header .logo-text h2 {
        font-size: 16px;
    }


    .header .logo-text small {
        font-size: 8px;
    }


    .header .menu-btn {

        width: 42px;
        height: 42px;

        font-size: 18px;
    }


    .header .navbar {

        top: 75px;

        max-height: calc(100vh - 75px);
    }


    .header.scrolled .navbar {

        top: 70px;

        max-height: calc(100vh - 70px);
    }


    .header .navbar > ul > li > a {

        padding-left: 18px;
        padding-right: 18px;

        font-size: 13px;
    }


    .header .navbar li.dropdown >
    .dropdown-menu > li > a {

        padding-left: 36px !important;
        padding-right: 18px !important;

        font-size: 12px;
    }


    .header .navbar > ul > li > a.nav-btn {

        width: calc(100% - 30px);

        margin-left: 15px;
        margin-right: 15px;
    }

}


/* =========================================================
   VERY SMALL PHONES
========================================================= */

@media (max-width: 350px) {

    .header .logo-text h2 {
        font-size: 14px;
    }


    .header .logo-text small {
        font-size: 7px;
    }


    .header .logo img {
        width: 40px;
        height: 40px;
    }


    .header .menu-btn {
        width: 40px;
        height: 40px;
    }

}

/* =========================================================
   14. ACCESSIBILITY
========================================================= */

.header a:focus-visible,
.header .menu-btn:focus-visible {

    outline: 3px solid rgba(215, 25, 32, 0.25);

    outline-offset: 2px;

}


/* =========================================================
   15. PREVENT BODY SCROLL ISSUES
========================================================= */

@media (max-width: 900px) {

    .header .navbar {

        max-height: calc(100vh - 80px);

        overflow-y: auto;

        -webkit-overflow-scrolling: touch;

    }

}


@media (max-width: 500px) {

    .header .navbar {

        max-height: calc(100vh - 75px);

    }

}


/* =========================================================
   16. OPTIONAL HEADER SCROLLED STATE
========================================================= */

/*
   If your JavaScript adds:

       .header.scrolled

   to the header, this will make it slightly more compact.
*/

.header.scrolled {

    box-shadow:
        0 8px 30px rgba(0, 0, 0, 0.12);

}


@media (min-width: 901px) {

    .header.scrolled {

        height: 82px;

    }


    .header.scrolled .logo img {

        width: 52px;
        height: 52px;

    }

}
```