html, body {
    font-family: 'Prompt', sans-serif;
    color: #444;
    scroll-behavior: smooth;
}

.bg-main-color {
    background-image: linear-gradient(141deg, #9fb8ad 0%, #1fc8db 51%, #2cb5e8 75%);
}

/* Header */
@media (min-width: 1025px) {
    #temp-2-top-cover {
        height: 70vh;
        clip-path: polygon(100% 0, 100% 18%, 21% 100%, 0 78%, 0 0);
    }

    .product-title {
        top: 40%;
    }

    #temp-2-img-cover {
        position: absolute;
        max-width: 550px;
        top: 36%;
        left: 45%;
        right: 5%;
        box-shadow: 10px 8px 30px -8px rgba(0, 0, 0, 0.75);
    }
    /*#temp-2-product-details {*/
    /*    padding-top: 2rem !important;*/
    /*}*/
}
@media (max-width: 1024px) {
    #temp-2-img-cover {
        position: absolute;
        max-width: 550px;
        top: 35%;
        left: 35%;
        right: 5%;
        box-shadow: 10px 8px 30px -8px rgba(0,0,0,0.75);
    }
    #temp-2-top-cover {
        height: 50vh;
        clip-path: polygon(100% 0, 100% 18%, 21% 100%, 0 78%, 0 0);
    }
    .product-title {
        top: 20%;
    }
    #temp-2-product-details {
        padding-top: 10rem !important;
    }
    .product-head-title {
        max-width: 100%;
    }
}

@media (max-width: 576px) {
    #temp-2-img-cover {
        max-width: 550px;
        top: 75%;
        left: 5%;
        right: 5%;
    }
    #temp-2-top-cover {
        height: 70vh;
        clip-path: polygon(100% 0, 100% 18%, 21% 100%, 0 78%, 0 0);
    }
    .product-title {
        top: 35%;
    }
    #temp-2-product-details {
        padding-top: 10rem !important;
    }
}

@media (max-width: 375px) {
    #temp-2-img-cover {
        max-width: 550px;
        top: 77%;
        left: 5%;
        right: 5%;
    }
    #temp-2-top-cover {
        height: 70vh;
        clip-path: polygon(100% 0, 100% 18%, 21% 100%, 0 78%, 0 0);
    }
    .product-title {
        top: 40%;
    }
}

/* Top Navbar */
.temp-2-top-navbar {
    float: right;
    display: flex;
    margin-top: 20px;
    margin-bottom: 20px;
    padding: 0;
    list-style: none;
}

.temp-2-navbar-item {
    margin: .5rem .5rem;
}

.temp-2-navbar-item__link {
    padding: .5rem 1rem;
}

.temp-2-navbar-item .temp-2-navbar-item__link {
    font-size: 1.125rem;
    font-weight: bold;
    color: #fff;
    text-decoration: none;
}

.temp-2-navbar-item__link:link,
.temp-2-navbar-item__link:visited {
    border-bottom: 2px solid transparent;
    transition: border-bottom 0.3s;
}

.temp-2-navbar-item__link:hover,
.temp-2-navbar-item__link:active {
    border-bottom: 2px solid #fff;
}


/* Sidebar */
#temp-2-sidebar {
    padding: 1rem;
    height: 100%;
    float: left;
    position: fixed;
    top: 0;
    left: -300px;
    width: 300px;
    z-index: 100;
    transition: all .3s;
}

#temp-2-sidebar-btn {
    float: left;
    margin: 15px 0;
    font-size: 2rem;
    cursor: pointer;
}

#temp-2-sidebar-btn-on-sidebar {
    font-size: 2rem;
    text-align: right;
    color: #fff;
    cursor: pointer;
}

#temp-2-sidebar-nav {
    padding: 0;
    list-style: none;
}

.temp-2-sidebar-nav__item {
    padding: 1rem
}

.temp-2-sidebar-nav__item a {
    font-size: 1.125rem;
    font-weight: bold;
    color: #fff;
    text-decoration: none;
}

.temp-2-sidebar-nav__item a:visited,
.temp-2-sidebar-nav__item a:link {
    border-bottom: 2px solid transparent;
}

.temp-2-sidebar-nav__item a:hover,
.temp-2-sidebar-nav__item a:active {
    border-bottom: 2px solid #fff;
    transition: border-bottom 0.3s;
}

/*override css*/
.nav-link {
    display: block;
    padding: 0.1rem 1rem;
}
.jumbotron {
    border-radius: 0.7rem;
}
.order-btn {
    background : transparent;
    border: none;
    color: white;
}
.btn-outline-primary {
    color: #25c1de;
    border-color: #25c1de;
}
.btn-outline-primary:hover {
    color: #fff;
    background-color: #25c1de;
    border-color: #25c1de;
}

.nav-head {
    background-image: linear-gradient(141deg, #9fb8b8 28%, #25c1de 31%, #ffffff 40%);
}

.navbar-brand {
    color: white !important;
}

.btn-outline-primary:not(:disabled):not(.disabled):active, .btn-outline-primary:not(:disabled):not(.disabled).active, .show > .btn-outline-primary.dropdown-toggle {
    color: #fff;
    background-color: #25c1de;
    border-color: #25c1de;
}
.btn-outline-primary:not(:disabled):not(.disabled):active:focus, .btn-outline-primary:not(:disabled):not(.disabled).active:focus, .show > .btn-outline-primary.dropdown-toggle:focus {
    box-shadow: 0 0 0 0.2rem #96d1db;
}

.comment-img {
    border-radius: 10%;
    border: solid 1px white;
    object-fit: cover;
    height: 64px;
    width: 64px;
}