@import url("https://fonts.googleapis.com/css2?family=Quando&display=swap");
body {
  font-family: Quando;
}

.navbar {
  height: 100px;
  box-shadow: 0 0px 20px grey;
}
#my-nav {
  background-color: white;
  width: 50%;
}
.name {
  font-size: 2.5em;
  font-family: Quando;
}
.nav-link {
  font-size: 1.3em;
  font-family: Quando;
}
.active {
  font-weight: bold;
}
#section1 {
  height: 60vh;
  color: black;
  font-family: Quando;
}
.header {
  padding: 100px;
  width: 900px;
}
.header h1 {
  font-size: 3em;
}
#section2 {
  height: 500px;
  background-image: url(./Images/skills.jpg);
  background-size: cover;
  background-color: rgb(43, 42, 42, 0.8);
  background-blend-mode: overlay;
  background-attachment: fixed;
  height: 60vh;
  color: white;
  font-family: Quando;
}
.skills {
  padding: 20px;
}
.skills h2 {
  font-size: 2.5em;
  color: white;
  text-shadow: 2px 3px 5px grey;
}
.skills .skilllist {
  font-size: 1.3em;
  color: white;
  text-shadow: 2px 3px 5px grey;
  padding: 15px;
}
.bar {
  background: 353b4;
  display: block;
  height: 15px;
  border-radius: 3px;
  box-shadow: 0 0 10px white;
  margin-bottom: 15px;
}
.bar span {
  height: 15px;
  float: left;
  background: black;
}
.html {
  width: 75%;
  animation: html 2s;
}
@keyframes html {
  0% {
    width: 0%;
  }
  100% {
    width: 75%;
  }
}
.css {
  width: 75%;
  animation: css 2s;
}
@keyframes css {
  0% {
    width: 0%;
  }
  100% {
    width: 75%;
  }
}
.bootstrap {
  width: 70%;
  animation: bootstrap 2s;
}
@keyframes bootstrap {
  0% {
    width: 0%;
  }
  100% {
    width: 70%;
  }
}
.java {
  width: 65%;
  animation: java 2s;
}
@keyframes java {
  0% {
    width: 0%;
  }
  100% {
    width: 65%;
  }
}
.javascript {
  width: 50%;
  animation: javascript 2s;
}
@keyframes javascript {
  0% {
    width: 0%;
  }
  100% {
    width: 50%;
  }
}
.angular {
  width: 50%;
  animation: angular 2s;
}
@keyframes angular {
  0% {
    width: 0%;
  }
  100% {
    width: 50%;
  }
}
.asp {
  width: 50%;
  animation: asp 2s;
}
@keyframes asp {
  0% {
    width: 0%;
  }
  100% {
    width: 50%;
  }
}
.sql {
  width: 70%;
  animation: sql 2s;
}
@keyframes sql {
  0% {
    width: 0%;
  }
  100% {
    width: 70%;
  }
}
.php {
  width: 55%;
  animation: php 2s;
}
@keyframes php {
  0% {
    width: 0%;
  }
  100% {
    width: 55%;
  }
}
.wordpress {
  width: 60%;
  animation: wordpress 2s;
}
@keyframes wordpress {
  0% {
    width: 0%;
  }
  100% {
    width: 60%;
  }
}
.ssrs {
  width: 60%;
  animation: ssrs 2s;
}
@keyframes ssrs {
  0% {
    width: 0%;
  }
  100% {
    width: 60%;
  }
}
.power {
  width: 50%;
  animation: power 2s;
}
@keyframes power {
  0% {
    width: 0%;
  }
  100% {
    width: 50%;
  }
}

#section3 {
  background-color: white;
  background-attachment: fixed;
  background-size: cover;
  padding-bottom: 50px;
}
#section3 h1 {
  text-align: center;
  color: black;
  padding: 10px;
}
.gallery {
  display: grid;
  grid-template-columns: repeat(3, auto);
  padding: 0 30px;
  align-items: center;
}
.card {
  width: auto;
  background: none;
}
.card-content {
  text-align: center;
  position: relative;
  padding: 10em 5em;
  transition: 2s;
  transform-style: preserve-3d;
  background: pink;
}
.card:hover .card-content {
  transform: rotateY(180deg);
}
.card-front,
.card-back {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 10em 0em;
  transform-style: preserve-3d;
  /* backface-visibility: hidden; */
}

.card-title {
  transform: translateZ(200px);
  margin-top: 50px;
}
.card-subtitle {
  transform: translateZ(150px);
}
.card-front {
  background: rgba(36, 35, 35, 0.8);
  background-size: cover;
  background-position: center;
  background-blend-mode: overlay;
}
.card-back {
  transform: rotateY(180deg);
  background-size: cover;
  background-position: center;
}
.card-body {
  transform: translateZ(100px);
}
.card-back p {
  background-color: black;
  margin-top: 90px;
}
.card-back p a {
  color: white;
  text-align: center;
  margin: 0 50px;
  padding: 10px;
  border: 2px solid white;
  border-radius: 4px;
}
.general {
  background-image: url(./Images/Experince.jpg);
  background-color: rgb(43, 42, 42, 0.8);
  background-size: cover;
  background-attachment: fixed;
  background-position: center;
  background-blend-mode: overlay;
}
#section4 {
  height: 400px;
  /* background-image: url(./Images/Experince.jpg);
  background-color: rgb(43, 42, 42, 0.8);
  background-size: cover;
  background-attachment: fixed;
  background-position: center;
  background-blend-mode: overlay; */
  text-align: center;
  color: white;
}
.timeline:before {
  content: "";
  position: absolute;
  height: 250px;
  width: 2px;
  top: 25%;
  background: #c5c5c5;
  left: 49.7%;
  box-sizing: border-box;
}

.timeline {
  position: relative;
  margin: 10px auto;
  width: auto;
  padding-bottom: 20px;
}
.timeline ul li {
  list-style: none;
  position: relative;
  width: 50%;
  padding: 20px 40px;
}

.timeline ul li:nth-child(odd) {
  float: left;
  text-align: right;
  clear: both;
}
.timeline ul li:nth-child(even) {
  float: right;
  text-align: left;
  clear: both;
}
.timeline ul li:nth-child(odd):before {
  content: "";
  position: absolute;
  top: 30px;
  right: -1px;
  height: 10px;
  width: 10px;
  background: rgb(2, 2, 2);
  border-radius: 50%;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.9);
}
.timeline ul li:nth-child(even):before {
  content: "";
  position: absolute;
  top: 30px;
  left: -9px;
  height: 10px;
  width: 10px;
  background: rgb(2, 2, 2);
  border-radius: 50%;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.9);
}

.timeline ul li:nth-child(odd) .time h3 {
  position: absolute;
  right: -160px;
  top: 20px;
  font-size: 1.2em;
  height: 30px;
  text-align: center;
  line-height: 0.8em;
  box-shadow: 0 0 0 3px rgba(51, 153, 147, 0.3);
}
.timeline ul li:nth-child(even) .time h3 {
  position: absolute;
  left: -170px;
  top: 20px;
  font-size: 1.2em;
  height: 30px;
  text-align: center;
  line-height: 0.8em;
  box-shadow: 0 0 0 3px rgba(51, 153, 147, 0.3);
}
#section5 {
  height: 550px;
}
.timeline-another:before {
  content: "";
  position: absolute;
  height: 400px;
  width: 2px;
  top: 25%;
  background: #c5c5c5;
  left: 49.7%;
  box-sizing: border-box;
}

.timeline-another {
  position: relative;
  margin: 10px auto;
  width: auto;
  padding-bottom: 20px;
}
.timeline-another ul li {
  list-style: none;
  position: relative;
  width: 50%;
  padding: 20px 40px;
}

.timeline-another ul li:nth-child(odd) {
  float: left;
  text-align: right;
  clear: both;
}
.timeline-another ul li:nth-child(even) {
  float: right;
  text-align: left;
  clear: both;
}
.timeline-another ul li:nth-child(odd):before {
  content: "";
  position: absolute;
  top: 30px;
  right: -1px;
  height: 10px;
  width: 10px;
  background: rgb(2, 2, 2);
  border-radius: 50%;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.9);
}
.timeline-another ul li:nth-child(even):before {
  content: "";
  position: absolute;
  top: 30px;
  left: -9px;
  height: 10px;
  width: 10px;
  background: rgb(2, 2, 2);
  border-radius: 50%;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.9);
}

.timeline-another ul li:nth-child(odd) .time h3 {
  position: absolute;
  right: -160px;
  top: 20px;
  font-size: 1.2em;
  height: 30px;
  text-align: center;
  line-height: 0.8em;
  box-shadow: 0 0 0 3px rgba(51, 153, 147, 0.3);
}
.timeline-another ul li:nth-child(even) .time h3 {
  position: absolute;
  left: -170px;
  top: 20px;
  font-size: 1.2em;
  height: 30px;
  text-align: center;
  line-height: 0.8em;
  box-shadow: 0 0 0 3px rgba(51, 153, 147, 0.3);
}
#section6 {
  text-align: center;
  padding: 2em;
}
.form {
  box-shadow: 2px 2px 10px grey;
}
.sociallinks {
  text-align: center;
}
.sociallinks a img {
  width: 50px;
  height: 50px;
  background: #fff;
}
#container {
  min-height: 85vh;
}
#main {
  overflow: auto;
  padding-bottom: 50px;
}
footer {
  position: relative;
  height: 50px;
  margin-top: -50px;
  clear: both;
}

.carousel-container {
  width: 60%;
  margin: auto;
  overflow: hidden;
  position: relative;
  border: 2px solid black;
}
.carousel-slide {
  display: flex;
  position: relative;
}
.carousel-slide img {
  width: 100%;
  height: auto;
}
@media only screen and (min-width: 1300px) and (max-width: 1600px) {
  body {
    margin: 0;
    padding: 0;
  }
  #section1 {
    height: 250px;
    margin: 20px;
  }
  .header {
    padding: 0px;
    width: 950px;
  }
  .header h1 {
    font-size: 4em;
  }
  .header h4 {
    font-size: 2em;
  }
  #section2 {
    height: 600px;
  }
  #section2 h1 {
    padding: 20px;
  }
  .skilllist ul li {
    font-size: 1.5em;
    margin-bottom: 30px;
  }
  .gallery {
    grid-template-columns: repeat(3, auto);
  }
  .carousel-container {
    width: 90%;
  }
}
@media only screen and (min-width: 900px) and (max-width: 1300px) {
  body {
    margin: 0;
    padding: 0;
  }
  #section1 {
    height: 200px;
    margin: 20px;
  }
  .header {
    padding: 0px;
    width: 650px;
  }
  .header h4 {
    font-size: 1.5em;
  }
  #section2 {
    height: 350px;
  }
  .gallery {
    grid-template-columns: repeat(2, auto);
  }
  .card-back p a {
    margin: 0 10px;
  }
  #section5 {
    height: 550px;
  }
  .timeline-another:before {
    height: 350px;
  }
  .timeline-another ul li {
    font-size: 0.8em;
  }
  #section5 .content h3 {
    font-size: 1.5em;
  }
  #section5 .content h5 {
    font-size: 1em;
  }

  footer {
    height: 80px;
  }
  .carousel-container {
    width: 90%;
  }
}
@media only screen and (min-width: 700px) and (max-width: 900px) {
  body {
    margin: 0;
    padding: 0;
  }
  #section1 {
    height: 200px;
    margin: 0px;
  }
  .header {
    padding: 0px;
    width: 650px;
  }
  .header h4 {
    font-size: 1.5em;
  }
  #section2 {
    height: 350px;
  }
  .gallery {
    grid-template-columns: repeat(1, auto);
  }
  .card-back p a {
    margin: 0 10px;
  }
  #section5 {
    height: 600px;
  }
  .timeline-another:before {
    height: 400px;
  }
  .timeline-another ul li {
    font-size: 0.8em;
  }
  #section5 .content h3 {
    font-size: 1.5em;
  }
  #section5 .content h5 {
    font-size: 1em;
  }

  footer {
    height: 80px;
  }
  .carousel-container {
    width: 80%;
  }
}

@media only screen and (min-width: 600px) and (max-width: 700px) {
  body {
    margin: 0;
    padding: 0;
  }
  #section1 {
    height: 60vh;
    margin: 0px;
  }
  .header {
    padding: 10px;
    width: 650px;
  }
  .header h4 {
    font-size: 1.2em;
  }
  #section2 {
    height: 350px;
  }
  .gallery {
    grid-template-columns: repeat(1, auto);
  }
  #section5 {
    height: 750px;
  }
  .timeline-another:before {
    height: 500px;
  }
  #section5 .content h3 {
    font-size: 1.5em;
  }
  #section5 .content h5 {
    font-size: 1em;
  }
  #section5 .content p {
    font-size: 0.8em;
  }
  .carousel-container {
    width: 90%;
  }
}
@media only screen and (min-width: 450px) and (max-width: 600px) {
  body {
    margin: 0;
    padding: 0;
  }
  #section1 {
    height: 200px;
    margin: 0px;
  }
  .header {
    padding: 20px;
    width: 500px;
  }
  .header h1 {
    font-size: 1.8em;
  }
  .header h4 {
    font-size: 1.2em;
  }
  #section2 {
    height: 350px;
  }
  .gallery {
    grid-template-columns: repeat(1, auto);
  }
  .card-back p a {
    margin: 0 10px;
  }
  #section5 {
    height: 300px;
  }
  .timeline-another:before {
    height: 180px;
  }
  .timeline-another ul li {
    font-size: 0.8em;
  }
  #section5 .content h3 {
    font-size: 1.5em;
  }
  #section5 .content h5 {
    font-size: 1em;
  }
  #section5 .content p {
    display: none;
  }
  footer {
    height: 50px;
  }
  .carousel-container {
    width: 100%;
  }
}

@media only screen and (min-width: 350px) and (max-width: 450px) {
  body {
    margin: 0px;
    padding-left: 10px;
    padding-right: 10px;
  }
  #section1 {
    height: 230px;
    margin: 10px;
  }
  .header {
    padding: 10px;
    width: 300px;
  }
  .header h1 {
    font-size: 1.8em;
  }
  .header h4 {
    font-size: 1.2em;
  }
  #section2 {
    height: 140vh;
  }
  .gallery {
    grid-template-columns: repeat(1, auto);
  }
  .card-title {
    margin-top: -10px;
  }
  .card-back p a {
    margin: 0 10px;
  }
  #section5 {
    height: 350px;
  }
  .timeline-another:before {
    height: 250px;
  }
  .timeline-another ul li {
    font-size: 0.8em;
  }
  #section5 .content h3 {
    font-size: 1.5em;
  }
  #section5 .content h5 {
    font-size: 1em;
  }
  #section5 .content p {
    display: none;
  }
  footer {
    height: 80px;
    padding-left: 25px;
  }

  .carousel-container {
    width: 100%;
  }
}
@media only screen and (max-width: 350px) {
  body {
    margin: 0;
    padding: 0;
  }
  .navbar-toggler {
    display: none;
  }
  #section1 {
    height: 200px;
    margin: 0px;
  }
  .header {
    padding: 20px;
    width: 300px;
  }
  .header h1 {
    font-size: 1.4em;
  }
  .header h4 {
    font-size: 0.8em;
  }
  #section2 {
    height: 850px;
  }
  .gallery {
    grid-template-columns: repeat(1, auto);
  }
  .card-back p a {
    margin: 0 10px;
  }
  #section5 {
    height: 350px;
  }
  .timeline-another:before {
    height: 300px;
  }
  .timeline-another ul li {
    font-size: 0.8em;
  }
  #section5 .content h3 {
    font-size: 1.5em;
  }
  #section5 .content h5 {
    font-size: 1em;
  }
  #section5 .content p {
    display: none;
  }
  footer {
    height: 80px;
    padding-left: 25px;
  }
}