* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  text-decoration: none;
  list-style-type: none;
  scroll-behavior: smooth;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -moz-tap-highlight-color: rgba(0, 0, 0, 0);
}

body {
  background-color: black;
  font-family: "Exo", sans-serif;
}

a {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

/* MAIN */

main .main-look section {
  width: 100%;
  margin-top: 6.1vw;
}

/* MAIN-LOOK */
/* HIGHER-BOX */

main .main-look section .higher-box {
  display: flex;
}

main .main-look section .higher-box .imgBx {
  position: relative;
  height: 19vw;
  width: 30vw;
  margin: 3% 2% 0 12%;
}

main .main-look section .higher-box .imgBx .imgBx-background {
  width: 100%;
  height: 100%;
}

main .main-look section .higher-box .imgBx .imgBx-img {
  display: flex;
  align-items: center;
}

main .main-look section .higher-box .imgBx .imgBx-img img {
  height: 100%;
  box-shadow: 0px 0px 5vw #a7a7a7;
}

main .main-look section .higher-box .imgBx .imgBx-content {
  font-family: "Exo";
  font-style: normal;
  margin-left: 1vw;
  font-weight: 700;
  font-size: 3vw;
  color: #625753;
  text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
  text-transform: uppercase;
  position: absolute;
  top: 200%;
}

main .main-look section .higher-box .contentBx {
  height: 25vw;
  width: 35%;
  margin: 3% 10% 0 10%;
}

main .main-look section .higher-box .contentBx .see-more-button {
  display: inline-block;
  background: #c6c6c6;
  border-radius: 20px;
  font-family: "Exo";
  font-style: normal;
  font-weight: 800;
  color: #483120;
  text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
  opacity: 0.5;
}

main .main-look section .higher-box .contentBx .content {
  font-family: "Exo";
  font-style: normal;
  font-weight: 800;
  font-size: 1.5vw;
  line-height: 2.3vw;
  color: #c6c6c6;
  text-align: justify;
}

main .main-look section .higher-box .contentBx .content a {
  text-decoration: underline;
  color: #c6c6c6;
}

/* LOWER-BOX */

main .main-look section .lower-box {
  margin-left: 4vw;
  margin-right: 4vw;
  margin-top: -6.5vw;
}

main .main-look section .lower-box h1 {
  display: flex;
  justify-content: center;
  color: #c6c6c6;
  font-family: "Exo";
  font-style: normal;
  font-weight: 800;
  font-size: 2vw;
  line-height: 2.5vw;
  text-transform: uppercase;
  margin-bottom: 0.75vw;
}

main .main-look section .lower-box .box-container {
  display: flex;
  justify-content: center;
  color: #c6c6c6;
  background: url(../../IMG/Customers/customer_index/customers_main_page_backgroung.png);
  background-size: cover;
  background-repeat: no-repeat;
  border-radius: 20px;
}

.start-star,
.star,
.end-star {
  position: fixed;
  visibility: hidden;
  cursor: default;
}

main .main-look section .lower-box .box-container .box {
  width: 20vw;
  text-align: justify;
  margin: 2vw 6vw 2vw 6vw;
}

main .main-look section .lower-box .box-container .box .content h2 {
  text-align: center;
  margin-bottom: 1vw;
  font-size: 1.6vw;
}

main .main-look section .lower-box .box-container .box .content {
  font-size: 1.05vw;
}

main .main-look section .lower-box .box-container .box .imgBx {
  position: fixed;
  visibility: hidden;
}

/* PRODUCTS CONTAINER */
main .products-container {
  position: relative;
  height: 255vw;
  width: auto;
  margin-top: 5vw;
  margin-left: 4vw;
  margin-right: 4vw;
  background-color: #c6c6c6;
  background: url(../../IMG/Customers/customer_index/wood_background.jpeg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  display: grid;
  justify-content: center;
  padding-bottom: 50vw;
}

main .products-container .caption {
  position: absolute;
}

main .products-container .box {
  position: relative;
  visibility: visible;
  opacity: 1;
  transition: 0.35s;
}

main .products-container .box a {
  color: black;
}

main .products-container .box .imgBx {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

main .products-container .box .imgBx img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}

main .products-container .box .contentBx .content {
  position: relative;
  padding: 15%;
}

main .products-container .box .contentBx .content h2 {
  font-weight: 500;
  font-size: 2vw;
  padding-bottom: 0.5vw;
}

main .products-container .box .contentBx .content p {
  font-weight: 300;
  font-size: 1.1vw;
}

main .products-container .end-box {
  display: grid;
  width: 80%;
  margin-left: 3vw;
  color: #c6c6c6;
  visibility: visible;
  font-weight: 700;
  font-size: 20px;
  font-weight: 26px;
  text-transform: uppercase;
  text-shadow: 0px 4px 4px rgba(0, 0, 0, 1);
  margin-bottom: 40px;
}

main .products-container .end-box .container-box {
  position: relative;
  height: auto;
  margin: 40px 0;
}

main .products-container .end-box .container-box .box-caption {
  display: flex;
  justify-content: left;
  white-space: nowrap;
  margin-bottom: 30px;
}

main .products-container .end-box .container-box .button-box .background {
  position: absolute;
  border-radius: 10px;
  background: rgba(217, 217, 217, 0.5);
  transition: transform 0.25s;
  transition-delay: 0.1s;
  transform-origin: right;
  transform: scaleX(1);
  border: 2px solid black;
  box-shadow: 10px 10px 10px black;
}

main .products-container .end-box .container-box .button-box a {
  color: black;
  border-radius: 10px;
  background: rgba(217, 217, 217, 0.5);
  transition: 0.25s;
  opacity: 0.75;
  border: 2px solid black;
  box-shadow: 10px 10px 10px black;
  white-space: nowrap;
  cursor: pointer;

  display: flex;
  justify-content: center;
  align-items: center;
}

main .products-container .end-box .container-box .button-box a:hover {
  text-decoration: underline;
  background: rgba(217, 217, 217, 0.75);
  opacity: 1;
}

/* FOOTER */

footer {
  background: none;
  background-color: black;
}

@media (min-width: 1026px) {
  body {
    height: 325.2vw;
  }
  main .main-look section .higher-box .imgBx .imgBx-content {
    transform: translate(-4.5vw, -33.5vw);
  }

  main .main-look section .higher-box .imgBx .imgBx-img {
    position: absolute;
    justify-content: right;

    bottom: 0;

    width: 110%;
    height: 110%;
    right: -20px;
    top: -20px;
  }

  main .main-look section .higher-box .imgBx .imgBx-img img#mobile {
    display: none;
  }

  main .main-look section .higher-box .imgBx .imgBx-img img {
    border-radius: 2vw;
  }

  main .main-look section .higher-box .contentBx .see-more-button {
    font-size: 2vw;
    line-height: 2.75vw;
    padding: 0.6vw 2.4vw 0.6vw 2.4vw;
    margin-top: 3vw;
    margin-bottom: 3vw;
    transition: 0.25s;
  }

  main .main-look section .higher-box .contentBx .see-more-button:hover {
    transform: scale(1.1);
    opacity: 0.9;
  }

  main .products-container .box:hover .contentBx .content {
    color: black;
    text-align: justify;
    justify-items: center;
  }

  main .products-container .caption {
    top: 13vw;
    left: 34.5vw;
    font-weight: 700;
    font-size: 10vw;
    color: #d4d4d4;
    opacity: 0.6;
    -webkit-text-stroke: 2px #5f5f5f;
    text-shadow: 1vw 0.9vw rgba(198, 198, 198, 0.6);
    text-transform: uppercase;
  }

  main .products-container .con1 .box {
    margin-top: 10vw;
    width: 31vw;
    height: 31vw;
    transform: translate(-24vw, 0vw);
  }

  main .products-container .con2 .box {
    width: 40vw;
    height: 36vw;
    transform: translate(22vw, 0vw);
  }
  main .products-container .con2 .box img {
    object-position: top;
  }

  main .products-container .con3 .box {
    width: 30vw;
    height: 35vw;
    transform: translate(-18vw, -5vw);
  }

  main .products-container .con4 .box {
    width: 25vw;
    height: 23vw;
    transform: translate(35vw, -10vw);
  }
  main .products-container .con4 .box img {
    object-position: top;
  }

  main .products-container .con5 .box {
    width: 28vw;
    height: 26vw;
    transform: translate(-16vw, -10vw);
  }
  main .products-container .con5 .box img {
    object-position: top;
  }

  main .products-container .con6 .box {
    width: 35vw;
    height: 35vw;
    transform: translate(24vw, -12.5vw);
  }

  main .products-container .con7 .box {
    width: 30vw;
    height: 28vw;
    transform: translate(-18vw, -15vw);
  }
  main .products-container .con7 .box img {
    object-position: top;
  }

  main .products-container .con8 .box {
    width: 35vw;
    height: 35vw;
    transform: translate(26vw, -20vw);
  }

  main .products-container .box:hover .imgBx img {
    width: 90%;
    height: 90%;
  }

  main .products-container .box .imgBx img {
    box-shadow: 20px 20px 20px rgba(0, 0, 0, 1);
    object-fit: cover;
  }

  main .products-container .box .contentBx {
    position: absolute;
    top: 10%;
    bottom: 20%;
    right: 10%;
    width: 110%;
    left: -10%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(255, 255, 255, 0.1);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    transition: transform 0.5s;
    transform-origin: right;
    transform: scaleX(0);
  }

  main .products-container .box:hover .contentBx {
    transition: transform 0.25s;
    transform-origin: left;
    transform: scaleX(1);
  }

  main .products-container .box:hover .contentBx .content {
    opacity: 1;
    transition: 0.3s;
    transition-delay: 0.35s;
  }

  main .products-container .box .contentBx .content {
    opacity: 0;
  }

  main .products-container .box .imgBx img {
    transition: 0.5s;
  }

  main .products-container .end-box {
    position: absolute;
    width: 100%;
    margin-left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    bottom: 3vw;
    left: 0;
    font-size: 1.5vw;
    font-weight: 2.3vw;
    margin-bottom: 2vw;
  }

  main .products-container .end-box .container-box {
    display: grid;
    margin: 0 10vw;
    height: 8vw;
    align-items: center;
  }

  main .products-container .end-box .container-box .box-caption {
    justify-content: center;
    align-items: center;
  }

  main .products-container .end-box .container-box .button-box .background {
    bottom: 0;
    width: 100%;
    height: 60%;
    left: -4%;
    bottom: -20%;
  }

  main .products-container .end-box .container-box .button-box {
    width: 24vw;
  }

  main .products-container .end-box .container-box .button-box a {
    padding: 1.25vw 2vw;
  }

  main
    .products-container
    .end-box
    .container-box
    .button-box:hover
    .background {
    transition: transform 0.25s;
    transform-origin: left;
    transform: scaleX(0);
  }
}

@media (max-width: 1025px) {
  /* HOGHER-BOX */
  main .main-look section .higher-box {
    display: grid;
  }

  main .main-look section .higher-box .imgBx {
    width: 100vw;
    height: 55%;
    margin: 0;
    padding: 0;
  }

  main .main-look section .higher-box .imgBx .imgBx-img {
    height: 1000px;
    width: 100%;
  }

  main .main-look section .higher-box .imgBx .imgBx-img img#desktop {
    display: none;
  }

  main .main-look section .higher-box .imgBx .imgBx-img img {
    position: absolute;
    top: -20px;
    width: 100%;
    object-fit: cover;
    object-position: right;
    z-index: 0;

    box-shadow: 0px 0vw 17.5vw #ad9b96;

    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
  }

  main .main-look section .higher-box .imgBx .imgBx-background {
    filter: blur(40px);
  }

  main .main-look section .higher-box .imgBx .imgBx-content {
    position: absolute;
    top: 55px;
    left: 6.5vw;
    font-size: 40px;
    line-height: 55px;
  }

  main .main-look section .higher-box .contentBx {
    height: auto;
    width: auto;
  }

  main .main-look section .higher-box .contentBx .see-more-button {
    position: absolute;
    bottom: 542px;
    left: 10vw;
    background: #d9d9d9;
    color: #483120;
    border-radius: 10px;
    text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    padding: 3px 26px;
    font-size: 24px;
    opacity: 1;
    box-shadow: 5px 5px 4px rgba(0, 0, 0, 0.25);
  }
  main .main-look section .higher-box .contentBx .see-more-button:hover {
    text-decoration: underline;
  }

  main .main-look .higher-box .contentBx .content {
    position: absolute;
    transform: translateY(-760px);
    font-size: 14px !important;
    line-height: 22px !important;
    width: 44vw !important;
    color: #000000 !important;
    text-align: left !important;
    text-shadow: 0 0 3px #c6c6c6;
  }

  main .main-look .higher-box .contentBx .content a {
    color: #000000 !important;
    font-size: 18px !important;
  }

  /* LOWER-BOX */

  main .main-look section {
    position: relative;
  }

  main .main-look section .lower-box {
    margin: 0;
    padding: 0;
    bottom: 0px;
    width: 100vw;
    margin-top: calc(-470px - 1vw);
    z-index: 100;
  }

  main .main-look section .lower-box h1 {
    font-size: calc(20px + 1vw);
    padding-bottom: 2vw;
    text-shadow: 0 0 3px black;

    transform: translateY(-2.2vw);
  }

  main .main-look section .lower-box .box-container .box .content h2 {
    text-align: center;
    margin-bottom: 1vw;
    font-size: 1.6vw;
  }

  main .main-look section .lower-box .box-container {
    background: none;
    background-color: #d9d9d9;
    opacity: 1;
    border-radius: 10px;
    height: 200px;

    box-shadow: 0px 0vw 17.5vw #d9d9d9;
  }

  main .main-look section .lower-box .box-container .box {
    justify-content: center;
    margin: 2vw 4.5vw;
    display: grid;
  }

  main .main-look section .lower-box .box-container .box .content h2 {
    width: min-content;
    display: flex;
    text-align: center;
    font-size: 16px;
    color: black;
  }

  main .main-look section .lower-box .box-container .box .content span {
    position: fixed;
    visibility: hidden;
  }

  main .main-look section .lower-box .box-container .box .imgBx {
    position: static;
    display: flex;
    height: 50px;
    justify-content: center;
    align-items: center;
    visibility: visible;
  }

  main .main-look section .lower-box .box-container .box .imgBx img {
    height: 100%;
  }

  /* PRODUCTS CONTAINER */

  main .products-container {
    position: relative;
    background: none;
    background-color: #d9d9d9;
    background: linear-gradient(#d9d9d9 0%, black 80%, black 100%);
    transform: translateY(-15px);
    height: auto;
    width: 100vw;
    margin: 0;
    padding: 0;
    border-top: 1px solid #463529;
    border-bottom: 1px solid #d9d9d9;
  }

  main .products-container .caption {
    margin-top: 25px;
    margin-left: 3vw;
    font-family: "Exo";
    font-style: normal;
    font-weight: 800;
    font-size: 44px;
    line-height: 50px;
    text-align: center;
    text-transform: uppercase;
    color: #483120;
    white-space: nowrap;
  }

  main .products-container .box {
    min-height: 200px;
    min-width: 200px;
    width: 94vw;
    height: 90vw;
    margin-bottom: 10px;
    box-shadow: 2px 2px 10px black;
  }

  main .products-container .box .imgBx img {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
  }

  main .products-container .container {
    width: 100vw;
    display: flex;
    justify-content: center;
    padding-bottom: 80px;
    padding-top: 40px;
    z-index: 1;
  }

  main .products-container .con1 {
    border-bottom: 1px solid #483120;
  }
  main .products-container .con1 h2 {
    color: #483120;
  }

  main .products-container .con2 {
    border-bottom: 1px solid #65594f;
  }
  main .products-container .con2 h2 {
    color: #483120;
  }

  main .products-container .con3 {
    border-bottom: 1px solid #746a61;
  }
  main .products-container .con3 h2 {
    color: #483120;
  }

  main .products-container .con4 {
    border-bottom: 1px solid #837a73;
  }
  main .products-container .con4 h2 {
    color: #483120;
  }

  main .products-container .con5 {
    border-bottom: 1px solid #928a86;
  }
  main .products-container .con5 h2 {
    color: #928a86;
  }

  main .products-container .con6 {
    border-bottom: 1px solid #a19d99;
  }
  main .products-container .con6 h2 {
    color: #a19d99;
  }

  main .products-container .con7 {
    border-bottom: 1px solid #afadab;
  }
  main .products-container .con7 h2 {
    color: #afadab;
  }

  main .products-container .con8 {
    border-bottom: 1px solid #c6c6c6;
  }
  main .products-container .con8 h2 {
    color: #c6c6c6;
  }

  main .products-container .side-board {
    position: fixed;
    height: 100%;
    width: 12vw;
    top: 0;
    right: 0;
    border-left: 1px solid #463529;
    border-image: linear-gradient(#463529, #c6c6c6) 0 100%;
    z-index: 0;
  }

  .start-star,
  .star,
  .end-star {
    visibility: visible;
    width: 40px;
    right: 12vw;
  }

  .start-star {
    top: 0;
    transform: rotate(180deg) translate(-20.5px, 6px);
  }

  .star {
    transform: translate(20.5px, 20.5px);
  }

  .end-star {
    bottom: 0;
    transform: translate(20.5px, 6px);
  }

  .start-star img,
  .star img,
  .end-star img {
    width: 100%;
  }

  main .products-container .con1 {
    padding-top: 100px;
  }

  main .products-container .box .contentBx {
    position: absolute;
    bottom: -50px;
    left: 4vw;
  }

  main .products-container .box .contentBx .content {
    color: #483120;
    height: auto;
    margin: 0;
    padding: 0;
  }

  main .products-container .box .contentBx .content p {
    position: fixed;
    visibility: hidden;
  }

  main .products-container .box .contentBx .content h2 {
    font-weight: 600;
    font-size: 24px;
    line-height: 32px;
  }

  main .products-container .end-box .container-box .button-box .background {
    height: 60px;
    left: 0;
    width: calc(12% + 225px);
    z-index: -1;
    bottom: -28px;
  }

  main .products-container .end-box .container-box .button-box {
    width: calc(12% + 225px);
  }

  main .products-container .end-box .container-box .button-box a {
    padding: 15px 6%;
    font-size: 17px;
    margin-left: 5%;
    z-index: 1;
    background: rgba(217, 217, 217, 0.75);
  }

  main .products-container .end-box .container-box .button-box a:hover {
    background: rgba(217, 217, 217, 1);
  }

  footer {
    border-top: none;
  }
}