@charset "utf-8";
@charset "utf-8";
@charset "utf-8";
@charset "utf-8";
@charset "utf-8";
@charset "utf-8";
@charset "utf-8";
@charset "utf-8";
@charset "utf-8";
@charset "utf-8";
@charset "utf-8";
   .panel {
position: fixed;
top: 50%;
right: -100%;
transform: translateY(-50%);
width: auto;
max-width: 450px; background-color: #666666;
color: #FFF;
padding: 10px 15px;
border-radius: 10px 0 0 10px;
transition: 0.5s ease-in;
z-index: 4;
display: flex;
flex-direction: column; gap: 10px;
box-shadow: -5px 0 15px rgba(0,0,0,0.3);
visibility: hidden;
}
.sidebarpanel {
background-color: #057A8F;
color: #FFFFFF;
color: #FFF;
padding: 5px 10px;	
}	
.panel.open {
right: 0;
visibility: visible;
} .test-option {
background-color: rgba(0,0,0,0.2);
padding: 10px;
border-radius: 5px;
border: 1px solid rgba(255, 255, 255, 0.2);
}
.test-option h3 {
margin: 0 0 10px 0;
font-size: 150%;
letter-spacing: 2px;
}
.test-option p {
margin: 0 0 10px 0;
font-size: 100%;
line-height: 1.4;
} .cta-link {
display: inline-block;
background-color: #e60012;
color: white;
text-decoration: none;
padding: 5px 12px;
border-radius: 3px;
font-weight: 600;
font-size: 80%;
transition: 0.3s;
text-transform: uppercase;
animation: double-flash_9253 4s ease infinite;
transform-origin: 50% 50%;
letter-spacing: 2px;
cursor: pointer;
}
@keyframes double-flash_9253 {
0% { opacity:1 }
12.5% { opacity:0 }
25% { opacity:1 }
37.5% { opacity:0 }
50% { opacity:1 }
100% { opacity:1 }
}
.cta-link:hover {
background: #cc0000;
transform: scale(1.05);
}
.toggle-btn {
position: fixed;
top: 50%;
right: 20px; transform: translateY(-50%);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: 0.5s ease-in;
z-index: 3;
}
.speedometersvg, .closesvg {
background-color: rgba(0,0,0,0.4);
width: 40px;
height: 40px;
border: 2px solid #fff;
border-radius: 5px;
animation: tada_5110 3.6s linear infinite;
transform-origin: 50% 50%;
padding: 5px;
}
@keyframes tada_5110 {
0% { transform: scale(1) }
5.55556% { transform:scale(.9) rotate(-8deg) }
11.11111% { transform:scale(.9) rotate(-8deg) }
16.66667% { transform:scale(1.3) rotate(8deg) }
22.22222% { transform:scale(1.3) rotate(-8deg) }
27.77778% { transform:scale(1.3) rotate(8deg) }
33.33333% { transform:scale(1.3) rotate(-8deg) }
38.88889% { transform:scale(1.3) rotate(8deg) }
44.44444% { transform:scale(1) rotate(0) }
100% { transform:scale(1) rotate(0) }
}
@media screen and (max-width: 980px) { .panel {
max-width: calc(100% - 100px);
overflow: hidden;
text-overflow: ellipsis;
}
}
 header.main-header {
width: 100%;
background: #fff;
border-bottom: 1px solid #666;
z-index: 4;
transition: transform 0.4s ease;	
position: sticky;
top: 0px;
}
.top-bar {
height: 40px;
background-color: #666666;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 40px;
font-size: 100%;
border-bottom: 1px solid #999;
color: #FFFFFF;
text-transform: uppercase;
}
.socials {
display: flex; align-items: center;
gap: 5px;
}
.socials img {
width: 30px !important; height: 30px !important;
display: block;
overflow: visible; flex-shrink: 0; }
.lang-selector {
list-style: none;
margin: 0;
padding: 0;
display: flex;
align-items: center;
gap: 0; }
.lang-selector li {
display: flex;
align-items: center;
position: relative;
} .lang-selector li:not(:last-child)::after {
content: '|';
color: #444; font-size: 14px;
margin: 0 5px;
font-weight: 300;
}
.lang-selector li a {
text-decoration: none;
color: #ccc;
font-size: 13px;
font-weight: 600;
text-transform: uppercase;
padding: 5px 8px;
transition: all 0.3s ease;
position: relative;
letter-spacing: 1px;
} .lang-selector li a:hover, 
.lang-selector li.current-menu-item a {
color: #fff;
} .lang-selector li a::before {
content: '';
position: absolute;
bottom: 0;
left: 50%;
width: 0;
height: 2px;
background-color: #e60012;
transition: all 0.3s ease;
transform: translateX(-50%);
}
.lang-selector li.current-menu-item a::before,
.lang-selector li a:hover::before {
width: 80%; } .lang-selector li.current-menu-item a::before {
box-shadow: 0 0 8px #e60012;
}  .lang-selector-mobil {
display: none; position: fixed;
top: 25px;
left: 25px;
z-index: 10006;
}
.lang-selector-mobil ul {
display: none; list-style: none;
padding: 0;
margin: 0;
align-items: center;
gap: 10px;
}
.lang-selector-mobil li {
display: flex;
align-items: center;
position: relative;
} .lang-selector-mobil li:not(:last-child)::after {
content: '|';
color: #444; font-size: 14px;
margin: 0 5px;
font-weight: 300;
}
.lang-selector-mobil li a {
text-decoration: none;
color: #ccc;
font-size: 13px;
font-weight: 600;
text-transform: uppercase;
padding: 5px 8px;
transition: all 0.3s ease;
position: relative;
letter-spacing: 1px;
} .lang-selector-mobil li a:hover, 
.lang-selector-mobil li.current-menu-item  a {
color: #fff;
} .lang-selector-mobil li a::before {
content: '';
position: absolute;
bottom: 0;
left: 50%;
width: 0;
height: 2px;
background-color: #e60012;
transition: all 0.3s ease;
transform: translateX(-50%);
}
.lang-selector-mobil li.current-menu-item a::before,
.lang-selector-mobil li a:hover::before {
width: 80%; } .lang-selector-mobil li.current-menu-item a::before {
box-shadow: 0 0 8px #e60012;
}
.header-container {
max-width: 1400px;
margin: 0 auto;
height: 80px;
padding: 0 40px;
display: flex;
justify-content: space-between;
align-items: center;
background-color: #000000;	
} header.main-header.hidden { transform: translateY(-100%); }
header.main-header.scrolled { transform: translateY(-40px); }
.logo { width: 20%; max-width: 280px; min-width: 180px; display: block; }
.logo img { width: 100%; height: auto; display: block; } .nav-menu ul { display: flex; list-style: none; align-items: center; }
.nav-menu ul li { display: flex; align-items: center; position: relative; } .nav-menu ul li:not(:last-child)::after {
content: ''; width: 1px; height: 15px; 
background-color: #ccc; 
display: block;
transition: opacity 0.2s ease;
}  .nav-menu ul li:hover::after { opacity: 0; } .nav-menu ul li:has(+ li:hover)::after { opacity: 0; }
.nav-menu ul li a {
text-decoration: none;
color: #CCC;
font-size: 100%;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 2px;
padding: 12px 18px;
display: block;
position: relative;
transition: 0.3s;
z-index: 1;
}
.nav-menu ul li a:hover { color: #fff; }
.nav-menu ul li a::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 0;
height: 100%;
background-color: #e60012;
transition: 0.3s;
z-index: -1;
}
.nav-menu ul li a:hover::before { width: 100%; } .hamburger { 
display: none; width: 30px; height: 20px; 
flex-direction: column; justify-content: space-between; 
cursor: pointer; z-index: 10005; position: relative;
}
.hamburger span {
display: block;
height: 3px;
width: 100%;
background-color: #FFF;
transition: 0.3s;
} .hamburger.active span { background-color: #fff; } .hamburger.active span:nth-child(1) { transform: translateY(8.5px) rotate(45deg); }
.hamburger.active span:nth-child(2) { opacity: 0; }
.hamburger.active span:nth-child(3) { transform: translateY(-8.5px) rotate(-45deg); } @keyframes elasticShake {
0% { 
transform: translateX(0); 
}
40% { transform: translateX(-12px) scaleX(1.03); 
}
60% { transform: translateX(5px) scaleX(0.98); 
}
80% { transform: translateX(-2px); 
}
100% { transform: translateX(0) scaleX(1); 
}
} @media screen and (max-width: 768px) {
.hamburger { display: flex; }
.nav-menu {
position: fixed;
top: 0;
right: -100%;
width: 99%; height: 100vh;
background-color: #000;
display: flex;
justify-content: center;
align-items: center;
transition: right 0.4s cubic-bezier(0.77, 0.2, 0.05, 1.0);
z-index: 5;
overflow-y: auto;
} .nav-menu.active { 
right: 0; 
animation: elasticShake 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}
.nav-menu ul { flex-direction: column; gap: 5px; width: 100%; text-align: center; }
.nav-menu ul li a { color: #fff; font-size: 20px; padding: 10px; }
.nav-menu ul li:not(:last-child)::after { display: none; }
.lang-selector-mobil.active {
display: block !important; animation: fadeIn 1s ease-in .5s forwards;
opacity: 0; 
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
} .lang-selector-mobil.active ul {
display: flex !important;
}
}
 .homegrid {
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-template-rows: repeat(9, auto); 
gap: 10px;
margin: 1em auto;
width: 95%;
} .homegrid > div {
border-radius: 5px;
box-shadow: 0 20px 50px rgba(0,0,0,0.5);
background-color: #000000;
} .homegrid > div:nth-child(1) { 
grid-area: 1 / 1 / 7 / 8; 
} .homegrid > div:nth-child(2) { 
grid-area: 1 / 8 / 7 / 13; 
}  .homegrid > div:nth-child(3) { grid-area: 7 / 1 / 10 / 4; }
.homegrid > div:nth-child(4) { grid-area: 7 / 4 / 10 / 7; }
.homegrid > div:nth-child(5) { grid-area: 7 / 7 / 10 / 10; }
.homegrid > div:nth-child(6) {
grid-area: 7 / 10 / 10 / 13;
background-color: #e60012;
}
.content-box {
padding: 15px;
}
.content-box p {
font-size: 120%;
color: #CCC;
text-transform: uppercase;
font-weight: 600;
text-align: justify;
line-height: 1.8;
}
.content-box p strong {
color: #e60012;	
font-weight: 800;	
border-bottom: 2px solid transparent;
transition: border-color 0.3s ease;
}
.content-box p strong.flash {
border-bottom: 2px solid #ffffff;
}
.slider-container {
position: relative;
aspect-ratio: 5 / 3;
overflow: hidden;
}
.slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1s ease-in-out; z-index: 1; }
.slide.active { opacity: 1; z-index: 2; }
.slide img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.1); transition: transform 6s linear; }
.slide.active img { transform: scale(1); }
.nav-btn { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; background: rgba(0,0,0,0.3); color: #fff; border: none; padding: 15px; cursor: pointer; backdrop-filter: blur(5px); }
.prev { left: 0; border-radius: 0 5px 5px 0; }
.next { right: 0; border-radius: 5px 0 0 5px; } .dots { position: absolute; bottom: 15px; left: 50%; transform: translateX(-50%); z-index: 3; display: flex; gap: 8px; }
.dot { width: 10px; height: 10px; background: rgba(255,255,255,0.4); border-radius: 50%; cursor: pointer; transition: 0.3s; }
.dot.active { background: #fff; transform: scale(1.2); }
@media (max-width: 768px) {
.homegrid {
grid-template-columns: 1fr;
grid-template-rows: auto;
height: auto;
}
.slider-container {
max-width: 100%;
} 
.homegrid > div {
grid-area: auto !important;
min-height: 200px;
}
}
 .marquee-container {
overflow: hidden;
width: 100%;
background-color: #000;
padding: 0px 0;
position: relative;
color: #CCCCCC;
text-align: center;
font-weight: 400;
margin: 1em 0 0 0;
}
.marquee-content {
display: flex;
width: max-content;
animation: scroll 80s linear infinite;
} .marquee-container:hover .marquee-content {
animation-play-state: paused;
}
.logo-item {
width: 150px;
margin: 0 20px;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
}
.logo-item img {
width: 100%;
aspect-ratio: 1 / 1;
filter: invert(1); transition: 0.3s;
}
.logo-item img:hover {
filter: grayscale(0);
}
@keyframes scroll {
0% { transform: translateX(0); }
100% { transform: translateX(-50%); } }
  .service-card {
position: relative; box-shadow: 0 10px 30px rgba(0,0,0,0.5);
overflow: hidden;
aspect-ratio: 4 / 3;
background-color: #111;
cursor: pointer; transform: translateZ(0);
backface-visibility: hidden;
}
.service-card img {
width: 100%;
height: 100%;
object-fit: cover; transition: transform 1.2s cubic-bezier(0.2, 1, 0.3, 1);
will-change: transform;
}
.service-overlay {
position: absolute;
inset: 0;
background: linear-gradient(to top, 
rgba(0,0,0,0.8) 0%, 
rgba(0,0,0,0.2) 50%, 
transparent 100%);
display: flex;
flex-direction: column;
justify-content: flex-end;
padding: 5px;
color: #fff;
transition: background 0.5s ease;
pointer-events: none;
}
.text-box { transform: translateY(10px) translateZ(0);
backface-visibility: hidden;
transition: transform 0.6s cubic-bezier(0.2, 1, 0.3, 1);
will-change: transform;
}
.service-card h2 {
margin: 0;
font-size: 120%;
font-weight: 700;
text-transform: uppercase;
background-color: #e60012;
display: inline-block;
padding: 8px 10px;
border-radius: 2px;
text-shadow: 0 2px 4px rgba(0,0,0,0.3);
letter-spacing: 2px;
}
.service-card p {
margin: 0;
font-size: 110%;
line-height: 1.5;
color: #FFF;
max-height: 0;
opacity: 0;
overflow: hidden;
transform: translateZ(0);
backface-visibility: hidden;
-webkit-font-smoothing: antialiased;
transition: max-height 0.5s ease, opacity 0.5s ease, margin-top 0.5s ease;
font-weight: 500;
background-color: rgba(0,0,0,.6);
padding: 5px;
} .service-card:hover img { transform: scale(1.15) rotate(2deg);
}
.service-card:hover .service-overlay {
background: rgba(0, 0, 0, 0.4);
}
.service-card:hover .text-box {
transform: translateY(0) translateZ(0);
}
.service-card:hover p {
opacity: 1;
max-height: 100px; margin-top: 15px;
transition-delay: 0.05s;
} .service-card {
opacity: 0;
will-change: transform, opacity;
} .service-card.animal { animation: popUpBounce 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}
@keyframes popUpBounce {
0% { opacity: 0;
transform: scale(0.8); 
}
50% {
opacity: 1; transform: scale(1.1);
}
75% { transform: scale(0.98);
}
100% { opacity: 1;
transform: scale(1);
}
}  @media (max-width: 1100px) {
.service-card {
flex: 0 0 calc(50% - 10px);
}
} @media (max-width: 650px) {
.service-card {
flex: 0 0 100%;
}
.service-card h2 {
font-size: 1.1rem;
}
}
 .knowledge-section {
width: 100%;
}
.knowledge-header {
text-align: center;
margin: 1em auto 1em auto;	
padding: 2em 0;
text-align: center;
background-color: #e60012;
box-shadow: 0 20px 50px rgba(0,0,0,0.5);
}
.knowledge-header h2 {
font-size: 190%;
font-weight: 500;
margin: 0 auto 0px auto;
color: #fff;
text-transform: uppercase;
letter-spacing: 3px;
max-width: 90%;
}
.knowledge-header p {
color: #ffffff !important;
font-size: 120%;
margin: 0 auto;
padding: 25px 20px 10px 20px;
position: relative;
max-width: 750px;
}
.knowledge-card h3::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 2px; background: rgba(255, 255, 255, 0.1); overflow: hidden;
} .knowledge-card h3::after {
background: linear-gradient(90deg, 
transparent 0%, 
rgba(255, 255, 255, 0) 30%, 
rgba(255, 255, 255, 0.8) 50%, 
rgba(255, 255, 255, 0) 70%, 
transparent 100%
);
background-size: 200% 100%;
animation: knightRider 2.5s linear infinite;
} @keyframes knightRider {
0% {
background-position: 150% 0%;
}
50% {
background-position: -50% 0%;
}
100% {
background-position: 150% 0%;
}
} .knowledge-card:hover h3::after {
opacity: 0;
transition: opacity 0.2s ease;
}
.knowledge-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 30px;
width: 95%;
margin: 1em auto;
} .knowledge-card {
position: relative;
background: #111;
aspect-ratio: 4 / 2;
display: flex;
flex-direction: column;
padding: 30px;
text-decoration: none;
border-radius: 8px;
overflow: hidden; 
transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
box-shadow: 0 20px 50px rgba(0,0,0,0.5);
} .knowledge-card.animal { animation: popUpBounce 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
} .knowledge-card::before {
content: '';
position: absolute;
top: 0;
left: -150%;
width: 50%;
height: 100%;
background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.1) 50%, rgba(255,255,255,0) 100%);
transform: skewX(-25deg);
z-index: 3;
transition: none;
}
.knowledge-card:hover::before {
left: 150%;
transition: all 0.7s ease;
}
.knowledge-card:hover {
box-shadow: 0 10px 60px rgba(0,0,0,0.5);
background-color: #161616;
} .knowledge-card h3 {
color: #fff;
font-size: 140%;	
font-weight: 500;
text-transform: uppercase;
margin: 0;
padding: 5px 12px; display: inline-block; position: relative;
transition: 0.3s ease;
z-index: 4;
letter-spacing: 3px;
} .knowledge-card h3::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 0;
height: 100%;
background-color: #e60012;
transition: 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
z-index: -1; } .knowledge-card:hover h3 {
color: #fff; letter-spacing: 2px; }
.knowledge-card:hover h3::before {
width: 100%; } .img-wrapper {
position: absolute;
bottom: -40px; 
right: -40px;  
width: 280px;
height: 280px;
z-index: 1;
transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1); } .img-wrapper img {
width: 100%;
height: 100%;
object-fit: contain;
opacity: 0.3;
filter: grayscale(1); transition: all 0.5s ease;
} .knowledge-card:hover .img-wrapper {
transform: rotate(-15deg) scale(1.1); bottom: -20px;
right: -20px;
}
.knowledge-card:hover .img-wrapper img {
opacity: 0.7;
filter: grayscale(0); }
@media (max-width: 992px) {
.knowledge-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
.knowledge-grid { grid-template-columns: 1fr; }
.img-wrapper { width: 200px; height: 200px; }
}
.premium-testimonial {
padding: 10px 20px;
color: #1a1a1a;
text-align: center;
position: relative;
overflow: hidden;
display: flex;
align-items: center;
background-color: #FFFFFF;
}
.premium-testimonial p {
color: #333333 !important;
}
.testi-inner {
max-width: 900px;
margin: 0 auto;
width: 100%;
}
.testi-box {
max-width: 1200px;
margin: 0 auto;
height: 300px;
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.t-item {
display: none;
position: absolute;
width: 100%;
opacity: 0;
}
.t-item.active {
display: block;
animation: revealElegant 1.4s cubic-bezier(0.19, 1, 0.22, 1) forwards;
}
@keyframes revealElegant {
0% {
opacity: 0;
transform: translateY(20px);
filter: blur(10px);
}
100% {
opacity: 1;
transform: translateY(0);
filter: blur(0);
}
}
.t-avatar {
width: 50px;
height: 50px;
border-bottom: 2px solid #e60012;
color: #767676;
font-size: 1.4rem;
font-weight: bold;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 30px;
text-transform: uppercase;
}
.t-item p {
font-size: 200%;
line-height: 1.8;
color: #333;
margin-bottom: 35px;
}
.t-name {
display: block;
font-weight: 700;
text-transform: uppercase;
color: #000;
letter-spacing: 4px;
font-size: 100%;
} .t-nav {
margin-top: 50px;
display: flex;
justify-content: center;
gap: 15px;
}
.t-dot {
width: 30px;
height: 4px; background: #eeeeee;
cursor: pointer;
transition: all 0.5s ease-in-out;
border-radius: 2px;
position: relative;
} .t-dot.active {
background: #e60012 !important;
width: 60px;
}
@media (max-width: 768px) {
.testi-box { height: 450px; }
.t-item p { font-size: 1.15rem; }
}
 .featured-section {
width: 100%;
}
.featured-header {
text-align: center;
margin: 1em auto 1em auto;	
padding: 2em 0;
text-align: center;
background-color: #e60012;
box-shadow: 0 20px 50px rgba(0,0,0,0.5);
}
.featured-header h2 {
font-size: 110%;
font-weight: 800;
margin: 0 auto 0px auto;
color: #fff;
text-transform: uppercase;
letter-spacing: 2px;
max-width: 90%;
}
.featured-card h3::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 2px; background: rgba(255, 255, 255, 0.1); overflow: hidden;
} .featured-card h3::after {
background: linear-gradient(90deg, 
transparent 0%, 
rgba(255, 255, 255, 0) 30%, 
rgba(255, 255, 255, 0.8) 50%, 
rgba(255, 255, 255, 0) 70%, 
transparent 100%
);
background-size: 200% 100%;
animation: knightRider 2.5s linear infinite;
} @keyframes knightRider {
0% {
background-position: 150% 0%;
}
50% {
background-position: -50% 0%;
}
100% {
background-position: 150% 0%;
}
} .featured-card:hover h3::after {
opacity: 0;
transition: opacity 0.2s ease;
}
.featured-header p {
color: #ccc;
line-height: 1.8;
}
.featured-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 30px;
width: 95%;
margin: 1em auto;
} .featured-card {
position: relative;
background: #111;
aspect-ratio: 16 / 9;
display: flex;
flex-direction: column;
padding: 30px;
text-decoration: none;
border-radius: 8px;
overflow: hidden; 
transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
box-shadow: 0 20px 50px rgba(0,0,0,0.5);
opacity: 0;
will-change: transform, opacity;
} .featured-card.animal {
animation: popUpBounce 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
} .featured-card::before {
content: '';
position: absolute;
top: 0;
left: -150%;
width: 50%;
height: 100%;
background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.1) 50%, rgba(255,255,255,0) 100%);
transform: skewX(-25deg);
z-index: 3;
transition: none;
}
.featured-card:hover::before {
left: 150%;
transition: all 0.7s ease;
}
.featured-card:hover {
box-shadow: 0 10px 60px rgba(0,0,0,0.5);
background-color: #161616;
} .featured-card h3 {
color: #fff;
font-size: 100%;
font-weight: 800;
text-transform: uppercase;
margin: 0;
padding: 5px 12px; display: inline-block; position: relative;
transition: 0.3s ease;
z-index: 4;
letter-spacing: 2px;
background-color: #e60012;
} .featured-card h3::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 0;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);;
transition: 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
z-index: -1; } .featured-card:hover h3 {
color: #fff; letter-spacing: 2px; }
.featured-card:hover h3::before {
width: 100%; } .featured-img-wrapper {
position: absolute;
inset: 0;
z-index: 1;
transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1); } .featured-img-wrapper img {
width: 100% !important; height: 100% !important; object-fit: cover; display: block;
opacity: 1;
filter: grayscale(.1); transition: all 0.5s ease;
} .featured-card:hover .featured-img-wrapper {
transform: rotate(-5deg) scale(1.1); bottom: 0px;
right: 0px;
}
.featured-card:hover .featured-img-wrapper img {
opacity: 0.7;
transform: rotate(-5deg) scale(1.3);}
@media (max-width: 992px) {
.featured-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
.featured-grid { grid-template-columns: 1fr; }
}
 #cookie-bar {
position: fixed;
bottom: -150vh;
left: 0;
width: 100%; color: #fff;
padding: 20px 10px;
z-index: 9999;
box-shadow: 0 -2px 10px rgba(0,0,0,0.5);
transition: bottom 0.5s ease;
}
#cookie-bar.show {
bottom: 0;
}
#cookie-content {
max-width: 1200px;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 20px;
text-align: center;
}
#cookie-content p {
margin: 0;
font-size: 16px;
flex: 1 1 250px;
}
.cookie-buttons {
display: flex;
gap: 10px;
flex-wrap: wrap;
justify-content: center;
}
.cookie-btn {
color: #FFFFFF;
border: 1px solid #FFFFFF;
padding: 10px 18px;
cursor: pointer;
border-radius: 4px;
font-size: 14px;
transition: all 0.3s ease;
text-decoration: none;
display: inline-block;
text-transform: uppercase;
font-weight: 500;
background-image: linear-gradient(to left, #ff0000 50%, rgba(0,0,0,.4) 50%);
background-size: 200% 100%;
background-position: right bottom;
transition: all .5s ease-in; }
.cookie-btn:hover {
background-position: left bottom; }
.cookie-btn a  {
color: #ffffff;
}
@media (max-width: 768px) {
#cookie-bar {
padding: 15px 10px; }
#cookie-content {
flex-direction: column;
gap: 10px; }
#cookie-content p {
flex: none; font-size: 14px; line-height: 1.4;
}
.cookie-buttons {
flex-direction: row; width: 100%;
justify-content: center;
gap: 8px;
}
.cookie-btn {
padding: 8px 12px; font-size: 12px;
flex: 1; max-width: calc(50% - 25px); }
}
 .archive-header {
background-color: #e60012;
color: #FFFFFF;
width: 100%;
padding: 1em 5%;
box-sizing: border-box;	
margin: 0 0 1em 0;
}
.archive-header h1 {
text-align: center;
text-transform: uppercase;
font-weight: 600;
letter-spacing: 2px;
}
.archive-header h2{
text-align: center;
text-transform: uppercase;
font-weight: 600;
letter-spacing: 2px;
}
.archive-header p {
font-size: 120%;
}
.masonry-layout {
column-count: 4;
column-gap: 25px;
}
.masonry-item {
margin: 0 0 20px 0;
break-inside: avoid;
background-color: #1a1a1a;
position: relative;
overflow: hidden;
border-radius: 5px;
box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.28);
transition: transform 0.6s cubic-bezier(1.00, -0.55, 0.265, 1.55), 
box-shadow 0.4s ease;
opacity: 0;
transform: scale(0.8) translateY(50px); } .masonry-item.animal {
opacity: 1;
transform: scale(1) translateY(0);
box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.18);
} .masonry-item img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
} .masonry-item:hover img {
transform: scale(1.08); }
.post-date {
position: absolute;
top: 10px; right: 10px; z-index: 2; background-color: #e60012; color: #fff;
padding: 10px 10px 10px 35px;
font-size: 80%;
font-weight: bold;
border-radius: 3px;
text-transform: uppercase;
background-image: url(//www.trendoptik.hu/wp-content/themes/2026.trendoptik.hu/images/icons/clock.svg);
background-size: 20px auto;
background-repeat: no-repeat;
background-position: 5px center;
}
.brand-title-box {
position: absolute;
bottom: 0;
left: 0;
width: 100%; padding: 10px 15px; 
background-color: rgba(0, 0, 0, 0.6); 
color: white;
font-weight: bold;
text-transform: uppercase;
text-align: center;
font-size: 130%;
z-index: 2;
pointer-events: none; transition: background 0.4s ease, padding 0.4s ease;
} .masonry-item:hover .brand-title-box {
background-color: #e60012; padding: 15px 15px; 
} @media (max-width: 1000px) { .masonry-layout { column-count: 3; } }
@media (max-width: 700px)  { .masonry-layout { column-count: 2; } }
@media (max-width: 450px)  { .masonry-layout { column-count: 1; } } .last-mark {
background-color: #000000;
width: calc(90% - 60px);
margin: 30px auto;
padding: 30px 30px;
font-size: 100%;
font-weight: 600;
color: #FFFFFF;
text-transform: uppercase;
}
.last-mark h2 {
font-weight: 600;
color: #FFFFFF;
text-transform: uppercase;
letter-spacing: 3px;
margin: 10px 0 50px 0;
}
.last-mark ul {
list-style-type: none;
margin: 0;
padding: 0; display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 25px;
}
.last-mark li {
text-align: center;
padding-bottom: 10px; border-bottom: 2px dotted #ffffff;
} .last-mark li:last-child {
border-bottom: none;
} @media (max-width: 767px) {
.last-mark ul { grid-template-columns: 1fr;
}
.last-mark li { border-bottom: 2px dotted #ffffff;
} }
 .error-wrapper {
text-align: center;
width: 95%;
max-width: 650px;
margin: 2em auto;
background-color: #000000 !important; min-height: 50vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center; padding: 40px 20px;
box-sizing: border-box;
color: #FFFFFF; border-radius: 8px; }
.car-movement {
width: 100%;
overflow: hidden;
height: 100px;
position: relative;
border-bottom: 2px solid #fff;
margin-bottom: 40px;
}
.car-svg {
position: absolute;
height: 180px;
bottom: -35px;
fill: #ffffff;
transform-origin: center; animation: run 16s linear infinite;
}
@keyframes run { 0% { left: -150px; transform: scaleX(-1); }
49% { transform: scaleX(-1); }
50% { left: 100%; transform: scaleX(-1); } 51% { left: 100%; transform: scaleX(1); }
99% { transform: scaleX(1); }
100% { left: -150px; transform: scaleX(1); }
}
.status-msg h1 {
color: #ff0000;
text-transform: uppercase;
font-weight: 600;
}
.status-msg p {
font-size: 100%;
color: #FFF;
margin: 35px 0;
font-weight: 500;
}
#countdown{
color: #ff0000;
width: 50px;
text-align: center;
}
.btn-return {
display: inline-block;
padding: 15px 35px;
border: 2px solid #ff0000;
color: #ff0000;
text-decoration: none;
font-weight: bold;
text-transform: uppercase;
transition: all 0.3s ease;
}
.btn-return:hover {
background: #ff0000;
color: #1a1a1a;
box-shadow: 0 0 20px rgba(255, 204, 0, 0.5);
} html {
scroll-behavior: smooth;    
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
font-family: 'Raleway', sans-serif;
background-color: #000000;
font-size: 1vw;
background-image: url(//www.trendoptik.hu/wp-content/themes/2026.trendoptik.hu/images/bg.svg);
background-size: 100vw auto;
}
a {
text-decoration: none;
}
.hero-container {
position: relative;
width: 100%;
aspect-ratio: 16 / 6;
overflow: hidden;
background-color: #000;
}
.hero-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center 50%;
filter: blur(20px);
will-change: filter;
transition: filter 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.hero-image.animal {
filter: blur(0px);
}
.hero-content {
position: absolute;
top: 50%;
left: 5%;
z-index: 2;
opacity: 0;
transform: translateY(-50%) translateX(-50px);
transition: all 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.hero-image.animal + .hero-content {
opacity: 1;
transform: translateY(-50%) translateX(0);
}
.hero-content h1 {
font-size: 200%;
font-weight: 500;
margin: 0 auto 0px auto;
color: #fff;
text-transform: uppercase;
letter-spacing: 3px;
display: block;
}
.hero-content h1::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 2px; background: rgba(255, 255, 255, 0.1); overflow: hidden;
}
.hero-content h1::after {
background: linear-gradient(90deg, 
transparent 0%, 
rgba(255, 255, 255, 0) 30%, 
rgba(255, 255, 255, 0.8) 50%, 
rgba(255, 255, 255, 0) 70%, 
transparent 100%
);
background-size: 200% 100%;
animation: knightRider 2.5s linear infinite;
}
.frosted { color: #FFFFFF; background-color: rgba(0,0,0,0.3); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 5px; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1); padding: 1em 2em; }
.content-section
{
position: relative;
padding: 15px 20px;
background-color: #fff;
color: #333;
width: calc(90% - 42px);
margin: 50px auto 50px auto;
box-shadow: 0 20px 50px rgba(0,0,0,0.5);
border-radius: 4px;
font-size: 140%;
font-weight: 500;
}
.content-section strong {
font-weight: 800;
}
.content-section ul {
list-style-type: none; padding-left: 0;
margin: 15px 0;
clear: both; }
.content-section ul li {
position: relative;
padding-left: 18px; margin-bottom: 5px;
color: #555;
} .content-section ul li::before {
content: ""; position: absolute;
left: 0;
top: 3px; width: 13px;
height: 13px;
background-color: #e60012; border-radius: 50%; display: inline-block;
transition: background-color 0.3s ease;
}
.content-section ul li:hover::before {
background-color: #000000; transition: background-color 0.6s ease;
}
.content-section h1 {
font-size: 2.5rem;
line-height: 1.2;
margin-bottom: 20px;
} .content-section p {
line-height: 1.6;
margin-bottom: 1.5em;
opacity: 0;
transform: translateY(20px); transition: opacity 0.8s ease, transform 0.8s ease;
}
.content-section p.animal {
opacity: 1;
transform: translateY(0); }
.contact-section a {
color: #F00;
text-decoration: none;
}
.more-link {
position: absolute;
bottom: 0px; right: 0px; background-color: #e60012; font-weight: 800;
text-decoration: none;
text-transform: uppercase;
font-size: 100%;
transition: color 0.3s ease;
color: #FFFFFF;
padding: 10px;
letter-spacing: 2px;
}
.more-link:hover {
background-color: #cc0000; } .post-edit-link {
position: absolute; bottom: 5px;
right: 5px;
z-index: 1;
background-color: #e60012;
color: #ffffff !important;
padding: 10px 18px 10px 40px;
font-size: 80%;
font-weight: 600;
text-decoration: none !important;
text-transform: uppercase;
letter-spacing: 2px;
border-radius: 4px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
transition: all 0.2s ease-in-out;
display: inline-flex;
align-items: center;
background-image: url(//www.trendoptik.hu/wp-content/themes/2026.trendoptik.hu/images/icons/pin.svg);
background-size: 30px auto;
background-position: 5px center;
background-repeat: no-repeat;
} .post-edit-link:hover {
background-color: #666666;
color: #ffffff !important;
transform: translateY(-3px);
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
}
.content-section.sorszam {
position: relative;
counter-increment: item-counter;
min-height: 300px;
}
.content-section img {
max-width: 100%;
height: auto;
} .content-section.sorszam::before {
content: counter(item-counter);
position: absolute;
bottom: -30px; left: -30px;  width: 60px;
height: 60px;
background-color: #e60012;
color: #ffffff;
display: flex;
justify-content: center;
align-items: center;
border-radius: 50%; 
font-size: 200%;
font-weight: 800;
box-shadow: 0 2px 5px rgba(0,0,0,0.3);
}
.post-search-image {
float: left;            
margin-right: 20px;     
margin-bottom: 10px; width: 25%; aspect-ratio: 1 / 1;    
overflow: hidden;       
border-radius: 8px;	
max-height: 380px;
}
.post-search-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s ease;
} .post-search-image:hover img {
transform: scale(1.2); }
.manifesto-block {
padding: 2em 0;
text-align: center;
margin: 0 auto;
background-color: #000;	
box-shadow: 0 20px 50px rgba(0,0,0,0.5);
} .manifesto-block h1, .manifesto-block h2,  .manifesto-block h3,
.manifesto-block p {
opacity: 0;
transform: translateY(30px);
transition: opacity 0.8s ease-out, transform 0.8s ease-out;
} .manifesto-block h1, .manifesto-block h2,  .manifesto-block h3, 
.manifesto-block.animal p {
opacity: 1;
transform: translateY(0);
}
.manifesto-block h1, .manifesto-block h2,  .manifesto-block h3{
font-size: 190%;
font-weight: 500;
margin: 0 auto 0px auto;
color: #fff;
text-transform: uppercase;
letter-spacing: 3px;
max-width: 90%;
}
.manifesto-block p {
font-size: 120%;
margin: 0 auto;
padding: 25px 20px 10px 20px;
color: #CCC;
position: relative;
max-width: 750px;
}
.manifesto-block p::before {
content: '';
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 300px;
height: 1px;
background-color: #333; opacity: 0;
transition: opacity 1s ease-in;
}
.manifesto-block.animal p::before {
opacity: 1;
} .main-footer {
background-color: #111;
color: #fff;
padding: 60px 0 0 0;
margin-top: 0px;
border-top: 1px solid #999999;
}
.footer-container {
max-width: 1400px;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
padding: 0 40px 40px 40px;
gap: 40px;
}
.footer-section {
flex: 1 1 250px;
} .footer-logo {
font-size: 24px;
margin-bottom: 20px;
}
.footer-logo span {
color: #e60012; }
.search-section p {
color: #ccc;
font-size: 14px;
line-height: 1.6;
margin-bottom: 20px;
}
.footer-search-box {
display: flex;
max-width: 350px;
}
.footer-search-box input {
flex: 1;
padding: 12px 15px;
border: none;
background: #222;
color: #fff;
border-radius: 4px 0 0 4px;
outline: none;
}
.footer-search-box button {
padding: 12px 20px;
border: none;
background-color: #e60012;
color: #fff;
cursor: pointer;
border-radius: 0 4px 4px 0;
transition: background 0.3s;
font-weight: 600;
text-transform: uppercase;
}
.footer-search-box button:hover {
background-color: #c40a15;
} .footer-section h4 {
font-size: 18px;
margin-bottom: 20px;
position: relative;
padding-bottom: 10px;
}
.footer-section h4::after {
content: '';
position: absolute;
left: 0;
bottom: 0;
width: 30px;
height: 2px;
background-color: #e60012;
}
.footer-section ul {
list-style: none;
padding: 0;
}
.footer-section ul li {
margin-bottom: 12px;
}
.footer-section ul li a {
color: #ccc;
text-decoration: none;
transition: color 0.3s;
text-transform: uppercase;
}
.footer-section ul li a:hover {
color: #e60012;
padding-left: 5px;
} .content-section details {
position: absolute;
bottom: 5px;
left: 30px;
z-index: 999;
} .content-section details summary {
cursor: pointer;
color: #e60012;
font-size: 24px;
list-style: disclosure-closed;
width: 25px;
height: 25px;
} .content-section details summary strong {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
border: 0;
} .content-section details[open] p {
position: absolute;
bottom: 20px; left: 20px;
width: 500px; margin: 0;
padding: 15px;
background-color: #ffffff;
border: 2px solid #e60012;
border-radius: 6px;
box-shadow: 0 4px 12px rgba(0,0,0,0.2);
font-size: 90%;
line-height: 1.5;
color: #333333;
} .footer-bottom {
background-color: #000;
text-align: center;
padding: 20px 0;
font-size: 12px;
color: #949494;
border-top: 1px solid #222;
}
.footer-bottom a {
color: #FFFFFF;
}
.scroll-to-top {
display: none; position: fixed;
bottom: 10px;
right: 50%;
transform: translateX(50%);
cursor: pointer;
width: 50px;
height: 50px; background-color: #FF0000;
border-radius: 50%;
box-shadow: inset 0px 5px 25px 5px rgba(0,0,0,.1);
filter: drop-shadow(0 0 10px rgba(0,0,0,.3));
color: #FFFFFF; display: flex; justify-content: center; align-items: center; font-size: 24px; line-height: 0; text-decoration: none; }
.svgbutton {
margin: 5px 10px;
font-size: 130%;
background-color: #666666;
padding: 10px 25px 10px 0px;
transform: translateZ(0);
backface-visibility: hidden;
transition-property: color;
transition-duration: 0.8s;
text-align: center;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 5px;
font-weight: 400;
color: #FFFFFF;
position: relative; 
cursor: pointer;
text-decoration: none;	
}
.svgbutton  a, .svgbutton a:hover {
color: #FFFFFF;
text-decoration: none;
}
.svgbutton:before{
content: "";
position: absolute;
z-index: -1;
top: 0;
left: 0;
right: 0;
bottom: 0;
-webkit-transform: scaleX(0);
transform: scaleX(0);
transform-origin: 0 50%;
transition-property: transform;
transition-duration: 0.8s;
transition-timing-function: ease-out;
border-radius: 5px;
}
.svgbutton:hover, 
.svgbutton:focus, 
.svgbutton:active {
color: white;
}
.svgbutton:hover:before, 
.svgbutton:focus:before, 
.svgbutton:active:before {
-webkit-transform: scaleX(1);
transform: scaleX(1);
-webkit-transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
}
.svgbutton.tocall:before{
background-color: #CC3300;
}
.svgbutton.mailto:before{
background-color: #669966;
}
.svgbutton.vissza:before{
background-color: #000000;
}
.svgbutton img{
width: 30px;
height: auto;
margin: 0 10px;
}
.svgbutton:hover img{
animation: ring_5825 2.4s ease infinite; transform-origin: 50% 0%; } @keyframes ring_5825 { 0% { transform: rotate(-15deg) } 1.66667% { transform: rotate(15deg) } 3.33333% { transform: rotate(-18deg) } 5% { transform: rotate(18deg) } 6.66667% { transform: rotate(-22deg) } 8.33333% { transform: rotate(22deg) } 10% { transform: rotate(-18deg) } 11.66667% { transform: rotate(18deg) } 13.33333% { transform: rotate(-12deg) } 15% { transform: rotate(12deg) } 16.66667% { transform: rotate(0deg) } 100% { transform: rotate(0deg) } }
} 
@keyframes passing-reverse_5948 { 0% { transform:translateX(50%); opacity:0 } 50% { transform:translateX(0%); opacity:1 } 100% { transform:translateX(-50%); opacity:0 } }
.show {
display: flex; opacity: 1;
transition: opacity .6s ease;
}
.hide {
display: flex; opacity: 0;
pointer-events: none;
transition: opacity .6s ease;
}
.gallery {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
justify-content: center;
}
.gallery dl {
flex-basis: calc(25.00% - 2%);
margin: 1%;
box-shadow: 0 0 5px rgba(0, 0, 0, .4);
overflow: hidden; 
}
.gallery dl h3 {
font-size: 100%;
background-color: #7EB736;
color: #FFFFFF;
display: block;
text-align: center;
padding: 5px;
font-weight: 400;
}
.gallery-icon a {
display: block;
position: relative;
overflow: hidden;
border-radius: 3px;
border-bottom-color: rgba(255, 255, 255, 0);
}
.gallery-icon img {
display: block;
width: 90%;
height: auto;
transition: transform 0.3s ease-in-out;
margin: .5em 0 0 5%;
padding: 0 0 .7em 0;
}
.gallery-icon:hover img{
transform: scale(1.1);
}
.gallery-caption {
position: absolute;
top: 50%;
left: 0;
right: 0;
text-align: center;
transform: translateY(-50%);
background-color: #027CCB;
color: #fff;
padding: 3px  5px;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-transform: uppercase;
font-size: 120%;
transition: background-color .4s ease-in-out;
}
.gallery-item:hover .gallery-caption {
background-color: #FF3F06;
}  .alignleft, .alignright, .aligncenter {
display: block !important;
padding: 6px !important;
background: #fff !important;
border: 1px solid rgba(0,0,0,0.35) !important;
box-shadow: 0 4px 12px rgba(0,0,0,0.5) !important;
width: 30% !important;
margin: 10px 30px 20px 0 !important;
box-sizing: border-box !important;
height: auto;
} .alignleft { float: left !important; }
.alignright { float: right !important; margin: 10px 0 20px 30px !important; }
.aligncenter { float: none !important; margin: 20px auto !important; } .alignleft img, .alignright img, .aligncenter img {
display: block !important;
width: 100% !important;
height: auto !important;
padding: 0 !important;
border: none !important;
box-shadow: none !important;
} a:hover img.alignleft, 
a:hover img.alignright, 
a:hover img.aligncenter {
animation: shine-cycle .6s ease-in-out forwards;
} @keyframes shine-cycle {
0% { filter: grayscale(0%) saturate(100%) brightness(1); }
50% { filter: grayscale(100%) saturate(0%) brightness(1.3);box-shadow: 0 10px 4px rgba(0,0,0,0.75); }
100% { filter: grayscale(0%) saturate(100%) brightness(1); }
} @media (max-width: 600px) {
.alignleft, .alignright, .aligncenter {
float: none !important;
margin: 20px auto !important;
width: 90% !important;
}
}
.twd-youtube-container {
position: relative;
padding-bottom: 56.25%; padding-top: 25px;
height: 0;
}
.twd-youtube-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;		
box-shadow: 0 10px 5px -5px #888;
}
.mobil{
display: none;
}
.nomobil{
display: inline;
}
@media (max-width: 768px) {
.mobil{
display: inline;
}
.nomobil{
display: none;
}
body {
font-size: 12px;
}
.top-bar {
display: none;
}
.content-section {
padding: 10px 10px;
width: calc(96% - 22px);
margin: 1em auto;
}
.footer-container {
flex-direction: column;
text-align: center;
}
.footer-section h4::after {
left: 50%;
transform: translateX(-50%);
}
.footer-search-box {
margin: 0 auto;
}
.footer-section ul li a:hover {
padding-left: 0;
}
}