/* 
    =====================
    This is the css file for how_to_sell page(in the root folder).
    ====================== 
*/

 body {
     /* Pushes content down so it doesn't hide behind the navbar */
     padding-top: 80px;
     background-color: #102d19 !important;
 }

 .sell-hero {
     background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)),
         url('https://images.unsplash.com/photo-1533900298318-6b8da08a523e?auto=format&fit=crop&q=80&w=2070');
     background-size: cover;
     background-position: center;
     color: white;
     padding: 80px 0;
     text-align: center;
 }

 .cursor-pointer {
     cursor: help;
     transition: opacity 0.3s;
 }

 .cursor-pointer:hover {
     opacity: 0.8;
 }



 /* typing text */
 .typing-container {
     font-size: 1.25rem;
     font-weight: 600;
     color: #ffc107;
 }

 .input-cursor {
     display: inline-block;
     width: 2px;
     margin-left: 4px;
     color: green !important;
     animation: blink 0.8s steps(2, start) infinite;
 }

 @keyframes blink {

     0%,
     100% {
         opacity: 1;
     }

     50% {
         opacity: 0;
     }
 }


 /* step card  */
 .step-card {
     background: rgba(128, 128, 128, 0.361);
     border: none;
     padding: 30px 20px;
     height: 100%;
     transition: transform 0.3s ease;
     position: relative;
 }



 .step-card:hover {
     transform: translateY(-2px);
 }

 .step-number {
     position: absolute;
     top: -20px;
     left: 50%;
     transform: translateX(-50%);
     width: 50px;
     height: 50px;
     background: #ffc107;


     color: #000;
     font-weight: bold;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 20px;
     border: 5px solid green;
 }

 /* step icon  */
 .step-icon {
     font-size: 3rem;
     margin-bottom: 20px;
 }

 .step-icon i {
     background: linear-gradient(180deg, #ffc107, #ffffff, #198754, #ffc107);

     background-size: 100% 300%;

     -webkit-background-clip: text;
     background-clip: text;

     -webkit-text-fill-color: transparent;
     text-fill-color: transparent;
     animation: iconGradientShift 10s linear infinite;

     transform: translateZ(0);

     -webkit-box-reflect: below 0px linear-gradient(transparent, rgba(0, 0, 0, 0.2)) !important;
     margin-bottom: 30px !important;
 }

 @keyframes iconGradientShift {
     0% {
         background-position: 50% 0%;
     }

     100% {
         background-position: 50% 300%;
     }
 }

 .pro-tip-box {
     background: #fff3cd;
     border-left: 5px solid #ffc107;
     padding: 20px;
     border-radius: 10px;
 }