/* ================ comon_css------===================== */
html, body {
    height: -webkit-fill-available;
}
body {
    font-family: "Open Sans", sans-serif;
    font-size: 16px;
    font-weight: 400;
    background: #d7d2bf;
	color: #000;	   
    overflow: hidden !important;
    -webkit-overflow: hidden !important;
    transition: 0.8s;
    margin: 0;
    padding: 0;
    position: relative;
}

a {
    text-decoration: none;
    -moz-text-decoration: none;
    -webkit-text-decoration: none;
    display: inline-block !important;
    clear: both;
    transition: 0.5s all ease;
}

a:hover {
    text-decoration: none;
    -moz-text-decoration: none;
    -webkit-text-decoration: none;
}

.container {
    height: -webkit-fill-available;
    height: 100vh;  
    -webkit-height: 100vh;
    -moz-height: 100vh;
    max-width: 100%;
    overflow: hidden;
}

/* ================ -- comon_css_end--===================== */
.bacground_vedio {
    height: -webkit-fill-available;
    height: 85vh;
    width: 100% !important;
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    -webkit-display:flex;
    align-items: center;
    -webkit-align-items: center;
    -moz-align-items: center;
    justify-content: center;
    -webkit-justify-content: center;
    -moz-justify-content: center;
    text-align: center !important;
    overflow: hidden;
    -webkit-overflow: hidden;
    z-index: -1; 
    background: #d7d2bf;
    -webkit-background: #d7d2bf; 
}

.bacground_vedio video  {
    height: -webkit-fill-available;    
    height: 100%;
    width: 100% !important;
    -webkit-width: 100% !important;
    margin: 0;
    padding: 5px; 
    outline: none;  
    position: relative;
    transform: scale(1.23);
    -webkit-transform: scale(1.23);
    -moz-transform: scale(1.23);
    z-index: -1;
    overflow: hidden;  
    border-radius: 50% !important;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
}

.real_again_img {
    height: -webkit-fill-available;
    height: 80vh;
    width: 100% !important;
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    -webkit-display:flex;
    flex-direction: column;
    -webkit-flex-direction: column;
    align-items: center;
    -webkit-align-items: center;
    -moz-align-items: center;
    justify-content: center;
    -webkit-justify-content: center;
    -moz-justify-content: center;
    text-align: center !important;
    z-index: 999;    
}

.real_again_img  img{
   width: 540px;
   margin: 60px 0 10px;   
}

.real_again_img p {
    color: #fff;
    font-size: 25px;
    font-weight: 500;
    margin: 0;
    line-height: 0;
    position: relative;
    text-shadow: 0px 0px 2px #000;  
    font-family: "Source Code Pro", monospace;
}

.real_again_img p span {
    content: "";
    height: 2px;
    width: 20px;
    background-color: #ffff;
    position: absolute;
    left: 102%;
    top: 100%;  
    box-shadow: 0px 0px 2px #000;     
}

.real_again_img p svg {
    width: 25px;
    height: 20px;
    fill: #fff;
    transform: translate(0, 3px);
} 

.text_area {
    width: 100%;
    height: 100px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: end;
    z-index: 999;
    box-sizing: border-box;
    margin: auto;
    position: fixed;
    bottom: 40px; 
    left: 0; 
    z-index: 0;
    background: transparent;
}

.contact_link {
    height: 100%;
    width: 50%;
    text-align: center; 
    box-sizing: border-box;
    z-index: 999; 
    font-family: "Open Sans", sans-serif; 
    background-color: transparent;
}

.contact_link img {
    height: 70px;
    width: 70px;
    background: transparent;
}

.contact_link a {
    color: #000;
    font-size: 16px;
    font-weight: 600;
    padding: 10px;
    box-sizing: border-box;
    z-index: 999;    
}

.designer_link {
    width: 40%;
    position: fixed;
    bottom: 10px;
    right: 15px;
    display: flex;
    align-items: end;
    justify-content: center;
    background: transparent;
}

.designer_link a {  
    display: inline-block;
    font-size: 13px !important;
    font-family: "Open Sans", sans-serif;
    font-weight: 400;  
    box-sizing: border-box;
    color: #000;
    z-index: 999;
    margin-left: auto;
}

.mobile_view {
    display: inline-block;
    padding: 0 !important;
}

.mobile_video {
    display: none;
}
/* responsive css for all device ================
================================================= */

@media screen and (min-color-index:0) and(-webkit-min-device-pixel-ratio:0) { 
    @media screen and (min-resolution:0.001dpcm) {        
        .container, .bacground_vedio, .real_again_img {
            height: -webkit-fill-available;
        }
    }
}

@media screen and (max-width: 980px) {
    .container {
        height: -webkit-fill-available;
        height: 100vh;
    }

    .bacground_vedio {
        height: -webkit-fill-available;
        height: 85vh;
    }

    .real_again_img {
        height: -webkit-fill-available;
        height: 80vh;
    }
}
@supports (-webkit-touch-callout: none) {
    .container {
        height: -webkit-fill-available;
        height: 100vh;
    }

    .bacground_vedio {
        height: -webkit-fill-available;
        height: 85vh;
    }

    .real_again_img {
        height: -webkit-fill-available;
        height: 80vh;
    }
}

    /*
    ====================================
    Small Screen - Tablate
    ====================================
    */
    @media screen and (max-width: 750px) {
        .bacground_vedio video {
            transform: scale(1.7);
            -webkit-transform: scale(1.7);
            -moz-transform: scale(1.7);
        }
        .real_again_img  img{width: 450px;}         
    }

    @media screen and (max-width: 620px) {
        .real_again_img  img{width: 450px;} 
        .designer_link {display: none !important;}
        .mobile_view {display: none; padding: 0;}         
        .contact_link {width: 100%;}  
    }

    @media screen and (max-width: 550px) {
        .real_again_img  img{width: 430px; }         
    }

    @media screen and (max-width: 450px) {     
        .real_again_img  img{width: 370px; }         
    }

    @media screen and (max-width: 430px) {
        .real_again_img  img{ width: 300px; }
        .mobile_video {display: block;}      
    }

 @media screen and (max-width: 310px) {    
        .real_again_img  img{ width: 250px; }         
    }
/* ===============================================
windows height recponsive css =============================== */
@media screen and (max-height: 932px) and (min-height: 400px){  
    .text_area {
        bottom: 50px !important;
        -webkit-bottom: 50px !important;
        -moz-bottom: 50px !important;
        padding-top: 10px;
    }
       
  }

@media screen and (max-height: 440px) {       
.real_again_img {height: 65%;}     
.contact_link img {width: 50px; height: 50px;}
.contact_link a {padding: 0px;}        
} 
@media screen and (max-height: 401px) {       
.text_area {bottom: 0px !important; padding-top: 20px;} 
}