/*
=================================================================
Fashion Digital Marketing Agency - Pure CSS Stylesheet
Version: 2.0
Theme: Mint & Teal Professional
=================================================================

TABLE OF CONTENTS
-----------------------------------------------------------------
1.  Global Reset & Root Variables
2.  Typography & Basic Styles
3.  Layout & Utility Classes (Container, Grids, Buttons)
4.  Header & Navigation
    4.1. Main Header Styling
    4.2. Desktop Navigation
    4.3. Mobile Navigation
5.  Footer
    5.1. Footer Layout & Styling
    5.2. Footer Content
6.  Component Styling
    6.1. Cards (Service, Testimonial)
    6.2. Section Headings
    6.3. Form Elements
    6.4. Placeholder Elements
7.  Page Sections: Home (index.html)
    7.1. Hero Section
    7.2. Stats Bar
    7.3. Services Section ("What We Offer")
    7.4. About Section ("Who We Are")
    7.5. Testimonials Section
    7.6. ROI Calculator Section
    7.7. Reports Section (Tabs)
    7.8. CTA Section
8.  Page Sections: Other Pages
    8.1. Contact Page Layout
    8.2. Legal Page Layout
9.  Interactive Elements
    9.1. Live Chat Widget
10. Responsive Design
    10.1. Tablet (max-width: 1024px)
    10.2. Mobile (max-width: 768px)
11. Accessibility & Print Styles
-----------------------------------------------------------------
*/

/* 1. Global Reset & Root Variables
-----------------------------------------------------------------*/
:root {
    /* Color Palette (Updated) */
    --primary-color: #FF6F61;
    /* Coral Red */
    --secondary-color: #5F6368;
    /* Charcoal */
    --light-bg-color: #FAF8F5;
    /* Soft Cream */
    --white-color: #FFFFFF;
    --border-color: #DDDDDD;
    --heading-color: #343A40;
    /* Dark Gray */
    --body-text-color: #495057;
    /* Medium Gray */
    --subtle-text-color: #868E96;

    /* Fonts (Updated for contrast) */
    --font-heading: 'Roboto', Arial, sans-serif;
    --font-body: 'Roboto', Arial, sans-serif;

    /* Sizing & Spacing */
    --header-height: 80px;
    --content-max-width: 1200px;
    --border-radius: 12px;
    --section-padding: 80px;

    /* Shadows */
    --card-shadow: 0px 8px 25px rgba(0, 0, 0, 0.05);
    --button-shadow: 0px 3px 12px rgba(255, 111, 97, 0.3);
}


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

html {
    scroll-behavior: smooth;
    font-size: 16px;
    line-height: 1.6;
}

body {
    font-family: var(--font-body);
    color: var(--body-text-color);
    background-color: var(--white-color);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* 2. Typography & Basic Styles
-----------------------------------------------------------------*/
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-heading);
    color: var(--heading-color);
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 1rem;
}

h1 {
    font-size: 3.5rem;
}

h2 {
    font-size: 2.5rem;
}

h3 {
    font-size: 1.5rem;
}

h4 {
    font-size: 1.1rem;
    letter-spacing: 0.5px;
}

p {
    margin-bottom: 1rem;
    max-width: 600px;
    /* Default max-width for readability */
}

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

a:hover {
    color: var(--secondary-color);
}

ul,
ol {
    list-style: none;
}

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

/* 3. Layout & Utility Classes
-----------------------------------------------------------------*/
.container {
    max-width: var(--content-max-width);
    margin: 0 auto;
    padding: 0 20px;
    width: 100%;
}

.section {
    padding: var(--section-padding) 0;
}

.bg-light {
    background-color: var(--light-bg-color);
}

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

.text-center p,
.text-center h2,
.text-center h1 {
    margin-left: auto;
    margin-right: auto;
}

.grid {
    display: grid;
    gap: 30px;
}

.grid-2-cols {
    grid-template-columns: 1fr 1fr;
    align-items: center;
}

.grid-3-cols {
    grid-template-columns: repeat(3, 1fr);
}

/* Button Styles */
.btn {
    display: inline-block;
    padding: 15px 35px;
    font-size: 1rem;
    font-weight: 700;
    border-radius: var(--border-radius);
    border: 2px solid transparent;
    cursor: pointer;
    text-align: center;
    user-select: none;
}

.btn-primary {
    background-color: var(--primary-color);
    color: var(--white-color);
    box-shadow: var(--button-shadow);
}

.btn-primary:hover {
    background-color: #38b2ac;
    /* Slightly darker mint */
    color: var(--white-color);
}

.btn-secondary {
    background-color: var(--white-color);
    color: var(--heading-color);
    border-color: var(--border-color);
}

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

.btn-group {
    display: flex;
    gap: 15px;
    margin-top: 30px;
}

.justify-center {
    justify-content: center;
}

/* 4. Header & Navigation
-----------------------------------------------------------------*/
/* 4.1. Main Header Styling */
.site-header {
    background-color: var(--white-color);
    height: var(--header-height);
    width: 100%;
    position: sticky;
    top: 0;
    z-index: 1000;
    border-bottom: 1px solid var(--border-color);
}

.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
}

.logo img {
    height: 90px;
    width: auto;
}

/* 4.2. Desktop Navigation */
.main-nav {
    display: block;
}

.nav-list {
    display: flex;
    align-items: center;
    gap: 40px;
}

.nav-list a {
    color: var(--body-text-color);
    font-weight: 600;
    padding: 5px 0;
}

.nav-list a.active,
.nav-list a:hover {
    color: var(--primary-color);
}

/* 4.3. Mobile Navigation */
.mobile-menu-button {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    width: 30px;
    height: 24px;
    z-index: 1001;
}

.mobile-menu-button span {
    display: block;
    width: 100%;
    height: 3px;
    background-color: var(--heading-color);
    position: absolute;
    left: 0;
    border-radius: 2px;
}

.mobile-menu-button span:nth-child(1) {
    top: 0;
}

.mobile-menu-button span:nth-child(2) {
    top: 10px;
}

.mobile-menu-button span:nth-child(3) {
    top: 20px;
}

/* Mobile nav open state */
.main-nav.mobile-nav-open {
    display: block;
    position: fixed;
    top: var(--header-height);
    left: 0;
    width: 100%;
    height: calc(100vh - var(--header-height));
    background-color: var(--white-color);
    padding: 40px;
}

.main-nav.mobile-nav-open .nav-list {
    flex-direction: column;
    align-items: center;
    gap: 25px;
}

.main-nav.mobile-nav-open .nav-list a {
    font-size: 1.5rem;
}


/* 5. Footer
-----------------------------------------------------------------*/
/* 5.1. Footer Layout & Styling */
.site-footer {
    background-color: var(--secondary-color);
    color: var(--subtle-text-color);
    padding: 80px 0 0;
}

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

/* 5.2. Footer Content */
.footer-column.about p {
    color: var(--subtle-text-color);
    max-width: 300px;
}

.footer-column .footer-logo {
    margin-bottom: 20px;
}

.footer-column .footer-logo img {
    height: 90px;
}

.footer-column h4 {
    color: var(--white-color);
    margin-bottom: 20px;
    font-size: 1rem;
    font-weight: 600;
}

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

.footer-links a {
    color: var(--subtle-text-color);
}

.footer-links a:hover {
    color: var(--primary-color);
}

.footer-bottom {
    border-top: 1px solid #3c6c66;
    /* Darker shade of secondary */
    padding: 25px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.9rem;
}

.footer-bottom a {
    color: var(--subtle-text-color);
    margin: 0 10px;
}

.footer-bottom a:hover {
    color: var(--primary-color);
}

/* 6. Component Styling
-----------------------------------------------------------------*/
/* 6.1. Cards */
.card {
    background-color: var(--white-color);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 40px;
    box-shadow: var(--card-shadow);
    height: 100%;
}

/* 6.2. Section Headings */
.section-heading {
    text-align: center;
    margin-bottom: 60px;
}

.section-heading .tagline {
    color: var(--primary-color);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 10px;
    display: block;
}

.section-heading h2 {
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.section-heading p {
    margin-top: 15px;
    margin-left: auto;
    margin-right: auto;
}

/* 6.3. Form Elements */
.form-group {
    margin-bottom: 20px;
}

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

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

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(79, 209, 197, 0.3);
}

.form-status-message {
    margin-top: 15px;
    font-weight: 600;
}

/* 6.4. Placeholder Elements */
.illustration-placeholder {
    background-color: var(--light-bg-color);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    color: var(--subtle-text-color);
    font-weight: 600;
}

/* 7. Page Sections: Home (index.html)
-----------------------------------------------------------------*/
/* 7.1. Hero Section */
.hero-section {
    padding-top: 60px;
    padding-bottom: 60px;
}

.hero-content h1 {
    max-width: 600px;
    margin-bottom: 20px;
}

.hero-content p {
    font-size: 1.1rem;
    max-width: 500px;
    margin-bottom: 30px;
}

/* 7.2. Stats Bar */
.stats-bar {
    padding-top: 40px;
    padding-bottom: 40px;
}

.stats-grid {
    display: flex;
    justify-content: space-around;
    text-align: center;
}

.stat-item .stat-number {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--heading-color);
}

.stat-item .stat-label {
    color: var(--body-text-color);
    font-weight: 500;
}

/* 7.3. Services Section */
.service-card {
    text-align: left;
}

.service-card .icon-wrapper {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background-color: #e6fffa;
    /* very light mint */
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}

.service-card .icon-wrapper svg {
    width: 30px;
    height: 30px;
    fill: var(--primary-color);
}

.service-card h3 {
    margin-bottom: 15px;
}

.service-card ul {
    list-style: none;
    padding-left: 0;
    margin-top: 20px;
}

.service-card li {
    padding-left: 25px;
    position: relative;
    margin-bottom: 10px;
}

.service-card li::before {
    content: '✓';
    color: var(--primary-color);
    position: absolute;
    left: 0;
    font-weight: 700;
}

/* 7.4. About Section */
.about-content h3 {
    margin-top: 30px;
    padding-left: 20px;
    border-left: 3px solid var(--primary-color);
}

.about-content .tagline {
    color: var(--primary-color);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 10px;
}

/* 7.5. Testimonials Section */
.testimonial-card {
    position: relative;
    padding-top: 30px;
}

.testimonial-card::before {
    content: '“';
    font-family: Georgia, serif;
    font-size: 5rem;
    color: var(--border-color);
    position: absolute;
    top: 15px;
    left: 25px;
    line-height: 1;
}

.testimonial-text {
    font-size: 1.1rem;
    font-style: italic;
    color: var(--heading-color);
    margin-bottom: 25px;
    position: relative;
    z-index: 1;
}

.testimonial-author {
    font-weight: 700;
    color: var(--heading-color);
}

.testimonial-title {
    font-size: 0.9rem;
    color: var(--subtle-text-color);
}

/* 7.6 ROI Calculator Section */
.calculator-section {
    padding: var(--section-padding) 0;
}

.calculator-wrapper {
    max-width: 800px;
    margin: 0 auto;
    background: var(--white-color);
    padding: 40px;
    border-radius: var(--border-radius);
    box-shadow: var(--card-shadow);
}

.roi-form .form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 30px;
}

.roi-results-box {
    margin-top: 40px;
    padding: 30px;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    background-color: var(--light-bg-color);
}

.roi-results-box h3 {
    margin-top: 0;
}

.roi-results-box p {
    font-size: 1.1rem;
}

.roi-results-box .disclaimer {
    font-size: 0.9rem;
    color: #6c757d;
}

/* 7.7 Reports Section (Tabs) */
.tabs-container {
    max-width: 900px;
    margin: 0 auto;
}

.tab-buttons {
    display: flex;
    justify-content: center;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 30px;
}

.tab-button {
    padding: 15px 25px;
    border: none;
    background-color: transparent;
    cursor: pointer;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--body-text-color);
    position: relative;
    border-bottom: 3px solid transparent;
}

.tab-button.active {
    color: var(--primary-color);
    border-bottom-color: var(--primary-color);
}

.tab-pane {
    display: none;
}

.tab-pane.active {
    display: block;
}

.tab-pane h3 {
    margin-top: 0;
}

/* 7.8. CTA Section */
.cta-section {
    border-radius: var(--border-radius);
    padding: 80px 40px;
}

.cta-section h2 {
    max-width: 700px;
}

/* 8. Page Sections: Other Pages
-----------------------------------------------------------------*/
/* 8.1. Contact Page Layout */
.contact-page-grid {
    grid-template-columns: 2fr 1.5fr;
}

.contact-info {
    background: var(--light-bg-color);
    padding: 40px;
    border-radius: var(--border-radius);
}

.contact-info ul {
    list-style: none;
}

.contact-info li {
    margin-bottom: 20px;
    padding-left: 35px;
    position: relative;
}

.contact-info li strong {
    display: block;
    color: var(--heading-color);
}

.contact-info li svg {
    position: absolute;
    left: 0;
    top: 5px;
    width: 20px;
    height: 20px;
    fill: var(--primary-color);
}

/* 8.2. Legal Page Layout */
.legal-page-header {
    padding: 80px 0;
    background-color: var(--secondary-color);
    color: var(--white-color);
    text-align: center;
}

.legal-page-header h1 {
    color: var(--white-color);
}

.legal-content {
    max-width: 800px;
    margin: 0 auto;
    padding: 80px 0;
}

.legal-content h2 {
    margin-top: 40px;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border-color);
}

.legal-content h2:first-of-type {
    margin-top: 0;
}

.legal-content p,
.legal-content li {
    line-height: 1.8;
}

.legal-content ul {
    list-style: disc;
    padding-left: 25px;
    margin-bottom: 20px;
}

/* 9. Interactive Elements
-----------------------------------------------------------------*/
.chat-widget-container {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 320px;
    background-color: var(--white-color);
    border-radius: var(--border-radius);
    box-shadow: var(--card-shadow);
    z-index: 1000;
    overflow: hidden;
}

.chat-widget-header {
    background-color: var(--secondary-color);
    color: var(--white-color);
    padding: 15px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.chat-widget-header h4 {
    margin: 0;
    color: var(--white-color);
}

.chat-widget-header span {
    font-size: 1.5rem;
    font-weight: bold;
}

.chat-widget-body {
    padding: 15px;
}

.chat-widget-body textarea {
    width: 100%;
    height: 80px;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 10px;
    margin-bottom: 10px;
    resize: none;
    font-family: var(--font-body);
}

.chat-widget-body .btn {
    width: 100%;
}


/* 10. Responsive Design
-----------------------------------------------------------------*/
/* 10.1. Tablet (max-width: 1024px) */
@media (max-width: 1024px) {
    h1 {
        font-size: 2.8rem;
    }

    h2 {
        font-size: 2.2rem;
    }

    .section {
        padding: 80px 0;
    }

    .grid-3-cols {
        grid-template-columns: 1fr 1fr;
    }

    .testimonial-grid .card:last-child {
        grid-column: 1 / -1;
    }

    .footer-grid {
        grid-template-columns: 1fr 1fr;
    }

    .footer-column.about {
        grid-column: 1 / -1;
    }
}

/* 10.2. Mobile (max-width: 768px) */
@media (max-width: 768px) {
    :root {
        --header-height: 80px;
    }

    h1 {
        font-size: 2.2rem;
    }

    h2 {
        font-size: 1.8rem;
    }

    .section {
        padding: 60px 0;
    }

    .main-nav {
        display: none;
    }

    .mobile-menu-button {
        display: block;
    }

    .header-actions {
        display: none;
    }

    /* Hide Get a Free Consultation on mobile header */

    .grid-2-cols,
    .grid-3-cols,
    .contact-page-grid {
        grid-template-columns: 1fr;
    }

    .hero-section {
        text-align: center;
    }

    .hero-content {
        order: 2;
    }

    .hero-image {
        order: 1;
        margin-bottom: 40px;
    }

    .hero-content h1,
    .hero-content p {
        margin-left: auto;
        margin-right: auto;
    }

    .btn-group {
        justify-content: center;
    }

    .stats-grid {
        flex-direction: column;
        gap: 30px;
    }

    .roi-form .form-grid {
        grid-template-columns: 1fr;
    }

    .footer-grid {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .footer-column .footer-logo {
        margin-left: auto;
        margin-right: auto;
    }

    .footer-bottom {
        flex-direction: column;
        gap: 20px;
        text-align: center;
    }

    .footer-legal {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }
}

/* 11. Accessibility & Print Styles
-----------------------------------------------------------------*/
*:focus-visible {
    outline: 3px solid var(--primary-color);
    outline-offset: 3px;
}

@media print {
    body {
        background-color: #fff;
        color: #000;
    }

    .site-header,
    .site-footer,
    .cta-section,
    .chat-widget-container,
    .btn,
    .mobile-menu-button {
        display: none !important;
    }

    a {
        text-decoration: underline;
        color: #000;
    }

    .container {
        max-width: 100%;
        padding: 0;
    }
}