.plans {
    overflow: hidden;
}
.plans .container {
    justify-content: space-between;
    padding: 100px 0;
}
.plans .container .box {
    width: 30.3%;
    height: 477px;
    position: relative;
    box-shadow: -10px 40px 30px 10px black;
}

.plans .container .box::before {
    content: '';
    position: absolute;
    left: -19px;
    top: 0;
    clip-path: polygon(0 0, 100% 0, 100% 37%, 0 40%);
    background-color: var(--secondary-color);
    width: 103%;
    height: 1300px;
    z-index: 99;
}
.plans .container .box::after {
    content: '';
    position: absolute;
    left: 0;
    top: -19px;
    width: 100%;
    height: 1300px;
    clip-path: polygon(0 2%, 100% 0, 100% 41%, 0 40%);
    background-color:  var(--primary-color);
;
}
.plans .container .box .content {
    width: 80%;
    color: white;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: absolute;
    left: 45%;
    top: 52%;
    transform: translate(-50%, -50%);
    z-index: 99;
}
.plans .container .box .content .icon img {
    width: 50px;
    margin-bottom: 15px;
}
.plans .container .box .content h3 {
    width: 100%;
    border-bottom: 1px solid white;
    padding-bottom: 20px;
    font-weight: 100;
    font-size: 40px;
    font-style: normal;
    line-height: 2ch;
    text-align: center;
}
.plans .container .box .content h3 span {
    background-color:   var(--primary-color);;
    color: var(--tex-color);
    
    padding: 2px 47px 0 47px;
    font-size: 18px;
    font-style:normal;
}
.plans .container .box .content ul {
    width: 100%;
    font-family: "Kurale", serif;
    line-height: 2.8ch;
    font-size: 15px;
    color: var(--tex-color);
    margin: 9px 0 33px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.164);
    padding: 15px 0 18px 20px;
}
.plans .container .box .content ul li {
    list-style:circle;
}
.plans .box:nth-child(2) .content button {
    background-color:  var(--primary-color);
;
    color:  rgb(255, 255, 255);
}
.plans .container .box .content button {
    position: relative;
    padding: 10px 25px;
    overflow: hidden;
}
.plans .container .box .content button a {
    padding: 0;
    z-index: 99999;
    position: relative;
    background-color: transparent;
    color: rgb(34, 34, 34);
    transition: .5s;
}
.plans .container .box .content button a i {
    color: rgb(34, 34, 34);
}
.plans .box:nth-child(2) .content button a {
    color: white;
}
.plans .container .box .content button::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color:  var(--primary-color);
;
    transform: translateX(-100%);
    transition: .5s;
}
.plans .box:nth-child(2) .content button::before{    
    background-color: white;
}
.plans .container .box .content button i {
    color:  var(--primary-color);
;
    margin-left: 7px;
    font-size: 13px;
}
.plans .container .box .content button:hover::before {
    transform: translateX(0%);
}
.plans .container .box .content button:hover a, 
.plans .container .box .content button:hover i {
    color: white;
}
.plans .box:nth-child(2) .content button:hover a,
.plans .box:nth-child(2) .content button:hover i {
    color:  var(--primary-color);
;
}

@media (max-width: 1200px) { 
    .plans .container {
        width: 1000px;
    }
}
@media (max-width: 1000px) { 
    .plans .container {
        width: 800px;
    }
}
@media (max-width: 900px) {
    .plans .container {
        width: 90%;
        margin: auto;
    }
    .plans .container .box {
        width: 100%;
        margin-bottom: 130px;
    }
    .plans .container .box:nth-child(3) {
        margin-bottom: 0;
    }
    .plans .container .box::before {
        left: -.3px;
        width: 97%;
    }
    .plans .container .box .content ul li {
        font-size: 17px;
    }
    .plans .container .box .content .icon img {
        margin-bottom: 37px;
    }
}