/* DARK THEME CSS START */
/* Hide moon by default */
.darkmode-moon {
  display: none;
}

.xyz {
  margin-bottom: 15px;
}

/* When dark mode is active, show moon and hide sun */
body.darkk .darkmode-sun {
  display: none;
}

body.darkk #sub-head-text {
  border-top: white 1px solid;
  border-bottom: white 1px solid;
}

body.darkk .darkmode-moon {
  display: inline;

}

body.darkk {
  background: #151515;
  color: white;

}

body.darkk .darkmodeheader {
  background: #151515;

  color: white;

}

body.darkk .footerdarkmode {
  color: white;
  background-color: #303030;

}

body.darkk .navdarkmode {
  color: white;
  box-shadow: 0 0 11px 5px rgba(255, 255, 255, 0.163);
  background-color: #303030;

}

body.darkk .darkmodelogo {
  /* transform: rotate(180deg) scale(1.3); */
  color: black;
  transform: rotate(360) scale(1.3);


}

body.darkk .darkmodesubheading {
  background: #151515;

  color: #c9c9c9;

}

body.darkk .contactdetail-in-darkmode {
  color: #000000;



}

body.darkk .darkmode {
  border: 1px white solid;
  background: #252526;
  color: white;
  box-shadow: 0 0 15px 5px rgba(75, 134, 244, 0.578);

}

body.darkk .spclbtn {
  border: 1px white solid;
  background: #3f3f40;
  color: white;


}

/* git */
body.darkk .spclbtn:hover {
  border: 1px white solid;
  background: #222222;
  color: white;
  box-shadow: 0 0 15px 5px rgba(75, 134, 244, 0.253);

}
.spclbtn:hover {
  border: 1px white solid;
  background: white;
  color: black;
  border: #000 1px solid;

}

/* resume */
body.darkk .spclbtn2 {
  border: 1px white solid;
  color: white;
  box-shadow: 0 0 15px 5px rgba(75, 134, 244, 0.253);
  background: #222222;

}

body.darkk .spclbtn2:hover {
  border: 1px white solid;
  box-shadow: 0 0 15px 5px rgba(75, 134, 244, 0);
  background: #3f3f40;
  color: white;

}

body.darkk .darkmodespcl {
  border: 1px white solid;
  background: #151515;
  color: white;
  box-shadow: 0 0 15px 5px rgba(75, 134, 244, 0.578);

}

body.darkk .headingborder {
  border-left: 3.5px solid rgb(75, 134, 244);
  border-top: none;
  border-right: none;
  border-bottom: none;

  margin-bottom: 1rem;
  height: 150px;
  padding-left: 30px;
  margin-left: 1.1rem;


}

body.darkk .skillsubheadingborder {

  border-top: none;
  border-right: none;
  border-bottom: none;
  border-bottom: 2px solid #ffffff;

  width: 100px;




}

body.darkk .skillsdarkmode {
  border: 1px white solid;
  background: #252526;
  color: white;
  box-shadow: 0 0 11px 5px rgba(255, 255, 255, 0.163);


}

/* WHEN LIGHT MODE */
.darkmodelogo {

  transition: transform 0.5s ease-in-out;
  color: #000;
}

.headingborder {
  border-left: 3px solid rgb(0, 0, 0);
  border-top: none;
  border-right: none;
  border-bottom: none;

  margin-bottom: 1rem;
  height: 150px;
  padding-left: 30px;
  margin-left: 1.1rem;


}

.skillsubheadingborder {
  border-top: none;
  border-right: none;
  border-bottom: none;
  border-bottom: 2px rgb(0, 0, 0) solid;
  width: 100px;


}

.navdarkmode {

  box-shadow: 0 0 11px 5px rgba(0, 0, 0, 0.163);

  color: #151515;

  background-color: rgba(255, 255, 255, 0.966);

}

.footerdarkmode {
  color: #151515;

  background-color: rgba(255, 255, 255, 0);


}

.darkmodesubheading {
  color: #595C5F;

}

.darkmode {
  background-color: #f8f9fa;
  box-shadow:
    0 12px 20px -3px rgba(0, 0, 0, 0.18),
    0 6px 8px -4px rgba(0, 0, 0, 0.12);
}

.skillsdarkmode {
  background-color: #f8f9fa;
  box-shadow:
    0 12px 20px -3px rgba(0, 0, 0, 0.18),
    0 6px 8px -4px rgba(0, 0, 0, 0.12);
}

/* DARK THEME CSS END  */
/* Body Background (deep dark)
#0D1117

Container Background (cards, sections, divs)
#161B22

Accent / Element Color (buttons, borders, highlights)
#238636 */

.my-img {
  width: 360px;
  height: 360px;
  border-radius: 50%;
  object-fit: cover;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 30px;
  filter: grayscale(60%) opacity(55%) blur(2px);
  transition: all 0.6s ease-in-out, transform 0.9s ease-in-out;
}

header {
  box-shadow: 0 0 11px 5px rgba(255, 255, 255, 0.163);
}

footer {
  box-shadow: 0 0 11px 5px rgba(255, 255, 255, 0.163);
}

/* Hover effect */
.my-img:hover {
  border-radius: 5px;
  box-shadow: 0 0 15px 5px rgb(75 133 244);
  transform: translateX(-5px) scale(1.07);
  width: 366px;
  height: 365px;
  border-radius: 1%;
  margin-top: 30px;
  filter: grayscale(0%);
}


/* Section left border box */
.section-box {
  border-left: 2px solid black;
  margin-bottom: 1rem;
  padding-left: 30px;
}

/* Prevent overflow white space */
html,
body {
  overflow-x: hidden;
}

body::selection {
  background-color: #0F172A;
  background-color: #1E293B;
  font-weight: bolder;
  color: white;
}

/* Mobile adjustments */
@media (max-width: 991.98px) {
  .my-img {
    width: 100%;
    max-width: 280px;
    height: 300px;
    border-radius: 50%;
    margin-top: 35px;
    margin-left: 2%;
    filter: grayscale(60%) opacity(55%) blur(2px);

    transition: all 0.6s ease-in-out, transform 0.9s ease-in-out;
  }

  .my-img:hover {
    box-shadow: 0 0 15px 5px rgb(75 133 244);
    transform: translateX(-5px) scale(1.1);
    max-width: 250px;
    height: 270px;
    border-radius: 1%;
    margin-top: 45px;
    margin-left: 8%;
    filter: grayscale(0%) brightness(1.3);
  }
}

/*  */
.card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: inherit;
  background-size: cover;
  background-position: center;
  transition: filter 0.3s ease, transform 0.3s ease, box-shadow 1.3s ease;
  z-index: 0;
}

/* content stays sharp */

.card:hover::before {
  transform: scale(1.2);
}

/*  */
.container:hover .card:not(:hover) {
  filter: blur(1.5px);
}

/*  */




.card:hover {
  box-shadow: 0 0 15px 3px rgb(75 133 244);

  transform: translateY(-8%) scale(0.95);

  background:url('static/uploads/{{i.img}}');

}

.card {
  transition: filter 0.3s ease, transform 0.3s ease, box-shadow 1.3s ease;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  height: 350px;



}

.card:hover .card-text-hover {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.card-text-hover {
  position: absolute;
  transform: translateY(100%);
  transition: filter 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
  bottom: 0;
  left: 0;
  width: 100%;
  font-size: smaller;
  padding: 15px;
  color: white;
  opacity: 0;
  visibility: hidden;

}

.card:hover .card-text-hover {
  background-color: rgba(126, 126, 126, 0);
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.card:hover .card-title {
  transform: translateY(-100%);
  /* move up on hover */

  opacity: 0;
  /* optional: fade slightly */
}

.card-title {
  transition: all 0.5s ease-in-out;
  transform: translateY(0);
  /* start position */
  opacity: 1;
}

small {
  text-align: right;
  margin-top: 140px;
  color: white;
}


.card1 {
  width: 950px;
  padding-left: 100px;
  padding-top: 45px;
  padding-bottom: 45px;

  padding-right: 100px;

}




@media (max-width: 991.98px) {

  .card1 {
    padding-left: 10px;
    padding-top: 45px;
    padding-bottom: 45px;
    padding-right: 10px;
    width: 450px;

  }
}


.contact-box {
  background-color: antiquewhite;
  width: 100%;
  max-width: 365px;
  margin: 0 auto;
  padding: 10px;
  margin-bottom: 1rem;
}


.card2 {

  width: 100%;

  padding: 2rem;
  border-radius: 10px;
}


.hrr {
  width: 600px;
  margin: 0 auto;
}