:root {
	--primary-teal: #00ffd0;
	--primary-teal-hover: #00dbc7;
}

@font-face {
    font-family: 'Make It Better';
    src: url('../fonts/MakeItBetter-Lt.woff2') format('woff2'),
         url('../fonts/MakeItBetter-Lt.woff') format('woff');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Make It Better';
    src: url('../fonts/MakeItBetter-Rg.woff2') format('woff2'),
         url('../fonts/MakeItBetter-Rg.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Make It Better';
    src: url('../fonts/MakeItBetter-Bd.woff2') format('woff2'),
         url('../fonts/MakeItBetter-Bd.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Make It Better XBold';
    src: url('../fonts/MakeItBetter-XBd.woff2') format('woff2'),
         url('../fonts/MakeItBetter-XBd.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

html {
    width: 100%;
}
body {
    font-family: 'Make It Better';
    font-weight: normal;
	padding: 0;
	margin: 0;
	height: 100%;
	overflow-x: hidden;
	color: #333;
}
h1,h2,h3,h4,h5,h6,ul,p { padding: 0; margin: 0;}
ul, ol { list-style: none; padding: 0; margin: 0;}
a { text-decoration: none;}
a:hover, a:focus { text-decoration: none; outline: none;}
.btn.focus, .btn:focus { box-shadow: none;}
a img { border: none;}
p a { color: #2267e8; text-decoration: underline;}
p a:hover { color: #2267e8; text-decoration: underline;}
strong { font-weight: bold;}
.align-right { text-align: right;}
button:focus { outline: none;}
::-webkit-input-placeholder { opacity: 1;}
::-moz-placeholder { opacity: 1;}
:-ms-input-placeholder { opacity: 1;}
:-moz-placeholder { opacity: 1;}
.hide { display: none;}
button { cursor: pointer; border: 0;}
* { -webkit-transition: all .1s; -moz-transition: all .1s; -ms-transition: all .1s; -o-transition: all .1s; transition: all .1s;}
select { appearance: none; -webkit-appearance: none; border-radius: 0;}
.hide { display: none !important;}
section { padding: 100px 0;}
.img-fluid { max-width: 100%; height: auto;}

.btn { text-decoration: none; display: inline-block; background: #ccc; padding: 7px 20px; border-radius: 8px; font-size: 15px; font-weight: 700; color: #000;}
.btn i { font-size: 14px; margin: 0 3px;}
.btn:hover { text-decoration: none;}
.btn-teal { background: var(--primary-teal); color: #333;}
.btn-teal:hover { background: var(--primary-teal-hover); color: #333;}
.btn-black { background: #333; color: #fff;}
.btn-black:hover { background: #4c4c4c; color: #fff;}
.btn-transparent { background: transparent; color: #333;}
.btn-transparent:hover { background: #eaeaea; color: #333;}
.btn-disabled { background: #ddd; color: #555;}
.btn-disabled-outline { background: #fff; border: 1px solid #aaa; color: #aaa;}
.btn-disabled-outline:hover { background: #fff; border: 1px solid #aaa; color: #aaa;}

.btn-outline { background: transparent; border: 1px solid #333; color: #333;}
.btn-outline:hover { background: #eaeaea; color: #333;}
.btn-teal-outline { background: transparent; border: 1px solid var(--primary-teal); color: var(--primary-teal);}
.btn-teal-outline:hover { background: var(--primary-teal-hover); color: #fff;}

.form-block { margin: 0 0 50px 0;}
.form-control { font-size: 17px; padding: 5px 10px;}
.form-control:focus { box-shadow: none;}

.text-sec { margin: 0 0 50px 0;}
.text-sec h1, .text-sec h2, .text-sec h3, .text-sec h4, .text-sec h5 { font-size: 35px; font-weight: 700; margin: 0 0 20px 0;}
.text-sec h2 { color: #282248;}
.text-sec h3 { font-size: 30px;}
.text-sec h4 { font-size: 25px;}
.text-sec p { font-size: 17px; color: #282248; margin: 0 0 20px 0;}
.text-sec ul { list-style-type: disc; list-style-position: inside; margin: 0 0 20px 0;}
.text-sec ul li { font-size: 17px; color: #282248;}
.text-sec .btn { margin: 0 10px 20px 0;}

.error-msg { display: block; background: #ffe2e2; padding: 10px 15px; border: 1px solid #ff0000; border-radius: 5px; font-size: 17px; font-weight: 700; color: #ff0000; margin: 10px 0;}
.success-msg { display: block; background: #d9ffe5; padding: 10px 15px; border: 1px solid var(--primary-teal); border-radius: 5px; font-size: 17px; font-weight: 700; color: var(--primary-teal); margin: 10px 0;}
.plain-msg { display: block; background: #fff; padding: 10px 15px; border: 1px solid #ddd; border-radius: 5px; font-size: 14px; color: #777; margin: 30px 0 0; text-align: center;}
.notice-msg { display: block; background: #FFC; padding: 10px 15px; border: 1px solid #FC6; border-radius: 5px; font-size: 14px; color: #666; margin: 30px 0 0; text-align: center;}
.error-text { display: inline-block; font-size: 17px; font-weight: 700; color: #ff0000; margin: 10px 0;}
.success-text { display: inline-block; font-size: 17px; font-weight: 700; color: #093; margin: 10px 0;}

#form_msg { display: block;}
.form-success { display: block; background: #D8FFC0; padding: 7px 20px; margin: 0 0 5px 0; font-size: 17px; font-weight: 500; color: #2E6800; text-align: center; margin: 0 10px 20px 0;}
.form-error { display: block; background: #FFE8E8; padding: 7px 20px; margin: 0 0 5px 0; font-size: 17px; font-weight: 500; color: #FF0000; text-align: center; margin: 0 10px 20px 0;}
#loader-icon { display: none;}

header { box-shadow: inset 0 -1px #eaeaea; padding: 0 10px;}
.navbar { padding: 0;}
.navbar-brand { width: 120px; padding: 0 0 5px 0; margin: 0 20px 0 0;}
.navbar-nav .menu-item { margin: 0 30px 0 0;}
.navbar-nav .menu-item a { display: block; font-size: 16px; color: #333; padding: 15px 0;  border-bottom: 2px solid transparent;}
.navbar-nav .menu-item:hover a, .navbar-nav .menu-item.active a { border-bottom: 2px solid var(--primary-teal);}
.header-right .btns { display: flex; align-items: center;}
.header-right .btns .btn { margin: 0 0 0 10px;}
.header-right .btn-outline { display: flex; align-items: center;}
.header-right .btn-outline i { font-size: 20px; line-height: 1;}

.hero { text-align: center;}
.hero .caption { margin: 0 0 50px 0;}
.hero .caption h1 { font-size: 45px; margin: 0 0 20px 0;}
.hero .caption h1 span { position: relative;}
.hero .caption h1 span::after { content: ""; position: absolute; left: 0; right: 0; margin: auto; bottom: 0px; width: 100%; height: 10px; background: var(--primary-teal); z-index: -1;}
.hero .caption p { font-size: 20px; padding: 0 15%;}
.categories { display: flex; justify-content: center; flex-wrap: wrap; gap: 20px;}
.categories .category-box { width: 32%; border-radius: 10px; overflow: hidden; border: 1px solid #ccc;}
.categories .category-box .image { width: 100%;}
.categories .category-box .image img { width: 100%; height: 200px; object-fit: cover;}
.categories .category-box .text { padding: 10px 20px;}
.categories .category-box .text span { font-size: 18px; color: #333;}

.category-posts { padding: 0; margin: 0 0 100px 0;}
.category-posts .sec-head { margin: 0 0 40px 0;}
.category-posts .sec-head h3 { font-size: 40px;}
.category-posts .sec-head h3 span { position: relative;}
.category-posts .sec-head h3 span::after { content: ""; position: absolute; left: 0; right: 0; margin: auto; bottom: 10px; width: 100%; height: 10px; background: var(--primary-teal); z-index: -1;}
.category-posts .sec-inner { display: flex; flex-wrap: wrap; gap: 20px;}
.category-posts .post-block { width: 32%; border: 1px solid #ccc; border-radius: 10px; overflow: hidden;}
.category-posts .post-block .image { width: 100%;}
.category-posts .post-block .image img { width: 100%; height: 200px; object-fit: cover;}
.category-posts .post-block .text { padding: 20px;}
.category-posts .post-block .text .title { display: block; font-size: 18px; color: #333; margin: 0 0 10px 0;}
.category-posts .post-block .text p { font-size: 15px;}

.current-topics .post-block { width: 23%;}
.similar-posts .post-block { width: 23%;}

.download-app { padding: 0; text-align: center;}
.download-app .sec-inner { position: relative;}
.download-app .sec-inner h3 { font-size: 35px;}
.download-app .sec-inner p { font-size: 15px; margin: 0 0 20px 0;}
.download-app .btns { margin: 0 0 50px 0;}
.download-app .btns a { display: inline-block; margin: 0 10px;}
.download-app .btns a img { height: 50px;}
.download-app .app-overview { width: 100%;}
.download-app .qr-code { position: absolute; right: 0; top: 0; width: 150px; height: 150px;}
.download-app .qr-code img { margin: 0 0 10px 0;}
.download-app .qr-code span { font-size: 15px;}

.bottom-links { padding: 100px 50px;}
.bottom-links .sec-inner { display: flex; gap: 20px;}
.bottom-links .links-block { width: 19%;}
.bottom-links .widget_nav_menu { width: 100%; margin: 0 0 30px 0;}
.bottom-links .bottom-menu h3 { font-size: 20px; margin: 0 0 10px 0;}
.bottom-links .bottom-menu a { display: flex; align-items: center; font-size: 15px; color: #757575; padding: 7px 0;}
.bottom-links .bottom-menu a::after { content: "\F285"; font-family: "Bootstrap-icons"; font-size: 10px; margin: 2px 0 0 5px;}
.bottom-links .bottom-menu a:hover { text-decoration: underline;}

footer { background: #eaeaea; padding: 30px 20px;}
.footer-links { display: flex; gap: 20px; margin: 0 0 20px 0;}
.footer-links .footer-menu { width: 100%;}
.footer-links .footer-menu .widget-title { font-size: 16px; font-weight: bold;}
.footer-links .footer-menu a { display: flex; align-items: center; font-size: 15px; color: #333;}
.footer-links .footer-menu a:hover { text-decoration: underline;}
.app-download { text-align: center;}
.app-download h4 { font-size: 16px; font-weight: bold; margin: 0 0 15px 0;}
.app-download .btns { margin: 0 0 50px 0;}
.app-download .btns a { display: inline-block; margin: 0 5px;}
.app-download .btns a img { height: 45px;}
.social-links { margin: 0 0 50px 0; text-align: center;}
.social-links h4 { font-size: 16px; font-weight: bold; margin: 0 0 15px 0;}
.social-links a { margin: 0 6px;}
.copyright { text-align: center;}
.copyright p { font-size: 15px;}

.hero-category { padding: 0; margin: 0 0 100px 0;}
.hero-category img { width: 100%; max-height: 650px; object-fit: cover;}
.posts-list { padding: 0;}
.posts-list .sec-inner { display: flex; flex-direction: column;}
.posts-list .post-block { display: flex; justify-content: space-between; padding: 0 0 10px 0; margin: 0 0 10px 0; border-bottom: 1px solid #ccc;}
.posts-list .post-block .image { width: 25%;}
.posts-list .post-block .image img { width: 100%; height: 200px; object-fit: cover; border-radius: 10px;}
.posts-list .post-block .text { width: 75%; padding: 5px 0 5px 20px;}
.posts-list .post-block .text .title { display: block; font-size: 20px; font-weight: bold; color: #333; margin: 0 0 10px 0;}
.posts-list .post-block .text p { font-size: 15px;}
.posts-list .post-block .meta { margin: 20px 0 0 0; display: flex;}
.posts-list .post-block .meta li { font-size: 14px; margin: 0 5px 0 0; position: relative;}
.posts-list .post-block .meta li::after { content: "·"; margin: 0 0 0 5px;}
.posts-list .post-block .meta li:last-child::after { display: none;}

.article-page { padding: 50px 0;}
.article-page .sec-inner { display: flex;}
.article-page .table-content { width: 25%;}
.article-page .sidebar { width: 25%;}
.article-page .post-data { width: 50%; margin: 0 0 0 40px;}
.article-page .breadcrumb { width: 100%;}
.post-title { display: flex; align-items: center; position: relative; padding: 0 0 0 20px;}
.post-title::before { content: ""; position: absolute; left: 0; top: 10%; width: 8px; height: 80%; background: var(--primary-teal); border-radius: 5px;}
.post-title h1 { font-size: 40px; font-weight: bold; line-height: 1.4; color: rgba(0,0,0,0.86);}
.post-meta { display: flex; justify-content: space-between; align-items: flex-end; margin: 10px 0 20px;}
.post-author { display: flex;}
.post-author img { width: 50px; height: 50px; border-radius: 50%; object-fit: cover; margin: 0 20px 0 0;}
.post-author .info { width: 80%;}
.post-author .info a { font-size: 16px; color: #333;}
.post-author .info p { font-size: 16px;}
.post-date { margin: 0 0 5px 0;}
.post-date i { margin: 0 5px 0 0;}
.post-date span { font-size: 16px;}
.reading-time { margin: 0 0 5px 0;}
.reading-time i { margin: 0 5px 0 0;}
.reading-time span { font-size: 14px;}

.post-content { font-size: 1.05rem; line-height: 1.4; color: #222; margin-top: 2rem;}
.post-content p { font-size: 20px; margin: 0 0 20px 0;}
.post-content p.wp-caption-text { font-size: 15px; text-align: left; margin: 5px 0 0 0;}
.post-content strong { font-weight: 600;}
.post-content em { font-style: italic;}
.post-content h2,
.post-content h3,
.post-content h4 { font-weight: 600; margin-top: 2rem; margin-bottom: 1rem; line-height: 1.4; color: #111;}
.post-content h2 { font-size: 1.6rem; border-left: 4px solid var(--primary-teal); padding-left: 0.75rem;}
.post-content ul { list-style-type: disc; list-style-position: inside; margin: 0 0 20px 0;}
.post-content ol { list-style-type: decimal; list-style-position: inside; margin: 0 0 20px 0;}
.post-content ul li, .post-content ol li { font-size: 20px; margin: 0 0 10px 0;}
.post-content ul li::marker { color: var(--primary-teal);}
.post-content blockquote { border-left: 4px solid var(--primary-teal); background: #f9f9f9; padding: 1.2rem 1.5rem; margin: 1.5rem 0; font-style: italic; color: #444;}
.post-content table { width: 100%; border-collapse: collapse; margin: 1.5rem 0; font-size: 0.95rem;}
.post-content th,
.post-content td { border: 1px solid #ddd; padding: 0.75rem 1rem;}
.post-content th { background: #f4f6f7; font-weight: 600; color: #333;}
.post-content figure { margin: 2rem 0; text-align: center;}
.post-content figure img { width: 100%; max-width: 100%; border-radius: 6px;}
.post-content figcaption { color: #666; font-size: 0.9rem; margin-top: 0.5rem;}
.post-content iframe { width: 100%; height: 400px; border: none; border-radius: 6px; margin: 1.5rem 0;}
.post-content hr { border: none; border-top: 1px solid #e0e0e0; margin: 2rem 0;}

.brief-box { width: 100%; margin: 30px 0; padding: 30px; display: flex; justify-content: space-between; border: 1px solid #ccc;}
.brief-box .icon { width: 20%; height: 60px; background: url("../img/green-label.svg") center bottom no-repeat; display: flex; align-items: center; justify-content: center;}
.brief-box .icon i { font-size: 40px; transform: scaleX(-1)}
.brief-box .text { width: 80%; padding: 10px 20px;}
.brief-box .text h4 { font-size: 22px; margin: 0 0 10px 0;}
.brief-box .text p { font-size: 22px;}
.brief-box .text p strong { font-weight: bold;}
.brief-box .text ul { list-style-type: disc; list-style-position: inside;}
.brief-box .text ul li { font-size: 22px; margin: 0 0 10px 0;}

.tip-box { width: 100%; margin: 30px 0; background: #F2F2F2; padding: 30px; display: flex; justify-content: space-between;}
.tip-box .icon { width: 15%; height: 60px; background: url("../img/green-label.svg") center bottom no-repeat; display: flex; align-items: center; justify-content: center;}
.tip-box .icon i { font-size: 40px; transform: scaleX(-1)}
.tip-box .text { width: 85%; padding: 10px 20px;}
.tip-box .text h4 { font-size: 20px; margin: 0 0 10px 0;}
.tip-box .text p { font-size: 20px;}
.tip-box .text p strong { font-weight: bold;}

.comment-box { width: 100%; margin: 30px 0; background: #F2F2F2; padding: 30px; display: flex; justify-content: space-between;}
.comment-box .icon { width: 15%; height: 60px; background: url("../img/green-label.svg") center bottom no-repeat; display: flex; align-items: center; justify-content: center;}
.comment-box .icon i { font-size: 40px; transform: scaleX(-1)}
.comment-box .text { width: 85%; padding: 10px 20px;}
.comment-box .text h4 { font-size: 20px; margin: 0 0 10px 0;}
.comment-box .text p { font-size: 20px;}
.comment-box .text p strong { font-weight: bold;}
.comment-box .text .post-author { margin: 20px 0 0 0;}
.comment-box .text .post-author img { width: 60px; height: 60px;}
.comment-box .text .post-author .info a { font-size: 20px;}

.info-box { width: 100%; margin: 30px 0; background: #F2F2F2; padding: 30px; display: flex; justify-content: space-between;}
.info-box .icon { width: 15%; height: 60px; background: url("../img/green-label.svg") center bottom no-repeat; display: flex; align-items: center; justify-content: center;}
.info-box .icon i { font-size: 40px; transform: scaleX(-1)}
.info-box .text { width: 85%; padding: 10px 20px;}
.info-box .text h4 { font-size: 20px; margin: 0 0 10px 0;}
.info-box .text p { font-size: 20px;}
.info-box .text p strong { font-weight: bold;}

.disclaimer { width: 100%; margin: 30px 0; background: #F2F2F2; padding: 30px;}
.disclaimer h4 { font-size: 16px; font-weight: bold; margin: 0 0 10px 0;}
.disclaimer p { font-size: 15px;}
.disclaimer p strong { font-weight: bold;}

.article-rating { text-align: center; margin: 40px 0; color: #333; font-size: 16px;}
.article-rating .stars { font-size: 20px; color: #FFD700; margin: 5px 0;}
.article-rating .stars span { color: #333; font-size: 16px; margin-left: 5px;}
.article-actions { display: flex; justify-content: center; gap: 25px; margin-top: 16px; flex-wrap: wrap;}
.article-actions a { color: #2267e8; font-weight: 500; text-decoration: none; font-size: 20px;}
.article-actions a i { margin-right: 6px; font-size: 20px; vertical-align: middle;}

.table-content { position: sticky; top: 100px; max-height: calc(100vh - 120px); overflow-y: auto; z-index: 10;}
.table-content::-webkit-scrollbar { width: 6px;}
.table-content::-webkit-scrollbar-thumb { background: #ccc; border-radius: 3px;}
.table-content::-webkit-scrollbar-thumb:hover { background: #aaa;}

.post-faqs { margin: 50px 0;}
.post-faqs h3 { font-size: 40px; font-weight: bold; margin: 0 0 20px 0;}
.accordion .item { border-bottom: 1px solid #ccc;}
.accordion .item-head { cursor: pointer; position: relative;}
.accordion .item-head::after { content: '\f078'; position: absolute; right: 10px; top: 17px; font-family: 'Font Awesome\ 5 Free'; font-weight: 900; font-size: 13px; transition: all 0.5s ease;}
.accordion .item-head h3 { display: block; font-size: 20px; font-weight: bold; padding: 15px 0; user-select: none;}
.accordion .item-body { display: none;}
.accordion .item-body p { font-size: 20px; padding: 0; margin: 0 0 20px 0; color: #333;}
.accordion .item.show .item-body { display: block;}
.accordion .item.show .item-head::after { content: '\f077';}