/*=========================================================
    HERO V2 - PART 1
    Layout + Background + Wrapper
=========================================================*/

.hero-section {

    position: relative;
    overflow: hidden;
    isolation: isolate;

    padding: 32px 0 40px;

}

/*---------------------------------------------------------
Background
---------------------------------------------------------*/

.hero-section::before {

    content: "";

    position: absolute;

    inset: 0;

    background:

        radial-gradient(circle at 12% 18%,
            rgba(21, 185, 217, .12),
            transparent 35%),

        radial-gradient(circle at 88% 22%,
            rgba(21, 185, 217, .10),
            transparent 32%),

        radial-gradient(circle at 52% 78%,
            rgba(21, 185, 217, .08),
            transparent 42%),

        linear-gradient(180deg,
            #F5FCFE 0%,
            #F8FDFF 45%,
            #FCFEFF 100%);

    z-index: -4;

}

/*---------------------------------------------------------
Grid Pattern
---------------------------------------------------------*/

.hero-section::after {

    content: "";

    position: absolute;

    inset: 0;

    background-image:

        radial-gradient(rgba(21, 185, 217, .07) 1px,
            transparent 1px);

    background-size: 32px 32px;

    opacity: .18;

    mask-image: linear-gradient(to bottom,
            rgba(0, 0, 0, .85),
            rgba(0, 0, 0, .15));

    z-index: -3;

}

/*---------------------------------------------------------
Aurora
---------------------------------------------------------*/

.hero-aurora {

    position: absolute;

    inset: 0;

    overflow: hidden;

    pointer-events: none;

    z-index: -2;

}

.hero-aurora::before {

    content: "";

    position: absolute;

    width: 760px;
    height: 760px;

    left: -240px;
    top: -240px;

    border-radius: 50%;

    background:

        radial-gradient(rgba(21, 185, 217, .18),

            transparent 72%);

    filter: blur(70px);

}

.hero-aurora::after {

    content: "";

    position: absolute;

    width: 650px;
    height: 650px;

    right: -180px;
    bottom: -220px;

    border-radius: 50%;

    background:

        radial-gradient(rgba(21, 185, 217, .12),

            transparent 70%);

    filter: blur(80px);

}

/*---------------------------------------------------------
Container
---------------------------------------------------------*/

.hero-section .container {

    position: relative;

    z-index: 2;

}

/*---------------------------------------------------------
Wrapper
---------------------------------------------------------*/

.hero-wrapper {

    display: grid;

    grid-template-columns:

        minmax(0, 1.02fr) minmax(0, .98fr);

    align-items: center;

    column-gap: 58px;

    min-height: 760px;

}

/*---------------------------------------------------------
Columns
---------------------------------------------------------*/

.hero-left {

    position: relative;

    z-index: 5;

    max-width: 620px;

}

.hero-right {

    position: relative;

    display: flex;

    justify-content: flex-end;

    align-items: center;

}

/*---------------------------------------------------------
Background Decorations
---------------------------------------------------------*/

.hero-decoration {

    position: absolute;

    border-radius: 50%;

    pointer-events: none;

    z-index: -1;

}

.hero-decoration-1 {

    width: 22px;
    height: 22px;

    left: 8%;

    top: 18%;

    background: #15B9D9;

    opacity: .12;

}

.hero-decoration-2 {

    width: 12px;
    height: 12px;

    right: 18%;

    top: 28%;

    background: #15B9D9;

    opacity: .18;

}

.hero-decoration-3 {

    width: 18px;
    height: 18px;

    left: 42%;

    bottom: 18%;

    background: #15B9D9;

    opacity: .10;

}

/*---------------------------------------------------------
Selection
---------------------------------------------------------*/

.hero-section ::selection {

    background: #15B9D9;

    color: #fff;

}

/*=========================================================
    HERO V2 - PART 2
    LEFT CONTENT
=========================================================*/

/*---------------------------------------------------------
Badge
---------------------------------------------------------*/

.hero-badge {

    display: inline-flex;
    align-items: center;
    gap: 10px;

    padding: 10px 18px;

    border-radius: 999px;

    background: rgba(21, 185, 217, .08);

    border: 1px solid rgba(21, 185, 217, .14);

    backdrop-filter: blur(18px);

    color: #15B9D9;

    font-size: 14px;

    font-weight: 700;

    letter-spacing: .3px;

    margin-bottom: 30px;

    transition: .35s;

}

.hero-badge:hover {

    transform: translateY(-2px);

    box-shadow:

        0 12px 28px rgba(21, 185, 217, .12);

}

.hero-badge i {

    font-size: 16px;

}

/*---------------------------------------------------------
Heading
---------------------------------------------------------*/

.hero-title {

    font-size: 68px;

    font-weight: 800;

    line-height: .95;

    letter-spacing: -2.8px;

    color: #172B4D;

    margin: 0 0 28px;

}

.hero-title span {

    color: #15B9D9;

    position: relative;

}

.hero-title span::after {

    content: "";

    position: absolute;

    left: 0;

    bottom: 6px;

    width: 100%;

    height: 14px;

    background: rgba(21, 185, 217, .15);

    z-index: -1;

    border-radius: 20px;

}

/*---------------------------------------------------------
Description
---------------------------------------------------------*/

.hero-description {

    font-size: 20px;

    line-height: 1.9;

    color: #667085;

    max-width: 560px;

    margin-bottom: 40px;

}

/*---------------------------------------------------------
CTA Buttons
---------------------------------------------------------*/

.hero-actions {

    display: flex;

    align-items: center;

    gap: 18px;

    margin-bottom: 40px;

}

.hero-actions .btn {

    min-width: 190px;

    height: 58px;

    border-radius: 16px;

    font-size: 16px;

    font-weight: 700;

    transition: .35s;

}

.hero-actions .btn-primary {

    box-shadow:

        0 18px 40px rgba(21, 185, 217, .20);

}

.hero-actions .btn-primary:hover {

    transform: translateY(-4px);

}

.hero-actions .btn-outline-primary:hover {

    transform: translateY(-4px);

}

/*---------------------------------------------------------
Feature List
---------------------------------------------------------*/

.hero-features {

    display: grid;

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

    gap: 16px 28px;

    max-width: 560px;

}

.hero-feature {

    display: flex;

    align-items: center;

    gap: 12px;

    font-size: 17px;

    font-weight: 600;

    color: #344054;

}

.hero-feature i {

    width: 34px;

    height: 34px;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    color: #15B9D9;

    background: rgba(21, 185, 217, .10);

    flex-shrink: 0;

}

/*---------------------------------------------------------
Entrance Animation
---------------------------------------------------------*/

.hero-left>* {

    animation: fadeUp .8s ease both;

}

.hero-left>*:nth-child(2) {

    animation-delay: .1s;

}

.hero-left>*:nth-child(3) {

    animation-delay: .2s;

}

.hero-left>*:nth-child(4) {

    animation-delay: .3s;

}

.hero-left>*:nth-child(5) {

    animation-delay: .4s;

}

@keyframes fadeUp {

    from {

        opacity: 0;

        transform: translateY(30px);

    }

    to {

        opacity: 1;

        transform: translateY(0);

    }

}

/*=========================================================
    HERO V2 - PART 3
    PRODUCT SHOWCASE
=========================================================*/

.hero-product-showcase {

    position: relative;

    width: 100%;

    max-width: 700px;

    height: 620px;

    margin-left: auto;

    display: flex;

    justify-content: center;

    align-items: center;

}

/*---------------------------------------------------------
Ambient Glow
---------------------------------------------------------*/

.hero-product-showcase::before {

    content: "";

    position: absolute;

    width: 560px;

    height: 560px;

    left: 50%;

    top: 52%;

    transform: translate(-50%, -50%);

    border-radius: 50%;

    background: radial-gradient(circle,
            rgba(21, 185, 217, .22),
            rgba(21, 185, 217, .10) 45%,
            transparent 72%);

    filter: blur(70px);

    z-index: -3;

}

/*---------------------------------------------------------
Desktop Preview
---------------------------------------------------------*/

.desktop-preview {

    position: relative;

    width: 100%;

    max-width: 610px;

    background: #ffffff;

    border-radius: 26px;

    overflow: hidden;

    border: 1px solid rgba(255, 255, 255, .85);

    box-shadow:
        0 50px 90px rgba(15, 23, 42, .12),
        0 20px 40px rgba(21, 185, 217, .10);

}

/* Browser Bar */

.desktop-preview::before {

    content: "";

    display: block;

    height: 46px;

    background: linear-gradient(180deg,
            #FAFBFC,
            #F2F5F8);

    border-bottom: 1px solid #ECEFF3;

}

/* Browser Buttons */

.desktop-preview::after {

    content: "";

    position: absolute;

    left: 18px;

    top: 16px;

    width: 10px;

    height: 10px;

    border-radius: 50%;

    background: #FF5F57;

    box-shadow:
        18px 0 #FEBC2E,
        36px 0 #28C840;

}

.desktop-preview img {

    display: block;

    width: 100%;

}

/*---------------------------------------------------------
Phone
---------------------------------------------------------*/

.mobile-preview {

    position: absolute;

    right: 15px;

    top: -28px;

    width: 215px;

    padding: 7px;

    border-radius: 38px;

    background: #111827;

    box-shadow:
        0 40px 70px rgba(15, 23, 42, .22),
        0 16px 36px rgba(21, 185, 217, .18);

    z-index: 5;

}

.mobile-preview::before {

    content: "";

    position: absolute;

    left: 50%;

    top: 10px;

    transform: translateX(-50%);

    width: 78px;

    height: 8px;

    border-radius: 20px;

    background: #1F2937;

}

.mobile-preview img {

    display: block;

    width: 100%;

    border-radius: 30px;

}

/*---------------------------------------------------------
Floating Cards
---------------------------------------------------------*/

.floating-tag {

    position: absolute;

    display: flex;

    align-items: center;

    gap: 12px;

    padding: 16px 20px;

    min-width: 210px;

    border-radius: 18px;

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

    backdrop-filter: blur(20px);

    border: 1px solid rgba(255, 255, 255, .75);

    box-shadow:
        0 20px 45px rgba(15, 23, 42, .10);

    color: #172B4D;

    font-size: 15px;

    font-weight: 600;

    z-index: 6;

    transition: .35s;

}

.floating-tag:hover {

    transform: translateY(-6px);

}

.floating-tag i {

    width: 42px;

    height: 42px;

    border-radius: 14px;

    display: flex;

    align-items: center;

    justify-content: center;

    background: rgba(21, 185, 217, .10);

    color: #15B9D9;

    font-size: 20px;

}

/*---------------------------------------------------------
Tag Positions
---------------------------------------------------------*/

.tag-ai {

    left: -35px;

    top: 55px;

}

.tag-assessment {

    right: -45px;

    top: 185px;

}

.tag-learning {

    left: 0;

    bottom: 35px;

}

/*---------------------------------------------------------
Floating Animation
---------------------------------------------------------*/

.desktop-preview {

    animation: desktopFloat 8s ease-in-out infinite;

}

.mobile-preview {

    animation: phoneFloat 7s ease-in-out infinite;

}

.tag-ai {

    animation: tagFloat1 7s ease-in-out infinite;

}

.tag-assessment {

    animation: tagFloat2 8s ease-in-out infinite;

}

.tag-learning {

    animation: tagFloat3 6.5s ease-in-out infinite;

}

@keyframes desktopFloat {

    0%,
    100% {

        transform: translateY(0);

    }

    50% {

        transform: translateY(-10px);

    }

}

@keyframes phoneFloat {

    0%,
    100% {

        transform: translateY(0);

    }

    50% {

        transform: translateY(-14px);

    }

}

@keyframes tagFloat1 {

    0%,
    100% {

        transform: translateY(0);

    }

    50% {

        transform: translateY(-8px);

    }

}

@keyframes tagFloat2 {

    0%,
    100% {

        transform: translateY(0);

    }

    50% {

        transform: translateY(10px);

    }

}

@keyframes tagFloat3 {

    0%,
    100% {

        transform: translateY(0);

    }

    50% {

        transform: translateY(-10px);

    }

}



/*=========================================================
    WHY BAECN
    PART 1 - SECTION LAYOUT
=========================================================*/

.why-baecn-section {

    position: relative;

    padding: 70px 0 110px;

    overflow: hidden;

    isolation: isolate;

}

/*---------------------------------------------------------
Background
---------------------------------------------------------*/

.why-baecn-section::before {

    content: "";

    position: absolute;

    inset: 0;

    background:

        radial-gradient(circle at 15% 25%,
            rgba(21, 185, 217, .06),
            transparent 32%),

        radial-gradient(circle at 85% 80%,
            rgba(21, 185, 217, .05),
            transparent 35%);

    z-index: -2;

}

.why-baecn-section::after {

    content: "";

    position: absolute;

    width: 650px;

    height: 650px;

    left: 50%;

    top: 50%;

    transform: translate(-50%, -50%);

    border-radius: 50%;

    background: radial-gradient(rgba(21, 185, 217, .08),
            transparent 72%);

    filter: blur(90px);

    z-index: -3;

}

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

.section-heading {

    max-width: 760px;

    margin: 0 auto 55px;

}

/*---------------------------------------------------------
Badge
---------------------------------------------------------*/

.section-badge {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    padding: 10px 20px;

    border-radius: 999px;

    background: rgba(21, 185, 217, .08);

    border: 1px solid rgba(21, 185, 217, .15);

    color: #15B9D9;

    font-size: 14px;

    font-weight: 700;

    letter-spacing: .4px;

    margin-bottom: 24px;

}

.section-badge i {

    font-size: 16px;

}

/*---------------------------------------------------------
Title
---------------------------------------------------------*/

.section-title {

    font-size: 52px;

    line-height: 1.15;

    font-weight: 800;

    color: #172B4D;

    margin-bottom: 24px;

    letter-spacing: -1.5px;

}

.section-title span {

    color: #15B9D9;

}

/*---------------------------------------------------------
Description
---------------------------------------------------------*/

.section-description {

    max-width: 760px;

    margin: 0 auto;

    font-size: 20px;

    line-height: 1.9;

    color: #667085;

}

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

.why-grid {

    display: grid;

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

    gap: 30px;

    align-items: stretch;

}



/*=========================================================
    WHY BAECN V3
    PART 1
=========================================================*/

.why-baecn-section {

    position: relative;

    padding: 90px 0 120px;

    overflow: hidden;

    isolation: isolate;

}

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

.why-baecn-section::before {

    content: "";

    position: absolute;

    inset: 0;

    background:

        radial-gradient(circle at 15% 20%,
            rgba(21, 185, 217, .07),
            transparent 30%),

        radial-gradient(circle at 85% 75%,
            rgba(21, 185, 217, .06),
            transparent 35%);

    z-index: -2;

}

.why-baecn-section::after {

    content: "";

    position: absolute;

    width: 700px;

    height: 700px;

    left: 50%;

    top: 45%;

    transform: translate(-50%, -50%);

    background: radial-gradient(rgba(21, 185, 217, .08),

            transparent 72%);

    border-radius: 50%;

    filter: blur(90px);

    z-index: -3;

}

/*=========================================================
LAYOUT
=========================================================*/

.why-wrapper {

    display: grid;

    grid-template-columns: 1fr 1.05fr;

    gap: 70px;

    align-items: center;

}

/*=========================================================
LEFT SIDE
=========================================================*/

.why-left {

    max-width: 560px;

}

/* Badge */

.why-left .section-badge {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    padding: 11px 20px;

    border-radius: 999px;

    background: rgba(21, 185, 217, .08);

    border: 1px solid rgba(21, 185, 217, .15);

    color: #15B9D9;

    font-size: 14px;

    font-weight: 700;

    margin-bottom: 28px;

}

/* Title */

.why-title {

    font-size: 60px;

    line-height: 1.05;

    font-weight: 800;

    letter-spacing: -2px;

    color: #172B4D;

    margin-bottom: 28px;

}

.why-title span {

    color: #15B9D9;

}

/* Description */

.why-description {

    font-size: 19px;

    line-height: 1.9;

    color: #667085;

    margin-bottom: 38px;

}

/*=========================================================
CHECKLIST
=========================================================*/

.why-highlights {

    display: grid;

    gap: 18px;

    margin-bottom: 40px;

}

.highlight-item {

    display: flex;

    align-items: center;

    gap: 15px;

    font-size: 17px;

    font-weight: 600;

    color: #344054;

}

.highlight-item i {

    width: 36px;

    height: 36px;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    background: rgba(21, 185, 217, .10);

    color: #15B9D9;

    flex-shrink: 0;

}

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

.why-action {

    margin-top: 10px;

}

.why-action .btn {

    min-width: 220px;

    height: 60px;

    border-radius: 16px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    font-weight: 700;

    transition: .35s;

    box-shadow:

        0 20px 40px rgba(21, 185, 217, .18);

}

.why-action .btn:hover {

    transform: translateY(-5px);

}



/*=========================================================
    WHY BAECN V3
    PART 2 - ROADMAP
=========================================================*/

.why-right {

    position: relative;

    padding-left: 70px;

}

/*---------------------------------------------------------
Timeline Line
---------------------------------------------------------*/

.why-right::before {

    content: "";

    position: absolute;

    left: 34px;

    top: 40px;

    bottom: 40px;

    width: 3px;

    border-radius: 50px;

    background: linear-gradient(to bottom,
            #15B9D9,
            rgba(21, 185, 217, .15));

}

/*=========================================================
STEP
=========================================================*/

.why-step {

    position: relative;

    display: flex;

    align-items: center;

    gap: 24px;

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

    backdrop-filter: blur(18px);

    border: 1px solid rgba(255, 255, 255, .75);

    border-radius: 24px;

    padding: 28px;

    margin-bottom: 28px;

    transition: .35s;

    box-shadow:

        0 18px 40px rgba(15, 23, 42, .07);

}

.why-step:last-child {

    margin-bottom: 0;

}

/*---------------------------------------------------------
Hover
---------------------------------------------------------*/

.why-step:hover {

    transform: translateX(12px);

    box-shadow:

        0 28px 60px rgba(15, 23, 42, .10),

        0 10px 24px rgba(21, 185, 217, .12);

}

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

.step-number {

    position: absolute;

    left: -70px;

    width: 44px;

    height: 44px;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    background: #15B9D9;

    color: #fff;

    font-size: 15px;

    font-weight: 700;

    box-shadow:

        0 12px 28px rgba(21, 185, 217, .28);

    z-index: 2;

}

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

.step-icon {

    width: 72px;

    height: 72px;

    border-radius: 20px;

    display: flex;

    align-items: center;

    justify-content: center;

    background: linear-gradient(135deg,
            rgba(21, 185, 217, .14),
            rgba(21, 185, 217, .05));

    color: #15B9D9;

    flex-shrink: 0;

    transition: .35s;

}

.step-icon i {

    font-size: 30px;

}

.why-step:hover .step-icon {

    transform: rotate(-8deg) scale(1.08);

}

/*=========================================================
CONTENT
=========================================================*/

.step-content {

    flex: 1;

}

.step-content h4 {

    font-size: 24px;

    font-weight: 700;

    color: #172B4D;

    margin-bottom: 10px;

}

.step-content p {

    margin: 0;

    font-size: 16px;

    line-height: 1.8;

    color: #667085;

}

/*=========================================================
TOP ACCENT
=========================================================*/

.why-step::before {

    content: "";

    position: absolute;

    left: 0;

    top: 0;

    width: 5px;

    height: 100%;

    border-radius: 30px 0 0 30px;

    background: #15B9D9;

    transform: scaleY(0);

    transition: .35s;

}

.why-step:hover::before {

    transform: scaleY(1);

}

/*=========================================================
AMBIENT GLOW
=========================================================*/

.why-step::after {

    content: "";

    position: absolute;

    width: 180px;

    height: 180px;

    right: -80px;

    top: -80px;

    border-radius: 50%;

    background: radial-gradient(rgba(21, 185, 217, .10),

            transparent 70%);

    opacity: 0;

    transition: .35s;

}

.why-step:hover::after {

    opacity: 1;

}

/*=========================================================
    WHY BAECN V3
    PART 3 - POLISH + RESPONSIVE
=========================================================*/

/*---------------------------------------------------------
Animation
---------------------------------------------------------*/

.why-left {

    animation: whyLeftAnimation .8s ease both;

}

.why-step {

    animation: whyStepAnimation .8s ease both;

}

.why-step:nth-child(1) {

    animation-delay: .15s;

}

.why-step:nth-child(2) {

    animation-delay: .30s;

}

.why-step:nth-child(3) {

    animation-delay: .45s;

}

.why-step:nth-child(4) {

    animation-delay: .60s;

}

@keyframes whyLeftAnimation {

    from {

        opacity: 0;

        transform: translateX(-35px);

    }

    to {

        opacity: 1;

        transform: translateX(0);

    }

}

@keyframes whyStepAnimation {

    from {

        opacity: 0;

        transform: translateX(35px);

    }

    to {

        opacity: 1;

        transform: translateX(0);

    }

}

/*---------------------------------------------------------
Floating Effect
---------------------------------------------------------*/

.why-step:nth-child(odd) {

    animation-duration: 7s;

}

.why-step:nth-child(even) {

    animation-duration: 8s;

}

@keyframes cardFloat {

    0%,
    100% {

        transform: translateY(0);

    }

    50% {

        transform: translateY(-5px);

    }

}

/*=========================================================
Tablet
=========================================================*/

@media(max-width:1199px) {

    .why-wrapper {

        gap: 50px;

    }

    .why-title {

        font-size: 50px;

    }

    .why-description {

        font-size: 18px;

    }

    .step-content h4 {

        font-size: 22px;

    }

}

/*=========================================================
991
=========================================================*/

@media(max-width:991px) {

    .why-wrapper {

        grid-template-columns: 1fr;

    }

    .why-left {

        max-width: 100%;

    }

    .why-right {

        margin-top: 60px;

    }

}

/*=========================================================
767
=========================================================*/

@media(max-width:767px) {

    .why-baecn-section {

        padding: 70px 0;

    }

    .why-title {

        font-size: 38px;

        line-height: 1.2;

    }

    .why-description {

        font-size: 16px;

    }

    .highlight-item {

        font-size: 15px;

    }

    .why-right {

        padding-left: 45px;

    }

    .why-right::before {

        left: 20px;

    }

    .step-number {

        left: -45px;

        width: 34px;

        height: 34px;

        font-size: 13px;

    }

    .why-step {

        padding: 22px;

        gap: 18px;

    }

    .step-icon {

        width: 58px;

        height: 58px;

        border-radius: 16px;

    }

    .step-icon i {

        font-size: 24px;

    }

    .step-content h4 {

        font-size: 20px;

    }

    .step-content p {

        font-size: 15px;

        line-height: 1.7;

    }

}

/*=========================================================
480
=========================================================*/

@media(max-width:480px) {

    .why-title {

        font-size: 30px;

    }

    .why-step {

        flex-direction: column;

        align-items: flex-start;

    }

    .step-content {

        width: 100%;

    }

}



/*=========================================================
    HOW AI GUIDES EVERY STUDENT
=========================================================*/ 

.how-ai-guides-title{
   
    line-height: 1.05;

    color: #172B4D;
  
}
.how-ai-guides-title span {

    color: #15B9D9;

}

.platform-showcase-section{

    position:relative;

    padding:120px 0;

    background:#F8FCFE;

    overflow:hidden;

}

.platform-showcase-section::before{

    content:"";

    position:absolute;

    inset:0;

    background:

        radial-gradient(circle at 8% 15%,rgba(21,185,217,.08),transparent 35%),

        radial-gradient(circle at 92% 82%,rgba(21,185,217,.06),transparent 40%);

    pointer-events:none;

}

.platform-showcase-section .container{

    position:relative;

    z-index:2;

}

.platform-layout{

    display:grid;

    grid-template-columns:

        minmax(420px,480px)

        1fr;

    gap:80px;

    align-items:center;

}
.platform-left{

    max-width:480px;

}

.platform-left .section-title{

    font-size:58px;

    line-height:1.08;

    font-weight:800;

    color:#172B4D;

    margin:24px 0;

}

.platform-left .section-title span{

    color:var(--primary-color);

}

.platform-left .section-description{

    margin-bottom:38px;

    font-size:18px;

    line-height:1.9;

    color:#667085;

}

.platform-features{

    display:flex;

    flex-direction:column;

    gap:20px;

    margin-bottom:45px;

}

.feature-item{

    display:flex;

    align-items:center;

    gap:16px;

    font-size:18px;

    font-weight:600;

    color:#172B4D;

}


.feature-item i{

    width:42px;

    height:42px;

    border-radius:12px;

    display:flex;

    justify-content:center;

    align-items:center;

    background:rgba(21,185,217,.10);

    color:var(--primary-color);

    font-size:18px;

}


.platform-buttons{

    margin-top:48px;

}
.platform-right{

    display:flex;

    justify-content:center;

}

.product-showcase{

    width:100%;

    max-width:720px;

}

.dashboard-window{

    background:#fff;

    border-radius:28px;

    overflow:hidden;

    border:1px solid rgba(21,185,217,.12);

    box-shadow:

        0 30px 80px rgba(15,23,42,.10);

}

.window-header{

    display:flex;

    align-items:center;

    gap:18px;

    padding:18px 26px;

    border-bottom:1px solid #edf3f7;

}

.window-dots{

    display:flex;

    gap:8px;

}

.window-dots span{

    width:10px;

    height:10px;

    border-radius:50%;

    background:#d9e7ef;

}

.window-header h6{

    margin:0;

    font-size:18px;

    font-weight:700;

    color:#172B4D;

}

.dashboard-window img{

    width:100%;

    display:block;

}


/*=========================================================
BOTTOM SHOWCASE
=========================================================*/

.showcase-bottom{

    position:relative;

    display:grid;

    grid-template-columns:1fr 220px 1fr;

    align-items:end;

    gap:30px;

    margin-top:35px;

}

.mini-window{

    background:#fff;

    border:1px solid rgba(21,185,217,.10);

    border-radius:24px;

    padding:30px 24px;

    min-height:210px;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    text-align:center;

    box-shadow:

        0 18px 45px rgba(15,23,42,.08);

    transition:.35s;

}

.mini-window:hover{

    transform:translateY(-10px);

    box-shadow:

        0 28px 70px rgba(15,23,42,.12);

}

.mini-icon{

    width:72px;

    height:72px;

    border-radius:22px;

    display:flex;

    justify-content:center;

    align-items:center;

    margin-bottom:24px;

    background:

        linear-gradient(
            135deg,
            rgba(21,185,217,.14),
            rgba(21,185,217,.05)
        );

}

.mini-icon i{

    font-size:30px;

    color:var(--primary-color);

}

.mini-window h5{

    font-size:24px;

    font-weight:700;

    margin-bottom:12px;

    color:#172B4D;

}

.mini-window p{

    margin:0;

    color:#667085;

    line-height:1.7;

}

.phone-window{

    position:relative;

    width:220px;

    height:460px;

    margin-top:-120px;

    border-radius:42px;

    background:#111827;

    padding:10px;

    box-shadow:

        0 35px 90px rgba(15,23,42,.20);

}

.phone-window img{

    width:100%;

    height:100%;

    object-fit:cover;

    border-radius:34px;

    display:block;

}

.phone-window::before{

    content:"";

    position:absolute;

    width:90px;

    height:18px;

    background:#111827;

    border-radius:0 0 18px 18px;

    left:50%;

    transform:translateX(-50%);

    top:10px;

}

.dashboard-window{

    animation:

        dashboardFloat 6s ease-in-out infinite;

}

.phone-window{

    animation:

        phoneFloat 5s ease-in-out infinite;

}

.mini-window{

    animation:

        cardFloat 7s ease-in-out infinite;

}

@keyframes dashboardFloat{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-8px);

    }

}

@keyframes phoneFloat{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-15px);

    }

}

@keyframes cardFloat{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-6px);

    }

}

.phone-window::after{

    content:"";

    position:absolute;

    width:320px;

    height:320px;

    border-radius:50%;

    background:

        radial-gradient(

            rgba(21,185,217,.12),

            transparent 70%

        );

    left:50%;

    bottom:-120px;

    transform:translateX(-50%);

    z-index:-1;

}

.dashboard-window{

    transition:.4s;

}

.dashboard-window:hover{

    transform:

        translateY(-10px)

        scale(1.02);

}




.platform-feature-grid{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:22px;

    margin:45px 0;

}

.feature-card{

    background:#fff;

    border:1px solid rgba(21,185,217,.10);

    border-radius:22px;

    padding:28px;

    transition:.35s;

    box-shadow:

        0 15px 35px rgba(15,23,42,.06);

}

.feature-card:hover{

    transform:translateY(-8px);

    box-shadow:

        0 30px 60px rgba(15,23,42,.10);

}

.feature-card-icon{

    width:62px;

    height:62px;

    border-radius:18px;

    display:flex;

    justify-content:center;

    align-items:center;

    margin-bottom:20px;

    background:

        linear-gradient(

            135deg,

            rgba(21,185,217,.12),

            rgba(21,185,217,.04)

        );

}


.feature-card-icon i{

    font-size:28px;

    color:var(--primary-color);

}

.feature-card h5{

    font-size:20px;

    font-weight:700;

    margin-bottom:10px;

    color:#172B4D;

}

.feature-card p{

    margin:0;

    line-height:1.7;

    color:#667085;

    font-size:15px;

}







.ai-guide-section {
    position: relative;
    padding: 110px 0;
    overflow: hidden;
    background: #ffffff;
}

.ai-guide-section::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 8% 20%, rgba(21, 185, 217, .06), transparent 32%),
        radial-gradient(circle at 92% 80%, rgba(21, 185, 217, .05), transparent 36%);
    pointer-events: none;
}

.ai-guide-section .container {
    position: relative;
    z-index: 2;
}

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

.ai-guide-section .section-header {

    max-width: 900px;

    margin: 0 auto 70px;

    text-align: center;

}

.ai-guide-section .section-title {

    font-size: 56px;

    font-weight: 800;

    line-height: 1.15;

    color: #172B4D;

    margin: 22px 0;

}

.ai-guide-section .section-title span {

    color: var(--primary-color);

}

.ai-guide-section .section-description {

    max-width: 760px;

    margin: auto;

    font-size: 19px;

    line-height: 1.9;

    color: #667085;

}

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

.ai-grid {

    position: relative;

    display: grid;

    grid-template-columns: repeat(12, 1fr);

    grid-template-rows:

        110px 130px 420px 130px 130px;

    column-gap: 24px;

    row-gap: 50px;

    align-items: center;

    justify-items: center;

    max-width: 1320px;

    margin: auto;

}



/*=========================================================
COMMON CARD
=========================================================*/

.ai-card {

    width: 100%;

    max-width: 210px;

    min-height: 120px;

    background:

        linear-gradient(180deg,
            #ffffff,
            #fbfdff);

    border-radius: 24px;

    padding: 26px 20px;

    border: 1px solid rgba(21, 185, 217, .10);

    text-align: center;

    transition: .35s;

    box-shadow:

        0 15px 35px rgba(15, 23, 42, .07);
    animation:

        floatCard 6s ease-in-out infinite;

}

.ai-card:hover {

    /* transform:translateY(-8px); */

    box-shadow:

        0 30px 60px rgba(15, 23, 42, .12);
    transform:

        translateY(-10px) scale(1.03);

}

.ai-card i {

    width: 64px;

    height: 64px;

    display: flex;

    align-items: center;

    justify-content: center;

    margin: 0 auto 18px;

    border-radius: 18px;

    background:

        linear-gradient(135deg,

            rgba(21, 185, 217, .14),

            rgba(21, 185, 217, .05));

    color: var(--primary-color);

    font-size: 28px;

}

.ai-card h4 {

    font-size: 30px;

    font-weight: 700;

    color: #172B4D;

    margin-bottom: 6px;

}

.ai-card h5 {

    font-size: 19px;

    font-weight: 700;

    line-height: 1.35;

    color: #172B4D;

    margin: 0;

}

.ai-card p {

    margin-top: 10px;

    color: #667085;

    line-height: 1.7;

    font-size: 15px;

}

.student {

    grid-column: 5 / span 4;

    grid-row: 1;

    max-width: 250px;
    animation-delay: 0s;

}

.aptitude {

    grid-column: 1 / span 2;

    grid-row: 2;

}

.interest {

    grid-column: 3 / span 2;

    grid-row: 2;

}

.learning {

    grid-column: 5 / span 2;

    grid-row: 2;

}

.academic {

    grid-column: 7 / span 3;

    grid-row: 2;

}

.aspiration {

    grid-column: 10 / span 3;

    grid-row: 2;

}


/*=========================================================
AI ENGINE
=========================================================*/

.ai-engine {

    grid-column: 4 / span 6;
    grid-row: 3;

    justify-self: center;
    align-self: center;

    width: 360px;
    height: 360px;

    position: relative;

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

    z-index: 20;

}

.ai-engine::after {

    content: "";

    position: absolute;

    width: 520px;

    height: 520px;

    border-radius: 50%;

    background:

        radial-gradient(rgba(21, 185, 217, .10),

            transparent 70%);

    z-index: -1;

}

.engine-ring {

    position: absolute;

    border: 2px solid rgba(21, 185, 217, .18);

    border-radius: 50%;

    animation: ringRotate 20s linear infinite;
    opacity: .45;

}

.ring1 {

    width: 420px;
    height: 420px;
    animation:

        ringRotate 22s linear infinite,

        ringPulse 6s ease-in-out infinite;

}

.ring2 {

    width: 350px;
    height: 350px;

    animation-direction: reverse;
    animation-duration: 14s;
    animation:

        ringRotate 14s linear infinite reverse,

        ringPulse 5s ease-in-out infinite;

}

.engine-content {

    width: 260px;
    height: 260px;
    border-radius: 30px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 28px;
    position: relative;
    z-index: 10;
    animation: aiPulse 4s ease-in-out infinite;
    background:
        linear-gradient(145deg,
            #ffffff,
            #f8fdff);

    border: 1px solid rgba(21, 185, 217, .15);

    box-shadow:
        0 30px 80px rgba(21, 185, 217, .15),
        0 10px 40px rgba(15, 23, 42, .08);

    overflow: hidden;

}

.engine-content::before {

    content: "";

    position: absolute;

    top: -60%;

    left: -40%;

    width: 80px;

    height: 240%;

    background:

        linear-gradient(transparent,

            rgba(255, 255, 255, .45),

            transparent);

    transform: rotate(20deg);

    animation: shine 6s linear infinite;

}


.engine-content i {

    position: relative;

    background:
        linear-gradient(145deg,
            #ffffff,
            #f8fdff);

    border: 1px solid rgba(21, 185, 217, .15);

    box-shadow:
        0 30px 80px rgba(21, 185, 217, .15),
        0 10px 40px rgba(15, 23, 42, .08);

    overflow: hidden;

}

.engine-content h3 {

    font-size: 32px;

    margin-bottom: 4px;

    color: #172B4D;

}

.engine-content span {

    color: var(--primary-color);

    font-size: 13px;

    font-weight: 700;

    letter-spacing: 1px;

    text-transform: uppercase;

}

.engine-content p {

    margin-top: 16px;

    font-size: 15px;

    color: #667085;

    line-height: 1.7;

}

.engine-content:hover {

    transform: scale(1.04);

}

.student {

    grid-column: 5 / span 4;

    grid-row: 1;

    max-width: 240px;

    z-index: 5;
    background:

        linear-gradient(180deg,
            rgba(21, 185, 217, .08),
            white 35%);

}

.aptitude {

    grid-column: 1 / span 2;
    grid-row: 2;
    animation-delay: .2s;

}

.interest {

    grid-column: 3 / span 2;
    grid-row: 2;
    animation-delay: .4s;


}

.learning {

    grid-column: 5 / span 2;
    grid-row: 2;
    animation-delay: .6s;


}

.academic {

    grid-column: 7 / span 3;
    grid-row: 2;
    animation-delay: .8s;

}

.aspiration {

    grid-column: 10 / span 3;
    grid-row: 2;
    animation-delay: 1s;

}

.career {

    grid-column: 2 / span 3;
    grid-row: 4;
    animation-delay: 1.2s;


}

.plan {

    grid-column: 5 / span 2;
    grid-row: 4;
    animation-delay: 1.4s;


}

.adaptive {

    grid-column: 7 / span 2;
    grid-row: 4;
    animation-delay: 1.6s;

}

.dashboard {

    grid-column: 9 / span 3;
    grid-row: 4;
    animation-delay: 1.8s;

}


.future {

    grid-column: 5 / span 4;
    grid-row: 5;

    max-width: 250px;
    background:

        linear-gradient(180deg,
            rgba(21, 185, 217, .08),
            white 40%);
    animation-delay: 1s;

}


@keyframes ringRotate {

    from {

        transform: rotate(0deg);

    }

    to {

        transform: rotate(360deg);

    }

}

@keyframes aiPulse {

    0% {

        transform: scale(1);

    }

    50% {

        transform: scale(1.02);

    }

    100% {

        transform: scale(1);

    }

}

@keyframes shine {

    from {

        left: -50%;

    }

    to {

        left: 150%;

    }

}

@keyframes ringPulse {

    0% {

        transform: scale(1);

        opacity: .35;

    }

    50% {

        transform: scale(1.02);

        opacity: .7;

    }

    100% {

        transform: scale(1);

        opacity: .35;

    }

}

@keyframes floatCard {

    0% {

        transform: translateY(0);

    }

    50% {

        transform: translateY(-6px);

    }

    100% {

        transform: translateY(0);

    }

}

/*=========================================================
ORBITS
=========================================================*/

.orbit {

    position: absolute;

    inset: 0;

    border-radius: 50%;

    animation: orbitRotate linear infinite;

}

.orbit-1 {

    animation-duration: 10s;

}

.orbit-2 {

    animation-duration: 18s;

    animation-direction: reverse;

}

.orbit-dot {

    width: 14px;
    height: 14px;

    background: #15B9D9;

    border: 4px solid white;

    box-shadow:

        0 0 0 8px rgba(21, 185, 217, .18),

        0 0 20px rgba(21, 185, 217, .35);

    position: absolute;



    border-radius: 50%;



    top: -8px;

    left: 50%;

    transform: translateX(-50%);

    /* box-shadow:

        0 0 0 6px rgba(21,185,217,.18),

        0 0 18px rgba(21,185,217,.45); */

}

@keyframes orbitRotate {

    from {

        transform: rotate(0deg);

    }

    to {

        transform: rotate(360deg);

    }

}


.orbit-3 {

    animation-duration: 26s;

}

.orbit-1 {

    transform: rotate(0deg);

}

.orbit-2 {

    transform: rotate(120deg);

}

.orbit-3 {

    transform: rotate(240deg);

}



/*=========================================================
    PLATFORM MODULES
=========================================================*/

.platform-modules-section{

    position:relative;

    padding:120px 0;

    background:#F8FCFE;

    overflow:hidden;

}

.platform-modules-section::before{

    content:"";

    position:absolute;

    inset:0;

    background:

        radial-gradient(circle at 15% 20%,rgba(21,185,217,.05),transparent 30%),

        radial-gradient(circle at 85% 80%,rgba(21,185,217,.05),transparent 35%);

    pointer-events:none;

}

.platform-modules-section .container{

    position:relative;

    z-index:2;

}

/*=============================
        Heading
=============================*/

.platform-modules-section .section-header{

    max-width:760px;

    margin:0 auto 70px;

}

.platform-modules-section .section-title{

    margin:22px 0;

}

.platform-modules-section .section-description{

    max-width:650px;

    margin:auto;

}

/*=============================
        Grid
=============================*/

.modules-grid{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:30px;

}

/*=============================
        Card
=============================*/

.module-card{

    background:#fff;

    border-radius:26px;

    padding:38px 30px;

    text-align:center;

    border:1px solid rgba(21,185,217,.08);

    box-shadow:

        0 15px 45px rgba(15,23,42,.06);

    transition:.35s ease;

    height:100%;

}

.module-card:hover{

    transform:translateY(-10px);

    box-shadow:

        0 30px 60px rgba(15,23,42,.10);

}

/*=============================
        Icon
=============================*/

.module-icon{

    width:74px;

    height:74px;

    margin:0 auto 22px;

    border-radius:22px;

    display:flex;

    justify-content:center;

    align-items:center;

    background:

        linear-gradient(

            135deg,

            rgba(21,185,217,.12),

            rgba(21,185,217,.05)

        );

}

.module-icon i{

    font-size:32px;

    color:var(--primary-color);

}

/*=============================
        Title
=============================*/

.module-card h4{

    font-size:24px;

    font-weight:700;

    color:#172B4D;

    margin-bottom:14px;

}

/*=============================
        Text
=============================*/

.module-card p{

    margin:0;

    font-size:16px;

    line-height:1.8;

    color:#667085;

}

/*=============================
        Hover
=============================*/

.module-card:hover .module-icon{

    transform:scale(1.08);

    transition:.35s;

}

.module-card:hover .module-icon i{

    transform:rotate(-8deg);

    transition:.35s;

}

/*=============================
        Responsive
=============================*/

@media (max-width:991px){

    .modules-grid{

        grid-template-columns:repeat(2,1fr);

    }

}

@media (max-width:767px){

    .platform-modules-section{

        padding:80px 0;

    }

    .modules-grid{

        grid-template-columns:1fr;

        gap:22px;

    }

    .module-card{

        padding:30px 24px;

    }

    .module-card h4{

        font-size:22px;

    }

    .module-card p{

        font-size:15px;

    }

}



/*=========================================================
WHO CAN USE BAECN
=========================================================*/

.users-section{

    padding:110px 0;

    background:#fff;

}

.users-grid{

    margin-top:70px;

    display:grid;

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

    gap:28px;

}

.user-card{

    background:#fff;

    border-radius:24px;

    padding:40px 28px;

    text-align:center;

    border:1px solid rgba(21,185,217,.08);

    box-shadow:0 15px 45px rgba(15,23,42,.05);

    transition:.35s;

}

.user-card:hover{

    transform:translateY(-10px);

    box-shadow:0 25px 60px rgba(15,23,42,.10);

}

.user-icon{

    width:76px;

    height:76px;

    margin:0 auto 22px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:22px;

    background:rgba(21,185,217,.10);

}

.user-icon i{

    font-size:34px;

    color:var(--primary-color);

}

.user-card h4{

    margin-bottom:14px;

    font-size:24px;

    font-weight:700;

    color:#172B4D;

}

.user-card p{

    margin:0;

    color:#667085;

    line-height:1.8;

}

@media(max-width:991px){

.users-grid{

grid-template-columns:repeat(2,1fr);

}

}

@media(max-width:767px){

.users-grid{

grid-template-columns:1fr;

}

.users-section{

padding:80px 0;

}

}




/*=========================================================
OUR SERVICES
=========================================================*/

.services-section{

    padding:110px 0;

    background:#F8FCFE;

}

.services-grid{

    margin-top:70px;

    display:grid;

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

    gap:28px;

}

.service-card{

    background:#fff;

    border-radius:24px;

    padding:36px 28px;

    text-align:center;

    border:1px solid rgba(21,185,217,.08);

    box-shadow:0 15px 40px rgba(15,23,42,.05);

    transition:.35s;

}

.service-card:hover{

    transform:translateY(-10px);

    box-shadow:0 25px 60px rgba(15,23,42,.10);

}

.service-icon{

    width:72px;

    height:72px;

    margin:0 auto 20px;

    border-radius:20px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:rgba(21,185,217,.10);

}

.service-icon i{

    font-size:32px;

    color:var(--primary-color);

}

.service-card h4{

    font-size:22px;

    margin-bottom:14px;

    color:#172B4D;

    font-weight:700;

}

.service-card p{

    margin:0;

    color:#667085;

    line-height:1.8;

}

@media(max-width:1200px){

.services-grid{

grid-template-columns:repeat(2,1fr);

}

}

@media(max-width:767px){

.services-grid{

grid-template-columns:1fr;

}

.services-section{

padding:80px 0;

}

}