@charset "UTF-8";
html, body {
  font-family: "Montserrat", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 10px;
  margin: 0;
}

@media (max-width: 991px) {
  main {
    width: 100vw;
    overflow-x: hidden;
  }
}

h1, h2, h3, h4, h5, h6 {
  font-family: "Montserrat", sans-serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1 {
  font-size: 3.7rem;
  font-weight: 600;
}

h2 {
  font-size: 3.2rem;
  font-weight: 700;
}
@media (max-width: 991px) {
  h2 {
    font-size: 2.7rem;
  }
}

h5 {
  font-size: 1.2rem;
  text-transform: none;
  margin-bottom: 1rem;
}

ul {
  margin: 0;
  padding: 0;
}

p {
  /*font-family: "Montserrat", sans-serif; font-weight: 300; font-style: normal;*/
  font-family: "Montserrat", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 1.6rem;
  /*font-family: "Montserrat", sans-serif; font-weight: 600; font-style: normal;
  font-family: "Montserrat", sans-serif; font-weight: bold; font-style: normal;*/
}

img {
  max-width: 100%;
}

.tx--orange {
  color: #FF8F27;
}
.tx--red {
  color: #D84727;
}

a, img {
  transition: all ease 0.3s;
}

section {
  transition: all ease 1s;
  position: relative;
  top: -1.5rem;
}

.noshow {
  opacity: 0;
  top: -1.5rem;
}

.show {
  opacity: 1;
  top: 0;
}

::selection {
  background-color: #FF8F27;
  color: #FFF;
}

.btn {
  padding: 1.3rem 3rem;
  border-radius: 0;
  transition: all ease 0.3s;
  text-transform: none;
  font-weight: 600;
  font-size: 1.4rem;
  letter-spacing: 1px;
}
.btn:hover {
  background-color: #D84727;
  color: #FFF;
}
.btn--red {
  background-color: #FF8F27;
  color: #FFF;
}
.btn--text {
  padding: unset;
  color: red;
  transition: all ease 1s;
  font-weight: 500;
}
.btn--text:hover {
  background-color: unset;
  color: #000;
}

/* The flip card container - set the width and height to whatever you want. We have added the border property to demonstrate that the flip itself goes out of the box on hover (remove perspective if you don't want the 3D effect */
.flipper {
  background-color: transparent;
  width: 80%;
  height: 18rem;
  transform: translate(12%, -8rem);
  perspective: 1000px; /* Remove this if you don't want the 3D effect */
}

/* This container is needed to position the front and back side */
.flipper--inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}
.flipper--inner img {
  width: 6rem;
  margin-bottom: 1.5rem;
}
.flipper--inner h4 {
  font-weight: 600;
  font-size: 1.5rem;
  text-transform: none;
}

/* Do an horizontal flip when you move the mouse over the flip box container */
.srv--block:hover .flipper .flipper--inner {
  transform: rotateY(180deg);
}

/* Position the front and back side */
.flipper--front, .flipper--back {
  position: absolute;
  padding: 2rem;
  text-align: center;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden; /* Safari */
  backface-visibility: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

/* Style the front side (fallback if image is missing) */
.flipper--front {
  background-color: #FFF;
  color: black;
}

/* Style the back side */
.flipper--back {
  background-color: #FFF;
  color: #000;
  transform: rotateY(180deg);
}

.form {
  display: grid;
  gap: 3rem;
}
.form--row input, .form--row textarea, .form--row select {
  width: 100%;
  font-size: 1.6rem;
  padding: 1.2rem 2rem;
  color: #21232F;
  background-color: #F8F8F8;
  border: none;
  border-radius: 0;
  transition: all ease 0.3s;
}
.form--row input::placeholder, .form--row textarea::placeholder, .form--row select::placeholder {
  color: #21232F;
}
.form--row input:hover, .form--row input:focus, .form--row textarea:hover, .form--row textarea:focus, .form--row select:hover, .form--row select:focus {
  outline: 1px solid #D84727;
}
.form--row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
}
@media (max-width: 991px) {
  .form--row-2 {
    grid-template-columns: 1fr;
  }
}
.form label {
  font-size: 1.6rem;
  font-weight: 400;
}

.banner {
  background-image: url(../img/banners/about-catrobotics.jpg);
  background-size: cover;
  background-position: top;
  background-attachment: fixed;
  color: #FFF;
  padding: 12rem 7vw;
}
.banner--plain {
  background-image: unset;
  padding: 3rem 7vw 0 7vw;
  color: #000;
  margin-bottom: -3rem;
  max-width: 70vw;
}
@media (max-width: 991px) {
  .banner--plain {
    max-width: unset;
  }
}
.banner--plain img {
  filter: invert(0) !important;
}
.banner--plain .breadcrumb {
  text-shadow: unset !important;
}
.banner--plain .breadcrumb a {
  color: #000 !important;
}
.banner--plain .breadcrumb-item + .breadcrumb-item::before {
  color: #000 !important;
}
.banner img {
  width: 1.9rem;
  position: relative;
  top: -3px;
  margin-right: 0.5rem;
  filter: invert(1);
}
.banner--holder {
  z-index: 2;
}
.banner--holder.noshow {
  top: 0 !important;
}
.banner h2 {
  letter-spacing: 1px;
  margin-bottom: 1rem;
  font-size: 4rem;
  text-transform: none;
}
.banner .breadcrumb {
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: 1px;
  text-shadow: 1px 1px 0 black;
}
.banner .breadcrumb a {
  color: #FFF;
  text-decoration: none;
}
.banner .breadcrumb .active {
  color: #FF8F27;
}
.banner .breadcrumb-item + .breadcrumb-item::before {
  content: "›";
  font-size: 2.5rem;
  position: relative;
  top: -1rem;
  color: #FFF;
  padding: 0 1rem 0 0.8rem;
}

.subpage h2, .subpage h3 {
  margin-bottom: 2rem;
}
.subpage p + h2, .subpage p + h3 {
  margin-top: 3rem;
}
.subpage h3 {
  font-size: 2rem;
  font-weight: 600;
  margin-bottom: 2rem;
}
.subpage h4 {
  font-weight: 600;
  margin-bottom: 2rem;
}

.header--links {
  background-color: #21232F;
  padding: 0 7vw;
  color: #FFF;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
@media (max-width: 991px) {
  .header--links {
    display: none;
  }
}
.header--links img {
  width: 2rem;
  filter: invert(1);
}
.header--links li {
  display: inline;
}
.header--links li a {
  display: inline-flex;
  align-items: center;
  color: #FFF;
  font-size: 1.5rem;
  text-decoration: none;
}
.header--links .socials li a {
  padding: 1.5rem;
  border-left: 1px solid rgba(255, 255, 255, 0.1);
}
.header--links .socials li:last-child a {
  border-right: 1px solid rgba(255, 255, 255, 0.1);
}
.header--links .tels a {
  padding: 0.5rem 2rem;
}
.header--links .tels a img {
  margin-right: 1rem;
}

.navbar {
  padding: 1.5rem 7vw;
  background-color: #FFF;
  font-size: 1.6rem;
  font-family: "Montserrat", sans-serif;
  font-weight: 400;
  font-style: normal;
  transition: all ease 0.3s;
}
@media (max-width: 991px) {
  .navbar {
    padding: 0 7vw;
  }
}
.navbar .navbar-nav {
  align-items: center;
}
@media (max-width: 991px) {
  .navbar .navbar-nav {
    align-items: unset;
    padding-bottom: 4rem;
  }
}
.navbar .navbar-nav .nav-link {
  font-family: "Montserrat", sans-serif;
  font-weight: 400;
  font-style: normal;
  color: #000;
  font-size: 1.3rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  padding: 2rem 1.5rem;
  text-transform: none;
}
.navbar .navbar-nav .nav-link:hover {
  color: #FF8F27;
}
@media (max-width: 991px) {
  .navbar .navbar-nav .nav-link {
    display: block;
    text-align: left;
    padding: 1.2rem 2rem;
  }
  .navbar .navbar-nav .nav-link:hover {
    background-color: #FF8F27;
    color: #FFF;
  }
}

.navbar-nav .dropdown-menu {
  padding: 0;
  border: unset;
  box-shadow: 1px 1px 0.5rem rgba(0, 0, 0, 0.4);
  background-color: #FF8F27;
  padding: 2rem 0;
  border-radius: 0;
  transition: all 0.3s ease-in-out;
  overflow: hidden;
  display: block;
  visibility: hidden;
  opacity: 0;
  transform: scale(1.2);
  transition: all 0.3s ease-in-out;
}
@media (max-width: 991px) {
  .navbar-nav .dropdown-menu {
    box-shadow: unset;
    border-bottom: 1px solid rgba(0, 0, 0, 0.2);
    padding: 1rem 0;
    display: none;
  }
}

.dropdown-menu.show, .dropdown:hover .dropdown-menu {
  visibility: visible;
  opacity: 1;
  transform: scale(1);
}
@media (max-width: 991px) {
  .dropdown-menu.show, .dropdown:hover .dropdown-menu {
    display: block;
  }
}

.dropdown-item {
  padding: 1rem 7rem 1rem 2rem;
  font-size: 1.3rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  color: #FFF;
  text-transform: none;
  position: relative;
  left: 0;
}
@media (max-width: 991px) {
  .dropdown-item {
    padding: 1rem 2rem;
  }
}
.dropdown-item:hover {
  background-color: #FF8F27;
  color: #FFF;
  left: 1rem;
}

.navbar-brand img {
  width: 28rem;
}
@media (max-width: 991px) {
  .navbar-brand img {
    width: 20rem;
    margin-left: -5px;
  }
}

.sticky {
  position: fixed;
  top: 0;
  z-index: 1000;
  width: 100%;
  box-shadow: 0 0.3rem 0.5rem rgba(0, 0, 0, 0.1);
  animation-name: sticker;
  animation-duration: 1s;
  animation-iteration-count: 1;
}

@keyframes sticker {
  0% {
    top: -102px;
    opacity: 0;
  }
  100% {
    top: 0;
    opacity: 1;
  }
}
.sticky + main {
  padding-top: 102px;
}

.navbar-toggler {
  outline: none;
  border: none;
  padding: 0;
  transform: scale(0.6);
  margin-right: -3rem;
}

.ham {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 400ms;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.hamRotate.active {
  transform: rotate(45deg);
}

.hamRotate180.active {
  transform: rotate(180deg);
}

.line {
  fill: none;
  transition: stroke-dasharray 400ms, stroke-dashoffset 400ms;
  stroke: #FF8F27;
  stroke-width: 5.5;
  stroke-linecap: round;
}

.ham1 .top {
  stroke-dasharray: 40 139;
}

.ham1 .bottom {
  stroke-dasharray: 40 180;
}

.ham1.active .top {
  stroke-dashoffset: -98px;
}

.ham1.active .bottom {
  stroke-dashoffset: -138px;
}

footer {
  background-color: #21232F;
  color: #FFF;
}
footer a {
  color: #FFF;
  text-decoration: none;
}

.footer {
  padding: 7rem 7vw 5rem 7vw;
}
.footer--grid {
  display: grid;
  grid-template-columns: 1fr 0.6fr 1fr;
  gap: 8rem;
}
@media (max-width: 991px) {
  .footer--grid {
    grid-template-columns: 1fr;
    gap: 5rem;
  }
}
.footer h3 {
  font-size: 2rem;
  font-weight: 600;
  margin-bottom: 3rem;
}
.footer h4 {
  font-size: 1.8rem;
  text-transform: none;
  font-weight: 700;
  margin-bottom: 2rem;
}
.footer img:not(.footer--logo) {
  filter: invert(1);
  width: 2rem;
}
.footer--logo {
  width: 25rem;
  margin-bottom: 3rem;
}
.footer--add {
  display: grid;
  grid-template-columns: 2rem auto;
  gap: 2rem;
}
.footer--add:not(:last-child) {
  margin-bottom: 2.5rem;
}
.footer--add img {
  margin-top: 0.5rem;
}
.footer .socials {
  margin-top: 3rem;
}
.footer .socials li {
  list-style-type: none;
  display: inline-block;
  margin-right: 1rem;
}
.footer--solutions {
  padding: 0;
  padding-left: 1.8rem;
  margin: 0;
  font-size: 1.6rem;
}
.footer--solutions a {
  display: inline-block;
  padding: 0.5rem 0;
}
.footer--solutions a:hover {
  color: #FF8F27;
}

.copyright {
  padding: 2rem 4rem;
  text-align: center;
  font-size: 1.4rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.hero--holder {
  max-width: 100vw;
  overflow: hidden;
}
.hero--holder .slick-dots {
  bottom: 3rem;
}
.hero--holder .slick-slide {
  position: relative;
  background-color: #21232F;
}
.hero--holder .slick-slide img {
  opacity: 0.7;
}
@media (max-width: 991px) {
  .hero--holder .slick-slide img {
    max-width: unset;
    height: 60vh;
  }
}
.hero--holder .slick-dotted.slick-slider {
  margin: -5px;
}
.hero--holder .slick-dots li button:before {
  color: #FFF;
  font-size: 12px;
}
.hero--holder .cap {
  position: absolute;
  left: 7vw;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
  color: #FFF;
  width: 40vw;
}
@media (max-width: 991px) {
  .hero--holder .cap {
    width: 90vw;
  }
}
.hero--holder .cap h5 {
  color: #FF8F27;
}
.hero--holder .cap h2 {
  font-size: 5rem;
  font-weight: 600;
  margin-bottom: 1rem;
}
@media (max-width: 991px) {
  .hero--holder .cap h2 {
    font-size: 2.8rem;
  }
}
.hero--holder .cap p {
  margin-bottom: 4rem;
  line-height: 3.2rem;
}
@media (max-width: 991px) {
  .hero--holder .cap p {
    display: none;
  }
}

.srv {
  background-color: rgba(0, 0, 0, 0.1);
}
.srv--intro {
  background-color: #FF8F27;
  padding: 10rem 7vw;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8vw;
  padding-bottom: 23rem;
  color: #FFF;
}
@media (max-width: 991px) {
  .srv--intro {
    grid-template-columns: 1fr;
    padding-top: 7rem;
  }
}
@media (max-width: 991px) {
  .srv--intro h1 {
    font-size: 3rem;
  }
}
.srv--intro .details {
  margin-top: 3rem;
}
@media (max-width: 991px) {
  .srv--intro .details {
    margin-top: 0;
  }
}
.srv--intro p {
  line-height: 2.8rem;
}
.srv--grid {
  padding: 0 7vw;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 5rem;
  margin-top: -15rem;
}
@media (max-width: 991px) {
  .srv--grid {
    grid-template-columns: 1fr;
    gap: 0;
    margin-top: -20rem;
    padding-bottom: 4rem;
  }
}
@media (max-width: 991px) {
  .srv--block {
    margin-bottom: -5rem;
  }
}
.srv--block .im {
  overflow: hidden;
}
.srv--block img {
  transition: all ease 0.3s;
  filter: contrast(1);
  transform: scale(1);
}
.srv--block:hover img {
  filter: contrast(1.4);
  transform: scale(1.1);
}

.whys {
  padding: 10rem 7vw;
  background-color: #f8f8f8;
}
@media (max-width: 991px) {
  .whys {
    padding: 7rem 7vw;
  }
}
.whys--intro {
  text-align: center;
}
.whys--grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3rem;
  margin-top: 5rem;
}
@media (max-width: 991px) {
  .whys--grid {
    grid-template-columns: 1fr;
  }
}
.whys--block {
  display: grid;
  grid-template-columns: 5.5rem auto;
  gap: 3rem;
  padding: 3rem;
  background-color: #FFF;
  transition: all ease 0.7s;
  cursor: default;
}
@media (max-width: 991px) {
  .whys--block {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}
.whys--block:hover, .whys--block.active {
  background-color: #21232F;
  color: #FFF;
}
.whys--block h4 {
  font-size: 1.6rem;
  text-transform: none;
  font-weight: 700;
  margin-bottom: 1rem;
}
.whys--block p {
  margin: 0;
  font-size: 1.5rem;
}
.whys--block img {
  transition: all ease 0.3s;
}
@media (max-width: 991px) {
  .whys--block img {
    width: 5.5rem;
  }
}
@media (max-width: 991px) {
  .whys--block > div:first-child {
    text-align: center;
  }
}

.cons {
  background-image: url(../img/intro/intro-contact-new.jpg);
  background-size: cover;
  background-attachment: fixed;
}
@media (max-width: 991px) {
  .cons {
    padding-top: 90vh;
    background-position: top right 20%;
  }
}
.cons--form {
  position: relative;
  background-color: #FFF;
  left: 7vw;
  padding: 4rem 3rem 5rem 3rem;
}
@media (max-width: 991px) {
  .cons--form {
    left: unset;
  }
}
.cons--form-holder {
  padding: 10rem 0;
  background-color: rgba(255, 143, 39, 0.9);
  width: 45rem;
}
@media (max-width: 991px) {
  .cons--form-holder {
    width: unset;
    padding: 0;
  }
}
.cons--form h2 {
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 3rem;
  text-transform: none;
}

.tstmn {
  padding: 10rem 7vw;
  background-color: #f8f8f8;
}
@media (max-width: 991px) {
  .tstmn {
    padding: 7rem 7vw;
  }
}
.tstmn--intro {
  text-align: center;
  margin-bottom: 5rem;
}
.tstmn h4 {
  font-size: 2.4rem;
  font-weight: 600;
  margin-bottom: 2rem;
}
.tstmn p {
  line-height: 3rem;
}
.tstmn .slick-list {
  margin: 0 -1.5rem;
}
.tstmn .slick-slide > div {
  padding: 0 1.5rem;
}
.tstmn--content {
  background-color: #FFF;
  padding: 6rem 5rem;
}

.vidin {
  padding: 15rem 7vw;
  background-image: url(../img/pcb-background.jpg);
  background-size: cover;
  background-attachment: fixed;
  text-align: center;
  color: #FFF;
}
@media (max-width: 991px) {
  .vidin {
    padding: 7rem 7vw;
  }
}
.vidin--play {
  display: inline-flex;
  position: relative;
  width: 8rem;
  height: 8rem;
  background-color: #FFF;
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  z-index: 3;
}
.vidin--play img {
  width: 2rem;
}
.vidin--play::before, .vidin--play::after {
  position: absolute;
  content: " ";
  width: 8rem;
  height: 8rem;
  left: 50%;
  top: 50%;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  background-color: rgba(255, 255, 255, 0.9);
}
.vidin--play::before {
  z-index: -1;
  animation: circAnim 1.5s ease-out infinite;
}
.vidin--play::after {
  z-index: -1;
  animation: circAnim 1.5s 0.75s ease-out infinite;
}
.vidin h2, .vidin p {
  margin-bottom: 4rem;
  margin: 4rem auto;
}
.vidin h2 {
  width: 50vw;
  margin-top: 0;
}
@media (max-width: 991px) {
  .vidin h2 {
    font-size: 2.4rem;
    width: 80vw;
    margin-bottom: -2rem;
  }
}
.vidin p {
  width: 45vw;
  line-height: 3.2rem;
}
@media (max-width: 991px) {
  .vidin p {
    width: 80vw;
    line-height: unset;
  }
}
@media (max-width: 991px) {
  .vidin .btn {
    font-size: 1.3rem;
  }
}

.cls {
  padding: 10rem 7vw;
  /* Alternative: Inline-block approach for older browser support */
}
@media (max-width: 991px) {
  .cls {
    padding: 7rem 7vw;
  }
}
.cls--intro {
  text-align: center;
  margin-bottom: 5rem;
}
.cls .slick-list {
  margin: 0 -4.5rem;
}
.cls .slick-slide > div {
  padding: 0 4.5rem;
}
.cls .slick-track {
  display: flex;
  align-items: center; /* Flexbox approach */
}
.cls .slick-slide {
  display: inline-block !important;
  vertical-align: middle;
  float: none !important;
}

.points {
  padding: 6rem 7vw;
  background-color: #21232F;
  color: #FFF;
}
.points--grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
@media (max-width: 991px) {
  .points--grid {
    grid-template-columns: 1fr;
    gap: 4rem;
  }
}
.points--point {
  display: grid;
  grid-template-columns: 7rem auto;
  padding: 0 2rem;
  gap: 2rem;
}
@media (max-width: 991px) {
  .points--point {
    grid-template-columns: 5rem auto;
  }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .points--point {
    grid-template-columns: 5rem minmax(0, 1fr);
    padding: 0 1.5rem;
    gap: 1.5rem;
  }
  .points--point h3 {
    font-size: 3rem;
  }
}
.points--point:not(:last-child) {
  border-right: 1px solid rgba(255, 255, 255, 0.1);
}
.points--point h3 {
  font-size: 3.6rem;
  font-weight: 600;
}
@media (max-width: 991px) {
  .points--point h3 {
    font-size: 3rem;
  }
}
.points--point p {
  font-size: 1.2rem;
  letter-spacing: 1px;
  text-transform: none;
}

@keyframes circAnim {
  0% {
    width: 8rem;
    height: 8rem;
    opacity: 0.5;
  }
  90% {
    opacity: 0;
  }
  100% {
    width: 15rem;
    height: 15rem;
    opacity: 0;
  }
}
.inds--intro {
  margin-top: 1rem;
  padding: 7rem 7vw;
  text-align: center;
}
@media (max-width: 991px) {
  .inds--intro {
    padding: 7rem 7vw;
    padding-bottom: 5rem;
  }
}
.inds--grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 991px) {
  .inds--grid {
    grid-template-columns: 1fr;
    gap: 2px;
  }
}
.inds--block {
  position: relative;
  background-color: #21232F;
  overflow: hidden;
}
.inds--block .cap {
  position: absolute;
  padding: 3rem;
  bottom: 0;
  left: 0;
  opacity: 0;
  transition: all ease 0.3s;
}
@media (max-width: 991px) {
  .inds--block .cap {
    opacity: 1;
  }
}
.inds--block .cap h3 {
  color: #FFF;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: none;
  font-size: 2.2rem;
}
@media (max-width: 991px) {
  .inds--block .cap h3 {
    font-size: 2.2rem;
    text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.4);
  }
}
@media (max-width: 991px) {
  .inds--block .cap h5 {
    display: none;
  }
}
.inds--block-2 {
  grid-column: span 2;
}
@media (max-width: 991px) {
  .inds--block-2 {
    grid-column: span 1;
  }
}
@media (max-width: 991px) {
  .inds--block-2 img {
    max-width: unset;
    width: 200%;
  }
}
.inds--block img {
  opacity: 1;
  transition: all ease 0.5s;
  transform: scale(1);
}
.inds--block:hover .cap {
  opacity: 1;
}
.inds--block:hover img {
  opacity: 0.1;
  transform: scale(1.2);
}

.vidmain {
  position: relative;
}
.vidmain--caps {
  position: absolute;
  height: 100%;
  width: 45vw;
  left: 7vw;
  top: 0;
  background-color: rgba(0, 0, 0, 0.8);
  -webkit-backdrop-filter: blur(3rem);
  backdrop-filter: blur(3rem);
  opacity: 0.7;
  z-index: 2;
  backface-visibility: hidden;
}
@media (max-width: 991px) {
  .vidmain--caps {
    display: none;
  }
}
.vidmain .cap {
  position: absolute;
  left: 10.5vw;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  color: #FFF;
  width: 40vw;
}
@media (max-width: 991px) {
  .vidmain .cap {
    width: 90vw;
    display: none;
  }
}
.vidmain .cap h5 {
  color: #FF8F27;
}
.vidmain .cap h2 {
  font-size: 5rem;
  font-weight: 600;
  margin-bottom: 1rem;
}
@media (max-width: 991px) {
  .vidmain .cap h2 {
    font-size: 2.8rem;
  }
}
.vidmain .cap p {
  margin-bottom: 4rem;
  line-height: 3.2rem;
}
@media (max-width: 991px) {
  .vidmain .cap p {
    display: none;
  }
}

.about--row {
  padding: 10rem 7vw;
  display: grid;
  grid-template-columns: 55rem auto;
  gap: 8rem;
}
@media (max-width: 991px) {
  .about--row {
    grid-template-columns: 1fr;
  }
}
.about--block {
  background-image: url(../img/about/about-bg.jpg);
  background-size: cover;
  background-attachment: fixed;
  padding: 20rem;
}
@media (max-width: 991px) {
  .about--block {
    background-position: top right 20%;
  }
}
.about--mission {
  padding: 10rem 7vw;
}
.about--mission-intro {
  text-align: center;
}
.about--mission-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 4rem;
  margin-top: 4rem;
}
@media (max-width: 991px) {
  .about--mission-grid {
    grid-template-columns: 1fr;
  }
}
.about--mission-grid h3 {
  text-transform: none;
  font-weight: 700;
}
.about--mission-grid .vision {
  background-color: #F8F8F8;
  padding: 6rem;
}
@media (max-width: 991px) {
  .about--mission-grid .vision {
    padding: 5rem 3rem;
  }
}
.about--mission-grid p {
  line-height: 1.5em;
  margin-bottom: 2.5rem;
}
.about--mission-grid p + p {
  margin-bottom: 0;
}
.about--leaders {
  padding: 10rem 7vw;
  background-color: #F8F8F8;
}
@media (max-width: 991px) {
  .about--leaders {
    padding: 7rem 7vw;
  }
}
.about--leaders-intro {
  text-align: center;
  margin-bottom: 3rem;
}
.about--leaders .leader {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
  align-items: center;
}
@media (max-width: 991px) {
  .about--leaders .leader {
    grid-template-columns: 1fr;
    gap: 3rem;
  }
}
.about--leaders .leader .cap {
  padding: 1.5rem 2rem;
  background-color: #FF8F27;
  color: #FFF;
}
.about--leaders .leader .cap h4, .about--leaders .leader .cap h5 {
  margin: 0;
}

h2 + .accordion {
  margin-top: 4rem;
}

.accordion-item {
  border: none;
  margin-bottom: 3rem;
}
.accordion .accordion-header {
  margin-bottom: 0;
}
.accordion .accordion-button {
  font-size: 1.7rem;
  font-weight: 700;
  text-transform: none;
  padding: 1.6rem 4rem;
  border: none;
  background-color: #FF8F27;
  color: #FFF;
}
@media (max-width: 991px) {
  .accordion .accordion-button {
    padding: 1.6rem 2rem;
    font-size: 1.6rem;
  }
}
.accordion .accordion-button::after {
  filter: invert(1) contrast(3);
}
.accordion .accordion-button.collapsed {
  background-color: rgba(0, 0, 0, 0.08);
  color: #000;
}
.accordion .accordion-button.collapsed::after {
  filter: invert(0) contrast(3);
}
.accordion .accordion-button span {
  margin-right: 1.4rem;
}
.accordion .accordion-body {
  padding: 3rem 4rem 2rem 4rem;
  border: none;
  border: 1px solid rgba(0, 0, 0, 0.04);
}

.timeline {
  padding: 10rem 7vw;
  background-color: #F8F8F8;
}
@media (max-width: 991px) {
  .timeline {
    padding: 7rem 7vw;
  }
}
.timeline-intro {
  text-align: center;
  margin-bottom: 3rem;
}
.timeline--tabs {
  margin-top: 4rem;
}
.timeline--tabs ul {
  font-family: "Montserrat", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 1.6rem;
  margin: 0;
  padding-left: 2rem;
}
.timeline--tabs .nav-pills {
  margin: 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.3);
  padding: 0;
}
@media (max-width: 991px) {
  .timeline--tabs .nav-pills {
    padding-bottom: 2rem;
  }
}
.timeline--tabs .nav-pills .nav-link {
  padding: 1rem 3rem;
  font-size: 2.4rem;
  font-weight: 600;
  color: #000;
}
@media (max-width: 991px) {
  .timeline--tabs .nav-pills .nav-link {
    font-size: 1.6rem;
    padding: 1rem;
  }
}
.timeline--tabs .nav-pills .nav-link.active {
  background-color: #FF8F27;
  border-radius: 1rem 1rem 0 0;
  color: #FFF;
}
@media (max-width: 991px) {
  .timeline--tabs .nav-pills .nav-link.active {
    border-radius: 1rem;
  }
}
.timeline--tabs h4 {
  font-size: 2.4rem;
}
.timeline--tabs .tab-content {
  padding: 4rem 3rem;
}

.sol {
  padding: 10rem 7vw;
}
@media (max-width: 991px) {
  .sol {
    padding: 7rem 7vw;
  }
}
.sol--grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 40rem;
  gap: 3rem;
}
@media (max-width: 991px) {
  .sol--grid {
    grid-template-columns: 1fr;
  }
}
.sol .carousel-indicators {
  margin: auto;
  bottom: unset;
  top: 100%;
}
.sol .carousel-indicators [data-bs-target] {
  width: 10rem;
}
.sol .thumbnail {
  opacity: 0.8;
  filter: blur(0.1rem);
}
.sol .thumbnail.active {
  opacity: 1;
  filter: blur(0);
}
@media (max-width: 991px) {
  .sol--carous {
    max-width: 86vw;
  }
}
.sol--menu {
  background-color: #F8F8F8;
  padding: 2.5rem;
  font-size: 1.4rem;
  text-transform: none;
  transition: all ease 0.3s;
  position: relative;
  top: 0;
}
@media (min-width: 992px) {
  .sol--menu {
    position: sticky;
    top: 90px;
    z-index: 2;
    max-height: calc(100vh - 110px);
    overflow-y: auto;
  }
}
.sol--menu ul li {
  list-style-type: none;
}
.sol--menu ul li a {
  background-color: #FFF;
  display: block;
  text-decoration: none;
  color: #000;
  font-weight: 600;
  padding: 1.4rem 2rem;
}
.sol--menu ul li a img {
  width: 0.8rem;
  position: relative;
  top: -2px;
  margin-right: 0.8rem;
  filter: invert(0);
  transition: all ease 0.3s;
}
.sol--menu ul li a:hover {
  background-color: #FF8F27;
  color: #FFF;
}
.sol--menu ul li a:hover img {
  filter: invert(1);
}
.sol--menu ul li a.mainer {
  background-color: #FF8F27;
  color: #000;
}
.sol--menu ul li a.mainer:hover {
  background-color: #000;
  color: #FFF;
}
.sol--menu ul li ul li a {
  padding: 1.2rem 2rem;
  text-transform: none;
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}
.sol--menu ul ul {
  margin-bottom: 2.5rem;
}
.sol--left ul {
  margin: 0;
  padding: 0;
  padding-left: 2rem;
  font-family: "Montserrat", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 1.6rem;
}
.sol--left .btn {
  margin-top: 2rem;
}
.sol--block {
  border-top: 2px solid rgba(0, 0, 0, 0.3);
  display: grid;
  grid-template-columns: minmax(0, 1fr) 45rem;
  gap: 3rem;
  margin: 5rem 0;
  padding-top: 5rem;
}
@media (max-width: 1199px) {
  .sol--block {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .sol--grid {
    grid-template-columns: minmax(0, 1fr) 30rem;
  }
}
.sol--block h4 {
  font-weight: 700;
  font-size: 1.6rem;
  margin: 0.5rem 0 2rem 0;
}
.sol--main h3 {
  margin-bottom: 2rem;
  font-weight: 700;
  padding-bottom: 1rem;
  border-bottom: 2px solid #FF8F27;
}
.sol--main img {
  margin-bottom: 3rem;
}

.splide {
  margin-top: 2rem;
}

.splide__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.splide__pagination__page.is-active {
  background: #FF8F27 !important;
}

.sol--gal {
  margin-bottom: 5rem;
  padding-bottom: 5rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}
.sol--gal h2 {
  margin-bottom: 3rem;
}
.sol--gal-vids {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3rem;
}
@media (max-width: 991px) {
  .sol--gal-vids {
    grid-template-columns: 1fr;
  }
}
.sol--gal-vids > div {
  position: relative;
  background-color: #000;
}
.sol--gal-vids > div a {
  background-color: #FFF;
  position: absolute;
  bottom: 4.3rem;
  right: 1rem;
  padding: 0.5rem 1rem;
}
.sol--gal-vids > div a:hover {
  background-color: #000;
}
.sol--gal-vids > div a:hover img {
  filter: invert(1);
}
.sol--gal-vids > div a img {
  width: 1.5rem;
  filter: invert(0);
}

.image-popup-fit-width > div.cas {
  background-color: rgba(255, 255, 255, 0.8);
  position: absolute;
  bottom: 2rem;
  left: 0;
  color: #000;
  left: 0;
}

.mfp-title {
  font-size: 1.5rem;
}

.clients--intro {
  padding: 10rem 7vw;
  text-align: center;
}
.clients--intro p {
  max-width: 50vw;
  margin: auto;
  margin-top: 2rem;
}
@media (max-width: 991px) {
  .clients--intro p {
    max-width: unset;
  }
}
.clients--list {
  padding: 10rem 7vw;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 3rem;
}
@media (max-width: 991px) {
  .clients--list {
    grid-template-columns: 1fr;
  }
}
.clients--list > div {
  border: 2px solid rgba(0, 0, 0, 0.05);
  display: flex;
  justify-content: center;
  align-items: center;
  height: 16rem;
  padding: 3rem;
  transition: all ease 0.5s;
}
.clients--list > div img {
  max-height: 10rem;
  transition: all ease 0.4s;
  opacity: 0.8;
}
.clients--list > div:hover {
  border-color: #FF8F27;
}
.clients--list > div:hover img {
  opacity: 1;
}

.award--intro {
  padding: 10rem 7vw;
  text-align: center;
}
@media (max-width: 991px) {
  .award--intro {
    padding: 7rem 7vw;
  }
}
.award--block {
  padding: 10rem 7vw;
}
@media (max-width: 991px) {
  .award--block {
    padding: 7rem 7vw;
  }
}
.award--block h2 {
  font-weight: 500;
  font-size: 2.8rem;
  margin-bottom: 1rem;
}
.award--block h2 strong {
  color: #FF8F27;
}
.award--block p {
  margin-bottom: 2rem;
  max-width: 60vw;
}
@media (max-width: 991px) {
  .award--block p {
    max-width: unset;
  }
}
.award--block:nth-child(even) {
  background-color: #F8F8F8;
}
.award--gal {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1rem;
}
@media (max-width: 991px) {
  .award--gal {
    grid-template-columns: 1fr;
  }
}
.award--gal a {
  display: block;
  height: 25rem;
  background-position: center center;
  background-size: cover;
  border: 1px solid rgba(0, 0, 0, 0.8);
}
@media (max-width: 991px) {
  .award--gal a {
    height: 20rem;
  }
}

.careers--intro {
  background-color: #F8F8F8;
}
.careers--intro a {
  color: #FF8F27;
  font-weight: 600;
  text-decoration: none;
}
.careers--info {
  padding: 10rem 7vw;
  display: grid;
  grid-template-columns: 0.8fr 1fr;
  gap: 7rem;
}
@media (max-width: 991px) {
  .careers--info {
    grid-template-columns: 1fr;
    gap: 3rem;
    padding: 7rem 7vw;
  }
}
.careers--form form {
  margin-top: 4rem;
}
.careers--im {
  background-position: bottom right;
  background-size: cover;
}
@media (max-width: 991px) {
  .careers--im {
    height: 50vh;
  }
}

.contact--intro {
  background-color: #F8F8F8;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  text-align: center;
  gap: 3rem;
}
@media (max-width: 991px) {
  .contact--intro {
    grid-template-columns: 1fr;
  }
}
.contact--block {
  background-color: #FFF;
  padding: 5rem;
}
.contact--block h3 {
  text-transform: none;
  font-weight: 700;
  font-size: 2rem;
  margin-bottom: 1rem;
}
.contact--block p {
  font-size: 1.4rem;
}
.contact--block p:last-child {
  margin: 0;
}
.contact--block a {
  color: #000;
  text-decoration: none;
}
.contact--block a:hover {
  color: #FF8F27;
}
.contact--block a.notify {
  text-decoration: underline;
}
.contact--block > div {
  background-color: #FF8F27;
  height: 10rem;
  width: 10rem;
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 2rem;
}
.contact--block > div img {
  width: 3rem;
  filter: invert(1);
}
.contact--info {
  grid-template-columns: 1fr 0.8fr;
}
@media (max-width: 991px) {
  .contact--info {
    display: flex;
    flex-direction: column-reverse;
  }
}
.contact--im {
  background-position: top right;
}

/*# sourceMappingURL=style.css.map */

/* Mobile / tablet fixes */
@media (max-width: 991px) {
  /* fixed backgrounds render blank or stretched on phones */
  .banner,
  .vidin,
  .about--block {
    background-attachment: scroll;
  }
  /* mobile menu: submenus follow taps only (a tap leaves a sticky :hover that kept them open) */
  .navbar-nav .dropdown:hover .dropdown-menu:not(.show) {
    display: none;
  }
  /* consultation photo doesn't work on phones: show just the form */
  .cons {
    background-image: none;
    padding-top: 0;
  }
  /* stacked stats: drop the column dividers */
  .points--point:not(:last-child) {
    border-right: 0;
  }
  /* slider dots sit below the image instead of over the caption */
  .splide .splide__pagination {
    position: static;
    flex-wrap: wrap;
    padding: 1rem 0 0;
    transform: none;
  }
  .splide .splide__pagination__page {
    background: #ccc;
  }
}

/* Desktop dropdowns: open on hover (or keyboard focus) only.
   A closing menu ignores the mouse, so its scale animation can't re-trigger hover and flicker. */
@media (min-width: 992px) {
  .navbar-nav .dropdown .dropdown-menu,
  .navbar-nav .dropdown .dropdown-menu.show {
    visibility: hidden;
    opacity: 0;
    transform: scale(1.2);
    pointer-events: none;
    transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out, visibility 0s linear 0.3s;
  }
  .navbar-nav .dropdown:hover .dropdown-menu,
  .navbar-nav .dropdown:has(:focus-visible) .dropdown-menu {
    visibility: visible;
    opacity: 1;
    transform: scale(1);
    pointer-events: auto;
    transition-delay: 0s;
  }
  /* the browser doesn't notice the mouse leaving the menu onto an embedded video,
     so videos ignore the mouse while a dropdown is open */
  body:has(.navbar-nav .dropdown:hover) iframe {
    pointer-events: none;
  }
}

/* About intro image: as tall as the text beside it on desktop, capped on mobile */
.about--intro-img img {
  display: block;
  max-height: 40rem;
  margin: 0 auto;
}
@media (min-width: 992px) {
  .about--intro-img {
    position: relative;
    min-height: 40rem;
  }
  .about--intro-img img {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 100%;
    max-height: 60rem;
    object-fit: contain;
    transform: translateY(-50%);
  }
}

/* slider captions: shown exactly as typed (Title Case) */
.image-popup-fit-width > div.cas {
  text-transform: none;
}

/* Leadership cards: photos line up and caption bars match height even when a title wraps */
.about--leaders .leader {
  align-items: stretch;
}
.about--leaders .leader > div {
  display: flex;
  flex-direction: column;
}
.about--leaders .leader > div > img {
  display: block;
}
.about--leaders .leader .cap {
  flex: 1;
}

/* =========================================================
   Typography scale (Montserrat everywhere, 1rem = 10px)
   body 18 · footer 16 · nav/buttons 15 · labels 14
   card titles 20 · sub-headings 24 · section headings 32 · page title 40
   ========================================================= */
body main p,
body main li,
body main .accordion-body,
body main .MsoNormal,
body main .MsoNormal span,
body main input,
body main textarea,
body main select,
body main .form-control {
  font-size: 1.8rem;
  line-height: 1.6;
}

/* navigation */
body .header--links a,
body .header--links li {
  font-size: 1.5rem;
}
body .navbar .navbar-nav .nav-link,
body .navbar .dropdown-item,
body .navbar .btn {
  font-size: 1.5rem;
}
body main .breadcrumb-item,
body main .breadcrumb-item a {
  font-size: 1.6rem;
}
body main .sol--menu li,
body main .sol--menu a {
  font-size: 1.5rem;
}

/* buttons, captions, small labels */
body main .btn {
  font-size: 1.5rem;
}
body main .image-popup-fit-width > div.cas {
  font-size: 1.6rem;
}
body main .points--point p {
  font-size: 1.6rem;
  line-height: 1.5;
}
body main h5 {
  font-size: 1.4rem;
}

/* headings */
body main .banner h2 {
  font-size: 4rem;
}
body main h1,
body main h2 {
  font-size: 3.2rem;
}
body main .cons--form h2 {
  font-size: 2.4rem;
}
body main .award--block h2,
body main .award--block h2 strong {
  font-size: 2.8rem;
}
body main h2.accordion-header,
body main .accordion-button,
body main .accordion-button span {
  font-size: 2rem;
}
body main .sol--main h3,
body main .tab-pane h4 {
  font-size: 2.4rem;
}
body main h3,
body main h4,
body main .sol--block h4 {
  font-size: 2rem;
}
body main .sol--main h3 {
  font-size: 2.4rem;
}
body main .tab-pane h4 {
  font-size: 2.4rem;
}
body main .points--point h3 {
  font-size: 3.6rem;
}

/* footer */
body footer p,
body footer li,
body footer span,
body footer a {
  font-size: 1.6rem;
}
body footer .copyright,
body footer .copyright a {
  font-size: 1.4rem;
}

@media (max-width: 991px) {
  body main .banner h2 {
    font-size: 3rem;
  }
  body main h1,
  body main h2 {
    font-size: 2.6rem;
  }
  body main .sol--main h3,
  body main .tab-pane h4 {
    font-size: 2.2rem;
  }
  body main .points--point h3 {
    font-size: 3rem;
  }
}

/* scale: home & contact components that had their own sizes */
body main .flipper--front h4,
body main .flipper--inner h4,
body main .inds--block .cap h3,
body main .whys--block h4,
body main .tstmn--content h4 {
  font-size: 2rem;
}
body main .whys--block p,
body main .contact--block p {
  font-size: 1.8rem;
}
body main .vidin h2 {
  font-size: 3.2rem;
}
body main .vidin .btn {
  font-size: 1.5rem;
}
@media (max-width: 991px) {
  body main .srv--intro h1,
  body main .vidin h2 {
    font-size: 2.6rem;
  }
}

/* award photos: show the whole trophy/certificate inside the tile instead of cropping */
.award--gal a.award--fit {
  background-size: contain;
  background-repeat: no-repeat;
  background-color: #FFF;
}

/* jump links: the page's own jQuery smooth-scroll fights Bootstrap's CSS smooth scrolling and stops short */
html {
  scroll-behavior: auto !important;
}
.sol--main[id] {
  scroll-margin-top: 150px;
}

/* =========================================================
   Mobile section menu: right-edge tab + slide-in panel
   (markup added by assets/js/sol-menu.js; desktop unchanged)
   ========================================================= */
.sol-tab,
.sol-backdrop,
.sol-panel-head {
  display: none;
}
@media (max-width: 991px) {
  .sol--grid > .sol--right {
    position: fixed;
    top: 0;
    right: 0;
    width: min(82vw, 320px);
    height: 100vh;
    height: 100dvh;
    overflow-y: auto;
    background-color: #FFF;
    box-shadow: -0.4rem 0 2rem rgba(0, 0, 0, 0.25);
    z-index: 1100;
    transform: translateX(100%);
    transition: transform 0.3s ease;
    visibility: hidden;
  }
  body.sol-menu-open .sol--grid > .sol--right {
    transform: none;
    visibility: visible;
  }
  body.sol-menu-open {
    overflow: hidden;
  }
  body main .sol--menu {
    padding: 1.5rem;
    background-color: #FFF;
  }
  body main .sol--menu ul {
    margin: 0;
    padding: 0;
  }
  body main .sol--menu ul li a {
    padding: 1.2rem 1.5rem;
    font-size: 1.5rem;
  }
  body main .sol--menu ul ul {
    margin: 0 0 1rem 1.5rem;
  }

  .sol-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.5rem 1.5rem 0.5rem;
    font-size: 1.8rem;
    font-weight: 600;
    color: #21232F;
  }
  .sol-panel-close {
    border: 0;
    background: none;
    font-size: 3rem;
    line-height: 1;
    padding: 0 0.5rem;
    color: #21232F;
  }

  .sol-tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
    position: fixed;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1050;
    border: 0;
    border-radius: 0.8rem 0 0 0.8rem;
    padding: 1.2rem 0.6rem;
    background-color: #FF8F27;
    color: #FFF;
    box-shadow: -0.2rem 0.2rem 1rem rgba(0, 0, 0, 0.2);
    transition: opacity 0.2s ease;
  }
  .sol-tab__arrow {
    font-size: 2.6rem;
    line-height: 1;
  }
  .sol-tab__label {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-size: 1.3rem;
    font-weight: 600;
    letter-spacing: 0.1rem;
  }
  body.sol-menu-open .sol-tab {
    opacity: 0;
    pointer-events: none;
  }

  .sol-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 1090;
    background-color: rgba(0, 0, 0, 0.45);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
  }
  body.sol-menu-open .sol-backdrop {
    opacity: 1;
    pointer-events: auto;
  }
}

/* intro blocks with no images (MIG Welding, Spot Welding): text uses the full width */
.sol--block.sol--block-full {
  grid-template-columns: minmax(0, 1fr);
}
.sol--block.sol--block-full > .sol--carous {
  display: none;
}

/* enquiry forms: result message + hidden anti-spam field */
.form-hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  opacity: 0;
}
.form-status:empty {
  display: none;
}
.form-status {
  margin-bottom: 2rem;
  padding: 1.2rem 1.5rem;
  font-size: 1.6rem;
  border-left: 4px solid;
}
.form-status--ok {
  background-color: #EAF7EE;
  border-color: #2E9E57;
  color: #1E6B3A;
}
.form-status--error {
  background-color: #FDECEC;
  border-color: #D84727;
  color: #8E2A15;
}