/* =========================================================
    BASE / GLOBAL STYLES
========================================================= */

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    color: #444;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 15px;
}

section {
    padding: 25px 0;
}

a {
    color: #0099f7;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

textarea {
    resize: none;
}

iframe {
    width: 100%;
}

*:focus-visible {
    outline: 0;
}


/* =========================================================
    FORMS / INPUTS
========================================================= */

input[type="text"],
input[type="password"],
input[type="email"],
input[type="submit"],
textarea,
select,
button {
    padding: 0.5rem;
    border: 1px solid #eee;
    background: none;
}

input[type="submit"],
button {
    cursor: pointer;
}


/* =========================================================
    TYPOGRAPHY
========================================================= */

.font-serif { font-family: serif; }
.font-sans { font-family: sans-serif; }

.font-bold { font-weight: bold; }

.white-text,
.text-white {
    color: #fff;
}

.text-right { text-align: right; }
.text-left { text-align: left; }
.text-center { text-align: center; }
.text-justify { text-align: justify; }


/* =========================================================
    UTILITIES
========================================================= */

.float-right {
    float: right;
}

.border {
    border: 1px solid #eee;
}

.bg-white {
    background-color: #fff;
}


/* Opacity scale */
.opacity-0 { opacity: 0; }
.opacity-5 { opacity: 0.05; }
.opacity-10 { opacity: 0.1; }
.opacity-15 { opacity: 0.15; }
.opacity-20 { opacity: 0.2; }
.opacity-25 { opacity: 0.25; }
.opacity-30 { opacity: 0.3; }
.opacity-35 { opacity: 0.35; }
.opacity-40 { opacity: 0.4; }
.opacity-45 { opacity: 0.45; }
.opacity-50 { opacity: 0.5; }
.opacity-55 { opacity: 0.55; }
.opacity-60 { opacity: 0.6; }
.opacity-65 { opacity: 0.65; }
.opacity-70 { opacity: 0.7; }
.opacity-75 { opacity: 0.75; }
.opacity-80 { opacity: 0.8; }
.opacity-85 { opacity: 0.85; }
.opacity-90 { opacity: 0.9; }
.opacity-95 { opacity: 0.95; }
.opacity-100 { opacity: 1; }


/* =========================================================
    BUTTONS
========================================================= */

#portfolio-section .btn {
    color: #444;
    background: linear-gradient(to top, #eaeaea 0, #fff 100%);
    border: 1px solid #eee;
    border-bottom: 1px solid rgba(0, 0, 0, 0.12);
    padding: 10px 20px;
    cursor: pointer;
}


/* =========================================================
    SECTIONS / GRID
========================================================= */

section {
    padding: 25px 0;
}

.section-grid div {
    border: 1px solid #eee;
}


/* =========================================================
    PORTFOLIO
========================================================= */

#portfolio-section .project {
    display: none;
}

#portfolio-section .show {
    display: block;
}


/* =========================================================
    TESTIMONIALS
========================================================= */

#testimony-section figure.testimonial img {
    border-radius: 50%;
}

#testimony-section .slick-list {
    overflow: hidden;
}

#testimony-section .slick-slide {
    float: left;
}

#testimony-section button {
    display: none !important;
}


/* =========================================================
    FAQ
========================================================= */

.faq-list {
    list-style: none;
    padding: 0;
}

.faq-list li {
    border: 1px solid #eee;
    margin-bottom: 1em;
}

.faq-heading {
    position: relative;
    margin: 0;
}

.faq-list .faq-heading::before {
    content: '+';
    position: absolute;
    right: 0;
}

.faq-text {
    display: none;
}


/* =========================================================
    EFFECTS
========================================================= */

.shine {
    overflow: hidden;
    position: relative;
}

.shine:before {
    content: '';
    position: absolute;
    width: 100px;
    height: 100%;
    background-image: linear-gradient(
        120deg,
        rgba(255, 255, 255, 0) 30%,
        rgba(255, 255, 255, .5),
        rgba(255, 255, 255, 0) 70%
    );
    top: 0;
    left: -100px;
    animation: shine 3s linear infinite;
}

@keyframes shine {
    0% { left: -100px; }
    20% { left: 100%; }
    100% { left: 100%; }
}


/* =========================================================
    HEADER
========================================================= */

header .topbar,
header .topbar a,
footer .footer-custom,
footer .footer-custom a {
    color: #666;
}

header .topbar {
    font-size: 14px;
    border-bottom: 1px solid #eee;
}

header .midbar,
header .midbar a {
    color: #444;
}

header .midbar p {
    font-size: 15px;
}


/* Logo */
header .midbar #logo img {
    width: 2.8em;
}

header .midbar #logo p {
    margin-left: -1.4em;
}

header .midbar #logo p .heading {
    font-size: 28px;
    color: #fefefe;
    text-shadow: 1px 1px 3px rgb(100 115 125), 0 0 3px #92a6ae;
}


/* CTA */
header .midbar .cta-oder {
    padding: .5em 1em;
    border: none;
    border-radius: 15px;
    background: #52ab98;
}


/* =========================================================
    NAVIGATION
========================================================= */

header .navmenu {
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
}

header .navmenu i {
    padding-left: 15px;
}

header .navmenu nav ul {
    list-style: none;
    line-height: 45px;
}

header .navmenu nav li a {
    padding: 1em;
    color: #555;
    text-decoration: none;
}

header .navmenu nav li:hover {
    background: #fbfafa;
}

header .navmenu #menu {
    line-height: 46px;
    color: #555;
}


/* =========================================================
    SEARCH
========================================================= */

header .navmenu #search-form {
    line-height: 46px;
}

header .navmenu #search-form input {
    padding: 0.5em;
    border: 1px solid #eee;
    color: #555;
}

header .navmenu #search-form input::placeholder,
header .navmenu #search-form input[type="submit"] {
    color: #555;
}


/* =========================================================
    MOBILE
========================================================= */

@media screen and (max-width: 768px) {

    header #navbar {
        display: none;
    }

    header .navmenu nav li {
        border-top: 1px solid #eee;
    }

    header .navmenu nav li a {
        padding: 0 15px;
    }

    header .navmenu #search-form {
        padding-right: 15px;
    }
}


/* =========================================================
    DESKTOP
========================================================= */

@media screen and (min-width: 768px) {

    #navbar {
        display: block;
    }

    header .navmenu #menu {
        display: none;
    }

    header .navmenu nav li {
        display: inline-block;
    }

    header .midbar #contacts {
        background-image: url('/assets/images/contacts-bg.png');
        background-repeat: no-repeat;
    }

    header .midbar #address {
        background-image: url('/assets/images/address-bg.png');
    }
}