:root {
  --main-color: #002750;
  --sec-color: #001429;
  --thir-color: #ffcc33;
  --fourth-color: #81abd8;
  --main-radius: 20px;
  --main-transition: 0.3s;
  --light-mode-Color: #e4e5f1;
  --dark-mode-color: #18191a;
}
.dark-mode {
  background-color: var(--main-color);
  color: white !important;
}
/* Start Navbar */
.dark-mode .navbar {
  background-color: var(--sec-color) !important;
}
.dark-mode .navbar-toggler {
  border-color: white !important;
}
.dark-mode .navbar-toggler i {
  color: white !important;
}

.dark-mode .navbar-nav li.active {
  border-bottom: 1px solid white !important;
}
.dark-mode .navbar-nav li a {
  color: white !important;
}
.dark-mode .navbar-nav li a:hover {
  border-bottom: 1px solid white !important;
}
.dark-mode .navbar .buttons a:first-child {
  background-color: var(--fourth-color) !important;
  color: white !important;
}
.dark-mode .navbar .buttons a:first-child:hover {
  border: 1px solid var(--fourth-color) !important;
  background-color: unset !important;
  color: var(--fourth-color) !important;
}
.dark-mode .navbar .buttons a:last-child {
  color: var(--fourth-color) !important;
  border: 1px solid var(--fourth-color) !important;
}
.dark-mode .dark-btn {
  box-shadow: inset 0 8px 60px rgba(0, 0, 0, 0.3),
    inset 8px 0 8px rgba(0, 0, 0, 0.3), inset 0 -4px 4px rgba(0, 0, 0, 0.3);
}

.dark-mode .dark-btn .btn-indecator {
  transform: translateX(-2rem) !important;
}

.dark-mode .dark-btn .btn-indecator {
  background-color: var(--main-color) !important;
}

.dark-mode .dark-btn .btn-indecator .btn-container .btn-icon {
  color: var(--light-mode-Color) !important;
}

/* End Navbar */
/* Start Landing */
.dark-mode .landing {
  background-color: var(--fourth-color) !important;
}
.dark-mode .landing .learn {
  background-color: #0d0d0d;
  color: white !important;
}
.dark-mode .landing .btn {
  background-color: #ffb14b;
  color: #0d0d0d;
}
.dark-mode .landing .btn:hover {
  background-color: var(--main-color) !important;
  color: white !important;
}
.dark-mode .landing .stars i {
  color: #fff !important;
}
.dark-mode .landing .cal {
  background-color: rgb(13 13 13 / 80%);
}
.dark-mode .landing .cal i {
  color: #0d0d0d !important;
}
.dark-mode .landing .icon-one i {
  background-color: #0d0d0d !important;
  color: #ffb14b !important;
  font-size: 18px;
}
.dark-mode .navbar .buttons a:last-child:hover {
  background-color: var(--fourth-color) !important;
  color: white !important;
  border: 1px solid var(--fourth-color);
}
/* End Landing */
/* Start Numbers */
.dark-mode .numbers {
  background-color: var(--sec-color) !important;
}
.dark-mode .numbers span:last-child {
  color: #52565c !important;
}
.dark-mode .numbers .icon svg polygon,
.dark-mode .numbers .icon svg polyline,
.dark-mode .numbers .icon svg path {
  stroke: black !important;
}
/* End Numbers */
/* Start Courses */
.dark-mode .course-one {
  background-color: #0d0d0d5e;
  margin-bottom: 7rem;
}
@media (max-width: 992px) {
  .dark-mode .course-one .container-one {
    background-color: var(--main-color) !important;
    margin-bottom: 0 !important;
  }
  .dark-mode .course-two {
    background-color: var(--main-color) !important;
  }
  .dark-mode .course-one {
    background-color: var(--main-color);
  }
}
.dark-mode .course-two {
  background-color: var(--sec-color) !important;
}
.dark-mode .course-one .container-one {
  background-color: var(--sec-color) !important;
  margin-bottom: -120px;
}
.dark-mode .courses li .nav-link {
  border: 1px solid #ffffff !important;
  color: #fff;
}
.dark-mode .nav-tabs .nav-link.active {
  background-color: var(--fourth-color) !important;
  color: #001429;
  border: 1px solid var(--fourth-color) !important;
}
.dark-mode .nav-tabs .nav-link:hover {
  background-color: var(--fourth-color) !important;
  color: #001429 !important;
  border: 1px solid var(--fourth-color) !important;
}
.dark-mode .courses .box {
  background-color: var(--sec-color);
}
.dark-mode .courses .box h5 {
  color: var(--fourth-color);
}
.dark-mode .courses .box .price span:first-child {
  color: #fd7738;
}
.dark-mode .courses .box .btn {
  background-color: var(--fourth-color);
}
.dark-mode .courses .box p {
  color: #fff !important;
}
.dark-mode .courses .pic .cont {
  background-color: #121212;
  color: #fff;
}
.dark-mode .offline {
  background-color: var(--sec-color);
}
/* End Courses */
/* Start Information */
.dark-mode .information h2 {
  color: var(--fourth-color) !important;
}
.dark-mode .information .box {
  background-color: var(--sec-color);
}
.dark-mode .information .box .btn {
  color: var(--fourth-color);
  background-color: var(--sec-color);
}
.dark-mode .information .box:hover .btn {
  background-color: var(--thir-color);
  color: #001429;
}
/* End Information */
/* Start Videos */
.dark-mode .videos .vid {
  background-color: #00394c;
}
.dark-mode .videos .box {
  background-color: var(--sec-color);
}
.dark-mode .videos .box p,
.dark-mode .videos h2 {
  color: var(--fourth-color) !important;
}
/* End Videos */
/* Start Teachers */
.dark-mode .teachers {
  background-color: var(--sec-color);
}
.dark-mode .teachers h2 {
  color: var(--fourth-color) !important;
}
.dark-mode .teachers a {
  color: white !important;
}
/* End Teachers */
/* Start Say */
.dark-mode .say {
  background-color: var(--main-color);
}
.dark-mode .say-two {
  background-color: var(--sec-color);
}
.dark-mode .say h2 {
  color: var(--fourth-color) !important;
}
.dark-mode .say p {
  color: #696984;
}
.dark-mode .say .box {
  color: var(--fourth-color);
  border-color: var(--fourth-color);
}
.dark-mode .say .swiper-pagination-bullet-active {
  background-color: white !important;
}
/* End Say */
/* Start Lesson */
.dark-mode .lesson {
  background-color: var(--main-color);
}
.dark-mode .lesson .box {
  background-color: var(--sec-color);
}
.dark-mode .lesson .box .number-lesson {
  color: #fff !important;
}
/* End Lesson */
/* Start Login */
.dark-mode .login {
  background-color: var(--main-color) !important;
}
.dark-mode .login p {
  color: #757575 !important;
}
.dark-mode .login #contantButton {
  border: none !important;
}
.dark-mode .login input,
.dark-mode .login input:focus,
.dark-mode .google {
  background-color: var(--main-color) !important;
  border: 1px solid var(--fourth-color);
  color: #757575 !important;
}
.dark-mode .login input::placeholder {
  color: #757575 !important;
}

/* End Login */
/* Start Dimploma */
.dark-mode .diploma h3,
.dark-mode .diploma span,
.dark-mode .diploma p {
  color: white !important;
}
.dark-mode .accordion {
  border-color: var(--main-color) !important;
}
.dark-mode .accordion-button {
  gap: 1rem;
}
.dark-mode .accordion-button,
.dark-mode .accordion-body {
  background-color: #002245;
}
.dark-mode .accordion-body i {
  color: var(--thir-color) !important;
}
.dark-mode .accordion-body li {
  color: white !important;
}

.dark-mode .diploma .accordion-button:not(.collapsed) {
  background-color: var(--sec-color);
  border-color: var(--sec-color);
}
.dark-mode .diploma .accordion-button::after {
  background-color: white !important;
  border-radius: 25%;
  padding: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
}
.dark-mode .diploma .details {
  background-color: var(--sec-color);
}
/* End Dimploma */
/* Start Contact */
.dark-mode .contact {
  background-color: var(--sec-color);
  width: 100%;
}
.dark-mode .contact input,
.dark-mode .contact textarea {
  background-color: var(--main-color) !important;
  border: 0px;
  caret-color: white !important;
  color: white !important;
}
.dark-mode .contact input::placeholder,
.dark-mode .contact textarea::placeholder {
  color: white !important;
}
/* End Contact */
/* Start Footer */
.dark-mode .footer {
  background-color: var(--sec-color);
}
.dark-mode .footer i {
  color: white !important;
}
.dark-mode .footer a,
.dark-mode .footer p,
.dark-mode .footer a:hover {
  color: #fff;
}
.dark-mode .footer h2 {
  color: #cac3fc;
}
/* End Footer */


/* Start Modal Dialog */
.dark-mode .modal-dialog {
    background-color: var(--main-color); /* Background color of the modal */
    border-radius: var(--main-radius); /* Rounded corners */
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.5); /* Shadow effect */
    color: white; /* Text color */
}

/* Modal Header */
.dark-mode .modal-header {
    border-bottom: 1px solid var(--fourth-color); /* Border color */
    background-color: var(--sec-color); /* Header background color */
    color: white; /* Header text color */
}

.dark-mode .modal-header .close {
    color: white; /* Close button color */
}

/* Modal Body */
.dark-mode .modal-body {
    background-color: var(--main-color); /* Body background color */
    color: white; /* Body text color */
}

/* Modal Footer */
.dark-mode .modal-footer {
    border-top: 1px solid var(--fourth-color); /* Border color */
    background-color: var(--sec-color); /* Footer background color */
}

.dark-mode .modal-footer .btn {
    background-color: var(--thir-color); /* Button background color */
    color: var(--main-color); /* Button text color */
}

.dark-mode .modal-footer .btn:hover {
    background-color: var(--fourth-color); /* Button hover background color */
    color: var(--sec-color); /* Button hover text color */
}

/* Light mode styles */
.modal-title {
    color: #000000; /* Default color for modal title in light mode */
}

.btn-close {
    color: #000000; /* Default color for close button in light mode */
}

/* Dark mode styles */
body.dark-mode .modal-title {
    color: #ffffff; /* Change the color to white for modal title in dark mode */
}

body.dark-mode .btn-close {
    color: #ffffff; /* Change the close button color to white for dark mode */
}

/* Optional: Hover effects for the close button */
body.dark-mode .btn-close:hover {
    color: #cccccc; /* Change the color on hover in dark mode */
}

.btn-close:hover {
    color: #555555; /* Change the color on hover in light mode */
}
/* End Modal Dialog */