/* 
Theme Name: Hello Elementor Child
Theme URI: https://github.com/elementor/hello-theme-child/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 2.0.0
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/* Add your custom styles here */
:root {
        /* Core Colors */
        --color-pink: #d53f8c;
        --color-pink-hover: #be185d;
        --color-pink-light: #fce7f3;
        --color-orange: #ea580c;
        --color-orange-hover: #c2410c;
        --color-orange-light: #ffedd5;
        
        --text-dark: #111827;
        --text-gray: #4b5563;
        --text-light: #6b7280;
        --bg-background: #fafaf9;
        --bg-surface: #ffffff;
        --border-color: #e5e7eb;
        
        --shadow-soft: 0 4px 20px rgba(0, 0, 0, 0.05);
        --shadow-hover: 0 10px 25px rgba(0, 0, 0, 0.1);
        --transition: all 0.3s ease;
    }

    * { box-sizing: border-box; margin: 0; padding: 0; }
    body { font-family: sans-serif; color: var(--text-gray); line-height: 1.6; background-color: var(--bg-background); overflow-x: hidden; }
    a { text-decoration: none; transition: var(--transition); }
    img { max-width: 100%; height: auto; display: block; }

    /* Layout */
    .container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 1.5rem !important; position: relative; }
    .section-padding { padding: 5rem 0; }
    .text-center { text-align: center; }

    /* Typography */
    h1, h2, h3, h4 { color: var(--text-dark); font-family: serif; font-weight: 700; line-height: 1.2; }
    .section-title { font-size: 2.2rem; margin-bottom: 1rem; }
    .section-subtitle { color: var(--text-light); max-width: 600px; margin: 0 auto 3rem auto; font-size: 1rem; }
    .text-pink { color: var(--color-pink); }
    .text-orange { color: var(--color-orange); }

    /* =========================================
       2 TYPES OF BUTTONS ONLY
       ========================================= */
    .btn { 
        display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; 
        padding: 0.8rem 2rem; border-radius: 50px; font-weight: 700; font-size: 0.85rem; 
        text-transform: uppercase; letter-spacing: 0.5px; cursor: pointer; 
        transition: var(--transition); border: 2px solid transparent; text-align: center;
    }
    
    /* Type 1: Primary Solid Orange */
    .btn-primary { 
        background-color: var(--color-orange); 
        color: white; 
    }
    .btn-primary:hover { 
        background-color: var(--color-orange-hover); 
        transform: translateY(-3px); 
        box-shadow: 0 8px 20px rgba(234, 88, 12, 0.3); 
    }

    /* Type 2: Outline Pink */
    .btn-outline { 
        background-color: white; 
        border-color: var(--color-pink); 
        color: var(--color-pink); 
    }
    .btn-outline:hover { 
        background-color: var(--color-pink); 
        color: white; 
        transform: translateY(-3px); 
        box-shadow: 0 8px 20px rgba(213, 63, 140, 0.3); 
    }

    /* Label for testing purposes */
        .page-label {
            background: #111827;
            color: white;
            padding: 10px 20px;
            font-size: 1rem;
            font-weight: bold;
            text-transform: uppercase;
            text-align: center;
            margin-top: 2rem;
            letter-spacing: 2px;
        }

        /* Base Hero Styles */
        .page-hero {
            position: relative;
            padding: 5rem 0;
            background: linear-gradient(135deg, var(--color-orange-light) 0%, var(--bg-surface) 100%);
            text-align: center;
            overflow: hidden;
            border-bottom: 2px solid #ddd;
        }
        
        .modern-breadcrumb {
            display: inline-flex; align-items: center; gap: 0.75rem; font-size: 0.8rem; font-weight: 700; text-transform: uppercase; color: var(--text-gray); background: white; padding: 0.6rem 1.5rem; border-radius: 50px; box-shadow: 0 4px 10px rgba(0,0,0,0.05); margin-bottom: 2rem; border: 1px solid #eee;
        }
        .modern-breadcrumb a { color: var(--color-orange); text-decoration: none;}
        .modern-breadcrumb .current { color: var(--color-pink); }

        .page-hero-title {
            font-size: 3.5rem;
            margin-bottom: 1.5rem;
            color: var(--text-dark);
            line-height: 1.2;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }

        /* =========================================================================
           PREMIUM TITLE ANIMATIONS (Common CSS)
           ========================================================================= */

        /* Animated Text Gradient */
        .text-animated-gradient {
            background: linear-gradient(to right, var(--color-orange), var(--color-pink), var(--color-orange));
            background-size: 200% auto;
            color: transparent;
            -webkit-background-clip: text;
            background-clip: text;
            animation: textShine 4s linear infinite;
            display: inline-block;
        }
        @keyframes textShine { to { background-position: 200% center; } }

        /* Base Icon Wrapper & Glow */
        .impact-icon-wrapper {
            display: inline-flex;
            position: relative;
            align-items: center;
            justify-content: center;
            margin-left: 10px;
            width: 60px;
            height: 60px;
            vertical-align: middle;
        }
        .impact-icon-wrapper::before {
            content: '';
            position: absolute;
            width: 100%;
            height: 100%;
            background: radial-gradient(circle, var(--color-pink-light) 0%, transparent 70%);
            border-radius: 50%;
            z-index: 1;
            animation: pulseGlow 3s ease-in-out infinite;
        }
        @keyframes pulseGlow {
            0%, 100% { transform: scale(0.8); opacity: 0.4; }
            50% { transform: scale(1.6); opacity: 1; }
        }

        /* Base Icon Styling */
        .impact-icon-wrapper i.main-icon {
            font-size: 2.5rem;
            position: relative;
            z-index: 2;
        }

        /* =======================================
           SPECIFIC ANIMATIONS PER PAGE
           ======================================= */

        /* 1. Leaf (Programs) */
        .anim-leaf { color: #10b981; animation: levitate 3s ease-in-out infinite; }
        .wrapper-leaf::after { content: '\f005'; font-family: 'Font Awesome 6 Free'; font-weight: 900; position: absolute; top: 0; right: 0; font-size: 1rem; color: #10b981; z-index: 3; opacity: 0; animation: floatSpark 3s ease-in-out infinite 1s; }

        /* 2. Network (Projects) */
        .anim-network { color: var(--color-orange); animation: pulseScale 2s infinite; }

        /* 3. Award (Empanelments) */
        .anim-award { color: #facc15; animation: levitate 4s ease-in-out infinite; text-shadow: 0 0 15px rgba(250, 204, 21, 0.5); }

        /* 4. Handshake (Partners) */
        .anim-handshake { color: var(--color-pink); animation: heartbeatStrong 2s infinite; }

        /* 5. Paper Plane (Contact) */
        .anim-plane { color: var(--color-orange); animation: flyHover 3s ease-in-out infinite; }

        /* 6. Magic Wand (Gallery) */
        .anim-magic { color: var(--color-pink); animation: wandWave 2.5s ease-in-out infinite; }
        .wrapper-magic::after { content: '\f005'; font-family: 'Font Awesome 6 Free'; font-weight: 900; position: absolute; top: -10px; left: -10px; font-size: 1.2rem; color: #facc15; z-index: 3; opacity: 0; animation: floatSpark 2.5s ease-in-out infinite 0.5s; }

        /* 7. Bullhorn (News) */
        .anim-horn { color: var(--color-orange); animation: broadcasting 2s infinite; transform-origin: left bottom; }

        /* --- KEYFRAMES --- */
        @keyframes levitate { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-8px) rotate(5deg); } }
        @keyframes pulseScale { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.15); } }
        @keyframes heartbeatStrong { 0%, 100% { transform: scale(1); } 15% { transform: scale(1.15); } 30% { transform: scale(1); } 45% { transform: scale(1.15); } 60% { transform: scale(1); } }
        @keyframes flyHover { 0%, 100% { transform: translate(0, 0) rotate(0deg); } 50% { transform: translate(5px, -10px) rotate(15deg); } }
        @keyframes wandWave { 0%, 100% { transform: rotate(-15deg); } 50% { transform: rotate(15deg); } }
        @keyframes broadcasting { 0%, 100% { transform: rotate(0deg); } 10%, 30%, 50% { transform: rotate(-15deg); } 20%, 40% { transform: rotate(10deg); } 60% { transform: rotate(0deg); } }
        @keyframes floatSpark { 0% { transform: translate(0, 0) scale(0.5) rotate(0deg); opacity: 0; } 50% { transform: translate(15px, -20px) scale(1) rotate(90deg); opacity: 1; } 100% { transform: translate(30px, -40px) scale(0.5) rotate(180deg); opacity: 0; } }

        /* Mobile Adjustment */
        @media (max-width: 768px) {
            .page-hero-title { font-size: 2.2rem; }
            .impact-icon-wrapper { width: 40px; height: 40px; margin-left: 5px; }
            .impact-icon-wrapper i.main-icon { font-size: 2rem; }
        }
    /* Badges & Text Links */
    .badge { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.4rem 1rem; border-radius: 50px; font-weight: 700; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 1rem; background: var(--color-pink-light); color: var(--color-pink); }
    .text-link { font-size: 0.8rem; font-weight: 700; color: var(--color-pink); border-bottom: 2px solid var(--color-pink); padding-bottom: 2px; text-transform: uppercase; display: inline-flex; align-items: center; gap: 0.5rem; }
    .text-link:hover { color: var(--color-pink-hover); border-color: var(--color-pink-hover); }
        .section-padding {
        padding: 5rem 0 !important;
    }
    /* Global Responsive Base */
    @media (max-width: 768px) {
        .section-padding { padding: 3rem 0 !important; }
        .section-title { font-size: 1.8rem; }
        .btn { width: 100%; padding: 1rem; }

    }