/* Thumb icon rotation */
.thumb-icon {
  transition: transform 0.5s ease;
  transform-origin: bottom center;
  animation: thumbDown 5s forwards ease;
	transform-origin: center;
  animation-delay: 0.5s;
}
@keyframes thumbDown {
 0% {
    transform: rotate(-50deg);
    opacity: 1;
  } 
	33% {
    transform: rotate(0deg);
    opacity: 1;
  }
	40% {
    transform: rotate(0deg);
    opacity: 1;
  }
  51% {
    transform: rotate(0deg);
    opacity: 0;
  }
	99% {
    transform: rotate(0deg);
    opacity: 0;
  }
  100% {
    transform: rotate(0deg);
    opacity: 0;
  }
}
.thumb-icon1 {
  transition: transform 0.5s ease;
  transform-origin: bottom center;
  animation: thumbDown1 5s forwards ease;
	transform-origin: center;
  animation-delay: 0.5s;
}
@keyframes thumbDown1 {
 0% {
    opacity: 0;
  }
	30% {
   
    opacity: 0;
  }
  46% {    
    opacity: 1;  
	
  }
	49% {    
    opacity: 0;  
	
  }
  100% {  
    opacity: 0;
  }
}
.black-overlay {
  position: absolute;
  top: -633.26px;
  left: -1945.01px;
  width: 100vw;
  height: 100vh;
  background-color: #302D34;
  transform: scale(0);
  transform-origin: top left; /* Важно: точка роста */
  
  animation: blackFloodGrow 9.5s forwards ease-in-out;
  animation-delay: 0.2s;
}
@keyframes blackFloodGrow {
  to {
    transform: scale(10); /* Растёт во все стороны */
  }
}
.animated-button .elementor-button {
  padding: 12px 24px;
  font-size: 16px;
  border: none;
  border-radius: 6px;
  color: black;
  background-color: white;
  transition: all 0.3s ease-in-out;
  animation: colorShift 5s forwards ease-in-out;
  animation-delay: 0.5s; /* задержка после начала чёрной заливки */
  z-index: 11;
  position: relative;
}
@keyframes colorShift {
0% {
    background-color: white;
    color: #0000FF;
  }
  50% {
    background-color: white;
    color: #0000FF;
  }
  51% {
    background-color: #DEB070;
    color: white;
  }
  100% {
    background-color: #DEB070;
    color: white;
  }
}
.animated-button .elementor-button:hover {
  background-color: #B68B57!important;
  color: white;
  transition: all 0.5s ease-in-out;
}
.thumb-text h1{
  animation: textColorChange 5s forwards ease;
  animation-delay: 0.5s;
}
@keyframes textColorChange {
  0% {
    color: black;
  }
  50% {
    color: black;
  }
	51% {
    color: white;
  }
  100% {
    color: white;
  }
}
.fade-out-text {
  opacity: 1;
  transition: opacity 1s ease-out;
  animation: fadeOut 1s ease-out 4s forwards;
}
@keyframes fadeOut {
	99%  {
    opacity: 10;
    visibility: visible;
  }
  100%  {
    opacity: 0;
    visibility: hidden;
  }
}


.brands-icon .premium-adv-carousel__item-outer-wrapper {  
   
	border-radius:50px;
	margin:20px;
    box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.18);
    -webkit-box-shadow:  0px 4px 20px 0px rgba(0, 0, 0, 0.18);
    -moz-box-shadow:  0px 4px 20px 0px rgba(0, 0, 0, 0.18);
}

.hom-serv .services-accordion .e-n-accordion-item {
    background-color: var(--e-global-color-718292e);
    border-radius: 40px;
}


.testimon .profile-info{
    display: flex;
    justify-content: center;
}

.testimon .testimonials-track {
    display: flex;
    align-items: center;
}




.Carousel__CarouselSwiperWrapper-sc-f2ox7y-10 button, 
.Carousel__CarouselSwiperWrapper-sc-f2ox7y-10 button:hover{
    background: transparent;
    color: black;
    padding: 0;
    border: none;
	  font-size: 14px;
    font-weight: 400;
}


.svg-line-draw  svg {
    width: auto !important;
    height: auto !important;
}


.card-mob-slid a.carousel-arrow.carousel-prev, .card-mob-slid a.carousel-arrow.carousel-next
 {
    bottom: -170px;
    top: auto;
}




.work-card.two{
    transform: translatey(50px);
}
.work-card.three{
    transform: translatey(100px);
}

.work-card{
    position: sticky;
    top: 100px;
}

.work-content{
    position: sticky;
    top: 100px;
}
.work-gall .jkit-gallery-control{
	transition: 0.3s;
}



.jkit-gallery-control:not(:first-child)::before {
  content: "";
  display: inline-block;
  width: 20px;
  height: 20px;
  margin-right: 15px;
  margin-bottom: -3px;
  background-repeat: no-repeat;
  background-size: contain;
	transition: 0.6s;
}

.work-gall  .jkit-gallery-control:not(.active):hover {
    background-color:#EFEAE0!important;
    color: #6a6973!important;
}



.jkit-gallery-control[data-filter=".jkit-gcf-Branding"]::before {
  background-image: url('https://mirandawagnerdesign.com/wp-content/uploads/2025/07/fingerprint-04.svg');
}

.jkit-gallery-control[data-filter=".jkit-gcf-Web-Design"]::before {
  background-image: url('https://mirandawagnerdesign.com/wp-content/uploads/2025/07/monitor-01.svg');
}

.jkit-gallery-control[data-filter=".jkit-gcf-Marketing-Materials"]::before {
  background-image: url('https://mirandawagnerdesign.com/wp-content/uploads/2025/07/certificate-02.svg');
}


.jkit-gallery-control.active::before {
  filter: brightness(0) invert(1);
}

.jkit-gallery-search-box{
    display: none;
}

.search-filter-trigger{
    background-color: #F7F5F0!important;
	display: flex;
    justify-content: space-between;
    align-items: center;
	  padding: 10px 25px!important;
}
.search-filter-trigger:hover, .search-filter-trigger:after{
    background-color: #DEB070!important;
	color: #ffffff!important;
}

.search-filter-trigger:hover svg path {
     fill: white!important;
}
.work-gall-mobile ul.search-filter-controls li {
    font-weight: 700!important;
}

.testimonials-list button{
    padding: 10px 20px;
}

.menu-item:hover, .footer-item .elementor-icon-list-item:hover, .squiggly_line:hover h2 {
  text-decoration-line: underline;
  text-decoration-style: wavy;
  text-decoration-color: #DEB070;
  text-underline-offset: 35%;
  text-decoration-thickness: 10%;
  font-size: 24px;
}



	.jkit-menu-wrapper{
		max-width: 100%!important;
}
	.jkit-menu > li > a {        
        text-align: center;
    }

a.elementor-element {
    text-decoration: none;
}

.btn-bt-br .elementor-button-text{
	border-bottom:3px solid transparent;
	transition: 0.3s;
}
.btn-bt-br .elementor-button-text:hover{
	border-color:#B68B57;
	
}

.elementor-2970 .elementor-element.elementor-element-351b7c5 .mf-checkbox-option input[type="checkbox"]:checked + span:before{
	font-weight: 900 !important;
}

@media (max-width: 768px) {
  .black-overlay {
		top: -1338.26px;
    left: -1862.01px;
    transform-origin: center;
    animation: blackFloodGrowMobile 3.8s forwards ease-in-out;
  }

  @keyframes blackFloodGrowMobile {
    to {
      transform: scale(15); /* чуть больше для надёжного покрытия */
    }
  }

  .animated-button .elementor-button {
    font-size: 14px;
    padding: 10px 20px;
  }
	
}

/***** Fade In Scroll **********/
.fade-in-scroll {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.fade-in-scroll.show {
    opacity: 1;
    transform: translateY(0);
}



/* Responsive adjustments for smaller screens */
@media (max-width: 768px) {
    .elementor-button,
    .custom-max-width-button {
        max-width: 240px !important;
        margin: 0 auto !important;
    }
}

@media (max-width: 480px) {
    .elementor-button,
    .custom-max-width-button {
        max-width: 240px !important;
        margin: 0 auto !important;
    }
}