:root{
  /*--bg-color:rgb(10, 10, 10); */
  --bg-color:rgba(19, 25, 32);
  --text-color:white;
  /*--navbar-bgcolor:rgb(26, 26, 26); */
  --navbar-bgcolor:rgb(27, 35, 45);
  --navbar-ulcolor:rgb(170, 170, 170);
  /*--classic-blue:rgb(13, 105, 175); */
  --classic-blue:rgb(66, 180, 255);
  --btnhover:rgba(13, 105, 175, 0.5);
  --card-textclr:rgb(153, 153, 153);
  /*--input-bgcolor:rgb(43, 43, 43); */
  --input-bgcolor:rgba(19, 25, 32);
  --input-textclr:rgb(68, 68, 68);
  --dm-color:rgb(255, 52, 0);
  --dm-bgcolor: white;
}

.darkmode{
  --bg-color:rgb(255, 255, 255);
  --text-color: black;
  --navbar-bgcolor: rgb(235, 235, 235);
  --navbar-ulcolor:black;
  --classic-blue:rgb(255, 52, 0);
  --btnhover:rgb(255, 52, 0,0.5);
  --card-textclr:black;
  --input-bgcolor:White;
  --input-textclr:black;
  --dm-color:yellow;
  --dm-bgcolor:rgb(26, 26, 26);
}

#theme-switch{
  height:25px;
  width: 25px;
  padding: 0%;
  color: red;
  border:none;
  border-radius: 50%;
  background-color: var(--navbar-bgcolor);
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  right: 30px;
  transition: background-color 0.8s ease ,box-shadow 0.8s ease;
}

#theme-switch:hover{
  background-color: var(--dm-bgcolor);
  box-shadow:0 0 18px var(--dm-bgcolor);
}

#theme-switch svg{
  fill: var(--dm-color);
}
#theme-switch svg:last-child{
  display: none;
}
.darkmode #theme-switch svg:first-child{
  display: none;
}
.darkmode #theme-switch svg:last-child{
  display: block;
}


* { margin: 0; padding: 0; box-sizing: border-box; }
body { background: var(--bg-color); color: var(--text-color); font-family: 'Inter', sans-serif; transition: background 0.5s ease;}
nav { display: flex; justify-content: space-between; align-items: center; padding: 20px 10%; }
nav ul { display: flex; gap: 30px; list-style: none; }
nav ul { color: var(--navbar-ulcolor); cursor: pointer; font-size: 14px; }
a{color: var(--navbar-ulcolor); text-decoration: none}

.hero {  margin-top: 40px; display: flex; justify-content: space-between; align-items: center; padding: 100px 10%; }
.hero-text { max-width: 50%; }
.hero-text h1 { font-size: 48px; margin-bottom: 20px; font-weight: 700; transition: margin-left 0.4s ease; }

.hero-text h1:hover{
  margin-left: 15px;
}

h3{
  transition: margin-left 0.4s ease;
}

h2:hover,h3:hover{
  margin-left: 15px;
}
.hero-text p { font-size: 16px; color: var(--card-textclr); margin-bottom: 30px; line-height: 1.6; }
.btn {
  background: transparent;
  color: var(--classic-blue);
  border: 2px solid var(--classic-blue);
  padding: 10px 22px;
  border-radius: 6px;
  font-weight: bold;
  transition: 0.5s ease;
}

.btn:hover {
  background: var(--classic-blue);
  color: white;
  box-shadow: 0 0 10px var(--btnhover);
}
.hero img { width: 300px; height: 300px; border-radius: 50%; object-fit: cover; border: 5px solid rgb(34, 34, 34); }

.section { padding: 80px 10%; }
.section h2 { font-size: 32px; margin-bottom: 30px; border-left: 5px solid var(--classic-blue); padding-left: 15px;  transition: margin-left 0.4s ease}
.certificates,.projects, .papers { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 25px; }
.card { background: var(--navbar-bgcolor); padding: 20px; border-radius: 10px; border: 1px solid rgb(51, 51, 51); transition: box-shadow 0.5s ease, background 0.5s ease;}
.card h3 { color: var(--classic-blue); margin-bottom: 10px; transition: margin-left 0.5s ease;}
.card p { color: var(--card-textclr); font-size: 14px; }
.card:hover {
    box-shadow:0 0 10px var(--classic-blue);
}
label {
    color: var(--card-textclr);
    font-weight: 500;
    margin-bottom: 5px;
}
input, textarea {
    border-radius: 6px;
    padding: 10px;
    font-size: 14px;
    width: 100%;
    background-color: var(--input-bgcolor);
    color: var(--text-color);
    border: 1px solid var(--input-textclr);
    transition: border-color 0.3s ease;
}
input:focus, textarea:focus {
    outline: none;
    border-color: var(--classic-blue);
}
textarea {
    height: 120px;
    resize: vertical;
}

footer { text-align: center; padding: 30px; color: rgb(85, 85, 85); font-size: 14px; }

.card-middle { margin: 275px; margin-top: 50px; margin-bottom: 50px; }

.form-align { text-align: center;}

html {
  scroll-behavior: smooth;
}

.skills-category {
  margin-bottom: 40px;
}

.skills-category h3 {
  font-size: 20px;
  margin-bottom: 15px;
  color: var(--classic-blue);
}

.skills-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 25px;
  justify-content: center;
}

.skill {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100px;
  padding: 20px;
  background-color: var(--navbar-bgcolor);
  border: 1px solid rgb(51, 51, 51);
  border-radius: 12px;
  transition: transform 0.3s ease, box-shadow 0.3s ease,
  background-color 0.5s ease;
}

.skill:hover {
  transform: scale(1.05);
  box-shadow: 0 0 10px var(--classic-blue);
}

.skill i {
  font-size: 30px;
  color: var(--classic-blue);
  margin-bottom: 10px;
}

.skill span {
  font-size: 14px;
  color: var(--card-textclr);
  text-align: center;
}

.links-margin{margin-left: 5px ; transition: color 0.3s ease; }

.links-margin:hover{
  color: var(--classic-blue);
}

.icons-img{
  width: 30px;
  height: 30px;
  margin-bottom: 10px;
}

#certificates .btn {
    padding: 8px 16px;
    color: var(--classic-blue);
    text-decoration: none;
    border-radius: 4px;
    border: 2px solid var(--classic-blue);
    transition: 0.5s ease;
}

#certificates .btn:hover {
    background-color: var(--classic-blue);
    color: white;
    box-shadow: 0 0 10px var(--btnhover);
}