body {
    background: red !important;
}

.top-bar {
    background-color: #caa72d; /* Royal Scapture Yellow */
    color: #fff;
    font-size: 14px;
    padding: 8px 0;
}

.top-bar .left-icons i {
    margin-right: 12px;
    color: #fff;
    font-size: 16px;
}

.top-bar .right-info {
    display: flex;
    justify-content: flex-end;
    gap: 25px;
    color: #fff;
}

/* -------------------------
        MAIN HEADER
-------------------------- */
.header {
    width: 100%;
    background: #ffffff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 60px;
    border-bottom: 1px solid #eee;
}

.header .logo img {
    height: 55px;
}

.header nav ul {
    display: flex;
    list-style: none;
    gap: 40px;
    margin: 0;
}

.header nav ul li a {
    color: #4a4a4a;
    font-weight: 500;
    font-size: 17px;
}

.header nav ul li a:hover {
    color: #caa72d;
}

/* Right side button + number */
.header .right-box {
    display: flex;
    align-items: center;
    gap: 20px;
}

.header .right-box .phone-box {
    display: flex;
    align-items: center;
    font-size: 18px;
    font-weight: 600;
    color: #4a4a4a;
}

.header .right-box .phone-box i {
    width: 40px;
    height: 40px;
    background: #f2e4b3;
    color: #caa72d;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 18px;
    border-radius: 50%;
    margin-right: 10px;
}

.header .right-box .book-btn {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
    color: #caa72d;
    text-transform: uppercase;
}

/* -------------------------
        HERO SECTION
-------------------------- */
.hero-banner {
    background-size: cover;
    background-position: center;
    padding: 150px 0;
    text-align: center;
    color: #fff;
    position: relative;
}

.hero-banner::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(90, 70, 30, 0.45); /* brownish overlay from screenshot */
}

.hero-banner .title {
    position: relative;
    font-size: 55px;
    font-weight: 700;
}

.hero-banner .subtitle {
    position: relative;
    font-size: 22px;
    margin-top: 20px;
    width: 60%;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.5;
}

/* -------------------------
    RESPONSIVE HEADER
-------------------------- */
@media (max-width: 992px) {
    .header {
        padding: 15px 20px;
        flex-wrap: wrap;
    }

    .header nav ul {
        gap: 20px;
    }

    .hero-banner .title {
        font-size: 38px;
    }

    .hero-banner .subtitle {
        width: 90%;
        font-size: 18px;
    }
}



  <style>
    /* Simple reset */
    *{box-sizing:border-box;margin:0;padding:0}
    html,body{height:100%;font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial;}
    a{color:inherit;text-decoration:none}

    /* Layout */
    header{background:#0f172a;color:#fff;padding:22px 20px;position:sticky;top:0;z-index:20;box-shadow:0 2px 8px rgba(2,6,23,0.4)}
    .container{max-width:1100px;margin:0 auto;padding:0 18px}
    .brand{font-weight:700;font-size:20px;letter-spacing:0.6px}
    nav{display:flex;gap:14px;align-items:center}
    .nav-links{margin-left:auto;display:flex;gap:12px}
    .nav-links a{padding:8px 12px;border-radius:8px;transition:background .18s}
    .nav-links a:hover{background:rgba(255,255,255,0.06)}

    /* Hero */
    .hero{display:grid;grid-template-columns:1fr 420px;gap:34px;align-items:center;padding:56px 0}
    .hero .eyebrow{color:#94a3b8;font-weight:600;margin-bottom:14px}
    .hero h1{font-size:36px;line-height:1.05;margin-bottom:16px}
    .hero p{color:#475569;margin-bottom:18px}

    .hero-figure{background:#f8fafc;border-radius:12px;padding:18px;display:flex;align-items:center;justify-content:center}
    .hero-figure img{width:100%;height:auto;border-radius:8px;max-height:420px;object-fit:cover}

    /* Sections */
    section{padding:44px 0;border-top:1px solid #eef2f7}
    .grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
    .card{background:#fff;border-radius:12px;padding:18px;box-shadow:0 6px 20px rgba(15,23,42,0.05)}
    .muted{color:#64748b;font-size:15px}

    /* Team / values */
    .team{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
    .person{display:flex;gap:12px;align-items:center}
    .avatar{width:64px;height:64px;border-radius:8px;flex:0 0 64px;overflow:hidden}
    .avatar img{width:100%;height:100%;object-fit:cover}

    /* Footer */
    footer{padding:28px 0;color:#475569;font-size:14px}

    /* Responsive */
    @media(max-width:980px){
      .hero{grid-template-columns:1fr;gap:20px}
      .grid-3{grid-template-columns:1fr}
      .team{grid-template-columns:1fr}
      .nav-links{display:none}
    }

    /* small util */
    .btn{display:inline-block;padding:10px 14px;border-radius:10px;background:#0f172a;color:#fff;font-weight:600}
  </style>