/* ==========================================
   ABOUT SECTION
========================================== */

.about{
    position:relative;
    padding:45px 0 25px;
    overflow:hidden;
}

.about-container{
    width:min(1400px,90%);
    margin:auto;

    display:grid;
    grid-template-columns:1fr 1fr;
    align-items:center;
    gap:45px;
}

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

.about-left{
    display:flex;
    justify-content:center;
}

.about-image{
    position:relative;
    width:100%;
    max-width:520px;
}

.about-image img{
    width:100%;
    display:block;

    border-radius:28px;

    background:rgba(255,255,255,.05);
    border:1px solid rgba(255,255,255,.08);

    backdrop-filter:blur(20px);

    box-shadow:0 30px 80px rgba(0,0,0,.35);

    transition:.4s ease;
}

.about-image img:hover{
    transform:scale(1.03);
}

/* ==========================
   EXPERIENCE CARD
========================== */

.experience-card{
    position:absolute;

    bottom:25px;
    right:-30px;

    width:180px;

    padding:22px;

    border-radius:22px;

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

    backdrop-filter:blur(20px);

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

    text-align:center;

    box-shadow:0 20px 40px rgba(0,0,0,.25);

    animation:floatCard 4s ease-in-out infinite;
}

.experience-card h2{
    color:var(--primary);
    font-size:42px;
    margin-bottom:8px;
}

.experience-card span{
    color:var(--text);
    font-size:15px;
}

@keyframes floatCard{

    0%,100%{
        transform:translateY(0);
    }

    50%{
        transform:translateY(-12px);
    }

}

/* ==========================
   RIGHT
========================== */

.about-right{
    display:flex;
    flex-direction:column;
    justify-content:center;
}

.section-badge{
    display:inline-block;

    width:max-content;

    padding:10px 18px;

    border-radius:999px;

    background:rgba(108,99,255,.15);

    color:var(--primary);

    font-weight:600;

    margin-bottom:22px;
}

.about-right h2{
    font-size:54px;
    line-height:1.15;
    margin-bottom:25px;
    font-family:var(--heading);
}

.about-right h2 span{
    background:linear-gradient(90deg,var(--primary),var(--secondary));
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
}

.about-right>p{
    color:var(--text);
    line-height:1.9;
    margin-bottom:35px;
    font-size:17px;
}

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

.about-features{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 25px;
    margin-top: 40px;
    width: 100%;
}

.feature-box{
    display: flex;
    align-items: flex-start;
    gap: 18px;

    padding: 24px;
    min-height: 170px;

    border-radius: 20px;

    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.08);
    backdrop-filter: blur(16px);

    position: relative;
    overflow: hidden;

    opacity: 1;
    visibility: visible;
}
.feature-box:hover{
    transform:translateY(-6px);
    border-color:var(--primary);
    box-shadow:0 12px 30px rgba(108,99,255,.15);
}

.feature-icon{
    width:60px;
    height:60px;

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

    border-radius:18px;

    background:rgba(255,165,0,.08);
    border:1px solid rgba(255,165,0,.25);

    flex-shrink:0;
}

.feature-icon i{
    font-size:28px;
    color:#FFB000;
    transition:.35s ease;
}

.feature-box:hover .feature-icon{
    background:#FFB000;
    transform:rotate(10deg) scale(1.08);
}

.feature-box:hover .feature-icon i{
    color:#111827;
}

.feature-box h4{
    font-size:18px;
    margin-bottom:6px;
}

.feature-box p{
    margin:0;
    font-size:14px;
    line-height:1.6;
    color:var(--text);
}
/* ==========================
   BUTTON
========================== */

.about .primary-btn{
    width:max-content;
}

.about .primary-btn:hover{
    box-shadow:0 0 30px rgba(108,99,255,.4);
}

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

.about::before{
    content:"";
    position:absolute;

    width:420px;
    height:420px;

    background:#FF8A00;

    filter:blur(140px);

    opacity:.15;

    left:-120px;
    top:0;

    z-index:-1;
}

.about::after{
    content:"";
    position:absolute;

    width:350px;
    height:350px;

    background:#FFD700;

    filter:blur(140px);

    opacity:.12;

    right:-100px;
    bottom:-100px;

    z-index:-1;
}

/* ==========================
   LIGHT MODE
========================== */

.light-theme .feature-box,
.light-theme .experience-card{
    background:#fff;
    border:1px solid rgba(0,0,0,.08);
}

.light-theme .feature-box p,
.light-theme .experience-card span,
.light-theme .about-right>p{
    color:#6B7280;
}

/* Move Learn More button down */

.about .primary-btn{
    margin-top:30px;
}


.feature-icon i{
    font-size:30px;
    color:#ffb000;
    transition:.3s ease;
}

.feature-box:hover .feature-icon i{
    transform:scale(1.15) rotate(-8deg);
}