@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.3/font/bootstrap-icons.css");

html, body {
    /* this is essential for the hero image to be stretched on the whole HTML Page based on the image size irrespective of the absence/presence of the   HTML content */
    height: 100%;
    margin: 0;
    padding: 0;
    background-color: rgb(224, 222, 222);
}
.hero{
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.4)), url("./assets/meet.jpg");
    height: 100%;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;
}
.navbar{
  background-color: rgba(0, 0, 0, 0.7) !important;
}
.navbar-brand, .navbar-nav {
    letter-spacing: 0.2rem;
}
.hero-title h1 {
  overflow: hidden; /* Ensures the content is not revealed until the animation */
  border-right: .15em solid white; /* The typwriter cursor */
  white-space: nowrap; /* Keeps the content on a single line */
  margin: 0 auto; /* Gives that scrolling effect as the typing happens */
  letter-spacing: .15em; /* Adjust as needed */
  animation: 
    typing 3.5s steps(40, end),
    blink-caret .75s step-end infinite;
}

/* The typing effect */
@keyframes typing {
  from { width: 0 }
  to { width: 100% }
}

/* The typewriter cursor effect */
@keyframes blink-caret {
  from, to { border-color: transparent }
  50% { border-color: white; }
}

.hero-subtitle{
    right: 15%;
    text-align: right;
}
.hero-subtitle h1 {
    overflow: hidden; /* Ensures the content is not revealed until the animation */
    border-right: .15em solid white; /* The typwriter cursor */
    margin: 0 auto; /* Gives that scrolling effect as the typing happens */
    letter-spacing: .15em; /* Adjust as needed */
    animation: 
      typing2 3.5s steps(40, end),
      blink-caret .75s step-end infinite;
    /* animation-delay: 5s; */
    animation-fill-mode: forwards;

}
/* The typing effect */
@keyframes typing2 {
    from { width: 0% }
    to { width: 100% }
  }
  
  /* The typewriter cursor effect */
  @keyframes blink-caret {
    from, to { border-color: transparent }
    50% { border-color: white; }
  }
.btn-contact{
    padding: 5px 20px !important;
    border-radius: 25px !important;
}

/* ********************************* */
/* about section */
.section-container{
    box-shadow: 0 1px 1px 0 rgb(0 0 0 / 6%), 0 2px 5px 0 rgb(0 0 0 / 20%);
}

/* ********************************* */
/* project works section */
.card, .resume-frame, form{
  box-shadow: 10px 10px 0 rgba(0, 0, 0, 0.717);
}
.moving-card{
  /* overflow: hidden; */
  /* transition-property, transition-duration, transition-timing-function, transition-delay */
  transition: all 0.4s ease-in 0s;
}
.moving-card:hover{
  transform: scale(1.05);
}
.card-img-top{
  height: 19rem;
}
.btn-github{
  background-color: #712cf9 !important;
  color: white !important;
}

/* ********************************* */
/* resume section */

/* ********************************* */
/* footer */
footer{
  background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.5)), url("./assets/x.jpeg");
  /* height: 100%; */
  background-position: top center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}
.footer-end{
  background-color: rgba(0, 0, 0, 0.3);
}
.bootstrap-text{
  color: #9c6aff;;
}

@media (max-width: 360px) {
  footer > div > section > .row  > .col {
    /* background-color: red; */
    max-width: 33%;
  }
  footer > div > section > .row{
    margin-bottom: 10rem;
  }

}

/* for samsung galaxy fold */
@media (max-width: 280px) {
  footer > div > section > .row  > .col {
    max-width: 33%;
    display: flex;
    /* border: 1px solid white;
    border-radius: 50% !important;
    padding: 1rem !important; */
  }
  footer > div > section > .row{
    row-gap: 0 !important;
    margin-bottom: 10rem;
  }
  footer .btn-lg{
    /* background-color: red; */
    max-width: 70%;
    max-height: 70%;
    border: 0;
    padding: 0 !important;
    /* margin: 0 !important; */
    /* margin-top: auto; */
    /* margin-bottom: auto; */
  }
}
/* footer end */

/* back to top array button */
.back-to-top {
  /* visibility: hidden; */
  /* opacity: 0; */
  right: 1rem;
  bottom: 1rem;
  z-index: 9999;
  background-color: rgba(0, 0, 0, 0.7);
  width: 3rem;
  height: 3rem;
  transition: all 0.5s;
}

.back-to-top i {
  font-size: 2rem;
  line-height: 0;
}

.back-to-top:hover {
  background: black;
}

/* ********************************* */
/* .back-to-top.active {
  visibility: visible;
  opacity: 1;
} */