:root{
    --bg:#f4f6f7;
    --bg-soft:#eef1f3;
    --surface:#ffffff;
    --surface-2:#f7f8f9;

    --metal-1:#d9dde0;
    --metal-2:#b8bec3;
    --metal-3:#8f989f;
    --metal-4:#5e686f;

    --graphite:#1e252a;
    --graphite-2:#2f383e;
    --text:#1c2328;
    --muted:#68737b;

    --line:rgba(31,39,45,.11);
    --line-strong:rgba(31,39,45,.18);

    --shadow:0 24px 70px rgba(39,48,55,.10);
    --shadow-soft:0 12px 35px rgba(39,48,55,.08);

    --radius:24px;
    --radius-sm:16px;

    --transition:.35s ease;
}


/* =========================================================
   RESET
========================================================= */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{
    font-family:'Manrope',sans-serif;
    background:var(--bg);
    color:var(--text);
    overflow-x:hidden;
    line-height:1.65;
}

img{
    max-width:100%;
    display:block;
}

a{
    text-decoration:none;
    color:inherit;
}

button{
    border:0;
    outline:0;
}

::selection{
    background:#bfc5c9;
    color:#111;
}

.container{
    max-width:1380px;
}


/* =========================================================
   HEADER
========================================================= */

.mes-header{
    position:absolute;
    top:18px;
    left:0;
    width:100%;
    z-index:1000;
}

.mes-navbar{
    min-height:82px;
    padding:10px 18px 10px 22px;

    background:rgba(255,255,255,.62);

    border:1px solid rgba(255,255,255,.70);

    border-radius:20px;

    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);

    box-shadow:
        0 18px 50px rgba(20,27,32,.10),
        inset 0 1px 0 rgba(255,255,255,.8);
}

.mes-logo{
    display:flex;
    align-items:center;
}

.mes-logo img{
   
    max-height:60px;
    object-fit:contain;
}

.mes-navbar .navbar-nav{
    gap:12px;
}

.mes-navbar .nav-link{
    position:relative;
    padding:14px 12px !important;

    font-size:15px;
    font-weight:600;

    color:#2b3338;

    transition:var(--transition);
}

.mes-navbar .nav-link::after{
    content:"";
    position:absolute;
    left:12px;
    right:12px;
    bottom:7px;

    height:2px;

    background:linear-gradient(
        90deg,
        #7b848a,
        #d8dde0
    );

    transform:scaleX(0);
    transform-origin:center;

    transition:.3s ease;
}

.mes-navbar .nav-link:hover,
.mes-navbar .nav-link.active{
    color:#11171b;
}

.mes-navbar .nav-link:hover::after,
.mes-navbar .nav-link.active::after{
    transform:scaleX(1);
}

.mes-header-button{
    min-width:145px;
    height:50px;

    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;

    padding:0 22px;

    border-radius:14px;

    color:#fff;

    font-size:14px;
    font-weight:700;

    background:
        linear-gradient(
            135deg,
            #2c3439 0%,
            #59646b 50%,
            #252c31 100%
        );

    box-shadow:
        0 12px 28px rgba(26,33,38,.22),
        inset 0 1px 0 rgba(255,255,255,.20);

    transition:var(--transition);
}

.mes-header-button:hover{
    color:#fff;
    transform:translateY(-2px);
}

.mes-header-button i{
    font-size:16px;
}

.navbar-toggler{
    width:48px;
    height:48px;

    border-radius:12px;

    background:#fff;
    color:#222;

    box-shadow:var(--shadow-soft);
}

.navbar-toggler:focus{
    box-shadow:var(--shadow-soft);
}

.navbar-toggler i{
    font-size:28px;
}


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

.mes-hero{
    position:relative;
    width:100%;
    overflow:hidden;
}

.mes-hero .carousel,
.mes-hero .carousel-inner,
.mes-hero .carousel-item{
    height:100vh;
    min-height:760px;
}

.mes-slide{
    position:relative;
    width:100%;
    height:100%;
    min-height:760px;
    overflow:hidden;
}

.mes-slide-image{
    position:absolute;
    inset:0;

    width:100%;
    height:100%;

    object-fit:cover;
    object-position:center;

    transform:scale(1.02);
}

.mes-slide-overlay{
    position:absolute;
    inset:0;

    background:
        linear-gradient(
            90deg,
            rgba(244,246,247,.96) 0%,
            rgba(244,246,247,.86) 25%,
            rgba(244,246,247,.44) 50%,
            rgba(244,246,247,.08) 76%,
            rgba(15,20,23,.10) 100%
        ),
        linear-gradient(
            180deg,
            rgba(255,255,255,.08) 0%,
            transparent 65%,
            rgba(13,18,21,.15) 100%
        );
}

.mes-slide .container{
    position:relative;
    z-index:5;
    height:100%;

    display:flex;
    align-items:center;
}

.mes-slide-content{
    width:100%;
    max-width:770px;

    padding-top:70px;
}

.mes-eyebrow{
    display:flex;
    align-items:center;
    gap:14px;

    margin-bottom:20px;

    font-family:'Montserrat',sans-serif;

    font-size:13px;
    font-weight:600;
    letter-spacing:.24em;
    text-transform:uppercase;

    color:#5a656c;
}

.mes-eyebrow span{
    width:44px;
    height:1px;

    background:linear-gradient(
        90deg,
        #3d474d,
        #b8c0c5
    );
}

.mes-slide-content h1,
.mes-slide-content .hero-title{
    margin:0 0 24px;

    font-size:clamp(52px,5.8vw,92px);
    line-height:.98;

    letter-spacing:-.055em;

    font-weight:800;

    color:#172026;
}

.mes-slide-content h1 span,
.mes-slide-content .hero-title span{
    display:block;

    margin-top:8px;

    font-weight:500;

    color:#49545b;
}

.mes-slide-content p{
    max-width:630px;

    margin-bottom:30px;

    font-size:18px;
    line-height:1.75;
    font-weight:500;

    color:#4c575e;
}

.mes-hero-buttons{
    display:flex;
    align-items:center;
    gap:14px;
    flex-wrap:wrap;
}

.mes-btn{
    min-height:56px;

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

    padding:0 25px;

    border-radius:14px;

    font-size:14px;
    font-weight:700;

    transition:var(--transition);
}

.mes-btn-dark{
    color:#fff;

    background:
        linear-gradient(
            135deg,
            #1e252a 0%,
            #515b61 52%,
            #232b30 100%
        );

    box-shadow:
        0 16px 34px rgba(23,30,34,.22),
        inset 0 1px 0 rgba(255,255,255,.15);
}

.mes-btn-dark:hover{
    color:#fff;
    transform:translateY(-3px);
    box-shadow:0 20px 40px rgba(23,30,34,.28);
}

.mes-btn-light{
    color:#273036;

    background:rgba(255,255,255,.70);

    border:1px solid rgba(255,255,255,.80);

    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);

    box-shadow:0 14px 30px rgba(38,46,52,.08);
}

.mes-btn-light:hover{
    color:#151a1d;
    background:#fff;
    transform:translateY(-3px);
}

.mes-slider-number{
    position:absolute;
    z-index:10;

    left:max(34px,calc((100vw - 1380px)/2 - 52px));
    top:50%;

    transform:translateY(-50%);

    display:flex;
    flex-direction:column;
    align-items:center;
    gap:10px;

    color:#3e484e;

    font-size:12px;
    font-weight:700;
}

.mes-slider-number .line{
    width:1px;
    height:58px;

    background:linear-gradient(
        180deg,
        #414b51,
        rgba(65,75,81,.15)
    );
}

.mes-slider-number .current{
    font-size:16px;
    color:#171d21;
}

.mes-slider-controls{
    position:absolute;

    z-index:20;

    left:max(34px,calc((100vw - 1380px)/2));

    bottom:46px;

    display:flex;
    gap:10px;
}

.mes-slider-controls .carousel-control-prev,
.mes-slider-controls .carousel-control-next{
    position:static;

    width:50px;
    height:50px;

    opacity:1;

    border-radius:50%;

    background:rgba(255,255,255,.62);

    color:#263037;

    border:1px solid rgba(255,255,255,.8);

    backdrop-filter:blur(14px);

    box-shadow:0 10px 25px rgba(22,29,34,.10);

    transition:var(--transition);
}

.mes-slider-controls button:hover{
    background:#fff;
    transform:translateY(-2px);
}

.mes-hero-bottom-text{
    position:absolute;

    z-index:6;

    right:max(40px,calc((100vw - 1380px)/2));

    bottom:58px;

    display:flex;
    align-items:center;
    gap:13px;

    color:#fff;

    font-family:'Montserrat',sans-serif;

    font-size:11px;
    font-weight:600;

    letter-spacing:.2em;
    text-transform:uppercase;

    text-shadow:0 2px 15px rgba(0,0,0,.4);
}

.mes-hero-bottom-text i{
    width:4px;
    height:4px;

    display:block;

    border-radius:50%;
    background:rgba(255,255,255,.7);
}


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

.mes-products-section,
.mes-about-section,
.mes-values-section{
    padding:110px 0;
}

.mes-section-top{
    display:flex;
    align-items:center;
    justify-content:space-between;

    margin-bottom:34px;
}

.mes-small-title{
    display:flex;
    align-items:center;
    gap:16px;

    font-family:'Montserrat',sans-serif;

    font-size:12px;
    font-weight:700;
    letter-spacing:.22em;

    text-transform:uppercase;

    color:#566169;
}

.mes-small-title i{
    width:64px;
    height:1px;

    background:#8d969c;
}

.mes-small-right{
    font-size:11px;
    font-weight:600;
    letter-spacing:.18em;

    text-transform:uppercase;

    color:#8a949a;
}

.mes-section-label{
    display:flex;
    align-items:center;
    gap:12px;

    margin-bottom:18px;

    font-family:'Montserrat',sans-serif;

    font-size:12px;
    font-weight:700;
    letter-spacing:.18em;

    text-transform:uppercase;

    color:#657078;
}

.mes-section-label span{
    width:42px;
    height:1px;

    background:#788289;
}

.mes-section-title{
    margin:0 0 24px;

    font-size:clamp(42px,4vw,64px);
    line-height:1.04;

    font-weight:800;

    letter-spacing:-.045em;

    color:#172026;
}

.mes-section-title span{
    display:block;

    color:#536068;

    font-weight:500;
}


/* =========================================================
   PRODUCTS
========================================================= */

.mes-products-section{
    position:relative;

    background:
        linear-gradient(
            180deg,
            #f5f7f8 0%,
            #eef1f3 100%
        );

    border-bottom:1px solid var(--line);
}

.mes-product-card{
    position:relative;

    min-height:305px;

    padding:24px;

    display:flex;
    align-items:flex-end;

    overflow:hidden;

    border-radius:22px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.95),
            rgba(229,233,236,.88)
        );

    border:1px solid rgba(255,255,255,.95);

    box-shadow:
        0 20px 48px rgba(47,57,64,.10),
        inset 0 1px 0 rgba(255,255,255,1);

    transition:var(--transition);
}

.mes-product-card::before{
    content:"";

    position:absolute;
    inset:0;

   

    z-index:1;

    pointer-events:none;
}

.mes-product-card:hover{
    transform:translateY(-8px);
    box-shadow:0 28px 65px rgba(47,57,64,.15);
}

.mes-product-image{
    position:absolute;
    inset:0;

    overflow:hidden;
}

.mes-product-image::after{
    content:"";
    position:absolute;
    inset:0;

    background:
        linear-gradient(
            to top,
            rgba(255,255,255,.96) 0%,
            rgba(255,255,255,.82) 28%,
            rgba(255,255,255,.35) 58%,
            transparent 82%
        ),
        linear-gradient(
            to right,
            rgba(255,255,255,.55) 0%,
            rgba(255,255,255,.15) 50%,
            transparent 78%
        );
}

.mes-product-image img{
    width:100%;
    height:100%;

    object-fit:cover;

    transition:transform .7s ease;
}

.mes-product-card:hover .mes-product-image img{
    transform:scale(1.06);
}

.mes-product-content{
    position:relative;
    z-index:3;

    width:74%;
}

.mes-product-number{
    display:block;

    margin-bottom:20px;

    font-size:12px;
    font-weight:700;

    color:#7b868d;
}

.mes-product-content h3{
    margin:0 0 5px;

    font-size:24px;
    font-weight:800;

    letter-spacing:-.025em;

    color:#182126;
}

.mes-product-value{
    margin-bottom:15px;

    font-size:28px;
    font-weight:700;

    letter-spacing:-.04em;

    color:#374149;
}

.mes-product-value span{
    font-weight:500;
    color:#69747b;
}

.mes-product-value sub{
    font-size:60%;
}

.mes-product-content p{
    margin:0;

    font-size:14px;
    font-weight:500;

    color:#6d787f;
}

.mes-product-arrow{
    position:absolute;

    z-index:5;

    right:24px;
    bottom:24px;

    width:48px;
    height:48px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:50%;

    color:#313a40;

    background:rgba(255,255,255,.78);

    border:1px solid rgba(255,255,255,.95);

    box-shadow:0 10px 22px rgba(35,43,49,.12);

    transition:var(--transition);
}

.mes-product-arrow:hover{
    color:#111;
    transform:rotate(45deg);
    background:#fff;
}


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

.mes-about-section{
    background:#f7f8f9;
}

.mes-about-text{
    max-width:600px;

    margin-bottom:28px;

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

    color:#69747b;
}

.mes-about-features{
    display:flex;
    align-items:center;
    gap:22px;
    flex-wrap:wrap;

    margin-top:38px;
}

.mes-mini-feature{
    display:flex;
    align-items:center;
    gap:9px;

    font-size:13px;
    font-weight:700;

    color:#515c63;
}

.mes-mini-feature i{
    font-size:19px;
    color:#434d53;
}

.mes-about-image{
    position:relative;

    height:590px;

    border-radius:28px;

    overflow:hidden;

    box-shadow:var(--shadow);
}

.mes-about-image::after{
    content:"";

    position:absolute;
    inset:0;

    background:
        linear-gradient(
            180deg,
            transparent 45%,
            rgba(15,20,23,.55) 100%
        );
}

.mes-about-image img{
    width:100%;
    height:100%;

    object-fit:cover;
}

.mes-about-image-text{
    position:absolute;

    z-index:4;

    left:40px;
    bottom:38px;

    color:#fff;
}

.mes-about-image-text span{
    display:block;

    margin-bottom:5px;

    font-size:13px;
    font-weight:600;
    letter-spacing:.18em;

    text-transform:uppercase;
}

.mes-about-image-text strong{
    max-width:420px;

    display:block;

    font-size:30px;
    line-height:1.15;
    font-weight:700;
}


/* =========================================================
   VALUES
========================================================= */

.mes-values-section{
    background:
        linear-gradient(
            145deg,
            #e9edef 0%,
            #f7f8f9 45%,
            #e8ecee 100%
        );

    border-top:1px solid #fff;
    border-bottom:1px solid var(--line);
}

.mes-values-heading{
    max-width:440px;
}

.mes-value-card{
    height:100%;
  

    padding:30px;

    display:flex;
    align-items:flex-start;
    gap:22px;

    border-radius:20px;

    background:rgba(255,255,255,.70);

    border:1px solid rgba(255,255,255,.86);

    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);

    box-shadow:
        0 15px 38px rgba(44,54,61,.08),
        inset 0 1px 0 rgba(255,255,255,1);

    transition:var(--transition);
}

.mes-value-card:hover{
    transform:translateY(-5px);
    background:#fff;
}

.mes-value-icon{
    flex:0 0 auto;

    width:56px;
    height:56px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:15px;

    color:#374147;

    background:
        linear-gradient(
            145deg,
            #fff,
            #dfe4e7
        );

    border:1px solid rgba(60,69,76,.08);

    box-shadow:
        0 10px 25px rgba(39,47,53,.09),
        inset 0 1px 0 #fff;
}

.mes-value-icon i{
    font-size:25px;
}

.mes-value-card h3{
    margin:3px 0 8px;

    font-size:19px;
    font-weight:800;

    color:#212a30;
}

.mes-value-card p{
    margin:0;

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

    color:#738087;
}


/* =========================================================
   CONTACT
========================================================= */

.mes-contact-section{
    padding:65px 0;

    background:
        linear-gradient(
            180deg,
            #edf0f2,
            #e4e8ea
        );
}

.mes-contact-box{
    display:grid;
    grid-template-columns:1.35fr 1fr 1fr;

    border-radius:22px;

    overflow:hidden;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.85),
            rgba(228,232,235,.84)
        );

    border:1px solid rgba(255,255,255,.9);

    box-shadow:
        0 22px 55px rgba(45,54,60,.10),
        inset 0 1px 0 #fff;
}

.mes-contact-item{
    min-height:132px;

    display:flex;
    align-items:center;
    gap:18px;

    padding:25px 34px;

    position:relative;
}

.mes-contact-item + .mes-contact-item::before{
    content:"";

    position:absolute;

    left:0;
    top:28px;
    bottom:28px;

    width:1px;

    background:rgba(54,64,70,.10);
}

.mes-contact-icon{
    flex:0 0 auto;

    width:52px;
    height:52px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:50%;

    background:
        linear-gradient(
            145deg,
            #2f383e,
            #667077
        );

    color:#fff;

    box-shadow:0 12px 25px rgba(40,48,54,.18);
}

.mes-contact-icon i{
    font-size:20px;
}

.mes-contact-item span{
    display:block;

    margin-bottom:5px;

    font-size:11px;
    font-weight:700;
    letter-spacing:.12em;

    color:#879198;

    text-transform:uppercase;
}

.mes-contact-item strong,
.mes-contact-item a{
    display:block;

    font-size:15px;
    line-height:1.5;

    font-weight:700;

    color:#283137;
}

.mes-contact-item a:hover{
    color:#68737b;
}


/* =========================================================
   FOOTER
========================================================= */

.mes-footer{
    padding:54px 0 25px;

    background:#f5f6f7;

    border-top:1px solid rgba(255,255,255,.8);
}

.mes-footer-main{
    display:grid;
    grid-template-columns:1.2fr 1.4fr .65fr;

    align-items:center;

    gap:40px;

    padding-bottom:35px;
}

.mes-footer-brand{
    display:flex;
    align-items:center;
    gap:20px;
}

.mes-footer-brand img{
    width:120px;
    max-height:70px;
    object-fit:contain;
}

.mes-footer-brand div{
    padding-left:18px;
    border-left:1px solid var(--line);
}

.mes-footer-brand strong,
.mes-footer-brand span{
    display:block;
}

.mes-footer-brand strong{
    font-size:11px;
    font-weight:800;
    letter-spacing:.12em;
    text-transform:uppercase;

    color:#4d585f;
}

.mes-footer-brand span{
    margin-top:4px;

    font-size:11px;
    letter-spacing:.12em;
    text-transform:uppercase;

    color:#8a949a;
}

.mes-footer-menu{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:28px;
    flex-wrap:wrap;
}

.mes-footer-menu a{
    font-size:13px;
    font-weight:600;

    color:#59646b;

    transition:var(--transition);
}

.mes-footer-menu a:hover{
    color:#151b1f;
}

.mes-footer-social{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:9px;
}

.mes-footer-social a{
    width:40px;
    height:40px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:50%;

    background:
        linear-gradient(
            145deg,
            #fff,
            #e4e8ea
        );

    color:#475158;

    border:1px solid rgba(40,49,55,.06);

    transition:var(--transition);
}

.mes-footer-social a:hover{
    color:#fff;

    background:
        linear-gradient(
            145deg,
            #30393f,
            #59646b
        );

    transform:translateY(-3px);
}

.mes-footer-bottom{
    padding-top:24px;

    border-top:1px solid var(--line);

    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:20px;

    font-size:12px;

    color:#818b91;
}


/* =========================================================
   SCROLLBAR
========================================================= */

::-webkit-scrollbar{
    width:10px;
}

::-webkit-scrollbar-track{
    background:#e8ecee;
}

::-webkit-scrollbar-thumb{
    background:
        linear-gradient(
            180deg,
            #8e979d,
            #505a60
        );

    border-radius:10px;

    border:2px solid #e8ecee;
}


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

@media (max-width:1399px){

    .container{
        max-width:1180px;
    }

    .mes-slider-number{
        left:22px;
    }

    .mes-slider-controls{
        left:30px;
    }

    .mes-hero-bottom-text{
        right:30px;
    }

}


@media (max-width:1199px){

    .mes-slide-content{
        max-width:680px;
    }

    .mes-slide-content h1,
    .mes-slide-content .hero-title{
        font-size:68px;
    }

    .mes-product-card{
        min-height:280px;
    }

    .mes-about-image{
        height:520px;
    }

    .mes-contact-box{
        grid-template-columns:1fr 1fr;
    }

    .mes-contact-item:last-child{
        grid-column:1 / -1;
    }

    .mes-contact-item:last-child::before{
        display:none;
    }

    .mes-footer-main{
        grid-template-columns:1fr;
        text-align:center;
    }

    .mes-footer-brand{
        justify-content:center;
    }

    .mes-footer-social{
        justify-content:center;
    }

}


@media (max-width:991px){

    .mes-header{
        top:12px;
    }

    .mes-navbar{
        padding:10px 14px;
    }

    .navbar-collapse{
        margin-top:12px;

        padding:20px;

        border-radius:16px;

        background:rgba(255,255,255,.94);

        box-shadow:0 15px 40px rgba(30,38,43,.12);

        backdrop-filter:blur(16px);
    }

    .mes-navbar .navbar-nav{
        gap:0;
    }

    .mes-navbar .nav-link{
        padding:12px 4px !important;
    }

    .mes-navbar .nav-link::after{
        display:none;
    }

    .mes-header-button{
        margin-top:12px;
        width:100%;
    }

    .mes-hero .carousel,
    .mes-hero .carousel-inner,
    .mes-hero .carousel-item,
    .mes-slide{
        height:860px;
        min-height:860px;
    }

    .mes-slide-overlay{
        background:
            linear-gradient(
                90deg,
                rgba(245,247,248,.96) 0%,
                rgba(245,247,248,.82) 60%,
                rgba(245,247,248,.25) 100%
            );
    }

    .mes-slide-content{
        max-width:650px;
        padding-top:120px;
    }

    .mes-slide-content h1,
    .mes-slide-content .hero-title{
        font-size:62px;
    }

    .mes-slider-number{
        display:none;
    }

    .mes-hero-bottom-text{
        display:none;
    }

    .mes-products-section,
    .mes-about-section,
    .mes-values-section{
        padding:85px 0;
    }

    .mes-about-image{
        height:480px;
    }

    .mes-values-heading{
        margin-bottom:40px;
    }

}


@media (max-width:767px){

    .mes-header{
        padding:0 8px;
    }

    .mes-logo img{
        width:95px;
    }

    .mes-hero .carousel,
    .mes-hero .carousel-inner,
    .mes-hero .carousel-item,
    .mes-slide{
        height:780px;
        min-height:780px;
    }

    .mes-slide-image{
        object-position:62% center;
    }

    .mes-slide-overlay{
        background:
            linear-gradient(
                90deg,
                rgba(246,248,249,.96) 0%,
                rgba(246,248,249,.90) 68%,
                rgba(246,248,249,.40) 100%
            );
    }

    .mes-slide .container{
        align-items:flex-start;
    }

    .mes-slide-content{
        padding-top:190px;
    }

    .mes-eyebrow{
        font-size:10px;
        letter-spacing:.16em;
    }

    .mes-slide-content h1,
    .mes-slide-content .hero-title{
        font-size:48px;
        line-height:1.03;
    }

    .mes-slide-content p{
        font-size:16px;
        line-height:1.7;
    }

    .mes-hero-buttons{
        align-items:stretch;
        flex-direction:column;
    }

    .mes-btn{
        width:100%;
    }

    .mes-slider-controls{
        left:20px;
        bottom:24px;
    }

    .mes-section-top{
        align-items:flex-start;
        flex-direction:column;
        gap:15px;
    }

    .mes-small-right{
        display:none;
    }

    .mes-section-title{
        font-size:42px;
    }

    .mes-product-card{
        min-height:290px;
    }

    .mes-about-image{
        height:400px;
    }

    .mes-about-image-text{
        left:25px;
        right:25px;
        bottom:25px;
    }

    .mes-about-image-text strong{
        font-size:24px;
    }

    .mes-about-features{
        gap:15px;
    }

    .mes-contact-box{
        grid-template-columns:1fr;
    }

    .mes-contact-item{
        min-height:115px;
        padding:24px;
    }

    .mes-contact-item + .mes-contact-item::before{
        left:24px;
        right:24px;
        top:0;

        width:auto;
        height:1px;
        bottom:auto;
    }

    .mes-contact-item:last-child{
        grid-column:auto;
    }

    .mes-contact-item:last-child::before{
        display:block;
    }

    .mes-footer-brand{
        flex-direction:column;
    }

    .mes-footer-brand div{
        padding-left:0;
        padding-top:15px;

        border-left:0;
        border-top:1px solid var(--line);
    }

    .mes-footer-menu{
        gap:15px 22px;
    }

    .mes-footer-bottom{
        flex-direction:column;
        text-align:center;
    }

}


@media (max-width:575px){

    .container{
        padding-left:18px;
        padding-right:18px;
    }

    .mes-navbar{
        border-radius:16px;
    }

    .mes-slide-content h1,
    .mes-slide-content .hero-title{
        font-size:40px;
    }

    .mes-section-title{
        font-size:36px;
    }

    .mes-products-section,
    .mes-about-section,
    .mes-values-section{
        padding:70px 0;
    }

    .mes-product-content{
        width:85%;
    }

    .mes-product-content h3{
        font-size:22px;
    }

    .mes-product-value{
        font-size:25px;
    }

    .mes-about-image{
        height:340px;
        border-radius:20px;
    }

    .mes-value-card{
        padding:24px;
    }

    .mes-contact-section{
        padding:45px 0;
    }

}


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

.mes-inner-hero{
    position:relative;

    padding:150px 0 55px;

    background:
        radial-gradient(
            circle at 85% 20%,
            rgba(255,255,255,.85),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            #d9dde0 0%,
            #eef1f3 48%,
            #c8ced2 100%
        );

    border-bottom:1px solid rgba(37,46,52,.10);

    overflow:hidden;
}

.mes-inner-hero::after{
    content:"";

    position:absolute;

    right:-100px;
    bottom:-160px;

    width:420px;
    height:420px;

    border-radius:50%;

    background:rgba(255,255,255,.22);

    filter:blur(10px);
}

.mes-inner-hero-content{
    position:relative;
    z-index:2;

    display:flex;
    align-items:flex-end;
    justify-content:space-between;

    gap:30px;
}

.mes-inner-label{
    display:block;

    margin-bottom:10px;

    font-size:12px;
    font-weight:700;

    letter-spacing:.18em;
    text-transform:uppercase;

    color:#6d777d;
}

.mes-inner-hero h1{
    margin:0;

    font-size:clamp(44px,5vw,68px);

    line-height:1;

    letter-spacing:-.045em;

    font-weight:800;

    color:#172026;
}

.mes-breadcrumb{
    display:flex;
    align-items:center;
    gap:10px;

    padding-bottom:5px;

    font-size:14px;
    font-weight:600;
}

.mes-breadcrumb a{
    color:#657078;

    transition:.3s ease;
}

.mes-breadcrumb a:hover{
    color:#172026;
}

.mes-breadcrumb i{
    font-size:11px;

    color:#8a949a;
}

.mes-breadcrumb span{
    color:#20282d;
}


@media (max-width:767px){

    .mes-inner-hero{
        padding:125px 0 40px;
    }

    .mes-inner-hero-content{
        align-items:flex-start;
        flex-direction:column;
        gap:20px;
    }

    .mes-inner-hero h1{
        font-size:42px;
    }

}


/* =========================================================
   GALLERY
========================================================= */

.mes-gallery-section{
    padding:100px 0;
    background:#f5f7f8;
}

.mes-gallery-item{
    position:relative;
    display:block;
    height:330px;
    overflow:hidden;
    border-radius:22px;

    background:#e6e9eb;

    box-shadow:
        0 18px 45px rgba(35,44,50,.08),
        inset 0 1px 0 rgba(255,255,255,.8);

    border:1px solid rgba(255,255,255,.9);
}

.mes-gallery-item.mes-gallery-large{
    height:470px;
}

.mes-gallery-item.mes-gallery-wide{
    height:390px;
}

.mes-gallery-item img{
    width:100%;
    height:100%;
    object-fit:cover;

    transition:
        transform .7s cubic-bezier(.2,.7,.2,1),
        filter .5s ease;
}

.mes-gallery-item:hover img{
    transform:scale(1.06);
}

.mes-gallery-overlay{
    position:absolute;
    inset:0;

    display:flex;
    align-items:flex-end;
    justify-content:space-between;

    padding:28px;

    background:
        linear-gradient(
            180deg,
            transparent 35%,
            rgba(16,22,26,.15) 58%,
            rgba(16,22,26,.72) 100%
        );

    color:#fff;

    transition:.4s ease;
}

.mes-gallery-overlay span{
    display:block;

    margin-bottom:6px;

    font-size:10px;
    font-weight:700;
    letter-spacing:.18em;

    text-transform:uppercase;

    opacity:.8;
}

.mes-gallery-overlay h3{
    margin:0;

    font-size:20px;
    font-weight:700;

    letter-spacing:-.02em;
}

.mes-gallery-overlay > i{
    width:44px;
    height:44px;

    display:flex;
    align-items:center;
    justify-content:center;

    flex:0 0 auto;

    border-radius:50%;

    background:rgba(255,255,255,.16);

    border:1px solid rgba(255,255,255,.24);

    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);

    font-size:17px;

    transition:.3s ease;
}

.mes-gallery-item:hover .mes-gallery-overlay > i{
    background:#fff;
    color:#252d32;
    transform:scale(1.08);
}


/* =========================================================
   GALLERY MODAL
========================================================= */

.mes-gallery-modal{
    position:relative;

    background:transparent;
    border:0;

    border-radius:24px;

    overflow:visible;
}

.mes-gallery-modal img{
    width:100%;
    max-height:85vh;

    display:block;

    object-fit:contain;

    border-radius:22px;

    background:#1d2327;

    box-shadow:0 30px 90px rgba(0,0,0,.32);
}

.mes-gallery-modal-close{
    position:absolute;

    z-index:10;

    right:-15px;
    top:-15px;

    width:48px;
    height:48px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:50%;

    background:#fff;
    color:#222a2f;

    box-shadow:0 10px 30px rgba(0,0,0,.18);

    font-size:18px;

    transition:.3s ease;
}

.mes-gallery-modal-close:hover{
    transform:rotate(90deg);
}

.modal-backdrop.show{
    opacity:.78;
}


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

@media (max-width:991px){

    .mes-gallery-section{
        padding:80px 0;
    }

    .mes-gallery-item,
    .mes-gallery-item.mes-gallery-large,
    .mes-gallery-item.mes-gallery-wide{
        height:340px;
    }

}

@media (max-width:767px){

    .mes-gallery-section{
        padding:65px 0;
    }

    .mes-gallery-item,
    .mes-gallery-item.mes-gallery-large,
    .mes-gallery-item.mes-gallery-wide{
        height:300px;
        border-radius:18px;
    }

    .mes-gallery-overlay{
        padding:22px;
    }

    .mes-gallery-overlay h3{
        font-size:18px;
    }

    .mes-gallery-modal-close{
        right:5px;
        top:-58px;
    }

}


/* =========================================================
   CONTACT PAGE
========================================================= */

.mes-contact-page{
    padding:100px 0;

    background:
        linear-gradient(
            180deg,
            #f7f8f9 0%,
            #eef1f3 100%
        );
}


/* LEFT CONTACT ITEMS */

.mes-contact-page-item{
    display:flex;
    align-items:center;
    gap:18px;

    padding:22px 0;

    border-bottom:1px solid rgba(36,45,51,.09);
}

.mes-contact-page-icon{
    flex:0 0 auto;

    width:54px;
    height:54px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:16px;

    background:
        linear-gradient(
            145deg,
            #ffffff,
            #dfe4e7
        );

    color:#333d43;

    border:1px solid rgba(255,255,255,.9);

    box-shadow:
        0 10px 25px rgba(38,47,53,.09),
        inset 0 1px 0 #fff;
}

.mes-contact-page-icon i{
    font-size:21px;
}

.mes-contact-page-item span{
    display:block;

    margin-bottom:4px;

    font-size:10px;
    font-weight:700;

    letter-spacing:.16em;

    text-transform:uppercase;

    color:#8a949a;
}

.mes-contact-page-item strong,
.mes-contact-page-item a{
    display:block;

    font-size:16px;
    line-height:1.6;

    font-weight:700;

    color:#293238;
}

.mes-contact-page-item a{
    transition:.3s ease;
}

.mes-contact-page-item a:hover{
    color:#6d787f;
}


/* FORM BOX */

.mes-contact-form-box{
    padding:42px;

    border-radius:24px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.96),
            rgba(235,238,240,.92)
        );

    border:1px solid rgba(255,255,255,.95);

    box-shadow:
        0 25px 65px rgba(42,51,58,.10),
        inset 0 1px 0 rgba(255,255,255,1);
}

.mes-contact-form-head{
    margin-bottom:30px;
}

.mes-contact-form-head > span{
    display:block;

    margin-bottom:8px;

    font-size:11px;
    font-weight:700;

    letter-spacing:.17em;
    text-transform:uppercase;

    color:#818c93;
}

.mes-contact-form-head h3{
    margin:0 0 9px;

    font-size:30px;
    line-height:1.2;

    font-weight:800;

    letter-spacing:-.035em;

    color:#1d252a;
}

.mes-contact-form-head p{
    margin:0;

    font-size:15px;

    color:#778289;
}


/* FORM */

.mes-form-group{
    height:100%;
}

.mes-form-group label{
    display:block;

    margin-bottom:8px;

    font-size:12px;
    font-weight:700;

    color:#566168;
}

.mes-form-group input,
.mes-form-group select,
.mes-form-group textarea{
    width:100%;

    border:1px solid rgba(37,46,52,.10);

    outline:0;

    border-radius:13px;

    background:rgba(255,255,255,.85);

    color:#253036;

    font-family:'Manrope',sans-serif;

    font-size:14px;

    transition:.3s ease;
}

.mes-form-group input,
.mes-form-group select{
    height:54px;

    padding:0 17px;
}

.mes-form-group textarea{
    min-height:160px;

    padding:16px 17px;

    resize:vertical;
}

.mes-form-group input::placeholder,
.mes-form-group textarea::placeholder{
    color:#a1aaaf;
}

.mes-form-group input:focus,
.mes-form-group select:focus,
.mes-form-group textarea:focus{
    background:#fff;

    border-color:#909aa0;

    box-shadow:
        0 0 0 4px rgba(81,92,99,.07);
}

.mes-contact-submit{
    border:0;

    margin-top:7px;

    min-width:190px;
}


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

@media (max-width:991px){

    .mes-contact-page{
        padding:80px 0;
    }

}

@media (max-width:767px){

    .mes-contact-page{
        padding:65px 0;
    }

    .mes-contact-form-box{
        padding:28px 22px;

        border-radius:20px;
    }

    .mes-contact-form-head h3{
        font-size:25px;
    }

    .mes-contact-submit{
        width:100%;
    }

}



/* =========================================================
   OFFER MODAL
========================================================= */

.mes-offer-modal{
    position:relative;
    overflow:hidden;

    border:0;
    border-radius:26px;

    background:#f5f7f8;

    box-shadow:
        0 35px 100px rgba(20,28,33,.25);
}

.mes-offer-close{
    position:absolute;

    z-index:20;

    top:18px;
    right:18px;

    width:44px;
    height:44px;

    display:flex;
    align-items:center;
    justify-content:center;

    border:0;
    border-radius:50%;

    background:rgba(255,255,255,.88);

    color:#252d32;

    font-size:17px;

    box-shadow:0 8px 25px rgba(27,34,39,.12);

    transition:.3s ease;
}

.mes-offer-close:hover{
    transform:rotate(90deg);
    background:#fff;
}


/* LEFT */

.mes-offer-left{
    height:100%;

    padding:52px 42px;

    display:flex;
    flex-direction:column;
    justify-content:center;

    background:
        radial-gradient(
            circle at 15% 15%,
            rgba(255,255,255,.35),
            transparent 30%
        ),
        linear-gradient(
            145deg,
            #293238 0%,
            #58636a 100%
        );

    color:#fff;
}

.mes-offer-small{
    display:block;

    margin-bottom:15px;

    font-size:11px;
    font-weight:700;

    letter-spacing:.2em;
    text-transform:uppercase;

    color:rgba(255,255,255,.65);
}

.mes-offer-left h2{
    margin:0 0 20px;

    font-size:42px;
    line-height:1;

    font-weight:800;

    letter-spacing:-.045em;
}

.mes-offer-left h2 span{
    display:block;

    margin-top:6px;

    font-weight:400;

    color:#d6dce0;
}

.mes-offer-left p{
    margin:0 0 32px;

    font-size:14px;
    line-height:1.8;

    color:rgba(255,255,255,.72);
}

.mes-offer-contact{
    display:flex;
    flex-direction:column;
    gap:15px;
}

.mes-offer-contact > div{
    display:flex;
    align-items:center;
    gap:11px;

    font-size:13px;
    font-weight:600;

    color:rgba(255,255,255,.82);
}

.mes-offer-contact i{
    width:34px;
    height:34px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:10px;

    background:rgba(255,255,255,.10);
}

.mes-offer-contact a{
    color:inherit;
}


/* RIGHT */

.mes-offer-form-area{
    padding:52px 42px;
}

.mes-offer-form-title{
    margin-bottom:25px;
}

.mes-offer-form-title > span{
    display:block;

    margin-bottom:6px;

    font-size:11px;
    font-weight:700;

    letter-spacing:.17em;
    text-transform:uppercase;

    color:#879198;
}

.mes-offer-form-title h3{
    margin:0;

    max-width:420px;

    font-size:28px;
    line-height:1.2;

    font-weight:800;

    letter-spacing:-.035em;

    color:#1f282d;
}

.mes-offer-submit{
    width:100%;

    border:0;

    margin-top:5px;
}


/* MODAL BACKDROP */

.modal-backdrop.show{
    opacity:.70;
}


/* RESPONSIVE */

@media (max-width:991px){

    .mes-offer-left{
        padding:36px 30px;
    }

    .mes-offer-form-area{
        padding:36px 30px;
    }

}

@media (max-width:767px){

    .mes-offer-modal{
        border-radius:20px;
    }

    .mes-offer-left{
        padding:35px 24px;
    }

    .mes-offer-left h2{
        font-size:34px;
    }

    .mes-offer-form-area{
        padding:35px 24px;
    }

    .mes-offer-form-title h3{
        font-size:24px;
    }

    .mes-offer-close{
        top:12px;
        right:12px;
    }

}