* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  }

:root {
--purple: #4b245d;
--dark-purple: #35183f;
--gold: #d4af37;
--yellow: #d6a900;
--text: #222222;
--muted: #666666;
--border: #e5e5e5;
--light-bg: #fafafa;
}

/* =====================================================
BODY
===================================================== */

body {
min-height: 100vh;

 
display: flex;
flex-direction: column;

font-family:
    Arial,
    Helvetica,
    sans-serif;

color: var(--text);

background: #ffffff;
 

}

/* =====================================================
HEADER
===================================================== */

.main-header {
width: 100%;
height: 72px;

 
padding: 0 45px;

display: flex;
align-items: center;
justify-content: space-between;

background: #ffffff;

border-bottom:
    1px solid var(--border);
 

}

/* =====================================================
LOGO
===================================================== */

.logo-container {
display: flex;
align-items: center;
}

.logo-container a {
display: flex;
align-items: center;
}

.site-logo {
width: 165px;
height: auto;

 
display: block;
 

}

/* =====================================================
NAVIGATION
===================================================== */

.main-header nav a {
color: var(--purple);

 
text-decoration: none;

font-size: 15px;
font-weight: 600;
 

}

.main-header nav a:hover {
color: var(--gold);
}

/* =====================================================
SERVICE PAGE
===================================================== */

.service-page {
flex: 1;

 
width: 100%;

padding: 65px 25px 70px;
 

}

.service-container {
width: 100%;
max-width: 1000px;

 
margin: 0 auto;

text-align: center;
 

}

/* =====================================================
HEADING
===================================================== */

.service-heading {
margin-bottom: 40px;
}

.service-heading h1 {
margin-bottom: 9px;

 
color: var(--purple);

font-size: 34px;
font-weight: 700;
 

}

.service-heading p {
color: var(--muted);

 
font-size: 14px;
 

}

/* =====================================================
SERVICE OPTIONS
===================================================== */

.service-options {
display: grid;

 
grid-template-columns:
    repeat(3, 1fr);

gap: 20px;
 

}

/* =====================================================
SERVICE CARD
===================================================== */

.service-card {
min-height: 280px;

 
padding: 35px 25px;

display: flex;
flex-direction: column;
align-items: center;

text-decoration: none;

color: var(--text);

background: #ffffff;

border:
    1px solid #dddddd;

border-radius: 10px;
 

}

/* =====================================================
ICON
===================================================== */

.service-icon {
width: 60px;
height: 60px;

 
margin-bottom: 22px;

display: flex;
align-items: center;
justify-content: center;

font-size: 29px;

background: #f7f3f8;

border:
    1px solid #e4dce7;

border-radius: 50%;
 

}

/* =====================================================
CARD TEXT
===================================================== */

.service-card h2 {
margin-bottom: 10px;

 
color: var(--purple);

font-size: 20px;
font-weight: 700;
 

}

.service-card p {
max-width: 260px;

 
color: var(--muted);

font-size: 14px;

line-height: 1.6;
 

}

/* =====================================================
BOOK NOW
===================================================== */

.book-link {
margin-top: auto;
padding-top: 23px;

 
color: var(--yellow);

font-size: 13px;
font-weight: 700;
 

}

/* =====================================================
FOOTER
===================================================== */

footer {
padding: 17px 20px;

 
text-align: center;

background: #fafafa;

border-top:
    1px solid var(--border);
 

}

footer p {
color: #888888;

 
font-size: 11px;
 

}

/* =====================================================
TABLET
===================================================== */

@media (max-width: 900px) {

 
.service-options {
    grid-template-columns:
        repeat(2, 1fr);
}

.service-card:last-child {
    grid-column: 1 / -1;

    width: 50%;

    margin: 0 auto;
}
 

}

/* =====================================================
MOBILE
===================================================== */

@media (max-width: 600px) {

 
.main-header {
    height: 65px;

    padding: 0 20px;
}

.site-logo {
    width: 135px;
}

.main-header nav a {
    font-size: 14px;
}


.service-page {
    padding:
        50px 18px;
}


.service-heading {
    margin-bottom: 30px;
}

.service-heading h1 {
    font-size: 29px;
}

.service-heading p {
    font-size: 14px;
}


.service-options {
    grid-template-columns: 1fr;

    gap: 16px;
}


.service-card {
    width: 100%;

    min-height: 260px;

    padding: 32px 24px;
}


.service-card:last-child {
    grid-column: auto;

    width: 100%;
}
 

}

/* =====================================================
SMALL MOBILE
===================================================== */

@media (max-width: 380px) {

 
.service-heading h1 {
    font-size: 27px;
}

.service-card {
    min-height: 250px;
}
 

}