@import url('https://fonts.googleapis.com/css2?family=PT+Sans:ital,wght@0,400;0,700;1,400;1,700&display=swap');
html{scroll-behavior: smooth;}
body{font-family: 'PT Sans', sans-serif; font-size: 18px; padding: 0; margin: 0; background: #eef1f3;}
h2{font-size: 48px; font-weight: bold; margin: 50px 0 0;}
p{margin: 20px 0;}
table, td, th{border: 0;}

.body-container{display: flex; flex-direction: column; justify-content: center; align-items: center;}
.bg{width: 100%; height: 100vh; min-height: 720px; filter: brightness(80%) sepia(0.5);}
.bg img{display: block; width: 100%; height: 100%; object-fit: cover;}
.head{position: absolute; top: 80px; left: 10%;}

.head .name{font-weight: bold; color: #fff; margin: 0 0 80px;}
.head .name .title{font-size: 80px; margin: 0 0 0 -3px;}
.head .name .description{font-size: 25px; margin: -17px 0 0;}

.menu{display: block; font-size: 20px; margin: 0 0 0 -34px;}
.menu .item{width: fit-content; margin: 10px 0;}
.menu .item img{width: 24px; margin: 0 10px 0 0; opacity: 0;}
.menu a{display: flex; align-items: center; color: #fff; text-decoration: none; transition: color 0.3s, opacity 0.3s;}
.menu a:hover img{opacity: 1;}

.cc{display: flex; align-items: center; margin: 80px 0 0;}
.cc .item{margin: 0 20px 0 0;}

.tracks{display: flex; width: 984px; margin: 50px 0 0;}
.tracks .item{width: 50%; margin: 0 0 0 20px; position: relative; background: #fff; border-radius: 20px;}
.tracks .item .title{font-size: 25px; font-weight: bold; margin: 0 20px;}
.tracks .item .length{font-size: 15px; margin: 20px;}
.tracks .item .image{width: 100%; border-radius: 20px; margin: 0 0 20px; overflow: hidden; aspect-ratio: 16/9}
.tracks .item .image img{display: block; width: 100%; height: 100%; object-fit: cover;}
.tracks .item .description{margin: 0 20px 20px;}
.tracks .first{margin: 0 20px 0 0;}
.tracks .status{position: absolute; top: 0; left: 0; font-size: 15px; font-weight: bold; color: #fff; background: #8bc34a; border-radius: 10px 0 10px 0; padding: 5px 15px;}
.tracks .close{background: #f44336;}

.lifts{display: flex; width: 984px; flex-direction: row-reverse; margin: 50px 0 0;}
.lifts .image{width: 60%; margin: 0 0 0 30px; aspect-ratio: 16/9; border-radius: 20px; overflow: hidden;}
.lifts .image img{display: block; width: 100%; height: 100%; object-fit: cover;}
.lifts .description{width: 40%;}

.btn{display: block; width: fit-content; padding: 10px 15px; color: #fff; background: #f44336; border-radius: 10px; text-decoration: none;}
.btn:hover{background: #d93b2f;}

.rental{display: flex; flex-direction: column; width: 984px; margin: 50px 0 0; text-align: center;}
.rental .btn{display: unset; }

.instructors{display: flex; width: 100%; margin: 50px 0; overflow: hidden;}
.instructors .item{width: 320px; min-width: 320px; height: fit-content; margin: 0 20px 0 0; text-align: center; background: #fff; border-radius: 20px;}
.instructors .item .image{width: 100%; margin: 0 0 20px; border-radius: 20px; aspect-ratio: 9/16; overflow: hidden;}
.instructors .item .image img{display: block; width: 100%; height: 100%; object-fit: cover;}
.instructors .item .name{font-size: 25px; font-weight: bold;}
.instructors .item .spec{margin: 20px 20px;}
.instructors .item .phone{margin: 0 0 20px;}
.instructors .item .phone a:hover{text-decoration: none;}
.instructors .first{margin: 0 20px;}

.widget{display: flex; align-items: center; background: #d7ecf5; padding: 20px 40px; margin: 0; border-radius: 25px; font-weight: bold; color: #333; text-decoration: none;}
.widget .image{margin: 0 0 0 20px;}

.price{width: 984px; margin: 50px 0 0;}
.price table{width: 100%; background: #fff; border: 1px solid #bdc7cb; table-layout: fixed; border-collapse: collapse; border-spacing: 0;}
.price td{width: calc(100% / 3); padding: 5px 10px; border: 1px solid #bdc7cb; text-align: center;}
.price thead td{background: #e8edf1;}

.contacts{margin: 50px 0 0;}
.contacts .item{margin: 0 0 10px;}
.contacts .value{text-align: center;}
.contacts .flex a{display: flex; justify-content: center;}
.contacts .flex a img{display: block; margin: 0 3px 0 0;}

.map{width: 100%; height: 600px; margin: 50px 0 0;}

@media screen and (max-width: 1024px){
    .bg{min-height: 620px;}
    .head{width: 80%; top: 40px;}
    .head .name{margin: -15px 0 80px;}
    .head .name .title {font-size: 40px; margin: 0 0 0 -2px;}
    .head .name .description {font-size: 15px; margin: -10px 0 0;}

    .tracks{width: calc(100% - 40px); flex-direction: column;}
    .tracks .item{width: 100%; margin: 0 0 20px;}
    .tracks .item .image{aspect-ratio: 4/3;}
    .tracks .last{margin: 0;}

    .lifts{width: calc(100% - 40px); flex-direction: column;}
    .lifts .image{width: 100%; margin: 0; aspect-ratio: 4/3;}
    .lifts .description{width: 100%;}

    .rental{width: calc(100% - 40px);}

    .instructors{overflow-x: scroll;}
    .instructors::-webkit-scrollbar{width: 0; height: 0}
    .instructors .item .image{aspect-ratio: 3/4;}

    .widget{width: calc(100% - 120px);}

    .price{width: calc(100% - 40px)}
}