/* nav bar color & effects  */
/* offcanvas navbar  */
.navOffcanvsTheme {
    background: rgb(223, 214, 165);
    background: linear-gradient(90deg, rgba(223, 214, 165, 0.4) 0%, rgba(224, 209, 220, 0.4) 100%);
    backdrop-filter: blur(8px);
}

/* md navbar  */
.navTheme {
    background: rgb(223, 214, 165);
    background: linear-gradient(90deg, rgba(223, 214, 165, 1) 0%, rgba(224, 209, 220, 1) 100%);
}

/* nav items hover effect  */
.nav-item::after {
    content: "";
    display: block;
    width: 100%;
    height: .2em;
    border-radius: 1rem;
    background: rgb(0, 0, 0);
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.8) 31%, rgba(0, 0, 0, 0.4) 86%);
    transition: all .3s;
    -webkit-transform: scaleX(0);
    transform: scaleX(0);
    visibility: hidden;
}

.nav-item:hover::after {
    visibility: visible;
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
}

/* nav logo  */
.logo-image {
    height: 30px;
    object-fit: cover;
}

/* footer styles  */
.footerTheme {
    background: rgb(223, 214, 165);
    background: linear-gradient(90deg, rgba(223, 214, 165, 0.7) 0%, rgba(224, 209, 220, 0.7) 100%);
}

/* social media links on footer  */
.socialLinks {
    transition-duration: 0.3s;
    transition-timing-function: ease-out;
}

.socialLinks:hover,
.socialLinks:focus {
    /* transform: rotate(-25deg)  scale(1.2); */
    transition-duration: 0.3s;
    transition-timing-function: ease-out;
    animation: socialLinkEffect 0.8s;
}

@keyframes socialLinkEffect {
    33%{
        transform: rotate(-25deg) scale(1.2);
    }
    66%{
        transform: rotate(25deg) scale(1.2);
    }
    99%{
        transform: rotate(0deg) scale(1);
    }
}

.faceBook:hover{
    color: #1877f2;
}
.instagram:hover{
    color: #e1306c;
}
.email:hover{
    color: #479ef5;
}
.tiktok:hover{
    color: black;
}
.linkedin:hover{
    color: #0072b1;
}
.youtube:hover{
    color: #c4302b;
}
.twitter:hover{
    color: black;
}