/* =====================================
   Seattle Bridgepath Business Solutions
   Main Website Styles
===================================== */


/* Global Reset */

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


body {

    font-family: 'Inter', Arial, sans-serif;
    color: #1e293b;
    background: #ffffff;
    line-height: 1.6;

}


html {
    scroll-behavior: smooth;
}


a {
    text-decoration: none;
    color: inherit;
}


/* =====================================
   Navigation
===================================== */


header {

    background: #0b1f3a;
    position: sticky;
    top: 0;
    z-index: 1000;

}


.navbar {

    max-width: 1200px;
    margin: auto;
    padding: 18px 25px;

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

}


.logo {

    color: white;
    font-size: 22px;
    font-weight: 800;

}


.logo span {

    display: block;
    font-size: 13px;
    font-weight: 400;
    color: #38bdf8;

}



.nav-links {

    display: flex;
    list-style: none;
    gap: 30px;

}


.nav-links a {

    color: white;
    font-weight: 500;
    transition: .3s;

}


.nav-links a:hover {

    color: #38bdf8;

}


.menu-toggle {

    display: none;
    color:white;
    font-size:25px;

}



/* =====================================
   Hero Section
===================================== */


.hero {

    min-height: 650px;

    background:

    linear-gradient(
        rgba(3, 15, 35, .75),
        rgba(3, 15, 35, .75)
    ),

    url("../images/hero-seattle.jpg");

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

    display:flex;
    align-items:center;

}



.hero-content {

    max-width:1200px;
    margin:auto;
    padding:40px 25px;
    color:white;

}


.hero h1 {

    font-size:55px;
    max-width:700px;
    line-height:1.15;

}



.hero p {

    margin:25px 0;
    max-width:650px;
    font-size:18px;

}



.btn {

    display:inline-block;

    background:#0284c7;
    color:white;

    padding:14px 30px;

    border-radius:8px;

    font-weight:600;

    transition:.3s;

}



.btn:hover {

    background:#0369a1;

}



/* =====================================
   Services
===================================== */


.services-preview {

    padding:80px 25px;
    text-align:center;

}



.services-preview h2,
.why-us h2 {

    font-size:36px;
    color:#0b1f3a;

}



.section-intro {

    max-width:700px;
    margin:15px auto 50px;

    color:#64748b;

}



.service-grid {

    max-width:1100px;

    margin:auto;

    display:grid;

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

    gap:30px;

}



.service-card {

    background:white;

    padding:35px;

    border-radius:15px;

    box-shadow:0 10px 30px rgba(0,0,0,.08);

    transition:.3s;

}



.service-card:hover {

    transform:translateY(-8px);

}



.service-card i {

    font-size:40px;

    color:#0284c7;

    margin-bottom:20px;

}



.service-card h3 {

    margin-bottom:15px;

    color:#0b1f3a;

}



/* =====================================
   Statistics
===================================== */


.why-us {

    background:#f1f5f9;

    padding:80px 25px;

    text-align:center;

}



.stats {

    max-width:900px;

    margin:50px auto 0;

    display:grid;

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

}



.stats h3 {

    font-size:45px;

    color:#0284c7;

}



.stats p {

    color:#475569;

}



/* =====================================
   Call To Action
===================================== */


.cta {

    background:#0b1f3a;

    color:white;

    text-align:center;

    padding:70px 25px;

}



.cta h2 {

    font-size:38px;

}



.cta p {

    margin:20px;

}



/* =====================================
   Footer
===================================== */


footer {

    background:#020617;

    color:white;

    text-align:center;

    padding:40px 20px;

}



.footer-content p {

    margin:8px;

    color:#cbd5e1;

}



/* =====================================
   Mobile Responsive
===================================== */


@media(max-width:900px){


.nav-links {

    display:none;

    flex-direction:column;

    background:#0b1f3a;

    position:absolute;

    top:70px;

    left:0;

    width:100%;

    padding:30px;

}



.menu-toggle {

    display:block;

}



.hero h1 {

    font-size:38px;

}



.service-grid {

    grid-template-columns:1fr;

}



.stats {

    grid-template-columns:1fr;

    gap:35px;

}


}
/* =====================================
   Contact Form
===================================== */


.contact-form-section {

    padding:80px 25px;
    text-align:center;
    background:#f8fafc;

}


.contact-form {

    max-width:700px;
    margin:40px auto;

    display:flex;
    flex-direction:column;
    gap:20px;

}


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

    width:100%;

    padding:15px;

    border:1px solid #cbd5e1;

    border-radius:8px;

    font-size:16px;

    font-family:inherit;

}


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

    outline:none;

    border-color:#0284c7;

}


.contact-form button {

    border:none;

    cursor:pointer;

}