/* Layout 2 */
.five_info_boxs .row .col-lg-4:is(:nth-child(4),:nth-child(5)) {
    width: 50%;
}
.five_info_boxs .row .col-lg-4:is(:nth-child(4),:nth-child(5)) > div{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 30px;
}
.five_info_boxs .row .col-lg-4:is(:nth-child(4),:nth-child(5)) > div .subtitle {
    width: 100%;
    margin-top: 25px;
}
.info_boxs-layout-2 .box_wrap:hover{
    background-color: var(--color-primary-hover) !important;
}
.info_boxs-layout-2 .box_wrap:hover *{
    color: var(--color-white);
}

/* Layout 3 */
section:not(.hide_count) .info_boxs-layout-3{
	counter-reset: my-sec-counter;
}
section:not(.hide_count) .info_boxs-layout-3 .box_wrap:before {
   content: counter(my-sec-counter);
   counter-increment: my-sec-counter;
   position: absolute;
   top: -37px;
   left: 0;
   right: 0;
   margin: auto;
   box-shadow: 0px 10px 15px 0px var(--color-secondary);
   font-size: 24px;
   font-weight: 600;
   font-family: var(--ff-p);
}
section:not(.hide_count) .info_boxs-layout-3 .box_wrap:before, 
section:not(.hide_count) .info_boxs-layout-3 .info_box_link{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 75px;
    height: 75px;
    background: var(--color-white);
    border-radius: 50%;
    color: var(--color-dark);
    border: solid 1px var(--color-secondary);
    z-index: 1;
}
section:not(.hide_count) .info_boxs-layout-3 .info_box_link{
    right: -37px;
    bottom: -37px;
}
.info_boxs-layout-3 .box_wrap:hover{
    box-shadow: 0 0.5rem 1rem rgb(0 0 0 / 15%);
}
.hide_count .info_boxs-layout-3 .icon_wrap{
    margin-top: 35px !important;
    background: var(--color-white);
}
@media (min-width: 576px) {
    .start_selling_sec .content_wrap {
        padding-left: 3rem !important;
        padding-right: 3rem !important;
    }
}

/* layout 4 */
.info_boxs-layout-4 .box_wrap{
    border: 1px solid var(--color-secondary);
    max-height: 272px;
}
.info_boxs-layout-4 .box_wrap .hover_content .content,
.info_boxs-layout-5 .box_wrap .subtitle {
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 6;
    line-clamp: 6;
    -webkit-box-orient: vertical;
}
.info_boxs-layout-4 .box_wrap .hover_content,
.info_boxs-layout-4 .box_wrap:hover .visible_content{
    opacity: 0;
    height: 0;
    visibility: hidden;
}
.info_boxs-layout-4 .box_wrap:hover .hover_content{
    opacity: 1;
    height: 100%;
    visibility: visible;
    transition:visibility 0.3s linear,opacity 0.3s linear;
}
.info_boxs-layout-4 .visible_content .icon{
    max-height: 136px;
    max-width: 112px;
}
.info_boxs-layout-4 .hover_content .icon{
    max-height: 52px;
    max-width: 52px;
}

/* Layout 5 */
.section-info-boxs .box_wrap .read_more_read_less_content
/*.info_boxs-layout-5 .box_wrap .subtitle*/ {
    -webkit-line-clamp: 3;
    line-clamp: 3;
}
.section-info-boxs .box_wrap .read_more_read_less_content{
 transition: all 0.5s ease-out;
 max-height: 72px;
}
.section-info-boxs .box_wrap .read_more_read_less_content.before_active{
  text-overflow: ellipsis;
  word-wrap: break-word;
  overflow: hidden;
  -webkit-line-clamp: initial;
  line-clamp: initial;
}
.section-info-boxs .box_wrap .read_more_read_less_content.show_full{
    max-height: 50%;
    transition: all 0.5s ease-out;
}
.icon_bg .icon_wrap,
.info_chk_mark .icon_wrap {
    background: var(--color-secondary);
    height: 60px;
    width: 60px;
    border-radius: 50%;
    margin: auto;
    box-shadow: 0px 20px 20px rgb(0 65 255 / 20%);
    display: flex !important;
    align-items: center;
    justify-content: center;
}
.info_chk_mark .icon_wrap:before {
    content: '\f00c';
    position: absolute;
    font-family: 'Font Awesome 6 Free';
    color: #fff;
    font-weight: 700;
    font-size: 30px;
}
.info_box_bg .box_wrap_main{
    margin-bottom: 24px;
    position: relative;
}
/*.info_box_bg .box_wrap_main:nth-child(2) {
    margin-top: 50px;
}*/
.info_box_bg .box_wrap{
    background-color: var(--color-white);
    border-radius: 15px;
    padding-bottom: 30px !important;
    position: relative;
    z-index: 1;
    transition-duration: 0.8s;
}
.info_box_bg.icon_bg .box_wrap:hover{
    background-color:var(--color-secondary);
}    
.icon_bg.info_box_bg .box_wrap:hover .icon_wrap{
    background-color: var(--color-white);
    transform: translate(0, 5px);
    transition-duration: 1s;
}
.icon_bg.info_box_bg .box_wrap:hover .icon_wrap svg path[fill]{
    fill:var(--color-secondary);
}
.icon_bg.info_box_bg .box_wrap:hover .icon_wrap svg path[stroke]{
    stroke:var(--color-secondary);
}
.icon_bg.info_box_bg .box_wrap:hover .title, 
.icon_bg.info_box_bg .box_wrap:hover .subtitle,
.icon_bg.info_box_bg .box_wrap:hover .read_more_read_less_button,
.icon_bg.info_box_bg .box_wrap:hover .btn {
    color: var(--color-white) !important;
}
.info_box_bg .box_wrap_main::before{
  content: " ";
  width: 90%;
  height: 95%;
  z-index: 0;
  position: absolute;
  top: auto;
  bottom: 1px;
  left: 13px;
  border-radius: 12px;
  background-image: linear-gradient(100deg, #eee, var(--color-secondary));
  background-repeat: repeat-x;
  outline: 1px solid transparent;
  transition: all ease-in 0.5s;
  z-index: -1;
}
.info_box_bg .box_wrap_main:hover::before{
  transform: rotate(2deg) translateX(0px) translateY(10px);
  z-index: 0;
}
.info_box_bg .box_wrap .title{
    padding-right: 1.5rem;
    padding-left: 1.5rem;
}

/* layout 6 */
.how_it_work_boxs{
    margin-top: -130px;
}

@media (max-width: 991px){
    .info_boxs-layout-3 .box_wrap:before, .info_boxs-layout-3 .info_box_link{
        width: 65px;
        height: 65px;
    }
    .info_box_bg .box_wrap .title{
        padding-inline: 0;
    }
    .info_boxs-layout-5 .box_wrap .subtitle {
       padding-inline: 15px !important;
    }
    .how_it_work_boxs {
        margin-top: -75px;
    }
}

@media (max-width: 767px){
    .info_boxs-layout-4 .visible_content .icon {
        max-height: 80px;
        max-width: 80px;
    }
    .icon_wrap{
        max-width: 60px;
        margin-inline: auto;
        height: auto;
    }
}
@media (max-width: 576px){
    .info_boxs-layout-3 .box_wrap:before, .info_boxs-layout-3 .info_box_link{
        width: 55px;
        height: 55px;
        font-size: 22px;
    }
    .info_boxs-layout-3 .box_wrap:before{
        top: -25px;
    }
    .check_box_li ul li {
        line-height: 20px;
        padding-left: 75px;
    }
    .check_box_li ul li:before {
        font-size: 25px;
    }
    .check_box_li ul li:after {
        height: 55px;
        width: 55px;
    }
}