body,html{
    font-family: "Oswald", system-ui;

}




header{
    padding-top:15px;
    padding-bottom:15px;
    border-bottom:1px solid #1C4158;
    position: fixed;
    top:0;
    left:0;
    width:100%;
    background-color:#fff;
    z-index:10;
    
}

.logo-container{
    width:150px;
    margin-left:30px;
}

.logo-container img{
    width:100%;
}

.main-section{
    height:100vh;
    display: flex;
}

.blu-side{
    width:50%;
    background-color:#0B415A;
    height:100%;
    overflow: hidden;
    position: relative;
}

.white-side{
    width:50%;
    background-color:#fff;
    height:100%;
    overflow: hidden;
}

.letter{
    position: absolute;
    right:-10%;
    width:auto;
    height:80%;
    top:0;
    
}

.blu-side p{
    color:#fff;
    font-size:15px;
    margin-bottom:0;
    font-weight:300;
}

.blu-side h3{
    color:#F39149;
    font-size:15px;
    font-weight:300;
}

.text-container{
    height:80%;
    display: flex;
    align-items: flex-end;
    padding-left:30px;
    position: relative;
    z-index:5;
}

.form-container{
    height:80%;
    width:70%;
    margin:0 auto;
    display: flex;
    align-items: flex-end;
}

.form-container h2{
    color:#F39149;
    font-size:51px;
    font-weight:300;
}

.form-container div{
    width:100%;
}

.form-control{
    border:none;
    border-bottom:1px solid #1C4158;
    border-radius:0;
    text-transform: uppercase;
    color:#1C4158;
    
}

.error-text{
    color:red;
    font-size:11px;
    display: none;
}

.success-text{
    color:#F39149;
    display: none;
}



.form-control.error{
    border-bottom:1px solid red;
}

.form-control::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color:    #1C4158;
}
.form-control:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
   color:    #1C4158;
   opacity:  1;
}
.form-control::-moz-placeholder { /* Mozilla Firefox 19+ */
   color:    #1C4158;
   opacity:  1;
}
.form-control:-ms-input-placeholder { /* Internet Explorer 10-11 */
   color:    #1C4158;
}
.form-control::-ms-input-placeholder { /* Microsoft Edge */
   color:    #1C4158;
}

.form-control::placeholder { /* Most modern browsers support this now. */
   color:    #1C4158;
}

.form-control:focus {
    color:#1C4158;
    background-color:transparent;
    border-bottom:1px solid #1C4158;
    outline: 0;
    box-shadow:none;
}

textarea{
    height:100px;
}

.btn-send{
    background-color:transparent;
    border:none;
    border-bottom:3px solid #1C4158;
    font-size:16px;
    text-transform: uppercase;
    color:#1C4158;
}


.btn-container{
    border-bottom:1px solid #1C4158;
    text-align: right;
}

label{
    color:#1C4158;
    font-size:12px;
}

.form-check-input:focus {
    border-color: inherit;
    outline: 0;
    box-shadow: none;
}

.form-check-input[type=checkbox] {
    border-radius: 0;
}

.form-check-input:checked{
   background-color: #F39149!important;
   border: 0;
}


@media only screen and (max-width: 992px) {
    
.form-container {
    height: 80%;
    width: 90%;
    margin: 0 auto;
    display: flex;
    align-items: flex-end;
}
    
    .blu-side{
        width:60%;
    }
    
    .white-side{
        width:40%;
    }
    
}
    




@media only screen and (max-width: 767px) {
    
    
    .main-section{
        display: block;
    }
  
    .blu-side{
    width:100%;
    background-color:#0B415A;
    height:100vh;
    overflow: hidden;
    position: relative;
}

.white-side{
    width:100%;
    background-color:#fff;
    height:100vh;
    overflow: hidden;
    position: fixed;
    z-index:9;
    top:0;
    transform: translateY(100%);
    visibility: hidden;
    transition: visibility .3s cubic-bezier(.645, .045, .355, 1), transform .3s cubic-bezier(.645, .045, .355, 1);
    right:0;
}
    
    .white-side.open{
        opacity: 1;
        visibility: visible;
        transform: none;
        width:100%;

    }
    
    .letter {
    position: absolute;
    right: -20%;
    width: auto;
    height: 80%;
    top: 0;
}
    
    .text-container {
    height: 100%;
    display: flex;
    align-items: center;
    padding-left: 15px;
    position: relative;
    z-index: 5;
}
    
    .blu-side p.contact-us{
        text-transform: uppercase;
        text-decoration: underline;
        color:#F39149;
        text-align: center;
        position: fixed;
        bottom:50px;
        right:15px;
        font-size:15px;
        z-index:8;
        cursor: pointer;
    }
    
    .white-side p.close-us{
        text-transform: uppercase;
        text-decoration: underline;
        color:#F39149;
        text-align: start;
        font-size:15px;
        z-index:8;
        cursor: pointer;
    }
    
    .form-container{
        height:100%;
        display: flex;
    align-items: center;
        width:85%;
    }
    
    .logo-container{
        margin-left:15px;
    }
    
}

@media only screen and (device-width: 820px) and (device-height: 1180px) and (orientation : portrait) {
    
       .text-container {
    height: 80%;
    display: flex;
    align-items: flex-start;
    padding-left: 30px;
    position: relative;
    z-index: 5;
    padding-top:200px;
}
    
    .letter {
    position: absolute;
    right: -30%;
    width: auto;
    height: 80%;
    top: 0;
}
    
        .form-container {
        height: 100%;
        width: 90%;
        margin: 0 auto;
        display: flex;
        align-items:center;
    }
  
    
}


@media only screen and (device-width: 1024px) and (device-height: 1366px) and (orientation : portrait) {
    
           .text-container {
    height: 80%;
    display: flex;
    align-items: flex-start;
    padding-left: 30px;
    position: relative;
    z-index: 5;
    padding-top:200px;
}
    
    .letter {
    position: absolute;
    right: -30%;
    width: auto;
    height: 80%;
    top: 0;
}
    
        .form-container {
        height: 100%;
        width: 90%;
        margin: 0 auto;
        display: flex;
        align-items:center;
    }
    
}

@media only screen and (device-width: 768px) and (device-height: 1024px) and (orientation : portrait) {
    
           .text-container {
    height: 80%;
    display: flex;
    align-items: flex-start;
    padding-left: 30px;
    position: relative;
    z-index: 5;
    padding-top:200px;
}
    
    .letter {
    position: absolute;
    right: -30%;
    width: auto;
    height: 80%;
    top: 0;
}
    
        .form-container {
        height: 100%;
        width: 90%;
        margin: 0 auto;
        display: flex;
        align-items:center;
    }
    
}

@media only screen and (max-width: 950px) and (min-height: 1024px) {
               .text-container {
    height: 80%;
    display: flex;
    align-items: flex-start;
    padding-left: 30px;
    position: relative;
    z-index: 5;
    padding-top:200px;
}
    
    .letter {
    position: absolute;
    right: -30%;
    width: auto;
    height: 80%;
    top: 0;
}
    
        .form-container {
        height: 100%;
        width: 90%;
        margin: 0 auto;
        display: flex;
        align-items:center;
    }
}