.product-header{
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    height: 150vh;
    background: rgb(206,208,222);
    background: -moz-linear-gradient(180deg, rgba(206,208,222,1) 0%, rgba(255,255,255,1) 100%);
    background: -webkit-linear-gradient(180deg, rgba(206,208,222,1) 0%, rgba(255,255,255,1) 100%);
    background: linear-gradient(180deg, rgba(206,208,222,1) 0%, rgba(255,255,255,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ced0de",endColorstr="#ffffff",GradientType=1);
}

#products {
    margin-top: 150px;
}

/* section{
    min-height: 100dvh;
  } */

/*h1 {
    font-size: 14vw;
    color: #002255;
    position: absolute;
    top: 15vh;
    left: 2dvw;
}*/

.cont-categories {
    width: calc(100% - 30px);
    height: 100vh;
    margin: 15px;
}

.parent-cat {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(2, 1fr);
    grid-column-gap: 15px;
    grid-row-gap: 15px;
    height: 100%;
    width: 100%;
}

.parent-cat img {
    width: 80%;
}

.parent-cat h4 {
    text-transform: uppercase;
    font-size: var(--sizeH4);
}

.parent-cat p {
    text-align: center;
}
    
.cat1 { grid-area: 1 / 1 / 3 / 3; }
.cat2 { grid-area: 1 / 3 / 2 / 4; }
.cat3 { 
    grid-area: 1 / 4 / 2 / 5;
    background-color: #002255;
    font-size: 2dvw;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 20vh;

}

.cat3 p {
    color: #ffffff;
}

.cat4 { grid-area: 2 / 3 / 3 / 4; }
.cat5 { grid-area: 2 / 4 / 3 / 5; }

.cat1, .cat2, .cat4, .cat5 {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    background-color: #fff;

}

/* CARD*/
.disable-card {
    opacity: 0.6;
}

/*CBOOK*/

section#c-book {
    width: 100%;
    height: 180vh;
    padding: 15px;
}

.parent-book {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    grid-column-gap: 15px;
    grid-row-gap: 15px;
    height: 100%;
    width: calc(100% - 30px);
}
/* BOOK1 */
.book-head {
    background-image: url('../../images/BG/background-full_width-omnia.webp');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.book1 { 
    grid-area: 1 / 1 / 2 / 3;
    /* background: linear-gradient(135deg,  #01255a 0%,#01255A 41%,#114ca4 100%); W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    background-image: url('../../images/BG/background-full_width-omnia.webp');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    position: relative;
}

.cont-book-left {
    width: 50%;
    padding-left: 2dvw;
}
.cont-book-left h2,.cont-book-left h4{
    color: #a0a0ff;
}

.cont-book-left h2{
    font-size: var(--sizeH2);
    text-wrap: nowrap;
    line-height: 8dvw;
}

.cont-book-left h4{
    font-size: var(--sizeH4);
    font-weight: 300;
    text-wrap: nowrap;
    text-transform: capitalize;
    margin-bottom: 2dvw;

}

.cont-book-left p {
    margin-bottom: 3dvw;
    color: #fff;
    font-size: var(--sizeP);
}

.cont-book-right {
    width: 50%;
}

.cont-book-right img {
    width: 100%;
    position: relative;
    z-index: 10;
}

.cont-book-right::before {
    
    content: '';
    background-image: url('../../../images/asset/light.webp');
    background-repeat: no-repeat;
    z-index: 5;
    background-size: 100%;
    background-position: center;
    position: absolute;
    bottom: 0;
    right: 0;
    top: 0;
    height: 100%;
    width: 50%;
}
/* /BOOK1 */

.book2 { 
    grid-area: 2 / 1 / 3 / 2;
    background-color: rgb(255, 255, 255);
    position: relative;

 }
.book3 { 
    grid-area: 2 / 2 / 3 / 3;
    background-color: rgb(255, 255, 255);
    position: relative;

 }

 .book2>img,.book3>img,.tablet2>img,.tablet3>img {
    width: 60%;
}

.book2>h3,.book3>h3,.tablet2>h3,.tablet3>h3 {
    font-size: var(--sizeH3);
    color: var(--PrimaryBlue);
}

.book2>h4,.book3>h4,.tablet2>h4,.tablet3>h4 {
    font-size: var(--sizeH4);
    color: var(--PrimaryBlue);
    margin: 1dvw;
}

.book2>p,.book3>p,.tablet2>p,.tablet3>p {
    font-size: var(--sizeP);
    color: var(--PrimaryBlue);
}

section#c-books .row_primo .card .cont-prezzo {
    margin-top: auto;
}
/* /CBOOK */
/* TABLET */
#tablet{
    background-color: #f0ecec;
    padding: 15px;
    min-height: inherit;
    background-image: url('/content/media/2024/06/bg_tablet.webp');
    background-position: right top;
    background-size: cover;
    background-repeat: no-repeat;
}

.parent-tablet {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: repeat(6, 1fr);
    grid-column-gap: 15px;
    grid-row-gap: 15px;
}
    
.tablet1 { 
    grid-area: 1 / 1 / 4 / 7;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    position: relative;
}
.tablet2 { 
    grid-area: 4 / 2 / 7 / 4;

}
.tablet3 { 
    grid-area: 4 / 4 / 7 / 6;

}

.tablet2,.tablet3,.drive1{
    background-color: #fff;
    position: relative;
    padding-top:  6dvw;
    padding-bottom:  1dvw;

}

.tablet1-left {
    width: 50%;
    height: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    flex-direction: column;
}

.tablet1-left h2{
    font-size: 6.5dvw;
    text-wrap: nowrap;
    line-height: 7dvw;
    text-transform: uppercase;
}

.tablet1-left p{
    font-size: 1.5dvw;
    text-wrap: nowrap;
    margin-bottom: 2dvw;
    width: 100%;
    margin-left: 15px;
    word-spacing: 0.5dvw;
}

.tablet1-right {
    width: 50%;
    height: 100%;
    display: flex;
    align-items: center;
}

.tablet1-right img {
    width: 80%;
    position: relative;
    z-index: 10;
}
section#tablet .card .product_title {
    margin-top: auto;
}
/* /TABLET */
/* HEADPHONES */
#headphones {
    min-height: 70vh;
    background-image: url('../../../images/BG/hero-HD-sound.webp');
    background-position: center;
    background-size: cover;
    margin: 15px;
    display: flex;
    align-items: center;
}

.headphones-left {
    width: 50%;
    padding-left: 2dvw;
}
.headphones-left h2,.cont-book-left h4{
    color: #a0a0ff;
}

.headphones-left h2{
    font-size: 6.5dvw;
    text-wrap: nowrap;
    line-height: 6dvw;
    text-transform: uppercase;
    color: #002255;
}

.headphones-left h4{
    font-size: 1.5dvw;
    text-wrap: nowrap;
    text-transform: capitalize;
    margin-bottom: 2dvw;
    font-weight: 300;

}

.headphones-left h4>span {
    color: #002255;

}

.headphones-left p {
    margin-bottom: 2dvw;
    color: #002255;
    font-size: 1dvw;
}



.headphones-right {
    width: 50%;
}

.headphones-right img {
    width: 100%;
}
/* /HEADPHONES */
/* DRIVE */

#c-drive {
    min-height: 70vh;
    padding: 15px;
}

.parent-drive {
    height: 100%;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: 1fr;
    grid-column-gap: 15px;
    grid-row-gap: 15px;
}

.drive1 { 
    grid-area: 1 / 1 / 2 / 2;

}

.drive1 img {
    width: 80%;
}

.drive2 { 
    grid-area: 1 / 2 / 2 / 3;
    background-image: url('../../../images/BG/gep-bg-woman.webp');
    background-position: center;
    background-size: cover;
}
/* /DRIVE */

/* INFO */
#info {
    padding: 15px;
    height: 150vh;
}

.parent-info {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(5, 1fr);
    grid-column-gap: 15px;
    grid-row-gap: 15px;
    height: 100%;
}

.infobox4, .infobox2, .infobox3 {
    background-color: #f2f2f2;
    text-align: center;
}


.infobox4 i, .infobox2 i, .infobox3 i {
    font-size: var(--sizeIcon);
    color: var(--PrimaryBlue);
}

.infobox4 h4, .infobox2 h4, .infobox3 h4 {
    font-size: var(--sizeH4);
    color: var(--PrimaryBlue);
    margin-top: 1dvw;
    margin-bottom: 1dvw;
    text-transform: uppercase;
}

.infobox4 p, .infobox2 p, .infobox3 p {
    font-size: var(--sizeP);
    color: var(--pColor);
    width: 50%;
    font-weight: 300;
}

.infobox1 { 
    grid-area: 1 / 1 / 5 / 4;
    background-image: url('../../../images/BG/bg-info.webp');
    background-repeat: no-repeat;
    background-position: bottom;
    background-size: cover;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;

}
.infobox2 { 
    grid-area: 5 / 1 / 8 / 2;

}
.infobox3 { 
    grid-area: 5 / 2 / 8 / 3;

}
.infobox4 { 
    grid-area: 5 / 3 / 8 / 4;

}

.infobox1 h3 {
    font-size: var(--sizeH3);
    color: #629dfb;
    width: 70%;
    text-align: left;
    margin-top: 3dvw;

}

.infobox1 p {
    font-size: var(--sizeP);
    color: #ffffff;
    width: 50%;
    margin-top: 2dvw;
    margin-bottom: 2dvw;
}
/* /INFO */