:root {
    /* color palette */
    --primaryColor: #00FFDF;
    --primaryVariant: #00DACC;
    --secondaryColor: #D4F11F;
    --secondaryVariant: #B7CF2D;
    --green: #1FE561;
    --greyText: #5A5357;

    /* grey scale */
    --dark: #1A1617;
    --darkVariant: #332F30;
    --greyDark: #4C494A;
    --greyDarkVariant: #666364;
    --grey: #999797;
    --greyMedium: #BDBDBD;
    --greyLight: #E0E0E0;
    --greyUltraLight:#EEEEEE;
    --Light: #F5F5F5;
    --white: #FFFFFF;

    /* font specifications */
    --fontPrinc: 'Poppins', sans-serif;
    --fontSecun: 'Assistant', sans-serif;
}

html {
    box-sizing: border-box;
    font-size: 62.5%; /* con esta línea hacemos que 1rem = 10px*/
}

*, *:before, *:after {
    box-sizing: inherit;
}

body {
    padding: 0;
    margin: 0;
    font-family: var(--fontSecun);
    color: var(--dark);
    font-size: 1.6rem;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--fontPrinc);
    color: var(--dark);
    margin: 0;
}

h1 {
    font-size: 13rem;
    font-weight: 800;
}


h2 {
    font-size: 3.4rem;
    font-weight: 600;
}
@media screen and (max-width: 1024px) {
    h1 {
        font-size: 20rem;
    }
    h2 {
        font-size: 5rem;
    }
}
@media screen and (max-width: 768px) {
    h1 {
        font-size: 15rem;
    }
    h2 {
        font-size: 4rem;
    }
}
@media screen and (max-width: 540px) {
    h1 {
        font-size: 9rem;
    }
    h2 {
        font-size: 2.5rem;
    }
}
@media screen and (max-width: 360px) {
    h1 {
        font-size: 7rem;
    }
    h2 {
        font-size: 2rem;
    }
}

ul, li {
    padding: 0;
    list-style-type: none;
}

a {
    text-decoration: none;
}

p, figure {
    margin: 0;
}

img {
    max-width: 100%;
}
p, span {
    font-family: var(--fontSecun);
}

/* ============================ Utilities ============================ */
.container { /*aplicar despues del contenedor con bg*/
    margin: 0 auto;
    width: min(93%, 136.6rem);
    /* outline: 1px solid red; */
}
@media screen and (max-width: 411px) {
    .container {
        width: min(90%, 136.6rem);
    }
}

.header {
    background: linear-gradient(170deg, #F8F8F8 0%, #E9E9E9 34%, #B7B7B7 100%);

}
.mayor {
    text-transform: uppercase;
}

.italic {
    font-style: italic;
}

.center {
    display: block;
    margin: 0 auto;
    text-align: center;
}

.anchor-underline:hover {
    text-decoration:underline;
}
/*----------------------------------------------------------------------------
** Header
**---------------------------------------------------------------------------*/
.header-bg {
    width: 100%;
}

/* ======== navigation bar ======== */
.bar {
    position: fixed;
    top: 0;
    width: 100%;
    background-color: var(--white);
    z-index: 100;
}

.small,
.large,
.nav-icon {
    display: none;
}

.nav-bar,
.navigation-list,
.bar-footer__nav,
.footer-navigation__list {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.nav-bar {
    height: 8rem;
    padding: 1.5rem 0;
}
.navigation__item {
    padding-left: 3.6rem;
}
.navigation__anchor {
    color: var(--dark);
    letter-spacing: .045rem;
    font: 600 1.8rem/0 var(--fontPrinc);
    padding-bottom: .5rem;
}
.navigation__anchor:hover {
    color: var(--primaryVariant);
    border-bottom: .2rem solid var(--primaryVariant);
}
.navigation__item:first-child {
    padding-left: 0;
}

@media screen and (max-width: 1024px) {
    .small,
    .extra,
    .nav-icon {
        display: none;
    }
    .large {
        display: block;
    }
    .nav-bar {
        display: flex;
        flex-direction: column;
        height: fit-content;
    }
}
@media screen and (max-width: 768px) {
    .large,
    .extra,
    .navigation-list {
        display: none;
    }
    .nav-icon,
    .small {
        display: block;
    }
    .nav-bar {
        flex-direction: row;
    }
}

/* ======== banner ======== */
.banner {
    padding-top: 20rem;
    display: block;
    text-align: right;
    color: var(--dark);
}
@media screen and (max-width: 1024px) {
    .banner {
        padding-top: 20rem;
    }
}
@media screen and (max-width: 768px) {
    .banner {
        padding-top: 14rem;
    }
}
@media screen and (max-width: 540px) {
    .banner {
        padding-top: 11rem;
    }
}
@media screen and (max-width: 411px) {
    .banner {
        padding-top: 12rem;
    }
}
@media screen and (max-width: 360px) {
    .banner {
        padding-top: 12rem;
    }
}
.head-title {
    padding-bottom: 6rem;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}
@media screen and (max-width: 768px) {
    .head-title {
        padding-bottom: 4.5rem;
    }
}
@media screen and (max-width: 360px) {
    .head-title {
        padding-bottom: 4rem;
    }
}
.head-title__text {
    font-size: 2.5rem;
    font-weight: 700;
    padding-left: 2.5rem;
}

.title {
    padding-right: 13rem;
    text-shadow: 10px 8px var(--greyMedium);
    line-height: .65;
}
.relative {
    position: relative;
    z-index: 95;
}
.title-sub {
    font-family: var(--fontPrinc);
    padding-right: 2rem;
    font-size: 10rem;
    font-weight: 600;
    text-shadow: 8px 7px var(--greyMedium);
}
.subhead {
    text-shadow: 5px 4px var(--greyMedium);
    padding-right: 15rem;
    padding-top: 5rem;
}
.header-img {
    position: relative;
    display: block;
    text-align: left;
}
.header-img__imagen {
    position: absolute;
    top: -35rem;
    z-index: 90;
}
@media screen and (max-width: 1024px) {
    .title-sub {
        font-size: 15rem;
    }
    .subhead {
        position: relative;
        top: 10rem;
        text-align: center;
        padding: 0;
    }
    .header-img {
        top:42rem;
        text-align:justify;
        width: 97%;
    }
}
@media screen and (max-width: 768px) {
    .title-sub {
        font-size: 12rem;
    }
    .subhead {
        top: 10rem;
    }
    .header-img {
        top: 45rem;
    }
}
@media screen and (max-width: 540px) {
    .title-sub {
        font-size: 8rem;
    }
    .subhead {
        top: 5.8rem;
    }
    .header-img {
        top:42rem;
    }
}
@media screen and (max-width: 411px) {
    .title-sub {
        font-size: 7rem;
        padding: 0;
    }
    .subhead {
        top: 6rem;

    }
}
@media screen and (max-width: 360px) {
    .title {
        padding-right: 0;
        text-align: left;
        font-size: 8rem;
    }
    .title-sub {
        padding-right: 2rem;
        font-size: 6rem;
    }
    .subhead {
        top: 5rem;
    }
}
@media screen and (max-width: 281px) {
    .title {
        font-size: 6.5rem;
        text-shadow: 5px 4px var(--greyMedium);
    }
    .title-sub {
        padding-right: 0;
        font-size: 5.25rem;
        text-shadow: 4px 3.5px var(--greyMedium);
    }
    .subhead {
        top: 3rem;
        text-shadow: 2.5px 2px var(--greyMedium);
    }
}
.shapes {
    position: relative;
}
.cyan-rectangle {
    position: absolute;
    top: -41rem;
    background: linear-gradient(270deg, var(--primaryColor) 0%, var(--primaryVariant) 100%);
    height: 7.5rem;
    width: 80%;
    margin-left: 3.5rem;
}
.cyan-line {
    position: absolute;
    top: -38rem;
    background: var(--primaryVariant);
    width: 100%;
    height: 2.5rem;
}
.yellow-rectangle {
    position: absolute;
    top:-30rem;
    background: linear-gradient(270deg, var(--secondaryVariant) 0%, var(--secondaryColor) 100%);
    height: 13rem;
    width: 93.5%;
}
.yellow-line {
    position: absolute;
    top:-24rem;
    background: var(--secondaryColor);
    width: 100%;
    height: 3.5rem;
}
.black-rectangle {
    position: absolute;
    top:-75rem;
    left: 0;
    background: var(--dark);
    height: 68rem;
    width: 1.25%;
}
@media screen and (max-width: 1024px) {
    .cyan-rectangle {
        top: -39rem;
        height: 12rem;
        width: 65%;
    }
    .cyan-line {
        top: -34rem;
        height: 3.5rem;
    }
    .yellow-rectangle {
        top: -22rem;
        height: 17rem;
        width: 90%;
    }
    .yellow-line {
        top:-14rem;
    }
    .black-rectangle {
        width: 2%;
    }
}
@media screen and (max-width: 768px) {
    .cyan-rectangle {
        top: -37rem;
    }
    .cyan-line {
        top: -34rem;
    }
    .yellow-rectangle {
        top: -20rem;
    }
    .yellow-line {
        top:-12rem;
    }
    .black-rectangle {
        display: none;
    }
}
@media screen and (max-width: 540px) {
    .cyan-rectangle {
        top: -34rem;
        height: 7.25rem;
        width: 70%;
    }
    .cyan-line {
        top: -31rem;
        height: 2.7rem;
    }
    .yellow-rectangle {
        top: -23rem;
        height: 11.5rem;
        width: 90%;
    }
    .yellow-line {
        top:-18rem;
    }
}
@media screen and (max-width: 411px) {
    .cyan-rectangle {
        top: -33rem;
        width: 67%;
    }
    .cyan-line {
        top: -30rem;
        height: 2.5rem;
    }
    .yellow-rectangle {
        top: -23rem;
    }
    .yellow-line {
        height: 3rem;
    }
}
@media screen and (max-width: 360px) {
    .cyan-rectangle {
        top: -32rem;
        width: 60%;
        height: 6rem;
    }
    .cyan-line {
        top: -30rem;
        height: 2rem;
    }
    .yellow-rectangle {
        top: -23rem;
        height: 10rem;
        width: 90%;
    }
    .yellow-line {
        top:-19rem;
        height: 2.5rem;
    }
}
@media screen and (max-width: 281px) {
    .cyan-rectangle {
        top: -33rem;
        height: 5.7rem;
    }
    .cyan-line {
        top: -31rem;
        height: 1.85rem;
    }
    .yellow-rectangle {
        top: -25rem;
        height: 7.5rem;
        width: 90%;
    }
    .yellow-line {
        top:-22rem;
        height: 2rem;
    }
}
.banner-text {
    padding-top: 23rem;
    text-align: left;
}

@media screen and (max-width: 1024px) {
    .banner-info {
        position: relative;
        top:43rem;
    }
}
@media screen and (max-width: 768px) {
    .banner-info {
        top:32rem;
    }
}
@media screen and (max-width: 540px) {
    .banner-info {
        top:17rem;
    }
}
@media screen and (max-width: 411px) {
    .banner-info {
        top: 9rem;
    }
}
@media screen and (max-width: 360px) {
    .banner-info {
        top: 7rem;
    }
}
@media screen and (max-width: 281px) {
    .banner-info {
        top: 3rem;
    }
}
.banner-logo {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}
.banner-logo__icon {
    padding-left: 2.5rem;
}
.banner-text__item {
    font-weight: bold;
    font-size: 2rem;
    letter-spacing: .05rem;
    padding: 0 1.5rem;
}
.banner-text__item:first-of-type {
    padding-right: 1.5rem;
    padding-left: 0;
}
.banner-text__item:last-of-type {
    padding-left: 1.5rem;
    padding-right: 0;
}
@media screen and (max-width: 1024px) {
    .banner-text__item {
        font-size: 2.5rem;
        letter-spacing: 0;
        padding: 1rem;
    }
    .banner-text__item:first-of-type {
        padding-right: 1rem;
    }
    .banner-text__item:last-of-type {
        padding-left: 1rem;
    }
    .banner-logo__img {
        width: 25%;
    }
}
@media screen and (max-width: 540px) {
    .banner-text__item {
        font-size: 2rem;
    }
    .banner-logo__img {
        width: 33%;
    }
}
@media screen and (max-width: 411px) {
    .banner-text__item {
        font-size: 1.85rem;
        padding: 0 .6rem;
    }
    .banner-text__item:first-of-type {
        padding-right: .6rem;
    }
    .banner-text__item:last-of-type {
        padding-left: .6rem;
    }
    .banner-logo__img {
        width: 35%;
    }
}
@media screen and (max-width: 360px) {
    .banner-text__item {
        padding: 0 .5rem;
    }
    .banner-text__item:first-of-type {
        padding-right: .5rem;
    }
    .banner-text__item:last-of-type {
        padding-left: .5rem;
    }
    .banner-text__icon {
        width: min(5%);
    }
}
@media screen and (max-width: 281px) {
    .banner-text__item {
        font-size: 1.4rem;
        padding: 0 .5rem;
    }
    .banner-text__item:first-of-type {
        padding-right: .5rem;
    }
    .banner-text__item:last-of-type {
        padding-left: .5rem;
    }
    .banner-logo__img {
        width: 45%;
    }
}
.banner-iso {
    position: absolute;
    top: 95rem;
    right: 20rem;
}
@media screen and (max-width: 1024px) {
    .banner-iso {
        position: absolute;
        top: 155rem;
        right: 8rem;
        width: 20%;
    }
}
@media screen and (max-width: 768px) {
    .banner-iso {
        top: 115rem;
        right: 5rem;
        width: 25%;
    }
}
@media screen and (max-width: 540px) {
    .banner-iso {
        top: 90rem;
        width: 23%;
    }
}
@media screen and (max-width: 411px) {
    .banner-iso {
        top: 76rem;
    }
}
@media screen and (max-width: 360px) {
    .banner-iso {
        top: 73rem;
    }
}
@media screen and (max-width: 281px) {
    .banner-iso {
        top: 64rem;
    }
}

.text-bg__img {
    position: absolute;
    top: 115rem;
    opacity: .4;
    fill-opacity: 90;
}

.header-info__img {
    position: relative;
    padding-top: 20rem;
    z-index: 80;
    line-height: 0;
}

.text-infor {
    position: absolute;
    top: 163rem;
    right: 3.5%;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    max-width: 40%;
    z-index: 90;
}
.text-infor__heading {
    font-size: 3.25rem;
    font-weight: bold;
    letter-spacing: .1rem;
    line-height: 1.25;
    text-align: right;
}
.text-infor__descrip {
    padding: 2.5rem 0;
    font-size: 2.2rem;
    font-weight: bold;
    line-height: 1.5;
    text-align: right;
    text-shadow: 1px 1.5px 1px var(--Light);
}
.btn-princ {
    padding: 1.5rem 6rem;
    background-color: var(--secondaryColor);
    height: 6rem;
    width: 46rem;
}
.btn-princ:hover {
    background-color: var(--primaryColor);
}
.btn-princ__link {
    font-size: 2.5rem;
    letter-spacing: .075rem;
    font-weight: bold;
    color: var(--dark);
}

@media screen and (max-width: 1024px) {
    .header-infor {
        position: relative;
    }
    .text-bg__img {
        position: absolute;
        top: 70rem;
    }
    .header-info__img {
        position: relative;
        width: 70%;
        padding-top: 60rem;
    }
    .text-infor {
        position: absolute;
        top: 95rem;
        max-width: 47%;
    }
    .text-infor__heading {
        font-size: 3rem;
    }
    .text-infor__descrip {
        font-size: 2rem;
    }
    .btn-princ {
        padding: 1.5rem 3rem;
        width: 40rem;
        text-align: center;
    }
    .btn-princ__link {
        font-size: 2.25rem;
    }
}
@media screen and (max-width: 768px) {
    .text-bg__img {
        top: 50rem;
    }
    .header-info__img {
        position: relative;
        padding-top: 45rem;
        right: 5.5rem;
        width: 67%;
    }
    .text-infor {
        top: 70rem;
    }
    .text-infor__heading {
        font-size: 2.25rem;
    }
    .text-infor__descrip {
        font-size: 1.7rem;
        line-height: 1.25;
        padding-bottom: 1rem;
    }
    .btn-princ {
        padding: 1.5rem 2rem;
        width: 30rem;
        height: 4rem;
    }
    .btn-princ__link {
        font-size: 1.8rem;
    }
}
@media screen and (max-width: 540px) {
    .text-bg__img {
        top: 30rem;
    }
    .header-info__img {
        padding-top: 27rem;
    }
    .text-infor {
        top: 44rem;
        max-width: 55%;
    }
    .text-infor__heading {
        font-size: 1.85rem;
    }
    .text-infor__descrip {
        padding: 1rem 0;
        font-size: 1.3rem;
        line-height: 1.25;
    }
    .btn-princ {
        padding: 1rem 0;
        width: 25rem;
        height: 3.5rem;
    }
    .btn-princ__link {
        font-size: 1.5rem;
    }
}
@media screen and (max-width: 411px) {
    .text-bg__img {
        top: 18rem;
    }
    .header-info__img {
        padding-top: 18rem;
        position: relative;
        right: 8rem;
    }
    .text-infor {
        top: 25rem;
        max-width: 55%;
    }
    .text-infor__heading {
        font-size: 1.25rem;
        letter-spacing: 0;
    }
    .text-infor__descrip {
        padding-top: 1rem;
        padding-bottom: 0.85rem;
        font-size: 1.2rem;
        line-height: 1;
        text-shadow: 1px .5px var(--Light);
    }
    .btn-princ {
        padding: .5rem 0;
        width: 20rem;
        height: 3rem;
    }
    .btn-princ__link {
        font-size: 1.15rem;
    }
}
@media screen and (max-width: 360px) {
    .text-infor {
        top: 24rem;
    }
}
@media screen and (max-width: 281px) {
    .text-bg__img {
        top: 10rem;
    }
    .header-info__img {
        padding-top: 9rem;
        right: 11rem;
    }
    .text-infor {
        top: 11rem;
        max-width: 70%;
    }
}

/*----------------------------------------------------------------------------
** Description Section
**---------------------------------------------------------------------------*/
.section-margin {
   padding: 10rem 0 12.5rem;
}
.section-desc__grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    grid-gap: 3rem;
    align-items: center;
}
.info-desc__title {
    font-size: 4rem;
    letter-spacing: 1px;
    font-weight: bold;
    line-height: 1;
    padding-bottom: 4rem;
}
.info-desc__subhead {
    color: var(--darkVariant);
    font-size: 2.85rem;
    font-weight: 600;
    line-height: 1;
    padding-bottom: 3rem;
}
.info-desc__parag {
    font-size: 1.85rem;
    font-weight: 400;
    line-height: 1.5;
    color: var(--greyText);
}
@media screen and (max-width: 768px) {
    .section-margin {
        padding: 15rem 0 12.5rem;
    }
    .section-desc__grid {
        grid-template-columns: 1fr 1fr;
        grid-gap: 2rem;
        text-align: right
    }
    .info-desc__title {
        padding-bottom: 1.5rem;
        font-size: 2.5rem;
        letter-spacing: 0;
        line-height: 1.25;
        text-align: right;
    }
    .info-desc__subhead {
        font-size: 2rem;
        line-height: 1.5;
        padding-bottom: 1rem;
    }
}
@media screen and (max-width: 540px) {
    .section-margin {
        padding: 10rem 2rem 8rem;
    }
    .section-desc__grid {
        grid-template-columns: 1fr;
        grid-row: 2;
        grid-gap: 2rem;
        text-align: left
    }
    .info-desc__title {
        padding-bottom: 1.5rem;
        font-size: 2.25rem;
        text-align: left;
    }
    .info-desc__subhead {
        font-size: 1.85rem;
        line-height: 1.5;
        padding-bottom: 1rem;
    }
}
@media screen and (max-width: 411px) {
    .section-margin {
        padding: 10rem 0 8rem;
    }
    .section-desc__grid {
        grid-template-columns: 1fr;
        grid-row: 2;
        grid-gap: 2rem;
        text-align: left
    }
    .info-desc__title {
        padding-bottom: 1.5rem;
        font-size: 2.25rem;
        text-align: left;
    }
    .info-desc__subhead {
        font-size: 1.85rem;
        line-height: 1.5;
        padding-bottom: 1rem;
    }
}
/*----------------------------------------------------------------------------
** Highlight Section
**---------------------------------------------------------------------------*/
.section-highlights {
    background-color: var(--greyLight);
}
.section__title {
    font-size: 4rem;
    padding-bottom: 4rem;
}
.section__desc {
    font-size: 2rem;
    line-height: 1.5;
    color: var(--greyText);
    padding-bottom: 8rem;
}

.hight-cards {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 2rem;
    width: 85%;
    margin: 0 auto;
}
@media screen and (max-width: 768px) {
    .section__title {
        font-size: 3.5rem;
    }
    .section__desc {
        line-height: 1.8;
    }
    .hight-cards {
        display: grid;
        grid-template-rows: 3, 1fr;
        grid-template-columns: 1fr;
        grid-gap: 6rem;
        width: 80%;
        margin: 0 auto;
    }
}
@media screen and (max-width: 540px) {
    .section__title {
        padding-left: 1.5rem;
        font-size: 3rem;
    }
    .section__desc {
        font-size: 2rem;
        line-height: 1.5;
        width: 95%;
        padding: 0 0 8rem;
    }
}
.card {
    margin: 1rem;
}
.card__img {
    padding-bottom: 2rem;
}
.card__title {
    font-size: 2.5rem;
}
.card__desc {
    padding-top: 1.5rem;
    line-height: 1.5;
    font-size: 1.8rem;
}
.video-container {
    text-align: center;
}
.video {
    padding-top: 8rem;
    max-width: 80%;
}
@media screen and (max-width: 768px) {
    .card {
        max-width: 70%;
        text-align: center;
        margin: 0 auto;
    }
    .card__img {
        padding-bottom: 2.5rem;
    }
}
@media screen and (max-width: 540px) {
    .card {
        max-width: 95%;
    }
    .card__title {
        font-size: 2.3rem;
    }
}
/*----------------------------------------------------------------------------
** Specification section
**---------------------------------------------------------------------------*/
.sect-margin {
    padding: 10rem 0 0;
 }
.specification-list {
    margin: 0 8rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 5rem;
    row-gap: 2rem;
}

.specification-list__item {
    padding-top: 1rem;
    height: 5rem;
    font-size: 2rem;
    font-weight: 600;
    border-bottom: 1px solid var(--greyMedium);
    display: flex;
}

.specification-list__item:before {
    content: url(../img/icons/checkbox.png);
    padding-right: 1rem;
    align-self: stretch;
}


.list-item__icon {
    padding-right: 2rem;
    vertical-align: middle;
}
@media screen and (max-width: 1024px) {
    .specification-list {
        margin: 0;
    }
    .specification-list__item {
        font-size: 1.9rem;
    }
}
@media screen and (max-width: 768px) {
    .specification-list {
        column-gap: 3rem;
        grid-template-columns: 1fr;
        padding: 0 15%;
    }
}
@media screen and (max-width: 540px) {
    .specification-list {
        grid-template-columns: 1fr;
        padding: 0 1rem;
    }
    .list-item__icon {
        padding-right: 1rem;
    }
}
@media screen and (max-width: 411px) {
    .specification-list {
        row-gap: 2rem;
    }
    .specification-list__item {
        font-size: 1.7rem;
        height: 6.5rem;
    }
}
/* ======== Specifications images ======== */
.specification-rating {
    padding-top: 10rem;
    position: relative;
}
.info-rating {
    position: absolute;
    top: 15rem;
    left: 20rem;
    display: flex;
    flex-direction: column;
}
.rating-title {
    padding-bottom: 2rem;
    font-size: 2.5rem;
    font-weight: bold;
}
.rating-img {
    line-height: 0;
    position: relative;
}
.rating-img__1 {
    padding-bottom: 6rem;
    position: relative;
    z-index: 75;
    width: 85%;
    display: block;
    margin: 0 auto;
}
.rating-img__2 {
    position: absolute;
    top: 45rem;
    z-index: 70;
}
@media screen and (max-width: 1024px) {
    .info-rating {
        top: 10rem;
    }
    .rating-img__2 {
        top: 35rem;
    }
}
@media screen and (max-width: 768px) {
    .info-rating {
        top: 10rem;
        left: 10rem;
    }
    .rating-img__2 {
        top: 30rem;
    }
}
@media screen and (max-width: 540px) {
    .info-rating {
        top: 7rem;
        left: 5rem;
    }
    .rating-title {
        font-size: 2.25rem;
    }
    .rating-img__2 {
        top: 23rem;
    }
}

/*----------------------------------------------------------------------------
** buy section
**---------------------------------------------------------------------------*/
.section-buy {
    background-color: var(--greyUltraLight);
}
.grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 4rem;
    justify-items: center;
    align-items: center;
}
@media screen and (max-width: 768px) {
    .grid-2 {
        grid-template-columns: repeat(auto-fit, minmax(95%, 1fr));
        row-gap: 10rem;
    }
}
.column-left {
    width: 80%;
    /* outline: 1px solid red; */
}

.column-right {
    width: 65%;
    /* outline: 1px solid red; */
}
@media screen and (max-width: 768px) {
    .column-right {
        width: 100%;
    }
}

/* ======== column left ======== */
.col-head__title {
    font-size: 3rem;
}
.col-head__subtitle {
    padding: 1rem 0 2.5rem;
    font-size: 1.85rem;
    color: var(--darkVariant);
    font-weight: 500;
}
.row-subhead,
.col-shipping {
    display: flex;
    align-items: center;
}
@media screen and (max-width: 411px) {
    .row-subhead {
        display: block;
    }
    .col-subhead__price {
        padding-bottom: 1rem;
    }
}
.col-subhead__price {
    font-size: 2.5rem;
    padding-right: 6rem;
}
.col-shipping__text {
    font-size: 1.6rem;
    color: var(--greyDarkVariant);
    padding-left: 1rem;
}
.grid-size {
    padding-top: 4rem;
}
.size-text {
    font-size: 1.8rem;
    padding-bottom: 2rem;
}
.container-sizes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
    /* grid-template-columns: repeat(5, 1fr); */
    column-gap: 1rem;
    row-gap: 1rem;
    padding-bottom: 6rem;
}
.size__item {
    border: 1px solid var(--greyMedium);
    text-align: center;
    padding: .8rem 2rem;
    font-size: 2rem;
    color: var(--greyDark);
    cursor: pointer;
    font-weight: 600;
}
.size__item:hover {
    color: var(--Light);
    background-color: var(--dark);

}
.hide input[type=radio] {
    display: none;
}
.hide input[type=radio]:checked + .size__item {
    background-color: var(--secondaryColor);
    border: 1px solid transparent;
    font-size: 2rem;
    color: var(--dark);
}
.sizes-info {
    display: flex;
    justify-content: center;
}
.info-s {
    text-align: center;
    padding-right: 5rem;
    display: flex;
}
@media screen and (max-width: 411px) {
    .info-s {
        padding-bottom: 2rem;
        padding-right: 3rem;
    }
}
@media screen and (max-width: 375px) {
    .sizes-info {
        flex-wrap: wrap;
    }
    .info-s {
        padding-bottom: 2rem;
        padding-right: 3rem;
    }
}

.info-s:last-of-type {
    padding-right: 0;
}


.sizes-info__text {
    font-size: 1.6rem;
    color: var(--darkVariant);
    align-self: center;
}
.sizes-info__icon {
    padding-right: .5rem;
    align-self: center;
}

/* ======== column right ======== */
.col-right {
    font-size: 2.5rem;
    font-weight: 800;
    padding-bottom: 1px;
}
.row-rating {
    display: flex;
    justify-content: space-evenly;
    background-color: var(--green);
    padding: 3.6rem 5rem;
    margin-bottom: 1rem;
}
.rating__score {
    font-size: 7rem;
    font-weight: 800;
    padding-right: 1rem;
}
.reviews {
    align-self: center;
}
.rating__reviews {
    font-size: 2rem;
    font-weight: 600;
}
.rating__title {
    font-size: 2.15rem;
    font-family: var(--fontSecun);
    font-weight: 600;
    letter-spacing: 1px;
    padding-bottom: .5rem;
}
.info-bar {
    font-weight: 600;
    color: var(--greyDarkVariant);
    letter-spacing: .64px;
    line-height: 1.5;
}
@media screen and (max-width: 375px) {
    .info-bar {
        font-weight: 500;
        letter-spacing: 0;
    }
}
.progress-bar {
    display: flex;
}
.progress {
    width: 70%;
    background-color: var(--greyDarkVariant);
    height: .8rem;
    align-self: center;
    margin: 0 1rem;
}
.bar-green {
    height: .8rem;
    background-color: var(--green);
}
.bar-81 {
    width: 81%;
}
.bar-24 {
    width: 24%;
}
.bar-7 {
    width: 7%;
}
.bar-3 {
    width: 3%;
}
.bar-2 {
    width: 2%;
}

.pay-container {
    padding: 3rem 0 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.pay__img,
.pay__tex {
    display: block;
}
.pay__img {
    padding-right: 1rem;
    align-self: center;
}

.btns-container {
    display: flex;
    justify-content: center;
}
.btn-add,
.btn-fav {
    outline: none;
    border: none;
    cursor: pointer;
}
.btn-add {
    flex-basis: 2;
    width: 37rem;
    height: 6rem;
    background-color: var(--dark);
    color: var(--Light);
    font-weight: 600;
}
.btn-add:hover {
    color: var(--secondaryColor);
}

.btn-fav {
    margin-left: 1rem;
    padding: 0 1.5rem;
    flex-basis: 1;
    border: 2px solid var(--dark);
    justify-self: center;
}

.btn-fav:focus {
    border: 2px solid var(--secondaryColor);

}

/*----------------------------------------------------------------------------
** Call to action
**---------------------------------------------------------------------------*/
.call-to-action {
    background-color: var(--secondaryColor);
    padding: 8rem 4rem;
}
.info-call {
    display: flex;
    justify-content: center;
    align-items: center;
}
.title-action {
    width: 45%;
    padding-right: 15rem;
    font-weight: bold;
    letter-spacing: 1px;
}
.btn {
    padding: 2rem 3rem;
    background-color: var(--dark);
    width: 23rem;
    height: 6rem;
}
.btn__link {
    display: block;
    font-size: 2rem;
    font-weight: 600;
    color: var(--white);
    text-align: center;
}
.btn__link:hover {
    color: var(--secondaryColor);
}
@media screen and (max-width: 1024px) {
    .title-action {
        width: unset;
        padding-right: 3rem;
    }
    .btn {
        width: 40rem;
    }
}
@media screen and (max-width: 540px) {
    .call-to-action {
        padding: 4rem;
    }
    .info-call {
        flex-direction: column;
    }
    .title-action {
        width: unset;
        padding-right: 0;
        font-weight: bold;
        letter-spacing: 1px;
        padding-bottom: 2rem;
    }
    .btn {
        width: 100%;
    }
}

/*----------------------------------------------------------------------------
** Complete Look section
**---------------------------------------------------------------------------*/
.grid-products {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(37rem, 1fr));
    grid-row: auto;
    column-gap: 3rem;
    row-gap: 4rem;
}
@media screen and (max-width: 1280px) {
    .grid-products {
        grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr));
    }
}
@media screen and (max-width: 1024px) {
    .grid-products {
        grid-template-columns: repeat(auto-fit, minmax(27rem, 1fr));
    }
}
@media screen and (max-width: 280px) {
    .grid-products {
        grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
    }
}

.product-card {
    padding: 5%;
    background-image: url(../img/adidas-iso_white.png);
    background-repeat: no-repeat;
    background-position: bottom, center;
    box-shadow: 1px 2px 8px var(--grey);
    border-radius: 8px;
}
.product__btn {
    background-image: url(../img/icons/add.png);
    background-repeat: no-repeat;
    background-position: center, center;
    background-size: 2rem;
    padding: 3.25rem;
    background-color: var(--secondaryColor);
    border: 1px solid var(--secondaryColor);
    cursor: pointer;
}

.product__btn:active {
    background-color: var(--Light);
    border: 1px solid var(--darkVariant);
}
.product__title{
    padding-top: 1rem;
    font-size: 2rem;
}
.product-subtitle {
    padding: .5rem;
    color: var(--greyText);
}
.product__price {
    font-size: 2rem;
    padding-bottom: 2rem;
}
.product-inf {
    padding: 2rem 0 7rem;
    display: flex;
    justify-content: space-between;
}
@media screen and (max-width: 280px) {
    .product-inf {
        padding: 2rem 0 7rem;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
    }
    .product__btn {
        margin-top: 2rem;
        padding: 3rem;
        width: 100%;
    }
}

/*----------------------------------------------------------------------------
** footer
**---------------------------------------------------------------------------*/
.footer {
    padding: 4rem 6rem 4rem;
    background-color: var(--dark);
}

/* ======== footer navigation ======== */
.bar-footer__nav {
    padding: 1rem 0;
    border-bottom: 1px solid var(--darkVariant);
    justify-content: space-between;
}
.nav-bar__logo-footer {
    width: 30%;
}
.footer-navigation__item {
    padding-left: 4rem;
}

.footer-navigation__anchor {
    color: var(--Light);
    letter-spacing: 0;
    font: 500 1.7rem/0 var(--fontPrinc);
}
.footer-navigation__anchor:hover {
    color: var(--greyDarkVariant);
}
.footer-navigation__anchor:first-child {
    padding-left: 0;
}
.footer-navigation__anchor--img {
    opacity: .35;
}
@media screen and (max-width: 1024px) {
    .bar-footer__nav {
        padding: 0;
        margin: 0;
    }
    .footer-navigation__anchor {
        font-size: 1.35rem;
    }
}
@media screen and (max-width: 768px) {
    .bar-footer__nav {
        padding: 0;
        margin: 0;
    }
    .nav-bar__logo-footer {
        display: none;
    }
    .footer-navigation__item {
        padding-left: 2rem;
    }
    .footer-navigation__item:first-child {
        padding-left: 0;
    }
    .footer-navigation__anchor {
        font-size: 1.25rem;
    }
}
@media screen and (max-width: 540px) {
    .footer {
        padding: 4rem 1rem 4rem;
    }
    .bar-footer__nav {
        display: none;
    }
}
@media screen and (max-width: 411px) {
    .footer {
        padding: 4rem 0;
    }
}

/* ======== footer susbcribe ======== */
.footer-info {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    padding: 5rem 0 4rem;
}

.info__form {
    padding: 0 9rem 0 0;
}
.form__title {
    font-size: 1.85rem;
    letter-spacing: .6px;
    font-family: var(--fontPrinc);
    font-weight: 500;
}
.form__desc {
    padding: 1.5rem 0 3rem;
}
.form__desc,
.form__title {
    color: var(--Light);
}
.info-links__list {
    margin: 0;
    display: flex;
    align-items: center;
}
.list__item {
    padding-right: 1.55rem;
}
@media screen and (max-width: 768px) {
    .footer-info {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .info__form {
        padding: 0;
    }
    .info-links__list {
        padding-top: 4rem;
    }
}
@media screen and (max-width: 411px) {
    .footer-info {
        padding: 4rem 0;
    }
    .info__form {
        width: 100%;
    }
}

/* form */
.susb-form {
    display: flex;
}
.field-email {
    outline: none;
    border: 0;
    height: 5rem;
    width: 36rem;
    background-color: var(--greyDarkVariant);
    text-indent: 1.5rem;
    color: var(--Light);
}
.field-email::placeholder {
    color: var(--greyMedium);
}
.btn-submit {
    outline: none;
    border: 0;
    height: 5rem;
    width: 5.5rem;
    background-color: var(--secondaryColor);
    color: var(--dark);
    font-weight: bolder;
    font-size: 2.5rem;
    cursor: pointer;
}
@media screen and (max-width: 768px) {
    .susb-form {
        justify-content: center;
    }
}
@media screen and (max-width: 540px) {
    .susb-form {
        width: 100%;
    }
    .field-email {
        flex: 3 0 auto;
        font-size: 1.75rem;
    }
    .btn-submit {
        flex: 1 0 auto;
    }
}
@media screen and (max-width: 411px) {
    .susb-form {
       justify-content: flex-start;
    }
    .field-email {
        width: 28rem;
        font-size: 1.75rem;
        flex: 0;
    }
    .btn-submit {
        width: 5rem;
        flex: 1;
    }
}
@media screen and (max-width: 360px) {
    .footer__logo {
        padding: 0 1rem;
    }
    .field-email {
        width: 28rem;
        font-size: 1.75rem;
        flex: 0;
    }
}
@media screen and (max-width: 281px) {
    .field-email {
        width: 20rem;
        font-size: 1.75rem;
        flex: 0;
    }
}
/* ======== Copyright ======== */
.footer-logos {
    padding: 4rem 0;
    display: flex;
    justify-content: center;
    align-content: center;
}
.footer__logo {
    width: 18%;
    padding: 0 2rem;
}
@media screen and (max-width: 768px) {
    .footer__logo {
        width: 35%;
        padding: 0 2rem;
    }
}
.copyright {
    font-size: 1.55rem;
    font-weight: 600;
    text-align: center;
    border-top: 1px solid var(--darkVariant);
    padding-top: 2rem;
}
.copy__info {
    color: var(--greyDarkVariant);
}
.copy__link {
    color: var(--Light);
}
.copy__link:hover {
    color: var(--primaryVariant);
}
@media screen and (max-width: 411px) {
    .footer-logos {
        padding: 1rem 0 4rem;
    }
    .footer__logo {
        width: 40%;
    }
    .copyright {
        font-size: 1.45rem;
    }
}
@media screen and (max-width: 360px) {
    .footer__logo {
        padding: 0 1rem;
    }
}