:root {
  --first-color: #18191b;
  --sec-color: #111111;
  --thir-color: #f4b700;
  --fourth-color: #81abd8;
  --gold-btn-color: #b48802;
  --first-radius: 20px;
  --first-transition: 0.3s;
  --light-mode-Color: #e4e5f1;
  --dark-mode-color: #18191a;
}
.dark-mode h2,
.dark-mode h4,
.dark-mode h5 {
  color: var(--thir-color) !important;
}
.dark-mode p,
.dark-mode li {
  color: #fff !important;
  line-height: 1.8;
}
.dark-mode {
  background-color: var(--first-color);
  color: white !important;
}
.dark-mode .head h1 {
  color: var(--thir-color) !important;
}
.dark-mode .head p {
  color: white !important;
}
.dark-mode .top {
  color: var(--thir-color) !important;
}
.dark-mode .main-btn {
  background-color: var(--gold-btn-color);
}
.dark-mode .main-btn:hover {
  background-color: var(--thir-color);
}
.dark-mode #loader {
  background-color: var(--sec-color);
}
/* Start license */
.dark-mode .license {
  background-color: var(--sec-color) !important;
  border-bottom: 1px solid #5c5f61;
}
/* End license */
/* Start Navbar */
.dark-mode .offcanvas {
  background-color: var(--dark-mode-color);
}
.dark-mode .navbar {
  background-color: var(--sec-color) !important;
}
.dark-mode .navbar-toggler {
  border-color: white;
}
.dark-mode .navbar-toggler i {
  color: white;
}

.dark-mode .navbar-nav li a {
  color: white;
}

.dark-mode .navbar-nav li a:hover,
.dark-mode .navbar-nav li .active-1 {
  color: var(--thir-color);
}
.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);
}

.dark-mode .dark-btn .btn-indecator {
  background-color: var(--first-color);
}

.dark-mode .dark-btn .btn-indecator .btn-container .btn-icon {
  color: var(--light-mode-Color);
}
.dark-mode .navbar-nav .nav-item.active,
.dark-mode .navbar-nav .nav-item.active .nav-link,
.dark-mode .navbar-nav .nav-item:hover,
.dark-mode .navbar-nav .nav-item:hover .nav-link {
  color: var(--thir-color) !important;
}
.dark-mode .navbar-nav .nav-item.active::before,
.dark-mode .navbar-nav .nav-item::before,
.dark-mode .navbar-nav .nav-item.active::before {
  background-color: var(--thir-color);
}
.dark-mode .offcanvas-header i {
  color: var(--thir-color);
}
/* End Navbar */
/* Start About Us */
.dark-mode .about-us {
  background-color: var(--sec-color);
}
.dark-mode .information .about-head {
  color: #fff !important;
}
.dark-mode .information .about-desc {
  color: var(--thir-color) !important;
}
.dark-mode .information ul i {
  color: var(--thir-color) !important;
}
.dark-mode .information ul p {
  color: #fff !important;
}
.dark-mode .information .call-about {
  color: var(--thir-color) !important;
}
.dark-mode .information .call-about i {
  border: 1px solid var(--thir-color);
  color: var(--thir-color) !important;
}
.dark-mode .information .call-about:hover i {
  background-color: var(--thir-color);
  color: #fff !important;
}
/* End About Us */
/* Start Footer */
.dark-mode .footer {
  background-color: var(--sec-color);
}
.dark-mode .footer {
  border-top: 0;
}
.dark-mode .footer i {
  color: white !important;
}
.dark-mode .footer svg {
  fill: #fff !important;
}
.dark-mode .footer a,
.dark-mode .footer p {
  color: #fff !important;
}
.dark-mode .footer a:hover {
  color: var(--thir-color) !important;
}
.dark-mode .social-icon:hover {
  background-color: #fff;
}
/* End Footer */
/* Start News */
.dark-mode .news .box {
  background-color: var(--sec-color);
}
.dark-mode .news .box h4 {
  color: white;
}
/* End News */
/* Start Contact Page */
.dark-mode .login p {
  color: #ffff !important;
}
.dark-mode .login #contantButton {
  border: none !important;
}
.dark-mode .form-container form input,
.dark-mode .form-container form textarea,
.dark-mode .nice-select,
.dark-mode .nice-select.open .list,
.dark-mode .nice-select .option.focus {
  background-color: var(--sec-color) !important;
  color: white !important;
  border: none !important;
}
.dark-mode .form-container form input:focus,
.dark-mode .form-container form textarea:focus {
  background-color: var(--sec-color) !important;
  color: white !important;
  border: 1px solid #fff !important;
}
.dark-mode .form-container form input::placeholder {
  color: gray !important;
}

.dark-mode .nice-select .option.selected.focus,
.nice-select .option:hover {
  background-color: #fff !important;
  color: #000 !important;
}
.dark-mode .form-container form input::placeholder,
.dark-mode .form-container form textarea::placeholder {
  color: white !important;
}
.dark-mode .form-container .contact-info .more {
  background-color: var(--dark-mode-color);
  color: #fff;
}
.dark-mode .form-container #contactButton {
  background-color: var(--gold-btn-color) !important;
  padding: 5px 20px;
}
.dark-mode .form-container .contact-info {
  border-color: #fff !important;
}
.dark-mode .form-container .contact-info i {
  border: unset !important;
}
/* End Contact Page */
/* Start Our Services */
.dark-mode .our-services .box {
  background-color: var(--sec-color);
}
.dark-mode .our-services .icon {
  background-color: var(--dark-mode-color);
}
.dark-mode .our-services .icon svg {
  fill: var(--thir-color);

}
.dark-mode .our-services .box:hover .icon {
  background-color: var(--thir-color);
}
.dark-mode .our-services .box:hover .icon svg {
  color: white;
  
}
.dark-mode .our-services .box h4::before {
  background-color: var(--thir-color);
}
.dark-mode .our-services .box h4 {
  color: #fff !important;
}
.dark-mode .our-services .box:hover h4 {
  color: var(--thir-color) !important;
}
/* Start Our Services */
/* Start Landing Services */
.dark-mode .landing-services .land-serve {
  background-color: var(--sec-color);
}
/* End Landing Services */
/* Start Features */
.dark-mode .features {
  background-color: var(--sec-color);
  border-top: 5px solid var(--thir-color);
}
/* End Features */
/* Start About Us Page */
.dark-mode .information {
  background-color: var(--first-color) !important;
  border-top: 5px solid var(--thir-color);
}
.dark-mode .information-2::before {
  background-color: #f4b70075;
}
.dark-mode .features .box {
  background-color: var(--first-color) ;
}
.dark-mode .features .box i {
  color: var(--thir-color);
}
.dark-mode .features .box:hover {
  transform: translateY(-10px);
  color: white !important;
  background-color: var(--gold-btn-color) !important;
}
.dark-mode .features .box:hover h5,
.dark-mode .features .box:hover p,
.dark-mode .features .box:hover i {
  color: #fff !important;
}
/* End About Us Page */
/* Start Our Clients */
.dark-mode .our-clients .swipper-wrapper {
  height: 190px;
}
.dark-mode .our-clients .pic {
  width: 280px;
  height: 150px;
  background-color: var(--sec-color);
  border-radius: 20px;
}
.dark-mode .our-clients .pic .w-90 {
  width: 90%;
}
.dark-mode .our-clients .swiper-pagination-bullet-active {
  background-color: var(--thir-color);
}
.dark-mode .footer .pic {
  background-color: unset;
}
/* End Our Clients */
/* Start Employee */
.dark-mode .employee .content {
  background-color: var(--sec-color);
}
/* End Employee */
.dark-mode .iti__country-list {
  background-color: var(--sec-color);
}
.dark-mode .iti__country.iti__highlight {
  background-color: #3d3d3d;
}

.dark-mode div:where(.swal2-container).swal2-center>.swal2-popup {
  background-color: var(--first-color);
}
.dark-mode div:where(.swal2-container) .swal2-html-container {
  color: #fff;
}
/* Start Call Action */
.dark-mode .call-action .container {
  background-color: var(--thir-color);
}
.dark-mode .call-action p,
.dark-mode .call-action h2 {
  color: #000 !important;
}
.dark-mode .call-action .main-btn {
  background-color: #fff ;
  color: #000;
}
.dark-mode .call-action .main-btn:hover {
  background-color: #000;
  color: #fff;
}
/* End Call Action */
/* Start Advertisement */
.dark-mode .advertisement a {
  background-color: var(--sec-color);
}
.dark-mode .advertisement a:hover {
  text-decoration: underline;
  color: var(--thir-color) !important;
}
.dark-mode .advertisement a:hover p {
  color: var(--thir-color) !important;
}
.dark-mode  .slick-dots li.slick-active button:before {
  color: var(--thir-color);
}
/* End Advertisement */

.dark-mode .nav-phone {
  background-color: var(--thir-color);
}
.dark-mode .nav-phone:hover {
  background-color: #000;
}