.introduce-ultra-1{
  padding: 10rem 0;
}
.intro-hero {
    position: relative;
    max-width: 1120px;
    margin: 0 auto;
    padding: 22px 0 40px;
    transition: all 0.5s ease-in-out; 
}
.intro-hero::before,
.intro-hero::after {
    content: "";
    position: absolute;
    background: var(--color-primary);
    z-index: 1;
    transition: all 0.6s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.intro-hero::before {
    top: -18px;
    right: -35px;
    width: 628px;
    height: 490px;
    clip-path: polygon(45% 0, 100% 0, 100% 100%, 0 100%, 0% 50%);
}
.intro-hero::after {
    left: -55px;
    bottom: -12px;
    width: 340px;
    height: 380px;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 30% 100%, 0 70%);
}
.intro-hero:hover::before,
.intro-hero:hover::after {
    background: var(--color-secondary);
}
.intro-hero:hover::before {
    transform: translate(10px, -10px); 
}
.intro-hero:hover::after {
    transform: translate(-10px, 10px); 
}
.intro-media{
  position: relative;
  z-index: 2;
  background: var(--color-white);
}

.intro-img{
  width: 100%;
  height: 515px;
  object-fit: cover;
  display: block;
}
.intro-stats {
    position: absolute;
    z-index: 3;
    right: -200px;
    bottom: 18px;
    transform: translateX(-50%);
    display: flex;
    gap: 26px;
    direction: ltr;
}

.stat-card {
    position: relative;
    width: 175px;
    padding: 24px 18px 16px;
    color: #fff;
    text-align: center;
}

.stat-card .background {
    position: absolute;
    top: -80px;
    right: 10px;
    z-index: -1;
}

.stat-card .background svg path:nth-child(1) {
    stroke: var(--color-primary);
    transition: all 0.6s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.stat-card .background svg path:last-child {
    fill: var(--color-primary);
    transition: all 0.6s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.stat-card:hover .background svg path:nth-child(1) {
    stroke: var(--color-secondary);
    transform: translate(10px, -10px);
}

.stat-card:hover .background svg path:last-child {
    fill: var(--color-secondary);
    transform: translate(-5px, 5px);
}

.stat-value {
    font-size: 34px;
    font-weight: 800;
    line-height: 1;
    margin-top: 8px;
}

.stat-value .plus {
    font-size: 20px;
    font-weight: 900;
    vertical-align: top;
    margin-right: 2px;
}

.stat-label {
    margin-top: 10px;
    font-size: 16px;
    font-weight: 500;
    opacity: 0.98;
}

@media (max-width: 860px){
  .intro-img{ height: 260px; }
  .intro-stats{
    position: relative;
    left: auto;
    bottom: auto;
    transform: none;
    margin-top: 14px;
    justify-content: center;
    flex-wrap: wrap;
    gap: 16px;
    direction: ltr;
  }
  .stat-card{ width: 160px; }
}

@media (max-width: 600px){
	.intro-hero::after {
display:none;
}
	.intro-stats {
    position: absolute;
    z-index: 3;
    right: unset; 
     bottom: unset; 
    top:-30px;
		left:20px;
    flex-direction: column;
}
	.intro-hero::before {
    width: 300px;
    height: 350px;

}
	
	
}