@import url('https://fonts.googleapis.com/css2?family=Lexend+Exa&display=swap');

/* root is defining the colors and shadows variables */

:root { --white: #fff; --light: #eee; --bluish: #00ffbb; --purple: #b500ff; --cat: #ffb500; --dark: #181818; --shadow: 0 1rem 2rem rgba(0,0,0,0.05), 0 0.6rem 0.6rem rgba(0,0,0,0.05); --bored: #bf1e2e; --boredtransparent: rgba(191,30,46,0.75); --bodark: #353a3e; --bodarktransparent: rgba(53,58,62,0.75); --d: 700ms; --e: cubic-bezier(0.19, 1, 0.22, 1); }

* { margin: 0; padding: 0; box-sizing: border-box; }

html { box-sizing: border-box; font-size: 62.5%; scroll-behavior: smooth; }

/* Responsive font size codes */


@media (max-width: 1920px) {
    html { font-size: 60%; }
}

@media (max-width: 1365px) {
    html { font-size: 60%; }
}


/* body css is written in grid, and the page wrapper is inside 'main' grid-area,header in 'header', and footer in 'footer' */


body { width: 100%; font-family: 'Helvetica', sans-serif; font-size: 1.2rem; font-weight: 400; line-height: 1.4; color: var(--dark); background-color: var(--light); display: grid; grid-template-areas: "header header header"
        "left main right"
        "footer footer footer"; grid-template-columns: 1fr 3fr 1fr; /* This code prevent text selection */ -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none; -o-user-select: none; }



@media (max-width: 1550px) {
    html { font-size: 60%; }
    body { grid-template-columns: 1fr 30fr 1fr; }
}

#header { background-color: white; width: 100%; height: 100vh; grid-area: header; display: flex; flex-direction: row; }

@media (max-width: 1550px) {
    #header { height: 60vh; }
}


/* Slideshow container */
.slideshow-container { display: block; width: 100%; height: 100%; overflow: hidden; position: relative; margin: auto; text-align: center; }

    .slideshow-container .mySlides img { width: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }

/* Caption text */
.text { color: #f2f2f2; font-size: 15px; padding: 8px 12px; position: absolute; bottom: 8px; width: 100%; text-align: center; }

/* Number text (1/3 etc) */
.numbertext { color: #f2f2f2; font-size: 12px; padding: 8px 12px; position: absolute; top: 0; }

/* The dots/bullets/indicators */


.active { background-color: #717171; }

/* Fading animation */
.fade { -webkit-animation-name: fade; -webkit-animation-duration: 1.4s; animation-name: fade; animation-duration: 1.4s; }

@-webkit-keyframes fade {
    from { opacity: .4 }
    to { opacity: 1 }
}

@keyframes fade {
    from { opacity: .4 }
    to { opacity: 1 }
}

/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
    .text { font-size: 11px }
}

#nav-bar { display: grid; grid-template-areas: ". logo-nav main-nav ."; grid-template-columns: 1fr 1fr 2fr 1fr; grid-template-rows: 12rem; width: 100%; height: 12rem; background-color: var(--bodarktransparent); position: fixed; z-index: 200; }

@media (max-width: 1550px) {
    #nav-bar { grid-template-columns: 1fr 10fr 20fr 1fr; }
}

#nav-box { grid-area: main-nav; display: flex; flex-direction: column; width: 100%; height: 100%; align-items: center; justify-content: flex-end; font-size: 1rem; }

#nav-first-row { grid-area: main-nav; display: flex; flex-direction: row; width: 100%; height: 40%; align-items: center; justify-content: flex-end; font-size: 15px; font-style: inherit; font-weight: inherit; padding-top: 4rem; }

#mobile-nav-menu { display: none; /* this line disables the nav menu drop down for desktop (it's active on mobile-web) */ }

#nav-second-row { grid-area: main-nav; display: flex; flex-direction: row; width: 100%; height: 60%; align-items: center; justify-content: flex-end; font-size: 15px; font-style: inherit; font-weight: inherit; }

#nav-logo { grid-area: logo-nav; margin-right: auto; height: 100%; width: 100%; }

    #nav-logo img { width: 100%; height: 100%; }


.nav-a { padding-right: 4rem; padding-left: 4rem; color: var(--light); padding: 2rem; display: block; text-decoration: none; }

    .nav-a:hover { color: var(--bored); }

.language-dropbtn { background-color: #fff; color: var(--bodark); padding-right: 1.6rem; padding-left: 1.6rem; font-size: 15px; border: none; }

.language-dropdown { position: relative; display: inline-block; }

.language-dropdown-content { display: none; position: absolute; background-color: #bf1e2e; min-width: 7.1rem; box-shadow: 0px 0.8rem 1.6rem 0px rgba(0,0,0,0.2); z-index: 1; right: 0; }

    .language-dropdown-content a { color: #fff; padding: 1.2rem 1.6rem; text-decoration: none; display: block; }

        .language-dropdown-content a:hover { background-color: rgba(53,58,62,0.75); }

.language-dropdown:hover .language-dropdown-content { display: block; }

.language-dropdown:hover .language-dropbtn { background-color: #fff; color: #353a3e }


.second-nav-a { padding-right: 4.5rem; padding-left: 4.5rem; color: var(--light); padding: 1.5rem; display: block; text-decoration: none; }

    .second-nav-a:hover { background-color: var(--boredtransparent); color: var(--bodark); }

#challenge-effect { transition: 1s; }
    #challenge-effect:hover { background-color: 0 0 5px #ffee10; color: #ffee10; text-shadow: 0 0 5px #ffee10; transition: 1s; }

.our-machinery-dropbtn { background-color: rgba(53,58,62,0.75); color: white; padding: 1.6rem; font-size: 15px; border: none; }

.our-machinery-dropdown { position: relative; display: inline-block; }

.our-machinery-dropdown-content { display: none; position: absolute; background-color: #bf1e2e; min-width: 16rem; box-shadow: 0px 0.8rem 1.6rem 0px rgba(0,0,0,0.2); z-index: 1; }

    .our-machinery-dropdown-content a { color: #fff; padding: 1.2rem 1.6rem; text-decoration: none; display: block; }

        .our-machinery-dropdown-content a:hover { background-color: rgba(53,58,62,0.75); }

.our-machinery-dropdown:hover .our-machinery-dropdown-content { display: block; }

.our-machinery-dropdown:hover .our-machinery-dropbtn { background-color: #fff; color: #353a3e }



#bot-nav-bar { display: grid; grid-template-areas: "left-nav center-nav right-nav"; grid-template-columns: 1fr 3fr 1fr; width: 100%; height: 12rem; background-color: var(--bodarktransparent); position: absolute; margin-top: auto; align-self: flex-end; }

#bot-nav-box { grid-area: center-nav; display: flex; flex-direction: row; width: 100%; height: 100%; align-items: center; justify-content: space-around; font-size: 1rem; }

.bot-nav-but { display: flex; flex-direction: column; width: 100%; height: 100%; align-items: center; justify-content: center; }

.bot-nav-a { color: var(--light); font-size: 20px; font-style: inherit; font-weight: inherit; text-decoration: none; width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; margin: auto; }

    .bot-nav-a:hover { background-color: var(--boredtransparent); color: var(--bodark); }

.fas { color: white; }

.center-nav-container { display: flex; width: 100%; height: 15rem; position: absolute; margin-bottom: 18rem; align-self: flex-end; align-items: center; justify-content: center; }

.center-nav-box { width: 50%; height: 80%; position: relative; display: flex; flex-direction: row; }

#contact-but { color: var(--light); font-weight: lighter; width: 40%; display: flex; align-items: center; justify-content: center; }

    #contact-but a { text-decoration: none; color: white; font-size: 4rem; background-color: var(--bored); height: 100%; width: 100%; display: flex; align-items: center; justify-content: center; }

        #contact-but a:hover { background-color: var(--boredtransparent); }

/* 'details' and all the child elements are bulding the 'select website' box in the header */

details { position: relative; width: 100%; font-family: 'Helvetica', sans-serif; font-size: 2.8rem; font-weight: lighter; z-index: 100; }

    details[open] { z-index: 301; }

summary { padding: 1rem; cursor: pointer; border-radius: 1px; background-color: #ddd; list-style: none; height: 100%; background-color: var(--light); text-align: center; display: flex; align-items: center; justify-content: center; }

.summary-text { position: relative; color: var(--bored); }

summary::-webkit-details-marker { display: none; }

details[open] summary:before { content: ''; display: block; width: 100vw; height: 100vh; background: transparent; position: fixed; top: 0; left: 0; }

ul { width: 100%; background: var(--light); position: absolute; left: 0; padding: 1rem; margin: 0; box-sizing: border-box; border-radius: 1px; max-height: 25rem; overflow-y: auto; overflow-x: hidden; font-size: 0.8em; bottom: 100%; /* This Line turns the dropdown to a dropup~! */ display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; }

details ul li { margin: 0; padding: 1rem 0; border-bottom: 1px solid #ccc; width: 100%; }

    details ul li:hover { border-bottom: 1px solid var(--bored); }

        details ul li:hover #li-span { display: none; }

    details ul li:first-child { padding-top: 0; border-top: none; }

    details ul li:last-child { padding-bottom: 3rem; }

.dropdown-a { text-decoration: none; color: var(--dark); width: 100%; }

    .dropdown-a:hover { color: var(--bored) }

/* 'page-wrapper' is written in column-grid which is named 1, 2, 3,... --- every 'section' is placed in one of these grid-areas*/

#page-wrapper { background-color: var(--light); grid-area: main; display: grid; grid-template-areas: "1"
        "2"
        "3"
        "4"; }

#introduction-sec { background-color: var(--light); height: auto; grid-area: 1; display: grid; grid-template-areas: "a1 b1 c1"
        "a2 a2 c1"; grid-template-rows: 1fr 0.5fr; grid-template-columns: 1fr 1fr 1fr; grid-gap: 2rem; padding: 2rem; }

.products-intro-box { display: contents; }

.product-intro { display: flex; flex-direction: column; height: 100%; background-color: white; flex-wrap: nowrap; overflow: hidden; }

.product-intro-image { display: block; transition: transform .6s; }

    .product-intro-image:hover { transform: scale(1.05); transform-origin: 50% 50%; z-index: 100; }

    .product-intro-image img { width: 100%; }

.text-prev { overflow: hidden; padding: 1rem; background-color: white; z-index: 101; font-size: 16px; }

.product-title { font-size: 20px; font-weight: bold; padding: 1rem; text-decoration: none; color: var(--bodark); }

    .product-title:hover { color: var(--bored); }

.text-prev p { display: block; height: auto; width: 100%; display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; }

#who-we-are { grid-area: c1; }

    #who-we-are img { height: 100%; width: 100%; }

#intro-video { grid-area: a2;position:relative; }

#selected-blog-sec { grid-area: 2; display: flex; flex-direction: column; }

.selected-blog-box { background-color: var(--white); display: flex; flex-direction: row; margin-bottom: 3rem; height: 35rem; }

    .selected-blog-box img { width: 35%; height: 100%; object-fit: contain; margin-left: 2rem; }

    .selected-blog-box .blog-text-box { display: flex; flex-direction: column; padding: 2rem; width: 65%; }

        .selected-blog-box .blog-text-box h { font-size: 20px; font-weight: bold; text-align: center; }

        .selected-blog-box .blog-text-box p { font-size: 16px; padding-left: 1rem; padding-top: 1rem; text-align: justify; display: block; height: auto; width: 100%; display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; }

        .selected-blog-box .blog-text-box .read-more { text-align: right; font-size: 1.5rem; margin-top: 3rem; margin-bottom: 2rem; margin-right: 2rem; }

.read-more { text-align: right; font-size: 1.5rem; display: flex; justify-content: flex-start; align-items: center; margin-left: 2rem; margin-bottom: 1rem; }

.read-more-but { position: relative; display: inline-block; cursor: pointer; outline: none; border: 0; vertical-align: middle; text-decoration: none; background: transparent; padding: 0; font-size: inherit; font-family: inherit; width: 20rem; height: auto; }

    .read-more-but .circle { position: relative; display: block; margin: 0; width: 100%; height: 4rem; background: var(--bored); border-radius: 1.625rem; }

        .read-more-but .circle .icon { transition: all 250ms; position: absolute; top: 0; bottom: 0; margin: auto; background: #fff; }

            .read-more-but .circle .icon.arrow { transition: all 250ms; left: 0.625rem; width: 1.125rem; height: 0.125rem; background: none; }

                .read-more-but .circle .icon.arrow::before { position: absolute; content: ''; top: -0.28rem; right: 0.0625rem; width: 0.625rem; height: 0.625rem; border-top: 0.125rem solid #fff; border-right: 0.125rem solid #fff; transform: rotate(45deg); }

    .read-more-but .button-text { transition: all 250ms; position: absolute; top: 0; left: 0; right: 0; bottom: 0; padding: 0.75rem 0; margin: 0 0 0 1.85rem; color: #fff; font-weight: 700; line-height: 1.6; text-align: center; text-transform: uppercase; }

    .read-more-but:hover .circle { width: 100%; }

        .read-more-but:hover .circle .icon.arrow { background: #fff; transform: translate(1rem, 0); }

    .read-more-but:hover .button-text { color: #fff; }

#features-sec { padding: 2rem; height: auto; width: 100%; grid-area: 3; display: flex; flex-direction: column; background: white; }

.features-box { height: 40rem; width: 100%; background-color: white; display: flex; flex-direction: row; margin-bottom: 2rem; }

.page-content { display: grid; grid-gap: 1rem; padding: 1rem; width: 100%; margin: 0 auto; }

@media (max-width: 768px) {
    .page-content { grid-template-rows: repeat(4, 1fr); width: 100%; }
}

@media (min-width: 800px) {
    .page-content { grid-template-columns: repeat(4, 1fr); }
}

.card { position: relative; display: flex; align-items: flex-end; overflow: hidden; padding: 1rem; width: 100%; text-align: center; color: whitesmoke; background-color: whitesmoke; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1), 0 2px 2px rgba(0, 0, 0, 0.1), 0 4px 4px rgba(0, 0, 0, 0.1), 0 8px 8px rgba(0, 0, 0, 0.1), 0 16px 16px rgba(0, 0, 0, 0.1); }

@media (min-width: 600px) {
    .card { height: auto; }
}

.card:before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 110%; background-size: cover; background-position: 0 0; transition: transform calc(var(--d) * 1.5) var(--e); pointer-events: none; }

.card:after { content: ''; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 200%; pointer-events: none; background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.009) 11.7%, rgba(0, 0, 0, 0.034) 22.1%, rgba(0, 0, 0, 0.072) 31.2%, rgba(0, 0, 0, 0.123) 39.4%, rgba(0, 0, 0, 0.182) 46.6%, rgba(0, 0, 0, 0.249) 53.1%, rgba(0, 0, 0, 0.320) 58.9%, rgba(0, 0, 0, 0.394) 64.3%, rgba(0, 0, 0, 0.468) 69.3%, rgba(0, 0, 0, 0.540) 74.1%, rgba(0, 0, 0, 0.607) 78.8%, rgba(0, 0, 0, 0.668) 83.6%, rgba(0, 0, 0, 0.721) 88.7%, rgba(0, 0, 0, 0.762) 94.1%, rgba(0, 0, 0, 0.790) 100%); transform: translateY(-50%); transition: transform calc(var(--d) * 2) var(--e); }

.card:nth-child(1):before { background-image: url(../images/ease-of-use.jpg); }

.card:nth-child(2):before { background-image: url(../images/ease-of-maintenance.jpg); }

.card:nth-child(3):before { background-image: url(../images/job-security.jpg); }

.card:nth-child(4):before { background-image: url(../images/performance-efficiency.jpg); }

.content { position: relative; display: flex; flex-direction: column; align-items: center; width: 100%; padding: 1rem; transition: transform var(--d) var(--e); z-index: 1; }

    .content > * + * { margin-top: 1rem; }

.title { font-size: 1.8rem; font-weight: bold; line-height: 1.2; }

.copy { text-align: left; font-size: 1.8rem; line-height: 1.35; padding-top: 1rem; }

@media (hover: hover) and (min-width: 600px) {
    .card:after { transform: translateY(0); }
    .content { transform: translateY(calc(100% - 4.5rem)); }
        .content > *:not(.title) { opacity: 0; transform: translateY(1rem); transition: transform var(--d) var(--e), opacity var(--d) var(--e); }
    .card:hover, .card:focus-within { align-items: center; }
        .card:hover:before, .card:focus-within:before { transform: translateY(-4%); }
        .card:hover:after, .card:focus-within:after { transform: translateY(-50%); }
        .card:hover .content, .card:focus-within .content { transform: translateY(0); }
            .card:hover .content > *:not(.title), .card:focus-within .content > *:not(.title) { opacity: 1; transform: translateY(0); transition-delay: calc(var(--d) / 8); }
            .card:focus-within:before, .card:focus-within:after, .card:focus-within .content, .card:focus-within .content > *:not(.title) { transition-duration: 0s; }
}

.more-features-box { height: auto; width: 100%; margin-bottom: 2rem; display: flex; flex-direction: row; }

.catalogue-box { width: 100%; display: flex; flex-direction: column; }

.catalogue-title { text-align: center; font-size: 2rem; margin: 2rem; margin-top: 3rem; margin-bottom: 0; }

    .catalogue-title h { font-size: 20px; font-weight: bold; }

    .catalogue-title p { text-align: left; margin: 16px; }

.catalogue { margin: 2rem; margin-bottom: 0; }

.catalogue-box p { text-align: left; font-size: 16px; margin: 2rem; }

a[download] { background-color: transparent; border-bottom: 1px solid rgba(191, 30, 46, 0.65); box-shadow: inset 0 -0.4rem 0 rgba(191, 30, 46, 0.65); color: var(--bored); font-size: 1.25em; font-weight: 500; letter-spacing: 0.025em; text-decoration: none; transition: box-shadow ease-in-out 125ms; }

    a[download]:focus, a[download]:hover { border-bottom: none; box-shadow: none; transition: box-shadow ease-in-out 125ms; }

.catalogue-dl-box { display: flex; width: 100%; color: var(--bodark); font-size: 20px; font-weight: 400; }

    .catalogue-dl-box:hover .catalogue-poster { transform: rotate(0); transform: scale(1.15); transition: transform ease-in-out 500ms; }

    .catalogue-dl-box p { margin: 0; }

.catalogue-poster { box-shadow: 0 10px 30px -15px rgba(30, 33, 36, 0.85); height: 22rem; width: auto; margin: 5rem; transform: rotate(-3deg); transition: transform ease-in-out 125ms; }

.catalogue-instructions { display: flex; flex-direction: column; justify-content: center; line-height: 1.25; margin-left: 1.5rem; max-width: 30ch; }

.catalogue-download-duration { padding-top: 0.75em; }

.catalogue-dl-box small { font-size: 0.85em; }

#customers-sec { background-color: var(--light); width: 100%; height: auto; display: flex; flex-direction: row; grid-area: 4; padding: 1rem; }

.customers-box { width: 100%; background-color: var(--white); margin: 1rem; display: flex; flex-direction: column; transition: transform 330ms ease-in-out; }

    .customers-box img { width: 100%; }

    .customers-box:hover { transform: scale(1.01); box-shadow: var(--shadow); }

    .customers-box h { font-size: 20px; padding: 1rem; padding-bottom: 0; font-weight: bold; color: var(--bodark); text-align: center; }

    .customers-box p { padding: 1rem; padding-top: 1rem; padding-bottom: 3rem; font-size: 16px; color: var(--bodark); text-align: justify; }

#who-we-are-mobile { display: none; }

#intro-video-mobile { position: relative; display: none; }

#footer { grid-area: footer; width: 100%; height: auto; display: grid; grid-template-areas: ". center-footer ."; grid-template-columns: 1fr 3fr 1fr; background-color: var(--bodark); margin-top: 3rem; }

@media (max-width: 1550px) {
    #footer { grid-template-columns: 1fr 10fr 1fr; }
}

.footer-container { grid-area: center-footer; display: flex; flex-direction: column; height: auto; width: 100%; }

    .footer-container a { color: cyan; }

        .footer-container a:hover { color: var(--bored); }

.footer-container-top { width: 100%; height: auto; display: flex; flex-direction: row; font-size: 13px; color: var(--white); }

.footer-titles { font-size: 16px; font-weight: bold; padding-bottom: 1rem; color: var(--white); padding-top: 1rem; }

.footer-box-1 { padding: 1rem; width: 100%; height: auto; display: flex; flex-direction: column; }

.footer-box-2 { padding: 1rem; width: 100%; height: auto; display: flex; flex-direction: column; }

.footer-box-3 { padding: 1rem; width: 100%; height: auto; display: flex; flex-direction: column; }

.footer-box-4 { padding: 1rem; width: 100%; height: auto; display: flex; flex-direction: column; flex-wrap: wrap; }

.footer-box-5 { display: none; }

.social-media-box { width: 100%; height: auto; align-self: flex-start; display: flex; flex-direction: row; }

.social-media-box { margin: 0; padding: 1rem 0; border-bottom: 1px solid #ccc; }

    .social-media-box:hover { border-bottom: 1px solid var(--bored); }

        .social-media-box:hover #li-span { display: none; }

    .social-media-box:first-child { padding-top: 0; border-top: none; }

    .social-media-box:last-child { padding-bottom: 3rem; }

    .social-media-box .fa { color: var(--white); font-size: 3rem; padding: 2rem; width: 100%; align-self: center; text-decoration: none; background-color: var(--bored); }

        .social-media-box .fa:hover { color: white; background-color: var(--bodark); }

.footer-container-bot-links { display: flex; flex-direction: row; justify-content: space-between; }

    .footer-container-bot-links img { width: 20rem; height: auto; align-self: center; padding: 1rem; }

.footer-site-info { display: flex; flex-direction: row; justify-content: flex-end; align-items: center; }

    .footer-site-info a { color: var(--white); padding: 1rem; }

        .footer-site-info a:hover { color: var(--bored); padding: 1rem; }

.mobile-bot-navigation { display: none; }