/* google fonts */
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap");
@import url('https://fonts.googleapis.com/css2?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');
@import url('https://fonts.googleapis.com/css2?family=Heebo:wght@100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Ribeye&display=swap');

/* google fonts */

html,
body,
div,
span,
h1,
h2,
h3,
h4,
h5,
h6,
p,
a,
strong,
i,
ol,
ul,
li,
form,
label,
footer,
header,
menu,
nav,
section {
  margin: 0;
  padding: 0;
}

ol,
ul {
  list-style: none;
}

a {
  text-decoration: none;
}

button:focus,
a:focus,
input:focus,
textarea:focus,
select:focus {
  outline: none;
}

body {
  font-family: "Roboto", sans-serif;
  box-sizing: border-box;
  overflow-x: hidden;
  scroll-behavior: smooth;
  background-color: var(--white);
}

/* main {
  overflow-x: hidden;
} */

:root {
  --white: #fff;
  --black: #000;
  --Schemes-Primary: #00696D;
  --lightBlack: #1a1a1a;
  --light-grey: #71717A;
  --blue: #172db7;
  --light-blue: #773DF2;
  --white-blue: #AEC7FF;
  --pink: #eb4a84;
  --light-pink: #F8D8FD;
  --light-salmon: #EFB8CC;
  --sky-blue: #DBEDFF;
  --heading-two: 32px;
  --heading-three: 24px;
  --heading-four: 22px;
  --text-xs: 12px;
  --text-sm: 14px;
  --text-reg: 16px;
  --text-md: 24px;
  --text-lg: 32px;
  --text-xlg: 40px;
}

/*======== FONT STYLES ========*/

.text-reg {
  font-size: var(--text-reg);
}

.text-sm {
  font-size: var(--text-sm);
}

.text-xs {
  font-size: var(--text-xs);
}

.text-md {
  font-size: var(--text-md);
}

.text-lg {
  font-size: var(--text-lg);
}

.text-xlg {
  font-size: var(--text-xlg);
}

.fw-400 {
  font-weight: 400;
}

.fw-500 {
  font-weight: 500;
}

.fw-600 {
  font-weight: 600;
}

.fw-700 {
  font-weight: 700;
}

.fw-800 {
  font-weight: 800;
}

.fw-900 {
  font-weight: 900;
}

/*======== COLOR STYLES ========*/

.color-white {
  color: var(--white);
}

.color-pink {
  color: var(--pink);
}

.color-black {
  color: var(--black);
}

.color-lightblack {
  color: var(--lightBlack);
}

.color-lightgrey {
  color: var(--light-grey);
}

.color-blue {
  color: var(--blue);
}

.bg-blue {
  background: var(--blue);
}

.color-lightblue {
  color: var(--light-blue);
}

.bg-lightsalmon {
  background: var(--light-salmon);
}

.bg-white {
  background: var(--white);
}

.bg-offwhite {
  background: #F1F1F1;
}

.bg-whiteblue {
  background: var(--white-blue);
}

.bg-pink {
  background: var(--pink);
}

.bg-lightpink {
  background: var(--light-pink);
}

.bg-lightblue {
  background: var(--light-blue);
}

.bg-skyblue {
  background: var(--sky-blue);
}

.bg-lightblack {
  background: #1A1A1A;
}

.bg-lightgreen {
  background: #17B7AD;
}

.bg-skygreen {
  background: #99F2BB;
}

.bg-lightsky {
  background: #DEE1FA;
}

.bg-semiblue {
  background: #D6C5FC;
}


/* common style starts */
/* common style =End= */

/* Home Hero section start From Here: */
.dashboard-section{
  display: flex;
  background-color: #FFFFFF;
}
.dasboard-sidebar {
  border-radius: 20px;
  background: var(--Schemes-Primary);
  position: sticky;
  top: 0;
  bottom: 0;
  left: 0;
  min-width: 336px;
  height: 100vh;
  overflow: hidden;
  transition: all 0.5s linear;
  display: flex;
  flex-direction: column;
  margin: 12px;
}
.dashboard-logo {
  padding: 38px 61px 54px 60px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}
.dashboard-logo-text{
  color:  #FFF;
text-align: center;
font-family: Ribeye;
font-size: 40px;
font-style: normal;
font-weight: 400;
line-height: 24px; 
letter-spacing: 0.5px;
}
.dashboard-menu{
  display: flex;
  flex-direction: column;
  gap: 20px;
  position: relative;
  flex-grow: 1;
  padding: 40px 37px 0px 37px;
}
.dashboard-menu li{
  transition: all 0.5s ease-in-out;
  padding: .7rem;
  border-radius: 12px;
}
.dashboard-menu li a{
  color: white;
  display: flex;
  gap: 12px;
}
.dashboard-menu li:not(:last-child):hover{
 background-color: rgb(146, 96, 96);
}
.dashboard-signout{
  position: absolute;
  bottom:0;
  left: 0;
  margin-left: 37px;
  margin-bottom: 77px;
}
.dashboard-logo svg {
  transition: fill 0.3s;
}

.dashboard-menu li.dashboard-menu-active svg path,
.dashboard-menu li.dashboard-menu-active a {
  fill:#F8CF2C;
  color:#F8CF2C;
}
.mobile-dashboard-sidebar{
  display: none;
  position: absolute;
  left: -348px; 
}
.mobile-dashboard-sidebar.active {
  left: 0; 
}
.mobile-sidebar-icon{
  display: none;
  border: none;
  background-color: inherit;
}
.mobile-sidebar-icon img{
  width: 40px;
  height: 40px;
}


/* dashboard header */
.dashboard-main-content{
  display: flex;
  flex-direction: column;
  width: calc(100%-336px);
  padding: 0px 35px 20px 33px ;
  flex-grow: 1;
}
.dashboard-header{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 276px;
 padding: 42px 0px 40px;
}
.dashboard-header-right{
  display: flex;
  align-items: center;
  gap: 12px;
}
.dashboard-header-left{
  display: flex;
  align-items: center;
  flex-grow: 1;
}
.account-btn{
  cursor: pointer;
}
.account-btn img,
.notification-bar svg{
  width: 56px;
  height: 56px;
}
.search-filter-wrapper{
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: 14px;
border: 1px solid var #E5E2E1;
background: #FFF;
box-shadow: 0px 12px 45px 0px rgba(18, 23, 21, 0.05);
padding: 5px 5px 5px 22px;
width: 100%;
}
.search-filter-wrapper input{
 border: none;
 flex-grow: 1; 
}
.search-filter-wrapper .filter-btn{
 border: none;
 display: flex;
padding: 17px 29px;
align-items: center;
gap: 10px;
border-radius: 14px;
background: var(--Schemes-Primary);
float: right;
}
.offcanvas{
  padding-left: 32px;
  max-width: 625px !important;
}

.offcanvas-header p{
  color: #171A1F;
  font-family: Roboto;
  font-size: 36px;
  font-style: normal;
  font-weight: 400;
  line-height: 44px;
}
.offcanvas-header button{
  border: none;
  color:  #ECECEE;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  letter-spacing: -0.24px;
  border-radius: 14px;
  padding: 11px 37px;
background: var(--Schemes-Primary);
}
.filter-sidebar{
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.product-filter-options,
.collection-wrapper{
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.product-filter-options label{
  color: #2B2930;
font-family: Roboto;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 24px;
letter-spacing: 0.5px;
}
.input-wrapper{
  display: flex;
  gap: 8px;
}
.common-filtering-heading{
  color: #121715;
font-family: Roboto;
font-size: 22px;
font-style: normal;
font-weight: 600;
line-height: 28px;
}
.price-inputs{
  display: flex;
  gap: 8px;
  align-items: center;
}
.price-inputs input{
  width: 95px;
}
.price-inputs input::placeholder{
  color: rgba(17, 15, 36, 0.40);
font-family: Satoshi;
font-size: 12px;
font-style: normal;
font-weight: 400;
line-height: 19px;
padding: 8px;
}
.price-inputs p{
  color: #9095A0;
  font-family: Satoshi;
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px;
}
.price-inputs svg{
 margin-left: 4px;
}
.filter-by-p{
  color: var(--Schemes-Primary);
font-family: Roboto;
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 20px;
letter-spacing: 0.25px;
}
.filter-btn-area{
  display: flex;
  align-items: center;
  justify-content: center;
}

.filter-submit{
  padding: 16px 32px;
  background: var(--Schemes-Primary);
  color: #FFF;
text-align: center;
font-family: Roboto;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 24px; 
letter-spacing: 0.5px;
border: none;

}
/* Hide default checkbox */



/* dashboard content-wrapper */
.dashboard-content-wrapper{
  display: flex;
  padding: 40px 44px 40px 33px;
}
.dasboard-content-left{
  display: flex;
  flex-direction: column;
  gap: 40px;
  width: 60%;
  padding-right: 105px;
  border-right: 1px solid #b4adad

}
.dashboard-single-content{
  display: flex;
  flex-direction: column;
  gap: 16px;
  border: 1px solid #F3F3F380;
  border-radius: 16px;
  padding: 12px 8px 7px;
}
.content-author-time{
  display: flex;
  align-items: flex-start;
  gap: 18px;
}
.content-author-time img{
  height: 40px;
  width: 40px;
  object-fit: cover;
}
.content-heading-time{
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.content-heading-time h2{
  font-size: 18px;
  font-weight: 600;
  line-height: 23.76px;
  letter-spacing: -0.02em;
  text-align: left;
  color: #252C32;
  
}
.content-heading-time p{
  font-size: 12px;
  font-weight: 400;
  line-height: 19.68px;
  text-align: left;
  color: #6B7280;
}
.content-heading-time .dashboard-para{
  font-family: Inter;
  font-size: 14px;
  font-weight: 400;
  line-height: 22px;
  text-align: left;
  margin: 5px 0px 16px;
  color: #838383;
}
.content-image img{
  width: 100%;
  height: 100%;
  border-radius: 8px;
  object-fit: cover;
}

.dasboard-content-right{
  display: flex;
  flex-direction: column;
  gap: 40px;
  width: 40%;
  padding: 0px 44px 0px 86px;
}
.dashboard-activity-card-wrapper{
  display: grid;
  grid-template-columns: auto;
  row-gap: 40px;
}
.latest-activity{
font-size: 24px;
font-weight: 600;
line-height: 31.68px;
letter-spacing: -0.02em;
text-align: left;
color: #252C32;
}
.dashboard-activity-single-card{
  position: relative;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.25) 50%, rgba(0, 0, 0, 0.5) 100%);
}
.dashboard-activity-single-card img{
 /* width: 100%; */
}
.dashboard-activity-card-text{
  position: absolute;
  bottom: 12px;
  left: 26px;
  z-index: 10;

}
.dashboard-activity-card-text-container{
position: absolute;
height: 100%;
width: 100%;
left: 0;
top: 0;
background-color: rgba(0, 0, 0, 0.4);
}
.dashboard-activity-card-text h3{
  color: White;
  font-size: 18px;
  font-weight: 600;
  line-height: 23.76px;
  letter-spacing: -0.02em;
  text-align: left;
}
.dashboard-activity-card-text p{
  font-size: 16px;
  font-weight: 400;
  line-height: 26.24px;
  text-align: left;
  color: #EFF5FE;
}

/* chart start */
.chart-wrapper{
  display: grid;
  grid-template-columns: auto auto auto;
  gap: 40px;
}
.chart-item{
  max-width: 500px;
  max-height: 431px;
}
.chart-wrapper .chart-bigger .chart-item{
  max-width: 100%;
  min-width: 1000px;
}
.chart-wrapper .chart-bigger {
  grid-column: span 3;
  max-width: 100%;
}
@media (min-width: 1366px){
  .chart-wrapper .chart-bigger .chart-item{
    max-width: 100%;
    min-width: 100%;
  }
}
/* chart end */


/* responsive */
@media  (max-width: 991px) {
  .desktop-dasboard-sidebar{
    display: none;
  }
  .mobile-sidebar-icon{
    display: block;
  }
  .mobile-dashboard-sidebar{
    display: block;
  }
  .mobile-dashboard-sidebar .dashboard-menu {
    position: static;
}

}
@media only screen and (min-width: 1801px) {
  .dashboard-header-left {
    display: flex;
    align-items: center;
    width: 70%;
}
  .dashboard-header-right {
    width: 20%;
    display: flex;
    align-items: center;
    justify-content: center;
}
/* dashboard start */
.dashboard-header {
  gap: 20px;
  padding: 22px 0px 20px;
  justify-content: center;
}
.dashboard-main-content {
padding: 0px 15px 20px 20px;
flex-grow: 1;
}
.dashboard-content-wrapper {
padding: 20px;
width: 100%;
}
.chart-wrapper {
grid-template-columns: repeat(3,1fr);
column-gap: 14px;
row-gap: 70px;
width: 100%;
}
.dasboard-sidebar {
  min-width: 277px;
}

}
@media only screen and (min-width: 1600px) and (max-width: 1800px) {
      /* dashboard start */
      .dashboard-header {
        gap: 20px;
        padding: 22px 0px 20px;
        justify-content: center;
      }
      .dashboard-main-content {
      padding: 0px 15px 20px 20px;
      flex-grow: 1;
      }
      .dashboard-content-wrapper {
      padding: 20px;
      width: 100%;
      }
      .chart-wrapper {
      grid-template-columns: repeat(2,1fr);
      column-gap: 40px;
      row-gap: 70px;
      width: 100%;
      }
      .dasboard-sidebar {
        min-width: 277px;
      }

}

.no-scroll{
  overflow: hidden;  
}