/* =============================================================================
   Georgia Mechanical — responsive.css
   Refactored for readability, maintainability, and scalability.
   Layout, spacing, and visual output are 100% preserved.

   All token references use CSS variables defined in main.css (:root).
   =============================================================================

   Breakpoints
   ─────────────────────────────────────────────────────────────────────────────
   ≤ 1600px  —  (reserved, no active rules)
   ≤ 1500px  —  (reserved, no active rules)
   ≤ 1299px  —  Large desktops
   ≤ 1199px  —  Medium desktops
   ≤  991px  —  Tablets / small laptops
   ≤  767px  —  Large phones / landscape tablets
   ≤  575px  —  Small phones (CTA)
   ≤  479px  —  Extra-small phones
   ≤  383px  —  Very small devices
   ───────────────────────────────────────────────────────────────────────────── */


/* =============================================================================
   ≤ 1600px  (reserved — no active rules)
   ============================================================================= */
@media (max-width: 1600px) {}


/* =============================================================================
   ≤ 1500px  (reserved — no active rules)
   ============================================================================= */
@media (max-width: 1500px) {}


/* =============================================================================
   ≤ 1299px  — Large Desktops
   ============================================================================= */
@media (max-width: 1299.98px) {

    /* Membership Highlight: remove left indent and tighten max-width */
    .membership-highlight-des {
        padding-left: 0;
        max-width: 650px;
    }
    .mission-statement-content{
        margin-left: 0;
    }
}


/* =============================================================================
   ≤ 1199px  — Medium Desktops
   ============================================================================= */
@media (max-width: 1199.98px) {

    .membership-highlight-des {
        max-width: 500px;
    }
    .membership-highlight-img {
        margin-bottom: 0;
    }
    .mission-statement-area {
        padding: 66px 0 80px;
    }
    .owl-nav {
        left: -75px;
        width: calc(100% + 150px);
    }

}


/* =============================================================================
   ≤ 991px  — Tablets / Small Laptops
   ============================================================================= */
@media (max-width: 991.98px) {

    /* ── Typography Scale ── */
    h1 { font-size: 50px; }
    h2 { font-size: 40px; }

    h3,
    .inner-text,
    .banner-content-inner p { font-size: 36px; }

    h4,
    .author-information h5,
    .testimonial-content-wrapper blockquote { font-size: 28px; }

    h5 { font-size: 22px; }

    .btn-1 {
        font-size: 16px;
        padding: 8px 15px;
        min-width: auto;
    }

    /* ── Banner ── */
    .banner-content {
        padding: 8vw 5vw;
    }
    .banner-content-inner {
        margin: 50px 0 30px;
    }
    

    /* ── Section Vertical Rhythm ── */
    .cta-area,
    .our-members-area,
    .membership-highlight-area,
    .mission-statement-area {
        padding: 70px 0;
    }
    .our-members-area{
        padding-bottom:100px;
    }

    /* ── Membership Highlight ── */
    /* Reverse column order so image appears below text on tablet */
    .membership-highlight-area .container .row {
        flex-direction: column-reverse;
    }

    .membership-highlight-des {
        max-width: 100%;
    }

    .membership-highlight-inner-des p,
    .cta-inner-info p,
    .mission-statement-inner-content p {
        font-size: 20px;
    }

    .membership-highlight-inner-des p,
    .mission-statement-content h2,
    .mission-statement-inner-content p {
        margin-bottom: 15px;
    }

    .membership-highlight-inner-des {
        margin-bottom: 30px;
    }

    .membership-highlight-des a,
    .testimonial-content-wrapper blockquote {
        margin-bottom: 15px;
    }

    .membership-highlight-img {
        margin-right: auto;
    }

    /* ── Mission Statement ── */
    
    .mission-statement-content .btn-1 {
        margin-top: 30px;
    }

    /* ── Earnings ── */
    .earnings-area {
        padding-top: 0;
    }

    .earnings-content-box {
        margin-right: auto;
        margin-left: auto;
        max-width: 100%;
        padding: 10vw 5vw;
    }

    .earnings-table-info h6 {
        margin-bottom: 10px;
    }
    .earnings-inner-content {
        margin-top: 15px;
    }
    /* ── CTA ── */
    .cta-inner-content {
        gap: 30px;
        margin-top: 30px;
    }
    .owl-nav {
        left: 0;
        width: 100%;
        justify-content: center;
        top: auto;
        transform: translateY(50%);
        gap: 20px;
        bottom: -30px;
    }

}


/* =============================================================================
   ≤ 767px  — Large Phones / Landscape Tablets
   ============================================================================= */
@media (max-width: 767.98px) {

    /* ── Typography Scale ── */
    h1 { font-size: 40px; }
    h2 { font-size: 36px; }

    h3,
    .inner-text { font-size: 30px; }

    h4,
    .author-information h5,
    .testimonial-content-wrapper blockquote,
    .banner-content-inner p { font-size: 24px; }

    h5 { font-size: 20px; }

    /* ── banner section ── */
    .banner-content-inner {
        margin: 35px 0 25px;
    }
    /* ── Section Vertical Rhythm ── */
    .cta-area,
    .our-members-area,
    .membership-highlight-area,
    .mission-statement-area {
        padding: 50px 0;
    }
    .our-members-area {
        padding-bottom: 80px;
    }

    /* ── Earnings ── */
    .earnings-inner-content p {
        font-size: 20px;
    }

    .earnings-table-info h6,
    .earnings-table-info ul li {
        font-size: 18px;
    }

    .earnings-table-info ul li {
        margin-bottom: 10px;
    }

    .earnings-table-info {
        min-width: 100px;
        padding-bottom: 0;
    }

    .earnings-table {
        gap: 30px;
    }

    /* ── Footer ── */
    /* Stack footer columns on smaller screens */
    .footer-top-wrapper .col {
        flex: 1 0 100%;
    }

    .footer-right-content br {
        display: none;
    }

    .footer-top-wrapper {
        margin-bottom: 30px;
    }
	
	.foot_cont {
		text-align: center;
	}

}


/* =============================================================================
   ≤ 575px  — Small Phones (CTA adjustments)
   ============================================================================= */
@media (max-width: 575.98px) {

    /* ── CTA ── */
    .cta-inner-content {
        gap: 20px;
        margin-top: 20px;
    }

    .cta-inner-info .btn-1 {
        margin-bottom: 15px;
    }
    .owl-nav button {
        height: 35px;
        width: 35px;
    }
    .owl-nav button svg{
        height: 20px;
        width: 20px;
    }

}


/* =============================================================================
   ≤ 479px  — Extra-Small Phones
   ============================================================================= */
@media (max-width: 479.98px) {

    /* ── Typography Scale ── */
    h1 { font-size: 36px; }
    h2 { font-size: 30px; }

    h3,
    .inner-text { font-size: 24px; }

    h4,
    .author-information h5,
    .testimonial-content-wrapper blockquote,
    .banner-content-inner p { font-size: 20px; }

    .cta-inner-info p,
    .mission-statement-inner-content p,
    .membership-highlight-inner-des p { font-size: 18px; }
    /* banner section */
    .banner-content-inner {
        margin: 25px 0;
    }

    /* ── Earnings — stack table columns vertically ── */
    .earnings-table {
        gap: 20px;
    }
	


    /* ── Footer — stack all footer items ── */
    .copy-right-item-area .col,
    .socials-item-area .col {
        flex: 1 0 100%;
    }

    .socials-link-wrapper {
        justify-content: center;
        margin-bottom: 15px;
    }

    .copy-right-caption,
    .ncua-caption,
    .other-link-wrapper {
        text-align: center !important;
    }

}


/* =============================================================================
   ≤ 383px  — Very Small Devices
   ============================================================================= */
@media (max-width: 383.98px) {

    /* ── Typography Scale ── */
    h1 { font-size: 32px; }
    h2 { font-size: 26px; }

    h3,
    .inner-text { font-size: 22px; }

    h4,
    .banner-content-inner p { font-size: 20px; }

}