/**
Name: ga-design-two.css
Author: UI Team
Version: 1.0.4
Lat Update: 13 Feb 2025
**/
:root {
    --white: #ffffff;
    --black: #000000;
    --primary-color-blue: rgba(0, 50, 67, 1);
    --bg-blue: rgba(0, 50, 67, 1);
    --bg-light-blue: rgba(73, 138, 184, 1);
    --border-pink: rgba(232, 0, 113, 0.16);
    --text-primary: rgba(0, 19, 37, 0.92);
    --text-secondary: rgba(0, 19, 37, 0.16);
    --text-tertiary: rgba(0, 19, 37, 0.64);
    --bg-grey: rgba(243, 244, 245, 1);
}
.article-wrapper {
    font-family: 'Inter', sans-serif;
    margin: 0 auto;
    padding: 0;
    color: var(--text-primary);
    max-width: 640px;
}
.article-wrapper a {
    text-decoration: none;
    color: var(--bg-light-blue);
}
.article-wrapper h2 a,
.article-wrapper h3 a,
.article-wrapper h4 a {
    color: var(--primary-color-blue);
}
.article-wrapper p a {
    color: var(--bg-light-blue);
}
.article-wrapper h2,
.article-wrapper h3 {
    margin: 32px 0 16px 0;
}
.article-wrapper h3 {
    margin: 8px 0;
}
.article-wrapper h4 {
    margin: 4px 0;
}
.article-wrapper ul,
.article-wrapper ol {
    padding: 0 20px;
    margin: 0;
}
.article-wrapper p {
    margin: 8px 0;
}
.article-wrapper .responsive-img {
    width: 100%;
}
.article-wrapper .article-summary {
    background-color: var(--bg-grey);
    border-left: 4px solid var(--bg-light-blue);
    border-radius: 4px 0 0 4px;
    margin: 0 0 32px 0;
    padding: 12px;
    font-style: italic;
}
.article-wrapper .article-banner {
    margin-bottom: 16px;
    border-radius: 8px;
    overflow: hidden;
}
.article-wrapper .article-index {
    background-color: var(--bg-grey);
    border-left: 4px solid var(--bg-light-blue);
    border-radius: 4px 0 0 4px;
    margin: 32px auto;
    padding: 12px;
    max-width: 480px;
}
.article-wrapper .article-index ul {
    color: var(--primary-color-blue);
}
.article-wrapper .article-index ul li {
    margin: 8px 0;
}
.article-wrapper .article-index ul li a {
    color: var(--bg-light-blue);
    font-style: italic;
}
.article-wrapper .product-card {
    display: flex;
    max-width: 190px;
    flex-direction: column;
    background: var(--white);
    padding: 12px;
    box-shadow: 0px 2px 8px -2px rgba(17, 19, 20, 0.16);
    justify-content: center;
    margin: 0;
    border-radius: 6px;
    box-sizing: border-box;
}
.article-wrapper .product-card .product-image {
    max-width: 166px;
    max-height: 166px;
    margin-bottom: 8px;
    margin: 0 auto;
}
.article-wrapper .product-card .product-info {
    padding: 0;
}
.article-wrapper .product-card .product-button {
    padding: 10px 8px;
    background: var(--primary-color-blue);
    border-radius: 20px;
    color: var(--white);
    display: flex;
    text-align: center;
    justify-content: center;
    margin-top: 20px;
}
.article-wrapper .product-card .product-button::after {
    content: '';
    width: 16px;
    height: 16px;
    background: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M17.4555 5.81027H13.6836V5.54572C13.7713 3.42932 12.1046 1.66565 9.99935 1.66565C7.89409 1.75383 6.31514 3.42932 6.31514 5.54572V5.81027H2.54321C2.01689 5.81027 1.66602 6.163 1.66602 6.6921V13.9231C1.66602 16.3923 3.59584 18.3323 6.05198 18.3323H13.9467C16.4029 18.3323 18.3327 16.3923 18.3327 13.9231V6.6921C18.3327 6.25119 17.9818 5.81027 17.4555 5.81027ZM7.63093 5.54572C7.63093 4.22297 8.68356 3.07658 9.99935 2.9884C11.3151 3.07658 12.3678 4.22297 12.3678 5.54572V5.81027H7.63093V5.54572ZM17.0169 14.0113C17.0169 15.6868 15.6134 17.0977 13.9467 17.0977H6.05198C4.38531 17.0977 2.98181 15.6868 2.98181 14.0113V7.13302H6.31514V8.89669C6.1397 9.07306 6.05198 9.33761 6.05198 9.51397C6.05198 10.0431 6.49058 10.3958 6.92917 10.3958C7.36777 10.3958 7.80637 9.95489 7.80637 9.51397C7.80637 9.24942 7.71865 9.07306 7.54321 8.89669V7.13302H12.2801V8.80851C12.1046 8.98487 12.0169 9.24942 12.0169 9.51397C12.0169 10.0431 12.3678 10.484 12.8941 10.484C13.4204 10.484 13.859 10.1313 13.859 9.60216C13.859 9.33761 13.7713 9.16124 13.5958 8.98487V7.22121H17.0169V14.0113Z' fill='white'/%3E%3C/svg%3E%0A");
    display: inline-block;
    margin-left: 4px;
    background-size: 100%;
}
.article-wrapper .truncate-two-lines {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.article-wrapper .instagram-box {
    margin: 16px auto;
}
.article-wrapper .artcile-image {
    margin: 16px auto;
}
.article-wrapper .product-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 18px;
}
/*css overwrite for new design*/
.single-article-section {
    max-width: 640px;
    margin: auto;
    padding: 16px 20px;
}
.single-article-section .single-article {
    padding: 0;
    margin-top: 16px;
}
.single-article-section .article-title {
    font-family: 'Inter', sans-serif;
    padding: 0;
    margin: 8px 0 16px;
    text-transform: inherit;
    font-size: 20px;
    font-weight: 600;
    line-height: 24px;
    letter-spacing: -0.1px;
}
.category-tag a.action-link {
    padding: 6px 12px;
    border: 1px solid var(--text-secondary);
    color: var(--text-tertiary);
    border-radius: 36px;
    margin-bottom: 8px;
    display: inline-block;
    text-transform: capitalize;
}
/*css for horizontal product card*/
.article-wrapper .inner-card {
    display: flex;
    flex-direction: row
}
.article-wrapper .product-card.horizontal {
    max-width: 312px;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}
.article-wrapper .product-grid .card-slider {
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
}
/*css for desktop */
@media screen and (min-width: 769px) {
    .single-article-section {
        padding: 16px 0;
    }
    .article-wrapper .instagram-box {
        max-width: 320px;
    }
    .article-wrapper .artcile-image {
        max-width: 380px;
    }
    .single-article-section .article-title {
        font-size: 32px;
        font-weight: 600;
        line-height: 36px;
        letter-spacing: -0.3px;
    }

}
@media screen and (max-width: 767px) {
    .article-wrapper .product-grid .card-slider {
        flex-wrap: nowrap;
        overflow-x: auto;
        justify-content: flex-start;
    }
}