@import url('https://fonts.googleapis.com/css2?

family=Roboto:wght@500&family=Ubuntu:wght@300;500;700&display=swap');
@import url('https://fonts.googleapis.com/css2?
family=Poppins:wght@300&family=Roboto:wght@500&family=Ubuntu:wght@300;500;700&displ
ay=swap');

body {
background-color: #1f1f38;
}

* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
font-family: 'Ubuntu', sans-serif;
scroll-behavior: smooth;
}

#navbar {
line-height: 4rem;
position: sticky;
top: 0;
left: 0;
z-index: 100;
border-bottom: .5px solid #ffffff52;
border-width: 0.8em;
margin-bottom: 1rem;
}

#navbar ul {
list-style: none;
}

#navbar ul li {
margin: 0px 1rem;
}

#navbar ul li a {
text-decoration: none;
padding: 0.5rem 0.9rem;
}

.right {
display: none;
}

.checkBtn {
display: none;
}

#check {
display: none;
}

.nav-col a:hover {
border-radius: .4rem;
color: #1f1f38;
background-color: #fff;
}

/* Home Section */
.home-left,
.home-right {
width: 30%;
padding: 7rem;
}

.home-right {
padding: 0;
}

.home-left h6,
h4 {
color: rgb(216, 117, 173);
margin: 1rem 0;
margin-left: 3px;
font-size: 5rem;
}

.home-left h1 {
font-size: 4rem;
}

.home-right {
position: relative;
}

.home-right img {
position: absolute;
width: 170%;
left: 40px;
top: -50px;
background-size: cover;
border-radius: 84%;
height: 150%;
}

.circle {
width: 17rem;
height: 17rem;
border-radius: 50%;
padding: .5rem;
position: relative;
}

/* About Section */
.about-left,
.about-right {
width: 60%;
}

.about-right {
padding-right: 4rem;
}
.aboout-left {
position: relative;
}

.about-left img {
width: 100%;
height: 400px;
border-radius: 1rem;
}

.about-content p {
margin-bottom: 2rem;
}

/* Skills */
#skills {
margin-top: 3rem;
}

.skills-left {
width: 50%;
}

.skills-left img {
width: 85%;
}

.skills-right {
width: 50%;
}

.skillss-container {
width: 100%;
}

.java {
width: 90%;
height: .5rem;
background-color: #e54c21;
margin: 1rem 0;
border-radius: 12px;
}

.html {
width: 90%;
height: .5rem;
background-color: #00a0e4;
margin: 1rem 0;
border-radius: 12px;
}

.css {
width: 80%;
height: .5rem;
background-color: yellow;
margin: 1rem 0;
border-radius: 12px;
}

.js {
width: 65%;
height: .5rem;
background-color: red;
margin: 1rem 0;
border-radius: 12px;
}

.python {
width: 50%;
height: .5rem;
background-color: #7952b3;
margin: 1rem 0;
border-radius: 12px;
}

.mysql {
width: 30%;
height: .5rem;
background-color: #61dafb;
margin: 1rem 0;
border-radius: 12px;
}

.learning {
width: 100%;
height: .5rem;
background-color: #61dbfb;
margin: 1rem 0;
border-radius: 12px;
}

.bar {
margin: 2rem 0;
}

.bar-content {
position: absolute;
bottom: 10px;
}

.left {
left: 0;
}

.right-skills {
right: 0;
}

/* Projects Section
.projects-container {
justify-content: center;
align-items: center;
 margin: auto;
flex-wrap: wrap;
}

.projects-item {
overflow: hidden;
width: 20rem;
margin: 1rem;
background: #2c2c6c;
border-radius: 1.5rem;
padding: 2rem 1rem;
text-align: center;
}

.projects-item h1 {
font-size: 1.2rem;
margin-bottom: 1rem;
}

.projects-item p {
line-height: 20px;
font-size: .9rem;
}

*/

/* Contact me Section */
.form {
display: flex;
width: 80%;
padding: 0 2rem;
margin: auto;
justify-content: center;
align-items: center;
}

.form-div input,
textarea {
border: 2px solid rgba(255, 255, 255, 0.4);
border-radius: .5rem;
width: 100%;
margin: 0.5rem 0rem;
font-size: .9rem;
background: transparent;
margin: 0.5rem 0rem;
padding: 0.5rem 1rem;
color: rgb(255, 255, 255);
resize: none;
}

/* Footer Section */
#footer {
background-color: #010101;
padding: 1%;
 padding-bottom: 2rem;
}

ul li {
list-style: none;
margin: 0 1rem;
}

ul li a {
text-decoration: none;
font-size: 1.2rem;
color: white;
transition: all .5s;
}

ul li a:hover {
color: #fff;
}

.font-awesome {
margin: 1.1rem auto;
}

.font-awesome li i {
background-color: #1f1f38;
padding: 0.6rem;
border: 1px solid #1f1f38;
color: #fff;
border-radius: 0.5rem;
cursor: pointer;
transition: all .4s ease-in-out;
}

.font-awesome li i:hover {
border: 1px solid #1f1f38;
border-radius: .5rem;
background: transparent;
color: #1f1f38;
}

#footer p {
color: white;
font-size: 0.9rem;
}

/* Utility Classes */
.poppins {
font-family: 'Poppins', sans-serif;
}

.roboto {
font-family: 'Roboto', sans-serif;
}

.flex {
display: flex;
}

.s-between {
justify-content: space-between;
}

.s-around {
justify-content: space-around;
}

.s-center {
justify-content: center;
}

.items-center {
align-items: center;
}

.f-col {
flex-direction: column;
}

.p-relative {
position: relative;
}

.t-white {
color: #fff;
}

.bg-color {
background-color: #1f1f38;
}

.t-center {
text-align: center;
}

.my-2 {
margin: 2rem 0;
}

.f-2 {
font-size: 2rem;
}

.m-b-1 {
margin-bottom: 1rem;
}

.w-50 {
width: 50%;
}

.w-80 {
width: 80%;
}
.h-50 {
height: 50vh;
}

.mx-1 {
margin: 0 1rem;
}

.m-top {
margin-top: 1rem;
}

.m-auto {
margin: auto;
}

.btn {
margin-left: 0 .5rem;
font-size: 1rem;
color: #df77ad;
cursor: pointer;
padding: 0.75rem 1.2rem;
border: 1px solid #dc85a7;
border-radius: 0.4rem;
background: transparent;
font-family: 'Poppins', sans-serif;
}

.buttons a,
#hireme {
text-decoration: none;
}

.btn:hover {
color: #1f1f38;
border-color: #fff;
background-color: #fff;
}

.live {
color: #1f1f38;
background-color: #da7fa8;
}