/* ==== All Css Variables ==== */
:root {

    /* === Fonts Variables === */
    --font-900: i_black;
    --font-800: i_extrabold;
    --font-700: i_bold;
    --font-600: i_semibold;
    --font-500: i_medium;
    --font-400: i_regular;
    --font-300: i_light;
    --font-200: i_extraLight;
    --font-100: i_thin;

    /* === Theme colors === */
    --primary-1-100: #f1f1fd;
    --primary-1-200: #bab9f8;
    --primary-1-500: #2926e8;

    --primary-2-200: #cccbe7;
    --primary-2-800: #302f65;
    --primary-2-900: #191834;

    --secondary-1-200: #e9ccc9;
    --secondary-1-500: #bb6458;

    --secondary-2-200: #efe7d7;
    --secondary-2-500: #ba984f;

    --secondary-3-100: #dbeaf0;
    --secondary-3-600: #70abc2;

    /* --default: #999999;
    --primary: #2a26e8;
    --info: #21203f;
    --success: #42867e;
    --warning: #bf7646;
    --danger: #f44336; */


    /* === Text colors === */
    --accent-dark: #161616;
    --accent-light: #fafafa;


    /* === Colors === */
    --white: #ffffff;
    --black: #000000;

    --success-100: #d1e7dd;
    --success-200: #a3cfbb;
    --success-300: #75b798;
    --success-400: #479f76;
    --success-500: #198754;
    --success-600: #146c43;
    --success-700: #0f5132;
    --success-800: #0a3622;
    --success-900: #051b11;

    --danger-100: #f8d7da;
    --danger-200: #f1aeb5;
    --danger-300: #ea868f;
    --danger-400: #e35d6a;
    --danger-500: #dc3545;
    --danger-600: #b02a37;
    --danger-700: #842029;
    --danger-800: #58151c;
    --danger-900: #2c0b0e;

    --warning-100: #fff3cd;
    --warning-200: #ffe69c;
    --warning-300: #ffda6a;
    --warning-400: #ffcd39;
    --warning-500: #ffc107;
    --warning-600: #cc9a06;
    --warning-700: #997404;
    --warning-800: #664d03;
    --warning-900: #332701;

    --disable-100: #f8f9fa;
    --disable-200: #e9ecef;
    --disable-300: #dee2e6;
    --disable-400: #ced4da;
    --disable-500: #adb5bd;
    --disable-600: #6c757d;
    --disable-700: #495057;
    --disable-800: #343a40;
    --disable-900: #212529;

}

@media screen and (max-width: 1300px) {

    /* ==== Blog Layout 1 Css ==== */
    .blog_layout-1 .ar_card-header {
        display: none;
    }


    /* ==== Footer Css Start ==== */
    .ar_main_footer {
        overflow: hidden;
    }

    .ar_footer_section .footer_col:has(.tags_navbar) {
        border-right: none;
    }

    .ar_footer_section .footer_col:has(.blogs_navbar) {
        flex: 1 100%;
        padding: 30px 0px;
        border-right: none;
        position: relative;
    }

    .ar_footer_section .footer_col:has(.blogs_navbar)::before {
        content: '';
        width: 200%;
        height: 2px;
        transform: translateX(-50%);
        background-color: var(--primary-2-800);
        -webkit-transform: translateX(-50%);
        -moz-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
        -o-transform: translateX(-50%);
        position: absolute;
        left: 50%;
        top: 0px;
    }


    /* ==== Coupon Modal Css Start ==== */
    .modal_header .coupon_content {
        max-width: 475px;
    }

}

@media screen and (max-width: 1210px) {


    /* ==== Category Section Css Start ==== */
    .section_wrapper .categories {
        padding-bottom: 50px;
    }

    .section_wrapper .tags {
        max-height: unset;
        padding: 50px 15px 0px;
    }

    .category_section:has(.section_container:nth-child(2)) .categories::after {
        width: 166%;
        height: 2px;
        transform: translateX(-50%);
        -webkit-transform: translateX(-50%);
        -moz-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
        -o-transform: translateX(-50%);
        bottom: -9px;
        top: unset;
        left: 50%;
    }

}

@media screen and (max-width: 1112px) {

    /* ==== Main SIdebar Css Start ==== */
    .section_wrapper:has(.main_sidebar) {
        gap: 0px;
        flex-direction: column;
    }

    .section_wrapper .divider.vr {
        width: 100%;
    }

    .section_wrapper .main_sidebar {
        position: unset;
        max-width: unset;
    }

}

@media screen and (max-width: 1110px) {

    /* ==== Header Css Start ==== */
    .ar_header_section {
        gap: 0px;
    }

    .ar_header_section :is(.header_logo, .header_nav) {
        flex: 1;
        max-width: 100%;
    }

    .header_logo {
        border-color: transparent;
    }

    .header_nav {
        gap: 5px;
    }

    .header_list:has(.menu_btn) {
        display: flex;
    }

    /* ==== Menu Navigation Css ==== */
    .menu_btn {
        width: 40px;
        height: 40px;
        flex: 0 0 40px;
        border-color: var(--primary-1-500);
        background-color: var(--primary-1-500);
    }

    .menu_btn svg {
        width: 32px;
        height: 32px;
        flex: 0 0 32px;
        fill: var(--accent-light);
    }

    .menu_btn.btn_active {
        z-index: 3;
        background-color: transparent;
        border-color: var(--primary-1-200);
    }

    .menu_btn.btn_active svg {
        fill: var(--primary-1-200);
    }

    .menu_btn.btn_active svg path:nth-child(even) {
        opacity: 0;
    }

    .menu_navbar {
        z-index: 2;
        height: 100%;
        max-width: 275px;
        padding: 90px 15px 0px;
        transition: right .5s ease-in-out;
        background-color: var(--primary-2-900);
        -webkit-transition: right .5s ease-in-out;
        -moz-transition: right .5s ease-in-out;
        -ms-transition: right .5s ease-in-out;
        -o-transition: right .5s ease-in-out;
        position: fixed;
        right: -150%;
        bottom: 0;
    }

    .menu_navbar.menu_active {
        right: -1%;
    }

    .menu_navbar,
    .menu_nav {
        align-items: flex-start;
    }

    .menu_nav {
        height: 100%;
    }

    .menu_nav .menu_list {
        flex: 1 100%;
        justify-content: flex-end;
    }

    .menu_list:has(.subscribe_btn) {
        display: flex;
        height: 100%;
    }

    .menu_list .subscribe_btn {
        width: 100%;
    }


    /* ==== Featured Section Css Start ==== */

    /* ==== Blog Layout 2 Css ==== */
    .blog_layout-2 .ar_card {
        max-width: unset;
    }


    /* ==== Coupon Modal Css Start ==== */
    .modal_wrapper .close_btn {
        top: -20px;
        transform: unset;
        -webkit-transform: unset;
        -moz-transform: unset;
        -ms-transform: unset;
        -o-transform: unset;
    }

    .modal_header .coupon_content {
        max-width: unset;
    }

}

@media screen and (max-width: 992px) {

    /* ==== Blog Layout 1 Css ==== */

    /* ==== Blog Title Css ==== */
    .blog_layout-1 .blog_link span.word_break_clamp {
        font-size: 47px;
    }

    .blog_layout-1 .blog_link h1.title {
        font-size: 42px;
    }


    /* ==== Blog Read More Button Css ==== */
    .read_more-link .read_more-ic::after {
        left: 20%;
    }


    /* ==== Coupon Modal Css Start ==== */
    .coupon_modal .modal_content {
        width: 90%;
    }

}

@media screen and (max-width: 786px) {

    /* ==== Footer Css Start ==== */
    .ar_footer_section .footer_col:has(.about_brand) {
        border-right: none;
    }

    .ar_footer_section .footer_col:has(.tags_navbar) {
        flex: 1 100%;
        padding: 30px 0px;
        position: relative;
    }

    .ar_footer_section .footer_col:has(.tags_navbar)::before {
        content: '';
        width: 200%;
        height: 2px;
        transform: translateX(-50%);
        background-color: var(--primary-2-800);
        -webkit-transform: translateX(-50%);
        -moz-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
        -o-transform: translateX(-50%);
        position: absolute;
        left: 50%;
        top: 0px;
    }

}

@media screen and (max-width: 755px) {

    /* ==== Footer Css Start ==== */
    .ar_footer_section .footer_col:has(.footer_navbar) {
        border-right: none;
    }

    .ar_footer_section .footer_col:has(.social_navbar),
    .secondary_footer .ar_footer_section:has(:nth-child(3)) .footer_col:nth-child(2) {
        flex: 1 100%;
        padding: 30px 0px;
        position: relative;
    }

    .secondary_footer .ar_footer_section:has(:nth-child(3)) .footer_col:nth-child(2):has(.footer_navbar)::before {
        content: '';
        width: 200%;
        height: 2px;
        transform: translateX(-50%);
        background-color: var(--primary-2-800);
        -webkit-transform: translateX(-50%);
        -moz-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
        -o-transform: translateX(-50%);
        position: absolute;
        left: 50%;
        top: 0px;
    }

    .ar_footer_section .footer_col:has(.social_navbar)::before {
        content: '';
        width: 200%;
        height: 2px;
        transform: translateX(-50%);
        background-color: var(--primary-2-800);
        -webkit-transform: translateX(-50%);
        -moz-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
        -o-transform: translateX(-50%);
        position: absolute;
        left: 50%;
        top: 0px;
    }

}

@media screen and (max-width: 745px) {

    /* ==== Blog Read More Button Css ==== */
    .read_more-link {
        margin-left: -20px;
    }

}

@media screen and (max-width: 712px) {

    /* ==== Single Category Section Css Start ==== */
    .card_content .ratings {
        margin-inline: unset;
    }

}

@media screen and (max-width: 648px) {

    /* ==== Coupon Modal Css Start ==== */
    .modal_body .copycode_and_visit {
        flex-direction: column;
    }

    .copycode_and_visit .copycode_group {
        flex: unset;
    }

    .copycode_and_visit .copy_btn {
        flex: 1 140px;
    }

    .modal_body .copycode_and_visit .divider.vr {
        width: 100%;
        height: 1.5px;
        display: none;
        transform: scaleX(2);
        -webkit-transform: scaleX(2);
        -moz-transform: scaleX(2);
        -ms-transform: scaleX(2);
        -o-transform: scaleX(2);
    }

    .copycode_and_visit .visit_link {
        flex: unset;
        display: none;
    }

}

@media screen and (max-width: 600px) {


    /* ==== All Css Reset ==== */
    main {
        padding-top: 60px;
    }


    /* ==== Typography Css ==== */
    h2 {
        font-size: 24px;
    }

    h4 {
        font-size: 20px;
    }

    /* ==== Header Css Start ==== */
    .ar_header_section {
        height: 60px;
    }

    .header_nav {
        gap: 5px;
        border-color: transparent;
    }

    .header_list:has(.subscribe_btn) {
        display: none;
    }

    /* ==== Brand Logo Css ==== */
    .brand_logo .logo {
        height: 40px;
    }


    /* ==== Menu Navigation Css ==== */



    /* ==== Blog Layout 1 Css ==== */
    .blog_layout-1 .ar_card {
        padding: 0px;
    }

    /* ==== Blog Title Css ==== */
    .blog_layout-1 .blog_link span:has(h1.title) {
        font-size: 37px;
        line-height: 0.3;
    }

    .blog_layout-1 .blog_link h1.title {
        font-size: 32px;
    }


    /* ==== Featured Section Css Start ==== */
    .featured_section .section_wrapper {
        gap: 30px;
        padding: 0px;
    }

    /* ==== Section Header Css ==== */
    .section_header .heading::before {
        width: 18px;
        height: 18px;
        flex: 0 0 18px;
    }

    .section_header .view_all-link {
        font-size: 13px;
    }

}

@media screen and (max-width: 557px) {

    /* ==== Coupon Modal Css Start ==== */
    .modal_wrapper .modal_header {
        flex-direction: column;
    }

    .modal_header .divider.vr {
        width: 100%;
        height: 1.5px;
        flex: 0 0 1.5px;
        transform: scaleX(2);
        -webkit-transform: scaleX(2);
        -moz-transform: scaleX(2);
        -ms-transform: scaleX(2);
        -o-transform: scaleX(2);
    }

    .modal_header .coupon_content {
        flex: unset;
    }

    .modal_body .coupon_tags .tags_list.added {
        display: none;
    }

}

@media screen and (max-width: 532px) {

    /* ==== Coupons Card Css Start ==== */
    .coupons_wrapper .coupons_card {
        gap: 40px 15px;
        justify-content: center;
    }

    .coupons_card .coupon_content {
        max-width: 390px;
    }

    .coupons_card .coupon_content>* {
        text-align: center;
    }

    .card_footer .coupon_btn {
        margin-inline: auto;
    }

}

@media screen and (max-width: 494px) {

    /* ==== Single Category Section Css Start ==== */
    .card_content .ratings {
        padding-bottom: 8px;
    }

    .tabs_nav .tabs_list {
        flex: 1 80px;
    }

    .tabs_nav .tabs_list:has(.visit_link) {
        width: 100%;
        flex: 1 100%;
        margin-left: unset;
    }

    .tabs_list .tabs_link {
        flex: 1 80px;
    }

    .tabs_list .visit_link {
        width: 100%;
    }

}

@media screen and (max-width: 454px) {

    .copycode_and_visit .copy_btn {
        max-width: unset;
    }

}

@media screen and (max-width: 425px) {

    .blog_layout-1 .blog_calendar .blog_time {
        display: none;
    }

    /* ==== Coupons Card Css Start ==== */
    .coupons_card .card_img {
        height: 120px;
        flex: 0 0 80%;
    }

    .card_img .store_link {
        padding: 10px;
    }

    /* ==== Coupon Modal Css Start ==== */
    .modal_body .coupon_tags .tags_list.uses {
        display: none;
    }

}

@media screen and (max-width: 375px) {

    /* ==== Blog Calendar Css ==== */
    .blog_calendar .blog_time {
        display: none;
    }


    /* ==== Category Section Css Start ==== */
    .category_link .category_img {
        height: 135px;
        flex: 0 0 135px;
    }

}