.lightTheme{
  --c111:#111;
  --c999:#999;
  --c555:#555;
  --c222:#222;
  --c707879:#707879;
  --c7c8183:#7c8183;
  --c99999962:#a6a6a662;
  --c444:#444;
  --white:#fff;
  --cborderimg:rgba(34, 34, 34, 0.253);
  --nav:rgb(27, 27, 27);
  --cfff:#fff;
  --cform:rgb(233, 236, 239);
}
.darkTheme{
  --c111:rgb(255, 255, 255);
  --c999:#eaeaea;
  --c555:#d0d0d0;
  --c222:#e7e7e7;
  --c707879:#e9e9e9;
  --c7c8183:#dedede;
  --c99999962:#49494991;
  --c444:#bbb;
  --nav:rgb(255, 255, 255);
  --white:#fff;
  --cfff:#212529;
  --cform:rgb(49, 63, 66);
  --cborderimg:rgba(228, 228, 228, 0.253);
}

* {
    /* direction: rtl; */
    font-family:sans-serif;
    /* "Playfair Display", serif */
    box-sizing: border-box;
}

body {
    font-size: 16px;
    margin: 0px;
}

a{
    text-decoration: none !important;
}



::-webkit-scrollbar {
    width: 7px;
}


::-webkit-scrollbar-thumb {
    background:#f0a539;
    border-radius: 20px;
    transition: 0.3s ease all;
  
}
::-webkit-scrollbar-thumb:hover{
  background-color: #f0a4398e;
}

.light-theme::-webkit-scrollbar-thumb {
    border-color: none;
    
}

.dark-theme::-webkit-scrollbar-thumb {
    border-color: none;
    
}

.light-theme::-webkit-scrollbar-track {
    background: var(--c444);
    
}

























/* The switch - the box around the slider */


  

  .hamburger {
    cursor: pointer;
  }
  
  .hamburger input {
    display: none;
  }
  
  .hamburger svg {
    /* The size of the SVG defines the overall size */
    height: 3em;
    /* Define the transition for transforming the SVG */
    transition: transform 600ms cubic-bezier(0.4, 0, 0.2, 1);
  }
  
  .line {
    fill: none;
    stroke:#999 ;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 3;
    transition:stroke 0.2s ease ;
    /* Define the transition for transforming the Stroke */
    transition: stroke-dasharray 600ms cubic-bezier(0.4, 0, 0.2, 1),
                stroke-dashoffset 600ms cubic-bezier(0.4, 0, 0.2, 1);
  }
  .lineClick {
    fill: none;
    stroke: #222;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition:stroke 0.2s ease ;
    stroke-width: 3;
    /* Define the transition for transforming the Stroke */
    transition: stroke-dasharray 600ms cubic-bezier(0.4, 0, 0.2, 1),
                stroke-dashoffset 600ms cubic-bezier(0.4, 0, 0.2, 1);
  }
  
  .line-top-bottom {
    stroke-dasharray: 12 63;
  }
  
  .hamburger input:checked + svg {
    transform: rotate(-45deg);
  }
  
  .hamburger input:checked + svg .line-top-bottom {
    stroke-dasharray: 20 300;
    stroke-dashoffset: -32.42;
  }