/* -------------- */
/* Variables      */
/* -------------- */

:root {
    --clr-light: #fff7f0;
    --clr-dark: #030303;
    --clr-grey: #7a746e;

    --clr-accent: #eb7565;
    --clr-hover-light: #f6a560;
    --clr-hover-dark: #755cde;
    
    --clr-pink: #f39e9e;
    --clr-cyan: #61c4b7;
    --clr-blue: #755cde;
    --clr-purple: #552049;
    --clr-orange: #f6a560;
    --clr-red: #eb7565;
}

/* -------------- */
/* Reset          */
/* -------------- */

/* https://piccalil.li/blog/a-more-modern-css-reset/ */

/* Box sizing rules */
*,
*::before,
*::after {
  box-sizing: border-box;
  /* border: 2px solid red; */
}

/* Prevent font size inflation */
html {
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}

/* Remove default margin in favour of better control in authored CSS */
body, h1, h2, h3, h4, p,
figure, blockquote, dl, dd {
  margin-block-end: 0;
}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role='list'],
ol[role='list'] {
  list-style: none;
}

/* Set core body defaults */
body {
  min-height: 100vh;
  line-height: 1.5;
}

/* Set shorter line heights on headings and interactive elements */
h1, h2, h3, h4,
button, input, label {
  line-height: 1.1;
}

/* Balance text wrapping on headings */
h1, h2,
h3, h4 {
  text-wrap: balance;
}

/* A elements that don't have a class get default styles */
a:not([class]) {
  text-decoration-skip-ink: auto;
  /* color: currentColor; */
}

/* Make images easier to work with */
img,
picture {
  max-width: 100%;
  display: block;
}

/* Inherit fonts for inputs and buttons */
input, button,
textarea, select {
  font-family: inherit;
  font-size: inherit;
}

/* Make sure textareas without a rows attribute are not tiny */
textarea:not([rows]) {
  min-height: 10em;
}

/* Anything that has been anchored to should have extra scroll margin */
:target {
  scroll-margin-block: 5ex;
}

/* -------------- */
/* General Styles */
/* -------------- */

body {
    font-family: "Plus Jakarta Sans", sans-serif;
    text-align: center;
    background: var(--clr-light);
    color: var(--clr-dark);
    margin: 1rem;
}

@media (min-width: 768px) {
    body {
        margin: 2.4375rem;
    }
}

p {
    line-height: 26px;
    color: var(--clr-grey);
}

button:hover {
    cursor: pointer;
}

.btn {
    text-decoration: none;
    padding: 8px 28px;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 28px;
    border-radius: 28px;
}

@media(min-width: 768px) {
    .btn {
        padding: 14px 45px;
        font-size: 1rem;
    }
}

/* -------------- */
/* Header         */
/* -------------- */

.header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.home-link__img {
    width: 48px;
    height: 48px;
}

.header__btn {
    background: var(--clr-dark);
    color: var(--clr-light);
}

.header__btn:hover {
    background: var(--clr-hover-dark);
}

@media(min-width: 768px) {

    .header {
        margin-bottom: 64px;
    }

    .home-link__img {
        width: 64px;
        height: 64px;
    }
}

/* -------------- */
/* Hero           */
/* -------------- */

.hero-section {
    margin-bottom: 100px;
}

.title-container {
    max-width: 752px;
    margin: 0 auto;
}
.hero__title {
    font-size: 2.25rem;
    font-weight: bold;
    text-align: center;
    line-height: 45px;
}

.hero__text {
    padding: 0 30px;
    margin-bottom: 32px;
}

@media(min-width: 768px) {
    .hero__title {
        font-size: 2.75rem;
        margin-bottom: 27px;
    }

    .hero__text {
        font-size: 1.125rem;
        line-height: 28px;
        padding: 0 30px;
        margin-bottom: 64px;
    }
}

@media(min-width: 1080px) {
    .hero__title {
        font-size: 3.5rem;
        margin-bottom: 36px;
    }

    .hero__text {
        font-size: 1.125rem;
        line-height: 28px;
        padding: 0 30px;
        margin-bottom: 80px;
    }
}

/* Bento Grid */

.bento-grid {
    display: grid;
    gap: 1.5rem;
    grid-auto-columns: 1fr;
    grid-template-areas:
    'one one'
    'two three'
    'four four'
    'five five'
    'six six';
}

.box {
    border-radius: 8px;
    /* padding: 1.5rem; */
    position: relative;

    img {
        position: absolute;
        top: 24px;
        right: 24px;
    }

    p {
        color: var(--clr-light);
        font-size: 1.5rem;
        font-weight: bold;
        text-align: left;
        position: absolute;
        bottom: 24px;
        left: 24px;
    }
}

.box-one {
    background: var(--clr-blue);
    grid-area: one;
    min-height: 364px;
}

.box-two {
    background: var(--clr-orange);
    grid-area: two;
    min-height: 182px;
}

.box-three {
    background: var(--clr-pink);
    grid-area: three;
    min-height: 182px;
}

.box-four {
    background: var(--clr-red);
    grid-area: four;
    min-height: 158px;
}

.box-five {
    background: var(--clr-cyan);
    grid-area: five;
    min-height: 182px;
}

.box-six {
    background: var(--clr-purple);
    grid-area: six;
    min-height: 182px;
}

@media(min-width: 768px) {
    .bento-grid {
        grid-template-areas:
        'one one two three'
        'one one four four'
        'five five six six';
    }
}

@media(min-width: 1080px) {
    .bento-grid {
        grid-template-areas:
        'one one two three four four'
        'one one five five six six';
    }
}

/* End Bento Grid */

/* -------------- */
/* About          */
/* -------------- */

.about-container {
    display: block;
    max-width: 1145px;
}

.about__img {
    margin: auto auto 40px auto;
    width: 300px;
    height: 300px;
}

.about__title {
    font-size: 1.625rem;
    font-weight: 600;
    margin-bottom: 24px;
}

.about__text {
    font-weight: 500;
    line-height: 26px;
    margin-bottom: 26px;
}

.about__btn {
    background: var(--clr-red);
    color: var(--clr-light);
    display: inline-block;
    margin-bottom: 100px;
}

.about__btn:hover {
    background: var(--clr-hover-light);
}

@media(min-width: 768px) {
    .about-container {
        display: flex;
        align-items: center;
        position: relative;
    }

    .about__img {
        margin: 0 40px 0 -40px;
        width: 364px;
        height: 364px;
        position: relative;
        left: -44px;
    }

    .about-container__inner {
        text-align: left;
    }

    .about__title {
        font-size: 2rem;
        line-height: 40px;
        margin-top: 0;
        margin-bottom: 24px;
    }

    .about__text {
        font-size: 1.125rem;
        font-weight: 500;
        line-height: 28px;
        margin-bottom: 26px;
    }

    .about__btn {
        margin-bottom: 0;
    }
}

@media(min-width: 1080px) {
    .about-container {
        margin: 0 auto;
    }

    .about__img {
        width: 445px;
        height: 445px;
        left: 0;
        margin: 0 125px 0 0;
    }

    .about__title {
        font-size: 2.5rem;
        line-height: 51px;
        margin-top: 0;
        margin-bottom: 34px;
    }

    .about__text {
        margin-bottom: 31px;
    }
}

/* Carousel */

.carousel__title {
    margin-bottom: 32px;
}

/* .carousel {
    display: flex;
    flex-direction: column;
    align-items: center;
} */

.scroll-container {
    padding: 0;
    scroll-snap-type: x mandatory;
    overflow-x: scroll;
    display: flex;
    gap: 1rem;
    /* width: 375px; */
    max-width: 1080px;
    margin: 0 auto;
    margin-bottom: 32px;
    scrollbar-width: none;
}

.carousel__slide {
    list-style: none;
    scroll-snap-align: center;
}

.carousel__slide img {
    list-style: none;
    max-width: initial;
    border-radius: 10px;
    /* width: 270px; */
    height: 180px;
}

.carousel__btns-container {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 100px;
}

.btn-prev, .btn-next {
    width: 64px;
    height: 64px;
    background: var(--clr-dark);
    border-radius: 50%;
    border: 0;
    
    img {
        margin: 0 auto;
    }
}

.btn-prev:hover, .btn-next:hover {
    background: var(--clr-hover-dark);
}

@media(min-width: 768px) {

    .carousel__title {
        font-size: 2rem;
        line-height: 40px;
    }

    .scroll-container {
        /* width: 768px; */
        margin-bottom: 56px;
    }

    .carousel__slide img {
        width: 540px;
        height: 360px;
    }
}

@media(min-width: 1080px) {

    .scroll-container {
        /* width: 1080px; */
        margin-bottom: 56px;
    }

    .carousel__slide img {
        width: 540px;
        height: 360px;
    }
}

/* Carousel end */

/* -------------- */
/* Contact        */
/* -------------- */

.contact__text-container {
    background: var(--clr-dark);
    color: var(--clr-light);
    border-radius: 10px;
    padding: 49px 24px;
    margin-bottom: 40px;
}

.contact__title {
    font-size: 1.625rem;
    margin-bottom: 24px;
    margin-top: 0;
}

.contact__text {
    color: var(--clr-light);
    line-height: 26px;
    font-weight: 500;
    margin-bottom: 24px;
}

.contact__btn {
    background: var(--clr-red);
    color: var(--clr-light);
    display: inline-block;
}

.contact__btn:hover {
    background: var(--clr-hover-light);
}

@media(min-width: 768px) {

    .contact__text-container {
        padding: 56px 75px 64px;
    }

    .contact__title {
        font-size: 2rem;
        line-height: 40px;
    }
    
    .contact__text {
        font-size: 1.125rem;
        font-weight: 500;
        line-height: 28px;
    }
    
    .contact__btn {
        background: var(--clr-red);
        color: var(--clr-light);
        display: inline-block;
    }
}

@media(min-width: 1080px) {
    .contact__text-container {
        display: flex;
        align-items: center;
        justify-content: space-between;
        max-width: 1080px;
        padding: 65px 80px;
        margin: 0 auto 50px auto;
    }

    .contact__text-container-inner {
        text-align: left;
        width: 540px;
    }

    .contact__title {
        font-size: 2.5rem;
        line-height: 51px;
    }
}

/* -------------- */
/* Footer         */
/* -------------- */

.footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 32px;
}

.footer__btn {
    background: var(--clr-dark);
    color: var(--clr-light);
    display: inline-block;
}

.footer__btn:hover {
    background: var(--clr-hover-dark);
}

@media(min-width: 768px) {
    .footer {
        margin-bottom: 56px;
    }
}

@media(min-width: 1080px) {
    .footer {
        margin-bottom: 64px;
    }
}

/* -------------- */
/* Utilities      */
/* -------------- */

.visible-hidden {
    clip: rect(1px, 1px, 1px, 1px);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}

.visible-hidden:focus {
    clip: auto;
    height: auto;
    overflow: auto;
    position: absolute;
    width: auto;
}