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

.hero-section{

    position:relative;

    padding-top:150px;
    padding-bottom:80px;

    background:linear-gradient(
        180deg,
        #FFFFFF 0%,
        #F7FAFD 100%
    );

    overflow:hidden;

}

/* subtle background glow */

.hero-section::before{

    content:"";

    position:absolute;

    width:900px;
    height:900px;

    right:-300px;
    top:-350px;

    border-radius:50%;

    background:rgba(14,73,124,.05);

    z-index:0;

}

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

.hero-grid{

    position:relative;

    z-index:2;

    display:grid;

    grid-template-columns:40% 60%;

    align-items:center;

    gap:0px;

}
/*=========================================================
  LEFT COLUMN
=========================================================*/

.hero-content{

    max-width:620px;

}

/*=========================================================
  EYEBROW
=========================================================*/

.hero-tag{

    display:inline-block;

    margin-bottom:22px;

    padding:8px 18px;

    background:#EEF5FB;

    color:var(--primary);

    font-family:var(--font-body);

    font-size:13px;

    font-weight:700;

    letter-spacing:1.8px;

    border-radius:100px;

    text-transform:uppercase;

}

/*=========================================================
  HEADING
=========================================================*/

.hero-content h1{
 
    font-family:var(--font-heading);
 
   font-size:72px;
 
    line-height:.95;
 
    font-weight:700;
 
    color:var(--text);
 
   margin-bottom:22px;
 
}

.hero-content h1 span{
 
    color:var(--primary);
 
}

/*=========================================================
  PARAGRAPH
=========================================================*/

.hero-content p{
 
    font-family:var(--font-body);
 
   font-size:18px;
 
   line-height:1.7;
 
    color:var(--text-light);
 
   margin-bottom:30px;
 
}

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

.hero-buttons{
 
    display:flex;
 
    gap:18px;
 
    flex-wrap:wrap;
 
    margin-bottom:24px;
 
}

.secondary-button{

    display:inline-flex;

    justify-content:center;

    align-items:center;

    padding:15px 28px;

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

    border-radius:100px;

    color:var(--primary);

    text-decoration:none;

    font-weight:700;

    transition:var(--transition);

}

.secondary-button:hover{

    background:var(--primary);

    color:#FFFFFF;

}

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

.hero-image{

    width:100%;

    display:flex;

    justify-content:flex-end;

    align-items:center;

}

.hero-image img{

    width:100%;

    height:auto;

    display:block;

    border-radius:24px;

    object-fit:contain;

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

}

/*=========================================================
  TRUST STRIP
=========================================================*/

.trust-strip{

    background:#FFFFFF;

    border-top:1px solid var(--border);

    border-bottom:1px solid var(--border);

    padding:36px 0;

}

.trust-grid{

    display:grid;

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

    gap:30px;

}

.trust-card{

    text-align:center;

}

.trust-card h2{

    font-family:var(--font-heading);

    font-size:44px;

    color:var(--primary);

    margin-bottom:6px;

}

.trust-card p{

    font-family:var(--font-body);

    color:var(--text-light);

    font-size:17px;

}

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

@media(max-width:1200px){

    .hero-grid{

        gap:50px;

    }

    .hero-content h1{

        font-size:66px;

    }

}

@media(max-width:992px){

    .hero-grid{

        grid-template-columns:1fr;

    }

    .hero-content{

        max-width:100%;
        order:2;

        text-align:center;

    }

    .hero-image{

        order:1;

    }

    .hero-buttons{

        justify-content:center;

    }

    .trust-grid{

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

    }

}

@media(max-width:768px){

    .hero-section{

        padding-top:130px;
        padding-bottom:70px;

    }

    .hero-content h1{

        font-size:52px;

    }

    .hero-content p{

        font-size:18px;

    }

    .trust-grid{

        grid-template-columns:1fr;

    }

}