/*===============================================
Template Name: Dreamhub-Education HTML5 Template
Version: 0.1
================================================*/

/*TABLE OF CONTENTS*/
/*=====================
01. Start dreamhub Header Menu Area
02. Start dreamhub Hero Area
03. Start dreamhub About Area
04. Start dreamhub Program Area
05. Start dreamhub Courses Area
06. Start dreamhub Register Area
07. Start dreamhub Protfolio Area
08. Start dreamhub Faq Area
09. Start dreamhub News  Area
10. Start dreamhub Foter Area
=======================*/

/*================================================
 <--Start dreamhub Header Menu Area Css-->
=================================================*/

.header-area {
  background: #f3f1fa;
  z-index: 1;
  position: relative;
}
.header-menu {
  text-align: center;
}
.header-menu ul {
  list-style: none;
}
.header-menu ul li {
  display: inline-block;
  margin-left: 13px;
}
.header-menu ul li a {
  display: inline-block;
  padding: 9px 10px;
  font-size: 16px;
  font-weight: 400;
  text-decoration: none;
  margin: 29px 0;
  transition: 0.5s;
}
.header-menu ul li a:hover {
  background: #2861ad;
  color: #ffff;
}

/* dreamhub btn */
.dreamhub-btn {
  text-align: right;
}
.dreamhub-btn a {
  display: inline-block;
  background: #2861ad;
  padding: 11px 35px;
  border-radius: 5px;
  color: #ffff;
  position: relative;
  z-index: 1;
  transition: 0.5s;
  text-decoration: none;
}
.dreamhub-btn a:hover {
  color: #012068;
}
.dreamhub-btn a::before {
  position: absolute;
  content: "";
  height: 100%;
  width: 100%;
  left: 0;
  bottom: 0;
  transform: scale(0, 1);
  opacity: 0;
  z-index: -1;
  transition: 0.5s;
}
.dreamhub-btn a:hover::before {
  opacity: 1;
  transform: scale(1, 1);
  background: #f3f1fa;
  border: 1px solid #2861ad;
  border-radius: 5px;
}

/* hero area btn */
.dreamhub-btn.banner {
  text-align: center;
  display: inline-block;
  margin-left: 24px;
}

/* about btn */
.dreamhub-btn.about {
  text-align: left;
}
/* news btn */
.dreamhub-btn.news {
  text-align: left;
}

.sticky-nav {
  left: 0;
  margin: auto;
  top: 0;
  width: 100%;
  position: fixed !important;
  box-shadow: 0 0 60px 0 rgba(0, 0, 0, 0.07);
  -webkit-animation: 300ms running fadeInDown;
  animation: 500ms running fadeInUp;
  -webkit-box-shadow: 0 10px 15px rgba(25, 25, 25, 0.1);
  transition: 0.5s !important;
  background: #fff !important;
  z-index: 9999 !important;
  animation-name: fadeInDown;
  padding: 0 30px;
}

/* sub menu area css */
.header-menu ul .sub-menu {
  background: #fff;
  position: absolute;
  top: 125%;
  border-radius: 5px;
  width: 217px;
  text-align: left;
  margin: 0;
  -webkit-box-shadow: 0px 1px 3px rgb(0 0 0 / 30%);
  transition: 0.5s;
  visibility: hidden;
  border-top: 2px solid #2861ad;
  opacity: 0;
  z-index: 11;
}
.header-menu ul .sub-menu ul li {
  display: inline-block;
  margin-left: 0;
  width: 100%;
}
.header-menu ul .sub-menu ul li a {
  padding: 12px 20px;
  text-align: left;
  width: 100%;
  display: inline-block;
  visibility: inherit !important;
  color: #202020;
  margin: 0;
}
.header-menu ul .sub-menu ul li a:hover {
  background: #2861ad !important;
  color: #fff;
}
.header-menu ul li:hover .sub-menu {
  visibility: visible;
  opacity: 1;
  top: 99%;
}

/*================================================
 <--Start dreamhub Hero Area Css-->
=================================================*/
.hero-area {
   background: url(assets/images/photo_1920X80.png);
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  height: 800px;
}
.hero-sub-title {
  position: relative;
}
.hero-sub-title::before {
  position: absolute;
  content: "'";
  height: 2px;
  width: 201px;
  background: #2861ad;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}
.hero-sub-title h5 {
  font-size: 18px;
  font-weight: 600;
  color: #ffffff;
  line-height: 55px;
}
.hero-main-title h3 {
  color: #ffff;
  font-size: 55px;
  font-weight: 800;
  margin: 10px 0 16px;
}
.about-content span a {
  margin-left: 8px;
  font-size: 16px;
  font-weight: 500;
  text-decoration: underline;
}
.hero-discription {
  width: 55%;
  margin: auto;
}
.hero-discription p {
  font-size: 18px;
  line-height: 30px;
  color: #ffffff;
  font-weight: 400;
  margin-bottom: 42px;
}
a.active_btn {
  background: transparent;
  border: 1px solid #2861ad;
}

/*================================================
 <--Start dreamhub About Area Css-->
=================================================*/

.about-area {
  padding: 108px 0 100px;
}
.about-thumb img {
  width: 100%;
}
.about-content {
  margin-left: 55px;
}
.about-content h3 {
  font-size: 30px;
  font-weight: 600;
  line-height: 18px;
  margin-bottom: 22px;
}
.about-content p {
  font-size: 16px;
  font-weight: 400;
  line-height: 29px;
  width: 75%;
}
.about-content span {
  font-size: 16px;
  font-weight: 400;
}
.about-content span a {
  margin-left: 8px;
  font-size: 16px;
  font-weight: 500;
}
.about-content p.about {
  position: relative;
  margin: 60px 0 30px;
}
.about-content p.about::before {
  position: absolute;
  content: "";
  height: 1px;
  width: 98%;
  top: -28px;
  background: #ccd2e1;
}

/*================================================
 <--Start dreamhub Program Area Css-->
=================================================*/

.program-area {
  padding: 0px 0 74px;
}
.program-single-box {
  background: #ffff;
  filter: drop-shadow(0 0 15px rgba(0, 0, 0, 0.1));
  padding: 27px 29px 21px 29px;
  border-radius: 5px;
  margin-bottom: 30px;
  position: relative;
}
.program-single-box::before {
  position: absolute;
  content: "";
  left: 0;
  right: 0;
  top: 0;
  height: 3px;
  width: 0;
  margin: auto;
  background: #2861ad;
  transition: 0.5s;
}
.program-single-box:hover:before {
  width: 100%;
}
.program-content h4 {
  font-size: 20px;
  font-weight: 600;
}
.program-content p {
  font-size: 16px;
  line-height: 28px;
  color: #7e8890;
  font-weight: 400;
  margin: 10px 0 0;
}

/* section title */
.section-main-title h3 {
  font-size: 35px;
  font-weight: 600;
}
.section-discription {
  width: 45%;
  margin: auto;
}
.section-discription p {
  font-size: 16px;
  line-height: 28px;
  color: #7e8890;
  font-weight: 400;
  margin: 10px 0 46px;
}
/* protfolio section  */
.section-discription.protfolio {
  width: 35%;
  margin: initial;
}

/*================================================
 <--Start dreamhub Courses Area Css-->
=================================================*/
.course-area {
  padding: 0 0 80px;
}
.dreamhub-courses-single-box {
  margin-bottom: 30px;
}
.dreamhub-courses-thumb {
  overflow: hidden;
}
.dreamhub-courses-thumb img {
  width: 100%;
  transition: 0.5s;
  border-radius: 5px;
}
.dreamhub-courses-single-box:hover .dreamhub-courses-thumb img {
  transform: scale(1.1);
}
.dreamhub-courses-content {
  background: #f9f7ff;
  border: 1px solid rgba(0, 0, 0, 0.1);
  padding: 11px 30px 8px;
  border-radius: 0px 0px 5px 5px;
  position: relative;
}
.dreamhub-courses-content::before {
  position: absolute;
  content: "";
  height: 1px;
  width: 100%;
  background: #ccd2e1;
  bottom: 50px;
  left: 0;
}

.dreamhub-courses-contetn-title h4 {
  font-size: 18px;
  font-weight: 600;
  line-height: 35px;
}
.dreamhub-courses-contetn-title h6 {
  font-size: 14px;
  color: #7e8890;
  font-weight: 400;
}
.dreamhub-courses-discription p {
  font-size: 16px;
  font-weight: 400;
  line-height: 27px;
  margin: 15px 0 30px;
}
.dreamhub-courses-price {
  float: right;
  margin-top: -36px;
  margin-right: 6px;
}
.dreamhub-courses-price span {
  background: #2861ad;
  padding: 8px 19px;
  border-radius: 5px;
  color: #fff;
}
.dreamhub-courses-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.dreamhub-courses-Lessone span {
  font-size: 15px;
  color: #7e8890;
  font-weight: 400;
}
.dreamhub-courses-Lessone span i {
  font-size: 12px;
  margin-right: 3px;
  color: #2861ad;
}
.dreamhub-courses-Student span {
  font-size: 15px;
  font-weight: 400;
}
.dreamhub-courses-Student span i {
  font-size: 12px;
  margin-right: 3px;
  color: #2861ad;
}

/*================================================
 <--Start dreamhub Register Area Css-->
=================================================*/

.register-area {
  background: url(assets/images/Group-9.png);
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  padding: 100px 0 100px;
}
.register-sub-title h5 {
  font-size: 18px;
  line-height: 55px;
  color: #ffffff;
  font-weight: 600;
}
.register-main-title h3 {
  font-size: 55px;
  color: #ffffff;
  font-weight: 600;
  margin: 0 0 16px;
}
.register-discription {
  width: 87%;
}
.register-discription p {
  font-size: 16px;
  line-height: 27px;
  color: #ffffff;
  font-weight: 400;
  margin-bottom: 35px;
}

/* counter css */
.counter-box-title h1 {
  font-size: 35px;
  color: #ffffff;
  font-weight: 600;
  margin: 17px 0 10px;
}
.counter-box-title h3 {
  font-size: 15px;
  color: #ffffff;
  font-weight: 500;
}

/* form box css */
.row.contact {
  background: #382929;
  padding: 25px 10px 27px;
  border-radius: 5px;
}
.contact-box-title h3 {
  text-align: center;
  font-size: 24px;
  color: #ffff;
  font-weight: 600;
  margin-bottom: 25px;
}
.form-box input {
  width: 100%;
  height: 46px;
  background: #ffffff;
  border-radius: 5px;
  padding: 12px;
  margin-bottom: 16px;
  border: 0;
  outline: 0;
}
.form-box input::placeholder {
  font-size: 15px;
  font-weight: 400;
}
select#Choose\ Subjec {
  width: 100%;
  height: 52px;
  border-radius: 5px;
  border: 0;
  outline: 0;
}
.form-box textarea {
  width: 100%;
  height: 86px;
  border-radius: 5px;
  border: 0;
  outline: 0;
  padding: 12px;
  margin-bottom: 13px;
}
.form-box textarea::placeholder {
  font-size: 15px;
  font-weight: 400;
}
.form-box button {
  width: 100%;
  height: 46px;
  background: #2861ad;
  border-radius: 5px;
  outline: 0;
  border: 0;
  color: #fff;
  font-size: 16px;
  font-weight: 400;
}

/*================================================
 <--Start dreamhub Protfolio Area Css-->
=================================================*/

.protfolio-area {
  padding: 102px 0 0px;
}

.protfolio-menu ul {
  list-style: none;
}
.protfolio-menu ul li {
  display: inline-block;
  padding: 6px 19px;
  background: #f9f7ff;
  margin: 0px 3px 30px;
  border-radius: 5px;
  cursor: pointer;
}
li.current_menu_item {
  position: relative;
  color: #fff;
  z-index: 1;
}
li.current_menu_item::before {
  position: absolute;
  content: "";
  height: 100%;
  width: 100%;
  background: #2861ad;
  left: 0;
  top: 0;
  border-radius: 5px;
  z-index: -1;
}
.protfolio-single-box {
  margin-bottom: 16px;
  overflow: hidden;
}
.protfolio-thumb {
  position: relative;
  transition: 0.5s;
}
.protfolio-thumb::before {
  position: absolute;
  content: "";
  height: 100%;
  width: 100%;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background: rgb(240, 154, 62, 0.8);
  border-radius: 5px;
  transform: scale(0);
  transition: 0.5s;
  opacity: 0;
}
.protfolio-single-box:hover .protfolio-thumb::before {
  transform: scale(1);
  border-radius: 5px;
  opacity: 1;
}
.protfolio-thumb img {
  width: 100%;
}

/*================================================
 <--Start dreamhub Faq Area Css-->
=================================================*/
.faq-area {
  padding: 85px 0 90px;
}
.event-title h3 {
  font-size: 28px;
  font-weight: 600;
  margin-bottom: 34px;
}
.event-single-box {
  margin-bottom: 15px;
}
.event-date {
  background: #2861ad;
  display: block;
  float: left;
  padding: 9px 16px;
  text-align: center;
  border-radius: 5px;
  margin-top: 32px;
  position: relative;
}
.event-date span {
  font-size: 18px;
  font-weight: 500;
  color: #fff;
  border-bottom: 2px solid #fff;
  line-height: 28px;
}
.event-date h6 {
  font-size: 16px;
  font-weight: 500;
  color: #fff;
}
.event-content {
  background: #f9f7ff;
  display: inline-block;
  padding: 26px 47px 8px;
  margin-left: -29px;
  border-radius: 5px;
  margin-top:15px;
}
.event-content-title h5 {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 5px;
}
.event-content-address {
  margin-bottom: 10px;
}
.event-content-address ul {
  list-style: none;
}
.event-content-address ul li {
  display: inline-block;
  margin-right: 10px;
}
.event-content-address ul li a {
  display: inline-block;
  text-decoration: none;
  color: #6d6d6d;
  font-size: 14px;
  font-weight: 400;
}
.event-content-address ul li a i {
  font-size: 14px;
  margin-right: 5px;
  color: #2861ad;
}
.event-content-discription p {
  font-size: 16px;
  font-weight: 400;
}

/* accordian css */
.faq h2 {
  font-size: 28px;
  font-weight: 600;
  margin-bottom: 34px;
}
.accordion-item {
  border: none;
}
.accordion button {
  position: relative;
  display: block;
  text-align: left;
  width: 100%;
  padding: 0px 0px 23px;
  color: #012068;
  font-size: 16px;
  font-weight: 400;
  border: none;
  background: none;
  outline: none;
  transition: 0.5s;
  margin-bottom: 13px;
}
.accordion button:hover,
.accordion button:focus {
  cursor: pointer;
  color: #012068;
}
.accordion button:hover::after,
.accordion button:focus::after {
  cursor: pointer;
  color: #03b5d2;
  border: 1px solid #03b5d2;
}
.accordion button .accordion-title {
  margin-left: 46px;
  display: flex;
  justify-content: left;
  font-size: 12px;
  }
.accordion button .icon {
  display: inline-block;
  position: absolute;
  top: -1px;
  left: 0;
  width: 30px;
  height: 30px;
  line-height: 30px;
  background: #2861ad;
  text-align: center;
  color: #fff;
  border-radius: 5px;
}
.accordion button .icon::before {
  display: block;
  position: absolute;
  content: "";
  top: 14px;
  left: 10px;
  width: 10px;
  height: 2px;
  background: currentColor;
}
.accordion button .icon::after {
  display: block;
  position: absolute;
  content: "";
  top: 10px;
  left: 13px;
  width: 2px;
  height: 10px;
  background: currentColor;
}
.accordion button[aria-expanded="true"] {
  color: #012068;
}
.accordion button[aria-expanded="true"] .icon::after {
  width: 0;
}
.accordion button[aria-expanded="true"] + .accordion-content {
  opacity: 1;
  max-height: 9em;
  transition: all 200ms linear;
  will-change: opacity, max-height;
}
.accordion .accordion-content {
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: opacity 200ms linear, max-height 200ms linear;
  will-change: opacity, max-height;
}
.accordion .accordion-content p {
  font-size: 16px;
  font-weight: 400;
  line-height: 28px;
  color: black;
  margin: 0px 48px 20px;
}

/*================================================
 <--Start dreamhub News Area Css-->
=================================================*/
.news-area {
  padding: 0 0 108px;
}
.news-thumb {
  position: relative;
}
.news-thumb::before {
  position: absolute;
  content: "";
  height: 100%;
  width: 100%;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  background: rgb(240, 154, 62, 0.8);
  border-radius: 5px;
  transform: scale(0);
  transition: 0.5s;
}
.news-single-box:hover .news-thumb::before {
  transform: scale(1);
  border-radius: 5px 5px 0px 0px;
}
.news-thumb img {
  width: 100%;
}
.news-icon-thumb {
  position: absolute;
  top: 50%;
  right: 50%;
  transform: translate(50%, -50%);
  opacity: 0;
  transition: 0.5s;
}
.news-single-box:hover .news-icon-thumb {
  opacity: 1;
}
.news-content {
  background: #f9f7ff;
  padding: 17px 30px 31px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 0 0 5px 5px;
}
.news-content a {
  text-decoration: none;
}
.news-content a h4 {
  font-size: 20px;
  line-height: 28px;
  font-weight: 600;
  transition: 0.5s;
}
.news-content a h4:hover {
  color: #2861ad;
}
.news-list ul {
  list-style: none;
}
.news-list ul li {
  display: inline-block;
  margin-right: 17px;
}
.news-list ul li a {
  display: inline-block;
  font-size: 14px;
  font-weight: 400;
  color: #7e8890;
  margin: 2px 0 22px;
}

/*================================================
 <--Start dreamhub Foter Area Css-->
=================================================*/
.foter-area {
  background: #060505;
  padding: 100px 0 0;
}

.foter-content p {
  font-size: 16px;
  font-weight: 400;
  color: #ffffff;
  line-height: 25px;
  margin: 19px 0 10px;
  width: 85%;
}
.foter-info ul {
  list-style: none;
}
.foter-info ul li {
  color: #fff;
  margin: 8px 0 0;
}
.foter-info ul li a {
  display: inline-block;
  text-decoration: none;
  color: #ffff;
  font-size: 15px;
  font-weight: 400;
}
.foter-info ul li a i {
  margin-right: 6px;
}
.foter-info ul li span {
  font-size: 15px;
  font-weight: 400;
}
.foter-info ul li span i {
  margin-right: 6px;
}
.foter-social-icon ul {
  list-style: none;
}
.foter-social-icon ul li {
  display: inline-block;
  margin-right: 4px;
  margin-top: 26px;
}
.foter-social-icon ul li a i {
  font-size: 13px;
  color: #fff;
  background: rgba(255, 255, 255, 0.2);
  display: inline-block;
  height: 30px;
  width: 30px;
  line-height: 30px;
  text-align: center;
  border-radius: 100%;
  transition: 0.5s;
}
.foter-social-icon ul li a i:hover {
  background: #2861ad;
}
.wiget-title h5 {
  font-size: 22px;
  font-weight: 600;
  color: #ffff;
  margin-bottom: 30px;
}
.wiget-menu ul {
  list-style: none;
}
.wiget-menu ul li {
  padding: 0px 0px 15px;
}
.wiget-menu ul li a {
  display: inline-block;
  color: #ffff;
  font-size: 16px;
  font-weight: 400;
  text-decoration: none;
  transition: 0.5s;
}
.wiget-menu ul li a:hover {
  color: #2861ad;
}
.wiget-menu ul li.menu {
  position: relative;
  padding: 0 0 28px;
}
.wiget-menu ul li.menu::before {
  position: absolute;
  content: "";
  height: 1px;
  width: 100%;
  background: #2861ad;
  bottom: 11px;
}
.wiget-information h5 {
  font-size: 16px;
  color: #ffff;
  line-height: 22px;
  transition: 0.5s;
}
.wiget-information h5:hover {
  color: #2861ad;
}
.wiget-information p {
  font-size: 14px;
  color: #7e8890;
  font-weight: 400;
}
.wiget-time h5 {
  font-size: 16px;
  font-weight: 400;
  color: #fff;
  margin-bottom: 32px;
}

/*widget table*/
table.widget-table tr td {
  padding-right: 28px;
  padding-bottom: 18px;
  transition: 0.5s;
}
table.widget-table tr td:hover {
  color: #2861ad;
}
td.table-title {
  font-size: 16px;
  color: #fff;
  font-weight: 400;
}
td.table-text {
  color: #fff;
  font-size: 16px;
  position: relative;
  z-index: 1;
}
td.table-text:before {
  position: absolute;
  content: ":";
  left: -17px;
  top: 0;
  font-size: 20px;
  color: #fff;
}
td.table-text.up {
  color: #ed1c24;
}
.foter-copy-text {
  text-align: center;
  border-top: 1px solid #2861ad;
  padding: 25px 0px 0px;
  margin: 70px 0 0;
}
.foter-copy-text p {
  font-size: 14px;
  color: #7e8890;
}

/* All Inner Page Css */

/* About Us inner page css */
.breatcome-area {
  background: url(assets/images/bratcome.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  padding: 130px 0;
}
.breatcome-title h1 {
  color: #fff;
  font-size: 60px;
  font-weight: 700;
  margin-bottom: 19px;
}
.bratcome-text ul {
  list-style: none;
}
.bratcome-text ul li {
  display: inline-block;
  margin-right: 15px;
  color: #fff;
  font-weight: 600;
}
.bratcome-text ul li a {
  display: inline-block;
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  position: relative;
  transition: 0.5s;
}
.bratcome-text ul li a:hover {
  color: #2861ad;
}
.bratcome-text ul li a::before {
  position: absolute;
  content: "/";
  left: 50px;
}

/* team area inner page css */
.team-area {
  padding: 110px 0 110px;
}
.single-team-box {
  overflow: hidden;
  transition: 0.5s;
  margin: 48px 0 0px;
}
.single-team-box:hover {
  transform: translateY(-10px);
}
.team-area .section-sub-title h5 {
  font-size: 16px;
  font-weight: 500;
  text-transform: uppercase;
  margin: 0 0 18px;
}
.team-thumb {
  position: relative;
  border: 8px solid #012068;
  border-radius: 5px 5px 0px 0px;
}
.team-thumb img {
  width: 100%;
}
.team-social-icon {
  position: absolute;
  top: 18px;
  right: -51px;
  transition: 0.5s;
}
.single-team-box:hover .team-social-icon {
  right: 24px;
}
.team-social-icon ul {
  list-style: none;
}
.team-social-icon ul li {
  margin: 0 0 9px;
}
.team-social-icon ul li a i {
  width: 35px;
  height: 35px;
  background: #012068;
  line-height: 35px;
  color: #fff;
  text-align: center;
  border-radius: 100%;
  font-size: 14px;
  transition: 0.5s;
}
.team-social-icon ul li a i:hover {
  background: #2861ad;
}
.team-content {
  text-align: center;
  background: #012068;
  padding: 18px 0 21px;
  border-radius: 0px 0px 5px 5px;
}
.team-content h5 a {
  font-size: 22px;
  color: #fff;
  display: inline-block;
  font-weight: 700;
  text-decoration: none;
  margin-bottom: 5px;
  transition: 0.5s;
}
.team-content h5 a:hover {
  color: #2861ad;
}
.team-content span {
  font-size: 16px;
  font-weight: 400;
  color: #fff;
}
/* blog inner page css */
.blog-area {
  padding: 110px 0 70px;
}
.blog-single-box {
  margin-bottom: 40px;
}
.blog-thumb {
  position: relative;
}
.blog-thumb::before {
  position: absolute;
  content: "";
  height: 100%;
  width: 100%;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  background: rgb(240, 154, 62, 0.8);
  border-radius: 5px;
  transform: scale(0);
  transition: 0.5s;
}
.blog-single-box:hover .blog-thumb::before {
  transform: scale(1);
  border-radius: 5px 5px 0px 0px;
}
.blog-thumb img {
  width: 100%;
}
.blog-icon-thumb {
  position: absolute;
  top: 50%;
  right: 50%;
  transform: translate(50%, -50%);
  opacity: 0;
  transition: 0.5s;
}
.blog-single-box:hover .blog-icon-thumb {
  opacity: 1;
}
.blog-content {
  background: #f9f7ff;
  padding: 17px 30px 0px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 0 0 5px 5px;
}
.blog-list ul {
  list-style: none;
}
.blog-list ul li {
  display: inline-block;
  margin-right: 60px;
}
.blog-list ul li a {
  display: inline-block;
  font-size: 14px;
  font-weight: 400;
  color: #7e8890;
  margin: 2px 0 13px;
  text-decoration: none;
}
.blog-title a {
  text-decoration: none;
}
.blog-title a h4 {
  font-size: 20px;
  line-height: 28px;
  font-weight: 600;
  margin: 0 0 8px;
}
.blog-title a h4:hover {
  color: #2861ad;
}

/* blog details inner page css */

.blog-details-area {
  padding: 100px 0 0px;
}
.blog-details-single-box {
  background: #fff;
  box-shadow: 0px 10px 30px rgb(1 15 28 / 8%);
  padding: 42px 38px 32px;
  border-radius: 20px;
  margin-bottom: 44px;
}
.blog-details-thumb img {
  width: 100%;
  border-radius: 20px;
}
.blog-details-details-content-list ul {
  list-style: none;
}
.blog-details-content-list ul li {
  display: inline-block;
  margin-right: 28px;
}
.blog-details-content-list ul li a {
  display: inline-block;
  font-size: 14px;
  margin: 29px 0 13px;
  text-decoration: none;
}
.blog-details-content-list ul li a:hover {
  color: #2861ad;
}
.blog-details-content-list ul li a i {
  margin-right: 5px;
  color: #2861ad;
}
.blog-details-content-title h2 {
  font-size: 30px;
  font-weight: 600;
  margin: 7px 0px 20px;
}
.blog-details-content-title h2 a {
  transition: 0.5s;
}
.blog-details-content-title h2 a:hover {
  color: #2861ad;
}
.blog-details-content-discription {
  margin-bottom: 28px;
}
.blog-details-btn a {
  display: inline-block;
  font-size: 14px;
  background: #2861ad;
  border: 1px solid #2861ad;
  padding: 16px 36px;
  font-weight: 500;
  position: relative;
  border-radius: 30px;
  z-index: 1;
  overflow: hidden;
  color: #000;
  transition: 0.5s;
}
.blog-details-btn a::before {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  left: 0;
  bottom: 0;
  transform: scale(0, 1);
  z-index: -1;
  opacity: 0;
  transition: 0.5s;
}
.blog-details-btn a:hover::before {
  opacity: 1;
  transform: scale(1, 1);
  background: #fff;
  border-radius: 30px;
}

/* sidebar area css */

.sidebar-seach-box {
  background: #fff;
  box-shadow: 0px 10px 30px rgb(1 15 28 / 8%);
  padding: 35px 30px 35px;
  position: relative;
  border-radius: 20px;
  margin-bottom: 40px;
}
.sidebar-search {
  display: flex;
}
.form-control {
  height: 55px;
  width: 100%;
  padding: 0 25px 0 25px;
  font-size: 16px;
  border-radius: 30px;
  background: #f6f4ec;
}
button.button {
  border: inherit;
  position: absolute;
  right: 0;
  background: none;
  left: 66%;
  top: 41px;
}
button.button i {
  background: #2861ad;
  height: 40px;
  width: 40px;
  line-height: 40px;
  display: inline-block;
  border-radius: 100%;
  font-size: 14px;
  color: #fff;
}
.sidebar-box {
  background: #fff;
  box-shadow: 0px 10px 30px rgb(1 15 28 / 8%);
  padding: 35px 30px 35px;
  border-radius: 20px;
  margin-bottom: 40px;
}
.sidebar-title h3 {
  font-size: 24px;
  font-weight: 600;
  margin-bottom: 28px;
}
.sidebar-catagori ul {
  list-style: none;
}
.sidebar-catagori ul li {
  background: #f6f4ec;
  margin: 14px 0px 0px;
  padding: 17px 30px;
  border-radius: 30px;
}
.sidebar-catagori ul li a:hover {
  color: #2861ad;
}
.sidebar-thumb img {
  width: 100%;
}
.recent-post {
  display: flex;
  margin-bottom: 18px;
}
.recent-post-thumb img {
  border-radius: 8px;
  margin-top: 5px;
}
.post-title a {
  display: inline-block;
  text-decoration: none;
}
.post-title a h4 {
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  margin: 0 20px 0px;
  text-decoration: none;
}
.post-title a h4:hover {
  color: #2861ad;
}
.post-date a {
  font-size: 14px;
  margin: 0px 21px 0;
  transition: 0.5s;
  text-decoration: none;
}
.post-date a:hover {
  color: #2861ad;
}
.post-date a i {
  font-size: 14px;
  margin-right: 3px;
  color: #2861ad;
}
.blog-quote {
  padding: 50px 50px 50px 50px;
  background: #ffff;
  box-shadow: 0 0 30px 0 rgb(0 0 0 / 8%);
  border-radius: 8px;
  position: relative;
  margin: 36px 0 36px;
}
.blog-quote::before {
  position: absolute;
  content: "\F6B0";
  font-family: "bootstrap-icons";
  font-size: 50px;
  right: 36px;
  bottom: 51px;
  opacity: 0.06;
}
.blog-quote p {
  font-style: italic;
}
.blog-quote h3 {
  font-size: 20px;
  position: relative;
  margin: 0 63px;
}
.blog-quote h3::before {
  position: absolute;
  content: "";
  height: 3px;
  width: 50px;
  background: #2861ad;
  bottom: 8px;
  left: -62px;
}
h3.mt-40 {
  margin: 50px 0 19px;
}
/* comment form */
.comment-form {
  padding: 40px;
  box-shadow: 0px 6px 30px rgb(7 36 95 / 8%);
  border-radius: 20px;
  margin-bottom: 100px;
}
.form-title h3 {
  margin-bottom: 15px;
}
.comment-rating {
  display: flex;
}
.comment-rating p {
  margin-right: 10px;
}
.comment-rating span i {
  color: #2861ad;
}
.style-three .form-box {
  position: relative;
}
.form-box textarea {
  width: 100%;
  height: 150px;
  padding: 16px 17px;
  border-radius: 5px;
  background: #f0f1f2;
  outline: 0;
  border: 1px solid #e0e0e0;
  transition: 0.5s;
  margin-bottom: 16px;
}
.form-box i {
  position: absolute;
  right: 27px;
  top: 16px;
}
.form-box input {
  width: 100%;
  height: 55px;
  padding: 16px 17px;
  border-radius: 5px;
  background: #f0f1f2;
  outline: 0;
  border: 1px solid #e0e0e0;
  margin-bottom: 19px;
}
.checkbox-box label {
  padding-left: 5px;
  font-size: 16px;
  color: #000;
  margin-bottom: 29px;
}
.form-box button {
  display: inline-block;
  font-size: 14px;
  background: #2861ad;
  border: 1px solid #2861ad;
  font-weight: 500;
  position: relative;
  border-radius: 5px;
  z-index: 1;
  overflow: hidden;
  color: #000;
  transition: 0.5s;
}
.form-box button::before {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  left: 0;
  bottom: 0;
  transform: scale(0, 1);
  z-index: -1;
  opacity: 0;
  transition: 0.5s;
}
.form-box button:hover::before {
  opacity: 1;
  transform: scale(1, 1);
  background: #fff;
  border-radius: 10px;
}

/* contact us inner page  */

.map-area {
  padding: 100px 0 100px;
}
.contact-info-area {
  padding: 0px 0 12px;
}
.contact-info {
  background: #fff;
  box-shadow: 0px -4px 30px rgb(1 15 28 / 8%);
  padding: 52px 57px 52px;
  background-size: 100% 100%;
  border-radius: 10px;
}
.contact-info-icon {
  width: 80px;
  height: 80px;
  display: inline-block;
  line-height: 80px;
  background: #2861ad;
  font-size: 32px;
  color: #fff;
  position: relative;
  border-radius: 100%;
  z-index: 1;
}
.contact-info-icon::before {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  left: 10px;
  top: 5px;
  background: #2861ad;
  opacity: 0.4;
  border-radius: 100%;
  z-index: -1;
  transition: 0.5s;
}
.contact-info:hover .contact-info-icon::before {
  left: 0;
  top: 0;
}
.contact-info-icon::after {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  left: -10px;
  top: -5px;
  border-radius: 100%;
  background: #2861ad;
  opacity: 0.4;
  z-index: -1;
  transition: 0.5s;
}
.contact-info:hover .contact-info-icon::after {
  left: 0;
  top: 0;
}
.contact-info-title h3 {
  padding: 26px 0 9px;
  font-size: 24px;
}
.contact-numbar ul {
  list-style: none;
}
.contact-numbar ul li a {
  display: inline-block;
  text-decoration: none;
}

/* contact area inner page */

.contact-area {
  padding: 100px 0 100px;
}
.row.inner {
  background: #fff;
  padding: 40px 59px 48px 59px;
  box-shadow: 8px 9px 35px 0px rgb(145 145 145 / 24%);
  border-radius: 20px;
}
.contact-title {
  margin-bottom: 37px;
}
.contact-title h3 {
  text-align: center;
  font-size: 36px;
  font-weight: 700;
}
.contact-area .form_box.inner {
  padding-bottom: 26px;
}
.contact-area .form_box.inner input {
  width: 100%;
  height: 55px;
  padding: 0 25px 0 25px;
  background: #f0f1f2;
  outline: 0;
  border-radius: 30px;
  border: 0;
}
.contact-area input[type="text"]::placeholder {
  font-size: 14px;
}
.contact-area .form_box.inner textarea {
  width: 100%;
  height: 150px;
  border-radius: 20px;
  padding: 14px 25px 14px 25px;
  background: #f0f1f2;
  border: 0;
  outline: 0;
}
.contact-area textarea#massege::placeholder {
  font-size: 14px;
}
.form-button {
  text-align: center;
}
.contact-area .form-button.inner button {
  display: inline-block;
  font-size: 14px;
  background: #2861ad;
  border: 1px solid #2861ad;
  padding: 15px 36px 15px 36px;
  font-weight: 500;
  position: relative;
  border-radius: 30px;
  z-index: 1;
  overflow: hidden;
  color: #000;
  transition: 0.5s;
}
.contact-area .form-button.inner button::before {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  left: 0;
  bottom: 0;
  transform: scale(0, 1);
  z-index: -1;
  opacity: 0;
  transition: 0.5s;
}
.contact-area .form-button.inner button:hover::before {
  opacity: 1;
  transform: scale(1, 1);
  background: #fff;
  border-radius: 10px;
}

/* events innner page css */
.events-area {
  padding: 110px 0 50px;
}
.events-single-box {
  margin-bottom: 60px;
  transition: 0.5s;
}
.events-single-box:hover {
  transform: translateY(-10px);
}
.events-thumb {
  position: relative;
}
.events-thumb img {
  width: 100%;
  border-radius: 5px 5px 0px 0px;
}
.events-catagori {
  position: absolute;
  top: 30px;
  left: 30px;
}
.events-catagori a {
  display: inline-block;
  text-decoration: none;
  background: #2861ad;
  padding: 5px 20px;
  border-radius: 4px;
  color: #fff;
}
.events-content {
  background: #ffff;
  box-shadow: 0 0 20px #eee;
  padding: 25px 30px 15px 30px;
  border-radius: 0 0 5px 5px;
}
.events-content h5 {
  font-size: 14px;
  font-weight: 400;
  margin: 23px 0 19px;
}
.events-content a {
  display: inline-block;
  text-decoration: none;
}
.events-content a h4 {
  font-size: 26px;
  line-height: 32px;
  transition: 0.5s;
}
.events-content a h4:hover {
  color: #2861ad;
}
.events-content p {
  font-size: 16px;
  font-weight: 400;
  margin: 18px 0 35px;
}
.events-btm {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid #efefef;
  padding-top: 26px;
}
.events-date span {
  font-size: 14px;
}
.events-date span i {
  font-size: 14px;
  margin-right: 2px;
}
.events-btn a {
  background: #2861ad;
  padding: 7px 15px;
  color: #fff;
  border-radius: 2px;
  display: inline-block;
  font-size: 14px;
  transition: 0.5s;
}
.events-btn a:hover {
  background: #012068;
}

/* service inner page css */

.program-area.inner {
  padding: 102px 0 70px;
}
/* gallery inner page css */
.protfolio-area.inner {
  padding: 104px 0 92px;
}

/*Course Area
===================*/

.courses-area.style-two {
  padding: 100px 0 100px;
}

.courses-single-box {
  margin-bottom: 30px;
}

.courses-details-thumb img {
  width: 100%;
  height: 550px;
}

.courses-content {
  padding: 22px 30px 20px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  background: #f9f7ff;
}

.courses-rating i {
  display: inline-block;
  font-size: 15px;
  color: #2861ad;
  padding-right: 5px;
}

.courses-content-title h4 a {
  font-size: 25px;
  font-weight: 500;
  display: inline-block;
  transition: 0.5s;
  padding: 3px 0 0;
}

.courses-discription p {
  margin: 15px 0 8px;
}

.courses-time {
  display: inline-block;
  margin-right: 25px;
}

.courses-time h6 {
  font-size: 18px;
  font-weight: 500;
  padding: 0 0 5px;
}

.courses-time span {
  font-size: 15px;
}

.courses-content-title h4 a:hover {
  color: #2861ad;
}

/*Course Detials
===================*/

.courses-details-area {
  padding: 100px 0 100px;
}

.sidebar-courses {
  padding: 40px 0 40px;
  background: #f9f7ff;
  margin-bottom: 30px;
}

.courses-info ul li {
  display: block;
  list-style: none;
  border-bottom: 1px solid #ccd2e1;
  margin-bottom: 10px;
  padding: 0 0 10px 30px;
}

.courses-info ul li i {
  display: inline-block;
  padding-right: 5px;
  color: #2861ad;
}

.courses-info ul li span {
  float: right;
  padding-right: 30px;
}

.courses-price-content h4 {
  font-size: 20px;
  font-weight: 600;
  padding: 20px 0 5px;
}

.courses-price-single-box {
  text-align: center;
}

.dreamhub-btn.courses {
  text-align: center;
  padding: 20px 0 0;
}

.dreamhub-btn a i {
  padding-left: 5px;
}

/*Letest Course Box*/

.latest-courses-single-box {
  padding: 20px 30px 30px;
  background: #f9f7ff;
}

.latest-courses-title h4 {
  font-size: 24px;
  font-weight: 500;
  padding: 0 0 13px;
}

.latest-courses-item {
  padding: 12px 0 0;
}

.latest-courses-thumb {
  float: left;
  margin-right: 20px;
}

.latest-courses-content {
  overflow: hidden;
  position: relative;
  top: -8px;
}

.latest-courses-content-title h5 {
  font-size: 18px;
  font-weight: 500;
  margin-top: 0;
}

a.catagory {
  font-size: 15px;
  color: #2861ad;
}

.latest-courses-rating i {
  font-size: 13px;
  color: #2861ad;
  letter-spacing: 1px;
}

/*Course Dtls Right*/

.courses-details-thumb img {
  width: 100%;
}

.courses-details-content h2 {
  font-size: 28px;
  font-weight: 500;
  padding: 18px 0 12px;
}

.row.catagori {
  padding: 25px 0 0;
}

.courses-catagori-content h4 {
  font-size: 22px;
  font-weight: 600;
  padding: 10px 0 5px;
}

/* scroll up area */

.scroll-area {
  position: relative;
  z-index: 999;
}
.scroll-area .go-top {
  position: fixed;
  cursor: pointer;
  top: 0;
  right: 30px;
  color: #ffffff;
  background-image: -moz-linear-gradient(0deg, #2861ad 0%, #2861ad 100%);
  background-image: -webkit-linear-gradient(0deg, #2861ad 0%, #2861ad 100%);
  z-index: 9999;
  width: 45px;
  text-align: center;
  height: 45px;
  line-height: 42px;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: all 0.9s ease-out 0s;
  -moz-transition: all 0.9s ease-out 0s;
  border-radius: 10px;
}
.scroll-area .go-top i {
  position: absolute;
  top: 50%;
  left: -4px;
  right: 0;
  margin: 0 auto;
  font-size: 15px;
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
  -webkit-transition: all 0.5s ease-out 0s;
  -moz-transition: all 0.5s ease-out 0s;
}
.scroll-area .go-top i:last-child {
  opacity: 0;
  visibility: hidden;
  top: 60%;
}
.scroll-area .go-top::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  background-image: linear-gradient(to right, #2861ad 0%, #2861ad 100%);
  background-image: -ms-linear-gradient(0deg, #2861ad 0%, #2861ad 100%);
  opacity: 0;
  visibility: hidden;
  -webkit-transition: all 0.5s ease-out 0s;
  -moz-transition: all 0.5s ease-out 0s;
  border-radius: 100%;
}
.scroll-area .go-top:focus,
.scroll-area .go-top:hover {
  color: #fff;
}
.scroll-area .go-top:focus::before,
.scroll-area .go-top:hover::before {
  opacity: 1;
  visibility: visible;
}
.scroll-area .go-top:focus i:first-child,
.scroll-area .go-top:hover i:first-child {
  opacity: 0;
  top: 0;
  visibility: hidden;
}
.scroll-area .go-top:focus i:last-child,
.scroll-area .go-top:hover i:last-child {
  opacity: 1;
  visibility: visible;
  top: 50%;
}
.scroll-area .go-top.active {
  top: 95%;
  -webkit-transform: translateY(-98%);
  -moz-transform: translateY(-98%);
  opacity: 1;
  visibility: visible;
  border-radius: 0;
  right: 30px;
  border-radius: 100%;
}
.top-wrap {
  position: relative;
}
.top-wrap .go-top-button {
  display: inline-block;
  width: 50px;
  height: 50px;
  line-height: 40px;
  text-align: center;
  color: #fff;
  top: 3px;
  z-index: 1;
  background: #2861ad;
}
.top-wrap .go-top-button i {
  font-size: 20px;
  font-weight: 700;
  padding-left: 4px;
  color: #fff;
}
.top-wrap .go-top-button::after {
  z-index: -1;
  content: "";
  position: absolute;
  left: 3px;
  top: 3px;
  width: 45px;
  height: 45px;
  -webkit-animation: ripple 1.6s ease-out infinite;
  -moz-animation: ripple 1.6s ease-out infinite;
  opacity: 0;
  background-image: -moz-linear-gradient(0deg, #2861ad 0%, #2861ad 100%);
  background-image: -webkit-linear-gradient(0deg, #2861ad 0%, #2861ad 100%);
  border-radius: 100%;
}
.top-wrap .go-top-button:hover {
  background-color: #ff3c00;
  color: #fff;
}
@keyframes ripple {
  0%,
  35% {
    -webkit-transform: scale(0);
    -moz-transform: scale(0);
    -ms-transform: scale(0);
    -o-transform: scale(0);
    transform: scale(0);
    opacity: 1;
  }
  50% {
    -webkit-transform: scale(1.5);
    -moz-transform: scale(1.5);
    -ms-transform: scale(1.5);
    -o-transform: scale(1.5);
    transform: scale(1.5);
    opacity: 0.8;
  }
  100% {
    opacity: 0;
    -webkit-transform: scale(2);
    -moz-transform: scale(2);
    -ms-transform: scale(2);
    -o-transform: scale(2);
    transform: scale(2);
  }
}

/* Animation */

.rotateme {
  -webkit-animation-name: rotateme;
  animation-name: rotateme;
  -webkit-animation-duration: 20s;
  animation-duration: 20s;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
}

@keyframes rotateme {
  from {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

/* bounce-animate */

.bounce-animate {
  animation-name: float-bob;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  -moz-animation-name: float-bob;
  -moz-animation-duration: 2s;
  -moz-animation-iteration-count: infinite;
  -moz-animation-timing-function: linear;
  -ms-animation-name: float-bob;
  -ms-animation-duration: 2s;
  -ms-animation-iteration-count: infinite;
  -ms-animation-timing-function: linear;
  -o-animation-name: float-bob;
  -o-animation-duration: 2s;
  -o-animation-iteration-count: infinite;
  -o-animation-timing-function: linear;
}
.bounce-animate2 {
  animation-name: float-bob2;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  -moz-animation-name: float-bob2;
  -moz-animation-duration: 3s;
  -moz-animation-iteration-count: infinite;
  -moz-animation-timing-function: linear;
  -ms-animation-name: float-bob2;
  -ms-animation-duration: 3s;
  -ms-animation-iteration-count: infinite;
  -ms-animation-timing-function: linear;
  -o-animation-name: float-bob2;
  -o-animation-duration: 3s;
  -o-animation-iteration-count: infinite;
  -o-animation-timing-function: linear;
}
.bounce-animate3 {
  animation-name: float-bob3;
  animation-duration: 4s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  -moz-animation-name: float-bob3;
  -moz-animation-duration: 4s;
  -moz-animation-iteration-count: infinite;
  -moz-animation-timing-function: linear;
  -ms-animation-name: float-bob3;
  -ms-animation-duration: 4s;
  -ms-animation-iteration-count: infinite;
  -ms-animation-timing-function: linear;
  -o-animation-name: float-bob3;
  -o-animation-duration: 4s;
  -o-animation-iteration-count: infinite;
  -o-animation-timing-function: linear;
}
.bounce-animate4 {
  animation-name: float-bob4;
  animation-duration: 5s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  -moz-animation-name: float-bob4;
  -moz-animation-duration: 5s;
  -moz-animation-iteration-count: infinite;
  -moz-animation-timing-function: linear;
  -ms-animation-name: float-bob4;
  -ms-animation-duration: 5s;
  -ms-animation-iteration-count: infinite;
  -ms-animation-timing-function: linear;
  -o-animation-name: float-bob4;
  -o-animation-duration: 5s;
  -o-animation-iteration-count: infinite;
  -o-animation-timing-function: linear;
}
.bounce-animate5 {
  animation-name: float-bob5;
  animation-duration: 6s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  -moz-animation-name: float-bob5;
  -moz-animation-duration: 6s;
  -moz-animation-iteration-count: infinite;
  -moz-animation-timing-function: linear;
  -ms-animation-name: float-bob5;
  -ms-animation-duration: 6s;
  -ms-animation-iteration-count: infinite;
  -ms-animation-timing-function: linear;
  -o-animation-name: float-bob5;
  -o-animation-duration: 6s;
  -o-animation-iteration-count: infinite;
  -o-animation-timing-function: linear;
}

@-webkit-keyframes float-bob {
  0% {
    -webkit-transform: translateY(-30px);
    transform: translateY(-30px);
  }
  50% {
    -webkit-transform: translateY(-15px);
    transform: translateY(-15px);
  }
  100% {
    -webkit-transform: translateY(-30px);
    transform: translateY(-30px);
  }
}
@-webkit-keyframes float-bob2 {
  0% {
    -webkit-transform: translateY(-60px);
    transform: translateY(-60px);
  }
  50% {
    -webkit-transform: translateY(-30px);
    transform: translateY(-30px);
  }
  100% {
    -webkit-transform: translateY(-60px);
    transform: translateY(-60px);
  }
}
@-webkit-keyframes float-bob3 {
  0% {
    -webkit-transform: translateY(-40px);
    transform: translateY(-40px);
  }
  50% {
    -webkit-transform: translateY(-25px);
    transform: translateY(-25px);
  }
  100% {
    -webkit-transform: translateY(-40px);
    transform: translateY(-40px);
  }
}
@-webkit-keyframes float-bob4 {
  0% {
    -webkit-transform: translateY(-70px);
    transform: translateY(-70px);
  }
  50% {
    -webkit-transform: translateY(-35px);
    transform: translateY(-35px);
  }
  100% {
    -webkit-transform: translateY(-70px);
    transform: translateY(-70px);
  }
}
@-webkit-keyframes float-bob5 {
  0% {
    -webkit-transform: translateY(-75px);
    transform: translateY(-75px);
  }
  50% {
    -webkit-transform: translateY(-35px);
    transform: translateY(-35px);
  }
  100% {
    -webkit-transform: translateY(-75px);
    transform: translateY(-75px);
  }
}
@-webkit-keyframes movebounce {
  0% {
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
  }
  50% {
    -webkit-transform: translateY(20px);
    transform: translateY(20px);
  }
  100% {
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
  }
}

@keyframes movebounce {
  0% {
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
  }
  50% {
    -webkit-transform: translateY(20px);
    transform: translateY(20px);
  }
  100% {
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
  }
}

@-webkit-keyframes moveleftbounce {
  0% {
    -webkit-transform: translateX(0px);
    transform: translateX(0px);
  }
  50% {
    -webkit-transform: translateX(20px);
    transform: translateX(20px);
  }
  100% {
    -webkit-transform: translateX(0px);
    transform: translateX(0px);
  }
}

@keyframes moveleftbounce {
  0% {
    -webkit-transform: translateX(0px);
    transform: translateX(0px);
  }
  50% {
    -webkit-transform: translateX(20px);
    transform: translateX(20px);
  }
  100% {
    -webkit-transform: translateX(0px);
    transform: translateX(0px);
  }
}

.rotateme {
  -webkit-animation-name: rotateme;
  animation-name: rotateme;
  -webkit-animation-duration: 20s;
  animation-duration: 20s;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
}

@keyframes rotateme {
  from {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@-webkit-keyframes rotateme {
  from {
    -webkit-transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
  }
}

@-webkit-keyframes rotate3d {
  0% {
    -webkit-transform: rotateY(0deg);
    transform: rotateY(0deg);
  }
  100% {
    -webkit-transform: rotateY(360deg);
    transform: rotateY(360deg);
  }
}

@keyframes rotate3d {
  0% {
    -webkit-transform: rotateY(0deg);
    transform: rotateY(0deg);
  }
  100% {
    -webkit-transform: rotateY(360deg);
    transform: rotateY(360deg);
  }
}

@keyframes animationFramesOne {
  0% {
    -webkit-transform: translate(0px, 0px) rotate(0deg);
    transform: translate(0px, 0px) rotate(0deg);
  }
  20% {
    -webkit-transform: translate(73px, -1px) rotate(36deg);
    transform: translate(73px, -1px) rotate(36deg);
  }
  40% {
    -webkit-transform: translate(141px, 72px) rotate(72deg);
    transform: translate(141px, 72px) rotate(72deg);
  }
  60% {
    -webkit-transform: translate(83px, 122px) rotate(108deg);
    transform: translate(83px, 122px) rotate(108deg);
  }
  80% {
    -webkit-transform: translate(-40px, 72px) rotate(144deg);
    transform: translate(-40px, 72px) rotate(144deg);
  }
  100% {
    -webkit-transform: translate(0px, 0px) rotate(0deg);
    transform: translate(0px, 0px) rotate(0deg);
  }
}

@-webkit-keyframes animationFramesOne {
  0% {
    -webkit-transform: translate(0px, 0px) rotate(0deg);
  }
  20% {
    -webkit-transform: translate(73px, -1px) rotate(36deg);
  }
  40% {
    -webkit-transform: translate(141px, 72px) rotate(72deg);
  }
  60% {
    -webkit-transform: translate(83px, 122px) rotate(108deg);
  }
  80% {
    -webkit-transform: translate(-40px, 72px) rotate(144deg);
  }
  100% {
    -webkit-transform: translate(0px, 0px) rotate(0deg);
  }
}

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

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

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

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

.fadeInDown {
  -webkit-animation-name: fadeInDown;
  animation-name: fadeInDown;
}

@-webkit-keyframes fadeInDownBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0);
    transform: translate3d(0, -2000px, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

/*===========================
<--  Loader Css -->
=============================*/
.loader-wrapper {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  transition: 0.8s 1s ease;
  z-index: 666;
}
.loader {
  position: relative;
  display: block;
  z-index: 201;
  top: 50%;
  left: 50%;
  width: 100px;
  height: 100px;
  margin: -50px 0 0 -50px;
  border-radius: 50%;
  transition: all 1s 1s ease;
  border: 3px solid transparent;
  border-top-color: #2861ad;
  -webkit-animation: spin 1.5s linear infinite;
  -moz-animation: spin 1.5s linear infinite;
  -o-animation: spin 1.5s linear infinite;
  animation: spin 1.5s linear infinite;
}
.loader:before {
  position: absolute;
  content: "";
  top: 6px;
  left: 6px;
  right: 6px;
  bottom: 6px;
  border-radius: 50%;
  border: 3px solid transparent;
  border-left-color: #012068;
  -webkit-animation: spin 2s linear infinite;
  -moz-animation: spin 2s linear infinite;
  -o-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
}
.loader:after {
  position: absolute;
  content: "";
  top: 15px;
  left: 15px;
  right: 15px;
  bottom: 15px;
  border-radius: 50%;
  border: 3px solid transparent;
  border-right-color: #fff;
  -webkit-animation: spin 2.5s linear infinite;
  -moz-animation: spin 2.5s linear infinite;
  -o-animation: spin 2.5s linear infinite;
  animation: spin 2.5s linear infinite;
}
/*/ Here comes the Magic /*/

@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@-moz-keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

.loader-wrapper .loder-section {
  position: fixed;
  top: 0;
  width: 50%;
  height: 100%;
  background: #000;
  z-index: 2;
}
.loader-wrapper .loder-section.left-section {
  left: 0;
  transition: 1s 1.4s ease;
}
.loader-wrapper .loder-section.right-section {
  right: 0;
  transition: 1s 1.4s ease;
}

/*/ When page loaded /*/
.loaded .loder-section.left-section {
  left: -100%;
}
.loaded .loder-section.right-section {
  right: -100%;
}
.loaded .loader-wrapper {
  visibility: hidden;
}
.loaded .loader {
  top: -100%;
  opacity: 0;
}