/*---------------------------------------------------------------------------------------
* Template Name      :  Kevin - Responsive Bootstrap 4 HTML Personal Template           |
* Author             :  Narek Sukiasyan                                                 |
* Version            :  1.0.0                                                           |
* Created            :  April 2020                                                      |
* 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 Mobile Toggler Button
        2.4 SOCIAL ICONS
        2.5 OWL SLIDER
        2.6 RETURN TOP BUTTON
    3. HEADER
        3.1 General Header Style
        3.2 Horizontal Header Style
    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

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

::-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 {
  font-family: 'Poppins', sans-serif;
  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: .8em;
}

/*=================
    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, div.section .section-title h2 {
  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:before, div.section .section-title h2:before {
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  bottom: -5px;
  right: -5px;
  -webkit-transition: inherit;
  transition: inherit;
}

@-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 Mobile Toggler Button */
.button-toggler {
  border: none;
  outline: none;
  cursor: pointer;
}

.button-toggler span {
  display: block;
  margin-bottom: 8px;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

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

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

/* 2.4 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.5 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.6 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;
}

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;
}

@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: .5s;
          animation-delay: .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: .5s;
          animation-delay: .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;
    text-align: center;
}

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: .5rem;
}

.news-item .news-content .news-meta-single span.meta-value {
  opacity: .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;
}

/*==========================
    14. SWITCHER SECTION
===========================*/
#color-switcher {
  position: fixed;
  top: 30%;
  left: -225px;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  z-index: 1000;
}

#color-switcher.open-switcher {
  left: 0px;
}

#color-switcher .switcher-button {
  color: #fff;
  font-size: 1.5em;
  padding: 1rem;
  cursor: pointer;
  width: 55px;
  height: 55px;
  line-height: 21px;
}

#color-switcher .switcher-area {
  padding: 15px 25px;
  width: 225px;
}

#color-switcher .switcher-area h3 {
  font-size: 1em;
}

#color-switcher .switcher-area ul li a.swtich-color {
  display: block;
  width: 45px;
  height: 45px;
  cursor: pointer;
  border-radius: 50%;
}

#color-switcher .switcher-area ul li a.swtich-color.active {
  -webkit-transform: scale(0.8);
          transform: scale(0.8);
}

#color-switcher .switcher-area ul li a.switch-layout {
  display: block;
  text-align: center;
  cursor: pointer;
}

#color-switcher .switcher-area .color1 {
  background-color: #f07f81;
}

#color-switcher .switcher-area .color1.active {
  -webkit-box-shadow: 0 0 0 0.2rem rgba(240, 127, 129, 0.5);
          box-shadow: 0 0 0 0.2rem rgba(240, 127, 129, 0.5);
}

#color-switcher .switcher-area .color2 {
  background-color: #1a7bb7;
}

#color-switcher .switcher-area .color2.active {
  -webkit-box-shadow: 0 0 0 0.2rem rgba(26, 123, 183, 0.5);
          box-shadow: 0 0 0 0.2rem rgba(26, 123, 183, 0.5);
}

#color-switcher .switcher-area .color3 {
  background-color: #b738e8;
}

#color-switcher .switcher-area .color3.active {
  -webkit-box-shadow: 0 0 0 0.2rem rgba(183, 56, 232, 0.5);
          box-shadow: 0 0 0 0.2rem rgba(183, 56, 232, 0.5);
}

#color-switcher .switcher-area .color4 {
  background-color: #1cba5b;
}

#color-switcher .switcher-area .color4.active {
  -webkit-box-shadow: 0 0 0 0.2rem rgba(28, 186, 91, 0.5);
          box-shadow: 0 0 0 0.2rem rgba(28, 186, 91, 0.5);
}

#color-switcher .switcher-area .color5 {
  background-color: #fc5185;
}

#color-switcher .switcher-area .color5.active {
  -webkit-box-shadow: 0 0 0 0.2rem rgba(252, 81, 133, 0.5);
          box-shadow: 0 0 0 0.2rem rgba(252, 81, 133, 0.5);
}

#color-switcher .switcher-area .color6 {
  background-color: #ff2138;
}

#color-switcher .switcher-area .color6.active {
  -webkit-box-shadow: 0 0 0 0.2rem rgba(255, 33, 56, 0.5);
          box-shadow: 0 0 0 0.2rem rgba(255, 33, 56, 0.5);
}
/*# sourceMappingURL=main.css.map */