/*---------------------------------------------------------------------------------------
* Template Name      :  RectCV - Personal Bootstrap 4 HTML Template                      |
* Author             :  Narek Sukiasyan                                                  |
* Version            :  1.1.0                                                            |
* Created            :  April 2020                                                       |
* Updated            :  February 2021                                                    |
* File Description   :  Main css file of the template                                    |
*----------------------------------------------------------------------------------------
*/
/******************
Table of Content

    1. SETTINGS
        1.1 Preloader
    2. HELPER
        2.1 Custom Alert
        2.2 Buttons
        2.3 SOCIAL ICONS
        2.4 OWL SLIDER
        2.5 RETURN TOP BUTTON
    3. HEADER
        3.1 General Header Style
        3.2 Horizontal Header Style
        3.3 Mobile Toggler Button
    4. HOME SECTION
        4.1 Parallax Element Positions
        4.2 Background Animation Keyframe
        4.3 Introduction Area
        4.4 Scroll Down Button
    5. ABOUT SECTION
    6. SERVICE SECTION
    7. PORTFOLIO SECTION
    8. RESUME SECTION
    9. TESTIMONIAL SECTION
    10. BLOG SECTION
    11. CONTACT SECTION
    12. FACTS SECTION

******************/
/*Poppins*/
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700;800;900&display=swap");
/*Open Sans*/
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700;800&display=swap");
body {
  font-family: "Open Sans", sans-serif;
  font-size: 16px;
  line-height: 1.7;
}

h1, h2 {
  font-family: "Poppins", sans-serif;
}

/*=================
    1. SETTINGS
==================*/
::-moz-selection {
  background: rgba(166, 175, 189, 0.3);
}
::selection {
  background: rgba(166, 175, 189, 0.3);
}

h1 {
  font-size: 45px;
}

h2 {
  font-size: 32px;
  position: relative;
}

h1, h2 {
  letter-spacing: 2px;
}

p {
  font-size: 1em;
}

a {
  text-decoration: none;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

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

a:focus {
  outline: none;
}

a:before {
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

a:after {
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

mark {
  color: #fff;
  font-weight: 600;
}

article h2 {
  font-weight: 400;
  font-size: 2.5em;
}

/* 1.1 Preloader */
#preloader {
  width: 100%;
  height: 100%;
  z-index: 9999999;
  position: fixed;
  top: 0;
  left: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  overflow: hidden;
}

#preloader .loader {
  display: inline-block;
  width: 50px;
  height: 50px;
  border-radius: 50%;
}

blockquote {
  padding: 10px 20px;
}

blockquote footer {
  display: block;
  font-size: 0.8em;
}

.img-fluid {
  width: 100%;
}

/*=================
    2. HELPER
==================*/
main {
  overflow-x: hidden;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

section,
div.section {
  position: relative;
  padding: 100px 0px;
}

section .section-title,
div.section .section-title {
  position: relative;
  margin-bottom: 3rem;
}

section .section-title h2.rect_heading,
div.section .section-title h2.rect_heading {
  position: relative;
  padding: 16px;
  margin: 0 0 16px 0;
  text-transform: uppercase;
  display: inline-block;
  position: relative;
  height: 72px;
  -webkit-transition: all 2s cubic-bezier(0.21, 1, 0.84, 1.01);
  transition: all 2s cubic-bezier(0.21, 1, 0.84, 1.01);
}

section .section-title h2.rect_heading:before,
div.section .section-title h2.rect_heading:before {
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  bottom: -5px;
  right: -5px;
  -webkit-transition: inherit;
  transition: inherit;
}

section .section-title h2.text_background,
div.section .section-title h2.text_background {
  position: relative;
  text-transform: uppercase;
  font-weight: 700;
  z-index: 2;
  font-size: 3em;
  margin: 3rem 0 1rem;
}

section .section-title h2.text_background span.heading_background,
div.section .section-title h2.text_background span.heading_background {
  position: absolute;
  display: block;
  width: 100%;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  top: 0;
  font-size: 140px;
  font-weight: 900;
  line-height: 0.1;
  z-index: 1;
}

section.home {
  padding: 0;
}

section.home .mono-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
}

section.home .mono-background .mono-background-inner {
  height: 100%;
  overflow: hidden;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 55%;
          flex: 0 0 55%;
  position: relative;
}

section.home .mono-background .mono-background-inner img {
  position: absolute;
  height: 100%;
  width: auto;
}

section.home .mono-background .mono-background-inner img.img-align-center {
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
}

section.home .mono-background .mono-background-inner img.img-align-right {
  right: 0;
}

section.home .mono-background .mono-background-inner img.img-align-left {
  left: 0;
}

@-webkit-keyframes header-animation {
  0% {
    right: -5px;
  }
  30% {
    right: -5px;
  }
  80% {
    right: calc(100% - 5px);
  }
  100% {
    right: calc(100% - 5px);
  }
}

@keyframes header-animation {
  0% {
    right: -5px;
  }
  30% {
    right: -5px;
  }
  80% {
    right: calc(100% - 5px);
  }
  100% {
    right: calc(100% - 5px);
  }
}

/* 2.1 Custom Alert */
.custom-alert {
  position: fixed;
  top: 4px;
  right: 4px;
  z-index: 999999;
  font-weight: 500;
  padding: 15px 30px;
  border-radius: 5px;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  display: none;
}

.custom-alert-success {
  background-color: #28980c;
  color: #fff;
}

.custom-alert-warning {
  background-color: #c3270d;
  color: #fff;
}

/* 2.2 Buttons */
.btn {
  display: inline-block;
  text-align: center;
  border-radius: 0;
  padding: 10px 25px;
  outline: none;
  font-weight: 500;
  -webkit-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}

.btn-outline-primary {
  font-weight: 500;
}

.btn-lg {
  padding: 15px 40px;
  font-size: 1em;
}

.btn-sm {
  padding: 5px 30px;
}

.btn-loading {
  position: relative;
}

.btn-loading:before {
  content: "";
  width: 20px;
  height: 20px;
  position: absolute;
  border-radius: 50%;
  left: 50%;
}

/* 2.3 SOCIAL ICONS */
.social-icons {
  margin: 0;
  display: inline-block;
}

.social-icons li a {
  display: block;
  width: 40px;
  height: 40px;
  font-size: 1em;
  line-height: 40px;
  text-align: center;
}

.social-icons .list-inline-item:not(:last-child) {
  margin-right: 5px;
}

/* 2.4 OWL SLIDER */
.owl-nav {
  text-align: center;
  margin-top: 10px;
}

.owl-nav button {
  display: inline-block;
  cursor: pointer;
  margin: 5px 20px;
  outline: none;
}

.owl-nav button span {
  font-size: 3em;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
}

.owl-dots {
  margin-top: 10px;
  text-align: center;
}

.owl-dots .owl-dot {
  outline: none;
}

.owl-dots .owl-dot span {
  height: 5px;
  width: 12px;
  display: block;
  margin: 5px 4px;
  outline: none;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
}

.owl-dots .owl-dot.active span {
  width: 20px;
}

/* 2.5 RETURN TOP BUTTON */
.toTop {
  text-align: center;
  position: fixed;
  bottom: 25px;
  height: 45px;
  width: 45px;
  z-index: 10000;
  right: 30px;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
  line-height: 45px;
  display: none;
}

.parallax-mirror:before {
  content: "";
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  position: absolute;
  z-index: 1;
}

/*=================
    3. HEADER
==================*/
/* 3.1 General Header Style */
header {
  z-index: 1000;
  position: fixed;
  top: 0;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

header .site-logo a {
  font-family: "Poppins", sans-serif;
  font-size: 30px;
}

/* 3.2 Horizontal Header Style */
header.horizontal_header {
  width: 100%;
  padding: 0;
  -webkit-transition: none;
  transition: none;
  /* 3.3 Mobile Toggler Button */
}

header.horizontal_header .header-ins {
  width: 100%;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

header.horizontal_header ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

header.horizontal_header ul li {
  margin-right: 0;
}

header.horizontal_header ul li a {
  padding: 5px 15px;
  font-size: 1em;
  position: relative;
}

header.horizontal_header .button-toggler {
  border: none;
  outline: none;
  cursor: pointer;
}

header.horizontal_header .button-toggler span {
  display: block;
  margin-bottom: 5px;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  width: 25px;
  height: 2px;
}

header.horizontal_header .button-toggler span:last-child {
  margin-bottom: 0;
}

header.horizontal_header .button-toggler:focus {
  outline: none;
}

header.horizontal_header .button-toggler.pressed span {
  width: 0;
}

header.horizontal_header .button-toggler.pressed span:first-child {
  -webkit-transform: translate(0, 7px) rotate(45deg);
          transform: translate(0, 7px) rotate(45deg);
  width: 25px;
}

header.horizontal_header .button-toggler.pressed span:last-child {
  -webkit-transform: translate(0, -7px) rotate(-45deg);
          transform: translate(0, -7px) rotate(-45deg);
  width: 25px;
}

@media (min-width: 992px) {
  header.horizontal_header ul li a:after {
    content: "";
    position: absolute;
    height: 3px;
    left: 50%;
    bottom: -7px;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    -webkit-transform: translate(-50%, 0) translateZ(0);
            transform: translate(-50%, 0) translateZ(0);
    width: 0;
  }
  header.horizontal_header ul li a:hover:after, header.horizontal_header ul li a.active:after {
    width: calc(100% - 2.2em);
  }
}

/*======================
    4. HOME SECTION
======================*/
section.home {
  height: 100vh;
  background-size: cover;
  background-position: center;
  /* 4.1 Parallax Element Positions */
}

section.home .background-particle {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

section.home .background-parallax {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

section.home .background-parallax .element {
  width: 0;
  height: 0;
  position: absolute;
  -webkit-animation-name: background-animation;
          animation-name: background-animation;
  -webkit-animation-duration: 5s;
          animation-duration: 5s;
  animation-direction: alternate-reverse;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-animation-timing-function: ease;
          animation-timing-function: ease;
  border-radius: 50%;
}

section.home .background-parallax .element.element1 {
  top: 24% !important;
  left: 78% !important;
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
}

section.home .background-parallax .element.element6 {
  top: 80% !important;
  left: 22% !important;
  -webkit-animation-delay: 0.5s;
          animation-delay: 0.5s;
}

section.home .background-parallax .element.element3 {
  top: 61% !important;
  left: 57% !important;
  -webkit-animation-delay: 0s;
          animation-delay: 0s;
}

section.home .background-parallax .element.element4 {
  top: 79% !important;
  left: 88% !important;
  -webkit-animation-delay: 0.5s;
          animation-delay: 0.5s;
}

section.home .background-parallax .element.element5 {
  top: 23% !important;
  left: 18% !important;
  -webkit-animation-delay: 1.7s;
          animation-delay: 1.7s;
}

section.home .background-parallax .element.element2 {
  top: 50% !important;
  left: 37% !important;
  -webkit-animation-delay: 1.5s;
          animation-delay: 1.5s;
}

section.home h1 {
  position: relative;
  padding: 16px;
  text-transform: uppercase;
  display: inline-block;
  margin: 0;
}

section.home h1:before {
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  bottom: -5px;
  right: -5px;
}

/* 4.2 Background Animation Keyframe */
@-webkit-keyframes background-animation {
  0% {
    opacity: 0.4;
  }
  100% {
    opacity: 1;
  }
}
@keyframes background-animation {
  0% {
    opacity: 0.4;
  }
  100% {
    opacity: 1;
  }
}

/* 4.3 Introduction Area */
div.introduction {
  margin: auto;
  z-index: 10;
  position: relative;
}

h1 span {
  display: inline-block;
}

p.welcome_text {
  font-size: 20px;
  margin: 0;
}

/* 4.4 Scroll Down Button */
.scroll-down {
  position: absolute;
  z-index: 10;
  bottom: 40px;
  width: 100%;
  left: 0;
}

.scroll-down a {
  display: block;
}

.scroll-down .scroll-title {
  margin-bottom: 8px;
}

.scroll-down .scroll-mouse {
  width: 30px;
  height: 50px;
  border-radius: 20px;
  position: relative;
  display: inline-block;
}

.scroll-down .scroll-mouse .whell {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  left: 50%;
  top: 4px;
  -webkit-animation: scroll 1s linear 0.5s infinite backwards;
          animation: scroll 1s linear 0.5s infinite backwards;
}

@-webkit-keyframes scroll {
  0% {
    top: 4px;
    opacity: 1;
  }
  100% {
    top: 21px;
    opacity: 0;
  }
}

@keyframes scroll {
  0% {
    top: 4px;
    opacity: 1;
  }
  100% {
    top: 21px;
    opacity: 0;
  }
}

/*======================
    5. ABOUT SECTION
======================*/
section.about h3 {
  font-size: 2em;
}

section.about .avatar-area {
  max-width: 400px;
}

section.about .about-info span {
  margin-left: 2px;
}

section.about .about-info span.desc {
  margin: 0;
  font-weight: 600;
  opacity: 1;
}

/*========================
    6. SERVICE SECTION
========================*/
.service-single {
  cursor: pointer;
}

.service-single:hover .service-icon {
  -webkit-transform: scale(1.2);
          transform: scale(1.2);
}

.service-single .service-icon {
  font-size: 2.5em;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

.service-single .service-icon i {
  vertical-align: middle;
}

.service-single h3 {
  font-size: 1.5em;
  font-weight: 500;
}

.service-single p {
  font-weight: 300;
}

/*========================
    7. PORTFOLIO SECTION
========================*/
.portfolio-filters a {
  display: block;
  padding: 10px 8px;
}

.portfolio-item .portfolio-single:hover {
  text-decoration: none;
}

.portfolio-item .portfolio-single:hover .item-details {
  opacity: 1;
}

.portfolio-item .item-box {
  position: relative;
}

.portfolio-item .item-box .item-details {
  -webkit-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  text-align: center;
}

.portfolio-item .item-box .item-details p {
  opacity: 1;
}

.portfolio-item .item-box .item-details span {
  font-size: 2em;
}

/*========================
    8. RESUME SECTION
========================*/
section.resume h3 {
  font-size: 1.5em;
}

.resume-list li {
  position: relative;
  padding: 0 15px 50px 40px;
}

.resume-list li:before {
  content: "";
  width: 16px;
  height: 16px;
  border-radius: 50%;
  position: absolute;
  left: 3px;
  top: 4px;
}

.resume-list li:after {
  content: "";
  position: absolute;
}

.resume-list li:last-child:after {
  content: none;
}

.resume-list h4 {
  font-size: 18px;
  font-family: inherit;
}

.resume-list span.time {
  font-size: 0.875em;
  opacity: 1;
}

.skill .skill-icon {
  font-size: 2.7em;
  min-width: 60px;
}

.skill .progresss-info span {
  font-size: 16px;
}

.skill .progress {
  height: 6px;
  border-radius: 0;
  padding: 2px;
}

.skill .progress-bar {
  width: 0;
  -webkit-transition: all 1.5s ease-in-out;
  transition: all 1.5s ease-in-out;
}

/*========================
    9. TESTIMONIAL SECTION
========================*/
.testimonial-box {
  line-height: 23.5px;
}

.testimonial-box .testimonial_icon {
  font-size: 3rem;
}

.testimonial-box .author_picture {
  width: 70px;
  height: 70px;
}

.testimonial-box .author_info h3 {
  font-size: 1.2em;
  font-weight: 600;
}

/*========================
    10. BLOG SECTION
========================*/
.news-item .news-content .news-title {
  min-height: 55px;
}

.news-item .news-content .news-title .blog-permalink h3 {
  font-size: 1.375em;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

.news-item .news-content .news-meta-single {
  font-size: 0.8125em;
}

.news-item .news-content .news-meta-single span:not(.meta-value) {
  opacity: 1;
  margin-right: 0.5rem;
}

.news-item .news-content .news-meta-single span.meta-value {
  opacity: 0.7;
}

/*========================
    11. CONTACT SECTION
========================*/
.contact-icon {
  font-size: 2.6em;
  min-width: 50px;
}

.contact-icon i {
  vertical-align: top;
}

.contact-details {
  vertical-align: top;
}

.contact-details h5 {
  font-size: 1.375em;
  margin-bottom: 0;
}

.contact-details p {
  opacity: 1;
}

.form-group {
  position: relative;
}

.form-group label {
  position: absolute;
  top: 11px;
  left: 7px;
  padding: 0 14px;
  -webkit-transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
  transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
  font-size: 1em;
}

.form-group.form-focused label {
  -webkit-transform: translateY(-25px);
          transform: translateY(-25px);
}

.form-control {
  font-size: 1em;
  font-family: "Open Sans", sans-serif;
  border-radius: 10px;
}

.form-control.error {
  border: 2px solid #c52315;
}

input.form-control {
  height: 50px;
}

/*==========================
    12. FACTS SECTION
===========================*/
section.facts .fact-single,
div.section.facts .fact-single {
  line-height: 1.5;
}

section.facts .fact-single .fact-icon,
div.section.facts .fact-single .fact-icon {
  font-size: 3.5em;
}

section.facts .fact-single .fact-info,
div.section.facts .fact-single .fact-info {
  font-size: 2.5em;
  font-weight: 600;
}
/*# sourceMappingURL=main.css.map */