/* ========================================
   MOBILE NAVBAR ONLY (0px - 1200px)
   Hamburger menu for tablets/iPads, content uses desktop layout
   ======================================== */

@media only screen and (max-width: 1200px) {
    /* ========== NAVBAR ========== */
    .navbar {
        padding: 10px 0 !important;
    }

    .navbar-brand > img {
        width: 45px !important;
    }

    /* Logo positioning - show on left side for mobile */
    .float-center {
        position: static !important;
        left: auto !important;
        transform: none !important;
        -webkit-transform: none !important;
        -moz-transform: none !important;
        -ms-transform: none !important;
        -o-transform: none !important;
        margin-left: 0 !important;
        margin-right: auto !important;
    }

    .logo-area {
        left: 0 !important;
        position: static !important;
        transform: none !important;
        -webkit-transform: none !important;
        -moz-transform: none !important;
        -ms-transform: none !important;
        -o-transform: none !important;
    }

    .scrolled .logo-area.float-center {
        top: auto !important;
        left: 0 !important;
        position: static !important;
    }

    /* Fix navbar container layout issues */
    .navbar .container {
        justify-content: space-between !important;
        flex-direction: row !important;
        align-items: center !important;
    }

    .navbar-collapse {
        float: none !important;
    }

    /* Ensure logo-area doesn't interfere with mobile layout */
    .logo-area {
        position: static !important;
        float: none !important;
        transform: none !important;
        left: auto !important;
        margin-right: auto !important;
    }

    .navbar-brand {
        margin-left: 0 !important;
        margin-right: auto !important;
    }

    /* Force hamburger menu button to be visible on all screens up to 1200px */
    .navbar-expand-xl > .container,
    .navbar-expand-xl > .container-fluid {
        flex-wrap: wrap !important;
    }

    /* Multiple specificity levels to ensure navbar-toggler is visible */
    .navbar-expand-xl .navbar-toggler,
    nav.navbar-expand-xl .navbar-toggler,
    .navbar .navbar-toggler,
    button.navbar-toggler {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: auto !important;
        height: auto !important;
        position: relative !important;
    }

    /* Force mobile navbar layout on all screens up to 1200px */
    .navbar-expand-xl .navbar-nav {
        flex-direction: column !important;
        align-items: flex-start !important;
        justify-content: flex-start !important;
    }

    /* CONSOLIDATED: Hide navbar-collapse by default (collapsed state) */
    .navbar-expand-xl .navbar-collapse {
        display: none !important;
        position: fixed !important;
        width: 60% !important;
        right: 0 !important;
        left: auto !important;
        top: 45px !important;
        height: auto !important;
        background-color: rgba(255, 255, 255, 0.95) !important;
        backdrop-filter: blur(10px) !important;
        -webkit-backdrop-filter: blur(10px) !important;
        z-index: 99999 !important;
        transform: translateX(100%) !important;
        transition: transform 0.3s ease-in-out !important;
        box-shadow: -5px 0 15px rgba(0, 0, 0, 0.1) !important;
        border-radius: 0 !important;
    }

    .navbar-expand-xl .navbar-collapse.show {
        display: block !important;
        transform: translateX(0) !important;
    }

    .navbar-collapse {
        width: 60% !important;
        right: 0 !important;
        left: auto !important;
        position: fixed !important;
        top: 45px !important;
        height: auto !important;
        background-color: rgba(255, 255, 255, 0.95) !important;
        backdrop-filter: blur(10px) !important;
        -webkit-backdrop-filter: blur(10px) !important;
        z-index: 99999 !important;
        transform: translateX(100%) !important;
        transition: transform 0.3s ease-in-out !important;
        box-shadow: -5px 0 15px rgba(0, 0, 0, 0.1) !important;
        border-radius: 0 !important;
    }

    .navbar-collapse.show {
        transform: translateX(0) !important;
    }

    .navbar-nav {
        padding: 20px !important;
        height: auto !important;
        overflow-y: auto !important;
    }

    .nav-item a svg {
        width: 20px !important;
    }

    .nav-item a::before {
        display: none !important;
    }

    .nav-item a.cart-menu-btn,
    .nav-item a.account-btn {
        margin: 10px !important;
        padding: 5px !important;
    }

    .nav-item a.cart-menu-btn {
        margin-left: 0 !important;
        padding-left: 5px !important;
    }

    .icon-container {
        margin-top: 20px !important;
    }

    /* ========== HEADER BUTTONS ========== */
    .header-right {
        flex-direction: column !important;
        gap: 15px !important;
    }

    .btn-header {
        padding: 5.5px 12px !important;
        font-size: 18px !important;
        margin-right: 0 !important;
    }
}

/* ========================================
   TABLET STYLES (0px - 1000px)
   ======================================== */
@media only screen and (max-width: 1000px) {
    /* Fix for border showing between sections */
    .slideshow-row {
        margin-top: -5px !important;
    }
    
    section.purcity-testimonials-section {
        margin-top: -5px !important;
    }

    #ai-chat-box {
        max-width: 100%!important;
        min-width: 60%!important;
    }
}

/* ========================================
   FULL MOBILE STYLES (0px - 768px)
   Complete mobile layout for phones and small tablets
   ======================================== */

@media only screen and (max-width: 768px) {

    /* ========== HERO BANNER ========== */
    .hero-header {
        height: auto !important;
        width: 100% !important;
    }

    .hero-banner-container {
        width: 100% !important;
        height: auto !important;
    }

    .hero-banner-image {
        width: 100% !important;
        height: auto !important;
        max-width: 100% !important;
        object-fit: contain !important;
        object-position: center center !important;
        position: relative !important;
    }

    .hero-section {
        padding: 0 !important;
        min-height: auto !important;
    }

    .hero-content {
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        width: 100% !important;
        padding: 20px !important;
        margin-top: 0 !important;
    }

    .hero-title {
        font-size: 2.4rem !important;
        margin-bottom: 15px !important;
    }

    .hero-subtitle {
        font-size: 1.1rem !important;
        margin-bottom: 20px !important;
    }

    .hero-stat-card {
        padding: 15px !important;
        margin-bottom: 10px !important;
    }

    .hero-stat-number {
        font-size: 2rem !important;
    }

    .hero-stat-label {
        font-size: 0.9rem !important;
    }

    /* ========== SECTIONS ========== */
    .section-title {
        font-size: 1.8rem !important;
        margin-bottom: 30px !important;
        padding: 10px !important;
    }

    .section-subtitle {
        font-size: 1rem !important;
        margin-bottom: 20px !important;
    }

    /* ========== CARDS ========== */
    .card-one h3,
    .card-two h3 {
        font-size: 2.5rem !important;
    }

    .card-one,
    .card-two {
        width: 100% !important;
        max-width: 320px !important;
        margin: 0 auto 20px !important;
    }

    .card-one img,
    .card-two img {
        margin-top: -20% !important;
    }

    .card-two {
        margin-top: 50px !important;
    }

    /* ========== AWARDS ========== */
    .award-card {
        padding: 10px !important;
        min-height: auto !important;
        margin-bottom: 15px !important;
    }

    .award-card img {
        max-width: 80px !important;
        margin-bottom: 10px !important;
    }

    .award-title {
        font-size: 12px !important;
    }

    /* ========== PRODUCTS ========== */
    .productArea {
        display: none !important;
    }

    #WallGraph {
        display: block !important;
    }

    .product-section {
        padding: 40px 15px !important;
    }

    .products-btn-area {
        flex-direction: column !important;
        gap: 10px !important;
    }

    .products-btn-area .btn {
        width: 100% !important;
        margin: 0 !important;
    }

    /* ========== TABS ========== */
    .tab-navigation,
    .tab-navigation.sticky {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        transform: none !important;
        width: 100% !important;
        z-index: auto !important;
        background: transparent !important;
        box-shadow: none !important;
        border: none !important;
        padding: 0 !important;
        margin: 0 0 20px 0 !important;
        display: flex !important;
        flex-wrap: nowrap !important;
        gap: 5px !important;
        overflow-x: auto !important;
        justify-content: flex-start !important;
    }

    .tab-navigation .tab-button,
    .tab-navigation.sticky .tab-button {
        position: relative !important;
        font-size: 11px !important;
        padding: 8px 10px !important;
        margin: 0 !important;
        flex: 0 0 auto !important;
        white-space: nowrap !important;
    }

    /* ========== FOOTER ========== */
    .footer-logo img {
        max-width: 120px !important;
    }

    .footer-logo {
        text-align: center !important;
        margin: 20px auto !important;
    }

    .footer-bottom a {
        margin-left: 0 !important;
        margin-right: 10px !important;
    }

    .footer-bottom {
        padding-bottom: 20px !important;
    }

    /* ========== CHAT BOX ========== */
    #ai-chat-box {
        right: 2vw !important;
        width: 96vw !important;
        left: 2vw !important;
        bottom: 80px !important;
    }

    .ai-chat-icon-btn svg {
        max-width: 20px !important;
    }

    /* ========== SOCIAL ICONS ========== */
    .social-icon {
        height: 30px !important;
    }

    /* ========== VIDEOS ========== */
    .video-header {
        height: 40vh !important;
    }

    /* ========== PAGINATION ========== */
    .page_BTN {
        width: 25px !important;
        height: 25px !important;
    }

    .page-link {
        padding: 5px 10px !important;
        font-size: 14px !important;
    }

    /* ========== FORMS ========== */
    .form-section {
        padding: 20px !important;
    }

    /* ========== IMAGES ========== */
    .spalised-container-img {
        max-width: 100% !important;
        width: 100% !important;
    }

    /* ========== SLIDESHOW ========== */
    .slideshow-container {
        height: auto !important;
        max-height: none !important;
        min-height: auto !important;
    }

    .slideshow-images {
        height: auto !important;
        min-height: auto !important;
    }

    .slideshow-content {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
        padding: 0 !important;
    }

    .slide-image {
        width: 240px !important;
        height: 180px !important;
    }

    /* ========== TESTIMONIALS ========== */
    /* Force testimonial columns to stack vertically */
    .Testimonials-container > .col-md-8,
    .Testimonials-container > .col-md-4 {
        width: 100% !important;
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }

    .Testimonials-container {
        flex-direction: column !important;
    }

    .Testimonials-container > .col-md-4 {
        margin-top: 30px !important;
    }

    .purcity-testimonials-list {
        max-height: none !important;
        overflow-y: visible !important;
    }

    /* Old panel-style testimonials (if used) */
    .center-column {
        display: none !important;
    }

    .left-panel {
        order: 0 !important;
    }

    .right-panel {
        order: 1 !important;
    }

    .side-panel {
        min-height: auto !important;
        height: auto !important;
        width: 100% !important;
    }

    .testimonial-img {
        margin-bottom: 15px !important;
    }

    .purcity-testimony-description {
        font-size: 1rem !important;
        line-height: 1.6 !important;
    }

    .purcity-testimonial-info {
        padding: 15px !important;
    }

    .purcity-testimonial-info h3 {
        font-size: 1.2rem !important;
    }

    .purcity-testimonial-info p {
        font-size: 0.9rem !important;
    }

    /* ========== AWARDS LAYOUT ========== */
    .award-header {
        position: relative !important;
        top: auto !important;
    }

    .award-card {
        min-height: auto !important;
    }
}

/* ========================================
   HIGH-RESOLUTION DISPLAY SUPPORT
   For devices with high pixel density (OnePlus 13, etc.)
   ======================================== */

/* High DPI devices (2x pixel ratio - most modern phones) */
@media only screen and (-webkit-min-device-pixel-ratio: 2),
       only screen and (min-resolution: 192dpi) {
    .hero-banner-image {
        width: 100% !important;
        height: auto !important;
        object-fit: contain !important;
    }
}

/* Very High DPI devices (3x pixel ratio - OnePlus 13, flagship phones) */
@media only screen and (-webkit-min-device-pixel-ratio: 3),
       only screen and (min-resolution: 288dpi) {
    .hero-banner-image {
        width: 100% !important;
        height: auto !important;
        object-fit: contain !important;
    }

    .testimonial-img {
        max-width: 100% !important;
        height: auto !important;
    }
}

/* Extra small devices (phones, 0px and up) */
.btn-outline-primary {
    color: #20db6e !important;
    border-color: #20db6e !important;
}
.floating-chat,
.scroll-top-btn {
    z-index: 2;
}

.navbar-collapse {
    z-index: 99999;
}
.uk-width-large {
    width: 500px;
}
/* Mobile Menu Backdrop Overlay */
.mobile-menu-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 99998;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease-in-out;
}

.mobile-menu-backdrop.show {
    opacity: 1;
    visibility: visible;
}

/* Mobile Menu Close Button */
.mobile-menu-close {
    position: absolute;
    top: 15px;
    right: 15px;
    background: none;
    border: none;
    font-size: 24px;
    color: #333;
    cursor: pointer;
    z-index: 100000;
}

.mobile-menu-close:hover {
    color: #20db6e;
}

.Death_Card img,
.Children_Card img {
    aspect-ratio: 1;
}

/* Large devices (desktops, 992px and up) */
@media only screen and (min-width: 992px) and (max-width: 1199.98px) {
    /* Styles for small desktops/laptops */
    .spalised-container-img {
        width: 70%;
    }
    .Innovation_section_img {
        width: 50%;
    }
    section.purcity-testimonials-section.section-skewed .full-container,
    section#news {
        padding-top: 6rem !important;
    }
    #milestones > ul,
    #achievements > ul,
    #TimeLineInfo > ul {
        width: 64%;
    }

    .card-animation-container.pt-5.mt-5.animation-triggered
        .tab-navigation.mb-0.pb-0
        .tab-button {
        font-size: 1rem;
    }
}

/* Extra large devices (large desktops, 1200px and up) */
@media only screen and (min-width: 1200px) and (max-width: 1399.98px) {
    /* Styles for large desktops */
    .spalised-container-img {
        width: 70%;
    }
    .Innovation_section_img {
        width: 50%;
    }

    .slideshow-content {
        grid-template-columns: 1fr;
    }
}
/* REMOVED - Conflicts with unified mobile styles (0-1024px) */
/* REMOVED - @media only screen and (max-width: 1199.98px) */
/* REMOVED - @media only screen and (max-width: 1200px) */
@media only screen and (min-width: 1200px) {
    .navbar-expand-xl .navbar-nav {
        min-width: 35%;
    }
    .Climate_Change_Banner_container > .container > div > .col-md-7 {
        padding-left: 10%;
    }
}
@media only screen and (max-width: 1400px) and (min-width: 1200px) {
    /* between 1400px and 1200px */

    .purcity-testimonials-list {
        max-height: 626px;
    }
    .purcity-video-wrapper {
        max-height: 661px;
    }
}
/* REMOVED - Conflicts with unified mobile styles (0-1024px) */
/* REMOVED - @media only screen and (max-width: 1400px) */
@media only screen and (min-width: 1400px) {
    /* Upper 1400px */
    .purcity-testimonials-list {
        max-height: 550px;
    }
    .Energy_consumption-Img-container {
        margin-top: 0rem;
    }
    .Innovation_section {
        padding-bottom: 300px;
    }
}

@media only screen and (min-width: 768px) {
    /* body {
		background: #000;
	} */
    .navbar-expand-xl .navbar-collapse {
        width: 380px;
    }
    .award_section + footer {
        margin-top: -20vw !important;
    }
    #contactUs > #Footer {
        margin-top: -20vw !important;
    }
    .Death_Card img,
    .Children_Card img {
        min-width: 150px;
        aspect-ratio: 1;
    }

    .products-features-info .feature {
        margin-right: 40px;
    }
    .Working-steps-card > div:nth-child(1) {
        margin-top: 5vw;
    }
    .Working-steps-card > div:nth-child(2) {
        margin-top: 15vw;
    }
    .Working-steps-card > div:nth-child(3) {
        margin-top: 25vw;
    }

    .Innovation_section_img {
        min-width: 450px;
    }
}

/* REMOVED - Conflicts with unified mobile styles (0-1024px) */
/* REMOVED - @media only screen and (max-width: 1200px) and (min-width: 992px) */
/* REMOVED - @media only screen and (max-width: 1200px) */

@media only screen and (min-width: 425px) {
    .c-Two {
        height: 50%;
    }
}

/* REMOVED - Conflicts with unified mobile styles (0-1024px) */
/* REMOVED - @media only screen and (max-width: 767px) and (min-width: 425px) */
/* REMOVED - @media only screen and (max-width: 844px) */
/* REMOVED - @media only screen and (max-width: 767px) */

/* REMOVED - Conflicts with unified mobile styles (0-1024px) */
/* REMOVED - @media (max-width: 576px) */
/* REMOVED - @media only screen and (max-width: 425px) */
/* REMOVED - @media only screen and (max-width: 460px) */
/* REMOVED - @media only screen and (max-width: 479px) */
/* REMOVED - @media only screen and (min-width: 767px) and (max-width: 1024px) */
/* REMOVED - @media only screen and (max-width: 766px) */
/* REMOVED - Hero Banner Responsive Styles @media (max-width: 768px) and (max-width: 480px) */
/* REMOVED - Statistics Section Video @media (max-width: 768px) */
/* REMOVED - Testimonial Video @media (max-width: 768px) and (max-width: 480px) */
/* REMOVED - Extra small mobile screens @media (max-width: 480px) */
/* REMOVED - Very small screens @media (max-width: 360px) */