/*================================================*
  Reset
 *================================================*/
* { margin: 0; padding: 0; }
 
/*================================================*
  Variáveis
*================================================*/
:root {
  /* --color-primary: #ff171e; */
  --color-primary: #c2000a;
  --h1-font-size: clamp(23.61px, 10vw, 47.78px);
  --h2-font-size: clamp(22.13px, 10vw, 39.81px);
  --h3-font-size: clamp(20.74px, 10vw, 33.18px);
  --h4-font-size: clamp(19.44px, 10vw, 27.65px);
  --h5-font-size: clamp(18.22px, 10vw, 23.04px);
  --h6-font-size: clamp(17.07px, 10vw, 19.2px);
  --p-font-size: clamp(16px, 10vw, 16px);
  --small-font-size: clamp(15px, 10vw, 13.33px);
  --smaller-font-size: clamp(14.05px, 10vw, 13.33px);
  --button-font-size: clamp(15px, 10vw, 13.33px);
}

/*================================================*
  Barra de scroll
*================================================*/
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-thumb {
  background: var(--color-primary);
  border-radius: 20px;
}
::-webkit-scrollbar-track { background: #ffffff; }
  
/*================================================*
  Configurações globais
*================================================*/
html, body { 
  overflow-x: hidden; 
  font-family: "Poppins", Arial, sans-serif;
  color: #303030;
}
h1 { 
  font-size: var(--h1-font-size);
  font-weight: 800;
  line-height: 100%;
}
h2 { 
  font-size: var(--h2-font-size); 
  font-weight: 800;
  line-height: 100%;
}
h3 { 
  font-size: var(--h3-font-size); 
  font-weight: 800;
  line-height: 100%;
}
h4 { 
  font-size: var(--h4-font-size);
  font-weight: 800;
  line-height: 100%; 
}
h5 { 
  font-size: var(--h5-font-size); 
  font-weight: 800;
  line-height: 100%;
}
h6 { 
  font-size: var(--h6-font-size);
  font-weight: 600;
  line-height: 100%; 
}
p { 
  font-size: var(--p-font-size);
  color: #505050;
}
.square-decoration { 
  position: relative;
  z-index: 1;
}
.square-decoration::after {
  content: '';
  width: 30px;
  height: 30px; 
  top: 5px;
  left: -10px;
  z-index: -1;
  position: absolute;
  background: var(--color-primary);
  opacity: 0.5;
  color: #ffffff;
  padding: 0 10px;
  border-radius: 3px;
}
.text-small { font-size: var(--small-font-size); }
.text-smaller { font-size: var(--smaller-font-size); }
.btn { 
  font-size: var(--button-font-size);
  background: var(--color-primary);
  transition: 0.3s;
  &:hover {
    background: var(--color-primary);
    transform: scale(1.1) !important;
  }
  &.text-smaller { font-size: var(--smaller-font-size); }
}

/*================================================*
  Seção 1
 *================================================*/
#section1 {
  background: url(../img/background-herosection.webp);
  background-size: cover;
  background-position: center;
  .container .row { min-height: 75vh; }
}

/*================================================*
  Seção 2
 *================================================*/
#section2 {
  top: -50px;
  position: relative;
  z-index: 2;
  .container .bg-red { background: var(--color-primary); }
  i { font-size: clamp(18.22px, 10vw, 23.04px); }
}

/*================================================*
  Seção 3
 *================================================*/
#section3 {
  #cruz {
    margin-top: -50px;
    position: absolute;
    left: -100px;
    display: none
  }
  .card {
    background: #efefef;
    h6 { color: var(--color-primary); }
    i {
      color: var(--color-primary);
      font-size: clamp(18.22px, 10vw, 23.04px);
    }
  }
}

/*================================================*
  Seção 4
 *================================================*/
#section4 {
  #cruz2 {
    margin-top: -50px;
    position: absolute;
    right: -100px;
    display: none
  }
  a { color: var(--color-primary); }
}

/*================================================*
  Seção 5
 *================================================*/
#section5 { 
  background: url(../img/background.webp);
  background-size: cover; 
}

/*================================================*
  Seção 6
 *================================================*/
#section6 {
  .accordion-button {
    &:not(.collapsed) {
      background: rgba(255, 23, 30, 0.2);
      color: var(--color-primary);
      box-shadow: 0 0 0 0.25rem rgba(255, 23, 30, 0.3);
    }
    &:focus { box-shadow: 0 0 0 0.25rem rgba(255, 23, 30, 0.3); }
  }
  .accordion-item ul li {
    color: #707070
  }
}

/*================================================*
  Mapa
 *================================================*/
#map { display: block; border: 0; }

/*================================================*
  Rodapé
 *================================================*/
footer { 
  background: #efefef;
  .institucional {
    background: #dddddd;
    a { color: #505050; }
  } 
  .text-alert {
    color: var(--color-primary);
    max-width: 800px;
  }
}

/*================================================*
  Botão WhatsApp flutuante
 *================================================*/
#whatsapp-float img {
  position: fixed;
  bottom: 20px;
  left: 20px;
  z-index: 999;
  width: 70px;
  transition: 0.5s;
  animation: whatsapp-float 1s alternate infinite;
  &:hover img {
    transform: scale(1.1);
  }
}

/*================================================*
  Animação para Botão WhatsApp flutuante
 *================================================*/
@keyframes whatsapp-float {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(1.1);
  }
}

/*================================================*
  Configurações de responsividade
 *================================================*/
@media (min-width: 1440px) {
  #section4 .container { max-width: 1000px; }
}

@media (max-width: 480px) {
  br { display: none; }
  .container {
    padding-left: 24px;
    padding-right: 24px;
  }
  #section1 {
    padding-top: 50px;
    #modelo {
      margin-left: 20px;
    }
  }
}

@media (max-width: 768px) {
  .card { width: 100% !important; }
  #cruz, #cruz2 { width: 180px; }
}