/* Responsive Design */
/* Large Tablets and Small Desktops */
@media (max-width: 1024px) {
header {
padding: 15px 30px;
grid-template-columns: 1fr auto;
gap: 15px;
}
.logo-section {
grid-column: 1;
}
nav {
grid-column: 2;
grid-row: 1;
gap: 15px;
}
.social-icons {
grid-column: 1 / -1;
grid-row: 2;
justify-content: center;
}
.logo-section h1 {
font-size: 1.5rem;
}
.logo-section p {
font-size: 0.85rem;
}
nav a {
padding: 8px 15px;
font-size: 0.85rem;
}
section {
padding: 100px 30px 40px;
}
.about-content h2,
#education h2,
#projects h2,
#skills h2,
#contact h2 {
font-size: 2.5rem;
}
.projects-grid {
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 30px;
}
}
/* Tablets */
@media (max-width: 768px) {
header {
padding: 15px 20px;
grid-template-columns: 1fr;
gap: 15px;
}
.logo-section {
text-align: center;
}
.logo-section h1 {
font-size: 1.3rem;
}
.logo-section p {
font-size: 0.8rem;
}
nav {
justify-content: center;
flex-wrap: wrap;
gap: 8px;
}
nav a {
padding: 8px 12px;
font-size: 0.8rem;
}
.social-icons {
justify-content: center;
gap: 15px;
}
.social-icons a {
font-size: 1.3rem;
}
section {
padding: 100px 20px 30px;
min-height: auto;
}
#about {
flex-direction: column;
text-align: center;
gap: 30px;
}
.about-content h2 {
font-size: 2rem;
}
.about-content p {
font-size: 1rem;
}
.emoji-icon {
font-size: 1.3rem;
}
.download-btn {
padding: 12px 30px;
font-size: 0.95rem;
}
/* Current Role Section */
.role-content h2 {
font-size: 2rem;
}
.role-header h3 {
font-size: 1.6rem;
}
.role-title {
font-size: 1.1rem;
}
.role-details p,
.achievements-list li {
font-size: 1rem;
}
/* Education Timeline */
#education h2 {
font-size: 2rem;
margin-bottom: 40px;
}
.timeline::before {
left: 20px;
}
.timeline-content {
width: calc(100% - 60px);
margin-left: 60px !important;
padding: 20px;
}
.timeline-dot {
left: 20px;
}
.timeline-content h3 {
font-size: 1.3rem;
}
.timeline-content p {
font-size: 0.95rem;
}
.bhu-image {
height: 150px;
}
/* Projects */
#projects h2 {
font-size: 2rem;
margin-bottom: 40px;
}
.projects-grid {
grid-template-columns: 1fr;
gap: 25px;
}
.project-card {
padding: 25px;
}
.project-card h3 {
font-size: 1.4rem;
}
.project-card p {
font-size: 0.95rem;
}
.tech-badge {
font-size: 0.8rem;
padding: 4px 12px;
}
.project-link {
padding: 8px 20px;
font-size: 0.9rem;
}
/* Skills */
#skills h2 {
font-size: 2rem;
margin-bottom: 40px;
}
.skill-category {
padding: 20px;
}
.skill-category h3 {
font-size: 1.3rem;
}
.skill-item {
font-size: 0.85rem;
padding: 6px 14px;
}
/* Contact */
#contact h2 {
font-size: 2rem;
}
#contact p {
font-size: 1.1rem;
}
.form-group input,
.form-group textarea {
padding: 12px 20px;
font-size: 0.95rem;
}
.submit-btn {
padding: 12px 40px;
font-size: 1rem;
}
/* Modal */
.modal {
padding: 30px;
width: 90%;
max-width: 400px;
}
.modal h3 {
font-size: 1.6rem;
}
/* Footer */
footer {
padding: 40px 20px;
}
footer p {
font-size: 0.9rem;
}
#back-to-top {
width: 45px;
height: 45px;
bottom: 20px;
right: 20px;
}
#back-to-top i {
font-size: 1.3rem;
}
}
/* Mobile Phones */
@media (max-width: 480px) {
header {
padding: 12px 15px;
}
.logo-section h1 {
font-size: 1.1rem;
letter-spacing: 1px;
}
.logo-section p {
font-size: 0.7rem;
}
nav {
gap: 6px;
}
nav a {
padding: 6px 10px;
font-size: 0.75rem;
}
.social-icons {
gap: 12px;
}
.social-icons a {
font-size: 1.2rem;
}
section {
padding: 90px 15px 25px;
}
.about-content h2,
.role-content h2,
#education h2,
#projects h2,
#skills h2,
#contact h2 {
font-size: 1.8rem;
margin-bottom: 20px;
}
.about-content p {
font-size: 0.95rem;
line-height: 1.6;
}
.emoji-icon {
font-size: 1.2rem;
}
.download-btn {
padding: 10px 25px;
font-size: 0.9rem;
}
/* Current Role */
.role-header h3 {
font-size: 1.4rem;
}
.role-title {
font-size: 1rem;
}
.role-details p {
font-size: 0.95rem;
}
.achievements-list li {
font-size: 0.9rem;
padding-left: 25px;
}
/* Timeline */
.timeline-content {
width: calc(100% - 50px);
margin-left: 50px !important;
padding: 15px;
}
.timeline-dot {
left: 15px;
width: 16px;
height: 16px;
}
.timeline::before {
left: 15px;
width: 3px;
}
.timeline-content h3 {
font-size: 1.2rem;
}
.timeline-content p {
font-size: 0.9rem;
}
.bhu-image {
height: 120px;
}
/* Projects */
.project-card {
padding: 20px;
}
.project-card h3 {
font-size: 1.3rem;
}
.project-card p {
font-size: 0.9rem;
}
.tech-stack {
gap: 8px;
}
.tech-badge {
font-size: 0.75rem;
padding: 4px 10px;
}
.project-links {
flex-direction: column;
gap: 10px;
}
.project-link {
padding: 8px 20px;
font-size: 0.85rem;
text-align: center;
}
/* Skills */
.skill-category {
padding: 15px;
}
.skill-category h3 {
font-size: 1.2rem;
margin-bottom: 15px;
}
.skill-list {
gap: 10px;
}
.skill-item {
font-size: 0.8rem;
padding: 6px 12px;
}
/* Contact */
#contact p {
font-size: 1rem;
margin-bottom: 30px;
}
.form-group input,
.form-group textarea {
padding: 10px 15px;
font-size: 0.9rem;
}
.form-group textarea {
min-height: 120px;
}
.submit-btn {
padding: 10px 35px;
font-size: 0.95rem;
}
/* Modal */
.modal {
padding: 25px;
width: 85%;
}
.modal h3 {
font-size: 1.4rem;
}
.modal p {
font-size: 0.9rem;
}
/* Footer */
footer {
padding: 30px 15px;
}
footer p {
font-size: 0.85rem;
}
#back-to-top {
width: 40px;
height: 40px;
bottom: 15px;
right: 15px;
}
#back-to-top i {
font-size: 1.2rem;
}
}
/* Very Small Devices */
@media (max-width: 360px) {
.logo-section h1 {
font-size: 1rem;
}
.logo-section p {
font-size: 0.65rem;
}
nav a {
padding: 5px 8px;
font-size: 0.7rem;
}
.about-content h2,
.role-content h2,
#education h2,
#projects h2,
#skills h2,
#contact h2 {
font-size: 1.6rem;
}
.about-content p,
.role-details p {
font-size: 0.9rem;
}
section {
padding: 80px 12px 20px;
}
}