/* =================================Responsive Design: All Devices================================= */

/* Large Desktop */@media screen and (min-width: 1400px) {

.hero-container,.about-wrapper,.contact-wrapper {max-width: 1400px;margin: 0 auto;}

}

/* Laptop & Tablet */@media screen and (max-width: 1024px) {

.hero-container,.about-wrapper,.contact-wrapper {grid-template-columns: 1fr !important;text-align: center;gap: 40px;}

.hero-image,.about-image {margin-top: 40px;}

.skills-grid,.projects-grid {grid-template-columns: repeat(2, 1fr) !important;}

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

}

/* Mobile Devices */@media screen and (max-width: 768px) {

section {padding: 70px 20px !important;}

h1 {font-size: 2rem !important;}

h2 {font-size: 1.5rem !important;}

p {font-size: 14px !important;line-height: 1.7;}

/* Navigation */

.nav-menu {position: fixed;top: 80px;left: -100%;width: 100%;height: calc(100vh - 80px);flex-direction: column;justify-content: flex-start;align-items: center;padding-top: 50px;overflow-y: auto;}

.nav-menu.active {left: 0;}

.hamburger {display: flex !important;}

/* Hero Section */

.hero-buttons,.hero-stats {flex-direction: column;gap: 15px;}

.avatar-container {width: 250px !important;height: 250px !important;}

/* About Section */

.info-grid,.contact-wrapper,.skills-grid,.projects-grid {grid-template-columns: 1fr !important;}

.stats,.about-buttons {flex-direction: column;gap: 15px;}

.tools-grid {grid-template-columns: repeat(2, 1fr) !important;}

/* Projects */

.ai-guide {display: none;}

/* Timeline */

.timeline::before {left: 20px !important;}

.timeline-item {width: 100% !important;padding-left: 60px !important;}

/* Contact */

.contact-form {padding: 25px !important;}

img,video,iframe {max-width: 100%;height: auto;}

}

/* Small Phones */@media screen and (max-width: 480px) {

section {padding: 60px 15px !important;}

h1 {font-size: 1.7rem !important;}

h2 {font-size: 1.3rem !important;}

.section-tag {font-size: 12px !important;}

.avatar-container {width: 200px !important;height: 200px !important;}

.planet-ring,.orbit,.ai-robot {display: none !important;}

.btn-primary,.btn-secondary,.project-btn {width: 100%;text-align: center;}

.tools-grid {grid-template-columns: 1fr !important;}

.hero-buttons,.about-buttons {width: 100%;}

.container,.hero-container,.about-wrapper,.contact-wrapper {width: 100%;overflow-x: hidden;}

}

/* Extra Small Devices */@media screen and (max-width: 360px) {

h1 {font-size: 1.5rem !important;}

h2 {font-size: 1.1rem !important;}

p {font-size: 13px !important;}

.avatar-container {width: 170px !important;height: 170px !important;}

}