@import url('https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,100..900;1,100..900&display=swap');
:root{--system-font: "Jost", sans-serif;--primary:#EF3A41;--secondary:#000000;--shadow:rgba(0,0,0,0.2) 0 0 10px;--black:#000000;--white:#fff;--big-shadow:#C9D4D9 0 0 90px;--grey:#A1A1A1;--silver:#F5F5F5;--silver-lighter:#FAFAFA}

html {overflow-x:hidden;}
iframe {vertical-align: middle;}
body,html{font-family:var(--system-font);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;min-height: 100%;}
.small-shadow {box-shadow: 1px 1px 3px 1px rgba(0, 0, 0, 0.1);}
.primary-text {color: var(--primary);}
.white-text, .light-text {color: var(--white);}
.primary {background-color: var(--primary);}
.accent {background-color: var(--accent);}
.white {background-color: var(--white);}
.black {background-color: var(--black);}
.black-text {color: var(--black);}
.silver {background-color: var(--silver);}
.mh100p {min-height: 100%;}
.mask {background-color: var(--black); opacity: 0.6;position: absolute;top:0;left:0;width: 100%; height: 100%;}
body{font-family:var(--system-font);font-size:16px;font-weight:500;-webkit-animation:fadeinout .3s ease-in 1 forwards;animation:fadeinout .3s ease-in 1 forwards;}
@-webkit-keyframes fadeinout{0%{opacity:0}
100%{opacity:1}
;}


.responsive-row {display: flex;}
/* 1. Stop Slick from clipping the dropdowns */
.no-overflow-slider .slick-list,
.no-overflow-slider .slick-track {
    overflow: visible !important;
}

/* 2. Fix the z-index so the hovered slide overlaps the others */
.no-overflow-slider .slick-slide {
    position: relative;
    z-index: 1;
    transition: z-index 0.3s ease;
}

.no-overflow-slider.slick-slide:hover,
.no-overflow-slider .slick-slide.slick-current:hover {
    z-index: 50 !important;
}

.flex.flex-col.lg\:flex-row > p {
  flex: 1; /* This forces them to be equal width */
  margin: 0; /* Optional: removes default paragraph spacing */
}

.bg-\[--black\] {
  color: var(--white);
}


.border.border-solid.border-black.bg-white.text-black.px-3.py-1.text-sm.font-medium.transition-colors.duration-200.hover\:bg-black.hover\:text-white {
  font-size: 15px;
}

.row:has(table) {
    background: var(--black);
    padding-block: 20px;
    color: var(--white);
}

/* Table Container */
table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

/* Table Headers and Cells */
table th,
table td {
  border: 1px solid #9ca3af; /* Light gray border */
  padding: 8px 16px;
  text-align: left;
  vertical-align: middle;
}

/* Specific Header Styling */
table th {
  font-weight: bold;
}

/* Optional: Sub-heading rows (like "Точност:" or "Корпус") */
table tr.sub-header td {
  font-weight: bold;
  /* Uncomment the line below if you want a slight background contrast for sub-headers */
  /* background-color: #1f2937; */ 
}

/* Optional: Indent regular rows under sub-headers */
table td.indented {
  padding-left: 24px;
}

/* Alignment utilities for specific cells */
table td.center {
  text-align: center;
}

.post-body ul {
  list-style: none; /* Remove default bullets */
  padding-left: 20px; /* Give the list some breathing room */
}

.post-body li {
  position: relative;
  margin-bottom: 10px; /* Space between items */
}

.post-body li::before {
  content: "";
  position: absolute;
  left: -20px; /* Moves the dot to the left of the text */
  top: 50%;
  transform: translateY(-50%);
  
  /* The Dot Styling */
  width: 8px;
  height: 8px;
  background-color: var(--primary); /* Matching the red from your image */
  border-radius: 50%; /* Makes it a circle */
  
  /* Optional: Adds the soft blur effect seen in the image */
}

@keyframes fadeinout{0%{opacity:0}
100%{opacity:1}
;}
.flex-col{float:none !important;flex-direction:row;}
.flex-row{display:flex;}
.flex1 {flex: 1;}
.v-center{top:50%;position:relative;transform:translateY(-50%);}
.vcenter-items {align-items: center;}
.lngbar{position:relative;right:30px;z-index:30;-o-transition:all .2s linear;-moz-transition:all .2s linear;-webkit-transition:all .2s linear;transition:all .2s linear;}
.lngbar .lng{width:30px;height:30px;text-align:center;line-height:30px;font-weight:600;background-color:var(--accent); font-size: 0.9em;}
.lngbar ul{list-style:none;position:absolute;top:30px;left:0;background-color:var(--silver);width:30px;text-align:center;opacity:0;height:0px;overflow:hidden;-o-transition:all .2s ease;-moz-transition:all .2s ease;-webkit-transition:all .2s ease;}
.lngbar ul.open{opacity:100;-o-transition:all .2s ease;-moz-transition:all .2s ease;-webkit-transition:all .2s ease;height:auto;}
.lngbar ul li{color:#000;cursor:pointer;height:30px;line-height:30px;-o-transition:all .2s ease;-moz-transition:all .2s ease;-webkit-transition:all .2s ease;}
.lngbar ul li:hover{color:var(--black);background-color:var(--primary);-o-transition:all .2s ease;-moz-transition:all .2s ease;-webkit-transition:all .2s ease;}
.lngbar ul li:hover a{color:var(--white);}
.lngbar ul li a{text-decoration:none;color:#000;font-size:0.8em;font-weight:400;}
.lngbar .select{border-color:var(--primary) transparent;border-style:solid solid none;border-width:5px 5px medium;height:5px;right:-12px;position:absolute;top:12px;width:0;text-decoration:none;color:var(--black);}
.editable {display: contents;}
.cmspage .wraper {margin: auto;}
.cmspage p {margin-bottom: 10px;}
.cmspage ul, .cmspage ol {margin-bottom: 10px; padding-left: 20px; line-height: 1.5;}
.cmspage h2 {margin-bottom: 30px;}
.cmspage h3 {margin-bottom: 15px; font-size: 1.3em; font-weight: 700;}
.cmspage table {border: solid 1px var(--silver); border-collapse: collapse; width: 100%; margin-bottom: 20px;}
.cmspage table  td {padding: 10px; border: solid 1px var(--silver);}
.four-slider a:hover .primary-bottom-line:after{content: '';position: absolute;display: block;border-bottom:  4px solid var(--primary);margin: auto; width: 100px;margin-top: 15px}
.white-bottom-line:after{content: '';position: absolute;display: block;border-bottom:  4px solid var(--white);margin: auto; width: 100px;margin-top: 15px}


/* DELETE OR COMMENT OUT THIS ENTIRE BLOCK */

header [id^="header-submenu-"] ul {
  display: flex; 
  flex-wrap: wrap;
  list-style: none; 
  padding: 0;
  margin: 0;
  gap: 10px;
  padding-block: 20px;
}

header [id^="header-submenu-"] ul li {
  flex: 0 0 calc(33.33% - 10px); 
  box-sizing: border-box;
  text-align: start;
} 



/* Individual product card */
.product-cards .col-25 {
    box-sizing: border-box;
    position: relative;
    display: flex;
    flex-direction: column;
    padding-bottom: 20px; /* Space for the underline */
}

/* Hide extra elements not shown in the design */
.product-cards .col-25 .date,
.product-cards .col-25 .read-more,
.product-cards .col-25 .apply {
    display: none;
}

/* --- IMAGE CONTAINER STYLES --- */
.product-cards .col-25 .img {
    background-color: #f7f7f7; /* Light gray background */
    
    margin-bottom: 20px;
    position: relative;
    overflow: hidden; /* Keeps the red triangle contained */
    display: flex;
    justify-content: center;
    align-items: center;
}

.product-cards .col-25 .img img {
    max-width: 100%;
    height: auto;
    mix-blend-mode: multiply; /* Helps the image blend with the gray background */
}

/* The Red Triangle (Hidden by default) */
.product-cards .col-25 .img::after {
    content: '';
    position: absolute;
    bottom: -50px;
    right: -50px;
    width: 100px;
    height: 100px;
    background-color: var(--primary); /* The specific red from your image */
    transform: rotate(45deg);
    opacity: 0;
    transition: all 0.3s ease-in-out;
}

/* --- TEXT STYLES --- */
.product-cards .col-25 .title {
    width: 80%;
    font-size: 20px;
    font-weight: 800;
    text-transform: uppercase;
    margin-bottom: 12px;
    line-height: 1.2;
}

.product-cards .col-25 .title a {
    color: #000;
    text-decoration: none;
}

.product-cards .col-25 .descr {
    color: #999;
    font-size: 14px;
    line-height: 1.6;
}

/* --- HOVER EFFECTS --- */

/* 1. Show the red triangle on hover */
.product-cards .col-25:hover .img::after {
    opacity: 1;
    bottom: -60px; /* Adjust to make the triangle the right size */
    right: -60px;
}

/* 2. Create the red animated underline (Hidden by default) */
.product-cards .col-25::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0; /* Starts at 0 width */
    height: 3px;
    background-color: #e52b34; /* The specific red from your image */
    transition: width 0.3s ease-in-out;
}

/* Expand the red underline on hover */
.product-cards .col-25:hover::after {
    width: 70%; /* Expands to match the length in your screenshot */
}

.right-arrows .slick-track .slick-slide, .testimonial-slider .slick-track .slick-slide {margin-inline: 5px;}
.right-arrows .custom-prev::after {content: url('/public/images/gallery-arrow-down.svg'); display: block; width: 41px; height: 41px;cursor:pointer;z-index: 21; position: relative;}
.right-arrows .custom-next::after{content: url('/public/images/gallery-arrow-up.svg');display: block; width: 41px; height: 41px;cursor:pointer;z-index: 21; position: relative;}
.right-arrows .custom-prev:hover::after {content: url('/public/images/gallery-arrow-down-hovered.svg');}
.right-arrows .custom-next:hover::after{content: url('/public/images/gallery-arrow-up-hovered.svg');}
.right-arrows .custom-next{position: absolute;left: -15px;top: calc(50% - 45px)}
.right-arrows .custom-prev{position: absolute;left: -15px;bottom: calc(50% - 45px)}
.primary-button {
  /* Shape & Layout */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 5px 20px;
  border-radius: 999px; /* Ensures a perfect "pill" shape regardless of size */
  
  /* Border & Background */
  background-color: transparent;
  border: 1.5px solid var(--primary); /* Matches that soft coral/red border */
  
  /* Typography */
  color: #2d2d2d;
  font-family: sans-serif;
  font-size: 14px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em; /* Matches the spacing in the image */
  
  /* Interaction */
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  text-decoration: none;
  outline: none;
}

/* Hover State */
.primary-button:hover {
  background-color: var(--primary); 
  color: #ffffff;
}

/* Active State (When clicked) */
.primary-button:active {
  transform: scale(0.98);
}


header .header-nav ul {display: flex;align-items: center;justify-content: space-between ;font-size: 15px;width: 100%;gap:20px; font-family: "Sofia-sans", sans-serif;}
header .header-nav >nav > ul > li:hover{font-weight: bold;position: relative}
header .header-nav > nav > ul > li > a:hover:after{  content: ''; position: absolute;left: 50%;transform: translateX(-50%);display: block;width: 40px;border-bottom: 3px solid var(--accent);margin-top: 5px;}
header .header-nav ul li ul {display: none;font-size: 14px}
header .header-nav ul li:hover div {display: flex;padding-right: 100%;padding-top: 20px; width: fit-content;}
header .header-nav ul li:hover div ul {position: absolute;display: flex;padding:20px;width: fit-content; flex-direction: column; align-items: center;width: max-content;gap: 10px;font-weight: 600;border-radius: 10px;background-color: var(--white)}
header .header-nav ul ul li:hover {color: var(--primary)}
[id^="header-submenu-"] ul {display: flex; justify-content: space-between;font-size: 16px;padding-block: 30px;}
[id^="header-submenu-"] a:hover {font-weight: bold;}


/* Add space between slides */
.four-slider .slick-slide {
    margin: 0 15px; /* Adjust this value for the gap size */
}

/* Optional: Fix the container alignment if the outer edges look "pushed in" */
.four-slider {
    margin: 0 -15px;
}


/* Container Spacing */
.industry-container .slick-slide {
  margin-inline: 15px;
}

/* Image Wrapper */
.industry-container article .img {
  position: relative;
  overflow: hidden;
  line-height: 0;
  margin-bottom: 20px; /* Space between image and text */
}

/* Image Zoom Effect */
.industry-container article .img img {
  width: 100%;
  height: 300px; /* Fixed height for a uniform grid */
  object-fit: cover;
  display: block;
  transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.industry-container article:hover .img img {
  transform: scale(1.1);
}

/* The Red Triangle Accent (Bottom Right) */
.industry-container article .img::after {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 0 45px 45px;
  border-color: transparent transparent #ff3b30 transparent;
  transform: translateY(100%); /* Hidden by default */
  transition: transform 0.3s ease;
  z-index: 2;
}

.industry-container article:hover .img::after {
  transform: translateY(0); /* Slides up on hover */
}

/* Typography Styling */
.industry-container article .title {
  margin-bottom: 10px;
}

.industry-container article .title a {
  color: #000; /* Black for industrial look */
  text-decoration: none;
  font-size: 18px;
  font-weight: 900;
  text-transform: uppercase;
  line-height: 1.2;
  display: block;
  letter-spacing: -0.5px;
}

/* Description Text */
.industry-container article .descr {
  display: block; /* Shown for this version */
  color: #444;
  font-size: 16px;

  /* Limit to 4 lines then ellipsis */
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Hidden Elements */
.industry-container article .date,
.industry-container article .read-more,
.industry-container article .apply {
  display: none;
}

.news-container  .slick-slide  {
  margin-inline:10px;
}
/* Image Container & The Red Triangle */
.news-container article .img {
  position: relative;
  overflow: hidden; /* Essential for the zoom effect */
  line-height: 0; /* Removes white space under image */

}
.news-container article:hover img {
transform: scale(1.2); /* Zooms in by 10% */
}
.news-container article .img img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 1s ease; /* Smoothness of the zoom */
}

/* Creating the red corner accent from the image */
.news-container article:hover .img::after {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 0 40px 40px;
  border-color: transparent transparent #ff3b30 transparent;
}

/* Title Styling */
.news-container article .title {
  padding: 20px 20px 10px 20px;
}

.news-container article .title a {
  color: #fff;
  text-decoration: none;
  font-size: 20px;
  font-weight: 800;
  text-transform: uppercase;
  line-height: 1.1;
  display: block;
}

/* Date Styling */
.news-container article .date {
  padding: 0 20px;
  color: #ccc;
  font-size: 18px;
  font-weight: 400;
}

/* Hiding the extra links to match the clean image look */
.news-container article .descr, .read-more, .apply {
  display: none;
}

.wraper {min-width: 0 !important;}

footer .about-us-menu ul {display: flex; gap:10px; flex-direction: column;}
footer .products-menu ul {display: flex; gap:30px; flex-direction: column;}

mobile-menu {display: none;}

@media (max-width:1024px){



     header nav, header .nav-tools .social-media-links {
        display: none;
    }

    .menu-call {
        width: 30px;
        position: relative;
        z-index: 101;
        cursor: pointer;
        padding-top: 8px;
        padding-bottom: 8px;
    }

    .menu-call span {
        width: 100%;
        height: 3px;
        background-color: var(--primary);
        top: 0;
        right: 0;
        display: block;
        -moz-transition: all .2s linear;
        -webkit-transition: all .2s linear
    }

    .menu-call span:before {
        content: '';
        height: 3px;
        width: 100%;
        margin-bottom: 5px;
        display: block;
        background-color: var(--black);
        position: absolute;
        top: 0;
        -moz-transition: all .2s linear;
        -webkit-transition: all .2s linear
    }

    .menu-call span:after {
        content: '';
        height: 3px;
        width: 100%;
        margin-top: 5px;
        display: block;
        background-color: var(--black);
        position: absolute;
        bottom: 0;
        -moz-transition: all .2s linear;
        -webkit-transition: all .2s linear
    }

    .menu-call.open span {
        -o-transition: all .2s linear;
        -moz-transition: all .2s linear;
        -webkit-transition: all .2s linear;
        width: 0;
    }

    .menu-call.open span:before, .menu-call.open span:after {
        content: '';
        height: 2px;
        width: 100%;
        display: block;
        position: absolute;
        top: 8px;
        -webkit-transform: rotate(45deg);
        -moz-transition: all .2s linear;
        -webkit-transition: all .2s linear
    }

    .menu-call.open span:before {
        transform: rotate(45deg);
    }

    .menu-call.open span:after {
        transform: rotate(-45deg);
        margin-top: 0px;
    }

    .menu-call span:before, .menu-call span:after {
        background-color: var(--primary);
    }

    .menu-call.open span:before, .menu-call.open span:after {
        background-color: var(--primary);
    }

    
  @media (max-width: 1024px) {

        .wraper {min-width: auto;}

    .mobile-menu {
    display: flex;
    position: fixed;
    width: 100%;
    height: 100%;
    
    background-color: var(--secondary);
    backdrop-filter: blur(100px);
    
    z-index: 99;
    /* Fixed: Ensure perspective and axis match the open state */
    transform: perspective(50em) rotateX(-90deg); 
    transform-origin: 50% 0;
    transition: all .8s ease;
}

.mobile-menu .logo {
    max-width: 70%;
    float: left;
    margin-top: -8px;
}

.mobile-menu * {
    opacity: 0;
    transition: all .8s ease;
}

.mobile-menu.open {
    left: 0;
    right: 0;
    /* Fixed: Changed rotatey to rotateX so it hinges down like a garage door */
    transform: perspective(50em) rotateX(0deg); 
    height: fit-content;
    min-height: -webkit-fill-available;
    transition: all .8s ease;
}

.mobile-menu.open * {
    /* Fixed: Opacity maxes out at 1, not 100 */
    opacity: 1; 
    transition: all .8s ease;
}

.mobile-menu ul {
    list-style: none;
    display: flex;
    flex-direction: column;
}

.mobile-menu ul a {
    z-index: 99;
    font-size: 1em;
    line-height: 30px;
    position: relative;
    display: block;
    /* Note: If you just want white text, 'color: var(--white);' is safer on older phones */
    background: var(--white);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 500;
    text-decoration: none;
    text-align: start;
}

.mobile-menu ul a:after {
    content: '';
    height: 1px;
    width: 0;
    background-color: var(--white);
    bottom: 0;
    left: 0;
    position: absolute;
    transition: all .2s linear;
}


.mobile-menu ul ul li a::after {
    position: absolute;
    height: 2px;
    width: 0%;
    margin: auto;
    content: '';
    display: block;
    background-color: var(--darkYellow);
    left: 1%;
    right: 1%;
    transition: all .2s linear;
}

.mobile-menu ul ul li a:hover::after, 
.mobile-menu ul ul li a:active::after {
    width: 50%;
    transition: all .2s linear;
}

.mobile-menu ul ul a:hover {
    font-weight: bold;
}

.mobile-menu > nav > ul > li > a {
    font-weight: bold;
    color: var(--primary);
    font-size: 18px;
    background-color: var(--primary-lighter);
}
footer .menu-list ul {flex-wrap: wrap; justify-content: center;}
}


.responsive-row {
  display: flex;
  flex-wrap: wrap; 
  align-items: stretch; 
  gap: 30px; 
  width: 100%;
  box-sizing: border-box;
}

.responsive-row > [class*="col-"] {
  display: flex;
  flex-direction: column;   
  box-sizing: border-box;
  /* CHANGED: Set flex-grow to 0 so orphan items don't stretch */
  flex: 0 1 280px; 
  margin-left: 0;
}
}

@media (min-width: 1024px) {
  /* CHANGED: Increased specificity so these rules actually apply */
  .responsive-row > .col-15 { flex: 0 0 calc(15% - 30px); max-width: calc(15% - 30px); }
  .responsive-row > .col-20 { flex: 0 0 calc(20% - 30px); max-width: calc(20% - 30px); }
  .responsive-row > .col-25 { flex: 0 0 calc(25% - 30px); max-width: calc(25% - 30px); }
  .responsive-row > .col-33 { flex: 0 0 calc(33.33% - 30px); max-width: calc(33.33% - 30px); }
  .responsive-row > .col-50 { flex: 0 0 calc(50% - 30px); max-width: calc(50% - 30px); }
}

@media (max-width: 1000px) {
  .responsive-row > [class*="col-"] {
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
  }
}