@font-face {
    font-family: 'DMSans';
    src: url('assets/font/DMSans-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'DMSans';
    src: url('../assets/font/DMSans-Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'DMSans';
    src: url('../assets/font/DMSans-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'DMSans';
    src: url('../assets/font/DMSans-MediumItalic.woff2') format('woff2');
    font-weight: 500;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'DMSerifDisplay';
    src: url('../assets/font/DMSerifDisplay-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'DMSerifDisplay';
    src: url('../assets/font/DMSerifDisplay-Italic.woff2') format('woff2');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}
.hero-banner{
    position:relative;
    height:100vh;
    background:url('https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?auto=format&fit=crop&w=1800&q=80') center center/cover no-repeat;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
}

.hero-overlay{
    position:absolute;
    inset:0;
    background:rgba(0,0,0,.45);
}

.hero-content{
    position:relative;
    z-index:2;
    max-width:900px;
    width:90%;
    text-align:center;
    color:#fff;
}

.hero-content h1{
    font-size:30px;
    line-height:1.2;
    font-weight:700;
    margin-bottom:25px;
}

.hero-content h1 span{
    font-style:italic;
    font-family:Georgia, serif;
    font-weight:500;
}

.hero-content p{
    font-size:30px;
    margin-bottom:40px;
    font-weight:500;
}

.hero-btns{
    display:flex;
    justify-content:center;
    gap:18px;
    flex-wrap:wrap;
}

.hero-btn{
    color:#fff;
    text-decoration:none;
    padding:15px 34px;
    border:2px solid rgba(255,255,255,.75);
    transition:.3s;
    font-size:16px;
    font-weight:600;
}

.hero-btn:hover{
    background:#ffffff;
    color:#222;
}

.hero-bottom-strip{
    position:absolute;
    bottom:0;
    left:0;
    width:100%;
    background:#0d4f45;
    z-index:5;
}

.hero-strip-wrap{
    max-width:1400px;
    margin:auto;
    display:flex;
    justify-content:center;
    align-items:center;
    flex-wrap:wrap;
    gap:16px;
    padding:18px 20px;
    color:#fff;
    font-weight:600;
    font-size:15px;
}

.hero-strip-wrap span:nth-child(even){
    color:#d6aa54;
}

.hero-strip-wrap a{
    color:#fff;
    text-decoration:none;
    font-weight:700;
}

.scroll-arrow{
    position:absolute;
    right:70px;
    bottom:130px;
    width:90px;
    height:90px;
    background:#c78d32;
    clip-path:polygon(50% 0%,100% 100%,50% 80%,0% 100%);
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    font-size:30px;
    text-decoration:none;
    z-index:6;
}

@media(max-width:991px){

.hero-banner{
    height:700px;
}

.hero-content h1{
    font-size:40px;
}

.hero-content p{
    font-size:24px;
}

.scroll-arrow{
    width:70px;
    height:70px;
    right:25px;
    bottom:120px;
}

}

@media(max-width:767px){

.hero-banner{
    height:650px;
}

.hero-content h1{
    font-size:30px;
}

.hero-content p{
    font-size:20px;
}

.hero-btns{
    flex-direction:column;
    align-items:center;
}

.hero-btn{
    width:280px;
}

.hero-strip-wrap{
    font-size:14px;
    line-height:1.8;
}

}