/* =========================================
   GLOBAL RESPONSIVE STYLES
   ========================================= */

/* Desktop - default styles work fine */

/* Tablets (768px and below) */
@media (max-width: 768px) {
  /* Section titles */
  section h2 {
    font-size: 2rem !important;
  }
  
  section h3 {
    font-size: 1.5rem !important;
  }
  
  /* Contact section */
  #contact h2 {
    font-size: 2rem !important;
    letter-spacing: 0.1em !important;
  }
  
  #contact h3 {
    font-size: 1.25rem !important;
    margin-bottom: 1.5rem !important;
  }
  
  #contact p {
    font-size: 0.95rem !important;
    margin-bottom: 1.5rem !important;
  }
  
  /* Contact form labels */
  #contact label {
    font-size: 0.75rem !important;
  }
  
  /* Contact form button */
  #contact button[type="submit"] {
    font-size: 0.8rem !important;
  }
  
  /* Contact icons info */
  #contact .space-y-4 {
    font-size: 0.9rem !important;
  }
  
  /* Contact social icons */
  #contact .flex.space-x-4 a {
    width: 2.5rem !important;
    height: 2.5rem !important;
  }
  
  /* Education section icons */
  #education i.fa-university,
  #education i.fa-graduation-cap {
    font-size: 2rem !important;
  }
  
  #education h3 {
    font-size: 1.5rem !important;
  }
  
  #education .text-lg {
    font-size: 1rem !important;
  }
  
  #education .text-sm {
    font-size: 0.875rem !important;
  }
  
  #education .text-base {
    font-size: 0.9rem !important;
  }
  
  /* About section */
  #about h3 {
    font-size: 1.5rem !important;
  }
  
  #about p {
    font-size: 0.95rem !important;
  }
  
  /* Projects section */
  .project-card-simplified h3 {
    font-size: 1.25rem !important;
  }
  
  .project-card-simplified p {
    font-size: 0.85rem !important;
  }
  
  /* Force single column for project grid */
  #projects .grid {
    grid-template-columns: 1fr !important;
  }
  
  /* Timeline adjustments */
  .timeline-title {
    font-size: 1.25rem !important;
  }
  
  .timeline-company {
    font-size: 1rem !important;
  }
  
  .timeline-description {
    font-size: 0.9rem !important;
  }
  
  .timeline-date {
    font-size: 0.85rem !important;
  }
  
  .timeline-skill {
    font-size: 0.75rem !important;
    padding: 0.35rem 0.7rem !important;
  }
  
  /* Reduce padding for sections */
  section {
    padding-top: 4rem !important;
    padding-bottom: 4rem !important;
  }
  
  /* Skills proficiency title */
  #skills h3 {
    font-size: 1.5rem !important;
  }
  
  /* Skills proficiency box */
  #about .p-8 {
    padding: 1.5rem !important;
  }
  
  #about .skill-bar {
    height: 0.65rem !important;
  }
  
  #about .mb-6 .text-sm {
    font-size: 0.85rem !important;
  }
}

/* Mobile phones (480px and below) */
@media (max-width: 480px) {
  /* Section titles */
  section h2 {
    font-size: 1.75rem !important;
    margin-bottom: 2rem !important;
  }
  
  section h3 {
    font-size: 1.25rem !important;
  }
  
  /* Contact section */
  #contact h2 {
    font-size: 1.75rem !important;
    letter-spacing: 0.08em !important;
  }
  
  #contact h3 {
    font-size: 1.1rem !important;
    margin-bottom: 1rem !important;
  }
  
  #contact p {
    font-size: 0.875rem !important;
    margin-bottom: 1rem !important;
    line-height: 1.6 !important;
  }
  
  /* Contact form labels */
  #contact label {
    font-size: 0.7rem !important;
  }
  
  /* Contact form inputs */
  #contact input,
  #contact textarea {
    font-size: 0.875rem !important;
    padding: 0.65rem !important;
  }
  
  /* Contact form button */
  #contact button[type="submit"] {
    font-size: 0.75rem !important;
    padding: 0.75rem 1.25rem !important;
  }
  
  /* Contact icons info */
  #contact .space-y-4 {
    font-size: 0.85rem !important;
  }
  
  #contact .space-y-4 i {
    font-size: 1rem !important;
  }
  
  /* Contact social icons */
  #contact .flex.space-x-4 {
    gap: 0.75rem !important;
  }
  
  #contact .flex.space-x-4 a {
    width: 2.25rem !important;
    height: 2.25rem !important;
  }
  
  #contact .flex.space-x-4 i {
    font-size: 0.9rem !important;
  }
  
  /* Education section */
  #education i.fa-university,
  #education i.fa-graduation-cap {
    font-size: 1.75rem !important;
  }
  
  #education h3 {
    font-size: 1.25rem !important;
  }
  
  #education .text-lg {
    font-size: 0.95rem !important;
  }
  
  #education .text-sm {
    font-size: 0.8rem !important;
  }
  
  #education .text-base {
    font-size: 0.85rem !important;
  }
  
  #education .border-l-4 {
    padding-left: 1rem !important;
  }
  
  #education .flex.gap-4 {
    gap: 0.75rem !important;
  }
  
  /* About section */
  #about h3 {
    font-size: 1.25rem !important;
  }
  
  #about p {
    font-size: 0.875rem !important;
    line-height: 1.6 !important;
  }
  
  #about .fa-lg {
    font-size: 1.25rem !important;
  }
  
  /* Projects section */
  .project-card-simplified {
    margin-bottom: 1rem !important;
  }
  
  .project-card-simplified h3 {
    font-size: 1.1rem !important;
  }
  
  .project-card-simplified p {
    font-size: 0.8rem !important;
  }
  
  .project-btn-view {
    font-size: 0.85rem !important;
    padding: 0.6rem 1rem !important;
  }
  
  /* Force single column for project grid */
  #projects .grid {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }
  
  #toggle-projects {
    font-size: 0.85rem !important;
    padding: 0.65rem 1.25rem !important;
  }
  
  /* Timeline */
  .timeline-title {
    font-size: 1.1rem !important;
  }
  
  .timeline-company {
    font-size: 0.95rem !important;
  }
  
  .timeline-description {
    font-size: 0.85rem !important;
    line-height: 1.5 !important;
  }
  
  .timeline-date {
    font-size: 0.8rem !important;
  }
  
  .timeline-skill {
    font-size: 0.7rem !important;
    padding: 0.3rem 0.6rem !important;
  }
  
  /* Reduce section padding even more */
  section {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
  
  /* Skills proficiency title */
  #skills h3 {
    font-size: 1.25rem !important;
  }
  
  /* Skills proficiency box */
  #about .p-8 {
    padding: 1rem !important;
  }
  
  #about .rounded-2xl {
    border-radius: 1rem !important;
  }
  
  #about .skill-bar {
    height: 0.6rem !important;
  }
  
  #about .mb-6 .text-sm {
    font-size: 0.8rem !important;
  }
  
  #about .mb-6 {
    margin-bottom: 1rem !important;
  }
  
  /* Social media icons */
  #about .fa-lg {
    font-size: 1.25rem !important;
  }
  
  #about .flex.space-x-4 {
    gap: 1rem !important;
  }
  
  /* Skill badges */
  #skills .tech-badge {
    font-size: 0.7rem !important;
    padding: 0.4rem 0.8rem !important;
  }
  
  /* Grid adjustments */
  .grid.gap-8 {
    gap: 1rem !important;
  }
  
  .grid.gap-6 {
    gap: 0.75rem !important;
  }
  
  /* Max width containers */
  .max-w-7xl,
  .max-w-6xl {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
  
  .max-w-3xl {
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
  }
  
  /* Back to top button */
  #back-to-top {
    bottom: 15px !important;
    right: 15px !important;
    width: 2.5rem !important;
    height: 2.5rem !important;
    font-size: 1.1rem !important;
  }
  
  /* Navbar mobile */
  #navbar {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
  
  .nav-link {
    font-size: 0.9rem !important;
  }
  
  /* Footer */
  footer {
    padding: 2rem 1rem !important;
  }
  
  footer .text-xl {
    font-size: 1.1rem !important;
  }
  
  footer .text-sm {
    font-size: 0.75rem !important;
  }
  
  footer a {
    font-size: 0.85rem !important;
  }
  
  footer .flex.space-x-6 {
    gap: 1rem !important;
    padding-right: 0 !important;
    padding-top: 1rem !important;
  }
}

/* Extra small phones (360px and below) */
@media (max-width: 360px) {
  section h2 {
    font-size: 1.5rem !important;
  }
  
  #contact h2 {
    font-size: 1.5rem !important;
  }
  
  #contact h3 {
    font-size: 1rem !important;
  }
  
  #contact p {
    font-size: 0.8rem !important;
  }
  
  #education h3 {
    font-size: 1.1rem !important;
  }
  
  .timeline-title {
    font-size: 1rem !important;
  }
  
  .project-card-simplified h3 {
    font-size: 1rem !important;
  }
  
  #about .p-8 {
    padding: 0.75rem !important;
  }
  
  .tech-badge {
    font-size: 0.65rem !important;
    padding: 0.35rem 0.7rem !important;
  }
  
  #back-to-top {
    bottom: 12px !important;
    right: 12px !important;
    width: 2.25rem !important;
    height: 2.25rem !important;
    font-size: 1rem !important;
  }
  
  footer a {
    font-size: 0.8rem !important;
  }
  
  .modal-title {
    font-size: 1.1rem !important;
  }
  
  .modal-body {
    padding: 0.75rem !important;
  }
}