/*========================================================

Student Performance System

Professional Font Management System

Part-4

responsive.css

========================================================*/


/*=========================================
DESKTOP
1200px+
=========================================*/

html{

font-size:16px;

}

body{

line-height:1.7;

}


/*=========================================
LAPTOP
992px - 1199px
=========================================*/

@media(max-width:1199px){

html{

font-size:15.5px;

}

}


/*=========================================
TABLET
768px - 991px
=========================================*/

@media(max-width:991px){

html{

font-size:15px;

}

body{

line-height:1.65;

}

h1{

font-size:2rem;

}

h2{

font-size:1.75rem;

}

h3{

font-size:1.5rem;

}

}


/*=========================================
MOBILE
576px - 767px
=========================================*/

@media(max-width:767px){

html{

font-size:14px;

}

body{

line-height:1.6;

}

h1{

font-size:1.8rem;

}

h2{

font-size:1.6rem;

}

h3{

font-size:1.4rem;

}

button{

font-size:1rem;

}

input,
textarea,
select{

font-size:1rem;

}

table{

font-size:.95rem;

}

}


/*=========================================
SMALL MOBILE
0px - 575px
=========================================*/

@media(max-width:575px){

html{

font-size:13px;

}

body{

line-height:1.55;

}

h1{

font-size:1.7rem;

}

h2{

font-size:1.5rem;

}

h3{

font-size:1.3rem;

}

h4{

font-size:1.2rem;

}

h5{

font-size:1.1rem;

}

h6{

font-size:1rem;

}

button{

font-size:.95rem;

padding:10px 18px;

}

input,
textarea,
select{

font-size:.95rem;

}

table{

font-size:.90rem;

}

}


/*=========================================
PRINT
=========================================*/

@media print{

html{

font-size:12pt;

}

body{

line-height:1.4;

}

button{

display:none;

}

nav{

display:none;

}

footer{

display:none;

}

}

/*========================================================
FINAL COMPACT / MOBILE / ENGLISH NUMBER OVERRIDES
========================================================*/

/* Reduce excessive section spacing without changing the
   existing HTML structure. */
section:not(.heroSection){
    padding-top:70px;
    padding-bottom:70px;
}

/* Reduce common layout gaps */
.sectionHeader{
    margin-bottom:28px;
}

.sectionHeader p{
    margin-top:12px;
}

.container{
    padding-left:15px;
    padding-right:15px;
}

/* Home-page English digits: keep them upright and regular */
.english,
.number,
.stepNumber,
.counter,
.analyticsNumber,
.statisticsCard h3,
.statCard h3{
    font-family:Arial, "Roboto", sans-serif !important;
    font-style:normal !important;
    font-variant-numeric:tabular-nums;
    font-synthesis:none;
    transform:none;
}

/*========================================================
FOOTER - QUICK LINKS
========================================================*/

/* Quick Links = second footer column only */
.footerGrid > .footerColumn:nth-child(2) ul{
    grid-template-columns:repeat(2,minmax(0,1fr));
    column-gap:18px;
    row-gap:7px;
}

/* Keep contact/social lists single-column */
.footerGrid > .footerColumn:nth-child(3) ul,
.footerGrid > .footerColumn:nth-child(4) ul{
    grid-template-columns:1fr;
}

/* Reduce footer whitespace */
.footer{
    margin-top:50px;
    padding-top:50px;
}

.footerGrid{
    row-gap:25px;
    padding-bottom:30px;
}

.footerColumn h3{
    margin-bottom:16px;
}

.footerColumn ul,
.contactList{
    gap:8px;
}

.contactList li{
    gap:9px;
}

.contactList i{
    width:36px;
    height:36px;
}

.footerSocial{
    gap:12px;
    margin-top:18px;
}

.footerBottom{
    padding:8px 0 14px;
}

/*========================================================
TABLET / MOBILE COMPACT SPACING
========================================================*/

@media(max-width:768px){

    section:not(.heroSection){
        padding-top:45px !important;
        padding-bottom:45px !important;
    }

    .container{
        width:calc(100% - 24px);
        max-width:none;
        padding-left:0;
        padding-right:0;
    }

    .sectionHeader{
        margin-bottom:20px;
    }

    /* Reduce common card/container padding */
    .card,
    .featureCard,
    .benefitCard,
    .statCard,
    .analyticsCard,
    .statisticsCard,
    .transformCard,
    .userCard,
    .insightCard,
    .userGuideCard,
    .stepContent{
        padding:25px 20px;
    }

    /* Quick Links remain TWO COLUMNS on mobile */
    .footerGrid > .footerColumn:nth-child(2) ul{
        grid-template-columns:repeat(2,minmax(0,1fr));
        column-gap:14px;
        row-gap:6px;
    }

    .footerGrid{
        gap:22px;
        padding-bottom:22px;
    }

    .footer{
        margin-top:35px;
        padding-top:40px;
    }

    .footerColumn h3{
        margin-bottom:14px;
    }

    .footerColumn ul,
    .contactList{
        gap:7px;
    }

    .footerBottom{
        gap:8px;
        padding:8px 0 12px;
    }
}

@media(max-width:480px){

    section:not(.heroSection){
        padding-top:38px !important;
        padding-bottom:38px !important;
    }

    .container{
        width:calc(100% - 20px);
    }

    .footerGrid{
        gap:18px;
    }

    .footerGrid > .footerColumn:nth-child(2) ul{
        column-gap:12px;
        row-gap:5px;
    }

    .footerColumn h3{
        margin-bottom:12px;
    }

    .footer{
        margin-top:25px;
        padding-top:35px;
    }
}


/* ========================================================
FINAL UI OVERRIDES — COMPACT + CONSISTENT
======================================================== */

/* Animated background on every page */
.background{
    position:fixed;
    inset:0;
    z-index:-2;
    pointer-events:none;
    overflow:hidden;
    background:linear-gradient(135deg,#f4f8ff,#eef5ff,#ffffff);
}

.background span{
    position:absolute;
    display:block;
    width:220px;
    height:220px;
    border-radius:50%;
    background:rgba(37,99,235,.07);
    filter:blur(1px);
    animation:finalFloat 24s ease-in-out infinite alternate;
}
.background span:nth-child(1){top:4%;left:5%;animation-duration:22s;}
.background span:nth-child(2){top:68%;left:8%;width:160px;height:160px;animation-duration:19s;}
.background span:nth-child(3){top:15%;right:8%;animation-duration:27s;}
.background span:nth-child(4){bottom:10%;right:4%;width:280px;height:280px;animation-duration:24s;}
.background span:nth-child(5){top:42%;left:43%;width:120px;height:120px;animation-duration:18s;}
.background span:nth-child(6){bottom:24%;left:26%;width:190px;height:190px;animation-duration:26s;}
.background span:nth-child(7){top:7%;left:58%;width:150px;height:150px;animation-duration:21s;}
.background span:nth-child(8){bottom:4%;right:32%;width:190px;height:190px;animation-duration:29s;}

@keyframes finalFloat{
    0%{transform:translate3d(0,0,0) scale(1);}
    50%{transform:translate3d(35px,-25px,0) scale(1.06);}
    100%{transform:translate3d(-25px,30px,0) scale(.96);}
}

/* English digits: upright, regular Arial/Roboto + tabular numbers */
.english, .englishNumber,
.number, .stepNumber, .counter, .analyticsNumber,
.statisticsCard h3, .statCard h3,
[data-number], [data-count]{
    font-family:Arial,Roboto,sans-serif !important;
    font-style:normal !important;
    font-weight:inherit;
    font-variant-numeric:tabular-nums !important;
    font-feature-settings:"tnum" 1;
    font-synthesis:none;
    transform:none !important;
}

/* Reduce button roundness — keep icon/circular controls circular */
.primaryButton, .secondaryButton, .glassButton, .loginButton,
.ctaButtons a, .centerButton a, .joinButtons a{
    border-radius:10px !important;
}

button.primaryButton, button.secondaryButton, button.glassButton{
    border-radius:10px !important;
}

/* Reduce excessive global section whitespace */
section{
    padding-top:75px !important;
    padding-bottom:75px !important;
}

/* Common cards: slightly tighter without changing layout */
.glassCard, .liveServerCard{
    padding:28px !important;
}

/* Action groups */
.heroButtons, .joinButtons, .ctaButtons{
    justify-content:center;
    align-items:center;
}

/* ========================================================
MOBILE FINAL RULES
======================================================== */
@media(max-width:768px){
    section{
        padding-top:42px !important;
        padding-bottom:42px !important;
    }

    .primaryButton, .secondaryButton, .glassButton,
    .ctaButtons a, .centerButton a, .joinButtons a,
    .heroButtons a{
        font-size:.82rem !important;
        padding:9px 12px !important;
        min-height:40px;
        border-radius:9px !important;
    }

    /* A single action button = about one-third of screen, centered */
    .heroButtons:has(> :only-child),
    .joinButtons:has(> :only-child),
    .ctaButtons:has(> :only-child),
    .centerButton{
        justify-content:center !important;
    }
    .heroButtons:has(> :only-child) > *,
    .joinButtons:has(> :only-child) > *,
    .ctaButtons:has(> :only-child) > *,
    .centerButton > *{
        width:33.333vw !important;
        max-width:33.333vw !important;
        min-width:0 !important;
        margin-left:auto !important;
        margin-right:auto !important;
    }

    /* Two/multiple desktop buttons stay side-by-side on mobile */
    .heroButtons:not(:has(> :only-child)),
    .joinButtons:not(:has(> :only-child)),
    .ctaButtons:not(:has(> :only-child)){
        display:flex !important;
        flex-direction:row !important;
        flex-wrap:nowrap !important;
        justify-content:center !important;
        gap:8px !important;
        width:100%;
    }
    .heroButtons:not(:has(> :only-child)) > *,
    .joinButtons:not(:has(> :only-child)) > *,
    .ctaButtons:not(:has(> :only-child)) > *{
        width:auto !important;
        min-width:0 !important;
        flex:1 1 0 !important;
        max-width:33.333vw !important;
    }

    /* Footer social icons centered on mobile */
    .footerSocial, .socialLinks{
        justify-content:center !important;
        justify-items:center !important;
        align-items:center !important;
        margin-left:auto !important;
        margin-right:auto !important;
    }

    .socialLinks{
        width:max-content !important;
        max-width:100%;
    }

    .footerSocial{
        width:100%;
    }

    /* Quick Links remain exactly two columns */
    .footerGrid > .footerColumn:nth-child(2) ul{
        grid-template-columns:repeat(2,minmax(0,1fr)) !important;
        column-gap:12px !important;
        row-gap:5px !important;
    }

    .container{
        padding-left:10px !important;
        padding-right:10px !important;
    }
}

@media(max-width:480px){
    section{
        padding-top:34px !important;
        padding-bottom:34px !important;
    }
    .primaryButton, .secondaryButton, .glassButton,
    .ctaButtons a, .centerButton a, .joinButtons a, .heroButtons a{
        font-size:.76rem !important;
        padding:8px 9px !important;
        min-height:38px;
    }
}

/*========================================================
FINAL USER REQUEST OVERRIDES - v3
========================================================*/

/* ALL ENGLISH DIGITS / NUMBERS - always upright Arial/Roboto */
.englishNumber,
.networkCard h2,
.statisticsCard h3,
.statCard h3,
.counter,
.number,
.stepNumber,
.analyticsNumber,
[data-number],
[data-count]{
    font-family:Arial, "Roboto", sans-serif !important;
    font-style:normal !important;
    font-variant-numeric:tabular-nums !important;
    font-feature-settings:"tnum" 1 !important;
    font-synthesis:none !important;
    transform:none !important;
    letter-spacing:0 !important;
}

/* Home network numbers: make the size responsive and clearly controlled */
.networkCard h2{
    font-size:clamp(2rem, 4vw, 3rem) !important;
    line-height:1.05 !important;
}

/* Blue-looking action buttons: give different buttons distinct colors */
.heroButtons > :nth-child(1),
.joinButtons > :nth-child(1),
.ctaButtons > :nth-child(1){
    background:linear-gradient(135deg,#2563eb,#3b82f6) !important;
    border-color:#2563eb !important;
}
.heroButtons > :nth-child(2),
.joinButtons > :nth-child(2),
.ctaButtons > :nth-child(2){
    background:linear-gradient(135deg,#059669,#10b981) !important;
    border-color:#059669 !important;
    color:#fff !important;
}
.heroButtons > :nth-child(3),
.joinButtons > :nth-child(3),
.ctaButtons > :nth-child(3){
    background:linear-gradient(135deg,#ea580c,#f97316) !important;
    border-color:#ea580c !important;
    color:#fff !important;
}
.heroButtons > :nth-child(4),
.joinButtons > :nth-child(4),
.ctaButtons > :nth-child(4){
    background:linear-gradient(135deg,#7c3aed,#8b5cf6) !important;
    border-color:#7c3aed !important;
    color:#fff !important;
}

/* Outline/secondary buttons also receive distinct colors by position */
.heroButtons > .secondaryButton:nth-child(1),
.joinButtons > .secondaryButton:nth-child(1),
.ctaButtons > .secondaryButton:nth-child(1){
    background:#fff !important;
    color:#2563eb !important;
    border-color:#2563eb !important;
}
.heroButtons > .secondaryButton:nth-child(2),
.joinButtons > .secondaryButton:nth-child(2),
.ctaButtons > .secondaryButton:nth-child(2){
    background:#fff !important;
    color:#059669 !important;
    border-color:#059669 !important;
}
.heroButtons > .secondaryButton:nth-child(3),
.joinButtons > .secondaryButton:nth-child(3),
.ctaButtons > .secondaryButton:nth-child(3){
    background:#fff !important;
    color:#ea580c !important;
    border-color:#ea580c !important;
}

/* Privacy / legal links: increase the top separation */
.footerBottom > .footerLinks{
    margin-top:28px !important;
}

@media(max-width:768px){
    .networkCard h2{
        font-size:clamp(1.8rem, 8vw, 2.35rem) !important;
    }

    .footerBottom > .footerLinks{
        margin-top:24px !important;
    }

    .footerSocial{
        justify-content:center !important;
        margin-left:auto !important;
        margin-right:auto !important;
    }
}

@media(max-width:480px){
    .networkCard h2{
        font-size:2rem !important;
    }
}


/*========================================================
FINAL USER REQUEST - NON-INDEX FULL-WIDTH HERO HEADINGS
========================================================
On all content pages except index.html:
- the hero content uses the full available desktop width;
- the heading stays on one line when it fits and wraps naturally
  when it does not;
- mobile uses a smaller responsive heading and full-width layout;
- index.html keeps its original two-column hero layout.
========================================================*/

/* Desktop / tablet: only pages that use .heroPage */
.heroPage{
    width:100%;
}

.heroPage > .container{
    width:min(100% - 40px, var(--container));
    max-width:none;
    margin-left:auto;
    margin-right:auto;
}

.heroPage .heroContent{
    width:100%;
    max-width:none;
    margin-left:0;
    margin-right:0;
}

.heroPage .heroContent h1{
    width:100%;
    max-width:none;
    font-size:clamp(2.15rem, 4.2vw, 4.35rem);
    line-height:1.18;
    white-space:normal;
    overflow-wrap:break-word;
    word-break:normal;
}

.heroPage .heroContent p{
    width:100%;
    max-width:none;
}

.heroPage .heroButtons{
    justify-content:flex-start;
}

/* Keep the index.html hero exactly as the original two-column design. */
.heroSection .heroContent,
.heroSection .heroLeft{
    max-width:650px;
}

@media(min-width:993px){
    .heroPage{
        min-height:calc(100vh - 20px);
        display:flex;
        align-items:center;
    }

    .heroPage > .container{
        display:flex;
        align-items:center;
    }

    .heroPage .heroContent h1{
        /* Full desktop width; wraps only when the viewport cannot fit it. */
        max-width:100%;
    }
}

/* Tablet */
@media(max-width:992px){
    .heroPage > .container{
        width:min(100% - 30px, var(--container));
    }

    .heroPage .heroContent{
        width:100%;
        max-width:none;
    }

    .heroPage .heroContent h1{
        font-size:clamp(2rem, 6vw, 3.25rem);
    }
}

/* Mobile: smaller text, full available width, natural vertical flow. */
@media(max-width:768px){
    .heroPage{
        min-height:auto;
        padding-top:125px !important;
        padding-bottom:55px !important;
    }

    .heroPage > .container{
        width:100%;
        max-width:none;
        padding-left:15px !important;
        padding-right:15px !important;
    }

    .heroPage .heroContent{
        width:100%;
        max-width:none;
    }

    .heroPage .heroContent h1{
        width:100%;
        font-size:clamp(1.65rem, 7.2vw, 2.45rem);
        line-height:1.28;
        margin-bottom:18px;
    }

    .heroPage .heroContent p{
        width:100%;
        font-size:clamp(.92rem, 3.7vw, 1rem);
        line-height:1.7;
    }

    .heroPage .heroButtons{
        width:100%;
        justify-content:center;
    }
}

/* Small mobile */
@media(max-width:480px){
    .heroPage{
        padding-top:115px !important;
        padding-bottom:45px !important;
    }

    .heroPage .heroContent h1{
        font-size:clamp(1.45rem, 7.8vw, 2.05rem);
        line-height:1.3;
    }

    .heroPage .heroContent p{
        font-size:.9rem;
        line-height:1.65;
    }
}

/*========================================================
CONTACT HERO - FULL WIDTH TITLE FIX
========================================================
The contact hero has no two-column layout requirement for its title.
On desktop the heading uses the full available container width and stays
on one line whenever the viewport can accommodate it. On mobile it wraps
naturally.
========================================================*/

@media (min-width: 993px){
    .contactHero > .container{
        width:min(100% - 40px, var(--container));
        max-width:none;
    }

    .contactHero .heroContent{
        width:100%;
        max-width:none;
        margin-left:0;
        margin-right:0;
    }

    .contactHero .heroContent h1{
        width:max-content;
        max-width:none;
        white-space:nowrap;
        font-size:clamp(2.6rem, 5vw, 4.5rem);
        line-height:1.15;
    }
}

@media (max-width: 992px){
    .contactHero .heroContent{
        width:100%;
        max-width:none;
    }

    .contactHero .heroContent h1{
        width:100%;
        max-width:none;
        white-space:normal;
        overflow-wrap:break-word;
        word-break:normal;
    }
}

@media (max-width: 768px){
    .contactHero .heroContent h1{
        font-size:clamp(1.65rem, 7.2vw, 2.45rem);
        line-height:1.28;
    }
}