:root{
      --accent:#0b7b8a;
      --muted:#6b6b6b;
      --max-width:1100px;
    }


body,* {font-family: sans-serif;padding: 0;margin: 0;line-height: 150%;color: #333;}
img{display: block;width: 100%;}
body{background-image: url("./img/hotel_exterior.webp");background-repeat: no-repeat;background-size: 100%;background-attachment: fixed;margin: auto;}
a{text-decoration: none;}
p a{color: blue;font-style: italic;}

 header{
      background: #fff; position:sticky; top:0; z-index:40;
      border-bottom:1px solid #eee;
    }
    .topbar{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:12px 18px;}
    .brand{display:flex; align-items:center;}
    .brand img{height:40px; width:auto}
    nav a{margin-right:20px; text-decoration:none; color:#333; /*font-weight:600;*/ font-size:14px}
    .cta-book{background:var(--accent); color:white; padding:8px 12px; border-radius:8px; text-decoration:none; font-weight:700}

#banner_wrap{height: 90vh;position: relative;}
#banner{background: linear-gradient(to top, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 70%);position: absolute;bottom: 0;height: 100%;width: 100%;display: flex;justify-content: flex-end;flex-direction: column;padding: 5% 0;text-align: center;}

#banner img{border-radius: 100%;width: 80px;margin:0 auto;padding-bottom: 24px;}
#banner h1{color: #c69e2b;font-size: 24px;text-align: center;font-weight: 400;}
#banner p{font-size: 16px;color: #333;max-width: 500px;
  margin: 24px auto;font-style: italic;padding:0 24px;}


main{background-color: #fff;padding: 24px;padding-bottom: 100px;max-width: 1000px;margin: auto;}
h2{font-size: 20px;color: #16b8c3;font-weight: 400;margin: 24px 0;}

main ul{list-style-type: none;}
main li{/*margin-left: 24px;*/}

#whyBrizoParadiso h2, #gallery_title{color: #c69e2b;}


#gallery_wrap{display: flex;flex-direction: row;flex-wrap: nowrap;gap: 12px;padding:0 24px;/*justify-content: center;*/overflow-x: scroll;padding-left: 0;}

.img_wrap{flex-basis: 10%;min-width: 170px;border-radius: 24px;overflow: auto;/*box-shadow: 0px 0px 5px #666;*/opacity: 0.9;position: relative;}


.img_wrap::after {
  box-shadow: inset 0px 0px 15px 0 #f2f2f2;
  content: '';
  display: block;
  height: 100%;
  position: absolute;
  top: 0;
  width: 100%;
}


#price h2{color: #16b8c3;}
#price p{font-size: 20px;font-weight: bold;}
#price p span{font-size: 16px;font-weight: normal;}

form{padding: 24px 0;}
form input, form textarea{width: calc(100% - 48px);margin:12px auto;padding:6px 12px;border-radius: 10px;background-color: #fdefc9;border: none;resize: none;}

#submitbut{background-color: #16b8c3;color: #fff;padding: 6px 12px;border-radius: 12px;border: none;}

#contact_details h3{margin-top: 24px;font-size: 16px;font-weight: bold;}

@media (min-width: 1000px) {
body{background-image: none;}
#banner_wrap{height: unset;}
#banner{position: unset;}
}

 @media (max-width:900px){
nav{display:none}
.cta-book{background:var(--accent); color:white; padding:8px 12px; border-radius:8px; text-decoration:none; font-weight:400;font-size: 14px;}
 
#nameLine{font-size: 14px;}
#nameSubLine{font-size: 14px;}
 }


@media (max-width:560px){
  .brand img{height:32px}
}