/*====================================================
1200px - Laptop / Small Desktop
====================================================*/

@media (max-width:1200px) {

    /*==========================
    HOME
    ==========================*/

    .post-grid {

        grid-template-columns: repeat(2, 1fr);

    }

    .latest-grid {

        grid-template-columns: repeat(2, 1fr);

    }


    /*==========================
    POST
    ==========================*/

    .post-layout {

        grid-template-columns: 1fr;

    }

    .sidebar {

        position: static;

        margin-top: 60px;

    }


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

    .navbar {

        height: 80px;

        gap: 20px;

    }

    .logo img {

        height: 50px;

    }

    .menu {

        gap: 22px;

    }

    .menu {

        display: flex;

    }



    .menu a {

        font-size: 14px;

    }

    .search-box {

        flex-shrink: 0;
        display: block;

    }

    .search-box input {

        width: 180px;

        height: 42px;

        font-size: 14px;

    }

    .menu-toggle {

        display: none;

    }

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

    .hero {

        padding: 50px 0;

    }

    .hero-grid {

        gap: 30px;

    }

    .featured-card img {

        height: 460px;

    }

    .featured-content {

        padding: 24px;

    }

    .featured-content h2 {

        font-size: 32px;

    }

    .latest-posts h3 {

        font-size: 30px;

    }

    .latest-post h4 {

        font-size: 22px;

    }

    /*==========================
BRANDS
==========================*/

    .topics {

        padding: 70px 0;

    }

    .brand-grid {

        gap: 24px;

        margin-bottom: 50px;

    }

    .brand-card img {

        height: 240px;

    }

    .topics-header h2 {

        font-size: 60px;

    }

    /*==========================
POPULAR TOPICS
==========================*/

    .topics-header {

        gap: 30px;

    }

    .topics-header p {

        font-size: 18px;

    }

    .topic-buttons {

        gap: 12px;

    }

    .topic-btn {

        padding: 14px 26px;

        font-size: 15px;

    }

    /*==========================
CATEGORY SECTION
==========================*/

    .category-section {

        padding: 70px 0;

    }

    .section-title {

        font-size: 34px;

        margin-bottom: 35px;

    }

    .post-grid {

        gap: 24px;

    }

    .post-card img {

        height: 260px;

    }

    .post-content {

        padding: 22px;

    }

    .post-content h3 {

        font-size: 22px;

    }

    .post-content p {

        font-size: 15px;

    }

    .view-more-btn {

        padding: 14px 34px;

    }

    /*==========================
LATEST REVIEWS
==========================*/

    .latest-section {

        padding: 70px 0;

    }

    .latest-grid {

        gap: 24px;

    }

    .latest-card img {

        height: 250px;

    }

    .latest-content {

        padding: 18px;

    }

    .latest-content h3 {

        font-size: 24px;

    }

    /*==========================
NEWSLETTER
==========================*/

    .newsletter {

        padding: 70px 0;

    }

    .newsletter-grid {

        gap: 40px;

    }

    .footer-newsletter {

        padding: 35px;

    }

    .footer-newsletter h3 {

        font-size: 32px;

    }

    .footer-newsletter p {

        font-size: 16px;

    }

    .footer-newsletter input {

        height: 52px;

    }

    .footer-newsletter button {

        height: 52px;

    }

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

    .footer {

        padding: 70px 0 30px;

    }

    .footer-grid {

        gap: 40px;

    }

    .footer-column h3 {

        font-size: 22px;

    }

    .footer-column a {

        font-size: 15px;

    }

    .footer-logo img {

        height: 52px;

    }

    .footer-bottom {

        margin-top: 40px;

        padding-top: 25px;

    }

    /*==========================
CATEGORY FEATURED
==========================*/

    .featured-section {

        margin: 60px 0;

    }

    .featured-category-card {

        grid-template-columns: 55% 45%;

    }

    .featured-left {

        height: 520px;

    }

    .featured-right {

        padding: 45px;

    }

    .featured-right h2 {

        font-size: 42px;

    }

    .featured-right p {

        font-size: 18px;

        margin: 28px 0;

    }

    .featured-meta {

        gap: 20px;

    }

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

    .category-hero {

        padding: 80px 0;

    }

    .category-hero h1 {

        max-width: 800px;

        font-size: 56px;

    }

    .category-hero p {

        max-width: 650px;

        font-size: 18px;

    }

    .category-hero span {

        letter-spacing: 3px;

    }

    /*==========================
CATEGORY POSTS
==========================*/

    .category-posts {

        margin-bottom: 70px;

    }

    .post-grid {

        grid-template-columns: repeat(3, 1fr);

        gap: 26px;

    }

    .post-card img {

        height: 240px;

    }

    .post-content {

        padding: 18px;

    }

    .post-content h3 {

        font-size: 22px;

    }

    .post-content p {

        font-size: 15px;

    }

    /*==========================
CATEGORY SIDEBAR
==========================*/

    .category-layout {

        grid-template-columns: 2fr 320px;

        gap: 40px;

    }

    .category-sidebar {

        position: sticky;

        top: 100px;

    }

    .sidebar-box {

        padding: 25px;

        margin-bottom: 30px;

    }

    /*==========================
PAGINATION
==========================*/

    .pagination-section {

        margin: 70px 0;

    }

    .pagination {

        gap: 12px;

    }

    .page-btn {

        width: 46px;

        height: 46px;

        font-size: 16px;

    }

    /*==================================
POST LAYOUT
==================================*/

    .post-layout {

        grid-template-columns: 2fr 300px;

        gap: 40px;

    }

    /*==================================
POST FEATURED IMAGE
==================================*/

  .post-image{

    width:100%;

    overflow:hidden;

    border-radius:16px;

}

.post-image img{

    width:100%;

    aspect-ratio:16/9;

    object-fit:cover;

}

    /*==================================
POST TYPOGRAPHY
==================================*/

    .post-title {

        font-size: 48px;

        line-height: 1.2;

    }

    .post-meta {

        gap: 18px;

        font-size: 15px;

    }

    .post-content {

        font-size: 19px;

        line-height: 1.8;

    }

    /*==================================
POST SIDEBAR
==================================*/

    .post-layout {

        grid-template-columns: 2fr 300px;

        gap: 40px;

    }

    #sidebar {

        top: 90px;

    }

    /*==================================
RELATED POSTS
==================================*/

    .related-posts {

        margin-top: 70px;

    }

    .related-grid {

        gap: 24px;

    }

    .related-card img {

        height: 240px;

    }

    /*==================================
SEARCH PAGE
==================================*/

    .search-page {

        padding: 70px 0;

    }

    .search-grid {

        gap: 24px;

    }

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

    .about-hero {

        padding: 100px 0;

    }

    .about-hero h1 {

        font-size: 56px;

    }

    .about-hero p {

        font-size: 18px;

    }

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

    .about-story {

        padding: 80px 0;

    }

    .story-grid {

        gap: 60px;

    }

    .story-content h2 {

        font-size: 42px;

    }

    /*==================================
WHY TRUST
==================================*/

    .about-trust {

        padding: 80px 0;

    }

    .trust-grid {

        gap: 24px;

    }

    .trust-card {

        padding: 32px;

    }

    /*==================================
CATEGORIES
==================================*/

    .about-categories {

        padding: 80px 0;

    }

    .categories-grid {

        gap: 24px;

    }

    .category-box {

        padding: 30px;

    }

    /*==================================
PROCESS
==================================*/

    .about-process {

        padding: 80px 0;

    }

    .process-grid {

        gap: 24px;

    }

    .process-card {

        padding: 30px;

    }

    /*==================================
CTA
==================================*/

    .about-cta {

        padding: 100px 0;

    }

    .cta-content h2 {

        font-size: 48px;

    }

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

    .contact-hero {

        padding: 100px 0;

    }

    .contact-hero h1 {

        font-size: 56px;

    }

    .contact-hero p {

        font-size: 18px;

    }

    /*==================================
CONTACT CONTENT
==================================*/

    .contact-content {

        padding: 80px 0;

    }

    .contact-layout {

        gap: 40px;

    }

    .contact-form {

        padding: 35px;

    }

    .info-card {

        padding: 30px;

    }

    .contact-form h2 {

        font-size: 34px;

    }

    .info-card h2 {

        font-size: 30px;

    }

    /*==================================
PRIVACY PAGE
==================================*/

    .privacy-hero {

        padding: 100px 0;

    }

    .privacy-hero h1 {

        font-size: 56px;

    }

    .privacy-hero p {

        font-size: 18px;

    }

    .privacy-content {

        padding: 80px 0;

    }

    .policy-container {

        max-width: 850px;

    }

    .policy-section h2 {

        font-size: 34px;

    }

    .policy-toc {

        padding: 30px;

    }

    /*==================================
TERMS PAGE
==================================*/

    .terms-hero {

        padding: 100px 0;

    }

    .terms-hero h1 {

        font-size: 56px;

    }

    .terms-hero p {

        font-size: 18px;

    }

    .terms-content {

        padding: 80px 0;

    }

    .terms-container {

        max-width: 850px;

    }

    .terms-section h2 {

        font-size: 34px;

    }

    .terms-toc {

        padding: 30px;

    }

    /*==================================
NEWS PAGE
==================================*/

    .news-layout {

        grid-template-columns: 1fr 320px;

        gap: 40px;

    }

    .featured-news-card {

        gap: 40px;

    }

    .featured-image img {

        height: 460px;

    }

    .featured-title {

        font-size: 40px;

    }

    .latest-news-grid {

        gap: 24px;

    }

    .news-card img {

        height: 230px;

    }

}

/*====================================================
992px - Tablet
====================================================*/

@media (max-width:992px) {

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

    .container {

        width: 95%;

    }

    .navbar {

        height: 72px;

    }

    .logo img {

        height: 44px;

    }

    .menu {

        display: none;

    }

    .search-box {

        display: none;

    }

    .menu-toggle {

        display: flex;

        justify-content: center;

        align-items: center;

    }

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

    .hero {

        padding: 40px 0;

    }

    .hero-grid {

        grid-template-columns: 1fr;

        gap: 40px;

    }

    .featured-card img {

        height: 420px;

    }

    .featured-content {

        text-align: left;

    }

    .latest-posts {

        margin-top: 10px;

    }

    /*==========================
BRANDS
==========================*/

    .topics {

        padding: 60px 0;

    }

    .brand-grid {

        grid-template-columns: 1fr;

        gap: 24px;

    }

    .brand-card img {

        height: 320px;

    }

    .topics-header {

        flex-direction: column;

        align-items: flex-start;

        gap: 30px;

    }

    .topics-header h2 {

        font-size: 48px;

    }

    .topic-buttons {

        width: 100%;

    }

    /*==========================
POPULAR TOPICS
==========================*/

    .topics-header {

        flex-direction: column;

        align-items: flex-start;

        gap: 25px;

    }

    .topics-header h2 {

        font-size: 48px;

    }

    .topic-buttons {

        width: 100%;

        display: flex;

        flex-wrap: wrap;

        gap: 15px;

    }

    .topic-btn {

        flex: 1 1 calc(50% - 8px);

        text-align: center;

    }

    /*==========================
CATEGORY SECTION
==========================*/

    .category-section {

        padding: 60px 0;

    }

    .section-title {

        font-size: 30px;

        margin-bottom: 30px;

    }

    .post-grid {

        grid-template-columns: repeat(2, 1fr);

        gap: 22px;

    }

    .post-card img {

        height: 240px;

    }

    .post-content {

        padding: 20px;

    }

    .post-content h3 {

        font-size: 20px;

    }

    .section-btn {

        margin-top: 35px;

    }

    /*==========================
LATEST REVIEWS
==========================*/

    .latest-section {

        padding: 60px 0;

    }

    .latest-grid {

        grid-template-columns: repeat(2, 1fr);

        gap: 22px;

    }

    .latest-card img {

        height: 220px;

    }

    .latest-content {

        padding: 18px;

    }

    .latest-content h3 {

        font-size: 20px;

    }

    /*==========================
NEWSLETTER
==========================*/

    .newsletter {

        padding: 60px 0;

    }

    .newsletter-grid {

        grid-template-columns: 1fr;

        gap: 30px;

    }

    .footer-newsletter {

        max-width: 650px;

        margin: 0 auto;

    }

    .footer-newsletter h3 {

        font-size: 30px;

    }

    .footer-newsletter input {

        width: 100%;

    }

    .footer-newsletter button {

        width: 100%;

        margin-top: 15px;

    }

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

    .footer {

        padding: 60px 0 30px;

    }

    .footer-grid {

        grid-template-columns: repeat(2, 1fr);

        gap: 35px;

    }

    .footer-column {

        text-align: left;

    }

    .footer-logo {

        margin-bottom: 20px;

    }

    .footer-bottom {

        text-align: center;

    }

    /*==========================
CATEGORY FEATURED
==========================*/

    .featured-category-card {

        grid-template-columns: 1fr;

    }

    .featured-left {

        height: 420px;

    }

    .featured-right {

        padding: 35px;

    }

    .featured-right h2 {

        font-size: 34px;

    }

    .featured-right p {

        font-size: 17px;

    }

    .featured-meta {

        flex-wrap: wrap;

        gap: 15px;

    }

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

    .category-hero {

        padding: 70px 0;

    }

    .category-hero h1 {

        max-width: 700px;

        font-size: 46px;

        line-height: 1.2;

    }

    .category-hero p {

        max-width: 600px;

        font-size: 17px;

        line-height: 1.7;

    }

    .category-hero span {

        font-size: 13px;

    }

    /*==========================
CATEGORY POSTS
==========================*/

    .category-posts {

        margin-bottom: 60px;

    }

    .post-grid {

        grid-template-columns: repeat(2, 1fr);

        gap: 24px;

    }

    .post-card img {

        height: 220px;

    }

    .post-content {

        padding: 18px;

    }

    .post-content h3 {

        font-size: 20px;

        line-height: 1.4;

    }

    .post-content p {

        font-size: 15px;

        line-height: 1.6;

    }

    /*==========================
CATEGORY SIDEBAR
==========================*/

    .category-layout {

        grid-template-columns: 1fr;

    }

    .category-sidebar {

        position: static;

        margin-top: 50px;

    }

    .sidebar-box {

        padding: 25px;

    }

    /*==========================
PAGINATION
==========================*/

    .pagination-section {

        margin: 60px 0;

    }

    .pagination {

        flex-wrap: wrap;

        justify-content: center;

        gap: 10px;

    }

    .page-btn {

        width: 44px;

        height: 44px;

        font-size: 15px;

    }

    /*==================================
POST LAYOUT
==================================*/

    .post-layout {

        grid-template-columns: 1fr;

    }

    .post-main {

        order: 1;

    }

    #sidebar {

        order: 2;

        margin-top: 50px;

    }

    /*==================================
POST FEATURED IMAGE
==================================*/

    .post-image {

        height: 420px;

        border-radius: 14px;

        margin-bottom: 30px;

    }

    /*==================================
POST TYPOGRAPHY
==================================*/

    .post-title {

        font-size: 40px;

        line-height: 1.25;

    }

    .post-meta {

        flex-wrap: wrap;

        gap: 12px;

        font-size: 14px;

    }

    .post-content {

        font-size: 18px;

        line-height: 1.8;

    }

    /*==================================
POST SIDEBAR
==================================*/

    .post-layout {

        grid-template-columns: 1fr;

    }

    #sidebar {

        position: static;

        margin-top: 50px;

    }

    /*==================================
RELATED POSTS
==================================*/

    .related-posts {

        margin-top: 60px;

    }

    .related-grid {

        grid-template-columns: repeat(2, 1fr);

        gap: 22px;

    }

    .related-posts h2 {

        font-size: 34px;

    }

    /*==================================
SEARCH PAGE
==================================*/

    .search-page {

        padding: 60px 0;

    }

    .search-grid {

        grid-template-columns: repeat(2, 1fr);

        gap: 22px;

    }

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

    .about-hero {

        padding: 80px 0;

    }

    .about-hero h1 {

        font-size: 48px;

    }

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

    .story-grid {

        grid-template-columns: 1fr;

        gap: 50px;

    }

    .story-content {

        max-width: 100%;

    }

    .story-image {

        order: -1;

    }

    /*==================================
WHY TRUST
==================================*/

    .trust-grid {

        grid-template-columns: repeat(2, 1fr);

    }

    /*==================================
CATEGORIES
==================================*/

    .categories-grid {

        grid-template-columns: repeat(2, 1fr);

    }

    /*==================================
PROCESS
==================================*/

    .process-grid {

        grid-template-columns: repeat(2, 1fr);

    }

    /*==================================
CTA
==================================*/

    .cta-content h2 {

        font-size: 42px;

    }

    /*==================================
CONTACT PAGE
==================================*/

    .contact-hero {

        padding: 80px 0;

    }

    .contact-hero h1 {

        font-size: 48px;

    }

    .contact-layout {

        grid-template-columns: 1fr;

        gap: 50px;

    }

    .contact-info {

        position: static;

    }

    .contact-form {

        order: 1;

    }

    .contact-info {

        order: 2;

    }

    /*==================================
PRIVACY PAGE
==================================*/

    .privacy-hero {

        padding: 80px 0;

    }

    .privacy-hero h1 {

        font-size: 48px;

    }

    .privacy-hero p {

        font-size: 18px;

    }

    .policy-container {

        max-width: 100%;

    }

    .policy-section {

        margin-bottom: 60px;

    }

    .policy-section h2 {

        font-size: 32px;

    }

    .policy-toc {

        padding: 28px;

    }

    /*==================================
TERMS PAGE
==================================*/

    .terms-hero {

        padding: 80px 0;

    }

    .terms-hero h1 {

        font-size: 48px;

    }

    .terms-hero p {

        font-size: 18px;

    }

    .terms-container {

        max-width: 100%;

    }

    .terms-section {

        margin-bottom: 60px;

    }

    .terms-section h2 {

        font-size: 32px;

    }

    .terms-toc {

        padding: 28px;

    }

    .news-layout {

        grid-template-columns: 1fr;

    }

    .featured-news-card {

        grid-template-columns: 1fr;

    }

    .featured-image img {

        height: 420px;

    }

    .featured-title {

        font-size: 36px;

    }

    .latest-news-grid {

        grid-template-columns: repeat(2, 1fr);

    }

}

/* RESPONSIVE MOBILE */
@media(max-width:768px) {

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

    .navbar {

        height: 68px;

    }

    .logo img {

        height: 40px;

    }

    .menu {

        display: none;

    }

    .search-box {

        display: none;

    }

    .menu-toggle {

        display: flex;

    }

    .hero-grid {

        grid-template-columns:
            1fr;
    }

    .brand-grid {

        grid-template-columns:
            1fr;
    }

    .post-grid {

        grid-template-columns:
            1fr;
    }

    .latest-grid {

        grid-template-columns:
            1fr;
    }

    .newsletter-grid {

        grid-template-columns:
            1fr;
    }

    .footer-grid {

        grid-template-columns:
            1fr;
    }

    /* SIDEBAR */
    .sidebar {

        padding: 25px;

    }

    .popular-item {

        flex-direction: column;

    }

    .popular-item img {

        width: 100%;

        height: 180px;

    }

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

    .hero {

        padding: 30px 0;

    }

    .featured-card {

        border-radius: 16px;

    }

    .featured-card img {

        height: 300px;

    }

    .featured-content {

        padding: 20px;

    }

    .featured-content h2 {

        font-size: 28px;

    }

    .featured-content p {

        font-size: 15px;

    }

    .latest-posts h3 {

        font-size: 26px;

    }

    .latest-post {

        padding: 18px 0;

    }

    .latest-post h4 {

        font-size: 18px;

    }

    /*==========================
BRANDS
==========================*/

    .topics {

        padding: 50px 0;

    }

    .brand-card {

        border-radius: 14px;

    }

    .brand-card img {

        height: 240px;

    }

    .topics-header h2 {

        font-size: 36px;

    }

    .topic-buttons {

        gap: 12px;

    }

    .topic-btn {

        padding: 14px 20px;

        font-size: 14px;

    }

    /*==========================
POPULAR TOPICS
==========================*/

    .topics-header h2 {

        font-size: 36px;

    }

    .topics-header p {

        font-size: 16px;

    }

    .topic-buttons {

        gap: 12px;

    }

    .topic-btn {

        flex: 1 1 100%;

        padding: 15px;

        font-size: 15px;

    }

    /*==========================
CATEGORY SECTION
==========================*/

    .category-section {

        padding: 50px 0;

    }

    .section-title {

        font-size: 26px;

        margin-bottom: 25px;

        text-align: center;

    }

    .post-grid {

        grid-template-columns: 1fr;

        gap: 24px;

    }

    .post-card {

        border-radius: 14px;

    }

    .post-card img {

        height: 240px;

    }

    .post-content {

        padding: 18px;

    }

    .post-content h3 {

        font-size: 20px;

        line-height: 1.4;

    }

    .post-content p {

        font-size: 15px;

    }

    .section-btn {

        text-align: center;

    }

    /*==========================
LATEST REVIEWS
==========================*/

    .latest-section {

        padding: 50px 0;

    }

    .latest-grid {

        grid-template-columns: 1fr;

        gap: 24px;

    }

    .latest-card {

        border-radius: 14px;

    }

    .latest-card img {

        height: 240px;

    }

    .latest-content {

        padding: 18px;

    }

    .latest-content h3 {

        font-size: 20px;

        line-height: 1.5;

    }

    /*==========================
NEWSLETTER
==========================*/

    .newsletter {

        padding: 50px 0;

    }

    .footer-newsletter {

        padding: 25px;

    }

    .footer-newsletter h3 {

        font-size: 26px;

        text-align: center;

    }

    .footer-newsletter p {

        text-align: center;

        font-size: 15px;

    }

    .footer-newsletter input {

        height: 48px;

        font-size: 15px;

    }

    .footer-newsletter button {

        height: 48px;

        font-size: 15px;

    }

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

    .footer {

        padding: 50px 0 25px;

    }

    .footer-grid {

        grid-template-columns: 1fr;

        gap: 30px;

    }

    .footer-column {

        text-align: center;

    }

    .footer-logo {

        display: flex;

        justify-content: center;

    }

    .footer-logo img {

        height: 46px;

    }

    .footer-column h3 {

        font-size: 20px;

    }

    .footer-column ul {

        padding: 0;

    }

    .footer-column li {

        margin-bottom: 12px;

    }

    /*==========================
CATEGORY FEATURED
==========================*/

    .featured-section {

        margin: 40px 0;

    }

    .featured-left {

        height: 300px;

    }

    .featured-right {

        padding: 25px;

    }

    .featured-right span {

        font-size: 13px;

    }

    .featured-right h2 {

        font-size: 28px;

    }

    .featured-right p {

        font-size: 15px;

        line-height: 1.7;

    }

    .featured-right a {

        width: 100%;

        justify-content: center;

    }

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

    .category-hero {

        padding: 60px 0;

    }

    .category-hero h1 {

        font-size: 36px;

        max-width: 100%;

    }

    .category-hero p {

        max-width: 100%;

        font-size: 16px;

        line-height: 1.7;

    }

    .category-hero span {

        display: block;

        margin-bottom: 15px;

        letter-spacing: 2px;

    }

    /*==========================
CATEGORY POSTS
==========================*/

    .category-posts {

        margin-bottom: 50px;

    }

    .post-grid {

        grid-template-columns: 1fr;

        gap: 24px;

    }

    .post-card {

        border-radius: 14px;

    }

    .post-card img {

        height: 240px;

    }

    .post-content {

        padding: 18px;

    }

    .post-content h3 {

        font-size: 20px;

    }

    .post-content p {

        font-size: 15px;

    }

    /*==========================
CATEGORY SIDEBAR
==========================*/

    .category-sidebar {

        margin-top: 40px;

    }

    .sidebar-box {

        padding: 20px;

        border-radius: 14px;

    }

    .sidebar-box h3 {

        font-size: 22px;

        margin-bottom: 20px;

    }

    .latest-post {

        gap: 15px;

    }

    .latest-thumb img {

        width: 90px;

        height: 70px;

    }

    .latest-info h4 {

        font-size: 16px;

    }

    /*==========================
PAGINATION
==========================*/

    .pagination-section {

        margin: 50px 0;

    }

    .pagination {

        gap: 8px;

    }

    .page-btn {

        width: 42px;

        height: 42px;

        font-size: 14px;

    }

    /*==================================
POST LAYOUT
==================================*/

    .post-layout {

        gap: 40px;

    }

    #sidebar {

        margin-top: 40px;

    }

    /*==================================
POST FEATURED IMAGE
==================================*/

    .post-image {

        height: 300px;

        border-radius: 12px;

        margin-bottom: 25px;

    }

    /*==================================
POST TYPOGRAPHY
==================================*/

    .post-title {

        font-size: 32px;

        line-height: 1.3;

        margin-bottom: 18px;

    }

    .post-meta {

        gap: 10px;

        font-size: 14px;

        margin-bottom: 25px;

    }

    .post-content {

        font-size: 17px;

        line-height: 1.9;

    }

    /*==================================
POST CONTENT
==================================*/

    .post-content h2 {

        font-size: 30px;

    }

    .post-content h3 {

        font-size: 24px;

    }

    .post-content img {

        margin: 30px 0;

    }

    .post-content blockquote {

        padding: 18px;

    }

    /*==================================
POST SIDEBAR
==================================*/

    #sidebar {

        margin-top: 40px;

    }

    .sidebar-box {

        padding: 20px;

    }

    .sidebar-box h3 {

        font-size: 22px;

    }

    /*==================================
RELATED POSTS
==================================*/

    .related-posts {

        margin-top: 50px;

    }

    .related-grid {

        grid-template-columns: 1fr;

        gap: 20px;

    }

    .related-card img {

        height: 260px;

    }

    .related-posts h2 {

        font-size: 30px;

    }

    /*==================================
SEARCH PAGE
==================================*/

    .search-page {

        padding: 50px 0;

    }

    .search-grid {

        grid-template-columns: 1fr;

        gap: 20px;

    }

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

    .about-hero {

        padding: 60px 0;

    }

    .about-hero h1 {

        font-size: 38px;

    }

    .about-hero p {

        font-size: 17px;

    }

    .story-content h2,

    .trust-header h2,

    .categories-header h2,

    .process-header h2,

    .cta-content h2 {

        font-size: 34px;

    }

    .trust-grid,

    .categories-grid,

    .process-grid {

        grid-template-columns: 1fr;

    }

    .trust-card,

    .category-box,

    .process-card {

        padding: 28px;

    }

    /*==================================
CONTACT PAGE
==================================*/

    .contact-hero {

        padding: 60px 0;

    }

    .contact-hero h1 {

        font-size: 38px;

    }

    .contact-hero p {

        font-size: 17px;

    }

    .contact-form,

    .info-card {

        padding: 28px;

    }

    .contact-form h2,

    .info-card h2 {

        font-size: 30px;

    }

    /*==================================
PRIVACY PAGE
==================================*/

    .privacy-hero {

        padding: 60px 0;

    }

    .privacy-hero h1 {

        font-size: 40px;

    }

    .privacy-hero p {

        font-size: 17px;

    }

    .last-updated {

        padding: 10px 20px;

    }

    .policy-toc {

        padding: 25px;

    }

    .policy-toc h2 {

        font-size: 28px;

    }

    .policy-section h2 {

        font-size: 30px;

    }

    .policy-section p {

        font-size: 17px;

        line-height: 1.8;

    }

    .policy-section li {

        font-size: 16px;

    }

    /*==================================
TERMS PAGE
==================================*/

    .terms-hero {

        padding: 60px 0;

    }

    .terms-hero h1 {

        font-size: 40px;

    }

    .terms-hero p {

        font-size: 17px;

    }

    .last-updated {

        padding: 10px 20px;

    }

    .terms-toc {

        padding: 25px;

    }

    .terms-toc h2 {

        font-size: 28px;

    }

    .terms-section h2 {

        font-size: 30px;

    }

    .terms-section p {

        font-size: 17px;

        line-height: 1.8;

    }

    .terms-section li {

        font-size: 16px;

    }

    .news-hero {

        padding: 100px 0 80px;

    }

    .news-hero h1 {

        font-size: 56px;

    }

    .news-hero p {

        font-size: 18px;

    }

    .featured-title {

        font-size: 30px;

    }

    .latest-news-grid {

        grid-template-columns: 1fr;

    }

    .news-card img {

        height: 260px;

    }
    .post-title-row{

    flex-direction:column;

    align-items:flex-start;

}

.visit-site-btn{

    width:100%;

    justify-content:center;

}

}

/*====================================================
576px - Mobile Small
====================================================*/

@media (max-width:576px) {

    /*==========================
    GLOBAL
    ==========================*/

    .container {

        width: 92%;

    }

    .section-title {

        font-size: 28px;

    }


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

    .navbar {

        height: 68px;

    }

    .logo img {

        height: 38px;

    }

    .menu-toggle {

        width: 42px;

        height: 42px;

        font-size: 26px;

    }

    .menu {

        display: none;
    }

    .menu-toggle {

        display: flex;
    }

    .search-box {

        display: none;

    }


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

    .hero {

        padding: 24px 0;

    }

    .hero-grid {

        gap: 28px;

    }

    .featured-card {

        border-radius: 12px;

    }

    .featured-card img {

        height: 220px;

    }

    .featured-content {

        padding: 16px;

    }

    .featured-content h2 {

        font-size: 24px;

        line-height: 1.4;

    }

    .featured-content p {

        font-size: 14px;

        line-height: 1.6;

    }

    .featured-content .meta {

        gap: 10px;

        font-size: 12px;

    }

    .latest-posts {

        margin-top: 0;

    }

    .latest-posts h3 {

        font-size: 22px;

        margin-bottom: 20px;

    }

    .latest-post {

        padding: 15px 0;

    }

    .latest-post h4 {

        font-size: 17px;

        line-height: 1.4;

    }

    .latest-post span {

        font-size: 12px;

    }

    /*==========================
BRANDS
==========================*/

    .topics {

        padding: 40px 0;

    }

    .brand-grid {

        gap: 18px;

        margin-bottom: 40px;

    }

    .brand-card {

        border-radius: 12px;

    }

    .brand-card img {

        height: 200px;

    }

    .topics-header {

        gap: 20px;

    }

    .topics-header p {

        font-size: 14px;

    }

    .topics-header h2 {

        font-size: 28px;

        line-height: 1.2;

    }

    .topic-buttons {

        gap: 10px;

    }

    .topic-btn {

        width: 100%;

        justify-content: center;

        padding: 14px;

        font-size: 14px;

    }

    /*==========================
POPULAR TOPICS
==========================*/

    .topics-header {

        gap: 18px;

    }

    .topics-header p {

        font-size: 14px;

    }

    .topics-header h2 {

        font-size: 28px;

        line-height: 1.2;

    }

    .topic-buttons {

        gap: 10px;

    }

    .topic-btn {

        width: 100%;

        padding: 14px;

        font-size: 14px;

        border-radius: 10px;

    }

    /*==========================
CATEGORY SECTION
==========================*/

    .category-section {

        padding: 40px 0;

    }

    .section-title {

        font-size: 22px;

    }

    .post-card {

        border-radius: 12px;

    }

    .post-card img {

        height: 200px;

    }

    .post-content {

        padding: 16px;

    }

    .post-content h3 {

        font-size: 18px;

    }

    .post-content p {

        font-size: 14px;

        line-height: 1.6;

    }

    .view-more-btn {

        width: 100%;

        padding: 14px;

    }

    .post-card {

        overflow: hidden;

    }

    .post-card img {

        transition: .3s;

    }

    .post-card:hover img {

        transform: scale(1.03);

    }

    /*==========================
LATEST REVIEWS
==========================*/

    .latest-section {

        padding: 40px 0;

    }

    .latest-card {

        border-radius: 12px;

    }

    .latest-card img {

        height: 190px;

    }

    .latest-content {

        padding: 16px;

    }

    .latest-content h3 {

        font-size: 18px;

        line-height: 1.4;

    }

    /*==========================
NEWSLETTER
==========================*/

    .newsletter {

        padding: 40px 0;

    }

    .footer-newsletter {

        padding: 20px;

        border-radius: 12px;

    }

    .footer-newsletter h3 {

        font-size: 22px;

    }

    .footer-newsletter p {

        font-size: 14px;

        line-height: 1.6;

    }

    .footer-newsletter input {

        height: 46px;

        padding: 0 15px;

        font-size: 14px;

    }

    .footer-newsletter button {

        height: 46px;

        font-size: 14px;

    }

    #newsletterMessage {

        font-size: 13px;

        margin-top: 12px;

    }

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

    .footer {

        padding: 40px 0 20px;

    }

    .footer-grid {

        gap: 24px;

    }

    .footer-column h3 {

        font-size: 18px;

    }

    .footer-column a {

        font-size: 14px;

    }

    .footer-bottom {

        font-size: 13px;

        line-height: 1.6;

    }

    .footer-social {

        justify-content: center;

        gap: 12px;

    }

    .footer-social a {

        width: 40px;

        height: 40px;

    }

    /*==========================
CATEGORY FEATURED
==========================*/

    .featured-left {

        height: 220px;

    }

    .featured-right {

        padding: 20px;

    }

    .featured-right h2 {

        font-size: 24px;

        line-height: 1.3;

    }

    .featured-right p {

        font-size: 14px;

    }

    .featured-meta {

        flex-direction: column;

        gap: 8px;

    }

    .featured-right a {

        padding: 15px;

        width: 100%;

    }

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

    .category-hero {

        padding: 45px 0;

    }

    .category-hero span {

        font-size: 12px;

        letter-spacing: 2px;

    }

    .category-hero h1 {

        font-size: 28px;

        line-height: 1.3;

        margin: 15px auto;

    }

    .category-hero p {

        font-size: 14px;

        line-height: 1.7;

    }

    /*==========================
CATEGORY POSTS
==========================*/

    .category-posts {

        margin-bottom: 40px;

    }

    .post-card {

        border-radius: 12px;

    }

    .post-card img {

        height: 200px;

    }

    .post-content {

        padding: 16px;

    }

    .post-content h3 {

        font-size: 18px;

        line-height: 1.4;

    }

    .post-content p {

        font-size: 14px;

        line-height: 1.7;

    }

    /*==========================
CATEGORY SIDEBAR
==========================*/

    .category-sidebar {

        margin-top: 35px;

    }

    .sidebar-box {

        padding: 18px;
        border-radius: 14px;

    }

    .sidebar-box h3 {

        font-size: 20px;

    }

    .sidebar-box input {

        height: 46px;

        font-size: 14px;
        border-radius: 10px;

    }

    .sidebar-box button {

        height: 46px;

        font-size: 14px;
        border-radius: 10px;

    }

    .category-item {

        font-size: 14px;

        padding: 12px 0;

    }

    /*==========================
PAGINATION
==========================*/

    .pagination-section {

        margin: 40px 0;

    }

    .pagination {

        gap: 6px;

    }

    .page-btn {

        width: 38px;

        height: 38px;

        font-size: 13px;

        border-radius: 8px;

    }

    /*==========================
CATEGORY MOBILE POLISH
==========================*/

    .container {

        width: 92%;

    }

    .featured-category-card {

        border-radius: 16px;

    }

    .featured-left img {

        border-radius: 16px 16px 0 0;

    }

    .featured-right {

        text-align: left;

    }

    .category-hero {

        text-align: left;

    }

    .category-hero h1 {

        max-width: 100%;

    }

    .category-hero p {

        max-width: 100%;

    }

    .post-card {

        border-radius: 14px;

    }

    .post-card img {

        border-radius: 14px 14px 0 0;

    }

    .post-content {

        padding: 18px;

    }

    .sidebar-box {

        border-radius: 14px;

    }

    .sidebar-box h3 {

        margin-bottom: 18px;

    }

    .sidebar-box input {

        border-radius: 10px;

    }

    .sidebar-box button {

        border-radius: 10px;

    }

    .pagination {

        justify-content: center;

    }

    .page-btn {

        min-width: 42px;

        min-height: 42px;

    }

    /*==================================
POST LAYOUT
==================================*/

    .post-layout {

        gap: 30px;

    }

    #sidebar {

        margin-top: 30px;

    }

    /*==================================
POST FEATURED IMAGE
==================================*/

    .post-image {

        height: 220px;

        border-radius: 10px;

        margin-bottom: 20px;

    }

    /*==================================
POST TYPOGRAPHY
==================================*/

    .post-title {

        font-size: 28px;

        line-height: 1.35;

        margin-bottom: 15px;

    }

    .post-meta {

        flex-direction: column;

        align-items: flex-start;

        gap: 8px;

        font-size: 13px;

        margin-bottom: 20px;

    }

    .post-content {

        font-size: 16px;

        line-height: 1.9;

    }

    /*==================================
POST CONTENT
==================================*/

    .post-content h2 {

        font-size: 24px;

    }

    .post-content h3 {

        font-size: 20px;

    }

    .post-content ul,

    .post-content ol {

        padding-left: 20px;

    }

    .post-content blockquote {

        padding: 16px;

    }

    /*==================================
POST SIDEBAR
==================================*/

    #sidebar {

        margin-top: 30px;

    }

    .sidebar-box {

        padding: 18px;

        border-radius: 12px;

    }

    .sidebar-box input {

        height: 46px;

    }

    .sidebar-box button {

        height: 46px;

    }

    .latest-item {

        gap: 14px;

    }

    .latest-item img {

        width: 90px;

        height: 70px;

    }

    /*==================================
RELATED POSTS
==================================*/

    .related-posts {

        margin-top: 40px;

    }

    .related-posts h2 {

        font-size: 26px;

        margin-bottom: 25px;

    }

    .related-card {

        border-radius: 14px;

    }

    .related-card img {

        height: 220px;

    }

    .related-content {

        padding: 18px;

    }

    .related-content h3 {

        font-size: 20px;
        line-height: 1.4;

    }

    .related-content p {

        font-size: 15px;

    }

    /*==================================
POST MOBILE POLISH
==================================*/

    .post-detail {

        padding: 40px 0;

    }

    .post-main {

        width: 100%;

    }

    .post-header {

        margin-bottom: 25px;

    }

    .post-title {

        letter-spacing: -0.4px;

    }

    .post-meta {

        row-gap: 8px;

    }

    .post-image {

        border-radius: 12px;
        box-shadow:

            0 8px 20px rgba(0, 0, 0, .08);

    }

    .post-content p {

        margin-bottom: 22px;

    }

    .post-content h2 {

        margin-top: 45px;

    }

    .post-content li {

        margin-bottom: 10px;

    }

    .post-content blockquote {

        border-radius: 10px;

    }

    .post-content img {

        border-radius: 12px;

    }

    /*==================================
SEARCH PAGE
==================================*/

    .search-page {

        padding: 40px 0;

    }

    .search-grid {

        gap: 18px;

    }

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

    .about-hero {

        padding: 50px 0;

    }

    .about-hero h1 {

        font-size: 30px;

    }

    .about-hero p {

        font-size: 16px;

    }

    .section-tag {

        font-size: 12px;

        letter-spacing: 2px;

    }

    .story-content h2,

    .trust-header h2,

    .categories-header h2,

    .process-header h2,

    .cta-content h2 {

        font-size: 28px;

    }

    .story-content p,

    .trust-header p,

    .categories-header p,

    .process-header p,

    .cta-content p {

        font-size: 16px;

    }

    .trust-card,

    .category-box,

    .process-card {

        padding: 24px;

    }

    .about-btn {

        width: 100%;

    }

    .about-story,
    .about-trust,
    .about-categories,
    .about-process,
    .about-cta {

        padding: 60px 0;

    }

    .trust-card,

    .category-box,

    .process-card {

        border-radius: 14px;

    }

    .story-image img {

        border-radius: 14px;

    }

    /*==================================
CONTACT PAGE
==================================*/

    .contact-hero {

        padding: 50px 0;

    }

    .contact-hero h1 {

        font-size: 30px;

    }

    .contact-hero p {

        font-size: 16px;

    }

    .contact-content {

        padding: 60px 0;

    }

    .contact-form,

    .info-card {

        padding: 24px;

    }

    .contact-form h2,

    .info-card h2 {

        font-size: 26px;

    }

    /*==================================
PRIVACY PAGE
==================================*/

    .privacy-hero {

        padding: 50px 0;

    }

    .privacy-hero h1 {

        font-size: 32px;

    }

    .privacy-hero p {

        font-size: 16px;

    }

    .last-updated {

        display: flex;

        flex-direction: column;

        gap: 6px;

        text-align: center;

    }

    .policy-toc {

        padding: 20px;

        margin-bottom: 50px;

    }

    .policy-toc h2 {

        font-size: 24px;

    }

    .policy-toc li {

        margin-bottom: 12px;

    }

    .policy-section {

        margin-bottom: 50px;

    }

    .policy-section h2 {

        font-size: 26px;

    }

    .policy-section p {

        font-size: 16px;

    }

    .policy-section li {

        font-size: 15px;

        line-height: 1.7;

    }

    /*==================================
TERMS PAGE
==================================*/

    .terms-hero {

        padding: 50px 0;

    }

    .terms-hero h1 {

        font-size: 32px;

    }

    .terms-hero p {

        font-size: 16px;

    }

    .last-updated {

        display: flex;

        flex-direction: column;

        gap: 6px;

        text-align: center;

    }

    .terms-toc {

        padding: 20px;

        margin-bottom: 50px;

    }

    .terms-toc h2 {

        font-size: 24px;

    }

    .terms-toc li {

        margin-bottom: 12px;

    }

    .terms-section {

        margin-bottom: 50px;

    }

    .terms-section h2 {

        font-size: 26px;

    }

    .terms-section p {

        font-size: 16px;

    }

    .terms-section li {

        font-size: 15px;

        line-height: 1.7;

    }

    .news-hero {

        padding: 80px 0 60px;

    }

    .news-hero h1 {

        font-size: 42px;

    }

    .news-hero p {

        font-size: 16px;

    }

    .featured-title {

        font-size: 26px;

    }

    .featured-meta {

        flex-direction: column;

        gap: 8px;

    }

    .news-card-content {

        padding: 20px;

    }

    .news-card-title {

        font-size: 22px;

    }

    .news-card-description {

        font-size: 15px;

    }

    #newsPagination {

        flex-wrap: wrap;

    }

    .page-btn {

        width: 42px;

        height: 42px;

    }

}