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

:root {
    --primary: #2563eb;
    --primary-dark: #1d4ed8;
    --secondary: #0f172a;
    --text: #0f172a;
    --muted: #64748b;
    --surface: #f8fafc;
    --border: #e2e8f0;
}


html {
    scroll-behavior: smooth;
}

body {
    font-family: "Inter", "Segoe UI", Arial, sans-serif;
    color: var(--text);
    background: #ffffff;
}


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

.navbar {
    background: rgba(15, 23, 42, 0.35);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);

    padding: 18px 0;
    transition: all .3s ease;

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


.navbar-brand {
    font-size: 1.35rem;
    letter-spacing: .3px;
}


.navbar .nav-link {
    color: rgba(255,255,255,.9);
    font-weight: 500;
    margin-left: 10px;
    transition: .3s;
}


.navbar .nav-link:hover {
    color: #60a5fa;
}


.navbar .btn {
    border-radius: 30px;
    padding-left: 22px;
    padding-right: 22px;
}


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

.hero-section {

    min-height: 100vh;




background:
linear-gradient(
    120deg,
    rgba(2,6,23,.85),
    rgba(15,118,110,.65)
),
url("https://images.unsplash.com/photo-1523240795612-9a054b0db644")
center/cover no-repeat;

    position: relative;

}


.hero-section h1 {
    line-height: 1.15;
}


.hero-section .lead {

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

    font-size: 1.15rem;

}


.hero-card {

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

    backdrop-filter: blur(10px);

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

}


.hero-card img {

    transition:.5s;

}


.hero-card:hover img {

    transform:scale(1.03);

}


/* ==========================
 BUTTON
========================== */

.btn-primary {

    background: var(--primary);

    border:none;

    border-radius:30px;

    padding:12px 28px;

    transition:.3s;

}


.btn-primary:hover {

    background:var(--primary-dark);

    transform:translateY(-2px);

}



.btn-outline-light {

    border-radius:30px;

}



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

section {

    position:relative;

}


section h2 {

    font-size:2.2rem;

    letter-spacing:-.5px;

}


.text-muted {

    color:var(--muted)!important;

}



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

.card {

    border-radius:18px!important;

    overflow:hidden;

    transition:.35s;

}


.card:hover {

    transform:translateY(-8px);

    box-shadow:
    0 20px 40px rgba(15,23,42,.12)!important;

}



.feature-card {

    padding:10px;

}


.feature-card i {

    width:55px;

    height:55px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#eff6ff;

    border-radius:15px;

}



/* ==========================
 STATISTIC
========================== */

.card h3 {

    color:var(--primary);

    font-size:2.2rem;

}



/* ==========================
 TESTIMONIAL
========================== */


.rounded-circle {

    border:4px solid #eff6ff;

}



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

#contact {

    background:
    linear-gradient(
        135deg,
        #0f172a,
        #1e293b
    )!important;

}


#contact form {

    border-radius:20px;

}


.form-control {

    border-radius:12px;

    padding:12px 15px;

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

}


.form-control:focus {

    border-color:var(--primary);

    box-shadow:
    0 0 0 .2rem rgba(37,99,235,.15);

}



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


footer {

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

}


footer a {

    transition:.3s;

}


footer a:hover {

    color:#60a5fa!important;

    transform:translateY(-3px);

}



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


@media(max-width:992px){


.navbar-collapse{

    background:rgba(15,23,42,.95);

    padding:20px;

    border-radius:15px;

    margin-top:15px;

}


.navbar .nav-link{

    margin-left:0;

}


.hero-section h1{

    font-size:2.5rem;

}


}



@media(max-width:576px){


.hero-section h1{

    font-size:2rem;

}


section h2{

    font-size:1.8rem;

}

}