:root {

  --content-color: #ffffff;       
  --header-bg-color:  #81f499ff;          
  --footer-bg-color: #115e59;     
  --primary-fonts: "Roboto", sans-serif;
  --select-focus-border: 1px solid #0ea5e9; 
  --main-section-bg-color: #99c5b5ff; 
  --next-button-bg:  #afece7ff;        
  --prev-button-bg: transparent;    
  --padding: 10px;

}

/*? First section from the main  */
.first-section h1, .first-section p{
    padding:10px 0;
}
.first-section-container,.second-section-container,.third-section-container,.fourth-section
{
    color:rgb(54, 54, 54);
    padding:40px;
    border-radius: 10px;
    max-width:1100px;
    width: 100%;   
    background-color: var(--main-section-bg-color);
}
.first-section-container h2{
    color:rgb(25, 25, 211);
    text-transform: capitalize;
}
.selection{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin-top: 10px;
    gap:10px;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
   
}
.selection-item{

    width: 90%;

}
/* classname for label from js */
.first-section-container .selection-label{
   display: block;
   padding:10px 0;
   text-align: center;
   font-weight:bolder;

}
.first-section-container select{
    padding:10px 35px;
    width: 100%;
    outline: none;
    border:none;
    border-radius: 10px;
}
.first-section-container select:focus{
    border:var(--select-focus-border)
}
.section-continue-button{
    padding:10px;
    outline: none;
    border:none;
    border-radius: 3px;
    cursor: pointer;
    font-weight: bold;
    background-color: var(--next-button-bg);
    -webkit-transition: all 200ms linear;
    transition: all 200ms linear;
    margin:6px 0;
}
.section-continue-button:hover{
    -webkit-transform: scale(1.2);
            transform: scale(1.2);
}

.first-stage-label{
    /* border:2px solid red; */
    padding:2px;
    margin-top:5px;
    margin-left:7px;
    display: block;
}
/*? end of first section */