.elementor-35 .elementor-element.elementor-element-7c0da2e{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-35 .elementor-element.elementor-element-7c0da2e.e-con{--flex-grow:0;--flex-shrink:0;}body.elementor-page-35:not(.elementor-motion-effects-element-type-background), body.elementor-page-35 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#E4ECEF;}@media(max-width:767px){.elementor-35 .elementor-element.elementor-element-7c0da2e{--width:393px;}}/* Start custom CSS for html, class: .elementor-element-a730e48 */:root {
    --rm-blue: #0A3A6A; /* Updated Brand Blue */
    --rm-black: #111111;
    --rm-red: #da291c; /* Updated Brand Red */
    --rm-white: #ffffff;
    --rm-grey: #f4f7f9; /* Updated soft grey */
    --rm-bg: #E4ECEF; /* New Page Background */
}

body {
    margin: 0;
    font-family: 'Segoe UI', Arial, sans-serif;
    background-color: var(--rm-bg); /* Updated to the new color */
}

.rm-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

/* Hero Section */
.rm-hero {
    background: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)), url(http://trendenergyltd.com/wp-content/uploads/2026/05/WhatsApp-Image-2026-05-06-at-5.50.09-PM.jpeg);
    background-size: cover;
    background-position: center;
    height: 450px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: white;
    border-bottom: 4px solid var(--rm-blue);
}

.rm-hero h1 {
    font-size: 3.5rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin: 0;
}

.rm-hero h1 span {
    display: block;
    font-weight: 300;
    font-size: 2rem;
}

/* Professional Intro Box */
.rm-intro-box {
    text-align: center; 
    padding: 80px 20px;
    background: linear-gradient(to right, #f8f9fa, #ffffff, #f8f9fa);
    margin: 40px 0;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
}

.rm-intro-box h2 {
    color: var(--rm-blue); 
    font-size: 2.4rem;
    font-weight: 300;
    max-width: 900px;
    margin: 0 auto;
    line-height: 1.3;
}

.rm-intro-box h2 b {
    color: var(--rm-red);
    font-weight: 800;
}

.rm-red-line {
    width: 80px;
    height: 4px;
    background: var(--rm-red);
    margin: 25px auto 0;
}

/* Stats Grid */
.rm-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 15px;
    margin-top: 40px;
}

.rm-card {
    display: flex;
    height: 220px;
    color: white;
    transition: 0.4s ease;
    overflow: hidden;
    cursor: pointer;
}

.rm-card:hover {
    background-color: var(--rm-red) !important;
    transform: scale(1.02);
}

.rm-card-img {
    flex: 1;
    background: #222;
}

.rm-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.8;
}

.rm-card-info {
    flex: 1.2;
    padding: 25px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.bg-blue { background-color: var(--rm-blue); }
.bg-black { background-color: var(--rm-black); }
.bg-red { background-color: var(--rm-red); }

.rm-card-info h3 {
    font-size: 2.2rem;
    margin: 0;
}

.rm-card-info p {
    font-size: 0.9rem;
    margin-top: 5px;
    text-transform: uppercase;
    opacity: 0.9;
    letter-spacing: 1px;
}

/* Tab Navigation */
.rm-tabs {
    display: flex;
    flex-wrap: wrap;
    background: var(--rm-black);
    margin-top: 60px;
    border-bottom: 3px solid var(--rm-blue);
}

.rm-tab-item {
    flex: 1;
    text-align: center;
    padding: 20px 10px;
    color: white;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    border-right: 1px solid #333;
    transition: 0.3s;
    cursor: pointer;
    min-width: 150px;
}

.rm-tab-item:hover { background-color: var(--rm-red); }
.rm-tab-item.active { background-color: var(--rm-blue); }

/* Content Area */
.rm-content-section {
    padding: 40px 20px;
    background: var(--rm-grey);
    border: 1px solid #ddd;
    min-height: 350px;
}

.tab-content {
    display: none;
    animation: fadeIn 0.5s ease;
}

.tab-content.active { display: block; }

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

.content-card {
    background: white;
    padding: 20px;
    margin-bottom: 15px;
    border-left: 5px solid var(--rm-blue);
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.content-card:nth-child(even) { border-left-color: var(--rm-red); }

.content-text h4 { margin: 0 0 5px 0; color: var(--rm-blue); }
.content-text p { margin: 0; font-size: 0.9rem; color: #666; }

.download-btn {
    background: var(--rm-black);
    color: white;
    padding: 8px 15px;
    text-decoration: none;
    font-size: 0.8rem;
    border-radius: 3px;
    transition: 0.3s;
}

.download-btn:hover { background: var(--rm-red); }

@media (max-width: 768px) {
    .content-card { flex-direction: column; align-items: flex-start; gap: 15px; }
    .rm-hero h1 { font-size: 2.2rem; }
    .rm-grid { grid-template-columns: 1fr; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7c0da2e */<!DOCTYPE html>
<html lang="en">
<head>
<style>
    :root {
        --rm-blue: #003366;    /* Deep Professional Blue */
        --rm-red: #cc0000;     /* Bold Roadmax Red */
        --rm-black: #1a1a1a;   /* Rich Black */
        --rm-light: #f8f9fa;
        --rm-white: #ffffff;
    }

    .rm-wrapper {
        font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
        background-color: var(--rm-white);
        max-width: 1200px;
        margin: 0 auto;
        padding-bottom: 50px;
    }

    /* Hero Banner */
    .rm-hero {
        background: linear-gradient(45deg, rgba(0,51,102,0.8), rgba(26,26,26,0.8)), url('YOUR_HERO_IMAGE_URL');
        background-size: cover;
        background-position: center;
        height: 400px;
        display: flex;
        align-items: center;
        padding-left: 60px;
        color: var(--rm-white);
        border-bottom: 5px solid var(--rm-red);
    }

    .rm-hero h1 {
        font-size: 3.5rem;
        margin: 0;
        line-height: 1.1;
        font-weight: 300;
    }

    .rm-hero h1 span {
        font-weight: 800;
        display: block;
        color: var(--rm-white);
    }

    /* Intro Headline */
    .rm-intro {
        text-align: center;
        padding: 80px 20px;
    }

    .rm-intro h2 {
        color: var(--rm-blue);
        font-size: 2.2rem;
        font-weight: 400;
        max-width: 900px;
        margin: 0 auto;
    }

    /* The Matrix Grid */
    .rm-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
        padding: 0 20px;
    }

    .rm-box {
        display: flex;
        height: 200px;
        transition: transform 0.3s ease;
    }

    .rm-box:hover {
        transform: translateY(-5px);
    }

    .rm-box-img {
        flex: 1;
        background: var(--rm-black);
    }

    .rm-box-img img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        filter: grayscale(30%);
    }

    .rm-box-info {
        flex: 1;
        padding: 30px;
        color: var(--rm-white);
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    /* Color Mixing Logic */
    .bg-blue { background-color: var(--rm-blue); }
    .bg-red { background-color: var(--rm-red); }
    .bg-black { background-color: var(--rm-black); }

    .rm-box-info h3 {
        font-size: 2.8rem;
        margin: 0;
        font-weight: bold;
    }

    .rm-box-info p {
        font-size: 0.95rem;
        margin-top: 10px;
        text-transform: uppercase;
        letter-spacing: 1px;
        opacity: 0.9;
    }

    /* Tab Menu */
    .rm-nav {
        display: flex;
        flex-wrap: wrap;
        margin: 60px 20px 20px;
        border-top: 1px solid #ddd;
    }

    .rm-nav-item {
        padding: 15px 25px;
        font-weight: 600;
        font-size: 13px;
        text-transform: uppercase;
        cursor: pointer;
        border-right: 1px solid #eee;
        color: var(--rm-black);
        transition: 0.3s;
    }

    .rm-nav-item.active {
        background-color: var(--rm-black);
        color: var(--rm-white);
    }

    .rm-nav-item:hover:not(.active) {
        color: var(--rm-red);
    }

    @media (max-width: 768px) {
        .rm-grid { grid-template-columns: 1fr; }
        .rm-hero h1 { font-size: 2.5rem; }
    }
</style>
</head>
<body>

<div class="rm-wrapper">

    <div class="rm-hero">
        <div>
            <p style="letter-spacing: 4px; color: var(--rm-red); font-weight: bold;">ROADMAX INVESTORS</p>
            <h1>Transparency breeds <span>LEGITIMACY</span></h1>
        </div>
    </div>

    <div class="rm-intro">
        <h2><b>ROADMAX</b> is the nation's top-ranked company that everyone can count on.</h2>
    </div>

    <div class="rm-grid">
        
        <div class="rm-box">
            <div class="rm-box-img"><img src="YOUR_IMG_1" alt="Roadmax"></div>
            <div class="rm-box-info bg-blue">
                <h3>41,793 m</h3>
                <p>Fiscal Year 2024-25</p>
            </div>
        </div>

        <div class="rm-box">
            <div class="rm-box-img"><img src="YOUR_IMG_2" alt="Roadmax"></div>
            <div class="rm-box-info bg-red">
                <h3>47,923 m</h3>
                <p>Total Revenue</p>
            </div>
        </div>

        <div class="rm-box">
            <div class="rm-box-info bg-black">
                <h3>6,786 m</h3>
                <p>Gross Profit</p>
            </div>
            <div class="rm-box-img"><img src="YOUR_IMG_3" alt="Roadmax"></div>
        </div>

        <div class="rm-box">
            <div class="rm-box-info bg-blue">
                <h3>3,609 m</h3>
                <p>Net Profit</p>
            </div>
            <div class="rm-box-img"><img src="YOUR_IMG_4" alt="Roadmax"></div>
        </div>

        <div class="rm-box">
            <div class="rm-box-img"><img src="YOUR_IMG_5" alt="Roadmax"></div>
            <div class="rm-box-info bg-red">
                <h3>11.36</h3>
                <p>Earnings Per Share</p>
            </div>
        </div>

        <div class="rm-box">
            <div class="rm-box-img"><img src="YOUR_IMG_6" alt="Roadmax"></div>
            <div class="rm-box-info bg-black">
                <h3>1.13</h3>
                <p>Debt-Equity Ratio</p>
            </div>
        </div>

    </div>

    <div class="rm-nav">
        <div class="rm-nav-item active">Latest Updates</div>
        <div class="rm-nav-item">Financial reports</div>
        <div class="rm-nav-item">Price sensitive info</div>
        <div class="rm-nav-item">Material Information</div>
        <div class="rm-nav-item">Shareholding Position</div>
        <div class="rm-nav-item">Dividend</div>
        <div class="rm-nav-item">Governance</div>
    </div>

</div>

</body>
</html>/* End custom CSS */