.font-italiana {
  font-family: "Italiana", sans-serif; }

.font-inter {
  font-family: "Inter", sans-serif; }

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

p {
  line-height: 1.7; }

a {
  text-decoration: none; }

ul,
li {
  list-style: none; }

body {
  width: 100%;
  background: #000;
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: #fff;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; }

html {
  scroll-behavior: smooth; }

.container {
  width: 100%;
  max-width: 1200px; }

.heading-title {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 30px;
  color: #fff;
  margin: 25px auto;
  text-transform: uppercase;
  letter-spacing: 7px;
  font-weight: normal; }

.menu-selected {
  border-bottom: 2px solid crimson;
  padding: 5px 5px;
  color: crimson; }

.dragging > * {
  cursor: grab;
  user-select: none;
  scroll-behavior: auto;
  scroll-snap-type: none; }

.no-transition {
  scroll-behavior: auto; }

.under-maintenance {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 25px;
  position: fixed;
  background: rgba(133, 11, 35, 0.952);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 50px 40px;
  border-radius: 20px;
  text-align: center;
  line-height: 1.7;
  text-wrap: nowrap; }
  .under-maintenance i {
    position: absolute;
    top: 25px;
    right: 25px;
    cursor: pointer;
    transition: 0.5s; }
    .under-maintenance i:hover {
      color: black; }

iframe {
  filter: invert(90%) hue-rotate(180deg); }

.hiddener {
  display: none; }

.app-header {
  display: flex;
  width: 100%;
  background: linear-gradient(rgba(0, 0, 0, 0.3), black), url(../images/hero-canada-wallpaper.png) top no-repeat;
  background-size: cover;
  height: 100vh; }
  .app-header .header-container {
    width: 100%;
    height: 100%;
    padding-bottom: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between; }
    .app-header .header-container .header-navbar {
      padding: 10px 20px;
      display: flex;
      justify-content: center;
      background-color: rgba(0, 0, 0, 0.616);
      width: 100%; }
      .app-header .header-container .header-navbar .container .header-navbar-contents {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center; }
        .app-header .header-container .header-navbar .container .header-navbar-contents .header-logo img {
          display: block;
          width: 100px;
          cursor: pointer; }
        .app-header .header-container .header-navbar .container .header-navbar-contents .header-menu ul {
          display: flex;
          justify-content: space-between;
          align-items: center; }
          .app-header .header-container .header-navbar .container .header-navbar-contents .header-menu ul li {
            margin: 0 10px;
            cursor: pointer; }
            .app-header .header-container .header-navbar .container .header-navbar-contents .header-menu ul li a {
              color: #fff;
              transition: 0.5s; }
              .app-header .header-container .header-navbar .container .header-navbar-contents .header-menu ul li a:hover {
                color: crimson; }
        .app-header .header-container .header-navbar .container .header-navbar-contents .header-icons {
          display: flex;
          align-items: center;
          justify-content: space-between; }
          .app-header .header-container .header-navbar .container .header-navbar-contents .header-icons .language {
            font-size: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 5px;
            background: #fff;
            color: #1e1e1e;
            border-radius: 15px;
            font-weight: 400;
            cursor: pointer;
            transition: 0.5s; }
            .app-header .header-container .header-navbar .container .header-navbar-contents .header-icons .language:hover {
              background: crimson;
              color: #fff; }
          .app-header .header-container .header-navbar .container .header-navbar-contents .header-icons i {
            display: none;
            font-size: 25px;
            margin: 0 10px;
            cursor: pointer;
            transition: 0.5s; }
            .app-header .header-container .header-navbar .container .header-navbar-contents .header-icons i:hover {
              color: crimson; }
    .app-header .header-container .hero-contents {
      display: flex;
      justify-content: center;
      padding: 20px; }
      .app-header .header-container .hero-contents .container .hero-content-inner {
        display: flex;
        flex-direction: column; }
        .app-header .header-container .hero-contents .container .hero-content-inner h1 {
          text-align: end;
          font-weight: normal;
          font-size: 75px;
          margin-bottom: 20px; }
        .app-header .header-container .hero-contents .container .hero-content-inner p {
          align-self: flex-end;
          text-align: end;
          max-width: 400px;
          font-size: 20px; }
        .app-header .header-container .hero-contents .container .hero-content-inner .button-shop {
          align-self: flex-end; }
    .app-header .header-container .hero-category-select {
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      align-self: flex-end; }
      .app-header .header-container .hero-category-select span:first-child,
      .app-header .header-container .hero-category-select span:last-child {
        margin: 0 15px;
        cursor: pointer;
        transition: 0.5s; }
        .app-header .header-container .hero-category-select span:first-child:hover,
        .app-header .header-container .hero-category-select span:last-child:hover {
          color: crimson; }

.app-main .main-container {
  width: 100%; }
  .app-main .main-container .main-about-container {
    width: 100%;
    padding: 50px 20px;
    display: flex;
    align-items: center;
    justify-content: center; }
    .app-main .main-container .main-about-container .container .main-about {
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center; }
      .app-main .main-container .main-about-container .container .main-about .main-about-logo img {
        object-fit: cover;
        object-position: center;
        width: 250px;
        margin-bottom: 30px; }
    .app-main .main-container .main-about-container .container p {
      text-align: center;
      font-size: 18px;
      padding: 20px; }
  .app-main .main-container .main-collection-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-bottom: 100px; }
    .app-main .main-container .main-collection-container .container .main-collection {
      width: 100%;
      padding: 20px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center; }
    .app-main .main-container .main-collection-container .collection-menu {
      display: flex;
      justify-content: center;
      width: 100%;
      background: #1e1e1e;
      margin-bottom: 70px; }
      .app-main .main-container .main-collection-container .collection-menu .container ul {
        display: flex;
        align-items: center;
        justify-content: space-around;
        padding: 15px 100px; }
        .app-main .main-container .main-collection-container .collection-menu .container ul li {
          display: flex;
          align-items: center;
          justify-content: center;
          cursor: pointer;
          margin-right: 80px;
          transition: 0.5s; }
          .app-main .main-container .main-collection-container .collection-menu .container ul li:hover {
            color: crimson; }
          .app-main .main-container .main-collection-container .collection-menu .container ul li:last-child {
            margin-right: 0px; }
    .app-main .main-container .main-collection-container:hover > .container > i {
      transform: scale(1); }
    .app-main .main-container .main-collection-container .container {
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 10px 35px; }
      .app-main .main-container .main-collection-container .container .product-slider {
        width: 100%; }
        .app-main .main-container .main-collection-container .container .product-slider .products {
          scroll-snap-align: start;
          width: 100%;
          display: grid;
          grid-auto-flow: column;
          grid-auto-columns: calc(100% / 4);
          grid-gap: 0px;
          overflow-x: auto;
          scroll-snap-type: mandatory;
          scroll-behavior: smooth;
          scrollbar-width: 0; }
          .app-main .main-container .main-collection-container .container .product-slider .products::-webkit-scrollbar {
            display: none; }
          .app-main .main-container .main-collection-container .container .product-slider .products .product-card-wrapper {
            width: 100%;
            display: flex;
            justify-content: center;
            align-items: center; }
            .app-main .main-container .main-collection-container .container .product-slider .products .product-card-wrapper .product-card {
              width: 95%;
              transition: 0.5s ease-in-out;
              border-radius: 15px;
              border: 1px solid #fff;
              overflow: hidden;
              padding-bottom: 3px;
              cursor: pointer; }
              .app-main .main-container .main-collection-container .container .product-slider .products .product-card-wrapper .product-card:hover .product-image img {
                transform: scale(1.6); }
              .app-main .main-container .main-collection-container .container .product-slider .products .product-card-wrapper .product-card .product-image {
                display: flex;
                justify-content: center;
                align-items: center;
                width: 100%;
                height: 200px;
                overflow: hidden; }
                .app-main .main-container .main-collection-container .container .product-slider .products .product-card-wrapper .product-card .product-image img {
                  object-position: center;
                  object-fit: cover;
                  width: 100%;
                  height: 100%;
                  transition: 1s; }
              .app-main .main-container .main-collection-container .container .product-slider .products .product-card-wrapper .product-card .product-info {
                padding: 15px; }
                .app-main .main-container .main-collection-container .container .product-slider .products .product-card-wrapper .product-card .product-info h6 {
                  font-size: 15px; }
                .app-main .main-container .main-collection-container .container .product-slider .products .product-card-wrapper .product-card .product-info p {
                  font-size: 12px;
                  margin: 10px 0; }
              .app-main .main-container .main-collection-container .container .product-slider .products .product-card-wrapper .product-card .button-shop {
                width: 100%;
                display: flex;
                justify-content: end;
                font-size: 12px;
                padding: 15px 20px;
                margin: 0;
                border: none; }
                .app-main .main-container .main-collection-container .container .product-slider .products .product-card-wrapper .product-card .button-shop i {
                  margin: 0 5px; }
      .app-main .main-container .main-collection-container .container > i {
        z-index: 100;
        padding: 5px;
        transform: scale(0);
        font-size: 20px;
        cursor: pointer;
        transition: 1s;
        opacity: 0.5; }
        .app-main .main-container .main-collection-container .container > i:hover {
          opacity: 1;
          color: crimson; }
  .app-main .main-container .main-brands-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-top: 125px;
    margin-bottom: 100px; }
    .app-main .main-container .main-brands-container .container .main-brands {
      width: 100%;
      padding: 20px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center; }
    .app-main .main-container .main-brands-container .container {
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 0 35px; }
      .app-main .main-container .main-brands-container .container .brand-slider {
        width: 100%; }
        .app-main .main-container .main-brands-container .container .brand-slider .brands {
          scroll-snap-align: start;
          width: 100%;
          display: grid;
          grid-auto-flow: column;
          grid-auto-columns: calc(100% / 5);
          grid-gap: 0px;
          align-items: center;
          overflow-x: auto;
          scroll-snap-type: mandatory;
          scroll-behavior: smooth;
          scrollbar-width: 0; }
          .app-main .main-container .main-brands-container .container .brand-slider .brands::-webkit-scrollbar {
            display: none; }
          .app-main .main-container .main-brands-container .container .brand-slider .brands .brand-card-wrapper {
            width: 90%;
            display: flex;
            justify-content: center;
            align-items: center; }
            .app-main .main-container .main-brands-container .container .brand-slider .brands .brand-card-wrapper .brand-card img {
              max-width: 250px;
              width: 100%;
              transition: 0.7s;
              cursor: pointer; }
              .app-main .main-container .main-brands-container .container .brand-slider .brands .brand-card-wrapper .brand-card img:hover {
                transform: scale(1.2); }
      .app-main .main-container .main-brands-container .container > i {
        z-index: 100;
        padding: 5px;
        font-size: 20px;
        cursor: pointer;
        transition: 1s;
        opacity: 0.5; }
        .app-main .main-container .main-brands-container .container > i:hover {
          opacity: 1;
          color: crimson; }
  .app-main .main-container .main-banner-container {
    width: 100%;
    margin-bottom: 100px; }
    .app-main .main-container .main-banner-container .main-banner {
      width: 100%;
      min-height: 700px;
      background: linear-gradient(black, rgba(0, 0, 0, 0.5), black), url(../images/banner.png) no-repeat fixed;
      background-position: center;
      background-size: cover; }
  .app-main .main-container .main-best-seller-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-top: 50px;
    margin-bottom: 100px; }
    .app-main .main-container .main-best-seller-container .container .main-best-seller {
      width: 100%;
      padding: 20px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center; }
    .app-main .main-container .main-best-seller-container .container {
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 0 35px; }
      .app-main .main-container .main-best-seller-container .container .best-seller-slider {
        width: 100%; }
        .app-main .main-container .main-best-seller-container .container .best-seller-slider .best-seller {
          scroll-snap-align: start;
          width: 100%;
          display: grid;
          grid-auto-flow: column;
          grid-auto-columns: calc(100% / 10);
          grid-gap: 0px;
          align-items: center;
          overflow-x: auto;
          scroll-snap-type: mandatory;
          scroll-behavior: smooth;
          scrollbar-width: 0; }
          .app-main .main-container .main-best-seller-container .container .best-seller-slider .best-seller::-webkit-scrollbar {
            display: none; }
          .app-main .main-container .main-best-seller-container .container .best-seller-slider .best-seller .best-seller-card-wrapper {
            width: 90%;
            display: flex;
            justify-content: center;
            align-items: center;
            border: 1px solid #fff;
            border-radius: 10px;
            overflow: hidden;
            height: 400px; }
            .app-main .main-container .main-best-seller-container .container .best-seller-slider .best-seller .best-seller-card-wrapper .best-seller-card {
              height: 100%;
              width: 100%; }
              .app-main .main-container .main-best-seller-container .container .best-seller-slider .best-seller .best-seller-card-wrapper .best-seller-card img {
                max-width: 150px;
                height: 100%;
                width: 100%;
                transition: 0.7s;
                object-fit: cover;
                cursor: pointer; }
                .app-main .main-container .main-best-seller-container .container .best-seller-slider .best-seller .best-seller-card-wrapper .best-seller-card img:hover {
                  transform: scale(1.2); }
      .app-main .main-container .main-best-seller-container .container > i {
        z-index: 100;
        padding: 5px;
        font-size: 20px;
        cursor: pointer;
        transition: 1s;
        opacity: 0.5; }
        .app-main .main-container .main-best-seller-container .container > i:hover {
          opacity: 1;
          color: crimson; }
  .app-main .main-container .main-get-in-touch-container {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 75px; }
    .app-main .main-container .main-get-in-touch-container .container {
      padding: 20px; }
      .app-main .main-container .main-get-in-touch-container .container .main-get-in-touch {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between; }
        .app-main .main-container .main-get-in-touch-container .container .main-get-in-touch .get-in-touch-content {
          margin-top: 30px;
          display: grid;
          grid-template-columns: repeat(2, 1fr);
          grid-gap: 60px; }
          .app-main .main-container .main-get-in-touch-container .container .main-get-in-touch .get-in-touch-content .get-in-touch-description {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            color: #fff; }
            .app-main .main-container .main-get-in-touch-container .container .main-get-in-touch .get-in-touch-content .get-in-touch-description p {
              text-align: justify;
              margin-bottom: 15px; }
            .app-main .main-container .main-get-in-touch-container .container .main-get-in-touch .get-in-touch-content .get-in-touch-description i {
              margin: 10px; }
            .app-main .main-container .main-get-in-touch-container .container .main-get-in-touch .get-in-touch-content .get-in-touch-description a {
              color: #fff; }
            .app-main .main-container .main-get-in-touch-container .container .main-get-in-touch .get-in-touch-content .get-in-touch-description .get-in-touch-address,
            .app-main .main-container .main-get-in-touch-container .container .main-get-in-touch .get-in-touch-content .get-in-touch-description .get-in-touch-email,
            .app-main .main-container .main-get-in-touch-container .container .main-get-in-touch .get-in-touch-content .get-in-touch-description .get-in-touch-phone {
              margin: 10px 0;
              display: flex;
              align-items: center; }
          .app-main .main-container .main-get-in-touch-container .container .main-get-in-touch .get-in-touch-content .get-in-touch-form form {
            width: 100%;
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            grid-gap: 10px; }
            .app-main .main-container .main-get-in-touch-container .container .main-get-in-touch .get-in-touch-content .get-in-touch-form form > * {
              height: 40px;
              padding: 10px;
              border: 1px solid #fff;
              background: none;
              outline: none;
              color: #fff;
              border-radius: 10px;
              font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; }
            .app-main .main-container .main-get-in-touch-container .container .main-get-in-touch .get-in-touch-content .get-in-touch-form form button {
              grid-column: 1/-1;
              height: 45px;
              cursor: pointer;
              transition: 0.5s; }
              .app-main .main-container .main-get-in-touch-container .container .main-get-in-touch .get-in-touch-content .get-in-touch-form form button:hover {
                border: 1px solid crimson;
                color: crimson; }
            .app-main .main-container .main-get-in-touch-container .container .main-get-in-touch .get-in-touch-content .get-in-touch-form form textarea {
              grid-column: 1/-1;
              height: 130px;
              resize: none; }

.app-footer {
  width: 100%;
  padding: 20px;
  border-top: 2px solid #f5f5f559; }
  .app-footer .footer-container {
    display: flex;
    align-items: center;
    justify-content: space-between; }
    .app-footer .footer-container .copyright a {
      color: #fff; }
    .app-footer .footer-container .copyright i {
      margin: 0 5px; }
    .app-footer .footer-container .social-links a,
    .app-footer .footer-container .payments a {
      color: #fff; }
      .app-footer .footer-container .social-links a i,
      .app-footer .footer-container .payments a i {
        font-size: 25px;
        padding: 5px;
        margin: 0 5px;
        transition: 1s; }
        .app-footer .footer-container .social-links a i:hover,
        .app-footer .footer-container .payments a i:hover {
          transform: rotate(360deg) scale(1.5);
          color: crimson; }
    .app-footer .footer-container .social-links span,
    .app-footer .footer-container .payments span {
      padding: 0 10px; }

.calculator {
  width: 100%;
  background: #fff;
  color: #000;
  font-size: 15px;
  margin: 0;
  padding: 0;
  box-sizing: border-box; }
  .calculator .container {
    max-width: 99%;
    margin: 0 auto; }
    .calculator .container button {
      cursor: pointer; }
    .calculator .container .header {
      padding: 20px 0;
      font-size: 25px;
      text-align: center;
      margin: 0 auto; }
    .calculator .container .main {
      padding: 30px;
      width: 100%;
      display: flex;
      align-items: start;
      flex-direction: column; }
      .calculator .container .main .add-new-button {
        width: 100%;
        padding-bottom: 50px;
        border-bottom: 2px solid #000; }
        .calculator .container .main .add-new-button button {
          padding: 8px 15px;
          border: 1px solid crimson;
          outline: none;
          margin: 0 5px;
          cursor: pointer;
          border-radius: 10px;
          background: transparent;
          color: crimson;
          transition: 0.5s;
          font-size: 11px; }
          .calculator .container .main .add-new-button button:hover {
            color: #fff;
            background: crimson; }
          .calculator .container .main .add-new-button button:last-child {
            background: crimson;
            color: #fff; }
      .calculator .container .main .add-new-field {
        width: 100%;
        margin-top: 50px;
        padding-bottom: 100px;
        border-bottom: 2px solid #000; }
        .calculator .container .main .add-new-field form {
          width: 100%;
          display: grid;
          grid-template-columns: repeat(3, 1fr);
          grid-gap: 15px;
          align-items: start; }
          .calculator .container .main .add-new-field form input,
          .calculator .container .main .add-new-field form .drop-down-lists,
          .calculator .container .main .add-new-field form button {
            height: 50px;
            border: 1px solid #000;
            color: #000;
            background: transparent;
            outline: none;
            padding: 10px;
            border-radius: 10px; }
          .calculator .container .main .add-new-field form input::placeholder {
            color: #000; }
          .calculator .container .main .add-new-field form .drop-down-lists {
            display: flex;
            align-items: center;
            justify-content: space-between;
            color: #000;
            cursor: pointer; }
            .calculator .container .main .add-new-field form .drop-down-lists i {
              font-size: 15px;
              padding: 5px;
              pointer-events: none; }
          .calculator .container .main .add-new-field form .size-input {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between; }
            .calculator .container .main .add-new-field form .size-input > input {
              flex-grow: 1; }
            .calculator .container .main .add-new-field form .size-input div {
              display: flex;
              margin-left: 15px;
              align-items: center; }
              .calculator .container .main .add-new-field form .size-input div input {
                width: 50px; }
              .calculator .container .main .add-new-field form .size-input div i {
                display: flex;
                align-items: center;
                font-size: 28px;
                margin: 0 2px;
                transform: rotate(90deg); }
          .calculator .container .main .add-new-field form button[type="submit"] {
            background-color: green;
            border-color: green;
            color: #fff;
            font-size: 15px; }
          .calculator .container .main .add-new-field form button[type="reset"] {
            background-color: crimson;
            border-color: crimson;
            color: #fff;
            font-size: 15px; }
      .calculator .container .main .customer-invoice {
        width: 100%; }
        .calculator .container .main .customer-invoice .information {
          width: 100%;
          display: grid;
          grid-template-columns: repeat(2, 1fr); }
          .calculator .container .main .customer-invoice .information .information-contents {
            display: flex;
            flex-direction: column;
            margin: 25px 0; }
            .calculator .container .main .customer-invoice .information .information-contents span {
              margin-bottom: 5px; }
        .calculator .container .main .customer-invoice .table-information {
          display: flex;
          width: 100%;
          border: 2px solid #000;
          border-radius: 25px;
          overflow: hidden;
          padding: 25px; }
          .calculator .container .main .customer-invoice .table-information .table {
            width: 100%;
            display: flex;
            flex-direction: column;
            align-items: start;
            overflow-x: scroll;
            white-space: nowrap;
            padding-bottom: 25px; }
            .calculator .container .main .customer-invoice .table-information .table .table-header,
            .calculator .container .main .customer-invoice .table-information .table .table-info {
              width: 100%;
              display: flex;
              flex-wrap: nowrap;
              background: #000;
              color: #fff;
              padding: 10px 0;
              border-radius: 10px;
              font-size: 11px; }
              .calculator .container .main .customer-invoice .table-information .table .table-header span,
              .calculator .container .main .customer-invoice .table-information .table .table-info span {
                text-align: center;
                text-wrap: nowrap;
                padding: 10px 3px;
                min-width: 120px; }
                .calculator .container .main .customer-invoice .table-information .table .table-header span:nth-child(1),
                .calculator .container .main .customer-invoice .table-information .table .table-info span:nth-child(1) {
                  min-width: 30px;
                  padding-left: 15px; }
                .calculator .container .main .customer-invoice .table-information .table .table-header span:nth-child(2),
                .calculator .container .main .customer-invoice .table-information .table .table-info span:nth-child(2) {
                  min-width: 160px; }
                .calculator .container .main .customer-invoice .table-information .table .table-header span:nth-child(3),
                .calculator .container .main .customer-invoice .table-information .table .table-info span:nth-child(3) {
                  min-width: 45px; }
                .calculator .container .main .customer-invoice .table-information .table .table-header span:nth-child(4), .calculator .container .main .customer-invoice .table-information .table .table-header span:nth-child(5),
                .calculator .container .main .customer-invoice .table-information .table .table-info span:nth-child(4),
                .calculator .container .main .customer-invoice .table-information .table .table-info span:nth-child(5) {
                  min-width: 55px; }
                .calculator .container .main .customer-invoice .table-information .table .table-header span:nth-child(6),
                .calculator .container .main .customer-invoice .table-information .table .table-info span:nth-child(6) {
                  min-width: 70px; }
                .calculator .container .main .customer-invoice .table-information .table .table-header span:nth-child(7),
                .calculator .container .main .customer-invoice .table-information .table .table-info span:nth-child(7) {
                  min-width: 65px; }
                .calculator .container .main .customer-invoice .table-information .table .table-header span:nth-child(8),
                .calculator .container .main .customer-invoice .table-information .table .table-info span:nth-child(8) {
                  min-width: 180px; }
                .calculator .container .main .customer-invoice .table-information .table .table-header span:nth-child(9), .calculator .container .main .customer-invoice .table-information .table .table-header span:nth-child(10), .calculator .container .main .customer-invoice .table-information .table .table-header span:nth-child(11), .calculator .container .main .customer-invoice .table-information .table .table-header span:nth-child(12), .calculator .container .main .customer-invoice .table-information .table .table-header span:nth-child(13), .calculator .container .main .customer-invoice .table-information .table .table-header span:nth-child(14),
                .calculator .container .main .customer-invoice .table-information .table .table-info span:nth-child(9),
                .calculator .container .main .customer-invoice .table-information .table .table-info span:nth-child(10),
                .calculator .container .main .customer-invoice .table-information .table .table-info span:nth-child(11),
                .calculator .container .main .customer-invoice .table-information .table .table-info span:nth-child(12),
                .calculator .container .main .customer-invoice .table-information .table .table-info span:nth-child(13),
                .calculator .container .main .customer-invoice .table-information .table .table-info span:nth-child(14) {
                  min-width: 65px; }
                .calculator .container .main .customer-invoice .table-information .table .table-header span:nth-child(15), .calculator .container .main .customer-invoice .table-information .table .table-header span:nth-child(16),
                .calculator .container .main .customer-invoice .table-information .table .table-info span:nth-child(15),
                .calculator .container .main .customer-invoice .table-information .table .table-info span:nth-child(16) {
                  min-width: 85px; }
            .calculator .container .main .customer-invoice .table-information .table .table-info {
              background: #fff;
              color: #000;
              padding: 12px 3px;
              border-bottom: 1px solid rgba(128, 128, 128, 0.274);
              border-radius: 0px; }

.button-shop {
  display: inline-flex;
  padding: 10px;
  border-radius: 10px;
  justify-content: center;
  align-items: center;
  width: 150px;
  border: 1px solid #fff;
  outline: none;
  color: #fff;
  background: transparent;
  margin: 20px 0;
  cursor: pointer;
  transition: 0.5s; }
  .button-shop:hover {
    border: 1px solid crimson;
    color: crimson; }

@media (max-width: 1024px) {
  .app-header .header-container .hero-contents {
    display: flex;
    justify-content: center;
    padding: 20px; }
    .app-header .header-container .hero-contents .container .hero-content-inner {
      display: flex;
      flex-direction: column; }
      .app-header .header-container .hero-contents .container .hero-content-inner h1 {
        text-align: end;
        font-weight: normal;
        font-size: 50px;
        margin-bottom: 20px; }
      .app-header .header-container .hero-contents .container .hero-content-inner p {
        align-self: flex-end;
        text-align: end;
        max-width: 400px;
        font-size: 15px; }
  .app-main .main-container .main-collection-container .container .product-slider .products {
    grid-auto-columns: calc(100% / 3); }
  .app-main .main-container .main-brands-container .container .brand-slider .brands {
    grid-auto-columns: calc(100% / 4); }
  .app-main .main-container .main-get-in-touch-container .container .main-get-in-touch .get-in-touch-content {
    grid-template-columns: repeat(1, 1fr);
    grid-gap: 20px; } }

@media (max-width: 800px) {
  .app-header {
    width: 100%;
    background: linear-gradient(rgba(0, 0, 0, 0.3), black), url(../images/hero-canada-wallpaper.png) 30% 0% no-repeat; }
    .app-header .header-container .header-navbar .container .header-navbar-contents .header-logo img {
      width: 80px; }
    .app-header .header-container .header-navbar .container .header-navbar-contents .header-menu ul {
      display: none; }
    .app-header .header-container .header-navbar .container .header-navbar-contents .header-icons i {
      display: flex; }
    .app-header .header-container .hero-contents .container .hero-content-inner {
      padding-top: 50px; }
      .app-header .header-container .hero-contents .container .hero-content-inner h1 {
        text-align: center;
        font-size: 50px; }
      .app-header .header-container .hero-contents .container .hero-content-inner p {
        align-self: center;
        text-align: center;
        font-size: 16px;
        margin: 20px 0; }
      .app-header .header-container .hero-contents .container .hero-content-inner .button-shop {
        align-self: center; }
  .app-main .main-container .main-collection-container .collection-menu .container ul {
    padding: 15px 50px; }
    .app-main .main-container .main-collection-container .collection-menu .container ul li {
      margin-right: 60px;
      font-size: 12px; }
  .app-main .main-container .main-collection-container .container {
    padding: 0 30px; }
    .app-main .main-container .main-collection-container .container .product-slider .products {
      grid-auto-columns: calc(100% / 2); }
    .app-main .main-container .main-collection-container .container i {
      transform: scale(1);
      font-size: 20px; }
  .app-main .main-container .main-brands-container .container .brand-slider .brands {
    grid-auto-columns: calc(100% / 3); }
  .app-footer .footer-container {
    flex-direction: column; }
    .app-footer .footer-container .copyright {
      order: 2;
      margin-bottom: 10px; }
    .app-footer .footer-container .social-links {
      order: 1;
      margin-bottom: 10px; } }

@media (max-width: 550px) {
  .app-main .main-container .main-collection-container .collection-menu .container ul {
    padding: 15px 10px; }
    .app-main .main-container .main-collection-container .collection-menu .container ul li {
      margin-right: 35px;
      font-size: 12px; }
  .app-main .main-container .main-collection-container .container {
    padding: 0 30px; }
    .app-main .main-container .main-collection-container .container .product-slider .products {
      grid-auto-columns: calc(100% / 1); }
  .app-main .main-container .main-brands-container .container .brand-slider .brands {
    grid-auto-columns: calc(100% / 2); }
  .app-main .main-container .main-get-in-touch-container .container .main-get-in-touch .get-in-touch-content .get-in-touch-form form {
    grid-template-columns: repeat(1, 1fr);
    grid-gap: 10px; } }