@media(max-width:400px){
    #HomePage{
        overflow: hidden;
    }
    .header{
        display: none;
    }
    .header-mobile{
        display: block;
    }
    .image-path{
        position: absolute;
        left: 0px;
        width:400px;
        top: 90%;
        transform: translateY(-50%);
    }
    .content-hiro{
        width: 90% !important;
        top: 30%;
        margin: auto;
    }
    .content-hiro h1{
        font-size: 25px;
    }
    .items-footer a{
      margin-top: 10px !important;
     
    }
    .Emergency-call{
        margin-top: 400px !important;
    }
    .Bg-Box{
        padding:100px 20px !important ;
    }
    .steps-to-donate{
        width: 100%;
    }
    .image-step{
        margin: 30px 0px;
    }
    .form-box form{
        width: 100% !important;
    }
    .mutistep-form-area{
        width: 100% !important;
    }
    .paid-inputs-flex{
        width: 100% !important;
        display: block;
    }
    .number-paids{
        margin-top: 15px;
        width:40% !important;
    }
    .price-but-tab button{
        margin: 6px 5px;
    }
    .multistep-container .active-button li:not(:first-child) .round-btn:before{
        width: 30px;
     
        right: -60px;
    }
    .text-progerss{
        font-size: 14px;
    }
    .box-input-paid{
        width: 100% !important;
    }
}
@media(min-width:400px) and (max-width:576px){
    #HomePage{
        overflow: hidden;
    }
    .header{
        display: none;
    }
    .header-mobile{
        display: block;
    }
    .image-path{
        position: absolute;
        left: 0px;
        width:400px;
        top: 90%;
        transform: translateY(-50%);
    }
    .content-hiro{
        width: 90% !important;
        top: 30%;
        margin: auto;
    }
    .content-hiro h1{
        font-size: 25px;
    }
    .items-footer a{
      margin-top: 10px !important;
     
    }
    .Emergency-call{
        margin-top: 400px !important;
    }
    .Bg-Box{
        padding:100px 20px !important ;
    }
    .steps-to-donate{
        width: 100%;
    }
    .image-step{
        margin: 30px 0px;
    }
    .form-box form{
        width: 100% !important;
    }
    .mutistep-form-area{
        width: 100% !important;
    }
    .paid-inputs-flex{
        width: 100% !important;
        display: block;
    }
    .number-paids{
        margin-top: 15px;
        width:40% !important;
    }
    .price-but-tab button{
        margin: 6px 5px;
    }
    .multistep-container .active-button li:not(:first-child) .round-btn:before{
        width: 50px;
     
        right: -80px;
    }
    .text-progerss{
        font-size: 15px;
    }
    .box-input-paid{
        width: 100% !important;
    }
}
@media(min-width:577px) and (max-width:767.98px){
    .header{
        display: none;
    }
    .header-mobile{
        display: block;
    }
    .image-path{
        position: absolute;
        left: 0px;
        width:400px;
        top: 90%;
        transform: translateY(-50%);
    }
    .content-hiro{
        width: 90% !important;
        top: 30%;
        margin: auto;
    }
    .content-hiro h1{
        font-size: 25px;
    }
    .items-footer a{
      margin-top: 10px !important;
     
    }
    .Emergency-call{
        margin-top: 400px !important;
    }
    .Bg-Box{
        padding:100px 20px !important ;
    }
    .steps-to-donate{
        width: 100%;
    }
    .image-step{
        margin: 30px 0px;
    }
    .form-box form{
        width: 100% !important;
    }
    .mutistep-form-area{
        width: 100% !important;
    }
    .paid-inputs-flex{
        width: 100% !important;
    }
    .price-but-tab button{
        margin: 6px 5px;
    }
    .multistep-container .active-button li:not(:first-child) .round-btn:before{
        width: 135px;
     
        right: -135px;
    }

}
@media(min-width:768px) and (max-width:991.98px){
    .header{
        display: none;
    }
    .header-mobile{
        display: block;
    }
    .image-path{
        position: absolute;
        left: 0px;
        width:400px;
        top: 90%;
        transform: translateY(-50%);
    }
    .content-hiro{
        width: 90% !important;
        top: 30%;
        margin: auto;
    }
    .content-hiro h1{
        font-size: 25px;
    }
    .items-footer a{
      margin-top: 10px !important;
     
    }
    .Emergency-call{
        margin-top: 400px !important;
    }
    .Bg-Box{
        padding:100px 20px !important ;
    }
    .steps-to-donate{
        width: 100%;
    }
    .image-step{
        margin: 20px 0px;
    }
    .mutistep-form-area{
        width: 100% !important;
    }
    .paid-inputs-flex{
        width: 100% !important;
    }
    .price-but-tab button{
        margin: 6px 5px;
    }
    .multistep-container .active-button li:not(:first-child) .round-btn:before{
        width: 185px;
     
        right: -185px;
    }
  
}
@media(min-width:992px) and (max-width:1199.98px){
    .Bg-Box{
        padding:100px 50px !important ;
    }
    .paid-inputs-flex{
        width: 100% !important;
    }
    .multistep-container .active-button li:not(:first-child) .round-btn:before{
        width: 165px;
     
        right: -165px;
    }
    .price-but-tab button{
        margin: 6px 5px;
    }
    .image-path{
        width: 500px !important;
       
    }
    .content-hiro{
        width: 45%;
    }
}
@media(min-width:1200px) and (max-width:1400px){
    
    .multistep-container .active-button li:not(:first-child) .round-btn:before{
        width: 185px;
     
        right: -195px;
    }
    .image-path{
       top: 350px !important;
       width: 600px;
    }
    .content-hiro{
        width: 45%;
    }
}