/* ==================================================
   HERO
================================================== */

.hero{

    padding-top:48px;

    padding-bottom:40px;

    background:#ffffff;
}

/* ==================================================
   HERO CONTAINER
================================================== */

.hero .container{

    max-width:1400px;
}

/* ==================================================
   HERO GRID
================================================== */

.hero-grid{

    display:grid;

    grid-template-columns:40% 60%;
    
    grid-template-areas:
    "content image"
    "features image"
    "trust image";

    gap:10px;

    align-items:stretch;
}

/* ==================================================
   HERO CONTENT
================================================== */

.hero-content{
    
    grid-area:content;

    display:flex;

    flex-direction:column;

    justify-content:center;

    max-width:none;
    
    padding-top:50px;

    padding-bottom:10px;
}

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

.hero-title{

    font-size:50px;

    font-weight:800;

    line-height:1.05;

    color:#111827;

    margin-bottom:25px;
}

.hero-title span{

    display:block;

    color:var(--primary);
}

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

.hero-description{

    font-size:20px;

    line-height:1.7;

    color:#6b7280;

    margin-bottom:40px;
}

/* ==================================================
   HERO BUTTONS
================================================== */

.hero-buttons{

    display:flex;

    gap:20px;

    margin-bottom:35px;
}

/* ==================================================
   PRIMARY BUTTON
================================================== */

.btn-primary{

    position:relative;

    display:flex;

    align-items:center;

    justify-content:center;

    width:280px;

    height:64px;

    background:var(--primary);

    color:#ffffff;

    text-decoration:none;

    border-radius:14px;

    font-weight:700;

    transition:.3s;
}

.btn-primary:hover{

    transform:translateY(-2px);
}

.btn-primary .btn-arrow{

    position:absolute;

    right:24px;

    font-size:24px;

    line-height:1;
}

/* ==================================================
   SECONDARY BUTTON
================================================== */

.btn-secondary{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:12px;

    width:320px;

    height:64px;

    border:2px solid var(--primary);

    border-radius:14px;

    color:#111827;

    text-decoration:none;

    font-weight:700;

    transition:.3s;
}

.btn-secondary:hover{

    background:#f8fafc;
}

.btn-secondary img{

    width:24px;

    height:24px;

    object-fit:contain;
}
/* ==================================================
   HERO FEATURES
================================================== */

.hero-features{
    
    grid-area:features;

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:10px;

    margin-bottom:35px;

    margin-top:25px;
}

.feature{

    text-align:center;

    position:relative;
}

.feature:not(:last-child)::after{

    content:"";

    position:absolute;

    top:8px;

    right:-5px;

    width:1px;

    height:55px;

    background:#e5e7eb;
}

.feature-icon{

    margin-bottom:12px;
}

.feature-icon img{

    width:42px;

    height:42px;

    object-fit:contain;
}

.feature span{

    display:block;

    font-size:15px;

    font-weight:600;

    line-height:1.4;
}

/* ==================================================
   HERO TRUST BOX
================================================== */

.hero-trust{
    
     grid-area:trust;

    display:flex;

    align-items:center;

    gap:20px;

    padding:16px 22px;

    background:#ffffff;

    border-radius:20px;

    border:1px solid #f1f5f9;

    box-shadow:
    0 10px 30px rgba(15,23,42,.12),
    0 24px 50px rgba(15,23,42,.10);

    max-width:100%;
    
}

.trust-icon{

    width:72px;

    height:72px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:#ffffff;

    box-shadow:
    0 4px 15px rgba(0,0,0,.08);
}

.trust-icon img{

    width:36px;

    height:36px;
}

.trust-content{

    display:flex;

    flex-direction:column;

    gap:5px;
}

.trust-content strong{

    color:var(--primary);

    font-size:18px;
}

.trust-content span{

    color:#374151;

    line-height:1.5;
}

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

.hero-image{
    
    grid-area:image;

    height:100%;

    display:flex;

    align-items:stretch;
}

.hero-image picture{

    display:block;

    width:100%;
}

.hero-image img{

    width:100%;

    height:100%;

    object-fit:cover;

    display:block;

    border-radius:24px;
}