@charset "utf-8";

/* ------------------------------- BLOG ------------------------------- */
#blog {padding: 40px 0 50px; flex: 1;}
#blog h1 {font-size: 56px; font-weight: 700; color: #1A222A; line-height: 120%; margin-bottom: 32px;}

/* TABS */
.blog_tabs {display: flex; align-items: center; gap: 40px; margin-bottom: 32px;}
.blog_tab {font-size: 15px; font-weight: 500; color: #8F97A6; padding: 0 0 8px 0; position: relative; transition: color .2s; white-space: nowrap;}
.blog_tab:first-child {padding-left: 0;}
.blog_tab:hover {color: #1A222A;}
.blog_tab.active {color: #1A222A;}
.blog_tab.active::after {content: ''; position: absolute; bottom: -2px; left: 0; right: 0; height: 2px; background: #054517; border-radius: 2px 2px 0 0;}
.blog_tab:first-child.active::after {left: 0;}

/* GRID */
.blog_grid {display: grid; grid-template-columns: 1fr 1fr; gap: 20px;}

/* CARD */
.blog_card {background: #FFFFFF; border-radius: 16px; display: flex; flex-direction: row; align-items: stretch; overflow: hidden; cursor: pointer; transition: box-shadow .2s; min-height: 220px;}
.blog_card_content {flex: 1; padding: 35px 20px 35px; display: flex; flex-direction: column; min-width: 0;}
.blog_card_title {
    font-size: 24px; font-weight: 700; color: #1A222A; line-height: 130%; margin-bottom: 12px;
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
    text-overflow: ellipsis;
}
.blog_card_desc {
    font-size: 16px; font-weight: 400; color: #555966; line-height: 130%; flex: 1; margin-bottom: 40px;
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden;
    text-overflow: ellipsis;
}
.blog_card_bottom {display: flex; align-items: flex-end; gap: 16px;}
.blog_card_arrow {width: 36px; height: 36px; min-width: 36px; border-radius: 50%; background: #EFF1F6; display: flex; align-items: center; justify-content: center; transition: background .2s; flex-shrink: 0;}
.blog_card:hover .blog_card_arrow {background: #054517;}
.blog_card_arrow i {font-size: 15px; color: #1A222A; position: relative; left: 1px; transition: color .2s; transform: rotate(-45deg); display: inline-block;}
.blog_card:hover .blog_card_arrow i {color: #fff;}
.blog_card_meta {display: flex; align-items: center; gap: 20px; row-gap: 1px; flex-wrap: wrap;}
.blog_card_tag {font-size: 14px; color: #555966; line-height: 130%; text-transform: uppercase;}
.blog_card_date {font-size: 14px; color: #555966;}
.blog_card_views {font-size: 14px; color: #555966; display: flex; align-items: center; gap: 4px;}
.blog_card_views i {font-size: 10px;}
.blog_card_image {width: 45%; min-width: 200px; flex-shrink: 0; overflow: hidden; border-radius: 12px; margin: 10px 10px 10px 0;}
.blog_card_image img {width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s;}
.blog_card:hover .blog_card_image img {transform: scale(1.04);}

/* MORE BUTTON */
.blog_more {display: flex; justify-content: center; margin-top: 40px;}
.blog_more_btn {width: 288px;}

/* ------------------------------- BLOG POST ------------------------------- */
#blog_post {padding: 0 0 20px; flex: 1;}

/* HEADER */
#blog_info {margin-top: 30px;}
#blog_info header {padding: 12px; border-radius: 16px; background: #FFFFFF; display: flex;}
#blog_info header .info {display: flex; flex-direction: column; width: 60%; padding: 20px 20px 32px 32px;}
#blog_info header .info > div:first-child {display: flex; align-items: baseline; gap: 20px; padding-bottom: 50px; color: #555966;}
#blog_info header .info > div:first-child a.main_tag {color: #555966; text-transform: uppercase; font-size: 14px;}
#blog_info header .info > div:first-child div {margin-right: 6px; font-size: 14px;}
#blog_info header .info > div:first-child div > i {margin-right: 3px; font-size: 10px; position: relative; top: -1px;}
#blog_info header .info h1 {font-size: 40px; font-weight: 500; margin-top: auto; margin-bottom: 20px; color: #302F2F; line-height: 1.1; max-width: 600px; padding-right: 20px;}
#blog_info header .info .desc {color: #302F2F; font-size: 18px; font-weight: 400; line-height: 24px; max-width: 600px; padding-right: 20px;}
#blog_info header > img {border-radius: 16px; width: 40%; display: block; min-height: 300px; object-fit: cover;}
#blog_info main {padding: 50px 0; border-radius: 16px; margin-top: 20px; background: #FFFFFF;}
#blog_info main > article {max-width: 800px; margin: 0 auto;}
#blog_info main section {margin-bottom: 40px; scroll-padding-top: 100px;}
#blog_info main section h2 {font-size: 32px; font-weight: 500; color: #302F2F; line-height: 1.2; margin-top: 20px; padding-left: 0;}
#blog_info main section h3 {font-size: 24px; font-weight: 500; color: #302F2F; line-height: 32px; margin-top: 20px;}
#blog_info main #navbar {max-width: 800px; margin: 0 auto;}
#blog_info main #navbar h2 {font-size: 32px; font-weight: 500; color: #302F2F; margin-bottom: 20px; margin-top: 0; line-height: 25px;}
#blog_info main #navbar ul li {margin-bottom: 20px;}
#blog_info main #navbar ul li a {color: #302F2F; font-size: 18px; line-height: 22px; position: relative; cursor: pointer; text-decoration: none;}
#blog_info main #navbar ul li a::after {content: ''; border-bottom: 1px dashed #D1D4DA; width: 100%; height: 1px; position: absolute; left: 0; bottom: -2px; transition: .3s ease-in-out;}
#blog_info main #navbar ul li a:hover::after {border-bottom: 1px dashed #01412A;}
#blog_info main section:not(#navbar) p {margin-top: 1rem; font-size: 18px; color: #302F2F; line-height: 26px;}
#blog_info main section:not(#navbar) li {list-style: inherit; font-size: 18px; color: #302F2F; line-height: 26px; margin-bottom: .3rem;}
#blog_info main section:not(#navbar) ol {list-style-type: decimal; padding-inline-start: 20px; margin-top: 1rem;}
#blog_info main section:not(#navbar) ul {list-style-type: disc; padding-inline-start: 20px; margin-top: 1rem;}
#blog_info main nav li {list-style: none !important;}
#blog_info main nav ol {padding-inline-start: 0 !important;}
#blog_info main nav ul {padding-inline-start: 0 !important;}
#blog_info main section:not(#navbar) a {color: #01412A;}
#blog_info main .blog_img {margin: 40px 0;}
#blog_info main .blog_img img {border-radius: 10px; width: 100%; display: block; margin-bottom: 10px;}
#blog_info main .blog_img .desc {font-size: 14px !important; color: #302F2F !important;}
#blog_info #arrow_up {opacity: 0; pointer-events: none; position: fixed; bottom: 40px; right: 16px; z-index: 19; color: transparent; transition: .3s ease-in-out;}
#blog_info #arrow_up.active {opacity: 1; pointer-events: auto; cursor: pointer;}
#blog_info #arrow_up:hover {color: #01412A;}

/* READ ALSO */

#similar_blogs {margin-top: 50px;}
#similar_blogs .title {font-size: 32px; font-weight: 500; color: #1A222A; margin-bottom: 40px;}
#similar_blogs .blog_grid {grid-template-columns: 1fr 1fr 1fr;}
#similar_blogs .blog_card {flex-direction: column-reverse;}
#similar_blogs .blog_card_image {margin: 20px 20px 0 20px; width: calc(100% - 40px);}
#similar_blogs .blog_card_bottom {-webkit-justify-content: space-between;}
#similar_blogs .blog_card_meta {order: 1;}
#similar_blogs .blog_card_arrow {order: 2;}

/* ------------------------------- RESPONSIVE ------------------------------- */
@media only screen and (max-width: 1200px) {
    .blog_card_image {width: 40%; min-width: 160px;}
    #blog_info main {padding: 50px 150px;}
}
@media only screen and (max-width: 1024px) {
    #blog_post {padding: 0; flex: 1;}
    #blog h1 {padding-left: 0; font-size: 40px;}
    .blog_tabs {padding-left: 0; gap: 20px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;}
    .blog_tabs::-webkit-scrollbar {display: none;}
    .blog_grid {grid-template-columns: 1fr;}
    #blog_info {margin-top: 24px;}
    #blog_info main {padding: 20px 0 0 0; background: none;}
    #blog_info header {flex-direction: column-reverse; padding: 16px;}
    #blog_info header > img {width: 100%; min-height: 0; margin-bottom: 16px;}
    #blog_info header .info {width: 100%; padding: 0 16px;}
    #blog_info header .info > div:first-child {padding-bottom: 16px;}
    #blog_info header .info > div:first-child div {font-size: 14px;}
    #blog_info header .info > div:first-child a.main_tag {font-size: 14px;}
    #blog_info header .info h1 {font-size: 24px; margin-bottom: 12px; padding-right: 0;}
    #blog_info header .info .desc {padding-right: 0; font-size: 16px;}
    #blog_info main #navbar ul li {margin-bottom: 16px;}
    #blog_info main #navbar h2 {font-size: 24px;}
    #blog_info main #navbar ul li a {font-size: 18px;}
    #blog_info main section p {font-size: 16px;}
    #blog_info main section h2 {font-size: 26px;}
    #blog_info main section h3 {font-size: 20px;}
    #similar_blogs {margin-top: 40px;}
    #similar_blogs .title {font-size: 24px; margin-bottom: 30px;}
}
@media only screen and (max-width: 800px) {
    .blog_card {flex-direction: column-reverse; min-height: unset;}
    .blog_card_image {width: calc(100% - 40px); min-width: unset; height: 220px; border-radius: 12px; margin: 20px 20px 0;}
    .blog_card_meta {order: 1;}
    .blog_card_arrow {order: 2;}
    .blog_card_content {padding: 20px 20px 20px;}
    .blog_card_title {font-size: 20px;}
    .blog_card_desc {font-size: 14px;}
    .blog_more_btn {width: 100%;}
}
@media only screen and (max-width: 480px) {
    #blog {padding: 24px 0 0;}
    #blog h1 {font-size: 40px; margin-bottom: 32px;}
    .blog_tab {font-size: 16px; padding: 0 0 8px;}
}
.blog_more_btn.disabled {display: none;}