body {
    background-color: #222831;
    color: #DDDDDD;
    font-family: "Roboto Slab", serif;
    margin: 0;
}
  /* Selection color -------------------------- */
::-moz-selection { /* Code for Firefox */
    color: black;
    background: #F05454;
  }
  
  ::selection {
    color: black;
    background: #F05454;
  }

.dot {
  color: #F05454;
  
}

/* Selection color -------------------------- */

.chip {
  background-color: #9B9CA0;
  border-radius: 15px;
  padding: 5px;
  width: 85px;
}

  
/* Side Bar -------------------------- */
.sidebar {
  position: fixed;
  left: 0; 
  top: 0;
  bottom: 0; 
  width: 60px; 
  background-color: black; 
  color: #9B9CA0; 
  
  writing-mode: vertical-lr; 
  text-orientation: mixed; 
}

#logo {
  margin-top: 20px;
}

.sidebar a {
  display: inline-block;
  color: #9B9CA0; 
  padding-top: 40px;
  padding-bottom: 40px;
  width: 30px;
 }

.SB-Container {
  display: inline-block;
  width: 60px;
  padding-left: 20px;
}


.SB-Container:hover {
  border-right: #F05454 solid;
}

.sidebar a:hover {
  color: #DDDDDD;
}


/* header -------------------------- */

header {
    margin-top: 20px;
    margin-left: 75px;
}

.headerLinks {
    padding: 5px;
    color: #9B9CA0;
}

.headerLinks:hover {
    color: #F05454; 
}

.language-container {
  position: relative;
  bottom: 7px;
}

.resumeBtn {
  position: absolute;
  right: 15px;
  background-color: transparent;
  color: #F05454;
  border: 2px solid #F05454;
  padding: 10px 20px;
  font-size: 16px;
  cursor: pointer;
  overflow: hidden;
  transition: color 0.3s, border-color 0.3s;
}

/* .resumeBtn:hover {
  background-color: #F05454;
  color: black;
  border-color: #F05454;
} */

/* change language btn -------------------------- */
.language-container {
  position: relative;
  display: inline-block;
}

.flag-button {
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
}

.flag-image {
  width: 30px;
  height: 20px;
  margin-right: 5px;
}

.dropdown {
  position: absolute;
  top: 30px;
  right: 0;
  background-color: #F05454;
  min-width: 100px;
  border: transparent;
  z-index: 1;
}

.dropdown-item {
  padding: 10px;
  display: flex;
  align-items: center;
  cursor: pointer;
}

.dropdown-item:hover {
  background-color: #f1f1f1;
  color: #222831;
}

/* .dropdown-item:hover {
  background-color: #222831;
  color: #DDDDDD;
} */





/* welcome -------------------------- */

.welcomeContainer {
  margin-left: 100px;
  display: flex;
  justify-content: center; 
  align-items: center; 
  height: 800px; 
}

.welcome {
  width: 850px;
}

.content {
  display: flex; 
}

.textContainer {
  width: 65%; 
  text-align: justify;
  margin-right: 10px;
}

.myName {
  font-size: 55px;
  font-weight: 500;
  color: #DDDDDD;
}



.welcomeText {
  font-size: 15px;
}

.imageContainer {
  max-width: 300px; 
  display: flex;
  justify-content: flex-end; 
  align-items: center;
  background-color: transparent;
  opacity: 0.8;
  background-size: 10px 10px;
  background-image: repeating-linear-gradient(45deg, #F05454 0, #c24444 1px, transparent 0, transparent 50%);
  padding: 15px;
  border-radius: 15px;

}

.profilePic {
  width: 250px;
  border-radius: 50%;
  background-color: white;
  border: 3px solid #F05454;
  padding: 10px; 
  transition: transform 0.3s ease;
}

.profilePic:hover {
  transform: scale(1.1);
  
} 

.contactBtn {
  background-color: #F05454;
  color: black;
  border: 2px solid #F05454;
  padding: 10px 20px;
  font-size: 16px;
  cursor: pointer;
  overflow: hidden;
  transition: color 0.3s, border-color 0.3s;
}

/* about -------------------------- */

h2 {
  font-size: 35px;
  color: #DDDDDD;
  display: inline-block;
}

.aboutHr {
  width: 84.5%; /* Adjust the width as needed */
  float: right;
  margin-top: 27px; /* Adjust the top margin to align it with the text */
  border-color: #DDDDDD; /* Set border color if needed */
}

.aboutContainer {
  margin-left: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 850px;  
}

.about {
  width: 850px;
  max-width: 100%; 
}

.aboutContent {
  display: flex;
  flex-wrap: wrap;
}

.aboutText {
  width: calc(60% - 20px);
  text-align: justify;
  margin-right: 20px; 
  font-size: 15px;
}

.myLinksText {
  display: inline-block;
  color: #F05454;
  font-weight: 500;
  font-size: 18px;
  margin-bottom: 10px; 
}

.aboutIcon {
  position: relative;
  top: 7px;
}

.skillsTitle {
  display: block;
}

.wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 5px;
}

.chip {
  height: 30px;
  align-items: center;
  color: #333; 
  text-align: center;
}


/* Projects ----------------------------------------------------------------*/
h3 {
  margin-top: 10px;
  color: white;
  display: inline-block;
}

.stackP {
  color:#F05454
}

.projectsHr {
  width:81%; /* Adjust the width as needed */
  float: right;
  margin-top: 28px; /* Adjust the top margin to align it with the text */
  border-color: #DDDDDD; /* Set border color if needed */
}

.projectsContainer {
  margin-left: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 1200px; 
}

.projects {
  max-width: 850px;
}


.projectCards {
  display: grid;
  flex-wrap: wrap;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
}

.cardContainer {
  width: calc(50% - 50px); 
  margin-bottom: 20px; 
  margin-right: 15px;
  display: flex;
}

.cardText {
  padding: 20px; 
  background-color: black; 
  border-radius: 15px; 
  height: 100%; 
  display: flex; 
  flex-direction: column; 
  text-align: justify;

  
}

.projectImageContainer {
  width: 375px;
  height: 300px; 
  overflow: hidden;
  background-color: transparent;
  opacity: 0.8;
  background-size: 10px 10px;
  background-image: repeating-linear-gradient(45deg, #F05454 0, #c24444 1px, transparent 0, transparent 50%);
  padding: 15px;
  border-radius: 15px;
}

.projectImg {
  width: 355px; 
  height: 280px; 
  object-fit: fill;
  border-radius: 15px;
}

/* Experience ----------------------------------------------------------------*/

.expHr {
  width:75%; /* Adjust the width as needed */
  float: right;
  margin-top: 28px; /* Adjust the top margin to align it with the text */
  border-color: #DDDDDD; /* Set border color if needed */
}

.experienceContainer {
  margin-left: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 700px; 
}

.experience {
  max-width: 850px;
}

.wrapper {
  display: grid;
  flex-wrap: wrap;
  grid-template-columns: 1fr 1fr;
  gap: 5px;
  text-align: justify;
}

.experienceChips {
  flex-wrap: wrap;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 5px;
  text-align: justify;

}

/* Contact ----------------------------------------------------------------*/

.contactHr {
  width:81%; 
  float: right;
  margin-top: 28px; 
  border-color: #DDDDDD;
}


.contactContainer {
  margin-left: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 400px; 
  text-align: justify;
}

.contact {
  max-width: 850px;
}

.contactWrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
}

.contactCard {
  background-color: #DDDDDD;
  text-align: center;
  border-radius: 15px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.contactWrapper a {
  color: #F05454;
  font-size: 1em;
}

.contactIcon {
  position: relative;
  right: 5px;
}

.contactCard:hover{
  border-color: #F05454 solid;
}

/* Contact ----------------------------------------------------------------*/

.footer {
  display: flex;
  height: 450px;
  align-items: center;
  justify-content: center;
}





















@media only screen and (max-width: 935px) {
  .aboutHr {
    visibility: hidden;
  } 

  .projectsHr {
    visibility: hidden;
  }

  .expHr {
    visibility: hidden;
  }

  .contactHr {
    visibility: hidden;
  }
}







/* MEdia query ----------------------------------------------------------------*/

/* For mobile devices */
@media only screen and (max-width: 801px) {

  body {
    width: 100%;

}

.chip, .myLinksText {
  display: none;
}

/* Side Bar -------------------------- */

.sidebar {
  width: 40px; 
}

.sidebar a {
  margin-left: 8px;
 }

.SB-Container {
  width: 40px;
  padding-left: 0px;
}

/* header -------------------------- */

header {
  margin-top: 15px;
  margin-left: 55px;
}

.headerLinks {
  padding: 5px;
  color: #9B9CA0;
}

.resumeBtn {
  position: static;
  margin-left: 10px;
}


/* welcome -------------------------- */

.welcomeContainer {
  margin-top: 50px;
  margin-left: 60px;
  display: inline-block;
  width: 280px;
  justify-content: center; 
  align-items: center; 
  height: 800px; 
}

.welcome {
  width: 100%;
}

.content {
  display: block; 
}

.myName {
  font-size: 35px;
}

.textContainer {
  width: 100%; /* Take full width on smaller screens */
  margin-bottom: 20px; /* Add spacing between text and image */
}

.imageContainer {
  max-width: 100%; /* Take full width on smaller screens */
  justify-content: center; /* Center image horizontally */
}

/* about -------------------------- */

h2 {
  font-size: 30px;
  color: #DDDDDD;
  display: inline-block;
}

.aboutHr {
  visibility: hidden;
}

.aboutContainer {
  margin-left: 60px;
  text-align: justify;
}


.aboutContent {
  display: block;
}

.aboutText {
  width: 280px;
  margin-right: 20px; 
  font-size: 15px;
}


/* Projects ----------------------------------------------------------------*/
h3 {
  margin-top: 10px;
  color: white;
  display: inline-block;
}

.stackP {
  color:#F05454
}

.projectsHr {
  visibility: hidden;
}

.projectsContainer {
  margin-top: 120px;
  margin-left: 60px;
  display: block;
  justify-content: center;
  align-items: center;
  min-height: 1200px; 
}

.projects {
  max-width: 850px;
}


.projectCards {
  display: block;
}

.cardContainer {
  width: 270px; 
  margin-bottom: 20px; 
  margin-right: 15px;
  display: flex;
}


.projectImageContainer {
  width: 280px;
  height: 250px; 
}

.projectImg {
  width: 270px; 
  height: 240px; 
}

/* Experience ----------------------------------------------------------------*/

.expHr {
  visibility: hidden;
}

.experienceContainer {
  margin-top: 150px;
  margin-left: 60px;
  display: block;
  justify-content: center;
  align-items: center;
  min-height: 700px; 
}

.experience {
  max-width: 850px;
}

.wrapper {
  display: block;
}

.experienceChips {
  flex-wrap: wrap;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 5px;
  text-align: justify;

}

/* Contact ----------------------------------------------------------------*/

.contactHr {
  visibility: hidden;
}

.contactContainer {
  margin-left: 60px;
  display: block;
}

.contact {
  max-width: 850px;
}

.contactWrapper {
  display: block;
}

.contactCard {
  margin-top: 10px;
  background-color: #DDDDDD;
  text-align: center;
  border-radius: 15px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
}









  

}