.horizontal-slide-from-right-to-left {
  animation: horizontal-slide-from-right-to-left linear 10s infinite;
}

.horizontal-slide-from-left-to-right {
  animation: horizontal-slide-from-left-to-right linear 10s infinite;
}

@keyframes horizontal-slide-from-right-to-left {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

@keyframes horizontal-slide-from-left-to-right {
  from {
    transform: translateX(-50%);
  }

  to {
    transform: translateX(0);
  }
}

.sticky-menu.nav-hidden {
  animation: fadeInDown 0.9s 1;
}

@keyframes fadeInDown {
  0% {
    opacity: 0;
    transform: translate3d(0, -100%, 0);
  }

  100% {
    opacity: 1;
    transform: translateZ(0);
  }
}

@keyframes rotate-360 {
  0% {
    transform: rotate(0deg)
  }

  100% {
    transform: rotate(360deg)
  }
}

.rotate-360 {
  animation: rotate-360 20s linear infinite;
}


input:checked~.toggle_dot {
  transform: translateX(100%);
}


/* custome style */


img.header_logo {
  width: 150px;
}

img.header_logo.mobile {
  display: none;
}

.main-wrapper {
  overflow: hidden;
  background: url("../img/main_bg.png");
  background-size: cover;
  background-position: bottom;
  background-color: transparent;
  background-attachment: fixed;
}


.after\:bg-ColorPurple::after {
  background-color: #5461d5 !important;
}

.bg-ColorLime {
  background-color: rgb(84 97 213) !important;
  color: #fff !important;
}

span.toggle_dot {
  background-color: #5461d5;
}

a.btn.is-lime {
  background: #5461d5;
  color: #fff;
  border-color: #5461d5;
}

a.btn.is-lime:hover {
  color: #000 !important;
}


.row_hero {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  margin: 50px 0;
}

.hero_card {
  max-width: 460px;
  background: #505a6c;
  width: 100%;
  text-align: left;
  padding: 20px;
  border-radius: 5px;
  margin: 0 10px;
  box-shadow: 3px 4px 7px #00000061;
}

.hero_text img {
  width: 147px;
}

.hero_card h4 {
  color: #fff;
}

.hero_card ul {
  list-style: none;
  padding-top: 15px;
  color: #fff;
}

.hero_card ul li span {
  margin-right: 7px;
}

.accordion {
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
  transition: 0.4s;
  transition: 0.5s;
}

button.accordion.active,
button.accordion:hover {
  color: #fff !important;
}

button.accordion.active span i,
button.accordion:hover span i {
  color: #fff !important;
  background: #5461d5 !important;
}


.accordion+.panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-out;
}

.panel {
  padding: 0 18px;
  transition: max-height 0.3s ease-in-out;
}

.panel {
  padding: 0 18px;
  overflow: hidden;
  color: #fff;
  transition: 1s;
}

button.accordion span i {
  background: #fff;
  color: #000;
  width: 30px !important;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 5px;
}

button.accordion.active span {
  transform: rotate(90deg);
}


.section-cta {
  position: relative;
  height: 690px;
  background-color: #0458ba;
}

h2.form_success_message {
  padding: 60px 0;
  text-align: center;
  color: #0458ba !important;
}

form input {
  width: 48%;
  height: 50px;
  margin-bottom: 20px;
  padding: 15px;
  font-size: 16px;
  box-shadow: 0 0 5px #ccc;
  border-radius: 5px;
}


select#cat-option {
  width: 100%;
  height: 50px;
  margin-bottom: 20px;
  padding: 15px;
  font-size: 16px;
  box-shadow: 0 0 5px #ccc;
  border-radius: 5px;
}

form textarea {
  width: 100%;
  min-height: 250px;
  padding: 15px;
  margin-bottom: 20px;
  border-radius: 10px;
  box-shadow: 0 0 5px #ccc;
}

form input[type='submit'] {
  height: "50px";
  background: #5461d5;
  color: #fff;
  border-color: #5461d5;
  cursor: pointer;
  border-radius: 10px;
  box-shadow: 0 0 5px #ccc;
}

form input[type='submit']:hover {
  color: #000;
}

.section-cta .cta_card {
  position: absolute;
  max-width: 900px;
  width: 100%;
  padding: 30px 30px;
  border-radius: 20px;
  margin-top: -20px;
  top: -44px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 99;
  background-color: #f5f5f5;
}

.section-cta .cta_card h2,
.section-cta .cta_card p {
  color: #000;
}

.section-cta .cta_card .btn.is-outline-white {
  border-color: #000;
  background-color: #000;
}




/* media quary */

@media screen and (max-width:786px) {

  img.header_logo.mobile {
    display: block;
    width: 60px;
  }

  img.header_logo {
    display: none;
  }

  h2 {
    font-size: 27px !important;
  }

  .hero_text {
    padding-top: 35px;
  }

  .hero_text img {
    width: 100px !important;
  }

  .row_hero {
    margin-bottom: 20px;
  }

  .hero_card {
    margin-bottom: 25px;
  }

  .hero_card h4 {
    font-size: 20px;
  }

  .section-cta {
    height: 800px;
  }

  form input {
    width: 100%;
  }

  .what-we-do-img {
    margin-bottom: 25px;
  }

  .section-cta .cta_card {
    width: 90%;
    padding: 30px 15px;
  }

  button.accordion {
    font-size: 17px;
    padding: 0 0 20px 0;
  }

  .panel {
    padding: 0
  }

  .panel p {
    font-size: 16px;
  }

  .section-footer p {
    font-size: 16px;
  }

}