@import "./base.css";
@import "./container.css";

.title{
    text-align:center;
    font-size:30px;
    font-weight:800;
}

.sub-title{
    text-align:center;
    font-size:25px;
    font-weight:600;
}

.cards{
    display:flex;
    justify-content:space-around;
    align-items:center;
    gap:20px
}

.card{
    position:relative;
    width:200x;
    height:350px;
    border: 2px solid black;
    border-top:10px solid rgba(199, 55, 86);
    border-radius: 8px;
}

.professional{
    border-top:10px solid rgba(215, 145, 59);
}

.standart{
    border-top:10px solid rgba(43, 102, 137);
}

.basic{
    border-top:10px solid rgba(99, 187, 52);
}

.line::before{
    content:'';
    display:inline-block;
    width:100%;
    height:5px;
    background-color:rgba(199, 55, 86);
}

.line_prof{content:'';
    display:inline-block;
    width:100%;
    height:5px;
    background-color: rgba(215, 145, 59);
}

.line_stand{
    display:inline-block;
    width:100%;
    height:5px;
    background-color:rgba(43, 102, 137) ;
}

.line_bas{
    display:inline-block;
    width:100%;
    height:5px;
    background-color: rgba(99, 187, 52);
}

.card_title{
    text-align: center;
    font-weight:550;
}

.price{
    text-align:center;
    font-size:45px;
    font-weight:600;
    margin:5px auto;
}

.per-month{
    text-align: center;
    color:lightgrey;
    margin-top:0;
    font-weight:600;
}

.inner-text_list{
    padding:0;
}

.main_description{
    text-align: center;
    font-size: 15px;
    font-weight: 600;
    margin:10px 15px;
}

.buy_button{
    padding:0;
    position:absolute;
    width:100px;
    height:35px;
    left:25%;
    top:86%;
    background-color: rgba(199, 55, 86);
    border:none;
    border-radius: 8px;
    transition: background-color 0.4s ease-out;
    transition: transform 0.4s ease-out;
}

.profik{
    background-color: rgba(215, 145, 59);
}

.stand{
    background-color:rgba(43, 102, 137) ;
}

.bas{
    background-color: rgba(99, 187, 52);
}

.buy_button:hover{
    transform:scale(1.05);
    background-color: rgb(145, 41, 64);
}

.profik:hover{
    background-color: rgb(145, 99, 43);
}

.stand:hover{
    background-color:rgb(21, 53, 71) ;
}

.bas:hover{
    transform:scale(1.05);
    background-color: rgb(75, 141, 39);
}

@media(max-width:600px){
    .cards{
        flex-direction:column;
    }
}