/* 
---- 01 TYPOGRAPHY SYSTEM

- FONT SIZE SYSTEM (px)
10 / 12 / 14 / 16 / 18 / 20 / 24 / 30 / 36 / 44 / 52 / 62 / 74 / 86 / 98

- FONT WEIGHTS:
Default: 400
Medium: 500
Semi-bold: 600
Bold: 700

- LINE HEIGHTS:
Default: 1
Small: 1.05
Medium: 1.2
Paragraph default: 1.6

- Letter spacing
-0.5px
0.75px

---- 02 COLORS
#506ca4
#454078
#f2b637
#ec7c24
#b47339 

---- 03 TINTS AND SHADES
#f7d387
#292648

---- 05 SHADOWS
0 2.4rem 4.8rem rgba(0, 0, 0, 0.075);

---- 05 BORDER-RADIUS

Default: 9px
Medium: 11px

- SPACING SYSTEM (px)
2 / 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 80 / 96 / 128
*/

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

html {
  /* font-size: 10px; */
  /* 10px / 16px = 0.625 = 62.5% */
  /* Percentage of user's browser font-size setting */
  font-size: 62.5%;
}

body {
  font-family: "Be Vietnam Pro", sans-serif;
  line-height: 1;
  font-weight: 400;
}

/*************************************************
 TOP OF PAGE 
 *************************************************/

.div--top {
  background-image: linear-gradient(
      to right bottom,
      rgba(133, 69, 13, 0.598),
      rgba(104, 63, 27, 0.35)
    ),
    url(img/okc.jpg);
  background-size: 100% 100%;
  min-height: 100vh;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center; /* to align horizontally */
  align-items: center; /* to align vertically */
  gap: 1.4rem;
}

.main-heading {
  font-size: 3.6rem;
  color: #fff;
}

.subheading {
  color: #fff;
  font-size: 1.8rem;
  margin-bottom: 1.6rem;
}

.button {
  background: #3498db;
  background-image: -webkit-linear-gradient(top, #3498db, #2980b9);
  background-image: -moz-linear-gradient(top, #3498db, #2980b9);
  background-image: -ms-linear-gradient(top, #3498db, #2980b9);
  background-image: -o-linear-gradient(top, #3498db, #2980b9);
  background-image: linear-gradient(to bottom, #3498db, #2980b9);
  -webkit-border-radius: 28;
  -moz-border-radius: 28;
  border-radius: 28px;
  font-family: Arial;
  color: #ffffff;
  font-size: 1.6rem;
  padding: 10px 20px 10px 20px;
  text-decoration: none;
}

.button:hover {
  background: #3cb0fd;
  color: #fff;
  background-image: -webkit-linear-gradient(top, #3cb0fd, #3498db);
  background-image: -moz-linear-gradient(top, #3cb0fd, #3498db);
  background-image: -ms-linear-gradient(top, #3cb0fd, #3498db);
  background-image: -o-linear-gradient(top, #3cb0fd, #3498db);
  background-image: linear-gradient(to bottom, #3cb0fd, #3498db);
  text-decoration: none;
}

/*************************************************
 SOLUTIONS SECTION 
 *************************************************/
.section--solutions {
  padding: 2.8rem;
  background-color: #f2b637;
  min-height: 100vh;
}

.section-heading {
  text-align: center;
  font-weight: 500;
  margin-top: 3.2rem;
  margin-bottom: 3.2rem;
  color: #454078;
  font-size: 2.4rem;
}

.cards {
  display: flex;
  gap: 1.4rem;
  text-align: center;
  margin-top: 3.2rem;
}

.solution-img-bg {
  background-color: #edd196eb;
  width: 100%;
  border-radius: 1.2rem 1.2rem 0 0;
  padding: 3.2rem 1.6rem 1.6rem 1.6rem;
}

.here:link,
.here:visited {
  text-decoration: none;
  color: #454078;
}

.here:hover {
  color: #292648;
}

.logos {
  height: 7.2rem;
  margin-bottom: 1.6rem;
}

.logo-description {
  font-size: 1.6rem;
  line-height: 2.5rem;
  color: #292648;
  text-align: left;
  padding: 1.6rem;
}

.solution {
  background-color: #f7d4876b;
  box-shadow: 0 2.4rem 4.8rem rgba(0, 0, 0, 0.075);
  border-radius: 1.2rem;
  min-height: 50vh;
}

.down-arrow {
  height: 7.2rem;
}

.arrow {
  width: 100%;
  text-align: center;
}

/*************************************************
 ABOUT SECTION 
 *************************************************/
.section--about {
  min-height: 100vh;
  background-color: #454078;
  padding-top: 4.8rem;
  padding-bottom: 24rem;
}

.about-heading {
  color: #f2b637 !important;
}

.white-arrow {
  text-align: center;
  margin-bottom: 4.5rem;
}

.elizabeth-photo {
  position: absolute;
  z-index: 10;
  right: 10rem;
  top: 148rem;
  height: 65%;
}

.about-div {
  display: flex;
  background-color: hsla(246, 18%, 55%, 0.62);
  box-shadow: 0 2.4rem 4.8rem rgba(0, 0, 0, 0.075);
  /* height: 25rem; */
  margin-top: 3.2rem;
  border-radius: 3.2rem;
  margin-left: 3.2rem;
  margin-right: 3.2rem;
}

.about-desc {
  color: #fff;
  font-size: 1.6rem;
  align-self: flex-start;
  width: 60%;
  padding: 3.2rem;
  /* margin-top: 2.3rem; */
  line-height: 1.6;
  display: inline-block;
  text-align: left !important;
}

/*************************************************
 CONTACT SECTION 
 *************************************************/
.section--contact {
  background-color: #f2b637;
  padding-top: 6rem;
  min-height: 100vh;
  position: relative;
}

.footer-date {
  position: absolute;
  bottom: 0;
  right: 0;
}

.icons {
  font-size: 5rem;
  color: #454078;
}

.contact-icons {
  display: flex;
  justify-content: center;
  margin-top: 20rem;
  gap: 5.6rem;
}

.fa:hover {
  color: #292648 !important;
}