/* 1. Update the section to give the video room to breathe */
.tj-hero-section {
    position: relative;
    overflow: hidden;
    z-index: 1;
    
    /* ADD THIS: Forces the section to be taller, revealing more of the video */
    min-height: 90vh; /* Adjust between 80vh to 100vh based on your preference */
    
    /* ADD THESE: Keeps your text vertically centered in the newly expanded space */
    display: flex;
    align-items: center; 
}

/* 2. Adjust the video positioning */
.hero-bg-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    
    /* UPDATED: The first value (70%) moves it left. 
       The second value (80%) shifts the focal point to keep the ship's bridge and water in frame. */
    object-position: 70% 80%; 
    
    z-index: -2;
}
/* Optional: Adds a dark tint over the video so white text is easier to read */
.hero-video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.2); /* Adjust 0.4 to change darkness (0.0 to 1.0) */
    z-index: -1; 
}
/* Hides the top bar when the user scrolls and the sticky header activates */
.tj-header-area.sticky .tj-header-topbar-area,
.tj-header-area.is-sticky .tj-header-topbar-area,
.tj-header-area.header-fixed .tj-header-topbar-area,
.tj-header-area.scroll-header .tj-header-topbar-area {
    display: none !important;
}

/* Optional: Ensure the bottom menu area transitions smoothly */
.tj-bottom-content-area {
    transition: all 0.3s ease-in-out;
}


@media (max-width: 767px) {
    /* 1. Hides the long paragraph on mobile to drastically reduce height */
    .tj-hero-section .desc {
        display: none !important;
    }

    /* 2. Shrinks the main heading text */
    .tj-hero-section .sec-title {
        font-size: 36px !important; 
        line-height: 1.2 !important;
    }

    /* 3. Keeps padding tight */
    .tj-hero-section {
        min-height: auto; 
        padding-top: 100px !important; 
        padding-bottom: 50px !important; 
    }
    
    /* 4. Keeps the ship centered */
    .hero-bg-video {
        object-position: 50% center; 
    }
}

* --- MAIN HEADER LOGO --- */
.tj-header-area .logo-area img {
    /* Forces the image to exactly this size, bypassing column limits */
    width: 350px !important; 
    max-width: none !important; 
    height: auto !important;
    
    /* Removes the white background box and padding */
    background-color: transparent !important; 
    padding: 0 !important; 
    
    /* Adds a soft white glow behind the logo so the dark text remains readable */
    filter: drop-shadow(0px 0px 10px rgba(255, 255, 255, 0.8)) drop-shadow(0px 0px 20px rgba(255, 255, 255, 0.5));
    
    transition: all 0.3s ease;
}

/* Adjusts the logo size for mobile screens */
@media (max-width: 767px) {
    .logo-area img {
        max-width: 280px !important;
        padding: 8px 12px;
    }
}

/* --- STICKY HEADER LOGO --- */
.tj-header-area.sticky .logo-area img,
.tj-header-area.is-sticky .logo-area img {
    /* Keeps the scrolled logo large, but slightly smaller than the main one */
    max-width: 350px !important; 
    
    /* Removes the white box from the sticky header as well */
    background-color: transparent !important;
    padding: 0 !important; 
}

/* Pushes the menu links to the far right edge */
.tj-menu-area nav > ul {
    display: flex;
    justify-content: flex-end;
    margin: 0;
}

/* Reduces the top and bottom padding of the menu container */
.tj-bottom-content-area {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* Reduces the height of the clickable menu links */
.tj-menu-area nav ul li a {
    padding-top: 15px !important; 
    padding-bottom: 15px !important;
}

/* Ensures the sticky header also stays slim when scrolling */
.tj-header-area.sticky .tj-menu-area nav ul li a {
    padding-top: 5px !important;
    padding-bottom: 5px !important;
}

.tj-hero-section {
    padding-top: 170px !important; /* Adjust this number to move the text higher or lower */
}

/* Adjusts the spacing for mobile screens so it doesn't get pushed down too far */
@media (max-width: 767px) {
    .tj-hero-section {
        padding-top: 130px !important; 
    }
}

.tj-hero-section .tj-sec-heading .sec-title{
    font-size: 55px;
}
.tj-hero-section .tj-sec-heading .sec-title span {
    display: block !important;
    padding-left: 0 !important;
    margin-top: 15px; /* Adds a bit of breathing room between the two lines */
    font-size: 45px;
}

Forces the card to stack the icon and text vertically */
.tj-service-item-two {
    flex-direction: column !important;
    align-items: flex-start !important;
}

/* 2. Allows the text container to drop below the icon and take full width */
.tj-service-item-two .service-content {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 0 !important; /* Removes the default template padding */
    margin-top: 10px !important;
}

/* 3. Breaks the horizontal flexbox on the description wrapper */
.tj-service-item-two .service-content .desc {
    display: block !important;
    width: 100% !important;
}

/* 4. Forces the bullet list to display vertically with circles */
.tj-service-item-two .service-content .desc ul.service-bullet-list {
    display: block !important;
    padding-left: 20px !important;
    margin-bottom: 15px !important;
    list-style-type: disc !important;
}

/* 5. Styles the individual bullet points to match your paragraph text */
.tj-service-item-two .service-content .desc ul.service-bullet-list li {
    display: list-item !important;
    width: 100% !important;
    text-align: left !important;
    margin-bottom: 8px !important;
    font-size: 17.24px !important;
    line-height: 1.8 !important;
}


/* 6. Mobile adjustment for the bullet text size */
@media (max-width: 1199px) {
    .tj-service-item-two .service-content .desc ul.service-bullet-list li {
        font-size: 16px !important;
    }
}

/* Hides the horizontal dash next to active and hovered menu links */
.tj-menu-area ul li a::before {
    display: none !important;
}
.footer-menu ul li a::before {
    display: none !important;
}

.tj-service-item-three .service-icon .custom-card-icon {
    width: 85px; 
    height: 85px;
    border-radius: 50%; /* Keeps the image perfectly round */
    border: 5px solid #ffffff; /* Adds the thick white border */
    box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.1); /* Subtle shadow to lift it off the background */
    object-fit: cover;
    background-color: #ffffff;
    
    /* Ensures it sits correctly above the main card image */
    position: relative;
    z-index: 2;
    display: inline-block;
}

.tj-service-section-two .tj-sec-heading-two {
    margin-bottom: 40px !important;
}
/* Forces the counter icon and text to stay side-by-side on all screens */
.tj-counter-section-two .counter-item-three {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
}

/* Prevents the text itself from breaking into awkward lines */
.tj-counter-section-two .counter-item-three .counter-number {
    white-space: nowrap !important;
}
/* Paragraph and Title text inside the slider */
.custom-portfolio-text .portfolio-desc {
    color: #666 !important;
    margin-bottom: 20px;
    font-size: 16px;
    line-height: 1.8;
}

.custom-portfolio-text .portfolio-title {
    color: #26333e !important;
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 15px;
}

/* 1. Standard Grey Dot Bullet List */
.custom-portfolio-text .custom-dot-list {
    list-style-type: disc !important;
    padding-left: 20px;
    margin: 0;
}
.custom-portfolio-text .custom-dot-list li {
    color: #666 !important;
    font-size: 16px;
    line-height: 1.8;
    margin-bottom: 8px;
    display: list-item;
}

/* 2. Green Solid Checkmark List (Matches your Digitalization section) */
.custom-portfolio-text .custom-check-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.custom-portfolio-text .custom-check-list li {
    color: #666 !important;
    font-size: 16px;
    line-height: 1.8;
    margin-bottom: 15px;
    display: flex;
    align-items: flex-start; /* Aligns the icon to the top of multi-line paragraphs */
    gap: 12px; /* Exact spacing between icon and text */
}
.custom-portfolio-text .custom-check-list li i {
    color: #38c868 !important; /* The vibrant green from your screenshot */
    font-size: 20px;
    margin-top: 4px; /* Nudges the icon down to center it with the first line of text */
   
}
p {
        text-align: justify;
}
.justify{
    text-align: justify;
    
}
/* Targets BOTH the original <i> icon and your custom <img> icons */
.tj-service-item-three .service-image .service-icon i,
.tj-service-item-three .service-image .service-icon img.custom-card-icon {
    width: 82px !important;
    height: 82px !important;
    display: inline-block !important;
    border-radius: 50% !important;
    border: 4px solid var(--tj-color-common-white) !important;
    box-sizing: border-box !important;
    background: var(--tj-color-theme-primary) !important;
    object-fit: cover !important;
    margin: 0 !important;
    padding: 0 !important;
}
/* Forces the hero description and any JS-injected elements to justify */
.tj-hero-section .tj-sec-heading .desc,
.tj-hero-section .tj-sec-heading .desc p.justify,
.tj-hero-section .tj-sec-heading .desc p.justify * {
    text-align: justify !important;
    text-justify: inter-word !important;
    white-space: normal !important;
}

.infographic{
    width: 100px !important;
    height: 100x !important;
    display: inline-block !important;
    
    box-sizing: border-box !important;
   
    object-fit: cover !important;
    margin: 0 !important;
    padding: 0 !important;
}
/* Centers the icon and text, and fixes alignment */
    .counter-item-three .counter-icon {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-end; /* Aligns items to the bottom */
        text-align: center;
        gap: 20px; /* Spacing between image and text */
        height: 160px; /* Gives the whole block a uniform height */
    }
    
    .counter-item-three .counter-icon .infographic {
        max-width: auto; 
        height: 100; /* Forces every image to be exactly 110px tall */
        object-fit: contain; /* Prevents the images from stretching or squishing */
    }
    
    .counter-item-three .counter-icon .sub-title {
        font-size: 22px; 
        font-weight: 600;
        color: #ffffff; 
        letter-spacing: 1px;
        text-transform: uppercase;
        margin: 0;
        line-height: 1;
    }
    /* Forcefully remove the vertical divider line in the top header */
.header-info ul li {
    border: none !important;
}

.header-info ul li::after,
.header-info ul li::before {
    display: none !important;
}
/* Offsets the anchor scroll so the sticky header doesn't cover the title */
#about, 
#service, 
#contact {
    scroll-margin-top: 110px; /* Adjust this number to match the exact height of your header */
}
/* 1. Forces the Bootstrap row to treat all columns as equal height */
    .tj-blog-section-two .row {
        display: flex;
        flex-wrap: wrap;
    }
    
    /* 2. Stretches the card container */
    .tj-blog-item-two {
        margin-bottom: 30px;
        height: 100%; 
        display: flex;
        flex-direction: column;
    }
    
    /* 3. Keeps images perfectly uniform */
    .tj-blog-item-two .blog-image img {
        width: 100%;
        height: 280px !important; 
        object-fit: cover; 
    }
    
    /* 4. Restores the overlapping white name tag and aligns them all */
    .tj-blog-item-two .blog-content {
        position: relative !important;
        z-index: 2;
        margin: -40px 15px 0 15px !important; /* Pulls the box up over the image to create the tag */
        padding: 20px 15px !important;
        background: #ffffff !important;
        box-shadow: 0 4px 15px rgba(0,0,0,0.1); /* Adds a soft drop shadow to the white tag */
        text-align: center;
        flex-grow: 1; /* Forces all tags to stretch to the exact same height */
        display: flex;
        align-items: center; 
        justify-content: center; 
    }
    
    .tj-blog-item-two .blog-content .title {
        margin-bottom: 0 !important;
        font-size: 18px;
    }
    /* Creates an unbreakable rule for the dark header */
.tj-header-area.locked-dark,
.header-sticky.locked-dark {
    background-color: #2b323c !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    z-index: 9999 !important;
    transition: background-color 0.3s ease;
}

/* Hides the top contact bar when the dark header is active */
.tj-header-area.locked-dark .tj-header-topbar-area,
.header-sticky.locked-dark .tj-header-topbar-area {
    display: none !important;
}
/* Styles the service lists to look clean and professional */
.service-check-list ul {
    list-style: none;
    padding-left: 0;
    margin-top: 10px;
    margin-bottom: 20px;
}

.service-check-list ul li {
    font-size: 16px;
    color: #666; 
    margin-bottom: 12px; /* Slightly increased for better spacing between multi-line items */
    display: flex;
    align-items: flex-start; /* Forces the icon to the top of the text */
    line-height: 1.6; /* Improves readability for wrapped text */
}

.service-check-list ul li i {
    color: #2bc168; 
    margin-right: 12px;
    font-size: 18px;
    margin-top: 4px; /* Nudges the icon down just enough to perfectly center it with the first line of text */
}

/* Increases the logo size specifically for mobile devices */
@media (max-width: 768px) {
    .tj-header-area .logo img,
    .tj-logo img,
    .header-logo img {
        max-width: 280px !important; /* Increase or decrease this number to adjust the size */
        height: auto !important;
    }
}
@media (max-width: 768px) {
    /* Hides the bulky top contact bar on mobile screens */
    .tj-header-topbar-area {
        display: none !important;
    }
    
    /* Forces the logo to be much larger and more visible */
    .tj-bottom-content-area .logo-area img {
        max-width: 280px !important; 
        height: auto !important;
    }
    
    /* Adds proper breathing room around the header on mobile */
    .tj-bottom-content-area {
        padding: 15px 0 !important;
    }
}