/* ==  GOOGLE FONTS   == */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400&family=Poppins:wght@400&display=swap');

/* ==   GENERAL   == */

body {margin: 0; background: #fbf8f2; color: #3e3a2d; font-family: Inter, Arial, sans-serif; font-size: 16px; font-weight: 300; line-height: 1.6;}
.page { max-width: 900px; margin: auto;}

/* ==   HEADER   == */

.site-header { background: #ac4248; color: white; padding: 30px 24px;}
.header-inner { max-width: 900px; margin: auto; display: flex; align-items: center; gap: 20px;}
.header-logo { width: 100px; height: 100px;}
.header-text { font-family: Poppins, sans-serif;}
.header-text h1 { margin: 0; font-size: 60px; font-weight: 400;}
.header-text p { margin: 8px 0 0; font-size: 16px;}

/* ==   HERO   == */

.hero { position: relative; min-height: 560px; background-image: url("assets/hero.png"); background-size: cover; background-position: center;}
.hero-panel { position: absolute; top: 0; bottom: 0; left: 50px; width: 380px; box-sizing: border-box; padding: 55px 40px; background: rgba(251,248,242,0.90);}
.hero-title { margin: 0 0 28px;}
.hero-text { margin: 0 0 20px;}
.hero-list { margin: 0; padding-left: 22px; line-height: 1.8;}

/* ==   CONTENT SECTIONS   == */

.section { padding: 35px 50px 25px;}
.section-title { margin: 0 0 18px; font-weight: bold;}

/* ==   HOW IT WORKS   == */

.steps { margin: 0; padding-left: 25px;}
.steps li { padding-left: 5px;}
.steps li:first-child { margin-bottom: 30px;}

/* ==   BUTTONS   == */

.button-area { padding-top: 20px;}
.button { display: inline-block; width: 160px; padding: 10px 0; background: #ac4248; color: white; text-align: center; border-radius: 7px; text-decoration: none;}
.button:hover { opacity: 0.9;}

/* ==   CONTACT   == */

.contact { display: flex; justify-content: space-between; align-items: flex-end; padding: 30px 50px 35px;}
.contact-title { margin: 0 0 14px; font-weight: bold;}
.contact p { margin: 7px 0;}
.contact-logo { width: 120px;}

/* ==   FOOTER   == */

.site-footer { max-width: 900px; margin: auto; padding: 15px 0 30px; border-top: 1px solid #3e3a2d;}
.site-footer a { color: #3e3a2d; font-style: italic;}

/* ==   MOBILE   == */

@media (max-width:700px) {

    .header-inner {  flex-direction: column;   text-align: center; }
    .header-logo { width: 80px; height: 80px;}
    .header-text h1 { font-size: 38px;}
    .hero { min-height: auto;}
    .hero-panel { position: relative; left: auto; width: auto; padding: 30px;}
    .section { padding: 30px 20px;}
    .contact {  flex-direction: column;  align-items: center;  text-align: center;  gap: 30px;  padding: 30px 20px;}
    .contact-logo {   width: 90px; }
    .site-footer {  text-align: center;  padding: 20px;}
    .button {  width: 100%;  max-width: 250px;}
}