/*light to dark Seagreenish */
@media only screen and (max-width: 1600px) {    
         .btn-grad-seagreenish {background-image: linear-gradient(to right, #00bf8f 0%, #001510  51%, #00bf8f  100%)}
         .btn-grad-seagreenish {
            margin: 10px;
            padding: 15px 45px;
            text-align: center;
            text-transform: uppercase;
            transition: 0.5s;
            background-size: 200% auto;
            color: white;            
            box-shadow: 0 0 20px #eee;
            border-radius: 10px;
            display: block;
            font-size: font-size:3vw 
          }

          .btn-grad-seagreenish:hover {
            background-position: right center; /* change the direction of the change here */
            color: #fff;
            text-decoration: none;
          }
    }
@media only screen and (max-width: 600px) {    
         .btn-grad {background-image: linear-gradient(to right, #00bf8f 0%, #001510  51%, #00bf8f  100%)}
         .btn-grad {
            margin: 10px;
            padding: 15px 45px;
            text-align: center;
            text-transform: uppercase;
            transition: 0.5s;
            background-size: 200% auto;
            color: white;            
            box-shadow: 0 0 20px #eee;
            border-radius: 10px;
            display: block;
            font-size:8vw 
          }

          .btn-grad:hover {
            background-position: right center; /* change the direction of the change here */
            color: #fff;
            text-decoration: none;
          }

    }

/*light to dark blue*/
         .btn-grad-dblue {background-image: linear-gradient(to right, #0575E6 0%, #021B79  51%, #0575E6  100%)}
         .btn-grad-dblue {
            margin: 10px;
            padding: 15px 45px;
            text-align: center;
            text-transform: uppercase;
            transition: 0.5s;
            background-size: 200% auto;
            color: white;            
            box-shadow: 0 0 20px #eee;
            border-radius: 10px;
            display: block;
          }

          .btn-grad-dblue:hover {
            background-position: right center; /* change the direction of the change here */
            color: #fff;
            text-decoration: none;
          }
        
    
/*purple*/

         .btn-grad_purple {background-image: linear-gradient(to right, #20002c 0%, #cbb4d4  51%, #20002c  100%)}
         .btn-grad_purple {
            margin: 10px;
            padding: 15px 45px;
            text-align: center;
            text-transform: uppercase;
            transition: 0.5s;
            background-size: 200% auto;
            color: white;            
            box-shadow: 0 0 20px #eee;
            border-radius: 10px;
            display: block;
          }

          .btn-grad_purple:hover {
            background-position: right center; /* change the direction of the change here */
            color: #fff;
            text-decoration: none;
          }
/*Dark red (surmai rang)*/         

         .btn-grad-dred {background-image: linear-gradient(to right, #200122 0%, #6f0000  51%, #200122  100%)}
         .btn-grad-dred {
            margin: 10px;
            padding: 15px 45px;
            text-align: center;
            text-transform: uppercase;
            transition: 0.5s;
            background-size: 200% auto;
            color: white;            
            box-shadow: 0 0 20px #eee;
            border-radius: 10px;
            display: block;
          }

          .btn-grad-dred:hover {
            background-position: right center; /* change the direction of the change here */
            color: #fff;
            text-decoration: none;
          }
         

/* gradient green */

         .btn-grad-green {background-image: linear-gradient(to right, #52c234 0%, #061700  51%, #52c234  80%)}
         .btn-grad-green {
            margin: 10px;
            padding: 15px 45px;
            text-align: center;
            text-transform: uppercase;
            transition: 0.5s;
            background-size: 200% auto;
            color: white;            
            box-shadow: 0 0 20px #eee;
            border-radius: 10px;
            display: block;
	    width:99.35%
          }

          .btn-grad-green:hover {
            background-position: right center; /* change the direction of the change here */
            color: #fff;
            text-decoration: none;
          }

/* simple green */

         .btn-green {background-color: green}
         .btn-green {
            margin: 10px;
            padding: 15px 45px;
            text-align: center;
            text-transform: uppercase;
            transition: 0.5s;
            background-size: 200% auto;
            color: white;            
            box-shadow: 0 0 20px #eee;
            border-radius: 10px;
            display: block;
	    width:99.35%
          }

          .btn-green:hover {
            background-position: right center; /* change the direction of the change here */
            color: #fff;
            text-decoration: none;
          }