svg.product,
svg.enterprise,
svg.startup,
svg.dedicated{
    width: 100%;
    height: 120px;
    fill: none;
    stroke: #fff;
    stroke-miterlimit: 10;
    stroke-width: 25px;
    padding: 20px;
}

.banner_wrap {
    z-index: 1;
    width: 500px;
    position: relative;
    padding: 100px 0;
}

.banner_data {
    position: absolute;
    width: 100%;
}

.square_outer {
    /*    perspective: 80px;*/
    -webkit-perspective: 150px;
    perspective: 150px;
    -webkit-transform: skew(-0.06turn, 0deg);
    transform: skew(-0.06turn, 0deg);
}

.square_wrap {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-transform: rotateX(8deg);
    transform: rotateX(8deg);
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.square {
    width: 150px;
    height: 120px;
    background-color: rgba(0, 0, 0, 0.2);
    margin: 10px;
    -webkit-transition: all 0.7s;
    transition: all 0.7s;
    cursor: pointer;
    background: #e6385b;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    background-position: 0 0, 100% 0;
    background-repeat: no-repeat;
    background-size: 1px 100%;
    display: table;
}

.square i {
    display: table-cell;
    vertical-align: middle;
    color: #fff;
    font-size: 10.25vh;
    text-align: center;
}

.square:nth-child(2n):hover,
.square:nth-child(2n).active {
    -webkit-transform: translate(-10px, -10px) scale(1.1);
    transform: translate(-10px, -10px) scale(1.1);
}

.square:nth-child(2) {
    background: #f1ab19;
    position: relative;
}

.square:nth-child(3) {
    background: #28a745;
}

.square:nth-child(4) {
    background: #17a2b8;
}

.square_info_wrap {
    position: absolute;
    width: 280px;
    top: 0px;
    left: auto;
    right: -240px;
    opacity: 0;
    -webkit-transition: all 0.7s;
    transition: all 0.7s;
    -webkit-transform: translateY(10px);
    transform: translateY(10px);
}

.outer_wrapper:nth-child(2) .square_info_wrap {
    top: 10px;
}

.outer_wrapper:nth-child(3) .square_info_wrap {
    top: 130px;
}

.outer_wrapper:nth-child(4) .square_info_wrap {
    top: 130px;
}

.square_info_wrap.active {
    z-index: 1;
    opacity: 1;
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
}

.outer_wrapper:nth-child(1) h4,
.outer_wrapper:nth-child(2) h4,
.outer_wrapper:nth-child(3) h4,
.outer_wrapper:nth-child(4) h4 {
    font-weight: 700;
    font-size: 1.32rem;
}

.outer_wrapper:nth-child(1) h4 {
    color: #e6385b;
}

.outer_wrapper:nth-child(2) h4 {
    color: #f1ab19;
}

.outer_wrapper:nth-child(3) h4 {
    color: #28a745;
}

.outer_wrapper:nth-child(4) h4 {
    color: #17a2b8;
}

.outer_wrapper:nth-child(1) .btn_line,
.outer_wrapper:nth-child(2) .btn_line,
.outer_wrapper:nth-child(3) .btn_line,
.outer_wrapper:nth-child(4) .btn_line {
    border-radius: 0;
    text-transform: capitalize;
    font-weight: 700;
    font-size: 14px;
}

.outer_wrapper:nth-child(1) .btn_line {
    background: #e6385b;
    border-radius: 25px;
    color: #fff;
    padding: 8px 15px 8px;
    font-size: 16px;
}

.outer_wrapper:nth-child(2) .btn_line {
    background: #f1ab19;
    border-radius: 25px;
    color: #fff;
    padding: 8px 15px 8px;
    font-size: 16px;
}

.outer_wrapper:nth-child(3) .btn_line {
    background: #28a745;
    border-radius: 25px;
    color: #fff;
    padding: 8px 15px 8px;
    font-size: 16px;
}

.outer_wrapper:nth-child(4) .btn_line {
    background: #17a2b8;
    border-radius: 25px;
    color: #fff;
    padding: 8px 15px 8px;
    font-size: 16px;
}

.square_info_wrap h4 {
    font-weight: 500 !important;
    font-size: 26px !important
}

.outer_wrapper .square_info_wrap h4:before {
    content: '';
    position: absolute;
    bottom: -7px;
    height: 1px;
    width: 100%;
    border-radius: 0;
    left: -230px;
    top: -15px;
}

.outer_wrapper:nth-child(1) h4:before {
    width: 500px;
    top: -15px;
    background: #e6385b;
    left: -270px;
}

.outer_wrapper:nth-child(1) h4:after {
    background: #e6385b;
    -webkit-transform: rotate(25deg);
    transform: rotate(25deg);
    top: -7px;
    margin-top: -10px;
    left: -281px;
    height: 50px;
}

.outer_wrapper:nth-child(2) h4:before {
    left: -120px;
    width: 350px;
    background: #f1ab19;
    top: -15px;
}

.outer_wrapper:nth-child(3) h4:before {
    top: 220px;
    width: 700px;
    background: #28a745;
    left: -440px;
}

.outer_wrapper:nth-child(3) h4:after {
    top: 186px;
    width: 100px;
    background: #28a745;
    left: -467px;
    height: 1px;
    -webkit-transform: rotate(-62deg);
    transform: rotate(-62deg);
}

.outer_wrapper:nth-child(4) h4:before {
    top: 180px;
    width: 480px;
    background: #17a2b8;
    left: -230px;
}

.outer_wrapper:nth-child(4) h4:after {
    top: 144px;
    width: 100px;
    background: #17a2b8;
    left: -262px;
    height: 1px;
    -webkit-transform: rotate(-68deg);
    transform: rotate(-68deg);
}

.square_info_wrap h4:after {
    content: '';
    position: absolute;
    height: 50px;
    width: 1px;
    background: rgba(255, 255, 255, 0.2);
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    top: -178px;
    margin-top: -10px;
}

.outer_wrapper:nth-child(2) h4:after {
    left: -128px;
    -webkit-transform: rotate(18deg);
    transform: rotate(18deg);
    background: #f1ab19;
    top: -6px;
}

.square_section {
    height: auto;
}

@media (max-width: 1199px) {
    .square_section {
        height: auto;
        -webkit-box-orient: vertical;
        -webkit-box-direction: reverse;
        -ms-flex-direction: column-reverse;
        flex-direction: column-reverse;
        padding: 30px 0;
    }
}

@media (min-width: 992px) {
    .banner_wrap_mob {
        display: none;
    }

    .square {
        -webkit-box-shadow: 0px 12px 8px 0px rgba(0, 0, 0, 0.6);
        box-shadow: 0px 12px 8px 0px rgba(0, 0, 0, 0.6);
    }

    .square:hover,
    .square.active {
        -webkit-transform: translate(-10px, -10px) scale(1.1);
        transform: translate(-10px, -10px) scale(1.1);
        -webkit-box-shadow: 7px 15px 5px 1px rgba(0, 0, 0, 0.25);
        box-shadow: 7px 15px 5px 1px rgba(0, 0, 0, 0.25);
    }
}

@media (max-width: 991px) {
    .banner_wrap {
        display: none;
    }

    .banner_wrap_mob,
    .content-title {
        padding: 50px 0;
    }

    .banner_wrap_mob .outer_wrapper {
        padding: 15px 0;
    }

    .square {
        margin: 20px auto;
    }

    .banner_wrap_mob .square_wrap:nth-child(2) .square {
        background: #f1ab19;
        position: relative;
    }

    .banner_wrap_mob .square_wrap:nth-child(3) .square {
        background: #28a745;
    }

    .banner_wrap_mob .square_wrap:nth-child(4) .square {
        background: #17a2b8;
    }

    .banner_wrap_mob .square_wrap:nth-child(2) h4 {
        color: #f1ab19;
    }

    .banner_wrap_mob .square_wrap:nth-child(3) h4 {
        color: #28a745;
    }

    .banner_wrap_mob .square_wrap:nth-child(4) h4 {
        color: #17a2b8;
    }

    .banner_wrap_mob .square_wrap:nth-child(2) .btn_line {
        background: #f1ab19;
        color: #fff;
    }

    .banner_wrap_mob .square_wrap:nth-child(3) .btn_line {
        background: #28a745;
        color: #fff;
    }

    .banner_wrap_mob .square_wrap:nth-child(4) .btn_line {
        background: #17a2b8;
        color: #fff;
    }
}

@media (max-width: 767px) {

    .banner_wrap_mob,
    .content-title {
        padding: 15px 0;
    }
}