html,
body {
    height: 100%;
}

.container1
{
    width: 500px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-image: url("images/ipad-632394_1920.html");
	background-size: cover;
	background-repeat:no-repeat;    
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}
.container-box
{
	display:inline-block; 
	padding:220px; 
	background: rgba(0, 0, 0, .5);
	border: 1px solid #333;	
}

/* .modal-header {
    padding: 15px;
    border-bottom: 1px solid #e5e5e5;
} */
.btn-success:hover {
    color: #fff;
    background-color: #447c9d;
    border-color: #004b7e;
}
.btn.focus, .btn:focus, .btn:hover {
    color: #333;
    text-decoration: none;
}
.btn-block {
    display: block;
    width: 100%;
}
.btn-group-lg>.btn, .btn-lg {
    padding: 10px 16px;
    font-size: 18px;
    line-height: 1.7;
    border-radius: 6px;
}
.btn-success {
    color: #fff;
    background-color: #029ad6;
    border-color: #004b7e;
}

/* .modal-content {
    -webkit-box-shadow: 0 5px 15px rgba(0,0,0,.5);
    box-shadow: 0 5px 15px rgba(0,0,0,.5);
    position: relative;
    background-color: #4a8cc2;
    border: 1px solid #999999;
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 6px;
    outline: none;
    background-clip: padding-box;
}
.modal-body {
  position: relative;
  padding: 20px;
}
.pop_heading {
    width: 100%;
    padding: 20px;
} */

.col, .col-1, .col-10, .col-11, .col-12, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-auto, .col-lg, .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-auto, .col-md, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-auto, .col-sm, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-auto, .col-xl, .col-xl-1, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-auto {
    position: relative;
    width: 100%;
    padding-left:0px!important;
    padding-right:0px!important;
}
button.pop_btn {
    font-size: 16px;
    text-transform: uppercase;
    color: #fff;
    background: #0f1626;
    padding: 10px 0;
    border: none;
    width: 100%;
    margin-top:20px!important;

}
.pop_heading h4 {
    font-size: 23px;
    font-weight: 700;
    color: #fffb00;
    padding: 0 0 0 30px;
}
.pop_heading h5 {
    font-size: 19px;
    text-transform: uppercase;
    font-weight: 700;
    margin: 0 0 15px;
    border-left: 4px solid #fffb00;
    padding: 0 20px;
    line-height: 29px;
    word-spacing: 4px;
    color: #fff;
}
button.close {
    background: url(../img/cross.webp) no-repeat 0 0;
    width: 20px;
    height: 20px;
    position: absolute;
    top: 9px;
    right: 15px;
    display: block;
    opacity: 1;
}
.field .form-control {
    width: 100%;
    border-radius: 0;
    padding: 3px 0 4px 37px;
    resize: none;
}
.form-control {
    display: block;
    width: 100%;
    height: 34px;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.428571429;
    color: #555555;
    vertical-align: middle;
    background-color: #ffffff;
    background-image: none;
    border: 1px solid #cccccc;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    -webkit-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
    transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
}

.field {
    width: 100%;
    position: relative;
    margin: 0 0 10px;
}
span.pop_icon {
    position: absolute;
    color: #e13d3a;
    left: 13px;
    top: 7px;
}
/* .modal-dialog {
    position: relative;
    z-index: 1050;
    width: auto;
    margin: 10px;
	padding-top: 310px;
} */
.fa-commenting:before {
    content: "\f27a";
}
.fa-user:before {
    content: "\f007";
}
.fa-envelope:before {
    content: "\f0e0";
}
.fa-phone:before {
    content: "\f095";
}

/* Tablet Landscape */
@media screen and (max-width: 1060px) {
    #primary { width:67%; }
    #secondary { width:30%; margin-left:3%;}  
}

/* Tabled Portrait */
@media screen and (max-width: 768px) {
    #primary { width:100%; }
    #secondary { width:100%; margin:0; border:none; }
}
@media screen and (min-width: 768px) {



  /* .modal-dialog {
    width: 600px;
    margin: 30px auto;
    padding-top: 340px;	
  } */
  /* .modal-content {
    -webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
  } */
}

@media screen and (max-width: 768px) {

    .container1 {
        width: 370px;
    }

}
h-label{
        display: inline-block;
        margin-bottom: 0.5rem;
}

    @keyframes blinkingText2 {
        0% {
            background: rgba(254, 252, 98, 1);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent
        }

        49% {
            background: rgba(254, 252, 98, 1);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent
        }

        60% {
            background: #eab130;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent
        }

        99% {
            background: #eab130;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent
        }

        100% {
            background: rgba(254, 252, 98, 1);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent
        }
    }


    .pkg-modal .modal-dialog {
        max-width: 450px
    }

    .pkg-modal .modal-content {
        border: none;
        border-radius: 10px
    }

    .pkg-modal .modal-body {
        padding: 20px;
        background: linear-gradient(to top, #8200ba, #3a0253 100%);
        border-radius: 5px
    }

    .pkg-modal .close {
        font-size: 25px;
        font-weight: 500;
        color: #fff;
        opacity: 1;
        width: 36px;
        height: 35px;
        border-radius: 100px;
        position: absolute;
        right: -14px;
        top: -13px;
        background: #bf1212;
        border: 1px solid #bf1212 !important
    }

    .modal-body h3 {
        font-size: 25px;
        text-align: center;
        font-weight: 600;
        color: #fff;
        display: inline-block;
        width: 100%;
    }
    .countdown {
        display: inline
    }
    .pkg-modal .modal-body p {
        color: #fff;
        line-height: 19px;
        font-size: 14px;
        margin: 10px 0 17px
    }

    .pkg-modal .modal-body input {
        background: #fff;
        border: #dedede 2px solid;
        padding: 10px 15px;
        width: 100%;
        border-radius: 6px;
        font-size: 14px;
        color: #000;
        position: relative;
        margin-bottom: 15px
    }

    .pkg-modal .pkg-button [type=submit] {
        background: #bf1212;
        color: #fff;
        border: none;
        font-size: 18px;
        text-transform: uppercase;
        font-weight: 400;
        padding: 9px 10px;
        letter-spacing: 1px;
        outline: 0 none;
        border-radius: 50px;
        display: block;
        margin: 0 auto;
        width: 195px
    }

    @keyframes blinkingText {
        0% {
            color: #fff
        }

        49% {
            color: #fff
        }

        60% {
            color: transparent
        }

        99% {
            color: transparent
        }

        100% {
            color: #fff
        }
    }

    #button121 {
        width: 100px;
        height: 100px;
        position: fixed;
        bottom: 0;
        left: 20px;
        right: 0;
        z-index: 1
    }

    .btn2 {
        color: #fff !important;
        background: #bf1212 !important
    }

    .btn1 {
        color: #bf1212 !important;
        background: #fff !important
    }

    .off_txt {
        font-size: 35px;
        font-weight: 700;
        color: #bf1212;
        animation: blinkingText .8s infinite
    }

    .h-430 {
        height: 430px
    }

    .h-450 {
        height: 450px
    }
    .text-center{
        text-align: center;
    }
    .mt-2{
       margin-top: 1rem;
    }