/* --------------------
    HEADER PAGE STYLE 
-------------------- */
/* NAV ITEM (links + buttons)*/
.nav-link,
.nav-btn {
    --link-pad-x: 14px;
    --link-pad-y: 10px;

    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: var(--link-pad-y) var(--link-pad-x);
    border-radius: 12px;

    font-weight: 500;
    line-height: 1;
    color: inherit;
    text-decoration: none;
    position: relative;
    transition: background .2s ease, box-shadow .2s ease, color .2s ease, transform .2s ease;
}

.nav-btn {
    background: transparent;
    border: 0;
    cursor: pointer;
}

/* Hover/active glass pill with orange */
.nav-link:hover,
.nav-btn:hover,
.nav-link:focus-visible,
.nav-btn:focus-visible {
    background: rgba(255, 132, 1, 0.1);
    /* orange tint */
    -webkit-backdrop-filter: blur(8px) saturate(140%);
    backdrop-filter: blur(8px) saturate(140%);
    box-shadow: inset 0 0 0 1px rgba(255, 132, 1, 0.25);
    color: #ff8401;
    /* brand orange text */
    outline: none;
}

/* Active/current page states (set aria-current="page" or .is-active) */
.nav-link[aria-current="page"],
.nav-link.is-active {
    background: rgba(255, 132, 1, 0.15);
    box-shadow: inset 0 0 0 1px rgba(255, 132, 1, 0.3);
    color: #ff8401;
}

/* Small underline accent on hover (orange) */
.nav-link::after,
.nav-btn::after {
    content: "";
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: 6px;
    height: 2px;
    background: #ff8401;
    /* brand orange underline */
    opacity: .4;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .25s ease;
}

.nav-link:hover::after,
.nav-btn:hover::after {
    transform: scaleX(1);
}

/* Rotate chevron when open */
[data-menu].open .nav-btn svg,
.nav-btn[aria-expanded="true"] svg {
    transform: rotate(180deg);
}

/* DROPDOWN PANEL */
nav [data-menu] {
    position: relative;
}

.menu-panel {
    position: absolute;
    left: 50%;
    top: 100%;
    transform: translateX(-50%) translateY(10px);
    margin-top: 14px;
    width: auto;
    max-width: clamp(320px, 46vw, 680px);
    overflow: hidden;
    overflow-wrap: anywhere;

    background: #fff;
    backdrop-filter: blur(18px) saturate(160%);
    -webkit-backdrop-filter: blur(18px) saturate(160%);

    padding: 18px 22px;
    border-radius: 16px;

    box-shadow:
        0 6px 18px rgba(0, 0, 0, 0.08),
        0 12px 32px rgba(0, 0, 0, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.22);

    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transition:
        opacity .22s ease,
        transform .22s ease,
        visibility 0s linear .22s;
    will-change: transform, opacity;
}

/* Even smaller variant */
.menu-panel.menu-panel--sm {
    max-width: clamp(300px, 36vw, 520px);
}

/* Show the panel when open */
[data-menu].open>.nav-btn+.menu-panel,
[data-menu] .nav-btn[aria-expanded="true"]+.menu-panel {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
    transition:
        opacity .22s ease,
        transform .22s ease,
        visibility 0s;
}

/* Grid override */
.menu-panel>.grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 18px;
}

/* MENU CONTENT STYLES */
.menu-h {
    font-size: .9rem;
    line-height: 1.1;
    color: #0f172a;
    margin-bottom: .35rem;
}

.menu-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.menu-link {
    display: block;
    padding: 8px 10px;
    border-radius: 10px;
    text-decoration: none;
    color: #0f172a;
    transition: background .2s ease, box-shadow .2s ease, transform .15s ease;
}

.menu-link:hover {
    background: rgba(255, 132, 1, 0.1);
    box-shadow: inset 0 0 0 1px rgba(255, 132, 1, 0.25);
    -webkit-backdrop-filter: blur(6px) saturate(140%);
    backdrop-filter: blur(6px) saturate(140%);
    color: #ff8401;
}

/* Card */
.menu-card {
    border-radius: 14px;
    padding: 14px;
    background: rgba(255, 255, 255, 0.6);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.4);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}

.menu-card-title {
    font-weight: 600;
    color: #0f172a;
}

.menu-card-copy {
    margin-top: 6px;
    font-size: .9rem;
    color: #334155;
}

.menu-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 10px;
    padding: 8px 12px;
    border-radius: 10px;
    background: #ff8401;
    /* brand orange button */
    color: #fff;
    text-decoration: none;
    transition: transform .15s ease, box-shadow .2s ease, background .2s ease;
}

.menu-cta:hover {
    background: #e67300;
    /* darker orange */
    transform: translateY(-1px);
    box-shadow: 0 6px 14px rgba(255, 132, 1, 0.35);
}

/*  RESPONSIVE TWEAKS  */
@media (max-width: 1280px) {
    .menu-panel {
        max-width: min(92vw, 620px);
    }

    .menu-panel.menu-panel--sm {
        max-width: min(92vw, 500px);
    }
}

/* LOADER STYLES */
#loader img {
    width: 100px;
    height: auto;
    animation: spin 5s linear infinite;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/*  STICKY HEADER FIX */
.sticky-header {
    position: fixed;   /* keep header on top */
    top: 0;
    left: 0;
    right: 0;
    z-index: 1100;     /* above everything */
    /* background: #ededed; same bg color */
    /* box-shadow: 0 2px 6px rgba(0,0,0,0.08); */
    /* width: 100%; */
}

/* Push page content down so it doesn’t overlap */
#main-content {
    padding-top: 90px; /* adjust to your header height */
}



/* --------------------
    HOME PAGE STYLE 
-------------------- */
/* Hover & Icon Animation */
.icon-animate {
    transition: transform 0.3s ease;
}

.service-card:hover .icon-animate {
    transform: scale(1.12) rotate(4deg);
}

/* Icon Animation */
.option-card .icon {
    transition: transform .25s ease, filter .25s ease;
}

.option-card:hover .icon {
    animation: floatIcon 1.2s ease-in-out infinite;
}

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

    50% {
        transform: translateY(-3px);
    }

    100% {
        transform: translateY(0);
    }
}

input.peer:checked+label .icon {
    animation: popIcon .35s ease;
    filter: saturate(1.2);
}

@keyframes popIcon {
    0% {
        transform: scale(1) rotate(0);
    }

    50% {
        transform: scale(1.15) rotate(-6deg);
    }

    100% {
        transform: scale(1) rotate(0);
    }
}

/* Flip Cards  */
Section .flip-card {
    perspective: 1000px;
}

.flip-inner {
    transition: transform 0.6s;
    transform-style: preserve-3d;
    position: relative;
    width: 100%;
    height: 100%;
}

.flip-card:hover .flip-inner {
    transform: rotateY(180deg);
}

.flip-front,
.flip-back {
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border-radius: 1rem;
    /* matches Tailwind rounded-2xl */
}

.flip-back {
    transform: rotateY(180deg);
}

/* Accessibility: respect reduced motion */
@media (prefers-reduced-motion: reduce) {
    .flip-inner {
        transition: none;
    }

    .flip-card:hover .flip-inner {
        transform: none;
    }
}

/* Slider Animation */
@keyframes slide-left {
    0% {
        transform: translateX(0);
    }

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

.animate-slide {
    animation: slide-left 35s linear infinite;
}

/* 🟠 Elegant Text Style */
.highlight-soft {
    color: #ff8401;
    font-size: 1.25rem;
    /* ~text-xl */
    font-weight: 400;
    /* no bold */
    white-space: nowrap;
    text-transform: capitalize;
    letter-spacing: 0.5px;
    opacity: 0.9;
    transition: all 0.3s ease-in-out;
}

/* 🌈 Subtle hover effect */
.highlight-soft:hover {
    opacity: 1;
    transform: scale(1.05);
    text-shadow: 0 0 10px rgba(255, 132, 1, 0.4);
}

.highlight-soft {
    color: #ff8401;
    font-size: 1.1rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    background: #fff7f0;
    padding: 8px 16px;
    border-radius: 30px;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(255, 132, 1, 0.15);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.highlight-soft:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 4px 12px rgba(255, 132, 1, 0.3);
}

/* Fade edges for smoothness */
.mask-blur-left-right {
    -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
    mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}

/* Counter Card Hover Effect */
.counter-card {
    border-color: #0091ec;
    box-shadow: 0 8px 20px rgba(0, 145, 236, 0.25);
    transform: translateY(-6px);
}

.counter-card:hover .counter,
.counter-card:hover p {
    color: #0091ec;
    transition: color 0.3s ease-in-out;
}

/* --------------------
    FAQ PAGE STYLE 
-------------------- */
/* FAQ Section Start */

.faq-panel {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    transition: grid-template-rows .3s ease, opacity .3s ease;
}

.faq-panel>* {
    overflow: hidden;
}

.faq-panel.open {
    grid-template-rows: 1fr;
    opacity: 1;
}

/* bonus: rotate the plus icon when open */
.faq-trigger .plus {
    transition: transform .3s ease;
}

.faq-trigger[aria-expanded="true"] .plus {
    transform: rotate(45deg);
}

.faq-trigger {
    width: 100%;
    cursor: pointer;
}

/* ---------------------------
    UNIVERSITIES PAGE STYLE 
--------------------------- */
/* Section for eligibility calculator */

/* Dropdown menu */
.combo-menu {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + .25rem);
    background: #fff;
    border: 1px solid #E5E1F4;
    border-radius: 12px;
    box-shadow: 0 10px 24px rgba(0, 0, 0, .08);
    max-height: 14rem;
    overflow: auto;
    z-index: 60;
}

.combo-item {
    padding: .5rem 1rem;
    cursor: pointer;
}

.combo-item[aria-selected="true"],
.combo-item:hover {
    background: #f5f7fb;
}

/* rotate arrow when open */
.combo-open .combo-caret svg {
    transform: rotate(180deg);
    transition: transform .15s ease;
}

/* Start of Loan & Visa Assistance  */
Section .steps:hover {
    border: 3px solid #fff;
    background: #066bc966;
}

/* turns any .white text inside hovered card white */
.steps:hover .white {
    color: #fff !important;
    text-decoration-color: #fff;
}

/* NEW: Step 5 (data-default) is white even without hover */
.steps[data-default] .white {
    color: #fff !important;
    text-decoration-color: #fff;
}

/* style for blog slider  */
.slider {
    display: flex;
    transition: transform 0.5s ease-in-out;
}

table {
    margin-bottom: 10px;
    border-radius: 8px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    background: #ffffff;

    ul {
        text-align-last: left;

        li {
            text-align: left;
        }
    }

    border-collapse: collapse;
    width: 100%;
    text-align: center;

    thead {
        background: #f5f7f9;
        border-radius: 8px 8px 8px 0px;

        th {
            padding: 25px;
            color: #24292d;
            font-size: 15px;
            line-height: 22px;
            text-transform: uppercase;
            font-weight: normal;

            &:first-child {
                border-radius: 8px 0 0 8px;
                text-align: left;
            }

            &:last-child {
                border-radius: 0 8px 8px 0;
            }
        }
    }

    tbody {
        tr {
            border-radius: 8px 8px 8px 0px;
            border-bottom: 1px solid rgba(0, 0, 0, 0.1);

            td {
                padding: 25px;
                color: #24292d;
                font-size: 15px;
                line-height: 18px;
                text-align: center;
                vertical-align: top;

                &:first-child {
                    background: #f5f7f9;
                    text-transform: uppercase;

                    text-align: left;
                }
            }

            &.t-left {
                td {
                    text-align: left;
                }
            }
        }

        tr {
            &:nth-last-of-type(1) {
                border-bottom: none;
                border-radius: 0 0 8px 0;

                td {
                    &:first-child {
                        border-radius: 0 0 8px 8px;
                    }
                }
            }
        }
    }
}

/* -----------------------------
    SINGLE-UNIVERSITY PAGE STYLE 
------------------------------- */
#uniGallery .swiper {
    width: 100%;
}

#uniGallery .universityImageSwiper {
    height: 195px;
}

@media (min-width:640px) {
    #uniGallery .universityImageSwiper {
        height: 420px;
    }
}

#uniGallery .swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* move the small thumbnail strip DOWN (closer to bottom) */
#uniGallery .universityImageNavigationSwiper {
    bottom: 20px;
}

/* was 50px */
@media (min-width:640px) {
    #uniGallery .universityImageNavigationSwiper {
        bottom: 32px;
    }
}

.pulse-animation {
    animation: pulse-shadow 2s infinite
}

@keyframes pulse-shadow {
    0% {
        -moz-box-shadow: 0 0 0 0 rgb(0, 106, 201, 0.4);
        box-shadow: 0 0 0 0 rgb(0, 106, 201, 0.4);
    }

    70% {
        -moz-box-shadow: 0 0 0 10px rgb(0, 106, 201, 0);
        box-shadow: 0 0 0 10px rgb(0, 106, 201, 0);
    }

    100% {
        -moz-box-shadow: 0 0 0 0 rgb(0, 106, 201, 0);
        box-shadow: 0 0 0 0 rgb(0, 106, 201, 0);
    }
}

table {
    margin-bottom: 10px;
    border-radius: 8px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    background: #ffffff;

    ul {
        text-align-last: left;

        li {
            text-align: left;
        }
    }

    border-collapse: collapse;
    width: 100%;
    text-align: center;

    thead {
        background: #f5f7f9;
        border-radius: 8px 8px 8px 0px;

        th {
            padding: 25px;
            color: #24292d;
            font-size: 15px;
            line-height: 22px;
            text-transform: uppercase;
            font-weight: normal;

            &:first-child {
                border-radius: 8px 0 0 8px;
                text-align: left;
            }

            &:last-child {
                border-radius: 0 8px 8px 0;
            }
        }
    }

    tbody {
        tr {
            border-radius: 8px 8px 8px 0px;
            border-bottom: 1px solid rgba(0, 0, 0, 0.1);

            td {
                padding: 25px;
                color: #24292d;
                font-size: 15px;
                line-height: 18px;
                text-align: center;
                vertical-align: top;

                &:first-child {
                    background: #f5f7f9;
                    text-transform: uppercase;

                    text-align: left;
                }
            }

            &.t-left {
                td {
                    text-align: left;
                }
            }
        }

        tr {
            &:nth-last-of-type(1) {
                border-bottom: none;
                border-radius: 0 0 8px 0;

                td {
                    &:first-child {
                        border-radius: 0 0 8px 8px;
                    }
                }
            }
        }
    }
}

/* --------------------------
    BLOGs PAGE STYLE 
----------------------------- */

/* Fade-in and slide-up animation trending blogs*/
.fade-in-up {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.fade-in-up.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Fade-in and slide-up animation recent blogs*/
.fade-in-up {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.fade-in-up.visible {
    opacity: 1;
    transform: translateY(0);
}

/* --------------------------
    SINGLE-BLOG PAGE STYLE 
----------------------------- */
.blog-details ol {
    list-style-type: decimal;
    padding-left: 25px;
}

.blog-details ul {
    list-style-type: disc;
    padding-left: 25px;
}

.blog-details h2 {
    font-size: 30px;
    color: rgb(33, 159, 249);
    ;
}

.blog-details h3 {
    font-size: 26px;
    color: rgb(227, 149, 3);
    ;
}

.blog-details h4 {
    font-size:
        22px;
    color: rgb(227, 149, 3);
    ;
}

.blog-details h5 {
    font-size: 22px;
}

.blog-details h6 {
    font-size: 20px;
}

.blog-details table,
tr,
td {
    border: 1px solid black;
    height: 60px;
    width: 800px;
}

.blog-details th {
    background-color: rgb(33, 159, 249);
}

/* -------------------
    FOOTER PAGE JS 
-------------------- */
@keyframes slideInLeft {
    0% {
        transform: translateX(-300px);
        opacity: 0;
    }

    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideInRight {
    0% {
        transform: translateX(300px);
        opacity: 0;
    }

    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideInTop {
    0% {
        transform: translateY(-300px);
        opacity: 0;
    }

    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes slideInBottom {
    0% {
        transform: translateY(300px);
        opacity: 0;
    }

    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

.animate-slideInLeft {
    animation: slideInLeft 0.8s ease-out forwards;
}

.animate-slideInRight {
    animation: slideInRight 0.8s ease-out forwards;
}

.animate-slideInTop {
    animation: slideInTop 0.8s ease-out forwards;
}

.animate-slideInBottom {
    animation: slideInBottom 0.8s ease-out forwards;
}