/*
Theme Name: liviabernardini
Version: 2025
Requires at least: 5.2
Tested up to: 6.8
Requires PHP: 7.4
Text Domain: liviabernardini
*/

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}html{scroll-behavior:smooth}body{line-height:1}a{text-decoration-skip-ink:auto}a[href^="tel"]{color:inherit;text-decoration:none}button{outline:0}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}q{display:inline;font-style:italic}q:before{content:'"';font-style:normal}q:after{content:'"';font-style:normal}textarea,input[type="text"],input[type="button"],input[type="submit"],input[type="reset"],input[type="search"],input[type="password"]{-webkit-appearance:none;appearance:none;border-radius:0}input[type="search"]{-webkit-appearance:textfield}table{border-collapse:collapse;border-spacing:0}th,td{padding:2px}big{font-size:120%}small,sup,sub{font-size:80%}sup{vertical-align:super}sub{vertical-align:sub}dd{margin-left:20px}kbd,tt{font-family:courier;font-size:12px}ins{text-decoration:underline}del,strike,s{text-decoration:line-through}dt{font-weight:bold}address,cite,var{font-style:italic}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
.sticky{}.bypostauthor{}.wp-caption{}.wp-caption-text{}.gallery-caption{}.alignright{}.alignleft{}.aligncenter{}
.screen-reader-text{border:0;clip:rect(1px,1px,1px,1px);-webkit-clip-path:inset(50%);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute!important;width:1px;word-wrap:normal!important;word-break:normal}
.screen-reader-text:focus{background-color:#f7f7f7;border-radius:3px;box-shadow:0 0 2px 2px rgba(0,0,0,.6);clip:auto!important;-webkit-clip-path:none;clip-path:none;color:#007acc;display:block;font-size:14px;font-size:.875rem;font-weight:700;height:auto;right:5px;line-height:normal;padding:15px 23px 14px;text-decoration:none;top:5px;width:auto;z-index:100000}
.skip-link{left:-9999rem;top:2.5rem;z-index:999999999;text-decoration:underline}
.skip-link:focus{display:block;left:6px;top:7px;font-size:14px;font-weight:600;text-decoration:none;line-height:normal;padding:15px 23px 14px;z-index:100000;right:auto}
.visually-hidden:not(:focus):not(:active), .form-allowed-tags:not(:focus):not(:active){position:absolute !important;height:1px;width:1px;overflow:hidden;clip:rect(1px 1px 1px 1px);clip:rect(1px, 1px, 1px, 1px);white-space:nowrap}

html {
    font-size: clamp(5px, 1.3vw, 10px);
    scroll-behavior: smooth;
    background: black;
}

a {
    text-decoration: none;
}

h1 {
    font-family: 'Remora Sans W5';
    font-style: normal;
    font-weight: 700;
    font-size: 10rem;
    line-height: 80%;
    color: #FDCD2D;
}

h2 {
    font-family: 'Remora Sans W5';
    font-style: normal;
    font-weight: 700;
    font-size: 8rem;
    line-height: 88%;
    letter-spacing: -0.02em;
    color: #FDCD2D;
}

h3 {
    font-family: 'Remora Sans W5';
    font-style: normal;
    font-weight: 700;
    font-size: 3.2rem;
    line-height: 98%;
    letter-spacing: -0.01em;
    color: #FDCD2D;
}

p {
    font-family: 'Work Sans';
    font-style: normal;
    font-weight: 400;
    font-size: 2.4rem;
    line-height: 98%;
    color: #FDCD2D;
}



/* Quotation box component */

.quote-box {
    height: 40rem;
    border-radius: 3.2rem 0 0 3.2rem;
    padding: 7.6rem 4rem;

    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

@media (max-width: 1024px) {
    .quote-box {
        width: 100%;
    }
}

blockquote {
    position: relative;
    display: flex;
    flex-direction: column;

    font-family: 'Remora Sans W5';
    font-style: normal;
    font-weight: 700;
    font-size: 3.2rem;
    line-height: 98%;
    color: #FDCD2D;
}

blockquote::before {
    position: absolute;
    top: -2rem;
    left: 0;
    content: '“';
    font-family: 'Remora Sans W5';
    font-style: normal;
    font-weight: 700;
    font-size: 16rem;
    line-height: 16%;
    color: #26382C;
}

blockquote::after {
    position: absolute;
    bottom: -6rem;
    right: 0;
    content: '“';
    font-family: 'Remora Sans W5';
    font-style: normal;
    font-weight: 700;
    font-size: 16rem;
    line-height: 16%;
    color: #26382C;
}

cite {
    font-family: 'Work Sans';
    font-style: normal;
    font-weight: 400;
    font-size: 1.8rem;
    line-height: 95%;
    color: #FDCD2D;

    margin-top: 1.2rem;
}



/* Main content max-width and centering */

.site-main {
    max-width: 1440px;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
}



/* Home hero component */

.home-hero {
    position: relative;
    width: 100%;
    overflow: visible;
    height: 600px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 0 40px;
}
.home-hero-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.home-hero-image::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(254.94deg, rgba(38, 56, 44, 0) 26.29%, #26382C 100%);
    z-index: 1;
    pointer-events: none;
}

.home-hero-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 75% 50%;
    position: relative;
    z-index: 0;
}

.home-hero-titleblock {
    max-width: 55.5rem;
    margin-bottom: 10rem;
    position: relative;
    z-index: 2;
}


.home-hero-titleblock p {
    font-family: 'Remora Sans W5';
    font-style: normal;
    font-weight: 600;
    font-size: 2.4rem;
    line-height: 98%;
    color: #FDCD2D;
}

.home-hero-contact-button {
    position: absolute;
    z-index: 2;
    width: 26.5rem;
    height: 8.4rem;
    bottom: -42px;
    background: #FDCD2D;
    padding: 2rem 3.2rem;
    border-radius: 3.2rem 3.2rem 3.2rem 0;

    font-family: 'Remora Sans W5';
    font-style: normal;
    font-weight: 700;
    font-size: 5.2rem;
    line-height: 85%;
    /* or 44px */
    display: flex;
    align-items: center;
    letter-spacing: -0.01em;

    color: #26382C;
}

.home-hero-down-arrow {
    position: absolute;
    z-index: 2;
    bottom: -91px;
    right: 15.5rem;
}


@media (max-width: 1024px) {
    .home-hero-down-arrow {
        display: none;
    }
}



/* About me section */

.about-me {
    background: black;
    padding: 140px 0 140px 40px;
    position: relative;
 }

.about-me-main {
    width: 57.6%;
}

.about-me-image {
    max-width: 78.3rem;
}

.about-me-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.about-me-content {
    width: 70.1%;
    margin-top: 4rem;
    margin-bottom: 14.5rem;
    max-width: 55.5rem;
}

.about-me-content h1 {
    margin-bottom: 1.6rem;
}

.about-me .quote-box {
    width: 50%;
    position: absolute;
    bottom: 14rem;
    right: 0;
    z-index: 2;
    background: #536653;
}

@media (max-width: 1024px) {
    .about-me {
        height: auto;
    }

    .about-me .quote-box {
        width: 100%;
        position: relative;
        top: 0;
        z-index: 0;
        margin-top: 6rem;
    }

    .about-me-main {
        width: 100%;
    }
}



/* Key skills section */

.key-skills {
    background: #536653;
    padding: 140px 0 140px 40px;
    position: relative;
    height: 126rem;
    display: flex;
    flex-direction: column;
    row-gap: 2rem;
}

.key-skill {
    display: flex;
    flex-direction: row;
    margin-right: 4rem;
}

.key-skill-image {
    width: 55.5rem;
    height: 46rem;
}

.key-skill-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.key-skill-content {

}

.key-skill:nth-child(1) {
    margin-right: 15.5rem;
}

.key-skill-text h2 {
    border-bottom: 1px solid;
    margin-bottom: 4.8rem;
}

.key-skill-text p {
    margin-bottom: 1.2rem;
}

@media (max-width: 1024px) {
    .key-skills {
        height: auto;
    }

    .key-skill {
        flex-direction: column;
        margin: 0 4rem 0 0;
    }

    .key-skill:nth-child(1) {
        margin-right: 4rem;
    }

    .key-skill:not(:nth-child(1)) {
        margin-top: 10rem;
    }

    .key-skill-image {
        margin-top: 4rem;
    }
}



/* Core topics section */

.core-topics {
    background: black;
    padding: 140px 40px;
}

.core-topics-content {
    display: flex;
    flex-direction: row;
    column-gap: 2rem;
}

.core-topics-left {
    width: 50%;
}

.core-topics-right {
    width: 50%;
    margin-top: calc(387px - 118px);
}

.core-topics h2 {
    padding-bottom: 2.4rem;
    border-bottom: 1px solid;
    margin-bottom: 2.4rem;
}

.core-topics-items {
    display: flex;
    flex-direction: column;
    row-gap: 3.2rem;
    margin-bottom: 10rem;
}

.core-topics-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.core-topics .quote-box {
    position: relative;
    background: #536653;
    margin-top: 10rem;
}

.core-topics .quote-box::before {
    content: "";
    position: absolute;
    top: -70px;
    left: 50%;
    transform: translateX(-50%);
    width: 142px;
    height: 113px;
    background: url("assets/chevron.svg") no-repeat center;
    background-size: contain;
    z-index: 3;
}

.core-topics .quote-box blockquote,
.core-topics .quote-box cite {
    color: #FDCD2D;
}

@media (max-width: 1024px) {
    .core-topics-content {
        flex-direction: column;
    }

    .core-topics-left,
    .core-topics-right {
        width: 100%;
    }
}



/* Who worked with section */

.who-worked {
    background: black;
    padding: 100px 40px 140px;
}

.who-worked h2 {
    padding-bottom: 2.4rem;
    border-bottom: 1px solid;
}

.who-worked-logos {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
    margin-top: 2rem;
}

.who-worked-logo {
    max-width: 21rem;
    max-height: 12rem;
}

.who-worked-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

@media (max-width: 1024px) {
    .who-worked-logos {
        grid-template-columns: 1fr 1fr 1fr;
    }
}

@media (max-width: 768px) {
    .who-worked-logos {
        grid-template-columns: 1fr 1fr;
    }

    .who-worked-logo {
        max-width: 13.6rem;
        max-height: 7.71rem;
    }
}



/* Why it works section */

.why-works {
    position: relative;
    height: 79.8rem;
    background: #536653 url('images/mottled-green-background.png');
    background-size: cover;
    padding: 14rem 4rem;
}

.why-works-text {

}

.why-works-text h2 {
    border-bottom: 1px solid;
    margin-bottom: 4.8rem;
}

.why-works-text p {
    max-width: 55.5rem;
    width: 45%;
    margin-bottom: 1.2rem;
}

.why-works .quote-box {
    width: 50%;
    position: absolute;
    top: 25.8rem;
    right: 0;
    z-index: 2;
    background: #FDCD2D;
}

.why-works .quote-box blockquote,
.why-works .quote-box cite {
    color: #536653;
}

.why-works-chevron {
    position: absolute;
    z-index: 2;
    bottom: -70px;
    left: 15.5rem;
}


@media (max-width: 1024px) {
    .why-works-chevron {
        display: none;
    }

    .why-works-text p {
    }
}

@media (max-width: 768px) {
    .why-works {
        height: auto;
    }

    .why-works .quote-box {
        width: 100%;
        position: relative;
        top: 0;
        z-index: 1;
        margin-top: 4.4rem;
    }

}



/* Let's talk section (Ready to move the room) */

.lets-talk {
    display: flex;
    flex-direction: row;
    column-gap: 2rem;
    height: 90rem;
    padding: 14rem 4rem;
}

.lets-talk-text {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    row-gap: 3.2rem;
    width: 67rem;
}

.lets-talk-text h2 {
    width: 55.5rem;
}


.lets-talk-contact-button {
    width: 35.8rem;
    height: 8.4rem;
    background: #FDCD2D;
    padding: 2rem 3.2rem;
    border-radius: 3.2rem 3.2rem 3.2rem 0;

    font-family: 'Remora Sans W5';
    font-style: normal;
    font-weight: 700;
    font-size: 5.2rem;
    line-height: 85%;
    /* or 44px */
    display: flex;
    align-items: center;
    letter-spacing: -0.01em;

    color: #26382C;
}

.lets-talk-image {
    width: 67rem;
}

.lets-talk-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media (max-width: 1024px) {
    .lets-talk {
        flex-direction: column;
        height: auto;
    }

    .lets-talk-text {
        order: 2;
        margin-top: 6rem;
    }
}



/* Footer */

footer {

}

.footer-container {
    //max-width: 1440px;
    margin: 0 auto;
    background: black;
}

.footer-back {
    //width: 1440px;
    height: 112px;
    font-family: 'Remora Sans W5';
    font-style: normal;
    font-weight: 700;
    font-size: 24px;
    line-height: 85%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #FDCD2D;
}

.footer-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}