/* Responsive Styles for Mobile, Tablet, Laptop, TV */
@media (max-width: 1200px) {
div[style*=”max-width: 850px”] {
max-width: 95%;
padding: 15px;
}
h1 {
font-size: 2.2em !important;
margin-bottom: 25px !important;
}
h2 {
font-size: 1.8em !important;
margin-top: 35px !important;
margin-bottom: 20px !important;
}
h3 {
font-size: 1.4em !important;
margin-top: 25px !important;
margin-bottom: 10px !important;
}
p, li, table {
font-size: 1em !important;
}
div[style*=”display: flex; flex-wrap: wrap;”] {
flex-direction: column;
gap: 15px;
}
div[style*=”flex: 1 1 280px”] {
width: 100%;
max-width: 350px; /* Limit width for very large screens too */
margin: 0 auto;
}
table thead th, table tbody td {
padding: 10px 15px !important;
}
div[style*=”background-color: #e6f7ff”], div[style*=”background-color: #fff0e6″], div[style*=”background-color: #e0ffe0″] {
padding: 15px !important;
margin-bottom: 30px !important;
margin-top: 30px !important;
}
}
@media (max-width: 768px) {
h1 {
font-size: 1.8em !important;
margin-bottom: 20px !important;
}
h2 {
font-size: 1.6em !important;
margin-top: 30px !important;
margin-bottom: 15px !important;
}
h3 {
font-size: 1.2em !important;
margin-top: 20px !important;
margin-bottom: 8px !important;
}
p, li, table {
font-size: 0.95em !important;
}
div[style*=”background-color: #e6f7ff”] p {
font-size: 1em !important;
}
table thead th, table tbody td {
font-size: 0.9em !important;
}
div[style*=”display: flex; flex-wrap: wrap;”] {
gap: 10px;
}
div[style*=”flex: 1 1 280px”] {
padding: 15px;
}
div[style*=”flex: 1 1 280px”] span {
font-size: 2.5em !important;
}
div[style*=”flex: 1 1 280px”] p {
font-size: 1em !important;
}
}
@media (max-width: 480px) {
h1 {
font-size: 1.5em !important;
margin-bottom: 15px !important;
}
h2 {
font-size: 1.4em !important;
margin-top: 25px !important;
margin-bottom: 12px !important;
}
h3 {
font-size: 1.1em !important;
margin-top: 18px !important;
margin-bottom: 6px !important;
}
p, li, table {
font-size: 0.9em !important;
}
div[style*=”background-color: #e6f7ff”] p {
font-size: 0.95em !important;
}
table thead th, table tbody td {
padding: 8px 10px !important;
font-size: 0.85em !important;
}
div[style*=”flex: 1 1 280px”] {
padding: 12px;
}
div[style*=”flex: 1 1 280px”] span {
font-size: 2em !important;
}
div[style*=”flex: 1 1 280px”] p {
font-size: 0.9em !important;
}
}
/* Base styles for block editor compatibility and general appearance */
/* Important: This CSS needs to be applied in your block editor’s custom CSS section or theme’s stylesheet. */
/* The inline styles are for direct copy-paste to maximize initial visual fidelity in basic editors. */
/* @font-face {
font-family: ‘Vazirmatn’;
src: url(‘https://cdn.jsdelivr.net/gh/rastikerdar/vazirmatn@v33.003/fonts/webfonts/Vazirmatn-Regular.woff2’) format(‘woff2’);
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: ‘Vazirmatn’;
src: url(‘https://cdn.jsdelivr.net/gh/rastikerdar/vazirmatn@v33.003/fonts/webfonts/Vazirmatn-SemiBold.woff2’) format(‘woff2’);
font-weight: 600;
font-style: normal;
}
@font-face {
font-family: ‘Vazirmatn’;
src: url(‘https://cdn.jsdelivr.net/gh/rastikerdar/vazirmatn@v33.003/fonts/webfonts/Vazirmatn-Bold.woff2’) format(‘woff2’);
font-weight: 700;
font-style: normal;
}
@font-face {
font-family: ‘Vazirmatn’;
src: url(‘https://cdn.jsdelivr.net/gh/rastikerdar/vazirmatn@v33.003/fonts/webfonts/Vazirmatn-ExtraBold.woff2’) format(‘woff2’);
font-weight: 800;
font-style: normal;
} */
body {
direction: rtl;
text-align: right;
}
ul {
padding-right: 20px;
}