/*
 Theme Name:   Lyfo
 Theme URI:    https://generatepress.com
 Description:  Lyfo Theme
 Author:       CLARQ
 Author URI:   https://tomusborne.com
 Template:     generatepress
 Version:      0.1
*/

:root {
    --offwhite-rose: #FFF5FF;
    --soft-ivory: #FAF7F6;
    --white: #ffffff;
    --pink: #FFF4FF;
    --dusty-lavender: #8B2C84;
    --royal-purple: #440173;
    --deep-violet: #220338;
    --plum-night: #1D002B;
    --midnight-indigo: #180F33;
    --slate-gray: #556987;
    --graphite-gray: #344054;
    --charcoal-slate: #2A3342;
    --true-black: #07000A;
}

/* Fonts */
@font-face {
    font-family: Ubuntu-300;
    src: url('assets/fonts/Ubuntu/Ubuntu-Light.ttf');
}

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

@font-face {
    font-family: Ubuntu-500;
    src: url('assets/fonts/Ubuntu/Ubuntu-Medium.ttf');
}

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

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

/* General Styles */
.entry-content {
    background-color: var(--white);
}

section {
    width: 100%;
    max-width: 2600px;
    margin: 0 auto;
}

.boxed {
    padding: 80px 20px;
}

section .boxed {
    max-width: 1560px;
    margin: 0 auto;
}

h1, h2 {
    font-family: Ubuntu-700, Arial, sans-serif;
    font-size: 48px;
    line-height: 60px;
    color: var(--royal-purple);
    margin-bottom: 14px;
}

h3, h4 {
    color: var(--royal-purple);
    font-family: Ubuntu-700, Arial, sans-serif;
    font-size: 30px;
    line-height: 30px;
    letter-spacing: 0.5px;
}

p, a, li {
    color: var(--midnight-indigo);
    font-family: Ubuntu-400, Arial, sans-serif;
    font-size: 24px;
    line-height: 36px;
    letter-spacing: 0.5px;
}

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

.bg-plum-night {
    background-color: var(--plum-night);
}

.bg-deep-violet {
    background-color: var(--deep-violet);
}

.bg-deep-violet h2 {
    color: var(--white);
}

.bg-deep-violet .content * {
    color: var(--offwhite-rose);
}

.bg-pw-vertical {
    background: linear-gradient(180deg, var(--pink) 50%, var(--white) 50%);
}

.bg-gradient {
    background: linear-gradient(180deg, var(--white) 0%, var(--pink) 100%);
}

.labels {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 35px;
}

.labels .label {
    padding: 2px 18px;
    border-radius: 20px;
    background-color: var(--white);
    text-transform: uppercase;
    font-size: 16px;
    line-height: 36px;
    letter-spacing: 0.5px;
}

.grecaptcha-badge { 
    visibility: hidden !important;
}

/* Buttons */
.btn-group {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
}

.btn {
    display: flex;
    align-items: center;
    text-align: center;
    text-decoration: none;
    border-radius: 27px;
    font-family: Inter-700, Arial, sans-serif;
    font-size: 18px;
    line-height: 18px;
    max-width: fit-content;
}

.btn-fill {
    background-color: var(--true-black);
    color: var(--white);
    text-decoration: none;
    padding: 18px 18px 18px 25px;
}

.bg-deep-violet .btn-fill {
    background: var(--dusty-lavender);
}

.btn-fill::before {
    content: '';
    top: -1px;
    left: -5px;
    position: relative;
    padding-right: 13px;
    display: block;
    background-image: url("assets/images/buttons/white-btn-arrow.svg");
    background-repeat: no-repeat;
    width: 6.88px;
    height: 12px;
}

.btn-outline::before {
    content: '';
    top: -1px;
    left: -5px;
    position: relative;
    padding-right: 13px;
    display: block;
    background-image: url("assets/images/buttons/black-btn-arrow.svg");
    background-repeat: no-repeat;
    width: 6.88px;
    height: 12px;
}

.btn-outline {
    text-decoration: none;
    color: var(--royal-purple);
    border: 2px solid var(--royal-purple);
    padding: 16px 18px 16px 25px;
}

.btn-link::before {
    content: '';
    top: -1px;
    left: -5px;
    position: relative;
    padding-right: 13px;
    display: block;
    background-image: url("assets/images/buttons/purple-btn-arrow.png");
    background-repeat: no-repeat;
    width: 6.88px;
    height: 12px;
}

.btn-link {
    text-decoration: none;
    color: var(--slate-gray);
    font-family: Ubuntu-500, Arial, sans-serif;
}

.btn-link:hover {
    color: var(--dusty-lavender);
}

/* Navigation */
.inside-header {
    padding: 60px 40px;
}

.main-navigation .main-nav ul li a {
    color: var(--graphite-gray);
    font-family: Inter-700, Arial, sans-serif;
    font-size: 18px;
    line-height: 24px;
}

.main-navigation .main-nav ul li.current-menu-item:not(.btn) > a {
    text-decoration: underline solid var(--dusty-lavender) 2px;
    text-underline-offset: 7px;
}

.main-navigation .main-nav ul li:hover, .main-navigation .main-nav ul li.current-menu-item.btn > a {
    color: var(--dusty-lavender);
}

.main-navigation .main-nav ul li.btn {
    position: relative;
    display: flex;
    align-items: center;
    border-radius: 27px;
    border: 1px solid #D0D5DD;
    background: var(--white);
    min-height: 54px;
    padding-left: 20px;
}

.main-navigation .main-nav ul li.btn::before {
    content: '';
    position: absolute;
    top: 20px;
    background-image: url("assets/images/buttons/nav-btn.svg");
    background-repeat: no-repeat;
    display: block;
    width: 6.88px;
    height: 12px;
}

.main-navigation .main-nav ul li .sub-menu {
    background-color: var(--white);
    max-width: max-content;
}

/* Footer */
.site-footer .footer-widgets {
    position: relative;
    background-color: var(--plum-night);
    padding: 250px 20px 60px 20px;
}

.site-footer .footer-widgets .footer-widget-1 {
    position: relative;
}

.site-footer .footer-widgets .footer-widget-1 aside {
    margin-bottom: 0.5rem;
}

.site-footer .footer-widgets .footer-widget-1::before {
    content: '';
    position: absolute;
    top: -200px;
    left: 38px;
    background-image: url("assets/images/footer/footer-logo.svg");
    background-repeat: no-repeat;
    display: block;
    width: 181.635px;
    height: 78.661px;
}

.site-footer .footer-widgets h2, .footer-widget-1 .widget_block {
    color: var(--white);
    font-family: Ubuntu-700, Arial, sans-serif;
    font-size: 30px;
    line-height: 37.5px;
    letter-spacing: 0.5px;
    margin-bottom: 16px;
}

.site-footer .footer-widgets * {
    color: var(--offwhite-rose);
    font-family: ubuntu-400, Arial, sans-serif;
    font-size: 18px;
    line-height: 18px;
    letter-spacing: 0.5px;
    text-decoration: none;
}

/* Copyright */
.site-info {
    background-color: var(--plum-night);
}

.site-info .inside-site-info .copyright-bar {
    padding: 0 0 40px 0;
}

.copyright-bar {
    display: flex;
    justify-content: space-between;
    padding: 0 20px;
}

.copyright-bar * {
    color: var(--white);
    font-size: 16px;
    line-height: normal;
}

.copyright-bar .made-by {
    position: relative;
}

.copyright-bar .made-by a {
    text-decoration: none;
    color: var(--dusty-lavender);
}

.copyright-bar .made-by a:hover {
    color: var(--midnight-indigo);
    text-decoration: none;
}

.copyright-bar .made-by a:before {
    content: '';
    position: absolute;
    top: 6px;
    left: -30px;
    background-image: url("assets/images/footer/before-copyright.svg");
    background-repeat: no-repeat;
    display: block;
    width: 20.33px;
    height: 9px;
}

.site-footer:not(.footer-bar-active) .copyright-bar {
    width: -webkit-fill-available;
    margin: 0 auto;
}

/* Single Partner */
.single-partner .site-content {
    display: flex;
    flex-direction: column;
}

.single-partner .site-content .partner {
    background: linear-gradient(180deg, #FFF 0%, #FFF4FF 44.2%);
}

.single-partner .site-content .partner .boxed .intro {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
}

.single-partner .site-content .partner .boxed .info {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 150px;
    padding: 100px 0;
}

.single-partner .site-content .partner .boxed .info .about {
    display: flex;
    justify-content: center;
    flex-direction: column;
}

.single-partner .site-content .partner .boxed .info .partner-image {
    background-color: var(--white);
    border-radius: 16px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 30px;
}

.single-partner .site-content .partner .boxed .info .partner-image img {
    width: 100%;
    height: 300px;
    object-fit: contain;

}

.single-post .post .boxed {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 80px;
}

.single-post .post .boxed img {
    border-radius: 16px;
}

.single-post .site-content {
    display: flex;
    flex-direction: column;
}

.single-post .site-content .read-more-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    row-gap: 100px;
    column-gap: 40px;
}

.single-post .site-content .read-more-grid .read-more-item .read-more-link {
    text-decoration: none;
}

.single-post .site-content .read-more-grid .read-more-item img {
    width: 100%;
    height: 360px;
    object-fit: cover;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 16px;
    margin-bottom: 30px;
}

.pipedriveWebForms {
    display: flex;
    justify-content: center;
    max-width: 1560px !important;
    margin: 0 auto !important;
    padding: 20px;
}

.pipedriveWebForms > iframe {
    width: 100% !important;
}

.pipedriveWebForms > iframe .sc-eeDRCY.eyyRCl {
    max-width: fit-content;
    }

    /* 404 page */
.error-404.not-found {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 99vw;
    min-width: 100%;
    padding: 60px 20px;
}

.error-404.not-found .boxed {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    background-color: var(--royal-purple);
    padding: 90px 60px;
    border-radius: 12px;
}

.error-404.not-found .boxed *, .error-404.not-found .boxed *::placeholder {
    color: var(--white);
}

.error-404.not-found .boxed .search-submit {
    background-color: var(--white);
    color: var(--dusty-lavender);
}

.error-404.not-found .boxed .search-submit .gp-icon svg {
    fill: var(--dusty-lavender);
}


@media (max-width: 900px) {
    .single-partner .site-content .partner .boxed .info {
        grid-template-columns: 1fr;
        gap: 80px;
    }
}

@media (max-width: 786px) {
    .inside-header {
        padding: 30px 20px;
    }

    .main-navigation .main-nav > ul {
        background-color: var(--white);
    }

    .main-navigation .main-nav > ul > li a, .main-navigation .main-nav ul.sub-menu > li:last-child a {
        margin-bottom: 20px;
    }

    .main-navigation .main-nav > ul > li.btn a, .main-navigation .main-nav ul.sub-menu > li a {
        margin-bottom: 0;
    }
    .single-post .site-content .read-more-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 500px) {
    .boxed {
        padding: 50px 20px;
    }

    h1, h2 {
        font-size: 32px;
        line-height: 40px;
    }

    h3, h4 {
        font-size: 20px;
        line-height: 20px;
    }

    p, a, li {
        font-size: 16px;
        line-height: 24px;
    }

    .btn {
        font-size: 14px;
        line-height: 14px;
        padding: 14px 16px 14px 21px;
    }

    .error-404.not-found .boxed {
        padding: 60px 30px;
    }
    .single-post .site-content .read-more-grid {
        grid-template-columns: 1fr;
    }
}