*{margin: 0;padding: 0;box-sizing: border-box} body{font-family: 'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;line-height: 1.6;color: #333;overflow-x: hidden} .container{max-width: 1200px;margin: 0 auto;padding: 0 20px} header{background: linear-gradient(135deg,#1976D2 0%,#2196F3 100%);color: white;padding: 1rem 0;position: fixed;width: 100%;top: 0;z-index: 1000;backdrop-filter: blur(10px)} nav{display: flex;justify-content: space-between;align-items: center} .logo{font-size: 1.5rem;font-weight: 700;display: flex;align-items: center;gap: 0.5rem;color: white;text-decoration: none;transition: opacity 0.3s ease} .logo:hover{opacity: 0.8} .logo-image{height: 32px;width: auto} .nav-links{display: flex;list-style: none;gap: 2rem} .nav-links a{color: white;text-decoration: none;font-weight: 500;transition: opacity 0.3s ease} .nav-links a:hover{opacity: 0.8} .mobile-menu-toggle{display: none;flex-direction: column;background: none;border: none;cursor: pointer;padding: 0;width: 30px;height: 24px;justify-content: space-between} .mobile-menu-toggle span{display: block;height: 3px;width: 100%;background: white;border-radius: 2px;transition: all 0.3s ease} .mobile-menu-toggle.active span:nth-child(1){transform: rotate(45deg) translate(6px,6px)} .mobile-menu-toggle.active span:nth-child(2){opacity: 0} .mobile-menu-toggle.active span:nth-child(3){transform: rotate(-45deg) translate(6px,-6px)} .hero{background: linear-gradient(135deg,#0D47A1 0%,#1976D2 50%,#2196F3 100%);color: white;padding: 120px 0 80px;text-align: center;position: relative;overflow: hidden;margin-top: 0} .custom-shape-divider-bottom-1753974991{position: absolute;bottom: 0;left: 0;width: 100%;overflow: hidden;line-height: 0;transform: rotate(180deg)} .custom-shape-divider-bottom-1753974991 svg{position: relative;display: block;width: calc(100% + 1.3px);height: 70px} .custom-shape-divider-bottom-1753974991 .shape-fill{fill: #FFFFFF} .hero-content{position: relative;z-index: 2;display: grid;grid-template-columns: 1fr 1fr;gap: 4rem;align-items: center;max-width: 1200px;margin: 0 auto} .hero-text{text-align: left} .hero-image{display: flex;justify-content: center;align-items: center} .hero-img{width: 100%;max-width: 500px;height: auto;border-radius: 20px;box-shadow: 0 20px 40px rgba(0,0,0,0.2);transition: transform 0.3s ease} .hero-img:hover{transform: translateY(-10px)} .hero h1{font-size: 3.5rem;font-weight: 700;margin-bottom: 1rem;line-height: 1.2} .hero .subtitle{font-size: 1.3rem;margin-bottom: 2rem;opacity: 0.9;max-width: 500px} .cta-buttons{display: flex;gap: 1rem;justify-content: flex-start;flex-wrap: wrap;margin-top: 2rem} .btn{display: inline-flex;align-items: center;gap: 0.5rem;padding: 1rem 2rem;border-radius: 50px;text-decoration: none;font-weight: 600;transition: all 0.3s ease;border: none;cursor: pointer;font-size: 1rem} .btn-primary{background: white;color: #1976D2;box-shadow: 0 4px 15px rgba(0,0,0,0.2)} .btn-primary:hover{transform: translateY(-2px);box-shadow: 0 6px 20px rgba(0,0,0,0.3)} .btn-secondary{background: rgba(255,255,255,0.2);color: white;border: 2px solid rgba(255,255,255,0.3)} .btn-secondary:hover{background: rgba(255,255,255,0.3)} .problem{padding: 80px 0;background: #F8F9FA} .problem-layout{display: grid;grid-template-columns: 1fr 1fr;gap: 4rem;align-items: center} .problem-content{text-align: left} .problem-image{display: flex;justify-content: center;align-items: center} .problem-img{width: 100%;max-width: 500px;height: auto;border-radius: 20px;box-shadow: 0 15px 30px rgba(0,0,0,0.15);transition: transform 0.3s ease} .problem-img:hover{transform: translateY(-5px)} .problem h2{font-size: 2.5rem;color: #0D47A1;margin-bottom: 1.5rem;font-weight: 600} .problem p{font-size: 1.2rem;color: #666;margin-bottom: 2rem} .stats{display: grid;grid-template-columns: repeat(auto-fit,minmax(200px,1fr));gap: 2rem;margin-top: 3rem} .stat{text-align: center;padding: 2rem;background: white;border-radius: 15px;box-shadow: 0 4px 15px rgba(0,0,0,0.1)} .stat-number{font-size: 3rem;font-weight: 700;color: #1976D2;display: block} .stat-label{color: #666;font-weight: 500} .features{padding: 80px 0;background: white} .features-intro{display: grid;grid-template-columns: 1fr 1fr;gap: 4rem;align-items: center;margin-bottom: 4rem} .features-image{display: flex;justify-content: center;align-items: center} .features-intro-img{width: 100%;max-width: 500px;height: auto;border-radius: 20px;box-shadow: 0 15px 30px rgba(0,0,0,0.15);transition: transform 0.3s ease} .features-intro-img:hover{transform: translateY(-5px)} .features-content{text-align: left} .features-content h2{font-size: 2.5rem;color: #0D47A1;margin-bottom: 1.5rem;font-weight: 600} .features-content p{font-size: 1.1rem;color: #666;line-height: 1.7;margin-bottom: 1.5rem} .features-grid{display: grid;grid-template-columns: repeat(auto-fit,minmax(300px,1fr));gap: 3rem;margin-top: 3rem} .feature{text-align: center;padding: 2rem;border-radius: 20px;transition: transform 0.3s ease} .feature:hover{transform: translateY(-5px)} .feature:nth-child(odd){background: linear-gradient(135deg,#E3F2FD 0%,#BBDEFB 100%)} .feature:nth-child(even){background: linear-gradient(135deg,#F3E5F5 0%,#E1BEE7 100%)} .feature-icon{font-size: 3rem;margin-bottom: 1rem;display: block} .feature h3{font-size: 1.5rem;color: #0D47A1;margin-bottom: 1rem;font-weight: 600} .feature p{color: #666;line-height: 1.6} .how-it-works{padding: 80px 0;background: linear-gradient(135deg,#E3F2FD 0%,#BBDEFB 100%)} .how-it-works-header{text-align: center;margin-bottom: 4rem} .how-it-works-header h2{font-size: 2.5rem;color: #0D47A1;margin-bottom: 2rem;font-weight: 600} .process-image{display: flex;justify-content: center;margin-bottom: 2rem} .process-img{width: 100%;max-width: 500px;height: auto;border-radius: 20px;box-shadow: 0 15px 30px rgba(0,0,0,0.15);transition: transform 0.3s ease} .process-img:hover{transform: translateY(-5px)} .steps{display: grid;grid-template-columns: repeat(auto-fit,minmax(250px,1fr));gap: 2rem;margin-top: 3rem} .step{background: white;padding: 2rem;border-radius: 20px;text-align: center;box-shadow: 0 4px 15px rgba(0,0,0,0.1);position: relative} .step-number{position: absolute;top: -15px;left: 50%;transform: translateX(-50%);background: #1976D2;color: white;width: 40px;height: 40px;border-radius: 50%;display: flex;align-items: center;justify-content: center;font-weight: 700;font-size: 1.2rem} .step h3{color: #0D47A1;margin: 1rem 0;font-weight: 600} .step p{color: #666} .benefits{padding: 80px 0;background: white} .benefits-layout{display: grid;grid-template-columns: 2fr 1fr;gap: 4rem;align-items: center} .benefits-content h2{text-align: left;font-size: 2.5rem;color: #0D47A1;margin-bottom: 3rem;font-weight: 600} .benefits-grid{display: grid;grid-template-columns: repeat(2,1fr);gap: 2rem} .benefits-image{display: flex;justify-content: center;align-items: center} .benefits-img{width: 100%;max-width: 400px;height: auto;border-radius: 20px;box-shadow: 0 15px 30px rgba(0,0,0,0.15);transition: transform 0.3s ease} .benefits-img:hover{transform: translateY(-5px)} .benefit{display: flex;align-items: flex-start;gap: 1rem;padding: 1.5rem;border-radius: 15px;background: #F8F9FA} .benefit-icon{font-size: 2rem;color: #1976D2;flex-shrink: 0} .benefit h3{color: #0D47A1;margin-bottom: 0.5rem;font-weight: 600} .benefit p{color: #666} .download{padding: 80px 0;background: linear-gradient(135deg,#0D47A1 0%,#1976D2 50%,#2196F3 100%);color: white} .download-layout{display: grid;grid-template-columns: 1fr 1fr;gap: 4rem;align-items: center} .download-content{text-align: left} .download-content h2{font-size: 2.5rem;margin-bottom: 1rem;font-weight: 600} .download-content p{font-size: 1.2rem;margin-bottom: 2rem;opacity: 0.9} .download-image{display: flex;justify-content: center;align-items: center} .download-img{width: 100%;max-width: 400px;height: auto;border-radius: 20px;box-shadow: 0 20px 40px rgba(0,0,0,0.3);transition: transform 0.3s ease} .download-img:hover{transform: translateY(-10px)} .app-badges{display: flex;justify-content: center;gap: 1rem;flex-wrap: wrap} .app-badge{display: inline-block;transition: transform 0.3s ease} .app-badge:hover{transform: scale(1.05)} .app-badge img{height: 60px;border-radius: 10px} .email-signup{background: rgba(255,255,255,0.1);border-radius: 20px;padding: 2rem;margin: 2rem 0;backdrop-filter: blur(10px);border: 1px solid rgba(255,255,255,0.2)} .email-signup h3{font-size: 1.5rem;margin-bottom: 0.5rem;font-weight: 600} .email-signup p{margin-bottom: 1.5rem;opacity: 0.9} .signup-form{max-width: 400px;margin: 0 auto} .form-row{display: flex;gap: 0.5rem;flex-wrap: wrap} .form-row input{flex: 1;min-width: 250px;padding: 0.75rem 1rem;border: 2px solid rgba(255,255,255,0.3);border-radius: 25px;background: rgba(255,255,255,0.1);color: white;font-size: 1rem;backdrop-filter: blur(10px)} .form-row input::placeholder{color: rgba(255,255,255,0.7)} .form-row input:focus{outline: none;border-color: rgba(255,255,255,0.6);background: rgba(255,255,255,0.2)} .signup-btn{padding: 0.75rem 1.5rem;background: white;color: #1976D2;border: none;border-radius: 25px;font-weight: 600;cursor: pointer;transition: all 0.3s ease;white-space: nowrap} .signup-btn:hover{transform: translateY(-2px);box-shadow: 0 4px 15px rgba(0,0,0,0.2)} .signup-btn:disabled{opacity: 0.7;cursor: not-allowed;transform: none} .coming-soon-section{margin: 2rem 0} .coming-soon-badge{margin-bottom: 1rem} .coming-soon-text{background: linear-gradient(45deg,#FF6B6B,#4ECDC4);color: white;padding: 0.5rem 1.5rem;border-radius: 25px;font-weight: 600;font-size: 1.1rem;display: inline-block;animation: pulse 2s infinite} @keyframes pulse{0%{transform: scale(1)} 50%{transform: scale(1.05)} 100%{transform: scale(1)} } .app-badge-wrapper{position: relative;display: inline-block} .coming-soon-overlay{position: absolute;top: 0;left: 0;right: 0;bottom: 0;background: rgba(0,0,0,0.7);border-radius: 10px;display: flex;align-items: center;justify-content: center;color: white;font-weight: 600;font-size: 0.9rem} .success-message{background: rgba(76,175,80,0.2);color: white;padding: 1rem;border-radius: 10px;border: 1px solid rgba(76,175,80,0.5);margin-bottom: 1rem;display: none;backdrop-filter: blur(10px)} footer{background: #0D47A1;color: white;padding: 2rem 0;text-align: center} .footer-content{display: flex;justify-content: space-between;align-items: center;flex-wrap: wrap;gap: 1rem} .footer-links{display: flex;gap: 2rem;list-style: none} .footer-links a{color: white;text-decoration: none;opacity: 0.8;transition: opacity 0.3s ease} .footer-links a:hover{opacity: 1} @media (max-width: 768px){.container{padding: 0 15px} .mobile-menu-toggle{display: flex} .nav-links{position: fixed;top: 70px;left: 0;width: 100%;background: linear-gradient(135deg,#1976D2 0%,#2196F3 100%);flex-direction: column;padding: 2rem 0;gap: 0;transform: translateX(-100%);transition: transform 0.3s ease;box-shadow: 0 4px 15px rgba(0,0,0,0.2);z-index: 999} .nav-links.active{transform: translateX(0)} .nav-links li{text-align: center;padding: 0.75rem 0;border-bottom: 1px solid rgba(255,255,255,0.1)} .nav-links li:last-child{border-bottom: none} .nav-links a{display: block;padding: 0.5rem 1rem;font-size: 1.1rem} .hero{padding: 100px 0 60px} .hero-content{grid-template-columns: 1fr;gap: 2rem;text-align: center} .hero-text{text-align: center} .hero h1{font-size: 2.2rem;line-height: 1.3} .hero .subtitle{font-size: 1.1rem;padding: 0 10px;max-width: none;margin: 0 auto 2rem auto} .cta-buttons{justify-content: center;flex-direction: column;align-items: center;gap: 0.75rem} .btn{width: 100%;max-width: 280px;justify-content: center} .hero-img{max-width: 350px} .problem{padding: 60px 0} .problem-layout{grid-template-columns: 1fr;gap: 2rem} .problem-content{text-align: center} .problem h2{font-size: 2rem;line-height: 1.3} .problem p{font-size: 1.1rem;padding: 0 10px} .problem-img{max-width: 400px} .stats{grid-template-columns: 1fr;gap: 1.5rem;margin-top: 2rem} .stat{padding: 1.5rem} .features{padding: 60px 0} .features-intro{grid-template-columns: 1fr;gap: 2rem;text-align: center} .features-content{text-align: center} .features-content h2{font-size: 2rem;line-height: 1.3} .features-intro-img{max-width: 400px} .features-grid{grid-template-columns: 1fr;gap: 2rem;margin-top: 2rem} .feature{padding: 1.5rem} .how-it-works{padding: 60px 0} .how-it-works-header h2{font-size: 2rem;line-height: 1.3} .process-img{max-width: 400px} .steps{grid-template-columns: 1fr;gap: 1.5rem;margin-top: 2rem} .step{padding: 1.5rem;margin-top: 15px} .benefits{padding: 60px 0} .benefits-layout{grid-template-columns: 1fr;gap: 2rem} .benefits-content h2{font-size: 2rem;line-height: 1.3;text-align: center} .benefits-grid{grid-template-columns: 1fr;gap: 1.5rem;margin-top: 2rem} .benefit{padding: 1.25rem;flex-direction: column;text-align: center;gap: 0.75rem} .benefit-icon{align-self: center} .benefits-img{max-width: 350px} .download{padding: 60px 0} .download-layout{grid-template-columns: 1fr;gap: 2rem;text-align: center} .download-content{text-align: center} .download-content h2{font-size: 2rem;line-height: 1.3} .download-content p{font-size: 1.1rem;padding: 0 10px} .download-img{max-width: 300px} .footer-content{flex-direction: column;text-align: center;gap: 1.5rem} .footer-links{justify-content: center;flex-wrap: wrap;gap: 1rem} } @media (max-width: 480px){.container{padding: 0 10px} .hero h1{font-size: 1.8rem} .hero .subtitle{font-size: 1rem} .problem h2,.features h2,.how-it-works h2,.benefits h2,.download h2{font-size: 1.75rem} .stat-number{font-size: 2.5rem} .feature-icon{font-size: 2.5rem} .step-number{width: 35px;height: 35px;font-size: 1rem} .benefit-icon{font-size: 1.75rem} } html{scroll-behavior: smooth} .fade-in{opacity: 0;transform: translateY(30px);transition: all 0.6s ease} .fade-in.visible{opacity: 1;transform: translateY(0)} .blog-hero{background: linear-gradient(135deg,#0D47A1 0%,#1976D2 50%,#2196F3 100%);color: white;padding: 120px 0 80px;text-align: center;position: relative;overflow: hidden;margin-top: 0} .blog-hero h1{font-size: 3rem;font-weight: 700;margin-bottom: 1rem;color: white} .blog-hero p{font-size: 1.2rem;max-width: 600px;margin: 0 auto;background: rgba(255,255,255,0.4);color: white;border: 1px solid rgba(255,255,255,0.5);padding: 0.75rem 1.5rem;border-radius: 25px;display: inline-block;backdrop-filter: blur(10px)} .blog-index{padding: 80px 0;background: #f8f9fa} .blog-grid{display: grid;grid-template-columns: repeat(auto-fit,minmax(350px,1fr));gap: 2rem;margin-bottom: 4rem} .no-posts-message{text-align: center;background: white;border-radius: 20px;padding: 4rem 2rem;box-shadow: 0 4px 15px rgba(0,0,0,0.1);max-width: 600px;margin: 0 auto} .no-posts-icon{font-size: 4rem;margin-bottom: 1.5rem;display: block} .no-posts-message h2{color: #0D47A1;font-size: 2rem;margin-bottom: 1.5rem;font-weight: 600} .no-posts-message p{color: #666;font-size: 1.1rem;line-height: 1.6;margin-bottom: 2rem;max-width: 500px;margin-left: auto;margin-right: auto} .no-posts-message .btn{display: inline-flex;align-items: center;gap: 0.5rem;padding: 1rem 2rem;border-radius: 50px;text-decoration: none;font-weight: 600;transition: all 0.3s ease;background: #1976D2;color: white;box-shadow: 0 4px 15px rgba(25,118,210,0.3)} .no-posts-message .btn:hover{transform: translateY(-2px);box-shadow: 0 6px 20px rgba(25,118,210,0.4);text-decoration: none} .blog-card{background: white;border-radius: 15px;overflow: hidden;box-shadow: 0 4px 15px rgba(0,0,0,0.1);transition: transform 0.3s ease} .blog-card:hover{transform: translateY(-5px)} .blog-card-image{width: 100%;height: 200px;object-fit: cover} .blog-card-content{padding: 1.5rem} .blog-card-title a{color: #0d47a1;text-decoration: none;font-size: 1.25rem;font-weight: 600} .blog-card-excerpt{color: #666;margin: 1rem 0;line-height: 1.6} .blog-card-meta{display: flex;justify-content: space-between;align-items: center;margin-bottom: 1rem;font-size: 0.9rem;color: #888} .tags{display: flex;gap: 0.5rem;flex-wrap: wrap} .tag{background: #e3f2fd;color: #1976d2;padding: 0.25rem 0.5rem;border-radius: 12px;font-size: 0.8rem;text-decoration: none} .read-more{color: #1976d2;text-decoration: none;font-weight: 500} .blog-post-hero{background: linear-gradient(135deg,#0D47A1 0%,#1976D2 50%,#2196F3 100%);color: white;padding: 120px 0 80px;text-align: center;position: relative;overflow: hidden;margin: 0} .blog-post-title{font-size: 2.5rem;margin-bottom: 1rem;line-height: 1.2;color: white} .blog-post-meta{display: flex;gap: 1rem;align-items: center;justify-content: center;margin-bottom: 1.5rem;color: rgba(255,255,255,0.9)} .blog-post-hero .tags{justify-content: center} .blog-post-hero .tag{background: rgba(255,255,255,0.4);color: white;border: 1px solid rgba(255,255,255,0.5)} .blog-post-hero .tag:hover{background: rgba(255,255,255,0.5)} .blog-post-content{margin: 4rem 0 2rem 0} .blog-post-content h2{color: #0d47a1;margin: 2rem 0 1rem} .blog-post-content h3{color: #1976d2;margin: 1.5rem 0 0.5rem} .blog-post-content ul,.blog-post-content ol{margin: 1rem 0;padding-left: 2rem} .blog-post-content li{margin-bottom: 0.5rem} .blog-post-content blockquote{border-left: 4px solid #1976d2;padding-left: 1rem;margin: 1.5rem 0;font-style: italic;color: #666} .blog-post-content strong{color: #0d47a1} .direct-link{display: none} .content-card{background: white;border-radius: 15px;padding: 3rem;box-shadow: 0 4px 15px rgba(0,0,0,0.1);margin-bottom: 2rem;margin-top: 2rem} .last-updated{color: #666;font-style: italic;margin-bottom: 2rem;padding-bottom: 1rem;border-bottom: 2px solid #E3F2FD} .content-card h1{color: #0D47A1;font-size: 2.5rem;margin-bottom: 1rem;font-weight: 600} .content-card h2{color: #1976D2;font-size: 1.5rem;margin: 2rem 0 1rem 0;font-weight: 600} .content-card h3{color: #0D47A1;font-size: 1.2rem;margin: 1.5rem 0 0.5rem 0;font-weight: 600} .content-card p{margin-bottom: 1rem;color: #555} .content-card ul{margin: 1rem 0 1rem 2rem;color: #555} .content-card li{margin-bottom: 0.5rem} .highlight{background: #E3F2FD;padding: 1rem;border-radius: 8px;border-left: 4px solid #1976D2;margin: 1rem 0} .warning{background: #FFF3E0;padding: 1rem;border-radius: 8px;border-left: 4px solid #FF9800;margin: 1rem 0} .contact-info{background: #F3E5F5;padding: 1.5rem;border-radius: 10px;margin: 2rem 0} .hero-section{text-align: center;margin-bottom: 3rem;margin-top: 2rem} .hero-section h1{color: #0D47A1;font-size: 2.5rem;margin-bottom: 1rem;font-weight: 600} .hero-section p{color: #666;font-size: 1.2rem;max-width: 600px;margin: 0 auto} .support-grid{display: grid;grid-template-columns: repeat(auto-fit,minmax(300px,1fr));gap: 2rem;margin-bottom: 3rem} .support-card{background: white;border-radius: 15px;padding: 2rem;box-shadow: 0 4px 15px rgba(0,0,0,0.1);text-align: center;transition: transform 0.3s ease} .support-card:hover{transform: translateY(-5px)} .support-card-icon{font-size: 3rem;margin-bottom: 1rem;display: block} .support-card h3{color: #1976D2;font-size: 1.3rem;margin-bottom: 1rem;font-weight: 600} .support-card p{color: #666;margin-bottom: 1.5rem} .support-card .btn{display: inline-block;background: #1976D2;color: white;padding: 0.75rem 1.5rem;border-radius: 25px;text-decoration: none;font-weight: 500;transition: background 0.3s ease} .support-card .btn:hover{background: #0D47A1} .faq-section{background: white;border-radius: 15px;padding: 3rem;box-shadow: 0 4px 15px rgba(0,0,0,0.1);margin-bottom: 3rem} .faq-section h2{color: #0D47A1;font-size: 2rem;margin-bottom: 2rem;text-align: center;font-weight: 600} .faq-item{border-bottom: 1px solid #E3F2FD;padding: 1.5rem 0} .faq-item:last-child{border-bottom: none} .faq-question{color: #1976D2;font-size: 1.1rem;font-weight: 600;margin-bottom: 0.5rem;cursor: pointer;display: flex;justify-content: space-between;align-items: center} .faq-question::after{content: "+";font-size: 1.5rem;transition: transform 0.3s ease} .faq-question.active::after{transform: rotate(45deg)} .faq-answer{color: #666;max-height: 0;overflow: hidden;transition: max-height 0.3s ease} .faq-answer.active{max-height: 400px;padding-top: 0.5rem} .faq-answer ul{margin: 0.5rem 0 0.5rem 1.5rem} .getting-started-steps{display: grid;grid-template-columns: repeat(auto-fit,minmax(300px,1fr));gap: 2rem;margin-top: 2rem} .step-card{background: linear-gradient(135deg,#E3F2FD 0%,#BBDEFB 100%);border-radius: 15px;padding: 2rem;position: relative;transition: transform 0.3s ease} .step-card:hover{transform: translateY(-5px)} .step-card .step-number{position: absolute;top: -15px;left: 2rem;background: #1976D2;color: white;width: 40px;height: 40px;border-radius: 50%;display: flex;align-items: center;justify-content: center;font-weight: 700;font-size: 1.2rem} .step-card h3{color: #0D47A1;font-size: 1.3rem;margin: 1rem 0;font-weight: 600} .step-card ul{color: #666;margin-left: 1.5rem} .step-card li{margin-bottom: 0.5rem} .tips-grid{display: grid;grid-template-columns: repeat(auto-fit,minmax(300px,1fr));gap: 2rem;margin-top: 2rem} .tip-card{background: white;border-radius: 15px;padding: 2rem;box-shadow: 0 4px 15px rgba(0,0,0,0.1);text-align: center;transition: transform 0.3s ease} .tip-card:hover{transform: translateY(-5px)} .tip-icon{font-size: 3rem;margin-bottom: 1rem;display: block;color: #1976D2} .tip-card h3{color: #0D47A1;font-size: 1.3rem;margin-bottom: 1rem;font-weight: 600} .tip-card ul{text-align: left;color: #666;margin-left: 1.5rem} .tip-card li{margin-bottom: 0.5rem} .tip-card strong{color: #1976D2} .troubleshooting-section h3{color: #1976D2;font-size: 1.4rem;margin: 2rem 0 1rem 0;font-weight: 600;border-bottom: 2px solid #E3F2FD;padding-bottom: 0.5rem} .troubleshooting-section h3:first-child{margin-top: 0} .issue-item{margin-bottom: 2rem;padding: 1.5rem;background: #F8F9FA;border-radius: 10px;border-left: 4px solid #1976D2} .issue-item h4{color: #0D47A1;font-size: 1.1rem;margin-bottom: 1rem;font-weight: 600} .issue-item ul{color: #666;margin-left: 1.5rem} .issue-item li{margin-bottom: 0.5rem} .contact-section{background: linear-gradient(135deg,#E3F2FD 0%,#BBDEFB 100%);border-radius: 15px;padding: 3rem;text-align: center} .contact-section h2{color: #0D47A1;font-size: 2rem;margin-bottom: 1rem;font-weight: 600} .contact-section p{color: #666;margin-bottom: 2rem;font-size: 1.1rem} .contact-methods{display: grid;grid-template-columns: repeat(auto-fit,minmax(250px,1fr));gap: 2rem;margin-top: 2rem} .contact-method{background: white;padding: 1.5rem;border-radius: 10px;box-shadow: 0 2px 10px rgba(0,0,0,0.1)} .contact-method-icon{font-size: 2rem;margin-bottom: 1rem;display: block;color: #1976D2} .contact-method h3{color: #0D47A1;margin-bottom: 0.5rem;font-weight: 600} .contact-method p{color: #666;margin: 0} .contact-method a{color: #1976D2;text-decoration: none} .contact-method a:hover{text-decoration: underline} .contact-grid{display: grid;grid-template-columns: 1fr 1fr;gap: 3rem;margin-bottom: 3rem} .contact-form-section{background: white;border-radius: 15px;padding: 3rem;box-shadow: 0 4px 15px rgba(0,0,0,0.1)} .contact-form-section h2{color: #0D47A1;font-size: 1.8rem;margin-bottom: 1.5rem;font-weight: 600} .form-group{margin-bottom: 1.5rem} .form-group label{display: block;color: #333;font-weight: 500;margin-bottom: 0.5rem} .form-group input,.form-group select,.form-group textarea{width: 100%;padding: 0.75rem;border: 2px solid #E3F2FD;border-radius: 8px;font-size: 1rem;font-family: inherit;transition: border-color 0.3s ease} .form-group input:focus,.form-group select:focus,.form-group textarea:focus{outline: none;border-color: #1976D2} .form-group textarea{resize: vertical;min-height: 120px} .form-group select{cursor: pointer} .submit-btn{background: #1976D2;color: white;padding: 1rem 2rem;border: none;border-radius: 25px;font-size: 1rem;font-weight: 600;cursor: pointer;transition: background 0.3s ease;width: 100%} .submit-btn:hover{background: #0D47A1} .contact-info-section{display: flex;flex-direction: column;gap: 2rem} .response-time{background: linear-gradient(135deg,#E3F2FD 0%,#BBDEFB 100%);border-radius: 15px;padding: 2rem;text-align: center;margin-bottom: 3rem} .response-time h2{color: #0D47A1;font-size: 1.5rem;margin-bottom: 1rem;font-weight: 600} .response-time p{color: #666;margin-bottom: 1rem} .response-grid{display: grid;grid-template-columns: repeat(auto-fit,minmax(200px,1fr));gap: 1rem;margin-top: 1.5rem} .response-item{background: white;padding: 1rem;border-radius: 10px;box-shadow: 0 2px 10px rgba(0,0,0,0.1)} .response-item h4{color: #1976D2;font-weight: 600;margin-bottom: 0.5rem} .response-item p{color: #666;font-size: 0.9rem;margin: 0} .success-message{background: #E8F5E8;color: #2E7D32;padding: 1rem;border-radius: 8px;border-left: 4px solid #4CAF50;margin-bottom: 1rem;display: none} @media (max-width: 768px){.contact-grid{grid-template-columns: 1fr;gap: 2rem;margin-bottom: 2rem} .contact-form-section{padding: 2rem 1.5rem} .contact-form-section h2{font-size: 1.5rem} .contact-info-section{gap: 1.5rem} .response-time{padding: 1.5rem;margin-bottom: 2rem} .response-time h2{font-size: 1.3rem} .response-grid{grid-template-columns: 1fr;gap: 1rem} } @media (max-width: 480px){.contact-form-section{padding: 1.5rem 1rem} .response-time{padding: 1.25rem} } @media (max-width: 768px){.content-card{padding: 2rem 1.5rem;margin-bottom: 1.5rem} .content-card h1{font-size: 2rem;line-height: 1.3} .content-card h2{font-size: 1.3rem} .content-card h3{font-size: 1.1rem} .highlight,.contact-info{padding: 1.25rem;margin: 1.5rem 0} } @media (max-width: 480px){.content-card{padding: 1.5rem 1rem} .content-card h1{font-size: 1.75rem} .content-card h2{font-size: 1.2rem} .content-card h3{font-size: 1rem} .highlight,.contact-info{padding: 1rem} } .blog-post-footer{background: #f8f9fa;padding: 3rem 0} .blog-post-cta{text-align: center;background: linear-gradient(135deg,#0D47A1 0%,#1976D2 50%,#2196F3 100%);color: white;padding: 4rem 2rem;border-radius: 20px;margin: 4rem 0;box-shadow: 0 8px 30px rgba(13,71,161,0.3)} .blog-post-cta > *{position: relative;z-index: 2} .blog-post-cta h3{color: white;font-size: 2rem;margin-bottom: 1.5rem;font-weight: 600} .blog-post-cta p{color: rgba(255,255,255,0.9);font-size: 1.2rem;margin-bottom: 2.5rem;max-width: 500px;margin-left: auto;margin-right: auto} .blog-post-navigation{display: flex;justify-content: space-between;gap: 1rem} .nav-link{flex: 1;padding: 1rem;background: white;border-radius: 10px;text-decoration: none;color: #0d47a1;text-align: center;transition: transform 0.3s ease} .nav-link:hover{transform: translateY(-2px);text-decoration: none} .newsletter-signup{background: white;padding: 3rem;border-radius: 20px;text-align: center;margin-top: 3rem} .newsletter-form{display: flex;gap: 1rem;max-width: 400px;margin: 0 auto} .newsletter-form input{flex: 1;padding: 0.75rem;border: 2px solid #e0e0e0;border-radius: 25px;font-size: 1rem} .newsletter-form button{padding: 0.75rem 1.5rem;background: #1976d2;color: white;border: none;border-radius: 25px;font-weight: 600;cursor: pointer;transition: background 0.3s ease} .newsletter-form button:hover{background: #0d47a1} .tag-page{padding: 40px 0 80px;background: #f8f9fa} .tag-header{background: linear-gradient(135deg,#0D47A1 0%,#1976D2 50%,#2196F3 100%);color: white;padding: 120px 0 60px;text-align: center;margin: 0;position: relative;overflow: hidden} .tag-header h1{color: white;margin-bottom: 0.5rem;font-size: 2.5rem;font-weight: 700} .tag-header p{font-size: 1.2rem;max-width: 600px;margin: 0 auto;background: rgba(255,255,255,0.4);color: white;border: 1px solid rgba(255,255,255,0.5);padding: 0.75rem 1.5rem;border-radius: 25px;display: inline-block;backdrop-filter: blur(10px)} .back-link{display: inline-block;margin-top: 2rem;color: #1976d2;text-decoration: none;font-weight: 500} .back-link:hover{text-decoration: underline} .blog-image-center{width: 100%;max-width: 600px;height: auto;display: block;margin: 2rem auto;border-radius: 10px;box-shadow: 0 4px 15px rgba(0,0,0,0.1);transition: transform 0.3s ease} .blog-image-center:hover{transform: translateY(-2px);box-shadow: 0 6px 20px rgba(0,0,0,0.15)} .blog-image-small{width: 100%;max-width: 400px;height: auto;float: right;margin: 1rem 0 1rem 2rem;border-radius: 8px;box-shadow: 0 3px 12px rgba(0,0,0,0.1);transition: transform 0.3s ease} .blog-image-small:hover{transform: translateY(-2px)} .blog-infographic{width: 100%;max-width: 700px;height: auto;display: block;margin: 2.5rem auto;border-radius: 12px;box-shadow: 0 6px 20px rgba(0,0,0,0.15);transition: transform 0.3s ease} .blog-infographic:hover{transform: translateY(-3px);box-shadow: 0 8px 25px rgba(0,0,0,0.2)} .blog-image-inline{width: 100%;max-width: 300px;height: auto;float: left;margin: 0.5rem 1.5rem 1rem 0;border-radius: 8px;box-shadow: 0 3px 12px rgba(0,0,0,0.1)} .blog-image-full-width{width: 100%;height: auto;margin: 2rem 0;border-radius: 12px;box-shadow: 0 5px 18px rgba(0,0,0,0.12)} .clearfix::after{content: "";display: table;clear: both} @media (max-width: 768px){.blog-hero{padding: 100px 0 60px} .blog-hero h1{font-size: 2.5rem} .blog-hero p{font-size: 1.1rem;padding: 0 10px} .blog-grid{grid-template-columns: 1fr;gap: 1.5rem} .no-posts-message{padding: 3rem 1.5rem;margin: 0 15px} .no-posts-message h2{font-size: 1.75rem} .no-posts-message p{font-size: 1rem} .blog-post-title{font-size: 2rem} .blog-post-navigation{flex-direction: column} .newsletter-form{flex-direction: column} .blog-card-meta{flex-direction: column;align-items: flex-start;gap: 0.5rem} .blog-header h1{font-size: 2.5rem} .blog-image-center{max-width: 100%;margin: 1.5rem auto;border-radius: 8px} .blog-image-small{float: none;max-width: 100%;margin: 1.5rem auto;display: block} .blog-infographic{max-width: 100%;margin: 2rem auto;border-radius: 10px} .blog-image-inline{float: none;max-width: 100%;margin: 1rem auto;display: block} .blog-image-full-width{margin: 1.5rem 0;border-radius: 10px} } @media (max-width: 480px){.blog-hero h1{font-size: 2rem} .blog-hero p{font-size: 1rem} .blog-index{padding: 40px 0} .blog-post-content{padding: 2rem 0} .blog-post-header{padding: 80px 0 40px} .blog-post-title{font-size: 1.75rem} .blog-header h1{font-size: 2rem} .blog-header{padding: 80px 0 40px} }