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

:root {
    --theme-yellow: #FED202;
    --theme-orange: #FF6500;
    --theme-blue: #031855;
}

body {
    font-family: "Roboto", sans-serif;
    font-weight: 400;
    font-style: normal;
}

h1, h2, h3, h4, h5, h6 {
    font-family: "Montserrat", sans-serif;
    font-optical-sizing: auto;
    font-weight: 700 !important;
    font-style: normal;
}

::-webkit-scrollbar {
    width: 5px;
    height: 5px;
}

/* Track */

::-webkit-scrollbar-track {
    background: #fff;
}

/* Handle */

::-webkit-scrollbar-thumb {
    background: #000;
    border-radius: 10px;
}

/* Handle on hover */

::-webkit-scrollbar-thumb:hover {
    background: var(--theme-blue);
}

.bg-theme {
    background-color: var(--theme-orange) !important;
}

.text-theme {
    color: var(--theme-orange) !important;
}

.bg-theme-light1 {
    background-color: var(--theme-blue) !important;
}

.bg-theme-light2 {
    background-color: #ccc !important;
}

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

.carousel-caption h1, .carousel-caption h2 {
    font-size: 2rem !important;
}

.btn-theme {
    background-color: var(--theme-yellow)!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: #000!important
}

.navbar {
    height: 70px !important;
}

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

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

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

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

.card {
    width: 100%!important
}

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, #buterfly_slider, .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: #fff;
    color: #000;
    background-image: url(../img/bg.png)
}

header {
    height: 70vh
}

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

.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
}

.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:65px!important;
        width: auto;
        position: fixed;
        top: 0;
        left: 10%;
    }
}

@media only screen and (max-width:767.98px) {
    .carousel-item {
        margin-top: 100px !important;
    }
    .carousel-caption>p {
        display: none!important
    }
    .carousel-caption h1, .carousel-caption h2 {
        font-family: 'Biryani', sans-serif !important;
        color: #ffc107!important;
        font-size: 1.5rem !important;
    }
    .carousel-caption {
        /* background: none !important; */
        width: 100% !important;
        left: 0px !important;
        bottom: 50px !important;
    }
    a.navbar-brand img {
        height: 65px!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;
    }
    .none {
        display: none;
    }
}