/* Responsive Styles for Voice Automation Template */

/* Large screens (1200px and up) */
@media (min-width: 1200px) {
    .hero-section h1 { font-size: 3.53rem; }
    section h2 { font-size: 2.93rem; }
}

/* Medium screens (768px to 1199px) */
@media (max-width: 1199.98px) {
    .hero-section h1 { font-size: 2.86rem; }
    section h2 { font-size: 2.54rem; }
}

/* Tablets (768px to 991px) */
@media (max-width: 991.98px) {
    .hero-section h1 { font-size: 2.62rem; }
    section h2 { font-size: 2.33rem; }
    .service-card .card-img-top { height: 180px; }
    .feature-card { padding: 1.5rem; }
}

/* Small tablets and large phones (576px to 767px) */
@media (max-width: 767.98px) {
    .hero-section h1 {
    padding-top: 150px;
}

.hero-section { min-height: 70vh; padding: 3rem 0; }
    .hero-section h1 { font-size: 2rem; text-align: center; }
    section { padding: 3rem 0; }
    section h2 { font-size: 1.90rem; text-align: center; }
    .navbar-brand { font-size: 1.32rem; }
    .service-card .card-img-top { height: 160px; }
    .feature-card { padding: 1.2rem; }
    .contact-form { padding: 1.2rem; }
}

/* Mobile phones (up to 575px) */
@media (max-width: 575.98px) {
    .hero-section h1 { font-size: 1.89rem; }
    section h2 { font-size: 1.71rem; }
    .service-card .card-img-top { height: 140px; }
    .service-card h4 { font-size: 1.14rem; }
    .feature-card { padding: 1rem; }
    .contact-form { padding: 1rem; }
    .btn-primary { padding: 10px 25px; font-size: 0.99rem; }
}

/* Very small screens (up to 375px) */
@media (max-width: 375px) {
    .hero-section h1 { font-size: 1.62rem; }
    section h2 { font-size: 1.50rem; }
    .container { padding-left: 15px; padding-right: 15px; }
}

/* Accessibility improvements */
@media (max-width: 767.98px) {
    .nav-link { padding: 0.75rem 1rem; }
    .btn-primary, .form-control, .navbar-toggler { min-height: 44px; min-width: 44px; }
}

/* High contrast mode */
@media (prefers-contrast: high) {
    .service-card, .feature-card { border: 2px solid #000; }
    .btn-primary { border: 2px solid #000; }
}