/* Reset + Variables */
        * { margin: 0; padding: 0; box-sizing: border-box; }

        :root{
            /* Coolors palette + white (minimal variable updates) */
            --primary: #033D41;     /* dark teal */
            --secondary: #030402;   /* almost black */
            --accent: #05989E;      /* bright teal */
            --highlight: #0CF1FD;   /* light cyan */
            --deep-black: #020101;  /* intense black */
            --white: #FFFFFF;       /* white */
            /* Keep variable names used throughout the stylesheet */
            --light: var(--white);        /* card / panel backgrounds */
            --text: var(--deep-black);    /* main text on white */
            --text-light: #666666;        /* subdued text */
            --shadow: 0 5px 15px rgba(0,0,0,0.1);
            --transition: all 0.3s ease;
        }

        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            line-height: 1.6;
            color: var(--text);
            background: var(--white);
            overflow-x: hidden;
        }

        .container { width: 90%; max-width: 1200px; margin: 0 auto; padding: 0 15px; }

        /* Header & Navigation */
        header {
            background: var(--primary);
            color: var(--white);
            padding: 1rem 0;
            position: sticky;
            top: 0;
            z-index: 1000;
            box-shadow: var(--shadow);
        }

        header .container { display: flex; justify-content: space-between; align-items: center; }

        .logo { display:flex; align-items:center; gap:10px; }
        .logo-icon { font-size: 2rem; color: var(--white); }
        .logo h1 { font-size:1.8rem; font-weight:700; color: var(--white); }

        nav ul { display:flex; list-style:none; gap:1.5rem; }
        nav a { color: var(--white); text-decoration:none; font-weight:500; transition:var(--transition); padding:0.5rem 0; position:relative; }
        nav a:hover, nav a.active { color: var(--highlight); }
        nav a.active::after {
            content:'';
            position:absolute;
            bottom:0; left:0; width:100%; height:3px; background:var(--highlight);
        }

        .mobile-menu-btn { display:none; background:none; border:none; color:var(--white); font-size:1.5rem; cursor:pointer; }

        /* Hero Section */
        .hero {
            background: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)), url('https://images.unsplash.com/photo-1454165804606-c3d57bc86b40?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1770&q=80') no-repeat center center/cover;
            color: var(--white);
            text-align:center;
            padding: 6rem 1rem;
            margin-bottom: 2rem;
        }

        .hero-content { max-width:800px; margin:0 auto; }
        .hero h2 { font-size:2.8rem; margin-bottom:1rem; animation:fadeIn 1s ease; }
        .hero p { font-size:1.2rem; margin-bottom:2rem; animation:fadeIn 1.5s ease; }

        .btn {
            display:inline-block;
            background: var(--accent);
            color: var(--white);
            padding: 0.8rem 2rem;
            text-decoration:none;
            border-radius:5px;
            font-weight:600;
            transition:var(--transition);
            border:none;
            cursor:pointer;
            animation:fadeIn 2s ease;
        }

        .btn:hover {
            background: var(--secondary);
            transform: translateY(-3px);
            box-shadow: 0 10px 20px rgba(0,0,0,0.2);
        }

        .btn-outline {
            background: transparent;
            border: 2px solid var(--white);
            color: var(--white);
        }
        .btn-outline:hover { background: var(--white); color: var(--primary); }

        /* Sections */
        section { padding: 4rem 0; }

        .section-title { text-align:center; margin-bottom:3rem; }
        .section-title h2 { font-size:2.2rem; color: var(--primary); position:relative; display:inline-block; margin-bottom:1rem; }
        .section-title h2::after { content:''; display:block; width:60px; height:4px; background:var(--accent); margin:0.5rem auto; border-radius:2px; }
        .section-title p { color: var(--text-light); max-width:700px; margin:0 auto; }

        /* Services Grid */
        .services-grid, .blog-grid {
            display:grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap:2rem;
            margin-top:2rem;
        }

        .service, .blog-post {
            background: var(--light);
            padding: 2rem;
            border-radius: 10px;
            box-shadow: var(--shadow);
            transition: var(--transition);
            text-align: center;
        }

        .service:hover, .blog-post:hover {
            transform: translateY(-5px);
            box-shadow: 0 15px 30px rgba(0,0,0,0.15);
        }

        .service-icon { font-size:2.5rem; color: var(--accent); margin-bottom:1rem; }
        .service h3, .blog-post h3 { color: var(--primary); margin-bottom:1rem; }
        .service p, .blog-post p { color: var(--text); text-align:left; }

        /* About Section */
        .about-content { display:grid; grid-template-columns: 1fr 1fr; gap:3rem; align-items:center; }
        .about-image { border-radius:10px; overflow:hidden; box-shadow: var(--shadow); }
        .about-image img { width:100%; height:auto; display:block; transition:var(--transition); }
        .about-image:hover img { transform:scale(1.05); }
        .about-text p { margin-bottom:1.5rem; font-size:1.1rem; line-height:1.8; }

        .mission-vision { background: var(--light); padding:2rem; border-radius:10px; margin-top:2rem; }
        .mission-vision h3 { color:var(--primary); margin-bottom:1rem; display:flex; align-items:center; gap:10px; }
        .mission-vision h3 i { color:var(--accent); }

        /* Blog Section */
        .blog { background: var(--white); }
        .spinner { border:4px solid #f3f3f3; border-top:4px solid var(--accent); border-radius:50%; width:40px; height:40px; animation:spin 1s linear infinite; margin:2rem auto; }
        @keyframes spin { 0%{transform:rotate(0deg);} 100%{transform:rotate(360deg);} }

        /* Contact Form */
        .contact-form { max-width:600px; margin:0 auto; background:var(--light); padding:2rem; border-radius:10px; box-shadow:var(--shadow); }
        .form-group { margin-bottom:1.5rem; }
        .form-group label { display:block; margin-bottom:0.5rem; color:var(--primary); font-weight:500; }
        .form-group input, .form-group textarea, .form-group select {
            width:100%; padding:1rem; border:1px solid #ddd; border-radius:5px; font-size:1rem; transition:var(--transition);
        }
        .form-group input:focus, .form-group textarea:focus, .form-group select:focus {
            outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(5,152,158,0.12);
        }
        .form-group textarea { min-height:150px; resize:vertical; }
        .form-error { color:var(--accent); font-size:0.9rem; margin-top:0.3rem; display:none; }
        .contact-success { display:none; color:var(--accent); text-align:center; margin-top:1rem; font-weight:500; }

        .contact-info { display:grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap:2rem; margin-top:3rem; }
        .contact-card { background:var(--light); padding:1.5rem; border-radius:10px; text-align:center; box-shadow:var(--shadow); }
        .contact-card i { font-size:2rem; color: var(--accent); margin-bottom:1rem; }

        /* Footer */
        footer { background: var(--primary); color: var(--white); padding:3rem 0 1.5rem; margin-top:4rem; }
        .footer-content { display:grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap:2rem; margin-bottom:2rem; }
        .footer-column h3 { font-size:1.2rem; margin-bottom:1.5rem; position:relative; display:inline-block; }
        .footer-column h3::after { content:''; position:absolute; left:0; bottom:-8px; width:40px; height:3px; background:var(--accent); }
        .footer-column p, .footer-column a { color: rgba(255,255,255,0.8); margin-bottom:0.8rem; display:block; text-decoration:none; transition:var(--transition); }
        .footer-column a:hover { color: var(--highlight); transform: translateX(5px); }
        .social-links { display:flex; gap:1rem; margin-top:1rem; }
        .social-links a { display:flex; align-items:center; justify-content:center; width:40px; height:40px; background: rgba(255,255,255,0.08); border-radius:50%; transition:var(--transition); }
        .social-links a:hover { background: var(--accent); transform: translateY(-3px); }
        .copyright { text-align:center; padding-top:1.5rem; border-top:1px solid rgba(255,255,255,0.1); color: rgba(255,255,255,0.6); font-size:0.9rem; }

        .vcard-btn { display:inline-block; margin-top:1rem; padding:0.8rem 1.5rem; background:var(--accent); color:var(--white); border-radius:5px; text-decoration:none; font-weight:500; transition:var(--transition); }
        .vcard-btn:hover { background:var(--secondary); transform:translateY(-2px); }

        /* WhatsApp Floating Button (kept original green to match WhatsApp brand) */
        .whatsapp-float { position:fixed; width:60px; height:60px; bottom:40px; right:40px; background-color:#25d366; color:var(--white); border-radius:50px; text-align:center; font-size:30px; box-shadow:2px 2px 10px rgba(0,0,0,0.2); z-index:100; display:flex; align-items:center; justify-content:center; transition:var(--transition); animation:pulse 2s infinite; }
        .whatsapp-float:hover { background-color:#128C7E; transform:scale(1.1); }
        @keyframes pulse { 0%{ box-shadow:0 0 0 0 rgba(37,211,102,0.7);} 70%{ box-shadow:0 0 0 10px rgba(37,211,102,0);} 100%{ box-shadow:0 0 0 0 rgba(37,211,102,0);} }

        /* Chat Widget (minimal, non-intrusive) - kept as previously added */
        .chat-widget { position: fixed; right: 110px; bottom: 40px; z-index: 2000; font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; }
        .chat-toggle { width:56px; height:56px; border-radius:50%; background: linear-gradient(135deg, var(--accent), var(--secondary)); color:#fff; display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow); cursor:pointer; }
        .chat-panel { width:340px; max-width:calc(100vw - 40px); height:480px; background:var(--white); border-radius:10px; box-shadow:var(--shadow); overflow:hidden; display:none; flex-direction:column; margin-bottom:12px; }
        .chat-panel.open { display:flex; }
        .chat-header { background:var(--primary); color:var(--white); padding:10px 12px; display:flex; align-items:center; justify-content:space-between; gap:10px; }
        .chat-header .title { font-weight:600; font-size:14px; }
        .chat-header .numbers { font-size:12px; opacity:0.95; text-align:right; }
        .chat-messages { padding:12px; flex:1; overflow-y:auto; background: linear-gradient(#fff, #f8f9fb); }
        .msg { margin-bottom:12px; max-width:85%; line-height:1.4; font-size:14px; padding:8px 10px; border-radius:8px; box-shadow:0 2px 6px rgba(0,0,0,0.04); }
        .msg.user { margin-left:auto; background:var(--accent); color:var(--white); }
        .msg.assistant { margin-right:auto; background:#f0f0f0; color:var(--text); }
        .chat-input { display:flex; gap:8px; padding:10px; border-top:1px solid #eee; background:#fff; }
        .chat-input textarea { flex:1; resize:none; padding:8px; border-radius:6px; border:1px solid #ddd; font-size:14px; font-family:inherit; }
        .chat-input button { background:var(--accent); color:var(--white); border:none; padding:8px 12px; border-radius:6px; cursor:pointer; }
        .chat-small-note { font-size:11px; color:var(--text-light); padding:8px 12px; border-top:1px solid #fafafa; background:#fff; }

        /* Responsive */
        @media (max-width:768px) {
            header .container { flex-direction:column; gap:1rem; }
            nav ul { flex-direction:column; gap:0.5rem; text-align:center; display:none; }
            nav ul.show { display:flex; }
            .mobile-menu-btn { display:block; position:absolute; top:1rem; right:1rem; }
            .hero h2 { font-size:2rem; }
            .about-content { grid-template-columns:1fr; }
            .services-grid, .blog-grid { grid-template-columns:1fr; }
            .footer-content { grid-template-columns:1fr; }
            .whatsapp-float { width:50px; height:50px; bottom:20px; right:20px; font-size:24px; }
            .chat-widget { right:80px; bottom:90px; }
            .chat-panel { height:60vh; width:90vw; }
            .contact-info { grid-template-columns:1fr; }
        }

        /* Animation */
        @keyframes fadeIn { from{ opacity:0; transform:translateY(20px);} to{ opacity:1; transform:translateY(0);} }
        .service, .blog-post { animation: fadeIn 0.6s ease-out; }

        .country-flag { width:24px; height:16px; display:inline-block; margin:0 5px; vertical-align:middle; border:1px solid #ddd; }


.blog-card {
    background: #fff;
    padding: 25px;
    border-radius: 12px;
            text-align: center;

    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.blog-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 25px rgba(0,0,0,0.12);
}




.blog-card h3 a {
    pointer-events: none;   /* disables clicking */
    color: var(--primary);            /* normal text color */
    text-decoration: none;  /* remove underline */
    cursor: default;        /* remove link cursor */
}

.blog-card h3 a:hover {
    color: var(--primary);          /* no hover color */
}



.blog-card p {
    margin: 15px 0;
    color: #555;
    line-height: 1.6;
}

.blog-card .read-more {
    display: inline-block;
    margin-top: 10px;
    font-weight: 600;
    color: #007bff;
    text-decoration: none;
}


/* Base card (same smoothness as blog) */
.service-card {
  background: #fff;
    padding: 25px;
    border-radius: 12px;
            text-align: center;

    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* Hover effect copied from blog style */
.service-card:hover {
 transform: translateY(-5px);
    box-shadow: 0 6px 25px rgba(0,0,0,0.12);
}

/* Center everything inside card */
.service-card {
    text-align: center;
}

/* SVG Icon Container */
.service-icon-box {
    width: 65px;
    height: 65px;
    color: #05989E; /* sets default icon color */

    margin: 0 auto 20px;   /* centers the icon block */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* SVG Icon */
.service-icon-box img,
.service-icon-box svg {
      width: 45px;
    height:45px;
    color: #05989E; /* SVG uses container color */

    transition: transform 0.3s ease;
    object-fit: contain;
}



.service-card:hover .service-icon-box {
    color: #033D41; /* dark teal or any hover color */
}