/* FemmeStorm Website Styles - Edit these styles to customize your site */

/* CSS Variables - Edit these to change colors and fonts across your entire site */
:root {
    /* Custom color scheme - edit these values */
    --primary-color: #000000;              /* Black text */
    --secondary-color: #000000;            /* Black text */
    --accent-color: #4c1d95;               /* Deep purple accent for emphasis */
    --text-dark: #000000;                  /* Black text color */
    --text-light: #7f8c8d;                 /* Light gray text */
    --text-white: #ffffff;                 /* White text */
    --background-light: #ecf0f1;           /* Light gray background */
    --background-white: #fefbf3;           /* Pale yellow background */
    --border-color: #bdc3c7;               /* Light gray border */
    
    /* Modern minimal typography */
    --font-primary: 'Times New Roman', Times, serif;
    --font-secondary: 'Times New Roman', Times, serif;
    
    /* Generous spacing for minimalist design */
    --container-max-width: 1200px;
    --section-padding: 120px 0;
    --border-radius: 0;
}

/* Reset and base styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--font-primary);
    line-height: 1.6;
    color: var(--text-dark);
    background-color: var(--background-white);
    font-size: 1.4rem;
    letter-spacing: 0.02em;
}

/* Container for centering content */
.container {
    max-width: var(--container-max-width);
    margin: 0 auto;
    padding: 0 20px;
}

/* Left Sidebar Navigation */
.navbar {
    background-color: #fefbf3;
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: 140px;
    z-index: 1000;
    padding: 15px 0;
}

.nav-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    height: 100%;
    padding: 0 20px;
}

/* Minimal logo */
.nav-logo {
    margin-bottom: 25px;
}

.nav-logo a {
    font-size: 34px;
    font-weight: normal;
    color: var(--text-dark);
    text-decoration: none;
    font-family: 'Source Code Pro', 'Courier New', monospace;
    letter-spacing: -0.02em;
}

/* Clean navigation menu */
.nav-menu {
    display: flex;
    flex-direction: column;
    list-style: none;
    gap: 12px;
    align-items: flex-start;
}

.nav-link {
    color: var(--secondary-color);
    text-decoration: none;
    font-weight: normal;
    font-size: 1.2rem;
    transition: color 0.2s ease;
    letter-spacing: 0.02em;
    font-family: 'American Typewriter', 'Courier New', monospace;
}

.nav-link:hover,
.nav-link.active {
    color: var(--text-dark);
}

/* Main content area */
.main-content {
    margin-left: 140px; /* Account for left sidebar */
    position: relative;
}

/* Vertical gradient lines for all pages */
.main-content::before {
    content: '';
    position: fixed;
    top: 0;
    left: 140px;
    width: 50vw;
    height: 100vh;
    background: linear-gradient(
        90deg,
        rgba(199, 164, 185, 0.392) 0px,
        rgba(199, 164, 185, 0.35) 3px,
        rgba(199, 164, 185, 0.25) 6px,
        rgba(199, 164, 185, 0.2) 12px,
        rgba(199, 164, 185, 0.15) 25px,
        rgba(199, 164, 185, 0.1) 40px,
        rgba(199, 164, 185, 0.05) 70px,
        transparent 120px
    );
    pointer-events: none;
    z-index: 1;
}

/* Vertical stripes for photos page only */
.photos-page .main-content::before {
    background: repeating-linear-gradient(
        90deg,
        rgba(199, 164, 185, 0.3) 0px,
        rgba(199, 164, 185, 0.3) 2px,
        transparent 2px,
        transparent 8px,
        rgba(199, 164, 185, 0.25) 8px,
        rgba(199, 164, 185, 0.25) 10px,
        transparent 10px,
        transparent 18px,
        rgba(199, 164, 185, 0.2) 18px,
        rgba(199, 164, 185, 0.2) 20px,
        transparent 20px,
        transparent 30px,
        rgba(199, 164, 185, 0.15) 30px,
        rgba(199, 164, 185, 0.15) 32px,
        transparent 32px,
        transparent 45px,
        rgba(199, 164, 185, 0.1) 45px,
        rgba(199, 164, 185, 0.1) 47px,
        transparent 47px,
        transparent 65px
    );
}

/* Remove gradient/stripes from all pages */
.main-content::before {
    display: none;
}

/* Show navbar on home page with transparent background and repositioned */
.home-page .navbar {
    display: block;
    background-color: transparent;
    position: fixed;
    top: 30%;
    left: 60px;
    width: auto;
    height: auto;
    transform: translateY(-50%);
    z-index: 20;
}

/* Hide navbar logo on home page and show centered title */
.home-page .nav-logo {
    display: none;
}

/* Remove left margin on home page so background covers full width */
.home-page .main-content {
    margin-left: 0;
    padding: 0;
    position: relative;
}

/* Style the title link */
.title-link {
    position: fixed;
    top: 80px;
    left: 48%;
    transform: translateX(-50%);
    z-index: 21;
    font-size: 34px;
    font-weight: normal;
    color: var(--text-dark);
    text-decoration: none;
    font-family: 'Source Code Pro', 'Courier New', monospace;
    letter-spacing: -0.02em;
    transition: opacity 0.2s ease;
}

.title-link:hover {
    opacity: 0.7;
}

/* Show nav menu on home page and position vertically */
.home-page .nav-menu {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: flex-start;
    margin-top: 0;
    list-style: none;
}

/* Clean page headers */
.page-header {
    background: var(--background-white);
    color: var(--text-dark);
    padding: 120px 0 80px;
    text-align: center;
}

.page-title {
    font-size: 2.8rem;
    font-family: var(--font-primary);
    margin-bottom: 20px;
    font-weight: normal;
    letter-spacing: -0.02em;
}

.page-description {
    font-size: 1.4rem;
    color: var(--secondary-color);
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.6;
}

/* Full background image layout */
.fullscreen-background {
    position: relative;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    margin: 0;
    padding: 0;
}

.text-background-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.text-background-img {
    width: 28%;
    max-width: 500px;
    height: auto;
    object-fit: contain;
    object-position: center;
    opacity: 1;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* Floating images */
.floating-images {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 5;
    pointer-events: none;
}

.floating-image {
    position: absolute;
    pointer-events: auto;
    transition: transform 0.3s ease;
}

.floating-image:hover {
    transform: scale(1.05);
}

.floating-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 0px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}

/* Position floating images */
.floating-image-1 {
    top: 25%;
    right: 13%;
    width: 270px;
    height: 397.5px;
    transform: rotate(0deg);
}

.floating-image-2 {
    top: 60%;
    right: 20%;
    width: 233.09px;
    height: 314.6px;
    transform: rotate(0deg);
}

.overlay-content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
    pointer-events: none;
}

.ig-handle-overlay {
    position: absolute;
    bottom: 30px;
    right: 30px;
    font-family: 'Times New Roman', serif;
    font-size: 1.1rem;
    color: white;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
    letter-spacing: 0.02em;
    font-weight: normal;
    pointer-events: auto;
}

/* Left navigation text */
.left-nav-text {
    position: absolute;
    left: 60px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 15px;
    z-index: 10;
}

.nav-text-item {
    font-family: 'Times New Roman', serif;
    font-size: 1.6rem;
    color: var(--text-dark);
    font-weight: bold;
    letter-spacing: 0.02em;
}

.nav-text-item.spacing {
    margin-top: 40px;
}

/* Central floral illustration */
.central-floral {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-30%, -50%);
    z-index: 2;
}

.floral-svg {
    width: 350px;
    height: 350px;
    opacity: 0.8;
}

/* Red star elements */
.star-element {
    position: absolute;
    z-index: 5;
}

.star-element svg {
    width: 100%;
    height: 100%;
    opacity: 0.9;
}

.star-top-left {
    top: 80px;
    left: 180px;
    width: 50px;
    height: 50px;
    transform: rotate(-15deg);
}

.star-bottom-left {
    bottom: 200px;
    left: 120px;
    width: 40px;
    height: 40px;
    transform: rotate(25deg);
}

.star-bottom-right {
    width: 45px;
    height: 45px;
    transform: rotate(-10deg);
    margin-bottom: 20px;
}

/* Photography section */
.photo-section {
    position: absolute;
    right: 80px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 30px;
    z-index: 10;
}

.main-photo {
    position: relative;
    filter: grayscale(100%) contrast(1.2);
}

.portrait-img {
    width: 280px;
    height: 380px;
    object-fit: cover;
    border: 2px solid #000;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}

.photo-label {
    position: absolute;
    bottom: -30px;
    right: 0;
    background: white;
    padding: 8px 15px;
    font-family: 'Times New Roman', serif;
    font-size: 1.4rem;
    font-weight: bold;
    border: 2px solid #000;
    letter-spacing: 0.05em;
}

.film-strip {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-right: 40px;
}

.film-img {
    width: 180px;
    height: 120px;
    object-fit: cover;
    filter: grayscale(100%) contrast(1.2);
    border: 1px solid #000;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    position: relative;
}

.film-img::before {
    content: '';
    position: absolute;
    left: -8px;
    top: 0;
    bottom: 0;
    width: 8px;
    background: repeating-linear-gradient(
        to bottom,
        #000 0px,
        #000 2px,
        transparent 2px,
        transparent 6px
    );
}

.film-img::after {
    content: '';
    position: absolute;
    right: -8px;
    top: 0;
    bottom: 0;
    width: 8px;
    background: repeating-linear-gradient(
        to bottom,
        #000 0px,
        #000 2px,
        transparent 2px,
        transparent 6px
    );
}

/* Bottom right elements */
.bottom-right {
    position: absolute;
    bottom: 60px;
    right: 80px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    z-index: 10;
}

.ig-handle {
    font-family: 'Times New Roman', serif;
    font-size: 1.1rem;
    color: var(--text-dark);
    letter-spacing: 0.02em;
    font-weight: normal;
}

/* Bottom social links matching photo design */
.artistic-footer {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 0;
    background: transparent;
    z-index: 15;
}

.bottom-social-links {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 100px;
    align-items: center;
}

.bottom-social-link {
    font-family: 'Times New Roman', serif;
    font-size: 1.2rem;
    color: var(--text-dark);
    text-decoration: none;
    letter-spacing: 0.02em;
    font-weight: normal;
    transition: opacity 0.2s ease;
}

.bottom-social-link:hover {
    opacity: 0.7;
}

/* Responsive design for fullscreen background */
@media (max-width: 768px) {
    .ig-handle-overlay {
        bottom: 20px;
        right: 20px;
        font-size: 1rem;
    }
}

@media (max-width: 480px) {
    .ig-handle-overlay {
        bottom: 15px;
        right: 15px;
        font-size: 0.9rem;
    }
}

/* Minimal hero section - keep for other pages */
.hero {
    background: var(--background-white);
    color: var(--text-dark);
    text-align: center;
    min-height: 70vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 40px;
}

/* Full screen hero image */
.hero-fullscreen {
    min-height: 100vh;
    padding: 0;
    margin: 0;
}

.hero-image {
    width: 100%;
    height: 100vh;
    position: relative;
    overflow: hidden;
}

.hero-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* Light green background for info page */
.info-page {
    background-color: #dbd9c9 !important;
}

/* Info page navbar color to match */
.info-page .navbar {
    background-color: #dbd9c9;
}

/* Blog page navbar and footer color to match white background */
.blog-page .navbar {
    background-color: #ffffff;
}

.blog-page .footer {
    background-color: #ffffff;
}

/* Social star shapes */
.social-stars {
    position: absolute;
    bottom: 80px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    display: flex;
    gap: 80px;
}

.star-container {
    position: relative;
}

.star-shape {
    width: 160px;
    height: 160px;
    background-color: #fefbf3;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(10px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
    transition: transform 0.3s ease;
}

.star-shape:hover {
    transform: scale(1.1);
}

/* Position stars at different angles */
.star-instagram {
    transform: rotate(-20deg);
}

.star-spotify {
    transform: rotate(0deg);
}

.star-linkedin {
    transform: rotate(20deg);
}

.star-link {
    color: var(--text-dark);
    text-decoration: none;
    font-size: 0.9rem;
    font-family: var(--font-primary);
    font-weight: 500;
    text-align: center;
    transition: color 0.2s ease;
    transform: rotate(0deg); /* Keep text horizontal */
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.star-instagram .star-link {
    transform: rotate(20deg) translateX(-8px); /* Counter-rotate text and move left */
}

.star-spotify .star-link {
    transform: rotate(0deg); /* Keep text straight */
}

.star-linkedin .star-link {
    transform: rotate(-20deg); /* Counter-rotate text */
}

.star-link:hover {
    color: var(--accent-color);
}

.hero-title {
    font-size: 2.8rem;
    font-family: var(--font-primary);
    margin-bottom: 60px;
    font-weight: normal;
    letter-spacing: -0.02em;
}

.hero-description {
    font-size: 1.4rem;
    margin-bottom: 80px;
    color: var(--secondary-color);
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.6;
}

.hero-buttons {
    display: flex;
    gap: 60px;
    justify-content: center;
    flex-wrap: wrap;
}

/* Minimal button styles */
.btn {
    display: inline-block;
    text-decoration: none;
    font-weight: normal;
    transition: color 0.2s ease;
    border: none;
    cursor: pointer;
    font-size: 1.4rem;
    background: transparent;
    padding: 0;
}

.btn-primary {
    color: var(--secondary-color);
}

.btn-primary:hover {
    color: var(--text-dark);
}

.btn-secondary {
    background-color: transparent;
    color: var(--text-white);
    border: 2px solid var(--text-white);
}

.btn-secondary:hover {
    background-color: var(--text-red);
    color: var(--primary-color);
}

/* Section styles */
section {
    padding: var(--section-padding);
}

.section-title {
    text-align: center;
    font-size: 2.5rem;
    font-family: var(serif);
    margin-bottom: 50px;
    color: var(--text-dark);
}

/* Featured section (home page) */
.featured {
    background-color: var(--background-light);
}

.featured-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 30px;
}

.featured-item {
    background-color: var(--background-white);
    border-radius: var(--border-radius);
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    transition: transform 0.3s ease;
}

.featured-item:hover {
    transform: translateY(-5px);
}

.featured-image img {
    width: 100%;
    height: 250px;
    object-fit: cover;
}

.featured-content {
    padding: 25px;
}

.featured-content h3 {
    font-size: 1.5rem;
    margin-bottom: 15px;
    color: var(--text-dark);
}

.featured-link {
    color: var(--primary-color);
    text-decoration: none;
    font-weight: 600;
}

.featured-link:hover {
    color: var(--secondary-color);
}

/* Gallery styles (photos page) */
.gallery-filters {
    text-align: center;
    margin-bottom: 50px;
}

.filter-btn {
    background: transparent;
    border: 2px solid var(--border-color);
    padding: 10px 20px;
    margin: 0 10px;
    border-radius: var(--border-radius);
    cursor: pointer;
    transition: all 0.3s ease;
}

.filter-btn.active,
.filter-btn:hover {
    background-color: var(--primary-color);
    color: var(--text-white);
    border-color: var(--primary-color);
}

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

.gallery-item {
    position: relative;
    border-radius: var(--border-radius);
    overflow: hidden;
}

.gallery-image {
    position: relative;
    overflow: hidden;
}

.gallery-image img {
    width: 100%;
    height: 300px;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.gallery-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(45deg, var(--primary-color), var(--secondary-color));
    opacity: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.3s ease;
}

.gallery-item:hover .gallery-overlay {
    opacity: 0.9;
}

.gallery-item:hover .gallery-image img {
    transform: scale(1.1);
}

.gallery-info {
    text-align: center;
    color: var(--text-white);
}

.gallery-actions {
    text-align: center;
    margin-top: 50px;
}

/* Blog styles */
.blog-post {
    background-color: var(--background-white);
    margin-bottom: 50px;
    border-radius: var(--border-radius);
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.post-image {
    width: 100%;
    height: 400px;
    object-fit: cover;
}

.post-content {
    padding: 30px;
}

.post-meta {
    display: flex;
    gap: 20px;
    margin-bottom: 15px;
    font-size: 14px;
    color: var(--text-light);
}

.post-category {
    color: var(--primary-color);
    font-weight: 600;
}

.post-title a {
    color: var(--text-dark);
    text-decoration: none;
    font-size: 1.8rem;
    font-family: var(--font-secondary);
}

.post-title a:hover {
    color: var(--primary-color);
}

.post-excerpt {
    margin: 20px 0;
    color: var(--text-light);
    line-height: 1.7;
}

.read-more-btn {
    color: var(--primary-color);
    text-decoration: none;
    font-weight: 600;
}

.blog-pagination {
    text-align: center;
    margin-top: 50px;
    display: flex;
    gap: 20px;
    justify-content: center;
}

/* Newsletter section */
.newsletter {
    background-color: var(--background-light);
    text-align: center;
}

.newsletter-form {
    display: flex;
    max-width: 400px;
    margin: 20px auto 0;
    gap: 10px;
}

.newsletter-input {
    flex: 1;
    padding: 12px;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    font-size: 16px;
}

/* Modelling page styles */
.bio-section {
    background-color: var(--background-light);
}

.bio-content {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 50px;
    align-items: center;
}

.bio-image img {
    width: 100%;
    border-radius: var(--border-radius);
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}

.bio-text h2 {
    font-size: 2rem;
    margin-bottom: 20px;
    color: var(--text-dark);
    font-family: var(--font-secondary);
}

.bio-text p {
    margin-bottom: 20px;
    line-height: 1.7;
    color: var(--text-light);
}

.bio-details ul {
    list-style: none;
    margin: 20px 0;
}

.bio-details li {
    margin-bottom: 10px;
    color: var(--text-light);
}

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

/* Portfolio grid */
.portfolio-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 25px;
}

.portfolio-item {
    position: relative;
    border-radius: var(--border-radius);
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.portfolio-image img {
    width: 100%;
    height: 350px;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.portfolio-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: linear-gradient(transparent, rgba(0,0,0,0.8));
    padding: 30px 20px 20px;
    transform: translateY(100%);
    transition: transform 0.3s ease;
}

.portfolio-item:hover .portfolio-overlay {
    transform: translateY(0);
}

.portfolio-item:hover .portfolio-image img {
    transform: scale(1.05);
}

.portfolio-info {
    color: var(--text-white);
}

/* Experience section */
.experience-section {
    background-color: var(--background-light);
}

.experience-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
}

.experience-item {
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--border-color);
}

.experience-item h4 {
    color: var(--primary-color);
    font-size: 1.2rem;
    margin-bottom: 5px;
}

.experience-year {
    color: var(--text-light);
    font-weight: 600;
    margin-bottom: 10px;
}

.clients-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}

.client-item {
    background-color: var(--background-white);
    padding: 15px;
    border-radius: var(--border-radius);
    text-align: center;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

/* Contact section */
.contact-section {
    background-color: var(--background-white);
}

.contact-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
}

.contact-details {
    margin: 20px 0;
}

.contact-item {
    margin-bottom: 15px;
    color: var(--text-light);
}

/* Contact form */
.contact-form {
    background-color: var(--background-light);
    padding: 30px;
    border-radius: var(--border-radius);
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    margin-bottom: 5px;
    font-weight: 600;
    color: var(--text-dark);
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    font-size: 16px;
    font-family: var(--font-primary);
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px rgba(233, 30, 99, 0.2);
}

/* Minimal footer styles */
.footer {
    background-color: #fefbf3;
    color: var(--secondary-color);
    padding: 80px 40px;
    text-align: center;
    border-top: 1px solid var(--border-color);
    margin-top: 120px;
}

/* Remove footer margin on home page - target body containing hero-fullscreen */
body:has(.hero-fullscreen) .footer {
    margin-top: 0;
}

.footer-content {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 40px;
    max-width: 600px;
    margin: 0 auto;
}

.footer-content p {
    font-size: 1.4rem;
    margin: 0;
}

.social-links {
    display: flex;
    gap: 60px;
}

.social-link {
    color: var(--secondary-color);
    text-decoration: none;
    transition: color 0.2s ease;
    font-size: 1.4rem;
}

.social-link:hover {
    color: var(--text-dark);
}

/* Responsive Design - Styles for different screen sizes */

/* Tablet styles */
@media (max-width: 768px) {
    .navbar {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: auto;
        border-right: none;
        border-bottom: 1px solid var(--border-color);
        padding: 15px 0;
    }
    
    .nav-container {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        height: auto;
        padding: 0 20px;
    }
    
    .nav-logo {
        margin-bottom: 0;
    }
    
    .nav-menu {
        flex-direction: row;
        gap: 20px;
    }
    
    .main-content {
        margin-left: 0;
        margin-top: 80px; /* Account for top nav on mobile */
    }
    
    .hero-title {
        font-size: 2.5rem;
    }
    
    .page-title {
        font-size: 2rem;
    }
    
    .bio-content,
    .contact-content,
    .experience-content {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    
    .featured-grid,
    .gallery-grid,
    .portfolio-grid {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    }
    
    .newsletter-form {
        flex-direction: column;
        max-width: 300px;
    }
    
    .hero-buttons {
        flex-direction: column;
        align-items: center;
    }
    
    .bio-actions {
        flex-direction: column;
    }
    
    .footer-content {
        flex-direction: column;
        gap: 20px;
    }
    
    .clients-list {
        grid-template-columns: 1fr;
    }
}

/* Responsive text background image */
@media (max-width: 768px) {
    .text-background-img {
        width: 45%;
        max-width: 400px;
    }
}

@media (max-width: 480px) {
    .text-background-img {
        width: 60%;
        max-width: 300px;
    }
}

/* Mobile styles */
@media (max-width: 480px) {
    .container {
        padding: 0 15px;
    }
    
    .nav-container {
        padding: 10px 15px;
        flex-direction: column;
        gap: 15px;
    }
    
    .nav-menu {
        flex-wrap: wrap;
        justify-content: center;
    }
    
    .main-content {
        margin-top: 120px; /* Account for taller mobile nav */
    }
    
    .hero {
        padding: 80px 0;
    }
    
    .hero-title {
        font-size: 2rem;
    }
    
    .page-title {
        font-size: 1.8rem;
    }
    
    .section-title {
        font-size: 2rem;
    }
    
    section {
        padding: 50px 0;
    }
    
    .featured-grid,
    .gallery-grid,
    .portfolio-grid {
        grid-template-columns: 1fr;
    }
    
    .gallery-filters {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }
    
    .filter-btn {
        margin: 5px;
        padding: 8px 15px;
    }
    
    .blog-pagination {
        flex-direction: column;
        align-items: center;
    }
}

/* Utility classes - handy classes you can use */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

.mb-20 { margin-bottom: 20px; }
.mb-30 { margin-bottom: 30px; }
.mb-40 { margin-bottom: 40px; }

.mt-20 { margin-top: 20px; }
.mt-30 { margin-top: 30px; }
.mt-40 { margin-top: 40px; }

/* Custom scrollbar */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: var(--background-light);
}

::-webkit-scrollbar-thumb {
    background: var(--primary-color);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--secondary-color);
}