:root {
    --color-primary: #1A1A1A;
    /* Charcoal Black */
    --color-secondary: #F5F5F5;
    /* Ice White */
    --color-accent: #FF6F61;
    /* Creative Coral */
    --color-text-dark: #1A1A1A;
    --color-text-light: #FFFFFF;

    --font-heading: 'Montserrat', sans-serif;
    --font-body: 'Inter', sans-serif;
}

html,
body {
    max-width: 100%;
    overflow-x: hidden !important;
}

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

body {
    font-family: var(--font-body);
    background-color: var(--color-secondary);
    color: var(--color-text-dark);
    line-height: 1.6;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-heading);
    font-weight: 700;
}

h1.logo,
h2.logo,
h3.logo,
h4.logo,
h5.logo,
h6.logo,
.logo {
    /* Added .logo to the selector for broader application */
    display: flex;
    align-items: center;
}

.logo img {
    height: 50px;
    width: auto;
    display: block;
}

a {
    text-decoration: none;
    color: inherit;
    transition: color 0.3s ease;
}

/* Utilities */
.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.btn {
    display: inline-block;
    padding: 12px 24px;
    background-color: var(--color-accent);
    color: var(--color-text-light);
    font-weight: 600;
    border-radius: 4px;
    border: none;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

.btn:hover {
    background-color: #e65a4d;
    transform: translateY(-2px);
}

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

/* Header */
header,
footer,
section {
    width: 100%;
    max-width: 100vw;
}

header {
    background-color: var(--color-primary);
    color: var(--color-text-light);
    padding: 20px 0;
    position: sticky;
    top: 0;
    z-index: 1000;
}

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

.logo {
    font-size: 1.5rem;
    font-weight: 700;
    font-family: var(--font-heading);
}

.nav-links {
    display: flex;
    gap: 30px;
    list-style: none;
}

.nav-link,
.navbar a,
.nav-links a {
    font-family: 'Manrope', sans-serif !important;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 14px;
    letter-spacing: 1px;
    color: #F5F5F5;
    transition: color 0.3s ease;
}

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

.lang-switch {
    background: transparent;
    border: 1px solid var(--color-text-light);
    color: var(--color-text-light);
    padding: 5px 10px;
    cursor: pointer;
    border-radius: 4px;
}

/* Hero Section */
.hero {
    background-color: var(--color-primary);
    background-image: url('hero-bg.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: var(--color-text-light);
    min-height: 60vh;
    /* Changed from height to min-height */
    /* Removed max-height constraint */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    /* Added vertical padding */
    text-align: center;
}

.hero.portfolio-hero {
    background-image: url('portfolio-bg.jpg');
    position: relative;
    /* Ensure text is readable on this bg too */
}

.hero.portfolio-hero::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 1;
}

.hero.portfolio-hero:hover::after {
    opacity: 1;
}

.hero.portfolio-hero>* {
    position: relative;
    z-index: 2;
}

.hero h1 {
    font-size: 3.5rem;
    margin-bottom: 20px;
    line-height: 1.2;
    /* Better line height for wrapping text */
}

.hero p {
    font-size: 1.2rem;
    margin-bottom: 40px;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

/* Mobile Hero Adjustments */
@media (max-width: 768px) {
    .hero {
        padding: 100px 20px 60px;
        /* Added more top padding for fixed header/nav */
        min-height: auto;
        /* Let content dictate height on very small screens if needed, or keep min-height */
    }

    .hero h1 {
        font-size: 2rem;
        /* Smaller font for mobile */
    }

    .hero p {
        font-size: 1rem;
    }
}

/* Footer */
footer {
    background-color: var(--color-primary);
    color: var(--color-text-light);
    padding: 40px 0;
    text-align: center;
}

/* Carousel Styles */
.carousel {
    position: relative;
    width: 100%;
    max-width: 800px;
    margin: 0 auto 40px;
    overflow: hidden;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.carousel-track-container {
    overflow: hidden;
}

.carousel-track {
    display: flex;
    transition: transform 0.5s ease-in-out;
    padding: 0;
    list-style: none;
}

.carousel-slide {
    min-width: 100%;
    height: 370px;
    /* Reduced from 400px to crop bottom watermark */
    background-color: #333;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.5rem;
    overflow: hidden;
    /* Ensure overflow hidden as requested */
}

.carousel-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    padding: 10px 15px;
    cursor: pointer;
    font-size: 1.5rem;
    z-index: 10;
    transition: background 0.3s;
}

.carousel-btn:hover {
    background: rgba(0, 0, 0, 0.8);
}

.carousel-btn.prev {
    left: 10px;
}

.carousel-btn.next {
    right: 10px;
}

.carousel-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Anchor to top to crop bottom */
}

.video-slide {
    background-color: #000000;
    position: relative;
}

.video-cover-link {
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
    text-decoration: none;
}

.video-cover-image {
    width: 100%;
    height: 100%;
    background-image: url('celebration-4.jpg');
    /* Placeholder */
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    transition: opacity 0.3s ease;
}

.video-cover-link:hover .video-cover-image {
    opacity: 0.8;
}

.video-play-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60px;
    height: 60px;
    background-color: #FF6F61;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    transition: transform 0.3s ease;
    z-index: 2;
}

.video-cover-link:hover .video-play-button {
    transform: translate(-50%, -50%) scale(1.1);
}

.video-play-button svg {
    width: 24px;
    height: 24px;
    fill: white;
    margin-left: 4px;
    /* Optical centering for play triangle */
}

/* Contact Form Styles */
.contact-form {
    text-align: left;
    width: 100%;
}

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

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

.form-group input,
.form-group textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-family: var(--font-body);
    font-size: 1rem;
    transition: border-color 0.3s;
}

.form-group input:focus,
.form-group textarea:focus {
    border-color: var(--color-accent);
    outline: none;
}

.form-group textarea {
    resize: vertical;
    min-height: 150px;
}

.error-message {
    color: #d32f2f;
    font-size: 0.875rem;
    margin-top: 5px;
    display: none;
}

.input-error {
    border-color: #d32f2f !important;
}

.success-message {
    background-color: #FFF5F5;
    color: #FF6F61;
    border: 1px solid #FF6F61;
    padding: 15px;
    border-radius: 4px;
    margin-bottom: 20px;
    display: none;
    text-align: center;
    font-weight: 600;
}

/* Portfolio Card Styles */
/* Portfolio Section Titles */
.section-title-wrapper {
    text-align: center;
    margin-bottom: 60px;
}

.portfolio-section-title {
    display: inline-block;
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--color-primary);
    border-bottom: 3px solid var(--color-accent);
    padding-bottom: 15px;
    margin-top: 20px;
}

/* About Split Section */
.about-split-section {
    background-color: #1A1A1A;
    color: #FFFFFF;
    position: relative;
    overflow: hidden;
}

.about-split-container {
    display: flex;
    flex-direction: column;
    min-height: 80vh;
    /* Ensure significant height */
}

@media (min-width: 992px) {
    .about-split-container {
        flex-direction: row;
        align-items: center;
        /* Center vertically if needed, or stretch */
        height: 80vh;
    }
}

.about-image-side {
    flex: 1;
    width: 100%;
    height: 400px;
    /* Mobile height */
    position: relative;
}

@media (min-width: 992px) {
    .about-image-side {
        height: 100%;
        width: 50%;
    }
}

.about-image-side img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.about-content-side {
    flex: 1;
    padding: 60px 40px;
    background: radial-gradient(circle at center, #2A2A2A 0%, #1A1A1A 70%);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

@media (min-width: 992px) {
    .about-content-side {
        padding: 80px;
        width: 50%;
    }
}

/* New Footer Styles */
.site-footer {
    background-color: #1F1F1F;
    color: #F5F5F5;
    border-top: 4px solid #FF6F61;
    padding: 80px 0;
}

.footer-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
}

@media (min-width: 768px) {
    .footer-grid {
        grid-template-columns: 1.5fr 1fr 1fr;
        /* Adjust ratios as needed */
        gap: 60px;
    }
}

.footer-brand p {
    color: #CCCCCC;
    margin-top: 15px;
    font-size: 0.9rem;
    max-width: 300px;
}

.footer-links h4 {
    color: #FFFFFF;
    margin-bottom: 20px;
    font-family: 'Montserrat', sans-serif;
    font-size: 1.1rem;
}

.footer-links ul {
    list-style: none;
}

.footer-links li {
    margin-bottom: 15px;
}

.footer-links a {
    color: #F5F5F5;
    font-family: 'Manrope', sans-serif;
    text-transform: uppercase;
    font-weight: 500;
    font-size: 0.9rem;
    letter-spacing: 0.5px;
    transition: color 0.3s ease;
}

.footer-links a:hover {
    color: #FF6F61;
}

.footer-social h4 {
    color: #FFFFFF;
    margin-bottom: 20px;
    font-family: 'Montserrat', sans-serif;
    font-size: 1.1rem;
}

.footer-social-icons {
    display: flex;
    gap: 20px;
    margin-bottom: 30px;
}

.footer-copyright {
    color: #888888;
    font-size: 0.85rem;
    border-top: 1px solid #333;
    padding-top: 20px;
    margin-top: 20px;
}

/* Review Card Styles */
.reviews-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

.review-card {
    background-color: #1A1A1A;
    border: 1px solid #333333;
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    position: relative;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.review-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);
}

.review-quote-icon {
    position: absolute;
    top: 20px;
    left: 20px;
    width: 40px;
    height: 40px;
    fill: #FF6F61;
    opacity: 0.2;
    z-index: 0;
}

.review-stars {
    display: flex;
    gap: 5px;
    margin-bottom: 20px;
    position: relative;
    z-index: 1;
}

.review-stars svg {
    width: 18px;
    height: 18px;
    fill: #FF6F61;
}

.review-text {
    font-family: 'Inter', sans-serif;
    font-style: italic;
    font-size: 16px;
    color: #F5F5F5;
    margin-bottom: 20px;
    line-height: 1.6;
    position: relative;
    z-index: 1;
}

.review-author {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 14px;
    text-transform: uppercase;
    color: #FFFFFF;
    position: relative;
    z-index: 1;
}

.case-study {
    margin-bottom: 60px;
}

.case-study-card {
    background: white;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.case-study-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
}

.case-study-image {
    width: 100%;
    /* Enforce 16:9 aspect ratio */
    aspect-ratio: 16 / 9;
    max-height: 400px;
    background-color: #333;
    /* Placeholder color */
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.5);
    font-size: 1.2rem;
    overflow: hidden;
}

.case-study-image img {
    width: 100%;
    height: calc(100% + 25px);
    /* Increase height to offset bottom crop for watermarks */
    object-fit: cover;
    object-position: top center;
    /* Align top, cropping bottom */
    transition: transform 0.5s ease;
}

.case-study-card:hover .case-study-image img {
    transform: scale(1.05);
}

.case-study-details {
    padding: 30px;
}

/* Floating Action Button (FAB) */
.fab {
    position: fixed;
    bottom: 30px;
    right: 30px;
    background-color: var(--color-accent);
    color: var(--color-text-light);
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 15px 25px;
    border-radius: 50px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    font-weight: 600;
    z-index: 1000;
    transition: transform 0.3s ease, background-color 0.3s ease;
}

.fab:hover {
    transform: translateY(-5px) scale(1.05);
    background-color: #e65a4d;
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3);
}

.fab svg {
    width: 20px;
    height: 20px;
}

/* Contact Page New Layout */
.contact-split {
    background-color: #f9f9f9;
}

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

@media (min-width: 768px) {
    .contact-grid {
        grid-template-columns: 1fr 1fr;
        gap: 60px;
        align-items: center;
    }
}

.contact-bio {
    text-align: center;
}

.contact-bio .profile-pic {
    width: 250px;
    height: 250px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 20px;
    border: 5px solid white;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.contact-bio h2 {
    font-size: 2.5rem;
    margin-bottom: 15px;
    color: var(--color-primary);
}

.contact-bio p {
    font-size: 1.1rem;
    line-height: 1.6;
    max-width: 400px;
    margin: 0 auto;
}

.contact-form-wrapper {
    background: white;
    padding: 40px;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

.contact-form-wrapper h2 {
    margin-bottom: 10px;
    color: var(--color-primary);
}

/* Idea Generator Section */
#content-tool {
    position: relative;
    overflow: hidden;
}

#content-tool::before {
    content: '';
    position: absolute;
    top: -50px;
    left: -50px;
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, rgba(255, 111, 97, 0.2) 0%, rgba(26, 26, 26, 0) 70%);
    border-radius: 50%;
    z-index: 0;
}

.generator-tool {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    position: relative;
    z-index: 0;
}

/* ============================
   Mobile Navigation & Hamburger
   ============================ */

/* Hamburger Icon - Hidden on modify desktop, visible on mobile */
.hamburger {
    display: none;
    cursor: pointer;
    z-index: 1002;
    /* Above the menu overlay */
}

.hamburger span {
    display: block;
    width: 25px;
    height: 3px;
    margin: 5px auto;
    background-color: var(--color-text-light);
    transition: all 0.3s ease-in-out;
}

/* Media Query for Mobile Navigation */
@media (max-width: 768px) {
    .hamburger {
        display: block;
    }

    /* Hide the language toggle on mobile if needed or adjust position. 
       For now we keep it but it might overlap if not careful. 
       Let's leave it in the flex container for now. */

    .nav-links {
        position: fixed;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100vh;
        background-color: #1A1A1A;
        /* Solid Charcoal Black */
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 40px;
        transition: left 0.3s ease-in-out;
        z-index: 1001;
        /* Below hamburger, above everything else */
        padding: 20px;
        opacity: 0.98;
        /* Slightly less than 1 to look nice but opaque per request "opaque (not transparent)" 0.98 is basically opaque */
    }

    .nav-links.active {
        left: 0;
    }

    .nav-links li {
        width: 100%;
        text-align: center;
    }

    .nav-links a {
        font-family: 'Manrope', sans-serif !important;
        font-size: 24px;
        /* Large font size */
        font-weight: 700;
        color: #F5F5F5;
        display: block;
        padding: 10px;
    }

    /* Hamburger Animation to X */
    .hamburger.toggle span:nth-child(1) {
        transform: translateY(8px) rotate(45deg);
    }

    .hamburger.toggle span:nth-child(2) {
        opacity: 0;
    }

    .hamburger.toggle span:nth-child(3) {
        transform: translateY(-8px) rotate(-45deg);
    }

    /* Adjust Lang Switch position if necessary on mobile */
    .lang-switch {
        /* If we want to move it inside the menu we'd need HTML changes. 
           Currently it sits in the nav bar. */
        margin-left: auto;
        margin-right: 20px;
    }
}

@media (min-width: 600px) {
    .generator-tool {
        flex-direction: row;
        justify-content: center;
    }

    #generator-input {
        margin-bottom: 0 !important;
        border-top-right-radius: 0 !important;
        border-bottom-right-radius: 0 !important;
    }

    #generator-btn {
        border-top-left-radius: 0 !important;
        border-bottom-left-radius: 0 !important;
    }
}

.generator-card {
    background-color: #333;
    padding: 25px;
    border-radius: 12px;
    text-align: left;
    position: relative;
    border: 1px solid #444;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.generator-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
    border-color: var(--color-accent);
}

.generator-card h4 {
    color: var(--color-accent);
    margin-bottom: 20px;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.generator-card p {
    color: white;
    font-size: 1.1rem;
    line-height: 1.4;
    padding-right: 20px;
}

.result-copy-btn {
    position: absolute;
    top: 20px;
    right: 20px;
    background: none;
    border: none;
    color: #888;
    cursor: pointer;
    transition: color 0.2s;
}

.result-copy-btn:hover {
    color: white;
}

/* Gift FAB */
.gift-fab {
    position: fixed;
    bottom: 20px;
    left: 20px;
    background-color: #FFFFFF;
    color: #FF6F61;
    padding: 12px 20px;
    border-radius: 50px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    display: flex;
    align-items: center;
    gap: 10px;
    z-index: 2147483647 !important;
    cursor: pointer;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 0.9rem;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    animation: bounceIn 1s ease;
}

.gift-fab:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
}

.gift-fab-icon {
    width: 24px;
    height: 24px;
    stroke: #FF6F61;
    /* Ensure stroke color is applied if overridden */
    flex-shrink: 0;
}

.gift-fab-close {
    position: absolute;
    top: -8px;
    right: -8px;
    background: #FF6F61;
    color: white;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    opacity: 0;
    transition: opacity 0.3s;
}

.gift-fab:hover .gift-fab-close {
    opacity: 1;
}

@keyframes bounceIn {

    0%,
    20%,
    40%,
    60%,
    80%,
    100% {
        transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    }

    0% {
        opacity: 0;
        transform: scale3d(.3, .3, .3);
    }

    20% {
        transform: scale3d(1.1, 1.1, 1.1);
    }

    40% {
        transform: scale3d(.9, .9, .9);
    }

    60% {
        opacity: 1;
        transform: scale3d(1.03, 1.03, 1.03);
    }

    80% {
        transform: scale3d(.97, .97, .97);
    }

    100% {
        opacity: 1;
        transform: scale3d(1, 1, 1);
    }
}

@media (max-width: 600px) {
    .gift-fab {
        bottom: 80px;
        /* Avoid overlap with right FAB on mobile if stacked, or just generally move up */
        left: 20px;
    }
}

/* Footer Social Icons */
.custom-footer-social {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.custom-footer-social svg {
    fill: #F5F5F5;
    transition: fill 0.3s ease;
}

.custom-footer-social:hover svg {
    fill: #FF6F61 !important;
}

@media (max-width: 768px) {
    .footer-social-container {
        justify-content: center;
        margin-top: 20px;
    }
}

/* Bilingual Toggle Logic */
body.lang-es .lang-en {
    display: none !important;
}

body.lang-en .lang-es {
    display: none !important;
}

.legal-disclaimer {
    font-family: 'Inter', sans-serif;
    font-style: italic;
    font-size: 13px;
    color: #666666;
    text-align: center;
    margin-top: 50px;
    margin-bottom: 50px;
}