/* Translate */
.translate-x-0 { transform: translateX(0); }
.translate-x-4 { transform: translateX(1rem); }
.translate-y-4 { transform: translateY(1rem); }

/* Scale */
.scale-50 { transform: scale(.5); }
.scale-100 { transform: scale(1); }

/* Rotate */
.rotate-0 { transform: rotate(0deg); }
.rotate-45 { transform: rotate(45deg); }

/* Skew */
.skew-x-6 { transform: skewX(6deg); }
.skew-y-6 { transform: skewY(6deg); }


.shadow-none { box-shadow: none !important; }
.shadow-sm   { box-shadow: 0 1px 2px rgba(0,0,0,.05); }
.shadow      { box-shadow: 0 1px 3px rgba(0,0,0,.1); }
.shadow-md   { box-shadow: 0 4px 6px rgba(0,0,0,.1); }
.shadow-lg   { box-shadow: 0 10px 15px rgba(0,0,0,.1); }
.shadow-xl   { box-shadow: 0 20px 25px rgba(0,0,0,.15); }


.bg-gradient-blue {
  background: linear-gradient(to right, #3b82f6, #2563eb);
}
.bg-gradient-green {
  background: linear-gradient(to right, #10b981, #059669);
}


.blur-sm   { filter: blur(2px); }
.blur      { filter: blur(4px); }
.brightness-50 { filter: brightness(.5); }
.contrast-125  { filter: contrast(1.25); }


@keyframes spin { to { transform: rotate(360deg); } }
.animate-spin { animation: spin 1s linear infinite; }

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-25%); }
}
.animate-bounce { animation: bounce 1s infinite; }




.h-0 {
    height: calc(0.25rem * 0);
  }

  .h-0\.5 {
    height: calc(0.25rem * .5);
  }

  .h-1 {
    height: calc(0.25rem * 1);
  }

  .h-1\.5 {
    height: calc(0.25rem * 1.5);
  }

  .h-2 {
    height: calc(0.25rem * 2);
  }

  .h-2\.5 {
    height: calc(0.25rem * 2.5);
  }

  .h-3 {
    height: calc(0.25rem * 3);
  }

  .h-4 {
    height: calc(0.25rem * 4);
  }

  .h-5 {
    height: calc(0.25rem * 5);
  }

  .h-6 {
    height: calc(0.25rem * 6);
  }

  .h-7 {
    height: calc(0.25rem * 7);
  }

  .h-8 {
    height: calc(0.25rem * 8);
  }

  .h-9 {
    height: calc(0.25rem * 9);
  }

  .h-10 {
    height: calc(0.25rem * 10);
  }

  .h-12 {
    height: calc(0.25rem * 12);
  }

  .h-14 {
    height: calc(0.25rem * 14);
  }

  .h-16 {
    height: calc(0.25rem * 16);
  }

  .h-20 {
    height: calc(0.25rem * 20);
  }

  .h-24 {
    height: calc(0.25rem * 24);
  }

  .h-32 {
    height: calc(0.25rem * 32);
  }

  .h-40 {
    height: calc(0.25rem * 40);
  }

  .h-72 {
    height: calc(0.25rem * 72);
  }

  .h-80 {
    height: calc(0.25rem * 80);
  }

  .h-96 {
    height: calc(0.25rem * 96);
  }

  .h-\[600px\] {
    height: 600px;
  }

  .h-\[calc\(100vh-112px\)\] {
    height: calc(100vh - 112px);
  }

  .h-full {
    height: 100%;
  }

  .h-px {
    height: 1px;
  }


/* Animations */
        @keyframes fadeInUp {
            0% { opacity: 0; transform: translateY(30px); }
            100% { opacity: 1; transform: translateY(0); }
        }

        @keyframes slideInFromLeft {
            0% { opacity: 0; transform: translateX(-50px); }
            100% { opacity: 1; transform: translateX(0); }
        }

        @keyframes slideInFromRight {
            0% { opacity: 0; transform: translateX(50px); }
            100% { opacity: 1; transform: translateX(0); }
        }

        @keyframes pulse {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.5; }
        }

        @keyframes bounce {
            0%, 20%, 53%, 80%, 100% { transform: translateY(0); }
            40%, 43% { transform: translateY(-30px); }
            70% { transform: translateY(-15px); }
            90% { transform: translateY(-4px); }
        }

        @keyframes ping {
            75%, 100% { transform: scale(2); opacity: 0; }
        }

        @keyframes floatUpDown {
            0%, 100% { transform: translateY(0px); }
            50% { transform: translateY(-10px); }
        }

        @keyframes scroll-left {
            0% { transform: translateX(100%); }
            100% { transform: translateX(-100%); }
        }
        /* Glow animation */
        @keyframes glow {
            0%, 100% { box-shadow: 0 0 5px rgba(220, 38, 38, 0.5); }
            50% { box-shadow: 0 0 20px rgba(220, 38, 38, 0.8); }
        }


        .animate-fade-in-up { animation: fadeInUp 0.6s ease-out forwards; }
        .animate-slide-in-left { animation: slideInFromLeft 0.6s ease-out forwards; }
        .animate-slide-in-right { animation: slideInFromRight 0.6s ease-out forwards; }
        .animate-pulse { animation: pulse 2s infinite; }
        .animate-bounce { animation: bounce 1s infinite; }
        .animate-ping { animation: ping 1s infinite; }
        .animate-float { animation: floatUpDown 3s ease-in-out infinite; }
        .animate-glow { animation: glow 2s ease-in-out infinite; }


/* Hover effects */
.hover-lift:hover {
  transform: translateY(-4px);
  transition: transform 0.3s ease-out;
}

.hover-scale:hover {
  transform: scale(1.05);
  transition: transform 0.3s ease-out;
}

/* Glass morphism effect */
.glass {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

/* Icon alignment fix */
.icon-inline {
  vertical-align: middle;
}

.overflow-hidden {
    overflow: hidden;
}

.flex {
    display: flex;
  }

.items-center {
    align-items: center;
  }

/* Utility Classes */
.container { max-width: 1280px; margin: 0 auto; padding: 0 1rem; }
.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.text-center { text-align: center; }
.text-right { text-align: right; }
.hidden { display: none; }
.block { display: block; }
.relative { position: relative; }
.absolute { position: absolute; }
.fixed { position: fixed; }
.w-full { width: 100%; }
.h-full { height: 100%; }
.min-h-screen { min-height: 100vh; }
.bg-white { background: white; }
.bg-gray-50 { background: var(--gray-50); }
.text-white { color: white; }
.rounded-lg { border-radius: 0.5rem; }
.rounded-xl { border-radius: 0.75rem; }
.rounded-2xl { border-radius: 1rem; }
.shadow-lg { box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); }
.shadow-xl { box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1); }
.shadow-2xl { box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); }
.border { border: 1px solid var(--border); }
.transition-all { transition: all 0.3s ease; }
.cursor-pointer { cursor: pointer; }

/* Grid System */
.grid { display: grid; }
.gap-2 { gap: 0.5rem; }
.gap-3 { gap: 0.75rem; }
.gap-4 { gap: 1rem; }
.gap-6 { gap: 1.5rem; }
.gap-8 { gap: 2rem; }
.gap-12 { gap: 3rem; }

/* Spacing */
.p-1 { padding: 0.25rem; }
.p-2 { padding: 0.5rem; }
.p-3 { padding: 0.75rem; }
.p-4 { padding: 1rem; }
.p-6 { padding: 1.5rem; }
.p-8 { padding: 2rem; }
.py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.py-4 { padding-top: 1rem; padding-bottom: 1rem; }
.py-8 { padding-top: 2rem; padding-bottom: 2rem; }
.py-12 { padding-top: 3rem; padding-bottom: 3rem; }
.py-16 { padding-top: 4rem; padding-bottom: 4rem; }
.py-20 { padding-top: 5rem; padding-bottom: 5rem; }
.px-2 { padding-left: 0.5rem; padding-right: 0.5rem; }
.px-3 { padding-left: 0.75rem; padding-right: 0.75rem; }
.px-4 { padding-left: 1rem; padding-right: 1rem; }
.px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
.px-8 { padding-left: 2rem; padding-right: 2rem; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-3 { margin-bottom: 0.75rem; }
.mb-4 { margin-bottom: 1rem; }
.mb-6 { margin-bottom: 1.5rem; }
.mb-8 { margin-bottom: 2rem; }
.mb-12 { margin-bottom: 3rem; }
.mb-16 { margin-bottom: 4rem; }
.mt-4 { margin-top: 1rem; }
.mt-6 { margin-top: 1.5rem; }
.mt-8 { margin-top: 2rem; }

 /* Additional utilities */
.text-navy { color: var(--navy-primary); }
.text-navy-secondary { color: var(--navy-secondary); }
.text-gray-600 { color: var(--gray-600); }
.text-gray-700 { color: var(--gray-700); }
.bg-gradient-blue { background: linear-gradient(135deg, var(--blue-500), var(--blue-600)); }
.bg-gradient-green { background: linear-gradient(135deg, var(--green-500), var(--green-600)); }
.bg-gradient-purple { background: linear-gradient(135deg, var(--purple-500), var(--purple-600)); }
.bg-gradient-orange { background: linear-gradient(135deg, var(--orange-500), var(--orange-600)); }
.bg-gradient-navy { background: linear-gradient(135deg, var(--navy-primary), var(--navy-secondary)); }
.font-bold { font-weight: 700; }
.font-semibold { font-weight: 600; }
.font-medium { font-weight: 500; }
.opacity-0 { opacity: 0; }
.opacity-100 { opacity: 1; }


.zeroboder
{
border: 0px !important;
}














.btn-custom {
  border: 0px solid transparent;
  border-radius: 6px;
  padding: 6px 14px;
  margin-left: 5px;
  transition: all .3s ease;
  text-decoration: none;
}

.btn-custom-slide {
  border: 0px solid transparent !important;
  border-radius: 6px !important;
  padding: 15px 20px !important;
  transition: all .3s ease;
  text-decoration: none;
  display: inline-block;
}

/* .btn-custom {
  font-weight: 500;
  padding: 12px 20px;
  transition: all 0.3s ease-in-out;
  border: none;
} */


.btn-outline-dark {
  color: #030741;
  background: #fff;
}
.btn-outline-dark:hover {
  background: #030741;
  color: #fff;
  border-color: #fff;
  box-shadow: 0 4px 8px rgba(0,0,0,.15);
  /* transform: scale(1.05); */
  text-decoration: none;
}

.btn-outline-darkExperts {
  color: #030741;
  background: #fff;
  border: 1px solid #030741;
}

.btn-outline-darkExperts:hover {
  background: #030741;
  color: #fff;
  border: 1px solid #030741;
  box-shadow: 0 4px 8px rgba(0,0,0,.15);
  /* transform: scale(1.05); */
}

.btn-outline-darkcontact {
  background: #030741;
  color: #fff;
  border: 0px solid #030741;
  transform: scale(1.00);
}

.btn-outline-darkcontact:hover {
  background: #030741;
  color: #fff;
  border: 1px solid #030741;
  box-shadow: 0 4px 8px rgba(0,0,0,.15);
  transform: scale(1.03);
  transition: all 0.4s ease-in-out;
}

.btn-outline-greycontact {
  background: #fefefe;
  color: #000000;
  border: 1px solid #030741;
  transform: scale(1.00);
}

.btn-outline-greycontact:hover {
  background: #f2f2f2;
  color: #000000;
  border: 1px solid #858585;
  box-shadow: 0 4px 8px rgba(0, 0, 0, .15);
  transform: scale(1.03);
  transition: all 0.4s ease-in-out;
}

.btn-outline-darkdownload {
  color: #fff;
  background: #030741;
  border: 0px solid #fff;
}

.btn-outline-darkdownload:hover {
  background: #fff;
  color: #030741;
  border: 1px solid #fff;
  box-shadow: 0 4px 8px rgba(0,0,0,.15);
  /* transform: scale(1.05); */
  text-decoration: none;
}


.btn-outline-transparentdark {
  color: #fff;
  /* background: #03074137;
  border: 0px solid #fff; */
  background: #9ba0e837;
  border: 1px solid #fff !important;
}

.btn-outline-transparentdark:hover {
  background: #fff;
  color: #030741;
  border: 1px solid #fff;
  box-shadow: 0 4px 8px rgba(0,0,0,.15);
  /* transform: scale(1.05); */
  text-decoration: none;
}

.btn-outline-redRfooter {
  color: #fff;
  background: linear-gradient(to right, #ce1126, #e63946);
  border: 0px solid #fff;
}

.btn-outline-redRfooter:hover {
  background: linear-gradient(to right, #ce1126, #e63946);
  color: #fcfcfc;
  border: 1px solid #e63946;
  /* box-shadow: 0 4px 8px rgba(255, 9, 9, 0.552); */
  box-shadow: 0 4px 8px #e63946; 
  /* transform: scale(1.05); */
  text-decoration: none;
}

.btn-outline-red-slide {
  color: #fff;
  background: linear-gradient(to right, #ce1126, #e63946);
  border: 0px solid #fff;
  transform: scale(1.0);
}

.btn-outline-red-slide:hover {
  background: linear-gradient(to right, #ce1126, #e63946);
  color: #fcfcfc;
  border: 1px solid #e63946;
  /* box-shadow: 0 4px 8px rgba(255, 9, 9, 0.552); */
  /* box-shadow: 0 4px 8px #e63946;  */
  box-shadow: -2px 8px 4px 0px rgb(0 0 0 / 63%); 
  transform: scale(1.05);
  text-decoration: none;
}

.btn-outline-transparentslide {
  color: #fff;
  /* background: #03074137;
  border: 0px solid #fff; */
  background: #9ba0e837;
  border: 1px solid #fff !important;
}

.btn-outline-transparentslide:hover {
  background: #fff;
  color: #030741;
  border: 1px solid #fff;
  box-shadow: 0 4px 8px rgba(0,0,0,.15);
  /* transform: scale(1.05); */
  text-decoration: none;
}

.btn-outline-warning {
  color: #fff;
  font-weight: bolder;
  background: linear-gradient(to right, #facc15, #f97316);
}

.btn-outline-warning:hover {
  background: linear-gradient(to right, #facc15, #f97316);
  color: #fff;
  font-weight: bolder;
  border-color: #fff;
  box-shadow: 0 4px 8px rgba(197, 139, 3, 0.656);
  /* transform: scale(1.05); */
}

.btn-dark {
  background: #030741;
  color: #fff;
}


.btn-dark:hover { background: #020530; }

.pulse-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  background: linear-gradient(to right, #facc15, #f97316);
  border-radius: 50%;
  animation: pulse 1.5s infinite;
  margin-left: 4px;
}
@keyframes pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.4); opacity: .7; }
}



.liveside
{
    float: left;background-color: color-mix(in oklab, black 20%, #000000a8);text-align: center;border: 0px solid;padding-left: 7px;padding-right: 7px;padding-top:9px;color: red;width: 100%;padding-top: 9px;
}

.blackbglive
{
    background-color: color-mix(in oklab, black 20%, #000000a8);
}


/* border: 1px solid black;transition: 0.5s;transition-duration: 0.5s;border-radius: 30px; */
.packageRA {
  
  border: 0px solid transparent;  /* default border (invisible) */
  transition: all 0.4s ease-in-out; /* smooth animation */
  transform: scale(1);            /* default size */
  border-top-left-radius: 33px;
  border-top-right-radius: 33px;
  border-bottom-left-radius: 33px;
  border-bottom-right-radius: 33px;
  /*box-shadow: 0 4px 6px 6px rgb(0 0 0 / 26%); subtle default shadow */
  box-shadow: 0px 11px 8px 0px rgb(0 0 0 / 26%); /* subtle default shadow */
 
}

/* Hover state */
.packageRA:hover {
  transform: scale(1.05);              /* zoom effect */
  /*border-image: linear-gradient(90deg, black, rgb(145, 144, 144)) 1;  black-white gradient border 
  border-width: 1px;*/
  border-top-left-radius: 33px;
  border-top-right-radius: 33px;
  border-bottom-left-radius: 33px;
  border-bottom-right-radius: 33px;
  border: 3px solid rgb(0 0 0);
  box-shadow: 0 12px 24px rgba(0,0,0,0.25);   /* stronger shadow on hover */
  margin-top: -20px;              /* your inline value */
}

/* border: 1px solid black;transition: 0.5s;transition-duration: 0.5s;border-radius: 30px; */
.packagelifestyleq8 {
  margin-top: -32px;              /* your inline value */
  border: 3px solid #facc15;  /* default border (invisible) */
  transition: all 0.4s ease-in-out; /* smooth animation */
  transform: scale(1);            /* default size */
  border-top-left-radius: 33px;
  border-top-right-radius: 33px;
  border-bottom-left-radius: 33px;
  border-bottom-right-radius: 33px;
  /*box-shadow: 0 4px 6px 6px rgb(0 0 0 / 26%); subtle default shadow */
  box-shadow: 0px 13px 8px 0px rgb(250 186 21 / 31%);  /* subtle default shadow */
}

/* Hover state */
.packagelifestyleq8:hover {
  transform: scale(1.05);              /* zoom effect */
  /*border-image: linear-gradient(90deg, black, rgb(145, 144, 144)) 1;  black-white gradient border 
  border-width: 1px;*/
  border-top-left-radius: 33px;
  border-top-right-radius: 33px;
  border-bottom-left-radius: 33px;
  border-bottom-right-radius: 33px;
  border: 3px solid rgb(0 0 0);
  box-shadow: 0 12px 24px rgba(0,0,0,0.25);  /*  stronger shadow on hover */
}













/* Background Colors */
.bgred { background: linear-gradient(to bottom right, #dc2626, #ef4444); }
.bggreen { background: linear-gradient(to bottom right, #059669, #10b981); }
.bgpurple { background: linear-gradient(to bottom right, #6d28d9, #8b5cf6); }
.bgorange { background: linear-gradient(to bottom right, #f97316, #fb923c); }
.bgyellow { background: linear-gradient(to bottom right, #facc15, #fbbf24); }
.bgindigo { background: linear-gradient(to bottom right, #4f46e5, #6366f1); }

/* Animations */
@keyframes fadeUp {
  0% { opacity: 0; transform: translateY(20px); }
  100% { opacity: 1; transform: translateY(0); }
}
.fade-up {
  animation: fadeUp .8s ease forwards;
}
.fade-up.delay-1 { animation-delay: .2s; }
.fade-up.delay-2 { animation-delay: .4s; }
.fade-up.delay-3 { animation-delay: .6s; }
.fade-up.delay-4 { animation-delay: .8s; }
.fade-up.delay-5 { animation-delay: 1s; }

/* Responsive adjustments */
@media (max-width: 767px) {
  .trusted-value { font-size: 24px; }
  .trusted-heading { font-size: 18px; }
  .trusted-box { padding: 20px 15px; }

}

/* Animated dots */
.Bigdot {
  position: absolute;
  border-radius: 50%;
  opacity: 0.4;
  transition: opacity .3s ease;
}
.top-Bigdotbgred {
  width: 75px; 
  height: 70px;
  background: linear-gradient(to bottom right, #dc2626, #ef4444);
  top: 8px; 
  right: 12px;
}

.top-Bigdotbggreen {
  width: 75px; 
  height: 70px;
  background: linear-gradient(to bottom right, #059669, #10b981);
  top: 8px; 
  right: 12px;
}

.top-Bigdotbgpurple {
  width: 75px; 
  height: 70px;
  background: linear-gradient(to bottom right, #6d28d9, #8b5cf6);
  top: 8px; 
  right: 12px;
}

.top-Bigdotbgorange {
  width: 75px; 
  height: 70px;
  background: linear-gradient(to bottom right, #f97316, #fb923c);
  top: 8px; 
  right: 12px;
}

.top-Bigdotbgyellow {
  width: 75px; 
  height: 70px;
  background: linear-gradient(to bottom right, #facc15, #fbbf24);
  top: 8px; 
  right: 12px;
}

.top-Bigdotbgindigo {
  width: 75px; 
  height: 70px;
  background: linear-gradient(to bottom right, #4f46e5, #6366f1);
  top: 8px; 
  right: 12px;
}






/* Review button */
.review-btn {
  display: inline-block;
  padding: 12px 30px;
  border: 2px solid #030741;
  border-radius: 30px;
  font-weight: 600;
  margin-top: 20px;
  cursor: pointer;
  transition: all .3s ease;
}
.review-btn:hover {
  background: linear-gradient(to right, #030741, #00d1b2);
  color: #fff;
  transform: scale(1.05);
  box-shadow: 0 6px 18px rgba(0,0,0,.2);
}

/* Floating badges */
.badges {
  position: absolute;
  /* background: #fff; */
  background: #030741;
  padding: 8px 12px;
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0,0,0,.15);
  font-size: 12px;
  animation: pulseBadge 2s infinite;
}
.badgeL {
  position: absolute;
  /* background: #fff; */
  background: #ffffff;
  padding: 8px 12px;
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0,0,0,.15);
  font-size: 12px;
  animation: pulseBadge 2s infinite;
}
.latest-review {
  top: -15px;
  right: 15px;
  border-left: 3px solid #00d1b2;
  
}
.customer-since {
  bottom: -15px;
  left: 15px;
  background: #030741;
  color: #fff;
}

/* Animations */
@keyframes pulseBadge {
  0%,100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.05); opacity: .8; }
}





/* Section : Ready to start */
/* Animation wrapper */
              .animated-features {
                animation: fadeSlideUp 0.7s ease forwards;
                animation-delay: 0.5s;
              }
              @keyframes fadeSlideUp {
                from { opacity: 0; transform: translateY(20px); }
                to { opacity: 1; transform: translateY(0); }
              }

              /* Feature box */
              .feature-box {
                display: flex;
                align-items: center;
                gap: 10px;
                transition: transform 0.2s ease;
                margin-bottom: 20px;
              }
              .feature-box:hover {
                transform: scale(1.05);
              }

              /* Circle icon background */
              .feature-icon {
                width: 42px;
                height: 42px;
                border-radius: 50%;
                display: flex;
                align-items: center;
                justify-content: center;
                transition: all 0.2s ease;
              }
              .feature-box:hover .feature-icon {
                box-shadow: 0 4px 8px rgba(0,0,0,0.15);
              }

              /* Text */
              .feature-text {
                font-size: 12px;
                font-weight: 500;
                color: #4b5563;
                transition: color 0.2s ease;
              }
              .feature-box:hover .feature-text {
                color: #1f2937;
              }

              /* Color themes */
              .bg-green { background: #d1fae5; color: #059669; }
              .bg-green:hover { background: #a7f3d0; }

              .bg-red { background: #fee2e2; color: #dc2626; }
              .bg-red:hover { background: #fecaca; }

              .bg-purple { background: #ede9fe; color: #7c3aed; }
              .bg-purple:hover { background: #ddd6fe; }
/* Section : Ready to start */

/* Section : Below Ready to start */

  /* Wrapper animation */
              .animated-buttons {
                display: inline-flex;
                flex-direction: column;
                gap: 15px;
                animation: fadeSlideUp 0.7s ease forwards;
                animation-delay: 0.3s;
              }
              @media (min-width: 768px) {
                .animated-buttons { flex-direction: row; }
              }
              @keyframes fadeSlideUp {
                from { opacity: 0; transform: translateY(20px); }
                to { opacity: 1; transform: translateY(0); }
              }
              
              /* Base button */
              .btn-customnext {
                display: inline-flex;
                align-items: center;
                justify-content: center;
                font-weight: 500;
                border-radius: 8px;
                transition: all 0.3s ease;
                padding: 14px 32px;
                text-decoration: none !important;
              }
              
              /* Gradient button */
              .btn-gradient {
                color: #fff !important;
                background: linear-gradient(to right, #ce1126, #e63946);
                border: 0;
                text-decoration: none;
              }
              .btn-gradient:hover {
                background: linear-gradient(to right, #b01020, #ce1126);
                transform: scale(1.05);
                box-shadow: 0 6px 12px rgba(220, 38, 38, 0.4);
                text-decoration: none;
              }
              .btn-gradient:active {
                background: #9a0b1c;
                text-decoration: none;
              }
              
              /* Outline dark button */
              .btn-outline-dark {
                border: 2px solid #030741;
                color: #030741 !important;
                background: transparent;
              }
              .btn-outline-dark:hover {
                background: linear-gradient(to right, #030741, #041856);
                color: #fff !important;
                transform: scale(1.05);
                box-shadow: 0 6px 12px rgba(3, 7, 65, 0.3);
              }
              .btn-outline-dark:focus {
                outline: none;
                box-shadow: 0 0 0 3px rgba(3,7,65,0.4);
              }

/* Colored icon backgrounds */
.bg-navy { background: linear-gradient(to bottom right, #030741, #041856); }
.bg-green { background: linear-gradient(to bottom right, #22c55e, #15803d); }
.bg-orange { background: linear-gradient(to bottom right, #f97316, #ea580c); }

/* Animated dots */
.dot {
  position: absolute;
  border-radius: 50%;
  opacity: 0;
  transition: opacity .3s ease;
}
.top-dot {
  width: 8px; height: 8px;
  background: #030741;
  top: 15px; right: 15px;
}
.bottom-dot {
  width: 6px; height: 6px;
  background: #3b82f6;
  bottom: 15px; left: 15px;
}
.feature-card:hover .dot { opacity: 1; animation: pulse 1.5s infinite; }

@keyframes pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.5); opacity: .7; }
}

/* Entry animation */
.animated-feature {
  animation: fadeSlideUp 0.7s ease forwards;
  opacity: 0;
}
@keyframes fadeSlideUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

.bg-gradient-circle {
  position: absolute;
  width: 300px; height: 300px;
  border-radius: 50%;
  filter: blur(80px);
}
.bg-gradient-primary {
  /* background: linear-gradient(135deg, #030741, #041856, #052066); */
  /* background: linear-gradient(131deg, oklch(0.3 0.13 259.5), #121dbe, oklch(.623 .214 259.815)); */
  background: linear-gradient(343deg, oklch(0.24 0.03 261.9), #22277b, oklch(.623 .214 259.815));
}

/* ===============================
   Slider Gradient Backgrounds
   =============================== */



/* Deep Tech Blue */
.bg-gradient-tech-blue {
  background: linear-gradient(
    340deg,
    oklch(0.22 0.03 262),
    #1f2a7c,
    oklch(0.65 0.22 259)
  );
}

/* Midnight Purple → Electric Blue */
.bg-gradient-power-purple {
  background: linear-gradient(
    330deg,
    oklch(0.20 0.04 290),
    #4b2fa8,
    oklch(0.70 0.25 250)
  );
}

/* Dark Teal → Neon Cyan */
.bg-gradient-cyber-teal {
  background: linear-gradient(
    345deg,
    oklch(0.18 0.05 200),
    #0f4c75,
    oklch(0.75 0.20 210)
  );
}

/* Carbon Black → Royal Indigo */
.bg-gradient-lux-indigo {
  background: linear-gradient(
    350deg,
    oklch(0.12 0.02 260),
    #2b2f91,
    oklch(0.62 0.18 265)
  );
}

/* Dark Slate → Cyber Blue */
.bg-gradient-engineer {
  background: linear-gradient(
    335deg,
    oklch(0.16 0.03 240),
    #1b3b6f,
    oklch(0.60 0.19 235)
  );
}

/* Optional Overlay for Text Readability */
.bg-gradient-overlay::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.25);
}



/* =========================================
   Luxury Indigo / Premium Dark Gradients
   ========================================= */

/* Lux Indigo – Core */
.bg-gradient-lux-indigo {
  background: linear-gradient(
    350deg,
    oklch(0.12 0.02 260),
    #2b2f91,
    oklch(0.62 0.18 265)
  );
}

/* Deep Royal Indigo */
.bg-gradient-lux-indigo-2 {
  background: linear-gradient(
    340deg,
    oklch(0.10 0.02 255),
    #1f2378,
    oklch(0.58 0.20 270)
  );
}

/* Midnight Sapphire */
.bg-gradient-lux-indigo-3 {
  background: linear-gradient(
    330deg,
    oklch(0.14 0.03 268),
    #283593,
    oklch(0.64 0.19 262)
  );
}

/* Carbon Indigo */
.bg-gradient-lux-indigo-4 {
  background: linear-gradient(
    355deg,
    oklch(0.08 0.01 260),
    #1a1f6b,
    oklch(0.55 0.17 258)
  );
}

/* Royal Ink */
.bg-gradient-lux-indigo-5 {
  background: linear-gradient(
    345deg,
    oklch(0.16 0.03 272),
    #303f9f,
    oklch(0.68 0.21 268)
  );
}

/* Nightfall Blue */
.bg-gradient-lux-indigo-6 {
  background: linear-gradient(
    335deg,
    oklch(0.13 0.04 250),
    #1e2a5a,
    oklch(0.60 0.18 255)
  );
}

/* Velvet Indigo */
.bg-gradient-lux-indigo-7 {
  background: linear-gradient(
    348deg,
    oklch(0.15 0.03 265),
    #2a2d8f,
    oklch(0.66 0.20 270)
  );
}

/* Dark Crown */
.bg-gradient-lux-indigo-8 {
  background: linear-gradient(
    342deg,
    oklch(0.11 0.02 258),
    #20256f,
    oklch(0.57 0.16 262)
  );
}

/* Imperial Blue */
.bg-gradient-lux-indigo-9 {
  background: linear-gradient(
    332deg,
    oklch(0.18 0.04 275),
    #3949ab,
    oklch(0.70 0.22 272)
  );
}

/* Obsidian Indigo */
.bg-gradient-lux-indigo-10 {
  background: linear-gradient(
    360deg,
    oklch(0.06 0.01 260),
    #151a5a,
    oklch(0.52 0.15 258)
  );
}

/* =========================
   Recommended Text Styling
   ========================= */

.text-on-lux {
  color: #f5f7ff;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.45);
}


.text-on-luxfullwhite {
  color: #f5f7ff;
  text-shadow: 0px 3px 20px rgb(236 223 223 / 45%);
}


@keyframes lux-gradient-flow {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

/* Base animated gradient class */
.bg-gradient-lux-animated {
  background-size: 300% 300%;
  animation: lux-gradient-flow 18s ease-in-out infinite;
}

/* =========================================
   Animated Indigo Variations
   ========================================= */

/* Lux Indigo */
.bg-lux-anim-1 {
  background-image: linear-gradient(
    340deg,
    oklch(0.12 0.02 260),
    #2b2f91,
    oklch(0.62 0.18 265),
    #1a1f6b
  );
}

/* Midnight Sapphire */
.bg-lux-anim-2 {
  background-image: linear-gradient(
    330deg,
    oklch(0.10 0.02 255),
    #283593,
    oklch(0.66 0.20 270),
    #1e2a5a
  );
}

/* Royal Ink */
.bg-lux-anim-3 {
  background-image: linear-gradient(
    350deg,
    oklch(0.14 0.03 268),
    #303f9f,
    oklch(0.70 0.22 272),
    #20256f
  );
}

/* Obsidian Indigo */
.bg-lux-anim-4 {
  background-image: linear-gradient(
    360deg,
    oklch(0.06 0.01 260),
    #151a5a,
    oklch(0.55 0.16 258),
    #0f143d
  );
}

/* Velvet Indigo */
.bg-lux-anim-5 {
  background-image: linear-gradient(
    345deg,
    oklch(0.16 0.03 265),
    #2a2d8f,
    oklch(0.68 0.21 270),
    #1b1f73
  );
}

/* =========================================
   Text Safety for Animated Gradients
   ========================================= */

.text-on-lux {
  color: #f5f7ff;
  text-shadow: 0 3px 16px rgba(0, 0, 0, 0.45);
}

/* Optional dark overlay (recommended for sliders) */
.lux-overlay {
  position: relative;
}

.lux-overlay::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.25);
  pointer-events: none;
}


.bg-gradient-white {
  /* background: linear-gradient(135deg, #030741, #041856, #052066); */
  /* background: linear-gradient(131deg, oklch(0.3 0.13 259.5), #121dbe, oklch(.623 .214 259.815)); */
  background: linear-gradient(343deg, oklch(92.2% 0.02964 147.064), #efefef, oklch(66.634% 0.00323 264.698));
}

.bg-gradient-warning {
  background: linear-gradient(135deg, #ffc107, #ff9800, #ffb300);
}

.bg-gradient-badge {
  background: linear-gradient(131deg, oklch(0.3 0.13 259.5), #121dbe, oklch(.623 .214 259.815));
  padding-left: 15px;
  padding-right: 15px;
  padding-top: 10px;
  padding-bottom: 10px;
  border-radius: 72px;
}

.bg-gradient-badgeslider {
  /* background: linear-gradient(165deg, oklch(0.84 0.35 144.53), #0717ff, oklch(0.85 0.2 196.14)); */
  background: linear-gradient(165deg, oklch(0.82 0.15 197.34), #0717ff, oklch(0.85 0.2 196.14));
  padding-left: 15px;
  padding-right: 15px;
  padding-top: 10px;
  padding-bottom: 10px;
  border-radius: 72px;
  font-size: 18px;
  font-weight: bold;
}


.bg-gradient-badgeslidermobile {
  /* background: linear-gradient(165deg, oklch(0.84 0.35 144.53), #0717ff, oklch(0.85 0.2 196.14)); */
  /* background: linear-gradient(165deg, oklch(0.78 0.21 168.4), #17b414, oklch(0.67 0.29 145.7)); */
  /* background: linear-gradient(165deg, oklch(0.69 0.26 35.81 / 0.92), #c69f25, oklch(0.65 0.16 74.74)); */
  background: linear-gradient(165deg, oklch(0.69 0.26 35.66 / 0.92), #9a3e04, oklch(0.65 0.21 44.41));
  padding-left: 15px;
  padding-right: 15px;
  padding-top: 10px;
  padding-bottom: 10px;
  border-radius: 72px;
  font-size: 14px;
  /* font-weight: bold; */
  text-transform: uppercase;
}
.icon-box-packages {
  width: 70px; height: 70px;
  display:flex; align-items:center; justify-content:center;
  /* background: rgba(255,255,255,0.2); */
  background: rgb(180 168 168 / 34%);
  border-radius: 20px;
  backdrop-filter: blur(5px);
  margin: 12px;
}
.check-icon {
  width:28px; height:28px;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  color:#fff;
  background: #4ebd20f7;
}
.pulse { animation: pulse 2s infinite; }
@keyframes pulse { 0%,100%{opacity:.6;} 50%{opacity:1;} }
.animate-bounce { animation: bounce 1.5s infinite; }
@keyframes bounce { 0%,100%{transform:translateY(0);} 50%{transform:translateY(-6px);} }
.hover-scale:hover { transform: scale(1.05); transition: all .3s; }

/* CTA buttons (use your .btn-custom base if present; provided fallback here) */
.analysis-btn, .analysis-btn-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 20px;
  border-radius: 8px;
  font-weight: 600;
  transition: transform .22s ease, box-shadow .22s ease;
  margin: 8px 0;
  width: 100%;
}
.analysis-btn .btn-icon, .analysis-btn-outline .btn-icon {
  width: 14px; height: 14px; margin-right: 8px;
  stroke: #fff; stroke-width: 1.5; fill: none;
}
.btn-dark.analysis-btn {
  background: #030741;
  color: #fff;
  border: 2px solid #030741;
  box-shadow: 0 10px 30px rgba(3,7,65,0.12);
}
.btn-dark.analysis-btn:hover {
  background: #041856;
  transform: translateY(-4px) scale(1.01);
  box-shadow: 0 20px 48px rgba(4,24,86,0.16);
}

/* outline (uses user's .btn-outline-darkExperts if present) */
.analysis-btn-outline {
  background: #fff;
  color: #030741;
  border: 2px solid #030741;
  box-shadow: 0 6px 18px rgba(3,7,65,0.06);
}
.analysis-btn-outline:hover {
  background: linear-gradient(90deg,#030741,#041856);
  color: #fff;
  transform: translateY(-4px) scale(1.01);
  box-shadow: 0 18px 48px rgba(3,7,65,0.14);
}

/* spacing for CTA row on small screens */
.cta-row > .col-xs-12 { margin-bottom: 8px; }

/* --- Animations (custom, not animate.css) --- */
@keyframes fadeUp {
  from { transform: translateY(12px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}
.animate-fade-up {
  opacity: 0;
  transform: translateY(12px);
  animation-name: fadeUp;
  animation-duration: .52s;
  animation-fill-mode: forwards;
  animation-timing-function: cubic-bezier(.2,.9,.25,1);
}

/* small helper to stagger using data-delay attribute (JS-free) */
.feature-item[data-delay],
.animate-fade-up[data-delay] {
  /* default fallback */
  animation-delay: 0s;
}
.animate-fade-up[data-delay="100"] { animation-delay: .10s; }
.animate-fade-up[data-delay="200"] { animation-delay: .18s; }
.animate-fade-up[data-delay="300"] { animation-delay: .26s; }
.animate-fade-up[data-delay="400"] { animation-delay: .34s; }

/* You can apply data-delay attributes on the elements to stagger more precisely. */

/* small utilities */
.vertical-center { display: flex; align-items: center; }
@media (max-width: 767px) {
  .expert-analysis-section { padding: 30px 0; }
  .analysis-title { font-size: 22px; }
  .feature-inner { gap: 10px; }
  .feature-icon { min-width: 44px; min-height: 44px; }
  .analysis-deco { display: none; } /* hide heavy decor on phones */
  .live-indicator { top: 10px; left: 10px; padding: 4px 8px; font-size: 11px; }
  .cta-row .col-sm-6 { margin-bottom: 8px; }

  /* packages */
  .zp
  {
    padding: 0px !important;
  }


}

@keyframes shake {
  0% { transform: translate(0, 0) rotate(0deg); }
  10% { transform: translate(-5px, 0) rotate(-1deg); }
  20% { transform: translate(5px, 0) rotate(1deg); }
  30% { transform: translate(-5px, 0) rotate(-1deg); }
  40% { transform: translate(5px, 0) rotate(1deg); }
  50% { transform: translate(-5px, 0) rotate(-1deg); }
  60% { transform: translate(5px, 0) rotate(1deg); }
  70% { transform: translate(-5px, 0) rotate(-1deg); }
  80% { transform: translate(5px, 0) rotate(1deg); }
  90% { transform: translate(-5px, 0) rotate(-1deg); }
  100% { transform: translate(0, 0) rotate(0deg); }
}

@keyframes smooth-rotate {
  0%   { transform: rotate(0deg); }
  25%  { transform: rotate(-3deg); } /* tilt left */
  50%  { transform: rotate(3deg); }  /* tilt right */
  /*75%  { transform: rotate(-10deg); }  tilt left again */
   /*100% { transform: rotate(0deg); }   back to center */
}

/* Container header */
.RecommendedSection-title {
  font-size: 4.0rem;
  font-weight: bold;
  margin-bottom: 0.5rem;
}

.RecommendedSection-subtitle {
  font-size: 2rem;
  color: #6b7280;
  padding-bottom: 20px;
}

/* Circle Icon */
.circle-icon-xs {
  width: 64px; height: 64px;
  border-radius: 50%;
  background-color: #e31313;
  display: flex;
  align-items: center;
  justify-content: center;
}


/* Circle Icon */
.circle-icon {
  width: 64px; height: 64px;
  border-radius: 50%;
  background-color: #1d4ed8;
  display: flex;
  align-items: center;
  justify-content: center;
}
.centerblock {
    /* display: block; */
    margin-right: auto !important;
    margin-left: auto !important;
}

.courserecomneded-gradient-brand {
  background: -webkit-linear-gradient(45deg, #030741, #0f52ba);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}


/* Responsive adjustments */
@media (max-width: 767px) {

  .RecommendedSection-title {
  font-size: 1.7rem;
  font-weight: bold;
  margin-bottom: 0.5rem;
}

  .RecommendedSection-subtitle {
    font-size: 1.4rem;
    color: #6b7280;
    padding-bottom: 0px;
  }
}

/* Card container replacement */
.course-card {
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    /* box-shadow: 0 4px 12px rgba(0,0,0,0.1); */
    box-shadow: 1px 13px 12px 2px rgba(0, 0, 0, 0.1);
    transition: all 0.5s;
    /* margin-bottom: 30px; */
    transform-style: preserve-3d;
    border: 1px solid #365ce08a;
    /* transform: scale(1.0); */
    
}
.course-card:hover {
    box-shadow: 0 12px 25px rgba(0,0,0,0.25);
    text-shadow: 0 0 black;
    /* border-top: 2px solid #365be0b7;
    border-right: 2px solid #365be0b7;
    border-left: 2px solid #365be0b7;
    border-bottom: 1px solid #365be0b7; */
    animation: smooth-rotate 1s ease-in-out;
    
}

/* Tilt effect */
.course-card.tilt:hover {
    transform: rotateX(3deg) rotateY(3deg) scale(1.0);
}

/* Image section */
.course-card .course-image {
    position: relative;
    overflow: hidden;
}
.course-card .course-image img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    transition: transform 0.7s;
}
.course-card:hover .course-image img {
    transform: scale(1.1);
}

.course-card .course-image .overlay {
  position: absolute; top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0,0,0,0.5);
  opacity: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  /* transition: opacity 0.5s; */
}

.course-card .course-image:hover .overlay { opacity: 1; text-shadow: 0 0 black;}

/* Badges */
.badge-left, .badge-right {
  position: absolute;
  top: 10px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  
}
.badge-left { left: 10px; }
.badge-right { right: 10px;  }
.badge-free { background: #16a34a; color: #fff; padding: 2px 6px; border-radius: 4px; font-size: 0.75rem; }
.badgepremiumcourses { background: #dc2626; color: #fff; padding: 2px 6px; border-radius: 4px; font-size: 0.75rem; margin: 0px; }
.badge-popular { background: #f97316; color: #fff; padding: 2px 6px; border-radius: 4px; font-size: 0.75rem; }


.badge-left-xs, .badge-right-xs {
  position: absolute;
  top: 10px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  z-index: 1;
  opacity: 1;
  
}
.badge-left-xs { left: 10px; }
.badge-right-xs { right: 24px;  }
.badge-free-xs { background: #16a34a; color: #fff; padding: 2px 10px; border-radius: 4px; font-size: 1.35rem; }
.badge-premium-xs { background: #dc2626; color: #fff; padding: 2px 10px; border-radius: 4px; font-size: 1.35rem; margin: 0px; }
.badge-popular-xs { background: #f97316; color: #fff; padding: 2px 10px; border-radius: 4px; font-size: 1.35rem; }

/* Badges */
.badge-left-md, .badge-right-md {
  position: absolute;
  top: 10px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  
}
.badge-left-md { left: 10px; }
.badge-right-md { right: 10px;  }
.badge-free-md { background: #16a34a; color: #fff; padding: 2px 6px; border-radius: 4px; font-size: 0.75rem; }
.badge-premium-md { background: #dc2626; color: #fff; padding: 2px 6px; border-radius: 4px; font-size: 0.75rem; margin: 0px; }
.badge-popular-md { background: #f97316; color: #fff; padding: 2px 6px; border-radius: 4px; font-size: 0.75rem; }


/* Slider for Course */

.hero-section {
      position: relative;
      height: 600px;
      /* background: linear-gradient(to bottom right, #030741, #1e40af); */
      background: linear-gradient(to bottom right, #5e97cf, #0673df);
      overflow: hidden;
      color: #fff;
    }

  .slider-pause-overlay {
    position: absolute;
    inset: 0;
    /* display: flex; */
    align-items: left;
    justify-content: center;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.25s ease;
    z-index: 9;
  }

  .slider-pause-overlay.show {
     opacity: 1;
   } 

  .slider-pause-overlay i {
    font-size: 15px;
    color: #fff;
    /* background: rgba(0, 0, 0, 0.45); */
    background: rgb(248 248 248 / 45%);
    padding: 5px;
    border-radius: 50%;
    backdrop-filter: blur(6px);
  }

  /* show only on hover */
  .hero-section:hover .slider-pause-overlay {
    opacity: 1;
  }


    .hero-slide {
      position: absolute;
      inset: 0;
      opacity: 0;
      transition: opacity 1s ease, transform 1s ease;
      pointer-events: none;
    }
    .hero-slide.active {
      opacity: 1;
      pointer-events: auto;
      transform: translateX(0);
    }
    .hero-slide.prev {
      transform: translateX(-50px);
    }
    .hero-slide.next {
      transform: translateX(50px);
    }

    .hero-section::before {
      content: "";
      /* position: absolute; */
      inset: 0;
      /* background: url('images/stock.jpg') center/cover no-repeat; */
      opacity: 0.5;
      z-index: 0;
    }

    .hero-section::after {
      content: "";
      /* position: absolute; */
      inset: 0;
      /* background: linear-gradient(to right, rgba(3,7,65,0.9), rgba(3,7,65,0.7), transparent); */
      background: linear-gradient(to right, rgb(3 7 65 / 11%), rgb(3 7 65 / 8%), #cbc8c800); 
      /* background: linear-gradient(to right, rgba(3,7,65,0.85), rgba(3,7,65,0.6), transparent);  */
      z-index: 1;
    }

    .hero-contentcourse {
      position: relative;
      z-index: 2;
      height: 100%;
      /* display: flex; */
      align-items: center;
      padding: 60px 15px;
    }
    .hero-left { max-width: 650px; }
    .badge-custom {
      display: inline-flex;
      align-items: center;
      background: #dc2626;
      color: #fff;
      border-radius: 6px;
      padding: 6px 12px;
      font-weight: 500;
      font-size: 13px;
      margin-bottom: 15px;
    }
    .hero-title {
      font-size: 35px;
      font-weight: 700;
      margin-bottom: 20px;
      animation: fadeInUp 1s ease;
    }
    .hero-titleSlider {
      font-size: 35px;
      font-weight: 700;
      margin-bottom: 10px;
      animation: fadeInUp 1s ease;
      margin-top: 20px;
    }

    
    .hero-titleSlidermobile {
      font-size: 20px;
      font-weight: 700;
      margin-bottom: 10px;
      animation: fadeInUp 1s ease;
      margin-top: 20px;
      display: inherit;
    }

    .hero-text {
      color: #bfdbfe;
      font-size: 17px;
      line-height: 1.6;
      margin-bottom: 30px;
    }
    .stats { margin-bottom: 30px; }
    .stats .col-xs-4 { text-align: center; }
    .stats-number {
      color: #f87171;
      font-size: 26px;
      font-weight: bold;
    }
    .stats-label { color: #cbd5e1; text-transform: capitalize; }
    .btn-red {
      background: #dc2626;
      color: white;
      padding: 10px 25px;
      border-radius: 8px;
      font-size: 16px;
      border: none;
      transition: all 0.3s ease;
      box-shadow: 0 3px 10px rgba(0,0,0,0.3);
    }
    .btn-red:hover {
      background: #b91c1c;
      transform: translateY(-2px);
      box-shadow: 0 4px 14px rgba(0,0,0,0.4);
    }
    .btn-outline {
      background: rgba(255,255,255,0.1);
      border: 1px solid rgba(255,255,255,0.5);
      color: #fff;
      padding: 10px 25px;
      border-radius: 8px;
      font-size: 16px;
      transition: all 0.3s ease;
    }
    .btn-outline:hover {
      background: rgba(255,255,255,0.15);
      border-color: #fff;
    }
    .hero-right {
      background: rgba(255,255,255,0.1);
      border: 1px solid rgba(255,255,255,0.2);
      border-radius: 20px;
      padding: 20px;
      backdrop-filter: blur(10px);
      animation: fadeInRight 1s ease;
    }
    .live-dot {
      width: 10px;
      height: 10px;
      background: #ef4444;
      border-radius: 50%;
      animation: pulse 1.5s infinite;
      display: inline-block;
      margin-right: 8px;
    }
    @keyframes pulse {
      0%, 100% { opacity: 0.5; transform: scale(1); }
      50% { opacity: 1; transform: scale(1.3); }
    }
    .pair-box {
      background: rgba(255,255,255,0.05);
      border-radius: 12px;
      padding: 15px;
      margin-top: 15px;
      text-align: center;
    }
    .pair-box .gain { color: #4ade80; font-weight: bold; font-size: 18px; }
    .pair-box .loss { color: #f87171; font-weight: bold; font-size: 18px; }
    .pair-box small { color: rgba(255,255,255,0.7); }

    .hero-controls {
      position: absolute;
      bottom: 20px;
      left: 50%;
      transform: translateX(-50%);
      z-index: 3;
      display: flex;
      align-items: center;
      gap: 10px;
    }
    .control-btn {
      background: rgba(255,255,255,0.1);
      border: 1px solid rgba(255,255,255,0.1);
      color: #fff;
      padding: 6px 10px;
      border-radius: 8px;
      transition: all 0.2s;
    }
    .control-btn:hover { background: rgba(255,255,255,0.2); }
    .dotnav {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: rgba(255,255,255,0.4);
      transition: all 0.3s ease;
    }
    .dotnav.active {
      background: #ef4444;
      transform: scale(1.3);
    }


    @keyframes fadeInUp {
      from { opacity: 0; transform: translateY(30px); }
      to { opacity: 1; transform: translateY(0); }
    }
    @keyframes fadeInRight {
      from { opacity: 0; transform: translateX(30px); }
      to { opacity: 1; transform: translateX(0); }
    }

    /* Responsive adjustments */
    @media (max-width: 767px) {

      .hero-contentcourse {
        position: relative;
        z-index: 2;
        height: 100%;
        /* display: flex; */
        align-items: center;
        padding: 0px 0px;
      }

      .hero-contentslider {
        position: relative;
        z-index: 2;
        height: 100%;
        /* display: flex; */
        align-items: center;
        padding: 0px 0px;
      }

      .hero-title
      {
        font-size: 18px;
      }

      .btn-outline-red-slide
      {
        width: 100%;
        margin-bottom: 10px;
        padding: 8px 28px !important;
      }

      .btn-outline-transparentslide
      {
        width: 100%;
        margin-bottom: 10px;
        padding: 8px 28px !important;
      }


    }


    /* All Courses */

    .fade-transition {
      transition: opacity 0.3s ease-in-out;
    }

    .hidden-view {
        opacity: 0;
        visibility: hidden;
        pointer-events: none; /* <--- FIXED: Prevents click, hover, tab */
        height: 0;
        overflow: hidden;
        display: none;
    }

    .toggle-btn {
  background: linear-gradient(90deg, #030741, #041856);
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 10px 18px;
  font-size: 14px;
  font-weight: 600;
  transition: all 0.3s ease;
}
.toggle-btn:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 8px rgba(3,7,65,0.3);
}
.toggle-btn.active {
  background: linear-gradient(90deg, #facc15, #f97316);
  color: #030741;
}

/* Badges */
.badge-left-mdall, .badge-right-mdall {
  position: absolute;
  top: 10px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  
}
.badge-left-mdall { left: 10px; }
.badge-right-mdall { right: 10px;  }
.badge-free-mdall { background: #16a34a; color: #fff; padding: 2px 6px; border-radius: 4px; font-size: 0.75rem; }
.badge-premium-mdall { background: #dc2626; color: #fff; padding: 2px 6px; border-radius: 4px; font-size: 0.75rem; margin: 0px; }
.badge-popular-mdall { background: #f97316; color: #fff; padding: 2px 6px; border-radius: 4px; font-size: 0.75rem; }


.btn-join-mdall {
    background-color: #030741;
    color: #fff;
    border-radius: 8px;
    padding: 5px 12px;
    font-size: 13px;
    font-weight: bold;
    transition: all 0.3s;
}
.btn-join-mdall:hover {
    background-color: #050b8c;
    transform: translateY(-2px);
    /* box-shadow: 0 5px 15px rgba(0,0,0,0.2); */
}




/* SLider Deals  */

.deal-badge {
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 13px;
  display: inline-block;
  margin-bottom: 10px;
}
.deal-badge.wow { background:#ff1744; color:#fff; }
.deal-badge.accessory { background:#3f51b5; color:#fff; }
.deal-badge.repair { background:#009688; color:#fff; }

.deal-table {
  background: rgba(255,255,255,0.08);
  border-radius: 14px;
  margin: 14px 0;
}
.deal-table .row-item {
  display:flex;
  justify-content:space-between;
  padding:10px 14px;
  border-bottom:1px solid rgba(255,255,255,.12);
}
.deal-table .row-item span { color:#bbb; }
.deal-table .row-item b { color:#fff; }

.deal-image {
  max-height: 360px;
  width:auto;
}
@media(max-width:768px){
  .deal-image { max-height:280px; }

  .hero-section 
    {
      position: relative;
      height: 700px;
      /* background: linear-gradient(to bottom right, #030741, #1e40af); */
      background: linear-gradient(to bottom right, #5e97cf, #0673df);
      overflow: hidden;
      color: #fff;
    }
}

@media(max-width:360px){
  .deal-image { max-height:280px; }

  .hero-section {
      position: relative;
      height: 600px;
      /* background: linear-gradient(to bottom right, #030741, #1e40af); */
      background: linear-gradient(to bottom right, #5e97cf, #0673df);
      overflow: hidden;
      color: #fff;
    }

    
    .hero-titleSlidermobile {
      font-size: 16px;
      font-weight: 600;
      margin-bottom: 10px;
      animation: fadeInUp 1s ease;
      margin-top: 5px;
      display: inherit;
    }

    .hero-text {
      color: #bfdbfe;
      font-size: 17px;
      line-height: 1.6;
      margin-bottom: 30px;
    }

    .bg-gradient-badgeslidermobile {
      /* background: linear-gradient(165deg, oklch(0.84 0.35 144.53), #0717ff, oklch(0.85 0.2 196.14)); */
      /* background: linear-gradient(165deg, oklch(0.78 0.21 168.4), #17b414, oklch(0.67 0.29 145.7)); */
      /* background: linear-gradient(165deg, oklch(0.69 0.26 35.81 / 0.92), #c69f25, oklch(0.65 0.16 74.74)); */
      /* background: linear-gradient(165deg, oklch(0.69 0.26 35.66 / 0.92), #9a3e04, oklch(0.65 0.21 44.41)); */
      background: linear-gradient(165deg, rgba(253, 9, 50, 0.92), rgb(178, 3, 38), rgb(242, 5, 52)); 
      /* background-color: rgba(243, 28, 28, 0.918); */
      padding-left: 15px;
      padding-right: 15px;
      padding-top: 10px;
      padding-bottom: 10px;
      border-radius: 72px;
      font-size: 14px;
      /* font-weight: bold; */
      text-transform: uppercase;
    }
}
.deal-counter {
  font-size:14px;
  font-weight:600;
  margin-top:10px;
  color:#ffeb3b;
}