@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@1,700;1,900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800;900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Lato:ital,wght@1,700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Rubik:ital,wght@1,700;1,800&display=swap");

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

/* Changing ScrollBar styles for Firefox Browser */
html {
  scrollbar-width: normal;
  scrollbar-color: #2a2e99 #0075ff;
}

/* Changing Scrollbar styles for other Browsers */
html::-webkit-scrollbar {
  width: 0.5vw;
}

html::-webkit-scrollbar-thumb {
  background-color: #22234b;
}

html::-webkit-scrollbar-thumb:hover {
  background-color: #0075ff;
}

html::-webkit-scrollbar-track {
  background-color: #0e091d;
}

html::-webkit-scrollbar-track:hover {
  background-color: #2a2e99;
}
/*  */

body {
  font-family: "Poppins", sans-serif;
  /* background-color: #0e091e; */
  /* background: linear-gradient(
    122deg,
    rgba(14, 9, 30, 1) 0%,
    rgba(17, 10, 42, 1) 33%,
    rgba(41, 42, 145, 1) 100%
  ); */
  /* background: linear-gradient(
    162deg,
    rgba(14, 9, 30, 1) 0%,
    rgba(17, 10, 42, 1) 43%,
    rgba(24, 20, 74, 1) 79%,
    rgba(28, 25, 89, 1) 87%,
    rgba(33, 32, 111, 1) 93%,
    rgba(41, 42, 145, 1) 100%
  ); */
  /* background: linear-gradient(
    162deg,
    rgba(14, 9, 30, 1) 0%,
    rgba(17, 10, 42, 1) 21%,
    rgba(24, 20, 74, 1) 57%,
    rgba(28, 25, 89, 1) 72%,
    rgba(33, 32, 111, 1) 85%,
    rgba(41, 42, 145, 1) 100%
  ); */
  background: url("./img/main-bg-img.png") 0% 0% / cover;
}

/* Mid-Section Circular Animation */
.mid-2-circle.move {
  stroke-dashoffset: 580.2557983398438;
  animation: anim2 1.5s linear forwards;
}

.mid-1-circle.move {
  stroke-dashoffset: 581.1946409141117;
  animation: anim1 1.5s linear forwards;
}

@keyframes anim2 {
  100% {
    stroke-dashoffset: 174.3583922742335;
  }
}

@keyframes anim1 {
  100% {
    stroke-dashoffset: 116.23892818282229;
  }
}

/* Aside Settings section */
#aside {
}

#aside .aside-container {
}

#aside .aside-container .aside-settings-icon {
  position: fixed;
  bottom: 35px;
  right: 50px;
  z-index: 1000000000;
  height: 60px;
  width: 60px;
  border-radius: 50%;
  background-color: #0075ff;
  display: grid;
  place-items: center;
  cursor: pointer;
}

#aside .aside-container .aside-settings-icon svg {
  fill: #fff;
}

/* Checkbox Toggle Widget Styles*/
.toggle {
  visibility: hidden;
}

.toggle-container input {
  display: none;
}

.label {
  position: relative;
  background-color: #d0d0d0;
  border-radius: 50px;
  cursor: pointer;
  display: inline-block;
  /* margin: 0 15px 0; */
  width: 40px;
  height: 20px;
  /* width: 80px;
  height: 40px; */
}

.toggle:checked + .label {
  background-color: #0075ff;
}

.ball {
  background: #fff;
  height: 14px;
  width: 14px;
  border-radius: 50%;
  position: absolute;
  top: 3px;
  left: 3px;
  animation: slideOff 0.2s linear forwards;
}

.toggle:checked + .label .ball {
  animation: slideOn 0.2s linear forwards;
}

@keyframes slideOn {
  0% {
    transform: translateX(0) scale(1);
  }

  50% {
    transform: translateX(10px) scale(1.2);
    /* transform: translateX(20px) scale(1.2); */
  }

  100% {
    transform: translateX(20px) scale(1);
    /* transform: translateX(40px) scale(1); */
  }
}

@keyframes slideOff {
  0% {
    transform: translateX(20px) scale(1);
    /* transform: translateX(40px) scale(1); */
  }

  50% {
    transform: translateX(10px) scale(1.2);
    /* transform: translateX(20px) scale(1.2); */
  }

  100% {
    transform: translateX(0px) scale(1);
  }
}

/* Right Side Popping SideMenu section*/

#right-article {
  position: fixed;
  z-index: 10000000000000000000000000000000000;
}

.right-heading {
  border-bottom: 0.1px solid #68748c;
}

.right-heading .right-heading-container {
  display: flex;
  flex-direction: column;
  align-items: start;
  /* justify-content: center; */
  gap: 2px;
  color: #fff;
  cursor: pointer;
}

.right-heading .right-heading-container h2 {
  font-size: 20px;
}

.right-heading .right-heading-container h5 {
  font-size: 17px;
  margin-bottom: 20px;
}

.right-colors {
  margin-top: 20px;
  border-bottom: 0.1px solid #8d9bb5;
}

.right-colors .colors-description {
  display: flex;
  flex-direction: column;
  align-items: start;
  gap: 10px;
}

.right-colors .colors-description p {
  font-weight: 600;
  font-size: 16px;
}

.right-colors .colors-description .colors {
  display: flex;
  align-items: start;
  gap: 10px;
}

.right-colors .colors-description .colors .color {
  cursor: pointer;
  height: 24px;
  width: 24px;
  border-radius: 50%;
  background-color: #0075ff;
  border: 0.1px solid #fff;
}

.right-colors .colors-description .colors .color:hover {
  border: none;
}

.right-colors .colors-description .colors .purple {
  background: linear-gradient(to right, #835cf0, #6138f8);
}
.right-colors .colors-description .colors .royalblue {
  background: linear-gradient(to right, #18b9fe, #0b94ff);
}
.right-colors .colors-description .colors .green {
  background: linear-gradient(to right, #8fe7b9, #42cc94);
}
.right-colors .colors-description .colors .orange {
  background: linear-gradient(to right, #f99d35, #f75e38);
}
.right-colors .colors-description .colors .orangered {
  background: linear-gradient(to right, #f53c2b, #f53c2b);
}

/* Activating Individual Button */
/* .right-colors .colors-description .colors.activate .color {
  border: 2px solid black;
} */

.right-colors .colors-description .colors .purple.activate {
  border: 2px solid black;
}
.right-colors .colors-description .colors .royalblue.activate {
  border: 2px solid black;
}
.right-colors .colors-description .colors .green.activate {
  border: 2px solid black;
}
.right-colors .colors-description .colors .orange.activate {
  border: 2px solid black;
}
.right-colors .colors-description .colors .orangered.activate {
  border: 2px solid black;
}

.navbar-controller {
  margin: 20px 0;
}

.navbar-controller .controller-description {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: start;
  gap: 4px;
}

.buttons-section {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 16px;
}

.buttons-section .btn {
  width: 100%;
  padding: 10px 20px;
  text-transform: uppercase;
  border-radius: 12px;
  /* border: none; */
  outline: none;
  transition: all 0.2s ease;
}

.buttons-section .btn:hover {
  transform: scale(1.02);
  cursor: pointer;
}

.buttons-section .download {
  background-color: #0075ff;
  border: none;
  color: #fff;
}
.buttons-section .documentation {
  background: transparent;
  color: #0075ff;
  border-color: #0075ff;
  border: 0.1px solid;
}

.buttons-section .documentation:hover {
  box-shadow: 0 0 5px #095ab7, 0 0 25px #095ab7, 0 0 50px #095ab7,
    0 0 100px #095ab7;
  color: #3787e3;
}

.stars {
  display: flex;
  align-items: center;
  gap: 0;
}

.stars .star-icon {
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
  display: flex;
  gap: 2px;
  padding: 5px 12px;
  border: none;
  outline: none;
  transition: opacity 0.2s ease;
}

.stars .star-icon:hover {
  opacity: 0.9;
  cursor: pointer;
}

.stars .number-stars {
  background-color: #fff;
  color: #080c28;
  font-size: 13px;
  display: grid;
  place-items: center;
  align-self: stretch;
  padding: 3px 12px;
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
  transition: color 0.2s ease;
}

.stars .number-stars:hover {
  color: #0075ff;
  cursor: pointer;
}

.sharing-section {
  margin-top: 40px;
}

.sharing-section .sharing-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.sharing-section .sharing-container .share-btns {
  display: flex;
  gap: 10px;
}

.sharing-section .sharing-container .share-btns .tweet,
.sharing-section .sharing-container .share-btns .fb {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 10px 20px;
  background-color: #344767;
  color: #fff;
  border-radius: 10px;
  border: none;
  outline: none;
  transition: all 0.2s ease;
}

.sharing-section .sharing-container .share-btns .tweet p,
.sharing-section .sharing-container .share-btns .fb p {
  font-weight: 600;
  transition: all 0.2s ease;
}

.sharing-section .sharing-container .share-btns .tweet svg,
.sharing-section .sharing-container .share-btns .fb svg {
  fill: #fff;
}

.sharing-section .sharing-container .share-btns .tweet:hover,
.sharing-section .sharing-container .share-btns .fb:hover {
  transform: scale(1.02);
  /* color: #18b9fe; */
  cursor: pointer;
}

.sharing-section .sharing-container .share-btns .tweet:hover p,
.sharing-section .sharing-container .share-btns .fb:hover p {
  transform: translate(0, 0);
}

.sidebar {
  color: #fff;
  position: fixed;
  top: 0;
  right: 0;
  /* height: 100vh; */
  height: 100%;
  transform: translateX(100%);
  transition: transform 0.3s ease-in-out;
  /* overflow: hidden; */
}

.sidebar.visible {
  transform: translateX(0);
}

.sidebar-black {
  background-color: rgb(34, 31, 31);
  width: 60%;
  max-width: 400px;
  min-width: 320px;
  transition-delay: 0.4s;
}

.sidebar-black.visible {
  transition-delay: 0s;
}

.sidebar-blue {
  background-color: #2a2e99;
  width: 100%;
  transition-delay: 0.2s;
}

.sidebar-blue.visible {
  transition-delay: 0.2s;
}

#right-article .right-article-container .sidebar-darkblue {
  position: relative;
  overflow-y: scroll;
  scroll-behavior: smooth;
  scrollbar-width: 0.1px;
  /* background-color: #0e091d; */
  background: linear-gradient(to bottom right, #080c28, #0e174e, #112262);
  width: 100%;
  padding: 40px;
  transition-delay: 0s;
}

#right-article .right-article-container .sidebar-darkblue.visible {
  transition-delay: 0.4s;
}

#right-article .right-article-container .right-close-btn {
  border: none;
  background-color: transparent;
  cursor: pointer;
  font-size: 20px;
  z-index: 1000000;
  color: #fff;
  /* Later written part */
  position: absolute;
  top: 40px;
  right: 30px;
  opacity: 0.3;
}

/* SideMenu section */

#article {
  position: fixed;
  z-index: 1000000;
}

#article .article-container .nav-btn {
  border: none;
  background-color: transparent;
  cursor: pointer;
  font-size: 20px;
  z-index: 1000000;
  color: #fff;
}

.sidebar-heading .heading-container {
  display: flex;
  align-items: center;
  /* justify-content: center; */
  gap: 10px;
  color: #fff;
  cursor: pointer;
}

.sidebar-heading .heading-container .heading-logo {
  height: 24px;
  width: 24px;
}

.sidebar-heading .heading-container h2 {
  text-transform: uppercase;
  font-size: 20px;
  font-weight: 500;
  letter-spacing: 2px;
  color: #d3e2fe;
}

.nav {
  position: fixed;
  top: 0;
  left: 0;
  /* height: 100vh; */
  height: 100%;
  transform: translateX(-100%);
  transition: transform 0.3s ease-in-out;
  /* overflow: hidden; */
}

.nav.visible {
  transform: translateX(0);
}

.nav-black {
  background-color: rgb(34, 31, 31);
  width: 60%;
  max-width: 480px;
  min-width: 320px;
  transition-delay: 0.4s;
}

.nav-black.visible {
  transition-delay: 0s;
}

.nav-red {
  /* background-color: #2a2e99; */
  background: linear-gradient(to right, #1ac1fd, #0b94ff);
  width: 95%;
  transition-delay: 0.2s;
}

.nav-red.visible {
  transition-delay: 0.2s;
}

.nav-white {
  overflow-y: scroll;
  scroll-behavior: smooth;
  scrollbar-width: 0.1px;
  background-color: #0e091d;
  width: 95%;
  padding: 40px;
  position: relative;
  transition-delay: 0s;
}

.nav-white.visible {
  transition-delay: 0.4s;
}

.close-btn {
  position: absolute;
  top: 40px;
  right: 30px;
  opacity: 0.3;
}

.list {
  list-style-type: none;
  padding: 0;
}

.list li {
  margin: 20px 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border-radius: 14px;
  transition: background-color 0.2s ease;
}

.list .account-heading {
  text-transform: uppercase;
  color: #fff;
}

.list li:hover {
  background-color: #0f1535;
  cursor: pointer;
}

.list li .list-icon {
  display: grid;
  place-items: center;
  /* color: #0075ff; */
  color: royalblue;
  background-color: #22234b;
  height: 30px;
  width: 30px;
  border-radius: 10px;
}

.list li.active {
  background-color: #0f1535;
  border-radius: 14px;
}

.list li.active .list-icon {
  /* background-color: #0075ff; */
  background: linear-gradient(to right, #1ac1fd, #0b94ff);
  color: #fff;
}

.list li.active .list-icon svg {
  fill: #fff;
}

.list li a {
  color: #fff;
  font-size: 14px;
  text-decoration: none;
  text-transform: capitalize;
}

.list ul {
  list-style-type: none;
}

.list ul li {
  display: flex;
  align-items: center;
  gap: 5px;
}

.list ul .account-btn {
  padding: 14px 20px;
  width: 100%;
  border-radius: 14px;
  background: linear-gradient(to right, #1ac1fd, #0b94ff);
  color: #fff;
  cursor: pointer;
  outline: none;
  border: none;
  transition: transform 0.3s ease;
}

.list ul .account-btn:hover {
  transform: scale(1.1);
}

.list ul li .account-icon {
  display: grid;
  place-items: center;
  background-color: #22234b;
  /* color: #0075ff; */
  color: royalblue;
  height: 30px;
  width: 30px;
  border-radius: 10px;
}

/* .list ul li .account-icon svg {
  fill: #0075ff;
} */

/* Dynamically added classes to icons */
/* .list li .list-icon.purple svg {
  fill: purple;
}
.list li .list-icon.skyblue svg {
  fill: skyblue;
}
.list li .list-icon.green svg {
  fill: green;
}
.list li .list-icon.orange svg {
  fill: orange;
}
.list li .list-icon.orangered svg {
  fill: orangered;
}

.list ul li .account-icon.purple svg {
  fill: purple;
}
.list ul li .account-icon.skyblue svg {
  fill: skyblue;
}
.list ul li .account-icon.green svg {
  fill: green;
}
.list ul li .account-icon.orange svg {
  fill: orange;
}
.list ul li .account-icon.orangered svg {
  fill: orangered;
} */

/*  */

/* Navbar section */

#nav {
  width: 75.5rem;
  max-width: 75rem; /* 1200px */
  margin: 10px auto;
  /* padding: 2.5rem 1rem; */
  padding: 16px;
  /* padding-right: 3rem; */
  background-color: #0e091e;
  color: white;
  border-radius: 20px;
  position: sticky;
  top: 10px;
  z-index: 100;
}

#nav.relative {
  position: static !important;
}

#nav.sticky {
  /* background: transparent; */
  backdrop-filter: blur(2.625rem);
  -webkit-backdrop-filter: blur(2.625rem);
  box-shadow: rgba(255, 255, 255, 0.9) 0rem 0rem 0.0625rem 0.0625rem inset,
    rgba(0, 0, 0, 0.05) 0rem 1.25rem 1.6875rem 0rem;
  background-color: transparent !important;
  border-color: rgba(226, 232, 240, 0.3) !important;
  border: 0.01px solid;
  transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
}

#nav.sticky #nav .container {
  background-color: none !important;
}

#nav.sticky #nav .container .right form .nav-search input {
  outline: inset skyblue 0.4px;
}

#nav .container {
  display: flex;
  justify-content: space-between;
  /* background-color: #0e091e; */
  z-index: 100;
}

#nav .container svg {
  fill: #fff;
}

#nav .container .left {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

#nav .container .left svg {
  fill: #718096;
  cursor: pointer;
}

#nav .container .right svg {
  cursor: pointer;
}

.sign-in {
  cursor: pointer;
}

#nav .container .right {
  display: flex;
  align-items: center;
  gap: 1.2rem;
}

/* For Navbar Input-Field */
#nav .container .right form span:first-child {
  display: flex;
  position: relative;
}

#nav .container .right form .nav-search {
  border-top-left-radius: 50px;
  border-top-right-radius: 50px;
}

#nav .container .right form .nav-search input {
  border: 0;
  font-size: 14px;
  padding: 5px;
  padding-left: 14px;
  height: 40px;
  width: 180px;
  background-color: #0f1535;
  outline: skyblue 2px;
  border-top-right-radius: 50px;
  border-bottom-right-radius: 50px;
  transition: width 0.3s ease;
  caret-color: #fff;
  color: #fff;
  font-weight: 400;
}

#nav .container .right form .nav-search input::placeholder {
  transform: translate(0);
  font-size: 12px;
}

#nav .container .right form .nav-search .btn {
  border: 0;
  font-size: 24px;
  background-color: #0f1535;
  position: absolute;
  top: 0;
  left: 0;
  height: 40px;
  width: 40px;
  border-top-left-radius: 50px;
  border-bottom-left-radius: 50px;
  transform: translateX(-39.65px);
  transition: transform 0.3s ease;
}

#nav .container .right form .nav-search.active input {
  width: 200px;
  box-shadow: inset rgb(98, 143, 194) 0rem 0rem 0rem 0.1rem;
}

#nav .container .right form .nav-search.active .btn-input svg {
  fill: #0075ff;
}

#nav .container .right form .nav-search .btn-input svg {
  font-size: 1.3rem;
  fill: #718096;
}
/*  */

/* Header Section */
#header {
  color: #fff;
}

#header .cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  place-items: center;
  column-gap: 5px;
  row-gap: 20px;
  background-color: #0e091e;
}

#header .cards .card {
  width: 35.625rem; /* 570px */
  background-color: rgb(12, 14, 45);
  padding: 16px;
  /* padding-left: 20px; */
  padding-right: 30px;
  border-radius: 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

#header .cards .card .card-left {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

#header .cards .card .card-left .card-info {
  font-size: 14px;
  color: #93a1b4;
}

#header .cards .card .card-left .card-price strong {
  font-size: 24px;
}

#header .cards .card .card-left .card-price small {
  font-size: 14px;
  font-weight: 600;
  color: #01ab70;
}

#header .cards .card-3 .card-left .card-price small {
  color: #e31a1a;
}

#header .cards .card .card-right {
}

#header .cards .card .card-right .card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border-radius: 14px;
  background-color: #0075ff;
}
/*  */

/* Hero Section */
#hero {
  height: 340px;
  width: 1200px;
  margin: 40px auto;
  /* background: linear-gradient(to left, #292a91, #110a2a); */
}

#hero .hero-section {
  height: 100%;
  max-width: 75rem; /* 1200px */
  border-radius: 20px;
  /* background-color: teal; */
  margin: 0 auto;
  background: url("./img/bg-img.png") center center/cover no-repeat;
  color: #fff;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  /* align-items: start; */
}

#hero .hero-section .hero-greetings {
  display: flex;
  justify-content: space-between;
  align-items: start;
}

#hero .hero-section .hero-action {
  padding: 24px;
  margin-left: 6px;
}

#hero .hero-section .hero-action p {
  font-weight: 400;
  font-size: 15px;
}

#hero .hero-section .hero-action p strong {
  display: inline-block;
  font-weight: 900;
  font-size: 20px;
  cursor: pointer;
  transition: transform 0.2s cubic-bezier(0.34, 1.61, 0.7, 1.3) 0s;
}

#hero .hero-section .hero-action p strong:hover {
  transform: translate(4px, -0.2px);
  /* transform: translate(1px, 0.5px); */
}

#hero .hero-section .hero-left {
  padding: 30px;
  padding-top: 44px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.hero-info {
  color: #68748c;
}

#hero .hero-section .hero-left .hero-name {
  font-size: 30px;
  font-weight: 800;
  margin-top: -16px;
}

.hero-greet {
  color: #68748c;
}
/*  */

/* Middle Section */

#middle {
  height: 100%;
  width: 75rem;
  margin: 40px auto;
  /* background: linear-gradient(to left, #292a91, #110a2a); */
}

#middle .middle-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  height: 100%;
  column-gap: 24px;
  row-gap: 24px;
  /* background: linear-gradient(to right, #292a91, #110a2a); */
}

#middle .middle-section .mid {
  border-radius: 16px;
  color: rgba(0, 0, 0, 0.87);
  display: flex;
  flex-direction: column;
  justify-content: center;
  backdrop-filter: blur(120px);
  position: relative;

  box-shadow: rgba(0, 0, 0, 0.05) 0rem 1.25rem 1.6875rem 0rem;

  transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
  overflow: hidden;
  /* background: linear-gradient(
      127.09deg,
      rgba(6, 11, 40, 0.94) 19.41%,
      rgba(10, 14, 35, 0.49) 76.65%
    )
    border-box; */
  background: linear-gradient(
    118deg,
    rgba(8, 12, 42, 1) 26%,
    rgba(15, 20, 64, 1) 61%,
    rgba(26, 32, 97, 1) 86%,
    rgba(26, 32, 97, 1) 95%
  );
  border-color: rgba(0, 0, 0, 0.125);
  border-image: initial;
  border-radius: 1.25rem;
}

.circular-pbar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 210px;
  width: 210px;
  margin: 0 auto;
}

#middle .middle-section .mid .middle-1-container {
  padding: 20px;
  padding-bottom: 30px;
  color: #fff;
}

.middle-1-container {
}

.middle-1-container .pbar-container {
  position: absolute;
  top: 50px;
  /* left: 28px; */
  height: 50px;
  width: 50px;
  border-radius: 50%;
  background-color: #0075ff;
}

.middle-1-container .pbar-container svg {
  position: absolute;
  top: 10px;
  left: 10px;
}

.middle-1-container .circular-pbar .card {
  position: absolute;
  bottom: 0.5px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-align: center;
  background: linear-gradient(
    118deg,
    rgba(8, 12, 42, 1) 26%,
    rgba(15, 20, 64, 0.9613970588235294) 61%,
    rgba(26, 32, 97, 1) 86%,
    rgba(26, 32, 97, 1) 95%
  );
  width: 34.375rem; /* 550px */
  padding: 16px 40px;
  border-radius: 20px;
  border: 0.01px solid #0075ff;
}

.middle-2-container {
  padding: 24px;
}

.middle-2-container .heading {
  color: #fff;
  display: flex;
  justify-content: space-between;
}

.middle-2-container .heading .menu-stroke {
  height: 35px;
  width: 35px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #22234b;
  cursor: pointer;
}

.middle-2-container .content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 5px;
}

.middle-2-container .content .cards {
  color: #fff;
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 50%;
}

.middle-2-container .content .cards .card {
  border: 0.1px solid #0075ff;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: linear-gradient(
    118deg,
    rgba(8, 12, 42, 1) 26%,
    rgba(15, 20, 64, 0.9613970588235294) 61%,
    rgba(26, 32, 97, 1) 86%,
    rgba(26, 32, 97, 1) 95%
  );
  padding: 10px 30px;
  padding-right: 60px;
  border-radius: 10px;
  width: 100%;
}

.middle-1-container .title {
  font-family: "Poppins", sans-serif;
  font-size: 20px;
  font-weight: 700;
}

.middle-1-container .description {
  font-size: 16px;
  color: #a0aec0;
  font-weight: 400;
}

.middle-1-container .circular-pbar .card p {
  align-self: start;
  color: #a0aec0;
  font-size: 12px;
}

.middle-1-container .circular-pbar .card .card-mid h3 {
  font-size: 24px;
  font-weight: 600;
  font-family: "Rubik", sans-serif;
}

.middle-2-container .pbar-container {
  position: absolute;
  text-align: center;
  color: #fff;
}

.middle-2-container .pbar-container p {
  font-size: 20px;
  font-weight: 600;
  color: #a0aec0;
}
.middle-2-container .pbar-container h3 {
  font-size: 46px;
  font-weight: 700;
  font-family: "Rubik", sans-serif;
}

.middle-2-container .content .circular-pbar {
  margin: 0;
}

#middle .middle-section .middle-3 {
  display: flex;
  flex-direction: column;
  gap: 30px;
  padding: 24px;
  color: #fff;
}

#middle .middle-section .middle-3 .line-graph-container {
  cursor: crosshair;
}

#middle .middle-section .middle-3 .middle-3-heading {
  display: flex;
  flex-direction: column;
  margin-left: 10px;
  /* align-items: center;
  align-self: start; */
}

#middle .middle-section .middle-3 p {
  align-self: start;
  color: #7e8ca8;
}

#middle .middle-section .middle-3 p span {
  color: #01ab70;
}

#middle .middle-section .middle-4 {
  display: grid;
  place-content: center;
}

#middle .middle-section .middle-4 .bar-chart-container {
  background-color: #0e091e;
  border-radius: 20px;
}

#middle .middle-section .middle-4 .middle-4-heading {
  display: flex;
  flex-direction: column;
  color: #fff;
  margin-top: 16px;
}

#middle .middle-section .middle-4 .middle-4-heading h3 {
  font-size: 18px;
}
#middle .middle-section .middle-4 .middle-4-heading p {
  font-size: 13.5px;
  color: #7382a0;
}

#middle .middle-section .middle-4 .middle-4-heading p span {
  color: #01ab70;
  font-weight: 700;
}

#middle .middle-section .middle-4 .middle-4-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  place-items: center;
  column-gap: 36px;
  margin-top: 40px;
  color: #fff;
}

#middle .middle-section .middle-4 .middle-4-stats .stats-cards .stats-icon {
  display: flex;
  color: #8d9bb5;
  gap: 8px;
}

#middle .middle-section .middle-4 .middle-4-stats .stats-cards .stats-icon p {
  font-size: 14px;
}

#middle .middle-section .middle-4 .middle-4-stats .stats-cards {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

#middle .middle-section .middle-4 .middle-4-stats .stats-cards .progress-bar {
  display: flex;
  flex-direction: column;
}

#middle
  .middle-section
  .middle-4
  .middle-4-stats
  .stats-cards
  .progress-bar
  .pro-bar {
  position: relative;
  height: 5px;
  width: 100px;
  background-color: #718096;
  border-radius: 16px;
  overflow: hidden;
}

#middle
  .middle-section
  .middle-4
  .middle-4-stats
  .stats-cards
  .progress-bar
  .pro-bar::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  background-color: #0075ff;
  height: 100%;
  width: 50%;
}

#middle
  .middle-section
  .middle-4
  .middle-4-stats
  .stats-cards
  .stats-icon
  .icon {
  height: 24px;
  width: 24px;
  border-radius: 5px;
  background-color: #0075ff;
  display: flex;
  justify-content: center;
  align-items: center;
}
/*  */

/* Table section */

img {
  height: 22px;
  width: 22px;
  border-radius: 50%;
}

#table {
  width: 1280px;
  max-width: 1230px;
  display: grid;
  grid-template-columns: 2fr 1fr;
  place-items: center;
  margin: 0 auto;
  /* border-collapse: collapse; */
}

.table-section {
  /* width: 800px; */
  background: linear-gradient(
    118deg,
    rgba(8, 12, 42, 1) 26%,
    rgba(15, 20, 64, 0.9613970588235294) 61%,
    rgba(26, 32, 97, 1) 86%,
    rgba(26, 32, 97, 1) 95%
  );
  color: #fff;
  padding: 20px 30px;
  grid-column: 1 / 2;
  border-radius: 20px;
}

.table-section .table-container {
  padding-top: 10px;
}

.table-container .table-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
}

.table-container .table-heading .menu-svg {
  align-self: start;
  fill: #a0aec0;
  cursor: pointer;
}

.table-container .table-heading .heading {
  display: flex;
  flex-direction: column;
}

/* .table-content .table-body .table-contents {
  margin-right: 0;
} */

.table-content .table-body .table-contents {
  border-collapse: collapse;
}

.table-content .table-body .table-contents .t-head {
  /* padding: 20px; */
}

.table-content .table-body .table-contents .t-head .t-row {
  text-align: left;
}

.table-content .table-body .table-contents .t-head .t-row th {
  font-weight: 600;
  font-size: 13px;
  color: #68748c;
  border-bottom: 0.4px solid #68748c6d;
}

.table-content .table-body .t-body .flex-col {
  display: flex;
  align-items: center;
  gap: 10px;
}

.table-content .table-body .t-body .t-body-rows {
  /* display: flex;
  justify-content: space-evenly;
  gap: 20px; */
}

tr th:first-of-type,
tr td:first-of-type {
  padding-left: 0px !important;
}

th,
td {
  padding: 14px 35px;
}

tr {
  border-bottom: 0.1px solid #68748c6d;
  border-collapse: collapse;
}

tr:last-child {
  border-bottom: none !important;
}

.table-content .table-body .t-body .t-body-d2 .pro-pics {
  display: flex;
  flex-direction: row;
}

.table-content .table-body .t-body .t-body-d2 .pro-pics .pro-pic {
  margin-right: -5px;
  transition: all 0.4s;
}

.table-content .table-body .t-body .t-body-d2 .pro-pics .pro-pic:hover {
  cursor: pointer;
  z-index: 100;
}

.table-content .table-body .t-body .t-body-d2 .pro-pics .pro-pic img:hover {
  border: 0.4px solid black;
}

.table-content .table-body .t-body .t-body-d4 {
  /* padding: 10px; */
}

.table-content .table-body .t-body .t-body-d4 .lable-bar {
}

.table-content .table-body .t-body .t-body-d4 .lable-bar .p-bar {
  position: relative;
  height: 5px;
  width: 100%;
  /* width: 100px; */
  border-radius: 4px;
  overflow: hidden;
  background-color: #68748c;
}

.table-content .table-body .t-body .t-body-d4 .lable-bar .p-bar::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  background-color: #0075ff;
  height: 6px;
  width: calc(var(--width, 0) * 1%);
}

.orders {
  background: linear-gradient(
    118deg,
    rgba(8, 12, 42, 1) 26%,
    rgba(15, 20, 64, 0.9613970588235294) 61%,
    rgba(26, 32, 97, 1) 86%,
    rgba(26, 32, 97, 1) 95%
  );
  color: #fff;
  padding: 24px 30px;
  grid-column: 2 / -1;
  grid-row: 1 / -1;
  border-radius: 20px;
  height: 100%;
}

.orders .order-heading {
  display: flex;
  flex-direction: column;
  margin-bottom: 34px;
  margin-top: 6px;
}

.orders .order-heading p {
  color: #7382a0;
  font-size: 14px;
}

.orders-list .orders-container {
  display: flex;
  flex-direction: column;
  gap: 25px;
}

.orders-list .orders-container .order-item {
  display: flex;
  gap: 20px;
}

.orders-list .orders-container .order-item .description {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.orders-list .orders-container .order-item .description h5 {
  font-size: 16px;
  font-weight: 300;
}

.orders-list .orders-container .order-item .description p {
  font-size: 12px;
  color: #93a1b4;
}

.orders-list .orders-container .order-item .icon svg {
  /* height: 20.5px;
  width: 20.5px; */
}

/*  */

/* Footer Container */
#footer {
  width: 75.5rem;
  max-width: 75rem;

  color: #fff;
  /* padding: 20px; */
}

#footer .footer-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px;
  margin-top: 20px;
}

#footer .footer-container .right {
}

#footer .footer-container .left {
}

#footer .footer-container .left ul {
  display: flex;
  align-items: center;
  gap: 20px;
}

#footer .footer-container .left ul li {
  list-style: none;
}

#footer .footer-container .right a,
#footer .footer-container .left a {
  text-decoration: none;
  color: #fff;
  font-weight: 700;
  transition: all 0.2s ease;
}

#footer .footer-container .right a:hover,
#footer .footer-container .left a:hover {
  color: #0075ff;
}

/* Media Queries */
@media screen and (min-width: 1300px) {
  #header {
    max-width: 75rem;
    min-width: 75rem;
    margin: 0 auto;
  }

  #footer {
    min-width: 75rem;
    margin: 0 auto;
  }
}

@media screen and (min-width: 1200px) {
  #nav {
    max-width: 73.5rem;
  }

  #header {
    max-width: 73.5rem;
    margin: 0 auto;
  }

  #hero {
    max-width: 73.5rem;
  }

  #middle {
    max-width: 73.5rem;
  }

  #table {
    width: 75rem;
    max-width: 73.5rem;
  }

  #footer {
    transform: translate(20px, 0);
  }
}

@media screen and (max-width: 1199px) {
  #nav {
    max-width: 71.5rem;
  }

  #header {
    max-width: 71.5rem;
    margin: 0 auto;
  }

  #hero {
    max-width: 71.5rem;
  }

  #middle {
    max-width: 71.5rem;
  }

  #middle .middle-section .middle-3 {
    padding: 0;
  }

  #middle .middle-section .middle-3 .middle-3-heading {
    padding: 10px;
  }

  #middle .middle-section .middle-4 .middle-4-heading {
    padding-left: 20px;
  }

  #middle .middle-section .middle-4 .middle-4-stats {
    padding: 20px;
    margin-top: 30px;
  }

  #table {
    width: 75rem;
    max-width: 71.5rem;
    column-gap: 20px;
  }

  #footer {
    max-width: 71rem;
  }
}

@media screen and (max-width: 1150px) {
  #nav {
    max-width: 69rem;
  }

  #header {
    max-width: 69rem;
  }

  #header .cards {
    width: 69rem;
  }

  #header .cards .card {
    width: 33.75rem;
    padding: 8px;
  }

  #hero {
    max-width: 69rem;
  }

  #middle {
    max-width: 69rem;
  }

  #table {
    width: 75rem;
    max-width: 69rem;
  }

  #footer {
    max-width: 69rem;
  }
}

@media screen and (max-width: 1111px) {
  #nav {
    max-width: 66.5rem;
  }

  #header {
    max-width: 66.5rem;
    margin: 0 auto;
  }

  #header .cards {
    width: 66.5rem;
  }

  #header .cards .card {
    width: 31.25rem;
    padding: 8px;
  }

  #hero {
    max-width: 66.5rem;
  }

  #middle {
    max-width: 66.5rem;
  }

  #middle .middle-section .middle-1 .middle-1-container .circular-pbar .card {
    width: 29.375rem;
    bottom: 0px;
  }

  #middle .middle-section .middle-2 .middle-2-container .heading {
    margin-top: -16px;
  }

  #middle .middle-section .middle-3 {
    padding: 0;
  }

  #middle .middle-section .middle-3 .middle-3-heading {
    padding: 10px;
  }

  #middle .middle-section .middle-4 .middle-4-heading {
    padding-left: 20px;
  }

  #middle .middle-section .middle-4 .middle-4-stats {
    padding: 20px;
    margin-top: 30px;
  }

  #table {
    width: 75rem;
    max-width: 66.5rem;
  }

  #footer {
    max-width: 66.5rem;
  }
}

@media screen and (max-width: 1080px) {
  #nav {
    max-width: 64.5rem;
  }

  #header {
    max-width: 64.5rem;
    margin: 0 auto;
  }

  #header .cards {
    width: 64.5rem;
  }

  #header .cards .card {
    width: 31.25rem;
    padding: 8px;
  }

  #hero {
    max-width: 64.5rem;
  }

  #middle {
    max-width: 64.5rem;
  }

  #middle .middle-section .middle-1 .middle-1-container .circular-pbar .card {
    width: 29.375rem;
    bottom: 0px;
  }

  #middle .middle-section .middle-2 .middle-2-container .heading {
    margin-top: -16px;
  }

  #middle .middle-section .middle-3 {
    padding: 0;
  }

  #middle .middle-section .middle-3 .middle-3-heading {
    padding: 10px;
  }

  #middle .middle-section .middle-4 .middle-4-stats {
    column-gap: 0px;
  }
  #middle .middle-section .middle-4 .middle-4-stats .stats-cards {
    gap: 5px;
  }
  #middle
    .middle-section
    .middle-4
    .middle-4-stats
    .stats-cards
    .progress-bar
    h3 {
    font-size: 24px;
  }
  #middle
    .middle-section
    .middle-4
    .middle-4-stats
    .stats-cards
    .progress-bar
    .pro-bar {
    width: 70px;
  }

  #table {
    width: 75rem;
    max-width: 64.5rem;
  }

  #footer {
    max-width: 64.5rem;
  }
}

@media screen and (max-width: 1060px) {
  #nav {
    max-width: 62.5rem;
  }

  #header {
    max-width: 62.5rem;
    margin: 0 auto;
  }

  #header .cards {
    width: 62.5rem;
  }

  #header .cards .card {
    width: 31.25rem;
    padding: 8px;
  }

  #hero {
    max-width: 62.5rem;
  }

  #middle {
    max-width: 62.5rem;
  }

  #table {
    width: 75rem;
    max-width: 62.5rem;
  }

  #footer {
    max-width: 62.5rem;
  }

  /* Now added styles */
  .t-body-d1 span .flex-col .name {
    font-size: 20px;
  }

  .t-body-d2 .pro-pics .pro-pic img {
    height: 30px;
    width: 30px;
  }

  .t-body-d3 .budget h3 {
    font-size: 20px;
  }

  .t-body-d4 .lable-bar h5 {
    font-size: 20px;
  }

  /* Below 750px media-query styles Copied */

  body {
    background: url("./img/main-bg-img.png") repeat left center/cover;
  }

  #aside .aside-container .aside-settings-icon {
    height: 80px;
    width: 80px;
  }

  #aside .aside-container .aside-settings-icon {
    font-size: 1.5rem;
  }

  /* Right Popping Sidebar */
  .right-article-container
    .sidebar-black
    .sidebar-blue
    .sidebar-darkblue
    .right-close-btn
    svg {
    font-size: 30px;
  }

  .right-article-container
    .sidebar-black
    .sidebar-blue
    .sidebar-darkblue
    .right-heading {
    margin-bottom: 20px;
  }
  .right-article-container
    .sidebar-black
    .sidebar-blue
    .sidebar-darkblue
    .right-heading
    .right-heading-container {
    gap: 6px;
  }
  .right-article-container
    .sidebar-black
    .sidebar-blue
    .sidebar-darkblue
    .right-heading
    .right-heading-container
    h2 {
    font-size: 20px;
    /* font-size: 25px; */
  }

  .right-article-container
    .sidebar-black
    .sidebar-blue
    .sidebar-darkblue
    .right-colors {
    margin-top: 35px;
    margin-bottom: 30px;
  }
  .right-article-container
    .sidebar-black
    .sidebar-blue
    .sidebar-darkblue
    .right-colors
    .colors-container
    .colors-description {
    gap: 15px;
  }
  .right-article-container
    .sidebar-black
    .sidebar-blue
    .sidebar-darkblue
    .right-colors
    .colors-container
    .colors-description
    p {
    font-size: 22px;
  }
  .right-article-container
    .sidebar-black
    .sidebar-blue
    .sidebar-darkblue
    .right-colors
    .colors-container
    .colors-description
    .colors {
    gap: 14px;
  }
  .right-article-container
    .sidebar-black
    .sidebar-blue
    .sidebar-darkblue
    .right-colors
    .colors-container
    .colors-description
    .colors
    .color {
    height: 40px;
    width: 40px;
  }

  .right-article-container
    .sidebar-black
    .sidebar-blue
    .sidebar-darkblue
    .right-colors
    .colors-container
    .navbar-controller {
    margin: 22px 0;
  }

  .right-article-container
    .sidebar-black
    .sidebar-blue
    .sidebar-darkblue
    .right-colors
    .colors-container
    .navbar-controller
    .controller-description
    p {
    font-size: 22px;
  }

  .right-article-container
    .sidebar-black
    .sidebar-blue
    .sidebar-darkblue
    .buttons-section {
    gap: 20px;
  }
  .right-article-container
    .sidebar-black
    .sidebar-blue
    .sidebar-darkblue
    .buttons-section
    .btn {
    font-size: 15px;
  }

  .right-article-container
    .sidebar-black
    .sidebar-blue
    .sidebar-darkblue
    .sharing-section {
    margin-top: 16px;
  }

  .right-article-container
    .sidebar-black
    .sidebar-blue
    .sidebar-darkblue
    .sharing-section
    .sharing-container
    p {
    font-size: 20px;
  }
  .right-article-container
    .sidebar-black
    .sidebar-blue
    .sidebar-darkblue
    .sharing-section
    .sharing-container
    .share-btns
    .social {
    padding: 15px 30px;
  }
  .right-article-container
    .sidebar-black
    .sidebar-blue
    .sidebar-darkblue
    .sharing-section
    .sharing-container
    .share-btns
    .social
    p {
    font-size: 20px;
  }
  .right-article-container
    .sidebar-black
    .sidebar-blue
    .sidebar-darkblue
    .sharing-section
    .sharing-container
    .share-btns
    .social
    svg {
    font-size: 20px;
  }

  /* Left Popping Sidebar */
  .nav-red .nav-white {
    font-size: 24px;
  }

  .nav-red .nav-white .close-btn svg {
    font-size: 30px;
  }
  .nav-red .sidebar-heading {
    margin-bottom: 30px;
  }

  .nav-red .sidebar-heading .heading-container {
    align-items: start;
    gap: 23px;
    /* justify-content: start; */
  }

  .nav-red .nav-white .sidebar-heading .heading-container .heading-logo {
    height: 24px;
    width: 24px;
  }

  .nav-red .nav-white .sidebar-heading .heading-container .heading-logo svg {
    height: 40px;
    width: 40px;
  }

  .nav-red .sidebar-heading .heading-container h2 {
    font-size: 30px;
  }

  .list li {
    gap: 14px;
  }

  .list li .list-icon {
    height: 50px;
    width: 50px;
  }
  .list li .list-icon svg {
    height: 30px;
    width: 30px;
    font-size: 30px;
  }

  .list li a {
    font-size: 26px;
  }

  .list .account-heading {
    font-size: 24px;
  }

  .list ul li .account-icon {
    height: 50px;
    width: 50px;
  }

  .list ul li .account-icon svg {
    height: 30px;
    width: 30px;
    font-size: 30px;
  }

  .list ul li a {
    font-size: 26px;
  }

  .list ul .account-btn {
    margin-top: 20px;
  }

  .list ul .account-btn span {
    font-size: 24px;
  }

  #nav .container .left span {
    font-size: 30px;
  }
  #nav .container .left strong {
    font-size: 30px;
  }

  #nav .container .right {
    gap: 1.45rem;
  }

  #nav .container .right .nav-form .nav-search .btn-input {
    padding: 30px 0;
  }

  #nav .container .right .nav-form .nav-search input::placeholder {
    font-size: 16px;
  }

  #nav .container .right .nav-form .nav-search .btn-input svg {
    position: absolute;
    font-size: 2rem;
    top: 16px;
    left: 6px;
  }
  #nav .container .right .nav-form .nav-search input {
    height: 60px;
    width: 200px;
    font-size: 24px;
    font-weight: 400;
  }

  #nav .container .right form .nav-search.active input {
    width: 220px;
  }

  #nav .container .right .sign-in {
    font-size: 24px;
  }
  #nav .container .right .sidebar-menu {
    font-size: 24px;
  }
  #nav .container .right .settings {
    font-size: 24px;
  }
  #nav .container .right .notifications {
    font-size: 24px;
  }

  #header .cards {
    display: flex;
    flex-direction: column;
    width: 100%;
    border-radius: 50px;
  }

  #header .cards .card {
    width: 100%;
    justify-content: space-between;
    padding: 30px;
  }

  #header .cards .card .card-left .card-info {
    font-size: 20px;
  }

  #header .cards .card .card-left .card-price strong {
    font-size: 40px;
  }
  #header .cards .card .card-left .card-price small {
    font-size: 20px;
  }

  #header .cards .card .card-right .card-icon {
    height: 80px;
    width: 80px;
  }
  #header .cards .card .card-right .card-icon svg {
    height: 40px;
    width: 40px;
  }

  .hero-left .hero-info {
    font-size: 20px;
  }
  .hero-left .hero-name {
    font-size: 28px;
  }
  .hero-left .hero-greet {
    font-size: 20px;
  }

  .hero-action p {
    font-size: 20px;
  }

  #middle .middle-section {
    display: flex;
    flex-direction: column;
  }

  #middle .middle-section .mid .middle-1-container {
    padding: 40px;
    padding-bottom: 70px;
    padding-top: 20px;
  }

  .middle-1-container .title {
    font-size: 30px;
  }

  .middle-1-container .description {
    font-size: 30px;
  }

  .middle-1-container .pbar-container {
    height: 80px;
    width: 80px;
  }
  .middle-1-container .pbar-container svg {
    top: 17px;
    left: 15px;
    height: 50px;
    width: 50px;
  }

  .middle-1-container .circular-pbar {
    width: 260px;
  }

  #middle .middle-section .middle-1 .middle-1-container .circular-pbar .card {
    bottom: -34.5px;
    /* padding: 25px 50px; */
    border-radius: 20px;
    width: 47.375rem;
  }

  .middle-1-container .circular-pbar .card .card-mid h3 {
    font-size: 35px;
  }

  .middle-1-container .circular-pbar .card p {
    font-size: 24px;
  }

  .middle-2-container .content {
    justify-content: center;
  }

  .middle-2-container .heading h3 {
    font-size: 30px;
    padding: 10px;
    padding-bottom: 30px;
  }

  .content .cards .card p small {
    font-size: 20px;
  }

  .content .cards .card h4 {
    font-size: 20px;
  }

  .circular-pbar .pbar-container p small {
    font-size: 20px;
  }
  .circular-pbar .pbar-container h3 {
    font-size: 50px;
  }
  .circular-pbar .pbar-container p {
    font-size: 22px;
  }

  #middle .middle-section .middle-3 {
    align-items: center;
  }

  #middle .middle-section .middle-3 .middle-3-heading {
    font-size: 30px;
  }

  #middle .middle-section .middle-4 .middle-4-heading h3 {
    font-size: 30px;
  }

  #middle .middle-section .middle-4 .middle-4-heading p {
    font-size: 19.5px;
  }

  #middle .middle-section .middle-4 .middle-4-heading p {
    font-size: 19.5px;
    color: #7382a0;
  }

  #middle .middle-section .middle-4 .middle-4-stats {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    row-gap: 50px;
    column-gap: 50px;
  }

  #middle .middle-section .middle-4 .middle-4-stats .stats-cards {
    row-gap: 10px;
    justify-self: start;
  }

  #middle .middle-section .middle-4 .middle-4-stats .stats-cards .stats-icon p {
    font-size: 30px;
  }

  #middle
    .middle-section
    .middle-4
    .middle-4-stats
    .stats-cards
    .stats-icon
    .icon {
    height: 44px;
    width: 44px;
  }

  #middle .middle-section .middle-4 .middle-4-stats .progress-bar h3 {
    font-size: 30px;
  }

  #middle
    .middle-section
    .middle-4
    .middle-4-stats
    .stats-cards
    .progress-bar
    .pro-bar {
    height: 15px;
    width: 160px;
  }

  #table {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  #table .table-section {
    width: 100%;
  }

  #table .table-section .table-container .table-heading .heading {
    padding-left: 20px;
  }

  #table .table-section .table-container .table-heading .heading h1 {
    font-size: 30px;
  }

  #table .table-section .table-container .table-heading .heading p {
    font-size: 16px;
  }

  #table
    .table-section
    .table-container
    .table-content
    .table-body
    .table-contents
    .t-head
    .t-row
    th {
    font-size: 16px;
  }

  tr th:first-of-type,
  tr td:first-of-type {
    padding-left: 20px !important;
  }

  #table .orders {
    width: 100%;
    padding-left: 30px;
    margin-top: 20px;
  }

  #table .orders .order-heading {
    padding-left: 22px;
  }

  #table .orders .order-heading h3 {
    font-size: 24px;
  }
  #table .orders .order-heading p {
    font-size: 16px;
  }

  #table .orders .orders-list {
    padding-left: 20px;
  }

  .icon svg {
    height: 20px;
    width: 20px;
  }

  .orders-list .orders-container .order-item .description h5 {
    font-size: 18px;
  }
  .orders-list .orders-container .order-item .description p {
    font-size: 12px;
  }

  #footer .footer-container {
    flex-direction: column;
    gap: 16px;
    padding: 40px 10px;
  }

  #footer .footer-container .right span {
    font-size: 20px;
  }

  #footer .footer-container .left .footer-menus .footer-menu a {
    font-size: 16px;
    font-weight: 400;
  }

  #footer .footer-container .left .footer-menus {
    gap: 30px;
  }
}

@media screen and (max-width: 1000px) {
  #nav {
    max-width: 50rem;
  }

  #header {
    max-width: 50rem;
    margin: 0 auto;
  }

  #header .cards {
    width: 50rem;
  }

  #header .cards .card {
    width: 40.25rem;
    padding: 8px;
  }

  #hero {
    max-width: 50rem;
  }

  #middle {
    max-width: 50rem;
  }

  #table {
    /* width: 62rem; */
    max-width: 50rem;
  }

  #footer {
    margin: 0 auto;
    max-width: 50rem;
  }
}

@media screen and (max-width: 830px) {
  /* Left Popping Article */
  #article
    .article-container
    .nav-black
    .nav-red
    .nav-white
    .sidebar-heading
    .heading-container
    .heading-logo
    svg {
    height: 30px;
    width: 30px;
  }

  #article
    .article-container
    .nav-black
    .nav-red
    .nav-white
    .sidebar-heading
    .heading-container
    .h2 {
    font-size: 24px;
  }

  #article
    .article-container
    .nav-black
    .nav-red
    .nav-white
    .list
    li
    .list-icon {
    height: 40px;
    width: 40px;
  }

  #article
    .article-container
    .nav-black
    .nav-red
    .nav-white
    .list
    li
    .list-icon
    svg {
    height: 24px;
    width: 24px;
    font-size: 24px;
  }

  #article .article-container .nav-black .nav-red .nav-white .list li a {
    font-size: 22px;
  }

  #article .article-container .nav-black .nav-red .nav-white .list h5 {
    font-size: 22px;
  }

  #article .article-container .nav-black .nav-red .nav-white .list ul li {
    gap: 14px;
  }

  #article
    .article-container
    .nav-black
    .nav-red
    .nav-white
    .list
    ul
    li
    .account-icon {
    height: 40px;
    width: 40px;
  }
  #article
    .article-container
    .nav-black
    .nav-red
    .nav-white
    .list
    ul
    li
    .account-icon
    svg {
    height: 24px;
    width: 24px;
  }

  #article
    .article-container
    .nav-black
    .nav-red
    .nav-white
    .list
    ul
    .account-btn
    span {
    font-size: 22px;
  }

  /*  */

  #nav {
    max-width: 42rem;
  }

  #nav .container .left {
    gap: 0px;
  }
  #nav .container .left span {
    margin-top: 16px;
    font-size: 20px;
  }
  #nav .container .left strong {
    display: none;
  }

  #nav .container .right .sign-in {
    display: none;
  }

  #header {
    max-width: 40rem;
    margin: 0 auto;
  }

  #header .cards {
    width: 40rem;
  }

  #header .cards .card {
    width: 40.25rem;
    padding: 8px;
  }

  #header .cards .card .card-left .card-price strong {
    font-size: 30px;
  }

  #header .cards .card .card-right .card-icon {
    height: 50px;
    width: 50px;
  }
  #header .cards .card .card-right .card-icon svg {
    height: 30px;
    width: 30px;
  }

  #hero {
    max-width: 40rem;
  }

  #middle {
    max-width: 40rem;
  }

  #middle .middle-section .middle-1 .middle-1-container .title {
    font-size: 24px;
  }

  #middle .middle-section .middle-1 .middle-1-container .description small {
    visibility: hidden;
  }

  #middle .middle-section .middle-1 .middle-1-container .circular-pbar .card {
    width: 38rem;
  }
  #middle .middle-section .middle-1 .middle-1-container .circular-pbar .card p {
    font-size: 16px;
  }

  #middle
    .middle-section
    .middle-1
    .middle-1-container
    .circular-pbar
    .card
    .card-mid
    h3 {
    font-size: 24px;
  }
  #middle
    .middle-section
    .middle-1
    .middle-1-container
    .circular-pbar
    .card
    .card-mid
    p {
    font-size: 18px;
  }

  #middle .middle-section .middle-2 .middle-2-container .heading h3 {
    font-size: 24px;
  }

  #middle
    .middle-section
    .middle-2
    .middle-2-container
    .content
    .circular-pbar
    .pbar-container
    p {
    font-size: 16px;
  }
  #middle
    .middle-section
    .middle-2
    .middle-2-container
    .content
    .circular-pbar
    .pbar-container
    h3 {
    font-size: 30px;
  }

  #middle .middle-3 .middle-3-heading h3 {
    font-size: 24px;
  }
  #middle .middle-3 .middle-3-heading p {
    font-size: 18px;
  }

  #middle .middle-section .middle-4 .middle-4-stats {
    margin-top: 10px;
  }

  #middle
    .middle-section
    .middle-4
    .middle-4-stats
    .stats-cards
    .stats-icon
    .icon {
    height: 30px;
    width: 30px;
  }
  #middle .middle-section .middle-4 .middle-4-stats .stats-cards .stats-icon p {
    font-size: 20px;
  }

  #table {
    /* width: 62rem; */
    max-width: 40rem;
  }

  #table .table-section .table-container .table-heading .heading h1 {
    font-size: 24px;
  }

  #table
    .table-section
    .table-container
    .table-content
    .table-body
    .table-contents
    .t-head
    .t-row
    th:nth-of-type(2) {
    display: none;
  }

  #table
    .table-section
    .table-container
    .table-content
    .table-body
    .table-contents
    .t-body
    .t-body-rows
    .t-body-d1
    span
    .flex-col
    svg {
    display: none;
  }
  #table
    .table-section
    .table-container
    .table-content
    .table-body
    .table-contents
    .t-body
    .t-body-rows
    .t-body-d1
    span
    .flex-col
    .name {
    font-size: 16px;
  }

  #table
    .table-section
    .table-container
    .table-content
    .table-body
    .table-contents
    .t-body
    .t-body-rows
    .t-body-d2 {
    display: none;
  }

  #table
    .table-section
    .table-container
    .table-content
    .table-body
    .table-contents
    .t-body
    .t-body-rows
    .t-body-d3
    .budget
    h3 {
    font-size: 18px;
  }

  #table
    .table-section
    .table-container
    .table-content
    .table-body
    .table-contents
    .t-body
    .t-body-rows
    .t-body-d4
    .lable-bar
    h5 {
    font-size: 17px;
  }

  #footer {
    margin: 0 auto;
    max-width: 40rem;
  }

  #footer .footer-container .right span {
    font-size: 16px;
  }
}

@media screen and (max-width: 700px) {
  /* Aside Settings Icon */
  #aside .aside-container .aside-settings-icon {
    font-size: 1.2rem;
    height: 60px;
    width: 60px;
  }

  /* Left Popping Article */
  #article .article-container .nav-black .nav-red .nav-white {
    padding: 30px;
  }
  #article .article-container .nav-black .nav-red .nav-white .close-btn {
    top: 26px;
  }

  #article
    .article-container
    .nav-black
    .nav-red
    .nav-white
    .sidebar-heading
    .heading-container
    .heading-logo
    svg {
    height: 26px;
    width: 26px;
  }

  #article
    .article-container
    .nav-black
    .nav-red
    .nav-white
    .sidebar-heading
    .heading-container
    .h2 {
    font-size: 20px;
  }

  #article
    .article-container
    .nav-black
    .nav-red
    .nav-white
    .list
    li
    .list-icon {
    height: 30px;
    width: 30px;
  }

  #article
    .article-container
    .nav-black
    .nav-red
    .nav-white
    .list
    li
    .list-icon
    svg {
    height: 22px;
    width: 22px;
    font-size: 24px;
  }

  #article .article-container .nav-black .nav-red .nav-white .list li a {
    font-size: 20px;
  }

  #article .article-container .nav-black .nav-red .nav-white .list h5 {
    font-size: 20px;
  }

  #article .article-container .nav-black .nav-red .nav-white .list ul li {
    gap: 12px;
  }

  #article
    .article-container
    .nav-black
    .nav-red
    .nav-white
    .list
    ul
    li
    .account-icon {
    height: 30px;
    width: 30px;
  }
  #article
    .article-container
    .nav-black
    .nav-red
    .nav-white
    .list
    ul
    li
    .account-icon
    svg {
    height: 22px;
    width: 22px;
  }

  #article
    .article-container
    .nav-black
    .nav-red
    .nav-white
    .list
    ul
    .account-btn
    span {
    font-size: 20px;
  }

  /*  */

  #nav {
    max-width: 39rem;
  }

  #nav .container .left {
    gap: 0px;
  }
  #nav .container .left span {
    margin-top: 16px;
    font-size: 20px;
  }
  #nav .container .left strong {
    display: none;
  }

  #nav .container .right .sign-in {
    display: none;
  }

  #header {
    max-width: 38rem;
    margin: 0 auto;
  }

  #header .cards {
    width: 40rem;
  }

  #header .cards .card {
    width: 38rem;
    padding: 8px;
  }

  #header .cards .card .card-left .card-info {
    font-size: 16px;
  }

  #header .cards .card .card-left .card-price strong {
    font-size: 24px;
  }

  #header .cards .card .card-right .card-icon {
    height: 50px;
    width: 50px;
  }
  #header .cards .card .card-right .card-icon svg {
    height: 30px;
    width: 30px;
  }

  #hero {
    max-width: 38rem;
  }

  #middle {
    max-width: 38rem;
  }

  #middle .middle-section .middle-1 .middle-1-container .title {
    font-size: 24px;
  }

  #middle .middle-section .middle-1 .middle-1-container .description small {
    visibility: hidden;
  }

  #middle .middle-section .middle-1 .middle-1-container .circular-pbar .card {
    width: 38rem;
  }
  #middle .middle-section .middle-1 .middle-1-container .circular-pbar .card p {
    font-size: 16px;
  }

  #middle
    .middle-section
    .middle-1
    .middle-1-container
    .circular-pbar
    .card
    .card-mid
    h3 {
    font-size: 24px;
  }
  #middle
    .middle-section
    .middle-1
    .middle-1-container
    .circular-pbar
    .card
    .card-mid
    p {
    font-size: 18px;
  }

  #middle .middle-section .middle-2 .middle-2-container .heading h3 {
    font-size: 24px;
  }

  #middle
    .middle-section
    .middle-2
    .middle-2-container
    .content
    .circular-pbar
    .pbar-container
    p {
    font-size: 16px;
  }
  #middle
    .middle-section
    .middle-2
    .middle-2-container
    .content
    .circular-pbar
    .pbar-container
    h3 {
    font-size: 30px;
  }

  #middle .middle-3 .middle-3-heading h3 {
    font-size: 24px;
  }
  #middle .middle-3 .middle-3-heading p {
    font-size: 18px;
  }

  #middle .middle-section .middle-4 .middle-4-heading h3 {
    font-size: 24px;
  }
  #middle .middle-section .middle-4 .middle-4-heading p {
    font-size: 17.5px;
  }

  #middle .middle-section .middle-4 .middle-4-stats {
    margin-top: 10px;
  }

  #middle
    .middle-section
    .middle-4
    .middle-4-stats
    .stats-cards
    .stats-icon
    .icon {
    height: 26px;
    width: 26px;
  }
  #middle .middle-section .middle-4 .middle-4-stats .stats-cards .stats-icon p {
    font-size: 16px;
  }

  #middle
    .middle-section
    .middle-4
    .middle-4-stats
    .stats-cards
    .progress-bar
    h3 {
    font-size: 20px;
  }

  #table {
    max-width: 38rem;
  }

  #table .table-section .table-container .table-heading .heading h1 {
    font-size: 24px;
  }

  #table
    .table-section
    .table-container
    .table-content
    .table-body
    .table-contents
    .t-head
    .t-row
    th:nth-of-type(2) {
    display: none;
  }

  #table
    .table-section
    .table-container
    .table-content
    .table-body
    .table-contents
    .t-body
    .t-body-rows
    .t-body-d1
    span
    .flex-col
    svg {
    display: none;
  }
  #table
    .table-section
    .table-container
    .table-content
    .table-body
    .table-contents
    .t-body
    .t-body-rows
    .t-body-d1
    span
    .flex-col
    .name {
    font-size: 16px;
  }

  #table
    .table-section
    .table-container
    .table-content
    .table-body
    .table-contents
    .t-body
    .t-body-rows
    .t-body-d2 {
    display: none;
  }

  #table
    .table-section
    .table-container
    .table-content
    .table-body
    .table-contents
    .t-body
    .t-body-rows
    .t-body-d3
    .budget
    h3 {
    font-size: 18px;
  }

  #table
    .table-section
    .table-container
    .table-content
    .table-body
    .table-contents
    .t-body
    .t-body-rows
    .t-body-d4
    .lable-bar
    h5 {
    font-size: 17px;
  }

  #footer {
    margin: 0 auto;
    max-width: 38rem;
  }

  #footer .footer-container .right span {
    font-size: 16px;
  }
}

@media screen and (max-width: 672px) {
  /* #header {
    max-width: 38rem;
    margin: 0 auto;
  } */

  #header {
    /* margin: 0 auto; */
  }

  #header .cards {
    width: 38rem;
  }

  #header .cards .card {
    margin: 0 auto;
    width: 38rem;
    padding: 8px;
  }
}

@media screen and (max-width: 630px) {
  /* Left Popping Sidebar */
  #article .article-container .nav-black .nav-red .nav-white {
  }

  #article .article-container .nav-black .nav-red .nav-white .sidebar-heading {
    margin-bottom: 20px;
  }

  #article .article-container .nav-black .nav-red .nav-white .list li {
    margin: 10px 0;
  }

  /*  */
  #nav {
  }

  #nav .container .left span {
    font-size: 28px;
  }

  #nav .container .left span .hide {
    display: none;
  }

  #header .cards .card {
    margin: 0 auto;
  }

  #header .cards .card {
    width: 28rem;
  }
}

@media screen and (max-width: 624px) {
  #nav {
    max-width: 30rem;
  }

  #header {
    max-width: 30rem;
    margin: 0 auto;
  }

  #header .cards {
    width: 28rem;
    margin-right: 0;
  }

  #hero {
    max-width: 30rem;
  }

  #middle {
    max-width: 30rem;
  }

  #middle .middle-section .mid .middle-1-container .circular-pbar .card {
    width: 28rem;
  }

  #middle .middle-section .middle-4 .middle-4-heading {
    margin-left: 16px;
  }

  #middle .middle-section .middle-4 .middle-4-heading h3 {
    font-size: 16px;
  }

  #middle .middle-section .middle-4 .middle-4-stats {
    row-gap: 30px;
    column-gap: 0;
    margin-top: 10px;
    padding: 0;
    padding-left: 40px;
  }

  #table {
    max-width: 30rem;
  }

  #table .table-section {
    padding: 0;
  }

  #table .orders {
    padding: 0;
  }

  #footer {
    max-width: 30rem;
  }
}

@media screen and (max-width: 600px) {
  /* Right Popping Sidebar */
  .right-article-container
    .sidebar-black
    .sidebar-blue
    .sidebar-darkblue
    .right-close-btn
    svg {
    font-size: 22px;
  }

  .right-article-container
    .sidebar-black
    .sidebar-blue
    .sidebar-darkblue
    .right-colors {
    margin-top: 20px;
  }

  .right-article-container
    .sidebar-black
    .sidebar-blue
    .sidebar-darkblue
    .right-colors
    .colors-container
    .colors-description {
    gap: 5px;
  }

  .right-article-container
    .sidebar-black
    .sidebar-blue
    .sidebar-darkblue
    .right-colors
    .colors-container
    .colors-description
    p {
    font-size: 16px;
  }

  .right-article-container
    .sidebar-black
    .sidebar-blue
    .sidebar-darkblue
    .right-colors
    .colors-container
    .colors-description
    .colors
    .color {
    height: 20px;
    width: 20px;
  }

  .right-article-container
    .sidebar-black
    .sidebar-blue
    .sidebar-darkblue
    .right-colors
    .colors-container
    .navbar-controller
    .controller-description
    p {
    font-size: 16px;
  }

  .right-article-container
    .sidebar-black
    .sidebar-blue
    .sidebar-darkblue
    .buttons-section {
    gap: 14px;
  }

  .right-article-container
    .sidebar-black
    .sidebar-blue
    .sidebar-darkblue
    .buttons-section
    .btn {
    font-size: 10px;
  }

  .right-article-container
    .sidebar-black
    .sidebar-blue
    .sidebar-darkblue
    .sharing-section
    .sharing-container
    p {
    font-size: 16px;
  }

  .right-article-container
    .sidebar-black
    .sidebar-blue
    .sidebar-darkblue
    .sharing-section
    .sharing-container
    .share-btns
    .social {
    padding: 10px 20px;
  }

  .right-article-container
    .sidebar-black
    .sidebar-blue
    .sidebar-darkblue
    .sharing-section
    .sharing-container
    .share-btns
    .social
    svg {
    font-size: 14px;
  }
  .right-article-container
    .sidebar-black
    .sidebar-blue
    .sidebar-darkblue
    .sharing-section
    .sharing-container
    .share-btns
    .social
    p {
    font-size: 14px;
  }
  /*  */

  /* Left Popping Sidebar */
  #article
    .article-container
    .nav-black
    .nav-red
    .nav-white
    .sidebar-heading
    .heading-container {
    gap: 16px;
  }

  #article .article-container .nav-black .nav-red .nav-white .close-btn {
    top: 30px;
  }
  #article .article-container .nav-black .nav-red .nav-white .close-btn svg {
    font-size: 22px;
  }

  #article
    .article-container
    .nav-black
    .nav-red
    .nav-white
    .sidebar-heading
    .heading-container
    .h2 {
    font-size: 16px;
  }

  #article
    .article-container
    .nav-black
    .nav-red
    .nav-white
    .sidebar-heading
    .heading-container
    .heading-logo {
    font-size: 20px;
  }

  #article
    .article-container
    .nav-black
    .nav-red
    .nav-white
    .list
    li
    .list-icon {
    height: 26px;
    width: 26px;
  }

  #article
    .article-container
    .nav-black
    .nav-red
    .nav-white
    .list
    li
    .list-icon
    svg {
    height: 20px;
    width: 20px;
  }

  #article .article-container .nav-black .nav-red .nav-white .list h5 {
    font-size: 16px;
  }

  #article .article-container .nav-black .nav-red .nav-white .list li a {
    font-size: 16px;
  }

  #article
    .article-container
    .nav-black
    .nav-red
    .nav-white
    .list
    ul
    .account-btn {
    margin-top: 10px;
    padding: 10px 20px;
  }

  #article
    .article-container
    .nav-black
    .nav-red
    .nav-white
    .list
    ul
    .account-btn
    span {
    font-size: 16px;
  }

  /*  */

  #nav {
    padding: 10px;
  }

  #middle .middle-section .middle-4 .middle-4-heading {
    padding-left: 60px;
  }
  #middle .middle-section .middle-4 .middle-4-stats {
    padding-left: 75px;
  }
  #table {
  }

  .t-body-rows .t-body-d1 {
    padding: 0;
  }
  #table
    .table-section
    .table-container
    .table-content
    .table-body
    .table-contents
    .t-body
    .t-body-rows
    .t-body-d1
    span
    .flex-col
    .name {
    font-size: 11.5px;
  }

  #table
    .table-section
    .table-container
    .table-content
    .table-body
    .table-contents
    .t-body
    .t-body-rows
    .t-body-d3
    .budget
    h3 {
    font-size: 14px;
  }

  #table
    .table-section
    .table-container
    .table-content
    .table-body
    .table-contents
    .t-body
    .t-body-rows
    .t-body-d4
    .lable-bar
    h5 {
    font-size: 14px;
  }

  #table .orders .order-heading {
    margin-bottom: 16px;
  }
  #table .orders .order-heading h3 {
    font-size: 20px;
  }
  #table .orders .order-heading p {
    font-size: 14px;
  }

  #table .orders .orders-list .orders-container .order-item .description h5 {
    font-size: 16px;
  }

  #table .orders .orders-list .orders-container .order-item .description p {
    font-size: 10px;
  }

  #footer .footer-container {
    padding: 0;
    gap: 5px;
  }

  #footer .footer-container .right span {
    font-size: 12px;
  }
  #footer .footer-container .right span a {
    font-size: 14px;
  }

  #footer .footer-container .left .footer-menus .footer-menu a {
    font-size: 14px;
  }
}

@media screen and (max-width: 490px) {
  /* Aside Settings Icon */
  #aside .aside-container .aside-settings-icon {
    font-size: 1rem;
    height: 44px;
    width: 44px;
  }

  #aside .aside-container .aside-settings-icon svg {
  }
  /*  */

  /* Left Popping Sidebar */
  #article .article-container .nav-black .nav-red .nav-white {
    padding: 20px;
  }

  #article .article-container .nav-black .nav-red .nav-white .close-btn {
    top: 18px;
  }
  /*  */

  #nav {
    width: 26.5rem;
  }

  #nav .container .right .nav-form {
    display: none;
  }

  #header {
    width: 26.5rem;
  }
  #header .cards {
    width: 26.5rem;
  }
  #header .cards .card {
    width: 26.5rem;
  }

  #hero {
    width: 26.5rem;
  }

  #middle {
    width: 26.5rem;
  }

  #table {
    width: 26.5rem;
    overflow: hidden;
  }

  #footer {
    width: 26.5rem;
  }
}

@media screen and (max-width: 450px) {
  #nav {
    max-width: 25rem;
  }

  #header {
    width: 25rem;
  }
  #header .cards {
    width: 25rem;
  }
  #header .cards .card {
    width: 25rem;
  }

  #hero {
    width: 25rem;
  }

  #hero .hero-section .hero-greetings .hero-left .hero-greet {
    display: none;
  }

  #middle {
    width: 25rem;
  }

  #middle .middle-2 .middle-2-container .content .cards .card p {
    font-size: 6px;
  }
  #middle .middle-2 .middle-2-container .content .cards .card h4 {
    font-size: 14px;
  }

  #table {
    width: 25rem;
    overflow: hidden;
  }

  .t-row th {
    padding: 12px 16px;
  }

  #footer {
    width: 25rem;
  }
}