.comparison-container {
    background: #fff;
    border-radius: 40px;
    border-radius: clamp(2.5rem, 1.2735849056rem + 2.8301886793vw, 5rem);
    box-shadow: 0 5px 24px 0 rgba(0, 0, 0, .2);
    margin-top: 30px;
    padding: 29px 15px;
    width: 100%
}

.comparison-card {
    flex-direction: column;
    gap: clamp(.25rem, .0521816038rem + .6367924528vw, .8125rem)
}

.col,
.comparison-card {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex
}

.col {
    align-items: center;
    color: #1d1d1d;
    flex: 1;
    flex-direction: column;
    font-size: clamp(.6875rem, .2299528302rem + 1.3443396227vw, 1.875rem);
    font-weight: 500;
    justify-content: center;
    padding: clamp(.1875rem, -.1149764151rem + 1.2028301887vw, 1.25rem);
    text-align: center
}

.col.feature {
    align-items: flex-start;
    flex: 1.2;
    font-weight: 700;
    text-align: left
}

.table-header {
    background: linear-gradient(192deg, #0dbb36, #3a7448);
    border-radius: 20px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin-bottom: 5px;
    padding: 15px 10px
}

.table-header .col {
    color: #fff;
    font-size: clamp(.6875rem, .2299528302rem + 1.3443396227vw, 1.875rem);
    font-weight: 700
}

.table-row {
    background-color: #fff;
    border-radius: 20px;
    box-shadow: 0 10px 18px 0 rgba(0, 0, 0, .1);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    min-height: clamp(4.0625rem, 2.3702830189rem + 3.1839622642vw, 6.875rem);
    padding: 0 5px;
    transition: transform .2s
}

.table-row:hover {
    transform: translateY(-2px)
}

.table-row .sub-text {
    color: #4a4a4a;
    font-size: clamp(.6875rem, .2299528302rem + 1.3443396227vw, 1.875rem);
    margin-top: 4px
}

.icon {
    display: inline-block;
    height: 24px;
    position: relative;
    width: 24px
}

.icon.check {
    background-color: #0dbb36;
    border-radius: 4px
}

.icon.check:after {
    border: solid #fff;
    border-width: 0 2.5px 2.5px 0;
    content: "";
    height: 11px;
    left: 8px;
    position: absolute;
    top: 4px;
    transform: rotate(45deg);
    width: 6px
}

.icon.cross:after,
.icon.cross:before {
    background-color: #d93025;
    content: "";
    height: 20px;
    left: 11px;
    position: absolute;
    top: 2px;
    width: 3.5px
}

.icon.cross:before {
    transform: rotate(45deg)
}

.icon.cross:after {
    transform: rotate(-45deg)
}

.icon.warning {
    border-bottom: 21px solid #f9ab00;
    border-left: 12px solid transparent;
    border-right: 12px solid transparent;
    height: 0;
    width: 0
}

.icon.warning:after {
    color: #fff;
    content: "!";
    font-size: clamp(.6875rem, .2299528302rem + 1.3443396227vw, 1.875rem);
    font-weight: 900;
    left: -2px;
    position: absolute;
    top: 4px
}

@media(min-width:1024px) {
    .comparison-container {
        margin-top: 60px;
        padding: 35px 80px
    }
}