:root {
            --blue: #1A3263;
            --gray: #BFC6C4;
            --orange: #FAB95B;
            --white: #ffffff;
            --light-gray: #f4f4f4;
            --dark-text: #2c3e50;
            --transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Gabarito', sans-serif;
        }

        body {
            background-color: var(--white);
            color: var(--dark-text);
            line-height: 1.6;
            overflow-x: hidden;
        }

        /* --- Scrollbar --- */
        ::-webkit-scrollbar { width: 8px; }
        ::-webkit-scrollbar-track { background: var(--light-gray); }
        ::-webkit-scrollbar-thumb { background: var(--blue); border-radius: 10px; }

        /* --- Global Styles --- */
        .container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
        section { padding: 100px 0; opacity: 0; transform: translateY(30px); transition: 0.8s ease-out; }
        section.visible { opacity: 1; transform: translateY(0); }
        
        h1, h2, h3 { color: var(--blue); font-weight: 800; }
        h4, h5 { font-weight: 600; }
        p { font-weight: 400; font-size: 1.05rem; }

        .btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 14px 30px;
            border-radius: 50px;
            font-weight: 500;
            text-decoration: none;
            cursor: pointer;
            transition: var(--transition);
            border: none;
            gap: 10px;
        }
        .btn-orange { background: var(--orange); color: var(--blue); }
        .btn-blue { background: var(--blue); color: var(--white); }
        .btn-outline { border: 2px solid var(--blue); color: var(--blue); background: transparent; }
        .btn:hover { transform: translateY(-3px); box-shadow: 0 10px 20px rgba(0,0,0,0.1); }
        .btn-orange:hover { background: #e8a84a; }

        /* --- Header --- */
        header {
            background: var(--gray);
            height: 80px;
            display: flex;
            align-items: center;
            position: fixed;
            top: 0;
            width: 100%;
            z-index: 1000;
            transition: var(--transition);
        }
        header.scrolled { height: 70px; box-shadow: 0 4px 20px rgba(0,0,0,0.1); }
        
        .nav-container {
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 100%;
        }
.logo{
    display:flex;
    align-items:center;
    cursor:pointer;
}

.logo img{
    height:170px;
    width:auto;
    object-fit:contain;
}

.menu-toggle{
display:none;
font-size:28px;
cursor:pointer;
color:var(--blue);
}
@media (max-width:900px){

.nav-container{
position:relative;
}

.menu-toggle{
display:block;
}

nav{
position:absolute;
top:80px;
left:0;
width:100%;
background:var(--gray);
flex-direction:column;
align-items:center;
gap:20px;
padding:25px 0;
display:none;
}

nav.active{
display:flex;
}

.header-actions{
display:none;
}

}
        nav { display: flex; gap: 25px; }
        nav a { text-decoration: none; color: var(--blue); font-weight: 500; cursor: pointer; position: relative; }
        nav a::after { content: ''; position: absolute; bottom: -5px; left: 0; width: 0; height: 2px; background: var(--orange); transition: 0.3s; }
        nav a:hover::after, nav a.active::after { width: 100%; }

        /* --- Hero Section --- */
        .hero {
            height: 95vh;
            display: flex;
            align-items: center;
            justify-content: center;
            background: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.3)), url('https://images.unsplash.com/photo-1576765608535-5f04d1e3f289?auto=format&fit=crop&q=80&w=2000');
            background-size: cover;
            background-position: center;
            background-attachment: fixed;
            padding-top: 80px;
        }

        .hero-card {
            background: var(--gray);
            padding: 60px;
            border-radius: 40px;
            max-width: 800px;
            text-align: center;
            box-shadow: 0 30px 60px rgba(0,0,0,0.2);
            animation: cardPop 1s ease;
        }

        @keyframes cardPop { 
            from { opacity: 0; transform: scale(0.9) translateY(40px); }
            to { opacity: 1; transform: scale(1) translateY(0); }
        }

        .hero-card h1 { font-size: 3.5rem; margin-bottom: 20px; line-height: 1.1; }
        .hero-card p { font-size: 1.2rem; margin-bottom: 35px; color: var(--blue); }
        .hero-btns { display: flex; gap: 20px; justify-content: center; }

        /* --- Care Types (Diagonal Layout) --- */
        .care-types-container { background: var(--light-gray); padding: 120px 0; }
        .care-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
        
        .care-block {
            background: var(--white);
            padding: 50px 40px;
            border-radius: 30px;
            transition: var(--transition);
            text-align: center;
            box-shadow: 0 10px 30px rgba(0,0,0,0.05);
        }
        .care-block:nth-child(1) { transform: translateY(-30px); }
        .care-block:nth-child(2) { transform: translateY(0); }
        .care-block:nth-child(3) { transform: translateY(30px); }
        .care-block:hover { transform: translateY(-10px) scale(1.02); box-shadow: 0 20px 40px rgba(26, 50, 99, 0.1); }

        .care-icon { width: 80px; height: 80px; background: var(--gray); border-radius: 20px; display: flex; align-items: center; justify-content: center; margin: 0 auto 30px; color: var(--blue); }

        /* --- Pathway Design --- */
        .pathway { text-align: center; position: relative; }
        .steps-container { display: flex; justify-content: space-between; margin-top: 80px; position: relative; }
        .steps-container::before { content: ''; position: absolute; top: 50px; left: 10%; right: 10%; height: 2px; border-top: 2px dashed var(--orange); z-index: 1; }
        
        .step-item { flex: 1; position: relative; z-index: 2; }
        .step-circle { 
            width: 100px; height: 100px; background: var(--white); border: 4px solid var(--orange); 
            border-radius: 50%; display: flex; align-items: center; justify-content: center; 
            margin: 0 auto 25px; font-size: 1.5rem; font-weight: 800; color: var(--blue);
            transition: 0.3s;
        }
        .step-item:hover .step-circle { background: var(--orange); transform: scale(1.1); color: var(--white); }

        /* --- Split Services --- */
        .split-section { display: flex; gap: 80px; align-items: center; }
        .split-image { flex: 1.2; border-radius: 40px; overflow: hidden; height: 500px; box-shadow: 0 20px 40px rgba(0,0,0,0.1); }
        .split-image img { width: 100%; height: 100%; object-fit: cover; transition: 0.8s; }
        .split-image:hover img { transform: scale(1.1); }
        .split-content { flex: 1; }
        .service-list { list-style: none; margin-top: 30px; }
        .service-list li { display: flex; align-items: center; gap: 15px; margin-bottom: 20px; font-weight: 600; font-size: 1.1rem; }
        .service-list li i { background: var(--orange); padding: 8px; border-radius: 10px; color: var(--blue); }

        /* --- Family Support --- */
        .family-support { background: var(--blue); color: var(--white); text-align: center; border-radius: 50px; margin: 0 20px; padding: 100px 40px; }
        .family-support h2 { color: var(--white); font-size: 2.5rem; margin-bottom: 20px; }
        .family-support p { max-width: 700px; margin: 0 auto 40px; opacity: 0.8; }

        /* --- Testimonials --- */
        .testimonial-slider { display: flex; gap: 30px; overflow-x: auto; padding: 20px 0; scrollbar-width: none; }
        .testimonial-card { min-width: 350px; background: var(--gray); padding: 40px; border-radius: 30px; flex: 1; }
        .user-meta { display: flex; align-items: center; gap: 15px; margin-bottom: 20px; }
        .user-meta img { width: 60px; height: 60px; border-radius: 50%; object-fit: cover; border: 3px solid var(--white); }

        /* --- Blog --- */
        .blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
        .blog-card { background: var(--white); border-radius: 30px; overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,0.05); transition: var(--transition); }
        .blog-card:hover { transform: translateY(-10px); }
        .blog-card img { width: 100%; height: 220px; object-fit: cover; }
        .blog-info { padding: 30px; }

        /* --- Contact --- */
        .contact-grid { display: grid; grid-template-columns: 1fr 1.5fr; gap: 80px; }
        .contact-form { background: var(--light-gray); padding: 50px; border-radius: 40px; }
        .input-group { margin-bottom: 20px; }
        .input-group label { display: block; margin-bottom: 8px; font-weight: 600; color: var(--blue); }
        .input-group input, .input-group textarea { width: 100%; padding: 15px; border-radius: 15px; border: 2px solid var(--gray); background: var(--white); outline: none; transition: 0.3s; }
        .input-group input:focus { border-color: var(--orange); }

        /* --- Footer --- */
        footer { background: var(--blue); color: var(--gray); padding: 100px 0 30px; border-radius: 60px 60px 0 0; margin-top: 50px; }
        .footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: 60px; margin-bottom: 60px; }
        .footer-col h4 { color: var(--white); margin-bottom: 25px; }
        .footer-links { list-style: none; }
        .footer-links li { margin-bottom: 12px; }
        .footer-links a { color: var(--gray); text-decoration: none; transition: 0.3s; cursor: pointer; }
        .footer-links a:hover { color: var(--orange); padding-left: 5px; }
        .socials { display: flex; gap: 15px; margin-top: 20px; }
        .socials i { width: 40px; height: 40px; background: rgba(255,255,255,0.1); border-radius: 10px; display: flex; align-items: center; justify-content: center; color: var(--white); cursor: pointer; transition: 0.3s; }
        .socials i:hover { background: var(--orange); color: var(--blue); }

        /* --- Auth Modals --- */
        .modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.6); backdrop-filter: blur(5px); z-index: 2000; display: none; align-items: center; justify-content: center; padding: 20px; }
        .modal-card { background: var(--white); padding: 50px; border-radius: 40px; max-width: 500px; width: 100%; position: relative; animation: modalPop 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
        @keyframes modalPop { from { transform: scale(0.8) translateY(20px); opacity: 0; } to { transform: scale(1) translateY(0); opacity: 1; } }
        .close-btn { position: absolute; top: 25px; right: 25px; cursor: pointer; color: var(--blue); }

        /* --- Filter Area --- */
        .filter-nav { display: flex; justify-content: center; gap: 15px; margin-bottom: 50px; }
        .filter-btn { padding: 10px 25px; border-radius: 30px; border: 2px solid var(--gray); background: transparent; cursor: pointer; font-weight: 600; transition: 0.3s; }
        .filter-btn.active { background: var(--blue); color: var(--white); border-color: var(--blue); }

        /* --- Page State Management --- */
        .page { display: none; padding-top: 80px; }
        .page.active { display: block; }

        #user-controls { display: none; align-items: center; gap: 15px; }
        .user-badge { background: var(--white); color: var(--blue); padding: 5px 15px; border-radius: 20px; font-weight: 700; }

        @media (max-width: 1024px) {
            .care-grid, .blog-grid, .footer-grid { grid-template-columns: repeat(2, 1fr); }
            .split-section, .contact-grid { flex-direction: column; grid-template-columns: 1fr; }
            .hero-card h1 { font-size: 2.5rem; }
        }
        @media (max-width: 768px) {
            .care-grid, .blog-grid, .footer-grid { grid-template-columns: 1fr; }
            nav { display: none; }
            .steps-container { flex-direction: column; gap: 40px; }
            .steps-container::before { display: none; }
        }