/* Responsive Styles */

/* Large Desktop */
@media (max-width: 1400px) {
     :root {
         --section-spacing: 100px;
     }
     
     .content {
         padding: 30px 5%;
     }
 }
 
 /* Medium Desktop */
 @media (max-width: 1200px) {
     .header {
         margin-bottom: 60px;
     }
     
     .section-title {
         font-size: 2.2rem;
     }
     
     .about-content {
         gap: 30px;
     }
     
     .project-detail {
         grid-template-columns: 1fr;
     }
     
     .project-detail-image {
         max-height: 400px;
         overflow: hidden;
     }
 }
 
 /* Tablet */
 @media (max-width: 992px) {
     :root {
         --section-spacing: 80px;
     }
     
     .header {
         flex-direction: column;
         align-items: flex-start;
         gap: 20px;
     }
     
     .navigation ul {
         gap: 20px;
     }
     
     .about-content {
         grid-template-columns: 1fr;
         gap: 40px;
     }
     
     .skills-container {
         padding-top: 20px;
         border-top: 1px solid rgba(255, 255, 255, 0.1);
     }
     
     .contact-methods {
         flex-direction: column;
         gap: 15px;
     }
 }
 
 /* Mobile Large */
 @media (max-width: 768px) {
     .logo {
         font-size: 2.5rem;
     }
     
     .tagline {
         font-size: 0.9rem;
     }
     
     .section-title {
         font-size: 2rem;
     }
     
     .section-subtitle {
         font-size: 1rem;
     }
     
     .projects-grid {
         grid-template-columns: 1fr;
     }
     
     .skills-clusters {
         grid-template-columns: 1fr;
         gap: 20px;
     }
     
     .modal-body {
         padding: 30px 20px;
     }
 }
 
 /* Mobile Small */
 @media (max-width: 480px) {
     .header {
         margin-bottom: 40px;
     }
     
     .logo {
         font-size: 2rem;
     }
     
     .navigation ul {
         gap: 15px;
     }
     
     .nav-link {
         font-size: 0.9rem;
     }
     
     .section-title {
         font-size: 1.8rem;
     }
     
     .section-title::after {
         width: 40px;
     }
     
     .about-text {
         font-size: 1rem;
     }
     
     .project-card {
         height: auto;
     }
 }