style.css

/*
  1.  RESET & BASE
  2.  TYPOGRAPHY
  3.  PRELOADER
  4.  GENERAL STYLES (Layout, Sections, Buttons)
  5.  HEADER STYLES
  6.  HERO SECTION
  7.  ABOUT SECTION
  8.  EXPERIENCE, EDUCATION, SECTIONS 
  9.  SKILLS SECTION
  10. PROJECTS SECTION
  11. ACHIEVEMENTS, VOLUNTEERING, PUBLICATIONS, COURSES, HONORS, LANGUAGES, AFFILIATIONS, INTERESTS SECTIONS
  12. CONTACT SECTION
  13. FOOTER
*/

/* ======================
   1. RESET & BASE STYLES
   ====================== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: "Roboto", sans-serif;
  line-height: 1.6;
  background-color: #e4e3e3;
  color: #333;
  overflow-x: hidden;
}

a {
  color: #007bff;
  transition: color 0.3s ease;
}

a:hover {
  color: #0056b3;
  text-decoration: none;
}

.container {
  padding: 0 15px;
}

/* ======================
   2. TYPOGRAPHY
   ====================== */
h1,
h2,
h3,
h4 {
  font-weight: 600;
}

h1 {
  font-size: 3.5em;
  margin-bottom: 10px;
}

h2 {
  font-size: 2.5em;
  margin-bottom: 20px;
}

h3 {
  font-size: 1.8em;
  margin-bottom: 10px;
}

p {
  margin-bottom: 15px;
  font-size: medium;
  font-weight: 400;
}

/* ======================
   3. PRELOADER
   ====================== */
#preloader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #121212;
  z-index: 10000;
}

.loader {
  border: 4px solid #f3f3f3;
  border-top: 4px solid #00c896;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  animation: spin 2s linear infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* ======================
   4. GENERAL STYLES
   ====================== */
.section {
  padding: 40px 0;
}

.section-title {
  margin-bottom: 40px;
}

.btn {
  padding: 12px 25px;
  border-radius: 5px;
  transition: background-color 0.3s ease;
}

.btn-outline-light {
  color: #fff;
  border-color: #fff;
}

.btn-outline-light:hover {
  background-color: #fff;
  color: #007bff;
}

.bg-light {
  background-color: #f8f9fa !important;
}

/* ======================
   5. HEADER STYLES
   ====================== */
   .header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 100;
    background-color: rgba(182, 182, 182, 0.301); 
    padding: 30px 0; 
    transition: background-color 0.3s ease;
}

.header.active {
    background-color: #3d4240; 
    padding-bottom: 30px; 
}

.navbar-brand {
    font-weight: 700;
    font-size: 2em; 
    color: #fff;
    padding-bottom: 10px;
}

.navbar-nav .nav-link {
    color: #fff !important;
    font-weight: 500;
    padding: 10px 30px;
    transition: color 0.3s ease;
}

.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active {
    color: #a2a2a2 !important;
}

.container.justify-content-center {
    width: 100%; 
}

/* ======================
   6. SIDEBAR STYLES
   ====================== */
   #sidebar {
    position: fixed;
    top: 0;
    left: -250px; 
    width: 250px;
    height: 100%;
    background-color: #121212; /* Darker background */
    color: #fff;
    transition: left 0.3s ease;
    z-index: 101; 
    overflow-y: auto; /* Add vertical scroll if content overflows */
}

#sidebar.active {
    left: 0; 
}

.sidebar-header {
    background-color: #00c896; /* Neon green header */
    padding: 30px 20px; 
    text-align: center;
}

.sidebar-brand {
    font-weight: 700;
    font-size: 1.8em; 
    color: #fff; 
    margin-bottom: 5px;
}

.sidebar-subtitle { 
    font-size: 0.9em; 
    color: rgba(255, 255, 255, 0.8); /* Slightly transparent white */
}

#sidebar .navbar-nav {
    padding-top: 20px;
}

#sidebar .nav-link {
    color: #fff !important;
    padding: 12px 25px;  /* Increased padding */
    border-bottom: 1px solid rgba(255, 255, 255, 0.1); /* Subtle separator */
    transition: background-color 0.3s ease;
}

#sidebar .nav-link:hover, 
#sidebar .nav-link.active {
    background-color: rgba(255, 255, 255, 0.1); /* Subtle background on hover/active */
}

/* Sidebar Toggle Button */
#sidebar-toggle {
    display: none; 
    position: fixed;
    top: 20px; 
    left: 20px;
    background-color: rgba(0, 0, 0, 0.7);
    padding: 10px 15px;
    border-radius: 5px;
    cursor: pointer;
    z-index: 102; 
}

#sidebar-toggle i {
    color: #fff;
    font-size: 1.5em;
}


/* Media Queries for Responsiveness */
@media (max-width: 768px) { 
    #sidebar-toggle {
        display: block; 
    }

    /* Hide the default navbar on mobile */
    .header nav {
        display: none; 
    }
}

/* CENTER THE NAVBAR CONTENT */
@media (min-width: 768px) { /* For medium and larger screens */
    .navbar-collapse {
        display: flex;  /* Make navbar-collapse a flex container */
        justify-content: center; /* Center its content horizontally */
    } 
}

/* ======================
   6. HERO SECTION
   ====================== */
.hero {
  /* background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('images\img_1.jpg');  */
  background-image: url("images/img_1.jpg");
  background-size: cover;
  background-position: center;
  min-height: 500px;
  display: flex;
  align-items: center;
  text-align: center;
  color: #fff;
  position: relative;
}

.name-background {
  position: relative;
  display: inline-block;
  padding: 10px 20px;
  margin-bottom: 20px;
}

.name-background .background-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1;
  opacity: 0.8; /* Adjust opacity for transparency */
}

.name-background h1 {
  position: relative;
  z-index: 1;
  color: #fff;
}
.hero::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: -1;
}

.hero-content {
  max-width: 800px;
  margin: 0 auto;
  z-index: 1;
}

.hero h1 {
  font-size: 4em;
  margin-bottom: 0.2em;
}

.hero h2 {
  font-size: 2em;
  margin-bottom: 20px;
  font-weight: 500;
}

.hero p {
  font-size: 1.2em;
  margin-bottom: 30px;
}

.scroll-down {
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  animation: bounce 2s infinite;
}

.scroll-down a {
  color: #fff;
  font-size: 2em;
}

@keyframes bounce {
  0%,
  20%,
  50%,
  80%,
  100% {
    transform: translateX(-50%) translateY(0);
  }
  40% {
    transform: translateX(-50%) translateY(-10px);
  }
  60% {
    transform: translateX(-50%) translateY(-5px);
  }
}

/* ======================
   7. ABOUT SECTION
   ====================== */
.about-content {
  text-align: justify;
  font-size: medium;
  font-weight: 400;
}

/* ======================
   8. EXPERIENCE & EDUCATION SECTIONS
   ====================== */
   .experience-item,
   .education-item {
     background-color: #fff;
     padding: 30px;
     margin-bottom: 20px;
     border-radius: 10px;
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
   }
   
   .experience-item h3,
   .education-item h3 {
     color: #007bff; /* Blue color for headings */
     font-size: 1.8em; /* Increase heading font size */
     margin-bottom: 10px;
   }
   
   .experience-header { /* Style for experience heading and date */
    display: flex;
    justify-content: space-between; /* Push date to the right */
    align-items: center; /* Vertically align items */
}

.experience-header h3 {
    margin-bottom: 0; /* Remove default margin */
}

.experience-header a{
    color: #007bff; /* Blue color for the company name */
    text-decoration: underline; /* Remove underline */
}

   .experience-item .date,
   .education-item .date {
     font-size: 0.9em;
     color: #666;
     text-align: right; /* Align the date to the right */
     padding-top: 19px; /* Add space between heading and date */;
   }
   
   .experience-item ul {
     list-style-type: disc;
     padding-left: 40px;
   }
   
   .experience-item p,
   .education-item p { /* Common styles for paragraphs */
     font-size: medium;
     font-weight: 400;
     line-height: 1.6; /* Improve readability */
     text-align: left; /* Left-align the text */
   }
   
   .education-item { 
       display: flex;
       flex-direction: column; 
   }
   
   .education-header { /* Style for degree and university */
       display: flex;
       justify-content: space-between; /* Push date to the right */
       align-items: center; /* Vertically align items */

   }
   
   .education-header h3 {
       margin-bottom: 0; /* Remove default margin */
   }
   
   .education-header .date {
       text-align: right; 
   }

/* ======================
   9. SKILLS SECTION
   ====================== */
   .skill-filters button {
    margin: 0 8px 20px; /* Increased spacing for better visual separation */
    border-radius: 20px; /* Rounded buttons for a softer look */
    font-weight: 500; /* Slightly bolder text */
    padding: 8px 18px; /* Adjusted padding for better proportions */
}

.skill-filters button.active {
    background-color: #00c896; /* Your neon green color on active state */
    border-color: #00c896;
    color: #fff; /* White text on active */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); /* Subtle shadow on active */
}

.skill-matrix {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.skill-category {
    margin-bottom: 40px; /* Increased spacing between categories */
}

.skill-category h4 {
    color: #333; /* Darker heading for better contrast */
    font-weight: 600; /* Bolder heading */
}

.skill-item {
    background-color: #fff;
    padding: 12px 20px; /* Increased padding for a larger clickable area */
    margin-bottom: 12px; /* Increased spacing between items */
    border-radius: 25px; /* More rounded corners for a softer look */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Enhanced shadow */
    cursor: pointer; 
    transition: transform 0.2s ease, box-shadow 0.2s ease; /* Added box-shadow transition */
}

.skill-item:hover {
    transform: translateY(-3px); /* More pronounced hover effect */
    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.15); /* Darker shadow on hover */
}

/* ======================
   10. PROJECTS SECTION
   ====================== */
.section {
  padding: 80px 0; /* Increase the size of the section */
}

.project {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 20px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.project img {
  width: 100%;
  height: auto;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.project:hover img {
  transform: scale(1.1);
}

.project .overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 50%; /* Make the overlay cover the entire image */
  background-color: rgba(116, 130, 111, 0.88);
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  opacity: 0;
  transition: opacity 0.3s ease;
  background: rgba(0, 0, 0, 0.5); /* Add a semi-transparent background to make the text more readable */
}

.project:hover .overlay {
  opacity: 1;
}

.overlay h3 {
  font-size: 2em; /* Make the title bigger */
  margin-bottom: 10px;
  text-align: center;
}

.overlay h3 a {
  color: #fff; /* Make the hyperlink white */
  text-decoration: seashell; /* Remove underline from hyperlink */
}

.overlay h3 a:hover {
  color: #ddd; /* Change color on hover */
  text-decoration: underline;
}

.project-description {
  margin-top: 5px;
  text-align: center;
}

.overlay img {
  width: 100%;
  height: auto;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.overlay:hover img {
  transform: scale(1.1);
}

.more-projects {
    margin-bottom: 10px; /* Add spacing above the "Read More" button */
}

.more-projects a {
    color: #007bff;  /* Use the same blue color as other links */
    text-decoration: none;
}

.more-projects a:hover {
    text-decoration: underline;
}

.read-more {
    background-color: #007bff; /* Use the same blue color as other links */
    border-color: #007bff; 
    color: #fff;
}

.read-more:hover {
    background-color: #0056b3; 
    border-color: #0056b3; 
}

/* ======================
   11. ACHIEVEMENTS, VOLUNTEERING, PUBLICATIONS, COURSES, HONORS, LANGUAGES, AFFILIATIONS, INTERESTS SECTIONS
   ====================== */
.volunteering-list {
  list-style: none;
  padding: 0;
}

.volunteering-item {
  background-color: #fff;
  padding: 30px;
  margin-bottom: 20px;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.volunteering-item h3 {
  /* Style for role title */
  color: #007bff; /* Blue color for the role */
  margin-bottom: 5px; /* Reduced margin */
}

.volunteering-item h4 {
  /* Style for the volunteering activity title */
  margin-bottom: 10px;
}

.volunteering-item .date {
  font-size: 0.9em;
  color: #666;
  margin-bottom: 15px;
}

.volunteering-item ul {
  list-style-type: disc;
  padding-left: 40px;
}

.volunteering-item li {
  margin-bottom: 10px;
}

.volunteering-image {
  max-width: 500px;
  margin: 20px auto;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.volunteering-description {
  text-align: center;
  font-style: italic;
  color: #666;
}
.achievements-list,
.volunteering-item,
.publications-list,
.course-item,
.honors-list,
.languages-list,
.affiliations-list {
  list-style-type: disc;
  padding-left: 40px;
  margin-bottom: 20px;
}

.achievements-list li,
.volunteering-item li,
.publications-list li,
.course-item,
.honors-list li,
.languages-list li,
.affiliations-list li {
  margin-bottom: 10px;
}

.volunteering-item h3,
.course-item h3 {
  margin-bottom: 10px;
}

.volunteering-item .date,
.course-item .date {
  font-size: 0.9em;
  color: #666;
}

.achievements-list {
  list-style: none; /* Remove bullet points */
  padding: 0;
}

.achievement-item {
  background-color: #fff;
  padding: 30px;
  margin-bottom: 20px;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.achievement-item h3 {
  color: #007bff; /* Example: Blue heading */
  margin-bottom: 10px;
}

.achievement-item .date {
  font-size: 0.9em;
  color: #666;
  margin-bottom: 15px;
}

.achievement-image {
  max-width: 500px;
  margin: 20px auto;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.achievement-description {
  text-align: center;
  font-style: italic;
  color: #666;
}

.achievement-title,
.date {
  display: inline-block;
  vertical-align: top; /* Keeps them aligned at the top */
}

.achievement-title {
  margin-right: 10px; /* Adjusts space between the title and the date */
}

.achievement-item .heading,
.volunteering-item .heading {
    display: flex;
    align-items: baseline; /* Align items to the baseline */
    justify-content: space-between; /* Space between title and date */
}

.achievement-item .heading h3,
.volunteering-item .heading h3 {
    margin-bottom: 0; /* Remove default margin from h3 */
}

.achievement-item .date,
.volunteering-item .date {
    font-size: 0.9em;
    color: #666;
    margin-bottom: 10px; /* Add spacing below the date */
}

.read-more {
  background-color: #007bff; /* Use the same blue color as other links */
  border-color: #007bff; 
  color: #fff;
}

.read-more:hover {
  background-color: #0056b3; 
  border-color: #0056b3; 
}

.interests-list,
.publications-list {
  list-style: none;
  padding: 0;
}

.interests-list strong {
  /* Style for interest titles */
  font-weight: 600;
}

.interests-list li {
  margin-bottom: 20px;
}

.interests-list h3 {
  /* Use h3 for interest titles */
  font-weight: 600;
  color: #007bff;
  margin-bottom: 10px; /* Add spacing below the heading */
}

.interests-list p {
  /* Style the description paragraphs */
  text-align: left; /* Align text to the left */
  line-height: 1.6; /* Improve readability with line height */
  font-weight: 400; /* Use normal font weight */
  font-size: medium;
}

.publications-list li {
  margin-bottom: 20px;
}

.publications-list a {
  color: #007bff; /* Link color */
  text-decoration: none;
}

.publications-list a:hover {
  text-decoration: underline; /* Underline on hover */
}

.publications-list p {
  margin-top: 10px; /* Add spacing between link and description */
}

.publications-list h3 {
  /* Style for publication title */
  font-weight: 600;
  color: #007bff;
  margin-bottom: 5px;
}

.publications-list h3 a {
  /* Style for the link in the title */
  color: #007bff;
  text-decoration: underline;
}

.publications-list h3 a:hover {
  text-decoration: underline;
}

.publications-list .publication-details {
  /* Style for publication details */
  font-size: 0.9em;
  color: #666;
  margin-bottom: -18px;
}

.publication-header {
  display: flex;
  align-items: center;
  justify-content: start;
  gap: 10px; /* Adjust the space between the h3 and the publication details */
}

.publication-details {
  white-space: nowrap; /* Prevent the IEEE and date from wrapping */
}

.publications-list p {
  /* Style for the publication description */
  text-align: left;
  line-height: 1.6;
}
.interests-list,
.publications-list {
  list-style: none;
  padding: 0;
  background-color: #fff; /* White background for the box */
  padding: 30px;
  margin-bottom: 20px;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.courses-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* Responsive columns */
  grid-auto-rows: auto; /* Let rows adjust to content */
  gap: 20px;
  list-style: none;
  padding: 0; 
  margin-bottom: 0; /* Reset the margin */
}

.course-item {
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  text-align: center;
  padding: 20px; 
}

.course-item .content { 
  flex-grow: 1; 
  display: flex;
  flex-direction: column;
  justify-content: space-between; 
}

.course-item h3 {
  color: #007bff;
  margin-bottom: 5px;
  font-size: 1em;
}

.course-item .date {
  font-size: 0.8em;
  color: #666;
  margin-bottom: 10px;
}

.certificate-link {
  display: inline-block;
  padding: 6px 12px;
  background-color: #00c896;
  color: #fff;
  border-radius: 5px;
  text-decoration: none;
  font-size: 0.9em;
  transition: background-color 0.3s ease;
  margin-top: auto; /* Push link to bottom */
}

.certificate-link:hover {
  background-color: #00ffb0;
}

/* Media Query for Smaller Screens (Tablets and Phones) */
@media (max-width: 768px) {
  .courses-list {
    grid-template-columns: 1fr; /* Single column on smaller screens */
  }
}

/* ======================
   12. FOOTER
   ====================== */
.footer {
  background-color: #333;
  color: #fff;
  padding: 30px 0;
  margin-top: 80px;
}

.social-links a {
  color: #fff;
  margin: 0 10px;
  transition: color 0.3s ease;
}

.social-links a:hover {
  color: #00c896;
}

/* Media Queries - Adjust breakpoints as needed */
@media (max-width: 992px) {
  .hero h1 {
    font-size: 3.5em;
  }
}

@media (max-width: 768px) {
  .hero h1 {
    font-size: 3em;
  }

  .hero h2 {
    font-size: 1.8em;
  }
}