@media (max-width: 768px) and (orientation: portrait){
    
    .product-header{
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        height: 300vh;
        /* padding-top: 30dvh; */
        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);
    }
    
    /* section{
        min-height: inherit;
      } */
    
    h1 {
        font-size: var(--sizeH1);
        color: #002255;
        position: absolute;
        top: 15vh;
        left: 2dvw;
    }
    
    #products {
        margin-top: 200px;
    }

    .cont-categories {
        width: calc(100% - 30px);
        height: inherit;
        padding-top: 30vh;
    }
    
    .parent-cat {

        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: repeat(5, 1fr);
        grid-column-gap: 15px;
        grid-row-gap: 15px;
        height: 100%;
        width: 100%;
        margin-top: 0vh;
    }
    
    .parent-cat img {
        width: 80%;
    }
    
    .parent-cat h4 {
        text-transform: uppercase;
        font-size: var(--sizeH4);
    }
    
    .parent-cat p {
        text-align: center;
        font-size: var(--sizeP);
    }

    .cat1 { grid-area: 1 / 1 / 2 / 2; }
    .cat2 { grid-area: 2 / 1 / 3 / 2; }
    .cat3 { 
        grid-area: 3 / 1 / 4 / 2; 
        background-color: #002255;
        color: #ffffff;
        font-size: var(--sizeP);
        display: flex;
        justify-content: center;
        align-items: center;
        min-height: 400px;
    }
    .cat4 { grid-area: 4 / 1 / 5 / 2; }
    .cat5 { grid-area: 5 / 1 / 6 / 2; }
    
    .cat1, .cat2, .cat4, .cat5 {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        align-items: center;
        background-color: #fff;
        padding: 5dvw;
        min-height: 50vh;
    }
    
    /*CBOOK*/
    
    section#c-book {
        width: 100%;
        height: inherit;
    } 
    .bg-cbook{
        background-position: 70% 30%;
    }

    .parent-book {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: repeat(3, 1fr);
        grid-column-gap: 15px;
        grid-row-gap: 15px;
        height: 100%;
        width: 100%;
    }
    /* BOOK1 */
    .book1 { 
        grid-area: 1 / 1 / 2 / 2;
        background: linear-gradient(135deg,  #01255a 0%,#01255A 41%,#114ca4 100%);
        display: flex;
        justify-content: center;
        flex-direction: column;
        align-items: center;
        position: relative;
    }
    
    .book1 > .cont-split , .tablet1 .cont-split, #headphones > .cont-split {
        display: flex;
        width: 100%;
        height: 100%;
        justify-content: space-around;
        align-items: center;
        flex-direction: column-reverse;
    }

    .cont-book-left {
        width: 100%;
        height: 50%;
        padding-left: 2dvw;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }
    .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: 5dvw;
        margin-top: 5dvw;
    
    }
    
    .cont-book-left p {
        margin-bottom: 10dvw;
        color: #fff;
        font-size: var(--sizeP);
    }
    
    .cont-book-right {
        width: 100%;
        height: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    /* /BOOK1 */
    
    .book2 { 
        grid-area: 2 / 1 / 3 / 2;;
        background-color: rgb(255, 255, 255);
        position: relative;
        width: 100%;
     }
    .book3 { 
        grid-area: 3 / 1 / 4 / 2;
        background-color: rgb(255, 255, 255);
        position: relative;
        width: 100%;

     }
    
     .book2>img,.book3>img,.tablet2>img,.tablet3>img {
        width: 100%;
    }
    
    .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(--sizeH4s);
        color: var(--PrimaryBlue);
        margin: 1dvw;
    }
    
    .book2>p,.book3>p,.tablet2>p,.tablet3>p {
        font-size: var(--sizeP);
        color: var(--PrimaryBlue);
    }
    /* /CBOOK */
    /* TABLET */
    #tablet{
        background-color: #f0ecec;
        margin: 0px;
        padding: 0px;
        min-height: inherit;
        background-position: 65% top;
    }
    
    .parent-tablet {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: repeat(3, 1fr);
        grid-column-gap: 15px;
        grid-row-gap: 15px;
        padding: 15px;
    }
        
    .tablet1 { 
        grid-area: 1 / 1 / 2 / 2;
        display: flex;
        justify-content: center;
        flex-direction: column;
        align-items: center;
        position: relative;
    }
    .tablet2 { 
        grid-area: 2 / 1 / 3 / 2;
    
    }
    .tablet3 { 
        grid-area: 3 / 1 / 4 / 2;
    
    }
    
    .tablet2,.tablet3,.drive1{
        background-color: #fff;
        position: relative;
        padding-top:  6dvw;
        padding-bottom:  1dvw;
    
    }
    
    .tablet1-left {
        width: 100%;
        height: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        text-align: center;
    }
    
    .tablet1-left h2{
        font-size: var(--sizeH2);
        text-wrap: wrap;
        line-height: 7dvw;
        text-transform: uppercase;
        text-align: center;
        margin-bottom: 5dvw;
    }
    
    .tablet1-left p{
        font-size: var(--sizeP);
        text-wrap: wrap;
        margin-bottom: 2dvw;
        width: 100%;
        margin-left: 15px;
        word-spacing: 0.5dvw;
    }
    
    .tablet1-right {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
    }
    
    .tablet1-right img {
        width: 100%;
        position: relative;
        z-index: 10;
    }
    /* /TABLET */
    /* HEADPHONES */
    #headphones {
        min-height: inherit;
        background-image: url('../../../images/BG/hero-HD-sound.webp');
        background-position: center;
        background-size: cover;
        margin: 0px;
        display: flex;
        align-items: center;
        padding-bottom: 30px;
        padding-top: 30px;

    }
    
    .headphones-left {
        width: 100%;
        padding-left: 2dvw;
        text-align: center;
    }
    .headphones-left h2,.cont-book-left h4{
        color: #a0a0ff;
    }
    
    .headphones-left h2{
        font-size: var(--sizeH2);
        text-wrap: wrap;
        line-height: 12dvw;
        text-transform: uppercase;
        color: var(--PrimaryBlue);
    }
    
    .headphones-left h4{
        font-size: var(--sizeH4);
        text-wrap: wrap;
        text-transform: capitalize;
        font-weight: 300;
        margin: 5dvw 0;

    }
    
    .headphones-left h4>span {
        color: var(--PrimaryBlue);
    }
    
    .headphones-left p {
        margin: 5dvw 0;
        color: var(--PrimaryBlue);
        font-size: var(--sizeP);
    }
    
    
    
    .headphones-right {
        width: 100%;
    }
    
    .headphones-right img {
        width: 100%;
    }
    /* /HEADPHONES */
    /* DRIVE */
    
    #c-drive {
        min-height: 70vh;
        padding: 15px;
    }

    .parent-drive {
        height: 100%;
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: repeat(2, 1fr);
        grid-column-gap: 15px;
        grid-row-gap: 15px;
    }
    
    .drive1 { 
        grid-area: 1 / 1 / 2 / 2;
    
    }
    .drive2 { 
        grid-area: 2 / 1 / 3 / 2;
        background-image: url('../../../images/BG/gep-bg-woman.webp');
        background-position: center;
        background-size: cover;
    }
    /* /DRIVE */
    /*VIDEO*/
    .height-container-phone-video{
        height: 1000px;
    }

    .top10 {
        top:28%;
    }
    /*/VIDEO*/

    /* INFO */
    #info {
        padding: 0px;
        height: 200vh;
    }

    .parent-info {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: repeat(4, 1fr);
        grid-column-gap: 15px;
        grid-row-gap: 15px;
    }
    
    .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: 5dvw;
        margin-bottom: 5dvw;
        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 / 2 / 2;
        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;
        height: 100vh;
    
    }

    .infobox2 { 
        grid-area: 2 / 1 / 3 / 2;
    
    }
    .infobox3 { 
        grid-area: 3 / 1 / 4 / 2;
    
    }
    .infobox4 { 
        grid-area: 4 / 1 / 5 / 2;
    
    }
    
    .infobox1 h3 {
        font-size: var(--sizeH3);
        color: #629dfb;
        width: 90%;
        text-align: left;
        margin-top: 5dvw;
        text-align: center;
    
    }
    
    .infobox1 p {
        font-size: var(--sizeP);
        color: #ffffff;
        width: 50%;
        margin-top: 2dvw;
        margin-bottom: 2dvw;
    }
    /* /INFO */
    

}