/* Product Label */
:root {
--bioderma: #0caa5b;
/* sensibio */
}
.grico {
display: flex;
justify-content: center;
align-items: center;
margin: 0 auto;
width: 80%;
text-transform: capitalize;
}
.gridz {
margin: 0 auto;
display: grid;
grid-template-areas:
"on tw tw fr"
"sx tw tw fv"
;
justify-content: flex-start;
align-items: center;
row-gap: 2px;
width: auto;
}
.one {
grid-area: on;
}
.two {
grid-area: tw;
background-color: transparent;
position: relative;
width: 15vw;
}
.four {
grid-area: fr;
}
.fivez {
grid-area: fv;
}
.six {
grid-area: sx;
}
.seven {
grid-area: sv;
}
.eight {
grid-area: et;
}
.two img {
display: block;
width: 100%;
}
.gridz>div p {
font-weight: bold;
margin: 1rem 0;
color: #006b80;
}
.gridz p {
padding-left: 0.5em;
}
.one::before,
.four::before,
.six::before {
content: "";
position: absolute;
top: 49%;
right: -.1rem;
width: .5rem;
height: .5rem;
border-radius: 100px;
display: block;
background-color: var(--bioderma)
}
.five::before {
content: "";
position: absolute;
top: 49%;
left: -.1rem;
width: .5rem;
height: .5rem;
border-radius: 100px;
display: block;
background-color: var(--bioderma);
}
.one,
.four,
.five,
.six {
border-top: 2px solid var(--bioderma);
position: relative;
width: 22vw;
}
.five {
border-top: 2px solid var(--bioderma);
position: relative;
}
.one p,
.six p {
text-align: center;
}
.borderLeft {
border-left: 2px solid var(--bioderma);
position: absolute;
top: 0;
bottom: 0;
height: 50%;
}
.borderRight {
border-right: 2px solid var(--bioderma);
position: absolute;
top: 0;
left: 0;
height: 50%;
}
.five .borderLeft {
opacity: 0;
}
.lion {
color: var(--bioderma);
font-weight: bold;
margin-right: 1em;
}
.bigimage {
display: block;
}
.smallimage {
display: none !important
}
.five p {
padding-right: 1em;
text-align: center;
}
@media screen and (max-width: 700px) {
.grico {
display: block;
overflow: hidden;
width: 100%;
}
.gridz {
grid-template-areas:
'on tw '
'fr tw '
'fv tw '
'sx tw ';
row-gap: 15px;
justify-content: flex-start;
align-items: center;
}
.five::before {
right: -.1rem;
left: none;
}
.five {
text-align: right;
}
.five .borderLeft {
opacity: 1;
}
.five .borderRight {
display: none;
}
/* .one p,
.six p {
text-align: right;
} */
.one,
.four,
.five,
.six {
width: 43vw;
}
.two {
width: 48vw;
}
}
/* end product label */
/* Video Styling */
.videoz {
position: relative;
padding-bottom: 56.25%;
/* 16:9 */
height: 0;
margin-bottom: 10px;
}
.videoz iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
/* Free From Info */
.freefrom {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
border: solid #ffffff 2px;
border-radius: 25px;
box-shadow: #10d61b8f 0px 0px 4px 4px;
padding: 1%;
align-content: space-around;
margin: 2%;
width: 95%;
}
.feat {
text-align: center;
margin: 1%;
width: 10%;
}
.feat:hover {
transform: scale(1.1);
}
.feat {
transition: all 0.5s ease-in-out;
}
.feat img {
display: block;
width: 100%;
margin-bottom: 10%;
}
.featext {
display: block;
font-weight: 600;
overflow-wrap: normal;
color: #006b80 !important;
}
@media (max-width: 767px) {
.feat {
width: 29%;
}
}
/* Product Benefits Styling */
.ProductBenefits {
display: flex;
flex-wrap: wrap;
align-content: space-around;
}
.ProductBenefitsBelow {
text-align: center;
margin: 1%;
width: 47%;
}
@media screen and (max-width: 700px) {
.ProductBenefits>div {
width: 100%;
}
#ProductBenefitsText {
line-height: normal;
}
}
/* Tabel Styling */
.supmain {
direction: rtl;
}
.sup {
background-color: #5fda63;
border-color: #5fda63;
border-style: solid;
border-radius: 30px;
color: #006b80;
}
.sup table {
vertical-align: middle;
border-radius: 30px;
overflow: hidden;
table-layout: fixed;
background-color: white;
border-collapse: collapse;
}
.captionz {
align-items: flex-end;
padding: 2%;
font-weight: 600;
color: white
}
.nu1 {
margin-right: 2%;
font-size: 3vw;
white-space: nowrap;
}
.nu2 {
margin-left: 2%;
white-space: nowrap;
float: left;
margin-top: -1%;
font-weight: 900;
font-size: 1.2em ! important;
}
.conc {
text-align: right;
text-indent: .5em;
}
.sup th {
font-weight: bold;
padding: 2%;
text-align: center;
border-bottom: 6px solid #5fda63;
color: #006b80 !important;
}
.sup th p {
font-weight: 600;
color: #006b80 !important;
}
.sup tr:first-child th {
border-bottom: 1px solid #5fda63;
}
.sup td {
border-right: none;
border-left: none;
overflow-wrap: normal;
}
.sup td {
padding: 2%;
text-align: center;
vertical-align: middle;
border-bottom: 2px solid #5fda63;
}
.sup tr:last-child td {
border-bottom: none;
}
@media screen and (max-width: 699px) {
.sup {
width: 100%;
}
.nu1 {
font-size: 6vw;
text-align: center;
margin-right: 0%;
}
.nu2 {
float: none;
text-align: center;
font-size: 3.5vw !important;
margin-bottom: 0%;
margin-top: 0%;
}
.sup table {
width: 99%;
margin: 0 auto 5px auto;
}
.sup th {
border-bottom: 4px solid #5fda63;
font-size: 3.5vw;
white-space: nowrap;
}
.sup tr:first-child th p {
font-size: 3vw;
}
.sup th p {
font-weight: 900;
}
.sup table td {
font-size: 3.7vw;
overflow-wrap: normal;
font-weight: 600;
}
.sup table td p {
font-weight: 450;
}
.sup td:nth-child(1) {
text-align: right;
}
.sup th:nth-child(1) {
text-align: right;
}
}
@media screen and (min-width: 700px) {
.sup {
width: 80%;
margin: 0 auto;
}
.sup table {
width: 99%;
margin: 0px 2px 2px 2px;
}
}
تفاصيل المنتج:
تفاصيل المنتج: