/*-----------------------------------------------------------------------------------

    Template Name: Gilbard - Gaming Bootstrap 5 Template
    Version: 1.0

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

    CSS INDEX
    ===================

    01. Theme default CSS
    02. Header CSS
    03. Hero CSS
    04. Download CSS
    05. About CSS
    06. Feature CSS
    07. Video CSS
    08. Install CSS
    09. Newslatter CSS
    10. Testimonial CSS
    11. Game CSS
    12. Review CSS
    13. Blog CSS
    14. Gallery CSS
    15. Forum CSS
    16. Login CSS
    17. Checkout CSS
    18. Comment CSS
    19. Sidebar CSS
    20. Contact CSS
    21. Footer CSS

-----------------------------------------------------------------------------------*/
/*----------------------------------------*/
/*  01. Theme default CSS
/*----------------------------------------*/
/*-- Common Style --*/
*, *::after, *::before {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

html, body, .site-wrapper {
  height: 100%;
}

body {
  background-color: #ffffff;
  font-size: 15px;
  line-height: 28px;
  font-style: normal;
  font-weight: normal;
  visibility: visible;
  font-family: "Ubuntu", sans-serif;
  color: #151515;
  position: relative;
}
body[data-rtl=rtl] {
  direction: rtl;
  text-align: right;
}

h1, h2, h3, h4, h5, h6 {
  font-family: "Nova Round", cursive;
  color: #252525;
  font-weight: 400;
  margin-top: 0;
  line-height: 1.2;
}

h1 {
  font-size: 36px;
}
@media only screen and (max-width: 767px) {
  h1 {
    font-size: 32px;
  }
}
@media only screen and (max-width: 575px) {
  h1 {
    font-size: 30px;
  }
}

h2 {
  font-size: 30px;
}
@media only screen and (max-width: 767px) {
  h2 {
    font-size: 26px;
  }
}
@media only screen and (max-width: 575px) {
  h2 {
    font-size: 24px;
  }
}

h3 {
  font-size: 24px;
}
@media only screen and (max-width: 767px) {
  h3 {
    font-size: 22px;
  }
}
@media only screen and (max-width: 575px) {
  h3 {
    font-size: 20px;
  }
}

h4 {
  font-size: 18px;
}

h5 {
  font-size: 14px;
}

h6 {
  font-size: 12px;
}

p:last-child {
  margin-bottom: 0;
}

a, button {
  color: inherit;
  display: inline-block;
  line-height: inherit;
  text-decoration: none;
  cursor: pointer;
}

a, button, img, input, span {
  -webkit-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
}

*:focus {
  outline: none !important;
}

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

a:hover {
  text-decoration: none;
  color: #061da4;
}

button, input[type=submit] {
  cursor: pointer;
}

ul {
  list-style: outside none none;
  margin: 0;
  padding: 0;
}

img {
  max-width: 100%;
}

@media only screen and (min-width: 1200px) {
  .container {
    max-width: 1200px;
  }
}
.container, .container-fluid, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
  padding-right: var(--bs-gutter-x, 0.9rem);
  padding-left: var(--bs-gutter-x, 0.9rem);
}

.row {
  margin-right: calc(var(--bs-gutter-x) * -0.6);
  margin-left: calc(var(--bs-gutter-x) * -0.6);
}

.row > * {
  position: relative;
  padding-right: calc(var(--bs-gutter-x) * 0.6);
  padding-left: calc(var(--bs-gutter-x) * 0.6);
}

/*-- 
    - Plugin CSS Customize
-----------------------------------------*/
.nice-select {
  height: 50px;
  color: #666;
  line-height: 50px;
}
.nice-select.wide .list {
  width: 190px;
  left: auto !important;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .note-editable {
    height: 300px !important;
  }
}
@media only screen and (max-width: 767px) {
  .note-editable {
    height: 200px !important;
  }
}

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

.hidden {
  display: none;
}

.clear {
  clear: both;
}

.section, .main-wrapper {
  float: left;
  width: 100%;
}

.container.container-1520 {
  max-width: 1520px;
}
@media only screen and (min-width: 1200px) and (max-width: 1499px) {
  .container.container-1520 {
    max-width: 1200px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .container.container-1520 {
    max-width: 960px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .container.container-1520 {
    max-width: 720px;
  }
}
@media only screen and (max-width: 767px) {
  .container.container-1520 {
    max-width: 540px;
  }
}
@media only screen and (max-width: 479px) {
  .container.container-1520 {
    max-width: 300px;
  }
}

.col-lg-8.eight-col {
  max-width: 63%;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 63%;
          flex: 0 0 63%;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .col-lg-8.eight-col {
    max-width: 100%;
    -webkit-box-flex: 0;
        -ms-flex: 0 0 100%;
            flex: 0 0 100%;
  }
}
@media only screen and (max-width: 767px) {
  .col-lg-8.eight-col {
    max-width: 100%;
    -webkit-box-flex: 0;
        -ms-flex: 0 0 100%;
            flex: 0 0 100%;
  }
}

.col-lg-4.four-col {
  max-width: 37%;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 37%;
          flex: 0 0 37%;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .col-lg-4.four-col {
    max-width: 100%;
    -webkit-box-flex: 0;
        -ms-flex: 0 0 100%;
            flex: 0 0 100%;
  }
}
@media only screen and (max-width: 767px) {
  .col-lg-4.four-col {
    max-width: 100%;
    -webkit-box-flex: 0;
        -ms-flex: 0 0 100%;
            flex: 0 0 100%;
  }
}

@media (min-width: 1200px) {
  .container {
    max-width: 1200px;
  }
  .row-five-column > [class*=col-xl-] {
    max-width: 20%;
    -webkit-box-flex: 0;
        -ms-flex: 0 0 20%;
            flex: 0 0 20%;
  }
}
@media only screen and (max-width: 575px) {
  .container {
    max-width: 450px;
  }
}
@media only screen and (max-width: 479px) {
  .container {
    max-width: 300px;
  }
}
.g-0 {
  margin-left: 0;
  margin-right: 0;
}
.g-0 > .col, .g-0 > [class*=col-] {
  padding-right: 0;
  padding-left: 0;
  margin: 0 !important;
}

.inline-YTPlayer {
  max-width: none !important;
  width: 100%;
}

.mbYTP_wrapper {
  z-index: -9 !important;
}

/*-- 
    - Input Placeholder
-----------------------------------------*/
input:-moz-placeholder, textarea:-moz-placeholder {
  opacity: 1;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}

input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
  opacity: 1;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}

input::-moz-placeholder, textarea::-moz-placeholder {
  opacity: 1;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}

input:-ms-input-placeholder, textarea:-ms-input-placeholder {
  opacity: 1;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}

/*--
    - Background Color
------------------------------------------*/
.bg-white {
  background-color: #ffffff !important;
}

.bg-gray {
  background-color: #f8f8f8 !important;
}

.bg-dark {
  background-color: #252525 !important;
}

.bg-theme {
  background-color: #061da4 !important;
}

.bg-black {
  background-color: #081b1f !important;
}

/*-- 
    - Tab Content & Pane Fix
------------------------------------------*/
.tab-content {
  width: 100%;
}
.tab-content .tab-pane {
  display: block;
  height: 0;
  max-width: 100%;
  visibility: hidden;
  overflow: hidden;
  opacity: 0;
}
.tab-content .tab-pane.active {
  height: auto;
  visibility: visible;
  opacity: 1;
  overflow: visible;
}

/*-- 
    - Main Wrapper
------------------------------------------*/
/*-- 
    - Section Title
------------------------------------------*/
.section-title {
  margin-bottom: 30px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
@media only screen and (max-width: 767px) {
  .section-title {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
  }
}
.section-title h2 {
  font-size: 40px;
  line-height: 45px;
  margin: 0;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .section-title h2 {
    font-size: 34px;
    line-height: 40px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .section-title h2 {
    font-size: 30px;
    line-height: 40px;
  }
}
@media only screen and (max-width: 767px) {
  .section-title h2 {
    font-size: 26px;
    line-height: 30px;
  }
}
.section-title h2 span.color-blue {
  color: #061da4;
}
@media only screen and (max-width: 767px) {
  .section-title ul {
    margin-top: 20px;
  }
}
.section-title ul li {
  display: inline-block;
  margin-right: 25px;
}
.section-title ul li:last-child {
  margin-right: 0;
}
.section-title ul li a {
  font-size: 16px;
  line-height: 28px;
  font-family: "Nova Round", cursive;
  display: block;
}
.section-title ul li a:hover, .section-title ul li a.active {
  color: #061da4;
}
.section-title.text-center {
  text-align: center;
  background-position: top center;
}
.section-title.text-center p {
  margin-left: auto;
  margin-right: auto;
}
.section-title.text-left {
  text-align: left;
  background-position: top left;
}
.section-title.text-left p {
  margin-left: 0;
  margin-right: auto;
}
.section-title.text-right {
  text-align: right;
  background-position: top right;
}
.section-title.text-right p {
  margin-left: auto;
  margin-right: 0;
}

/*-- 
    - Button
------------------------------------------*/
.df-btn {
  background-color: #061da4;
  color: #ffffff;
  font-size: 20px;
  line-height: 25px;
  height: 50px;
  font-weight: 400;
  font-family: "Nova Round", cursive;
  padding: 15px 42px;
  text-transform: uppercase;
  border-radius: 0px;
  position: relative;
  -webkit-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
}
.df-btn:focus {
  -webkit-box-shadow: none;
          box-shadow: none;
  outline: none;
}
.df-btn:hover {
  background-color: #f64140;
  color: #ffffff;
}
@media only screen and (max-width: 767px) {
  .df-btn {
    font-size: 14px;
    line-height: 30px;
    height: 45px;
    padding: 10px 25px;
  }
  .df-btn:hover::before {
    left: 6px;
    top: 6px;
  }
  .df-btn:hover::after {
    left: -6px;
    top: -6px;
  }
}
/*-- 
    - Page Banner Section
------------------------------------------*/
.page-banner-section {
  margin-top: 130px;
  padding: 80px 0 90px;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  position: relative;
  z-index: 1;
}
.page-banner-section::before {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  content: "";
  background-color: #000000;
  opacity: 0.75;
  z-index: -1;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .page-banner-section {
    margin-top: 122px;
    padding: 60px 0 70px;
  }
}
@media only screen and (max-width: 767px) {
  .page-banner-section {
    margin-top: 122px;
    padding: 40px 0 50px;
  }
}
@media only screen and (max-width: 575px) {
  .page-banner-section {
    margin-top: 163px;
    padding: 25px 0 35px;
  }
}
@media only screen and (max-width: 479px) {
  .page-banner-section {
    margin-top: 151px;
  }
}

/*-- Page Banner --*/
.page-banner-area {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  height: 560px;
  position: relative;
}
.page-banner-area::before {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  content: "";
  background-color: #000000;
  opacity: 0.4;
}
@media only screen and (min-width: 1200px) and (max-width: 1499px) {
  .page-banner-area {
    height: 460px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .page-banner-area {
    height: 360px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .page-banner-area {
    height: 260px;
  }
}
@media only screen and (max-width: 767px) {
  .page-banner-area {
    height: 220px;
  }
}
.page-banner-area .page-content {
  position: relative;
}
.page-banner-area .page-content h1 {
  font-size: 75px;
  line-height: 75px;
  font-weight: 300;
  font-family: "Saira Stencil One", cursive;
  color: #ffffff;
  text-shadow: -6px 4px 1px #252525;
}
@media only screen and (min-width: 1200px) and (max-width: 1499px) {
  .page-banner-area .page-content h1 {
    font-size: 60px;
    line-height: 60px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .page-banner-area .page-content h1 {
    font-size: 50px;
    line-height: 50px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .page-banner-area .page-content h1 {
    font-size: 40px;
    line-height: 40px;
  }
}
@media only screen and (max-width: 767px) {
  .page-banner-area .page-content h1 {
    font-size: 28px;
    line-height: 30px;
  }
}
.page-banner-area .page-content a.df-btn {
  background-color: #ffffff;
  font-size: 20px;
  color: #151515;
  border-radius: 50px;
  margin-top: 30px;
  line-height: 25px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .page-banner-area .page-content a.df-btn {
    font-size: 18px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .page-banner-area .page-content a.df-btn {
    font-size: 16px;
    margin-top: 15px;
  }
}
@media only screen and (max-width: 767px) {
  .page-banner-area .page-content a.df-btn {
    font-size: 14px;
    margin-top: 10px;
  }
}

/*Page Banner Two CSS*/
.page-banner-2 {
  width: 100%;
  height: 835px;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  display: -webkit-box !important;
  display: -ms-flexbox !important;
  display: flex !important;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  position: relative;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  z-index: 1;
}
@media only screen and (min-width: 1200px) and (max-width: 1499px) {
  .page-banner-2 {
    height: 650px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .page-banner-2 {
    height: 550px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .page-banner-2 {
    height: 450px;
  }
}
@media only screen and (max-width: 767px) {
  .page-banner-2 {
    height: 600px;
  }
}
@media only screen and (max-width: 479px) {
  .page-banner-2 {
    height: 400px;
  }
}

.page-content-2 {
  text-align: left;
}
.page-content-2 h1 {
  font-size: 100px;
  line-height: 90px;
  font-weight: 300;
  font-family: "Saira Stencil One", cursive;
  color: #ffffff;
  text-shadow: -6px 4px 1px #252525;
}
@media only screen and (min-width: 1200px) and (max-width: 1499px) {
  .page-content-2 h1 {
    font-size: 90px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .page-content-2 h1 {
    font-size: 80px;
    line-height: 80px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .page-content-2 h1 {
    font-size: 50px;
    line-height: 50px;
  }
}
@media only screen and (max-width: 767px) {
  .page-content-2 h1 {
    font-size: 36px;
    line-height: 45px;
  }
}
.page-content-2 h3 {
  font-size: 40px;
  line-height: 90px;
  font-weight: 500;
  color: #ffffff;
  text-shadow: -4px 2px 1px #252525;
}
@media only screen and (min-width: 1200px) and (max-width: 1499px) {
  .page-content-2 h3 {
    font-size: 36px;
    line-height: 50px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .page-content-2 h3 {
    font-size: 34px;
    line-height: 46px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .page-content-2 h3 {
    font-size: 28px;
    line-height: 36px;
  }
}
@media only screen and (max-width: 767px) {
  .page-content-2 h3 {
    font-size: 24px;
    line-height: 30px;
  }
}
.page-content-2 .btn {
  background-color: #ffffff;
  font-size: 20px;
  color: #151515;
  border-radius: 50px;
  margin-top: 30px;
}

/*-- Page Banner Fornt Image --*/
.page-front-image {
  position: absolute;
  top: -290px;
  right: -230px;
}
@media only screen and (min-width: 1200px) and (max-width: 1499px) {
  .page-front-image {
    top: -35px;
    right: 45px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .page-front-image {
    top: -110px;
    right: -5px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .page-front-image {
    top: -110px;
    right: -5px;
  }
}
@media only screen and (max-width: 767px) {
  .page-front-image {
    position: static;
  }
}
.page-front-image img {
  max-width: none;
}
@media only screen and (min-width: 1200px) and (max-width: 1499px) {
  .page-front-image img {
    width: 300px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .page-front-image img {
    width: 300px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .page-front-image img {
    width: 250px;
  }
}
@media only screen and (max-width: 767px) {
  .page-front-image img {
    width: 120px;
  }
}

/*-- Page Breadcrumb --*/
.page-breadcrumb {
  list-style: none;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  position: absolute;
  bottom: -145px;
  left: 0;
}
@media only screen and (min-width: 1200px) and (max-width: 1499px) {
  .page-breadcrumb {
    bottom: -105px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .page-breadcrumb {
    bottom: -70px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .page-breadcrumb {
    bottom: -30px;
  }
}
@media only screen and (max-width: 767px) {
  .page-breadcrumb {
    bottom: -30px;
  }
}
.page-breadcrumb li {
  color: #ffffff;
  font-size: 14px;
  font-weight: 300;
  letter-spacing: 0.5px;
  font-family: "Nova Round", cursive;
  line-height: 1;
  margin-top: 10px;
}
@media only screen and (max-width: 575px) {
  .page-breadcrumb li {
    font-size: 14px;
  }
}
.page-breadcrumb li::after {
  content: "/";
  margin: 0 6px;
}
.page-breadcrumb li:last-child::after {
  display: none;
}
.page-breadcrumb li a:hover {
  color: #f64140;
}

/*-- 
    - Page Pagination
------------------------------------------*/
.page-pagination {
  margin: -7px -10px;
}
.page-pagination li {
  display: inline-block;
  font-size: 18px;
  line-height: 24px;
  color: #8b8a8a;
  text-align: center;
  margin: 5px 10px;
}
.page-pagination li a {
  color: #252525;
  display: block;
}
.page-pagination li a i {
  line-height: 30px;
}
.page-pagination li:hover {
  color: #151515;
}
.page-pagination li.active a {
  color: #252525;
}

.grid-filter {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  margin-bottom: 20px;
}
.grid-filter button {
  background-color: transparent;
  color: #252525;
  border: none;
  padding: 0;
  font-size: 14px;
  font-weight: 600;
  margin: 0 10px 10px;
  text-transform: capitalize;
  line-height: 1;
  padding-bottom: 5px;
  position: relative;
}
.grid-filter button::before {
  content: "";
  height: 6px;
  width: 0;
  position: absolute;
  left: 0;
  bottom: 4px;
  background-color: #061da4;
  z-index: -1;
  -webkit-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
}
.grid-filter button:hover::before, .grid-filter button.active::before {
  width: 100%;
}
.grid-filter.center {
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.grid-filter.center button {
  margin: 0 10px 10px;
}
.grid-filter.left {
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
}
.grid-filter.left button {
  margin-left: 0;
  margin-right: 20px;
  margin-bottom: 10px;
}
.grid-filter.left button:last-child {
  margin-right: 0;
}
.grid-filter.right {
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
}
.grid-filter.right button {
  margin-left: 20px;
  margin-right: 0;
  margin-bottom: 10px;
}
.grid-filter.right button:last-child {
  margin-left: 0;
}

.gallery-item {
  position: relative;
}
.gallery-item::before {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  content: "";
  background-color: #252525;
  z-index: 1;
  opacity: 0;
  -webkit-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
}
.gallery-item img {
  width: 100%;
}
.gallery-item .plus {
  display: block;
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translateX(-50%) translateY(-50%);
      -ms-transform: translateX(-50%) translateY(-50%);
          transform: translateX(-50%) translateY(-50%);
  z-index: 3;
  opacity: 0;
}
.gallery-item .plus::before, .gallery-item .plus::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translateX(-50%) translateY(-50%);
      -ms-transform: translateX(-50%) translateY(-50%);
          transform: translateX(-50%) translateY(-50%);
  background-color: #ffffff;
  -webkit-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
}
.gallery-item .plus::before {
  width: 150px;
  height: 1px;
}
.gallery-item .plus::after {
  width: 1px;
  height: 150px;
}
.gallery-item:hover::before {
  opacity: 0.75;
}
.gallery-item:hover .plus {
  opacity: 1;
}
.gallery-item:hover .plus::before {
  width: 40px;
}
.gallery-item:hover .plus::after {
  height: 40px;
}

blockquote.blockquote {
  background-color: #f1f1f1;
  padding: 30px;
  position: relative;
  z-index: 1;
  overflow: hidden;
  margin-left: 35px;
}
@media only screen and (max-width: 767px) {
  blockquote.blockquote {
    margin-left: 0;
  }
}
blockquote.blockquote p {
  font-size: 16px;
  line-height: 28px;
  font-weight: 500;
  max-width: 630px;
  font-style: italic;
}
blockquote.blockquote .author {
  font-size: 14px;
  display: block;
  line-height: 18px;
}

/*************************
        scroll to top
*************************/
#scrollUp {
  background: #000000;
  width: 40px;
  height: 40px;
  line-height: 40px;
  border-radius: 100%;
  bottom: 25px;
  right: 25px;
  color: #fff;
  text-align: center;
  font-size: 18px;
  -webkit-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
#scrollUp:hover {
  background-color: #f64140;
}

/*----------------------------------------*/
/*  02. Header CSS
/*----------------------------------------*/
header.header {
  background-color: transparent;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  z-index: 999;
}
header.header.is-sticky {
  position: fixed;
  -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
          box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
  -webkit-animation-duration: 1s;
          animation-duration: 1s;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
  -webkit-animation-name: slideInDown;
          animation-name: slideInDown;
  -webkit-animation-duration: 0.5s;
          animation-duration: 0.5s;
  background: #081b1f;
  z-index: 9999;
}
header.header.is-sticky .default-header {
  margin-top: 0 !important;
}
header.header.is-sticky .default-header .main-menu ul li a {
  line-height: 30px;
}

header.header.header-static {
  position: static;
}

.header-terms {
  position: unset !important;
  background-color: #081b1f !important;
}

.header-terms.is-sticky {
  position: fixed !important;
}

@media only screen and (max-width: 767px) {
  header.header-absolute {
    position: static;
  }
}

/*-- Default Header --*/
.default-header.menu-right > .container > .row {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  position: relative;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .default-header.menu-right > .container > .row {
    -webkit-box-align: inherit;
        -ms-flex-align: inherit;
            align-items: inherit;
  }
}
@media only screen and (max-width: 767px) {
  .default-header.menu-right > .container > .row {
    -webkit-box-align: inherit;
        -ms-flex-align: inherit;
            align-items: inherit;
  }
}
.default-header.menu-right > .container > .row > .col {
  -webkit-box-flex: 0;
      -ms-flex-positive: 0;
          flex-grow: 0;
  position: static;
}
.default-header.menu-right > .container > .row > .col:first-child {
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
}

/*-- Header Logo --*/
@media only screen and (max-width: 767px) {
  .logo {
    text-align: center;
    width: 120px;
    margin: auto;
  }
}
.logo a {
  display: inline-block;
}
.logo a img {
  max-width: 100%;
}

/*-- Header Search --*/
.header-right-wrap ul {
  text-align: right;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .header-right-wrap ul {
    text-align: center;
  }
}
@media only screen and (max-width: 767px) {
  .header-right-wrap ul {
    text-align: left;
  }
}
.header-right-wrap ul li {
  display: inline-block;
  margin-right: 25px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .header-right-wrap ul li {
    margin-right: 10px;
  }
}
.header-right-wrap ul li:last-child {
  margin-right: 0;
}
.header-right-wrap ul li a {
  font-size: 20px;
  line-height: 30px;
  display: block;
  padding: 30px 0;
  font-family: "Nova Round", cursive;
  color: #9f9f9f;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .header-right-wrap ul li a {
    padding: 20px 0;
  }
}
@media only screen and (max-width: 767px) {
  .header-right-wrap ul li a {
    padding: 20px 0;
  }
}
.header-right-wrap ul li a:hover {
  color: #ffffff;
}

.header-search-form {
  position: relative;
  z-index: 999;
}

.header-search-toggle {
  background-color: transparent;
  border: none;
  color: #252525;
  padding: 0;
  line-height: 1;
  width: 30px;
  height: 30px;
}
.header-search-toggle i {
  font-size: 24px;
}
.header-search-toggle.open i {
  font-size: 24px;
}

/*-- Search Form --*/
.header-search-form {
  display: none;
  position: absolute;
  right: 0;
  top: 100%;
  background-color: #ffffff;
  -webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
          box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
}
@media only screen and (min-width: 1200px) and (max-width: 1499px) {
  .header-search-form {
    right: 10px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .header-search-form {
    right: auto;
    left: 80px;
  }
}
.header-search-form form {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.header-search-form form input {
  width: 250px;
  border: none;
  background-color: transparent;
  color: #151515;
  line-height: 24px;
  padding: 13px 20px;
}
@media only screen and (max-width: 479px) {
  .header-search-form form input {
    width: 216px;
  }
}
.header-search-form form button {
  line-height: 24px;
  padding: 13px 15px;
  border: none;
  background-color: #061da4;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  color: #ffffff;
  -webkit-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
.header-search-form form button i {
  font-size: 24px;
  line-height: 24px;
}
.header-search-form form button:hover {
  background-color: #000000;
}

/*-- buy button --*/
.buy-btn {
  margin-left: 60px;
}
@media only screen and (min-width: 1200px) and (max-width: 1499px) {
  .buy-btn {
    margin-left: 20px;
  }
  .buy-btn > .df-btn {
    width: 170px;
    text-align: center;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .buy-btn {
    margin-left: 20px;
  }
  .buy-btn > .df-btn {
    width: 170px;
    text-align: center;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .buy-btn {
    text-align: right;
    display: block;
    width: 100%;
    margin-left: 0;
    margin-right: 60px;
  }
}
@media only screen and (max-width: 767px) {
  .buy-btn {
    text-align: right;
    display: block;
    width: 100%;
    margin-left: 0;
    margin-right: 40px;
  }
}

/*-- Main Menu --*/
.main-menu.menu-style-2 ul li a {
  line-height: 30px;
}
.main-menu > ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.main-menu > ul > li {
  margin-right: 65px;
  position: relative;
}
@media only screen and (min-width: 1200px) and (max-width: 1499px) {
  .main-menu > ul > li {
    margin-right: 40px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .main-menu > ul > li {
    margin-right: 20px;
  }
}
.main-menu > ul > li:last-child {
  margin-right: 0;
}
.main-menu > ul > li > a {
  font-size: 20px;
  line-height: 70px;
  font-weight: 400;
  letter-spacing: 0.25px;
  font-family: "Nova Round", cursive;
  color: #ffffff;
  display: block;
  padding: 30px 0;
  position: relative;
  text-transform: capitalize;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .main-menu > ul > li > a {
    line-height: 30px;
  }
}
.main-menu > ul > li.has-dropdown > a::after {
  content: "\f107";
  font-family: Fontawesome;
  line-height: 30px;
  margin-left: 3px;
}
.main-menu > ul > li.active > a, .main-menu > ul > li:hover > a {
  color: #f64140;
}
.main-menu > ul > li:hover > .sub-menu {
  margin-top: 0;
  opacity: 1;
  visibility: visible;
  z-index: 99;
}
.main-menu > ul > li:hover > .mega-menu {
  margin-top: 0;
  opacity: 1;
  visibility: visible;
  z-index: 99;
}
.main-menu > ul > li:last-child .sub-menu {
  left: auto;
  right: 0;
}
.main-menu > ul > li:last-child .sub-menu .sub-menu .sub-menu {
  left: 100%;
  right: auto;
}
.main-menu > ul > li:last-child .sub-menu .sub-menu .sub-menu .sub-menu {
  left: auto;
  right: 100%;
}
.main-menu > ul > li:nth-last-child(-n+3) .sub-menu .sub-menu {
  left: auto;
  right: 100%;
}
.main-menu > ul > li:nth-last-child(-n+3) .sub-menu .sub-menu .sub-menu {
  left: 100%;
  right: auto;
}

/*-- Sub Menu --*/
.sub-menu {
  position: absolute;
  left: 0;
  top: 100%;
  margin-left: -20px;
  margin-top: 30px;
  padding: 20px 0;
  background-color: #ffffff;
  -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.15);
          box-shadow: 0 5px 10px rgba(0, 0, 0, 0.15);
  -webkit-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
  width: 210px;
  z-index: -99;
  opacity: 0;
  visibility: hidden;
}
.sub-menu li {
  margin-bottom: 5px;
  position: relative;
}
.sub-menu li:last-child {
  margin-bottom: 0;
}
.sub-menu li a {
  letter-spacing: 0.25px;
  font-family: "Nova Round", cursive;
  color: #151515;
  display: block;
  font-size: 14px;
  line-height: 30px;
  font-weight: 400;
  padding: 0 20px;
}
.sub-menu li.has-dropdown > a::after {
  content: "\f105";
  font-family: Fontawesome;
  line-height: 30px;
  float: right;
}
.sub-menu li.active > a {
  color: #f64140;
}
.sub-menu li .sub-menu {
  left: 100%;
  top: 0;
  margin-left: 0;
}
.sub-menu li:hover > a {
  color: #f64140;
  padding-left: 25px;
}
.sub-menu li:hover > .sub-menu {
  margin-top: -10px;
  opacity: 1;
  visibility: visible;
  z-index: 99;
}
.sub-menu li .sub-menu {
  left: 100%;
  margin-left: 0;
  top: 0;
}
.sub-menu li .sub-menu .sub-menu {
  left: auto;
  right: 100%;
}
.sub-menu li .sub-menu .sub-menu .sub-menu {
  left: 100%;
  right: auto;
}

/*-- Mobile Menu --*/
.mobile-menu {
  -webkit-box-flex: 1 !important;
      -ms-flex: 1 0 100% !important;
          flex: 1 0 100% !important;
}
.mobile-menu .mean-bar {
  position: relative;
  /*---- Mean Nav ----*/
}
.mobile-menu .mean-bar .meanmenu-reveal {
  position: absolute;
  top: -46px;
}
@media only screen and (max-width: 479px) {
  .mobile-menu .mean-bar .meanmenu-reveal {
    top: -45px;
  }
}
@media only screen and (max-width: 767px) {
  .mobile-menu .mean-bar .meanmenu-reveal {
    top: -45px;
  }
}
.mobile-menu .mean-bar .meanmenu-reveal span {
  position: relative;
  /*---- Menu Open ----*/
  /*---- Menu Close ----*/
}
.mobile-menu .mean-bar .meanmenu-reveal span.menu-bar {
  height: 2px;
  width: 26px;
  background-color: #ffffff;
  display: block;
  margin: 8px 0;
}
.mobile-menu .mean-bar .meanmenu-reveal span.menu-bar::before, .mobile-menu .mean-bar .meanmenu-reveal span.menu-bar::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #ffffff;
}
.mobile-menu .mean-bar .meanmenu-reveal span.menu-bar::before {
  top: -8px;
}
.mobile-menu .mean-bar .meanmenu-reveal span.menu-bar::after {
  bottom: -8px;
}
.mobile-menu .mean-bar .meanmenu-reveal span.menu-close {
  height: 2px;
  width: 26px;
  background-color: transparent;
  display: block;
  margin: 8px 0;
}
.mobile-menu .mean-bar .meanmenu-reveal span.menu-close::before, .mobile-menu .mean-bar .meanmenu-reveal span.menu-close::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #ffffff;
}
.mobile-menu .mean-bar .meanmenu-reveal span.menu-close::before {
  top: 0;
  -webkit-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
          transform: rotate(45deg);
}
.mobile-menu .mean-bar .meanmenu-reveal span.menu-close::after {
  bottom: 0;
  -webkit-transform: rotate(-45deg);
      -ms-transform: rotate(-45deg);
          transform: rotate(-45deg);
}
.mobile-menu .mean-bar .mean-nav {
  background-color: #ffffff;
}
.mobile-menu .mean-bar .mean-nav > ul {
  margin-bottom: 30px;
  border: 1px solid rgba(0, 0, 0, 0.05);
  overflow-x: hidden;
  max-height: 250px;
}
@media only screen and (max-width: 767px) {
  .mobile-menu .mean-bar .mean-nav > ul {
    max-height: 180px;
    overflow-y: auto;
  }
}
@media only screen and (max-width: 575px) {
  .mobile-menu .mean-bar .mean-nav > ul {
    max-height: 220px;
    overflow-y: auto;
  }
}
.mobile-menu .mean-bar .mean-nav > ul > li:first-child > a {
  border-top: none;
}
.mobile-menu .mean-bar .mean-nav > ul li {
  position: relative;
  display: block;
  float: left;
  width: 100%;
  /*---- Sub Menu & Mega Menu ----*/
}
.mobile-menu .mean-bar .mean-nav > ul li a {
  font-size: 13px;
  display: block;
  font-family: "Nova Round", cursive;
  color: #151515;
  font-weight: 600;
  text-transform: uppercase;
  line-height: 44px;
  position: relative;
  border-top: 1px solid rgba(0, 0, 0, 0.05);
  padding: 0 40px 0 20px;
  /*---- Menu Expand For Sub Menu ----*/
}
.mobile-menu .mean-bar .mean-nav > ul li a::after {
  display: none;
}
.mobile-menu .mean-bar .mean-nav > ul li a:hover {
  color: #061da4;
  padding-left: 25px;
}
.mobile-menu .mean-bar .mean-nav > ul li a.active {
  color: #061da4;
}
.mobile-menu .mean-bar .mean-nav > ul li a.mean-expand {
  border-width: 0 1px;
  border-style: solid;
  border-color: rgba(0, 0, 0, 0.05);
  position: absolute;
  right: -1px;
  top: 0;
  font-size: 20px !important;
  color: #151515;
  line-height: 44px;
  height: 46px;
  width: 40px;
  text-align: center;
  padding: 0;
}
.mobile-menu .mean-bar .mean-nav > ul li a.mean-expand.mean-clicked {
  line-height: 40px;
}
.mobile-menu .mean-bar .mean-nav > ul li span {
  font-size: 13px;
  display: block;
  color: #151515;
  font-weight: 600;
  text-transform: uppercase;
  line-height: 44px;
  position: relative;
  border-top: 1px solid rgba(0, 0, 0, 0.05);
  border-bottom: none;
  padding: 0 40px 0 20px;
  margin: 0;
}
.mobile-menu .mean-bar .mean-nav > ul li .sub-menu, .mobile-menu .mean-bar .mean-nav > ul li .mega-menu, .mobile-menu .mean-bar .mean-nav > ul li ul {
  position: static;
  background-color: rgba(0, 0, 0, 0.03);
  margin: 0;
  padding: 0 !important;
  width: 100%;
  -webkit-box-shadow: none;
          box-shadow: none;
  margin: 0;
  display: none;
  float: left;
  width: 100%;
  opacity: 1;
  visibility: visible;
  z-index: 1;
  -webkit-transition: none;
  -o-transition: none;
  transition: none;
}
.mobile-menu .mean-bar .mean-nav > ul li .sub-menu li, .mobile-menu .mean-bar .mean-nav > ul li .mega-menu li, .mobile-menu .mean-bar .mean-nav > ul li ul li {
  padding: 0;
  margin: 0;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 100%;
          flex: 0 0 100%;
  border-right: 0px solid transparent;
  width: 100%;
  display: block !important;
  float: left;
  width: 100%;
}
.mobile-menu .mean-bar .mean-nav > ul li .sub-menu li a, .mobile-menu .mean-bar .mean-nav > ul li .mega-menu li a, .mobile-menu .mean-bar .mean-nav > ul li ul li a {
  font-size: 11px;
  display: block !important;
}
.mobile-menu .mean-bar .mean-nav > ul li .sub-menu li a::before, .mobile-menu .mean-bar .mean-nav > ul li .mega-menu li a::before, .mobile-menu .mean-bar .mean-nav > ul li ul li a::before {
  display: none;
}
.mobile-menu .mean-bar .mean-nav > ul li .sub-menu li span, .mobile-menu .mean-bar .mean-nav > ul li .mega-menu li span, .mobile-menu .mean-bar .mean-nav > ul li ul li span {
  font-size: 11px;
}
.mobile-menu .mean-bar .mean-nav > ul li .sub-menu li .sub-menu, .mobile-menu .mean-bar .mean-nav > ul li .sub-menu li ul, .mobile-menu .mean-bar .mean-nav > ul li .mega-menu li .sub-menu, .mobile-menu .mean-bar .mean-nav > ul li .mega-menu li ul, .mobile-menu .mean-bar .mean-nav > ul li ul li .sub-menu, .mobile-menu .mean-bar .mean-nav > ul li ul li ul {
  background-color: rgba(0, 0, 0, 0.04);
}
.mobile-menu .mean-bar .mean-nav > ul li .sub-menu li .sub-menu li a, .mobile-menu .mean-bar .mean-nav > ul li .sub-menu li ul li a, .mobile-menu .mean-bar .mean-nav > ul li .mega-menu li .sub-menu li a, .mobile-menu .mean-bar .mean-nav > ul li .mega-menu li ul li a, .mobile-menu .mean-bar .mean-nav > ul li ul li .sub-menu li a, .mobile-menu .mean-bar .mean-nav > ul li ul li ul li a {
  border-top: 1px solid rgba(0, 0, 0, 0.05);
}
.mobile-menu .mean-bar .mean-nav > ul li .sub-menu li .sub-menu li a.mean-expand, .mobile-menu .mean-bar .mean-nav > ul li .sub-menu li ul li a.mean-expand, .mobile-menu .mean-bar .mean-nav > ul li .mega-menu li .sub-menu li a.mean-expand, .mobile-menu .mean-bar .mean-nav > ul li .mega-menu li ul li a.mean-expand, .mobile-menu .mean-bar .mean-nav > ul li ul li .sub-menu li a.mean-expand, .mobile-menu .mean-bar .mean-nav > ul li ul li ul li a.mean-expand {
  border-width: 0 1px;
  border-style: solid;
  border-color: rgba(0, 0, 0, 0.05);
}
.mobile-menu .mean-bar .mean-nav > ul li .sub-menu li .sub-menu .sub-menu, .mobile-menu .mean-bar .mean-nav > ul li .sub-menu li .sub-menu ul, .mobile-menu .mean-bar .mean-nav > ul li .sub-menu li ul .sub-menu, .mobile-menu .mean-bar .mean-nav > ul li .sub-menu li ul ul, .mobile-menu .mean-bar .mean-nav > ul li .mega-menu li .sub-menu .sub-menu, .mobile-menu .mean-bar .mean-nav > ul li .mega-menu li .sub-menu ul, .mobile-menu .mean-bar .mean-nav > ul li .mega-menu li ul .sub-menu, .mobile-menu .mean-bar .mean-nav > ul li .mega-menu li ul ul, .mobile-menu .mean-bar .mean-nav > ul li ul li .sub-menu .sub-menu, .mobile-menu .mean-bar .mean-nav > ul li ul li .sub-menu ul, .mobile-menu .mean-bar .mean-nav > ul li ul li ul .sub-menu, .mobile-menu .mean-bar .mean-nav > ul li ul li ul ul {
  background-color: rgba(0, 0, 0, 0.05);
}
.mobile-menu .mean-bar .mean-nav > ul li .sub-menu li .sub-menu .sub-menu li a, .mobile-menu .mean-bar .mean-nav > ul li .sub-menu li .sub-menu ul li a, .mobile-menu .mean-bar .mean-nav > ul li .sub-menu li ul .sub-menu li a, .mobile-menu .mean-bar .mean-nav > ul li .sub-menu li ul ul li a, .mobile-menu .mean-bar .mean-nav > ul li .mega-menu li .sub-menu .sub-menu li a, .mobile-menu .mean-bar .mean-nav > ul li .mega-menu li .sub-menu ul li a, .mobile-menu .mean-bar .mean-nav > ul li .mega-menu li ul .sub-menu li a, .mobile-menu .mean-bar .mean-nav > ul li .mega-menu li ul ul li a, .mobile-menu .mean-bar .mean-nav > ul li ul li .sub-menu .sub-menu li a, .mobile-menu .mean-bar .mean-nav > ul li ul li .sub-menu ul li a, .mobile-menu .mean-bar .mean-nav > ul li ul li ul .sub-menu li a, .mobile-menu .mean-bar .mean-nav > ul li ul li ul ul li a {
  border-top: 1px solid rgba(0, 0, 0, 0.05);
}
.mobile-menu .mean-bar .mean-nav > ul li .sub-menu li .sub-menu .sub-menu li a.mean-expand, .mobile-menu .mean-bar .mean-nav > ul li .sub-menu li .sub-menu ul li a.mean-expand, .mobile-menu .mean-bar .mean-nav > ul li .sub-menu li ul .sub-menu li a.mean-expand, .mobile-menu .mean-bar .mean-nav > ul li .sub-menu li ul ul li a.mean-expand, .mobile-menu .mean-bar .mean-nav > ul li .mega-menu li .sub-menu .sub-menu li a.mean-expand, .mobile-menu .mean-bar .mean-nav > ul li .mega-menu li .sub-menu ul li a.mean-expand, .mobile-menu .mean-bar .mean-nav > ul li .mega-menu li ul .sub-menu li a.mean-expand, .mobile-menu .mean-bar .mean-nav > ul li .mega-menu li ul ul li a.mean-expand, .mobile-menu .mean-bar .mean-nav > ul li ul li .sub-menu .sub-menu li a.mean-expand, .mobile-menu .mean-bar .mean-nav > ul li ul li .sub-menu ul li a.mean-expand, .mobile-menu .mean-bar .mean-nav > ul li ul li ul .sub-menu li a.mean-expand, .mobile-menu .mean-bar .mean-nav > ul li ul li ul ul li a.mean-expand {
  border-width: 0 1px;
  border-style: solid;
  border-color: rgba(0, 0, 0, 0.05);
}

/*----------------------------------------*/
/*  03. Hero CSS
/*----------------------------------------*/
/*-- Hero Slider --*/
.cta {
  background-color: #071DA3;
  color: #fff;
  padding: 1.5rem;
  font-size: 1.5rem;
}
.cta:hover {
  color: #f64140;
}
.hero-slider .slick-arrow, .hero-slider-four .slick-arrow {
  position: absolute;
  bottom: 70px;
  z-index: 9;
  border: none;
  background-color: transparent;
  color: #061da4;
  text-align: center;
  opacity: 1;
  font-size: 17px;
  line-height: 28px;
  color: #b6b6b6;
  font-family: "Nova Round", cursive;
}
@media only screen and (max-width: 767px) {
  .hero-slider .slick-arrow, .hero-slider-four .slick-arrow {
    bottom: 20px;
  }
}
.hero-slider .slick-arrow i, .hero-slider-four .slick-arrow i {
  font-size: 30px;
  line-height: 28px;
  display: inline-block;
  vertical-align: middle;
}
.hero-slider .slick-arrow.slick-prev, .hero-slider-four .slick-arrow.slick-prev {
  right: calc(50% + 7px);
  left: auto;
}
.hero-slider .slick-arrow.slick-next, .hero-slider-four .slick-arrow.slick-next {
  left: calc(50% + 7px);
  right: auto;
}
.hero-slider .slick-arrow:hover, .hero-slider-four .slick-arrow:hover {
  color: #ffffff;
}
.hero-slider .slick-dots, .hero-slider-four .slick-dots {
  position: absolute;
  left: 0;
  bottom: 40px;
  width: 100%;
  padding: 0;
  margin: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .hero-slider .slick-dots, .hero-slider-four .slick-dots {
    bottom: 20px;
  }
}
@media only screen and (max-width: 767px) {
  .hero-slider .slick-dots, .hero-slider-four .slick-dots {
    bottom: 20px;
  }
}
@media only screen and (max-width: 575px) {
  .hero-slider .slick-dots, .hero-slider-four .slick-dots {
    bottom: 15px;
  }
}
.hero-slider .slick-dots li, .hero-slider-four .slick-dots li {
  margin: 0 5px;
}
.hero-slider .slick-dots li button, .hero-slider-four .slick-dots li button {
  display: block;
  padding: 0;
  width: 15px;
  height: 15px;
  border: 3px solid #061da4;
  background-color: #252525;
  text-indent: -9999px;
  border-radius: 50px;
}
@media only screen and (max-width: 767px) {
  .hero-slider .slick-dots li button, .hero-slider-four .slick-dots li button {
    border-width: 2px;
    width: 10px;
    height: 10px;
  }
}
.hero-slider .slick-dots li.slick-active button, .hero-slider-four .slick-dots li.slick-active button {
  width: 30px;
  background-color: #061da4;
}
@media only screen and (max-width: 767px) {
  .hero-slider .slick-dots li.slick-active button, .hero-slider-four .slick-dots li.slick-active button {
    width: 20px;
  }
}

.hero-slider-four img {
  width: 100%;
}

/*-- Hero Item --*/
.hero-item {
  width: 100%;
  height: 1075px;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  display: -webkit-box !important;
  display: -ms-flexbox !important;
  display: flex !important;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  position: relative;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  z-index: 1;
  margin-bottom: 3rem;
}
.hero-item.hero-item-2 {
  height: 860px;
}
@media only screen and (min-width: 1200px) and (max-width: 1499px) {
  .hero-item.hero-item-2 {
    height: 600px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .hero-item.hero-item-2 {
    height: 600px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .hero-item.hero-item-2 {
    height: 500px;
  }
}
@media only screen and (max-width: 767px) {
  .hero-item.hero-item-2 {
    height: 400px;
  }
}
.hero-item.hero-item-4 {
  height: 750px;
}
@media only screen and (min-width: 1200px) and (max-width: 1499px) {
  .hero-item.hero-item-4 {
    height: 500px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .hero-item.hero-item-4 {
    height: 400px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .hero-item.hero-item-4 {
    height: 300px;
  }
}
@media only screen and (max-width: 767px) {
  .hero-item.hero-item-4 {
    height: 300px;
  }
}
.hero-item.hero-item-4::before {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  content: "";
  background-color: #000000;
  opacity: 0.3;
  z-index: -1;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .hero-item.hero-item-5 {
    height: 550px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .hero-item.hero-item-5 {
    height: 400px;
  }
}
@media only screen and (max-width: 767px) {
  .hero-item.hero-item-5 {
    height: 400px;
  }
}
.hero-item.hero-item-6 {
  height: 740px;
}
@media only screen and (min-width: 1200px) and (max-width: 1499px) {
  .hero-item.hero-item-6 {
    height: 500px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .hero-item.hero-item-6 {
    height: 400px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .hero-item.hero-item-6 {
    height: 300px;
  }
}
@media only screen and (max-width: 767px) {
  .hero-item.hero-item-6 {
    height: 200px;
  }
}
.hero-item.hero-item-7 {
  height: 700px;
}
@media only screen and (min-width: 1200px) and (max-width: 1499px) {
  .hero-item.hero-item-7 {
    height: 500px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .hero-item.hero-item-7 {
    height: 400px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .hero-item.hero-item-7 {
    height: 300px;
  }
}
@media only screen and (max-width: 767px) {
  .hero-item.hero-item-7 {
    height: 200px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1499px) {
  .hero-item {
    height: 800px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .hero-item {
    height: 600px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .hero-item {
    height: 500px;
  }
}
@media only screen and (max-width: 479px) {
  .hero-item {
    height: 600px;
  }
}
@media only screen and (max-width: 575px) {
  .hero-item {
    height: 800px;
  }
}

/*-- Hero Content For Background Video --*/
.hero-content {
  text-align: center;
}
.hero-content h1 {
  font-size: 100px;
  line-height: 90px;
  font-weight: 300;
  font-family: "Saira Stencil One", cursive;
  color: #ffffff;
  text-shadow: -6px 4px 1px #252525;
}
@media only screen and (min-width: 1200px) and (max-width: 1499px) {
  .hero-content h1 {
    font-size: 90px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .hero-content h1 {
    font-size: 80px;
    line-height: 80px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .hero-content h1 {
    font-size: 50px;
    line-height: 50px;
  }
}
@media only screen and (max-width: 767px) {
  .hero-content h1 {
    font-size: 36px;
    line-height: 45px;
  }
}
.hero-content h2 {
  font-size: 100px;
  line-height: 90px;
  font-weight: 300;
  font-family: "Saira Stencil One", cursive;
  color: #ffffff;
  text-shadow: -6px 4px 1px #252525;
}
@media only screen and (min-width: 1200px) and (max-width: 1499px) {
  .hero-content h2 {
    font-size: 90px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .hero-content h2 {
    font-size: 80px;
    line-height: 80px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .hero-content h2 {
    font-size: 50px;
    line-height: 50px;
  }
}
@media only screen and (max-width: 767px) {
  .hero-content h2 {
    font-size: 36px;
    line-height: 45px;
  }
}
.hero-content .df-btn {
  background-color: #ffffff;
  font-size: 20px;
  color: #151515;
  border-radius: 50px;
  margin-top: 30px;
  line-height: 26px;
}

/*-- Hero Content Two For Hero Slider --*/
.hero-content-2.left {
  text-align: left;
}
.hero-content-2.center {
  text-align: center;
}
.hero-content-2.right {
  text-align: right;
}
.hero-content-2 > * {
  -webkit-animation-duration: 1s;
          animation-duration: 1s;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
  -webkit-animation-name: fadeInUp;
          animation-name: fadeInUp;
}
.hero-content-2 h1 {
  font-size: 100px;
  line-height: 90px;
  font-weight: 300;
  font-family: "Saira Stencil One", cursive;
  color: #ffffff;
  text-shadow: -6px 4px 1px #252525;
}
@media only screen and (min-width: 1200px) and (max-width: 1499px) {
  .hero-content-2 h1 {
    font-size: 90px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .hero-content-2 h1 {
    font-size: 80px;
    line-height: 80px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .hero-content-2 h1 {
    font-size: 50px;
    line-height: 50px;
  }
}
@media only screen and (max-width: 767px) {
  .hero-content-2 h1 {
    font-size: 36px;
    line-height: 45px;
  }
}
.hero-content-2 h3 {
  font-size: 40px;
  line-height: 90px;
  font-weight: 500;
  color: #ffffff;
  text-shadow: -4px 2px 1px #252525;
}
@media only screen and (min-width: 1200px) and (max-width: 1499px) {
  .hero-content-2 h3 {
    font-size: 36px;
    line-height: 50px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .hero-content-2 h3 {
    font-size: 34px;
    line-height: 46px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .hero-content-2 h3 {
    font-size: 28px;
    line-height: 36px;
  }
}
@media only screen and (max-width: 767px) {
  .hero-content-2 h3 {
    font-size: 24px;
    line-height: 30px;
  }
}

/*-- Hero Content Four For Hero Slider --*/
.hero-content-4.left {
  text-align: left;
}
.hero-content-4.center {
  text-align: center;
}
.hero-content-4.right {
  text-align: right;
}
.hero-content-4 > * {
  -webkit-animation-duration: 1s;
          animation-duration: 1s;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
  -webkit-animation-name: fadeInUp;
          animation-name: fadeInUp;
}
.hero-content-4 h1 {
  font-size: 70px;
  line-height: 70px;
  font-weight: 300;
  font-family: "Saira Stencil One", cursive;
  color: #ffffff;
  text-shadow: -6px 4px 1px #252525;
}
@media only screen and (min-width: 1200px) and (max-width: 1499px) {
  .hero-content-4 h1 {
    font-size: 60px;
    line-height: 60px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .hero-content-4 h1 {
    font-size: 50px;
    line-height: 50px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .hero-content-4 h1 {
    font-size: 40px;
    line-height: 40px;
  }
}
@media only screen and (max-width: 767px) {
  .hero-content-4 h1 {
    font-size: 28px;
    line-height: 30px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .hero-content-4 a.btn {
    font-size: 18px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .hero-content-4 a.btn {
    font-size: 16px;
  }
}
@media only screen and (max-width: 767px) {
  .hero-content-4 a.btn {
    font-size: 14px;
    margin-top: 15px;
  }
}

/*-- Hero Image --*/
.hero-front-image {
  position: absolute;
  top: -100px;
  right: -100px;
}
@media only screen and (min-width: 1201px) and (max-width: 1700px) {
  .hero-front-image {
    top: -110px;
    right: -35px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1499px) {
  .hero-front-image {
    top: 80px;
    right: 10px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .hero-front-image {
    top: -60px;
    right: 10px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .hero-front-image {
    top: -60px;
    right: 10px;
  }
}
@media only screen and (max-width: 767px) {
  .hero-front-image {
    position: static;
  }
}
.hero-front-image img {
  max-width: none;
}
@media only screen and (min-width: 1200px) and (max-width: 1499px) {
  .hero-front-image img {
    width: 300px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .hero-front-image img {
    width: 300px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .hero-front-image img {
    width: 200px;
  }
}
@media only screen and (max-width: 767px) {
  .hero-front-image img {
    width: 200px;
  }
}

/*-- Slide Content In Animation --*/
.slick-active {
  /*-- Hero Content Two For Hero Slider --*/
}
.slick-active .hero-content > * {
  -webkit-animation-name: fadeInUp;
          animation-name: fadeInUp;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
  -webkit-animation-duration: 1s;
          animation-duration: 1s;
}
.slick-active .hero-content > *:nth-child(1) {
  -webkit-animation-delay: 0.5s;
          animation-delay: 0.5s;
}
.slick-active .hero-content > *:nth-child(2) {
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
}
.slick-active .hero-content > *:nth-child(3) {
  -webkit-animation-delay: 1.5s;
          animation-delay: 1.5s;
}
.slick-active .hero-content > *:nth-child(4) {
  -webkit-animation-delay: 2s;
          animation-delay: 2s;
}
.slick-active .hero-content > *:nth-child(5) {
  -webkit-animation-delay: 2.5s;
          animation-delay: 2.5s;
}
.slick-active .hero-content > *:nth-child(6) {
  -webkit-animation-delay: 3s;
          animation-delay: 3s;
}

/*hero center mode*/
.hero-game-slide {
  max-width: 1100px;
  margin: auto;
}
.hero-game-slide .slick-slide {
  margin: 0 25px;
  padding: 30px 0;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .hero-game-slide .slick-slide {
    margin: 0 12px;
    padding: 15px 0;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .hero-game-slide .slick-slide {
    margin: 0 12px;
    padding: 15px 0;
  }
}
.hero-game-slide .slick-slide.slick-center .game-slide-item {
  -webkit-transform: scale(1.15);
      -ms-transform: scale(1.15);
          transform: scale(1.15);
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .hero-game-slide .slick-slide.slick-center .game-slide-item {
    -webkit-transform: scale(1.1);
        -ms-transform: scale(1.1);
            transform: scale(1.1);
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .hero-game-slide .slick-slide.slick-center .game-slide-item {
    -webkit-transform: scale(1.1);
        -ms-transform: scale(1.1);
            transform: scale(1.1);
  }
}
@media only screen and (max-width: 767px) {
  .hero-game-slide .slick-slide.slick-center .game-slide-item {
    -webkit-transform: scale(1.1);
        -ms-transform: scale(1.1);
            transform: scale(1.1);
  }
}
@media only screen and (max-width: 575px) {
  .hero-game-slide .slick-slide.slick-center .game-slide-item {
    -webkit-transform: scale(1.1);
        -ms-transform: scale(1.1);
            transform: scale(1.1);
  }
}
@media only screen and (max-width: 479px) {
  .hero-game-slide .slick-slide.slick-center .game-slide-item {
    -webkit-transform: scale(1.1);
        -ms-transform: scale(1.1);
            transform: scale(1.1);
  }
}

@media only screen and (max-width: 575px) {
  .single-hero-item-slider-area {
    max-width: 300px;
    width: 100%;
    margin: auto;
  }
}
@media only screen and (max-width: 767px) {
  .single-hero-item-slider-area .slick-slide {
    margin: 0 15px;
  }
}
@media only screen and (max-width: 575px) {
  .single-hero-item-slider-area .slick-slide.slick-active.slick-center .game-slide-item {
    -webkit-transform: scale(1) !important;
    -ms-transform: scale(1) !important;
    transform: scale(1) !important;
  }
}

/*-- Hero Slider Three CSS --*/
.hero-slider-three .slick-slide img {
  width: 100%;
}

/*----------------------------------------*/
/*  03. Download Area CSS
/*----------------------------------------*/
.download-area.section {
  position: relative;
  top: -80px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .download-area.section {
    top: -70px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .download-area.section {
    top: -40px;
  }
}
@media only screen and (max-width: 767px) {
  .download-area.section {
    top: -55px;
  }
}
.download-area.section .download-demo-content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  position: relative;
  -ms-flex-pack: distribute;
      justify-content: space-around;
  z-index: 999;
}
@media only screen and (max-width: 767px) {
  .download-area.section .download-demo-content {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
  }
}
.download-area.section .download-demo-content h3 {
  font-size: 40px;
  line-height: 45px;
  margin-bottom: 0;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .download-area.section .download-demo-content h3 {
    font-size: 30px;
  }
}
@media only screen and (max-width: 767px) {
  .download-area.section .download-demo-content h3 {
    font-size: 24px;
    line-height: 34px;
  }
}
@media only screen and (max-width: 479px) {
  .download-area.section .download-demo-content h3 {
    font-size: 24px;
    line-height: 34px;
  }
}
.download-area.section .download-demo-content h3 span {
  color: #061da4;
}
@media only screen and (max-width: 767px) {
  .download-area.section .download-demo-content ul {
    margin-top: 30px;
  }
}
.download-area.section .download-demo-content ul li {
  margin-bottom: 40px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .download-area.section .download-demo-content ul li {
    margin-bottom: 30px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .download-area.section .download-demo-content ul li {
    margin-bottom: 30px;
  }
}
@media only screen and (max-width: 767px) {
  .download-area.section .download-demo-content ul li {
    margin-bottom: 15px;
  }
}
.download-area.section .download-demo-content ul li:nth-child(2) {
  margin-left: 30px;
}
.download-area.section .download-demo-content ul li:nth-child(3) {
  margin-left: 120px;
}
.download-area.section .download-demo-content ul li:last-child {
  margin-bottom: 0;
}
.download-area.section .download-demo-content ul li a {
  font-size: 36px;
  line-height: 45px;
  position: relative;
  display: inline-block;
  font-family: "Nova Round", cursive;
}
@media only screen and (max-width: 767px) {
  .download-area.section .download-demo-content ul li a {
    font-size: 18px;
    line-height: 28px;
  }
}
.download-area.section .download-demo-content ul li a::before {
  content: "";
  position: absolute;
  top: 0;
  width: 100%;
  height: 2px;
  background-color: #b4bbe4;
  z-index: 99;
}
.download-area.section .download-demo-content ul li a::after {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 2px;
  background-color: #b4bbe4;
  z-index: 99;
}
.download-area.section .download-demo-content ul li a:hover::before {
  -webkit-animation: shake-horizontal 0.8s cubic-bezier(0.455, 0.03, 0.515, 0.955) infinite;
          animation: shake-horizontal 0.8s cubic-bezier(0.455, 0.03, 0.515, 0.955) infinite;
}
.download-area.section .download-demo-content ul li a:hover::after {
  -webkit-animation: shake-horizontal2 0.8s cubic-bezier(0.455, 0.03, 0.515, 0.955) infinite;
          animation: shake-horizontal2 0.8s cubic-bezier(0.455, 0.03, 0.515, 0.955) infinite;
}

/**
 * ----------------------------------------
 * animation shake-horizontal
 * ----------------------------------------
 */
@-webkit-keyframes shake-horizontal {
  0%, 100% {
    left: 0;
  }
  50% {
    left: 30px;
  }
}
@keyframes shake-horizontal {
  0%, 100% {
    left: 0;
  }
  50% {
    left: 30px;
  }
}
@-webkit-keyframes shake-horizontal2 {
  0%, 100% {
    right: 0;
  }
  50% {
    right: 30px;
  }
}
@keyframes shake-horizontal2 {
  0%, 100% {
    right: 0;
  }
  50% {
    right: 30px;
  }
}
/*----------------------------------------*/
/*  04. About CSS
/*----------------------------------------*/
/*-- About Image --*/
.about-image {
  position: relative;
  margin-left: -100px;
}
@media only screen and (min-width: 1200px) and (max-width: 1499px) {
  .about-image {
    margin-left: 0;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .about-image {
    margin-left: 0;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .about-image {
    margin-left: 0;
  }
}
@media only screen and (max-width: 767px) {
  .about-image {
    margin-left: 0;
  }
}
.about-image img {
  max-width: none;
}
@media only screen and (min-width: 1200px) and (max-width: 1499px) {
  .about-image img {
    width: 100%;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .about-image img {
    width: 100%;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .about-image img {
    width: 100%;
  }
}
@media only screen and (max-width: 767px) {
  .about-image img {
    width: 100%;
  }
}

/*-- About Content --*/
.about-content {
  margin-top: 200px;
  float: right;
}
@media only screen and (min-width: 1200px) and (max-width: 1499px) {
  .about-content {
    margin-top: 115px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .about-content {
    margin-top: 0px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .about-content {
    margin-top: 20px;
    float: left;
  }
}
@media only screen and (max-width: 767px) {
  .about-content {
    margin-top: 0px;
    float: left;
  }
}
.about-content h3 {
  text-transform: uppercase;
  font-weight: 400;
  margin-bottom: 15px;
  font-size: 38px;
  line-height: 45px;
  letter-spacing: 1px;
}
.about-content h3 span.color-red {
  color: #f64140;
}
.about-content h3 span.color-blue {
  color: #061da4;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .about-content h3 {
    font-size: 30px;
  }
}
@media only screen and (max-width: 767px) {
  .about-content h3 {
    font-size: 30px;
  }
}
@media only screen and (max-width: 479px) {
  .about-content h3 {
    font-size: 24px;
    line-height: 34px;
  }
}
.about-content p {
  font-size: 18px;
  line-height: 28px;
  margin-bottom: 20px;
  max-width: 530px;
}
.about-content p:last-child {
  margin-bottom: 0;
}
@media only screen and (max-width: 767px) {
  .about-content p {
    font-size: 16px;
    line-height: 24px;
  }
}
.about-content .btn {
  margin-top: 10px;
}

@media only screen and (min-width: 1500px) {
  .about-content h3, .about-content p {
    color: #fff;
  }
}

/*----------------------------------------*/
/*  05. Feature CSS
/*----------------------------------------*/
/*-- Feature Content --*/
.feature-content {
  padding-left: 10px;
}
@media only screen and (min-width: 1200px) and (max-width: 1499px) {
  .feature-content {
    padding-left: 0;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .feature-content {
    padding-left: 0;
  }
}
@media only screen and (max-width: 767px) {
  .feature-content {
    padding-left: 0;
  }
}
.feature-content h3 {
  text-transform: uppercase;
  font-weight: 400;
  margin-bottom: 15px;
  font-size: 40px;
  line-height: 45px;
  letter-spacing: 1px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .feature-content h3 {
    font-size: 30px;
  }
}
@media only screen and (max-width: 767px) {
  .feature-content h3 {
    font-size: 30px;
  }
}
@media only screen and (max-width: 479px) {
  .feature-content h3 {
    font-size: 24px;
    line-height: 34px;
  }
}
.feature-content h3 span.color-red {
  color: #f64140;
}
.feature-content h3 span.color-blue {
  color: #061da4;
}
.feature-content p {
  font-size: 18px;
  line-height: 28px;
  max-width: 545px;
}
@media only screen and (max-width: 767px) {
  .feature-content p {
    font-size: 16px;
    line-height: 24px;
  }
}

/*-- Feature Image --*/
.feature-image {
  position: relative;
  right: -70px;
}
@media only screen and (min-width: 1201px) and (max-width: 1700px) {
  .feature-image {
    right: 0;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1499px) {
  .feature-image {
    right: 0;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .feature-image {
    right: 0;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .feature-image {
    right: 0;
    margin-top: 30px;
  }
}
@media only screen and (max-width: 767px) {
  .feature-image {
    right: 0;
    margin-top: 30px;
  }
}
.feature-image img {
  max-width: 100%;
}
@media only screen and (min-width: 1200px) and (max-width: 1499px) {
  .feature-image img {
    width: 100%;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .feature-image img {
    width: 100%;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .feature-image img {
    width: 100%;
  }
}
@media only screen and (max-width: 767px) {
  .feature-image img {
    width: 100%;
  }
}

/*-- feature section 2 css --*/
.featured-title {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
@media only screen and (max-width: 767px) {
  .featured-title {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
  }
}
.featured-title h2 {
  font-size: 36px;
  line-height: 45px;
  color: #ffffff;
  padding: 20px 135px;
  background-color: #081b1f;
  margin-bottom: 0;
}
@media only screen and (min-width: 1200px) and (max-width: 1499px) {
  .featured-title h2 {
    padding: 20px 100px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .featured-title h2 {
    padding: 20px 60px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .featured-title h2 {
    padding: 20px 60px;
  }
}
@media only screen and (max-width: 767px) {
  .featured-title h2 {
    padding: 20px 30px;
    font-size: 24px;
    line-height: 30px;
  }
}
.featured-title a {
  font-size: 18px;
  line-height: 70px;
  font-family: "Nova Round", cursive;
  text-decoration: underline;
  margin-right: 60px;
}
@media only screen and (max-width: 767px) {
  .featured-title a {
    margin-right: 15px;
    margin-left: 0px;
  }
}
@media only screen and (max-width: 479px) {
  .featured-title a {
    margin-right: 0;
    margin-left: 15px;
  }
}

.single-featured {
  position: relative;
  overflow: hidden;
}
.single-featured a {
  display: block;
}
.single-featured a img {
  -webkit-transition: all 3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  -o-transition: all 3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transition: all 3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.single-featured:hover img {
  -webkit-transform: scale(1.15);
      -ms-transform: scale(1.15);
          transform: scale(1.15);
}
/*----------------------------------------*/
/*  19. Footer CSS
/*----------------------------------------*/
.footer-section {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  position: relative;
  z-index: 1;
}
.footer-section.style-2::before {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  content: "";
  background-color: #000000;
  opacity: 0.5;
  z-index: -1;
}

/*-- Footer Widget --*/
@media only screen and (max-width: 767px) {
  .footer-widget {
    text-align: center;
  }
}
.footer-widget .footer-nav ul {
  text-align: center;
}
@media only screen and (max-width: 767px) {
  .footer-widget .footer-nav ul {
    margin: 20px 0;
    margin-bottom: 10px;
  }
}
.footer-widget .footer-nav ul li {
  display: inline-block;
  margin-right: 50px;
}
@media only screen and (min-width: 1200px) and (max-width: 1499px) {
  .footer-widget .footer-nav ul li {
    margin-right: 30px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .footer-widget .footer-nav ul li {
    margin-right: 30px;
  }
}
@media only screen and (max-width: 767px) {
  .footer-widget .footer-nav ul li {
    margin-right: 10px;
  }
}
.footer-widget .footer-nav ul li:last-child {
  margin-right: 0;
}
.footer-widget .footer-nav ul li a {
  font-size: 18px;
  line-height: 26px;
  color: #ffffff;
  display: block;
  font-family: "Nova Round", cursive;
}
.footer-widget .footer-nav ul li a:hover {
  color: #f64140;
}

/*-- Footer Social --*/
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .footer-social {
    text-align: center;
    margin: 30px 0;
  }
}
.footer-social span {
  font-size: 20px;
  line-height: 28px;
  color: #ffffff;
  font-family: "Nova Round", cursive;
  margin-right: 30px;
}
@media only screen and (min-width: 1200px) and (max-width: 1499px) {
  .footer-social span {
    margin-right: 17px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .footer-social span {
    margin-right: 10px;
  }
}
@media only screen and (max-width: 767px) {
  .footer-social span {
    margin-right: 0px;
    margin-bottom: 10px;
    display: block;
  }
}
.footer-social ul {
  display: inline-block;
}
.footer-social ul li {
  display: inline-block;
  margin-right: 40px;
}
@media only screen and (min-width: 1200px) and (max-width: 1499px) {
  .footer-social ul li {
    margin-right: 20px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .footer-social ul li {
    margin-right: 20px;
  }
}
.footer-social ul li:last-child {
  margin-right: 0;
}
.footer-social ul li a {
  font-size: 18px;
  line-height: 26px;
  color: #ffffff;
  display: block;
}
.footer-social ul li a:hover {
  color: #f64140;
}

/*-- Footer News Letter --*/
.footer-newsletter {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}
.footer-newsletter input {
  width: calc(100% - 40px);
  max-width: 250px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  background-color: transparent;
  color: #ffffff;
  line-height: 24px;
  padding: 7px 15px;
  font-size: 13px;
}
.footer-newsletter button {
  width: 40px;
  height: 40px;
  border: none;
  background-color: #061da4;
  color: #ffffff;
}

/*-- Footer Bottom --*/
.footer-bottom {
  padding-top: 20px;
  padding-bottom: 25px;
  border-top: 1px solid #5e6bb7;
}
.footer-bottom.border-color {
  border-color: #6c7676;
}
@media only screen and (max-width: 767px) {
  .footer-bottom {
    padding: 15px 0;
  }
}

/*-- Copyright --*/
.copyright p {
  font-size: 18px;
  line-height: 30px;
  color: #d8d8d8;
  font-weight: 300;
  color: #c4c2c2;
}
@media only screen and (max-width: 767px) {
  .copyright p {
    font-size: 13px;
  }
}
.copyright p a:hover {
  color: #f64140;
}