/* =====================================================
   PACKRAJ CUSTOM OVERRIDES
   Drop this file into assets/css/ and it will apply
   on top of the original Helios main.css
   ===================================================== */

/* --- 1. FONT: League Spartan everywhere --- */
body,
h1, h2, h3, h4, h5, h6,
p, a, li, span, article, nav, button, input, textarea {
    font-family: 'League Spartan', sans-serif !important;
}

/* --- 2. BACKGROUND: #2C2C2A dark charcoal across all wrappers --- */
body,
#page-wrapper,
.wrapper.style1,
.wrapper.style2,
.wrapper.style3,
#footer,
#header,
#banner {
    background-color: #2C2C2A !important;
}

.wrapper.style1 {
    background-color: #252523 !important;
}

.wrapper.style2 {
    background-color: #2C2C2A !important;
}

/* --- 3. TEXT: Make sure text stays readable on dark background --- */
body,
p,
li,
article p,
.container p {
    color: #e0ddd8 !important;
}

h1, h2, h3, h4, h5, h6 {
    color: #230b0b !important;
}

/* --- 4. NEW NAV BAR LAYOUT (Overrides Helios Defaults) --- */
#header {
    padding-top: 80px !important; /* Pushes the hero tagline down so nav doesn't cover it */
}

#nav {
    background-color: #2C2C2A !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 80px !important;
    display: flex !important;
    justify-content: space-between !important; /* Forces logo left, links right */
    align-items: center !important;
    padding: 0 5% !important;
    box-sizing: border-box !important;
    z-index: 10000 !important;
}

#nav ul.nav-links {
    display: flex !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
}

#nav ul.nav-links li {
    list-style: none !important;
    margin: 0 0 0 25px !important; /* Spacing between links */
    padding: 0 !important;
    display: inline-block !important;
}

#nav a {
    color: #e0ddd8 !important;
    text-decoration: none !important;
}

#nav a:hover {
    color: #EF9F27 !important;
}

/* --- 5. LOGO IN NAVBAR: Stroke removed, smaller size --- */
#nav-logo {
    font-size: 2.2em !important; 
    font-weight: 800 !important;
    letter-spacing: 0.05em !important;
    margin: 0 !important;
    padding: 0 !important;
    /* Black text-stroke has been removed */
}

#nav-logo a {
    text-decoration: none !important;
    border-bottom: none !important;
}

#nav-logo .logo-pack {
    color: #EF9F27 !important;
    text-decoration: none !important; 
    position: relative !important;
    display: inline-block !important;
}

/* Custom underline for Pack adjusted for smaller size */
#nav-logo .logo-pack::after {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    bottom: -4px !important; 
    width: 100% !important;
    height: 6px !important; 
    background-color: #EF9F27 !important; 
    border: 2px solid #000000 !important; 
    border-radius: 2px !important; 
}

#nav-logo .logo-raj {
    color: #FAC775 !important;
}

/* --- 6. H1 TAGLINE (Centered in Hero) --- */
/* --- 6. H1 TAGLINE (Centered in Hero) --- */
h1.main-tagline {
    color: #000000 !important; 
    font-weight: 800 !important; 
    font-size: 2.8em !important; /* Made significantly bigger! */
    letter-spacing: 0.02em !important;
    margin-top: 80px !important; /* Pushes it down nicely from the nav bar */
    margin-bottom: 20px !important; /* Creates space between the text and the stats */
    line-height: 1.2 !important; /* Prevents text from overlapping if it wraps on smaller screens */
    text-shadow: 1px 1px 15px rgba(255, 255, 255, 0.4) !important; /* Very subtle white glow to ensure it pops against the warehouse background */
}

/* --- 7. BUTTONS --- */
.button,
a.button,
input[type="submit"],
input[type="reset"],
input[type="button"] {
    background-color: #EF9F27 !important;
    border-color: #EF9F27 !important;
    color: #2C2C2A !important;
    font-family: 'League Spartan', sans-serif !important;
    font-weight: 700 !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
}

.button:hover,
a.button:hover {
    background-color: #FAC775 !important;
    border-color: #FAC775 !important;
    color: #2C2C2A !important;
}

/* Explore button (Long Rectangle) */
.button.circled {
    background-color: #EF9F27 !important;
    border-color: #EF9F27 !important;
    color: #2C2C2A !important;
    border-radius: 5px !important; 
    width: 220px !important;       
    height: 65px !important;       
    line-height: 65px !important;  
    padding: 0 !important;         
}

.button.circled:hover {
    background-color: #FAC775 !important;
    border-color: #FAC775 !important;
}

/* --- 8. FOOTER --- */
.icon.circled {
    background-color: #EF9F27 !important;
    border-color: #EF9F27 !important;
    color: #2C2C2A !important;
}

#footer {
    color: #a09d98 !important;
}

#footer a {
    color: #EF9F27 !important;
}

#footer a:hover {
    color: #FAC775 !important;
}

#footer h2,
#footer h3 {
    color: #ffffff !important;
}

/* --- 9. REMOVE HEADER DIVIDER LINE --- */
#header .inner header hr {
    display: none !important;
}

/* --- 10. BANNER / CAROUSEL --- */
#banner header h2 {
    color: #ffffff !important;
}

#banner header h2 strong {
    color: #EF9F27 !important;
}

#banner header p {
    color: #FAC775 !important;
}

.container.special > header h2 {
    color: #ffffff !important;
}

.container.special > header p {
    color: #a09d98 !important;
}

article h3 a,
article h3 {
    color: #FAC775 !important; 
    font-weight: 800 !important; 
    text-shadow: none !important; 
}

article h3 a:hover {
    color: #EF9F27 !important;
}

article p {
    color: #000000 !important; 
    font-weight: 600 !important; 
}

/* --- 11. COPYRIGHT & ICONS --- */
.copyright,
.copyright li,
.copyright a {
    color: #666360 !important;
}

.copyright a:hover {
    color: #EF9F27 !important;
}

ul.divided li {
    border-top-color: #3e3d3b !important;
}

ul.icons a {
    color: #2C2C2A !important;
    background-color: #EF9F27 !important;
    border-color: #EF9F27 !important;
}

ul.icons a:hover {
    background-color: #FAC775 !important;
    border-color: #FAC775 !important;
}

/* --- 12. HERO BACKGROUND IMAGE --- */
body.homepage #header {
    background-image: url('../../images/hero-bg.webp') !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}

/* --- 13. REMOVE NAVIGATION BAR DECORATIONS --- */
#nav::before,
#nav::after {
    display: none !important;
}

/* --- HIDE NAV LINES WITHOUT BREAKING LAYOUT --- */
#nav::before,
#nav::after,
#nav ul::before,
#nav ul::after,
#nav > ul::before,
#nav > ul::after {
    background-color: transparent !important;
    background-image: none !important;
    border: none !important;
    box-shadow: none !important;
    color: transparent !important;
}

/* --- 14. DYNAMIC STATS COUNTER --- */
/* --- 14. DYNAMIC STATS COUNTER --- */
.stats-container {
    display: flex !important;
    justify-content: center !important; 
    align-items: center !important;
    flex-wrap: nowrap !important; 
    gap: 60px !important; 
    margin: 20px auto 40px auto !important; /* Reduced top margin so it sits closer to the new big tagline */
    width: 100% !important;
    max-width: 1400px !important; 
}

/* Keeps it responsive */
@media (max-width: 980px) {
    .stats-container {
        flex-wrap: wrap !important;
        gap: 40px !important;
    }
}

.stat-box {
    text-align: center !important;
}

.stat-number {
    font-size: 4em !important; 
    font-weight: 800 !important;
    color: #EF9F27 !important; 
    -webkit-text-stroke: 2px #000000 !important; 
    line-height: 1 !important;
    margin-bottom: 5px !important;
}

.stat-label {
    color: #000000 !important; 
    font-weight: 800 !important; 
    font-size: 1.1em !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
    white-space: nowrap !important; 
}
/* Keeps it responsive so they wrap nicely on mobile phones instead of breaking */
@media (max-width: 980px) {
    .stats-container {
        flex-wrap: wrap !important;
        gap: 40px !important;
    }
}

.stat-box {
    text-align: center !important;
}

.stat-number {
    font-size: 4em !important; /* Huge numbers */
    font-weight: 800 !important;
    color: #EF9F27 !important; /* Pack orange */
    -webkit-text-stroke: 2px #000000 !important; /* Black outline */
    line-height: 1 !important;
    margin-bottom: 5px !important;
}

.stat-label {
    color: #000000 !important; /* Pitch black */
    font-weight: 800 !important; /* Bold */
    font-size: 1.1em !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
    white-space: nowrap !important; /* Prevents the text from stacking on itself */
}

/* --- 15. INNER PAGE HEADER FIX (Removes the purple gap) --- */
body:not(.homepage) #header {
    background-image: none !important; /* Kills the purple image/gradient */
    background-color: #2C2C2A !important; /* Blends cleanly behind the nav bar */
    padding: 0 !important; /* Removes the massive empty space */
    min-height: 80px !important; /* Locks it to exactly the height of the nav bar */
    border-bottom: 2px solid #3e3d3b !important; /* Optional: adds a subtle dark line under the nav to separate it from the dark background below */
}

/* --- 17. REMOVE PURPLE LOADING OVERLAY --- */
body.homepage #header::before,
body.homepage #header::after {
    background-image: none !important; /* Kills the purple gradient */
    background-color: #2C2C2A !important; /* Sets the loading screen to dark charcoal */
}

/* Ensure the main header background has a dark fallback while the image loads */
body.homepage #header {
    background-color: #2C2C2A !important;
}

/* --- 18. CUSTOM REQUIREMENT CTA --- */
#custom-cta {
    padding-top: 1.5em !important; /* Reduced from 3em */
    padding-bottom: 1em !important; /* Reduced to bring the blue image closer */
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

#custom-cta .custom-cta-heading {
    color: #ffffff !important;
    font-size: 2.5em !important;
    font-weight: 800 !important;
    margin-bottom: 0.2em !important; /* Tighter space below heading */
}

#custom-cta .custom-cta-heading strong {
    color: #EF9F27 !important; 
}

#custom-cta .custom-cta-sub {
    color: #FAC775 !important;
    font-size: 1.2em !important;
    font-weight: 300 !important;
    letter-spacing: 0.05em !important;
    margin-bottom: 1.5em !important; /* Tighter space above the button */
}

/* --- 19. AGGRESSIVELY REDUCE SECTION SPACING --- */

/* Centers the banner text perfectly in the dark space */
#banner {
    padding-top: 3.5em !important;    /* Balances the space above */
    padding-bottom: 3.5em !important; /* Balances the space below */
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

#banner header {
    margin-bottom: 0 !important; /* Prevents hidden margins from pushing it down */
}
/* Tightens the space above and below the scrolling products */
.carousel {
    margin-top: 0 !important; 
    padding-top: 0 !important;
    margin-bottom: 0 !important; 
    padding-bottom: 0 !important;
}

/* Pulls the blue image section up closer to the Custom CTA button */
.wrapper.style2 {
    padding-top: 3em !important; /* Overrides the template's massive default padding */
}

/* --- 20. CAROUSEL PRODUCT HOVER EFFECT --- */
.carousel article {
    transition: transform 0.3s ease, box-shadow 0.3s ease !important; /* Smooth animation */
    cursor: grab !important; /* Changes mouse icon to a 'grab' hand */
}

.carousel article:hover {
    transform: scale(1.05) !important; /* Makes the product card slightly larger */
    box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.4) !important; /* Adds a nice depth shadow */
    z-index: 10 !important; /* Ensures the zoomed card stays above the others */
}

.carousel article:active {
    cursor: grabbing !important; /* Mouse icon changes when clicked and held */
}

/* --- 21. PRODUCTS PAGE LAYOUT --- */
.page-title-section {
    text-align: center !important;
    padding: 60px 20px 20px 20px !important;
    background-color: #2C2C2A !important;
}

.page-title-section h2 {
    color: #ffffff !important;
    font-size: 3.5em !important;
    font-weight: 800 !important;
    margin-bottom: 10px !important;
}

.page-title-section p {
    color: #FAC775 !important; /* Soft yellow/orange */
    font-size: 1.2em !important;
    margin-bottom: 0 !important;
}

/* The 4x2 Grid System */
.products-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important; /* Forces 4 items per row */
    gap: 30px !important;
    padding: 40px 5% 80px 5% !important;
    background-color: #2C2C2A !important;
}

.product-card {
    background: #ffffff !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    text-align: center !important;
    padding-bottom: 20px !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}

.product-card:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.4) !important;
}

.product-card img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
}

.product-card h3 a {
    color: #FAC775 !important;
    font-weight: 800 !important;
    font-size: 1.3em !important;
    display: block !important;
    margin: 20px 0 10px 0 !important;
    text-shadow: none !important;
    text-decoration: none !important;
}

.product-card h3 a:hover {
    color: #EF9F27 !important;
}

.product-card p {
    color: #000000 !important;
    font-weight: 600 !important;
    padding: 0 15px !important;
    margin: 0 !important;
    font-size: 0.9em !important;
}

/* Makes the grid responsive for smaller screens */
@media (max-width: 1100px) {
    .products-grid { grid-template-columns: repeat(2, 1fr) !important; } /* 2 per row on tablets */
}
@media (max-width: 600px) {
    .products-grid { grid-template-columns: 1fr !important; } /* 1 per row on phones */
}

/* --- 22. SINGLE PRODUCT PAGE STYLING --- */
.product-hero {
    background-size: cover !important;
    background-position: center !important;
    padding: 180px 20px 120px 20px !important; /* Space above and below the title */
    text-align: center !important;
    position: relative !important;
}

/* Dark overlay so the white text pops over the image */
.product-hero::before {
    content: "" !important;
    position: absolute !important;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(44, 44, 42, 0.6) !important; 
    z-index: 1 !important;
}

.product-hero h1 {
    position: relative !important;
    z-index: 2 !important; /* Puts the text on top of the overlay */
    color: #ffffff !important;
    font-size: 4em !important;
    font-weight: 800 !important;
    margin: 0 !important;
}

.product-details {
    background-color: #2C2C2A !important;
    padding: 80px 5% !important;
    text-align: center !important;
}

.product-details p {
    color: #e0ddd8 !important;
    font-size: 1.3em !important;
    max-width: 800px !important;
    margin: 0 auto 60px auto !important;
    line-height: 1.6 !important;
}

.product-cta h3 {
    color: #FAC775 !important;
    font-size: 2em !important;
    font-weight: 800 !important;
    margin-bottom: 25px !important;
}

/* --- 23. HERO BUTTONS (Side by Side) --- */
.hero-buttons {
    display: flex !important;
    justify-content: center !important; /* Keeps them perfectly centered in the hero section */
    align-items: center !important;
    gap: 25px !important; /* Creates a clean gap between the two buttons */
}

/* Ensure they stack neatly on mobile screens instead of squishing together */
@media (max-width: 736px) {
    .hero-buttons {
        flex-direction: column !important;
        gap: 15px !important;
    }
}

/* --- 24. CORPORATE FOOTER LAYOUT --- */
#footer.custom-footer {
    background-color: #2C2C2A !important;
    padding: 6em 0 2em 0 !important;
    text-align: left !important; /* Forces everything to align left like the reference */
}

#footer.custom-footer section {
    margin-bottom: 2em !important;
}

/* PackRaj Logo inside footer */
.footer-logo {
    font-size: 2.2em !important; 
    font-weight: 800 !important;
    letter-spacing: 0.05em !important;
    margin-bottom: 1em !important;
    line-height: 1 !important;
}

.footer-logo a {
    text-decoration: none !important;
    border-bottom: none !important;
}

.footer-logo .logo-pack {
    color: #EF9F27 !important;
    position: relative !important;
    display: inline-block !important;
}

.footer-logo .logo-pack::after {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    bottom: -4px !important;
    width: 100% !important;
    height: 5px !important;
    background-color: #EF9F27 !important;
    border: 2px solid #000000 !important;
    border-radius: 2px !important;
}

.footer-logo .logo-raj {
    color: #FAC775 !important;
}

/* Footer Paragraph Text */
.footer-desc {
    color: #e0ddd8 !important;
    font-size: 0.95em !important;
    line-height: 1.6 !important;
    font-weight: 300 !important;
    margin-top: 15px !important;
}

/* Clean White Headings */
.footer-heading {
    color: #ffffff !important;
    font-size: 1.4em !important;
    font-weight: 600 !important;
    margin-bottom: 1.2em !important;
    text-transform: none !important;
    border: none !important;
    padding: 0 !important;
}

/* Vertical Links List without Borders */
.footer-links {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.footer-links li {
    margin-bottom: 0.8em !important;
    border-top: none !important; /* Strips away the horizontal lines */
    padding: 0 !important;
}

.footer-links a {
    color: #e0ddd8 !important;
    font-size: 0.95em !important;
    text-decoration: none !important;
    font-weight: 300 !important;
    transition: color 0.3s ease !important;
}

.footer-links a:hover {
    color: #EF9F27 !important;
}

/* Social Links with inline icons */
.social-text-links a i {
    width: 25px !important;
    margin-right: 5px !important;
    text-align: left !important;
    color: #e0ddd8 !important;
    transition: color 0.3s ease !important;
}

.social-text-links a:hover i {
    color: #EF9F27 !important;
}

/* Contact Details Block */
.footer-contact-block {
    margin-bottom: 2em !important;
}

.footer-contact-block p {
    color: #e0ddd8 !important;
    font-size: 0.95em !important;
    line-height: 1.6 !important;
    margin-bottom: 0.5em !important;
    font-weight: 300 !important;
}

.footer-contact-block a {
    color: #e0ddd8 !important;
    text-decoration: none !important;
    transition: color 0.3s ease !important;
}

.footer-contact-block a:hover {
    color: #EF9F27 !important;
}

/* Centered Bottom Copyright */
.footer-copyright {
    text-align: center !important;
    color: #e0ddd8 !important;
    font-size: 0.9em !important;
    font-weight: 300 !important;
    margin-top: 2em !important;
    padding-top: 2em !important;
    /* Optional: uncomment below if you want a subtle separator line above copyright */
    /* border-top: 1px solid rgba(255, 255, 255, 0.05) !important; */ 
}

/* --- 27. BLOG PAGE LAYOUT --- */
.blog-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 40px !important;
    padding: 20px 5% 40px 5% !important;
    background-color: #2C2C2A !important;
    max-width: 1400px !important;
    margin: 0 auto !important;
}

.blog-card {
    background: #ffffff !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    text-align: left !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
    display: flex !important;
    flex-direction: column !important;
}

.blog-card:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.4) !important;
}

/* Force all blog images to be the exact same height */
.blog-card img {
    width: 100% !important;
    height: 250px !important;
    object-fit: cover !important; 
    display: block !important;
}

.blog-content {
    padding: 25px !important;
    display: flex !important;
    flex-direction: column !important;
    flex-grow: 1 !important;
}

.blog-content h3 {
    margin: 0 0 15px 0 !important;
    border-bottom: none !important;
}

.blog-content h3 a {
    color: #230b0b !important;
    font-weight: 800 !important;
    font-size: 1.2em !important;
    line-height: 1.4 !important;
    text-decoration: none !important;
    text-shadow: none !important;
}

.blog-content h3 a:hover {
    color: #EF9F27 !important;
}

.blog-content p {
    color: #333333 !important;
    font-weight: 400 !important;
    font-size: 1em !important;
    line-height: 1.6 !important;
    margin: 0 0 25px 0 !important;
    flex-grow: 1 !important; /* Pushes the Read More button to the bottom */
}

/* Smaller, left-aligned Read More button */
.button.read-more {
    align-self: flex-start !important;
    font-size: 0.85em !important;
    padding: 0 20px !important;
    height: 40px !important;
    line-height: 40px !important;
    border-radius: 5px !important;
    width: auto !important;
}

/* Container for the View More Button */
.view-more-container {
    text-align: center !important;
    padding-bottom: 60px !important;
    background-color: #2C2C2A !important;
}

/* The class that JS uses to hide future posts */
.hidden-blog {
    display: none !important;
}

/* Responsive Rules */
@media (max-width: 1024px) {
    .blog-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 768px) {
    .blog-grid { grid-template-columns: 1fr !important; }
}

/* --- 28. ABOUT US PAGE STYLING --- */
.about-wrapper {
    background-color: #2C2C2A !important;
    padding: 0 5% 80px 5% !important;
}

/* Creates a clean, centered column for comfortable reading */
.about-section {
    max-width: 900px !important;
    margin: 0 auto 50px auto !important;
}

.about-heading {
    color: #FAC775 !important;
    font-size: 2em !important;
    font-weight: 800 !important;
    margin-bottom: 20px !important;
}

.about-section p {
    color: #e0ddd8 !important;
    font-size: 1.25em !important;
    line-height: 1.7 !important;
    margin-bottom: 25px !important;
    font-weight: 300 !important;
}

/* Big Image Styling */
.about-image-section {
    max-width: 1200px !important;
    margin: 0 auto 60px auto !important;
}

.about-hero-image {
    width: 100% !important;
    height: auto !important;
    border-radius: 12px !important;
    box-shadow: 0 15px 30px rgba(0,0,0,0.5) !important;
    display: block !important;
}

/* Core Values Grid */
.values-grid {
    display: flex !important;
    justify-content: space-between !important;
    gap: 30px !important;
}

.value-box {
    background: #252523 !important;
    padding: 30px !important;
    border-radius: 8px !important;
    flex: 1 !important;
    border-top: 4px solid #EF9F27 !important;
}

.value-box h4 {
    color: #ffffff !important;
    font-size: 1.3em !important;
    font-weight: 700 !important;
    margin-bottom: 15px !important;
}

.value-box p {
    font-size: 1.05em !important;
    margin-bottom: 0 !important;
}

/* Buttons centered at the bottom */
.about-buttons {
    text-align: center !important;
    margin-top: 60px !important;
    display: flex !important;
    justify-content: center !important;
    gap: 20px !important;
}

/* Responsive adjustments */
@media (max-width: 800px) {
    .values-grid {
        flex-direction: column !important;
    }
    .about-buttons {
        flex-direction: column !important;
    }
}

/* --- 29. CONTACT PAGE STYLING --- */
.contact-wrapper {
    background-color: #2C2C2A !important;
    padding: 20px 5% 100px 5% !important;
}

.contact-grid {
    display: grid !important;
    grid-template-columns: 1fr 1.2fr !important;
    gap: 60px !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
}

/* Left Panel: Direct Info */
.contact-info-panel h3, .contact-form-panel h3 {
    color: #FAC775 !important;
    font-size: 2em !important;
    font-weight: 800 !important;
    margin-bottom: 15px !important;
}

.contact-info-panel p, .contact-form-panel p {
    color: #e0ddd8 !important;
    font-size: 1.1em !important;
    line-height: 1.6 !important;
    margin-bottom: 40px !important;
}

.direct-contact-methods {
    margin-bottom: 40px !important;
}

.whatsapp-btn i {
    margin-right: 8px !important;
    font-size: 1.2em !important;
}

.contact-details-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.contact-details-list li {
    display: flex !important;
    align-items: flex-start !important;
    margin-bottom: 30px !important;
    border-top: none !important;
    padding: 0 !important;
}

.contact-details-list li i {
    color: #EF9F27 !important;
    font-size: 1.5em !important;
    margin-right: 20px !important;
    margin-top: 5px !important;
}

.contact-details-list li span {
    color: #e0ddd8 !important;
    font-size: 1.1em !important;
    line-height: 1.5 !important;
}

.contact-details-list li span strong {
    color: #ffffff !important;
    font-weight: 700 !important;
}

.contact-details-list li a {
    color: #FAC775 !important;
    text-decoration: none !important;
}

.contact-details-list li a:hover {
    color: #EF9F27 !important;
}

/* Right Panel: The Form */
.custom-form {
    background: #252523 !important;
    padding: 40px !important;
    border-radius: 12px !important;
    border-top: 4px solid #EF9F27 !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3) !important;
}

.form-row {
    display: flex !important;
    gap: 20px !important;
}

.form-group {
    margin-bottom: 25px !important;
    width: 100% !important;
}

.form-group.half {
    flex: 1 !important;
}

.custom-form label {
    display: block !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    margin-bottom: 8px !important;
    font-size: 1em !important;
}

.custom-form input,
.custom-form select,
.custom-form textarea {
    width: 100% !important;
    background-color: #2C2C2A !important;
    border: 1px solid #3e3d3b !important;
    color: #ffffff !important;
    padding: 15px !important;
    border-radius: 6px !important;
    font-family: 'League Spartan', sans-serif !important;
    font-size: 1em !important;
    transition: border-color 0.3s ease !important;
}

.custom-form input:focus,
.custom-form select:focus,
.custom-form textarea:focus {
    border-color: #EF9F27 !important;
    outline: none !important;
}

.custom-form select {
    appearance: none !important;
    cursor: pointer !important;
}

.submit-btn {
    width: 100% !important;
    height: 60px !important;
    line-height: 60px !important;
    font-size: 1.1em !important;
    margin-top: 10px !important;
}

/* Responsive Grid */
@media (max-width: 980px) {
    .contact-grid {
        grid-template-columns: 1fr !important;
    }
    .form-row {
        flex-direction: column !important;
        gap: 0 !important;
    }
}

/* --- 30. MAIN WAREHOUSE IMAGE & SPACING FIX --- */

/* 1. Shrink the massive gaps above and below this section */
.wrapper.style2 {
    padding-top: 4em !important; 
    padding-bottom: 4em !important; 
}

/* 2. Constrain the image size and center it */
#main .image.featured {
    max-width: 750px !important; /* Stops it from stretching too huge */
    margin: 0 auto 2.5em auto !important; /* Centers it and reduces the space below */
    display: block !important;
}

/* 3. Add a premium look to the image itself */
#main .image.featured img {
    width: 100% !important;
    height: auto !important;
    border-radius: 12px !important; /* Softens the sharp corners */
    box-shadow: 0 15px 35px rgba(0,0,0,0.4) !important; /* Adds a professional shadow */
}

/* 4. Tighten the space around the text */
#main header {
    margin-bottom: 1.5em !important;
}

#main p {
    max-width: 900px !important; /* Keeps the text from stretching too wide to read */
    margin: 0 auto 2.5em auto !important; /* Centers the paragraph neatly */
    font-size: 1.1em !important;
    line-height: 1.7 !important;
    color: #e0ddd8 !important;
}

/* --- Center the taglines under non-homepage titles --- */
.page-title-section p {
    text-align: center !important;
    margin: 0 auto !important;
    max-width: 800px !important; /* Keeps it from stretching too wide on big screens */
}

/* ============================================================
   UPDATED MOBILE VIEW FIXES (Max Width: 768px)
   Does not affect Desktop / PC View
   ============================================================ */

@media screen and (max-width: 768px) {

   /* --- 1. NAVIGATION BAR (Logo Left, Links Right) --- */
    body #header, body:not(.homepage) #header {
        padding-top: 60px !important; /* Overrides the desktop inner-page settings */
        min-height: 60px !important;
    }
    #nav {
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding: 0 5px !important;
        height: 60px !important;
        position: absolute !important; 
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        z-index: 99999 !important; 
    }
    #nav-logo {
        margin: 0 !important;
        padding: 0 !important;
        text-align: left !important;
        flex-shrink: 0 !important;
    }
    #nav-logo a, .footer-logo a {
        white-space: nowrap !important;
        display: inline-block !important;
    }
    #nav-logo .logo-pack, #nav-logo .logo-raj {
        font-size: 1.3rem !important; /* Slightly smaller to fit links perfectly */
        display: inline-block !important;
    }
    #nav ul.nav-links, #nav ul {
        display: flex !important;
        flex-direction: row !important;
        justify-content: flex-end !important;
        align-items: center !important;
        flex-wrap: nowrap !important; /* FORCES links to stay on ONE line */
        gap: 5px !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    #nav ul li {
        margin: 0 !important;
        padding: 0 !important;
    }
    #nav ul li a {
        font-size: 0.65rem !important; /* Scaled down slightly to prevent wrapping */
        padding: 10px 4px !important;
        position: relative !important;
        z-index: 100000 !important; 
        pointer-events: auto !important; 
        white-space: nowrap !important;
    }
    #navPanel, .navPanelToggle, #titleBar, a[href="#navPanel"] {
        display: none !important; 
    }


    /* --- 2. MAIN HERO SECTION (Fit 100% in first screen) --- */
   #header .inner {
        background: rgba(255, 255, 255, 0.75) !important; /* Sleek translucent white */
        backdrop-filter: blur(6px) !important; /* Frosted glass blur */
        -webkit-backdrop-filter: blur(6px) !important; /* Support for iPhones */
        border-radius: 15px !important; /* Rounded premium corners */
        padding: 20px 10px !important;
        width: 92% !important;
        margin: 0 auto !important;
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2) !important; /* Soft depth shadow */
        border: 1px solid rgba(255, 255, 255, 0.6) !important;
    }
    h1.main-tagline {
        font-size: 2.1rem !important; /* ⬆️ Made significantly larger */
        margin-top: 5px !important;
        margin-bottom: 8px !important;
        line-height: 1.1 !important; /* Tightened line height so the big text stacks cleanly */
    }
    #header .inner p {
        font-size: 0.65rem !important; /* ⬇️ Scaled down to match desktop proportions */
        font-weight: 600 !important;
        margin-bottom: 15px !important;
        line-height: 1.4 !important;
        padding: 0 5px !important; /* Keeps the text from touching the very edge of the screen */
    }
    
    /* Stats Grid - Shrunk and tight */
    .stats-container {
        gap: 10px !important;
        margin: 10px auto 15px auto !important;
    }
    .stat-box {
        width: 45% !important; /* Forces a neat 2x2 grid on mobile */
    }
    .stat-number {
        font-size: 2rem !important;
        margin-bottom: 2px !important;
    }
    .stat-label {
        font-size: 0.65rem !important;
    }
    
    /* Hero Buttons - Side-by-Side */
    .hero-buttons {
        display: flex !important;
        flex-direction: row !important;
        gap: 10px !important;
        justify-content: center !important;
    }
    .hero-buttons .button.circled {
        width: 140px !important;
        height: 45px !important;
        line-height: 45px !important;
        font-size: 0.75rem !important;
        margin: 0 !important;
    }
    
    /* Stats Grid - Shrunk and tight */
    .stats-container {
        gap: 10px !important;
        margin: 10px auto 15px auto !important;
    }
    .stat-box {
        width: 45% !important; /* Forces a neat 2x2 grid on mobile */
    }
    .stat-number {
        font-size: 2rem !important;
        margin-bottom: 2px !important;
    }
    .stat-label {
        font-size: 0.65rem !important;
    }
    
    /* Hero Buttons - Side-by-Side */
    .hero-buttons {
        display: flex !important;
        flex-direction: row !important;
        gap: 10px !important;
        justify-content: center !important;
    }
    .hero-buttons .button.circled {
        width: 140px !important;
        height: 45px !important;
        line-height: 45px !important;
        font-size: 0.75rem !important;
        margin: 0 !important;
    }


    /* --- 3. SECONDARY HERO (The Strength Behind...) --- */
    #banner {
        min-height: auto !important;
        padding: 2em 1em !important;
    }
    #banner h2 { font-size: 1.5rem !important; }
    #banner p { font-size: 0.9rem !important; }


    /* --- 4. CUSTOM REQUIREMENT BUTTON --- */
    #custom-cta {
        padding: 2em 1em !important;
    }
    #custom-cta footer .button {
        margin: 0 auto !important;
    }


    /* --- 5. FOOTER FIXES (Grid & Logo) --- */
    #footer {
        padding: 2em 10px !important;
    }
    #footer .container {
        padding: 0 !important;
    }
    
    /* Fix the broken footer logo stacking */
    .footer-logo .logo-pack, .footer-logo .logo-raj {
        font-size: 1.8rem !important;
        display: inline-block !important;
    }
    .footer-desc {
        font-size: 0.85rem !important;
    }
    
    /* Footer Grid Layout */
    #footer .row {
        display: flex !important;
        flex-wrap: wrap !important;
        margin: 0 !important;
        gap: 15px 0 !important;
    }
    
    /* Section 1: Logo & Desc (Full Width on Top) */
    #footer .row > section:nth-child(1) {
        width: 100% !important;
        flex: 0 0 100% !important;
        text-align: center !important;
    }
    
    /* Sections 2, 3, 4: Columns perfectly side-by-side below logo */
    #footer .row > section:nth-child(2),
    #footer .row > section:nth-child(3),
    #footer .row > section:nth-child(4) {
        width: 33.33% !important;
        flex: 0 0 33.33% !important;
        padding: 0 2px !important;
        box-sizing: border-box !important;
        text-align: left !important;
    }

    #footer .footer-heading {
        font-size: 0.8rem !important;
        margin-bottom: 10px !important;
        word-wrap: break-word !important;
    }
    
    #footer .footer-links li,
    #footer .footer-contact-block p {
        font-size: 0.65rem !important;
        line-height: 1.3 !important;
        margin-bottom: 5px !important;
        word-wrap: break-word !important;
    }
    
    /* Section 5: Copyright Row at the very bottom */
    #footer .row:last-child {
        width: 100% !important;
        flex: 0 0 100% !important;
    }
    .footer-copyright {
        margin-top: 1em !important;
        padding-top: 1em !important;
        font-size: 0.75rem !important;
    }
    /* --- 6. INNER PAGES (About & Contact) MOBILE CENTERING --- */
    .contact-wrapper .contact-info-panel, 
    .contact-wrapper .contact-form-panel,
    .contact-wrapper .direct-contact-methods,
    .about-section, 
    .about-heading {
        text-align: center !important;
    }

    .contact-info-panel h3, 
    .contact-info-panel p,
    .contact-form-panel h3,
    .contact-form-panel p,
    .about-heading,
    .about-section p,
    .value-box h4,
    .value-box p {
        text-align: center !important;
    }

    /* Centers the Contact list items (like the Whatsapp number with icon) */
    .contact-details-list li {
        justify-content: center !important;
        text-align: center !important;
    }

    /* Centers the Buttons */
    .contact-wrapper .button,
    .about-wrapper .button {
        margin-left: auto !important;
        margin-right: auto !important;
        display: inline-block !important;
    }
    
    /* Centers the About Us Buttons if there are multiple */
    .about-buttons {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 15px !important;
    }
}