.mxc-page{
    width:100%;
    overflow:hidden;
    font-family:Arial,sans-serif;
    background:#fff;
    color:#222;
}

.mxc-shell{
    width:92%;
    max-width:1600px;
    margin:auto;
}

/* hero */

.mxc-hero{
    position:relative;
    padding:130px 0 100px;
    background:#091223;
}

.mxc-hero-bg{
    position:absolute;
    inset:0;
    background:url('images/cement-banner.jpg') center/cover no-repeat;
    opacity:.4;
}

.mxc-hero-content{
    position:relative;
    z-index:2;
    text-align:center;
}

.mxc-hero-content h1{
    color:#fff;
    margin:0 0 20px;
    font-size:54px;
    font-weight:800;
}

.mxc-breadcrumb{
    color:#ddd;
    font-size:14px;
}

/* title */

.mxc-title-area{
    text-align:center;
    margin-bottom:55px;
}

.mxc-title-area h2{
    margin:0 0 15px;
    font-size:42px;
    font-weight:800;
     font-family: "Roboto-Black";  
}

.mxc-title-area p{
    max-width:1200px;
    margin:auto;
    line-height:1.8;
    font-size: 18px;
    color:#666;
}

.mxc-title-light h2,
.mxc-title-light p{
    color:#fff;
    position: relative;
}

/* intro */

.mxc-intro{
    padding:100px 0;
}

.mxc-intro-wrap{
    display:flex;
    align-items:center;
    gap:60px;
}

.mxc-intro-image,
.mxc-intro-content{
    flex:1;
}

.mxc-intro-image img{
    width:100%;
    display:block;
}

.mxc-intro-content h2{
    font-size:42px;
    margin:0 0 20px;
    font-family: "Roboto-Black";
}

.mxc-intro-content p{
    color:#666;
    line-height:1.6;
    font-size: 18px;
}

.mxc-highlight-box{
    margin:25px 0;
    padding:30px 50px;
    border: 1px dashed #f0b1bb;
    border-radius: 10px;
    background:#fff5f6;
    line-height:1.8;
    color: #333333;
    font-size: 18px;
}

.mxc-contact-list{
    list-style:none;
    padding:0;
    margin:25px 0;
}

.mxc-contact-list li{
    margin-bottom:18px;
    color:#444;
}
.mxc-contact-list li strong{ font-size:24px; font-family: "Roboto-Black"; color:#d31632;}
.mxc-contact-list i{
    color:#ff003c;
    margin-right:10px;
}

.mxc-main-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:15px 34px;
    color:#fff;
    text-decoration:none;
    transition:.3s;
    background-image: url(/static/images/solutions/Message_buttom.png);
    background-repeat: no-repeat;
    width: 420px;
    height: 97px;
    border-radius: 30px;
    font-size: 30px; font-family: "Roboto-Black";

}

.mxc-main-btn:hover{
      color:#f0b1bb;
}

/* application */

.mxc-application{
    padding:100px 0;
    background:#f8f8f8;
}

.mxc-app-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:25px;
}

.mxc-app-item{
    position:relative;
    overflow:hidden;
}

.mxc-app-item img{
    width:100%;
    height:330px;
    object-fit:cover;
    display:block;
    transition:.5s;
}

.mxc-app-item:hover img{
    transform:scale(1.08);
}

.mxc-app-item span{
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    padding:20px 0;
    color:#fff;
    text-align:center;
    background-image: url(/static/images/solutions/Application_img.png);
    background-repeat: no-repeat;
    text-align: right;
    padding-right: 50px;
    font-size: 20px;
    background-size: 100% auto;
    
}

/* performance */

.mxc-performance{
    position:relative;
    padding:110px 0;
}

.mxc-performance-bg{
    position:absolute;
    inset:0;
    background:url('images/performance-bg.jpg') center/cover no-repeat;
}

.mxc-performance-bg::after{
    content:"";
    position:absolute;
    inset:0;
    background:rgba(6,16,32,.85);
}

.mxc-feature-grid{
    position:relative;
    z-index:2;
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:25px;
}

.mxc-feature-box{
    background:#fff;
    padding:30px;
    display:flex;
    gap:20px;
    align-items:flex-start;
        border: 1px dashed #d31632;
}

.mxc-feature-icon{
    min-width:58px;
    height:58px;
    border-radius:50%;
    background:#d31632;
    color:#fff;
    font-weight:700;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size: 20px;
}

.mxc-feature-box h3{
    margin:0 0 12px;
    font-size:24px;
    font-family: "Roboto-Black"; 
}

.mxc-feature-box p{
    color:#666;
    line-height:1.8;
    font-size: 18px;
}

/* silo type */

.mxc-silo-type{
    padding:100px 0;
}

.mxc-silo-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:30px;
}

.mxc-silo-item{
    overflow:hidden;
    position:relative;
    border: 2px solid #d31632;
}

.mxc-silo-item img{
    width:100%;
    height:380px;
    object-fit:cover;
    display:block;
    transition:.5s;
}

.mxc-silo-item:hover img{
    transform:scale(1.08);
}

.mxc-silo-item span{
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    background:#d31632;
    color:#fff;
    padding:18px;
    text-align:center;
    font-size: 20px;
}

/* advantage */

.mxc-advantage{
    padding:100px 0;
    background:#f8f8f8;
}

.mxc-adv-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:25px;
}

.mxc-adv-item{
    background:#fff;
    border-radius:12px;
    overflow:hidden;
    box-shadow:0 8px 24px rgba(0,0,0,.08);
    transition:.3s;
}

.mxc-adv-item:hover{
    transform:translateY(-6px);
}

.mxc-adv-item img{
    width:100%;
    height:220px;
    object-fit:cover;
}

.mxc-adv-text{
    padding:25px;
}

.mxc-adv-text h3{
    margin:0 0 12px;
    font-size:20px;
}

.mxc-adv-text p{
    color:#666;
    line-height:1.8;
}

/* process */

.mxc-process{
    padding:100px 0;
}

.mxc-process-row{
    display:grid;
    grid-template-columns:repeat(6,1fr);
    gap:25px;
}

.mxc-process-item{
    text-align:center;
}

.mxc-process-circle{
    width:90px;
    height:90px;
    border:3px solid #ff003c;
    border-radius:50%;
    margin:0 auto 20px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:34px;
    color:#ff003c;
}

.mxc-process-item span{
    font-weight:700;
    font-size:14px;
}

/* global */

.mxc-global{
    padding:100px 0;
    background:#f8f8f8;
}

.mxc-global-grid{
    display:grid;
    gap:15px;
}

.mxc-global-item img{
    width:100%;
    height:auto;
    object-fit:cover;
    border-radius:10px;
}

.mxc-global-number{
    background:#ff003c;
    border-radius:10px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    color:#fff;
}

.mxc-global-number strong{
    font-size:62px;
    line-height:1;
}

.mxc-global-number span{
    margin-top:10px;
    font-weight:700;
}

/* testimonial */

.mxc-testimonial{
    position:relative;
    padding:110px 0;
}

.mxc-testimonial-bg{
    position:absolute;
    inset:0;
    background:url('images/testimonial-bg.jpg') center/cover no-repeat;
}

.mxc-testimonial-bg::after{
    content:"";
    position:absolute;
    inset:0;
    background:rgba(7,15,29,.88);
}

.mxc-review-grid{
    position:relative;
    z-index:2;
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:25px;
}

.mxc-review-item{
    background:#fff;
    border-radius:12px;
    padding:30px;
}

.mxc-stars{
    color:#d31632;
    margin-bottom:20px;
    font-size: 26px;
}

.mxc-review-item p{
    color:#666;
    line-height:1.8;
}

.mxc-user{
    display:flex;
    align-items:center;
    gap:12px;
    margin-top:20px;
}

.mxc-user img{
    width:65px;
    height:65px;
    border-radius:50%;
    object-fit:cover;
}
.mxc-user span{ display:block; font-family: "Roboto-Black"; }
.mxc-user em{    font-style: normal; color:#d31632;}

/* contact */

.mxc-contact{
    padding:100px 0;
}

.mxc-contact-box{
    display:flex;
    gap:50px;
    background:#fff;
    box-shadow:0 15px 40px rgba(0,0,0,.08);
    overflow:hidden;
}

.mxc-contact-image,
.mxc-contact-form{
    flex:1;
}

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

.mxc-contact-form{
    padding:50px;
    padding-top: 80px;
}

.mxc-contact-form h2{
    margin:0 0 15px;
    font-size:40px;
}

.mxc-contact-form p{
    color:#666;
    margin-bottom:30px;
    width: 65%;
    font-size: 18px;
}

.mxc-form-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:20px;
}

.mxc-contact-form input,
.mxc-contact-form textarea{
    width:100%;
    border:1px solid #ddd;
    border-radius:10px;
    padding:15px;
    outline:none;
    font-size:15px;
}

.mxc-contact-form textarea{
    height:160px;
    resize:none;
    margin-top:20px;
}

.mxc-contact-form button{
    margin-top:25px;
    height:54px;
    padding:0 55px;
    border:none;
    border-radius:50px;
    background:#d31632;
    color:#fff;
    font-weight:700;
    cursor:pointer;
    transition:.3s;
    font-size: 20px;
    font-family: "Roboto-Black";
}

.mxc-contact-form button:hover{
    background:#d90032;
}

/* responsive */

@media(max-width:1200px){

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

}

@media(max-width:992px){

    .mxc-intro-wrap,
    .mxc-contact-box{
        flex-direction:column;
    }

    .mxc-app-grid,
    .mxc-silo-grid,
    .mxc-global-grid{
        grid-template-columns:repeat(2,1fr);
    }

    .mxc-process-row{
        grid-template-columns:repeat(3,1fr);
    }

}

@media(max-width:768px){
    .mxc-contact-form p{ width:100%;}
    .mxc-main-btn{ width:90%; height:auto; background-size: 100% auto;}
    .mxc-application, .mxc-performance, .mxc-silo-type, .mxc-advantage, .mxc-global, .mxc-testimonial{    padding: 50px 0;}
    .mxc-contact-list li strong{ font-size:22px;}
   .mxc-intro{    padding: 50px 0; padding-top:0;}
    .mxc-hero-content h1{
        font-size:38px;
    }

    .mxc-title-area h2{
        font-size:32px;
    }

    .mxc-intro-content h2,
    .mxc-contact-form h2{
        font-size:30px;
    }

    .mxc-feature-grid,
    .mxc-app-grid,
    .mxc-silo-grid,
    .mxc-adv-grid,
    .mxc-process-row,
    .mxc-global-grid,
    .mxc-review-grid,
    .mxc-form-grid{
        grid-template-columns:1fr;
    }

    .mxc-contact-form{
        padding:35px 25px;
    }

}