/* Responsive Frontend Styles */
@media (max-width: 1600px) {
    .wrap-main {
        max-width: 1240px;
    }
    .main-hero-section .main-hero-content{
        margin-top: 100px;
    }
    .main-heading {
        font-size: 50px;
    }

    .sub-heading {
        font-size: 40px;
    }

    .simple-text {
        font-size: 18px;
    }
    .flex-45 {
        flex-basis: 45%;
    }
    .flex-65 {
        flex-basis: 55%;
    }
    .section-heading {
        font-size: 40px;
    }
    .btn {
        padding: 14px 22px;
    }
    .donate-content-home{
        padding-left: 100px;
        padding-right: 120px;
    }
    .main-hero-section .main-top-bar{
        padding: 2rem 170px;
    }
    .video-carousel-track{
        height: 400px;
    }
    
    /* Register Upcoming Events - Large Desktop */
    .register-upcoming-events .competitions-responsive-grid {
        gap: 25px;
    }
    
    .register-upcoming-events .competition-card-responsive {
        height: 400px;
    }
    
    .register-upcoming-events .competition-content {
        padding: 25px;
    }
    
    .register-upcoming-events .competition-title {
        font-size: 20px;
        margin-bottom: 12px;
    }
    
    .register-upcoming-events .competition-description {
        font-size: 14px;
        margin-bottom: 20px;
    }
    
    .register-upcoming-events .competition-btn {
        padding: 12px 24px;
        font-size: 14px;
        max-width: 180px;
    }
}
@media (max-width: 1400px) {
    .wrap-main {
        max-width: 1140px;
        padding: 0 60px;
    }
    .main-heading {
        font-size: 50px;
    }
    .section-heading {
        font-size: 30px;
    }
    .about-images .main-image {
        height: 420px;
    }
    .about-images .small-image {
        width: 250px;
        height: 300px;
    }
    .content {
        gap: 15px;
    }
    .community-image,
    .equipment-image {
        height: 400px;
    }
    .about-container .flex,
    .community-grid,
    .equipment-grid {
        gap: 100px;
    }
    .g-150 {
        gap: 100px;
    }
    .simple-text {
        font-size: 16px;
    }
    
    /* Register Upcoming Events - Medium Desktop */
    .register-upcoming-events .competitions-responsive-grid {
        gap: 20px;
    }
    
    .register-upcoming-events .competition-card-responsive {
        height: 350px;
    }
    
    .register-upcoming-events .competition-content {
        padding: 20px;
    }
    
    .register-upcoming-events .competition-title {
        font-size: 18px;
        margin-bottom: 10px;
    }
    
    .register-upcoming-events .competition-description {
        font-size: 13px;
        margin-bottom: 18px;
    }
    
    .register-upcoming-events .competition-btn {
        padding: 10px 20px;
        font-size: 13px;
        max-width: 160px;
    }
}
@media (max-width: 1200px) {
    .wrap-main {
        max-width: 800px;
    }
    .main-heading {
        font-size: 40px;
    }

    .sub-heading {
        font-size: 35px;
    }

    .simple-text {
        font-size: 16px;
    }
    .section-heading {
        font-size: 25px;
    }
    .g-150 {
        gap: 50px;
    }
    
    /* Register Upcoming Events - Tablet */
    .register-upcoming-events .competitions-responsive-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 20px;
    }
    
    .register-upcoming-events .competitions-count-3 .competition-card-responsive:nth-child(3) {
        grid-column: 1 / -1;
    }
    
    .register-upcoming-events .upcoming-images {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 20px;
    }
    
    .register-upcoming-events .upcoming-image-card {
        flex: calc(50% - 10px);
        height: 300px;
    }
    
    .register-upcoming-events .two-card-image {
        flex-direction: row;
        gap: 20px;
    }
    
    .register-upcoming-events .two-card-image .upcoming-image-card {
        flex: calc(50% - 10px);
        height: 250px;
    }
}

/* Mobile Reponsive */
@media (max-width: 768px) {
    .shop-products-section {
        padding: 60px 0;
    }

    .shop-header {
        margin-bottom: 40px;
    }

    .shop-header .section-title {
        font-size: 18px;
    }

    .shop-header .section-subtitle {
        font-size: 16px;
    }

    .products-grid {
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
        gap: 20px;
    }

    .product-image-container {
        height: 200px;
    }

    .product-info {
        padding: 15px;
    }

    .product-title {
        font-size: 14px;
    }

    .product-price {
        font-size: 16px;
    }

    .product-button {
        padding: 10px 20px;
        font-size: 12px;
    }

    .footer-widgets {
        grid-template-columns: 1fr;
        gap: 30px;
        padding: 40px 0 30px 0;
    }

    .bottom-content {
        flex-direction: column;
        gap: 15px;
        text-align: center;
    }

    .events-page .event-row {
        gap: 20px;
        flex-wrap: wrap;
    }

    .events-page .event-item {
        flex: 50;
    }

    .events-page .event-image-wrapper {
        height: 200px;
    }

    .events-page .event-title {
        font-size: 16px;
        margin: 15px 15px 8px 15px;
    }

    .events-page .event-description {
        font-size: 13px;
        margin: 0 15px 15px 15px;
    }

    .events-page .event-date-page {
        font-size: 12px;
        padding: 8px 15px;
        top: 15px;
        right: 15px;
    }

    .main-hero-section .main-hero-title {
        font-size: 2.5rem;
        line-height: 1.2;
        margin: 20px 0;
    }
    .flex {
        flex-direction: column;
        align-items: center;
    }

    .main-hero-section .main-hero-subtitle {
        font-size: 1.125rem;
        margin-bottom: 2rem;
        padding: 0 20px;
        line-height: 1.5;
    }

    .main-hero-section .main-cta-buttons {
        flex-direction: column;
        align-items: center;
        gap: 15px;
    }

    .main-hero-section .main-cta-btn {
        width: 200px;
        text-align: center;
    }

    .main-hero-section .main-top-bar {
        padding: 1rem 1.5rem;
    }

    .main-hero-section .main-logo-text {
        font-size: 1.2rem;
        letter-spacing: 1px;
    }

    .main-hero-section .main-utility-icons {
        gap: 1rem;
    }

    .main-hero-section .main-sidebar-menu {
        width: 60px;
    }

    /* Ensure content doesn't overlap with logo */
    .main-hero-section .main-hero-content {
        margin-top: 80px;
        padding: 0 20px;
    }
    .form-row {
        flex-direction: column;
        gap: 15px;
    }
    .contact-info-section {
        padding: 40px 0;
    }

    .contact-details {
        grid-template-columns: 1fr;
        gap: 25px;
    }

    .contact-item {
        height: 260px;
        padding: 30px 25px;
    }


    .contact-icon .icon {
        width: 28px;
        height: 28px;
    }

    .contact-content h4 {
        font-size: 18px;
    }

    .contact-content p {
        font-size: 14px;
    }
    /* .main-hero-section , .main-hero-section .main-sidebar-menu{
        height: 60vh;
    } */
    .product-section{
        height: auto;
        padding-bottom: 200px;
    }
    .product-grid-home{
        margin-top: -100px;
    }
    .product-grid-home{
        flex-wrap: wrap;
    }
    .product-card-home{
        flex: 48%;
        border: 1px solid;
    }
    .donate-home{
        flex-direction: column-reverse;
    }
    .donate-image-home{
        width: 100%;
    }
    .donate-content-home {
        padding: 50px 20px;
        width: 100%;
    }
    .p-100{
        padding: 50px 0;
    }
    .wrap-main{
        max-width: 100%;
        padding: 0 20px;
    }
    .upcoming-images{
        flex-wrap: wrap;
    }
    .upcoming-image-card{
        flex: 50;
        height: 350px;
    }
    .two-card-image{
        width: 100%;
        flex-direction: row;
    }
    .two-card-image .upcoming-image-card{
        flex: 50;
    }
    .hunting-stats-header{
        flex-direction: column;
        gap: 30px;
        text-align: center;

    }
    .flex-65 ,.flex-45{
        width: 100%;
    }
    .g-100{
        gap: 50px;
    }
    .card-content-title::before{
        width: 90%;
    }
    .about-images .small-image{
        right: -20px;
    }
    .btn {
        padding: 10px 16px;
        font-size: 16px;
    }
    .video-section{
        padding-top: 0;
    }
    .video-carousel-track{
        height: 200px;
    }
    .video-header{
        flex-direction: column;
        gap: 20px;
    }
    .section-heading {
        font-size: 20px;
    }
    .section-title{
        font-size: 16px;
    }
    .shop-cat {
        padding-bottom: 50px;
    }
    .community-section {
        padding: 50px 0;
        background: #f8f8f8;
        margin-top: 0px;
    }
    .exohl-competition-hero{
        flex-direction: column;
    }
    .hunting-stats-row{
        flex-direction: column;
    }
    .campaign-cards-row{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 20px;
}

    /* Register Upcoming Events - Complete Mobile Responsive */
    .register-upcoming-events {
        padding: 40px 0;
    }
    
    .register-upcoming-events .upcoming-header {
        text-align: center;
        padding: 20px 0;
        margin-bottom: 30px;
    }
    
    .register-upcoming-events .section-title {
        font-size: 18px;
        margin-bottom: 10px;
        line-height: 1.3;
    }
    
    .register-upcoming-events .section-heading {
        font-size: 24px;
        line-height: 1.2;
        margin-bottom: 0;
    }
    
    /* Dynamic Competitions Grid - Mobile */
    .register-upcoming-events .competitions-responsive-grid {
        grid-template-columns: 1fr !important;
        grid-template-rows: repeat(auto-fit, minmax(250px, 1fr)) !important;
        height: auto !important;
        gap: 20px;
        margin-top: 20px;
    }
    
    .register-upcoming-events .competition-card-responsive {
        margin-bottom: 0;
        height: 250px;
    }
    
    .register-upcoming-events .competition-image-container {
        height: 100%;
    }
    
    .register-upcoming-events .competition-content {
        padding: 15px;
    }
    
    .register-upcoming-events .competition-title {
        font-size: 16px;
        margin-bottom: 8px;
        line-height: 1.2;
    }
    
    .register-upcoming-events .competition-description {
        font-size: 12px;
        margin-bottom: 15px;
        line-height: 1.3;
    }
    
    .register-upcoming-events .competition-btn {
        padding: 8px 16px;
        font-size: 12px;
        width: 100%;
        max-width: 140px;
        margin: 0 auto;
        display: block;
    }
    
    /* Static Fallback Layout - Mobile */
    .register-upcoming-events .upcoming-images {
        flex-direction: column;
        gap: 20px;
    }
    
    .register-upcoming-events .upcoming-image-card {
        flex: 100%;
        height: 250px;
        margin-bottom: 0;
    }
    
    .register-upcoming-events .two-card-image {
        flex-direction: column;
        gap: 20px;
    }
    
    .register-upcoming-events .two-card-image .upcoming-image-card {
        flex: 100%;
        height: 200px;
    }
    
    .register-upcoming-events .hunting-details {
        padding: 15px;
    }
    
    .register-upcoming-events .card-content-title h4 {
        font-size: 14px;
        margin-bottom: 8px;
    }
    
    .register-upcoming-events .card-content-hunting .simple-text {
        font-size: 11px;
        margin-bottom: 10px;
        line-height: 1.3;
    }
    
    .register-upcoming-events .card-content-hunting .btn {
        padding: 6px 12px;
        font-size: 11px;
        width: 100%;
        max-width: 120px;
        margin: 0 auto;
        display: block;
    }

@media (max-width: 768px) {
    .campaign-cards-row {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }
}

@media (max-width: 480px) {
    .campaign-cards-row {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    
    .load-more-btn {
        padding: 12px 24px;
        font-size: 14px;
    }
    
    .load-more-container {
        margin-top: 30px;
        padding: 15px 0;
    }
}

    .hero-avatar{
        width: 150px;
        height: 150px;
    }
    .hero-profile-stats{
        display: none;
    }
    .hero-profile-container{
        flex-direction: column;
       gap:20px;
       text-align: center;

    }
    .hero-profile-bio p{
        text-align: center;
        font-size: 16px;
        padding: 0 50px;
    }
    .hero-profile-name{
        font-size: 30px;
    }
    .hero-profile-header-info{
        align-items: center;
    }
    .philosophy-content , .equipment-grid-hunter , .achievements-grid , .stats-grid{
        margin-top: 30px;
    }
}
/* Mobile Responsive for 425px and below */
@media (max-width: 425px) {
    .main-hero-section .main-hero-title {
        font-size: 1.6rem;
        line-height: 1.1;
        margin: 12px 0;
    }

    .main-hero-section .main-hero-subtitle {
        font-size: 0.85rem;
        margin-bottom: 1.3rem;
        padding: 0 12px;
        line-height: 1.3;
    }

    .main-hero-section .main-welcome-banner {
        font-size: 0.65rem;
        padding: 0.25rem 0.7rem;
        max-width: 190px;
        height: 38px;
    }

    .main-hero-section .main-cta-btn {
        padding: 0.7rem 1.3rem;
        font-size: 0.72rem;
        width: 170px;
    }

    .main-hero-section .main-top-bar {
        padding: 0.7rem 0.9rem;
    }

    .main-hero-section .main-logo-text {
        font-size: 0.95rem;
        letter-spacing: 0.4px;
    }

    .main-hero-section .main-utility-icons {
        gap: 0.7rem;
    }

    .main-hero-section .main-icon {
        width: 19px;
        height: 19px;
    }

    .main-hero-section .main-sidebar-menu {
        width: 48px;
        min-width: 48px;
    }

    .main-hero-section .main-menu-text {
        font-size: 0.75rem;
    }

    .main-hero-section .main-hamburger {
        width: 26px;
        height: 19px;
    }

    /* Ensure content doesn't overlap with logo on 425px screens */
    .main-hero-section .main-hero-content {
        margin-top: 72px;
        padding: 0 12px;
    }
}

/* Mobile Responsive for 420px and below */
@media (max-width: 420px) {
    .main-hero-section .main-hero-title {
        font-size: 1.8rem;
        line-height: 1.2;
        margin: 15px 0;
    }

    .main-hero-section .main-hero-subtitle {
        font-size: 0.9rem;
        margin-bottom: 1.5rem;
        padding: 0 10px;
    }

    .main-hero-section .main-welcome-banner {
        font-size: 0.7rem;
        padding: 0.3rem 0.8rem;
        max-width: 200px;
        height: 40px;
    }

    .main-hero-section .main-cta-btn {
        padding: 0.75rem 1.5rem;
        font-size: 0.75rem;
        width: 180px;
    }

    .main-hero-section .main-top-bar {
        padding: 0.8rem 1rem;
    }

    .main-hero-section .main-logo-text {
        font-size: 1rem;
        letter-spacing: 0.5px;
    }

    .main-hero-section .main-utility-icons {
        gap: 0.8rem;
    }

    .main-hero-section .main-icon {
        width: 20px;
        height: 20px;
    }

    .main-hero-section .main-sidebar-menu {
        width: 50px;
        min-width: 50px;
    }

    .main-hero-section .main-menu-text {
        font-size: 0.8rem;
    }

    .main-hero-section .main-hamburger {
        width: 28px;
        height: 20px;
    }

    /* Ensure content doesn't overlap with logo on 420px screens */
    .main-hero-section .main-hero-content {
        margin-top: 75px;
        padding: 0 15px;
    }
}

/* Mobile Responsive for 375px and below */
@media (max-width: 375px) {
    .main-hero-section .main-hero-title {
        font-size: 1.3rem;
        line-height: 1.05;
        margin: 8px 0;
    }

    .main-hero-section .main-hero-subtitle {
        font-size: 0.75rem;
        margin-bottom: 1rem;
        padding: 0 18px;
        line-height: 1.3;
    }

    .main-hero-section .main-welcome-banner {
        font-size: 0.6rem;
        padding: 0.2rem 0.6rem;
        max-width: 170px;
        height: 32px;
    }

    .main-hero-section .main-cta-btn {
        padding: 0.5rem 1rem;
        font-size: 0.65rem;
        width: 150px;
    }

    .main-hero-section .main-top-bar {
        padding: 0.5rem 0.7rem;
    }

    .main-hero-section .main-logo-text {
        font-size: 0.85rem;
        letter-spacing: 0.2px;
    }

    .main-hero-section .main-utility-icons {
        gap: 0.5rem;
    }

    .main-hero-section .main-icon {
        width: 16px;
        height: 16px;
    }

    .main-hero-section .main-sidebar-menu {
        width: 42px;
        min-width: 42px;
    }

    .main-hero-section .main-menu-text {
        font-size: 0.65rem;
    }

    .main-hero-section .main-hamburger {
        width: 22px;
        height: 16px;
    }

    .main-hero-section .main-hamburger-line {
        height: 2px;
    }

    /* Ensure content doesn't overlap with logo on very small screens */
    .main-hero-section .main-hero-content {
        margin-top: 65px;
        padding: 0 18px;
    }
}

@media (max-width: 480px) {
    .main-hero-section .main-hero-title {
        font-size: 2rem;
    }

    .main-hero-section .main-hero-subtitle {
        font-size: 1rem;
    }

    .main-hero-section .main-welcome-banner {
        font-size: 0.75rem;
        padding: 0.375rem 1rem;
    }

    .main-hero-section .main-cta-btn {
        padding: 0.875rem 2rem;
        font-size: 0.8rem;
    }

    .main-hero-section .main-logo-text {
        font-size: 1.1rem;
        letter-spacing: 0.8px;
    }

    .contact-info-section {
        padding: 30px 0;
    }

    .contact-details {
        gap: 20px;
    }

    .contact-item {
        height: 240px;
        padding: 25px 20px;
    }


    .contact-icon .icon {
        width: 24px;
        height: 24px;
    }

    .contact-content h4 {
        font-size: 16px;
    }

    .contact-content p {
        font-size: 13px;
    }

    .map-section {
        margin-top: 40px;
    }
    .shop-products-section {
        padding: 40px 0;
    }

    .products-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .product-image-container {
        height: 180px;
    }

    .shop-header .section-title {
        font-size: 16px;
    }

    .shop-header .section-subtitle {
        font-size: 14px;
    }

    .footer-widgets {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .newsletter-form {
        flex-direction: column;
    }

    .events-page .upcoming-events {
        padding-top: 60px;
    }
    .heading-side {
        flex: 1;
        max-width: 100%;
    }

    .events-page .events-header {
        margin-bottom: 40px;
    }

    .events-page .event-image-wrapper {
        height: 180px;
    }
    
    /* Register Upcoming Events - Extra Small Mobile */
    .register-upcoming-events {
        padding: 30px 0;
    }
    
    .register-upcoming-events .section-title {
        font-size: 16px;
        margin-bottom: 8px;
    }
    
    .register-upcoming-events .section-heading {
        font-size: 20px;
        line-height: 1.1;
    }
    
    .register-upcoming-events .competitions-responsive-grid {
        gap: 15px;
    }
    
    .register-upcoming-events .competition-card-responsive {
        height: 220px;
    }
    
    .register-upcoming-events .competition-content {
        padding: 12px;
    }
    
    .register-upcoming-events .competition-title {
        font-size: 14px;
        margin-bottom: 6px;
    }
    
    .register-upcoming-events .competition-description {
        font-size: 11px;
        margin-bottom: 12px;
    }
    
    .register-upcoming-events .competition-btn {
        padding: 6px 12px;
        font-size: 11px;
        max-width: 110px;
    }
    
    .register-upcoming-events .upcoming-image-card {
        height: 200px;
        overflow: hidden;
        max-height: 200px;
    }
    .home-page-wrap  .hunting-stats{
        margin-bottom: 0;
    }
    .upcoming-image-card:nth-child(1){
        width: 100%;
    }
    .register-upcoming-events .two-card-image .upcoming-image-card {
        height: 180px;
    }
    
    .register-upcoming-events .hunting-details {
        padding: 12px;
    }
    
    .register-upcoming-events .card-content-title h4 {
        font-size: 13px;
        margin-bottom: 6px;
    }
    
    .register-upcoming-events .card-content-hunting .simple-text {
        font-size: 10px;
        margin-bottom: 8px;
    }
    
    .register-upcoming-events .card-content-hunting .btn {
        padding: 5px 10px;
        font-size: 10px;
        max-width: 100px;
    }
}

/* Extra Small Screens (320px and below) */
@media (max-width: 320px) {
    .register-upcoming-events {
        padding: 20px 0;
    }
    
    .register-upcoming-events .section-title {
        font-size: 14px;
        margin-bottom: 6px;
    }
    
    .register-upcoming-events .section-heading {
        font-size: 18px;
        line-height: 1.1;
    }
    
    .register-upcoming-events .competition-card-responsive {
        height: 200px;
    }
    
    .register-upcoming-events .competition-content {
        padding: 10px;
    }
    
    .register-upcoming-events .competition-title {
        font-size: 13px;
        margin-bottom: 5px;
    }
    
    .register-upcoming-events .competition-description {
        font-size: 10px;
        margin-bottom: 10px;
    }
    
    .register-upcoming-events .competition-btn {
        padding: 5px 8px;
        font-size: 10px;
        max-width: 90px;
    }
    
    .register-upcoming-events .upcoming-image-card {
        height: 180px;
    }
    
    .register-upcoming-events .two-card-image .upcoming-image-card {
        height: 160px;
    }
    
    .register-upcoming-events .hunting-details {
        padding: 10px;
    }
    
    .register-upcoming-events .card-content-title h4 {
        font-size: 12px;
        margin-bottom: 5px;
    }
    
    .register-upcoming-events .card-content-hunting .simple-text {
        font-size: 9px;
        margin-bottom: 6px;
    }
    
    .register-upcoming-events .card-content-hunting .btn {
        padding: 4px 8px;
        font-size: 9px;
        max-width: 80px;
    }
}

/* Shop Filters Responsive - Mobile and Tablet */
@media (max-width: 768px) {
    .shop-filters .filters-container {
        flex-direction: column;
        width: 100%;
        gap: 15px;
    }
    
    .shop-filters .filter-group {
        width: 100%;
    }
    
    .shop-filters .filter-select {
        width: 100%;
        padding: 8px 12px;
        font-size: 14px;
    }
    
    .shop-filters .btn-outline {
        width: 100%;
        padding: 8px 12px;
        font-size: 14px;
    }
}

@media (max-width: 480px) {
    .shop-filters .filters-container {
        flex-direction: column;
        width: 100%;
        gap: 12px;
    }
    
    .shop-filters .filter-group {
        width: 100%;
    }
    
    .shop-filters .filter-select {
        padding: 6px 10px;
        font-size: 12px;
    }
    
    .shop-filters .btn-outline {
        padding: 6px 10px;
        font-size: 12px;
    }
}

/* Sponsorship Categories Responsive - Tablet and Mobile */
@media (max-width: 768px) {
    .sponsorship-categories {
        display: flex !important;
        flex-direction: row !important;
        justify-content: center;
        gap: 0.5rem;
        margin-bottom: 2rem;
        flex-wrap: nowrap;
        overflow-x: auto;
        padding: 0 1rem;
    }
    
    .sponsorship-categories .category-tag {
        flex-shrink: 0;
        padding: 0.5rem 1rem;
        font-size: 0.9rem;
        white-space: nowrap;
    }
}

@media (max-width: 480px) {
    .sponsorship-categories {
        gap: 0.3rem;
        padding: 0 0.5rem;
    }
    
    .sponsorship-categories .category-tag {
        padding: 0.4rem 0.8rem;
        font-size: 0.8rem;
    }
}

/* Checkout Page Responsive - Tablet and Mobile */
@media (max-width: 768px) {
    .cart-container {
        grid-template-columns: 1fr !important;
        gap: 1.5rem !important;
        padding: 0 1rem !important;
    }
    
    .checkout-form {
        padding: 1rem !important;
    }
    
    .checkout-form .row {
        grid-template-columns: 1fr !important;
        gap: 0.75rem !important;
    }
    
    .checkout-form .col-md-6,
    .checkout-form .col-md-4,
    .checkout-form .col-md-3 {
        grid-column: span 1 !important;
    }
    
    .checkout-form .checkout-input {
        width: 100% !important;
        padding: 12px !important;
        font-size: 16px !important;
    }
    
    .checkout-form .form-label {
        font-size: 14px !important;
        margin-bottom: 8px !important;
    }
    
    .checkout-form h2,
    .checkout-form h3 {
        font-size: 1.5rem !important;
        margin-bottom: 1rem !important;
    }
    
    .checkout-form .form-check {
        margin: 1rem 0 !important;
    }
    
    .checkout-form .form-check-label {
        font-size: 14px !important;
    }
    
    .checkout-form #payBtn {
        padding: 1rem !important;
        font-size: 16px !important;
        margin-top: 1.5rem !important;
    }
    
    .cart-summary {
        position: static !important;
        margin-top: 1rem !important;
        padding: 1rem !important;
    }
    
    .cart-summary h3 {
        font-size: 1.2rem !important;
        margin-bottom: 1rem !important;
    }
    
    .summary-item {
        padding: 0.75rem 0 !important;
        font-size: 14px !important;
    }
    
    .summary-item.total {
        font-size: 1.1rem !important;
        padding: 1rem 0 !important;
    }
}

@media (max-width: 480px) {
    .cart-container {
        padding: 0 0.5rem !important;
        gap: 1rem !important;
    }
    
    .checkout-form {
        padding: 0.75rem !important;
    }
    
    .checkout-form .checkout-input {
        padding: 10px !important;
        font-size: 14px !important;
    }
    
    .checkout-form .form-label {
        font-size: 13px !important;
        margin-bottom: 6px !important;
    }
    
    .checkout-form h2,
    .checkout-form h3 {
        font-size: 1.3rem !important;
        margin-bottom: 0.75rem !important;
    }
    
    .checkout-form #payBtn {
        padding: 0.875rem !important;
        font-size: 14px !important;
    }
    
    .cart-summary {
        padding: 0.75rem !important;
    }
    
    .cart-summary h3 {
        font-size: 1.1rem !important;
    }
    
    .summary-item {
        padding: 0.5rem 0 !important;
        font-size: 13px !important;
    }
    
    .summary-item.total {
        font-size: 1rem !important;
        padding: 0.75rem 0 !important;
    }
    
    /* Cart items in summary */
    .cart-summary [style*="grid-template-columns:64px 1fr auto"] {
        grid-template-columns: 50px 1fr auto !important;
        gap: 0.5rem !important;
        padding: 0.4rem 0 !important;
    }
    
    .cart-summary img {
        width: 50px !important;
        height: 50px !important;
    }
    
    .cart-summary [style*="font-weight:600"] {
        font-size: 13px !important;
    }
    
    .cart-summary [style*="color:#666"] {
        font-size: 12px !important;
    }
}

/* Extra Small Mobile */
@media (max-width: 320px) {
    .cart-container {
        padding: 0 0.25rem !important;
    }
    
    .checkout-form {
        padding: 0.5rem !important;
    }
    
    .checkout-form .checkout-input {
        padding: 8px !important;
        font-size: 13px !important;
    }
    
    .checkout-form .form-label {
        font-size: 12px !important;
    }
    
    .checkout-form h2,
    .checkout-form h3 {
        font-size: 1.2rem !important;
    }
    
    .checkout-form #payBtn {
        padding: 0.75rem !important;
        font-size: 13px !important;
    }
    
    .cart-summary {
        padding: 0.5rem !important;
    }
    
    .summary-item {
        font-size: 12px !important;
    }
    
    .summary-item.total {
        font-size: 0.95rem !important;
    }
}