/* Root color palette - light and sober */
:root {
    --bg: #f5f7f8; /* page background */
    --card-bg: #ffffff;
    --text: #22313a; /* dark slate for headings & body text */
    --muted: #6b7a83; /* muted text */
    --accent: #7da5b8; /* sober blue-gray accent */
    --nav-bg: #ffffff;
    --nav-text: #22313a;
    --nav-border: #e6eaed;
}

html {
    font-size: 14px;
}

@media (min-width:768px) {
    html {
        font-size: 16px;
    }
}

/* Focus states */
.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0000.1rem white,0000.25rem rgba(122,162,184,0.35);
}

/* Page background and base text */
html {
    position: relative;
    min-height: 100%;
}

body {
    margin: 0;
    /*margin-bottom:60px;*/
    background: var(--bg);
    color: var(--text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Navbar styling */
.navbar {
    background: var(--nav-bg) !important;
    border-bottom: 1px solid var(--nav-border);
}

.navbar-brand {
    color: var(--nav-text) !important;
    font-weight: 600;
}

.navbar .nav-link {
    color: var(--nav-text) !important;
    font-weight: 500;
}

    .navbar .nav-link:hover, .navbar .nav-link:focus {
        color: var(--accent) !important;
    }

/* Headings */
h1, h2, h3, h4, h5, h6 {
    color: var(--text);
    font-weight: 600;
}

.lead, p {
    color: var(--muted);
}

/* Card & image tweaks */
.card {
    background: var(--card-bg);
    border: 0;
    box-shadow: 06px18px rgba(34,49,58,0.06);
}

.card-img-top {
    height: 400px;
    object-fit: cover;
}

.price {
    font-weight: 700;
    color: var(--accent);
}

@media (max-width:576px) {
    .card-img-top {
        height: 200px;
    }
}

/* Carousel - full page slider */
.carousel, .carousel-item, .carousel-item img {
    height: 100vh;
}

   
    .carousel-item img {
        width: 100%;
        height: 100vh;
        object-fit: cover;
        filter: brightness(0.72);
    }



.carousel-caption {
    bottom: 10%;
    transform: translateY(0);
}

.carousel-caption-300 {
    bottom: 70%;
    transform: translateY(0);
}

/* Highlighted caption box */
.caption-highlight {
    display: inline-block;
    background: rgba(255,255,255,0.95);
    color: var(--text);
    padding: 1rem1.25rem;
    border-radius: 10px;
    box-shadow: 010px30px rgba(34,49,58,0.12);
    text-align: left;
}

    .caption-highlight h1 {
        margin: 000.25rem0;
        color: wheat;
    }

    .caption-highlight p {
        color: var(--muted);
        margin-bottom: 0.5rem;
    }

.caption-cta {
    background: var(--accent);
    color: white;
    border: none;
}



/* Small screens reduce caption size */
@media (max-width:767px) {
    .caption-highlight {
        padding: 0.75rem1rem;
        max-width: 90vw;
    }

    .carousel-caption {
        bottom: 10%;
    }

    .carousel-caption-300 {
        bottom: 70%;
    }

    .carousel, .carousel-item, .carousel-item img {
        height: 60vh;
    }
}

/* Footer tweaks */
footer.footer {
    background: transparent;
    border-top: 1px solid rgba(34,49,58,0.04);
    color: var(--muted);
    padding: 1rem0;
}

/* Simple section spacing */
.section {
    padding: 4rem0;
}

/* Utility */
.text-accent {
    color: var(--accent);
}
/* Gallery thumbnails */
.gallery-thumb {
    width: 80px;
    height: 60px;
    object-fit: cover;
    border-radius: 6px;
    border: 1px solid rgba(34,49,58,0.06);
    cursor: zoom-in;
}

/* Viewer image styles */
.viewer-img {
    max-width: 95%;
    max-height: 85vh;
    transition: transform0.15s ease;
    touch-action: none;
}

.modal .modal-content {
    background: transparent !important;
}

/* Ensure modal body centers properly */
.modal-body {
    padding: 0 !important;
}

/* Keep the caption box small on fullscreen */
.modal .caption {
    max-width: 900px;
}