:root {
    --font-size-46: 46px;
    --font-size-42: 42px;
    --font-size-40: 40px;
    --font-size-38: 38px;
    --font-size-36: 36px;
    --font-size-34: 34px;
    --font-size-32: 32px;
    --font-size-30: 30px;
    --font-size-28: 28px;
    --font-size-26: 26px;
    --font-size-24: 24px;
    --font-size-22: 22px;
    --font-size-20: 20px;
    --font-size-18: 18px;
    --font-size-16: 16px;
    --font-size-14: 14px;
    --fontf-reg-head: 'Oswald-Bold';
    --fontf-reg: 'Roboto-Regular';
    --fontf-med: 'Roboto-Medium';
    --fontf-bold: 'Roboto-Bold';

    --color-verylightblack: #555;
    --color-lightblack: #333;
    --color-black: #000;
    --color-red: #88000d;

}

body {
    font-family: 'Roboto';
}

html body {
    background-color: #f3f3f3;
}

.section-head-title {
    font-family: inherit !important;
    font-size: var(--font-size-42) !important;
    margin: 0 0 30px 0;
    line-height: 40px;
    color: #22287d;
    font-weight: bold;
}

.slider-head-title {
    font-size: var(--font-size-42) !important;
    line-height: 20px;
    color: #22287d;
    font-weight: bold;
    border-radius: 10px;
}

.section-sub-title {
    color: var(--color-verylightblack);
    font-weight: bold;
    font-size: var(--font-size-32);
    margin: 0 0 16px 0;
    line-height: 34px;
}

.section-socialize-title {
    font-family: inherit !important;
    font-size: 32px;
    margin: 0 0 0px 0;
    line-height: 36px;
    color: #22287d;
    font-weight: bold;
}

.section-socialize-para-data {
    width: 100%;
    margin: 0 0 20px 0;
    color: var(--color-verylightblack);
    font-size: var(--font-size-22);
    line-height: 26px;
}

.section-feature-title {
    color: var(--color-verylightblack);
    font-weight: bold;
    font-size: var(--font-size-26);
    margin: 0 0 8px 0;
    line-height: 30px;
}

.section-feature-data {
    width: 100%;
    margin: 0 0 16px 0;
    color: var(--color-verylightblack);
    font-size: var(--font-size-20);
    line-height: 26px;
    padding-left: 15px;
    padding-right: 15px;
}

.section-para-data {
    width: 100%;
    margin: 0 0 20px 0;
    color: var(--color-verylightblack);
    font-size: var(--font-size-26);
    line-height: 32px;
}

.img-v-center {
    align-self: center;
}

.divider {
    display: flex;
    align-items: center;
    text-align: center;
    color: #71462f;
    font-weight: bolder;
    width: 100%;
    justify-content: center;
}

.divider-text {
    font-size: 3rem !important;
    white-space: nowrap;
    padding: 0 20px;
}

/* Dividers */
.divider .divider-text:before,
.divider .divider-text:after {
    content: "";
    flex-grow: 1;
    border-bottom: 1px solid #71462f;
    margin: 0 10px;
    max-width: 100px;
}




html .content.app-content.section-padding-top-main,
.section-padding-top-main {
    padding-top: 5rem !important;
}

html .content.app-content.section-padding-bottom-main,
.section-padding-bottom-main {
    padding-bottom: 5rem !important;
}

.section-padding-bottom-video {
    padding-bottom: 6rem !important;
}

.video-home-padding {
    padding-bottom: 8rem !important;
}

html .content.app-content.section-padding-top-middle,
.section-padding-top-middle {
    padding-top: 2.5rem !important;
}

html .content.app-content.section-padding-bottom-middle,
.section-padding-bottom-middle {
    padding-bottom: 2.5rem !important;
}

html .content.app-content.section-margin-top-main,
.section-margin-top-main {
    margin-top: 5rem !important;
}

html .content.app-content.section-margin-bottom-main,
.section-margin-bottom-main {
    margin-bottom: 5rem !important;
}

html .content.app-content.section-margin-top-middle,
.section-margin-top-middle {
    margin-top: 2.5rem !important;
}

html .content.app-content.section-margin-bottom-middle,
.section-margin-bottom-middle {
    margin-bottom: 2.5rem !important;
}



.profile-feature img {
    max-width: 100%;
    max-height: 100%;
}

.profile-feature .text-block {
    padding-top: 12px;
    overflow: hidden;
}

.profile-feature .img-block {
    position: relative;
    /* width: 306px; */
    height: 230px;
    margin: 0 auto;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-align: center;
    align-items: center;
    text-align: center;
    border: solid 2px #003152;
    overflow: hidden;
    border-radius: 12px;
    -ms-border-radius: 12px;
    padding: 0.5rem;
}

.carousel-indicators {
    position: absolute;
    /* Adjust spacing below carousel */
    gap: 8px;
    /* Space between dots */
    list-style: none;
    padding-left: 0;
}

.carousel-indicators li {
    width: 40px;
    height: 40px;
    background-color: #71462f;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 16px;
    font-weight: bold;
    color: white;
    border: 2px solid #999;
    cursor: pointer;
    position: relative;
    text-indent: unset;
}

.carousel-indicators li span {
    position: absolute;
    font-size: 14px;
    color: white;
    font-weight: bold;
}

/* Set background color and padding */
#carousel-example-caption {
    /* background-color: #f0e5d8; */
    /* Light gray */
    padding: 10px 20px;
}

/* Flexbox for proper alignment */
.carousel-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 20px;
}

/* Text section */
.carousel-text {
    width: 50%;
    padding: 20px;
}

/* Image section */
.carousel-image {
    width: 50%;
    text-align: right;
}

.carousel-image img {
    max-width: 100%;
    height: auto;
}

/* Navigation arrows inside circular background */
.carousel-control-prev,
.carousel-control-next {
    width: 25px;
    height: 25px;
    background-color: rgba(0, 0, 0, 0.3);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.carousel-control-prev {
    left: -25px;
}

.carousel-control-next {
    right: -25px;
}

/* Make arrow icons visible */
.carousel-control-prev-icon,
.carousel-control-next-icon {
    width: 20px;
    height: 20px;
    background-size: contain;
    filter: brightness(100%);
}


/* Default (Desktop) - Text left, Image right */
.carousel-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
    gap: 20px;
}

/* Text section */
.carousel-text {
    width: 50%;
    padding: 20px;
}

/* Image section */
.carousel-image {
    width: 50%;
    text-align: right;
}

.carousel-image img {
    max-width: 100%;
    height: auto;
}

.min-heigh-auto {
    min-height: auto !important;
}

.seafarer-profile-slider-bg {
    background-color: #f0e5d8 !important;
}

.feater-center-main {
    display: flex;
    z-index: 2;
    flex-wrap: wrap;
}

.feater-center-child {
    align-self: center;
}

.list-of-feature li a {
    float: left;
    border: 2px solid var(--color-lightblack);
    color: var(--color-lightblack);
    font-family: var(--fontf-med);
    font-size: var(--font-size-18);
    padding: 12px 20px;
    border-radius: 60px;
    margin-bottom: 20px;
    -webkit-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

.list-of-feature li {
    float: left;
    width: auto;
    margin-right: 10px;
}

ul.list-of-feature {
    margin: 0;
    padding: 0;
    list-style: none;
    float: left;
    width: 100%;
}

.feature-section {
    padding-top: 2.5rem !important;
    padding-bottom: 2.5rem !important;
}

.profile-redirect-btn {
    border: 2px solid #00a2e8;
    background-color: #00a2e8;
    border-radius: 60px;
    padding: 12px 30px;
    color: #fff;
    font-family: var(--fontf-med);
    font-size: var(--font-size-18);
    float: left;
    -webkit-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

.moving-image-container {
    position: relative;
    /* height: 100%; */
    width: 100%;
    overflow: hidden;
}


.moving-image-container .image-1,
.moving-image-container .image-2 {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
    transition: all 0.3s ease;
}

.moving-image-container .image-2 {
    z-index: 1;
    /* The image underneath */
}

.moving-image-container .image-1 {
    z-index: 2;
    /* The image on top */
    opacity: 1;
    /* Initially visible */
    transform: translateY(0);
    /* No translation initially */
    width: 100%;
    height: auto;
    object-fit: contain;
    /* Ensures full visibility */
    position: relative;
    z-index: 2;
    /* Top Layer */
}

.scrolled .image-1 {
    /* transform: translateY(-50%); */
    /* Moves Image 1 upwards when scrolled */
    opacity: 0.5;
    /* Optional: fades Image 1 */
}

.pre-video-div {
    display: flex;
    justify-content: center;
    z-index: 2;
    flex-wrap: wrap;
}

.pre-video-div .home-intro-video {
    border: 1px solid black;
    border-left: 2px solid black;
    border-top: 2px solid black;
    max-width: 100%;
}

@media (min-width: 992px) {
    .landing-hero .hero-text-box {
        max-inline-size: 50rem !important;
    }
}

@media (min-width: 1200px) {

    #landingHero .container {
        max-width: 1100px;
    }
}

@media (max-width: 575.99px) {
    #landingHero .container {
        max-width: none;
    }
}

/* Responsive fix */
@media (max-width: 768px) {
    .divider {
        flex-wrap: wrap;
    }

    .divider-text {
        font-size: 2rem !important;
        /* Reduce font size on mobile */
        white-space: normal;
        /* Allow text to break */
        text-align: center;
    }

    .divider .divider-text:before,
    .divider .divider-text:after {
        max-width: 50px;
        /* Reduce divider width on mobile */
    }

}

@media (max-width: 767px) {
    .section-head-title {
        font-size: var(--font-size-28) !important;
        margin: 0 0 10px 0;
        line-height: 30px;
        text-align: center;
    }

    .section-socialize-title {
        font-size: 24px;
        line-height: 30px;
    }

    .hero-text-box .hero-title {
        margin-bottom: 22px !important;
    }

    .landing-hero .hero-animation-img .hero-dashboard-img {
        inline-size: 100% !important;
    }

    .section-sub-title {
        font-size: var(--font-size-20);
        margin: 0 0 8px 0;
        line-height: 22px;
    }

    .section-para-data {
        margin: 0 0 6px 0;
        font-size: var(--font-size-18);
        line-height: 22px;
    }

    html .content.app-content.section-padding-top-main,
    .section-padding-top-main {
        padding-top: 1.5rem !important;
    }

    html .content.app-content.section-padding-bottom-main,
    .section-padding-bottom-main {
        padding-bottom: 1.5rem !important;
    }

    html .content.app-content.section-margin-top-main,
    .section-margin-top-main {
        margin-top: 1.5rem !important;
    }

    html .content.app-content.section-margin-bottom-main,
    .section-margin-bottom-main {
        margin-bottom: 1.5rem !important;
    }

    /* for mobile padding  */
    html .content.app-content.section-padding-top-main-mobile,
    .section-padding-top-main-mobile {
        padding-top: 0 !important;
    }

    html .content.app-content.section-padding-bottom-main-mobile,
    .section-padding-bottom-main-mobile {
        padding-bottom: 0 !important;
    }

    html .content.app-content.section-margin-top-main-mobile,
    .section-margin-top-main-mobile {
        margin-top: 0 !important;
    }

    html .content.app-content.section-margin-bottom-main-mobile,
    .section-margin-bottom-main-mobile {
        margin-bottom: 0 !important;
    }

    .list-of-feature li a {
        font-size: var(--font-size-14);
        padding: 8px 10px;
        margin-bottom: 10px;
    }

    .profile-redirect-btn {
        padding: 8px 14px;
        font-size: var(--font-size-14);
    }

}

/* Responsive: Stack image on top on mobile */
@media (max-width: 768px) {
    .carousel-content {
        flex-direction: column;
        text-align: center;
    }

    .carousel-text,
    .carousel-image {
        width: 100%;
    }

    .carousel-image {
        text-align: center;
    }
}

@media screen and (min-device-width: 318px) and (max-device-width: 767px) {
    .mob_img_show {
        display: block;
        margin-bottom: 20px;
        max-width: 100%;
    }
}

.home-about {
    background: #dfefff;
}

/* Mobile: Stack Image on Top, Text Below */
@media (max-width: 768px) {
    .carousel-content {
        flex-direction: column-reverse;
        /* This moves the text below the image */
        text-align: center;
    }

    .carousel-text,
    .carousel-image {
        width: 100%;
    }

    .carousel-image {
        text-align: center;
    }

    .carousel-control-prev {
        left: 10px;
    }

    .carousel-control-next {
        right: 10px;
    }
}

@media (max-width: 575.98px) {
    .home-banner-content {
        padding: 0 !important;
    }
}

@media (min-width: 1px) {
    html body .app-content.app-content-pt-0-all {
        padding-top: 0px !important;
    }

    html body .app-content.app-content-pb-0-all {
        padding-bottom: 0px !important;
    }
}