*{
    padding: 0;
    margin: 0%;
    font-family: lato;
    background-color: black;
    color: #ffffff;
}
.contant{
    position: fixed;
    position: absolute;
    top: 0%;
    left: 0%;
    /* background-color: #ffffff; */
    width: 100%;
    /* height: 690vh; */
    z-index: 1;
    @media only screen and (max-width: 1000px) {
        width: 100%;
    }

}
.pop-up{
    position: absolute;
    top: 10%;
    left: 200px; 
    transform: translate(-50,-50%);
    /* background-color: #ffffff; */
    width: 900px;
    height: 150%;
    z-index: 2;
    text-align: center;
    padding: 10px;
    box-sizing: border-box;

    @media only screen and (max-width: 768px){
        left: 10px;
        width: 95%;
    }

    @media only screen and (max-width: 768px){
        top: 5%;
        height: 80%;
    }

}
h3{
    padding-right: 00px;
    padding: 20px;
    color: #f9d749;


    @media only screen and (max-width: 768px){
        font-size: 14px;
    }

    @media only screen and (max-width: 480px){
        font-size: 12px;
    }

    @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 1){
        padding-right: 50px;
        font-size: 18px;
    }


}
.para-2{
    padding: 10px;

    @media only screen and (max-width: 768px){
        width: 100%;
    }
    @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 1){
        width: 100%;
    }



}
.hero_service_block i{
    font-size: 30px;

    @media only screen and (max-width: 768px){
        font-size: 25px;
    }

    @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 1){
        font-size: 38px;
    }
}