@import url("https://fonts.googleapis.com/css?family=Roboto+Condensed:300,400,700&display=swap&subset=cyrillic,greek-ext");

/* GLOBAL */

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

body {
    font-family: Roboto Condensed;
    font-style: normal;
    font-size: 16px;
    overflow-x: hidden;
}

a {
    color: inherit;
    text-decoration: none;
}

.button {
    color: white;
    font-size: 13px;
    font-weight: normal;
    padding: 16px 20px;
    background: #40936e;
    border: 1px solid #40936e;
    border-radius: 2px;
    box-shadow: 1px 2px 2px rgba(0, 0, 0, 0.25);
    transition: 0.5s ease-in-out;
}

.button:hover {
    background: #212121;
    border: 1px solid #212121;
}


/* Navigation bar */

.main-nav {
    position: fixed;
    top: 0;
    width: 100%;
    left: 50%;
    transform: translateX(-50%);
    transition: 0.5s ease-in-out;
    z-index: 999;
}

.nav-wrapper {
    width: 1140px;
    padding: 0 15px;
    height: 70px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 0.5px solid rgba(255, 255, 255, 0.8);
}

.nav-image-wrapper {
    margin: 0;
}

.nav-image-wrapper img {
    height: 40px;
}

.nav-list {
    display: flex;
    color: rgba(255, 255, 255, 0.65);
    font-size: 12px;
    width: 420px;
    margin: 0;
}

.nav-list li {
    display: flex;
    transition: 0.5s ease-in-out;
}

.nav-list li:hover {
    color: white;
}


/* Mobile navigation bar */

.mobile-nav {
    display: none;
}

.mobile-nav {
    position: fixed;
    z-index: 2;
    top: 0rem;
    width: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: white;
    box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.1);
}

.mobile-nav-wrapper {
    width: 760px;
    height: 70px;
    display: flex;
    align-items: center;
    padding: 0 15px;
}

.mobile-nav-image-wrapper {
    margin-left: 0;
}

.mobile-nav-image-wrapper img {
    height: 35px;
}

.hamburger-menu-wrapper {
    height: 20px;
    width: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    cursor: pointer;
    padding: 2px;
    margin: 0;
}

.hamburger-menu-line-1,
.hamburger-menu-line-2,
.hamburger-menu-line-3 {
    width: 16px;
    height: 2px;
    background: #666666;
    transition: 0.5s ease-in-out;
}

.hamburger-menu-wrapper:hover>div {
    background: #000000;
}

.mobile-nav-menu-list {
    position: fixed;
    top: 70px;
    width: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: #ffffff;
    box-shadow: 0px 4px 5px 0px rgba(0, 0, 0, 0.1);
    display: none;
}

.mobile-nav-menu-list-wrapper {
    font-size: 12px;
    color: #999999;
    display: flex;
    flex-direction: column;
    width: 760px;
}

.mobile-nav-menu-list-wrapper li {
    display: flex;
    margin-left: 0;
}

.mobile-nav-menu-list-wrapper li a {
    margin-left: 0;
    width: 760px;
    padding: 16px 20px;
}

.mobile-nav-menu-list-wrapper li:hover {
    color: #000000;
}


/* Header */

header {
    background: url("../images/header-background.jpg");
    background-position: center;
    background-size: cover;
    height: 100vh;
    padding: 70px 15px;
}

.header-wrapper {
    width: 1140px;
    height: 100%;
    overflow-y: hidden !important;
    display: flex;
    align-items: center;
}

.header-content {
    color: white;
    margin-left: 0;
}

.header-content h1 {
    font-size: 48px;
    padding-bottom: 10px;
    padding-top: 70px;
}

.header-content p {
    font-weight: 300;
    font-size: 44px;
    padding-bottom: 10px;
}

.header-btn {
    width: 300px;
    margin: 0;
    padding-top: 15px;
    display: flex;
    justify-content: flex-start;
}

.header-btn h3 {
    color: white;
    font-size: 13px;
    font-weight: bold;
    padding: 16px 20px;
    background: #40936e;
    border: 1px solid #40936e;
    border-radius: 2px;
    box-shadow: 1px 2px 2px rgba(0, 0, 0, 0.25);
    transition: 0.5s ease-in-out;
}

.header-btn a {
    margin: 0;
    margin-right: 20px;
}

.header-about-btn h3:hover,
.header-products-btn h3:hover {
    background: transparent;
    border: 1px solid white;
}


/* About us */

.about-us {
    min-height: calc(100vh - 70px);
    overflow-x: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

.about-wrapper {
    width: 650px;
    padding: 50px 0;
    text-align: center;
}

.about-content h5 {
    font-size: 14px;
    font-weight: 300;
    color: #585858;
    margin-bottom: 24px;
}

.about-content h1 {
    font-size: 24px;
    margin-bottom: 24px;
}

.about-content p {
    color: #666666;
    padding-bottom: 50px;
}

.about-content h2 {
    color: #333333;
    font-size: 18px;
    padding-bottom: 40px;
}

.goods {
    display: flex;
}

.service {
    padding-right: 15px;
}

.service,
.quality {
    display: flex;
    text-align: left;
    width: 50%;
}

.goods h3 {
    color: #40936e;
    font-weight: normal;
    font-size: 16px;
    padding-bottom: 10px;
}

.goods img {
    height: 50px;
    padding-right: 20px;
}

.about-contact-wrapper {
    display: flex;
    justify-content: center;
}


/* Call us now */

.call-us-now-wrapper {
    background-color: #00b894;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='152' height='152' viewBox='0 0 152 152'%3E%3Cg fill-rule='evenodd'%3E%3Cg id='temple' fill='%23ffffff' fill-opacity='0.11'%3E%3Cpath d='M152 150v2H0v-2h28v-8H8v-20H0v-2h8V80h42v20h20v42H30v8h90v-8H80v-42h20V80h42v40h8V30h-8v40h-42V50H80V8h40V0h2v8h20v20h8V0h2v150zm-2 0v-28h-8v20h-20v8h28zM82 30v18h18V30H82zm20 18h20v20h18V30h-20V10H82v18h20v20zm0 2v18h18V50h-18zm20-22h18V10h-18v18zm-54 92v-18H50v18h18zm-20-18H28V82H10v38h20v20h38v-18H48v-20zm0-2V82H30v18h18zm-20 22H10v18h18v-18zm54 0v18h38v-20h20V82h-18v20h-20v20H82zm18-20H82v18h18v-18zm2-2h18V82h-18v18zm20 40v-18h18v18h-18zM30 0h-2v8H8v20H0v2h8v40h42V50h20V8H30V0zm20 48h18V30H50v18zm18-20H48v20H28v20H10V30h20V10h38v18zM30 50h18v18H30V50zm-2-40H10v18h18V10z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    padding: 30px 15px;
    text-align: center;
}

.call-us-now-content {
    color: white;
}

.call-us-now-content h1 {
    font-size: 28px;
    padding-bottom: 20px;
    text-transform: capitalize;
    font-weight: normal;
}

.call-us-now-content h2 {
    font-size: 26px;
    font-weight: normal;
}


/* Products */

#products {
    padding: 50px 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.products-section-wrapper {
    width: 1140px;
    display: grid;
    grid-template-columns: repeat(auto-fit, 240px);
    grid-column-gap: 10px;
    grid-row-gap: 20px;
    justify-content: center;
}

.product-wrapper p {
    font-family: Roboto condensed;
    font-size: 16px;
    font-weight: 500;
    color: #444444;
}

.product-images img {
    width: 100%;
    border: 1px #666666 solid;
    transition: .3s all ease-in-out;
}

.product-images img:hover {
    filter: saturate(110%) contrast(110%);
    transform: scale(.980);
}

.color-boxes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(30px, 1fr));
    grid-column-gap: 8px;
    grid-template-rows: 25px;
    cursor: pointer;
}

.box-color {
    border: 0.5px #666666 solid;
    margin: 0;
    border-radius: 2px;
}

.ocean-blue {
    background: #00a8ff;
}

.green-spring {
    background: #4cd137;
}

.pink-floral {
    background: #f368e0;
}

.purple-classic {
    background: #6c5ce7;
}

.yellow-citron {
    background: yellow;
}

.mixed-colors {
    background-image: linear-gradient( to right top, #00a8ff, #50a1ff, #7e99ff, #a68dff, #ca7ff9, #ea6cd6, #fb5db0, #ff5789, #ff6c4e, #ea9200, #b1b600, #4cd137);
}

.green-yellow {
    background-image: linear-gradient( to right top, #4cd137, #7fde29, #aaea19, #d5f506, #ffff00);
}

.product-wrapper p {
    text-align: center;
    padding: 5px 0;
}

.capacity {
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 2px;
    text-align: justify;
}

.capacity:hover {
    color: white;
    background: #40936e;
    border: 1px solid #40936e;
    box-shadow: 1px 2px 2px rgba(0, 0, 0, 0.25);
    transition: 0.5s ease-in-out;
}


/* Products */


/* Location */

.location-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    overflow-x: hidden;
}

.location-map-wrapper {
    width: 100%;
}

.location-map-wrapper>iframe {
    width: 100%;
    height: 500px;
}

.location-content-wrapper {
    width: 100%;
    background-color: #191919;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3E%3Cg fill='%23ffffff' fill-opacity='0.02'%3E%3Cpath fill-rule='evenodd' d='M0 0h4v4H0V0zm4 4h4v4H4V4z'/%3E%3C/g%3E%3C/svg%3E");
    color: white;
    padding: 50px 20px;
    display: flex;
    justify-content: center;
    align-content: center;
}

.location-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.location-content h1 {
    font-size: 26px;
    padding: 0 0 26px 0;
    margin-left: 0;
}

.location-content p,
.location-content h2 {
    font-size: 14px;
    font-weight: normal;
}

.location-content h2 {
    padding: 0 0 26px 0;
    max-width: 400px;
    margin-left: 0;
}

.location-content p {
    width: 130px;
    margin-left: 0;
}


/* Contact */

#contact {
    padding: 0 15px;
}

.contact-wrapper {
    padding: 150px 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.contact-content {
    display: flex;
    width: 1140px;
}

.contact-details {
    flex: 1;
    padding-right: 150px;
}

.contact-details h1 {
    font-size: 32px;
    font-weight: normal;
}

.contact-details p {
    font-size: 15px;
    line-height: 153%;
    color: #666666;
    font-weight: normal;
}

.contact-form {
    flex: 2;
}


/* Email form */

.contact-form-first-container,
.contact-form-second-container {
    display: flex;
    justify-content: space-between;
}

input[type="text"],
select,
textarea {
    width: 100%;
    padding: 16px 20px;
    background: #f4f4f4;
    border-radius: 4px;
    border: none;
    margin-top: 6px;
    margin-bottom: 16px;
    resize: vertical;
}

#subject {
    height: 130px !important;
}

#f-name,
#l-name,
#number,
#email {
    width: 45%;
    margin-left: 0;
    margin-right: 0;
}

input[type="submit"] {
    color: white;
    font-size: 13px;
    font-weight: normal;
    font-family: Roboto Condensed;
    padding: 16px 20px;
    background: #40936e;
    border: 1px solid #40936e;
    border-radius: 2px;
    box-shadow: 1px 2px 2px rgba(0, 0, 0, 0.25);
    transition: 0.5s ease-in-out;
    cursor: pointer;
}

input[type="submit"]:hover {
    background: #212121;
    border: 1px solid #212121;
}


/* Footer */

footer {
    background: #212121;
    padding: 100px 0;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

footer h1 {
    font-size: 16px;
    color: white;
    padding-bottom: 17px;
}

footer p {
    font-weight: 300;
    font-size: 14px;
    color: #999999;
    padding-bottom: 25px;
    line-height: 200%;
}

footer h2 {
    font-weight: 300;
    font-size: 14px;
    color: #999999;
}