:root{
    --shadow-dark01: 0 2px 4px rgba(255,255,255,.4);
    --shadow-dark02: 0 4px 20px rgba(255,255,255,.3);

    /*----------------------*/
    --body-dark: #111827;
    --dark-color: #1f2937;
    --text-dark: #f3f4f6;
    --btn-dark: #3b82f6;
    --accent-dark: #f87171;
    --hover-dark: #85a1ef;
    --active-dark: #5599ff;
}

/*----------------------*/
.dark-mode body{
    background: var(--body-dark);
    color: var(--text-dark);
}

/*----------------------*/
.dark-mode header{
    background: var(--dark-color);
    box-shadow: var(--shadow-dark01);
}
.dark-mode .nav-logo .logo-light{
    display: inline-block;
}
.dark-mode .nav-logo .logo-dark{
    display: none;
}
.dark-mode .nav-links{
    background: var(--dark-color);
}
.dark-mode .nav-links a{
    color: var(--text-dark);
}
.dark-mode .nav-links a:hover{
    color: var(--btn-dark);
}
.dark-mode .nav-links a::before{
    background: var(--active-dark);
}
.dark-mode .color-mode i{
    box-shadow: var(--shadow-dark01);
    padding: .5rem .8rem;
}

/*----------------------*/
.dark-mode span{
    color: var(--accent-dark);
}
.dark-mode .btn{
    background: var(--btn-dark);
    color: var(--text-dark);
}
.dark-mode .btn:hover{
    background: var(--hover-dark);
}

/*----------------------*/
.dark-mode .card{
    box-shadow: var(--shadow-dark02);
}
.dark-mode .services-card-icon i{
    box-shadow: var(--shadow-dark01);
}

/*----------------------*/
.dark-mode .portfolio-card-img{
    box-shadow: var(--shadow-dark01);
}

/*----------------------*/
.dark-mode .test{
    box-shadow: var(--shadow-dark02);
}
.dark-mode .test:hover{
    box-shadow: var(--shadow-dark01);
}

/*----------------------*/
.dark-mode .contact-form input,
.dark-mode .contact-form textarea{
    background: var(--dark-color);
    color: var(--text-dark);
}
.dark-mode .contact-form input::placeholder,
.dark-mode .contact-form textarea::placeholder{
    color: var(--text-dark);
}
.dark-mode .protection{
    box-shadow: var(--shadow-dark01);
    background: var(--dark-color);
}
.dark-mode .protection a{
    color: var(--accent-dark);
}
.dark-mode .protection a:hover{
    border-bottom: 2px solid var(--accent-dark);
}
.dark-mode .contact-social a{
    border: 1px solid var(--btn-dark);
}
.dark-mode .contact-social a:hover{
    border: 1px solid var(--active-dark);
}
.dark-mode .contact-social i{
    color: var(--hover-dark);
}
.dark-mode .contact-social i:hover{
    color: var(--active-dark);
}

/*----------------------*/
.dark-mode .info-card{
    background: var(--dark-color);
    box-shadow: var(--shadow-dark02);
}
.dark-mode .info-card .content h3{
    color: var(--accent-dark);
}

/*----------------------*/
.dark-mode .videos-box a{
    color: var(--text-dark);
}
.dark-mode .videos-card{
    box-shadow: var(--shadow-dark01);
    background: var(--dark-color);
}

/*---media queries---*/
@media(min-width:1024px){
    header{
        justify-content: space-between;
        align-items: center;
        padding-inline: clamp(6%, 8%, 10%);
    }
    .nav-links{
        flex-direction: row;
        opacity: 1;
        transform: unset;
        position: static;
        background: transparent;
    }
    .nav-menu-btn{
        display: none;
    }

    /*----------------------*/
    .home, .info-cardbox{
        grid-template-columns: 1fr 1fr;
    }

    /*----------------------*/
    .privacy-policy h2,
    .videos-container h2{
        margin-block-start: 2.5rem;
    }
}