<style>
/*///////////////////////////////////////////////Voucher/////////////////////////////////////////*/
    
	/* Page Wrapper with Margin */
.page-wrapper {
  padding: 16px;
  max-width: 1300px;
  margin: 0 auto;
  margin-top: 20px;
}
	
	
	.contact-container {
      max-width: 1200px;
      margin: 100px auto;
      padding: 30px;
      background: #f8f8f8;
      border-radius: 20px;
      box-shadow: 0 0 25px rgba(0,0,0,0.1);
      animation: fadeIn 1s ease-in-out;
    }

    .contact-container h2 {
      text-align: center;
      margin-bottom: 20px;
      font-size: 2rem;
      color: #333;
    }

    .contact-form {
      display: grid;
      gap: 20px;
    }

    .contact-form input,
    .contact-form textarea {
      padding: 12px;
      border-radius: 10px;
      border: 1px solid #ccc;
      font-size: 1rem;
    }

    .contact-form button {
      background-color: #851207;
      color: white;
      padding: 15px;
      font-size: 1rem;
      border: none;
      border-radius: 12px;
      cursor: pointer;
      transition: 0.3s ease;
    }

    .contact-form button:hover {
      background-color: #a11a1a;
    }

    @keyframes fadeIn {
      from {opacity: 0; transform: translateY(20px);}
      to {opacity: 1; transform: translateY(0);}
    }

    .contact-info {
      margin-top: 40px;
      text-align: center;
    }

    .contact-info p {
      margin: 10px 0;
      font-size: 1rem;
      color: #555;
    }

    .map {
      margin-top: 30px;
      border-radius: 15px;
      overflow: hidden;
    }

    .map iframe {
      width: 100%;
      height: 300px;
      border: none;
    }

/*///////////////////////////////////////////////footer/////////////////////////////////////////*/

/* Footer Styling */
.footer { background-color: #333; color: #fff; padding: 40px 0; font-family: Arial, sans-serif; }

.footer-container { display: flex; justify-content: space-between; max-width: 1200px; margin: 0 auto; padding: 0 20px; }

.footer-brand, .footer-links, .footer-social, .footer-newsletter { width: 23%; }

.footer-logo { width: 150px; margin-bottom: 10px; }

.footer-description { font-size: 14px; color: #bbb; }

.footer-links h4, .footer-social h4, .footer-newsletter h4 { margin-bottom: 10px; font-size: 18px; font-weight: bold; }

.footer-links ul, .footer-social ul { list-style: none; padding: 0; }

.footer-links li, .footer-social li { margin-bottom: 8px; }

.footer-links a, .footer-social a { color: #fff; text-decoration: none; font-size: 16px; }

.footer-links a:hover, .footer-social a:hover { text-decoration: underline; }

.footer-email { width: 70%; padding: 8px; margin-right: 10px; border: 1px solid #ccc; border-radius: 4px; }

.footer-btn { padding: 8px 15px; background-color: #5cb85c; border: none; color: white; font-size: 16px; border-radius: 4px; cursor: pointer; }

.footer-btn:hover { background-color: #4cae4c; }

.footer-bottom { text-align: center; margin-top: 20px; font-size: 14px; color: #bbb; }

.footer-bottom p { margin: 0; }


.typing-indicator {
  display: flex;
  align-items: center;
  padding: 8px 12px;
}

.typing-indicator .dot {
  height: 8px;
  width: 8px;
  margin: 0 2px;
  background-color: #999;
  border-radius: 50%;
  animation: blink 1.4s infinite both;
}

.typing-indicator .dot:nth-child(2) {
  animation-delay: 0.2s;
}
.typing-indicator .dot:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes blink {
  0% { opacity: .2; }
  20% { opacity: 1; }
  100% { opacity: .2; }
}


/* Responsive Styles */
@media (max-width: 768px) { 
  .footer-container { flex-direction: column; align-items: center; }
  .footer-brand, .footer-links, .footer-social, .footer-newsletter { width: 100%; text-align: center; margin-bottom: 20px; }
  .footer-email { width: 80%; }
}

.modal {
  display: none;
  position: fixed;
  z-index: 9999;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.5);
  justify-content: center;
  align-items: center;
}
.modal-content {
  background: #fff;
  padding: 30px;
  border-radius: 10px;
  text-align: center;
  width: 90%;
  max-width: 400px;
  animation: fadeIn 0.3s ease-in-out;
}
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-20px); }
  to { opacity: 1; transform: translateY(0); }
}


/*/////////////////////////////////////////////////blogger/////////////////////////////////////////////////////////*/


</style>



