/* ============================================== section blog  ================================================= */
/* title */
.section-blog .heading-style-2                          {margin-bottom: 48px;}
.section-blog .row                                      {row-gap: 40px;}
/* card image */
.section-blog .blog-card-image                          {position:relative;padding-top:56.2%;border-radius:24px;overflow: hidden;margin-bottom:16px;}
.section-blog .blog-card-image img                      {position: absolute;top: 0;left: 0;height: 100%;width: 100%;object-fit:cover;object-position:center center;}
.section-blog .blog-link                                {position: absolute; transition: .4s ease-in-out !important;border-radius:24px; background-color: rgb(0, 0, 0, 0.4); bottom: -100%; left:-100%; overflow: hidden; height: 100%; width: 100%; z-index: 20; }
.section-blog .view-blog                                {height: 100%; display: flex ; flex-direction: column; justify-content: center; align-items: center; }
.section-blog .view-blog img                            {width: 48px;height: 48px;position: relative;}
.section-blog .blog-card-wrap:hover .blog-link          {bottom:0;left:0;}
.section-blog .blog-card-wrap:hover .heading-style-10   {color:var(--blue-01);}
/* card content */
.blog-card-content p:first-child                        {font-size:14px;line-height: 20px;color: var(--secondary);font-family: var(--helvetica-reg);margin-bottom:4px;}
.blog-card-content .heading-style-10                    {color:var(--secondary);font-family: var(--helvetica-reg);margin-bottom:10px;overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;}
.blog-card-content p:last-child                         {color:#85888B;}
/* BLOG DETAIL */
.blog-back                                              {margin: 64px 0 26px 0;}
.blog-detail-content                                    {background-color: var(--white); border-radius: 16px; padding: 32px;}
.blog-detail-content .date-time span                    {margin-right: 20px; font-size: 16px;}
.blog-detail-banner                                     {margin: 30px 0 0 0; border-radius: 24px; overflow: hidden; margin-bottom: 32px; padding-top: 56.5%; position: relative;}
.blog-detail-banner img                                 {position: absolute; object-fit: cover; object-position: center center; width: 100%; height: 100%; top: 0; left: 0;}
.blog-detail-content h2                                 {font-size: 26px; line-height: 38px; font-weight: normal; margin: 26px 0 16px 0;}
.blog-detail-content p                                  {margin-bottom: 16px; font-size: 18px; line-height: 26px;}
.blog-detail-content ul                                 {padding: 0 0 0 24px;}
.blog-detail-content ul li                              {list-style: disc; margin: 0 0 12px 0; font-size: 18px; line-height: 26px;}
.comments-area                                          {margin-top: 32px;padding-top: 32px;border-top: solid 1px var(--gray-01);}
.comments-area .comment-form-cookies-consent            { display: flex; gap: 10px;}
.comments-area .comment-form-cookies-consent label      { margin: 0;}
.comments-area #comment                                 {height: 135px;}
.comment-list                                           {margin: 36px 0 0 0; padding: 0;}
.comment-list .comment                                  {display: flex; align-items: start; gap: 20px; margin: 0 0 20px 0;}
.comment-list .comment-avatar                           {width: 64px; flex-shrink: 0; border-radius: 100%; overflow:hidden}
.comment-list .comment-date                             {font-size: 14px; color: var(--secondary-04);}
.comment-list .comment-text                             {color: #5A5D60;}
.most-read-sidebar                                      {width: 32.6%; margin: 0; background-color: var(--white); border-radius: 16px; padding: 32px; flex-shrink: 0;}
.most-read-sidebar ul                                   {margin: 30px 0 0 0 ;}
.most-read-sidebar .most-read-img                       {width: 36%; flex-shrink: 0; max-width: 160px; }
.most-read-sidebar .most-read-img-inner                 {position: relative; padding-top: 73.5%; border-radius: 8px; overflow: hidden;}
.most-read-sidebar .most-read-img img                   {position: absolute; object-fit: cover; object-position: center center; width: 100%; height: 100%; top: 0; left: 0;}
.most-read-sidebar .most-read-content p                 {font-size: 14px; margin: 0 0 5px; }
.most-read-sidebar .blog-card-wrap .heading-style-10{color: var(--secondary);}
.most-read-sidebar .blog-card-wrap .heading-style-10:hover{color: var(--blue-01);}
.recommended-blogs                                      {margin: 40px 0 0; padding: 40px 0;}
.recommended-blogs                                      {background-color: var(--white);}

/* ======================================================== Media Query ================================================= */
@media screen and (max-width:1600px)                    {}
@media screen and (max-width:1500px)                    {
    .blog-back                                          {margin-top: 50px;}
    .blog-detail-content h2                             {font-size: 24px; line-height: 34px;}
    .blog-detail-content p                              {font-size:16px ; line-height: 24px;}
    .blog-detail-content ul li                          {font-size:16px ; line-height: 24px;}
}
@media screen and (max-width:1400px)                    {
    /* ============================================== section blog  ================================================= */
    /* title */
    .section-blog .heading-style-2                      {margin-bottom: 42px;}
    .section-blog .row                                  {row-gap: 38px;}
    /* card image */
    .section-blog .blog-card-image                      {border-radius:20px;margin-bottom:14px;}
    .section-blog .blog-link                            {border-radius:20px;}
    .section-blog .view-blog img                        {width: 44px;height: 44px;}
}
@media screen and (max-width:1199px)                    {
    /* ============================================== section blog  ================================================= */
    /* title */
    .section-blog .heading-style-2                      {margin-bottom: 32px;}
    .section-blog .row                                  {row-gap: 32px;}
    /* card image */
    .section-blog .blog-card-image                      {border-radius:16px;margin-bottom:12px;}
    .section-blog .blog-link                            {border-radius:16px;}
    .section-blog .view-blog img                        {width: 35px;height: 35px;}
    .blog-card-content .heading-style-10                {margin-bottom:7px;}
    .blog-back                                          {margin-top: 40px;}
    .blog-detail-content                                {padding: 24px;}
    .blog-detail-content h2                             {font-size: 22px; line-height: 30px;}
    .blog-detail-content p                              {font-size:15px ; line-height: 22px;}
    .blog-detail-content ul li                          {font-size:15px ; line-height: 22px;}
    .most-read-sidebar                                  {padding: 24px;}
}
@media screen and (max-width:991px)                     {
    /* ============================================== section banner  ================================================= */
    .section-banner .banner-section-inner               {background-position: center bottom !important;}
    /* ============================================== section blog  ================================================= */
    .section-blog .row                                  {--bs-gutter-x: 12px;}
    /* title */
    .section-blog .heading-style-2                      {margin-bottom: 28px;}
    .section-blog .row                                  {row-gap: 28px;}
    /* card image */
    .section-blog .blog-card-image                      {border-radius:14px;margin-bottom:11px;}
    .section-blog .blog-link                            {border-radius:14px;}
    .section-blog .view-blog img                        {width: 30px;height: 30px;}
    .blog-card-content .heading-style-10                {margin-bottom:6px;}
    .blog-detail-content h2                             {font-size: 20px; line-height: 28px;} 
    .most-read-sidebar                                  {min-width: 100%;}
}
@media screen and (max-width:767px)                     {
    /* ============================================== section blog  ================================================= */
    .section-blog .row                                  {--bs-gutter-x: 16px;}
    /* title */
    .section-blog .heading-style-2                      {margin-bottom: 24px;}
    .section-blog .row                                  {row-gap: 24px;}
    /* card image */
    .section-blog .blog-card-image                      {border-radius:13px;}
    .section-blog .blog-link                            {border-radius:13px;}
    .blog-detail-content p                              {font-size:14px ; line-height: 18px;}
    .blog-detail-content ul li                          {font-size:14px ; line-height: 18px;}
    .comment-list .comment                              {gap: 10px;}
    .blog-detail-banner                                 {margin: 24px 0;}
    .blog-back                                          {margin-top: 26px;}
}
@media screen and (max-width:575px)                     {
    /* ============================================== section banner  ================================================= */
    .section-banner .banner-section-inner               {background-position: 50% center !important;}
    /* ============================================== section blog  ================================================= */
    /* title */
    .section-blog .heading-style-2                      {margin-bottom: 22px;}
    .section-blog .row                                  {row-gap: 22px;}
    /* card image */
    .section-blog .blog-card-image                      {border-radius:12px;}
    .section-blog .blog-link                            {border-radius:12px;}
}