:root{
    --s-primary:#007bc0;
    --s-warning:#e7643a;
    --s-color:#333;
    --s-title:#007bc0;
    --s-white:#f5f6f8;
    --white:#fff;
    --s-black:#212121;
    --br-s:0.4rem;
    --br:0.75rem;
}
a{
    text-decoration: none !important;
}
h1,h2,h3,h4,h5,h6{
    color: var(--s-title);
}
.btn{
    border-radius: var(--br-s);
    padding: 0.35rem 0.75rem !important;
    font-weight: 500;
    transition: 0.5s transform ease;
}
.btn-block{
    display: block;
    width: 100%;
    text-align: center;
}
.s-btn-lg{
    padding: 0.65rem 1.5rem !important;
    font-size: 1.1rem;
}
.text-s-warning{
    color: var(--s-warning);
}
.text-s-primary{
    color: var(--s-primary);
}
.text-s-white{
    color: var(--s-white);
}
.bg-s-white{
    background-color: var(--s-white);
}
.lc-1,.lc-2,.lc-3,.lc-4,.lc-5{
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.lc-1{
    -webkit-line-clamp: 1;
}
.lc-2{
    -webkit-line-clamp: 2;
}
.lc-3{
    -webkit-line-clamp: 3;
}
.lc-4{
    -webkit-line-clamp: 4;
}
.lc-5{
    -webkit-line-clamp: 5;
}
.fw-300{
    font-weight: 300 !important;
}
.fw-400{
    font-weight: 400;
}
.fw-500{
    font-weight: 500;
}
.xs-small{
    font-size: 0.75rem;
}
.fw-normal{
    font-weight: 300 !important;
}
.op-2{
    opacity: 0.1;
}
.s-blog{
    /*background-image: url("../assets/s-blog.jpg");*/
    background-color: #007bc0;
    /*box-shadow: 1px 2px 4px rgba(0,0,0,0.1);*/
    position: relative;
    background-size: cover;
    background-position: bottom;
    z-index: 1;
}
.img-bg :is(p, h5){
    color: var(--s-white) !important;
}
.blog-hero-section,.post-hero-section{
    background-size: cover;
    background-position: center;
    position: relative;
    z-index: 1;
}

.blog-hero-section{
    background-color: #007bc0;
    box-shadow: 1px 2px 4px rgba(0,0,0,0.1);
    /*background-image: url('../assets/blog-top.jpg');*/
}
.blog-hero-section::before,.post-hero-section::before{
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top:0;
    background-color: var(--s-title);
    z-index: -1;
    opacity: 0.85;
}
.s-blog:before{
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top:0;
    background-color: var(--s-primary);
    z-index: -1;
    opacity: 0.95;
}
.article-section,.post-sidebar{
    border-radius: var(--br);
    border: 1px solid var(--s-primary) !important;
    overflow-x: hidden;
    background-color: #fff !important;
}
.article-section img{
    width: 100%;
    max-width: 100%;
}
.post-category-badge{
    font-weight: 300 !important;
    font-size: 0.9rem;
    background-color: #303d8b22;
    padding: 0.15rem 0.5rem;
    border-radius: var(--br-s);
    display: inline-block;
    margin: 0.125rem 0.125rem 0.125rem 0;
}

.custom-rounded{
    border-radius: var(--br);
    width: 100%;
}
.blog-icon-bx{
    display: flex;
    gap: 1rem;
    align-items: center;
}
.blog-icon-bx.align-start{
    align-items: unset;
}
.icon-box{
    width: 3rem;
    height: 3rem;
    background-color: #002a4622;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--s-title);
    font-size: 1.5rem;
}
.icon-box.blue{
    color: var(--s-primary);
    background-color: #0353a422;
}
.icon-box.orange{
    color: var(--s-warning) !important;
    background-color: #e7643a22;
}
.content-box{
    width: calc(100% - 4rem);
}
.category-card{
    display: block;
    padding: 0.75rem 1.5rem;
    border-radius: var(--br-s);
    border: 1px solid #000d4333;
    font-weight: 600;
    color: var(--s-title);
    transition: 0.5s all ease;
    overflow: hidden;
    position: relative;
}
.category-card:hover{
    color: var(--s-primary);
    box-shadow: 0 5px 10px #0001;
    transform: translateY(-2px);
}
.category-card::before,.category-card::after{
    content: '';
    position: absolute;
}
.category-card::before{
    height: 100%;
    width: 4px;
    background-color: var(--s-primary);
    left: 0;
    top: 0;
}
.category-card::after{
    height: 0.75rem;
    width: 0.75rem;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%) rotate(45deg);
    border-top: 2px solid var(--s-primary);
    border-right: 2px solid var(--s-primary);
}