style.css

* {
   margin: 0;
   padding: 0;
}



body {
   background-color: hsl(217, 100%, 97%);

   font-family: 'Poppins', sans-serif;
   font-family: 'Ubuntu', sans-serif;
   padding: 10em;

}


.container {
   background-color: hsl(0, 0%, 100%);
   padding: 1em 5em 1em 1em;
   border-radius: 10px;
   width: 80%;
   display: flex;
   height: 500px;
   gap: 10em;
   box-shadow: 5px 5px 5px grey;
}

.steps {
   background: url(assets/images/bg-sidebar-desktop.svg);
   background-repeat: no-repeat;

   border-radius: 10px;
   padding: 2em 0;
   width: 30%;
   display: flex;
  
}

.steps > div{
   display: grid;
   grid-template-columns: 1fr;
   padding: 0 1.2rem 0 2rem;
   align-content: start;
   gap: 2.2em;
   color: white;
   font-size: small;
}

#numbers div{
   border: 1px solid white;
   border-radius: 50%;
   padding: 0.75em;
}

#numbers :nth-child(1){
   background-color: hsl(206, 94%, 87%);
   color: black;
}


.steps ul {
   display: grid;
   grid-template-columns: 1fr;
   padding: 0 0;
   align-content: start;
   gap: 2.3em;

   
}

.steps ul li {

   list-style: none;
   color: hsl(229, 24%, 87%);
   font-size: small;

}

.steps ul li div {
   color: white;
   font-size: small;

}

.form {

   padding: 1em 0;
   position: relative;
   width: 40%;


}

.header {
   padding: 0 0 0.5rem 0;

}

#first,
#second,
#third,
#fourth,
#thank-you h1 {
   color: hsl(213, 96%, 18%)
}

#first p {
   color: hsl(231, 11%, 63%)
}

#second p {
   color: hsl(231, 11%, 63%)
}

#third p {
   color: hsl(231, 11%, 63%);
}

#fourth p {
   color: hsl(231, 11%, 63%);
}

#thank-you p {
   color: hsl(231, 11%, 63%)
}

form label {
   font-size: small;
   color: hsl(213, 96%, 18%);
   font-weight: 500;
   padding: 0.5rem 0 0 0;
   flex-shrink: 0;
}
label[for=name]::after{
   content: " *";
   color: red;
}
label[for=email]::after{
   content: " *";
   color: red;
}
label[for=number]::after{
   content: " *";
   color: red;
}

form input {
   height: 40px;
   border: lightsteelblue solid;
   border-radius: 10px;
   border-color: hsl(229, 24%, 87%);

}

::placeholder {
   text-indent: 10px;
}

#first {
   /* display: none; */
   display: grid;
   grid-template-columns: 1fr;
   align-content: start;
   gap: 0.5rem;
   padding: 3em 0;
   position: absolute;
   inset: 0px 0px 0px 0px;
   z-index: 5;
   visibility: visible;

}

#second {
   display: none;
   padding: 2.5em 0;
   /* display: grid; */
   align-content: start;
   grid-template-columns: 1fr;
   gap: 2em;
   position: absolute;
   inset: 0px 0px 0px 0px;
   z-index: 4;
}

#third {
   padding: 2.5em 0;
   /* display: grid; */
   grid-template-columns: 1fr;
   align-content: start;
   gap: 2em;
   position: absolute;
   inset: 0px 0px 0px 0px;
   z-index: 3;
   display: none;
}

#fourth {
   padding: 2.5em 0;
   /* display: grid; */
   grid-template-columns: 1fr;
   align-content: start;
   gap: 2em;
   position: absolute;
   inset: 0px 0px 0px 0px;
   z-index: 2;
   display: none;
}



#thank-you {
   display: none;
   font-size: 14px;
   padding: 2.5em 0;
   /* display: grid; */
   grid-template-columns: 1fr;
   justify-items: center;
   align-content: center;
   gap: 1rem;
   position: absolute;
   inset: 0px 0px 0px 0px;
   z-index: 1;
}

#thank-you div {
   text-align: center;
   padding-top: 1rem;

}

#thank-you img {
   width: 60px;
}



.button {
   display: flex;
   justify-content: center;
   gap: 15em;
   padding: 1rem 0;
   position: absolute;
  inset: 610px 0px 30px 100px;
  z-index: 10;
}


#btn-back {
   border: none;
   background-color: transparent;
}

#btn-next {
   background-color: hsl(213, 96%, 18%);
   color: hsl(229, 24%, 87%);
   border-radius: 5px;
   padding: 0.5rem 1rem;
}

#btn-back,#btn-next:hover{
   cursor: pointer;
}

#btn-next input {
   background-color: hsl(213, 96%, 18%);
   color: hsl(229, 24%, 87%);
   border-radius: 5px;
   padding: 0.5rem 1rem;
   border: none;
}

#plan {
   display: flex;
   gap: 1rem;
}



.plan {
   color: hsl(229, 24%, 87%);

   padding: 1rem 3rem 1rem 1rem;
   font-size: smaller;
  

}

#border1 {
   border: 1px solid hsl(229, 24%, 87%);
}

#border2 {
   border: 1px solid hsl(229, 24%, 87%);
}

#border3 {
   border: 1px solid hsl(229, 24%, 87%);
}

.plan span {
   color: hsl(213, 96%, 18%);
   font-size: medium;
}

.plan input {
   visibility: hidden;
}

#plan-selection {
   display: flex;
   justify-content: center;
   align-items: center;
   gap: 1em;
   padding: 1em 0;
   background-color: hsl(231, 41%, 97%);
   border-radius: 5px;
   width: 80%;
}


#add-ons {
   display: grid;
   grid-template-columns: 1fr;
   gap: 1em;

}

#add-on-first {
   display: flex;
   justify-content: space-between;
   align-items: center;
   width: 100%;
}

#add-on-second {
   display: flex;
   justify-content: space-between;
   align-items: center;
   width: 100%;
}

#add-on-third {
   display: flex;
   justify-content: space-between;
   align-items: center;
   width: 100%;
}

#summary {
   display: grid;
   grid-template-columns: 1fr;
   /* gap: 1em; */

}

.add-on {
   display: flex;
   color: hsl(229, 24%, 87%);
   border: 1px solid hsl(229, 24%, 87%);
   padding: 1rem 3rem 1rem 1rem;
   font-size: smaller;
   border-radius: 10px;
   gap: 1rem;
}

.add-on {
   display: flex;
   color: hsl(229, 24%, 87%);
   border: 1px solid hsl(229, 24%, 87%);
   padding: 1rem 3rem 1rem 1rem;
   font-size: smaller;
   border-radius: 10px;
   gap: 1rem;
}

.add-on-summary {
   display: flex;
   color: hsl(229, 24%, 87%);
   border: 1px solid hsl(229, 24%, 87%);
   padding: 1rem 3rem 1rem 1rem;
   font-size: smaller;
   border-radius: 10px;
   gap: 1rem;
}

.plan-summary {
   display: flex;
   color: hsl(229, 24%, 87%);
   border: 1px solid hsl(229, 24%, 87%);
   padding: 1rem 3rem 1rem 1rem;
   font-size: smaller;
   border-radius: 10px;
   gap: 1rem;
}

.total {

   display: flex;
   color: hsl(229, 24%, 87%);
   border: 1px solid hsl(229, 24%, 87%);
   padding: 1rem 3rem 1rem 1rem;
   font-size: smaller;
   border-radius: 10px;
   gap: 1rem;

}

.add-on-left {
   display: flex;
   justify-content: space-between;
   align-items: center;
   width: 100%;

}

.prices {
   color: hsl(243, 100%, 62%);
}

.price-plan {
   color: hsl(243, 100%, 62%);
}

#total-price {

   color: hsl(243, 100%, 62%);

}

.total-price {
   color: hsl(243, 100%, 62%);
}

.toggle {
   position: relative;
   display: inline-block;
   width: 50px;
   height: 15px;
   background-color: hsl(213, 96%, 18%);
   border-radius: 30px;
   border: 1px solid gray;
}

/* After slide changes */
.toggle:after {
   content: '';
   position: absolute;
   width: 15px;
   height: 15px;
   border-radius: 50%;
   background-color: white;
   top: 5px;
   left: 1px;
   transition: all 0.5s;
}



.checkbox:checked+.toggle::after {
   left: 35px;
}

/* Checkbox checked toggle label bg color */
.checkbox:checked+.toggle {
   background-color: hsl(213, 96%, 18%);
}

/* Checkbox vanished */
.checkbox {
   display: none;
}


.attribution {
   font-size: 10px;
   text-align: center;
   padding: 2rem;
   margin-top: 10em;
}

.attribution a {
   color: hsl(228, 45%, 44%);
}


@media only screen and (max-width: 1024px){
   .steps > div{
      display: grid;
      grid-template-columns: 1fr;
      padding: 0 1.2rem 0 2rem;
      align-content: start;
      gap: 2.6em;
      
      font-size: x-small;
   }

   .steps ul li {

      list-style: none;
      color: hsl(229, 24%, 87%);
      font-size: xx-small;
   
   }
   .steps ul li div{

      
      font-size: x-small;
   
   }

   .button{
      gap: 8em;
      position: absolute;
      inset: 610px 0px 30px 160px;
   }

   .container {
      gap: 6em


   }

   .header{
      font-size: small;
   }

   #second{
      font-size: small;
      gap: 0.5rem
   }

   .plan {
      color: hsl(229, 24%, 87%);
      padding: 1rem 1rem 1rem 1rem;
      font-size: smaller;
  }

  #plan-selection {
   margin-left: 2em;
  }

  .add-on{
   font-size: x-small;
  }

  form label{
   font-size: 11px;
   margin-bottom: 0.5rem;
  }
}


@media only screen and (max-width: 768px){
   .steps ul li {

      display: none;

   }
   .container {
      gap: 2em;
  

  }

  .button{
   gap: 5em;
   position: absolute;
   inset: 610px 0px 30px 100px;
 
}

#third{
   gap: 0.5rem
}

#add-ons{
   gap: 0.5rem;
}

}

@media only screen and (max-width: 430px) {

   body {
      padding: 0;
      background-color: hsl(0, 0%, 100%);

   }

   .container {
      background-color: hsl(217, 100%, 97%);
      flex-direction: column;
      padding: 0;
      width: 100%;


   }

   .steps {
      background: url(assets/images/bg-sidebar-mobile.svg);
      background-repeat: repeat;
      padding: 0;
      width: 100%;
      display: block;
   
   }

   #numbers{
      display: flex;
      align-items: flex-start;
      padding: 2em 0;
      justify-content: center;
     
   }

   .steps ul {
      display: flex;

      padding: 0 0.5em;
      height: 170px;


   }
   .header {
      padding: 0 0 0 0;
   
   }

   .header h1{
      font-size: larger;
   }

   
   .steps ul li {

      display: none;

   }

   .form {
      width: 90%;

   }


   #first {
      /* display: none; */
      display: grid;
      grid-template-columns: 1fr;
      align-content: start;
      gap: 0.5rem;
      padding: 5em 1em;
      position: absolute;
      inset: -200px -25px -130px 10px;
      z-index: 5;
      visibility: visible;
      background-color: hsl(0, 0%, 100%);
      height: max-content;

   }

   #second {
      display: none;
      padding: 2.5em 0;
      /* display: grid; */
      align-content: start;
      grid-template-columns: 1fr;
      gap: 0.5em;
      padding: 2em;
      position: absolute;
      inset: -200px -25px -130px 10px;
      z-index: 1;
      background-color: hsl(0, 0%, 100%);
   }

   #third {
      padding: 2.5em 0;
      /* display: grid; */
      grid-template-columns: 1fr;
      align-content: start;
      gap: 2em;
      padding: 2em;
      position: absolute;
      inset: -200px -25px -130px 10px;
      z-index: 3;
      display: none;
      background-color: hsl(0, 0%, 100%);
   }

   #fourth {
      padding: 2.5em 0;
      /* display: grid; */
      grid-template-columns: 1fr;
      align-content: start;
      gap: 2em;
      padding: 2em;
      position: absolute;
      inset: -200px -25px -130px 10px;
      ;
      z-index: 2;
      display: none;
      background-color: hsl(0, 0%, 100%);
   }



   #thank-you {
      display: none;
      font-size: 14px;
      padding: 2.5em 0;
      /* display: grid; */
      grid-template-columns: 1fr;
      justify-items: center;
      align-content: center;
      gap: 1rem;
      padding: 2em;
      position: absolute;
      inset: -200px -25px -130px 10px;
      z-index: 1;
      background-color: hsl(0, 0%, 100%);
   }

   #plan {

      display: grid;
      grid-template-columns: 1fr;
      gap: 0;

   }
   #plan-selection {
      font-size: small;
      gap: 0.5em;
      padding: 0.5rem 0;
      width: 100%;
      margin: 0;
      margin-top: 0.2rem;
   }

   #border1,
   #border2,
   #border3 {
   
      display: flex;
   }

   #border1>div:nth-child(3)>div:nth-child(1),
   #border2>div:nth-child(3)>div:nth-child(1),
   #border3>div:nth-child(3)>div:nth-child(1) {
      color: blue;
   }
   .add-on :nth-child(2){
      flex-shrink: 0;
      
   }

   .add-on-left :nth-child(1){
      flex-shrink: 0;
   }

   .add-on-left div{
      font-size: smaller;
   }
   
  

   .button {
      display: flex;
      justify-content: space-between;
      gap: 5em;
      padding: 2em;
      position: relative;
      inset: 10px 0 0 0;
   }
}