/* .......................... dark-light mode.......................... */

/* styles.css */

/* Light Mode (Default) */
body {
  background-color: white;
  color: black;
  transition: background-color 0.3s, color 0.3s;
}

/* Dark Mode */
body.dark-mode {
  background-color: rgb(0, 5, 48);
  color: white;
}


/* .................... button style ...................... */
/* Toggle Button Styles */
/* Floating Theme Toggle Container */
.theme-toggle-container {
  position: fixed; /* Float the button */
  top: 50%; /* Center vertically */
  right: 20px; /* Distance from the right */
  transform: translateY(-50%); /* Adjust for perfect centering */
  z-index: 1000; /* Keep above other elements */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px; /* Space between items */
}

/* Toggle Button Styles */
.toggle-button {
  background-color: #007eff; /* Blue for active state */
  border: none;
  width: 40px;
  height: 100px;
  border-radius: 30px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.toggle-button .icon {
  font-size: 1.5rem;
  color: white;
  transition: opacity 0.3s ease;
}



/* Dark Mode Button */
body.dark-mode .toggle-button {
  background-color: #333; /* Dark mode button */
}

body.dark-mode .sun-icon {
  opacity: 0.3;
}

body:not(.dark-mode) .moon-icon {
  opacity: 0.3;
}

/* Optional Body Background Transition */
body {
  transition: background-color 0.3s ease;
}





/* =========================================================================================== */

.dark-mode .sub-title{
  color: aliceblue;

}

.dark-mode .sec-title{
  background: rgb(0,212,255);
  
  background: linear-gradient(90deg, rgba(0,212,255,1) 0%, rgba(94,228,255,1) 35%, rgba(215,248,255,1) 100%);
   -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}


.dark-mode .box-title, p, h3{
  color: white;
}

.box-title, p, h3{
  color: black;
}



.dark-mode .header-top{
  background-color: rgb(0, 5, 48);
  
}

.dark-mode a{
  color: white;
}

a{
  color: black;
}

.dark-mode .menu-area{
  background-color: rgb(0, 5, 48);
}

/* Default Light Mode Background */
.about-area-home {
  background: url('/assets/img/bg/bg-about.webp') ;
  background-size: cover;
  transition: background 0.3s ease;
}

/* Dark Mode Background */
.dark-mode .about-area-home {
  background: url('/assets/img/bg/bg-about-dark.webp') ;
  background-size: cover;
}


#team-area {
  background: url('/assets/img/bg/bg-about.webp') no-repeat center center;
  background-size: cover;
  transition: background 0.3s ease;
}

/* Dark Mode Background */
.dark-mode #team-area {
  background: url('/assets/img/bg/bg-about-dark.webp') no-repeat center center;
  background-size: cover;
}


.dark-mode .team-content h3{
  color: black;

}


.dark-mode .footer-wrapper{
  background: red;
}

#categorySlide h3{
  color: black;
}

.about-area p{
  color: black;
  text-align: justify;
}

.dark-mode .about-area p{
  color: white;
  text-align: justify;
}

.dark-mode .footer-wrapper .menu li>a{
  color: white;
}

.footer-wrapper .menu li>a{
  color: black;
}


.dark-mode .elements-sec{
  background: url('/assets/img/bg/bg-about-dark.webp') no-repeat center center;
  background-size: cover;

}

.dark-mode .sidebar-gallery-area{
  background: url('/assets/img/bg/bg-about-dark.webp') no-repeat center center;
  background-size: cover;

}

.dark-mode .bg-smoke{
  background-color: rgb(0, 5, 48);
}

.dark-mode .media-body p{
  color: white;

}



.dark-mode .service-tile-content{
  background: url(/assets/img/bg/bg-about-dark.webp);
}

.dark-mode .service-tile-content .th-btn{
  color: whitesmoke;
}


.dark-mode .breadcumb-wrapper{
  background: url('/assets/img/bg/bg-service-hero.webp') no-repeat center center;
  background-size: cover;
}

.breadcumb-wrapper{
  background: url("/assets/img/bg/bg-bread-light.webp");
  background-size: cover;
}

.breadcumb-wrapper .breadcumb-content .breadcumb-title{
  color: black;
}

.breadcumb-wrapper .breadcumb-content .breadcumb-menu li{
  color: black;
}

.breadcumb-wrapper .breadcumb-content .breadcumb-menu a{
  color: black;
}


.dark-mode .breadcumb-wrapper .breadcumb-content .breadcumb-title{
  color: white;
}

.dark-mode .breadcumb-wrapper .breadcumb-content .breadcumb-menu li{
  color: white;
}

.dark-mode .breadcumb-wrapper .breadcumb-content .breadcumb-menu a{
  color: white;
}


.dark-mode .package-tile{
  background: url("/assets/img/bg/bg-about-dark.webp");
  background-size: cover;
}

.dark-mode .package-box-title{
  color: aliceblue;
}

.dark-mode .package-box-rating span{
  color: aliceblue;
}

.dark-mode .package-currency{
  color: aliceblue;
}

.dark-mode .package-box-time span{
  color: aliceblue;
}

.dark-mode .package-box-time a{
  color: aliceblue;
}

.dark-mode .glow a{
  color: black;
}

.dark-mode .page-single .checklist li{
  color: rgb(196, 209, 220);

}

.dark-mode .page-single .page-content .box-text {
  color: rgb(196, 209, 220);
}

.dark-mode .space .widget .tagcloud a {
  color: #333;
}

.space .offer-banner .offer .box-title{
  color: black;
}

.space .offer-banner .offer .offer-title{
  color: black;
}

.space .offer-banner .offer a{
  color: black;
}


.dark-mode .contact-page p{
  color: whitesmoke;
}

.dark-mode .contact-page .about-contact-details a{
  color: whitesmoke;
}

.dark-mode .contact-faqs button{
  color: white;
}

.dark-mode .contact-faqs p{
  color: rgb(150, 181, 181);
}

.dark-mode .client .tour-action a{
  color: azure;
}


.dark-mode .tour-content{
  background: url("/assets/img/bg/bg-about-dark.webp");
  background-size: cover;
}

.dark-mode .portfolio-sidebar a{
  color: #333;
}


.dark-mode .tour p{
  color: aliceblue;
}


.dark-mode .tour li{
  color: aliceblue;
}




.dark-mode .tour .destination-checklist li{
  color: aliceblue;
}

.dark-mode .location-map h3{
  color: white;
}

.dark-mode .portfolio-details p{
  color: azure;
  text-align: justify;
}

.portfolio-details p{
  text-align: justify;
}

.dark-mode .payment .about-contact-details a{
  color: white;

}

.footer-layout4 .footer-widget .details a{
  color: white;
}
.footer-layout4 .footer-widget .details p{
  color: white;
}

.breadcumb-content {
  background: rgba(157, 209, 244, 0.3);
  max-width: 500px; /* Set a maximum width */
  margin: 0 auto; /* Center the element */
  padding: 20px; /* Adjust spacing as needed */
}


.dark-mode .breadcumb-content{
  background: rgba(0, 0, 0, 0.3);
  max-width: 500px; /* Set a maximum width */
  margin: 0 auto; /* Center the element */
  padding: 20px; /* Adjust spacing as needed */

}