@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&display=swap");
:root {
  --primary: #E60000;
  --secondary: #981D13;
  --white: #fff;
  --black: #000;
}

body {
  margin: 0;
  padding: 0;
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  font-style: normal;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

header {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  padding-left: 16px;
  z-index: 1;
}
@media screen and (min-width: 992px) {
  header {
    padding-left: 130px;
  }
}
header a.logo {
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--primary);
}
@media screen and (min-width: 992px) {
  header a.logo {
    width: 120px;
    height: 120px;
  }
}
header a.logo > img {
  object-fit: contain;
  width: 50px;
}
@media screen and (min-width: 992px) {
  header a.logo > img {
    width: 70px;
  }
}

@keyframes headerimageAnimation {
  from {
    left: 100%;
    top: -100%;
  }
  to {
    left: 0;
    top: 0;
  }
}
.header-image {
  position: relative;
  overflow: hidden;
  margin: 0 0 54px 0;
}
.header-image:after {
  display: block;
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  left: 100%;
  top: -100%;
  background: linear-gradient(270deg, rgba(239, 145, 158, 0) 95.14%, #EF919E 100%), linear-gradient(180deg, rgba(239, 145, 158, 0) 77.6%, #EF919E 100%);
  animation-name: headerimageAnimation;
  animation-duration: 1s;
  animation-delay: 0.5s;
  animation-fill-mode: forwards;
}
.header-image > img {
  width: 100%;
  height: 384px;
  object-fit: cover;
}
@media screen and (min-width: 992px) {
  .header-image > img {
    height: 480px;
  }
}

h1 {
  color: var(--secondary);
  font-size: 28px;
  font-weight: 600;
  line-height: 38px;
}
@media screen and (min-width: 992px) {
  h1 {
    font-size: 60px;
    line-height: 72px;
  }
}

p {
  font-size: 18px;
  font-weight: 400;
  line-height: 30px;
  margin: 30px 0 36px 0;
}
p a {
  text-decoration: none;
  color: var(--black);
}
p a:hover {
  text-decoration: underline;
}

a.btn-primary {
  font-size: 1rem;
  font-weight: 600;
  padding: 0.9375rem 1.25rem;
  border: none;
  overflow: hidden;
  background-image: url("data:image/svg+xml,%3Csvg width='50' height='44' viewBox='0 0 50 44' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='16' y='44' width='30' height='34' transform='rotate(-90 16 44)' fill='url(%23paint0_linear_1895_1080)'/%3E%3Crect width='30' height='34' transform='matrix(-1 -2.06186e-09 1.96898e-09 1 50.5 10)' fill='url(%23paint1_linear_1895_1080)'/%3E%3Cdefs%3E%3ClinearGradient id='paint0_linear_1895_1080' x1='9.78049' y1='62.0709' x2='63.358' y2='56.1343' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23E60000'/%3E%3Cstop offset='0.182292' stop-color='%23E60000' stop-opacity='0.25'/%3E%3Cstop offset='0.357942' stop-color='%23E60000' stop-opacity='0'/%3E%3C/linearGradient%3E%3ClinearGradient id='paint1_linear_1895_1080' x1='-6.21951' y1='18.0709' x2='47.358' y2='12.1343' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23E60000'/%3E%3Cstop offset='0.182292' stop-color='%23E60000' stop-opacity='0.25'/%3E%3Cstop offset='0.357942' stop-color='%23E60000' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E%0A");
  background-repeat: no-repeat;
  background-size: initial;
  background-position: bottom right;
  -webkit-transition: color 0.5s ease-in-out;
  transition: color 0.5s ease-in-out;
  position: relative;
  z-index: 8;
  color: var(--black);
  text-decoration: none;
}
a.btn-primary:hover {
  color: var(--white);
}
a.btn-primary:hover:before {
  transform: scaleX(1) scaleY(1);
  z-index: -1;
}
a.btn-primary:before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-image: url("data:image/svg+xml,%3Csvg width='154' height='44' viewBox='0 0 154 44' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_1194_4560)'%3E%3Crect width='154' height='44' fill='%23A60000'/%3E%3Cg filter='url(%23filter0_f_1194_4560)'%3E%3Crect x='12' y='8' width='174' height='67' fill='%23FF5173'/%3E%3C/g%3E%3Cg filter='url(%23filter1_f_1194_4560)'%3E%3Crect x='57' y='28' width='114' height='51' fill='%23E60000'/%3E%3C/g%3E%3C/g%3E%3Cdefs%3E%3Cfilter id='filter0_f_1194_4560' x='-6' y='-10' width='210' height='103' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeBlend mode='normal' in='SourceGraphic' in2='BackgroundImageFix' result='shape'/%3E%3CfeGaussianBlur stdDeviation='9' result='effect1_foregroundBlur_1194_4560'/%3E%3C/filter%3E%3Cfilter id='filter1_f_1194_4560' x='39' y='10' width='150' height='87' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeBlend mode='normal' in='SourceGraphic' in2='BackgroundImageFix' result='shape'/%3E%3CfeGaussianBlur stdDeviation='9' result='effect1_foregroundBlur_1194_4560'/%3E%3C/filter%3E%3CclipPath id='clip0_1194_4560'%3E%3Crect width='154' height='44' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: bottom right;
  transform: scaleX(0) scaleY(0);
  transform-origin: bottom right;
  transition: transform 0.5s ease-in-out;
  z-index: -1;
}

footer {
  padding: 52px 0 18px 0;
  font-size: 14px;
  margin-top: auto;
}
footer > p {
  padding: 0;
  margin: 0;
  font-size: 14px;
}