/*================================================
    1.  GENERAL & BASIC STYLES
    2.  HERO (TITLE) SECTION
    3.  LOGIN FORM SECTION
    4.  BUTTONS
    5.  UTILITIES & RESPONSIVE
================================================*/

/* --- 1. GENERAL & BASIC STYLES --- */
@import url("https://fonts.googleapis.com/css?family=Josefin+Sans:200,300,400,500,600,700|Roboto:100,300,400,500,700&display=swap");

body {
    font-family: "Roboto", sans-serif;
    font-weight: normal;
    font-style: normal;
}

h1, h2, h3, h4, h5, h6 {
    font-family: "Josefin Sans", sans-serif;
    color: #0b1c39;
    margin-top: 0px;
    font-style: normal;
    font-weight: 500;
    text-transform: normal;
}

p {
    font-family: "Roboto", sans-serif;
    color: #777;
    font-size: 16px;
    line-height: 30px;
    margin-bottom: 15px;
    font-weight: normal;
}

a {
    text-decoration: none;
    transition: all .3s ease-out 0s;
}

a:hover {
    color: #ff2020;
    text-decoration: none;
}

ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

img {
    max-width: 100%;
}

.container {
    max-width: 1170px;
}
.container-fluid {
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}

.section_padding {
    padding: 140px 0px;
}

.form-control {
    border-radius: 0;
}

.form-control:focus {
    color: #495057;
    background-color: #fff;
    border-color: #ddd;
    outline: 0;
    box-shadow: none;
}


/* --- 2. HERO (TITLE) SECTION --- */
.slider-area {
    overflow: hidden;
}

.slider-height2 {
    background-image: url(../img/hero/about_hero.png);
    min-height: 500px;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}

.hero-cap h2 {
    font-size: 70px;
    font-weight: 700;
    text-transform: capitalize;
}

/* --- 3. LOGIN FORM SECTION --- */
.login_part {
    padding: 100px 0;
}

.login_part_text,
.login_part_form {
    height: 600px;
    display: table;
}

.login_part_text {
    background-image: linear-gradient(90deg, #B08EAD 0%, #4B3049 64%, #B08EAD 100%);
    background-size: 200% auto;
    padding: 80px 70px;
}

.login_part_text_iner,
.login_part_form_iner {
    display: table-cell;
    vertical-align: middle;
}

.login_part_text h2 {
    font-size: 24px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 17px;
}

.login_part_text p {
    color: #fff;
}

.login_part_form {
    padding: 80px 70px;
}

.login_part_form h3 {
    font-size: 26px;
    font-weight: 700;
    margin-bottom: 80px;
}

.login_part .contact_form .form-group {
    margin-bottom: 20px;
}

.p_star input {
    background: #fff;
    border: none;
    border-bottom: 1px solid #e5e6e9;
    border-radius: 0;
    padding-left: 0;
}

.login_part .creat_account {
    margin-top: 11px;
}

.login_part .creat_account label {
    color: #777;
    font-size: 14px;
    margin-bottom: 0;
    margin-left: 10px;
}

.login_part .lost_pass {
    color: #777;
    text-align: right;
    float: right;
    text-transform: capitalize;
}

/* --- 4. BUTTONS --- */
.btn_3 {
    display: inline-block;
    padding: 18px 36px;
    border-radius: 5px;
    background-color: transparent;
    border: 1px solid #2577fd;
    font-size: 15px;
    font-weight: 400;
    color: #2577fd;
    text-transform: uppercase;
    transition: .5s;
}

.btn_3:hover {
    background-color: #2577fd;
    color: #fff !important;
}

.login_part .login_part_text .btn_3 {
    border: 1px solid #fff;
    color: #fff !important;
    margin-top: 28px;
}

.login_part .login_part_text .btn_3:hover {
    background-color: #fff;
    color: #ff2020 !important;
}

.login_part .form-group .btn_3 {
    display: block;
    width: 100%;
    margin: 30px 0 17px;
}


/* --- 5. UTILITIES & RESPONSIVE --- */
.text-center { text-align: center !important; }
.d-flex { display: flex !important; }
.align-items-center { align-items: center !important; }
.justify-content-between { justify-content: space-between !important; }
.mb-50 { margin-bottom: 50px; }
.mb-30 { margin-bottom: 30px; }
.row {
    display: flex;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px;
}
.col-md-12, .col-lg-6, .col-xl-12 {
    position: relative;
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
}
@media (min-width: 768px) {
    .col-md-6 { flex: 0 0 50%; max-width: 50%; }
    .col-md-12 { flex: 0 0 100%; max-width: 100%; }
}
@media (min-width: 992px) {
    .col-lg-6 { flex: 0 0 50%; max-width: 50%; }
    .d-lg-block { display: block !important; }
    .d-lg-none { display: none !important; }
}
@media (max-width: 991px) {
    .login_part_text, .login_part_form { padding: 30px; height: auto; }
    .login_part .login_part_form h3 { margin-bottom: 20px; }
}
@media (max-width: 767px) {
    .slider-height2 { min-height: 260px; }
    .hero-cap h2 { font-size: 35px; }
    .section_padding { padding: 70px 0px; }
    .login_part .row > div { margin-bottom: 30px; }
}