/* =========================================================
   1. IMPORT FONTS
   ========================================================= */
@font-face {
    font-family: 'Primary';
    src: url('../fonts/Product Sans Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Primary-bold';
    src: url('../fonts/Product Sans Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'Primary-italic';
    src: url('../fonts/Product Sans Bold Italic.ttf') format('truetype');
    font-weight: normal;
    font-style: italic;
}

@font-face {
    font-family: 'Secondary';
    src: url('../fonts/SourceSansVariable-Roman.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Secondary-italic';
    src: url('../fonts/SourceSansVariable-Italic.ttf') format('truetype');
    font-weight: normal;
    font-style: italic;
}

/* =========================================================
   2. ROOT VARIABLES & THEME
   ========================================================= */
:root {
  /* Brand Colors */
  --accent: #3a8dde;
  --bg: #ffffff;
  --text: #2d1f0f;

  /* Brand Gradient */
  /* --gradient-main: linear-gradient(to top right, #c98772, #fdcbbc); */

  /* Typography */
  --font-base: 'Primary', Arial, sans-serif;
  --font-base-bold: 'Primary-bold', Arial, sans-serif;

  /* Border Radius */
  /* --radius-md: 12px; */
  /* --radius-lg: 15px; */
}

/* =========================================================
   3. BASE / RESET
   ========================================================= */
* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html,
body {
  margin: 0;
  padding: env(safe-area-inset-top, 0)
           env(safe-area-inset-right, 0)
           env(safe-area-inset-bottom, 0)
           env(safe-area-inset-left, 0);
  font-family: var(--font-base);
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  -webkit-overflow-scrolling: touch;
}

h1 {
  font-size: 72px !important;
  font-family: var(--font-base-bold);
}

h2 {
  font-size: 29px !important;
  font-family: var(--font-base-bold);
}

p {
  font-family: var(--font-base);
  font-size: 18px;
}

p.p-bold {
  font-family: 'Primary-bold';
}

.p-bold {
  font-family: 'Primary-bold';
}

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

.hero-image {
  width: 100%;
  position: relative;
}

.p-layout-width {
    max-width: 1010px;
    margin: 0 auto;
    padding-left: 20px;
    padding-right: 20px;
}

.p2-l-r {
  padding-left: 20px;
  padding-right: 20px;
}

.p2 {
  padding: 20px;
}

/* .hero-text {
    position: absolute;
    top: 5%;
  left: 12%;
} */

.btn-blue {
   background-color: #3a8dde;
   border-radius: 10px;
   padding: 10px;
   font-size: 18px;
   cursor: pointer;
   font-weight: bold;
   color: #ffffff;
}

.btn-black {
  background-color: #000000;
   border-radius: 10px;
   padding: 10px;
   font-size: 18px;
   cursor: pointer;
   font-weight: bold;
   color: #ffffff;
}

.btn-white {
  background-color: #ffffff;
   border-radius: 10px;
   padding: 10px;
   font-size: 18px;
   cursor: pointer;
   font-weight: bold;
   color: #3a8dde;
}

.mochila-img {
  width: 268px;
  padding: 0px 0px 19px 0px;
}

.blue-text {
   color: #3a8dde!important;
}

.white-text {
   color: #ffffff!important;
}

.brand-color--blue {
  background-color: #3a8dde;
}

.brand-color--black {
  background-color: #000000;
}

.black-text {
   color: #000000!important;
}

.divider-blue {
  background-color: #3a8dde;
  height: 40px;
  width: 100%;
  margin: 40px 0px 40px 0px;
}

.divider-grey {
  background-color: #cecdcd;
  height: 40px;
  width: 100%;
}

.legal-text {
  color: #8a8784;
  font-size: 13px;
}

 .img-magazines {
      max-width: 1200px!important;
      margin-top: -315px!important;
    }

  .text-center--justify {
     text-align: justify!important;
  }


/* =========================================================
   4. RESOPONSIVE QUERIES
   ========================================================= */
.mobile-only {
    display: none!important;
 }

 .desktop-only {
    display: block;
}

.mr-2--desktop-only {
      margin-right: 20px;
    }


@media (max-width: 991px) {

    .mobile-only {
        display: block!important;
    }

    .desktop-only {
        display: none!important;
    }

    .img-magazines {
      margin-top: -750px!important;
    }

    .h1-text-mobile {
      font-size: 40px!important;
    }

    .mochila-img {
      width: 143px!important;
      padding: 0px 0px 12px 0px!important;
    }

    .mb-2--mobile-only {
      margin-bottom: 20px;
    }

    .mr-2--desktop-only {
      margin-right: 0px;
    }

}

/* Base (Desktop 992px–1279px) */
.hero-text {
  position: absolute;
  top: 2%;
  left: 5%;
}

/* Large Desktop (1280px–1439px) */
@media (min-width: 1280px) {
  .hero-text {
    top: 2%;
    left: 6%;
  }
}

/* HD / Large Monitor (1440px–1599px) */
@media (min-width: 1440px) {
  .hero-text {
    top: 2%;
    left: 11%;
  }
}

/* 2K Displays (1600px–1919px) */
@media (min-width: 1600px) {
  .hero-text {
    top: 2%;
    left: 18%;
  }
}

/* 1080p Widescreen (1920px–2239px) */
@media (min-width: 1920px) {
  .hero-text {
    top: 2%;
    left: 22%;
  }
}

/* UltraWide (2240px–2559px) */
@media (min-width: 2240px) {
  .hero-text {
    top: 2%;
    left: 24%;
  }
}

/* 2.5K–3K Monitors (2560px–2879px) */
/* @media (min-width: 2560px) {
  .hero-text {
    left: 32%;
  }
} */

/* 4K Monitors (2880px–3199px) */
/* @media (min-width: 2880px) {
  .hero-text {
    left: 28%;
  }
} */

/* 5K Displays (3200px–3839px) */
/* @media (min-width: 3200px) {
  .hero-text {
    left: 20%;
  }
} */

/* 8K Displays (3840px and up) */
/* @media (min-width: 3840px) {
  .hero-text {
    left: 22%;
  }
} */