<div class="nexol-brand-box">
    <svg class="nexol-icon-3d" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
        <defs>
            <linearGradient id="orangeGrad" x1="0%" y1="0%" x2="0%" y2="100%">
                <stop offset="0%" style="stop-color:#ffdf91;" /> <stop offset="50%" style="stop-color:#f28c28;" /> <stop offset="100%" style="stop-color:#8a4d12;" /> </linearGradient>
            
            <linearGradient id="blueGrad" x1="0%" y1="0%" x2="0%" y2="100%">
                <stop offset="0%" style="stop-color:#82b1ff;" /> <stop offset="50%" style="stop-color:#2b5ba9;" /> <stop offset="100%" style="stop-color:#0d1b33;" /> </linearGradient>

            <filter id="innerDepth">
                <feDropShadow dx="1.5" dy="1.5" stdDeviation="1" flood-opacity="0.7"/>
            </filter>
        </defs>
        
        <g filter="url(#innerDepth)">
            <path d="M22 25 H36 V75 H22 Z" fill="url(#blueGrad)" />
            <path d="M64 25 H78 V75 H64 Z" fill="url(#blueGrad)" />
            <path d="M36 25 L64 58 V75 L36 42 Z" fill="url(#blueGrad)" />
            
            <circle cx="48" cy="23" r="6" fill="url(#orangeGrad)" /> <circle cx="78" cy="25" r="6" fill="url(#orangeGrad)" /> <circle cx="52" cy="77" r="6" fill="url(#orangeGrad)" /> <circle cx="22" cy="75" r="6" fill="url(#orangeGrad)" /> </g>
    </svg>

    <div class="nexol-text-main">
        <span class="nx-orange">NEX</span><span class="nx-blue">OL</span>
    </div>

    <div class="nexol-tagline-3d">
        CHEMICALS PVT LTD
    </div>
</div>

<style>
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@900&display=swap');

.nexol-brand-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
    font-family: 'Montserrat', sans-serif;
    background: transparent;
}

.nexol-icon-3d {
    width: 90px; /* Size optimized for header */
    margin-bottom: 8px;
    filter: drop-shadow(0px 5px 4px rgba(0,0,0,0.5));
}

.nexol-text-main {
    font-size: 56px;
    font-weight: 900;
    line-height: 0.9;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    text-align: center;
}

/* Orange 3D Metallic Effect */
.nx-orange {
    background: linear-gradient(to bottom, #ffdf91 0%, #f28c28 50%, #8a4d12 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(2px 2px 1px rgba(0,0,0,0.8));
}

/* Blue 3D Metallic Effect */
.nx-blue {
    background: linear-gradient(to bottom, #82b1ff 0%, #2b5ba9 50%, #0d1b33 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(2px 2px 1px rgba(0,0,0,0.8));
}

/* Tagline with Correct Image Spacing */
.nexol-tagline-3d {
    font-size: 21px;
    font-weight: 800;
    color: #f28c28;
    letter-spacing: 6.8px; /* Extra wide like the image */
    margin-top: 15px;
    text-transform: uppercase;
    text-shadow: 2px 2px 3px rgba(0,0,0,0.6);
}
</style>