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

.about-hero{

    position:relative;

    min-height:100vh;

    overflow:hidden;

    display:flex;

    align-items:center;
}

/* BACKGROUND */

.about-hero-bg{

    position:absolute;

    inset:0;

    width:100%;
    height:100%;

    object-fit:cover;
}

/* OVERLAY */

.about-hero-overlay{

    position:absolute;

    inset:0;

    background:
    linear-gradient(
    90deg,
    rgba(0,0,0,.82) 0%,
    rgba(0,0,0,.55) 40%,
    rgba(0,0,0,.15) 100%
    );
}

/* CONTENT */

.about-hero-content{

    position:relative;

    z-index:5;

    width:100%;

    max-width:760px;

    padding-left:70px;

    padding-top:120px;
}

/* TITLE */

.about-hero-content h1{

    color:#fff;

    font-size:54px;

    line-height:1;

    font-weight:900;

    letter-spacing:-2px;

    margin-bottom:28px;

    text-transform:uppercase;
}

/* TEXT */

.about-hero-content p{

    color:#fff;

    font-size:20px;

    line-height:1.8;

    max-width:620px;

    opacity:.92;
}
/* ======================================== */
/* ABOUT SPLIT */
/* ======================================== */

.about-split{

    display:grid;

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

/* BOX */

.about-box{

    position:relative;

    min-height:520px;

    overflow:hidden;

    display:flex;

    align-items:flex-end;

    padding:60px;
}

/* OVERLAY */

.about-overlay{

    position:absolute;

    inset:0;

    background:
    linear-gradient(
    to top,
    rgba(0,0,0,.75),
    rgba(0,0,0,.15)
    );
}

/* GREEN */

.about-green{

    background:
    url('../img/social-bg.png')
    center center/cover no-repeat;
}

/* ORANGE */

.about-orange{

    background:
    url('../img/eco-bg.png')
    center center/cover no-repeat;
}

/* CONTENT */

.about-content{

    position:relative;

    z-index:5;

    max-width:520px;
}

.about-content h2{

    color:#fff;

    font-size:42px;

    line-height:1.05;

    margin-bottom:20px;

    font-weight:900;
}

.about-content p{

    color:#fff;

    font-size:18px;

    line-height:1.7;

    opacity:.92;
}

/* LOGOS */

.about-logos img{

    width:120px;

    margin-bottom:24px;
}
/* ======================================== */
/* MISION VISION */
/* ======================================== */

.mision-vision{

    padding:
    120px
    7%;

    background:#f5f7f5;
}

/* GRID */

.mv-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:40px;
}

/* BOX */

.mv-box{

    background:#fff;

    border-radius:32px;

    overflow:hidden;

    box-shadow:
    0 20px 50px rgba(0,0,0,.08);
}

/* IMAGE */

.mv-image img{

    width:100%;

    height:340px;

    object-fit:cover;
}

/* CONTENT */

.mv-content{

    padding:45px;
}

/* TAG */

.mv-content span{

    display:inline-block;

    color:#E14514;

    font-size:13px;

    font-weight:700;

    letter-spacing:4px;

    margin-bottom:20px;
}

/* TITLE */

.mv-content h2{

    font-size:36px;

    line-height:1.15;

    margin-bottom:24px;

    color:#111;

    font-weight:900;
}

/* TEXT */

.mv-content p{

    font-size:18px;

    line-height:1.8;

    color:#5f5f5f;
}
/* ======================================== */
/* VALUES PREMIUM */
/* ======================================== */

.values-premium{

    position:relative;

    padding:
    140px
    7%;

    background:#07110C;

    overflow:hidden;
}

/* CONTAINER */

.values-container{

    display:grid;

    grid-template-columns:
    420px
    1fr;

    gap:80px;

    align-items:flex-start;
}

/* ======================================== */
/* LEFT */
/* ======================================== */

/* ======================================== */
/* LEFT SIDE */
/* ======================================== */

.values-left{

    position:sticky;

    top:120px;

    padding:20px 10px;

    z-index:5;
}

/* TITLE */

.values-left h1{

    font-size:58px;

    line-height:1.05;

    font-weight:900;

    color:#FFFFFF;

    margin-bottom:28px;

    text-transform:uppercase;

    letter-spacing:-2px;

    position:relative;

    display:inline-block;
}

/* ORANGE ACCENT */

.values-left h1::after{

    content:'';

    position:absolute;

    left:0;
    bottom:-10px;

    width:120px;
    height:6px;

    border-radius:20px;

    background:#E14514;
}

/* TEXT */

.values-left p{

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

    font-size:18px;

    line-height:1.9;

    max-width:390px;

    margin-top:35px;
}

/* WATERMARK */

.values-watermark{

    width:160px;

    opacity:.06;

    margin-top:50px;
}

.values-premium{

    position:relative;

    padding:
    140px
    7%;

    background:
    linear-gradient(
    135deg,
    #03110B 0%,
    #071B13 100%
    );

    overflow:hidden;
}

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

.values-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:30px;
}

/* ======================================== */
/* CARD */
/* ======================================== */

.values-card{

    position:relative;

    overflow:hidden;

    padding:
    42px
    36px;

    border-radius:32px;

    background:
    linear-gradient(
    145deg,
    rgba(255,255,255,.07),
    rgba(255,255,255,.02)
    );

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

    backdrop-filter:blur(14px);

    transition:
    transform .35s ease,
    border-color .35s ease,
    box-shadow .35s ease;
}

/* TOP GLOW */

.values-card::before{

    content:'';

    position:absolute;

    top:0;
    left:0;

    width:100%;
    height:4px;

    background:
    linear-gradient(
    90deg,
    #E14514,
    #ff7a4d
    );

    opacity:.9;
}

/* HOVER */

.values-card:hover{

    transform:
    translateY(-12px);

    border-color:
    rgba(225,69,20,.45);

    box-shadow:
    0 20px 50px rgba(0,0,0,.35);
}

/* ======================================== */
/* ICON */
/* ======================================== */

.values-icon{

    width:74px;
    height:74px;

    border-radius:24px;

    background:
    linear-gradient(
    135deg,
    #E14514,
    #ff6b3d
    );

    display:flex;

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

    margin-bottom:28px;

    box-shadow:
    0 10px 30px rgba(225,69,20,.35);
}

/* ICON */

.values-icon i{

    color:#fff;

    font-size:30px;
}

/* ======================================== */
/* TITLE */
/* ======================================== */

.values-card h3{

    color:#fff;

    font-size:30px;

    line-height:1.2;

    margin-bottom:18px;

    font-weight:800;
}

/* ======================================== */
/* TEXT */
/* ======================================== */

.values-card p{

    color:rgba(255,255,255,.74);

    font-size:17px;

    line-height:1.9;
}



/* ======================================== */
/* ECO SECTION */
/* ======================================== */

.eco-section{

    padding:
    140px
    7%;

    background:#f5f7f5;
}

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

.eco-header{

    text-align:center;

    max-width:950px;

    margin:auto auto 80px;
}

/* TAG */

.eco-header span{

    display:inline-block;

    color:#E14514;

    font-size:14px;

    font-weight:700;

    letter-spacing:4px;

    margin-bottom:24px;
}

/* TITLE */

.eco-header h2{

    font-size:64px;

    line-height:1.05;

    font-weight:900;

    letter-spacing:-2px;

    color:#111;

    margin-bottom:28px;
}

/* TEXT */

.eco-header p{

    font-size:20px;

    line-height:1.8;

    color:#5f5f5f;
}

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

.eco-grid{

    display:grid;

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

    gap:28px;
}

/* ======================================== */
/* CARD */
/* ======================================== */

.eco-card{

    background:#fff;

    border-radius:30px;

    padding:
    45px
    36px;

    box-shadow:
    0 20px 50px rgba(0,0,0,.06);

    transition:.35s ease;
}

/* HOVER */

.eco-card:hover{

    transform:translateY(-8px);

    box-shadow:
    0 25px 60px rgba(0,0,0,.1);
}

/* NUMBER */

.eco-number{

    font-size:72px;

    font-weight:900;

    line-height:1;

    color:#E14514;

    opacity:.12;

    margin-bottom:24px;
}

/* TITLE */

.eco-card h3{

    font-size:28px;

    line-height:1.2;

    color:#111;

    margin-bottom:18px;

    font-weight:800;
}

/* TEXT */

.eco-card p{

    font-size:17px;

    line-height:1.8;

    color:#5f5f5f;
}
/* ======================================== */
/* ABOUT RESPONSIVE */
/* ======================================== */

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

@media(max-width:768px){

.about-hero{

    min-height:auto;
}

.about-hero-content{

    padding:
    140px
    24px
    70px;

    max-width:100%;
}

.about-hero-content h1{

    font-size:34px;

    line-height:1.05;

    letter-spacing:-1px;

    margin-bottom:20px;
}

.about-hero-content p{

    font-size:15px;

    line-height:1.7;
}

.about-box{

    min-height:380px;

    padding:35px 24px;
}

.about-content h2{

    font-size:28px;
}

.about-content p{

    font-size:15px;
}

.mision-vision{

    padding:
    80px
    24px;
}

.mv-content{

    padding:28px 24px;
}

.mv-content h2{

    font-size:26px;
}

.mv-content p{

    font-size:15px;
}

.values-premium{

    padding:
    80px
    24px;
}

.values-left h1{

    font-size:38px;
}

.values-left p{

    font-size:15px;
}

.values-grid{

    gap:20px;
}

.values-card{

    padding:
    30px
    24px;
}

.values-card h3{

    font-size:22px;
}

.values-card p{

    font-size:15px;
}

.eco-section{

    padding:
    80px
    24px;
}

.eco-header h2{

    font-size:34px;
}

.eco-header p{

    font-size:15px;
}

.eco-card{

    padding:
    30px
    24px;
}

.eco-card h3{

    font-size:22px;
}

.eco-card p{

    font-size:15px;
}

}
/* ========================================
LARGE DESKTOP
======================================== */

@media(max-width:1600px){

.about-hero-content h1{

    font-size:50px;
}

.values-left h1{

    font-size:52px;
}

.eco-header h2{

    font-size:56px;
}

}
/* ========================================
LAPTOP
======================================== */

@media(max-width:1400px){

.about-hero-content{

    max-width:680px;
}

.about-hero-content h1{

    font-size:46px;
}

.about-hero-content p{

    font-size:18px;
}

.values-container{

    grid-template-columns:
    360px
    1fr;

    gap:50px;
}

.values-left h1{

    font-size:46px;
}

.eco-grid{

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

.eco-header h2{

    font-size:50px;
}

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

@media(max-width:992px){

.about-hero-content{

    padding-left:40px;

    padding-top:150px;

    max-width:560px;
}

.about-hero-content h1{

    font-size:40px;
}

.about-hero-content p{

    font-size:17px;
}

.about-split{

    grid-template-columns:1fr;
}

.mv-grid{

    grid-template-columns:1fr;
}

.values-container{

    grid-template-columns:1fr;

    gap:60px;
}

.values-left{

    position:relative;

    top:auto;
}

.values-grid{

    grid-template-columns:1fr;
}

.eco-grid{

    grid-template-columns:1fr;
}

.eco-header h2{

    font-size:42px;
}

}