/* ========================================
   RESPONSIVE STYLESHEET
   Mobile-first approach
   ======================================== */

/* Mobile Styles (default) */
@media (max-width: 639px) {
    .container {
        padding: 0 1rem;
    }

    .section {
        padding: 3rem 0;
    }
}

/* Tablet Styles */
@media (min-width: 640px) and (max-width: 767px) {
    .container {
        padding: 0 1.25rem;
    }

    .section {
        padding: 4rem 0;
    }
}

/* Desktop Styles */
@media (min-width: 768px) {
    .container {
        padding: 0 2rem;
    }

    .section {
        padding: 5rem 0;
    }
}

/* Large Desktop */
@media (min-width: 1024px) {
    .container {
        padding: 0 3rem;
    }

    .section {
        padding: 6rem 0;
    }
}

/* Extra Large Desktop */
@media (min-width: 1280px) {
    .container {
        padding: 0 4rem;
    }

    .section {
        padding: 7rem 0;
    }
}

/* Hide Scrollbar on Mobile */
@media (max-width: 767px) {
    .no-scrollbar::-webkit-scrollbar {
        display: none;
    }

    .no-scrollbar {
        -ms-overflow-style: none;
        scrollbar-width: none;
    }
}

/* Adjust Font Sizes for Mobile */
@media (max-width: 639px) {
    .text-huge-mobile {
        font-size: 1.75rem;
    }
}

@media (max-width: 767px) {
    .text-large-mobile {
        font-size: 1.25rem;
    }
}

/* Stack Flex Items on Mobile */
@media (max-width: 639px) {
    .stack-mobile {
        flex-direction: column !important;
    }
}

@media (max-width: 767px) {
    .stack-mobile-sm {
        flex-direction: column !important;
    }
}

/* Hide Elements on Mobile */
@media (max-width: 639px) {
    .hidden-mobile {
        display: none;
    }
}

/* Hide Elements on Tablet */
@media (min-width: 640px) and (max-width: 767px) {
    .hidden-tablet {
        display: none;
    }
}

/* Show Elements on Desktop */
@media (min-width: 768px) {
    .hidden-desktop {
        display: none;
    }
}

/* Adjust Grid Columns for Mobile */
@media (max-width: 639px) {
    .grid-cols-mobile-1 {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 767px) {
    .grid-cols-mobile-2 {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 1023px) {
    .grid-cols-tablet-2 {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .grid-cols-tablet-3 {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

/* Responsive Padding */
@media (max-width: 639px) {
    .padding-mobile {
        padding: 1rem !important;
    }
}

@media (max-width: 767px) {
    .padding-mobile-sm {
        padding: 1.5rem !important;
    }
}

@media (max-width: 1023px) {
    .padding-tablet {
        padding: 2rem !important;
    }
}

/* Full Width on Mobile */
@media (max-width: 639px) {
    .full-width-mobile {
        width: 100% !important;
    }
}

@media (max-width: 767px) {
    .full-width-mobile-sm {
        width: 100% !important;
    }
}

/* Hide Scrollbar for Horizontal Scroll Containers */
@media (max-width: 639px) {
    .hide-scrollbar::-webkit-scrollbar {
        display: none;
    }

    .hide-scrollbar {
        -ms-overflow-style: none;
        scrollbar-width: none;
    }
}

/* Adjust Spacing for Mobile */
@media (max-width: 639px) {
    .spacing-mobile {
        gap: 1rem !important;
    }
}

@media (max-width: 767px) {
    .spacing-mobile-sm {
        gap: 1.5rem !important;
    }
}

@media (max-width: 1023px) {
    .spacing-tablet {
        gap: 2rem !important;
    }
}

/* Text Alignment */
@media (max-width: 639px) {
    .text-center-mobile {
        text-align: center !important;
    }
}

@media (max-width: 767px) {
    .text-center-mobile-sm {
        text-align: center !important;
    }
}