/* =========================================================
   RESPONSIVE.CSS  (FINAL — replace the whole old file with this)
   Specificity-boosted with "html body " prefix on every selector
   so it wins regardless of CSS load order (ConstructionCSS.css /
   Header&Footer.css load AFTER this file and have their own
   !important rules which were overriding the old fixes).
   ========================================================= */

html, body { max-width: 100%; overflow-x: hidden !important; }
html body img, html body video, html body iframe, html body table { max-width: 100% !important; height: auto; }
* { box-sizing: border-box; }

@media (max-width: 1200px) {
  html body .container { max-width: 960px !important; }
  html body .card-grid { grid-template-columns: repeat(2, 1fr) !important; }
  html body .team__grid { grid-template-columns: repeat(2, 1fr) !important; }
  html body .cardsG { grid-template-columns: repeat(2, 1fr) !important; }
}

@media (max-width: 991px) {
  html body .container { width: 100% !important; max-width: 100% !important; padding-left: 15px !important; padding-right: 15px !important; }
  html body .topmain_section { flex-wrap: wrap !important; }
  html body .top_right { flex-wrap: wrap !important; gap: 10px !important; }
  html body .link_button { flex-wrap: wrap !important; gap: 8px !important; }
  html body .header_mid_section { flex-wrap: wrap !important; gap: 15px !important; padding: 12px 0 !important; }
  html body .header_mid_right { flex-wrap: wrap !important; row-gap: 10px !important; gap: 15px !important; }
  html body .mid_cart_section { gap: 10px !important; }
  html body .stellarnav.desktop { display: none !important; }
  html body .navbar-custom { display: block !important; }
  html body .fixed-top { left: 0 !important; right: 0 !important; width: 100% !important; }
  html body .navbar-custom .navbar-nav { min-width: 100% !important; width: 100% !important; max-width: 100% !important; }
  html body .menu_mainsection { overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; }
  html body .stellarnav { width: 100% !important; justify-content: flex-start !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; }
  html body .stellarnav ul { flex-wrap: nowrap !important; justify-content: flex-start !important; width: max-content !important; }
  html body .stellarnav li { flex: 0 0 auto !important; }
  html body .stellarnav li a { padding: 14px 12px !important; font-size: 13px !important; }
  html body .stellarnav ul ul { position: static !important; box-shadow: none !important; display: none !important; }
  html body .hero { padding: 80px 0 40px !important; }
  html body .hero-text { margin-top: 15% !important; margin-left: 5% !important; max-width: 90% !important; }
  html body .hero-text h1 { font-size: 34px !important; line-height: 1.3 !important; }
  html body .hero-text p { font-size: 16px !important; }
  html body .hero-bottom { flex-wrap: wrap !important; max-height: none !important; margin: 40px 20px !important; padding: 20px !important; }
  html body .hero-bottom .col-4 { flex: 0 0 100% !important; max-width: 100% !important; width: 100% !important; }
  html body .box { min-width: 100% !important; }
  html body .col1 { border-right: none !important; border-bottom: 1px solid #374151 !important; padding-bottom: 10px !important; margin-bottom: 10px !important; }
  html body .comparison-grid { flex-direction: column !important; width: 100% !important; }
  html body .card-left, html body .card-right { border-radius: 24px !important; margin-right: 0 !important; width: 100% !important; }
  html body .card-right { height: auto !important; margin-top: 30px !important; }
  html body .clarity_guesswork_section .container { padding-left: 20px !important; padding-right: 20px !important; }
  html body .ava-top { flex-direction: column !important; align-items: flex-start !important; gap: 15px !important; }
  html body .ava-right { width: 100% !important; }
  html body .ava-right button { width: 100% !important; margin-top: 15px !important; }
  html body .ava-cards { flex-direction: column !important; }
  html body .transparency-container { flex-direction: column !important; text-align: center !important; gap: 30px !important; }
  html body .stats-section { flex-wrap: wrap !important; height: auto !important; max-height: none !important; }
  html body .card { max-width: 100% !important; flex: 1 1 100% !important; width: 100% !important; }
  html body .ET-buttons { flex-direction: column !important; align-items: center !important; }
  html body .bim-container { flex-direction: column !important; gap: 30px !important; }
  html body .bim-stats { flex-direction: column !important; }
  html body .bim-buttons { flex-direction: column !important; }
  html body .card-grid { grid-template-columns: repeat(2, 1fr) !important; }
  html body .service-card { width: 100% !important; max-width: 100% !important; height: auto !important; min-height: unset !important; }
  html body .service-card .listItem, html body .service-card.active .listItem { height: auto !important; }
  html body .cta-bar { flex-direction: column !important; gap: 10px !important; text-align: center !important; padding: 20px !important; }
  html body .tk-grid, html body .tk-bottom { flex-direction: column !important; }
  html body .tk-left, html body .tk-right, html body .tk-box { width: 100% !important; }
  html body .tabs { flex-wrap: wrap !important; gap: 10px !important; }
  html body .tk-stats { flex-wrap: wrap !important; gap: 15px !important; }
  html body .tk-actions { flex-direction: column !important; align-items: stretch !important; }
  html body .projects-grid { flex-wrap: wrap !important; }
  html body .projects-grid .project-card { flex: 0 0 calc(50% - 12px) !important; max-width: calc(50% - 12px) !important; }
  html body .project-card1 { flex-direction: column !important; }
  html body .image-side { min-height: 260px !important; }
  html body .content-side { padding: 25px !important; }
  html body .HL-buttons { flex-direction: column !important; }
  html body .calc-container { padding: 16px 20px !important; }
  html body .estimate-box { padding: 16px 20px !important; margin-top: 15px !important; }
  html body .package-container { row-gap: 20px !important; }
  html body .pricing-card, html body .pricing-card.recommended { max-width: 100% !important; width: 100% !important; flex: 0 0 100% !important; }
  html body .trust-grid { grid-template-columns: 1fr !important; }
  html body .cardT { height: auto !important; }
  html body .stats { flex-wrap: wrap !important; }
  html body .stats div { height: auto !important; margin-bottom: 15px !important; }
  html body .spec-scope .spec-grid { grid-template-columns: repeat(2, 1fr) !important; }
  html body .explore_loanslider { padding: 0 40px !important; }
  html body .seehome_filter_section { flex-wrap: wrap !important; padding: 16px 20px !important; gap: 15px !important; }
  html body .seehome_filter_section .filter-item { max-width: 100% !important; flex: 1 1 45% !important; }
  html body .team__grid { grid-template-columns: repeat(2, 1fr) !important; }
  html body .cardsG { grid-template-columns: repeat(2, 1fr) !important; }
  html body .cardG { width: 100% !important; max-width: 100% !important; }
  html body .assessment-wrapperN { grid-template-columns: 1fr !important; }
  html body .info-gridGD { flex-wrap: wrap !important; gap: 12px !important; }
  html body .info-boxGD { width: calc(50% - 6px) !important; }
  html body .pricing-gridGD { grid-template-columns: 1fr !important; }
  html body .group-sectionGDB .form-gridGDB { grid-template-columns: 1fr !important; }
  html body .group-sectionGDB .live-gridGDB { grid-template-columns: 1fr !important; }
  html body .card-formGDB, html body .card-liveGDB { height: auto !important;         margin-top: 22px;}
  html body .btn-yellow, html body .btn-light, html body .btn-primary, html body .btn-outline, html body .btn-primarytk, html body .btn-outlinetk, html body .btn-primaryCG, html body .btn-outlineCG, html body .cta-yellowGD, html body .cta-outlineGD, html body .btn-primary-yellow, html body .bimClass, html body .btn-primary-custom, html body .btn-outline-primary-custom { width: 100% !important; max-width: 100% !important; }
  html body .footer_mainsection { padding: 30px 5% !important; }
  html body .boder_lefq { border-left: none !important; padding-left: 0 !important; margin-top: 20px !important; }
  html body .copy_mainse { flex-direction: column !important; text-align: center !important; gap: 10px !important; }
  html body .lang_but { flex-direction: column !important; gap: 12px !important; }
  .desc1 p {
    margin-bottom: 10px !important;
}

.ava-section .ava-cards .ava-card .box {
    margin-top: 0px !important;
}

.stat-box h3{
        margin-bottom: 0px !important;
}

.stat-box p{
        margin-bottom: 4px;
}
.bim-hero {
    background: #ffffff;
    padding: 15px 20px !important;
}

.services-sec {
    background: #FFFFFF;
    padding: 15px 20px !important;
}

.team-card__body {
    height: auto !important;
    padding: 18px ;
}

.team__cta p{
        margin-left: auto !important;
            margin-bottom: 1rem !important;
}
.team__cta {
     height: auto !important; 
    margin-top: 35px;
    background: #012B5C;
    color: white;
    padding: 24px;
    border-radius: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}



}

@media (max-width: 768px) {
  html body .topmenu { display: none !important; }
  html body .hero { height: auto !important; padding: 100px 0 !important; 
  margin-top: 100px;}
  html body .hero-buttons { flex-direction: column !important; }
  html body .hero-text h1 { font-size: 30px !important; }
  html body .navbar-custom { display: block !important; }
  html body .navbar-custom .navbar-nav { min-width: 100% !important; }
  html body .fixed-top { left: 4% !important; }
  html body .card-grid { grid-template-columns: 1fr !important; }
  html body .cardsG { grid-template-columns: 1fr !important; }
  html body .spec-scope .spec-grid { grid-template-columns: 1fr !important; }
  html body .faqtatil_main h3 { font-size: 26px !important; }
  html body .rv-bottom { flex-direction: column !important; gap: 15px !important; text-align: center !important; padding: 30px 0 !important; }
  
  
.ava-modal-content {
    background: #fff;
    width: 306px !important;
    max-height: 100% ;
}
  
  
}

@media (max-width: 600px) {
  html body .card-grid { grid-template-columns: 1fr !important; }
  html body .service-card.active .listItem, html body .service-card .listItem { height: auto !important; }
}

@media (max-width: 576px) {
  html body .top_left { flex-wrap: wrap !important; }
  html body .sell_avamartmain p { font-size: 11px !important; }
  html body .link_button a { font-size: 11px !important; padding: 6px 12px !important; }
  html body .sign_main a p { display: none !important; }
  html body .hero-text h1 { font-size: 26px !important; }
  html body .hero-text p { font-size: 14px !important; }
  html body .projects-grid .project-card { flex: 0 0 100% !important; max-width: 100% !important; }
  html body .thumb-strip { flex-wrap: wrap !important; }
  html body .thumb { width: 100px !important; height: 64px !important; }
  html body .team__grid { grid-template-columns: 1fr !important; }
  html body .cta-yellowGD, html body .cta-outlineGD { width: 100% !important; text-align: center !important; margin-right: 0 !important; }
  html body .explore_loanslider { padding: 0 30px !important; }
}

@media (max-width: 480px) {
  html body .topmain_section { display: block !important; padding: 7px 0 !important; }
  html body .top_left { justify-content: space-between !important; padding: 8px !important; }
  html body .top_right { display: none !important; }
  html body .top_menu p { display: none !important; }
  html body .sign_main a p { display: none !important; }
  html body .header_mid_right { gap: 15px !important; flex-wrap: wrap !important; }
  html body .fixed-top { left: 2% !important; padding: 0 !important; }
  html body .stellarnav li a { font-size: 12px !important; padding: 12px 10px !important; }
  html body .hero-text h1 { font-size: 24px !important; }
  html body .tk-section .tabs { flex-wrap: wrap !important; gap: 8px !important; }
  html body .tk-section .tabs button, html body .tk-section .tabs button.active { width: 100% !important; padding: 12px 16px !important; }
}

/* =========================================================
   PRICING CARDS FIX (Choose Your Package section)
   The inline style="flex-wrap: nowrap !important" on
   .package-container can NEVER be beaten by external CSS
   (inline !important always wins). So instead of fighting
   it, we turn it into an intentional horizontal swipe
   carousel — this works with the nowrap, not against it.
   ========================================================= */
@media (max-width: 991px) {
  html body .package-container {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scroll-snap-type: x mandatory !important;
    /*justify-content: flex-start !important;*/
    padding-bottom: 12px !important;
  }
  html body .package-container .col-lg-4,
  html body .package-container .col-lg-4.col-md-6,
  html body .package-container > div {
    flex: 0 0 85% !important;
    max-width: 85% !important;
    scroll-snap-align: center !important;
  }
  html body .pricing-card,
  html body .pricing-card.recommended {
    width: 100% !important;
    max-width: 100% !important;
  }
}

@media (max-width: 480px) {
  html body .package-container .col-lg-4,
  html body .package-container .col-lg-4.col-md-6,
  html body .package-container > div {
    flex: 0 0 90% !important;
    max-width: 90% !important;
  }
}




/* ==========================================================================
   HEADER / NAVBAR — RESPONSIVE CSS (cleaned & deduplicated)
   Matches the <header class="main_header"> markup exactly.
   Load this AFTER your main site CSS so these rules win.

   NOTE: the big combined file had the same selector
   (.navbar-custom .navbar-collapse.show) patched THREE separate times
   with conflicting values (one said height:100vh, another said
   height:auto + max-height:calc(100vh - 70px), the last said
   max-height:100vh again) — later rules were silently cancelling the
   earlier fix. Below is ONE final version only (no dead/contradicting
   rules left in).
   ========================================================================== */

/* ---------- ALWAYS (not just mobile) ----------
   Kills a stray "<p>menu</p>" debug text that sits as a direct sibling
   inside .top_menu, and stops meg-menu.css from forcing .top_menu into
   a column layout (which stacks the hamburger icon above that stray
   word at every screen size). */
/*.top_menu > p {*/
/*    display: none !important;*/
/*}*/

/*.top_menu {*/
/*    flex-direction: row !important;*/
/*    align-items: center !important;*/
/*    gap: 10px !important;*/
/*}*/

/* ---------- LAPTOP (<=1200px) ---------- */
@media (max-width: 1200px) {
    .container {
        max-width: 100%;
        /*padding: 0 20px;*/
    }
    
    .overlap-icon{
            position: unset;
                margin: 10px;
    margin-bottom: 0;
    }
    
    .card-body {
    padding: 10px;
}

    .header_mid_right {
        gap: 20px;
    }

    .top_right {
        gap: 16px;
    }
}

/* ---------- TABLET (<=992px) ---------- */
@media (max-width: 992px) {
    .topmain_section {
        flex-wrap: wrap;
        row-gap: 8px;
    }
    
    .top_menu > p {
    display: none !important;
}

    .top_right {
        gap: 14px;
        flex-wrap: wrap;
    }

    .header_mid_section {
        padding: 12px 0;
        flex-wrap: wrap;
        row-gap: 10px;
    }

    .header_mid_right {
        gap: 16px;
        flex-wrap: wrap;
        row-gap: 10px;
    }

    .main_header .navbar-brand img {
        max-width: 130px;
    }

    .navbar-custom .navbar-nav {
        min-width: 100% !important;
    }
}

/* ---------- MOBILE (<=767px) ---------- */
@media (max-width: 767px) {
    /* .menu-container is the desktop mega-menu (hamburger + tab panel
       with Solutions/Quick Links/About/Partners/Community) — hidden on
       mobile in favour of navbar-custom's own collapse menu. */
    .menu-container {
        display: none !important;
    }
    
    .copy_mainse {
    display: block;
    justify-content: space-between;
    gap: 10px;
}

.lang_but {
    text-align: center;
    margin-bottom: 45px;
    display: flex;
    align-items: center;
    justify-content: normal !important;
    gap: 20px;
}

    /* .menu_mainsection is a SECOND, separate stellarnav mobile menu
       that sits right below the header. It's redundant with
       navbar-custom (which already handles mobile nav) and was the
       cause of a stray "☰ Menu" bar + extra gap before the hero. */
    .menu_mainsection {
        display: block !important;
    }
    
    html body .stellarnav ul{
         
             display: flex !important;
    align-items: stretch;
    list-style: none;
    margin: 0;
    padding: 0 8px;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    position: static !important;
    height: auto !important;
    background: none !important;
    box-sizing: border-box;
    scroll-snap-type: x proximity;
    overflow-anchor: none;
    }

    .navbar-custom {
        display: block;
    }

    /* .navbar-custom carries BOTH "fixed-top" and its own inline
       positioning — this detaches the toggle from the header row and
       makes it float at a random left offset instead of sitting
       inline. Pin it back into normal flow. */
    .navbar-custom.fixed-top {
        left: 20px !important;
        /*top:10px;*/
    }

    .navbar-custom .navbar-toggler {
        padding: 0;
        border: none;
        box-shadow: none;
        position: relative;
        z-index: 10001;
    }

    /* keep just the hamburger icon, hide the "Menu" text label so it
       doesn't wrap/overflow next to the logo */
    .navbar-custom .menu-icon.mobl p {
        display: none;
    }

    .navbar-custom .menu-icon.mobl span {
        background: #fff;
    }

    /* animate hamburger -> "✕" when the panel is open, so there's an
       obvious way to close it again */
    .navbar-custom .navbar-toggler[aria-expanded="true"] .menu-icon.mobl span:nth-child(1) {
        transform: translateY(9px) rotate(45deg);
        background: #242424;
    }
    .navbar-custom .navbar-toggler[aria-expanded="true"] .menu-icon.mobl span:nth-child(2) {
        opacity: 0;
    }
    .navbar-custom .navbar-toggler[aria-expanded="true"] .menu-icon.mobl span:nth-child(3) {
        transform: translateY(-9px) rotate(-45deg);
        background: #242424;
    }

    /* Open panel: cover the full screen (both while animating -
       ".collapsing" - and once fully open - ".show" - so it doesn't
       visibly "snap" partway through the animation). Sized to content
       with its own scroll, not forced to a dead-space-leaving 100vh. */
    .navbar-custom .navbar-collapse.collapsing,
    .navbar-custom .navbar-collapse.show {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: auto !important;
        max-height: calc(100vh - 70px) !important;
        overflow-y: auto !important;
        background: #fff !important;
        z-index: 10000 !important;
        padding: 70px 15px 30px !important;
        box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18) !important;
    }

    .navbar-custom .navbar-nav {
        min-width: 100% !important;
        margin-top: 0 !important;
        box-shadow: none !important;
    }

    .navbar-custom .navbar-nav .nav-link {
        padding: 0.7rem 1rem;
        margin: 5px 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: solid 1px #ddd;
        background: #F2F3F7;
    }

    /* remove the small decorative grid icon next to every menu label —
       it doesn't mean anything to users, just clutter */
    .navbar-custom .nav-link .fa-th,
    .navbar-custom .nav-link i.fa-th {
        display: none !important;
    }

    /* sub-menu links (e.g. "AVA Property", "AVA Space"...) — indent +
       shrink so they read clearly as children of the row above */
    .navbar-custom .dropdown-menu {
        padding-left: 14px !important;
    }

    .navbar-custom .dropdown-item {
        font-size: 14px !important;
        padding: 0.65rem 1rem !important;
        border-bottom: solid 1px #eee !important;
    }

    .header_mid_right {
        /*justify-content: flex-end;*/
        gap: 12px;
    }

    .sign_main a p {
        display: none;
    }

    .mid_cart_section {
        gap: 12px;
    }
}

/* ---------- SMALL MOBILE (<=480px) ---------- */
@media (max-width: 480px) {
    .topmain_section {
        display: block;
    }

    .top_left {
        display: flex;
        align-items: center;
        gap: 10px;
        justify-content: space-between;
        padding: 8px;
    }

    /* "How it Works / Support" links + language switcher hidden on the
       smallest screens to keep the top bar to one compact row */
    .top_right {
        display: none;
    }

    .header_mid_right {
        gap: 12px;
    }

    .dropdown-toggle {
        padding: 8px 10px 8px 14px;
        font-size: 12px;
    }
}

/* ---------- EXTRA SMALL (<=360px) ---------- */
@media (max-width: 360px) {
    .navbar-custom .navbar-nav {
        min-width: 100%;
    }

    .main_header .navbar-brand img {
        max-width: 110px;
    }
}













.menu-icon {
    width: 30px;
    height: auto;
    position: relative;
    cursor: pointer;
    z-index: 100;
    /*top: 6px;*/
}



.top_menu {
    display: flex;
    gap: 8px;
    flex-direction: column;
}


/* =========================
   Tablet
========================= */
@media (max-width: 991px) {

    .loan-section .header-row {
        gap: 15px;
        margin-bottom: 25px;
    }

    .loan-section .header-row h2 {
        font-size: 24px;
    }

    .loan-section .check_eligibility {
        padding: 10px 20px;
        font-size: 0.85rem;
    }
}


/* =========================
   Mobile
========================= */
@media (max-width: 767px) {

    .loan-section .header-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
        margin-bottom: 22px;
    }

    .loan-section .header-row h2 {
        font-size: 22px;
        line-height: 1.3;
    }

    .loan-section .check_eligibility {
        width: 100%;
        padding: 11px 18px;
        font-size: 0.85rem;
        text-align: center;
    }
}


/* =========================
   Small Mobile
========================= */
@media (max-width: 480px) {

    .loan-section .header-row {
        gap: 12px;
        margin-bottom: 20px;
    }

    .loan-section .header-row h2 {
        font-size: 20px;
    }

    .loan-section .check_eligibility {
        padding: 10px 16px;
        font-size: 0.8rem;
        border-radius: 22px;
    }
}




.tk-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    min-height: 28px;
    height: auto;
    padding: 18px 0;
    width: 100%;
    box-sizing: border-box;
}

/* Tablet */
@media (max-width: 991px) {
    .tk-tags {
        gap: 7px;
        padding: 15px 0;
    }
}

/* Mobile */
@media (max-width: 767px) {
    .tk-tags {
        gap: 6px;
        padding: 12px 0;
        min-height: auto;
    }
}

/* Small Mobile */
@media (max-width: 480px) {
    .tk-tags {
        gap: 5px;
        padding: 10px 0;
    }
}


/* Tablet */
@media (max-width: 991px) {
    .cta-barT {
        max-width: 90%;
        padding: 16px 18px 10px;
        border-radius: 12px;
        box-shadow: 15px 30px 70px 0px #00000014;
    }
    .team__cta .buttons {
    display: flex;
    gap: 12px;
    margin: auto;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}

.team__container {
    
    padding: 48px 20px !important;
}

.assessment-sectionN {
    
    margin: 22px !important;
    
}


.info-boxN p {
    gap: 10px;
}

.bim-list li {
    padding-left: 35px;
}

.tk-note{
        line-height: normal !important;
}

.emi-badge {
    height: auto !important;
}

.tk-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    height: auto !important;
    padding: 4px 0px !important;
}

.blue-cardGD{
    margin-bottom: 16px;
}

.group-sectionGDB {
    padding: 25px 0 !important;
    margin: 0px;
}

.pricing-containerGD {
    margin-top: 20px;
}

.group-sectionGDB .live-headGDB {
     display: block; 
    justify-content: space-between;
    align-items: center;
    padding-bottom: 20px;
}

live-headGDB h2 {
        margin-bottom: 20px;
}


.info-boxGD{
        height: auto !important;
}

}

/* Mobile */
@media (max-width: 767px) {
    .cta-barT {
        max-width: 100%;
        width: 100%;
        padding: 15px;
        border-radius: 12px;
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
        box-shadow: 10px 20px 50px 0px #00000014;
    }
}

/* Small Mobile */
@media (max-width: 480px) {
    .cta-barT {
        padding: 12px;
        border-radius: 10px;
        gap: 10px;
        box-shadow: 5px 15px 35px 0px #00000014;
    }
}



#menuIcon i{
        font-size: 30px;
    color: #fff;
           margin-left: -4px;
}



.top_menu p {
    font-size: 12px;
    color: #fff;
    margin-bottom: 3px !important;
    text-transform: capitalize;
}

.btn-outlineP a{
    color: #fff !important;
}








/* =========================================
   RESPONSIVE - LIVE GROUP SECTION
========================================= */

/* ---------- TABLET ---------- */
@media (max-width: 991px) {

    .group-sectionGDB .card-liveGDB {
        height: auto;
        min-height: 425px;
        padding: 25px 22px 30px;
        box-sizing: border-box;
    }

    .group-sectionGDB .live-headGDB {
        gap: 15px;
        padding-bottom: 18px;
    }

    .live-headGDB h2 {
        font-size: 22px;
        line-height: 1.2;
    }

    .live-headGDB span {
        font-size: 11px;
        padding: 7px 10px;
        white-space: nowrap;
    }

    /* Chips */
    .chip-row2GDB {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
    }

    .chip-row2GDB .chip2 {
        margin: 3px;
        padding: 6px 10px;
        font-size: 11px;
    }

    /* Live cards */
    .group-sectionGDB .live-gridGDB {
        grid-template-columns: 1fr 1fr;
        gap: 16px;
        padding-top: 25px;
    }

    .group-sectionGDB .live-boxGDB {
        padding: 25px 12px 18px;
    }

    .live-boxGDB .MT {
        font-size: 16px;
    }

    .sub3 {
        font-size: 11px;
    }

    .sub4 {
        font-size: 13px;
    }

    /* Buttons */
    .group-sectionGDB .btn-blueGDB {
        width: 180px;
        padding: 10px 18px;
        font-size: 13px;
    }

    .group-sectionGDB .btn-whiteGDB {
        padding: 9px 18px;
        font-size: 13px;
    }

    .group-sectionGDB .live-foot {
        grid-template-columns: 35% 65%;
    }
}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 767px) {

    .group-sectionGDB .card-liveGDB {
        width: 100%;
        height: auto;
        min-height: 0;
        padding: 20px 16px 25px;
        border-radius: 16px;
        box-sizing: border-box;
    }

    /* Header */
    .group-sectionGDB .live-headGDB {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        gap: 10px;
        padding-bottom: 18px;
    }

    .live-headGDB h2 {
        margin: 0;
        font-size: 20px;
        line-height: 1.3;
    }

    .live-headGDB span {
        display: inline-flex;
        width: auto;
        font-size: 10px;
        padding: 7px 10px;
    }


    /* ---------------------------------
       CHIPS
    --------------------------------- */

    .chip-row2GDB {
        display: grid;
        grid-template-columns: 1fr 1fr;
        width: 100%;
        gap: 8px;
        margin: 0;
    }

    .chip-row2GDB .chip2 {
        width: 100%;
        margin: 0;
        padding: 8px 7px;
        /*min-height: 32px;*/
        justify-content: center;
        box-sizing: border-box;
        font-size: 11px;
    }

    .chip-row2GDB .chip2 i {
        margin-top: 0 !important;
        font-size: 7px;
    }


    /* ---------------------------------
       LIVE CARDS
    --------------------------------- */

    .group-sectionGDB .live-gridGDB {
        display: grid;
        grid-template-columns: 1fr;
        gap: 14px;
        padding-top: 22px;
    }

    .group-sectionGDB .live-boxGDB {
        width: 100%;
        padding: 22px 13px 18px;
        border-radius: 13px;
        box-sizing: border-box;
    }

    .live-boxGDB .MT {
        padding-top: 10px;
        font-size: 17px;
        line-height: 1.2;
    }

    .sub3 {
        font-size: 11px;
        line-height: 1.3;
    }

    .sub4 {
        font-size: 13px;
        line-height: 1.3;
    }


    /* ---------------------------------
       PROGRESS BAR
    --------------------------------- */

    .group-sectionGDB .barGDB {
        height: 5px;
        margin: 9px 0 15px;
    }


    /* ---------------------------------
       LEVEL BADGE
    --------------------------------- */

    .live-boxGDB .level.gold,
    .live-boxGDB .level.silver {
        padding: 5px 8px;
        font-size: 10px;
        border-radius: 5px;
    }


    /* ---------------------------------
       BUTTONS
    --------------------------------- */

    .group-sectionGDB .btn-rowGDB {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        padding: 15px 0;
        width: 100%;
    }

    .group-sectionGDB .btn-blueGDB,
    .group-sectionGDB .btn-whiteGDB,
    .group-sectionGDB .btn-yellowGDB {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        text-align: center;
        padding: 11px 18px;
        font-size: 13px;
    }


    /* ---------------------------------
       LIVE FOOTER
    --------------------------------- */

    .group-sectionGDB .live-foot {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        height: auto;
        gap: 10px;
        padding: 8px 0;
    }

    .group-sectionGDB .live-foot p {
        width: 100%;
        text-align: left;
        margin: 0;
        padding: 2px 0;
        font-size: 11px;
    }

    .group-sectionGDB .live-foot .joinGDB {
        width: 100%;
        padding: 10px 15px;
        font-size: 13px;
    }

    .clock {
        font-size: 12px;
    }
}


/* =========================================
   SMALL MOBILE
========================================= */

@media (max-width: 480px) {

    .group-sectionGDB .card-liveGDB {
        padding: 18px 13px 22px;
        border-radius: 14px;
    }

    .live-headGDB h2 {
        font-size: 18px;
    }

    .live-headGDB span {
        font-size: 9px;
        padding: 6px 9px;
    }


    /* Chips 2 x 2 */
    .chip-row2GDB {
        grid-template-columns: 1fr 1fr;
        gap: 7px;
    }

    .chip-row2GDB .chip2 {
        font-size: 10px;
        padding: 7px 5px;
    }


    /* Live card */
    .group-sectionGDB .live-gridGDB {
        gap: 12px;
        padding-top: 18px;
    }

    .group-sectionGDB .live-boxGDB {
        padding: 19px 11px 16px;
    }

    .live-boxGDB .MT {
        font-size: 16px;
    }

    .sub3 {
        font-size: 10px;
    }

    .sub4 {
        font-size: 12px;
    }


    /* Buttons */
    .group-sectionGDB .btn-blueGDB,
    .group-sectionGDB .btn-whiteGDB,
    .group-sectionGDB .btn-yellowGDB {
        font-size: 12px;
        padding: 10px 14px;
    }


    .group-sectionGDB .live-foot .joinGDB {
        font-size: 12px;
    }
}


/* =========================================
   VERY SMALL MOBILE
========================================= */

@media (max-width: 360px) {

    .group-sectionGDB .card-liveGDB {
        padding: 16px 10px 20px;
    }

    .live-headGDB h2 {
        font-size: 17px;
    }

    .chip-row2GDB .chip2 {
        font-size: 9px;
        padding: 7px 4px;
    }

    .group-sectionGDB .live-boxGDB {
        padding: 17px 10px 15px;
    }

    .live-boxGDB .MT {
        font-size: 15px;
    }

}



@media (max-width: 480px) {
    .wa-float-btn {
                width: 50px !important;
        height: 50px !important;
        bottom: 65px !important;
        right: 0 !important;
    }
}