:root {
     --primary-gradient: linear-gradient(to bottom left, #0f172a, #1e1a78, #0f172a);;
     --success-gradient: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
     --danger-gradient: linear-gradient(135deg, #FF6B6B 0%, #FFE66D 100%);
     --info-gradient: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
     --whatsapp-gradient: linear-gradient(135deg, #25D366 0%, #128C7E 100%);
 }

 /* Floating Action Button with Ripple Effect */
 .contact-fab {
     position: fixed;
     bottom: 30px;
     right: 30px;
     z-index: 100000;
 }

 .fab-button {
     width: 65px;
     height: 65px;
     border-radius: 50%;
     background: var(--primary-gradient);
     border: none;
     box-shadow: 0 4px 20px rgba(102, 126, 234, 0.5);
     cursor: pointer;
     display: flex;
     align-items: center;
     justify-content: center;
     transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
     position: relative;
     overflow: hidden;
 }

 .fab-button::before {
     content: '';
     position: absolute;
     width: 100%;
     height: 100%;
     background: rgba(255, 255, 255, 0.3);
     border-radius: 50%;
     transform: scale(0);
     transition: transform 0.5s ease;
 }

 .fab-button:hover::before {
     transform: scale(1.5);
     opacity: 0;
 }

 .fab-button:hover {
     transform: scale(1.15);
     box-shadow: 0 6px 25px rgba(102, 126, 234, 0.7);
 }

 .fab-button.active {
     transform: rotate(180deg) scale(1.1);
 }

 .fab-button i {
     font-size: 26px;
     color: white;
     transition: transform 0.3s ease;
     z-index: 1;
 }

 .fab-button.active i {
     transform: rotate(45deg);
 }

 /* Notification Badge */
 .notification-badge {
     position: absolute;
     top: -5px;
     right: -5px;
     background: #ff4757;
     color: white;
     width: 24px;
     height: 24px;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 11px;
     font-weight: bold;
     animation: pulse 2s infinite;
     border: 2px solid white;
 }

 @keyframes pulse {

     0%,
     100% {
         transform: scale(1);
     }

     50% {
         transform: scale(1.1);
     }
 }

 /* Action Bar with Enhanced Animations */
 .action-bar {
     position: fixed;
     bottom: 110px;
     right: 30px;
     display: flex;
     flex-direction: column;
     gap: 12px;
     opacity: 0;
     visibility: hidden;
     transform: translateY(30px) scale(0.8);
     transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
     z-index: 999;
 }

 .action-bar.active {
     opacity: 1;
     visibility: visible;
     transform: translateY(0) scale(1);
 }

 .action-item {
     display: flex;
     align-items: center;
     gap: 12px;
     background: white;
     border-radius: 50px;
     padding: 10px 20px 10px 10px;
     box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
     cursor: pointer;
     transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
     animation: slideInRight 0.5s ease forwards;
     opacity: 0;
     transform: translateX(50px);
     position: relative;
     overflow: hidden;
 }

 .action-item::before {
     content: '';
     position: absolute;
     top: 0;
     left: -100%;
     width: 100%;
     height: 100%;
     background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent);
     transition: left 0.5s ease;
 }

 .action-item:hover::before {
     left: 100%;
 }

 .action-item:nth-child(1) {
     animation-delay: 0.1s;
 }

 .action-item:nth-child(2) {
     animation-delay: 0.15s;
 }

 .action-item:nth-child(3) {
     animation-delay: 0.2s;
 }

 .action-item:nth-child(4) {
     animation-delay: 0.25s;
 }

 .action-item:nth-child(5) {
     animation-delay: 0.3s;
 }

 @keyframes slideInRight {
     to {
         opacity: 1;
         transform: translateX(0);
     }
 }

 .action-item:hover {
     transform: translateX(-8px) scale(1.05);
     box-shadow: 0 8px 25px rgba(0, 0, 0, 0.25);
 }

 .action-item:active {
     transform: translateX(-8px) scale(0.98);
 }

 .action-icon {
     width: 48px;
     height: 48px;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 20px;
     color: white;
     flex-shrink: 0;
     transition: transform 0.3s ease;
 }

 .action-item:hover .action-icon {
     transform: rotate(360deg);
 }

 .phone-icon {
     background: var(--success-gradient);
 }

 .email-icon {
     background: var(--danger-gradient);
 }

 .form-icon {
     background: var(--info-gradient);
 }

 .whatsapp-icon {
     background: var(--whatsapp-gradient);
 }

 .social-icon {
     background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
 }

 .action-content {
     display: flex;
     flex-direction: column;
     gap: 2px;
 }

 .action-text {
     font-weight: 600;
     color: #333;
     white-space: nowrap;
     font-size: 15px;
     line-height: 1;
 }

 .action-subtext {
     font-size: 11px;
     color: #888;
     white-space: nowrap;
 }

 /* Enhanced Modal */
 .modal-content {
     border-radius: 25px;
     border: none;
     overflow: hidden;
     box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
 }

 .modal-header {
     background: var(--primary-gradient);
     color: white;
     border: none;
     padding: 30px;
 }

 .modal-header h5 {
     font-weight: 600;
     font-size: 24px;
 }

 .modal-header .btn-close {
     filter: brightness(0) invert(1);
     opacity: 1;
 }

 .modal-body {
     padding: 35px;
     background: #f8f9fa;
 }

 .form-floating {
     margin-bottom: 20px;
 }

 .form-control,
 .form-select {
     border-radius: 12px;
     border: 2px solid #e0e0e0;
     padding: 15px 18px;
     transition: all 0.3s ease;
     background: white;
 }

 .form-control:focus,
 .form-select:focus {
     border-color: #667eea;
     box-shadow: 0 0 0 0.25rem rgba(102, 126, 234, 0.15);
     transform: translateY(-2px);
 }

 .form-label {
     font-weight: 600;
     color: #555;
     margin-bottom: 8px;
 }

 .btn-submit {
     background: var(--primary-gradient);
     border: none;
     border-radius: 12px;
     padding: 15px 35px;
     color: white;
     font-weight: 600;
     font-size: 16px;
     transition: all 0.3s ease;
     position: relative;
     overflow: hidden;
 }

 .btn-submit::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, height 0.6s;
 }

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

 .btn-submit:hover {
     transform: translateY(-3px);
     box-shadow: 0 8px 20px rgba(102, 126, 234, 0.4);
 }

 .btn-submit:active {
     transform: translateY(-1px);
 }

 .btn-submit span {
     position: relative;
     z-index: 1;
 }

 /* Info Cards */
 .info-card {
     background: white;
     border-radius: 25px;
     padding: 35px;
     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
     margin-bottom: 30px;
     animation: fadeInUp 0.6s ease;
 }

 @keyframes fadeInUp {
     from {
         opacity: 0;
         transform: translateY(30px);
     }

     to {
         opacity: 1;
         transform: translateY(0);
     }
 }

 .info-card h2 {
     color: #333;
     margin-bottom: 20px;
     font-weight: 700;
 }

 .info-card p {
     color: #666;
     line-height: 1.8;
 }

 .feature-list {
     list-style: none;
     padding: 0;
 }

 .feature-list li {
     padding: 12px 0;
     border-bottom: 1px solid #f0f0f0;
     display: flex;
     align-items: center;
     gap: 12px;
 }

 .feature-list li:last-child {
     border-bottom: none;
 }

 .feature-list li i {
     color: #667eea;
     font-size: 20px;
 }

 /* Toast Enhanced */
 .toast-container {
     position: fixed;
     top: 20px;
     right: 20px;
     z-index: 1100;
 }

 .toast {
     border-radius: 15px;
     box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
     border: none;
     min-width: 300px;
 }

 .toast-header {
     border-radius: 15px 15px 0 0;
     padding: 15px 20px;
 }

 .toast-body {
     padding: 15px 20px;
 }

 /* Social Links Modal */
 .social-links {
     display: grid;
     grid-template-columns: repeat(2, 1fr);
     gap: 15px;
     margin-top: 20px;
 }

 .social-link {
     display: flex;
     align-items: center;
     gap: 12px;
     padding: 15px;
     border-radius: 15px;
     background: white;
     border: 2px solid #e0e0e0;
     cursor: pointer;
     transition: all 0.3s ease;
     text-decoration: none;
     color: #333;
 }

 .social-link:hover {
     transform: translateY(-3px);
     box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
     border-color: #667eea;
 }

 .social-link i {
     font-size: 24px;
     width: 40px;
     height: 40px;
     display: flex;
     align-items: center;
     justify-content: center;
     border-radius: 10px;
     color: white;
 }

 .social-link .bi-facebook {
     background: #1877f2;
 }

 .social-link .bi-twitter-x {
     background: #000000;
 }

 .social-link .bi-instagram {
     background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
 }

 .social-link .bi-linkedin {
     background: #0077b5;
 }

 .social-link-text {
     font-weight: 600;
 }

 /* Backdrop Blur */
 .backdrop-blur {
     backdrop-filter: blur(10px);
     -webkit-backdrop-filter: blur(10px);
 }

 /* Responsive */
 @media (max-width: 768px) {
     .action-item {
         padding: 8px 15px 8px 8px;
     }

     .action-text {
         font-size: 14px;
     }

     .action-subtext {
         font-size: 10px;
     }

     .action-icon {
         width: 42px;
         height: 42px;
         font-size: 18px;
     }

     .contact-fab {
         bottom: 20px;
         right: 20px;
     }

     .fab-button {
         width: 60px;
         height: 60px;
     }

     .action-bar {
         bottom: 90px;
         right: 20px;
     }

     .social-links {
         grid-template-columns: 1fr;
     }
 }

 /* Loading Animation */
 .btn-submit.loading {
     pointer-events: none;
 }

 .btn-submit.loading span {
     opacity: 0;
 }

 .btn-submit.loading::after {
     content: '';
     position: absolute;
     width: 20px;
     height: 20px;
     top: 50%;
     left: 50%;
     margin-left: -10px;
     margin-top: -10px;
     border: 3px solid rgba(255, 255, 255, 0.3);
     border-top-color: white;
     border-radius: 50%;
     animation: spin 0.8s linear infinite;
 }

 @keyframes spin {
     to {
         transform: rotate(360deg);
     }
 }

 /* Modal dialog improvements */
 #socialModal .modal-dialog {
     max-width: 450px;
     margin: auto;
     transition: transform 0.25s ease-out;
 }

 /* Add slight zoom effect when modal opens */
 #socialModal.show .modal-dialog {
     transform: scale(1.03);
 }

 /* Modal content styling */
 #socialModal .modal-content {
     border-radius: 12px;
     border: none;
     box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
 }

 /* Modal header styling */
 #socialModal .modal-header {
     border-bottom: 1px solid #e9ecef;
     background-color: #f8f9fa;
     border-top-left-radius: 12px;
     border-top-right-radius: 12px;
 }

 /* Modal title */
 #socialModal .modal-title {
     font-size: 1.2rem;
     font-weight: 600;
     display: flex;
     align-items: center;
 }

 /* Close button spacing */
 #socialModal .btn-close {
     background-size: 55%;
 }

 /* Modal body padding */
 #socialModal .modal-body {
     padding: 20px 24px;
 }

 /* Responsive design */
 @media (max-width: 575px) {
     #socialModal .modal-dialog {
         max-width: 95%;
     }
 }