@font-face {
  font-family: Inter-Thin;
  src: url(../font/Inter-Thin.ttf);
}

@font-face {
  font-family: Inter-ExtraLight;
  src: url(../font/Inter-ExtraLight.ttf);
}

@font-face {
  font-family: Inter-Light;
  src: url(../font/Inter-Light.ttf);
}

@font-face {
  font-family: Inter-Regular;
  src: url(../font/Inter-Regular.ttf);
}

@font-face {
  font-family: Inter-Medium;
  src: url(../font/Inter-Medium.ttf);
}

@font-face {
  font-family: Inter-SemiBold;
  src: url(../font/Inter-SemiBold.ttf);
}

@font-face {
  font-family: Inter-Bold;
  src: url(../font/Inter-Bold.ttf);
}

@font-face {
  font-family: Inter-ExtraBold;
  src: url(../font/Inter-ExtraBold.ttf);
}

@font-face {
  font-family: Inter-Black;
  src: url(../font/Inter-Black.ttf);
}

.inter-thin {
  font-family: Inter-Thin;
}

.inter-extra-light {
  font-family: Inter-ExtraLight;
}

.inter-light {
  font-family: Inter-Light;
}

.inter-regular {
  font-family: Inter-Regular;
}

.inter-medium {
  font-family: Inter-Medium;
}

.inter-semi-bold {
  font-family: Inter-SemiBold;
}

.inter-bold {
  font-family: Inter-Bold;
}

.inter-extra-bold {
  font-family: Inter-ExtraBold;
}

.inter-black {
  font-family: Inter-Black;
}

:root {
  --black: #000000;
  --white: #FFFFFF;
  --primary: #CF035C;
  --secondary-100: #FFBE7A;
  --secondary-300: #FFA44B;
  --maple: #5A0E28;
}

body {
  color: var(--black);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: Inter-Regular;
  }

p,
span {
  font-family: Inter-Regular;
  font-style: normal;
}

/* TEXT COLORS*/

.text-white {
  color: var(--white);
}

.text-primary {
  color: var(--primary);
}

.text-secondary-100 {
  color: var(--secondary-100);
}

.text-secondary-300 {
  color: var(--secondary-300);
}

/* BACKGROUND COLORS*/

.bg-primary {
  background-color: var(--primary);
}

.bg-secondary-100 {
  background-color: var(--secondary-100);
}

.bg-secondary-300 {
  background-color: var(--secondary-300);
}

.bg-gradient {
  background: linear-gradient(90deg, var(--primary) 0%, var(--secondary-300) 100%);
}

.bg-gradient-reverse {
  background: linear-gradient(90deg, var(--secondary-300) 0%, var(--primary) 100%);
}

.bg-prerequisits {
  background-image: url('../img/bg-prerequisits.png');
  background-repeat: no-repeat;
  background-size: contain;
  background-position-x: center;
  background-position-y: bottom;
  max-height: 761px;
}

.bg-more-life {
  background-image: url('../img/bg-more-life-for-you.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  background-position-x: center;
  width: 100%;
}

/* BORDER COLORS */

.border-primary {
  border-color: var(--primary);
}

.border-secondary-100 {
  border-color: var(--secondary-100);
}

.border-secondary-300 {
  border-color: var(--secondary-300);
}

.shadow {
  box-shadow: -8px 8px 0px var(--maple);
}

/* HTML GLOBAL */

html {
  scroll-behavior: smooth;
}

.cursor-pointer {
  cursor: pointer;
}

.btn-before {
  width: 60px;
  margin-right: 32px;
}

.btn-after {
  width: 60px;
  margin-left: 32px;
}

.checkbtn {
  font-size: 30px;
  float: right;
  cursor: pointer;
  display: none;
}

#check {
  display: none;
}

nav ul li a {
  color: var(--gray-dark);
}

.max-w-400 {
  width: 100%;
  max-width: 400px;
}

.max-w-440 {
  width: 100%;
  max-width: 440px;
}

.max-w-550 {
  width: 100%;
  max-width: 550px;
}

.max-w-620 {
  width: 100%;
  max-width: 620px;
}

.max-w-630 {
  width: 100%;
  max-width: 630px;
}

.max-w-1010 {
  width: 100%;
  max-width: 1010px;
}

.max-w-1030 {
  width: 100%;
  max-width: 1030px;
}

.max-w-1140 {
  width: 100%;
  max-width: 1140px;
}

.max-w-1120 {
  width: 100%;
  max-width: 1120px;
}

.max-w-1180 {
  width: 100%;
  max-width: 1180px;
}

.max-w-1200 {
  width: 100%;
  max-width: 1200px;
}

/* ANIMATION */

[data-anime] {
  opacity: 0;
  transition: 0.5s;
}

[data-anime="top"] {
  transform: translate3d(0, -50px, 0);
  transition: 0.5s;
}

[data-anime="right"] {
  transform: translate3d(50px, 0, 0);
  transition: 0.5s;
}

[data-anime="left"] {
  transform: translate3d(-50px, 0, 0);
  transition: 0.5s;
}

[data-anime="bottom"] {
  transform: translate3d(0, 50px, 0);
  transition: 0.5s;
}

[data-anime="center"] {
  transform: translate3d(0, 0, 0);
  transition: 0.5s;
}

[data-anime].animate {
  opacity: 1;
  transform: translate3d(0px, 0px, 0px);
}

/* ACCORDION */
.accordion-content {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.5s ease, opacity 0.5s ease;
}

.accordion-content.open {
  opacity: 1;
  /* max-height será definido dinamicamente via JavaScript */
}

.arrow {
  transition: transform 0.3s ease;
  transform: rotate(180deg);
}

.arrow.open {
  transform: rotate(0deg);
}
/* MEDIA QUERYS */

/* XL HD */
@media (min-width: 1520px) {
  .movie{
    width: 100%;
    max-width: 940px;
    height: 530px;
    margin: auto;
  }

  .xl-mr-9 {
    margin-right: 16px;
  }

  .img-prerequisits {
    margin-left: 5px;
  }

}

/* LG Widescreen */
@media (min-width: 1280px) and (max-width: 1519px) {
  .movie{
    width: 100%;
    max-width: 940px;
    height: 530px;
    margin: auto;
  }

  .img-prerequisits {
    max-width: 640px;
  }

}

/* MD Desktop */
@media (min-width: 1024px) and (max-width: 1279px) {
  .movie{
    width: 100%;
    max-width: 840px;
    height: 475px;
    margin: auto;
  }

  .checkbtn {
    display: block;
    margin-left: auto;
    margin-right: 20px;
  }

  ul {
    position: fixed;
    width: 100%;
    height: 100vh;
    background: var(--primary);
    top: 80px;
    left: -100%;
    text-align: center;
    transition: all .5s;
  }

  nav ul li {
    display: block;
    margin: 20px 0;
    line-height: 30px;
  }

  nav ul li a {
    font-family: Inter-Medium;
    color: var(--blue);
  }

  #check:checked~ul {
    left: 0;
  }

  .img-prerequisites {
    width: 100%;
    max-width: 400px;
  }

  .img-prerequisits {
    max-width: 540px;
  }

}

/* SM Tablet */
@media (min-width: 768px) and (max-width: 1023px) {
  .movie{
    width: 100%;
    max-width: 740px;
    height: 420px;
    margin: auto;
  }

  .checkbtn {
    display: block;
    margin-left: auto;
    margin-right: 16px;
  }

  ul {
    position: fixed;
    width: 100%;
    height: 100vh;
    background: var(--primary);
    top: 80px;
    left: -100%;
    text-align: center;
    transition: all .5s;
  }

  nav ul li {
    display: block;
    margin: 20px 0;
    line-height: 30px;
  }

  nav ul li a {
    font-family: Inter-Regular;
    color: var(--blue-dark);
  }

  #check:checked~ul {
    left: 0;
  }

  .img-prerequisites {
    width: 100%;
    max-width: 400px;
  }

  .img-prerequisits {
    max-width: 400px;
  }

}

/* XS Mobile */
@media (min-width: 640px) and (max-width: 767px) {
  .btn-before {
    width: 30px;
    margin-right: 16px;
  }
  
  .btn-after {
    width: 30px;
    margin-left: 16px;
  }

  .checkbtn {
    display: block;
    margin-left: auto;
    margin-right: 16px;
  }

  ul {
    position: fixed;
    width: 100%;
    height: 100vh;
    background: var(--primary);
    top: 80px;
    left: -100%;
    text-align: center;
    transition: all .5s;
  }

  nav ul li {
    display: block;
    margin: 20px 0;
    line-height: 30px;
  }

  nav ul li a {
    font-family: Inter-Regular;
    color: var(--blue-dark);
  }

  #check:checked~ul {
    left: 0;
  }

  .movie{
    width: 100%;
    max-width: 640px;
    height: 338px;
    margin: auto;
  }

  .rotate-90 {
    transform: rotate(90deg);
  }

  .img-prerequisits {
    max-width: 340px;
  }

}

/* XS Mobile */
@media (min-width: 0) and (max-width: 639px) {
  .checkbtn {
    display: block;
    margin-left: auto;
    margin-right: 16px;
  }

  ul {
    position: fixed;
    width: 100%;
    height: 100vh;
    background: var(--primary);
    top: 80px;
    left: -100%;
    text-align: center;
    transition: all .5s;
  }

  nav ul li {
    display: block;
    margin: 20px 0;
    line-height: 30px;
  }

  nav ul li a {
    font-family: Inter-Medium;
    color: var(--blue-black);
  }

  #check:checked~ul {
    left: 0;
  }

  .img-prerequisites {
    width: 100%;
    max-width: 400px;
  }

  .movie{
    width: 100%;
    max-width: 500px;
    height: 248px;
    margin: auto;
  }

  .max-w-60 {
    width: 100%;
    max-width: 60px;
  }

  .rotate-90 {
    transform: rotate(90deg);
  }

  .bg-prerequisits {
    background-image: url('../img/bg-prerequisits.png');
    background-repeat: no-repeat;
    background-size: contain;
    background-position-x: center;
    background-position-y: bottom;
    max-height: 761px;
  }

}