@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap");
* {
 margin: 0;
 padding: 0;
 font-family: "Poppins", sans-serif;
}
body {
 overflow-x: hidden;
}
header {
 margin-bottom: 100px;
}

/*back to top button*/
.back_to_top {
 position: fixed;
 bottom: 15px;
 right: 15px;
 width: 48px;
 height: 48px;
 border-radius: 50%;
 background: #e5ecff;
 display: none;
 justify-content: center;
 align-items: center;
 z-index: 2;
}
.back_to_top button {
 background-color: transparent;
 border: none;
}
.back_to_top ion-icon {
 width: 32px;
 height: 32px;
 color: #4070f4;
}
/*end*/

.logo {
 font-weight: bold;
 font-size: 16px;
 color: #0e2431;
 display: flex;
 align-items: center;
}
.logo ion-icon {
 height: 32px;
 width: 32px;
 margin-right: 10px;
 color: #4070f4;
}
html {
 scroll-behavior: smooth;
}
.clickable {
 color: #ff4900;
}

a {
 color: inherit;
 text-decoration: none;
}

/* styling button */

.btn {
 display: inline-block;
 background-color: #ff4900;
 color: #fafafa;
 padding: 12px 23px;
 border-radius: 10px;
 font-size: 20px;
 border: none;
 transition: all 0.3s ease-in-out;
 margin-right: 10vw;
}

.btn:hover {
 transform: scale(0.9);
}

/*end*/

@media only screen and (max-width: 1000px) {
 .hero_content {
  padding: 0 40px !important;
 }
 .hero_content::before {
  transform: translate(-100px, 0px) !important;
  position: absolute;
  top: 50px;
  right: 10%;
 }
 .hero_content:after {
  min-width: 120px !important;
  min-height: 120px !important;
  right: -70px !important;
 }
 .hero-text {
  font-size: unset !important;
  flex-direction: column;
 }
 .hero-text h1 {
  margin-bottom: 1em;
 }
 .hero-text img {
  min-height: 175px !important;
 }
 .btn {
  text-align: center !important;
  margin-bottom: 1em;
  margin-right: unset;
  display: block;
 }
 .project_content {
  width: unset !important;
 }
 footer {
  padding: 20px !important;
  display: block !important;
 }
 .about {
  display: block;
 }
 .skills_container {
  padding: 0 40px;
  width: unset !important;
 }
}

/*Hero styling*/

.hero_content {
 padding: 0px 100px;
}
.hero_content::before {
 content: "";
 position: absolute;
 transform: translate(300px, 0px);
 min-width: 5vw;
 min-height: 5vw;
 border-radius: 50%;
 z-index: -10;
 background-color: #90aaf1;
}
.hero_content:after {
 content: "";
 position: absolute;
 right: -125px;
 transform: translate(0px, 55px);
 min-width: 250px;
 min-height: 250px;
 border-radius: 50%;
 z-index: -10;
 background-color: #4070f4;
}

.hero-text {
 font-size: x-large;
 display: flex;
 justify-content: space-between;
 align-items: center;
 margin-bottom: 50px;
}
.hero span {
 color: #4070f4;
}
.hero-text img {
 max-height: 27vw;
}

/*end*/

/*about section*/
.about {
 display: flex;
 justify-content: center;
 align-items: center;
 margin-bottom: 100px;
}
.section-tittle {
 position: relative;
 text-align: center;
 margin-bottom: 30px;
}
.section-tittle::after {
 position: absolute;
 content: "";
 width: 128px;
 height: 3px;
 left: 0;
 right: 0;
 margin: auto;
 bottom: -3px;
 background-color: #4070f4;
}
.skills_container {
 width: 60vw;
}
#skill-text {
 margin-bottom: 30px;
}
.container_tech {
 margin-bottom: 50px;
}
.iteration li {
 list-style: none;
 font-size: 16px;
 margin: 10px;
}
.iteration li > ion-icon {
 height: 24px;
 width: 24px;
 margin-top: 10px;
 margin-right: 5px;
}
/*end */

/*Latest Project section*/

.project_container {
 flex-wrap: wrap;
 display: flex;
 justify-content: center;
}
.project_content {
 width: 15vw;
 margin: 20px;
 display: flex;
 flex-direction: column;
 align-items: center;
 padding: 30px;
 border-radius: 10px;
 border: 4px solid #90aaf1;
}
.project_content h3 {
 text-align: center;
 margin-bottom: 10px;
}
.project_content p {
 height: 15vh;
}
.project_content a {
 color: #ff4900;
 font-weight: bold;
}
.project_content img {
 width: 100%;
 margin-bottom: 25px;
}
.project_content ion-icon {
 color: #1c1d25;
 height: 24px;
 width: 24px;
}

/*end*/

/*Footer style*/
footer {
 display: flex;
 justify-content: space-between;
 padding: 20px 70px;
}
/*end*/
/* End file */
