*,
*::after,
*::before {
    box-sizing: border-box;
}

:root {
    --primary-color: #f5a5b8;
    --secondary-color: #fdfbf9;
    --card-color: #ffffff;
    --font-color: #4a4a4a;
    --gray-color: rgb(185, 185, 185);
    --background-accent: rgba(253, 235, 243, 0.6);
    --paragraph-color: #949494;

    --primary-font: "Inter", sans-serif;
    --font-title: "Poppins", sans-serif;
    --font-size-paragraph: 1.126em;
    --font-weight-medium: 600;
    --font-weight-normal: 400;

    --radius: 1rem;

    --drop-shadow-button: drop-shadow(3px 5px 4px rgb(211, 205, 205));
    --drop-shadow-card: drop-shadow(3px 6px 5px rgb(184, 184, 184));
    --drop-shadow-img: drop-shadow(8px 8px 8px rgb(184, 184, 184));
}

html {
    scroll-behavior: smooth;
}

body {
    min-height: 100dvh;
    background-color: var(--secondary-color);
    color: var(--font-color);
    font-family: var(--primary-font);
    margin: 0;

}

img {
    width: 100%;
    height: 100%;
    border-radius: 10%;
    object-fit: cover;
}

h4 {
    font-family: var(--font-title);
    font-weight: var(--font-weight-medium);
}


.container {
    display: grid;
    grid-template-columns: repeat(12, 1fr);

}

/*==== 
HEADER 
======*/

.header-kitten {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0;
    grid-column: span 12;
    background-color: color-mix(in srgb, var(--secondary-color), transparent 10%);
    box-shadow: 2px 3px 2px rgb(243, 242, 242);
    /* border-bottom: 1px solid  rgb(230, 227, 227); */
    padding: .6em;


    position: sticky;
    top: 0;
    z-index: 10;
    backdrop-filter: blur(5px);
}

.menu--hidden,
.btn--hiden {
    display: none;
}

.logo-kitten {
    display: flex;
    align-items: center;
    gap: .3em;
    font-size: 1.3rem;
    font-weight: var(--font-weight-normal);
    font-family: var(--font-title);
}

.logo-kitten__icon {
    background-color: var(--background-accent);
    border-radius: 50%;
    padding: .1rem .2rem;
}

.lucide-cat {
    color: var(--primary-color);
    background-color: transparent;
    padding-top: .3em;
}

.menu-btn {
    border: none;
    background-color: var(--secondary-color);
}

/*====
 HERO 
 =====*/

.main-kitten {
    grid-column: span 12;
}


.hero-kitten {
    display: flex;
    flex-direction: column;
    padding: 4em 1.5em;

}

.hero-kitten__span,
.about-kitten__span {
    background-color: var(--background-accent);
    border-radius: var(--radius);
    padding: .6rem;
    font-size: .8rem;
    font-weight: var(--font-weight-medium);
    color: var(--primary-color);
}

.hero-kitten__span::before {
    content: "✨";
}

.hero-kitten__content h1 {
    font-size: 2.2rem;
    font-weight: var(--font-weight-medium);
    font-family: var(--font-title);
    line-height: 1.3;
    letter-spacing: .05rem;
    max-width: 20ch;
}

.hero-kitten__content p {
    font-size: var(--font-size-paragraph);
    font-weight: var(--font-weight-normal);
    color: var(--paragraph-color);
    margin: 1em 0;
    line-height: 1.5;
    max-width: 50ch;
    
}

.pink--color {
    color: var(--primary-color);
}

.hero-kitten__btn {
    display: flex;
    flex-direction: column;
    gap: 1rem;

}

.hero-btn {
    text-align: center;
    text-decoration: none;
    font-weight: var(--font-weight-medium);
    font-size: 1rem;
    border-radius: var(--radius);
    padding: .9em;
}

.hero-btn__pink {
    border: none;
    background-color: var(--primary-color);
    color: var(--secondary-color);

    transition: transform .3s ease-in-out,
        filter .3s ease;
}

.hero-btn__pink::after {
    content: "➜";
    padding-left: .3rem;
}

.hero-btn__white {
    border: 1px solid rgb(233, 229, 229);
    background-color: #fff;
    color: var(--font-color);

    transition: filter .3s ease;
}

.hero-kitten__img {
    min-height: 10em;
    min-width: 14em;
    filter: var(--drop-shadow-img);
    overflow: hidden;
    margin: 2em 0;
}

/*======= 
RESOURCES 
=========*/

.resources-kitten,
.about-kitten,
.testimony-kitten  {
    padding: 4em 1.5em;
}

.resources-kitten__content {
    text-align: center;
}

.resources-kitten__content h2 {
    font-family: var(--font-title);
    font-weight: var(--font-weight-medium);
    font-size: 2rem;

}

.resources-kitten__content p {
    font-weight: var(--font-weight-normal);
    font-size: var(--font-size-paragraph);
    color: var(--paragraph-color);
}

.resources-kitten__card {
    display: grid;
    padding: 3rem 0;
    gap: 2rem;
}

.resources-card {
    background-color: var(--card-color);
    border-radius: var(--radius);
    border: 1px solid rgb(243, 242, 242);
    padding: 1rem;

    transition: transform .4s ease-in-out,
        filter .4s ease,
        border .4s ease;
}

.resources-card__icon {
    display: inline-block;
    background-color: var(--background-accent);
    border-radius: 50%;
    padding: .5rem;
}

.lucide-card {
    color: var(--primary-color);
}

.resources-card__content h3 {
    font-family: var(--font-title);
    font-weight: var(--font-weight-medium);
    font-size: 1.2rem;
}

.resources-card__content p {
    font-weight: var(--font-weight-normal);
    font-size: 1rem;
    color: var(--paragraph-color);

}

/*=====
 ABOUT 
 =====*/


.about-kitten__content {
    padding-bottom: 2rem;
}

.about-kitten__content h2 {
    font-family: var(--font-title);
    font-weight: var(--font-weight-medium);
    font-size: 2rem;
}

.about-kitten__content p {
    font-size: var(--font-size-paragraph);
    font-weight: var(--font-weight-normal);
    color: var(--paragraph-color);
    line-height: 1.5;
    letter-spacing: .020rem;
}

.about-kitten__list {
    list-style-type: none;
    padding: 1rem 0;
}

.about-kitten__list li {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-weight: var(--font-weight-normal);
    font-size: 1rem;
    padding: .4rem 0;
    color: var(--paragraph-color);
}

.lucide-circle-check {
    color: var(--primary-color);

    transition: transform .5s ease;
}

.about-kitten__btn {
    display: inline-block;
    text-decoration: none;
    font-size: .9rem;
    padding: .9rem 1.3rem;
    border-radius: var(--radius);
    background-color: #4a4a4a;
    color: var(--secondary-color);

    transition: transform .3s ease-in-out,
        filter .3s ease
}

.about-kitten__img {
    min-width: 15rem;
    min-height: 10em;
    padding-top: 1rem;
    overflow: hidden;
    filter: var(--drop-shadow-img);

}


.testimony-kitten__content {
    text-align: center;
}

.testimony-kitten__content h2 {
    font-family: var(--font-title);
    font-weight: var(--font-weight-medium);
    font-size: 2rem;
}

.testimony-kitten__content p {
    font-weight: var(--font-weight-normal);
    font-size: var(--font-size-paragraph);
    color: var(--paragraph-color);
    padding-bottom: 3rem;
}

.testimony-kitten__card {
    display: grid;
    gap: 1.5rem;


}

.testimony-card {
    background-color: var(--card-color);
    border: 1px solid color-mix(in srgb, var(--font-color), transparent 80%);
    border-radius: var(--radius);
    padding: 1.5em;

    transition: transform .4s ease-in-out,
        filter .4s ease,
        border .4s ease;
}

.lucide-star-icon {
    color: var(--primary-color);
}

.testimony-card__comment p {
    font-weight: var(--font-weight-normal);
    font-size: 1rem;
    line-height: 1.4;
    color: var(--paragraph-color);
}

.testimony-card__profile {
    display: flex;
    align-items: center;
    gap: .5rem;
    border-top: 1px solid color-mix(in srgb, var(--font-color), transparent 90%);
    padding: 1rem 0;
}

.testimony-card__img {
    overflow: hidden;
    width: 3rem;
    height: 3rem;
}

.testimony-card__img img {
    border-radius: 50%;
    object-fit: cover;
}


.testimony-card__content p {
    margin: 0;
    font-weight: var(--font-weight-medium);
    font-size: 1rem;
}

.testimony-card__content p:nth-child(2) {
    font-weight: var(--font-weight-normal);
    padding-top: .2rem;
}

/*========
 PRACTICE 
 ========*/

.practice-kitten {
    padding: 4em 1.5em;
    background-color: #f9f5f2;
}

.practice-kitten__card {
    text-align: center;
    border-radius: var(--radius);
    background-color: var(--card-color);
    filter: drop-shadow(6px 6px 7px var(--gray-color));
    padding: 2em;

}

.practice-kitten__icon {
    display: inline-block;
    background-color: var(--background-accent);
    padding: 1rem;
    border-radius: var(--radius);
    border: 1px solid var(--primary-color);
}

.lucide-sparkles {
    color: var(--primary-color);
}

.practice-kitten__content h2 {
    font-family: var(--font-title);
    font-weight: var(--font-weight-medium);
    font-size: 1.8rem;
}

.practice-kitten__content p {
    font-weight: var(--font-weight-normal);
    font-size: var(--font-size-paragraph);
    line-height: 1.5;
    color: var(--paragraph-color);
    padding-bottom: 1em;
}

.practice-kitten__btn {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.practice-btn {
    display: block;
    text-decoration: none;
    padding: 1.2rem;
    border-radius: var(--radius);
    cursor: pointer;

    transition: transform .3s ease-in-out,
        filter .3s ease;
}


.practice-btn__pink {
    background-color: var(--primary-color);
    color: var(--secondary-color);

}

.practice-btn__pink::after {
    content: "➜";
    padding-left: .3rem;
}

.practice-btn__black {
    background-color: #4a4a4a;
    color: var(--secondary-color);
}

.practice-kitten__span {
    display: flex;
    justify-content: center;
    gap: 1rem;
    padding-top: 2rem;
}

.practice-kitten__span span{
    color: var(--paragraph-color);
    font-size: 0.875rem;
}

.practice-kitten__span span::before {
    content: "";
    display: inline-block;
    width: .6rem;
    height: .6rem;
    border-radius: 50%;
    margin-right: .4rem;
    background-color: #f5a5b8;
}

/*==== 
FOOTER 
======*/

.footer-kitten {
    grid-column: span 12;
    display: grid;
    
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 2rem;
    padding: 4em 1.5em;
    border-top: 1px solid color-mix(in srgb, var(--font-color), transparent 80%);
    background-color: #f9f5f2;

}


/*=== 
INFO 
====*/

.footer-kitten__info {
    grid-column: span 12;
    grid-row: 1;
}

.info-logo__text {
    font-size: 1rem;
    font-weight: var(--font-weight-normal);
    color: var(--paragraph-color);
}

.info-logo__social {
    display: flex;
    gap: 1rem;
    padding-bottom: .5rem;
}

.logo-social {

    padding: .3em;
    border-radius: var(--radius);
    background-color: snow;
}


/*====== 
 PRODUCTS
=======*/

.footer-kitten__products {
    grid-column: span 4;
    grid-row: 2;
}


.footer-kitten__company {
    grid-column: span 4;
    grid-row: 2;
}

.footer-kitten__support {
    grid-column: span 4;
    grid-row: 2;
}

.footer-kitten__copyright {
    grid-column: span 12;
    grid-row: 3;
    gap: 1em;

    display: flex;
    justify-content: center;
    flex-direction: column;
    border-top: 1px solid color-mix(in srgb, var(--font-color), transparent 80%);
    padding-top: 2em ;

}

.footer-kitten__copyright p{
    color: var(--paragraph-color);
    font-size: .9rem;
    margin: 0;

}

.footer-kitten__copyright p:nth-child(2) {
    display: flex;
    gap: .2em;
}

.lucide-heart {
    color: var(--primary-color);
    animation: heart .8s ease-in-out infinite;
}

.footer-list {
    display: flex;
    flex-direction: column;
    list-style-type: none;
    padding: 0;
    gap: .5rem;

}

.footer-list a {
    font-size: 1rem;
    font-weight: var(--font-weight-normal);
    text-decoration: none;
    color: var(--paragraph-color);
}

@media screen and (min-width: 48em) {

    .menu--hidden,
    .btn--hiden {
        display: flex;
        gap: 2.5em;

    }

    .navbar-kitten__menu {
        list-style-type: none;
    }

    .navbar-kitten__menu a {
        text-decoration: none;
        font-size: 1rem;
        font-weight: var(--font-weight-normal);
        color: var(--paragraph-color);
        cursor: pointer;

        transition: color .5s ease;
    }

    .icon-menu--disable {
        display: none;
    }

    .header-kitten__btn {
        text-decoration: none;
        font-family: var(--font-title);
        font-weight: var(--font-weight-medium);
        font-size: 1rem;
        padding: .5em 1.5em;
        border-radius: var(--radius);
        background-color: #f5a5b8;
        color: var(--secondary-color);
        cursor: pointer;

        transition: transform .3s ease-in-out,
            filter .3s ease;
    }

    .hero-kitten {
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        gap: 2rem;
        padding: 6em 1.5em;
    }


    .hero-kitten__content {
        grid-column: span 6;
    }

    .hero-kitten__content h1 {
        font-size: 3rem;
    }

    .hero-kitten__img {
        grid-column: span 6;
    }

    .hero-kitten__btn {
        flex-direction: row;
        gap: 1.5em;
    }

    .hero-btn {
        padding: .8em 1.8em;
        border-radius: calc(var(--radius) + 1rem);
        cursor: pointer;
    }

    .resources-kitten,
    .about-kitten,
    .testimony-kitten,
    .practice-kitten {
        padding: 6em 1.5em;
    }

    .resources-kitten__card {
        grid-template-columns: repeat(12, 1fr);
    }

    .resources-card {
        grid-column: span 6;
    }

    .testimony-kitten__card {
        grid-template-columns: repeat(12, 1fr);
        grid-template-rows: 1fr 1fr;
    }

    .testimony-card {
        grid-column: span 6;

    }

    .practice-kitten__btn {
        flex-direction: row;
        justify-content: center;
    }


    .footer-kitten {
        grid-template-rows: 1fr ;
        padding: 4em 2em;
    }

    .footer-kitten__info {
        grid-column: span 4;
    }


    .footer-kitten__products {
        grid-column: span 3;
        grid-row: 1;
    }

    .footer-kitten__company {
        grid-column: span 3;
        grid-row: 1;
    }

    .footer-kitten__support {
        grid-column: span 2;
        grid-row: 1;
    }

    .footer-kitten__copyright {
        grid-column: span 12;
        grid-row: 2;

        
        flex-direction: row;
        justify-content: space-between;
    }

    .footer-kitten a {
        transition: color .5s ease;
    }


}

@media screen and (min-width: 64em) {


    .hero-kitten__content h1 {
        font-size: 3.5rem;
        max-width: 15ch;
    }

    .hero-kitten__content {
        align-content: center;
    }
    .hero-kitten__img{
        min-width: 31.875em;
        min-height: 31.875em;
    }

    .resources-kitten__content h2,
    .practice-kitten__content h2 {
        font-size: 2.3rem;
    }

    .resources-kitten__content p {
        margin: 0 7em;
    }

    .resources-kitten__card {
        grid-template-rows: 1fr;
    }

    .resources-card {
        grid-column: span 3;
    }

    .about-kitten {
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        gap: 1em;
    }

    .about-kitten__content {
        grid-column: span 8;
    }

    .about-kitten__content h2 {
        font-size: 2.2rem;
        margin-right: 5em;
    }

    .about-kitten__btn {
        padding: .8em 1.5em;
        font-size: 1rem;
    }

    .about-kitten__img {
        grid-column: span 4;
        margin: 8em 0;
    }

    .testimony-kitten__content h2 {
        font-size: 2.2rem;
    }

    .testimony-kitten__content p {
        text-align: center;
        margin: 0 4em;
    }

    .testimony-kitten__card {
        grid-template-rows: 1fr;
    }

    .testimony-card {
        grid-column: span 4;
    }

    .practice-kitten__content p {
        margin: 0 5em 1.8em;
    }
}

@media screen and (min-width: 80em) {

    .hero-kitten__content{
        align-content: center;
    }

    .hero-kitten__content h1{
        padding-right: 0;
        margin-right: 0;
        font-size: 3.75rem;
    }

    .hero-kitten__content p{
        margin-right: 5em;
        
    }
    
   .hero-kitten__img{
    min-height: 37em;
    min-width: 37em;
   }

   .resources-kitten__content p {
    margin: 0 15em;
   }

   .about-kitten__content h2{
    margin-right: 10em;
   }


     .about-kitten__img {
        min-width: 25.6875em;
        min-height: 25.6875em;
        margin: 5em 0;
     }

     .testimony-kitten__content p{
        margin: 0 14em;
     }
}


/*===== 
DESKTOP 
=======*/

@media (hover: hover) and (pointer: fine) {
    .navbar-kitten__menu a:hover {
        color: var(--primary-color);
    }

    .header-kitten__btn:hover,
    .hero-btn__pink:hover,
    .practice-btn:hover,
    .about-kitten__btn:hover {
        transform: scale(1.03);
        filter: var(--drop-shadow-button);
    }

    .hero-btn__white:hover {
        filter: var(--drop-shadow-button);
    }

    .resources-card:hover,
    .testimony-card:hover {
        transform: translateY(-6px);
        filter: var(--drop-shadow-card);
        border: 1px solid var(--primary-color);
    }

    .lucide-circle-check:hover {
        transform: scale(1.02);
    }

    .footer-kitten a:hover {
        color: var(--primary-color);
    }
}

/*==== 
MOBILE 
======*/

@media (hover:none) and (pointer: coarse) {
    .navbar-kitten__menu a:active {
        color: var(--primary-color);
    }

    .header-kitten__btn:active,
    .hero-btn__pink:active,
    .practice-btn:active,
    .about-kitten__btn:active {
        transform: scale(0.97);
        filter: none;
    }

    .footer-kitten a:hover {
        color: var(--primary-color);
    }


}


/*======= 
ANIMAÇÃO     
=========*/

@keyframes heart {
    0% {
        transform: scale(1);
    }

    100% {
        transform: scale(1.06);
    }
}