html {
  scroll-behavior: smooth;
}

/*css starts for Blog Page*/
.blog_container{
    padding: 100px 100px !important;
    display: flex !important;
    flex-direction: block;
    gap:50px;
}
.blog {
    gap: 40px;
}
.blogcard {
    display: flex;
    flex-direction: column;
    gap:10px;
}
.blogcard img {
    width: 100%;
    height: 230px;
    object-fit: cover;
    border-radius: 12px;
}

.blogcard button{
    background-color: #f72533;
    text-align: center;
    padding: 10px 20px;
    border-radius: 50px;
    color: #fff;
    display: block;
    width: 200px;
    margin: 0px !important;
    border: none;
    cursor: pointer;
}
.blogcard h2{
    margin-top: 8px;
    margin-bottom: 0px !important;
    font-size: 22px !important;
    font-weight: 600;
}
.blogcard p{
    font-size: 15px !important;
    font-weight: 400;
    line-height: 1.6em;
}
/*css starts for Blog Page*/



.color_red{
    color: #EE3442 ;
}

.blogs_banner_container{
    background-image: url("/assets/img/blogs/banner_blog.webp");
    position: center !important;
    background-repeat: no-repeat;
    width: 100% !important;
    height: 600px !important;
    display: flex !important;
    align-items: center !important;
    padding: 0px 100px !important;
   }


.blogs_banner_container .herocontentbg{
    color: #ffffff !important;
    background-color: rgb(27, 26, 26) !important;
    opacity: 80% !important;
    padding: 50px !important;
    width: 680px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    }
.blogs_banner_container h1{
    font-size: 50px !important;
    letter-spacing: 1px !important;
    font-weight: 700 !important;
}
span.herosubheading{
    font-size: 25px;
    font-weight: 500;
}
.custom h2 {
    font-weight: 600 !important;
}


.content_container{
    padding: 100px 100px !important;
    display: flex !important;
    align-items: flex-start;
    gap:50px;
}

.content_container .left_container{
    width: 100% !important;
}
.content_container .right_container{
    width: 40% !important;
    border: 1px solid  #F72533;
    border-radius: 12px;
    position: sticky;
    top: 50px;
    @media(max-width:768px){
    width: 100% !important;
}
}

.content_container .left_container .table_container{
  
    background-color: #f0dfe0 !important;
    border-radius: 8px !important;
    padding: 30px !important;
}

.table_container p{
    cursor: pointer;
    margin-bottom: 0px;
     font-size: 25px;
     font-weight: 600;
     
}

.table_list{
    margin-top: 20px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    color: #5C5C5C;
}

.table_list a{
    font-size: 18px !important;
    color: #5C5C5C !important;
}

section p{
    font-size: 18px !important;
    font-weight: 400;
}
section li{
    color: #363636 !important;
    font-size: 18px !important;
    font-weight: 400;
    margin-bottom: 15px;
    @media(max-width:768px){
    font-size: 16.5px !important;
}
}
section a{
    color:#ee3442;
    font-weight: 500;
}

.first_section p{margin-top: 15px !important; line-height: 28px;}

.first_section, .common_section{
    margin-top: 80px !important;
}

.first_section h2{
    font-size: 42px !important;
    font-weight: 700;
}

.common_section{
    margin-top: 50px !important;
}

.common_section h2{
font-size: 30px !important;
font-weight: 600 !important;
@media(max-width: 768px){
    font-size: 25px !important;
}
}
.common_section h3{
font-size: 25px !important;
font-weight: 600 !important;
@media(max-width:768px){
    font-size: 20px !important;
}
}

.common_section p{
    margin-top: 15px !important; line-height: 28px;
    }



h6{
font-size: 25px !important;
font-weight: 600 !important;
margin-top: 25px !important;
    }

h3{
margin-top: 30px !important;
}

.system_image{

    margin: 50px 0px !important;
    width: 100% !important;
    }  
    
    
.bg_img{
margin-top: 40px !important;
background-image: url("/assets/img/blogs/background_styled_img.png");
border-radius: 20px !important;
height: 300px !important;
display: flex !important;
align-items: center !important;
}    


.bg_img_para{
text-align: center !important;
color: #FFFFFF !important;
font-size: 23px !important;
padding: 0px 70px !important;
font: 700 !important;
line-height: 35px !important;
}

.bg_img_para a{
color: #FFFFFF !important;
}

.text_bold{
    font-weight: 700 !important;
}
 /*Table css Starts From Here*/
.table-responsive{
    overflow-x: auto;
    margin-top: 30px;
    }
.table-custom thead{
    background: #FCD8DB;
}
.table th, .table td{
  padding: 1.5rem; 
  border: none !important;
}


.table-custom tbody tr:nth-of-type(odd){
    background-color: #FEF5F6; 
    padding: 1em !important;
}
.table-custom tbody tr:nth-of-type(even){
    background-color: #FDEDEF; 
}
 /*Table css Ends From Here*/
@media only screen and (max-width: 600px) {

    .blogs_banner_container{
        background-image: url("/assets/img/blogs/blog_banner_mob.webp");}

    .blogs_banner_container{
        padding: 0px 20px !important;
        height: 400px !important;
    }

    .blogs_banner_container .herocontentbg {
        padding: 30px !important;
    }
    span.herosubheading{
         font-size: 22px !important;
         margin-bottom: 5px;
    }
    .blogs_banner_container h1 {
        font-size: 35px !important;
    }


    .content_container{
        padding: 50px 20px !important;
        flex-direction: column !important;
       
    }

    .content_container .left_container{
    
        width: 100% !important;
    }

    .first_section h2{
        font-size: 30px !important;
    }
  
    section p{
        font-size: 17px !important;
        line-height: 24px !important;
    }

    .table_list li{
        font-size: 16px !important;
    }
    .content_container .left_container .table_container{
        padding: 20px !important;
    }

    .table_container p{
        font-size: 23px;
    }

    .bg_img_para{
        text-align: center !important;
        font-size: 18px !important;
        padding: 0px 20px !important;
        line-height: 25px !important;
        }

        .system_image{
            margin: 13px 0px !important;
        }

        .common_section p{
            margin-top: 9px !important;
        }
        .blog_container{
        padding: 50px 24px !important;
        }
        .table th, .table td{
            padding: 0.75rem;
            font-size: 14px;
        }

   }