@charset "UTF-8";
/*!
 * Ferferi | HTML Business Template
 * Author: HamidSepehr 
 * Copyright 2021 © HamidSepehr (https://www.templatemonster.com/authors/hamidsepehr/)
 * Licensed under TemplateMonster (https://www.templatemonster.com/licenses/)
 *
 * "Life is balance of holding on and letting go." --Rumi
 *
 */
/*------------------------------------------------------------------
[Table of contents]

1.0 Variables
2.0 Google Fonts
3.0 Set Font-families
4.0 Custom Cursor Styles
5.0 General Styles
6.0 Home Page
7.0 About Page
8.0 Services Page
9.0 Works Page
10.0 Contact Page
11.0 Blog Page
12.0 Single Blog Page
13.0 Single Works Page
14.0 Footer 
15.0 Animations
16.0 Media Queries

-------------------------------------------------------------------*/
/*--------------------------------------------------------------
1.0 Variables
--------------------------------------------------------------*/
/*--------------------------------------------------------------
2.0 Google Fonts
--------------------------------------------------------------*/
/*To change the fonts, get the font link from (https://www.google.com/fonts) and replace with this line, then update the font-family section below.*/
@import url("https://fonts.googleapis.com/css?family=Roboto:300,400,700|Noto+Serif:400,700&display=swap");
/*--------------------------------------------------------------
3.0 Set Font-families
--------------------------------------------------------------*/
html {
    overflow-x: hidden;
  }
body {
  font-family: 'Roboto', sans-serif; }

h1, h2 {
  /*font-family: 'Noto Serif', serif;*/
  font-family: 'Great Vibes', serif; }

/*--------------------------------------------------------------
5.0 General Styles
--------------------------------------------------------------*/
.overflow-x-hidden {
  overflow-x: hidden; }

.primary-color {
  color: #e3b04a; }

.line-height-1 {
  line-height: 1; }

.first-letter:first-letter {
  font-size: 4em;
  font-weight: 700;
  text-transform: uppercase;
  float: left;
  padding-right: 10px;
  line-height: 0.9; }

.bg-main {
  background-color: #e3b04a; }

.bg-sub {
  background-color: #f2eee0; }

span.line {
  width: 60px;
  height: 1px;
  background-color: #65727e;
  display: inline-block; }

.opacity-50 {
  opacity: 0.5; }

.text-semilight {
  color: #d3d8dc; }

.dot-separator {
  width: 5px;
  height: 5px;
  background-color: rgba(33, 37, 41, 0.7);
  border-radius: 50%;
  vertical-align: middle;
  margin: 0 5px;
  display: inline-block; }

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

.page-header {
  /*.info {
  	position: absolute;
  	bottom: 10px;
  	left: 10px;
  	right: 10px;
  	background-color: white;
  }*/ }
  .page-header .image-wrapper {
    position: relative; }

.site-logo {
  width: 100px; }

/*--------------------------------------------------------------
6.0 Home Page
--------------------------------------------------------------*/
/*Top Section*/
section.top .owl-item.active {
  z-index: 999;
  position: relative; }
  section.top .owl-item.active img {
    -webkit-transform: scale(1);
            transform: scale(1); }
section.top .owl-item {
  -webkit-perspective: 1000px;
          perspective: 1000px; }
  section.top .owl-item img {
    -webkit-transition: all 600ms ease;
    transition: all 600ms ease;
    -webkit-transform: scale(1.2);
            transform: scale(1.2);
    -webkit-filter: contrast(1.1) saturate(1.1) brightness(0.9);
            filter: contrast(1.1) saturate(1.1) brightness(0.9); }
section.top .slider-item .title {
  position: relative;
  z-index: 99;
  display: inline-block; }
  section.top .slider-item .title h2 {
    -webkit-transition: all 600ms ease;
    transition: all 600ms ease;
    -webkit-transform: translateY(100%);
            transform: translateY(100%);
    margin: 5px 10px;
    -webkit-transition-delay: 300ms;
            transition-delay: 300ms;
    color: #e3b04a; }
  section.top .slider-item .title:before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 0;
    background-color: white;
    z-index: -1;
    -webkit-transition: all 600ms ease;
    transition: all 600ms ease; }
section.top .slider-item .subtitle p {
  -webkit-transition: all 600ms ease;
  transition: all 600ms ease;
  background-color: white;
  display: inline-block;
  padding: 5px 10px;
  -webkit-transition-delay: 600ms;
          transition-delay: 600ms;
  -webkit-transform: translateY(-100%);
          transform: translateY(-100%); }
section.top .owl-item.active .info .title:before {
  width: 100%; }
section.top .owl-item.active .info .title h2 {
  -webkit-transform: translateY(0);
          transform: translateY(0); }
section.top .owl-item.active .info .subtitle p {
  -webkit-transform: translateY(0);
          transform: translateY(0); }

/*Services Section*/
.services span.arrow {
  display: inline-block;
  width: 20px;
  height: 1px;
  background-color: #65727e;
  -webkit-transition: all 300ms ease;
  transition: all 300ms ease; }
.services .service-wrapper {
  min-height: 200px; }
  .services .service-wrapper i {
    -webkit-transition: all 300ms ease;
    transition: all 300ms ease;
    display: inline-block;
    opacity: 0.2;
    line-height: 1; }
  .services .service-wrapper:hover span.arrow {
    width: 40px; }
  .services .service-wrapper:hover i {
    -webkit-transform: rotate(-30deg);
            transform: rotate(-30deg); }

/*Works Section*/
section.works .title {
  position: relative;
  z-index: 99;
  display: inline-block; }
  section.works .title div {
    -webkit-transition: all 600ms ease;
    transition: all 600ms ease;
    -webkit-transform: translateY(100%);
            transform: translateY(100%);
    margin: 5px 10px; }
  section.works .title:before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 0;
    background-color: #e3b04a;
    z-index: -1;
    -webkit-transition: all 600ms ease;
    transition: all 600ms ease;
    -webkit-transition-delay: 300ms;
            transition-delay: 300ms; }
section.works .subtitle p {
  -webkit-transition: all 600ms ease;
  transition: all 600ms ease;
  background-color: white;
  display: inline-block;
  padding: 5px 10px;
  -webkit-transform: translateY(-100%);
          transform: translateY(-100%); }
section.works .work-wrapper {
  position: relative;
  overflow: hidden; }
  section.works .work-wrapper .info {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 2em; }
  section.works .work-wrapper img {
    -webkit-transition: all 600ms ease;
    transition: all 600ms ease; }
  section.works .work-wrapper:hover .title:before {
    width: 100%;
    -webkit-transition-delay: 0ms;
            transition-delay: 0ms; }
  section.works .work-wrapper:hover .title div {
    -webkit-transition-delay: 300ms;
            transition-delay: 300ms;
    -webkit-transform: translateY(0);
            transform: translateY(0); }
  section.works .work-wrapper:hover .subtitle p {
    -webkit-transition-delay: 600ms;
            transition-delay: 600ms;
    -webkit-transform: translateY(0);
            transform: translateY(0); }
  section.works .work-wrapper:hover img {
    -webkit-transform: scale(1.1);
            transform: scale(1.1); }

/*Statistics Section*/
/*Partners Section*/
section.partners .logo-wrapper img {
  opacity: 0.6;
  -webkit-transition: all 300ms ease;
  transition: all 300ms ease; }
section.partners .logo-wrapper:hover img {
  opacity: 1; }

/*Testimonials Section*/
section.testimonials .nav {
  background-color: #e3b04a;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  padding: 5px 10px;
  cursor: pointer;
  -webkit-transition: all 300ms ease;
  transition: all 300ms ease; }
  section.testimonials .nav:hover, section.testimonials .nav:focus {
    -webkit-transform: scale(1.1);
            transform: scale(1.1); }

/*Call to Action Section*/
.cta-2 .cta-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -webkit-filter: saturate(1.2) brightness(0.8);
          filter: saturate(1.2) brightness(0.8); }

/*Blog Section*/
section.blog-1 .image-wrapper {
  position: relative;
  overflow: hidden; }
  section.blog-1 .image-wrapper img {
    -webkit-transition: all 600ms ease;
    transition: all 600ms ease; }
  section.blog-1 .image-wrapper:hover img {
    -webkit-transform: scale(1.1);
            transform: scale(1.1); }
  section.blog-1 .image-wrapper:hover .arrow {
    opacity: 1;
    -webkit-transform: scale(1);
            transform: scale(1); }
section.blog-1 .arrow {
  position: absolute;
  bottom: 20px;
  right: 20px;
  background-color: white;
  padding: 5px 10px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-transition: all 600ms ease;
  transition: all 600ms ease;
  opacity: 0;
  -webkit-transform: scale(1.2);
          transform: scale(1.2); }

section.blog-2 .image-wrapper {
  position: relative;
  overflow: hidden; }
  section.blog-2 .image-wrapper .category {
    position: absolute;
    top: 20px;
    left: 20px;
    background-color: #e3b04a;
    color: white;
    padding: 5px 10px; }
  section.blog-2 .image-wrapper img {
    -webkit-transition: all 600ms ease;
    transition: all 600ms ease; }
  section.blog-2 .image-wrapper:hover img {
    -webkit-transform: scale(1.1) rotate(2deg);
            transform: scale(1.1) rotate(2deg); }

section.blog-3 .blog-wrapper {
  position: relative;
  overflow: hidden; }
  section.blog-3 .blog-wrapper img {
    -webkit-transition: all 600ms ease;
    transition: all 600ms ease;
    -webkit-transform: scale(1.1);
            transform: scale(1.1); }
  section.blog-3 .blog-wrapper .title {
    position: absolute;
    bottom: 0;
    left: 0;
    background-color: white;
    padding: 20px; }
  section.blog-3 .blog-wrapper .date {
    position: absolute;
    top: 20px;
    right: 0;
    background-color: #e3b04a;
    padding: 10px 15px; }
    section.blog-3 .blog-wrapper .date div:last-of-type {
      font-size: 70%; }
  section.blog-3 .blog-wrapper:hover img {
    -webkit-transform: scale(1);
            transform: scale(1); }

/*--------------------------------------------------------------
7.0 About Page
--------------------------------------------------------------*/
/*--------------------------------------------------------------
8.0 Services Page
--------------------------------------------------------------*/
.page-services .service-item .service-image-wrapper {
  position: relative;
  overflow: hidden; }
  .page-services .service-item .service-image-wrapper img {
    -webkit-transition: all 600ms ease;
    transition: all 600ms ease; }
    .page-services .service-item .service-image-wrapper img:last-child {
      position: absolute;
      top: 0;
      left: 0;
      -webkit-transform: scale(1.1);
              transform: scale(1.1);
      opacity: 0; }
  .page-services .service-item .service-image-wrapper:hover img:first-child, .page-services .service-item .service-image-wrapper:focus img:first-child {
    -webkit-transform: scale(1.1);
            transform: scale(1.1);
    opacity: 0; }
  .page-services .service-item .service-image-wrapper:hover img:last-child, .page-services .service-item .service-image-wrapper:focus img:last-child {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 1; }

/*--------------------------------------------------------------
9.0 Works Page
--------------------------------------------------------------*/
/*--------------------------------------------------------------
10.0 Contact Page
--------------------------------------------------------------*/
/*--------------------------------------------------------------
11.0 Blog Page
--------------------------------------------------------------*/
/*--------------------------------------------------------------
12.0 Single Blog Page
--------------------------------------------------------------*/
.page-single-blog .avatar {
  width: 80px;
  height: 80px; }
.page-single-blog .avatar-reply {
  width: 60px;
  height: 60px; }
.page-single-blog .social-share .list-inline-item {
  margin-right: 0; }
.page-single-blog .social-share a {
  text-decoration: none;
  width: 30px;
  height: 30px;
  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;
  border-radius: 50%;
  background-color: #eac376;
  color: white; }
  .page-single-blog .social-share a:hover, .page-single-blog .social-share a:focus {
    background-color: #e3b04a; }
.page-single-blog .sidebar .btn-outline-secondary {
  border-color: #d3d8dc; }
.page-single-blog .sidebar .recent-posts h6 {
  font-size: 0.9rem; }
.page-single-blog .sidebar .recent-posts .blog-meta {
  font-size: 90%; }
.page-single-blog .sidebar .recent-post-img {
  width: 100px; }
.page-single-blog .sidebar .categories a {
  text-decoration: none; }
.page-single-blog .stats {
  border-top: 1px solid #d3d8dc;
  padding-top: 20px; }
  .page-single-blog .stats .like {
    cursor: pointer;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none; }
    .page-single-blog .stats .like .icon-liked, .page-single-blog .stats .like .icon-normal {
      -webkit-transition: all 300ms ease;
      transition: all 300ms ease;
      position: absolute;
      left: 0;
      top: 0; }
    .page-single-blog .stats .like .icon-liked {
      color: #ff1919;
      -webkit-transform: translateY(100%);
              transform: translateY(100%); }
  .page-single-blog .stats .liked .icon-normal {
    -webkit-transform: translateY(-100%);
            transform: translateY(-100%); }
  .page-single-blog .stats .liked .icon-liked {
    -webkit-transform: translateY(0);
            transform: translateY(0); }
  .page-single-blog .stats .like-wrapper {
    position: relative;
    overflow: hidden;
    display: inline-block;
    width: 18px;
    height: 25px;
    vertical-align: middle; }
.page-single-blog .comment-stats .like {
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none; }
  .page-single-blog .comment-stats .like .icon-liked, .page-single-blog .comment-stats .like .icon-normal {
    -webkit-transition: all 300ms ease;
    transition: all 300ms ease;
    position: absolute;
    left: 0;
    top: 0; }
  .page-single-blog .comment-stats .like .icon-liked {
    color: #ff1919;
    -webkit-transform: translateY(100%);
            transform: translateY(100%); }
.page-single-blog .comment-stats .liked .icon-normal {
  -webkit-transform: translateY(-100%);
          transform: translateY(-100%); }
.page-single-blog .comment-stats .liked .icon-liked {
  -webkit-transform: translateY(0);
          transform: translateY(0); }
.page-single-blog .comment-stats .like-wrapper {
  position: relative;
  overflow: hidden;
  display: inline-block;
  width: 18px;
  height: 25px;
  vertical-align: middle; }

/*--------------------------------------------------------------
13.0 Single Works Page
--------------------------------------------------------------*/
.page-single-work .page-header .image-wrapper {
  position: relative; }
  .page-single-work .page-header .image-wrapper .info-wrapper {
    position: absolute;
    bottom: 20px;
    left: 20px; }

/*--------------------------------------------------------------
13.0 Single Works Page
--------------------------------------------------------------*/
.page-single-blog .page-header .image-wrapper {
  position: relative; }
  .page-single-blog .page-header .image-wrapper .info-wrapper {
    position: absolute;
    bottom: 20px;
    left: 20px;
    width: calc(100% - 40px); }

/*--------------------------------------------------------------
14.0 Footer
--------------------------------------------------------------*/
footer.site-footer {
  background-color: #e3b04a;
  font-size: 90%; }
  footer.site-footer .logo {
    width: 100px; }
  footer.site-footer a {
    text-decoration: none;
    color: #212529; }
    footer.site-footer a:hover, footer.site-footer a:focus {
      color: #f1f1f1; }
  footer.site-footer .cp {
    border-top: 1px solid rgba(33, 37, 41, 0.3); }
    footer.site-footer .cp a {
      color: #212529; }
      footer.site-footer .cp a:hover, footer.site-footer .cp a:focus {
        color: #f1f1f1; }

/*--------------------------------------------------------------
15.0 Animations
--------------------------------------------------------------*/
/*--------------------------------------------------------------
16.0 Media Queries
--------------------------------------------------------------*/
@media only screen and (max-width: 812px) {
  section.top .owl-item {
    visibility: hidden; }
    section.top .owl-item.active {
      visibility: visible; }
    section.top .owl-item .info {
      background-color: white;
      padding-top: 30px; }
      section.top .owl-item .info .title h2 {
        color: #f1f1f1; }
      section.top .owl-item .info .title:before {
        background-color: #e3b04a; }
      section.top .owl-item .info .subtitle p {
        background-color: #e3b04a; }
    section.top .owl-item img {
      min-height: 60vh;
      -o-object-fit: cover;
         object-fit: cover; }
  section.top .owl-dots {
    text-align: left;
    margin-top: 30px !important; }
    section.top .owl-dots .owl-dot span {
      border-color: #212529; }
    section.top .owl-dots .owl-dot.active span {
      background-color: #212529; }

  .w-xs-100 {
    width: 100%; } }
@media only screen and (min-width: 813px) {
  section.top .slider-item {
    position: relative; }
    section.top .slider-item .info {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      padding: 2em; }
  section.top .owl-dots {
    position: absolute;
    right: 2em;
    bottom: 2em; } }
/* :) Let's meke internet BEAUTIFUL*/
/*
 _       __     __       ______                    __
| |     / /__  / /_     /_  __/_______  ____  ____/ /_  __
| | /| / / _ \/ __ \     / / / ___/ _ \/ __ \/ __  / / / /
| |/ |/ /  __/ /_/ /    / / / /  /  __/ / / / /_/ / /_/ /
|__/|__/\___/_.___/    /_/ /_/   \___/_/ /_/\__,_/\__, /
                                                 /____/
*/

/*# sourceMappingURL=styles.css.map */