/* General styling for the document */
 
 body {
     font-family: "Inter", sans-serif;
     @apply bg-gray-50 text-gray-800;
     scroll-behavior: smooth;
 }
 
 .btn-primary {
     position: relative;
     display: inline-block;
     box-sizing: border-box;
     padding: 8px 22px 8px 16px;
     border-radius: 5px;
     border: 2px solid;
     border-color: #700E12;
     font-weight: bold;
     cursor: pointer;
     transition: transform 0.4s ease, box-shadow 0.4s ease;
 }
 /* Tablets */
 
 @media screen and (max-width: 992px) {
     .btn-primary {
         padding: 7px 20px;
         font-size: 0.5rem;
     }
 }
 /* Mobile (Portrait) */
 
 @media screen and (max-width: 768px) {
     .btn-primary {
         padding: 3px 5px;
         font-size: 0.5rem;
         border-radius: 4px;
     }
 }
 /* Small Mobile (less than 480px) */
 
 @media screen and (max-width: 480px) {
     .btn-primary {
         padding: 2px 5px;
         font-size: 0.5rem;
         border-radius: 3px;
     }
 }
 
 .btn-primary::after {
     content: "›";
     position: absolute;
     top: 50%;
     transform: translateY(-50%);
     right: 12px;
     /* stays fixed */
     opacity: 0;
     transition: opacity 0.4s ease;
 }
 
 .text-3x1 {
     font-size: 25px;
 }
 
 .btn-primary:hover {
     transform: scale(1.03);
     box-shadow: 0 8px 8px rgba(0, 0, 0, 0.3);
     color: white;
     background: #800000;
 }
 
 .btn-back {
     position: relative;
     display: inline-block;
     box-sizing: border-box;
     font-weight: bold;
     cursor: pointer;
     padding: 8px 22px 8px 16px;
     border-radius: 5px;
     border-width: 2px;
     border-style: solid;
     border-image: initial;
     border-color: rgb(112, 14, 18);
     transition: transform 0.4s, box-shadow 0.4s;
 }
 
 .btn-back:hover {
     transform: scale(1.03);
     box-shadow: 0 8px 8px rgba(0, 0, 0, 0.3);
     color: white;
     background: #800000;
 }
 
 .btn-primary:hover::after {
     opacity: 1;
 }
 
 .icon img {
     width: 40px;
     border-radius: 50%;
     background: transparent;
 }
 
 img.relative.w-full.h-80.lg\:h-\[450px\].object-cover.rounded-2xl.shadow-lg.transform.transition-transform.duration-500.hover\:scale-105 {
     width: 515px;
     height: 515px;
 }
 
 .margin-top {
     margin-top: 20px;
 }
 /* Custom gradient backgrounds */
 
 .gradient-bg {
     background: linear-gradient(135deg, #ffffff 0%, #ffffff 100%);
 }
 
 .gradient-text {
     background: linear-gradient(90deg, #85182a 0%, #6e0f1f 100%);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
 }
 
 .nav-color {
     background-color: #85182a !important;
 }
 /* Custom button styles */
 
 .btn-primary {
     @apply bg-gradient-to-r from-sky-600 to-sky-500 text-white font-semibold py-3 px-6 rounded-full hover: from-sky-700 hover: to-sky-600 transition-all duration-300 transform hover: scale-105 shadow-lg hover: shadow-xl;
 }
 
 .box-shadow {
     box-shadow: 0 4px 10px rgba(240, 122, 122, 0.3);
 }
 
 .uni-carousel {
     position: relative;
     width: 100%;
     height: 530px;
     overflow: hidden;
     box-shadow: 0 8px 20px rgba(240, 122, 122, 0.3);
     background-size: cover;
     background-position: center;
     transition: background-image 0.8s ease-in-out;
 }
 /* For extra-large screens (above 1400px) */
 
 @media screen and (min-width: 1400px) {
     .uni-carousel {
         height: 610px;
     }
 }
 /* For laptops/desktops */
 
 @media screen and (max-width: 1200px) {
     .uni-carousel {
         height: 480px;
     }
 }
 /* For tablets */
 
 @media screen and (max-width: 992px) {
     .uni-carousel {
         height: 400px;
     }
 }
 /* For small tablets and large phones */
 
 @media screen and (max-width: 768px) {
     .uni-carousel {
         height: 180px;
     }
 }
 /* For mobile phones */
 
 @media screen and (max-width: 480px) {
     .uni-carousel {
         height: 160px;
     }
 }
 /* Content section */
 
 .uni-content {
     width: 40%;
     margin-left: 130px;
     opacity: 0;
     transform: translateY(80px);
     transition: all 0.8s ease;
     position: relative;
     top: 8%;
 }
 
 .uni-content.show {
     opacity: 1;
     transform: translateY(0);
 }
 /* Responsive content layout */
 
 @media screen and (max-width: 992px) {
     .uni-content {
         width: 50%;
         text-align: left;
         margin-left: 20px !important;
         top: 5%;
     }
 }
 
 @media screen and (max-width: 480px) {
     .expert-description.mb-5 {
         margin: 10px -130px !important;
     }
 }
 
 @media screen and (max-width: 768px) {
     .expert-description.mb-5 {
         margin: 10px -130px !important;
     }
 }
 
 @media screen and (max-width: 768px) {
     .uni-content {
         width: 50%;
         text-align: left;
         margin-left: 20px !important;
         top: 5%;
     }
 }
 
 @media screen and (max-width: 480px) {
     .uni-content {
         width: 50%;
         text-align: left;
         margin-left: 20px !important;
         top: 5%;
     }
 }
 /* Heading */
 
 .User-headign h1 {
     text-align: center;
     font-size: 22px;
     font-weight: 500;
     margin-bottom: 10px;
     color: #700e12;
 }
 
 .uni-content h1 {
     font-size: 30px;
     font-weight: bold;
     margin-bottom: 10px;
     color: #85182a;
 }
 /* Responsive heading text */
 
 @media screen and (max-width: 992px) {
     .uni-content h1 {
         font-size: 26px;
     }
 }
 
 @media screen and (max-width: 768px) {
     .uni-content h1 {
         font-size: 10px;
         margin-bottom: 5px;
     }
 }
 
 @media screen and (max-width: 480px) {
     .uni-content h1 {
         font-size: 10px;
         margin-bottom: 5px;
     }
 }
 /* Paragraph */
 
 .uni-content p {
     font-size: 1rem;
     color: #000;
     text-align: justify;
 }
 /* Responsive paragraph text */
 
 @media screen and (max-width: 992px) {
     .uni-content p {
         font-size: 0.75rem;
     }
 }
 
 @media screen and (max-width: 768px) {
     .uni-content p {
         font-size: 0.5rem;
     }
 }
 
 @media screen and (max-width: 480px) {
     .uni-content p {
         font-size: 0.40rem;
         margin-bottom: 2px !important;
     }
 }
 /* Button */
 
 .uni-btn {
     margin-top: 30px;
     display: inline-block;
     padding: 8px 16px;
     border: 1px solid rgb(153, 34, 34);
     color: rgb(153, 34, 34);
     text-decoration: none;
     border-radius: 4px;
     transition: all 0.3s ease;
 }
 
 .uni-btn:hover {
     background: rgb(153, 34, 34);
     color: #fff;
 }
 /* Responsive button size */
 
 @media screen and (max-width: 768px) {
     .uni-btn {
         padding: 6px 14px;
         font-size: 0.9rem;
     }
 }
 
 @media screen and (max-width: 480px) {
     .uni-btn {
         padding: 2px 3px;
         font-size: 0.55rem;
         margin-top: 5px;
     }
 }
 /* Arrow buttons */
 
 .uni-prev,
 .uni-next {
     position: absolute;
     top: 50%;
     transform: translateY(-50%);
     background: rgba(255, 255, 255, 0.9);
     border: none;
     border-radius: 50%;
     width: 40px;
     height: 40px;
     font-size: 44px;
     color: #85182a;
     cursor: pointer;
     display: flex;
     align-items: center;
     justify-content: center;
     transition: opacity 0.3s ease, background 0.3s ease;
     z-index: 10;
     opacity: 0;
     pointer-events: none;
 }
 
 .uni-carousel:hover .uni-prev,
 .uni-carousel:hover .uni-next {
     opacity: 1;
     pointer-events: auto;
 }
 
 .uni-prev {
     left: 20px;
 }
 
 .uni-next {
     right: 20px;
 }
 
 .uni-prev:hover,
 .uni-next:hover {
     background: rgba(255, 255, 255, 1);
 }
 /* Responsive arrow size */
 
 @media screen and (max-width: 768px) {
     .uni-prev,
     .uni-next {
         width: 30px;
         height: 30px;
         font-size: 32px;
     }
 }
 
 @media screen and (max-width: 480px) {
     .uni-prev,
     .uni-next {
         width: 26px;
         height: 26px;
         font-size: 26px;
     }
 }
 /* Card hover effects */
 
 .expertise-section {
     background: #85182a;
     background-image: url("/img/bg1.svg");
     text-align: center;
     padding: 20px 10px;
     width: 100% !important;
 }
 
 .expertise-section h2 {
     color: #fff;
     font-size: 22px;
     font-weight: 600;
     position: relative;
     display: inline-block;
     padding-bottom: 8px;
 }
 
 .expertise-cards {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
     gap: 20px;
     padding: 40px;
     text-align: center;
     height: auto;
     box-sizing: border-box;
 }
 
 @media (max-width: 1024px) {
     .expertise-cards {
         padding: 30px;
         gap: 15px;
     }
 }
 
 .expertise-cards-1 {
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     gap: 20px;
     padding: 40px;
     text-align: center;
     height: auto;
     box-sizing: border-box;
 }
 
 @media (max-width: 1024px) {
     .expertise-cards-1 {
         padding: 30px;
         gap: 5px;
     }
 }
 /* Mobile */
 
 @media (max-width: 768px) {
     .expertise-cards-1 {
         grid-template-columns: 1fr;
         padding: 20px;
         gap: 5px;
     }
 }
 
 .card-1 {
     background: #fafafa;
     padding: 20px;
     border-radius: 12px;
     box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
     position: relative;
     overflow: hidden;
     transition: transform 0.3s ease, box-shadow 0.3s ease;
     height: 330px;
     width: 80%;
     margin-left: -20px;
 }
 
 @media (hover: hover) {
     .card-1:hover {
         transform: translateY(-5px);
         box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
     }
 }
 
 @media (max-width: 1024px) {
     .card-1 {
         padding: 18px;
         border-radius: 10px;
     }
 }
 /* Mobile adjustments */
 
 @media (max-width: 768px) {
     .card-1 {
         padding: 15px;
         border-radius: 8px;
         box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
     }
 }
 
 .card-1:hover {
     transform: translateY(-5px);
     box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
 }
 
 .card-1 .icon {
     padding: 20px;
     background: #eee;
     /* border-radius: 55%; */
     display: flex;
     align-items: center;
     justify-content: center;
     margin: 0 auto 15px auto;
 }
 
 .card-1 .icon:hover {
     border: 5px solid;
     border-color: #700E12;
 }
 
 .card-1 .icon img {
     width: 100%;
     height: 140px;
 }
 
 .card-1 h3 {
     color: #700e12;
     font-size: 16px;
     font-weight: bold;
     margin-bottom: 10px;
 }
 
 .card-1 p {
     font-size: 14px;
     color: #000000;
     line-height: 1.5;
 }
 /* Individual Card */
 
 .card {
     background: #fafafa;
     padding: 20px;
     border-radius: 12px;
     box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
     position: relative;
     overflow: hidden;
     transition: transform 0.3s ease, box-shadow 0.3s ease;
     height: 320px;
     width: 100%;
 }
 
 @media (hover: hover) {
     .card:hover {
         transform: translateY(-5px);
         box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
     }
 }
 /* Tablet adjustments */
 
 @media (max-width: 1024px) {
     .card {
         padding: 18px;
         border-radius: 10px;
     }
 }
 /* Mobile adjustments */
 
 @media (max-width: 768px) {
     .card {
         padding: 15px;
         border-radius: 8px;
         box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
     }
 }
 
 .card:hover {
     transform: translateY(-5px);
     box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
 }
 /* Icon */
 
 .card .icon {
     width: 80px;
     height: 80px;
     background: #eee;
     border-radius: 55%;
     display: flex;
     align-items: center;
     justify-content: center;
     margin: 0 auto 15px auto;
 }
 
 .card .icon:hover {
     border: 5px solid;
     border-color: #700E12;
 }
 
 .card .icon img {
     width: 75px;
     height: 73px;
 }
 /* Title */
 
 .card h3 {
     color: #700e12;
     font-size: 16px;
     font-weight: bold;
     margin-bottom: 10px;
 }
 
 .card-body {
     padding: 0 150px;
     text-align: justify;
 }
 /* Text */
 
 .card p {
     font-size: 14px;
     color: #000000;
     line-height: 1.5;
 }
 /* Diagonal Corner */
 /* .card {
     position: relative;
     overflow: hidden;
 } */
 /* corrected: URL-encoded SVG data URI with 3 layered waves */
 
 .card::after {
     content: "";
     position: absolute;
     bottom: 0;
     left: 0;
     width: 100%;
     height: 120px;
     /* tweak if you want taller/shorter waves */
     background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320'%3E%3Cpath fill='%23700e12' fill-opacity='0.76' d='M0,224L48,213.3C96,203,192,181,288,176C384,171,480,181,576,197.3C672,213,768,235,864,234.7C960,235,1056,213,1152,202.7C1248,192,1344,192,1392,192L1440,192L1440,320L0,320Z'/%3E%3Cpath fill='%23700e12' fill-opacity='0.65' d='M0,256L48,261.3C96,267,192,277,288,261.3C384,245,480,203,576,186.7C672,171,768,181,864,197.3C960,213,1056,235,1152,250.7C1248,267,1344,277,1392,282.7L1440,288L1440,320L0,320Z'/%3E%3Cpath fill='%23700e12' fill-opacity='0.55' d='M0,288L48,282.7C96,277,192,267,288,250.7C384,235,480,213,576,218.7C672,224,768,256,864,272C960,288,1056,288,1152,282.7C1248,277,1344,267,1392,266.7L1440,266L1440,320L0,320Z'/%3E%3C/svg%3E");
     background-repeat: no-repeat;
     background-position: bottom;
     background-size: cover;
     pointer-events: none;
     z-index: 0;
 }
 /* make sure card content sits above the waves */
 
 .card>* {
     position: relative;
     z-index: 1;
 }
 
 a.btn.btn-outline-primary {
     background: #ffffff;
     box-sizing: border-box;
     padding: 10px;
     border: 2px solid;
     border-color: #85182a;
     border-radius: 5px;
 }
 
 .text-center.mt-4 {
     margin-top: 50px;
 }
 
 .card-hover {
     @apply transition-all duration-300 transform hover: -translate-y-2 hover: shadow-xl;
 }
 
 .status-margin {
     margin-top: 45px;
 }
 /* Mobile menu animation */
 
 .mobile-menu {
     transition: max-height 0.5s ease-out;
     max-height: 0;
     overflow: hidden;
 }
 
 .mobile-menu.open {
     max-height: 500px;
 }
 /* .carousel-nav:hover {
     opacity: 1;
     background-color: white;
 }
 
 .carousel-nav.prev {
     left: 20px;
 }
 
 .carousel-nav.next {
     right: 20px;
 } */
 /* Section spacing */
 
 .section-spacing {
     padding-bottom: 30px;
     @apply py-16 lg: py-24;
 }
 /* Animation for elements */
 
 @keyframes fadeInUp {
     from {
         opacity: 0;
         transform: translateY(30px);
     }
     to {
         opacity: 1;
         transform: translateY(0);
     }
 }
 
 .alert-success {
     background-color: rgb(176 239 176);
     padding: 10px;
     margin-bottom: 9px;
     border-radius: 8px;
 }
 
 .alert-danger {
     background-color: rgb(235, 182, 162);
     padding: 10px;
     margin-bottom: 9px;
     border-radius: 8px;
 }
 
 .animate-fade-in-up {
     animation: fadeInUp 0.8s ease-out forwards;
 }
 /* Header shadow on scroll */
 
 .header-scrolled {
     box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
 }
 
 .field-color {
     color: #85182a !important;
 }
 /* Custom marquee */
 
 .marquee-container {
     overflow: hidden;
     position: relative;
     width: 100%;
 }
 
 .marign-icon {
     padding: 8px 0 8px 0;
     margin-left: 30px;
     gap: 1px;
 }
 
 .margin-right {
     margin-right: 40px;
 }
 
 .fa-facebook-f:before {
     background: #2c4ae2;
     padding: 5px 8px 5px 8px;
     border-radius: 3px;
 }
 
 .fa-x-twitter:before {
     background: #080808;
     padding: 5px 8px 5px 8px;
     border-radius: 3px;
 }
 
 .fa-instagram:before {
     background: radial-gradient(circle at 33% 100%, #fed373 4%, #f15245 30%, #d92e7f 62%, #9b36b7 85%, #515ecf);
     padding: 4px 8px 4px 8px;
     border-radius: 3px;
 }
 
 .fa-youtube:before {
     background: #FF0000;
     padding: 5px;
     border-radius: 3px;
 }
 
 .margin-gas {
     margin-left: 40px !important;
 }
 
 .logo-image {
     width: 130px !important;
     height: auto;
 }
 
 .marquee-content {
     display: flex;
     animation: marquee 20s linear infinite;
     white-space: nowrap;
 }
 
 @keyframes marquee {
     0% {
         transform: translateX(100%);
     }
     100% {
         transform: translateX(-100%);
     }
 }
 
 .font-medium {
     font-size: 14px !important;
     font-weight: 400 !important;
 }
 /* Custom shape divider */
 
 .custom-shape-divider-bottom {
     position: absolute;
     bottom: 0;
     left: 0;
     width: 100%;
     overflow: hidden;
     line-height: 0;
     transform: rotate(180deg);
 }
 
 .custom-shape-divider-bottom svg {
     position: relative;
     display: block;
     width: calc(100% + 1.3px);
     height: 50px;
 }
 
 .custom-shape-divider-bottom .shape-fill {
     fill: #FFFFFF;
 }
 
 .expert-profile-section {
     width: 100%;
     background: #6E3539;
     background-image: url("/img/bg1.svg");
     text-align: center;
     padding: 25px;
     color: #fff;
     font-family: Arial, sans-serif;
     margin-bottom: 20px;
 }
 
 .expert-profile-section h2 {
     font-size: 22px;
     font-weight: normal;
     color: #ffffff;
     margin: 0;
 }
 /* Container */
 
 .expert-auth-section .container {
     display: flex;
     justify-content: space-between;
     align-items: flex-start;
     /* gap: 20px !important; */
     padding: 30px;
 }
 
 @media (max-width: 992px) {
     .expert-auth-section .container {
         flex-direction: column;
         justify-content: center;
         align-items: center;
         padding: 25px 20px;
         gap: 25px;
     }
 }
 
 @media (max-width: 600px) {
     .expert-auth-section .container {
         width: 90%;
         flex-direction: column;
         justify-content: center;
         align-items: center;
         padding: 20px 15px;
         margin-left: 30px;
     }
 }
 
 .slide.active {
     display: block;
 }
 
 @media (max-width: 992px) {
     .auth-form {
         max-width: 350px;
         margin-right: 0;
         margin-bottom: 30px;
         margin-right: 0 !important;
     }
 }
 
 @media (max-width: 600px) {
     .auth-form {
         align-items: center !important;
         max-width: 100%;
         padding: 0 15px;
         margin-right: 0;
     }
 }
 
 @media (max-width: 480px) {
     .auth-form {
         align-items: center !important;
         max-width: 95%;
         margin: 0 -25px;
         padding: 0 10px;
     }
 }
 /* Left Side */
 
 .instructions {
     flex: 1;
     font-size: 15px;
     line-height: 1.6;
 }
 
 .instructions ul {
     padding-left: 20px;
 }
 /* Right Side (Form) */
 
 .auth-form {
     flex: 1;
     max-width: 400px;
     margin-right: 150px;
 }
 
 .auth-form label {
     display: block;
     margin: 10px 0 5px;
     font-weight: bold;
     color: #555;
 }
 
 .auth-form .required {
     color: red;
 }
 
 input#phone {
     width: 400px;
 }
 /* Tablet screens (below 992px) */
 
 @media (max-width: 992px) {
     input#phone {
         width: 300px;
     }
 }
 /* Mobile screens (below 600px) */
 
 @media (max-width: 600px) {
     input#phone {
         width: 100%;
     }
 }
 
 input#phone-1 {
     width: 100%;
 }
 /* Tablet screens (below 992px) */
 
 @media (max-width: 992px) {
     input#phone-1 {
         width: 300px;
     }
 }
 /* Mobile screens (below 600px) */
 
 @media (max-width: 600px) {
     input#phone-1 {
         width: 100%;
     }
 }
 
 .auth-form input {
     /* width: 100%; */
     padding: 10px;
     border: 1px solid #ddd;
     border-radius: 4px;
     margin-bottom: 15px;
 }
 /* Tablets (≤1024px) */
 
 @media (max-width: 1024px) {
     .auth-form input {
         font-size: 14.5px;
         padding: 9px;
     }
 }
 /* Mobiles (≤768px) */
 
 @media (max-width: 768px) {
     .auth-form input {
         font-size: 14px;
         padding: 8px;
         margin-bottom: 12px;
     }
 }
 /* Small Mobiles (≤480px) */
 
 @media (max-width: 480px) {
     .auth-form input {
         font-size: 13.5px;
         padding: 8px;
         margin-bottom: 10px;
     }
 }
 
 .auth-form input:disabled {
     background: #f1f3f5;
 }
 
 .auth-form button {
     width: 100%;
     padding: 12px;
     background: #ffffff;
     /* maroon */
     color: #000000;
     border: none;
     border-radius: 4px;
     font-weight: bold;
     border: 2px solid;
     border-color: #6e0f1f;
     cursor: pointer;
 }
 
 @media (max-width: 768px) {
     .auth-form button {
         font-size: 14px;
         padding: 10px;
         width: 90%;
         margin: 0 auto;
         display: block;
     }
 }
 /* Small Mobiles (≤480px) */
 
 @media (max-width: 480px) {
     .auth-form button {
         font-size: 13.5px;
         padding: 9px;
         width: 100%;
         margin: 0 auto;
     }
 }
 
 .auth-form button:hover {
     background: #85182a;
     color: #ffffff;
 }
 
 .container-1 {
     display: flex;
     justify-content: center;
     align-items: flex-start;
     padding: 30px;
     gap: 30px;
 }
 /* Left Instructions */
 
 .instructions {
     width: 80%;
     font-size: 15px;
     line-height: 1.7em;
 }
 /* Tablets (≤1024px) */
 
 @media (max-width: 1024px) {
     .instructions {
         width: 90%;
         font-size: 14px;
     }
 }
 /* Mobiles (≤768px) */
 
 @media (max-width: 768px) {
     .instructions {
         width: 95%;
         font-size: 13.5px;
         line-height: 1.6em;
     }
 }
 /* Small Mobiles (≤480px) */
 
 @media (max-width: 480px) {
     .instructions {
         width: 95%;
         font-size: 13px;
         line-height: 1.6em;
     }
 }
 
 .instructions ul {
     list-style-type: disc;
     list-style-position: outside;
     margin: 0;
     padding-left: 0;
 }
 
 .instructions ul li {
     margin-bottom: 12px;
     line-height: 1.5;
     font-size: 15px;
     text-align: justify;
     font-family: 'Raleway', sans-serif;
 }
 /* Right Form Section */
 
 .form-box {
     background: #f5f5f5;
     padding: 30px;
     width: 55%;
     border-radius: 6px;
 }
 
 .form-box form {
     display: grid;
     grid-template-columns: repeat(2, 1fr);
     gap: 20px;
 }
 
 .form-box input,
 .form-box select,
 .form-box textarea {
     width: 100%;
     padding: 8px 10px;
     border: 1px solid #ccc;
     border-radius: 4px;
     font-size: 14px;
 }
 
 .form-box textarea {
     grid-column: span 2;
     height: 100px;
 }
 
 .form-box label {
     font-weight: bold;
     margin-bottom: 5px;
     display: block;
     color: #700E12 !important;
 }
 
 .form-box .full {
     grid-column: span 1;
 }
 
 .form-buttom {
     display: flex;
 }
 
 .submit-btn {
     grid-column: span 2;
     padding: 10px;
     font-size: 16px;
     font-weight: bold;
     background: #0369a1;
     color: #ffff;
     border: 0px solid;
     border-radius: 4px;
     cursor: pointer;
     transition: 0.3s;
     width: 288px;
     margin-top: 10px;
 }
 
 .submit-btn:hover {
     /* background: rgb(77, 89, 143); */
     color: #fff;
 }
 
 .section-header {
     background: #85182a;
     /* fallback color */
     background-image: url("/img/bg1.svg");
     text-align: center;
     padding: 10px 15px;
     color: #fff;
     font-family: Arial, sans-serif;
     margin-bottom: 20px;
 }
 
 .section-header h2 {
     font-size: 25px;
     font-weight: bold;
     margin: 0;
     position: relative;
     display: inline-block;
     padding-bottom: 6px;
 }
 
 .section-header h2::after {
     content: "";
     display: block;
     width: 100%;
     height: 2px;
     background: #fff;
     margin: 4px auto 0 auto;
 }
 
 .what-we-do {
     display: flex;
     justify-content: space-between;
     align-items: flex-start;
     gap: 30px;
     padding: 50px 10%;
     box-sizing: border-box;
 }
 
 .what-text {
     flex: 1.2;
 }
 
 .what-text h2 {
     color: #700e12;
     /* dark red heading */
     font-size: 26px;
     margin-bottom: 20px;
     font-weight: 600;
 }
 
 .what-text p {
     color: #333;
     line-height: 1.7;
     margin-bottom: 18px;
     text-align: justify;
 }
 
 .what-video {
     flex: 1;
 }
 
 .what-video iframe {
     width: 100%;
     height: 280px;
     border-radius: 10px;
     border: none;
     margin-top: 65px;
 }
 /* Responsive */
 
 @media (max-width: 992px) {
     .what-we-do {
         flex-direction: column;
         padding: 15px 7%;
         align-items: center;
     }
     .what-video iframe {
         height: 220px;
     }
 }
 /* ===============================
   Share2Care Three Column Section
   =============================== */
 
 .s2c-threecols {
     display: flex;
     gap: 30px;
     padding: 50px 6%;
     box-sizing: border-box;
 }
 /* ----- Common Column Styles ----- */
 
 .s2c-col {
     flex: 1;
     text-align: center;
     padding: 18px;
     box-sizing: border-box;
     border-radius: 8px;
     background: #eef4ed;
 }
 /* ----- Images ----- */
 
 .s2c-img {
     max-width: 250px;
     height: 220px;
     margin: 10px auto 14px auto;
     display: block;
     border-radius: 6px
 }
 /* Medium screens (tablets) */
 
 @media (max-width: 1024px) {
     .s2c-img {
         max-width: 220px;
         height: 200px;
     }
 }
 /* Small screens (mobiles) */
 
 @media (max-width: 768px) {
     .s2c-img {
         max-width: 220px;
         height: 200px;
     }
 }
 /* Extra small screens */
 
 @media (max-width: 480px) {
     .s2c-img {
         max-width: 220px;
         height: 200px;
     }
 }
 /* ----- Titles ----- */
 
 .s2c-title {
     color: #700e12;
     font-size: 20px;
     font-weight: bold;
     margin: 10px 0 16px;
 }
 /* ----- Text Paragraphs ----- */
 
 .s2c-text {
     color: #000000ff;
     text-align: justify;
     line-height: 1.7;
     font-size: 15px;
 }
 /* ----- Responsive ----- */
 
 @media (max-width: 992px) {
     .s2c-threecols {
         flex-direction: column;
     }
 }
 /*---why-join-page ---*/
 
 .why-join-section {
     padding: 50px 10%;
     background: #fff;
 }
 
 .why-join-container {
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 40px;
     flex-wrap: wrap;
 }
 
 .why-join-text {
     flex: 1 1 55%;
 }
 
 .why-join-text h2 {
     font-size: 22px;
     color: #222;
     margin-bottom: 10px;
 }
 
 .why-join-text .highlight,
 .expert-text .highlight {
     font-size: 25px;
     font-weight: bold;
     color: #700E12;
     margin-bottom: 10px;
     letter-spacing: 2px;
 }
 
 .why-join-text p {
     color: #333;
     line-height: 1.6;
     margin-bottom: 15px;
     font-size: 16px;
     text-align: justify;
 }
 
 .why-join-image {
     flex: 1 1 40%;
     width: 600px;
     text-align: center;
     margin-top: 50px;
     background: #fed0bb;
     border-radius: 10px;
 }
 
 .why-join-image img {
     max-width: 95%;
     height: 350px;
     margin-left: 20px;
 }
 
 .expert-section {
     padding: 50px 10%;
     background: #fff;
 }
 
 .expert-container {
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 40px;
     flex-wrap: wrap;
 }
 
 .expert-image {
     flex: 1 1 40%;
     text-align: center;
 }
 
 .expert-image img {
     max-width: 100%;
     height: auto;
 }
 
 .expert-text {
     flex: 1 1 55%;
 }
 
 .expert-text p {
     color: #333;
     line-height: 1.6;
     margin-bottom: 15px;
     font-size: 16px;
     text-align: justify;
 }
 
 .contact {
     background: #6E3539;
     background-image: url("/img/bg1.svg");
     text-align: center;
     padding: 20px 10px;
 }
 
 .contact h1 {
     color: #fff;
     font-size: 22px;
     font-weight: 600;
     position: relative;
     display: inline-block;
     padding-bottom: 8px;
 }
 
 .contact h1::after {
     content: "";
     display: block;
     width: 90%;
     height: 2px;
     background: #fff;
     margin: 6px auto 0;
 }
 
 .contact-info {
     padding: 60px 10%;
     background: #fff;
 }
 
 .contact-container {
     display: flex;
     justify-content: space-between;
     gap: 30px;
     flex-wrap: wrap;
 }
 
 .contact-card {
     flex: 1 1 30%;
     background: #fff;
     padding: 30px 20px;
     text-align: center;
     border-radius: 12px;
     box-shadow: 0px 6px 20px rgba(0, 0, 0, 0.08);
     transition: transform 0.3s ease, box-shadow 0.3s ease;
 }
 /* Tablet screens (below 992px) */
 
 @media (max-width: 992px) {
     .contact-card {
         flex: 1 1 45%;
         padding: 25px 18px;
     }
 }
 /* Mobile screens (below 600px) */
 
 @media (max-width: 600px) {
     .contact-card {
         flex: 1 1 100%;
         padding: 20px 15px;
     }
 }
 
 .contact-card:hover {
     transform: translateY(-5px);
     box-shadow: 0px 10px 25px rgba(0, 0, 0, 0.15);
 }
 
 .contact-card .icon {
     width: 70px;
     height: 70px;
     background: #700e12;
     /* red circle */
     color: #fff;
     font-size: 28px;
     display: flex;
     align-items: center;
     justify-content: center;
     border-radius: 50%;
     margin: 0 auto 15px;
 }
 
 .contact-card h4 {
     font-size: 18px;
     font-weight: 600;
     margin-bottom: 10px;
 }
 
 .contact-card p {
     font-size: 15px;
     color: #333;
     line-height: 1.6;
 }
 /* Tablet screens (below 992px) */
 
 @media (max-width: 992px) {
     .contact-card .icon {
         width: 60px;
         height: 60px;
         font-size: 24px;
     }
     .contact-card h4 {
         font-size: 17px;
     }
     .contact-card p {
         font-size: 14px;
     }
 }
 /* Mobile screens (below 600px) */
 
 @media (max-width: 600px) {
     .contact-card .icon {
         width: 55px;
         height: 55px;
         font-size: 22px;
         margin-bottom: 12px;
     }
     .contact-card h4 {
         font-size: 16px;
     }
     .contact-card p {
         font-size: 13px;
         line-height: 1.5;
     }
 }
 
 .contact-form-section {
     display: flex;
     justify-content: center;
     align-items: center;
     padding: 40px 20px;
     background: #fafafa;
 }
 
 .contact-form {
     background: #fff;
     padding: 25px;
     width: 100%;
     max-width: 600px;
     border-radius: 8px;
     box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
 }
 /* Medium screens (tablets, below 992px) */
 
 @media (max-width: 992px) {
     .contact-form-section {
         padding: 30px 15px;
     }
     .contact-form {
         max-width: 500px;
         padding: 20px 25px;
     }
 }
 /* Small screens (mobile, below 600px) */
 
 @media (max-width: 600px) {
     .contact-form-section {
         flex-direction: column;
         align-items: stretch;
         padding: 25px 10px;
     }
     .contact-form {
         max-width: 100%;
         padding: 18px 15px;
         border-radius: 6px;
         box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
     }
 }
 
 .form-group {
     margin-bottom: 15px;
 }
 
 .form-group label {
     display: block;
     margin-bottom: 6px;
     font-weight: 600;
     font-size: 14px;
     color: #333;
 }
 
 .form-group input,
 .form-group select,
 .form-group textarea {
     width: 100%;
     padding: 10px 12px;
     border: 1px solid #ccc;
     border-radius: 5px;
     font-size: 14px;
     outline: none;
     transition: border 0.3s ease;
 }
 
 .form-group input:focus,
 .form-group select:focus,
 .form-group textarea:focus {
     border-color: #800000;
     /* Highlight color */
 }
 
 .s2c-card {
     background: #700E12;
     color: #fff !important;
     height: 450px !important;
 }
 
 .s2c-card h3 {
     color: #fff !important;
 }
 
 .s2c-card p {
     color: #fff !important;
 }
 
 .submit-btn {
     display: block;
     width: 100%;
     padding: 12px;
     background: #ffffff !important;
     color: #000000;
     font-size: 16px;
     font-weight: 600;
     border: 2px solid;
     border-color: #6e0f1f;
     border-radius: 5px;
     cursor: pointer;
     transition: background 0.3s ease;
 }
 
 .submit-btn:hover {
     background: #85182a !important;
 }
 
 .map-section {
     width: 45%;
     height: 450px;
     /* margin-left: 10%; */
     margin-right: 50px;
     margin-top: 0;
     border-radius: 8px;
     overflow: hidden;
     box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
 }
 /* Tablet screens (below 992px) */
 
 @media (max-width: 992px) {
     .map-section {
         width: 100%;
         height: 400px;
         margin-right: 0;
         margin-top: 20px;
     }
 }
 /* Mobile screens (below 600px) */
 
 @media (max-width: 600px) {
     .map-section {
         width: 100%;
         height: 300px;
         margin: 20px 0 0 0;
         border-radius: 6px;
         box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
     }
 }
 
 .stap-follow {
     background: #6E3539;
     background-image: url("/img/bg1.svg");
     text-align: center;
     padding: 20px 10px;
 }
 
 .stap-follow h1 {
     color: #fff;
     font-size: 22px;
     font-weight: 600;
     position: relative;
     display: inline-block;
     padding-bottom: 8px;
 }
 
 .stap-follow h1::after {
     content: "";
     display: block;
     width: 90%;
     height: 2px;
     background: #fff;
     margin: 6px auto 0;
 }
 
 .process-section {
     padding: 50px 10%;
     background: #fff;
 }
 
 .process-container {
     display: flex;
     align-items: flex-start;
     justify-content: space-between;
     gap: 40px;
     flex-wrap: wrap;
 }
 
 .process-text {
     flex: 1 1 55%;
 }
 
 .process-text .highlight {
     font-size: 25px;
     font-weight: bold;
     color: #700e12;
     /* maroon */
     margin-bottom: 20px;
     letter-spacing: 1px;
 }
 
 .process-text ul {
     padding-left: 20px;
     list-style: disc;
     color: #333;
     line-height: 1.6;
     font-size: 16px;
     text-align: justify;
 }
 
 .process-text ul li {
     margin-bottom: 5px;
     font-size: 14px;
 }
 
 .process-image {
     margin-top: 65px;
     margin-left: 10px;
     flex: 1 1 40%;
     text-align: center;
 }
 
 .process-image img {
     max-width: 100%;
     border-radius: 6px;
     /* slight rounded corners */
     box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
 }
 
 h1.mb-2 {
     font-size: 25px;
     font-weight: 800;
     background-image: url("/img/bg1.svg");
     text-align: center;
     margin-left: 70px;
 }
 /* Tablets (≤1024px) */
 
 @media (max-width: 1024px) {
     h1.mb-2 {
         font-size: 22px;
         margin-left: 40px;
     }
 }
 /* Mobiles (≤768px) */
 
 @media (max-width: 768px) {
     h1.mb-2 {
         font-size: 20px;
         margin-left: 0;
         background-size: 80%;
     }
 }
 /* Small Mobiles (≤480px) */
 
 @media (max-width: 480px) {
     h1.mb-2 {
         font-size: 18px;
         margin-left: 0;
         background-size: 70%;
     }
 }
 /* ----signup form---- */
 
 .container-form-1 {
     display: flex;
     justify-content: space-between;
     gap: 40px;
 }
 
 .instructions-1 {
     width: 45%;
     font-size: 15px;
     line-height: 1.6;
 }
 
 .instructions-1 ul {
     padding-left: 20px;
 }
 
 .form-box-1 {
     background: #f5f5f5;
     padding: 25px;
     border-radius: 4px;
     max-width: 850px;
     margin: auto;
 }
 
 .form-row {
     display: flex;
     gap: 20px;
     margin-bottom: 15px;
     flex-wrap: wrap;
 }
 
 .form-group-1 {
     flex: 1;
     min-width: 200px;
 }
 
 label {
     font-weight: bold;
     display: block;
     margin-bottom: 6px;
     font-size: 14px;
 }
 
 .required {
     color: red;
 }
 
 input,
 select,
 textarea {
     width: 100%;
     padding: 8px;
     border: 1px solid #ccc;
     border-radius: 3px;
     font-size: 14px;
 }
 
 textarea {
     resize: none;
     height: 70px;
 }
 /* .submit-btn {
     background: #0369a1;
     color: #ffffff;
     font-size: 16px;
     font-weight: bold;
     padding: 8px 25px;
     border-radius: 4px;
     cursor: pointer;
     transition: 0.3s;
 }
 
 .submit-btn:hover {
     background: orange;
     color: #fff;
 } */
 
 .container .mx-auto .px-51 {
     margin-left: 76px;
 }
 
 .footer-side {
     margin-left: 60px !important;
 }
 
 .footer-line {
     border: none;
     height: 2px;
     background: #ffffff;
     width: 100%;
     opacity: 0.6;
 }
 
 .exp-cards-section {
     margin-bottom: 40px;
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
     gap: 30px;
     padding: 40px 80px 40px 80px;
     background: #f8f8f8;
 }
 
 .exp-card {
     background: #fff;
     border: 1px solid #ddd;
     border-radius: 4px;
     overflow: hidden;
     transition: box-shadow 0.3s ease;
 }
 /* Tablets (≤1024px) */
 
 @media (max-width: 1024px) {
     .exp-cards-section {
         gap: 25px;
         padding: 30px 50px;
     }
 }
 /* Mobiles (≤768px) */
 
 @media (max-width: 768px) {
     .exp-cards-section {
         grid-template-columns: 1fr 1fr;
         gap: 20px;
         padding: 20px 30px;
     }
 }
 /* Small Mobiles (≤480px) */
 
 @media (max-width: 480px) {
     .exp-cards-section {
         grid-template-columns: 1fr;
         gap: 15px;
         padding: 20px 15px;
     }
     .exp-card {
         border-radius: 8px;
     }
 }
 
 .exp-card:hover {
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
 }
 
 .exp-card img {
     width: 100%;
     padding: 10px;
     height: 280px;
     object-fit: fill;
     display: block;
     border-radius: 15px;
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
 }
 
 .exp-card-content {
     padding: 15px;
 }
 
 .exp-card-title {
     display: block;
     font-size: 18px;
     font-weight: bold;
     color: #0369a1;
     text-decoration: none;
     margin-bottom: 8px;
     margin-left: 10px;
 }
 
 .exp-card-content p {
     text-align: justify;
     padding: 0 10px 5px 10px;
     line-height: 27px;
     font-size: 14px;
     font-weight: 200;
 }
 
 .exp-card-title:hover {
     color: #0369a1;
     text-decoration: underline;
 }
 
 .exp-card-meta {
     font-size: 13px;
     color: #000000ff;
     margin-bottom: 10px;
 }
 
 a.hover\:text-white.transition-colors {
     color: white;
 }
 /* Popup Overlay */
 
 .popup-overlay {
     display: none;
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: rgba(0, 0, 0, 0.6);
     justify-content: center;
     align-items: center;
     z-index: 1000;
 }
 /* Popup Box */
 
 .popup-content {
     background: #fff;
     padding: 20px;
     border-radius: 10px;
     max-width: 400px;
     width: 90%;
     text-align: center;
     position: relative;
     animation: fadeIn 0.3s ease-in-out;
     display: flex;
     flex-direction: column;
     align-items: center;
     /* centers children */
     justify-content: center;
 }
 
 .popup-overlay.active {
     display: flex;
 }
 
 .popup-content img {
     max-width: 120px;
     border-radius: 50%;
     margin-bottom: 15px;
 }
 
 .popup-content h3 {
     margin-bottom: 10px;
 }
 
 .popup-close {
     position: absolute;
     top: 10px;
     right: 15px;
     font-size: 22px;
     cursor: pointer;
 }
 
 @keyframes fadeIn {
     from {
         opacity: 0;
         transform: scale(0.9);
     }
     to {
         opacity: 1;
         transform: scale(1);
     }
 }
 
 .tooltip-container {
     position: relative;
     display: inline-block;
 }
 
 .tooltip-btn {
     position: absolute;
     top: 100%;
     left: 50%;
     transform: translateX(-50%);
     margin-top: 4px;
     background: #fff;
     border: 1px solid #85182a;
     padding: 4px 3px;
     font-size: 12px;
     color: #000000;
     border-radius: 4px;
     box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
     min-width: 100px;
     text-align: center;
     opacity: 0;
     visibility: hidden;
     pointer-events: none;
     transition: opacity 0.3s ease, visibility 0.3s ease;
 }
 
 .tooltip-container:hover .tooltip-btn,
 .tooltip-btn:hover {
     opacity: 1;
     visibility: visible;
     pointer-events: auto;
 }
 
 .dropdown>a i {
     font-size: 12px;
     transition: transform 0.2s;
 }
 /* Rotate arrow on hover */
 
 .dropdown:hover>a i {
     transform: rotate(180deg);
 }
 
 .readonly {
     background-color: #e6e3e3;
 }
 /* Modal background */
 
 .custom-modal {
     display: none;
     /* Hidden by default */
     position: fixed;
     z-index: 1000;
     left: 0;
     top: 0;
     width: 100%;
     height: 100%;
     overflow: auto;
     background-color: rgba(0, 0, 0, 0.5);
 }
 /* Modal box */
 
 .custom-modal-content {
     background-color: #fff;
     margin: 10% auto;
     padding: 25px;
     border-radius: 10px;
     width: 90%;
     max-width: 500px;
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
     animation: fadeIn 0.3s ease;
 }
 /* Close button */
 
 .close-btn {
     color: #aaa;
     float: right;
     font-size: 28px;
     font-weight: bold;
     cursor: pointer;
 }
 
 .close-btn:hover {
     color: #000;
 }
 /* Fade animation */
 
 @keyframes fadeIn {
     from {
         opacity: 0;
         transform: scale(0.95);
     }
     to {
         opacity: 1;
         transform: scale(1);
     }
 }
 /* Popup background */
 /* Overlay that covers the full screen */
 
 .popup-overlay {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: rgba(0, 0, 0, 0.6);
     display: none;
     /* hidden by default */
     justify-content: center;
     /* center horizontally */
     align-items: center;
     /* center vertically */
     z-index: 9999;
 }
 /* When popup is active (visible) */
 
 .popup-overlay.active {
     display: flex;
     /* flex centers the child */
 }
 /* Popup box */
 
 .popup-box {
     background: #fff;
     color: #333;
     padding: 25px 35px;
     border-radius: 10px;
     text-align: center;
     box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
     font-size: 18px;
     font-weight: 500;
     max-width: 320px;
     width: 90%;
     animation: fadeIn 0.3s ease;
 }
 /* Button */
 
 .popup-btn {
     margin-top: 15px;
     background: #700E12;
     color: #fff;
     border: none;
     padding: 8px 18px;
     border-radius: 6px;
     cursor: pointer;
     transition: background 0.3s ease;
 }
 
 .popup-btn:hover {
     background: #a01217;
 }
 /* Smooth fade-in animation */
 
 @keyframes fadeIn {
     from {
         opacity: 0;
         transform: scale(0.9);
     }
     to {
         opacity: 1;
         transform: scale(1);
     }
 }