body{
    height: 100% !important;
    overflow:auto;
    }
    .highlight-phone {
        color: #313437;
        background-color: #eef4f7;
        padding: 50px 0 55px;
        overflow: hidden;
        position: absolute;
        top: 50px
    }
    
    .highlight-phone p {
        color: #7d8285
    }
    
    .highlight-phone h2 {
        font-weight: 700;
        margin-bottom: 35px;
        line-height: 1.5;
        padding-top: 0;
        margin-top: 0;
        color: inherit
    }
    
    .highlight-phone .intro {
        font-size: 18px;
        max-width: 500px;
        line-height: 1.5
    }
    
    @media (max-width:767px) {
        .highlight-phone {
            text-align: center
        }
        .highlight-phone .intro {
            max-width: none
        }
    }
    
    .highlight-phone .intro p {
        margin-bottom: 35px
    }
    
    .highlight-phone .intro .btn {
        padding: 16px 32px;
        border: none;
        background: 0 0;
        box-shadow: none;
        text-shadow: none;
        opacity: .9;
        text-transform: uppercase;
        font-weight: 700;
        font-size: 13px;
        letter-spacing: .4px;
        line-height: 1
    }
    
    .highlight-phone .intro .btn:hover {
        opacity: 1
    }
    
    .highlight-phone .intro .btn:active,
    .login-clean form .btn-primary:active {
        transform: translateY(1px)
    }
    
    .highlight-phone .intro .btn-primary {
        background-color: #055ada;
        color: #fff
    }
    
    .highlight-phone .phone-mockup {
        position: relative;
        max-width: 260px;
        margin-top: -30px;
        margin-bottom: -230px;
        transform: rotate(-15deg)
    }
    
    .highlight-phone .phone-mockup img.device {
        width: 100%;
        height: auto
    }
    
    .highlight-phone .phone-mockup .screen {
        position: absolute;
        width: 94%;
        height: 91%;
        top: 1%;
        left: 3%;
        border: 1px solid #444;
        border-radius: 20px;
        overflow: hidden;
        background: url(../../assets/img/screen-content-phone.jpg) center/cover;
        z-index: -1
    }
    
    .highlight-phone .phone-mockup .screen:before {
        content: '';
        background-color: #fff;
        position: absolute;
        width: 70%;
        height: 140%;
        top: -6%;
        right: -60%;
        transform: rotate(-19deg);
        opacity: .2
    }
    
    .login-clean {
        background: #f1f7fc;
      
    }
    
    .login-clean form {
        /* max-width: 320px; */
        width: 90%;
        margin: 0 auto;
        background-color: #fff;
        padding: 40px;
        border-radius: 4px;
        color: #505e6c;
        box-shadow: 1px 1px 5px rgba(0, 0, 0, .1)
    }
    
    .login-clean .illustration {
        text-align: center;
        padding: 0 0 20px;
        font-size: 100px;
        color: #f4476b
    }
    
    .login-clean form .form-control {
        background: #f7f9fc;
        border: none;
        border-bottom: 1px solid #dfe7f1;
        border-radius: 0;
        box-shadow: none;
        outline: 0;
        color: inherit;
        text-indent: 8px;
        height: 42px
    }
    
    .login-clean form .btn-primary {
        background: #0b7fea;
        border: none;
        border-radius: 4px;
        padding: 11px;
        box-shadow: none;
        margin-top: 26px;
        text-shadow: none;
        outline: 0!important
    }
    
    .login-clean form .btn-primary:active,
    .login-clean form .btn-primary:hover {
        background: #eb3b60
    }
    
    .login-clean form .forgot {
        display: block;
        text-align: center;
        font-size: 12px;
        color: #6f7a85;
        opacity: .9;
        text-decoration: none
    }
    
    .login-clean form .forgot:active,
    .login-clean form .forgot:hover {
        opacity: 1;
        text-decoration: none
    }
    
  
    #divcontainerconten {
        width: 849px;
       
        height: 800px;
        background: hsla(33, 100%, 53%, 1);

        background: linear-gradient(90deg, hsla(33, 100%, 53%, 1) 0%, hsla(58, 100%, 68%, 1) 100%);
        
        background: -moz-linear-gradient(90deg, hsla(33, 100%, 53%, 1) 0%, hsla(58, 100%, 68%, 1) 100%);
        
        background: -webkit-linear-gradient(90deg, hsla(33, 100%, 53%, 1) 0%, hsla(58, 100%, 68%, 1) 100%);
    }

  
   
    @media screen and (max-width:1300px) {
      
        #divcontainerconten {
            width: 849px;
            height: 800px;
            background: hsla(33, 100%, 53%, 1);

background: linear-gradient(90deg, hsla(33, 100%, 53%, 1) 0%, hsla(58, 100%, 68%, 1) 100%);

background: -moz-linear-gradient(90deg, hsla(33, 100%, 53%, 1) 0%, hsla(58, 100%, 68%, 1) 100%);

background: -webkit-linear-gradient(90deg, hsla(33, 100%, 53%, 1) 0%, hsla(58, 100%, 68%, 1) 100%);
        }
    }
    
    
    @media screen and (max-width:1200px) {
        #divcontainerconten {
            width: 100%;
            height: 800px !important;
            background: hsla(33, 100%, 53%, 1);

            background: linear-gradient(90deg, hsla(33, 100%, 53%, 1) 0%, hsla(58, 100%, 68%, 1) 100%);
            
            background: -moz-linear-gradient(90deg, hsla(33, 100%, 53%, 1) 0%, hsla(58, 100%, 68%, 1) 100%);
            
            background: -webkit-linear-gradient(90deg, hsla(33, 100%, 53%, 1) 0%, hsla(58, 100%, 68%, 1) 100%);
        }
        
    }
    
    @media screen and (max-width:700px) {
        #divcontainerconten {
            width: 849px;
            height: 800px;
            background: hsla(33, 100%, 53%, 1);

            background: linear-gradient(90deg, hsla(33, 100%, 53%, 1) 0%, hsla(58, 100%, 68%, 1) 100%);
            
            background: -moz-linear-gradient(90deg, hsla(33, 100%, 53%, 1) 0%, hsla(58, 100%, 68%, 1) 100%);
            
            background: -webkit-linear-gradient(90deg, hsla(33, 100%, 53%, 1) 0%, hsla(58, 100%, 68%, 1) 100%);
        }
    }

    @media screen and (orientation: portrait) {
        #divcontainerconten {
         
            height: 1300px  !important;
        }
        #conentp {
            position: absolute;
            top: 350px !important;
            left: 50px;
            font-family: inherit;
            font-weight: normal;
            font-size: 28px !important;
        }
        #loginh{
            padding-top: 81px !important;
        }
        .login-clean{
            height: 910px !important;
        }
        #form-IP{
            padding-top: 81px !important;
        }
      }

    
   
    
    #heading {
        position: absolute;
        font-size: 20px;
        left: 50px;
      color: #000;
        top: 26px
    }
    
    #contentcontainer {
        position: absolute;
        top: 100px
    }
    
    
    
    #headingcontent {
       
        position: absolute;
        top: 200px;
        left: 50px;
        font-size: 30px
    }
    
    #headingcontentofsaryam {
        position: absolute;
        top: 200px;
        left: 50px;
        font-size: 30px
    }
    
    #headingcontentsaryam {
        
        position: absolute;
        top: 100px;
        left: 50px;
        font-size: 50px
    }
  
    
    
    .content {
       
        position: absolute;
        top: 350px;
        left: 50px;
        font-size: 15px
    }
    
    #content {
        color: #fff;
        padding-top: 300px
    }
    
    #paragrah {
        width: 849px;
        position: absolute;
        top: 200px
    }
    
    #conentp {
        position: absolute;
        top: 250px;
        left: 50px;
        
        font-family: inherit;
        font-weight: normal;
        font-size: 18px;
    }
    
    #loginpage {
        position: absolute;
        right: 31px;
        color: #000;
        top: 200px
    }
    #loginh {
       
        color: #000;
      padding-bottom: 20px;
        padding-left: 30px;
    }
    /* @media (min-width:992px) {
        #loginh {
            position: absolute;
            color: #000;
            top: 18px;
            left: 30px
        }
    }
    @media (min-width:1024px) {
        #loginh {
            position: absolute;
            color: #000;
           
            left: 30px
        } 
    } */
    @media (min-width:1200px) {
        #loginform {
            position: absolute;
            right: 25px;
            top: 120px
        }
    }
    
    #copy {
        font-size: 13px;
        text-align: center;
        padding-top: 20px;
    }
    
    @media screen and (max-width: 700px) {
        .login-clean {
            width: 800px;
            height: 500px;
            position: absolute;
        }
        #copy {
            font-size: 20px;
            position: absolute;
            left: 25%;
        }
        #conentp {
            position: absolute;
            top: 300px;
            font-size: 20px;
            width: 800px;
        }
    }
    
    @media screen and (max-width:700px) {
        #logo {
            width: 80px;
            height: 80px;
        }
    }
    
    #logo {
        width: 40px;
        height: 40px;
        position: absolute;
        left: 0;
        top: 20px
    }