/* Service features list styling */
.service-features {
    list-style: none;
    padding: 0 0 0 0.5em;
    margin: 1em 0 0.5em 0;
}
.service-features li {
    position: relative;
    padding-left: 1.5em;
    margin-bottom: 0.5em;
    color: #1a2f40;
    font-size: 1rem;
    line-height: 1.5;
}
.service-features li:before {
    content: '\f058'; /* Font Awesome check-circle */
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    color: #000000;
    position: absolute;
    left: 0;
    top: 0.1em;
    font-size: 1.1em;
}
@media (min-width: 601px) {
    .cta-group {
        margin-top: -4em;
        position: relative;
        z-index: 2;
    }
}
@media (max-width: 600px) {
    .hero {
        display: flex;
        flex-direction: column;
    }
    .hero-content {
        order: 1;
    }
    .hero-visual {
        order: 2;
    }
    .cta-group {
        order: 3;
        margin-top: 1.5em;
        width: 100%;
        justify-content: center;
        display: flex;
        flex-direction: row;
        gap: 1em;
    }
}
/* Center logo and nav links on mobile */
@media (max-width: 600px) {
    .navbar {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    .logo {
        margin-bottom: 0.5em;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .nav-links {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        width: 100%;
        gap: 0.5em;
    }
    .nav-links a {
        width: auto;
        text-align: center;
    }
}
/* style.css */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    background-color: #f9fbfd;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    color: #1d2b3f;
    line-height: 1.4;
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
}
.container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 2rem;
}

/* navbar */
.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.8rem 0;
    border-bottom: 1px solid rgba(0,0,0,0.03);
    flex-wrap: wrap;
}
.logo {
    font-size: 1.6rem;
    font-weight: 550;
    letter-spacing: -0.02em;
    color: #0b1a2e;
    text-decoration: none;
    border-right: 2px solid #cbd5e1;
    padding-right: 1.2rem;
    line-height: 1.2;
    transition: opacity 0.2s;
}
.logo:hover { opacity: 0.75; }
.logo span {
    font-weight: 350;
    color: #546e7a;
    font-size: 1rem;
    display: block;
    letter-spacing: 0.3px;
    margin-top: 2px;
}
.nav-links {
    display: flex;
    gap: 3rem;
    font-size: 0.95rem;
    font-weight: 450;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    flex-wrap: wrap;
}
.nav-links a {
    text-decoration: none;
    color: #2c3e50;
    transition: color 0.2s ease, border-color 0.2s, transform 0.1s;
    font-size: 0.9rem;
    border-bottom: 1.5px solid transparent;
    padding-bottom: 4px;
}
.nav-links a:hover, .nav-links a.active {
    color: #000;
    border-bottom-color: #9aa9b7;
    transform: translateY(-1px);
}

/* hero section */
.hero {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 3rem;
    padding: 3rem 0 5rem;
}
.hero-content { flex: 1 1 45%; min-width: 320px; }
.premium-tag {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 3px;
    color: #667c8c;
    margin-bottom: 1.5rem;
    border-left: 4px solid #a0b8cc;
    padding-left: 1rem;
    transition: border-color 0.2s;
}
.premium-tag:hover { border-left-color: #2d4b63; }
.hero h1 {
    font-size: clamp(2.8rem, 6vw, 5rem);
    font-weight: 500;
    line-height: 1.05;
    letter-spacing: -0.03em;
    color: #0a1926;
    margin-bottom: 1.5rem;
}
.hero h1 .thin {
    font-weight: 350;
    color: #3f5565;
    display: block;
    font-size: 0.85em;
    margin-top: 0.3rem;
}
.hero-para {
    font-size: 1.2rem;
    color: #38505e;
    max-width: 620px;
    font-weight: 350;
    margin-bottom: 3rem;
    border-left: 2px solid #dfe7ef;
    padding-left: 1.8rem;
    transition: border-color 0.2s;
}
.hero-para:hover { border-left-color: #a0b8cc; }

/* hero image */
.hero-visual { flex: 1 1 40%; min-width: 280px; display: flex; justify-content: center; perspective: 1200px; }
.image-frame {
    background: #eef2f6;
    box-shadow: 20px 20px 35px -8px rgba(0,20,30,0.15), 0 0 0 1px rgba(255,255,255,0.8) inset;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.2,0.9,0.3,1);
    max-width: 400px;
    width: 100%;
    aspect-ratio: 4/5;
    transform: rotateY(0deg) scale(1);
}
.image-frame img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.6s ease, filter 0.3s; filter: grayscale(10%) contrast(1.02); }

/* cta / buttons */
.cta-group { display: flex; gap: 2rem; align-items: center; flex-wrap: wrap; }
.primary-btn {
    background: #0b1a2e;
    color: white;
    border: none;
    padding: 1rem 3rem;
    font-size: 0.9rem;
    font-weight: 500;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    cursor: pointer;
    transition: 0.25s ease;
    text-decoration: none;
    display: inline-block;
    border: 1px solid #0b1a2e;
    box-shadow: 0 4px 12px rgba(0,20,30,0.1);
}
.primary-btn:hover {
    background: #1f3349;
    border-color: #1f3349;
    transform: translateY(-3px);
    box-shadow: 0 12px 22px -8px rgba(10,30,50,0.25);
}
.primary-btn:active { transform: translateY(0); box-shadow: 0 4px 8px rgba(0,0,0,0.05); }
.outline-link {
    color: #2b4152;
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 450;
    letter-spacing: 0.5px;
    border-bottom: 1px solid #b7c6d2;
    padding-bottom: 4px;
    transition: color 0.2s, border-color 0.2s, gap 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}
.outline-link:hover { color: #000; border-bottom-color: #2b4152; gap: 0.8rem; }
.outline-link span { transition: transform 0.2s; display: inline-block; }
.outline-link:hover span { transform: translateX(4px); }

/* feature grid */
.feature-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 3rem;
    margin: 5rem 0 4rem;
    border-top: 1px solid #eceff3;
    padding-top: 3.5rem;
}
.feature-item {
    padding-right: 1rem;
    transition: transform 0.2s ease, opacity 0.2s;
}
.feature-item:hover { transform: translateY(-6px); }
.feature-grid:hover .feature-item:not(:hover) { opacity: 0.7; }
.feature-item .number {
    font-size: 2.2rem;
    font-weight: 300;
    color: #1f3a4b;
    line-height: 1;
    margin-bottom: 0.5rem;
    letter-spacing: -1px;
    transition: color 0.2s;
}
.feature-item:hover .number { color: #0a1926; }
.feature-item h3 {
    font-size: 1rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: #3a5468;
    margin-bottom: 0.75rem;
    transition: color 0.2s;
}
.feature-item:hover h3 { color: #1e3b4c; }
.feature-item p {
    color: #5b6f7e;
    font-size: 0.95rem;
    font-weight: 350;
    line-height: 1.5;
    max-width: 280px;
}

/* trust bar */
.trust-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid #e5e9ef;
    border-bottom: 1px solid #e5e9ef;
    padding: 1.25rem 0;
    margin: 2rem 0 3rem;
    font-size: 0.75rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #6f8798;
    transition: background 0.2s;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.trust-bar:hover { background: rgba(220, 235, 245, 0.2); border-color: #cbd7e3; }
.trust-bar span { color: #162b38; font-weight: 500; margin-left: 5px; transition: color 0.2s; }
.trust-bar:hover span { color: #0a1f2c; }

/* footer with social icons */
.footer {
    padding: 2.5rem 0 3rem;
    border-top: 1px solid #eef2f5;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.85rem;
    color: #4f6576;
    flex-wrap: wrap;
    gap: 1rem;
}
.footer-links, .social-icons { display: flex; gap: 2rem; }
.footer-links a, .social-icons a {
    color: #2b4051;
    text-decoration: none;
    font-weight: 450;
    border-bottom: 1px dotted transparent;
    transition: border-color 0.2s, color 0.2s, transform 0.1s;
    display: inline-block;
}
.footer-links a:hover, .social-icons a:hover {
    border-bottom-color: #97aebe;
    color: #0b1e2e;
    transform: translateY(-1px);
}
.social-icons a { font-size: 1.4rem; line-height: 1; border-bottom: none; }
.social-icons a:hover { border-bottom: none; transform: translateY(-2px); }
.social-fiverr { font-weight: 600; font-size: 1.5rem; }
.social-li { font-weight: 500; font-size: 1.4rem; }
.social-x { font-size: 1.6rem; }
.social-ig { font-size: 1.8rem; }

/* page headers (about, services, projects) */
.page-header { padding: 3rem 0 2rem; }
.page-header h1 { font-size: clamp(2.5rem, 5vw, 4rem); font-weight: 500; color: #0a1926; }
.page-header h1 .thin { font-weight: 350; color: #3f5565; }

/* about page */
.about-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 4rem; margin: 2rem 0 3rem; }
.about-text p { font-size: 1.2rem; }
.about-stats { border-left: 1px solid #dfe7ef; padding-left: 2rem; }

/* services grid */
.services-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2.5rem;
    margin: 3rem 0;
}
.service-card {
    background: #ffffffd9;
    padding: 2.5rem 2rem;
    border: 1px solid #eef2f6;
    transition: transform 0.2s, box-shadow 0.3s;
}
.service-card:hover { transform: translateY(-6px); box-shadow: 0 20px 30px -12px rgba(10,40,60,0.15); }
.service-card .number { font-size: 1.8rem; }
.service-card h3 { font-size: 1.5rem; font-weight: 450; margin-bottom: 1rem; text-transform: none; letter-spacing: normal; color: #0f293b; }
.service-card p { color: #3b5668; margin-bottom: 1.5rem; }
.fiverr-btn { background: #1dbf73; border-color: #1dbf73; }
.fiverr-btn:hover { background: #169c5e; border-color: #169c5e; }

/* projects grid */
.projects-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2.5rem;
    margin: 3rem 0;
}
.project-card {
    background: #ffffffd9;
    padding-bottom: 2rem;
    border: 1px solid #eef2f6;
    transition: transform 0.2s, box-shadow 0.3s;
}
.project-card:hover { transform: translateY(-5px); box-shadow: 0 20px 30px -12px rgba(0,30,50,0.12); }
.project-image { width: 100%; margin-bottom: 1.5rem; background: #e7edf3; }
.project-card h3 { font-size: 1.4rem; font-weight: 500; padding: 0 1.5rem; margin-bottom: 0.5rem; }
.project-card p { padding: 0 1.5rem; color: #3f5b6b; }
.project-btn { margin-left: 1.5rem; }

/* responsive */
@media (max-width: 800px) {
    .hero { flex-direction: column; }
    .about-grid { grid-template-columns: 1fr; gap: 2rem; }
    .about-stats { border-left: none; padding-left: 0; }
    .services-grid, .projects-grid { grid-template-columns: 1fr; }
    .footer { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 550px) {
    .navbar { flex-direction: column; align-items: flex-start; gap: 0.8rem; }
    .logo { border-right: none; padding-right: 0; }
    .nav-links { gap: 1.5rem; }
    .feature-grid { grid-template-columns: 1fr; }
    .trust-bar { flex-direction: column; align-items: start; }
}