@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap');

/* Globle Css */
*{box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box;}
*{margin: 0}
.wheelspoke-main{font-family: Poppins; line-height: normal;}

/* Popup */
.wheel-spoke-popup { width: 100%; height: 100%; background: rgba(0, 0, 0, 0.4); display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; font-family: 'Poppins', sans-serif; z-index: 1111111;}
.wheel-spoke-popup .wheel-spoke-popup-content{ width: 90%; max-width: 1000px; padding: 50px 20px; position: relative; top: 50%; left: 50%; transform: translate(-50%, -50%); box-shadow: 0 0 60px -35px #000; border-radius: 20px;}
.wheel-spoke-popup .wheel-spoke-popup-content .content-one{overflow: auto; max-height: 75vh; padding: 0 30px;}
.wheel-spoke-popup .wheel-spoke-popup-content .close { position: absolute; right: 20px; top: 20px; width: 20px; display: block; }
.wheel-spoke-popup .wheel-spoke-popup-content .close span { cursor: pointer; position: fixed; width: 20px; height: 3px; background: #000; }
.wheel-spoke-popup .wheel-spoke-popup-content .close span:nth-child(1) { transform: rotate(45deg); }
.wheel-spoke-popup .wheel-spoke-popup-content .close span:nth-child(2) { transform: rotate(135deg); }
.wheel-spoke-popup .wheel-spoke-popup-content h2 { font-size: 30px; font-weight: 700; margin: 0 0 30px; padding: 0 0; color: #000;}
.wheel-spoke-popup .wheel-spoke-popup-content h2:after{ content: ''; display: table; width: 100%; height: 2px; background: #ddd; margin: 10px 0 0;}
.wheel-spoke-popup .wheel-spoke-popup-content p{font-size: 16px; color: #000;}
.wheel-spoke-popup .wheel-spoke-popup-content p + p{margin: 20px 0 0;}

/* Color wise Popup Css */
.wheel-spoke-popup.default_color_apply .wheel-spoke-popup-content{background: #fff;}
.wheel-spoke-popup.item_color_apply .wheel-spoke-popup-content h2{ color: #fff;}
.wheel-spoke-popup.item_color_apply .wheel-spoke-popup-content h2:after{ opacity: 0.5;}
.wheel-spoke-popup.item_color_apply .wheel-spoke-popup-content p{ color: #fff;}
.wheel-spoke-popup.item_color_apply .wheel-spoke-popup-content .close span{background: #fff;}


/* width */
.wheel-spoke-popup .wheel-spoke-popup-content .content-one::-webkit-scrollbar {
    width: 10px;
  }
  
  /* Track */
  .wheel-spoke-popup .wheel-spoke-popup-content .content-one::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px grey; 
    border-radius: 10px;
  }
   
  /* Handle */
  .wheel-spoke-popup .wheel-spoke-popup-content .content-one::-webkit-scrollbar-thumb {
    background: #0000007e; 
    border-radius: 10px;
  }
  
  /* Handle on hover */
  .wheel-spoke-popup .wheel-spoke-popup-content .content-one::-webkit-scrollbar-thumb:hover {
    background: #000000ad; 
  }


/* Responsive */
@media (max-width:999px) {
  /* Popup */
  .wheel-spoke-popup .wheel-spoke-popup-content{padding: 30px;}
  .wheel-spoke-popup .wheel-spoke-popup-content h2{font-size: 26px; margin: 0 0 20px;}
  .wheel-spoke-popup .wheel-spoke-popup-content p { font-size: 14px; }
}
@media (max-width:767px) {
  /* Popup */
  .wheel-spoke-popup .wheel-spoke-popup-content{padding: 40px 20px 20px;}
  .wheel-spoke-popup .wheel-spoke-popup-content h2{font-size: 20px; margin: 0 0 16px;}
  .wheel-spoke-popup .wheel-spoke-popup-content p { font-size: 13px; }
}
@media (max-width:480px) {
  /* Popup */
  .wheel-spoke-popup .wheel-spoke-popup-content{padding: 40px 15px 15px;}
  .wheel-spoke-popup .wheel-spoke-popup-content h2{font-size: 18px; margin: 0 0 12px;}
  .wheel-spoke-popup .wheel-spoke-popup-content p { font-size: 12px; }
}