:where([class^="ri-"])::before { content: "\f3c2"; }
#main-header {
transform: translateY(-100%);
background: transparent;
transition: all 0.4s ease;
opacity: 0;
}
#main-header.visible {
transform: translateY(0);
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(8px);
opacity: 1;
}
body {
font-family: 'Poppins', sans-serif;
scroll-behavior: smooth;
}
.hero-section {
background-size: cover;
background-position: right center;
}
.hero-content {
background: linear-gradient(90deg, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0.9) 50%, rgba(255,255,255,0) 100%);
}
.reveal {
opacity: 0;
transform: translateY(30px);
transition: all 0.8s ease;
}
.reveal.active {
opacity: 1;
transform: translateY(0);
}
.slide-in-left {
opacity: 0;
transform: translateX(-50px);
transition: all 0.8s ease;
}
.slide-in-left.active {
opacity: 1;
transform: translateX(0);
}
.slide-in-right {
opacity: 0;
transform: translateX(50px);
transition: all 0.8s ease;
}
.slide-in-right.active {
opacity: 1;
transform: translateX(0);
}
.fade-in {
opacity: 0;
transition: opacity 0.8s ease;
}
.fade-in.active {
opacity: 1;
}
.scale-in {
opacity: 0;
transform: scale(0.9);
transition: all 0.8s ease;
}
.scale-in.active {
opacity: 1;
transform: scale(1);
}
@keyframes scroll {
0% {
transform: translateX(0);
}
100% {
transform: translateX(calc(-200px * 12 - 2rem * 12));
}
}
.animate-scroll {
animation: scroll 25s linear infinite;
}
.client-carousel {
width: 100%;
overflow: hidden;
}
.client-logo {
flex: 0 0 200px;
}
.value-card {
transition: all 0.3s ease;
}
.value-card:hover {
transform: translateY(-10px);
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}
.service-card {
transition: all 0.3s ease;
}
.service-card:hover {
transform: scale(1.05);
}
.market-card {
transition: all 0.3s ease;
overflow: hidden;
}
.market-card:hover {
transform: translateY(-5px);
}
.market-card-content {
transition: all 0.3s ease;
}
.market-card:hover .market-card-content {
transform: translateY(-40px);
}
.market-card-extra {
transition: all 0.3s ease;
opacity: 0;
height: 0;
}
.market-card:hover .market-card-extra {
opacity: 1;
height: auto;
}
.back-to-top {
position: fixed;
bottom: 30px;
right: 30px;
z-index: 99;
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
}
.back-to-top.active {
opacity: 1;
visibility: visible;
}
input, textarea {
transition: all 0.3s ease;
}
input:focus, textarea:focus {
transform: translateY(-2px);
}
.preloader {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: white;
display: flex;
justify-content: center;
align-items: center;
z-index: 9999;
transition: opacity 0.5s ease, visibility 0.5s ease;
}
.preloader.hidden {
opacity: 0;
visibility: hidden;
}
.logo-animation {
animation: pulse 2s infinite;
}
@keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.1); }
100% { transform: scale(1); }
}
.chat-button {
position: fixed;
bottom: 30px;
left: 30px;
z-index: 99;
transition: all 0.3s ease;
}
.chat-button:hover {
transform: scale(1.1);
}
.pattern-bg {
background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%230d6efd' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}