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

.hero{
    background:red !important;
}

.hero {

    position: relative;
    overflow: hidden;
    background: #12355A;
    padding: 90px 0;

}

.overlay {

    position: absolute;
    inset: 0;

    background: linear-gradient(
        90deg,
        rgba(15,39,66,.92) 0%,
        rgba(15,39,66,.75) 45%,
        rgba(15,39,66,.20) 100%
    );

    z-index: 1;

}

.hero-grid {

    position: relative;
    z-index: 2;

    display: grid;
    grid-template-columns: 1fr 1.15fr;
    gap: 70px;

    align-items: center;

}

.hero-content {

    color: #fff;

}

.hero-tag {

    display: inline-block;

    margin-bottom: 25px;

    padding: 10px 18px;

    border-radius: 50px;

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

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

    font-size: .85rem;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: 2px;

}

.hero h1 {

    margin-bottom: 30px;

    font-size: clamp(3rem,6vw,5rem);

    line-height: 1.05;

    font-weight: 800;

}

.hero h1 strong {

    display: block;

    color: var(--secondary);

}

.hero p {

    max-width: 620px;

    margin-bottom: 40px;

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

    font-size: 1.15rem;

    line-height: 1.9;

}

.hero-buttons {

    display: flex;

    gap: 18px;

    flex-wrap: wrap;

}

.hero-image {

    position: relative;

}

.hero-image img {

    width: 100%;

    height: 780px;

    object-fit: cover;

    border-radius: 28px;

    box-shadow: 0 40px 80px rgba(0,0,0,.35);

}

.btn-secondary {

    padding: 15px 28px;

    border-radius: 50px;

    border: 2px solid rgba(255,255,255,.25);

    color: #fff;

    transition: .30s;

}

.btn-secondary:hover {

    background: #fff;

    color: var(--primary);

}

@media (max-width:992px){

.hero{

padding:70px 0;

}

.hero-grid{

grid-template-columns:.95fr 1.35fr;

}

.hero-image{

order:-1;

}

.hero-image img{

height:420px;

}

.hero h1{

font-size:3rem;

}

}

@media (max-width:768px){

.hero{

padding:50px 0;

}

.hero-image img{

height:300px;

}

.hero p{

font-size:1rem;

}

.hero-buttons{

flex-direction:column;

}

.hero-buttons a{

width:100%;
text-align:center;

}

}