/* ========================= HERO RESPONSIVE ========================= */ @media(max-width:1200px) { .hero-section { grid-template-columns: 1fr; } } @media(max-width:992px) { .hero-section { padding: 130px 30px 60px; gap: 50px; } .hero-title { font-size: clamp(2.8rem, 7vw, 4.5rem); } } @media(max-width:768px) { .hero-right { grid-template-columns: 1fr; } .summit-card { grid-column: span 1; flex-direction: column; gap: 30px; } .summit-price { text-align: left; } .hero-social-proof { flex-direction: column; align-items: flex-start; } } @media(max-width:576px) { .hero-section { padding: 120px 20px 50px; } .hero-title { font-size: 56px; } .hero-sub { font-size: 16px; } .btn-primary, .btn-secondary { width: 100%; justify-content: center; } } /* ========================= STATS BAR RESPONSIVE ========================= */ @media(max-width:1200px) { .stats-bar { flex-wrap: wrap; } .stats-item { flex: 0 0 33.33%; padding: 30px; } .stats-item:nth-child(3)::after { display: none; } } @media(max-width:768px) { .stats-bar { padding: 40px 20px; } .stats-item { flex: 0 0 50%; } .stats-item h2 { font-size: 48px; } .stats-item p { font-size: 15px; } } @media(max-width:576px) { .stats-item { flex: 0 0 100%; padding: 24px 0; } .stats-item::after { display: none; } } /* ========================= PROBLEM SECTION RESPONSIVE ========================= */ @media(max-width:1200px) { .problem-grid { grid-template-columns: repeat(2, 1fr); } } @media(max-width:992px) { .problem-section { padding: 80px 30px; } .problem-title { font-size: clamp(2.2rem, 6vw, 4rem); } } @media(max-width:768px) { .problem-grid { grid-template-columns: 1fr; } } @media(max-width:576px) { .problem-section { padding: 70px 20px; } .problem-card { padding: 28px; } .problem-card h3 { font-size: 22px; } .section-sub-text { font-size: 16px; } } /* ========================= FEATURES RESPONSIVE ========================= */ @media(max-width:1200px) { .features-bento { grid-template-columns: repeat(2, 1fr); } .bento-card.large { grid-column: span 2; } } @media(max-width:992px) { .features-section { padding: 80px 30px; } } @media(max-width:768px) { .features-bento { grid-template-columns: 1fr; } .bento-card.large { grid-column: span 1; } } @media(max-width:576px) { .features-section { padding: 70px 20px; } .bento-card { padding: 28px; } .bento-card h3 { font-size: 24px; } .section-sub-text { font-size: 16px; } } /* ========================= DASHBOARD RESPONSIVE ========================= */ @media(max-width:1200px) { .dashboard-section { grid-template-columns: 1fr; gap: 60px; } } @media(max-width:992px) { .dashboard-section { padding: 80px 30px; } } @media(max-width:576px) { .dashboard-section { padding: 70px 20px; } .dashboard-title { font-size: 52px; } .redirect-chip { font-size: 10px; } .dash-stats { grid-template-columns: 1fr; } .dash-header { flex-direction: column; align-items: flex-start; gap: 12px; } } /* ========================= JOIN RESPONSIVE ========================= */ @media(max-width:1200px) { .join-cards { grid-template-columns: 1fr; max-width: 620px; } .join-card.featured-join { transform: none; } .join-card.featured-join:hover { transform: translateY(-5px); } } @media(max-width:992px) { .join-section { padding: 80px 30px; } } @media(max-width:576px) { .join-section { padding: 70px 20px; } .join-title { font-size: 52px; } .join-subtext { font-size: 16px; } .join-card { padding: 30px 24px; } .join-card h3 { font-size: 24px; } .join-features { gap: 14px; flex-direction: column; } } /* ========================= PLANS RESPONSIVE ========================= */ @media(max-width:1200px) { .plans-grid { grid-template-columns: 1fr; max-width: 620px; margin: 0 auto; } .featured-plan { transform: none; } .featured-plan:hover { transform: translateY(-5px); } } @media(max-width:992px) { .plans-section { padding: 80px 30px; } .plans-header { flex-direction: column; align-items: flex-start; } } @media(max-width:576px) { .plans-section { padding: 70px 20px; } .plans-title { font-size: 52px; } .plan-card-v3 { padding: 34px 24px; } .plan-price h3 { font-size: 48px; } } /* ========================= ABOUT RESPONSIVE ========================= */ @media(max-width:1200px) { .about-wrapper { grid-template-columns: 1fr; } } @media(max-width:992px) { .about-section { padding: 80px 30px; } } @media(max-width:768px) { .about-stats-grid { grid-template-columns: 1fr; } } @media(max-width:576px) { .about-section { padding: 70px 20px; } .about-title { font-size: 52px; } .about-text { font-size: 16px; } .about-info-box { padding: 18px; } .about-quote-card { padding: 28px; } .about-quote-card h4 { font-size: 20px; } } /* ========================= ORG RESPONSIVE ========================= */ @media(max-width:1200px) { .org-grid { grid-template-columns: repeat(2, 1fr); } } @media(max-width:992px) { .org-section { padding: 80px 30px; } .org-top { flex-direction: column; gap: 34px; } } @media(max-width:768px) { .org-grid { grid-template-columns: 1fr; } } @media(max-width:576px) { .org-section { padding: 70px 20px; } .org-title { font-size: 46px; } .org-card { padding: 26px 20px; } } /* ========================= CERT RESPONSIVE ========================= */ @media(max-width:1200px) { .cert-summit-section { grid-template-columns: 1fr; } } @media(max-width:992px) { .cert-v3, .summit-v3 { padding: 80px 30px; } } @media(max-width:576px) { .cert-v3, .summit-v3 { padding: 70px 20px; } .cert-title, .summit-title { font-size: 48px; } .cert-text, .summit-text { font-size: 16px; } .summit-row { flex-direction: column; align-items: flex-start; } } /* contact RESPONSIVE */ @media(max-width:991px) { .medtech-contact-section .main-heading { font-size: 45px; } .medtech-contact-section .contact-form-box { margin-top: 40px; } .medtech-contact-section .info-text { font-size: 18px; } } @media(max-width:576px) { .medtech-contact-section .main-heading { font-size: 36px; } .medtech-contact-section .contact-form-box { padding: 25px; } } /* ========================= FOOTER RESPONSIVE ========================= */ @media(max-width:1200px) { .footer-top { grid-template-columns: 1fr 1fr 1fr; } } @media(max-width:992px) { .main-footer { padding: 50px 30px; } .footer-top { grid-template-columns: 1fr 1fr; gap: 40px; } .footer-bottom { flex-direction: column; align-items: flex-start; } } @media(max-width:768px) { .footer-top { grid-template-columns: 1fr; } } @media(max-width:576px) { .main-footer { padding: 40px 20px; } }