/* Mobile First Responsive Design */

/* Base styles for mobile (320px and up) */
@media (max-width: 767px) {
    .container {
        padding: 0 15px;
    }
    
    .bookmarklet-box {
        margin: 10px;
        padding: 15px;
    }
    
    .bookmarklet-box h3 {
        font-size: 1.2rem;
    }
    
    .bookmarklet-box p {
        font-size: 0.9rem;
    }
    
    .bookmarklet-button {
        padding: 10px 15px !important;
        font-size: 0.9rem;
        display: block;
        text-align: center;
        margin-top: 10px;
    }
    
    /* Hero section mobile */
    .hero h2 {
        font-size: 1.5rem !important;
    }
    
    .hero h3 {
        font-size: 1.2rem !important;
    }
    
    .hero p {
        font-size: 1rem !important;
    }
    
    .hero .btn {
        padding: 12px 25px !important;
        font-size: 0.9rem;
        display: block;
        text-align: center;
        margin: 15px auto;
    }
    
    .hero img {
        max-width: 90% !important;
        margin-top: 20px;
    }
    
    /* Services section mobile */
    .services h2 {
        font-size: 1.8rem;
    }
    
    .services .lead {
        font-size: 1rem;
    }
    
    .service-card {
        margin-bottom: 20px;
        padding: 20px;
    }
    
    .service-card h4 {
        font-size: 1.3rem;
    }
    
    .service-card p {
        font-size: 15px !important;
    }
    
    .service-icon img {
        height: 50px !important;
    }
    
    /* Grid adjustments */
    .col-lg-4, .col-lg-12 {
        margin-bottom: 15px;
    }
}

/* Tablet styles (768px to 991px) */
@media (min-width: 768px) and (max-width: 991px) {
    .bookmarklet-box {
        margin: 15px;
        padding: 20px;
    }
    
    .hero .btn {
        padding: 14px 30px !important;
    }
    
    .service-card {
        padding: 25px;
    }
    
    .service-card p {
        font-size: 16px !important;
    }
}

/* Desktop styles (992px and up) */
@media (min-width: 992px) {
    .bookmarklet-box {
        margin: 20px;
        padding: 25px;
    }
    
    .service-card:hover {
        transform: translateY(-5px);
        transition: all 0.3s ease;
    }
}

/* Extra small devices (portrait phones, less than 576px) */
@media (max-width: 575px) {
    .hero {
        padding: 30px 0;
    }
    
    .services {
        padding: 40px 0;
    }
    
    .row {
        margin: 0 -10px;
    }
    
    .col-lg-4, .col-lg-12, .col-md-6 {
        padding: 0 10px;
    }
    
    .service-icon {
        margin-bottom: 15px;
    }
    
    .fade-in {
        animation-duration: 0.8s;
    }
}

/* Landscape phone adjustments */
@media (max-width: 767px) and (orientation: landscape) {
    .hero {
        padding: 20px 0;
    }
    
    .hero img {
        max-width: 60% !important;
    }
    
    .service-card {
        padding: 15px;
    }
}

/* High DPI displays */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .service-icon img {
        image-rendering: -webkit-optimize-contrast;
        image-rendering: crisp-edges;
    }
}

/* Print styles */
@media print {
    .bookmarklet-box,
    .btn {
        display: none !important;
    }
    
    .service-card {
        break-inside: avoid;
        page-break-inside: avoid;
    }
}