p, ul{
  font-size: 1.1rem;
  text-align: justify;
}

body{
  /*background-color:rgb(255, 255, 255);*/
  background-color:rgba(249, 236, 222, 0.3);
}



h2{
  font-size: 2.5rem;
  margin-top: 2rem;
}

h1{
  font-size: 4rem;
  font-weight:normal;
}

.navbar, .dropdown-menu{
    background-color: rgb(0, 70, 199);
    
}

.navbar-nav{
    justify-content: space-between ;
    text-align: center;
    
}

.nav-item {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    border-right-width: 0.1rem;
    border-right-style:solid;
    border-right-color: rgb(75, 165, 243);

}


  

.Aboutme{
    margin-right: 5rem;
    color:rgb(255, 255, 255);
}


#aboutme-text{
  margin-right: 5rem;
}

.navbar-nav .nav-item .nav-link.selected {
    color:rgb(242, 241, 241);
    

  }
  
  .navbar-nav .nav-item .nav-link:hover  {
    color: rgb(255, 255, 255) ;
;
  }

  .navbar .dropdown:hover .dropdown-menu {
    display: block;
}

/* Optional: The following CSS will ensure that the dropdown remains open when hovering over its items */
.navbar .dropdown-menu:hover {
    display: block;
}


/* style.css */

/* Setting a specific height for the card */
.cert-card {
  height: 13rem; /* Adjust this value based on your preference */
  overflow: hidden; /* Ensures content doesn't overflow the set height */
}



/* Hiding the card description by default */
.cert-card .card-text {
  opacity: 0;
  transition: opacity 0.3s ease; /* Smooth transition for the hover effect */
  height: 50%; /* Ensures the content fills the entire card */
  display: flex;
  flex-direction: column;
  justify-content: center; /* Centers the content vertically */
  
}

/* Showing the card description on hover */
.cert-card:hover .card-text {
  opacity: 1;
}

/* Styling the skill button */
.skill-btn.A {
  display: block;
  width: 100%;
  height: 7rem;
  margin: 0 auto;
  border: 0.1rem;
  border-left: 0;
  border-right: 0;
  border-style: groove;
  font-size: 1.5rem;
  text-align: center;
  cursor: pointer;
  transition: color 0.3s ease;
  background: rgba(240, 235, 229, 0.6);  
  
}

.skill-btn.A:hover{
  background: rgba(240, 235, 229, 0.9);
}


.cert-btn:hover {
  background-color: #0056b3;
}

.skill-btn:focus {
  outline: none;
  box-shadow: none;
  background-color: rgba(240, 235, 229, 0.9); ; /* Light gray, adjust as needed */
}


.cert-card .card-body {
    display: flex;
    flex-direction: column;    /* Stack children vertically */
    justify-content: center;   /* Center children vertically */
    align-items: center;       /* Center children horizontally */
    background-color:rgba(249, 242, 233, 0.5);
}

.card-title {
  height: auto;
  color:rgb(0, 0, 0);
  align-items: center;
}

@media (max-width: 575.98px) {
  .cert-card {
      height: auto; /* Adjust based on your preference */
  }
}

a.icon-link {
  color: inherit;
  text-decoration: none;
  margin-left: 10rem; /* Add spacing between text and icon */
  color: black;
}

/* This ensures the hover state remains consistent */
a.icon-link:hover {
  text-decoration: none;
}

/* This will set the icon color, you can choose any */
.bi.bi-globe {
  color: black;
  padding-left: 1rem;
   /* Change 'black' to any color you want for the icon */
}



   /* PROJECTS */
   .project-block {
    background-size: cover;
    background-position: center;
    
}

.skill-btn.P {
    background: none;
    border: none;
    display: flex;  /* Use Flexbox for centering */
    justify-content: center;  /* Horizontally center */
    align-items: center;  /* Vertically center */
    width: 100%;
    height: 10rem;  /* or whatever height you want for your buttons */
    

}



.centered-content {
    display: flex;  /* Use Flexbox for centering */
    flex-direction: column;  /* Stack children vertically */
    align-items: center;  /* Center content horizontally */
    justify-content: center;  /* Center content vertically */
}

.arrow {
    transition: transform 0.3s;
    transform: rotate(-180deg);  /* Initially, set the arrow to up state */
}

.skill-btn:not(.collapsed) .arrow {
    transform: rotate(0deg);  /* When the content is shown, the arrow points downwards */
}

.mini-project-btn {
  display: block;
  width: 100%;
  background: rgba(240, 235, 229, 0.7);   
  border: none;
  padding: 1rem;
  margin-top: 1rem;
  text-align: left;
  cursor: pointer;
  transition: background 0.3s;
  font-size: 1.2rem;
  text-align: center;
}

.mini-project-btn:hover {
  background: rgba(227, 224, 221, 0.7);  /* Slightly darker gray on hover */
}

.mini-arrow {
  float: right;  /* Position the arrow on the far right */
  transition: transform 0.3s;
}

.mini-project-btn:not(.collapsed) .mini-arrow {
  transform: rotate(45deg);  /* Rotate the plus icon to make it look like a minus */
}

.project-block {
  position: relative;  /* added so the pseudo-element will be relative to this block */
  /* ... your existing styles ... */
}

.project-block::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(255, 255, 255, 0);  /* Initially, set it transparent */
  transition: background-color 1s;  /* Smooth transition for hover effect */
}


.project-block:hover::before {
  background-color: rgba(255, 255, 255, 0.6);  /* Add a white overlay with 30% opacity on hover */
}

.project-block:hover::after {
  opacity: 1;  /* make the description visible on hover */
}


.project-block::after {
  content: attr(data-description);  /* fetch content from data-description attribute */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);  /* center the content */
  opacity: 0;  /* make it initially invisible */
  transition: opacity 1s;  /* smooth transition */
  
  text-align: center;
  width: 70%;  /* adjust as needed */
  
}


.project-block .centered-content h3 {
  transition: opacity 1s;  /* Adjust 0.3s to your preferred speed */
  opacity: 1;  /* By default, the title is fully visible */
}

.project-block:hover .centered-content h3 {
  opacity: 0;  /* When hovered, the title becomes invisible */
}

.centered-content {
  /* ... your existing styles ... */
  width: 100%; /* take up the full width of the parent */
  height: 100%; /* take up the full height of the parent */
  position: relative; /* set a positioning context for the arrow */
}

.arrow {
  position: absolute; /* take it out of the normal flow */
  bottom: 0.2rem; /* 10px from the bottom, adjust as needed */
  right: 0.2rem; /* 10px from the right, adjust as needed */
  /* ... your existing transform and transition styles ... */
  background-color: rgba(0,0,0,0.1) ;
  padding: 0.3rem;
}

/* Initially, hide the description */
/* On hover of a collapsed button, show the description */
.project-block:hover .skill-btn.collapsed::after {
  opacity: 1;
}





.project-block .skill-btn:focus {
  background-color: transparent;
  border: none;
}

.project-block.P1{
  /* ... your existing styles ... */
  transition: all 1s; /* add this line for a smooth transition */
  z-index: 10;
  background-image: url(Images/EP_1.png);
}

.project-block.P2{
  /* ... your existing styles ... */
  transition: all 1s; /* add this line for a smooth transition */
  z-index: 10;
  background-image: url(Images/DS_1.png);
}

.project-block.P3{
  /* ... your existing styles ... */
  transition: all 1s; /* add this line for a smooth transition */
  z-index: 10;
  background-image: url(Images/R_1.png);
}


.mini-project-btn p{
  text-align: justify;

}

.content-miniproject{
  margin-left: 5rem;
  margin-right: 5rem;
}