/*
Theme Name: Outloock 2026 LP
Author: Meduzzen
Description: A blank WordPress theme
Version: 1.0
*/

/* standartization */

:root {
  --font-family: "Asap", sans-serif;
}

/* primary */

#primary {
  overflow: hidden;
}

/* container */

.container {
  max-width: 1920px;
  margin: 0 auto;
}

@media screen and (min-width: 1536px) {
  .container {
    padding-left: 140px;
    padding-right: 140px;
  }
}

@media screen and (min-width: 1280px) and (max-width: 1535px) {
  .container {
    padding-left: 120px;
    padding-right: 120px;
  }
}

@media screen and (min-width: 1024px) and (max-width: 1279px) {
  .container {
    padding-left: 80px;
    padding-right: 80px;
  }
}

@media screen and (min-width: 768px) and (max-width: 1023px) {
  .container {
    padding-left: 40px;
    padding-right: 40px;
  }
}

@media screen and (max-width: 767px) {
  .container {
    padding-left: 16px;
    padding-right: 16px;
  }
}

/* body */

body {
  font-family: var(--font-family);
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0) 0%,
    #fff 17.79%,
    #e5f4ff 100%
  );
}

/* buttons */

.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: fit-content;
  max-height: fit-content;
  font-family: var(--font-family);
  font-weight: 700;
  line-height: 100%;
  text-align: center;
  color: #fff;
  background: linear-gradient(90deg, #fe8836 0%, #f63d3d 100%);
  background-size: 200% 100%;
  background-position: 0 0;
  transition: background-position 0.4s ease;
}

@media screen and (min-width: 1280px) {
  .btn:hover {
    background-position: 100% 0;
  }
}

@media screen and (min-width: 1536px) {
  .btn {
    font-size: 48px;
    border-radius: 61px;
    padding: 37px 128px;
  }
}

@media screen and (min-width: 1280px) and (max-width: 1535px) {
  .btn {
    font-size: 40px;
    border-radius: 51px;
    padding: 36px 107px;
  }
}

@media screen and (min-width: 1024px) and (max-width: 1279px) {
  .btn {
    font-size: 32px;
    border-radius: 41px;
    padding: 24px 86px;
  }
}

@media screen and (min-width: 768px) and (max-width: 1023px) {
  .btn {
    font-size: 24px;
    border-radius: 31px;
    padding: 16px 58px;
  }
}

@media screen and (max-width: 767px) {
  .btn {
    font-size: 16px;
    border-radius: 20px;
    padding: 12px 41px;
  }
}