:root {
    --gold: #FFD700;
    --gold-dark: #B8860B;
    --gold-light: #F0E68C;
    --black: #121212;
    --dark-gray: #1E1E1E;
    --light-gray: #F5F5F5;
    --white: #FFFFFF;
    --text-color: #333333;
    --text-light: #CCCCCC;
    --font-heading: 'Playfair Display', serif;
    --font-body: 'Lato', sans-serif;
    --transition: all 0.3s ease;
}

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

body {
    font-family: var(--font-body);
    background-color: var(--white);
    color: var(--text-color);
    line-height: 1.6;
    overflow-x: hidden;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-heading);
    color: var(--black);
    margin-bottom: 1rem;
}

a {
    text-decoration: none;
    color: inherit;
    transition: var(--transition);
}

ul {
    list-style: none;
}

img {
    max-width: 100%;
    display: block;
}

/* Utilities */
.container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1rem;
}

.text-gold {
    color: var(--gold);
}

.btn {
    display: inline-block;
    padding: 12px 30px;
    background: transparent;
    border: 2px solid var(--gold);
    color: var(--gold);
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    transition: var(--transition);
    border-radius: 4px;
    /* Slightly rounded for modern feel */
}

.btn:hover {
    background: var(--gold);
    color: var(--black);
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.4);
}

.btn-primary {
    background: linear-gradient(45deg, var(--gold-dark), var(--gold));
    color: var(--black);
    border: none;
}

.btn-primary:hover {
    background: linear-gradient(45deg, var(--gold), var(--gold-light));
    transform: translateY(-2px);
}

.section-padding {
    padding: 80px 0;
}

.section-title {
    text-align: center;
    font-size: 2.5rem;
    margin-bottom: 3rem;
    position: relative;
    padding-bottom: 1rem;
}

.section-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--gold), transparent);
}

/* Header */
header {
    background-color: rgba(18, 18, 18, 0.95);
    color: var(--white);
    padding: 1rem 0;
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 1000;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(10px);
}

nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo a {
    display: flex;
    align-items: center;
    text-decoration: none;
}

.logo img {
    height: 75px;
    /* Increased size */
    margin-right: 15px;
    border-radius: 50%;
    /* Circular modern look */
    border: 2px solid rgba(255, 215, 0, 0.3);
    /* Subtle gold border */
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.2);
    transition: all 0.3s ease;
}

.logo:hover img {
    transform: rotate(5deg) scale(1.05);
    box-shadow: 0 0 25px rgba(255, 215, 0, 0.4);
}

.logo span {
    font-family: var(--font-heading);
    font-size: 1.8rem;
    font-weight: 700;
    /* Luxury Gold Gradient Text */
    background: linear-gradient(to right, #FFF, #FFD700, #B8860B, #FFD700, #FFF);
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    letter-spacing: 1px;
    animation: goldShine 3s linear infinite;
}

@keyframes goldShine {
    to {
        background-position: 200% center;
    }
}

.nav-links {
    display: flex;
    gap: 2rem;
}

.nav-links a {
    color: var(--white);
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    position: relative;
}

.nav-links a::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: -5px;
    left: 0;
    background-color: var(--gold);
    transition: var(--transition);
}

.nav-links a:hover {
    color: var(--gold);
}

.nav-links a:hover::after {
    width: 100%;
}

.burger {
    display: none;
    cursor: pointer;
}

.burger div {
    width: 25px;
    height: 3px;
    background-color: var(--gold);
    margin: 5px;
    transition: var(--transition);
}

/* Hero Section */
.hero {
    height: 100vh;
    /* Rich radial gradient overlay for depth */
    background: radial-gradient(circle at center, rgba(0, 0, 0, 0.4) 0%, rgba(18, 18, 18, 0.9) 100%), url('https://images.unsplash.com/photo-1616394584238-638e54e43729?q=80&w=2670&auto=format&fit=crop');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--white);
    margin-top: 0;
}

.hero-content {
    max-width: 900px;
    padding: 3rem;
    /* Glassmorphism effect */
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 215, 0, 0.1);
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    animation: fadeInUp 1s ease-out;
}

.hero h1 {
    font-size: 4rem;
    margin-bottom: 1.5rem;
    /* Golden Text Gradient with Shine */
    background: linear-gradient(to right, #FFF, #FFD700, #B8860B, #FFD700, #FFF);
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: none;
    /* Remove shadow to make gradient pop */
    letter-spacing: 2px;
    animation: goldShine 3s linear infinite;
}

.hero p {
    font-size: 1.3rem;
    margin-bottom: 2.5rem;
    color: var(--light-gray);
    font-weight: 300;
}

/* Services */
.services {
    background-color: var(--light-gray);
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
}

.service-card {
    background: var(--white);
    text-align: center;
    /* Keep centered for text, or left if preferred */
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    transition: var(--transition);
    position: relative;
    overflow: hidden;
    padding: 0;
    /* Remove padding from card itself to let image flush */
    display: flex;
    flex-direction: column;
}

.service-img {
    height: 200px;
    overflow: hidden;
}

.service-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.service-card:hover .service-img img {
    transform: scale(1.1);
}

.service-info {
    padding: 1.5rem;
}

.service-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(184, 134, 11, 0.15);
    /* Golden shadow */
}

/* Remove old before pseudo-element or keep it at bottom */
.service-card::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, var(--gold-dark), var(--gold));
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 0.4s ease;
}

.service-card:hover::after {
    transform: scaleX(1);
}

.service-card h3 {
    font-size: 1.4rem;
    margin-bottom: 0.5rem;
    color: var(--black);
}

/* About Section */
.about {
    background-color: var(--black);
    color: var(--white);
}

.about-content {
    display: flex;
    flex-direction: column;
    /* Mobile first, override in media query */
    gap: 3rem;
    align-items: center;
}

.about-text {
    flex: 1;
}

.about-text h3 {
    color: var(--gold);
    margin-bottom: 1rem;
}

.about-image {
    flex: 1;
    position: relative;
}

.about-image img {
    border-radius: 8px;
    border: 2px solid var(--gold);
    box-shadow: -15px 15px 0 rgba(184, 134, 11, 0.2);
}

/* Footer */
footer {
    background-color: var(--black);
    color: var(--text-light);
    padding: 3rem 0 1rem;
    border-top: 1px solid rgba(255, 215, 0, 0.2);
}

.footer-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    margin-bottom: 2rem;
}

.footer-section h4 {
    color: var(--gold);
    margin-bottom: 1.5rem;
    font-size: 1.2rem;
}

.social-links {
    display: flex;
    gap: 1rem;
}

.social-links a {
    color: var(--white);
    font-size: 1.5rem;
    transition: var(--transition);
}

.social-links a:hover {
    color: var(--gold);
}

.footer-bottom {
    text-align: center;
    padding-top: 2rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 0.9rem;
}

/* Animations */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Media Queries */
@media (min-width: 768px) {
    .about-content {
        flex-direction: row;
    }

    .section-title {
        font-size: 3rem;
    }

    .hero h1 {
        font-size: 4.5rem;
    }
}

@media (max-width: 768px) {
    body {
        overflow-x: hidden;
    }

    .nav-links {
        position: absolute;
        right: 0px;
        height: 100vh;
        top: 0vh;
        /* adjusted for fixed header */
        background-color: var(--black);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        /* Center items vertically */
        width: 100%;
        /* Full width mobile menu */
        transform: translateX(100%);
        transition: transform 0.5s ease-in;
        z-index: 999;
        /* Below header content but above page */
        padding-top: 3rem;
        /* Space for X icon potentially */
    }

    .nav-links li {
        opacity: 0;
        margin: 1.5rem 0;
    }

    .burger {
        display: block;
        z-index: 1001;
        /* Above nav-links */
    }

    .hero h1 {
        font-size: 2.5rem;
    }

    /* Animation class for JS toggling */
    .nav-active {
        transform: translateX(0%);
    }

    @keyframes navLinkFade {
        from {
            opacity: 0;
            transform: translateX(50px);
        }

        to {
            opacity: 1;
            transform: translateX(0);
        }
    }

    /* Burger Animation */
    .toggle .line1 {
        transform: rotate(-45deg) translate(-5px, 6px);
    }

    .toggle .line2 {
        opacity: 0;
    }

    .toggle .line3 {
        transform: rotate(45deg) translate(-5px, -6px);
    }
}/* Profile Section Styles */
.profile-section {
    padding: 80px 0;
    background-color: var(--color-bg-dark);
    /* Dark background to contrast with About section if it's light, or match styling */
    position: relative;
    overflow: hidden;
}

.profile-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

.profile-content h2 {
    font-size: 3rem;
    /* Match hero heading size or slightly smaller */
    margin-bottom: 1rem;
    background: linear-gradient(to right, #FFF, #FFD700, #B8860B, #FFD700, #FFF);
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: goldShine 3s linear infinite;
    display: inline-block;
}

.profile-title {
    font-size: 1.5rem;
    color: var(--color-gold);
    margin-bottom: 20px;
    font-weight: 300;
    letter-spacing: 1px;
    border-bottom: 1px solid rgba(255, 215, 0, 0.3);
    display: inline-block;
    padding-bottom: 10px;
}

.profile-content p {
    margin-bottom: 20px;
    font-size: 1.1rem;
    line-height: 1.8;
}

.achievements {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin-top: 30px;
}

.achievements span {
    background: rgba(255, 215, 0, 0.1);
    border: 1px solid rgba(255, 215, 0, 0.3);
    padding: 10px 20px;
    border-radius: 30px;
    color: var(--color-gold);
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: all 0.3s ease;
}

.achievements span:hover {
    background: var(--color-gold);
    color: var(--color-bg-dark);
    transform: translateY(-3px);
}

.profile-image {
    position: relative;
}

.profile-image img {
    width: 100%;
    border-radius: 20px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 215, 0, 0.2);
    transition: transform 0.5s ease;
}

.profile-image:hover img {
    transform: scale(1.02);
}

/* Responsive adjustments */
@media (max-width: 900px) {
    .profile-container {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 40px;
    }

    .profile-container .profile-image {
        order: -1;
        /* Show image first on mobile? Or verify preference. Usually text first is better for "Who is she". Let's keep text first or image first? Image first creates connection. Let's try Image first on mobile. */
        order: 1;
        /* Actually standard is text then image in column or image then text. The About section was Grid. */
    }

    .achievements {
        justify-content: center;
    }
}/* Profile Image Gallery */
.profile-image-gallery {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.profile-image-gallery img {
    width: 100%;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 215, 0, 0.2);
    transition: transform 0.5s ease;
    height: 100%;
    object-fit: cover;
}

.profile-image-gallery img:hover {
    transform: scale(1.05);
    z-index: 2;
}

@media (max-width: 768px) {
    .profile-image-gallery {
        grid-template-columns: 1fr;
        /* Stack on mobile */
    }
}