/* ============================================
   RESPONSIVE CSS - Mobile First Approach
   ============================================ */

/* ============================================
   EXTRA LARGE DEVICES (1400px and up)
   ============================================ */
@media (min-width: 1400px) {
    .container {
        max-width: 1320px;
    }
    
    .hero-title {
        font-size: 72px;
    }
    
    .hero-typing-wrapper {
        font-size: 36px;
    }
    
    .hero-image {
        width: 400px;
        height: 400px;
    }
    
    .section-title {
        font-size: 48px;
    }
    
    .section-padding {
        padding: 100px 0;
    }
}

/* ============================================
   LARGE DEVICES (1200px - 1399px)
   ============================================ */
@media (min-width: 1200px) and (max-width: 1399.98px) {
    .hero-title {
        font-size: 56px;
    }
    
    .hero-typing-wrapper {
        font-size: 28px;
    }
    
    .hero-image {
        width: 350px;
        height: 350px;
    }
}

/* ============================================
   LARGE DEVICES (992px - 1199px)
   ============================================ */
@media (max-width: 1199.98px) {
    .hero-title {
        font-size: 44px;
    }
    
    .hero-typing-wrapper {
        font-size: 24px;
    }
    
    .hero-image {
        width: 300px;
        height: 300px;
    }
    
    .floating-card {
        display: none;
    }
    
    .section-title {
        font-size: 36px;
    }
}

/* ============================================
   MEDIUM DEVICES (768px - 991px)
   ============================================ */
@media (max-width: 991.98px) {
    /* Navigation */
    .navbar-nav {
        padding-top: 16px;
        padding-bottom: 16px;
    }
    
    .navbar-nav .nav-link {
        padding: 10px 16px !important;
        text-align: center;
    }
    
    .navbar-nav .nav-link::after {
        bottom: 4px;
    }
    
    /* Hero Section */
    .hero-section {
        padding: 100px 0 60px;
        text-align: center;
    }
    
    .hero-title {
        font-size: 40px;
    }
    
    .hero-typing-wrapper {
        font-size: 22px;
        justify-content: center;
    }
    
    .hero-description {
        margin-left: auto;
        margin-right: auto;
    }
    
    .hero-buttons {
        justify-content: center;
    }
    
    .hero-social {
        justify-content: center;
    }
    
    .hero-image-wrapper {
        margin-top: 40px;
    }
    
    .hero-image {
        width: 280px;
        height: 280px;
        margin: 0 auto;
    }
    
    .gradient-blur {
        filter: blur(80px);
    }
    
    .gradient-1 {
        width: 400px;
        height: 400px;
    }
    
    .gradient-2 {
        width: 350px;
        height: 350px;
    }
    
    /* About Section */
    .about-content {
        padding: 24px !important;
    }
    
    .stat-card {
        padding: 16px !important;
    }
    
    .stat-number {
        font-size: 32px;
    }
    
    /* Timeline */
    .timeline {
        padding-left: 32px;
    }
    
    .timeline-icon {
        left: -24px;
        width: 38px;
        height: 38px;
        font-size: 16px;
    }
    
    .timeline-content {
        padding: 20px;
    }
    
    .timeline-content h4 {
        font-size: 20px;
    }
    
    /* Skills */
    .skill-category {
        padding: 20px;
    }
    
    /* Projects */
    .project-image {
        height: 200px;
    }
    
    /* GitHub */
    .github-stats {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .contribution-grid {
        grid-template-columns: repeat(10, 1fr);
    }
    
    /* Contact */
    .contact-info {
        margin-bottom: 24px;
    }
    
    .contact-item {
        padding: 12px;
    }
    
    /* Footer */
    .footer-section .row {
        gap: 16px;
    }
    
    .footer-links {
        justify-content: center !important;
    }
    
    .footer-social {
        justify-content: center;
    }
    
    .footer-copyright {
        text-align: center !important;
    }
}

/* ============================================
   SMALL DEVICES (576px - 767px)
   ============================================ */
@media (max-width: 767.98px) {
    /* Section Padding */
    .about-section,
    .education-section,
    .experience-section,
    .skills-section,
    .projects-section,
    .certificates-section,
    .github-section,
    .resume-section,
    .contact-section {
        padding: 50px 0;
    }
    
    /* Section Header */
    .section-header {
        margin-bottom: 32px;
    }
    
    .section-subtitle {
        font-size: 12px;
        padding: 4px 12px;
    }
    
    .section-title {
        font-size: 28px;
    }
    
    /* Hero Section */
    .hero-section {
        padding: 80px 0 40px;
        /* Use 0 instead of 'auto' for min-height for broader browser support (Firefox compatibility) */
        min-height: 0;
    }
    
    .hero-title {
        font-size: 32px;
    }
    
    .hero-typing-wrapper {
        font-size: 18px;
        flex-wrap: wrap;
        gap: 4px;
    }
    
    .hero-description {
        font-size: 15px;
        padding: 0 12px;
    }
    
    .hero-buttons {
        flex-direction: column;
        width: 100%;
        max-width: 300px;
        margin-left: auto;
        margin-right: auto;
    }
    
    .hero-buttons .btn {
        width: 100%;
        justify-content: center;
        padding: 12px 20px;
        font-size: 14px;
    }
    
    .hero-image {
        width: 220px;
        height: 220px;
    }
    
    .hero-badge .badge {
        font-size: 12px;
        padding: 6px 16px;
    }
    
    .gradient-blur {
        filter: blur(60px);
    }
    
    .gradient-1 {
        width: 300px;
        height: 300px;
        top: -5%;
        right: -5%;
    }
    
    .gradient-2 {
        width: 250px;
        height: 250px;
        bottom: -5%;
        left: -5%;
    }
    
    .gradient-3 {
        width: 200px;
        height: 200px;
    }
    
    /* About Section */
    .about-content {
        padding: 16px !important;
    }
    
    .about-content .about-title {
        font-size: 22px;
    }
    
    .about-content .about-text {
        font-size: 14px;
    }
    
    .info-item {
        padding: 10px 12px;
        font-size: 14px;
    }
    
    .info-item i {
        font-size: 18px;
    }
    
    .stat-card {
        padding: 12px !important;
    }
    
    .stat-number {
        font-size: 28px;
    }
    
    .stat-label {
        font-size: 12px;
    }
    
    /* Timeline */
    .timeline {
        padding-left: 24px;
    }
    
    .timeline::before {
        left: 10px;
    }
    
    .timeline-icon {
        left: -18px;
        width: 32px;
        height: 32px;
        font-size: 12px;
    }
    
    .timeline-content {
        padding: 16px;
    }
    
    .timeline-content h4 {
        font-size: 18px;
    }
    
    .timeline-content .institution {
        font-size: 14px;
    }
    
    .timeline-content .description {
        font-size: 14px;
    }
    
    .timeline-date {
        font-size: 12px;
        padding: 2px 10px;
    }
    
    /* Skills */
    .skill-category {
        padding: 16px;
    }
    
    .skill-category-header i {
        font-size: 22px;
    }
    
    .skill-category-header h4 {
        font-size: 18px;
    }
    
    .skill-info {
        font-size: 13px;
    }
    
    /* Projects */
    .project-filters {
        gap: 6px;
        margin-bottom: 24px;
    }
    
    .filter-btn {
        padding: 6px 14px;
        font-size: 12px;
    }
    
    .project-image {
        height: 180px;
    }
    
    .project-body {
        padding: 16px;
    }
    
    .project-title {
        font-size: 18px;
    }
    
    .project-description {
        font-size: 13px;
    }
    
    .project-links .btn {
        font-size: 12px;
        padding: 6px 14px;
    }
    
    /* Certificates */
    .certificate-card {
        padding: 16px;
    }
    
    .certificate-title {
        font-size: 16px;
    }
    
    .certificate-image {
        height: 120px;
    }
    
    .certificate-icon {
        font-size: 32px;
    }
    
    /* GitHub */
    .github-card {
        padding: 16px;
    }
    
    .github-card-title {
        font-size: 18px;
    }
    
    .github-stats {
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
    }
    
    .github-stats .stat-item {
        padding: 12px 8px;
    }
    
    .github-stats .stat-number {
        font-size: 22px;
    }
    
    .github-stats .stat-label {
        font-size: 10px;
    }
    
    .contribution-grid {
        grid-template-columns: repeat(8, 1fr);
        gap: 2px;
    }
    
    .language-name {
        font-size: 13px;
    }
    
    /* Resume */
    .resume-card {
        padding: 24px 16px;
    }
    
    .resume-icon {
        font-size: 48px;
    }
    
    .resume-title {
        font-size: 22px;
    }
    
    .resume-description {
        font-size: 14px;
    }
    
    .resume-actions {
        flex-direction: column;
        gap: 10px;
    }
    
    .resume-actions .btn {
        width: 100%;
        justify-content: center;
    }
    
    /* Contact */
    .contact-info,
    .contact-form {
        padding: 20px !important;
    }
    
    .contact-info-title,
    .contact-form-title {
        font-size: 20px;
    }
    
    .contact-item {
        padding: 10px 12px;
        gap: 12px;
    }
    
    .contact-icon {
        width: 34px;
        height: 34px;
        font-size: 14px;
    }
    
    .contact-item h6 {
        font-size: 13px;
    }
    
    .contact-item a,
    .contact-item p {
        font-size: 13px;
    }
    
    .contact-form .form-control {
        padding: 10px 14px;
        font-size: 14px;
    }
    
    /* Footer */
    .footer-section {
        padding: 24px 0;
    }
    
    .footer-links {
        gap: 16px !important;
    }
    
    .footer-links li a {
        font-size: 13px;
    }
    
    .footer-social a {
        width: 36px;
        height: 36px;
        font-size: 14px;
    }
    
    .footer-copyright {
        font-size: 12px;
    }
    
    /* Back to Top */
    .back-to-top {
        width: 40px;
        height: 40px;
        font-size: 16px;
        bottom: 20px;
        right: 20px;
    }
}

/* ============================================
   EXTRA SMALL DEVICES (less than 576px)
   ============================================ */
@media (max-width: 575.98px) {
    /* Section Padding */
    .about-section,
    .education-section,
    .experience-section,
    .skills-section,
    .projects-section,
    .certificates-section,
    .github-section,
    .resume-section,
    .contact-section {
        padding: 40px 0;
    }
    
    /* Hero Section */
    .hero-title {
        font-size: 28px;
    }
    
    .hero-typing-wrapper {
        font-size: 16px;
    }
    
    .typing-text {
        min-width: 120px;
    }
    
    .hero-image {
        width: 180px;
        height: 180px;
    }
    
    .hero-image .hero-image img {
        border-width: 3px;
    }
    
    .hero-buttons {
        max-width: 260px;
    }
    
    .hero-social {
        gap: 12px;
    }
    
    .social-link {
        width: 40px;
        height: 40px;
        font-size: 14px;
    }
    
    .gradient-blur {
        filter: blur(40px);
    }
    
    .gradient-1 {
        width: 200px;
        height: 200px;
    }
    
    .gradient-2 {
        width: 180px;
        height: 180px;
    }
    
    .gradient-3 {
        width: 150px;
        height: 150px;
    }
    
    /* Section Header */
    .section-title {
        font-size: 24px;
    }
    
    .section-subtitle {
        font-size: 11px;
    }
    
    /* Timeline */
    .timeline {
        padding-left: 20px;
    }
    
    .timeline::before {
        left: 8px;
    }
    
    .timeline-icon {
        left: -14px;
        width: 28px;
        height: 28px;
        font-size: 10px;
    }
    
    .timeline-content {
        padding: 14px;
    }
    
    .timeline-content h4 {
        font-size: 16px;
    }
    
    .timeline-content .institution {
        font-size: 13px;
    }
    
    .timeline-content .description {
        font-size: 13px;
    }
    
    .timeline-date {
        font-size: 11px;
        padding: 2px 8px;
    }
    
    /* Stats */
    .stat-number {
        font-size: 24px;
    }
    
    .stat-label {
        font-size: 11px;
    }
    
    /* Projects */
    .project-image {
        height: 160px;
    }
    
    .project-tags .tag {
        font-size: 10px;
        padding: 2px 10px;
    }
    
    .project-title {
        font-size: 16px;
    }
    
    .project-description {
        font-size: 12px;
    }
    
    /* GitHub */
    .github-stats {
        grid-template-columns: 1fr 1fr;
    }
    
    .github-stats .stat-number {
        font-size: 20px;
    }
    
    .contribution-grid {
        grid-template-columns: repeat(6, 1fr);
        gap: 2px;
    }
    
    /* Resume */
    .resume-icon {
        font-size: 40px;
    }
    
    .resume-title {
        font-size: 20px;
    }
    
    /* Contact */
    .contact-item {
        flex-wrap: wrap;
    }
    
    .contact-item h6 {
        font-size: 12px;
    }
    
    .contact-item a,
    .contact-item p {
        font-size: 12px;
    }
    
    /* Modal */
    .modal-dialog {
        margin: 12px;
    }
    
    .modal-content {
        padding: 16px;
    }
    
    .modal-header h5 {
        font-size: 18px;
    }
    
    .modal-body {
        font-size: 14px;
    }
    
    .modal-body ul {
        padding-left: 20px;
    }
    
    .modal-footer {
        flex-wrap: wrap;
        gap: 8px;
    }
    
    .modal-footer .btn {
        flex: 1;
        min-width: 100px;
        font-size: 13px;
        padding: 8px 16px;
    }
}

/* ============================================
   LANDSCAPE PHONE ORIENTATION
   ============================================ */
@media (max-height: 600px) and (orientation: landscape) {
    .hero-section {
        min-height: unset;
        padding: 80px 0 40px;
    }
    
    .hero-title {
        font-size: 28px;
    }
    
    .hero-typing-wrapper {
        font-size: 16px;
    }
    
    .hero-image {
        width: 150px;
        height: 150px;
    }
    
    .hero-description {
        font-size: 14px;
        margin-bottom: 16px;
    }
    
    .hero-buttons .btn {
        padding: 8px 16px;
        font-size: 13px;
    }
    
    .gradient-blur {
        filter: blur(30px);
    }
}

/* ============================================
   PRINT STYLES
   ============================================ */
@media print {
    .glass-nav,
    .back-to-top,
    .scroll-progress,
    .loader-wrapper,
    .hero-social,
    .project-overlay,
    .project-links,
    .btn,
    .footer-section {
        display: none !important;
    }
    
    .hero-section {
        padding: 40px 0 !important;
        min-height: unset !important;
    }
    
    .glass-card {
        background: transparent !important;
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
        border: 1px solid #ddd !important;
        box-shadow: none !important;
    }
    
    .gradient-text {
        -webkit-text-fill-color: #000 !important;
        background: none !important;
        color: #000 !important;
    }
    
    .section-title {
        color: #000 !important;
    }
    
    .gradient-blur {
        display: none !important;
    }
    
    body {
        background: #fff !important;
        color: #000 !important;
    }
    
    .text-secondary {
        color: #666 !important;
    }
    
    a {
        color: #0066cc !important;
        text-decoration: underline !important;
    }
}

/* ============================================
   REDUCED MOTION PREFERENCES
   ============================================ */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    
    .floating-card,
    .gradient-blur,
    .particle {
        animation: none !important;
    }
    
    .reveal,
    .reveal-left,
    .reveal-right,
    .reveal-scale {
        opacity: 1 !important;
        transform: none !important;
    }
    
    .timeline-item {
        opacity: 1 !important;
        transform: none !important;
    }
}