/* Global Reset & Reference Font Matching */ * { box-sizing: border-box; margin: 0; padding: 0; } /* Exact Font from Reference (Clean Sans-Serif for Luxury Readability) */ body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; background: #ffffff; color: #2d2d2d; line-height: 1.65; padding: 40px 20px; max-width: 1400px; margin: 0 auto; } /* Luxury Brand Colors (Preserved - Clean Borders) */ :root { --gold: #b89a46; /* Exact reference gold */ --mute-gold: #c9b060; --teal: #006180; /* Exact reference teal */ --light-gold-bg: #f7f5f0; --light-grey-1: #f8f8f8; --light-grey-2: #f0f0f0; --hover-shadow: 0 8px 20px rgba(0, 97, 128, 0.08); --hover-transform: translateY(-5px); } /* Header - Exact Reference Style + Bolder Titles */ .header-container { display: flex; justify-content: space-between; align-items: center; margin-bottom: 40px; flex-wrap: wrap; } .brand-logo { max-width: 220px; height: auto; align-self: center; } .page-title-wrapper { text-align: right; } /* BOLDER Headers (All Titles) */ .page-title { font-size: 48px; color: var(--gold); margin-bottom: 8px; font-weight: 700 !important; /* BOLD */ letter-spacing: 2px; text-transform: capitalize; } .page-subtitle { color: #555; font-size: 16px; font-style: italic; letter-spacing: 0.5px; font-weight: 500; /* Slightly bolder */ } /* Hero Section - Clean Reference Style (Updated Header) */ .consultation-hero { background: var(--light-gold-bg); padding: 35px 45px; margin-bottom: 45px; border-radius: 12px; text-align: center; transition: all 0.3s ease; border: none !important; /* Remove all borders */ } .consultation-hero:hover { box-shadow: var(--hover-shadow); transform: var(--hover-transform); } .consultation-hero h2 { color: var(--gold); font-size: 24px; letter-spacing: 1px; margin-bottom: 18px; font-weight: 700 !important; /* BOLD */ text-transform: none; /* No ALL CAPS */ } .consultation-hero p { font-size: 17px; color: #444; max-width: 1000px; margin: 0 auto; line-height: 1.8; font-weight: 400; } /* 3-Box Layout (Clean - No Highlight Borders + Buttons Aligned to Bottom) */ .consultation-process { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; margin-bottom: 45px; } /* Updated: Flexbox for button alignment to bottom */ .consultation-step { background: var(--light-grey-1); padding: 35px 30px; border-radius: 12px; box-shadow: 0 2px 10px rgba(0,0,0,0.02); border: none !important; /* Remove all borders */ text-align: center; transition: all 0.4s ease; display: flex; flex-direction: column; /* For bottom-aligned buttons */ height: 100%; /* Equal height boxes */ } .consultation-step:hover { box-shadow: var(--hover-shadow); transform: var(--hover-transform); } .step-icon { font-size: 32px; color: var(--gold); margin-bottom: 20px; opacity: 0.9; } .consultation-step h3 { color: var(--teal); font-size: 22px; margin-bottom: 20px; font-weight: 700 !important; /* BOLD */ letter-spacing: 0.5px; text-transform: capitalize; } .consultation-step p { font-size: 15px; color: #555; line-height: 1.7; font-weight: 400; flex: 1; /* Push button to bottom */ margin-bottom: 25px; /* Space before button */ } /* In-Box Buttons (Clean Luxury Style - Aligned to Bottom) */ .box-btn { display: inline-block; background: var(--teal); color: #ffffff; padding: 12px 25px; border-radius: 8px; text-decoration: none !important; font-size: 14px; font-weight: 600; transition: all 0.3s ease; border: none; cursor: pointer; margin-top: auto; /* Align to bottom */ } .box-btn:hover { background: var(--gold); transform: translateY(-2px); box-shadow: 0 4px 8px rgba(0,0,0,0.1); text-decoration: none !important; } /* What to Expect Section (FIXED: 3×2 Bullet Point Layout) */ .what-to-expect { background: var(--light-grey-2); padding: 40px 50px; /* Consistent padding */ border-radius: 12px; margin-bottom: 45px; transition: all 0.3s ease; border: none !important; /* Remove all borders */ } .what-to-expect:hover { box-shadow: var(--hover-shadow); transform: var(--hover-transform); } .what-to-expect h3 { color: var(--teal); font-size: 22px; margin-bottom: 35px; /* Spacing before list */ font-weight: 700 !important; /* BOLD */ text-align: center; letter-spacing: 0.5px; text-transform: capitalize; } /* FIXED: Strict 3-column grid (6 items = 2 rows of 3) */ .expect-list { display: grid; grid-template-columns: repeat(3, 1fr); /* 3 columns (fixed) */ gap: 40px 30px; /* Vertical gap 40px, horizontal 30px */ width: 100%; } /* Ensure all items use 1 column (no spanning) */ .expect-item { display: flex; align-items: flex-start; gap: 15px; /* Space between icon and text */ width: 100%; } .expect-item i { color: var(--gold); font-size: 20px; margin-top: 3px; opacity: 0.9; font-family: "Font Awesome 6 Free"; font-weight: 900; } .expect-item p { font-size: 15px; color: #555; font-weight: 400; line-height: 1.5; /* Compact line height */ width: 100%; } /* Interactive FAQ Section (Hover Effects for Q&A) */ .faq-section { background: var(--light-grey-1); padding: 35px 40px; border-radius: 12px; margin-bottom: 45px; transition: all 0.3s ease; border: none !important; /* Remove all borders */ } .faq-section:hover { box-shadow: var(--hover-shadow); transform: var(--hover-transform); } .faq-section h3 { color: var(--teal); font-size: 22px; margin-bottom: 25px; font-weight: 700 !important; /* BOLD */ text-align: center; letter-spacing: 0.5px; } /* Interactive FAQ Items (Hover Highlight) */ .faq-item { margin-bottom: 15px; border-bottom: 1px solid #eee; padding-bottom: 15px; transition: all 0.3s ease; } .faq-item:hover { background-color: rgba(247, 245, 240, 0.5); /* Soft gold hover */ padding: 10px 15px; border-radius: 8px; margin: 0 0 10px 0; } .faq-item:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; } .faq-question { color: var(--gold); font-weight: 700 !important; /* BOLD */ font-size: 16px; margin-bottom: 10px; letter-spacing: 0.3px; } .faq-answer { color: #555; font-size: 15px; line-height: 1.7; font-weight: 400; } /* Footer (Clean Reference Style) */ .official-platforms { text-align: center; margin-top: 45px; padding-top: 25px; border-top: 1px solid rgba(184, 154, 70, 0.1); } .official-platforms h4 { color: var(--teal); font-size: 18px; margin-bottom: 20px; font-weight: 700 !important; /* BOLD */ letter-spacing: 0.5px; } .platform-links a { color: var(--teal); text-decoration: none; margin: 0 12px; font-size: 16px; transition: color 0.3s ease; letter-spacing: 0.3px; font-weight: 500; } .platform-links a:hover { color: var(--gold); } /* Responsive Design (Updated for 3×2 Layout) */ @media (max-width: 1200px) { /* Keep 3 columns on medium screens (adjust gap only) */ .expect-list { gap: 30px 25px; } } @media (max-width: 768px) { .header-container { flex-direction: column; align-items: flex-start; } .page-title-wrapper { text-align: left; margin-top: 20px; } .page-title { font-size: 36px; letter-spacing: 1px; } .brand-logo { max-width: 180px; } .consultation-process { grid-template-columns: 1fr; } /* Switch to 1 column on mobile */ .expect-list { grid-template-columns: 1fr; gap: 25px; } .consultation-hero, .consultation-step, .what-to-expect, .faq-section { padding: 25px 20px; } .box-btn { display: block; width: 100%; margin: 0 auto; } .what-to-expect h3 { margin-bottom: 25px; } } @media (max-width: 576px) { body { padding: 25px 15px; } .page-title { font-size: 32px; } .brand-logo { max-width: 150px; } .platform-links a { display: block; margin: 10px 0; } }