/*==================================================
 PKPS GROUP CORPORATE WEBSITE
 Developed by PKPS Group & ChatGPT
 Version 1.0
==================================================*/

/* RESET */

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

html{
    scroll-behavior:smooth;
}

body{

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

    color:#333;

    background:#ffffff;

    line-height:1.7;

    overflow-x:hidden;
}

img{

    max-width:100%;

    display:block;
}

a{

    text-decoration:none;
}

.container{

    width:90%;

    max-width:1250px;

    margin:auto;
}

section{

    padding:90px 0;
}

h1,h2,h3,h4{

    color:#003366;
}

.section-description{

    max-width:850px;

    margin:20px auto 60px;

    text-align:center;

    color:#666;

    font-size:18px;

    line-height:1.8;
}

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

header{

    position:fixed;

    top:0;

    left:0;

    width:100%;

    background:#ffffff;

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

    z-index:1000;
}

header .container{

    display:flex;

    justify-content:space-between;

    align-items:center;

    height:90px;
}

.logo{

    display:flex;

    align-items:center;

    gap:15px;
}

.logo img{

    width:65px;

    height:65px;

    border-radius:18px;
}

.logo span{

    font-size:28px;

    font-weight:700;

    color:#003366;
}

nav{

    display:flex;

    gap:35px;
}

nav a{

    color:#003366;

    font-weight:600;

    transition:.3s;
}

nav a:hover{

    color:#00AEEF;
}

.btn-nav{

    background:#003366;

    color:white;

    padding:14px 28px;

    border-radius:10px;

    transition:.3s;
}

.btn-nav:hover{

    background:#00AEEF;
}

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

.hero{

    min-height:100vh;

    display:flex;

    justify-content:center;

    align-items:center;

    text-align:center;

    padding-top:100px;

    background:linear-gradient(135deg,#003366,#00AEEF);

    color:white;
}

.hero-content{

    max-width:950px;
}

.hero h1{

    font-size:68px;

    color:white;

    line-height:1.2;

    margin-bottom:30px;
}

.hero p{

    font-size:24px;

    line-height:1.8;

    margin-bottom:45px;
}

.hero-buttons{

    display:flex;

    justify-content:center;

    gap:20px;

    flex-wrap:wrap;
}

.primary-btn{

    background:white;

    color:#003366;

    padding:18px 40px;

    border-radius:10px;

    font-weight:700;

    transition:.3s;
}

.primary-btn:hover{

    transform:translateY(-5px);
}

.secondary-btn{

    border:2px solid white;

    color:white;

    padding:18px 40px;

    border-radius:10px;

    transition:.3s;
}

.secondary-btn:hover{

    background:white;

    color:#003366;
}

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

.about{

    background:#ffffff;
}

.about h2{

    text-align:center;

    font-size:46px;

    margin-bottom:20px;
}

.about p{

    text-align:center;

    font-size:20px;

    color:#555;

    line-height:1.9;

    max-width:950px;

    margin:auto;
}

/*====================================
        OUR COMPANIES
====================================*/

.companies{

    background:#f8fbff;
}

.companies h2{

    text-align:center;

    font-size:46px;

    margin-bottom:20px;
}

.company-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));

    gap:35px;

    margin-top:50px;
}

.company-card{

    background:white;

    padding:40px 30px;

    border-radius:18px;

    text-align:center;

    box-shadow:0 8px 25px rgba(0,0,0,.08);

    transition:.35s;
}

.company-card:hover{

    transform:translateY(-10px);

    box-shadow:0 20px 40px rgba(0,0,0,.12);
}

.company-icon{

    font-size:60px;

    margin-bottom:25px;
}

.company-card h3{

    font-size:26px;

    margin-bottom:18px;
}

.company-card p{

    color:#666;

    margin-bottom:25px;

    line-height:1.8;
}

.company-card a{

    display:inline-block;

    color:#00AEEF;

    font-weight:700;

    transition:.3s;
}

.company-card a:hover{

    color:#003366;
}


/*====================================
        WHY CHOOSE PKPS
====================================*/

.why{

    background:white;
}

.why h2{

    text-align:center;

    font-size:46px;

    margin-bottom:60px;
}

.why-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(250px,1fr));

    gap:30px;
}

.why-card{

    background:#f8fbff;

    padding:40px;

    border-radius:16px;

    text-align:center;

    transition:.35s;

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

.why-card:hover{

    background:#003366;

    color:white;

    transform:translateY(-8px);
}

.why-card:hover h3{

    color:white;
}

.why-card h3{

    font-size:28px;

    margin-bottom:18px;
}

.why-card p{

    line-height:1.8;
}


/*====================================
        STATISTICS
====================================*/

.stats{

    background:linear-gradient(135deg,#003366,#00AEEF);

    color:white;
}

.stats-grid{

    display:grid;

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

    gap:30px;
}

.stat-card{

    text-align:center;
}

.stat-card h2{

    color:white;

    font-size:58px;

    margin-bottom:10px;
}

.stat-card p{

    font-size:20px;
}


/*====================================
        INDUSTRIES
====================================*/

.industries{

    background:#ffffff;
}

.industries h2{

    text-align:center;

    font-size:46px;

    margin-bottom:50px;
}

.industry-grid{

    display:grid;

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

    gap:25px;
}

.industry-grid div{

    background:#f8fbff;

    padding:35px;

    border-radius:15px;

    text-align:center;

    font-size:22px;

    font-weight:600;

    color:#003366;

    transition:.35s;

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

.industry-grid div:hover{

    background:#003366;

    color:white;

    transform:translateY(-8px);
}

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

.contact{

    background:#f8fbff;

    text-align:center;
}

.contact h2{

    font-size:46px;

    margin-bottom:20px;
}

.contact p{

    font-size:20px;

    color:#666;

    margin-bottom:50px;
}

.contact form{

    max-width:700px;

    margin:auto;

    display:flex;

    flex-direction:column;

    gap:20px;
}

.contact input,
.contact textarea{

    width:100%;

    padding:18px;

    border:1px solid #ddd;

    border-radius:10px;

    font-size:16px;

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

    transition:.3s;
}

.contact input:focus,
.contact textarea:focus{

    border-color:#00AEEF;

    outline:none;

    box-shadow:0 0 10px rgba(0,174,239,.2);
}

.contact textarea{

    resize:vertical;
}

.contact button{

    background:#003366;

    color:white;

    border:none;

    padding:18px;

    font-size:18px;

    font-weight:600;

    border-radius:10px;

    cursor:pointer;

    transition:.3s;
}

.contact button:hover{

    background:#00AEEF;

    transform:translateY(-3px);
}


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

footer{

    background:#003366;

    color:white;

    text-align:center;

    padding:70px 20px;
}

.footer-logo{

    width:90px;

    margin:0 auto 20px;
}

footer h3{

    color:white;

    font-size:32px;

    margin-bottom:20px;
}

footer p{

    max-width:700px;

    margin:0 auto 30px;

    line-height:1.8;

    color:#d8e6f3;
}

.footer-links{

    display:flex;

    justify-content:center;

    gap:30px;

    flex-wrap:wrap;

    margin-bottom:30px;
}

.footer-links a{

    color:white;

    transition:.3s;

    font-weight:500;
}

.footer-links a:hover{

    color:#00AEEF;
}

.copyright{

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

    padding-top:25px;

    font-size:15px;

    color:#bcd4e6;
}


/*====================================
        SIMPLE ANIMATIONS
====================================*/

.company-card,
.why-card,
.industry-grid div,
.stat-card{

    transition:all .35s ease;
}

.company-card:hover,
.why-card:hover,
.industry-grid div:hover{

    transform:translateY(-10px);
}


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

@media(max-width:1000px){

header .container{

flex-direction:column;

height:auto;

padding:20px;
}

nav{

margin:20px 0;

flex-wrap:wrap;

justify-content:center;

gap:20px;
}

.hero h1{

font-size:52px;
}

.hero p{

font-size:21px;
}

.stats-grid{

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

gap:40px;
}

.industry-grid{

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

}

@media(max-width:768px){

section{

padding:70px 0;
}

.hero{

padding-top:140px;
}

.hero h1{

font-size:42px;
}

.hero p{

font-size:19px;
}

.hero-buttons{

flex-direction:column;
}

.primary-btn,
.secondary-btn{

width:100%;
}

.about h2,
.companies h2,
.why h2,
.contact h2,
.industries h2{

font-size:38px;
}

.logo span{

font-size:22px;
}

}

@media(max-width:600px){

.company-grid{

grid-template-columns:1fr;
}

.why-grid{

grid-template-columns:1fr;
}

.stats-grid{

grid-template-columns:1fr;
}

.industry-grid{

grid-template-columns:1fr;
}

.hero h1{

font-size:34px;
}

.hero p{

font-size:17px;
}

.about p{

font-size:17px;
}

.section-description{

font-size:17px;
}

.contact input,
.contact textarea{

padding:15px;
}

.footer-links{

flex-direction:column;

gap:15px;
}

}