:root {
    --color-1: #354155;
    --color-2: #252525;
    --color-3: #bfbfbf;
    --color-4: #00b768;
    --color-0: #0cd17c;
    --font-1: 'Montserrat', sans-serif;
    --font-2: 'Merriweather', serif;
        /* --color-backgroundgreen: #3ce399; */
        --green1: #3ce399;
        --green2: #1a2e35;
        --green3 : #52c788;
        --green4 : #41a971;
        --green5 : #2ccd86;
        --gray1 : #e4e4e4;
        --gray2 : #606060;
        --gray3 : #8b8b8b;
        --color-backgrounddark1: hsl(194deg 41% 12%);
        --color-backgrounddark2:hsl(198deg 38% 15%);
        --color-backgrounddark3: #e4e3e3;
        /* --color-h1green:#52c788; */
        --color-h1dark:#505050;  
        --color-h1white:white;
        /* --color-pdark: #403b3b;  */
        --color1: #403b3b;
        /* --color-pwhite: white; */
}

/* common  */
*{margin: 0;padding: 0;box-sizing: border-box;}
.w {width: 1200px; margin: 0 auto;}
.fsb{display: flex;justify-content: space-between;}
.fsa{display: flex;justify-content: space-around;}
input,button,textarea {outline:none;}
button{border: none;cursor: pointer;}
li{list-style: none;}
p,li,h1,h2,span,a,label, address {padding: 10px; font-family: var(--font-1);color: var(--color-1);}
address{line-height: 1.5;}
p{line-height: 1.6; font-size: 15px;}
li{line-height: 1.5; font-size:15px; padding:3px 10px;}

h1{font-size: 32px;font-weight: 300;text-transform: uppercase;letter-spacing: 3px;}
h2{font-size: 24px;text-transform: uppercase;font-weight:300;color: black;}
a{text-decoration: none;cursor: pointer;}
.e{text-align: center;}
.a0{color:var(--color-4); text-decoration: underline; padding:0;}

.i1{width:20px; }
/* common  */

/* common div */
.i30{width: 17px;}
.s30{font-size: 13px;}
.d30{display: flex;align-items: center;}
/* common div */

/* Breadcrumb */
#d6{/*border-top:1px solid #cbcbcb;*/ margin-bottom: 30px;}
/* Breadcrumb */

/* header  */
#i0{height:38px;}
.a1{font-size: 14px; font-family: var(--font-1); color:#505050; text-transform: uppercase;}
.s2, #s1{text-transform: uppercase; font-size:12px;}
#s1{font-size: 13px;  padding:0;}
#s1 > span {padding:0;}
#d4{padding:0;align-items: center;}
#d5{align-items: center;padding:0px; border-top:1px solid #cbcbcb;}
#s4{text-transform: none;font-size: 13px;}
#n1{display: flex;justify-content: space-around;}
#u2{display:flex;align-items: center;}
.u3{display: none;position: absolute;}
.l2:hover .u3{display: block;}
.a3{color: #333;}
.l3:hover .a3{ color:var(--color-0);}
/* .l3{padding: 10px 0;background: #0cd17c;margin: 2px 0;} */
.l3{padding: 10px 0;background: #fff;margin: 2px 0; border:1px solid #333; transition:1s all;}
.l3:hover{padding-left:10px;}
#s3{text-transform: uppercase;font-size: 13px;display: flex;align-items: center;}
#s3:before{content: ""; background: url(../img/icons/cart.svg); display: block;width:25px; height:20px;background-size: cover;margin-right: 10px;}
.s2:before{content: ""; display: block;width:20px; height:20px;margin-right: 10px;}
#s5:before{content: ""; background: url(../img/icons/search.svg);background-size: cover;}
#s6:before{content: ""; background: url(../img/icons/heart.svg);background-size: cover;}
.s7:before{content: ""; background: url(../img/icons/downarrow.svg);background-size: cover;}
.s7{flex-direction: row-reverse;}
.s2{display: flex;align-items: center;}
#d3{display: flex;cursor: pointer;align-items: center;}
#d1{padding: 0 0 0;}
#s10::before{content: none;}
.i2 {width: 28px;display: none;}
/* header  */

/* footer */
.ad{font-style: normal; font-size: 12px; padding:0;}
.i4{width:20px;}
.s8{font-size: 14px;text-transform: uppercase; display: block;}
.s9{font-size: 12px;padding: 0; line-height: 1.5;}
.d9{width: 22%; margin-top:10px;}
.l1, .d4 {font-family: var(--font-1);font-size: 12px;}
#in1{padding: 10px 0 8px 30px;background: url(../img/icons/iphone.svg)no-repeat left;background-size: 15px;border: 1px solid var(--color-3);background-position-x: 3px; width:100%; font-size:14px; margin-right:5px;}
#d10{display: flex;margin-top: 20px; justify-content: space-around;}
.p2{font-size: 12px;padding: 10px;}
/* #d13{width: 13%;} */
.d4{display: flex;align-self: flex-start; align-items:center; margin-right:8px; margin-bottom:5px;}
.d11{display: flex;align-items: center; margin-bottom:10px;}
#ft{padding: 20px 0; margin-top:20px; border-top:1px solid #ebebeb;}
#i1{width: 30px;border: 1px solid black;}
#d14{display: flex;justify-content: end;}
#bt1{ position: relative; text-transform: uppercase;color: var(--color-1);padding:8px 4px;border: 1px solid #999;background: white; width:120px; font-size:12px;}
#bt1::after{content: "";display: block;border: 1px solid #999;position: absolute;width: 100%;height: 35px;top: 2px;left: 2px; }
/* #d15{width: 25%;} */
/* footer */


/* dropdown */
.a2:hover{background: var(--color-1);color: white;}
.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
  }

  .dropdown {
    position: relative;
    display: inline-block;
  }

.dropdown-content {
    top:60px;
    right: 235px;
    display: none;
    position: absolute;
    background-color: #f1f1f1e0;
    overflow: auto;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
  }

  .show {display: block;}


/* meadia query */
@media screen and (max-width:1280px) {
    .w{width:96%; margin:0 2%;}
}
@media screen and (max-width: 990px) {
  #d8{flex-wrap: wrap;}
  .d9{ width:48%;}
}
@media screen and (max-width: 920px) {
  .d{display: block;position: absolute;z-index: 1;top: 22%;}
  #i0, #s3{position: relative;z-index: 2;}
  .i2{display: block;position: relative;z-index: 2;}
  #u2{flex-direction: column;}
  .n{top: 0;left: 0;position: absolute;background: rgba(255, 255, 255, 0.20);backdrop-filter: blur(8px);width: 100%;height: 100vh;display: flex;justify-content: center;align-items: center;margin-left: -120%;transition: all 0.5s ease;}
  .n.d1{margin-left: 0;position: absolute;z-index: 1;}
}
@media screen and (max-width:750px) {
  h1{font-size:26px;}
  h2{font-size:22px;}
  #d8{flex-wrap: wrap;grid-row-gap: 25px;}
  #in1{width: 100%;}
  .d9 {width: 25%;}
  .d9 {width: 38%;}
  .li{padding: 3px 0;}
  #d12{width: 38%;}
  .d11{flex-wrap: wrap;}
}
@media screen and (max-width:650px) {
  #d10{flex-direction: column;}
  #bt1{width:inherit}
}
@media screen and (max-width:400px) {
  #s1{ display: flex; flex-direction: column; gap:3px; margin:10px 0;}
  #ft{padding: 0;}
  .d4{justify-content: center;}
  #d8{align-items: center;flex-direction: column;text-align: center;grid-row-gap: 20px;}
  .d9{width: 100%;}
  #in1 {width: 85%;}
  #d12 {width: 100%;display: flex;align-items: center;flex-direction: column;}
  .d11{text-align: center;display: block;}
  #d5{flex-wrap: wrap;}
  #d7 {position: relative;top: -20px;}
  #z1h11{font-size: 27px;}
  #d10{flex-direction: row;}
  #bt1{width:120px;}
}
@media screen and (max-width:320px) {
  .w{width:304px; margin:0 8px;}
}