/* styles.css */

/* ------------------------------
   1. Default (Light) Theme
   ------------------------------ */
body {
  background-color: #f4f3ff;
  color: #17013b;
  font-family: 'Poppins', sans-serif;
  /* your default styling */
  max-width:100%;
}

h1, h2, h3 {
  font-family: 'Poppins', sans-serif;
  font-weight: 700; /* if you included wght@700 */
}

/* Navbar default styling */
.navbar {
background: rgb(37,0,98) !important;
background: -moz-linear-gradient(105deg, rgba(223,206,251,1) 34%, rgba(121,117,231,1) 100%);
background: -webkit-linear-gradient(105deg, rgba(223,206,251,1) 34%, rgba(121,117,231,1) 100%);
background: linear-gradient(105deg, rgba(223,206,251,1) 34%, rgba(121,117,231,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#dfcefb",endColorstr="#7975e7",GradientType=1);
color: #333;
padding:0px;
}

/* Cards, etc. default */
.card {
  background-color: #fff;
  color: #333;
}

/* Buttons default */
.btn {
  /* let bootstrap handle base, or add your own */
}

/* Example: form-control default */
.form-control {
  background-color: #fff;
  color: #333;
}

/* etc. for headings, links, etc. */

/* ------------------------------
   2. Dark Mode Overrides
   ------------------------------ */
body.dark-mode {
  background-color: #0d0121 !important;
  color: #ddd; /* lighter text on dark bg */
}



/* Navbar in dark mode */
body.dark-mode .navbar {
  background: rgb(37,0,98) !important;
background: -moz-linear-gradient(105deg, rgba(37,0,98,1) 34%, rgba(67,63,175,1) 100%);
background: -webkit-linear-gradient(105deg, rgba(37,0,98,1) 34%, rgba(67,63,175,1) 100%);
background: linear-gradient(105deg, rgba(37,0,98,1) 34%, rgba(67,63,175,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#250062",endColorstr="#433faf",GradientType=1);
  border-bottom: 1px solid #333; /* subtle border */
}
body.dark-mode .navbar .navbar-brand,
body.dark-mode .navbar .nav-link {
  color: #ddd; /* override bootstrap's .text-dark or .text-light */
}

.logoX {
    width: 60px; 
    height:60px; 
    margin:0 auto; 
    border-radius:50px;
    background-color:#250062;
    text-align: center;
     position: absolute;
  top: -30px;       /* adjust to place it higher or lower */
  left: 50%;
  transform: translateX(-50%);
  z-index: 999; 
}
.letterXC {
	font-family: 'Poppins', sans-serif;
	font-size: 40px;
	background: rgb(159,152,254);
	background: -moz-linear-gradient(87deg, rgba(159,152,254,1) 0%, rgba(41,41,214,1) 100%);
	background: -webkit-linear-gradient(87deg, rgba(159,152,254,1) 0%, rgba(41,41,214,1) 100%);
	background: linear-gradient(87deg, rgba(159,152,254,1) 0%, rgba(41,41,214,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#9f98fe",endColorstr="#2929d6",GradientType=1); 	
	-webkit-background-clip: text;
  	-webkit-text-fill-color: transparent;
  	text-decoration:none;
  	font-weight: 700;
  	
}

.login-card {
  position: relative; /* or .card-body if you prefer */
}

/* Cards in dark mode */
body.dark-mode .card {
  background-color: #17003d !important;
  color: #ddd;
  border: none; /* remove borders or use a subtle #444 */
}

body.dark-mode .card-header {background-color: rgb(37 0 98);}

/* Buttons in dark mode (use .btn-light => .btn-dark or your preference) */
body.dark-mode .btn.btn-light {
  background-color: #12012f !important;
  color: #eee;
  border: 1px solid #555;
}
/* If you want to override all .btn classes in dark mode, do something like: */
body.dark-mode .btn {
  /* general overrides if needed */
}

/* Form controls in dark mode */
body.dark-mode .form-control {
  background-color: #333;
  color: #ccc;
  border: 1px solid #444;
}

/* Alerts in dark mode */
body.dark-mode .alert {
  background-color: #333;
  color: #eee;
  border: 1px solid #555;
}

/* Tables, list groups, etc. as needed */
body.dark-mode table {
  background-color: #333;
  color: #eee;
}
body.dark-mode .list-group-item {
  background-color: #12012f !important;
  color: #eee;
  border-color: #444;
}

/* Additional overrides for your specific components */


.logo {
    font-size: 35px;
    font-weight: bold;
}

.letterX {
	font-family: 'Poppins', sans-serif;
	font-size: 40px;
	background: rgb(159,152,254);
	background: -moz-linear-gradient(87deg, rgba(159,152,254,1) 0%, rgba(41,41,214,1) 100%);
	background: -webkit-linear-gradient(87deg, rgba(159,152,254,1) 0%, rgba(41,41,214,1) 100%);
	background: linear-gradient(87deg, rgba(159,152,254,1) 0%, rgba(41,41,214,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#9f98fe",endColorstr="#2929d6",GradientType=1); 	
	-webkit-background-clip: text;
  	-webkit-text-fill-color: transparent;
}

.card-header-self {background: rgb(37, 0, 98)}

footer {background-color: rgb(23 2 57) !important; border-top: 1px solid #e7e0ed; color:#fff;}

/* 
   3. The container that holds the register card
   Similar to .login-container
*/
.register-container {
  min-height: 70vh;
  width: 100%;
  padding: 1rem;
  box-sizing: border-box;
  margin-top: 1.5rem;
}

/* 
   4. The card styling 
*/
.register-card {
  width: 100%;
  max-width: 400px; /* limit width for a clean look */
  border: none;
  border-radius: 25px;
/* border:1px solid #dbcbf7;*/
  transform: none !important;
}

/* 
   5. Card body 
*/
.register-card .card-body {
  padding: 2rem;
  background-color: #fff;
  border-radius: 25px;
}

/* 
   6. Title styling 
*/
.register-card .card-title {
  font-weight: 600;
  color: #250062;
  margin-top: 5px;
}

/* 
   7. Form controls 
*/
.form-label {
  font-size: 0.9rem;
  color: #555;
}

.form-control {
  border-radius: 10px;
}

/* 
   8. The register button 
*/
.btn-primary {
  border-radius: 10px;
  font-weight: 600;
  background-color: #6846ff;
  border-color:#6846ff;
}

.btn-primary:hover {
  border-radius: 10px;
  font-weight: 600;
  background-color: #250062;
  border-color:#250062;
}

.btn-primary-header {
  border-radius: 10px;
  font-weight: 600;
  background-color: #f5bc42;
  border-color:#6846ff;
  
}

.btn-primary-header a {color: #250062;}

.btn-primary-header:hover {
  border-radius: 10px;
  font-weight: 600;
  background-color: #f59e42;
  border-color:#f59e42;
}

.btn-primary-header a:hover {color: #250062 !important;}

body .dark-mode .btn-primary-header a {color: #250062 !important;}
body .dark-mode .btn-primary-header a:hover {color: #250062 !important;}

.ms-2 {color: #250062;border-color:#250062;}

.ms-2:hover {background-color: #250062;border-color:#6846ff;}

/* 
   9. Link styling 
*/
.register-card a.text-decoration-none:hover {
  text-decoration: underline;
}


/* The container that holds the login card
   We rely on Bootstrap's .d-flex, .justify-content-center, .align-items-center 
   in login.php, but let's ensure it spans full height. */
.login-container {
  min-height: 70vh; /* fill vertical space */
  width: 100%;
  padding: 1rem;
  box-sizing: border-box;
}

/* Additional card styling for the login form */
.login-card {
  width: 100%;
  max-width: 400px; /* limit card width for a cleaner look */
  border: none;     /* let the shadow stand out */
  border-radius: 25px; /* slightly rounded corners */
  
}

.login-card:hover {transform: none !important;}
.question-card:hover {transform: none !important;}
.selfassessment {transform: none !important;}

/* Card body specifics */
.login-card .card-body {
  padding: 2rem;
  background-color: #fff; /* White card on gradient background for contrast */
  border-radius: 25px;
  /*border:1px solid #dbcbf7;*/

}

/* Heading style for the card */
.login-card .card-title {
  font-weight: 600;
  color: #250062;
  margin-top: 5px;
}

/* Style the form labels and inputs */
.form-label {
  font-size: 0.9rem;
  color: #555;
}




/* Subtle hover effect for the link to register */
.login-card a.text-decoration-none:hover {
  text-decoration: underline;
}
@media (min-width: 1400px) {
    .container-fluid {
        max-width: 1320px;
    }
}

@media (max-width: 1200px) {
    .container-fluid {
        max-width: 1140px;
    }
}

@media (max-width: 768px) {
    .container-fluid {
        max-width: 100%;
    }
}
@media (max-width: 576px) {
    .container-fluid {
        max-width: 100%;
    }
}

/* -------------------------
   1. Hero Section
------------------------- */

/* A container around the top row with left content & right image */
.hero-section {
  margin-top: 2rem; /* or as you like */
}

/* Left column in hero */
.hero-left h1 {
  font-size: 2.5rem;
  color: #250062; /* default text color for headings in light mode */
  margin-bottom: 1rem;
}

.hero-left p.lead {
  font-size: 1.1rem;
  color: #555;
  margin-bottom: 1rem;
}

.hero-left p {
  color: #555;
  line-height: 1.5;
}

/* Right column in hero - you can refine if needed */
.hero-right img {
  max-width: 100%;
  height: auto;
  border-radius: 6px;
}

/* -------------------------
   2. "Why Choose Us" Section
------------------------- */
.section-why-choose {
  background-color: #f9f9f9; /* subtle background */
}

.section-why-choose h2 {
  color: #250062;
  margin-bottom: 1rem;
}

.section-why-choose p.text-muted {
  color: #000;
  margin-bottom: 2rem;
}


.section-why-choose .icon-box {
  /* If you want to style each column container */
  margin-bottom: 2rem;
}

.section-why-choose .icon-box i {
  color: #007bff; /* example icon color in light mode */
  margin-bottom: 0.5rem;
}

/* -------------------------
   3. "How It Works" Section
------------------------- */
.section-how-flow {
  background-color: #ffffff; /* or keep same as body if you want no difference */
}

.section-how-flow h2 {
  color: #250062;
  margin-bottom: 1rem;
}

.section-how-flow p.text-muted {
  color: #666;
  margin-bottom: 2rem;
}

/* Step badges, e.g. .badge.bg-primary */
.section-how-flow .badge {
  font-size: 1rem;
}

/* Column styling for steps, if needed */
.section-how-flow .col-md-3 {
  margin-bottom: 2rem;
}

/* -------------------------
   4. "What Paying User Gets"
------------------------- */
.section-what-get {
  background-color: #f4f3ff; /* alternate background color */
}

.section-what-get h2 {
  color: #250062;
  margin-bottom: 1rem;
}

.section-what-get p.text-muted {
  color: #666;
  margin-bottom: 2rem;
}

/* If you have icons inside .section-what-get columns */
.section-what-get i {
  color: #28a745; /* for example, a green color for icons */
  margin-bottom: 0.5rem;
}

/* Column styling in the row */
.section-what-get .col-md-4 {
  margin-bottom: 2rem;
}
/* 
  When body has .dark-mode, override backgrounds, text, etc. 
  We'll assume .dark-mode is applied to <body>, so we prefix all overrides with body.dark-mode
*/

/* Hero overrides */
body.dark-mode .hero-left h1 {
  color: #eee;
}
body.dark-mode .hero-left p.lead,
body.dark-mode .hero-left p {
  color: #bbb;
}
body.dark-mode .hero-section {
  background-color: transparent; /* if you want a darker hero background */
}

/* "Why Choose Us" dark mode overrides */
body.dark-mode .section-why-choose {
  background-color: #2a2a2a;
}

body.dark-mode .section-why-choose h2 {
  color: #ddd;
}
body.dark-mode .section-why-choose p.text-muted {
  color: #fff !important;
}
body.dark-mode .section-why-choose .icon-box i {
  color: #66b2ff; /* a lighter or different color for icons in dark mode */
}

/* "How It Works" dark mode overrides */
body.dark-mode .section-how-flow {
  background-color: #1f1f1f;
}

body.dark-mode .section-how-flow h2 {
  color: #ddd;
}
body.dark-mode .section-how-flow p.text-muted {
  color: #fff !important;
}
body.dark-mode .section-how-flow .badge.bg-primary {
  background-color: #444 !important; /* override bootstrap's .bg-primary if you want */
  color: #fff !important;
}

/* "What Paying User Gets" dark mode overrides */
body.dark-mode .section-what-get {
  background-color: #2a2a2a;
}

body.dark-mode .section-what-get h2 {
  color: #ddd;
}
body.dark-mode .section-what-get p.text-muted {
  color: #fff!important;
}
body.dark-mode .section-what-get i {
  color: #6dd58c; /* e.g. a pastel green in dark mode */
}

/* Additional text or link overrides */
body.dark-mode a {
  color: #fff;
}
body.dark-mode a:hover {
  color: #fff;
}
body, body * {
  transition: background-color 0.3s, color 0.3s;
}

/* Example: color-coded card background in light mode */
.why-card {
  background-color: #f4f3ff; /* a light pastel color, for instance */
  border: 2px solid #e5e3f9;
  padding:40px;/* remove card border if you'd like */
  border-radius: 25px !important;
}

.why-card-d {
  background-color: #250062; /* a light pastel color, for instance */
  border: 2px solid #452974;
  padding:40px;/* remove card border if you'd like */
  border-radius: 25px !important;
  color: #fff;
}

/* If you want each card to have a distinct color, you can do variations:
.why-card:nth-child(1) { background-color: #f8d7da; } 
.why-card:nth-child(2) { background-color: #d1ecf1; }
... 
*/

/* Adjust text color inside the card if needed */
.why-card .card-title {
  color: #333;
  margin-bottom: 0.75rem;
  font-size:24px;
  font-weight:600;
}
.why-card .card-text {
  color: #555;
}

/* Adjust text color inside the card if needed */
.why-card-d .card-title {
  color: #fff;
  margin-bottom: 0.75rem;
  font-size:24px;
  font-weight:600;
}


/* Icon size */
.icon-size {
  font-size: 3rem;
  color: #6846ff; /* or your own brand color */
}

/* For a smoother or bigger rounding, override .rounded-3 if you like:
.rounded-3 {
  border-radius: 1rem !important; 
}
*/

/* Dark Mode Overrides */
body.dark-mode .why-card {
  background-color: #333; /* a darker background */
}
body.dark-mode .why-card .card-title,
body.dark-mode .why-card .card-text {
  color: #ddd;
}
body.dark-mode .icon-size {
  color: #66b2ff;
}

.nav-item-signup {background-color:orange;border-radius: 10px;color: #fff}
.nav-item-signup a {color:#250062;}


#typewriter-heading {
    display: inline-block; /* Ensure the cursor stays at the end of the text */
    min-height: 24px;
    border-right: 2px solid #000; /* Cursor style */
    white-space: nowrap; /* Prevent text from wrapping */
    overflow: hidden; /* Hide overflow */
    animation: blinkCursor 0.75s step-end infinite; /* Blinking animation */
}

@keyframes blinkCursor {
    from, to {
        border-right-color: transparent;
    }
    50% {
        border-right-color: #000;
    }
}

.family-vs-gambling-section img {
  max-width: 100%;
  height: auto;
}

/* If you want a subtle box-shadow around images */
.family-vs-gambling-section img {
  
}

.family-vs-gambling-section h3 {
  font-weight: 700;
  margin-bottom: 1rem;
  margin-top:0.5rem;
  color:#250062;
}

.family-vs-gambling-section .list-unstyled li {
  margin-bottom: 0.5rem;
  font-size: 1rem;
}
body.dark-mode .family-vs-gambling-section img {
  
}

body.dark-mode .family-vs-gambling-section h3 {
  color: #ddd;
}

body.dark-mode .family-vs-gambling-section .list-unstyled li {
  color: #ccc;
}
@media (max-width: 768px) {
    .hero-left h5#typewriter-heading {
        min-height: 30px;
        height: auto;
        display: block;
        overflow: hidden;
    }
}

@media (min-width: 769px) {
    .hero-left h5#typewriter-heading {
        min-height: 24px;
        display: block;
    }
}
.step-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  background: #fff;
}

.step-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.progress-bar {
  transition: width 0.5s ease;
}
.benefit-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  background: #fff;
}

.benefit-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}
.progress-bar {
  transition: width 0.5s ease;
}

.card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card:hover {
  transform: translateY(-10px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}
.self {box-shadow: none !important; transform: none !important;}
/* In your CSS file or <style> tag */
.self .card-header { background: #d1c2eb !important; color:#17013b; }
.addiction-card .card-header { background: #dc3545; color: white; }
.modules-card .card-header { background: #0d6efd; color: white; }
.badges-card .card-header { background: #ffc107; color: black; }
.streak-card .card-header { background: #198754; color: white; }

.addiction-card { border-color: #dc3545 !important; }
.modules-card { border-color: #0d6efd !important; }
.badges-card { border-color: #ffc107 !important; }
.streak-card { border-color: #198754 !important; }
.autoex-card { border-color: rgba(23, 162, 184) !important; }

.notification-badge {
    position: relative;
    top: -10px;
    right: -17px;
    font-size: 0.7em;
}

.toast {
    backdrop-filter: blur(10px);
    background-color: rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 0.5rem;
}

.dropdown-menu {
    max-height: 400px;
    overflow-y: auto;
}

.mt-2 {margin: 0 !important;}
.d-flex {
    gap: 10px;
}
#userDropdown {font-weight: bold;}

.nav-link {font-weight: 600;}
.nav-link:hover {font-weight: 600; color: #b9b6ff !important;}
.nav-link.active {font-weight: 600; color: #b9b6ff !important;}
.prefooter {
    background: rgb(37, 0, 98) !important;
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
    
}
/* Overriding just for .swiper-cards on mobile */

.swiper-cards {
  display: flex;
  overflow-x: auto; /* allow horizontal scroll if width < total card width */
  gap: 1rem;        /* spacing between cards */
}

/* Desktop (>=768px): 5 cards in one row, each 20% wide */
@media (min-width: 768px) {
  .swiper-cards {
    flex-wrap: nowrap;         /* no wrapping => single row */
  }
  .swiper-cards > .card {
    flex: 0 0 20%;             /* each card is 20% of container width */
    max-width: 18%;
  }
}

/* Mobile (<768px): horizontal scroll with each card ~80% width */
@media (max-width: 767.98px) {
  .swiper-cards {
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch; /* smooth iOS scroll */
  }
  .swiper-cards > .card {
    flex: 0 0 80%;     /* show ~1.2 cards at a time horizontally */
    max-width: 80%;
  }
  
  .navbar-brand {text-align:center;}
  footer, .prefooter {text-align:center; padding-top: 0px !important;}
  .prefooter .col-md-4 {margin-bottom: 2px;}
  
  .offcanvas-header, .offcanvas-body {background-color: #140035 !important;}
}

/* Hide scrollbar (optional) */
.swiper-cards::-webkit-scrollbar {
  display: none;
}
.swiper-cards {
  scrollbar-width: none; /* For Firefox */
  -ms-overflow-style: none; /* For IE and Edge */
}

 .question-step {
      display: none;
    }
    .question-step.active {
      display: block;
}
.moduleheader {
    background-color: #eae1f9;
    max-width: 100% !important;}
.my-4 {margin-bottom: 0px !important;margin-top: 0px !important;}

.modulesg {margin-bottom: 1.5rem;}
.modulescard {margin-bottom: 1.5rem;}

.offcanvas.show {background-color:#150333 !important;}

#cookie-banner {position: fixed; bottom: 0; left: 0; right: 0; background: #34363a; color: #fff; padding: 15px; text-align: center; z-index: 1000; display: none;}
#accept-cookies {border-radius: 6px; background: #abc8f9; border: none; color: #34363a; height:40px;}
#decline-cookies {border-radius: 6px; background: #6846ff;border: none; color: #fff;height:40px}

.cardp{background:#250062;color: #fff;}
.cardp.fas{
    background: rgb(159,152,254);
	background: -moz-linear-gradient(87deg, rgba(159,152,254,1) 0%, rgba(41,41,214,1) 100%);
	background: -webkit-linear-gradient(87deg, rgba(159,152,254,1) 0%, rgba(41,41,214,1) 100%);
	background: linear-gradient(87deg, rgba(159,152,254,1) 0%, rgba(41,41,214,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#9f98fe",endColorstr="#2929d6",GradientType=1); 	
	-webkit-background-clip: text;
  	-webkit-text-fill-color: transparent;
}

.cardf{background:#250062;color: #fff;}
.cardf1{background:#f6d3ff;}

.icon-gradient {
  /* Make sure the element is treated like text */
  display: inline-block; 
  
  /* Create a gradient — adjust the colors as you wish */
  background: linear-gradient(45deg, #ff0057, #0099ff);

  /* The magic: clip the background to text */
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent; /* For Safari/Chrome */
  
  /* For modern Firefox */
  background-clip: text;
  color: transparent;
}

/* Ensure the card is position: relative so the badge can be placed absolutely */
.step-card {
  position: relative;
}

/* Position the badge in the top-center of the card */
.badge-step {
  position: absolute;
  border-radius:50px;
  top: 16px;
  left: 0;
  width: 45px;
  height: 45px;
  font-size:30px;
  transform: translateX(-50%); /* Center horizontally */
  z-index: 10; /* Make sure it stays on top */
  display: flex;
  align-items: center;
  justify-content: center;
}

.badgevs {background: #250062; font-weight:700; font-size:50px; color:#fff;border-radius:25px;padding:20px;}
.welcome {
  color:#f6d3ff;
  border-bottom: 1px solid;
    }
.welcome-top {
    background: #140035;
     display: flex;
  justify-content: center;
  align-items: center;
  height: 5vh; /* Adjust height as needed */
}
.welcome-top .container {
  text-align: center; /* Center text inside the container */
  height:10px;
  padding-top: 23px !important;
}

.welcome-overlay {
  position: fixed;
  inset: 0; /* top:0; left:0; right:0; bottom:0; */
  background: rgba(0, 0, 0, 0.9);
  z-index: 9999;
  padding: 2rem;
}
.carduri {background: #140035;}

/* ===================================================
   Template Cards CSS (Scoped to .template-cards)
   =================================================== */
.template-cards {
  /* CSS Variables for the template */
  --background-color: #18181B;
  --text-color: #A1A1AA;
  --card-background-color: rgba(255, 255, 255, 0.015);
  --card-border-color: rgba(255, 255, 255, 0.1);
  --card-box-shadow-1: rgba(0, 0, 0, 0.05);
  --card-box-shadow-1-y: 3px;
  --card-box-shadow-1-blur: 6px;
  --card-box-shadow-2: rgba(0, 0, 0, 0.1);
  --card-box-shadow-2-y: 8px;
  --card-box-shadow-2-blur: 15px;
  --card-label-color: #FFFFFF;
  --card-icon-color: #D4D4D8;
  --card-icon-background-color: rgba(255, 255, 255, 0.08);
  --card-icon-border-color: rgba(255, 255, 255, 0.12);
  --card-shine-opacity: 0.1;
  --card-shine-gradient: conic-gradient(from 205deg at 50% 50%, rgba(16, 185, 129, 0) 0deg, #10B981 25deg, rgba(52, 211, 153, 0.18) 295deg, rgba(16, 185, 129, 0) 360deg);
  --card-line-color: #2A2B2C;
  --card-tile-color: rgba(16, 185, 129, 0.05);
  --card-hover-border-color: rgba(255, 255, 255, 0.2);
  --card-hover-box-shadow-1: rgba(0, 0, 0, 0.04);
  --card-hover-box-shadow-1-y: 5px;
  --card-hover-box-shadow-1-blur: 10px;
  --card-hover-box-shadow-2: rgba(0, 0, 0, 0.3);
  --card-hover-box-shadow-2-y: 15px;
  --card-hover-box-shadow-2-blur: 25px;
  --card-hover-icon-color: #34D399;
  --card-hover-icon-background-color: rgba(52, 211, 153, 0.1);
  --card-hover-icon-border-color: rgba(52, 211, 153, 0.2);
  --blur-opacity: 0.01;
}

/* ===================================================
   Grid Container
   =================================================== */
.template-cards .grid {
  display: grid;
  grid-template-columns: repeat(5, 240px); /* Five columns, each 240px wide */
  gap: 20px; /* Spacing between cards */
  position: relative;
  z-index: 1;
}


/* ===================================================
   Card Styles
   =================================================== */
.template-cards .card {
  background-color: #0c0021;
  box-shadow: 0px var(--card-box-shadow-1-y) var(--card-box-shadow-1-blur) var(--card-box-shadow-1),
              0px var(--card-box-shadow-2-y) var(--card-box-shadow-2-blur) var(--card-box-shadow-2),
              0 0 0 1px var(--card-border-color);
  padding: 56px 16px 16px 16px;
  border-radius: 15px;
  cursor: pointer;
  position: relative;
  transition: box-shadow 0.25s;
}

.template-cards .card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 15px;
  background-color: var(--card-background-color);
}

/* Icon container */
.template-cards .card .icon {
  z-index: 2;
  position: relative;
  display: inline-block;
  width: 40px;
  height: 40px;
  text-align: center;
  line-height: 40px;
}

/* Pseudo-element for the circular blur */
.template-cards .card .icon::after {
  content: '';
  position: absolute;
  top: 4.5px;
  left: 4.5px;
  width: calc(100% - 9px);
  height: calc(100% - 9px);
  border-radius: 50%;
  background-color: var(--card-icon-background-color);
  border: 1px solid var(--card-icon-border-color);
  backdrop-filter: blur(2px);
  transition: background-color 0.25s, border-color 0.25s;
  z-index: -1; /* This ensures the circle stays behind the icon */
}



.template-cards .card .icon svg {
  position: relative;
  z-index: 5;
  display: block;
  width: 24px;
  height: 24px;
  transform: translateZ(0);
  color: var(--card-icon-color);
  transition: color 0.25s;
}

.template-cards .card h4 {
  z-index: 2;
  position: relative;
  margin: 12px 0 4px 0;
  font-family: inherit;
  font-weight: 600;
  font-size: 14px;
  line-height: 2;
  color: var(--card-label-color);
}

.template-cards .card p {
  z-index: 2;
  position: relative;
  margin: 0;
  font-size: 14px;
  line-height: 1.7;
  color: var(--text-color);
}

.template-cards .card .shine {
  border-radius: inherit;
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  opacity: 0;
  transition: opacity 0.5s;
}

.template-cards .card .shine:before {
  content: '';
  width: 150%;
  padding-bottom: 150%;
  border-radius: 50%;
  position: absolute;
  left: 50%;
  bottom: 55%;
  filter: blur(35px);
  opacity: var(--card-shine-opacity);
  transform: translateX(-50%);
  background-image: var(--card-shine-gradient);
}

.template-cards .card .background {
  border-radius: inherit;
  position: absolute;
  inset: 0;
  overflow: hidden;
  -webkit-mask-image: radial-gradient(circle at 60% 5%, black 0%, black 15%, transparent 60%);
  mask-image: radial-gradient(circle at 60% 5%, black 0%, black 15%, transparent 60%);
}

.template-cards .card .background .tiles {
  opacity: 0;
  transition: opacity 0.25s;
}

.template-cards .card .background .tiles .tile {
  position: absolute;
  background-color: var(--card-tile-color);
  animation-duration: 8s;
  animation-iteration-count: infinite;
  opacity: 0;
}

/* Animation delays for groups of tiles */
.template-cards .card .background .tiles .tile.tile-4,
.template-cards .card .background .tiles .tile.tile-6,
.template-cards .card .background .tiles .tile.tile-10 {
  animation-delay: -2s;
}

.template-cards .card .background .tiles .tile.tile-3,
.template-cards .card .background .tiles .tile.tile-5,
.template-cards .card .background .tiles .tile.tile-8 {
  animation-delay: -4s;
}

.template-cards .card .background .tiles .tile.tile-2,
.template-cards .card .background .tiles .tile.tile-9 {
  animation-delay: -6s;
}

/* Positioning individual tiles */
.template-cards .card .background .tiles .tile.tile-1 {
  top: 0;
  left: 0;
  height: 10%;
  width: 22.5%;
}

.template-cards .card .background .tiles .tile.tile-2 {
  top: 0;
  left: 22.5%;
  height: 10%;
  width: 27.5%;
}

.template-cards .card .background .tiles .tile.tile-3 {
  top: 0;
  left: 50%;
  height: 10%;
  width: 27.5%;
}

.template-cards .card .background .tiles .tile.tile-4 {
  top: 0;
  left: 77.5%;
  height: 10%;
  width: 22.5%;
}

.template-cards .card .background .tiles .tile.tile-5 {
  top: 10%;
  left: 0;
  height: 22.5%;
  width: 22.5%;
}

.template-cards .card .background .tiles .tile.tile-6 {
  top: 10%;
  left: 22.5%;
  height: 22.5%;
  width: 27.5%;
}

.template-cards .card .background .tiles .tile.tile-7 {
  top: 10%;
  left: 50%;
  height: 22.5%;
  width: 27.5%;
}

.template-cards .card .background .tiles .tile.tile-8 {
  top: 10%;
  left: 77.5%;
  height: 22.5%;
  width: 22.5%;
}

.template-cards .card .background .tiles .tile.tile-9 {
  top: 32.5%;
  left: 50%;
  height: 22.5%;
  width: 27.5%;
}

.template-cards .card .background .tiles .tile.tile-10 {
  top: 32.5%;
  left: 77.5%;
  height: 22.5%;
  width: 22.5%;
}

@keyframes templateTile {
  0%, 12.5%, 100% { opacity: 1; }
  25%, 82.5% { opacity: 0; }
}

.template-cards .card .background .tiles .tile {
  animation-name: templateTile;
}

.template-cards .card .background .line {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.35s;
}

.template-cards .card .background .line:before,
.template-cards .card .background .line:after {
  content: '';
  position: absolute;
  background-color: var(--card-line-color);
  transition: transform 0.35s;
}

.template-cards .card .background .line:before {
  left: 0;
  right: 0;
  height: 1px;
  transform-origin: 0 50%;
  transform: scaleX(0);
}

.template-cards .card .background .line:after {
  top: 0;
  bottom: 0;
  width: 1px;
  transform-origin: 50% 0;
  transform: scaleY(0);
}

/* Line positioning and transition delays */
.template-cards .card .background .line.line-1:before { top: 10%; }
.template-cards .card .background .line.line-1:after { left: 22.5%; }
.template-cards .card .background .line.line-1:before,
.template-cards .card .background .line.line-1:after { transition-delay: 0.3s; }

.template-cards .card .background .line.line-2:before { top: 32.5%; }
.template-cards .card .background .line.line-2:after { left: 50%; }
.template-cards .card .background .line.line-2:before,
.template-cards .card .background .line.line-2:after { transition-delay: 0.15s; }

.template-cards .card .background .line.line-3:before { top: 55%; }
.template-cards .card .background .line.line-3:after { right: 22.5%; }

/* ===================================================
   Card Hover Effects
   =================================================== */
.template-cards .card:hover {
  box-shadow: 0px 3px 6px var(--card-hover-box-shadow-1),
              0px var(--card-hover-box-shadow-2-y) var(--card-hover-box-shadow-2-blur) var(--card-hover-box-shadow-2),
              0 0 0 1px var(--card-hover-border-color);
}

.template-cards .card:hover .icon::after {
  background-color: var(--card-hover-icon-background-color);
  border-color: var(--card-hover-icon-border-color);
}

.template-cards .card:hover .icon svg {
  color: var(--card-hover-icon-color);
}

.template-cards .card:hover .shine {
  opacity: 1;
  transition-duration: 0.5s;
  transition-delay: 0s;
}

.template-cards .card:hover .background .tiles {
  opacity: 1;
  transition-delay: 0.25s;
}

.template-cards .card:hover .background .tiles .tile {
  animation-name: templateTile;
}

.template-cards .card:hover .background .line {
  opacity: 1;
  transition-duration: 0.15s;
}

.template-cards .card:hover .background .line:before {
  transform: scaleX(1);
}

.template-cards .card:hover .background .line:after {
  transform: scaleY(1);
}

.template-cards .card:hover .background .line.line-1:before,
.template-cards .card:hover .background .line.line-1:after { transition-delay: 0s; }

.template-cards .card:hover .background .line.line-2:before,
.template-cards .card:hover .background .line.line-2:after { transition-delay: 0.15s; }

.template-cards .card:hover .background .line.line-3:before,
.template-cards .card:hover .background .line.line-3:after { transition-delay: 0.3s; }

/* ===================================================
   Additional UI Elements for Dynamic Content
   =================================================== */
.template-cards .progress {
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 3px;
  overflow: hidden;
  margin-top: 12px;
  height: 6px;
}

.template-cards .progress-bar {
  display: block;
  height: 100%;
  transition: width 0.25s ease;
}

.template-cards .btn {
  display: inline-block;
  padding: 6px 12px;
  font-size: 14px;
  text-align: center;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: 4px;
  transition: background-color 0.25s ease, border-color 0.25s ease;
  cursor: pointer;
}

.template-cards .btn-outline-danger {
  color: #dc3545;
  border-color: #dc3545;
  background-color: transparent;
}

.template-cards .btn-outline-danger:hover {
  background-color: #dc3545;
  color: #fff;
}

/* ===================================================
   (Optional) Day-Night Toggle & Twitter Link Styles
   =================================================== */
.template-cards .day-night {
  cursor: pointer;
  position: absolute;
  right: 20px;
  top: 20px;
  opacity: 0.3;
}

.template-cards .day-night input { display: none; }

.template-cards .day-night input + div {
  border-radius: 50%;
  width: 20px;
  height: 20px;
  position: relative;
  box-shadow: inset 8px -8px 0 0 var(--text-color);
  transform: scale(1) rotate(-2deg);
  transition: box-shadow 0.5s ease 0s, transform 0.4s ease 0.1s;
}

.template-cards .day-night input + div:before {
  content: '';
  width: inherit;
  height: inherit;
  border-radius: inherit;
  position: absolute;
  left: 0;
  top: 0;
  transition: background-color 0.3s ease;
}

.template-cards .day-night input + div:after {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  margin: -3px 0 0 -3px;
  position: absolute;
  top: 50%;
  left: 50%;
  box-shadow: 0 -23px 0 var(--text-color),
              0 23px 0 var(--text-color),
              23px 0 0 var(--text-color),
              -23px 0 0 var(--text-color),
              15px 15px 0 var(--text-color),
              -15px 15px 0 var(--text-color),
              15px -15px 0 var(--text-color),
              -15px -15px 0 var(--text-color);
  transform: scale(0);
  transition: all 0.3s ease;
}

.template-cards .day-night input:checked + div {
  box-shadow: inset 20px -20px 0 0 var(--text-color);
  transform: scale(0.5) rotate(0deg);
  transition: transform 0.3s ease 0.1s, box-shadow 0.2s ease 0s;
}

.template-cards .day-night input:checked + div:before {
  background: var(--text-color);
  transition: background-color 0.3s ease 0.1s;
}

.template-cards .day-night input:checked + div:after {
  transform: scale(1);
  transition: transform 0.5s ease 0.15s;
}


.template-cards .card::before,
.template-cards .card .shine,
.template-cards .card .background {
  pointer-events: none;
}

.template-cards .btn {
  pointer-events: auto;
  position: relative;
  z-index: 10;
}
/* Override the tile color for each card on hover */
.template-cards .card.addiction-card {
  --card-tile-color: rgba(220, 53, 69, 0.2);  /* Red tiles for Nivel de Dependență */
}

.template-cards .card.modules-card {
  --card-tile-color: rgba(0, 123, 255, 0.2);  /* Blue tiles for Modules */
}

.template-cards .card.badges-card {
  --card-tile-color: rgba(255, 193, 7, 0.2);   /* Yellow tiles for Badgeuri */
}

.template-cards .card.streak-card {
  --card-tile-color: rgba(40, 167, 69, 0.2);    /* Green tiles for Streak */
}

.template-cards .card.autoex-card {
  --card-tile-color: rgba(23, 162, 184, 0.2);   /* Cyan tiles for Autoexcluderi */
}
.template-cards .card:hover {
  transform: none !important;
}

/* 
  Ensure the tiles are always visible (even when not hovered)
  by forcing their opacity to 1.
*/
.template-cards .card .background .tiles {
  opacity: 1 !important;
}

/* 
  Default state for each tile: no fill, just an outline.
  We override the original background-color and opacity.
*/
.template-cards .card .background .tiles .tile {
  background-color: transparent;
  border: 1px solid var(--card-tile-color); /* outline uses the tile color variable */
  /* Retain any animation properties if you want the tiles to animate on hover */
  animation-duration: 8s;
  animation-iteration-count: infinite;
  /* Add a smooth transition for background and border changes */
  transition: background-color 0.3s ease, border 0.3s ease;
}

/* 
  On hover, change the tile appearance:
  - Fill with the defined color.
  - Remove the outline.
  The rest of the animation (e.g., movement) remains as defined in your template.
*/
.template-cards .card:hover .background .tiles .tile {
  background-color: var(--card-tile-color);
  border: none;
}

/* The section that holds both the background and the content */
.carduri {
  position: relative;      /* Required for absolutely positioning the chessboard */
       /* Fallback/background color */
  overflow: hidden;        /* Hides any overflow from the chessboard */
}

/* Chessboard Background: Positioned absolutely to fill the section */
.chessboard {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: repeat(90, 20px); /* 32 columns; adjust size if needed */
  grid-template-rows: repeat(4, 20px);    /* 32 rows */
  gap: 1px;                               /* Gap between squares */
  z-index: 1;                             /* Lower than .content so it sits behind */
  pointer-events: none;                   /* Allows clicking/interaction with content above */
}

/* Base style for each square */
.square {
  width: 50px;
  height: 50px;
  animation: blink 3s infinite ease-in-out;
}

/* Chessboard colors */
.square.black {
  background:  rgba(34, 1, 87, 0.2);
}
.square.white {
  background: rgba(0, 123, 255, 0.2);
}

/* Keyframes for the blink animation */
@keyframes blink {
  0%, 100% {
    opacity: 0;
    transform: scale(0.5);
  }
  50% {
    opacity: 1;
    transform: scale(1);
  }
}

/* Main content styles */
.content {
  position: relative;
  z-index: 2;         /* Ensures content appears above the chessboard */
  padding: 20px;
  color: #fff;        /* Example text color */
}


.bg-success {background-color: rgb(61 34 105) !important;}

.faded-squares {
    position: relative;
    overflow: hidden;
  }
  .faded-squares::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Create a grid pattern with two linear gradients */
    background-image: 
      linear-gradient(90deg, rgba(255,192,203,0.2) 1px, transparent 1px),
      linear-gradient(rgba(255,192,203,0.2) 1px, transparent 1px);
    background-size: 50px 50px;
    pointer-events: none;
    z-index: 0;
  }
  /* Ensure card content appears above the pattern */
  .faded-squares .card-header,
  .faded-squares .card-body {
    position: relative;
    z-index: 1;
  }
  
.module-card .card-header {
     background-color: rgb(209 194 235);
    color: #17013b;
    border: none;
    height: 50px;
}

.module-card .card-body {
  transition: transform 0.2s;
}
.module-card:hover .card-body {
  transform: scale(1.02);
} 

.step {
      display: none;
      opacity: 0;
      transform: translateX(20px);
      transition: all 0.3s ease;
  }
  .step.active {
      display: block;
      opacity: 1;
      transform: translateX(0);
  }
  .progress-bar {
      transition: width 0.3s ease;
      font-weight: 500;
  }
  .question-card {
      border-left: 4px solid #0d6efd;
      transition: border-color 0.3s ease;
  }
  .btn-check:checked + label {
      transform: scale(1.05);
  }
  
  
.header-icons {margin-left: 15px !important;}  
.header-icons.d-flex {gap:15px}

.icon-bg {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 35px; /* Adjust the width as needed */
    height: 35px; /* Adjust the height as needed */
    background: linear-gradient(87deg, rgba(159, 152, 254, 1) 0%, rgba(41, 41, 214, 1) 100%);
    border-radius: 50%; /* Makes the background circular */
  }
  
.icon-bg:hover {
background: linear-gradient(87deg, rgba(159, 152, 254, 1) 0%, rgba(41, 41, 214, 1) 100%);
    border-radius: 50%; /* Makes the background circular */
  }  
  
.icon-bg .fa-lg {font-size: 1em !important;}
.notifbell {position:absolute;}

@media (max-width: 767.98px) {
  .nav-item.dropdown .dropdown-menu {
    right: auto !important;    /* ignore 'dropdown-menu-end' on small screens */
    left: 25% !important;      /* position from the center */
    transform: translateX(-80%) !important;  /* shift half width to center it */
  }
  .btn-primary {font-size:14px; margin-bottom: 5px; width:100%;}
  .btn-secondary {font-size:14px;}
}

.long-streak {font-size: 45px; color:#6846ff;}

  .progress {
    /* Gives the container a softly rounded shape and a subtle background */
    background-color: #987cc7;
    border-radius: 12px;
    overflow: hidden;
    height: 25px;
    box-shadow: inset 0 2px 2px rgba(0,0,0,0.1);
    margin-bottom: 1rem; /* adjust spacing as needed */
  }

  .progress-bar {
    /* Modern gradient background */
    background: linear-gradient(to right, #00c6ff, #0072ff);
    
    /* Ensures rounded corners align well with the container */
    border-radius: 12px;
    
    /* Smooth transitions when the bar’s width changes */
    transition: width 0.4s ease-in-out;
    
    /* Align text to the center and style it */
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: bold;
  }
  
  /* Optional: animate stripes */
  .progress-bar-striped {
    background-image: linear-gradient(
      45deg,
      rgba(255,255,255,0.15) 25%,
      transparent 25%,
      transparent 50%,
      rgba(255,255,255,0.15) 50%,
      rgba(255,255,255,0.15) 75%,
      transparent 75%,
      transparent
    );
    background-size: 1rem 1rem;
  }
  
  /* Optional: continuously animate the stripes */
  .progress-bar-animated {
    animation: progress-bar-stripes 1s linear infinite;
  }

  @keyframes progress-bar-stripes {
    0% {
      background-position: 1rem 0;
    }
    100% {
      background-position: 0 0;
    }
  }
  
 .question-card {
    border: none; 
    border-radius: 16px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    background-color: #fff;
    transition: box-shadow 0.3s ease-in-out;
  }
  .question-card:hover {
    box-shadow: 0 8px 20px rgba(0,0,0,0.15);
  }
  
  .question-card .card-body {
    padding: 1.5rem;
  }

  /* Step wrapper controls visibility */
  .step {
    display: none;
  }
  .step.active {
    display: block;
  }

  /* Question heading styling */
  .question-number {
    font-size: 1rem;
    font-weight: 600;
    color: #6c757d;
    margin-bottom: 0.5rem;
  }

  .lead {
    font-size: 1.1rem;
    margin: 1rem 0;
  }

  /* Shared button base style */
  .btn-yes,
  .btn-no {
    font-weight: 600;
    text-transform: uppercase;
    border-radius: 6px;
    padding: 0.5rem 1rem;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: 0.5rem;
  }

  /* YES button - Red outline by default */
  .btn-yes {
    border: 2px solid #b92864;
    background-color: transparent;
    color: #b92864;
  }
  /* Hover & checked -> Red fill, white text, soft glow */
  .btn-yes:hover,
  .btn-check:checked + .btn-yes {
    background-color: #b92864;
    color: #fff;
    box-shadow: 0 0 6px rgba(234, 84, 85, 0.4);
    border-color: #b92864; /* ensures border matches background color */
  }

  /* NO button - Green outline by default */
  .btn-no {
    border: 2px solid #22b17c;
    background-color: transparent;
    color: #22b17c;
  }
  /* Hover & checked -> Green fill, white text, soft glow */
  .btn-no:hover,
  .btn-check:checked + .btn-no {
    background-color: #22b17c;
    color: #fff;
    box-shadow: 0 0 6px rgba(40, 199, 111, 0.4);
    border-color: #22b17c; /* ensures border matches background color */
  }
  /* Icons: inherit color from the button’s state */
 .btn-yes i,
  .btn-no i,
  .btn-yes svg,
  .btn-no svg {
    color: inherit !important;
    fill: currentColor !important;
  }
  btn-yes i.fas.fa-check::before,
  .btn-no i.fas.fa-times::before {
    color: inherit !important;
  }

  /* Spacing for the container */
  .question-container {
    margin-top: 2rem;
  }

  /* Icons spacing */
  .btn-yes i, 
  .btn-no i {
    margin-right: 6px;
  }
  
.img-fluid-eval {max-width: 50%;}

.my-register-btn {
background-color: #e94a4e;
    border-color: #e94a4e;
    font-weight: bold;
    color: #250062;
}

.my-register-btn:hover {
background-color: #ed7578;
    border-color: #ed7578;
    font-weight: bold;
    color: #250062;
}


 .desktop-menu .navbar-nav {
      display: flex;
      gap: 1rem;
      align-items: center;
    }
    .desktop-menu .navbar-nav .nav-link {
      display: flex;
      align-items: center;
    }
    .desktop-menu .navbar-nav .nav-link i {
      margin-right: 0.4rem;
    }

    /* Bottom nav on mobile */
    .mobile-bottom-nav {
      background-color: rgba(37, 0, 98, 0.90);
      box-shadow: 0 -2px 6px rgba(0,0,0,0.2);
      z-index: 9999;
      border-radius: 8px;
      border: 1px solid #5521af;
      margin: 2px;
    }
    .mobile-bottom-nav .nav-item {
      text-align: center;
      flex: 1;
    }
    .mobile-bottom-nav a {
      text-decoration: none;
      color: #fff;
      font-size: 0.7rem;
      padding: 0.75rem 0;
      display: block;
      transition: background-color 0.3s ease;
    }
    .mobile-bottom-nav .d-flex {
      gap: 3px;
    }
    .mobile-bottom-nav .container-fluid {
      padding: 0px;
    }
    .mobile-bottom-nav a:hover {
      background-color: rgb(178 124 199 / 60%);
      color: #d1c2eb;
      text-decoration: none;
      border-radius: 8px;
      margin: 2px;
    }
    .mobile-bottom-nav a.active {
      background-color: rgb(178 124 199 / 60%);
      font-weight: bold;
      color: #d1c2eb;
      border-radius: 8px;
      margin: 2px;
    }
    .mobile-bottom-nav a i {
      display: block;
      font-size: 1.2rem;
      margin-bottom: 0.2rem;
    }
    
    
.badgecard {
    background-color: #0f01269c;
    color: #ffffff;
    border: 1px solid #250062;
}  

.hwhite {color: #fff; font-size:1.5rem;}

@media (max-width: 767.98px) {
  .badgecard .card-title {
    font-size: 1rem;
  }
  
  .badgecard .card-text,
  .badgecard .text-muted {
    font-size: 0.65rem;
  }
  
  .badgecard img {
    width: 100px !important;
  }
  
  .badgecard .card-body {
    padding: 0.65rem;
  }
  .my-5  {margin-top: 0.5rem !important;}
  .mt-5  {margin-top: 0.5rem !important;}
}
  /* Custom styles for the header section */
  .header-banner {
    position: relative;
  }
  
  /* Background image for mobile only - hidden on desktop */
  .mobile-header-bg {
    display: none;
  }
  
  /* Media query for mobile devices */
  @media (max-width: 767.98px) {
    /* Show background image on mobile */
    .mobile-header-bg {
      display: block;
      width: 100%;
      height: auto;
    }
    
    /* Position the title over the image */
    .header-title {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      color: white;
      text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
      width: 100%;
      text-align: center;
      z-index: 2;
    }
    
    .scoring {font-size: 1.2rem}
    
    /* Hide the dashboard button on mobile */
    .dashboard-btn {
      display: none;
    }
    .btn-outline-warning { font-size: 14px;}
  }
    
.btn-outline-warning {border-radius: 10px; }

.me-2 {
    margin-right: 1.2rem !important;
}

/* Make sure images always scale down nicely */
.family-vs-gambling-section img {
  width: 100%;
  height: auto;
}

/* Adjust the “VS” badge so it doesn’t look oversized when stacked */
@media (max-width: 767.98px) {
  .badgevs {
    font-size: 2rem;
    margin: 1rem 0;
    display: inline-block;
  }
  .btn-secondary.skip {margin-bottom: 5px;}
}

.login {background-color: #ffcf46; border-color: #ffcf46; color:#250062;}
.priceb {background-color: #d7474a; border-color: #d7474a; color:#ffffff;}
.stars {color: #ffcf46;}
.review {font-weight: 600;}