/* =========================================================
   KIYA LEARNING AUSTRALIA
   ACADEMIC TUTORING HERO
   COMPLETELY NEW DESIGN
========================================================= */

.kl-academic-hero{

    position:relative;

    min-height:680px;

    overflow:hidden;

    color:#222;

    background:#fffaf8;

}


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

.kl-academic-hero::before{

    content:"";

    position:absolute;

    width:620px;

    height:620px;

    right:-220px;

    top:-230px;

    border-radius:50%;

    background:

        radial-gradient(
            circle,
            rgba(244,81,30,.13),
            rgba(244,81,30,.03) 55%,
            transparent 72%
        );

}


.kl-academic-hero::after{

    content:"";

    position:absolute;

    width:400px;

    height:400px;

    left:-220px;

    bottom:-220px;

    border-radius:50%;

    background:

        radial-gradient(
            circle,
            rgba(244,81,30,.08),
            transparent 70%
        );

}


/* =========================================================
   DECORATIVE SHAPES
========================================================= */

.kl-academic-shape{

    position:absolute;

    pointer-events:none;

}


.shape-one{

    width:90px;

    height:90px;

    right:9%;

    top:19%;

    border-radius:22px;

    border:1px solid rgba(244,81,30,.15);

    transform:rotate(18deg);

}


.shape-two{

    width:55px;

    height:55px;

    left:8%;

    bottom:16%;

    border-radius:50%;

    border:1px dashed rgba(244,81,30,.22);

}


.kl-academic-dots{

    position:absolute;

    right:45%;

    bottom:7%;

    width:100px;

    height:70px;

    opacity:.45;

    background-image:

        radial-gradient(
            #f4511e 1.2px,
            transparent 1.2px
        );

    background-size:13px 13px;

}


/* =========================================================
   MAIN ROW
========================================================= */

.kl-academic-row{

    min-height:680px;

    position:relative;

    z-index:5;

}


/* =========================================================
   BADGE
========================================================= */

.kl-academic-hero .kl-hero-badge{

    display:inline-flex;

    align-items:center;

    gap:9px;

    padding:8px 14px;

    border:1px solid rgba(244,81,30,.16);

    border-radius:50px;

    background:#fff;

    color:#e94c29;

    font-size:10px;

    text-transform:uppercase;

    letter-spacing:1px;

    font-weight:700;

    box-shadow:

        0 8px 25px rgba(40,30,20,.05);

}


.kl-academic-hero .kl-hero-badge span{

    width:7px;

    height:7px;

    border-radius:50%;

    background:#f4511e;

    box-shadow:

        0 0 0 5px rgba(244,81,30,.09);

}


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

.kl-academic-hero h1{

    max-width:690px;

    margin:23px 0 20px;

    color:#191919;

    font-size:

        clamp(
            44px,
            2.4vw,
            72px
        );

    line-height:1.04;

    font-weight:800;

    letter-spacing:-2.8px;

}


.kl-academic-hero h1 span{

    display:block;

    color:#f4511e;

}


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

.kl-academic-hero .kl-hero-text{

    max-width:590px;

    margin:0;

    color:#676767;

    font-size:15px;

    line-height:1.85;

}


/* =========================================================
   BUTTON AREA
========================================================= */

.kl-academic-hero .kl-hero-actions{

    display:flex;

    flex-wrap:wrap;

    gap:12px;

    margin-top:29px;

}


/* =========================================================
   FEATURES
========================================================= */

.kl-academic-hero .kl-hero-features{

    display:flex;

    flex-wrap:wrap;

    gap:20px;

    margin-top:26px;

}


.kl-academic-hero .kl-hero-features span{

    display:flex;

    align-items:center;

    gap:7px;

    color:#686868;

    font-size:10px;

    font-weight:600;

}


.kl-academic-hero .kl-hero-features i{

    color:#f4511e;

    font-size:13px;

}


/* =========================================================
   RIGHT VISUAL AREA
========================================================= */

.kl-academic-visual{

    position:relative;

    width:100%;

    max-width:560px;

    min-height:500px;

    margin-left:auto;

    display:flex;

    align-items:center;

    justify-content:center;

}


/* =========================================================
   MAIN ACADEMIC CARD
========================================================= */

.academic-main-card{

    position:relative;

    width:440px;

    padding:23px;

    border-radius:24px;

    background:#fff;

    border:1px solid rgba(20,20,20,.07);

    box-shadow:

        0 35px 80px rgba(55,30,20,.12),

        0 8px 25px rgba(55,30,20,.05);

    z-index:3;

}


/* =========================================================
   CARD TOP
========================================================= */

.academic-card-top{

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding-bottom:19px;

    border-bottom:1px solid #f0eeee;

}


.academic-profile{

    display:flex;

    align-items:center;

    gap:11px;

}


.academic-avatar{

    width:43px;

    height:43px;

    display:grid;

    place-items:center;

    border-radius:13px;

    background:

        linear-gradient(
            135deg,
            #fff0eb,
            #ffe2d8
        );

    color:#f4511e;

    font-size:20px;

}


.academic-profile strong{

    display:block;

    color:#252525;

    font-size:12px;

    font-weight:800;

}


.academic-profile small{

    display:block;

    margin-top:3px;

    color:#8a8a8a;

    font-size:8px;

}


.academic-status{

    display:flex;

    align-items:center;

    gap:5px;

    padding:5px 9px;

    border-radius:30px;

    background:#f1fbf5;

    color:#31a861;

    font-size:8px;

    font-weight:700;

}


.academic-status i{

    font-size:5px;

}


/* =========================================================
   PROGRESS
========================================================= */

.academic-progress-box{

    margin-top:20px;

    padding:17px;

    border-radius:17px;

    background:#faf8f7;

}


.academic-progress-head{

    display:flex;

    align-items:center;

    justify-content:space-between;

}


.academic-progress-head span{

    display:block;

    color:#777;

    font-size:9px;

    font-weight:600;

}


.academic-progress-head strong{

    display:block;

    margin-top:3px;

    color:#252525;

    font-size:18px;

    font-weight:800;

}


.academic-progress-head > i{

    width:35px;

    height:35px;

    display:grid;

    place-items:center;

    border-radius:10px;

    background:#fff;

    color:#f4511e;

    box-shadow:0 5px 15px rgba(0,0,0,.05);

}


.academic-progress{

    height:7px;

    margin-top:13px;

    overflow:hidden;

    border-radius:20px;

    background:#ece7e5;

}


.academic-progress span{

    display:block;

    height:100%;

    border-radius:20px;

    background:

        linear-gradient(
            90deg,
            #f4511e,
            #ff8567
        );

}


.academic-progress-box > small{

    display:block;

    margin-top:9px;

    color:#999;

    font-size:7px;

}


/* =========================================================
   SUBJECT TITLE
========================================================= */

.academic-subject-title{

    display:flex;

    align-items:center;

    justify-content:space-between;

    margin:22px 2px 12px;

}


.academic-subject-title span{

    color:#252525;

    font-size:11px;

    font-weight:800;

}


.academic-subject-title i{

    color:#aaa;

    font-size:12px;

}


/* =========================================================
   SUBJECT GRID
========================================================= */

.academic-subject-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:10px;

}


.academic-subject-card{

    position:relative;

    display:flex;

    align-items:center;

    gap:9px;

    min-height:70px;

    padding:10px;

    border:1px solid #f0eeee;

    border-radius:14px;

    background:#fff;

    transition:.3s ease;

}


.academic-subject-card:hover{

    transform:translateY(-3px);

    border-color:rgba(244,81,30,.18);

    box-shadow:

        0 12px 25px rgba(50,30,20,.07);

}


.subject-icon{

    flex:0 0 35px;

    width:35px;

    height:35px;

    display:grid;

    place-items:center;

    border-radius:10px;

    font-size:15px;

}


.subject-icon.maths{

    color:#f4511e;

    background:#fff0eb;

}


.subject-icon.english{

    color:#7757d8;

    background:#f2efff;

}


.subject-icon.science{

    color:#239b68;

    background:#eaf9f1;

}


.subject-icon.humanities{

    color:#2782c7;

    background:#ebf5fc;

}


.academic-subject-card div:nth-child(2){

    min-width:0;

}


.academic-subject-card strong{

    display:block;

    overflow:hidden;

    color:#282828;

    font-size:9px;

    font-weight:800;

    white-space:nowrap;

    text-overflow:ellipsis;

}


.academic-subject-card small{

    display:block;

    margin-top:3px;

    color:#999;

    font-size:7px;

}


.academic-subject-card > i{

    margin-left:auto;

    color:#aaa;

    font-size:9px;

}


/* =========================================================
   FLOATING CARDS
========================================================= */

.academic-floating-card{

    position:absolute;

    display:flex;

    align-items:center;

    gap:9px;

    padding:12px 15px;

    border-radius:15px;

    background:#fff;

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

    box-shadow:

        0 18px 45px rgba(50,30,20,.12);

    z-index:6;

    animation:

        academicFloat 4s ease-in-out infinite;

}


.academic-floating-card strong{

    display:block;

    color:#292929;

    font-size:9px;

    font-weight:800;

}


.academic-floating-card span{

    display:block;

    margin-top:3px;

    color:#999;

    font-size:7px;

}


.floating-icon{

    width:35px;

    height:35px;

    display:grid;

    place-items:center;

    border-radius:10px;

    background:#fff0eb;

    color:#f4511e;

    font-size:15px;

}


.tutor-card{

    top:17%;

    right:0;

}


.achievement-card{

    left:0;

    bottom:17%;

    animation-delay:1.2s;

}


.achievement-icon{

    width:35px;

    height:35px;

    display:grid;

    place-items:center;

    border-radius:10px;

    background:#fff6dc;

    color:#e2a600;

    font-size:15px;

}


@keyframes academicFloat{

    0%,
    100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-9px);

    }

}


/* =========================================================
   DECORATIVE BOOK
========================================================= */

.academic-book-shape{

    position:absolute;

    right:4%;

    bottom:7%;

    width:58px;

    height:58px;

    display:grid;

    place-items:center;

    border-radius:18px;

    background:#f4511e;

    color:#fff;

    font-size:25px;

    transform:rotate(8deg);

    box-shadow:

        0 18px 35px rgba(244,81,30,.24);

    z-index:2;

}


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

@media (max-width:991px){

    .kl-academic-hero{

        padding:80px 0;

    }


    .kl-academic-row{

        min-height:auto;

    }


    .kl-academic-hero h1{

        max-width:500px;

    }


    .kl-academic-visual{

        margin:65px auto 0;

    }


    .tutor-card{

        right:2%;

    }


    .achievement-card{

        left:2%;

    }

}


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

@media (max-width:767px){

    .kl-academic-hero{

        padding:65px 0 75px;

    }


    .kl-academic-hero h1{

        margin-top:19px;

        font-size:

            clamp(
                40px,
                10.5vw,
                55px
            );

        letter-spacing:-2px;

    }


    .kl-academic-hero .kl-hero-text{

        font-size:14px;

        line-height:1.75;

    }


    .kl-academic-hero .kl-hero-actions{

        margin-top:24px;

    }


    .kl-academic-hero .kl-hero-features{

        gap:12px 17px;

    }


    .kl-academic-visual{

        min-height:470px;

        margin-top:50px;

    }


    .academic-main-card{

        width:calc(100% - 35px);

        padding:17px;

        border-radius:20px;

    }


    .academic-profile strong{

        font-size:10px;

    }


    .academic-profile small{

        font-size:7px;

    }


    .academic-subject-grid{

        gap:8px;

    }


    .academic-subject-card{

        min-height:64px;

        padding:8px;

    }


    .subject-icon{

        width:31px;

        height:31px;

        flex-basis:31px;

        font-size:13px;

    }


    .academic-floating-card{

        padding:9px 11px;

    }


    .tutor-card{

        right:0;

        top:10%;

    }


    .achievement-card{

        left:0;

        bottom:10%;

    }


    .academic-book-shape{

        width:45px;

        height:45px;

        right:1%;

        bottom:3%;

        font-size:19px;

    }


    .shape-one{

        right:3%;

        top:7%;

    }


    .kl-academic-dots{

        display:none;

    }

}


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

@media (max-width:480px){

    .kl-academic-hero{

        padding:55px 0 65px;

    }


    .kl-academic-hero h1{

        font-size:38px;

        letter-spacing:-1.4px;

    }


    .kl-academic-hero .kl-hero-actions{

        flex-direction:column;

    }


    .kl-academic-hero .kl-hero-actions .kl-btn{

        width:100%;

        justify-content:center;

    }


    .kl-academic-hero .kl-hero-features{

        display:grid;

        grid-template-columns:1fr 1fr;

    }


    .kl-academic-visual{

        min-height:420px;

        margin-top:40px;

    }


    .academic-main-card{

        width:calc(100% - 15px);

        padding:13px;

    }


    .academic-card-top{

        padding-bottom:13px;

    }


    .academic-avatar{

        width:37px;

        height:37px;

        font-size:17px;

    }


    .academic-progress-box{

        margin-top:13px;

        padding:13px;

    }


    .academic-subject-title{

        margin-top:16px;

    }


    .academic-subject-grid{

        grid-template-columns:1fr;

    }


    .academic-subject-card{

        min-height:58px;

    }


    .academic-floating-card{

        transform:scale(.9);

    }


    .tutor-card{

        top:7%;

        right:-7px;

    }


    .achievement-card{

        left:-7px;

        bottom:7%;

    }


    .academic-book-shape{

        display:none;

    }

}