/* ============ Creative Images Mouse follow ================= */

:root {	
	--mx-base-text: #262523;
    --mx-color-bg: #fff;
    --img-maxwidth: 350px;
    --blendmode-title: difference;
    --filter-img: none;
    --mx-title_size: 12vw;
}

.content__img-inner {
height: 100vh;
position: relative;
display: flex;
justify-content: center;
align-items: center;
isolation: isolate;
}


.content__img {
	position: absolute;
	top: 0;
	left: 0;
	opacity: 0;
	will-change: transform;
	filter: var(--filter-img);  
}
.max__img {
	max-width: var(--img-maxwidth);
}
.content__img--full {
	width: 100%;
	height: 100%;
	background-size: cover;
}

#content_ima_mf {
	overflow: hidden;
	position: relative;
	background-color:  var(--mx-color-bg);
}
.mxt-slide-txt-ptb {
  z-index: 100;
  position: relative;
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
  .mxt-slide-txt-ptb {
    padding-top: 190px;
  }
}
.mxt-slide-txt-slide-text span {
  font-weight: 700;
	font-size: var(--mx-title_size);
  line-height: 1;
  white-space: nowrap;
  letter-spacing: -0.03em;
  	mix-blend-mode: var(--blendmode-title);
	-webkit-text-stroke: 2px var(--mx-base-text);
	text-stroke: 2px var(--mx-base-text);
	-webkit-text-fill-color: transparent;
	text-fill-color: transparent;
	color: transparent;
}
.mxt-slide-txt-slide-text span a:hover {
  color: var(--mx-base-text);
	-webkit-text-fill-color: var(--mx-base-text);
	text-fill-color: var(--mx-base-text);
}

.mxt-slide-txt-slide-text span i {
  font-style: normal;
  margin-left: 40px;
}
.mxt-slide-txt-slide-active .slide-transtion {
  -webkit-transition-timing-function: linear;
  transition-timing-function: linear;
}
.mxt-slide-txt-slide-active .swiper-slide {
  width: auto;
}

.content__title {
	font-weight: 700;
	position: relative;
	z-index: 10000;
	font-size: var(--mx-title_size);
	mix-blend-mode: var(--blendmode-title);
	-webkit-text-stroke: 2px var(--mx-base-text);
	text-stroke: 2px var(--mx-base-text);
	-webkit-text-fill-color: transparent;
	text-fill-color: transparent;
	color: transparent;
	pointer-events: none;
}

/*----------------------------------------*/
/*  2.2 Buttons
/*----------------------------------------*/
.mx-btn-black {
  position: absolute;
  bottom: 60px;
  right: 60px;
  display: inline-block;
  z-index: 20000;
  
}
.mx-btn-black-text {
  font-size: 16px;
  font-weight: 500;
  padding: 22px 22px;
  border-radius: 9999px;
  color: var(--mx-color-bg);
  background-color: var(--mx-base-text);
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .mx-btn-black-text {
    font-size: 14px;
    padding: 22px 17px;
  }
}
@media (max-width: 767px) {
  .mx-btn-black-text {
    font-size: 15px;
    padding: 22px 13px;
  }
}
.mx-btn-black-filter-blur {
  position: absolute;
  top: 0;
  left: 0;
}
.mx-btn-black-circle {
  width: 66px;
  height: 66px;
  line-height: 62px;
  margin-left: -4px;
  text-align: center;
  border-radius: 9999px;
  transition-duration: 0.9s;
  background: var(--mx-base-text);
  transition-timing-function: cubic-bezier(0.135, 0.9, 0.15, 1);
}
.mx-btn-black-circle > svg {
  width: 14px;
  margin-left: 3px;
  color: var(--mx-color-bg);
  transform: translateX(-2px);
}
.mx-btn-black:hover .mx-btn-black-circle {
  transform: translateX(12px) rotate(45deg);
}

.mx-btn-black.btn-transparent-bg .mx-btn-black-text {
  color: var(--mx-color-bg);
  background-color: #26282C;
}
.mx-btn-black.btn-transparent-bg .mx-btn-black-circle {
  background-color: #26282C;
}
.mx-btn-black.btn-transparent-bg .mx-btn-black-circle svg {
  color: var(--mx-color-bg);
}