/* ====================================
COMPASS SENIOR SERVICES
STYLE.CSS
==================================== */
:root {
--navy: #0B2341;
--teal: #0E7C7B;
--gold: #D4A64A;
--light: #F8F9FA;
--white: #FFFFFF;
--dark: #222222;
--gray: #666666;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body {
font-family: 'Open Sans', sans-serif;
line-height: 1.7;
color: var(--dark);
background: var(--light);
}
.container {
width: 90%;
max-width: 1200px;
margin: auto;
}
section {
padding: 80px 0;
}
img {
max-width: 100%;
display: block;
}
h1, h2, h3, h4 {
font-family: 'Playfair Display', serif;
}
.section-title {
text-align: center;
margin-bottom: 50px;
}
.section-title h2 {
color: var(--navy);
font-size: 2.5rem;
margin-bottom: 10px;
}
/* HEADER */
header {
background: var(--navy);
color: white;
position: sticky;
top: 0;
z-index: 1000;
}
header .container {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px 0;
}
.logo h2 {
font-size: 1.8rem;
}
.logo p {
font-size: 0.85rem;
color: #ddd;
}
nav ul {
list-style: none;
display: flex;
gap: 25px;
}
nav a {
text-decoration: none;
color: white;
font-weight: 600;
transition: .3s;
}
nav a:hover {
color: var(--gold);
}
/* HERO */
.hero {
background: linear-gradient(
135deg,
var(--navy),
var(--teal)
);
color: white;
}
.hero-content {
display: flex;
align-items: center;
gap: 50px;
}
.hero-text {
flex: 1;
}
.hero-text h1 {
font-size: 3rem;
margin-bottom: 25px;
line-height: 1.2;
}
.hero-text p {
font-size: 1.2rem;
margin-bottom: 30px;
}
.hero-image {
flex: 1;
}
.hero-image img {
border-radius: 20px;
box-shadow: 0 10px 35px rgba(0,0,0,.3);
}
/* BUTTONS */
.hero-buttons {
display: flex;
gap: 15px;
flex-wrap: wrap;
}
.btn-primary,
.btn-secondary {
padding: 14px 28px;
text-decoration: none;
border-radius: 50px;
font-weight: bold;
transition: .3s;
}
.btn-primary {
background: var(--gold);
color: var(--navy);
}
.btn-primary:hover {
transform: translateY(-3px);
}
.btn-secondary {
border: 2px solid white;
color: white;
}
.btn-secondary:hover {
background: white;
color: var(--navy);
}
/* WELCOME */
.welcome {
text-align: center;
background: white;
}
.welcome h2 {
color: var(--navy);
margin-bottom: 25px;
}
.welcome p {
max-width: 850px;
margin: auto;
margin-bottom: 20px;
}
/* ABOUT */
.about {
background: #eef4f5;
}
.about-content {
display: flex;
gap: 50px;
align-items: flex-start;
}
.about-image {
flex: 1;
}
.about-image img {
border-radius: 15px;
}
.about-text {
flex: 2;
}
.about-text p {
margin-bottom: 18px;
}
/* SERVICES */
.services-grid {
display: grid;
grid-template-columns: repeat(auto-fit,minmax(260px,1fr));
gap: 30px;
}
.service-card {
background: white;
border-radius: 15px;
overflow: hidden;
box-shadow: 0 5px 20px rgba(0,0,0,.08);
transition: .3s;
}
.service-card:hover {
transform: translateY(-8px);
}
.service-card img {
height: 220px;
width: 100%;
object-fit: cover;
}
.service-card h3 {
padding: 20px 20px 10px;
color: var(--navy);
}
.service-card ul {
padding: 0 20px 25px;
}
.service-card li {
margin-bottom: 10px;
}
/* PRICING */
.pricing {
background: var(--navy);
color: white;
}
.pricing h2 {
color: white;
}
.pricing-card {
background: white;
color: var(--dark);
max-width: 700px;
margin: auto;
padding: 40px;
border-radius: 20px;
text-align: center;
}
.pricing-card h3 {
color: var(--teal);
font-size: 2rem;
margin-bottom: 20px;
}
.pricing-card ul {
list-style: none;
margin-bottom: 25px;
}
.pricing-card li {
margin-bottom: 10px;
}
/* SERVICE AREA */
.service-area {
text-align: center;
}
.areas {
display: flex;
justify-content: center;
gap: 30px;
flex-wrap: wrap;
margin: 30px 0;
}
.areas div {
background: var(--teal);
color: white;
padding: 15px 25px;
border-radius: 50px;
font-weight: bold;
}
.travel-note {
color: var(--gray);
}
/* FAQ */
.faq {
background: white;
}
.faq-item {
max-width: 900px;
margin: auto;
margin-bottom: 15px;
}
.faq-question {
width: 100%;
padding: 20px;
background: var(--navy);
color: white;
border: none;
text-align: left;
font-size: 1rem;
cursor: pointer;
}
.faq-answer {
background: #f3f3f3;
padding: 20px;
}
/* CONTACT */
.contact {
background: #eef4f5;
}
.contact-wrapper {
display: flex;
gap: 50px;
flex-wrap: wrap;
}
.contact-info,
.contact-form {
flex: 1;
min-width: 300px;
}
.contact-form input,
.contact-form textarea {
width: 100%;
padding: 14px;
margin-bottom: 15px;
border: 1px solid #ccc;
border-radius: 8px;
}
.contact-form button {
border: none;
cursor: pointer;
}
/* FOOTER */
footer {
background: var(--navy);
color: white;
text-align: center;
padding: 50px 20px;
}
footer p {
margin: 10px 0;
}
.copyright {
margin-top: 20px;
color: #cccccc;
font-size: 0.9rem;
}
/* MOBILE */
@media (max-width: 900px) {
.hero-content,
.about-content,
.contact-wrapper {
    flex-direction: column;
}

.hero-text h1 {
    font-size: 2.2rem;
}

nav ul {
    flex-wrap: wrap;
    justify-content: center;
}

header .container {
    flex-direction: column;
    gap: 15px;
}
}
.contact-info-centered {
    text-align: center;
    max-width: 700px;
    margin: 0 auto;
}

.phone-large {
    font-size: 2rem;
    font-weight: bold;
    color: var(--teal);
    margin: 20px 0;
}
.hero-phone {
    font-size: 1.4rem;
    margin-top: 25px;
    font-weight: 600;
}

.hero-phone strong {
    color: var(--gold);
    font-size: 1.6rem;
}
.hero-buttons {
    margin-top: 25px;
}
.btn-primary {
    padding: 18px 40px;
    font-size: 1.1rem;
}