/* @font-face {
  font-family: sfpro-reg;
  src: url(./sf-pro/SFPRODISPLAYREGULAR.OTF);
}
@font-face {
  font-family: sfpro-bold;
  src: url(./sf-pro/SFPRODISPLAYBOLD.OTF);
}
@font-face {
  font-family: sfpro-med;
  src: url(./sf-pro/SFPRODISPLAYMEDIUM.OTF);
} */
@import url("https://fonts.googleapis.com/css?family=Montserrat");
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@700&display=swap");

h1,h2,h3,h4,h5,h6{
    font-family: 'Montserrat', sans-serif;

}
p, text {
    font-family: 'Montserrat', sans-serif;
}
body{
    /* padding-top: 10px; */
    /* background-color: #1D3557; */
    /* padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 10px;
     */
     font-family: 'Montserrat', sans-serif;
    
}
*{
  margin:0;
  padding: 0;
  
}

:root { /* colors */
  --envira-green:  #1fda76;
  --envira-orange: #da4f1f;
  --envira-dark-orange: #993716;
  --envira-blue: #2649da;
  --envira-dark-blue: #1a3399;
  --whiteSmoke: #002e5b;
}


/* button, .btn{ 
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  color: var(--whiteSmoke);
  background-color: var(--envira-orange);
  font-size: 1.3rem;
  font-family: sfpro-bold;
  width: 128px;
  height: 45px;
  cursor: pointer;
  border-radius: 12px;
  text-align: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  position: relative;
  box-shadow: 0 0 0 0 rgba(192, 31, 31, 0.5), 0 0 0 0  rgba(0, 117, 20, 0.5);
} */
/* button::after, .btn::after{
  content: '';
  position: absolute;
  border-radius: inherit;
  width: 400px;
  height: 400px;
  top: -200px;
  left: -100px;
  background-color: deeppink;
  background-image: linear-gradient(
   225deg,
   #2f63f1 0%,
   #00e97c 50%,
   #ff5f3b 100%
   );
  z-index: -1;
  transition: transform 0.5s ease;
} */
/* button:hover, .btn:hover{
  transform: translate(-2px, -2px);
  box-shadow: 5px 3px 8px 1px rgba(7, 0, 0, 0.5), 5px 5px 20px 0  rgba(0, 117, 20, 0.5);
  scale: 1.06 
}
button:hover::after, .btn:hover::after{
  transform: rotate(150deg);
} */

/* --- navbar --- */
.navbar{
background-color: var(--whiteSmoke);
z-index: 1;

}
a:hover,
a:focus {
  text-decoration: none;
  color: #d19b13;
}
.active > a,
.active > a:hover,
.active > a:focus {
  background-color: transparent;
}
.active > a:after,
.active > a:hover:after,
.active > a:focus:after {
  display: block !important;
  position: absolute !important;
  left: 0 !important;
  bottom: -1px !important;
  width: 100% !important;
  height: 2px !important;
  background: linear-gradient(to right, #F4B315 0%, #F4B315 100%) !important;
  content: "" !important;
  transition: width 0.2s !important;
}
.navbar:after{ /* razor blade div effect */
  position: absolute;
  z-index: -1;
  width: 100%;
  height: 100%;
  content: '';
  background: inherit;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  transform-origin: bottom left;
  /* transform: skewY(1.4deg); */
}
.navbar-box{
  height:40px;
  display:flex;
  align-items:center;
  justify-content: space-between;
  margin: 0vw 4vw;
  padding-top: 2rem;
  padding-bottom:1rem;
  gap: 3vw;
}
.logo-container{
  padding-top: .5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 6px;
}
.logo{
  font-family: sfpro-bold;
  font-size:28px;
  display: flex;
  justify-content: center;
  align-items: center;
  /* color: var(--envira-dark-orange);  */
  /* line-height: 6px; */
  /* background: -webkit-linear-gradient(100deg,#993716, #ff4000);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent; */
  color: var(--envira-dark-orange);
  margin-bottom: 32px;
}
.sub-logo{
  font-family: sfpro-bold;
  font-size: 12px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--envira-dark-orange);
  position: absolute;
}
/* .navbar-links{
  width: 270px;
  display: flex;
  gap: 30px;
  align-items: center;
} 
.navbar-link{ 
  font-family: sfpro-bold;
  height:40px;
  flex:1 1 auto;
  font-size:18px;
  color: rgb(69, 69, 69);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.navbar-link:hover{
  color: #00e97c;
  transform: translate(-1px, -1px);
} */

/* --- intro (hero) ---*/
.hero{
  background-color: var(--whiteSmoke);
}
.hero-inner{


  display: flex;
  justify-content: center;
  align-items: center;
  height: 92vh;
  padding-top: 4vh;
}
.intro-text-container{
  display: flex;
  justify-content: center;
  flex-direction: column;
  margin: 0 0vw 0vh 7vw;
}
.slogan{
  display: flex;
  color: var(--whiteSmoke); 
  font-size: 4rem;
  font-family: 'Crimson Text';
  line-height: 1;
}
.sub-slogan{
  display: flex;
  color:  var(--envira-green);
  font-size: 4rem;
  font-family: 'Crimson Text';
  margin-top: 0; /*may have to change this to optimize for page zoom discrepancies*/
  line-height: 1;
}
.sub-text{
  display: flex;
  font-size:1.5rem;
  color: var(--whiteSmoke);
  margin-top: 0%;
  margin-bottom: 1rem;
}
.bg-img1-woman-container{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height:100%;
  margin: 0 7vw 0vh 0vw;
  overflow-x: hidden;

}
.bg-img1-woman{
  height: 100%;
  width: 100%
}
@media only screen and (max-width:1080px){
  .slogan{
      font-size: 3rem;
      margin-top: 2rem;
  }
  .sub-slogan{
      font-size: 2.8rem;
      margin-top: 0%;
      margin-bottom: 2%;
  }
  .sub-text{
      font-size: 20px;
     
      margin-top: 0%;
      margin-bottom: 20px;
  }
  .int-elements{
      padding-top: 88px;
  }
  .intro-img{
      padding-top: 1rem;
  }
  .intro-btn{
      font-size:20px;
      padding: 4px;

  }
  .bottom-slogan-container{
      display: flex;
      flex-direction: column;
      align-items: center;
  }
}
@media only screen and (max-width:768px){
  .navbar-box{
      height: 60px;
  }
  .navbar-links{
      display: none;
  }
  /* .btn{
      border-radius: 0
  } */
  .hero-inner{
      flex-direction: column;
      height: auto;
      width: auto;
      margin: 0;
  }
  .intro-text-container{
      margin: 2vh 5vw 2vh 5vw;
      align-items: center;
      text-align: center;
  }
  .slogan{
      font-size: 1.3rem;
      margin-top: 2rem;
  }
  .sub-slogan{
      font-size: 1.3rem;
      margin-top: 0%;
      margin-bottom: 2%;
  }
  .sub-text{
      font-size: 10px;
     
      margin-top: 0%;
      margin-bottom: 20px;
  }
  .int-elements{
      padding-top: 88px;
  }
  .intro-img{
      padding-top: 1rem;
  }
  .intro-btn{
      font-size:10px;
      padding: 4px;

  }
  .bottom-slogan-container{
      display: flex;
      flex-direction: column;
      align-items: center;
  }
      /* .bg-img1-woman-container{
      margin: 0 0 0 0;
      padding: 0 2vw 0 2vw;
  } */
  .bg-img1-woman{
      /* margin: 0 0 0 0; */
      /* width: 100%;
      height: 100%; */
      /* margin-bottom: 3rem; */
  }
}

/* --- body 1; features cards --- */
.body-1-features{

  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--whiteSmoke);
  position: relative;
  width: 100%;
  height: auto;
  box-sizing: border-box;
  padding: 30px;
  z-index: 1;
}
.body-1-features:after{ /* razor blade div effect */
  position: absolute;
  width: 100%;
  height: 100%;
  content: '';
  background: inherit;
  z-index: -1;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  transform-origin: bottom right;
  transform: skewY(3deg);
}
.all-cards-container{ /* container holds all cards */
  width: 80vw;
  margin-top: -7%;
  margin-left: 5vw;
  margin-right: 5vw;
  display: flex;
  gap: 50px;
  justify-content: center;
}
.feature-card-container{ /* individual card container, universally used */
  background-color: var(--whiteSmoke);
  width: 200px;
  height: auto;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content:flex-start;
  box-shadow: 7px 7px 10px rgb(131, 131, 131);
}
.feature-img-container-align{ /* contains all feature icon */
  margin-top: 5vh; /* may need to change vh */
  display: flex;
  justify-content: center;
  align-items: baseline;
}
.feature-text-container-align{ /* contains all feature text */
  margin: 1vh 10% 2.5vh 10%; /* may need to change vh */
}
@media only screen and (max-width:768px){
  .all-cards-container{
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      gap: 15px;
      margin-top: -10vh;
  }
  .feature-card-container{
      width: 350px;
      height: auto;
  }
  .feature-text-container-align{
      margin: 1vh 10px 4vh 10px; /* may need to change vh */

  }
  body h1{
    font-size: 20px;
  }
  body h2{
    font-size: 15px;
  }
}
.feature-img-container{ /* green circle behind feature icon */
  background-color: var(--envira-green);
  border-radius: 50%;
  width: 90px;
  height: 90px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 3px;
}
.feature-card-container img{ /* feature icon */
  height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
}
.clipboard{
  width: 65px;
  height: auto;
}
.truck{
  width: 70px;
  height: auto;
  padding-top: 5%;
}
.cash{
  width: 60px;
  height: auto;
}
.feature-title{
  font-family: sfpro-bold;
  font-size: large;
  text-align: center;
  font-weight: bold;
  color: black;
  margin-top: 2%;
}
.feature-subtext{
  margin-top: 1%;
  color: black;
  height: auto;
  text-align: center;
}
.fine-print{
  margin-top: 2%;
  color: rgb(75, 75, 75);
  text-align: center;
  font-size: small;
}

body h1{
  font-size: 30px;
  font-weight: 700;

}
body{
overflow-x: hidden;
}