@import url('https://fonts.googleapis.com/css2?family=Unna:ital,wght@0,400;0,700;1,400;1,700&display=swap');


nav{
    background-color: rgb(255, 255, 255);
    box-shadow: 0 0px 2px rgb(0, 0, 0);
    position: relative;
}

nav a img{
    width: 20%;
   margin: 2px 20px;
   background: none;
}
 .navbar .nav-link, 
.navbar .nav-link:focus, 
 .navbar .nav-link:active {
    color: #211e1e !important; /* Set hover/focus color */
    background-color: transparent !important; /* Remove any background change */
}

 .dropdown-menu li a{
    font-family: "Unna", serif;
    font-weight: 500;
    font-size:16px;
 }
 .dropdown-menu li a:hover{
    background-color: #ffffff;
}

.nav-link{
  font-family: "Unna", serif;
  font-weight: 500;
  font-size:18px;
}

.call{
    position: relative;
    border: 1px solid red;
    width: 100%;
    text-align: center;
}

.call h1{
    font-size: 17px;
    color: #000;
}

table{
    width: 100%;
    position: relative;
    top: 4.8rem;
}
table tr td {
    font-size: 20px; 

} 

.toggle {
    cursor: pointer;
    position: relative;
    display: flex;
    justify-content: space-between;
    width: 100px;
    border: 1px solid #1b1b1b;
    height: 40px;
    border-radius: 50px;
    transition: .2s;
    right: 2rem;
}

.toggle i {
    width: 50%;
    line-height: 40px;
    text-align: center;
    font-size: 20px;
    z-index: 1;
    color: #1b1b1b;
}

.toggle .ball {
    position: absolute;
    width: 30px;
    height: 30px;
    margin: 4px 9px;
    border-radius: 50%;
    border: 1px solid #1b1b1b;
    transition: .3s ease-out;
}

input {
    display: none;
}

/*
    -- Light Mode --
*/

.light {
    background: #a04747;
}

.light .toggle {
    background: red;
    box-shadow: 3px 3px 4px #e6e6e6,
                -3px -3px 4px #ffffff;
}


.light .toggle .bxs-sun {
    color: #811111;
}

.light .toggle .bx-moon {
    color: #61474e;
}

.light .toggle .ball {
    background: #d400ff;
}

/*
    -- Dark Mode --
*/

.dark{
    background: rgba(0, 0, 0, 0.916);
}
.dark nav{
    background: rgba(0, 0, 0, 0.993);
}
.dark .shortline{
    background: rgba(18, 18, 18, 0.916);
}
/* Prevent Bootstrap nav links from turning black */
.dark .navbar .nav-link {
    color: #ffffff !important; /* Set your preferred text color */
}

.dark .navbar .nav-link:hover, 
.dark .navbar .nav-link:focus, 
.dark .navbar .nav-link:active {
    color: #ffffff !important; /* Set hover/focus color */
    background-color: transparent !important; /* Remove any background change */
}

.dark .dropdown-menu{
    background-color: #1b1b1b;
}

.dark .dropdown-menu li a{
    color: #ffffff;
}

.dark .dropdown-menu li a:hover{
    background-color: #1b1b1b;
}

.navbar .nav-link.active {
    color: #000 !important; /* Keeps active links the same color */
    background-color: transparent !important;
    font-weight: bold; /* Optional: Keep active link highlighted */
}

.dark p, .dark .middlebody h2, .dark .productname h1, .dark .addpagefunctions, .dark .product-title, .dark .detail-item, .dark blockquote, .dark .similar-products-title, .dark .aboutus h3{
    color: rgb(226, 226, 222);
}

.dark .addpagefunctions {
        background-image: linear-gradient(rgba(17, 17, 17, 0.799), rgba(20, 19, 20, 0.425));
    }

.dark  .product-details {
    box-shadow: 0px 0px 3px 1px rgba(56, 56, 56, 0.6);
        background-color: #2525259a;
   
}

    
.dark .card{
    background-color: rgb(211, 195, 16);
}

.dark .review p{
    color: white;
}
.dark .review h3,.card-content p{
    color: white;
}

.dark .card-content p{
    color: rgb(0, 0, 0);
}

.dark .card-content button{
    background-color: rgb(5, 18, 7);
}

.dark .productpage .product p{
    color: white;
}

.dark .vehicallogo{
    background-color: rgba(52, 51, 51, 0.801);
}

.dark .navbar-toggler-icon {
    filter: invert(100%); /* White color */
}

.dark li a{
   color: #ffffff;
}


.dark .toggle{
    border:1px solid white;
 }

.dark .toggle .ball {
   border:1px solid white;
}

.dark .toggle .bx-sun {
    color: #ffffff;
}

.dark .toggle .bxs-moon {
    color: #ffffff;
}

.dark .toggle .ball {
   
    transform: translateX(48px);
}

@media screen and (max-width: 992px){
 .toggle{
    top: -0.5rem;
    right: -0.7rem;
    width: 85px;
    height: 32px;
    
 }

 .toggle i {
    width: 50%;
    line-height: 30px;
    font-size: 16px;
}

.toggle .ball {
    width: 25px;
    height: 25px;
    margin: 2.5px 8.5px;
}
.dark .toggle .ball {
   
    transform: translateX(40.54px);
}

.nav-link{
    font-size: 17px;
    padding: 5px 14px;
}
.form-control{
    width: 93%;
    right: -0.4rem;
    position: relative;
}
}


@media screen and (max-width: 370px){
      table{
        width: 117%;
      }
}