@use '../../utils/' as * ;

.vl-choose5{
    & .vl-icon-box{
        background: var(--ztc-bg-bg-4);
        border-radius: 8px;
        padding: 24px;
        & .icon{
            & span{
                display: inline-block;
                height:60px;
                width:60px;
                line-height:60px;
                border-radius: 50px;
                text-align: center;
                background: var(--ztc-text-text-6);
                margin-bottom: 25px;
            }
        }
        & .content{
            & .title{
                color: var(--ztc-text-text-3);
                transition: .3s;
                font-size: var(--ztc-font-size-font-s20);
                line-height: var(--ztc-specing-height20);
                font-family: var(--ztc-family-font2);
                font-weight: var(--ztc-weight-bold);
                &:hover{
                    color: var(--ztc-text-text-6);
                    transition: .3s;
                }
            }
            & .para{
                color: var(--ztc-text-text-2);
                font-size: var(--ztc-font-size-font-s18);
                line-height: var(--ztc-specing-height26);
                font-family: var(--ztc-family-font1);
                font-weight: var(--ztc-weight-semibold);
                padding-top: 16px;
                padding-bottom: 25px;
            }
            & .readmore{
                color: var(--ztc-text-text-3);
                transition: .3s;
                font-size: var(--ztc-font-size-font-s18);
                line-height: var(--ztc-specing-height18);
                font-family: var(--ztc-family-font2);
                font-weight: var(--ztc-weight-bold);
                display: inline-block;
                &:hover{
                    color: var(--ztc-text-text-6);
                    transition: .3s;
                }
            }
        }
    }
    & .single-thumb-box{
        position: relative;
        & .box-icon{
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            left: 40%;
            z-index: 1;
            @media #{$lg}{
                left: 45%;
            }
            & span{
                height: 100px;
                width:100px;
                border-radius: 8px;
                display: inline-block;
                line-height: 100px;
                background: var(--ztc-text-text-6);
                text-align: center;
            }
        }
        & .single-thmb{
            & img{
                border-radius:8px;
                height: 500px;
                object-fit: cover;
                @media #{$xs}{
                    height: 370px;
                }
            }
        }
        & .single-thmb2{
            & img{
                margin-top: 108px;
                border-radius: 8px;
                height: 470px;
                object-fit: cover;

                @media #{$xs}{
                    margin-top: 0px;
                    height: 370px;
                }
            }
        }
    }
}


.vl-choose-area-10{
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    z-index: 1;
    padding-top: 100px;
    padding-bottom: 384px;
    &::after{
        position: absolute;
        content: "";
        left: 0;
        top: 0;
        height: 100%;
        width: 100%;
        background: #101608;
        opacity: .85;
        z-index: -1;
    }
}


.vl-choose-content-10{
    & p{
        color: rgba(255, 255, 255, 0.90);
        font-size: var(--ztc-font-size-font-s18);
        line-height: var(--ztc-specing-height26);
        font-weight: var(--ztc-weight-medium);
    }
    &.text-end {
       @media #{$md,$xs}{
         text-align: start !important;
       }
    }
}


// choose icon box home 10
.vl-choose-icon-box-10{
    background: var(--ztc-text-text-27);
    border-radius: 8px;
    padding: 32px;
    text-align: center;
    transition: .3s;
    & .icon{
        & span{
            background: #F4F9ED;
            height: 80px;
            width: 80px;
            line-height: 80px;
            text-align: center;
            border-radius: 50px;
            display: inline-block;
            transition: .3s;
        }
    }
    & .title{
        color: var(--ztc-text-text-1);
        font-size: var(--ztc-font-size-font-s44);
        line-height: var(--ztc-specing-height44);
        font-weight: var(--ztc-weight-bold);
        font-family: var(--ztc-family-font2);
        padding-top: 20px;
        transition: .3s;
    }
    & .desgenitation{
        color: rgba(255, 255, 255, 0.90);
        font-size: var(--ztc-font-size-font-s18);
        line-height: var(--ztc-specing-height18);
        font-weight: var(--ztc-weight-medium);
        display: inline-block;
        padding-top: 16px;
        transition: .3s;
    }
    &:hover{
        background: var(--ztc-text-text-1);
        transition: .3s;
        & .icon{
            & span{
                background: #8EC44D;
                transition: .3s;
                transform: rotateY(-180deg);
            }
        }
        & .title{
            color: var(--ztc-text-text-27);
            transition: .3s;
        }
        & .desgenitation{
            color: #51544D;
            transition: .3s;
        }
    }
}