.step{
            font-size: 18px;
            font-weight: 600;
            color: #a0a3a9;
            text-shadow: -1px 0px 1px #0c0c0c;
       }
       .affiliate-item:hover .step{
            font-size: 18px;
            font-weight: 600;
            color: #fff;
            text-shadow: none;
       }
        .section-padding {
            padding-top: 80px;
        }
        @media(max-width:767px){
            .section-padding {
                padding-bottom: 20px;
            }
        }
        .m-bottom-not-30 {
            margin-bottom: -30px;
        }
        .section-header {
            margin-bottom: 55px;
            margin-top: -15px;
        }
        .section-title {
            text-transform: capitalize;
            font-size: 52px;
        }
        .content p {
            font-family: 'Open Sans', sans-serif;
            font-size: 14px;
            color: #000;
        }
        .affiliate-item:hover {
            background-color: #33b5f7;
        }
        .affiliate-item {
            padding: 50px 20px 20px 20px;
            background-color: #ffffff;
            box-shadow: 0 0 15px -2px rgba(0, 0, 0, 0.15);
            border-radius: 10px;
            margin-bottom: 30px;
            margin-top:30px;
            min-height: 345px;
            -webkit-border-radius: 10px;
            -moz-border-radius: 10px;
            -ms-border-radius: 10px;
            -o-border-radius: 10px;
            transition: all 0.3s;
            -webkit-transition: all 0.3s;
            -moz-transition: all 0.3s;
            -ms-transition: all 0.3s;
            -o-transition: all 0.3s;
        }
        .section-header p {
            margin-top: 19px;
            font-family: var(--para-font);
            color: var(--para-color);
            line-height: 1.7;
            font-size: 16px;
        }
        .affiliate-item .icon, .affiliate-content .icon {
            position: relative;
            z-index: 8;
            display: inline-block;
        }
         .affiliate-item .icon::before, .affiliate-content .icon::before {
            position: absolute;
            content: '';
            top: 50%;
            left: 50%;
            width: 90px;
            height: 90px;
            background-color: rgba(51, 181, 247, 0.15);
            border: 1px solid #33b5f7;
            border-radius: 50%;
            -webkit-border-radius: 50%;
            -moz-border-radius: 50%;
            -ms-border-radius: 50%;
            -o-border-radius: 50%;
            transform: translate(-50%, -50%);
            -webkit-transform: translate(-50%, -50%);
            -moz-transform: translate(-50%, -50%);
            -ms-transform: translate(-50%, -50%);
            -o-transform: translate(-50%, -50%);
            transition: all 0.3s;
            -webkit-transition: all 0.3s;
            -moz-transition: all 0.3s;
            -ms-transition: all 0.3s;
            -o-transition: all 0.3s;
            z-index: 9;
        }
         .affiliate-item .icon .icon-inner, .affiliate-content .icon .icon-inner {
            width: 68px;
            height: 68px;
            position: relative;
            z-index: 99;
            display: inline-block;
            text-align: center;
            line-height: 68px;
            background-color: #ffffff;
            box-shadow: 0 0 10px -2px rgba(51, 181, 247, 0.5);
            border-radius: 50%;
            -webkit-border-radius: 50%;
            -moz-border-radius: 50%;
            -ms-border-radius: 50%;
            -o-border-radius: 50%;
            transition: all 0.3s;
            -webkit-transition: all 0.3s;
            -moz-transition: all 0.3s;
            -ms-transition: all 0.3s;
            -o-transition: all 0.3s;
        }
         .affiliate-item .icon::after, .affiliate-content .icon::after {
            position: absolute;
            content: '';
            top: 50%;
            left: 50%;
            width: 108px;
            height: 108px;
            background-color: transparent;
            border: 1px solid #d8f1fd;
            border-radius: 50%;
            -webkit-border-radius: 50%;
            -moz-border-radius: 50%;
            -ms-border-radius: 50%;
            -o-border-radius: 50%;
            transform: translate(-50%, -50%);
            -webkit-transform: translate(-50%, -50%);
            -moz-transform: translate(-50%, -50%);
            -ms-transform: translate(-50%, -50%);
            -o-transform: translate(-50%, -50%);
            transition: all 0.3s;
            -webkit-transition: all 0.3s;
            -moz-transition: all 0.3s;
            -ms-transition: all 0.3s;
            -o-transition: all 0.3s;
            z-index: -10;
        }
         .affiliate-item:hover .icon::before {
            background-color: #ffffff;
            border-color: #ffffff;
        }
         .affiliate-item:hover .icon .icon-inner {
            background-color: #33b5f7;
            color: #ffffff;
            box-shadow: none;
        }
         .affiliate-item .content {
            margin-top: 15px;
        }
         .affiliate-item:hover .icon::after {
            background-color: #71cbf9;
            border-color: #ffffff;
        }
         h4.title {
            color: #010101;
            font-size: 26px;
            font-weight: 300;
            text-transform: uppercase;
            -webkit-animation-delay: 0.1s;
            animation-delay: 0.1s;
            margin-bottom: 25px;
        }
         .affiliate-item:hover .content .title {
            color: #ffffff;
        }
         .affiliate-item:hover .content p {
            color: #fefefe;
        }