/* --- Table of Contents ---
1.  Global Styles & Variables
2.  Header & Navigation
3.  Buttons & Utility
4.  General Section Styling
5.  Hero Section
6.  Why Choose Us Section
7.  Our Team Section
8.  Pricing Sections
9.  Reviews Section (Slider)
10. Testimonials Section
11. FAQ Section (Accordion)
12. Contact Section
13. Footer
14. WhatsApp Floating Button
15. Responsive Design (Media Queries)
*/

/* 1. Global Styles & Variables */
:root {
    --primary-color: #1877F2; /* A clean, calming blue */
    --secondary-color: #f0f4f8; /* A very light, professional gray */
    --dark-text: #212529;
    --light-text: #6c757d;
    --white: #ffffff;
    --border-color: #dee2e6;
    --font-family: 'Poppins', sans-serif;
    --transition-speed: 0.3s;
}

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

html {
    scroll-behavior: smooth;
}

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

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

h1, h2, h3, h4 {
    color: var(--dark-text);
    line-height: 1.2;
    font-weight: 600;
}

h2 {
    font-size: 2.5rem;
    font-weight: 700;
}

section {
    padding: 6rem 0;
}

.section-header {
    text-align: center;
    margin-bottom: 3.5rem;
}

.section-header p {
    font-size: 1.1rem;
    max-width: 700px;
    margin: 1rem auto 0;
}

/* 2. Header & Navigation */
.main-header {
    background-color: var(--white);
    padding: 1.2rem 0;
    border-bottom: 1px solid var(--border-color);
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
}

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

.logo {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--dark-text);
}

.main-nav ul {
    list-style: none;
    display: flex;
    gap: 1.5rem;
}

.main-nav a {
    text-decoration: none;
    color: var(--light-text);
    font-weight: 500;
    transition: color var(--transition-speed) ease;
}

.main-nav a:hover {
    color: var(--primary-color);
}

/* 3. Buttons & Utility */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 1rem 2rem;
    border: none;
    border-radius: 8px; /* Square buttons */
    text-decoration: none;
    font-weight: 600;
    font-size: 1rem;
    transition: all var(--transition-speed) ease;
}

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

.btn-primary:hover {
    background-color: #0056b3;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 123, 255, 0.2);
}

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

.btn-secondary:hover {
    background-color: var(--primary-color);
    color: var(--white);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 123, 255, 0.2);
}

.cta-buttons {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    flex-wrap: wrap;
}

/* 4. General Section Styling */
.pricing-section,
.faq-section {
    background-color: var(--secondary-color);
}

.contact-section,
.why-choose-us,
.reviews-section,
.team-section,
.testimonials-section {
    background-color: var(--white);
}

/* 5. Hero Section */
.hero {
    background-color: var(--secondary-color);
    text-align: center;
}

.hero h2 {
    font-size: 3.5rem;
    max-width: 800px;
    margin: 0 auto 1.5rem;
    color: var(--dark-text);
}

.hero p {
    font-size: 1.25rem;
    max-width: 700px;
    margin: 0 auto 3rem;
    color: var(--light-text);
}

/* 6. Why Choose Us Section */
.reason-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
}

.reason-item {
    text-align: center;
    padding: 2.5rem 1.5rem;
    background: var(--secondary-color);
    border-radius: 8px;
    transition: transform var(--transition-speed) ease, box-shadow var(--transition-speed) ease;
}

.reason-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
}

.reason-item i {
    font-size: 2.5rem;
    color: var(--primary-color);
    margin-bottom: 1.5rem;
}

/* 7. Our Team Section */
.team-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
    text-align: center;
}

.team-member {
    padding: 2.5rem 1.5rem;
    background: var(--secondary-color);
    border-radius: 8px;
    transition: transform var(--transition-speed) ease, box-shadow var(--transition-speed) ease;
}

.team-member:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
}

.team-member img {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 1.5rem;
    border: 3px solid var(--primary-color);
}

.team-member h3 {
    margin-bottom: 0.5rem;
    font-size: 1.5rem;
}

.team-member .role {
    font-style: italic;
    color: var(--primary-color);
    margin-bottom: 1rem;
}

/* 8. Pricing Sections */
.pricing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
}

.pricing-card {
    background-color: var(--white);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 2.5rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    text-align: center;
    position: relative;
    transition: transform var(--transition-speed) ease, box-shadow var(--transition-speed) ease;
}

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

.pricing-card h4 {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
    color: var(--dark-text);
}

.pricing-card .price {
    font-size: 2rem;
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: 1.5rem;
}

.pricing-card ul {
    list-style: none;
    text-align: left;
    margin-bottom: 2rem;
    flex-grow: 1;
}

.pricing-card li {
    margin-bottom: 0.75rem;
    color: var(--light-text);
    font-weight: 500;
}

.pricing-card li i {
    color: var(--primary-color);
    margin-right: 0.75rem;
}

.bestseller-label {
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--primary-color);
    color: var(--white);
    font-size: 0.85rem;
    padding: 0.25rem 1rem;
    border-radius: 20px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* 9. Reviews Section (Slider) */
.reviews-section {
    text-align: center;
}

.reviews-slider {
    overflow: hidden;
    position: relative;
    padding: 2.5rem 0;
    mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent);
}

.slider-track {
    display: flex;
    animation: scroll 60s linear infinite;
    width: max-content;
    gap: 1.5rem;
}

.review-item {
    flex-shrink: 0;
    width: 300px;
    padding: 2rem;
    background-color: var(--secondary-color);
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.03);
}

.review-item p {
    font-style: italic;
    font-size: 1rem;
    margin-bottom: 1rem;
    color: var(--light-text);
}

.review-item h4 {
    font-weight: 600;
    color: var(--dark-text);
    text-align: right;
}

@keyframes scroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(calc(-316px * 20)); }
}

/* 10. Testimonials Section */
.testimonials-section {
    background-color: var(--secondary-color);
}

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

.testimonial-card {
    background-color: var(--white);
    padding: 2rem;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    transition: transform var(--transition-speed) ease;
}

.testimonial-card:hover {
    transform: translateY(-5px);
}

.testimonial-card img {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 1.5rem;
    border: 2px solid var(--primary-color);
}

.testimonial-card .quote {
    font-style: italic;
    margin-bottom: 1.5rem;
    color: var(--dark-text);
}

.testimonial-card .client-info h4 {
    margin: 0;
    font-size: 1.1rem;
}

.testimonial-card .client-info p {
    margin: 0;
    font-size: 0.9rem;
    color: var(--light-text);
}

/* 11. FAQ Section (Accordion) */
.faq-accordion {
    max-width: 800px;
    margin: 0 auto;
}

.faq-item {
    background-color: var(--white);
    margin-bottom: 1rem;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
    overflow: hidden;
    transition: box-shadow var(--transition-speed) ease;
}

.faq-question {
    padding: 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    font-weight: 600;
    color: var(--dark-text);
}

.faq-question h4 {
    margin: 0;
    flex-grow: 1;
}

.faq-question i {
    font-size: 1.25rem;
    color: var(--primary-color);
    transition: transform var(--transition-speed) ease;
}

.faq-item.active .faq-question i {
    transform: rotate(45deg);
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--transition-speed) ease, padding var(--transition-speed) ease;
    padding: 0 1.5rem;
}

.faq-item.active .faq-answer {
    max-height: 200px;
    padding: 0 1.5rem 1.5rem;
}

.faq-answer p {
    color: var(--light-text);
}

/* 12. Contact Section */
.contact-section {
    text-align: center;
}

.contact-info {
    max-width: 600px;
    margin: 0 auto;
}

.whatsapp-btn {
    background-color: #25D366;
    color: var(--white);
    border: none;
    margin-bottom: 1.5rem;
}

.whatsapp-btn:hover {
    background-color: #128c7e;
}

.contact-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.contact-form input,
.contact-form textarea {
    width: 100%;
    padding: 1rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-family: var(--font-family);
    transition: border-color var(--transition-speed) ease;
}

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

/* 13. Footer */
.main-footer {
    background-color: var(--dark-text);
    color: var(--white);
    text-align: center;
    padding: 2rem 0;
}

/* 14. WhatsApp Floating Button */
.whatsapp-float {
    position: fixed;
    bottom: 25px;
    right: 25px;
    background-color: #ffffff;
    color: var(--white-color);
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    text-decoration: none;
    box-shadow: 2px 2px 10px rgba(0,0,0,0.2);
    z-index: 999;
    transition: transform 0.3s ease;
}

.whatsapp-float:hover {
    transform: scale(1.1);
}

/* 15. Responsive Design (Media Queries) */
@media (max-width: 768px) {
    .main-header .container {
        flex-direction: column;
        text-align: center;
        gap: 1rem;
    }
    .main-nav ul {
        flex-wrap: wrap;
        justify-content: center;
        gap: 1rem;
    }
    .hero h2 {
        font-size: 2.5rem;
    }
    .hero p {
        font-size: 1rem;
    }
    .cta-buttons {
        flex-direction: column;
        gap: 1rem;
    }
    .reviews-slider {
        padding: 1.5rem 0;
    }
    .faq-question {
        padding: 1rem;
    }
}