/* Updated css/style.css */
/* Theme colors */
:root {
    --blue: #003366;
    --green: #008000;
    --white: #fff;
    --light-blue: #add8e6;
}

/* General */
body { font-family: Arial, sans-serif; margin: 0; padding: 0; background: var(--white); color: var(--blue); }
a { text-decoration: none; color: inherit; }



/* Footer – Exact from your code (adapted colors to blue/green) */
        .footer {
            background: var(--dark);
            padding: 80px 5% 40px;
            color: #ddd;
            border-top: 1px solid rgba(0,128,0,0.2);
        }
        .footer-content {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
            gap: 40px;
            max-width: 1400px;
            margin: 0 auto 50px;
        }
        .footer-col h4 {
            color: white;
            margin-bottom: 20px;
            font-size: 18px;
            font-weight: 600;
        }
        .footer-col p, .footer-col a { font-size: 15px; line-height: 1.7; color: #ccc; }
        .social-links { display: flex; gap: 16px; margin-top: 16px; }
        .social-links a {
            width: 40px;
            height: 40px;
            background: rgba(0,128,0,0.3);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 20px;
            transition: 0.3s;
        }
        .social-links a:hover {
            background: var(--primary-green);
            transform: translateY(-4px);
        }
        .footer-bottom {
            text-align: center;
            padding-top: 30px;
            border-top: 1px solid rgba(0,128,0,0.2);
            font-size: 14px;
            color: #aaa;
        }

         /* WhatsApp Float & Modal – Modern & Compact (2025 Style) */
         .whatsapp-float {
             position: fixed;
             bottom: 28px;
             right: 28px;
             width: 64px;
             height: 64px;
             background: linear-gradient(135deg, #25d366, #128c7e);
             color: white;
             border-radius: 50%;
             display: flex;
             align-items: center;
             justify-content: center;
             font-size: 2.4rem;
             box-shadow: 0 8px 24px rgba(37, 211, 102, 0.35);
             cursor: pointer;
             z-index: 1000;
             transition: all 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275);
         }

         .whatsapp-float:hover {
             transform: scale(1.15) translateY(-4px);
             box-shadow: 0 16px 40px rgba(37, 211, 102, 0.55);
         }

         .whatsapp-modal {
             display: none;
             position: fixed;
             inset: 0;
             background: rgba(0,0,0,0.72);
             backdrop-filter: blur(8px);
             z-index: 2000;
             align-items: center;
             justify-content: center;
             padding: 16px;
         }

         .modal-content {
             background: white;
             border-radius: 20px;
             width: 100%;
             max-width: 380px;               /* Kept small & compact */
             overflow: hidden;
             box-shadow: 0 20px 60px rgba(0,0,0,0.28);
             animation: modalPop 0.4s ease-out;
         }

         @keyframes modalPop {
             from { opacity: 0; transform: scale(0.92) translateY(30px); }
             to   { opacity: 1; transform: scale(1) translateY(0); }
         }

         .modal-header {
             background: linear-gradient(135deg, #075e54, #128c7e);
             color: white;
             padding: 18px 24px;
             display: flex;
             align-items: center;
             gap: 14px;
             position: relative;
         }

         .modal-header ion-icon {
             font-size: 2.4rem;
         }

         .modal-header h3 {
             flex: 1;
             margin: 0;
             font-size: 1.35rem;
             font-weight: 600;
             letter-spacing: 0.3px;
         }

         .close {
             font-size: 2.2rem;
             font-weight: bold;
             cursor: pointer;
             transition: all 0.3s;
         }

         .close:hover {
             color: #ff6b6b;
             transform: rotate(90deg);
         }

         .modal-content > p {
             padding: 20px 24px 12px;
             font-size: 0.98rem;
             color: #444;
             margin: 0;
         }

         .service-list {
             padding: 0 20px 24px;
             display: flex;
             flex-direction: column;
             gap: 14px;
         }

         .service-btn {
             width: 100%;
             padding: 16px 20px;
             background: linear-gradient(135deg, #f0fdf4, #e6f9ed);
             border: 1px solid #a7f3d0;
             border-radius: 14px;
             font-size: 1rem;
             color: #006600;
             cursor: pointer;
             display: flex;
             align-items: center;
             gap: 14px;
             transition: all 0.35s ease;
             box-shadow: 0 2px 8px rgba(0,128,0,0.06);
         }

         .service-btn:hover {
             background: linear-gradient(135deg, #dcfce7, #bbf7d0);
             border-color: #4ade80;
             transform: translateY(-3px);
             box-shadow: 0 8px 20px rgba(0,128,0,0.12);
         }

         .service-btn ion-icon {
             font-size: 1.8rem;
             color: #25d366;
         }

         .powered-by {
             display: flex;
             align-items: center;
             justify-content: center;
             gap: 10px;
             padding: 16px 24px;
             background: #f8f9fa;
             font-size: 0.9rem;
             color: #555;
             border-top: 1px solid #eee;
         }

         .cks-logo {
             height: 22px;
         }

         /* Mobile adjustments – keep it compact */
         @media (max-width: 480px) {
             .modal-content {
                 max-width: 340px;
                 padding: 0;
             }
             .modal-header {
                 padding: 16px 20px;
             }
             .service-btn {
                 padding: 14px 16px;
                 font-size: 0.95rem;
             }
         }