body {
    font-family: "Open Sans", Arial, sans-serif;
    background: #f2f2f2;
    color: #666;
    margin: 0;
}

/* TOP BAR */

.top-bar {
    background: #303030;
    color: #ddd;
    font-size: 14px;
    padding: 12px 0;
}

.top-bar a {
    color: #ff6b6b;
    text-decoration: none;
}

/* HEADER */

.main-header {
    background: #255aa8;
    padding: 20px 0;
}

.header-content {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 50px;
}

.logo-placeholder {
    width: 180px;
    height: 45px;
    background: #4d77b8;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
}

.book-link {
    color: white;
    text-decoration: none;
    font-weight: 600;
    padding: 1rem;
}

.book-link:hover {
    background-color: #204d99;
}

/* HERO */

.hero {
    position: relative;
}

.hero-image {
    height: 620px;
    background: #8fa8c4;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 32px;
    font-weight: bold;
}

.hero-overlay {
    position: absolute;
    top: 140px;
    left: 50%;
    transform: translateX(-50%);
    text-align: left;
}

.hero-overlay h1 {
    background: rgba(30,30,30,.75);
    color: white;
    padding: 15px 25px;
    font-size: 42px;
    margin-bottom: 10px;
}

.hero-overlay p {
    background: rgba(255,255,255,.85);
    padding: 12px 25px;
    color: #555;
    margin-bottom: 15px;
}

/* FEATURES */

.features-section {
    padding: 60px 0;
}

.feature-card {
    padding: 15px;
}

.feature-card h3 {
    color: #444;
}

.feature-card h4 {
    color: #f08b8b;
    font-weight: 300;
    margin-bottom: 20px;
}

.feature-image {
    height: 180px;
    background: #9eb9d6;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    margin-bottom: 20px;
}

/* WHY */

.why-section {
    padding: 60px 0;
}

.large-image {
    height: 300px;
    background: #6d88a8;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
}

.why-section h2 {
    color: #444;
}

.why-section h3 {
    color: #f08b8b;
    margin-bottom: 20px;
}

/* BENEFITS */

.benefits-left {
    background: #f4f4f4;
    padding: 70px;
}

.benefits-right {
    background: linear-gradient(
        90deg,
        #5ea7d4,
        #74b3da,
        #5a9ec9
    );
    color: white;
    padding: 70px;
}

.benefit-item {
    margin-top: 40px;
}

/* PARTNERS */

.partners {
    padding: 80px 0;
    text-align: center;
}

.partner-logo {
    height: 80px;
    background: #d6d6d6;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* CONTACT */

.contact-banner {
    background: linear-gradient(
        90deg,
        #4f95bf,
        #b2cedd
    );
    color: white;
    padding: 90px 0;
}

.contact-banner h2 {
    margin-bottom: 20px;
}

/* FOOTER */

footer {
    background: #4a4a4a;
    color: white;
    text-align: center;
    padding: 20px;
    font-size: 13px;
}

/* MOBILE */

@media (max-width: 768px) {

    .hero-overlay {
        width: 90%;
    }

    .hero-overlay h1 {
        font-size: 28px;
    }

    .hero-image {
        height: 450px;
    }

    .benefits-left,
    .benefits-right {
        padding: 40px 25px;
    }

    .top-bar {
        display: none;
    }

}