/**
Theme Name: Hello Elementor - Child Theme
Author: Waldemar Syc, WebSyc
Author URI: https://www.websyc.pl
Description: Motyw Potomny Hello Elementor
Version: 1.2.3
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: hello-elementor-child-theme
Template: hello-elementor
*/

/* variables */
html:root{
  --color-blue: #006CD5;
  --color-purple:  #6600D3;
  --color-purple-light :#b882fc;
  --color-dark: #0E1B2B;
  --color-text: #000000;
  --color-border: #E4E0EE;
  --color-bg: #F4F2F9;
}
html{
  font-size: 16px;
  @media (max-width: 1199px) {
    font-size: 85%;
  }
  @media (max-width: 768px) {
    font-size: 75%;
  }
}
/* Typography */
p{
  font-size: 16px;
  /* color: var(--color-text); */
}
#ws__animated-headline p{
  margin-bottom: 0;
}
.line-before-title h2{
  display: flex;
  align-items: center;
  margin-bottom: 3px;
}
.line-before-title h2::before{
  content: "";
  display: inline-block;
  width: 20px;
  height: 2px;
  background: var(--color-purple);
  margin-right: 10px;
}
.vertical-line-after-title p::after{
  content: "";
  display: block;
  width: 20px;
  height: 2px;
  background: var(--color-blue);
  margin-top: 12px;
  margin-bottom: 7px;
}

/* Buttons */
#ws__form-submit-btn button{
  white-space: normal;
  line-height: 1.3em;
}
.to-top-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  z-index: 999;
  bottom: -100px;
  right: 25px;
  width: 50px;
  height: 50px;
  border-radius: 0;
  background: var(--color-blue);
  transition: bottom 0.5s ease;
}
.to-top-btn.show {
  bottom: 25px;
}
.to-top-btn .elementor-icon{
  fill: #fff;
  color: #fff;
  border-color: #fff;
}
.to-top-btn:hover {
  cursor: pointer;
  background: var(--color-purple);
}
.to-top-btn svg {
  font-size: 18px;
}

/* Slider */
#front-page__slider .flexslider .slides img.bg_shape{
  min-height: 100%;
}
#front-page__slider .flexslider .slides li > img:last-of-type{
  min-height: auto;
}
/* Menu */
#menu-main-menu ul.sub-menu a {
  line-height: 20px;
  padding-top: 15px;
  padding-bottom: 15px;
}
@media (max-width: 996px){
  #menu-main-menu li.current-menu-item > a[href*="#"] {
    color: #fff;
  }
  #menu-main-menu li.current-menu-item > a[href*="#"]:hover {
    color: var(--color-blue);
  }
}
@media (min-width: 996px){
  #menu-main-menu li.current-menu-item > a[href*="#"] {
    color: #000;
  }
  #menu-main-menu li.current-menu-item > a[href*="#"]:hover {
    color: var(--color-blue);
  }
}

/* Portfolio Carousel */
.section__projects .item{
  position: relative;
  overflow: hidden;
  transition: all 0.3s;
}
.section__projects .item__cover{
  -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease;
  transform: scale(1);
  height: 480px;
  object-fit: cover;
}
.section__projects .item:hover .item__cover{
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
  filter: blur(3px);
}
.section__projects .mask{
  content: "";
  /* background: linear-gradient(0deg, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.15) 65%); */
  background: -webkit-gradient(linear, left bottom, left top, from(var(--color-dark)), to(transparent));
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  -webkit-transition: 0.5s;
  transition: 0.5s;
}
.section__projects .item:hover .mask{
  opacity: 1;
}
.section__projects .item__content:before {
  content: "";
  position: absolute;
  top: -100%;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(45deg, var(--color-blue) 0%, var(--color-purple) 100%);
  opacity: 0;
  z-index: 1;
  -webkit-transition: all 0.35s;
  transition: all 0.35s;
  -moz-transition: all 0.35s;
  -ms-transition: all 0.35s;
}
.section__projects .item:hover .item__content:before {
  opacity: 0.7;
  top: 0;
}
.section__projects .platform-logo{
  display: block;
  width: 50px;
  height: auto;
  position: absolute;
  top: 20px;
  right: 30px;
  z-index: 3;
  opacity: 0;
  visibility: hidden;
  transform: scale(0) rotateY(360deg);
}
.section__projects .item:hover .platform-logo{
  opacity: 1;
  visibility: visible;
  transform: scale(1);
  transition: all 500ms ease 500ms;
}
.section__projects .item__text{
  -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease;
  position: absolute;
  width: calc(100% - 40px);
  bottom: 25px;
  left: 0px;
  z-index: 2;
  display: flex;
  align-items: center;
  padding: 0 30px;
  width: 100%;
}
.section__projects .item__text .item__text--left-block{
  width: 80%;
}
.section__projects .item__text .item__text--right-block{
  width: 20%;
  text-align: right;
}
.section__projects .item__text .item__text--right-block i{
  color: #fff;
  border: solid 2px #fff;
  border-radius: 100%;
  width: 50px;
  height: 50px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.section__projects .item__text--heading {
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
  margin: 0;
  font-weight: 800;
  font-size: 24px;
  line-height: 1.4;
  color: #fff;
}
.section__projects .item__text--heading{
  color: #fff;
}
.section__projects .item__text--kind{
  color: var(--color-purple-light);
  text-transform: uppercase;
  font-size: 14px;
  font-weight: 800;
  margin-bottom: 5px;
}
.section__projects .item:hover .item__text--kind{
  color: #fff;
}
.section__projects .item__text--excerpt{
  color: #fff;
  font-size: 15px;
  line-height: 17px;
  margin: 0;
  padding-right: 10px;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.5s, opacity 0.5s;
}
.section__projects .item:hover .item__text--excerpt{
  max-height: 75px;
  opacity: 1;
  margin-bottom: 15px;
  margin-top: 15px;
}
.section__projects .item:hover .item__text--right-block i{
  color: var(--color-purple);
  background: #fff;
}
/* Swipper */
.section__projects .swiper-wrapper{
  padding-bottom: 60px;
}
#wstemplate .swiper-pagination{
  bottom: 0;
  width: 100%;
}
#wstemplate .swiper-pagination-bullet{
  width: 16px;
  height: 4px;
  line-height: 4px;
  background-color: var(--color-dark);
  padding: 0;
  border-radius: 0;
  margin-left: 5px;
  margin-right: 5px;
}
#wstemplate .swiper-pagination-bullet-active{
  background-color: var(--color-purple);
}

/* Front Page */
.front__page-offer-box{
  transition: all 0.3s!important;
}
.front__page-offer-box:hover{
  cursor: pointer;
}

/* Footer */
/* MailetLite */
#mailerlite-form_1 .mailerlite-form-inputs{
  display: flex;
}
#mailerlite-form_1 .mailerlite-form-field{
  width: 85%;
  margin-bottom: 0;
}
#mailerlite-form_1 .mailerlite-subscribe-button-container{
  width: 15%;
}
#mailerlite-form_1 #mailerlite-1-field-email{
  padding: 1rem;
  border-radius: 0;
}
#mailerlite-form_1 .mailerlite-subscribe-button-container button{
  width: 100%;
  height: 100%;
  padding: 0;
  color: #ffffff;
  background-color: var(--color-purple);
  border-style: none;
  border-radius: 0px 0px 0px 0px;
}
#mailerlite-form_1 .mailerlite-subscribe-button-container button:hover{
  background-color: var(--color-blue);
}
#mailerlite-form_1 .mailerlite-subscribe-button-container button::before{
  content: "\f1d8";
  font-family: "Font Awesome 5 Free";
  font-size: 20px;
}

/* MetForm */
#form__website-brief .mf-checkbox-option{
  margin-bottom: 7px;
}
#form__website-brief .mf-checkbox-option span::before{
  margin-right: 5px;
}
#brief p.elementor-icon-box-description a,
#audyt p.elementor-icon-box-description a{
  color: #fff;
}
#audyt p.elementor-icon-box-description a:hover,
#brief p.elementor-icon-box-description a:hover{
  color: #fff;
}

/* Icon Box */
#wstemplate .ws__icon-box a{
  color: #fff;
}
#wstemplate .ws__icon-box a:hover{
  color: #fff;
}

/* Contact page */
#contact__icons figure.elementor-image-box-img{
  line-height: 0;
}

/* Websites page */
#website-types .elementor-image-box-img{
  fill: var(--color-purple);
}

/* Search */
.ekit-popup-close i{
  position: relative;
  top: 1px;
  left: 1px;
}

/* Blog Single Page */
body.single-post #post__content h2{
  font-size: 1.5rem;
  margin-top: 1.6rem;
  margin-bottom: 1rem;
  font-weight: 600;
}
body.single-post #post__content ul{
  margin-bottom: 1rem;
  padding-left: 1rem;
}

/* About */
#ws__logo-lider .tf-list-image{
  overflow: hidden;
}

/* Cookie Yes */
#wstemplate .cky-notice p, #wstemplate .cky-notice button, #wstemplate .cky-modal p, #wstemplate .cky-modal button{
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji!important;
  line-height: initial;
}
#wstemplate .cky-notice button, #wstemplate .cky-modal button{
  padding: 8px;
  border-radius: 0!important;
  font-size: 14px!important;
  text-transform: none;
  font-weight: initial;
  letter-spacing: normal;
}
#wstemplate .cky-notice-btn-wrapper{
  flex-wrap: nowrap!important;
}
#wstemplate .cky-btn-revisit-wrapper:hover{
  background-color: var(--color-purple)!important;
}

/* Wordpress Security */
#who-needs-security p.elementor-counter-title{
  text-align: center;
}

/* Logo carousel */
#logo__carousel .swiper-slide  img {
  filter: grayscale(100%);
  transition: filter 0.3s ease-in-out;
}
#logo__carousel .swiper-slide  img:hover {
  filter: grayscale(0%);
}

/* reCaptcha */
#ws_recaptcha a{
  color: var(--color-blue);
}
#ws_recaptcha a:hover{
  color: var(--color-blue);
  text-decoration: underline;
}
.grecaptcha-badge {
  visibility: hidden;
  opacity: 0;
  position: absolute;
  bottom: 0;
  right: 0;
  z-index: -1;
}
@media (max-width: 1024px){
  #ws_recaptcha .elementor-image-box-wrapper{
    display: flex;
    gap: 15px;
    align-items: center;
  }
  #ws_recaptcha .elementor-image-box-img{
    width: 20%;
    max-width: 48px;
  }
  #ws_recaptcha .elementor-image-box-content{
    width: 80%;
  }
}

/* Back to top button */
#ws__back-to-top span{
  line-height: 55px;
}
#ws__back-to-top path{
  fill: #fff;
}

/* Header search */
#header_search .tf-close-modal::after{
  display: none!important;
}
#header_search .tf-close-modal::before{
  content: "\f057";
  font-family: "Font Awesome 5 Free";
  transform: none;
  background: none;
  width: auto;
  right: 0;
  left: auto;
  font-size: 30px;
}
#header_search .search-panel{
  width: 90%;
}