:root{
    --purple:#6C3BAA;
    --purple-dark:#4b2380;
    --purple-deep:#28104e;
    --purple-soft:#f6f2fa;
    --ink:#151b2b;
    --muted:#6d7483;
    --gold:#e4b83e;
    --line:#ece7f1;
}

html{
    scroll-behavior:smooth;
}

body{
    font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
    color:var(--ink);
    background:#fff;
}


/* =====================================================
   NAVBAR
===================================================== */

.navbar{
    background:linear-gradient(90deg,#28104e,#54238c 58%,#6C3BAA);
    padding:14px 0;
}

.navbar-brand{
    font-weight:850;
    letter-spacing:.03em;
}

.navbar .nav-link{
    color:#fff!important;
    font-size:.84rem;
    font-weight:650;
}

.navbar .nav-link:hover{
    opacity:.78;
}

.brand-mark{
    width:40px;
    height:40px;
    border-radius:10px;
    background:#fff;
    color:var(--purple);
    display:inline-grid;
    place-items:center;
    font-weight:900;
    margin-right:10px;
}

.tiny{
    font-size:.76rem;
}


/* =====================================================
   HERO SECTION - TWO IMAGE LAYERS
===================================================== */
.hero-section{position:relative;min-height:640px;overflow:hidden;color:#fff;background:#28104e}
.hero-campus{position:absolute;inset:0;z-index:0;background-image:linear-gradient(90deg,rgba(40,16,78,.72) 0%,rgba(40,16,78,.45) 30%,rgba(40,16,78,.12) 50%,rgba(40,16,78,0) 68%),url("../images/campus-back.png");background-size:cover;background-position:center;background-repeat:no-repeat}
.hero-graduate{position:absolute;z-index:1;right:max(3vw,calc((100vw - 1536px)/2));bottom:0;height:94%;display:flex;align-items:flex-end;pointer-events:none}
.hero-graduate img{display:block;width:auto;height:100%;max-width:none;object-fit:contain;object-position:bottom center}
.hero-container{position:relative;z-index:2}
.hero-content{width:min(650px,50%);min-height:640px;display:flex;flex-direction:column;justify-content:center;padding:48px 0 40px}

/* =====================================================
   HERO HEADING
   LOCKED TO EXACTLY TWO LINES
===================================================== */

.hero-content h1{
    font-size:clamp(3rem,4.2vw,4.7rem);

    line-height:1.02;
    letter-spacing:-.045em;

    font-weight:850;

    margin:0;
}

.hero-content h1 span{
    display:block;
    white-space:nowrap;
}


/* =====================================================
   HERO GOLD LINE
===================================================== */

.hero-line{
    width:36px;
    height:3px;

    background:var(--gold);

    margin:20px 0;
}


/* =====================================================
   HERO DESCRIPTION
===================================================== */

.hero-copy{
    font-size:1.02rem;
    line-height:1.65;

    max-width:520px;

    color:rgba(255,255,255,.95);
}


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

.hero-actions .btn{
    min-height:52px;

    padding:0 24px;

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

    border-radius:4px;

    text-transform:uppercase;

    font-size:.76rem;
    font-weight:800;
}

.hero-btn-primary{
    background:#fff;
    color:#5c2b96;

    border:1px solid #fff;
}

.hero-btn-primary:hover{
    background:#f1eafa;
    color:#482176;
}

.hero-btn-outline{
    border:1px solid rgba(255,255,255,.72);

    color:#fff;
}

.hero-btn-outline:hover{
    background:#fff;
    color:var(--purple);
}


/* =====================================================
   OLD PARTNER STYLES
===================================================== */

.partner-label{
    font-size:.67rem;
    font-weight:800;
    letter-spacing:.04em;
    margin-bottom:14px;
}

.partner-names{
    display:flex;
    flex-wrap:wrap;

    gap:12px 26px;

    color:#e4d7f1;

    font-weight:700;
    font-size:.86rem;
}


/* =====================================================
   UNIVERSITY RECOGNITIONS
===================================================== */

.university-recognitions{
    margin-top:40px;
}

.recognition-title{
    color:#ffffff;

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

    letter-spacing:.4px;

    margin-bottom:16px;
}

.recognition-row{
    display:flex;
    align-items:flex-start;

    gap:24px;

    flex-wrap:nowrap;
}

.recognition-item{
    display:flex;
    flex-direction:column;

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

    min-width:105px;

    color:#ffffff;

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

    line-height:1.2;

    text-align:center;

    white-space:nowrap;
}

.recognition-icon{
    color:#d9a51c;

    font-size:28px;
    line-height:1;

    margin-bottom:7px;

    display:block;
}


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

.section-pad{
    padding:84px 0;
}

.soft{
    background:linear-gradient(
        180deg,
        #fbf9fd,
        #f5f1f9
    );
}

.eyebrow{
    color:var(--purple);

    font-size:.76rem;
    font-weight:850;

    letter-spacing:.055em;

    text-transform:uppercase;
}

.section-title{
    font-weight:850;

    letter-spacing:-.035em;

    margin-top:6px;
}

.section-link,
.card-link{
    color:var(--purple);

    text-decoration:none;

    font-weight:800;
    font-size:.78rem;
}


/* =====================================================
   PROGRAM / FORM / TESTIMONIAL CARDS
===================================================== */

.program-card,
.form-card,
.testimonial{
    height:100%;

    background:#fff;

    border:1px solid var(--line);

    border-radius:15px;

    box-shadow:
        0 12px 32px rgba(40,16,78,.055);
}

.program-card{
    padding:26px;
}

.iconbox{
    width:46px;
    height:46px;

    border-radius:10px;

    background:var(--purple);

    color:#fff;

    display:grid;
    place-items:center;

    font-size:1.25rem;
}


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

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

    border-radius:50%;

    background:var(--purple);

    color:#fff;

    display:grid;
    place-items:center;

    margin:auto;

    font-size:1.35rem;
}

.step-line{
    position:absolute;

    top:30px;
    left:70%;

    width:60%;

    border-top:2px dashed #cbb8dd;
}


/* =====================================================
   WHY SECTION
===================================================== */

.why{
    background:linear-gradient(
        135deg,
        #32105e,
        #6C3BAA
    );

    color:#fff;

    border-radius:18px;

    overflow:hidden;
}

.why-list i{
    color:#f2c44d;
}

/* WHY CHOOSE VIXIPRO - STUDENT IMAGE */

.why .col-lg-7{
    display:flex;
    align-items:flex-end;
    justify-content:center;
    overflow:hidden;
}

.support-image{
    width:100%;
    height:100%;
    max-height:520px;
    object-fit:contain;
    object-position:center bottom;
    display:block;
}


/* =====================================================
   STATS
===================================================== */

.stat i{
    font-size:1.65rem;
    color:var(--purple);
}

.stat strong{
    display:block;

    color:var(--purple);

    font-size:1.35rem;
    font-weight:850;
}

.stat span{
    font-size:.8rem;

    color:var(--muted);
}


/* =====================================================
   FORMS
===================================================== */

.form-control,
.form-select{
    padding:.84rem 1rem;

    border-color:#e1dbe8;
}

.form-control:focus,
.form-select:focus{
    border-color:#9d7ac7;

    box-shadow:
        0 0 0 .22rem rgba(108,59,170,.12);
}


/* =====================================================
   PURPLE BUTTON
===================================================== */

.btn-purple{
    background:var(--purple);

    color:#fff;

    font-weight:800;
}

.btn-purple:hover{
    background:var(--purple-dark);

    color:#fff;
}

.purple,
.quote{
    color:var(--purple);
}

.quote{
    font-size:2.2rem;
    line-height:1;
}


/* =====================================================
   TESTIMONIAL
===================================================== */

.testimonial{
    padding:24px;
}

.avatar{
    width:45px;
    height:45px;

    border-radius:50%;

    background:#eadff5;

    color:var(--purple);

    display:grid;
    place-items:center;

    font-weight:900;
}

.success-box{
    background:#eaf8f1;

    color:#16734f;

    border-radius:10px;

    padding:12px 15px;
}


/* =====================================================
   NEWSLETTER
===================================================== */

.newsletter{
    background:linear-gradient(
        90deg,
        #3c176e,
        #6C3BAA
    );

    color:#fff;
}


/* =====================================================
   FOOTER
===================================================== */

footer{
    background:#21103e;

    color:#fff;
}

footer a{
    color:#d8cbe6;

    text-decoration:none;

    display:block;

    margin:.42rem 0;

    font-size:.88rem;
}

footer a:hover{
    color:#fff;
}


/* =====================================================
   RESPONSIVE HERO
===================================================== */
@media (min-width:1600px){
 .hero-section,.hero-content{min-height:700px}
 .hero-container{max-width:1536px}
 .hero-content{width:650px}
 .hero-graduate{height:94%}
}
@media (max-width:1199.98px){
 .hero-section,.hero-content{min-height:620px}
 .hero-content{width:55%}
 .hero-graduate{right:1.5vw;height:88%}
}
@media (max-width:991.98px){
 .hero-section{min-height:680px}
 .hero-content{width:58%;min-height:680px;padding:48px 0 42px}
 .hero-content h1{font-size:clamp(2.7rem,6vw,3.8rem)}
 .hero-graduate{right:-8%;height:78%}
 .hero-campus{background-position:58% center}
 .recognition-row{gap:16px}.recognition-item{min-width:95px;font-size:11px}.recognition-icon{font-size:25px}
 .step-line{display:none}.section-pad{padding:64px 0}
}
@media (max-width:767.98px){
 .hero-section{min-height:920px}
 .hero-content{width:100%;min-height:auto;padding:46px 0 440px;text-align:center}
 .hero-content h1{font-size:clamp(2.35rem,9vw,3.4rem)}
 .hero-content h1 span{display:block;white-space:nowrap}
 .hero-copy,.hero-line{margin-inline:auto}
 .hero-actions,.partner-names{justify-content:center}
 .university-recognitions{margin-top:30px}
 .recognition-title{font-size:11px;margin-bottom:16px}
 .recognition-row{display:grid;grid-template-columns:repeat(2,1fr);gap:20px 12px;max-width:340px;margin-left:auto;margin-right:auto}
 .recognition-item{min-width:0;white-space:normal}.recognition-icon{font-size:25px;margin-bottom:7px}
 .hero-campus{background-position:65% center}
 .hero-graduate{right:50%;transform:translateX(50%);height:43%}
}
@media (max-width:575.98px){
 .hero-section{min-height:880px}
 .hero-content{padding-top:38px;padding-bottom:410px}
 .hero-content h1{font-size:clamp(2.05rem,10vw,2.7rem);line-height:1.05;letter-spacing:-.035em}
 .hero-content h1 span{display:block;white-space:nowrap}
 .hero-actions .btn{width:100%}
 .hero-graduate{height:40%}
}

/* =====================================================
   VIXIPRO NAVBAR LOGO
===================================================== */

.navbar-logo{
    display:block;

    width:190px;
    height:auto;

    object-fit:contain;
}


/* TABLET */

@media (max-width:991.98px){

    .navbar-logo{
        width:165px;
    }

}


/* MOBILE */

@media (max-width:575.98px){

    .navbar-logo{
        width:145px;
    }

}

/* =====================================================
   HERO PURPLE OVERLAY
   Keeps text readable without darkening the girl
===================================================== */

.hero-campus::after{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;

    background:
        linear-gradient(
            90deg,
            rgba(40,16,78,.52) 0%,
            rgba(40,16,78,.36) 32%,
            rgba(40,16,78,.18) 52%,
            rgba(40,16,78,.05) 70%,
            rgba(40,16,78,0) 85%
        );
}


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

    .hero-campus::after{
        background:
            linear-gradient(
                90deg,
                rgba(40,16,78,.64) 0%,
                rgba(40,16,78,.48) 38%,
                rgba(40,16,78,.24) 62%,
                rgba(40,16,78,.08) 82%
            );
    }

}


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

    .hero-campus::after{
        background:
            linear-gradient(
                180deg,
                rgba(40,16,78,.72) 0%,
                rgba(40,16,78,.62) 42%,
                rgba(40,16,78,.38) 62%,
                rgba(40,16,78,.10) 82%,
                rgba(40,16,78,0) 100%
            );
    }

}

/* =====================================================
   HIDE GRADUATE WHEN SCREEN IS TOO NARROW
===================================================== */

@media (max-width: 850px){

    .hero-graduate{
        display:none !important;
    }

    .hero-section{
        min-height:auto;
    }

    .hero-content{
        width:100%;
        min-height:auto;
        padding-top:55px;
        padding-bottom:60px;
    }
}

/* =====================================================
   PROGRAM CATEGORY CARDS + POPUPS
===================================================== */
.program-category-card{
    height:100%; background:#fff; border:1px solid var(--line); border-radius:16px;
    padding:30px; box-shadow:0 12px 32px rgba(40,16,78,.055);
    transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
}
.program-category-card:hover{transform:translateY(-4px);border-color:#d9cbea;box-shadow:0 18px 42px rgba(40,16,78,.10)}
.program-category-icon{
    width:52px;height:52px;border-radius:12px;background:linear-gradient(135deg,var(--purple-dark),var(--purple));
    color:#fff;display:grid;place-items:center;font-size:1.35rem;margin-bottom:22px;
}
.program-category-card h4{font-weight:850;letter-spacing:-.02em;margin-bottom:10px;color:var(--purple-deep)}
.program-category-card p{color:var(--muted);line-height:1.65;min-height:52px;margin-bottom:22px}
.program-view-btn{
    border:0;background:transparent;padding:0;color:#5c2b96;font-size:.78rem;font-weight:850;
    text-transform:uppercase;display:inline-flex;align-items:center;gap:8px;
}
.program-view-btn:hover{color:#3f176d}
.program-view-btn i{transition:transform .2s ease}
.program-view-btn:hover i{transform:translateX(3px)}

.program-modal .modal-content{border:0;border-radius:18px;overflow:hidden;box-shadow:0 28px 80px rgba(27,10,52,.28)}
.program-modal .modal-header{padding:26px 30px 22px;border-bottom:1px solid var(--line);background:linear-gradient(135deg,#fbf9fd,#f4eef9)}
.program-modal .modal-body{padding:28px 30px 32px}
.program-modal .modal-title{color:var(--purple-deep);font-weight:850;letter-spacing:-.025em;margin:2px 0 0}
.modal-eyebrow{color:var(--purple);font-size:.72rem;font-weight:850;text-transform:uppercase;letter-spacing:.08em}
.program-modal-item{padding:0 0 22px;margin-bottom:22px;border-bottom:1px solid #eee8f3}
.program-modal-item:last-child{margin-bottom:0;padding-bottom:0;border-bottom:0}
.program-modal-item h5{color:#24113f;font-weight:800;line-height:1.4;margin-bottom:8px}
.program-track{display:inline-block;padding:6px 10px;border-radius:999px;background:#f1eafa;color:#5c2b96;font-size:.78rem;font-weight:750}
.program-major-title{font-size:.82rem;font-weight:800;color:var(--purple);margin:12px 0 8px;text-transform:uppercase;letter-spacing:.04em}
.program-major-list{margin:0;padding-left:20px;columns:2;column-gap:34px}
.program-major-list li{margin-bottom:8px;break-inside:avoid;color:#424858;line-height:1.45}

@media(max-width:575.98px){
    .program-category-card{padding:24px}
    .program-category-card p{min-height:auto}
    .program-modal .modal-header{padding:22px 20px 18px}
    .program-modal .modal-body{padding:22px 20px 26px}
    .program-major-list{columns:1}
}

/* WHY CHOOSE VIXIPRO - HEADING & TOP SPACING */

#about .col-lg-5{
    padding-top:38px !important;
}

#about .eyebrow{
    font-size:2rem !important;
    font-weight:900;
    letter-spacing:.03em;
    margin-bottom:24px;
}

#about .why-list{
    margin-top:0 !important;
}

/* =========================================
   WHY CHOOSE - BOTTOM SERVICE HIGHLIGHTS
========================================= */

#about .stat{
    position:relative;
    padding:10px 20px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
}

/* Icon */
#about .stat i{
    font-size:2rem;
    color:#6f35b5;
    margin-bottom:8px;
    line-height:1;
}

/* Main title */
#about .stat strong{
    display:block;
    font-size:1.15rem;
    font-weight:800;
    color:#5f2ca5;
    line-height:1.15;
}

/* Small subtitle */
#about .stat span{
    display:block;
    margin-top:5px;
    font-size:.82rem;
    color:#777;
}

/* Divider between items */
@media (min-width:992px){
    #about .stat:not(:last-child)::after{
        content:"";
        position:absolute;
        right:0;
        top:15%;
        width:1px;
        height:70%;
        background:#e5dcef;
    }
}

/* =====================================================
   CONTACT / CONNECT WITH US
===================================================== */

.contact-card{
    border:1px solid var(--line);
    border-radius:18px;
    padding:38px;
    box-shadow:0 18px 48px rgba(40,16,78,.08);
}

.contact-option{
    display:flex;
    align-items:center;
    gap:18px;

    padding:20px 0;

    border-top:1px solid #eee8f3;

    text-decoration:none;
    color:inherit;

    transition:.2s ease;
}

.contact-option:last-child{
    border-bottom:1px solid #eee8f3;
}

.contact-option:hover{
    color:inherit;
    transform:translateX(4px);
}

.contact-option-icon{
    width:52px;
    height:52px;

    flex:0 0 52px;

    border-radius:12px;

    background:linear-gradient(
        135deg,
        var(--purple-dark),
        var(--purple)
    );

    color:#fff;

    display:grid;
    place-items:center;

    font-size:1.35rem;
}

.contact-option-content{
    flex:1;
}

.contact-option-label{
    color:var(--purple);
    font-size:.76rem;
    font-weight:850;
    text-transform:uppercase;
    letter-spacing:.05em;
}

.contact-option-value{
    margin-top:2px;

    color:#21103e;

    font-size:1.05rem;
    font-weight:800;
}

.contact-option-desc{
    margin-top:3px;

    color:var(--muted);

    font-size:.84rem;
}

.contact-arrow{
    color:var(--purple);
    font-size:1.1rem;
}


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

    .contact-card{
        padding:26px 22px;
    }

    .contact-option{
        align-items:flex-start;
    }

    .contact-arrow{
        display:none;
    }
}

/* =====================================================
   FINAL FOOTER
===================================================== */

.site-footer{
    background:#21103e;
    color:#fff;
}

.footer-logo{
    width:190px;
    height:auto;
    display:block;
}

.footer-description{
    color:rgba(255,255,255,.62);
    max-width:430px;
    line-height:1.7;
    font-size:.92rem;
}

.footer-title{
    color:#fff;
    font-weight:800;
    margin-bottom:18px;
}

.footer-links{
    display:flex;
    flex-direction:column;
    gap:10px;
}

.site-footer .footer-links a{
    color:rgba(255,255,255,.68);
    text-decoration:none;
    margin:0;
    transition:.2s ease;
}

.site-footer .footer-links a:hover{
    color:#fff;
    transform:translateX(3px);
}

.site-footer .footer-contact{
    display:flex;
    align-items:center;
    gap:11px;

    color:rgba(255,255,255,.68);
    text-decoration:none;

    margin-bottom:15px;

    transition:.2s ease;
}

.site-footer .footer-contact i{
    color:#d9a51c;
    font-size:1.05rem;
}

.site-footer .footer-contact:hover{
    color:#fff;
}

.footer-bottom{
    margin-top:40px;
    padding-top:20px;

    border-top:1px solid rgba(255,255,255,.12);

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

    color:rgba(255,255,255,.48);
    font-size:.76rem;
}

.footer-legal{
    display:flex;
    align-items:center;
    gap:10px;
}

.site-footer .footer-legal a{
    color:rgba(255,255,255,.48);
    text-decoration:none;
    margin:0;
}

.site-footer .footer-legal a:hover{
    color:#fff;
}


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

    .footer-logo{
        width:165px;
    }

    .footer-bottom{
        flex-direction:column;
        align-items:flex-start;
    }
}