/* Custom Styles */
@import url("https://fonts.cdnfonts.com/css/open-dyslexic");

body.dyslexia-mode {
  font-family: "OpenDyslexic", sans-serif;
}
.dyslexia-mode .pecita .text-muted {
  font-family: "OpenDyslexic", sans-serif;
}
body {
  font-family: "merriweather", "cairo";
  line-height: 1.8 !important;
  transition: background-color 0.3s ease; /* Pour ajouter une transition fluide pour les changements de fond */
  margin-top: 70px;
  color: #041933;
  background-color: #fff;
  background-image: radial-gradient(circle, #cdcdcd 10%, #fff0 10%);
  background-size: 13px 13px;
  background-position: 0 0;
}
.is-rtl body {
  text-align: right;
}
.is-rtl .navbar {
  direction: rtl;
}
.is-rtl .ux-section {
  direction: rtl;
}
.is-rtl .text-start {
  text-align: end !important;
}
.is-rtl .card-body-courses .d-flex {
  direction: rtl;
}

.bg-light {
  --bs-bg-opacity: 1;
  background-color: rgba(var(--bs-light-rgb), var(--bs-bg-opacity));
}

.nav-link {
  font-size: 15px;
}

.pecita {
  font-family: "Pecita", sans-serif;
  margin-bottom: 30px;
}
.pecita .text-muted {
  font-family: "Pecita", sans-serif;
  margin-bottom: 30px;
  color: #0d6efd !important;
}
/* Logo Styling */
.navbar-brand .logo {
  height: 40px; /* Adjust based on your logo size */
}

/* Hero Section */
.hero-section {
  /* background: url("../img/bg-uxdesign-tunisie.jpg") center/cover no-repeat; */
  padding: 100px 0;
  text-align: center;
  color: #fff;
  background-color: #f0f0f0;
  background-image: radial-gradient(circle, #0d6efd80 10%, #fff 10%);
  background-size: 13px 13px;
  background-position: 0 0;
}

.hero-section h1 {
  font-size: 48px;
  margin-bottom: 20px;
  color: #041933;
}

.hero-section p {
  font-size: 25px;
  color: #0d6efd;
}

/* Language Icon */
.lang-icon {
  height: 20px; /* Adjust based on your icon size */
}
.container,
.container-fluid,
.container-lg,
.container-md,
.container-sm,
.container-xl,
.container-xxl {
  --bs-gutter-x: 1.5rem;
  --bs-gutter-y: 0;
  width: 100%;
  padding-right: calc(var(--bs-gutter-x) * 2);
  padding-left: calc(var(--bs-gutter-x) * 2);
  margin-right: auto;
  margin-left: auto;
}
.navbar-nav {
  --bs-nav-link-color: #4d4d4d;
  --bs-nav-link-hover-color: #0d6ef9;
}
.btn.show {
  border-color: transparent;
}
.btn.show,
.btn:first-child:active {
  border-color: transparent;
}
.nav-link:focus {
  color: var(--bs-nav-link-hover-color);
  border-bottom: 2px solid;
}
.nav-link:hover {
  color: var(--bs-nav-link-hover-color);
}

/* Guide Section */
.guide-section {
  padding: 60px 0;
}
.guide-section h2 {
  color: #fff;
}
.guide-section p {
  color: #fff;
}

/* Style pour l'image */
.guide-section img {
  max-width: 100%;
  height: auto;
  /* border-radius: 10px; Arrondir les coins de l'image */
}
.bg-secondary-na {
  background-color: #0d6efd;
}
.btn-primary-na {
  background-color: #041933;
  color: #fff;
}
.btn-primary-na:hover {
  background-color: #032651;
  color: #fff;
}
.btn-primary-na:focus {
  background-color: #fff !important;
  color: #032651 !important;
  border: 0px;
}
.form-control {
  height: fit-content;
  width: stretch;
  font-size: 12px;
  padding: 10px 20px;
  border-radius: 20px;
}
.form-select {
  border-radius: 20px;
  font-size: 12px;
  height: fit-content;
  padding: 10px 20px;
}
.text-captcha {
  font-size: 15px;
}

/* Solutions Section */
.solutions-section {
  padding: 60px 0;
}

/* .card {
  border: none;
  border-radius: 15px;
  overflow: hidden;
  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.15);
} */
.card-sparty {
  border-radius: 15px;
  align-items: start;
  border: 1px solid #5edc61;
  transition: transform 0.3s ease;
  background-color: #fff;
}
.btn-sparty {
  background-color: #5edc61;
  border: none;
  color: #041933;
}

.card-sparty:hover {
  transform: translateY(-10px);
  background-color: #fff;
}

.card-tkharbisha {
  border-radius: 15px;
  align-items: start;
  border: 1px solid #ffeb3b;
  background-color: #fff;
}

.btn-tkharbisha {
  background-color: #ffeb3b;
  border: none;
  color: #041933;
}

.card-disabled {
  filter: grayscale(1);
  opacity: 0.7;
  background-color: #fff;
}
.card-hadra {
  border-radius: 15px;
  align-items: start;
  border: 1px solid #12c9ae;
  transition: transform 0.3s ease;
  background-color: #fff;
}
.btn-hadra {
  background-color: #12c9ae;
  border: none;
  color: #041933;
}
.card-hadra:hover {
  transform: translateY(-10px);
  background-color: #fff;
}

.card-img-top {
  background-color: #fff;
  width: 100%;
}

/* .card-body {
  padding: 20px;
  text-align: center;
} */

.card-subtitle {
  font-size: 12px;
  color: #666;
  margin-bottom: 15px;
}

.card-text {
  font-size: 12px;
  margin-bottom: 20px;
}

.btn-secondary.disabled {
  background-color: #484a4d;
  border: none;
  padding: 10px 20px;
  font-size: 1rem;
  cursor: not-allowed;
  border-radius: 20px;
  opacity: 1;
  color: #abc2d6;
}
.ux-section {
  background-color: #e8f1ff;
}

/* Courses Section */
.courses-section {
  padding: 60px 0;
}

/* .courses-section h2 {
    font-size: 2.5rem;
    margin-bottom: 20px;
    color: #333;
    text-align: center;
}

.courses-section p {
    font-size: 1.25rem;
    color: #666;
    text-align: center;
    margin-bottom: 40px;
} */

.card-courses {
  border-radius: 15px;
  overflow: hidden;
  border: 1px solid #0d6efd;
  transition: transform 0.3s ease;
  background-color: #fff;
}

.card-courses:hover {
  transform: translateY(-5px);
  border: 1px solid #0d6efd;
}

.card-body-courses {
  padding: 20px;
}

.card-title {
  font-size: 1rem;
  margin-bottom: 15px;
}

.card-text {
  color: #4d4d4d;
  margin-bottom: 20px;
}

.price {
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 0;
}

.duration {
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 0;
}

.bg-new {
  background-color: #e8f1ff;
}

.btn {
  font-size: 12px !important;
  border-radius: 20px;
  padding: 10px 20px;
}

/**dark-light**/
/* Floating Dark Mode Toggle */
/* .dark-mode-toggle {
  position: fixed;
  top: 77px;
  right: 0;
  background-color: #011124;
  color: #fff;
  border-radius: 0px;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  z-index: 1000;
} */
.dark-mode .dark-mode-toggle {
  color: #ffd807;
  background-color: #000;
}

.dark-mode .bg-secondary-na {
  background-color: #011124;
}

.dark-mode-toggle i {
  font-size: 20px;
}

/* Dark Mode Styles */
body.dark-mode {
  background-color: #010a15;
  background-image: none;

  color: #ffffff;
}

body.dark-mode .logo {
  height: 40px;
  display: none;
}
body.dark-mode .logo-dark {
  height: 40px;
  display: block;
}
.logo-dark {
  height: 40px;
  display: none;
}
body.dark-mode .hero-section {
  background-color: #010a15;
  background-image: none;
  color: #ffffff;
}

body.dark-mode .hero-section h1 {
  color: #fff;
}

body.dark-mode .navbar-dark {
  background-color: #1f1f1f !important;
}
body.dark-mode .nav-link {
  color: #fff;
}

body.dark-mode .card-sparty,
body.dark-mode .card-hadra,
body.dark-mode .card-tkharbisha,
body.dark-mode .card-courses {
  background-color: #011124;
  color: #ffffff;
  border: 1px solid #333;
}
body.dark-mode .card-text {
  color: #a1a1a1;
}

body.dark-mode .dropdown-toggle {
  color: #fff;
}

body.dark-mode .btn-primary {
  background-color: #0d67ed;
  border-color: #0d67ed;
}

body.dark-mode .btn-primary:hover {
  background-color: #3700b3;
  border-color: #3700b3;
}

body.dark-mode .form-control {
  background-color: #021022;
  color: #ffffff;
  border-color: #555;
}
body.dark-mode .form-control::placeholder {
  color: #b0b0b0;
}

body.dark-mode .form-select {
  background-color: #021022;
  color: #ffffff;
  border-color: #555;
}
body.dark-mode .bg-light {
  background-color: #011124 !important;
  color: #d3d3d3;
}
body.dark-mode .input-group-text {
  background-color: #021022;
  color: #fff;
  border: var(--bs-border-width) solid #6c6c6c;
}

body.dark-mode .ux-section {
  background-color: #011124;
  color: #d3d3d3;
}

body.dark-mode .form-control:focus {
  background-color: #444;
  color: #ffffff;
  border-color: #777;
}

body.dark-mode .modal-content {
  background-color: #1f1f1f;
  color: #ffffff;
}

body.dark-mode .modal-header,
body.dark-mode .modal-footer {
  border-color: #333;
}

body.dark-mode .dropdown-menu {
  background-color: #1f1f1f;
  color: #ffffff;
}

body.dark-mode .dropdown-item {
  color: #ffffff;
}

body.dark-mode .dropdown-item:hover {
  background-color: #333;
}

/* Floating Bug Icon */
.bug-report-icon {
  position: fixed;
  top: 140px;
  right: 0px; /* Or 'right: 20px;' to place it on the right */
  background-color: #ff4d4d;
  color: #fff;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  z-index: 1000;
  border-radius: 50px 0px 0px 50px;
}
/* Custom style for the informative paragraph */
.modal-body p.text-muted {
  font-size: 14px;
  color: #6c757d; /* Bootstrap's default muted color */
  margin-bottom: 20px; /* Add space below the paragraph */
}
.bug-report-icon i {
  font-size: 20px;
}

/* Modal Form Styles */
#bugReportModal .modal-content {
  background-color: #fff;
  color: #000;
}

#bugReportModal .modal-header {
  background-color: #011124;
  color: #fff;
}

#bugReportModal .modal-footer {
  border-top: 1px solid #ddd;
}

/* Accessibility Menu */
/* Accessibility Menu */
.accessibility-menu {
  position: fixed;
  top: 200px;
  right: 0px;
  z-index: 1031;
}
#accessibility-toggle i.fa-universal-access {
  font-size: 20px; /* Ajustez la taille de l'icône */
  color: #fff; /* Couleur de l'icône */
}

#accessibility-toggle {
  background-color: #007bff;
  color: #fff;
  border: none;
  padding: 10px;
  border-radius: 50px 0px 0px 50px;
  cursor: pointer;
  font-size: 16px;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}

#accessibility-toggle:hover {
  background-color: #0056b3;
}

/* Accessibility Options */
#accessibility-options {
  display: none;
  flex-direction: column;
  gap: 10px;
  margin-top: 10px;
}

#accessibility-options button {
  background-color: #007bff;
  color: #fff;
  border: none;
  padding: 10px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 16px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

#accessibility-options button:hover {
  background-color: #0056b3;
}

/* High Contrast Mode */
body.high-contrast {
  background-color: #000;
  color: #fff;
}

body.high-contrast .navbar-dark {
  background-color: #333 !important;
}

body.high-contrast .card-sparty,
body.high-contrast .card-hadra,
body.high-contrast .card-tkharbisha,
body.high-contrast .card-courses {
  background-color: #333;
  color: #fff;
  border: 1px solid #fff;
}

body.high-contrast .btn-primary {
  background-color: #ff0;
  color: #000;
  border-color: #ff0;
}

body.high-contrast .btn-primary:hover {
  background-color: #cc0;
  border-color: #cc0;
}

/* Color Blind Mode */
body.color-blind {
  filter: grayscale(100%);
  margin-top: 0px;
}