/* ========================================
   RESET
======================================== */
*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

/* ========================================
   VARIÁVEIS
======================================== */
:root{

  /* CORES */
  --primary:#f7a823;
  --primary-dark:#e59400;

  --black:#111111;
  --dark:#1a1a1a;

  --white:#ffffff;

  --gray:#f5f5f5;
  --gray-2:#e7e7e7;
  --gray-3:#999999;

  --success:#00b63e;
  --danger:#ff3b30;

  /* SOMBRAS */
  --shadow:
    0 4px 12px rgba(0,0,0,0.08);

  --shadow-hover:
    0 6px 18px rgba(0,0,0,0.15);

  /* BORDAS */
  --radius:14px;

  /* TRANSIÇÃO */
  --transition:0.3s ease;

  /* LARGURA */
  --container:1400px;
}

/* ========================================
   HTML
======================================== */
html{
  scroll-behavior:smooth;
}

/* ========================================
   BODY
======================================== */
body{
  font-family:
    Arial,
    Helvetica,
    sans-serif;

  background:var(--gray);

  color:var(--black);

  overflow-x:hidden;
}

/* ========================================
   LINKS
======================================== */
a{
  text-decoration:none;
  color:inherit;
}

/* ========================================
   IMAGENS
======================================== */
img{
  max-width:100%;
  display:block;
}

/* ========================================
   BOTÕES
======================================== */
button{
  border:none;
  outline:none;
  cursor:pointer;
  transition:var(--transition);
  font-family:inherit;
}

/* ========================================
   INPUTS
======================================== */
input,
textarea,
select{
  outline:none;
  border:none;
  font-family:inherit;
}

/* ========================================
   CONTAINER
======================================== */
.container{
  width:100%;
  max-width:var(--container);

  margin:0 auto;

  padding:
    0 20px;
}

/* ========================================
   TITULOS
======================================== */
.section-title{
  font-size:26px;
  font-weight:700;

  margin-bottom:20px;
}

/* ========================================
   BOTÃO PADRÃO
======================================== */
.btn{
  background:var(--primary);

  color:var(--black);

  padding:
    12px 22px;

  border-radius:12px;

  font-weight:700;

  transition:var(--transition);
}

.btn:hover{
  background:var(--primary-dark);

  transform:translateY(-2px);
}

/* ========================================
   CARD PADRÃO
======================================== */
.card{
  background:var(--white);

  border-radius:var(--radius);

  box-shadow:var(--shadow);

  transition:var(--transition);
}

.card:hover{
  transform:translateY(-4px);

  box-shadow:var(--shadow-hover);
}

/* ========================================
   SCROLLBAR
======================================== */
::-webkit-scrollbar{
  width:10px;
  height:10px;
}

::-webkit-scrollbar-thumb{
  background:var(--primary);

  border-radius:20px;
}

::-webkit-scrollbar-track{
  background:#ddd;
}

/* ========================================
   RESPONSIVO
======================================== */
@media(max-width:768px){

  .section-title{
    font-size:22px;
  }

}