*,::after,::before{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: sans-serif !important;
}
.imgnavp{
    font-size: 0.6rem;
    width: 17vw;
}
.pvw{
    width: 275px;
}
.imgvh{
    height: 8vh;
    width: 7vw;
    /* margin-left: 10px; */
}
.iaficons-ms{
    margin-left: 5rem;
}
.ppleft{
    margin-left: 57px;
}
.footer-copy{
    font-size:1rem;
}
.footer * {
    font-size: 1rem;
    font-weight: normal;
}
.videos{
    width: 100%;
    height: 55vh;
}

body {
    background-color: white;
}
.btncenter{
    margin-top: -8%;
    /* align-items: center; */
    padding-left: 43%;
    /* border: 2px solid green; */
}
.timeline-margin-top{
    margin-top: 30%;
}
.timeline-padding{
    padding-bottom: 27%;
}
.timeline-margint-top-r{
    margin-top: 27%;

}



.timelinemy {
    /* margin: 10% 0 10% 0; */
    margin-top: 0%;
}
.textinfo-h1 {
    font-size: calc(1.4rem + 1.2vw) !important;
}
.textinfo-h3 {
    /* font-family: fantasy; */
    /*font-size: calc(1.1rem + 1.1vw) !important;*/
    font-size:1.5rem;
}
.counter-span {
    font-size: 22px;
}
.loc {
    padding: 0 5px 0 5px;
}
.logos {
    width: 125px;
    /* height: 150px;
    /* object-fit: contain; */
    /* margin: auto;  */
    /* display: block; */
}
.navbar {
    box-shadow: 5px black;
}
.stickytop {
    position: sticky;
    top: -1px;
    z-index: 3;
    /* margin-top: -0.5; */
}
.li {
    display: flex;
    font-size: 18px;
    flex-direction: column;
    font-family: Arial, Helvetica, sans-serif;
}
.f-icons {
    /* font-size: 20px; */
    margin: 8px;
    padding: 0px;
    color: #024430;
    /* color: #FFE7BB; */
    /* background-color: #024430; */
    border-radius: 5px;
}
.nav-link::before {
    content: "";
}
.timeline-item {
    display: none;
}
.timeline-marker-bs-icons {
    font-size: 50px;
    position: absolute;
    margin-left: 0px;
    margin-top: -26%;
}
/* .top {
    --top: linear-gradient(#fff 0 0) top/100% calc(100% - 50px) no-repeat,
        radial-gradient(farthest-side, #fff 98%, #0000) bottom/170px 100px
            no-repeat;

    -webkit-mask: var(--top);
    mask: var(--top);
    margin-top: 10%;
    background: #fff;
    width: 100%;
    height: 150px;
} */

.test-img {
    border-radius: 55px;
    width: 100%;
    height: 50%;
    object-fit: cover;
    background-size: 100% 50%;
    background-image: url(../refmet/demo4/images/01.jpg);
    background-repeat: no-repeat;
    background-position: center;
}
.home-img {
    border-radius: 55px;
    width: 100%;
    height: 100%;
    object-fit: cover;
    background-size: 100% 100%;
    background-image: url(../image/home.png);
    background-repeat: no-repeat;
    background-position: center;
    /* background-size: auto; */
}
.image-box {
    background-image: url(../refmet/demo4/images/01.jpg);
    background-repeat: no-repeat;
    background-size: auto;
}
.about-img {
    border: 2px solid black;
    background-image: url(../image/about-us.png);
    background-repeat: no-repeat;
    /* background-size: auto; */
    background-size: 88% 50%;
}
.mtop {
    margin-top: 100%;
}
.home-icon {
    color: #ffe7bb;
}
.home-icon:hover {
    color: #ffe7bb;
}
.textright {
    text-align: right;
}
.textinfo-h1 {
    line-height: 2;
}
.textinfo-h1-p {
    /*font-size: calc(0.7rem + 0.7vw) !important;*/
    font-size:1rem;
    line-height: 1.8;
    /*padding: 0 35px 0 35px;*/
}
.white {
    background-color: #fff;
}
.yellow {
    /* color: #FFE7BB; */
    color: #ffe7bb;
}
.yellows {
    color: #ffe7bb;
}
.darkgreen {
    color: #024430;
}
.green {
    /* color: #27541e; */
    background-color: #024430;
}
.text-green {
    color: #024430;
}
.text-green-w {
    color: transparent;
}
.bgreen {
    background-color: #024430;
}
.text-opacity {
    opacity: 0.8;
}
.btn-green {
    background-color: #024430;
    text-decoration: none;
    color: #ffe7bb;
}
.btn-green:hover {
    background-color: #024430;
    color: #ffe7bb;
}
.btn-yellow {
    background-color: #ffe7bb;
    color: #27541e;
}

.btncontact {
    margin-left: 0%;
    color: #ffe7bb;
    font-size: 1.3rem;
}
.btncontact:hover {
    background-color: #024430;
    /* background-color: #d5a995; */
    /* color: #FFE7BB; */
}
.btnul {
    display: flex;
    justify-content: center;
    text-decoration: none;
    flex-wrap: wrap;
    top: 99%;
    left: 12%;
    color: #ffe7bb;
    padding: 5px 0 5px 0;
}
.btnul li {
    margin: 0.5rem;
}
.outline-marker {
    outline: 5px solid #ffe7bb;
}
.box {
    top: 83%;
    left: 50%;
    z-index: 1;
    border-radius: 50px;
    transform: translate(-50%, -50%);
}
.btna {
    /* min-width: 30%; */
    font-size: 1.2rem !important;
    font-family: Arial, Helvetica, sans-serif;
    border-radius: 10px;
    padding: 10px 0 10px 0;
}
.state-line {
    margin-top: -48px;
}
.textinfo {
    margin-top: 22%;
}
.textinfo-home {
    margin-top: 22%;
    margin-bottom: 12%;
    font-family: Arial, Helvetica, sans-serif;
}
.timeline-p {
    /* font-size: 15px; */
    font-weight: bold;
    font-family: none;
    font-family: Arial, Helvetica, sans-serif;
}
.fa-angle-down {
    font-size: 65px;
    position: absolute;
    margin-top: 4px;
    /* padding: 10px; */
    left: 47.6%;
}
.btn-text {
    font-size: 25px;
    font-weight: 500;
}
.span {
    font-size: 30px;
    /* position: absolute; */
    /* bottom: ; */
    /* margin-top:-1.5%; */
    /* margin-left: -6%; */
    /* width: 170px;     */
    /* height: 73px; */
    /* border-bottom: 2px solid rgb(28, 22, 22); */
    /* background-color: rgb(248, 242, 242); */
    /* border-radius: 50%;     */
    /* box-shadow: 0px 0px 5px 0px rgba(70, 72, 69, 0.3); */
}
.outline-span {
    /* outline: 18px solid white; */
    font-size: 60px;
    position: absolute;
    margin-top: 3%;
    z-index: 3;
    margin-left: 0.5%;
    /* font-family: Arial, Helvetica, sans-serif; */
}
.imgfluid {
    width: 100%;
    height: 400px;
    margin-top: 2%;
    object-fit: fill;
    border-radius: 40px 40px 0 0;
}
.counter {
    font-size: 38px;
    font-weight: bold;
    font-family: Arial, Helvetica, sans-serif;
}
.counter::after {
    content: "+";
}
.ourprocess {
    margin-top: 4%;
    margin-bottom: 5%;
    min-height: 700px;
    width: 100%;
    /* margin-left: 20px; */
    object-fit: contain;
    background-image: url(../image/our-process.png);
    background-repeat: no-repeat;
    background-size: 100% 90%;
}
.btnbroucher {
    background-color: #024430;
    color: #ffe7bb;
}
.btnbroucher:hover {
    background-color: #024430;
    color: #ffe7bb;
}
.counter-p {
    font-weight: 0;
    /* padding: 0 0 0 10px; */
    font-size: 22px;
    font-family: Arial, Helvetica, sans-serif;
}
.log-f {
    width: 30%;
}
.footer-h {
    margin-top: 5px;
    margin-left: 35px;
    margin-bottom: 25px;
    font-size: 20px;
    font-family: Arial, Helvetica, sans-serif;
}
.f-company {
    margin-top: 5px;
    margin-left: 43px;
    margin-bottom: 25px;
    font-size: 20px;
    font-family: Arial, Helvetica, sans-serif;
}
/* .fli{
    margin-left: 55%;
} */
.footer-h1 {
    margin-left: 18%;
    margin-top: 3%;
    color: #ffe7bb;
    font-size: 45px;
    font-family: Arial, Helvetica, sans-serif;
}
.footer-input {
    padding: 8px;
    margin-top: 4%;
    font-size: 18px;
    border-radius: 7px;
    font-family: Arial, Helvetica, sans-serif;
}
.footer-btn {
    padding: 2px 13px 6px 13px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 25px;
    font-weight: bold;
    margin-top: 10px;
    border-radius: 7px;
    font-family: Arial, Helvetica, sans-serif;
}
.footer-row-first {
    margin-top: 7%;
    padding: auto;
}
.footer-row-second {
    margin-top: 5%;
    padding-top: 7%;
}
.footer-row-second-li {
    list-style: none;
    margin-left: 8%;
}
.footer-row-second-a {
    font-size: 18px;
    font-weight: 500;
    font-family: Arial, Helvetica, sans-serif;
    text-decoration: none;
    color: #024430;
    /* font-family: 'Times New Roman', Times, serif; */
}
.footer-row-second-P {
    font-size: 20px;
    font-weight: 500;
    font-family: Arial, Helvetica, sans-serif;
    text-decoration: none;
    color: #024430;
    margin-left: -30px;
    /* font-family: 'Times New Roman', Times, serif; */
}
.text-underline {
    text-decoration: underline;
}
.nav-margin-left {
    margin-left: 6%;
}
/* about */
.text-about {
    position: absolute;
    top: 100%;
    left: 28%;
}
.hr {
    border-top: 3px;
}
.textjustify {
    text-align: justify;
    /* font-size: 16px; */
}
.p {
    font-size: 16px;
    font-family: Arial, Helvetica, sans-serif;
}
.text-underline {
    display: inline-block;
    position: relative;
    font-size: 24px;
    color: #333;
    text-decoration: none;
    cursor: pointer;
}

/* /* Adding the underline effect  */
.text-underline::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 2px;
    background: #024430;
    transition: width 0.3s ease-in-out;
}
.text-underline:hover,
.text-underline.active {
    color: #000;
}
.text-underline:hover::after,
.text-underline.active::after {
    width: 100%;
}
/* .text-underline {
    text-decoration: none;
    color: black;
    margin: 0 15px;
    font-size: 18px;
    padding: 5px;
  }

  .text-underline.active {
    text-decoration: underline;
    font-weight: bold; /* Optional: to highlight active link */
/* } */

/* .text-underline:hover { */
/* text-decoration: underline; Optional: hover effect for all links */
/* }  */

.textgreen {
    color: #024430;
}

.main-box {
    height: 290px;
    margin-top: -1%;
}
.box {
    height: 430px;
    width: 80%;
}
.pleft {
    padding-left: 63px;
}
.uleft {
    padding-left: 78px;
}
.aleft {
    padding-left: 32px;
}

.imgsize {
    /* object-fit: cover; */
    border-radius: 55px;
    width: 100%;
    height: 100%;
    object-fit: fill;
    /* background-image: url(/image/home.png); */
}
/* contact */
.contact-icons {
    font-size: 35px;
    /* font-family: Arial, Helvetica, sans-serif; */
    padding: 7px 13px 7px 13px;
    /* border: 1px solid red; */
    background-color: #024430;
    color: #ffe7bb;
}
.log {
    width: 10vw;
    /* height: 50px;
    top: 0; */
}
.productname {
    margin-top: 13%;
}
.yellow:hover {
    color: #ffe7bb;
}
.footer-p {
    font-size: 18px;
    font-family: Arial, Helvetica, sans-serif;
}

.imgfluid {
    object-fit: cover;
    height: 408px;
    object-position: top;
}
.swiper {
    width: 100%;
    height: auto;
}
.swiper-slide {
    display: flex;
    justify-content: center;
    align-items: center;
}
.logos {
    /* max-width: 100%;
        height: auto;
        object-fit: cover; */
}

/* ----------------------------------------------------------------- */
@media (max-width: 576px) {
    /* .log{
        width: 5vw;
    } */
    /* .footer{
        font-size: 14px;
    } */
    .imgvhps{
        padding-left: 131px;
    }
    .iaficons-ms{
        margin-left: -1px;
    }
    .imgvh{
        height: 7vh;
        width: 29vw;
        /* margin-left: 10px; */
    }
    .imgnavp{
        margin-left: 118px;
        font-size: 0.6rem;
        width: 64vw;
    }
    .pvw{
        width: 275px;
    }
    .textinfo-h1-pp{
        margin: 0 25px 0 25px;
        font-size: 1rem;

    }
     .videos{
        height: 36vh;
        
     }
    .btncenter {
        margin-top: -19%;
        /* align-items: center; */
        padding-left: 30%;
        /* border: 2px solid green; */
    }
    .card-btn {
        /* width: 10px; */
        /* height: px; */
    }
    .cardimg {
        width: 100%;
        height: 100px;
        border-radius: 50%;
        object-fit: cover;
    }
    .logos {
        /* max-width: 35%; */
        /* height: auto; */
        /* object-fit: cover; */
    }
    .imgfluid {
        object-fit:unset;
        height: 154px;
        object-position: top;
    }
    .imgsize {
        /* object-fit: cover; */
        border-radius: 20px;
        /* width: 100%; */
        height: 72%;
        /* object-fit:fill;  */
        /* background-image: url(/image/home.png); */
    }
    .textinfo-h4-p {
        font-size: 18px;
    }
    .textinfo-h1 {
        font-size: calc(1.2rem + 1.2vw) !important;
        line-height: 2;
    }
    .textinfo-h1-p {
        /* font-size: calc(0.8rem + 0.8vw) !important; */
        line-height: 1.9;
    }
    .textinfo-h3 {
        /* font-family: fantasy; */
        font-size: calc(0.9rem + 0.9vw) !important;
         font-weight: bold;
    }
    .pleft {
        margin-left: -23px;
    }
    .uleft {
        margin-left: -23px;
        margin-right: 31px;
    }
    .footer-input {
        width: 70%;
        margin: 0px 0 5% 17%;
        font-size: 14px;
    }
    .footer-btn {
        width: 70%;
        margin: 0px 0 5% 17%;
        font-size: 16px;
    }
    .footer-h {
        margin-left: 24px;
    }
    .f-company {
        margin-left: 24px;
        font-size: 20px;
    }
    .footer-row-second-a {
        margin-left: -33px;
    }
    .footer-row-second-p {
        margin-left: -30px;
    }
    .ourprocess {
        background-size: 100% 55%;
        margin-top: 15%;
    }
    .client{
        margin-top: -61%;
    }
    .outline-span {
        font-size: 50px;
        position: absolute;
        margin-top: 6%;
        margin-left: -2.4%;
    }
    .btnbroucher {
        background-color: #024430;
        color: #ffe7bb;
    }
    .btnbroucher:hover {
        background-color: #024430;
        color: #ffe7bb;
    }
    /* .timeline-marker{
        margin-left: 1px;
    } */
    .timeline-marker-bs-icons {
        /* font-size: 0px; */
        /* position: absolute; */
        /* margin-left: -8px; */
        margin-top: -35%;
    }
    .top {
        margin-top: 7%;
        height: 115px;
    }
    .text-underline::after {
        background: white;
    }
    /* .ourprocess{
        height: 375px;
        margin-left: 16px;
    } */
    .log {
        /* width: 88px; */
        /* height: 10px; */
        width: 25vw;
        position: absolute;
        left: 7px;
        top: 8px;
        /* margin-bottom: 55px; */
    }
    .log-f {
        width: 29%;
        margin-left: 30px;
    }
    .fs-4 {
        font-size: calc(0.3rem + 0.3vw) !important;
    }
    .fs-5 {
        font-size: calc(0.3rem + 0.3vw) !important;
    }
    .text-underline {
        font-size: 17px;
    }
    /* a.nav-link{
        position: absolute;
        left: 50px;
    } */
    .main-box {
        height: 150px;
        margin-top: 15%;
    }
    .imgsize {
        /* height: 80%; */
    }
    .btncontainer {
        margin-top: 25%;
    }
    .card-btn {
        min-height: 180px;
        font-size: 12px;
        text-align: justify;
    }
    .card-body {
        /* padding-top: 40px; */
    }
    .cardbody {
        padding-top: 40px;
        /* background-color: #024430; */
        box-shadow: 0 0 5px 0;
    }
    .card-a {
        display: inline;
        font-size: 20px;
        justify-content: center;
        align-items: center;
        padding: 0px;
        font-weight: bold;
        bottom: 0;
    }
    .card-a:hover .card {
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        transform: translateY(-5px);
        transition: all 0.3s ease-in-out;
    }

    .timeline-content {
        width: 75%;
    }

    .timeline-marker {
        left: 6.8%;
        width: 35px;
        height: 35px;
    }
    .timeline-marker-icons {
        font-size: 25px;
        margin-left: 3px;
    }
    /* .timeline-marker-bs-icons{
        font-size: 25px;
        margin-left: 3px;
        margin-top: -15px;

    } */
    .col-p5 {
        min-height: 50px;
    }
    /* about */
    .h1-info {
        margin-top: -41px;
        font-size: 10px;
        margin-left: -40px;
        margin-bottom: 20px;
    }
    .textinfo {
        margin-top: 39%;
    }
    .product-top {
        margin-top: 5%;
    }
    .span {
        font-size: 20px;
    }
    .ourclient-container {
        position: absolute;
        margin-top: -40%;
    }
    .footer-p {
        font-size: 12px;
        padding: 0 30px 0 30px;
    }
    .counter-span {
        margin-top: 26px;
        font-size: 25px;
    }
}

/* Medium devices (max-width: 768px) */
@media (max-width: 768px) {
    .f-company {
        margin-top: 5px;
        /* margin-left: 35px; */
        margin-bottom: 25px;
        font-size: 20px;
    }
     .textinfo-h1-pp{
        margin: 0 25px 0 25px;

    }
    .text-underline {
        font-size: 17px;
    }
    .loc {
        padding: 0 3px 0 3px;
    }
    .nav-margin-left {
        margin-left: 14%;
    }
    .btnbroucher {
        background-color: #024430;
        color: #ffe7bb;
    }
    .btnbroucher:hover {
        background-color: #024430;
        color: #ffe7bb;
    }
    .top {
        margin-top: 5%;
        height: 130px;
    }
    .timeline-marker-bs-icons {
        font-size: 35px;
        /* position: absolute; */
        margin-left: -0.9px;
        /* margin-top: -26%; */
    }
    .span {
        /* font-size: 25px; */
    }
    .outline-span {
        font-size: 50px;
        /* position: absolute;
        margin-top: 4%;
        margin-left: -1.4%; */
    }
    .fs-4 {
        font-size: calc(0.9rem + 0.3vw) !important;
    }
    .fs-5 {
        font-size: 1rem !important;
    }
    .btncontact {
        margin-left: 3%;
        /* font-size: 1rem; */
    }
    .main-box {
        height: 185px;
        margin-top: 0%;
    }
    .box {
        width: 88%;
        height: 240px;
        /* margin-top: -5%; */
        /* border: 2px solid red; */
    }
    .btnul {
        left: 8%;
    }
    .btna {
        min-width: 115px;
        font-size: 0.7rem !important;
        /* padding: 1rem; */
        background-color: #024430;
    }

    .btnax {
        padding-left: 0.8rem !important;
        padding-right: 0.8rem !important;
    }
    .textinfo {
        /* margin-top:31% ; */
    }
    .textinfo-h1 {
        /* font-size: calc(0.8rem + 0.8vw) !important;
        line-height: 2; */
        /* margin-top: -19%;
        margin-left: -35px; */
    }
    .textinfo-p {
        font-size: calc(0.8rem + 0.8vw) !important;
    }
    .textinfo-h1-p {
        /* font-size: calc(0.7rem + 0.6vw) !important;
        line-height: 1.5; */
        font-size: 1rem;
        line-height: 1.8;
    }
    .state-line {
        margin-top: -12%;
    }
    .arrow-icons-left {
        margin-left: -0.96%;
        margin-top: -1px;
    }
    .imgfluid {
        /* height: 210px; */
    }
    .counter-span {
        /* font-size: 25px; */
    }
    .counter-p {
        font-size: 12px;
    }
    .col-p5 {
        padding: 0px;
    }
    .col3 {
        padding: px;
        min-height: 110px;
    }

    /* footer */
    .footer-h1 {
        font-size: 30px;
    }
    .footer-input {
        font-size: 10px;
        padding: 7px;
        margin-bottom: 7px;
    }
    .footer-btn {
        font-size: 15px;
    }
    .footer-p {
        font-size: 12px;
    }
    .footer-h {
        font-size: 20px;
    }
    .f-compny {
        font-size: 20px;
    }
    .footer-row-second-a {
        font-size: 15px;
    }
    .footer-copy {
        font-size: 13px;
    }
    /* product */

    .darkgreen {
        font-size: 20px;
    }
    .yellow {
        font-size: 20px;
    }

    .img {
        width: 200px;
    }
    .what_we_buy .textinfo-h1-p{
        padding: 0 !important;
    }
    
}

@media (min-width: 1200px) and (max-width: 1400px) {
     .nav-margin-left {
        margin-left: 5%;
    }
    .imgnavp{
        font-size: 0.5rem;
        width: 17vw;
    }
     .pvw{
        width: 275px;
    }
    .imgvh{
        height: 8vh;
        width: 7vw;
        /* margin-left: 10px; */
    }
     .iaficons-ms{
        margin-left: 2.5rem;
    }
    .btncontact{
        margin-left: -2%;
    }
    .imgsize {
        margin-top: 5%;
        height: 80%;
    }
    .btna{
        font-size: 0.9rem !important;
    }
    .textinfo-h1 {
        font-size: calc(1.2rem + 1.2vw) !important;
    }
    .timeline-marker {
        margin-left: -7px;
    }
    .imgfluid{
        height: 290px;
    }
    .counter{
        font-size: 38px;
    }
    .counter-p{
        font-size: 18px;
    }
    .ourprocess{
        min-height: 647px !important;
    }
    .footer-input{
        font-size: 16px;
    }
    .widget-a{
       /* font-size: 15px;  */
    }
    .widget-i{

        /* margin-left: -2.5%; */
    }


}