@import url('https://fonts.googleapis.com/css2?family=Biryani:wght@600&family=Rammetto+One&display=swap');
body {
    font-family: 'Biryani', sans-serif !important
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Rammetto One', cursive !important
}

.bg-theme {
    background-color: #2d5986 !important;
}

.carousel-caption {
    background: rgb(45, 89, 134);
    background: linear-gradient(180deg, rgba(45, 89, 134,0.2) 0%, rgba(45, 89, 134,1) 50%, rgba(45, 89, 134,0.1) 100%);
}

.carousel-caption h1, .carousel-caption h2 {
    text-shadow: 5px 5px 10px #000
}

.btn-theme {
    background-color: #2d5986!important;
    color: #fff!important
}

.navbar-toggler:focus, .navbar-toggler:active, .navbar-toggler-icon:focus {
    outline: none !important;
    box-shadow: none !important;
}

.btn-theme:hover {
    background-color: #204060!important
}

.navbar-toggler {
    border: 1px solid #ffffff!important;
    color: #ffffff!important
}

#acro_slider .carousel-item {
    height: 100vh;
    width: 100%
}

.carousel-inner img {
    width: 100%;
    height: 100vh;
    object-fit: cover
}

/* nav.navbar {
    background-color: rgba(255, 255, 255, .8)
} */

.nav-item a {
    color: #ffffff!important;
    font-weight: 700
}

.nav-item a:hover {
    color: #f8f8f8!important
}

.card {
    width: 100%!important
}

iframe.home-contact {
    width: 100%;
    height: 100%
}

iframe.contact-page {
    width: 100%;
    height: 600px!important
}

footer a {
    color: #ddd!important
}

footer a:hover {
    opacity: .8
}

.home-gallery img:hover {
    animation: shake .5s;
    animation-iteration-count: infinite
}

@keyframes shake {
    0% {
        transform: translate(1px, 1px) rotate(0)
    }
    10% {
        transform: translate(-1px, -2px) rotate(-1deg)
    }
    20% {
        transform: translate(-3px, 0) rotate(1deg)
    }
    30% {
        transform: translate(3px, 2px) rotate(0)
    }
    40% {
        transform: translate(1px, -1px) rotate(1deg)
    }
    50% {
        transform: translate(-1px, 2px) rotate(-1deg)
    }
    60% {
        transform: translate(-3px, 1px) rotate(0)
    }
    70% {
        transform: translate(3px, 1px) rotate(-1deg)
    }
    80% {
        transform: translate(-1px, -1px) rotate(1deg)
    }
    90% {
        transform: translate(1px, 2px) rotate(0)
    }
    100% {
        transform: translate(1px, -2px) rotate(-1deg)
    }
}

.about-page-background, .contact-background, .contact-page-background, .gallery-page-background, .designs-page-background, .login-page, .used-items-background, .products-background, .products-page-background {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-color: #343a40;
    color: #fff
}

.contact-page-background {
    background-image: url(../img/bg/workers.jpg)
}

.designs-page-background {
    background-image: url(../img/bg/designs.jpg)
}

.gallery-page-background {
    background-image: url(../img/bg/house.jpg)
}

.about-page-background, .used-items-background {
    background-image: url(../img/bg/about.jpg)
}

.login-page {
    background-image: url(../img/bg/login.jpg)
}

.products-background, .products-page-background {
    background-image: url(../img/bg/room.jpeg);
}

.login-page form {
    width: 320px
}

.about-page-background h1, .contact-page-background h1, .gallery-page-background h1 {
    text-shadow: 5px 5px 10px #000
}

.login-page {
    height: 100vh
}

header {
    height: 70vh
}

.login-page, header {
    width: 100%!important;
    display: flex!important;
    flex-direction: column!important;
    align-items: center!important;
    justify-content: center!important
}

header.products-page-background h1, .designs-page-background h1 {
    text-shadow: 5px 5px 10px #fff
}

.contact-social-media .fa-facebook-square {
    color: #3b5998!important
}

.contact-social-media .fa-twitter-square {
    color: #00acee!important
}

.contact-social-media .fa-youtube-square {
    color: #b23121!important
}

.contact-social-media .fa-linkedin {
    color: #0e76a8!important
}

.contact-social-media .fab:hover {
    opacity: .7
}

.dashboard {
    min-height: 100vh!important
}

.fa-edit, .fa-trash-alt {
    cursor: pointer!important
}

.form-group img, td img {
    height: 50px!important;
    width: auto!important
}

@media only screen and (min-width:768px) {
    a.navbar-brand img {
        height: 150px!important;
        width: auto;
        position: fixed;
        top: 0;
        left: 10%;
    }
}

@media only screen and (max-width:767.98px) {
    iframe.home-contact {
        height: 400px;
        margin-top: 10px
    }
    .carousel-caption>p {
        display: none!important
    }
    .carousel-caption h1, .carousel-caption h2 {
        font-family: 'Biryani', sans-serif !important;
        color: #ffc107!important;
    }
    .carousel-caption {
        /* background: none !important; */
        width: 100% !important;
        left: 0px !important;
    }
    a.navbar-brand img {
        height: 90px!important;
        width: auto;
        position: fixed;
        top: 0;
        left: 6%;
    }
    .nav-item:first-child {
        margin-top: 40px !important;
    }
    .navbar-nav {
        border-top: 1px solid rgba(124, 179, 235, 0.2) !important;
    }
    .nav-link {
        padding-left: 40px !important;
    }
}