*{
    margin: 0;
    box-sizing: border-box;
    font-family: "Ubuntu", sans-serif;
}
body{
    height: 95vh;
    min-height: 550px;
    background: hsl(217, 100%, 97%);
    display: flex;
    justify-content: center;
    align-items: center;
}
#container{
    height: 70vh;
    min-height: 450px;
    width: 70%;
    border-radius: 10px;
    background: hsl(0, 0%, 100%);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-evenly;
    box-shadow: 0px 8px 15px 1px #4d5a6d;
}
 /* Sidebar start */
#Sidebar{
    background: url("./assets/images/bg-sidebar-desktop.svg");
    background-size:cover;
    height: 96%;
    min-height: 430px;
    width: 25%;
    border-radius: 7px;
    border-bottom-left-radius:10px ; 
    border-bottom-right-radius:10px ; 
}
ul{
    height: 50%;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content:center;
    align-items: center;
    padding: 0;
}
ul li{
    list-style: none;
    width: 85%;
    font-size: small;
    display: grid;
    grid-template-areas:
        "num num step step ."
        "num num speach speach speach";
    justify-content: start;
    cursor: pointer;
}
ul span{
    color: white;
    padding: 3px;
    padding-right: 8px;
    padding-left: 8px;
    padding-top: 4px;
    margin: 10px;
    border: 1px solid white;
    border-radius: 50%;
    background-color:hsl(243, 100%, 62%) ;
    grid-area: num;
    aspect-ratio: 1/1;
}
li p{
    color: hsl(231, 11%, 63%);
    font-size: x-small;
    grid-area: step;
    margin-top: 10px;
}
li div{
    grid-area: speach;
    margin-top: -5px;
    color: hsl(229, 24%, 87%);
    font-weight: 400;
    font-size: smaller;
}
/* js active */
.active{
    background-color:hsl(206, 94%, 87%) ;
    color: hsl(243, 100%, 62%);
    border: 1px solid hsl(206, 94%, 87%);
}
/* shaps start */

/* Sidebar end */
/* main sectoin start */
#main-section{
    width: 70%;
    height: 96%;
    min-height: 200px;
    display: flex;
    justify-content: center;
    align-items: stretch;
}
/* card one I also made simillar together*/
.getSteps{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
}
.lorem{
    height: 20%;
}
.lorem h3{
    margin-bottom: 0.8em;
    color: hsl(213, 96%, 18%);
    font-size: x-large;
    font-weight: 700;
}
.lorem p{
    font-size:0.8em;
    color: hsl(231, 11%, 63%);
    transform: translateY(-1em);
}
/* form one start I also made simillar together*/
#formOne , #full-plans{
    display: flex;
    justify-content: space-evenly;
    flex-direction: column;
    height: 65%;
    transform: translateY(-4em)
}
#formOne label{
    color: #4d5a6d;
    margin-bottom: -1em;
}
#formOne input{
    width: 35vw;
    height: 2.5em;
    border: 1px solid hsl(229, 24%, 87%);
    border-radius: 5px;
    padding: 0 12.5px 0 12.5px;
    outline: none;
    color:hsl(213, 96%, 18%) ;
    font-weight: 700;
    cursor: pointer;
}
#formOne input:focus{
    border: 1.5px solid hsl(213, 96%, 18%);
}
.nextBtn{
    position: absolute;
    bottom: 0;
    right: 0;
    margin-bottom: -3em;
    width: 8.5em;
    height: 3em;
    background-color: hsl(243, 100%, 62%);
    color: white;
    border: 1px solid hsl(243, 100%, 62%);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.5s;
}
.nextBtn:hover{
    background-color: hsl(213, 96%, 18%);
}
.requireSpan{
    color: hsl(354, 84%, 57%);
    position: absolute;
    right: 0;
}
/* form one end */
/* step two start*/
#full-plans{
    height: 35%;
    transform: translateY(-2.6em)
}
#stepTwo{
    display: flex;
    align-items: flex-start;
    width: 80%;
    position: relative;
}
#plans{
    width: 38vw;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    height: 100%;
}
#Arcade,#Advanced,#Pro{
    width: 30%;
    height: 100%;
    border: 1.5px solid hsl(231, 11%, 63%);
    border-radius: 10px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: all 0.1s;
}
#Arcade:hover,#Advanced:hover,#Pro:hover{
    border: 1.5px solid hsl(243, 100%, 62%);
}
.Arcadespan{background: url(./assets/images/icon-arcade.svg);}
.Advancedspan{background: url(./assets/images/icon-advanced.svg);}
.Prospan{background: url(./assets/images/icon-pro.svg);}
.Arcadespan,.Advancedspan,.Prospan{
    width: 40px;
    height: 40px;
    display: block;
    margin: 15px 0 0 12px;
}
.some-space{
    margin: 0 0 20px 15px;
}
.some-space h4{
    font-size: 16px;
    color: hsl(213, 96%, 18%);
    font-weight: bolder;
}
.some-space p{
    color:hsl(231, 11%, 63%);
    font-size: small;
}
.yearly .freeP{
    color: hsl(213, 96%, 18%);
    margin-bottom: -10px;
}
.selectedPlan{
    border-color:hsl(243, 100%, 62%) !important;
    background: hsl(217, 100%, 97%);
}
/* select btn and it's container */
#select-plan-period-container{
  width: 100%;
  height: 12%;
  background-color: hsl(217, 100%, 97%);
  border: 1px solid hsl(217, 100%, 97%);
  border-radius: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  transform: translateY(-2.5em);
}
#select-plan-period-container span{
    color: hsl(213, 96%, 18%);
    font-weight: 700;
}
.selcetInput-container {
    border-radius: 5%;
    height: 35px;
    position: relative;
    width: 60px;
    margin: 0 10px 0px 10px;
}
  #selcetInput {
    -webkit-appearance: none;
    cursor: pointer;
    height: 100%;
    position: absolute;
    width: 100%;
  }
  
  #selcetInput::before {
    background: hsl(213, 96%, 18%);
    border-radius: 50px;
    content: "";
    height: 85%;
    position: absolute;
    top: 50%;
    transform: translate(0, -50%);
    width: 92%;
  }
  
  #selcetInput::after {
    background: white;
    border-radius: 50%;
    content: "";
    height: 1.3em;
    transform: translate(7px, -50%);
    position: absolute;
    top: 50%;
    transition: all .4s;
    width: 1.3em;
  }
  
  #selcetInput:checked::after {
    transform: translate(170%, -50%);
}
/* same in classes for no repeat unique in ids */
#back2{
    transform: translateY(-0.5em);
}
.backBtn{
    color: hsl(231, 11%, 63%);
    cursor: pointer;
    font-weight: 600;
    transition: color 0.4s;
}.backBtn:hover{color:hsl(213, 96%, 18%) ;}
#sum2{
    margin-bottom: 1em;
}
/* step two end*/
/* step three start*/
#stepThree{
    justify-content: normal;
    width: 70%;
    position: relative;
}
#lorem3{
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}
#add-onsContainer{
    width: 100%;
    height: 60%;
    display: flex;
    justify-content: center;
}
#containerFormid{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-between;
    flex-direction: column;
}
#service,#storage,#Profile{
    border: 1.5px solid hsl(231, 11%, 63%);
    border-radius: 10px;
    cursor: pointer;
    height: 30%;
    display: flex;
    transition: all 0.2s;
}
#service:hover{
    border-color: hsl(243, 100%, 62%) !important;
}
#storage:hover{
    border-color: hsl(243, 100%, 62%) !important;  
}
#Profile:hover{
    border-color: hsl(243, 100%, 62%) !important; 
}
.moveable1{
    height: 100%;
    width: 20%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right:.5em ;
}
.checkboxcontainer{
    width: 15px;
    height: 15px;
    border: 1px solid hsl(231, 11%, 63%);
    border-radius: 1px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.checkboxcontainer svg {
    width: 15px;
    height: 15px;
}
.moveable2{
    height: 100%;
    width: 50%;
    display: flex;
    flex-direction: column;
    justify-content:center;
    align-items: flex-start;
    margin-right:.5em ;
    gap: 5px;
}
.hfour{
    color:hsl(213, 96%, 18%) ;
}
.moveable2 p{
    font-size: 11px;
    color: hsl(231, 11%, 63%);
}
.moveable3{
    height: 100%;
    width: 20%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right:.5em ; 
}
.cash{
   color:  hsl(243, 100%, 62%);
   font-size: small;
}
#sum3{
    margin-bottom: 1em;
}
#back3{
    position: absolute;
    bottom: 0;
    left: 0;
    margin-bottom: 1.5em;
}
/* step three end*/
/* step four start*/
#stepFour{
    align-items: normal;
    position: relative;
}
#totalAccount{
    height: 45%;
    width: 110%;
    background-color: hsl(217, 100%, 97%);
    border: 1px solid hsl(217, 100%, 97%);
    border-radius: 10px;
    transform :translateY(-1.5em);
}
#selectedPlanDisplay{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    height: 50%;
    align-items: center;
}
.forFlex{
    margin-left: 1em;
}
.forFlex h4{
    color: hsl(213, 96%, 18%);
}
.forFlex p{
    text-decoration: underline;
    color: hsl(231, 11%, 63%);
    margin-top: 0.5em;
    cursor: pointer;
    width: fit-content;
    width: -moz-fit-content;
    font-weight: bold;
    transition: all 0.2s;
}
.forFlex p:hover{
    color:hsl(243, 100%, 62%) ;
}
.cashPlan{
    color: hsl(213, 96%, 18%);
    margin-right: 1em;
    font-weight: bolder;
}
.niceHr{
    display: flex;
    justify-content: center;
}
.niceHr hr{
    width: 80%;
    border:1px solid hsl(229, 24%, 87%) ;
}
#additionSection{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    height: 40%;
    margin-top: 4%;
}
#addName{
    margin-left:1em ;
}
#addName p{
    color:hsl(231, 11%, 63%) ;
    margin-bottom: 0.5em;
}
#addPrice{
    margin-right:1em ;
}
#addPrice p {
    color:hsl(213, 96%, 18%) ;
    margin-bottom: 0.5em;
}
#finalTotal{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 110%;
    transform: translateY(-1.5em);
}
#totalPer{
    margin-left:1em ;
    color:hsl(231, 11%, 63%) ;
}
#finalPrice{
    margin-right:1em ;
    color: hsl(243, 100%, 62%);
    font-weight: bolder;
    font-size: larger;
}
#sum4{
    margin-bottom: 2em;
    transform: translateY(1.5em);
    margin-right: -2.2em;
}
#back4{
    margin-bottom: 2.2em;
    transform: translateY(1.5em);
    width: fit-content;
    width: -moz-fit-content
}
/* step four end*/
/* last message */
#finalmessage{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
    width: -webkit-fill-available;
}
#finalmessage img{
    width: 15%;
    aspect-ratio: 1/1;
    margin-bottom: 1em;
    user-select: none;
    -webkit-user-select:none;
}
.forLastFlex{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 70%;
    margin-bottom: 1em;
}
.forLastFlex h2{
    color:hsl(213, 96%, 18%) ;
    font-size: 26px;
    font-weight: bolder;
    margin-bottom: 0.5em;
}
.forLastFlex p{
    color:hsl(231, 11%, 63%) ;
    text-align: center;
}
/* main sectoin end */
/* new styles */
#stepOne .lorem{
    transform: translateY(0.7em);
}
#formOne{
    transform: translateY(-3em);
}
#stepTwo .lorem{
    transform: translateY(0.6)
}
#full-plans{
    transform: translateY(-2.35em);
}
#stepFour .lorem{
    transform: translateY(0.6em);
}
/* attriibtion */
.attribution { font-size: 11px; text-align: center; }
.attribution a { color: hsl(228, 45%, 44%); }
.attribution a:visited {color: hsl(228, 45%, 44%);}
/* now time  for responsive */
.last{
    display: none;
}
/* step one responsive */
@media screen and (min-width:1024px) {
    #stepOne{
        align-items: normal;
    }
}
@media screen and (max-width:800px) {
    body{
        height: 100vh;
        min-height: 650px;
        position: relative;
    }
    #container{
        flex-direction: column;
        width: 90%;
    }
    #Sidebar{
        background: url(./assets/images/bg-sidebar-mobile.svg);
        background-size: cover;
        width: 100%;
        height: 20%;
        min-height: 100px;
        position: absolute;
        top: 0;
        display: flex;
        justify-content: center;
        z-index: -1;
        border-radius: 0;
    }
    #Sidebar ul{
        flex-direction: row;
        height: 80%;
        justify-content: center;
        width: 50%;
    }
    #Sidebar li{
        justify-content: center;
    }
    #Sidebar li div{
        display: none;
    }
    #Sidebar li p{
        display: none;
    }
    #main-section{
        width: 85%;
    }
    #stepOne{
        align-items: flex-start;
    }
    #formOne{
        width: 100%;
    }
    .lorem{
        width: 80%;
    }
    #formOne input{
        width: 100%;
    }
    .nextBtn{
        bottom: calc(-23.5vh);
        margin: 0;
        height: 2.5em;
        width: 6em;
        border-radius: 5px;
    }
    .last{
        display: block;
        position: absolute;
        bottom: 0;
        width: 100%;
        height: 4em;
        background-color: white;
        z-index: -1;
    }
    /* step one is done */
    #stepTwo{
        width: 100%;
        justify-content: normal;
    }
    #stepTwo .lorem{
        transform: translateY(1.5em);
    }
    #full-plans{
        width: 100%;
        height: 58%;
        transform: translateY(1em);
    }
    #plans{
        width: 100%;
        flex-direction: column;
        gap: 0.5em;
    }
    #Arcade, #Advanced, #Pro {
        width: 100%;
        flex-direction: row;
        justify-content: normal;
        align-items: center;
    }
    .Arcadespan, .Advancedspan, .Prospan{
        margin: 0;
        margin-left: 1em;
    }
    .some-space{
        margin: 0;
        margin-left: 1em;
    }
    #select-plan-period-container{
        transform: translateY(2em);
    }
    #back2{
        position: absolute;
        bottom: calc(-14.5vh);
        margin: 0;
    }
    #sum2{
        bottom: calc(-16vh);
    }
    /* step two is done */
    #stepThree{
        width: 100%;
    }
    #lorem3{
        width: 90%;
        transform: translateY(1.5em);
    }
    .lorem h3{
        font-size: 22px;
    }
    #add-onsContainer {
        height: 70%;
        transform: translateY(4.5vh);
    }
    .hfour{
        font-size:medium;
    }
    .moveable2{
        width: 80%;
    }
    #back3{
        bottom: calc(-20.5vh);
        margin: 0;
    }
    /* step three is done */
    #totalAccount{
        height: 55%;
        transform: translateY(0.5vh);
        width: 100%;
    }
    #finalTotal{
        width: 105%;
        transform: translateY(0.5vh)
    }
    #back4{
        position: absolute;
        bottom: calc(-17.5vh);
        margin: 0;
    }
    #sum4{
        margin: 0;
        bottom: calc(-19vh);
    }
    /* step four is done */
    #finalmessage img{
        width: 20%;
    }
    .forLastFlex{
        width: 100%;
    }
}