/* When body get dark mode */

body.dark section .heading-text {
    color: var(--light-color);
}

body.dark section .heading-text::before {
    background-color: var(--light-color);
}

body.dark .navbar {
    background: var(--dark-light-color);
    border: 1px solid rgba(155, 155, 155, 0.18);
    box-shadow: 0 5px 5px rgba(155, 155, 155, 0.32);
}

body.dark .logo h3 {
    color: var(--light-color);
}

/* products page */

body.dark .product-conatiner h2{
    color: var(--light-color);
}

body.dark .card{
    background: var(--dark-light-color);
    border: 1px solid rgba(155, 155, 155, 0.18);
    box-shadow: 0 5px 5px rgba(155, 155, 155, 0.32);
}

body.dark .card .name{
    color: var(--light-color);
}

body.dark .card .weight {
    color: var(--light-color);
}

/* services page */

body.dark .service-card{
    background: var(--dark-light-color);
    border: 1px solid rgba(155, 155, 155, 0.18);
    box-shadow: 0 5px 5px rgba(155, 155, 155, 0.32);
}

/* contact form */

body.dark .contact-form .form .first-input input{
    border: 2px solid var(--light-color);
    color: var(--light-color);
}

body.dark .contact-form .form input{
    border: 2px solid var(--light-color);
    color: var(--light-color);
}

body.dark .contact-form .form textarea{
    border: 2px solid var(--light-color);
    color: var(--light-color);
}

body.dark .send-btn{
    border: 2px solid transparent;
}

body.dark .send-btn:hover{
    border: 2px solid var(--light-color);
    color: var(--light-color);
}

/* profile page  */
body.dark .profile-box{
    background: var(--dark-light-color);
    box-shadow: 0 5px 10px rgba(255, 255, 255, 0.15);
}

body.dark .profile-image{
    border: 4px solid var(--dark-light-color);
    background: var(--dark-light-color);
}