/*
 * ─── IMPORTS ────────────────────────────────────────────────────────────────────
 */
 @import url('https://fonts.googleapis.com/css2?family=Arima:wght@500&family=Cormorant+Upright&family=Manrope&family=Montserrat+Alternates&display=swap');

 /* font-family: 'Arima', cursive;
font-family: 'Cormorant Upright', serif;
font-family: 'Manrope', sans-serif;
font-family: 'Montserrat Alternates', sans-serif; */

/*
 * ─── GLOBALS ────────────────────────────────────────────────────────────────────
 */
 :root {
  /* var (--bright-green) */
  --bright-green: rgb(79, 231, 41); 
  /* var (--light-cyan) */
  --light-cyan: hsl(193, 38%, 86%);
  /* var (--neon-green) */
  --neon-green: hsl(150, 100%, 66%);
  /* var (--grayish-blue) */
  --grayish-blue: #313a48;
  /* var (--dark-grayish-blue) */
  --dark-grayish-blue: #202733;
  /* var (--white) */
  --white: white;
 }

* {
  margin: 0;
  padding: 0;
}

body, html {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    font-family: 'Manrope', sans-serif;
}

.parallax {
    /* The image used */
    background-image: url("../assets/bg-img.jpg");
     /* Full height */
    height: 100%;
     /* Create the parallax scrolling effect */
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
  }
  
main {
    display: flexbox;
    background-color: var (--bright-green);
    transition: 1s ease-in-out;
    padding-top: 10px;
}

.quotes-section {
  padding-top: 10px;
}

.col {
  border: 3px solid hsl(150, 100%, 66%);
  border-radius: 10px;
  padding: 0px;
  margin: 0;
  text-align: center;
}

.cta-container {
  display: flex;
  flex-direction: row;
  background-image: radial-gradient(circle, #52ffaf, #62feb5, #70fdbb, #7dfbc1, #89fac6, #88f7c4, #86f5c1, #85f2bf, #76eeb5, #66eaab, #55e5a1, #41e197);
  border: 3px solid rgb(38, 112, 19);
  border-radius: 10px;
  padding: 20px;
  width: 100%;
}

.cta-btn {
  margin: auto;
  padding: 10px;
  border-radius: 10px;  
  border: 3px solid rgb(64, 141, 45);
  color:rgb(26, 75, 14);
  font-family: 'Manrope', sans-serif;
  font-weight: bold;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  text-decoration: none;
  transition: all ease-in-out 0.3s;
  background-color: #f9ffa1;
}

.cta-btn:hover {
  background-color: var(--neon-green);
  box-shadow: -1px 1px 84px 12px #f9ffa1;
  transform: scale(1.1);
  transition: all ease-in-out 0.3s;
  color: rgb(42, 119, 119);
}

.flex-container {
  padding-bottom: 80px;
}

.motivate-img {
  height: 100%;
  width: 100%;
  background-position: center;
  background-repeat: no-repeat;
}

.text-container {
  background-color:rgba(36, 56, 31, 0.9);
  padding: 10px;
  height: 100%;
  text-align: center;
}

.text-title {
  color: #f9ffa1;
  padding: 10px;
  font-size: 1.8rem;
}

#text-body {
  color: #fff;
  line-height: 1.5;
  padding: 20px;
  font-size: 1.5rem;
  font-family: 'Montserrat Alternates', sans-serif;
}

span {
  color:rgb(44, 241, 241);
  font-size: larger;
  font-style: italic;
  font-weight: bold;
  font-family: 'Cormorant Upright', serif;
  letter-spacing: 1.5px;
}

.print-tracker {
  font-family: 'Cormorant Upright', serif;
  color:rgb(26, 75, 14);
  
  background-color: #f9ffa1;
  width: 100%;
  padding: 20px;
  text-align: center;
  border-radius: 10px;  
  border: 3px solid rgb(64, 141, 45);
  height: auto;
  margin-bottom: 30px;
}

.print-tracker p {
  font-size: 26px;
}

/* ──────────────────────────────────────────────────────────────────────────────── */
@media only screen and (max-device-width: 1366px) {
    .parallax {
      background-attachment: scroll;
    }
}

@media only screen and (max-width: 991px) {
  .col {
    width: 100%;
  }
  .row {
    margin: 10px;
  }
  .quotes-section {
    margin: auto;
  }
}