@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../font/Poppins-Regular-1.woff2") format('woff2');
    unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FF;
}

@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../font/Poppins-Regular-2.woff2") format('woff2');
    unicode-range: U+0100-02AF, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../font/Poppins-Regular-3.woff2") format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "fallbackFont";
	src: local("Georgia");
	ascent-override: 105%;
	descent-override: 35%;
	line-gap-override: 10%;
}

  @font-face {
    font-family: "slaney";
    src: url("../icon/slaney.ttf?bv3tcl") format("truetype"),
      url("../icon/slaney.woff?bv3tcl") format("woff"),
      url("../icon/slaney.svg?bv3tcl#KCC") format("svg");
    font-weight: normal;
    font-style: normal;
    font-display: block;
  }
  /* ol li i {
    width: 16px;
  } */
  i {
    font-family: "slaney" !important;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    margin-right: 1.5rem;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  /* .icon-message:before {
    content: "\e900";
  }
  .icon-person:before {
    content: "\e901";
    font-size: larger;
  }
  .icon-business:before {
    content: "\e902";
  }

  .icon-chevron-up:before {
    content: "\e907";
  }
  .icon-linkedin:before {
    content: "\e903";
  
  }
  .icon-phone:before {
    content: "\e904";
    font-size: larger;
  }
  .icon-address:before {
    content: "\e905";
    font-size: larger;
  }
  .icon-email:before {
    content: "\e906";
    font-size: larger;
  } */
  

  /* .icon-info:before {
    content: "\e90a";
  } */

  .icon-person:before {
    content: "\e905";
  }
  .icon-message:before {
    content: "\e903";
  }
  .icon-arrow-right, .icon-arrow-left, .icon-arrow-up{
    margin: 0px;
  }
  .icon-arrow-right:before {
    content: "\e907";
    margin: 0px !important;
  }
  .icon-arrow-left:before {
    content: "\e908";
    margin: 0px !important;
  }
  .icon-arrow-up:before {
    content: "\e909";
  }
  .icon-business:before {
    content: "\e906";
  }
  .icon-linkedin:before {
    content: "\e904";
    font-size: larger;
  }
  .icon-phone:before {
    content: "\e902";
    font-size: larger;
  }
  .icon-address:before {
    content: "\e901";
    font-size: larger;
    margin-right: .5rem;
  }
  .icon-email:before {
    content: "\e900";
    font-size: larger;
  }

  .small-icon-address:before {
    content: "\e901";
    font-size: small;
    margin-right: .25rem;
  }
  .small-icon-phone:before {
    content: "\e902";
    font-size: small;
  }
  .small-icon-email:before {
    content: "\e900";
    font-size: small;
  }
  .small-icon-linkedin:before {
    content: "\e904";
    font-size: small;
  }

h3 {
    font-size: 1.2rem;
}
em.seo, strong.seo {
	font-weight: normal;
	font-style: normal; }

#scrollToTop {
    position: fixed;
    display: flex;
    background-color: var(--accent1);
    color: var(--white);
    /* border-radius: 50%; */
    z-index: 5;
    cursor: pointer;
    padding: 0.5rem 0.75rem;
    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.3);
    text-align: center;
    bottom: 1rem;
    right: 1rem;
    cursor: pointer;
}

#scrollToTop:hover {
    color: var(--brand);
    background-color: var(--white);
}

nav button.toggler-open span {
    background-color: transparent;
}

nav button.toggler-open span:before {
    transform: translateY(0px) rotate(45deg);
}

nav button.toggler-open span:after {
    transform: translateY(-3px) rotate(-45deg);
}

.nav-menu-mobile.open {
    display: flex;
}

.nav-list-item-mobile, .nav-list-item-desktop {
    display: flex;
    align-items: center;
    width: 100%;
    justify-content: center;
    padding: var(--padding);
    color: var(--text2);
    font-weight: 600;
    text-transform: uppercase;
    line-height: 1.5rem;
    letter-spacing: 2px;
    text-align: center;
}

.nav-list-item-mobile a {
    width: 100%;
}

.nav-list-item-mobile:hover>a {
    color: var(--brand);
}

.nav-list-item-desktop:hover>a {
    color: var(--accent1);
}

.service-list-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    background-color: white;
    padding: var(--padding);
}

.nav-list-item-mobile > details > ol, .services-list-item > ol {
    display: flex;
    width: 100%;    
    margin-top: 1rem;
    flex-direction: column;
}

.nav-list-item-mobile > details > ol {
    background-color: var(--accent3);
}

.nav-list-item-mobile details, .services-list-item ol,
.nav-list-item-mobile summary, .services-list-item ol {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}
.services-list-item > ol li {
    width: 100%;
    padding: .5rem;
    border-bottom: thin solid var(--accent1);
}
.nav-list-item-mobile summary p, .services-list-item summary h3 {
    margin-right: 1rem;
}

.nav-list-item-mobile summary i, .services-list-item summary i {
    position: absolute;
    right: 5%;
}

.nav-list-item-mobile + .nav-list-item-mobile {
    border-top: thin solid var(--accent1);
}
.services-list-item h3,.services-list-item i {
    color: var(--brand);
}
.services-list-item ol{    
    cursor: pointer;
}
.services-list-item {
    width: 100%;
}
li.services-list-item + li.services-list-item {
    margin-top: 1rem;
    padding-top: 1rem;
}

.expand-nav {
    margin-left: auto;
}

.nav-list-item-mobile:hover>a {
    color: var(--brand);
}

section h2 {
    color: var(--accent1);
    padding: var(--padding);
}

.container {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: space-between;
}

.container + .container{
    margin-top: 2rem;
}

.container>aside:first-child {
    margin-bottom: 3rem;
}

aside p {
    margin-bottom: .5rem;
}

aside.media-holder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

/* CTA */
.cta {
    width: 100vw;      
    background-color: var(--text2);
    padding: var(--padding);
    text-align: center;
}
.cta h2 {
    color: var(--white);  
}

/** -- INDUSTRY -- **/

.gallery {
    display: grid; 
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));    
    gap: 1rem;
    height: 100%;
    margin-top: 1rem;
 }
 
.industry-card {
    height: 200px;
    background-size: cover;
    transform: scale(1);
    transition: all 0.3s ease-in-out;
    cursor: pointer;
}

.lazy-background {
    background-image: url("../img/placeholder.png");
}

.industry-card.pharmaceutical.lazy-background.visible {
    background: url('../img/industry/pharmaceutical.png');
}

.industry-card.hydraulic.lazy-background.visible {
    background-image: url('../img/industry/hydraulic.png');
}

.industry-card.agricultural.lazy-background.visible {
    background-image: url('../img/industry/agricultural.png');
}

.industry-card.electrical.lazy-background.visible {
    background-image: url('../img/industry/electrical.png');
}

.industry-card.construction.lazy-background.visible {
    background-image: url('../img/industry/construction.png');
}

.industry-card.manufacturing.lazy-background.visible {
    background-image: url('../img/industry/manufacturing.png');
}

.industry-card.medical.lazy-background.visible {
    background-image: url('../img/industry/medical.png');
}

.hoverdiv {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: 100%;
    height: 100%;
    background: rgba(105, 172, 192, 0.8);
    color: var(--text2);
    opacity: 1;
    box-sizing: border-box;
}

.hoverdiv-title {
    font-weight: bold;
    background: rgba(255, 255, 255, .8);
    width: 100%;
}

.hoverdiv-link {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    bottom: 1rem;
    right: 1rem;
    background: rgba(255, 255, 255, .8);
    padding: 0 .5rem;
    font-size: 1.5rem;
}

.industry-card:hover .hoverdiv,
.industry-card:active .hoverdiv {
    opacity: 1;
}

.industry-card:hover {
    transform: scale(1.03);
}

aside.services {
    display: flex;
    align-items: center;
    justify-content: center;
}

.pro-list {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    max-width: 300px;
    height: 500px;
    padding: var(--padding);
    color: var(--white);
    border-radius: 12px;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .09);
}
.pro-list.lazy-background{
    background: linear-gradient(180deg, rgba(54,89,99,.9) 82%, rgba(19,29,32,.9) 100%);

}
.pro-list.lazy-background.visible{
    background: linear-gradient(180deg, rgba(54,89,99,.9) 82%, rgba(19,29,32,.9) 100%),url(../img/lathe.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
.quality-row {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
}

.quality-row a {
    display: flex;
}

.quality.lazy-background, .machinery.lazy-background{
    background: white;
}
.quality.visible{   
    background: url('../img/9001white.svg'), linear-gradient(rgba(255,255,255,0.8),rgba(255,255,255,0.8));
    background-blend-mode: overlay;
    background-position: center;
    background-repeat: no-repeat;
}

#schedule{
    background: url('../img/header/2.webp'), linear-gradient(rgba(255,255,255,0.9),rgba(255,255,255,0.9));
    background-blend-mode: overlay;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}
#schedule h3 {
    color: var(--text2);
}

.schedule-gallery{
    align-self: auto;
    margin-top: auto;
}

#slider{
    width:80%;
    margin:0px auto;
    margin-top: 100px;
    max-width: 600px;
    position:relative;
    overflow:hidden;
    border: 10px solid white;
    box-shadow:2px 5px 10px rgba(0,0,0,0.4);;
    }
    
    .slide{
    width:100%;
    
    display:none;
    animation-name:fade;
    animation-duration:1s;
    
    }
    .slide img{
    width:100%;
    }
    @keyframes fade{
    from{opacity:0.5;}
    to{opacity:1;}
    }
    
    .controls{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    font-size:1rem;
    padding:15px 10px;
    border-radius:5px;
    color:white;
    
    }
    
    .controls:hover{
    /*background:rgba(72, 114, 255, 0.03); */
    background-color: aliceblue;   
    transition:0.3s;
    color:var(--text2);
    }

    /* .controls:hover > #left-arrow, .controls:hover > #right-arrow{
      color:var(--text2);
    }
    
    .controls:active{
    color:var(--text2);
    } */
    
    #left-arrow{
    left:10px;
    }
    
    #right-arrow{
    right:10px;
    }
    
    #dots-con{    
    text-align:center;
    }

    .dot{
    display:inline-block;
    background:grey;
    padding:8px;
    border-radius:50%;
    margin:10px 5px;
    }
    
    .active{
    background:var(--text2);
    }
    
    @media (max-width:576px){
    #slider{width:100%;
    
    }
    
    .controls{
      font-size:1em;
    }
    
    #dots-con{
      display:none;
    }
    }



#contact{
    background: url('../img/contact.png'), linear-gradient(rgba(255,255,255,0.9),rgba(255,255,255,0.9));
    background-blend-mode: overlay;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

#contact aside {
    padding: calc(var(--padding) * 2);
    color: var(--text2);
    background: linear-gradient(rgba(255,255,255,0.9),rgba(255,255,255,0.9));
}
.contactContent li {
    margin: .25rem;
    justify-content: flex-start;
    align-items: center;
    display: flex;
    width: 100%;
  }
  .contactContent i,
  .contactContent a {
    display: flex;
  }
  
  .contactContent i:hover,
  .contactContent a:hover {
    color: var(--brand);
  }
  
  .contactContent i,
  .contactContent .logo {
    color: var(--brand);
  } 

form {
    padding: var(--padding);
}
  form p.lightText {
    color: var(--brand);
    font-weight: bold;
  }
  
  form ol {
    display: flex;
    flex-direction: column;
    width: 100%;
  }
  
  form li {
    display: flex;
    flex-flow: row wrap;
  }
  
  form li * {
    width: 100%;
  }
  
  input,
  select,
  textarea {
    padding: 0.5rem;
    width: 100%;
    transition: 0.3s;
    border-radius: 0.25rem;
    cursor: pointer;
    background: var(--surface2);
    border: thin solid var(--surface1);
    color: var(--text2);
    font-family: "slaney", "Poppins";
  }
  
  input:hover,
  textarea:hover,
  select:hover {
    box-shadow: 0 0 0.25rem var(--accent1);
    
  }
  
  input:focus,
  textarea:focus,
  select:focus {
    box-shadow: 0 0 0.15rem var(--accent1);
  }
  
  textarea::-webkit-outer-spin-button,
  textarea::-webkit-inner-spin-button,
  input::-webkit-outer-spin-button,
  input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }
  
  form p {
    align-items: baseline;
    justify-content: flex-start;
    font-size: 0.75rem;
  }
  
  /* BUTTONS */
  button[type="submit"],
  .button,.button.flip:hover,
  .button.flip:focus{
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--surface2);
    background-color: var(--brand);
    border: thin solid var(--surface2);
    padding: 1rem;
    transition: 0.3s;
    border-radius: 0.25rem;
    font-size: 1rem;
  }
  
  button[type="submit"]:hover,
  button[type="submit"]:focus,
  button[type="submit"]:disabled,
  .button:hover,
  .button:focus,
  .button:disabled,
  .button.flip {
    background-color: var(--surface2);
    color: var(--brand);
    border: thin solid var(--brand);
    cursor: pointer;
  }

  .spinner {
    height: 1rem;
    width: 1rem !important;
    margin: 0;
    animation: rotation 0.6s infinite linear;
    border-left: 0.188rem solid rgba(0, 174, 239, 0.15);
    border-right: 0.188rem solid rgba(0, 174, 239, 0.15);
    border-bottom: 0.188rem solid rgba(0, 174, 239, 0.15);
    border-top: 0.188rem solid rgba(0, 174, 239, 0.8);
    border-radius: 100%;
  }


footer {
    display: grid;
    gap: 1em;
    grid-template-columns: repeat(auto-fit, minmax(20em, 1fr));
    background-color: var(--text2);
    padding: var(--padding);
    font-size: .75rem;
}
ul.contact{
    margin-top: 1rem;
}
  .contactContent.footer, .contactContent.footer i,
  .contactContent.footer .logo, .contactContent.footer a {
    color: var(--white);
  }

  .contactContent.footer li {
    margin: .5rem 0;
    width: 100%;
  }

  .quality-row.footer {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.quality-row a:first-child {
    margin-right: 1rem;
}

.no-cssanimations .cb-slideshow li span {
    opacity: 1;
}

aside.qual-gallery {
  position: relative;
  flex-grow: 1;
  margin: auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, 1fr);
  grid-gap: 2vmin;
  justify-items: center;
  align-items: center;
}

aside.qual-gallery img{
    /* height: 144px;
    width: 144px; */
  z-index: 1;
  grid-column: span 2;
  max-width: 100%;
  margin-bottom: -52%;
  -webkit-clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
          clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  transform: scale(1);
  transition: all 0.25s;
}

aside.qual-gallery img:nth-child(3n+1) {
  grid-column: 2/span 2;
}



/** -- MEDIA QUERIES -- **/
@media (min-width: 768px) {

    .container {
        flex-direction: row;
    }

    .container aside {
        width: 50%;
    }

    .container>aside:first-child {
        margin-bottom: 0;
    }

    .hoverdiv {
        opacity: 0;
    }
    .services-list-item > ol li {
        padding: .5rem;
    }

    .pro-list {
        max-width: 600px;
        max-height: 600px;
    }
    .industry-card.holder {
        cursor:default;
        visibility: hidden;
        display: flex;
    }
    /* footer {
        flex-direction: row;
    } */
    aside.qual-gallery img{
        /* height: 225px;
        width: 225px; */
    }

}



/*----------   Animations & Transitions   ----------*/
/* Acknowledgement - The App Guruz - https://www.theappguruz.com/tag-tools/web/CSSAnimations/ */
.slideInDown {
    animation-name: slideInDown;
    animation-duration: 1s;
    animation-fill-mode: both;
}

.slideInLeft {
    animation-name: slideInLeft;
    animation-duration: 1s;
    animation-fill-mode: both;
}

.slideInRight {
    animation-name: slideInRight;
    animation-duration: 1s;
    animation-fill-mode: both;
    overflow: hidden;
}

.slideOutRight {
    animation-name: slideOutRight;
    animation-duration: 1s;
    animation-fill-mode: both;
}


@keyframes slideInDown {
    0% {
        transform: translateY(-100%);
        visibility: hidden;
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes slideOutRight {
    0% {
        transform: translateX(0);
    }

    100% {
        visibility: hidden;
        transform: translateX(100%);
    }
}

@keyframes rotation {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(359deg);
    }
}

@keyframes slideInLeft {
    0% {
        transform: translateX(-100%);
        visibility: visible;
    }

    100% {
        transform: translateX(0);
    }
}


@keyframes slideInRight {
    0% {
        transform: translateX(-100%);
        visibility: visible;
        overflow: hidden;
    }

    100% {
        transform: translateX(0);
        overflow: hidden;
    }
}




/* form {
	margin-top: 1rem;
	-webkit-animation: sweep .5s ease-in-out;
    animation: sweep .5s ease-in-out;
}
form, .form-header, .group-checkbox-holder, .group-checkbox-holder.row, .group-holder > li, .group-checkbox-holder > li, .group-holder > li > div.row, input[type="checkbox"], input[type="radio"],label, #lname, #fname, .form-footer, button.next, ul .range-amount-slider {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}
form, .group-checkbox-holder:not(.row), .group-holder > li, .group-holder > li > div.row {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
}
.form-header, .group-checkbox-holder > li, .form-footer, button.next {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}
.form-header {
	margin-bottom: 1rem;
	justify-content: space-between;
	padding: 0 !important;
}

#form-progress, #progress-section, #progress-pie {
	display: flex;
	align-items: center;
	padding: 0 !important;
	width: auto;
	}
	#form-progress{
		justify-content: flex-start;
	}
	#progress-section {
		justify-content: center;
	}
	#progress-pie {
		justify-content: flex-end;
	}
	

.group-checkbox-holder:not(.row) > li + li {
	margin-top: 1rem;
}
.group-checkbox-holder.row > li + li {
	margin-left: 1.5rem;
}

legend {
    margin-top: 1rem;
    font-size: var(--regular-font);
    font-weight: 600;
}

legend + p:not(.assessment-form) {
    color: var(--brand);
    font-style: italic;
    font-size: var(--smaller-font);
}



input[type="checkbox"], input[type="radio"] {
    margin-right: 1rem;
    -webkit-transform: scale(2);
    -ms-transform: scale(2);
    transform: scale(2);
}
label {
	margin-bottom: 0;
}
input:not(input[type="checkbox"], input[type="radio"]), select {
    height: 3rem;
}
input + input {
	margin-top: .5rem;
}
input, select, textarea {
    font-size: 1rem;
    padding: 0.25rem;
    margin: 0 0.25rem;
    -webkit-transition: 0.3s;
    -o-transition: 0.3s;
    transition: 0.3s;
    border-radius: 0.25rem;
    cursor: pointer;
    background: var(--surface2) !important;
    border: thin solid var(--text1);
    color: var(--text2);
}
select:hover, textarea:hover, input:not(input[type="radio"]):hover {
    -webkit-box-shadow: 0 0 0.25rem var(--brand);
    box-shadow: 0 0 0.25rem var(--brand);
}
select:focus, textarea:focus, input:not(input[type="radio"]):focus {
    -webkit-box-shadow: 0 0 0.15rem var(--brand);
    box-shadow: 0 0 0.15rem var(--brand);
}

.error-holder {
    color: var(--stopped);
	margin: .25rem 0;
	font-weight: bold;
	font-size: 14px;
} */



  
  
  @keyframes imageAnimation { 
      0% { opacity: 0; animation-timing-function: ease-in; }
      8% { opacity: 1; animation-timing-function: ease-out; }
      17% { opacity: 1 }
      25% { opacity: 0 }
      100% { opacity: 0 }
  }
  
  
  @keyframes titleAnimation { 
      0% { opacity: 0 }
      8% { opacity: 1 }
      17% { opacity: 1 }
      19% { opacity: 0 }
      100% { opacity: 0 }
  }