:root {

--smb-blue: #059ac4;
--smb-dark-blue: #003b73;
--smb-green: #28a745;
--smb-light-green: #dff6e5;

--white: #ffffff;
--light-gray: #f5f7fa;
--dark: #1b1f23;

--border: #dddddd;

}



* {

box-sizing: border-box;

}



body {

margin:0;

font-family:
Arial,
Helvetica,
sans-serif;

color:var(--dark);

line-height:1.6;

background:white;

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



.container {

width:90%;

max-width:1200px;

margin:auto;

}
.container2 {
    display: flex;
    gap: 30px;
    align-items: stretch;
width:90%;

max-width:1200px;

margin:auto;

}



/* HEADER */

.header {

background:white;

border-bottom:1px solid #eee;

position:sticky;

top:0;

z-index:100;

}



.nav {

display:flex;

align-items:center;

justify-content:space-between;

padding:20px 0;

}



.logo {

font-size:28px;

font-weight:800;

color:var(--smb-blue);

}



.logo span {

color:var(--smb-green);

}



nav a {

margin:0 12px;

text-decoration:none;

color:var(--dark);

font-weight:600;

}



nav a:hover {

color:var(--smb-blue);

}



/* BUTTONS */


.primary-button,
.secondary-button,
.phone-button {


display:inline-block;

padding:14px 28px;

border-radius:6px;

text-decoration:none;

font-weight:bold;

transition:.3s;

}



.primary-button {

background:var(--smb-blue);

color:white;

}



.primary-button:hover {

background:var(--smb-dark-blue);

}



.secondary-button {

background:var(--smb-green);

color:white;

}



.secondary-button:hover {

opacity:.85;

}



.phone-button {

background:var(--smb-green);

color:white;

}



/* HERO */


.hero {

background:

linear-gradient(
135deg,
#0057a8,
#003b73
);

color:white;

padding:90px 0;

}



.hero-content {

display:flex;

align-items:center;

gap:50px;

}



.hero-text {

flex:1;

}



.hero h1 {

font-size:48px;

line-height:1.2;

}



.hero p {

font-size:20px;

margin-bottom:30px;

}



.hero-card {

background:white;

color:var(--dark);

padding:35px;

border-radius:12px;

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

flex:0 0 350px;

}



.hero-card h3 {

color:var(--smb-blue);

}



/* SECTIONS */


section {

padding:70px 0;

}



.business-section {

background:var(--light-gray);

}



h2 {

text-align:center;

font-size:36px;

color:var(--smb-dark-blue);

margin-bottom:40px;

}



h3 {

color:var(--smb-blue);

}



.center {

text-align:center;

max-width:850px;

margin:auto;

}



/* CARDS */


.feature-grid {

display:grid;

grid-template-columns:

repeat(
auto-fit,
minmax(260px,1fr)
);

gap:25px;

}



.card {

background:white;
padding:30px;
border-radius:10px;
border:1px solid var(--border);
box-shadow:
0 5px 15px rgba(0,0,0,.05);

}
.card2 {

background:white;
padding:15px;
border-radius:10px;
border:1px solid var(--border);
box-shadow:0 5px 15px rgba(0,0,0,.05);
 
}

.card:hover {

transform:translateY(-3px);

transition:.3s;

}



/* FEATURE LIST */


.feature-list {

display:flex;

flex-wrap:wrap;

gap:15px;

justify-content:center;

}



.feature-list span {

background:var(--light-green);

color:var(--smb-dark-blue);

padding:12px 22px;

border-radius:30px;

font-weight:bold;

}
.feature-list a {
    text-decoration: none;
}


/* COMPARISON TABLE */


.comparison-table {

overflow-x:auto;

}



table {

width:100%;

border-collapse:collapse;

background:white;

}



th {

background:var(--smb-blue);

color:white;

padding:15px;

}



td {

padding:15px;

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

}



tr:nth-child(even) {

background:#f8f8f8;

}



/* CTA */


.cta {

background:

linear-gradient(
135deg,
var(--smb-blue),
var(--smb-green)
);

color:white;

text-align:center;

}



.cta h2 {

color:white;

}



.cta p {

font-size:20px;

margin-bottom:30px;

}



/* FORMS */


form {

display:flex;

flex-direction:column;

gap:15px;

}



input,
textarea,
select {

padding:14px;

border:

1px solid #ccc;

border-radius:5px;

font-size:16px;

}



textarea {

min-height:120px;

}



/* CONTACT */


.contact-grid {

display:grid;

grid-template-columns:

repeat(
auto-fit,
minmax(300px,1fr)
);

gap:40px;

}



/* FOOTER */


footer {

background:#111;

color:white;

padding:30px 0;

text-align:center;

}



/* MOBILE */


@media(max-width:900px){


.nav {

flex-direction:column;

gap:20px;

}



nav {

display:flex;

flex-wrap:wrap;

justify-content:center;

}



.hero-content {

flex-direction:column;

}



.hero h1 {

font-size:36px;

}



.hero-card {

width:100%;

}



h2 {

font-size:30px;

}


}