/*
============================
Name:  Voltz
Version: 1.0.0
Description: Voltz - Power and Electricity HTML Template
Author: Vikiglab
Author URI: https://themeforest.net/user/vikinglab/portfolio
Location:
============================ */


/* home-page */


.service-img-container{
    width: 750px;
    height: 400px;
}

.services-menu{
    row-gap: 1.5rem;
}



@media (max-width: 768px) {
    .header-img-container{
        height: 250px !important;
        width: 300px !important;
        margin-left: 180px;
    }

    .about-img-container{
        height: 400px;
        width: 100%;
    }

    .about-img-container img{
        width: 100%;
    }

    .all-inner-header-area .heading1 h1{
        font-size: var(--ztc-font-size-font-s40);
    }

    .service-img-container{
        width: 700px;
    }
}

@media (max-width: 426px) {
    .header-img-container{
        margin-left: 55px;
    }

    .vid-container{
        height: 400px;
    }

    .about-vid-container img{
        display: none;
    }

    .about2-inner-widget .all-images .img2 .play-btn-area .popup-youtube{
        margin-left: -145px;
        margin-top: 25px;
    }

    .about2-inner-widget .about2-heading .btn-area1 .call-boxarea .content-area a{
        font-size: var(--ztc-font-size-font-s16);
    }

    .contact2 .contact-widget-area .contact-boxarea .input-area input,
    .contact-widget-area-inner .contact-boxarea .input-area input{
        padding: 14px 12px;
    }

    .contact2 .contact-widget-area .contact-boxarea .input-area input::placeholder,
    .contact2 .contact-widget-area .contact-boxarea .input-area textarea::placeholder,
    .contact2 .contact-widget-area .contact-boxarea .input-area .nice-select,
    .contact-widget-area-inner .contact-boxarea .input-area input::placeholder,
    .contact-widget-area-inner .contact-boxarea .input-area textarea::placeholder,
    .contact-widget-area-inner .contact-boxarea .input-area .nice-select{
        font-size: var(--ztc-font-size-font-s16);
    }

    .contact-widget-small h5{
        font-size: var(--ztc-font-size-font-s20);
    }

    .contact-widget-small{
        padding: 10px;
    }

    .service-img-container{
        width: 400px;
    }

    .service-main-details-area .service-details-widget h3{
        font-size: var(--ztc-font-size-font-s28);
    }
    
}

@media (max-width: 376px) {
    .btn-container{
        display: flex;
        flex-direction: column;
        gap: 20px;
    }

    .team5 .team5-boxarea .content-area .title,
    .service-main-details-area .service-details-widget .details h4{
        font-size: var(--ztc-font-size-font-s20);
    }

    .service-main-details-area .service-details-widget h3{
        font-size: var(--ztc-font-size-font-s24);
    }

    .service-img-container{
        width: 350px;
    }

    .service-main-details-area .service-details-widget h3{
        font-size: var(--ztc-font-size-font-s28);
    }
}

@media (max-width: 320px) {
    .header-img-container{
        margin-left: 0px;
    }

    .service-img-container{
        width: 290px !important;
    }


    .vid-container{
        height: 330px;
    }

    .about2-inner-widget .all-images .img2 .play-btn-area .popup-youtube {
        margin-left: -122px;
        margin-top: -25px;
    }

    .contact-widget-box p,
    .contact-widget-small a,
    .service-main-details-area .service-details-widget .details p,
    .service-main-details-area .service-details-widget ul li{
        font-size: var(--ztc-font-size-font-s14);
    }

    .service-main-details-area .service-details-widget h3{
        font-size: var(--ztc-font-size-font-s24);
    }

    .service-img-container{
        width: 350px;
    }

    .service-main-details-area .service-details-widget h3{
        font-size: var(--ztc-font-size-font-s24);
    }

    .service-main-details-area .service-details-widget .details h4{
        font-size: var(--ztc-font-size-font-s18);
    }
}