@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@200;300;400;500;600;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap");
:root {
  --color-primary: #00b7b5;
  --color-secondary: #e2e5e8;
  --color-tertiary: #0d1013;
  --color-fourth: #214966;
  --background-color: #ecf0f3;
  --color-con-bg: #ffffff;
  --color-con-br:#D4DAE0;
  --gradient-box-w: linear-gradient(145deg, #e4e8ec, #ffffff);
  --gradient-icon-h: linear-gradient(218deg, #26ccc2, #00b7b5);
  --gradient-bg-sf: linear-gradient(90deg, transparent, #2be1d5, transparent);
  --gradient-prog: linear-gradient(90deg, #8af7f593, #00b7b5);
  --shadow-in: inset 2px 3px 5px #d5dbdbb2;
  --shadow-white: 5px 5px 15px #d1d9e6, -5px -5px 15px #ffffff;
  --shadow-in-con: inset 0px 0px 2px #d5dbdbb2;
  --font-primary: "Poppins", sans-serif;
  --font-secondary: "Montserrat", sans-serif;

  --font-size-f1: 14px;
  --font-size-f2: 16px;
  --font-size-f3: 18px;
  --font-size-f4: 22px;
  --large-f1-size: 140px;

  --h1: 60px;
  --h2: 55px;
  --h3: 50px;
  --h4: 40px;
  --h5: 30px;
  --h6: 20px;
}
.dark-mode {
  --color-secondary: #010b0fe6;
  --color-tertiary: #ffffff;
  --color-fourth: #ffffff;
  --background-color: #1c1e21;
    --color-con-bg: #191b1f;
     --color-con-br: #131417;
  --gradient-box-w: linear-gradient(145deg, #16171b, #23272b);
  --gradient-icon-h: linear-gradient(145deg, #2ae0d4, #00b7b5);
  --gradient-bg-sf: linear-gradient(90deg, transparent, #2be1d5, transparent);
  --gradient-prog: linear-gradient(90deg, #8af7f593, #00b7b5);
  --shadow-in: inset 2px 3px 5px #0a0a0ab2;
  --shadow-white: 5px 5px 15px #1c1e22, -5px -5px 15px #262a2e;
  --shadow-in-con: inset 0px 0px 2px #0a0a0ab2;
}

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
  scrollbar-width: none;
}
body {
  background-color: var(--background-color);
  font-family: var(--font-primary);
}

a {
  text-decoration: none;
  display: inline-block;
}

.d-l-btn {
  position: fixed;
  cursor: pointer;
  height: 40px;
  width: 40px;
  top: 10%;
  left: 40px;
  border: none;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-f3);
  background-image: var(--gradient-box-w);
  color: var(--color-tertiary);
  box-shadow: var(--shadow-white);
  transition: all 0.3s linear;
  z-index: 1000;
  overflow: hidden;
}

.d-l-btn:hover {
  transform: scale(1.1);
  box-shadow: var(--shadow-in);
  color: var(--color-primary);
}

.d-l-btn i {
  position: absolute;
  transition: all 0.3s ease;
}

.d-l-btn .fa-moon {
  opacity: 1;
  transform: rotate(0deg) scale(1);
}

.d-l-btn .fa-sun {
  opacity: 0;
  transform: rotate(90deg) scale(0);
}

.dark-mode .d-l-btn .fa-moon {
  opacity: 0;
  transform: rotate(-90deg) scale(0);
}

.dark-mode .d-l-btn .fa-sun {
  opacity: 1;
  transform: rotate(0deg) scale(1);
}

.navbar {
  position: fixed;
  left: 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100vh;
  width: auto;
  gap: 20px;
}
.navbar a {
  display: flex;
  gap: 10px;
  align-items: center;
}
.navbar a .nav-name {
  position: relative;
  background-color: var(--gradient-box-w);
  padding: 5px;
  border-radius: 5px;
  color: var(--color-primary);
  box-shadow: var(--shadow-white);
  font-size: var(--font-size-f1);
  transition: 0.3s linear;
  opacity: 0;
  display: none;
}
.navbar a .nav-icon {
  height: 40px;
  width: 40px;
  border-radius: 50%;
  line-height: 40px;
  font-size: var(--font-size-f2);
  color: var(--color-tertiary);
  background-image: var(--gradient-box-w);
  box-shadow: var(--shadow-white);
  transition: 0.2s linear;
}

.navbar a :hover {
  color: var(--color-primary);
  box-shadow: var(--shadow-in);
  transform: scale(1.1);
}
.navbar a:hover > .nav-name {
  display: inline-block;
  opacity: 1;
}
.navbar a .active {
  box-shadow: var(--shadow-in);
  color: var(--color-primary);
  transform: scale(1.1);
  &.nav-icon {
    font-size: var(--font-size-f3);
  }
}
.main-container {
  width: 90%;
  min-height: 100vh;
  margin-left: auto;
  z-index: -1;
}
.area {
  position: relative;
  min-height: 100vh;
  height: auto;
  width: 100%;
  display: flex;
  align-items: center;
  padding: 50px;
}
.ptitle{
  position: absolute;
  text-align: center;
  top: 30px;
  left: 0;right: 0;
  margin: auto;
  line-height: 28px;
}
.ptitle h6{
  font-size: var(--font-size-f1);
  letter-spacing: 3px;
  font-weight: 300;
  color: var(--color-primary);
  font-family: var(--font-primary);
}
.ptitle h3{
  font-size: var(--h5);
  letter-spacing: 2px;
  font-weight: 600;
  color: var(--color-tertiary);
}

/* #Home-Page */
.Home {
  justify-content: flex-start;
}
.H-contant {
  height: 80vh;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.Home-l-contant {
  height: inherit;
  width: 55%;
  display: flex;
  align-items: center;
}
.introduction {
  display: flex;
  flex-direction: column;
}
.title {
  font-size: var(--font-size-f1);
  color: var(--color-primary);
  line-height: 30px;
  letter-spacing: 3px;
  text-transform: uppercase;
}
.introduction h1 {
  font-size: var(--h2);
  color: var(--color-tertiary);
}
.introduction h1 span {
  font-size: var(--h1);
  color: var(--color-primary);
  font-family: var(--font-secondary);
  letter-spacing: 3px;
}
.introduction .Bio {
  max-width: 590px;
  line-height: 1.8;
  font-size: var(--font-size-f2);
  margin-bottom: 40px;
  color: var(--color-tertiary);
  letter-spacing: 2px;
}
.introduction .Bio span {
  color: var(--color-primary);
  font-weight: 500;
  font-size: var(--font-size-f3);
}
.social-icon {
  margin-top: 25px;
  display: flex;
  gap: 30px;
  width: 50%;
  transition: 0.4s linear;
}
.social-icon .find-i {
  height: 50px;
  width: 50px;
  border-radius: 10px;
  line-height: 50px;
  font-size: var(--font-size-f4);
  background: var(--gradient-box-w);
  color: var(--color-tertiary);
  box-shadow: var(--shadow-white);
}
.social-icon .find-i:hover {
  color: var(--color-secondary);
  background: var(--gradient-icon-h);
  transform: translateY(-3px);
}

.Home-r-contant {
  height: inherit;
  width: 45%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.img-box {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 550px;
  width: 450px;
  padding: 10px;
  border-radius: 1%;
  background-image: var(--gradient-box-w);
  transition: 0.4s linear;
}
.img-box::before {
  content: "";
  position: absolute;
  height: 100%;
  width: 100%;
  background-image: conic-gradient(
    from var(--angle),
    var(--color-secondary),
    var(--color-secondary),
    var(--color-primary),
    var(--color-secondary),
    var(--color-secondary),
    var(--color-primary),
    var(--color-secondary)
  );
  box-shadow: var(--shadow-white);
  border-radius: inherit;
  z-index: -11;
  padding: 3px;
  animation: spin 7s linear infinite;
}
.main-pic {
  height: 550px;
  width: auto;
  z-index: 111;
}

.bg-sw-pd {
  background-image: var(--gradient-box-w);
  box-shadow: var(--shadow-white);
  padding: 20px;
  border-radius: 20px;
}

/* About-page */

.About {
  justify-content: start;
}
.grid-box {
  display: grid;
  grid-template-rows: repeat(6, 1fr);
  grid-template-columns: repeat(6, 1fr);
  gap: 25px;
  width: 90%;
  height: 80%;
  align-content: center;
  justify-content: center;
  padding-left: 60px;
  border-radius: 20px;
  margin-top: 60px;
}
.A-Box1 {
  grid-area: 1 / 1 / 7 / 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;
  gap: 10px;
  min-width: 350px;
}
.img-box2 {
  display: flex;
  align-items: center;
  justify-content: center;
  height: auto;
  width: 95%;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: var(--shadow-white);
  background: var(--gradient-box-w);
  overflow: hidden;
  z-index: 111;
}

.img-box2 img {
  width: 100%;
  height: auto;
  border-radius: 8px;
  transition: 0.3s linear;
}
.A-Box1:hover > .img-box2 > img {
  transform: scale(1.3);
}
.ab-info {
  height: 180px;
  width: 95%;
  line-height: 35px;
  font-size: var(--font-size-f1);
  font-family: var(--font-primary);
  color: var(--color-tertiary);
  text-transform: uppercase;
  padding-left: 8px;
}
.ab-info .ab-p1 {
  font-size: var(--font-size-f3);
  font-family: var(--font-secondary);
  color: var(--color-primary);
  font-weight: 600;
}
.btn {
  cursor: pointer;
  appearance: none;
  border: none;
  padding: 20px 60px;
  width: 100%;
  font-size: var(--font-size-f3);
  text-transform: uppercase;
  border-radius: 20px;
  background: var(--gradient-box-w);
  box-shadow: var(--shadow-white);
  color: var(--color-primary);
  transition: 0.3s linear;
}
.btn i {
  margin-left: 5px;
}
.btn:hover {
  background: var(--gradient-icon-h);
  color: var(--color-tertiary);
}

.A-Box2 {
  grid-area: 1 / 3 / 3 / 7;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-tertiary);
  gap: 15px;
  min-width: 640px;
  position: relative;
  overflow: hidden;
}
.A-Box2::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: var(--gradient-bg-sf);
  transition: left 0.5s ease;
}

.A-Box2 span {
  font-family: var(--font-secondary);
  font-size: var(--large-f1-size);
  font-weight: 700;
  color: var(--color-primary);
 
}
.A-Box2 .exp {
  line-height: 50px;
}
.exp h1 {
  font-size: var(--h4);
  letter-spacing: 1px;
}
.exp p {
  font-size: var(--font-size-f2);
}

.A-Box3 {
  grid-area: 3 / 3 / 5 / 5;
}
.A-Box4 {
  grid-area: 3 / 5 / 5 / 7;
}
.A-Box5 {
  grid-area: 5 / 3 / 7 / 5;
}
.A-Box6 {
  grid-area: 5 / 5 / 7 / 7;
}

.AbFx {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  color: var(--color-tertiary);
  transition: all 0.3s ease;
}
.AbFx::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: var(--gradient-bg-sf);
  transition: left 0.5s ease;
}
.AbFx:hover::before,
.A-Box2:hover::before {
  left: 100%;
}
.AbFx:hover,
.A-Box2:hover {
  border-bottom: 2px solid var(--color-primary);
  border-right: 2px solid var(--color-primary);
}
.AbFx .p1 {
  font-size: var(--h2);
  color: var(--color-primary);
  font-weight: 500;
}
.AbFx .p2 {
  font-size: var(--font-size-f4);
  text-transform: uppercase;
  font-weight: 450;
}

/* edu-page */

.E-contant {
  height: 80vh;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.edu-info {
  width: 45%;
  min-width: 570px;
  height: inherit;
  display: flex;
  align-items: center;
}
.edu-info-box {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}
.timeline {
  position: relative;
  height: inherit;
  width: 50px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
}
.timeline .line {
  position: absolute;
  height: 80%;
  width: 7px;
  background: var(--color-secondary);
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
}
.milestone {
  position: relative;
  width: 100%;
  height: 35%; /* Match eBox height */
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}
.crl {
  position: relative;
  height: 25px;
  width: 25px;
  border-radius: 50%;
  background: var(--color-primary);
  border: 6px solid var(--color-secondary);
  z-index: 11;
  left: auto; /* Reset */
}
.vline {
  position: absolute;
  width: 45px;
  height: 8px;
  background-color: var(--color-secondary);
  left: 50%;
}
.timeline .l1, .timeline .l2 {
  top: auto;
  bottom: auto;
}

.eBox {
  position: relative;
  width: 90%;
  height: 35%;
  color: var(--color-tertiary);
  background: var(--gradient-box-w);
  box-shadow: var(--shadow-white);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  padding: 20px;
  gap: 15px;
  z-index: 11;
  overflow: hidden;
}
.eBox::before {
  content: "";
  position: absolute;
  left: -100%;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: var(--gradient-icon-h);
  transition: 0.2s linear;
  z-index: -1;
}

.E-text {
  max-width: 440px;
  line-height: 30px;
  color: var(--color-tertiary);
}
.E-text h3 {
  font-size: var(--h6);
  font-family: var(--font-secondary);
  color: var(--color-primary);
}
.E-text p {
  font-size: var(--font-size-f2);
  line-height: 35px;
}
.E-text .p1 {
  font-weight: 600;
}

.eBox:hover::before {
  left: 0%;
  border: 1px solid var(--color-secondary);
}

.eBox:hover > .E-text {
  color: var(--color-secondary);
  transform: scale(1.01);
  &.E-text h3 {
    color: var(--color-fourth);
  }
}

/* Skils-page */

.Sikls {
  justify-content: start;
}
.S-Box1 {
  grid-area: 1 / 1 / 7 / 4;
  padding: 15px;
  min-width: 500px;
}
.S-Box2 {
  grid-area: 1 / 4 / 5 / 7;
  padding: 15px;
  min-width: 500px;
}

.box-s {
  height: 100%;
  width: 100%;
  border-radius: 14px;
  padding: 10px;
}
.box-s .s-title {
  color: var(--color-primary);
  font-size: var(--font-size-f4);
  font-weight: 600;
  letter-spacing: 3px;
}
.devB p {
  margin-bottom: 40px;
}

.skill {
  margin-bottom: 30px;
}

.skill-title {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
  font-size: var(--font-size-f1);
  letter-spacing: 2px;
  color: var(--color-fourth);
}
.skill-title span {
  display: flex;
  align-items: center;
}
.skill-title span img {
  height: 30px;
  width: auto;
  margin-right: 10px;
}

.progress {
  width: 100%;
  height: 8px;
  background: #e0e4e7;
  border-radius: 50px;
  overflow: hidden;
}

.progress span {
  display: block;
  width: 0;
  height: 100%;
  background: var(--gradient-prog);
  border-radius: 50px;
}
.S-Box3 {
  grid-area: 5 / 4 / 7 / 7;
  padding: 10px;
}
.sf-skils {
  margin-top: 15px;
  width: 90%;
  display: flex;
  gap: 15px;
  flex-wrap: wrap;
  font-size: var(--font-size-f2);
  color: var(--color-fourth);
  font-weight: 500;
  letter-spacing: 1px;
}
.sf-skils span i {
  font-size: var(--font-size-f3);
  color: var(--color-primary);
  margin-right: 5px;
}
@media screen and (max-height: 920px) {
  .Skils .devB p {
    margin-bottom: 20px;
  }
  .skill {
    margin-bottom: 4%;
  }
  .sf-skils{
    margin: 0;
  }
}

@media screen and (max-width: 1400px) {
  .Skils .devB p {
    margin-bottom: 15px;
  }
  .skill {
    margin-bottom: 10px;
  }
  .sf-skils {
    margin-top: 5px;
    gap: 5px;
  }
}

/* Achievments-page */

.Acievments {
  justify-content: start;
}
.Ac-Box1 {
  grid-area: 1 / 1 / 3 / 4;
}
.Ac-Box2 {
  grid-area: 1 / 4 / 3 / 7;
}
.Ac-Box3 {
  grid-area: 3 / 1 / 5 / 4;
}
.Ac-Box4 {
  grid-area: 3 / 4 / 5 / 7;
}
.Ac-Box5 {
  grid-area: 5 / 1 / 7 / 4;
}
.Ac-Box6 {
  grid-area: 5 / 4 / 7 / 7;
}
.ac-box {
 position: relative;
min-width: 480px;
 min-height: 180px;
overflow: hidden;
border-right: 5px solid var(--color-primary);
border-left: 2px solid var(--color-primary);
}
.ac-box h5{
font-size: var(--h6);
font-family: var(--font-secondary);
color: var(--color-primary);
}
.ac-box p{
  font-size: var(--font-size-f2);
  color: var(--color-tertiary);
}
.ac-box::before {
  content: "";
  position: absolute;
  left: 0;
  top: -100%;
  width: 100%;
  height: 100%;
  background: var(--gradient-icon-h);
  transition: 0.2s linear;
  z-index: -1;
}
.ac-box:hover::before{
 top: 0;
}
.ac-box:hover>h5{
  color: var(--color-fourth);
}
.ac-box:hover>p{
  color: var(--color-secondary);
}



/* Portfolio-page */

.Portfolio {
  justify-content: start;
}
.P-Box1 {
  grid-area: 1 / 1 / 4 / 3;
}
.P-Box2 {
  grid-area: 4 / 1 / 7 / 3;
}
.P-Box3 {
  grid-area: 1 / 3 / 4 / 5;
}
.P-Box4 {
  grid-area: 4 / 3 / 7 / 5;
}
.P-Box5 {
  grid-area: 1 / 5 / 4 / 7;
}
.P-Box6 {
  grid-area: 4 / 5 / 7 / 7;
}
.Portfolio h5{
  cursor: pointer;
  margin-top: 15px;
  font-size: var(--h6);
  color: var(--color-primary);
  transition: 0.4s linear;
}
.Portfolio h5 i{
  transform: rotate(-90deg);
  transition: 0.4s linear;
}
.Portfolio p{
  color: var(--color-tertiary);
}
.img-box3 {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 70%;
  width: 100%;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: var(--shadow-white);
  background: var(--gradient-box-w);
  overflow: hidden;
}
.img-box3 img{
  height: auto;
  width: 100%;
  transition: 0.4s linear;
}
.pfo{
  min-width: 320px;
}
.pfo:hover> .img-box3 img{
  transform: scale(1.1);
}
.pfo:hover>h6{
 text-decoration: underline;
}
  .pfo:hover> h6 i{
    transform: rotate(-135deg);
 }

/* Blogs-page */

.Blog {
  justify-content: start;
}
.B-Box1 {
  grid-area: 1 / 1 / 7 / 3;
}
.B-Box2 {
  grid-area: 1 / 3 / 4 / 5;
}
.B-Box3 {
  grid-area: 1 / 5/ 4 / 7;
}
.B-Box4 {
  grid-area: 4 / 3 / 7 / 5;
}
.B-Box5 {
  grid-area: 4 / 5 / 7 / 7;
}
 .img-box4 {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  width: 100%;
  height: 60%;
  overflow: hidden;
  box-shadow: var(--shadow-white);
  background: var(--gradient-box-w);
}
.B-Box1 .img-box4 img{
  position: relative;
  position: relative;
  width: 110%;
  height: auto;
  filter: grayscale(1);
  transition: 0.4s linear;
}
.box-b img{
  position: relative;
  width: 110%;
  height: auto;
  filter: grayscale(1);
   transition: 0.4s linear;
}
.Blog h4{
  font-size: var(--font-size-f3);
  margin: 5px 0 5px 0;
  color: var(--color-primary);
}
.Blog p{
  position: relative;
  font-size: var(--font-size-f1);
  color: var(--color-tertiary);
  text-align: justify;
}
.Blog p span{
  color: var(--color-primary);
  cursor: pointer;
}
.blog-box-b{
  min-width: 350px;
  min-height: 250px;
}
.blog-box-b:hover > .img-box4 > img {
  transform: scale(1.1);
  filter: grayscale(0);
}


/* Contact-page */

.Contact {
  justify-content: center;
}
.C-contant {
  margin-top: 60px;
  height: 80vh;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding-right: 100px;
}
.C-contant-l {
  position: relative;
  min-width: 380px;
  width: 35%;
  height: 95%;
  display: flex;
  flex-direction: column;
  gap: 30px;
}
.C-contant-l figure{
  width: 100%;
  height: 50%;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--shadow-white);
}
.C-contant-l figure iframe{
  width: 100%;
  height: 100%;
}
.con-info-txt{
  font-size: var(--font-size-f2);
  color: var(--color-tertiary);
  line-height: 35px;
}
.con-info-txt p:nth-of-type(1){
  text-transform: capitalize;
  margin-bottom: 20px;
}
.con-info-txt p:nth-of-type(2){
  margin-bottom: 20px;
}
.C-contant-r {
  position: relative;
  min-width: 560px;
  width: 45%;
  height: 95%;
}
.form{
  width: 100%;
  height: 100%;
display: flex;
flex-direction: column;
justify-content: space-around;
}
.form input{
  width: 100%;
  height: 50px;
  border-radius: 10px;
  appearance: none;
  background-color:var(--color-con-bg);
  border: 2px solid var(--color-con-br);
   outline-color:var(--color-primary) ;
  padding: 8px;
   font-size: var(--font-size-f1);
   color: var(--color-tertiary);
   box-shadow: var(--shadow-in-con);
}
.form input::placeholder{
  text-transform: uppercase;
  color: var(--color-tertiary);
}

.form .input-wrapper{
  display: flex;
  width: 100%;
  height: auto;
  justify-content: space-between;
}
.input-wrapper input{
  width: 48%;
  height: 50px;
}
.form textarea{
    resize:none;
    height: 30vh;
   width: 100%;
 border-radius: 10px;
  background-color: var(--color-con-bg);
  border: 2px solid var(--color-con-br);
  padding: 8px;
  font-size: var(--font-size-f2);
  color: var(--color-tertiary);
  outline-color:var(--color-primary) ;
  box-shadow: var(--shadow-in-con);
}
.form textarea::placeholder{
 text-transform: uppercase;
 color: var(--color-tertiary);
}