:root {
    --color-1: #354155;
    --color-2: #252525;
    --color-3: #bfbfbf;
    --color-4: #00b768;
    --color-0: #0cd17c;
    --color-5: #000000;
    --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: var(--color-5);}
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:var(--color-h1dark); 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:50px; border-top:1px solid #ebebeb;}
#i1{width: 30px;border: 1px solid var(--color-5);}
#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: var(--color-5);
    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;}


  /* theme switch start  */

  /* #z1d101 {
    align-items: center;
    height: 30px;
    display: flex;
    width: 150px;
    justify-content: space-between;
    background-color:  var(--color-0);
    font-family: var(--font-1);
    border-radius: 50px;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    box-shadow: 1px 1px 7px rgba(0, 0, 0, 0.3);
    position: fixed;
    top: 45%;
    left: -35px;
    z-index: 1000;
    transform: rotate(270deg);
  } */

    #z1d101 {
    align-items: center;
    height: 30px;
    display: flex;
    /* width: 150px; */
    width: 70px;
    justify-content: space-between;
    background-color:  var(--color-0);
    font-family: var(--font-1);
    border-radius: 50px;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    box-shadow: 1px 1px 7px rgba(0, 0, 0, 0.3);
    /* position: fixed;
    top: 45%;
    left: -35px; */
    z-index: 1000;
    /* transform: rotate(180deg); */
  }




  .z1d102 {
    color: var(--color-5);
    font-weight: 600;
    font-size: 17px;
    z-index: 1;
    align-items: center;
    display: flex;

  }

  .z1d103 {
    padding-left: 11px;
  }

  .z1d104 {
    padding-right: 11px;
  }

  #switch {
    position: absolute;
    top: 0px;
    left: 0px;
    height: 30px;
    width: 85px;
    background-color: white;
    border-radius: 50px;
    transition: all 0.3s ease;
  }

  .z1i101 {
    width: 17px;
    padding-left: 3px;
    padding-top: 2px;
  }

  .z1i102 {
    width: 18px;
    padding-left: 6px;
    padding-top: 2px;
  }

  body.dark-theme {
    --color-1: #fff;
    --color-5: #fff;
    --color-h1dark:#fff;
  }

  body.light-theme {
    background-color: #ffffff;
    color: #000000;
  }

  body.dark-theme {
      background-color: #333333ff;
      color: #ffffff;
  }
  body.dark-theme {
    background: radial-gradient(circle, #1a1a1a, #3b3b3b);
  }

  .dark-theme .i1{
    filter: invert(1);
  }
  .dark-theme .i4{
    filter: invert(1);
  }
  .dark-theme #bt1{
    background-color: #333333ff;
  }
  .dark-theme #in1{
    color: #fff;
  }

  .dark-theme #i1{
    filter: invert(1);
    border: 1px solid #000;
  }

  /* theme switch end */

      .vertical-separator {
      height: 25px;
      width: 1px;
      background-color: grey;
      margin-left: 5px;
    }



    /* Style for the dropdown container */
.dropdown {
    position: relative;
    display: inline-block;
}

/* Hidden by default */
.dropdown-menu {
    display: none;
    position: absolute;
    background-color: #f1f1f1;
    /* min-width: 270px; */
    min-width: 310px;
    box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2);
    z-index: 1;
    border-radius: 5px;
}

/* Style for the anchor tags inside the dropdown */
.dropdown-menu a {
    color: var(--color-h1dark);
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

/* Change color of links on hover */
.dropdown-menu a:hover {
    background-color: #ddd;
    background: radial-gradient(circle, #555454, #3b3b3b);
}

.dropdown-menu a:first-child:hover {
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

.dropdown-menu a:last-child:hover {
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}


/* Show the dropdown menu when hovering over the Services span */
/* .dropdown:hover .dropdown-menu {
    display: block;
} */

.a2222:hover{
  color: var(--color-0);
}


.dark-theme .dropdown-menu{
  background: radial-gradient(circle, #1a1a1a, #3b3b3b);
}

.dark-theme .dropdown-menu a{
  color: #fff;
}

.dark-theme .dropdown-menu a:hover{
  background: radial-gradient(circle, #1a1a1a, #3b3b3b);
}

.dark-theme .a2222:hover{
  color: var(--color-0);
}

#_5{padding-right: 0;}

#arrow{width: 20px;}

/* #arrow {
    width: 16px; 
    margin-left: 5px;
    transform: none !important;
    -webkit-transform: none !important;
    -moz-transform: none !important;
    -ms-transform: none !important;
    -o-transform: none !important;
} */

/* #arrow {
  transform: rotate(0deg);
  transition: transform 0.3s ease; 
} */

/* On hover */
#services-text:hover #arrow {
  transform: rotate(180deg);
}

.dropdown:hover #arrow {
  transform: rotate(180deg);
}

.dropdown:hover .dropdown-menu {
  display: block;
}

.dropdown-menu {
  z-index:100;


  display: none;
}











/* meadia query */
@media screen and (max-width:1280px) {
    .w{width:96%; margin:0 2%;}
}
/* 940px before=> Adjusted to 990px  */
@media screen and (max-width: 1010px) {
  .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; */
    top:56px;
    left: 0;
    position: absolute;
    /* background: rgba(255, 255, 255, 0.20);
    backdrop-filter: blur(8px); */

    background: rgba(255, 255, 255, 0.5); /* Simplified for testing */
    -webkit-backdrop-filter: blur(8px);
    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;}
  #arrow{margin-bottom: 3px;}
  .dropdown-menu{right: -92px;}
 .dark-theme #arrow{filter: none;}
}

@media screen and (max-width: 990px) {
  #d8{flex-wrap: wrap;}
  .d9{ width:48%;}
}

@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: 47%;text-align: center;}
  .li{padding: 3px 0;}
  #d12{width: 50%;display: flex;flex-direction: column;align-items: center;}
  .d11{flex-wrap: wrap;}
}
@media screen and (max-width:650px) {
  #d10{flex-direction: column;}
  #bt1{width:inherit}
  #d14{margin: 20px 0;}
  #d10{gap: 10px;}
  #d6{margin-bottom: 12px;}
}
/* @media screen and (max-width:500px){

} */
@media screen and (max-width:500px) {
  #s1{ display: flex; flex-direction: column; gap:3px; margin:10px 0;}
  #ft{padding: 0;margin-top: 0;}
  .d4{justify-content: center;}
  #d8{align-items: center;flex-direction: column;text-align: center;grid-row-gap: 0px;}
  .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;}
  #d14{width: 100%;justify-content: center;}
  .a194{padding: 10px 5px;}

}
@media screen and (max-width:320px) {
  .w{width:304px; margin:0 8px;}
}