@charset "UTF-8";
/*-----------------------------------------------------------------------------------

    Theme Name: Dreamers Academy
    Author: LEAD ACADEMY
    Support: info@lead.academy.com
    Description: Dreamers Academy – Online Learning and Education HTML5 Template
    Version: 1.0

-----------------------------------------------------------------------------------

/************ TABLE OF CONTENTS ***************

    01. Common CSS
    02. Header CSS
    03. Hero CSS
    04. Level 1 CSS
    05. Level 2 CSS
    06. Level 3 CSS
    07. Our Admission Process
    08. Our Courses
    09. Coding Platform
    10. Column Block
    11. Expert Trainer
    12. Best Experience
    13. Young Coders
    14. Pricing Plan
    15. Testimonial
    00. Footer CSS


**********************************************/
/*


*/
/*----------------------------------------*/
/*  01. Theme default CSS
/*----------------------------------------*/
@font-face {
  font-family: Gilroy-Medium;
  src: url(../fonts/Gilroy-Medium.ttf);
}
@font-face {
  font-family: Gilroy-Bold;
  src: url(../fonts/Gilroy-Bold.ttf);
}
@font-face {
  font-family: Gilroy-ExtraBold;
  src: url(../fonts/Gilroy-ExtraBold.ttf);
}
@font-face {
  font-family: Gilroy-Medium;
  src: url(../fonts/Gilroy-Medium.ttf);
}
@font-face {
  font-family: Gilroy-Black;
  src: url(../fonts/Gilroy-Black.ttf);
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: Gilroy-Medium;
  font-size: 16px;
  font-weight: normal;
  color: #6d6e75;
  line-height: 26px;
}
@media (min-width: 1200px){
  .container, .container-lg, .container-md, .container-sm, .container-xl {
      max-width: 1200px;
  }
}
@media (min-width: 1900px){
  .container, .container-lg, .container-md, .container-sm, .container-xl {
      max-width: 1400px;
  }
}
a {
  text-decoration: none;
}
img{
  max-width: 100%;
}
.w-img img {
  width: 100%;
}

.m-img img {
  max-width: 100%;
}

a,
.btn,
button,
span,
p,
i,
input,
select,
textarea,
li,
img,
svg path,
*::after,
*::before,
.transition-3,
h1,
h2,
h3,
h4,
h5,
h6 {
  -webkit-transition: all 0.3s ease-out 0s;
  -moz-transition: all 0.3s ease-out 0s;
  -ms-transition: all 0.3s ease-out 0s;
  -o-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s;
}

a:focus,
.button:focus {
  text-decoration: none;
  outline: none;
}

a:focus,
a:hover {
  color: inherit;
  text-decoration: none;
}

a,
button {
  color: inherit;
  outline: none;
  border: none;
}

button:hover {
  cursor: pointer;
}

button:focus {
  outline: 0;
  border: 0;
}

.uppercase {
  text-transform: uppercase;
}

.capitalize {
  text-transform: capitalize;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: Gilroy-Bold;
  color: #0e1133;
  margin-top: 0px;
  font-weight: 700;
  line-height: 1.2;
  -webkit-transition: all 0.3s ease-out 0s;
  -moz-transition: all 0.3s ease-out 0s;
  -ms-transition: all 0.3s ease-out 0s;
  -o-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s;
}

h1 {
  font-size: 40px;
}

h2 {
  font-size: 36px;
}

h3 {
  font-size: 24px;
}

h4 {
  font-size: 20px;
}

h5 {
  font-size: 16px;
}

h6 {
  font-size: 14px;
}

ul {
  margin: 0px;
  padding: 0px;
}

li {
  list-style: none;
}

p {
  font-family: "Hind", sans-serif;
  font-size: 16px;
  font-weight: normal;
  color: #6d6e75;
  margin-bottom: 15px;
  line-height: 26px;
}
.title-style-1{
  margin-bottom: 70px;
}
.title-style-1 h3{
  font-family: 'Gilroy-Bold';
  font-size: 24px;
  line-height: 28px;
  color: #EEAC1F;
  margin-bottom: 20px;
}
.title-style-1 h1{
  font-family: 'Gilroy-Bold';
  font-size: 54px;
  line-height: 54px;
  letter-spacing: -1px;
  color: #262729;
}
.title-style-2{
  margin-bottom: 70px;
}
.title-style-2 h3{
  font-family: 'Gilroy-Bold';
  font-size: 24px;
  line-height: 28px;
  color: #0D59EF;
  margin-bottom: 20px;
}
.title-style-2 h1{
  font-family: 'Gilroy-Bold';
  font-size: 54px;
  line-height: 54px;
  letter-spacing: -1px;
  color: #262729;
}
*::-moz-selection {
  background: #0183cc;
  color: #ffffff;
  text-shadow: none;
}

::-moz-selection {
  background: #0183cc;
  color: #ffffff;
  text-shadow: none;
}

::selection {
  background: #0183cc;
  color: #ffffff;
  text-shadow: none;
}

/*--
    - Input Placeholder
-----------------------------------------*/
*::-moz-placeholder {
  color: #0e1133;
  font-size: 14px;
  opacity: 1;
}

*::placeholder {
  color: #0e1133;
  font-size: 14px;
  opacity: 1;
}

/*--
    - Common Classes
-----------------------------------------*/
.fix {
  overflow: hidden;
}

.clear {
  clear: both;
}

.f-left {
  float: left;
}

.f-right {
  float: right;
}

.z-index-1 {
  z-index: 1;
}

.overflow-y-visible {
  overflow-x: hidden;
  overflow-y: visible;
}

.p-relative {
  position: relative;
}

.p-absolute {
  position: absolute;
}

/*--
    - Background color
-----------------------------------------*/
.section-bg-1{
  background: #DFEEFF;
}
.section-bg-2{
  background: #FFFEDF;
}
.section-bg-3{
  background: #E9DFFF;
}
.section-bg-4{
  background: #F8F9FC;
}
.grey-bg {
  background: #f3f4f8;
}

.grey-bg-2 {
  background: #edeef3;
}

.grey-bg-5 {
  background: #f5f6fa;
}

.blue-bg {
  background: #0183cc;
}

.blue-bg-3 {
  background: #b8dde3;
}

.blue-bg-4 {
  background: #2d69f0;
}

.pink-bg {
  background: #dd246e;
}

.purple-bg {
  background: #8007e6;
}

.green-bg {
  background: #0cae74;
}

.white-bg {
  background: #ffffff;
}

.black-bg {
  background: #0e1133;
}

.footer-bg {
  background: #0e1133;
}

/*--
    - color
-----------------------------------------*/
.text-white h1,
.text-white h2,
.text-white h3,
.text-white h4,
.text-white h5,
.text-white h6,
.text-white p,
.text-white span,
.text-white li,
.text-white a {
  color: #ffffff !important;
}

.white-color {
  color: #ffffff;
}

.theme-color {
  color: #0183cc !important;
}

.black-color {
  color: #0e1133;
}

.pl-245 {
  padding-left: 245px;
}

.pr-245 {
  padding-right: 245px;
}

.mb-22 {
  margin-bottom: 22px;
}

.ml-270 {
  margin-left: 270px;
}

.mb--120 {
  margin-bottom: -120px;
}

.mb--100 {
  margin-bottom: -100px;
}

.mt--210 {
  margin-top: -210px;
}

.mt--80 {
  margin-top: -80px;
}

.mb-130 {
  margin-bottom: -130px;
}

.section-padding {
  padding-left: 50px;
  padding-right: 50px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .section-padding {
    padding-left: 30px;
    padding-right: 30px;
  }
}
@media (max-width: 575px) {
  .section-padding {
    padding-left: 0px;
    padding-right: 0px;
  }
}

.e-btn {
  display: inline-block;
  height: 50px;
  line-height: 50px;
  text-align: center;
  padding: 0 30px;
  background: linear-gradient(180deg, #3D66B0 0%, #0F1D41 100%);
  box-shadow: -12px 20px 50px rgba(79, 143, 241, 0.3);
  border-radius: 50px;
  font-family: 'Gilroy-Bold';
  font-size: 18px;
  color: #F2F5FB;
}
.e-btn:first-letter {
  text-transform: uppercase;
}
.e-btn:hover {
  color: #ffffff;
  -webkit-box-shadow: 0px 10px 24px 0px rgba(4, 23, 118, 0.3);
  -moz-box-shadow: 0px 10px 24px 0px rgba(4, 23, 118, 0.3);
  box-shadow: 0px 10px 24px 0px rgba(4, 23, 118, 0.3);
}
.e-btn-2 {
  display: inline-block;
  height: 50px;
  line-height: 50px;
  text-align: center;
  padding: 0 30px;
  background: linear-gradient(180deg, #EEAC1F 0%, #E97D24 99.99%, rgba(238, 172, 31, 0) 100%);
  filter: drop-shadow(-12px 12px 50px rgba(255, 87, 34, 0.3));
  border-radius: 50px;
  font-family: 'Gilroy-Bold';
  font-size: 18px;
  color: #F2F5FB;
}
.e-btn-2:hover {
  color: #ffffff;
  -webkit-box-shadow: 0px 10px 24px 0px #aa28004d;
  -moz-box-shadow: 0px 10px 24px 0px #aa28004d;
  filter: drop-shadow(-12px 12px 50px #aa28004d);
}
.e-btn-3 {
  padding: 0 28px;
}
.e-btn-4 {
  height: 46px;
  line-height: 44px;
  border: 2px solid #0183cc;
  background: #0183cc;
  color: #ffffff;
}
.e-btn-5 {
  padding-left: 22px;
  padding-right: 22px;
}
.e-btn-6 {
  padding-left: 60px;
  padding-right: 60px;
}
.e-btn-7 {
  height: 44px;
  line-height: 46px;
}
.e-btn-border {
  height: 46px;
  line-height: 44px;
  border: 2px solid #d7d9e3;
  color: #0e1133;
  background: transparent;
}
.e-btn-border:hover {
  background: #0183cc;
  border-color: #0183cc;
  color: #ffffff;
}
.e-btn-border-2 {
  height: 46px;
  line-height: 44px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  background: transparent;
  padding: 0 20px;
}
.e-btn-border-2:hover {
  background: #ffffff;
  border-color: #ffffff;
  color: #0e1133;
}
.e-btn-white {
  height: 54px;
  line-height: 58px;
  background: #ffffff;
  color: #0e1133;
  padding: 0 45px;
}
.e-btn-white:hover {
  color: #0e1133;
}

/* link btn */
.link-btn {
  position: relative;
  font-size: 16px;
  color: #6d6e75;
  font-weight: 500;
  padding-right: 21px;
  display: inline-block;
}
.link-btn i {
  font-size: 14px;
  position: absolute;
  top: 12px;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  transition: all ease 0.2s;
  -webkit-transition: all ease 0.2s;
  -moz-transition: all ease 0.2s;
  -ms-transition: all ease 0.2s;
  -o-transition: all ease 0.2s;
}
.link-btn i:first-child {
  right: 10%;
  visibility: hidden;
  opacity: 0;
}
.link-btn i:last-child {
  right: 0;
}
.link-btn:hover {
  color: #0183cc;
}
.link-btn:hover i:first-child {
  right: 0;
  visibility: visible;
  opacity: 1;
}
.link-btn:hover i:last-child {
  right: -10%;
  visibility: hidden;
  opacity: 0;
}
.link-btn.link-prev {
  padding-right: 0;
  padding-left: 21px;
}
.link-btn.link-prev i:first-child {
  left: 10%;
  right: auto;
}
.link-btn.link-prev i:last-child {
  left: 0;
  right: auto;
}
.link-btn.link-prev:hover i:first-child {
  left: 0%;
  right: auto;
}
.link-btn.link-prev:hover i:last-child {
  left: -10%;
  right: auto;
}

.link-btn-2 {
  position: relative;
  font-size: 12px;
  font-weight: 500;
  color: #0e1133;
  text-transform: uppercase;
  padding-right: 25px;
  width: 40px;
  height: 40px;
  display: inline-block;
  line-height: 36px;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.2);
  overflow: hidden;
}
.link-btn-2 i {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  transition: all ease 0.2s;
  -webkit-transition: all ease 0.2s;
  -moz-transition: all ease 0.2s;
  -ms-transition: all ease 0.2s;
  -o-transition: all ease 0.2s;
}
.link-btn-2 i:first-child {
  left: -100%;
  visibility: hidden;
  opacity: 0;
}
.link-btn-2 i:last-child {
  right: 35%;
}
.link-btn-2:hover {
  color: #ffffff;
}
.link-btn-2:hover i:first-child {
  left: 35%;
  visibility: visible;
  opacity: 1;
}
.link-btn-2:hover i:last-child {
  right: -100%;
  visibility: hidden;
  opacity: 0;
}

.play-btn {
  display: inline-block;
  width: 44px;
  height: 44px;
  text-align: center;
  line-height: 47px;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  background: #ffffff;
  color: #0183cc;
  -webkit-animation: pulse 2s infinite;
  -moz-animation: pulse 2s infinite;
  -o-animation: pulse 2s infinite;
  animation: pulse 2s infinite;
  font-size: 12px;
}

@-webkit-keyframes pulse {
  0% {
    -webkit-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.4);
  }
  70% {
    -webkit-box-shadow: 0 0 0 45px rgba(255, 255, 255, 0);
  }
  100% {
    -webkit-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
  }
}
@keyframes pulse {
  0% {
    -moz-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.4);
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.4);
  }
  70% {
    -moz-box-shadow: 0 0 0 45px rgba(255, 255, 255, 0);
    box-shadow: 0 0 0 45px rgba(255, 255, 255, 0);
  }
  100% {
    -moz-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
  }
}
.section__sub-title {
  font-size: 18px;
  font-weight: 500;
  color: #0183cc;
  display: inline-block;
  margin-bottom: 5px;
}
.section__title {
  font-size: 40px;
  color: #0e1133;
  text-transform: capitalize;
  z-index: 1;
  margin-bottom: 3px;
}
@media (max-width: 575px) {
  .section__title {
    font-size: 33px;
  }
}
.section__title span {
  position: relative;
}
.section__title span img {
  position: absolute;
  left: -14px;
  bottom: 12px;
  z-index: -1;
  -webkit-animation: section-animation 3s infinite;
  animation: section-animation 3s infinite;
}
.section__title span.yellow-bg-big img {
  bottom: 15px;
  width: 120%;
  -webkit-animation: section-animation-2 3s infinite;
  animation: section-animation-2 3s infinite;
}
.section__title span.yellow-bg-sm img {
  bottom: 10px;
  width: 120%;
  -webkit-animation: section-animation-2 3s infinite;
  animation: section-animation-2 3s infinite;
}
.section__title-wrapper {
  position: relative;
  z-index: 1;
}
.section__title-wrapper p {
  font-size: 16px;
  color: #53545b;
}

@keyframes section-animation {
  0% {
    width: 0;
  }
  15% {
    width: 100%;
  }
  85% {
    opacity: 1;
  }
  90% {
    width: 100%;
    opacity: 0;
  }
  to {
    width: 0;
    opacity: 0;
  }
}
@keyframes section-animation-2 {
  0% {
    width: 0;
  }
  15% {
    width: 125%;
  }
  85% {
    opacity: 1;
  }
  90% {
    width: 125%;
    opacity: 0;
  }
  to {
    width: 0;
    opacity: 0;
  }
}
/* basic pagination */
.basic-pagination ul li {
  display: inline-block;
  margin-right: 20px;
}
@media (max-width: 575px) {
  .basic-pagination ul li {
    margin-right: 5px;
  }
}
.basic-pagination ul li.prev a, .basic-pagination ul li.next a {
  width: inherit;
  height: inherit;
  line-height: inherit;
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  border-radius: 0;
  border: none;
}
.basic-pagination ul li.prev a:hover, .basic-pagination ul li.next a:hover {
  color: #0183cc;
  background: inherit;
}
.basic-pagination ul li.active a {
  color: #ffffff;
  background: #0183cc;
  border-color: #0183cc;
}
.basic-pagination ul li a {
  position: relative;
  overflow: hidden;
  background: transparent;
  display: inline-block;
  width: 40px;
  height: 40px;
  line-height: 38px;
  text-align: center;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  font-weight: 500;
  font-size: 16px;
  border: 2px solid #eef0f6;
  color: #0e1133;
}
.basic-pagination ul li a:hover {
  background: #0183cc;
  color: #ffffff;
  border-color: #0183cc;
}

.body-overlay {
  background-color: rgba(0, 0, 0, 0.5);
  height: 100%;
  width: 100%;
  position: fixed;
  top: 0;
  z-index: 99;
  left: 0;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: all 0.3s ease-out 0s;
  -moz-transition: all 0.3s ease-out 0s;
  -ms-transition: all 0.3s ease-out 0s;
  -o-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s;
}
.body-overlay:hover {
  cursor: pointer;
}

.body-overlay.opened {
  opacity: 1;
  visibility: visible;
}

/*----------------------------------------*/
/*  02. HEADER CSS START
/*----------------------------------------*/
.header__padding {
  padding-left: 245px;
  padding-right: 245px;
}
@media only screen and (min-width: 1601px) and (max-width: 1800px) {
  .header__padding {
    padding-left: 70px;
    padding-right: 70px;
  }
}
@media only screen and (min-width: 1400px) and (max-width: 1600px) {
  .header__padding {
    padding-left: 70px;
    padding-right: 70px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .header__padding {
    padding-left: 20px;
    padding-right: 20px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .header__padding {
    padding: 20px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .header__padding {
    padding: 20px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .header__padding {
    padding: 20px;
  }
}
@media (max-width: 575px) {
  .header__padding {
    padding: 20px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .header__padding-2 {
    padding: 20px 0;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .header__padding-2 {
    padding: 20px 0;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .header__padding-2 {
    padding: 20px 0;
  }
}
@media (max-width: 575px) {
  .header__padding-2 {
    padding: 20px 0;
  }
}
.header__shadow {
  -webkit-box-shadow: 0px 30px 40px 0px rgba(1, 11, 60, 0.06);
  -moz-box-shadow: 0px 30px 40px 0px rgba(1, 11, 60, 0.06);
  box-shadow: 0px 30px 40px 0px rgba(1, 11, 60, 0.06);
}
.header__area.sticky {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: #ffffff;
  z-index: 99;
  animation: 300ms ease-in-out 0s normal none 1 running fadeInDown;
  -webkit-animation: 300ms ease-in-out 0s normal none 1 running fadeInDown;
  display: block;
  -webkit-box-shadow: 0px 10px 20px 0px rgba(8, 0, 42, 0.08);
  -moz-box-shadow: 0px 10px 20px 0px rgba(8, 0, 42, 0.08);
  box-shadow: 0px 10px 20px 0px rgba(8, 0, 42, 0.08);
}
.header__area.sticky .header__search input {
  background: #edeef3;
}
.header__area.sticky .logo .logo-white {
  display: none;
}
.header__area.sticky .logo .logo-black {
  display: block;
}
.header__area.sticky .main-menu-3 ul li a {
  color: #0e1133;
}
.header__area.sticky .main-menu-3 ul li a::after {
  color: #0e1133;
}
.header__area.sticky .main-menu-3 ul li a::before {
  background: #0e1133;
}
.header__area.sticky .main-menu-3 ul li .submenu li a::before {
  background: #0183cc;
}
.header__area.sticky .header__search-2 svg .st0 {
  fill: #0e1133;
}
.header__area.sticky .header__search-2 svg .st1 {
  fill: #121317;
}
.header__area.sticky .cat-menu {
  color: #0e1133;
}
.header__area.sticky .cat-menu:hover {
  color: #0183cc;
}
.header__area.sticky .cat-menu:hover svg .cat-dot {
  fill: #0183cc;
}
.header__area.sticky .cat-menu svg .cat-dot {
  fill: #0e1133;
}
.header__area.sticky .header__category::after {
  background: rgba(14, 17, 51, 0.2);
}
.header__area.sticky .sidebar-toggle-btn .line {
  background-color: #0183cc;
}
.header__transparent {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 11;
}
.header__white .cat-menu {
  color: #ffffff;
}
.header__white .cat-menu svg .cat-dot {
  fill: #ffffff;
}
.header__white .cat-menu:hover {
  color: #ffffff;
}
.header__white .cat-menu:hover svg .cat-dot {
  fill: #ffffff;
}
.header__white .header__category::after {
  background: rgba(255, 255, 255, 0.2);
}
.header__white .main-menu ul li a {
  color: #ffffff;
}
.header__white .sidebar-toggle-btn .line {
  background-color: #ffffff;
}
.header__category {
  position: relative;
  padding-left: 30px;
  margin-left: 30px;
  padding-top: 3px;
}
.header__category::after {
  position: absolute;
  content: "";
  left: 0;
  top: 60%;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  width: 1px;
  height: 40px;
  background: #c9ccd4;
}
.header__category ul li {
  position: relative;
}
.header__category ul li .cat-submenu {
  position: absolute;
  top: calc(100% + 30px);
  left: 0;
  width: 200px;
  padding: 17px 0;
  padding-bottom: 15px;
  background: #ffffff;
  -webkit-box-shadow: 0px 10px 20px 0px rgba(8, 0, 42, 0.08);
  -moz-box-shadow: 0px 10px 20px 0px rgba(8, 0, 42, 0.08);
  box-shadow: 0px 10px 20px 0px rgba(8, 0, 42, 0.08);
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  z-index: 1;
  visibility: hidden;
  opacity: 0;
  -webkit-transition: all 0.3s ease-out 0s;
  -moz-transition: all 0.3s ease-out 0s;
  -ms-transition: all 0.3s ease-out 0s;
  -o-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s;
}
.header__category ul li .cat-submenu li {
  display: block;
  margin-right: 0;
}
.header__category ul li .cat-submenu li > a {
  width: 100%;
  display: block;
  padding: 3px 30px;
  text-transform: capitalize;
  color: #6d6e75;
  font-weight: 500;
  position: relative;
}
.header__category ul li .cat-submenu li > a::after {
  right: 30px;
  -webkit-transform: translateY(-50%) rotate(-90deg);
  -moz-transform: translateY(-50%) rotate(-90deg);
  -ms-transform: translateY(-50%) rotate(-90deg);
  transform: translateY(-50%) rotate(-90deg);
}
.header__category ul li .cat-submenu li:hover > a {
  color: #0183cc;
}
.header__category ul li:hover .cat-submenu {
  visibility: visible;
  opacity: 1;
  top: calc(100% + 10px);
}
.header__search input {
  width: 280px;
  height: 50px;
  line-height: 20px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  background: #ffffff;
  outline: none;
  border: 1px solid #ffffff;
  font-size: 16px;
  padding: 25px 65px 20px 55px;
}
.header__search input::placeholder {
  color: #8c8faa;
}
.header__search input:focus {
  border-color: #0183cc;
}
.header__search button {
  background: transparent;
  position: absolute;
  top: 15px;
  left: 24px;
}
.header__search button i::after {
  color: #0e1133;
  opacity: 1;
}
.header__search button i::before {
  color: #8c8faa;
}
.header__search-2 svg {
  width: 18px;
  height: 18px;
}
.header__search-2 svg .st0 {
  fill: #8C8FAA;
}
.header__search-2 svg .st1 {
  fill: #FFFFFF;
}
.header__search-2 svg:hover {
  cursor: pointer;
}
.header__cart {
  position: absolute;
  top: 15px;
  right: 20px;
  padding-left: 18px;
}
.header__cart::after {
  position: absolute;
  content: "";
  top: -5px;
  left: 0;
  width: 2px;
  height: 30px;
  background: #dbdfe9;
}
.header__cart-icon {
  display: inline-block;
}
.header__cart-icon svg {
  width: 20px;
  height: 19px;
}
.header__cart-icon svg .st0 {
  fill: none;
  stroke: #0e1133;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.header__cart a {
  position: relative;
  font-size: 17px;
  color: #0e1133;
}
.header__cart a .cart-item {
  position: absolute;
  top: -10px;
  right: -10px;
  display: inline-block;
  width: 20px;
  height: 20px;
  line-height: 22px;
  text-align: center;
  font-size: 14px;
  color: #ffffff;
  background: #0183cc;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  font-weight: 500;
  -webkit-box-shadow: 0px 10px 20px 0px rgba(4, 23, 118, 0.3);
  -moz-box-shadow: 0px 10px 20px 0px rgba(4, 23, 118, 0.3);
  box-shadow: 0px 10px 20px 0px rgba(4, 23, 118, 0.3);
}
.header__cart a:hover .cart-item {
  background: #0e1133;
}
.header__btn-2 a {
  height: 44px;
  line-height: 44px;
  padding: 0 38px;
}
.header__search-3 {
  position: fixed;
  top: -100px;
  left: 0;
  width: 100%;
  min-height: 330px;
  padding: 40px 0;
  visibility: hidden;
  opacity: 0;
  -webkit-transform: scale(0.5);
  -moz-transform: scale(0.5);
  -ms-transform: scale(0.5);
  transform: scale(0.5);
  z-index: 9999;
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .header__search-3 {
    min-height: 300px;
  }
}
@media (max-width: 575px) {
  .header__search-3 {
    padding-top: 30px;
    min-height: 300px;
  }
}
.header__search-3.search-opened {
  top: 0;
  visibility: visible;
  opacity: 1;
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
}
.header__search-3-btn {
  margin-bottom: 35px;
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .header__search-3-btn {
    margin-bottom: 20px;
  }
}
@media (max-width: 575px) {
  .header__search-3-btn {
    margin-bottom: 20px;
  }
}
.header__search-3-btn-close {
  font-size: 18px;
  color: #0183cc;
  -webkit-transition: all 0.3s ease-out 0s;
  -moz-transition: all 0.3s ease-out 0s;
  -ms-transition: all 0.3s ease-out 0s;
  -o-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  transform: rotate(0deg);
}
.header__search-3-header {
  margin-bottom: 35px;
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .header__search-3-header {
    margin-bottom: 20px;
  }
}
@media (max-width: 575px) {
  .header__search-3-header {
    margin-bottom: 20px;
  }
}
.header__search-3-header h3 {
  color: #0e1133;
  font-size: 30px;
}
.header__search-3-categories {
  margin-bottom: 35px;
}
.header__search-3-categories ul li {
  display: inline-block;
}
.header__search-3-categories ul li a {
  font-size: 18px;
  color: #121317;
  padding: 0 30px;
}
.header__search-3-categories ul li a:hover {
  color: #0183cc;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .header__search-3-categories ul li a {
    padding: 0 15px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .header__search-3-categories ul li a {
    font-size: 16px;
    padding: 0 5px;
  }
}
@media (max-width: 575px) {
  .header__search-3-categories ul li a {
    padding: 0 5px;
    font-size: 14px;
  }
}
.header__search-3-input input {
  height: 50px;
  width: 100%;
  border: none;
  padding: 0 15px;
  padding-right: 30px;
  border-bottom: 1px solid #eef0f6;
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  border-radius: 0;
  outline: none;
}
.header__search-3-input input::placeholder {
  color: #53545b;
}
.header__search-3-input input:focus {
  border-color: #0183cc;
}
.header__search-3-input button {
  position: absolute;
  top: 0;
  right: 0;
  height: 50px;
  width: 50px;
  text-align: center;
  font-size: 14px;
  background: transparent;
  color: #0e1133;
}

.logo-black {
  display: none;
}

.cat-menu {
  font-size: 16px;
  font-weight: 500;
  color: #0e1133;
  position: relative;
}
.cat-menu:hover {
  color: #0183cc;
}
.cat-menu:hover svg .cat-dot {
  fill: #0183cc;
}
.cat-menu svg {
  width: 16px;
  height: 16px;
}
.cat-menu svg .cat-dot {
  fill: #0e1133;
}
.cat-menu span {
  padding-left: 14px;
  line-height: 1;
  display: inline-block;
  padding-top: 3px;
}

.main-menu ul li {
  display: inline-block;
  position: relative;
}
.main-menu ul li:not(:first-child) {
  margin-left: 0px;
}
@media only screen and (min-width: 1400px) and (max-width: 1600px) {
  .main-menu ul li:not(:first-child) {
    margin-left: 0px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .main-menu ul li:not(:first-child) {
    margin-left: 0px;
  }
}
.main-menu ul li a {
  display: inline-block;
  font-size: 18px;
  line-height: 28px;
  color: #262729;
  padding: 35px 50px 35px 0px;
  text-transform: capitalize;
}
.main-menu ul li.has-dropdown > a {
  position: relative;
}
.main-menu ul li.has-dropdown > a::after {
  content: "\f107";
  -webkit-transform: translateY(1px);
  -moz-transform: translateY(1px);
  -ms-transform: translateY(1px);
  transform: translateY(1px);
  font-size: 14px;
  color: #0e1133;
  font-family: "Font Awesome 5 Pro";
  font-weight: 400;
  margin-left: 5px;
  display: inline-block;
}
.main-menu ul li:hover > a {
  color: #0183cc;
}
.main-menu ul li:hover > a::after {
  color: #0183cc;
}
.main-menu ul li:hover .submenu {
  top: 100%;
  visibility: visible;
  opacity: 1;
}
.main-menu ul li .submenu {
  position: absolute;
  top: 100%;
  left: 0;
  width: 200px;
  background: #ffffff;
  z-index: 99;
  -webkit-transition: all 0.3s ease-out 0s;
  -moz-transition: all 0.3s ease-out 0s;
  -ms-transition: all 0.3s ease-out 0s;
  -o-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s;
  visibility: hidden;
  opacity: 0;
  -webkit-box-shadow: 0px 30px 70px 0px rgba(11, 6, 70, 0.08);
  -moz-box-shadow: 0px 30px 70px 0px rgba(11, 6, 70, 0.08);
  box-shadow: 0px 30px 70px 0px rgba(11, 6, 70, 0.08);
}
.main-menu ul li .submenu li {
  display: block;
  width: 100%;
  margin: 0;
}
.main-menu ul li .submenu li:not(:last-child) {
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.main-menu ul li .submenu li.has-dropdown > a::after {
  position: absolute;
  top: 50%;
  right: 25px;
  -webkit-transform: translateY(-50%) rotate(-90deg);
  -moz-transform: translateY(-50%) rotate(-90deg);
  -ms-transform: translateY(-50%) rotate(-90deg);
  transform: translateY(-50%) rotate(-90deg);
}
.main-menu ul li .submenu li a {
  padding: 10px 25px;
  font-size: 15px;
  position: relative;
  z-index: 1;
  color: #0e1133;
  width: 100%;
}
.main-menu ul li .submenu li a::before {
  position: absolute;
  content: "";
  top: 0;
  left: auto;
  right: 0;
  width: 0;
  height: 100%;
  background: #0183cc;
  z-index: -1;
}
.main-menu ul li .submenu li .submenu {
  left: 120%;
  top: 0;
  visibility: hidden;
  opacity: 0;
}
.main-menu ul li .submenu li:hover > a {
  color: #ffffff;
}
.main-menu ul li .submenu li:hover > a::after {
  color: #ffffff;
}
.main-menu ul li .submenu li:hover > a::before {
  left: 0;
  right: auto;
  width: 100%;
}
.main-menu ul li .submenu li:hover .submenu {
  left: 100%;
  visibility: visible;
  opacity: 1;
}

.main-menu-2 ul li:not(:first-child) {
  margin-left: 35px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .main-menu-2 ul li:not(:first-child) {
    margin-left: 20px;
  }
}
.main-menu-2 ul li .menu-tag {
  position: absolute;
  top: 13px;
  right: -4px;
  display: inline-block;
  height: 20px;
  line-height: 20px;
  padding: 0 7px;
  background: #0183cc;
  color: #ffffff;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  font-size: 12px;
  text-transform: capitalize;
  -webkit-box-shadow: 0px 8px 20px 0px rgba(1, 23, 133, 0.3);
  -moz-box-shadow: 0px 8px 20px 0px rgba(1, 23, 133, 0.3);
  box-shadow: 0px 8px 20px 0px rgba(1, 23, 133, 0.3);
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .main-menu-2 ul li .menu-tag {
    display: none;
  }
}
.main-menu-2 ul li .menu-tag::after {
  position: absolute;
  content: "";
  bottom: -5px;
  left: 10px;
  width: 0;
  height: 0;
  border-left: 5px solid #0183cc;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
}

.main-menu-3 ul li a {
  color: #ffffff;
  position: relative;
}
.main-menu-3 ul li a::before {
  position: absolute;
  content: "";
  left: auto;
  right: 0;
  bottom: 38px;
  width: 0%;
  height: 1px;
  background: #ffffff;
}
.main-menu-3 ul li.has-dropdown a::after {
  color: #ffffff;
}
.main-menu-3 ul li .submenu li a::after {
  color: #0e1133;
}
.main-menu-3 ul li:hover a {
  color: #ffffff;
}
.main-menu-3 ul li:hover a::before {
  width: 100%;
  left: 0;
  right: auto;
}

/* sidebar css start */
.sidebar-toggle-btn .line {
  width: 30px;
  height: 3px;
  background-color: #0183cc;
  display: block;
  margin: 6px auto;
  -webkit-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
.sidebar-toggle-btn-white .line {
  background: #ffffff;
}
.sidebar-toggle-btn:hover {
  cursor: pointer;
}
.sidebar-toggle-btn:hover .line {
  -webkit-transform: rotate(-30deg);
  -ms-transform: rotate(-30deg);
  -o-transform: rotate(-30deg);
  -moz-transform: rotate(-30deg);
  transform: rotate(-30deg);
}
.sidebar-toggle-btn:hover .line:nth-child(1) {
  width: 10px;
}
.sidebar-toggle-btn:hover .line:nth-child(2) {
  width: 20px;
}

.sidebar__area {
  position: fixed;
  right: -340px;
  top: 0;
  width: 320px;
  height: 100%;
  background: #ffffff none repeat scroll 0 0;
  overflow-y: scroll;
  -webkit-box-shadow: -5px 0 20px -5px rgba(0, 0, 0, 0.5);
  -moz-box-shadow: -5px 0 20px -5px rgba(0, 0, 0, 0.5);
  box-shadow: -5px 0 20px -5px rgba(0, 0, 0, 0.5);
  -webkit-transition: all 0.3s cubic-bezier(0.785, 0.135, 0.15, 0.86);
  -moz-transition: all 0.3s cubic-bezier(0.785, 0.135, 0.15, 0.86);
  transition: all 0.3s cubic-bezier(0.785, 0.135, 0.15, 0.86);
  z-index: 9999;
}
.sidebar__area.sidebar-opened {
  right: 0px;
}
.sidebar__wrapper {
  position: relative;
  padding: 30px;
}
.sidebar__close {
  position: absolute;
  top: 25px;
  right: 80px;
}
.sidebar__close-btn {
  transition: all 450ms cubic-bezier(0.4, 0.25, 0.3, 1.3);
  width: 40px;
  height: 40px;
  position: absolute;
  text-align: center;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  justify-content: center;
  align-items: center;
  color: #0e1133;
  border: 1px solid #2a3a57;
  border-radius: 50%;
  cursor: pointer;
  overflow: hidden;
  background: transparent;
  z-index: 99;
}
.sidebar__close-btn:focus {
  border: 1px solid #0e1133;
}
.sidebar__close-btn span {
  transition: all 400ms cubic-bezier(0.4, 0.25, 0.3, 1.3) 100ms;
  position: absolute;
  top: 54%;
  left: 50%;
  font-size: 14px;
  font-weight: 500;
  line-height: 40px;
  vertical-align: middle;
}
.sidebar__close-btn span:first-of-type {
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
}
.sidebar__close-btn span:last-of-type {
  text-transform: uppercase;
  transform: translate(-50%, 50%);
  -webkit-transform: translate(-50%, 50%);
  -moz-transform: translate(-50%, 50%);
  -ms-transform: translate(-50%, 50%);
  -o-transform: translate(-50%, 50%);
}
.sidebar__close-btn:hover {
  width: 100px;
  border-radius: 0;
}
.sidebar__close-btn:hover span:first-of-type {
  transform: translate(-50%, -150%);
  -webkit-transform: translate(-50%, -150%);
  -moz-transform: translate(-50%, -150%);
  -ms-transform: translate(-50%, -150%);
  -o-transform: translate(-50%, -150%);
}
.sidebar__close-btn:hover span:last-of-type {
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
}
.sidebar__search input {
  width: 100%;
  height: 50px;
  line-height: 20px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  background: #edeef3;
  outline: none;
  border: 1px solid #ffffff;
  font-size: 16px;
  padding: 25px 65px 20px 55px;
}
.sidebar__search input::placeholder {
  color: #8c8faa;
}
.sidebar__search input:focus {
  border-color: #0183cc;
}
.sidebar__search button {
  background: transparent;
  position: absolute;
  top: 15px;
  left: 24px;
}
.sidebar__search button i::after {
  color: #0e1133;
  opacity: 1;
}
.sidebar__search button i::before {
  color: #8c8faa;
}
.sidebar__cart-icon {
  display: inline-block;
}
.sidebar__cart-icon svg {
  width: 20px;
  height: 19px;
}
.sidebar__cart-icon svg .st0 {
  fill: none;
  stroke: #0e1133;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.sidebar__cart a {
  position: relative;
  font-size: 17px;
  color: #0e1133;
}
.sidebar__cart a .cart-item {
  position: absolute;
  top: -10px;
  right: -10px;
  display: inline-block;
  width: 20px;
  height: 20px;
  line-height: 22px;
  text-align: center;
  font-size: 14px;
  color: #ffffff;
  background: #0183cc;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  font-weight: 500;
  -webkit-box-shadow: 0px 10px 20px 0px rgba(4, 23, 118, 0.3);
  -moz-box-shadow: 0px 10px 20px 0px rgba(4, 23, 118, 0.3);
  box-shadow: 0px 10px 20px 0px rgba(4, 23, 118, 0.3);
}
.sidebar__cart a:hover .cart-item {
  background: #0e1133;
}

/* mean menu customize */
.mean-container a.meanmenu-reveal {
  display: none;
}

.mean-container .mean-nav {
  background: none;
  margin-top: 0;
}

.mean-container .mean-bar {
  padding: 0;
  min-height: auto;
  background: none;
}

.mean-container .mean-nav > ul {
  padding: 0;
  margin: 0;
  width: 100%;
  list-style-type: none;
  display: block !important;
}

.mean-container a.meanmenu-reveal {
  display: none !important;
}

.mean-container .mean-nav ul li a {
  width: 100%;
  padding: 10px 0;
  color: #0e1133;
  border-top: 1px solid #bbbcbf;
  font-size: 13px;
  font-weight: 600;
}

.mean-container .mean-nav ul li a.mean-expand {
  margin-top: 0px;
  height: 15px;
  line-height: 14px;
  border-bottom: none;
  padding: 0;
  display: inline-block;
  width: 40px;
  height: 44px;
  line-height: 44px;
}

.mean-container .mean-nav ul li a.mean-expand:hover {
  color: #0e1133;
}

.mean-container .mean-nav > ul > li:first-child > a {
  border-top: 0;
}

.mean-container .mean-nav ul li a.mean-expand.mean-clicked {
  color: #0e1133;
}

.mean-container .mean-nav ul li a.mean-expand.mean-clicked i {
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  color: #0e1133;
}

/*----------------------------------------*/
/*  03. HERO CSS START
/*----------------------------------------*/
.hero__height {
  min-height: 770px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .hero__height {
    min-height: 650px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .hero__height {
    min-height: 550px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .hero__height {
    min-height: 1100px;
  }
}
@media (max-width: 575px) {
  .hero__height {
    min-height: 850px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .hero__height-2 {
    min-height: 1350px;
  }
}
@media (max-width: 575px) {
  .hero__height-2 {
    min-height: 850px;
  }
}
.hero__title {
  font-size: 64px;
  line-height: 110%;
  letter-spacing: -0.02em;
  color: #1E1E1E;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .hero__title {
    font-size: 55px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .hero__title {
    font-size: 45px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .hero__title {
    font-size: 35px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .hero__title {
    font-size: 50px;
  }
}
@media (max-width: 575px) {
  .hero__title {
    font-size: 30px;
  }
}
.hero__title span:first-child {
  font-weight: 300;
  display: block;
}
.hero__title span.yellow-shape {
  position: relative;
  z-index: 1;
}
.hero__title span.yellow-shape img {
  position: absolute;
  bottom: 22px;
  left: -8px;
  z-index: -1;
  -webkit-animation: section-animation 3s infinite;
  animation: section-animation 3s infinite;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .hero__title span.yellow-shape img {
    bottom: 12px;
    height: 40% !important;
  }
}
.hero__title-2 {
  margin-bottom: 20px;
}
.hero__content p {
  font-size: 18px;
  line-height: 24px;
  color: #262729;
  opacity: 0.7;
  padding-right: 30px;
  line-height: 30px;
  margin-bottom: 30px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .hero__content p {
    padding-right: 30px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .hero__content p {
    padding-right: 0px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .hero__content p {
    padding-right: 0px;
  }
}
@media (max-width: 575px) {
  .hero__content p {
    padding-right: 0px;
  }
}
.hero__content-2 h4 {
  font-size: 22px;
  margin-bottom: 0;
}
.hero__content-2 p {
  color: #53545b;
  font-size: 16px;
  margin-bottom: 37px;
}
.hero__thumb {
  z-index: 1;
}
.hero__thumb-big {
  position: relative;
}
.hero__thumb-big img {
  max-width: 400px;
  max-height: 460px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .hero__thumb-big img {
    width: 100%;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .hero__thumb-big img {
    margin-top: 50px;
    width: 100%;
  }
}
@media (max-width: 575px) {
  .hero__thumb-big img {
    margin-top: 50px;
    width: 100%;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .hero__thumb-sm {
    margin-left: -50px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .hero__thumb-sm {
    margin-left: -160px;
    margin-top: -95px;
  }
}
.hero__thumb-sm img {
  max-width: 200px;
  max-height: 240px;
  -webkit-border-radius: 4px 40px 4px 40px;
  -moz-border-radius: 4px 40px 4px 40px;
  border-radius: 4px 40px 4px 40px;
  -webkit-box-shadow: 0px 30px 60px 0px rgba(1, 11, 60, 0.14);
  -moz-box-shadow: 0px 30px 60px 0px rgba(1, 11, 60, 0.14);
  box-shadow: 0px 30px 60px 0px rgba(1, 11, 60, 0.14);
}
.hero__thumb-shape img {
  position: absolute;
  z-index: -1;
}
.hero__thumb-shape img.hero-1-dot {
  bottom: -50px;
  left: -80px;
  height: 100px;
  -webkit-animation: hero-dot-1 5s linear 0s infinite alternate;
  -moz-animation: hero-dot-1 5s linear 0s infinite alternate;
  -o-animation: hero-dot-1 5s linear 0s infinite alternate;
  animation: hero-dot-1 5s linear 0s infinite alternate;
}
.hero__thumb-shape img.hero-1-circle-3 {
  bottom: -47px;
  right: 1%;
}
.hero__thumb-shape img.hero-1-circle-4 {
  top: -50px;
  right: 10%;
  height: 50px;
}
.hero__thumb-2 {
  position: relative;
  z-index: 1;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .hero__thumb-2 img.hero-big {
    width: 100%;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .hero__thumb-2 img.hero-big {
    width: 100%;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .hero__thumb-2 img.hero-big {
    width: 100%;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .hero__thumb-2 img.hero-big {
    width: 100%;
  }
}
@media (max-width: 575px) {
  .hero__thumb-2 img.hero-big {
    width: 100%;
  }
}
.hero__thumb-2 img.hero-shape-purple {
  position: absolute;
  left: 0;
  bottom: 19%;
  z-index: -1;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .hero__thumb-2 img.hero-shape-purple {
    width: 100%;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .hero__thumb-2 img.hero-shape-purple {
    width: 100%;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .hero__thumb-2 img.hero-shape-purple {
    width: 100%;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .hero__thumb-2 img.hero-shape-purple {
    width: 100%;
  }
}
@media (max-width: 575px) {
  .hero__thumb-2 img.hero-shape-purple {
    width: 100%;
  }
}
.hero__quote {
  position: absolute;
  bottom: 60px;
  right: -200px;
  padding: 15px 25px;
  padding-bottom: 20px;
  background: #ffffff;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  -webkit-box-shadow: 0px 30px 60px 0px rgba(1, 11, 60, 0.14);
  -moz-box-shadow: 0px 30px 60px 0px rgba(1, 11, 60, 0.14);
  box-shadow: 0px 30px 60px 0px rgba(1, 11, 60, 0.14);
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .hero__quote {
    right: -145px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .hero__quote {
    right: 60px;
    bottom: -50px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .hero__quote {
    right: 30px;
    bottom: -50px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .hero__quote {
    right: 30px;
    bottom: -50px;
  }
}
@media (max-width: 575px) {
  .hero__quote {
    right: 15px;
    bottom: -50px;
  }
}
.hero__quote span {
  font-size: 14px;
  color: #474956;
}
.hero__quote h4 {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 0;
  line-height: 1;
}
.hero__quote-animation {
  animation-duration: 2.5s;
  animation-fill-mode: both;
  animation-iteration-count: infinite;
  animation-name: hero-bounce;
}
.hero__shape img {
  position: absolute;
}
.hero__shape img.hero-1-circle {
  top: 15%;
  left: 2%;
  -webkit-animation: hero-circle-1 6s linear 0s infinite alternate;
  -moz-animation: hero-circle-1 6s linear 0s infinite alternate;
  -o-animation: hero-circle-1 6s linear 0s infinite alternate;
  animation: hero-circle-1 6s linear 0s infinite alternate;
}
.hero__shape img.hero-1-circle-2 {
  top: 10%;
  right: 0;
  height: 50px;
}
.hero__shape img.hero-1-dot-2 {
  right: 0;
  bottom: 38%;
}
.hero__shape .hero-corner-shape{
  position: absolute;
  bottom: 0;
  right: 0;
}
.hero__search-input {
  position: relative;
  width: 370px;
}
.section-dot-shape {
  position: absolute;
  left: 0;
  top: 80px;
}
@media (max-width: 575px) {
  .hero__search-input {
    width: 100%;
  }
}
.hero__search-input input {
  width: 100%;
  height: 54px;
  line-height: 54px;
  padding: 0 24px;
  padding-right: 35px;
  font-size: 14px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  outline: none;
  border: none;
}
.hero__search-input input::placeholder {
  color: #8d8e9a;
}
.hero__search-input button {
  position: absolute;
  top: 50%;
  right: 24px;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  font-size: 18px;
  background: transparent;
}
.hero__search-input button i::after {
  color: #0e1133;
  opacity: 1;
}
.hero__search-input button i::before {
  color: #8c8faa;
}
.hero__search p {
  font-size: 16px;
  color: #6d6e75;
}
.hero__promotion {
  position: absolute !important;
  left: -7% !important;
  top: 44% !important;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  -webkit-box-shadow: 0px 30px 60px 0px rgba(1, 11, 60, 0.14);
  -moz-box-shadow: 0px 30px 60px 0px rgba(1, 11, 60, 0.14);
  box-shadow: 0px 30px 60px 0px rgba(1, 11, 60, 0.14);
  padding: 15px 20px;
  padding-bottom: 10px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .hero__promotion {
    left: 20% !important;
    top: 71% !important;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .hero__promotion {
    left: 9% !important;
    top: 71% !important;
  }
}
@media (max-width: 575px) {
  .hero__promotion {
    left: 9% !important;
    top: 52% !important;
  }
}
.hero__promotion.education {
  bottom: 28% !important;
  top: auto !important;
  left: -11% !important;
}
.hero__promotion-icon span {
  display: inline-block;
  width: 36px;
  height: 36px;
  text-align: center;
  line-height: 36px;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  background: #ff7921;
}
.hero__promotion-icon span svg {
  height: 24px;
  fill: #ffffff;
}
.hero__promotion-icon span.cap {
  background: #5773ff;
}
.hero__promotion-text h5 {
  font-size: 16px;
  margin-bottom: 0;
}
.hero__promotion-text p {
  font-size: 14px;
  color: #474956;
  margin-bottom: 0;
}
.hero__class {
  position: absolute;
  left: auto !important;
  top: auto !important;
  bottom: 33%;
  right: -12%;
  -webkit-box-shadow: 0px 30px 60px 0px rgba(1, 11, 60, 0.14);
  -moz-box-shadow: 0px 30px 60px 0px rgba(1, 11, 60, 0.14);
  box-shadow: 0px 30px 60px 0px rgba(1, 11, 60, 0.14);
  background: rgba(255, 255, 255, 0.9);
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  padding: 20px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .hero__class {
    right: -5%;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .hero__class {
    right: 1%;
    bottom: 15%;
  }
}
.hero__class-thumb img {
  width: 34px;
  height: 34px;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
}
.hero__class-text h5 {
  font-size: 16px;
  margin-bottom: 0;
}
.hero__class-text p {
  font-size: 14px;
  color: #474956;
  margin-bottom: 0;
}
.hero__class-text a {
  display: inline-block;
  height: 30px;
  line-height: 30px;
  text-align: center;
  color: #ffffff;
  font-weight: 500;
  padding: 0 15px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  background: #e233fb;
}
.hero__mic {
  position: absolute;
  top: 30%;
  right: 10%;
  animation-duration: 2.5s;
  animation-fill-mode: both;
  animation-iteration-count: infinite;
  animation-name: hero-bounce;
}
.hero__mic span {
  display: inline-block;
  width: 50px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  background: #ff3c4e;
  -webkit-box-shadow: 0px 14px 30px 0px rgba(131, 2, 14, 0.2);
  -moz-box-shadow: 0px 14px 30px 0px rgba(131, 2, 14, 0.2);
  box-shadow: 0px 14px 30px 0px rgba(131, 2, 14, 0.2);
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
}
.hero__mic span svg {
  height: 28px;
  fill: #ffffff;
}

@keyframes hero-dot-1 {
  0% {
    transform: translateY(-100px);
  }
  100% {
    transform: translateY(0px);
  }
}
@keyframes hero-bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-30px);
  }
  60% {
    transform: translateY(-15px);
  }
}
@keyframes hero-circle-1 {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
/*----------------------------------------*/
/*  04. Level 1 CSS START
/*----------------------------------------*/
.learning-outcomes{
  background: #F4F9FF;
  border-radius: 27px;
  padding: 25px 20px 25px 45px;
}
.scrollbar
{
	height: 190px;
	overflow-y: scroll;
}
.force-overflow
{
	min-height: 190px;
}
#style-1::-webkit-scrollbar-track
{
	background: #FAFAFA;
  border: 0.847512px solid #E8E8E8;
  border-radius: 6.7801px;
}
#style-1::-webkit-scrollbar
{
	width: 8px;
	background-color: #F5F5F5;
}
#style-1::-webkit-scrollbar-thumb
{
	border-radius: 10px;
	background-color: #07477D;
}
.learning-outcomes li{
  font-size: 20px;
  line-height: 24px;
  color: rgba(2, 11, 18, 0.7);
  padding-left: 25px;
  padding-bottom: 14px;
  position: relative;
}
.learning-outcomes li:before{
  content: '';
  width: 8px;
  height: 14px;
  background: #EEAC1F;
  border: 1.27127px solid #FF5722;
  position: absolute;
  left: 0;
  top: 5px;
}
.level-box-style-1{
  background: #F4F9FF;
  border-radius: 27.9679px;
  padding: 45px 50px;
}
.level-box-style-1 h1{
  font-size: 65px;
  font-weight: bold;
  line-height: 56px;
  color: #0085FF;
  margin-bottom: 40px;
}
.level-box-style-1 h2{
  font-size: 45px;
  line-height: 55px;
  color: #0060B9;
}
.level-btn{
  background: linear-gradient(180deg, #0085FF 0%, #003A70 100%);
  box-shadow: -12px 20px 50px rgb(79 143 241 / 30%);
  border-radius: 77.6575px;
  font-size: 18.6378px;
  line-height: 70px;
  height: 70px;
  text-align: center;
  color: #FFFFFF;
  font-weight: bold;
  display: block;
  transition: .3s;
}
.level-btn i{
  padding-left: 5px;
}
.level-btn:hover{
  transition: .3s;
  -webkit-box-shadow: 0px 10px 24px 0px rgb(4 23 118 / 30%);
    -moz-box-shadow: 0px 10px 24px 0px rgba(4, 23, 118, 0.3);
    box-shadow: 0px 10px 24px 0px rgb(4 23 118 / 30%);
  color: white;
}
.level-content-with-banner img{
  height: 358px;
}


/*----------------------------------------*/
/*  05. Level 2 CSS START
/*----------------------------------------*/
.lavel__2 .section-dot-shape{
  left: inherit;
  right: 0;
}
.level-box-style-2{
  background: #F4F9FF;
  border-radius: 27.9679px;
  padding: 45px 50px;
}
.level-box-style-2 h1{
  font-size: 65px;
  font-weight: bold;
  line-height: 56px;
  color: #F8A600;
  margin-bottom: 40px;
}
.level-box-style-2 h2{
  font-size: 45px;
  line-height: 55px;
  color: #F8A600;
}
.level-box-style-2  .level-btn{
  background: linear-gradient(180deg, #EB9D00 0%, #AE7400 100%);
}


/*----------------------------------------*/
/*  06. Level 3 CSS START
/*----------------------------------------*/
.level-box-style-3{
  background: #F4F9FF;
  border-radius: 27.9679px;
  padding: 45px 50px;
}
.level-box-style-3 h1{
  font-size: 65px;
  font-weight: bold;
  line-height: 56px;
  color: #8F00FF;
  margin-bottom: 40px;
}
.level-box-style-3 h2{
  font-size: 45px;
  line-height: 55px;
  color: #8F00FF;
}
.level-box-style-3  .level-btn{
  background: linear-gradient(180deg, #8700F2 0%, #46007E 100%);
}


/*----------------------------------------*/
/*  07. Our Admission Process CSS START
/*----------------------------------------*/
.admission-title{
  font-family: 'Gilroy-Black';
  text-align: center;
  font-size: 48px;
  line-height: 56px;
  color: #0183CC;
  margin-bottom: 60px;
}
.admission-process-item{
  padding: 30px 30px;
  border-radius: 2.32347px;
  height: 455px;
}
.admission-process-item img{
  height: 130px;
  margin-bottom: 30px;
}
.admission-process-item h2{
  font-family: 'Gilroy-ExtraBold';
  font-size: 37.1756px;
  line-height: 50px;
  text-align: center;
  color: #FFFFFF;
}
.admission-process-item h4{
  font-family: 'Gilroy-Medium';
  font-size: 23.2347px;
  font-weight: 100;
  line-height: 140%;
  color: #FFFFFF;
}
.register-btn{
  color: #ffffff;
  font-family: 'Gilroy-Bold';
  font-size: 20.9113px;
  width: 100%;
  padding: 8px 0px;
  text-align: center;
  border: 2.32347px solid #FFFFFF;
  border-radius: 3.48521px;
  display: block;
  margin-top: 40px;
  transition: .3s;
}
.register-btn i{
  padding-left: 5px;
}
.register-btn:hover{
  transition: .3s;
  background-color: white;
  color: #0F1D41;
}
.admission_process__area .col-md-6:nth-child(1) .admission-process-item{
  background: linear-gradient(180deg, #B7DCFF 0%, #00B2FF 49.68%, #004D85 99.36%);
}
.admission_process__area .col-md-6:nth-child(2) .admission-process-item{
  background: linear-gradient(180deg, #B4FFE4 0%, #65CC56 50%, #1D5B00 100%);
}
.admission_process__area .col-md-6:nth-child(3) .admission-process-item{
  background: linear-gradient(180deg, #FFE9B1 0%, #E16C00 53.12%, #854000 100%);
}
.admission_process__area .col-md-6:nth-child(4) .admission-process-item{
  background: linear-gradient(180deg, #DFCBFF 0%, #8F00FF 49.96%, #3C0062 99.99%);
}


/*----------------------------------------*/
/*  08. Our Courses CSS START
/*----------------------------------------*/
.course-shape{
  position: absolute;
  top: 0;
  left: 0;
}
.course-banner{
  margin-top: 30px;
}
.courses-box{
  background: #FFFFFF;
  box-shadow: 0px 1px 6px rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  padding: 20px 30px;
  margin-bottom: 25px;
  min-height: 250px;
  transition: .3s;
}
.courses-box:hover{
  transition: .3s;
  box-shadow: 0px 4px 60px rgba(3, 62, 181, 0.1);
}
.courses-box:hover a i{
  padding-left: 15px;
  transition: .3s;
}
.courses-box img{
  height: 90px;
  display: block;
  margin: auto;
  margin-bottom: 20px;
}
.courses-box a{
  color: #E97D24;
  font-weight: 100;
}
.courses-box a i{
  font-weight: 100;
  padding-left: 5px;
  transition: .3s;
}
.book-box{
  background: linear-gradient(180deg, #3D66B0 0%, #0F1D41 100%);
  box-shadow: 0px 1px 6px rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  padding: 30px 40px;
}
.book-box p{
  color: white;
  padding-top: 0px;
  padding-bottom: 30px;
  font-size: 18px;
  line-height: 28px;
}
.book-box a{
  color: #154679;
  font-family: 'Gilroy-Bold';
  font-size: 12px;
  line-height: 26px;
  background: #FDFCFF;
  border-radius: 50px;
  padding: 10px 0px;
  width: 100%;
  display: block;
  text-align: center;
  transition: .3s;
}
.book-box a:hover{
  transition: .3s;
  background: linear-gradient(180deg, #3D66B0 0%, #0F1D41 100%);
  box-shadow: -12px 20px 50px rgb(79 143 241 / 30%);
  color: white;
}


/*----------------------------------------*/
/*  09. Coding Platform
/*----------------------------------------*/
.coding-platform-content img{
  position: absolute;
  right: 30px;
  top: 60px;
}
.list-item li{
  font-size: 20px;
  line-height: 24px;
  color: rgba(2, 11, 18, 0.7);
  padding-left: 25px;
  padding-bottom: 14px;
  position: relative;
}
.list-item li:before{
  content: '';
  width: 8px;
  height: 14px;
  background: #EEAC1F;
  border: 1.27127px solid #FF5722;
  position: absolute;
  left: 0;
  top: 5px;
}
.coding-platform-counter{
  background: linear-gradient(180deg, #4F8FF1 0%, #2B59FF 84.9%);
  box-shadow: 0px 24px 50px rgba(43, 89, 255, 0.2);
  backdrop-filter: blur(17px);
  border-radius: 15px;
  padding: 40px 60px 10px 60px;
  position: absolute;
  right: 0;
  bottom: 60px;
  width: 70%;
}
.coding-platform-counter .counter__content{
  text-align: center;
}
.coding-platform-counter .counter__content h4{
  font-family: 'Gilroy-Bold';
  font-size: 42px;
  line-height: 58px;
  color: #FFFFFF;
  margin-bottom: 15px;
}
.coding-platform-counter .counter__content p{
  font-family: 'Gilroy-Medium';
  font-size: 18px;
  line-height: 32px;
  color: #FFFFFF;
  opacity: 0.7;
  margin-bottom: 0px;
}

/*----------------------------------------*/
/*  10. Column Block START
/*----------------------------------------*/
.column-shape-dot-1{
  position: absolute;
  left: 0;
  top: 80px;
}
.column-shape-dot-2{
  position: absolute;
  right: 0;
  top: 80px;
}
.column-block .title-style-1{
  margin-bottom: 30px;
}
.column-block a{
  font-size: 18px;
  line-height: 30px;
  color: #FF5722;
  border-bottom: 2px solid #FF5722;
  padding: 10px;
  transition: .3s;
}
.column-block a:hover{
  color:white;
  background-color: #FF5722;
  border-bottom: 2px solid #FF5722;
  transition: .3s;
}
.column-block img{
  margin-top: 20px;
}

/*----------------------------------------*/
/*  11. Expert Trainer START
/*----------------------------------------*/
.expert-trainer-block{
  position: relative;
  transition: .3s;
  border-radius: 50px 50px 0px 0px;
  padding: 10px;
}
.expert-trainer-block:hover{
  background: rgb(248,249,252);

-webkit-box-shadow: 0px 30px 40px 0px rgb(1 11 60 / 10%);
    -moz-box-shadow: 0px 30px 40px 0px rgba(1, 11, 60, 0.1);
    box-shadow: 0px 30px 40px 0px rgb(1 11 60 / 10%);
  transition: .3s;
}
.expert-trainer-block::before{
  content: '';
  background: url(../img/shape/expert.svg);
  background-size: cover;
  height: 272px;
  width: 270px;
  background-position: center top;
  position: absolute;
  top: -12px;
  right: 3px;
  z-index: 1;
  left: 50%;
  transform: translate(-50%, 10px);
}
.expert-trainer-block img{
  height: 250px;
  margin-bottom: 40px;
  position: relative;
  z-index: 9;
}
.expert-trainer-block h5{
  font-weight: 600;
  font-size: 14px;
  line-height: 21px;
  color: #FF8D00;
  margin-bottom: 10px;
}
.expert-trainer-block h4{
  font-weight: 600;
  font-size: 18px;
  line-height: 25px;
  color: #042552;
}
.expert-trainer-block p{
  font-weight: 500;
  font-size: 14px;
  line-height: 24px;
  color: #042552;
  opacity: 0.7;
  padding: 0px 40px;
}
.more-expert a{
  font-size: 20px;
  line-height: 28px;
  color: #0D59EF;
  transition: .3s;
}
.more-expert a i{
  padding-left: 5px;
  font-weight: 400;
  font-size: 18px;
  transition: .3s;
}
.more-expert a:hover i{
  padding-left: 15px;
}

/*----------------------------------------*/
/*  12. Best Experience START
/*----------------------------------------*/
.best-experience-banner img{
  display: block;
  width: 50%;
  margin: auto;
}

/*----------------------------------------*/
/*  13. Young Coders START
/*----------------------------------------*/
.young__coders__area a{
  cursor: pointer ;
}
.project__item img{
  border:10px solid #312E81;
  border-radius: 15px;
}
.young__coders__area .swiper-slide{
  transition: .5s;
}
.young__coders__area .swiper-slide-active{
  transform: scale(1.5);
  transition: .5s;
  z-index: 99999;
}
.project__slider{
  padding: 65px 0px;
}
.modal .btn-danger{
  position:absolute;
  right: -15px;
  top: -15px;
}
/*----------------------------------------*/
/*  14. Pricing Plan START
/*----------------------------------------*/
.price__item {
  padding: 50px;
  background: #FFFFFF;
  border: 1px solid #EBEFF6;
  border-radius: 10px;
  transition: .3s;
}
.price__item:hover{
  transition: .3s;
  box-shadow: 0px 4px 60px rgba(13, 89, 239, 0.06);
}
.price__tab-content .col-md-6:nth-child(1) .price__head h3{
  color: #01D2A1;
}
.price__tab-content .col-md-6:nth-child(2) .price__head h3{
  color: #FFB619;
}
.price__tab-content .col-md-6:nth-child(3) .price__head h3{
  color: #FF1181;
}
.price__head h3 {
  font-family: 'Gilroy-Medium';
  font-weight: 100;
  font-size: 20px;
  line-height: 28px;
  margin-bottom: 15px;
  opacity: 0.8;
}
.price__head p {
  color: #53545b;
  margin-bottom: 17px;
}
.price__tag {
  padding-bottom: 13px;
  border-bottom: 1px solid #e0e3ed;
}
.price__tag h4 {
  font-size: 50px;
  margin-bottom: 0;
}
.price__tag h4 span {
  font-size: 25px;
  font-weight: 600;
}
.price__offer {
  position: absolute;
  top: 20px;
  right: -15px;
  z-index: 1;
}
@media (max-width: 575px) {
  .price__offer {
    right: 0;
  }
}
.price__offer span {
  display: inline-block;
  height: 30px;
  line-height: 30px;
  font-size: 14px;
  text-align: center;
  color: #ffffff;
  background: #f2277e;
  padding: 0 10px;
  -webkit-border-radius: 4px 4px 0px 4px;
  -moz-border-radius: 4px 4px 0px 4px;
  border-radius: 4px 4px 0px 4px;
  position: relative;
}
@media (max-width: 575px) {
  .price__offer span {
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
  }
}
.price__offer span::after {
  position: absolute;
  content: "";
  bottom: -10px;
  right: 0;
  width: 0;
  height: 0;
  border-left: 15px solid #960443;
  border-top: 0px solid transparent;
  border-bottom: 10px solid transparent;
}
@media (max-width: 575px) {
  .price__offer span::after {
    display: none;
  }
}
.price__features ul li {
  font-size: 16px;
  font-weight: 500;
  color: #0e1133;
  position: relative;
  padding-left: 30px;
}
.price__features ul li:not(:last-child) {
  margin-bottom: 10px;
}
.price__features ul li i {
  position: absolute;
  left: 0;
  top: 3px;
  display: inline-block;
  color: #01D2A1;
  font-size: 8px;
  height: 18px;
  width: 18px;
  line-height: 18px;
  text-align: center;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  background: rgba(48, 168, 32, 0.1);
}
.price__features ul li:hover {
  color: #01D2A1;
}
.price__features ul li:hover i {
  background: #01D2A1;
  color: #ffffff;
}
.price__tab-btn .nav-tabs {
  border: none;
}
.price__tab-btn .nav-tabs .nav-link {
  background: transparent;
  padding: 0 15px;
  font-size: 14px;
  color: #121317;
  font-weight: 500;
  height: 36px;
  line-height: 34px;
  border: 2px solid #edeef3;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  text-transform: capitalize;
}
.price__tab-btn .nav-tabs .nav-link:first-child {
  border-right: 0;
  -webkit-border-radius: 4px 0 0 4px;
  -moz-border-radius: 4px 0 0 4px;
  border-radius: 4px 0 0 4px;
}
.price__tab-btn .nav-tabs .nav-link:last-child {
  border-left: 0;
  -webkit-border-radius: 0px 4px 4px 0px;
  -moz-border-radius: 0px 4px 4px 0px;
  border-radius: 0px 4px 4px 0px;
}
.price__tab-btn .nav-tabs .nav-link.active {
  background: #2b4eff;
  color: #ffffff;
  border-color: #2b4eff;
}
.price__item .e-btn{
  font-family: 'Gilroy-Medium';
  border: 2px solid #0D59EF;
  border-radius: 50px;
  font-size: 18px;
  line-height: 40px;
  text-align: center;
  color: #0D59EF;
  font-weight: 600;
  box-shadow: none;
}
.price__item .e-btn:hover{
  font-family: 'Gilroy-Medium';
  background: linear-gradient(180deg, #3D66B0 0%, #0F1D41 100%);
  border: 2px solid #233d7e;
  color: white;
  font-weight: 300;
}
/*----------------------------------------*/
/*  15. Testimonial START
/*----------------------------------------*/
.testimonial__area .swiper-container{
  padding-top: 30px;
}
.testimonial__area .swiper-button-prev,
.testimonial__area .swiper-button-next {
  display: none;
}
.testimonial__item {
  background: #FFFFFF;
  border-radius: 15px;
  padding: 50px 30px 30px 30px;
  position: relative;
  transition: .3s;
}
.testimonial__item:hover{
  transition: .3s;
  background: #135558;
  box-shadow: 0px 23px 45px rgba(80, 52, 252, 0.25);
}
.testimonial__item:hover p{
  color: white;
}
.testimonial__item:hover .testimonial__info h4{
  color: white;
}
.testimonial__item:hover .testimonial__info span{
  color: white;
}
.testimonial__item p{
  font-weight: 400;
  font-size: 16px;
  line-height: 30px;
  color: #262729;
}
.testimonial__info h4{
  font-size: 15px;
  line-height: 26px;
  color: #262729;
  margin-bottom: 0px;
  letter-spacing: 1px;
}
.testimonial__info span{
  font-weight: 600;
  font-size: 13px;
  line-height: 20px;
  color: #262729;
  opacity: 0.7;
  letter-spacing: 1px;
}
.rating{
  margin-top: 10px;
}
.rating i{
  color: #EEAC1F;
  font-size: 12px;
}
.testimonial__thumb{
  position: absolute;
  top: -30px;
  left: 40px;
  z-index: 999;
}
.testimonial__slider .swiper-nav i {
  display: inline-block;
  font-size: 14px;
  width: 50px;
  height: 50px;
  line-height: 46px;
  text-align: center;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  border: 2px solid rgb(1 131 204);
  background: transparent;
  color: #0183cc;
}
.testimonial__slider .swiper-nav i:hover {
  background: #ffffff;
  border-color: #ffffff;
  color: #2b4eff;
}
.testimonial__slider .swiper-nav::after {
  display: none;
}
.testimonial__slider-3 .testimonial-nav {
  width: 290px;
}
.testimonial__slider-3 .testimonial-nav .swiper-slide {
  width: 70px;
}
.testimonial__slider-3 .testimonial-nav .swiper-slide img {
  width: 70px;
  height: 70px;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
}
.testimonial__slider-3 .testimonial-nav .swiper-slide.swiper-slide-thumb-active .testimonial__nav-thumb::after {
  border-color: rgba(255, 255, 255, 0.3);
}
.testimonial__slider-3 .swiper-container {
  margin-left: inherit;
  margin-right: inherit;
}
.testimonial__nav-thumb {
  position: relative;
  width: 70px;
  height: 70px;
  margin: 10px;
}
.testimonial__nav-thumb::after {
  position: absolute;
  content: "";
  left: -10px;
  top: -10px;
  width: calc(100% + 20px);
  height: calc(100% + 20px);
  border: 1px solid transparent;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
}
.testimonial__item-3 p {
  font-size: 24px;
  line-height: 40px;
  color: #ffffff;
}
.testimonial__title {
  font-size: 40px;
  color: #ffffff;
}



/*----------------------------------------*/
/*  00. FOOTER CSS START
/*----------------------------------------*/
footer{
  background: url(../img/shape/footer-bg.png);
  background-size: cover;
  background-repeat: no-repeat;
  position: relative;
}
footer::before{
  content: '';
  background: url(../img/shape/footer-curve.svg);
  background-repeat: no-repeat;
  background-size: contain;
  height: 205px;
  width: 375px;
  position: absolute;
  left: 0;
  top: 0;
}
.footer__widget-title {
  font-size: 17px;
  color: #bcccfc;
  font-family: 'Gilroy-Bold';
}
.footer__widget-title-2 {
  color: #0e1133;
}
.footer__widget-body p {
  font-size: 16px;
  line-height: 24px;
  color: #bcccfc;
  margin-bottom: 30px;
}
.footer__widget-body-2 p {
  color: #53545b;
}
.footer__social ul li {
  display: inline-block;
}
.footer__social ul li:not(:last-child) {
  margin-right: 10px;
}
.footer__social ul li a {
  display: inline-block;
  font-size: 15px;
  width: 30px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  color: #ffffff;
  transition: .3s;
}
.footer__social ul li a:hover {
  background: #1741d5;
  color: #ffffff;
  transition: .3s;
}

.footer__link ul li:not(:last-child) {
  margin-bottom: 4px;
}
.footer__link ul li a {
  font-family: 'Gilroy-Bold';
  font-size: 16px;
  line-height: 44px;
  color: #FFFFFF;
}
.footer__link ul li a:hover {
  color: #bcccfc;
}
.footer__link-2 ul li a {
  color: #53545b;
}
.footer__link-2 ul li a:hover {
  color: #0183cc;
}
.footer__subscribe{
  width: 820px;
  margin: auto;
  text-align: center;
}
.footer__subscribe h1{
  font-size: 60px;
  line-height: 66px;
  align-items: center;
  text-align: center;
  letter-spacing: -2px;
  color: #FFFFFF;
  margin-bottom: 70px;
}
.footer__subscribe-input {
  position: relative;
}
.footer__subscribe-input input {
  width: 320px;
  height: 70px;
  padding: 0 30px;
  padding-right: 50px;
  border: none;
  outline: none;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 10px;
  color: #ffffff;
  font-size: 16px;
  line-height: 28px;
  font-weight: 600;
  letter-spacing: 1px;
  margin-right: 5px;
}
.footer__subscribe-input input::placeholder {
  font-size: 14px;
  color: #ffffff;
}
.footer__subscribe-input button {
  font-size: 14px;
  line-height: 28px;
  font-weight: 600;
  color: #ffffff;
  background: #FF5722;
  border-radius: 10px;
  padding: 0px 25px;
  height: 70px;
  line-height: 70px;
  transition: all ease 0.2s;
  -webkit-transition: all ease 0.2s;
  -moz-transition: all ease 0.2s;
  -ms-transition: all ease 0.2s;
  -o-transition: all ease 0.2s;
  text-align: center;
  overflow: hidden;
  letter-spacing: 1px;
}
.footer__subscribe-input button:hover{
  background-color: #e04210;
  transition: .3s;
}
.footer__subscribe-input button i:last-child {
  left: 0%;
  visibility: hidden;
  opacity: 0;
}
.footer__subscribe-input button:hover i {
  left: 100%;
  visibility: hidden;
  opacity: 0;
}
.footer__subscribe-input button:hover i:last-child {
  left: 50%;
  visibility: visible;
  opacity: 1;
}
.footer__subscribe p {
  font-size: 14px;
  line-height: 20px;
  color: #83848a;
  padding-right: 60px;
}
.footer__subscribe-2 p {
  color: #6d6e75;
}
.footer__pl-70 {
  padding-left: 70px;
}
.footer__widget .contact__details li{
  color: white;
  font-size: 16px;
  display: flex;
  margin-bottom: 20px;
  font-family: 'Gilroy-Bold';
}
.footer__widget .contact__details li i{
  margin-right: 20px;
  padding-top: 7px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .footer__pl-70 {
    padding-left: 0;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .footer__pl-70 {
    padding-left: 0;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .footer__pl-70 {
    padding-left: 0;
  }
}
@media (max-width: 575px) {
  .footer__pl-70 {
    padding-left: 0;
  }
}
.footer__bottom {
  padding: 20px 0;
  border-top: 1px solid #3c66ff;
}
.footer__bottom-2 {
  border-color: #e0e1e8;
}
.footer__copyright p {
  font-family: 'Gilroy-Medium';
  font-size: 16px;
  line-height: 28px;
  color: #FFFFFF;
  opacity: 0.7;
  margin-bottom: 0;
}
.footer__copyright p a {
  color: #ffffff;
}
.footer__copyright-2 p {
  color: #6d6e75;
}
.footer__copyright-2 p a {
  color: #0183cc;
}