:root {
    /* primary colors */
    --green: hsl(95, 36%, 32%);

    /* neutral colors */
    --gray: hsl(0, 0%, 59%);
    --backgrond-gray: hsl(0, 0%, 89%);
    --white: hsl(0, 0%, 100%);

    --light-green: hsl(90, 52%, 51%);

    /* typography */
    --fs-regular: 18px;

    --fw-400: 400;
    --fw-700: 700;
}

html {
    scroll-behavior: smooth;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'system-ui', sans-serif;
}

body {
    background: var(--backgrond-gray);
}

a {
    text-decoration: none;
}

/* navbar */
.navbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--white);
    padding: 1rem;
    width: 100%;
}

.navbar .logo {
    width: 70px;
}

.logo_container {
    display: flex;
    gap: 1rem;
    color: var(--light-green);
}

.navbar > .text {
    color: var(--light-green);
}

.cta {
    background: var(--light-green);
    color: var(--white);
    padding: .8rem;
    border-radius: 4px;
}

.cta:hover {
    background: #000;
}

/* main section */
.main_container {
        display: grid;
    grid-template-columns: 30% 70%;
    grid-template-rows: auto 1fr; /* Updated line */
    align-items: self-start;
    justify-content: center;
    padding: 2rem 10%;
    gap: 11%;

}

/* sidebar */
.sidebar {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    position: relative;
    
}

.sidebar_box {
    padding: 2rem ;
    background: var(--white);
}

.sidebar_title {
    color: var(--green);
}
/* register box */
.sidebar_box  > .registration_content {
    color: var(--gray);
    padding-block: 1rem;
}

.sidebar_box > .cta {
    background: var(--green);
    color: var(--white);
    text-align: center;
    padding: .4rem .8rem;
    width: 100%;
}

/* top sellers */
.top_sellers_content .content_list {
    display: flex;
    align-items: center;
    gap: 2rem;
    border-bottom: 1px solid var(--gray);
    padding-bottom: .9rem;
    padding-top: 1rem;
}

.content_list h1 {
    font-size: 2.6rem;
}

.content_list:last-child {
    border-bottom: none;
}

.content_list .list_content h2 a {
    color: #000;
}

.content_list .list_content h2 a:hover {
    cursor: pointer;
    color: var(--green);
}

.content_list .list_content p {
    font-size: var(--fs-regular);
    color: var(--gray);
    font-weight: var(--fw-400);
}

/* socials */
.socials .social_link a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 1.4rem;
    padding-block: 1rem;
    color: #000;
}

.socials .social_link  {
    border-bottom: 1px solid var(--gray);
}

.socials .social_link:last-child {
    border-bottom: none;
}

/* main block */
.main_block {
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
}

.blog_card  {
    padding: 2rem;
    border-radius: 1rem;
    background: var(--white);
}

.blog_card_container {
    display: flex;
    gap: 2rem;
}


.blog_product_img > img {
    width: 100%;
}

.blog_content .product_title {
    font-size: 2.56rem;
    text-transform: uppercase;
    border-bottom: 1px solid var(--gray);
    color: var(--green);
}

.blog_content .undetailed_product_content {
    padding-top: 1rem;
    color: var(--gray);
    font-size: var(--fs-regular);
    line-height: 2rem;
}

.blog_content .undetailed_product_content .benefits{
    padding-top: 1rem;
}

.blog_content .undetailed_product_content ul li {
    font-size: 14px;
}

.blog_card_footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid var(--gray);
    padding-top: 1rem;
}

.blog_card_footer,
.blog_card_footer > a {
    color: var(--light-green)   ;
}

/* footer */
.footer {
    background: var(--white);
    padding-block: 1.86rem;
}

.footer_logo {
    height: 80px;
    width: 80px;
}

.footer_img_box {
    display: flex;
    align-items: center;
    gap: 1rem;
    color: var(--light-green);
}

.footer_container {
    display: grid;
    grid-template-columns: repeat(3, .5fr);
    grid-gap: 2rem;
    padding: 2.5rem;
}

.footer_box h2 {
    color: var(--light-green);
    font-weight: var(--fw-400);
}

.footer_box p {
    padding-block: 1.25rem;
}

.footer_box > .cta:hover {
    background: #000;
    transition: .2s ease-in-out;
}

.footer_box > .cta {
    background: var(--green);
    color: var(--white);
    text-align: center;
    padding: .4rem .7rem;
}

.footer_box .footer_social_links {
    display: flex;
    font-size: 2rem;
    gap: 2rem;
}

.footer_box .footer_social_links a {
    color: var(--green);
}

.footer_box .footer_social_links a:hover {
    color: var(--light-green);
}

.footer > .copyright_text {
    text-align: center;
    padding-block: 2rem;
    width: 100%;
    border-top: 1px solid var(--light-green);
}

.copyright_text a {
    color: var(--light-green);
}

/* media queries */
@media (max-width: 35em) {
    /* sidebar */
    .sidebar {
        display: none;
    }

    /* main container */
    .main_container {
        grid-template-columns: 1fr;
        padding-top: 4rem;
    }

    /* blog card */
    .blog_card_container {
        flex-direction: column;
        text-align: center;
    }

    .blog_card_footer {
        flex-direction: column;
        gap: 1rem;
    }

    /* footer */
    .footer_container {
        grid-template-columns: 1fr;
    }
}