{\rtf1\ansi\ansicpg1252\cocoartf2821
\cocoatextscaling0\cocoaplatform0{\fonttbl\f0\fswiss\fcharset0 Helvetica;}
{\colortbl;\red255\green255\blue255;}
{\*\expandedcolortbl;;}
\paperw11900\paperh16840\margl1440\margr1440\vieww11520\viewh8400\viewkind0
\pard\tx566\tx1133\tx1700\tx2267\tx2834\tx3401\tx3968\tx4535\tx5102\tx5669\tx6236\tx6803\pardirnatural\partightenfactor0

\f0\fs24 \cf0 /* Base Styles */\
:root \{\
    --primary-color: #2c3e50;\
    --secondary-color: #3498db;\
    --accent-color: #e74c3c;\
    --light-color: #f8f9fa;\
    --dark-color: #343a40;\
    --text-color: #333;\
    --text-light: #f8f9fa;\
    --border-radius: 5px;\
    --box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);\
    --transition: all 0.3s ease;\
\}\
\
* \{\
    margin: 0;\
    padding: 0;\
    box-sizing: border-box;\
\}\
\
html \{\
    scroll-behavior: smooth;\
\}\
\
body \{\
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\
    line-height: 1.6;\
    color: var(--text-color);\
    background-color: var(--light-color);\
\}\
\
.container \{\
    width: 90%;\
    max-width: 1200px;\
    margin: 0 auto;\
    padding: 0 15px;\
\}\
\
h1, h2, h3, h4, h5, h6 \{\
    font-weight: 700;\
    line-height: 1.2;\
    margin-bottom: 20px;\
\}\
\
h1 \{\
    font-size: 3.5rem;\
\}\
\
h2 \{\
    font-size: 2.5rem;\
    text-align: center;\
    position: relative;\
    margin-bottom: 50px;\
\}\
\
h2::after \{\
    content: '';\
    position: absolute;\
    width: 80px;\
    height: 4px;\
    background-color: var(--secondary-color);\
    bottom: -15px;\
    left: 50%;\
    transform: translateX(-50%);\
\}\
\
h3 \{\
    font-size: 1.75rem;\
\}\
\
p \{\
    margin-bottom: 20px;\
\}\
\
a \{\
    text-decoration: none;\
    color: var(--secondary-color);\
    transition: var(--transition);\
\}\
\
a:hover \{\
    color: var(--accent-color);\
\}\
\
ul \{\
    list-style: none;\
\}\
\
section \{\
    padding: 100px 0;\
\}\
\
/* Header & Navigation */\
header \{\
    background-color: var(--primary-color);\
    color: var(--text-light);\
    padding: 20px 0;\
    position: relative;\
    height: 100vh;\
    display: flex;\
    align-items: center;\
\}\
\
header::before \{\
    content: '';\
    position: absolute;\
    top: 0;\
    left: 0;\
    width: 100%;\
    height: 100%;\
    background: linear-gradient(rgba(44, 62, 80, 0.8), rgba(44, 62, 80, 0.9)), url('https://source.unsplash.com/random/1920x1080/?copywriting') no-repeat center center/cover;\
    z-index: -1;\
\}\
\
nav \{\
    display: flex;\
    justify-content: space-between;\
    align-items: center;\
    padding: 20px 0;\
    position: absolute;\
    top: 0;\
    left: 15px;\
    right: 15px;\
    z-index: 10;\
\}\
\
.logo \{\
    font-size: 2rem;\
    font-weight: 700;\
    color: var(--light-color);\
\}\
\
.nav-links \{\
    display: flex;\
\}\
\
.nav-links li \{\
    margin-left: 30px;\
\}\
\
.nav-links a \{\
    color: var(--light-color);\
    position: relative;\
    padding-bottom: 5px;\
\}\
\
.nav-links a::after \{\
    content: '';\
    position: absolute;\
    width: 0;\
    height: 2px;\
    background-color: var(--secondary-color);\
    bottom: 0;\
    left: 0;\
    transition: var(--transition);\
\}\
\
.nav-links a:hover::after \{\
    width: 100%;\
\}\
\
.hamburger \{\
    display: none;\
    flex-direction: column;\
    cursor: pointer;\
\}\
\
.hamburger span \{\
    width: 30px;\
    height: 3px;\
    background-color: var(--light-color);\
    margin: 3px 0;\
    transition: var(--transition);\
\}\
\
/* Hero Section */\
.hero \{\
    text-align: center;\
    max-width: 800px;\
    margin: 0 auto;\
\}\
\
.hero h1 \{\
    margin-bottom: 20px;\
\}\
\
.highlight \{\
    color: var(--secondary-color);\
\}\
\
.hero p \{\
    font-size: 1.2rem;\
    margin-bottom: 30px;\
\}\
\
.cta-button \{\
    display: inline-block;\
    background-color: var(--secondary-color);\
    color: var(--light-color);\
    padding: 15px 30px;\
    border-radius: var(--border-radius);\
    font-weight: 600;\
    text-transform: uppercase;\
    letter-spacing: 1px;\
    transition: var(--transition);\
\}\
\
.cta-button:hover \{\
    background-color: var(--accent-color);\
    color: var(--light-color);\
    transform: translateY(-3px);\
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);\
\}\
\
/* About Section */\
.about-section \{\
    background-color: #fff;\
\}\
\
.about-content \{\
    display: flex;\
    align-items: center;\
    gap: 50px;\
\}\
\
.about-image \{\
    flex: 1;\
\}\
\
.image-placeholder \{\
    width: 100%;\
    padding-bottom: 100%;\
    background-color: var(--secondary-color);\
    border-radius: 50%;\
    display: flex;\
    justify-content: center;\
    align-items: center;\
    font-size: 3rem;\
    color: var(--light-color);\
    font-weight: 700;\
    position: relative;\
\}\
\
.image-placeholder::before \{\
    content: "";\
    display: block;\
    padding-top: 100%;\
\}\
\
.image-placeholder span \{\
    position: absolute;\
    top: 50%;\
    left: 50%;\
    transform: translate(-50%, -50%);\
\}\
\
.about-text \{\
    flex: 2;\
\}\
\
.tagline \{\
    color: var(--secondary-color);\
    font-weight: 600;\
    margin-bottom: 20px;\
\}\
\
.stats \{\
    display: flex;\
    justify-content: space-between;\
    margin-top: 30px;\
\}\
\
.stat-item \{\
    text-align: center;\
    padding: 20px;\
    background-color: var(--light-color);\
    border-radius: var(--border-radius);\
    box-shadow: var(--box-shadow);\
    flex: 1;\
    margin: 0 10px;\
\}\
\
.stat-number \{\
    display: block;\
    font-size: 2.5rem;\
    font-weight: 700;\
    color: var(--secondary-color);\
    margin-bottom: 10px;\
\}\
\
.stat-label \{\
    font-size: 0.9rem;\
    color: var(--text-color);\
\}\
\
/* Services Section */\
.services-section \{\
    background-color: var(--light-color);\
\}\
\
.services-grid \{\
    display: grid;\
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));\
    gap: 30px;\
\}\
\
.service-card \{\
    background-color: #fff;\
    padding: 30px;\
    border-radius: var(--border-radius);\
    box-shadow: var(--box-shadow);\
    transition: var(--transition);\
    text-align: center;\
\}\
\
.service-card:hover \{\
    transform: translateY(-10px);\
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);\
\}\
\
.service-card i \{\
    font-size: 3rem;\
    color: var(--secondary-color);\
    margin-bottom: 20px;\
\}\
\
/* Portfolio Section */\
.portfolio-section \{\
    background-color: #fff;\
\}\
\
.portfolio-filters \{\
    display: flex;\
    justify-content: center;\
    margin-bottom: 40px;\
\}\
\
.filter-btn \{\
    background: none;\
    border: none;\
    padding: 10px 20px;\
    margin: 0 5px;\
    cursor: pointer;\
    font-size: 1rem;\
    color: var(--text-color);\
    transition: var(--transition);\
    position: relative;\
\}\
\
.filter-btn::after \{\
    content: '';\
    position: absolute;\
    width: 0;\
    height: 2px;\
    background-color: var(--secondary-color);\
    bottom: 0;\
    left: 50%;\
    transform: translateX(-50%);\
    transition: var(--transition);\
\}\
\
.filter-btn:hover::after,\
.filter-btn.active::after \{\
    width: 80%;\
\}\
\
.filter-btn.active \{\
    color: var(--secondary-color);\
\}\
\
.portfolio-grid \{\
    display: grid;\
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));\
    gap: 30px;\
\}\
\
.portfolio-item \{\
    border-radius: var(--border-radius);\
    overflow: hidden;\
    box-shadow: var(--box-shadow);\
    position: relative;\
    height: 250px;\
    background-color: var(--primary-color);\
    transition: var(--transition);\
\}\
\
.portfolio-content \{\
    padding: 30px;\
    color: var(--light-color);\
    display: flex;\
    flex-direction: column;\
    justify-content: center;\
    height: 100%;\
\}\
\
.portfolio-content h3 \{\
    margin-bottom: 10px;\
\}\
\
.portfolio-content p \{\
    margin-bottom: 20px;\
    opacity: 0.8;\
\}\
\
.portfolio-link \{\
    color: var(--light-color);\
    background-color: var(--secondary-color);\
    padding: 10px 20px;\
    border-radius: var(--border-radius);\
    align-self: flex-start;\
    transition: var(--transition);\
\}\
\
.portfolio-link:hover \{\
    background-color: var(--accent-color);\
    color: var(--light-color);\
\}\
\
.portfolio-item:hover \{\
    transform: translateY(-5px);\
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);\
\}\
\
/* Testimonials Section */\
.testimonials-section \{\
    background-color: var(--light-color);\
    text-align: center;\
\}\
\
.testimonial-slider \{\
    position: relative;\
    max-width: 800px;\
    margin: 0 auto 30px;\
    height: 250px;\
\}\
\
.testimonial-slide \{\
    position: absolute;\
    top: 0;\
    left: 0;\
    width: 100%;\
    opacity: 0;\
    visibility: hidden;\
    transition: var(--transition);\
\}\
\
.testimonial-slide.active \{\
    opacity: 1;\
    visibility: visible;\
\}\
\
.testimonial-content \{\
    background-color: #fff;\
    padding: 40px;\
    border-radius: var(--border-radius);\
    box-shadow: var(--box-shadow);\
\}\
\
.testimonial-content p \{\
    font-size: 1.2rem;\
    font-style: italic;\
    margin-bottom: 30px;\
\}\
\
.testimonial-author \{\
    margin-top: 20px;\
\}\
\
.author-name \{\
    font-weight: 700;\
    margin-bottom: 5px;\
\}\
\
.author-title \{\
    color: var(--secondary-color);\
\}\
\
.testimonial-controls \{\
    display: flex;\
    justify-content: center;\
    align-items: center;\
\}\
\
.prev-testimonial,\
.next-testimonial \{\
    background: none;\
    border: none;\
    font-size: 1.5rem;\
    color: var(--primary-color);\
    cursor: pointer;\
    padding: 10px;\
    transition: var(--transition);\
\}\
\
.prev-testimonial:hover,\
.next-testimonial:hover \{\
    color: var(--secondary-color);\
\}\
\
.testimonial-dots \{\
    display: flex;\
    margin: 0 15px;\
\}\
\
.dot \{\
    width: 12px;\
    height: 12px;\
    background-color: #ccc;\
    border-radius: 50%;\
    margin: 0 5px;\
    cursor: pointer;\
    transition: var(--transition);\
\}\
\
.dot.active \{\
    background-color: var(--secondary-color);\
\}\
\
/* Contact Section */\
.contact-section \{\
    background-color: #fff;\
\}\
\
.contact-content \{\
    display: flex;\
    gap: 50px;\
\}\
\
.contact-info,\
.contact-form \{\
    flex: 1;\
\}\
\
.contact-item \{\
    display: flex;\
    align-items: center;\
    margin-bottom: 20px;\
\}\
\
.contact-item i \{\
    width: 40px;\
    height: 40px;\
    background-color: var(--light-color);\
    border-radius: 50%;\
    display: flex;\
    justify-content: center;\
    align-items: center;\
    color: var(--secondary-color);\
    margin-right: 15px;\
\}\
\
.social-links \{\
    display: flex;\
    margin-top: 30px;\
\}\
\
.social-link \{\
    width: 40px;\
    height: 40px;\
    background-color: var(--light-color);\
    border-radius: 50%;\
    display: flex;\
    justify-content: center;\
    align-items: center;\
    color: var(--secondary-color);\
    margin-right: 15px;\
    transition: var(--transition);\
\}\
\
.social-link:hover \{\
    background-color: var(--secondary-color);\
    color: var(--light-color);\
\}\
\
.form-group \{\
    margin-bottom: 20px;\
\}\
\
.form-group label \{\
    display: block;\
    margin-bottom: 5px;\
    font-weight: 600;\
\}\
\
.form-group input,\
.form-group textarea \{\
    width: 100%;\
    padding: 12px;\
    border: 1px solid #ddd;\
    border-radius: var(--border-radius);\
    font-family: inherit;\
    font-size: 1rem;\
\}\
\
.form-group input:focus,\
.form-group textarea:focus \{\
    outline: none;\
    border-color: var(--secondary-color);\
\}\
\
.submit-btn \{\
    background-color: var(--secondary-color);\
    color: var(--light-color);\
    border: none;\
    padding: 15px 30px;\
    border-radius: var(--border-radius);\
    cursor: pointer;\
    font-size: 1rem;\
    font-weight: 600;\
    transition: var(--transition);\
\}\
\
.submit-btn:hover \{\
    background-color: var(--accent-color);\
\}\
\
/* Footer */\
footer \{\
    background-color: var(--primary-color);\
    color: var(--light-color);\
    text-align: center;\
    padding: 30px 0;\
\}\
\
/* Responsive Design */\
@media (max-width: 992px) \{\
    h1 \{\
        font-size: 3rem;\
    \}\
\
    h2 \{\
        font-size: 2.2rem;\
    \}\
\
    .about-content \{\
        flex-direction: column;\
        gap: 30px;\
    \}\
\
    .about-image \{\
        width: 300px;\
        margin: 0 auto;\
    \}\
\
    .contact-content \{\
        flex-direction: column;\
    \}\
\}\
\
@media (max-width: 768px) \{\
    h1 \{\
        font-size: 2.5rem;\
    \}\
\
    h2 \{\
        font-size: 2rem;\
    \}\
\
    header \{\
        height: auto;\
        min-height: 100vh;\
    \}\
\
    .nav-links \{\
        position: fixed;\
        top: 0;\
        right: -300px;\
        width: 300px;\
        height: 100vh;\
        background-color: var(--primary-color);\
        flex-direction: column;\
        align-items: center;\
        justify-content: center;\
        transition: var(--transition);\
        z-index: 20;\
    \}\
\
    .nav-links.active \{\
        right: 0;\
    \}\
\
    .nav-links li \{\
        margin: 20px 0;\
    \}\
\
    .hamburger \{\
        display: flex;\
        z-index: 30;\
    \}\
\
    .hamburger.active span:nth-child(1) \{\
        transform: rotate(45deg) translate(5px, 5px);\
    \}\
\
    .hamburger.active span:nth-child(2) \{\
        opacity: 0;\
    \}\
\
    .hamburger.active span:nth-child(3) \{\
        transform: rotate(-45deg) translate(7px, -7px);\
    \}\
\
    .services-grid,\
    .portfolio-grid \{\
        grid-template-columns: 1fr;\
    \}}