/* ==================================================
   SCHOOL PROBLEM SECTION
================================================== */

.school-problem{
    position:relative;
    overflow:hidden;
    padding:120px 24px 105px;
    background:
        radial-gradient(circle at 50% 0%,
        rgba(37,99,235,.06),
        transparent 38%),
        linear-gradient(180deg,#ffffff 0%,#f8fbff 100%);
}


/* ==================================================
   CONTAINER
================================================== */

.problem-container{
    position:relative;
    z-index:2;
    width:100%;
    max-width:1380px;
    margin:0 auto;
}


/* ==================================================
   BACKGROUND DECORATION
================================================== */

.problem-bg-shape{
    position:absolute;
    pointer-events:none;
    opacity:.55;
}

.problem-bg-left{
    width:420px;
    height:420px;
    left:-260px;
    top:320px;

    border-radius:50%;

    background:
        repeating-radial-gradient(
            circle,
            rgba(37,99,235,.08) 0 1px,
            transparent 1px 13px
        );
}

.problem-bg-right{
    width:500px;
    height:500px;
    right:-330px;
    bottom:-100px;

    border-radius:50%;

    background:
        repeating-radial-gradient(
            circle,
            rgba(37,99,235,.07) 0 1px,
            transparent 1px 14px
        );
}


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

.problem-header{
    max-width:1120px;
    margin:0 auto 65px;
    text-align:center;
}


.problem-tag{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:9px;

    padding:10px 20px;

    margin-bottom:24px;

    border-radius:999px;

    background:#1747c9;

    color:#fff;

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

    letter-spacing:1.7px;
    text-transform:uppercase;

    box-shadow:
        0 10px 28px rgba(37,99,235,.20);
}


.problem-tag-icon{
    font-size:14px;
}


.problem-header h2{
    margin:0;

    color:#081b4b;

    font-size:clamp(38px,4.6vw,66px);

    font-weight:900;

    line-height:1.05;

    letter-spacing:-2.5px;
}


.problem-header h2 span{
    display:block;
    margin-top:8px;
    color:#2563eb;
}


.problem-heading-line{
    width:68px;
    height:4px;

    margin:27px auto 22px;

    border-radius:99px;

    background:#2563eb;
}


.problem-header > p{
    max-width:780px;

    margin:0 auto;

    color:#64748b;

    font-size:18px;

    line-height:1.75;
}


/* ==================================================
   PROBLEM GRID
================================================== */

.problem-grid{
    display:grid;

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

    gap:22px;

    align-items:stretch;
}


/* ==================================================
   PROBLEM CARD
================================================== */

.problem-card{
    position:relative;

    min-height:390px;

    padding:34px 26px 30px;

    overflow:hidden;

    text-align:center;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.98),
            rgba(248,251,255,.96)
        );

    border:
        1px solid rgba(37,99,235,.13);

    border-radius:24px;

    box-shadow:
        0 18px 55px rgba(15,23,42,.06);

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


.problem-card:hover{
    transform:translateY(-8px);

    border-color:
        rgba(37,99,235,.28);

    box-shadow:
        0 30px 75px rgba(37,99,235,.12);
}


/* TOP BLUE ACCENT */

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

    position:absolute;

    left:50%;
    top:0;

    width:0;
    height:3px;

    transform:translateX(-50%);

    border-radius:0 0 10px 10px;

    background:#2563eb;

    transition:width .35s ease;
}


.problem-card:hover::before{
    width:62%;
}


/* ==================================================
   NUMBER
================================================== */

.problem-number{
    position:absolute;

    top:20px;
    left:20px;

    width:38px;
    height:38px;

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

    border-radius:50%;

    background:#1557e8;

    color:#fff;

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

    box-shadow:
        0 8px 18px rgba(37,99,235,.20);
}


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

.problem-icon{
    width:104px;
    height:104px;

    margin:0 auto 22px;

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

    border-radius:50%;

    background:
        linear-gradient(
            145deg,
            #eef5ff,
            #f8fbff
        );

    color:#1747c9;
}


.problem-icon svg{
    width:48px;
    height:48px;

    stroke-width:1.7;
}


/* ==================================================
   CARD TEXT
================================================== */

.problem-card h3{
    min-height:54px;

    margin:0;

    color:#081b4b;

    font-size:18px;

    font-weight:800;

    line-height:1.35;

    letter-spacing:-.3px;
}


.problem-card-line{
    display:block;

    width:38px;
    height:3px;

    margin:17px auto;

    border-radius:99px;

    background:#2563eb;
}


.problem-card p{
    margin:0;

    color:#64748b;

    font-size:14.5px;

    line-height:1.75;
}


/* ==================================================
   CORE INSIGHT
================================================== */

.problem-insight{
    position:relative;

    display:grid;

    grid-template-columns:
        150px minmax(0,1.4fr) minmax(280px,.8fr);

    align-items:center;

    gap:34px;

    margin-top:38px;

    padding:36px 44px;

    overflow:hidden;

    border-radius:28px;

    background:
        linear-gradient(
            120deg,
            #071b4c 0%,
            #0b3193 55%,
            #0d48ce 100%
        );

    box-shadow:
        0 25px 70px rgba(8,27,75,.18);
}


.problem-insight::after{
    content:"";

    position:absolute;

    width:320px;
    height:320px;

    right:-100px;
    top:-160px;

    border-radius:50%;

    background:
        rgba(255,255,255,.05);
}


/* SCHOOL ICON */

.problem-insight-icon{
    width:118px;
    height:118px;

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

    border-radius:50%;

    background:#fff;

    color:#1747c9;
}


.problem-insight-icon svg{
    width:55px;
    height:55px;

    stroke-width:1.7;
}


/* MAIN INSIGHT */

.problem-insight-main{
    position:relative;

    padding-right:34px;

    border-right:
        1px solid rgba(255,255,255,.20);
}


.insight-label{
    display:block;

    margin-bottom:8px;

    color:#93c5fd;

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

    letter-spacing:1.8px;
}


.problem-insight-main h3{
    max-width:600px;

    margin:0 0 8px;

    color:#fff;

    font-size:clamp(23px,2.2vw,32px);

    line-height:1.25;

    font-weight:700;
}


.problem-insight-main h3 strong{
    font-weight:800;
}


.problem-insight-main > p{
    margin:0;

    color:#fff;

    font-size:clamp(21px,2vw,29px);

    font-weight:700;
}


.problem-insight-main > p span{
    color:#fbbf24;
}


/* RIGHT NOTE */

.problem-insight-note{
    position:relative;
    z-index:2;

    display:flex;

    align-items:center;

    gap:18px;
}


.insight-bulb{
    width:60px;
    height:60px;

    flex:0 0 60px;

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

    border-radius:50%;

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

    color:#fbbf24;
}


.insight-bulb svg{
    width:29px;
    height:29px;
}


.problem-insight-note p{
    margin:0;

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

    font-size:15px;

    line-height:1.65;
}


.problem-insight-note strong{
    display:block;

    color:#fff;

    font-weight:700;
}


/* ==================================================
   CAMPUS ONE BRIDGE
================================================== */

.problem-bridge{
    max-width:850px;

    margin:42px auto 0;

    display:grid;

    grid-template-columns:1fr auto 1fr;

    align-items:center;

    gap:26px;

    text-align:center;
}


.problem-bridge > span{
    height:1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(37,99,235,.55)
        );
}


.problem-bridge > span:last-child{
    background:
        linear-gradient(
            90deg,
            rgba(37,99,235,.55),
            transparent
        );
}


.problem-bridge p{
    margin:0 0 5px;

    color:#475569;

    font-size:18px;

    font-weight:500;
}


.problem-bridge strong{
    display:block;

    color:#2563eb;

    font-size:34px;

    line-height:1;

    font-weight:900;

    letter-spacing:-1px;

    text-transform:uppercase;
}


/* ==================================================
   TABLET — 1200
================================================== */

@media(max-width:1200px){

    .school-problem{
        padding:
            100px 28px 90px;
    }

    .problem-grid{
        grid-template-columns:
            repeat(2,1fr);
    }

    .problem-card{
        min-height:350px;
    }

    .problem-insight{
        grid-template-columns:
            110px 1fr;
    }

    .problem-insight-note{
        grid-column:1/-1;

        padding-top:24px;

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

    .problem-insight-main{
        border-right:0;
        padding-right:0;
    }

}


/* ==================================================
   TABLET — 768
================================================== */

@media(max-width:768px){

    .school-problem{
        padding:
            80px 20px 75px;
    }

    .problem-header{
        margin-bottom:45px;
    }

    .problem-header h2{
        font-size:
            clamp(34px,8vw,46px);

        letter-spacing:-1.6px;
    }

    .problem-header > p{
        font-size:16px;
    }

    .problem-grid{
        gap:18px;
    }

    .problem-card{
        min-height:auto;

        padding:
            30px 22px 27px;
    }

    .problem-insight{
        padding:32px 28px;

        grid-template-columns:
            85px 1fr;

        gap:22px;

        border-radius:24px;
    }

    .problem-insight-icon{
        width:82px;
        height:82px;
    }

    .problem-insight-icon svg{
        width:39px;
        height:39px;
    }

}


/* ==================================================
   MOBILE — 600
================================================== */

@media(max-width:600px){

    .school-problem{
        padding:
            70px 16px 65px;
    }

    .problem-tag{
        padding:8px 15px;

        font-size:10px;

        letter-spacing:1.3px;
    }

    .problem-header{
        margin-bottom:38px;
    }

    .problem-header h2{
        font-size:
            clamp(30px,9vw,39px);

        line-height:1.08;

        letter-spacing:-1.3px;
    }

    .problem-header h2 span{
        margin-top:9px;
    }

    .problem-heading-line{
        margin:
            22px auto 18px;
    }

    .problem-header > p{
        font-size:15px;

        line-height:1.65;
    }


    /* ONE CARD PER ROW */

    .problem-grid{
        grid-template-columns:1fr;
    }


    /* MOBILE CARD */

    .problem-card{
        display:grid;

        grid-template-columns:
            76px 1fr;

        grid-template-areas:
            "icon title"
            "icon text";

        column-gap:18px;

        text-align:left;

        padding:
            24px 20px;

        border-radius:20px;
    }


    .problem-number{
        top:14px;
        left:14px;

        width:31px;
        height:31px;

        font-size:10px;
    }


    .problem-icon{
        grid-area:icon;

        width:76px;
        height:76px;

        margin:8px 0 0;
    }


    .problem-icon svg{
        width:36px;
        height:36px;
    }


    .problem-card h3{
        grid-area:title;

        min-height:auto;

        align-self:end;

        padding-right:4px;

        font-size:17px;
    }


    .problem-card-line{
        display:none;
    }


    .problem-card p{
        grid-area:text;

        margin-top:9px;

        font-size:13.5px;

        line-height:1.6;
    }


    /* INSIGHT */

    .problem-insight{
        display:block;

        margin-top:28px;

        padding:
            30px 22px;

        text-align:center;
    }


    .problem-insight-icon{
        margin:
            0 auto 20px;
    }


    .problem-insight-main{
        padding:0;
    }


    .problem-insight-main h3{
        font-size:23px;
    }


    .problem-insight-main > p{
        font-size:21px;
    }


    .problem-insight-note{
        display:block;

        margin-top:24px;

        padding-top:24px;
    }


    .insight-bulb{
        margin:
            0 auto 13px;
    }


    /* BRIDGE */

    .problem-bridge{
        grid-template-columns:35px 1fr 35px;

        gap:12px;

        margin-top:32px;
    }


    .problem-bridge p{
        font-size:14px;
    }


    .problem-bridge strong{
        font-size:27px;
    }

}


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

@media(max-width:390px){

    .school-problem{
        padding-left:14px;
        padding-right:14px;
    }

    .problem-header h2{
        font-size:29px;
    }

    .problem-card{
        grid-template-columns:
            64px 1fr;

        gap:14px;

        padding:
            22px 17px;
    }

    .problem-icon{
        width:64px;
        height:64px;
    }

    .problem-icon svg{
        width:30px;
        height:30px;
    }

    .problem-card h3{
        font-size:16px;
    }

    .problem-card p{
        font-size:13px;
    }

}