/* ================= ABOUT PAGE ================= */

.about-page{

    position:relative;

    padding:5rem 0;

    flex:1;

    display:flex;

    align-items:center;

}

/* ================= IMAGE ================= */

.about-image-wrapper{

    position:relative;

    display:inline-flex;

    justify-content:center;

    align-items:center;

}

/* glow */

.about-image-wrapper::before{

    content:"";

    position:absolute;

    width:120%;
    height:120%;

    border-radius:50%;

    background:
    radial-gradient(circle,
    rgba(212,175,55,.28),
    rgba(138,43,226,.14),
    transparent 70%);

    filter:blur(50px);

    animation:
    aboutGlow 5s ease-in-out infinite;

    z-index:-1;

}

/* rotating border */

.about-image-wrapper::after{

    content:"";

    position:absolute;

    inset:-10px;

    border-radius:35px;

    padding:2px;

    background:
    linear-gradient(
    45deg,
    rgba(212,175,55,.9),
    rgba(255,255,255,.1),
    rgba(138,43,226,.6),
    rgba(212,175,55,.9));

    background-size:300% 300%;

    animation:
    borderRotate 8s linear infinite;

    -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);

    -webkit-mask-composite:xor;

    mask-composite:exclude;

}

.about-image{

    width:100%;

    max-width:420px;

    border-radius:30px;

    object-fit:cover;

    position:relative;

    z-index:2;

    animation:
    floatingImage 6s ease-in-out infinite;

    box-shadow:
    0 0 60px rgba(212,175,55,.18),
    0 30px 80px rgba(0,0,0,.65);

    transition:.5s;

}

.about-image:hover{

    transform:
    scale(1.03)
    rotate(-1deg);

}

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

.about-content-card{

    position:relative;

    padding:3rem;

    border-radius:35px;

    background:
    linear-gradient(
    145deg,
    rgba(255,255,255,.05),
    rgba(255,255,255,.02));

    backdrop-filter:blur(20px);

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

    overflow:hidden;

    box-shadow:
    0 10px 50px rgba(0,0,0,.35);

}

/* glow */

.about-content-card::before{

    content:"";

    position:absolute;

    width:250px;
    height:250px;

    background:
    radial-gradient(circle,
    rgba(212,175,55,.12),
    transparent 70%);

    top:-120px;
    left:-120px;

    border-radius:50%;

}

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

.section-badge{

    display:inline-flex;

    align-items:center;

    gap:8px;

    padding:.7rem 1.3rem;

    border-radius:50px;

    background:
    rgba(212,175,55,.12);

    border:
    1px solid rgba(212,175,55,.25);

    color:#D4AF37;

    margin-bottom:1.5rem;

    font-size:.95rem;

}

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

.about-title{

    font-size:
    clamp(2rem,5vw,4rem);

    font-weight:900;

    line-height:1.4;

    margin-bottom:1rem;

}

.about-title span{

    color:#D4AF37;

}

/* ================= DIVIDER ================= */

.about-divider{

    width:120px;
    height:4px;

    border-radius:50px;

    background:
    linear-gradient(to left,
    #D4AF37,
    transparent);

    margin-bottom:2rem;

}

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

.about-description{

    position: relative;

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

    font-size: 1.02rem;

    line-height: 2.4;

    text-align: right;

    font-weight: 400;

    letter-spacing: .2px;

    word-spacing: 1px;

    overflow: hidden;

}

/* paragraphs */

.about-description p{

    margin-bottom: 1.8rem;

    position: relative;

    padding-right: 1.2rem;

}

/* decorative line */

.about-description p::before{

    content: "";

    position: absolute;

    right: 0;

    top: 12px;

    width: 4px;

    height: calc(100% - 20px);

    border-radius: 30px;

    background: linear-gradient(
        to bottom,
        rgba(212,175,55,.9),
        transparent
    );

    opacity: .7;

}

/* highlighted quote */

.about-description blockquote{

    position: relative;

    margin: 2rem 0;

    padding: 1.5rem 2rem;

    border-radius: 24px;

    background:
    linear-gradient(
        135deg,
        rgba(212,175,55,.10),
        rgba(255,255,255,.03)
    );

    border:
    1px solid rgba(212,175,55,.18);

    color: #fff;

    font-size: 1.1rem;

    line-height: 2.2;

    text-align: right;

    font-weight: 500;

    overflow: hidden;

}

.about-description blockquote::before{

    content: "❝";

    position: absolute;

    top: -10px;

    right: 20px;

    font-size: 5rem;

    color: rgba(212,175,55,.18);

    font-family: serif;

}

/* mobile */

@media(max-width:768px){

    .about-description{

        font-size: .95rem;

        line-height: 2.2;

        text-align: right;

    }

    .about-description p{

        padding-right: .9rem;

        margin-bottom: 1.5rem;

    }

    .about-description blockquote{

        padding: 1.2rem;

        font-size: 1rem;

        line-height: 2;

    }

}

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

.about-info-grid{

    margin-top:2.5rem;

    display:grid;

    grid-template-columns:
    repeat(auto-fit,minmax(240px,1fr));

    gap:18px;

}

/* item */

.about-info-item{

    display:flex;

    align-items:flex-start;

    gap:15px;

    padding:1.2rem;

    border-radius:22px;

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

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

    transition:.4s;

}

.about-info-item:hover{

    transform:
    translateY(-6px);

    background:
    rgba(212,175,55,.08);

    border-color:
    rgba(212,175,55,.18);

}

.about-info-item i{

    width:52px;
    height:52px;

    min-width:52px;

    border-radius:16px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:
    rgba(212,175,55,.12);

    color:#D4AF37;

    font-size:1.5rem;

}

.about-info-item h5{

    margin-bottom:6px;

    font-size:1rem;

}

.about-info-item p{

    margin:0;

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

    font-size:.9rem;

    line-height:1.8;

}

/* ================= ANIMATIONS ================= */

@keyframes aboutGlow{

    0%,100%{

        opacity:.6;

        transform:scale(1);

    }

    50%{

        opacity:1;

        transform:scale(1.08);

    }

}

/* ================= RESPONSIVE ================= */

@media(max-width:991px){

    .about-page{

        padding:3rem 1rem;

    }

    .about-content-card{

        padding:2rem;

    }

    .about-title{

        text-align:right;

    }

    .section-badge{

        margin-right:auto;
        margin-left:auto;

    }

    .about-divider{

        margin-right:auto;
        margin-left:auto;

    }

    .about-description{

        text-align:right;

    }

}

/* ================= DESKTOP STICKY IMAGE ================= */

@media(min-width:992px){

    .about-image-column{

        position: sticky;

        top: 120px;

        align-self: flex-start;

    }

}