/*faqs Start*/
.faqs_title {
    text-align: center;
}
/*faqs End*/
/*Hero Banner Start*/
.hero_banner_tools{
    background: var(--light-bgcolor);
    padding: 20px;
}

@media screen and (min-width:768px){
    .hero_banner_tools {
        padding: 32px 64px;
    }    
}
.hero_banner_tools_wrapper{
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
}

@media screen and (min-width:768px){
    .hero_banner_tools_wrapper {
        width: 100%;
        max-width: 1440px;
        margin: 0 auto;
    }    
}

.hero_banner_tools_heading {
    font-size: 26px;
    text-align: center;
}
@media screen and (min-width:768px){
    .hero_banner_tools_heading {
        font-size: 42px;
    }
}


.hero_banner_tools_description {
    font-size: 14px;
    text-align: justify;
}
@media screen and (min-width:768px){
    .hero_banner_tools_description {
        font-size: 16px;
    }
}
/*Hero Banner End*/

/*How to Use Start*/
.how_to_use{
    display: flex;
    flex-direction: column;
    padding: 20px;
}
@media screen and (min-width:768px){
    .how_to_use {
        padding: 32px 64px;
    }
}

.how_to_use_wrapper{
    display: flex;
    flex-direction: column;
    gap: 12px;
}
@media screen and (min-width:768px){
    .how_to_use_wrapper {
        gap: 24px;   
        width: 100%;
        max-width: 1440px;
        margin: 0 auto;
    }
}

.how_to_use_heading{
    font-size: 28px;
    color: var(--heading-font-color);
    font-weight: 600;
    text-align: center;
}
@media screen and (min-width:768px){
    .how_to_use_heading {
        font-size: 36px;
    }
}
.how_to_use_step_wrapper{
    display: flex;
    flex-direction: column;
    gap:8px;
}
@media screen and (min-width:768px){
    .how_to_use_step_wrapper {
        gap:16px;
    }
}
.how_to_use_subheading{
    font-size: 18px;
    color: var(--heading-font-color);
    font-weight: 500;
}
@media screen and (min-width:768px){
    .how_to_use_subheading {
        font-size: 24px;
    }
}

.how_to_use ol{
    display: block;
    list-style-type: decimal;
    padding-inline-start: 20px;
    unicode-bidi: isolate;
}
@media screen and (min-width:768px){
    .how_to_use ol {
        
    }
}

.how_to_use li::marker {
    font-size: 16px;
    font-weight: 600;
}
@media screen and (min-width:768px){
    .how_to_use li::marker {
        font-size: 20px;
    }
}

.how_to_use li p{
    font-size: 16px;
}
@media screen and (min-width:768px){
    .how_to_use li p{
        font-size: 20px;
    }
}
/*How to Use End*/

/*Video Guide Start*/
.video_guide{
    display: flex;
    flex-direction: column;
    padding: 20px;
}
@media screen and (min-width:768px){
    .video_guide {
        padding: 32px 64px 0;
    }
}

.video_guide_wrapper{
    display: flex;
    flex-direction: column;
    gap: 12px;
}
@media screen and (min-width:768px){
    .video_guide_wrapper {
        gap: 24px;    
    }
}

.video_guide_heading{
    font-size: 28px;
    color: var(--heading-font-color);
    font-weight: 600;
    text-align: center;
}
@media screen and (min-width:768px){
    .video_guide_heading {
        font-size: 36px;
    }
}

.video_guide_video_wrapper {
    position: relative;
    width: 100%;
    max-width: 900px;
    margin: 0px auto;
    background: #000;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
    box-shadow: 0 4px 7px #09404a33;
}
.video_guide_video_wrapper::before {
    content: "";
    display: block;
    padding-top: 56.25%;
}
.video_guide_tool_video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
    border-radius: 12px;
}
/*Video Guide End*/

/*tool content Start*/
.tool_content{
    display: flex;
    flex-direction: column;
    padding: 20px;
}
@media screen and (min-width:768px){
    .tool_content {
        padding: 0 64px 64px;
    }
}

.tool_content_wrapper{
    display: flex;
    flex-direction: column;
}
@media screen and (min-width:768px){
    .tool_content_wrapper {
        width: 100%;
        max-width: 1440px;
        margin: 0 auto;
    }
}

.tool_content_heading{
    font-size: 28px;
    color: var(--heading-font-color);
    font-weight: 600;
    padding: 12px 0 6px;
}
.tool_content_wrapper .tool_content_heading:first-of-type {
    padding-top:0;
}
@media screen and (min-width:768px){
    .tool_content_heading {
        font-size: 36px;
        padding: 16px 0 8px;
    }
}

.tool_content_details{
    font-size: 14px;
}
@media screen and (min-width:768px){
    .tool_content_details {
        font-size: 16px;
    }
}

.tool_content ul{
    display: block;
    padding-inline-start: 20px;
    unicode-bidi: isolate;
}
@media screen and (min-width:768px){
    .tool_content ul {
        
    }
}

.tool_content li::marker {
    font-size: 16px;
    font-weight: 500;
}
@media screen and (min-width:768px){
    .tool_content li::marker {
    }
}

.tool_content li p{
    font-size: 14px;
}
@media screen and (min-width:768px){
    .tool_content li p{
        font-size: 16px;
    }
}
/*tool content End*/