/* File: styles.css, Directory: /css/ */
:root {
    --primary-teal: #1EB0BC;
    --deep-blue: #273E97;
    --magenta: #C63C96;
    --black: #000000;
    --dark-gray: #525252;
    --medium-gray: #555555;
    --light-gray: #999999;
    --white: #FFFFFF;
    --off-white: #FCF9FB;
    --bg-gray: #EFEFEF;
    --border-gray: #E5E5E5;
    --seminar-yellow: #FFFF00;
    --seminar-red: #E31B23;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { font-family: 'Lato', sans-serif; color: var(--dark-gray); background-color: var(--white); line-height: 1.6; }
h1, h2, h3, h4 { font-family: 'Playfair Display', serif; font-weight: 700; color: var(--deep-blue); }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; border: none; font-family: inherit; }

.container { width: 100%; margin: 0 auto; padding: 0 1rem; }
@media (min-width: 1024px) { .container { padding: 0 2rem; max-width: 1280px; } }

/* Navigation */
nav { position: sticky; top: 0; z-index: 50; background-color: var(--white); border-bottom: 1px solid var(--border-gray); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); }
nav .container { display: flex; align-items: center; justify-content: space-between; height: 5rem; }
.logo-group img { height: 70px; width: auto; display: block; }
.nav-links { display: none; gap: 2rem; align-items: center; }
@media (min-width: 768px) { .nav-links { display: flex; } }
.nav-links a { font-size: 0.875rem; color: var(--medium-gray); transition: color 0.3s; }
.nav-links a:hover { color: var(--primary-teal); }

.btn { padding: 0.5rem 1rem; border: none; border-radius: 0.375rem; font-size: 1rem; font-weight: 600; transition: all 0.3s; display: inline-block; }
.btn-primary { background-color: var(--primary-teal); color: var(--white); }
.btn-primary:hover { background-color: var(--deep-blue); }

/* Hero */
.hero { background-color: var(--off-white); padding: 3rem 0 5rem; }
.hero .container { display: grid; grid-template-columns: 1fr; gap: 3rem; align-items: center; }
@media (min-width: 1024px) { .hero .container { grid-template-columns: 1fr 1fr; } }
.hero-content h1 { font-size: 3rem; line-height: 1.2; margin-bottom: 1.5rem; }
.hero-image { position: relative; border-radius: 1rem; overflow: hidden; box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1); }
.hero-video { width: 100%; height: auto; display: block; }

/* Services Section */
.services { padding: 5rem 0; background-color: var(--bg-gray); }
.services-header { text-align: center; margin-bottom: 3rem; }
.services-grid { display: grid; grid-template-columns: 1fr; gap: 2rem; }
@media (min-width: 1024px) { .services-grid { grid-template-columns: 1fr 2fr; } }

.service-tabs-nav { display: flex; flex-direction: column; gap: 0.5rem; }
.service-tab-btn { text-align: left; padding: 1.25rem; border-radius: 0.5rem; border: 1px solid var(--border-gray); background-color: var(--white); width: 100%; font-size: 1.1rem; font-weight: 600; color: var(--deep-blue); transition: 0.3s; }
.service-tab-btn.active { background-color: var(--primary-teal); color: var(--white); border-color: var(--primary-teal); }

.service-content-area { background: var(--white); padding: 2.5rem; border-radius: 0.5rem; box-shadow: 0 4px 6px rgba(0,0,0,0.05); min-height: 300px; }
.service-panel { display: none; animation: fadeIn 0.4s ease; }
.service-panel.active { display: block; }
.service-panel h3 { font-size: 2rem; margin-bottom: 1rem; }
.service-panel ul { margin: 1.5rem 0; padding-left: 1.25rem; }
.service-panel li { margin-bottom: 0.5rem; }

@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

/* About Section */
.about { padding: 5rem 0; background-color: var(--white); }
.about-grid { display: grid; grid-template-columns: 1fr; gap: 3rem; align-items: start; }
@media (min-width: 1024px) { .about-grid { grid-template-columns: 3fr 2fr; } }
.about-content h2 { font-size: 2.25rem; margin-bottom: 1.5rem; }
.about-content p { font-size: 1.125rem; margin-bottom: 1.25rem; color: var(--dark-gray); }
.about-quote { background-color: var(--off-white); padding: 1.5rem; border-left: 4px solid var(--primary-teal); margin: 2rem 0; font-style: italic; }

.about-stats-sidebar { background: linear-gradient(to bottom right, var(--off-white), var(--bg-gray)); padding: 2rem; border-radius: 1rem; }
.stat-card { background: white; padding: 1.5rem; border-radius: 0.5rem; margin-bottom: 1rem; box-shadow: 0 2px 4px rgba(0,0,0,0.05); text-align: center; }
.stat-card .num { font-size: 2rem; font-weight: 800; color: var(--primary-teal); display: block; }

/* Contact Form */
#contact { padding: 5rem 0; }
.contact-form { max-width: 600px; margin: 0 auto; background: var(--off-white); padding: 2.5rem; border-radius: 1rem; }
.form-group { margin-bottom: 1.25rem; }
.form-group input, .form-group textarea { width: 100%; padding: 0.75rem; border: 1px solid var(--border-gray); border-radius: 0.375rem; font-family: inherit; }
.form-submit { width: 100%; background: var(--primary-teal); color: white; padding: 1rem; border-radius: 0.375rem; font-weight: 700; border: none; transition: 0.3s; }
.form-submit:hover { background: var(--deep-blue); }

/* Custom Inner Page Adjustments */
.inner-page-header { background-color: var(--magenta); color: var(--white); padding: 4rem 0; text-align: center; }
.inner-page-header h1 { color: var(--white); margin-bottom: 0; }
.inner-page-header-blue { background-color: var(--deep-blue); color: var(--white); padding: 4rem 0; text-align: center; }
.inner-page-header-blue h1 { color: var(--white); margin-bottom: 0; }
.sidebar-widget { background: var(--bg-gray); padding: 2rem; border-radius: 0.5rem; margin-bottom: 2rem; }
.sidebar-widget h3 { font-size: 1.5rem; margin-bottom: 1rem; }
.sidebar-widget ul { list-style-type: none; padding: 0; }
.sidebar-widget li { padding: 0.5rem 0; border-bottom: 1px solid var(--border-gray); }
.cta-box { background-color: var(--primary-teal); color: var(--white); padding: 2rem; text-align: center; border-radius: 0.5rem; }
.cta-box h3, .cta-box p { color: var(--white); }

/* Footer Styling */
footer { 
    background-color: var(--deep-blue); 
    color: var(--white); 
}
footer .footer-content { 
    text-align: center; 
    padding: 2rem 0; 
    border-top: 1px solid rgba(255, 255, 255, 0.2); 
    font-size: 0.9rem; 
}
/* Custom Heart Bullets for Lists */
ul.check, .service-panel ul, .about-content ul {
    list-style-type: none;
    padding-left: 0;
}

ul.check li, .service-panel ul li, .about-content ul li {
    padding-left: 28px;
    /* This path tells the CSS to go up one folder, then into the img folder */
    background-image: url('../img/heart-logo19x16.png'); 
    background-position: left 4px;
    background-size: 14px auto;
    background-repeat: no-repeat;
    margin-bottom: 10px;
}
/* File: css/styles.css */

/* The heart is at 'left 4px' globally. 
   We will override it just for the sidebar to move it down.
*/
.sidebar-widget ul li {
    background-position: left 8px; /* Changed from 4px to 8px to move it down */
}