@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap');

html {
    width: 100%;
	height: 100%;
    margin: 0;
    padding: 0;
}
body, div, h1, h2, h3, h4, h5, h6, form, a, p, span, ul, ol, li, img, textarea, input, select, option {
	font: 100% "Noto Sans", sans-serif;
    color: #272727;
    margin: 0;
    padding: 0;
    list-style: none;
    text-decoration: none;
    box-sizing: border-box;
}
body {
    background: #fff;
}
a {
    color: #000;
}
a:hover {
    text-decoration: underline;
}
a.button {
    background: #000;
    border-radius: 32px;
    color: #fff;
    cursor: pointer;
    font-size: 120%;
    border: none;
    padding: 16px 32px;
    display: inline-block;
    font-weight: 500;
    text-decoration: none;
    margin-top: 32px;
}
a.more-button, button.more-button {
    background: #dcdcd8;
    border-radius: 32px;
    font-size: 80%;
    cursor: pointer;
    border: none;
    padding: 12px 24px;
    display: inline-block;
    font-weight: 500;
    text-decoration: none;
    margin-top: 12px;
}
a.button:hover, a.more-button:hover, button.more-button:hover {
    background: #a1afb7;
}
.collapse-list button.more-button {
    font-size: 66%;
    margin-top: 0;
    padding: 8px 16px;
}
.left {
    float: left;
}
.right {
    float: right;
}
.text-right {
    text-align: right;
}
.clear {
    display: block;
    clear: both;
}
.bold, .bold a {
    font-weight: 700;
}
.italic {
    font-style: italic;
}
.center {
    text-align: center;
}
header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: #fff;
    z-index: 100;
}
#header-grid {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 16px;
    max-width: 1440px;
    margin: auto;
    padding: 0 16px;
}
#iso {
    text-align: center;
    font-size: 70%;
    padding: 26px 8px 26px 26px;
}
#iso li span {
    display: none;
}
header img {
    max-width: 100%;
}
header nav {
    padding: 24px 8px;
}
header nav ul.left {
    padding: 16px 0;
}
header nav li {
    position: relative;
    display: inline-block;
    padding: 0 12px;
}
header nav li.menu {
    display: none;
    padding: 0 4px;
}
header nav li.menu img {
    vertical-align: bottom;
}
header nav li a:hover, header nav li a.active {
    color: #666;
    text-decoration: none;
}
header nav li ul.dropdown-menu {
    display: none;
    position: absolute;
    top: 32px;
    left: 0;
    text-align: left;
    background-color: #fff;
    padding: 8px 16px;
    box-shadow: 1px 1px 3px #666;
    border-radius: 4px;
    min-width: 190px;
    z-index: 100;
}
header nav li ul.dropdown-menu li {
    display: block;
    font-size: 90%;
    padding: 8px 12px 8px 8px;
}
header nav li ul.dropdown-menu li i {
    position: absolute;
    right: 8px;
    margin-top: 4px;
}
header nav a.button {
    font-size: 100%;
    margin-top: 0;
}
header #topnav {
    background: #272727;
}
header #topnav ul {
    text-align: right;
    max-width: 1440px;
    margin: auto;
    padding: 0 32px;
}
header #topnav li {
    padding: 0 8px;
}
header #topnav a {
    color: #fff;
    font-size: 90%;
}
header #topnav a:hover {
    text-decoration: underline;
}
header #topnav {
    padding: 4px;
}
#main, section.bottom {
    background-image: url("../img/hero.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: top;
    transition: background 1s linear;
}
#main.engineering {
    background-image: url("../img/Engineering.jpg");
}
#main.assembly {
    background-image: url("../img/assembly.jpg");
}
#main.overview {
    background-image: url("../img/KT-factory5.jpg");
}
#main.about {
    background-image: url("../img/what-is-machining.jpg.webp");
}
#main.quality {
    background-image: url("../img/Quality-1.jpg");
}
#main.materials {
    background-image: url("../img/materials.png");
}
#main.precision {
    background-image: url("../img/precision.jpg");
}
section#our-story {
    background-image: url("../img/our-story-hero-bw.jpg");
    padding: 0;
}

#main.special {
    background-image: url("../img/special.png");
}
#main.facility {
    background-image: url("../img/facility.jpg");
    background-position: center;
}
#main.no-bg {
    background-image: none;
}
#main .hero, #our-story .hero {
    padding: 0 16px;
    padding-top: 140px;
    min-height: 600px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    align-content: center;
    background: rgba(39, 39, 39, 0.8);
}
#our-story .hero {
    padding-top: 0;
    background: rgba(0, 0, 0, 0.5);
}
#main.no-bg .hero {
    background: transparent;
}
/*#main.small-hero {
    background-position-y: -100px;
}*/
#main.small-hero .hero {
    position: relative;
    /*background: transparent;*/
    min-height: 600px;
}
#main.small-hero .hero .content-hero {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: #fff;
}
#main.small-hero .hero .content-hero h1 {
    font-size: 162.5%;
    color: #272727;
    text-align: center;
    text-decoration: underline;
    text-transform: uppercase;
    max-width: 1440px;
    margin: auto;
    padding: 16px;
}
#main .grid, #content .grid, .collapse-list .grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 16px;
    align-items: center;
    width: 100%;
    max-width: 1440px;
    margin: auto;
}
.collapse-list .grid {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    justify-items: center;
}
#main .grid .right-padded {
    padding-right: 25%;
}
#main .center, #our-story .center {
    max-width: 800px;
    margin: auto;
}
#main h1, #main h2, section.bottom h5 {
    font-size: 250%;
    font-weight: 500;
    color: #fff;
}
#main.no-bg h1, #main.no-bg h2, #main.no-bg p {
    color: #272727;
}
#main.no-bg ul {
    margin-left: 32px;
}
#main.no-bg li {
    list-style-type: disc;
}
#main.no-bg img {
    max-width: 100%;
}
#main.no-bg .more-button {
    text-align: center;
    background: #000;
    color: #fff;
    width: 100%;
    max-width: 225px;
    padding: 16px 24px;
}
#main .image-stack {
    position: relative;
}
#main .image-stack div.square {
    left: 0;
}
#main .image-stack div.circle {
    position: absolute;
    left: 50%;
    top: -20%;
}
#main .image-stack div.keyhole {
    position: absolute;
    left: 25%;
    top: 25%;
}
#main .image-stack div.square img {
    border-radius: 32px;
}
#main .image-stack div.circle img {
    border-radius: 50%;
} 
#main div.keyhole img, section .keyhole img {
    border-radius: 50% 50% 0 0;
}
#main .image-solo, section .image-solo {
    text-align: right;
}
section img.left {
    padding-right: 16px;
}
#main h3 {
    font-size: 125%;
    font-weight: 600;
    color: #fff;
}
#main p {
    color: #fff;
    padding-bottom: 8px;
}
#main ul.bullets, section ul.bullets {
    margin: 16px 0 0 32px;
}
#main ul.bullets li, section ul.bullets li {
    list-style-type: disc;
    color: #fff;
}
section.white ul.bullets li {
    color: revert;
}
#main a.left {
    margin-right: 16px;
}
#main input, #main textarea, section input, section textarea {
    width: 100%;
    padding: 8px 16px;
    margin-bottom: 16px;
    border: solid 2px #000;
    border-radius: 64px;
}
#main textarea, section textarea {
    border-radius: 32px;
}
#main label, section label {
    display: block;
    font-size: 90%;
    padding: 0 0 4px 8px;
}
#main .field-grid, section.content .field-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding: 0;
}
section.content .field-grid div {
    padding: 0;
    margin: 0;
}
section {
    background: #ecece8;
    padding: 64px 16px;
}
section p, section a {
    color: #fff;
}
section .hero a {
    color: #000;
}
section .hero a.more-button {
    width: 100%;
    max-width: 200px;
}
section.white p {
    color: #272727;
}
section.white a {
    color: #000;
}
section.white a.button {
    color: #fff;
}
section a.more {
    display: block;
    margin-top: 6px;
}
section .grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
    gap: 32px;
    align-items: start;
    max-width: 1440px;
    margin: auto;
}
section#markets .grid {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
}
section#services .grid, section#content {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 32px;
}
section .grid img {
    float: left;
    padding-right: 16px;
}
section .grid h2 {
    text-align: left;
}
section#services .grid h3, section#content .grid h3 {
    font-size: 125%;
    position: relative;
    display: inline-block;
    margin-bottom: 16px;
}
span.highlight {
    position: relative;
    display: inline-block;
}
section#services .grid h3::after, section#content .grid h3::after, span.highlight span::after {
    content: '';
    position: absolute;
    top: 100%; /* Position below the text */
    left: 0;
    width: 100%;
    height: 16px;
    background: none;
    border: 2px solid transparent; /* Invisible border to define curve */
    border-top: 3px solid #333; /* Visible curved underline */
    border-radius: 50% 0 0 0; /* Left side curve and straight right side */
    transform: scaleY(1.2); /* Flatten the curve slightly */
    transform-origin: left; /* Shift the curve's focal point to the left */

}
section#services .grid .more-button, section#content .grid .more-button {    
    background: #000;
    color: #fff;
    width: 100%;
    max-width: 400px;
    padding: 16px 24px;
}
section#services .grid .more-button:hover, section#content .grid .more-button:hover {
    background: #a1afb7;
    color: #666;
}
section#markets img {
    float: none;
    padding-right: 0;
    border-radius: 50%;
}
section#services img, section#content img {
    float: none;
    padding-right: 0;
    border-radius: 32px;
    max-width: 100%;
}
section.content div.grid-75 {
    display: grid;
    grid-template-columns: 1fr 33%;
    gap: 32px;
    max-width: 1440px;
    margin: auto;
    padding: 0;
}
section .grid-75 img {
    max-width: 100%;
}
section.content div.grid-75 div {
    padding: 0;
    margin: 0;
}
section.content div.card-small {
    max-width: 1440px;
    margin: auto;
    padding: 0;
}
section.content div.card-small div {
    background: #fff;
    font-size: 90%;
    padding: 16px;
    max-width: 600px;
    margin: 0;
}
div.card-small div .details {
    display: none;
    font-size: 75%;
}
div.card-small div .details span {
    display: block;
    padding-top: 8px;
}
div.card-small div p {
    color: #272727;
}
section h4 {
    font-size: 200%;
    font-weight: 500;
    color: #fff;
    max-width: 1440px;
    margin: auto;
    padding: 16px 0;
}
section.center h4 {
    font-size: 150%;
}
/*section ul {
    margin-left: 32px;
}*/
section ul li {
    color: #fff;
    list-style: disc;
}
ul.collapse-list, #main.no-bg ul.collapse-list {
    border-top: solid 1px #959293;
    margin-left: 0;
}
ul.collapse-list li, #main.no-bg ul.collapse-list li  {
    border-bottom: solid 1px #959293;
    padding: 8px 0 16px 0;
    list-style-type: none;
}
section ul.collapse-list ul.bullets {
    margin-top: 0;
}
section ul.collapse-list ul.bullets li {
    padding: 0 0 8px 0;
    border-bottom: none;
}
ul.collapse-list li a {
    display: block;
    font-size: 125%;
}
ul.collapse-list li a.button {
    display: inline-block;
    font-size: 100%;
}
ul.collapse-list li a span {
    float: right;
}
ul.collapse-list img {
    max-width: 100%;
}
/*#content {    
   padding: 0 16px;
    padding-top: 200px;
    min-height: 840px;
}*/
#content div {    
    max-width: 1440px;
    margin: auto;
}
#content h1 {
    width: 100%;
    text-align: center;
    font-size: 200%;
    font-weight: 500;
}
#content h2 {
    font-size: 150%;
}
#content img {
    max-width: 50%;
}
/*section.content {
    padding-top: 250px;
    margin-top: -190px;
}*/
section h2 {
    text-align: center;
    font-size: 250%;
    font-weight: 500;
}
section.white {
    background: #fff;
    margin: auto;
}
section.white .grid {
    padding: 16px 0;
}
section.white .grid div {
    padding: 0;
}
section.content.white {
    margin-top: 0;
    padding-top: 0;
}
section.content h1 {
    display: inline-block;
    color: #fff;
    font-size: 200%;
    font-weight: 700;
    padding: 0 0 8px 0;
    margin-bottom: 24px;
    border-bottom: solid 2px #fff;
}
section.content h2, section.content h3, section.content h4 {
    color: #fff;
    font-size: 175%;
    font-weight: 500;
    padding: 0;
}
section.white h2, section.white h3, section.white h4 {
    color: #272727;
}
section.content .collapse-list h2 {
    text-align: left;
}
section.content h5 {
    font-size: 175%;
    font-weight: 500;
    padding: 0;
}
section.content p.head {
    font-size: 150%;
    font-weight: 500;
    padding: 0;
}
section.content div {
    max-width: 1440px;
    margin: auto;
    padding: 32px 16px;
}
section.content div.no-padding {
    padding: 16px 0;
}
section.content div.grid {
    max-width: 1440px;
}
section.content div.grid div {
    margin: 0;
}
section.card div.grid div {
    background: #fff;
}
section.white.card div.grid {
    align-items: stretch;
}
section.white.card div.grid div {
    
    padding: 32px;
}
section.card div.grid div p {
    color: #272727;
}
section.card div.grid div a {
    color: #000;
}
section.card div.grid div a.more-button {
    color: #fff;
}
section.card div.grid div img {
    float: none;
}
section.card-small div.grid div {
    border: solid 1px #272727;
    padding: 16px;
}
.collapse-list .details {
    display: none;
    padding: 16px 0;
}
.collapse-list .details.open {
    display: block;
}
.collapse-list .details span {
    padding-top: 8px;
}
section.content p.subhead {
    font-size: 120%;
    font-weight: 500;
}
section.content p.subhead-light {
    color: #aaa;
    font-weight: 500;
    padding-top: 64px;
}
section.content p.border {
    padding-bottom: 64px;
    border-bottom: solid 1px #aaa;
}
section .iframe-container {
    position: relative;
    overflow: hidden;
    width: 100%;
    padding-top: 45%;
}
section .responsive-iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
/*SLIDER*/
.holder {
    opacity: 0;
    visibility: hidden;
}
section.content .slidewrap, #content .slidewrap {
    position: relative;
    max-width: 800px;
    margin: auto;
    padding: 0;
}
.slide {
    position: absolute;
    top: 0;
    display: none;
    text-align: center;
}
section.content .slidewrap img, #content .slidewrap img {
    max-width: 100%;
}
.slide:first-of-type {
    display: block;
}

footer {
    border-top: solid 1px #959293;
    
    padding: 16px;
}
footer .grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    justify-items: center;
    gap: 32px;
    max-width: 1440px;
    margin: auto;
}
footer .bold {
    font-size: 110%;
}
footer a img {
    width: 30px;
    height: auto;
}

@media screen and (max-width: 1439px) { 
    #header-grid {
        padding: 0;
        gap: 8px;
    }
    header nav li {
        font-size: 85%;
    }
    #main {
        background-size: cover;
    }
}
@media screen and (max-width: 1023px) { 
    #header-grid {
        display: block;
    }    
    #iso {
        padding: 0 8px 8px 0;
    }
    #iso li {
        display: inline;
    }
    #iso li span {
        display: inline;
    }
    #logo {
        text-align: center;
    }
    #logo img {
        width: 300px;
        margin: auto;
    }
    header nav {
        padding: 0 8px 8px 8px;
    }
    header nav ul {
        text-align: center;
    }
    header nav ul.left, header nav ul.right {
        float: none;
        padding-top: 0;
    }
    #main .hero {
        padding-top: 185px;
    }
}
@media screen and (max-width: 799px) {  
    #main .grid {
        display: block;
        background: rgba(0,0,0,.6);
        padding: 16px;
    }
    #main.no-bg .grid {
        background: transparent;
    }
    #content h1 {
        background: #fff;
        font-size: 150%;
        padding-bottom: 16px;
    }
    #content img {
        max-width: 100%;
    }
    section .grid, section.content div.grid-75 {
        display: block;
    }
    section .grid div, section.content div {
        padding: 16px 8px;
    }
    section.content h2, section.content h3, section.content h4, section.content h5 {
        font-size: 150%;
    }
    section.white .grid div {
        padding: 8px 0;
    }
    section.card div.grid div, section.card-small div.grid div {
        margin: 8px 0;
    }
    footer .grid {
        display: block;
        text-align: center;
    }
    footer .grid div {
        padding: 8px 0;
    }
}
@media screen and (max-width: 499px) { 
    header #topnav ul {
        padding: 0 2px;
    }   
    header nav li {
        padding: 0 4px;
        font-size: 75%;
    }
    header nav li ul.dropdown-menu {
        right: -32px;
    }
    #main .grid, #content .grid {
        display: block;
    }
    #main h1, #main h2 {
        font-size: 175%;
    }
}
@media screen and (max-width: 399px) { 
    #main {
        padding-top: 32px;
    }
}