/* global styling */
*{
    padding: 0 7px;
    background-color: #f8f9fa;
    
}


/* navigation bar */
.nav-container{
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #f0f8ff;
  padding: 10px 20px;
}

.burger, .close{
  display: none;
  font-size: 24px;
  cursor: pointer;
  color: #000;
  padding: 15px;
}

.nav-links{
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  background-color: whitesmoke;
  padding: 10px 20px;
}

.nav-links li{
  list-style: none;
}

.nav-links li a:hover{
  color: #000;
}
.nav-links li a{
  color: #00ccff;
  text-decoration: none;
  font-size: 20px;
}



/* style for 2nd headers */
h2 {
    font-size: 24px;
    color: #555;
    padding: 0 0;
}

h2:hover {
  color: black;
  /* background-color: transparent; makes sure no background shows */
  border: none; /* in case your h2 has a border */
}

/* style for pragarphs */
p {
    line-height: 1.6; /*spacing bwn txt lines*/
    margin-bottom: 20px;
    color: #333;
    font-size: 18px;
}

/* style for buttons */
button {
  background: linear-gradient(90deg, #0066ff, #00ccff);
  border:none ;
  padding: 12px 25px;
  border-radius: 25px;
  cursor: pointer;
  font-size: 1rem;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

button:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
}

/* card style */
.card{
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
    transition: transform 0.3s, box-shadow 0.3s;
}

.card i {
  font-size: 40px;
  margin-bottom: 15px;
}

.card h4 {
    margin: 10px 0;
    font-size: 20px;
    color: #333;
}

.card p {
  font-size: 14px;
  color: #555;
  line-height: 1.5;
}

.card:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.45);
  cursor: pointer;
}


/* Welcome section */
#welcome {
    display: flex;  /*row wise arrangment of items*/
    align-items: center;
    justify-content: space-between; 
    max-width: 1100px;
    gap: 20px;
    margin-bottom: 60px;
}

/*70 % width to item .desc*/
.desc {
    width: 70%; 
}

h1 {
    font-size: 40px; /*txt size*/
    margin-bottom: 10px; /*bottom spacing*/
}

/* Profile picture */
.prof-pic {
  display: flex;
  justify-content: center;
}

.prof-pic img {
  width: 300px;
  height: 300px;
  object-fit: cover; /*crop image to fit image container*/
  border-radius: 50%; /*make image container circle*/
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2); /* soft shadow */
  
}



/* abt-section */
.what-i-do {
    text-align: center;
    padding: 50px 20px;
}

.abt-card {
    display: flex;
    justify-content: center;
    gap: 20px;
}

.abt-card .card {
    padding: 25px;
    border-radius: 25px;
    width: 280px;
    text-align: center;
}


/* education section */
/* education section */
.education {
    text-align: center;
    padding: 50px 20px;
}

.ed-card {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap; 
}

.ed-card .card {
    padding: 25px;
    border-radius: 25px;
    width: 280px;
    text-align: center;
    background: #f9f9f9; 
}



.ed-card img{
  width: 178px;
  height: 83px;
}


/* experience section */
.experience {
  display: flex;
  justify-content: center;   
  align-items: flex-start;   
  gap: 30px;
  margin: 60px auto;  /*center whole container*/
  max-width: 900px;  
  padding: 0 20px; 
}

.org-name {
  display: flex;
  flex-direction: column;
  border-left: 2px solid #ccc; 
  min-width: 180px;
}

.org-name button {
    display: flex;
  background: none;
  border: none;
  padding: 12px 20px;
  text-align: center;     
  cursor: pointer;
  font-size: 16px;
  color: #555;
  transition: all 0.3s ease;
  align-items: center;
  gap: 8px;   
  margin: 15px;            
}

.org-name button:hover {
  background: rgba(0,0,0,0.05);
}

.org-name button.active {
  color: #000;
  font-weight: 600;
  border-left: 3px solid #007acc; 
  background: rgba(0,0,0,0.03);
}

.org-name button img {
  width: 40px;   
  height: 40px;
  object-fit: contain;
}



/* hide all experience details on the right by default */
.exp-det {
  display: none;   
  flex: 1;
}

.exp-det h4 {
  font-size: 20px;
  margin-bottom: 5px;
}

.exp-det .period {
  font-size: 14px;
  color: #666;
  margin-bottom: 15px;
}

.exp-det ul {
  list-style: none;
  padding-left: 0;
}

.exp-det ul li {
  margin-bottom: 10px;
  padding-left: 20px;
  position: relative;
}

.exp-det ul li::before {
  content: "▹";  /* arrow/bullet */
  position: absolute;
  left: 0;
  color: #007acc;
}

/* projects section */
.proj-card .card {
  display: flex;
  border: 1px solid #ddd;
  border-radius: 20px;
  padding: 16px;
  margin: 30px 0;
  max-width: 100%;
}

.content {
  width: 70%;
}

.head {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* .head .icon {
  font-size: 24px;
} */

.links a {
  margin-left: 8px;
  text-decoration: none;
  color: #0077cc;
  font-size: 14px;
}

.links a:hover {
  text-decoration: underline;
}

.proj-card .card h3 {
  margin: 12px 0 8px;
  font-size: 20px;
}

.proj-card .card h3:hover {
  color: #0077cc;
}

.proj-image img{
  border-radius: 10%;
  width: 448px;
  height: 266px;
}

.tools {
  list-style: none;
  padding: 0;
  margin-top: 12px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.tools li {
  background: #f0f0f0;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
}

/* skills section   */
.skills {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.skill {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0px 4px 8px rgba(0,0,0,0.05);
  padding: 20px;
  width: 140px;
  text-align: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.name {
  font-weight: 500;
  color: #333;
}



/* shadow when hovering on each skill container */
/* .skill:hover {
  transform: translateY(-5px);
  box-shadow: 0px 6px 15px rgba(0,0,0,0.1);
} */


/* contact section */

#contacts {
  text-align: center;  /*center text in the contact section*/
  padding: 60px 20px;
  background: #f9f9f9;
}

.contact {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
}

/* Contact Info */
.info {
  text-align: left;
  font-size: 1rem;
  line-height: 1.8;
}

/* Contact Form */
.form {
  display: flex;
  flex-direction: column;
  gap: 15px;
  width: 100%;
  max-width: 400px;
}

.form input,
.form textarea {
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 8px;
  font-size: 1rem;
  width: 100%;
}






/* footer section */
footer {
  background: whitesmoke;
  color: black;
  padding: 40px 20px 20px;
  text-align: center;
}

.footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

/* Footer Links */
.footer .links {
  list-style: none;
  display: flex;
  gap: 25px;
  padding: 0;
  margin: 0;
}

.footer .links a {
  color: black;
  text-decoration: none;
  transition: color 0.3s;
}

.footer .links a:hover {
  color: #4a90e2;
}

/* Social Icons */
.socials {
  display: flex;
  gap: 20px;
}

.socials a {
  color: black;
  font-weight: bold;
  text-decoration: none;
  transition: color 0.3s;
}

.socials a:hover {
  color: #4a90e2;
}

/* copyright*/
copyright {
  margin-top: 20px;
  font-size: 0.9rem;
  color: whitesmoke;
}


/* responsive designs */

@media screen  and (max-width:1024px) {

  .logo{
    display: none;
  }

  .nav-links{
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
    padding: 20px;
    top: 60px;
    left: 0;
    right: 0;
  }

  .nav-links.show{
    display: flex;
  }

  .burger{ /*to display nav bar*/
    display: flex;
  }

  #welcome{
    flex-direction: column-reverse;
    align-items: center;
    width: 100%;
  }

  .desc{
    width: 100%;
    padding: 0 20px;
  }

  h1{
    font-size: 30px;
  }

  h2{
    font-size: 18;
  }

  .prof-pic{
    width: 100%;
    padding: 0 20px;
  }
  
  .skill {
  width: 100px;
  }


  
}


/* Responsive design for experience section */
@media (max-width: 1024px) {
  .experience {
    flex-direction: column;    /* align items vertically */
    align-items: center;       /* center everything */
    text-align: center;
  }

  .experience h2 {
    text-align: center;
    margin-bottom: 20px;
  }

  .org-name {
    border-left: none;         /* remove left border */
    display: flex;
    flex-direction: row;
    align-items: center;       /* center buttons */
    margin-bottom: 20px;
  }

  .org-name button {
    margin: 10px 0;            
    width: 200px;              
    justify-content: center;   /* center text + icons */
  }

  .exp-det {
    text-align: left;          /* align text to left*/
    width: 100%;               /* expand details block */
  }
}



@media (max-width: 720px) {

  /* what i do */
  .abt-card {
    flex-direction: column;
    align-items: center;
  }

  .abt-card .card {
    width: 90%;
    padding: 15px;
  }

  /* education */
  .ed-card {
    flex-direction: column;
    align-items: center;
  }

  .ed-card .card {
    width: 90%;
    padding: 15px;
  }

  /* projects */
  .proj-card .card {
    flex-direction: column-reverse;   
    align-items: center;
    text-align: center;
  }

  .proj-image img {
    width: 100%;
    height: auto;
    margin-bottom: 15px;
  }

  .content {
    width: 100%;
  }

  /* skills */
  .skills {
    justify-content: center;
  }

  .skill {
    width: 100px;
    padding: 10px;
  }
}