/*PROJECT SHOWCASE SECTION*/
.projectShowcaseSection {
  padding: 20px 20px 60px;
  background-color: #f8fafc;
  font-family: "ChakraPetch", sans-serif;
}

.projectShowcaseSection h2 {
  font-size: 2.25rem;
  font-weight: bold;
  margin-bottom: 1rem;
  text-align: center;
  color: #1e293b;
}

.projectShowcaseSection .subtitle {
  font-size: 1.125rem;
  margin-bottom: 3rem;
  text-align: center;
  max-width: 48rem;
  margin-left: auto;
  margin-right: auto;
  color: #1e293b;
}

.projectDisplayContainer {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 5rem;
}

.projectImageContainer {
  margin-bottom: 2.5rem;
  display: flex;
  justify-content: center;
}

.projectIcon {
  width: 5rem;
  height: 5rem;
  padding: 1.5rem;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.projectIcon:hover {
  transform: rotate(15deg) scale(1.1);
}

.projectIconBackgroundD4E6FF {
  background-color: #dbeafe;
}

.projectIconBackgroundFFE6C6 {
  background-color: #ffedd5;
}

.projectIconBackground0AADAD {
  background-color: rgba(10, 173, 173, 0.2);
}

.projectIconBackgroundE8491D {
  background-color: rgba(232, 73, 29, 0.2);
}

i.projectIcon3B82F6 {
  color: #3B82F6;
  font-size: 4rem !important;
  font-weight: bold;
}

i.projectIconF97316 {
  color: #F97316;
  font-size: 4rem !important;
  font-weight: bold;
}

.projectContent {
  text-align: center;
}

.projectContent h3 {
  font-size: 1.875rem;
  font-weight: bold;
  margin-bottom: 1rem;
  color: #1e293b;
}

.projectContent p {
  font-size: 1.125rem;
  margin-bottom: 1.5rem;
  color: #1e293b;
}

.projectButton {
  color: white;
  padding: 0.5rem 1.5rem;
  border-radius: 9999px;
  transition: all 0.3s ease;
  text-decoration: none;
  display: inline-block;
}

.projectButton:hover {
    transform: scale(1.05);
}

.projectButton:active {
    transform: scale(0.95);
}

.projectButton3B82F6 {
  background-color: #3B82F6;
}

.projectButtonF97316 {
  background-color: #F97316;
}

.projectButton3B82F6:hover {
  background-color: #60A5FA;
}

.projectButtonF97316:hover {
  background-color: #FB923C;
}

.projectIcon0AADAD {
  color: #0AADAD;
  font-size: 4rem !important;
  font-weight: bold;
}

.projectButton0AADAD {
  background-color: #0AADAD;
}

.projectButton0AADAD:hover {
  background-color: #10C4C4;
}

.projectIconE8491D {
  color: #E8491D;
  font-size: 4rem !important;
  font-weight: bold;
}

.projectButtonE8491D {
  background-color: #E8491D;
}

.projectButtonE8491D:hover {
  background-color: #F06A4A;
}

/*<DESKTOP>*/
@media (min-width: 768px) {
  .projectDisplayContainer {
    flex-direction: row;
    margin-bottom: 8rem;
    align-items: center;
    max-width: 80rem; 
    margin-left: auto;
    margin-right: auto;
  }

  .projectDisplayContainer.reverse {
    flex-direction: row-reverse;
  }

  .projectImageContainer {
    width: 40%;
    margin-bottom: 0;
  }

  .projectContent {
    width: 60%;
    text-align: left;
    padding-left: 2rem;
  }

  .projectDisplayContainer.reverse .projectContent {
    padding-left: 0;
    padding-right: 2rem;
  }
}
/*-------------------------*/

/*PROJECT CARD SECTION*/
.projectCardGrid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}

.projectCard {
  background-color: #ffffff;
  border-radius: 0.75rem;
  padding: 1.5rem;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  text-align: center;
  transition: all 0.3s ease;
  font-family: "ChakraPetch", sans-serif;
  display: flex;
  flex-direction: column;
}

.projectCard:hover {
  transform: translateY(-10px);
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

.projectCardIconContainer {
  width: 4rem;
  height: 4rem;
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  margin-left: auto;
  margin-right: auto;
}


.projectCardIconBackgroundF3E8FF {
  background-color: #f3e8ff;
}

.projectCardIconBackgroundDCFCE7 {
  background-color: #dcfce7;
}

.projectCardIconBackgroundFCE7F3 {
  background-color: #fce7f3;
}

.projectCardIconBackgroundC59010 {
  background-color: rgba(197, 144, 16, 0.2);
}

.projectCardIconA855F7 {
  color: #A855F7;
  font-size: 2rem;
}

.projectCardIcon22C55E {
  color: #22C55E;
  font-size: 2rem;
}

.projectCardIconEC4899 {
  color: #EC4899;
  font-size: 2rem;
}

.projectCardIconC59010 {
  color: #C59010;
  font-size: 2rem;
}


.projectCardTitle {
  font-size: 1.25rem;
  font-weight: bold;
  margin-bottom: 0.5rem;
  color: #1e293b;
}

.projectCardDescription {
  margin-bottom: 1rem;
  color: #1e293b;
  flex-grow: 1;
}

.projectCardLink {
  font-weight: 500;
  text-decoration: none;
  display: inline-block;
  transition: all 0.2s ease-in-out;
}

.projectCardLink:hover {
    transform: scale(1.05);
}

.projectCardLink:active {
    transform: scale(0.95);
}

.projectCardLinkA855F7 {
  color: #A855F7;
}

.projectCardLink22C55E {
  color: #22C55E;
}

.projectCardLinkEC4899 {
  color: #EC4899;
}

.projectCardLinkC59010 {
  color: #C59010;
}

/*<DESKTOP>*/
@media (min-width: 768px) {
  .projectCardGrid {
    grid-template-columns: repeat(2, 1fr); /*md:grid-cols-2*/
  }
}

@media (min-width: 1024px) {
  .projectCardGrid {
    grid-template-columns: repeat(3, 1fr); /*lg:grid-cols-3*/
  }
}
/*-------------------------*/