/* @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200&display=swap');  */
 @import url('https://fonts.googleapis.com/css2?family=Jost:wght@400;500;700&display=swap');

 * {
     padding: 0;
     margin: 0;
 }

 /* body {
     position: absolute;
     bottom: 0;
     width: 0;
     height: 0;
     border-style: solid;
     border-width: 0 0 100px 200px;
     border-color: transparent transparent #e95f55 transparent;
     z-index: 2;
 } */

 .container {
    font-family:'Courier New', Courier, monospace;
     min-height: 100vh;
     display: flex;
     justify-content: center;
     align-items: center;
     background-color: #eee;
     background-image: url('logo.png');
     background-repeat: no-repeat;
     background-position: center;
     background-size: contain;
 }

 .container .card {
     height: 600px;
     width: 900px;
     background-color: #fff;
     position: relative;
     box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
     font-family: 'Poppins', sans-serif;
     border-radius: 20px;
 }

 .sp {
     display: inline-block;
     font-size: 1px;
     font-weight: 100;
     font-size: 100px;
     background-color: #0075ff;
 }

 .container .card .form {
     width: 100%;
     height: 100%;
     display: flex;
     /* border:2px solid red; */
 }

 .container .card .left-side {
     width: 35%;
     /* background-color:#304767; */
     background-color: #3eb2c4;
     height: 100%;
     border-top-left-radius: 20px;
     border-bottom-left-radius: 20px;
     padding: 20px 30px;
     box-sizing: border-box;
     /* border:2px solid red; */

 }

 /*left-side-start*/
 .left-heading h3 {
     color: #fff;
     /* border:2px solid red; */

 }

 .steps-content {
     margin-top: 30px;
     color: #fff;
 }

 .steps-content p {
     font-size: 12px;
     margin-top: 15px;
 }

 .progress-bar {
     list-style: none;
     /*color:#fff;*/
     margin-top: 30px;
     font-size: 13px;
     font-weight: 700;
     counter-reset: container 0;
 }

 .progress-bar li {
     position: relative;
     margin-left: 40px;
     margin-top: 50px;
     counter-increment: container 1;
     color: #4f6581;
 }

 .progress-bar li::before {
     content: counter(container);
     line-height: 25px;
     text-align: center;
     position: absolute;
     height: 25px;
     width: 25px;
     border: 1px solid #4f6581;
     border-radius: 50%;
     left: -40px;
     top: -5px;
     z-index: 10;
     background-color: #304767;
 }
 .image{
    align-items: left;
    margin-top: 6rem;
 }
 .image img{
    width: 18rem;
 }

 /* body {
	background: #1d3e9b;
} */

 .letter-image {
     position: absolute;
     top: 50%;
     left: 28%;
     width: 200px;
     height: 200px;
     -webkit-transform: translate(-50%, -50%);
     -moz-transform: translate(-50%, -50%);
     transform: translate(-50%, -50%);
     cursor: pointer;
 }

 .animated-mail {
     position: absolute;
     height: 150px;
     width: 200px;
     -webkit-transition: .4s;
     -moz-transition: .4s;
     transition: .4s;
 }

 .top-fold {
     position: absolute;
     top: 50px;
     width: 0;
     height: 0;
     border-style: solid;
     border-width: 50px 100px 0 100px;
     -webkit-transform-origin: 50% 0%;
     -webkit-transition: transform .4s .4s, z-index .2s .4s;
     -moz-transform-origin: 50% 0%;
     -moz-transition: transform .4s .4s, z-index .2s .4s;
     transform-origin: 50% 0%;
     transition: transform .4s .4s, z-index .2s .4s;
     border-color: #cf4a43 tran;
     z-index: 2;
 }

 .back-fold {
     position: absolute;
     bottom: 0;
     width: 200px;
     height: 100px;
     background: #000000;
     z-index: 0;
 }

 .left-fold {
     position: absolute;
     bottom: 0;
     width: 0;
     height: 0;
     border-style: solid;
     border-width: 50px 0 50px 100px;
     border-color: transparent transparent transparent #e15349;
     z-index: 2;
 }

 .letter {
     left: 20px;
     bottom: 0px;
     position: absolute;
     width: 160px;
     height: 60px;
     background: rgb(179, 56, 56);
     z-index: 1;
     overflow: hidden;
     -webkit-transition: .4s .2s;
     -moz-transition: .4s .2s;
     transition: .4s .2s;
 }

 .letter-border {
     height: 10px;
     width: 100%;
     background: repeating-linear-gradient(-45deg,
             #cb5a5e,
             #cb5a5e 8px,
             transparent 8px,
             transparent 18px);
 }

 .letter-title {
     margin-top: 10px;
     margin-left: 5px;
     height: 10px;
     width: 40%;
     background: #cb5a5e;
 }

 .letter-context {
     margin-top: 10px;
     margin-left: 5px;
     height: 10px;
     width: 20%;
     background: #cb5a5e;
 }

 .letter-stamp {
     margin-top: 30px;
     margin-left: 120px;
     border-radius: 100%;
     height: 30px;
     width: 30px;
     background: #cb5a5e;
     opacity: 0.3;
 }


 .shadow {
     position: absolute;
     top: 200px;
     left: -103%;
     width: 400px;
     height: 30px;
     transition: .4s;
     transform: translateX(-50%);
     -webkit-transition: .4s;
     -webkit-transform: translateX(-50%);
     -moz-transition: .4s;
     -moz-transform: translateX(-50%);

     border-radius: 100%;
     background: radial-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.0), rgba(0, 0, 0, 0.0));
 }

 .letter-image:hover .animated-mail {
     transform: translateY(50px);
     -webkit-transform: translateY(50px);
     -moz-transform: translateY(50px);
 }


 .animated-mail .top-fold {
     transition: transform .4s, z-index .2s;
     transform: rotateX(180deg);
     -webkit-transition: transform .4s, z-index .2s;
     -webkit-transform: rotateX(180deg);
     -moz-transition: transform .4s, z-index .2s;
     -moz-transform: rotateX(180deg);
     z-index: 0;
 }

 .animated-mail .letter {
     height: 180px;
 }

 .shadow {
     width: 250px;
 }

 .progress-bar li::after {
     content: '';
     position: absolute;
     height: 90px;
     width: 2px;
     background-color: #4f6581;
     z-index: 1;
     left: -27px;
     top: -70px;
 }

 .progress-bar li.active::after {
     background-color: #fff;
 }

 .progress-bar li.active:hover {
     color: #000;
 }

 .progress-bar li:first-child:after {
     display: none;
 }

 /*.progress-bar li:last-child:after{*/
 /*  display:none;  */
 /*}*/
 .progress-bar li.active::before {
     color: #fff;
     border: 1px solid #fff;
 }

 .progress-bar li.active {
     color: #fff;
 }

 .d-none {
     display: none;
 }


 #user_dob {
     width: 100%;
     height: 40px;
     border: none;
     outline: 0;
     border-radius: 5px;
     border: 1px solid #cbced4;
     gap: 20px;
     box-sizing: border-box;
     padding: 0px 10px;
 }

 .s {
     position: absolute;
     left: 50%;
     top: 50%;
     font-size: 12px;
     transform: translate(-25%, -25%);
     /* background-color: #0075ff; */
 }

 .warning-text {
     color: red;
     font-size: smaller;

 }

 #zip {
     padding: 0;
     margin: 0;
     height: 30px;
     width: 100%;
 }




 /*left-side-end*/
 .container .card .right-side {
     width: 65%;
     background-color: #fff;
     height: 100%;
     border-radius: 20px;

     /* border:2px solid red; */
 }

 /*right-side-start*/
 .main {
     display: none;
 }

 .active {
     display: block;
     margin: 2px;
 }

 .main {
     padding: 40px;
 }

 .main small {
     display: flex;
     justify-content: center;
     align-items: center;
     margin-top: 2px;
     height: 30px;
     width: 30px;
     background-color: #ccc;
     border-radius: 50%;
     color: yellow;
     font-size: 19px;
 }

 .container .card .right-side img{
    margin-left: 200px;
 }
 .text {
     margin-top: 20px;
 }

 .congrats {
     text-align: center;
 }

 .text p {
     margin-top: 10px;
     font-size: 13px;
     font-weight: 700;
     color: #cbced4;
 }

 .input-text {
     margin: 30px 0;
     display: flex;
     gap: 20px;
 }

 .input-text .input-div {
     width: 100%;
     position: relative;

 }



 input[type="text"] {
     width: 100%;
     height: 40px;
     border: none;
     outline: 0;
     border-radius: 5px;
     border: 1px solid #cbced4;
     gap: 20px;
     box-sizing: border-box;
     padding: 0px 10px;
 }

 select {
     width: 100%;
     height: 40px;
     border: none;
     outline: 0;
     border-radius: 5px;
     border: 1px solid #cbced4;
     gap: 20px;
     box-sizing: border-box;
     padding: 0px 10px;
 }

 .input-text .input-div span {
     position: absolute;
     top: 10px;
     left: 10px;
     font-size: 14px;
     transition: all 0.5s;
 }

 .input-div input:focus~span,
 .input-div input:valid~span {
     top: -15px;
     left: 6px;
     font-size: 10px;
     font-weight: 600;
 }

 .input-div span {
     top: -15px;
     left: 6px;
     font-size: 10px;
 }

 .buttons button {
     height: 40px;
     width: 100px;
     border: none;
     border-radius: 5px;
     background-color: #0075ff;
     font-size: 12px;
     color: #fff;
     cursor: pointer;
 }

 .button_space {
     display: flex;
     gap: 20px;

 }

 .button_space button:nth-child(1) {
     background-color: #fff;
     color: #000;
     border: 1px solid#000;
 }

 .user_card {
     margin-top: 20px;
     margin-bottom: 40px;
     height: 200px;
     width: 100%;
     border: 1px solid #c7d3d9;
     border-radius: 10px;
     display: flex;
     overflow: hidden;
     position: relative;
     box-sizing: border-box;
 }

 .user_card span {
     height: 80px;
     width: 100%;
     background-color: #dfeeff;
 }

 .circle {
     position: absolute;
     top: 40px;
     left: 60px;
 }

 .circle span {
     height: 70px;
     width: 70px;
     background-color: #fff;
     display: flex;
     justify-content: center;
     align-items: center;
     border: 2px solid #fff;
     border-radius: 50%;
 }

 .circle span img {
     width: 100%;
     height: 100%;
     border-radius: 50%;
     object-fit: cover;
 }

 .social {
     display: flex;
     position: absolute;
     top: 100px;
     right: 10px;
 }

 .social span {
     height: 30px;
     width: 30px;
     border-radius: 7px;
     background-color: #fff;
     border: 1px solid #cbd6dc;
     display: flex;
     justify-content: center;
     align-items: center;
     margin-left: 10px;
     color: #cbd6dc;

 }

 .social span i {
     cursor: pointer;
 }

 .heart {
     color: red !important;
 }

 .share {
     color: red !important;
 }

 .user_name {
     position: absolute;
     top: 110px;
     margin: 10px;
     padding: 0 30px;
     display: flex;
     flex-direction: column;
     width: 100%;

 }

 .user_name h3 {
     color: #4c5b68;
 }

 .detail {
     /*margin-top:10px;*/
     display: flex;
     justify-content: space-between;
     margin-right: 50px;
 }

 .detail p {
     font-size: 12px;
     font-weight: 700;

 }

 .detail p a {
     text-decoration: none;
     color: blue;
 }

 .add {
     flex-direction: column;
 }


 .btn {
     /* border: solid 2px black; */
     font-family: 20px;
     width: 100px;
     color: black;
     background-color: #3eb2c4;
     padding: 2px 2px;
     margin-top: 30px;
     font-weight: 100;
     border-radius: 20px;
 }

 .des {
     margin-top: 3px;
     border: solid black 2px;
     width: 194px;
 }

 .uno {
     padding-left: 21px;
     margin-left: 5px;
     width: left 100px;
 }

 .checkmark__circle {
     stroke-dasharray: 166;
     stroke-dashoffset: 166;
     stroke-width: 2;
     stroke-miterlimit: 10;
     stroke: #7ac142;
     fill: none;
     animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
 }

 .checkmark {
     width: 56px;
     height: 56px;
     border-radius: 50%;
     display: block;
     stroke-width: 2;
     stroke: #fff;
     stroke-miterlimit: 10;
     margin: 10% auto;
     box-shadow: inset 0px 0px 0px #7ac142;
     animation: fill .4s ease-in-out .4s forwards, scale .3s ease-in-out .9s both;
 }

 .checkmark__check {
     transform-origin: 50% 50%;
     stroke-dasharray: 48;
     stroke-dashoffset: 48;
     animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards;
 }

 @keyframes stroke {
     100% {
         stroke-dashoffset: 0;
     }
 }

 @keyframes scale {

     0%,
     100% {
         transform: none;
     }

     50% {
         transform: scale3d(1.1, 1.1, 1);
     }
 }

 @keyframes fill {
     100% {
         box-shadow: inset 0px 0px 0px 30px #7ac142;
     }
 }


 .warning {
     border: 1px solid red !important;
 }


 /*right-side-end*/
 @media (max-width:800px) {
     .container {
         height: scroll;
     }

     .container .card {
         max-width: 400px;
         height: auto !important;
         margin: 30px 0;
     }

     .container .card .right-side {
         width: 100%;

     }
     .container .card .right-side img{
        margin-left: 99px;
     }
     .container .card .right-side form .form-label{
        size: 8px;
     }

     .input-text {
         display: block;
     }

     .input-text .input-div {
         margin-top: 20px;

     }

     .container .card .left-side {

         display: none;
     }

     .btn {
         width: 30%;
         margin-right: 3.0rem;
     }

     .uno {
         margin-left: -15px !important;
         width: auto;

     }

     .des {
         width: 110px;

     }
 }