/* Kaomi Photography – Full Stylesheet */
:root {
    --primary-color: #3a7bd5;
    --secondary-color: #00d2ff;
    --text-color: #333;
    --light-bg: #f8f9fa;
    --dark-bg: #333;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 2rem;
    --border-radius: 8px;
    --transition: all 0.3s ease;
}

* { margin:0; padding:0; box-sizing:border-box; }

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1.6;
    color: var(--text-color);
    padding-bottom: 60px;
}

.container { width:100%; max-width:1200px; margin:0 auto; padding:0 var(--spacing-md); }

/* Header & Nav */
header {
    background: linear-gradient(to right, var(--primary-color), var(--secondary-color));
    color: white;
    padding: var(--spacing-md);
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
.header-content { display:flex; justify-content:space-between; align-items:center; }
.logo { font-size:1.5rem; font-weight:bold; text-decoration:none; color:white; display:flex; align-items:center; }
.logo i { margin-right:var(--spacing-sm); }
.hamburger { display:none; cursor:pointer; background:none; border:none; color:white; font-size:1.5rem; }

nav {
    display:flex; justify-content:center; padding:var(--spacing-md) 0;
    background:white; box-shadow:0 2px 5px rgba(0,0,0,0.05);
}
nav a {
    margin:0 var(--spacing-md); text-decoration:none; color:var(--text-color);
    font-weight:500; position:relative; padding:var(--spacing-sm); transition:var(--transition);
}
nav a:hover { color:var(--primary-color); }
nav a::after {
    content:''; position:absolute; width:0; height:2px; bottom:0; left:0;
    background:var(--primary-color); transition:var(--transition);
}
nav a:hover::after { width:100%; }

/* Hero */
.hero { text-align:center; padding:var(--spacing-lg) 0; background:var(--light-bg); position:relative; overflow:hidden; }
.hero::before {
    content:''; position:absolute; inset:0;
    background:linear-gradient(45deg, rgba(58,123,213,0.1), rgba(0,210,255,0.1));
}
.hero h2 { font-size:2.5rem; color:var(--primary-color); }
.hero p { font-size:1.2rem; max-width:700px; margin:0 auto; }

/* Sections */
section { padding:var(--spacing-lg) 0; }
section h2 {
    text-align:center; margin-bottom:var(--spacing-lg); color:var(--primary-color);
    position:relative; padding-bottom:var(--spacing-sm);
}
section h2::after {
    content:''; position:absolute; width:50px; height:3px; background:var(--secondary-color);
    bottom:0; left:50%; transform:translateX(-50%);
}

/* Services */
.services-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:var(--spacing-md); }
.service-card {
    background:white; border-radius:var(--border-radius); padding:var(--spacing-md);
    box-shadow:0 3px 10px rgba(0,0,0,0.08); text-align:center; transition:var(--transition);
}
.service-card:hover { transform:translateY(-5px); box-shadow:0 5px 15px rgba(0,0,0,0.1); }
.service-icon { font-size:2.5rem; color:var(--primary-color); margin-bottom:var(--spacing-sm); }

/* Gallery */
.gallery-filters { display:flex; justify-content:center; flex-wrap:wrap; gap:var(--spacing-sm); margin-bottom:var(--spacing-lg); }
.filter-btn {
    padding:8px 16px; background:white; border:1px solid #ddd; border-radius:30px;
    cursor:pointer; transition:var(--transition); font-weight:500;
}
.filter-btn:hover { background:var(--light-bg); }
.filter-btn.active { background:var(--primary-color); color:white; border-color:var(--primary-color); }

.gallery-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:var(--spacing-md); }
.gallery-item {
    position:relative; overflow:hidden; border-radius:var(--border-radius);
    height:250px; cursor:pointer; box-shadow:0 3px 10px rgba(0,0,0,0.1); transition:var(--transition);
}
.gallery-item:hover { transform:translateY(-5px); box-shadow:0 5px 15px rgba(0,0,0,0.15); }
.gallery-item img {
    width:100%; height:100%; object-fit:cover; transition:var(--transition);
}
.gallery-item:hover img { transform:scale(1.05); }
.gallery-overlay {
    position:absolute; bottom:0; left:0; right:0;
    background:linear-gradient(to top,rgba(0,0,0,0.7),transparent);
    padding:var(--spacing-md); color:white; transform:translateY(100%); transition:var(--transition);
}
.gallery-item:hover .gallery-overlay { transform:translateY(0); }

/* Lazy loading */
.lazy-image { opacity:0; transition:opacity 0.3s ease; }
.lazy-image.loaded { opacity:1; }

/* Loading spinner */
.loading { display:none; text-align:center; padding:var(--spacing-lg); }
.loading.active { display:block; }
.spinner {
    width:40px; height:40px; margin:0 auto;
    border:4px solid rgba(0,0,0,0.1); border-radius:50%; border-top-color:var(--primary-color);
    animation:spin 1s ease-in-out infinite;
}
@keyframes spin { to { transform:rotate(360deg); } }

/* Lightbox */
.lightbox {
    position:fixed; inset:0; background:rgba(0,0,0,0.9); display:none;
    justify-content:center; align-items:center; z-index:1000; flex-direction:column;
}
.lightbox.active { display:flex; }
.lightbox-img { max-width:90%; max-height:80vh; border:5px solid white; border-radius:var(--border-radius); }
.lightbox-close {
    position:absolute; top:20px; right:20px; color:white; font-size:2rem;
    background:none; border:none; cursor:pointer; transition:var(--transition);
}
.lightbox-close:hover { color:var(--secondary-color); transform:rotate(90deg); }
.lightbox-nav button {
    background:none; border:none; color:white; font-size:2rem; cursor:pointer; padding:10px;
}
.lightbox-nav button:hover { color:var(--secondary-color); }
.lightbox-caption { color:white; text-align:center; padding:var(--spacing-md); max-width:80%; margin-top:var(--spacing-md); }

/* About & Contact */
.about-content, .contact-container { display:flex; flex-wrap:wrap; gap:var(--spacing-lg); align-items:center; }
.about-text, .contact-info { flex:1; min-width:300px; }
.contact-form { flex:2; min-width:300px; }
.contact-method { display:flex; align-items:center; margin-bottom:var(--spacing-md); }
.contact-icon {
    width:40px; height:40px; background:var(--primary-color); color:white;
    border-radius:50%; display:flex; align-items:center; justify-content:center; margin-right:var(--spacing-md);
}
.form-group { margin-bottom:var(--spacing-md); }
.form-group input, .form-group textarea {
    width:100%; padding:10px; border:1px solid #ddd; border-radius:var(--border-radius); font-family:inherit;
}
.form-group textarea { height:150px; resize:vertical; }
.submit-btn {
    background:linear-gradient(to right,var(--primary-color),var(--secondary-color));
    color:white; border:none; padding:12px 25px; border-radius:var(--border-radius);
    cursor:pointer; transition:var(--transition); font-weight:bold;
}
.submit-btn:hover { transform:translateY(-2px); box-shadow:0 5px 15px rgba(0,0,0,0.1); }

/* Footer */
.footer {
    background:var(--dark-bg); color:white; text-align:center; padding:var(--spacing-md);
    position:fixed; bottom:0; width:100%; z-index:100;
}
.social-icons { display:flex; justify-content:center; gap:var(--spacing-md); margin-bottom:var(--spacing-sm); }
.social-icons a { color:white; font-size:1.2rem; transition:var(--transition); }
.social-icons a:hover { color:var(--secondary-color); transform:translateY(-3px); }

/* Responsive */
@media (max-width:768px) {
    .hamburger { display:block; }
    nav { display:none; flex-direction:column; position:absolute; top:60px; left:0; right:0; background:white; z-index:100; }
    nav.active { display:flex; }
    nav a { margin:0; padding:var(--spacing-md); border-bottom:1px solid #eee; text-align:center; }
    .hero h2 { font-size:2rem; }
    .about-content, .contact-container { flex-direction:column; }
    .gallery-grid { grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); }
    .gallery-item { height:200px; }
}