/* ==========================================================
MR Shop World
Country.css
Version 2
Part 1
----------------------------------------------------------
Base
Variables
Body
Container
========================================================== */

:root{

--primary:#ff6b00;

--secondary:#ffb000;

--blue:#2d8cff;

--green:#18b566;

--red:#ff4d4f;

--purple:#7b4dff;

--pink:#ff4fa0;

--cyan:#00c9ff;

--gold:#ffcc00;

--dark:#1f2937;

--light:#ffffff;

--border:#e5e7eb;

--shadow:0 12px 35px rgba(0,0,0,.12);

--radius:18px;

}

/* ========================= */

html{

scroll-behavior:smooth;

}

/* ========================= */

body{

margin:0;

padding:0;

background:#f6f8fb;

font-family:

"Segoe UI",

Roboto,

Arial,

sans-serif;

color:#222;

}

/* ========================= */

.mr-country-page{

width:100%;

overflow:hidden;

}

/* ========================= */

.mr-country-container{

width:100%;

max-width:1500px;

margin:auto;

padding:20px;

}

/* ========================= */

.mr-section-heading{

text-align:center;

margin:60px 0 35px;

}

.mr-section-heading h2{

font-size:34px;

font-weight:800;

margin:0 0 10px;

color:#111;

}

.mr-section-heading p{

font-size:17px;

line-height:1.7;

color:#555;

margin:0;

}

/* ========================= */

section{

margin-bottom:70px;

}

/* ========================= */

img{

max-width:100%;

height:auto;

display:block;

}

/* ========================= */

a{

text-decoration:none;

transition:.35s;

}

/* ========================= */

button{

cursor:pointer;

transition:.35s;

border:none;

outline:none;

}

/* ========================= */

.mr-empty-box{

background:#fff;

padding:45px;

border-radius:18px;

box-shadow:var(--shadow);

text-align:center;

}

.mr-empty-icon{

font-size:60px;

margin-bottom:20px;

}

/* ========================= */

@media(max-width:768px){

.mr-country-container{

padding:12px;

}

.mr-section-heading{

margin:40px 0 20px;

}

.mr-section-heading h2{

font-size:24px;

}

.mr-section-heading p{

font-size:14px;

}

}
/* ==========================================================
MR Shop World
Country.css
Version 2
Part 2
----------------------------------------------------------
Hero
Country Information
==========================================================*/

/*==========================
Hero
==========================*/

.mr-hero{

position:relative;

overflow:hidden;

border-radius:28px;

padding:90px 35px;

background:linear-gradient(
135deg,
#ff6b00,
#ffb000,
#ff4fa0,
#7b4dff,
#2d8cff
);

background-size:400% 400%;

animation:mrHeroGradient 12s ease infinite;

box-shadow:0 25px 60px rgba(0,0,0,.18);

margin-bottom:40px;

}

@keyframes mrHeroGradient{

0%{background-position:0% 50%;}

50%{background-position:100% 50%;}

100%{background-position:0% 50%;}

}

.mr-hero-overlay{

text-align:center;

position:relative;

z-index:2;

}

.mr-breadcrumb{

margin-bottom:20px;

font-size:15px;

color:#fff;

}

.mr-breadcrumb a{

color:#fff;

font-weight:700;

}

.mr-breadcrumb span{

margin:0 6px;

opacity:.8;

}

.mr-hero-flag{

font-size:75px;

margin-bottom:18px;

}

.mr-hero-title{

margin:0;

font-size:48px;

font-weight:900;

color:#fff;

text-shadow:0 3px 10px rgba(0,0,0,.35);

}

.mr-hero-description{

max-width:900px;

margin:18px auto 0;

font-size:19px;

line-height:1.8;

color:#fff;

text-shadow:0 2px 6px rgba(0,0,0,.25);

}

.mr-country-badges{

display:flex;

justify-content:center;

flex-wrap:wrap;

gap:10px;

margin-top:25px;

}

.mr-country-badge{

padding:8px 14px;

border-radius:30px;

background:rgba(255,255,255,.18);

color:#fff;

font-size:13px;

font-weight:700;

backdrop-filter:blur(8px);

}

.mr-hero-buttons{

display:flex;

justify-content:center;

flex-wrap:wrap;

gap:15px;

margin-top:30px;

}

.mr-btn{

padding:14px 26px;

border-radius:50px;

font-size:15px;

font-weight:800;

text-decoration:none;

transition:.35s;

}

.mr-btn-products{

background:#fff;

color:#ff6b00;

}

.mr-btn-articles{

background:#2d8cff;

color:#fff;

}

.mr-btn-home{

background:#18b566;

color:#fff;

}

.mr-btn:hover{

transform:translateY(-4px);

box-shadow:0 15px 30px rgba(0,0,0,.20);

}

/*==========================
Country Information
==========================*/

.mr-country-information{

margin-top:45px;

}

.mr-country-info-grid{

display:grid;

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

gap:18px;

}

.mr-info-card{

background:#fff;

border-radius:20px;

padding:24px 15px;

text-align:center;

box-shadow:0 12px 35px rgba(0,0,0,.08);

transition:.35s;

font-size:34px;

}

.mr-info-card:nth-child(1){border-top:5px solid #ff6b00;}
.mr-info-card:nth-child(2){border-top:5px solid #2d8cff;}
.mr-info-card:nth-child(3){border-top:5px solid #18b566;}
.mr-info-card:nth-child(4){border-top:5px solid #ff4d4f;}
.mr-info-card:nth-child(5){border-top:5px solid #7b4dff;}
.mr-info-card:nth-child(6){border-top:5px solid #00c9ff;}
.mr-info-card:nth-child(7){border-top:5px solid #ffb000;}
.mr-info-card:nth-child(8){border-top:5px solid #ff4fa0;}

.mr-info-card span{

display:block;

margin-top:12px;

font-size:14px;

font-weight:700;

color:#666;

}

.mr-info-card strong{

display:block;

margin-top:8px;

font-size:18px;

font-weight:800;

color:#111;

}

.mr-info-card:hover{

transform:translateY(-8px);

box-shadow:0 20px 45px rgba(0,0,0,.18);

}

@media(max-width:991px){

.mr-country-info-grid{

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

}

}

@media(max-width:768px){

.mr-hero{

padding:55px 18px;

border-radius:22px;

}

.mr-hero-flag{

font-size:55px;

}

.mr-hero-title{

font-size:30px;

}

.mr-hero-description{

font-size:15px;

}

.mr-country-info-grid{

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

gap:12px;

}

.mr-info-card{

padding:18px 10px;

font-size:28px;

}

.mr-info-card strong{

font-size:15px;

}

.mr-country-badges{

gap:8px;

}

.mr-country-badge{

font-size:11px;

padding:6px 10px;

}

.mr-btn{

padding:10px 18px;

font-size:13px;

}

}
/* ==========================================================
MR Shop World
Country.css
Version 4
Part 3
Statistics
Quick Filters
Marketplace
==========================================================*/


/*==========================
Statistics
==========================*/

.mr-stats-grid{

display:flex;

flex-direction:column;

gap:14px;

margin:40px 0;

}

.mr-stat-row{

display:grid;

grid-template-columns:1fr 1fr;

gap:14px;

}

.mr-stat-card{

display:flex;

align-items:center;

padding:18px;

border-radius:18px;

color:#fff;

text-decoration:none;

box-shadow:0 12px 28px rgba(0,0,0,.12);

transition:.35s;

min-height:85px;

}

.mr-stat-card:hover{

transform:translateY(-6px);

box-shadow:0 20px 40px rgba(0,0,0,.18);

}

.mr-stat-icon{

font-size:30px;

margin-right:16px;

flex-shrink:0;

}

.mr-stat-number{

font-size:28px;

font-weight:800;

line-height:1;

margin-bottom:6px;

}

.mr-stat-title{

font-size:14px;

font-weight:700;

line-height:1.35;

}


/* Card Colors */

.stat-orange{

background:linear-gradient(135deg,#ff9800,#ff6b00);

}

.stat-blue{

background:linear-gradient(135deg,#26c6da,#2196f3);

}

.stat-green{

background:linear-gradient(135deg,#00c853,#00a152);

}

.stat-purple{

background:linear-gradient(135deg,#7b4dff,#5e35b1);

}

.stat-pink{

background:linear-gradient(135deg,#ff4fa0,#ec407a);

}

.stat-red{

background:linear-gradient(135deg,#ff5252,#e53935);

}


/*==========================
Quick Filters
==========================*/

.mr-filter-grid{

display:grid;

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

gap:12px;

margin-top:25px;

}

.mr-filter-card{

display:flex;

flex-direction:column;

justify-content:center;

align-items:center;

padding:16px;

border-radius:18px;

color:#fff;

text-align:center;

min-height:90px;

box-shadow:0 10px 25px rgba(0,0,0,.12);

transition:.35s;

}

.mr-filter-card:hover{

transform:translateY(-5px);

}

.mr-filter-icon{

font-size:28px;

margin-bottom:8px;

}

.mr-filter-title{

font-size:13px;

font-weight:700;

line-height:1.3;

}


/* Colors */

.filter-home{background:linear-gradient(135deg,#ff9800,#ff6b00);}
.filter-products{background:linear-gradient(135deg,#29b6f6,#2196f3);}
.filter-digital{background:linear-gradient(135deg,#7b4dff,#5e35b1);}
.filter-travel{background:linear-gradient(135deg,#26a69a,#00c853);}
.filter-articles{background:linear-gradient(135deg,#ff4fa0,#ec407a);}
.filter-category{background:linear-gradient(135deg,#ffb300,#ffa000);}
.filter-brand{background:linear-gradient(135deg,#ef5350,#d32f2f);}
.filter-market{background:linear-gradient(135deg,#26c6da,#00acc1);}
.filter-info{background:linear-gradient(135deg,#5c6bc0,#3949ab);}
.filter-top{background:linear-gradient(135deg,#78909c,#546e7a);}


/*==========================
Marketplace
==========================*/

.mr-marketplace-grid{

display:grid;

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

gap:15px;

}

.mr-marketplace-card{

background:#fff;

padding:18px;

border-radius:18px;

text-align:center;

font-weight:700;

box-shadow:0 10px 25px rgba(0,0,0,.08);

transition:.35s;

}

.mr-marketplace-card:hover{

transform:translateY(-5px);

}


/*==========================
Mobile
==========================*/

@media(max-width:768px){

.mr-stat-row{

grid-template-columns:1fr 1fr;

gap:10px;

}

.mr-stat-card{

padding:12px;

min-height:72px;

}

.mr-stat-icon{

font-size:22px;

margin-right:10px;

}

.mr-stat-number{

font-size:20px;

}

.mr-stat-title{

font-size:11px;

}

.mr-filter-card{

min-height:80px;

}

.mr-filter-icon{

font-size:22px;

}

.mr-filter-title{

font-size:11px;

}

}
/* ==========================================================
MR Shop World
Country.css
Version 2
Part 4
----------------------------------------------------------
Brands
Categories
Digital Categories
Travel Categories
==========================================================*/

/*==========================
Common Grid
==========================*/

.mr-brand-grid,
.mr-category-grid{

display:grid;

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

gap:18px;

margin-top:30px;

}

/*==========================
Brand Card
==========================*/

.mr-brand-card{

display:flex;

align-items:center;

justify-content:center;

min-height:95px;

padding:18px;

border-radius:20px;

font-size:17px;

font-weight:800;

text-align:center;

color:#fff;

transition:.35s;

box-shadow:0 10px 25px rgba(0,0,0,.10);

}

.mr-brand-card:nth-child(6n+1){

background:linear-gradient(135deg,#ff6b00,#ff9800);

}

.mr-brand-card:nth-child(6n+2){

background:linear-gradient(135deg,#2d8cff,#00c9ff);

}

.mr-brand-card:nth-child(6n+3){

background:linear-gradient(135deg,#18b566,#00d084);

}

.mr-brand-card:nth-child(6n+4){

background:linear-gradient(135deg,#7b4dff,#9b6dff);

}

.mr-brand-card:nth-child(6n+5){

background:linear-gradient(135deg,#ff4fa0,#ff6bb5);

}

.mr-brand-card:nth-child(6n){

background:linear-gradient(135deg,#ff4d4f,#ff7b7b);

}

.mr-brand-card:hover{

transform:translateY(-8px);

}

/*==========================
Category Card
==========================*/

.mr-category-card{

display:flex;

flex-direction:column;

align-items:center;

justify-content:center;

padding:22px 14px;

border-radius:20px;

text-align:center;

color:#fff;

font-weight:800;

transition:.35s;

box-shadow:0 10px 30px rgba(0,0,0,.10);

min-height:170px;

}

.mr-category-card:nth-child(8n+1){

background:linear-gradient(135deg,#ff6b00,#ff9800);

}

.mr-category-card:nth-child(8n+2){

background:linear-gradient(135deg,#2d8cff,#00c9ff);

}

.mr-category-card:nth-child(8n+3){

background:linear-gradient(135deg,#18b566,#00d084);

}

.mr-category-card:nth-child(8n+4){

background:linear-gradient(135deg,#7b4dff,#9b6dff);

}

.mr-category-card:nth-child(8n+5){

background:linear-gradient(135deg,#ff4fa0,#ff6bb5);

}

.mr-category-card:nth-child(8n+6){

background:linear-gradient(135deg,#ffb000,#ffd54f);

}

.mr-category-card:nth-child(8n+7){

background:linear-gradient(135deg,#00bcd4,#00e5ff);

}

.mr-category-card:nth-child(8n){

background:linear-gradient(135deg,#ff4d4f,#ff7b7b);

}

.mr-category-icon{

font-size:42px;

margin-bottom:12px;

}

.mr-category-name{

font-size:17px;

font-weight:800;

margin-bottom:8px;

}

.mr-category-count{

font-size:14px;

font-weight:700;

opacity:.95;

}

.mr-category-card:hover{

transform:translateY(-8px) scale(1.03);

}

/*==========================
Hidden Cards
==========================*/

.mr-hidden-brand,
.mr-hidden-category{

display:none;

}

/*==========================
View More Button
==========================*/

.mr-brand-more,
.mr-category-more{

text-align:center;

margin-top:25px;

}

.mr-show-brand-btn,
.mr-show-category-btn{

padding:14px 34px;

border:none;

border-radius:50px;

background:linear-gradient(135deg,#ff6b00,#ffb000);

color:#fff;

font-size:16px;

font-weight:800;

cursor:pointer;

box-shadow:0 10px 25px rgba(0,0,0,.12);

transition:.35s;

}

.mr-show-brand-btn:hover,
.mr-show-category-btn:hover{

transform:scale(1.05);

}

/*==========================
Responsive
==========================*/

@media(max-width:768px){

.mr-brand-grid,
.mr-category-grid{

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

gap:12px;

}

.mr-brand-card{

min-height:75px;

font-size:14px;

}

.mr-category-card{

min-height:130px;

padding:16px 10px;

}

.mr-category-icon{

font-size:30px;

}

.mr-category-name{

font-size:14px;

}

.mr-category-count{

font-size:12px;

}

}
/* ==========================================================
MR Shop World
Country.css
Version 2
Part 5
----------------------------------------------------------
Premium Product Cards
Amazon Style
==========================================================*/

/*==========================
Products Grid
==========================*/

.mr-products-grid{

display:grid;

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

gap:18px;

margin-top:30px;

}

/*==========================
Product Card
==========================*/

.mr-product-card{

background:#fff;

border-radius:18px;

overflow:hidden;

box-shadow:0 10px 30px rgba(0,0,0,.08);

transition:.35s;

height:100%;

}

.mr-product-card:hover{

transform:translateY(-8px);

box-shadow:0 20px 45px rgba(0,0,0,.18);

}

.mr-product-link{

display:block;

color:#111;

}

/*==========================
Image
==========================*/

.mr-product-image{

position:relative;

aspect-ratio:1/1;

background:#fff;

padding:10px;

display:flex;

align-items:center;

justify-content:center;

}

.mr-product-image img{

width:100%;

height:100%;

object-fit:contain;

}

/*==========================
Sale Badge
==========================*/

.mr-sale-badge{

position:absolute;

top:8px;

left:8px;

padding:5px 10px;

border-radius:30px;

font-size:11px;

font-weight:800;

background:#ff3d3d;

color:#fff;

z-index:5;

}

/*==========================
Content
==========================*/

.mr-product-content{

padding:10px;

}

/*==========================
Title
==========================*/

.mr-product-title{

font-size:14px;

font-weight:700;

line-height:1.4;

height:40px;

overflow:hidden;

display:-webkit-box;

-webkit-line-clamp:2;

-webkit-box-orient:vertical;

margin:0 0 8px;

color:#111;

}

/*==========================
Price
==========================*/

.mr-product-price{

font-size:16px;

font-weight:800;

color:#ff6b00;

margin-bottom:6px;

}

/*==========================
Rating
==========================*/

.mr-product-rating{

font-size:12px;

margin-bottom:8px;

}

/*==========================
Responsive
==========================*/

@media(max-width:768px){

.mr-products-grid{

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

gap:8px;

}

.mr-product-card{

border-radius:12px;

}

.mr-product-content{

padding:6px;

}

.mr-product-title{

font-size:11px;

line-height:1.25;

height:28px;

margin-bottom:4px;

}

.mr-product-price{

font-size:13px;

margin-bottom:2px;

}

.mr-product-rating{

font-size:10px;

margin-bottom:2px;

}

.mr-sale-badge{

font-size:9px;

padding:3px 6px;

}

}
/* ==========================================================
MR Shop World
Country.css
Version 2
Part 6
----------------------------------------------------------
Article
Digital
Travel
==========================================================*/

/*==========================
Common Grid
==========================*/

.mr-article-grid,
.mr-digital-grid,
.mr-travel-grid{

display:grid;

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

gap:20px;

margin-top:30px;

}

/*==========================
Common Card
==========================*/

.mr-article-card,
.mr-digital-card,
.mr-travel-card{

background:#fff;

border-radius:20px;

overflow:hidden;

box-shadow:0 10px 30px rgba(0,0,0,.08);

transition:.35s;

}

.mr-article-card:hover,
.mr-digital-card:hover,
.mr-travel-card:hover{

transform:translateY(-8px);

box-shadow:0 20px 45px rgba(0,0,0,.18);

}

.mr-article-link,
.mr-digital-link,
.mr-travel-link{

display:block;

color:#111;

}

/*==========================
Image
==========================*/

.mr-article-image,
.mr-digital-image,
.mr-travel-image{

position:relative;

aspect-ratio:16/10;

overflow:hidden;

}

.mr-article-image img,
.mr-digital-image img,
.mr-travel-image img{

width:100%;

height:100%;

object-fit:cover;

transition:.4s;

}

.mr-article-card:hover img,
.mr-digital-card:hover img,
.mr-travel-card:hover img{

transform:scale(1.08);

}

/*==========================
Badges
==========================*/

.mr-digital-badge,
.mr-travel-badge{

position:absolute;

top:10px;

left:10px;

padding:6px 12px;

border-radius:30px;

font-size:11px;

font-weight:800;

color:#fff;

z-index:5;

}

.mr-digital-badge{

background:linear-gradient(135deg,#7b4dff,#9b6dff);

}

.mr-travel-badge{

background:linear-gradient(135deg,#ff6b00,#ffb000);

}

/*==========================
Content
==========================*/

.mr-article-content,
.mr-digital-content,
.mr-travel-content{

padding:16px;

}

/*==========================
Title
==========================*/

.mr-article-title,
.mr-digital-title,
.mr-travel-title{

font-size:17px;

font-weight:800;

line-height:1.45;

margin:0 0 10px;

height:48px;

overflow:hidden;

display:-webkit-box;

-webkit-line-clamp:2;

-webkit-box-orient:vertical;

}

/*==========================
Excerpt
==========================*/

.mr-article-excerpt,
.mr-travel-excerpt{

font-size:14px;

line-height:1.6;

color:#666;

height:66px;

overflow:hidden;

margin-bottom:14px;

}

/*==========================
Buttons
==========================*/

.mr-readmore,
.mr-download-btn,
.mr-travel-button{

display:inline-block;

padding:10px 18px;

border-radius:30px;

font-size:13px;

font-weight:800;

color:#fff;

}

.mr-readmore{

background:linear-gradient(135deg,#2d8cff,#00c9ff);

}

.mr-download-btn{

background:linear-gradient(135deg,#7b4dff,#9b6dff);

}

.mr-travel-button{

background:linear-gradient(135deg,#ff6b00,#ff9800);

}

/*==========================
Responsive
==========================*/

@media(max-width:768px){

.mr-article-grid,
.mr-digital-grid,
.mr-travel-grid{

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

gap:12px;

}

.mr-article-content,
.mr-digital-content,
.mr-travel-content{

padding:10px;

}

.mr-article-title,
.mr-digital-title,
.mr-travel-title{

font-size:13px;

height:36px;

}

.mr-article-excerpt,
.mr-travel-excerpt{

display:none;

}

.mr-readmore,
.mr-download-btn,
.mr-travel-button{

padding:7px 12px;

font-size:11px;

}

}
/* ==========================================================
MR Shop World
Country.css
Version 2
Part 7
----------------------------------------------------------
Footer CTA
Share
Pagination
Back To Top
==========================================================*/

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

.mr-footer-cta{

margin:70px 0 35px;

}

.mr-footer-box{

background:linear-gradient(135deg,#ff6b00,#ff9800,#ff4fa0,#7b4dff,#2d8cff);

background-size:300% 300%;

animation:mrFooterGradient 12s ease infinite;

border-radius:28px;

padding:55px 30px;

text-align:center;

color:#fff;

box-shadow:0 20px 50px rgba(0,0,0,.18);

}

@keyframes mrFooterGradient{

0%{background-position:0% 50%;}

50%{background-position:100% 50%;}

100%{background-position:0% 50%;}

}

.mr-footer-box h2{

font-size:34px;

font-weight:900;

margin-bottom:15px;

}

.mr-footer-box p{

font-size:18px;

line-height:1.8;

max-width:850px;

margin:auto;

}

.mr-footer-buttons{

display:flex;

justify-content:center;

gap:18px;

margin-top:30px;

flex-wrap:wrap;

}

.mr-footer-btn{

padding:15px 30px;

border-radius:50px;

font-size:16px;

font-weight:800;

background:#fff;

color:#111;

transition:.35s;

box-shadow:0 10px 25px rgba(0,0,0,.12);

}

.mr-footer-btn:hover{

transform:translateY(-5px) scale(1.05);

}

/*==========================
Share Buttons
==========================*/

.mr-share-section{

text-align:center;

margin:60px 0;

}

.mr-share-grid{

display:grid;

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

gap:15px;

margin-top:20px;

}

.mr-share-btn{

padding:16px;

border-radius:18px;

text-align:center;

font-size:15px;

font-weight:800;

color:#fff;

transition:.35s;

}

.facebook{

background:#1877f2;

}

.twitter{

background:#111;

}

.whatsapp{

background:#25d366;

}

.telegram{

background:#229ED9;

}

.mr-share-btn:hover{

transform:translateY(-6px);

}

/*==========================
Pagination
==========================*/

.mr-pagination{

margin-top:40px;

text-align:center;

}

.mr-pagination ul{

display:inline-flex;

gap:8px;

list-style:none;

padding:0;

margin:0;

}

.mr-pagination a,

.mr-pagination span{

display:flex;

align-items:center;

justify-content:center;

width:44px;

height:44px;

border-radius:50%;

background:#fff;

color:#111;

font-weight:700;

box-shadow:0 8px 18px rgba(0,0,0,.08);

transition:.35s;

}

.mr-pagination .current{

background:#ff6b00;

color:#fff;

}

.mr-pagination a:hover{

background:#ff9800;

color:#fff;

}

/*==========================
Back To Top
==========================*/

.mr-back-top{

text-align:center;

margin:40px 0 20px;

}

.mr-back-top a{

display:inline-block;

padding:14px 28px;

border-radius:50px;

background:linear-gradient(135deg,#2d8cff,#00c9ff);

color:#fff;

font-size:15px;

font-weight:800;

box-shadow:0 10px 25px rgba(0,0,0,.12);

transition:.35s;

}

.mr-back-top a:hover{

transform:translateY(-5px);

}

/*==========================
Responsive
==========================*/

@media(max-width:768px){

.mr-footer-box{

padding:35px 18px;

}

.mr-footer-box h2{

font-size:24px;

}

.mr-footer-box p{

font-size:14px;

}

.mr-footer-buttons{

flex-direction:column;

gap:12px;

}

.mr-footer-btn{

width:100%;

}

.mr-share-grid{

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

gap:10px;

}

.mr-share-btn{

font-size:13px;

padding:12px;

}

}
/* ==========================================================
MR Shop World
Country.css
Version 2
Part 8
----------------------------------------------------------
Premium Effects
Animation
Glass UI
Final Polish
==========================================================*/

/* Smooth Animation */

.mr-product-card,
.mr-article-card,
.mr-digital-card,
.mr-travel-card,
.mr-category-card,
.mr-brand-card,
.mr-stat-card,
.mr-marketplace-card,
.mr-filter-card{

transition:
all .35s ease;

}

/* Hover */

.mr-product-card:hover,
.mr-article-card:hover,
.mr-digital-card:hover,
.mr-travel-card:hover,
.mr-category-card:hover,
.mr-brand-card:hover,
.mr-stat-card:hover,
.mr-marketplace-card:hover,
.mr-filter-card:hover{

transform:
translateY(-8px);

box-shadow:
0 20px 45px rgba(0,0,0,.18);

}

/* Glass Effect */

.mr-glass{

background:
rgba(255,255,255,.18);

backdrop-filter:
blur(12px);

-webkit-backdrop-filter:
blur(12px);

border:
1px solid rgba(255,255,255,.25);

}

/* Rounded */

.mr-round{

border-radius:20px;

}

/* Beautiful Shadows */

.mr-shadow{

box-shadow:

0 12px 35px rgba(0,0,0,.12);

}

/* Gradient Text */

.mr-gradient-text{

background:

linear-gradient(
90deg,
#ff6b00,
#ffb000,
#ff4fa0,
#7b4dff,
#2d8cff
);

-webkit-background-clip:text;

-webkit-text-fill-color:transparent;

background-clip:text;

}

/* Button Animation */

.mr-footer-btn,
.mr-share-btn,
.mr-readmore,
.mr-download-btn,
.mr-travel-button{

transition:.35s;

}

.mr-footer-btn:hover,
.mr-share-btn:hover,
.mr-readmore:hover,
.mr-download-btn:hover,
.mr-travel-button:hover{

transform:
translateY(-5px)
scale(1.05);

}

/* Image Zoom */

.mr-product-image img,
.mr-article-image img,
.mr-digital-image img,
.mr-travel-image img{

transition:
transform .4s ease;

}

.mr-product-card:hover img,
.mr-article-card:hover img,
.mr-digital-card:hover img,
.mr-travel-card:hover img{

transform:
scale(1.08);

}

/* Selection */

::selection{

background:#ff6b00;

color:#fff;

}

/* Scrollbar */

::-webkit-scrollbar{

width:10px;

}

::-webkit-scrollbar-track{

background:#f1f1f1;

}

::-webkit-scrollbar-thumb{

background:

linear-gradient(
180deg,
#ff6b00,
#ffb000
);

border-radius:20px;

}

::-webkit-scrollbar-thumb:hover{

background:

linear-gradient(
180deg,
#ff4d4f,
#7b4dff
);

}
/* ==========================================================
MR Shop World
Country.css
Version 2
Part 9 (FINAL)
----------------------------------------------------------
Dark Mode
Performance
Final Responsive
==========================================================*/

/*==========================
Performance
==========================*/

*{

box-sizing:border-box;

}

img{

display:block;

max-width:100%;

height:auto;

}

.mr-product-image img,
.mr-article-image img,
.mr-digital-image img,
.mr-travel-image img{

will-change:transform;

}

/*==========================
Focus
==========================*/

a:focus,
button:focus{

outline:3px solid #ffb000;

outline-offset:3px;

}

/*==========================
Smooth Loading
==========================*/

.mr-product-card,
.mr-article-card,
.mr-digital-card,
.mr-travel-card{

animation:mrFade .45s ease;

}

@keyframes mrFade{

0%{

opacity:0;

transform:translateY(15px);

}

100%{

opacity:1;

transform:translateY(0);

}

}

/*==========================
Dark Mode Ready
==========================*/

@media(prefers-color-scheme:dark){

body{

background:#111827;

color:#f5f5f5;

}

.mr-product-card,
.mr-article-card,
.mr-digital-card,
.mr-travel-card,
.mr-category-card,
.mr-brand-card,
.mr-marketplace-card{

background:#1f2937;

color:#fff;

}

.mr-product-title,
.mr-article-title,
.mr-digital-title,
.mr-travel-title{

color:#fff;

}

.mr-section-heading h2{

color:#fff;

}

.mr-section-heading p{

color:#d1d5db;

}

}

/*==========================
Ultra Mobile
==========================*/

@media(max-width:480px){

.mr-country-container{

padding:8px;

}

.mr-country-hero{

padding:40px 14px;

}

.mr-country-hero h1{

font-size:24px;

}

.mr-country-hero p{

font-size:13px;

}

.mr-products-grid{

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

gap:6px;

}

.mr-product-card{

border-radius:10px;

}

.mr-product-content{

padding:5px;

}

.mr-product-title{

font-size:10px;

height:26px;

line-height:1.25;

}

.mr-product-price{

font-size:11px;

}

.mr-product-rating{

font-size:9px;

}

.mr-article-grid,
.mr-digital-grid,
.mr-travel-grid{

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

gap:8px;

}

.mr-category-grid,
.mr-brand-grid,
.mr-country-stats{

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

gap:8px;

}

.mr-filter-grid{

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

gap:8px;

}

.mr-marketplace-grid{

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

gap:8px;

}

}

/*==========================
Print
==========================*/

@media print{

.mr-footer-cta,
.mr-share-section,
.mr-back-top{

display:none!important;

}

}

/*==========================
END
==========================*/
.mr-article-image {
    width: 100%;
    height: 150px;
    overflow: hidden;
    border-radius: 14px 14px 0 0;
    background: #eef2ff;
}
.mr-article-image img {
    width: 100%;
    height: 150px;
    object-fit: cover;
    display: block;
}
.mr-article-noimg {
    width: 100%;
    height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 40px;
    background: linear-gradient(135deg, #e0e7ff, #f8fafc);
}
/* All Articles button - thin premium */
.mr-articles-section .mr-section-footer {
    text-align: center;
    margin-top: 18px;
    margin-bottom: 6px;
}

.mr-articles-section .mr-browse-btn.btn-big {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 9px 18px;
    border-radius: 50px;
    font-size: 12.5px;
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none !important;
    color: #fff !important;
    background: linear-gradient(135deg, #2563eb, #06b6d4);
    box-shadow: 0 6px 16px rgba(37, 99, 235, 0.25);
    border: none;
    transition: all 0.25s ease;
    white-space: nowrap;
}

.mr-articles-section .mr-browse-btn.btn-big:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 22px rgba(37, 99, 235, 0.35);
    filter: brightness(1.05);
}

@media (max-width: 768px) {
    .mr-articles-section .mr-browse-btn.btn-big {
        padding: 8px 14px;
        font-size: 12px;
    }
}

.mr-articles-pagination {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    margin-top: 20px;
}
.mr-articles-pagination .mr-page-num {
    min-width: 36px;
    height: 36px;
    padding: 0 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: #fff;
    color: #0f172a !important;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none !important;
    box-shadow: 0 2px 8px rgba(0,0,0,.06);
}
.mr-articles-pagination .mr-page-num.active,
.mr-articles-pagination .mr-page-num:hover {
    background: linear-gradient(135deg, #2563eb, #06b6d4);
    color: #fff !important;
}
.mr-article-image {
    width: 100%;
    height: 150px;
    overflow: hidden;
    border-radius: 14px 14px 0 0;
    background: #eef2ff;
}
.mr-article-image img {
    width: 100%;
    height: 150px;
    object-fit: cover;
    display: block;
}
.mr-article-noimg {
    width: 100%;
    height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 40px;
    background: linear-gradient(135deg, #e0e7ff, #f8fafc);
}
/* Product Filters */
.mr-product-filters {
    margin: 0 0 18px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.mr-filter-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.mr-filter-label {
    font-size: 12px;
    font-weight: 700;
    color: #64748b;
}
.mr-filter-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.mr-chip {
    display: inline-flex;
    align-items: center;
    padding: 5px 10px;
    border-radius: 50px;
    font-size: 11px;
    font-weight: 700;
    text-decoration: none !important;
    color: #334155 !important;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    transition: .2s;
    line-height: 1.2;
}
.mr-chip:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(0,0,0,.08);
}
.mr-chip.active {
    color: #fff !important;
    border-color: transparent;
    background: linear-gradient(135deg, #2563eb, #06b6d4);
}

.mr-chip-m1 { background: #eff6ff; color: #1d4ed8 !important; }
.mr-chip-m2 { background: #f5f3ff; color: #6d28d9 !important; }
.mr-chip-m3 { background: #ecfdf5; color: #047857 !important; }
.mr-chip-m4 { background: #fff7ed; color: #c2410c !important; }
.mr-chip-m5 { background: #ecfeff; color: #0e7490 !important; }
.mr-chip-m6 { background: #fdf2f8; color: #be185d !important; }

.mr-chip-c1 { background: #fef3c7; color: #b45309 !important; }
.mr-chip-c2 { background: #e0e7ff; color: #4338ca !important; }
.mr-chip-c3 { background: #dcfce7; color: #15803d !important; }
.mr-chip-c4 { background: #ffe4e6; color: #be123c !important; }
.mr-chip-c5 { background: #f3e8ff; color: #7e22ce !important; }
.mr-chip-c6 { background: #e0f2fe; color: #0369a1 !important; }

.mr-chip-m1.active,
.mr-chip-m2.active,
.mr-chip-m3.active,
.mr-chip-m4.active,
.mr-chip-m5.active,
.mr-chip-m6.active,
.mr-chip-c1.active,
.mr-chip-c2.active,
.mr-chip-c3.active,
.mr-chip-c4.active,
.mr-chip-c5.active,
.mr-chip-c6.active {
    color: #fff !important;
    background: linear-gradient(135deg, #2563eb, #06b6d4);
}

.mr-products-pagination {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    margin-top: 20px;
}
.mr-products-pagination .mr-page-num {
    min-width: 34px;
    height: 34px;
    padding: 0 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: #fff;
    color: #0f172a !important;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none !important;
    box-shadow: 0 2px 8px rgba(0,0,0,.06);
}
.mr-products-pagination .mr-page-num.active,
.mr-products-pagination .mr-page-num:hover {
    background: linear-gradient(135deg, #2563eb, #06b6d4);
    color: #fff !important;
}

@media (max-width: 768px) {
    .mr-chip { font-size: 10.5px; padding: 4px 9px; }
}
.mr-page-dots {
    display: inline-flex;
    align-items: center;
    padding: 0 4px;
    color: #94a3b8;
    font-weight: 700;
}
.mr-page-nav {
    padding: 0 12px !important;
    min-width: auto !important;
}