.carousel-slider {
         -webkit-appearance: none;
         width: 100%;
         height: 4px;
         background: rgba(0, 170, 231, 0.1);
         border-radius: 2px;
         outline: none;
      }
      
     

      /* Hero Background Effect */
      .hero-bg {
         position: relative;
         min-height: 100vh !important;
         display: flex;
         align-items: center;
         overflow: hidden;
      }

      .scroll-down-indicator {
         position: absolute;
         bottom: 50px;
         left: 50%;
         transform: translateX(-50%);
         z-index: 15;
      }

      .scroll-down-indicator a {
         display: flex;
         align-items: center;
         justify-content: center;
         width: 50px;
         height: 50px;
         background-color: #ffffff;
         color: #00aae7;
         border-radius: 50%;
         /* Perfect circle */
         text-decoration: none;
         font-size: 1.2rem;
         box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
         transition: all 0.3s ease-in-out;
         animation: bounce 2s infinite;
      }

      .scroll-down-indicator a:hover {
         background-color: #00aae7;
         color: #ffffff;
         transform: scale(1.1);
      }

      @keyframes bounce {

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

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

         60% {
            transform: translateY(-5px);
         }
      }

      #connectorCanvas {
         position: absolute;
         top: 0;
         left: 0;
         width: 100%;
         height: 100%;
         pointer-events: none;
         /* Allows clicking buttons through the canvas */
         z-index: 1;
      }

      .content-layer {
         position: relative;
         z-index: 10;
      }

      /* Glassmorphism Cards */
      .glass-card {
         background: linear-gradient(180deg, rgba(255, 255, 255, .06) 0%, rgba(255, 255, 255, .04) 100%);
         border: 1px solid rgba(255, 255, 255, .10);
         backdrop-filter: blur(12px);
         border-radius: 1rem;
         transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
         padding: 2rem;
         height: 100%;
      }

      .glass-card:hover {
         border-color: #00aae7;
         transform: translateY(-5px);
         box-shadow: 0 0 20px rgba(0, 170, 231, 0.4);
      }

      .section-description {
         color: #ccc;
         font-size: 1.1rem;
         line-height: 1.6;
      }

    

   

      /* Container adjustments */
      .timeline-container {
         position: relative;
         padding-left: 0;
         /* Reset for mobile */
      }

      /* Responsive Vertical Line */
      .timeline-container::before {
         content: '';
         position: absolute;
         left: 20px;
         /* Shifted left for mobile */
         top: 60px;
         bottom: 10px;
         border-left: 2px dashed #00aae7;
         height: calc(100% - 140px);
         z-index: 1;
      }

      /* Ensure items don't overlap the line */
      .timeline-item {
         position: relative;
         z-index: 2;
         margin-bottom: 2rem !important;
         /* Consistent spacing */
      }

      /* Mobile-first Dot Scaling */
      .timeline-dot {
         min-width: 45px;
         /* Fixed width to prevent shrinking in flexbox */
         height: 45px;
         width: 45px;
         font-size: 0.9rem;
         border-radius: 50%;
         background: #ffffff;
         display: flex;
         align-items: center;
         justify-content: center;
         color: #00aae7;
         font-weight: bold;
         flex-shrink: 0;
         /* Prevents dot from squishing */
         box-shadow: 0 0 15px rgba(59, 130, 246, 0.2);
         transition: all 0.3s ease;
      }

      /* Glass Card Padding for Mobile */
      .glass-card {
         padding: 1.25rem;
         /* Smaller padding on mobile */
         background: linear-gradient(180deg, rgba(255, 255, 255, .06) 0%, rgba(255, 255, 255, .04) 100%);
         border: 1px solid rgba(255, 255, 255, .10);
         backdrop-filter: blur(12px);
         border-radius: 1rem;
         transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
      }

      /* Desktop Enhancements (Tablets and up) */
      @media (min-width: 768px) {
         .timeline-container::before {
            left: 30px;
            /* Original spacing for desktop */
         }

         .timeline-dot {
            width: 60px;
            height: 60px;
            font-size: 1rem;
         }

         .glass-card {
            padding: 2rem;
         }

         .timeline-item {
            margin-bottom: 3rem !important;
         }
      }

      .timeline-item:hover .timeline-dot {
         background: #00aae7;
         color: #ffffff;
         border: 1px solid #00aae7;
         box-shadow: 0 0 20px #00aae7;
      }

      .adk-label {
         font-size: 1rem;
         letter-spacing: 0.1rem;
         text-transform: uppercase;
         font-weight: 700;
         display: block;
         margin-bottom: 1.5rem;
      }

      .feature-card {
         background: linear-gradient(180deg, rgba(255, 255, 255, .06) 0%, rgba(255, 255, 255, .04) 100%);
         border: 1px solid rgba(255, 255, 255, .10);
         backdrop-filter: blur(10px);
         border-radius: 1rem;
         height: 100%;
         transition: transform 1s ease, box-shadow 0.3s ease;
      }

      .feature-card:hover {
         border-color: #00aae7;
         box-shadow: 0 0 20px rgba(0, 170, 231, 0.4);
         transform: translateY(-5px);
      }

      .feature-card:hover .icon-style {
         color: #00aae7;
      }

      .icon-style {
         color: #ffffff;
         font-size: 1.5rem;
         margin-bottom: 1rem;
      }

      .feature-title {
         font-weight: 600;
         color: #ffffff;
         line-height: 1.4;
      }

      /* Base Card Style */
      .feature-card-glow {
         background: linear-gradient(180deg, rgba(255, 255, 255, .06) 0%, rgba(255, 255, 255, .04) 100%);
         border: 1px solid rgba(255, 255, 255, .10);
         border-radius: 1rem;
         padding: 2rem;
         transition: all 0.3s ease-in-out;
         height: 100%;
      }

      /* Hover State with #00aae7 Glow */
      .feature-card-glow:hover {
         transform: translateY(-5px);
         border-color: #00aae7;
         box-shadow: 0 0 20px rgba(0, 170, 231, 0.4);
         /* Glow effect */
      }

      /* Icon Container Styling */
      .icon-container {
         background: #ffffff;
         color: #00aae7;
         border: 1px solid #303841;
         display: inline-flex;
         padding: 0.75rem;
         border-radius: 0.75rem;
         margin-bottom: 1.5rem;
      }

      .feature-card-glow:hover .icon-container {
         background: #00aae7;
         color: #ffffff;
         border: 1px solid #00aae7;
         display: inline-flex;
         padding: 0.75rem;
         border-radius: 0.75rem;
         margin-bottom: 1.5rem;
      }

      /* Base state: Hidden and slightly below/transparent */
      .feature-reveal {
         opacity: 0;
         transform: translateY(20px);
         transition: all 1s cubic-bezier(0.16, 1, 0.3, 1);
      }

      /* Visible state */
      .feature-reveal.active {
         opacity: 1;
         transform: translateY(0);
      }

      .icon-container i {
         width: 24px;
         height: 24px;
         font-size: 20px;
      }

      .text-muted-foreground {
         color: #ccc;
      }

      .bg-primary {
         background: rgba(0, 169, 231, 0.267) !important;
         color: #00aae7 !important;
      }

      .section-wrapper {
         text-align: center;
      }

      .section-title {
         font-size: 42px;
         font-weight: 700;
         margin-bottom: 12px;
         letter-spacing: -0.02em;
      }

      .section-subtitle {
         color: #94a3b8;
         font-size: 18px;
         margin-bottom: 48px;
         max-width: 620px;
      }

      .card-container {
         display: flex;
         flex-wrap: wrap;
         gap: 16px;
         justify-content: center;
      }

      .service-card {
         background: linear-gradient(180deg, rgba(255, 255, 255, .06) 0%, rgba(255, 255, 255, .04) 100%);
         border: 1px solid rgba(255, 255, 255, .10);
         border-radius: 12px;
         padding: 16px 24px;
         display: flex;
         align-items: center;
         min-width: 160px;
         cursor: pointer;
         transition: all 0.2s ease-in-out;
      }

      .service-card:hover {
         border-color: #38bdf8;
         background-color: rgba(30, 41, 59, 0.5);
         box-shadow: 0 0 20px rgba(0, 170, 231, 0.4);
      }

      .icon {
         width: 32px;
         height: 32px;
         background-color: #2368a066;
         color: #00aae7;
         border-radius: 6px;
         display: flex;
         align-items: center;
         justify-content: center;
         font-weight: 800;
         font-size: 12px;
         margin-right: 12px;
      }

      .label {
         font-size: 16px;
         font-weight: 500;
         white-space: nowrap;
      }

      /* Section Background - Now occupies full width */
      .cta-container {
         display: flex;
         justify-content: center;
         align-items: center;
         width: 100%;
         box-sizing: border-box;
      }

      /* The Card - Width increased to 1200px */
      .cta-card {
         border: 1px solid #00aae7;
         border-radius: 16px;
         padding: 55px 60px;
         width: 100%;
         text-align: center;
         background-color: rgba(255, 255, 255, 0.01);
         box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
         background: #00a4e60d !important;
      }

      .cta-title {
         color: #ffffff;
         font-size: 2.5rem;
         font-weight: 600;
         margin-bottom: 24px;
         letter-spacing: -0.02em;
         line-height: 1.1;
      }

      .cta-subtitle {
         color: #94a3b8;
         line-height: 1.6;
         margin-bottom: 48px;
         max-width: 800px;
         /* Subtitle line length remains readable */
         margin-left: auto;
         margin-right: auto;
      }

      .cta-button {
         display: inline-flex;
         align-items: center;
         background-color: #00a3e0;
         color: #ffffff;
         text-decoration: none;
         padding: 18px 36px;
         border-radius: 8px;
         font-weight: 600;
         transition: all 0.3s ease;
      }

      .cta-button:hover {
         background-color: #00b4f5;
         transform: translateY(-3px);
         box-shadow: 0 10px 20px rgba(0, 163, 224, 0.2);
      }

      .arrow {
         margin-left: 12px;
         transition: transform 0.3s ease;
      }

      .cta-button:hover .arrow {
         transform: translateX(5px);
      }

      /* Responsive Adjustments */
      @media (max-width: 1024px) {
         .cta-title {
            font-size: 2.5rem;
         }

         .cta-card {
            padding: 60px 40px;
         }
      }

      @media (max-width: 768px) {
         .cta-title {
            font-size: 1.7rem;
         }

         .cta-container {
            padding: 60px 20px;
         }
      }

      .architecture-card {
         background: linear-gradient(180deg, rgba(255, 255, 255, .06) 0%, rgba(255, 255, 255, .04) 100%);
         border: 1px solid rgba(255, 255, 255, 0.1);
         border-radius: 20px;
         padding: 40px 20px;
         position: relative;
         min-height: 450px;
         display: flex;
         flex-direction: column;
         justify-content: space-between;
      }

      .architecture-card:hover {
         border-color: #00aae7;
         box-shadow: 0 0 20px rgba(0, 170, 231, 0.4);
      }

      .nodes-container {
         position: relative;
         z-index: 2;
         height: 100%;
         display: flex;
         flex-direction: column;
         justify-content: space-between;
         gap: 60px;
      }

      .node-row {
         display: flex;
         justify-content: space-around;
         align-items: center;
         gap: 15px;
      }

      /* Nodes Styling */
      .node {
         border: 1.5px solid #2368a0;
         border-radius: 12px;
         color: white;
         padding: 15px 10px;
         font-weight: 600;
         text-align: center;
         flex: 1;
         max-width: 140px;
         font-size: 0.7rem;
         background: #0f172a;
         position: relative;
         z-index: 2;
      }

      .core-node {
         max-width: 400px;
         border-color: #00aae7;
         background: rgba(0, 170, 231, 0.05);
         padding: 20px;
      }

      .core-title {
         color: #00aae7;
         font-size: 1.2rem;
         margin-bottom: 5px;
      }

      .core-subtext {
         font-size: 0.75rem;
         color: #ffffff;
         font-weight: 400;
      }

      .gcp-node {
         border-color: #334155;
         background: #1e293b;
         color: #8c8c8c;
      }

      /* SVG Line Styling */
      .lines-overlay {
         position: absolute;
         top: 0;
         left: 0;
         width: 100%;
         height: 90%;
         z-index: 1;
         pointer-events: none;
      }

      .line-flow {
         stroke: #00aae7;
         /* Brighter blue for the moving dots */
         stroke-width: 2;
         /* First number is dot length, second is space between dots */
         stroke-dasharray: 4, 12;
         stroke-linecap: round;
         opacity: 0.8;
      }

      .lines-overlay line {
         stroke: #ffffff;
         stroke-width: 1.5;
         stroke-dasharray: 4;
         /* Creates the dashed effect from the image */
         opacity: 1;
      }

      .flow-in {
         animation: flowIn 5s linear infinite;
      }

      /* Animation for lines going from Core to GCP */
      .flow-out {
         animation: flowOut 5s linear infinite;
      }

      @keyframes flowIn {
         from {
            stroke-dashoffset: 50;
         }

         to {
            stroke-dashoffset: 0;
         }
      }

      @keyframes flowOut {
         from {
            stroke-dashoffset: -0;
         }

         to {
            stroke-dashoffset: -50;
         }
      }

      /* Keep your node styles solid to hide the lines behind them */
      .node {
         background: #0f172a;
         position: relative;
         z-index: 2;
      }

      .platform-label {
         text-align: center;
         color: #ffffff;
         font-size: 0.75rem;
         letter-spacing: 3px;
         margin-top: 30px;
         font-weight: bold;
      }

      .fastdk-icon {
         width: 40px;
         height: 40px;
         flex-shrink: 0;
         /* Prevents the circle from squishing on small screens */
         color: #ffffff;
         background: #00aae7;
         border-radius: 4px;
      }

      /* Container for the footer */
      .footer {
         background-color: #001a33;
         /* Dark slate gray background */
         color: #ccc;
         /* Muted gray for secondary text */
         padding: 4rem 4rem;
         font-size: 14px;
         width: 100%;
         margin-top: auto;
      }

      /* Left side styling */
      .footer-left strong {
         color: #ffffff;
         font-size: 16px;
         margin-right: 4px;
      }

      /* Right side styling */
      .footer-right {
         color: #ccc;
         line-height: 1.5;
      }

      .footer-link {
         color: inherit;
         /* Keeps the color the same as the surrounding text */
         text-decoration: none;
         /* Removes the underline */
         transition: color 0.3s ease;
      }

      /* Base state for all scroll-reveal elements */
      .reveal {
         opacity: 0;
         will-change: transform, opacity;
         transition: opacity 1s ease-out, transform 1s cubic-bezier(0.215, 0.61, 0.355, 1);
      }

      /* 1. Fade Up (Longer travel) */
      .fade-up {
         transform: translateY(50px);
      }

      .fade-up.active {
         opacity: 1;
         transform: translateY(0);
      }

      /* 2. Fade Down */
      .fade-down {
         transform: translateY(-50px);
      }

      .fade-down.active {
         opacity: 1;
         transform: translateY(0);
      }

      /* 3. Fade Left (Slides in from the right) */
      .fade-left {
         transform: translateX(50px);
      }

      .fade-left.active {
         opacity: 1;
         transform: translateX(0);
      }

      /* 4. Fade Right (Slides in from the left) */
      .fade-right {
         transform: translateX(-50px);
      }

      .fade-right.active {
         opacity: 1;
         transform: translateX(0);
      }

      .feature-card-glow h3 {
         max-width: 290px;
      }

      .fad:after {
         opacity: 1;
      }

      /* Glow Shape 1: Top Left / Purple-Pink */
      /* Glow Shape 1: Top Left / Solid Blue Glow */
      .feature-one__color-overly-1 {
         position: absolute;
         top: 20%;
         left: -100px;
         height: 400px;
         width: 400px;
         border-radius: 50%;
         opacity: 0.25;
         /* Using your blue as a solid background */
         background: #00aae7;
         filter: blur(100px);
         z-index: 0;
      }

      /* Glow Shape 2: Bottom Right / Blue Gradient Glow */
      .feature-one__color-overly-2 {
         position: absolute;
         bottom: 20%;
         right: -150px;
         height: 500px;
         width: 500px;
         border-radius: 50%;
         opacity: 0.2;
         /* Using a gradient from your blue to transparent for a softer edge */
         background: linear-gradient(180deg, #00aae7 0%, rgba(0, 170, 231, 0) 100%);
         filter: blur(110px);
         z-index: 0;
      }

      /* Floating Animations */
      .float-bob-x {
         animation-name: float-bob-x;
         animation-duration: 15s;
         animation-iteration-count: infinite;
         animation-timing-function: linear;
      }

      .float-bob-y {
         animation-name: float-bob-y;
         animation-duration: 12s;
         animation-iteration-count: infinite;
         animation-timing-function: linear;
      }

      @keyframes float-bob-x {
         0% {
            transform: translateX(0px);
         }

         50% {
            transform: translateX(100px);
         }

         100% {
            transform: translateX(0px);
         }
      }

      @keyframes float-bob-y {
         0% {
            transform: translateY(0px);
         }

         50% {
            transform: translateY(80px);
         }

         100% {
            transform: translateY(0px);
         }
      }

      /* Ensure content stays above the glow */
      .position-relative {
         position: relative;
      }

      .initiative-section {
         position: relative;
         /* Dark Navy Base */
         overflow: hidden;
         padding: 0px 0px 80px;
      }

      .grid-pattern {
         position: absolute;
         top: 0;
         left: 0;
         width: 100%;
         height: 100%;
         background-image:
            linear-gradient(to right, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
            linear-gradient(to bottom, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
         background-size: 100px 100px;
         z-index: -1;
         mask-image: radial-gradient(ellipse at center,
               black 20%,
               transparent 65%);
      }

      @keyframes spotlightMove {
         0% {
            transform: translate(0, 0);
         }

         100% {
            transform: translate(60%, 40%);
         }
      }

      section.position-relative {
         position: relative;
         overflow: hidden;
      }

      .plasma-orb {
         position: absolute;
         width: 450px;
         height: 450px;
         border-radius: 50%;
         background: radial-gradient(circle, rgba(0, 170, 231, 0.25) 0%, rgba(0, 170, 231, 0) 70%);
         filter: blur(80px);
         z-index: 99;
         pointer-events: none;
      }

      .orb-1 {
         top: 5%;
         left: -10%;
         animation: moveOrb1 15s infinite alternate ease-in-out;
      }

      .orb-2 {
         bottom: 15%;
         right: -5%;
         animation: moveOrb2 20s infinite alternate ease-in-out;
      }

      .container {
         z-index: 2;
      }

      .custom-carousel-outer {
         position: relative;
         width: 100%;
      }

      .custom-carousel-inner {
         display: flex !important;
         overflow-x: auto !important;
         overflow-y: hidden !important;
         scroll-snap-type: x mandatory;
         scroll-behavior: smooth;
         gap: 24px;
         padding: 20px 5px;
         cursor: grab;
         scrollbar-width: none;
         -ms-overflow-style: none;
         user-select: none;
         -webkit-user-drag: none;
         align-items: center;
      }

      .custom-carousel-inner::-webkit-scrollbar {
         display: none;
      }

      .custom-carousel-inner:active {
         cursor: grabbing;
      }

      .custom-card-wrapper a,
      .custom-card-wrapper button {
         pointer-events: auto;
      }

      .custom-carousel-inner::-webkit-scrollbar {
         display: none;
      }

      .custom-card-wrapper {
         scroll-snap-align: start;
         user-select: none;
         max-width: 90%;
         scroll-snap-align: start;
         scroll-snap-align: start;
         flex: 0 0 calc((100% - (2 * 24px)) / 3) !important;
         min-width: 300px;
      }

      @media (max-width: 991px) {
         .custom-card-wrapper {
            flex: 0 0 calc((100% - 24px) / 2) !important;
         }
      }

      @media (max-width: 575px) {
         .custom-card-wrapper {
            flex: 0 0 100% !important;
         }
      }

      .carousel-slider-container {
         width: 200px;
         margin: 40px auto 0;
      }

   

      .carousel-slider::-webkit-slider-thumb {
         -webkit-appearance: none;
         width: 40px;
         height: 8px;
         border-radius: 10px;
         background: #00aae7;
         cursor: pointer;
         transition: background 0.2s;
      }

      .title {
         font-size: 3.8rem;
      }

      @media (max-width: 768px) {
         .title {
            font-size: 2.5rem;
         }
      }

      .logo-hero {
         max-height: 18%;
         width: auto;
         object-fit: contain;
      }

      @media (max-width: 768px) {
         .logo-hero {
            max-height: 60px;
         }
      }

      .form-control::placeholder {
         color: #94a3b8 !important;
      }

      .form-control:focus {
         border-color: #00aae7 !important;
         box-shadow: 0 0 5px rgba(0, 170, 231, 0.5) !important;
      }

      /* Base (Desktop) */
      .custom-modal {
         max-width: 600px !important;
         /* reduced from ~700+ */
         margin: 50px auto !important;
         /* more top/bottom spacing */
      }

      /* Tablet */
      @media (max-width: 992px) {
         .custom-modal {
            max-width: 90% !important;
            margin: 40px auto !important;
         }
      }

      /* Mobile */
      @media (max-width: 576px) {
         .custom-modal {
            max-width: 95% !important;
            margin: 20px auto !important;
         }

         .modal-content {
            border-radius: 12px !important;
         }

         .modal-body {
            padding: 16px !important;
         }
      }

      .modal-backdrop.show {
         opacity: 0.78 !important;
         background: #0e263c;
      }

      .modal-content {
         padding: 20px !important;
         border-radius: 16px !important;
      }

      .modal-body {
         max-height: 70vh !important;
         overflow-y: auto !important;
      }

      .custom-input::placeholder {
         color: #94a3b8 !important;
         transition: opacity 0.2s ease !important;
      }

      .cc-dropdown {
         position: relative !important;
         width: 100% !important;
         font-size: 14px !important;
      }

      /* Selected box */
      /* Dropdown list */
      .cc-list {
         position: absolute;
         top: 105%;
         left: 0;
         width: 100%;
         max-height: 180px;
         overflow-y: auto;
         background: #1f293a;
         border-radius: 10px;
         padding: 0;
         margin: 0;
         list-style: none;
         display: none;
         z-index: 99999;
         /* 🔥 important for modal */
      }

      /* Show dropdown */
      .cc-dropdown.active .cc-list {
         display: block;
      }

      /* Items */
      .cc-list li {
         padding: 10px;
         color: #fff;
         cursor: pointer;
      }

      .cc-list li:hover {
         background: rgba(56, 189, 248, 0.2);
      }

      /* Scrollbar */
      .cc-list::-webkit-scrollbar {
         width: 6px;
      }

      .cc-list::-webkit-scrollbar-thumb {
         background: #38bdf8;
         border-radius: 10px;
      }

      .cc-dropdown {
         position: relative;
      }

      .cc-selected {
         background: #1f293a;
         color: #fff;
         padding: 8px;
         border: 1px solid #334155;
         border-radius: 8px;
         cursor: pointer;
         position: relative;
      }

      .arrow {
         position: absolute;
         right: 12px;
         top: 47%;
         width: 8px;
         height: 8px;
         border-right: 2px solid #94a3b8;
         border-bottom: 2px solid #94a3b8;
         transform: translateY(-50%) rotate(45deg);
         /* down */
         transition: 0.3s;
      }

      /* ✅ Rotate when open */
      .cc-dropdown.active .arrow {
         transform: translateY(-50%) rotate(-135deg);
         /* up */
      }

      /* dropdown */
      .cc-list {
         position: absolute;
         width: 100%;
         max-height: 135px;
         overflow-y: auto;
         background: #1f293a;
         border-radius: 10px;
         margin-top: 5px;
         padding: 0;
         list-style: none;
         display: none;
         z-index: 999999;
         /* 🔥 very important */
      }

      /* show */
      .cc-dropdown.open .cc-list {
         display: block;
      }

      .cc-list li {
         padding: 10px;
         color: white;
         cursor: pointer;
      }

      .cc-list li:hover {
         background: rgba(56, 189, 248, 0.2);
      }

      .alert-danger ul {
         list-style: none !important;
         padding-left: 0 !important;
         margin: 0 !important;
      }

      .alert-danger {
         padding: 4px 15px !important;
      }


      .disablebutton-click {
         cursor: not-allowed;
         pointer-events: none;
         background-color: #ccc;
      }
         /* custom country code dropdown */
/* custom country code dropdown */
.custom-dropdown {
         width: 75px;
         position: relative;
         font-family: Arial;
         background: #1f293a;
         border: 1px solid #334155;
         border-radius: 8px;
      }

      .custom-dropdown .dd-btn {
         width: 100%;
         padding: 7px;
         background: #1e293b;
         border: 1px solid #334155;
         cursor: pointer;
         color: #DEDEDE;
         text-align: left;
         font-size: 15px;
         font-weight: 450;
         border-radius: 3px !important;
         font-family: Montserrat, sans-serif;
      }

      .custom-dropdown .dd-btn::after {
         content: "";
         float: right;
         width: 14px;
         height: 25px;
         margin-top: 0px;
         background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none' stroke='%23999' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 8 10 12 14 8'></polyline></svg>") no-repeat center;
      }

      .custom-dropdown .dd-box {
         display: none;
         position: absolute;
         top: 42px;
         left: 0;
         width: 100%;
         background: #1f293a;
         border: 1px solid #334155;
         border-radius: 10px;
         max-height: 135px;
         overflow-y: auto;
         z-index: 999;
         overflow-x: hidden;
         margin-top: 5px;
      }

      .custom-dropdown .dd-item {
         padding: 10px;
         cursor: pointer;
         color: #ffffff;
      }

      .custom-dropdown .dd-item:hover {
         /* background: #eee; */
         background: #38bdf833;
         color: #000000;
      }

      .custom-dropdown .dd-box::-webkit-scrollbar {
         width: 6px;
      }

      .custom-dropdown .dd-box::-webkit-scrollbar-track {
         background: #1f293a;
      }

      .custom-dropdown .dd-box::-webkit-scrollbar-thumb {
         background: #38bdf8;
         border-radius: 5px;
      }

      /* custom country code dropdown */

      .code-btn.placeholder {
         color: #fff !important;
         border-color: none !important;      }

      .code-btn.normal {
         color: #fff !important;
         border: 1px solid #334155;
         border-width: 1px !important;
         padding-left: 12px;
      }

      .code-btn.focused {
         border-color: #999;
      }
      .form-control {
         border-radius: 8px !important;
         height: 43px !important;
}

 .dropdown {
      position: relative;
      width: 250px;
    }

    .dropdown-btn {
      background: #fff;
      border: 2px solid #ddd;
      border-radius: 0px 4px 4px 0px;
      padding: 10px;
      width: 100%;
      text-align: left;
      cursor: pointer;
      height: 40px;
      color: #ddd;
      font-weight: 400;
      text-decoration: none;
    }

    .dropdown-btn:after {
      content: "\276E";
      float: right;
      font-size: 12px;
      margin-top: 2px;
      rotate: -90deg;
      font-weight: 700;
      text-decoration: none;
    }

    .dropdown-content {
      display: none;
      position: absolute;
      background: #fff;
      border: 1px solid #ddd;
      box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
      border-radius: 4px;
      margin-top: 2px;
      width: 100%;
      max-height: 200px;
      overflow-y: auto;
      z-index: 100;
    }

    .dropdown-content a {
      display: block;
      padding: 5px 10px;
      text-decoration: none;
      color: #333;
      font-size: 14px;
      padding-left: 1.2rem !important;
    }

    .dropdown-content a:hover {
      /* background: #f5f5f5 !important; */
      color: #fff;
      background: #0067c5 !important;

    }

    .dropdown-content a.active {
      /*color: #007bff;*/
      /*font-weight: bold;*/
      color: #fff;
      font-weight: bold;
      /* background-color: #51565abf; */
    }

    .dropdown.open .dropdown-content {
      display: block;
    }

    /* Custom Dropdown Scrollbar */
    .dropdown-content {
      display: none;
      position: absolute;
      background: #fff;
      border: 1px solid #ddd;
      box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
      border-radius: 4px;
      margin-top: 2px;
      width: 100%;
      max-height: 130px;
      /* activates scrollbar */
      overflow-y: auto;

      /* Scrollbar styles */
      scrollbar-gutter: stable;
      scrollbar-color: #00aae7 #eceff7 !important;
      /* thumb / track */
      scrollbar-width: thin;
    }

    /* For Chrome, Edge, Safai */
    .dropdown-content::-webkit-scrollbar {
      width: 6px;
    }

    .dropdown-content::-webkit-scrollbar-track {
      background: #eceff7;
      border-radius: 10px;
    }

    .dropdown-content::-webkit-scrollbar-thumb {
      background-color: #00aae7;
      border-radius: 10px;
    }

    .dropdown-content::-webkit-scrollbar-thumb:hover {
      background-color: #008ac2;
    }

    /* ensure you have a hidden utility */
    .dropdown-content.hidden {
      display: none;
    }

.miracle-privacy {
    text-align: justify;
    font-size: 11px;
    font-weight: 400;
    color: #fff;
    font-family: 'Montserrat', sans-serif !important;
    text-transform: none !important;
}

.alert-dismissible .btn-close {
    
   top: 6px !important;
    font-size: 13px !important; 
    padding: 9px 15px !important;
}

.alert-danger .btn-close {
  box-shadow: none !important;
  outline: none !important;
  background: none; 
  opacity: 1;
  padding: 4px 10px !important;
}

.alert-danger .btn-close::before,
.alert-danger .btn-close::after {
  content: "";
  position: absolute;
  top: 9px;
  left: 2px;
  width: 16px;
  height: 2px;
  background: #ff4d4f; 
  transition: all 0.3s ease;
}

.alert-danger .btn-close::before {
  transform: rotate(45deg);
}

.alert-danger .btn-close::after {
  transform: rotate(-45deg);
}

.alert-danger .btn-close:hover::before,
.alert-danger .btn-close:hover::after {
  background: #ffffff;
}

.alert-danger .btn-close:focus,
.alert-danger .btn-close:active {
  box-shadow: none !important;
  outline: none !important;
}

.dd-item-1::-webkit-scrollbar {
         width: 6px;
         }
         .dd-item-1::-webkit-scrollbar-thumb {
         background: #38bdf8;
         border-radius: 10px;
         }