:root{

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

/* section */
--about-padding:140px 0;
--about-bg: rgba(255,122,24,0.05);
--about-color:rgb(220, 219, 219);



/* layout */
--about-grid-columns:1fr 1fr;
--about-grid-gap:80px;
--about-grid-mobile-gap:50px;

/* tag */
--about-tag-padding:8px 14px;
--about-tag-size:11px;
--about-tag-spacing:3px;
--about-tag-color:#ff7a18;
--about-tag-border:2px solid #ff7a18;
--about-tag-bg:rgba(255,122,24,0.06);
--about-tag-margin:18px;

/* title */
--about-title-size:clamp(34px,4vw,56px);
--about-title-line:1.05;
--about-title-margin:22px;

/* text */
--about-text-size:16px;
--about-text-line:1.8;
--about-text-color:rgba(255,255,255,0.72);
--about-text-width:520px;
--about-text-margin:14px;

/* image */
--about-media-width:380px;
--about-media-height:520px;
--about-media-radius:18px;

--about-media-shadow:
0 40px 100px rgba(0,0,0,0.6);

--about-media-filter:
contrast(1.08) brightness(0.85);

--about-media-transition:.6s ease;
--about-media-hover:scale(1.03);

--about-frame:
1px solid rgba(255,255,255,0.12);

/* EST badge */
--est-top:12px;
--est-left:12px;

--est-bg:#111;
--est-padding:10px 14px;

--est-size:11px;
--est-spacing:2px;

--est-color:#ff7a18;
--est-border:1px solid rgba(255,122,24,0.25);

/* floating cards */
--float-bg:rgba(10,10,10,0.96);
--float-border:3px solid #ff7a18;

--float-padding:12px 14px;
--float-size:12px;
--float-weight:700;

--float-width:170px;

--float-shadow:
0 20px 40px rgba(0,0,0,0.5);

--float-animation:floatMove 4s ease-in-out infinite;

/* card positions */
--card1-top:40px;
--card1-right:12px;

--card2-bottom:140px;
--card2-right:12px;

--card3-bottom:40px;
--card3-left:12px;

/* mobile */
--about-mobile-width:100%;
--about-mobile-max-width:420px;
--about-mobile-height:460px;

--float-mobile-width:180px;
--float-mobile-padding:10px 12px;
--float-mobile-size:11px;
--float-mobile-line:1.3;

--card1-mobile-top:20px;
--card1-mobile-right:10px;

--card2-mobile-bottom:90px;
--card2-mobile-right:10px;

--card3-mobile-bottom:20px;
--card3-mobile-left:10px;

--est-mobile-top:10px;
--est-mobile-left:10px;

}


.about{

    position:relative;

    padding:var(--about-padding);

    background:var(--about-bg);

    color:var(--about-color);

    overflow:hidden;
}

/* subtle glow only */

.about::before{

    content:"";

    position:absolute;

    inset:0;

    background:
    radial-gradient(circle at 25% 30%, var(--about-glow-1), transparent 55%),
    radial-gradient(circle at 75% 70%, var(--about-glow-2), transparent 60%);

    pointer-events:none;
}

/* layout */

.about-wrap{

    display:grid;

    grid-template-columns:var(--about-grid-columns);

    gap:var(--about-grid-gap);

    align-items:center;

    position:relative;

    z-index:2;
}

/* LEFT */

.about-tag{

    display:inline-block;

    padding:var(--about-tag-padding);

    font-size:var(--about-tag-size);

    letter-spacing:var(--about-tag-spacing);

    text-transform:uppercase;

    color:var(--about-tag-color);

    border-left:var(--about-tag-border);

    background:var(--about-tag-bg);

    margin-bottom:var(--about-tag-margin);
}

.about-left h2{

    font-size:var(--about-title-size);

    line-height:var(--about-title-line);

    margin-bottom:var(--about-title-margin);
}

.about-left p{

    font-size:var(--about-text-size);

    line-height:var(--about-text-line);

    color:var(--about-text-color);

    max-width:var(--about-text-width);

    margin-bottom:var(--about-text-margin);
}

/* RIGHT */

.about-right{

    display:flex;

    justify-content:center;
}

/* IMAGE */

.about-media{

    position:relative;

    width:var(--about-media-width);

    height:var(--about-media-height);

    overflow:hidden;

    border-radius:var(--about-media-radius);
}

.about-media img{

    width:100%;

    height:100%;

    object-fit:cover;

    border-radius:var(--about-media-radius);

    box-shadow:var(--about-media-shadow);

    filter:var(--about-media-filter);

    transition:var(--about-media-transition);
}

.about-media:hover img{

    transform:var(--about-media-hover);
}

.about-media::after{

    content:"";

    position:absolute;

    inset:0;

    border-radius:var(--about-media-radius);

    border:var(--about-frame);

    pointer-events:none;
}

/* EST */

.est-badge{

    position:absolute;

    top:var(--est-top);

    left:var(--est-left);

    background:var(--est-bg);

    padding:var(--est-padding);

    font-size:var(--est-size);

    letter-spacing:var(--est-spacing);

    border:var(--est-border);

    color:var(--est-color);

    z-index:5;
}

/* FLOAT CARDS */

.float-card{

    position:absolute;

    background:var(--float-bg);

    border-left:var(--float-border);

    padding:var(--float-padding);

    font-size:var(--float-size);

    font-weight:var(--float-weight);

    max-width:var(--float-width);

    box-shadow:var(--float-shadow);

    animation:var(--float-animation);
}

.card-1{

    top:var(--card1-top);

    right:var(--card1-right);
}

.card-2{

    bottom:var(--card2-bottom);

    right:var(--card2-right);

    animation-delay:.6s;
}

.card-3{

    bottom:var(--card3-bottom);

    left:var(--card3-left);

    animation-delay:1.2s;
}

@keyframes floatMove{

0%{transform:translateY(0px);}
50%{transform:translateY(-8px);}
100%{transform:translateY(0px);}

}

/* responsive */

@media(max-width:900px){

.about-wrap{

grid-template-columns:1fr;

gap:var(--about-grid-mobile-gap);

}

.about-right{

display:flex;

justify-content:center;

}

.about-media{

width:var(--about-mobile-width);

max-width:var(--about-mobile-max-width);

height:var(--about-mobile-height);

position:relative;

}

.float-card{

max-width:var(--float-mobile-width);

padding:var(--float-mobile-padding);

font-size:var(--float-mobile-size);

line-height:var(--float-mobile-line);

animation:floatMove 3.5s ease-in-out infinite;

}

.card-1{

top:var(--card1-mobile-top);

right:var(--card1-mobile-right);

left:auto;

}

.card-2{

bottom:var(--card2-mobile-bottom);

right:var(--card2-mobile-right);

left:auto;

animation-delay:.6s;

}

.card-3{

bottom:var(--card3-mobile-bottom);

left:var(--card3-mobile-left);

right:auto;

animation-delay:1.2s;

}

.est-badge{

top:var(--est-mobile-top);

left:var(--est-mobile-left);

}

}