/* Author - Rahul Choudhary */

* { padding: 0; margin: 0; font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; } body { background-color: #f0f0f0; /* background-image: url("https://wallpaperaccess.com/full/317501.jpg"); */ font-family: 'Roboto Flex', sans-serif; font-weight: 400; background-size: cover;   /* image poore screen ko cover karegi */ background-repeat: no-repeat; /* repeat nahi hogi */ background-position: center;  /* center align rahegi */ min-height: 100vh; } @media screen and (min-width: 1024px)  { body { width: 70%; margin: 0 auto; /* Center the content horizontally */ } } /* Lift effect */ .lift { display: inline-block; transform: translateY(0); transition: transform 180ms ease, text-shadow 180ms ease; text-decoration: none; color: #c5d5c5; } .lift:hover { transform: translateY(-6px); text-shadow: 0 8px 18px rgba(255, 255, 255, 0.15); } /* Headings */ .headings { text-align: center; width: 9rem; height: 2rem; background: #bac1c2; margin-top: 10px; color: #000000; text-align: left; border-radius: 10%; padding: 0.25rem; font-size:  1rem; } .headings:hover { background: #9fa9a3; color: #ffffff; transform: scale(1.05); } .word_wrap { white-space: normal; word-wrap: break-word; overflow-wrap: break-word; } .resume-container { margin: auto; background: #fff; padding: 30px; border-radius: 10px; box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1); max-width: 70%; } /* My Name  */ .my_name { text-align: center; font-weight: bolder; white-space: nowrap; font-size: 400%; text-transform: uppercase; letter-spacing: 1rem; } .my_skill { text-align: center; font-weight: bolder; font-size: 1.8rem; font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; } .resume-container { background-color: #e0e2e4; /* background-image: url("https://www.dxomark.com/wp-content/uploads/medias/post-168239/Samsung-Galaxy-A35-5G_featured-image-packshot-review.jpg"); */ } .resume-container:hover { background: #b2c2bf; color: #ffffff; transform: scale(1.05); } /* Contact */ .contact a { text-decoration: none; color: #000000; font-size: 2rem; } .contact ul { display: grid; grid-template-columns: repeat(2, minmax(120px, 1fr)); gap: 10px; margin-top: 10px; margin: auto; list-style: none; } .contact li { background: #eaece5; padding: 8px 12px; border-radius: 8px; text-align: center; transition: 0.3s; } .contact li:hover { background: #96acb8; color: #ffffff; transform: scale(1.05); } .contact_member { width: 80%; text-align: center; align-items: center; font-size: 1.1rem; grid-template-columns: repeat(2, 1fr); } /* ------------------ Mobile (up to 480px) ------------------ */ @media (max-width: 480px) { .contact a { font-size: 1.4rem; /* readable but compact */ } .contact ul { grid-template-columns: 1fr; /* stack vertically */ gap: 8px; width: 100%; } .contact li { padding: 10px; font-size: 1rem; } .contact_member { width: 95%; font-size: 1rem; text-align: center; } } /* ------------------ Tablets (481px to 1024px) ------------------ */ @media (min-width: 481px) and (max-width: 1024px) { .contact a { font-size: 1.6rem; } .contact ul { grid-template-columns: repeat(2, 1fr); /* 2 per row */ gap: 12px; } .contact li { padding: 12px; font-size: 1.1rem; } .contact_member { width: 85%; font-size: 1.1rem; } } /* ------------------ Desktop / Large Screens (1025px and above) ------------------ */ @media (min-width: 1025px) { .contact a { font-size: 1.8rem; } .contact ul { grid-template-columns: repeat(2, minmax(200px, 1fr)); /* 2 columns, more spacing */ gap: 15px; } .contact li { padding: 14px; font-size: 1.2rem; } .contact_member { width: 80%; font-size: 1.2rem; } } /* Lift effect */ .lift { transform: translateY(0); transition: transform 180ms ease, text-shadow 180ms ease; text-decoration: none; color: #111; } .lift:hover { /* hower effect  */ transform: translateY(-6px); background-color: #000; text-shadow: 0 8px 18px rgba(0, 0, 0, 0.15); color: #f9f9f9; } /* About Me */ .about_section{ margin-top: 10px; margin-bottom: 10px; font-size: 1.2rem; font-weight: bold; line-height: 1.2; text-align: justify; text-justify: inter-word; } .about_section p{ margin-bottom: 10px; margin-top: 10px; } /* ------------------ Mobile (up to 480px) ------------------ */ @media (max-width: 480px) { } /* Education detail style*/ .education_details { width: 100%; border-collapse: collapse; margin-top: 10px; overflow-x: auto; /* scroll if table too wide */ } .education_details th, .education_details td { border: 1px solid #000; padding: 10px; text-align: left; word-wrap: break-word; } .education_details th { background: #e9f5ff; color: #000; text-transform: uppercase; font-size: 1.8rem; font-weight: 600; } .education_details td { font-size: 1.2rem; } .education_details a { text-decoration: none; color: #111; transition: color 0.3s ease; } .education_details a:hover { color: #1358fa; text-decoration: underline; } /* --------------------------- 📱 Mobile (up to 480px) ---------------------------- */ @media (max-width: 480px) { .education_details th { font-size: 1.3rem; padding: 12px 8px; } .education_details td { font-size: 1.1rem; font-weight: 600; padding: 10px 6px; line-height: 1.6; } .education_details { display: block; overflow-x: auto; } .education_details a{ text-decoration: underline; color: #5f5f8a; } } /* --------------------------- 💻 Tablet (481px - 768px) ---------------------------- */ @media (min-width: 481px) and (max-width: 768px) { .education_details th { font-size: 1.5rem; padding: 14px 10px; } .education_details td { font-size: 1.2rem; padding: 12px 8px; } .education_details { width: 100%; margin: 0 auto; } .education_details a{ text-decoration: underline; color: #5f5f8a; } } /* --------------------------- 🖥️ Large Screens (769px+) ---------------------------- */ @media (min-width: 769px) { .education_details th { font-size: 1.8rem; padding: 16px 12px; } .education_details td { font-size: 1.3rem; padding: 14px 10px; } } /*_________Skills________*/ .skill ul { display: grid; grid-template-columns: repeat(3, minmax(120px, 1fr)); gap: 10px; margin-top: 10px; list-style: none; } .skill li { background: #e9f5ff; padding: 8px 12px; border-radius: 8px; text-align: center; transition: 0.3s; font-size: 1.6rem; } .skill li:hover { background: #b2c2bf; color: #fff; transform: scale(1.05); } /* 📱 Mobile (up to 480px) */ @media (max-width: 480px) { .skill ul { grid-template-columns: repeat(2, 1fr); gap: 8px; } .skill li { font-size: 1.4rem; padding: 10px; font-weight: 500; } } /* --------------------------- 💻 Tablet (481px - 768px) ---------------------------- */ @media (min-width: 481px) and (max-width: 768px) { .skill ul { grid-template-columns: repeat(2, 1fr); /* two columns */ gap: 10px; } .skill li { font-size: 1.5rem; padding: 12px; font-weight: 600; } } /* --------------------------- 🖥️ Desktop (769px and above) ---------------------------- */ @media (min-width: 769px) { .skill ul { grid-template-columns: repeat(3, 1fr); /* three columns */ gap: 12px; } .skill li { font-size: 1.6rem; padding: 12px 14px; font-weight: 800; } } /* ✅ Responsive Styles for Certificate Section */ .certificate ul { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; margin-top: 10px; list-style: none; } .certificate li { background: #e9f5ff; padding: 8px 12px; border-radius: 8px; text-align: center; transition: 0.3s; } .certificate li:hover { background: #b2c2bf; color: #1358fa; transform: scale(1.05); } .certificate a { text-transform: none; text-decoration: none; color: #111; font-size: 1.6rem; } .certificate a:hover { color: #1358fa; text-decoration: underline; } /* Large screens (Desktops & Laptops) */ @media (min-width: 1025px) { .certificate ul { grid-template-columns: repeat(3, 1fr); gap: 16px; } .certificate li { font-size: 1.6rem; padding: 12px; } .certificate a { font-size: 1.6rem; } } /* Medium screens (Tablets) */ @media (min-width: 768px) and (max-width: 1024px) { .certificate ul { grid-template-columns: repeat(2, 1fr); gap: 12px; } .certificate li { font-size: 1.4rem; padding: 10px; } .certificate a { font-size: 1.4rem; font-weight: 500; text-decoration-line: underline; } } /* Small screens (Mobile phones) */ @media (max-width: 767px) { .certificate ul { grid-template-columns: 1fr; gap: 10px; } .certificate li { font-size: 1.3rem; padding: 12px; } .certificate a { font-size: 1.3rem; font-weight: 500; text-decoration: underline; } } /* Language */ .languages { font-family: "Segoe UI", Tahoma, sans-serif; max-width: 60vw; } .languages ul { list-style: none; padding: 0; margin: 0; } .languages li { display: flex; justify-content: space-between; align-items: center; font-size: 1.6rem; /* bigger text size */ padding: 10px 0; border-bottom: 5px dashed #ddd; } .languages li:last-child { border-bottom: none; } .languages .stars { font-size: 1.5rem; /* bigger star size */ color: #f39c12; /* gold stars */ letter-spacing: 3px; } /* Projects */ .projects-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 15px; margin-top: 15px; list-style: none; } .project-card { background: #f3f7ff; padding: 16px; border-radius: 10px; text-align: left; transition: 0.3s; border: 1px solid #e0e0e0; } .project-card:hover { background: #b2c2bf; color: #fff; transform: scale(1.05); } .project-card h3 { font-size: 1.3rem; margin-bottom: 8px; } .project-card ul { margin: 10px 0; padding-left: 18px; } .project-card li { font-size: 0.95rem; margin-bottom: 6px; } .project-card a { display: inline-block; margin-top: 10px; text-decoration: none; font-size: 0.9rem; font-weight: bold; color: #111; background: #fff; padding: 6px 12px; border-radius: 6px; transition: 0.3s; } .project-card:hover a { background: #fff; color: #da0909; }