/* =========================
   GLOBAL RESET
========================= */
html{
    scroll-behavior: smooth;
}

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


html{
    scroll-behavior:smooth;
}


body{
    font-family: Arial, Helvetica, sans-serif;
    background:#020b1c;
    color:white;
}


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

header{

    width:100%;
    padding:25px 8%;

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

    background:#020b1c;

}


/* LOGO */

.logo{

    font-size:32px;
    font-weight:800;
    letter-spacing:2px;

    color:#00a8ff;

}


.logo span{

    display:block;

    font-size:13px;
    letter-spacing:5px;

    color:white;

}


/* NAVIGATION */

nav{

    display:flex;
    gap:35px;

}


nav a{

    text-decoration:none;
    color:white;

    font-size:16px;
    transition:0.3s;

}


nav a:hover{

    color:#00a8ff;

}


/* HEADER BUTTON */

header button{

    padding:12px 25px;

    border:none;
    border-radius:25px;

    background:#00a8ff;
    color:white;

    font-weight:600;

    cursor:pointer;

}
/* =========================
   HERO SECTION
========================= */

#home{

    min-height:90vh;

    padding:100px 8%;

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

    background:
    linear-gradient(
        rgba(2,11,28,0.85),
        rgba(2,11,28,0.95)
    ),
    url("https://images.unsplash.com/photo-1558494949-ef010cbdcc31");

    background-size:cover;
    background-position:center;

}


#home h1{

    max-width:900px;

    font-size:58px;

    line-height:1.15;

    font-weight:800;

    margin-bottom:25px;

}


#home p{

    max-width:650px;

    font-size:20px;

    line-height:1.6;

    color:#c9d6e8;

    margin-bottom:40px;

}

/* HERO BUTTONS */

#home button{

    padding:15px 35px;

    margin-right:15px;

    border-radius:30px;

    border:1px solid #00a8ff;

    background:#00a8ff;

    color:white;

    font-size:16px;

    font-weight:600;

    cursor:pointer;

    transition:0.3s;

}

#home button:hover{

    background:transparent;

    color:#00a8ff;

}
/* =========================
   ABOUT SECTION
========================= */

#about{

    padding:100px 8%;

    background:#061a3a;

    text-align:center;

}

#about h2{

    font-size:42px;

    margin-bottom:25px;

    color:#00a8ff;

}

#about p{

    max-width:900px;

    margin:auto;

    font-size:18px;

    line-height:1.8;

    color:#d5dfed;

}
/* =========================
   WHY CHOOSE IPCORE
========================= */


#why-us{

    padding:100px 8%;

    background:#020b1c;

    text-align:center;

}


#why-us h2{

    font-size:42px;

    color:#00a8ff;

    margin-bottom:50px;

}



.why-container{

    display:grid;

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

    gap:25px;

}



.why-card{

    background:#ffffff10;

    padding:35px 25px;

    border-radius:15px;

    border:1px solid #ffffff20;

    backdrop-filter:blur(10px);

    transition:0.3s;

}



.why-card:hover{

    transform:translateY(-10px);

    border-color:#00a8ff;

}



.why-card h3{

    font-size:22px;

    margin-bottom:15px;

    color:white;

}



.why-card p{

    color:#c9d6e8;

    line-height:1.6;

    font-size:15px;

}
/* =========================
   SERVICES SECTION
========================= */


#services{

    padding:100px 8%;

    background:#061a3a;

    text-align:center;

}


#services h2{

    font-size:42px;

    color:#00a8ff;

    margin-bottom:50px;

}



.service-container{

    display:grid;

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

    gap:25px;

}



.service-card{

    background:#ffffff10;

    padding:35px 25px;

    border-radius:15px;

    border:1px solid #ffffff20;

    transition:0.3s;

}



.service-card:hover{

    transform:translateY(-10px);

    border-color:#00a8ff;

}



.service-card h3{

    font-size:22px;

    margin-bottom:15px;

}



.service-card p{

    color:#c9d6e8;

    line-height:1.6;

}
/* =========================
   TECHNOLOGY SECTION
========================= */


#technology{

    padding:100px 8%;

    background:#020b1c;

    text-align:center;

}



#technology h2{

    font-size:42px;

    color:#00a8ff;

    margin-bottom:50px;

}



.tech-container{

    display:grid;

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

    gap:25px;

}



.tech-card{

    padding:30px;

    background:#ffffff10;

    border:1px solid #ffffff20;

    border-radius:15px;

    transition:0.3s;

}



.tech-card:hover{

    transform:translateY(-8px);

    border-color:#00a8ff;

}



.tech-card h3{

    font-size:22px;

    margin-bottom:15px;

}



.tech-card p{

    color:#c9d6e8;

    line-height:1.6;

}
/* =========================
   INDUSTRIES SECTION
========================= */


#industries{

    padding:100px 8%;

    background:#061a3a;

    text-align:center;

}



#industries h2{

    font-size:42px;

    color:#00a8ff;

    margin-bottom:50px;

}



.industry-container{

    display:grid;

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

    gap:25px;

}



.industry-card{

    padding:30px;

    background:#ffffff10;

    border:1px solid #ffffff20;

    border-radius:15px;

    transition:0.3s;

}



.industry-card:hover{

    transform:translateY(-8px);

    border-color:#00a8ff;

}



.industry-card h3{

    font-size:21px;

    margin-bottom:15px;

}



.industry-card p{

    color:#c9d6e8;

    line-height:1.6;

    font-size:15px;

}
/* =========================
   TRAINING SECTION
========================= */


#training{

    padding:100px 8%;

    background:#020b1c;

    text-align:center;

}



#training h2{

    font-size:42px;

    color:#00a8ff;

    margin-bottom:20px;

}



.training-intro{

    max-width:800px;

    margin:0 auto 50px;

    color:#c9d6e8;

    font-size:18px;

    line-height:1.6;

}



.training-container{

    display:grid;

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

    gap:25px;

}



.training-card{

    padding:30px 25px;

    background:#ffffff10;

    border:1px solid #ffffff20;

    border-radius:15px;

    transition:0.3s;

}



.training-card:hover{

    transform:translateY(-8px);

    border-color:#00a8ff;

}



.training-card h3{

    font-size:21px;

    margin-bottom:15px;

}



.training-card p{

    color:#c9d6e8;

    line-height:1.6;

    font-size:15px;

}
/* =========================
   EQUIPMENT SECTION
========================= */


#equipment{

    padding:100px 8%;

    background:#061a3a;

    text-align:center;

}



#equipment h2{

    font-size:42px;

    color:#00a8ff;

    margin-bottom:20px;

}



.equipment-intro{

    max-width:800px;

    margin:0 auto 50px;

    color:#c9d6e8;

    font-size:18px;

    line-height:1.6;

}



.equipment-container{

    display:grid;

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

    gap:25px;

}



.equipment-card{

    padding:30px 25px;

    background:#ffffff10;

    border:1px solid #ffffff20;

    border-radius:15px;

    transition:0.3s;

}



.equipment-card:hover{

    transform:translateY(-8px);

    border-color:#00a8ff;

}



.equipment-card h3{

    font-size:21px;

    margin-bottom:15px;

}



.equipment-card p{

    color:#c9d6e8;

    line-height:1.6;

    font-size:15px;

}
/* =========================
   CONTACT SECTION
========================= */


#contact{

    padding:100px 8%;

    background:#020b1c;

    text-align:center;

}



#contact h2{

    font-size:42px;

    color:#00a8ff;

    margin-bottom:20px;

}



.contact-intro{

    max-width:800px;

    margin:0 auto 50px;

    color:#c9d6e8;

    font-size:18px;

    line-height:1.6;

}



.contact-container{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:50px;

    align-items:center;

}



.contact-info{

    text-align:left;

    background:#ffffff10;

    padding:35px;

    border-radius:15px;

    border:1px solid #ffffff20;

}



.contact-info h3{

    font-size:28px;

    color:#00a8ff;

    margin-bottom:20px;

}



.contact-info h4{

    font-size:22px;

    margin-top:25px;

    margin-bottom:8px;

}



.contact-info p{

    color:#d5dfed;

    line-height:1.8;

}



.contact-form{

    display:flex;

    flex-direction:column;

    gap:15px;

}



.contact-form input,
.contact-form textarea{

    padding:15px;

    border-radius:10px;

    border:1px solid #ffffff30;

    background:#ffffff10;

    color:white;

    font-size:15px;

}



.contact-form textarea{

    height:130px;

    resize:none;

}



.contact-form button{

    padding:15px;

    border:none;

    border-radius:30px;

    background:#00a8ff;

    color:white;

    font-size:16px;

    font-weight:600;

    cursor:pointer;

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


footer{

    padding:40px 8%;

    background:#010611;

    text-align:center;

    border-top:1px solid #ffffff20;

}



footer h3{

    color:#00a8ff;

    font-size:25px;

    margin-bottom:15px;

}



footer p{

    color:#c9d6e8;

    margin-top:10px;

}
/* =========================
   MOBILE RESPONSIVE
========================= */


@media(max-width:900px){


header{

    flex-direction:column;

    gap:20px;

}


nav{

    flex-wrap:wrap;

    justify-content:center;

    gap:20px;

}



#home h1{

    font-size:38px;

}


#home p{

    font-size:17px;

}



.why-container,
.service-container,
.tech-container,
.industry-container,
.training-container,
.equipment-container{

    grid-template-columns:1fr;

}



.contact-container{

    grid-template-columns:1fr;

}



.contact-info{

    text-align:center;

}



}


@media(max-width:500px){


header{

    padding:20px 5%;

}



.logo{

    font-size:28px;

}



#home{

    padding:70px 5%;

}



#home h1{

    font-size:32px;

}



#home button{

    width:100%;

    margin-bottom:15px;

}



#about,
#services,
#technology,
#industries,
#training,
#equipment,
#contact,
#why-us{

    padding:70px 5%;

}



#about h2,
#services h2,
#technology h2,
#industries h2,
#training h2,
#equipment h2,
#contact h2,
#why-us h2{

    font-size:32px;

}


}

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


#main-header{

    position:sticky;

    top:0;

    z-index:1000;

    backdrop-filter:blur(12px);

    background:#020b1ccc;

    border-bottom:1px solid #ffffff15;

}
/* =========================
   SOLUTIONS SECTION
========================= */


#solutions{

    padding:100px 8%;

    background:#061a3a;

    text-align:center;

}


#solutions h2{

    font-size:42px;

    color:#00a8ff;

    margin-bottom:20px;

}


.solution-intro{

    max-width:850px;

    margin:0 auto 50px;

    color:#c9d6e8;

    font-size:18px;

    line-height:1.6;

}



.solution-container{

    display:grid;

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

    gap:25px;

}



.solution-card{

    padding:30px 25px;

    background:#ffffff10;

    border:1px solid #ffffff20;

    border-radius:15px;

    transition:0.3s;

}



.solution-card:hover{

    transform:translateY(-8px);

    border-color:#00a8ff;

}



.solution-card h3{

    font-size:21px;

    margin-bottom:15px;

}



.solution-card p{

    color:#c9d6e8;

    line-height:1.6;

}
/* =========================
   INDUSTRIES SECTION
========================= */


#industries{

    padding:100px 8%;

    background:#061a3a;

    text-align:center;

}



#industries h2{

    font-size:42px;

    color:#00a8ff;

    margin-bottom:20px;

}



.industry-intro{

    max-width:850px;

    margin:0 auto 50px;

    color:#c9d6e8;

    font-size:18px;

    line-height:1.6;

}



.industry-container{

    display:grid;

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

    gap:25px;

}



.industry-card{

    padding:30px 25px;

    background:#ffffff10;

    border:1px solid #ffffff20;

    border-radius:15px;

    transition:0.3s;

}



.industry-card:hover{

    transform:translateY(-8px);

    border-color:#00a8ff;

    box-shadow:0 0 20px #00a8ff40;

}



.industry-card h3{

    color:white;

    font-size:21px;

    margin-bottom:15px;

}



.industry-card p{

    color:#c9d6e8;

    line-height:1.6;

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

footer{

    background:#021124;

    padding:45px 8%;

    text-align:center;

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

}



.footer-logo{

    color:white;

    font-size:32px;

    font-weight:700;

    letter-spacing:2px;

    margin-bottom:15px;

}



.footer-logo span{

    color:#00a8ff;

}



.footer-tagline{

    color:#b9c7d8;

    font-size:16px;

    margin-bottom:20px;

    line-height:1.8;

}



.footer-copy{

    color:#8da2bd;

    font-size:14px;

}

footer{

    padding:35px 20px;

}

.footer-logo{

    font-size:26px;

}

.footer-tagline{

    font-size:14px;

}
/* =========================
   STICKY NAVBAR
========================= */

header{

    position:sticky;

    top:0;

    z-index:1000;

    transition:0.4s ease;

    backdrop-filter:blur(12px);

    background:rgba(2,18,36,0.90);

    border-bottom:1px solid rgba(255,255,255,0.08);

}

header.scrolled{

    padding:12px 8%;

    background:rgba(2,18,36,0.97);

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

}
html{

    scroll-behavior:smooth;

}
.btn{

    transition:all .35s ease;

}

.btn:hover{

    transform:translateY(-3px);

    box-shadow:0 10px 25px rgba(0,168,255,.35);

}
.service-card,
.tech-card,
.solution-card,
.industry-card,
.choose-card{

    transition:all .35s ease;

}

.service-card:hover,
.tech-card:hover,
.solution-card:hover,
.industry-card:hover,
.choose-card:hover{

    transform:translateY(-8px);

}
.whatsapp-header{

    display:flex;

    align-items:center;

    gap:10px;

    background:#25D366;

    color:white;

    text-decoration:none;

    padding:14px 26px;

    border-radius:40px;

    font-weight:600;

    transition:.3s;

}

.whatsapp-header:hover{

    background:#20ba5a;

    transform:translateY(-2px);

}

.whatsapp-header i{

    font-size:20px;

}