/*
Theme Name: Sri Ganapathy Graphics
Theme URI: https://templatesjungle.com/
Author: TemplatesJungle
Author URI: https://templatesjungle.com/
Description: Crowd is specially designed HTML CSS template.
Version: 1.2
*/

/* Bootstrap */
body {
  --heading-font: "Inter", Arial, san-serif;
  --heading-font-weight: 700;
  --heading-color: #111;
  --heading-line-height: 1.24;

  --swiper-theme-color: #c5a992;

  /* bootstrap */
  --bs-body-font-family: "Inter", Arial, sans-serif;
  --bs-body-font-size: 17px;
  --bs-body-font-weight: 400;
  --bs-body-line-height: 1.5;
  --bs-body-color: #555;
  --bs-body-color-rgb: 85, 85, 85;

  --bs-primary: #c5a992;
  --bs-secondary: #6c757d;
  --bs-black: #111;
  --bs-light: #f1f1f0;
  --bs-dark: #2f2f2f;
  --bs-gray: #9aa1a7;
  --bs-gray-dark: #51565b;

  --bs-primary-rgb: 197, 169, 146;
  --bs-secondary-rgb: 108, 117, 125;
  --bs-black-rgb: 17, 17, 17;
  --bs-light-rgb: 241, 241, 240;
  --bs-dark-rgb: 33, 37, 41;

  --bs-link-color: #111;
  --bs-link-color-rgb: 17, 17, 17;
  --bs-link-decoration: underline;
  --bs-link-hover-color: #111;
  --bs-link-hover-color-rgb: 17, 17, 17;
}

h1,
.h1,
h2,
.h2,
h3,
.h3,
h4,
.h4,
h5,
.h5,
h6,
.h6 {
  font-family: var(--heading-font);
  font-weight: var(--heading-font-weight);
  color: var(--heading-color);
  line-height: var(--heading-line-height);
}

h1.light,
.h1,
h2.light,
.h2,
h3.light,
.h3,
h4.light,
.h4,
h5.light,
.h5,
h6.light,
.h6 {
  color: var(--light-color);
}

/* container fluid */
.container-fluid {
  max-width: 1800px;
}

.container,
.container-fluid,
.container-lg,
.container-md,
.container-sm,
.container-xl,
.container-xxl {
  --bs-gutter-x: 2.5rem;
}

/* Dropdown */
.dropdown-menu {
  --bs-dropdown-border-radius: 0;
  --bs-dropdown-border-width: 0;
}

.dropdown-item {
  --bs-dropdown-item-padding-y: 0.25rem;
  --bs-dropdown-item-padding-x: 1rem;
  --bs-dropdown-link-color: var(--bs-black);
  --bs-dropdown-item-border-radius: 0;
}

.dropdown-item.active,
.dropdown-item:active {
  --bs-dropdown-link-active-color: var(--bs-light);
  --bs-dropdown-link-active-bg: var(--bs-black);
}

/* list group */
.list-group-item {
  --bs-list-group-item-padding-x: 0;
  --bs-list-group-border-width: 0;
}

/* btn */
.btn {
  --bs-btn-border-radius: 0;
}

.btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: #8c907e;
  --bs-btn-border-color: #8c907e;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #5e624e;
  --bs-btn-hover-border-color: #5e624e;
  --bs-btn-focus-shadow-rgb: 49, 132, 253;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #5e624e;
  --bs-btn-active-border-color: #5e624e;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #8c907e;
  --bs-btn-disabled-border-color: #8c907e;
}

.btn-outline-primary {
  --bs-btn-color: var(--bs-primary);
  --bs-btn-border-color: var(--bs-primary);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--bs-primary);
  --bs-btn-hover-border-color: var(--bs-primary);
  --bs-btn-focus-shadow-rgb: 13, 110, 253;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--bs-primary);
  --bs-btn-active-border-color: var(--bs-primary);
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: var(--bs-primary);
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: var(--bs-primary);
  --bs-gradient: none;
}

.pagination {
  --bs-pagination-active-bg: var(--bs-black);
  --bs-pagination-border-width: 0;
  --bs-pagination-border-radius: 0;
}

/* breadcrumb */
.breadcrumb {
  --bs-breadcrumb-item-padding-x: 1em;
}

/* text white */
.text-white {
  --heading-color: var(--bs-light);
  --bs-breadcrumb-item-active-color: var(--bs-light);
  --bs-breadcrumb-divider-color: var(--bs-light);
  --bs-link-color-rgb: var(--bs-light-rgb);
  --bs-link-hover-color-rgb: var(--bs-light-rgb);
}

.text-white .nav-link {
  --bs-nav-link-color: var(--bs-light);
  --bs-nav-link-hover-color: var(--bs-light);
  --bs-nav-link-active-color: var(--bs-light);
  --bs-navbar-active-color: var(--bs-light);
}

/* accordion */
.accordion {
  --bs-accordion-active-color: var(--bs-dark);
  --bs-accordion-active-bg: transparent;
}

.accordion-button {
  margin: 0;
}

/* form control */
.form-control:focus {
  border-color: #ccc;
  box-shadow: 0 0 0 0.25rem rgba(200, 200, 200, 0.25);
}

.nav-tabs {
  --bs-nav-tabs-border-width: 0;
  --bs-nav-tabs-link-active-color: var(--bs-light);
  --bs-nav-tabs-link-active-bg: var(--bs-dark);
  border-bottom: 0;
}

.nav-tabs .nav-link {
  border-top-left-radius: var(--bs-nav-tabs-border-radius);
  border-top-right-radius: var(--bs-nav-tabs-border-radius);
  border-bottom-left-radius: var(--bs-nav-tabs-border-radius);
  border-bottom-right-radius: var(--bs-nav-tabs-border-radius);
}

/* dark theme */
[data-bs-theme="dark"] body {
  color-scheme: dark;

  --heading-color: #fff;
  --bs-link-color: #fff;
  --bs-link-hover-color: #fff;
  --bs-link-color-rgb: 255, 255, 255;
  --bs-link-hover-color-rgb: 255, 255, 255;
  --bs-body-color: #d1d1d1;
  --bs-body-bg: #111;
  --bs-body-bg-rgb: 17, 17, 41;
}

[data-bs-theme="dark"] .dropdown-item {
  --bs-dropdown-link-color: var(--bs-light);
  --bs-dropdown-link-hover-color: var(--bs-white);
}

[data-bs-theme="dark"] .bg-white,
[data-bs-theme="dark"] .bg-light {
  --bs-bg-opacity: 0.1;
}

[data-bs-theme="dark"] .btn-link,
[data-bs-theme="dark"] a {
  --bs-link-color: #fff;
  --bs-link-hover-color: #fff;
  --bs-link-color-rgb: 255, 255, 255;
  --bs-link-hover-color-rgb: 255, 255, 255;
}

[data-bs-theme="dark"] h1,
[data-bs-theme="dark"] h2,
[data-bs-theme="dark"] h3,
[data-bs-theme="dark"] h4,
[data-bs-theme="dark"] h5,
[data-bs-theme="dark"] h6 {
  --heading-color: #fff;
}

/* end of Bootstrap Color Theme */

/*--------------------------------------------------------------
This is main CSS file that contains custom style rules used in this template
--------------------------------------------------------------*/

a {
  text-decoration: none;
}

/*----- 6.1 Preloader
--------------------------------------------------------------*/
#overlayer {
  width: 100%;
  height: 100%;
  position: fixed;
  z-index: 20;
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}

.loader {
  display: inline-block;
  width: 100px;
  height: 100px;
  border: 6px solid var(--accent-color);
  animation: loader 4s infinite ease-out;
  border-radius: 40px;
}

.loader-inner {
  vertical-align: top;
  display: inline-block;
  width: 100%;
  border-radius: 40px;
  animation: loader-inner 8s infinite ease-out;
}

@keyframes loader {
  0% {
    transform: rotate(0deg);
  }

  25% {
    transform: rotate(180deg);
  }

  50% {
    transform: rotate(180deg);
  }

  75% {
    transform: rotate(360deg);
  }

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

@keyframes loader-inner {
  0% {
    height: 0%;
  }

  25% {
    height: 0%;
  }

  50% {
    height: 100%;
  }

  75% {
    height: 100%;
  }

  100% {
    height: 0%;
  }
}

/* - Button
------------------------------------------------------------- */

button {
  height: 65px;
  font-size: 1.4em;
  border: none;
  cursor: pointer;
}

.btn-wrap {
  margin: 60px 0;
}

.btn-wrap a {
  font-weight: 700;
  text-transform: uppercase;
}

.btn-normal {
  color: #fff;
}

.btn-accent {
  background-color: #222;
  color: #fff;
  padding: 20px 40px;
  display: inline-block;
}

.btn-accent:hover {
  color: #222;
}

.btn-navy-blue {
  background-color: #042245;
  color: #fff;
  padding: 20px 40px;
  display: inline-block;
}

.btn-navy-blue:hover {
  color: #042245;
}

.btn-subscribe {
  background: #2f2f2f;
  color: #fff;
}

.btn-subscribe:hover {
  background-color: #c5a992;
  color: #fff;
}

.btn-submit {
  background: #fff;
  color: #2f2f2f;
}

.btn-submit:hover {
  background-color: #c5a992;
  color: #fff;
}

.btn-pill {
  border-radius: 50px;
}

.btn-outline-light {
  border: 1px solid #fff;
  color: #fff;
  padding: 30px 50px;
}

.btn-outline-light:hover {
  background-color: #fff;
  color: #222;
}

.btn-contact {
  background-color: #222;
  color: #fff;
  padding: 40px 120px;
  display: inline-block;
  overflow: hidden;
}

.btn-contact:hover {
  color: #fff;
}

/*--- Image Sizes
-----------------------------------------------*/
img.banner-image {
  width: 100%;
  height: 940px;
  object-fit: cover;
}

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

img.video-image {
  width: 100%;
  height: 417px;
  object-fit: cover;
  border-radius: 10px;
  z-index: 3;
}

img.portfolio-item {
  width: 100%;
  height: 322px;
  object-fit: cover;
}

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

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

img.post-thumb-image {
  width: 100%;
  height: 128px;
  object-fit: cover;
}

/*--- Image hover Effect
-----------------------------------------------*/
.image-hvr-effect {
  display: flex;
  overflow: hidden;
  cursor: pointer;
}

.image-hvr-effect img {
  transform: scale(1);
  will-change: transform;
  transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  z-index: 0;
}

.image-hvr-effect:hover img {
  transform: scale(1.2);
}

/* - Image Effect
------------------------------------------------------------- */
section:not(.no-js) .image-transition {
  transition: 1s ease-out;
  transition-delay: 0.2s;
  position: relative;
  width: auto;
  overflow: hidden;
  clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0 100%);
  visibility: hidden;
}

section:not(.no-js) .image-transition img {
  transform: scale(1.3);
  transition: 2s ease-out;
}

section:not(.no-js) .animating .image-transition {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  visibility: visible;
  transform: skewY(0);
}

section:not(.no-js) .animating img {
  transform: scale(1);
}

/* - Image Effect
------------------------------------------------------------- */

.reveal-curve-top {
  clip-path: polygon(100% at -100% 50%);
  animation: reveal-curve-top 2s 1s backwards;
}

.reveal-curve-left {
  clip-path: circle(100% at -100% 50%);
  animation: reveal-curve-left 1s 1s forwards;
}

.reveal-curve-right {
  clip-path: circle(100% at 200% 50%);
  animation: reveal-curve-right 1s 2s forwards;
}

@keyframes reveal-curve-top {
  from {
    clip-path: circle(100% at 100% -100%);
  }

  to {
    clip-path: circle(100% at 50% 50%);
  }
}

@keyframes reveal-curve-left {
  from {
    clip-path: circle(100% at -100% 50%);
  }

  to {
    clip-path: circle(100% at 50% 50%);
  }
}

@keyframes reveal-curve-right {
  from {
    clip-path: circle(100% at 200% 50%);
  }

  to {
    clip-path: circle(100% at 50% 50%);
  }
}

/* - Button Hover Effects2
------------------------------------------------------------- */
.hvr-sweep-to-right {
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  position: relative;
  -webkit-transition-property: color;
  transition-property: color;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
}

.hvr-sweep-to-right:before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #ffd45a;
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transform-origin: 0 50%;
  transform-origin: 0 50%;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}

.dark-sweep.hvr-sweep-to-right:before {
  background: #fff;
}

[class^="hvr-"] {
  cursor: pointer;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.hvr-sweep-to-right:hover:before,
.hvr-sweep-to-right:focus:before,
.hvr-sweep-to-right:active:before {
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
}

.hvr-sweep-to-right:focus:before,
.hvr-sweep-to-right:active:before {
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
}

/*----- Icon Hover Effect
--------------------------------------------------------------*/

.icon-wrap {
  cursor: pointer;
}

.icon-wrap:hover .button-inner-wrap {
  width: 115px;
  height: 115px;
}

.icon-wrap:hover i.inactive {
  transform: translate(100px, -50%);
}

.icon-wrap:hover i.active {
  transform: translate(-50%, -50%);
}

.icon-inner-wrap {
  width: 60px;
  height: 60px;
  overflow: hidden;
  transform: translate(-50%, -50%);
  transition: all 0.3s ease;
}

.icon-inner-wrap i {
  position: absolute;
  left: 50%;
  top: 50%;
  transition: all 0.3s ease;
}

.icon-inner-wrap i.inactive {
  transform: translate(-50%, -50%);
}

.icon-inner-wrap i.active {
  transform: translate(-150px, -50%);
}

/*----- Pattern Overlay
--------------------------------------------------------------*/
.pattern-overlay:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 515px;
  height: 960px;
  z-index: -1;
  background: url(images/double-pattern.png) no-repeat;
}

.pattern-overlay.single-pattern:before {
  background: url(images/single-pattern.png) no-repeat;
}

.pattern-overlay.single-pattern.left-side:before {
  top: 160px;
  left: 0;
  background: url(images/single-pattern.png) no-repeat;
}

@media only screen and (max-width: 1070px) {
  .pattern-overlay:before {
    display: none;
  }
}

/* - Video Popup
------------------------------------------------------------- */
.video-content .video-bg {
  position: fixed;
  z-index: 9999;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  filter: alpha(opacity=90);
  -moz-opacity: 0.9;
  opacity: 0.9;
}

#video-holder video {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 48%;
  height: 500px;
  z-index: 99999;
  margin: 200px auto;
}

#video-holder #yt_video {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  max-width: 100%;
}

#video-holder iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 1 !important;
}

#video-holder .video-stream i.icon {
  position: absolute;
  top: 208px;
  left: 1340px;
  right: 0;
  font-size: 2em;
  color: #222;
  background: #fff;
  z-index: 999999;
  cursor: pointer;
  width: 50px;
  height: 50px;
  border-radius: 50%;
}

/*--- Section Title
-----------------------------------------------*/
.section-title {
  font-size: 3em;
  line-height: 1.2;
  font-weight: 900;
  line-height: 1em;
  letter-spacing: -0.03em;
  color: #000000;
}

.section-subtitle {
  font-size: 0.8em;
  font-weight: 400;
  line-height: 1em;
  margin-bottom: 20px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: #555555;
}

.two-column .section-title {
  font-size: 2em;
  line-height: 1.5;
}

/*----- Header Logo
--------------------------------------------------------------*/
.main-logo a {
  font-size: 2em;
  font-weight: 900;
  color: #fff;
  margin: 0 auto;
  padding-right: 210px;
}

/*----- Header Menu
--------------------------------------------------------------*/
header {
  width: 1733px;
}

#header-wrap {
  position: fixed;
  top: 0;
  z-index: 9;
  width: 100%;
  display: flex;
  align-items: center;
  padding-left: 30px;
  transition: 0.5s ease-in-out;
  justify-content: space-between;
}

#header-wrap nav#navbar {
  display: flex;
  align-items: center;
  margin-top: 30px;
}

nav#navbar ul.menu-list {
  display: flex;
  margin: 0 0 0 50px;
}

#navbar ul.menu-list li {
  margin-right: 30px;
  margin-top: 12px;
}

#navbar ul.menu-list a {
  font-size: 1.1em;
  color: #fff;
  padding: 0 20px;
}

#navbar ul.menu-list a:hover {
  color: #ffd45a;
}

/* Add this class when scroll page */
.change-color #navbar ul.menu-list a {
  color: rgba(255, 255, 255, 0);
}

.change-menu-background {
  background-color: #0a0a0a;
  padding: 5px;
}

.change-menu-background #navbar ul.menu-list a {
  color: rgba(255, 255, 255, 1);
}

.change-menu-background #navbar ul.menu-list a:hover {
  color: #ffd45a;
}

#header-wrap.change-menu-background nav#navbar {
  margin-top: 0;
}

/* - Side Navigation item
--------------------------------------------------------------*/
.side-nav-bar {
  position: absolute;
  right: 0;
}

.side-nav #menu-toggle {
  opacity: 0;
}

.side-nav #menu-toggle .menu-btn {
  position: fixed;
  top: 25px;
  right: 40px;
  width: 15px;
  height: 25px;
  cursor: pointer;
  z-index: 3;
}

.side-nav #menu-toggle:checked ~ .menu-btn > span {
  transform: rotate(45deg);
  z-index: 2;
}

.side-nav #menu-toggle:checked ~ .menu-btn > span::before {
  top: 0;
  transform: rotate(0);
  background: #ffd45a;
}

.side-nav #menu-toggle:checked ~ .menu-btn > span::after {
  top: 0;
  transform: rotate(90deg);
  background: #ffd45a;
}

.side-nav #menu-toggle:checked ~ .side-nav-menu {
  visibility: visible;
  right: 0;
}

.menu-btn {
  display: flex;
  align-items: center;
  position: fixed;
  top: 20px;
  right: 30px;
  width: 20px;
  height: 26px;
  margin: 30px;
  z-index: 3;
  cursor: pointer;
}

.menu-btn > span,
.menu-btn > span::before,
.menu-btn > span::after {
  display: block;
  position: absolute;
  width: 100%;
  height: 2px;
  background-color: #ffd45a;
  transition-duration: 0.25s;
}

.menu-btn > span::before {
  content: "";
  top: -8px;
}

.menu-btn > span::after {
  content: "";
  top: 8px;
}

.side-nav-menu {
  display: block;
  position: fixed;
  visibility: hidden;
  top: 0;
  right: -100%;
  width: 30%;
  height: 100%;
  margin: 0;
  padding: 80px 0;
  list-style: none;
  z-index: 1;
  list-style: none;
  background-color: rgba(0, 0, 0, 0.9);
  transition-duration: 0.5s;
}

.side-nav-menu a {
  font-size: 1.8em;
  color: #fff;
  display: block;
  padding: 12px 50px;
  text-decoration: none;
  transition-duration: 0.25s;
}

.side-nav-menu a:hover {
  color: #ffd45a;
}

.side-nav-menu li.menu-item.side-main-menu {
  display: none;
}

.change-menu-background .side-nav .menu-btn {
  top: -20px;
}

@media screen and (max-width: 1140px) {
  #navigation {
    display: none;
  }

  .side-nav-menu li.menu-item.side-main-menu {
    display: block;
  }

  .side-nav-menu {
    width: 100%;
    text-align: center;
  }

  .side-nav-menu a {
    font-size: 2.5em;
  }
}

/*----- Billboard
--------------------------------------------------------------*/
#billboard {
  position: relative;
}

/* #billboard .container {
    width: 800px;
} */

#billboard .banner-content {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  text-align: center;
  margin-top: 210px;
  color: #fff;
  z-index: 5;
}

.banner-content h3.section-subtitle {
  color: #fff;
}

.banner-content h2.section-title {
  font-size: 9em;
  line-height: 0.8em;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0;
}

.banner-content h2.banner-title small {
  font-size: 15%;
  text-transform: uppercase;
  display: block;
}

.banner-content p {
  font-size: 1.2em;
  width: 600px;
  margin: 0 auto;
}

#billboard .main-slider {
  min-height: 620px;
  height: 100vh;
  z-index: 0;
}

#billboard .main-slider .slick-slide {
  height: 100vh;
}

#billboard .slider.slider-nav {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 1;
  cursor: pointer;
  width: 450px;
}

#billboard .btn-wrap {
  margin-top: 20px;
}

.slick-slide .thumbnail img {
  width: 100%;
  height: 358px;
  object-fit: cover;
}

.slider-nav .thumbnail-slide.slick-slide.slick-current.slick-active {
  opacity: 0;
}

@media only screen and (max-width: 1200px) {
  #billboard .banner-content {
    margin-top: 170px;
  }
}

@media only screen and (max-width: 820px) {
  .banner-content h2.section-title {
    font-size: 5em;
  }

  .banner-content p {
    font-size: 1.2em;
    width: 400px;
  }
}

@media only screen and (max-width: 670px) {
  #billboard .banner-content {
    left: -210px;
    text-align: left;
    margin-left: 20px;
  }

  .slick-slide .thumbnail img {
    height: 260px;
  }
}

@media only screen and (max-width: 540px) {
  #billboard .banner-content {
    left: -80px;
  }

  .banner-content h2.section-title {
    font-size: 4em;
  }

  .banner-content p {
    font-size: 1em;
    width: 300px;
  }
}

/*----- Expert Section
--------------------------------------------------------------*/
#expert-wrap {
  margin-top: -130px;
  position: absolute;
  right: 0;
  left: 0;
}

#expert-wrap .grid {
  align-items: end;
}

#expert-wrap .icon-box {
  width: 100%;
  height: 130px;
  display: flex;
  align-items: center;
  background: rgba(0, 0, 0, 0.2);
}

#expert-wrap .icon-box ul {
  display: flex;
  color: #ffd45a;
  margin: 0 auto;
  justify-content: center;
  align-items: center;
}

#expert-wrap .icon-box i.icon {
  font-size: 1.6em;
  padding-right: 25px;
}

#expert-wrap li {
  display: flex;
  align-items: center;
  padding-right: 90px;
}

#expert-wrap .icon-box a.title {
  font-size: 1.3em;
  font-weight: 700;
  line-height: 1.3;
  color: #fff;
}

#expert-wrap a.title:hover {
  color: #ffd45a;
}

#expert-wrap img.single-image {
  width: 15%;
}

@media only screen and (max-width: 1260px) {
  #expert-wrap .icon-box {
    width: 82%;
  }
}

@media only screen and (max-width: 1060px) {
  #expert-wrap li {
    padding-right: 40px;
    width: 30%;
  }
}

@media only screen and (max-width: 880px) {
  #expert-wrap {
    margin-top: 0;
  }

  #expert-wrap .icon-box {
    width: 100%;
    background: rgba(0, 0, 0, 1);
  }

  #expert-wrap li {
    flex-wrap: wrap;
  }

  #expert-wrap .icon-box i.icon {
    width: 100%;
    margin-bottom: 15px;
  }

  #expert-wrap .icon-box a.title {
    font-size: 1.1em;
  }
}

/*----- About Section
--------------------------------------------------------------*/
#about {
  position: relative;
  margin-top: 150px;
}

#about .company-detail {
  margin-top: 80px;
}

#about .company-detail .video-content {
  width: 45%;
  z-index: 3;
  margin-right: 85px;
}

#about .company-detail .video-player {
  position: relative;
  margin-bottom: 50px;
}

#about .video-player .icon {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 3;
  font-size: 3em;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

#about .detail-entry {
  width: 45%;
  z-index: 2;
}

#about .detail-entry .column {
  width: 85%;
  margin-top: 65px;
}

#about .column li {
  display: flex;
  align-items: center;
}

#about .column i.icon {
  font-size: 2em;
  color: #d6a51e;
  margin-right: 28px;
  display: inline-block;
  cursor: pointer;
}

#about .column .info-title a {
  display: block;
  font-size: 1.3em;
  font-weight: 600;
  padding-bottom: 15px;
  color: #222;
}

@media only screen and (max-width: 940px) {
  #about .company-detail .video-content {
    width: 100%;
    margin-right: 0;
  }

  #about .detail-entry {
    width: 85%;
  }
}

/*----- Services Section
--------------------------------------------------------------*/
#services .section-header p {
  font-size: 1.4em;
  width: 50%;
  margin: 0 auto;
}

#services .row > div {
  position: relative;
  margin-bottom: 30px;
  border-bottom: 10px;
}

#services .row > div:nth-child(3n + 3) {
  margin-right: 0;
}

#services .row > div .service-item {
  z-index: 1;
  position: relative;
  left: 0;
  padding-top: 22px;
}

#services .row > div .service-item:after {
  content: "";
  display: block;
  width: 100%;
  height: 2px;
  background: #222;
  transition: width 0.3s;
}

#services .row > div .service-item:hover::after {
  width: 0;
}

#services .service-item small {
  display: block;
  font-size: 12px;
  color: #000000;
  margin-bottom: 50px;
}

#services .row > div .service-item p {
  margin-bottom: 40px;
}

#services .service-count {
  font-size: 12.5em;
  line-height: 0.8em;
  font-weight: 900;
  color: #f1f1f1;
  position: absolute;
  bottom: 0px;
  right: 0;
  z-index: -1;
  user-select: none;
}

@media only screen and (max-width: 1185px) {
  #services .row > div {
    margin-right: 20px;
  }
}

@media only screen and (max-width: 674px) {
  #services .row > div {
    margin: 0 auto 40px;
  }

  #services .row > div:nth-child(3n + 3) {
    margin-right: 70px;
  }
}

/*----- Portfolio Section
--------------------------------------------------------------*/
.portfolio-style {
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.portfolio-style:nth-child(3n + 3) {
  margin-right: 0;
}

.portfolio-style img.portfolio-item {
  transition: transform 0.5s ease-in-out;
}

.portfolio-style:hover img.portfolio-item {
  transform: scale(1.1);
}

.portfolio-style figcaption {
  position: absolute;
  bottom: -55px;
  left: 0;
  right: 0;
  z-index: 3;
  text-align: center;
  background: #222;
  color: #fff;
  font-size: 0.8em;
  letter-spacing: 0.3em;
  padding: 15px;
  text-transform: uppercase;
  transition: bottom 0.3s ease-in-out;
}

.portfolio-style:hover figcaption {
  bottom: 0;
}

.portfolio-style h3 > a:hover {
  color: #ffd45a;
  text-decoration: none;
}

#portfolio .category-title {
  font-size: 15px;
}

#portfolio .slick-dots li button:before {
  font-size: 40px;
}

.tab-content .grid {
  padding-bottom: 60px;
}

#portfolio .tabs {
  margin: 75px auto 60px;
  justify-content: center;
}

#portfolio .tabs .tab {
  color: #222;
  padding: 5px 20px;
  margin-right: 30px;
  border-radius: 4px;
  cursor: pointer;
  transition: 0.3s ease-in-out;
}

#portfolio .tabs .tab.active,
#portfolio .tabs .tab:hover {
  color: #fff;
  background: #222;
}

/*----- Milestones Section
--------------------------------------------------------------*/
#milestones .header-element {
  width: 45%;
  margin-right: 90px;
  margin-bottom: 50px;
}

#milestones .header-element p {
  width: 90%;
  line-height: 2;
  color: #555;
}

.milestone-icon {
  display: flex;
  height: 100px;
  width: 100px;
  align-items: center;
  justify-content: center;
  font-size: 44px;
  color: #111;
  margin-bottom: 20px;
}

#milestones .milestones-chart {
  width: 45%;
  overflow: hidden;
}

.milestones-chart ul {
  text-transform: uppercase;
}

.milestones-chart li {
  border-bottom: 10px solid #e8e8e8;
  margin-bottom: 25px;
  width: 100%;
}

.milestones-chart .milestones-title {
  font-size: 0.8em;
  font-weight: 600;
  color: #222;
  letter-spacing: 0.1em;
  padding-bottom: 10px;
}

.milestones-chart li span {
  position: relative;
}

.milestones-chart li span.milestones {
  display: block;
  border-bottom: 10px solid #ffcb39;
  margin-bottom: -10px;
  animation-duration: 3s;
}

.milestones-chart .milestones.ss-animated li span {
  width: 90%;
  transition: width 0.2s ease-out;
}

.milestones-chart li span.twenty-percent {
  width: 20%;
  animation-name: twenty-percent;
}

.milestones-chart li span.thirty-percent {
  width: 30%;
  animation-name: thirty-percent;
}

.milestones-chart li span.forty-percent {
  width: 40%;
  animation-name: forty-percent;
}

.milestones-chart li span.fifty-percent {
  width: 50%;
  animation-name: fifty-percent;
}

.milestones-chart li span.sixty-percent {
  width: 60%;
  animation-name: sixty-percent;
}

.milestones-chart li span.seventy-percent {
  width: 70%;
  animation-name: seventy-percent;
}

.milestones-chart li span.eighty-percent {
  width: 80%;
  animation-name: eighty-percent;
}

.milestones-chart li span.ninety-percent {
  width: 90%;
  animation-name: ninety-percent;
}

@keyframes twenty-percent {
  0% {
    width: 0%;
  }

  20% {
    width: 20%;
    background-color: #ffd45a;
  }
}

@keyframes thirty-percent {
  0% {
    width: 0%;
  }

  30% {
    width: 30%;
    background-color: #ffd45a;
  }
}

@keyframes forty-percent {
  0% {
    width: 0%;
  }

  40% {
    width: 40%;
    background-color: #ffd45a;
  }
}

@keyframes fifty-percent {
  0% {
    width: 0%;
  }

  50% {
    width: 50%;
    background-color: #ffd45a;
  }
}

@keyframes sixty-percent {
  0% {
    width: 0%;
  }

  60% {
    width: 60%;
    background-color: #ffd45a;
  }
}

@keyframes seventy-percent {
  0% {
    width: 0%;
  }

  70% {
    width: 70%;
    background-color: #ffd45a;
  }
}

@keyframes eighty-percent {
  0% {
    width: 0%;
  }

  80% {
    width: 80%;
    background-color: #ffd45a;
  }
}

@keyframes ninety-percent {
  0% {
    width: 0%;
  }

  90% {
    width: 90%;
    background-color: #ffd45a;
  }
}

@media only screen and (max-width: 980px) {
  #milestones .header-element {
    margin-right: 30px;
  }
}

@media only screen and (max-width: 740px) {
  #milestones .header-element {
    width: 85%;
  }

  #milestones .milestones-chart {
    width: 80%;
  }
}

/*----- Achievement Section
--------------------------------------------------------------*/
#achievement {
  margin-top: 100px;
}

.achievement-content .column {
  display: flex;
  width: 18%;
  align-items: center;
  margin-right: 80px;
  margin-bottom: 50px;
}

.achievement-content .column i.icon {
  font-size: 5em;
  color: #ffcb39;
  padding-right: 30px;
}

.achievement-item .achievement-count {
  font-size: 2em;
  line-height: 1em;
  color: #222;
  font-weight: 800;
}

.achievement-item .achievement-title {
  font-size: 1em;
  font-weight: 400;
}

@media only screen and (max-width: 980px) {
  .achievement-content .column i.icon {
    font-size: 4em;
  }

  .achievement-item .achievement-count {
    font-size: 2.5em;
  }
}

@media only screen and (max-width: 780px) {
  .achievement-content .column {
    width: 25%;
  }
}

@media only screen and (max-width: 520px) {
  .achievement-content .column {
    width: 60%;
    margin: 0 auto 30px;
  }
}

/*----- Testimonial Section
--------------------------------------------------------------*/
#testimonial {
  background: url(images/review-bg.jpg) no-repeat center;
  width: 100%;
  height: 624px;
  padding: 120px 0;
  /*margin-bottom: 150px;*/
  background-attachment: fixed;
  background-size: cover;
}

#testimonial .testimonial-block {
  color: #fff;
  margin: 60px auto;
  width: 80%;
  position: relative;
}

#testimonial blockquote {
  font-family: "playfair Display", Georgia, serif;
  font-size: 2.1em;
  line-height: 1.8;
  font-weight: 500;
  padding-bottom: 60px;
  margin: 0;
}

#testimonial blockquote:before {
  content: "\e90d";
  font-family: "icomoon";
  font-size: 1.5em;
  color: #fff;
  position: absolute;
  top: -50px;
  left: -55px;
}

#testimonial .author-detail {
  font-size: 1.2em;
  line-height: 1;
  color: #d8d8d8;
  display: flex;
}

#testimonial .author-name {
  font-weight: 700;
  border-right: 1px solid #fff;
  padding-right: 10px;
  margin-right: 10px;
}

#testimonial .slick-dots {
  right: 115px;
  bottom: 110px;
  z-index: 2;
  width: 15%;
  text-align: right;
}

#testimonial .slick-dots li.slick-active button:before {
  color: #ffcb39;
  opacity: 1;
}

#testimonial .slick-dots li button:before {
  font-size: 70px;
  color: #fff;
  opacity: 1;
}

@media only screen and (max-width: 720px) {
  #testimonial {
    padding: 60px 0;
  }

  #testimonial blockquote {
    font-size: 1.8em;
  }

  #testimonial .slick-dots {
    bottom: 20px;
    width: 35%;
  }
}

@media only screen and (max-width: 600px) {
  #testimonial {
    padding: 20px 0;
  }

  #testimonial blockquote {
    font-size: 1.6em;
    padding-bottom: 40px;
  }

  #testimonial .slick-dots {
    right: 0;
    bottom: 30px;
    left: 0;
    width: 100%;
    text-align: center;
  }
}

/*----- Our Team Section
--------------------------------------------------------------*/
#our-team {
  margin-bottom: 50px;
  position: relative;
}

#our-team .section-header {
  width: 45%;
  margin-right: 30px;
}

#our-team .header-element p {
  width: 30%;
}

#our-team .team-content {
  margin-top: 80px;
}

.team-item {
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.team-item:before {
  content: "";
  position: absolute;
  background: rgba(0, 0, 0, 0);
  z-index: 3;
  width: 100%;
  height: 100%;
  transition: all 0.3s ease-in-out;
}

.team-item:hover:before {
  background: rgba(0, 0, 0, 0.8);
}

.team-item .description {
  width: 80%;
  position: absolute;
  bottom: -90px;
  left: 30px;
  z-index: 5;
  color: #fff;
  transition: all 0.3s ease-in-out;
}

.team-item:hover .description {
  transform: translateY(-150px);
}

.team-item .description p {
  font-size: 14px;
  margin-top: 20px;
  opacity: 0;
  transition: all 0.3s ease-in-out;
}

.team-item:hover .description p {
  opacity: 1;
}

@media only screen and (max-width: 1280px) {
  .pattern-overlay:before {
    left: -165px;
  }
}

/*----- Latest Blog Section
--------------------------------------------------------------*/
#latest-blog {
  background-color: #f1f1f1;
}

#latest-blog .post-title {
  margin: 0;
}

#latest-blog .post-content {
  margin-top: 100px;
}

#latest-blog .column.left-post figure {
  margin-bottom: 30px;
}

#latest-blog .column .meta-date {
  padding-bottom: 15px;
}

#latest-blog .post-list article {
  display: flex;
  margin-bottom: 30px;
}

#latest-blog .post-list figure {
  width: 28%;
  margin-right: 40px;
}

#latest-blog .post-list .post-item {
  width: 70%;
}

@media only screen and (max-width: 1140px) {
  #latest-blog .post-content .column.left-post {
    margin-right: 25px;
  }
}

@media only screen and (max-width: 800px) {
  #latest-blog .post-content .column {
    width: 95%;
    margin-bottom: 50px;
  }
}

/*----- Footer Section
--------------------------------------------------------------*/
#footer {
  background: url(images/map-bg.png) no-repeat center;
  width: 100%;
  background-attachment: fixed;
  background-size: cover;
}

.contact-content {
  margin: 70px auto;
}

.contact-content .grid {
  align-items: end;
}

.contact-content .section-header {
  margin-right: 115px;
}

.contact-content .section-title {
  font-size: 3em;
}

/*----- Footer Bottom Section
--------------------------------------------------------------*/
#footer-bottom {
  padding: 60px 0;
}

#footer-bottom ul {
  display: flex;
}

#footer-bottom li {
  padding-right: 30px;
}

#footer-bottom .copyright a {
  color: #b6b6b6;
}

#footer-bottom a:hover {
  color: #ffd45a;
}

/* .nav__list-item */
@media screen and (max-width: 991px) {
  .nav__list-item {
    font-size: 1.2em;
    line-height: 1.5em;
  }

  .menu-btn {
    top: 10px;
    right: 10px;
  }

  img.portfolio-item {
    height: 240px;
  }

  .portfolio-style figcaption {
    bottom: -75px;
  }
}