/*======================================================================
MANSURGE COMPONENT
MC-02

WHY MANSURGE
Version : 3.0
======================================================================*/

.ms-why{

position:relative;

overflow:hidden;

background:var(--ms-bg);

padding:120px 0;

}

.ms-why::before{

content:"";

position:absolute;

inset:0;

pointer-events:none;

background:

radial-gradient(

circle at top left,

rgba(197,165,114,.05),

transparent 62%

);

}

.ms-why-layout{

position:relative;

z-index:2;

display:grid;

grid-template-columns:

minmax(0,.9fr)

minmax(0,1.1fr);

gap:80px;

align-items:center;

}

.ms-why-content{

max-width:620px;

}

.ms-why-subtitle{

display:inline-flex;

align-items:center;

justify-content:center;

padding:10px 18px;

margin-bottom:28px;

border-radius:var(--ms-radius-pill);

background:rgba(197,165,114,.08);

border:var(--ms-border-thin) solid var(--ms-border);

}

.ms-why-title{

margin-bottom:28px;

}

.ms-why-divider{

width:120px;

height:2px;

margin:34px 0;

background:var(--ms-gold);

opacity:.35;

}

.ms-why-text{

max-width:640px;

margin-bottom:46px;

}

.ms-why-features{

display:grid;

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

gap:28px;

}

.ms-why-card{

display:flex;

flex-direction:column;

justify-content:flex-start;

padding:34px;

background:var(--ms-surface);

border:var(--ms-border-thin) solid var(--ms-border);

border-radius:var(--ms-radius-lg);

transition:

transform var(--ms-motion-normal) var(--ms-ease-standard),

border-color var(--ms-motion-normal) var(--ms-ease-standard),

box-shadow var(--ms-motion-normal) var(--ms-ease-standard);

}

.ms-why-card:hover{

transform:translateY(-8px);

border-color:var(--ms-gold);

box-shadow:var(--ms-shadow-md);

}

.ms-why-icon{

display:flex;

align-items:center;

justify-content:center;

width:68px;

height:68px;

margin-bottom:24px;

flex-shrink:0;

border-radius:18px;

background:

linear-gradient(

135deg,

rgba(197,165,114,.18),

rgba(197,165,114,.06)

);

border:var(--ms-border-thin) solid rgba(197,165,114,.22);

color:var(--ms-gold);

font-size:28px;

}

.ms-why-card-title{

margin-bottom:18px;

}

.ms-why-card-text{

}

.ms-why-card>*:last-child{

margin-bottom:0;

}

@media (max-width:1024px){

.ms-why{

padding:100px 0;

}

.ms-why-layout{

grid-template-columns:1fr;

gap:60px;

}

.ms-why-content{

max-width:100%;

}

}

@media (max-width:767px){

.ms-why{

padding:80px 0;

}

.ms-why-layout{

display:flex;

flex-direction:column;

align-items:stretch;

gap:42px;

}

.ms-why-features{

grid-template-columns:1fr;

gap:22px;

}

.ms-why-card{

padding:28px;

}

}