@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 10px 20px rgba(0,0,0,0.05), 0 6px 6px 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 { width: 100%; }

/* Responsive font size codes */

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

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

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

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

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

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

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

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

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

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


/* 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%; overflow-x: hidden; 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"
        "main"
        "footer"; /* This codes prevent text selection */ -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none; -o-user-select: none; }

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

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

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

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

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

/* Caption text */
.text { color: #f2f2f2; font-size: 1.5rem; padding: 0.8rem 1.2rem; position: absolute; bottom: 0.8rem; width: 100%; text-align: center; }

/* Number text (1/3 etc) */
.numbertext { color: #f2f2f2; font-size: 1.2rem; padding: 0.8rem 1.2rem; 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: 1.1rem }
}

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

@media (max-width: 428px) {
    #nav-bar { height: 40px; grid-template-rows: 40px; }
}

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

#nav-first-row { grid-area: main-nav; display: flex; flex-direction: row; width: 100%; height: 100%; align-items: center; justify-content: flex-end; font-size: 16px; padding-right: 7rem; }

@media (max-width: 520px) {
    #nav-first-row { font-size: 14px; }
}

@media (max-width: 428px) {
    #nav-first-row { margin-right: 50px; }
}

@media (max-width: 320px) {
    #nav-first-row { margin-right: 20px; }
}

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

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

.language-dropdown-content { display: none; position: absolute; background-color: #bf1e2e; min-width: 100%; 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 }


#nav-second-row { display: none; }

#mobile-nav-menu { display: flex; height: 100%; }


.menu-wrapper { position: fixed; top: 0; /*left: -100%;*/ right: -100%; height: 100%; width: 100%; background: rgba(53,58,62,0.95); /*background: linear-gradient(90deg, #f92c78, #4114a1);*/ /* background: linear-gradient(375deg, #1cc7d0, #2ede98); */ /* background: linear-gradient(-45deg, #e3eefe 0%, #efddfb 100%);*/ transition: all 0.6s ease-in-out; }

#mobile-menu-active:checked ~ .menu-wrapper { /*left: 0;*/ right: 0; }

.mobile-menu-btn { position: absolute; z-index: 502; right: 2rem; /*left: 20px; */ top: 2rem; height: 5rem; width: 5rem; text-align: center; line-height: 5rem; border-radius: 50%; font-size: 2rem; cursor: pointer; /*color: #fff;*/ /*background: linear-gradient(90deg, #f92c78, #4114a1);*/ /* background: linear-gradient(375deg, #1cc7d0, #2ede98); */ /* background: linear-gradient(-45deg, #e3eefe 0%, #efddfb 100%); */ transition: all 0.3s ease-in-out; }

    .mobile-menu-btn span,
    .mobile-menu-btn:before,
    .mobile-menu-btn:after { content: ""; position: absolute; top: calc(50% - 1px); left: 30%; width: 40%; border-bottom: 2px solid #fff; transition: transform .6s cubic-bezier(0.215, 0.61, 0.355, 1); }

    .mobile-menu-btn:before { transform: translateY(-0.8rem); }
    .mobile-menu-btn:after { transform: translateY(0.8rem); }

@media (max-width: 428px) {
    .mobile-menu-btn:before { transform: translateY(-5px); }
}

@media (max-width: 428px) {
    .mobile-menu-btn:after { transform: translateY(5px); }
}

@media (max-width: 375px) {
    .mobile-menu-btn span,
    .mobile-menu-btn:before,
    .mobile-menu-btn:after { top: 70%; }
}

@media (max-width: 320px) {
    .mobile-menu-btn span,
    .mobile-menu-btn:before,
    .mobile-menu-btn:after { top: 0%; }
}

.mobile-menu-close { z-index: 501; width: 100%; height: 100%; pointer-events: none; transition: background .6s; }

@media (max-width: 428px) {
    .mobile-menu-btn { width: 50px; padding-left: 10px; }
    .mobile-nav-menu { margin-left: 10px; }
}

/* closing animation */
#mobile-menu-active:checked + .mobile-menu-btn span { transform: scaleX(0); }

#mobile-menu-active:checked + .mobile-menu-btn:before { transform: rotate(45deg); border-color: #fff; }

#mobile-menu-active:checked + .mobile-menu-btn:after { transform: rotate(-45deg); border-color: #fff; }

.menu-wrapper ul { position: absolute; width: 100%; top: 10rem; height: 100%; list-style: none; text-align: center; margin-top: auto; margin-bottom: auto; }

    .menu-wrapper ul li { height: 5%; margin: 1.5rem 0; }

@media (max-width: 428px) {
    .menu-wrapper ul { margin: 0; top: 15%; }
}

@media (max-width: 320px) {
    .menu-wrapper ul { margin: 0; top: 5%; }
}

@media (max-width: 428px) {
    .menu-wrapper ul li { padding-bottom: 40px; }
}

.menu-wrapper ul li a { text-decoration: none; font-size: 2rem; font-weight: 500; color: #fff; border-radius: 5rem; line-height: 5rem; opacity: 0; transition: all 0.3s ease; transition: transform .6s cubic-bezier(0.215, 0.61, 0.355, 1); }

@media (max-width: 428px) {
    .menu-wrapper ul li a { font-size: 16px; }
}

input[type="checkbox"] { display: none; }

#mobile-menu-active:checked ~ .menu-wrapper ul li a { opacity: 1; }
.menu-wrapper ul li a { transition: opacity 1.2s, transform 1.2s cubic-bezier(0.215, 0.61, 0.355, 1); transform: translateX(10rem); }
#mobile-menu-active:checked ~ .menu-wrapper ul li a { transform: none; transition-timing-function: ease, cubic-bezier(.1,1.3,.3,1); /* easeOutBack */ transition-delay: .6s; transform: translateX(-10rem); }

#nav-logo { grid-area: logo-nav; margin-right: auto; height: 100%; width: 70%; padding-left: 2rem; }

@media (max-width: 428px) {
    #nav-logo { width: 100%; }
}

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

@media (max-width: 320px) {
    #nav-logo img { width: 100%; height: 4rem; }
}

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

@media (max-width: 320px) {
    .nav-a { padding-right: 0; padding-left: 1rem; }
}

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

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

#bot-nav-bar { display: none; }

.fas { color: white; }

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

@media (max-width: 320px) {
    .center-nav-container { display: none; }
}

.center-nav-box { width: 80%; height: 100%; position: relative; display: flex; flex-direction: row; justify-content: center; align-items: center; }

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

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

@media (max-width: 428px) {
    #contact-but a { font-size: 13px; }
}



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

@media (max-width: 428px) {
    details { font-size: 14px; }
}

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

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

.summary-text { position: relative; color: var(--bored); font-size: 2.5rem; }

@media (max-width: 428px) {
    .summary-text { font-size: 13px; }
}

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

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

details ul { width: 100%; background: var(--light); position: absolute; left: 0; padding: 1rem; margin: 0; box-sizing: border-box; border-radius: 1px; overflow-y: auto; overflow-x: hidden; max-height: 40rem; 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: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%; }

@media (max-width: 428px) {
    .dropdown-a { font-size: 13px; }
}

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


#introduction-sec { width: 100%; background-color: var(--light); height: auto; display: flex; flex-direction: column; grid-gap: 2rem; padding: 2rem; }

@media (max-width: 959px) {
    #introduction-sec { grid-area: 1; width: 100%; }
}

.products-intro-box { display: flex; flex-direction: row; width: 100%; gap: 2rem; }

@media (max-width: 428px) {
    .products-intro-box { flex-direction: column; width: 100%; }
}

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

@media (max-width: 640px) {
    .product-intro { height: 48rem; }
}

@media (max-width: 580px) {
    .product-intro { height: 50rem; }
}

@media (max-width: 520px) {
    .product-intro { height: 54rem; }
}

@media (max-width: 470px) {
    .product-intro { height: 58rem; }
}

@media (max-width: 428px) {
    .product-intro { height: auto; width: 100%; flex-direction: row; }
}

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

@media (max-width: 428px) {
    .product-intro-image { width: 50%; }
}

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

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

@media (max-width: 428px) {
    .text-prev { text-align: center; }
}

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

@media (max-width: 428px) {
    .product-title { display: flex; flex-direction: column; font-size: 16px; }
        .product-title:after { content: "Tap on the image to see the detail."; font-size: 12px; color: grey; padding-top: 2rem; }
}

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

.text-prev h { font-size: 20px; padding: 1rem; }

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

@media (max-width: 428px) {
    .text-prev p { display: none; }
}

@media (max-width: 320px) {
    .product-intro-image { width: 40%; }
    .product-title:after { display: none; }
    .product-title { text-align: center; padding: 0; }
    .product-intro { margin-bottom: 1rem; }
    #introduction-sec:before { content: "Our Products"; font-size: 16px; color: #fff; padding: 1rem; margin-bottom: 1rem; border-radius: 4px; background-color: var(--bored); }
}

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

@media (max-width: 428px) {
    .read-more { display: none; }
}

.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; }




#who-we-are { display: block; }

@media (max-width: 959px) {
    #who-we-are { display: none; }
}

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

#intro-video { display: block; position: relative; }

@media (max-width: 959px) {
    #intro-video { display: none; }
}

#selected-blog-sec { display: none; }

.extra-text { display: none; /* this line deactivates all the texts with .extra-text class through the whole page */ }

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

@media (max-width: 959px) {
    #features-sec { grid-area: 4; }
}

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

@media (max-width: 428px) {
    .features-box { display: none; }
}

.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; }

.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; }

.twitter-box { display: none; }

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

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

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

    .catalogue-title p { font-size: 20px; text-align: left; margin: 3rem; }

.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 { display: none; 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 { grid-area: 3; background-color: var(--light); width: 100%; height: auto; display: flex; flex-direction: row; padding: 1rem; }

@media (max-width: 959px) {
    #customers-sec { grid-area: 2; width: 100%; }
}

@media (max-width: 320px) {
    #customers-sec { grid-area: 2; flex-direction: column; }
        #customers-sec:before { content: "Our Sectors"; font-size: 16px; color: #fff; padding: 1rem; margin-bottom: 1rem; border-radius: 4px; background-color: var(--bodark); }
}

.customers-box { width: 100%; background-color: var(--white); margin: 1rem; display: flex; flex-direction: column; }

@media (max-width: 320px) {
    .customers-box { margin: 0; margin-bottom: 1rem; }
}

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


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

@media (max-width: 428px) {
    .customers-box h { font-size: 16px; }
}

.customers-box p { display: none; }

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

@media (max-width: 959px) {
    #who-we-are-mobile { display: block; grid-area: 5; }
}

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

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

@media (max-width: 959px) {
    #intro-video-mobile { display: block; margin-top: 2rem; padding: 2rem; grid-area: 3; }
}

@media (max-width: 320px) {
    #intro-video-mobile:before { content: "Introduction Video"; font-size: 16px; color: #fff; padding: 1rem; margin-bottom: 1rem; border-radius: 4px; background-color: var(--bodark); }
}

#footer { grid-area: footer; width: 100%; height: auto; background-color: var(--bodark); margin-top: 3rem; margin-bottom: 9rem; padding-left: 2rem; padding-right: 2rem; }

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

    .footer-container a { color: cyan; font-size: 1.5rem; padding-bottom: 1rem; }

@media (max-width: 428px) {
    .footer-container a { font-size: 11px; }
}

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

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

@media (max-width: 428px) {
    .footer-titles { font-size: 16px; }
}

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

@media (max-width: 428px) {
    .footer-box-1 { font-size: 10px; }
}

.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; }

.hs-box { display: none; }

@media (max-width: 428px) {
    .footer-box-3 { display: none; }
}

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

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

.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); text-align: center; }

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

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

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

@media (max-width: 320px) {
    .footer-container-bot-links { flex-direction: column-reverse; }
}

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

@media (max-width: 320px) {
    .footer-container-bot-links img { width: 15rem; }
}

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

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

@media (max-width: 428px) {
    .footer-site-info a { font-size: 8px; }
}

@media (max-width: 320px) {
    .footer-site-info a { font-size: 8px; padding: 0.5rem; display: flex; align-items: center; justify-content: center; }
}

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

.mobile-bot-navigation { height: 9rem; background: linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 0%, rgba(38,42,46,1) 42%, rgba(53,58,62,1) 78%); display: flex; flex-direction: row; position: fixed; bottom: 0; left: 0; width: 100%; overflow: hidden; justify-content: space-around; z-index: 400; border-top: 1px solid white; }

@media (max-width: 428px) {
    .mobile-bot-navigation { height: 40px; }
    .footer-container { margin-bottom: 20px; }
}

@media (max-width: 320px) {
    .mobile-bot-navigation { height: 60px; }
    .footer-container { margin-bottom: 30px; }
}

.mobile-nav-buts { height: 100%; }

    .mobile-nav-buts a { height: 100%; }

        .mobile-nav-buts a img { height: 100%; padding: 1rem; }