/* ==========================================
   E&J Medical Supply
   Version 2
========================================== */

:root{

--primary:#10B981;
--primary-dark:#059669;
--navy:#16324F;

--text:#1F2937;
--gray:#6B7280;

--light:#F8FAFC;
--white:#FFFFFF;

--border:#E5E7EB;

--radius:18px;

--shadow:
0 15px 40px rgba(0,0,0,.08);

}

*{

margin:0;
padding:0;
box-sizing:border-box;

}

html{

scroll-behavior:smooth;

}

body{

font-family:'Inter',sans-serif;

background:white;

color:var(--text);

line-height:1.7;

}

img{

display:block;

max-width:100%;

}

a{

text-decoration:none;

}

ul{

list-style:none;

}

.container{

width:min(1200px,92%);

margin:auto;

}

/* NAVIGATION */

.header{

position:sticky;

top:0;

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

backdrop-filter:blur(15px);

border-bottom:1px solid #eee;

z-index:999;

}

.navbar{

display:flex;

justify-content:space-between;

align-items:center;

padding:18px 0;

}

.logo img{

height:140px;

width:auto;

}

.nav-links{

display:flex;

gap:35px;

align-items:center;

}

.nav-links a{

font-weight:600;

color:var(--text);

transition:.3s;

}

.nav-links a:hover{

color:var(--primary);

}

.nav-button{

background:var(--primary);

color:white;

padding:15px 28px;

border-radius:999px;

font-weight:700;

transition:.3s;

}

.nav-button:hover{

background:var(--primary-dark);

}

/* HERO */

.hero{

padding:90px 0;

}

.hero-grid{

display:grid;

grid-template-columns:1.1fr .9fr;

align-items:center;

gap:70px;

}

.eyebrow{

display:inline-block;

background:#ECFDF5;

color:var(--primary);

padding:10px 20px;

border-radius:999px;

font-weight:700;

margin-bottom:25px;

}

.hero h1{

font-size:64px;

font-weight:800;

line-height:1.1;

margin-bottom:25px;

color:var(--navy);

}

.hero h1 span{

color:var(--primary);

}

.hero p{

font-size:20px;

color:var(--gray);

max-width:560px;

margin-bottom:35px;

}

.hero-buttons{

display:flex;

gap:20px;

margin-bottom:40px;

}

.btn{

display:inline-flex;

align-items:center;

justify-content:center;

padding:18px 34px;

border-radius:999px;

font-weight:700;

transition:.3s;

}

.btn-primary{

background:var(--primary);

color:white;

}

.btn-primary:hover{

background:var(--primary-dark);

transform:translateY(-2px);

}

.btn-secondary{

border:2px solid var(--primary);

color:var(--primary);

}

.btn-secondary:hover{

background:var(--primary);

color:white;

}

.trust-row{

display:flex;

gap:18px;

flex-wrap:wrap;

}

.trust-item{

background:white;

padding:14px 22px;

border-radius:999px;

box-shadow:var(--shadow);

font-weight:600;

}

.hero-image img{

border-radius:30px;

box-shadow:var(--shadow);

}

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

.section-title{

text-align:center;

margin-bottom:60px;

}

.section-title span{

color:var(--primary);

font-weight:700;

letter-spacing:2px;

font-size:14px;

}

.section-title h2{

font-size:44px;

margin-top:15px;

margin-bottom:20px;

color:var(--navy);

}

.section-title p{

max-width:700px;

margin:auto;

color:var(--gray);

}

/* WHY US */

.why-us{

padding:120px 0;

background:#F8FAFC;

}

.cards{

display:grid;

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

gap:30px;

margin-top:60px;

}

.card{

background:white;

padding:40px;

border-radius:20px;

box-shadow:0 15px 40px rgba(0,0,0,.08);

text-align:center;

transition:.3s;

}

.card:hover{

transform:translateY(-10px);

}

.icon{
    width:70px;
    height:70px;
    margin:auto;
    margin-bottom:25px;
    background:#ECFDF5;
    border-radius:50%;
    display:flex;
    justify-content:center;
    align-items:center;
    color:var(--primary);
    font-size:30px;
    transition:.3s ease;
}

.card:hover .icon{
    background:var(--primary);
    color:white;
    transform:rotate(8deg) scale(1.08);
}

.card h3{

margin-bottom:15px;

color:var(--navy);

}

.card p{

color:var(--gray);

}

/* HOW IT WORKS */

.how-it-works{

padding:120px 0;

}

.steps{

display:grid;

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

gap:30px;

}

.step{

background:white;

padding:45px;

border-radius:20px;

text-align:center;

box-shadow:0 15px 40px rgba(0,0,0,.08);

}

.step-number{

width:70px;

height:70px;

margin:auto;

margin-bottom:25px;

background:var(--primary);

color:white;

border-radius:50%;

display:flex;

justify-content:center;

align-items:center;

font-size:28px;

font-weight:700;

}

/* ==========================
   PRODUCTS
========================== */

.products{

    padding:120px 0;
    background:white;

}

.product-grid{

    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:35px;
    margin-top:60px;

}

.product-card{

    background:white;
    border-radius:20px;
    padding:35px;
    text-align:center;
    box-shadow:0 15px 40px rgba(0,0,0,.08);
    transition:.3s;

}

.product-card:hover{

    transform:translateY(-10px);

}

.product-card img{

    width:180px;
    height:180px;
    object-fit:contain;
    margin:0 auto 25px;

}

.product-card h3{

    color:var(--navy);
    margin-bottom:12px;

}

.product-card p{

    color:var(--gray);
    margin-bottom:25px;

}

.product-card .btn{

    width:100%;

}

/* ==========================
   QUOTE POPUP
========================== */

.modal{

position:fixed;

top:0;
left:0;

width:100%;
height:100%;

background:rgba(0,0,0,.65);

display:none;

justify-content:center;

align-items:center;

z-index:9999;

padding:20px;

backdrop-filter:blur(8px);

}

.modal-content{

background:white;

width:100%;

max-width:550px;

padding:45px;

border-radius:24px;

box-shadow:0 20px 60px rgba(0,0,0,.2);

position:relative;

animation:popup .35s ease;

}

@keyframes popup{

from{

opacity:0;

transform:translateY(30px) scale(.95);

}

to{

opacity:1;

transform:translateY(0) scale(1);

}

}

.close-btn{

position:absolute;

top:20px;

right:25px;

font-size:34px;

font-weight:bold;

cursor:pointer;

color:#999;

transition:.3s;

}

.close-btn:hover{

color:var(--primary);

}

.modal h2{

margin-bottom:10px;

color:var(--navy);

}

.modal p{

margin-bottom:30px;

color:var(--gray);

}

#quoteForm{

display:flex;

flex-direction:column;

gap:18px;

}

#quoteForm input,
#quoteForm select,
#quoteForm textarea{

padding:16px;

border:1px solid #ddd;

border-radius:12px;

font-size:16px;

font-family:inherit;

transition:.3s;

}

#quoteForm input:focus,
#quoteForm select:focus,
#quoteForm textarea:focus{

outline:none;

border-color:var(--primary);

box-shadow:0 0 0 3px rgba(16,185,129,.15);

}

#quoteForm button{

margin-top:10px;

}

/* Success Popup */

.success-box{

text-align:center;

max-width:480px;

}

.success-icon{

width:90px;

height:90px;

background:#10b981;

color:white;

font-size:48px;

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

margin:0 auto 25px;

font-weight:bold;

box-shadow:0 15px 35px rgba(16,185,129,.25);

}

.success-box h2{

margin-bottom:15px;

color:var(--navy);

}

.success-box p{

margin-bottom:30px;

line-height:1.6;

color:#666;

}

/* ==========================================
   MOBILE NAVIGATION
========================================== */

.menu-toggle {
    display: none;
    background: none;
    border: none;
    font-size: 32px;
    cursor: pointer;
    color: var(--navy);
    z-index: 1001;
}

.mobile-quote-btn {
    display: none;
}

@media (max-width: 992px) {

    .logo img {
        height: 90px;
    }

    .menu-toggle {
        display: block;
    }

    .desktop-button {
        display: none;
    }

    .nav-links {
        position: fixed;
        top: 0;
        right: -100%;
        width: 300px;
        height: 100vh;
        background: white;
        box-shadow: -10px 0 30px rgba(0,0,0,.12);
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 30px;
        transition: right .35s ease;
        z-index: 1000;
    }

    .nav-links.active {
        right: 0;
    }

    .mobile-quote-btn {
        display: inline-flex;
        background: var(--primary);
        color: white !important;
        padding: 14px 24px;
        border-radius: 999px;
    }

    .hero-grid,
    .product-grid,
    .cards,
    .steps,
    .footer-content {
        grid-template-columns: 1fr;
    }

    .hero {
        padding: 60px 0;
    }

    .hero h1 {
        font-size: 42px;
    }

    .hero-buttons {
        flex-direction: column;
    }

    .hero-image {
        order: -1;
    }

    .section-title h2 {
        font-size: 34px;
    }
}

/* ==========================================
   MOBILE POLISH
========================================== */

@media (max-width: 768px) {

    .container {
        width: 92%;
    }

    section {
        padding: 70px 0 !important;
    }

    .hero {
        padding: 40px 0 !important;
    }

    .hero-grid {
        gap: 40px;
    }

    .hero h1 {
        font-size: 36px;
        line-height: 1.2;
    }

    .hero p {
        font-size: 17px;
    }

    .hero-buttons {
        gap: 15px;
    }

    .btn {
        width: 100%;
        padding: 16px 20px;
    }

    .trust-row {
        flex-direction: column;
        gap: 12px;
    }

    .trust-item {
        text-align: center;
    }

    .section-title {
        margin-bottom: 40px;
    }

    .section-title h2 {
        font-size: 30px;
    }

    .cards,
    .steps,
    .product-grid {
        gap: 20px;
    }

    .card,
    .step,
    .product-card {
        padding: 30px;
    }

    .product-card img {
        width: 140px;
        height: 140px;
    }

    .footer-content {
        text-align: center;
        gap: 30px;
    }

    .footer-logo {
        margin: 0 auto 20px;
    }
}

@media (max-width: 480px) {

    .logo img {
        height: 70px;
    }

    .hero h1 {
        font-size: 30px;
    }

    .hero p {
        font-size: 16px;
    }

    .section-title h2 {
        font-size: 26px;
    }

    .nav-links {
        width: 100%;
    }

    .btn {
        font-size: 15px;
    }

    .modal-content {
        padding: 30px 20px;
    }
}

/* Testimonials */

.stars {
    color: #FBBF24;
    font-size: 22px;
    margin-bottom: 15px;
    letter-spacing: 3px;
}

.location {
    display: block;
    color: var(--gray);
    font-size: 14px;
    margin-bottom: 18px;
    font-weight: 600;
}

.testimonials .card p {
    font-style: italic;
}

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

.footer {
    background: var(--navy);
    color: white;
    padding: 70px 0 30px;
}

.footer-content {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 50px;
    margin-bottom: 40px;
}

.footer-column h4 {
    margin-bottom: 20px;
    font-size: 18px;
}

.footer-column p,
.footer-column a {
    color: rgba(255,255,255,.85);
    line-height: 1.8;
}

.footer-column ul li {
    margin-bottom: 12px;
}

.footer-column a:hover {
    color: white;
}

.footer-logo {
    width: 180px;
    margin-bottom: 20px;
}

.copyright {
    text-align: center;
    padding-top: 25px;
    border-top: 1px solid rgba(255,255,255,.15);
    color: rgba(255,255,255,.7);
    font-size: 14px;
}