body {
  font-family: 'Comic Neue', cursive;
}
marquee{
  margin-left: 10%;
  margin-right: 10%;
}
/* .container {
  min-width: 1366px;
} */
.container-fluid{
  padding: 15px 30px;
}
/* TOP CONTAINER */
.top {
  margin-top: 20px;
  text-align: center;
  font-size: 0;
  position: relative;
}

.banner {
  width: 54%;
}

.top-box {
  width: 64%;
}

.about {
  position: relative;
}

.about-company {
  position: absolute;
  z-index: 1;
  font-size: 1.3vw;
  width: 64%;
  margin-left: auto;
  margin-right: auto;
  padding: 0 5%;
  top: 15px;
  left: 18%;
}

.company-detail {
  text-align: justify;
}

.company-name {
  margin-bottom: 10px;
  font-family: 'Source Serif Pro', serif;
  color: #665faf;
  font-size: 2.5vw;
}

.name {
  font-size: 1.6vw;
  font-family: 'Source Serif Pro', serif;
  color: #665faf;
}

.button {
  margin-top: 35px;
}

.btn {
  width: 18%;
  margin: 10px;
  padding: 10px 10px;
  font-family: 'Ubuntu', sans-serif;
  font-weight: bold;
  font-size: 1vw;
  display: inline-block;
}

.join-us-button {
  border-radius: 2rem;
  background-color: #665faf;
  border-color: #665faf;
  border-style: solid;
  color: #fff;
}

.join-us-button:hover {
  background-color: #534d96;
  color: #fff;
}
.join-us-button:active{
  transform: scale(0.95);
}
/* STORY CONTAINER */
.story {
  margin-top: 50px;
  position: relative;
}

.story-box {
  width: 69%;
  position: relative;
}

.story-image {
  width: 30%;
  position: relative;
  z-index: 1;
  right: 5%;
}

.story-body {
  width: 60%;
  text-align: left;
  position: absolute;
  z-index: 2;
  top: 30px;
  font-size: 1.6vw;
  left: 5%;
}

.story-head {
  font-weight: 600;
  font-size: 1.8vw;
}

/* MISSION CONTAINER */
.mission {
  margin-top: 50px;
  position: relative;
}

.mission-box {
  width: 69%;
  position: relative;
}

.mission-image {
  width: 30%;
  position: relative;
  z-index: 1;
  left: 5%;
}

.mission-body {
  width: 60%;
  text-align: right;
  position: absolute;
  z-index: 2;
  top: 25px;
  font-size: 1.6vw;
  right: 5%;
}

.mission-head {
  font-weight: 600;
  font-size: 1.7vw;
  margin-bottom: 25px;
}

/* WHY US CONTAINER */
.why-us {
  position: relative;
  margin-top: 50px;
}

.why-us-image {
  width: 40%;
  position: absolute;
  z-index: 1;
  left: 55%;
  bottom: 0;
}

.why-us-box {
  width: 75%;
  position: relative;
}

.why-us-body {
  text-align: left;
  position: absolute;
  z-index: 2;
  top: 1.4vw;
  left: 7%;

  display: inline-block;
}

.why-us-head {
  font-size: 1.6vw;
  font-weight: 600;
}

/* BULLET POINTS */
.points {
  border: solid 1px white;
  border-radius: 100px;
  padding: 1vw 6vw 1vw 0.7vw;
  font-size: 1.3vw;
}

.bullets {
  font-size: 1.3vw;
  margin-right: 10px;
  border: solid 1px white;
  border-radius: 100%;
  padding: 0.5vw 1vw;
  background-color: white;
}

/* WHAT WE OFFER CONTAINER */
.what-we-offer {
  position: relative;
  margin-top: 50px;
}

.offer-image {
  width: 35%;
  position: absolute;
  z-index: 1;
  left: 0;
  bottom: 0;
}

.offer-box {
  width: 75%;
  position: relative;
  left: 25%;
}

.offer-body {
  text-align: right;
  position: absolute;
  z-index: 2;
  top: 1.4vw;
  right: 5%;
}

.offer-head {
  font-size: 1.6vw;
  font-weight: 600;
}

/* OFFER BULLET POINTS */
.offer-points {
  border: solid 1px white;
  border-radius: 100px;
  padding: 0.7vw 0.7vw 0.7vw 6vw;
  font-size: 1.1vw;
}

.offer-bullets {
  font-size: 1.1vw;
  margin-left: 10px;
  border: solid 1px white;
  border-radius: 100%;
  padding: 7px 14px;
  background-color: white;
}

/* BOTTOM CONTAINER */
.bottom {
  margin-top: 50px;
  position: relative;
  width: 100%;
  text-align: center;
  font-size: 0;
}

.bottom-box {
  width: 70%;
}

.bottom-detail {
  position: absolute;
  width: 100%;
  bottom: 10px;
  font-size: 1.5vw;
}

.contact {
  width: 50px;
  margin-left: 5px;
  margin-right: 5px;
}
.contact:hover{
  transform: scale(1.5);
  margin-left: 15px;
  margin-right: 15px;
  transition: all 0.3s;
}
.contact:active{
  transform: scale(1.25)
}
hr {
  width: 20%;
  border: 1px solid grey;
}

.foot {
  font-weight: 600;
}

/* FOOTER */
.footer {
  margin: 0;
  text-align: center;
  background-color: #665fb0;
  padding: 10px;
}

.footer-links {
  color: #fff;
  font-family: 'Ubuntu', sans-serif;
  margin: 70px;
  text-decoration: none;
}
.footer-links:hover{
  text-decoration: none;
  color: #fff;
  font-weight: bold;
}