:root{
    --bg:#fafafa; 
    --card:#ffffff; 
    --muted:#6b7280; 
    --text:#1e2127;
    --accent:#284b63; 
    --radius:10px; --shadow: 0 6px 20px rgba(16,24,40,0.06);
    --focus: 3px solid rgba(0,120,255,0.16);
}

* {
    box-sizing:border-box
}
html,body {
    height:100%;
    width: 100%;;
}
html {
    scroll-behavior: smooth;
}

body{
    margin:0; font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial;
    background:var(--bg); color:var(--text); line-height:1.45; -webkit-font-smoothing:antialiased;
}

.hero {
  position: relative;
  height: 100vh;
  width: 100vw; /* full viewport width */
  max-width: 100%; /* prevent horizontal overflow */
  background: url('../public/images/Img17.JPG') center center / cover no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #fff;
  overflow: hidden;
}

.hero.darkened {
  filter: brightness(0.6); /* darker on scroll */
}


.hero-content h1 {
  font-size: 3rem;
  margin: 0;
  animation: fadeInUp 1s ease forwards;
}

.hero-content p {
  font-size: 1.5rem;
  margin-top: 0.5rem;
  animation: fadeInUp 1.5s ease forwards;
}

.hero-arrow {
  position: absolute;
  bottom: 20px;
  font-size: 2rem;
  color: #fff;
  animation: bounce 2s infinite;
  text-decoration: none;
}

@keyframes fadeInUp {
  0% { opacity: 0; transform: translateY(20px); }
  100% { opacity: 1; transform: translateY(0); }
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
  40% { transform: translateY(-15px); }
  60% { transform: translateY(-7px); }
}


header{
    position:fixed; 
    top:0; 
    left:0; 
    right:0;
    display:flex; 
    align-items:center; 
    justify-content:space-between;
    gap:12px; 
    padding:8px 4.5%; 
    background:var(--card); 
    box-shadow: 0 6px 18px rgba(2,6,23,0.06);
    z-index:1200;
}

h1{
    font-size:16px; 
    margin:0; font-weight:600
}

nav{
    display:flex; 
    gap:12px; 
    align-items:center
}

nav a{
color:var(--muted); 
text-decoration:none; 
font-weight:600; 
font-size:14px;
padding:6px 8px; 
border-radius:8px;
}

nav a:hover{
    color:var(--accent)
}

/* Page layout */
main{
    margin:0 auto;
    /* padding-top:72px;  */
    max-width:1200px;
    padding-left:4.5%;
    padding-right:4.5%;
}

section{
    padding:44px 0;
    border-bottom:1px solid rgba(0,0,0,0.04)
}
h2{
    font-size:22px;margin:0 0 18px;
    border-left:4px solid var(--accent); 
    padding-left:10px
}

/* Offer cards */
.offer-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
    gap:16px}

.card{
    background:var(--card); border-radius:var(--radius); padding:18px; box-shadow:var(--shadow);
}
.card h3{
    margin:0 0 8px;
    font-size:16px
}
.price{
    font-weight:700;
    color:var(--accent)
}

/* Gallery thumbnails: show exactly first 5 thumbnails */
.thumbs{
    display:flex;
    gap:12px;
    align-items:stretch;
    flex-wrap:nowrap;
}
.thumb{
    position:relative; 
    flex:0 0 calc((100% - 4*12px)/5);
    height:140px; 
    overflow:hidden;
    cursor:pointer; 
    display:block; 
    box-shadow: 0 4px 14px rgba(2,6,23,0.06);
    border: none;
}
.thumb img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    transition:transform .25s ease
}

.thumb:focus{
    outline:none; 
}

.thumb:hover img{
    transform:scale(1.03)
}

/* overlay on the 5th thumbnail showing +12 */
.thumb.overlay::after{
    content: attr(data-more);
    position:absolute; 
    inset:0; 
    display:flex; 
    align-items:center; 
    justify-content:center;
    background:linear-gradient(180deg, rgba(3,7,18,0.45), rgba(3,7,18,0.55));
    color:#fff; font-size:22px; font-weight:700;
    backdrop-filter: blur(2px);
}

/* Mobile: convert thumbs into scrollable carousel (still only first 5 visible) */
@media (max-width:768px){
    .thumbs{
        overflow-x:auto; 
        scroll-snap-type:x mandatory; 
        padding-bottom:6px
    }
    .thumb{
        flex:0 0 80%; 
        height:210px; 
        scroll-snap-align:center
    }
    .thumb + .thumb{
        margin-left:12px
    }
}

/* Lightbox */
.lightbox{
    position:fixed; 
    inset:0; 
    display:none; 
    align-items:center;
    justify-content:center;
    background:rgba(3,7,18,0.85); z-index:2000; padding:20px;
}
.lightbox[aria-hidden="false"]{
    display:flex
}
.lb-inner{
    position:relative; 
    max-width:1100px; 
    width:100%; 
    max-height:95vh; 
    display:flex;
    align-items:center;
    justify-content:center
}
.lb-img{
    max-width:100%; 
    max-height:95vh; 
    object-fit:contain; 
    display:block
}
.lb-close, .lb-prev, .lb-next{
    position:absolute; 
    top:50%; 
    transform:translateY(-50%);
    background:rgba(255,255,255,0.06); 
    color:#fff; 
    border:0; 
    width:46px; 
    height:46px;
    border-radius:10px; 
    display:flex; 
    align-items:center; 
    justify-content:center; 
    cursor:pointer;
    backdrop-filter: blur(6px);
}
.lb-prev{
    left:-12px
}
.lb-next{
    right:-12px
}


@media(max-width:760px){
    .lb-prev{left:8px} 
    .lb-next{right:8px}
    .lb-inner{padding:0 20px}
}

/* Contact area two-column layout */
.contact-wrap{
    display:flex;
    gap:18px;
    align-items:flex-start
}
.contact{
    flex:1;background:var(--card);
    padding:18px;
    border-radius:10px;
    box-shadow:var(--shadow)
}
.contact p{
    margin:8px 0;
    color:var(--muted)
}
.map-box{
    flex:1;
    min-width:260px;
    border-radius:10px;
    overflow:hidden;
    box-shadow:var(--shadow)
}
.map-box iframe{
    width:100%;
    height:260px;
    border:0;
    display:block
}
.map-action{
    display:block;
    text-align:center;
    padding:10px 14px;
    background:var(--accent);
    color:#fff;
    text-decoration:none;
    font-weight:700
}
.map-action:focus{
    outline:none; 
    box-shadow:var(--focus)
}

/* Mobile tweaks: make contact & map wider */
@media(max-width:760px){
.contact-wrap{
    flex-direction:column
}
.contact, .map-box{
    width:95%; 
    margin:0 auto
}
.map-box iframe{
    height:220px
}
header{
    padding:10px 4%
}
h2{
    font-size:20px
}
}

footer{
    padding:28px 0;
    color:var(--muted);
    text-align:center
}
.muted{
    color:var(--muted)
}
.small{
    font-size:13px
}
.btn-inline{
    display:inline-block;
    padding:8px 12px;
    border-radius:8px;
    background:var(--accent);
    color:#fff;
    text-decoration:none;
    font-weight:700
}