/*#######################################################          Index Page        #######################################################*/
/*#######################################################          Index Page        #######################################################*/


/* ---------------------------------------------------------Main Body----------------------------------------------------------------------- */
body {
  margin: 0;
  padding: 20px; /* Adds padding to the whole page */
  background-color: #ffffff; /* Light background color for contrast */
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; /* General font for the body */
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Box shadow for illusion of elevation */
  max-width: 1200px; /* Optional: Set a max-width and auto margin if you want to limit the content width and center it */
  margin-left: auto;
  margin-right: auto;
}


/* ------------------------------------------------------Navigation Menu--------------------------------------------------------------------- */
#navbar {
  background-color: #333333; /* Dark gray background */
  color: white;
  text-align: center; /* This will center the text/logo */
  padding: 20px 0;
  position: relative; /* Ensures navbar is positioned correctly */
  z-index: 1000; /* Ensures navbar stays on top */
}

.logo {
  font-size: 2.5rem;
  font-weight: bold;
  color: #FFFFFF; /* Light text color for the logo */
  margin-bottom: 20px; /* Adds space between the logo and the menu */
}

#menu {
  list-style: none;
  padding: 0;
  margin: 0;
  display: inline-block; /* Aligns the menu items inline and centers them as a block */
}

#menu li {
  display: inline; /* Displays the list items in a row */
  padding: 0px 20px;
}

#menu li a {
  font-weight: bold;
  font-size: 1.25rem;
  color: #ECF0F1; /* Light text color for the menu */
  text-decoration: none;
  transition: background-color 0.3s ease, color 0.3s ease;
}

#menu li a:hover,
#menu li a.active {
  color: #FFD700; /* Highlight color for text */
}

#hamburger-menu {
  display: none;
  font-size: 2rem;
  cursor: pointer;
}

/* Responsive Styles */
@media (max-width: 768px) {
  #menu {
      display: none;
      flex-direction: column;
      width: 100%;
      position: absolute;
      top: 100%;
      left: 0;
      background-color: #333333;
  }

  #menu li {
      text-align: center;
      padding: 15px 0;
  }

  #menu li a {
      display: block;
  }

  #hamburger-menu {
      display: initial;
  }
}


/* -------------------------------------------------   Section: Welcome        ------------------------------------------------------------- */
#hero {
  background: url('./Photos/Index_Page/HERO_SECTION_BACKGROUND_INDEX_PAGE.png') no-repeat center center;
  background-size: cover;
  color: #FFFFFF; /* White text */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh; /* Initial height */
  text-align: left;
  padding: 0 15px;
  overflow: hidden; /* Hide content when height is reduced */
  position: relative; /* Ensure positioning context */
  transition: height 1s ease-in-out, opacity 1s ease-in-out; /* Transition for height and opacity */
}

.hero-text-box {
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgbargba(0, 0, 0, 0.9);
  border-radius: 15px;
  box-shadow: 0 4px 8px rgba(255, 255, 255, 0.3);
  padding: 10px;
  text-align: left;
  max-width: 80%; /* Adjust as needed */
}

/* Fade-in animation */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

#hero-welcome, #hero-heading {
  animation: fadeIn 2s ease-in forwards; /* Adjust time as needed */
  color: #FFFFFF; /* Dark color for text for contrast */
  margin: 0; /* Removes default margin */
  text-wrap: nowrap;
}

#hero-welcome {
  font-size: 3rem; /* Smaller font size for 'Welcome' */
  font-family: 'Helvetica Neue', sans-serif;
  /*color: #333333;*/
  font-weight: 300;
}

#hero-heading {
  font-family: 'Yatra One', system-ui;
  /*color: #333333;*/
  font-size: 4.0em;
  }

@media (max-width: 768px) {
  #hero h1 {
    font-size: 1; /* Adjust font size on smaller screens */
  }
  #hero-welcome {
    font-size: 1.0rem; /* Smaller font size for 'Welcome' */
    
  }
  #hero-heading {
    font-size: 1.2rem;
  }
}


/* -------------------------------------------------   Section: About Me      ------------------------------------------------------------- */
#about-me {
  /*background-color: #f8f9fa; /* Light background color */
  color: #333333; /* Dark color for text */
  padding: 5px 0px;
  padding-bottom: 20px;
  font-family: 'Open Sans', sans-serif;
  align-items: center;
}

#about-me .container {
  max-width: 90%; /* Adjust as needed */
  margin: auto;
  padding: 0 20px;
  text-align: center; /* Center align the content */
}

#about-me h2 {
  font-family: 'Montserrat', sans-serif;
  color: #708090; /* Consistent dark color for headings */
  padding-top: 0px;
  font-size: 2rem; /* Slightly larger font size for subheading */
  font-weight: 700; /* Bold font weight for headings */
  margin-bottom: 20px;
}

#about-me .profile {
  display: flex;
  flex-direction: column;
  align-items: center;
}

#about-me .profile-img {
  width: 200px; /* Adjust as needed */
  height: 200px; /* Adjust as needed */
  border-radius: 50%;
  margin-bottom: 20px;
  border: 3px solid #dddddd;
}

#about-me p {
  line-height: 1.6; /* For better readability */
  font-size: 1rem; /* Comfortable reading size for body text */
  color: #555555; /* Consistent color for body text */
  text-align: justify;
}

#about-me #load-more {
  background-color: #007bff;
  color: white;
  border: none;
  padding: 10px 20px;
  margin-top: 20px;
  cursor: pointer;
  border-radius: 5px;
}

#about-me #load-more:hover {
  background-color: #0056b3; /* Slightly darker shade for hover */
}

@media (max-width: 768px) {
  #about-me .container {
    padding: 0 10px;
  }
}


/* -------------------------------------------------   Section: My Skills     ------------------------------------------------------------- */
#skills {
  /*background-color: #f8f9fa;*/
  color: #333333; /* Dark color for text */
  padding: 05px 0;
  padding-bottom: 20px;
  font-family: 'Open Sans', sans-serif;
}

#skills .container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 10px;
  text-align: center;
}

#skills h2 {
  font-family: 'Montserrat', sans-serif;
  color: #708090; /* Consistent dark color for headings */
  font-size: 2rem; /* Slightly larger font size for subheading */
  font-weight: 700; /* Bold font weight for headings */
  margin-bottom: 20px;
}

.skill-cards-container {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 20px;
}

.skill-card {
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  width: calc(100% /3- 20px); /* Adjust the width to fit 3 cards per row */
  margin-bottom: 20px;
  text-align: left;
}

.skill-card-heading {
  background-color: #333333; /* You can change the color for each card if you like */
  color: #fff;
  padding: 10px;
  font-size: 1em; /* Slightly larger font size */
  font-weight: bold; /* Bold font weight */
  border-radius: 10px 10px 0 0;
  text-align: center;
}

.skill-list {
  padding: 20px;
}

.skill {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  gap: 10px;
}

.skill-name {
  flex: 1;
  font-size: 1em;
  text-align: left;
  text-wrap: nowrap;
}

.stars {
  flex: 2;
  font-size: 1em;
  text-align: right;
}

.stars .filled {
  margin-right: 2px;
  color: #FFD700; /* Gold color */
}

.stars span:not(.filled) {
  margin-right: 2px;
  color: #ddd; /* Light grey */
}
.skills-legend {
  text-align: center;
  padding: 20px;
  font-size: 0.8em; /* Smaller text size for legend */
  color: #555; /* Matching the subdued text color from the skill cards */
}

.skills-legend span {
  display: inline-block;
  margin-right: 5px;
}

.skills-legend .filled {
  color: #FFD700; /* Gold color for filled stars, matching the skill cards */
}

.skills-legend .unfilled {
  color: #ddd; /* Light grey for unfilled stars, matching the skill cards */
}

@media (max-width: 1200px) {
  .skill-card {
      width: calc(50% - 20px); /* Adjust for smaller screens, 2 cards per row */
  }
}

@media (max-width: 768px) {
  .skill-card {
      width: 100%; /* Full width on small screens, 1 card per row */
  }
}


/* -------------------------------------------------   Section: My Projects     ------------------------------------------------------------- */
#my-projects {
  /*background-color: #f8f9fa;*/
  color: #333333; /* Dark color for text */
  padding: 5px 0;
  padding-bottom: 50px;
  font-family: 'Open Sans', sans-serif;
}

#my-projects .container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 15px;
  text-align: center;
}

#my-projects h2 {
  font-family: 'Montserrat', sans-serif;
  color: #708090; /* Consistent dark color for headings */
  font-size: 2rem; /* Slightly larger font size for subheading */
  font-weight: 700; /* Bold font weight for headings */
  margin-bottom: 20px;
}

.projects-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  gap: 30px;
}

.project-card {
  background-color: #ffffff;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  overflow: hidden;
  width: calc(50% - 30px); /* Two cards per row */
  display: flex;
  flex-direction: column;
  padding-bottom: 10px;
}

.project-card img {
  width: 100%;
  object-fit: cover;
}


.project-card h3 {
  background-color: #333333; /* Example background color; adjust as needed */
  color: #ffffff; /* White text for better contrast */
  font-size: 1.2em; /* Slightly larger font size */
  font-weight: bold; /* Bold font weight */
  margin: 0; /* Remove default margins */
  padding: 10px; /* Add some padding for spacing */
  text-align: center; /* Keep text centered */

}

.project-card p {
  text-align: justify; /* Justify the description text */
  margin: 20px;

}

.project-card .btn {
  align-self: center; /* Center the button inside the card */
  vertical-align: middle; /* Centers text vertically */
  margin-top: auto; /* Push the button to the bottom */
  background-color: #007bff;
  color: white;
  border: none;
  padding: 10px 20px;
  margin-top: 20px;
  cursor: pointer;
  border-radius: 5px;
  text-decoration: none;
}

.project-card .btn:hover {
  background-color: #0056b3; /* Optional: Add underline on hover for interactivity */
}
.project-card:hover {
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
  transform: scale(1.02);
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}

@media (max-width: 768px) {
  .project-card {
    width: calc(100% - 30px); /* Full width on smaller screens */
  }
}


/* --------------------------------------------      Section: Awards & Recognitions         ------------------------------------------------- */
#awards {
  /*background-color: #f8f9fa;*/
  color: #333333;
  padding: 5px 0;
  text-align: center;
  font-family: 'Open Sans', sans-serif;
}

#awards .container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 15px;
  padding-bottom: 50px;
}

#awards h2 {
  font-family: 'Montserrat', sans-serif;
  color: #708090;
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 30px;
}

.award-card-container {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

.award-card {
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  width: 95%;
  transition: transform 0.3s ease;
}

.award-card-header {
  background-color: #333333;
  color: #fff;
  padding: 15px;
  border-radius: 10px 10px 0 0;
}

.award-card-body {
  padding: 20px;
  text-align: justify;
}

.award-card button {
  background-color: #007bff;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 1rem;
  margin-top: 20px;
  display: block; /* Makes the button a block element */
  width: auto; /* The width will be as wide as the content plus padding */
  margin-left: auto; /* Together with margin-right: auto, it centers the button */
  margin-right: auto;
}

/* Modal Styles */
.modal {
  display: none;
  position: fixed;
  z-index: 1000; /* High z-index to be on top of other elements */
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0,0,0,0.9); /* Black background with opacity */
}

.modal-content {
  margin: 10% auto;
  display: block;
  width: 95%;
  max-width: 700px;
}

.close {
  position: absolute;
  top: 15px;
  right: 35px;
  color: #fff;
  font-size: 40px;
  font-weight: bold;
  cursor: pointer;
}

@media (max-width: 768px) {
  .modal-content {
    width: 90%;
  }
  .award-card {
    width: 90%;
  }
}


/* -------------------------------------------------   Section: Contact Details        ---------------------------------------------------- */
#contact-details {
  color: #333333;
  padding: 5px 0px;
  padding-bottom: 50px;
  text-align: center;
  font-family: 'Open Sans', sans-serif;
}

#contact-details h2 {
  font-family: 'Montserrat', sans-serif;
  color: #708090;
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 20px;
}

.contact-cards-container {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 20px;
  padding: 0px 20px;
  padding-bottom: 20px;
  
}
.contact-card {
  background-color: #ffffff;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  overflow: hidden;
  width: 80%; /* Two cards per row */
  display: flex;
  flex-direction: column;
  padding-bottom: 10px;
}

.contact-card {
  background-color: #ffffff;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  width: calc(100% / 4 - 20px);
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.card-header {
  background-color: #333333;
  color: #fff;
  padding: 10px 0;
  border-radius: 10px 10px 0 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.contact-card .card-body {
  flex-grow: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.contact-card .card-body p {
  word-wrap: break-word;
  overflow-wrap: break-word;
  margin: 10px;
  padding: 0 10px;
}

.feedback-form-container {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 20px;
  padding: 0px 20px;
  padding-bottom: 20px;
}

.feedback-card {
  background-color: #ffffff;
  width: 80%;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0 auto;
}

.feedback-card .card-header {
  background-color: #333333;
  width: 100%;
  color: #fff;
  padding: 0px 0;
  border-radius: 10px 10px 0 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.feedback-card .feedback-card-body {
  flex-grow: 1;
  width: 80%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  text-align: center;
}

.feedback-form {
  width: 100%;
  padding: 20px;
  padding-bottom: 0;
}

.feedback-form .form-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}

.feedback-form input[type="text"],
.feedback-form input[type="email"]{
  width: 45%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

.feedback-form textarea {
  width: 100%; /* Adjusted width to align with the name and email fields */
  height: 30vh;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

.feedback-form button {
  width: auto;
  padding: 10px 20px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 1em;
  display: block;
  margin: auto auto;
}

.feedback-form button:hover {
  background-color: #0056b3;
}

/* Responsive adjustments for smaller screens */
@media (max-width: 768px) {
  .contact-card {
    width: 90%;
  }

  .feedback-card {
    width: 100%;
  }

  .feedback-form .form-row {
    flex-direction: column;
    width: 100%;
    align-items: center;
    justify-content: centre;
  }

  .feedback-form input[type="text"],
  .feedback-form input[type="email"],
  .feedback-form textarea {
    width: 100%;
    margin: 10px 0;
  }
}

@media (max-width: 480px) {
  .contact-card {
    width: 100%;
    flex-direction: column;
  }

  .contact-card .card-header,
  .contact-card .card-body {
    flex: 1;
  }

  .contact-card .card-body p {
    font-size: 0.8em;
  }
}


/* -------------------------------------------------       Section: Footer       ------------------------------------------------------------- */
footer {
  background-color: #333333; /* Dark gray background */
  color: white;
  padding: 20px 0;
  padding-bottom: 2px;
  text-align: center;
}

.footer-container > div {
  margin-bottom: 10px;
}
.footer-container .footer-copy {
  margin-bottom: 0px;
}


.footer-contact-icons a {
  color: white;
  font-size: 1.5em;
  margin: 0 10px;
  text-decoration: none;
}

.footer-to-top button {
  background-color: #007bff;
  color: white;
  border: none;
  padding: 10px 20px;
  cursor: pointer;
  border-radius: 5px;
}

.footer-to-top button:hover {
  background-color: #0056b3;
}

.footer-thanks p, .footer-copy p {
  margin: 0;
  font-size: 0.9em;
}


/* -------------------------------------------------   Section: Section Layout       ------------------------------------------------------ */
section {
  padding: 20px 0; /* Adjust padding as needed */
  border-bottom: 2px solid #333333; /* Optional separator line */
}

section:nth-child(even) {
  background-color: #F5F5F5; /* Every even section has a light gray background */
}

section:nth-child(odd) {
  background-color: 	#F8F9FA; /* Every odd section has a white background */
}


/*#######################################################          Index Page--End        #######################################################*/
/*#######################################################          Index Page--End        #######################################################*/



/*#######################################################          Project Page           #######################################################*/
/*#######################################################          Project Page           #######################################################*/


/* Projects Header Styles */
#projects-section {
  /*background-color: #f8f9fa;*/
  color: #333333; /* Dark color for text */
  padding: 20px 0;
  font-family: 'Open Sans', sans-serif;
}

#projects-section .container {
  max-width: 1200px;
  margin: 0 auto; /* Centers the container */
  padding: 0 15px;
  text-align: center;
  display: flex; /* Use flexbox to center children */
  flex-direction: column; /* Stack children vertically */
  align-items: center; /* Center children horizontally */
}

/* Projects Section */
.projects-heading {
  text-align: center;
  font-size: 2em; /* Adjust the size as needed */
  margin-top: 20px; /* Add space above the heading */
  margin-bottom: 10px; /* Add space below the heading */
}

.projects-description {
  text-align: center;
  margin-bottom: 30px; /* Add space below the description */
  font-size: 1em; /* Adjust the size as needed */
  color: #555; /* Adjust the color as needed */
}

/* Project Cards */
.my-project-card {
  width: 90%;
  margin: 40px auto; /* Center the card and add vertical spacing */
  background-color: #fff;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.project-title {
  background-color: #333333;
  color: white;
  padding: 1rem;
  margin: 0;
  text-align: center; /* Center the title text */
}

.project-content {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center; /* Center content horizontally */
}

.project-content img {
  width: 100%; /* Ensures the image takes the full width of the container */
  height: 100%; /* Ensures the image takes the full height of the container */
  object-fit: cover; /* Ensures the image covers the container without distortion */
}

.project-info {
  padding: 15px; /* Add some padding inside the project info area */
  text-align: center; /* Center the text inside project info */
}

.project-btn {
  background-color: #007bff; /* Example button color */
  color: white;
  border: none;
  border-radius: 5px;
  padding: 10px 20px;
  margin-top: 15px; /* Space above the button */
  margin-bottom: 20px; /* Space below the button */
  cursor: pointer;
  text-align: center;
  display: inline-block; /* Allows the button to be centered */
}

.project-btn:hover {
  background-color: #0056b3; /* Slightly darker shade on hover */
}

/* Add responsive behavior for smaller screens */
@media screen and (max-width: 768px) {
  .my-project-card {
    width: 100%;
  }
}
/*#######################################################        Project Page -End       #######################################################*/
/*#######################################################        Project Page -ENd       #######################################################*/


/*#######################################################          Resume Page           #######################################################*/
/*#######################################################          Resume Page           #######################################################*/

#resume-section {
  /*background-color: #f8f9fa;*/
  color: #333333; /* Dark color for text */
  padding: 20px 0;
  font-family: 'Open Sans', sans-serif;
}

#resume-section .container {
  max-width: 1200px;
  margin: 0 auto; /* Centers the container */
  padding: 0 15px;
  text-align: center;
  display: flex; /* Use flexbox to center children */
  flex-direction: column; /* Stack children vertically */
  align-items: center; /* Center children horizontally */
}

.resume-heading {
  text-align: center;
  font-size: 2em; /* Adjust the size as needed */
  margin-top: 20px; /* Add space above the heading */
  margin-bottom: 10px; /* Add space below the heading */
}

#resume-section .container {
  width: 90%;
  margin: 0 auto;
  text-align: center;
}

.resume-iframe {
  width: 100%;
  height: 1000px; /* Adjust this value based on your resume length */
  margin-bottom: 20px; /* Add some space below the iframe */
  border: none; /* Optional: Removes the border around the iframe */
}

.resume-download-btn {
  display: inline-block;
  margin-top: 20px;
  padding: 10px 20px;
  background-color: #007bff; /* Example button color */
  color: white;
  text-decoration: none;
  border-radius: 5px;
}

.resume-download-btn:hover {
  background-color: #0056b3; /* Darker shade for hover effect */
}
/*#######################################################        Resume Page -End       #######################################################*/
/*#######################################################        Resume Page -ENd       #######################################################*/





/*######################################################        Project-Detail Page      #######################################################*/
/*######################################################        Project Detail Page      #######################################################*/


/* Main Container for Project Details */
#project-detail-section {
  /*background-color: #f8f9fa;*/
  color: #333333; /* Dark color for text */
  padding: 20px 0;
  font-family: 'Open Sans', sans-serif;
}

#project-detail-section .container {
  width: 90%;
  margin: auto; /* Center the container */
  padding: 20px;
}

.project-detail-title {
  text-align: center;
  margin-top: 20px;
  margin-bottom: 30px;
  font-size: 2em;
  font-family: 'Montserrat', sans-serif;
  color: #708090; /* Consistent dark color for headings */
  font-weight: 700; /* Bold font weight for headings */
}

.project-detail-info {
  display: flex;
  align-items: stretch; /* Align the tops of the children */
  justify-content: space-between; /* Space between the image and the description */
  margin-bottom: 30px; /* Space below the section */
}

.project-detail-image {
  flex: 1; /* Allow the image container to take up half the space */
  display: flex;
  justify-content: center; /* Center the image within the container */
  align-items: center; /* Center the image vertically */
  overflow: hidden; /* Hide overflow in case the image is too large */
}

.project-detail-image img{
  width: 100%; /* Ensure the image takes the full width of the container */
  height: auto; /* Maintain the aspect ratio of the image */
  object-fit: cover; /* Cover the area without stretching the image */
}

.project-detail-description {
  flex: 1; /* Allow the description container to take up the remaining space */
padding: 0 20px; /*Add padding inside the description for better readability */
display: flex;
align-items: center; /*Center the text vertically */
justify-content: center; /*Center the text horizontally for smaller sections */
text-align: justify; /* Align the text to the left */
}

.project-section-card {
  width: 100%;
  margin: 40px auto; /* Center the card with vertical spacing */
  background-color: #fff;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  overflow: hidden;
  
}

.project-section-header {
  display: flex;
  justify-content: space-between; /* Spreads out the child elements */
  align-items: center;
  padding: 15px;
  background-color: #333333;
  width: 100%;
  color: #fff;
  border-radius: 10px 10px 0 0;
}

.project-section-title {
  flex-grow: 1; /* Takes up the available space */
  text-align: center;
  margin: 0;
  padding-right: 30px; /* Adjust this value to offset the space taken by the arrow if needed */
}

.toggle-arrow {
  /* This keeps the arrow at the extreme right */
  margin-left: auto;
  transition: transform 0.3s ease;
  padding-left: 30px; /* Gives some space between the title and the arrow */
}

/* Ensure the toggle arrow is not considered part of the title's space */
.project-section-header .toggle-arrow {
  position: absolute;
  right: 15px; /* Distance from the right edge */
}

/* Positioning the header relative to allow absolute positioning of the arrow */
.project-section-card {
  position: relative;
}


.project-section-content {
  padding: 20px;
  text-align: center; /* Center text for headers and buttons */
  transition: max-height 0.3s ease;
}

.project-section-content p,
.project-section-content ul,
.project-section-content li {
  text-align: justify; /* Justify text for paragraphs and lists */
  line-height: 1.6;
  padding: 0 20px; /* Ensure consistent padding */
}

/* Remove br style as it is not necessary */
/* .project-section-content br { ... } */

.project-section-content ul {
  list-style-position: inside; /* Align bullets inside the content block */
}

.expanded .project-section-content {
  display: block; /* Show content */
}

.download-button {
  display: inline-block;
  margin-top: 20px; /* Adjust as needed */
  padding: 10px 20px;
  background-color: #333; /* Button color */
  color: #fff; /* Text color */
  text-align: center;
  text-decoration: none;
  font-family: 'Open Sans', sans-serif;
  border-radius: 5px;
  transition: background-color 0.3s ease;
}

.download-button:hover {
  background-color: #555; /* Darker shade on hover */
}


.market-research-image-container {
  display: block; /* Use block to apply margin auto for centering */
  margin: 20px auto; /* Center the container horizontally and add vertical space */
  overflow: hidden; /* Hide any overflow */
  max-width: 50%; /* Set a max-width or specific width as per your design */
  height: auto; /* Adjust the height as necessary */
}

.market-research-image-container img {
  width: 100%; /* Make the image take the full width of the container */
  height: auto; /* Adjust height automatically to maintain aspect ratio */
  object-fit: cover; /* Cover the container while preserving the aspect ratio */
}

.pds-image-container {
  display: block; /* Use block to apply margin auto for centering */
  margin: 20px auto; /* Center the container horizontally and add vertical space */
  overflow: hidden; /* Hide any overflow */
  max-width: 90%; /* Set a max-width or specific width as per your design */
  height: auto; /* Adjust the height as necessary */
}

.pds-image-container img {
  width: 100%; /* Make the image take the full width of the container */
  height: auto; /* Adjust height automatically to maintain aspect ratio */
  object-fit: cover; /* Cover the container while preserving the aspect ratio */
}

.engg-sci-image-container {
  display: block; /* Use block to apply margin auto for centering */
  margin: 20px auto; /* Center the container horizontally and add vertical space */
  overflow: hidden; /* Hide any overflow */
  max-width: 30%; /* Set a max-width or specific width as per your design */
  height: auto; /* Adjust the height as necessary */
}

.engg-sci-image-container img {
  width: 100%; /* Make the image take the full width of the container */
  height: auto; /* Adjust height automatically to maintain aspect ratio */
  object-fit: cover; /* Cover the container while preserving the aspect ratio */
}

/* Horizontal Scroll Container */
/* Horizontal Scroll Container */
.horizontal-scroll-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
  position: relative;
}

.scroll-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  text-align: center;
  cursor: pointer;
  font-size: 24px;
  z-index: 10; /* Ensure arrows are above the scrollable items */
}

.left-arrow {
  left: 10px; /* Adjust as needed for padding from the left edge */
}

.right-arrow {
  right: 10px; /* Adjust as needed for padding from the right edge */
}

.components-wrapper {
  width: 80%;
  display: flex;
  flex-wrap: nowrap;
  overflow-x: hidden; /* Hide horizontal scrollbar */
  scroll-snap-type: x mandatory;
  margin: 0 10%; /* Center within the horizontal-scroll-section */
  -ms-overflow-style: none; /* Hide scrollbar for IE/Edge */
}

.components-wrapper::-webkit-scrollbar {
  display: none; /* Hide scrollbar for Chrome, Safari and Opera */
}

.component {
  flex: 0 0 100%; /* Do not grow, do not shrink, and take up 100% of the width of the parent */
  display: flex;
  flex-direction: column;
  justify-content:start;
  scroll-snap-align: start; /* Align to the start of the scroll container */
  text-align: center; /* Center text content */
  border: 1px solid #ccc;
}


.component-name, 
.component-image, 
.component-description {
  width:100%;
  text-align: center; /* Center text */
  overflow-wrap: break-word; /* Ensures text wraps within the container */
}

.component-name{
 background-color: #333333;
 color: #dddddd;
 padding: 10px 0px;
 height: auto;
 box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.component-image{
  height: auto;
}

.component-description {
  width:100%;
  height: auto;
  margin: auto;
  text-align: center; /* Center text */
  overflow-wrap: break-word; /* Ensures text wraps within the container */
}

.component-image img {
  width: 100%;
  height: 100%; /* New style */
  object-fit: cover; /* Ensures image covers the area */
}

/* Remove the hover effect by not including it at all */

.component-indicator {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 10px;
}

.indicator {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #ccc;
  margin: 0 5px;
}

.active-indicator {
  background-color: #333;
}

.afd-final-images{
  width: 90;
  height: auto;
}

.afd-final-images img{
  width: 100%;
  height: 100%; /* New style */
  object-fit: cover; /* Ensures image covers the area */
}

@media screen and (max-width: 768px) {
  #project-detail-section .container {
      width: 95%;
  }

  .project-section-title {
      font-size: 1.2em; /* Adjust font size for smaller screens */
  }

  .project-detail-info {
    flex-direction: column; /*Stack image and description on smaller screens */
    }

    .project-detail-image,
    .project-detail-description {
        flex: 0 0 auto; /* Do not grow, but fit the content */
    }
    
    .project-detail-description {
        padding: 20px; /* Add more padding on smaller screens if needed */
    }
    
}

/*###################################################        Project Detail Page -End         #################################################*/
/*###################################################        Project Detail Page -ENd         #################################################*/