/* Define the color palette variables */
:root {
  --primary-bg-color: #ffffff; 
  --primary-text-color: #333333;
  --heading-color: #1a1a1a; 
  --link-color: #45aaf2; 
  --section-bg-color: #f0f0f0; 
  --primary-text-color: #f0f0f0;
  --contact-bg-color: #444444; 
}

/* Global Styles */
body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  background-color: var(--heading-color);
  color: var(--primary-text-color);
}

/* Header Styles */
header {
  background-color: #1a1a1a;
  padding: 10px;
  border-bottom: 1px solid #1a1a1a;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1vw 4vw;
  font-size: 25px;
 
}

/* Links */
a {
  text-decoration: none;
  color: #0077b6;
}

nav {
  display: flex;
  align-items: center;
  gap: 30px;
  margin-left: 10%;
}

nav ul {
  display: flex;
  justify-content: center;
  width: 100%;
}

nav li {
  display: inline-block;
  list-style: none;
  margin: 20px 30px;
  margin-top: -50px;
  margin-left: 100px;
}

nav a {
  color: var(--primary-text-color);
  transition: color 0.3s ease;
}

nav a:hover {
  color: var(--link-color);
}

h1,h3,h4{
  font-style:sans-serif;
}

.intro {
  height: 90vh;
  background-color: #1a1a1a;
  justify-content: space-evenly;

}

.row {
  display: flex;
  justify-content:space-evenly;
  flex-wrap: wrap;
}

/* Additional header styles */
.column-1 {
  margin-top: 20%;
  margin-left: 5%;
  max-width: 100vh;
}

.column-1 h1 {
  font-size: 60px;
  margin-top: 20px;
  color: var(--primary-text-color);
}

.column-1 h1 span {
  color: rgb(225, 0, 255);
}



.column-2 {
  max-width: 100vh;
}

.image-container {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 100px;
}

.image-container img {
  height: 30pc;
  width: 100%;
  border-radius:10%;
}

.d-button {
  background-color: #ff004f;
  color: #ffffff;
  border: none;
  padding: 20px 40px;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s ease;
  margin: 10px 20px;
}

.d-button:hover {
  background-color: #ff004f;
}



/* Section Styles */
section {
  padding: 40px;
}

#projects {
  background-color: var( --heading-color); /
  color: var(--primary-text-color); 

}

/* Project Sections */
.project {
  background-size: cover;
  background-position: center;
  padding: 50px;
  color: var(--primary-text-color); 
  margin-bottom: 40px;
  border-radius: 10px;
  transition: background 0.5s, transform 0.4s; 
  background-color: #444444;
  justify-content: space-evenly;
}

/* Add this CSS for the side-by-side layout */
.project-content {
  display: flex;
  flex-direction: row;
  align-items: center; 
  margin-bottom: 10px; 
  
}

.project-content p {
  flex-grow: 1; 
}

/* Add hover effect to project sections */
.project:hover {
  background-color: #ff004f; 
  transform: translateY(-10px); 
}

.project-content img {
  margin-left: 20px; 
}

/* Style for the "See More" button */
.see-more-button {
   background-color:#ff004f ; 
  color: #ffffff; 
  border: none;
  padding: 20px 40px;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s ease; 
  margin-top: 10px;
  margin-left: 20px; 
  margin-right: 20px;
}

.see-more-button:hover {
  background-color:  #ff004f; 
}



/*-- about section-->*/
#about {
  background-size: cover;
  background-position: center;
  padding: 50px;
  background-color: #1a1a1a; 
  color: var(--primary-text-color); 
}
.about-list {
  list-style-type:none;
  padding: 0;
  margin: 0;
}

.about-box {
  width: 100%;
  height: 85px;
 border-radius: 10px;
  background-color: #444444;
  color: #fff;
  text-align: left;
  padding: 10px;

  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* Styles when hovering over the item boxes */
.about-box:hover {
  background-color: #ff004f;
  color: #fff;
}


/*Skill section */
#skills {
  background-color: var(--heading-color); 
}

/* Default styles for the item boxes */
.item-list {
  list-style-type:none;
  padding: 0;
  margin: 0;
}

.item-box {
  width: 500px;
 border-radius: 10px;
  background-color: #444444;
  color: #fff;
  text-align: left;
  padding: 10px;
  margin: 5px;
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease;
}


.item-box:hover {
  background-color: #ff004f;
  color: #fff;
}


#education {
  background-color: var(--heading-color); 
}

.education-list {
  list-style-type:none;
  padding: 0;
  margin: 0;
}

.education-box {
  width: 600px;
  border-radius: 10px;
  background-color: #444444;
  color: #fff;
  text-align: left;
  padding: 10px;
  margin: 5px;
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* Styles when hovering over the item boxes */
.education-box:hover {
  background-color: #ff004f;
  color: #fff;
}

/* Contact Section Styles */
#contact {
  background-color: var(--heading-color); 
  padding: 40px;
  color: var(--primary-text-color); 
}

.contact-list {
  list-style-type:none;
  padding: 0;
  margin: 0;
}

.contact-box {
  width: 300px;
 border-radius: 10px;
  background-color: #444444;
  color: #fff;
  text-align: left;
  padding: 10px;
  margin: 5px;
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* Styles when hovering over the item boxes */
.contact-box:hover {
  background-color: #ff004f;
  color: #fff;
}

footer {
  background-color:var(--heading-color); 
  color: var(--primary-text-color);
  padding: 20px;
  text-align: center;
}

footer p {
  margin: 0;
}