.experience-box{
    position:absolute;
    bottom:30px;
    right:-20px;
    background:#fff;
    padding:20px 25px;
    border-radius:15px;
    display:flex;
    align-items:center;
    gap:15px;
    box-shadow:0 10px 30px rgba(0,0,0,0.12);
}

.experience-icon{
    width:65px;
    height:65px;
    background:#545764;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    font-size:28px;
}

.experience-content h3{
    margin:0;
    font-size:32px;
    font-weight:700;
    line-height:1;
}

.experience-content p{
    margin:5px 0 0;
    font-size:15px;
    font-weight:500;
}

/* FEATURE BOX */

.about-feature-box{
    background:#fff;
    padding:11px;
    border-radius:12px;
    display:flex;
    gap:15px;
    height:100%;
    transition:0.4s;
    box-shadow:0 5px 20px rgba(0,0,0,0.08);
}

.about-feature-box:hover{
    transform:translateY(-5px);
}

.feature-icon{
    width:55px;
    height:55px;
    min-width:55px;
    background:#545764;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    font-size:20px;
}

.feature-content h5{
    margin-bottom:8px;
    font-size:18px;
    font-weight:600;
}

.feature-content p{
    margin:0;
    font-size:14px;
    line-height:24px;
}

/* RESPONSIVE */

@media(max-width:991px){

    .experience-box{
        right:15px;
        bottom:15px;
    }

}

@media(max-width:767px){

    .experience-box{
        position:relative;
        right:auto;
        bottom:auto;
        margin-top:20px;
    }

}
    


/*speciality*/

/* SECTION */

.vm-speciality-section{
    background:#f8f9fc;
    padding:90px 0 70px;
    position:relative;
}

/* FEATURE BOX */

.vm-feature-box{
    background:#fff;
    border-radius:25px;
    padding:40px 30px;
    position:relative;
    overflow:hidden;
    transition:0.5s;
    height:100%;
    box-shadow:0 10px 30px rgba(0,0,0,0.08);
}

.vm-feature-box:hover{
    transform:translateY(-10px);
    box-shadow:0 20px 40px rgba(0,0,0,0.12);
}

/* ACTIVE BOX */

.vm-active-feature{
    background:linear-gradient(135deg,#545764,#545764);
}

.vm-active-feature .vm-feature-title,
.vm-active-feature .vm-feature-desc,
.vm-active-feature .vm-feature-number{
    color:#fff;
}

/* NUMBER */

.vm-feature-number{
    position:absolute;
    top:25px;
    right:25px;
    font-size:55px;
    font-weight:700;
    color:rgba(12,90,219,0.12);
    line-height:1;
}

/* ICON */

.vm-feature-icon-wrapper{
    margin-bottom:25px;
}

.vm-feature-icon-inner{
    width:90px;
    height:90px;
    border-radius:25px;
    background:#f3f7ff;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:0.4s;
}

.vm-feature-box:hover .vm-feature-icon-inner{
    transform:rotateY(180deg);
}

.vm-feature-icon{
    width:50px;
}

/* TITLE */

.vm-feature-title{
    font-size:24px;
    font-weight:700;
    margin-bottom:15px;
    color:#111;
}

/* DESCRIPTION */

.vm-feature-desc{
    font-size:15px;
    line-height:28px;
    color:#666;
}

/* RESPONSIVE */

@media(max-width:991px){

    .vm-feature-box{
        margin-bottom:30px;
    }

}

@media(max-width:767px){

    .vm-speciality-section{
        padding:70px 0 50px;
    }

    .vm-feature-box{
        padding:35px 25px;
    }

    .vm-feature-title{
        font-size:22px;
    }

}

/* achievements*/


/* SECTION */

.vm-counter-section{
    position:relative;
    padding:100px 0 70px;
    /* background-image:url('../images/petrocontubes/home/counter-bg.jpg'); */
    background-size:cover;
    background-position:center;
    overflow:hidden;
}

/* OVERLAY */

.vm-counter-overlay{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:linear-gradient(135deg,
    rgba(0,0,0,0.80),
    #545764);
}

/* TITLE */

.vm-counter-subtitle{
    color:black;
    font-size:16px;
    font-weight:600;
    letter-spacing:2px;
    margin-bottom:15px;
}

.vm-counter-title{
    color:#fff;
    font-size:46px;
    font-weight:700;
    margin-bottom:20px;
}

.vm-counter-text{
    color:rgba(255,255,255,0.85);
    font-size:16px;
    max-width:700px;
    margin:0 auto;
    line-height:30px;
}

/* COUNTER BOX */

.vm-counter-box{
    background:rgba(255,255,255,0.08);
    backdrop-filter:blur(8px);
    border:1px solid rgba(255,255,255,0.12);
    border-radius:25px;
    padding:40px 25px;
    text-align:center;
    transition:0.5s;
    height:100%;
    position:relative;
    overflow:hidden;
}

.vm-counter-box::before{
    content:'';
    position:absolute;
    top:0;
    left:-100%;
    width:100%;
    height:100%;
    background:linear-gradient(90deg,
    transparent,
    rgba(255,255,255,0.15),
    transparent);
    transition:0.6s;
}

.vm-counter-box:hover::before{
    left:100%;
}

.vm-counter-box:hover{
    transform:translateY(-10px);
    background:rgba(255,255,255,0.12);
}

/* ICON */

.vm-counter-icon{
    width:90px;
    height:90px;
    border-radius:50%;
    background:#fff;
    margin:0 auto 25px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:38px;
    color:#545764;
    transition:0.5s;
}

.vm-counter-box:hover .vm-counter-icon{
    transform:rotateY(180deg);
    background:black;
    color:#fff;
}

/* CONTENT */

.vm-counter-content h3{
    font-size:42px;
    font-weight:700;
    color:#fff;
    margin-bottom:10px;
}

.vm-counter-content p{
    color:rgba(255,255,255,0.85);
    font-size:18px;
    margin:0;
    font-weight:500;
}

/* RESPONSIVE */

@media(max-width:991px){

    .vm-counter-box{
        margin-bottom:30px;
    }

}

@media(max-width:767px){

    .vm-counter-section{
        padding:80px 0 50px;
    }

    .vm-counter-title{
        font-size:34px;
    }

    .vm-counter-box{
        padding:35px 20px;
    }

    .vm-counter-content h3{
        font-size:34px;
    }

}




/*quality*/


.vm-quality-tab-section{
    padding:90px 0;
    background:#f8f9fc;
}

/* TITLE */

.vm-tab-subtitle{
    color:#545764;
    font-size:16px;
    font-weight:600;
    letter-spacing:2px;
    margin-bottom:15px;
}

.vm-tab-title{
    font-size:46px;
    font-weight:700;
    color:#111;
}

/* TAB BUTTONS */

.vm-tab-buttons{
    display:flex;
    flex-direction:column;
    gap:20px;
}

.vm-tab-btn{
    background:black;
    border:none;
    border-radius:20px;
    padding:25px 25px;
    text-align:left;
    font-size:18px;
    font-weight:600;
    color: white;
    transition:0.4s;
    position:relative;
    box-shadow:0 10px 30px rgba(0,0,0,0.06);
}

.vm-tab-btn span{
    width:45px;
    height:45px;
    background:#f3f7ff;
    color:#545764;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    margin-right:15px;
    font-size:16px;
    font-weight:700;
}

.vm-tab-btn.active,
.vm-tab-btn:hover{
    background:linear-gradient(135deg,#545764,#545764);
    color:#fff;
    transform:translateX(10px);
}

.vm-tab-btn.active span,
.vm-tab-btn:hover span{
    background:#fff;
    color:#545764;
}

/* CONTENT */

.vm-tab-content-wrapper{
    background:#fff;
    border-radius:30px;
    padding:50px;
    box-shadow:0 15px 40px rgba(0,0,0,0.08);
    min-height:450px;
}

.vm-tab-content{
    display:none;
}

.vm-tab-content.active-tab{
    display:block;
    animation:fadeIn 0.5s ease;
}

@keyframes fadeIn{
    from{
        opacity:0;
        transform:translateY(15px);
    }
    to{
        opacity:1;
        transform:translateY(0);
    }
}

/* ICON */

.vm-tab-icon{
    width:100px;
    height:100px;
    background:#f3f7ff;
    border-radius:25px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:45px;
    color:#545764;
    margin-bottom:30px;
}

/* CONTENT */

.vm-tab-content h3{
    font-size:32px;
    font-weight:700;
    margin-bottom:20px;
    color:#111;
}

.vm-tab-content p{
    font-size:16px;
    line-height:32px;
    color:#666;
    margin-bottom:25px;
}

.vm-tab-content ul{
    padding:0;
    margin:0;
    list-style:none;
}

.vm-tab-content ul li{
    font-size:16px;
    color:#111;
    margin-bottom:15px;
    position:relative;
    padding-left:30px;
}

.vm-tab-content ul li::before{
    content:"✓";
    position:absolute;
    left:0;
    top:0;
    color:#545764;
    font-weight:700;
}

/* RESPONSIVE */

@media(max-width:991px){

    .vm-tab-buttons{
        margin-bottom:30px;
    }

}

@media(max-width:767px){

    .vm-quality-tab-section{
        padding:70px 0;
    }

    .vm-tab-title{
        font-size:34px;
    }

    .vm-tab-content-wrapper{
        padding:35px 25px;
        min-height:auto;
    }

    .vm-tab-content h3{
        font-size:26px;
    }

}




/*delivery process*/

/* SECTION */

.vm-process-timeline-section{
    padding:100px 0;
    background:#f8f9fc;
    overflow:hidden;
}

/* TITLE */

.vm-process-mini-title{
    color:#545764;
    font-size:16px;
    font-weight:600;
    letter-spacing:2px;
    text-transform:uppercase;
    margin-bottom:15px;
}

.vm-process-main-title{
    font-size:48px;
    font-weight:700;
    line-height:60px;
    color:#111;
}

/* TIMELINE */

.vm-process-timeline{
    position:relative;
    margin-top:80px;
}

/* CENTER LINE */

.vm-process-line{
    position:absolute;
    top:0;
    left:50%;
    transform:translateX(-50%);
    width:4px;
    height:100%;
    background:linear-gradient(to bottom,#545764,black);
}

/* STEP */

.vm-process-step{
    position:relative;
/*    margin-bottom:70px;*/
}

/* ICON */

.vm-process-icon{
    width:100px;
    height:100px;
    border-radius:50%;
    background:#fff;
    margin:auto;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:42px;
    color:#545764;
    position:relative;
    z-index:2;
    box-shadow:0 12px 35px rgba(0,0,0,0.10);
    transition:0.5s;
}

.vm-process-icon:hover{
    transform:scale(1.1) rotate(360deg);
}

.active-icon{
    background:linear-gradient(135deg,#545764,#545764);
    color:#fff;
}

/* CONTENT */

.vm-process-content{
    padding:20px 40px;
}

.vm-step-number{
    font-size:70px;
    font-weight:700;
    color:rgba(12,90,219,0.10);
    line-height:1;
    display:block;
    margin-bottom:10px;
}

.vm-process-content h3{
    font-size:30px;
    font-weight:700;
    margin-bottom:15px;
    color:#111;
}

.vm-process-content p{
    font-size:16px;
    line-height:30px;
    color:#666;
    margin:0;
}

/* RESPONSIVE */

@media(max-width:991px){

    .vm-process-line{
        left:40px;
    }

    .vm-process-icon{
        margin-bottom:25px;
        width:80px;
        height:80px;
        font-size:34px;
    }

    .vm-process-content{
        text-align:left !important;
        padding:0 0 0 30px;
    }

    .vm-process-step .row{
        display:block;
    }

}

@media(max-width:767px){

    .vm-process-timeline-section{
        padding:70px 0;
    }

    .vm-process-main-title{
        font-size:34px;
        line-height:46px;
    }

    .vm-step-number{
        font-size:50px;
    }

    .vm-process-content h3{
        font-size:24px;
    }

}