/* # Front-end Style Guide

## Layout

The designs were created to the following widths:

- Mobile: 375px
- Desktop: 1440px

## Colors

### Primary

- Red: hsl(0, 78%, 62%)
- Cyan: hsl(180, 62%, 55%)
- Orange: hsl(34, 97%, 64%)
- Blue: hsl(212, 86%, 64%)

### Neutral

- Very Dark Blue: hsl(234, 12%, 34%)
- Grayish Blue: hsl(229, 6%, 66%)
- Very Light Gray: hsl(0, 0%, 98%)

## Typography

### Body Copy

- Font size: 15px

### Fonts

- Family: [Poppins](https://fonts.google.com/specimen/Poppins)
- Weights: 200, 400, 600 */
:root{
--Very-Dark-Blue: hsl(234, 12%, 34%);
--Grayish-Blue: hsl(229, 6%, 66%);
--Very-light-Gray: hsl(0, 0%, 98%);
--Red: hsl(0, 78%, 62%);
--Cyan: hsl(180, 62%, 55%);
--Orange: hsl(34, 97%, 64%);
--Blue: hsl(212, 86%, 64%);
font-size: 15px;

}
body,
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  margin: auto;
  background-color: var(--Very-light-Gray);
  font-family: 'Poppins', sans-serif;
}

.main{
  box-sizing: border-box;
  margin: auto;
  display: flex;
  flex-direction: column;
  padding-top: 150px;
  align-items: center;
  padding-bottom: 250px;

}
.text{
  text-align: center;
  align-items: center;
  width: 512px;;
  
  
}
.text>strong{
  font-size: 2.3rem;
  font-weight: normal;
  color: var(--Very-Dark-Blue);
  font-weight: bold;
  
}
.text>h1{
  font-size: 2.3rem;
  font-weight: normal;
  color: var(--Grayish-Blue);
}

.text>p{
  font-size: 1rem;
  color: var(--Grayish-Blue);
  padding-top: 20px;
}


.container{
  margin: auto;
  padding-top: 100px;
  display: flex;
  justify-content: space-around;
  align-items:center ;
  width: 1100px;
  height: 530px;
  background-color: var(--Very-light-Gray);
  gap: 25px; 
  
}


.box1{
  box-sizing: border-box;
  background-color: var(--Very-light-Gray);
  width: 350px;
  height: 530px;
  display: flex;
  justify-content: center;
  align-items: center;
  
}
.bora1{
  width: 350px;
  height: 250px;
  background-color: white;
  border-top: 5px solid var(--Cyan);
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  background-image: url('/images/icon-supervisor.svg');
  background-repeat: no-repeat;
  background-position: bottom right;
  background-origin: content-box;
  padding: 30px;
  box-shadow: 0px 6px 6px 6px var(--Grayish-Blue, 0.01);
}
.bora1>p{
  background-color: transparent;
  padding-bottom: 60px;
  font-size: 1.2rem;
  color: var(--Grayish-Blue);
  line-height: 1.5;
}
.bora1>h3{
  margin: 10px 0 0 0px;
  background-color: transparent;
  font-size: 1.5rem;
}



.box2{
  box-sizing: border-box;
  background-color: var(--Very-light-Gray);
  width: 350px;
  height: 530px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 30px;  
  border-radius: 5px;

}
.parcel1,
.parcel2{
  width: 350px;
  height: 250px;
  background-color: white;
  display: flex;
  box-sizing: border-box;
  border-radius: 5px;
}
.parcel1{
  border-top: 5px solid red;
  font-size: 1.5rem;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  background-image: url('/images/icon-team-builder.svg');
  background-repeat: no-repeat;
  background-position: bottom right;
  background-origin: content-box;
  padding: 30px;
  border-radius: 5px;
  box-shadow: 0px 6px 6px 6px var(--Grayish-Blue, 0.01);
  
}
.parcel1>h3{
  margin: 10px 0 0 0px;
  background-color: transparent;
  font-size: 1.5rem;
}

.parcel1>p{
  background-color: transparent;
  padding-bottom: 60px;
  font-size: 1.2rem;
  color: var(--Grayish-Blue);
  line-height: 1.5;
}
.parcel2{
  border-top: 5px solid var(--Orange);
  font-size: 1.5rem;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  background-image: url('/images/icon-karma.svg');
  background-repeat: no-repeat;
  background-position: bottom right;
  background-origin: content-box;
  padding: 30px;
  border-radius: 5px;
  box-shadow: 0px 6px 6px 6px var(--Grayish-Blue, 0.01);
  
  
}
.parcel2>h3{
  
  margin: 10px 0 0 0px;
  background-color: transparent;
  font-size: 1.5rem;
  
  
}
.parcel2>p{
  background-color: transparent;
  padding-bottom: 60px;
  font-size: 1.2rem;
  color: var(--Grayish-Blue);
  line-height: 1.5;
}
.box3{
  box-sizing: border-box;
  background-color: var(--Very-light-Gray);
  width: 350px;
  height: 530px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 5px;
  
  
  
  
}
.strong{   
  font-weight: bold;
}
.bora2{
  
  width: 350px;
  height: 250px;
  background-color: white;
  border-top: 5px solid var(--Blue);
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  background-image: url('/images/icon-calculator.svg');
  background-repeat: no-repeat;
  background-position: bottom right;
  background-origin: content-box;
  padding: 30px;
  border-radius: 5px;
  box-shadow: 0px 6px 6px 6px var(--Grayish-Blue, 0.01);

  
  
}
.bora2>p{
  background-color: transparent;
  padding-bottom: 60px;
  font-size: 1.2rem;
  color: var(--Grayish-Blue);
  line-height: 1.5;
}
.bora2>h3{
  margin: 10px 0 0 0px;
  background-color: transparent;
  font-size: 1.5rem;
}

  @media (max-width:410px) {
    :root{
      --Very-Dark-Blue: hsl(234, 12%, 34%);
      --Grayish-Blue: hsl(229, 6%, 66%);
      --Very-light-Gray: hsl(0, 0%, 98%);
      --Red: hsl(0, 78%, 62%);
      --Cyan: hsl(180, 62%, 55%);
      --Orange: hsl(34, 97%, 64%);
      --Blue: hsl(212, 86%, 64%);
      font-size: 10px;
      
      }
      body,
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        margin: auto;
        background-color: var(--Very-light-Gray);
        font-family: 'Poppins', sans-serif;
      }
      
      .main{
        box-sizing: border-box;
        margin: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        
      
      }
      .text{
        text-align: center;
        align-items: center;
        width: 210px;
        padding-bottom: 80px;
        
        
      }
      .text>strong{
        font-size: 1.73rem;
        font-weight: normal;
        color: var(--Very-Dark-Blue);
        font-weight: bold;
        
      }
      .text>h1{
        font-size: 1.65rem;
        font-weight: normal;
        color: var(--Grayish-Blue);
      }
      
      .text>p{
        font-size: 1rem;
        color: var(--Grayish-Blue);
        padding-top: 10px;
      }
      
      
      .container{
        margin: auto;
        padding-top: 10px;
        display: flex;
        justify-content: center;
        flex-direction: column;
        align-items:center ;
        width: 390px;
        height: 960px;
        background-color: var(--Very-light-Gray);
        gap: 30px; 
        
      }
      
      
      
      .bora1{
        width: 312px;
        height: 224px;
        background-color: white;
        border-top: 5px solid var(--Cyan);
        display: flex;
        flex-direction: column;
        box-sizing: border-box;
        background-image: url('/images/icon-supervisor.svg');
        background-repeat: no-repeat;
        background-position: bottom right;
        background-origin: content-box;
        box-shadow: 0px 6px 6px 6px var(--Grayish-Blue, 0.01);

      }
      .bora1>p{
        background-color: transparent;
        font-size: 1.2rem;
        color: var(--Grayish-Blue);
        
      }
      .bora1>h3{
        margin: 0px 0 0 0px;
        background-color: transparent;
        font-size: 1.5rem;
      }
      
      
      
      
      .parcel1,
      .parcel2{
        width: 312px;
        height: 224px;
        background-color: white;
        display: flex;
        box-sizing: border-box;
        border-radius: 5px;
      }
      .parcel1{
        border-top: 5px solid red;
        font-size: 1.5rem;
        display: flex;
        flex-direction: column;
        box-sizing: border-box;
        background-image: url('/images/icon-team-builder.svg');
        background-repeat: no-repeat;
        background-position: bottom right;
        background-origin: content-box;
        border-radius: 5px;
        box-shadow: 0px 6px 6px 6px var(--Grayish-Blue, 0.01);
        
      }
      .parcel1>h3{
        margin: 0px 0 0 0px;
        background-color: transparent;
        font-size: 1.5rem;
      }
      
      .parcel1>p{
        background-color: transparent;
        padding-bottom: 60px;
        font-size: 1.2rem;
        color: var(--Grayish-Blue);
        
      }
      .parcel2{
        border-top: 5px solid var(--Orange);
        font-size: 1.5rem;
        display: flex;
        flex-direction: column;
        box-sizing: border-box;
        background-image: url('/images/icon-karma.svg');
        background-repeat: no-repeat;
        background-position: bottom right;
        background-origin: content-box;
        border-radius: 5px;
        box-shadow: 0px 6px 6px 6px var(--Grayish-Blue, 0.01);
        
        
      }
      .parcel2>h3{
        
        margin: 0 0 0 0px;
        background-color: transparent;
        font-size: 1.5rem;
        
        
      }
      .parcel2>p{
        background-color: transparent;
        font-size: 1.2rem;
        color: var(--Grayish-Blue);
        
      }
      
        
        
        
        
      }
      .strong{   
        font-weight: bold;
      }
      .bora2{
        
        width: 312px;
        height: 224px;
        background-color: white;
        border-top: 5px solid var(--Blue);
        display: flex;
        flex-direction: column;
        box-sizing: border-box;
        background-image: url('/images/icon-calculator.svg');
        background-repeat: no-repeat;
        background-position: bottom right;
        background-origin: content-box;
        border-radius: 5px;
        box-shadow: 0px 6px 6px 6px var(--Grayish-Blue, 0.01);
      
        
        
      }
      .bora2>p{
        background-color: transparent;
        font-size: 1.2rem;
        color: var(--Grayish-Blue);
        
      }
      .bora2>h3{
        margin: 0px 0 0 0px;
        background-color: transparent;
        font-size: 1.5rem;
      }