/* ===================================================
   LyricsGroove Artist About
=================================================== */

.lg-about{

padding:30px 0 90px;

}


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

.lg-about .lg-section-heading{

margin-bottom:28px;

}

.lg-about .lg-section-heading h2{

font-size:38px;

font-weight:800;

color:#081C3A;

line-height:1.2;

position:relative;

display:inline-block;

padding-bottom:14px;

}

.lg-about .lg-section-heading h2::after{

content:"";

position:absolute;

left:0;

bottom:0;

width:90px;

height:4px;

border-radius:50px;

background:linear-gradient(
90deg,
#1C55FF,
#CF006B,
#3D007A
);

}


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

.lg-about-card{

position:relative;

overflow:hidden;

padding:50px;

border-radius:28px;

background:linear-gradient(
135deg,
#081C3A 0%,
#132C58 100%
);

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

box-shadow:
0 20px 50px rgba(8,28,58,.18);

}


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

.lg-about-content{

position:relative;

z-index:5;

max-width:100%;

}

.lg-about-content p{

font-size:17px;

line-height:2;

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

margin-bottom:22px;

}

.lg-about-content strong{

color:#ffffff;

}

.lg-about-content a{

color:#8EC8FF;

text-decoration:none;

}

.lg-about-content a:hover{

text-decoration:underline;

}


/* =====================================
About Button
===================================== */

.lg-about-btn{

display:inline-flex;

align-items:center;

justify-content:center;

padding:14px 28px;

border-radius:14px;

background:#ffffff;

color:#081C3A;

font-size:15px;

font-weight:700;

text-decoration:none;

transition:all .30s ease;

border:2px solid #ffffff;

box-shadow:
0 10px 25px rgba(0,0,0,.12);

}

.lg-about-btn:hover{

background:#081C3A;

color:#ffffff;

border-color:#ffffff;

transform:translateY(-3px);

box-shadow:
0 18px 36px rgba(0,0,0,.22);

}


/*=========================================
Decoration
=========================================*/

.lg-about-decoration{

position:absolute;

right:-40px;

top:50%;

transform:translateY(-50%);

width:340px;

height:340px;

pointer-events:none;

z-index:1;

opacity:.65;

}

.lg-about-glow{

position:absolute;

right:0;

top:30px;

width:320px;

height:320px;

border-radius:50%;

background:radial-gradient(
circle,
rgba(207,0,107,.22),
transparent 70%
);

filter:blur(28px);

}

.lg-about-circle{

position:absolute;

border-radius:50%;

background:linear-gradient(
135deg,
#1C55FF,
#CF006B,
#3D007A
);

opacity:.22;

}

.lg-circle-1{

width:170px;

height:170px;

top:30px;

right:20px;

}

.lg-circle-2{

width:90px;

height:90px;

bottom:25px;

left:25px;

}

.lg-circle-3{

width:50px;

height:50px;

top:20px;

left:80px;

}


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

@media(max-width:992px){

.lg-about-card{

grid-template-columns:1fr;

padding:40px;

}

.lg-about-decoration{

height:180px;

}

}


/*=========================================
Mobile
=========================================*/

@media(max-width:768px){

.lg-about{

padding:25px 0 70px;

}

.lg-about .lg-section-heading h2{

font-size:30px;

}

.lg-about-card{

padding:28px;

border-radius:22px;

gap:25px;

}

.lg-about-content p{

font-size:15px;

line-height:1.9;

}

.lg-about-decoration{

display:none;

}

}

/* =====================================
Keep Text Above Decoration
===================================== */

.lg-about-content p{

position:relative;

z-index:5;

}

.lg-about-btn{

position:relative;

z-index:5;

}

/* ==========================================
   About Button Override
========================================== */

.lg-about-btn{

display:inline-flex !important;

align-items:center;

justify-content:center;

padding:14px 30px !important;

min-height:48px;

border-radius:14px;

background:#ffffff !important;

color:#081C3A !important;

font-size:15px;

font-weight:700;

text-decoration:none;

border:2px solid #ffffff;

transition:all .30s ease;

box-shadow:0 10px 24px rgba(0,0,0,.15);

}

.lg-about-btn:hover{

background:#081C3A !important;

color:#ffffff !important;

border-color:#ffffff;

transform:translateY(-3px);

}

.lg-about-btn span{

color:inherit !important;

}

.lg-about-btn i{

color:inherit !important;

margin-left:8px;

}























/* =========================================================
   LyricsGroove - About Artist Biography Button
   ========================================================= */

.lg-about .lg-about-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 225px;
    min-height: 48px;

    padding: 14px 28px;

    box-sizing: border-box;

    border-radius: 12px;

    font-family: inherit;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.2;

    text-transform: none;
    letter-spacing: 0;

    white-space: nowrap;

    text-decoration: none;

    cursor: pointer;
}


/* Keep the exact title case */
.lg-about .lg-about-btn {
    text-transform: none !important;
}


/* Hover */
.lg-about .lg-about-btn:hover {
    text-decoration: none;
}


/* Pending button should look identical */
.lg-about .lg-biography-pending {
    text-transform: none !important;
}
















/* =========================================================
   LyricsGroove - About Artist
   Reduce top spacing
   ========================================================= */

.lg-about {
    padding-top: 2px !important;
}