style.css

body{
  margin:0;
  padding:0;
  background-color: #0F172A;
  color: #D1D5DB;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system,
  BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  overflow-x: hidden;


}


* {
  box-sizing: border-box;
}

.project-button2 a{
  text-decoration: none;
  color: #0891b2;
}
.project-button1 a{
  text-decoration: none;
  color: white;
}
/* Scrollbar width */
::-webkit-scrollbar {
  width: 10px;
}

/* Scrollbar track (background part) */
::-webkit-scrollbar-track {
  background: #0f172a; /* dark navy */
}

/* Scrollbar thumb (the draggable part) */
::-webkit-scrollbar-thumb {
  background: #06B6D4;  /* cyan color */
  border-radius: 10px;
}

/* Hover color */
::-webkit-scrollbar-thumb:hover {
  background: #0891b2; /* darker cyan */
}

header{
  display:flex;
  background-color: #11172d;
  height:70px;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  position: sticky;
  top:0;
  
  
}



.logo{
  margin-left: 50px;
  font-size: 30px;
  color: #38BDF8;
  
}
.header-links{
  display: flex;
  column-gap: 80px;
  width:1000px;
  
}
.header-parts a{
  font-size: 20px;
  text-decoration: none;
  color:white;

}
.header-parts a:hover{
  transition: 2s ease;
  transform: scale(1.05);
}
.header-parts a:hover{
  color: #38BDF8;
  border-bottom: 2px solid #38BDF8;
}

/* home */

.my-photo img{
  width:400px;
  height: 400px;
  border-radius: 400px;
  border: 2px solid rgb(123, 123, 237);
  box-shadow: 5px 5px 10px #06B6D4;
  

}
.home-page{
  width:100%;
  
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  padding-bottom: 50px;
  
  
  
}
.home-left{
  width:800px;
  height:70vh;
  display: flex;
  flex-direction: column;
  margin-top: 80px;
  row-gap: 25px;
  
}
.home-left .home-left-t1{
  font-size: 60px;
  width:600px;
  color:white;
  
}
.home-left .home-left-t2{
  font-size: 30px;
  color: #0891B2;
  
}
.home-left .home-left-t3{
  font-size: 20px;
}
.home-left .home-buttons{
  display: flex;
  flex-direction: row;
  column-gap: 40px;
}
.home-buttons .home-button{
  padding: 15px;
  font-size: 25px;
  text-decoration: none;
  border-radius: 15px;
  box-shadow: 1px 1px 5px #06B6D4;

}
.home-buttons .home-button:hover{
  transition: 2s ease;
  transform: scale(1.05);
}
.home-buttons .home-button1{
  background-color:#06B6D4;
  color:white;
}
.home-buttons .home-button2{
  background-color: #1E293B;
  border: 2px solid #06B6D4;
  color:white;
}

.home-icons{
  display: flex;
  column-gap: 30px;
}

.home-icons a {
  color:#9CA3AF; 
  font-size:24px;
  text-decoration: none;
}
.home-icons a:hover{
  color:#06B6D4;
}

.home-page .home-last{
  align-self:flex-end;
  position: absolute;
  bottom: 0%;
}
.home-last .home-last-icon a{
  font-size: 25px;
  color:#5272a4;

}
.home-last-icon a:hover{
  color:#0891B2;
}

/*  About Page */

.about-page{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: 50px;
}
.about-page .about-types{
  border-radius: 30px;
  display: flex;
  flex-direction: column;
  border: 1px solid #334155;
  background-color: #1E293B;
  box-shadow: 1px 1px 5px #06B6D4;

}
.about-types .about-paras{
  width:1000px;
  font-size: 1.125rem;
  font-weight: 400;
  line-height: 1.75rem; 
  padding:30px;
}
.about-paras p{
  font-size: 20px;
}
.about-page .about-tag{
  font-size: 36px;
  font-weight: 700px;     
  color:white;
  margin-right: 100px;
  align-self: center;
}
.about-types .about-keys{
  padding: 30px;
}
.about-keys h2{
  border-bottom: 3px solid #0891B2;
  max-width:fit-content;
}
.about-keys ul li{
  font-size: 20px;
  padding: 5px;
}
.about-keys ul{
  border-radius: 17px;
  background-color: #0F172A;
}
/*  skill page  */

.skills-page{
  display: flex;
  flex-direction: column;
  row-gap: 50px;
  width: 100%;

}
.skills-page .skills-tag{
  margin-top: 100px;
  font-size: 46px;
  font-weight: 800px;
  color:white;
  text-align: center;

  

}
.skills-page .skill-boxes{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
  padding: 30px;
  row-gap: 90px;
  column-gap: 20px;
 
}
.skill-boxes .box{
  margin-top: -50px;
  padding: 30px;
  width:350px;
  border-radius: 25px;
  display: flex;
  flex-direction: column;
  background-color: #1E293B;
  row-gap: 10px;
}
.skill-boxes .box:hover{
  transition: 2s ease;
  transform: scale(1.05);

}
.skill-boxes .skill-box1{
  border: 2px solid  #06B6D4;
  box-shadow: 1px 1px 5px #06B6D4;
}
.skill-boxes .skill-box1:hover{
  box-shadow: 2px 2px 10px #06B6D4;
}
.skill-box1 .icon1{
  background-color: #06B6D4;
}
.skill-boxes .skill-box2{
  border: 2px solid  #3B82F6;
  box-shadow: 1px 1px 5px #3B82F6;
  
}

.skill-boxes .skill-box2:hover{
  box-shadow: 2px 2px 10px #3B82F6;
}
.skill-box2 .icon2{
  background-color: #3B82F6;
}
.skill-boxes .skill-box3{
  border: 2px solid  #10B981;
  box-shadow: 1px 1px 5px #10B981;
}
.skill-boxes .skill-box3:hover{
  box-shadow: 2px 2px 10px #10B981;
}
.skill-box3 .icon3{
  background-color: #10B981;
}
.skill-boxes .skill-box4{
  border: 2px solid #F97316;
  box-shadow: 1px 1px 5px #F97316;
}
.skill-boxes .skill-box4:hover{
  box-shadow: 2px 2px 10px #F97316;
}
.skill-box4 .icon4{
  background-color: #F97316;
}
.skill-boxes .skill-box5{
  border: 2px solid #EC4899;
  box-shadow: 1px 1px 5px #EC4899;
}
.skill-boxes .skill-box5:hover{
  box-shadow: 2px 2px 10px #EC4899;
}
.skill-box5 .icon5{
  background-color: #EC4899;
}
.skill-boxes .skill-box6{
  border: 2px solid  #d65c6a;
  box-shadow: 1px 1px 5px #d65c6a;
}
.skill-boxes .skill-box6:hover{
  box-shadow: 2px 2px 10px #d65c6a;
}
.skill-box6 .icon6{
  background-color: #d65c6a;
}
.box .icon{
  padding: 10px;
  width: 50px;
  border-radius: 10px;
  font-size: 24px;
}
.box .skill-types{
  display: flex;
  column-gap: 20px;
  row-gap: 10px;
  flex-wrap: wrap;
}
.box span{
  font-size: 20px;
}
.box .skill-types p{
  padding: 9px;
  border-radius: 15px;
  font-size: 14px;
  background-color: #334155;
}
.box .skill-types span{
  padding: 9px;
  border-radius: 15px;
  font-size: 14px;
  background-color: #334155;
}

/*  Projects  */

.project-page{
  width:100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  row-gap: 50px;
  padding: 20px;
  

}
.project-page .project-tag{
  font-size: 46px;
  font-weight: 800px;
  color:white;
  margin-top: 100px;
}
.project-page .project-box img{
  width:450px;
  height:250px;
  object-fit: cover; 
  border-top-right-radius: 30px;
  border-top-left-radius: 30px;
}

.project-page .project-lists{
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  column-gap: 40px;
  row-gap: 50px;
  margin-left: -25px;
}          
.project-lists .project-box{
  display: flex;
  flex-direction: column;
  width:450px;
  background-color: #1E293B;
  border-radius: 30px;
  box-shadow: 5px 5px 5px #0891B2;
}
.project-lists .project-box:hover{
  transition: 2s ease;
  transform: scale(1.05);
  box-shadow: 2px 2px 10px #0891B2;
}
.project-lists .project-data{
  padding: 20px;
  display: flex;
  flex-direction: column;
  row-gap: 10px;
}
.project-data .pro-t1{
  font-size: 30px;
  color: white

  
}
.project-data .pro-t2{
  font-size: 20px;
}
.project-data ul{
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  padding: 0%;
  column-gap:10px;
  row-gap: 10px;
}
.project-data ul li{
  text-decoration: none;
  padding:9px;
  border-radius: 20px;
  background-color: #334155;
  font-size: 14px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.project-data .project-buttons{
  padding:0;
  display: flex;
  flex-direction: row;
  column-gap: 50px;
}
.project-buttons:hover{
  transition: 2s ease;
  transform: scale(1.05);
}
.project-buttons button{
  padding: 15px;
  width:200px;
  font-size: 20px;
  border-radius: 10px;
}
.project-buttons .project-button1{
  background-color:#06B6D4;
  color:white;
  font-size: 25px;
}
.project-buttons .project-button2{
  font-size: 25px;
  border: 2px solid #06B6D4;
  background-color: #334155;
  color: #06B6D4;
}


/* Achevements page */


.achievements-page .achiev-tag{
  font-size: 36px;
  color:white;
  font-weight: 700px;
  text-align: center;
}
.achievements-page .achiev-types{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
  padding: 20px;
  row-gap: 30px;
  column-gap: 20px;
}
.achiev-types .achiev-box{
  width:650px;
  border-radius: 25px;
  background-color: #1E293B;
  padding: 30px;
  display: flex;
  flex-direction: column;
  row-gap: 10px;
   box-shadow: 1px 1px 10px #0891B2;

}
.achiev-types .achiev-box:hover{
  transition: 2s ease;
  transform: scale(1.05);
  box-shadow: 2px 2px 10px #0891B2;
}

.achiev-types .achiev-box1{
  border: 2px solid #06B6D4;
}
.achiev-box1 .achiev-icon1{
  background-color: rgba(6, 182, 212, 0.1);
  width:30px;
  padding:9px;
  font-size: 24px;
  color:#06B6D4;
  border-radius: 10px;
}
.achiev-box .a1{
  font-size: 25px;
  font-weight: 600px;
  color:#06B6D4;
}
.achiev-types .achiev-box2{
  border: 2px solid #3B82F6;
}
.achiev-box2 .achiev-icon2{
  background-color: rgba(59, 130, 246, 0.1);
  width:30px;
  padding:9px;
  font-size: 24px;
  color:#3B82F6;
  border-radius: 10px;
}
.achiev-box .a2{
  font-size: 25px;
  font-weight: 600px;
  color:#3B82F6;
}
.achiev-types .achiev-box3{
  border: 2px solid #10B981;
}
.achiev-box3 .achiev-icon3{
  background-color: rgba(16, 185, 129, 0.1);
  width:30px;
  padding:9px;
  font-size: 24px;
  color:#10B981;
  border-radius: 10px;
}
.achiev-box .a3{
  font-size: 25px;
  font-weight: 600px;
  color:#10B981;
}
.achiev-types .achiev-box4{
  border: 2px solid #F97316;
}
.achiev-box4 .achiev-icon4{
  background-color: rgba(249, 115, 22, 0.1);
  width:30px;
  padding:9px;
  font-size: 24px;
  color:#F97316;
  border-radius: 10px;
}
.achiev-box .a4{
  font-size: 25px;
  font-weight: 600px;
  color:#F97316;
}
.achiev-box .b{
  font-size: 19px;
  font-weight: 400px;
  color:#D1D5DB;
}
/*   education page */

.education-page{
  width:100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding-bottom: 50px;
}
.education-page .education-tag{
  font-size: 46px;
  margin-top: 120px;
  font-weight: 800px;
  color: white;

}
.education-page .education-lists{
  display: flex;
  flex-direction: column;
  row-gap: 25px;
}
.education-page .education-box{
  border-radius: 20px;
  width:1100px;
  padding: 30px;
  display: flex;
  flex-direction: column;
  row-gap: 10px;
  background-color: #1E293B;
  border-left: 7px solid #06B6D4;
  box-shadow: 2px 2px 10px #0891B2;
}
.education-page .education-box:hover{
  transition: 2s ease;
  transform: scale(1.05);
  box-shadow: 2px 2px 10px #0891B2;
}
.education-box .dept{
  font-size: 20px;
  font-weight: 600;
  color: #FFFFFF;

}

.education-box .college{
  font-size: 16px;
  color: #D1D5DB;

}
.education-box .address{
  font-size: 14px;
  color: #9CA3AF;

}
.education-box .ed-year{
  display: flex;
  justify-content: space-between;
}
.education-box .year{
  font-size: 16px;
  color: #06B6D4;
  font-weight: 600;
  

}
.education-box .perc{
  width:100px;
  padding: 10px;
  border-radius: 25px;
  font-size: 14px;
  color: #06B6D4;
  background: rgba(6, 182, 212, 0.2);

}

/*  certificates page */

.certicates-page{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width:100%;
  padding-bottom: 50px;
}
.certicates-page .certi-tag{
  font-size: 36px;
  font-weight: 700;
  color: #FFFFFF;

}
.certi-types{
  border: 2px solid  #334155;
  background-color: rgba(30, 41, 59, 0.5);
  border-radius: 20px;
  display: flex;
  justify-content: space-between;
  row-gap: 20px;
  padding: 50px;
  width:1200px;
  flex-wrap: wrap;
  Color: #1E293B;
  box-shadow: 2px 2px 10px #0891B2;
}
.certi-types:hover{
  transition: 2s ease;
  transform: scale(1.05);
}
.certi-types .certi-box{
  border: 2px solid  #335544;
  width:500px;
  padding: 10px;
  border-radius: 20px;
  display: flex;
  row-gap: 10px;
  flex-direction: column;
  
}
.certi-types .certi-box:hover{
  border: 2px solid #38BDF8;
}

.certi-box .c1{
  font-size: 20px;
  font-weight: 600;
  color: #FFFFFF;

}
.certi-box .c2{
  font-size: 16px;
  color: #9CA3AF;

}

/* contact page */

.contact-page{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  row-gap: 50px;
  width:100%;
  height:90vh;
}
.contact-page .contact-tag{
  margin-top: 100px;
  font-size: 36px;
  font-weight: 700;
  color: #FFFFFF;

}
.contact-page .contact-types{
  border:2px solid #334155;
  display: flex;
  flex-direction: column;
  width:1100px;
  border-radius: 25px;
  background-color:rgba(30, 41, 59, 0.5);
  padding-bottom: 40px;
  padding-top: 30px;
  box-shadow: 2px 2px 10px #0891B2;

}
.contact-types:hover{
  transition: 2s ease;
  transform: scale(1.05);
}
.contact-types .contact-text{
  width:1000px;
  margin-left: 25px;
  font-size: 20px;
  margin-left: 95px;
}
.contact-text span{
  margin-left: 45px;
}
.contact-types .contact-middle-types{
  display: flex;
  flex-direction: row;
  column-gap: 50px;
  padding: 10px;
  justify-content: space-evenly;
}
.contact-middle-types .contact-middle{
  border: 2px solid rgb(74, 74, 145);
  background-color: #1E293B;
  width:400px;
  display: flex;
  column-gap: 10px;
  padding: 10px;
  border-radius: 20px;
  padding-left: 15px;
}
.contact-middle-types .contact-middle:hover{
  border:2px solid #38BDF8;
}
.contact-middle .contact-deta{
  display: flex;
  flex-direction: column;
  padding: 10px;
  width:900px;
  border-radius: 20px;

}
.contact-deta .contact-text2{
  font-size: 20px;
  color: #FFFFFF;
  font-weight: 500;

}
.contact-deta .contact-text1{
   font-size: 17px;
  color: #9CA3AF;

}
.contact-middle .contact-icon1{
  padding: 7px;
  font-size: 25px;
  width:100px;
  background-color: rgba(6, 182, 212, 0.20);
  color: #06B6D4;
  border-radius: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.contact-middle .contact-icon2{
  padding: 7px;
  font-size: 25px;
  width:100px;
  background-color: rgba(59, 130, 246, 0.20);
  color:#3B82F6;
  border-radius: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.contact-types .contact-last{
  justify-content: center;
  display: flex;
  align-items: center;
}
.contact-last .contact-last-butt {
  padding: 10px;
  display: flex;
  font-size: 16px;
  column-gap: 30px;
  color: #FFFFFF;
}
.contact-last-butt a{
  border-radius: 10px;
  padding: 15px;
  font-size: 25px;
  color:white;
  text-decoration: none;
  width:150px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.contact-last-butt .linkedlist-button{
  background-color: #06B6D4;
}
.contact-last-butt .linkedlist-button:hover{
  background-color: #0891B2;
}
.contact-last-butt .github-buuton{
  background-color: #334155;
  border: 2px solid #06B6D4;
}
.contact-last-butt .github-buuton:hover{
  background-color: #475569;
}
/* footer */
footer{
  display: flex;
  justify-content: center;
  padding: 25px;
  color: #9CA3AF;
  font-size: 20px;

}


/* --------------------------------------------------
   🎯 PERFECT MOBILE RESPONSIVE DESIGN
   Place this at BOTTOM of CSS file
---------------------------------------------------*/
@media(max-width:768px){

/* ---------------- GLOBAL ---------------- */
main{
  width:100%;
  max-width:420px;
  margin:0 auto;
}

*{
  box-sizing:border-box;
}

/* ---------------- HEADER ---------------- */
header{
  width:100%;
  height:auto;
  padding:10px 0;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:8px;
}

.logo{
  margin:0;
  font-size:22px;
}

.header-links{
  width:100%;
  display:flex;
  justify-content:center;
  gap:15px;
}

.header-parts a{
  font-size:14px;
}

/* ---------------- HOME ---------------- */
.home-page{
  width:100%;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  text-align:center;
  padding:40px 0;
  gap:15px;
}

.my-photo img{
  width:170px;
  height:170px;
}

.home-left{
  width:90%;
  max-width:380px;
  margin:0 auto;
  height:auto;
  padding:0;
  align-items:center;
}

.home-left .home-left-t1{
  font-size:26px;
}

.home-left .home-left-t2{
  font-size:18px;
}

.home-left .home-left-t3{
  font-size:14px;
}

.home-buttons{
  justify-content:center;
  gap:10px;
  flex-wrap:wrap;
}

.home-button{
  font-size:14px;
  padding:10px 15px;
}

.home-last{
  display:none;
}

/* ---------------- ABOUT ---------------- */
.about-page{
  width:100%;
  padding:25px 0;
  display:flex;
  flex-direction:column;
  align-items:center;
}

.about-tag{
  font-size:26px;
  margin-bottom:10px;
  text-align:center;
}

.about-types{
  width:95% !important;
  max-width:420px !important;
  border-radius:20px;
}

.about-types .about-paras{
  width:100% !important;
  padding:12px 14px;
  text-align:center;
}

.about-paras p{
  font-size:14px;
  line-height:22px;
}

.about-keys{
  width:100%;
  padding:10px 12px;
}

.about-keys h2{
  font-size:16px;
  text-align:center;
}

.about-keys ul li{
  font-size:14px;
}

/* ---------------- SKILLS ---------------- */
.skills-tag{
  font-size:28px;
}

.skill-boxes{
  flex-direction:column;
  align-items:center;
}

.skill-boxes .box{
  width:90%;
}

/* ---------------- PROJECTS ---------------- */
.project-tag{
  font-size:30px;
  margin-top:50px;
}

.project-page .project-box img{
  width:100%;
}

.project-lists .project-box{
  width:95%;
}

/* ---------------- ACHIEVEMENTS ---------------- */
.achiev-tag{
  font-size:26px;
}

.achiev-box{
  width:95% !important;
}

/* ---------------- EDUCATION ---------------- */
.education-tag{
  font-size:30px;
}

.education-box{
  width:95%;
}

/* ---------------- CERTIFICATES ---------------- */
.certi-tag{
  font-size:28px;
}

.certi-types{
  width:95%;
  padding:15px;
  justify-content:center;
}

.certi-box{
  width:95%;
}

/* ---------------- CONTACT ---------------- */
.contact-tag{
  font-size:28px;
}

.contact-types{
  width:95%;
}

.contact-text{
  width:100%;
  margin:0;
  text-align:center;
}

.contact-middle-types{
  flex-direction:column;
  gap:15px;
}

.contact-middle{
  width:95%;
  margin:auto;
}

/* ---------------- FOOTER ---------------- */
footer{
  text-align:center;
  font-size:14px;
}

.project-page{
  width:100%;
  padding:10px 0;
  display:flex;
  flex-direction:column;
  align-items:center;
}

/* Title */
.project-tag{
  font-size:28px;
  margin-top:40px;
  text-align:center;
}

/* Project Container */
.project-lists{
  width:100%;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:25px;
  margin:0;
}

/* Project Box */
.project-lists .project-box{
  width:95%;
  max-width:420px;
  border-radius:20px;
}

/* Project Image */
.project-page .project-box img{
  width:100%;
  height:200px;
  object-fit:cover;
  border-radius:20px 20px 0 0;
}

/* Text */
.project-data{
  padding:15px;
}

/* Title text size */
.project-data .pro-t1{
  font-size:20px;
  text-align:center;
}

/* Description */
.project-data .pro-t2{
  font-size:14px;
  text-align:center;
}

/* Tech stack pills */
.project-data ul{
  justify-content:center;
}

/* Buttons */
.project-buttons{
  justify-content:center;
  gap:12px;
}

.project-buttons button{
  width:48%;
  font-size:16px;
  padding:10px;
}
.education-page{
  width:100%;
  padding:0;
  margin-top:30px;
}

.education-tag{
  font-size:26px;
  text-align:center;
}

.education-lists{
  width:95%;
  max-width:420px;
  margin:auto;
  gap:12px;
}

.education-box{
  width:100%;
  padding:15px;
  border-radius:15px;
}

/* Text Adjustments */
.education-box .dept{
  font-size:16px;
}

.education-box .college{
  font-size:14px;
}

.education-box .address{
  font-size:13px;
}

.education-box .year{
  font-size:14px;
}

.education-box .perc{
  font-size:12px;
  width:auto;
  padding:6px 10px;
}


/* ===================== MOBILE FIX : CERTIFICATES ===================== */

.certi-tag{
  font-size:26px;
  text-align:center;
}

.certi-types{
  width:95%;
  max-width:420px;
  padding:15px;
  gap:10px;
}

.certi-box{
  width:100%;
  padding:12px;
}


/* ===================== MOBILE FIX : CONTACT ===================== */

.contact-page{
  width:100%;
  height:auto;
  padding:0;
  margin-top:40px;
}

.contact-tag{
  font-size:26px;
  text-align:center;
}

.contact-types{
  width:95%;
  max-width:420px;
  margin:auto;
  padding:15px 10px;
}

.contact-text{
  width:100%;
  margin:0;
  text-align:center;
  font-size:14px;
}

/* Middle Contact Cards */
.contact-middle-types{
  flex-direction:column;
  gap:12px;
}

.contact-middle{
  width:100%;
}

/* Buttons */
.contact-last-butt{
  flex-direction:column;
  gap:10px;
}

.contact-last-butt a{
  width:100%;
  font-size:18px;
}
/* EDUCATION SECTION */
.education-page{
  width:100%;
  padding:20px 0;
  display:flex;
  flex-direction:column;
  align-items:center;
}

.education-tag{
  font-size:26px;
  text-align:center;
}

/* Boxes */
.education-lists{
  width:95%;
  max-width:420px;
}

.education-box{
  width:100%;
  max-width:420px;
  padding:18px;
}


/* CERTIFICATES SECTION */
.certicates-page{
  width:100%;
  padding:20px 0;
  display:flex;
  flex-direction:column;
  align-items:center;
}

.certi-tag{
  font-size:26px;
  text-align:center;
}

.certi-types{
  width:95%;
  max-width:420px;
  padding:12px;
  justify-content:center;
}

.certi-box{
  width:100%;
}


/* CONTACT SECTION */
.contact-page{
  width:100%;
  padding:20px 0;
  display:flex;
  flex-direction:column;
  align-items:center;
}

.contact-tag{
  font-size:28px;
  text-align:center;
}

/* Contact card */
.contact-types{
  width:95%;
  max-width:420px;
  padding:15px;
}

/* Email + Phone boxes */
.contact-middle-types{
  flex-direction:column;
  gap:10px;
}

/* Buttons center */
.contact-last{
  justify-content:center;
}

.contact-last-butt{
  justify-content:center;
  gap:15px;
}
/* Contact main container */
.contact-page{
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
}

/* Title center */
.contact-tag{
  text-align:center;
  font-size:26px;
}

/* Main Card */
.contact-types{
  width:95%;
  max-width:420px;
  padding:15px;
  margin:0 auto;
}

/* Paragraph */
.contact-text{
  width:100%;
  margin:0;
  text-align:center;
  font-size:14px;
}

/* STACK EMAIL + PHONE */
.contact-middle-types{
  width:100%;
  display:flex;
  flex-direction:column !important;
  justify-content:center;
  align-items:center;
  gap:12px;
}

/* Each box full width */
.contact-middle{
  width:100% !important;
  max-width:380px;
}

/* Buttons center */
.contact-last{
  display:flex;
  justify-content:center;
}

.contact-last-butt{
  width:100%;
  display:flex;
  justify-content:center;
  gap:15px;
}
.contact-page{
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
}

/* Title */
.contact-tag{
  text-align:center;
  font-size:24px;
  margin-bottom:8px;
}

/* Main Card */
.contact-types{
  width:95%;
  max-width:420px;
  padding:14px;
  margin:0 auto;
}

/* Fix paragraph overflow + center */
.contact-text{
  width:100%;
  margin:0;
  text-align:center;
  font-size:13px;
  line-height:20px;
  padding:5px;
  white-space:normal;
  overflow-wrap:break-word;
}

/* Stack Email + Phone */
.contact-middle-types{
  width:100%;
  display:flex;
  flex-direction:column !important;
  align-items:center;
  gap:10px;
}

/* Each Box */
.contact-middle{
  width:100% !important;
  max-width:360px;
}

/* Buttons Section */
.contact-last-butt{
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
}

/* Buttons smaller + neat */
.contact-last-butt a{
  width:180px;
  padding:10px;
  font-size:18px;
}

/* Contact Card Wrapper */
.contact-types{
  width:95% !important;
  max-width:420px;
  margin:0 auto;
  padding:12px;
}

/* 🟢 Fix overflowing paragraph text */
.contact-text{
  width:100% !important;
  margin:0 auto !important;
  text-align:center !important;
  font-size:13px;
  line-height:20px;
  padding:0 8px;
  white-space:normal !important;
  overflow:hidden !important;
  text-wrap:wrap;
}

/* Stack Email + Phone nicely */
.contact-middle-types{
  width:100%;
  flex-direction:column !important;
  align-items:center;
  gap:10px;
}

/* Each contact box */
.contact-middle{
  width:100% !important;
  max-width:360px;
}

/* Buttons neat + smaller */
.contact-last-butt{
  flex-direction:column;
  gap:6px;
}

.contact-last-butt a{
  width:170px;
  padding:8px;
  font-size:16px;
}

/* GLOBAL */
main{
  width:100%;
  max-width:420px;
  margin:0 auto;
}

/* HEADER */
header{
  width:100%;
  padding:10px 0;
  flex-direction:column;
  gap:8px;
}
.logo{font-size:22px;margin:0;}
.header-links{gap:12px;}
.header-parts a{font-size:14px;}

/* HOME */
.home-page{
  flex-direction:column;
  text-align:center;
  padding:30px 0;
  gap:15px;
}
.my-photo img{width:170px;height:170px;}
.home-left{width:90%;max-width:380px;align-items:center;}
.home-left-t1{font-size:26px;}
.home-left-t2{font-size:18px;}
.home-left-t3{font-size:14px;}
.home-buttons{gap:10px;flex-wrap:wrap;justify-content:center;}
.home-button{font-size:14px;padding:10px 14px;}
.home-last{display:none}

/* ABOUT */
.about-page{align-items:center;padding:25px 0;}
.about-tag{text-align:center;font-size:26px;}
.about-types{width:95%;max-width:420px;border-radius:20px;}
.about-paras{padding:12px;text-align:center;}
.about-paras p{font-size:14px;line-height:22px;}
.about-keys{padding:10px;}
.about-keys h2{text-align:center;font-size:16px;}
.about-keys li{font-size:14px;}

/* SKILLS */
.skills-tag{text-align:center;font-size:28px;}
.skill-boxes{flex-direction:column;align-items:center;}
.skill-boxes .box{width:92%;}

/* PROJECTS */
.project-page{align-items:center;padding:0;}
.project-tag{text-align:center;font-size:28px;}
.project-lists{
  width:100%;
  flex-direction:column;
  align-items:center;
  gap:25px;
}
.project-box{
  width:95%;
  max-width:420px;
  border-radius:18px;
}
.project-box img{
  width:100%;
  height:200px;
  border-radius:18px 18px 0 0;
}
.project-data{text-align:center;}
.project-data .pro-t1{font-size:20px;}
.project-data .pro-t2{font-size:14px;}
.project-data ul{justify-content:center;}
.project-buttons{
  justify-content:center;
  gap:10px;
}
.project-buttons button{
  width:48%;
  padding:9px;
  font-size:15px;
}

/* ACHIEVEMENTS */
.achiev-tag{text-align:center;font-size:26px;}
.achiev-box{width:95%;}

/* EDUCATION */
.education-page{align-items:center;margin-top:20px;}
.education-tag{text-align:center;font-size:28px;}
.education-lists{width:95%;max-width:420px;}
.education-box{width:100%;border-radius:16px;padding:14px;}
.education-box .dept{font-size:16px;}
.education-box .college{font-size:14px;}
.education-box .year{font-size:14px;}
.education-box .perc{font-size:12px;padding:5px 10px;}

/* CERTIFICATES */
.certicates-page{align-items:center;}
.certi-tag{text-align:center;font-size:26px;}
.certi-types{width:95%;max-width:420px;padding:12px;gap:10px;}
.certi-box{width:100%;}

/* CONTACT */
.contact-page{
  align-items:center;
  padding:10px 0;
}
.contact-tag{text-align:center;font-size:26px;}
.contact-types{
  width:95%;
  max-width:420px;
  padding:12px;
}
.contact-text{
  width:100%;
  text-align:center;
  font-size:14px;
  line-height:20px;
}
.contact-middle-types{
  flex-direction:column;
  align-items:center;
  gap:10px;
}
.contact-middle{
  width:100%;
  max-width:360px;
}
.contact-last-butt{
  flex-direction:column;
  align-items:center;
  gap:8px;
}
.contact-last-butt a{
  width:170px;
  padding:8px;
  font-size:16px;
}

/* FOOTER */
footer{text-align:center;font-size:14px;}
.contact-deta,
.contact-text,
.contact-middle {
    white-space: normal !important;
    overflow-wrap: break-word !important;
    word-wrap: break-word !important;
    word-break: break-word !important;
}
/* ===================== PERFECT MOBILE EDUCATION ===================== */
.education-page{
  width:100%;
  padding:20px 0;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
}

/* Education Heading */
.education-tag{
  font-size:26px;
  text-align:center;
  margin-bottom:10px;
}

/* Education List Container */
.education-lists{
  width:95%;
  max-width:420px;
  margin:auto;
  display:flex;
  flex-direction:column;
  gap:12px;
}

/* Each Education Box */
.education-box{
  width:100%;
  padding:16px;
  border-radius:15px;
}

/* Text Adjustments */
.education-box .dept{
  font-size:16px;
}

.education-box .college{
  font-size:14px;
}

.education-box .address{
  font-size:13px;
}

.education-box .year{
  font-size:14px;
}

.education-box .perc{
  font-size:12px;
  padding:6px 10px;
}
.education-page .education-lists{
  width:95% !important;
  max-width:420px !important;
  margin:auto !important;
  align-items:center;
}

.education-page .education-box{
  width:100% !important;
  max-width:420px !important;
  margin:auto !important;
}
/* MOBILE CGPA FIX */
.education-box .perc{
  width: fit-content !important;
  min-width: auto !important;
  display: inline-block;
  padding: 6px 12px;
  margin-top: 6px;
  align-self: flex-start;   /* left side — change to center if you want */
  font-size: 12px;
}
/* 📌 PERFECT MOBILE PROJECT CENTER FIX */
.project-page{
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
}

/* Project container */
.project-lists{
  width:100%;
  margin:0 auto !important;
  padding:0;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:25px;
}

/* Each project card */
.project-lists .project-box{
  width:95%;
  max-width:420px;
  margin:0 auto !important;
}
/* 🔥 Clean & Small Project Card on Mobile */
.project-lists{
  width:100%;
  margin:0 auto !important;
  padding:0;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:18px;
}

/* Smaller + neat project card */
.project-lists .project-box{
  width:88%;               /* smaller */
  max-width:360px;         /* tighter */
  border-radius:16px;
  margin:0 auto !important;
}

/* Smaller image */
.project-page .project-box img{
  height:170px;            /* reduce height */
  border-radius:16px 16px 0 0;
}

/* Reduce padding + text size */
.project-data{
  padding:12px;
}

.project-data .pro-t1{
  font-size:18px;
}

.project-data .pro-t2{
  font-size:13px;
}

/* Buttons smaller */
.project-buttons{
  justify-content:center;
  gap:8px;
}

.project-buttons button{
  width:46%;
  padding:8px;
  font-size:14px;
}
/* ---------- HOME PAGE MOBILE POLISH ---------- */

.home-left{
    width:95% !important;
    max-width:420px;
    margin:auto;
    text-align:center;
    align-items:center;
}

/* Main heading */
.home-left-t1{
    font-size:26px !important;
    line-height:32px;
}

/* Role text */
.home-left-t2{
    font-size:18px !important;
}

/* Description text */
.home-left-t3{
    font-size:14px !important;
    line-height:20px;
    text-align:center;
    text-justify:auto;
}
/* ---------- ABOUT PAGE MOBILE POLISH ---------- */

.about-page{
    width:100%;
    display:flex;
    flex-direction:column;
    align-items:center;
}

.about-types{
    width:95% !important;
    max-width:420px !important;
}

/* About text */
.about-paras{
    width:100% !important;
    text-align:justify;
    line-height:22px;
    font-size:14px;
    padding:10px 14px !important;
}

/* About heading */
.about-tag{
    font-size:26px !important;
    text-align:center;
}
  html, body{
      width:100%;
      max-width:100%;
      overflow-x:hidden !important;
  }

  main{
      width:100%;
      max-width:420px;
      margin:0 auto;
  }

  /* Stop any section from going wider */
  section, div{
      max-width:100% !important;
  }

  /* Important large sections */
  .home-page,
  .about-page,
  .skills-page,
  .project-page,
  .education-page,
  .certicates-page,
  .contact-page{
      width:100% !important;
      max-width:420px !important;
      margin:0 auto !important;
  }

  /* Fix big-width boxes */
  .home-left,
  .about-types,
  .education-box,
  .project-box,
  .certi-types,
  .contact-types{
      width:100% !important;
      max-width:380px !important;
      margin:auto;
  }

  /* Images responsive */
  img{
      max-width:100%;
      height:auto;
  }
  header{
  position: sticky;
  top: 0;
  z-index: 9999;
  width: 100%;
  background:#0F172A;
  border-bottom: 1px solid #1e293b;
}

}


@media(max-width:1024px){

  .home-page{
    flex-direction: column;
    text-align:center;
  }

  .my-photo img{
    width:260px;
    height:260px;
  }

  .home-left{
    width:85%;
  }

  .about-types,
  .skills-page,
  .project-box,
  .education-box,
  .certi-types,
  .contact-types{
    width:90%;
  }
}
@media(max-width:1366px){
  .home-left{
    width:70%;
  }

  .project-box{
    width:420px;
  }

  header{
    padding-left:20px;
    padding-right:20px;
  }
}