.custom-select {
    min-width: 350px;
    position: relative;
  }
  
  select {
    appearance: none;
    /*  safari  */
    -webkit-appearance: none;
    /*  other styles for aesthetics */
    width: 100%;
    font-size: 1.15rem;
    padding: 0.675em 10em 0.675em 2em;
    background-color: var(--bodycolor);
    border: var(--border);
    border-radius: 0.25rem;
    color: var(--primarytextcolor);
    cursor: pointer;
  }
  
  .custom-select::before,
  .custom-select::after {
    --size: 0.3rem;
    content: "";
    position: absolute;
    right: 1rem;
    pointer-events: none;
  }
  
  .custom-select::before {
    border-left: var(--size) solid transparent;
    border-right: var(--size) solid transparent;
    border-bottom: var(--size) solid rgb(255, 255, 255);
    top: 40%;
  }
  
  .custom-select::after {
    border-left: var(--size) solid transparent;
    border-right: var(--size) solid transparent;
    border-top: var(--size) solid rgb(255, 255, 255);
    top: 55%;
  }
 
  
  
  /*=============
  Aesthetics 
  =========================*/
  
  * {
    box-sizing: border-box;
  }
  
  /* body {
    min-height: 100vh;
    display: grid;
    place-items: center;
  } */

  /* Top Menu for Desktop */

  .menu-top-container{
    display: flex;
    align-items: center;
    width: 70%;
    justify-content: flex-end;
  }
 
  .dd-dropbtn {
    background-color:var(--bodycolor);
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
    border: 2px solid var(--bodycolor);
    font-size: 17px;
      line-height: 21px;
  
      font-family: Rajdhani, sans-serif;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: .12em;
  
  }
  .dd-dropbtn1 {
    background-color: var(--bodycolor);
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
    border: 2px solid var(--bodycolor);
  
  }
  
  .dd-menu {
    position: relative;
    display: inline-block;
    border-left:2px solid var(--bodycolor) ;
    
  } 
  
  .dd-w1{
    width: calc(var(--mspa-width) - 240px) ;

  }

  .dd-w2{
    width: calc(var(--mspa-width) - 230px) ;

  }

  .dd-w3{
    width: calc(var(--mspa-width) - 170px);

  }

  .dd-w4{
    width: calc(var(--mspa-width) - 190px) ;

  }

  .dd-w5{
    width: calc(var(--mspa-width) - 290px) ;

  }

  
  .dd-w6{
    width: calc(var(--mspa-width) - 240px) ;

  }
  .dd-w7{
    width: calc(var(--mspa-width) - 280px) ;

  }
  .dd-w8{
    width: calc(var(--mspa-width) - 134px) ;

  }
  .dd-w9{
    width: calc(var(--mspa-width) - 175px) ;

  }

  .marfaq{
    margin: 0 0 0 30px;
  }
  .marhub{
    margin: 0 -10px 0 30px;
  }
  
  .dd-menu-content {
    display: none;
    position: absolute;
    background-color: var(--bodycolor);
    min-width:calc(var(--mspa-width) - 30px) ;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
    transition: all 10s ease-out;
    height:0;
    top: 50px;
    font-size: 17px;
      line-height: 21px;
      color: #fff;
      font-family: Rajdhani, sans-serif;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: .12em;
      transform: translate(-2px, 0px);
      border: 1px solid #282828;
      border-top: 2px solid var(--seconddarycolor);
      padding: 25px 0;
  }
  .dd-menu-left-dropdown{
    left: -235px;
  }
  .dd-menu-right-dropdown{
    left: 0;
  }
  
  .dd-menu-content a {
      color: #fff;
      padding: 12px 16px;
      text-decoration: none;
      background-color: var(--bodycolor);
      display: block;
      border: 0;
      transition: all 1s ease;
      width: 80%;
      font-family: Rajdhani, sans-serif;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: .12em;
  }
  
  .dd-menu-content a:hover {
    color: var(--seconddarycolor);
    transform: translateX(20px);
  
  }
  
  
  
  
  .dd-menu:hover .dd-menu-content {
    display: block;
    height:auto; 
    transition: all 10s ease-out;}
  
  
  .borderonhover{
    border: 2px solid var(--bodycolor);
  }
  .borderonhover:hover{
    border-left: 2px solid var(--seconddarycolor);
    
  }
    .but-cont{
      position: relative;
 
      height: 50px;
      
    }
    .disp-svg{
      justify-content: center;
    display: flex;
    width: 100%;
    align-items: center;
    }

    .but-cont svg{
      fill: currentColor;
    
    }
    .dd-w6:hover .but-cont svg{
      fill: var(--seconddarycolor);
    }
    .s1, 
    .s2{
      position: absolute;
      text-align: center;
      text-transform: uppercase;
      left: 6%;
      font-family: var(--primaryfont);
      font-size: 17px;
      line-height: 21px;
      color: #fff;
      font-family: Rajdhani, sans-serif;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: .12em;
    }
    .s1
    {
      -webkit-clip-path: inset(0 0 46% 0);
      clip-path: inset(0 0 46% 0);
      -webkit-transform: translateX(-3%) translateY(-3%);
      -moz-transform: translateX(-3%) translateY(-3%);
      transform: translateX(-3%) translateY(-3%);
      background: transparent;
      border: 0;
    }
    .s2{
      left: 6%;
      opacity: 1;
      color: #fff;
      -webkit-transition: -webkit-clip-path .2s, -webkit-transform .2s cubic-bezier(.86,0,.07,1), opacity .2s;
      transition: clip-path .2s, transform .2s cubic-bezier(.86,0,.07,1), opacity .2s;
      -webkit-clip-path: inset(49% 0 0 0);
      clip-path: inset(49% 0 0 0);
      /* -webkit-transform: translateY(3%); */
      -moz-transform: translateY(3%);
      transform: translate(-3%, -2%);
      opacity: 1;
      z-index: 2;
      background: transparent;
      border: 0;
      transition: all .3s ease;
      font-family: var(--primaryfont);
      /* -webkit-transition: -webkit-clip-path .2s, -webkit-transform .2s cubic-bezier(.86,0,.07,1); 
        transition: clip-path .2s, transform .2s cubic-bezier(.86,0,.07,1);*/
    }
  
    .dd-menu:hover .s1{
      color: var(--seconddarycolor);
      transform: translate(-2%, -2px);
      background: transparent;
    }
    .dd-menu:hover .s2{
      color: var(--seconddarycolor);
      transform: translate(.1%, 5%);
      -webkit-clip-path: inset(49% 0 0 0);
      clip-path: inset(49% 0 0 0);
      background: transparent;
  }
  
  /* blinking cursoler  */
  
  .blinking-cursor {
    display: none;
    font-weight: 100;
    font-size: 30px;
    color: #2E3D48;
    -webkit-animation: 1s blink step-end infinite;
    -moz-animation: 1s blink step-end infinite;
    -ms-animation: 1s blink step-end infinite;
    -o-animation: 1s blink step-end infinite;
    animation: 1s blink step-end infinite;
    position: absolute;
      left: 0;
  }
  .dd-menu-content a:hover .blinking-cursor {
    display: block;}
  
  
  @keyframes blink {
    from, to {
      color: transparent;
    }
    50% {
      color: var(--seconddarycolor);
    }
  }
  
  @-moz-keyframes blink {
    from, to {
      color: transparent;
    }
    50% {
      color: var(--seconddarycolor);
    }
  }
  
  @-webkit-keyframes blink {
    from, to {
      color: transparent;
    }
    50% {
      color:var(--seconddarycolor);
    }
  }
  
  @-ms-keyframes blink {
    from, to {
      color: transparent;
    }
    50% {
      color: var(--seconddarycolor);
    }
  }
  
  @-o-keyframes blink {
    from, to {
      color: transparent;
    }
    50% {
      color: var(--seconddarycolor);
    }
  }
  
  @media screen and (max-width:1000px){
    .menu-top-container{
      display: none;
    }
  }
  .cart-icon::after {
    content: '\1F6D2'; /* Unicode character for cart icon */
    font-size: 20px;
    margin-left: 5px;
  }

  .cart-icon:hover .cart-icon::after{
    color: var(--seconddarycolor);
  }

  @media screen and (max-width:590px)
{

    .dd-w1 {
        width: calc(var(--mspa-width) - 185px);
    }
    .dd-w2 {
      width: calc(var(--mspa-width) - 213px);
  }
    .dd-w3 {
      width: calc(var(--mspa-width) - 150px);
  }
    .dd-w7 {
      width: calc(var(--mspa-width) - 245px);
  }
  .dd-w9 {
    width: calc(var(--mspa-width) - 194px);
}.dd-w8 {
  width: calc(var(--mspa-width) - 107px);
}
}