@font-face {
    font-family: poppins;
    src: url(./fonts/poppins/Poppins-Regular.ttf);
}

@font-face {
    font-family: domine;
    src: url(./fonts/domine/Domine-VariableFont_wght.ttf);
}

@font-face {
    font-family: ginta;
    src: url(./fonts/ginta/Ginta\ Font.otf);
}

@font-face {
    font-family: metropolis;
    src: url(./fonts/metropolis/Metropolis-Regular.otf);
}


.bg-mainHeader {
    background-image: url(../images/main-bg.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    /*height: 700px;*/
    width: 100%;
    /*overflow: hidden;*/
    position: relative;
    padding-bottom: 50px;
}

.header-img {
    background-image: url(../images/couple.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    position: absolute;
    width: 50%;
    height: 494px;
    bottom: -50px;
    right: 0%;
    top: 206px;
}

.header-heading-1 {
    font-family: poppins;
    font-size: 24px;
    color: #fff;
    width: 40px;
    transform: rotate(-60deg);
}

.second-main-heading {
    font-family: ginta;
    font-size: 48px;
    color: #ffff00;
    margin-left: 60px;
    margin-top: -60px
}

.header-text {
    margin-top: -285px;
    zoom: 1.2;
    position: absolute;
}

.third-main-heading {
    font-family: domine;
    font-size: 48px;
    font-weight: 600;
    color: #fff;
}

.login-form {
    position: relative;
    display: flex;

    align-items: stretch;
    width: 100%;
}

.top-from {
    padding-top: 50px;
    padding-bottom: 50px;
}

.btn-grad {
    background-image: linear-gradient(to right, #af2779 0%, #da0a75 50%, #af2779 100%)
}

.btn-grad {
    border: none;
    margin: 10px;
    padding: 12px 32px;
    text-align: center;
    text-transform: uppercase;
    transition: 0.5s;
    background-size: 200% auto;
    color: white;
    font-family: metropolis;
    font-size: 16px;
    box-shadow: 0 0 20px rgb(0, 0, 0);
    border-radius: 50px;
}

.btn-grad:hover {
    background-position: right center;
    /* change the direction of the change here */
    color: #fff;
    text-decoration: none;
}

.left-50 {
    margin-left: 70px;
}

.custom-navbar {
    background-image: linear-gradient(to right, #af2779 0%, #da0a75 50%, #af2779 100%);
    position: relative;
    /*top: 140px*/
}

.logo img {
    position: absolute;
    top: -10px;
    left: 100px;
    height: 300px;
    z-index: 1;
}

.nav-link {
    font-family: domine;
    font-weight: 500;
    color: #fff !important
}

.nav-link:hover {
    color: #ffff00 !important
}

.active .nav-link {
    color: #ffff00 !important
}

.navbar-nav {
    z-index: 2;
    margin-left: auto;
    padding-right: 50px;
}

.login-container {
    position: absolute;
    right: 20px;
    top: 50px
}

.form-control-custom {
    border-radius: 15px;
    background-color: #e8e8e8d2;
    width: 120px !important;
}

.form-control-custom:focus {
    border-radius: 15px;
    background-color: #e8e8e8d2;
    width: 120px !important;
}

.input-group-text {
    height: 50px;
    width: 60px;
    display: flex;
    align-items: center;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    text-align: center;
    white-space: nowrap;
    background-color: #c4c8cb;
    border: none;
    border-radius: 15px;
    justify-content: center;
}

.btn-login-header {
    font-family: domine;
    font-family: 11.08pt;
    font-weight: 400;
    color: #fff;
    background-color: #af2779;
    border: 0px;
    padding: 12px 24px;
    border-radius: 15px;
    margin-left: 7px;
}

.btn-forgot {
    font-family: domine;
    color: #b3b3b3;
    text-decoration: none;
    margin-left: 65px;
    margin-top: 10px;
    transition: 0.5s all ease-in-out;
}

.btn-forgot:hover {
    color: #212529;
}

.section-bg {
    padding: 50px 0px;
    background-image: url(../images/main-background.png);
    background-position: center;
    background-attachment: fixed;
    background-size: cover;
}

.quick-search-container {
    background-image: linear-gradient(to right, #af2779 0%, #da0a75 50%, #af2779 100%);
    padding: 50px;
}

.quick-search-col {
    background-image: url(../images/quick-search.png);
    background-size: contain;
    background-repeat: no-repeat;
    padding: 20px 20px 20px 50px;
    position: relative;
    left: -60px;

}

.quick-search-heading {
    font-family: domine;
    font-family: 26pt;
    line-height: .9;
    color: #ffff00;
    text-decoration: none;
    transition: 0.5s all ease-in-out;
    text-transform: uppercase;
    letter-spacing: 5px;
}

.quick-search-para {
    font-family: domine;
    color: #fff;
    margin-top: -10px;
}

.custom-label {
    font-family: domine;
    font-size: 32px;
    color: #fff
}

.form-select {
    font-family: domine;
    display: block;
    width: 100%;
    padding: 10px 16px 10px 16px;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    background-color: #e8e8e8;
    background-image: url(../images/login.png);
    background-repeat: no-repeat;
    background-position: right;
    background-size: 51px;
    border: none;
    border-radius: 0px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.form-check-input[type=checkbox] {
    border-radius: 0;
    height: 40px;
    border: none;
    width: 40px;
    background-color: #e8e8e8;

}

.form-check-input:checked[type=checkbox] {
    border-radius: 0;
    height: 40px;
    border: none;
    width: 40px;
    background-color: #ffff00;
}

.btn-search-2 {
    border: none;
    margin: 10px;
    padding: 12px 32px;
    text-align: center;
    text-transform: uppercase;
    transition: 0.5s;
    background-size: 200% auto;
    background-color: #ffff00;
    color: #000;
    font-family: metropolis;
    font-size: 16px;
    box-shadow: 0 0 20px rgb(0, 0, 0);
    border-radius: 50px;
}

.btn-search-2:hover {
    background-position: right center;
    /* change the direction of the change here */
    color: #fff;
    text-decoration: none;
}

.advance-search-link {
    font-family: domine;
    font-size: 12px;
    color: #fff;
    margin-right: 15px;
}

.advance-search-link:hover {
    font-family: domine;
    font-size: 12px;
    color: #fff;
    margin-right: 15px;
}

.margin-75 {
    margin-top: -75px
}

.profile-section-heading {
    font-family: domine;
    font-size: 19pt;
    color: #fff;
    text-transform: uppercase;
}

.bg-banner {
    background-image: url(../images/titlebar.png);
    background-position: left;
    background-repeat: no-repeat;
    background-size: contain;
    width: 620px;
    position: absolute;
    left: -60px;
    top: -20px
}

.bar-1 {
    height: 3px;
    width: 350px;
    position: absolute;
    left: 570px;
    top: 15px
}

.user-image-slider {
    background-color: white;
    background-image: url(../images/shadow.png);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    padding: 20px;
    margin-top: 60px
}

.user-img {
    position: relative;
    height: 180px;
    width: 180px;
    object-fit: cover;
    overflow: hidden;
}

.overlay-black {
    background-color: rgba(0, 0, 0, 0.439);
    padding: 10px 10px;
    position: absolute;
    width: 100%;
    bottom: 0px;
}

.userName {
    font-family: poppins;
    font-size: 14px;
    text-align: center;
    color: #fff
}

.btn-navigation {
    background-image: linear-gradient(to right, #87d5eb 0%, #0087ff 50%, #87d5eb 100%)
}

.btn-navigation {
    border: none;
    margin: 10px;
    height: 50px;
    width: 50px;
    text-align: center;
    text-transform: uppercase;
    transition: 0.5s;
    background-size: 200% auto;
    color: white;
    font-family: metropolis;
    font-size: 16px;
    box-shadow: 0 0 20px rgb(0, 0, 0);
    border-radius: 50px;
}

.btn-navigation:hover {
    background-position: right center;
    /* change the direction of the change here */
    color: #fff;
    text-decoration: none;
}

.navigation-btn-container {
    position: absolute;
    top: 50%;
    z-index: 99;
}

.btn-left {
    position: absolute;
    left: 1000px;
}

.btn-right {
    position: absolute;
    right: -10px;
}

.owl-carousel .owl-nav button.owl-prev, .owl-carousel .owl-nav button.owl-next, .owl-carousel button.owl-dot {
    background: linear-gradient(to right, #87d5eb 0%, #0087ff 50%, #87d5eb 100%) !important;
    border: none;
    height: 50px;
    width: 50px;
    text-align: center;
    text-transform: uppercase;
    transition: 0.5s;
    color: white !important;
    font-size: 32px !important;
    box-shadow: 0 0 20px rgb(0, 0, 0);
    border-radius: 50px;
}

button.owl-prev {
    position: absolute;
    top: 45%;
    left: -60px;
}

button.owl-next {
    position: absolute;
    top: 45%;
    right: -60px;
}

.owl-dots {
    display: none !important;
}

.link-showmore {
    position: absolute;
    /*left: 1100px;*/
    color: #fff
}

.link-showmore:hover {
    color: #fff
}

.link-showmore img {
    height: 25px;
    margin-left: 10px;
}

.owl-carousel .owl-item img {
    display: block;
    width: 100%;
    height: 140px;
    object-fit: cover;
}

.owl-nav button {
    margin-top: -14px;
    line-height: 0;
}

.owl-title {
    text-align: center;
    margin-top: -42px;
    margin-bottom: -42px;
    color: #fff;
}

.footer {
    background-image: linear-gradient(to right, #87d5eb 0%, #0087ff 50%, #87d5eb 100%) !important;
    padding: 20px;
}

.footer-para {
    color: white;
    font-family: metropolis;
    font-size: 16px;
}

@media (max-width: 992px) {
    .form-select {
        font-family: domine;
        display: block;
        width: 100%;
        padding: 10px 16px 10px 16px;
        font-weight: 400;
        line-height: 1.5;
        color: #212529;
        background-color: #e8e8e8;
        background-image: url(../images/login.png);
        background-repeat: no-repeat;
        background-position: right;
        background-size: 51px;
        border: none;
        border-radius: 0px;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        font-size: 10px;

    }

    .btn-search-2 {
        border: none;
        margin: 10px;
        padding: 12px 32px;
        text-align: center;
        text-transform: uppercase;
        transition: 0.5s;
        background-size: 200% auto;
        background-color: #ffff00;
        color: #000;
        font-family: metropolis;
        font-size: 10px;
        box-shadow: 0 0 20px rgb(0 0 0);
        border-radius: 50px;
    }

    .logo img {
        height: 200px !important;
        display: none;
    }

    .custom-navbar {
        top: -75px;
        z-index: 10000000 !important;
    }

    .input-group {
        position: relative;
        display: flex;
        flex-wrap: unset !important;
        align-items: stretch;
        width: 100%;
    }

    .top-from {
        padding-top: 10px;
        padding-bottom: 90px;
    }

    .header-img {
        display: none;
    }

}

@media (max-width: 425px) {
    .profile-section-heading {
        font-size: 13px;
        text-transform: uppercase;
    }

    .logo img {
        display: none;
    }

    .header-text {
        margin-top: -330px;
        zoom: 1.2;
        position: absolute;
    }

}

@media (max-width: 375px) {
    .profile-section-heading {
        font-size: 12px;
        text-transform: uppercase;
    }

    .logo img {
        display: none;
    }

    .header-text {
        margin-top: -330px;
        zoom: 1.2;
        position: absolute;
    }

}

@media (max-width: 320px) {
    .profile-section-heading {
        font-size: 7px;
        text-transform: uppercase;
    }

    .logo img {
        display: none;
    }

    .header-text {
        margin-top: -330px;
        zoom: 1.2;
        position: absolute;
    }

}

@media (max-width: 1024px) {
    .bg-mainHeader {
        background-image: url(../images/main-bg.png);
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        /*height: 646px;*/
        width: 100%;
        overflow: hidden;
        position: relative;
    }

}


* {
    box-sizing: border-box;
}

.input-container {
    display: flex;
    width: 100%;
    margin-bottom: 15px;
}

.input-field {
    border: none;
    margin-right: 10px;
}

.top-from a {
    color: #adadad;
    text-decoration: none;
}

/* Style the form icons */
.icon {
    padding: 10px;
    background: #adadad;
    color: white;
    min-width: 50px;
    text-align: center;
}

/* Style the input fields */
.input-field {
    width: 100%;
    padding: 10px;
    outline: none;
    border-radius: 0px 10px 10px 0px;
}

.fa-user, .fa-lock {
    padding-top: 15px;
    font-size: 26px;
    border-radius: 10px 1px 1px 10px;
}

.input-field:focus {
    border: 2px solid #adadad;
}

.login {
    background-color: linear-gradient(to right, #af2779 0%, #da0a75 50%, #af2779 100%);
    color: white;
    padding: 15px 20px;
    border: none;
    cursor: pointer;
    width: 30% !important;
    border-radius: 21px;
    opacity: 0.9;
}

/* Set a style for the submit button */
/*.btn {*/
/*    background-color: #adadad;*/
/*    color: white;*/
/*    padding: 15px 20px;*/
/*    border: none;*/
/*    cursor: pointer;*/
/*    width: 100%;*/
/*    opacity: 0.9;*/
/*}*/

.btn:hover {
    opacity: 1;
}


.container {
    position: inherit;
    z-index: 2;
}

.custom-navbar {
    z-index: 1;
}


main.main-content {
    min-height: 63vh;
}

.alert {
    margin-bottom: 0;
}

.mx-height-fix {
    height: 250px;
    object-fit: cover;
    margin: 0 auto;
}

.onlymobile {
    display: none;
}

@media (max-width: 992px) {
    .onlypc {
        display: none !important;
    }

    .onlymobile {
        display: block;
    }

    .onlymobile .container {
        max-width: 100% !important;
    }

    .mb-logo {
        max-height: 100px;
        display: block;
        margin: 0 auto;
    }

    .header-text {
        left: 0;
        right: 0;
        top: 0;
        z-index: 1;
        position: relative;
    }

    .container.quick-search-container {
        max-width: 100% !important;
    }

    .header-text {
        margin-top: -385px !important;
    }

    .container-fluid.section-bg.margin-75.position-relative {
        padding: 0;
        margin-top: 0;
    }

    .container-fluid.section-bg.margin-75.position-relative .container.quick-search-container.overflow-hidden {
        padding-top: 8px;
    }

    .container-fluid.section-bg.onlymobile {
        padding-top: 0;
    }
}

::-webkit-scrollbar {
    height: 8px;
    width: 12px
}

::-webkit-scrollbar-button:end:increment, ::-webkit-scrollbar-button:start:decrement {
    display: block
}

::-webkit-scrollbar-button:vertical:end:decrement, ::-webkit-scrollbar-button:vertical:start:increment {
    display: none
}

::-webkit-scrollbar-button:vertical:increment {
    display: none
}

::-webkit-scrollbar-button:vertical:decrement {
    display: none
}

::-webkit-scrollbar-track:vertical {
    background-image: linear-gradient(to right, #2a3796 0%, #006fba 50%, #0251a2 100%);    border-radius: 5px
}

::-webkit-scrollbar-track-piece:vertical:start {
    border-radius: 5px
}

::-webkit-scrollbar-track-piece:vertical:end {
    border-radius: 5px
}

::-webkit-scrollbar-track-piece {
    background-image: linear-gradient(to right, #2a3796 0%, #006fba 50%, #0251a2 100%);}

::-webkit-scrollbar-thumb:vertical {
    background-image: linear-gradient(to right, #af2779 0%, #da0a75 50%, #af2779 100%);
    border-radius: 5px;
    height: 50px;
    width: 8px
}

::-webkit-scrollbar-corner:vertical {
    background-image: linear-gradient(to right, #af2779 0%, #da0a75 50%, #af2779 100%);
}

::-webkit-scrollbar-resizer:vertical {
    border-radius: 5px
}

.input_msg_write input {
    padding-right: 50px;
}
.outgoing_msg {
    margin-right: 10px!important;
;
}
.received_msg p{

    background-image: linear-gradient(to right, #af2779 0%, #da0a75 50%, #af2779 100%) !important;
    color: whitesmoke!important;
}

.sent_msg p{
    word-break: break-word;
    background-image: linear-gradient(to right, #2a3796 0%, #006fba 50%, #0251a2 100%)!important;
}
.msg_send_btn,.blue-gradient{

    background-image: linear-gradient(to right, #2a3796 0%, #006fba 50%, #0251a2 100%)!important;
}
.container-fluid.footer{

    background-image: linear-gradient(to right, #2a3796 0%, #006fba 50%, #0251a2 100%)!important;
}

.container-fluid.footer a{

color: #0dcaf0}
.outgoing_msg:hover .hover-show{
    display: block!important;
}

.received_msg:hover .hover-show{
    display: block!important;
}