* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Arial, sans-serif;
}

body {
    background: #f5f5f5;
}

.header {
    background: #222;
    color: white;
    padding: 20px;
    text-align: center;
}

.logo {
    height: 70px;
}

.navbar {
    background: #c9a14a;
    padding: 10px;
    text-align: center;
}

.navbar a {
    color: black;
    text-decoration: none;
    margin: 10px;
    font-weight: bold;
}

.banner {
    background: url('../../images/banner.png') center/cover;
    color: rgb(142, 15, 15);
    padding: 80px 20px;
    text-align: center;
}

.section {
    padding: 50px 20px;
    text-align: center;
    background: white;
    margin: 20px;
    border-radius: 10px;
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px,1fr));
    gap: 15px;
    margin-top: 20px;
}

.services-grid div {
    background: #eee;
    padding: 15px;
    border-radius: 8px;
    font-weight: bold;
}

.gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px,1fr));
    gap: 15px;
}

.gallery img {
    width: 100%;
    border-radius: 10px;
}

.btn {
    display: inline-block;
    padding: 12px 25px;
    background: #c9a14a;
    color: black;
    text-decoration: none;
    border-radius: 25px;
    margin-top: 15px;
    font-weight: bold;
}

.contact {
    background: #222;
    color: white;
}

footer {
    background: black;
    color: white;
    text-align: center;
    padding: 10px;
}
/* Slider */
.slider-container{
    width:100%;
    max-width:900px;
    margin:auto;
    position:relative;
    overflow:hidden;
    border-radius:15px;
    box-shadow:0 0 20px rgba(0,0,0,0.2);
}

.slider{
    display:flex;
    transition:0.7s ease-in-out;
}

.slide{
    min-width:100%;
    height:450px;
    overflow:hidden;
}

.slide img{
    width:100%;
    height:100%;
    object-fit:cover;
}

/* Arrows */
.prev, .next{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    font-size:30px;
    background:rgba(0,0,0,0.6);
    color:white;
    padding:10px 15px;
    cursor:pointer;
    border-radius:50%;
}

.prev{ left:10px; }
.next{ right:10px; }
/* Animated Grid Gallery */
.gallery-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
    gap:20px;
}

.gallery-box{
    width:100%;
    height:220px;
    overflow:hidden;
    border-radius:12px;
    box-shadow:0 0 10px rgba(0,0,0,0.15);
    position:relative;
}

.gallery-box img{
    width:100%;
    height:100%;
    object-fit:cover;
    animation: floatZoom 6s ease-in-out infinite;
}

/* Slight random animation delay */
.gallery-box:nth-child(1) img{ animation-delay:0s; }
.gallery-box:nth-child(2) img{ animation-delay:1s; }
.gallery-box:nth-child(3) img{ animation-delay:2s; }
.gallery-box:nth-child(4) img{ animation-delay:3s; }
.gallery-box:nth-child(5) img{ animation-delay:4s; }

@keyframes floatZoom {
    0%{ transform:scale(1); opacity:1; }
    50%{ transform:scale(1.1); opacity:0.9; }
    100%{ transform:scale(1); opacity:1; }
}
/* Lightbox Preview */
#lightbox{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.9);
    display:none;
    align-items:center;
    justify-content:center;
    z-index:9999;
}

#lightbox img{
    max-width:90%;
    max-height:85%;
    border-radius:10px;
    box-shadow:0 0 20px rgba(255,255,255,0.3);
}

#lightbox .close{
    position:absolute;
    top:20px;
    right:30px;
    font-size:40px;
    color:white;
    cursor:pointer;
}

#lightbox .nav{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    font-size:40px;
    color:white;
    cursor:pointer;
    padding:20px;
}

#lightbox .prev{ left:20px; }
#lightbox .next{ right:20px; }