/*====================================================
EMI HOMEPAGE
====================================================*/

:root{

    --blue:#0a4c87;
    --yellow:#f4c20d;
    --dark:#1b1b1b;
    --text:#555;
    --light:#f5f5f5;
    --border:#dddddd;

}

/*====================================================
COMMON
====================================================*/

.emi-home-hero,
.emi-home-about,
.home-capabilities,
.home-products,
.home-network,
.home-investor,
.home-bottom{

    width:100%;
    position:relative;

}

.yellow-line{

    width:55px;
    height:3px;
    background:var(--yellow);
    margin:18px 0 28px;

}

.yellow-line.center{

    margin:15px auto 35px;

}

.section-title{

    text-align:center;
    margin-bottom:40px;

}

.section-title h2{

    font-size:46px;
    font-weight:700;
    color:#222;
    margin:0;

}

.about-btn{

    display:inline-flex;
    align-items:center;
    gap:12px;

    background:var(--yellow);
    color:#111;

    padding:5px 25px;

    text-decoration:none;
    font-weight:600;

    transition:.35s;

}

.about-btn:hover{

    background:#e2b300;
    color:#111;

}

.about-btn i{

    transition:.35s;

}

.about-btn:hover i{

    transform:translateX(6px);

}



/*====================================================
HERO
====================================================*/

.emi-home-hero{

    display:grid;

    grid-template-columns:42% 58%;

    min-height:620px;

}

.hero-left{

    background:linear-gradient(90deg,#10151b 0%,#1d232b 65%,rgba(0,0,0,.75) 100%);

    display:flex;
    align-items:center;

}

.hero-content{

    width:82%;
    margin:auto;

    color:#fff;

}

.hero-content h1{

    font-size:66px;
    line-height:1.08;
    margin-bottom:25px;

    color:#fff;
    font-weight:700;

}

.hero-content h1 span{

    color:#ffe400;

}

.hero-text{

    font-size:22px;
    line-height:1.7;

    margin-bottom:28px;

}

.hero-content p{

    font-size:17px;
    line-height:1.9;

    color:#ddd;

}

.hero-right{

    position:relative;

}

.hero-right img{

    width:100%;
    height:620px;

    object-fit:cover;
    display:block;

}



/*====================================================
ABOUT
====================================================*/

.emi-home-about{

    background:#f3f3f3;

    padding:30px 0;

}

.about-grid{

    display:grid;

    grid-template-columns:50% 50%;

    gap:35px;

    align-items:center;

}

.about-left h2{

    font-size:42px;

    line-height:1.15;

    color:#222;

    margin-bottom:15px;

}

.about-left p{

    font-size: 16px;
    color: #555;
    line-height: 1.7;
    margin-bottom: 10px;
    font-weight: 500;

}



/*====================================================
IMAGE GRID
====================================================*/

.gallery-grid{

    display:grid;

    grid-template-columns:2fr 1fr 1fr;

    grid-template-rows:180px 180px;

    gap:12px;

}

.gallery-main{

    grid-row:1/3;

}

.gallery-main img{

    width:100%;
    height:372px;

    object-fit:cover;

}

.gallery-small img{

    width:100%;
    height:180px;

    object-fit:cover;

}

.gallery-grid img{

    display:block;

    transition:.35s;

}

.gallery-grid img:hover{

    transform:scale(1.03);

}



/*====================================================
RESPONSIVE
====================================================*/

@media(max-width:1200px){

.hero-content h1{

font-size:54px;

}

.about-left h2{

font-size:42px;

}

}

@media(max-width:992px){

.emi-home-hero{

grid-template-columns:1fr;

}

.hero-right img{

height:420px;

}

.about-grid{

grid-template-columns:1fr;

}


.gallery-grid{

margin-top:35px;

}

}

@media(max-width:768px){

.hero-content{

width:90%;

padding:50px 0;

}

.hero-content h1{

font-size:42px;

}

.hero-text{

font-size:18px;

}

.about-left h2{

font-size:34px;

}

.gallery-grid{

grid-template-columns:1fr;

grid-template-rows:auto;

}

.gallery-main{

grid-row:auto;

}

.gallery-main img{

height:280px;

}

.gallery-small img{

height:220px;

}

}

/*====================================================
INTEGRATED RECYCLING & MANUFACTURING
====================================================*/

.home-capabilities{

    background:#efefef;
    padding:35px 0 55px;

}

.capability-row{

    display:grid;
    grid-template-columns:repeat(6,1fr);
    gap:0;

    border-top:1px solid #d9d9d9;
    border-left:1px solid #d9d9d9;

    margin-top:45px;

}

.capability-box{

    background:#fff;

    border-right:1px solid #d9d9d9;
    border-bottom:1px solid #d9d9d9;

    text-align:center;

    text-decoration:none;

    padding:38px 18px;

    transition:.35s;

    color:#333;

}

.capability-box:hover{

    background:#f5b400;
    color:#fff;

}

.capability-box:hover h4,
.capability-box:hover p{

    color:#fff;

}

.capability-box img{

    width:72px;
    height:72px;

    object-fit:contain;

    margin-bottom:22px;

    transition:.35s;

}

.capability-box:hover img{

    transform:scale(1.08);

}

.capability-box h4{

    font-size:22px;

    line-height:1.35;

    margin-bottom:15px;

    color:#222;

}

.capability-box p{

    font-size:15px;

    line-height:1.8;

    color:#666;

    margin:0;

}



/*====================================================
PRODUCT SHOWCASE
====================================================*/

.home-products{

    background:#262626;

    padding:85px 0;

}

.products-grid{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:28px;

}

.product-card{

    background:#fff;

    overflow:hidden;

    transition:.35s;

}

.product-card:hover{

    transform:translateY(-8px);

}

.product-card img{

    width:100%;

    height:240px;

    object-fit:cover;

    display:block;

    transition:.45s;

}

.product-card:hover img{

    transform:scale(1.06);

}

.product-content{

    padding:30px;

}

.product-content h3{

    font-size:28px;

    margin-bottom:5px;

    color:#222;

}

.product-content p{

    font-size:16px;

    line-height:1.9;

    color:#666;

    margin-bottom:15px;

}

.product-content a{

    color:#0b5ea8;

    font-weight:700;

    text-decoration:none;

    display:inline-flex;

    align-items:center;

    gap:10px;

    transition:.35s;

}

.product-content a:hover{

    gap:18px;

}

.product-content i{

    font-size:14px;

}



/*====================================================
TABLET
====================================================*/

@media(max-width:1200px){

.capability-row{

grid-template-columns:repeat(3,1fr);

}

.products-grid{

grid-template-columns:repeat(2,1fr);

}

}



@media(max-width:991px){

.home-capabilities{

padding:65px 0;

}

.home-products{

padding:65px 0;

}

.product-card img{

height:220px;

}

}



/*====================================================
MOBILE
====================================================*/

@media(max-width:767px){

.capability-row{

grid-template-columns:repeat(2,1fr);

}

.products-grid{

grid-template-columns:1fr;

}

.capability-box{

padding:28px 15px;

}

.capability-box h4{

font-size:18px;

}

.product-content{

padding:24px;

}

.product-content h3{

font-size:24px;

}

.product-card img{

height:210px;

}

}



@media(max-width:480px){

.capability-row{

grid-template-columns:1fr;

}

}

/*====================================================
MANUFACTURING NETWORK
====================================================*/

.home-network{

    background:#ffffff;
    padding:80px 0 50px 0;

}

.network-wrapper{

    display:grid;
    grid-template-columns:50% 50%;
    gap:10px;
}

.network-list {
    width: 50%;
    margin: 0;
    float: left;
}

.network-left h2,
.network-right h2{

    font-size: 32px;
    color: #222;
    line-height: 1.2;
    margin-bottom: 10px;
    width: 100%;

}

.network-list li{

    list-style: none;
    position: relative;
    padding-left: 22px;
    margin-bottom: 8px;
    font-size: 16px;
    line-height: 1.8;
    color: #555;
    font-weight: 600;

}

.network-list li:before{

    content:"✔";

    position:absolute;

    left:0;

    color:#f4c20d;

    font-weight:700;

}

.network-map{

    width: 50%;
    float: left;

}

.network-map img{

    width:100%;
    max-width:300px;

}

.network-right{

    border-left:1px solid #ddd;
    padding-left:20px;

}



/*====================================================
SUSTAINABILITY
====================================================*/

.sustainability-row{

    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:10px;
    margin-top:0;

}

.sustain-item{

    text-align:center;
    background: #fafafa;
    padding: 10px;

}

.sustain-item img{

    width:72px;
    height:72px;

    object-fit:contain;

    margin-bottom:10px;

}

.sustain-item h4{

    font-size:20px;
    margin-bottom:12px;
    color:#222;
    line-height: 1.4;

}

.sustain-item p{

    font-size:15px;
    line-height:1.5;
    color:#666;

}



/*====================================================
INVESTOR
====================================================*/

.home-investor{

    background:#f7f7f7;

    padding:70px 0;

}

.investor-wrapper{

    display:grid;

    grid-template-columns:26% 74%;

    align-items:center;

    gap:40px;

}

.investor-left h2{

    font-size:40px;
    color:#222;

}

.investor-left p{

    margin-top:20px;
    line-height:1.8;
    color:#666;

}

.investor-icons{

    display:grid;

    grid-template-columns:repeat(5,1fr);

    border:1px solid #ddd;

}

.investor-icons a{

    text-align:center;

    text-decoration:none;

    padding:35px 15px;

    border-right:1px solid #ddd;

    color:#222;

    transition:.35s;

}

.investor-icons a:last-child{

    border-right:none;

}

.investor-icons a:hover{

    background:#f5b400;
    color:#fff;

}

.investor-icons img{

    width:64px;
    margin-bottom:18px;

}

.investor-icons span{

    display:block;

    line-height:1.6;

    font-size:16px;

}



/*====================================================
MEDIA & CAREERS
====================================================*/

.home-bottom{

    background:#1e1e1e;

    padding:80px 0;

}

.bottom-grid{

    display:grid;

    grid-template-columns:40% 60%;

    gap:35px;

}

.media-centre{

    color:#fff;

}

.media-centre h2{

    color:#fff;

    font-size:40px;

}

.media-links{

    margin-top:35px;

}

.media-links a{

    display:flex;

    align-items:center;

    gap:18px;

    color:#fff;

    text-decoration:none;

    padding:18px 0;

    border-bottom:1px solid rgba(255,255,255,.12);

    transition:.35s;

}

.media-links a:hover{

    padding-left:12px;

}

.media-links img{

    width:46px;

}

.career-section{

    position:relative;

    overflow:hidden;

}

.career-section img{

    width:100%;

    height:420px;

    object-fit:cover;

}

.career-overlay{

    position:absolute;

    inset:0;

    background:rgba(0,0,0,.55);

    color:#fff;

    padding:60px 0;

    display:flex;

    flex-direction:column;

    justify-content:center;

}

.career-overlay h2{

    color:#fff;

    font-size:46px;

    margin-bottom:20px;

}

.career-overlay p{

    font-size:18px;

    line-height:1.8;

    margin-bottom:35px;

}



/*====================================================
RESPONSIVE
====================================================*/

@media(max-width:1200px){

.network-wrapper{

grid-template-columns:1fr;

}

.network-right{

border-left:none;

padding-left:0;

margin-top:40px;

}

.investor-wrapper{

grid-template-columns:1fr;

}

.investor-icons{

grid-template-columns:repeat(3,1fr);

}

.bottom-grid{

grid-template-columns:1fr;

}

}



@media(max-width:991px){

.sustainability-row{

grid-template-columns:repeat(2,1fr);

}

}



@media(max-width:767px){

.network-left h2,
.network-right h2,
.investor-left h2,
.media-centre h2,
.career-overlay h2{

font-size:32px;

}

.sustainability-row{

grid-template-columns:1fr;

}

.investor-icons{

grid-template-columns:repeat(2,1fr);

}

.career-overlay{

padding:0;

}

.career-section img{

height:320px;

}

}



@media(max-width:480px){

.investor-icons{

grid-template-columns:1fr;

}

.media-links img{

width:36px;

}

.career-overlay h2{

font-size:28px;

}

}

/*==================================================
INVESTOR INFORMATION
==================================================*/

.home-investor{
    padding:60px 0 20px;
    background:#f5f5f5;
}

.investor-wrapper{
    display:flex;
    gap:18px;
    align-items:stretch;
}

.investor-intro{
    width:25%;
    background:#efefef;
    border:1px solid #dddddd;
    border-radius:12px;
    padding:35px 30px;
    display:flex;
    flex-direction:column;
    justify-content:center;
}

.investor-intro h2{
    margin:0 0 15px;
    font-size:36px;
    font-weight:700;
    color:#222;
}

.investor-intro p{
    margin:0;
    color:#666;
    line-height:1.7;
    font-size:15px;
}

.investor-grid{
    width:75%;
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:16px;
}

.investor-card{
    background:#fff;
    border:1px solid #dddddd;
    border-radius:12px;
    padding:28px 18px;
    text-align:center;
    text-decoration:none;
    transition:.3s;
}

.investor-card:hover{
    transform:translateY(-4px);
    box-shadow:0 8px 20px rgba(0,0,0,.08);
}

.investor-card img{
    width:42px;
    margin-bottom:18px;
}

.investor-card span{
    display:block;
    color:#222;
    font-size:16px;
    line-height:1.5;
    font-weight:600;
}


/*==================================================
MEDIA + CAREERS
==================================================*/

.home-media-careers{
    padding:0 0 70px;
}

.media-careers-wrapper{
    display:flex;
    gap:16px;
}

/*====================
MEDIA
====================*/

.media-panel{
    width:60%;
    display:flex;
    background:#f5b400;
    border-radius:16px;
    overflow:hidden;
}

.media-content{
    width:58%;
    padding:38px 35px;
    color:#fff;
    display:flex;
    flex-direction:column;
    justify-content:center;
}

.media-content h2{
    color:#fff;
    font-size:34px;
    margin:0;
}

.media-content .yellow-line{
    width:45px;
    height:4px;
    background:#f5b400;
    margin:14px 0 28px;
}

.media-links{
    display:flex;
    justify-content:space-between;
    gap:15px;
}

.media-links a{
    flex:1;
    text-align:center;
    color:#fff;
    text-decoration:none;
    padding:0 10px;
    position:relative;
}

.media-links a:not(:last-child)::after{
    content:"";
    position:absolute;
    right:0;
    top:10px;
    width:1px;
    height:65px;
    background:rgba(255,255,255,.18);
}

.media-links img{
    width:42px;
    margin-bottom:15px;
}

.media-links span{
    display:block;
    font-size:15px;
    line-height:1.5;
}

.media-image{
    width:42%;
}

.media-image img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}


/*====================
CAREERS
====================*/

.career-panel{
    position:relative;
    overflow:hidden;
    border-radius:16px;
    min-height:300px;
}

.career-panel img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

.career-overlay{
    position:absolute;
    inset:0;
    background:linear-gradient(
        90deg,
        rgba(16,22,29,.92) 0%,
        rgba(16,22,29,.78) 45%,
        rgba(16,22,29,.15) 100%
    );
    display:flex;
    align-items:center;
    z-index:2;
}

.career-content{
    padding:35px;
    color:#fff;
}

.career-content h2{
    color:#fff;
    margin:0;
    font-size:34px;
}

.career-content .yellow-line{
    width:45px;
    height:4px;
    background:#f5b400;
    margin:14px 0 24px;
}

.career-content p{
    color:#f2f2f2;
    line-height:1.8;
    margin-bottom:28px;
}

.career-btn{
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:14px 16px;
    background:#f5b400;
    color:#111;
    text-decoration:none;
    font-weight:700;
    border-radius:4px;
    transition:.3s;
}

.career-btn:hover{
    background: #313131;
    color: #fff;
}


/*==================================================
RESPONSIVE
==================================================*/

@media(max-width:991px){
    .career-btn {
        padding: 10px 16px;
        margin-bottom: 10px;
    }

    .investor-wrapper,
    .media-careers-wrapper{
        flex-direction:column;
    }

    .investor-intro,
    .investor-grid,
    .media-panel,
    .career-panel{
        width:100%;
    }

    .media-panel,
    .career-panel{
        min-height: 370px;
    }

    .career-panel img, .media-panel img { display:none; }

    .investor-grid{
        grid-template-columns:repeat(2,1fr);
    }

    .media-panel{
        flex-direction:column;
    }

    .media-content,
    .media-image{
        width:100%;
    }

    .career-content{
        width:75%;
    }
}

@media(max-width:767px){

    .investor-grid{
        grid-template-columns:1fr;
    }

    .media-links{
        flex-direction:column;
        gap:30px;
    }

    .media-links a::after{
        display:none;
    }

    .career-content{
        width:100%;
    }

    .investor-intro h2,
    .media-content h2,
    .career-content h2{
        font-size:28px;
    }
}