{\rtf1\ansi\ansicpg936\cocoartf2639
\cocoatextscaling0\cocoaplatform0{\fonttbl\f0\fswiss\fcharset0 Helvetica;\f1\fnil\fcharset134 PingFangSC-Regular;\f2\fnil\fcharset77 ZapfDingbatsITC;
}
{\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 /* --- Global Styles & Variables --- */\
:root \{\
    --primary-color: #0A2647; /* 
\f1 \'c9\'ee\'c0\'b6\'c9\'ab
\f0  */\
    --secondary-color: #144272; /* 
\f1 \'d6\'d0\'c0\'b6\'c9\'ab
\f0  */\
    --accent-color: #E0B853; /* 
\f1 \'bd\'f0\'c9\'ab
\f0 /
\f1 \'bb\'c6\'c9\'ab
\f0  */\
    --text-color: #333;\
    --light-text-color: #f4f4f4;\
    --background-color: #FFFFFF;\
    --light-gray-bg: #f9f9f9;\
    --font-primary: 'Montserrat', sans-serif;\
    --font-secondary: 'Roboto', sans-serif;\
\}\
\
/* --- Base Reset --- */\
* \{\
    margin: 0;\
    padding: 0;\
    box-sizing: border-box;\
    scroll-behavior: smooth;\
\}\
\
body \{\
    font-family: var(--font-secondary);\
    line-height: 1.6;\
    color: var(--text-color);\
    background-color: var(--background-color);\
\}\
\
.container \{\
    max-width: 1100px;\
    margin: 0 auto;\
    padding: 0 20px;\
\}\
\
/* --- Typography --- */\
h1, h2, h3, h4 \{\
    font-family: var(--font-primary);\
    font-weight: 600;\
    line-height: 1.3;\
\}\
\
h1 \{ font-size: 2.8rem; \}\
h2 \{ font-size: 2rem; \}\
h3 \{ font-size: 1.5rem; \}\
\
.section-title \{\
    text-align: center;\
    margin-bottom: 40px;\
    color: var(--primary-color);\
\}\
\
/* --- Navbar --- */\
.navbar \{\
    background: rgba(255, 255, 255, 0.9);\
    backdrop-filter: blur(10px);\
    color: var(--primary-color);\
    padding: 1rem 0;\
    position: fixed;\
    width: 100%;\
    top: 0;\
    z-index: 1000;\
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);\
\}\
\
.navbar .container \{\
    display: flex;\
    justify-content: space-between;\
    align-items: center;\
\}\
\
.navbar .logo \{\
    font-family: var(--font-primary);\
    font-size: 1.5rem;\
    font-weight: 700;\
    color: var(--primary-color);\
    text-decoration: none;\
\}\
\
.navbar nav ul \{\
    list-style: none;\
    display: flex;\
\}\
\
.navbar nav ul li \{\
    margin-left: 25px;\
\}\
\
.navbar nav ul li a \{\
    color: var(--primary-color);\
    text-decoration: none;\
    font-weight: 500;\
    transition: color 0.3s ease;\
\}\
\
.navbar nav ul li a:hover \{\
    color: var(--accent-color);\
\}\
\
/* --- Hero Section --- */\
.hero \{\
    height: 100vh;\
    background: url('https://images.unsplash.com/photo-1610419354960-a22096a603d3?q=80&w=2070&auto=format&fit=crop') no-repeat center center/cover;\
    position: relative;\
    display: flex;\
    align-items: center;\
    justify-content: center;\
    text-align: center;\
\}\
\
.hero-overlay \{\
    position: absolute;\
    top: 0;\
    left: 0;\
    width: 100%;\
    height: 100%;\
    background: rgba(10, 38, 71, 0.7); /* 
\f1 \'c9\'ee\'c0\'b6\'c9\'ab\'d5\'da\'d5\'d6
\f0  */\
\}\
\
.hero-content \{\
    position: relative;\
    z-index: 2;\
    color: var(--light-text-color);\
    max-width: 800px;\
\}\
\
.hero-title \{\
    font-size: 3rem;\
    font-weight: 700;\
    margin-bottom: 1rem;\
\}\
\
.hero-subtitle \{\
    font-size: 1.2rem;\
    margin-bottom: 2rem;\
    font-weight: 400;\
\}\
\
.hero-buttons \{\
    display: flex;\
    justify-content: center;\
    gap: 20px;\
    flex-wrap: wrap;\
\}\
\
/* --- Buttons --- */\
.btn \{\
    display: inline-block;\
    padding: 12px 28px;\
    border-radius: 5px;\
    text-decoration: none;\
    font-weight: 600;\
    transition: all 0.3s ease;\
    border: 2px solid transparent;\
\}\
\
.btn-primary \{\
    background-color: var(--accent-color);\
    color: var(--primary-color);\
\}\
\
.btn-primary:hover \{\
    background-color: transparent;\
    border-color: var(--accent-color);\
    color: var(--accent-color);\
\}\
\
.btn-secondary \{\
    background-color: transparent;\
    color: #fff;\
    border-color: #fff;\
\}\
\
.btn-secondary:hover \{\
    background-color: #fff;\
    color: var(--primary-color);\
\}\
\
/* --- General Section Styling --- */\
section \{\
    padding: 80px 0;\
\}\
\
#about, #contact \{\
    background-color: var(--background-color);\
\}\
\
#solutions \{\
    background-color: var(--light-gray-bg);\
\}\
\
/* --- About Section --- */\
.about-content \{\
    max-width: 800px;\
    margin: 0 auto;\
    text-align: left;\
\}\
\
.about-text h3 \{\
    margin-top: 20px;\
    margin-bottom: 10px;\
    color: var(--secondary-color);\
\}\
\
/* --- Solutions Section --- */\
.solutions-grid \{\
    display: grid;\
    grid-template-columns: 1fr 1fr;\
    gap: 30px;\
\}\
\
.solution-card \{\
    background: #fff;\
    padding: 30px;\
    border-radius: 8px;\
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);\
    transition: transform 0.3s ease, box-shadow 0.3s ease;\
\}\
\
.solution-card:hover \{\
    transform: translateY(-5px);\
    box-shadow: 0 8px 25px rgba(0,0,0,0.12);\
\}\
\
.solution-card h3 \{\
    color: var(--primary-color);\
\}\
\
.solution-card .target-market \{\
    font-style: italic;\
    color: var(--accent-color);\
    font-weight: 600;\
    margin-bottom: 15px;\
\}\
\
.solution-card h4 \{\
    margin-bottom: 15px;\
    color: var(--secondary-color);\
\}\
\
.solution-card ul \{\
    list-style-type: none;\
\}\
\
.solution-card ul li \{\
    padding-left: 20px;\
    position: relative;\
    margin-bottom: 10px;\
\}\
\
.solution-card ul li::before \{\
    content: '
\f2 \uc0\u10004 
\f0 ';\
    color: var(--accent-color);\
    position: absolute;\
    left: 0;\
\}\
\
/* --- Contact Section --- */\
.contact-subtitle \{\
    text-align: center;\
    margin-bottom: 40px;\
    max-width: 600px;\
    margin-left: auto;\
    margin-right: auto;\
\}\
\
.contact-content \{\
    display: grid;\
    grid-template-columns: 2fr 1fr;\
    gap: 40px;\
    margin-top: 20px;\
\}\
\
.contact-form \{\
    display: grid;\
    grid-template-columns: 1fr 1fr;\
    gap: 20px;\
\}\
\
.form-group \{\
    display: flex;\
    flex-direction: column;\
\}\
\
.form-group.full-width \{\
    grid-column: 1 / -1;\
\}\
\
.form-group label \{\
    margin-bottom: 5px;\
    font-weight: 500;\
\}\
\
.form-group input, .form-group textarea, .form-group select \{\
    padding: 12px;\
    border: 1px solid #ccc;\
    border-radius: 5px;\
    font-family: var(--font-secondary);\
    font-size: 1rem;\
\}\
\
.form-group input:focus, .form-group textarea:focus, .form-group select:focus \{\
    outline: none;\
    border-color: var(--primary-color);\
\}\
\
.btn-submit \{\
    background-color: var(--primary-color);\
    color: #fff;\
    border: none;\
    cursor: pointer;\
    font-size: 1rem;\
    width: 100%;\
\}\
\
.btn-submit:hover \{\
    background-color: var(--secondary-color);\
\}\
\
.contact-info \{\
    background: var(--light-gray-bg);\
    padding: 30px;\
    border-radius: 8px;\
\}\
.contact-info h3 \{ color: var(--primary-color); margin-bottom: 15px; \}\
.contact-info p \{ margin-bottom: 15px; \}\
.contact-info a \{ color: var(--secondary-color); text-decoration: none; \}\
.contact-info a:hover \{ text-decoration: underline; \}\
\
/* --- Footer --- */\
.footer \{\
    background-color: var(--primary-color);\
    color: var(--light-text-color);\
    text-align: center;\
    padding: 20px 0;\
\}\
\
/* --- Responsive Design --- */\
@media (max-width: 768px) \{\
    h1 \{ font-size: 2.2rem; \}\
    h2 \{ font-size: 1.8rem; \}\
    \
    .navbar .container \{ flex-direction: column; \}\
    .navbar nav ul \{ padding-top: 10px; \}\
    \
    .hero \{ min-height: 80vh; \}\
    .hero-title \{ font-size: 2.5rem; \}\
\
    .solutions-grid \{ grid-template-columns: 1fr; \}\
    .contact-content \{ grid-template-columns: 1fr; \}\
    .contact-form \{ grid-template-columns: 1fr; \}\
    .contact-info \{ margin-top: 20px; \}\
\}}