/* ==========================================================
   KORVX Industries (Pvt) Ltd
   Global Styles v1.0
   ========================================================== */

/* ==========================================================
   GLOBAL
   ========================================================== */

html {
    scroll-behavior: smooth;
}

body {
    background: var(--kv-bg);
    color: var(--kv-text);
    font-family: var(--font-body);
    font-size: var(--fs-md);
    font-weight: var(--fw-normal);
    line-height: 1.7;
    overflow-x: hidden;
    padding-top:84px;
}

/* ==========================================================
   TYPOGRAPHY
   ========================================================== */

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-heading);
    font-weight: var(--fw-black);
    color: var(--kv-dark);
    line-height: 1.2;
    margin-bottom: 1rem;
}

h1 {
    font-size: clamp(2.8rem, 5vw, 4.5rem);
}

h2 {
    font-size: clamp(2rem, 4vw, 3rem);
}

h3 {
    font-size: 1.6rem;
}

p {
    margin-bottom: 1rem;
}

.lead {
    font-size: 1.2rem;
    color: var(--kv-text-light);
}

/* ==========================================================
   NAVBAR
   ========================================================== */

.kv-navbar{

    min-height:84px;

    border-bottom:1px solid var(--kv-border);

    background:#fff !important;

}

.navbar-brand img{

    height:42px;

    width:auto;

}

.navbar-nav{

    gap:.5rem;

}

.nav-link{

    font-weight:600;

    color:var(--kv-dark) !important;

    text-transform:uppercase;

    letter-spacing:.06em;

    font-size:.9rem;

    padding:.8rem 1rem !important;

    transition:var(--transition);

}

.nav-link:hover{

    color:var(--kv-accent) !important;

}

.nav-link.active{

    color:var(--kv-accent) !important;

}

/* ==========================================================
   LINKS
   ========================================================== */

a {
    color: var(--kv-accent);
    text-decoration: none;
    transition: var(--transition);
}

a:hover {
    color: var(--kv-dark);
}

/* ==========================================================
   SECTIONS
   ========================================================== */

section {
    padding: 90px 0;
    position: relative;
}

.section-title {
    margin-bottom: 1rem;
}

.section-subtitle {
    color: var(--kv-accent);
    font-family: var(--font-mono);
    font-weight: var(--fw-bold);
    letter-spacing: .18em;
    text-transform: uppercase;
    margin-bottom: .75rem;
}

.section-description {
    max-width: 700px;
    color: var(--kv-text-light);
}

/* ==========================================================
   BACKGROUNDS
   ========================================================== */

.bg-surface {
    background: var(--kv-surface);
}

.bg-alt {
    background: var(--kv-surface-alt);
}

.bg-dark {
    background: var(--kv-dark);
    color: #fff;
}

.bg-dark h1,
.bg-dark h2,
.bg-dark h3,
.bg-dark h4,
.bg-dark h5,
.bg-dark h6 {
    color: #fff;
}

/* ==========================================================
   BUTTONS
   ========================================================== */

.btn {
    border-radius: var(--radius-sm);
    padding: .9rem 1.6rem;
    font-weight: var(--fw-bold);
    text-transform: uppercase;
    letter-spacing: .08em;
    transition: var(--transition);
}

.btn-primary {
    background: var(--kv-accent);
    border-color: var(--kv-accent);
}

.btn-primary:hover {
    background: #e54c00;
    border-color: #e54c00;
}

.btn-outline-dark:hover {
    background: var(--kv-dark);
}

/* ==========================================================
   CARDS
   ========================================================== */

.card {
    border: 1px solid var(--kv-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
}

.card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
}

/* ==========================================================
   LISTS
   ========================================================== */

.list-check {
    list-style: none;
    padding-left: 0;
}

.list-check li {
    margin-bottom: .75rem;
}

.list-check i {
    color: var(--kv-accent);
    margin-right: .5rem;
}

/* ==========================================================
   IMAGES
   ========================================================== */

img {
    max-width: 100%;
    height: auto;
}

/* ==========================================================
   FORMS
   ========================================================== */

.form-control,
.form-select {
    border-radius: var(--radius-sm);
    border-color: var(--kv-border);
}

.form-control:focus,
.form-select:focus {
    border-color: var(--kv-accent);
    box-shadow: 0 0 0 .2rem rgba(255,85,0,.15);
}

/* ==========================================================
   UTILITIES
   ========================================================== */

.text-accent {
    color: var(--kv-accent) !important;
}

.text-dark {
    color: var(--kv-dark) !important;
}

.border-accent {
    border-color: var(--kv-accent) !important;
}

/* ==========================================================
   SELECTION
   ========================================================== */

::selection {
    background: var(--kv-accent);
    color: #fff;
}

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

.hero{

    background:var(--kv-bg);

    position:relative;

    overflow:hidden;

}

.hero::before{

    content:"";

    position:absolute;

    inset:0;

    background-image:

        linear-gradient(var(--kv-grid) 1px, transparent 1px),

        linear-gradient(90deg,var(--kv-grid) 1px, transparent 1px);

    background-size:40px 40px;

    opacity:.18;

    pointer-events:none;

}

.hero .container{

    position:relative;

    z-index:2;

}

.hero-tagline{

    display:inline-block;

    font-family:var(--font-mono);

    color:var(--kv-accent);

    font-weight:700;

    letter-spacing:.22em;

    text-transform:uppercase;

    margin-bottom:1rem;

}

.hero h1{

    max-width:700px;

}

.hero .lead{

    max-width:620px;

}

.hero-visual{

    display:flex;

    justify-content:center;

    align-items:center;

}

.hero-visual img{

    max-width:100%;

    width:520px;

    height:auto;

}

/* ==========================================================
   PRODUCT CARDS
   ========================================================== */

.product-card{

    display:block;

    height:100%;

    background:#fff;

    border:1px solid var(--kv-border);

    border-radius:6px;

    padding:2rem;

    text-decoration:none;

    color:inherit;

    transition:var(--transition);

}

.product-card:hover{

    transform:translateY(-6px);

    border-color:var(--kv-accent);

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

}

.product-card i{

    font-size:2rem;

    color:var(--kv-accent);

    margin-bottom:1rem;

    display:inline-block;

}

.product-card h5{

    margin-bottom:1rem;

}

.product-card p{

    color:var(--kv-text-light);

    margin-bottom:0;

}

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

.industries{

    background:var(--kv-surface-alt);

}

.industry-card{

    background:#fff;

    border:1px solid var(--kv-border);

    border-radius:6px;

    text-align:center;

    padding:2rem 1rem;

    height:100%;

    transition:var(--transition);

}

.industry-card:hover{

    transform:translateY(-5px);

    border-color:var(--kv-accent);

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

}

.industry-card i{

    font-size:2.2rem;

    color:var(--kv-accent);

    display:block;

    margin-bottom:1rem;

}

.industry-card h6{

    margin:0;

    font-weight:700;

}

/* ==========================================================
   WHY KORVX
   ========================================================== */

.why-korvx{

    color:#fff;

}

.feature-box{

    height:100%;

    padding:2rem;

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

    border-radius:6px;

    transition:var(--transition);

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

}

.feature-box:hover{

    border-color:var(--kv-accent);

    transform:translateY(-4px);

}

.feature-box span{

    display:inline-block;

    color:var(--kv-accent);

    font-family:var(--font-mono);

    font-size:1.1rem;

    font-weight:700;

    margin-bottom:1rem;

}

.feature-box h5{

    color:#fff;

    margin-bottom:1rem;

}

.feature-box p{

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

    margin:0;

}

/* ==========================================================
   CTA
   ========================================================== */

.cta-section{

    background:var(--kv-surface);

}

.cta-section .btn{

    min-width:240px;

}

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

.footer{

    background:var(--kv-dark);

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

    padding:80px 0 30px;

}

.footer h6{

    color:#fff;

    margin-bottom:1.5rem;

}

.footer hr{

    border-color:rgba(255,255,255,.1);

    margin:3rem 0 2rem;

}

.footer-links{

    list-style:none;

    padding:0;

    margin:0;

}

.footer-links li{

    margin-bottom:.75rem;

}

.footer-links a{

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

}

.footer-links a:hover{

    color:var(--kv-accent);

}

.footer small{

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

}

.footer small a{

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

}

.footer small a:hover{

    color:var(--kv-accent);

}

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

.page-header{

    padding:100px 0 80px;

    background:var(--kv-bg);

    position:relative;

}


.page-header::after{

    content:"";

    position:absolute;

    bottom:0;

    left:0;

    width:100%;

    height:3px;

    background:var(--kv-accent);

}


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

.about-box{

    background:var(--kv-surface);

    border:1px solid var(--kv-border);

    padding:2.5rem;

    border-radius:6px;

}


.info-card{

    background:#fff;

    padding:2.5rem;

    border:1px solid var(--kv-border);

    border-radius:6px;

    height:100%;

}

/* ==========================================================
   PRODUCT PAGE
   ========================================================== */


.product-image-placeholder{

    height:400px;

    background:var(--kv-surface-alt);

    border:1px solid var(--kv-border);

    border-radius:6px;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    color:var(--kv-text-light);

}


.product-image-placeholder i{

    font-size:5rem;

    color:var(--kv-accent);

    margin-bottom:1rem;

}



.product-table{

    border:1px solid var(--kv-border);

}


.product-table th{

    background:var(--kv-dark);

    color:#fff;

    font-family:var(--font-heading);

}


.product-table td{

    padding:1rem;

}

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


.contact-item{

    display:flex;

    gap:1rem;

    margin-bottom:2rem;

}


.contact-item i{

    color:var(--kv-accent);

    font-size:1.5rem;

}


.contact-item h6{

    margin-bottom:.25rem;

}


.contact-item p{

    margin:0;

    color:var(--kv-text-light);

}



.contact-form{

    background:var(--kv-surface);

    border:1px solid var(--kv-border);

    padding:2.5rem;

    border-radius:6px;

}