/*-----------------------------------------
[Table Of Content]

    01. Typography CSS
    02. Color CSS
    03. Common Style CSS
        3.0 - Template Spacing
        3.1 - Buttons Style
        3.2 - Background Image
        3.3 - Overflow
        3.4 - Section title Style
        3.5 - List Style
        3.6 - Site Content Wrapper
        3.7 - Scroll Top Button
        3.8 - LightSlider Customization
        3.9 - Tippy Customization
        3.10 - Magnific JS Customization
        3.11 - Blockquote Style
        3.12 - Nice Select Customization
             - Preloader Style Css
    04. Header Area Style CSS
        4.1 - Main Navigation CSS
    05. Off Canvas Style CSS
    06. Search Box Style CSS
    07. About Style CSS
    08. Portfolio Style CSS
    09. Skills Style CSS
    10. Service Style CSS
    11. Testimonial Style CSS
    12. Brand Logo Style CSS
    13. Call to Action Style CSS
    41. About Page Style Css
    58. Footer Style CSS
/*=====================================
   01. Typography CSS
===================================== */
body {
  color: #555;
  font-size: 1.125rem;
  font-family: "Karla", sans-serif;
  font-weight: 400;
  line-height: 1.6;
  margin: 0;
}
@media only screen and (max-width: 575.98px) {
  body {
    font-size: 1rem;
  }
}

/* Remove text-shadow in selection highlight. */
::-moz-selection {
  background: #f2b636;
  color: #FFFFFF;
  text-shadow: none;
}
::selection {
  background: #f2b636;
  color: #FFFFFF;
  text-shadow: none;
}

/* A better looking default horizontal rule */
hr {
  border: 0;
  border-top: 1px solid #eee;
  -webkit-box-sizing: content-box;
          box-sizing: content-box;
  display: block;
  height: 1px;
  margin: 1em 0;
  padding: 0;
  overflow: visible;
}

/* Remove the gap between audio, canvas, iframes,images, videos */
audio,
canvas,
iframe,
img,
svg,
video {
  vertical-align: middle;
}

/* Remove default fieldset styles. */
fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}

legend {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  color: inherit;
  display: table;
  max-width: 100%;
  padding: 0;
  white-space: normal;
}

/* Allow only vertical resizing of textareas. */
textarea {
  resize: vertical;
}

/* Anchor Tag Default Style */
a {
  -webkit-transition: 0.4s;
  transition: 0.4s;
  outline: none;
  text-decoration: none;
}
a:hover, a:active, a:focus {
  color: inherit;
  outline: none;
  text-decoration: none;
}

textarea:focus, textarea:active, input:focus, input:active {
  outline: none;
}

/* Heading Default Style */
h1,
.h1,
h2,
.h2,
h3,
.h3,
h4,
.h4,
h5,
.h5,
h6,
.h6 {
  font-weight: 400;
  color: #182141;
  line-height: 1.2;
}

h1, .h1 {
  font-size: 3.75rem;
  margin-bottom: 6px;
  margin-top: -15px;
}
@media (max-width: 1200px) {
  h1, .h1 {
    font-size: calc(1.5rem + 3vw);
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px), only screen and (min-width: 768px) and (max-width: 991.98px) {
  h1, .h1 {
    margin-top: -12px;
  }
}
@media only screen and (max-width: 767.98px) {
  h1, .h1 {
    margin-top: -8px;
  }
}

h2, .h2 {
  font-size: 3.5rem;
  margin-bottom: 6px;
  margin-top: -14px;
}
@media (max-width: 1200px) {
  h2, .h2 {
    font-size: calc(1.475rem + 2.7vw);
  }
}
@media only screen and (min-width: 768px) and (max-width: 991.98px) {
  h2, .h2 {
    margin-top: -10px;
  }
}
@media only screen and (max-width: 767.98px) {
  h2, .h2 {
    margin-top: -7px;
  }
}

h3, .h3 {
  font-size: 3rem;
  margin-bottom: 10px;
  margin-top: -12px;
}
@media (max-width: 1200px) {
  h3, .h3 {
    font-size: calc(1.425rem + 2.1vw);
  }
}
@media only screen and (min-width: 768px) and (max-width: 991.98px) {
  h3, .h3 {
    margin-top: -9px;
  }
}
@media only screen and (max-width: 767.98px) {
  h3, .h3 {
    margin-top: -6px;
  }
}

h4, .h4 {
  font-size: 2rem;
  margin-bottom: 14px;
  margin-top: -8px;
}
@media (max-width: 1200px) {
  h4, .h4 {
    font-size: calc(1.325rem + 0.9vw);
  }
}
@media only screen and (min-width: 768px) and (max-width: 991.98px) {
  h4, .h4 {
    margin-top: -6px;
  }
}
@media only screen and (max-width: 767.98px) {
  h4, .h4 {
    margin-top: -5px;
  }
}

h5, .h5 {
  font-size: 1.625rem;
  margin-bottom: 15px;
}
@media (max-width: 1200px) {
  h5, .h5 {
    font-size: calc(1.2875rem + 0.45vw);
  }
}

h6, .h6 {
  font-size: 1.25rem;
  margin-bottom: 12px;
}

/* Paragraph Margin */
p {
  margin-bottom: 15px;
}
p:last-child {
  margin-bottom: 0;
}

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

strong, b {
  font-weight: 700;
}

figure {
  margin: 0;
}

img {
  max-width: 100%;
}

button {
  background-color: transparent;
  border: none;
  cursor: pointer;
  outline: none;
  padding: 0;
  -webkit-box-shadow: none;
          box-shadow: none;
  -webkit-transition: 0.4s;
  transition: 0.4s;
}
button:active, button:focus {
  outline: none;
  -webkit-box-shadow: none;
          box-shadow: none;
}

[data-mfp-src], .btn-img-popup {
  cursor: -webkit-zoom-in;
  cursor: zoom-in;
}

.parallax {
  background-repeat: no-repeat;
}

.form-message.alert {
  margin-top: 10px;
}

.font-weight-bold {
  font-weight: 700 !important;
}

/*==========================
02. Color CSS
============================*/
.bg-white {
  background-color: #FFFFFF;
}
.bg-softWhite {
  background-color: #f8f8f8 !important;
}
.bg-brand {
  background-color: #f2b636;
}
.bg-secondary {
  background-color: #182141 !important;
}
.bg-secondary-soft {
  background-color: #263466;
}
.bg-secondary-2 {
  background-color: #496189;
}
.bg-blackSoft {
  background-color: #222222;
}

.text-brand {
  color: #f2b636;
}

/*============================
03. Common Style CSS
==============================*/
/*------------------
3.1 - Buttons Style
--------------------*/
.btn-group .btn {
  margin-right: 15px;
}
.btn-group .btn:last-child {
  margin-right: 0;
}

.btn {
  border-radius: 0;
  color: #182141;
  display: inline-block;
  padding: 0;
  font-size: 18px;
  -webkit-transition: 0.4s ease-in;
  transition: 0.4s ease-in;
  outline: none;
  position: relative;
}
.btn:focus, .btn:active {
  outline: none;
  -webkit-box-shadow: none;
          box-shadow: none;
}
.btn-bottom:before {
  background-color: #f2b636;
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  -webkit-transition: 0.4s;
  transition: 0.4s;
  height: 1px;
  width: 100%;
}
.btn-bottom:hover:before {
  bottom: -10px;
}
.btn-bordered {
  border: 3px solid #f2b636;
  border-radius: 50px;
  color: #182141;
  display: inline-block;
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
  padding: 20px 40px;
  letter-spacing: 1.75px;
}
@media only screen and (max-width: 767.98px) {
  .btn-bordered {
    padding: 15px 25px;
  }
}
.btn-bordered:hover {
  background-color: #f2b636;
  color: #FFFFFF;
}
.btn-secondary {
  border: 3px solid #182141;
  background-color: #182141;
  border-radius: 50px;
  color: #f2b636;
  display: inline-block;
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
  padding: 20px 40px;
  letter-spacing: 1.75px;
}
@media only screen and (max-width: 767.98px) {
  .btn-secondary {
    padding: 15px 25px;
  }
}
.btn-secondary:hover {
  background-color: transparent;
  border-color: #f2b636;
  color: #182141;
}
.btn-brand {
  background-color: #f2b636;
  border: 3px solid #f2b636;
  border-radius: 50px;
  color: #182141;
  display: inline-block;
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
  padding: 20px 40px;
  letter-spacing: 1.75px;
}
@media only screen and (max-width: 767.98px) {
  .btn-brand {
    padding: 15px 25px;
  }
}
.btn-brand:hover {
  background-color: transparent;
  color: #f2b636;
}
.btn-xs {
  padding: 8px 15px;
  font-size: 13px;
}
.btn-md {
  padding: 15px 25px;
}
.btn-lg {
  padding: 18px 30px;
}

.btn.btn-bordered:hover {
  background-color: #f2b636;
  color: #FFFFFF;
}

/*----------------------
3.2 - Background Image
-----------------------*/
.bg-img {
  background: no-repeat center center;
  background-size: cover;
}
.bg-img-tr {
  background: no-repeat top right;
}
.bg-img-tl {
  background: no-repeat top left;
}
.bg-img-br {
  background: no-repeat bottom right;
}
.bg-img-bl {
  background: no-repeat bottom left;
}
.bg-img-nr {
  background: no-repeat center center;
  background-size: contain;
}

/*-----------------
3.3 - Overflow
-------------------*/
.fix {
  overflow: hidden;
}
.fix-x {
  overflow-x: hidden;
}
.fix-y {
  overflow-y: hidden;
}

/*-------------------------
3.4 - Section title Style
--------------------------*/
.section-title {
  margin-bottom: 75px;
}
@media only screen and (min-width: 768px) and (max-width: 991.98px) {
  .section-title {
    margin-bottom: 48px;
  }
}
@media only screen and (max-width: 767.98px) {
  .section-title {
    margin-bottom: 32px;
  }
}
.section-title h5 {
  color: #f2b636;
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 28px;
}
@media only screen and (max-width: 767.98px) {
  .section-title h5 {
    margin-bottom: 18px;
  }
}
.section-title h2 {
  margin-bottom: 0;
}
.section-title p {
  margin-top: 27px;
  margin-bottom: 0;
}
@media only screen and (max-width: 767.98px) {
  .section-title p {
    margin-top: 14px;
  }
}
.section-title .btn {
  margin-top: 25px;
}
@media only screen and (max-width: 767.98px) {
  .section-title .btn {
    margin-top: 20px;
  }
}
.section-title--white h2 {
  color: #FFFFFF;
}
.section-title--brand h2 {
  color: #f2b636;
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px), only screen and (min-width: 1200px) {
  .section-title--wp {
    margin-bottom: 83px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991.98px) {
  .section-title--wp {
    margin-bottom: 52px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991.98px) {
  .section-title--last-btn {
    margin-bottom: 60px;
  }
}
@media only screen and (max-width: 767.98px) {
  .section-title--last-btn {
    margin-bottom: 40px;
  }
}

/*-------------------------
3.5 - List Style
--------------------------*/
.ht-list li {
  position: relative;
  padding-left: 30px;
  margin-bottom: 15px;
}
.ht-list li:last-child {
  margin-bottom: 0;
}
.ht-list li:before {
  content: "\f00c";
  font-family: "FontAwesome";
  color: #182141;
  position: absolute;
  font-weight: 300;
  font-size: 14px;
  top: 2px;
  left: 0;
}
.ht-list-brand li:before {
  color: #01ced1;
}
.ht-list-number {
  margin-left: 15px;
}
.ht-list-number li {
  list-style: decimal;
  padding-left: 10px;
}
.ht-list-number li:before {
  display: none;
}

/*--------------------------------
3.6 - Site Content Wrapper
----------------------------------*/
.site-wrapper {
  background-color: #FFFFFF;
  position: relative;
  overflow: hidden;
  z-index: 1;
}
@media only screen and (min-width: 1200px) {
  .site-wrapper--left-header .container-fluid {
    padding: 0 100px;
  }
}

@media screen and (min-width: 1200px) {
  .container {
    max-width: 1200px;
  }
}
.container-fluid {
  padding: 0 15px;
}
@media screen and (min-width: 1201px) {
  .container-fluid {
    padding: 0 100px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991.98px) {
  .container-fluid {
    max-width: 720px;
    margin: auto;
  }
}

/*--------------------------------
3.7 - Scroll Top Button
----------------------------------*/
.btn-scroll-top {
  background-color: #6FD1D7;
  border-radius: 50%;
  -webkit-box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);
          box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);
  color: #FFFFFF;
  cursor: pointer;
  font-size: 1.5625rem;
  display: block;
  text-align: center;
  line-height: 60px;
  position: fixed;
  bottom: -60px;
  right: 30px;
  height: 60px;
  width: 60px;
  z-index: 999;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: 0.4s;
  transition: 0.4s;
}
@media (max-width: 1200px) {
  .btn-scroll-top {
    font-size: calc(1.28125rem + 0.375vw);
  }
}
@media only screen and (max-width: 767.98px) {
  .btn-scroll-top {
    line-height: 50px;
    height: 50px;
    width: 50px;
  }
}
.btn-scroll-top:hover {
  background-color: #FFE0C5;
  color:#01CED1;
}
.btn-scroll-top.show {
  bottom: 120px;
  opacity: 1;
  visibility: visible;
}



/*===========================
4.1 - Main Navigation CSS
=============================*/
.main-menu {
  -ms-flex-line-pack: center;
      align-content: center;
}
.main-menu > li {
  margin-right: 30px;
}
.main-menu > li:last-child {
  margin-right: 0;
}
.main-menu > li > a {
  color: #182141;
  display: block;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 1.62px;
  text-transform: uppercase;
  padding-bottom: 8px;
  position: relative;
}
.main-menu > li > a:after {
  background-color: #f2b636;
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 1px;
  width: 100%;
  -webkit-transition: 0.4s;
  transition: 0.4s;
  -webkit-transform: translateY(10px);
          transform: translateY(10px);
  opacity: 0;
  visibility: hidden;
}
.main-menu > li:hover > a:after, .main-menu > li.active > a:after {
  -webkit-transform: none;
          transform: none;
  opacity: 1;
  visibility: visible;
}

.has-submenu {
  padding-right: 10px;
  position: relative;
}
.has-submenu > a {
  position: relative;
}
.has-submenu > a:before {
  content: "\f107";
  color: #182141;
  font-size: 13px;
  line-height: 1.2;
  font-family: "FontAwesome";
  position: absolute;
  right: -12px;
  top: 0;
}
.has-submenu:hover > .submenu-nav {
  -webkit-transform: none;
          transform: none;
  opacity: 1;
  visibility: visible;
  pointer-events: visible;
}
.has-submenu:hover .menu-content .menu-content-inner h4, .has-submenu:hover .menu-content .menu-content-inner .btn-brand {
  -webkit-transform: none !important;
          transform: none !important;
}
.has-submenu .submenu-nav {
  background-color: #FFFFFF;
  border: 1px solid #eee;
  border-bottom: 2px solid #f2b636;
  padding: 20px 0 25px;
  position: absolute;
  left: -25px;
  top: 100%;
  -webkit-transform: translateY(50px);
          transform: translateY(50px);
  -webkit-transition: 0.4s;
  transition: 0.4s;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  min-width: 250px;
  margin-top: 54px;
  z-index: 99;
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px) {
  .has-submenu .submenu-nav {
    min-width: 210px;
  }
}
.has-submenu .submenu-nav:before {
  content: "";
  position: absolute;
  height: 56px;
  width: 100%;
  left: 0;
  bottom: 100%;
}
.has-submenu .submenu-nav > li {
  padding: 6px 25px;
}
.has-submenu .submenu-nav > li:first-child {
  padding-top: 0;
}
.has-submenu .submenu-nav > li:last-child {
  padding-bottom: 0;
}
.has-submenu .submenu-nav > li a {
  color: #878c9b;
  font-weight: 400;
  font-size: 15px;
  letter-spacing: inherit;
  text-transform: capitalize;
}
.has-submenu .submenu-nav > li:hover > a {
  color: #f2b636;
}
.has-submenu .submenu-nav > li.has-submenu {
  position: relative;
}
.has-submenu .submenu-nav > li.has-submenu a:before {
  display: none;
}
.has-submenu .submenu-nav > li.has-submenu:hover > .submenu-nav {
  -webkit-transform: none;
          transform: none;
  opacity: 1;
  visibility: visible;
  pointer-events: visible;
}
.has-submenu .submenu-nav > li.has-submenu:after {
  content: "\f105";
  color: #878c9b;
  font-size: 15px;
  line-height: 1.2;
  font-family: "FontAwesome";
  position: absolute;
  right: 25px;
  top: 12px;
}
.has-submenu .submenu-nav > li.has-submenu .submenu-nav {
  left: 100%;
  top: 0;
  margin-top: -15px;
}
.has-submenu .submenu-nav-mega {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding: 0;
  width: 100%;
}
@media only screen and (min-width: 1200px) and (max-width: 1599.98px) {
  .has-submenu .submenu-nav-mega {
    width: 1000px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px) {
  .has-submenu .submenu-nav-mega {
    width: 830px;
  }
}
.has-submenu .submenu-nav-mega .mega-menu-item {
  border-right: 1px solid #eee;
  padding: 25px 40px !important;
  -ms-flex-preferred-size: 25%;
      flex-basis: 25%;
}
.has-submenu .submenu-nav-mega .mega-menu-item:last-child {
  border-right: 0;
}
.has-submenu .submenu-nav-mega .mega-menu-item > a {
  color: #182141 !important;
  display: block;
  font-weight: 700;
  font-size: 13px;
  text-transform: uppercase;
  margin-bottom: 15px;
}
.has-submenu .submenu-nav-mega .mega-menu-item ul li {
  position: relative;
  padding: 6px 0;
}
.has-submenu .submenu-nav-mega .mega-menu-item ul li a:hover {
  color: #f2b636;
}
.has-submenu .submenu-nav-mega .mega-menu-item ul li.feature a {
  position: relative;
}
.has-submenu .submenu-nav-mega .mega-menu-item ul li.feature a:before {
  content: "\f005";
  position: absolute;
  font-family: "FontAwesome";
  color: #f2b636;
  right: -20px;
  top: 1px;
  font-size: 12px;
}
.has-submenu .submenu-nav-mega .mega-menu-item ul li.new a {
  position: relative;
}
.has-submenu .submenu-nav-mega .mega-menu-item ul li.new a:after {
  background-color: #ff0000;
  content: "New";
  color: #FFFFFF;
  font-size: 13px;
  font-weight: 600;
  border-radius: 2px;
  position: absolute;
  top: 0;
  right: -38px;
  line-height: 1;
  padding: 2px 3px;
}
.has-submenu .submenu-nav-mega .mega-menu-item ul li:hover .menu-thumb {
  -webkit-transform: translateX(0);
          transform: translateX(0);
  opacity: 1;
  visibility: visible;
}
.has-submenu .submenu-nav-mega .mega-menu-item.menu-content {
  padding: 0 !important;
  margin: -1px;
}
.has-submenu .submenu-nav-mega .mega-menu-item.menu-content .menu-content-inner {
  background-image: url("../img/extra/mega-menu-bg.jpg");
  background-size: cover;
  background-position: center center;
  height: 100%;
  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-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  text-align: center;
  padding: 15px;
}
.has-submenu .submenu-nav-mega .mega-menu-item.menu-content .menu-content-inner h4, .has-submenu .submenu-nav-mega .mega-menu-item.menu-content .menu-content-inner .btn-brand {
  color: #FFFFFF;
  -webkit-transition: 0.4s;
  transition: 0.4s;
  -webkit-transition-delay: 0.3s;
          transition-delay: 0.3s;
}
.has-submenu .submenu-nav-mega .mega-menu-item.menu-content .menu-content-inner h4 {
  -webkit-transform: translateY(-80%);
          transform: translateY(-80%);
}
.has-submenu .submenu-nav-mega .mega-menu-item.menu-content .menu-content-inner h4 span {
  font-family: "Playfair Display", serif;
  color: #f2b636;
  font-style: italic;
}
.has-submenu .submenu-nav-mega .mega-menu-item.menu-content .menu-content-inner .btn-brand {
  margin-top: 30px;
  font-weight: 700;
  -webkit-transform: translateY(80%);
          transform: translateY(80%);
}
.has-submenu.full-width {
  position: static;
}

.menu-thumb {
  border-radius: 5px;
  -webkit-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
          box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
  overflow: hidden;
  position: absolute;
  -webkit-transform: translateX(30px);
          transform: translateX(30px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  -webkit-transition: 0.3s;
  transition: 0.3s;
  top: -10px;
  right: -80px;
  z-index: 1;
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px), only screen and (min-width: 1200px) and (max-width: 1599.98px) {
  .menu-thumb {
    right: 0;
    top: auto;
    bottom: 100%;
  }
}

/* Responsive Mobile Menu */
.res-mobile-menu {
  margin: 0 -10px;
}
.res-mobile-menu .slicknav_btn {
  display: none;
}
.res-mobile-menu .slicknav_menu {
  padding: 0;
}
.res-mobile-menu .slicknav_nav {
  background-color: #182141;
  display: block !important;
  padding: 20px 30px;
}
.res-mobile-menu .slicknav_nav li {
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  position: relative;
}
.res-mobile-menu .slicknav_nav li:last-child {
  border-bottom: 0;
}
.res-mobile-menu .slicknav_nav li a {
  color: #FFFFFF;
  font-size: 18px;
  padding: 12px 0;
  margin: 0;
  text-transform: capitalize;
  position: relative;
}
.res-mobile-menu .slicknav_nav li a .slicknav_arrow {
  background-color: hsla(0deg, 0%, 100%, 0.1);
  color: #FFFFFF;
  font-size: 14px;
  display: block;
  text-align: center;
  margin: 0;
  position: absolute;
  right: 0;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  height: 35px;
  line-height: 35px;
  width: 35px;
}
.res-mobile-menu .slicknav_nav li a a {
  padding: 0;
}
.res-mobile-menu .slicknav_nav li a:hover {
  color: #FFFFFF;
  background-color: transparent;
}
.res-mobile-menu .slicknav_nav li img {
  display: none;
}
.res-mobile-menu .slicknav_nav li div {
  display: none;
}
.res-mobile-menu .slicknav_nav li ul {
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  margin: 0;
  padding-left: 10px;
}
.res-mobile-menu .slicknav_nav li ul li a {
  font-size: 15px;
  color: rgba(255, 255, 255, 0.7);
}
.res-mobile-menu .slicknav_nav .slicknav_open > .slicknav_item {
  position: relative;
}
.res-mobile-menu .slicknav_nav .slicknav_open > .slicknav_item .slicknav_arrow {
  background-color: #f2b636;
}

/*==========================
3.0 - Template Spacing
============================*/
.sm-top {
  margin-top:60px;
}
@media only screen and (min-width: 768px) and (max-width: 991.98px) {
  .sm-top {
    margin-top: 90px;
  }
}
@media only screen and (max-width: 767.98px) {
  .sm-top {
    margin-top: 60px;
  }
}

.sm-bottom {
  margin-bottom: 120px;
}
@media only screen and (min-width: 768px) and (max-width: 991.98px) {
  .sm-bottom {
    margin-bottom: 90px;
  }
}
@media only screen and (max-width: 767.98px) {
  .sm-bottom {
    margin-bottom: 60px;
  }
}

.sm-top-wp, .coming-soon-body .newsletter-form-wrap .form-input-item {
  margin-top: 115px;
}
@media only screen and (min-width: 768px) and (max-width: 991.98px) {
  .sm-top-wp, .coming-soon-body .newsletter-form-wrap .form-input-item {
    margin-top: 85px;
  }
}
@media only screen and (max-width: 767.98px) {
  .sm-top-wp, .coming-soon-body .newsletter-form-wrap .form-input-item {
    margin-top: 55px;
  }
}

.sm-y-wp {
  margin: 115px 0;
}
@media only screen and (min-width: 768px) and (max-width: 991.98px) {
  .sm-y-wp {
    margin: 85px 0;
  }
}
@media only screen and (max-width: 767.98px) {
  .sm-y-wp {
    margin: 60px 0;
  }
}

.sp-top {
  padding-top: 120px;
}
@media only screen and (min-width: 768px) and (max-width: 991.98px) {
  .sp-top {
    padding-top: 90px;
  }
}
@media only screen and (max-width: 767.98px) {
  .sp-top {
    padding-top: 60px;
  }
}

.sp-y {
  padding: 60px 0 20px;
}
@media only screen and (min-width: 768px) and (max-width: 991.98px) {
  .sp-y {
    padding: 90px 0;
  }
}
@media only screen and (max-width: 767.98px) {
  .sp-y {
    padding: 60px 0;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991.98px) {
  .sp-y-md {
    padding: 90px 0;
  }
}

@media only screen and (max-width: 767.98px) {
  .sp-y-sm {
    padding: 60px 0;
  }
}

.row.mtn-30 {
  margin-top: -30px;
}

@media only screen and (max-width: 767.98px) {
  .row.mtn-sm-30 {
    margin-top: -30px !important;
  }
}

.row.mtn-35 {
  margin-top: -35px;
}

.row.mtn-75 {
  margin-top: -75px;
}

.row.mbn-40 {
  margin-bottom: -40px;
}

.container {
  position: relative;
}

/*==========================
04. Header Area Style CSS
===========================*/
.header-area {
  padding: 10px 0;
}


@media only screen and (max-width: 767.98px) {
  .header-area {
    padding: 25px 0;
  }
}
.header-area.sticky-header {
  -webkit-transition: 0.4s;
  transition: 0.4s;
    position: absolute;
}
.header-area.sticky-header.sticky {
/*   background-color: #FFFFFF;
  -webkit-box-shadow: 0 8px 20px 0 rgba(0, 0, 0, 0.1);
          box-shadow: 0 8px 20px 0 rgba(0, 0, 0, 0.1); */
  border: 0 !important;
  position: absolute;
  left: 0;
  top: 0;
  padding: 20px 0;
  width: 100%;
  z-index: 99;
}
.header-area.sticky-header.sticky .main-menu > li a:before {
  color: #182141;
}
.header-area.sticky-header.sticky .main-menu > li > .submenu-nav {
  margin-top: 24px;
}
.header-area.sticky-header.sticky .main-menu > li > .submenu-nav:before {
  height: 24px;
}
.header-area.sticky-header.sticky .header-action-area button, .header-area.sticky-header.sticky .header-action-area a {
  color: #182141;
}
.header-area.sticky-header.sticky .header-action-area button.btn-menu span, .header-area.sticky-header.sticky .header-action-area a.btn-menu span {
  background-color: #182141;
}
.header-area.transparent:not(.sticky) {
  color: #FFFFFF;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  z-index: 9;
}
.header-area.transparent:not(.sticky) .header-logo-area .logo-main {
  display: none;
}
.header-area.transparent:not(.sticky) .header-logo-area .logo-light {
  display: block;
}
.header-area.transparent:not(.sticky) .main-menu > li > a {
  color: #FFFFFF;
}
.header-area.transparent:not(.sticky) .main-menu > li > a:before {
  color: #FFFFFF;
}
.header-area.transparent:not(.sticky) .header-action-area button, .header-area.transparent:not(.sticky) .header-action-area a {
  color: #FFFFFF;
}
.header-area.transparent:not(.sticky) .header-action-area .btn-menu span {
  background-color: #FFFFFF;
}
.header-area.christmas:not(.sticky) {
  background-color: rgba(255, 255, 255, 0.5);
  padding: 30px 0;
}
.header-area.christmas:not(.sticky) .header-logo-area .logo-main {
  display: block;
}
.header-area.christmas:not(.sticky) .header-logo-area .logo-light {
  display: none;
}
.header-area.christmas:not(.sticky) .main-menu > li > a {
  color: #000000;
}
.header-area.christmas:not(.sticky) .main-menu > li > a:before {
  color: #000000;
}
.header-area.christmas:not(.sticky) .main-menu .has-submenu .submenu-nav {
  margin-top: 34px;
}
.header-area.christmas:not(.sticky) .main-menu .has-submenu .submenu-nav:before {
  height: 34px;
}
.header-area.christmas:not(.sticky) .header-action-area button, .header-area.christmas:not(.sticky) .header-action-area a {
  color: #000000;
}
.header-area.christmas:not(.sticky) .header-action-area .btn-menu span {
  background-color: #000000;
}
.header-area.fixed-left {
  background-color: #FFFFFF;
  -webkit-box-shadow: 3px 1px 29px rgba(0, 0, 0, 0.12);
          box-shadow: 3px 1px 29px rgba(0, 0, 0, 0.12);
  padding: 100px 60px;
  position: fixed;
  height: 100vh;
  max-width: 300px;
  width: 100%;
  z-index: 99999;
}
@media only screen and (min-width: 1200px) and (max-width: 1599.98px), only screen and (min-width: 992px) and (max-width: 1199.98px) {
  .header-area.fixed-left {
    padding: 60px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px), only screen and (min-width: 768px) and (max-width: 991.98px), only screen and (max-width: 767.98px) {
  .header-area.fixed-left {
    position: static;
    height: auto;
    margin: auto;
    padding: 25px 15px;
    -webkit-box-shadow: none;
            box-shadow: none;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px) {
  .header-area.fixed-left {
    max-width: 960px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991.98px) {
  .header-area.fixed-left {
    max-width: 720px;
  }
}
@media only screen and (max-width: 767.98px) {
  .header-area.fixed-left {
    max-width: 540px;
  }
}
.header-area.fixed-left .header-left-fix-inner {
  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: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  height: 100%;
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px), only screen and (min-width: 768px) and (max-width: 991.98px), only screen and (max-width: 767.98px) {
  .header-area.fixed-left .header-left-fix-inner {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
  }
}
.header-area.fixed-left .header-logo-area {
  max-width: 100%;
}
.header-area.fixed-left .header-logo-area a {
  max-width: 120px;
  display: block;
}
.header-area.fixed-left .header-navigation-area {
  margin: 0 -60px;
}
.header-area.fixed-left .header-navigation-area .nav {
  display: block;
}
.header-area.fixed-left .header-navigation-area .nav > li {
  margin-right: 0;
  margin-bottom: 20px;
  padding-right: 60px;
  padding-left: 60px;
  cursor: pointer;
  position: relative;
}
.header-area.fixed-left .header-navigation-area .nav > li:last-child {
  margin-bottom: 0;
}
.header-area.fixed-left .header-navigation-area .nav > li a {
  display: inline-block;
}
.header-area.fixed-left .header-navigation-area .nav > li .submenu-nav {
  left: 100%;
  margin-top: -20px;
  top: 0;
}
.header-area.fixed-left .header-navigation-area .nav > li .submenu-nav:before {
  display: none;
}
.header-area.fixed-left .header-navigation-area .nav > li .submenu-nav-mega {
  margin-left: 0;
}
@media screen and (min-width: 1200px) and (max-width: 1399px) {
  .header-area.fixed-left .header-navigation-area .nav > li .submenu-nav-mega {
    width: 860px;
  }
}
@media screen and (min-width: 1400px) {
  .header-area.fixed-left .header-navigation-area .nav > li .submenu-nav-mega {
    width: 1050px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1599.98px) {
  .header-area.fixed-left .header-navigation-area .nav > li .submenu-nav-mega .mega-menu-item {
    padding: 25px !important;
  }
}
.header-area.fixed-left .header-widget-area {
  font-size: 0.875rem;
}
.header-area.fixed-left .header-widget-area .copyright-content {
  margin-top: 40px;
}
@media only screen and (min-width: 768px) and (max-width: 991.98px), only screen and (min-width: 992px) and (max-width: 1199.98px), only screen and (min-width: 1200px) {
  .header-area-construction {
    padding: 40px 0;
  }
}
.header-area-construction .main-menu .submenu-nav {
  margin-top: 44px;
}
.header-area.header-right-align .header-right {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
}
@media only screen and (min-width: 1200px) and (max-width: 1240px) {
  .header-area.header-right-align .header-right {
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
  }
}
.header-area.header-right-align .header-right .header-action-area {
  margin-left: 80px;
}
.header-area.header-right-align .header-right .header-navigation-area .has-submenu .submenu-nav {
  min-width: 220px;
  left: -35px;
}
.header-area.header-right-align .header-right .header-navigation-area .has-submenu .submenu-nav .submenu-nav {
  left: 100%;
}

@media only screen and (min-width: 992px) and (max-width: 1199.98px) {
  .header-area.header-right-align .header-right .header-navigation-area .has-submenu .submenu-nav .submenu-nav {
    left: auto;
    right: 100%;
  }
}
.header-area.header-right-align.header-area.sticky-header.sticky .main-menu > li > .submenu-nav {
  margin-top: 21px;
}

.header-logo-area {
  max-width: 120px;
}
.header-logo-area .logo-light {
  display: none;
}

.header-action-area button, .header-action-area a {
  color: #182141;
  font-size: 20px;
  line-height: 1;
  margin-left: 15px;
  vertical-align: middle;
}
.header-action-area button:first-child, .header-action-area a:first-child {
  margin-left: 0;
}
.header-action-area button.btn-menu, .header-action-area a.btn-menu {
  margin-top: -3px;
  position: relative;
  height: 18px;
  width: 22px;
}
.header-action-area button.btn-menu span, .header-action-area a.btn-menu span {
  background-color: #182141;
  border-radius: 2px;
  left: 0;
  display: block;
  position: absolute;
  -webkit-transition: 0.4s;
  transition: 0.4s;
  height: 2px;
  width: 100%;
}
.header-action-area button.btn-menu span:first-child, .header-action-area a.btn-menu span:first-child {
  top: 0;
}
.header-action-area button.btn-menu span:nth-child(2), .header-action-area a.btn-menu span:nth-child(2) {
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}
.header-action-area button.btn-menu span:last-child, .header-action-area a.btn-menu span:last-child {
  bottom: 0;
}
.header-action-area button.btn-menu:hover span:first-child, .header-action-area button.btn-menu:hover span:last-child, .header-action-area a.btn-menu:hover span:first-child, .header-action-area a.btn-menu:hover span:last-child {
  width: 80%;
}

.header-top {
  padding: 15px 0;
}
.header-top a {
  color: #878c9b;
  font-size: 1rem;
  line-height: 1;
  margin-right: 20px;
}
@media only screen and (max-width: 479.98px) {
  .header-top a {
    margin-right: 10px;
  }
}
.header-top a:last-child {
  margin-right: 0;
}
@media only screen and (max-width: 479.98px) {
  .header-top a.hide-a {
    display: none;
  }
}
.header-top .header-icons a:hover {
  color: #f2b636;
}

.header-area.fixed-top.sticky-header {
  background-color: transparent;
  -webkit-box-shadow: none;
          box-shadow: none;
  padding: 50px 0;
}

/*===========================
56. Footer Style CSS
===========================*/
.footer-area {
  background-color: #24B1B1;
  font-size: 1rem;
}
.footer-area a {
  color: #FFFFFF;
}
.footer-area--layout-2 {
  background-color: #FFFFFF;
  padding: 50px 0;
  margin: 0;
}
@media only screen and (max-width: 767.98px) {
  .footer-area--layout-2 {
    padding: 30px 0;
  }
}
.footer-area--light {
  background-color: transparent;
}


@media only screen and (min-width: 992px) and (max-width: 1199.98px), only screen and (min-width: 1200px) {
  .reveal-footer {
    position: fixed;
    width: 100%;
    left: 0;
    bottom: 0;
  }
}

.widget-item {
  margin-top: 38px;
}
.widget-item .widget-title {
  color: #FFE0C5;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1;
  margin-top: -1px;
  margin-bottom: 22px;
}
@media only screen and (max-width: 767.98px) {
  .widget-item .widget-title {
    margin-bottom: 15px;
  }
}
.widget-item address {
	line-height: 2;
	margin-bottom: 0;
	color: #FFFFFF;
}

.widget-list li {
  line-height: 2;
}
.widget-list li a:hover {
  color: #f2b636;
}

.about-widget img {
  max-width: 120px;
  margin-bottom: 20px;
}

.footer-menu li {
  margin-right: 20px;
}
.footer-menu li:last-child {
  margin-right: 0;
}
.footer-menu li a {
  color: #ffffff
  font-size: 14px;
  line-height: 1;
}
.footer-menu li a:hover {
  color: #FFE0C5;
}

.footer-copyright-area {
	padding-bottom: 25px;
	margin-top: 0;
	padding-top: 20px;
}
.footer-copyright-area .copyright-txt {
	font-size: 14px;
	color: #ffffff;
}

.footer-onepage {
  padding: 95px 0;
}
@media only screen and (max-width: 767.98px) {
  .footer-onepage {
    padding: 40px 0;
  }
}



/*=====================
07. About Style CSS
======================*/
.about-content h3 {
  color: #FFFFFF;
  font-size: 2.25rem;
  line-height: 1.5;
}
@media (max-width: 1200px) {
  .about-content h3 {
    font-size: calc(1.35rem + 1.2vw);
  }
}
.about-content > .btn {
  margin-top: 10px;
}
.about-content-icon {
  background: url("../img/icons/ruller.png") no-repeat top right;
  padding: 50px 0;
  margin-left: 50px;
}
@media only screen and (min-width: 768px) and (max-width: 991.98px), only screen and (max-width: 767.98px) {
  .about-content-icon {
    margin-left: 0;
    padding: 0;
  }
}
@media only screen and (min-width: 1200px) {
  .about-content-icon .about-txt {
    max-width: 400px;
  }
}
.about-content .about-txt span {
  color: #f2b636;
}
.about-content .ht-list li:before {
  content: "\e006";
  font-family: "linea-arrows-10";
}
.about-content .section-title .about-txt .btn-bordered {
  margin-top: 50px;
}
@media only screen and (max-width: 767.98px) {
  .about-content .section-title .about-txt .btn-bordered {
    margin-top: 30px;
  }
}
.about-content.onepage {
  padding: 200px 0;
}
@media only screen and (min-width: 768px) and (max-width: 991.98px), only screen and (max-width: 767.98px) {
  .about-content.onepage {
    padding: 30px 0 0;
  }
}
.about-content.onepage h4 {
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 0;
}
@media (max-width: 1200px) {
  .about-content.onepage h4 {
    font-size: calc(1.375rem + 1.5vw);
  }
}
.about-content.construction h4 {
  font-size: 2.75rem;
  font-weight: 700;
  margin-bottom: 0;
}
@media (max-width: 1200px) {
  .about-content.construction h4 {
    font-size: calc(1.4rem + 1.8vw);
  }
}
.about-thumb {
  position: relative;
}
@media only screen and (min-width: 768px) and (max-width: 991.98px), only screen and (max-width: 767.98px) {
  .about-thumb {
    margin-bottom: 40px;
  }
}
.about-thumb img {
  width: 100%;
}
.about-thumb-ml {
  margin-left: -100px;
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px), only screen and (min-width: 768px) and (max-width: 991.98px), only screen and (max-width: 767.98px) {
  .about-thumb-ml {
    margin-left: 0;
  }
}
.about-thumb-left-align {
  margin-left: -550px;
}
@media only screen and (min-width: 768px) and (max-width: 991.98px), only screen and (max-width: 767.98px) {
  .about-thumb-left-align {
    margin-left: auto;
  }
}
.about-thumb-right-align {
  margin-right: -550px;
}
@media only screen and (min-width: 768px) and (max-width: 991.98px), only screen and (max-width: 767.98px) {
  .about-thumb-right-align {
    margin-right: auto;
  }
}
.about-creative {
  background-color: #182141;
  color: #FFFFFF;
  padding: 160px 0 135px;
  position: relative;
  margin-bottom: 30px;
}
@media only screen and (min-width: 768px) and (max-width: 991.98px) {
  .about-creative {
    padding: 80px 0 60px;
  }
}
@media only screen and (max-width: 767.98px) {
  .about-creative {
    padding: 60px 0 40px;
  }
}
.about-creative:before {
  background: url("../img/icons/letter_a.png") no-repeat center center;
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0.02;
  height: 100%;
  width: 100%;
}
.about-modern .about-content {
  z-index: 2;
  position: relative;
}
.about-modern .about-txt {
  max-width: 370px;
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px), only screen and (min-width: 768px) and (max-width: 991.98px), only screen and (max-width: 767.98px) {
  .about-modern .about-txt {
    max-width: 100%;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px), only screen and (min-width: 1200px) {
  .about-business-bottom .about-content {
    margin-top: 60px;
  }
}
.about-business-item {
  height: 650px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
@media only screen and (min-width: 768px) and (max-width: 991.98px) {
  .about-business-item {
    height: 500px;
  }
}
@media only screen and (max-width: 767.98px) {
  .about-business-item {
    height: 400px;
  }
}
.about-business-item .about-content {
  max-width: 500px;
  margin: auto;
  padding: 0 15px;
}
.about-business-item.bg-img .section-title h2 {
  color: #f2b636;
}
.about-business-item.bg-brand .section-title {
  color: #182141;
}
.about-business-item.bg-brand .section-title h5 {
  color: #182141;
}
.about-personal-item {
  margin-bottom: 40px;
}
@media only screen and (max-width: 767.98px) {
  .about-personal-item {
    margin-bottom: 25px;
  }
}
.about-personal-item:last-child {
  margin-bottom: 0;
}
.about-personal-item h5 {
  font-size: 1rem;
  font-weight: 700;
  color: #f2b636;
  margin-bottom: 10px;
}
.about-graphic .about-content {
  font-size: 1.5rem;
}
@media (max-width: 1200px) {
  .about-graphic .about-content {
    font-size: calc(1.275rem + 0.3vw);
  }
}
.about-graphic .about-content h2 {
  margin-bottom: 35px;
}
@media only screen and (min-width: 768px) and (max-width: 991.98px) {
  .about-graphic .about-content h2 {
    margin-bottom: 15px;
  }
}
@media only screen and (max-width: 767.98px) {
  .about-graphic .about-content h2 {
    margin-bottom: 10px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px), only screen and (min-width: 1200px) {
  .about-graphic .about-thumb-right-align {
    margin-right: -400px;
  }
}
.about-content-minimal {
  font-size: 1.5rem;
}
@media (max-width: 1200px) {
  .about-content-minimal {
    font-size: calc(1.275rem + 0.3vw);
  }
}
@media only screen and (max-width: 767.98px) {
  .about-content-minimal {
    font-size: 1.125rem;
  }
}
.about-content-minimal h6 {
  color: #f2b636;
  font-weight: 700;
  font-size: 1rem;
  line-height: 1;
  letter-spacing: 1.8px;
  text-transform: uppercase;
}
.about-content-minimal h2 {
  margin-bottom: 20px;
}
@media only screen and (min-width: 1200px) {
  .about-content-minimal h2 {
    max-width: 800px;
  }
}
.about-content-minimal h2 #typed {
  color: #f2b636;
  font-style: italic;
  font-family: "Playfair Display", serif;
}
@media only screen and (max-width: 575.98px) {
  .about-onepage .counter-item .counter-number {
    font-size: 1.5rem;
  }
}
@media only screen and (max-width: 575.98px) and (max-width: 1200px) {
  .about-onepage .counter-item .counter-number {
    font-size: calc(1.275rem + 0.3vw);
  }
}
@media only screen and (max-width: 575.98px) {
  .about-onepage .counter-item .counter-txt {
    font-size: 0.875rem;
  }
}

.img-h-w-wrap {
  position: relative;
}
.img-h-w-wrap .img-half-width {
  position: absolute;
  height: 100%;
  top: 0;
  width: 50%;
}
.img-h-w-wrap .img-half-width.right {
  right: 0;
}
@media only screen and (min-width: 768px) and (max-width: 991.98px), only screen and (max-width: 767.98px) {
  .img-h-w-wrap .img-half-width {
    position: relative;
    width: 100%;
    height: 300px;
    margin: auto;
  }
}

@media only screen and (max-width: 767.98px) {
  .fresh-ideas-area {
    padding-bottom: 60px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991.98px) {
  .fresh-ideas-area {
    padding-bottom: 90px;
  }
}

@media only screen and (min-width: 1200px) {
  .startup-mission-area {
    padding: 80px 0;
  }
}
@media only screen and (max-width: 767.98px), only screen and (min-width: 768px) and (max-width: 991.98px), only screen and (min-width: 992px) and (max-width: 1199.98px) {
  .startup-mission-area .service-area-gd {
    background-image: none !important;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1599.98px) {
  .startup-mission-area .service-area-gd {
    background-size: 25%;
  }
}



/*======================
10. Service Style CSS
========================*/
.service-business-classic {
  margin-top: -80px;
}
@media only screen and (min-width: 768px) and (max-width: 991.98px), only screen and (max-width: 767.98px) {
  .service-business-classic {
    margin-top: -30px;
  }
}
@media only screen and (min-width: 1200px), only screen and (min-width: 992px) and (max-width: 1199.98px) {
  .service-business-classic .icon-box-item {
    margin-top: 80px;
  }
}
.service-area-gd {
  background-size: contain;
  background-repeat: no-repeat;
  background-position: 7% 50%;
}
.service-content-gd .list-box__info h6 {
  font-size: 1rem;
  font-weight: 700;
}
.service-item__txt {
  margin-top: 35px;
}
.service-item__txt h2 {
  margin-top: 0;
}

.service-2-content-wrap {
  margin-top: -75px;
}
@media only screen and (min-width: 768px) and (max-width: 991.98px) {
  .service-2-content-wrap {
    margin-top: -55px;
  }
}
@media only screen and (max-width: 767.98px) {
  .service-2-content-wrap {
    margin-top: -35px;
  }
}
.service-2-content-wrap .icon-box-item {
  margin-top: 75px;
}
@media only screen and (min-width: 768px) and (max-width: 991.98px) {
  .service-2-content-wrap .icon-box-item {
    margin-top: 55px;
  }
}
@media only screen and (max-width: 767.98px) {
  .service-2-content-wrap .icon-box-item {
    margin-top: 35px;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1199.98px) {
  .architecture-service-wrap .list-box-item {
    margin-top: 45px;
  }
}

/*================================
Start Baber Service Area Wrapper
==================================*/
.baber-service-title-area {
  padding: 120px 0;
  position: relative;
}
@media only screen and (min-width: 768px) and (max-width: 991.98px) {
  .baber-service-title-area {
    padding: 80px 0 175px;
  }
}
@media only screen and (max-width: 767.98px) {
  .baber-service-title-area {
    padding: 60px 0 166px;
  }
}
.baber-service-title-area:before {
  background-color: rgba(0, 0, 0, 0.3);
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
}

.baber-service-content-inner {
  background-color: #FFFFFF;
  border: 15px solid #f2b636;
  padding: 56px 70px 85px;
  margin-top: -120px;
  position: relative;
  z-index: 1;
}
@media only screen and (min-width: 768px) and (max-width: 991.98px) {
  .baber-service-content-inner {
    padding: 31px 30px 60px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991.98px), only screen and (max-width: 767.98px) {
  .baber-service-content-inner {
    padding: 16px 15px 40px;
    border-width: 5px;
  }
}

.service-list-wrap {
  text-align: center;
}
.service-list-wrap .btn {
  padding: 15px 30px;
  margin-top: 60px;
}
@media only screen and (min-width: 768px) and (max-width: 991.98px), only screen and (max-width: 767.98px) {
  .service-list-wrap .btn {
    margin-top: 30px;
  }
}
.service-list-wrap .btn-bordered:hover {
  background-color: #f2b636;
  color: #222222;
}

.service-list {
  overflow: hidden;
  margin: 0 -15px;
  text-align: left;
}
.service-list-item {
  border-bottom: 1px solid #f2b636;
  float: left;
  width: calc(50% - 30px);
  padding: 25px 0;
  margin: 0 15px;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.2;
  text-transform: uppercase;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
@media only screen and (max-width: 767.98px) {
  .service-list-item {
    width: calc(100% - 30px);
  }
}
@media only screen and (min-width: 768px) and (max-width: 991.98px), only screen and (max-width: 767.98px) {
  .service-list-item {
    font-size: 14px;
  }
}
.service-list-item-title {
  color: #222222;
}
.service-list-item-price {
  color: #f2b636;
  margin-left: 10px;
}

/*===========================
12. Brand Logo Style CSS
=============================*/
.brand-logo-item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  height: 100px;
}

.brand-logo-area {
  padding: 80px 0;
}
@media only screen and (min-width: 768px) and (max-width: 991.98px) {
  .brand-logo-area {
    padding: 60px 0;
  }
}
@media only screen and (max-width: 767.98px) {
  .brand-logo-area {
    padding: 50px 0;
  }
}

/*===============================
13. Call to Action Style CSS
=================================*/
.call-to-action-wrapper {
  position: relative;
}
.call-to-action-wrapper:before {
  background-color: rgba(24, 33, 65, 0.8);
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
}
.call-to-action-content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  height: 550px;
}
@media only screen and (min-width: 768px) and (max-width: 991.98px) {
  .call-to-action-content {
    height: 400px;
  }
}
@media only screen and (max-width: 767.98px) {
  .call-to-action-content {
    height: 300px;
  }
}
.call-to-action-content h2 {
  color: #FFFFFF;
  font-size: 4.6875rem;
  margin-bottom: 40px;
}
@media (max-width: 1200px) {
  .call-to-action-content h2 {
    font-size: calc(1.59375rem + 4.125vw);
  }
}
@media only screen and (max-width: 767.98px) {
  .call-to-action-content h2 {
    margin-bottom: 20px;
  }
}
.call-to-action-content .btn-bordered {
  color: #FFFFFF;
}
@media only screen and (max-width: 767.98px) {
  .call-to-action-content--modern {
    height: 400px;
  }
}
.call-to-action-content--modern .contact-content-wrap h2 {
  color: #182141;
}
.call-to-action-content--modern .contact-content-wrap .call-to-contact {
  margin-top: 60px;
}
@media only screen and (min-width: 768px) and (max-width: 991.98px) {
  .call-to-action-content--modern .contact-content-wrap .call-to-contact {
    margin-top: 45px;
  }
}
@media only screen and (max-width: 767.98px) {
  .call-to-action-content--modern .contact-content-wrap .call-to-contact {
    margin-top: 30px;
  }
}
.call-to-action-content--business {
  height: 200px;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
@media only screen and (max-width: 575.98px) {
  .call-to-action-content--business {
    -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;
  }
}
.call-to-action-content--business h4 {
  color: #FFFFFF;
  margin-bottom: 0;
}
.call-to-action-content--business .btn-bordered {
  border-color: #FFFFFF;
}
@media only screen and (max-width: 575.98px) {
  .call-to-action-content--business .btn-bordered {
    margin-top: 25px;
  }
}
.call-to-action-content--business .btn-bordered:hover {
  background-color: #FFFFFF;
  color: #f2b636;
}
.call-to-action-content.business-modern {
  height: 580px;
}
.call-to-action-content.business-modern h4 {
  color: #FFFFFF;
  margin-bottom: 34px;
}
.call-to-action-content--personal {
  height: 350px;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  padding-top: 60px;
}
@media only screen and (max-width: 767.98px) {
  .call-to-action-content--personal {
    height: 220px;
    padding-top: 35px;
  }
}
.call-to-action-content--personal h5 {
  color: #f2b636;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 1.5px;
}
.call-to-action-content--personal h2 {
  color: #182141;
  margin-bottom: 10px;
  font-size: 3.5rem;
}
@media (max-width: 1200px) {
  .call-to-action-content--personal h2 {
    font-size: calc(1.475rem + 2.7vw);
  }
}
@media only screen and (max-width: 575.98px) {
  .call-to-action-content--personal h2 {
    font-size: 26px;
  }
}
.call-to-action-content--design {
  height: 500px;
}
@media only screen and (min-width: 768px) and (max-width: 991.98px), only screen and (max-width: 767.98px) {
  .call-to-action-content--design {
    height: 300px;
  }
}
.call-to-action-content--design h2 {
  font-weight: 700;
  font-size: 5rem;
}
@media (max-width: 1200px) {
  .call-to-action-content--design h2 {
    font-size: calc(1.625rem + 4.5vw);
  }
}
.call-to-action-content--design-light {
  height: 200px;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
@media only screen and (max-width: 575.98px) {
  .call-to-action-content--design-light {
    -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;
  }
}
.call-to-action-content--design-light h4 {
  margin-bottom: 0;
}
.call-to-action-content--design-light .btn-bordered {
  color: #182141;
}
@media only screen and (max-width: 575.98px) {
  .call-to-action-content--design-light .btn-bordered {
    margin-top: 25px;
  }
}
.call-to-action-content--design-light .btn-bordered:hover {
  background-color: #f2b636;
  color: #FFFFFF;
}
.call-to-action-content--minimal {
  height: 450px;
}
@media only screen and (min-width: 768px) and (max-width: 991.98px), only screen and (max-width: 767.98px) {
  .call-to-action-content--minimal {
    height: 300px;
  }
}
.call-to-action-content--minimal h3 {
  font-size: 3.5rem;
}
@media (max-width: 1200px) {
  .call-to-action-content--minimal h3 {
    font-size: calc(1.475rem + 2.7vw);
  }
}
.call-to-action-content--minimal .btn-bordered {
  color: #182141;
  margin-top: 40px;
}
@media only screen and (max-width: 767.98px) {
  .call-to-action-content--minimal .btn-bordered {
    margin-top: 20px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px), only screen and (min-width: 1200px) {
  .call-to-action-content--startup {
    height: 400px;
  }
}
.call-to-action-content--startup h2 {
  color: #f2b636;
  font-size: 3.5rem;
}
@media (max-width: 1200px) {
  .call-to-action-content--startup h2 {
    font-size: calc(1.475rem + 2.7vw);
  }
}
.call-to-action-content--startup .btn-bordered:not(:hover) {
  color: #f2b636;
}
.call-to-action-architecture {
  position: relative;
}
.call-to-action-architecture:before {
  background-color: rgba(24, 33, 65, 0.9);
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
}
.call-to-action-restaurant {
  position: relative;
  padding: 150px 0;
}
@media only screen and (max-width: 767.98px) {
  .call-to-action-restaurant {
    padding: 80px 0;
  }
}
.call-to-action-restaurant:before {
  background-color: rgba(0, 0, 0, 0.7);
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
}
.call-to-action-restaurant .restaurant-contact-content h2 {
  color: #FFFFFF;
  font-family: "Playfair Display", serif;
}
@media only screen and (max-width: 767.98px) {
  .call-to-action-restaurant .restaurant-hours {
    margin-top: 35px;
  }
}
.call-to-action-restaurant .restaurant-hours__item {
  margin-bottom: 40px;
}
.call-to-action-restaurant .restaurant-hours__item:last-child {
  margin-bottom: 0;
}
.call-to-action-restaurant .restaurant-hours__item h6 {
  color: #f2b636;
  font-size: 1rem;
  font-weight: 700;
  text-transform: uppercase;
}
.call-to-action-restaurant .restaurant-hours .btn-bordered {
  color: #FFFFFF;
}
.call-to-action-classic-shop {
  border-bottom: 1px solid #eee;
  padding: 60px 0;
}
@media only screen and (min-width: 768px) and (max-width: 991.98px), only screen and (max-width: 767.98px) {
  .call-to-action-classic-shop .icon-box-item {
    display: block;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991.98px), only screen and (max-width: 767.98px) {
  .call-to-action-classic-shop .icon-box-item .icon-box__icon {
    margin-bottom: 13px;
  }
}
@media only screen and (max-width: 767.98px) {
  .call-to-action-events .call-to-action-content {
    -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;
  }
  .call-to-action-events .call-to-action-content .btn {
    margin-top: 25px;
  }
}
.call-to-action-finance .finance-call-to-content {
  background-color: #182141;
  border-radius: 6px;
  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;
  margin-top: -60px;
  padding: 30px 70px;
  position: relative;
  z-index: 1;
}
@media only screen and (min-width: 768px) and (max-width: 991.98px), only screen and (max-width: 767.98px) {
  .call-to-action-finance .finance-call-to-content {
    padding: 30px;
  }
}
@media only screen and (max-width: 575.98px) {
  .call-to-action-finance .finance-call-to-content {
    padding: 40px 30px;
  }
}
@media only screen and (max-width: 575.98px) {
  .call-to-action-finance .finance-call-to-content {
    display: block;
    text-align: center;
  }
}
.call-to-action-finance .finance-call-to-content h2 {
  color: #FFFFFF;
  font-size: 1.5rem;
  margin-bottom: 0;
  font-weight: 700;
}
@media (max-width: 1200px) {
  .call-to-action-finance .finance-call-to-content h2 {
    font-size: calc(1.275rem + 0.3vw);
  }
}
@media only screen and (max-width: 767.98px) {
  .call-to-action-finance .finance-call-to-content h2 {
    font-size: 1.25rem;
  }
}
.call-to-action-finance .finance-call-to-content .btn-bordered {
  color: #FFFFFF;
}
@media only screen and (max-width: 575.98px) {
  .call-to-action-finance .finance-call-to-content .btn-bordered {
    margin-top: 20px;
  }
}

.video-popup-thumb {
  position: relative;
}
.video-popup-thumb:before {
  background-color: rgba(24, 33, 65, 0.4);
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
}
.video-popup-txt {
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  z-index: 99;
}
.video-popup-txt .btn-video-popup {
  color: #FFFFFF;
  font-size: 5rem;
  line-height: 1;
}
@media (max-width: 1200px) {
  .video-popup-txt .btn-video-popup {
    font-size: calc(1.625rem + 4.5vw);
  }
}
.video-popup-txt .btn-video-popup:hover {
  color: #f2b636;
}

/*========================
15. List Box Style CSS
=========================*/
.list-box-item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  margin-top: 35px;
}
@media only screen and (min-width: 768px) and (max-width: 991.98px) {
  .list-box-item {
    margin-top: 50px;
  }
}
@media only screen and (max-width: 767.98px) {
  .list-box-item {
    margin-top: 35px;
  }
}
.list-box-item .list-box__serial {
  margin-right: 20px;
}
.list-box-item .list-box__serial .serial-no {
  color: #f2b636;
  margin-bottom: 0;
}
.list-box-item .list-box__info {
  margin-top: -5px;
  font-size: 1rem;
}
.list-box-item--white .list-box__info h6 {
  color: #FFFFFF;
}

/*===========================
16. Icon Box Style CSS
============================*/
.icon-box-item {
  margin-top: 30px;
}
.icon-box-item .icon-box__icon {
  color: #f2b636;
  font-size: 3.75rem;
  line-height: 1;
  margin-bottom: 27px;
  text-transform: uppercase;
}
@media (max-width: 1200px) {
  .icon-box-item .icon-box__icon {
    font-size: calc(1.5rem + 3vw);
  }
}
@media only screen and (min-width: 768px) and (max-width: 991.98px), only screen and (max-width: 767.98px) {
  .icon-box-item .icon-box__icon {
    margin-bottom: 13px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991.98px), only screen and (max-width: 767.98px) {
  .icon-box-item .icon-box__icon img {
    max-width: 50%;
    margin: auto;
  }
}
.icon-box-item .icon-box__icon-dark {
  color: #878c9b;
}
.icon-box-item .icon-box__txt {
  font-size: 1rem;
}
.icon-box-item .icon-box__txt .btn {
  margin-top: 10px;
}
.icon-box-item .icon-box__txt--light h6 {
  color: #FFFFFF;
}
.icon-box-item--dark {
  color: #182141;
}
.icon-box-item--dark .icon-box__icon {
  color: #182141;
}
.icon-box-item--left {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.icon-box-item--left .icon-box__icon {
  margin-bottom: 0;
  margin-right: 20px;
}



/*============================
36. Team Member Style Css
==============================*/
.team-member {
  position: relative;
  margin-top: 30px;
}
.team-member__content {
  background-color: rgba(24, 33, 65, 0.9);
  text-align: center;
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: 0.4s;
  transition: 0.4s;
}
.team-member__content .member-info, .team-member__content .member-icons {
  position: absolute;
  left: 50%;
  width: 100%;
}
.team-member__content .member-info {
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
.team-member__content .member-info h3 {
  color: #FFFFFF;
  font-size: 1.25rem;
  line-height: 1;
  margin-top: 0;
}
.team-member__content .member-info .designation {
  color: #c1c5d5;
  font-size: 1rem;
  line-height: 1;
}
.team-member__content .member-icons {
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  bottom: 40px;
}
.team-member__content .member-icons a {
  color: #FFFFFF;
  font-size: 1.375rem;
  line-height: 1;
  margin-right: 15px;
}
@media (max-width: 1200px) {
  .team-member__content .member-icons a {
    font-size: calc(1.2625rem + 0.15vw);
  }
}
.team-member__content .member-icons a:last-child {
  margin-right: 0;
}
.team-member:hover .team-member__content {
  opacity: 1;
  visibility: visible;
}




/*==========================================
Preloader Style Css
===========================================*/
.preloader-active {
  overflow: hidden;
}
.preloader-active .preloader-wrap {
  background-color: #FFFFFF;
  position: fixed;
  left: 0;
  top: 0;
  height: 100vh;
  width: 100vw;
  z-index: 99999;
}
.preloader-active .preloader-wrap .preloader {
  background-color: #FFFFFF;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 142px;
  height: 40px;
  margin: -20px 0 0 -71px;
  -webkit-filter: contrast(20);
          filter: contrast(20);
}
.preloader-active .preloader-wrap .preloader .dot {
  background-color: #000000;
  position: absolute;
  width: 16px;
  height: 16px;
  top: 12px;
  left: 15px;
  -webkit-filter: blur(4px);
          filter: blur(4px);
  border-radius: 50%;
  -webkit-transform: translateX(0);
          transform: translateX(0);
  -webkit-animation: dot 2.8s infinite;
          animation: dot 2.8s infinite;
}
.preloader-active .preloader-wrap .preloader .dots {
  -webkit-transform: translateX(0);
          transform: translateX(0);
  margin-top: 12px;
  margin-left: 31px;
  -webkit-animation: dots 2.8s infinite;
          animation: dots 2.8s infinite;
}
.preloader-active .preloader-wrap .preloader .dots span {
  background-color: #000000;
  display: block;
  float: left;
  width: 16px;
  height: 16px;
  margin-left: 16px;
  -webkit-filter: blur(4px);
          filter: blur(4px);
  border-radius: 50%;
}

@-webkit-keyframes dot {
  50% {
    -webkit-transform: translateX(96px);
            transform: translateX(96px);
  }
}

@keyframes dot {
  50% {
    -webkit-transform: translateX(96px);
            transform: translateX(96px);
  }
}
@-webkit-keyframes dots {
  50% {
    -webkit-transform: translateX(-31px);
            transform: translateX(-31px);
  }
}
@keyframes dots {
  50% {
    -webkit-transform: translateX(-31px);
            transform: translateX(-31px);
  }
}

/*=================================
17. Full Page Home Page Style
==================================*/
@media only screen and (max-width: 767.98px) {
  #fullpage .section {
    padding: 30px 0;
  }
  #fullpage .section:first-child {
    padding-top: 0;
  }
  #fullpage .section:last-child {
    padding: 0;
  }
  #fullpage .section:nth-last-child(2) {
    padding-bottom: 0;
  }
}
#fullpage .section > .fp-tableCell > div {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  height: 100%;
}

#fp-nav ul li, #multiscroll-nav ul li {
  margin: 0 0 12px;
  height: auto;
  width: auto;
}
#fp-nav ul li:last-child, #multiscroll-nav ul li:last-child {
  display: none;
  margin-bottom: 0;
}
#fp-nav ul li a, #multiscroll-nav ul li a {
  background-color: transparent;
  border: 3px solid #FFFFFF;
  border-radius: 50%;
  width: 15px;
  height: 15px;
}
#fp-nav ul li a.active, #multiscroll-nav ul li a.active {
  border-color: #f2b636;
}
#fp-nav ul li a span, #multiscroll-nav ul li a span {
  display: none;
}
#fp-nav.dark ul li a, #multiscroll-nav.dark ul li a {
  border-color: #878c9b;
}
#fp-nav.dark ul li a.active, #multiscroll-nav.dark ul li a.active {
  border-color: #f2b636;
}
#fp-nav.dark ul li .fp-tooltip, #multiscroll-nav.dark ul li .fp-tooltip {
  color: #878c9b;
}

@media only screen and (max-width: 767.98px) {
  .presentation-achievement-area {
    padding: 60px 0;
  }
}

.presentation-service-area {
  background: url("../img/icons/letter_a-2.png") no-repeat 95% 80px;
}
.presentation-service-area .presentation-service-bottom {
  border-top: 1px solid #eee;
  padding-top: 80px;
  margin-top: 80px;
}
@media only screen and (max-width: 767.98px) {
  .presentation-service-area .presentation-service-bottom {
    padding-top: 50px;
    margin-top: 50px;
  }
}

.presentation-contact-area {
  position: relative;
}
@media only screen and (max-width: 767.98px) {
  .presentation-contact-area {
    padding: 60px 0;
  }
}
.presentation-contact-area:before {
  background-color: rgba(24, 33, 65, 0.9);
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
}

/*==========================================
25. Home FullScreen Carousel Style CSS
===========================================*/
.port-full-carousel-content {
  width: 100%;
}
.port-full-carousel-content .port-full-item {
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  float: left;
  position: relative;
}
.port-full-carousel-content .port-full-item__info {
  background: -webkit-gradient(linear, left bottom, left top, from(rgb(0, 0, 0)), to(rgba(0, 0, 0, 0)));
  background: linear-gradient(0deg, rgb(0, 0, 0) 0%, rgba(0, 0, 0, 0) 100%);
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 60px;
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px), only screen and (min-width: 768px) and (max-width: 991.98px), only screen and (max-width: 767.98px) {
  .port-full-carousel-content .port-full-item__info {
    padding: 50px 30px;
  }
}
.port-full-carousel-content .port-full-item__info h4 {
  margin-bottom: 14px;
  font-size: 1.875rem;
  font-weight: 700;
  letter-spacing: -0.21px;
}
@media (max-width: 1200px) {
  .port-full-carousel-content .port-full-item__info h4 {
    font-size: calc(1.3125rem + 0.75vw);
  }
}
.port-full-carousel-content .port-full-item__info h4 a {
  color: #FFFFFF;
}
.port-full-carousel-content .port-full-item__info h4 a:hover {
  color: #f2b636;
}
.port-full-carousel-content .port-full-item__info .cate a {
  color: #f2b636;
}
.port-full-carousel-content .port-full-item__info .cate a:after {
  content: ",";
}
.port-full-carousel-content .port-full-item__info .cate a:last-child:after {
  display: none;
}

.mCS-arden.mCustomScrollBox {
  position: relative;
  -webkit-transform: rotate(0deg);
          transform: rotate(0deg);
}
.mCS-arden .mCSB_scrollTools.mCSB_scrollTools_horizontal {
  height: 10px;
}
@media only screen and (max-width: 767.98px) {
  .mCS-arden .mCSB_scrollTools.mCSB_scrollTools_horizontal {
    height: 4px;
  }
}
.mCS-arden .mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar {
  margin: 0 auto;
  width: 100%;
  height: 100%;
  border-radius: 0;
  background-color: #f2b636;
}
.mCS-arden .mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_draggerRail {
  margin: 0 auto;
  width: 100%;
  height: 100%;
  border-radius: 0;
  background-color: rgba(255, 255, 255, 0.2);
}
.mCS-arden .mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_buttonLeft,
.mCS-arden .mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_buttonRight {
  position: fixed;
  top: 50%;
  width: 50px;
  height: 50px;
  background: none;
  -webkit-transform: translate(0, -50%);
          transform: translate(0, -50%);
  opacity: 1;
}
.mCS-arden .mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_buttonLeft:before,
.mCS-arden .mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_buttonRight:before {
  position: absolute;
  top: 50%;
  left: 50%;
  font-family: "linea-arrows-10";
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  font-size: 24px;
  color: #FFFFFF;
}
.mCS-arden .mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_buttonLeft {
  left: 10px;
}
.mCS-arden .mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_buttonLeft:before {
  content: "\e03f";
}
.mCS-arden .mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_buttonRight {
  right: 10px;
}
.mCS-arden .mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_buttonRight:before {
  content: "\e04b";
}
.mCS-arden .mCSB_scrollTools.mCSB_scrollTools_horizontal a + .mCSB_draggerContainer {
  margin: 0;
}
.mCS-arden .mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail,
.mCS-arden .mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail,
.mCS-arden .mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded .mCSB_dragger_bar,
.mCS-arden .mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_dragger .mCSB_dragger_bar {
  margin: 0 auto;
  width: 100%;
  height: 100%;
}
.mCS-arden .mCSB_scrollTools .mCSB_buttonLeft {
  background-position: -100px -40px;
}
.mCS-arden .mCSB_scrollTools .mCSB_buttonRight {
  background-position: -100px -56px;
}



/*============================
41. About Page Style Css
==============================*/
.about-page-feature-content {
	background-repeat: no-repeat;
	background-position: 10% center;
	background-color: rgba(255, 255, 255, 0.9);
}
@media screen and (min-width: 1601px) {
  .about-page-content {
    padding-right: 350px;
  }
}
.about-page-content h3 {
  font-size: 3rem;
  margin-bottom: 20px;
}
@media (max-width: 1200px) {
  .about-page-content h3 {
    font-size: calc(1.425rem + 2.1vw);
  }
}

.about-page-2-feature-area {
  position: relative;
}
.about-page-2-feature-area:before {
  background-color: rgba(24, 33, 65, 0.95);
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
}

.about-me-hero-content {
  height: 720px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  color: #FFFFFF;
}
@media only screen and (max-width: 767.98px) {
  .about-me-hero-content {
    height: 500px;
  }
}
.about-me-hero-content h5 {
  color: #f2b636;
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 1.5px;
}
.about-me-hero-content h2 {
  color: #FFFFFF;
  font-size: 90px;
  font-weight: 700;
  line-height: 1;
  margin: 15px 0 30px;
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px), only screen and (min-width: 768px) and (max-width: 991.98px) {
  .about-me-hero-content h2 {
    font-size: 80px;
  }
}
@media only screen and (max-width: 767.98px) {
  .about-me-hero-content h2 {
    font-size: 45px;
  }
}

.about-me-service .icon-box-item .icon-box__txt h6 {
  margin-bottom: 0;
}
@media only screen and (max-width: 479.98px) {
  .about-me-service .icon-box-item .icon-box__txt h6 {
    font-size: 16px;
  }
}

.about-personal-skill-area .personal-skill-left {
  padding: 150px 50px;
  height: 100%;
}
@media screen and (min-width: 1500px) {
  .about-personal-skill-area .personal-skill-left {
    padding: 170px 120px 170px 365px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991.98px) {
  .about-personal-skill-area .personal-skill-left {
    padding: 90px 50px;
  }
}
@media only screen and (max-width: 767.98px) {
  .about-personal-skill-area .personal-skill-left {
    padding: 60px 30px;
  }
}
.about-personal-skill-area .personal-skill-right {
  padding: 150px 50px;
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
@media screen and (min-width: 1500px) {
  .about-personal-skill-area .personal-skill-right {
    padding: 170px 365px 170px 120px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991.98px) {
  .about-personal-skill-area .personal-skill-right {
    padding: 55px 50px 95px;
  }
}
@media only screen and (max-width: 767.98px) {
  .about-personal-skill-area .personal-skill-right {
    padding: 35px 30px 65px;
  }
}




/*====================================
 New Design
======================================*/

.about-page-feature-area h4 {
	font-size: 50px;
	padding: 0;
	margin: 0;
}

.key-services {
	width: 100%;
	height: auto;
	margin: 20px 0;
}

.key-services ul {
	display: inline-block;
}


.key-services ul li {
	width: 50%;
	float: left;
}

.white {
	color: #fff !important;
}
.service-page-feature-content {
	padding: 60px 0;
}

.service-page-feature-area p {
	color: #fff;
}




/* Tecnology */

.about-page-feature-area {
	background: url("../img/technology-bg.jpg");
	background-attachment: fixed;
	background-color: rgba(255, 255, 255, 0.9);
	/* background-blend-mode: overlay; */
}

.about-page-feature-area p {
	font-size: 20px;
	color: rgb(85, 85, 85);
	line-height: 2;
}

.about-anda-danda-pic {
	margin: 40px 0;
}

.technology-text p {
	font-size: 17px;
	line-height: 2;
	color: rgb(85, 85, 85);
	margin-bottom: 25px;
}

.success-dialogue {
	margin-top: 30px;
	text-align: center;
}

.success-dialogue h4 {
	font-size: 48px;
	padding: 0;
	margin: 0;
}




.service-page-feature-area {
	background-color: rgba(244, 244, 244,0.9);
}

.service-page-feature-area .main-image {
	width: 100%;
}

.service-page-feature-area .image-layout {
	margin-top: 40px;
}

.service-page-feature-area .technology-text p {
	margin-top: 30px;
}


.ai-service {

	width: 100%;
	padding: 10px 0;
	box-shadow:0 10px 5px -2px rgba(0,0,0,.08));
}

.ai-service h5 {
	font-size: 26px;
	margin-bottom: 30px;
	color: #111;
}


.service-page-feature-area .key-services ul li {
	width: 50%;
	float: left;
	color: #555;
}






/* HERO */

.hero {
	height: 38vh;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	box-shadow: 0 2px 3px #c0c0c0;
	-webkit-box-shadow: 0 2px 3px #c0c0c0;
}



/* HUGE TEXT */

.bg-text{
    position:absolute;
    font-size:11vw;
    font-weight:800;
    color:#1d1d1d;
    opacity:.08;
    white-space:nowrap;
    line-height:1;
    user-select:none;
    pointer-events:none;
    text-transform:uppercase;
}

/* MARQUEE STRIP */

.marquee-strip{
    position:absolute;
    width:100%;
    height:48px;
    background:#ececea;
    display:flex;
    align-items:center;
    overflow:hidden;
    border-top:1px solid rgba(0,0,0,.06);
    border-bottom:1px solid rgba(0,0,0,.06);
    z-index:10;
}

/* MARQUEE */

.marquee{
    display:flex;
    align-items:center;
    white-space:nowrap;
    animation:marquee 30s linear infinite;
}

/* TEXT */

.marquee span{
    font-size:14px;
    text-transform:uppercase;
    letter-spacing:1px;
    color:#1d1d1d;
    margin-right:55px;
    position:relative;
    font-weight:500;
}

/* DOT */

.marquee span::before{
    content:'•';
    color:#ff5b2e;
    margin-right:18px;
    font-size:18px;
    vertical-align:middle;
}

/* ANIMATION */

@keyframes marquee{

    0%{
        transform:translateX(0);
    }

    100%{
        transform:translateX(-100%);
    }

}



.mt60{margin-top:60px;}





/* 	Technical */

.creative-section {
	padding: 140px 0 0;
	overflow: hidden;
	background-color: rgba(255,255,255, 0.8);
	background-image: url("../img/white-texture.jpg");
	background-size: 100% auto;
	background-attachment: fixed;
	background-blend-mode: overlay;
}


.creative-section2 {
	padding: 140px 0 0;
	overflow: hidden;
	background-color: rgba(255,255,255, 0.8);
	background-image: url("../img/checkered-pattern.png");
	background-size: 100% auto;
	background-attachment: fixed;
	background-blend-mode: overlay;
	position: relative;
	z-index: 1;
}



.creative-section2::before {
	content: "";
	position: absolute;
	right: 0;
	top: 2%;
	width: 80%;
	height: 1.8px;
	background: #cccccc;
	z-index: 9;
	left: 0;
	margin: 0 auto;
}

/* ROW */

.creative-row{
    margin-bottom:20px;
}

/* TOP LAYOUT */

.top-layout{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:80px;
    padding:0 6%;
}

.reverse-layout{
    flex-direction:row-reverse;
}

/* TITLE */

.left-title{
    flex:1;
}

.mini-text{
    font-size:12px;
    letter-spacing:4px;
    text-transform:uppercase;
    color:#777;
    display:block;
    margin-bottom:25px;
    font-weight:600;
}

.left-title h2{
    font-size:90px;
    line-height:.92;
    font-weight:700;
    color:#111;
}

/* TEXT */

.right-text{
    flex:1;
    padding-top:50px;
}

.right-text p{
    font-size:20px;
    line-height:2;
    color:#555;
}

/* IMAGE */

.image-layout{
    position:relative;
    margin-top:100px;
}

.main-image{
    width:72%;
}

.reverse-image{
    display:flex;
    justify-content:flex-end;
}

.main-image img{
    width:100%;
    height:850px;
    object-fit:cover;
}

/* FLOATING CARD */

.floating-card{
    position:absolute;
    right:6%;
    bottom:-80px;
    width:420px;
    background:#fff;
    padding:45px;
    box-shadow:0 30px 80px rgba(0,0,0,.08);
}

.right-card{
    left:6%;
    right:auto;
}

.floating-card h4{
    font-size:26px;
    margin-bottom:30px;
    color:#111;
}

/* SERVICE */

.service-line{
    padding:16px 0;
    border-bottom:1px solid rgba(0,0,0,.08);
    font-size:14px;
    letter-spacing:1px;
    color:#333;
}

/* BOTTOM */

.bottom-layout{
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    margin-top:100px;
    padding:0 6%;
    gap:60px;
}

.reverse-bottom{
    flex-direction:row-reverse;
}

/* HUGE WORD */

.huge-word{
    font-size:12vw;
    font-weight:800;
    color:rgba(0,0,0,.05);
    line-height:1;
    user-select:none;
}

/* BOTTOM TEXT */

.bottom-text{
    max-width:650px;
}

.bottom-text p{
    font-size:17px;
    line-height:2;
    color:#555;
    margin-bottom:25px;
}

/* ===================================== */
/* ANIMATE EFFECTS */
/* ===================================== */

.animate-fade{

    opacity:0;

    transition:
    opacity 1.2s ease;
}

.animate-fade.active{

    opacity:1;
}

/* UP */

.animate-up{

    opacity:0;

    transform:translateY(80px);

    transition:
    all 1.2s ease;
}

.animate-up.active{

    opacity:1;

    transform:translateY(0);
}

/* LEFT */

.animate-left{

    opacity:0;

    transform:translateX(-80px);

    transition:
    all 1.2s ease;
}

.animate-left.active{

    opacity:1;

    transform:translateX(0);
}

/* RIGHT */

.animate-right{

    opacity:0;

    transform:translateX(80px);

    transition:
    all 1.2s ease;
}

.animate-right.active{

    opacity:1;

    transform:translateX(0);
}

/* SCALE */

.animate-scale{

    opacity:0;

    transform:scale(.92);

    transition:
    all 1.2s ease;
}

.animate-scale.active{

    opacity:1;

    transform:scale(1);
}



.highlight {
	width: 100%;
	height: auto;
	margin: 100px auto 70px;
}


.end-note {
	width: 90%;
	height: auto;
	padding: 30px 50px;
	margin: 0 auto;
	text-align: center;
	background: #35858E;
	border-radius: 20px;
	color: #ffffff;
	font-size: 22px;
}


.main-pg {
	position: fixed;
	right: -20px;
	bottom: -50px;
	width: 160px;
	height: 160px;
	border-radius: 50%;
	background: #000;
	color: #fff;
	text-align: center;
	z-index: 10;
	padding: 30px 30px;
	font-weight: bold;
}


.main-pg a {color: #fff;}



.new-style {clear: both;display: inline-block;}

.new-style li {
	float: left;
	font-weight: 600;
	padding-right: 10px;
	color: #01CED1;
}


.process__list-4 {
	display: -ms-grid;
	display: grid;
	-ms-grid-columns: 1fr 1fr;
	grid-template-columns: 1fr 1fr;
	margin-bottom: 50px;
}

.process__item-4 {
	padding: 20px 10px;
	border-bottom: 1px solid #e9e9e9;
	display: -ms-grid;
	display: grid;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-ms-grid-columns: 145px auto;
	grid-template-columns: 145px auto;
}

.process__item-4:nth-child(1), .process__item-4:nth-child(2) {
	border-top: 1px solid #e9e9e9;
}


.process__item-4:nth-child(2n) {
	position: relative;
	padding-left: 10px;
	-ms-grid-columns: 180px auto;
	grid-template-columns: 180px auto;
}

.process__item-4:nth-child(2n)::before {
	position: absolute;
	content: "";
	width: 2px;
	height: 60%;
	left: 0;
	top: 20%;
	background-color: rgba(14, 30, 42, 0.1);
}

.process__item-4 .serial {
	font-size: 61px;
	line-height: 1;
	font-weight: 600;
	letter-spacing: 0;
	text-transform: uppercase;
	padding-left: 30px;
	color: transparent;
	-webkit-text-stroke: 2px #01CED1;
}

.process__title-4 {
	font-size: 20px;
	line-height: 30px;
	font-weight: 600;
	color: #232323;
	margin: 0;
	padding: 0;
}






/* RESPONSIVE */



@media (min-width: 1201px) and (max-width: 1599px) {
	
.floating-card{width:360px;}
.marquee-strip {height: 35px;}
.header-area {padding: 10px 0;}
.hero {height: 68vh;}
.bg-text{ font-size:14vw;}
	
	
	
	
	
}







@media(max-width:1200px){
.floating-card{width:360px;}
.marquee-strip {height: 35px;}
.header-area {padding: 10px 0;}
.hero {height: 68vh;}
.bg-text{ font-size:14vw;}

}






@media(max-width:991px){

.marquee-strip {height: 28px;}
.header-area {padding: 10px 0;}
.hero {height: 68vh;}
.bg-text{ font-size:14vw;}
.about-page-feature-area p {font-size: 16px;}
	
    .creative-section{
        padding:90px 0;
    }

    .creative-row{
        margin-bottom:0;
    }

    .top-layout,
    .bottom-layout{
        flex-direction:column;
        gap:40px;
    }

    .left-title h2{
        font-size:52px;
    }

    .right-text{
        padding-top:0;
    }

    .right-text p{
        font-size:17px;
    }

    .main-image{width:100%;}

    .main-image img{
        height:550px;
    }

    .floating-card{
        position:relative;
        width:90%;
        right:auto;
        left:auto;
        bottom:auto;
        margin:-80px auto 0;
    }

.huge-word{font-size:20vw;}
	
.success-dialogue h4 {font-size: 28px;}	
.reverse-image {display: block;}
.left-title {width: 100%;text-align: center;}
.highlight {margin: 100px auto 0;}
	

}




@media(max-width:768px){


    .marquee span{
        font-size:12px;
        margin-right:40px;
    }
	
	.marquee-strip {display:none;}
.bg-text {
	font-size: 13vw;
}

.header-area.transparent:not(.sticky) {
	position: relative;
	background-color: #fff;
}


.hero {
	height: 18vh;

}

.marquee-strip {display:none;}

.left-title {
	text-align: center;
	width: 100%;
	height: auto;
}

.left-title h2 {
	font-size: 40px;
	line-height: 45px;
}

.success-dialogue h4 {
	font-size: 28px;
}

    .right-text p,
    .bottom-text p{
        font-size:15px;
        line-height:1.9;
    }

    .main-image img{
        height:420px;
    }

    .floating-card{
        padding:30px;
    }

    .floating-card h4{
        font-size:22px;
    }

    .service-line{
        font-size:12px;
    }
	
	
	.main-pg {Display:none;}

	.huge-word {display: none;}


.bottom-layout {margin-top: 40px;}
.creative-row {margin-bottom: 0;}
.creative-section2 {padding: 70px 0 0;}
.highlight {margin: 100px auto 0;}
.reverse-image {display: block;}

.process__list-4 {display: inline-block;}
.process__item-4:nth-child(2n) {padding-left: 9px; grid-template-columns: 95px auto;}
.process__item-4 {grid-template-columns: 90px auto;}
.process__item-4 .serial {padding-left: 0px;}
.process__item-4:nth-child(2n)::before {display:none;}

}



@media(max-width:480px){
.left-title h2 {
	font-size: 32px;
	line-height: 35px;
}

.marquee-strip {display:none;}

.bg-text {
	font-size: 13vw;
}

.header-area.transparent:not(.sticky) {
	position: relative;
	background-color: #fff;
}


.hero {
	height: 18vh;

}

.key-services {
	text-align: center;
}

.key-services ul li {
	width: 100%;
	float: none;
	text-align:left;
}

.success-dialogue h4 {
	font-size: 20px;
}

.left-title {
	text-align: center;
}

.about-page-feature-area p {
	text-align: center;
}


.service-page-feature-area .key-services ul li {
	width: 100%;
	float: none;
}

.main-image img {
	height: 100%;
}

.bottom-layout {
	gap: 0;
	margin-top: 30px;
}

.reverse-image {
	display: block;
}


.main-pg {Display:none;}

.process__list-4 {display: inline-block;}
.process__item-4:nth-child(2n) {padding-left: 9px; grid-template-columns: 95px auto;}
.process__item-4 {grid-template-columns: 90px auto;}
.process__item-4 .serial {padding-left: 0px;}
.process__item-4:nth-child(2n)::before {display:none;}


}