:root {
      --primary: #5dd0e2;
    --primary-dark: #398591;
     --secondary: #10b981;
     --success: #10b981;
     --warning: #f59e0b;
     --danger: #ef4444;
 }
 

 h1,
 h2,
 h3,
 h4,
 h5,
 h6 {
     font-family: 'Playfair Display', serif;
 }


 /* Page Header */
 .page-header {
     background: linear-gradient(135deg, rgba(51, 88, 126, 0.95) 0%, var(--primary) 100%),
         url('data:image/svg+xml,<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg"><rect width="100" height="100" fill="%232c3e50"/><path d="M0 0h50v50H0zm50 50h50v50H50z" fill="%231a252f"/></svg>');
     background-size: cover, 30px 30px;
     padding: 100px 0 80px;
     position: relative;
 }

 /* Form Styling */
 .form-input,
 .form-textarea,
 .form-select {
     width: 100%;
     padding: 16px 20px;
     border: 2px solid rgba(44, 62, 80, 0.1);
     border-radius: 12px;
     font-family: 'Outfit', sans-serif;
     transition: all 0.3s ease;
     background: white;
     font-size: 16px;
 }

 .form-input:focus,
 .form-textarea:focus,
 .form-select:focus {
     outline: none;
     border-color: var(--primary);
     box-shadow: 0 0 0 3px rgba(230, 126, 34, 0.1);
 }

 .form-textarea {
     resize: vertical;
     min-height: 150px;
 }

 /* Button */
 .btn-primary {
     background: var(--primary);
     color: white;
     padding: 18px 50px;
     border-radius: 50px;
     font-weight: 600;
     transition: all 0.3s ease;
     border: none;
     cursor: pointer;
     font-size: 18px;
     position: relative;
     overflow: hidden;
 }

 .btn-primary::before {
     content: '';
     position: absolute;
     top: 50%;
     left: 50%;
     width: 0;
     height: 0;
     border-radius: 50%;
     background: rgba(255, 255, 255, 0.3);
     transform: translate(-50%, -50%);
     transition: width 0.6s ease, height 0.6s ease;
 }

 .btn-primary:hover::before {
     width: 300px;
     height: 300px;
 }

 .btn-primary:hover {
     transform: translateY(-2px);
     box-shadow: 0 10px 30px var(--primary-dark);
 }

 /* Contact Cards */
 .contact-card {
     background: white;
     border-radius: 20px;
     padding: 40px;
     box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
     transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
     border: 1px solid rgba(0, 0, 0, 0.05);
 }

 .contact-card:hover {
     transform: translateY(-10px);
     box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
 }

 .contact-icon {
     width: 70px;
     height: 70px;
     background: linear-gradient(135deg, var(--primary));
     border-radius: 20px;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 30px;
     color: white;
     margin-bottom: 20px;
     animation: float 3s ease-in-out infinite;
 }

 /* WhatsApp Button */
 .whatsapp-float {
     position: fixed;
     bottom: 30px;
     right: 30px;
     background: #25D366;
     color: white;
     width: 60px;
     height: 60px;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 30px;
     box-shadow: 0 4px 20px rgba(37, 211, 102, 0.4);
     cursor: pointer;
     transition: all 0.3s ease;
     z-index: 1000;
     animation: pulse 2s ease-in-out infinite;
 }

 .whatsapp-float:hover {
     transform: scale(1.1);
     box-shadow: 0 6px 30px rgba(37, 211, 102, 0.6);
 }

 @media (max-width: 768px) {
     .whatsapp-float {
         width: 50px;
         height: 50px;
         font-size: 24px;
         bottom: 20px;
         right: 20px;
     }
 }