body{font-family:var(--content);background:var(--color-body); color: var(--color-dark);}

header { background:url('../img/headerbg.svg') center center no-repeat var(--color-dark); padding:20px 0 }
header .logo img { max-width:220px }

header .center { display:flex; justify-content:space-between; }
header .center .header-right { max-width:500px; display:flex; text-align: right; align-items: center;}
header .center .header-right .address { width:65% }
header .center .header-right .phone { width:35%}
header .center .header-right .phone a { font-weight:700 }
header .center .header-right a:hover { color:var(--color-white);}
header .center .header-right a { font-size:15px; color:var(--color-main); }

.featured img { width:100% }
.featured .overlay { position:absolute; top:0; left:0; right:0; bottom:0; display:flex; align-items:center; }
.featured .overlay .slide-content { max-width:640px; }
.featured .overlay .slide-content h1 { color:var(--color-white); font-weight: 800; font-size: 58px}


.top-box { margin-top:-40px } 
.top-box .box { display:flex; align-items:flex-end; gap:40px; padding:0 40px 0 40px }
.top-box .box .text { padding:60px 0 } 
.top-box .box:nth-child(1) { background:var(--color-main); }
.top-box .box:nth-child(2) { background:var(--color-dark); }
.top-box .box span { font-size:24px; color:var(--color-white); font-weight:800}
.top-box .box p { font-size:14px; color:var(--color-white); font-size:15px }

.bottom-box .box { padding:40px; border:1px solid var(--color-silver); }
.bottom-box .box:hover { border:1px solid var(--color-main); }
.bottom-box .box h3 { font-size:20px }
.bottom-box .box p { font-size:14px; margin: 0}

footer { background:var(--color-dark); padding:80px 0 }
footer .center { display:flex; justify-content: space-between;}
footer .left { width:50%; max-width:400px }
footer .left .logo { max-width:220px; margin-bottom:20px }
footer .left p { color:var(--color-white); font-size:13px }
footer .right { width:50%; text-align: right; max-width: 400px}
footer .right p { font-size:15px; color: var(--color-white); margin-top: 20px}
footer .right a { font-size:20px; color:var(--color-main); font-weight:700}
footer .right a:hover { color:var(--color-white); }

@media only screen and (max-width:999px) {
    header { background:var(--color-dark); padding:20px 0 }
    header .center .header-right .address { display:none; }
    header .center .header-right span { display:none; }
    header .center .header-right .phone a { display:block; position:fixed; width:60px; height:60px; border-radius:60px; line-height:60px; text-align:center; right:30px; bottom:40px; background:var(--color-main); color:var(--color-white); z-index:99; font-size: 20px}
    .featured img { width:100%; height: 60vh; object-fit: cover; object-position: center;}
    .featured .overlay .slide-content h1 { font-size:24px }
    .top-box { margin-top:0 } 
    .top-box .box .image { display:none; }
    .top-box .box .text { padding:30px 0 } 
    .top-box .box span { font-size:18px }
    .top-box .box p { font-size:13px }
    .col-2.gap-80, .col-3.gap-40 { gap:10px }
    .about.p-1-80.p-3-80 { padding-bottom:0 !important }
    footer .center {flex-direction: column;}
    footer .left, footer .right { width:100%; max-width:100%; text-align:center; }
    footer .left { margin-bottom:40px }
}