* {






  margin: 0;






  padding: 0;






  box-sizing: border-box;






}






:root {






  --blue: #00aeef;






}













/* global css start  */






body {






  font-family: "Poppins", sans-serif;






}






#main {






  display: flex;






  margin-top: 100px;






}






ul li {






  list-style: none;






}






a {






  text-decoration: none;






}













.button {






  background-color: var(--blue);






  padding: 15px 10px;






  color: #fff;






  margin-top: 20px;






  display: block;






  text-align: center;






  transition: all 0.4s;






  width: 50%;






  border-radius: 10px;






  margin: 20px auto;






}






.button:hover {






  transform: scale(0.95);






}






::-webkit-scrollbar {






  width: 11px;






  background-color: transparent;






}






::-webkit-scrollbar-thumb {






  background-color: rgb(226, 226, 226);






  border-radius: 5px;






  border: 3px solid #fff;






}






section,






footer {






  padding: 50px 0;






}






.title {






  font-size: 26px;






  color: #111;






  display: block;






}






.text-center {






  text-align: center;






}






span.sidebar-controller {






  border: 2px solid #cbcbcb;






  padding: 10px;






  color: #9b9b9b;






  border-radius: 4px;






  height: 40px;






  width: 40px;






  cursor: pointer;






  margin-top: 30px;






  display: block;






  visibility: hidden;






  opacity: 0;






}






span.sidebar-controller.active {






  visibility: visible;






  opacity: 1;






}






/* global css end  */













/* navbar css start  */






.navbar {






  position: fixed;






  top: 0;






  left: 0;






  width: 100%;






  background-color: #eff6f9;






  padding: 10px 15px;






  z-index: 99;






}






.navbar .brand-logo {






  max-width: 150px;






  width: 100%;






}






.brand-logo img {






  width: 100%;






}






.container {






  max-width: 1400px;






  width: 100%;






  display: flex;






  margin: auto;






  justify-content: space-between;






  align-items: center;






}






.navbar .navmenu {






  display: flex;






  gap: 5px;






  align-items: center;






  justify-content: center;






}






.navmenu li a {






  display: flex;






  align-items: center;






  gap: 5px;






  padding: 10px;






  color: #535353;






  transition: all 0.4s;






  font-size: 16px;






  font-weight: 500;






  font-family: "Poppins", sans-serif;






}






.navmenu li a:hover {






  color: #00aeef;






}






.navmenu li a.call {






  background: linear-gradient(to right, #00aeef, #0b6587);






  color: #fff;






  font-weight: 700;






  padding: 15px 20px;






  border-radius: 30px;






  border: 2px solid #288bb1;






}






.navbar .menu-bar {






  border: none;






  outline: none;






  padding: 0px;






  height: 35px;






  width: 35px;






  background-color: #00aeef;






  color: #fff;






  cursor: pointer;






  font-size: 20px;






  display: none;






  align-items: center;






  justify-content: center;






}













/* navbar css end */













/* sidebar start */






.sidebar {






  display: flex;






  flex-direction: column;






  gap: 20px;






  padding: 20px;






  padding-right: 15px;






  height: 100vh;






  overflow-x: hidden;






  overflow-y: auto;






  max-width: 300px;






  width: 100%;






  border-right: 1px solid #dbdbdb;






  background-color: #fff;






  position: fixed;






  transition: all 0.3s;






  left: -320px;






}






.sidebar.show {






  left: 0;






}






.sidebar .logo img {






  max-width: 170px;






  width: 100%;






}






.sidebar .sidebar-menus {






  display: flex;






  flex-direction: column;






  gap: 5px;






}






.sidebar .sidebar-menus li a {






  color: #000;






  font-size: 16px;






  font-weight: 400;






  font-family: "Poppins", sans-serif;






  text-transform: capitalize;






  transition: all 0.3s;






  display: inline-block;






  width: 100%;






}






.sidebar .sidebar-menus li a img {






  display: block;






  width: 100%;






}













.sidebar .sidebar-menus li form {






  display: flex;






  flex-direction: column;






  gap: 5px;






}






.sidebar .sidebar-menus li form input:first-child {






  padding: 7px;






  outline: none;






}






.sidebar .sidebar-menus li form input:nth-child(2) {






  background: #1c1c1c;






  border: none;






  padding: 5px;






  font-size: 16px;






  color: #fff;






}






.sidebar .sidebar-menus li a.button {






  color: #fff;






  display: block;






}













.sidebar .sidebar-menus li a:hover {






  color: var(--blue);






  transform: scale(0.95);






}













.sidebar .sidebar-menus li a.button:hover {






  color: #fff;






}






.sidebar span.sidebar-controller {






  position: absolute;






  right: 10px;






  top: 0px;






  z-index: 1;






  text-align: center;






}













/* sidebar end  */













/* main content start  */






.main-content-wrapper {






  padding: 0 20px;






  width: calc(100% - 300px);






  font-family: "Roboto", sans-serif;






  display: block;






  margin: auto;






  transition: all 0.3s;






}






.main-content-wrapper.full {






  width: 100%;






}













/* product section start  */






#product-details-section {






  padding-top: 0;






  padding-bottom: 50px;






}






#product-details-section .aside-wrapper {






  display: flex;






  padding-top: 30px;






  flex-wrap: wrap;






  justify-content: center;






  gap: 20px;






}






.left-aside {






  width: 100%;






}






.product-image-wrapper img {






  width: 100%;






  max-width: 400px;






}






.product-image-wrapper {






  padding: 30px;






  display: flex;






  align-items: center;






  justify-content: center;






  border: 1px solid #dbdbdb;






  border-radius: 10px;






  margin-top: 10px;






  padding-bottom: 0;






}













.aside-wrapper .right-aside {






  width: 100%;






  margin-top: 40px;






  margin: 0px auto;






}






.aside-wrapper .right-aside table {






  border: 1px solid #dbdbdb;






  width: 100%;






  border-radius: 10px;






  border-collapse: collapse;






}






.aside-wrapper .right-aside table tr th {






  color: #535353;






  font-size: 22px;






  font-weight: 600;






}






.aside-wrapper .right-aside table tr th.hash {






  text-align: right;






  color: var(--blue);






}






.aside-wrapper .right-aside table tr td,






.aside-wrapper .right-aside table tr th {






  border: 1px solid #dbdbdb;






  padding: 10px;






  text-align: left;






  width: 100%;






  color: #535353;






}






.aside-wrapper .right-aside table tr td:first-child,






.aside-wrapper .right-aside table tr th:first-child {






  max-width: 40%;






}






.aside-wrapper .right-aside .button {






  font-size: 18px;






  padding: 10px;






  margin-top: 10px;






}






.aside-wrapper .right-aside span i {






  color: var(--blue);






}













.aside-wrapper .right-aside span {






  display: block;






  text-align: center;






  color: #535353;






  font-size: 14px;






  margin-top: 10px;






}






/* product setion end*/













/* usage section  start*/






#usage-section .items {






  display: flex;






  flex-wrap: wrap;






  gap: 20px;






  justify-content: center;






  margin-top: 20px;






}






.items .item {






  max-width: 180px;






  height: 130px;






  display: flex;






  align-items: center;






  justify-content: center;






  width: 100%;






  background-color: #f1f1f1;






  text-align: center;






  padding: 20px;






  font-weight: 600;






}






/* usage section end */













/* collapse section start  */






#collapse-section .title {






  margin: 30px 0;






  font-size: 32px;






}






#collapse-section .collapse {






  display: flex;






  align-items: center;






  justify-content: space-between;






  padding: 10px;






  border: 2px solid #00aeef;






  background-color: #f6f6f6;






  cursor: pointer;






  transition: all 0.3s;






  user-select: none;






}






.collapse span i {






  transition: all 0.3s;






}






.collapse.show span i {






  transform: rotate(180deg);






}






.collapse:active {






  transform: scale(0.98);






}






.collapse-content-wrapper {






  transition: all 0.3s;






  overflow: hidden;






  height: 0px;






  max-height: 0px;






}






.collapse-content-wrapper.show {






  height: 100%;






  max-height: 500px;






}






.collapse-content {






  padding: 20px;






  padding-left: 50px;






  background-color: #ffffff;






  display: flex;






  flex-direction: column;






  gap: 10px;






  transition: all 0.3s;






  border: 1px solid #d9d9d9;






  border-top: none;






}






.collapse-content li {






  text-align: left;






  font-size: 18px;






  font-weight: 500;






  color: #505050;






  position: relative;






}






.collapse-content li::after {






  content: "";






  display: block;






  width: 100%;






  height: 2px;






  border-radius: 8px;






  margin-top: 5px;






  background: linear-gradient(90deg, #00aeef, transparent, transparent);






}






.collapse-content li::before {






  content: "\2713";






  border-radius: 50%;






  position: absolute;






  left: -40px;






  top: 0;






  border: 3px solid #00aeef;






  width: 25px;






  height: 25px;






  font-size: 18px;






  color: #00aeef;






  display: flex;






  align-items: center;






  justify-content: center;






  font-weight: bold;






}






/* collapse section end  */













/* contact section start */






#contact-section {






  background-color: var(--blue);






}






#contact-section .card {






  max-width: 450px;






  width: 100%;






  padding: 20px 30px;






  background-color: #fff;






  text-align: center;






  display: block;






  margin: auto;






}






.card .input-wrapper {






  display: flex;






  justify-content: center;






  margin-top: 20px;






}






.card .input-wrapper input {






  border: 1px solid #cbcbcb;






  padding: 10px;






  border-right: none;






  outline: none;






  width: 100%;






  font-size: 16px;






}






.card .input-wrapper .button {






  border: none;






  outline: none;






  margin: 0;






  padding: 10px;






}






.card p {






  font-size: 14px;






  color: #535353;






  margin-top: 10px;






}






.card p a {






  color: var(--blue);






  font-weight: 500;






}






/* contact section end  */













/* footer section start  */






footer#footer-section {






  display: flex;






  justify-content: space-between;






  flex-wrap: wrap;






  gap: 20px;






  padding: 30px 15px;






  background-color: #12151b;






  color: #fff;






}













.footer-menu {






  display: flex;






  gap: 20px;






  justify-content: space-between;






  flex-wrap: wrap;






}

.container2 {



  max-width: 1100px;



  width: 100%;



  display: flex;



  margin: auto;



  justify-content: flex-start;



  align-items: left;



}






.footer-menu li {






  font-size: 14px;






  color: #fff;






}






.footer-menu li a {






  transition: all 0.4s;






  font-weight: 400;






  font-size: 14px;






  color: #fff;






}






.footer-menu li a:hover {






  color: #00aeef;






}






.footer-menu ul {






  display: flex;






  flex-direction: column;






  gap: 5px;






  max-width: 200px;






  flex-wrap: wrap;






  width: 100%;






}






.footer-menu h4 {






  font-size: 22px;






  margin-bottom: 10px;






  color: #00aeef;






}






.footer-menu li img {






  max-width: 100px;






  width: 100%;






  background-color: #fff;






}






.footer-menu li i {






  font-size: 22px;






  color: #fff;






}






.footer-menu li i:hover {






  color: #00aeef;






}






footer#footer-section .container {






  align-items: flex-start;






  flex-wrap: wrap;






}






/* footer section end */






/* main content end   */













/* responsive start  */






@media screen and (max-width: 1450px) {






  .container {






    max-width: 1199px;






  }






}






@media screen and (max-width: 1400px) {






  .left-aside,






  .aside-wrapper .right-aside {






    width: 100%;






    max-width: 100%;






  }






  .container {






    max-width: 850px;






  }






}






@media screen and (max-width: 1200px) {






  .aside-wrapper .right-aside {






    margin-top: 0;






  }






}






@media screen and (max-width: 991px) {






  .container {






    max-width: 650px;






  }






  .navbar .navmenu {






    gap: 0;






  }






}






@media screen and (max-width: 767px) {






  .main-content-wrapper {






    width: 100%;






    padding: 0 10px;






  }






  .sidebar {






    width: 100%;






    border: none;






    max-width: 100%;






    left: -100%;






  }






  .product-image-wrapper {






    padding: 30px 10px;






  }






  .button {






    width: 100%;






  }













  .container {






    max-width: 100%;






  }






  .navbar .menu-bar {






    display: flex;






    padding: 10px;






  }






  .navbar .navmenu {






    display: flex;






    gap: 5px;






    align-items: flex-start;






    justify-content: center;






    position: absolute;






    z-index: 99;






    background: #fff;






    flex-direction: column;






    top: 130px;






    width: 100%;






    left: 0;






    padding-left: 10px;






    overflow: hidden;






    height: 0;






    transition: all 0.4s;






  }






  .navbar .navmenu.show {






    height: 280px;






  }






  .navbar .callMenu {






    position: unset;






    height: auto;






    background: transparent;






  }






  .callMenu li a.call {






    background: linear-gradient(to right, #00aeef, #0b6587);






    color: #fff;






    font-weight: 700;






    padding: 15px 10px;






    border-radius: 30px;






    border: 2px solid #288bb1;






    font-size: 14px;






  }






}






@media screen and (max-width: 450px) {






  .items .item {






    max-width: 150px;






    font-size: 16px;






  }






  .navbar .brand-logo {






    max-width: 100px;






  }






  .callMenu li a.call {






    font-size: 14px;






  }






  .navbar {






    padding: 10px 5px;






  }






}













/* responsive end  */