.form-control {
     background-color: transparent !important;
     padding: 7px;
     border: 1px solid grey;
 }

 .seperation-container {
     border: 1px dashed white;
     padding: 25px;
 }

 .transparent-div,
 .dropzones {

     background: rgba(255, 255, 255, 0.05) !important;
     border: 1px solid rgba(255, 255, 255, 0.1) !important;
     border-radius: 8px !important;
     padding: 0.5rem 1rem !important;
     backdrop-filter: blur(4px) !important;
     text-align: center;
     color: #fff;
 }


 .dropzones {
     text-align: center;
 }

 .dz-message h4 {
     color: #fff !important
 }

 .auth-button {
     background-color: var(--primary) !important;
     border: none;
     color: black;
     padding: 5px 15px;
     text-align: center;
     text-decoration: none;
     display: inline-block;
     margin: 4px 2px;
     cursor: pointer;
     border-radius: 16px;
 }

 .store-badge {
     max-width: 160px;
     height: auto;
     display: inline-block;
     background-color: #000;
     /* Solid black background */
     border-radius: 12px;
     padding: 6px 10px;
     box-shadow: 0 2px 10px rgba(255, 255, 255, 0.1);
     filter: none;
     mix-blend-mode: normal;
     opacity: 1;
     transition: transform 0.3s ease, box-shadow 0.3s ease;
 }

 .store-badge img {
     width: 100%;
     height: auto;
     display: block;
     border-radius: 8px;
 }

 .store-badge:hover {
     transform: scale(1.05);
     box-shadow: 0 0 16px rgba(255, 255, 255, 0.2);
 }


 .review-card {
     background-color: #1f1f1f;
     color: #ffffff;
     border-radius: 0.75rem;
     transition: transform 0.3s ease, box-shadow 0.3s ease;
     box-shadow: 0 10px 20px rgba(0, 0, 0, 0.35);
     border: 1px solid rgba(255, 255, 255, 0.05);
 }

 .review-card:hover {
     transform: translateY(-6px);
 }

 .review-avatar {
     height: 50px;
     width: 50px;
     object-fit: cover;
     border-radius: 50%;
     border: 2px solid rgba(255, 255, 255, 0.08);
     box-shadow: 0 0 6px rgba(255, 255, 255, 0.05);
 }

 .review-divider {
     border: 0;
     border-top: 1px solid rgba(255, 255, 255, 0.15);
     width: 100%;
     margin-top: 30px;
 }

 .review-quote {
     font-style: italic;
     color: #fff;
     margin-bottom: 0;
 }



 /* Reusable for icon + text row */
 .responsive-icon-text {
     display: flex;
     align-items: center;
     gap: 12px;
     /* Standard spacing */
 }

 .responsive-icon-text img {
     max-width: 80px;
     height: auto;
 }

 /* Responsive behavior for mobile */
 @media (max-width: 576px) {
     .responsive-icon-text {
         flex-direction: column;
         align-items: flex-start;
         gap: 8px;
     }

     .responsive-icon-text img {
         max-width: 60px;
     }

     .responsive-icon-text h6 {
         font-size: 14px;
     }
 }

 /* Override Bootstrap Primary Button Colors */
 .btn-primary {
     background-color: var(--primary) !important;
     border-color: var(--primary) !important;
     color: #fff !important;
 }

 .btn-primary:hover,
 .btn-primary:focus,
 .btn-primary:active {
     background-color: var(--primary) !important;
     border-color: var(--primary) !important;
     filter: brightness(90%);
     color: #fff;
 }

 /* Outline Buttons */
 .btn-outline-primary {
     color: var(--primary) !important;
     border-color: var(--primary) !important;
 }

 .btn-outline-primary:hover,
 .btn-outline-primary:focus {
     background-color: var(--primary) !important;
     color: #fff !important;
 }

 /* Links */
 a {
     color: var(--primary);
 }

 a:hover {
     color: var(--primary);
     opacity: 0.8;
 }

 /* Inputs Focus Border */
 input:focus,
 textarea:focus,
 select:focus {
     border-color: var(--primary);
     box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25);
 }

 .language-card:hover,
 .language-card:focus,
 .language-card:active {
     border-color: var(--primary) !important;
     box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25);
     outline: none;
     transition: all 0.2s ease;
 }


 /* Customize the switch toggle using --primary */
 .form-check-input:checked {
     background-color: var(--primary) !important;
     border-color: var(--primary) !important;
 }

 .separation-modern-form {
     background: rgba(60, 60, 60, 0.4);
     /* gray glass-like background */
     backdrop-filter: blur(8px);
     border: 1px solid rgba(255, 255, 255, 0.05);
     box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
     border-radius: 16px;
 }

 .form-modern {
     background: rgba(255, 255, 255, 0.05);
     color: #fff;
     border: 1px solid rgba(255, 255, 255, 0.1);
     border-radius: 8px;
     padding: 0.5rem 1rem;
     backdrop-filter: blur(4px);
 }

 /* Dropzone style enhancement */
 .bg-dark-blur {
     background: rgba(50, 50, 50, 0.3);
     backdrop-filter: blur(6px);
     border-radius: 12px;
     border: 1px dashed rgba(255, 255, 255, 0.2);
 }

 header nav.navbar {
     position: fixed;
     top: 0;
     width: 100%;
     z-index: 1030;
     /* Make sure it stays on top */
     /* optional: subtle shadow for clarity */
 }

 body {
     padding-top: 70px;
     /* adjust 70px to your navbar's height */
 }

 .login-container {
     background-color: #1a1a1a;
     /* or exact contact form color */
     border: 1px solid #2a2a2a;
     /* optional: contact form border tone */
     border-radius: 16px;
     padding: 60px 40px;
     box-shadow: none !important;
     backdrop-filter: none !important;
 }


 .blog .card {
     background-color: var(--secondary);
     color: #fff;
     border-radius: 1rem;
     box-shadow: 0 4px 12px var(--primary-shadow)33;
     /* 20% opacity */
     transition: transform 0.3s ease;
     min-height: 100%;
 }

 .blog .card:hover {
     transform: translateY(-5px);
     box-shadow: 0 6px 20px var(--primary-shadow)55;
     /* 33% opacity on hover */
 }

 .blog .card-title {
     font-size: 1.25rem;
     color: var(--primary);
 }

 .blog .card-text {
     color: #ccc;
 }

 .blog .btn-outline-light {
     color: var(--primary);
     border-color: var(--primary);
 }

 .blog .btn-outline-light:hover {
     background-color: var(--primary);
     color: #fff;
     border-color: var(--primary);
 }

 .blog-image {
     height: 200px;
     background-size: cover;
     background-position: center;
     border-radius: 1rem 1rem 0 0;
 }

 .blog-description-wrapper * {
     color: #fff !important;
 }

 .blog-images {
     width: 55%;
     max-height: 400px;
     height: 312px;
     /* You can adjust this */
     object-fit: cover;
     object-position: center;
     /*single blog page*/
 }

 /* Responsive fix for smaller screens */
 @media (max-width: 768px) {
     .blog-images {
         width: 100%;
         max-height: none;
         height: auto;
     }
 }


 /* Ensure pricing cards stay in one row on large screens */
 .pricing-row {
     overflow-x: auto;
     flex-wrap: nowrap !important;
     padding-bottom: 1rem;
 }

 /* Allow all four cards in one line by preventing max-width limits */
 @media (min-width: 1200px) {
     .container {
         /* max-width: 100%; */
         padding-left: 2rem;
         padding-right: 2rem;
     }
 }

 /* Adjust each column minimum width for consistent spacing */
 .pricing-row .col-lg-3 {
     min-width: 300px;
 }

 .registration-container {
     background-color: #1b1b1b;
     /* Same as contact form */
     border: 1px solid #2a2a2a;
     border-radius: 16px;
     padding: 60px 40px;
     box-shadow: 0 0 20px rgba(0, 0, 0, 0.6);
 }

 .scale-up {
     transform: scale(1.05);
     z-index: 2;
     box-shadow: 0 0 20px rgba(0, 123, 255, 0.3);
     border: 2px solid #0d6efd;
 }

 .dim-card {
     opacity: 0.9;
     transform: scale(0.97);
 }

 @media (max-width: 768px) {
     .scale-up {
         transform: none;
         box-shadow: none;
         border: none;
     }

     .dim-card {
         transform: none;
     }
 }

 /* Enhanced Pricing Section Styles */

 #pricing {
     padding: 4rem 1rem;
     background-color: #0f172a;
     /* dark slate */
     color: #fff;
     font-family: 'Inter', sans-serif;
 }

 #pricing .pricing-title {
     text-align: center;
     font-size: 2rem;
     font-weight: 700;
     margin-bottom: 1rem;
 }

 #pricing .pricing-subtitle {
     text-align: center;
     font-size: 1.125rem;
     color: #cbd5e1;
     margin-bottom: 2.5rem;
 }

 #pricing .pricing-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
     gap: 1.5rem;
     justify-content: center;
     align-items: stretch;
 }

 #pricing .plan-card {
     background-color: #1e293b;
     border: 2px solid #334155;
     border-radius: 1rem;
     padding: 2rem 1.5rem;
     transition: transform 0.3s ease, box-shadow 0.3s ease;
     text-align: center;
     display: flex;
     flex-direction: column;
     justify-content: space-between;
     position: relative;
     height: 100%;
     min-height: 540px;
 }

 #pricing .plan-card select {
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
 }


 #pricing .plan-card:hover {
     transform: translateY(-5px);
     box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
 }

 /*  Featured Plan */
 #pricing .plan-card.featured {
     transform: scale(1.1);
     z-index: 10;
     border: 3px solid #6366f1;
     box-shadow: 0 15px 40px rgba(99, 102, 241, 0.5);
 }

 #pricing .plan-card.featured:hover {
     transform: scale(1.12);
 }

 /*  BEST BADGE */
 #pricing .best-badge {
     position: absolute;
     top: -0.75rem;
     left: 50%;
     transform: translateX(-50%);
     background-color: #facc15;
     color: #1e293b;
     font-size: 0.75rem;
     font-weight: 600;
     padding: 0.3rem 0.75rem;
     border-radius: 9999px;
     text-transform: uppercase;
     box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
 }

 /* Pricing Info */
 #pricing .plan-title {
     font-size: 1.25rem;
     font-weight: 700;
     margin-bottom: 0.5rem;
 }

 #pricing .plan-price {
     font-size: 2rem;
     font-weight: 800;
     color: #fff;
     margin-bottom: 1rem;
 }

 #pricing .plan-features {
     margin: 1rem 0;
     color: #cbd5e1;
     font-size: 0.95rem;
 }

 #pricing .plan-button {
     margin-top: 1.5rem;
     padding: 0.75rem 1.25rem;
     background-color: #6366f1;
     border: none;
     color: #fff;
     font-weight: 600;
     border-radius: 0.5rem;
     cursor: pointer;
     transition: background-color 0.2s ease;
 }

 #pricing .plan-button:hover {
     background-color: #4f46e5;
 }

 /* 📅 Dropdown Fix */
 #pricing .pricing-toggle {
     display: flex;
     justify-content: center;
     margin-bottom: 2rem;
 }

 #pricing .pricing-toggle select {
     padding: 0.5rem 1rem;
     font-size: 1rem;
     border-radius: 0.5rem;
     background-color: #1e293b;
     color: #fff;
     border: 1px solid #334155;
     appearance: auto;
     /* Fix invisible options */
     z-index: 1000;
     position: relative;
 }

 /* Keep existing #pricing styles you already have */

 /* Dropdown fix */
 #pricing .form-control {
     background-color: #1e293b;
     color: #fff;
     border: 1px solid #334155;
     appearance: auto;
     z-index: 1000;
     position: relative;
 }

 /* Remove any "scale-up" or pop styles from cards */
 .scale-up,
 .dim-card {
     transform: none !important;
     box-shadow: none !important;
     border: none !important;
     opacity: 1 !important;
 }

 /* Fully custom styled select */
 #pricing .custom-select-dropdown {
     background-color: #1e293b;
     color: #ffffff;
     border: 1px solid #334155;
     border-radius: 0.5rem;
     padding: 0.5rem 1rem;
     width: 100%;
     font-size: 1rem;
     appearance: none;
     -webkit-appearance: none;
     -moz-appearance: none;
     cursor: pointer;
     transition: border-color 0.2s ease;
     background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 140 140' width='20' height='20' fill='white' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M70 95L25 50h90L70 95z'/%3E%3C/svg%3E");
     background-repeat: no-repeat;
     background-position: right 1rem center;
     background-size: 1rem;
     padding-right: 2rem;
     /* add space for arrow */
 }

 #pricing .custom-select-dropdown:focus {
     border-color: #6366f1;
     outline: none;
     box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.4);
 }

 #pricing .custom-select-dropdown option {
     background-color: #1e293b;
     color: #ffffff;
 }

 .blog-img {
     height: 200px;
     background-size: cover;
     background-position: center;
     display: block;
     transition: transform 0.4s ease;
     border-radius: 1rem 1rem 0 0;
 }

 .blog-card:hover .blog-img {
     transform: scale(1.05);
 }

 .blog-card {
     background: rgba(25, 25, 25, 0.8);
     backdrop-filter: blur(10px);
     border: 1px solid rgba(255, 255, 255, 0.05);
     transition: all 0.3s ease;
 }

 .blog-card:hover {
     box-shadow: 0 0 20px rgba(13, 110, 253, 0.2);
     transform: translateY(-4px);
 }

 .featured-badge {
     position: absolute;
     top: 12px;
     right: 12px;
     z-index: 10;
     background-color: #0d6efd;
     color: white;
     padding: 4px 10px;
     font-size: 0.75rem;
     font-weight: 600;
     border-bottom-left-radius: 6px;
 }

 .bg-nero-grey {
     border-radius: 0 !important;
 }

 .select2-container--default .select2-selection--single {
     border: 1px solid #444;
     /* default border */
     border-radius: 10px;
     background-color: #111;
     color: #fff;
     padding: 8px 12px;
     height: 42px;
 }

 .select2-container--default .select2-selection--single:focus,
 .select2-container--default .select2-selection--single.select2-selection--focus,
 .select2-container--default.select2-container--focus .select2-selection--single {
     border-color: #0d6efd !important;
     /* Bootstrap primary color */
     box-shadow: 0 0 0 0.15rem rgba(13, 110, 253, 0.25);
     /* subtle focus ring */
 }

 .select2-container--default .select2-selection--single .select2-selection__rendered {
     color: #fff;
     line-height: 24px;
 }

 .select2-container--default .select2-selection--single .select2-selection__arrow {
     height: 100%;
     top: 0;
     right: 10px;
 }

 /* Apply focus styles to all relevant input fields */
 input[type="text"]:focus,
 input[type="email"]:focus,
 input[type="password"]:focus,
 input[type="file"]:focus,
 textarea:focus,
 select:focus {
     border-color: #0d6efd !important;
     /* Bootstrap primary */
     box-shadow: 0 0 0 0.15rem rgba(13, 110, 253, 0.25);
     outline: none;
 }

 footer a:focus,
 footer a:hover {
     color: #0d6efd !important;
     /* Bootstrap primary color */
     text-decoration: underline;
     outline: none;
 }

 /* For textarea wrapper */
 .bg-dark-blur:focus-within {
     border-color: #0d6efd !important;
     /* Bootstrap primary */
     box-shadow: 0 0 0 0.15rem rgba(13, 110, 253, 0.25);
     outline: none;
 }

 .dropzone:focus,
 .dropzone:focus-within {
     border-color: #0d6efd !important;
     box-shadow: 0 0 0 0.15rem rgba(13, 110, 253, 0.25);
     outline: none;
 }

 .language-card {
     width: 220px;
     /* Fixed width for consistency */
     height: 60px;
     /* Fixed height */
     border-radius: 100px !important;
     /* Capsule shape */
     background-color: #1f1f1f;
     transition: all 0.3s ease;
     display: flex;
     align-items: center;
     justify-content: start;
     padding: 0 1rem;
     gap: 1rem;
     overflow: hidden;
     white-space: nowrap;

 }

 .language-card:hover {
     background-color: #292929;
     box-shadow: 0 0 12px rgba(255, 255, 255, 0.08);
 }

 .language-card img {
     height: 40px;
     width: 40px;
     border-radius: 50%;
     object-fit: cover;
     border: 2px solid #444;
 }

 .language-card span {
     color: #fff;
     font-weight: 600;
     font-size: 15px;
     overflow: hidden;
     text-overflow: ellipsis;
 }

 .text-gradient-blue-snow {
     background: linear-gradient(90deg, #0a58ca, #e6f0ff);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     display: inline-block;
 }

 .dotted-border {
     border: 2px dotted rgba(255, 255, 255, 0.2);
     /* white dotted with slight transparency */
     border-radius: 0.5rem;
     /* keeps the rounded corners */
 }

 .logo-img {
     height: 40px;
     /* Or whatever height looks best */
     max-height: 100%;
     width: auto;
     object-fit: contain;
 }


 #model_type:disabled {
     background-color: #2a2a2a;
     color: #6c757d;
     cursor: not-allowed;
     opacity: 0.5;
 }

 .audio-results {
     background-color: #1a1a1a;
     padding: 20px;
     border-radius: 8px;
     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
 }

 .audio-item {
     text-align: center;
 }

 .audio-item p {
     color: #ffffff;
     font-size: 1rem;
     font-weight: 500;
     margin-bottom: 8px;
 }

 .audio-item audio {
     max-width: 100%;
     outline: none;
 }

 @media (max-width: 768px) {
     .audio-results {
         padding: 15px;
     }

     .col-md-6 {
         width: 100%;
         margin-left: 0;
     }
 }

 @media (max-width: 767.98px) {

     /* Adjust this selector to your section or container that wraps this text */
     .move-section-up .container {
         padding-top: 80px;
         /* or margin-top */
     }
 }

 @media (max-width: 991.98px) {
     .navbar-collapse {
         background-color: #000 !important;
     }

     .navbar-collapse .navbar-nav {
         padding: 1rem;
     }

     .navbar-collapse .nav-link,
     .navbar-collapse .btn {
         color: #fff !important;
     }
 }

 .d-flex.overflow-auto::-webkit-scrollbar {
     display: none;
 }

 /* Responsive font sizes */
 @media (max-width: 768px) {
     .fs-80 {
         font-size: 2.5rem !important;
     }

     .lg-fs-60 {
         font-size: 2rem !important;
     }

     .md-fs-40 {
         font-size: 1.8rem !important;
     }

     .sm-fs-32 {
         font-size: 1.5rem !important;
     }
 }

 @media (max-width: 576px) {
     .fs-80 {
         font-size: 2rem !important;
     }

     .lg-fs-60 {
         font-size: 1.8rem !important;
     }

     .md-fs-40 {
         font-size: 1.5rem !important;
     }

     .sm-fs-32 {
         font-size: 1.3rem !important;
     }
 }


 /* Fixed Navbar with consistent styling */
 .navbar {
     min-height: 66px;
     height: auto;
     position: fixed;
     top: 0;
     width: 100%;
     z-index: 1040;
     backdrop-filter: blur(6px);

     box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
     transition: all 0.3s ease;
 }

 /* Ensure body has top space for navbar */
 body {
     padding-top: 66px !important;
     /* Prevents content from being hidden behind navbar */
 }



 /* Logo image fix */
 .logo-img {
     max-height: 42px;
     height: auto;
     width: auto;
 }

 /* Toggler button positioning */
 .navbar-toggler {
     position: absolute;
     top: 50%;
     right: 15px;
     transform: translateY(-50%);
     padding: 10px 14px;
     min-width: 48px;
     min-height: 48px;
     background: transparent;
     border: none;
     display: flex;
     align-items: center;
     justify-content: center;
     z-index: 1051;
 }

 /* Optional z-index for collapse */
 .navbar-collapse {
     z-index: 1045;
 }

 /* Toggler icon visibility */
 .navbar-toggler-icon {
     width: 2rem;
     height: 2rem;
     filter: brightness(100);
     /* ensures visibility on dark background */
 }

 /* Responsive Fixes */
 @media (max-width: 991.98px) {
     .navbar .logo-img {
         max-height: 38px;
     }

     .navbar-nav {
         margin-top: 0.5rem;
         gap: 0.5rem;
         justify-content: center;
         text-align: center;
         width: 100%;
     }

     .navbar-nav .nav-link,
     .navbar-nav .btn {
         font-size: 1rem;
         padding: 0.6rem 1rem;
         justify-content: center;
         width: 100%;
         max-width: 250px;
         margin: 0 auto;
     }

     .navbar-nav .nav-link span {
         display: inline !important;
     }
 }

 @media (max-width: 576px) {
     .navbar .logo-img {
         max-height: 32px;
         margin: 4px 8px;
     }

     .navbar-toggler {
         right: 8px;
         top: 50%;
         transform: translateY(-50%);
     }

     .navbar-nav .nav-link,
     .navbar-nav .btn {
         font-size: 0.95rem;
         padding: 0.5rem 0.7rem;
         width: 100%;
         max-width: 220px;
         margin: 0 auto;
     }
 }

 .swiper {
     padding-bottom: 30px;
 }

 .swiper-slide {
     width: 90%;
 }

 /* ─────────────────────────────────────────────
   Responsive Review Section — Horizontal Scroll
   ───────────────────────────────────────────── */

 @media (max-width: 767.98px) {
     #reviews .row.gy-4 {
         display: flex !important;
         flex-wrap: nowrap !important;
         overflow-x: auto !important;
         -webkit-overflow-scrolling: touch;
         scrollbar-width: thin;
         scroll-snap-type: x mandatory;
         gap: 1rem;
         padding-bottom: 1rem;
     }

     #reviews .row.gy-4::-webkit-scrollbar {
         height: 6px;
     }

     #reviews .row.gy-4::-webkit-scrollbar-thumb {
         background-color: rgba(255, 255, 255, 0.2);
         border-radius: 4px;
     }

     #reviews .col-xl-4.col-md-6 {
         flex: 0 0 85% !important;
         max-width: 85% !important;
         scroll-snap-align: center;
         height: auto;
     }

     #reviews .review-card {
         min-height: 100%;
         display: flex;
         flex-direction: column;
         border-radius: 0.5rem;
         overflow: hidden;
         box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
     }
 }


 /* ─────────────────────────────────────────────
   Blog Mobile View — Horizontal Card Styling
   ───────────────────────────────────────────── */

 @media (max-width: 767.98px) {

     .blog-card {
         height: 100%;
         display: flex;
         flex-direction: column;
         border-radius: 0.5rem;
         overflow: hidden;
         box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
     }

     .blog-card .top-4.bm {
         height: 180px;
         background-size: cover;
         background-position: center;
         border-top-left-radius: 0.5rem;
         border-top-right-radius: 0.5rem;
     }

     .blog-card .card-body {
         padding: 1rem;
         height: auto;
     }

     .blog-card h5 {
         font-size: 1rem;
         line-height: 1.3;
         overflow: hidden;
         display: -webkit-box;
         -webkit-line-clamp: 2;
         -webkit-box-orient: vertical;
     }

     .blog-card p {
         font-size: 0.875rem;
         color: #ccc;
         overflow: hidden;
         display: -webkit-box;
         -webkit-line-clamp: 2;
         -webkit-box-orient: vertical;
         margin-bottom: 1rem;
     }

     .blog-card .btn {
         font-size: 0.85rem;
         padding: 0.4rem 0.8rem;
     }
 }


 .scroll-x-container {
     overflow-x: auto;
     -webkit-overflow-scrolling: touch;
     scrollbar-width: thin;
     scroll-snap-type: x mandatory;
 }

 .scroll-x-container::-webkit-scrollbar {
     height: 6px;
 }

 .scroll-x-container::-webkit-scrollbar-thumb {
     background-color: rgba(255, 255, 255, 0.2);
     border-radius: 4px;
 }

 /* Mobile-specific horizontal scroll for blog cards */
 @media (max-width: 991.98px) {
     .blog-section-horizontal-scroll {
         display: flex !important;
         flex-wrap: nowrap !important;
         overflow-x: auto !important;
         gap: 1rem;
         padding-bottom: 1rem;
         scrollbar-width: none;
         /* Firefox */
         -ms-overflow-style: none;
         /* IE 10+ */
     }

     .blog-section-horizontal-scroll::-webkit-scrollbar {
         display: none;
         /* Chrome, Safari, Opera */
     }

     .blog-section-horizontal-scroll>.col-lg-3,
     .blog-section-horizontal-scroll>.col-md-6 {
         flex: 0 0 85vw !important;
         /* Card width on mobile */
         max-width: 85vw !important;
         min-width: 260px;
     }
 }

 .blog-card a.stretched-link {
     outline: none !important;
     box-shadow: none !important;
     border: none !important;
 }

 .blog-card a.stretched-link:focus,
 .blog-card a.stretched-link:active {
     outline: none !important;
     box-shadow: none !important;
     border: none !important;
 }

 @media (max-width: 767.98px) {
     .blog-horizontal-scroll {
         display: flex !important;
         flex-wrap: nowrap !important;
         overflow-x: auto !important;
         gap: 1rem;
         padding-bottom: 1rem;
         scroll-snap-type: x mandatory;
         -webkit-overflow-scrolling: touch;
     }

     .blog-horizontal-scroll::-webkit-scrollbar {
         /* height: 6px; */
     }

     .blog-horizontal-scroll::-webkit-scrollbar-thumb {
         background-color: rgba(255, 255, 255, 0.2);
         border-radius: 4px;
     }

     .blog-horizontal-scroll>.col-10 {
         flex: 0 0 85%;
         max-width: 85%;
         scroll-snap-align: center;
     }
 }


 /* Blog detail page mobile responsiveness */
 @media (max-width: 768px) {
     #blog {
         padding-top: 6rem !important;
         /* or 5rem depending on navbar height */
     }

     #blog .blog-images {
         max-width: 100%;
         height: auto;
     }

     #blog .bd {
         font-size: 1rem;
         line-height: 1.6;
         padding: 0 1rem;
     }

     #blog .text-center.mb-4 img {
         width: 100%;
         height: auto;
         object-fit: cover;
     }

     #blog .container {
         padding-left: 1rem;
         padding-right: 1rem;
     }

     #blog .mb-5 {
         margin-bottom: 2rem !important;
     }
 }

 @media (max-width: 768px) {
     .d-flex.gap-2.justify-content-end.w-100.w-md-auto {
         flex-direction: row !important;
         flex-wrap: nowrap !important;
         justify-content: space-between !important;
         gap: 0.5rem !important;
     }

     .d-flex.gap-2.justify-content-end.w-100.w-md-auto .btn {
         flex: 1 1 32%;
         font-size: 0.85rem;
         padding: 0.5rem 0.6rem;
         white-space: nowrap;
     }

     .d-flex.gap-2.justify-content-end.w-100.w-md-auto .btn.border-radius-100 {
         flex: 0 0 auto !important;
         width: 44px !important;
         height: 44px !important;
         border-radius: 50% !important;
         padding: 0 !important;
         display: flex !important;
         align-items: center;
         justify-content: center;
     }

 }

 @media (max-width: 768px) {
     footer .row.text-center.text-md-start {
         text-align: center !important;
     }

     footer .footer-info {
         display: flex;
         flex-direction: column;
         align-items: center;
     }

     footer .footer-info .logo {
         display: flex;
         justify-content: center;
         align-items: center;
         width: 100%;
         text-align: center;
     }

     footer .footer-info .logo img {
         max-width: 100%;
         height: auto;
         width: auto;
         object-fit: contain;
     }


     footer .short-description-text {
         font-size: 0.95rem;
         margin-top: 10px;
     }

     footer .col-lg-2,
     footer .col-md-3,
     footer .col-sm-6,
     footer .col-lg-4,
     footer .col-md-6 {
         text-align: center !important;
         margin-bottom: 1.5rem;
     }

     footer .col-lg-2 ul,
     footer .col-lg-4 ul {
         padding-left: 0;
     }

     footer h5 {
         font-size: 1.1rem;
     }

     footer .text-white-50 a {
         font-size: 0.95rem;
     }

     footer .mt-3 a {
         font-size: 1.2rem;
         margin: 0 10px;
     }

     footer .text-center.border-top {
         font-size: 0.85rem;
         margin-top: 2rem !important;
     }
 }

 .phone-icon {
     font-family: 'FontAwesome';
 }

 /* Tablet & below – Stack form below support cards */
 @media (max-width: 991.98px) {
     .row.justify-content-center.py-5 {
         flex-direction: column-reverse !important;
         padding-top: 2rem !important;
         padding-bottom: 2rem !important;
     }

     .col-lg-6,
     .col-md-8 {
         max-width: 100% !important;
         flex: 0 0 100% !important;
     }

     .mb-lg-0 {
         margin-bottom: 1.5rem !important;
     }

     .section-header h2 {
         /* font-size: 2rem; */
         line-height: 1.3;
         text-align: center;
         /* margin-bottom: 2rem; */
     }
 }

 /* Mobile – 2 support cards per row */
 @media (max-width: 768px) {

     /* Ensure the row wraps and has spacing */
     .row.g-3 {
         display: flex;
         flex-wrap: wrap;
         justify-content: center;
         gap: 1rem;
         /* spacing between cards */
     }

     /* Each card: 2 per row, equal size */
     .row.g-3>div[class^="col-"] {
         flex: 0 0 calc(50% - 0.5rem);
         /* exactly half width minus half the gap */
         max-width: calc(50% - 0.5rem);
         display: flex;
         justify-content: center;
     }

     /* Make all cards same height */
     .ci {
         min-height: 150px;
         /* consistent height */
         height: 100%;
         padding: 1rem !important;
         display: flex;
         flex-direction: column;
         justify-content: center;
     }

     .bg-nero-grey,
     .p-9,
     .sm-p-7 {
         padding: 1rem !important;
         height: 100%;
         width: 100%;
     }
 }

 @media (max-width: 768px) {
     .hero-section-dark.move-section-up {
         padding-top: 40px !important;
         padding-bottom: 20px !important;
         min-height: unset !important;
         margin-top: 0 !important;
     }

     .hero-section-dark .h-700px {
         height: auto !important;
         min-height: 350px;
         border-radius: 0 0 30px 30px !important;
     }

     /* Force nav-tabs to be in a single row and remove extra space below */
     .hero-section-dark .nav-tabs {
         flex-direction: row !important;
         flex-wrap: nowrap !important;
         justify-content: center !important;
         gap: 0.5rem !important;
         margin-bottom: 1rem !important;
         /* minimal space below nav */
     }

     .hero-section-dark .nav-item {
         flex: 1 1 0;
         min-width: 0;
         margin-bottom: 0 !important;
     }

     .hero-section-dark .tab-content>.tab-pane {
         padding: 1rem;
     }

     .hero-section-dark textarea.form-control {
         font-size: 1rem;
         min-height: 120px;
         padding: 10px;
     }

     .hero-section-dark .form-footer-border {
         padding-top: 1rem !important;
         margin-top: 1rem !important;
     }

     .hero-section-dark .d-flex.gap-2 {
         flex-direction: column;
         gap: 0.5rem !important;
         align-items: stretch;
     }

     .hero-section-dark .moved-form-up {
         margin-top: 60px !important;
     }

     .hero-section-dark .form-group {
         margin-top: 1.5rem !important;
     }

 }

 @media (max-width: 576px) {
     /* font-size: 1.3rem !important; */

     .hero-section-dark .container {
         padding-left: 10px;
         padding-right: 10px;
     }

     .hero-section-dark .form-group,
     .hero-section-dark .form-footer-border {
         padding-left: 0;
         padding-right: 0;
     }

     .hero-section-dark .nav-tabs {
         font-size: 0.95rem;
     }

     .hero-section-dark .btn {
         font-size: 0.95rem;
         padding: 0.5rem 1rem;
     }
 }

 @media (max-width: 768px) {
     .hero-section-dark .btn.border-radius-100 {
         width: 44px !important;
         height: 44px !important;
         min-width: 44px !important;
         min-height: 44px !important;
         padding: 0 !important;
         border-radius: 50% !important;
         display: flex;
         align-items: center;
         justify-content: center;
         font-size: 1.3rem !important;
     }

     .hero-section-dark .btn.border-radius-100 i {
         margin: 0 !important;
         font-size: 1.3rem !important;
     }
 }

 /* --- Add this CSS for mobile slider arrows and hide scrollbars --- */
 @media (max-width: 991.98px) {
     #pricing .mobile-slider-scroll::-webkit-scrollbar {
         display: none;
     }

     #pricing .mobile-slider-scroll {
         -ms-overflow-style: none;
         scrollbar-width: none;
         position: relative;
     }

     #pricing .slider-arrow {
         position: absolute;
         top: 50%;
         transform: translateY(-50%);
         background: rgba(0, 0, 0, 0.3);
         border: none;
         color: #fff;
         font-size: 1.5rem;
         z-index: 2;
         width: 32px;
         height: 32px;
         border-radius: 50%;
         display: flex;
         align-items: center;
         justify-content: center;
         cursor: pointer;
     }

     #pricing .slider-arrow.left {
         left: 0;
     }

     #pricing .slider-arrow.right {
         right: 0;
     }
 }

 .img-28 {
     width: 28px;
     height: 28px;
     object-fit: cover;
 }

 .max-w-90 {
     max-width: 90px;
 }

 .no-scrollbar {
     scrollbar-width: none;

     -ms-overflow-style: none;

 }

 .no-scrollbar::-webkit-scrollbar {
     display: none;

 }

 .min-max-width-card {
     min-width: 280px;
     max-width: 300px;
 }

 .lottie-60 {
     height: 60px;
 }

 .small-text {
     font-size: 0.8rem;
 }

 .card-height-400 {
     height: 400px;
 }

 .bimg {
     height: 180px;
     background-size: cover;
     background-position: center;
 }

 .bcontent {
     height: 220px;
 }

 .btitle {
     font-size: 1rem;
     line-height: 1.3;
     overflow: hidden;
     display: -webkit-box;
     -webkit-line-clamp: 2;
     -webkit-box-orient: vertical;
 }

 .bdescription {
     font-size: 0.9rem;
     overflow: hidden;
     display: -webkit-box;
     -webkit-line-clamp: 2;
     -webkit-box-orient: vertical;
 }

 .btn-read-more {
     font-size: 0.85rem;
     padding: 0.4rem 0.8rem;
 }

 .lottie-empty {
     height: 200px;
 }

 .no-radius {
     border-radius: 0;
 }

 .no-pointer {
     pointer-events: none;
 }

 .card-slider-item {
     min-width: 85%;
     max-width: 300px;
     flex: 0 0 auto;
 }

 .lottie-no-reviews {
     height: 400px;
 }

 .price-container {
     min-height: 60px;
     /* adjust as needed */
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
 }

 /* === Base styles for #values section === */
 #values .border-start {
     border-left: 1px solid rgba(255, 255, 255, 0.08);
 }

 /* Remove top border from first item to prevent double lines */
 #values .value-block:first-child {
     border-top: none !important;
 }

 /* Optional: style for the paragraph text */
 #values p {
     color: #ccc;
     font-size: 15px;
     line-height: 1.6;
     margin-bottom: 0;
 }

 /* Keep GIFs clean and visible */
 #values img {
     max-width: 55px;
     height: auto;
 }

 /* Responsive styles for small devices */
 @media (max-width: 576px) {
     #values h2 {
         font-size: 32px;
     }

     /* Remove left border and add top border instead on mobile */
     #values .border-start {
         border-left: none !important;

         padding-top: 15px;
         margin-top: 15px;
     }

     /* Prevent double border by skipping first */
     #values .value-block:first-child .border-start {
         border-top: none !important;
         margin-top: 0;
         padding-top: 0;
     }

     #values img {
         max-width: 48px;
         margin-bottom: 10px;
     }

     #values .ps-30px,
     #values .pe-30px {
         padding-left: 15px !important;
         padding-right: 15px !important;
     }

     #values .pt-20px,
     #values .pb-20px {
         padding-top: 15px !important;
         padding-bottom: 15px !important;
     }

     #values .text-start {
         text-align: center !important;
     }

     #values .col-md-1 {
         margin-bottom: 10px;
     }
 }

 @media (max-width: 767.98px) {
     .blog-view-more-row {
         margin-top: 1rem !important;
         /* Reduce excessive spacing on mobile */
         margin-left: 0.5rem;
     }

     .blog-view-more-row .btn {
         padding: 0.4rem 1rem;
         font-size: 0.875rem;
     }
 }

 .swiper-wrapper {
     height: auto !important;
 }