/* =========================================================
   Responsive overrides for Amino Tech
   Breakpoints follow Bootstrap 4 grid:
   >=1500 / 1200-1499 / 992-1199 / 768-991 / 576-767 / <576 / <400
   ========================================================= */

/* 1. Fluid Typography & Global Safety Net */
html {
    font-size: clamp(14px, 1.2vw, 16px);
    overflow-x: hidden;
}

body {
    overflow-x: hidden;
}

* {
    box-sizing: border-box;
}

/* Any <img> without an explicit responsive class stays inside its
   container instead of overflowing (fixes icon-inline / icon-absolute
   icons that ship without .img-fluid in the markup). Elements that
   need a guaranteed fixed box (hero collage, product bottle, quality
   showcase image) already set explicit width/height per breakpoint
   below, so capping max-width here only ever shrinks, never distorts. */
img {
    max-width: 100%;
    height: auto;
}

.main-images img,
.main-product-img,
.product-bottle {
    height: auto; /* explicit per-breakpoint rules below still apply */
}

/* 2. Layout & Containers */
@media (min-width: 1500px) {
    .container { max-width: 1440px; }
    .main-banner {
    padding: 0 0 0 4rem;
}

.main-content h1 {
    font-size: 3rem;
}
}
@media (max-width: 1446px){
            .main-banner {
    padding: 0 0 0 4rem;
}

.main-content h1 {
    font-size: 3rem;
}
}

section {
    padding: 4rem 0; /* Reduced padding for mobile */
}

@media (max-width: 1100px){
    .main-content p {
    width: 80%;
}
}

/* 3. Header & Navigation */
@media (max-width: 991px) {
    header {
        padding: 0.5rem 15px;
    }
    .navbar-nav {
        padding: 1.5rem 0;
        gap: 1rem;
        align-items: flex-start;
    }
    .form-inline ul {
        justify-content: flex-start;
        margin-top: 1rem;
    }
    .navbar-brand img {
        max-height: 32px;
        width: auto;
    }
    .animate-float,
    .animate-float-delayed {
        animation: unset;
    }
    .main-1,.main-2,.main-3,.main-4 {
        position: relative;
        all: unset;
    }

}

@media (max-width: 575px) {
    .navbar-brand img {
        max-height: 26px;
    }
}

/* Announcement bar: let it wrap instead of clipping on mid-size screens */
@media (max-width: 767px) {
    .second-flex {
        flex-direction: column;
        gap: 0.5rem;
        text-align: center;
    }
    .second-flex p {
        flex-wrap: wrap;
        justify-content: center;
        text-align: center;
    }
}

@media (max-width: 400px) {
    .second-flex p,
    .second-flex p span {
        font-size: 0.75rem;
    }
    .countdown {
        font-size: 0.75rem;
        padding: 0.4rem 0.75rem;
    }
}

/* 4. Main Banner (Hero) Fixes */
@media (min-width: 992px) and (max-width: 1399px) {
    .main-banner { padding-left: 5rem; }
}

@media (min-width: 992px) and (max-width: 1199px) {
    .main-banner { padding-left: 2.5rem; }
    .main-content h1 { font-size: 3rem; }
}

@media (max-width: 991px) {
    .main-banner {
        padding: 3rem 1rem;
        height: auto;
        overflow: visible;
    }
    .main-banner .row {
        flex-direction: column-reverse;
    }
    .main-content {
        text-align: center;
        margin-top: 3rem;
    }
    .main-content h1 {
    font-size: 3.2rem;
}

.main-content .themeBtn {
    margin: auto;
}
    .main-content p {
        width: 100%;
        margin: 0 auto 2rem;
    }
    .main-images {
        height: auto;
        width: 100%;
        border-radius: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: row;
        padding: 4em 1rem;
    }
    .main-1 img, .main-2 img, .main-3 img, .main-4 img {
        max-height: 300px;
        width: auto;
        object-fit: contain;
    }
    .main-1 { left: 5%; }
    .main-2 { right: 10%; }
}

@media (max-width: 575px) {
    .main-images { height: 350px; }
    .main-1 img { height: 220px; }
    .main-2 img { height: 250px; }
    .main-4 img { height: 180px; }
}

@media (max-width: 400px) {
    .main-images { height: 300px; }
    .main-1 img { height: 180px; }
    .main-2 img { height: 200px; }
    .main-3 img { height: 190px; }
    .main-4 img { height: 150px; }
    .main-content h1 { font-size: 2.1rem; }
    .main-content p { font-size: 1rem; }
}

/* 5. Guarantee Section */
@media (min-width: 992px) and (max-width: 1199px) {
    .content-wrapper { max-width: 100%; }
}

@media (max-width: 991px) {
    .left-column { height: 400px; }
    .right-column { margin-left: 0; padding: 3rem 1rem; }
    .content-wrapper { padding-left: 0; max-width: 100%; }
    .guarantee-list { margin-left: 0; }
    .animo-div { padding-left: 0; text-align: center; }
    .stripe-green::before { display: none; } /* Remove side stripes on mobile to prevent overflow */
}

@media (max-width: 575px) {
    .card-left { flex-basis: 64px; }
    .icon-circle { width: 36px; height: 36px; }
    .card-right { padding: 12px 14px; }
    .card-title { font-size: 1rem; }
    .card-subtitle { font-size: 0.875rem; }
}

/* 6. Quality Verification Section (The Complex Part) */

/* Small laptops (992-1199): columns sit side-by-side but are narrower
   than the desktop design's fixed-pixel image/circles, so shrink them
   proportionally to stop them spilling out of their column. */
@media (min-width: 992px) and (max-width: 1199px) {
    .main-product-img {
        width: 320px !important;
        height: 320px !important;
    }
    .circle-1 { width: 170px; height: 170px; }
    .circle-2 { width: 300px; height: 300px; }
    .circle-3 { width: 420px; height: 420px; }
    .card-purity { min-width: 150px; padding: 0.75rem 1rem; }
    .stats-wrapper { gap: 1rem; }
    .custom-tabs { flex-wrap: wrap; }
}

@media (max-width: 991px) {
    .quality-verification-section .row {
        flex-direction: column;
    }
    .col-content { padding-right: 15px !important; }
    .stats-wrapper { justify-content: space-between; flex-wrap: wrap; row-gap: 1rem; }
    .visual-showcase {
        margin-top: 3rem;
        padding-top: 100%; /* Maintain square aspect */
    }
    .main-product-img {
        height: 350px !important;
        width: 350px !important;
    }
    .circle-1 { width: 180px; height: 180px; }
    .circle-2 { width: 320px; height: 320px; }
    .circle-3 { width: 460px; height: 460px; }
    .custom-tabs { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 10px; -webkit-overflow-scrolling: touch; }
    .custom-tabs .nav-item { flex-shrink: 0; }
    .cta-row {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 1rem;
    }
    .cta-row .themeBtn { width: 100%; text-align: center; justify-content: center; }
    .cta-row .coa-notice { margin-left: 0 !important; }
}

@media (max-width: 767px) {
    .stats-wrapper { gap: 0.75rem; }
    .stat-divider { display: none; }
    .stat-item { flex: 1 1 auto; flex-direction: column !important; align-items: flex-start !important; gap: 0.25rem !important; }
}

@media (max-width: 575px) {
    .stat-number { font-size: 1.2rem; }
    .stat-label { font-size: 0.75rem; }
    .main-product-img {
        height: 280px !important;
        width: 280px !important;
    }
    .circle-1 { width: 140px; height: 140px; }
    .circle-2 { width: 250px; height: 250px; }
    .circle-3 { width: 340px; height: 340px; }
    .card-proof { width: 95%; bottom: 2%; padding: 0.75rem 1rem; }
    .card-purity { min-width: 140px; top: 6%; right: 4%; }
    .card-purity .card-title,
    .card-proof .card-title { font-size: 0.8rem; }
}

@media (max-width: 400px) {
    .main-product-img { height: 220px !important; width: 220px !important; }
    .circle-3 { width: 280px; height: 280px; }
    .circle-2 { width: 210px; height: 210px; }
}

/* 7. Success Ecosystem */
@media (min-width: 992px) and (max-width: 1199px) {
    .feature-card { padding: 24px; }
    .relative-card { min-height: 220px; }
}

@media (max-width: 991px) {
    .section-main-title { font-size: 24px; }
    .text-restricted-1, .text-restricted-2, .text-restricted-3 { max-width: 100%; }
    .feature-card { padding: 20px; }
    .full-width-card .action-wrapper {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }
    .full-width-card .action-wrapper img {
        align-self: flex-end;
    }
}

@media (max-width: 575px) {
    .flex-row-card {
        padding: 20px;
    }
    .flex-row-card .card-heading {
        max-width: 65%;
        font-size: 1.1rem;
    }
    .icon-inline {
        max-width: 60px;
        height: auto;
    }
    .card-heading { font-size: 1.2rem; }
    .relative-card { padding-bottom: 90px; }
    .icon-absolute { max-width: 80px; }
}

/* 8. Why Choose Section */
@media (max-width: 767px) {
    .why-choose-section .section-title { font-size: 2rem; }
    .why-choose-section .icon-box { margin-bottom: 15px; }
}

@media (max-width: 575px) {
    .why-choose-section .feature-card {
        padding: 24px 20px;
        text-align: center;
    }
    .why-choose-section .icon-box { margin-left: auto; margin-right: auto; }
}

/* 9. Auth Banner Section */
@media (max-width: 575px) {
    .auth-heading { font-size: 1.6rem; }
    .auth-actions {
        flex-direction: column;
        width: 100%;
        gap: 0.75rem;
    }
    .auth-actions .btn:not(:last-child) {
        margin-right: 0;
    }
    .auth-actions .themeBtn {
        width: 100%;
        justify-content: center;
    }
}

/* 10. FAQ Section */
@media (max-width: 767px) {
    .faq-main-title { font-size: 28px; }
    .faq-question-text { font-size: 1rem; }
    .faq-answer-body { padding-right: 0; }
}

@media (max-width: 575px) {
    .faq-question-header { gap: 0.75rem; }
    .faq-icon-circle { flex-shrink: 0; }
}

/* 11. Research/Newsletter Section */
@media (min-width: 992px) and (max-width: 1199px) {
    .amino-main-heading { font-size: 2rem; }
}

@media (max-width: 991px) {
    .amino-main-heading { font-size: 1.8rem; }
    .amino-subscribe-form {
        width: 100% !important;
        max-width: 100%;
        margin-top: 1.5rem;
    }
    .newsletter-title { font-size: 1.5rem; }
    .float-vial-left, .float-vial-right { display: none; }
}

@media (max-width: 575px) {
    .amino-main-heading { font-size: 1.5rem; }
    .amino-subscribe-form {
        flex-direction: column;
        height: auto;
        border-radius: 15px;
        padding: 15px;
    }
    .amino-subscribe-form .form-control {
        padding: 10px;
        text-align: center;
    }
    .amino-subscribe-form .subscribe-btn,
    .amino-subscribe-form button {
        width: 100%;
        margin-top: 10px;
    }
    .amino-newsletter-card { padding: 1.5rem !important; }
}

/* 12. Footer */
@media (max-width: 991px) {
    .amino-footer-wrapper .col-md-3,
    .amino-footer-wrapper .col-md-2,
    .amino-footer-wrapper .col-md-4 {
        margin-bottom: 2rem;
    }
    .fda-warning-box { padding: 15px; }
    .trust-badges { flex-direction: column; gap: 10px; align-items: flex-start !important; }
    .payment-methods-container { flex-wrap: wrap; justify-content: center !important; gap: 0.5rem; }
}

@media (max-width: 575px) {
    .copyright-text { text-align: center; }
    .amino-footer-wrapper .row.py-4 { text-align: center; }
    .amino-footer-wrapper .col-md-6 { text-align: center !important; }
    .trust-badges { align-items: center !important; }
}

/* 13. Helper Classes */
@media (max-width: 767px) {
    /* Buttons that share a row with another element (auth-actions,
       cta-row) are switched to a stacked column layout above, so it
       is safe to make every themeBtn full-width here without any
       button overlapping its neighbour. */
    .themeBtn {
        width: 100%;
        justify-content: center;
        padding: 0.8rem 1.5rem;
    }

    /* Center text on mobile for specific headings if needed */
    .mobile-text-center {
        text-align: center;
    }
}

/* Fix for horizontal scroll caused by GSAP animations or AOS */
[data-aos] {
    pointer-events: none;
}
.aos-animate {
    pointer-events: auto;
}

/* PRELOADER RESPONSIVE */
@media (max-width: 575px) {
    .progress-wrap { width: 80%; }
    .counter { font-size: 5rem; right: 1rem; bottom: 1rem; }
}

/* =========================================================
   INNER PAGES RESPONSIVE FIXES
   (Product Listing, Product Detail, Membership, Partner
   Program, Contact/FAQ/Legal "respond-banner" hero, Return,
   Shipping, Certificate, Research-Use)
   ========================================================= */

/* 14. Respond Banner Hero (used on contact, faq, privacy, terms,
   disclaimer, return, shipping-info, research-use, certificate) */
@media (max-width: 991px) {
    .respond-sec { padding: 4rem 0; }
    .respond-banner h1 { font-size: clamp(2.2rem, 7vw, 3rem); }
    .respond-banner p { width: 100%; }
    .shipping-page { padding: 4rem 0 !important; }
    .disclaimer-sec { padding: 4rem 0 !important; }
    /* Floating decorative vial images: shrink so they can't push the
       hero section wider than the viewport. */
    .respond-1 img { height: 160px; }
    .respond-2 { display: none; }
    .respond-3 img { height: 150px; }
    .respond-4 { height: 120px; }
    .respond-4 img { height: 120px; }
}

@media (max-width: 575px) {
    .respond-sec { padding: 3rem 0; }
    .respond-banner h3 { font-size: 0.75rem; padding: 0.6rem 1rem 0.4rem 1.75rem; }
    .respond-banner h1 { font-size: clamp(1.8rem, 9vw, 2.4rem); margin-top: 0.75rem; }
    .respond-banner p { font-size: 1rem; }
    .shipping-page { padding: 2.5rem 0 !important; }
    .disclaimer-sec { padding: 2.5rem 0 !important; }
    /* On very small screens the floating vials mostly just add visual
       noise around the heading, so hide all but one for clarity. */
    .respond-1, .respond-4 { display: none; }
    .respond-3 img { height: 110px; }
}

/* 15. Product Listing (product.php, research.php) */
@media (max-width: 767px) {
    .product-listing-section__title { font-size: 26px; }
}

@media (max-width: 575px) {
    .product-listing-section__title { font-size: 22px; }
    .product-listing-section__search-wrapper { max-width: 100%; }
    .product-listing-section .col-md-5.text-md-right {
        justify-content: flex-start !important;
        margin-top: 1rem;
    }
}

/* 16. Product Detail Pages */
@media (max-width: 991px) {
    .product-image-card { padding: 2rem !important; }
}

@media (max-width: 767px) {
    .product-image-card { padding: 1.5rem !important; }
    /* Quantity selector + stock status can get tight side-by-side once
       fonts scale up on small phones, so stack them. */
    .qty-input-group { flex-wrap: wrap; }
}

@media (max-width: 575px) {
    .product-image-card { padding: 1.25rem !important; }
    /* Trust badge row (QC'D / LAB / SAME DAY) */
    .border-top.border-bottom.py-3 .fs-15 { font-size: 0.8rem; }
    .border-top.border-bottom.py-3 .text-xs { font-size: 0.65rem; }
}

/* 17. Membership Page */
@media (max-width: 991px) {
    .pricing-plan-section { padding-top: 3rem; }
    .membership-signup-section { padding: 3rem 0; }
    .points-rewards-section { padding: 4rem 0; }
}

@media (max-width: 575px) {
    .pricing-plan-section { padding-top: 2rem; }
    .membership-signup-section { padding: 2rem 0; }
    .points-rewards-section { padding: 2.5rem 0; }
    .membership-signup-section .membership-card { padding: 24px 18px; }
    .membership-signup-section .membership-title { font-size: 1.6rem; }
    .membership-signup-section .membership-plan-box {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 0.5rem;
    }
    .pricing-card { padding: 32px 18px 24px; }
    .price-main { font-size: 34px; }
}

/* 18. Partner Program Page */
@media (max-width: 991px) {
    .referral-content { padding: 3rem 1.5rem; }
    .referral-title { font-size: 2.4rem; }
    .referral-right-col { padding: 3rem 1.5rem; min-height: 320px; }
    /* Floating bottle images are decorative and, at fixed pixel widths,
       will overlap the referral card once the column narrows. */
    .floating-bottle { display: none; }
    .referral-card { width: 100%; max-width: 340px; }
    .example-referral-section .referral-card {
        width: 100%;
        max-width: 100%;
        padding: 32px 24px;
    }
    .rv-percentage { font-size: 3rem; }
    .step-number { font-size: 2.75rem; }
    .referrals-section .stat-value { font-size: 34px; }
}

@media (max-width: 575px) {
    .referral-content { padding: 2.5rem 1rem; }
    .referral-title { font-size: 1.9rem; }
    .referral-desc { font-size: 1rem; margin-bottom: 2rem; }
    .btn-referral { width: 100%; justify-content: center; }
    .referral-stats .stat-item { margin-bottom: 1.25rem; }
    .example-referral-section .referral-card { padding: 24px 18px; }
    .example-referral-section .referral-item {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 0.25rem;
        padding: 16px 0;
    }
    .example-referral-section .referral-total {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 0.25rem;
    }
    .rv-percentage { font-size: 2.5rem; }
    .referral-value-section .rv-card { padding: 32px 20px; }
    .step-number { font-size: 2.25rem; }
}

/* 19. Return / Damage Protection Page */
@media (max-width: 991px) {
    .dp-main-card { padding: 2.5rem 1.5rem; }
}

@media (max-width: 575px) {
    .dp-main-card { padding: 1.75rem 1.25rem; }
    .dp-main-title { font-size: 1.3rem; }
    .replacement-timeline-section .timeline-item {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 0.2rem;
    }
    .er-card { padding: 1.5rem !important; }
}

/* 20. Shipping Info Page */
@media (max-width: 991px) {
    .ship-opt-section { padding-top: 3rem; padding-bottom: 3rem; }
    .ship-opt-card-highlighted { transform: none; }
    .info-features-section { padding: 3rem 0 !important; }
}

@media (max-width: 575px) {
    .ship-opt-section { padding-top: 2rem; padding-bottom: 2rem; }
    .ship-opt-price-text { font-size: 20px; }
    .info-features-card { padding: 24px; }
    .info-features-section { padding: 2rem 0 !important; }
}

/* 21. Certificate of Analysis Page */
@media (max-width: 991px) {
    .coa-access-section { padding: 3rem 0 !important; }
}

@media (max-width: 575px) {
    .coa-access-section { padding: 2rem 0 !important; }
    .coa-heading { font-size: 1.5rem; }
}

/* 22. Research Use Page */
@media (max-width: 991px) {
    .researcher-responsibility-section { padding: 3rem 0 !important; }
}

@media (max-width: 575px) {
    .researcher-responsibility-section { padding: 2rem 0 !important; }
    .responsibility-title { font-size: 1.4rem; }
    .rqs-highlight { font-size: 28px; }
}

/* 23. Age Verification Gate (extra safety below existing inline
   breakpoint at 768px in age-verify.php) */
@media (max-width: 400px) {
    .rv-card { padding: 1.75rem 1.25rem; }
    .rv-content { max-width: 100%; }
    .section-main-title {
    font-size: 21px;
    margin: 0 0 1rem;
}

.section-title {
    font-size: 12px;
}

.why-choose-section .section-title {
    font-size: 14px;
}
.faq-main-title {
    font-size: 24px;
}
}