/*
Theme Name: Forvest Blog
Theme URI: https://ali-mahmoudi.ir
Author: ali mahmoudi
Author URI: https://ali-mahmoudi.ir
Description: Designer Ali Mahmoudi.
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: black, brown, orange, tan, white, yellow, light, one-column, two-columns, right-sidebar, flexible-width, custom-header, custom-menu, editor-style, featured-images, microformats, post-formats, rtl-language-support, sticky-post, translation-ready
Text Domain: twentythirteen

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/
/* ----------------------------------------------- alpinejs ----------------------------------------- */
[x-cloak]{
  display: none !important;
}
/* ----------------------------------------------- index ----------------------------------------- */
#btn-our-service{
  padding: .5em .8em;
  color: rgba(255,255,255,.5);
  position: relative;
  text-decoration: none;
  font-size: 20px;
}

#btn-our-service::before,
#btn-our-service::after {
  content: '';
  height: 14px;
  width: 14px;
  position: absolute;
  transition: all .35s ease;
  opacity: 0;
}

#btn-our-service::before {
  content: '';
  right: 0;
  top: 0;
  border-top: 3px solid var(--colorPrimaryLigh);
  border-right: 3px solid var(--colorPrimaryLigh);
  transform: translate(-100%, 50%);
}

#btn-our-service:after {
  content: '';
  left: 0;
  bottom: 0;
  border-bottom: 3px solid var(--colorPrimaryLigh);
  border-left: 3px solid var(--colorPrimaryLigh);
  transform: translate(100%, -50%)
}

#btn-our-service:hover:before,
#btn-our-service:hover:after{
  transform: translate(0,0);
  opacity: 1;
}

#btn-our-service:hover {
  color: var(--colorPrimaryLigh);
}
.card-services .card-image-container img{
  transition: all 0.3s ease-in;
}
.card-services:hover .card-image-container img{
  transform: scale(110%);
}
/* ----------------------------------------------- swiperjs ----------------------------------------- */
.swiper-button-prev , .swiper-button-next{
  transition: all 0.5s;
  color : var(--colorPrimaryLight); 
}
.swiper-button-prev-slider:hover{
  transform: translateX(-5px);
}
.swiper-button-next-slider:hover{
  transform: translateX(5px);
}
@media only screen and (min-width:768px){
  .swiper-button-prev , .swiper-button-next{
    display: block !important ;
  }
} 
.swiper-pagination{
  margin-bottom: -5px !important;
}
.swiper-pagination-bullet{
  border : 1px solid #0f0f0f !important;
  background: transparent!important;
}
.dark .swiper-pagination-bullet{
  border : 1px solid #646363 !important;
}
.swiper-pagination-bullet-active{
  border : 1px solid rgba(255, 193, 7, 1) !important;
  background: rgba(255, 193, 7, 1) !important;
  width: 20px !important;
  border-radius: 5px !important;
}
/* ----------------------------------------------- /swiperjs ----------------------------------------- */

/* ----------------------------------------------- single blog ----------------------------------------- */
article.prose > div {
  max-width: 100% !important;
  height: auto !important;
  display: block !important;
  margin-left: auto !important; 
  margin-right: auto !important;
  border-radius: 16px !important;
} 
article.prose img {
  max-width: 100% !important;
  height: auto !important;
  display: block !important;
  margin-left: auto !important;
  margin-right: auto !important;
  border-radius: 16px !important;
}
/* ----------------------------------------------- /single blog ----------------------------------------- */