/**
 * Theme Name: Creatify
 * Theme URI: https://blockifywp.com/themes/creatify
 * Author: Blockify
 * Author URI: https://blockifywp.com/
 * Description: Full site editing block theme perfect for agencies, creatives, and portfolios looking to showcase their work in a modern and professional way. Easily customize every aspect of your website using the powerful block editor. No coding skills are required, just drag and drop the blocks you need to create the layout you want. Fully compatible with the Blockify plugin, which means you can use all of its features to create beautiful, interactive pages with ease.
 * Requires at least: 6.4
 * Tested up to: 6.4
 * Requires PHP: 7.4
 * Version: 0.6.0
 * License: GPL-2.0-or-later
 * License URI: http://www.gnu.org/licenses/gpl-2.0.html
 * Text Domain: creatify
 * Domain Path: /languages
 * Template: blockify
 * Tags: full-site-editing, block-patterns, block-styles, custom-logo, editor-style, featured-images, sticky-post, wide-blocks, translation-ready, grid-layout, one-column, two-columns, three-columns, four-columns, e-commerce, news, portfolio
*/
.devpunk-header-container {
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
}

.devpunk-cover-container .wp-block-cover__inner-container {
  width: 1366px;
}

.devpunk-navigation-parent {
  padding-top: 40px;
}

.devpunk-navigation {
  padding-right: 80px;
}

.devpunk-running-text-p {
  color: #fff !important;
}

.devpunk-services-card-container {
  border: 1px solid rgb(45, 43, 56);
  background: linear-gradient(180deg, rgb(20, 18, 33), rgb(9, 7, 23) 100%);
}

.devpunk-logo-container {
  border: 1px solid rgb(45, 43, 56);
  background: linear-gradient(180deg, rgb(20, 18, 33), rgb(9, 7, 23) 100%);
 
}
.devpunk-logo-container div figure {
  margin-bottom: 0px;
  text-align: center;
}

.devpunk-logo-container div figure a {	
  display: flex;
  justify-content: center;
  align-items: center;
}

.devpunk-logo-container div img {
	max-width: 70% !important;
}

.devpunk-svg {
  display: flex !important;
  justify-content: center;
}

.devpunk-logo-container:hover {
  border: 1px solid #00d5ff;
  transition: border 200ms ease-out;
}

.devpunk-services-card-container:hover {
  border: 1px solid #00d5ff;
  transition: border 200ms ease-out;
}

.devpunk-services-card-container:hover .devpunk-svg svg {
  color: #00d5ff;
  transition: color 200ms ease-out;
}

.devpunk-review-row-container {
  width: 100%;
}

.devpunk-service-price-container {
  visibility: hidden;
  opacity: 0;
  position: absolute;
  bottom: 0;
  transform: translateY(10px);
  transition:
    opacity 0.5s ease,
    transform 0.5s ease,
    visibility 0.5s ease;
}

.display-price {
  visibility: visible;
  opacity: 1;
  transform: translateY(-10px);
}

.devpunk-services-card-container:hover .kt-inside-inner-col .display-price {
  visibility: visible;
  opacity: 1;
  transform: translateY(-10px);
}

.stack {
  display: grid;
  grid-template-columns: 1fr;
  padding-left: 80px;
  padding-bottom: 120px;
}

.stack span {
  font-weight: 300;
  grid-row-start: 1;
  grid-column-start: 1;
  font-size: 80px;
  line-height: 80px;
  --stack-height: calc(100% / var(--stacks) - 1px);
  --inverse-index: calc(calc(var(--stacks) - 1) - var(--index));
  --clip-top: calc(var(--stack-height) * var(--index));
  --clip-bottom: calc(var(--stack-height) * var(--inverse-index));
  clip-path: inset(var(--clip-top) 0 var(--clip-bottom) 0);
  animation:
    stack 100ms cubic-bezier(0.46, 0.29, 0, 1.24) 1 backwards calc(var(--index) * 120ms),
    glitch 2s ease infinite 2s alternate-reverse;
}

.stack span:nth-child(odd) {
  --glitch-translate: 8px;
}
.stack span:nth-child(even) {
  --glitch-translate: -8px;
}

@keyframes stack {
  0% {
    opacity: 0;
    transform: translateX(-50%);
    text-shadow:
      -2px 3px 0 red,
      2px -3px 0 blue;
  }
  60% {
    opacity: 0.5;
    transform: translateX(50%);
  }
  80% {
    transform: none;
    opacity: 1;
    text-shadow:
      2px -3px 0 red,
      -2px 3px 0 blue;
  }
  100% {
    text-shadow: none;
  }
}

@keyframes glitch {
  0% {
    text-shadow:
      -2px 3px 0 red,
      2px -3px 0 blue;
    transform: translate(var(--glitch-translate));
  }
  2% {
    text-shadow:
      2px -3px 0 red,
      -2px 3px 0 blue;
  }
  4%,
  100% {
    text-shadow: none;
    transform: none;
  }
}

@media (max-width: 781px) {
  .stack {
	padding-left: 20px;
	}
	
  .stack span {
	font-size: 40px;
	line-height: 40px;
	}
	
  .devpunk-navigation {
    padding-right: 20px;
  }

  .devpunk-navigation-parent {
    padding-top: 30px;
  }

  .devpunk-services-card-container, .devpunk-logo-container {
    border: 1px solid #00d5ff;
  }

  .devpunk-services-card-container .devpunk-svg svg {
    color: #00d5ff;
  }

  .devpunk-services-grid-container div {
    max-width: 100% !important;
  }

  .devpunk-clients-client-container div {
    min-height: 100px;
  }

  .devpunk-clients-client-container div div {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .devpunk-service-price-container {
    visibility: visible;
    position: static;
    opacity: 1;
  }
  
}