/* Responsive Improvements for index.html */

/* General responsive adjustments */
@media (max-width: 991.98px) {
    .section-padding {
        padding: 60px 0;
    }
    
    .section-title h2 {
        font-size: 2rem;
    }
    
    .hero-title {
        font-size: 2.5rem;
    }
    
    .hero-subtitle {
        font-size: 1.1rem;
    }
    
    .hero-buttons .btn {
        padding: 8px 20px;
        font-size: 0.9rem;
    }
    
    .about-image:before, .about-image:after {
        display: none; /* Hide decorative elements on mobile */
    }
}

@media (max-width: 767.98px) {
    .section-padding {
        padding: 50px 0;
    }
    
    .section-title h2 {
        font-size: 1.8rem;
    }
    
    .hero-title {
        font-size: 2rem;
        margin-bottom: 15px;
    }
    
    .hero-subtitle {
        font-size: 1rem;
        margin-bottom: 20px;
    }
    
    .hero-buttons .btn {
        display: block;
        width: 100%;
        margin-right: 0;
        margin-bottom: 10px;
    }
    
    .hero-section {
        padding: 80px 0 60px;
        text-align: center;
    }
    
    .feature-card, .service-card, .market-card {
        margin-bottom: 20px;
        padding: 25px 15px;
    }
    
    .about-content h2, .product-content h3 {
        font-size: 1.8rem;
    }
    
    .cta-title {
        font-size: 1.8rem;
    }
    
    .cta-text {
        font-size: 1rem;
    }
    
    .footer-title {
        margin-top: 20px;
    }
}

/* Mobile navigation improvements */
@media (max-width: 991.98px) {
    .navbar-toggler {
        border: 1px solid var(--primary);
        padding: 0.25rem 0.5rem;
    }
    
    .navbar-toggler-icon {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28144, 195, 31, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
    }
    
    .navbar-collapse {
        background-color: white;
        padding: 15px;
        border-radius: 10px;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        margin-top: 10px;
    }
    
    .nav-link {
        padding: 10px 0 !important;
        border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    }
    
    .nav-item:last-child .nav-link {
        border-bottom: none;
    }
}

/* Hero section mobile improvements */
@media (max-width: 991.98px) {
    .hero-bg {
        clip-path: none;
        width: 100%;
        opacity: 0.1;
        background-position: center;
    }
    
    .hero-content {
        z-index: 2;
        text-align: center;
    }
    
    .hero-section {
        position: relative;
        padding: 100px 0 80px;
    }
    
    .hero-title span:after {
        height: 5px;
        bottom: 3px;
    }
}

/* Feature cards improvements */
@media (max-width: 767.98px) {
    .why-choose-section .row > div {
        margin-bottom: 20px;
    }
    
    .feature-card, .service-card, .market-card {
        height: auto;
    }
    
    .why-choose-section .section-title p,
    .products-section .section-title p,
    .markets-section .section-title p,
    .services-section .section-title p {
        font-size: 0.95rem;
    }
}

/* Products section mobile improvements */
@media (max-width: 991.98px) {
    .product-content {
        padding: 20px 0 0 0;
        text-align: center;
    }
    
    .product-content h3:after {
        left: 50%;
        transform: translateX(-50%);
    }
    
    .product-img-container {
        margin-bottom: 20px;
    }
}

/* Call to action mobile improvements */
@media (max-width: 767.98px) {
    .cta-section {
        padding: 60px 0;
        text-align: center;
    }
    
    .btn-cta {
        display: block;
        width: 100%;
        margin: 0 auto;
    }
}

/* Footer mobile improvements */
@media (max-width: 991.98px) {
    .footer {
        text-align: center;
        padding: 60px 0 20px;
    }
    
    .footer-title:after {
        left: 50%;
        transform: translateX(-50%);
    }
    
    .footer-links {
        margin-bottom: 30px;
    }
    
    .footer-contact p {
        justify-content: center;
    }
    
    .social-links {
        justify-content: center;
    }
    
    .footer-contact i {
        margin-right: 10px;
    }
}

/* Make sure all form elements are responsive */
@media (max-width: 767.98px) {
    input, select, textarea, button {
        font-size: 16px !important; /* Prevent zoom on iOS */
    }
}

/* Fix back-to-top button on mobile */
@media (max-width: 767.98px) {
    .back-to-top {
        width: 40px;
        height: 40px;
        bottom: 20px;
        right: 20px;
    }
}

/* Make sure images don't overflow on mobile */
img {
    max-width: 100%;
    height: auto;
}

/* Ensure the hero section is responsive */
.hero-particles {
    display: none; /* Hide particles on mobile as they can slow down performance */
}

@media (min-width: 992px) {
    .hero-particles {
        display: block;
    }
}

/* Fix for hero image on small screens */
@media (max-width: 991.98px) {
    .hero-image-wrapper {
        display: none;
    }
    
    .hero-content {
        width: 100%;
    }
}

/* Show hero image for very small screens but smaller */
@media (max-width: 575.98px) {
    .col-lg-6.d-none.d-lg-block {
        display: block !important;
        margin-top: 30px;
    }
    
    .hero-image-wrapper {
        display: block;
        height: 250px;
    }
    
    .hero-shape-1, .hero-shape-2, .hero-shape-3 {
        display: none;
    }
    
    .hero-image {
        width: 85%;
        margin: 0 auto;
    }
}

/* 關於我們頁面的響應式設計 */

/* 一般自適應調整 */
@media (max-width: 991.98px) {
    /* 優化頁面標題和間距 */
    .about-hero {
        padding: 100px 0 70px;
    }
    
    .about-hero-content h1 {
        font-size: 2.5rem;
    }
    
    .about-hero-content p {
        font-size: 1.1rem;
        max-width: 90%;
    }
    
    /* 調整時間線佈局 */
    .timeline:before {
        left: 10px;
    }
    
    .timeline-badge {
        left: 10px;
        margin-left: 0;
    }
    
    .timeline-panel {
        width: calc(100% - 40px);
        float: right !important;
        margin-left: 40px;
    }
    
    /* 企業理念和願景卡片間距 */
    .about-card {
        margin-bottom: 30px;
    }
    
    /* 我們的實力部分調整 */
    .about-image-card {
        margin-bottom: 30px;
    }
}

@media (max-width: 767.98px) {
    /* 進一步縮小間距和字體 */
    .about-hero {
        padding: 80px 0 50px;
    }
    
    .about-hero-content h1 {
        font-size: 2rem;
    }
    
    .about-hero-content p {
        font-size: 1rem;
    }
    
    /* 時間線項目縮小 */
    .timeline-panel {
        padding: 20px;
    }
    
    .timeline-year {
        font-size: 1.5rem;
    }
    
    /* 企業理念和願景卡片 */
    .about-card {
        padding: 25px;
    }
    
    .about-card h3 {
        font-size: 1.5rem;
    }
    
    /* Call to action 調整 */
    .cta-section .cta-title {
        font-size: 1.8rem;
    }
    
    .cta-section .cta-text {
        font-size: 1rem;
    }
    
    .cta-section .btn-cta {
        width: 100%;
        display: block;
    }
}

/* 特定元素的響應式調整 */
@media (max-width: 767.98px) {
    /* 調整圖片顯示 */
    .about-image-card .about-image {
        height: 200px;
        overflow: hidden;
    }
    
    .about-image-card .about-image img {
        height: 100%;
        object-fit: cover;
    }
    
    /* 改善小螢幕上的圖標和文字對齊 */
    .feature-icon {
        width: 40px !important; 
        height: 40px !important;
        line-height: 40px !important;
        font-size: 1rem !important;
    }
    
    .d-flex.align-items-center h5 {
        font-size: 1.1rem;
    }
}


/* 產品頁面的響應式設計 */

/* 產品頁面英雄區塊 */
@media (max-width: 991.98px) {
    .products-hero {
        padding: 100px 0 70px;
    }
    
    .products-hero-content h1 {
        font-size: 2.5rem;
    }
    
    .products-hero-content p {
        font-size: 1.1rem;
        max-width: 90%;
        margin: 0 auto;
    }
}

@media (max-width: 767.98px) {
    .products-hero {
        padding: 80px 0 50px;
    }
    
    .products-hero-content h1 {
        font-size: 2rem;
    }
    
    .products-hero-content p {
        font-size: 1rem;
    }
}

/* 產品類別卡片響應式調整 */
@media (max-width: 991.98px) {
    .product-category-card {
        margin-bottom: 20px;
    }
    
    .product-category-img {
        height: 220px;
    }
}

@media (max-width: 767.98px) {
    .product-category-img {
        height: 200px;
    }
    
    .product-category-content {
        padding: 20px;
    }
    
    .product-category-content h4 {
        font-size: 1.3rem;
    }
    
    .product-category-content p {
        font-size: 0.95rem;
    }
    
    .btn-product-more {
        padding: 8px 15px;
        font-size: 0.9rem;
    }
}

/* 服務區塊的響應式調整 */
@media (max-width: 991.98px) {
    .service-block {
        padding: 60px 0;
    }
    
    .service-block .section-title {
        text-align: center !important;
    }
    
    .service-block .section-title p {
        margin: 0 auto;
    }
    
    .service-block .section-title h2:after {
        left: 50%;
        transform: translateX(-50%);
    }
}

@media (max-width: 767.98px) {
    .service-block {
        padding: 50px 0;
    }
    
    .service-item {
        padding: 15px;
        margin-bottom: 20px;
    }
    
    .service-icon {
        width: 50px;
        height: 50px;
        min-width: 50px;
        line-height: 50px;
        font-size: 1.2rem;
        margin-right: 15px;
    }
    
    .service-content h4 {
        font-size: 1.1rem;
    }
    
    .service-content p {
        font-size: 0.9rem;
    }
}

/* 聯絡橫幅的響應式調整 */
@media (max-width: 991.98px) {
    .contact-banner {
        padding: 50px 0;
    }
    
    .contact-title {
        font-size: 1.8rem;
    }
    
    .contact-text {
        font-size: 1rem;
        margin-bottom: 20px;
    }
}

@media (max-width: 767.98px) {
    .contact-banner {
        padding: 40px 0;
    }
    
    .contact-title {
        font-size: 1.5rem;
    }
    
    .contact-text {
        font-size: 0.95rem;
    }
    
    .btn-contact {
        width: 100%;
        display: block;
        padding: 10px 15px;
        font-size: 0.95rem;
    }
}

/* 細微優化 - 避免在極小螢幕上的內容溢出 */
@media (max-width: 320px) {
    .product-category-content h4 {
        font-size: 1.1rem;
    }
    
    .product-category-content p {
        font-size: 0.85rem;
    }
    
    .service-content h4 {
        font-size: 1rem;
    }
    
    .service-content p {
        font-size: 0.85rem;
    }
}

/* 品質保證頁面的響應式設計 */

/* 一般自適應調整 */
@media (max-width: 991.98px) {
    /* 優化頁面標題和間距 */
    .quality-hero {
        padding: 100px 0 70px;
    }
    
    .quality-hero-content h1 {
        font-size: 2.5rem;
    }
    
    .quality-hero-content p {
        font-size: 1.1rem;
        max-width: 90%;
    }
    
    /* 品質政策部分 */
    .quality-image {
        margin-bottom: 30px;
    }
    
    .quality-icon-overlay {
        width: 60px;
        height: 60px;
        font-size: 1.5rem;
        bottom: 15px;
        right: 15px;
    }
    
    .quality-text {
        font-size: 1rem;
    }
    
    .quality-feature-item {
        padding: 15px;
    }
    
    .quality-feature-icon {
        width: 40px;
        height: 40px;
        min-width: 40px;
        font-size: 1.1rem;
        margin-right: 15px;
    }
    
    .quality-feature-text h4 {
        font-size: 1.1rem;
    }
    
    /* 環測設備部分 */
    .equipment-card {
        margin-bottom: 20px;
    }
    
    .equipment-img {
        height: 180px;
    }
    
    .equipment-content {
        padding: 15px;
    }
    
    .equipment-content h4 {
        font-size: 1.1rem;
    }
    
    /* 檢測設備部分 */
    .inspection-card {
        margin-bottom: 20px;
    }
    
    .inspection-img {
        height: 180px;
    }
    
    .inspection-content {
        padding: 15px;
    }
    
    .inspection-content h4 {
        font-size: 1.1rem;
    }
    
    /* 品質認證部分 */
    .certificate-card {
        padding: 20px;
        margin-bottom: 20px;
    }
    
    .certificate-icon {
        width: 60px;
        height: 60px;
        font-size: 2rem;
        margin-bottom: 15px;
    }
    
    .certificate-card h4 {
        font-size: 1.2rem;
    }
}

@media (max-width: 767.98px) {
    /* 進一步縮小間距和字體 */
    .quality-hero {
        padding: 80px 0 50px;
    }
    
    .quality-hero-content h1 {
        font-size: 2rem;
    }
    
    .quality-hero-content p {
        font-size: 1rem;
    }
    
    /* 品質政策部分 */
    .quality-text {
        font-size: 0.95rem;
        line-height: 1.6;
    }
    
    .quality-feature-item {
        padding: 15px;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    
    .quality-feature-icon {
        margin-right: 0;
        margin-bottom: 15px;
    }
    
    /* 環測設備部分 */
    .equipment-img {
        height: 160px;
    }
    
    .equipment-content p {
        font-size: 0.9rem;
    }
    
    /* 檢測設備部分 */
    .inspection-card .row {
        flex-direction: column;
    }
    
    .inspection-img {
        height: 200px;
    }
    
    .inspection-content {
        padding: 15px;
    }
    
    .inspection-content p {
        font-size: 0.9rem;
    }
    
    .inspection-features li {
        font-size: 0.85rem;
    }
    
    /* 品質認證部分 */
    .certificate-card {
        padding: 20px 15px;
    }
    
    .certificate-card p {
        font-size: 0.9rem;
    }
}

/* 調整檢測設備卡片布局 */
@media (max-width: 767.98px) {
    .inspection-card .row {
        display: block;
    }
    
    .inspection-card .col-md-5,
    .inspection-card .col-md-7 {
        width: 100%;
        max-width: 100%;
        flex: 0 0 100%;
    }
    
    .inspection-img {
        border-radius: 10px 10px 0 0;
    }
    
    .inspection-content {
        border-radius: 0 0 10px 10px;
    }
}

/* 確保小螢幕上的圖片正確顯示 */
@media (max-width: 575.98px) {
    .equipment-img {
        height: 180px;
    }
    
    .equipment-content h4 {
        font-size: 1rem;
    }
    
    .equipment-content p {
        font-size: 0.85rem;
    }
    
    .certificate-icon {
        width: 50px;
        height: 50px;
        font-size: 1.5rem;
    }
    
    .certificate-card h4 {
        font-size: 1.1rem;
    }
    
    .certificate-card p {
        font-size: 0.85rem;
    }
}

/* 針對 inspection-card 的特殊調整 */
@media (max-width: 991.98px) and (min-width: 768px) {
    .inspection-content {
        padding: 15px;
    }
    
    .inspection-content h4 {
        font-size: 1rem;
    }
    
    .inspection-content p {
        font-size: 0.85rem;
    }
    
    .inspection-features li {
        font-size: 0.8rem;
    }
}

/* 聯絡我們頁面響應式樣式 - */

/* 一般自適應調整 */
@media (max-width: 991.98px) {
    /* 調整頁面標題和間距 */
    .contact-hero {
        padding: 100px 0 70px;
    }
    
    .contact-hero-content h1 {
        font-size: 2.5rem;
    }
    
    .contact-hero-content p {
        font-size: 1.1rem;
        max-width: 90%;
    }
    
    /* 調整聯絡資訊區塊 */
    .contact-info {
        margin-bottom: 30px;
    }
    
    .contact-info h2 {
        font-size: 1.8rem;
    }
    
    /* 地圖區域調整 */
    .map-section {
        padding: 50px 0;
    }
    
    .map-container iframe {
        height: 350px;
    }
}

@media (max-width: 767.98px) {
    /* 進一步縮小間距和字體 */
    .contact-hero {
        padding: 80px 0 50px;
    }
    
    .contact-hero-content h1 {
        font-size: 2rem;
    }
    
    .contact-hero-content p {
        font-size: 1rem;
    }
    
    .contact-section {
        padding: 50px 0;
    }
    
    /* 聯絡資訊區塊調整 */
    .contact-info h2 {
        font-size: 1.6rem;
    }
    
    .contact-info p {
        margin-bottom: 20px;
    }
    
    .icon-box {
        width: 40px;
        height: 40px;
        min-width: 40px;
        font-size: 1rem;
        margin-right: 15px;
    }
    
    .contact-text h5 {
        font-size: 1rem;
    }
    
    /* 表單調整 */
    .contact-form-wrapper {
        padding: 20px;
    }
    
    .contact-form-wrapper h3 {
        font-size: 1.5rem;
    }
    
    .contact-form .form-control {
        height: 45px;
        font-size: 0.95rem;
    }
    
    /* 地圖調整 */
    .map-section {
        padding: 40px 0;
    }
    
    .map-container iframe {
        height: 300px;
    }
}

/* 特定元素的響應式調整 */
@media (max-width: 575.98px) {
    /* 在小螢幕上堆疊表單欄位 */
    .contact-form .row [class*="col-"] {
        margin-bottom: 15px;
    }
    
    .contact-form .btn {
        width: 100%;
        display: block;
    }
    
    /* 調整聯絡資訊區塊間距 */
    .contact-details li {
        margin-bottom: 20px;
    }
    
    /* 縮小地圖高度 */
    .map-container iframe {
        height: 250px;
    }
    
    /* 改善小螢幕上的圖標和文字對齊 */
    .icon-box {
        width: 35px;
        height: 35px;
        min-width: 35px;
        font-size: 0.9rem;
        margin-right: 10px;
    }
    
    .contact-text h5 {
        font-size: 0.95rem;
    }
    
    /* 調整聯絡表單 */
    .contact-form label {
        font-size: 0.9rem;
    }
}

/* 確保所有輸入元素在行動裝置上都有足夠大小以避免縮放 */
@media (max-width: 767.98px) {
    input, select, textarea, button {
        font-size: 16px !important; /* 防止iOS縮放 */
    }
    
    .contact-form .form-control {
        padding: 8px 12px;
    }
}