:root {
  /* Color */
  --white-color: rgb(255,255,255);
  --dark-color: rgb(0,0,0);
  --pri-color: rgb(249, 206, 7);
  --sec-color: rgb(252, 16, 104);
  --ter-color: #1f0441;
  --qua-color: #fcab10;
  --qui-color: #0ce3e8;

  /* font */
  --font-size-s: .45rem;
  --font-size-n: .9rem;
  --font-size-m: 1.22rem;
  --font-size-l: 1.5rem;
  --font-size-xl: 2rem;
  --font-size-xxl: 2.3rem;

  /* font-weight */
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /*border radius */
  --border-radius-s: 8px;
  --border-radius-m: 30px;
  --border-radius-circle: 50%;

  /* site max */
  --site-max-width: 100%;
}

@font-face {
  font-family: 'False';
  src: url(../font/False.ttf);
}

#sec-info {
  margin: 0 20% 0 20%;
}


#box_info {
    background-color: var(--pri-color);
    max-width: 100%;               
    color: #252525;
    border-radius: 0;         
    margin: 0 auto;             
    padding: 20px;          
  }
  
#box_info .info {
    padding: 20px;            
    display: flex;            
    flex-direction: column;    
    align-items: center;     
  }
  
#box_info .info h4 {
    margin: 10px 0 5px 0;       
    font-size: var(--font-size-xxl);        
    text-align: center;       
    font-family: 'False';
  }
  
#box_info .info h5 {
    margin: 20px 0 10px 0;        
    font-size: var(--font-size-xl);
    text-align: center;
    font-family: Georgia, 'Times New Roman', Times, serif;
  }
  
#box_info .info .content {
    width: 100%;
  }
  
#box_info .info .content p {
    margin: 0 0 15px 0;
    text-align: justify;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-l);
}
  
#box_info .info .content p:last-child {
    margin-bottom: 0;
  }

.info .bt {
    text-transform: uppercase;
    width: 100%;
    padding: 10px 25px 10px 25px;
    margin: 25px 0px 40px 0px;
}

@media (max-width: 1100px) and (orientation: portrait) {
    #sec-info {
        margin: 0;
    }  
  
    .box_info h4 {
      font-size: var();
    }

    #box_info .info h4 {
      margin: 10px 0 5px 0;       
      font-size: var(--font-size-xxxl);        
      text-align: center;       
      font-family: 'False';
    }
    
  #box_info .info h5 {
      margin: 20px 0 25px 0;        
      font-size: 3.2rem;
      text-align: center;
      font-family: Georgia, 'Times New Roman', Times, serif;
    }
    
  #box_info .info .content {
      width: 100%;
    }
    
  #box_info .info .content p {
      margin: 0 0 15px 0;
      text-align: left;
      align-items: center;
      justify-content: center;
      font-size: 3rem;
    }

    .info .bt {
      margin: 40px 0px 20px 0px;
  }
}

@media (max-width: 1100px) and (orientation: landscape) {
    #box_info .info h5 {
        margin: 20px 0 25px 0;        
        font-size: 2.5rem;
        text-align: center;
        font-family: Georgia, 'Times New Roman', Times, serif;
    }

    #box_info .info .content p {
        margin: 0 0 15px 0;
        text-align: left;
        align-items: center;
        justify-content: center;
        font-size: 1rem;
    }

}