@charset "UTF-8";
.content_filter {
    margin-top: 2vw;
}
.blog .top_banner_blog {
    width: 100%;
    height: 25.6vw;
    position: relative;
    margin: 0;
}
.blog .top_banner_blog svg {
    position: absolute;
    width: 100%;
    height: 25.6vw;
    left: 0;
    right: 0;
    top: 0;
    
}
.blog-post .site-heading {
    font-size: 4.4vw;
    line-height: 4VW;
}

.content_filter .cont_f_btn {

    background-color: #D4D9FF;
    border:0.15vw solid #909BFF;
    color:var(--taktical-text-blue);
}
.blog div.taktical-light-blue{
    padding-top: 2vw;
    /*box-shadow: var(--box-shadow-cont);*/ /************* revision october *********/
}
.blog-gallery {
    margin: 5vw auto 0;
}
@media (max-width: 767px){
    .blog-gallery {
        margin: 15vw auto 0;
    }
}
.blog-gallery-filter {
    margin: 2vw 0;
}
.blog-gallery-filter > span{
    font-size: 1.4vw;
    font-weight: 600;
    margin-right: 1vw;
    color: var(--taktical-blue);
}
.blog-gallery-filter .taktical-leaf-style {
    color: var(--taktical-text-blue);
    border: 0.2vw solid var(--taktical-orange);
    height: 3vw;
    font-size: 1vw;
    line-height: 2vw;
    min-height: auto;
    padding: 0 2.2vw;
}
.blog-gallery-filter .taktical-leaf-style.active, .blog-gallery-filter .taktical-leaf-style:hover, .blog-gallery-filter .taktical-leaf-style:active{
    background-color: var(--taktical-orange);
}

.blog-gallery-items {
    padding: 0;
    gap: 1vw;
    flex-wrap: wrap;
    width: 70vw;
    margin: 2vw auto 5vw;
}

.blog-gallery-items .blog-gallery-item {
    margin-bottom: 1vw;
    position: relative;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    overflow: hidden;
    border: 0.3vw solid #F1F3FF;
    border-top-right-radius: 2vw;
    border-bottom-left-radius: 2vw;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
    width: 49%;
    /*width: 32.35%;*/
}

.blog-gallery-items .blog-gallery-item:hover, .blog-gallery-items .blog-gallery-item:active {
    box-shadow: 0vw 2vw 2vw -0.5vw rgba(0, 0, 0, 0.10);
    transform: translateY(-1vw);
}

.blog-gallery-items .blog-gallery-item > img {
    height: 12vw;
    object-fit: cover;
    width: 100%;
}
.blog-gallery-items .blog-gallery-item .blog-gallery-item-content {
    padding: 1vw 1.5vw 0.5vw; /****new revision october //// 2vw 1.5vw 0.5vw/// ***/
    position: relative;
    color: var(--taktical-text-blue);
}

.blog-gallery-items .blog-gallery-item .blog-gallery-item-content .floating-tag {
    background: var(--taktical-blue);
    color: #fff;
    border-radius: 50vw;
    padding: 0.5vw 1.5vw;
    position: absolute;
    top: -1.2vw;
    font-size: 1vw;
    box-shadow: 0vw 0.5vw 1vw -1vw #000;
    display: none; /****new revision october /// NA ///***/ 
}
.split_date_head .date-icon {
    width: 2vw;
    height: 2vw;
}
.split_date_head .date {
    padding-top: 0.2vw;
}
.split_date_head {
    display: flex;
    align-items: center;
    margin-bottom: 0.5vw;
    margin-top: 0.5vw;
    gap: 0.5vw;
    font-size: 1.2vw;
}
.blog-card-title {
    font-size: 1.7vw;
    line-height: 1.9vw;
    margin-bottom: 0.5vw;
    margin-top: 1vw;
}
.blog-card-para {
    font-size: 1.1vw;
    line-height: 1.6vw;
    letter-spacing: -0.01vw;
}

/************** blog post ***************/

.top_banner_post_cont {
    position: relative;
    z-index: 1;
    width: 50vw;
    padding: 5vw 10vw;
}
.top_banner_post {
    width: 100%;
    height: 45vw;
    position: relative;
    margin: 0;
    box-shadow: 0vw 1vw 2vw 0vw rgba(0, 0, 0, 0.12);
}

.top_banner_post svg {
    position: absolute;
    width: 100%;
    height: 45vw;
    left: 0;
    right: 0;
    top: 0;
}

.blue-bubble{
    background: var(--taktical-text-blue);
    color: #fff;
    border-radius: 50vw;
    padding: 0.5vw 1.5vw;
    font-size: 1vw;
    box-shadow: 0vw 0.5vw 1vw -1vw #000;
    margin-right: 1vw;
}

.top_banner_post_cont h1{
    margin-top: 1vw;
}

/*.blog-article {
    padding: 0;
    gap: 1vw;
    flex-wrap: wrap;
    width: 60vw;
    margin: 5vw auto 5vw;
    padding-bottom: 5vw;
}*/   /******* revision october *******/
.blog-article {
    gap: 1vw;
    flex-wrap: wrap;
    width: 100%;
    margin: 5vw auto 5vw;
    background: #fff;
    padding: 4vw 21vw;
    box-shadow: var(--box-shadow-cont);
}

.blog-article table img, .blog-article img{
    max-width: 100%;
    margin: 2vw auto;
}



.blog-article .article-heading {
    font-size: 2vw;
    margin-bottom: 2vw;
    margin-top: 4vw;
}

.my-circle{
    animation: path 5s linear infinite;
}

.blog-post .main {
    padding-top: 0;
}
.blog-article table{
    font-weight: 100;
}
.blog-article table  * {
    display: inline-block;
}
.blog-article table h1,.blog-article h1, .blog-article table h2,.blog-article h2, .blog-article table h3, .blog-article h3 {
    font-size: 2.2vw;
    margin-bottom: 0.5vw;
    margin-top: 2vw;
}

.blog-article table h4,.blog-article table h5,.blog-article table h6{
    font-size: 1.2vw;
     margin-bottom: 0.5vw;
    margin-top: 1.5vw;
}

.blog-article p{
    font-size: 1.1vw;
    line-height: 1.5vw;
    margin-bottom: 1.5vw;
}

.blog-article p span{
    font-weight: 100 !important;
}

@media (min-width: 768px){
     .blog-post .blog-gallery-items .blog-gallery-item{
        width: 22.6vw;
    }
    .blog-post .top_banner_post {
    border-top-right-radius: 8vw;
}
}

@media (max-width:767px){

    .blog-post .site-heading {
    font-size: 6.6vw;
    line-height: 7.4vw;
}
    .content_filter {
        margin-top: 6vw;
    }
    .blog .top_banner_blog {
        height: 112.6vw;
    }
    .blog .top_banner_blog svg {
       
        height: 112.6vw;
    }
    .blog .top_banner_content {
        margin: 7vw;
        text-align: left;
    }
    .top_banner_content .site-heading {
        font-size: 10vw;
        line-height: 10vw;
    }
    .content_filter .cont_f_btn {
        font-size: 5vw;
        height: 10vw;
        line-height: 8vw;
        padding: 1vw 0;
        width: 100%;
    }
    .blog .top_banner_content .site-heading {
        font-size: 10vw;
        line-height: 10vw;
        margin-top: 20vw;
    }
    .blog-gallery-filter {
        margin: 8vw 0;
    }
    .blog-gallery-filter > span {
        width: 70vw;
        font-size: 5vw;
    }
   .blog-gallery-filter .taktical-leaf-style {
    height: 10vw;
    margin: 0;
    margin-right: 2vw;
    font-size: 3.4vw;
}
    .blog-gallery-items .blog-gallery-item{
        width: 100%;
        border-top-right-radius: 6vw;
        border-bottom-left-radius: 6vw;
    }
    .blog-gallery-items .blog-gallery-item .blog-gallery-item-content .floating-tag {
        font-size: 4.5vw;
        padding: 1vw 3.8vw;
        top: -5vw;
    }
    .blog-gallery-items .blog-gallery-item .blog-gallery-item-content {
        padding: 6vw 4.5vw 3.5vw;
        position: relative;
    }
    .split_date_head .date-icon {
        width: 8vw;
        height: 8vw;
    }
    .split_date_head .date {
        padding-top: 0.8vw;
        font-size: 4vw;
    }
    .split_date_head{
        gap: 2.5vw;
    }
    .split_date_head {
        margin: 3vw 0;
    }
    .blog-card-title {
        font-size: 7vw;
        line-height: 7vw;
        margin: 2vw 0vw 3vw;
    }
    .blog-card-para {
        font-size: 4.5vw;
        line-height: 6vw;
    }
    .blog-gallery-items {
        gap: 8vw;
        width: 100%;
    }
    .blog-gallery-items .blog-gallery-item > img {
        height: 51vw;
    }

    /************** blog post ***************/
    .top_banner_post {
        height: auto;
        background: #fff;
        border-top-right-radius: 15vw;
        border-bottom-left-radius: 8vw;
        box-shadow: 0vw 2vw 3vw 0vw rgba(0, 0, 0, 0.122);
    }
    .top_banner_post svg{
        height: 92vw;   
    }
    .top_banner_post_cont {
        width: 100%;
        margin-top: 92vw;
        padding: 5vw 4vw 2vw;
    }
    .blue-bubble {
        padding: 0.5vw 4.5vw;
        font-size: 4.5vw;
        margin-right: 3vw;
    }
    /*.blog-article {
        padding: 8vw 4vw 7vw;
        margin-top: 1vw;
        width: 100%;
    }*/
    .blog-article {
        padding: 8vw 8vw 7vw;
        margin: 9vw auto 0;
    }
    .blog-article p {
    font-size: 4.2vw;
    line-height: 5.2vw;
}
    .blog-article .article-heading {
        font-size: 7vw;
        margin-bottom: 4vw;
        margin-top: 5vw;
        line-height: 9vw;
    }
    .blog-article p {
    margin-bottom: 4vw;
}
.blog-article table h4, .blog-article table h5, .blog-article table h6 {
    font-size: 5.2vw;
    margin-bottom: 0.5vw;
    margin-top: 1.5vw;
    margin-bottom: 5vw;
}
.blog-article table h1, .blog-article h1, .blog-article table h2, .blog-article h2, .blog-article table h3, .blog-article h3 {
    font-size: 5vw;
    margin-bottom: 1.5vw;
    margin-top: 2vw;
}
}

@media (min-width: 1919.99px) {
  .content_filter {
    margin-top: 38.4px;
  }

  .blog .top_banner_blog {
    height: 491.52px;
  }

  .blog .top_banner_blog svg {
    height: 491.52px;
  }

  .blog-post .site-heading {
    font-size: 84.48px;
    line-height: 76.8px;
  }

  .content_filter .cont_f_btn {
    border: 2.88px solid #909bff;
  }

  .blog div.taktical-light-blue {
    padding-top: 38.4px;
  }

  .blog-gallery {
    margin: 96px auto 0;
  }

  .blog-gallery-filter {
    margin: 38.4px 0;
  }

  .blog-gallery-filter > span {
    font-size: 26.88px;
    margin-right: 19.2px;
  }

  .blog-gallery-filter .taktical-leaf-style {
    border: 3.84px solid var(--taktical-orange);
    height: 57.6px;
    font-size: 19.2px;
    line-height: 38.4px;
    padding: 0 42.24px;
  }

  .blog-gallery-items {
    gap: 19.2px;
    width: 1344px;
    flex-wrap: inherit;
    margin: 38.4px auto 96px;
  }
  
  .blog-gallery-items-wrap {
      flex-wrap: wrap !important;
  }

  .blog-gallery-items .blog-gallery-item {
    margin-bottom: 19.2px;
    border: 5.76px solid #f1f3ff;
    border-top-right-radius: 38.4px;
    border-bottom-left-radius: 38.4px;
  }

  .blog-gallery-items .blog-gallery-item:hover,
  .blog-gallery-items .blog-gallery-item:active {
    box-shadow: 0px 38.4px -9.6px rgba(0, 0, 0, 0.1);
    transform: translateY(-19.2px);
  }

  .blog-gallery-items .blog-gallery-item > img {
    height: 230.4px;
  }

  .blog-gallery-items .blog-gallery-item .blog-gallery-item-content {
    padding: 19.2px 28.8px 9.6px;
  }

  .blog-gallery-items
    .blog-gallery-item
    .blog-gallery-item-content
    .floating-tag {
    border-radius: 960px;
    padding: 9.6px 28.8px;
    top: -23.04px;
    font-size: 19.2px;
    box-shadow: 0px 9.6px 19.2px -19.2px #000;
  }

  .split_date_head .date-icon {
    width: 38.4px;
    height: 38.4px;
  }

  .split_date_head .date {
    padding-top: 3.84px;
  }

  .split_date_head {
    margin-bottom: 9.6px;
    margin-top: 9.6px;
    gap: 9.6px;
    font-size: 23.04px;
  }

  .blog-card-title {
    font-size: 32.64px;
    line-height: 36.48px;
    margin-bottom: 9.6px;
    margin-top: 19.2px;
  }

  .blog-card-para {
    font-size: 21.12px;
    line-height: 30.72px;
    letter-spacing: -0.192px;
  }

  /************** blog post ***************/

  .top_banner_post_cont {
    width: 960px;
    padding: 96px 192px;
  }

  .top_banner_post {
    height: 864px;
    box-shadow: 0px 19.2px 38.4px 0px rgba(0, 0, 0, 0.12);
  }

  .top_banner_post svg {
    height: 864px;
  }

  .blue-bubble {
    border-radius: 960px;
    padding: 9.6px 28.8px;
    font-size: 19.2px;
    box-shadow: 0px 9.6px 19.2px -368.64px #000;
    margin-right: 19.2px;
  }

  .top_banner_post_cont h1 {
    margin-top: 19.2px;
  }

  /******* revision october *******/
  .blog-article {
    gap: 19.2px;
    margin: 96px auto 96px;
    padding: 76.8px 403.2px;
  }

  .blog-article table img,
  .blog-article img {
    margin: 38.4px auto;
  }

  .blog-article .article-heading {
    font-size: 38.4px;
    margin-bottom: 38.4px;
    margin-top: 76.8px;
  }

  .blog-article table h1,
  .blog-article h1,
  .blog-article table h2,
  .blog-article h2,
  .blog-article table h3,
  .blog-article h3 {
    font-size: 42.24px;
    margin-bottom: 9.6px;
    margin-top: 38.4px;
  }

  .blog-article table h4,
  .blog-article table h5,
  .blog-article table h6 {
    font-size: 23.04px;
    margin-bottom: 9.6px;
    margin-top: 28.8px;
  }

  .blog-article p {
    font-size: 21.12px;
    line-height: 28.8px;
    margin-bottom: 28.8px;
  }
  .blog-post .top_banner_post {
    border-top-right-radius: 153.6px;
    }
}