@import url("https://fonts.googleapis.com/css?family=Raleway:900&display=swap");

body {
    font-family: 'Poppins', sans-serif;
    line-height: 1.5;
}

*,
::after,
::before {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

img {
    max-width: 100%;
    display: inline-block;
}

ul {
    list-style-type: none;
}

a {
    text-decoration: none;
    display: block;
}

i {
    display: block;
}

/* Utilities */
:root {
    /* Font Size */
    --bodyFont: 1rem;
    --tinyFont: .5rem;
    --smallFont: 0.8rem;
    --TitleFont: 2rem;
    --sectionTitleFont: 1.4rem;

    /* Spacing */
    --tinyGap: .25rem;
    --smallGap: .5rem;
    --normalGap: 1rem;
    --mediumGap: 1.5rem;
    --largeGap: 2rem;
    --headerHeight: 3.5rem;

    /* Colors */
    --bodyFontColor: rgb(70, 70, 70);
    --darkColor: black;
    --lightColor: white;
    --bodyColor: rgb(245, 245, 245);
    --asideColor: rgb(4, 7, 36);
    --primaryColor: #198754;
    --lightgrayColor: rgb(100, 100, 100);
    --hoverColor: rgb(0, 119, 255);

}

.showcase {
    /*position: relative;*/
     margin-top: var(--headerHeight);
    position: sticky;


}

main {
    /*margin-top: 1em;*/
    width: 100%;
    align-content: center;
    margin-top:-45.4%;
}

body {
    background: var(--bodyColor);
}

.nav-bar {
    /*display: none;*/
    /*text-align: center;*/
    display: flex;
    flex-direction: column;

    /*grid-template-rows: .8fr 7fr;*/
    background: #198754;
    color: var(--lightColor);
    width: 300px;
    height: calc(100vh - var(--headerHeight));

    position: sticky;
    z-index: -1;
}


.logo-up{position: absolute;top:0;left:0;}

.startp-nav {
    background: var(--lightColor);
}

.startp-nav nav ul {

    list-style-type: none;
}
.startp-nav nav .navbar-nav .nav-item {
    /*position: relative;*/
    padding: 15px 0;
}
.startp-nav nav .navbar-nav .nav-item a {
    font-weight: 500;
    font-size: 15px;
    color: #000;
    margin-left: 14px;
    margin-right: 14px;
}
.startp-nav nav .navbar-nav .nav-item a:hover, .startp-nav nav .navbar-nav .nav-item a:focus, .startp-nav nav .navbar-nav .nav-item a.active {
    color: #90ee90;
}
.startp-nav nav .navbar-nav .nav-item a svg {
    width: 14px;
}


.startp-nav nav .navbar-nav .nav-item:hover ul {
    opacity: 1;
    visibility: visible;
    top: 100%;
}

.others-option{
    position: absolute;
    display: inline-flex;
    justify-content: space-between;
    right:0;
}

.startp-nav nav .others-option .btn.btn-light {
    background: var(--lightColor);
    border: 2px dashed #cdf1d8;
    padding: 12px 33px;
    margin-right: 10px;
}
.startp-nav nav .others-option .btn.btn-light:focus {
    color: #000 !important;
}
.startp-nav nav .others-option .btn.btn-light:hover, .startp-nav nav .others-option .btn.btn-light:focus {
    color: #fff;
    border-color: #90ee90;
}
.startp-nav nav .others-option .btn.btn-light::after, .startp-nav nav .others-option .btn.btn-light::before {
    background: #90ee90;
}
.startp-nav nav .others-option .btn.btn-primary {
    background: #a020f0;
    box-shadow: 0 13px 27px 0 rgba(198, 121, 227, 0.25);
}
.startp-nav nav .others-option .btn.btn-primary::after, .startp-nav nav .others-option .btn.btn-primary::before {
    background: #90ee90;
    box-shadow: 0 13px 27px 0 rgba(68, 206, 111, 0.25);
}
.navbar-style-three .startp-nav {
    padding-left: 25px;
    padding-right: 25px;
}
.others-option-for-responsive {
    display: none;
}

.others-option-for-responsive .dot-menu:hover .inner .circle {
    background: var(--lightColor);
}
.others-option-for-responsive .container {
    position: relative;
}
/*.others-option-for-responsive .container .container {*/
/*    !*position: absolute;*!*/
/*    right: 0;*/
/*    top: 10px;*/
/*    max-width: 320px;*/
/*    !*margin-left: auto;*!*/
/*    opacity: 0;*/
/*    !*visibility: hidden;*!*/
/*    !*transition: $transition;*/
/*    *!*/
/*    transform: scaleX(0);*/
/*    z-index: 2;*/
/*    padding-left: 15px;*/
/*    padding-right: 15px;*/
/*}*/
.others-option-for-responsive .container .container.active {
    opacity: 1;
    visibility: visible;
    transform: scaleX(1);
}
.others-option-for-responsive .option-inner {
    padding: 15px 15px 8px;
    box-shadow: 0 15px 40px rgba(0, 0, 0, .09);
    background: var(--lightColor);
}

.others-option-for-responsive .option-inner .others-option .btn.btn-light {
    background: transparent;
    border: 2px dashed #cdf1d8;
    padding: 12px 23px;
    margin-right: 10px;
}
.others-option-for-responsive .option-inner .others-option .btn.btn-light:focus {
    color: #000 !important;
}
.others-option-for-responsive .option-inner .others-option .btn.btn-light:hover, .others-option-for-responsive .option-inner .others-option .btn.btn-light:focus {
    color: #fff;
    border-color: #90ee90;
}
.others-option-for-responsive .option-inner .others-option .btn.btn-light::after, .others-option-for-responsive .option-inner .others-option .btn.btn-light::before {
    background: #90ee90;
}
.others-option-for-responsive .option-inner .others-option .btn.btn-primary {
    background: #a020f0;
    box-shadow: 0 13px 27px 0 rgba(198, 121, 227, 0.25);
    padding: 13px 23px;
}
.others-option-for-responsive .option-inner .others-option .btn.btn-primary::after, .others-option-for-responsive .option-inner .others-option .btn.btn-primary::before {
    background: #90ee90;
    box-shadow: 0 13px 27px 0 rgba(68, 206, 111, 0.25);
}
.navbar-color-white .startp-nav nav .navbar-nav .nav-item a {
    color: #fff;
}
.navbar-color-white .startp-nav nav .navbar-nav .nav-item a:hover, .navbar-color-white .startp-nav nav .navbar-nav .nav-item a:focus, .navbar-color-white .startp-nav nav .navbar-nav .nav-item a.active {
    color: #90ee90;
}
.navbar-color-white .startp-nav nav .others-option .cart-wrapper-btn {
    color: #fff;
}
.navbar-color-white .startp-nav nav .others-option .btn.btn-primary {
    /*background: #a020f0;*/
    box-shadow: 0 13px 27px 0 rgba(198, 121, 227, 0.25);
}
.navbar-color-white .startp-nav nav .others-option .btn.btn-primary::after, .navbar-color-white .startp-nav nav .others-option .btn.btn-primary::before {
    background: #a020f0;
    box-shadow: 0 13px 27px 0 rgba(68, 206, 111, 0.25);
}
.navbar-color-white#header.headroom.is-sticky {
    background-color: #000 !important;
}


/*.dropdown{display:inline-flex;align-content: flex-end;margin-left:50%;}*/
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
  display: inline-flex;
    padding: 15px;
    margin-bottom: 1em !important;
    /*justify-content: flex-end;*/

    /*min-width: 160px;*/
    /*box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);*/
    z-index: 1;
}

/* Links inside the dropdown */
.dropdown-content button {
    color: white;
    /*padding: 10px 12px;*/
    text-decoration: none;
    display: block;
    margin-right: 0.5em !important;

    font-size: 0.9em;

}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #f1f1f1}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
    display: block;
}

/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {
    background-color: #3e8e41;
}

.brand-name {
    font-size: 1.3rem;
}

.brand-icon {
    font-size: 1.6rem;
    cursor: pointer;
}

.nav-menu {
    display: grid;
    /* gap: var(--normalGap); */

}
.nav-link{z-index: 9999;}
.nav-menu li {
    display: flex;
    align-items: center;
    gap: var(--normalGap);
    font-size: 1.1rem;
    padding: var(--normalGap);

}

.nav-icon {
    font-size: 1rem;
}

.brand-icon,
.nav-icon {
    width: 25px;
    height: auto;
}

.nav-menu li:hover {
    background: var(--hoverColor);
    cursor: pointer;
    z-index: 1;
}

.nav-bar a {
    color: var(--lightColor);
}

#header {
    /*background: #ffffff;*/
    height: var(--headerHeight);
    width: 100%;
    position: relative;
    margin-bottom: -1em;
    /*margin-bottom: 10px !important;*/
}

/*.header-container {*/
/*    display: flex;*/
/*    align-items: center;*/
/*    justify-content: space-between;*/
/*    !*padding: 0 var(--normalGap);*!*/
/*}*/

.menu-bar {
    font-size: 1.1rem;
}

.search-bar {
    display: flex;
    align-items: center;
    gap: var(--smallGap);
    border: 1px solid var(--lightgrayColor);
    width: 60%;
    justify-self: center;
    padding: var(--tinyGap) var(--normalGap);
    border-radius: 1.5rem;
}

.search-input-box {
    width: 100%;
    border: none;
    outline: none;
}

.search-input-form {
    display: inline-block;
    width: 90%;
}


.profile-img{
    justify-content: flex-end;
    margin-right:1em;
    border-radius: 50%;
    width: 50px;
    padding: var(--tinyGap) 0;
}

.summary {
width:100%;
    padding: var(--normalGap);
    margin-top:0.5em;
}

.summary-container {
    display: grid;
     row-gap: var(--mediumGap);
    gap: var(--mediumGap);
    /*grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));*/
}

.summry-category {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--lightColor);
    padding: var(--normalGap);
}

.category-count {
    font-size: 2rem;
    font-weight: 600;
}

.category-name {
    color: rgb(100, 100, 100);
}

.category-icon {
    font-size: 2.2rem;
    color: var(--primaryColor);
}

.recent {
    padding: var(--normalGap);
}

.recent-container {
    display: grid;
    /*gap: var(--mediumGap);*/
}

.recent-ordres {
    display: grid;
    row-gap: var(--tinyGap);
    background: var(--lightColor);
    padding: var(--normalGap);
    overflow: scroll;
}

.recent-orders-header {
    padding:20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    /*padding: var(--smallGap) 0;*/
}

.recent-orders-title {
    font-weight: 600;
    font-size: var(--sectionTitleFont);
}

.recent-orders-more {
    background: var(--primaryColor);
    padding: var(--tinyGap) var(--normalGap);
    border-radius: .5rem;
    color: var(--lightColor);
    transition: 300ms;
}

.recent-orders-more:hover {
    background: var(--hoverColor);
}

/*.left {*/
/*    text-align: left;*/
/*    padding-left: .5rem;*/
/*}*/

.center {
    text-align: center;
}

.right {
    text-align: right;
    padding-right: .5rem;
}

.recent-orders-info-table {
    padding: var(--normalGap);
    min-width: 500px;
}

.recent-orders-info-table tr {
    transition: 100ms;
}

.recent-orders-info-table tr:hover {
    background: var(--hoverColor);
    color: var(--lightColor);
    cursor: pointer;
}

.recent-orders-info-table tr:first-child:hover {
    background: none;
    color: var(--darkColor);
}

.recent-orders-info-table,
tr {
    height: 3rem;
    border-bottom: 1px solid var(--bodyColor);
    border-collapse: collapse;
}

.recent-orders-info-table,
tr:last-child {
    border-bottom: none;
}

.closed {
    background: red;
    color: var(--lightColor);
    padding: .1rem .25rem;
    border-radius: 0.2rem;
    font-size: 0.9rem;
}

.created {
    background: rgb(224, 180, 1);
    color: var(--lightColor);
    padding: .1rem .25rem;
    border-radius: 0.2rem;
    font-size: 0.9rem;
}

.delivered {
    background: #198754;
    color: var(--lightColor);
    padding: .1rem .25rem;
    border-radius: 0.2rem;
    font-size: 0.9rem;
}

.in-progress {
    background: rgb(0, 157, 255);
    color: var(--lightColor);
    padding: .1rem .25rem;
    border-radius: 0.2rem;
    font-size: 0.9rem;
}

.recent-customers {
    display: grid;
    row-gap: var(--tinyGap);
    background: var(--lightColor);
    padding: var(--normalGap);
}

.recent-customers-title {
    font-weight: 600;
    font-size: var(--sectionTitleFont);
    margin-bottom: var(--normalGap);
    line-height: 1.3;
}

.recent-customers-list {
    display: grid;
    row-gap: var(--normalGap);
}

.customer-info {
    display: flex;
    align-items: center;
    gap: var(--normalGap);
    transition: 300ms;
}

.customer-info:hover {
    background: var(--hoverColor);
    color: var(--lightColor);
    cursor: pointer;
    padding-left: .5rem;
}

.customer-photo {
    border-radius: 50%;
    width: 50px;
}

.customer-name {
    font-weight: 600;

}

.customer-country {
    font-size: 0.9rem;
}

/* Media Queries */
@media screen and (min-width:680px) {
    .summary-container {
        grid-template-columns: repeat(2, 1fr);
    }

    .search-bar {
        max-width: 45%;
    }
}

@media screen and (min-width:900px) {
    .recent-container {
        grid-template-columns: .75fr .25fr;
        column-gap: var(--mediumGap);
    }

    .search-bar {
        max-width: 40%;
    }
}

@media screen and (min-width:1024px) {
    .summary-container {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media screen and (min-width:1240px) {
    .nav-bar {
        left: 0;
        top: 0;
        /* need to re-write appropriate code wrt reference features, i.e., javascript rules toggling and position */
    }

    .header-container {
        margin-left: calc(250px + .5rem);
        /* need to re-write appropriate code wrt reference features, i.e., javascript rules toggling and position */
    }

    .search-bar {
        max-width: 33%;
    }

    main {
        margin-left: calc(250px + 3rem);
        /* need to re-write appropriate code wrt reference features, i.e., javascript rules toggling and position */
    }
}


/*TEXT ANIMATION HEADER*/
svg {
    display: block;
    font: 4.5em 'Montserrat';
    width: 400px;
    height: 100px;
    margin: 0 auto;
}

.text-copy {
    fill: none;
    stroke: white;
    stroke-dasharray: 6% 29%;
    stroke-width: 5px;
    stroke-dashoffset: 0%;
    animation: stroke-offset 8.5s infinite linear;
}

.text-copy:nth-child(1){
    stroke: #ffffff;
    animation-delay: -1s;
}

.text-copy:nth-child(2){
    stroke: #ffffff;
    animation-delay: -2s;
}

.text-copy:nth-child(3){
    stroke: #ffffff;
    animation-delay: -3s;
}

.text-copy:nth-child(4){
    stroke: #ffffff;
    animation-delay: -4s;
}

.text-copy:nth-child(5){
    stroke: #ffffff;
    animation-delay: -5s;
}

@keyframes stroke-offset{
    100% {stroke-dashoffset: -40%;}
}