*{
box-sizing:border-box
}

html{
-webkit-text-size-adjust:100%;
scroll-behavior:smooth
}

body{
margin:0;
font-family:Arial,Helvetica,sans-serif;
background:#f5f8fb;
color:#17324a
}

.header{
height:60px;
padding:0 5%;
display:flex;
align-items:center;
justify-content:space-between;
background:#fff;
border-bottom:1px solid #e5edf3;
position:sticky;
top:0;
z-index:50
}

.logo{
font-size:19px;
font-weight:900;
color:#123f68;
text-decoration:none
}

nav{
display:flex;
gap:18px
}

nav a{
font-size:12px;
font-weight:700;
color:#526b80;
text-decoration:none
}

.hero{
width:min(1120px,94%);
margin:35px auto 20px;
display:grid;
grid-template-columns:1fr 440px;
gap:30px;
align-items:center
}

.hero h1{
font-size:clamp(28px,5vw,48px);
line-height:1.05;
margin:0;
color:#103b61
}

.hero p{
font-size:15px;
line-height:1.6;
color:#657b8d
}

.booking{
background:#fff;
padding:22px;
border-radius:18px;
border:1px solid #dce7ef;
box-shadow:0 12px 35px rgba(20,60,90,.08)
}

.field{
margin-bottom:12px
}

.field label{
display:block;
font-size:10px;
font-weight:800;
margin-bottom:5px;
color:#61798d
}

.field input,
.booking input{
width:100%;
height:52px;
border:1px solid #d6e2eb;
border-radius:10px;
padding:0 13px;
font-size:14px
}

.booking button{
width:100%;
height:52px;
border:0;
border-radius:10px;
background:#07568d;
color:#fff;
font-size:14px;
font-weight:800
}

.prices,
.destinations,
.page{
width:min(1120px,94%);
margin:25px auto
}

.prices h2,
.destinations h2{
font-size:24px;
margin-bottom:14px
}

.price-grid{
display:grid;
grid-template-columns:repeat(6,1fr);
gap:10px
}

.price-card{
background:#fff;
border:1px solid #dce7ef;
border-radius:13px;
padding:16px 10px;
text-align:center
}

.price-card strong{
display:block;
font-size:12px;
color:#526b80
}

.price-card b{
display:block;
font-size:26px;
margin:7px 0;
color:#07568d
}

.price-card small{
font-size:9px;
color:#8798a5
}

.destination-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:9px
}

.destination-grid a{
padding:15px;
background:#fff;
border:1px solid #dce7ef;
border-radius:11px;
text-decoration:none;
color:#24445e;
font-weight:700
}

footer{
margin-top:50px;
padding:35px 5%;
background:#123f68;
color:#fff
}

footer p{
color:#c9d8e5;
font-size:12px
}

@media(max-width:850px){

nav a:nth-child(n+4){
display:none
}

.hero{
grid-template-columns:1fr;
margin-top:20px
}

.price-grid{
grid-template-columns:repeat(3,1fr)
}

.destination-grid{
grid-template-columns:repeat(2,1fr)
}

}

@media(max-width:520px){

.header{
height:54px;
padding:0 13px
}

nav{
gap:9px
}

nav a{
font-size:9px
}

.hero{
width:calc(100% - 20px);
margin-top:14px;
gap:12px
}

.hero h1{
font-size:26px
}

.hero p{
font-size:12px
}

.booking{
padding:14px;
border-radius:14px
}

.price-grid{
grid-template-columns:repeat(2,1fr)
}

.price-card{
padding:13px 7px
}

.price-card b{
font-size:23px
}

.prices,
.destinations,
.page{
width:calc(100% - 20px)
}

.destination-grid{
grid-template-columns:1fr
}

}