/** Global styles**/
* {
   padding: 0px;
   margin: 0px;
   box-sizing: border-box;
}

html {
   font-size: 14px;
   font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}

body {
   display: flex;
   flex-direction: column;
   min-height: 100vh;
}

a {
   text-decoration: none;
}

.navbar,
ul,
li {
   padding: 0px;
   margin: 0px;
}

h1,
h2,
h3,
h4,
h5,
h6 {
   font-family: "Glegoo", serif;
   font-weight: 500;
   margin: 0px;
   padding: 0px;
   line-height: normal;
}

p {
   line-height: normal;
   margin: 0px;
   padding: 0px;
   color: var(--color-paragraph);
}

button {
   background-color: transparent;
   border: 0px;
}

:root {
   --color-cream: #f3f3f3;
   --color-crimson: #ff5063;
   --color-purple: #3c43a4;
   --color-paragraph: #999;
   --color-light-purple: rgb(118, 156, 213);
}

/*
*   Image container
*/
.image-container {
   display: flex;
   justify-content: center;
   align-items: center;
   position: relative;
}

.image-container__sm {
   height: 244px;
   width: 196px;
}

/* Loader spinner
* 
*/
@keyframes spinner {
   from {
      transform: rotate(0deg);
   }
   to {
      transform: rotate(360deg);
   }
}

.loader {
   position: absolute;
   display: none;
   height: 64px;
   width: 64px;
   background-image: url("../public/assets/img/loading.png");
   animation: spinner infinite ease 1s;
}

.loader--active {
   display: inline;
}
/** Styles for banner
    Can change it´s properties depending on the page it is used
**/
.banner {
   width: 100%;
}

.rounded-container {
   border-radius: 50%;
   background-color: var(--color-purple);
}

/** Product card **/
.product-card {
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   align-items: center;
}

.product-card img {
   object-fit: contain;
}

.product-card button {
   width: fit-content;
   height: fit-content;
   border: 1px solid #717171;
   padding: 7px 21px;
   border-radius: 5px;
   font-size: 1.1rem;
   background-color: transparent;
   cursor: pointer;
   transition: all 0.3s ease;
}

.product-card button:hover {
   background-color: var(--color-purple);
   border-color: var(--color-purple);
   color: white;
}

.product-description h5 {
   font-size: 1.1rem;
   color: #ff5063;
   line-height: 1.1;
   text-align: center;
}

.product-description p {
   display: flex;
   margin-top: 20px;
   justify-content: space-evenly;
}

.product-description p span {
   color: #999;
   text-decoration: line-through;
}

.product-description p i {
   color: black;
   font-size: 1.1rem;
   font-style: normal;
   font-weight: bold;
}

.product-card--sm {
   width: 196px;
   height: 361px;
}

.product-card--sm img {
   width: 100%;
   height: 222px;
}

.product-card--md {
   width: 253px;
   height: 433px;
}

.product-card--md img {
   width: 100%;
   height: 297px;
}

.product-card--lg {
   width: 255px;
   height: 478px;
}

.product-card--lg img {
   width: 100%;
   height: 340px;
}

/* ClearFix*/
.clearfix {
   width: 1170px;
   padding: 0px 15px;
}

@media (max-width: 1170px) {
   .clearfix {
      width: 970px;
   }
}

@media (max-width: 992px) {
   .clearfix {
      width: 750px;
   }
}

@media (max-width: 760px) {
   .clearfix {
      width: 100%;
   }
}

/* info-social */
.social-networks {
   list-style: none;
   display: flex;
}

.social-networks li {
   margin-bottom: 14px;
   color: #999;
}

.social-networks li,
.social-networks li i {
   display: flex;
   align-items: center;
}

.social-networks li i {
   width: 35px;
   height: 35px;
   background-color: black;
   color: white;
   justify-content: center;
   border: 1px solid;
   padding-top: 2.5%;
   margin-right: 15px;
}

/*Sections*/
.section-content {
   display: flex;
   flex-direction: column;
   align-items: center;
   padding: 80px 0px;
}

.section-content--footer {
   padding: 64px 0px;
}

.section-title h2 {
   font-size: 2.3rem;
   font-weight: 500;
   padding-bottom: 64px;
   position: relative;
}

.section-title h2::before {
   content: "";
   position: absolute;
   top: 27%;
   left: -65%;
   background: var(--color-crimson);
   height: 1px;
   width: 55%;
}

.section-title h2::after {
   content: "";
   position: absolute;
   bottom: 79%;
   right: 13%;
   background: #212121;
   height: 1px;
   width: 55%;
   transform: rotate(135deg);
   -webkit-transform: rotate(135deg);
   -moz-transform: rotate(135deg);
   -o-transform: rotate(135deg);
   -ms-transform: rotate(135deg);
}

.section-content--highlighted {
   background-color: #f3f3f3;
}

@media (max-width: 1170px) {
   .section-content {
      padding: 64px 0px;
   }
}

@media (max-width: 992px) {
   .section-content {
      padding: 48px 0px;
   }
}

@media (max-width: 760px) {
   .section-content {
      padding: 32px 0px;
   }
}

@media (max-width: 580px) {
   .section-title h2 {
      font-size: 2rem;
   }
}

/** Styles for header, this properties will be the same in all pages 
    since header is present on each one of them.
**/
.header {
   width: 100%;
}

.header-container {
   display: flex;
}

.header-container--top {
   padding: 30px 0px;
   justify-content: space-evenly;
   align-items: center;
}

@media (max-width: 768px) {
   .header-container--top {
      justify-content: center;
   }
}

.header-container--bottom {
   justify-content: center;
   background-color: #3c43a4;
}

.logo h1 {
   font-size: 2.5rem;
   display: flex;
   flex-direction: column;
   align-items: center;
   line-height: 1.5;
   letter-spacing: 2px;
   font-weight: bolder;
}

.logo h1 span {
   font-size: 0.7rem;
   letter-spacing: 5px;
}

.menu-toggler::before,
.menu-toggler::after {
   position: absolute;
   content: "";
   display: block;
   width: 35px;
   height: 5px;
   background-color: white;
}

.menu-toggler::before {
   top: 5px;
}

.menu-toggler::after {
   bottom: 5px;
}

.menu-toggler {
   width: 50px;
   height: 40px;
   position: relative;
   margin: 10px 0px 10px 5px;
   display: none;
   justify-content: center;
   cursor: pointer;
}

.menu-toggler span {
   position: absolute;
   width: 35px;
   height: 5px;
   background-color: white;
   top: 50%;
   left: 50%;
   margin: -2.5px 0px 0px -17.5px;
}

.menu {
   list-style: none;
   padding: 20px 0px;
}

.menu--inactive {
   display: none;
}

.menu--active {
   display: flex;
}

.menu-item a {
   padding: 20px 30px;
   font-size: 1rem;
   font-weight: 400;
   color: white;
   text-decoration: none;
}

.menu-item:hover a {
   color: #ff5063;
   cursor: pointer;
}

.login {
   border: 1px solid #3c43a4;
   transition: border-radius 0.5s ease;
   cursor: pointer;
}

.login button {
   padding: 15px 20px;
   color: var(--color-light-purple);
   font-size: 1.2rem;
}

.login span::before {
   font-weight: 500;
}

.login:hover {
   border-radius: 15px;
   background-color: var(--color-purple);
   color: white;
}

.search {
   border: 1px solid var(--color-crimson);
}

.search button {
   padding: 15px 15px;
   color: var(--color-crimson);
   font-size: 1rem;
   cursor: pointer;
}

.cart {
   position: fixed;
   z-index: 1;
   background-color: #ff5063;
   border-radius: 3px;
   right: 10%;
   display: flex;
   justify-content: center;
   transition: all ease 0.5s;
}

.cart-on-scrolling {
   top: 10px;
   right: 10px;
}

@media (max-width: 1280px) {
   .cart {
      right: 20px;
   }
}

@media (max-width: 768px) {
}

.btn-cart {
   position: relative;
   width: 50px;
   height: 44px;
   border: 0px;
   outline: none;
   background-color: transparent;
   cursor: pointer;
}

.btn-cart i {
   color: white;
   font-size: 32px;
}

.cart__count {
   position: absolute;
   background-color: var(--color-purple);
   width: 20px;
   height: 20px;
   top: -8px;
   right: -8px;
   z-index: 2;
   border-radius: 50%;
   color: white;
   display: flex;
   justify-content: center;
   align-items: center;
   visibility: hidden;
}

.visible {
   visibility: visible;
}

.cart__detail {
   position: absolute;
   width: 350px;
   top: 100%;
   right: 100%;
   background-color: white;
   border-radius: 5px;
   padding: 15px;
   box-shadow: 0px 0px 10px 0px lightgray;
   display: none;
}

.cart__detail--visible {
   display: block;
}

.cart__detail__current-sum {
   font-size: 1.2rem;
   font-weight: bold;
   width: 100%;
   text-align: right;
   margin-top: 15px;
}

.cart__detail ul {
   list-style: none;
   height: 120px;
   overflow-y: scroll;
}

.cart__detail ul li {
   display: flex;
   justify-content: space-between;
   margin-bottom: 10px;
}

.cart__detail ul li button {
   background-color: var(--color-crimson);
   color: white;
   font-weight: bold;
   border: 0px;
   padding: 3px;
   border-radius: 3px;
   cursor: pointer;
}

@media (max-width: 768px) {
   .cart {
      top: 125px;
   }
   .header-container--top {
      justify-content: space-between;
   }
   .login {
      margin-left: 20px;
   }
   .search {
      margin-right: 20px;
   }
   .logo h1 {
      font-size: 2rem;
   }
   .navbar--header {
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-start;
      overflow: hidden;
   }
   .menu {
      width: 100%;
      flex-direction: column;
   }
   .menu-toggler {
      display: flex;
   }
   .menu-item {
      padding: 20px 30px;
      text-align: center;
   }
   .login button {
      padding: 10px 15px;
      font-size: 1.2rem;
   }
   .search button {
      padding: 10px 10px;
      font-size: 1rem;
   }
}

@media (min-width: 769px) {
   .menu {
      width: 100%;
      flex-direction: row;
      display: flex;
   }
}

/** Newsletter - SECTION - **/
.section-content--newsletter {
   padding: 48px 0px;
   background-color: var(--color-purple);
}

.newsletter {
   display: flex;
   background-color: var(--color-purple);
   justify-content: space-between;
   align-items: center;
   width: 1170px;
   padding: 0px 15px;
}

.newsletter__left h3 {
   font-size: 2rem;
   color: white;
}

.newsletter__left p {
   color: #bfbfbf;
}

.newsletter__form-right {
   display: flex;
   background-color: white;
}

.newsletter__form-right input,
.newsletter__form-right button {
   height: 40px;
   outline: none;
   border: 0px;
}

.newsletter__form-right input {
   width: 340px;
   padding: 0px 20px;
}

.newsletter__form-right button {
   background: url(../public/assets/img/arrow.png) no-repeat 20px -65px var(--color-crimson);
   padding: 0px 35px;
   cursor: pointer;
}

@media (max-width: 992px) {
   .newsletter__form-right {
      margin-top: 48px;
   }
   .newsletter__form-right input {
      width: 300px;
   }
   .newsletter__form-right button {
      background-position-x: 12px;
   }
}

/** Footer **/
.footer-info {
   width: 1170px;
   display: grid;
   grid-template-columns: 1fr 1fr 1fr 1fr;
   font-style: normal;
}

.footer-info h3 {
   font-size: 1.7rem;
   margin-bottom: 48px;
   position: relative;
   padding-bottom: 5px;
}

.footer-info h3::before {
   content: "";
   position: absolute;
   bottom: 0;
   left: 0;
   border-bottom: 2px solid var(--color-purple);
   width: 20%;
}

.footer-info p {
   margin-bottom: 28px;
   color: #999;
}

.footer-info ul {
   list-style: none;
}

.footer-info ul li {
   margin-bottom: 14px;
   color: #999;
}

.footer-info__frequent,
.footer-info__categories,
.footer-info__contact,
.footer-info__social {
   padding: 0px 15px;
}

.footer-info__frequent li,
.footer-info__categories li {
   padding-left: 30px;
   background: url(../public/assets/img/arrow.png) no-repeat -6px -98px;
}

.footer-info__contact li,
.footer-info__contact li i {
   display: flex;
   align-items: center;
}

.footer-info__contact li i {
   border: 1px solid;
   padding-top: 2.5%;
   margin-right: 15px;
}

.footer-info__contact li i {
   width: 32px;
   height: 32px;
   flex-direction: column;
   color: black;
}

.web-designers {
   padding-top: 48px;
}

.web-designers p {
   color: #999;
}

/** Media Queries **/
@media (max-width: 1170px) {
   .footer-info,
   .newsletter {
      width: 970px;
   }
}

@media (max-width: 992px) {
   .footer-info,
   .newsletter {
      width: 750px;
   }
   .footer-info {
      grid-template-columns: 1fr 1fr;
   }
}

@media (max-width: 760px) {
   .newsletter {
      flex-direction: column;
   }
   .footer-info,
   .newsletter {
      width: 100%;
   }
}