body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  background: #f4f4f4;
  background: linear-gradient(135deg, rgba(255,255,255,.1) 25%, transparent 25%) -50px 0/ 100px 100px, 
              linear-gradient(225deg, rgba(255,255,255,.1) 25%, transparent 25%) -50px 0/ 100px 100px, 
              linear-gradient(315deg, rgba(255,255,255,.1) 25%, transparent 25%), 
              linear-gradient(45deg, rgba(255,255,255,.1) 25%, transparent 25%);
  transition: background-color 0.3s;
}

#navContainer {
  display: flex;
  justify-content: space-around;
  padding: 10px;
  background-color: #fff;
  position: absolute;
  top: 2px;
  left: 0px;
  width: 1513px;
  gap: 29px;
}
.navItem {
  cursor: pointer;
  padding: 10px 20px;
  font-size: 18px;
  color: #333;
  transition: color 0.3s, font-weight 0.3s;
}

.navItem:hover {
  color: #007BFF; /* Change to your desired hover color */
  font-weight: bold;
}


#appContainer {
  padding: 20px;
}

.homeMessage1 {
  border: none;
  color: #5c2ae4;
  padding: 5px;
  margin-bottom: 10px;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0);
  position: absolute;
  top: 150px;
  left: 80px;
  font-family: 'Fredoka One', cursive;
  font-size: 49px;
  width: 910px;
  height: auto;
  color: #f00;
  text-shadow: 3px 2px 0 #333, -1px -1px 0 #333, 1px -1px 0 #333, -1px 1px 0 #333, 1px 1px 0 #333;
}



.homeMessage2 {
  border: none;
  color: #361d7b;
  padding: 15px;
  margin-bottom: 10px;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0);
  position: absolute;
  top: 330px;
  left: 70px;
  font-family: 'Playfair Display', serif;
  font-size: 38px;
  width: 943px;
  height: auto;

  background: linear-gradient(135deg, #e66465, #5e6bff);
    background-clip: border-box;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.decksimMessage1 {
  padding: 20px;
  margin-bottom: 10px;
  font-family: 'Playfair Display', serif;
  font-size: 26px;
  color: #333;
  width: 460px;
  background-color: #fdd1d7;
  border: 2px dashed #ddb488;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  position: absolute;
  top: 9px;
  left: 6px;
}

.decksimMessage2 {
  padding: 10px;
  margin-bottom: 10px;
  font-family: 'Playfair Display', serif;
  font-size: 49px;
  color: #333;
  width: 560px;
  background-color: #f9f9f9;
  border-radius: 5px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  position: absolute;
  top: 225px;
  left: 630px;
  z-index: 1000;
}


/* Tech Fleet Background Messages */
/* Tech Fleet Background Messages */
.backgroundMessage1 {
  padding: 20px;
  margin-bottom: 10px;
  position: absolute;
  top: -30px;
  left: 70px;
  width: 660px;
  font-family: 'Playfair Display', serif;
  font-size: 27px;
  color: #333;
  background-color: #d5ffda;
  border: 2px dashed #c166ff;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.backgroundMessage2 {
  padding: 20px;
  margin-bottom: 10px;
  position: absolute;
  top: -30px;
  left: 790px;
  width: 670px;
  font-family: 'Playfair Display', serif;
  font-size: 20px;
  color: #333;
  background-color: #d5ffda;
  border: 2px dashed #c166ff;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.backgroundMessage3 {
  padding: 20px;
  margin-bottom: 10px;
  position: absolute;
  top: 170px;
  left: 790px;
  width: 670px;
  font-family: 'Playfair Display', serif;
  font-size: 20px;
  color: #333;
  background-color: #d5ffda;
  border: 2px dashed #c166ff;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}



/* Tech Fleet Background Messages */
.backgroundMessage1 {
  padding: 20px;
  margin-bottom: 10px;
  position: absolute;
  top: -30px;
  left: 28px;
  width: 600px;
  font-family: 'Playfair Display', serif;
  font-size: 27px;
  color: #333;
  background-color: #d5ffda;
  border: 2px dashed #c166ff;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.backgroundMessage2 {
  padding: 20px;
  margin-bottom: 10px;
  position: absolute;
  top: -30px;
  left: 710px;
  width: 740px;
  font-family: 'Playfair Display', serif;
  font-size: 21px;
  color: #333;
  background-color: #d5ffda;
  border: 2px dashed #c166ff;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.backgroundMessage3 {
  padding: 20px;
  margin-bottom: 10px;
  position: absolute;
  top: 175px;
  left: 710px;
  width: 740px;
  font-family: 'Playfair Display', serif;
  font-size: 19px;
  color: #333;
  background-color: #d5ffda;
  border: 2px dashed #c166ff;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Tech Fleet Client and Team Messages */
.clientandteamMessage1, .clientandteamMessage2, .clientandteamMessage3 {
  padding: 20px;
  margin-bottom: 10px;
  position: absolute;
  font-family: 'Playfair Display', serif;
  font-size: 23px;
  color: #333;
  background-color: #d5ffda;
  border: 2px dashed #c166ff;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.clientandteamMessage1 {
  top: 160px;
  left: 830px;
  width: 300px;
}

.clientandteamMessage2 {
  top: -40px;
  left: 40px;
  width: 720px;
}
.clientandteamMessage3 {
  top: -40px;
  left: 830px;
  width: 624px;
}
/* Tech Fleet Stakeholder Interview Messages */
.stakeholderinterviewMessage1, .stakeholderinterviewMessage2 {
  padding: 20px;
  margin-bottom: 10px;
  position: absolute;
  font-family: 'Playfair Display', serif;
  color: #333;
  background-color: #d5ffda;
  border: 2px dashed #c166ff;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.stakeholderinterviewMessage1 {
  top: -30px;
  left: 30px;
  font-size: 33px;
  width: 590px;
}

.stakeholderinterviewMessage2 {
  top: -30px;
  left: 697px;
  font-size: 19px;
  width: 726px;
}
/* Tech Fleet Research Strategy and Timeline Messages */
.researchstrategyandtimelineMessage1, .researchstrategyandtimelineMessage2, .researchstrategyandtimelineMessage3 {
  padding: 20px;
  margin-bottom: 10px;
  position: absolute;
  font-family: 'Playfair Display', serif;
  font-size: 23px;
  color: #333;
  background-color: #d5ffda;
  border: 2px dashed #c166ff;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.researchstrategyandtimelineMessage1 {
  top: -25px;
  left: 20px;
  width: 470px;
}

.researchstrategyandtimelineMessage2 {
  top: -25px;
  left: 550px;
  width: 480px;
}

.researchstrategyandtimelineMessage3 {
  top: -25px;
  left: 1086px;
  width: 357px;
}


/* Tech Fleet Card Sorting Analysis Messages */
.cardsortinganalysisMessage1, .cardsortinganalysisMessage2, .cardsortinganalysisMessage3, .cardsortinganalysisMessage4 {
  padding: 20px;
  margin-bottom: 10px;
  position: absolute;
  font-family: 'Playfair Display', serif;
  font-size: 21px;
  color: #333;
  background-color: #d5ffda;
  border: 2px dashed #c166ff;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.cardsortinganalysisMessage1 {
  top: -24px;
  left: 70px;
  width: 560px;
}
.cardsortinganalysisMessage2 {
  top: -40px;
  left: 690px;
  font-size: 20px;
  width: 750px;
}
.cardsortinganalysisMessage3 {
  top: 240px;
  left: 690px;
  font-size: 20px;
  width: 750px;
}

/* Tech Fleet User Interviews Messages */
.userinterviewsMessage2, .userinterviewsMessage3, .userinterviewsMessage4, .userinterviewsMessage5 {
  padding: 20px;
  margin-bottom: 10px;
  position: absolute;
  font-family: 'Playfair Display', serif;
  font-size: 19px;
  color: #333;
  background-color: #d5ffda;
  border: 2px dashed #c166ff;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.userinterviewsMessage2 {
  top: 90px;
  left: 800px;
  width: 680px;
}

.userinterviewsMessage3 {
  top: 410px;
  left: 800px;
  width: 680px;
}

.userinterviewsMessage4 {
  top: 280px;
  left: 800px;
  width: 680px;
}

.userinterviewsMessage5 {
  top: 340px;
  left: 70px;
  font-size: 23px;
  width: 680px;
}

/* Tech Fleet Client Recommendations Messages */
.clientrecommendationsMessage1, .clientrecommendationsMessage2, .clientrecommendationsMessage3, .clientrecommendationsMessage4 {
  padding: 20px;
  margin-bottom: 10px;
  position: absolute;
  font-family: 'Playfair Display', serif;

  color: #333;
  background-color: #d5ffda;
  border: 2px dashed #c166ff;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.clientrecommendationsMessage1 {
  top: 200px;
  left: 475px;
  width: 280px;
  font-size: 20px;
}

.clientrecommendationsMessage2 {
  top: -40px;
  left: 30px;
  width: 720px;
  font-size: 18px;
}

.clientrecommendationsMessage3 {
  top: -40px;
  left: 820px;
  width: 630px;
  font-size: 17px;
}

.clientrecommendationsMessage4 {
  top: 255px;
  left: 820px;
  width: 630px;
  font-size: 17px;
}

.slavefreetradeMessage1 {
  background-color: #ffccbc;
  border: 1px solid #ff5722;
  padding: 10px;
  margin-bottom: 10px;
}

.slavefreetradeMessage2 {
  background-color: #d7ccc8;
  border: 1px solid #795548;
  padding: 10px;
  margin-bottom: 10px;
}



.undergraduateMessage1 {
  padding: 20px;
  margin-bottom: 10px;
  position: absolute;
  top: 130px;
  left: 63px;
  font-family: 'Playfair Display', serif;
  font-size: 19px;
  color: #333;
  width: 680px;
  background-color: #fde1d1;
  border: 2px dashed #ff959f;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}




.personalMessage1 {
  background-color: #b2dfdb;
  border: 1px solid #009688;
  padding: 10px;
  margin-bottom: 10px;
}

.personalMessage2 {
  background-color: #80cbc4;
  border: 1px solid #00796b;
  padding: 10px;
  margin-bottom: 10px;
}

#tabContainer {
  margin-top: 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  position: absolute;
  top: 120px;
  left: 910px;
  width: 580px;
  justify-content: center;
  z-index: 10000;
}

#tabContainer .tab {
  cursor: pointer;
  font-size: 22px;
  color: #333;
  padding: 8px 16px; /* Adjust padding for a more oval shape */
  border-radius: 25px; /* Rounded corners to create an oval shape */
  background-color: #fff; /* White background */
  border: 2px solid #000; /* Black border */
  transition: color 0.3s, background-color 0.3s;
  flex: 0 1 auto;
  font-family: 'Georgia', serif; /* Added to match the font family of .metaTabs */
}

#tabContainer .tab:hover {
  color: #fff;
  background-color: #888;
}


#tabContentContainer {
  margin-top: 20px;
  padding: 20px;
  border: 4px solid #d01010;
  border-radius: 5px;
  background-color: #f9f9f900;
  position: absolute;
  top: 70px;
  left: 20px;
  width: 1450px;
  height: 593px;
}

#gtabContentContainer {
  margin-top: 20px;
  padding: 20px;
  border: 4px solid #d255cb;
  border-radius: 5px;
  background-color: #f9f9f900;
  position: absolute;
  top: 70px;
  left: 20px;
  width: 1450px;
  height: 593px;
}
.aboutPhoto {
  width: 440px;
  height: auto;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  margin-top: 20px;
  display: block;
  margin-left: auto;
  margin-right: auto;
  position: absolute;
  top: 120px;
  left: 1070px;
}

.graduateMessage1 {
  padding: 20px;
  margin-bottom: 10px;
  position: absolute;
  top: 143px;
  left: 43px;
  font-family: 'Playfair Display', serif;
  font-size: 18px;
  color: #333;
  width: 710px;
  background-color: #f0ddf7;
  border: 2px dashed #c595ff;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}


#subContainer {
  margin-top: 20px;
  display: flex;
  gap: 10px;
  position: absolute;
  top: 60px;
  left: 570px;
  width: 700px;
  background-color: #f4f4f447;
}

#subContainer .subSection {
  cursor: pointer;
  font-size: 22px;
  color: #333;
  padding: 8px 16px; /* Adjust padding for a more oval shape */
  border-radius: 25px; /* Rounded corners to create an oval shape */
  background-color: #fff; /* White background */
  border: 2px solid #000; /* Black border */
  transition: color 0.3s, background-color 0.3s;
  flex: 0 1 auto;
  font-family: 'Georgia', serif;
}

#subContainer .subSection:hover {
  color: #fff;
  background-color: #888;
}

#subContentContainer {
  margin-top: 27px;
  padding: 0px;
  border: 4px solid #000;
  border-radius: 1px;
  background-color: #f4f4f447;
  width: 1510px;
  position: absolute;
  top: 106px;
  left: 5px;
  height: 590px;
}

#techFleetTabContainer {
  margin-top: 15px;
  display: flex;
  gap: 10px;
  position: absolute;
  top: -10px;
  left: 25px;
  width: 1520px;
  background-color: #f4f4f447;
}
.techFleetTabs {
  cursor: pointer;
  font-size: 17px;
  color: #333;
  padding: 8px 16px;
  border-radius: 25px;
  background-color: #fff;
  border: 2px solid #000;
  transition: color 0.3s, background-color 0.3s;
  flex: 0 1 auto;
  font-family: 'Georgia', serif;
}

.techFleetTabs:hover {
  color: #fff;
  background-color: #888;
}


#techFleetTabContentContainer {
  margin-top: 20px;
  padding: 20px;
  border: 1px solid #ddd0;
  border-radius: 5px;
  background-color: #f9f9f900;
  position: absolute;
  top: 71px;
  left: -2px;
  width: 92%;
}
#slavefreetradeTabContainer {
  margin-top: 20px;
  display: flex;
  gap: 5px;
  position: absolute;
  top: -10px;
  left: 25px;
  width: 1500px;
  background-color: #f4f4f447;
}

.slavefreetradeTabs {
  cursor: pointer;
  font-size: 22px;
  color: #333;
  padding: 8px;
  border-radius: 5px;
  background-color: #e8e8e8;
  transition: color 0.3s, background-color 0.3s;
  flex: 0 1 auto;
}

.slavefreetradeTabs:hover {
  color: #fff;
  background-color: #888;
}

#slavefreetradeTabContentContainer {
  margin-top: 20px;
  padding: 20px;
  border: 1px solid #ddd0;
  border-radius: 5px;
  background-color: #f9f9f900;
  position: absolute;
  top: 80px;
  left: -2px;
  width: 70%;
}
/* Meta/Facebook Tab styles */
.metaTabs {
  cursor: pointer;
  font-size: 22px;
  color: #333;
  padding: 8px 16px; /* Adjust padding for a more oval shape */
  border-radius: 25px; /* Rounded corners to create an oval shape */
  background-color: #fff; /* White background */
  border: 2px solid #000; /* Black border */
  transition: color 0.3s, background-color 0.3s;
  flex: 0 1 auto;
  font-family: 'Georgia', serif;
}

.metaTabs:hover {
  color: #fff;
  background-color: #888;
}
#metaTabContainer {
  margin-top: 20px;
  display: flex;
  gap: 10px;
  position: absolute;
  top: 60px;
  left: 400px;
  width: 900px;
  background-color: #f4f4f447;
}

#metaTabContentContainer {
  margin-top: 20px;
  padding: 20px;
  border: 4px solid #87d4f2;
  border-radius: 5px;
  background-color: #fff;
  position: absolute;
  top: 113px;
  left: 5px;
  width: 1470px;
  height: 540px;
}
.metaSubTabs {
  cursor: pointer;
  font-size: 22px;
  color: #333;
  padding: 8px 16px; /* Adjust padding for a more oval shape */
  border-radius: 25px; /* Rounded corners to create an oval shape */
  background-color: #fff; /* White background */
  border: 2px solid #000; /* Black border */
  transition: color 0.3s, background-color 0.3s;
  flex: 0 1 auto;
  margin: 5px;
  font-family: 'Georgia', serif;
}

.metaSubTabs:hover {
  color: #fff;
  background-color: #888;
}


#metaUXMethodsTabContainer {
  margin-top: 20px;
  display: flex;
  gap: 10px;
  position: absolute;
  top: 90px;
  left: 110px;
  width: 1350px;
  background-color: #f4f4f403;
}

.metaUXMethodsMessage1 {
  padding: 10px;
  margin-bottom: 10px;
  position: absolute;
  top: 20px;
  left: 7px;
  font-family: 'Playfair Display', serif;
  font-size: 16px;
  color: #333;
  width: 1510px;
}
.metaUXMethodsMessage2 {
  padding: 10px;
  margin-bottom: 10px;
  position: absolute;
  top: 172px;
  left: 810px;
  font-family: 'Playfair Display', serif;
  font-size: 18px;
  color: #333;
  width: 680px;
}

/* Meta UX Methods Messages */
.metaUXMethodsABTestingMessage1,
.metaUXMethodsUserInterviewsMessage1,
.metaUXMethodsSurveysMessage1,
.metaUXMethodsUsabilityTestingMessage1,
.metaUXMethodsFocusGroupsMessage1,
.metaUXMethodsTreeTestingMessage1,
.metaUXMethodsFiveSecondTestingMessage1 {
  padding: 20px;
  margin-bottom: 10px;
  position: absolute;
  left: 250px;
  width: 1020px;
  font-family: 'Playfair Display', serif;
  font-size: 21px;
  color: #333;
  background-color: #eaf4fc;
  border: 2px dashed #ca3d9a;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Specific Positions */
.metaUXMethodsABTestingMessage1 {
  top: 189px;
}

.metaUXMethodsUserInterviewsMessage1 {
  top: 219px;
}

.metaUXMethodsSurveysMessage1 {
  top: 199px;
}

.metaUXMethodsUsabilityTestingMessage1 {
  top: 239px;
}

.metaUXMethodsFocusGroupsMessage1 {
  top: 239px;
}

.metaUXMethodsTreeTestingMessage1 {
  top: 179px;
}

.metaUXMethodsFiveSecondTestingMessage1 {
  top: 209px;
}


.metaAboutPositionMessage1, .metaAboutPositionMessage2, .metaAboutPositionMessage3, .metaAboutPositionMessage4,
.metaProjectsMessage1, .metaProjectsMessage2, .metaProjectsMessage3, .metaProjectsMessage4,
.metaResponsibilitiesMessage1, .metaResponsibilitiesMessage2, .metaResponsibilitiesMessage3, .metaResponsibilitiesMessage4, 
.metaResponsibilitiesMessage5, .metaResponsibilitiesMessage6, .metaResponsibilitiesMessage7 {
  padding: 20px;
  margin-bottom: 10px;
  position: absolute;
  font-family: 'Playfair Display', serif;
  font-size: 20px;
  color: #333;
  background-color: #eaf4fc;
  border: 2px dashed #ca3d9a;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Specific Positions */
.metaAboutPositionMessage1 {
  top: 30px;
  left: 50px;
  width: 620px;
  font-size: 22px;
}

.metaAboutPositionMessage2 {
  top: 30px;
  left: 740px;
  width: 710px;
  font-size: 22px;
}
.metaAboutPositionMessage3 {
  top: 70px;
  left: 750px;
  width: 760px;
  font-size: 21px;
}

.metaAboutPositionMessage4 {
  top: 70px;
  left: 750px;
  width: 760px;
  font-size: 21px;
}

.metaProjectsMessage1 {
  top: 37px;
  left: 50px;
  width: 550px;
  font-size: 24px;
}

.metaProjectsMessage2 {
  top: 37px;
  left: 670px;
  width: 780px;
  font-size: 21px;
}

.metaProjectsMessage3 {
  top: 318px;
  left: 670px;
  width: 780px;
  font-size: 21px;
}

.metaProjectsMessage4 {
  top: 177px;
  left: 50px;
  width: 550px;
  font-size: 20px;
}

.metaResponsibilitiesMessage1 {
  top: 19px;
  left: 50px;
  width: 700px;
  font-size: 20px;
}

.metaResponsibilitiesMessage2 {
  top: 94px;
  left: 820px;
  width: 630px;
  font-size: 20px;
}

.metaResponsibilitiesMessage3 {
  top: 330px;
  left: 50px;
  width: 700px;
  font-size: 20px;
}

.metaResponsibilitiesMessage4 {
  top: 330px;
  left: 820px;
  width: 620px;
  font-size: 20px;
}

.metaTimelineMessage1 {
  padding: 10px;
  margin-bottom: 10px;
  position: absolute;
  top: 20px;
  left: 50px;
  font-family: 'Playfair Display', serif;
  font-size: 24px;
  color: #333;
  width: 1180px;
}

.metaTimelineMessage2 {
  padding: 10px;
  margin-bottom: 10px;
  position: absolute;
  top: 470px;
  left: 50px;
  font-family: 'Playfair Display', serif;
  font-size: 24px;
  color: #333;
  width: 800px;
}

.metaTimelineMessage3 {
  padding: 10px;
  margin-bottom: 10px;
  position: absolute;
  top: 800px;
  left: 50px;
  font-family: 'Playfair Display', serif;
  font-size: 24px;
  color: #333;
  width: 800px;
}

#personalTabContainer {
  margin-top: 20px;
  display: flex;
  gap: 10px;
  position: absolute;
  top: 60px;
  left: 522px;
  width: 700px;
  background-color: #fff;
}

.personalTabs {
  cursor: pointer;
  font-size: 22px; /* Match font size */
  color: #333;
  padding: 8px 16px; /* Adjust padding for a more oval shape */
  border-radius: 25px; /* Rounded corners to create an oval shape */
  background-color: #fff; /* White background */
  border: 2px solid #000; /* Black border */
  transition: color 0.3s, background-color 0.3s;
  text-align: center;
  display: inline-block;
  margin: 5px;
  font-family: 'Georgia', serif; /* Match font family */
}

.personalTabs:hover {
  color: #fff;
  background-color: #888;
}


#personalTabContentContainer {
  margin-top: 27px;
  padding: 0px;
  border: 4px solid #000;
  border-radius: 1px;
  background-color: #f4f4f447;
  width: 1510px;
  position: absolute;
  top: 106px;
  left: 5px;
  height: 590px;
}



.personalDecksimMessage1 {
  padding: 10px;
  margin-bottom: 10px;
  font-family: 'Playfair Display', serif;
  font-size: 19px;
  color: #333;
  width: 560px;
  background-color: #f9f9f9;
  border-radius: 5px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  position: absolute;
  top: 130px;
  left: -2px;
}

.personalDecksimMessage2{
  padding: 10px;
  margin-bottom: 10px;
  position: relative;
  font-family: 'Playfair Display', serif;
  font-size: 19px;
  color: #333;
  width: 1470px;
  background-color: #f9f9f9;
  border-radius: 5px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.decksimTabs {
  cursor: pointer;
  font-size: 22px;
  color: #333;
  padding: 8px 16px;
  border-radius: 25px;
  background-color: #fff;
  border: 2px solid #000;
  transition: color 0.3s, background-color 0.3s;
  text-align: center;
  display: inline-block;
  margin: 5px;
  font-family: 'Georgia', serif;
}

.decksimTabs:hover {
  color: #fff;
  background-color: #888;
}


#decksimTabContentContainer {
  margin-top: 20px;
}
#decksimTabContainer {
  margin-top: 0px;
  display: flex;
  flex-wrap: wrap;
  gap: 0px;
  width: 1023px;
  justify-content: center;
  position: absolute;
  top: 7px;
  left: 498px;
  z-index: 9000;
}

.decksimBackgroundMessage1 {
  padding: 20px;
  margin-bottom: 10px;
  font-family: 'Playfair Display', serif;
  font-size: 19px;
  color: #333;
  width: 840px;
  background-color: #fdd1d7;
  border: 2px dashed #ddb488;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  position: absolute;
  top: 119px;
  left: 618px;
}

.decksimWebsiteFeaturesMessage1, .decksimWebsiteFeaturesMessage2 {
  padding: 20px;
  margin-bottom: 10px;
  font-family: 'Playfair Display', serif;
  font-size: 20px;
  color: #333;
  width: 830px;
  background-color: #fdd1d7;
  border: 2px dashed #ddb488;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  position: absolute;
}

.decksimWebsiteFeaturesMessage1 {
  top: 114px;
  left: 618px;
}

.decksimWebsiteFeaturesMessage2 {
  top: 431px;
  left: 618px;
}

.decksimUserInterviewsMessage1 {
  padding: 20px;
  margin-bottom: 10px;
  font-family: 'Playfair Display', serif;
  font-size: 21px;
  color: #333;
  width: 840px;
  background-color: #fdd1d7;
  border: 2px dashed #ddb488;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  position: absolute;
  top: 120px;
  left: 618px;
}

.decksimABTestingMessage1, .decksimABTestingMessage2 {
  padding: 20px;
  margin-bottom: 10px;
  font-family: 'Playfair Display', serif;
  font-size: 21px;
  color: #333;
  width: 850px;
  background-color: #fdd1d7;
  border: 2px dashed #ddb488;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  position: absolute;
}

.decksimABTestingMessage1 {
  top: 120px;
  left: 608px;
}

.decksimABTestingMessage2 {
  top: 531px;
  left: 608px;
}

.decksimFutureDevelopmentMessage1 {
  padding: 20px;
  margin-bottom: 10px;
  font-family: 'Playfair Display', serif;
  font-size: 24px;
  color: #333;
  width: 800px;
  background-color: #fdd1d7;
  border: 2px dashed #ddb488;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  position: absolute;
  top: 160px;
  left: 650px;
}



.personalWritingsMessage1 {
  padding: 20px;
  margin-bottom: 10px;
  position: absolute;
  top: 20px;
  left: 50px;
  font-family: 'Playfair Display', serif;
  font-size: 24px;
  color: #333;
  width: 1370px;
  background-color: #fdd1d7;
  border: 2px dashed #ddb488;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.personalWritingsImage1  {
  padding: 10px;
  margin: 10px;
  position: absolute;
  width: 250px;
}

.personalWritingsImage2 {
  padding: 10px;
  margin: 10px;
  position: absolute;
  width: 250px;
}

.personalWritingsImage3 {
  padding: 10px;
  margin: 10px;
  position: absolute;
  width: 310px;
}
.personalWritingsImage1 {
  top: 170px;
  left: 660px;
}

.personalWritingsImage2 {
  top: 170px;
  left: 1160px;
}
.personalWritingsImage3 {
  top: 190px;
  left: 90px;
}

.personalWritingsLink1, .personalWritingsLink2, .personalWritingsLink3 {
  padding: 10px;
  margin: 10px;
  position: absolute;
  font-family: 'Playfair Display', serif;
  font-size: 18px;
  color: #0066cc; /* Link color */
  text-decoration: none; /* Remove underline */
}

.personalWritingsLink1:hover, .personalWritingsLink2:hover, .personalWritingsLink3:hover {
  text-decoration: underline; /* Underline on hover */
}

.personalWritingsLink1 {
  top: 410px;
  left: 0px;
}

.personalWritingsLink2 {
  top: 410px;
  left: 530px;
}

.personalWritingsLink3 {
  top: 410px;
  left: 1160px;
}

.activeTab {
  background-color: #d0d0d0!important; /* Highlight color */
  color: #fff!important; /* Text color for active tab */
  border: 1px solid #888!important; /* Border for active tab */
}

/* Container to hold the development timeline messages horizontally */
.developmentTimelineContainer {
  display: flex;
  align-items: center;
  gap: 10px;
  overflow: hidden;
  position: absolute;
  top: 310px;
  left: -30px;
  padding: 10px;
  margin: 20px;
  width: 100%;
  box-sizing: border-box;
  z-index: 900;
  height: 389px;
}

.timelineArrow {
  background-color: #f0f0f0;
  border: none;
  padding: 10px;
  cursor: pointer;
  font-size: 18px;
  transition: background-color 0.3s;
}

.timelineArrow:hover {
  background-color: #d0d0d0;
}

.messagesContainer {
  display: flex;
  flex-direction: row;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  width: 100%;
  box-sizing: border-box; /* Include padding in the element's total width and height */
}

.developmentTimelineMessage {
  flex: 0 0 auto;
  padding: 20px; /* Increase padding for better spacing */
  border: 1px solid #ccc;
  border-radius: 4px;
  background-color: #f9f9f9;
  min-width: 300px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s, opacity 0.3s;
  opacity: 0.6;
  scroll-snap-align: start;
  font-size: 24px;
  max-width: 800px; /* Adjust based on your layout */
  margin: 10px 0; /* Add margin to ensure spacing */
}

.developmentTimelineMessage.focused {
  transform: scale(1);
  opacity: 1;
}

/* Duties Messages */
.dutiesMessage1 {
  padding: 20px;
  margin-bottom: 10px;
  position: absolute;
  top: 160px;
  left: 810px;
  font-family: 'Playfair Display', serif;
  font-size: 22px;
  color: #333;
  width: 620px;
  background-color: #fde1d1;
  border: 2px dashed #ff959f;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Topic Messages */
.topicMessage1, .topicMessage2, .topicMessage3, .topicMessage4 {
  padding: 20px;
  margin-bottom: 10px;
  position: absolute;
  left: 810px;
  font-family: 'Playfair Display', serif;
  font-size: 21px;
  color: #333;
  width: 620px;
  background-color: #fde1d1;
  border: 2px dashed #ff959f;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.topicMessage1 {
  top: 150px;
}

.topicMessage2 {
  top: 251px;
}

.topicMessage3 {
  top: 380px;
}

.topicMessage4 {
  top: 514px;
}

/* Methods Messages */
.methodsMessage1, .methodsMessage2 {
  padding: 20px;
  margin-bottom: 10px;
  position: absolute;
  left: 810px;
  font-family: 'Playfair Display', serif;
  font-size: 21px;
  color: #333;
  width: 620px;
  background-color: #fde1d1;
  border: 2px dashed #ff959f;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.methodsMessage1 {
  top: 150px;
}

.methodsMessage2 {
  top: 360px;
}

/* Survey Questions Messages */
.surveyQuestionsMessage1, .surveyQuestionsMessage2 {
  padding: 20px;
  margin-bottom: 10px;
  position: absolute;
  left: 820px;
  font-family: 'Playfair Display', serif;
  color: #333;
  width: 680px;
  background-color: #fde1d1;
  border: 2px dashed #ff959f;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  width: 610px;
  font-size: 20px;
}

.surveyQuestionsMessage1 {
  top: 160px;
}

.surveyQuestionsMessage2 {
  top: 510px;
  font-size: 22px;
}

/* Results Messages */
.resultsMessage1, .resultsMessage2, .resultsMessage3 {
  padding: 20px;
  margin-bottom: 10px;
  position: absolute;
  left: 810px;
  font-family: 'Playfair Display', serif;
  font-size: 23px;
  color: #333;
  width: 620px;
  background-color: #fde1d1;
  border: 2px dashed #ff959f;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.resultsMessage1 {
  top: 150px;

}

.resultsMessage2 {
  top: 330px;
}

.resultsMessage3 {
  top: 150px;
}

/* Next Steps Messages */
.nextStepsMessage1, .nextStepsMessage2 {
  padding: 20px;
  margin-bottom: 10px;
  position: absolute;
  left: 780px;
  font-family: 'Playfair Display', serif;
  font-size: 21px;
  color: #333;
  width: 640px;
  background-color: #fde1d1;
  border: 2px dashed #ff959f;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.nextStepsMessage1 {
  top: 150px;
}

.nextStepsMessage2 {
  top: 405px;
}
/* Graduate Duties Messages */
.gradDutiesMessage1 {
  padding: 20px;
  margin-bottom: 10px;
  position: absolute;
  top: 160px;
  left: 810px;
  font-family: 'Playfair Display', serif;
  font-size: 24px;
  color: #333;
  width: 600px;
  background-color: #f0ddf7;
  border: 2px dashed #c595ff;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Graduate Background Messages */
.gradBackgroundMessage1 {
  padding: 20px;
  margin-bottom: 10px;
  position: absolute;
  top: 110px;
  left: 810px;
  font-family: 'Playfair Display', serif;
  font-size: 24px;
  color: #333;
  width: 600px;
  background-color: #f0ddf7;
  border: 2px dashed #c595ff;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.gradBackgroundMessage2 {
  padding: 20px;
  margin-bottom: 10px;
  position: absolute;
  top: 378px;
  left: 810px;
  font-family: 'Playfair Display', serif;
  font-size: 24px;
  color: #333;
  width: 600px;
  background-color: #f0ddf7;
  border: 2px dashed #c595ff;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Graduate Methods Messages */
.gradMethodsMessage1 {
  padding: 20px;
  margin-bottom: 10px;
  position: absolute;
  top: 110px;
  left: 810px;
  font-family: 'Playfair Display', serif;
  font-size: 24px;
  color: #333;
  width: 600px;
  background-color: #f0ddf7;
  border: 2px dashed #c595ff;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.gradMethodsMessage2 {
  padding: 20px;
  margin-bottom: 10px;
  position: absolute;
  top: 360px;
  left: 810px;
  font-family: 'Playfair Display', serif;
  font-size: 24px;
  color: #333;
  width: 600px;
  background-color: #f0ddf7;
  border: 2px dashed #c595ff;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Graduate Results Messages */
.gradResultsMessage1 {
  padding: 20px;
  margin-bottom: 10px;
  position: absolute;
  top: 110px;
  left: 810px;
  font-family: 'Playfair Display', serif;
  font-size: 24px;
  color: #333;
  width: 610px;
  background-color: #f0ddf7;
  border: 2px dashed #c595ff;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.gradResultsMessage2 {
  padding: 20px;
  margin-bottom: 10px;
  position: absolute;
  top: 260px;
  left: 810px;
  font-family: 'Playfair Display', serif;
  font-size: 18px;
  color: #333;
  width: 680px;
  background-color: #f0ddf7;
  border: 2px dashed #c595ff;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Graduate Next Steps Messages */
.gradNextStepsMessage1 {
  padding: 20px;
  margin-bottom: 10px;
  position: absolute;
  top: -50px;
  left: -120px;
  font-family: 'Playfair Display', serif;
  font-size: 18px;
  color: #333;
  width: 680px;
  background-color: #f0ddf7;
  border: 2px dashed #c595ff;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.gradNextStepsMessage2 {
  padding: 20px;
  margin-bottom: 10px;
  position: absolute;
  top: 180px;
  left: -120px;
  font-family: 'Playfair Display', serif;
  font-size: 18px;
  color: #333;
  width: 680px;
  background-color: #f0ddf7;
  border: 2px dashed #c595ff;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}


.techFleetSubTabs {
  cursor: pointer;
  font-size: 22px; /* Added to match the font size of .metaTabs */
  color: #333;
  padding: 8px 16px; /* Adjust padding for a more oval shape */
  border-radius: 25px; /* Rounded corners to create an oval shape */
  background-color: #fff; /* White background */
  border: 2px solid #000; /* Black border */
  transition: color 0.3s, background-color 0.3s;
  display: inline-block;
  margin: 5px;
  font-family: 'Georgia', serif; /* Added to match the font family of .metaTabs */
  /* Removed fixed width */
}

.techFleetSubTabs:hover {
  color: #fff;
  background-color: #888;
}

#techFleetUXResearchMethodsTabContainer {
  margin-bottom: 20px;
  position: absolute;
  top: -20px;
  left: 820px;
  display: flex;
  gap: 10px;
  width: 680px;
}

#techFleetUXResearchMethodsTabContainer .techFleetUXResearchMethodTab {
  cursor: pointer;
  font-size: 22px;
  color: #333;
  padding: 8px 16px; /* Adjust padding for a more oval shape */
  border-radius: 25px; /* Rounded corners to create an oval shape */
  background-color: #fff; /* White background */
  border: 2px solid #000; /* Black border */
  transition: color 0.3s, background-color 0.3s;
  flex: 0 1 auto;
  font-family: 'Georgia', serif;
}

#techFleetUXResearchMethodsTabContainer .techFleetUXResearchMethodTab:hover {
  color: #fff;
  background-color: #888;
}

#techFleetUXResearchMethodsContentContainer {
  padding: 10px;
}


/* UX Research Methods Main Messages */
.uxresearchmethodsMessage1, .uxresearchmethodsMessage2 {
  padding: 20px;
  margin-bottom: 10px;
  position: absolute;
  font-family: 'Playfair Display', serif;
  color: #333;
  background-color: #d5ffda;
  border: 2px dashed #c166ff;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.uxresearchmethodsMessage1 {
  top: -40px;
  left: 41px;
  font-size: 23px;
  width: 270px;
}

.uxresearchmethodsMessage2 {
  top: -40px;
  left: 370px;
  font-size: 22px;
  width: 380px;
}

/* UX Research Methods Survey Questions Messages */
.surveysMessage1, .surveysMessage2 {
  padding: 20px;
  margin-bottom: 10px;
  position: absolute;
  font-family: 'Playfair Display', serif;
  color: #333;
  background-color: #d5ffda;
  border: 2px dashed #c166ff;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.surveysMessage1 {
  top: 60px;
  left: 860px;
  font-size: 22px;
  width: 550px;
}

.surveysMessage2 {
  top: 260px;
  left: 860px;
  font-size: 18px;
  width: 680px;
}

.uxresearchmethodsMessage3 {
  padding: 20px;
  margin-bottom: 10px;
  position: absolute;
  top: 110px;
  left: 630px;
  font-family: 'Playfair Display', serif;
  font-size: 19px;
  color: #333;
  width: 169px;
  background-color: #d5ffda;
  border: 2px dashed #c166ff;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* UX Research Methods Card Sorting Messages */
.cardsortingMessage1, .cardsortingMessage2 {
  padding: 20px;
  margin-bottom: 10px;
  position: absolute;
  font-family: 'Playfair Display', serif;
  color: #333;
  background-color: #d5ffda;
  border: 2px dashed #c166ff;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.cardsortingMessage1 {
  top: 41px;
  left: 850px;
  font-size: 19px;
  width: 610px;
}


/* UX Research Methods User Interviews Messages */
.userinterviewsMessage1 {
  padding: 20px;
  margin-bottom: 10px;
  position: absolute;
  top: 39px;
  left: 850px;
  font-family: 'Playfair Display', serif;
  font-size: 17px;
  color: #333;
  width: 600px;
  background-color: #d5ffda;
  border: 2px dashed #c166ff;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
/* UX Research Methods Limitations Messages */
.limitationsMessage1 {
  padding: 20px;
  margin-bottom: 10px;
  position: absolute;
  top: 110px;
  left: 860px;
  font-family: 'Playfair Display', serif;
  font-size: 23px;
  color: #333;
  width: 590px;
  background-color: #d5ffda;
  border: 2px dashed #c166ff;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.slavefreetradeAlwaysVisibleMessage1 {
  padding: 20px;
  margin-bottom: 10px;
  position: absolute;
  top: -40px;
  left: 10px;
  font-family: 'Playfair Display', serif;
  font-size: 19px;
  color: #333;
  width: 694px;
  background-color: #f7f2c6;
  border: 2px dashed #d64381;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}


/* Slave Free Trade Always Visible Messages */
/* Slave Free Trade Background Messages */
.slavefreetradeBackgroundMessage1, .slavefreetradeBackgroundMessage2 {
  padding: 20px;
  margin-bottom: 10px;
  position: absolute;
  font-family: 'Playfair Display', serif;
  font-size: 19px;
  color: #333;
  width: 700px;
  background-color: #f7f2c6;
  border: 2px dashed #d64381;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.slavefreetradeBackgroundMessage1 {
  top: -35px;
  left: 770px;
}

.slavefreetradeBackgroundMessage2 {
  top: 152px;
  left: 470px;
}

/* Slave Free Trade Literature Review Messages */
.slavefreetradeLiteraturereviewMessage1, .slavefreetradeLiteraturereviewMessage2 {
  padding: 20px;
  margin-bottom: 10px;
  position: absolute;
  font-family: 'Playfair Display', serif;
  font-size: 19px;
  color: #333;
  width: 700px;
  background-color: #f7f2c6;
  border: 2px dashed #d64381;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.slavefreetradeLiteraturereviewMessage1 {
  top: -30px;
  left: 770px;
}

.slavefreetradeLiteraturereviewMessage2 {
  top: 232px;
  left: 770px;
}

/* Slave Free Trade Creating User Interviews Messages */
.slavefreetradeCreatinguserinterviewsMessage1, .slavefreetradeCreatinguserinterviewsMessage2 {
  padding: 20px;
  margin-bottom: 10px;
  position: absolute;
  font-family: 'Playfair Display', serif;
  font-size: 19px;
  color: #333;
  width: 700px;
  background-color: #f7f2c6;
  border: 2px dashed #d64381;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.slavefreetradeCreatinguserinterviewsMessage1 {
  top: 10px;
  left: 790px;
}

.slavefreetradeCreatinguserinterviewsMessage2 {
  top: 172px;
  left: 790px;
}

/* Slave Free Trade Conducting User Interviews Messages */
.slavefreetradeConductinguserinterviewsMessage1, .slavefreetradeConductinguserinterviewsMessage2 {
  padding: 20px;
  margin-bottom: 10px;
  position: absolute;
  font-family: 'Playfair Display', serif;
  font-size: 19px;
  color: #333;
  width: 700px;
  background-color: #f7f2c6;
  border: 2px dashed #d64381;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.slavefreetradeConductinguserinterviewsMessage1 {
  top: -30px;
  left: 770px;
}

.slavefreetradeConductinguserinterviewsMessage2 {
  top: 442px;
  left: 770px;
}

/* Slave Free Trade Client Presentation Messages */
.slavefreetradeClientpresentationMessage1 {
  padding: 20px;
  margin-bottom: 10px;
  position: absolute;
  top: -30px;
  left: 763px;
  font-family: 'Playfair Display', serif;
  font-size: 19px;
  color: #333;
  width: 700px;
  background-color: #f7f2c6;
  border: 2px dashed #d64381;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Slave Free Trade Personas Messages */
.slavefreetradePersonasMessage1, .slavefreetradePersonasMessage2 {
  padding: 20px;
  margin-bottom: 10px;
  position: absolute;
  font-family: 'Playfair Display', serif;
  font-size: 19px;
  color: #333;
  width: 700px;
  background-color: #f7f2c6;
  border: 2px dashed #d64381;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.slavefreetradePersonasMessage1 {
  top: 10px;
  left: 770px;
}

.slavefreetradePersonasMessage2 {
  top: 262px;
  left: 770px;
}

/* Slave Free Trade Research Insights Messages */
.slavefreetradeResearchinsightsMessage1, .slavefreetradeResearchinsightsMessage2 {
  padding: 20px;
  margin-bottom: 10px;
  position: absolute;
  font-family: 'Playfair Display', serif;
  font-size: 19px;
  color: #333;
  width: 700px;
  background-color: #f7f2c6;
  border: 2px dashed #d64381;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.slavefreetradeResearchinsightsMessage1 {
  top: -30px;
  left: 770px;
}

.slavefreetradeResearchinsightsMessage2 {
  top: 572px;
  left: 770px;
}

/* Slave Free Trade Prototypes Messages */
.slavefreetradePrototypesMessage1, .slavefreetradePrototypesMessage2 {
  padding: 20px;
  margin-bottom: 10px;
  position: absolute;
  font-family: 'Playfair Display', serif;
  font-size: 19px;
  color: #333;
  width: 700px;
  background-color: #f7f2c6;
  border: 2px dashed #d64381;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.slavefreetradePrototypesMessage1 {
  top: -50px;
  left: 770px;
}

.slavefreetradePrototypesMessage2 {
  top: 284px;
  left: 770px;
}

/* Slave Free Trade Workflows Messages */
.slavefreetradeWorkflowsMessage1, .slavefreetradeWorkflowsMessage2 {
  padding: 20px;
  margin-bottom: 10px;
  position: absolute;
  font-family: 'Playfair Display', serif;
  font-size: 19px;
  color: #333;
  width: 700px;
  background-color: #f7f2c6;
  border: 2px dashed #d64381;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.slavefreetradeWorkflowsMessage1 {
  top: -30px;
  left: 770px;
}

.slavefreetradeWorkflowsMessage2 {
  top: 280px;
  left: 770px;
}

/* Slave Free Trade Prototype Presentation Messages */
.slavefreetradePrototypepresentationMessage1 {
  padding: 20px;
  margin-bottom: 10px;
  position: absolute;
  top: 10px;
  left: 770px;
  font-family: 'Playfair Display', serif;
  font-size: 19px;
  color: #333;
  width: 700px;
  background-color: #f7f2c6;
  border: 2px dashed #d64381;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}




/* Slave Free Trade Background Messages */
.slavefreetradeBackgroundMessage1 {
  padding: 10px;
  margin-bottom: 10px;
  position: absolute;
  top: -35px;
  left: 770px;
  font-family: 'Playfair Display', serif;
  font-size: 20px;
  color: #333;
  width: 720px;
}

.slavefreetradeBackgroundMessage2 {
  padding: 10px;
  margin-bottom: 10px;
  position: absolute;
  top: 152px;
  left: 470px;
  font-family: 'Playfair Display', serif;
  font-size: 18px;
  color: #333;
  width: 270px;
}


/* Slave Free Trade Literature Review Messages */
.slavefreetradeLiteraturereviewMessage1 {
  padding: 10px;
  margin-bottom: 10px;
  position: absolute;
  top: -30px;
  left: 770px;
  font-family: 'Playfair Display', serif;
  font-size: 22px;
  color: #333;
  width: 680px;
}

.slavefreetradeLiteraturereviewMessage2 {
  padding: 10px;
  margin-bottom: 10px;
  position: absolute;
  top: 232px;
  left: 770px;
  font-family: 'Playfair Display', serif;
  font-size: 22px;
  color: #333;
  width: 680px;
}

/* Slave Free Trade Creating User Interviews Messages */
.slavefreetradeCreatinguserinterviewsMessage1 {
  padding: 10px;
  margin-bottom: 10px;
  position: absolute;
  top: 10px;
  left: 790px;
  font-family: 'Playfair Display', serif;
  font-size: 20px;
  color: #333;
  width: 680px;
}
.slavefreetradeCreatinguserinterviewsMessage2 {
  padding: 10px;
  margin-bottom: 10px;
  position: absolute;
  top: 172px;
  left: 790px;
  font-family: 'Playfair Display', serif;
  font-size: 18px;
  color: #333;
  width: 680px;
}


/* Slave Free Trade Conducting User Interviews Messages */
.slavefreetradeConductinguserinterviewsMessage1 {
  padding: 10px;
  margin-bottom: 10px;
  position: absolute;
  top: -40px;
  left: 770px;
  font-family: 'Playfair Display', serif;
  font-size: 20px;
  color: #333;
  width: 680px;
}

.slavefreetradeConductinguserinterviewsMessage2 {
  padding: 10px;
  margin-bottom: 10px;
  position: absolute;
  top: 428px;
  left: 770px;
  font-family: 'Playfair Display', serif;
  font-size: 20px;
  color: #333;
  width: 680px;
}

.slavefreetradeClientpresentationMessage1 {
  padding: 10px;
  margin-bottom: 10px;
  position: absolute;
  top: -40px;
  left: 763px;
  font-family: 'Playfair Display', serif;
  font-size: 20px;
  color: #333;
  width: 700px;
}

/* Slave Free Trade Personas Messages */
.slavefreetradePersonasMessage1 {
  padding: 10px;
  margin-bottom: 10px;
  position: absolute;
  top: -40px;
  left: 770px;
  font-family: 'Playfair Display', serif;
  font-size: 23px;
  color: #333;
  width: 680px;
}

.slavefreetradePersonasMessage2 {
  padding: 10px;
  margin-bottom: 10px;
  position: absolute;
  top: 262px;
  left: 770px;
  font-family: 'Playfair Display', serif;
  font-size: 23px;
  color: #333;
  width: 680px;
}

/* Slave Free Trade Research Insights Messages */
.slavefreetradeResearchinsightsMessage1 {
  padding: 10px;
  margin-bottom: 10px;
  position: absolute;
  top: -40px;
  left: 770px;
  font-family: 'Playfair Display', serif;
  font-size: 20px;
  color: #333;
  width: 680px;
}

.slavefreetradeResearchinsightsMessage2 {
  padding: 10px;
  margin-bottom: 10px;
  position: absolute;
  top: 560px;
  left: 770px;
  font-family: 'Playfair Display', serif;
  font-size: 18px;
  color: #333;
  width: 680px;
}

/* Slave Free Trade Prototypes Messages */
.slavefreetradePrototypesMessage1 {
  padding: 10px;
  margin-bottom: 10px;
  position: absolute;
  top: -40px;
  left: 770px;
  font-family: 'Playfair Display', serif;
  font-size: 19px;
  color: #333;
  width: 706px;
}

.slavefreetradePrototypesMessage2 {
  padding: 10px;
  margin-bottom: 10px;
  position: absolute;
  top: 262px;
  left: 770px;
  font-family: 'Playfair Display', serif;
  font-size: 19px;
  color: #333;
  width: 706px;
}


.slavefreetradeWorkflowsMessage1 {
  padding: 10px;
  margin-bottom: 10px;
  position: absolute;
  top: -40px;
  left: 770px;
  font-family: 'Playfair Display', serif;
  font-size: 20px;
  color: #333;
  width: 680px;
}

.slavefreetradeWorkflowsMessage2 {
  padding: 10px;
  margin-bottom: 10px;
  position: absolute;
  top: 280px;
  left: 770px;
  font-family: 'Playfair Display', serif;
  font-size: 20px;
  color: #333;
  width: 680px;
}


/* Slave Free Trade Prototype Presentation Messages */
.slavefreetradePrototypepresentationMessage1 {
  padding: 10px;
  margin-bottom: 10px;
  position: absolute;
  top: -40px;
  left: 770px;
  font-family: 'Playfair Display', serif;
  font-size: 26px;
  color: #333;
  width: 680px;
}

#imageContainer {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 20px;
  position: absolute;
  top: 402px;
  left: 150px;
  width: 500px;
  height: 280px;
  border-radius: 5px;
  overflow: hidden;
  background-color: #f0f0f0;
  z-index: 20000;
}

#currentImage {
  width: 100%;
  height: 100%;
  object-fit: contain; /* Scale the image to fit the container */
  border-radius: 5px;
}

.arrow {
  cursor: pointer;
  font-size: 24px;
  user-select: none;
  padding: 10px;
  color: #333;
  background-color: #f9f9f9;
  border-radius: 5px;
  position: absolute;
  z-index: 1000; /* Ensure arrows are above the image container */
}

.leftArrow {
  left: 40px;
  top: 77%;
  transform: translateY(-50%);
}

.rightArrow {
  right: 790px;
  top: 77%;
  transform: translateY(-50%);
}

/* Add this CSS */
.dotsContainer {
  display: flex;
  justify-content: center;
  margin-top: 10px;
  position: absolute;
  top: 702px;
  left: 330px;
}

.dot {
  height: 10px;
  width: 10px;
  margin: 0 5px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  cursor: pointer;
}

.dot.active {
  background-color: #717171;
}



.diagonalArrowsButton {
  position: absolute;
  top: 420px;
  left: 670px;
  padding: 0;
  background-color: #fff;
  border: 2px solid #000;
  border-radius: 10px;
  cursor: pointer;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  width: 50px;
  height: 50px;
  justify-items: center;
  align-items: center;
}

.diagonalArrow {
  font-size: 18px;
  width: 10px;
  height: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}


/* Expanded styles */
.expanded #imageContainer {
  top: 42px;
  left: 150px;
  width: 1300px;
  height: 640px;
}

.expanded .leftArrow {
  left: 40px;
  top: 57%;
}

.expanded .rightArrow {
  right: 10px;
  top: 57%;
}

.expanded .dotsContainer {
  top: 702px;
  left: 760px;
}

.expanded .diagonalArrowsButton {
  top: 60px;
  left: 1460px;
}

#timelineDateContainer {
  display: flex;
  justify-content: space-around;
  width: 1500px;
  margin-bottom: 20px;
  position: absolute;
  top: 48px;
  left: -10px;
}

.timelineDateItem {
  font-size: 14px;
  font-weight: bold;
  padding: 5px 10px;
  cursor: pointer;
  transition: background-color 0.3s, color 0.3s;
}

.timelineDateItem.active {
  background-color: #007BFF;
  color: #fff;
}
#timelineContainer {
  width: 1410px;
  height: 610px;
  perspective: 1000px;
  margin: auto;
  overflow: hidden;
  position: absolute;
  top: -2px;
  left: -210px;
}

.timelineCylinder {
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 1s;
  position: absolute;
  top: 0%;
  left: 10%;
  transform-origin: center;
}
.timelineItem {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  padding: 10px;
  box-sizing: border-box;
  text-align: center;
}

.timelineItemContent {
  width: 40%;
  margin: 0 auto;
  text-align: left;
}
#slavefreetradeImageContainer {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 20px;
  position: absolute;
  top: 152px;
  left: 70px;
  width: 500px;
  height: 280px;
  border-radius: 5px;
  overflow: hidden;
  background-color: #f0f0f000;
}

#slavefreetradeCurrentImage {
  width: 100%;
  height: 100%;
  object-fit: contain; /* Scale the image to fit the container */
  border-radius: 5px;
}

.slavefreetradeArrow {
  cursor: pointer;
  font-size: 24px;
  user-select: none;
  padding: 10px;
  color: #333;
  background-color: #f9f9f9;
  border-radius: 5px;
  position: absolute;
  z-index: 1000; /* Ensure arrows are above the image container */
}

.slavefreetradeLeftArrow {
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
}

.slavefreetradeRightArrow {
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
}

#slavefreetradeDotsContainer {
  display: flex;
  justify-content: center;
  margin-top: 10px;
}

#slavefreetradeDotsContainer .dot {
  height: 10px;
  width: 10px;
  margin: 0 5px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.3s;
}

#slavefreetradeDotsContainer .dot.active {
  background-color: #717171;
}

.slavefreetradeDiagonalArrowsButton {
  position: absolute;
  top: 160px;
  right: 1030px;
  padding: 0;
  background-color: #fff;
  border: 2px solid #000;
  border-radius: 10px;
  cursor: pointer;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  width: 50px;
  height: 50px;
  justify-items: center;
  align-items: center;
}

/* Expanded styles */
.expanded #slavefreetradeImageContainer {
  top: -198px;
  left: 100px;
  width: 1300px;
  height: 640px;
}

.expanded .slavefreetradeLeftArrow {
  left: 40px;
  top: 57%;
}

.expanded .slavefreetradeRightArrow {
  right: 10px;
  top: 57%;
}

.expanded #slavefreetradeDotsContainer {
  top: 702px;
  left: 760px;
}

.expanded .slavefreetradeDiagonalArrowsButton {
  top: -180px;
  right: -280px;
}

#techFleetImageContainer {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 20px;
  position: absolute;
  top: 162px;
  left: 90px;
  width: 500px;
  height: 280px;
  border-radius: 5px;
  overflow: hidden;
  background-color: #f0f0f000;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  z-index: 10000;
}

#techFleetCurrentImage {
  width: 100%;
  height: 100%;
  object-fit: contain; /* Scale the image to fit the container */
  border-radius: 5px;
}

.techFleetArrow {
  cursor: pointer;
  font-size: 24px;
  user-select: none;
  padding: 10px;
  color: #333;
  background-color: #f9f9f9;
  border-radius: 5px;
  position: absolute;
  z-index: 1000; /* Ensure arrows are above the image container */
}

.techFleetLeftArrow {
  left: 41px;
  top: 537%;
  transform: translateY(-50%);
}

.techFleetRightArrow {
  right: 811px;
  top: 537%;
  transform: translateY(-50%);
}

#techFleetDotsContainer {
  position: absolute;
  top: 468px;
  left: 210px;
}
#techFleetDotsContainer .dot {
  height: 10px;
  width: 10px;
  margin: 0 5px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.3s;
}

#techFleetDotsContainer .dot.active {
  background-color: #717171;
}


/* Expanded styles */
.expanded #techFleetImageContainer {
  top: -218px;
  left: 130px;
  width: 1220px;
  height: 680px;
}

.expanded .techFleetLeftArrow {
  left: 40px;
  top: 57%;
  font-size: 44px;
}

.expanded .techFleetRightArrow {
  right: 10px;
  top: 57%;
  font-size: 44px;
}

.expanded #techFleetDotsContainer {
  top: 476px;
  left: 630px;
}

.expanded .techFleetDiagonalArrowsButton {
  top: -190px;
  right: 30px;
}

.techFleetDiagonalArrowsButton {
  position: absolute;
  top: 210px;
  right: 1360px;
  padding: 0;
  background-color: #fff;
  border: 2px solid #000;
  border-radius: 10px;
  cursor: pointer;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  width: 50px;
  height: 50px;
  justify-items: center;
  align-items: center;
}


/* Expanded styles */
.expanded .techFleetDiagonalArrowsButton {
  top: -180px;
  right: 30px;
}


.metaVideoContainer {
  margin-top: 0px;
  text-align: center;
  position: absolute;
  top: 242px;
  left: 833px;
  width: 570px;
}
.metaVideoContainer video {
  max-width: 200%;
  border-radius: 5px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.personalCurrentProjectsMessage1 {
  padding: 20px;
  margin-bottom: 10px;
  position: absolute;
  top: 90px;
  left: 630px;
  font-family: 'Playfair Display', serif;
  font-size: 21px;
  color: #333;
  width: 810px;
  background-color: #fdd1d7;
  border: 2px dashed #ddb488;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}


.videoContainer {
  padding: 10px;
  margin-bottom: 10px;
  position: absolute;
  top: 120px;
  left: 0px;
}
.decksimDevelopmentTimelineMessage1, .decksimDevelopmentTimelineMessage2, .decksimDevelopmentTimelineMessage3 {
  padding: 20px;
  margin-bottom: 10px;
  font-family: 'Playfair Display', serif;
  font-size: 20px;
  color: #333;
  background-color: #fdd1d7;
  border: 2px dashed #ddb488;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  position: absolute;
}

.decksimDevelopmentTimelineMessage1 {
  top: 280px;
  left: 30px;
  width: 360px;
}

.decksimDevelopmentTimelineMessage2 {
  top: 240px;
  left: 520px;
  width: 460px;
}

.decksimDevelopmentTimelineMessage3 {
  top: 280px;
  left: 1030px;
  font-size: 18px;
  width: 430px;
}

.navItem.active {
  background-color: #000;
  color: #fff;
  font-weight: bold;
}

#metaImage {
  width: 150px;
  max-width: 700px;
  margin-bottom: 20px;
  display: block;
  margin-left: auto;
  margin-right: auto;
  border-radius: 10px;
  position: absolute;
  top: 93px;
  left: 70px;
  z-index: 10000;
}

/* Container for the image */
.TechFleetimageContainer {
  text-align: center;
  margin-bottom: 20px;
  position: absolute;
  top: 53px;
  left: 130px;
  width: 80px;
}

/* Style for the image */
.TechFleetimageContainer img {
  max-width: 100%; /* Ensure the image scales down if necessary */
  height: auto; /* Maintain the aspect ratio */
  border: 2px solid #ca3d9b00; /* Add a border to the image */
  border-radius: 10px; /* Add rounded corners to the image */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Add a subtle shadow */
}

#graduateTabContentContainer {
  margin-top: 20px;
  padding: 20px;
  border: 4px solid #0f0c0c;
  border-radius: 5px;
  background-color: #f9f9f900;
  position: absolute;
  top: 70px;
  left: 20px;
  width: 1450px;
  height: 593px;
}

#undergraduateTabContentContainer {
  margin-top: 20px;
  padding: 20px;
  border: 4px solid #0f0c0c;
  border-radius: 5px;
  background-color: #f9f9f900;
  position: absolute;
  top: 70px;
  left: 20px;
  width: 1450px;
  height: 593px;
}

#graduateTabContainer {
  margin-top: 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  position: absolute;
  top: 90px;
  left: 910px;
  width: 580px;
  justify-content: center; /* Center the tabs horizontally */
  z-index: 10000;
}

#graduateTabContainerTabs .tab {
  cursor: pointer;
  font-size: 22px;
  color: #333;
  padding: 8px 16px; /* Adjust padding for a more oval shape */
  border-radius: 25px; /* Rounded corners to create an oval shape */
  background-color: #fff; /* White background */
  border: 2px solid #000; /* Black border */
  transition: color 0.3s, background-color 0.3s;
  flex: 0 1 auto;
  font-family: 'Georgia', serif; /* Added to match the font family */
}

#graduateTabContainerTabs .tab:hover {
  color: #fff;
  background-color: #888;
}

#graduateTabContentContainer {
  margin-top: 20px;
  padding: 20px;
  border: 4px solid #0f0c0c;
  border-radius: 5px;
  background-color: #f9f9f900;
  position: absolute;
  top: 70px;
  left: 20px;
  width: 1450px;
  height: 593px;
}

#graduateImageContainer {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 20px;
  position: absolute;
  top: 32px;
  left: 120px;
  width: 80px;
  height: 80px;
  border-radius: 5px;
  overflow: hidden;
  background-color: #f0f0f000;
}

.graduateImage {
  max-width: 70px;
  height: auto;
  border: 4px solid #0f0c0c;
  border-radius: 5px;
}

#undergraduateImageContainer {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 0px;
  position: absolute;
  top: 42px;
  left: 50px;
  width: 230px;
  height: 90px;
  border-radius: 5px;
  overflow: hidden;
  background-color: #f0f0f000;
}

.undergraduateImage {
  max-width: 36%;
  height: auto;
  border: 4px solid #0f0c0c;
  border-radius: 5px;
}


#personalImageContainer {
  text-align: center;
  margin-bottom: 20px;
  position: absolute;
  top: 83px;
  left: 130px;
  width: 80px;
}

.personalImage {
  max-width: 100%;
  max-height: 100%;
}

#overallImageContainer {
  text-align: center;
  margin-bottom: 20px;
  position: absolute;
  top: 103px;
  left: 60px;
  width: 120px;
}

.skillsImage {
  max-width: 100%;
  max-height: 100%;
}

#overallTabContainer {
  margin-top: 15px;
  display: flex;
  gap: 10px;
  position: absolute;
  top: 70px;
  left: 245px;
  width: 990px;
  background-color: #f4f4f447;
}

.overallTabs {
  cursor: pointer;
  font-size: 22px;
  color: #333;
  padding: 8px 16px;
  border-radius: 25px;
  background-color: #fff;
  border: 2px solid #000;
  transition: color 0.3s, background-color 0.3s;
  flex: 0 1 auto;
  font-family: 'Georgia', serif;
}

#overallTabContentContainer {
  margin-top: 20px;
  padding: 20px;
  border: 4px solid #0f0c0c;
  border-radius: 5px;
  background-color: #f9f9f900;
  position: absolute;
  top: 113px;
  left: 5px;
  width: 1470px;
  height: 7110px;
}

.collaboration1 {
  padding: 20px;
  margin-bottom: 10px;
  position: absolute;
  top: 260px;
  left: 770px;
  width: 650px;
  font-family: 'Playfair Display', serif;
  font-size: 20px;
  color: #333;
  background-color: #eaf4fc;
  border: 2px dashed #ca3d9a;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.collaboration2 {
  padding: 20px;
  margin-bottom: 10px;
  position: absolute;
  top: 620px;
  left: 770px;
  width: 650px;
  font-family: 'Playfair Display', serif;
  font-size: 20px;
  color: #333;
  background-color: #eaf4fc;
  border: 2px dashed #ca3d9a;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.collaboration3 {
  padding: 20px;
  margin-bottom: 10px;
  position: absolute;
  top: 950px;
  left: 770px;
  width: 650px;
  font-family: 'Playfair Display', serif;
  font-size: 20px;
  color: #333;
  background-color: #eaf4fc;
  border: 2px dashed #ca3d9a;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}


.collaboration4 {
  padding: 10px;
  margin-bottom: 10px;
  position: absolute;
  top: 1280px;
  left: 760px;
  width: 680px;
  font-family: 'Playfair Display', serif;
  font-size: 20px;
  color: #333;
  background-color: #f7f2c6;
  border: 2px dashed #d64381;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}



.collaboration5 {
  padding: 20px;
  margin-bottom: 10px;
  position: absolute;
  top: 262px;
  left: 20px;
  width: 650px;
  font-family: 'Playfair Display', serif;
  font-size: 40px;
  color: #333;
  background-color: #eaf4fc;
  border: 2px dashed #ca3d9a;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}


.collaboration6 {
  padding: 10px;
  margin-bottom: 10px;
  position: absolute;
  top: 1280px;
  left: 20px;
  width: 650px;
  font-family: 'Playfair Display', serif;
  font-size: 40px;
  color: #333;

  background-color: #f7f2c6;
  border: 2px dashed #d64381;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}




/* Presentation Skills Messages */
.presentationskills1, .presentationskills2, .presentationskills3, .presentationskills6 {
  padding: 20px;
  margin-bottom: 10px;
  position: absolute;
  font-family: 'Playfair Display', serif;
  font-size: 21px;
  color: #333;
  background-color: #d5ffda;
  border: 2px dashed #c166ff;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.presentationskills1 {
  top: 300px;
  left: 730px;
  width: 730px;
}

.presentationskills2 {
  top: 490px;
  left: 730px;
  width: 730px;
}

.presentationskills3 {
  top: 850px;
  left: 730px;
  width: 730px;
}

.presentationskills6 {
  top: 300px;
  left: 20px;
  width: 650px;
}


/* Presentations Skills Messages with Slavefreetrade Style */
.presentationskills4, .presentationskills5, .presentationskills7 {
  padding: 20px;
  margin-bottom: 10px;
  position: absolute;
  font-family: 'Playfair Display', serif;
  font-size: 19px;
  color: #333;
  background-color: #f7f2c6;
  border: 2px dashed #d64381;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.presentationskills4 {
  top: 1160px;
  left: 730px;
  width: 730px;
}

.presentationskills5 {
  top: 1570px;
  left: 730px;
  width: 730px;
}

.presentationskills7 {
  top: 1130px;
  left: 20px;
  width: 650px;
  font-size: 30px;
}


.leadershipskills1 {
  padding: 20px;
  margin-bottom: 10px;
  position: absolute;
  top: 290px;
  left: 790px;
  width: 650px;
  font-family: 'Playfair Display', serif;
  font-size: 20px;
  color: #333;
  background-color: #eaf4fc;
  border: 2px dashed #ca3d9a;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.leadershipskills2 {
  padding: 20px;
  margin-bottom: 10px;
  position: absolute;
  top: 840px;
  left: 790px;
  width: 650px;
  font-family: 'Playfair Display', serif;
  font-size: 20px;
  color: #333;
  background-color: #eaf4fc;
  border: 2px dashed #ca3d9a;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.leadershipskills3 {
  padding: 20px;
  margin-bottom: 10px;
  position: absolute;
  top: 290px;
  left: 20px;
  width: 650px;
  font-family: 'Playfair Display', serif;
  font-size: 20px;
  color: #333;
  background-color: #eaf4fc;
  border: 2px dashed #ca3d9a;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}


.coding1 {
  padding: 20px;
  margin-bottom: 10px;
  font-family: 'Playfair Display', serif;
  font-size: 22px;
  color: #333;
  width: 650px;
  background-color: #fdd1d7;
  border: 2px dashed #ddb488;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  position: absolute;
  top: 270px;
  left: 790px;
}

/* Coding Messages */
.coding2 {
  padding: 20px;
  margin-bottom: 10px;
  font-family: 'Playfair Display', serif;
  font-size: 22px;
  color: #333;
  width: 650px;
  background-color: #fdd1d7;
  border: 2px dashed #ddb488;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  position: absolute;
  top: 610px;
  left: 790px;
}

.coding3 {
  padding: 20px;
  margin-bottom: 10px;
  font-family: 'Playfair Display', serif;
  font-size: 26px;
  color: #333;
  width: 700px;
  background-color: #fdd1d7;
  border: 2px dashed #ddb488;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  position: absolute;
  top: 270px;
  left: 20px;
}

/* Meta Messages */
.metaMessage {
  padding: 20px;
  margin-bottom: 10px;
  position: absolute;
  font-family: 'Playfair Display', serif;
  font-size: 20px;
  color: #333;
  background-color: #eaf4fc;
  border: 2px dashed #ca3d9a;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Undergrad Messages */
.undergradMessage {
  padding: 20px;
  margin-bottom: 10px;
  position: absolute;
  font-family: 'Playfair Display', serif;
  font-size: 22px;
  color: #333;
  background-color: #fde1d1;
  border: 2px dashed #ff959f;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Slavefreetrade Messages */
.slavefreetradeMessage {
  padding: 20px;
  margin-bottom: 10px;
  position: absolute;
  font-family: 'Playfair Display', serif;
  font-size: 19px;
  color: #333;
  background-color: #f7f2c6;
  border: 2px dashed #d64381;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Decksim.in Messages */
.decksimMessage {
  padding: 20px;
  margin-bottom: 10px;
  font-family: 'Playfair Display', serif;
  font-size: 26px;
  color: #333;
  background-color: #fdd1d7;
  border: 2px dashed #ddb488;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  position: absolute;
}

/* Tech Fleet (internal) Messages */
.techfleetMessage {
  padding: 20px;
  margin-bottom: 10px;
  position: absolute;
  font-family: 'Playfair Display', serif;
  font-size: 27px;
  color: #333;
  background-color: #d5ffda;
  border: 2px dashed #c166ff;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Surveys Messages */
.surveys1 {
  padding: 20px;
  margin-bottom: 10px;
  position: absolute;
  top: 300px;
  left: 700px;
  width: 740px;
  font-family: 'Playfair Display', serif;
  font-size: 20px;
  color: #333;
  background-color: #eaf4fc;
  border: 2px dashed #ca3d9a;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.surveys2 {
  padding: 20px;
  margin-bottom: 10px;
  position: absolute;
  top: 755px;
  left: 700px;
  width: 740px;
  font-family: 'Playfair Display', serif;
  font-size: 20px;
  color: #333;
  background-color: #fde1d1;
  border: 2px dashed #ff959f;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.surveys3 {
  padding: 20px;
  margin-bottom: 10px;
  position: absolute;
  top: 1365px;
  left: 700px;
  width: 740px;
  font-family: 'Playfair Display', serif;
  font-size: 20px;
  color: #333;
  background-color: #f7f2c6;
  border: 2px dashed #d64381;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* User Interviews Messages */
.userinterviews1 {
  padding: 20px;
  margin-bottom: 10px;
  position: absolute;
  top: 1760px;
  left: 700px;
  width: 740px;
  font-family: 'Playfair Display', serif;
  font-size: 20px;
  color: #333;
  background-color: #eaf4fc;
  border: 2px dashed #ca3d9a;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.userinterviews2 {
  padding: 20px;
  margin-bottom: 10px;
  position: absolute;
  top: 2160px;
  left: 700px;
  width: 740px;
  font-family: 'Playfair Display', serif;
  font-size: 20px;
  color: #333;
  background-color: #fdd1d7;
  border: 2px dashed #ddb488;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.userinterviews3 {
  padding: 20px;
  margin-bottom: 10px;
  position: absolute;
  top: 3283px;
  left: 700px;
  width: 740px;
  font-family: 'Playfair Display', serif;
  font-size: 20px;
  color: #333;
  background-color: #fdd1d7;
  border: 2px dashed #ddb488;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.userinterviews4 {
  padding: 20px;
  margin-bottom: 10px;
  position: absolute;
  top: 4045px;
  left: 700px;
  width: 740px;
  font-family: 'Playfair Display', serif;
  font-size: 20px;
  color: #333;
  background-color: #d5ffda;
  border: 2px dashed #c166ff;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.userinterviews5 {
  padding: 20px;
  margin-bottom: 10px;
  position: absolute;
  top: 4575px;
  left: 700px;
  width: 740px;
  font-family: 'Playfair Display', serif;
  font-size: 20px;
  color: #333;
  background-color: #f7f2c6;
  border: 2px dashed #d64381;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Usability Testing Messages */
.usabilitytesting1 {
  padding: 20px;
  margin-bottom: 10px;
  position: absolute;
  top: 4990px;
  left: 700px;
  width: 740px;
  font-family: 'Playfair Display', serif;
  font-size: 20px;
  color: #333;
  background-color: #eaf4fc;
  border: 2px dashed #ca3d9a;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.usabilitytesting2 {
  padding: 20px;
  margin-bottom: 10px;
  position: absolute;
  top: 5330px;
  left: 700px;
  width: 740px;
  font-family: 'Playfair Display', serif;
  font-size: 20px;
  color: #333;
  background-color: #fdd1d7;
  border: 2px dashed #ddb488;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* A/B Testing Messages */
.abtesting1 {
  padding: 20px;
  margin-bottom: 10px;
  position: absolute;
  top: 5670px;
  left: 700px;
  width: 740px;
  font-family: 'Playfair Display', serif;
  font-size: 20px;
  color: #333;
  background-color: #eaf4fc;
  border: 2px dashed #ca3d9a;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.abtesting2 {
  padding: 20px;
  margin-bottom: 10px;
  position: absolute;
  top: 6150px;
  left: 700px;
  width: 740px;
  font-family: 'Playfair Display', serif;
  font-size: 20px;
  color: #333;
  background-color: #fdd1d7;
  border: 2px dashed #ddb488;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Focus Groups Messages */
.focusgroups1 {
  padding: 20px;
  margin-bottom: 10px;
  position: absolute;
  top: 6600px;
  left: 700px;
  width: 740px;
  font-family: 'Playfair Display', serif;
  font-size: 20px;
  color: #333;
  background-color: #eaf4fc;
  border: 2px dashed #ca3d9a;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Tree Testing Messages */
.treetesting1 {
  padding: 20px;
  margin-bottom: 10px;
  position: absolute;
  top: 6865px;
  left: 700px;
  width: 740px;
  font-family: 'Playfair Display', serif;
  font-size: 20px;
  color: #333;
  background-color: #eaf4fc;
  border: 2px dashed #ca3d9a;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
/* Five Second Testing Messages */
.fivesecondtesting1 {
  padding: 20px;
  margin-bottom: 10px;
  position: absolute;
  top: 7290px;
  left: 700px;
  width: 740px;
  font-family: 'Playfair Display', serif;
  font-size: 20px;
  color: #333;
  background-color: #eaf4fc;
  border: 2px dashed #ca3d9a;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}


#backToSkillsButton {
  padding: 10px 20px;
  margin: 10px;
  background-color: #3772fd;
  color: #fff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 26px;
  position: fixed;
  bottom: 20px;
  left: 20px;
  z-index: 1000;
  transition: background-color 0.3s ease;
}

#backToSkillsButton:hover {
  background-color: #2b5fc0;
}

#collaborationButton1, #collaborationButton2 {
  padding: 10px 20px;
  margin: 10px;
  background-color: transparent;
  color: #3772fd;
  border: 2px solid #3772fd;
  border-radius: 5px;
  cursor: pointer;
  font-size: 26px;
  position: relative;
  display: inline-block;
  transition: all 0.3s ease;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

#collaborationButton1:hover, #collaborationButton2:hover {
  background-color: #3772fd;
  color: #fff;
}


#collaborationButton1 {
  top: 680px;
  left: 0px;
}

#collaborationButton2 {
  top: 1650px;
  left: -440px;
}

#presentationButton1, #presentationButton2, #presentationButton3 {
  padding: 10px 20px;
  margin: 10px;
  background-color: transparent;
  color: #3772fd;
  border: 2px solid #3772fd;
  border-radius: 5px;
  cursor: pointer;
  font-size: 26px;
  position: relative;
  display: inline-block;
  transition: all 0.3s ease;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

#presentationButton1:hover, #presentationButton2:hover, #presentationButton3:hover {
  background-color: #3772fd;
  color: #fff;
}

#presentationButton1 {
  top: 600px;
  left: 0px;
}

#presentationButton2 {
  top: 1490px;
  left: -668px;
}
#presentationButton3 {
  top: 1500px;
  left: 0px;
}

/* General Button Styles */
#leadershipButton1, #leadershipButton2 {
  padding: 10px 20px;
  margin: 10px;
  background-color: transparent;
  color: #3772fd;
  border: 2px solid #3772fd;
  border-radius: 5px;
  cursor: pointer;
  font-size: 26px;
  position: relative;
  display: inline-block;
  transition: all 0.3s ease;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* Hover Effect */
#leadershipButton1:hover, #leadershipButton2:hover {
  background-color: #3772fd;
  color: #fff;
}

/* Positioning */
#leadershipButton1 {
  top: 790px;
  left: 0px;
}

#leadershipButton2 {
  top: 940px;
  left: -434px;
}

/* General Button Styles */
#codingButton1, #codingButton2 {
  padding: 10px 20px;
  margin: 10px;
  background-color: transparent;
  color: #3772fd;
  border: 2px solid #3772fd;
  border-radius: 5px;
  cursor: pointer;
  font-size: 26px;
  position: relative;
  display: inline-block;
  transition: all 0.3s ease;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* Hover Effect */
#codingButton1:hover, #codingButton2:hover {
  background-color: #3772fd;
  color: #fff;
}

/* Positioning */
#codingButton1 {
  top: 560px;
  left: 0px;
}

#codingButton2 {
  top: 700px;
  left: -400px;
}

.uxmethods1 {
  padding: 10px;
  margin-bottom: 10px;
  position: absolute;
  top: 300px;
  left: 20px;
  width: 650px;
  font-family: 'Playfair Display', serif;
  font-size: 20px;
  color: #333;
}

.uxmethods2 {
  padding: 10px;
  margin-bottom: 10px;
  position: absolute;
  top: 1760px;
  left: 20px;
  width: 650px;
  font-family: 'Playfair Display', serif;
  font-size: 20px;
  color: #333;
}

.uxmethods3 {
  padding: 10px;
  margin-bottom: 10px;
  position: absolute;
  top: 4990px;
  left: 20px;
  width: 650px;
  font-family: 'Playfair Display', serif;
  font-size: 20px;
  color: #333;
}

.uxmethods4 {
  padding: 10px;
  margin-bottom: 10px;
  position: absolute;
  top: 5660px;
  left: 20px;
  width: 650px;
  font-family: 'Playfair Display', serif;
  font-size: 20px;
  color: #333;
}

.uxmethods5 {
  padding: 10px;
  margin-bottom: 10px;
  position: absolute;
  top: 6600px;
  left: 20px;
  width: 650px;
  font-family: 'Playfair Display', serif;
  font-size: 20px;
  color: #333;
}

.uxmethods6 {
  padding: 10px;
  margin-bottom: 10px;
  position: absolute;
  top: 6870px;
  left: 20px;
  width: 650px;
  font-family: 'Playfair Display', serif;
  font-size: 20px;
  color: #333;
}

.uxmethods7 {
  padding: 10px;
  margin-bottom: 10px;
  position: absolute;
  top: 7300px;
  left: 20px;
  width: 650px;
  font-family: 'Playfair Display', serif;
  font-size: 20px;
  color: #333;
}
/* Survey Buttons */
#surveyButton1 {
  padding: 10px 20px;
  margin: 10px;
  background-color: transparent;
  color: #3772fd;
  border: 2px solid #3772fd;
  border-radius: 5px;
  cursor: pointer;
  font-size: 26px;
  position: absolute;
  top: 450px;
  left: 20px;
  display: inline-block;
  transition: all 0.3s ease;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

#surveyButton1:hover {
  background-color: #3772fd;
  color: #fff;
}

#surveyButton2 {
  padding: 10px 20px;
  margin: 10px;
  background-color: transparent;
  color: #3772fd;
  border: 2px solid #3772fd;
  border-radius: 5px;
  cursor: pointer;
  font-size: 26px;
  position: absolute;
  top: 770px;
  left: 20px;
  display: inline-block;
  transition: all 0.3s ease;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

#surveyButton2:hover {
  background-color: #3772fd;
  color: #fff;
}

#surveyButton3 {
  padding: 10px 20px;
  margin: 10px;
  background-color: transparent;
  color: #3772fd;
  border: 2px solid #3772fd;
  border-radius: 5px;
  cursor: pointer;
  font-size: 26px;
  position: absolute;
  top: 1370px;
  left: 20px;
  display: inline-block;
  transition: all 0.3s ease;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

#surveyButton3:hover {
  background-color: #3772fd;
  color: #fff;
}

/* User Interview Buttons */
#userInterviewButton1 {
  padding: 10px 20px;
  margin: 10px;
  background-color: transparent;
  color: #3772fd;
  border: 2px solid #3772fd;
  border-radius: 5px;
  cursor: pointer;
  font-size: 26px;
  position: absolute;
  top: 1910px;
  left: 20px;
  display: inline-block;
  transition: all 0.3s ease;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

#userInterviewButton1:hover {
  background-color: #3772fd;
  color: #fff;
}

#userInterviewButton2 {
  padding: 10px 20px;
  margin: 10px;
  background-color: transparent;
  color: #3772fd;
  border: 2px solid #3772fd;
  border-radius: 5px;
  cursor: pointer;
  font-size: 26px;
  position: absolute;
  top: 2170px;
  left: 20px;
  display: inline-block;
  transition: all 0.3s ease;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

#userInterviewButton2:hover {
  background-color: #3772fd;
  color: #fff;
}

#userInterviewButton3 {
  padding: 10px 20px;
  margin: 10px;
  background-color: transparent;
  color: #3772fd;
  border: 2px solid #3772fd;
  border-radius: 5px;
  cursor: pointer;
  font-size: 26px;
  position: absolute;
  top: 4580px;
  left: 20px;
  display: inline-block;
  transition: all 0.3s ease;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

#userInterviewButton3:hover {
  background-color: #3772fd;
  color: #fff;
}

/* Usability Testing Buttons */
#usabilityTestingButton1 {
  padding: 10px 20px;
  margin: 10px;
  background-color: transparent;
  color: #3772fd;
  border: 2px solid #3772fd;
  border-radius: 5px;
  cursor: pointer;
  font-size: 26px;
  position: absolute;
  top: 5120px;
  left: 20px;
  display: inline-block;
  transition: all 0.3s ease;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

#usabilityTestingButton1:hover {
  background-color: #3772fd;
  color: #fff;
}

#usabilityTestingButton2 {
  padding: 10px 20px;
  margin: 10px;
  background-color: transparent;
  color: #3772fd;
  border: 2px solid #3772fd;
  border-radius: 5px;
  cursor: pointer;
  font-size: 26px;
  position: absolute;
  top: 5350px;
  left: 20px;
  display: inline-block;
  transition: all 0.3s ease;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

#usabilityTestingButton2:hover {
  background-color: #3772fd;
  color: #fff;
}

/* A/B Testing Buttons */
#abTestingButton1 {
  padding: 10px 20px;
  margin: 10px;
  background-color: transparent;
  color: #3772fd;
  border: 2px solid #3772fd;
  border-radius: 5px;
  cursor: pointer;
  font-size: 26px;
  position: absolute;
  top: 5830px;
  left: 20px;
  display: inline-block;
  transition: all 0.3s ease;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

#abTestingButton1:hover {
  background-color: #3772fd;
  color: #fff;
}

#abTestingButton2 {
  padding: 10px 20px;
  margin: 10px;
  background-color: transparent;
  color: #3772fd;
  border: 2px solid #3772fd;
  border-radius: 5px;
  cursor: pointer;
  font-size: 26px;
  position: absolute;
  top: 6180px;
  left: 20px;
  display: inline-block;
  transition: all 0.3s ease;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

#abTestingButton2:hover {
  background-color: #3772fd;
  color: #fff;
}

/* Focus Groups Button */
#focusGroupsButton {
  padding: 10px 20px;
  margin: 10px;
  background-color: transparent;
  color: #3772fd;
  border: 2px solid #3772fd;
  border-radius: 5px;
  cursor: pointer;
  font-size: 26px;
  position: absolute;
  top: 6750px;
  left: 20px;
  display: inline-block;
  transition: all 0.3s ease;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

#focusGroupsButton:hover {
  background-color: #3772fd;
  color: #fff;
}

/* Tree Testing Button */
#treeTestingButton {
  padding: 10px 20px;
  margin: 10px;
  background-color: transparent;
  color: #3772fd;
  border: 2px solid #3772fd;
  border-radius: 5px;
  cursor: pointer;
  font-size: 26px;
  position: absolute;
  top: 7010px;
  left: 20px;
  display: inline-block;
  transition: all 0.3s ease;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

#treeTestingButton:hover {
  background-color: #3772fd;
  color: #fff;
}

/* Five Second Test Button */
#fiveSecondTestButton {
  padding: 10px 20px;
  margin: 10px;
  background-color: transparent;
  color: #3772fd;
  border: 2px solid #3772fd;
  border-radius: 5px;
  cursor: pointer;
  font-size: 26px;
  position: absolute;
  top: 7440px;
  left: 20px;
  display: inline-block;
  transition: all 0.3s ease;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

#fiveSecondTestButton:hover {
  background-color: #3772fd;
  color: #fff;
}


.overallSkills1 {
  padding: 10px;
  margin-bottom: 10px;
  position: absolute;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  width: 1240px;
  font-family: 'Playfair Display', serif;
  font-size: 35px;
  color: #333;
  text-align: center;
}

.decksimImageContainer {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 20px;
  position: absolute;
  top: 282px;
  left: 50px;
  width: 500px;
  height: 280px;
  border-radius: 5px;
  overflow: hidden;
  background-color: #f0f0f0;
  z-index: 20000;
}

#decksimCurrentImage {
  width: 100%;
  height: 100%;
  object-fit: contain; /* Scale the image to fit the container */
  border-radius: 5px;
}


.decksimLeftArrow,
.decksimRightArrow {
  cursor: pointer;
  font-size: 24px;
  user-select: none;
  padding: 10px;
  color: #333;
  background-color: #f9f9f9;
  border-radius: 5px;
  position: absolute;
  z-index: 1000; /* Ensure arrows are above the image container */
}

.decksimLeftArrow {
  left: 0px;
  top: 470px;
  transform: translateY(-50%);
}

.decksimRightArrow {
  right: 909px;
  top: 470px;
  transform: translateY(-50%);
}

.decksimDotsContainer {
  display: flex;
  justify-content: center;
  margin-top: 10px;
  position: absolute;
  top: 562px;
  left: 260px;
  z-index: 30000;
}

.decksimDotsContainer .dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.decksimDotsContainer .dot.active {
  background-color: #717171;
}

.decksimDiagonalArrowsButton {
  position: absolute;
  top: 300px;
  right: 900px;
  padding: 0;
  background-color: #fff;
  border: 2px solid #000;
  border-radius: 10px;
  cursor: pointer;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  width: 50px;
  height: 50px;
  justify-items: center;
  align-items: center;
}

.decksimDiagonalArrow {
  font-size: 18px;
  width: 10px;
  height: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

/* Expanded styles */
.expanded #decksimImageContainer {
  top: -118px;
  left: 130px;
  width: 1220px;
  height: 680px;
}

.expanded .decksimLeftArrow {
  left: 40px;
  top: 220px;
  font-size: 44px;
}

.expanded .decksimRightArrow {
  right: 10px;
  top: 220px;
  font-size: 44px;
}

.expanded #decksimDotsContainer {
  top: 556px;
  left: 630px;
}

.expanded .decksimDiagonalArrowsButton {
  top: -80px;
  right: 90px;
}