/* 
Theme Name: MP Design
Theme URI: https://github.com/elementor/hello-theme-child/
Description: MP Design is a child theme of Hello Elementor, created by Elementor team
Author: Marina
Author URI: https://elementor.com/
Template: hello-elementor
Version: 2.0.0
Text Domain: mpdesign
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/* Add your custom styles here */


.icon-box_icon svg{fill:none;}


.masonry-grid {
	display:grid;
	grid-template:auto 1fr;
}
.masonry-grid .review-card{
	
}

.portfolio-carousel .elementor-swiper-button-next{
	right: 30px!important;
}
.portfolio-carousel .elementor-swiper-button-prev{
	left: 30px!important;
}

.elementor-field-group-acceptance label{
	font-size:14px!important;
	
}
.elementor-field-group-acceptance label a{
	color:inherit;
	text-decoration:underline;
}
.elementor-field-type-acceptance input[type=checkbox]{
    height: 16px;
    width: 16px;
    top: 3px;
    position: relative;
    margin-right: 6px;
}


/*LINES BG*/

.lines-bg.lines-bg__light{
	--line-color: rgba(223, 231, 244, 0.15);
	border-right: 1px solid var(--line-color);
}
.lines-bg.lines-bg__dark{
	--line-color: rgba(223, 231, 244, 1);
	border-right: 1px solid var(--line-color);
}
.lines-bg {
  	--columns: 7;
	--runner-cycle: 1100px;

  background-image: linear-gradient(
    to right,
    var(--line-color) 1px,
    transparent 1px
  );

  background-size: calc(100% / var(--columns)) 100%;
  background-position: left top;
}

/*animated elements*/
.lines-bg.lines-bg__animated::before {
  --runner: linear-gradient(
    to bottom,
    transparent 0 calc(var(--runner-cycle) - 41px),
    rgba(121, 110, 153, 0) calc(var(--runner-cycle) - 41px),
    #a487ff var(--runner-cycle)
  );

  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;

  background-image:
    var(--runner),
    var(--runner),
    var(--runner),
    var(--runner),
    var(--runner),
    var(--runner);

  background-size: 1px var(--runner-cycle);
  background-repeat: repeat-y;

  /* Позиции соответствуют вертикальным линиям */
  background-position:
    14.2857% -80px,
    28.5714% -370px,
    42.8571% -690px,
    57.1428% -210px,
    71.4285% -850px,
    85.7142% -520px;

  animation: lines-running-down 8s linear infinite;
}

@keyframes lines-running-down {
  to {
    background-position:
      14.2857% calc(var(--runner-cycle) - 80px),
      28.5714% calc(var(--runner-cycle) - 370px),
      42.8571% calc(var(--runner-cycle) - 690px),
      57.1428% calc(var(--runner-cycle) - 210px),
      71.4285% calc(var(--runner-cycle) - 850px),
      85.7142% calc(var(--runner-cycle) - 520px);
  }
}


@media (prefers-reduced-motion: reduce) {
  .lines-bg.lines-bg__animated::before {
    animation: none;
  }
}

@media (max-width: 1024px) {
  .lines-bg {
    --columns: 7;
  }
}

@media (max-width: 767px) {
  .lines-bg {
    --columns: 3;
  }

  .lines-bg.lines-bg__animated::before {
    background-image:
      var(--runner),
      var(--runner);

    background-position:
      33.3333% -120px,
      66.6667% -650px;

    animation-name: lines-running-down-mobile;
  }
	
	.portfolio-carousel .swiper-pagination{
		bottom:-10px!important;
	}
}

@keyframes lines-running-down-mobile {
  to {
    background-position:
      33.3333% calc(var(--runner-cycle) - 120px),
      66.6667% calc(var(--runner-cycle) - 650px);
  }
}