.banner_main {
    position: relative;
    width: 100%;
    height: 680px;
    padding-top: 86px;
    background-color: #2c335a;
    background: linear-gradient(to bottom, #2c335a 71%, white 85%);
}

.banner_main .home-container {
    position: relative;
    height: 100%;
}

.banner_main .cruise_block {
    position: absolute;
    bottom: 48px;
    left: 50%;
    width: 930px;
    margin-left: -465px;
    /* border: 2px solid green; */
    display: flex;
}

.banner_main .cruise_block>img {
    max-width: 100%;
    pointer-events: none;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    display: flex;
}

.banner_main .cruise_block .profile-box {
    position: absolute;
    top: 0;
    left: -96px;
    width: 500px;
    height: 100%;
    /* padding-bottom: 2px; */
    /* border: 1px solid red; */
}

.banner_main .cruise_block .profile-box1 {
    position: absolute;
    top: 0;
    right: 150px;
    width: 500px;
    height: 100%;
    /* border: 1px solid palevioletred; */
}

.banner_main .cruise_block .profile-box div[class*="block-"] {
    position: relative;
    display: inline-block;
    width: 100%;
}

.banner_main .cruise_block .profile-box1 div[class*="block-"] {
    position: relative;
    display: inline-block;
    width: 100%;
}

.banner_main .cruise_block .profile-box .block-1 {
    text-align: right;
}

.banner_main .cruise_block .profile-box .block-2 {
    margin-top: 48px;
    text-align: center;
    /* border: 1px solid orange; */
}

.banner_main .cruise_block .profile-box .block-3 {
    margin-top: 74px;
}

.banner_main .cruise_block .profile-box1 .block-4 {
    margin-top: 170px;
    text-align: right;
    /* border: 2px solid purple; */
}

.banner_main .cruise_block .profile-box .avtaar {
    position: relative;
    display: inline-block;
    width: 66px;
    border: solid 1px #116390;
    border-radius: 100%;
    -ms-border-radius: 100%;
    border: 2px solid goldenrod;
}

.banner_main .cruise_block .profile-box1 .avtaar {
    position: relative;
    display: inline-block;
    width: 66px;
    border: solid 1px #116390;
    border-radius: 100%;
    -ms-border-radius: 100%;
    border: 2px solid goldenrod;
}

.banner_main .cruise_block .profile-box .avtaar a {
    display: block;
}

.banner_main .cruise_block .profile-box1 .avtaar a {
    display: block;
}

.banner_main .cruise_block .profile-box .avtaar img {
    width: 100%;
    border-radius: 100%;
    -ms-border-radius: 100%;
}

.banner_main .cruise_block .profile-box1 .avtaar img {
    width: 100%;
    border-radius: 100%;
    -ms-border-radius: 100%;
}

.profile-box1 .banner_main .cruise_block .avtaar img {
    width: 100%;
    border-radius: 100%;
    -ms-border-radius: 100%;
    border: 5px solid goldenrod;
    /* border: 5px solid grey; */
}

.banner_main .cruise_block .profile-box .avtaar:after {
    position: absolute;
    height: 1px;
    background-color: #fff;
    content: "";
    pointer-events: none;
}

.banner_main .cruise_block .profile-box1 .avtaar:after {
    position: absolute;
    height: 1px;
    background-color: #fff;
    content: "";
    pointer-events: none;
}

.banner_main .cruise_block .profile-box .block-1 .avtaar:after {
    bottom: -25px;
    right: -52px;
    width: 70px;
    transform: rotate(45deg);
}

.banner_main .cruise_block .profile-box .block-2 .avtaar:after {
    bottom: -100px;
    right: -245px;
    width: 290px;
    transform: rotate(45deg);
}

.banner_main .cruise_block .profile-box .block-3 .avtaar:after {
    top: 35px;
    right: -190px;
    width: 180px;
}

.banner_main .cruise_block .profile-box1 .block-4 .avtaar:after {
    top: 35px;
    right: 70px;
    width: 130px;
}

.banner_main .log_reg_block {
    position: relative;
    z-index: 10;
    margin-top: -36px;
    width: 452px;
    float: right;
    /* padding: 15px 48px 20px 30px; */
    background-color: #fff;
    padding-left: 15px;
    padding-right: 15px;
    padding-top: 15px;
    border-radius: 7%;
}

.seafarer-banner-left {
    margin-top: 202px;
    padding-left: 68px;
    z-index: 1;
}

.seafarer-banner-head {
    font-family: 'Roboto-Bold';
    font-size: 60px;
    margin: 0 0 0 0;
    color: #fff;
}

.seafarer-sub-head {
    color: #fff;
    font-family: 'Roboto-Regular';
    font-size: 24px !important;
    font-weight: 100 !important;
}

.seafarer-main-banner {
    background: linear-gradient(to bottom, #2c335a 71%, white 85%);
}

@media (max-width: 1199.98px) {

    .banner_main {
        height: 680px;
    }

    .seafarer-banner-left {
        margin-top: 116px;
        padding-left: 32px;
    }

    .banner_main .cruise_block {
        position: absolute;
        bottom: 48px;
        left: 50%;
        width: 800px;
        margin-left: -465px;
        /* border: 2px solid green; */
        display: flex;
    }

    .banner_main .cruise_block .profile-box1 .avtaar {
        width: 60px;
    }

    .banner_main .cruise_block .profile-box {
        left: -10px;
        width: 400px;
    }

    .banner_main .cruise_block .profile-box .block-1 .avtaar:after {
        right: -58px;
        width: 77px;
    }

    .banner_main .cruise_block .profile-box .block-1 {
        margin-left: -50px;
    }

    .banner_main .cruise_block .profile-box .block-2 {
        margin-top: 24px;
    }

    .banner_main .cruise_block .profile-box .block-2 .avtaar:after {
        bottom: -89px;
        right: -173px;
        width: 226px;
        transform: rotate(50deg);
    }

    .banner_main .cruise_block .profile-box1 .block-4 {
        margin-top: 145px;
    }

    .banner_main .cruise_block .profile-box1 .block-4 .avtaar:after {
        top: 30px;
        right: 63px;
        width: 95px;
    }

    .banner_main .cruise_block .profile-box .block-3 {
        margin-top: 53px;
        margin-left: -50px;
    }

    .banner_main .cruise_block .profile-box .block-3 .avtaar:after {
        right: -156px;
        width: 147px;
    }
}

@media (max-width: 991.98px) {

    .banner_main {
        height: fit-content;
        /* padding-top: 80px; */
        background: linear-gradient(to bottom, #2c335a 78.8%, white 90%);
    }

    .seafarer-main-banner {
        background: linear-gradient(to bottom, #2c335a 77.8%, white 90%);
    }

    .banner_main .log_reg_block {
        z-index: 20;
        width: 100%;
        float: none;
        display: inline-block;
    }

    .banner_main .cruise_block {
        position: relative;
        bottom: 0;
        left: 0;
        margin-left: 0;
        width: 100%;
        margin-top: 30px;
    }

    .banner_main .cruise_block .profile-box {
        width: 330px;
    }

    .banner_main .cruise_block .profile-box1 {
        width: 330px;
        right: 70px;
    }

    .banner_main .cruise_block .profile-box .block-1 {
        margin-left: -58px;
        margin-top: -20px;
    }

    .banner_main .cruise_block .profile-box .block-1 .avtaar:after {
        right: -20px;
        bottom: -10px;
        width: 35px;
    }

    .banner_main .cruise_block .profile-box .block-2 {
        margin-top: -12px;
        margin-left: -26px;
    }

    .banner_main .cruise_block .profile-box .block-2 .avtaar:after {
        bottom: -73px;
        right: -118px;
        width: 165px;
        transform: rotate(55deg);
    }

    .banner_main .cruise_block .profile-box .block-3 {
        margin-top: 38px;
    }

    .banner_main .cruise_block .profile-box .block-3 .avtaar:after {
        right: -110px;
        width: 103px;
    }

    .banner_main .cruise_block .profile-box1 .block-4 {
        margin-top: 96px;
    }

    .banner_main .cruise_block .profile-box1 .block-4 .avtaar:after {
        right: 63px;
        width: 86px;
    }

    .banner_main {
        margin-top: -20px;
    }
}

@media (max-width: 767.98px) {
    .banner_main {
        padding-bottom: 20px;
        background: linear-gradient(to bottom, #2c335a 75.9%, white 86%);
        margin-top: -128px;
        height: fit-content;
    }

    .seafarer-banner-head {
        font-size: 40px;
    }

    .seafarer-sub-head{
        font-size: 20px !important;
    }

    .seafarer-main-banner {
        background: linear-gradient(to bottom, #2c335a 78.3%, white 88%);
    }

    .banner_main .cruise_block {
        width: 500px;
        margin: 30px auto 0;
    }

    .banner_main .cruise_block .profile-box {
        width: 240px;
    }

    .banner_main .cruise_block .profile-box1 {
        width: 240px;
        right: 65px;
    }

    .banner_main .cruise_block .profile-box .block-1 {
        margin-left: -2px;
    }

    .banner_main .cruise_block .profile-box .avtaar {
        width: 60px;
    }

    .banner_main .cruise_block .profile-box1 .avtaar {
        width: 60px;
    }

    .banner_main .cruise_block .profile-box .block-2 {
        margin-top: 0;
    }



    .banner_main .cruise_block .profile-box .block-2 .avtaar:after {
        bottom: -48px;
        right: -95px;
        width: 120px;
        transform: rotate(50deg);
    }

    .banner_main .cruise_block .profile-box .block-3 {
        margin-top: 0;
    }

    .banner_main .cruise_block .profile-box .block-3 .avtaar:after {
        right: -45px;
        width: 40px;
    }

    .banner_main .cruise_block .profile-box1 .block-4 {
        margin-top: 75px;
        margin-left: 36px;
    }

    .banner_main .cruise_block .profile-box1 .block-4 .avtaar:after {
        bottom: 148px;
        right: 60px;
        width: 104px;
    }

    .what-need-seafarer-div {
        margin-top: -24px !important;
    }

    .seafarer-banner-left {
        margin-top: 70px;
    }
}

@media (max-width: 575.98px) {
    .banner_main .cruise_block {
        width: 450px;
    }

    .banner_main {
        background: linear-gradient(to bottom, #2c335a 76.1%, white 88%);
    }

    .seafarer-main-banner {
        background: linear-gradient(to bottom, #2c335a 78.9%, white 89.5%);
    }

    .banner_main .cruise_block .profile-box {
        right: 0;
        width: 210px;
    }

    .banner_main .cruise_block .profile-box .block-1 {
        margin-left: 140px;
    }

    .banner_main .cruise_block .profile-box .block-1 .avtaar:after {
        right: 49px;
        bottom: -10px;
        width: 40px;
        transform: rotate(317deg);
    }

    .banner_main .cruise_block .profile-box .block-2 .avtaar:after {
        bottom: -36px;
        right: -86px;
        width: 108px;
    }

    .banner_main .cruise_block .profile-box .block-3 .avtaar:after {
        transform: rotate(-30deg);
        -ms-transform: rotate(-30deg);
        right: -39px;
    }

    .banner_main .cruise_block .profile-box1 .block-4 {
        margin-top: 64px;
    }

    .banner_main .cruise_block .profile-box1 .block-4 .avtaar:after {
        width: 86px;
    }

}

@media (max-width: 479px) {

    .banner_main {
        background: linear-gradient(to bottom, #2c335a 77.1%, white 89%);
        height: fit-content;
    }

    .seafarer-main-banner {
        background: linear-gradient(to bottom, #2c335a 80.2%, white 90.5%);
    }

    .banner_main .cruise_block {
        width: 340px;
    }

    .banner_main .cruise_block .profile-box {
        width: 160px;
    }

    .banner_main .cruise_block .profile-box1 {
        width: 160px;
        right: 55px;
    }

    .banner_main .cruise_block .profile-box .avtaar {
        width: 45px;
    }

    .banner_main .cruise_block .profile-box1 .avtaar {
        width: 45px;
    }

    .banner_main .cruise_block .profile-box .block-1 {
        margin-left: 120px;
        margin-top: -12px;
    }

    .banner_main .cruise_block .profile-box .block-1 .avtaar:after {
        right: 37px;
        bottom: -10px;
        width: 42px;
    }

    .banner_main .cruise_block .profile-box1 .block-4 {
        margin-top: 46px;
    }

    .banner_main .cruise_block .profile-box .block-3 .avtaar:after {
        top: 28px;
        right: -28px;
        width: 32px;
    }

    .banner_main .cruise_block .profile-box1 .block-4 .avtaar:after {
        top: 22px;
        right: 47px;
        width: 62px;
    }

    .banner_main .cruise_block .profile-box .block-2 {
        margin-top: -4px;
    }

    .banner_main .cruise_block .profile-box .block-2 .avtaar:after {
        bottom: -38px;
        right: -84px;
        width: 103px;
        transform: rotate(40deg);
    }
}

@media (min-width: 1200px) {
    .home-container {
        width: 1200px;
        margin: auto;
    }
}

@media (min-width: 992px) {
    .home-container {
        width: 970px;
        margin: auto;
    }

    .what-need-seafarer-div {
        margin-top: -70px !important;
    }
}

@media (min-width: 768px) {
    .home-container {
        width: 574px;
        margin: auto;
    }
}