/* Mobile Typography Fix - Optimized Font Sizes for Mobile Devices */

/* Base font size for better readability on mobile */
@media (max-width: 768px) {
    html {
        font-size: 16px;
        /* Ensure base font size is readable */
    }

    body {
        font-size: 16px;
        line-height: 1.6;
    }
}

/* ========================================
   HEADER MOBILE TYPOGRAPHY
   ======================================== */
@media (max-width: 768px) {

    /* Logo */
    #header .logo {
        font-size: 22px !important;
    }

    /* Navigation Menu Items */
    #header .nav-menu a {
        font-size: 16px !important;
        padding: 14px 20px !important;
    }

    /* Dropdown Menu Items */
    #header .dropdown-content a {
        font-size: 15px !important;
        padding: 12px 20px !important;
    }
}

@media (max-width: 480px) {
    #header .logo {
        font-size: 20px !important;
    }

    #header .nav-menu a {
        font-size: 15px !important;
        padding: 12px 18px !important;
    }

    #header .dropdown-content a {
        font-size: 14px !important;
        padding: 10px 18px !important;
    }
}

/* ========================================
   FOOTER MOBILE TYPOGRAPHY
   ======================================== */
@media (max-width: 768px) {

    /* Footer Headings */
    footer h3,
    .footer-section h3 {
        font-size: 18px !important;
        margin-bottom: 16px !important;
    }

    /* Footer Links and Text */
    footer p,
    footer a,
    footer li,
    .footer-section p,
    .footer-section a,
    .footer-section li {
        font-size: 15px !important;
        line-height: 1.7 !important;
    }

    /* Footer Bottom Text */
    .footer-bottom p,
    .footer-bottom a {
        font-size: 14px !important;
    }

    /* Social Media Icons */
    .social-links a {
        font-size: 20px !important;
        width: 40px !important;
        height: 40px !important;
    }
}

@media (max-width: 480px) {

    footer h3,
    .footer-section h3 {
        font-size: 17px !important;
    }

    footer p,
    footer a,
    footer li {
        font-size: 14px !important;
    }

    .footer-bottom p,
    .footer-bottom a {
        font-size: 13px !important;
    }
}

/* ========================================
   HOMEPAGE MOBILE TYPOGRAPHY
   ======================================== */
@media (max-width: 768px) {

    /* Hero Section */
    .hero h1,
    .hero-content h1 {
        font-size: 32px !important;
        line-height: 1.3 !important;
    }

    .hero p,
    .hero-content p {
        font-size: 16px !important;
        line-height: 1.6 !important;
    }

    /* Section Titles - Main Headings */
    .section-title h2,
    .gallery-header h1 {
        font-size: 32px !important;
        line-height: 1.3 !important;
        margin-bottom: 1.2rem !important;
    }

    /* Section Titles - Subheadings */
    .section-title p,
    .gallery-header p {
        font-size: 17px !important;
        line-height: 1.6 !important;
        margin-bottom: 0.5rem !important;
    }

    /* Section Headings */
    h2 {
        font-size: 28px !important;
        line-height: 1.3 !important;
    }

    h3 {
        font-size: 22px !important;
        line-height: 1.4 !important;
    }

    h4 {
        font-size: 19px !important;
    }

    /* Paragraph Text */
    p {
        font-size: 15px !important;
        line-height: 1.7 !important;
    }

    /* Buttons */
    .btn,
    button,
    .cta-button,
    .btn-primary,
    .btn-secondary {
        font-size: 15px !important;
        padding: 12px 24px !important;
    }

    /* Cards */
    .card h3,
    .service-card h3,
    .product-card h3 {
        font-size: 18px !important;
    }

    .card p,
    .service-card p,
    .product-card p {
        font-size: 14px !important;
    }
}

@media (max-width: 480px) {

    .hero h1,
    .hero-content h1 {
        font-size: 28px !important;
    }

    .hero p,
    .hero-content p {
        font-size: 15px !important;
    }

    /* Section Titles - Main Headings */
    .section-title h2,
    .gallery-header h1 {
        font-size: 28px !important;
        line-height: 1.3 !important;
    }

    /* Section Titles - Subheadings */
    .section-title p,
    .gallery-header p {
        font-size: 16px !important;
        line-height: 1.6 !important;
    }

    h2 {
        font-size: 26px !important;
    }

    h3 {
        font-size: 20px !important;
    }

    h4 {
        font-size: 18px !important;
    }

    p {
        font-size: 14px !important;
    }

    .btn,
    button {
        font-size: 14px !important;
        padding: 11px 22px !important;
    }
}

/* ========================================
   PRODUCTS PAGE MOBILE TYPOGRAPHY
   ======================================== */
@media (max-width: 768px) {
    .products-header h1 {
        font-size: 28px !important;
    }

    .products-header p {
        font-size: 16px !important;
    }

    .product-name {
        font-size: 18px !important;
    }

    .product-category {
        font-size: 13px !important;
    }

    .product-price {
        font-size: 24px !important;
    }

    .stock-status {
        font-size: 13px !important;
    }

    .whatsapp-btn {
        font-size: 14px !important;
    }
}

@media (max-width: 480px) {
    .products-header h1 {
        font-size: 26px !important;
    }

    .products-header p {
        font-size: 15px !important;
    }

    .product-name {
        font-size: 17px !important;
    }

    .product-price {
        font-size: 22px !important;
    }
}

/* ========================================
   PRODUCT DETAIL PAGE MOBILE TYPOGRAPHY
   ======================================== */
@media (max-width: 768px) {
    .product-info-section h1 {
        font-size: 24px !important;
    }

    .product-category-detail {
        font-size: 13px !important;
    }

    .product-price-detail {
        font-size: 28px !important;
    }

    .stock-status-detail {
        font-size: 14px !important;
    }

    .product-description-section h2 {
        font-size: 20px !important;
    }

    .product-description-detail {
        font-size: 15px !important;
        line-height: 1.7 !important;
    }

    .product-description-detail h2 {
        font-size: 20px !important;
    }

    .product-description-detail h3 {
        font-size: 18px !important;
    }

    .product-description-detail h4 {
        font-size: 16px !important;
    }

    .whatsapp-btn-large {
        font-size: 15px !important;
    }
}

@media (max-width: 480px) {
    .product-info-section h1 {
        font-size: 22px !important;
    }

    .product-price-detail {
        font-size: 26px !important;
    }

    .product-description-section h2 {
        font-size: 19px !important;
    }

    .product-description-detail {
        font-size: 14px !important;
    }

    .whatsapp-btn-large {
        font-size: 14px !important;
    }
}

/* ========================================
   PORTFOLIO PAGE MOBILE TYPOGRAPHY
   ======================================== */
@media (max-width: 768px) {
    .portfolio-header h1 {
        font-size: 28px !important;
    }

    .portfolio-header p {
        font-size: 16px !important;
    }

    .filter-btn {
        font-size: 14px !important;
        padding: 10px 18px !important;
    }

    .portfolio-item-title {
        font-size: 20px !important;
    }

    .category-badge {
        font-size: 13px !important;
    }

    .portfolio-item-description {
        font-size: 14px !important;
    }

    .btn-load-more {
        font-size: 15px !important;
    }
}

@media (max-width: 480px) {
    .portfolio-header h1 {
        font-size: 26px !important;
    }

    .portfolio-header p {
        font-size: 15px !important;
    }

    .filter-btn {
        font-size: 13px !important;
        padding: 9px 16px !important;
    }

    .portfolio-item-title {
        font-size: 19px !important;
    }

    .btn-load-more {
        font-size: 14px !important;
    }
}

/* ========================================
   SERVICES PAGE MOBILE TYPOGRAPHY
   ======================================== */
@media (max-width: 768px) {

    .services-header h1,
    .page-header h1 {
        font-size: 28px !important;
    }

    .services-header p,
    .page-header p {
        font-size: 16px !important;
    }

    .service-card h3 {
        font-size: 20px !important;
    }

    .service-card p {
        font-size: 15px !important;
    }

    .service-price {
        font-size: 24px !important;
    }
}

@media (max-width: 480px) {

    .services-header h1,
    .page-header h1 {
        font-size: 26px !important;
    }

    .service-card h3 {
        font-size: 19px !important;
    }

    .service-card p {
        font-size: 14px !important;
    }
}

/* ========================================
   BLOG PAGE MOBILE TYPOGRAPHY
   ======================================== */
@media (max-width: 768px) {
    .blog-header h1 {
        font-size: 28px !important;
    }

    .blog-card h3 {
        font-size: 20px !important;
    }

    .blog-card p {
        font-size: 15px !important;
    }

    .blog-meta {
        font-size: 13px !important;
    }

    .blog-detail h1 {
        font-size: 26px !important;
    }

    .blog-content {
        font-size: 16px !important;
        line-height: 1.8 !important;
    }

    .blog-content h2 {
        font-size: 22px !important;
    }

    .blog-content h3 {
        font-size: 20px !important;
    }
}

@media (max-width: 480px) {
    .blog-header h1 {
        font-size: 26px !important;
    }

    .blog-card h3 {
        font-size: 19px !important;
    }

    .blog-card p {
        font-size: 14px !important;
    }

    .blog-detail h1 {
        font-size: 24px !important;
    }

    .blog-content {
        font-size: 15px !important;
    }
}

/* ========================================
   CONTACT PAGE MOBILE TYPOGRAPHY
   ======================================== */
@media (max-width: 768px) {
    .contact-header h1 {
        font-size: 28px !important;
    }

    .contact-info h3 {
        font-size: 18px !important;
    }

    .contact-info p,
    .contact-info a {
        font-size: 15px !important;
    }

    .form-label,
    label {
        font-size: 14px !important;
    }

    .form-control,
    input,
    textarea,
    select {
        font-size: 15px !important;
        padding: 12px !important;
    }

    .submit-btn {
        font-size: 15px !important;
    }
}

@media (max-width: 480px) {
    .contact-header h1 {
        font-size: 26px !important;
    }

    .contact-info h3 {
        font-size: 17px !important;
    }

    .contact-info p,
    .contact-info a {
        font-size: 14px !important;
    }

    .form-control,
    input,
    textarea,
    select {
        font-size: 14px !important;
    }
}

/* ========================================
   ABOUT PAGE MOBILE TYPOGRAPHY
   ======================================== */
@media (max-width: 768px) {
    .about-header h1 {
        font-size: 28px !important;
    }

    .about-content h2 {
        font-size: 24px !important;
    }

    .about-content h3 {
        font-size: 20px !important;
    }

    .about-content p {
        font-size: 15px !important;
        line-height: 1.7 !important;
    }

    .team-member h3 {
        font-size: 19px !important;
    }

    .team-member p {
        font-size: 14px !important;
    }
}

@media (max-width: 480px) {
    .about-header h1 {
        font-size: 26px !important;
    }

    .about-content h2 {
        font-size: 22px !important;
    }

    .about-content h3 {
        font-size: 19px !important;
    }

    .team-member h3 {
        font-size: 18px !important;
    }
}

/* ========================================
   VIDEO GALLERY MOBILE TYPOGRAPHY
   ======================================== */
@media (max-width: 768px) {
    .video-gallery-header h1 {
        font-size: 28px !important;
    }

    .video-card h3 {
        font-size: 18px !important;
    }

    .video-card p {
        font-size: 14px !important;
    }
}

@media (max-width: 480px) {
    .video-gallery-header h1 {
        font-size: 26px !important;
    }

    .video-card h3 {
        font-size: 17px !important;
    }
}

/* ========================================
   PHOTO GALLERY MOBILE TYPOGRAPHY
   ======================================== */
@media (max-width: 768px) {
    .photo-gallery-header h1 {
        font-size: 28px !important;
    }

    .gallery-filter-btn {
        font-size: 14px !important;
    }
}

@media (max-width: 480px) {
    .photo-gallery-header h1 {
        font-size: 26px !important;
    }

    .gallery-filter-btn {
        font-size: 13px !important;
    }
}

/* ========================================
   TEAM PAGE MOBILE TYPOGRAPHY
   ======================================== */
@media (max-width: 768px) {
    .team-header h1 {
        font-size: 28px !important;
    }

    .team-card h3 {
        font-size: 20px !important;
    }

    .team-card .position {
        font-size: 14px !important;
    }

    .team-card p {
        font-size: 14px !important;
    }
}

@media (max-width: 480px) {
    .team-header h1 {
        font-size: 26px !important;
    }

    .team-card h3 {
        font-size: 19px !important;
    }
}

/* ========================================
   LEGAL PAGES MOBILE TYPOGRAPHY
   ======================================== */
@media (max-width: 768px) {
    .legal-page h1 {
        font-size: 26px !important;
    }

    .legal-page h2 {
        font-size: 22px !important;
    }

    .legal-page h3 {
        font-size: 19px !important;
    }

    .legal-page p,
    .legal-page li {
        font-size: 15px !important;
        line-height: 1.7 !important;
    }
}

@media (max-width: 480px) {
    .legal-page h1 {
        font-size: 24px !important;
    }

    .legal-page h2 {
        font-size: 20px !important;
    }

    .legal-page h3 {
        font-size: 18px !important;
    }

    .legal-page p,
    .legal-page li {
        font-size: 14px !important;
    }
}

/* ========================================
   FORMS MOBILE TYPOGRAPHY
   ======================================== */
@media (max-width: 768px) {
    .form-group label {
        font-size: 14px !important;
    }

    .form-group input,
    .form-group textarea,
    .form-group select {
        font-size: 15px !important;
        padding: 12px 15px !important;
    }

    .form-group input::placeholder,
    .form-group textarea::placeholder {
        font-size: 14px !important;
    }

    .error-message,
    .success-message {
        font-size: 14px !important;
    }
}

@media (max-width: 480px) {

    .form-group input,
    .form-group textarea,
    .form-group select {
        font-size: 14px !important;
        padding: 11px 14px !important;
    }
}

/* ========================================
   GENERAL MOBILE IMPROVEMENTS
   ======================================== */
@media (max-width: 768px) {

    /* Links */
    a {
        font-size: inherit;
    }

    /* Lists */
    ul li,
    ol li {
        font-size: 15px !important;
        line-height: 1.7 !important;
    }

    /* Tables */
    table {
        font-size: 14px !important;
    }

    /* Badges and Tags */
    .badge,
    .tag {
        font-size: 12px !important;
        padding: 4px 10px !important;
    }

    /* Alerts */
    .alert {
        font-size: 14px !important;
    }
}

@media (max-width: 480px) {

    ul li,
    ol li {
        font-size: 14px !important;
    }

    table {
        font-size: 13px !important;
    }
}

/* ========================================
   ACCESSIBILITY - Minimum Touch Targets
   ======================================== */
@media (max-width: 768px) {}