@import url("./main.css");

/* introduction */
.introduction {
  background: 
    url(../imgs/girls.png);
    background-size: cover;
    background-attachment: fixed;
    background-position: center;
    height: 130vh;
    min-height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .introduction .intro-text {
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    font-size: 1.2rem;
  }
  
  .introduction .intro-text p,
  .introduction .intro-text h1 {
    color: var(--introduction-color);
  }
  
  .introduction .intro-text h1 {
    margin: 0px;
    font-size: 3em;
    text-transform: uppercase;
  }
  
  .introduction .intro-text p {
    font-size: 2em;
    font-style: italic;
  }
  
  .introduction .intro-text .btn {
    /*como centralizar qualquer coisa >:O */
    /*Time Flex-box !!!!!!!!!! */
    display: flex;                
    justify-content: center;      
    align-items: center;          
    color: #fff;
    background: var(--button-background);
    border-color: var(--button-background);
    border-radius: 3px;
    font-size: 1.5em;
    padding: 20px 40px;
    line-height: 1.42857143;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    text-decoration: none;
    text-transform: uppercase;
    transition: all 0.3s ease-in-out;
  
  }
  
  /* Objective */
  .objective-section{
    font-size: var(--paragraph-size-font);
  }
  .objective-section h1{
    font-size: var(--title-size-font);
  }
  
  /* Main */
  main {
    display: flex;
    flex-direction: column;
    padding: 10%;
    color: var(--font-color);
    font-size: 0.9rem;
  }
  
  /* Service Section */
  
  main .service {
    margin-bottom: 10%;
    display: grid;
    grid-template-areas:
      "desc desc desc desc desc"
      ". i1 i2 i3 ."
      ". i4 i5 i6 .";
    grid-gap: 10px;
  
    justify-self: center;
    text-align: center;
  }
  
  
  main .service p {
    color: #777;
    line-height: 1.75;
  }
  
  /* Service Description */
  
  main .service-description p {
    color: var(--font-color);
    font-style: italic;
  }
  
  /*Ballon */
  
  .service-ballon {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 30px;
  }
  .service-ballon p{
    font-size: 1.3rem;
  }
  main .service .service-ballon .circle-icon {
    background: var(--button-background);
    width: 2em;
    height: 2em;
    border-radius: 50%;
    color: #fff;
    font-size: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
  
  }
  
  /*Grid Area*/
  
  main .service-description {
    grid-area: desc;
  }
  
  main .service .i1 {
    grid-area: i1;
  }
  
  main .service .i2 {
    grid-area: i2;
  }
  
  main .service .i3 {
    grid-area: i3;
  }
  
  main .service .i4 {
    grid-area: i4;
  }
  
  main .service .i5 {
    grid-area: i5;
  }
  
  main .service .i6 {
    grid-area: i6;
  }
  
  main h1 {
    font-size: var(--title-size-font);
    text-align: center;
  }
  
  main p{
  text-align: center;
  }