:root{
/* ### Primary */

--Linear-Gradient: hsl(236, 72%, 79%) to hsl(237, 63%, 64%);

/* ### Neutral */


--Very-Light-Grayish-Blue: hsl(240, 78%, 98%);
--Light-Grayish-Blue: hsl(234, 14%, 74%);
--Grayish-Blue: hsl(233, 13%, 49%);
--Dark-Grayish-Blue: hsl(232, 13%, 33%);

}



@font-face{
    font-family: 'Montserrat';
    src: url('./fonts/Montserrat-VariableFont_wght.ttf');
}
@font-face{
    font-family: 'Montserrat';
    src: url('./fonts/Montserrat-Bold.ttf');
}


*,*::after,*::before{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body{
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    font-family: 'Montserrat';
    font-size: 15px;
    font-weight: 700;
    background-color: var(--Very-Light-Grayish-Blue);
    background-image: url('./images/bg-top.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: left 180px top -50px;
    color: var(--Dark-Grayish-Blue);
}

main{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

/* ### Heading style */
section._contr_heading_title{
    padding: 2rem 0;
    text-align: center;
}

h1{
    margin-top: 2rem;
    color: var(--Grayish-Blue);

}

div.toggle_btn_box{
    padding: 3rem 0;
    display: flex;
    align-items: center;
    gap: .5rem;
}

div.toggle_btn_box p{
    color: var(--Light-Grayish-Blue);
}

/* The switch - the box around the slider */
.switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 34px;
}

/* Hide default HTML checkbox */
.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

/* The slider */
.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to right, hsl(236, 72%, 79%) , hsl(237, 63%, 64%));
    transition: .4s;
    border-radius: 34px;
}

.slider:before {
    position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    transition: .4s;
    border-radius: 50%;
}

input:checked + .slider {
    background: linear-gradient(to right, hsl(236, 72%, 79%) , hsl(237, 63%, 64%));
}

input:checked + .slider:before {
    transform: translateX(26px);
}
/* ### Heading finished */
/* ### Card style */

section.cards_contr{
    width: 100%;
    max-width: 500px;
    padding: 1rem;
    display: grid;
    gap: 2rem;
}


div.price-info-box{
    width: 100%;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    gap: 2rem;
    background-color: white;
    border-radius: .5rem;
    text-align: center;
    box-shadow: 0 5px 100px hsla(234, 14%, 74%,.2);
}

div.price-info-box.professional{
    background: linear-gradient(to bottom, hsl(236, 72%, 79%) , hsl(237, 63%, 64%));
    color: #fff;
}

div.price-info-box h2{
    font-size: 1.5rem;
}

div.price-info-box ul{
    list-style-type: none;
    display: flex;
    flex-direction: column;
}

div.price-info-box ul li{
    padding: 1rem;
    text-align: center;
    border-bottom: 1px solid var(--Light-Grayish-Blue);
}


div.price-info-box li.price{
    font-size: 4rem;
}

div.price-info-box span.dollar{
    font-size: 2rem;
    position: relative;
    bottom: .7rem;
    right: .5rem;
}


div.price-info-box button{
    padding: 1rem;
    border-radius: .5rem;
    border: none;
    text-transform: uppercase;
    cursor: pointer;
    transition: .5s ease;
    border: 2px solid transparent;
}

div.price-info-box.basic button, div.price-info-box.master button{
    background: linear-gradient(to right, hsl(236, 72%, 79%) , hsl(237, 63%, 64%));
    color: #fff;
}
div.price-info-box.professional button{
    color: hsl(237, 63%, 64%);
}
div.price-info-box.professional button:hover{
    color: #fff;
    border-color: #fff;
}
div.price-info-box button:hover{
    background: transparent;
    color: hsl(237, 63%, 64%);
    border: 2px solid hsl(237, 63%, 64%);
}

footer{
    padding: 2rem;
    text-align: center;
}


.none{
    display: none ;
}

.active{
    display: block ;
}

@media(min-width: 1023px){
    body{
       background-image: url('./images/bg-top.svg'),url('./images/bg-bottom.svg');
       background-position: top 0px right 40px, bottom  left 0px;
       background-size: auto, auto;
    }

    .slider:hover{
       opacity: .5;
    }


    section.cards_contr{
        max-width: 1024px;
        display: flex;
        gap: 0;
        align-items: center;
    }

    div.price-info-box.professional{
        padding: 4rem 2rem;
    }
}