body{
  
    background-color: #212121 !important;
    font-family:Myrid ;
}

p{
    font-family: Myrid;
    color: unset !important;
    font-size: unset !important;
    direction: unset !important;
    line-height: unset !important;
    margin:0 !important;
}
.productContainer{
    direction: rtl;
    display:flex;
    flex-direction:column;
    max-width:unset !important;
    margin:12px !important;
    
}

img{
    width:100%;
    height: 100%;
}

.directionRtl{
    direction:rtl;
}

.directionRtl div, .directionRtl p, .directionRtl h2{
    direction:rtl !important;
    text-align:right;
}

.itemStyle{
    border-radius: 20px;
    box-shadow: 0 4px 6px #111;
    overflow: hidden;
    display: flex;
    margin:12px;
    position:relative
}

.col{
    padding:0 !important;
}

.row_1{
    display: flex;
}

.row_1 .col{
    flex-basis: 33.33333%;
    max-width:33.33333%;
}

.row_3{
    display: flex;
}

.row_3 .col{
    flex-basis: 33.33333%;
    max-width:33.33333%;
}

.row_3 .contain{
    display: flex;
    flex-direction: column;
}

.row_5 {
    display: flex;
}

.row_5 .col{
    flex-basis: 50%;
    max-width:50%;
}

.pioneer,.superlux,.onyx{
    top: 25%;
    left: 6%;
    align-items:flex-end;
}

.decorative{
    top: 20%;
    right: 20%;
}

.towelVenice{
    top: 15%;
    right: 21%;
}

.towelSuperlux{
    top: 15%;
    left: 20%;
}

.optima{
    top: 20%;
    left: 18%;
}

.vertical{
    top: 12%;
    right: 10%;
}

.venice{
    top: 12%;
    left: 10%
}

.flex-end{
    direction: ltr !important;
}

.dark_1{
    color: black !important;
}

.dark_2{
    color: #0b0b0b !important;
}

.border_dark{
    border: 1px solid black !important;
}

.border_dark:hover{
    background-color: rgb(46, 46, 46) !important;
    border: 1px solid rgb(46, 46, 46) !important;
    color: white !important;
}

.weight_600{
    font-weight: 600!important;
}

.content{
    position: absolute;
    display: flex;
    flex-direction: column;
}

.content h2{
    color: #cecece;
    font-size:2.1vw;
    font-family:Myrid ;
    margin: 0 0 12px;
}

.superlux h2{
    font-size: 1.9vw;
}

.vertical h2{
    font-size: 1.8vw;
}

.pioneerEl h2{
    font-size: 1.9vw;
}

.towelSuperlux h2{
    font-size:1.6vw
}

.briliantVertical h2{
    font-size:1.7vw
}

.content .colCount{
   font-size:14px;
    color: #cecece;
    margin:0 0 12px;
    display: flex;
    flex-wrap:nowrap;
    direction:ltr;
}

.content .colors{
    display:flex;
    flex-wrap:nowrap;
    align-items: center;
    margin-bottom:12px;
   font-size:14px;
    font-family:Ebrima ;
    color: #cecece;
     direction:ltr;
}

.content .colors >div{
    width:16px;
    height: 16px;
    border-radius: 20px;
    margin:6px;
    box-shadow: -2px 2px 4px #1e1e1e;
}

.content .colors p{
   font-size:14px;
    color: #cecece;
}

.content .colors .black{
    background-color: black;
}

.content .colors .white{
    background-color: white;
}
.content .colors .gold{
    background-color: rgb(202, 169, 21);
}

.content .option{
    display: flex;
    align-items: center;
} 

.content .option p{
    font-size: 15px;
    color: #cecece;
}

.content .link{
    position: initial;
    margin-top: 24px;
    display:flex;
    right:unset;
}

.poineerLink{
    bottom: 8%;
    left: 6%;
}

.pioneerEl{
    top: 10%;
    right: 7%;
}

.briliant{
    top: 18%;
    left: 10%;
}

.briliantVertical{
    top: 18%;
    right: 38%;
}

.link{
    position: absolute;
}

.link button{
    font-family:Ebrima ;
    padding:0 16px;
    height:35px;
    font-size:14px;
    border-radius: 30px;
    font-weight: 500;
    border:1px solid white;
    background-color: #f0f8ff00;
    color:white;
    transition: all 0.3s ease-in-out 0s;

}

.link button:hover{
    cursor: pointer;
    background-color: white;
    color: black;
}

.p_8{
    padding:0 8px
}

.superlux2,.towel2,.briliantVerticalMobile,.pioneerTablet, .onyxTablet, .decorativeTablet, .optimaTablet, .pioneerElTablet, .towelElTablet, .displayMobile{
    display: none;
}

.garantee{
    display: flex;
    direction:rtl;
    padding:0 12px;
    max-width:2000px;
    margin-left:auto;
    margin-right:auto;
}
.conditions{
    flex: 4;
    height: auto;
    display: flex;
    width: 100%;
}
.afterSale{
    flex: 1;
    height: auto;
    display: flex;
    width: 100%;
}
.nasaban{
    flex: 1;
    height: auto;
    display: flex;
    width: 100%;
}

.innerContent{
    background-color:#363634 ;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin:0 12px;
    flex-direction: column;
    direction: rtl;
    padding: 32px;
    width: 100%;
}

.titleCondition{
    font-size: 18px !important;
    font-weight: 700;
    color: white !important;
    font-family: Ebrima;
    width: 100%;
    margin-bottom: 12px !important;
}

.conditions ul{
    width:100%
}

.conditions li{
    color:#D1D1D1 ;
    font-size: 14px;
    font-weight: 500;
    width: 100%;
    font-family: Ebrima;
    text-align:right;
}

.conditions li:first-child{
    margin-bottom:16px
}

.afterSale p{
    font-size: 14px !important;
    color:#D1D1D1 !important;
    white-space: nowrap;
    font-family: Ebrima;
}

.nasaban p{
    font-size: 14px !important;
    color:#D1D1D1 !important;
    white-space: nowrap;
    font-family: Ebrima;
}

.btnLink{
    padding: 8px;
    width: 160px;
    font-size: 14px;
    background-color:#D4D4D4 ;
    color: #262626;
    height:40px ;
    font-family: Ebrima;
    border-radius: 30px;
    box-shadow: 0 3px 6px #0000003d;
    margin-top: 32px;
    border:none;
    cursor:pointer;
    transition:0.3s ease-in-out 0s;
}

.btnLink:hover{
    background-color:rgb(255,216,6) ;
    color:black
}

.header{
    display: flex;
    height: 100vh;
    padding:100px 24px 24px;
    max-width:2000px;
    margin-left:auto;
    margin-right:auto;
    min-height:1000px;
    max-height:1080px;
}

.header .image{
    flex:1;
    background: url('/media/images/Render/banner.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 20px;
    background-position-y:center;
}

.header .context{
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-direction: column;
    padding-right:32px;
    padding-left: 5%;
}

.context h1{
    font-family: Ebrima;
    color: white;
    font-size: 30px;
    line-height: 54px;
    text-align: left;
    margin-bottom: 16px;
}

.context h4{
    font-family: Ebrima;
    color: #CCCCCC;
    font-size: 18px;
    font-weight: 400;
    line-height: 36px;
    text-align: left;
    margin-bottom: 32px;
}

.propertise{
    display: flex;
    flex-direction: column;
}
.propertiesItem{
    display: flex;
    align-items: center;
    padding-bottom: 12px;
}

.propertiesItem img{
    width: 32px;
    height:32px;
    margin-right:8px
}
.propertiesItem p{
    font-family: Ebrima;
    color: #CCCCCC !important;
    font-size: 16px !important;
    font-weight: 400;
}

@media only screen and (min-width:2000px){
    .productContainer{
        max-width:2000px !important;
        margin:12px auto !important;
    }
    .superlux h2, .content h2{
        font-size:42px;
    }
}

@media only screen and (max-width:1500px){
    .link button{
        font-size: 12px;
        height: 30px;
    }
    .content .colCount{
        font-size: 13px;
    }
    .content .colors p{
        font-size: 13px;
    }

    .pioneer, .superlux, .onyx {
        top: 22%;
    }
}

@media only screen and (max-width:1300px){
    
    .content .colCount{
        font-size: 12px;
    }
    .content .colors p{
        font-size: 12px;
    }

    .pioneer, .superlux, .onyx{
        top: 20%;
    }

    .briliantVertical, .briliant{
        top: 12%;
    }
}

@media only screen and (max-width:1200px){
    .header{
        flex-direction:column;
        max-height:unset;
        height:auto;
    }
    .header .context{
        background-color:#363634;
        padding:32px ;
        border-radius:0 0 20px 20px;
    }
    .header .image{
        min-height:600px;
        border-radius:20px 20px 0 0;
    }
    .context h1 {
        font-size:25px;
    }
    
    .content h2{
        font-size:27px;
    }
    .context h4{
        font-size:16px;
        line-height:32px;
    }
    .context h1 br{
        display:none;
    }
    .superlux2{
        display: flex;
    }
    .superlux1{
        display: none;
    }
    .row_1{
        flex-wrap: wrap;
    }
    .row_1 >div:nth-child(1){
        flex-basis: 50%;
        max-width: 50%;
        order: 1;
    }
    .row_1 >div:nth-child(2){
        flex-basis: 100%;
        max-width: 100%;
        order: 3;
    }
    .row_1 >div:nth-child(3){
        flex-basis: 50%;
        max-width: 50%;
        order: 2;
    }

    .decorative, .optima{
        top: 12%;
    }
   
    .content .colCount{
        font-size: 14px;
    }
    .content .colors p{
        font-size: 14px;
    }

    .row_3{
        flex-wrap: wrap;
    }
    .row_3 >div:nth-child(1){
        flex-basis: 50%;
        max-width: 50%;
        order: 1;
    }
    .row_3 >div:nth-child(2){
        flex-basis: 100%;
        max-width: 100%;
        order: 3;
    }
    .row_3 >div:nth-child(3){
        flex-basis: 50%;
        max-width: 50%;
        order: 2;
    }
    .row_3 .contain{
        flex-direction: row;
    }
    .row_3 .contain >div{
        max-width: 50%;
        flex-basis: 50%;
    }

    .towel1{
        display: none !important;
    }
    .towel2{
        display: block;
        min-height:unset !important;
    }
    .row_4{
        display: flex;
    }
    .row_4 col{
        flex-basis: 50%;
        max-width: 50%;
    }
    .towelSuperlux{
        top: 3%;
        left: unset;
        right: 8%;
    }
    .towelVenice{
        top: 3%;
        right: unset;
        left: 8%;
    }
    .content .link{
        margin-top: 8px;
    }
    .briliantVerticalMobile{
        display: block;
    }
    .briliantVerticalDesktop{
        display: none;
    }
    
     .towelSuperlux    div, .towelSuperlux    p, .towelSuperlux    h2{
    direction:rtl !important;
}

}

@media only screen and (max-width:1024px){  
    .pioneerTablet{
        display: block;
    }
    .content h2{
        font-size:22px;
    }
    .pioneerDesktop{
        display: none;
    }
    .onyxTablet{
        display: block;
    }
    .onyxDesktop{
        display: none;
    }
    .decorativeDesktop{
        display: none !important;
    }
    .optimaTablet{
        display: block;
    }
    .decorativeTablet{
        display: block;
    }
    .row_1 .col{
        flex-basis: 100% !important;
        max-width: 100% !important;
    }
    .row_2{
        display: flex;
    }
    .pioneerElDesktop,.towelElDesktop{
        display: none;
    }
    .pioneerElTablet, .towelElTablet{
        display: block;
    }
    .row_3 .contain{
        flex-direction: column;
    }
    .row_3 .contain > div{
        flex-basis: 100%;
        max-width: 100%;
    }
    .itemStyle{
        margin:8px
    }

    .decorative{
        top: 5%;
        direction: ltr !important;
        right: unset;   
        left: 10%;
    }
    .optima{
        top: 5%;
        direction: rtl  !important;
        right: 10%;   
        left: unset;
    }

    .briliantVertical{
        top: 5%;
    }
    .briliant{
        top: 5%;
        left: 8%;
    }
   
    .displayDesktop{
        display: none !important;
    }
    .displayMobile{
        display: block;
    }

    .garantee{
        flex-wrap: wrap;
    }

    .conditions{
        flex:0 0 100%;
        max-width: 100%;
        margin-bottom: 24px;
    }
    .afterSale,.nasaban{
        flex:0 0 50%;
        max-width: 50%;
    }
    
    .decorative  div, .decorative  p, .decorative  h2{
    direction:ltr !important;
}

    .optima  div, .optima  p, .optima  h2{
    direction:rtl !important;
}

    .vertical   div, .vertical   p, .vertical   h2{
    direction:rtl !important;
}

    .towelSuperlux   div, .towelSuperlux   p, .towelSuperlux   h2{
    direction:rtl !important;
}
.displayMobile {
    left:unset;
    right:6% !important;
}
}

@media only screen and (max-width:900px){  
    .row_5{
        flex-direction: column;
    }
    .row_5 .col{
        flex-basis: 100%;
        max-width: 100%;
    }
    .briliantVerticalMobile{
        display: none;
    }
    .briliantVerticalDesktop{
        display: block;
    }
    .pioneer, .superlux, .onyx{
        top: 10%;
        right: 4%;
    }
    .poineerLink{
        right: 4%;
    }

    .vertical{
        top: 2%;
        right: 6%;
    }
    .venice{
        top: 2%;
        left: 6%;
    }
    .pioneerEl{
        right: 4%;
    }
}

@media only screen and (max-width:768px){ 
    .pioneer, .superlux, .onyx{
        right: 6%;
    }
    .poineerLink{
        right: 6%;
    }
    .context h1{
        font-size:20px;
        line-height:unset;
    }
    
    .header{
        max-width:600px;
        padding:76px 12px 16px;
    }

    .vertical{
        top: 2%;
        right: 6%;
    }
    .venice{
        top: 2%;
        left: 6%;
    }
    .pioneerEl{
        right: 6%;
    }
    .productContainer{
        max-width: 600px !important;
        margin: 0 auto !important;
    }

   
    .pioneer, .superlux, .onyx{
        top: 10%;
    }
    .row_2, .row_3, .row_4{
        flex-direction: column;
    }

    .row_3 > div{
        flex-basis: 100% !important;
        max-width: 100% !important;
    }
   

    .decorative, .optima{
        top: 10%;
        right: 8% !important;
        left: unset !important;
    }

    .optimaTablet .content{
        direction: rtl !important;
    }
    .towelVenice{
        top: 10%;
        right: 8%;
        left: unset;
        direction: rtl!important;
    }
    .towelSuperlux{
        top: 7%;
    }
    .pioneerTablet, .onyxTablet, .superlux2{
        display: none;
    }
    .pioneerDesktop, .onyxDesktop, .superlux1{
        display: block;
    }

    .pioneer, .superlux, .onyx{
        top: 26%;
    }

    .pioneerElDesktop,.towelElDesktop{
        display: block;
    }
    .pioneerElTablet, .towelElTablet{
        display: none;
    }

    .decorative{
        direction: rtl  !important;
    }
    .vertical, .venice{
        top: 10%;
    }
    .briliantVertical{
       top:5%;
        right:unset;
        left:6%;
        direction:ltr !important;
    }
    .decorativeTablet img, .towelVeniceDesktop{
        transform: rotateY(180deg);
    }
    .conditions{
        margin-bottom: 16px;
    }
    .garantee{
        max-width: 600px;
        margin: 0 auto 8px;
        padding: 0;
    }
}

@media only screen and (max-width: 768px) and (min-width: 500px){
    .briliantVerticalDesktop{
        display: none;
    }
    .briliantVerticalMobile{
        display: block;
    }
}


@media only screen and (max-width:500px){
     .afterSale, .nasaban{
        flex:0 0 100%;
        max-width: 100%;
    }
    .content .colors {
        direction:ltr !important;
    }
    .content .colors p{
        direction:ltr !important;
    }
    .content .colCount, .content .colCount p{
        direction:ltr !important;
    }
    .afterSale{
        margin-bottom: 16px;
    }
    .content{
        position: static;
        width: 100%;
        align-items: center;
        flex-wrap: wrap;
        flex-direction: row;
    }
    
   .afterSale p br, .nasaban p br{
       display:none;
   }
   .btnLink{
       margin-top:24px;
   }
    .header{
        padding-left:8px;
        padding-right:8px;
    }
    
    .innerContent{
        margin:0 8px;
    }

    .content h2{
        flex-basis: 100%;
        text-align: center;
        margin-top: 12px;
        color: #cecece !important;
    }

    .itemStyle{
        display: flex;
        flex-direction: column; 
        align-items: center;
        margin-bottom: 32px;
        background-color: #1c1c1c;
    }

    .content .colCount{
        flex-basis:50% ;
        justify-content: center;
        color: #cecece !important;
    }

    .dark_2{
        color: #cecece !important;
    }

    .content .colors{
        flex-basis:50% ;
        justify-content: center;
        color: #cecece !important;
    }

    .link{
        position: static;
        width:100%
    }

    .link button{
        width: 100%;
        border-radius: 0;
        border: none !important;
        background-color:#151515 !important ;
        height: 50px;
        font-size: 14px;
        color: white!important;
    }

    .flex-end, .briliantVertical{
        direction: rtl  !important;
    }
    
   
    
}

@media only screen and (max-width:450px){
    .content .colCount, .content .colors{
        flex-basis:100%;
    }
    .content h2{
        font-size:25px;
    }
}

@media only screen and (max-width:400px){
   .header{
    padding-left:0;
    padding-right:0;
   }
   .header .image,.header .context{
       border-radius:0;
   }
   .header .context{
       padding:24px 16px;
   }
   
   .innerContent{
       margin:0;
       border-radius:0;
        padding:24px 16px;
   }
  .productContainer{
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  .itemStyle{
    margin-left: 0;
    margin-right: 0;
    border-radius: 0;
  }
}