@media screen and (min-width: 768px) {
    body {
        text-align: justify;
    }
}

@media screen and (min-width: 992px) {

    /*header*/
    nav.fixed-top .nav-inner > .justify-content-between {
        justify-content: center !important;
    }

    .top-navbar > ul > li {
        display: flex;
        padding-left: 0rem;
        margin-left: 6rem;
    }

    .sub-menu-list li a {
        border-bottom: 0.2rem solid transparent;
    }

    .dropdown:hover .sub-menu-list {
        opacity: 1;
        top: 140%;
        z-index: 2;
    }

    .sub-menu-list li a:hover {
        color: #fff;
        background: #135a8a;
    }

    .blinking-text {
        position: relative;
    }

    /* .outer-bar {
        position: absolute;
        bottom:-3rem;
    }

    .bar {
        height: 5px;
        width: 10.8rem;
        background: #e0e5f1;
        margin: 15px auto 20px;
        position: relative;
        border-radius: 30px;
    }

        .bar::before {
            content: '';
            position: absolute;
            left: 0;
            top: -2.6px;
            height: 10px;
            width: 10px;
            border-radius: 50%;
            background: #094465;
            -webkit-animation-duration: 3s;
            animation-duration: 3s;
            -webkit-animation-timing-function: linear;
            animation-timing-function: linear;
            -webkit-animation-iteration-count: infinite;
            animation-iteration-count: infinite;
            -webkit-animation-name: MOVE-BG;
            animation-name: MOVE-BG;
        }

    @-webkit-keyframes MOVE-BG {
        from {
            -webkit-transform: translateX(0);
            transform: translateX(0);
        }

        to {
            -webkit-transform: translateX(10.6rem);
            transform: translateX(10.6rem);
        }
    }*/

    .blink {
        -webkit-animation: blink 800ms step-end infinite;
        animation: blink 800ms step-end infinite;
    }

    @-webkit-keyframes blink {
        50% {
            color: #135a8a;
        }
    }

    @keyframes blink {
        50% {
            color: #135a8a;
        }
    }
}

@media screen and (min-width: 1400px) {

    /*common*/
    body, .font-default {
        font-size: 2rem;
    }

    .heading1 {
        font-size: 6rem;
    }

    .heading2 {
        font-size: 5.5rem;
        letter-spacing: .2rem;
    }

    .heading3 {
        font-size: 4.2rem;
    }

    .heading4 {
        font-size: 3.6rem;
        letter-spacing: .3rem;
    }

    .heading5 {
        font-size: 2.8rem;
        font-weight: 500;
    }

    .heading6 {
        font-size: 2.4rem;
    }

    .heading7 {
        font-size: 2rem;
    }

    /*header*/
    nav .nav-inner {
        padding: 4rem 0;
    }

    .job-description-card table tr td:first-child {
        width: calc(100% - 66%)
    }
}

@media screen and (max-width: 1399px) {
    /*common*/
    body {
        font-size: 1.4rem;
    }

    .heading1 {
        font-size: 4rem;
    }

    .heading2 {
        font-size: 3.2rem;
        letter-spacing: .2rem;
    }

    .heading3 {
        font-size: 2.6rem;
    }

    .heading6 {
        font-size: 2rem;
    }

    .btn {
        font-size: 1.6rem;
        height: 4rem;
        min-width: 14rem;
    }

    .btn-icon {
        min-width: 4rem;
    }

    .btn-primary2 {
        min-width: 5rem;
    }

        .btn-primary2:hover {
            min-width: 14.5rem;
        }

    /*header*/
    nav .nav-inner .logo img {
        max-width: 20rem;
    }

    .top-navbar > ul > li {
        padding-left: 3rem;
    }

    .dropdown .sub-menu-list li a {
        font-size: 1.4rem;
    }

    .dropdown a,
    .dropdown span {
        padding-right: 3rem;
    }

        .dropdown span > span {
            top: unset;
        }
    /*section 1*/
    .section1 {
        height: 100vh;
        min-height: unset;
    }

    .banner-caption {
        max-width: 38%;
    }

    /*section 2*/
    .card-counter {
        max-width: 70%;
        padding: 2rem;
    }

        .card-counter.active {
            margin-top: -11%;
        }

    .wave {
        padding: 0 3rem;
    }

    .section2 li {
        min-height: 4.8rem;
        margin: 1.5rem 0;
        padding-left: 5.8rem;
    }

        .section2 li [class^="icon-"] {
            height: 4.2rem;
            width: 4.2rem;
        }

    .card-media .img-collage {
        border-width: 1rem;
        max-height: 24.5rem;
    }

    .section2 .card-caption {
        max-width: 14rem;
        right: -12%;
    }

    .section2 > .icon-vessel {
        font-size: 30.2rem;
    }

    .section2 .mxw-340 {
        max-width: 34rem;
    }

    /*section 3*/
    .section3 .card [class^="icon-"] {
        height: 3.8rem;
        width: 3.8rem;
    }

    .section3 .card p {
        font-size: 1.4rem;
    }

    /*section 4*/
    .section4 .card {
        padding: 2rem;
    }

        .section4 .card .btn {
            max-width: 14rem;
        }

    /*section 5*/
    .swiper-happyclients .card-media {
        padding: 1rem;
    }

    /*section 7*/
    .swiper-team .card {
        max-width: 30rem;
    }

        .swiper-team .card:before {
            width: 28rem;
        }

    /*about us*/
    .bg {
        padding: 2.5rem 0 2.5rem 2.5rem;
    }

        .bg.blue .section2 .card-caption {
            transform: translateX(55%);
            right: 0;
        }

    .mx-width-80 {
        max-width: 5rem;
    }

    .shapes.shape-4:before {
        width: 7.5rem;
        height: 7.4rem;
    }

    .shapes.shape-4:after {
        width: 8.4rem;
        height: 12.7rem;
    }
    /*Career*/
    .vacancies_search .btn, .form-control {
        height: 5rem;
    }

    .career-form .form-control {
        height: 4rem;
    }

    .form-group {
        margin-bottom: 3rem;
    }


    /*footer*/
    .social-media [class^="icon-"] {
        height: 3rem;
        width: 3rem;
    }

        .social-media [class^="icon-"] + [class^="icon-"] {
            margin-left: 1rem;
        }

    .join-us-card:before {
        width: 12rem;
    }

    .join-us-card:after {
        width: 10rem;
    }

    .popup-content {
        padding: 4rem 2rem;
    }

    .close-button {
        top: -1.5rem;
        right: -1.5rem;
        font-size: 3rem;
        width: 4rem;
        height: 4rem;
    }

    .section-feature li [class^="icon-"] {
        height: 7rem;
        width: 7rem;
        left: -4rem;
    }

    .mission-points img {
        width: 50%;
    }

    .mission-points .mission-card-box {
        width: 26.7rem;
        left: -20rem;
        padding: 1.8rem 2rem;
    }

    .mission-vision-section .desc {
        padding-left: 12rem;
    }

    .mission-points .heading5 {
        line-height: 3rem;
        font-size: 2rem;
    }

        .mission-points .heading5 span {
            font-size: 3.5rem;
        }

    .ship-icon {
        font-size: 24.2rem;
    }

    .shapes.shape-6:after {
        width: 7.4rem;
        height: 10.7rem;
        bottom: -11rem;
    }

    .shapes.shape-7:before {
        width: 9rem;
        height: 10.4rem;
    }

    .card-icon span {
        font-size: 3rem;
    }

    .shapes.shape-9:after {
        width: 6rem;
        height: 15.6rem;
    }

    .shapes.shape-8:after {
        width: 10.2rem;
        height: 11.8rem;
    }

    .mission-vision-section .section:after {
        width: 1.3rem;
    }
}

@media screen and (max-width: 1199px) {
    /*common*/

    /*header*/
    nav.fixed-top .nav-inner {
        padding: 1rem 0;
    }

    /*section 2*/
    .card-media .img-collage {
        max-height: 25.5rem;
    }

    .section2 .card-caption {
        max-width: 14rem;
        right: 8%;
    }

    .section2 > .icon-vessel {
        font-size: 20.2rem;
    }

    /*section 3*/
    .section3 .card [class^="icon-"] {
        font-size: 2rem;
        height: 3.8rem;
        width: 3.8rem;
    }

    .section3 .card p {
        font-size: 1.4rem;
    }

    .col-bottom .arrow {
        margin: 0 1.8rem;
    }

    .section4 .swiper-wrapper {
        margin-bottom: 1rem;
    }

    .section4 .gallery-thumbs {
        max-width: 100%;
    }

    .section4 .card {
        padding: 2rem;
    }

        .section4 .card .btn {
            max-width: 14rem;
        }

    .section3 .card,
    .swiper-happyclients .card-media {
        box-shadow: .2rem .2rem 1.3rem rgba(0, 0, 0, 0.25);
    }

    .section3 .swiper-slide-active .card {
        box-shadow: .7rem .7rem 1.3rem rgba(0, 90, 140, .33)
    }

    /*footer*/
    .social-media [class^="icon-"] + [class^="icon-"] {
        margin-left: .5rem;
    }

    /*about us*/
    .bg {
        padding: 2rem 0 2rem 2rem;
    }

    .mx-width-80 {
        max-width: 5rem;
    }

    /*Career*/
    .vacancies_search .btn {
        height: 5.5rem;
    }

    /*Services Pages*/
    .shapes.shape-1:before {
        width: 7.9rem;
        height: 9.2rem;
    }

    .shapes.shape-1:after {
        background: url(../images/common/shape-3.webp);
        width: 3.5rem;
        height: 5rem;
    }

    .shapes.shape-2:before {
        background: url(../images/common/shape-5.webp);
        width: 4rem;
        height: 6.3rem;
    }

    .shapes.shape-2:after {
        background: url(../images/common/shape-2.webp);
        width: 9.8rem;
        height: 17.6rem;
    }

    .shapes.shape-2.shape-3:after {
        width: 5.2rem;
        height: 13.7rem;
    }

    .page-media-card.left-patch {
        padding-left: 3rem;
    }

    .page-media-card.right-patch {
        padding-right: 3rem;
    }

    .page-media-card {
        padding: 2.5rem 0;
    }

        .page-media-card::before {
            width: 7rem;
        }

    /*team page*/
    .team-container {
        padding-top: 4rem !important;
    }

    .mb-md-7 {
        margin-bottom: 10rem !important;
    }

    .pbmd-0 {
        padding-bottom: 0;
    }

    .mxw-md-80 {
        max-width: calc(100% - 20%) !important;
        margin: auto !important;
    }

    .popup-content:before {
        width: 8.2rem;
        height: 12.6rem;
    }

    .popup-content:after {
        width: 7.2rem;
        height: 5.2rem;
    }
}

@media screen and (max-width: 991px) {
    .exp-card {
        width: 95%;
        margin: 0 auto 2.5rem auto;
    }
    /*common*/
    .mt-4 {
        margin-top: 2rem !important;
    }
    /*header*/
    nav .nav-inner .logo img {
        max-width: 15rem;
    }

    nav.fixed-top .nav-inner .text-white {
        color: #135a8a;
    }

    .top-navbar {
        background: url(../images/contact/contact-addess-bg.webp);
        background-size: cover;
        height: 100%;
        opacity: 0;
        overflow-x: hidden;
        overflow-y: auto;
        position: fixed;
        right: 0;
        top: 0;
        transform: translate3d(30rem, 0, 0);
        transition: .5s;
        width: 30rem;
        z-index: 1
    }

        .top-navbar .icon-cross {
            color: #fff;
            margin: 1rem;
        }

        .top-navbar.active {
            opacity: 1;
            transform: translate3d(0, 0, 0);
        }

        .top-navbar > ul {
            display: block;
        }

            .top-navbar > ul > li {
                padding-left: 0;
            }

                .top-navbar > ul > li > a,
                .top-navbar > ul > li > span {
                    padding: 2rem 4rem 2rem 2rem;
                }

        .top-navbar ul li a,
        .top-navbar ul li span {
            color: #ffffff;
        }

    .dropdown .sub-menu-list li + li a {
        border: 0;
    }

    .dropdown span > span {
        right: 1.5rem;
        top: 1.5rem;
    }

    .dropdown .sub-menu-list {
        background-color: transparent;
        padding: 0;
        position: relative;
    }

        .dropdown .sub-menu-list li a {
            color: #ffffff;
            font-size: 1.2rem;
        }

    .dropdown .sub-menu-list {
        opacity: 1;
        display: none;
    }

    .dropdown:hover .sub-menu-list {
        top: 100%;
        z-index: 2;
        display: block;
    }

    /*section 1*/
    .section1 {
        background-position: 75%;
        height: 60vh;
    }

    .banner-caption {
        max-width: 60%;
    }

    /*section 2*/
    .mxw-575 {
        max-width: 100%;
    }

    .card-counter {
        box-shadow: 0 0 8rem rgb(0 90 140 / 67%);
        border-radius: 1.8rem;
        max-width: 100%;
        padding: 2rem;
    }

        .card-counter.active {
            margin-top: 0;
        }

        .card-counter .col-md-4:last-child {
            margin-top: 1rem;
        }

    .card-media .img-collage {
        border-width: 1rem;
    }

    .section2 .ul-list {
        display: flex;
        flex-wrap: wrap;
    }

        .section2 .ul-list li {
            width: 50%;
        }

    /*section 4*/
    .section4 .section-gallery-wrap {
        padding: 5rem 0;
    }

    .section4 .gallery-thumbs {
        max-width: 100%;
        margin-left: 0;
    }

    .section4 .col-bottom {
        padding-left: 1rem;
    }

    .swiper-team .card-caption {
        bottom: 0;
    }

    /*Career*/
    .search-box .search-box-input {
        padding-left: 5.5rem;
    }

    .search-icon {
        width: 4.5rem;
    }

    .card_icon-left-1 img,
    .card_icon-right-1 img {
        max-width: 60%;
    }

    .vacancy-cards .card_icon-right-1 {
        right: -8rem;
    }

    /*Services Pages*/
    .page-media-card {
        padding: 2rem 0;
        margin: 2rem auto 0 auto;
    }

        .page-media-card.left-patch {
            padding-left: 2rem;
        }

        .page-media-card.right-patch {
            padding-right: 2rem;
        }

    .join-us-card:before {
        width: 9rem;
    }

    .join-us-card:after {
        width: 6rem;
    }

    .card-content > div {
        margin-top: 2rem;
    }

    .btn-white {
        padding: 1rem 4rem;
    }

    .team-container .card.w-md-auto:before {
        width: auto;
    }

    .team-container .card-media .card-caption {
        bottom: 0;
    }

    .popup-content {
        background-color: #fff;
        padding: 4rem 1rem;
    }

        .popup-content:before {
            width: 6.2rem;
            height: 9.6rem;
        }

        .popup-content:after {
            width: 6.2rem;
            height: 4.6rem;
        }

    .close-button {
        top: -1rem;
        right: -1rem;
        font-size: 3rem;
        width: 3rem;
        height: 3rem;
    }

    .mx-width-590, .section-feature:before {
        width: 100%;
    }

    .shape-4 {
        padding-bottom: 0;
    }

    .section-feature li {
        padding-left: 3rem;
    }

    .shapes.shape-5:before, shape-7, .shapes.shape-9:after {
        width: 4.7rem;
        height: 7.6rem;
    }

    .shape-8 {
        padding-bottom: 0;
    }

    .goal-card .btn-primary2 {
        width: 98%;
    }

    .goal-card {
        margin-bottom: 4rem;
    }

        /*.btn-gradient:after {
        background-position: 100% 100%;
    }*/

        .goal-card .btn-primary2:before {
            background: linear-gradient(90deg, hsla(206, 100%, 75%, 1) 0%, hsla(201, 100%, 27%, 1) 100%);
        }

        .goal-card .btn-primary span, .goal-card .btn-gradient span {
            top: -120%;
        }

        .goal-card .btn-primary2 em {
            top: 50%;
            color: #ffffff !important;
        }
}

@media screen and (max-width: 767px) {
    /*header*/
    .nav-inner .logo {
        top: 1rem;
    }

    .logo [class^="icon-"],
    .logo [class*=" icon-"] {
        font-size: 10rem;
    }

    /*section*/
    .section1 {
        height: 85vh;
    }

    .banner-caption {
        max-width: 100%;
    }

    .card-media .img-collage {
        margin: -5rem 0 2.5rem 3rem;
    }

    .section3 .card,
    .swiper-happyclients .card-media {
        margin: auto;
    }

    .section4 .card-caption {
        padding: 2rem;
    }

    .swiper-pagination-bullet {
        height: 1.2rem;
        width: 1.2rem;
    }

        .swiper-pagination-bullet:before {
            height: .6rem;
            width: .6rem;
        }

    .card-counter {
        padding: 2rem 0;
    }

        .card-counter .col-md-4:nth-child(2) {
            border: 0;
        }

        .card-counter .heading1 {
            font-size: 3rem;
        }

        .card-counter .heading6 {
            margin: auto;
            max-width: 15rem;
        }

    .footer-top-wrapper .logo [class^="icon-"],
    .footer-top-wrapper .logo [class*=" icon-"] {
        font-size: 12.6rem;
        margin-bottom: 1rem;
    }

    /*Career*/
    .vacancies_search .form-group {
        margin-bottom: 4rem !important;
    }
    /*Services Page*/
    .shapes.shape-1:before {
        width: 5.7rem;
        height: 6.6rem;
    }

    .shapes.shape-1:after {
        background: url(../images/common/shape-3.webp);
        width: 2.5rem;
        height: 3.6rem;
    }

    .shapes.shape-2:before {
        background: url(../images/common/shape-5.webp);
        width: 2.8rem;
        height: 4.5rem;
    }

    .shapes.shape-2:after {
        background: url(../images/common/shape-2.webp);
        width: 7rem;
        height: 12.6rem;
    }

    .page-media-card.left-patch {
        padding-left: 2rem;
    }

    .page-media-card.right-patch {
        padding-right: 2rem;
    }

    .page-media-card {
        padding: 1.8rem 0;
    }

        .page-media-card::before {
            width: 5rem;
        }

    .team-container .card.w-md-auto:before {
        width: 31rem;
    }

    .team-content {
        margin-top: 4rem;
    }

    .popup-content {
        padding: 3rem 1rem;
    }

    .shapes.shape-4:before {
        width: 5.5rem;
        height: 5.4rem;
    }

    .shapes.shape-4:after {
        width: 6.4rem;
        height: 9.7rem;
    }

    .mission-vision-section .desc {
        padding-left: 10rem;
    }

    .ship-icon {
        font-size: 15rem;
    }

    .contact-info .heading6 {
        font-size: 1.6rem;
    }

    .contact-info li span {
        height: 3rem;
        margin-right: .5rem;
        width: 3rem;
    }

    .mxw-85 {
        max-width: calc(100% - 10%);
    }

    /*Career*/
    .vacancy-cards .card {
        padding: 2rem;
    }

    .vacancy-cards .card::after {
        width: .5rem;
    }
}

@media screen and (max-width: 575px) {

    /*section*/
    .banner-caption {
        max-width: 100%;
    }

    .section2 .card-caption {
        display: none;
    }

    .card-media .img-collage {
        margin: -5rem 0 2.5rem 3rem;
        max-height: 18.5rem;
    }

    .section2 .ul-list {
        display: block;
        flex-wrap: wrap;
    }

        .section2 .ul-list li {
            width: 100%;
        }

    .section3 .card {
        margin: auto;
    }

    /*footer*/
    .footer-top-wrapper br {
        display: none;
    }

    .footer-top-wrapper .col-lg-3.col-md-4,
    .footer-bottom,
    .footer-bottom .text-right {
        text-align: center;
    }

    /*Career*/
    .mxw-95 {
        max-width: 100%;
    }

    .card_icon-left-1 img,
    .card_icon-right-1 img {
        display: none;
    }

    .pagination-buttons ul li {
        width: 3rem;
        height: 3rem;
    }

    .pagination-buttons ul {
        margin: 0;
    }

    /*Services Page*/
    .shapes:before, .shapes:after, .join-us-card:before, .join-us-card:after {
        display: none;
    }

    .page-media-card.left-patch {
        padding-left: 1rem;
    }

    .page-media-card.right-patch {
        padding-right: 1rem;
    }

    .page-media-card {
        padding: 1.2rem 0;
    }

        .page-media-card::before {
            width: 4rem;
        }

    .close-button {
        top: -1rem;
        right: -1rem;
        font-size: 2rem;
        width: 3rem;
        height: 3rem;
    }

    .card-counter .col-md-4:nth-child(2) {
        border-left: 0;
    }

    .section-feature li {
        padding: 0;
    }

        .section-feature li [class^="icon-"] {
            position: unset;
            flex-shrink: 0;
            height: 6rem;
            width: 6rem;
        }

        .section-feature li div {
            margin-left: 1.5rem;
        }

    .mission-vision-section {
        background: unset;
        margin-top: 0;
        margin-bottom: 0;
    }

    .ship-icon {
        font-size: 18.2rem;
    }

    .mission-vision-section .desc {
        padding-left: 0;
    }

    .mission-points .mission-card-box {
        position: unset;
        width: 100%;
        margin-bottom: 3rem !important;
        max-width: 100%;
        border-radius: 10rem;
        padding: 1.8rem 2rem 1.8rem 3rem;
    }

    .mission-vision-section .section:after, .ship-icon {
        display: none;
    }

    .mission-vision-section .section {
        padding-top: 0;
    }

    .shape-7 {
        padding-bottom: 0;
    }

    /*mission vission card*/

    .value-card {
        padding: 6rem 4rem 2rem 5rem;
    }

        .value-card .card-icon {
            position: unset;
            margin-top: -9rem;
        }

        .value-card h4 {
            text-align: center;
        }

    .exp-card p {
        font-size: 1.6rem;
    }
}

@media screen and (max-width: 420px) {
    .team-container .card.w-md-auto:before {
        width: auto;
    }
}

@media screen and (min-width: 300px) and (max-width: 575px) and (orientation: portrait) {

    #banner .slick-slide img {
        height: 100vh !important;
    }
}

@media screen and (min-width: 576px) and (max-width: 991px) and (orientation: landscape) {

    #banner .slick-slide img {
        height: 170vh !important;
    }
}
