@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;900&display=swap");

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

html {
  scroll-behavior: smooth;
}

body {
  margin: 3.5rem 0 0 0;
  font-family: "Poppins", sans-serif;
  font-size: 0.938rem;
  background: linear-gradient(90deg, #183da4 0%, #08174a 50%);
  color: #fff;
}

h1,
h2,
h3,
h4 {
  color: #fff;
  font-weight: 600;
}

ul {
  list-style: none;
}

a {
  text-decoration: none;
}

img {
  max-width: 100%;
  height: auto;
}

button,
input {
  border: none;
  outline: none;
}

button {
  cursor: pointer;
  font-family: "Poppins", sans-serif;
  font-size: 0.938rem;
}

/*reutilisabes*/

.section {
  padding: 4.5rem 0 2rem;
}

.sectiontitle {
  font-size: 2.25rem !important;
  margin-bottom: 2rem;
  text-align: center;
}

.container {
  max-width: 968px;
  margin-left: 1.5rem;
  margin-right: 1.5rem;
}

.grid {
  display: grid;
}

.main {
  overflow: hidden;
}

/*header*/

.header {
  width: 100%;
  background: linear-gradient(90deg, #183da4 0%, #08174a 50%);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
}

.nav {
  height: 3.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.navL {
  display: flex;
  align-items: center;
  column-gap: 0.5rem;
  font-weight: 500;
}

/*Tamaño logo itsys*/

.navL-img {
  width: 3.25rem;
}

.navLink,
.navL,
.navToggle,
.navclose {
  color: #fff;
}

.navToggle {
  font-size: 1.25rem;
  cursor: pointer;
}

@media (max-width: 767px) {
  .navM {
    position: fixed;
    width: 100%;
    background: #000c32;
    top: -150%;
    left: 0;
    padding: 3.5rem 0;
    transition: 0.4s;
    z-index: 100;
    border-radius: 0 0 1.5rem 1.5rem;
  }
}

.navclose {
  font-size: 1.8rem;
  position: absolute;
  top: 0.5rem;
  right: 0.7rem;
  cursor: pointer;
}

.navList {
  display: flex;
  flex-direction: column;
  align-items: center;
  row-gap: 1.5rem;
}

.navLink {
  text-transform: uppercase;
  font-weight: 900;
  transition: 0.4s;
}

.navLink:hover {
  color: #fff;
}

/* Show menu */

.show-menu {
  top: 0;
}

/* Change background header */

.scroll-header {
  background: #000c32;
}

/* Active link */

.active-link {
  position: relative;
}

.active-link::before {
  content: "";
  position: absolute;
  bottom: -0.75rem;
  left: 45%;
  width: 5px;
  height: 5px;
  background-color: #fff;
  border-radius: 50%;
}

/*HOME*/

.homecont {
  row-gap: 1rem;
}

.homegroup {
  display: grid;
  position: relative;
  padding-top: 2rem;
}

.homeimg {
  height: 250px;
  width: 100%;
  justify-self: center;
}

.hometitle {
  font-size: 4rem;
  font-weight: 900;
  line-height: 109%;
  margin-bottom: 1rem;
}

.homedes {
  margin-bottom: 1rem;
}

.homebut {
  display: flex;
}

.homebut a {
  margin-left: 10px;
}

.swiper-pagination {
  position: initial;
  margin-top: 1rem;
}

.swiper-pagination-bullet {
  width: 5px;
  height: 5px;
  background-color: #fff;
  opacity: 1;
}

.swiper-pagination-horizontal.swiper-pagination-bullets
  .swiper-pagination-bullet {
  margin: 0 0.5rem;
}

.swiper-pagination-bullet-active {
  width: 1.5rem;
  height: 5px;
  border-radius: 0.5rem;
}

/*BUTTONS*/

.button {
    display: inline-block;
    background-color: #3678ff;
    color: #fff;
    padding: 1rem 1.75rem;
    border-radius: .5rem;
    font-weight: 500;
    transition: .3s;
}

.button:hover {
    background-color: #0557fc;
}


.buttonicon {
    font-size: 1.25rem;
}


/*CATEGORIA*/

.categorycontainer {
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem 2rem;
}

.categorydata {
    text-align: center;
}

.categoryimg {
    width: 120px;
    margin-bottom: .75rem;
    transition: 3s;
}

.categorytitle {
    margin-bottom: .25rem;
}

.categorydata:hover .categoryimg {
    transform: translateY(-.5rem);
}


/*ABOUT*/

.aboutcontainer {
    row-gap: 2rem;
}

.aboutdata {
    text-align: center;
}

.aboutdescription{
    margin-bottom: 2rem;
}

/* Marcas imagen*/

.aboutimg {
    width: 1900px;
    justify-self: center;
}

/*PRODUCTOS*/

.productcontainer {
    *grid-template-columns: repeat(2, 1fr);
    *gap: 1.5rem;
    *padding-top: 1rem;
}

.productcontent{
    position: relative;
    background: #000c32;
    border-radius: 1rem;
    padding: 1.5rem 0 1rem 0;
    text-align: center;
    overflow: hidden;
}

.productimg {
    width: 200px;
    transition: .3s;
}

.productsubtitle,
.productprice {
    display: block;
}

.productsubtitle {
    font-size: .75rem;
    margin-bottom: .5rem;
}

.producttitle,
.productprice {
    color: #ffffff;
    font-weight: 500;
    font-size: .938rem;
}


.productbutton {
    display: inline-flex;
    padding: .5rem;
    border-radius: .25rem .25rem .75rem .25rem;
    position: absolute;
    right: -3rem;
    bottom: 0;
}

/* color carrito*/

.producticon {
    font-size: 1.25rem;
    color: #fff;
}

.productcontent:hover .productimg {
    transform: translateY(-.5rem);
}

.productcontent:hover .productbutton {
    right: 0;
}


   /*Productos*/

.discountcontainer {
    background: #000c32;
    border-radius: 1rem;
    padding: 2.5rem 0 1.5rem;
    row-gap: .75rem;
}

.discountdata {
    text-align: center;
}

.discounttitle {
    font-size: 1.25rem;
    margin-bottom: 2rem;
}

.discount img {
    width: 200px;
    justify-self: center;
}

/*CERTIFICACIONES*/

.newcontainer {
    padding-top: 1rem;
}

.new img {
    width: 280px;
    margin-bottom: .5rem;
    transition: .3s;
}

.newcontent {
    position: relative;
    background: #000c32;
    width: 242px;
    padding: 2rem 0 1.5rem 0;
    border-radius: .75rem;
    text-align: center;
    overflow: hidden;
}

.newtag {
    position: absolute;
    top: 8%;
    left: 8%;
    background-color: #3678ff;
    color: #fff;
    font-size: .813rem;
    padding: .25rem .5rem;
    border-radius: .25rem;
}

.newtitle {
    font-size: .938rem;
    font-weight: 500;
}

.newsubtitle {
    display: block;
    font-size: .813rem;
    margin-bottom: .5rem;
}

.newprices {
    display: inline-flex;
    align-items: center;
    margin-bottom: .5rem;
}

.newprice {
    font-weight: 500;
    color: #fff;
}

.newdiscount {
    color: #3678ff;
    font-size: .75rem;
    text-decoration: line-through;
    font-weight: 500;
}

.newbutton {
    display: inline-flex;
    padding: .5rem;
    border-radius: .25rem .25rem .75rem .25rem;
    position: absolute;
    bottom: 0;
    right: -3rem;
}

.newicon {
    font-size: 1.25rem;
}

.newcontent:hover .newimg {
    transform: translateY(-.5rem);
}

.newcontent:hover .newbutton {
    right: 0;
}


/*NOTICIAS*/

.newsld {
    text-align: center;
    margin-bottom: 1.5rem;
}

.newslf {
    background: #3678ff;
    padding: 1rem;
    display: flex;
    justify-content: space-between;
    border-radius: .75rem;
}


.newslin {
    width: 70%;
    padding: 0 .5rem;
    background: none;
    color: #fff;
}

.button2 {
    display: inline-block;
    background: #0557fc;
    color: #fff;
    padding: 1rem 1.75rem;
    border-radius: 0.5rem;
    font-weight: 500;
    transition: .3s;
}

.newslin::placeholder {
    color: #fff;
}

/*FOOTER*/

.footer {
    position: relative;
    overflow: hidden;
}

.footercontainer {
    row-gap: 2rem;
}

.footerL {
    display: flex;
    align-items: center;
    column-gap: .5rem;
    margin-bottom: 1rem;
    font-weight: 500;
    color: #fff;
}

.footerL-img {
    width: 20px;
}

.footerdescription {
    margin-bottom: 2.5rem;
}

.footersocial {
    display: flex;
    column-gap: .75rem;
}

.footersocial-link {
    display: inline-flex;
    background: #000c32;
    padding: .25rem;
    border-radius: .25rem;
    color: #fff;
    font-size: 1rem;
}

.footersocial-link:hover {
    background: #0557fc;
}

.footertitle {
    font-size: 1rem;
    margin-bottom: 1rem;
}

.footerlinks {
    display: grid;
    row-gap: .35rem;
}

.footerlink {
    font-size: .813rem;
    color: #fff;
    transition: .3s;
}

.footerlink:hover {
    color: #fff;
}

.footercopy {
    display: block;
    text-align: center;
    font-size: .75rem;
    margin-top: 4.5rem;
}

/*scroll up */

.scrollup{
  position: fixed;
  background: #000C32;
  right: 1rem;
  bottom: -20%;
  display: inline-flex;
  padding: .3rem;
  border-radius: .25rem;
  z-index:10;
  opacity: .8;
  transition: .4s;
}

.scrollupicon{
  font-size: 1.25rem;
  color: #fff;
}

.scrollup:hover{
  background: #000C32;
  opacity: 1;
}

/* Show Scroll Up*/

.show-scroll{
  bottom: 3rem;
}

/*scroll bar*/

::-webkit-scrollbar {
    width: 0.6rem;
    background: #413e3e;
}
::-webkit-scrollbar-thumb {
    background: #272525;
    border-radius: .5rem;
}

/*RESPONSIVE */


@media (max-width: 320px) {
    .container {
        margin-left: 1rem;
        margin-right: 1rem;
    }

    .homeimg {
        height: 200px;
    }
    .homebut {
        flex-direction: column;
        width: max-content;
        row-gap: 1rem;
    }
    .categorycontainer, 
    .productcontainer {
        grid-template-columns: .8fr;
        justify-content: center;
    }
    
}


@media (min-width: 576px) {
    .aboutcontainer {
        grid-template-columns: .8fr;
        justify-content: center;
    }

    .newslc{
        display: grid;
        grid-template-columns: .7fr;
        justify-content: center;
    }
    .newsld {
        padding: 0 3rem;
    }

}

@media (min-width: 767px) {
    body {
        margin: 0;
    }
    .section {
        padding: 7rem 0 2rem;
    }
    .nav {
        height: calc(3.5rem + 1.5rem);
    }
    .navclose, 
    .navToggle {
        display: none;
    }
    .navList {
        flex-direction: row;
        column-gap: 3rem;
    }
    .navLink {
        text-transform: initial;
        font-weight: initial;
    }
    .homecont {
        padding: 8rem 0 2rem;
        grid-template-columns: repeat(2, 1fr);
        gap: 4rem;
    }
    .homeimg {
        height: 300px;
    }

    .swiper-pagination {
        margin-top: 2rem;
    }

    .categorycontainer {
        grid-template-columns: repeat(3, 200px);
        justify-content: center;
    }
    .aboutcontainer {
        grid-template-columns: repeat(2, 1fr);
        align-items: center;
    }
    .abouttitle,
    .aboutdata {
        text-align: initial;

    }
    .aboutimg {
        width: 250px;
    }
    .productcontainer {
        grid-template-columns: repeat(3,200px);
        justify-content: center;
        gap: 2rem;
    }

    .discountcontainer {
        grid-template-columns: repeat(2, max-content);
        justify-content: center;
        align-items: center;
        column-gap: 3rem;
        padding: 3rem 0;
        border-radius: 3rem;
    }

    .discountimg {
        width: 150px;
        order: -1;
    }

    .discountdata {
        padding-right: 6rem;
    }

    .newslc {
        grid-template-columns: .5fr;
    }

    .footercontainer {
        grid-template-columns: repeat(4, 1fr);
        justify-items: center;
        column-gap: 1rem;
    }

    
}

@media (min-width: 992px) {

    .container {
        margin-left: auto;
        margin-right: auto;
    }

    .sectiontitle {
        font-size: 1.5rem;
        margin-bottom: 3rem;
    }

    .homecont {
        padding-top: 9rem;
        gap: 3rem;
    }
    .homegroup {
        padding-top: 0;
    }
    .homeimg {
        height: 400px;
        transform: translateY(-3rem);
    }
    .homeindicator {
        top: initial;
        right: initial;
        bottom: 15%;
        left: 45%;
    }
    .homeindicator::after {
        top: 0;
        height: 75px;
    }

    .homedetails-img {
        bottom: 0;
        right: 58%;

    }

    .hometitle {
        margin-bottom: 1.5rem;
    }
    .homedes {
        margin-bottom: 2.5rem;
        padding-right: 2rem;
    }
    .categorycontainer {
        column-gap: 8rem;
    }

    .categoryimg {
        width: 200px;
    }
    .aboutcontainer {
        column-gap: 7rem;
    }
    .aboutimg {
        width: 350px;
    }
    .aboutdescription {
        padding-right: 2rem;
    }
    .productcontainer {
        gap: 3.5rem;
    }
    .productcontent {
        border-radius: 1.5rem;
    }
    .productimg {
        width: 110px;

    }

    .producttitle {
        font-size: 1rem;
    }
    .discountcontainer {
        column-gap: 7rem;
    }

    .newcontent {
        width: 310px;
        border-radius: 1rem;
        padding: 2rem 0;
    }

    .newimg {
        width: 150px;
    }
    .newimg,
    .newsubtitle {
        margin-bottom: 1rem;
    }

    .newtitle {
        font-size: 1rem;
    }

    .footercopy {
        margin-top: 6rem;
    }

}

@media (min-width: 1200px) {

    .homeimg {
        height: 420px;   
    }

    .swiper-pagination {
        margin-top: 2.5rem;
    }

}



.testimonial-content {
    display: flex;
    justify-content: space-between;
    margin-top: 50px;
}

.testimonial-1 {
    flex-basis: calc(50% - 20px);
    padding: 50px;
    text-align: left;
    background-color: #000C32;
    border-top: 5px solid #1a54a5c7;
    justify-content: center;
}


.testimonial {
    padding: 100px 0;
    text-align: center;
}

.testimonial-content {
    display: flex;
    justify-content: space-between;
    margin-top: 50px;
}

.testimonial-1 img {
    width: 600px;
}