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

.page-hero{

    width:100%;

    padding:140px 80px;

    background:
    linear-gradient(
        135deg,
        #071028,
        #0f172a
    );

    color:white;
}

.page-hero-content{

    width:100%;

    max-width:1200px;

    margin:auto;
}

.page-hero-content span{

    color:#3b82f6;

    font-size:14px;

    font-weight:700;

    letter-spacing:5px;
}

.page-hero-content h1{

    margin-top:25px;

    font-size:72px;

    line-height:1.1;

    font-weight:800;

    max-width:900px;
}

.page-hero-content p{

    margin-top:30px;

    max-width:850px;

    font-size:22px;

    line-height:1.8;

    color:#cbd5e1;
}



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

.about-company{

    width:100%;

    padding:120px 80px;

    background:#f8fafc;
}

.about-company-grid{

    width:100%;

    max-width:1300px;

    margin:auto;

    display:grid;

    grid-template-columns:500px 1fr;

    gap:80px;

    align-items:center;
}



/* IMAGE */

.about-company-image img{

    width:100%;

    border-radius:30px;

    display:block;

    box-shadow:
    0 20px 50px rgba(15,23,42,0.08);
}



/* TEXT */

.about-company-text span{

    color:#2563eb;

    font-size:14px;

    font-weight:700;

    letter-spacing:5px;
}

.about-company-text h2{

    margin-top:20px;

    font-size:58px;

    line-height:1.1;

    color:#0f172a;

    font-weight:800;
}

.about-company-text p{

    margin-top:25px;

    font-size:20px;

    line-height:1.9;

    color:#64748b;
}



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

.values{

    width:100%;

    padding:120px 80px;

    background:white;
}



/* TITLE */

.values-title{

    text-align:center;

    margin-bottom:70px;
}

.values-title span{

    color:#2563eb;

    font-size:14px;

    font-weight:700;

    letter-spacing:5px;
}

.values-title h2{

    margin-top:20px;

    font-size:58px;

    color:#0f172a;

    font-weight:800;
}



/* GRID */

.values-grid{

    width:100%;

    max-width:1300px;

    margin:auto;

    display:grid;

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

    gap:30px;
}



/* CARD */

.value-card{

    background:#f8fafc;

    border-radius:30px;

    padding:50px;

    text-align:center;

    border:1px solid #e2e8f0;

    transition:0.4s;
}

.value-card:hover{

    transform:translateY(-10px);

    box-shadow:
    0 20px 40px rgba(15,23,42,0.06);
}



/* ICON */

.value-card i{

    font-size:52px;

    color:#2563eb;
}



/* TEXT */

.value-card h3{

    margin-top:30px;

    font-size:28px;

    color:#0f172a;
}

.value-card p{

    margin-top:20px;

    font-size:18px;

    line-height:1.8;

    color:#64748b;
}

/* =========================================================
   EXPERIENCE
========================================================= */

.experience{

    width:100%;

    padding:120px 80px;

    background:#f8fafc;
}

.experience-grid{

    width:100%;

    max-width:1300px;

    margin:auto;

    display:grid;

    grid-template-columns:420px 1fr;

    gap:80px;

    align-items:center;
}



/* IMAGE */

.experience-image img{

    width:100%;

    border-radius:30px;

    display:block;

    box-shadow:
    0 20px 50px rgba(15,23,42,0.08);
}



/* CONTENT */

.experience-content span{

    color:#2563eb;

    font-size:14px;

    font-weight:700;

    letter-spacing:5px;
}

.experience-content h2{

    margin-top:20px;

    font-size:58px;

    line-height:1.1;

    color:#0f172a;

    font-weight:800;
}

.experience-content p{

    margin-top:25px;

    font-size:20px;

    line-height:1.9;

    color:#64748b;
}

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

@media(max-width: 768px){

    body{

        overflow-x:hidden;
    }

    .page-hero{

        padding:220px 25px 60px;
    }

    .page-hero-content h1{

        font-size:42px;
    }

    .page-hero-content p{

        font-size:18px;

        line-height:1.7;
    }

    .about-company{

        padding:70px 25px;
    }

    .about-company-grid{

        grid-template-columns:1fr;

        gap:50px;
    }

    .about-company-text h2{

        font-size:42px;
    }

    .about-company-text p{

        font-size:18px;

        line-height:1.8;
    }

    .values{

        padding:70px 25px;
    }

    .values-title{

        margin-bottom:50px;
    }

    .values-title h2{

        font-size:42px;
    }

    .values-grid{

        grid-template-columns:1fr;

        gap:25px;
    }

    .value-card{

        padding:40px 30px;
    }

    .value-card h3{

        font-size:24px;
    }

    .value-card p{

        font-size:17px;

        line-height:1.7;
    }

    /* EXPERIENCE */

    .experience{

        padding:70px 25px;
    }

    .experience-grid{

        grid-template-columns:1fr;

        gap:45px;
    }

    .experience-image img{

        width:100%;

        max-width:100%;

        border-radius:24px;
    }

    .experience-content span{

        font-size:12px;

        letter-spacing:3px;
    }

    .experience-content h2{

        margin-top:15px;

        font-size:38px;

        line-height:1.2;
    }

    .experience-content p{

        margin-top:22px;

        font-size:17px;

        line-height:1.8;
    }

}