/***********/
/* General */
/***********/

body:has(nav.active),
html:has(nav.active) {
    overflow: hidden;
}

section {
    scroll-margin-top: 65px;
}

section > div {
    max-width: 1440px;
    margin: auto;
    padding-left: 6rem;
    padding-right: 6rem;
}

.img-transition img {
    transition: var(--timing-function) 1s;
}

.img-transition:hover img {
    transform: scale(1.2);
}

/****************/
/* Hero Section */
/****************/

.hero-section {
    background-color: var(--clr-primary-50);
}

.hero-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 4rem;
    padding-top: 3.5rem;
    padding-bottom: 6rem;
}

.hero-container h1 {
    font-family: var(--ff-satoshi-medium);
    font-size: var(--fs-4xl);
    line-height: var(--lh-heading);
    text-align: center;
    background: linear-gradient(90deg, #000 0%, var(--clr-primary-600) 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.hero-grid {
    display: grid;
    grid-template-areas:
        "hero-img hero-japan"
        "hero-img hero-content";
    grid-template-columns: 0.55fr 0.45fr;
    grid-template-rows: auto auto;
    gap: 2rem;
}

.hero-img,
.hero-japan {
    border-radius: var(--br-medium);
}

.hero-img {
    grid-area: hero-img;
}

.hero-japan {
    grid-area: hero-japan;
    min-height: 6rem;
    max-height: 10rem;
}

.hero-content {
    grid-area: hero-content;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.5rem;
    padding: 2rem;
    border-radius: var(--br-medium);
    border: var(--border);
    background: var(--clr-primary-100);
}

.hero-content h3 {
    font-family: var(--ff-satoshi-medium);
    font-size: var(--fs-lg);
}

.hero-content p {
    font-size: var(--fs-md);
}

.hero-content .btn-container {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
}

.hero-content button {
    padding: 0.5rem 1.25rem;
    border-radius: var(--br-small);
    font-family: var(--ff-satoshi-medium);
    font-size: var(--fs-md);
}

.hero-content #btn-find-work {
    color: var(--clr-primary-50);
    border: 2px solid var(--clr-primary-600);
    background: var(--clr-primary-600);
    transition: var(--timing-function) 0.2s;
}

.hero-content #btn-find-work:hover {
    background-color: var(--clr-primary-700);
}

.hero-content #btn-learn-more {
    color: var(--clr-primary-700);
    border: 2px dashed var(--Primary-600, #ec278a);
}

/**********************/
/* Trusted By Section */
/**********************/

.trusted-by-container {
    padding-top: 3rem;
    padding-bottom: 3rem;
}

.trusted-by-container h4 {
    margin-bottom: 2rem;
    text-align: center;
    font-family: var(--ff-satoshi-bold);
    font-size: var(--fs-md);
    text-transform: uppercase;
}

.trusted-by-flex {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2rem;
    overflow: visible;
}

.trusted-by-flex img {
    max-width: 4.5rem;
    transition: var(--timing-function) 0.2s;
}

.trusted-by-flex img:hover {
    transform: scale(1.15);
}

/********************/
/* Features Section */
/********************/

.features-section {
    background-color: var(--clr-primary-50);
}

.features-container {
    padding-top: 5.25rem;
    padding-bottom: 6rem;
}

.features-header {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 2rem;
    margin-bottom: 3rem;
}

.features-header h2 {
    max-width: 30rem;
    font-family: var(--ff-satoshi-medium);
    font-size: var(--fs-2xl);
    color: var(--clr-primary-700);
}

.features-header p {
    font-size: var(--fs-md);
}

.features-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
}

.features-grid article {
    display: grid;
    grid-template-columns: auto auto;
    grid-template-rows: auto auto;
    gap: 1rem 1.5rem;
    align-items: center;

    padding: 2rem;
    background-color: var(--clr-primary-100);
    border: var(--border);
    border-radius: var(--br-medium);
    transition: var(--timing-function) 0.2s;
}

.features-grid article .icon {
    grid-row: 1 / -1;
    display: grid;
    place-items: center;

    max-width: 5rem;
    aspect-ratio: 1 / 1;
    padding: 1rem;
    border-radius: 50%;
    background-color: var(--clr-primary-600);
    transition: var(--timing-function) 0.2s;
}

.features-grid article h3 {
    font-family: var(--ff-satoshi-medium);
    font-size: var(--fs-lg);
}

.features-grid article p {
    align-self: self-start;
    font-size: var(--fs-md);
}

.features-grid article:hover {
    background-color: var(--clr-primary-600);
    color: var(--clr-neutral-50);
}

.features-grid article:hover .icon {
    border: 2px solid var(--clr-primary-50);
}

/************************/
/* Testimonials Section */
/************************/

.testimonials-container {
    display: grid;
    grid-template-areas:
        "testimonial-h2 testimonial-img"
        "testimonial-content testimonial-img";
    grid-template-columns: 0.6fr 0.4fr;
    grid-template-rows: 3.4rem auto;
    gap: 3rem 2rem;
    padding-top: 5.25rem;
    padding-bottom: 6rem;
}

.testimonials-container h2 {
    grid-area: testimonial-h2;
    font-family: var(--ff-satoshi-medium);
    font-size: var(--fs-2xl);
    color: var(--clr-primary-700);
}

.testimonials-container .img-container {
    grid-area: testimonial-img;
    border-radius: var(--br-medium);
}

.testimonials-grid {
    grid-area: testimonial-content;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem 2rem;
}

.testimonials-grid article {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    height: fit-content;
}

.testimonials-grid article .avatar {
    max-width: 5rem;
    aspect-ratio: 1 / 1;
}

.testimonials-grid article p {
    font-family: var(--ff-satoshi-light);
    font-size: var(--fs-md);
}

.testimonials-grid article span {
    font-family: var(--ff-satoshi-medium);
}

/***************/
/* CTA Section */
/***************/

.cta-section {
    padding: 0 6rem;
}

.cta-container {
    max-width: 78rem;
    margin: 3rem auto 9rem;
    background: linear-gradient(
            0deg,
            rgba(0, 0, 0, 0.4) 0%,
            rgba(0, 0, 0, 0.4) 100%
        ),
        url("/assets/images/buildings.webp") lightgray 0px -64px / cover no-repeat;
    background-size: cover;
    border-radius: var(--br-medium);
    padding: 6rem;
    text-align: center;
}

.cta-container h2 {
    margin-bottom: 2rem;
    font-family: var(--ff-satoshi-bold);
    font-size: var(--fs-2xl);
    color: var(--clr-primary-50);
}

.cta-container #btn-view-jobs {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;

    margin: 0 auto;
    padding: 0.75rem 1.25rem;
    background-color: var(--clr-primary-700);
    font-family: var(--ff-satoshi-medium);
    font-size: var(--fs-md);
    color: var(--clr-primary-50);
    border-radius: var(--br-small);
    transition: var(--timing-function) 0.2s;
}

.cta-container #btn-view-jobs:hover {
    background-color: var(--clr-primary-800);
}

.cta-container #btn-view-jobs img {
    width: 1.5rem;
    height: 1.5rem;
    transition: inherit;
}

.cta-container #btn-view-jobs:hover img {
    transform: translateX(4px);
}