:root {
     --primary: #2563eb;
     /* Vibrant blue */
     --secondary: #f59e0b;
     /* Amber */
     --accent: #10b981;
     /* Emerald */
     --dark: #1e3a8a;
     /* Navy blue */
     --light: #f8fafc;
     --text: #334155;
     /* --primary: #1a3e72; */
     --primary-light: #2a4e82;
     --primary-dark: #0d2a4d;
     /* --secondary: #25D366; */
     --secondary-dark: #128C7E;
     /* --accent: #f59e0b; */
     --light-bg: #f8fafc;
     --card-bg: #ffffff;
     /* --text: #333333; */
     --text-light: #64748b;
     --border: #e2e8f0;
     --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
     --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
     --radius: 12px;
     --radius-sm: 8px;
     --radius-full: 9999px;
 }

 * {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
 }

 
 body {
     font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
     line-height: 1.5;
     color: var(--text);
     overflow-x: hidden;
     background-color: var(--light);
 }
 /* Navbar */
 .navbar {
     padding: 5px 0;
     border-bottom: 3px solid #007bff;
 }

 .navbar-nav .nav-link {
     margin: 0 5px;
     font-weight: 500;
     color: #333 !important;
 }

 .navbar-nav .nav-link:hover {
     color: #007bff !important;
 }

 .navbar-nav .nav-item .nav-link {
     padding: 0.5rem 0.5rem;
     font-weight: 500;
 }

 .navbar-nav .nav-item .dropdown-menu {
     border-radius: 0.5rem;
 }

 .contact-number {
     font-weight: 600;
     margin-left: 1rem;
 }
 .login-btn {
     border: none;
     background: #007bff;
     color: #fff;
     border-radius: 5px;
     padding: 6px 12px;
 }

 .login-btn i {
     margin-right: 5px;
 }

 /*Nav Animation*/
 .only-mobileDrop {
     margin-left: 10%;
 }

 .fa-phone {
     color: #007bff;
     font-size: 20px;
     animation: ring 1.2s infinite;
 }

 .dropdown-menu.show {
     display: block;
     z-index: 999 !important;
     visibility: visible !important;
     opacity: 1;
 }

 /* Hero Banner */
 .hero {
     background: url('https://images.unsplash.com/photo-1507525428034-b723cf961d3e?auto=format&fit=crop&w=1350&q=80') no-repeat center center/cover;
     min-height: 100vh;
     display: flex;
     align-items: center;
     justify-content: center;
     text-align: center;
     color: #fff;
     position: relative;
 }

 .hero::before {
     content: "";
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     background: rgba(0, 0, 0, 0.5);
 }

 .hero-content {
     position: relative;
     z-index: 2;
     max-width: 800px;
     animation: fadeInUp 1.5s ease;
     text-align: center;
 }

 .hero h1 {
     font-size: 3rem;
     font-weight: 700;
 }

 .hero h3 {
     font-size: 1.5rem;
     margin: 15px 0;
 }

 .hero h3 span {
     color: #f7b500;
     font-weight: 700;
 }

 .hero p {
     font-size: 1.2rem;
     margin-bottom: 25px;
 }

 .btn-custom {
     padding: 12px 25px;
     font-size: 1rem;
     border-radius: 8px;
     font-weight: 600;
 }

 .btn-bespoke {
     background: #f7b500;
     color: #fff;
     margin-right: 15px;
 }

 .btn-bespoke:hover {
     background: #d99800;
 }

 .btn-ai {
     background: #1f2937;
     color: #fff;
 }

 .btn-ai:hover {
     background: #111827;
 }

 section#heroCarousel,
 .main_wrapper {
     margin-top: 63px;
 }

 #heroCarousel .carousel-caption {
     top: 0;
     bottom: 0;
     left: 0;
     right: 0;
     background: rgba(0, 0, 0, 0.35);
     /* overlay for readability */
     padding: 2rem;
 }

 #heroCarousel .carousel-inner {
     height: 100%;
 }

 #heroCarousel .carousel-inner img {
     height: calc(100vh - 103px);
 }

 .hero-content h1,
 .hero-content h3,
 .hero-content p {
     text-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
 }

 .carousel-caption {
     left: 8%;
     right: auto;
     bottom: 0;
     top: 0;
     padding: 2rem;
     background: rgba(0, 0, 0, 0.35);
     /* subtle overlay for readability */
 }

 .hero-content h1 {
     font-size: 3.8rem;
     text-shadow: 0 3px 10px rgba(0, 0, 0, 0.7);
 }

 .line-accent {
     font-size: 2.4rem;
     font-weight: 600;
     color: #fff;
     position: relative;
     margin-bottom: 0.75rem;
     padding-left: 12px;
 }

 /* .line-accent::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 100%;
    background: #00c3ff; 
    border-radius: 2px;
  } */
 .line-accent.highlight {
     color: #ffa500;
     /* orange text */
 }

 /* .line-accent.highlight::before {
    background: #ffa500;
  } */
 .tagline {
     font-size: 1.2rem !important;
     font-style: italic;
     color: #f8f9fa;
     margin-top: 1rem;
     position: relative;
     display: inline-block;
     padding-bottom: 4px;
 }

 .tagline::after {
     content: '';
     display: block;
     width: 60%;
     height: 3px;
     background: #ffa500;
     margin: 6px auto 0;
     border-radius: 2px;
 }

 .btn {
     font-size: .875rem;
     padding: .25rem .5rem;
 }

 /*Chatbot Start*/
 /* CTA Buttons */
 .cta-buttons {
     display: flex;
     gap: 1.5rem;
     justify-content: center;
     flex-wrap: wrap;
 }

 .cta-btn {
     padding: 1rem 2rem;
     border-radius: 8px;
     font-size: 1rem;
     font-weight: 600;
     cursor: pointer;
     transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
     display: flex;
     align-items: center;
     gap: 10px;
     position: relative;
     overflow: hidden;
 }

 .primary-btn {
     background: var(--secondary);
     color: white;
     border: none;
     box-shadow: 0 4px 15px rgba(245, 158, 11, 0.4);
 }

 .primary-btn:hover {
     background: #e67e22;
     transform: translateY(-3px) scale(1.02);
     box-shadow: 0 8px 25px rgba(245, 158, 11, 0.5);
 }

 .secondary-btn {
     background: rgba(255, 255, 255, 0.15);
     color: white;
     border: 2px solid rgba(255, 255, 255, 0.3);
     backdrop-filter: blur(5px);
 }

 .secondary-btn:hover {
     background: rgba(255, 255, 255, 0.25);
     transform: translateY(-3px) scale(1.02);
     box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
     border-color: var(--secondary);
 }

 .secondary-btn::before {
     content: "";
     position: absolute;
     top: 0;
     left: -100%;
     width: 100%;
     height: 100%;
     background: linear-gradient(90deg,
             transparent,
             rgba(255, 255, 255, 0.2),
             transparent);
     transition: 0.5s;
 }

 .secondary-btn:hover::before {
     left: 100%;
 }

 /* Modal */
 .modal {
     display: none;
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: rgba(0, 0, 0, 0.8);
     z-index: 2000;
     justify-content: center;
     align-items: center;
 }

 .modal-content {
     background: white;
     padding: 2rem;
     border-radius: 8px;
     max-width: 500px;
     width: 90%;
     text-align: center;
     position: relative;
 }

 .close-modal {
     position: absolute;
     top: 1rem;
     right: 1rem;
     font-size: 1.5rem;
     cursor: pointer;
     color: var(--text);
 }

 .modal-icon {
     font-size: 3rem;
     color: var(--secondary);
     margin-bottom: 1rem;
 }

 .modal-title {
     font-size: 1.5rem;
     margin-bottom: 1.5rem;
     color: var(--primary);
 }

 .modal-text {
     margin-bottom: 1.5rem;
     font-size: 1rem;
     line-height: 1.6;
     color: var(--text);
 }

 .contact-email {
     display: inline-block;
     background: rgba(37, 99, 235, 0.1);
     padding: 0.8rem 1.5rem;
     border-radius: 6px;
     margin: 1.5rem 0;
     font-weight: 600;
     font-size: 1rem;
     color: var(--primary);
 }

 /* WhatsApp Style Modal */
 .whatsapp-modal {
     display: none;
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: rgba(0, 0, 0, 0.8);
     z-index: 2000;
     justify-content: center;
     align-items: center;
 }

 .whatsapp-container {
     max-width: 500px;
     width: 90%;
     height: 80vh;
     background-color: #e5ddd5;
     margin: 0 auto;
     box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3);
     border-radius: 3px;
     overflow: hidden;
     display: flex;
     flex-direction: column;
     position: relative;
 }

 .whatsapp-header {
     background-color: #075e54;
     color: white;
     padding: 15px;
     font-size: 18px;
     font-weight: bold;
     display: flex;
     align-items: center;
     position: relative;
 }

 .whatsapp-header:before {
     content: "✈️";
     margin-right: 10px;
     font-size: 20px;
 }

 .whatsapp-close-btn {
     position: absolute;
     right: 15px;
     top: 50%;
     transform: translateY(-50%);
     background: none;
     border: none;
     color: white;
     font-size: 20px;
     cursor: pointer;
 }

 .whatsapp-chat-container {
     background-color: #e5ddd5;
     padding: 10px;
     flex: 1;
     overflow-y: auto;
     display: flex;
     flex-direction: column;
 }

 .whatsapp-message {
     max-width: 80%;
     margin-bottom: 15px;
     padding: 8px 12px;
     border-radius: 7.5px;
     position: relative;
     word-wrap: break-word;
     animation: fadeInUp 0.3s ease-in-out;
 }

 .whatsapp-app-message {
     background-color: white;
     margin-right: auto;
 }

 .whatsapp-user-message {
     background-color: #dcf8c6;
     margin-left: auto;
 }

 .whatsapp-input-container {
     background-color: #f0f0f0;
     padding: 10px;
     display: flex;
     align-items: center;
 }

 .whatsapp-input-field {
     flex: 1;
     padding: 10px 15px;
     border-radius: 21px;
     border: none;
     outline: none;
     font-size: 14px;
 }

 .whatsapp-send-btn {
     background-color: #075e54;
     color: white;
     border: none;
     border-radius: 50%;
     width: 40px;
     height: 40px;
     margin-left: 10px;
     display: flex;
     align-items: center;
     justify-content: center;
     cursor: pointer;
 }

 .whatsapp-option-btn {
     background-color: white;
     border: 1px solid #ddd;
     border-radius: 20px;
     padding: 8px 15px;
     margin: 5px;
     cursor: pointer;
     display: inline-block;
 }

 .whatsapp-option-btn:hover {
     background-color: #f5f5f5;
 }

 .whatsapp-emoji {
     margin-right: 5px;
 }

 /* Rooms & Guests Styling */
 .rooms-guests-container {
     padding: 10px;
 }

 .input-bubble {
     margin-bottom: 15px;
 }

 .input-bubble select {
     padding: 8px;
     border-radius: 5px;
     border: 1px solid #ddd;
 }

 .room-box {
     background: white;
     border-radius: 8px;
     padding: 10px;
     margin-bottom: 15px;
     box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
 }

 .room-header {
     display: flex;
     justify-content: space-between;
     align-items: center;
     margin-bottom: 10px;
     padding-bottom: 5px;
     border-bottom: 1px solid #eee;
 }

 .room-title {
     font-weight: bold;
 }

 .undo-btn {
     color: #075e54;
     cursor: pointer;
     font-size: 12px;
 }

 .guests-selector {
     display: flex;
     gap: 10px;
     margin-bottom: 10px;
 }

 .guests-select {
     flex: 1;
 }

 .children-container {
     margin-top: 10px;
 }

 .child-input {
     display: flex;
     align-items: center;
     margin-bottom: 8px;
 }

 .child-input select {
     flex: 1;
     padding: 5px;
     border-radius: 5px;
     border: 1px solid #ddd;
     margin-right: 8px;
 }

 .remove-child {
     background: none;
     border: none;
     color: #ff4444;
     cursor: pointer;
     font-size: 16px;
 }

 .add-child-btn {
     color: #075e54;
     cursor: pointer;
     text-align: center;
     margin-top: 5px;
     font-size: 13px;
 }

 .done-btn,
 .apply-btn {
     background-color: #075e54;
     color: white;
     border: none;
     border-radius: 20px;
     padding: 8px 15px;
     width: 100%;
     cursor: pointer;
     margin-top: 10px;
 }

 /* Currency Selector */
 .currency-selector {
     display: grid;
     grid-template-columns: repeat(2, 1fr);
     gap: 10px;
     margin-bottom: 15px;
 }

 .currency-option {
     padding: 10px;
     border: 1px solid #ddd;
     border-radius: 5px;
     text-align: center;
     cursor: pointer;
 }

 .currency-option.selected {
     border-color: #075e54;
     background-color: rgba(7, 94, 84, 0.1);
 }

 /* Range Slider */
 input[type="range"] {
     -webkit-appearance: none;
     width: 100%;
     height: 8px;
     border-radius: 5px;
     background: #ddd;
     outline: none;
 }

 input[type="range"]::-webkit-slider-thumb {
     -webkit-appearance: none;
     appearance: none;
     width: 20px;
     height: 20px;
     border-radius: 50%;
     background: #075e54;
     cursor: pointer;
 }

 /* OTP Verification */
 .otp-container {
     display: flex;
     justify-content: center;
     gap: 10px;
     margin-bottom: 15px;
 }

 .otp-input {
     width: 40px;
     height: 40px;
     text-align: center;
     font-size: 18px;
     border: 1px solid #ddd;
     border-radius: 5px;
 }

 /* Summary Items */
 .summary-item {
     display: flex;
     justify-content: space-between;
     margin-bottom: 8px;
     padding-bottom: 8px;
     border-bottom: 1px dashed #ddd;
 }

 .summary-value {
     font-weight: bold;
 }

 /* Bespoke Button */
 .bespoke-btn {
     background-color: var(--secondary);
     color: white;
     border: none;
     border-radius: 20px;
     padding: 12px 20px;
     font-size: 16px;
     font-weight: bold;
     cursor: pointer;
     margin: 20px auto;
     display: block;
     width: 80%;
 }

 /*END Chatbot*/
 .footer {
     background: #111827;
     /* Dark background */
 }

 .footer a:hover {
     color: #ffc107 !important;
     /* Yellow hover effect */
     transition: 0.3s ease;
 }

 /*END Footer*/
 /*About Us Start*/
 /* About Page Content */
 .about-hero {
     background: linear-gradient(135deg, rgba(26, 62, 114, 0.8) 0%, rgba(26, 62, 114, 0.9) 100%), url('https://images.unsplash.com/photo-1506929562872-bb421503ef21?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80') no-repeat center center;
     background-size: cover;
     color: white;
     padding: 80px 20px;
     text-align: center;
 }

 .about-hero h1 {
     font-size: 2.5rem;
     margin-bottom: 20px;
 }

 .about-hero p {
     font-size: 1.1rem;
     max-width: 700px;
     margin: 0 auto;
 }

 .about-container {
     max-width: 1200px;
     margin: 40px auto;
     padding: 0 20px;
 }

 .about-section {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 40px;
     align-items: center;
     margin-bottom: 60px;
 }

 .about-content {
     padding: 20px;
 }

 .about-content h2 {
     color: var(--primary);
     font-size: 1.8rem;
     margin-bottom: 20px;
     position: relative;
     padding-bottom: 10px;
 }

 .about-content h2::after {
     content: "";
     position: absolute;
     bottom: 0;
     left: 0;
     width: 50px;
     height: 3px;
     background-color: var(--secondary);
 }

 .about-content p {
     margin-bottom: 15px;
 }

 .about-image {
     border-radius: var(--radius);
     overflow: hidden;
     box-shadow: var(--shadow-lg);
     height: 350px;
 }

 .about-image img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     transition: transform 0.5s ease;
 }

 .about-image:hover img {
     transform: scale(1.05);
 }

 .mission-values {
     background-color: rgba(26, 62, 114, 0.05);
     padding: 60px 0;
     margin: 0px 0;
 }

 .values-container {
     max-width: 1200px;
     margin: 0 auto;
     padding: 0 20px;
 }

 .values-container h2 {
     text-align: center;
     color: var(--primary);
     font-size: 1.8rem;
     margin-bottom: 40px;
 }

 .values-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
     gap: 25px;
 }

 .value-card {
     background-color: var(--card-bg);
     border-radius: var(--radius);
     padding: 25px;
     box-shadow: var(--shadow);
     text-align: center;
     transition: all 0.3s ease;
 }

 .value-card:hover {
     transform: translateY(-5px);
 }

 .value-icon {
     background-color: rgba(26, 62, 114, 0.1);
     color: var(--primary);
     width: 60px;
     height: 60px;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 24px;
     margin: 0 auto 15px;
 }

 .value-card h3 {
     color: var(--primary);
     margin-bottom: 10px;
     font-size: 1.2rem;
 }

 .team-section {
     margin-bottom: 60px;
 }

 .team-container {
     max-width: 1200px;
     margin: 0 auto;
     padding: 0 20px;
 }

 .team-container h2 {
     text-align: center;
     color: var(--primary);
     font-size: 1.8rem;
     margin-bottom: 40px;
 }

 .team-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
     gap: 25px;
 }

 .team-card {
     background-color: var(--card-bg);
     border-radius: var(--radius);
     overflow: hidden;
     box-shadow: var(--shadow);
     transition: all 0.3s ease;
 }

 .team-card:hover {
     transform: translateY(-5px);
     box-shadow: var(--shadow-lg);
 }

 .team-image {
     height: 250px;
     overflow: hidden;
 }

 .team-image img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     transition: transform 0.5s ease;
 }

 .team-card:hover .team-image img {
     transform: scale(1.1);
 }

 .team-info {
     padding: 20px;
     text-align: center;
 }

 .team-info h3 {
     color: var(--primary);
     margin-bottom: 5px;
     font-size: 1.2rem;
 }

 .team-info p {
     color: var(--text-light);
     margin-bottom: 15px;
 }

 .team-social {
     display: flex;
     justify-content: center;
     gap: 15px;
 }

 .team-social a {
     color: var(--primary);
     background-color: rgba(26, 62, 114, 0.1);
     width: 35px;
     height: 35px;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     transition: all 0.3s ease;
 }

 .team-social a:hover {
     background-color: var(--primary);
     color: white;
 }

 /*End About Us*/
 /*Contact Us*/
 .contact-number {
     display: flex;
     align-items: center;
     gap: 6px;
     font-weight: 500;
     color: var(--dark);
     font-size: 0.9rem;
     margin-right: 1rem;
     padding: 0.5rem 0.8rem;
     border-radius: 6px;
     transition: all 0.3s;
     margin-top: 6px;
 }

 .contact-number:hover {
     background: rgba(245, 158, 11, 0.1);
     color: var(--secondary);
 }

 .contact-number i {
     color: var(--secondary);
     font-size: 0.9rem;
 }

 .portal-dropdown {
     position: relative;
 }

 .portal-content {
     display: none;
     position: absolute;
     top: 100%;
     right: 0;
     background: white;
     min-width: 160px;
     box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
     border-radius: 6px;
     z-index: 1;
     padding: 0.5rem 0;
 }

 .portal-dropdown:hover .portal-content {
     display: block;
 }

 .login-btn {
     background: var(--secondary);
     color: white;
     border: none;
     padding: 0.5rem 1.2rem;
     border-radius: 6px;
     font-weight: 500;
     font-size: 0.9rem;
     cursor: pointer;
     transition: all 0.2s;
     display: flex;
     align-items: center;
     gap: 6px;
 }

 .login-btn:hover {
     background: #e67e22;
     transform: translateY(-1px);
 }

 .portal-link {
     color: var(--dark);
     padding: 0.6rem 1.2rem;
     text-decoration: none;
     display: block;
     font-size: 0.85rem;
     transition: all 0.2s;
 }

 .portal-link:hover {
     background: rgba(37, 99, 235, 0.05);
     color: var(--primary);
 }

 /* Header Styles */
 .header {
     background-color: var(--primary);
     padding: 15px 30px;
     display: flex;
     justify-content: space-between;
     align-items: center;
     box-shadow: var(--shadow);
 }

 .header-logo {
     font-size: 24px;
     font-weight: 700;
     color: white;
     display: flex;
     align-items: center;
     gap: 8px;
 }

 .header-logo i {
     font-size: 20px;
 }

 .header-nav {
     display: flex;
     gap: 20px;
 }

 .header-nav a {
     text-decoration: none;
     color: rgba(255, 255, 255, 0.9);
     font-size: 15px;
     font-weight: 500;
     padding: 8px 12px;
     border-radius: var(--radius-sm);
     transition: all 0.3s ease;
 }

 .header-nav a:hover,
 .header-nav a.active {
     background-color: rgba(255, 255, 255, 0.15);
     color: white;
 }

 .header-contact {
     display: flex;
     align-items: center;
     gap: 15px;
 }

 .header-contact span {
     font-weight: 500;
     color: white;
 }

 .client-portal-btn {
     background-color: var(--secondary);
     color: white;
     border: none;
     border-radius: var(--radius-sm);
     padding: 8px 16px;
     font-weight: 500;
     cursor: pointer;
     transition: all 0.3s ease;
     display: flex;
     align-items: center;
     gap: 6px;
 }

 .client-portal-btn:hover {
     background-color: var(--secondary-dark);
     transform: translateY(-1px);
 }

 /* Contact Page Content */
 .contact-hero {
     background: linear-gradient(135deg, rgba(26, 62, 114, 0.8) 0%, rgba(26, 62, 114, 0.9) 100%), url('https://images.unsplash.com/photo-1520250497591-112f2f40a3f4?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80') no-repeat center center;
     background-size: cover;
     color: white;
     padding: 80px 20px;
     text-align: center;
 }

 .contact-hero h1 {
     font-size: 2.5rem;
     margin-bottom: 20px;
 }

 .contact-hero p {
     font-size: 1.1rem;
     max-width: 700px;
     margin: 0 auto;
 }

 .contact-container {
     max-width: 1200px;
     margin: 40px auto;
     padding: 0 20px;
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 30px;
 }

 .contact-info,
 .contact-form {
     background-color: var(--card-bg);
     border-radius: var(--radius);
     padding: 30px;
     box-shadow: var(--shadow);
 }

 .contact-info h2,
 .contact-form h2 {
     color: var(--primary);
     font-size: 1.8rem;
     margin-bottom: 25px;
     position: relative;
     padding-bottom: 10px;
 }

 .contact-info h2::after,
 .contact-form h2::after {
     content: "";
     position: absolute;
     bottom: 0;
     left: 0;
     width: 50px;
     height: 3px;
     background-color: var(--secondary);
 }

 .contact-method {
     display: flex;
     align-items: flex-start;
     margin-bottom: 20px;
 }

 .contact-icon {
     background-color: rgba(26, 62, 114, 0.1);
     color: var(--primary);
     width: 45px;
     height: 45px;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     margin-right: 15px;
     flex-shrink: 0;
 }

 .contact-details h3 {
     font-size: 1.1rem;
     margin-bottom: 5px;
     color: var(--primary);
 }

 .contact-details p,
 .contact-details a {
     color: var(--text);
     text-decoration: none;
     transition: all 0.3s ease;
 }

 .contact-details a:hover {
     color: var(--primary);
 }

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

 .form-group label {
     display: block;
     margin-bottom: 8px;
     font-weight: 500;
 }

 .form-group input,
 .form-group textarea,
 .form-group select {
     width: 100%;
     padding: 12px 15px;
     border: 1px solid var(--border);
     border-radius: var(--radius-sm);
     font-family: 'Poppins', sans-serif;
     font-size: 1rem;
 }

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

 .submit-btn {
     background-color: var(--secondary);
     color: white;
     border: none;
     border-radius: var(--radius-sm);
     padding: 12px 25px;
     font-size: 1rem;
     font-weight: 500;
     cursor: pointer;
     transition: all 0.3s ease;
     display: inline-flex;
     align-items: center;
     gap: 8px;
 }

 .submit-btn:hover {
     background-color: var(--secondary-dark);
 }

 .map-container {
     grid-column: 1 / -1;
     height: 400px;
     border-radius: var(--radius);
     overflow: hidden;
     box-shadow: var(--shadow);
 }

 .map-container iframe {
     width: 100%;
     height: 100%;
     border: none;
 }

 /*End Contact Us*/
 /* Bleisure Hero Section */
 .bleisure-hero {
     background: linear-gradient(135deg, rgba(26, 62, 114, 0.8) 0%, rgba(26, 62, 114, 0.9) 100%), url('https://images.unsplash.com/photo-1551632811-561732d1e306?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80') no-repeat center center;
     background-size: cover;
     color: white;
     padding: 100px 20px;
     text-align: center;
 }

 .bleisure-hero h1 {
     font-size: 2.5rem;
     margin-bottom: 20px;
 }

 .bleisure-hero p {
     font-size: 1.1rem;
     max-width: 700px;
     margin: 0 auto 30px;
 }

 .cta-button {
     display: inline-block;
     background-color: var(--accent);
     color: white;
     padding: 12px 30px;
     border-radius: var(--radius);
     text-decoration: none;
     font-weight: 600;
     transition: all 0.3s ease;
     box-shadow: var(--shadow);
 }

 .cta-button:hover {
     background-color: #e67e22;
     transform: translateY(-2px);
     box-shadow: var(--shadow-lg);
 }

 /* Benefits Section */
 .benefits-section {
     max-width: 1200px;
     margin: 60px auto;
     padding: 0 20px;
 }

 .section-title {
     text-align: center;
     color: var(--primary);
     font-size: 1.8rem;
     margin-bottom: 40px;
     position: relative;
 }

 .section-title::after {
     content: "";
     position: absolute;
     bottom: -10px;
     left: 50%;
     transform: translateX(-50%);
     width: 80px;
     height: 3px;
     background-color: var(--secondary);
 }

 .benefits-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
     gap: 30px;
 }

 .benefit-card {
     background-color: var(--card-bg);
     border-radius: var(--radius);
     padding: 30px;
     box-shadow: var(--shadow);
     transition: all 0.3s ease;
     text-align: center;
 }

 .benefit-card:hover {
     transform: translateY(-5px);
     box-shadow: var(--shadow-lg);
 }

 .benefit-icon {
     font-size: 2.5rem;
     color: var(--primary);
     margin-bottom: 20px;
 }

 .benefit-card h3 {
     color: var(--primary);
     margin-bottom: 15px;
 }

 /* How It Works Section */
 .how-it-works {
     background-color: rgba(26, 62, 114, 0.05);
     padding: 60px 0;
 }

 .steps-container {
     max-width: 1200px;
     margin: 0 auto;
     padding: 0 20px;
 }

 .steps-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
     gap: 30px;
     margin-top: 40px;
 }

 .step-card {
     background-color: var(--card-bg);
     border-radius: var(--radius);
     padding: 25px;
     box-shadow: var(--shadow);
     position: relative;
     transition: all 0.3s ease;
 }

 .step-number {
     position: absolute;
     top: -15px;
     left: 20px;
     background-color: var(--primary);
     color: white;
     width: 40px;
     height: 40px;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     font-weight: bold;
 }

 .step-card h3 {
     color: var(--primary);
     margin: 15px 0 10px;
 }

 /* Testimonials */
 .testimonials {
     max-width: 1200px;
     margin: 60px auto;
     padding: 0 20px;
 }

 .testimonial-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
     gap: 30px;
     margin-top: 40px;
 }

 .testimonial-card {
     background-color: var(--card-bg);
     border-radius: var(--radius);
     padding: 30px;
     box-shadow: var(--shadow);
     position: relative;
 }

 .testimonial-card::before {
     content: "" ";
 font-size: 4rem;
     color: rgba(26, 62, 114, 0.1);
     position: absolute;
     top: 10px;
     left: 20px;
     line-height: 1;
 }

 .testimonial-content {
     margin-bottom: 20px;
     font-style: italic;
     color: var(--text);
 }

 .testimonial-author {
     display: flex;
     align-items: center;
     gap: 15px;
 }

 .author-avatar {
     width: 50px;
     height: 50px;
     border-radius: 50%;
     overflow: hidden;
 }

 .author-avatar img {
     width: 100%;
     height: 100%;
     object-fit: cover;
 }

 .author-info h4 {
     color: var(--primary);
     margin-bottom: 5px;
 }

 .author-info p {
     color: var(--text-light);
     font-size: 0.9rem;
 }

 /* CTA Section */
 .cta-section {
     background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
     color: white;
     text-align: center;
     padding: 60px 20px;
 }

 .cta-section h2 {
     font-size: 2rem;
     margin-bottom: 20px;
 }

 .cta-section p {
     max-width: 700px;
     margin: 0 auto 30px;
 }

 .cta-btn {
     display: inline-block;
     background: var(--secondary);
     color: white;
     padding: 1rem 2rem;
     border-radius: 8px;
     font-weight: 600;
     text-decoration: none;
     transition: all 0.3s ease;
 }

 .cta-btn:hover {
     background: #e67e22;
     transform: translateY(-3px);
     box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2);
 }

 /* Hero Section */
 .conference-hero {
     height: 70vh;
     background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.6)),
         url('https://images.unsplash.com/photo-1431540015161-0bf868a2d407?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80');
     background-size: cover;
     background-position: center;
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
     text-align: center;
     padding: 0 2rem;
     color: white;
     margin-top: 60px;
 }

 .conference-hero h1 {
     font-size: 3rem;
     margin-bottom: 1rem;
     text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8);
 }

 .conference-hero p {
     font-size: 1.5rem;
     max-width: 800px;
     text-shadow: 0 2px 5px rgba(0, 0, 0, 0.8);
 }

 /* Content Section */
 .content-section {
     max-width: 1200px;
     margin: 4rem auto;
     padding: 0 2rem;
 }

 .content-section h2 {
     color: var(--primary);
     font-size: 2rem;
     margin-bottom: 1.5rem;
     text-align: center;
 }

 .content-section p {
     font-size: 1.1rem;
     line-height: 1.8;
     margin-bottom: 2rem;
     text-align: center;
 }

 .services-list {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
     gap: 2rem;
     margin-top: 3rem;
 }

 .service-item {
     background: white;
     border-radius: 8px;
     padding: 2rem;
     box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
     transition: transform 0.3s ease;
 }

 .service-item:hover {
     transform: translateY(-5px);
 }

 .service-item h3 {
     color: var(--secondary);
     margin-bottom: 1rem;
     font-size: 1.3rem;
 }

 .service-item ul {
     list-style-type: none;
 }

 .service-item li {
     margin-bottom: 0.5rem;
     position: relative;
     padding-left: 1.5rem;
 }

 .service-item li:before {
     content: "•";
     color: var(--secondary);
     position: absolute;
     left: 0;
     font-size: 1.2rem;
 }

 /* Hero Section */
 .incentive-hero {
     height: 70vh;
     background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.6)),
         url('https://images.unsplash.com/photo-1520250497591-112f2f40a3f4?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80');
     background-size: cover;
     background-position: center;
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
     text-align: center;
     padding: 0 2rem;
     color: white;
     margin-top: 60px;
 }

 .incentive-hero h1 {
     font-size: 3rem;
     margin-bottom: 1rem;
     text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8);
 }

 .incentive-hero p {
     font-size: 1.5rem;
     max-width: 800px;
     text-shadow: 0 2px 5px rgba(0, 0, 0, 0.8);
 }

 /* Content Section */
 .content-section {
     max-width: 1200px;
     margin: 4rem auto;
     padding: 0 2rem;
 }

 .content-section h2 {
     color: var(--primary);
     font-size: 2rem;
     margin-bottom: 1.5rem;
     text-align: center;
 }

 .content-section p {
     font-size: 1.1rem;
     line-height: 1.8;
     margin-bottom: 2rem;
 }

 .highlight-box {
     background: white;
     border-radius: 8px;
     padding: 2rem;
     box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
     margin: 3rem 0;
 }

 .highlight-box h3 {
     color: var(--secondary);
     font-size: 1.5rem;
     margin-bottom: 1.5rem;
     text-align: center;
 }

 .approach-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
     gap: 2rem;
     margin-top: 3rem;
 }

 .approach-item {
     background: white;
     border-radius: 8px;
     padding: 1.5rem;
     box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
     transition: transform 0.3s ease;
 }

 .approach-item:hover {
     transform: translateY(-5px);
 }

 .approach-item h4 {
     color: var(--primary);
     margin-bottom: 1rem;
     font-size: 1.2rem;
     text-align: center;
 }

 .approach-item ul {
     list-style-type: none;
 }

 .approach-item li {
     margin-bottom: 0.5rem;
     position: relative;
     padding-left: 1.5rem;
 }

 .approach-item li:before {
     content: "•";
     color: var(--secondary);
     position: absolute;
     left: 0;
     font-size: 1.2rem;
 }

 /* Hero Section */
 .event-hero {
     height: 70vh;
     background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.6)),
         url('https://images.unsplash.com/photo-1511578314322-379afb476865?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80');
     background-size: cover;
     background-position: center;
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
     text-align: center;
     padding: 0 2rem;
     color: white;
     margin-top: 60px;
 }

 .event-hero h1 {
     font-size: 3rem;
     margin-bottom: 1rem;
     text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8);
 }

 .event-hero p {
     font-size: 1.5rem;
     max-width: 800px;
     text-shadow: 0 2px 5px rgba(0, 0, 0, 0.8);
     font-style: italic;
 }

 /* Content Section */
 .content-section {
     max-width: 1200px;
     margin: 4rem auto;
     padding: 0 2rem;
 }

 .content-section h2 {
     color: var(--primary);
     font-size: 2rem;
     margin-bottom: 1.5rem;
     text-align: center;
 }

 .content-section p {
     font-size: 1.1rem;
     line-height: 1.8;
     margin-bottom: 2rem;
     text-align: center;
 }

 .highlight-box {
     background: white;
     border-radius: 8px;
     padding: 2rem;
     box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
     margin: 3rem 0;
 }

 .highlight-box h3 {
     color: var(--secondary);
     font-size: 1.5rem;
     margin-bottom: 1.5rem;
     text-align: center;
 }

 .services-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
     gap: 2rem;
     margin-top: 3rem;
 }

 .service-item {
     background: white;
     border-radius: 8px;
     padding: 1.5rem;
     box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
     transition: transform 0.3s ease;
 }

 .service-item:hover {
     transform: translateY(-5px);
 }

 .service-item h4 {
     color: var(--primary);
     margin-bottom: 1rem;
     font-size: 1.2rem;
     text-align: center;
 }

 .service-item ul {
     list-style-type: none;
 }

 .service-item li {
     margin-bottom: 0.8rem;
     position: relative;
     padding-left: 1.5rem;
 }

 .service-item li:before {
     content: "•";
     color: var(--secondary);
     position: absolute;
     left: 0;
     font-size: 1.2rem;
 }

 /*Listing*/
 #listingGrid .filter-toggle {
     display: none;
 }

 /* Filter Section */
 #listingGrid .filter-section {
     border: 1px solid #e0e0e0;
 }

 #listingGrid .filter-title {
     font-weight: 600;
     margin-bottom: 10px;
 }

 #listingGrid .filter-option {
     background: #f8f9fa;
     padding: 6px 12px;
     border-radius: 8px;
     cursor: pointer;
     transition: all 0.2s;
 }

 #listingGrid .filter-option:hover {
     background: #007bff;
     color: #fff;
 }

 #listingGrid .view-more {
     cursor: pointer;
     font-weight: 500;
 }

 #listingGrid .hidden-speciality,
 #listingGrid .hidden-language {
     display: none;
 }

 /* Guide Cards */
 #listingGrid .guide-card {
     transition: 0.2s ease-in-out;
 }

 #listingGrid .guide-card:hover {
     transform: translateY(-3px);
     box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.1);
 }

 #listingGrid .guide-avatar {
     border: 3px solid #f1f1f1;
     border-radius: 50%;
 }

 #listingGrid .match-percentage {
     font-size: 0.8rem;
 }

 /* ================= Appointment Modal ================= */
 #listingGrid .modal {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: rgba(15, 23, 42, 0.8);
     /* dark overlay */
     display: none;
     justify-content: center;
     align-items: center;
     z-index: 9999;
     animation: fadeIn 0.3s ease-in-out;
 }

 #listingGrid .modal-content {
     background: #fff;
     width: 100%;
     max-width: 540px;
     border-radius: 16px;
     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
     overflow-y: auto;
     /* enable vertical scroll */
     max-height: 90vh;
     /* keep modal within screen */
     animation: slideUp 0.4s ease;
 }

 /* ===== Custom Scrollbar Styling ===== */
 #listingGrid .modal-content::-webkit-scrollbar {
     width: 8px;
     /* scrollbar width */
 }

 #listingGrid .modal-content::-webkit-scrollbar-track {
     background: #f1f1f1;
     /* light background track */
     border-radius: 8px;
 }

 #listingGrid .modal-content::-webkit-scrollbar-thumb {
     background: linear-gradient(135deg, #0077ff, #00c6ff);
     border-radius: 8px;
 }

 #listingGrid .modal-content::-webkit-scrollbar-thumb:hover {
     background: linear-gradient(135deg, #005ecc, #00a8cc);
 }

 /* For Firefox */
 #listingGrid .modal-content {
     scrollbar-width: thin;
     scrollbar-color: #0077ff #f1f1f1;
     /* thumb | track */
 }

 #listingGrid .modal-header {
     padding: 0;
     color: #fff;
     display: flex;
     justify-content: center;
     align-items: center;
     margin: 0px;
 }

 #listingGrid .modal-title {
     font-size: 20px;
     font-weight: 600;
     display: flex;
     align-items: center;
     gap: 8px;
 }

 #listingGrid .close-modal {
     background: transparent;
     border: none;
     font-size: 26px;
     cursor: pointer;
     color: #fff;
     transition: transform 0.2s;
 }

 #listingGrid .close-modal:hover {
     transform: rotate(90deg);
 }

 /* Form styling */
 #listingGrid #appointmentForm {
     padding: 22px 24px;
 }

 #listingGrid .form-group {
     margin-bottom: 18px;
 }

 #listingGrid .form-group label {
     font-weight: 600;
     margin-bottom: 6px;
     display: block;
     color: #333;
 }

 #listingGrid .form-group input,
 #listingGrid .form-group select,
 #listingGrid .form-group textarea {
     width: 100%;
     padding: 10px 12px;
     border-radius: 8px;
     border: 1px solid #ddd;
     font-size: 15px;
     transition: border-color 0.2s, box-shadow 0.2s;
 }

 #listingGrid .form-group input:focus,
 #listingGrid .form-group select:focus,
 #listingGrid .form-group textarea:focus {
     border-color: #0077ff;
     box-shadow: 0 0 6px rgba(0, 119, 255, 0.3);
     outline: none;
 }

 /* Time slots */
 #listingGrid .time-slots {
     display: grid;
     grid-template-columns: repeat(2, 1fr);
     gap: 10px;
 }

 #listingGrid .time-slot {
     background: #f8f9fa;
     border: 1px solid #e0e0e0;
     padding: 10px;
     border-radius: 8px;
     text-align: center;
     cursor: pointer;
     transition: all 0.25s ease;
 }

 #listingGrid .time-slot:hover {
     background: #0077ff;
     color: #fff;
     border-color: #0077ff;
 }

 #listingGrid .time-slot.active {
     background: #0077ff;
     color: #fff;
     border-color: #0077ff;
     box-shadow: 0 4px 10px rgba(0, 119, 255, 0.3);
 }

 #listingGrid .error-message {
     color: red;
     font-size: 13px;
     display: none;
     margin-top: 4px;
 }

 /* Button */
 #listingGrid .submit-appointment {
     background: linear-gradient(135deg, #0077ff, #00c6ff);
     border: none;
     color: #fff;
     font-size: 16px;
     font-weight: 600;
     padding: 12px;
     width: 100%;
     border-radius: 10px;
     cursor: pointer;
     transition: transform 0.2s, box-shadow 0.2s;
 }

 #listingGrid .submit-appointment:hover {
     transform: translateY(-2px);
     box-shadow: 0 6px 14px rgba(0, 119, 255, 0.35);
 }


 /* =========================
   Profile Modal Styling
   ========================= */
 #listingGrid .modal {
     display: none;
     /* default hidden */
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: rgba(20, 20, 20, 0.65);
     backdrop-filter: blur(6px);
     justify-content: center;
     align-items: center;
     z-index: 1050;
     animation: fadeIn 0.4s ease-in-out;
 }

 #listingGrid .modal-content.profile-modal-content {
     background: #fff;
     border-radius: 18px;
     width: 90%;
     max-width: 750px;
     max-height: 85vh;
     overflow-y: auto;
     box-shadow: 0 8px 28px rgba(0, 0, 0, 0.2);
     transform: scale(0.9) translateY(30px);
     opacity: 0;
     animation: slideUp 0.45s ease forwards;
 }

 /* Scrollbar custom */
 #listingGrid .modal-content::-webkit-scrollbar {
     width: 8px;
 }

 #listingGrid .modal-content::-webkit-scrollbar-track {
     background: #f1f1f1;
     border-radius: 8px;
 }

 #listingGrid .modal-content::-webkit-scrollbar-thumb {
     background: linear-gradient(180deg, #4facfe, #00f2fe);
     border-radius: 8px;
 }

 /* Header */
 #listingGrid .modal-header {
     display: flex;
     justify-content: center;
     align-items: center;
     padding: 0px;
     border-bottom: 1px solid #eee;
 }

 #listingGrid .modal-header h3 {
     font-size: 20px;
     font-weight: 600;
 }

 #listingGrid .close-modal {
     background: rgba(255, 255, 255, 0.2);
     border: none;
     font-size: 22px;
     cursor: pointer;
     padding: 4px 10px;
     border-radius: 50%;
     transition: 0.3s;
 }

 #listingGrid .close-modal:hover {
     background: rgba(255, 255, 255, 0.4);
 }

 /* Profile Header */
 #listingGrid .profile-header {
     display: flex;
     gap: 18px;
     align-items: center;
     padding: 22px;
 }

 #listingGrid .profile-avatar {
     width: 90px;
     height: 90px;
     border-radius: 50%;
     object-fit: cover;
     border: 4px solid #4facfe;
     box-shadow: 0 4px 10px rgba(79, 172, 254, 0.4);
 }

 #listingGrid .profile-name {
     font-size: 22px;
     font-weight: 700;
     margin-bottom: 6px;
 }

 #listingGrid .profile-rating {
     color: #fbc02d;
     font-size: 15px;
     margin-bottom: 6px;
 }

 #listingGrid .profile-match {
     font-size: 14px;
     font-weight: 500;
     color: #00c853;
 }

 /* Stats Grid */
 #listingGrid .stats-grid {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 14px;
     padding: 15px 22px;
 }

 #listingGrid .stat-box {
     background: #f9fafc;
     padding: 14px;
     border-radius: 14px;
     text-align: center;
     transition: 0.3s;
 }

 #listingGrid .stat-box:hover {
     background: linear-gradient(145deg, #e0f7fa, #f1f8ff);
     transform: translateY(-4px);
 }

 #listingGrid .stat-value {
     font-size: 20px;
     font-weight: 700;
     color: #4facfe;
 }

 #listingGrid .stat-label {
     font-size: 13px;
     color: #777;
 }

 /* Sections */
 #listingGrid .profile-section {
     padding: 18px 22px;
     border-top: 1px solid #eee;
     text-align: left;
 }

 .profile-section.profile-reviews h3,
 .profile-section .review-item {
     text-align: center;
 }

 .profile-detail-label em {
     font-style: normal;
     float: right;
     text-align: right;
     margin-right: 14px;
 }

 #listingGrid .profile-section h3 {
     font-size: 18px;
     margin-bottom: 12px;
     color: #4facfe;
 }

 #listingGrid .profile-section p {
     font-size: 15px;
     color: #444;
     line-height: 1.5;
 }

 /* Profile Details */
 #listingGrid .profile-details {
     display: flex;
     margin-bottom: 8px;
 }

 #listingGrid .profile-detail-label {
     width: 140px;
     font-weight: 600;
     color: #555;
     text-align: left;
     font-style: normal;
 }

 #listingGrid .profile-detail-value {
     flex: 1;
     color: #333;
 }

 /* Tags (Specialities & Languages) */
 #listingGrid .profile-tags {
     display: flex;
     flex-wrap: wrap;
     gap: 8px;
 }

 #listingGrid .profile-tags span {
     background: linear-gradient(90deg, #4facfe, #00f2fe);
     color: #fff;
     padding: 6px 12px;
     border-radius: 12px;
     font-size: 13px;
     font-weight: 500;
     box-shadow: 0 3px 6px rgba(0, 242, 254, 0.3);
 }

 /* Reviews */
 #listingGrid .profile-reviews #profileReviews {
     display: flex;
     flex-direction: column;
     gap: 14px;
 }

 #listingGrid .profile-reviews .review-card {
     background: #f9fafc;
     padding: 12px 16px;
     border-radius: 12px;
     box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
 }

 /* =========================
   Confirmation Modal Styling
   ========================= */
 #listingGrid .modal {
     display: none;
     /* hidden by default */
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: rgba(20, 20, 20, 0.65);
     backdrop-filter: blur(6px);
     justify-content: center;
     align-items: center;
     z-index: 1100;
     animation: fadeIn 0.4s ease-in-out;
 }

 #listingGrid .modal-content.confirmation-modal {
     background: #fff;
     border-radius: 20px;
     width: 90%;
     max-width: 600px;
     padding: 28px 32px;
     text-align: center;
     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
     transform: scale(0.8) translateY(40px);
     opacity: 0;
     animation: slideUp 0.45s ease forwards;
 }

 /* Success Icon */
 #listingGrid .confirmation-icon {
     font-size: 70px;
     color: #4caf50;
     margin-bottom: 14px;
     animation: bounce 1s ease;
 }

 /* Title */
 #listingGrid .confirmation-title {
     font-size: 24px;
     font-weight: 700;
     margin-bottom: 18px;
     color: #333;
 }

 /* Summary */
 #listingGrid .confirmation-summary {
     background: #f9fafc;
     padding: 16px;
     border-radius: 14px;
     text-align: left;
     margin: 0 auto 18px;
     width: 100%;
     max-width: 460px;
     box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.05);
 }

 #listingGrid .confirmation-summary p {
     margin: 6px 0;
     font-size: 15px;
     color: #444;
 }

 #listingGrid .confirmation-summary strong {
     color: #333;
 }

 /* App Download Section */
 #listingGrid .app-download {
     margin: 22px 0;
 }

 #listingGrid .app-download h3 {
     font-size: 18px;
     color: #4caf50;
     margin-bottom: 8px;
 }

 #listingGrid .app-download p {
     font-size: 14px;
     color: #666;
     margin-bottom: 12px;
 }

 #listingGrid .app-stores {
     display: flex;
     justify-content: center;
     gap: 16px;
 }

 #listingGrid .app-store-btn img {
     height: 45px;
     transition: transform 0.3s;
 }

 #listingGrid .app-store-btn img:hover {
     transform: scale(1.08);
 }

 /* Continue Button */
 #listingGrid .continue-btn {
     background: linear-gradient(90deg, #4caf50, #81c784);
     color: #fff;
     font-size: 16px;
     padding: 12px 26px;
     border: none;
     border-radius: 14px;
     cursor: pointer;
     margin-top: 18px;
     transition: all 0.3s;
     box-shadow: 0 4px 12px rgba(76, 175, 80, 0.3);
 }

 #listingGrid .continue-btn i {
     margin-right: 6px;
 }

 #listingGrid .continue-btn:hover {
     background: linear-gradient(90deg, #388e3c, #66bb6a);
     transform: translateY(-2px);
 }

 /* =========================
   Transport Supplier Steps
   ========================= */
 #TransportSupplier__modifier {
     font-family: "Segoe UI", sans-serif;
     padding: 30px;
     background: #f8fafc;
     border-radius: 20px;
     box-shadow: 0 8px 18px rgba(0, 0, 0, 0.08);
     max-width: 700px;
     margin: 6em auto 3em auto;
 }

 #TransportSupplier__modifier img {
     width: 100%;
 }

 /* Page Title */
 #TransportSupplier__modifier .page-title {
     font-size: 26px;
     font-weight: 700;
     color: #2a3f54;
     text-align: center;
     margin-bottom: 10px;
 }

 #TransportSupplier__modifier .description {
     text-align: center;
     color: #6c757d;
     font-size: 15px;
     margin-bottom: 30px;
 }

 /* Form Section */
 #TransportSupplier__modifier .form-section {
     padding: 25px;
     background: #fff;
     border-radius: 16px;
     border: 1px solid #e0e0e0;
     position: relative;
 }

 /* Form Groups */
 #TransportSupplier__modifier .form-group {
     margin-bottom: 18px;
 }

 #TransportSupplier__modifier .form-group label {
     font-weight: 600;
     color: #333;
     margin-bottom: 6px;
     display: block;
 }

 #TransportSupplier__modifier .form-group input {
     width: 100%;
     padding: 12px 14px;
     border-radius: 10px;
     border: 1px solid #d6d6d6;
     font-size: 14px;
     transition: all 0.3s ease;
 }

 #TransportSupplier__modifier .form-group input:focus {
     border-color: #007bff;
     box-shadow: 0 0 8px rgba(0, 123, 255, 0.2);
     outline: none;
 }

 /* OTP Section */
 #TransportSupplier__modifier .otp-input-group {
     display: flex;
     gap: 12px;
     margin: 15px 0;
     justify-content: center;
 }

 #TransportSupplier__modifier .otp-input {
     width: 55px;
     height: 55px;
     text-align: center;
     font-size: 22px;
     border-radius: 12px;
     border: 1px solid #ccc;
     transition: 0.3s;
 }

 #TransportSupplier__modifier .otp-input:focus {
     border-color: #28a745;
     box-shadow: 0 0 6px rgba(40, 167, 69, 0.3);
 }

 #TransportSupplier__modifier .otp-timer {
     text-align: center;
     margin-top: 8px;
     color: #ff4d4d;
     font-weight: 600;
 }

 #TransportSupplier__modifier .otp-error {
     text-align: center;
     color: #dc3545;
     margin-top: 8px;
 }

 #TransportSupplier__modifier .otp-success {
     text-align: center;
     color: #28a745;
     font-weight: 600;
     margin-top: 8px;
 }

 /* Buttons */
 #TransportSupplier__modifier .step-button {
     background: linear-gradient(135deg, #007bff, #0056b3);
     border: none;
     color: #fff;
     padding: 12px 20px;
     border-radius: 12px;
     font-size: 15px;
     cursor: pointer;
     transition: all 0.3s;
 }

 #TransportSupplier__modifier .step-button:hover {
     background: linear-gradient(135deg, #0056b3, #004080);
     transform: translateY(-2px);
     box-shadow: 0 6px 14px rgba(0, 91, 187, 0.3);
 }

 #TransportSupplier__modifier .submit-container {
     display: flex;
     justify-content: center;
     gap: 14px;
     margin-top: 12px;
 }

 #TransportSupplier__modifier .step-navigation {
     display: flex;
     justify-content: space-between;
     margin-top: 25px;
 }

 /* Step Indicator (Creative Add-on) */
 #TransportSupplier__modifier .step-navigation::before {
     content: "";
     position: absolute;
     top: -12px;
     left: 25px;
     right: 25px;
     height: 4px;
     background: #e9ecef;
     border-radius: 10px;
 }

 #TransportSupplier__modifier .step-navigation::after {
     content: "";
     position: absolute;
     top: -12px;
     left: 25px;
     width: 40%;
     height: 4px;
     background: #007bff;
     border-radius: 10px;
     transition: width 0.4s ease;
 }

 /* =========================
   Vehicle Registration
   ========================= */
 #VehicleRegistration__modifier .container {
     max-width: 1200px;
     margin: 0px auto;
     padding: 16px 16px 64px;
 }

 #VehicleRegistration__modifier .chip input {
     display: none;
 }

 #VehicleRegistration__modifier .chip input:checked+label {
     border-color: var(--brand);
     color: #0b77f5;
     background: #eef6ff;
     box-shadow: 0 0 0 3px var(--ring);
 }

 #VehicleRegistration__modifier .chip label {
     display: inline-block;
     padding: 12px 20px;
     border: 1px solid #dbe2ea;
     border-radius: 999px;
     cursor: pointer;
     user-select: none;
     transition: all 0.2s ease;
     font-weight: 500;
 }

 #VehicleRegistration__modifier .uploader input[type="file"] {
     visibility: hidden;
     position: absolute;
 }

 #VehicleRegistration__modifier .uploader {
     position: relative;
 }

 #VehicleRegistration__modifier .card {
     background: var(--card);
     border: 1px solid var(--border);
     border-radius: 16px;
     padding: 20px;
     box-shadow: 0 10px 30px rgba(0, 0, 0, .04);
 }

 #VehicleRegistration__modifier .header {
     position: sticky;
     top: 0;
     z-index: 50;
     background: linear-gradient(180deg, #fff, rgba(255, 255, 255, .6));
     backdrop-filter: blur(6px);
     border-bottom: 1px solid var(--border);
 }

 #VehicleRegistration__modifier .header-inner {
     max-width: 1200px;
     margin: 0 auto;
     display: flex;
     align-items: center;
     gap: 16px;
     padding: 10px 16px;
 }

 #VehicleRegistration__modifier .logo img {
     height: 50px;
 }

 #VehicleRegistration__modifier .grid {
     display: grid;
     gap: 12px;
 }

 #VehicleRegistration__modifier .grid-3 {
     grid-template-columns: repeat(3, 1fr);
 }

 #VehicleRegistration__modifier .grid-2 {
     grid-template-columns: repeat(2, 1fr);
 }

 #VehicleRegistration__modifier .section-title {
     grid-column: 1/-1;
     font-weight: 700;
     margin-top: 12px;
 }

 #VehicleRegistration__modifier .input,
 #VehicleRegistration__modifier input,
 #VehicleRegistration__modifier select,
 #VehicleRegistration__modifier textarea {
     width: 100% !important;
     border: 1px solid var(--border) !important;
     border-radius: 10px !important;
     padding: 10px 12px !important;
     background: #fff !important;
     font-size: 15px !important;
     height: 44px !important;
     padding-left: 35px !important;
 }

 #VehicleRegistration__modifier input:focus,
 #VehicleRegistration__modifier select:focus,
 #VehicleRegistration__modifier textarea:focus {
     border-color: var(--brand);
     box-shadow: 0 0 0 3px var(--ring);
     outline: 0;
 }

 #VehicleRegistration__modifier label {
     font-size: 14px;
     color: var(--muted);
     display: block;
     margin-bottom: 6px;
     display: flex;
     justify-content: flex-start;
     align-items: center;
 }

 #VehicleRegistration__modifier label input {
     width: auto !important;
 }

 #VehicleRegistration__modifier .required::after {
     content: " *";
     color: #ef4444;
 }

 /* #VehicleRegistration__modifier .btn {
     font-weight: 700;
     font-size: 15px;
     display: inline-flex;
     gap: 8px;
     align-items: center;
     padding: 14px 22px;
     border-radius: 10px;
     border: 1px solid var(--border);
     background: #fff;
     cursor: pointer;
 } */

 #VehicleRegistration__modifier .btn.primary {
     background: var(--brand);
     border-color: var(--brand);
     color: #fff;
 }

 #VehicleRegistration__modifier .btn.ghost {
     background: #fff;
     color: #0f172a;
 }

 #VehicleRegistration__modifier .btns {
     display: flex;
     gap: 12px;
     justify-content: space-between;
     margin-top: 28px;
     padding-top: 20px;
     border-top: 1px solid #e5e7eb;
 }

 #VehicleRegistration__modifier .tabs {
     display: flex;
     gap: 8px;
     flex-wrap: wrap;
     margin: 0 0 25px;
 }

 #VehicleRegistration__modifier .tab {
     font-weight: 600;
     text-align: center;
     width: 32.85%;
     padding: 16px 12px;
     border: 1px solid var(--border);
     border-radius: 12px;
     background: #fff;
     cursor: pointer;
     color: #64748b;
 }

 #VehicleRegistration__modifier .tab.active {
     border-color: var(--brand);
     color: #0b77f5;
     background: #eef6ff;
     box-shadow: 0 0 0 3px var(--ring);
 }

 #VehicleRegistration__modifier .hidden {
     display: none;
 }

 #VehicleRegistration__modifier .choice-row {
     display: flex;
     gap: 10px;
     flex-wrap: wrap;
     margin: 8px 0 12px 0;
 }

 #VehicleRegistration__modifier .chip {
     display: flex;
     align-items: center;
     gap: 8px;
 }

 #VehicleRegistration__modifier .uploader .box {
     display: block;
     border: 1px dashed var(--border);
     border-radius: 10px;
     padding: 9px;
     text-align: center;
     color: var(--muted);
     cursor: pointer;
 }

 #VehicleRegistration__modifier .uploaded-images {
     display: flex;
     gap: 8px;
     flex-wrap: wrap;
     margin-top: 8px;
 }

 #VehicleRegistration__modifier .uploaded-image {
     position: relative;
     width: 90px;
     height: 70px;
     border: 1px solid var(--border);
     border-radius: 8px;
     overflow: hidden;
 }

 #VehicleRegistration__modifier .uploaded-image img {
     width: 100%;
     height: 100%;
     object-fit: cover;
 }

 #VehicleRegistration__modifier .uploaded-image .remove {
     position: absolute;
     top: 2px;
     right: 4px;
     background: #000;
     color: #fff;
     font-size: 12px;
     padding: 2px 4px;
     border-radius: 4px;
     cursor: pointer;
 }

 #VehicleRegistration__modifier .multi-vehicle-table-container {
     width: 100%;
     overflow-x: auto;
     margin: 20px 0;
     border: 1px solid var(--border);
     border-radius: 8px;
 }

 #VehicleRegistration__modifier .multi-vehicle-table {
     width: 100%;
     border-collapse: collapse;
     min-width: 800px;
 }

 #VehicleRegistration__modifier .multi-vehicle-table th,
 #VehicleRegistration__modifier .multi-vehicle-table td {
     border: 1px solid var(--border);
     padding: 12px;
     text-align: center;
     min-width: 150px;
 }

 #VehicleRegistration__modifier .multi-vehicle-table th:first-child,
 #VehicleRegistration__modifier .multi-vehicle-table td:first-child {
     position: sticky;
     left: 0;
     background: var(--light-bg);
     z-index: 1;
     min-width: 200px;
     text-align: left;
 }

 #VehicleRegistration__modifier .form-note {
     margin-top: 8px;
     color: var(--muted);
     font-size: 13px;
 }

 #VehicleRegistration__modifier .kvs {
     display: grid;
     grid-template-columns: 220px 1fr;
     gap: 8px;
 }

 /*Upload*/
 .uploader .uploader-title {
     display: block;
     margin-bottom: 10px;
     font-weight: 600;
     color: var(--text);
 }

 .uploader .box input[type="file"] {
     position: absolute;
     inset: 0;
     width: 100%;
     height: 100%;
     opacity: 0;
     cursor: pointer;
 }

 .uploader .box {
     --pad: 14px;
     display: block;
     position: relative;
     background: linear-gradient(180deg, var(--card), #fff);
     border: 1px solid var(--border);
     border-radius: var(--radius);
     padding: var(--pad);
     box-shadow: 0 6px 20px rgba(11, 119, 245, 0.06);
     transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
     cursor: pointer;
     overflow: hidden;
     outline: none;
 }

 .uploader .box-content {
     display: flex;
     align-items: center;
     gap: 12px;
 }

 .uploader .upload-icon {
     display: inline-block;
     min-width: 20px;
     min-height: 20px;
     color: var(--primary);
     flex-shrink: 0;
 }

 .uploader .box-text {
     font-weight: 600;
     color: var(--text);
 }

 .uploader .box-hint {
     display: block;
     font-size: 12px;
     color: var(--muted);
     margin-top: 2px;
 }

 .uploader .box:hover,
 .uploader .box:focus {
     /* transform: translateY(-4px); */
     box-shadow: 0 18px 40px rgba(11, 119, 245, 0.08);
     border-color: rgba(11, 119, 245, 0.28);
 }

 .uploader .box:focus-visible {
     box-shadow: 0 0 0 4px rgba(11, 119, 245, 0.12);
     border-color: var(--primary);
 }

 .uploader .box::after {
     content: "Upload";
     position: absolute;
     right: 10px;
     top: 50%;
     transform: translateY(-50%);
     font-size: 12px;
     font-weight: 700;
     color: #fff;
     background: linear-gradient(90deg, var(--primary), var(--accent));
     padding: 6px 10px;
     border-radius: 999px;
     box-shadow: 0 6px 18px rgba(5, 195, 167, 0.14);
     pointer-events: none;
 }

 .uploader .box.dragover {
     border-color: rgba(5, 195, 167, 0.34);
     box-shadow: 0 18px 40px rgba(5, 195, 167, 0.08);
     transform: translateY(-2px);
 }

 .uploader .box.dragover::after {
     content: "Drop to upload";
     background: linear-gradient(90deg, var(--accent), var(--primary));
 }

 .uploader .box.uploaded {
     border-color: rgba(5, 195, 167, 0.24);
     box-shadow: 0 8px 26px rgba(5, 195, 167, 0.06);
 }

 .uploader .box.uploaded .upload-icon {
     color: var(--accent);
 }

 .uploader .box.uploaded::after {
     content: "Done ✓";
     background: linear-gradient(90deg, #2fd08b, #05c3a7);
 }

 #appointmentModal button.close-modal,
 #profileModal button.close-modal,
 #confirmationModal button.close-modal {
     color: red;
     position: absolute;
     top: 0px;
     right: 0px;
 }

 /*Enable Signup*/
 /* ====== Landing Page Styling ====== */
 .landing-container {
     max-width: 900px;
     margin: 0 auto;
     padding: 1rem 2rem;
     text-align: center;
     background: linear-gradient(135deg, #f6f9fc, #e3f2fd);
     border-radius: 20px;
     box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
     overflow: hidden;
     animation: fadeIn 1.2s ease-in-out;
 }

 /* Headline */
 .landing-container h1 {
     font-size: 2.8rem;
     font-weight: 800;
     color: #2b3d52;
     margin-bottom: 1.5rem;
     position: relative;
     animation: slideDown 1s ease forwards;
 }

 /* Static Image Container */
 .static-image {
     position: relative;
     overflow: hidden;
     border-radius: 15px;
     box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
     margin-bottom: 2rem;
     animation: zoomIn 1.3s ease;
 }

 .static-image img {
     width: 100%;
     display: block;
     transition: transform 0.5s ease;
 }

 .static-image:hover img {
     transform: scale(1.1);
 }

 /* Overlay Content */
 .image-content {
     position: absolute;
     bottom: 0;
     left: 0;
     right: 0;
     background: linear-gradient(to top, rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0));
     color: #fff;
     padding: 1.5rem;
     text-align: left;
     animation: fadeUp 1.5s ease;
 }

 .image-content h3 {
     font-size: 1.5rem;
     margin-bottom: 0.5rem;
 }

 .image-content p {
     font-size: 1rem;
     line-height: 1.5;
 }

 /* Paragraphs */
 .landing-container p {
     font-size: 1.05rem;
     line-height: 1.8;
     margin: 1rem 0;
     color: #444;
     animation: fadeIn 2s ease;
 }

 .highlight {
     background: linear-gradient(90deg, #ff6a00, #ee0979);
     color: #fff !important;
     padding: 0.2rem 0.6rem;
     border-radius: 6px;
     font-weight: 600;
 }

 /* Register Button */
 .register-btn {
     display: inline-block;
     margin-top: 2rem;
     padding: 0.9rem 2rem;
     font-size: 1.1rem;
     font-weight: 700;
     color: #fff;
     background: linear-gradient(135deg, #0072ff, #00c6ff);
     border-radius: 50px;
     text-decoration: none;
     box-shadow: 0 6px 15px rgba(0, 150, 255, 0.4);
     transition: all 0.3s ease;
     animation: pulse 2s infinite;
 }

 .register-btn i {
     margin-right: 0.6rem;
 }

 .register-btn:hover {
     transform: translateY(-4px) scale(1.05);
     box-shadow: 0 10px 25px rgba(0, 150, 255, 0.6);
     background: linear-gradient(135deg, #00c6ff, #0072ff);
 }

 /* ====== Animations ====== */
 @keyframes fadeIn {
     0% {
         opacity: 0;
         transform: translateY(20px);
     }

     100% {
         opacity: 1;
         transform: translateY(0);
     }
 }

 @keyframes slideDown {
     0% {
         opacity: 0;
         transform: translateY(-40px);
     }

     100% {
         opacity: 1;
         transform: translateY(0);
     }
 }

 @keyframes zoomIn {
     0% {
         transform: scale(0.95);
         opacity: 0;
     }

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

 @keyframes fadeUp {
     0% {
         opacity: 0;
         transform: translateY(40px);
     }

     100% {
         opacity: 1;
         transform: translateY(0);
     }
 }

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

     50% {
         transform: scale(1.05);
     }

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

 /*Viheicle Preview*/
 #previewData {
     font-family: "Inter", sans-serif;
     color: #2d2d2d;
     line-height: 1.6;
     margin-top: 2em;
     padding: 2em;
 }

 /* Card look */
 #previewData .card {
     background: #fff;
     border-radius: 16px;
     padding: 24px;
     margin-bottom: 20px;
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
     transition: transform 0.2s ease, box-shadow 0.2s ease;
 }

 #previewData .card:hover {
     transform: translateY(-3px);
     box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
 }

 /* Headings */
 #previewData h2 {
     font-size: 1.8rem;
     font-weight: 700;
     margin-bottom: 12px;
     color: #222;
 }

 #previewData h3 {
     font-size: 1.3rem;
     font-weight: 600;
     margin-bottom: 10px;
     border-left: 4px solid #007bff;
     padding-left: 8px;
 }

 #previewData h4 {
     font-size: 1.1rem;
     font-weight: 600;
     color: #007bff;
 }

 #previewData h5 {
     font-size: 1rem;
     font-weight: 600;
     margin: 12px 0 6px;
     color: #444;
 }

 /* Key-value section */
 #previewData .kvs {
     display: grid;
     grid-template-columns: 180px 1fr;
     gap: 8px 16px;
     background: #fafafa;
     padding: 16px;
     border-radius: 10px;
     margin-top: 8px;
 }

 #previewData .kvs div:nth-child(odd) {
     font-weight: 600;
     color: #555;
 }

 #previewData .kvs div:nth-child(even) {
     color: #333;
 }

 /* Grid helpers */
 #previewData .grid {
     display: grid;
     gap: 12px 16px;
 }

 #previewData .grid-3 {
     grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
 }

 #previewData .grid-4 {
     grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
 }

 /* Muted text */
 #previewData .muted {
     color: #777;
     font-size: 0.9rem;
 }

 /* Labels */
 #previewData label {
     font-size: 0.85rem;
     font-weight: 600;
     display: block;
     margin-bottom: 3px;
     color: #555;
 }

 /* Image thumbnails */
 #previewData .img-block {
     background: #fdfdfd;
     padding: 10px;
     border: 1px solid #eee;
     border-radius: 10px;
 }

 #previewData .thumbs img {
     border-radius: 10px;
     border: 1px solid #ddd;
     transition: transform 0.2s ease;
 }

 #previewData .thumbs img:hover {
     transform: scale(1.05);
 }

 /* Uploaded documents */
 #previewData ul.muted {
     padding-left: 20px;
     margin: 10px 0;
 }

 #previewData ul.muted li {
     margin-bottom: 6px;
 }

 /* Buttons */
 #previewData .btns {
     display: flex;
     gap: 12px;
     justify-content: space-between;
 }

 #previewData .btn {
     padding: 10px 20px;
     border-radius: 8px;
     font-weight: 600;
     font-size: 0.95rem;
     cursor: pointer;
     border: none;
     transition: background 0.2s ease, transform 0.2s ease;
 }

 #previewData .btn.ghost {
     background: #f5f5f5;
     color: #555;
 }

 #previewData .btn.ghost:hover {
     background: #eaeaea;
 }

 #previewData .btn.primary {
     background: #007bff;
     color: #fff;
 }

 #previewData .btn.primary:hover {
     background: #0056b3;
     transform: translateY(-1px);
 }

 #VehiclePreview__modifier .tabs {
     display: flex;
     gap: 8px;
     flex-wrap: wrap;
     margin: 0 0 25px;
 }

 #VehiclePreview__modifier .tab {
     font-weight: 600;
     text-align: center;
     width: 32.85%;
     padding: 16px 12px;
     border: 1px solid var(--border);
     border-radius: 12px;
     background: #fff;
     cursor: pointer;
     color: #64748b;
     text-decoration: none !important;
 }

 #VehiclePreview__modifier .tab.active {
     border-color: var(--brand);
     color: #0b77f5;
     background: #eef6ff;
     box-shadow: 0 0 0 3px var(--ring);
 }

 div#VehiclePreview__modifier {
     margin-bottom: 3em;
 }

 /*table brouse*/
 .multi-vehicle-table input[type="file"] {
     position: relative;
     width: 100%;
     padding: 20px;
     border: 2px dashed #d0d7de;
     border-radius: 8px;
     background-color: #f9f9fb;
     text-align: center;
     color: #555;
     cursor: pointer;
     font-size: 14px;
     transition: border-color 0.3s, background-color 0.3s;
 }

 /* Hide default file input text */
 .multi-vehicle-table input[type="file"]::-webkit-file-upload-button {
     visibility: hidden;
 }

 /* .multi-vehicle-table input[type="file"]::before {
  content: "Click to upload or drop files";
  display: block;
  font-size: 14px;
  color: #555;
  margin-bottom: 8px;
} */

 /* Add upload button style */
 .multi-vehicle-table input[type="file"]::after {
     content: "Upload";
     display: inline-block;
     padding: 6px 14px;
     border-radius: 20px;
     background: linear-gradient(90deg, var(--primary), var(--accent));
     color: #fff;
     font-size: 13px;
     font-weight: 600;
     cursor: pointer;
     transition: background 0.3s;
     float: right;
 }

 .multi-vehicle-table input[type="file"]:hover {
     border-color: #2a9df4;
     background-color: #f0f9ff;
 }

 .divider__modofier .leftPannel {
     width: calc(25% - 10px) !important;
     /* position: fixed;          
    height: 74vh;           
    overflow-y: auto;         
    z-index: 1000;        */
 }

 .divider__modofier .rightPannel {
     width: calc(75% - 10px);
     /* width: calc(71%) !important;
    margin-left: calc(29%); */
 }

 .border-secondary {
     border-color: #ccc !important;
 }

 /* .row.divider__modofier {
    position: relative;
} */
 nav .social-Media {
     margin-top: 8px;
 }

 nav .social-Media i {
     color: black;
     font-size: 20px;
 }

 /*Dashaboard*/
 #Dashboard__modifier section.agent-dash {
     margin-top: 80px;
 }

 #Dashboard__modifier .agent-dash-left .navbar {
     border-bottom: 1px solid #D9D9D9;
 }

 #Dashboard__modifier .agent-dash-left .nav-link {
     transition: none;
     font-size: 14px;
     font-weight: 400;
     line-height: 1.5;
     color: #181C32;
 }

 #Dashboard__modifier .agent-dash-left .navbar-nav .nav-link.active,
 #Dashboard__modifier .agent-dash-left .navbar-nav .nav-link.show {
     color: #007DF0;
 }

 #Dashboard__modifier .agent-dash-left .welcom-back img {
     width: 100%;
 }

 #Dashboard__modifier .agent-dash-left .recent-booking {
     border: 0.77px solid #EAEAEA;
     padding: 15px;
     border-radius: 6px;
 }

 #Dashboard__modifier .agent-dash-left .recent-booking p {
     font-size: 8px;
     margin-bottom: 0px;
 }

 #Dashboard__modifier .recent-booking-tb ul li {
     padding: 10px 15px;
     width: 100%;
     font-size: 11px;
     font-weight: 700;
     line-height: 1.2;
 }

 #Dashboard__modifier .recent-booking-tb-list {
     border: 0.77px solid #EAEAEA;
     border-radius: 6px;
 }

 #Dashboard__modifier strong {
     font-weight: 600;
 }

 #Dashboard__modifier .total-earning {
     border: 0.77px solid #EAEAEA;
     padding: 15px;
     border-radius: 8px;
 }

 #Dashboard__modifier .total-inner h1 {
     font-size: 28px;
     font-weight: 600;
     line-height: 1;
     color: #007DF0;
 }

 #Dashboard__modifier .total-inner span {
     font-size: 10px;
     font-weight: 600;
 }


 #Dashboard__modifier .total-inners {
     border-bottom: 0.5px solid #BABABA;
     padding: 5px 0px;
 }

 #Dashboard__modifier .dashboard-container {
     padding: 20px;
 }

 #Dashboard__modifier .card {
     border-radius: 10px;
     box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
 }

 #Dashboard__modifier .chart-container {
     background: white;
     padding: 20px;
     border-radius: 10px;
     box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
 }

 /*Dashboard Redesign*/
 /* Apply only inside Dashboard modifier */
 #Dashboard__modifier .navbar {
     background: linear-gradient(90deg, #00416a, #4c81b5);
     border-radius: 12px;
     padding: 8px 16px;
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
 }

 /* Navbar links */
 #Dashboard__modifier .navbar-nav .nav-link {
     color: #fff !important;
     font-weight: 500;
     padding: 10px 18px;
     border-radius: 8px;
     position: relative;
     transition: all 0.3s ease;
     text-align: center;
 }

 /* Hover effect with glowing underline */
 #Dashboard__modifier .navbar-nav .nav-link {
     color: #fff !important;
     font-weight: 500;
     padding: 10px 18px;
     border-radius: 8px;
     position: relative;
     transition: all 0.3s ease;
     text-align: center;
     display: flex;
     flex-direction: column;
     gap: 9px;
 }

 #Dashboard__modifier .navbar-nav .nav-link:hover::after,
 #Dashboard__modifier .navbar-nav .nav-link.active::after {
     width: 60%;
 }

 /* Hover background */
 #Dashboard__modifier .navbar-nav .nav-link:hover {
     background: rgba(255, 255, 255, 0.15);
     transform: translateY(-2px);
 }

 /* Active tab */
 #Dashboard__modifier .navbar-nav .nav-link.active {
     background: #ffcc00;
     color: #222 !important;
     font-weight: 600;
 }

 /* Icon spacing fix */
 #Dashboard__modifier .navbar-nav .nav-link i {
     transition: transform 0.3s ease;
 }

 #Dashboard__modifier .navbar-nav .nav-link:hover i {
     transform: rotate(-10deg) scale(1.1);
 }

 /* Button style */
 #Dashboard__modifier .btn-primary {
     /* background: #ff6b6b; */
     background-color: #2563eb;
     border: none;
     font-weight: 600;
     padding: 8px 18px;
     border-radius: 10px;
     box-shadow: 0 3px 8px rgba(255, 107, 107, 0.5);
     transition: all 0.3s ease;
 }

 #Dashboard__modifier .btn-primary:hover {
     /* background: #ff4757; */
     background-color: #2563eb;
     transform: scale(1.05);
 }

 /*Circle Button*/
 /* Circle Create Button */
 /* #Dashboard__modifier .custom__create {
     width: 100px;
     height: 100px;
     border-radius: 50%;
     padding: 0;
     display: flex;
     align-items: center;
     justify-content: center;
     background: #ff6b6b;
     border: none;
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
     transition: all 0.3s ease;
     font-size: 13px;
     flex-direction: column;
     padding: 8px;
     align-items: center;
     gap: 1px;
     position: absolute;
     top: 32px;
     right: -13px;
 } */
 #Dashboard__modifier .custom__create {
     width: auto;
     height: auto;
     border-radius: 6px;
     padding: 0;
     display: flex;
     align-items: center;
     justify-content: center;
     background: #ff6b6b;
     border: none;
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
     /* transition: all 0.3s ease; */
     font-size: 13px;
     flex-direction: column;
     padding: 8px;
     align-items: center;
     gap: 1px;
 }

 #Dashboard__modifier .custom__create i {
     margin: 0 !important;
     color: #fff;
     padding: 0px;
 }

 /* Hover & Focus */
 #Dashboard__modifier .custom__create:hover {
     background: #ff4757;
     /* transform: scale(1.1) rotate(10deg); */
     box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
 }

 /* Optional: Tooltip-like label when hovering */
 /* #Dashboard__modifier .custom__create::after {
     content: "Create Diary";
     position: absolute;
     right: 70px;
     background: #222;
     color: #fff;
     padding: 4px 10px;
     font-size: 12px;
     border-radius: 6px;
     opacity: 0;
     transform: translateY(-50%);
     top: 50%;
     white-space: nowrap;
     transition: all 0.3s ease;
     pointer-events: none;
 }

 #Dashboard__modifier .custom__create:hover::after {
     opacity: 1;
     right: 80px;
 } */

 .Enable__regi {
     margin-top: 6em !important;
 }

 .Enable__regi .image-content p {
     color: #fff !important;
 }

 #filterContent .summary-card {
     padding: 5px 25px 25px 25px !important;
 }

 #profileModal .modal-content {
     max-width: 100%;
     /* width: 100%; */
     padding: 0px;
     margin: 0px auto;
 }

 #profileModal .modal-footer .btn-danger {
     background: #dc3545;
 }

 #profileModal .modal-footer .btn-outline-secondary {
     background: none;
     color: #000 !important;
 }

 .profile-section {
     text-align: left;
 }

 #profileModal ul.list-group {
     text-align: left;
 }

 .terms-checkbox {
     display: flex;
     align-items: center;
 }

 .terms-label {
     display: flex;
     align-items: center;
     gap: 8px;
     /* space between checkbox and text */
     cursor: pointer;
     font-size: 14px;
 }

 .terms-label input[type="checkbox"] {
     width: 16px;
     height: 16px;
     cursor: pointer;
 }

 .terms-label a {
     color: #007bff;
     text-decoration: none;
 }

 .terms-label a:hover {
     text-decoration: underline;
 }

 .c__ad i {
     position: absolute;
     margin: 10px;
 }

 .input-icon i {
     left: 11px;
     top: 21px;
 }

 /*Dashabard Qeury Page*/
 /* Container */
 #custom__table {
     width: 100%;
     overflow-x: auto;
     border-radius: 12px;
     box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
     background: #fff;
 }

 /* Table Styling */
 #custom__table table {
     border-collapse: separate;
     border-spacing: 0;
     width: 100%;
     min-width: 900px;
     font-size: 0.95rem;
     border-bottom: 4px solid #dfdfdf;
 }

 #custom__table thead th {
     background: #f5f7fa;
     color: #333;
     font-weight: 600;
     text-align: left;
     padding: 14px 16px;
     border-bottom: 2px solid #e2e6ea;
     white-space: nowrap;
 }

 #custom__table tbody td {
     padding: 12px 16px;
     border-bottom: 1px solid #f0f2f5;
     vertical-align: middle;
     text-align: center;
 }

 /* Hover effect */
 #custom__table tbody tr:hover {
     background: #f9fbff;
     transition: background 0.3s;
 }

 /* Links */
 #custom__table a.text-primary {
     color: #007bff;
     font-weight: 500;
     text-decoration: none;
 }

 #custom__table a.text-primary:hover {
     text-decoration: underline;
 }

 /* Status styles */
 #custom__table td[title] {
     cursor: help;
 }

 #custom__table td .fa-times-circle {
     font-size: 1.2rem;
 }

 /* Column width utility */
 #Dashboard__modifier .cw-200 {
     width: 200px;
     min-width: 200px;
     max-width: 200px;
     white-space: nowrap;
     text-overflow: ellipsis;
     overflow: hidden;
 }

 /* History table headers */
 #Dashboard__modifier tr th {
     background: #1777d7;
     text-align: center;
     color: #fff;
     font-size: 13px;
 }

 /* Custom Scrollbar for Table */
 #custom__table {
     scrollbar-width: thin;
     /* Firefox */
     scrollbar-color: #1777d7 #f1f1f1;
     /* thumb | track */
 }

 #custom__table::-webkit-scrollbar {
     height: 8px;
     /* horizontal scrollbar height */
 }

 #custom__table::-webkit-scrollbar-track {
     background: #f1f1f1;
     border-radius: 10px;
 }

 #custom__table::-webkit-scrollbar-thumb {
     background: #1777d7;
     border-radius: 10px;
 }

 #custom__table::-webkit-scrollbar-thumb:hover {
     background: #0d5ba8;
 }

 /*My Earning*/
 .AdvanceSearch .agent-dash-left .navbar {
     border-bottom: 1px solid #D9D9D9;
 }

 .AdvanceSearch .agent-dash-left .nav-link {
     transition: none;
     font-size: 14px;
     font-weight: 400;
     line-height: 1.5;
     color: #181C32;
 }

 .AdvanceSearch .agent-dash-left .navbar-nav .nav-link.active,
 .AdvanceSearch .agent-dash-left .navbar-nav .nav-link.show {
     color: #007DF0;
 }

 .AdvanceSearch .agent-dash-left .welcom-back img {
     width: 100%;
 }

 .AdvanceSearch .agent-dash-left .recent-booking {
     border: 0.77px solid #EAEAEA;
     padding: 15px;
     border-radius: 6px;
 }

 .AdvanceSearch .agent-dash-left .recent-booking p {
     font-size: 8px;
     margin-bottom: 0px;
 }

 .AdvanceSearch .recent-booking-tb ul li {
     padding: 10px 15px;
     width: 100%;
     font-size: 11px;
     font-weight: 700;
     line-height: 1.2;
 }

 .AdvanceSearch .recent-booking-tb-list {
     border: 0.77px solid #EAEAEA;
     border-radius: 6px;
 }

 .AdvanceSearch strong {
     font-weight: 600;
 }

 .AdvanceSearch .chart-container {
     width: 100%;
     height: 300px;
     display: flex;
     justify-content: center;
     align-items: center;
     margin: auto;
     border: 1px solid #d9d9d9;
     border-radius: 10px;
     padding: 10px;
     background: #fff;
 }

 .AdvanceSearch .earnings-box {
     display: flex;
     align-items: center;
     justify-content: space-between;
     padding: 15px;
     border-radius: 10px;
     color: white;
     font-size: 18px;
     font-weight: bold;
 }

 .AdvanceSearch .shopping-box {
     background-color: #007bff;
 }

 .AdvanceSearch .restaurant-box {
     background-color: #28a745;
 }

 .AdvanceSearch .earning-amount {
     font-size: 24px;
     font-weight: bold;
     color: #333;
     margin-top: 10px;
 }

 .AdvanceSearch .search-section {
     border: 1px solid #d9d9d9;
     border-radius: 10px;
     padding: 15px;
     background: #fff;
 }

 .AdvanceSearch .form-control,
 .AdvanceSearch .form-select,
 .AdvanceSearch .btn {
     height: 38px;
 }

 /*My Earning*/
 /* Common Card Styling */
 .earning-card {
     background: #fff;
     border-radius: 16px;
     padding: 25px 20px;
     transition: all 0.3s ease-in-out;
 }

 .earning-card:hover {
     transform: translateY(-4px);
     box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
 }

 /* Title */
 .earning-title {
     font-size: 18px;
     font-weight: 600;
     margin-bottom: 8px;
     color: #181C32;
     display: flex;
     align-items: center;
     justify-content: center;
 }

 /* Amount */
 .earning-amount {
     font-size: 24px;
     font-weight: 700;
     margin: 10px 0;
 }

 /* Chart container */
 .chart-container {
     position: relative;
     height: 220px;
     width: 100%;
 }

 /* Colors */
 .TotalEarning .earning-amount {
     color: #007bff !important;
     /* Primary Blue */
 }

 .TentativeEarning .earning-amount {
     color: #28a745 !important;
     /* Success Green */
 }

 /*Customer Signing*/
 #customerSignin__modifier .login-container {
     display: flex;
     flex: 1;
     align-items: center;
     justify-content: center;
     padding: 20px 20px;
     background: linear-gradient(rgba(26, 62, 114, 0.05), rgba(26, 62, 114, 0.05)),
         url('https://images.unsplash.com/photo-1508672019048-805c876b67e2?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80') no-repeat center center;
     background-size: cover;
     height: calc(100vh - 103px);
 }

 #customerSignin__modifier .login-card {
     background-color: var(--card-bg);
     border-radius: var(--radius);
     box-shadow: var(--shadow-lg);
     width: 100%;
     max-width: 490px;
     padding: 20px 50px;
     text-align: center;
     position: relative;
     overflow: hidden;

     /* ADD THESE LINES */
     max-height: 90vh;
     /* Window ke 90% height tak hi allow karega */
     overflow-y: auto;
     /* Agar content zyada hua to vertical scroll aayega */
 }


 #customerSignin__modifier .login-card::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 5px;
     background: linear-gradient(90deg, var(--primary), var(--secondary));
 }

 #customerSignin__modifier .login-logo {
     margin-bottom: 5px;
 }

 #customerSignin__modifier .login-logo i {
     font-size: 50px;
     color: var(--primary);
     margin-bottom: 15px;
 }

 #customerSignin__modifier .login-logo h2 {
     color: var(--primary);
     font-size: 28px;
     margin-bottom: 5px;
 }

 #customerSignin__modifier .login-logo p {
     color: var(--text-light);
     font-size: 14px;
 }

 #customerSignin__modifier .login-form .form-group {
     margin-bottom: 20px;
     text-align: left;
 }

 #customerSignin__modifier .login-form label {
     display: block;
     font-weight: 500;
     color: var(--primary);
 }

 #customerSignin__modifier .login-form input {
     width: 100%;
     padding: 12px 15px;
     border: 1px solid var(--border);
     border-radius: var(--radius-sm);
     font-family: 'Poppins', sans-serif;
     font-size: 15px;
     transition: all 0.3s ease;
 }

 #customerSignin__modifier .login-form input:focus {
     outline: none;
     border-color: var(--primary);
     box-shadow: 0 0 0 3px rgba(26, 62, 114, 0.2);
 }

 #customerSignin__modifier .remember-forgot {
     display: flex;
     justify-content: space-between;
     align-items: center;
     margin-bottom: 15px;
     font-size: 14px;
 }

 #customerSignin__modifier .remember-me {
     display: flex;
     align-items: center;
     gap: 8px;
 }

 #customerSignin__modifier .remember-me input {
     width: auto;
 }

 #customerSignin__modifier .forgot-password a {
     color: var(--primary);
     text-decoration: none;
     transition: all 0.3s ease;
 }

 #customerSignin__modifier .forgot-password a:hover {
     text-decoration: underline;
 }

 #customerSignin__modifier .login-btn {
     background-color: var(--primary);
     color: white;
     border: none;
     border-radius: var(--radius-sm);
     padding: 10px 14px;
     width: 100%;
     font-size: 16px;
     font-weight: 500;
     cursor: pointer;
     transition: all 0.3s ease;
     margin-bottom: 10px;
     display: flex;
     justify-content: center;
 }

 #customerSignin__modifier .login-btn:hover {
     background-color: var(--primary-dark);
     transform: translateY(-2px);
 }

 #customerSignin__modifier .social-login {
     margin-bottom: 5px;
 }

 #customerSignin__modifier .social-login p {
     color: var(--text-light);
     font-size: 14px;
     margin-bottom: 15px;
     position: relative;
 }

 #customerSignin__modifier .social-login p::before,
 #customerSignin__modifier .social-login p::after {
     content: '';
     position: absolute;
     top: 50%;
     width: 30%;
     height: 1px;
     background-color: var(--border);
 }

 #customerSignin__modifier .social-login p::before {
     left: 0;
 }

 #customerSignin__modifier .social-login p::after {
     right: 0;
 }

 #customerSignin__modifier .social-icons {
     display: flex;
     justify-content: center;
     gap: 15px;
 }

 #customerSignin__modifier .social-icon {
     width: 45px;
     height: 45px;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     color: white;
     font-size: 18px;
     cursor: pointer;
     transition: all 0.3s ease;
 }

 #customerSignin__modifier .social-icon.google {
     background-color: #DB4437;
 }

 #customerSignin__modifier .social-icon.facebook {
     background-color: #4267B2;
 }

 #customerSignin__modifier .social-icon.apple {
     background-color: #000000;
 }

 #customerSignin__modifier .social-icon:hover {
     transform: translateY(-3px);
 }

 #customerSignin__modifier .register-link {
     font-size: 14px;
     color: var(--text-light);
 }

 #customerSignin__modifier .register-link a {
     color: var(--primary);
     text-decoration: none;
     font-weight: 500;
     transition: all 0.3s ease;
 }

 #customerSignin__modifier .register-link a:hover {
     text-decoration: underline;
 }

 #customerSignin__modifier .otp-input {
     width: 40px;
     height: 40px;
     text-align: center;
     font-size: 20px;
     margin: 0 5px;
 }

 #customerSignin__modifier .lightbox {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: rgba(0, 0, 0, 0.7);
     display: none;
     justify-content: center;
     align-items: center;
     z-index: 1000;
 }

 #customerSignin__modifier .lightbox-content {
     background: #fff;
     padding: 30px;
     border-radius: 10px;
     position: relative;
     text-align: center;
 }

 #customerSignin__modifier .close-btn {
     position: absolute;
     top: 10px;
     right: 15px;
     font-size: 20px;
     background: none;
     border: none;
 }

 /*Welcomeback*/
 /* Welcome Card */
 #customerSignin__modifier .welcome-card {
     display: flex;
     align-items: center;
     gap: 20px;
     background: #fff;
     border-radius: 15px;
     box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
     padding: 20px 30px;
     margin: 20px auto;
     max-width: 650px;
     transition: transform 0.3s ease, box-shadow 0.3s ease;
 }

 #customerSignin__modifier .welcome-card:hover {
     transform: translateY(-3px);
     box-shadow: 0 12px 35px rgba(0, 0, 0, 0.12);
 }

 /* Profile Avatar */
 #customerSignin__modifier .welcome-avatar {
     flex-shrink: 0;
 }

 #customerSignin__modifier .welcome-avatar img {
     width: 70px;
     height: 70px;
     border-radius: 50%;
     object-fit: cover;
     border: 3px solid #1a3e72;
     box-shadow: 0 4px 12px rgba(26, 62, 114, 0.2);
 }

 /* Welcome Text */
 #customerSignin__modifier .welcome-text h4 {
     font-size: 22px;
     font-weight: 600;
     color: #1a3e72;
     margin: 0 0 6px 0;
 }

 #customerSignin__modifier .welcome-text p {
     font-size: 15px;
     color: #555;
     margin: 0;
 }

 #customerSignin__modifier .welcome-text span {
     color: #f5a623;
     font-weight: 600;
 }

 /*query*/
 /* Card Container */
 .recent-booking {
     background: linear-gradient(135deg, #f0f7ff, #ffffff);
     border: 1px solid #e3ebf6;
     border-radius: 16px;
     padding: 20px 25px;
     box-shadow: 0 4px 12px rgba(0, 123, 255, 0.08);
     transition: all 0.3s ease-in-out;
     position: relative;
     overflow: hidden;
 }

 /* Subtle hover animation */
 .recent-booking:hover {
     transform: translateY(-4px);
     box-shadow: 0 8px 18px rgba(0, 123, 255, 0.12);
 }

 /* Decorative accent bar */
 .recent-booking::before {
     content: "";
     position: absolute;
     top: 0;
     left: 0;
     width: 6px;
     height: 100%;
     border-radius: 16px 0 0 16px;
     background: linear-gradient(180deg, #007bff, #00c6ff);
 }

 /* Title */
 .recent-cnt h5 {
     font-size: 1.5rem;
     font-weight: 700;
     background: linear-gradient(90deg, #007bff, #00c6ff);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     margin-bottom: 6px;
 }

 /* Subtitle */
 .recent-cnt p {
     font-size: 1rem;
     color: #495057;
     margin: 0;
 }

 /*Filter Form*/
 /* Parent container with background image */
 .custom__search {
     background: linear-gradient(rgba(0, 123, 255, 0.55), rgba(0, 123, 255, 0.55)),
         url('https://images.unsplash.com/photo-1496307042754-b4aa456c4a2d?auto=format&fit=crop&w=1350&q=80') center/cover no-repeat;
     border-radius: 16px;
     padding: 25px;
     box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
     color: #fff;
     position: relative;
     overflow: hidden;
 }

 /* Glass effect */
 .custom__search::before {
     content: "";
     position: absolute;
     inset: 0;
     background: rgba(255, 255, 255, 0.15);
     backdrop-filter: blur(6px);
     border-radius: 16px;
     z-index: 0;
 }

 /* Inner form content layering */
 .custom__search form {
     position: relative;
     z-index: 1;
 }

 /* Labels */
 .custom__search label {
     font-weight: 600;
     font-size: 0.95rem;
     color: #f1f5f9;
     margin-bottom: 6px;
     display: block;
 }

 /* Inputs & selects */
 .custom__search .form-control,
 .custom__search .form-select {
     border-radius: 10px;
     border: none;
     padding: 10px 14px;
     font-size: 0.95rem;
     box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
     transition: all 0.3s ease-in-out;
 }

 .custom__search .form-control:focus,
 .custom__search .form-select:focus {
     outline: none;
     box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.4);
 }

 /* Submit Button */
 .custom__search .btn-primary {
     border-radius: 10px;
     font-weight: 600;
     padding: 12px;
     background: linear-gradient(90deg, #007bff, #00c6ff);
     border: none;
     transition: transform 0.25s ease, box-shadow 0.25s ease;
 }

 .custom__search .btn-primary:hover {
     transform: translateY(-2px);
     box-shadow: 0 6px 12px rgba(0, 123, 255, 0.35);
 }

 /*Custom Model*/
 .custom__modalOne .modal-dialog.modal-lg {
     display: flex;
     justify-content: center;
     align-items: center;
 }

 .custom__modalOne button.btn-close {
     position: absolute;
     right: 10px;
     top: 10px;
 }

 .custom__modalOne .modal-content {
     padding: 0px;
     max-width: 900px;
 }

 .custom__modalOne .modal-title {
     margin-bottom: 0px;
 }

 .custom__modalOne .col {
     flex: 1 0 0%;
     text-align: left;
 }

 /*Itineray sryle*/
 #itinerary__header .card-modern {
     border: none;
     border-radius: 20px;
     box-shadow: 0 12px 25px rgba(0, 0, 0, 0.1);
     transition: transform 0.3s, box-shadow 0.3s;
 }

 #itinerary__header .card-modern:hover {
     transform: translateY(-5px);
     box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
 }

 #itinerary__header .card-header-modern {
     background: linear-gradient(90deg, #ff6b6b, #ff9f43);
     color: white;
     font-weight: 600;
     font-size: 1.2rem;
     border-top-left-radius: 20px;
     border-top-right-radius: 20px;
     cursor: pointer;
 }

 /* Highlight Info */
 #itinerary__header .info-box {
     background: #fff;
     border-radius: 15px;
     padding: 15px;
     text-align: center;
     transition: transform 0.3s, box-shadow 0.3s;
 }

 #itinerary__header .info-box:hover {
     transform: translateY(-5px);
     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
 }

 #itinerary__header .info-box h5 {
     font-weight: 600;
     color: #ff6b6b;
 }

 #itinerary__header .info-box p {
     font-size: 0.9rem;
     color: #555;
 }

 /* Button */
 #itinerary__header .btn-modern {
     border-radius: 30px;
     padding: 12px 30px;
     font-weight: 500;
     transition: all 0.3s;
 }

 #itinerary__header .btn-modern:hover {
     background: #ff6b6b;
     color: #fff;
     transform: translateY(-3px);
     box-shadow: 0 10px 25px rgba(255, 107, 107, 0.3);
 }

 /* Logo Animation */
 #itinerary__header .logo-container img {
     width: 150px;
     transition: transform 0.5s;
 }

 #itinerary__header .logo-container img:hover {
     transform: rotate(-10deg) scale(1.1);
 }

 /* Fade-in animation */
 #itinerary__header .fade-in {
     opacity: 0;
     transform: translateY(20px);
     animation: fadeInUp 1s forwards;
 }

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

 ul#alreadyDrop.active {
     display: block !important;
     opacity: 1;
     height: auto;
     z-index: 999;
     position: absolute;
     right: 0px;
     visibility: visible;
 }

 /*Pagination*/
 #listingGrid .pagination {
     display: flex;
     justify-content: center;
     gap: 6px;
     padding: 0;
     margin: 1.5rem 0;
 }

 #listingGrid .page-item {
     list-style: none;
 }

 #listingGrid .page-link {
     display: flex;
     align-items: center;
     justify-content: center;
     min-width: 36px;
     height: 36px;
     border: none;
     border-radius: 8px;
     background-color: #e3e3e3;
     color: #000;
     font-weight: 500;
     font-size: 0.95rem;
     text-decoration: none;
     transition: all 0.25s ease;
     box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
     padding: 0px;
     margin: 0px;
 }

 .pagination .page-item+.page-item .page-link {
     margin-left: 0;
 }

 #listingGrid .page-link a:hover {
     background-color: #007bff;
     color: #fff;
     transform: translateY(-2px);
     box-shadow: 0 4px 10px rgba(0, 123, 255, 0.3);
 }

 #listingGrid .page-item.active .page-link,
 #listingGrid .page-item.active span.page-link {
     background-color: #007bff;
     color: #fff;
     box-shadow: 0 4px 10px rgba(0, 123, 255, 0.35);
     pointer-events: none;
 }

 #listingGrid .page-link:focus {
     outline: none;
     box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.2);
 }

 /* Optional: smoother edge alignment for first/last buttons */
 #listingGrid .pagination .page-item:first-child .page-link,
 #listingGrid .pagination .page-item:last-child .page-link {
     border-radius: 8px;
 }

 .sepFiled span {
     border: 0px !important;
 }

 div#Dashboard__modifier .table td,
 div#Dashboard__modifier .table th {
     text-align: center !important;
 }

 div#Dashboard__modifier {
     margin-bottom: 2em;
 }

 .packPrice {
     font-size: 26px;
 }

 .InvoceTable table tbody tr td:last-child {
     width: 150px !important;
 }

 /*New Popup Design*/
 .custom__modelFour .modal-header {
     background: linear-gradient(135deg, #007bff, #00b4d8);
     box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
 }

 .custom__modelFour .modal-content {
     background: #f9fbfd;
     transition: all 0.3s ease-in-out;
 }

 .custom__modelFour .modal-content:hover {
     transform: translateY(-3px);
 }

 .custom__modelFour .form-label,
 .custom__modelFive .form-label {
     color: #344767;
     text-align: left;
     width: 100%;
     font-weight: 600 !important;
     font-size: 15px;
 }

 .custom__modelFour .input-group-text {
     background-color: #f0f4f8;
     border-right: 0;
     color: #007bff;
     font-size: 1rem;
 }

 .custom__modelFour .form-control {
     border-left: 0;
     box-shadow: none;
     border-color: #dee2e6;
     transition: all 0.2s ease;
 }

 .custom__modelFour .form-control:focus {
     border-color: #007bff;
     box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.15);
 }

 .custom__modelFour .btn {
     background: linear-gradient(135deg, #007bff, #00b4d8);
     border: none;
     color: #fff;
     border-radius: 10px;
     transition: all 0.3s ease;
 }

 .custom__modelFour .btn:hover {
     background: linear-gradient(135deg, #0056b3, #0096c7);
     transform: translateY(-1px);
 }

 .custom__modelFour .modal-body {
     background: #ffffff;
     border-radius: 0 0 1rem 1rem;
 }

 .custom__modelFour .modal-dialog.modal-lg.modal-dialog-centered,
 .custom__modelFive .modal-dialog.modal-lg.modal-dialog-centered {
     width: 100% !important;
     display: flex;
     justify-content: center;
 }

 .custom__modelFour .modal-content,
 .custom__modelFive .modal-content {
     max-width: 100%;
     padding: 0px;
     margin: 0px;
 }

 .custom__modelFour .modal-title,
 .custom__modelFive .modal-title {
     margin-bottom: 0;
     color: #fff;
 }

 .custom__modelFive .modal-content {
     border-radius: 1rem;
     overflow: hidden;
     max-width: 100%;
 }

 .custom__modelFive i {
     color: var(--primary);
 }

 .custom__modelFive-header {
     background: linear-gradient(135deg, #007bff, #00b4d8);
     border-bottom: none;
 }

 .custom__modelFive .modal-title {
     font-weight: 600;
     letter-spacing: 0.5px;
     justify-content: center;
     margin: 0px auto;
     width: 100%;
     color: #fff;
 }

 .custom__modelFive .modal-title i {
     color: #fff;
 }

 .custom__modelFive-form .form-label {
     color: #333;
 }

 .custom__modelFive .input-group-text {
     background-color: #f1f5f9;
     border: 1px solid #dee2e6;
 }

 .custom__modelFive .form-control {
     border: 1px solid #dee2e6;
     transition: all 0.3s ease;
 }

 .custom__modelFive .form-control:focus {
     border-color: #007bff;
     box-shadow: 0 0 6px rgba(0, 123, 255, 0.3);
 }

 .custom__modelFive-footer {
     border-top: 1px solid #f1f1f1;
 }

 .custom__modelFive-footer .btn {
     border-radius: 8px;
     font-weight: 500;
     transition: 0.3s ease;
 }

 .custom__modelFive-footer .btn-primary {
     background: linear-gradient(135deg, #007bff, #00b4d8) !important;
     border: none;
 }

 .custom__modelFive-footer .btn-primary i,
 .custom__modelFive-footer i {
     color: #fff;
 }

 .custom__modelFive-footer .btn-primary:hover {
     background: linear-gradient(135deg, #0062cc, #0096c7);
 }

 .custom__modelFive-footer .btn-outline-secondary:hover {
     background-color: #f8f9fa;
 }

 .modelSix .btn-primary {
     background: var(--primary) !important;
 }

 .modelSix .btn-close {
     color: #fff !important;
 }

 #invoiceBody td i {
     color: #fff;
 }

 /*Travel Diry Popup*/
 .TravelDiryPop .custom-file-input {
     position: relative;
     display: inline-block;
     width: 100%;
 }

 .TravelDiryPop .custom-file-input input[type="file"] {
     position: absolute;
     left: 0;
     top: 0;
     opacity: 0;
     width: 100%;
     height: 100%;
     cursor: pointer;
 }

 .TravelDiryPop .custom-file-label {
     display: inline-block;
     background-color: #007bff;
     color: white;
     padding: 10px 16px;
     border-radius: 8px;
     font-weight: 500;
     text-align: center;
     width: 100%;
     transition: background-color 0.3s ease, transform 0.2s ease;
 }

 .TravelDiryPop .custom-file-label:hover {
     background-color: #0056b3;
     transform: scale(1.02);
 }

 .TravelDiryPop .custom-file-label i {
     margin-right: 8px;
 }

 .TravelDiryPop #imagePreview {
     margin-top: 10px;
     display: flex;
     flex-wrap: wrap;
     gap: 10px;
 }

 .TravelDiryPop #imagePreview img {
     width: 80px;
     height: 80px;
     object-fit: cover;
     border-radius: 8px;
     border: 1px solid #ddd;
 }

 /*table Filters*/
 .tableFilters .table thead th {
     position: relative;
     cursor: pointer;
     user-select: none;
     vertical-align: middle;
     background-color: #f8f9fa;
 }

 /* Arrow container */
 .tableFilters .table thead th::after {
     /* content: "\25B4";  */
     content: "↑";
     /* Up arrow ▲ */
     position: absolute;
     right: 12px;
     top: 3px;
     font-size: 20px;
     opacity: 0.4;
     transition: transform 0.2s, opacity 0.2s;
 }

 .tableFilters .table thead th::before {
     /* content: "\25BE";  */
     content: "↓";
     position: absolute;
     right: 4px;
     top: 3px;
     font-size: 20px;
     opacity: 0.4;
     transition: transform 0.2s, opacity 0.2s;
 }

 /* Hover effect */
 .tableFilters .table thead th:hover::after,
 .tableFilters .table thead th:hover::before {
     opacity: 0.8;
 }

 /* Optional: Active sorting state (for future JS sorting use) */
 .tableFilters .table thead th.sorted-asc::after {
     color: #007bff;
     opacity: 1;
 }

 .tableFilters .table thead th.sorted-desc::before {
     color: #007bff;
     opacity: 1;
 }

 /*End table Filters*/
 /*Enabler Appointment*/
 .appointment__2nd .page-title {
     font-weight: 700;
     margin-bottom: 30px;
 }

 .appointment__2nd .appointment-card {
     background: #fff;
     border-radius: 12px;
     box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.05);
     padding: 20px;
     transition: all 0.3s ease;
 }

 .appointment__2nd .appointment-card:hover {
     transform: translateY(-4px);
 }

 .appointment__2nd .appointment-card h5 {
     text-transform: capitalize;
     font-weight: 600;
 }

 .appointment__2nd .reschedule-btn {
     background-color: #ff9800;
     color: #fff;
     border: none;
     font-weight: 600;
 }

 .appointment__2nd .reschedule-btn:hover {
     background-color: #e68900;
 }

 .appointment__2nd .new-appointment-btn {
     background-color: #28a745;
     color: #fff;
     font-weight: 600;
 }

 .appointment__2nd .modal-content {
     border-radius: 12px;
     box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.1);
     padding: 0px;
 }

 .appointment__2nd .modal-content .form-label {
     text-align: left;
     width: 100%;
 }

 .appointment__2nd .modal-header {
     border-bottom: none;
 }

 .appointment__2nd .modal-title {
     font-weight: 600;
 }

 .appointment__2nd .time-slot-btn {
     border: 1px solid #ccc;
     border-radius: 6px;
     padding: 8px 14px;
     cursor: pointer;
     margin-right: 10px;
     margin-bottom: 8px;
 }

 .appointment__2nd .time-slot-btn.active {
     background-color: #28a745;
     color: #fff;
     border-color: #28a745;
 }

 .appointment__2nd .confirm-btn {
     background-color: #007bff;
     color: white;
     font-weight: 600;
 }

 .appointment__2nd .confirm-btn:hover {
     background-color: #0069d9;
 }

 .appointment__2nd .modal-content {
     max-width: 100%;
 }

 .appointment__2nd .form-group textarea {
     width: 100%;
     padding: 10px 12px;
     border-radius: 8px;
     border: 1px solid #ccc;
     transition: 0.3s;
 }

 .appointment__2nd .btn-submit {
     background: #2196F3;
     color: #fff;
     border: none;
     padding: 12px 20px;
     border-radius: 50px;
     cursor: pointer;
     width: 100%;
     font-size: 1em;
     transition: 0.3s;
 }

 /*View Query*/
 .c__viewQuery .modal-header {
     background-color: #007bff;
     color: #fff;
     border-bottom: none;
 }

 .c__viewQuery .modal-title i {
     margin-right: 8px;
 }

 .c__viewQuery .modal-body {
     font-size: 15px;
     color: #333;
 }

 .c__viewQuery .info-row {
     display: flex;
     justify-content: space-between;
     margin-bottom: 6px;
 }

 .c__viewQuery .highlight-row {
     background-color: #00bfff;
     color: #fff;
     font-weight: 600;
     padding: 6px 10px;
     border-radius: 4px;
 }

 .c__viewQuery .no-itinerary {
     color: red;
     font-weight: 500;
 }

 /*Travel Dairy*/
 #travel_dairy--enabler {
     padding: 40px 20px;
     background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
     min-height: 100vh;
 }

 #travel_dairy--enabler .page-title {
     text-align: center;
     margin-bottom: 30px;
 }

 #travel_dairy--enabler .cards-grid {
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
     gap: 1.25rem;
 }

 #travel_dairy--enabler .travel-card {
     background: white;
     border-radius: 14px;
     box-shadow: 0 6px 22px rgba(20, 30, 60, 0.06);
     overflow: hidden;
     transform-origin: center;
     transition: transform 250ms ease, box-shadow 250ms ease;
     animation: floatIn 600ms ease both;
 }

 #travel_dairy--enabler .travel-card:hover {
     transform: translateY(-8px) scale(1.01);
     box-shadow: 0 18px 40px rgba(20, 30, 60, 0.12);
 }

 #travel_dairy--enabler .travel-card .thumb {
     height: 170px;
     object-fit: cover;
     width: 100%;
     display: block;
     transition: transform 350ms ease;
 }

 #travel_dairy--enabler .travel-card:hover .thumb {
     transform: scale(1.06);
 }

 #travel_dairy--enabler .card-body {
     padding: 16px;
 }

 #travel_dairy--enabler .meta {
     font-size: 13px;
     color: #6b7280;
     margin-bottom: 8px;
 }

 #travel_dairy--enabler .title {
     font-weight: 600;
     font-size: 18px;
     margin-bottom: 8px;
 }

 #travel_dairy--enabler .excerpt {
     color: #374151;
     font-size: 14px;
     height: 44px;
     overflow: hidden;
     text-overflow: ellipsis;
 }

 #travel_dairy--enabler .btn-row {
     display: flex;
     gap: 8px;
     margin-top: 12px;
 }

 #travel_dairy--enabler .modal-content {
     border-radius: 12px;
     overflow: hidden;
     padding: 0px;
 }

 #travel_dairy--enabler .gallery img {
     width: 100%;
     border-radius: 8px;
     margin-bottom: 10px;
 }

 #travel_dairy--enabler .main-image-wrapper {
     position: relative;
     overflow: hidden;
     border-radius: 10px;
     max-height: 250px;
 }

 #travel_dairy--enabler #mainGalleryImage {
     transition: transform 0.4s ease;
     cursor: zoom-in;
     object-fit: cover;
     width: 100%;
     height: 100%;
 }

 #travel_dairy--enabler #mainGalleryImage:hover {
     transform: scale(1.05);
 }

 /* Thumbnail row styling */
 #travel_dairy--enabler .thumbnail-scroller {
     position: relative;
     overflow: hidden;
 }

 #travel_dairy--enabler .thumbnail-row {
     overflow-x: auto;
     scrollbar-width: none;
     -ms-overflow-style: none;
 }

 #travel_dairy--enabler .thumbnail-row::-webkit-scrollbar {
     display: none;
 }

 #travel_dairy--enabler .thumbnail-row img {
     width: 80px;
     height: 60px;
     object-fit: cover;
     border-radius: 6px;
     cursor: pointer;
     opacity: 0.8;
     transition: transform 0.3s ease, opacity 0.3s ease, border 0.2s;
     flex-shrink: 0;
 }

 #travel_dairy--enabler .thumbnail-row img:hover,
 #travel_dairy--enabler .thumbnail-row img.active-thumb {
     transform: scale(1.05);
     opacity: 1;
     border: 2px solid #0d6efd;
 }

 #travel_dairy--enabler .scroll-btn {
     position: absolute;
     top: 50%;
     transform: translateY(-50%);
     z-index: 2;
     width: 30px;
     height: 30px;
     padding: 0;
     font-weight: bold;
     line-height: 0;
 }

 #travel_dairy--enabler .scroll-btn.left {
     left: -10px;
 }

 #travel_dairy--enabler .scroll-btn.right {
     right: -10px;
 }

 #travel_dairy--enabler .thumbnail-row img {
     transition: transform 0.2s ease, border-color 0.2s ease;
 }

 #travel_dairy--enabler .thumbnail-row img:hover {
     transform: scale(1.1);
     border-color: #0d6efd;
 }

 #travel_dairy--enabler .scroll-btn {
     position: absolute;
     top: 50%;
     transform: translateY(-50%);
     z-index: 2;
 }

 #travel_dairy--enabler .scroll-btn.left {
     left: -10px;
 }

 #travel_dairy--enabler .scroll-btn.right {
     right: -10px;
 }

 #travel_dairy--enabler .modal-dialog {
     max-width: 80% !important;
 }

 #travel_dairy--enabler .modal-header {
     background: none !important;
     border-bottom: 1px solid #ccc;
 }

 /*Travel Dairy*/
 #travel_dairy {
     padding: 40px 20px;
     font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
     background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
     min-height: 100vh;
 }

 #travel_dairy .page-title {
     text-align: center;
     margin-bottom: 30px;
 }

 #travel_dairy .cards-grid {
     /* display: grid;
     grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); */
     display: flex;
     gap: 1.25rem;
     flex-wrap: wrap;
 }

 #travel_dairy .travel-card {
     background: white;
     border-radius: 14px;
     box-shadow: 0 6px 22px rgba(20, 30, 60, 0.06);
     overflow: hidden;
     transform-origin: center;
     transition: transform 250ms ease, box-shadow 250ms ease;
     animation: floatIn 600ms ease both;
     flex: 1;
 }

 #travel_dairy .travel-card:hover {
     transform: translateY(-8px) scale(1.01);
     box-shadow: 0 18px 40px rgba(20, 30, 60, 0.12);
 }

 #travel_dairy .travel-card .thumb {
     height: 170px;
     object-fit: cover;
     width: 100%;
     display: block;
     transition: transform 350ms ease;
 }

 #travel_dairy .travel-card:hover .thumb {
     transform: scale(1.06);
 }

 #travel_dairy .card-body {
     padding: 16px;
 }

 #travel_dairy .meta {
     font-size: 13px;
     color: #6b7280;
     margin-bottom: 8px;
 }

 #travel_dairy .title {
     font-weight: 600;
     font-size: 18px;
     margin-bottom: 8px;
 }

 #travel_dairy .excerpt {
     color: #374151;
     font-size: 14px;
     height: 44px;
     overflow: hidden;
     text-overflow: ellipsis;
 }

 #travel_dairy .btn-row {
     display: flex;
     gap: 8px;
     margin-top: 12px;
 }

 #travel_dairy .modal-content {
     border-radius: 12px;
     overflow: hidden;
     padding: 0px;
 }

 #travel_dairy .gallery img {
     width: 100%;
     border-radius: 8px;
     margin-bottom: 10px;
 }

 #travel_dairy .main-image-wrapper {
     position: relative;
     overflow: hidden;
     border-radius: 10px;
     max-height: auto;
 }

 #travel_dairy #mainGalleryImage {
     transition: transform 0.4s ease;
     cursor: zoom-in;
     object-fit: cover;
     width: 100%;
     height: 100%;
 }

 #travel_dairy #mainGalleryImage:hover {
     transform: scale(1.05);
 }

 /* Thumbnail row styling */
 #travel_dairy .thumbnail-scroller {
     position: relative;
     overflow: hidden;
 }

 #travel_dairy .thumbnail-row {
     overflow-x: auto;
     scrollbar-width: none;
     -ms-overflow-style: none;
 }

 #travel_dairy .thumbnail-row::-webkit-scrollbar {
     display: none;
 }

 #travel_dairy .thumbnail-row img {
     width: 80px;
     height: 60px;
     object-fit: cover;
     border-radius: 6px;
     cursor: pointer;
     opacity: 0.8;
     transition: transform 0.3s ease, opacity 0.3s ease, border 0.2s;
     flex-shrink: 0;
 }

 #travel_dairy .thumbnail-row img:hover,
 #travel_dairy .thumbnail-row img.active-thumb {
     transform: scale(1.05);
     opacity: 1;
     border: 2px solid #0d6efd;
 }

 #travel_dairy .scroll-btn {
     position: absolute;
     top: 50%;
     transform: translateY(-50%);
     z-index: 2;
     width: 30px;
     height: 30px;
     padding: 0;
     font-weight: bold;
     line-height: 0;
 }

 #travel_dairy .scroll-btn.left {
     left: -10px;
 }

 #travel_dairy .scroll-btn.right {
     right: -10px;
 }

 #travel_dairy .thumbnail-row img {
     transition: transform 0.2s ease, border-color 0.2s ease;
 }

 #travel_dairy .thumbnail-row img:hover {
     transform: scale(1.1);
     border-color: #0d6efd;
 }

 #travel_dairy .scroll-btn {
     position: absolute;
     top: 50%;
     transform: translateY(-50%);
     z-index: 2;
 }

 #travel_dairy .scroll-btn.left {
     left: -10px;
 }

 #travel_dairy .scroll-btn.right {
     right: -10px;
 }

 #travel_dairy .gallery {
     max-width: 100%;
     margin: 0px auto;
 }

 #travel_dairy .main-img {
     width: 100%;
     height: 350px;
     object-fit: cover;
     border-radius: 10px;
 }

 #travel_dairy .thumb {
     width: 100%;
     height: 80px;
     object-fit: cover;
     border-radius: 8px;
     cursor: pointer;
     transition: transform 0.3s ease;
 }

 #travel_dairy .thumb:hover {
     transform: scale(1.05);
 }

 #travel_dairy .thumb.active {
     border: 2px solid #007bff;
 }

 .AppoPlan__Scheduled .table th,
 .AppoPlan__Scheduled .table td {
     vertical-align: middle;
     font-size: 14px;
 }

 .AppoPlan__Scheduled .table th {
     background-color: #f8f9fa;
     font-weight: 600;
     text-transform: uppercase;
 }

 .AppoPlan__Scheduled .form-check-input {
     width: 16px;
     height: 16px;
     cursor: pointer;
     border: 2px solid #0d6efd;
     transition: all 0.2s ease;
 }

 .AppoPlan__Scheduled .form-check-input:checked {
     background-color: #0d6efd;
     border-color: #0d6efd;
 }

 .right__modifierOne .col-3 {
     width: 100%;
 }

 .enabler__dairy {}

    .desktopOnly{
    display:block!important;
  }
    .mobileOnly{
    display:none!important;
  }