/* =========================
   HERO CONTENT ANIMATION
   fade + slide up text content
========================= */

/* LEFT + RIGHT slides base */
.hero-left-slide,
.hero-right-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition:
        opacity 0.8s ease,
        visibility 0.8s ease;
}

/* active slide */
.hero-left-slide.active,
.hero-right-slide.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    z-index: 2;
}

/* ---------------------------------
   CONTENT BLOCK animation
--------------------------------- */

/* LEFT content block */
.hero-left-slide .relative.z-10 > div {
    opacity: 0;
    transform: translateY(34px);
    transition:
        opacity 1.75s ease,
        transform 1.75s cubic-bezier(.22,1,.36,1);
    transition-delay: 0.48s;
}

/* RIGHT card content */
.hero-right-slide .rcard {
    opacity: 0;
    transform: translateY(34px);
    transition:
        opacity 1.75s ease,
        transform 1.75s cubic-bezier(.22,1,.36,1);
    transition-delay: 0.48s;
}

/* animate only active slide content */
.hero-left-slide.active .relative.z-10 > div,
.hero-right-slide.active .rcard {
    opacity: 1;
    transform: translateY(0);
}

/* ---------------------------------
   smoother card hover
--------------------------------- */

.hero-right-slide .gradient-card {
    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease;
}

.hero-right-slide .gradient-card:hover {
    transform: translateY(-2px) scale(1.02);
}

/* ---------------------------------
   arrow buttons nicer motion
--------------------------------- */

.hero-arrow {
    transition:
        background-color 0.25s ease,
        transform 0.25s ease;
}

.hero-arrow:hover {
    transform: scale(1.06);
}

/* ---------------------------------
   indicators smooth animation
--------------------------------- */

.hero-indicator {
    transition:
        width 0.35s ease,
        opacity 0.35s ease,
        background-color 0.35s ease;
}

/* right slider indicators */
.hero-indicator {
  width: 8px;
  height: 8px;
  border: 0;
  border-radius: 999px;
  background: rgba(255,255,255,.4);
  transition: all .3s ease;
  cursor: pointer;
}

.hero-indicator.active {
  width: 28px;
  background: white;
}

/* left arrows polish */


.rcard
{
	position: absolute;
	bottom:0;
}

.vacancy-meta i
{
	font-style:normal;
}

.video-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.video-overlay.is-active {
    display: flex;
}

.video-overlay-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(4px);
}

.video-modal {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 900px;
    background: #111827;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0,0,0,0.4);
}

.video-frame-wrap {
    position: relative;
    width: 100%;
    padding-top: 56.25%;
}

.video-iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.video-close {
    position: absolute;
    top: 12px;
    right: 14px;
    z-index: 3;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 50%;
    background: rgba(255,255,255,0.12);
    color: #fff;
    font-size: 28px;
    cursor: pointer;
    line-height: 1;
    transition: 0.2s;
}

.video-close:hover {
    background: rgba(255,255,255,0.2);
}

#bluetext *
{
	color:#ffffff;
}

#bluetext h2
{
	font-weight: 700;
	font-size: 1.25rem;
    line-height: 1.75rem;
}

/* Стили для обычного ul, чтобы выглядело как SVG checklist */

#bluetext ul {
    list-style: none;
    padding: 0;
    margin: 24px 0 0;
}

#bluetext ul li {
    position: relative;
    padding-left: 27px;
    margin-bottom: 8px;
    font-size: 14px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.9); /* можно заменить под тему */
}

/* Кружок */
#bluetext ul li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 4px;
    width: 15px;
    height: 15px;
    border: 1.8px solid rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    box-sizing: border-box;
}

/* Галочка */
#bluetext ul li::after {
    content: "";
    position: absolute;
    left: 5px;
    top: 7px;
    width: 4px;
    height: 6px;
    border-right: 1.5px solid rgba(255, 255, 255, 0.9);
    border-bottom: 1.5px solid rgba(255, 255, 255, 0.9);
    transform: rotate(45deg);
    box-sizing: border-box;
}

#bluetext ul li:last-child {
    margin-bottom: 0;
}

h3
{ 
  font-weight: 600;
  font-size: 1.125rem;
  line-height: 1.75rem;
}

.rechtext p 
{
	font-size: .875rem;
    line-height: 1.25rem;
    color:  hsl(var(--muted-foreground));
 }
 
 #whyholder > div:nth-child(1) .svg2,  #whyholder > div:nth-child(1) .svg3
 {
	 display:none;
 }
 
 #whyholder > div:nth-child(2) .svg1,  #whyholder > div:nth-child(2) .svg3
 {
	 display:none;
 }
 
 #whyholder > div:nth-child(3) .svg2,  #whyholder > div:nth-child(3) .svg1
 {
	 display:none;
 }  
 
  .sliderleftcontent * 
  {
	  color:#ffffff;
  }
 
 .sliderleftcontent h2
 {
	font-size: 3rem;
    line-height: 1;	 
    font-weight:700;
 }
 
  .sliderleftcontent h3
 {
	font-size: 1.875rem;
    line-height: 2.25rem;
    font-weight:300;
    color: #fff;
    padding-top:5px;
 }
 
   .sliderleftcontent h4
 {
	font-size: .875rem;
  	line-height: 1.25rem;
    font-weight:700;
    color: #fff;
 }
 
 .sliderleftcontent img
{
	max-width:150px !important;
	height:auto !important;
	width:auto !important;
	position: relative !important;
	display:block !important;
}

.sliderrightcontent h2
{
	font-size: 1.25rem;
    line-height: 1.75rem;
    color:hsl(var(--background));
    font-weight: 700;
}

.sliderrightcontent h3
{
	font-size: .875rem;
    line-height: 1.25rem;
    margin-top: .375rem;
    color: hsl(var(--background) / .8);
    font-weight:400;
    
}

.pagecontent
{
	max-width:48rem;
}

.pagecontent *
{
	color:#ffffff;
}

.pagecontent h2 
{
	font-size: 2.25rem;
    line-height: 2.5rem;
    font-weight: 700;
    padding-bottom:30px;
}

.pagecontent p 
{
	padding-bottom:20px;
	font-size: 1.125rem;
    line-height: 1.75rem;
}

.pcontent p
{
	padding-bottom:20px;	
}

.phoneholder
{
	font-style:normal;
}

.textbottom
{
	position: absolute;
	bottom:4.5rem;
	left:4.5rem;
	padding-right:3rem;
}

@media(max-width:1100px) {
	.textbottom
	{
		bottom:2rem;
		left:2rem;
	}
	
	#toplogo img
	{
		height:auto !important;
		padding-right:4px;
	}
	
	.whylink 
	{
		position: inherit !important;
		padding-top:30px;
		right:auto !important;
		display:block;
	}
}

.hero-gradient2 {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        rgba(15, 23, 42, 0.8) 0%,
        rgba(15, 23, 42, 0.3) 50%,
        rgba(15, 23, 42, 0) 100%
    );
}

.leaflet-control-attribution
{
	display:none !important;
}

.whylink 
{
	position: absolute;
	right:2rem;
	top:0;
	color:#ffffff;
	line-height: 2.9rem;
	font-size:1.3em;
}

a.whylink:hover 
{
	color:#dbdcdc;
}

a.bluelink 
{
	color:#05579e;
}