/* 
    =====================
    This is the css file for contact page(in the root folder).
    ====================== 
*/

 body {
     padding-top: 80px;
     /* background-color: #f8f9fa !important; */
     background-color: #102d19 !important;
     overflow-x: hidden;
 }

 .help-hero {
     background: linear-gradient(rgba(16, 45, 25, 0.434), rgba(16, 45, 25, 0.425)),
         url('https://images.unsplash.com/photo-1521737711867-e3b97375f902?auto=format&fit=crop&q=80&w=2000');
     background-size: cover;
     background-position: center;
     padding: 80px 0;
     color: white;
     text-align: center;
 }

 /* ============= Support Cards */
 .support-card {
     background: transparent;
     border: none;
     border-radius: 25px;
     padding: 30px;
     transition: 0.3s;
     height: 100%;
 }

 .support-icon {
     width: 60px;
     height: 60px;
     background: #fff !important;
     color: #198754;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 24px !important;
     margin: 0 auto 20px;
 }





 /* ========== Custom Accordion + / - */
 .accordion-item {
     border: 1px solid #e0e0e0 !important;
     border-radius: 12px !important;
     margin-bottom: 15px;
     overflow: hidden;
     transition: all 0.3s ease;
 }

 .accordion-item:hover {
     border-color: #198754 !important;
     /* Green border on hover */
 }

 .accordion-button {
     font-size: 1.1rem;
     font-weight: 600;
     padding: 20px;
     background-color: white !important;
     color: #333 !important;
     box-shadow: none !important;
     cursor: pointer !important;
     display: flex;
     justify-content: space-between;
     align-items: center;
 }

 /* Remove the default Bootstrap Arrow */
 .accordion-button::after {
     display: none !important;
 }

 /* Add the Custom + Sign */
 .accordion-button::before {
     content: '+';
     order: 2;
     /* Moves it to the right side */
     font-size: 24px;
     font-weight: 400;
     color: #198754;
     transition: transform 0.4s ease;
 }

 /* Change to - Sign when open */
 .accordion-button:not(.collapsed)::before {
     content: '−';
     color: #ffc107;
     transform: rotate(180deg);
 }

 .accordion-body {
     padding: 0 20px 20px 20px;
     font-size: 0.95rem;
     line-height: 1.6;
     background-color: white;
 }



 /* ======== faq Sideways Bouncing animation for Arrows */
 .animate-bounce {
     display: inline-block;
     animation: arrowBounce 2s infinite ease-in-out;
 }

 @keyframes arrowBounce {

     0%,
     20%,
     50%,
     80%,
     100% {
         transform: translateX(0);
     }

     40% {
         transform: translateX(6px);
         /* Smooth forward push */
     }

     60% {
         transform: translateX(3px);
         /* Soft secondary settle */
     }
 }



 /* ========== Animation for Call Pulse ========== */
 .animate-call {
     display: inline-block;
     animation: callPulse1 1.5s infinite ease-in-out;

 }

 @keyframes callPulse1 {
     0% {
         transform: scale(1);
     }

     50% {
         transform: scale(1.18);
     }

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

 /* the 4 support link */
 .support-icon-link {
     text-decoration: none;
     display: inline-block;
     cursor: pointer;
     color: #198754 !important;
 }


 /* ========== Animation for WhatsApp Chat Button ========== */
 .animate-whatsapp {
     display: inline-block;
     animation: whatsappAlert 3s infinite ease-in-out;
     transform-origin: bottom center;
 }

 @keyframes whatsappAlert {

     0%,
     30%,
     100% {
         transform: scale(1.4) rotate(0deg);
     }

     40% {
         transform: scale(1.2) rotate(-6deg);
     }

     48% {
         transform: scale(1.2) rotate(6deg);
     }

     56% {
         transform: scale(1.1) rotate(-3deg);
     }

     64% {
         transform: scale(1.05) rotate(0deg);
     }
 }



 /* ========== Animation for Mail / Email Notification ========== */
 .animate-mail {
     display: inline-block;
     animation: callPulse1 1.5s infinite ease-in-out;
 }

 @keyframes callPulse1 {
     0% {
         transform: scale(1);
     }

     50% {
         transform: scale(1.18);
     }

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



 /* ========== animation for loation */
 .animate-location {
     display: inline-block;
     animation: mailFly 2.5s infinite ease-in-out;
 }

 @keyframes mailFly {

     0%,
     20%,
     100% {
         transform: translateY(0) rotateX(0deg);
     }

     40% {
         transform: translateY(-10px) rotateX(20deg);
     }

     55% {
         transform: translateY(-4px) rotateX(10deg);
     }

     70% {
         transform: translateY(-1px) rotateX(0deg);
     }
 }