/*
 Theme Name:   Facility Spot
 Theme URI:    https://clarq.nl
 Description:  Facility Spot Theme
 Author:       CLARQ Agency
 Author URI:   https://clarq.nl
 Template:     generatepress
 Version:      0.1
*/

@font-face {
    font-family: ManropeRegular;
    src: url('assets/fonts/Manrope-Regular.ttf');
}

@font-face {
    font-family: ManropeBold;
    src: url('assets/fonts/Manrope-Bold.ttf');
}

:root {
    --primary-black: #171717;
    --primary-blue: #060D26;
    --primary-green: #1AD079;
    --primary-white: #FFFFFF;
    --secondary-white: #F1F5FF;
}

/* General Elements */
html,
body {
    font-family: ManropeRegular, Arial, sans-serif;
    font-size: 25px;
}

h1 {
    font-family: ManropeBold, Arial, sans-serif;
    font-size: 2.2rem;
}

mark {
    background: linear-gradient(88deg, var(--primary-blue) 0%, var(--primary-green) 18.85%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.grecaptcha-badge {
    visibility: hidden;
}

.bg-blue mark {
    background: linear-gradient(89deg, #FFF 0%, #1AD079 57.52%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.page-bg-blue .main-navigation .main-nav ul li a {
    color: var(--primary-white);
}

.page-bg-blue .main-navigation .main-nav ul li.current-menu-item a, .main-navigation .main-nav ul li:hover a {
    text-decoration: underline;
    text-underline-offset: 4px;
    text-decoration-thickness: 4px;
    transition: none;
}

.page-bg-blue .main-navigation .main-nav ul li[class*="current-menu-"] > a {
    color: var(--primary-green);
}

.button {
    padding: 15px 50px;
    border-radius: 4px;
    background-color: var(--primary-green);
    font-family: ManropeBold, Arial, sans-serif;
    font-size: 0.7rem;
    color: var(--primary-white);
}

.button:hover {
    color: var(--primary-white);
}

.button-secondary {
    background-color: transparent;
    color: var(--primary-blue);
}

.button-secondary:hover {
    color: var(--primary-blue);
}

.button-secondary:before {
    content: url('assets/images/arrow-right.svg');
    margin-right: 8px;
}

.button-outline {
    border-radius: 4px;
    border: 2px solid #060D26;
    background-color: transparent;
    color: var(--primary-blue);
}

.button-outline:hover {
    color: var(--primary-blue);
}

/* Page Types / Layout Options */
.page-bg-blue {
    background-color: var(--primary-blue);
    color: var(--primary-white);
}

.bg-default {
    background-color: var(--secondary-white);
}

.bg-blue {
    background-color: var(--primary-blue);
}

.bg-white {
    background-color: var(--primary-white);
}

.bg-blue-default {
    background: linear-gradient(to bottom, var(--primary-blue) 50%, var(--secondary-white) 50%);
}

/* Navbar */
.main-navigation .main-nav ul li a {
    line-height: 50px;
}

.main-navigation .main-nav ul li.current-menu-item a,
.main-navigation .main-nav ul li:hover a {
    text-decoration: underline;
    text-underline-offset: 4px;
    text-decoration-thickness: 4px;
    transition: none;
}

.main-navigation .main-nav ul li:last-child {
    margin-left: 20px;
    border: 2px solid var(--primary-green);
    border-radius: 4px;
}

.site-logo {
    display: flex;
}

.site-logo img {
    padding-right: 20px;
}

.site-logo .logo-addition {
    display: flex;
    align-items: center;
    padding-left: 20px;
    color: var(--primary-black);
    font-family: ManropeBold, Arial, sans-serif;
    font-size: 0.7rem;
    border-left: 1px solid var(--primary-green);
}

.page-bg-blue .site-logo .logo-addition {
    color: var(--primary-green);
}

/* Page Structure */
.full-width-content .container.grid-container {
    margin: 0;
    padding: 0;
}

.container {
    margin: 0 auto;
    padding: 150px 20px;
    max-width: 1580px;
}

.entry-content > .block:first-child > .container:first-child {
    padding-top: 100px;
}

.overlap-remove_pt {
    padding-top: 0;
}

.overlap-partial {
    margin-top: -225px;
    padding-top: 0;
}

/* Footer */
.site-footer {
    font-size: 0.7rem;
}

.site-footer .inside-footer-widgets div:first-child {
    flex: 3;
}

.footer-widgets #menu-footer-menu a {
    text-decoration: none;

}

.site-footer h3 {
    font-family: ManropeBold, Arial, sans-serif;
    font-size: 1rem;
}

.footer-widget-4 aside ul li {
    margin-bottom: 0em;
}

.under-footer {
    display: flex;
    justify-content: space-between;
    width: 88vw;
    max-width: 1580px;
    color: var(--primary-blue);
    font-size: 16px;
}

.website-link-footer {
    text-decoration: none;
}

.before-text-footer {
    color: var(--primary-blue);
}

.footer-clarq {
    color: var(--primary-white);
}

.site-footer .footer-widgets-container .inner-padding {
    padding: 0 0 0 20px;
}

/* Single blog posts */
.single-blog-bottom {
    display: flex;
    margin-top: 100px;
}

.single-blog-bottom div {
    flex: 1;
}

.single-blog-bottom .single-blog-right-bottom h2 {
    font-size: 2.2rem;
    font-family: ManropeBold, Arial, sans-serif;
    max-width: 600px;
}

.single-blog-bottom .single-blog-right-bottom p {
    max-width: 470px;
}

.single-blog-bottom .single-blog-right-bottom .list p {
    margin-bottom: 0.5em;
    font-family: MulishRegular, Arial, sans-serif;
    font-weight: 700;
}

.single-blog-bottom .single-blog-right-bottom .list p::before {
    content: url('image/bullet.svg');
    position: relative;
    top: 6px;
    margin-right: 25px;
}

.single-blog-bottom .single-blog-right-bottom a {
    float: right;
}


/* blog */
.blog-title {
    font-family: ManropeBold, Arial, sans-serif;
    font-size: 2.2rem;
    margin-bottom: 60px;
}

.blog-image {
    margin-bottom: 75px;
}

.blog-content {
    width: 1148px;
    max-width: 100%;
}
.page-id-497 .container {
	padding: 0 20px;
}

@media screen and (max-width: 820px) {
    .under-footer {
        flex-wrap: wrap;
        width: 100%;
    }

    .single-blog-bottom {
        flex-direction: column;
    }

    .page-bg-blue .main-navigation .menu-toggle {
        color: var(--primary-white);
    }

    .has-inline-mobile-toggle .inside-header div {
        flex: 1;
    }

    .main-navigation.toggled .main-nav li {
        width: 55% !important;
    }
}

@media screen and (max-width: 440px) {
    .container {
        padding: 50px 20px;
    }

    .block.services .container {
        row-gap: 20px;
    }

    .blog-title {
        font-size: 1.2rem;
    }

    .separate-containers .inside-article {
        padding: 0;
    }
}