/* blog list */

#blogs_list {margin-top: 30px;}
#blogs_list h1 {font-size: 56px; font-weight: 500; color: #1A2A41; line-height: 64px; margin-bottom: 30px;}
#blogs_list .tags {margin-bottom: 30px;}
#blogs_list .tags a {border-radius: 50px; padding: 7px 20px; color: #1A2A41; border: 1px solid #D7D9E0; font-size: 16px; font-weight: 400; text-decoration: none; margin-right: 10px; transition: .3s ease-in-out;}
#blogs_list .tags a.active {background: #2CAFF9; color: #FFFFFF; border: 1px solid transparent; font-weight: 700;}
#blogs_list .tags a:hover {background: #2CAFF9; color: #FFFFFF; border: 1px solid transparent;}
#blogs_list .items {display: flex; flex-wrap: wrap;}
#blogs_list .items > div, #similar_blogs .items > div {cursor: pointer; width: calc(50% - 20px); margin-right: 40px; margin-bottom: 30px; border-radius: 10px; background: #F8F8F8; padding: 8px; display: flex;}
#blogs_list .items > div img, #similar_blogs .items > div img {width: 270px; min-height: 270px; border-radius: 10px; object-fit: cover;}
#blogs_list .items > div > div, #similar_blogs .items > div > div {display: flex; flex-direction: column; padding: 20px 25px; width: 100%;}
#blogs_list .items > div .title, #similar_blogs .items > div .title {font-size: 24px; max-width: 600px; font-weight: 500; color: #1A2A41; line-height: 1.25; margin-bottom: 18px;}
#blogs_list .items > div .desc, #similar_blogs .items > div .desc {font-size: 14px; max-width: 600px; margin-bottom: auto;}
#blogs_list .items > div .info, #similar_blogs .items > div .info {display: flex; align-items: flex-end; margin-top: 20px;}
#blogs_list .items > div .info svg, #similar_blogs .items > div .info svg {margin-right: auto; cursor: pointer; transition: .3s ease-in-out;}
#blogs_list .items > div .info svg .circle, #similar_blogs .items > div .info svg .circle {fill: #FFFFFF; transition: .3s ease-in-out;}
#blogs_list .items > div:hover .info svg, #similar_blogs .items > div:hover .info svg {color: #FFFFFF;}
#blogs_list .items > div:hover .info svg .circle, #similar_blogs .items > div:hover .info svg .circle {fill: #2CAFF9;}
#blogs_list .items > div .info > div, #similar_blogs .items > div .info > div {
    display: flex; align-items: center; font-size: 14px; color: #525252; padding-bottom: 3px;
}
#blogs_list .items > div .info a.main_tag, #similar_blogs .items > div .info a.main_tag {color: #525252; font-size: 14px; margin-right: 20px;}
#blogs_list .items > div .info > div i, #similar_blogs .items > div .info > div i {margin-right: 8px; margin-left: 20px;}
#blogs_list .items > div:nth-child(2n) {margin-right: 0;}
#blogs_list .items > div.static:nth-child(1) {padding: 0; overflow: hidden; position: relative;}
#blogs_list .items > div.static:nth-child(1) > div {position: absolute; border-radius: 20px; background: #F8F8F8; padding: 20px; width: calc(100% - 60px); left: 30px; bottom: 30px;}
#blogs_list .items > div.static:nth-child(1) img {width: 100%; height: auto;}
#blogs_list .items > div.static:nth-child(2) {display: flex; flex-direction: column; padding: 0; border-radius: 0; background: none;}
#blogs_list .items > div.static:nth-child(2) > div {height: 50%; padding: 8px; border-radius: 10px; background: #F8F8F8; display: flex; flex-direction: row; margin-bottom: 30px;}
#blogs_list .items > div.static:nth-child(2) > div:last-child {margin-bottom: 0;}
#blogs_list .items > div.static:nth-child(2) > div img {width: 270px; min-height: 270px; border-radius: 10px; object-fit: cover;}
#blogs_list .items > div.static:nth-child(2) > div > div {display: flex; flex-direction: column; padding: 20px 20px; width: 100%;}
#blogs_list .btn_light {margin: 0 auto 100px; display: block; width: fit-content; transition: none;}
#blogs_list .btn_light.disabled {visibility: hidden;}

#similar_blogs .items {display: flex;}
#similar_blogs > .title {font-size: 36px; color: #1A2A41; font-weight: 500; margin-bottom: 40px;}

@media only screen and (max-width: 1400px) {
    #blogs_list .items > div {width: 100%; margin-right: 0;}
}

@media only screen and (max-width: 1024px) {
    #blogs_list {margin-top: 20px;}
    #blogs_list .items > div .title {font-size: 20px; line-height: 22px; margin-right: 10px;}
    #blogs_list h1 {font-size: 38px; margin-bottom: 20px;}
    #blogs_list .tags {margin-bottom: 40px;}
    #blogs_list .tags a {font-size: 16px; margin-right: 10px;}
    #similar_blogs > .title {font-size: 26px; margin-bottom: 20px;}
    #similar_blogs .items {flex-direction: column;}
    #similar_blogs .items > div {width: 100%; margin-bottom: 20px;}
    #blogs_list .items > div > div, #similar_blogs .items > div > div {padding: 15px;}
}

@media only screen and (max-width: 800px) {
    #blogs_list .items > div {flex-direction: column-reverse; margin-bottom: 20px; padding: 16px;}
    #blogs_list .items > div img {width: 100%; max-height: 270px;}
    #blogs_list .items > div > div {padding: 27px 0 0;}
    #blogs_list .items > div.static:nth-child(1) img {min-height: 500px;}
    #blogs_list .items > div.static:nth-child(1) > div {left: 16px; bottom: 16px; width: calc(100% - 32px);}
    #blogs_list .items > div.static:nth-child(2) > div {padding: 16px; flex-direction: column-reverse; margin-bottom: 20px;}
    #blogs_list .items > div.static:nth-child(2) > div img {width: 100%; max-height: 270px;}
    #blogs_list .items > div.static:nth-child(2) > div > div {padding: 27px 0 0;}
    #blogs_list .items > div .title {margin-bottom: 12px;}
    #blogs_list .items > div .info {flex-direction: row-reverse;}
    #blogs_list .items > div .info svg {margin-left: auto; margin-right: 0;}
}

/* blog info */

#blog_info {margin-top: 30px;}
#blog_info header {padding: 8px; border-radius: 10px; background: #F8F8F8; 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: center; padding-bottom: 50px;}
#blog_info header .info > div:first-child div {color: #525252; margin-right: 20px;}
#blog_info header .info > div:first-child div i {color: #525252; margin-right: 6px;}
#blog_info header .info > div:first-child a.main_tag {color: #2CAFF9; font-size: 16px;}
#blog_info header .info h1 {
    font-size: 40px; font-weight: 500; margin-top: auto; margin-bottom: 20px; color: #1A2A41; line-height: 1.1; max-width: 600px;
    padding-right: 20px;
}
#blog_info header .info .desc {color: #302F2F; font-size: 16px; font-weight: 400; line-height: 24px; max-width: 600px; padding-right: 20px;}
#blog_info header > img {border-radius: 5px; width: 40%; display: block; min-height: 300px; object-fit: cover;}
#blog_info main {padding: 50px 0; max-width: 890px; margin: 0 auto;}
#blog_info main section {margin-bottom: 40px; scroll-padding-top: 100px;}
#blog_info main section h2 {font-size: 36px; font-weight: 500; color: #1A2A41; line-height: 1.2; margin-top: 20px;}
#blog_info main section h3 {font-size: 28px; font-weight: 500; color: #1A2A41; line-height: 32px; margin-top: 20px;}
#blog_info main #navbar h2 {font-size: 18px; font-weight: 500; color: #1A2A41; 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: #2CAFF9; 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 #2CAFF9;}
#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 {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: 30px; margin-top: 1rem;}
#blog_info main section:not(#navbar) ul {list-style-type: disc; padding-inline-start: 30px; margin-top: 1rem;}
#blog_info main section:not(#navbar) a {color: #2CAFF9;}
#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: #2CAFF9;}

@media only screen and (max-width: 1200px) {
    #blog_info main {padding: 50px 150px;}
}

@media only screen and (max-width: 1024px) {
    #blog_info {margin-top: 24px;}
    #blog_info main {padding: 50px 0 0 0;}
    #blog_info header {flex-direction: column-reverse; padding: 8px 8px 20px;}
    #blog_info header > img {width: 100%; min-height: 0; margin-bottom: 20px;}
    #blog_info header .info {width: 100%; padding: 0 10px;}
    #blog_info header .info > div:first-child {padding-bottom: 20px;}
    #blog_info header .info h1 {font-size: 26px; margin-bottom: 12px; padding-right: 0;}
    #blog_info header .info .desc {padding-right: 0;}
    #blog_info main #navbar ul li {margin-bottom: 16px;}
    #blog_info main #navbar h2 {font-size: 18px;}
    #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;}
}