.hero-landing{
    position: relative;
    overflow: hidden;
    min-height: 700px;
    padding: 0;
    /*border-radius: 30px;*/
    box-shadow: 0 25px 80px rgba(15,23,42,.15);
}
.hero-slider{
    position:absolute;
    inset:0;
}

.hero-slider .slide{
    position:absolute;
    inset:0;
    opacity:0;
    transition:opacity .8s ease;
}

.hero-slider .slide.active{
    opacity:1;
    z-index:1;
}

.hero-slider picture,
.hero-slider img{
    width:100%;
    height:100%;
    display:block;
}

.hero-slider img{
    object-fit:cover;
    object-position:center;
}

.hero-landing::before{
    content:"";
    position:absolute;
    inset:0;
    background:rgba(0,0,0,.45);
    z-index:2;
}

.hero-grid{
    position:relative;
    z-index:3;
    min-height:700px;
    display:flex;
    align-items:center;
    width:100%;
}

.hero-copy{
    max-width:700px;
    color:#fff;
}

.hero-copy .eyebrow{
    display:inline-block;
    margin-bottom:15px;
    color:#f97316;
    font-size:15px;
    font-weight:600;
    letter-spacing:2px;
    text-transform:uppercase;
}

.hero-copy h1{
    font-size:clamp(38px,5vw,72px);
    line-height:1.1;
    color:#fff;
    margin-bottom:20px;
    margin-left: 50px;
}

.hero-copy p{
    font-size:18px;
    line-height:1.8;
    color:rgba(255,255,255,.9);
    max-width:620px;
}

.hero-actions{
    display:flex;
    gap:0px;
    margin-top:35px;
    flex-wrap:wrap;
    padding-left: 50px;
}

.btn-primary,
.btn-secondary{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:14px 32px;
    /*border-radius:6px;*/
    text-decoration:none;
    font-weight:600;
    transition:.3s;
}

.btn-primary{
    background:linear-gradient(90deg,#2563eb,#f97316);
    color:#fff;
}

.btn-primary:hover{
    transform:translateY(-3px);
}

.btn-secondary{
    background:#fff;
    color:#111;
}

.btn-secondary:hover{
    background:#f3f3f3;
}

.hero-visual{
    display:none;
}

/* ==========================
   Large Laptop (1200px)
========================== */

@media(max-width:1200px){

.hero-landing,
.hero-grid{
    min-height:620px;
}

.hero-copy{
    max-width:600px;
}

.hero-copy h1{
    font-size:56px;
}

}

/* ==========================
   Laptop
========================== */

@media(max-width:992px){

.hero-landing,
.hero-grid{
    min-height:540px;
}

.hero-grid{
    justify-content:center;
    text-align:center;
    padding:40px;
}

.hero-copy{
    max-width:100%;
    padding-top: 10px;
}

.hero-copy p{
    margin:auto;
}

.hero-actions{
    justify-content:center;
}

.hero-copy h1{
    font-size:46px;
}

.hero-copy p{
    font-size:17px;
}

}

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

@media(max-width:768px){

.hero-landing{
    /*border-radius:20px;*/
}

.hero-landing,
.hero-grid{
    min-height:460px;
}

.hero-grid{
    padding:30px 20px;
}

.hero-copy h1{
    font-size:34px;
    line-height:1.25;
}

.hero-copy p{
    font-size:15px;
    line-height:1.7;
}

.hero-actions{
    gap:12px;
}

.btn-primary,
.btn-secondary{
    padding:12px 24px;
    font-size:15px;
}

}

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

@media(max-width:576px){

.hero-landing,
.hero-grid{
    min-height:400px;
}

.hero-copy h1{
    font-size:28px;
}

.hero-copy p{
    font-size:14px;
    margin-top:10px;
}

.hero-actions{
    flex-direction:column;
    width:100%;
}

.btn-primary,
.btn-secondary{
    width:100%;
    padding:14px;
}

}

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

@media(max-width:600px){

.hero-landing,
.hero-grid{
    min-height:600px;
}

.hero-copy .eyebrow{
    font-size:12px;
    padding-top: -100px;
}

.hero-copy h1{
    font-size:25px;
}

.hero-copy p{
    display:none;
}

.btn-primary,
.btn-secondary{
    font-size:14px;
    padding:12px;
    margin-left: -10px;
}

}