/**
* Template Name: CYBERA - v1.0.0
* Author: Maryam-Hajireza.ir

/*--------------------------------------------------------------
# General
--------------------------------------------------------------*/
body {
    color: #413f3d;
  }
  
  a {
    color: #9aa4ec;
    font-weight: bolder;
  }
  
  a:hover {
    color: #6474e5;
  }
  
  /*--------------------------------------------------------------
  # Back to top button
  --------------------------------------------------------------*/
  .back-to-top {
    background: #9aa4ec;
  }
  
  .back-to-top i {
    color: #fff;
  }
  
  .back-to-top:hover {
    background: #35877b;
    color: #fff;
  }
  /*--------------------------------------------------------------
  # Helper nav buttons
  --------------------------------------------------------------*/
  .helper-nav-buttons-wrapper .btn{
    background-color: #9aa4ec;
  } 
  .helper-nav-buttons-wrapper .dropdown-item.active{
    background-color: #9aa4ec;
    color: #fff;
  }
  /*--------------------------------------------------------------
  # Header
  --------------------------------------------------------------*/
  #header {
    background: #413f3d;
  }
  
  #header .profile img {
    border: 8px solid #b1a6a4;
  }
  
  #header .profile h1 a, #header .profile h1 a:hover {
    color: #fff;
  }
  
  #header .profile .social-links a {
    color: #fff;
    background: #b1a6a4;
  }
  
  #header .profile .social-links a:hover {
    background: #9aa4ec;
    color: #fff;
  }
  /*--------------------------------------------------------------
  # Navigation Menu
  --------------------------------------------------------------*/
  /* Desktop Navigation */
  .nav-menu a {
    color: #d8cfd0;
  }
  
  .nav-menu a i {

    color: #d8cfd0;
  }
  
  .nav-menu a:hover, .nav-menu .active, .nav-menu li:hover > a {

    color: #fff;
  }
  
  .nav-menu a:hover i, .nav-menu .active i, .nav-menu li:hover > a i {
    color: #9aa4ec;
  }
  
  /* Mobile Navigation */
  .mobile-nav-toggle {
    background-color: #9aa4ec;
    color: #fff;
  }
  
  
  /*--------------------------------------------------------------
  # Hero Section
  --------------------------------------------------------------*/
  
  #hero:before {
    background: rgba(65, 63, 61, 0.2);
  }
  
  #hero h1 {
    color: #fff;
  }
  
  #hero p {
    color: #fff;

  }
  
  #hero p span {
    color: #fff;
    border-bottom: 3px solid #9aa4ec;
  }
  
  
  /*--------------------------------------------------------------
  # Sections General
  --------------------------------------------------------------*/
  
  .section-bg {
    background: #f5f8fd;
  }

  .section-title h2 {
    color: #697184;
  }
  
  .section-title h2::after {
    background: #9aa4ec;
  }
  
  
  /*--------------------------------------------------------------
  # About
  --------------------------------------------------------------*/
  .about .content h3 {
    color: #697184;
  }
  
  
  .about .content ul i {
    color: #6474e5;
  }
  
  /*--------------------------------------------------------------
  # Facts
  --------------------------------------------------------------*/
  
  .facts .count-box i {
    color: #6474e5;
  }
  
  .facts .count-box span {
    color: #b1a6a4;
  }
  
  .facts .count-box p {
    color: #413f3d;
  }
  
  .facts .count-box a {
    color: #413f3d;
  }
  
  .facts .count-box a:hover {
    color: #6474e5;
  }
  
  /*--------------------------------------------------------------
  # Skills
  --------------------------------------------------------------*/

  .skills .progress .skill {
    color: #9aa4ec;
  }
  
  
  .skills .progress-bar-wrap {
    background: #dce8f8;
  }
  
  .skills .progress-bar {
    background-color: #6474e5;
  }
  
  /*--------------------------------------------------------------
  # Resume
  --------------------------------------------------------------*/
  .resume .resume-title {
    color: #413f3d;
  }

  .resume .resume-item.rtl {
    border-right: 2px solid #6474e5;
  }

  .resume .resume-item.ltr {
    border-left: 2px solid #6474e5;
  }
  
  .resume .resume-item h4 {
    color: #413f3d;
  }
  
  .resume .resume-item h5 {
    background: #f2f1ef;
  }
  
  
  .resume .resume-item::before {
    background: #fff;
    border: 2px solid #6474e5;
  }
  
  /*--------------------------------------------------------------
  # Portfolio
  --------------------------------------------------------------*/
  
  .portfolio #portfolio-flters {
    background: #fff;
  }
  
  .portfolio #portfolio-flters li {
    color: #413f3d;
  }
  
  .portfolio #portfolio-flters li:hover, .portfolio #portfolio-flters li.filter-active {
    color: #6474e5;
  }
  
  .portfolio .portfolio-wrap::before {
    background: rgba(65, 63, 61, 0.5);
  }
  
  .portfolio .portfolio-wrap .portfolio-links a {
    color: #fff;
    background: rgba(154, 164, 236, 0.75);
  }
  
  .portfolio .portfolio-wrap .portfolio-links a:hover {
    background: rgba(100, 116, 229, 0.95);
  }
  
  .portfolio .portfolio-wrap .portfolio-links a + a {
    border-left: 1px solid #6474e5;
  }
  
  /*--------------------------------------------------------------
  # Portfolio Details
  --------------------------------------------------------------*/
  .portfolio-details .portfolio-details-slider .swiper-pagination .swiper-pagination-bullet {
    background-color: #fff;
    border: 1px solid #6474e5;
  }
  
  .portfolio-details .portfolio-details-slider .swiper-pagination .swiper-pagination-bullet-active {
    background-color: #6474e5;
  }
  
  .portfolio-details .portfolio-info {
    box-shadow: 0px 0 30px rgba(5, 13, 24, 0.08);
  }
  
  .portfolio-details .portfolio-info h3 {
    border-bottom: 1px solid #eee;
  }
  
  /*--------------------------------------------------------------
  # Services
  --------------------------------------------------------------*/
  .services .icon {
    background: #6474e5;
    border: 1px solid #6474e5;
  }
  
  .services .icon i {
    color: #fff;
  }
  
  .services .icon-box:hover .icon {
    background: #fff;
  }
  
  .services .icon-box:hover .icon i {
    color: #6474e5;
  }
  
  .services .title a {
    color: #4955a3;
  }
  
  .services .title a:hover {
    color: #6474e5;
  }
  
  /*--------------------------------------------------------------
  # Testimonials
  --------------------------------------------------------------*/
  .testimonials .testimonial-item h3 {
    color: #111;
  }
  
  .testimonials .testimonial-item h4 {
    color: #999;
  }
  
  .testimonials .testimonial-item .quote-icon-left, .testimonials .testimonial-item .quote-icon-right {
    color: #d8cfd0;
  }
  
  .testimonials .testimonial-item p {
    background: #fff;
    box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.1);
  }
  
  .testimonials .testimonial-item p::after {
    border-top: 20px solid #fff;
  }
  
  .testimonials .swiper-pagination .swiper-pagination-bullet {
    background-color: #fff;
    border: 1px solid #6474e5;
  }
  
  .testimonials .swiper-pagination .swiper-pagination-bullet-active {
    background-color: #6474e5;
  }
  
  /*--------------------------------------------------------------
  # Contact
  --------------------------------------------------------------*/
  .contact .info {
    background: #fff;
    box-shadow: 0 0 24px 0 rgba(0, 0, 0, 0.12);
  }
  
  .contact .info i {
    color: #6474e5;
    background: transparent;
  }
  
  .contact .info h4 {
    color: #413f3d;
  }
  
  .contact .info p {
    color: #4a4745
  }
  
  .contact .info .social-links a {
    background: #333;
    color: #fff;
  }
  
  .contact .info .social-links a:hover {
    background: #6474e5;
    color: #fff;
  }
  
  .contact .info .email:hover i, .contact .info .address:hover i, .contact .info .phone:hover i {
    background: #b1a6a4;
    color: #fff;
  }
  
  .contact .php-email-form {
    background: #fff;
    box-shadow: 0 0 24px 0 rgba(0, 0, 0, 0.12);
  }

  .contact .php-email-form .validate {
    color: red;
  }
  
  .contact .php-email-form .error-message {
    color: #fff;
    background: #ed3c0d;
  }
  
  .contact .php-email-form .sent-message {
    color: #fff;
    background: #18d26e;
  }
  
  .contact .php-email-form .loading {
    background: #fff;
  }
  
  .contact .php-email-form .loading:before {
    border: 3px solid #18d26e;
    border-top-color: #eee;
  }
  
  .contact .php-email-form button[type="submit"] {
    background: #6474e5;
    color: #fff;
  }
  
  .contact .php-email-form button[type="submit"]:hover {
    background: #9aa4ec;
  }
  
  /*--------------------------------------------------------------
  # Breadcrumbs
  --------------------------------------------------------------*/
  .breadcrumbs {
    background: #f9f9f9;
  }
  
  .breadcrumbs ol li + li::before {
    color: #245c54;
  }
  
  /*--------------------------------------------------------------
  # Footer
  --------------------------------------------------------------*/
  #footer {
    color: #d8cfd0;
    background: #413f3d;
  }
  
  #footer .credits {
    color: #eaebf0;
  }
  
   
/*--------------------------------------------------------------
# Blog
--------------------------------------------------------------*/
/*Card header color style*/
#blog-main .card .card-header{
  background-color: rgba(0,0,0,.03);
  border-color: rgba(146, 115, 115,0.2);
  color:#272829;
}

/*Header*/
#blog-header .navbar{
  background: #413f3d;
}

#blog-header .navbar-brand img{
  border: 4px solid #b1a6a4;
}

#blog-header .navbar-brand-text{
  color: #fff;
}

#blog-header .navbar-brand-text:hover{
  color: #a8a9b4;
}

#blog-header .search-form .btn{
  background: #6474e5;
  color: #fff;
}
#blog-header .search-form .btn:hover{
  background: #9aa4ec;
}

#blog-header .nav-link{
  color: #a8a9b4;
}

#blog-header .nav-link:hover,#blog-header .nav-bar .active,#blog-header .nav-bar li:hover > .nav-link {
  text-decoration: none;
  color: #fff;
}

#blog-header .nav-bar .nav-link:hover i, #blog-header .nav-bar .active i,#blog-header .nav-bar li:hover > .nav-link i {
  color: #6474e5;
}

#blog-header .navbar .nav-link.active{
  color: #ffff;
}

#blog-header .navbar .nav-link.active i{
  color: #9aa4ec;
}

#blog-header .navbar .nav-link:hover i{
  color: #6474e5;
}

#blog-header .sub-navbar{
  background: #b1a6a4;
}

#blog-header .sub-navbar .nav-link{
  color:#ffffff;
}

#blog-header .sub-navbar .nav-link.active{
  background:#9aa4ec;
  color: #ffff;
}

#blog-header .sub-navbar .dropdown-item.active{
  background:#9aa4ec;
  color: #ffff;
}

/*Posts*/
#blog-posts .post{
  border-color: rgba(146, 115, 115,0.2);
}

#blog-posts .post .post-info{
  border-bottom: 1px solid  rgba(146, 115, 115,0.2);
}

#blog-posts .post .post-info .has-border{
  border-left: 1px solid  rgba(146, 115, 115,0.2);
  
}

#blog-posts .post .more-btn{
  background: #6474e5;
  color: #fff;
}

@-webkit-keyframes winking-background {
  0% { background: #6474e5;}
  50%{ background: #9aa4ec;}
  100%{ background: #6474e5;}
}

/*Side bar*/

#blog-posts .side-bar .card-header,#blog-posts .side-bar .card{
  border-color: rgba(146, 115, 115,0.2);
  cursor: default;
}

/*Filter*/ 
#blog-posts .filter-results .filter-form .btn{
  background: #6474e5;
  color: #fff;
}
#blog-posts .filter-results .filter-form .btn:hover{
  background: #9aa4ec;
}

#blog-posts .filter-results .filter-form .form-control,
#blog-posts .filter-results .filter-form .form-control:focus {
  border-color:rgba(146, 115, 115,0.2);
}

/*Footer*/
#blog-footer{
  color: #f4f6fd;
  background: #413f3d;
}

#blog-footer .footer-top .footer-links a{
  color: #a8a9b4;
}

#blog-footer .footer-top .footer-links a:hover{
  color: #6474e5;
}

#blog-footer .footer-top .footer-links .social-links a{
  background: #b1a6a4;
  color: #fff;
}

#blog-footer .footer-top .footer-links .social-links a:hover {
  background: #9aa4ec;
  color: #fff;
}

#blog-footer .footer-devider  {
  border-bottom: 1px solid #a8a9b4;
}

#blog-footer .credits {
  color: #eaebf0;
}

/*--------------------------------------------------------------
# Blog post details
--------------------------------------------------------------*/
#blog-posts .post-details .post-info{
  border-bottom: 1px solid  rgba(146, 115, 115,0.2);
}

#blog-posts .post-details .post-info .has-border{
  border-left: 1px solid  rgba(146, 115, 115,0.2);
  
}

#blog-posts .post-details .badge{
  background: #6474e5!important;
  color:#ffff;
}

#blog-posts .post-details .badge:hover{
  background: #9aa4ec!important;
  color:#ffff;
}

#blog-posts  .post-btn, #blog-posts .post-btn-disabled{
  background: #6474e5;
  color: #fff;
}
#blog-posts .post-btn-disabled{
  background-color: rgba(0,0,0,.03);
  color:rgba(146, 115, 115, 0.4);
  border-color: rgba(146, 115, 115, 0.4);
}

#blog-posts  .post-btn:hover{
  background: #9aa4ec;
}

/*--------------------------------------------------------------
# Box hover effect
--------------------------------------------------------------*/
.box-hover-shadow{
  transition: box-shadow 500ms;
}
.box-hover-shadow:hover{
  -webkit-box-shadow: 1px 1px 18px 1px rgba(0,0,0,0.4); 
box-shadow: 1px 1px 18px 1px rgba(146, 115, 115, 0.4);
}

/*--------------------------------------------------------------
# gallery
--------------------------------------------------------------*/
/*Card header color style*/
#gallery-main .card .card-header{
  background-color: rgba(0,0,0,.03);
  border-color: rgba(146, 115, 115,0.2);
  color:#272829;
}

/*Header*/
#gallery-header .navbar{
  background: #413f3d;
}

#gallery-header .navbar-brand img{
  border: 4px solid #b1a6a4;
}

#gallery-header .navbar-brand-text{
  color: #fff;
}

#gallery-header .navbar-brand-text:hover{
  color: #a8a9b4;
}

#gallery-header .search-form .btn{
  background: #6474e5;
  color: #fff;
}
#gallery-header .search-form .btn:hover{
  background: #9aa4ec;
}

#gallery-header .nav-link{
  color: #a8a9b4;
}

#gallery-header .nav-link:hover,#gallery-header .nav-bar .active,#gallery-header .nav-bar li:hover > .nav-link {
  text-decoration: none;
  color: #fff;
}

#gallery-header .nav-bar .nav-link:hover i, #gallery-header .nav-bar .active i,#gallery-header .nav-bar li:hover > .nav-link i {
  color: #6474e5;
}

#gallery-header .navbar .nav-link.active{
  color: #ffff;
}

#gallery-header .navbar .nav-link.active i{
  color: #9aa4ec;
}

#gallery-header .navbar .nav-link:hover i{
  color: #6474e5;
}

#gallery-header .sub-navbar{
  background: #b1a6a4;
}

#gallery-header .sub-navbar .nav-link{
  color:#ffffff;
}

#gallery-header .sub-navbar .nav-link.active{
  background:#9aa4ec;
  color: #ffff;
}

#gallery-header .sub-navbar .dropdown-item.active{
  background:#9aa4ec;
  color: #ffff;
}

/*Photos*/

.gallery-photo-wrapper .card .photo-badge-wrapper .badge{
  color:#fff;
  background: #6474e5;
}

.gallery-photo-wrapper .card .photo-badge-wrapper .badge:hover{
  background: #9aa4ec;
}

.gallery-photo-wrapper .card .photo-badge-wrapper .photographer-name{
  color:#fff;
  background: rgba(100, 116, 229,.7);
}

.gallery-photo-wrapper .card .photo-badge-wrapper .history-badge,
.gallery-photo-wrapper .card .photo-badge-wrapper .history-badge:hover{
  color:#fff;
  background: rgba(100, 116, 229,.7);
}

/*Filter*/ 
#gallery-photos .filter-results .filter-form .btn{
  background: #6474e5;
  color: #fff;
}
#gallery-photos .filter-results .filter-form .btn:hover{
  background: #9aa4ec;
}

#gallery-photos .filter-results .filter-form .form-control,
#gallery-photos .filter-results .filter-form .form-control:focus {
  border-color:rgba(146, 115, 115,0.2);
}

/*Footer*/
#gallery-footer{
  color: #f4f6fd;
  background: #413f3d;
}

#gallery-footer .footer-top .footer-links a{
  color: #a8a9b4;
}

#gallery-footer .footer-top .footer-links a:hover{
  color: #6474e5;
}

#gallery-footer .footer-top .footer-links .social-links a{
  background: #b1a6a4;
  color: #fff;
}

#gallery-footer .footer-top .footer-links .social-links a:hover {
  background: #9aa4ec;
  color: #fff;
}

#gallery-footer .footer-devider  {
  border-bottom: 1px solid #a8a9b4;
}

#gallery-footer .credits {
  color: #eaebf0;
}

/*--------------------------------------------------------------
# Box hover effect
--------------------------------------------------------------*/
.box-hover-shadow{
  transition: box-shadow 500ms;
}
.box-hover-shadow:hover{
  -webkit-box-shadow: 1px 1px 18px 1px rgba(0,0,0,0.4); 
box-shadow: 1px 1px 18px 1px rgba(146, 115, 115, 0.4);
}

/*--------------------------------------------------------------
# Bootstrap 5 accordian customised
--------------------------------------------------------------*/
.accordion-button:focus {
  border-color: rgba(0,0,0,.125);
  background: #6474e5;
  color: #fff;
}

.accordion-button:active, .accordion-button:not(.collapsed) {
  background: #6474e5;
  color: #fff;
}

.accordion-button:not(.collapsed)::after, .accordion-button:focus::after {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

#gallery-posts .side-bar .card.side-caregories .accordion-button:hover{
  background-color: rgba(0,0,0,.03);
}

#gallery-posts .side-bar .card.side-caregories .accordion-button.has-bottom-border{
  border-bottom: 1px solid rgba(146, 115, 115,0.2);
}

.accordion-button:focus:hover,
#gallery-posts .side-bar .card.side-caregories .accordion-button:not(.collapsed):hover {
  background: #9aa4ec !important;
}


/*--------------------------------------------------------------
#Comment form
--------------------------------------------------------------*/

.comment-form .btn{
  background: #6474e5;
  color: #fff;
}
.comment-form .btn:hover{
  background: #9aa4ec;
}

.comment-form .form-control,
.comment-form .form-control:focus {
  border-color:rgba(146, 115, 115,0.2);
}

/*--------------------------------------------------------------
#Owl carousel
--------------------------------------------------------------*/
.page-carousel-slider .more-btn{
  background: #6474e5;
  color: #fff;
}

.page-carousel-slider .owl-page-slider-nav .btn{
  background-color: rgba(100, 116, 229,.1);
  color:rgba(177, 166, 164, 0.6);
  border-color: rgba(177, 166, 164, 0.6);
}

.page-carousel-slider .owl-page-slider-nav .btn:hover{
  background-color: rgba(100, 116, 229,.2);
  color:rgba(177, 166, 164, 0.8);
  border-color: rgba(100, 116, 229,.1);
}



.owl-page-side-slider .owl-slide-text{
  background-color: rgba(177, 166, 164,.4);
  color: rgba(255, 255, 255, 0.8);
}

/*--------------------------------------------------------------
# nav scrollbar style
--------------------------------------------------------------*/
/*----------------general------------------*/
.style-nav-vertical-scrollbar:hover, .style-nav-horizontal-scrollbar:hover{
  scrollbar-color: rgba(100, 116, 229,.8) transparent;
}
/*----------------vertical----------------*/

/* Track */
.style-nav-vertical-scrollbar::-webkit-scrollbar-track {
  background: transparent; 
}

/* Handle */
.style-nav-vertical-scrollbar::-webkit-scrollbar-thumb {
  background: rgba(65, 63, 61,0.1); 
}


/* Handle on hover */
.style-nav-vertical-scrollbar::-webkit-scrollbar-thumb:hover {
  background: rgba(100, 116, 229,.8);
  
}
.style-nav-vertical-scrollbar-hover-effect::-webkit-scrollbar-thumb {
  background: rgba(100, 116, 229,.5); 
  
}

/*----------------horizontal----------------*/
/* Track */
.style-nav-horizontal-scrollbar::-webkit-scrollbar-track {
  background: transparent; 
}

/* Handle */
.style-nav-horizontal-scrollbar::-webkit-scrollbar-thumb {
  background: transparent; 
}


/* Handle on hover */
.navbar-scroll-parent:hover .style-nav-horizontal-scrollbar::-webkit-scrollbar-thumb {
  background: rgba(100, 116, 229,.1); 
  
}

/*--------------------------------------------------------------
# pageination
--------------------------------------------------------------*/
.pagination .page-link{
  color:#9aa4ec;
}

.pagination .page-item.active .page-link{
  background-color: #6474e5;
  border-color: #6474e5;
}

.page-link:focus {
  box-shadow: none !important;
  border-color: transparent !important;
}

/*----------------------------------------------------------------
#Badge Style
*---------------------------------------------------------------*/
.badge-style{
  background-color: #6474e5;
  color:#fff;
  cursor: default;
}

/*----------------------------------------------------------------
#Error page
----------------------------------------------------------------*/
.notfound-search button {
  background: #9aa4ec;
}

.notfound-search-rtl button {
  background: #9aa4ec;
}

.notfound-social>a:hover {
  background-color: #9aa4ec;
}