* {
  transition: all 0.5s ease-in-out;

  /* -webkit-user-select: none;

  -moz-user-select: none;

  -ms-user-select: none;

  user-select: none; */
}

:root {
  --brown: #4f4e4e;

  --gray: #d5d5d9;

  --lightGreen: #b2d708;

  --darkBlue: #003874;

  --blue: #00b5ff;

  --lightBlue: #7cd6ff;
}

body {
  border-left: 0.8rem solid var(--lightGreen);

  border-right: 0.8rem solid var(--lightGreen);

  overflow-x: hidden;
}

/* Fonts */

@font-face {
  src: url(../fonts/ArchivoBlack-Regular.ttf);

  font-family: "archiveBlack-font";
}

@font-face {
  src: url(../fonts/ArchivoBlack-Regular.ttf);

  font-family: "archive-Black-font";
}

@font-face {
  src: url(../fonts/RubikMonoOne-Regular.ttf);

  font-family: "rubikMonoOne-font";
}

@font-face {
  src: url(../fonts/Roboto-Bold.ttf);

  font-family: "robotoBold-font";
}

@font-face {
  src: url(../fonts/Roboto-Medium.ttf);

  font-family: "robotoMedium-font";
}

@font-face {
  src: url(../fonts/Roboto-Regular.ttf);

  font-family: "robotoRegular-font";
}

/* Fonts Classes */

.archive-Black-font {
  font-family: "archiveBlack-font";
}

.archiveBlack-font {
  font-family: "archiveBlack-font";
}

.rubikMonoOne-font {
  font-family: "rubikMonoOne-font";
}

.robotoBold-font {
  font-family: "robotoBold-font";
}

.robotoMedium-font {
  font-family: "robotoMedium-font";
}

.robotoRegular-font {
  font-family: "robotoRegular-font";
}

/* Navbar */

.navbar {
  padding: 0;

  z-index: 6;
}

.bg-green {
  background: var(--lightGreen);
}

.navbar-toggler {
  outline: 0 !important;

  cursor: pointer;

  position: relative;

  z-index: 2;

  padding-right: 1rem;
}

.navbar-toggler i {
  color: #fff;

  font-size: 1.5rem;

  cursor: pointer !important;
}

.navbar-brand {
  background: #fff;

  padding: 0.5rem 0.5rem 0.5rem 15rem;

  position: relative;

  z-index: 1;
}

.navbar-brand::after {
  content: "";

  position: absolute;

  top: 0;

  right: -5.9rem;

  width: 0;

  height: 0;

  border-bottom: 6.15rem solid #fff;

  border-right: 6rem solid transparent;

  z-index: -1;
}

.logo {
  width: 15rem;
}

.navbar-nav .nav-link {
  text-align: center;

  color: #fff;

  position: relative;
}
.solution-link {
  color: #fff;
  text-align: center;
}
.solution-link:hover {
  color: #fff;
  text-decoration: none;
}
.dropdown-menu {
  background-color: transparent;
  background-clip: padding-box;
  border: none;
}
/* .dropdown:hover .dropdown-menu {
  display: block;
} */
.dropdown-item {
  color: #fff;
  text-align: center;
  position: relative;
}
.dropdown-item:hover {
  color: #fff;
  background-color: transparent;
}

@keyframes nav-link-anim {
  from {
    width: 0;
  }

  to {
    width: 40px;
  }
}
.navbar-nav .nav-link:hover::before,
.dropdown-item:hover::before,
.solution-link:hover::before {
  display: block;

  content: "";

  position: absolute;

  bottom: 0;

  left: 48.5%;

  width: 40px;

  height: 3px;

  background: var(--blue);

  animation: nav-link-anim 0.5s ease-in-out;
}

@media (max-width: 992px) {
  .navbar-nav .nav-link:hover::before {
    left: 48%;
  }
}

@media (max-width: 768px) {
  .navbar-nav .nav-link:hover::before {
    left: 47%;
  }
}

@media (max-width: 576px) {
  .navbar-nav .nav-link:hover::before {
    left: 46%;
  }
}

@media (max-width: 450px) {
  .navbar-nav .nav-link:hover::before {
    left: 45%;
  }
}

@media (max-width: 380px) {
  .navbar-nav .nav-link:hover::before {
    left: 44%;
  }
}

.navbar-collapse {
  position: absolute;

  left: 0;

  top: 98px;

  width: 100%;

  padding-top: 4rem;

  height: 87vh;

  background: rgba(0, 56, 116, 0.9);
}

@media (max-width: 992px) {
  .navbar-brand {
    padding: 0.5rem 0.5rem 0.5rem 10rem;
  }
}

@media (max-width: 768.98px) {
  .navbar-brand {
    padding: 0.5rem 0.5rem 0.5rem 5rem;
  }
}

@media (max-width: 576.98px) {
  .navbar-collapse {
    top: 71px;
  }

  .navbar-brand {
    padding: 0.5rem 0.5rem 0.5rem 2rem;
  }

  .navbar-brand::after {
    content: "";

    position: absolute;

    top: 0;

    right: -4rem;

    width: 0;

    height: 0;

    border-bottom: 4.45rem solid #fff;

    border-right: 4rem solid transparent;
  }

  .logo {
    width: 10rem;
  }
}

/* Heading Area */

.heading-area {
  background: url(../images/top-bg-blue.jpg) no-repeat center fixed;

  background-size: cover;

  position: relative;
}

.heading-area p {
  position: absolute;
  top: 2%;
  left: 20%;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 1.5px;
}

@media (max-width: 375.98px) {
  .heading-area p {
    left: 16%;
  }
}

.heading-area h1 {
  color: var(--blue);

  letter-spacing: 0.4rem;
}

.heading-area a {
  display: block;

  color: #fff;

  width: 10rem;

  font-size: 14px;

  padding: 0.3rem 0;

  border: 2.25px solid var(--lightGreen);

  margin: 4rem auto 0;

  border-radius: 0.3rem;
}
.main-btn {
  display: block;
  text-align: center;
  color: var(--darkBlue);

  width: 10rem;

  font-size: 14px;

  padding: 0.3rem 0;

  border: 2.25px solid var(--lightGreen);

  margin: 4rem 0 0;

  border-radius: 0.3rem;
}
@media (max-width: 991.98px) {
  .main-btn {
    margin: 4rem auto 0;
  }
}

.heading-area a:hover,
.main-btn:hover {
  text-decoration: none;
}

.btn-slide-down {
  position: relative;

  z-index: 1;
}

@keyframes btn-slide-down {
  from {
    height: 0;
  }

  to {
    height: 100%;
  }
}

.btn-slide-down::after {
  content: "";

  position: absolute;

  left: 0;

  top: -0.13px;

  width: 101%;

  height: 0;

  background: var(--lightGreen);

  z-index: -1;

  border-radius: 0.1rem;
}

.btn-slide-down:hover::after {
  height: 100%;

  animation: btn-slide-down 0.3s linear;
}

.btn-slide-down1 {
  position: relative;

  z-index: 1;
}

.btn-slide-down1::after {
  content: "";

  position: absolute;

  left: 0;

  top: -0.13px;

  width: 100%;

  height: 0;

  background: var(--lightGreen);

  z-index: -1;

  border-radius: 0.1rem;
}

.btn-slide-down1:hover::after {
  height: 100%;

  animation: btn-slide-down 0.3s linear;
}

@media (max-width: 768.98px) {
  .heading-area h1 {
    font-size: 1.8rem;
    letter-spacing: 0.2rem;
  }
}

/* Numbers Area */

.numbers-area {
  padding: 3rem 0;
}

.number-main-heading {
  color: var(--darkBlue);

  padding: 0 15%;

  font-size: 2.5rem;
}

@media (max-width: 1400px) {
  .number-main-heading {
    padding: 0 12%;
  }
}

@media (max-width: 1200px) {
  .number-main-heading {
    padding: 0 10%;
  }
}

@media (max-width: 1050px) {
  .number-main-heading {
    padding: 0 7%;
  }
}

@media (max-width: 992px) {
  .number-main-heading {
    padding: 0 6%;
  }
}

@media (max-width: 769px) {
  .number-main-heading {
    padding: 0 3%;
  }
}

@media (max-width: 576.98px) {
  .number-main-heading {
    padding: 0 1%;
  }
  .number-main-heading2 {
    font-size: 1.85rem;
  }
}

.number {
  position: relative;

  font-size: 4rem;

  border: 1px solid transparent;

  border-radius: 50%;

  padding: 19%;

  width: 13rem;

  background: url(../images/gray-circle.svg) no-repeat center;

  background-size: 45%;

  margin: auto;

  color: var(--darkBlue);
  transition: none;
}

.number:hover {
  background: url(../images/hover-circle.svg) no-repeat center;

  background-size: 60%;
  transition: none;
}

.number1 {
  position: relative;

  font-size: 4rem;

  border: 1px solid transparent;

  border-radius: 50%;

  padding: 16%;

  width: 14rem;

  background: url(../images/gray-circle.svg) no-repeat center;

  background-size: 45%;

  margin: auto;

  color: var(--darkBlue);
  transition: none;
}

.number1:hover {
  background: url(../images/hover-circle.svg) no-repeat center;

  background-size: 60%;
  transition: none;
}

.plus-container {
  position: absolute;

  top: 4.5rem;

  left: -1.9rem;

  z-index: 2;
}
.plus-container1 {
  position: absolute;

  top: 4.95rem;
  left: -2rem;

  z-index: 2;
}

@media (max-width: 1200.98px) {
  .plus-container {
    top: 3.9rem;

    left: -1.9rem;
  }
  .plus-container1 {
    top: 4.35rem;
    left: -1.9rem;
  }
}

@media (max-width: 992px) {
  .plus-container {
    display: none;
  }
  .plus-container1 {
    display: none;
  }
}

.fas.fa-plus {
  color: #c6c6c6;

  font-size: 3.7rem;
}

@media (max-width: 992px) {
  .number {
    padding: 6%;
  }
  .number1 {
    padding: 6%;
  }
  .text-center-md {
    text-align: center;
  }
}

@media (min-width: 993px) and (max-width: 1030px) {
  .number::before {
    content: "";

    position: absolute;

    top: 50%;

    left: -18px;

    width: 60px;

    height: 4px;

    background: var(--darkBlue);
  }

  .number::after {
    content: "";

    position: absolute;

    top: 50%;

    right: -18px;

    width: 60px;

    height: 4px;

    background: var(--darkBlue);
  }
  .number1::before {
    content: "";

    position: absolute;

    top: 50%;

    left: -18px;

    width: 60px;

    height: 4px;

    background: var(--darkBlue);
  }

  .number1::after {
    content: "";

    position: absolute;

    top: 50%;

    right: -18px;

    width: 60px;

    height: 4px;

    background: var(--darkBlue);
  }
}

@media (min-width: 1030px) {
  .number::before {
    content: "";

    position: absolute;

    top: 50%;

    left: -39px;

    width: 80px;

    height: 4px;

    background: var(--darkBlue);
  }

  .number::after {
    content: "";

    position: absolute;

    top: 50%;

    right: -39px;

    width: 80px;

    height: 4px;

    background: var(--darkBlue);
  }
  .number1::before {
    content: "";

    position: absolute;

    top: 50%;

    left: -56px;

    width: 101px;

    height: 4px;

    background: var(--darkBlue);
  }

  .number1::after {
    content: "";

    position: absolute;

    top: 50%;

    right: -57px;

    width: 101px;

    height: 4px;

    background: var(--darkBlue);
  }
}

.number-heading {
  color: var(--darkBlue);

  font-size: 1.3rem;
}

.hover-span span {
  display: block;

  width: 0%;

  height: 4px;

  background: var(--blue);

  margin: 0.5rem 0;
}

.hover-span:hover span {
  display: block;

  width: 85%;

  height: 4px;

  background: var(--blue);

  margin: 0.5rem 0;
}

@media (max-width: 992px) {
  .hover-span span {
    margin-left: auto;

    margin-right: auto;
  }

  .hover-span:hover span {
    margin-left: auto;

    margin-right: auto;
  }
}

.number-text {
  color: var(--darkBlue);

  font-size: 1rem;

  line-height: 1rem;
}

.no-padding {
  padding: 0 !important;
}

/* zone 2 */

.zone2 {
  padding: 3rem 0;
}

.girl-heading {
  color: var(--blue);

  padding: 0 5%;
}

.man-heading {
  color: var(--blue);

  padding: 0 15% 0 5%;
}

.blue-area {
  background: var(--darkBlue);

  margin-top: 1rem;

  position: relative;

  padding: 2rem 1% 2rem 5%;

  z-index: 1;
}

.blue-area p {
  color: #fff;

  font-size: 1rem;
}

@media (min-width: 992px) and (max-width: 1200.98px) {
  .blue-area p {
    font-size: 0.8rem;
  }

  .blue-area1 p {
    width: 600px;
  }
}

.blue-area a.button {
  display: block;

  color: #fff;

  width: 10rem;

  font-size: 14px;

  padding: 0.3rem 0;

  border: 2.25px solid var(--lightGreen);

  border-radius: 0.3rem;

  margin-top: 2rem;
}

.blue-area a.button:hover {
  text-decoration: none;
}

@media (min-width: 992px) {
  .curve-side::before {
    content: "";

    position: absolute;

    top: 0;

    left: -133px;

    width: 0;

    height: 0;

    border-bottom: 243px solid var(--darkBlue);
    border-left: 113px solid transparent;
    border-right: 23px solid var(--darkBlue);

    z-index: -1;
  }
  .curve-side1::before {
    content: "";

    position: absolute;

    top: 0;

    left: -133px;

    width: 0;

    height: 0;

    border-bottom: 226px solid var(--darkBlue);
    border-left: 105px solid transparent;
    border-right: 38px solid var(--darkBlue);

    z-index: -1;
  }

  .man-img {
    position: absolute;

    bottom: 0;

    right: -150px;

    z-index: 3;

    width: 300px;
  }
}

@media (min-width: 1090px) {
  .man-img {
    position: absolute;

    bottom: -3px;

    right: -200px;

    z-index: 3;

    width: 350px;
  }
}

@media (min-width: 1200px) {
  .blue-area1 p {
    width: 700px;
  }

  .curve-side::before {
    content: "";

    position: absolute;

    top: 0;

    left: -148px;

    width: 0;

    height: 0;

    border-bottom: 267px solid var(--darkBlue);
    border-left: 121px solid transparent;
    border-right: 32px solid var(--darkBlue);

    z-index: -1;
  }
  .curve-side1::before {
    content: "";

    position: absolute;

    top: 0;

    left: -148px;

    width: 0;

    height: 0;

    border-bottom: 318px solid var(--darkBlue);
    border-left: 143px solid transparent;
    border-right: 12px solid var(--darkBlue);

    z-index: -1;
  }
}

/* Form Area */

.form-area {
  padding: 3rem 0;

  background: url(http://www.alliancebambou.com/projets/poupart-v12/assets/images/zone-3-form-area-bg.png)
    no-repeat center fixed;

  background-size: cover;
}

@media (max-width: 1024.98px) {
  .form-area {
    background: url(http://www.alliancebambou.com/projets/poupart-v12/assets/images/zone-3-form-area-bg-mobile.png)
      no-repeat center fixed;
    background-size: cover;
  }
}

.form-area h1 {
  color: #fff;

  font-size: 2.5rem;
}

@media (max-width: 576px) {
  .form-area h1 {
    color: #fff;

    font-size: 2rem;
  }
}

.form-area p {
  color: #fff;

  font-size: 1.2rem;
}

.form-control {
  border-radius: 0;
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;

  margin: 0;
}

.form-area button {
  display: block;

  background: transparent;

  color: #fff;

  width: 10rem;

  font-size: 14px;

  padding: 0.3rem 0;

  border: 2.25px solid var(--lightGreen);

  border-radius: 0.3rem;

  margin-top: 2rem;
}

.info-container {
  background: url(../images/blue-circle-with-pattern.png) no-repeat center;

  background-size: contain;

  max-width: 19rem;

  height: 16.5rem;
}

@media (max-width: 991.98px) {
  .form-area button {
    float: none !important;
    margin: auto;
    margin-top: 2rem;
  }
  .info-container {
    margin-top: -50px;
    margin-bottom: 40px;
  }
}

@keyframes left-right {
  0%,
  100% {
    transform: scaleX(1.1);
  }

  50% {
    transform: scaleY(1.1);
  }
}

.question-mark {
  width: 4rem;

  margin-top: -1.5rem;
}

.info-heading {
  color: #fff;

  margin-top: 1.5rem;

  font-size: 1.1rem;
}

.info {
  color: #fff;

  font-size: 0.8rem;

  padding: 5% 20% 10% 10%;
}

/* who-we-are */

.who-we-are {
  padding: 5rem 0;
}

.talk-bubble {
  background: url(../images/green-talk-bubble.png) no-repeat center;

  background-size: cover;

  max-width: 19.37rem;

  color: #fff;

  font-size: 3rem;

  line-height: 3.3rem;

  padding: 3rem 3rem 4.4rem;
}

.who-we-are a {
  display: block;

  background: transparent;

  color: #000;

  width: 10rem;

  font-size: 14px;

  padding: 0.3rem 0;

  border: 2.25px solid var(--lightGreen);

  border-radius: 0.3rem;

  margin-top: 2rem;
}

.who-we-are a:hover {
  text-decoration: none;
}

/* Solutions */

.solutions {
  padding: 3rem 0;

  background: #ececed;
}

.solutions h1 {
  color: var(--blue);

  font-size: 2rem;
}

.solutions h3 {
  font-size: 1.3rem;
}

.table-display {
  display: table;

  width: 100%;
}

@media (max-width: 991.98px) {
  .table-display {
    margin: auto;

    width: 280px;
  }
}

.table-cell-display {
  display: table-cell;

  vertical-align: middle;

  height: 15rem;
}

.hover {
  display: none;
}

.disease-death .static {
  background: url(../images/cross-icon.png) no-repeat center;

  background-size: contain;

  color: var(--lightGreen);

  text-align: center;

  font-size: 1.2rem;
}

.disease-death .hover {
  background: url(../images/hover-cross.png) no-repeat center;

  background-size: contain;

  color: var(--darkBlue);

  text-align: center;

  padding: 2rem;

  font-size: 1.28rem;

  padding-top: 3rem;
}
@media (max-width: 1200.98px) {
  .disease-death .hover {
    padding: 2rem;
    padding-top: 1rem;
  }
}
.disease-death:hover .static {
  display: none;
}

.disease-death:hover .hover {
  display: block;
}

.business-unprofit .static {
  background: url(../images/equal-icon.png) no-repeat center;

  background-size: contain;

  color: var(--darkBlue);

  text-align: center;

  font-size: 1.2rem;
}

.business-unprofit:hover .static {
  display: none;
}

.business-unprofit .hover {
  background: url(../images/hover-equal.png) no-repeat center;

  background-size: contain;

  color: var(--darkBlue);

  text-align: center;

  padding: 2rem;

  font-size: 1.28rem;

  padding-top: 3rem;
}
@media (max-width: 1200.98px) {
  .business-unprofit .hover {
    padding: 2rem;
    padding-top: 1.5rem;
  }
}
.business-unprofit:hover .hover {
  display: block;
}

.family .static {
  background: url(../images/number-icon.png) no-repeat center;

  background-size: contain;

  color: var(--darkBlue);

  text-align: center;

  font-size: 1.2rem;
}

.family:hover .static {
  display: none;
}

.family .hover {
  background: url(../images/hover-number.png) no-repeat center;

  background-size: contain;

  color: var(--darkBlue);

  text-align: center;

  padding: 2rem;

  font-size: 1.28rem;

  padding-top: 3rem;
}

@media (max-width: 1200.98px) {
  .family .hover {
    padding: 2rem;
    padding-top: 1rem;
  }
}

.family:hover .hover {
  display: block;
}

.debt-study .static {
  background: url(../images/plus-icon.png) no-repeat center;

  background-size: contain;

  color: var(--darkBlue);

  text-align: center;

  font-size: 1.2rem;
}

.debt-study:hover .static {
  display: none;
}

.debt-study .hover {
  background: url(../images/hover-plus.png) no-repeat center;

  background-size: contain;

  color: var(--darkBlue);

  text-align: center;

  padding: 2rem;

  font-size: 1.28rem;

  padding-top: 4.5rem;
}

@media (max-width: 1200.98px) {
  .debt-study .hover {
    padding: 2rem;
    padding-top: 1rem;
  }
}

@media (max-width: 1200px) {
  .debt-study .hover {
    padding: 2rem;
  }
}

.debt-study:hover .hover {
  display: block;
}

.credit .static {
  background: url(../images/dollar-icon.png) no-repeat center;

  background-size: contain;

  color: var(--lightGreen);

  text-align: center;

  font-size: 1.2rem;
}

.credit:hover .static {
  display: none;
}

.credit .hover {
  background: url(../images/hover-dollar.png) no-repeat center;

  background-size: contain;

  color: var(--darkBlue);

  text-align: center;

  padding: 2rem;

  font-size: 1.28rem;
}

@media (max-width: 1200.98px) {
  .credit .hover {
    padding: 2rem;
    padding-top: 1rem;
  }
}

.credit:hover .hover {
  display: block;
}

.divorse .static {
  background: url(../images/divide-icon.png) no-repeat center;

  background-size: contain;

  color: var(--darkBlue);

  text-align: center;

  font-size: 1.2rem;
}

.divorse:hover .static {
  display: none;
}

.divorse .hover {
  background: url(../images/hover-divide.png) no-repeat center;

  background-size: contain;

  color: var(--darkBlue);

  text-align: center;

  padding: 2rem;

  font-size: 1.28rem;

  padding-top: 4rem;
}

@media (max-width: 1200.98px) {
  .divorse .hover {
    padding: 2rem;
    padding-top: 1.5rem;
  }
}

.divorse:hover .hover {
  display: block;
}

/* blog */

.blog {
  padding: 3rem 0;
}

.blog-heading {
  color: var(--darkBlue);
}

.blog-title {
  color: var(--blue);

  font-size: 1.8rem;

  margin-top: 1rem;
}

.blog-sub-title {
  font-size: 1.2rem;
  font-color: #003874;
}

.blog-text {
  font-size: 1rem;
  font-color: #003874;
}

.share-icon,
.like-icon {
  color: var(--blue);

  font-size: 1rem;

  cursor: pointer;
}

.share-counts,
.like-counts {
  color: var(--blue);

  font-size: 0.7rem;
}

/* AVIS */

.avis {
  padding: 3rem 0;

  background: url(../images/avis-bg.png) no-repeat center fixed;

  background-size: cover;
}

.avis h1 {
  color: var(--darkBlue);
}

.marquee,
.marquee-right {
  width: 100%;

  overflow: hidden;
}

.review-container {
  background: #fff;

  width: 320px;

  padding: 1rem 1rem 1rem 0;

  margin: 0 1rem;

  float: left;
}

.star {
  width: 20px;
}

.review-heading {
  font-size: 1rem;

  padding-left: 1rem;
}

.review-text {
  padding-left: 1rem;

  font-size: 0.8rem;
}

/* Green Button */

.green-button-container {
  background: #fff;

  padding: 3rem 0 4rem;
}

@media (min-width: 992px) {
  .green-button-container {
    background: #fff;

    padding: 3rem 0;
  }
}

.green-button {
  background: transparent;

  color: var(--darkBlue);

  border: 2px solid var(--lightGreen);

  padding: 0.75rem 1.5rem;

  border-radius: 0.2rem;

  cursor: pointer;
}

@media (max-width: 768.98px) {
  .green-button {
    background: var(--lightGreen);

    color: var(--darkBlue);

    border: 0;

    padding: 0.75rem 1.5rem;

    border-radius: 0.2rem;

    font-size: 0.8rem;

    margin: 2%;
  }
}

/* Footer */

footer {
  width: 100%;

  position: static;
}

.gray-footer-left {
  background: #c6c6c6;

  color: var(--darkBlue);

  font-size: 1.5rem;

  line-height: 4rem;

  position: relative;

  padding: 0.5rem 0;

  padding-left: 10%;
}

.right a:hover {
  color: #00b5ff;
  text-decoration: none;
}

.blue-footer-right {
  background: var(--blue);

  color: #fff;

  font-size: 1.5rem;

  line-height: 1.7rem;

  padding: 1rem 0 0.5rem 7%;

  letter-spacing: 3px;
}

@media (min-width: 991px) and (max-width: 1184px) {
  .gray-footer-left {
    line-height: 2rem;
  }

  .blue-footer-right {
    padding: 0.5rem 0 0.5rem 9%;
  }
}

.footer-bottom {
  /* display: none; */
}

.footer-bottom .right {
  background: var(--darkBlue);

  padding: 1rem 0 1rem 7%;
}

.footer-bottom .left {
  background: #f2f2f3;

  padding: 1rem 0;
}

.footer-bottom .left .main-heading {
  color: var(--blue);

  font-size: 1.3rem;

  padding: 0 20%;
}

.footer-bottom .right .main-heading {
  color: var(--blue);

  font-size: 1.3rem;

  padding-right: 20%;
}

.footer-bottom .left .sub-heading {
  color: var(--darkBlue);

  font-size: 1.5rem;

  padding: 0 20%;

  margin-top: 2rem;
}

.footer-bottom .right .sub-heading {
  color: #fff;

  font-size: 1.5rem;

  margin-top: 2rem;
}

.footer-bottom .left .text {
  color: var(--darkBlue);

  font-size: 1rem;

  padding: 0 5% 0 20%;
}

.footer-bottom .right .text {
  color: #fff;

  font-size: 1rem;
}

.footer-email {
  color: var(--blue);

  font-size: 1.3rem;

  margin-top: 3rem;
}

.social-icons {
  margin-top: 1rem;
}

@keyframes rotate360 {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(350deg);
  }
}

.social-icons a {
  background: #c6c6c6;

  color: var(--darkBlue);

  text-align: center;

  padding: 8px 0;

  width: 30px;

  border-radius: 50%;

  font-size: 1rem;

  margin-right: 10px;
}

.social-icons a:hover {
  text-decoration: none;

  animation: rotate360 0.8s linear;
}

@media (min-width: 992px) {
  footer {
    position: fixed;

    left: 0;

    bottom: 0;

    width: 100%;

    z-index: 5;
  }

  .footer-bottom {
    display: none;
  }

  .fixed-footer {
    position: fixed;
  }

  .fixed-footer .footer-bottom {
    display: none;
  }

  .open-footer {
    position: static;
  }

  .open-footer .footer-bottom {
    display: block;
  }

  .gray-footer-left::after {
    content: "";

    position: absolute;

    top: 0;

    right: -6rem;

    width: 0;

    height: 0;

    border-top: 5rem solid #c6c6c6;

    border-right: 6rem solid transparent;

    z-index: 2;
  }
}

@media (max-width: 991.98px) {
  .gray-footer-left {
    text-align: center;

    padding-left: 0;

    line-height: 2rem;
  }

  .blue-footer-right {
    text-align: center;

    padding-left: 0;
  }

  .footer-bottom .right {
    padding-left: 0;

    text-align: center;
  }

  .footer-bottom .left .main-heading {
    padding: 0;

    text-align: center;
  }

  .footer-bottom .right .main-heading {
    padding: 0;

    text-align: center;
  }

  .footer-bottom .left .sub-heading {
    padding: 0;

    text-align: center;
  }

  .footer-bottom .right .sub-heading {
    padding: 0;

    text-align: center;
  }

  .footer-bottom .left .text {
    padding: 0;

    text-align: center;
  }

  .footer-bottom .right .text {
    padding: 0;

    text-align: center;
  }
}

@media (max-width: 600px) {
  .footer-email {
    font-size: 0.7rem;

    margin-top: 2rem;
  }
}

/* ChatBot */

.chatbot {
  position: fixed;

  bottom: 1%;

  right: 7%;

  width: 200px;

  z-index: 7;

  cursor: pointer;
}

@media (min-width: 991px) and (max-width: 1184px) {
  .chatbot {
    right: 4%;
  }
}

.chat-text-area {
  position: absolute;

  top: 30px;

  right: 0;

  width: 100px;
}

.chat-text-area h2 {
  color: var(--darkBlue);

  font-size: 0.8rem;
}

.online {
  font-size: 0.8rem;

  font-weight: bold;

  color: var(--darkBlue);

  position: relative;

  padding-left: 15px;
}

.online::before {
  content: "";

  position: absolute;

  top: 2.5px;

  left: 0;

  width: 12px;

  height: 12px;

  background: var(--lightGreen);

  border: 2px solid #fff;

  border-radius: 50%;
}

.offline {
  font-size: 0.7rem;

  color: var(--darkBlue);

  position: relative;

  padding-left: 15px;
}

.offline::before {
  content: "";

  position: absolute;

  top: 2.5px;

  left: 0;

  width: 12px;

  height: 12px;

  background: #c6c6c6;

  border: 2px solid #fff;

  border-radius: 50%;
}

.chat-form-area {
  display: none;

  width: 100%;

  background: #fff;

  padding: 2rem 1rem 1rem;

  margin-top: -2rem;

  box-shadow: 0 0 25px #c6c6c6;

  border-radius: 0.3rem;
}

.chat-form-area div {
  font-size: 0.8rem;

  color: var(--darkBlue);

  margin: 0.5rem 0;
}

.chat-form-area textarea {
  border: 1px solid #ddd;

  font-size: 0.8rem;

  width: 100%;

  color: var(--lightGreen);
}

@media (max-width: 768.98px) {
  .chatbot {
    position: fixed;

    bottom: 5%;

    right: 3%;

    width: 130px;
  }

  .chat-text-area {
    top: 20px;

    right: 1%;

    width: 60px;
  }

  .chat-text-area h2 {
    font-size: 0.45rem;
  }

  .online {
    font-size: 0.5rem;

    padding-left: 10px;

    margin-top: -6px;
  }

  .online::before {
    top: 2.5px;

    left: 0;

    width: 8px;

    height: 8px;

    border: 1px solid #fff;
  }

  .offline {
    font-size: 0.5rem;

    padding-left: 10px;
  }

  .offline::before {
    top: 2.5px;

    left: 0;

    width: 8px;

    height: 8px;

    border: 1px solid #fff;
  }

  .chat-form-area {
    display: none;

    width: 100%;

    background: #fff;

    padding: 1.5rem 0.5rem 0.5rem;

    margin-top: -2rem;

    box-shadow: 0 0 25px #c6c6c6;

    border-radius: 0.3rem;
  }

  .chat-form-area div {
    font-size: 0.7rem;
  }
}

/* Other Pages */
.contents {
  padding: 3rem 3rem;
}
@media (max-width: 768.98px) {
  .contents {
    padding: 3rem 1rem;
  }
}
@media (max-width: 576.98px) {
  .contents {
    padding: 3rem 0.5rem;
  }
}
.content-main-heading {
  font-size: 2rem;
  color: var(--darkBlue);
  margin-bottom: 2rem;
}
.content-subheading {
  color: var(--darkBlue);
  position: relative;
  margin: 2.5rem 0;
}
@keyframes someAnim {
  from {
    width: 0;
  }
  to {
    width: 200px;
  }
}
.content-subheading:hover::after {
  content: "";
  width: 200px;
  height: 5px;
  background: var(--blue);
  position: absolute;
  bottom: -10px;
  left: 0;
  animation: someAnim 0.5s linear;
}
.content-text {
  color: #000;
}
.content-list {
  list-style-type: none;
  padding: 0;
}
.content-list li {
  position: relative;
  padding-left: 20px;
}
.content-list li::before {
  content: ">";
  color: var(--darkBlue);
  position: absolute;
  top: -8px;
  left: 0;
  font-size: 25px;
  font-weight: bold;
}
.content-listy {
  list-style-type: none;
  padding: 0;
}
.content-listy li {
  position: relative;
  padding-left: 20px;
}
.content-listy li::before {
  content: ">";
  color: #fff;
  position: absolute;
  top: -8px;
  left: 0;
  font-size: 25px;
  font-weight: bold;
}
.footer-top {
  cursor: pointer;
}
@media (max-width: 991.98px) {
  .footer-bottom .left .text {
    padding: 0 5%;
  }
}
.plus-sign {
  width: 65px;
}