/* Primary Theme Based on Logo */
:root {
    --primary-blue: #0A3D8F;
    --orange: #FF6A00;
}

.navbar.bg-primary {
    background-color: var(--primary-blue) !important;
}

/* HERO SECTION */
.hero-section {
    min-height: 90vh;
    background: url('../img/hero-truck.png') center/cover no-repeat !important;
    position: relative;
    display: flex;
    align-items: center;
    color: #000;
}

/* Optional overlay */
.hero-section::before {
    content: "";
    position: absolute;
    inset: 0;    
    z-index: 1;
}

.hero-section .container {
    position: relative;
    z-index: 2;
}

/* Typing animation */
.typing-text {
    border-right: 3px solid #FF6A00;
    white-space: nowrap;
    overflow: hidden;
    display: inline-block;
    animation: typing 4s steps(40, end) infinite, blink 0.7s infinite;
}

/* @keyframes typing {
    0% { width: 0 }
    40% { width: 400px }
    60% { width: 400px }
    100% { width: 0 }
}

@keyframes blink {
    0%, 100% { border-color: transparent }
    50% { border-color: #FF6A00 }
} */

body p {
    text-align: justify;
    text-justify: inter-word;
}

footer p {
    text-align: center !important;
}


footer.bg-primary {
    background-color: #031A3F !important; /* deep dark blue */
}


/* SERVICE CARDS */
.services-section {
    background-color: #f7f7f7;
    padding-top: 70px;
    padding-bottom: 70px;
}

.service-card {
    border: 2px solid #eee;
    transition: 0.3s;
}

.service-card:hover {
    border-color: var(--orange);
    transform: translateY(-5px);
}

/* FOOTER */
footer {
    background-color: var(--primary-blue);
}

/* Header Background */
.nitai-header {
    background-color: white !important; /* Deep Blue */
}

/* Phone Button */
.phone-btn {
    background-color: #FF6A00;
    color: #fff;
    padding: 8px 18px;
    border-radius: 5px;
    font-weight: 600;
    transition: 0.3s;
}

.phone-btn:hover {
    background-color: #d85b00;
    color: white;
}

/* NAV MENU TEXT BLACK */
.navbar .nav-link {
    color: #000 !important;
    font-weight: 600;
}

.navbar .nav-link:hover {
    color: #FF6A00 !important; /* orange hover */
}

/* ORANGE BUTTON (Primary) */
.btn-primary {
    background-color: #FF6A00 !important;
    border-color: #FF6A00 !important;
    color: #fff !important;
    font-weight: 600;
}

.btn-primary:hover {
    background-color: #d85b00 !important;
    border-color: #d85b00 !important;
}

/* WHITE BUTTON WITH ORANGE BORDER (Outline) */
.btn-outline-primary {
    border-color: #FF6A00 !important;
    color: #FF6A00 !important;
    font-weight: 600;
}

.btn-outline-primary:hover {
    background-color: #FF6A00 !important;
    color: #fff !important;
}

/* ABOUT SECTION */
.about-section {
    padding-top: 80px;
    padding-bottom: 80px;
}

.about-left h1 .text-highlight {
    color: #FF6A00;
}

/* IMAGE ANIMATION */
.about-right {
    animation: slideInRight 1.2s ease;
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(80px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* ORANGE BUTTON */
.about-section .btn-primary {
    background-color: #FF6A00;
    border-color: #FF6A00;
    font-weight: 600;
}

.about-section .btn-primary:hover {
    background-color: #d85b00;
    border-color: #d85b00;
}

/* TEXT COLOR FIX */
.about-section h3,
.about-section p {
    color: #000;
}

.about-img {
    max-height: 420px;
    object-fit: contain;
}

/* WHY CHOOSE US SECTION */
.why-section {
    padding-top: 80px;
    padding-bottom: 80px;
}

.highlight-text {
    color: #FF6A00;
}

.why-img {
    max-height: 550px;
    border-radius: 10px;
    object-fit: cover;
}

/* Feature Boxes */
.feature-box {
    border-radius: 10px;
    transition: 0.3s;
}

.feature-box:hover {
    transform: translateY(-6px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.15);
}

.icon-box {
    font-size: 32px;
    color: #FF6A00;
}

/* Animations */
.why-left {
    animation: fadeIn 1.2s ease;
}

.why-right {
    animation: fadeInRight 1.2s ease;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(40px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInRight {
    from { opacity: 0; transform: translateX(60px); }
    to   { opacity: 1; transform: translateX(0); }
}



/* ABOUT PAGE HERO */
.about-hero {
    background: url('../img/p2.jpg') center/cover no-repeat;
    height: 45vh;               /* SAME height for all hero sections */

}

/* ABOUT INTRO */
.about-intro p {
    max-width: 800px;
    margin: auto;
}

/* HISTORY BLOCKS */
.history-block h5 {
    color: #FF6A00;
}

/* WHY CHOOSE US */
.why-about {
    background: #f7f7f7;
}

.why-box {
    background: #fff;
    border-radius: 10px;
    transition: 0.3s;
}

.why-box:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 25px rgba(0,0,0,0.15);
}

.why-icon {
    font-size: 40px;
    color: #FF6A00;
}

/* JOIN SECTION */
.join-section .contact-btn {
    background-color: #FF6A00 !important;
    border-color: #FF6A00 !important;
    font-weight: 600;
}

/* FORCE ORANGE COLOR FOR HERO HIGHLIGHT TEXT */
/* HERO SECTION (fixed) */
.page-hero {
    position: relative;
    height: 50vh; /* You can change to 45vh if you want */
    background-size: cover;
    background-position: center;
    display: flex;
    justify-content: center; 
    align-items: center;     
    text-align: center;
    color: #fff;
}

/* DARK BLACK OVERLAY */
.page-hero .overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.65); /* stronger black */
    backdrop-filter: blur(2px);      /* blur effect */
}

/* CENTER TEXT CONTAINER */
.hero-content {
    position: relative;
    z-index: 2;
}

/* TEXT STYLING */
.page-title {
    font-size: 48px;
    font-weight: 700;
    margin-bottom: 5px;
}

.page-hero .highlight {
    color: #FF6A00 !important;
}

.breadcrumb-text {
    color: #f1f1f1;
    font-size: 18px;
}

.breadcrumb-text a {
    color: #FF6A00 !important;
    font-weight: 600;
}

/* Right full height image */
.about-full-img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* fills height nicely */
    border-radius: 10px;
}

/* Fix: make parent column stretch full height */
@media (min-width: 768px) {
    .col-md-6.d-flex {
        align-items: stretch;
    }
}


/* Ensure all boxes are equal height */
.why-box {
    height: 100%;
    border: 1px solid #eee;
    border-radius: 10px;
    transition: all 0.3s ease-in-out;
    background: #fff;
}

/* Icon Styling */
.why-icon {
    font-size: 40px;
    color: #ff7a00; /* theme orange */
    transition: inherit;
}

/* Headings */
.why-box h5 {
    transition: inherit;
}

/* Text */
.why-box p {
    transition: inherit;
}

/* HOVER EFFECT (OSTT style) */
.why-box:hover {
    background-color: #ff7a00;
    color: #fff;
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}

.why-box:hover .why-icon {
    color: #fff;
}

.why-box:hover h5 {
    color: #fff;
}

/* Highlight span color */
.highlight {
    color: #ff7a00;
    font-weight: bold;
}
.image-block,
.content-block {
    height: auto;
}

/* Make image height equal to content height */
@media (min-width: 768px) {
    .image-1 { height: 100%; }
    .image-2 { height: 100%; }

    .content-1,
    .content-2 {
        height: 100%;
    }

    .object-cover {
        object-fit: cover;
    }
}

.carrier-form input,
.carrier-form textarea {
    border-radius: 6px;
    padding: 12px;
    border: 1px solid #ddd;
    font-size: 15px;
}

.carrier-form input:focus,
.carrier-form textarea:focus {
    border-color: var(--primary);
    box-shadow: none;
}

.carrier-form button {
    background-color: var(--primary);
    border: none;
    font-size: 16px;
    font-weight: 600;
}

.carrier-form button:hover {
    background-color: #d36407;
}
/* Contact Form */
.contact-form input,
.contact-form textarea {
    border-radius: 6px;
    padding: 12px;
    font-size: 15px;
    border: 1px solid #ddd;
}

.contact-form input:focus,
.contact-form textarea:focus {
    border-color: var(--primary);
    box-shadow: none !important;
}

.contact-form button {
    background: var(--primary);
    font-size: 16px;
    border: none;
}

.contact-form button:hover {
    background: #d26207;
}
footer p {
    font-size: 15px;
}

footer i {
    color: #fff;
}
.typing-text {
    border-right: 3px solid #ff6600; /* cursor color */
    white-space: nowrap;
    overflow: hidden;
    width: 100%;
    animation: caret 0.75s infinite;
}

@keyframes caret {
    50% { border-color: transparent; }
}
        
.hero-section {
    position: relative;
    background: url("assets/img/hero-truck.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    min-height: 90vh;
    color: #fff;
}

/* Dark overlay */
.hero-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.55); /* darker = increase 0.55 -> 0.65 or more */
    backdrop-filter: brightness(0.8); /* extra dark effect */
    z-index: 1;
}

/* Ensure text appears above overlay */
.hero-section .container {
    position: relative;
    z-index: 2;
}

.hero-section {
    position: relative;
    background: url("assets/img/hero-truck.png");
    background-size: cover;
    background-position: center;
    min-height: 90vh;
    color: #fff;
}

/* Dark overlay */
.hero-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.60); /* <-- change 0.60 to 0.70 for more dark */
    z-index: 1;
}

/* Bring content front */
.hero-section .container {
    position: relative;
    z-index: 2;
}

/* Make both texts white */
.hero-section h2,
.hero-section h1 {
    color: #fff !important;
}


.icon-round {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background: var(--primary-blue); /* Your theme blue */
    display: flex;
    justify-content: center;
    align-items: center;
}

.icon-round i {
    color: #fff;
    font-size: 20px;
}